.container-section {background:#fff; min-height:auto; padding-bottom:0; }
.sub-layout .container-section {padding-bottom:100px; }
.wrap {max-width:1200px;}

/* layout animation */
header {animation:show 400ms both 0ms;}
.sub-visual {animation:show 400ms both 100ms;}
#sub-location {animation:show 400ms both 150ms;}
#page_title {animation:show 400ms both 200ms;}
.container-section {animation:show 400ms both 300ms;}

/**/
.post-ul {}
.post-ul > li {position:relative; padding:3px 0 3px 10px; font-size:16px; font-weight:400; }
.post-ul > li:before {content:''; display:block; position:absolute; left:0; top:14px; width:4px; height:4px; background:#1082ed; }
.post-ul > li.non {padding-left:0 !important; }
.post-ul > li.non:before {display:none; }
.post-ul > li .subject {padding-right:100px; }
.post-ul > li .date {text-align:right; width:80px; position:absolute; top:5px; right:0; }
.blue-ul {border-top:3px solid #0e2a55; }
.blue-ul > li {border-right:1px solid #dddddd; }
.blue-ul > li:last-child {border-right:0; }
.blue-ul > li > .head {background:#4672e2; color:#fff; text-align:center; padding:17px 10px; }
.blue-ul > li > .body {background:#fff; padding:35px 20px; }
.blue-ul.style-1 > li > .head {background:#59c0eb; }
.post-ul.big > li {font-size:20px; font-weight:500; }
.post-ul.big > li:before {top:18px; }
.btn-ul {}
.btn-ul > li {padding-left:50px; position:relative; margin:5px 0; font-weight:200; }
.btn-ul .b {
    font-size:15px; padding:2px 5px; border-radius:5px; position:absolute; margin:auto; top:0; right:auto; bottom:auto; left:0;
    font-weight:400;
}
.btn-ul .b.yellow {color:#000; background:#fcee83; }
.btn-ul .b.blue {color:#fff; background:#1082ed; }
.btn-ul .b.deep-blue {color:#fff; background:#0e2a55; }

/* header */
header {width:100%; top:0; left:0; position:fixed; background:#fff; height:80px; z-index:9999; transition:all 500ms; }
#logo {position:absolute; margin:auto; top:0; right:auto; bottom:0; left:15px; z-index:2000; width:209px; height:63px; }
#logo a {display:block; background:url(/images/content/layout/logo.png) no-repeat center center; height:100%; }
#site-map-toggle {display:block; }

/**/
#tnb {height:100%; text-align:center; transition:all 500ms; }
#tnb .wrap {height:100%; }
#tnb ul.m1 {display:inline-block; position:relative; top:21px; }
#tnb li.m1 {position:relative; float:left; }
#tnb a.m1 {font-size:21px; color:#111; margin:0 29px; font-weight: 500;}
#tnb li.m1.active a.m1 {color:#48d1a5;}
#tnb li.m1 a.m1:hover {color:#1082ed;}
#tnb ul.m2 {
    position:absolute; width:100%; top:59px; left:0; display:none; background:#fff; padding:5px 0; line-height:1.2;
    border:1px solid #fff; border-radius:0 30px 0 30px; box-shadow:4px 4px 10px rgba(0,0,0,0.2);
}
#tnb ul.m2.show {z-index:100;}
#tnb li.m2 {padding:7px 10px; }
#tnb a.m2 {font-size:16px; }
#tnb li.m2 a.m2:hover{color:#1082ed;}
/*
#tnb li.m2.active a.m2 {color:#1082ed; }
*/
#tnb ul.m3 {}
#tnb li.m3 {}
#tnb a.m3 {}

@media (max-width:1500px){
    #tnb a.m1 {margin:0 15px; }
    #tnb ul.m2 {width:120%; transform:translateX(-10%);}
}
@media (max-width:1260px){
    #tnb ul.m1 {display:none !important;}
    #tnb ul.m2 {display:none !important;}
}

/* snb */
#snb {
    background:transparent; text-align:center; padding-bottom:30px; display:none; user-select:none;
    transition:all 200ms;
}
#snb .wrap {
    padding:0; background:#fff; border-radius:0 80px 0 80px; opacity:1; transition:all 500ms;
    border:1px solid #ddd; overflow:hidden; margin-top:20px;
}
#snb .ul.m1 {height:100%; margin-left:0; margin-right:0;}
#snb .li.m1 {
    position:relative; display:block; padding:60px 0; transition:all 300ms; opacity:0;
}
#snb .li.m1:hover {background:rgba(244,244,244,244.1);}
#snb .li.m1:after {content:''; display:block; position:absolute; width:1px; height:100%; background:#ddd; right:0; top:0;}
#snb .li.m1:last-child {padding-right:20px;}
#snb .li.m1:last-child:after {display:none;}
#snb .li.m1 > .div.m1 {}
#snb a.m1 {
    display:block; font-size:21px; color:#111; margin-bottom:30px; position:relative;
}
#snb a.m1:before {
    content:''; display:block; position:absolute; width:15px; height:4px; background: #1082ed; margin:auto;
    top:auto; right:0; bottom:-20px; left:0;
}
#snb ul.m2 {float:left; width:100%; display:block; }
#snb li.m2 {padding:0; }
#snb a.m2 {display:block; font-size:16px; font-weight:400; transition:all 300ms; }
#snb a.m2 span {position:relative; display:inline-block; padding:5px;}
#snb a.m2:hover span {font-weight:400; color:#1082ed; background:linear-gradient(to top, rgba(16,130,237,0.6) 10%, transparent 10%); }
#snb ul.m3 {display:none;}
#snb li.m3 {}
#snb a.m3 {}
#snb .li.m1:nth-child(1) a.m2:hover span {color: rgba(255,0,0,1); background:linear-gradient(to top, rgba(255,0,0,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(2) a.m2:hover span {color: rgba(255,165,0,1); background:linear-gradient(to top, rgba(255,165,0,1) 10%, transparent 10%); }
#snb .li.m1:nth-child(3) a.m2:hover span {color: rgb(255,199,156); background:linear-gradient(to top, rgba(255,199,156,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(4) a.m2:hover span {color: rgba(0,128,0,1); background:linear-gradient(to top, rgba(0,128,0,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(5) a.m2:hover span {color: rgba(0,0,255,1); background:linear-gradient(to top, rgba(0,0,255,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(6) a.m2:hover span {color: rgba(75,0,130,1); background:linear-gradient(to top, rgba(75,0,130,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(7) a.m2:hover span {color: rgba(238,130,238,1); background:linear-gradient(to top, rgba(238,130,238,0.6) 10%, transparent 10%); }
#snb .li.m1:nth-child(1) a.m1:before {background: rgba(255,0,0,1);}
#snb .li.m1:nth-child(2) a.m1:before {background: rgba(255,165,0,1);}
#snb .li.m1:nth-child(3) a.m1:before {background: rgb(255,199,156);}
#snb .li.m1:nth-child(4) a.m1:before {background: rgba(0,128,0,1);}
#snb .li.m1:nth-child(5) a.m1:before {background: rgba(0,0,255,1);}
#snb .li.m1:nth-child(6) a.m1:before {background: rgba(75,0,130,1);}
#snb .li.m1:nth-child(7) a.m1:before {background: rgba(238,130,238,1);}
#snb.active {display:block;}
#snb .mobile-menu {padding:20px 30px; text-align:left; display:none;}
#snb .mobile-menu .dropdown-item {padding:0;}

/* 애니메이션 제거시 아래 주석 처리 */
#snb.active .li.m1 {animation:snb_li_show both 700ms;}
#snb.active .li.m1:nth-child(1) {animation-delay: 0ms;}
#snb.active .li.m1:nth-child(2) {animation-delay: 50ms;}
#snb.active .li.m1:nth-child(3) {animation-delay: 100ms;}
#snb.active .li.m1:nth-child(4) {animation-delay: 150ms;}
#snb.active .li.m1:nth-child(5) {animation-delay: 200ms;}
#snb.active .li.m1:nth-child(6) {animation-delay: 250ms;}
#snb.active .li.m1:nth-child(7) {animation-delay: 300ms;}
@keyframes snb_li_show {
    0% {opacity:0;}
    100% {opacity:1;}
}
/* 애니메이션 끝 */

@media (max-width:1260px){
    header {}
    body {overflow-x:hidden; width:100%; max-width:100%;}
    #tnb {z-index:1000; position:relative;}
    #snb {
        padding:0 0 0 10%; z-index:1; top:0; position:fixed; width:100%; transform:translateX(100%);
        height:100vh; overflow:auto; border-top:0;
    }
    #snb .wrap {
        width:auto; height:100%; max-width:100%; border-radius:0; top:0; margin:0; position:relative; padding-top:90px;
        border:0; box-shadow:-10px 0 10px rgba(0,0,0,0.2);
    }
    #snb .wrap > .rect {overflow:auto; height:100%;}
    #snb .ul.m1 {height:auto;padding:0 30px;}
    #snb .row {margin:0;}
    #snb .li.m1.col {
        opacity:1; width:100%; flex:0 0 100%; max-width:100%; border-bottom:1px solid #ddd; padding:0;
        display:block; margin:0; border-right:0;
    }
    #snb .li.m1:after {display:none;}
    #snb a.m1 {text-align:left; margin:0; position:relative; padding:15px;}
    #snb a.m1:before {top:0; right:auto; bottom:0; left:5px; width:4px; height:15px; transform:translateY(1px);}
    #snb a.m1:after {
        content: "\f067"; display:block; font-family: 'Font Awesome 5 Free'; font-weight: 900; position:absolute;
        margin:auto; top:0; right:10px; bottom:0; left:auto; height:18px;
    }
    #snb a.m1.open:after {content: "\f068";}
    #snb ul.m2 {display:none; border-top:1px solid #ddd; margin:0; background:#efefef;}
    #snb li.m2 {text-align:left; padding:6px 20px;}
    #snb.active {animation:snbShowMobileMenu both 1000ms;transform:translateX(0%);}

    #snb li.m2.active ul.m3 {border-bottom:1px solid #ccc;}
    #snb ul.m3 {padding:6px 10px 8px 20px;}
    #snb li.m3 {font-size:16px;padding:2px 0;}
    #snb a.m3 {font-weight:300;}

    @keyframes snbShowMobileMenu {
        0% {transform:translateX(100%);}
        100% {transform:translateX(0%);}
    }

    #snb .mobile-menu {display:block;}

}

/**/
#my {position:absolute; width:75px; height:40px; right:70px; top:20px; }
#my .rect {width:100%; height:100%; }
#my .dropdown-menu {}
#my a.my {
    width:30px; height:30px; display:inline-block; top:5px; position:relative;
    background-repeat:no-repeat; background-position:center center; margin:0;
}
#my .my {background-image:url(/images/content/layout/icon_my_b.png); margin-right:7px; }
#my .search {background-image:url(/images/content/layout/icon_shop_b.png); }
.sub-layout #my .my {background-image:url(/images/content/layout/icon_my_w.png); }
.sub-layout #my .search {background-image:url(/images/content/layout/icon_search_w.png); }

