@charset "utf-8";
#wrap { overflow:hidden; position:relative; min-width:320px } 
.inner01 {position:relative;margin:0 auto;max-width:1520px;} 
#header {width:100%;height: 110px;box-sizing:border-box;border-bottom:1px solid #ccc;position:relative;z-index: 10; background-color:#fff;}
#header > .inner01{width:100%;position: initial;box-sizing: border-box;display: flex;
justify-content: space-between;}

.flex1{flex:1;}
#header .inner_top { display: flex; justify-content:flex-end; width:100%; height: 42px; align-items: end; } 
#header .inner_bottom { height: 67px; display: flex; align-items: center; box-sizing: border-box; } 

.logo_h {width:230px;margin-right: 200px;margin-top: 55px;} 
.logo_h a { display:block; } 
.logo_h a img { width:100%; } 
.btn_menu, .btn_close { display:block; width:42px; height:42px; text-indent:-9999em; display: none; background-size:30px; background-repeat: no-repeat; background-position:center;} 
.btn_menu {background-image:url(../images/ico_menu01.svg);}
.btn_close {background-image:url(../images/ico_close.svg);}


#header .inner_top a{font-size:15px; padding:2.5px 0; margin:0 10px;}
#header .inner_top em{font-size:16px; font-weight:500; color:#000; margin-right:5px;}
#header .inner_top .toggle-container{margin-left:10px;}

.gnb { flex:1; } 

