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

/* layout animation */
header {animation:show 400ms both 0ms;}
body {overflow-x:hidden; }
body.active{overflow: hidden; height: 100vh;}
.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:90px; z-index:9999; transition:all 500ms; border-bottom: 1px solid #f4f4f4;}
header #tnb { background: #fff;}
header #tnb .wrap {max-width:1700px;}
header #tnb .wrap{height:90px;}
#logo {position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; z-index:1000; width:160px; height:60px; }
#logo a {display:block; background:url(/images/contents/layout/facepialogo.png) no-repeat left center; height:100%; }
#site-map-toggle {display:block; right: 0; left: unset; z-index: 1010;}
#site-map-toggle span{background:#000;}
#site-lang a{color: #fff;}
#svb {display:none;}

@media(max-width:1600px){
    header #tnb .wrap {max-width:96%;}
}

/**/
#tnb {height:100%; text-align:center; transition:all 500ms; }
#tnb .wrap {height:100%; }
#tnb ul.m1 {display:inline-block; position:absolute; left: 0px; top:33px; letter-spacing: -0.5px;/* display:none; */}
#tnb li.m1 {position:relative; float:left; }
#tnb a.m1 {font-size:17px; color:#383935; margin-right:30px; font-weight: 500; transition: 0.3s;}

header.in-active #tnb li.m1.active a.m1,
#tnb li.m1.active a.m1 {transition:all 300ms; font-weight: 600;}

header.in-active #tnb li.m1 a.m1:hover,
#tnb li.m1 a.m1:hover {color:#00a8b7;}

#tnb ul.m2 {
    position:absolute; width:100%; top:57px; left:0; display:none; background:#fff; padding:5px 0; line-height:1.2;
    border:1px solid #fff; box-shadow:4px 4px 10px rgba(0,0,0,0.1); 
}
#tnb ul.m1 li:nth-child(1) > ul.m2{width: 160px;}
#tnb ul.m1 li:nth-child(2) > ul.m2{width: 250px;}
#tnb ul.m1 li:nth-child(3) > ul.m2{width: 140px;}
#tnb ul.m1 li:nth-child(5) > ul.m2{width: 140px;}

#tnb ul.m2.show {z-index:100;}
#tnb li.m2 {padding:7px 10px;}
#tnb a.m2 {font-size:14px; transition: 0.3s;}
#tnb li.m2 a.m2:hover{color:#00a8b7;}

/* #tnb li.m2.active a.m2 {font-weight: 600;} */

#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;}
    #logo {margin: 15px 0; padding: 15px 0;}
    #logo a{background-size: contain; width: 130px; height: 30px;}
    #site-map-toggle{width: 22px;}
    #tnb .language{width: 55px;}
}

/*
#site-lang {display:inline-block; position:absolute; right:35px; top:32px;}
*/
/* language select */
.language {
    position:absolute;width:80px;height:40px;border-radius:5px;line-height:35px;text-align:center;
    color:#383935;overflow:Hidden;transition:all 0.3s;cursor:pointer;top:23px;right:50px;z-index:1010;user-select:none;
}
.insta{position: absolute; top:32px; right: 150px; width: 28px; height: 28px;}
.language:hover {}
/*.language:before{background: url(/images/layout/lang_arr.png) right center no-repeat; width: 7px; height: 8px; content: ;}*/
.language .select {}
.language .select .lang {display:none;}
.language .select .lang.active {display:block; padding-top: 5px;}
.language .select .lang span.fa {margin-left:3px;}
.language .select .lang span.no-fa {display:inline-block;margin-left:10px;}
.language.active {height:80px; border: 1px solid #737471;}
.language.active .lang {display:block;}
.language.active .lang.active {}
.select .lang a,
.language a {background:none !important;border:0 !important;}
.mobile .language {position:relative;top:0;right:0;margin:20px auto;}
.fa-angle-down:before{color:#79dba2; font-size: 13px;}
.no-fa{margin-left: 13px;}


/* snb */

#snb-overlay{background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 550; display: none;}

#snb {
    z-index:1000; top:0; right: 0; max-width: 600px; 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); background: #EAF7F7;
}
#snb .wrap > .rect {overflow:auto; height:100%;}
#snb .ul.m1 {height:auto;padding:60px 0 0 60px;}
#snb .row {margin:0;}
#snb .li.m1.col {
    opacity:1; width:100%; flex:0 0 100%; max-width:100%; padding:0;
    display:block; margin:0; border-right:0; padding-bottom: 30px;
}
#snb .li.m1.col > div{position: relative; }
#snb .li.m1:after {display:none;}
#snb a.m1 {width: 160px; display: block; text-align:left; margin:0; position:relative; font-size: 25px; color: #383935; letter-spacing: -0.5px; transition: 0.3s;}
#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:none; 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 {margin:0; position: absolute; content: ''; top: 0; left: 170px; display: none; transition: 0.3s; z-index: 99;}
#snb li.m2 {text-align:left; padding:6px 0 0 30px;}
#snb li.m2 a{color: #888; transition: 0.3s;}
#snb.active {animation:snbShowMobileMenu both 1000ms;transform:translateX(0%);}
#snb .li.m1.col > div.m1:hover ul.m2{display: block;}
/* #snb a.m1:hover ul.m2{opacity: 1;} */

#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;}
#snb .snb_bg img{position: absolute; right: 0; bottom: 0;}

#snb a.m1:hover{color: #00a8b7;}
#snb li.m2:hover a{color: #383935;}
#snb.active .li.m1.active a.m1{transition:all 300ms; font-weight: 600;}
#snb-overlay.active {display: block;}

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

/* #snb .mobile-menu {display:block;} */
/* #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;} */
    #snb {max-width: none;}
    #logo {z-index: 2000;}
    #snb a.m1{font-size: 20px;}
    #snb ul.m2{left: 120px;}
}

/**/
#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;}*/
/**/
#site-map-toggle span:nth-child(3){width: 100%;}

#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 */
#footer {background:#fff; border-top: 1px solid #ddd; text-align:center;color:#999; font-size: 15px;}
#footer .logo {color:#fff; font-weight:bold;letter-spacing: -1px;user-select:none;margin-bottom:20px;}
#footer ul{}
#footer ul li{display: inline-block; padding: 0 15px;}
#footer ul li a{color:#999;}
#footer .company {padding:30px 0; font-weight: 300;}
#footer .company span{padding:0 10px;}
#footer .wrap {position:relative; padding:50px 0;}
#footer .top-btn {position:absolute;top:-30px;right:0;border-radius:100px;width:40px;height:100px;text-align:center;color:#999;font-size:15px;}
#footer .top-btn span{}

@media (max-width:1250px){
 
}

@media (max-width:800px){

}

@media (max-width:430px){
  
    
}

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

/**/
@media (max-width:1260px){
    .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;}
    #footer .company {font-size: 14px;}
}