@media (max-width:600px){
    #my {display:none;}

}

/**/
.sub-visual {background:url(/images/content/layout/sub_visual_01.jpg) no-repeat center center; height:350px; position:relative; }
.sub-visual#sub-visual-1 {background-image:url(/images/content/layout/sub_visual_01.jpg);}
.sub-visual#sub-visual-2 {background-image:url(/images/content/layout/sub_visual_02.jpg);}
.sub-visual#sub-visual-3 {background-image:url(/images/content/layout/sub_visual_03.jpg);}
.sub-visual#sub-visual-4 {background-image:url(/images/content/layout/sub_visual_04.jpg);}
.sub-visual#sub-visual-5 {background-image:url(/images/content/layout/sub_visual_05.jpg);}
.sub-visual#sub-visual-6 {background-image:url(/images/content/layout/sub_visual_06.jpg);}
.sub-visual#sub-visual-7 {background-image:url(/images/content/layout/sub_visual_07.jpg);}
.sub-visual#sub-visual-8 {background-image:url(/images/content/layout/sub_visual_08.jpg);}
.sub-visual .rect {color:#fff; text-align:center; position:relative; top:43%; border:1px solid transparent;}
.sub-visual .subVisualText_1 {}
.sub-visual .subVisualText_2 {}
.sub-visual .subVisualText_1 span {animation:subVisualText_1 both 1000ms; position:relative; display:inline-block;}
.sub-visual .subVisualText_2 span {animation:subVisualText_2 both 800ms; display:inline-block;}

@keyframes subVisualText_1 {
    0% {opacity:0; transform:translateY(-10px) rotateY(-180deg);}
    100% {opacity:1;}
}
@keyframes subVisualText_2 {
    0% {opacity:0; /*transform:translateY(0);*/}
    /*50% {transform:translateY(-10px);}*/
    100% {opacity:1;}
}

@media (max-width:1260px){

}
@media (max-width:800px){
    .sub-visual {height:250px;}
}


/**/
.sub-layout header {background:none; }
.sub-layout #logo a {display:block; background-image:url(/images/content/layout/logo_sub.png);}
.sub-layout #tnb a.m1 {color:#fff; }
.sub-layout header.in-active #tnb {background:rgba(0,0,0,0.7); }

/**/
#sub-location {
    height:60px; border-bottom:1px solid #ebebeb; background:linear-gradient(to right, #fff 50%, #1082ed 50%);
    position:relative;  z-index:90;
}
#sub-location .wrap {height:100%; background:#1082ed; }
#sub-location .wrap > div {position:relative; }
#sub-location .home {
    float:left; width:60px; height:100%; 
    background:url(/images/content/layout/icon_home.png) no-repeat center center #fff; 
    border-right:1px solid #ebebeb; 
}
#sub-location .m1 {}
#sub-location .menu {
    float:left; padding:16px; color:#222; min-width:160px; cursor:pointer; user-select: none; height:100%; 
    border-right:1px solid #ebebeb; box-sizing: border-box; background:#fff; 
}
#sub-location .menu ul {
    position:absolute; width:100%; left:0; top:100%; z-index:90; background:#fff; padding:8px 16px; display:none; 
    border:1px solid #fff; transform:translateY(1px); box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
}
#sub-location .menu ul li {padding:3px 0; }
#sub-location .menu .name {position:relative; padding-right:25px; }
#sub-location .menu .name img {position:absolute; margin:auto; top:0; right:0; bottom:0; left:auto; transform:rotate(-90deg); transition:all 300ms; }
#sub-location .menu .name.active img {transform:rotate(0deg); }
@media (max-width:800px){
    #sub-location {display:none;}
}