.depth01>li { display: inline-block; padding-right:100px; } 
.depth01>li>a { display:block; font-size:1.6em; line-height:67px; letter-spacing:-1px; font-weight: 500; transition:color.3s; color:#222; position:relative; } 
.depth02_wrap {
    width: calc(100% + 200px);
/*     min-height: 210px; */
    background: linear-gradient(to right, #F3F4F6 50%, #fff 50%);
    position:absolute;
    left: -100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* padding: 100px; */
    box-sizing: border-box;
    display:none; opacity:0; 
    transform:translateY(-20px);
    transition:all 0.3s ease;
    border-top:1px solid #ccc;
    } 

.depth02_wrap > .inner01{
    height:100%;
    display: block;
    width: 100%;
    padding: 0 100px;
    margin: 0 auto;
/*     min-height: 210px; */
    background: linear-gradient(to right, #F3F4F6 50%, #fff 50%);
}
.gnb_tit {position: absolute;top: 0;left: 200px;bottom: 0;right: 0;text-align: right;padding: 30px 50px;height: 100%;font-size: 2.4rem;box-sizing: border-box;width: 280px;background:#F3F4F6;letter-spacing: -1px;
    /* background-image: url(../images/bg_menu.png); */
    background-size:contain;background-repeat: no-repeat;background-position:bottom left;} 
    
.icon_more{
	display: inline-block;
	width:1.2rem;
	height:1rem;
	background: url(../images/ico_more03_b.svg) no-repeat;
    background-size: contain;
	background-position:center;
	background-repeat: no-repeat;
	text-indent: -9999px;
}    

.gnb .icon_more{
	filter: invert(40%) sepia(19%) saturate(13%) hue-rotate(96deg) brightness(95%) contrast(93%);
}

.gnb .depth02>li a:hover .icon_more{
	filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(298deg) brightness(104%) contrast(101%);
}


.depth01 > li:hover .depth02_wrap, .depth01 > li.act .depth02_wrap { display: block; opacity:1; transform:translateY(0); } 
 

.depth02 {display: grid;grid-template-columns: repeat(4, minmax(230px, 1fr));height:100%;box-sizing:border-box;padding: 20px 30px;vertical-align: top;background: #fff;margin-left: 380px;} 
.depth02>li {padding: 0 20px;box-sizing: border-box;border-right: 1px solid #ccc;
/* 	min-height: 150px; */
	margin: 10px 0;}
.depth02>li:nth-child(4n), .depth02>li:last-child { border-right:0; } 
.depth02>li>a { display: flex; justify-content:space-between; font-size:1.3em; font-weight:500; font-weight:500; border: 1px solid #ccc; padding: 15px 15px; min-height: 82px; box-sizing: border-box; border-radius: 4px; align-items: center; word-break: break-word; line-height: 1.2; letter-spacing: -0.5px; } 
.depth02>li>a>span:first-child { flex:1; } 
.depth01>li:hover>a, .depth01>li.act>a, .depth01>li>a:focus { color:#3a75e0 } 
.depth02>li>a:hover { background:#4680E1; color: #fff; font-weight:500; box-shadow:0 3px 5px rgba(63, 85, 97, 0.3); } 

.depth03 { padding:10px 0; } 
.depth03>li>a { display: inline-block; padding:6px 0 6px 30px; font-size:14px; position:relative; box-sizing: border-box; } 
.depth03>li>a::before { content:''; display: inline-block; width:4px; height:4px; background-color:#111; margin-right:10px; position:absolute; top:45%; left:20px; } 

.depth03>li>a:hover { color:#4680E1; text-decoration:underline; } 
.depth01>li>a::before { content:""; position:absolute; top:-10px; left:50%; margin-left:-3px; width:5px; height:5px; border-radius:2.5px; background-color:#3a75e0; opacity:0; transition:top.3s } 
.depth01>li>a:hover::before, .depth01>li.act>a::before, .depth01>li>a:focus::before, .depth01>li:hover>a::before { top:5px; opacity:1 } 
.depth01>li:first-child { margin-left:0 } 

.depth02>li>a { letter-spacing:-1px } 

.lnb { display:none; position:absolute; top:50%; right:0; margin-top:-10px; } 
.lnb a { display:inline-block; margin-left:20px; color:#fff; font-size:1.3em; font-weight:400 } 
.lnb a:hover,
.lnb a:focus { text-decoration:underline } 
.lnb a:first-child { margin-left:0 } 
.lnb a em { font-weight:600; color:#3a75e0 } 

#wrap.sub .lnb a,
#header.on .lnb a { color:#222 } 




#header.open .side_menu { display:block; visibility:visible; opacity:1; right:0px } 
#header.open .side_menu>div { right:-15px } 

#wrap.sub #header { position:inherit } 

footer { width:100%; background-color:#2d2d2d; padding:20px 0 } 
footer .inner01 { background:url(../images/logo_h.png) 50% 15% no-repeat; background-size:210px; background-position:left center; } 
footer p { text-align:right; color:rgba(2355,255,255,.8); height:50px; line-height:50px; font-weight:300; } 
footer p span { display:none } 
footer p abbr { text-decoration:none } 

#wrap.sub #footer { margin-top:100px } 



.layer_drag { position:fixed; z-index:99999 !important; width:600px; height:600px; padding:20px; border:1px solid #bebebe; background-color:#fff; border-radius:5px; box-shadow:0 2px 15px -10px rgba(0,0,0,.35); box-sizing:border-box; box-shadow:0 0 20px -10px rgba(0,0,0,.75); z-index:100 } 
.layer_drag h2 { font-size:20px; margin-bottom:15px } 
.layer_drag .body { height:calc(100% - 100px); padding:10px 0; border:1px solid #d6d6d6; border-left:0; border-right:0; margin-bottom:10px; overflow-y:auto } 

.layer_drag .btn_close { position:absolute; top:7px; right:10px; width:50px; height:50px; text-indent:-9999em; background:url(../images/ico_close01.svg) 50% no-repeat; background-size:20px; opacity:.5; overflow:hidden; transition:opacity .25s } 
.layer_drag .btn_close:hover,
.layer_drag .btn_close:focus { opacity:1 } 


/* toggle-slider */
.toggle-container { position: relative; width: 94px; height: 26px; } 
.toggle-checkbox { display: none; } 
.toggle-label { display: flex; align-items: center; position: relative; width: 100%; height: 100%; background-color: #D9D9D9; border-radius: 30px; cursor: pointer; transition: background-color 0.4s; padding: 0 10px; box-sizing: border-box; justify-content: space-between; } 
.toggle-slider { position: absolute; width: 50px; height: 100%; background-color: #333; border-radius: 34px; top: 0; left: 0; transition: transform 0.3s; color: #fff; line-height: 26px; box-sizing: border-box; text-align: center; font-weight: 500; } 
.toggle-text { font-size: 14px; color: white; z-index: 1; } 
.toggle-checkbox:checked + .toggle-label .toggle-slider { transform: translateX(45px); } 
.toggle-checkbox:checked + .toggle-label .toggle-text { color:#464646; } 
.toggle-label .toggle-text::before { content: "KOR"; position:absolute; right:10px; color:#464646; } 
.toggle-checkbox:checked + .toggle-label .toggle-text::before { color:#fff; } 
 



/* responsive */
/* tablet */
@media all and (max-width:1520px){
	.inner01{
        max-width:100%;
        padding:0 20px;
    }

    #header{
        height:70px;
        position:fixed;
    }

    #header .inner01{
        height:100%;
        align-items: center;
    }

    #header .inner_top{
        height:inherit;
        align-items: center;
    }

    #header .inner_bottom{
        height:inherit;
    }

    .logo_h{
        margin-right:0;
    }

    .logo_h a{
        height:100%;
    }

    .gnb{
        position:fixed;
        right:0;
        top:0;
        background:rgba(0, 0, 0, 0.6);
        width:100%;
        height:100vh;
        display: none;
        z-index: 1;
    }

    .gnb.act{
        display: block;
    }

    .gnb_tit{
        display: none;
    }

    #header .flex1{
        display: flex;
        justify-content: end;
    }

    .logo_h{
        margin-top:0;
    }

    .btn_menu{
        display: block;
        margin-left:10px;
    }

    .btn_close{
        display: block;
        position:absolute;
        right:1rem;
        top:2rem;
    }

    .depth01{
        background-color:#fff;
        max-width:360px;
        margin-left:calc(100% - 360px);
        height:100%;
        padding:70px 0 20px;
        background-image: url(../images/logo_menu.svg);
        background-repeat: no-repeat;
        background-size:40px;
        background-position:30px 22px;
    }

    .depth01>li{
        display: block;
        width:100%;
    }

    .depth01 > li:hover .depth02_wrap{
        display: none; 
    } 

    .depth01 > li.act .depth02_wrap{
        display: inherit; 
    }

    .depth01>li>a{
        font-size:1.3em;
        height:70px;
        line-height:70px;
        padding: 0 30px;
        border-top:1px solid #ddd;
    }

    .depth01>li>a::after{
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        position:absolute;
        right:30px;
        top:45%;
        background: url(../images/ico_plus02.svg) no-repeat;
        background-size: contain;
    }

    .depth01>li.act>a::after{
        background: url(../images/ico_minus01.svg) no-repeat;
        background-size: contain;
    }

    .depth01>li.act>a{
        border-bottom:1px solid #ddd;
    }

    .depth01>li:first-child>a{
        border-top:0;
    }

    .depth01>li:last-child>a{
        border-bottom:1px solid #ddd;
    }

    .depth01>li:first-child>a{
        border-bottom:0;
    }

    .depth02_wrap{
        width:inherit;
        position:inherit;
        background:none;
        box-shadow:none;
        border-top:0;
        min-height:inherit;
    }

    .depth02_wrap > .inner01{
        width:inherit;
        padding:0;
        background:none;
    }

    .depth02{
        display: inherit;
        padding: 10px 0;
        margin-left: 0;
    }

    .depth02_wrap > .inner01{
        min-height:inherit;
    }

    .depth02>li{
        padding:0;
        border-right:0;
/*         min-height:inherit; */
    }

    .depth02>li>a{
        min-height:inherit;
        font-size:1.2em;
        border:0;
        padding:12px 36px 12px 40px;
        font-weight:400;
        letter-spacing: 0;;
    }

    .depth01>li:hover>a::before, .depth01>li.act>a::before{
        left:25px;
        top:20px;
    }

    .depth02>li>a:hover, .depth02>li.act>a{
        background:none;
        box-shadow: none;
        color:inherit;
        font-weight:inherit;
    }
    .depth02>li.act>a{
        color:#000;
        font-weight:500;
    }

    .gnb .icon_more{
        transform:rotate(90deg);
        filter: invert(72%) sepia(87%) saturate(2%) hue-rotate(259deg) brightness(126%) contrast(73%);
    }
    
    .gnb .depth02>li a:hover .icon_more{
        transform:rotate(90deg);
        filter:invert(40%) sepia(19%) saturate(13%) hue-rotate(96deg) brightness(95%) contrast(93%) !important;
    }

    .gnb .depth02>li.act a .icon_more{
        transform:rotate(-90deg) !important;
        filter:invert(40%) sepia(19%) saturate(13%) hue-rotate(96deg) brightness(95%) contrast(93%) !important;
    }

    .depth03{
        padding:0;
        display: none;
    }

    .depth02 li.act .depth03{
        display: block;
    }

    .depth03>li>a{
        display: block;
        padding:6px 0 6px 60px;
    }

    .depth03>li>a::before{
        left:50px;
    }

    .container_box{
        margin-top:8rem;
    }

    footer .inner01{
        background-position:20px center;
    }


}

/* mobile */
@media all and (max-width:768px){
	.inner01{
        padding:0 10px;
    }

    footer{
        padding:20px 0;
    }

    footer .inner01{
        background-position:center top;
        padding-top:50px;
    }

    footer p{
        text-align:center;
        height:inherit;
        line-height:1;
    }   

}

@media all and (max-width:400px){
    .logo_h{
        width:180px;
    }

    .toggle-container{
        transform: scale(0.8);
        right:46px;
    }

    .btn_menu, .btn_close{
        width:34px;
        height:34px;
    }
}