/* ============================================================================
    Navigation
============================================================================ */
#headerbar {
    position: fixed;
    top: 0;
    width:100%;
    max-width: 1920px;
    height:113px;
    background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;
    transition: top 0.3s;
    z-index:900;
}

.breadcrumb {padding:20px 0 0 0;}

a.guide-link {color:#0095DA;text-decoration: none;}
a.guide-link:hover {color:#0095DA;text-decoration: underline;}

.header-title {padding:20px 0 0 0;}
.header-title h1 {font-size: 28px;line-height:30px;font-weight:700;}
.header-title-mob {display: none;}

.header-desc {padding:20px 0 0 0;}

.layerguides-wrapper {width:100%;max-width:1920px;margin:113px auto 0 auto;}

.layer1-wrapper {width:100%;max-width:1920px;margin:20px auto 0 auto;position:relative;display: flex;flex-wrap: wrap;justify-content: space-between;}
.blog-main-item {width:627px;min-height:660px;background:#F5F5F5;order:1;margin:20px 0 0 0;}
.blog-main-item-inside {width: 100%;max-width:560px;margin:30px auto 0 auto;}

.blog-intro-title h2 {font-size: 16px;line-height:19px;font-weight: 600;}
.blog-main-intro-link {padding:30px 0 0 0;}


.blog-intro-content a {color:#0095DA;text-decoration: none;}
.blog-intro-content a:hover {color:#0095DA;text-decoration: underline;}


/* inside */
.blog-article-section {width:100%;max-width:1000px;margin:123px auto 0 auto;position: relative;}
.blog-article-photo {}
.blogphotodesc {width:100%;padding:3px 0 0 0;font-size:13px;line-height:16px;}
.blog-article-title {padding: 50px 0 0 0;}
.blog-article-title h1 {font-size: 28px;line-height:30px;font-weight: 600;}
.blog-article-content {padding:20px 0 0 0;}
.blog-article-link {padding:40px 0 0 0;}

.blog-article-content h2 {font-size: 24px;line-height:26px;font-weight: 600;padding:20px 0 10px 0;}
.blog-article-content h3 {font-size: 20px;line-height:22px;font-weight: 600;padding:20px 0 10px 0;}

.blog-article-content a {color:#0095DA;text-decoration: none;}
.blog-article-content a:hover {color:#0095DA;text-decoration: underline;}

.blog-article-content ul {list-style-type: square;padding:25px 0 0 20px;line-height: 21px;}
.blog-article-content li {padding-left: 10px;margin-bottom: 10px;}
.blog-article-content li:before {
    margin-left: -30px;
    margin-right: 10px;
    width: 20px;
    height: 21px;
    top:4px;
}

/* ============================================================================
    responsive
============================================================================ */
@media only screen and (min-width: 1440px) and (max-width: 1919px){
    #headerbar {width: 100%;height:80px;transition: top 0.3s;z-index:999;background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;}

    .layerguides-wrapper {width:95%;margin:80px auto 0 auto;}
    .layer1-wrapper {margin:20px auto 0 auto;}
    .blog-main-item {width:32.333%;min-height:300px;}
    .blog-main-item-inside {width: 95%;margin:10px auto 0 auto;}
    .blog-main-intro-link {padding:20px 0 20px 0;}
}
@media only screen and (min-width: 1200px) and (max-width: 1439px){
    #headerbar {width: 100%;height:50px;transition: top 0.3s;z-index:999;background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;background-size: 235px 161px;}
    .header-title h1 {font-size: 24px;line-height:24px;}

    .layerguides-wrapper {width:95%;margin:50px auto 0 auto;}
    .layer1-wrapper {margin:20px auto 0 auto;}
    .blog-main-item {width:49.222%;min-height:300px;}
    .blog-main-item-inside {width: 95%;margin:20px auto 0 auto;}
    .blog-main-intro-link {padding:20px 0 20px 0;}

    /* inside */
    .blog-article-section {margin:64px auto 0 auto;}
}

@media only screen and (min-width: 1024px) and (max-width: 1199px){
    #headerbar {width: 100%;height:44px;transition: top 0.3s;z-index:999;background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;background-size: 235px 161px;}
    .header-title h1 {font-size: 24px;line-height:24px;}

    .layerguides-wrapper {width:95%;margin:50px auto 0 auto;}
    .layer1-wrapper {margin:20px auto 0 auto;}
    .blog-main-item {width:49%;min-height:300px;}
    .blog-main-item-inside {width: 95%;margin:20px auto 0 auto;}
    .blog-main-intro-link {padding:20px 0 20px 0;}

    /* inside */
    .blog-article-section {margin:64px auto 0 auto;}
}

@media only screen and (min-width: 728px) and (max-width: 1023px){
    #headerbar {width: 100%;height:44px;transition: top 0.3s;z-index:999;background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;background-size: 206px 141px;}
    .header-title h1 {font-size: 24px;line-height:24px;}

    .layerguides-wrapper {width:95%;margin:50px auto 0 auto;}
    .layer1-wrapper {margin:20px auto 0 auto;justify-content: initial;}
    .blog-main-item {width:100%;min-height:300px;}
    .blog-main-intro-link {padding:20px 0 20px 0;}

    /* inside */
    .blog-article-section {width:95%;margin:54px auto 0 auto;}
    .blog-article-title {padding: 30px 0 0 0;}
    .blog-article-title h1 {font-size: 23px;line-height:28px;}
    .blog-article-link {padding:20px 0 0 0;}
}

@media only screen and (min-width: 480px) and (max-width: 727px){
    #headerbar {width: 100%;height:50px;transition: top 0.3s;z-index:999;background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;background-size: 206px 141px;}

    .layerguides-wrapper {width:95%;margin:50px auto 0 auto;}
    .header-title {font-size: 26px;line-height:28px;font-weight:700;}

    .layer1-wrapper {margin:20px auto 0 auto;justify-content: initial;}
    .blog-main-item {width:100%;min-height:300px;}
    .blog-main-intro-link {padding:20px 0 20px 0;}

    /* inside */
    .blog-article-section {margin:50px auto 0 auto;}
    .blogphotodesc {width:95%;margin:0 auto;}
    .blog-article-title {width:95%;margin:0 auto;padding: 30px 0 0 0;}
    .blog-article-title h1 {font-size: 18px;line-height:20px;}
    .blog-article-content {width:95%;margin:0 auto;}
    .blog-article-link {width:95%;margin:0 auto;padding:20px 0 0 0;}
}


@media only screen and (min-width: 320px) and (max-width: 479px){
    #headerbar {width: 100%;height:50px;transition: top 0.3s;z-index:999;background: #2D2D2D url("../img/top-sub-vector.svg") no-repeat top left;background-size: 206px 141px;}

    .layerguides-wrapper {width:95%;margin:50px auto 0 auto;}
    .header-title {font-size: 26px;line-height:28px;font-weight:700;}

    .layer1-wrapper {margin:20px auto 0 auto;justify-content: initial;}
    .blog-main-item {width:100%;min-height:300px;}
    .blog-main-intro-link {padding:20px 0 20px 0;}

    /* inside */
    .blog-article-section {margin:50px auto 0 auto;}
    .blogphotodesc {width:95%;margin:0 auto;}
    .blog-article-title {width:95%;margin:0 auto;padding: 30px 0 0 0;}
    .blog-article-title h1 {font-size: 18px;line-height:20px;}
    .blog-article-content {width:95%;margin:0 auto;}
    .blog-article-link {width:95%;margin:0 auto;padding:20px 0 0 0;}
}