.container-section {background:#fff; min-height:auto; }
.wrap {max-width:1200px;}
.upp{text-transform: uppercase;}
.m_none{display: block;}

/* layout animation */
header {animation:show 400ms both 0ms;}
body {overflow-x:hidden;}
.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;}

/* header */
header {width:100%; top:0; left:0; position:absolute; height:60px; z-index:9999; transition:all 500ms;}
header #tnb { background: #222;}
header #tnb .wrap{height:60px;}
#logo {position:absolute; margin:auto; top:0; right:auto; bottom:0; left:15px; z-index:2000; width:209px; height:60px; }
#logo a {display:block; background:url(/images/contents/layout/logo_w.png) no-repeat left center; height:100%; }
#site-map-toggle {display:block; }
#site-map-toggle span{color:#fff;}
/**/
#tnb {height:100%; text-align:center; transition:all 500ms; }
#tnb .wrap {height:100%; }
#tnb ul.m1 {display:inline-block; position:relative; top:21px; /* display:none; */}
#tnb li.m1 {position:relative; float:left; }
#tnb a.m1 {font-size:21px; color:#111; margin:0 38px; font-weight: 500;}
header.in-active #tnb li.m1.active a.m1,
#tnb li.m1.active a.m1 {color:#1082ed; transition:all 300ms; font-weight: 600;}
header.in-active #tnb li.m1 a.m1:hover,
#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;}
}

/**/
#site-lang {display:inline-block; position:absolute; right:35px; top:17px;}
#site-lang a{color: #fff;}
/* 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: #1d4ca1; 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;}

}
@media (max-width:800px){
    #site-lang{top: 21px;}
}
/**/
#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/contents/layout/icon_my_b.png); margin-right:7px; }
#my .search {background-image:url(/images/contents/layout/icon_shop_b.png); }
.sub-layout #my .my {background-image:url(/images/contents/layout/icon_my_w.png); }
.sub-layout #my .search {background-image:url(/images/contents/layout/icon_search_w.png); }

@media (max-width:600px){
    #my {display:none;}
    .m_none{display: none !important;}
    #logo a{background: url(/images/contents/layout/logo_w_m.png) no-repeat left center; padding-top: 4px;}
    
}

/**/
.sub-visual {
    border-bottom:1px solid #efefef;
    background:url(/images/contents/layout/sub_visual_01.jpg) no-repeat center center; height:500px; position:relative;  background-size: cover;
}
.sub-visual#sub-visual-1 {background-image:url(/images/contents/layout/sub_visual_01.jpg);}
.sub-visual#sub-visual-2 {background-image:url(/images/contents/layout/sub_visual_02.jpg);}

/*.sub-visual#sub-visual-2 {background-image:url(/images/contents/layout/sub_visual_02.png);}*/
/*.sub-visual#sub-visual-3 {background-image:url(/images/contents/layout/sub_visual_03.png);}*/
/*.sub-visual#sub-visual-4 {background-image:url(/images/contents/layout/sub_visual_04.png);}*/
/*.sub-visual#sub-visual-5 {background-image:url(/images/contents/layout/sub_visual_05.png);}*/
/*.sub-visual#sub-visual-6 {background-image:url(/images/contents/layout/sub_visual_06.png);}*/
/*.sub-visual#sub-visual-7 {background-image:url(/images/contents/layout/sub_visual_07.png);}*/
.sub-visual .rect {position:relative; top:43%; border:1px solid transparent;}
.sub-visual .subVisualText_1 {color: #fff; text-align: center;}
.sub-visual .subVisualText_1 strong{font-weight: 600; display: block;}
.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;}
}