/**/
#page_title {text-align:center; padding:100px 0 55px 0; font-size:35px; font-weight:900; position:relative; z-index:1;}
#page_title:before {content:''; position:absolute; top:79px; left:49%; width:38px; border-top:1px solid #000; }
#m4-tab {text-align:center; margin-bottom:40px; opacity:0; animation:show both 600ms 100ms; }
#m4-tab li {border-top:1px solid #e0e0e0; position:relative; transition:all 500ms;}
#m4-tab li:after {
    content:''; display:block; width:1px; position:absolute; height:20px; background:#e0e0e0; margin:auto; 
    top:0; right:0; bottom:0; left:auto; transition:all 500ms; 
}
#m4-tab li:last-child:after {display:none; }
#m4-tab li a {border-top:2px solid transparent; display:block; padding:15px; transition:all 500ms; }
#m4-tab li:hover,
#m4-tab li.active {border-top:1px solid #1082ed; }
#m4-tab li:hover a,
#m4-tab li.active a {color:#1082ed; border-top:2px solid #1082ed; }
/*.theme-green #m4-tab li:hover,*/
/*.theme-green #m4-tab li.active {border-top:1px solid #47d1a5; }*/

@media (max-width:800px){
    /*#m4-tab {outline:1px solid red;}*/
    /*#m4-tab li:active {background:red;}*/
    #page_title {padding-top:40px;padding-bottom:30px;}
    #page_title:before{display:none;}
    #m4-tab li {display:none;}
    #m4-tab li.active {display:block; width:100%;}

    /* #m4-tab ul.leaverou li{display: block; flex: 0 0 25%;}
    #m4-tab ul.leaverou li a{font-size: 17px;} */
}

/* footer */
footer {background:#333; position:relative;}
footer .head {background:#444; color:#fff; font-size:20px; user-select:none; }
footer .head li {
    text-align:left; padding:15px 0; margin:0; cursor:pointer; position:relative; 
    background:url(/images/content/layout/footer_a.png) no-repeat center right 30px; 
}
footer .head li > div {border-left:1px solid #727272; padding:0 30px; }
footer .head li:first-child div {border-left:0; }
footer .head .link_box {
    position:absolute; top:100%; left:0; width:100%; background:#444; z-index:20; display:none; border:0;
    padding-bottom:10px;
}
footer .head .link_box li {background:none; padding:0; }
footer .head .link_box li a {color:#fff; font-size:16px; }
footer .head .link_box .rect {padding:10px 0; }
footer .body {padding:60px 0; }
footer .body .wrap { }
footer .body .wrap > div:nth-child(1) {}
footer .body .wrap > div:nth-child(1) a {color:#cecece; margin-right:22px; }
footer .body .wrap > div:nth-child(2) {color:#999999; font-weight:200; }
footer .body .wrap > div:nth-child(3) {color:#666666; font-weight:200; }
footer .body .wrap > div:nth-child(1),
footer .body .wrap > div:nth-child(2) {margin-bottom:25px; }
footer .blogLink {float:right; position:absolute; right:0; top:4px;}
footer .blogLink a {display: block; text-align: center;}
footer .blogLink a > div {color: #959595; transition: all .3s ease;}
footer .blogLink a:hover > div {color: #0adf91;}
footer.sub-footer {margin-top:100px; font-size:14px; color:#a1a1a1; padding:0; }
footer.sub-footer .body {padding:20px 0 30px 0; }
footer.sub-footer .wrap {background-position:left top; padding:80px 0 0 0; }
footer.sub-footer .wrap p:nth-child(1) {float:left; }
footer.sub-footer .wrap p:nth-child(2) {float:right; }
footer.sub-footer .copyright {background:#fff; text-align:center; padding:18px 0; color:#666; }


@media (max-width:800px){
    footer .head li {width:100% !important; flex:0 0 100%; max-width:100%; border-bottom:1px solid #727272;}
    footer .head li:last-child {border:0;}
    footer .head .link_box{background:#666;}
    footer .head .link_box li a{font-size:14px;}
    footer .head li > div {border:0; font-size:16px;}
    footer .body{padding:50px 0;}
    footer .body .wrap > div:nth-child(1){font-size:13px;}
    footer .body .wrap > div:nth-child(2){font-size:12px;}
    footer .body .wrap > div:nth-child(3){font-size:11px;}

}

@media (max-width:430px){
    footer .body .wrap{background:none;}
    footer .body {padding:30px 0;}
    footer .body p > br.mob{display:block;}
    
}

/**/
.sub-layout #site-map-toggle span {background:#fff;}

/**/
@keyframes show {
    0% {opacity:0; }
    100% {opacity:1; }
}

/**/
@media (max-width:1260px){
    #logo {left:15px; }
    .wrap {width:95%; }
}
@media (max-width:1000px){
    #site-map-toggle {display:block; }
    #tnb ul.m1 {display:none; }
    /*#snb {max-height:80vh; overflow-y:scroll; overflow-x:hidden; }*/
    /*#snb ul.m1 {}*/
    /*#snb li.m1 {width:100%; text-align:left; padding:15px 0; border-bottom:1px solid #111; }*/
    /*#snb a.m1 {margin:0; padding:0; }*/
    /*#snb li.m2 {float:left; margin-right:20px; }*/
    #my {right:55px; }
}
@media (max-width:800px){
    footer .blogLink {top:-20px;}
}

@media (max-width:500px){
    footer .blogLink {top:0px;}
    footer .blogLink {top:inherit; bottom: 0;}
    footer .blogLink img{max-width:80%;}
}

@media (max-width:430px){
    #svb .sub-visual h1.fs-43{font-size:35px;}
    #page_title{font-size:27px;}
    footer .blogLink a > div{font-size:11px;}
}