/**/
#site-map-toggle span {transition:all 500ms;}
.sub-layout header {background:none; }
.sub-layout #tnb ul.m1 {top:13px; }
.sub-layout #tnb a.m1 {color:#fff; }
.sub-layout header.in-active #tnb { }
/*.sub-layout header.in-active #tnb a.m1 {color:#000;}*/
.sub-layout header.in-active #site-map-toggle span {}
.sub-layout #svb{overflow: hidden;}
/**/
#sub-location {
    height:80px; position:relative;  z-index:90;
}
#sub-location .wrap {height:100%; position:relative; transform:translateY(-50%);}
#sub-location .wrap .rect {height:100%; position:absolute; left:0; top:0; width:150%; background:#fff;}
#sub-location .home {
    float:left; width:80px; height:100%; 
    background:url(/images/contents/layout/icon_home.png) no-repeat center center #e9eef7;
}
#sub-location .m1 { font-size: 20px;}
#sub-location .menu {
    float:left; color:#222; min-width:160px; cursor:pointer; user-select: none; height:100%; 
    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; line-height: 80px; text-transform: uppercase;}
#sub-location .menu .name img {position:absolute; margin:auto; top:0; right:0; bottom:0; left:auto; transition:all 300ms; width: 8px; height: 12px;}
#sub-location .menu .name.active img {transform:rotate(0deg); }
#sub-location .m1 {padding: 0 40px;}
#sub-location .m1 .name{font-weight: 600; padding-right: 70px;}
#sub-location .menu.m2 {width:auto; min-width:auto; box-sizing: border-box;}
#sub-location .menu.m2 .name {
    padding:0 25px; border-bottom:2px solid transparent; box-sizing: border-box; height:100%;
    transition:all 300ms;
}
#sub-location .menu.m2 .name:hover,
#sub-location .menu.m2 .name.active {border-bottom:3px solid #7ec462;}

@media (max-width:800px){
    .sub-visual .rect{top: 46%;}
    .sub-visual .subVisualText_1{font-size: 32px;font-weight: 600; text-shadow: 1px 1px 5px rgba(0,0,0,0.5);}
    #sub-location {display:none;}
    
}
@media screen and (min-width:450px) and (max-width:600px){
    .sub-visual .rect{top: 54%;}
    
}
/**/
#page_title {text-align:center; padding:60px 0 55px 0; font-size:35px; font-weight:900; position:relative; z-index:1;}
#page_title h2 {}
#page_title h2 span {display:inline-block; margin-bottom:14px; padding-bottom:25px; border-bottom:4px solid #151515; text-transform: uppercase; font-weight: 600;}
#m4-tab {text-align:center; margin-bottom:40px; opacity:0; animation:show both 600ms 100ms; }
#m4-tab ul {}
#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){
    #page_title {padding-top:60px;padding-bottom:30px;}
    #page_title:before{display:none;}
    #m4-tab li {display:none;}
    #m4-tab li.active {display:block; width:100%;}
}

/* footer */
.container-section {min-height:500px;}
footer {background:#2b2b2b; color:#727171; }
footer .body {padding:50px 0; }
footer .body .wrap {padding:0 0 0 200px; background:url(/images/contents/layout/logo_footer.png) no-repeat top 7px left;}
footer .body .wrap > div {padding-left:30px;}
footer .body .wrap > div:nth-child(1){margin-bottom:20px; }
footer .info{color: rgba(255,255,255,0.6);}
footer .copyright{color: rgba(255,255,255,0.4);}

@media (max-width:1250px){
    footer .body .wrap{background:url(/images/contents/layout/logo_footer_m.png) no-repeat top 7px center; padding-left: 0; text-align: center; padding-top: 50px;}    
    footer .body .wrap > div{padding-left: 0;}
}

@media (max-width:800px){

    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 {padding:30px 0;}
    footer .body p > br.mob{display:block;}
    
}

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

/**/
@media (max-width:1260px){
    #logo {left:0; }
    .wrap {width:92%; }
}
@media (max-width:1000px){
    #site-map-toggle {display:block; }
    /*#tnb ul.m1 {display:none; }*/
    #my {right:55px; }
}
@media (max-width:800px){
    #page_title h2 span{font-size: 1.8rem;}
}