
/*-------------------------------------------------
title       : 레이아웃
Author      : 최연아
Create date : 2021-02-17
-------------------------------------------------*/
.gnb_bg { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block; position: absolute; left: 0; top: 4.5rem; z-index: 2; width: 100%; background-color: rgba(0, 0, 0, 0.6); content: ''; }
.menubar.active .gnb_bg,.menubar.on .gnb_bg { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; width: 100%; height: calc(100vw - 4.5rem); -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
#header .topbar{background:#353f4d;height:42px;overflow:hidden;}
#header .topbar .sns{float:left;}
#header .topbar .sns li{float:left;margin-top:9px;}
#header .topbar .sns li a{display:inline-block;vertical-align: middle;}
#header .topbar .sns li a img{vertical-align: middle;}
#header .topbar .sns li + li{padding-left:1.25rem;}
#header .topbar .right_menu{float:right;}
#header .topbar .right_menu > ul{display:inline-block;vertical-align: middle;}
#header .topbar .right_menu .log{margin-right:1.25rem;}
#header .topbar .right_menu .log li{float:left;line-height:39px;}
#header .topbar .right_menu .log li a{font-size:14px;color:#d9dbe8;font-weight:300;display:inline-block;}
#header .topbar .right_menu .log li + li{padding-left:1.25rem;position:relative;}
#header .topbar .right_menu .log li + li:before{content:'';background:#d9dbe8;opacity: .5;width:1px;height:10px;position:absolute;top:50%;left:12px;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
#header .topbar .right_menu .size li{float:left;width:24px;height:24px;background:#222d3d;border-radius: 50%;}
#header .topbar .right_menu .size li + li{margin-left:5px;}
#header .topbar .right_menu .size li a{color:#d9dbe8;font-size:1rem;line-height:24px;text-align: center;display:inline-block;width:100%;}
#header .menubar{position: relative;height:4.5rem;}
#header .menubar.active:before,
#header .menubar.on:before{position:absolute;left:50%;top:0;-webkit-transform: translate(-50%);transform: translate(-50%);width:500%;height:19rem;;background:#fff;content:'';-webkit-transition:transform .3s, opacity .3s, visibility .3s;transition:transform .3s, opacity .3s, visibility .3s;z-index:10;margin-top:4.5rem;}
#header .menubar > .container{height:100%;position:relative;}
#header .menubar:after{position:absolute;bottom:0;left:0;width:100%;height:1px;content:'';background:#ddd;z-index:-1}
.utile-wrap{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:4.5rem;}
.utile-wrap .sitemap-mo{position:relative;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.utile-wrap .sitemap-mo > a.btnAllmenu{display:block;width:28px;height:24px;position: relative;}
.utile-wrap .sitemap-mo > a.btnAllmenu.active > em{background:#fff;}
.utile-wrap .sitemap-mo > a.btnAllmenu.active > em:before{transform: translateY(0) rotate(-45deg);top:0;}
.utile-wrap .sitemap-mo > a.btnAllmenu.active > em:after{transform: translateY(0) rotate(45deg);top:0;}
.utile-wrap .sitemap-mo > a.Allmn-close{display:none;position:relative;font-size:1.8rem;}
.utile-wrap .sitemap-mo > a > em{position:absolute;top:50%;right:0;transform:translate(-50%, -50%);-webkit-transform:translateY(-50%);display:inline-block;width:28px;height:3px;background:#64a43d;transition:all .5s cubic-bezier(.535,0,0,1) 0s;-webkit-transition:all .5s cubic-bezier(.535,0,0,1) 0s;}
.utile-wrap .sitemap-mo > a > em:before{position:absolute;top:10px;right:0;background:#333;width:28px;height:3px;transition:all .5s cubic-bezier(.535,0,0,1) 0s;-webkit-transition:all .5s cubic-bezier(.535,0,0,1) 0s;content:'';}
.utile-wrap .sitemap-mo > a > em:after{position:absolute;top:-10px;right:0;background:#333;width:28px;height:3px;transition:all .5s cubic-bezier(.535,0,0,1) 0s;-webkit-transition:all .5s cubic-bezier(.535,0,0,1) 0s;content:'';}
.utile-wrap .sitemap-mo > a:hover > em:before, .utile-wrap .sitemap-mo > a:hover > em:after,
.utile-wrap .sitemap-mo > a:focus > em:before, .utile-wrap .sitemap-mo > a:focus > em:after{width:100%;}
#head_menu > li{position:relative;float:left;height:4.5rem;}
#head_menu > li:before{position:absolute;top:50%;right:10%;width:9px;height:9px;background:url("../../images/korean/layout/menu_bg.png") no-repeat;content:'';transform: translateY(-50%);}
#head_menu > li:last-child:before{display:none;}
#head_menu > li.lnb5:before{right:15px;}
#head_menu > li > a{position:relative;display:block;font-size:1.1rem;line-height:4.5rem;font-weight:500;min-width:209px;font-weight:bold;height:4.5rem;padding:0 1rem;}
#head_menu .submenu > ul > li > a{font-weight:500;color:#555555;position:relative;}
#head_menu .submenu > ul > li > a:hover,
#head_menu .submenu > ul > li > a:focus{color:#125095;}
#head_menu > li > a span{position:relative;-webkit-transition:all .3s;transition:all .3s;}
#head_menu > li > a span:before{position: absolute;top:0;right:-7px;width:5px;height:5px;-webkit-transform:scaleX(0);transform:scaleX(0);border-radius: 50%;background:#125095;opacity:0;content:'';}
.menubar.on #head_menu > li.active > a span:before,
.menubar.active #head_menu > li.active > a span:before{opacity: 1;-webkit-transform:scaleX(1);transform:scaleX(1);}
.menubar.active #head_menu > li.active > a,
.menubar.on #head_menu > li.active > a{color:#125095;}
#head_menu .submenu > ul > li > a:before,
#head_menu .submenu > ul > li > a:focus:before{position:absolute;top:50%;left:-1rem;content:'';width:2px;height:30px;-webkit-transform:translateY(-50%) scaleY(0);transform:translateY(-50%) scaleY(0);background:#125095;opacity:0;transition:all .3s;}
#head_menu .submenu > ul > li:focus > a,
#head_menu .submenu > ul > li:hover > a{color:#125095;}
#head_menu .submenu > ul > li:focus > a:before,
#head_menu .submenu > ul > li:hover > a:before{opacity:1;-webkit-transform:translateY(-50%) scaleY(1);transform:translateY(-50%) scaleY(1);}
#head_menu .submenu > ul > li .lnb-detail > li > a:focus,
#head_menu .submenu > ul > li .lnb-detail > li > a:hover{color:#125095;text-decoration: underline;}
#head_menu .submenu > ul > li .lnb-detail > li{position:relative;padding-left:8px;line-height:1.5;}
#head_menu .submenu > ul > li .lnb-detail > li>a{position:relative;}
#head_menu .submenu > ul > li .lnb-detail > li>a:before{position:absolute;top:8px;left:-9px;content:'';width:4px;height:1px;background:#767676;}
#head_menu .submenu > ul > li .lnb-detail > li > a{font-size:.7rem;font-weight:300;color:#767676;}
#head_menu .submenu{height:18rem;display:block;position: relative;overflow:hidden;visibility: hidden;opacity:0;-webkit-transition:opacity .3s, height .3s;transition:opacity .3s, height .3s;padding:1rem;}
.menubar.active #head_menu .submenu,
.menubar.on #head_menu .submenu{opacity:1;visibility: visible;background:#fff;z-index: 99;}
#head_menu .submenu > ul{position:relative;}
#head_menu .submenu > ul:before{content:'';width:1px;height:100%;background:#ddd;position:absolute;top:0;left:-1rem;}
#head_menu .submenu > ul > li{margin-bottom:1rem;}
#head_menu .submenu_etc .menu_quick li a{display:block;}
#head_menu .submenu_etc .menu_quick li .img{position: relative;text-align: center;width: 2rem;height: 2rem;display: inline-block;vertical-align: middle;background: #e3e7eb;border-radius: 5px;}
#head_menu .submenu_etc .menu_quick li .img:before{content:'';position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width:25px;height:23px;background:url(../../images/korean/layout/menu_icon01.png) no-repeat;}
#head_menu .submenu_etc .menu_quick li:nth-child(2) .img:before{background:url(../../images/korean/layout/menu_icon02.png) no-repeat;width:23px;height:24px;}
#head_menu .submenu_etc .menu_quick li:nth-child(3) .img:before{background:url(../../images/korean/layout/menu_icon03.png) no-repeat;width:26px;height:24px;}
#head_menu .submenu_etc .menu_quick li .txt{display:inline-block;vertical-align: middle;font-weight:300;letter-spacing: -0.5px;color:#555;font-weight:300;}
#head_menu .submenu_etc .menu_quick li + li{padding-top:12px;margin-top:12px;position:relative;}
#head_menu .submenu_etc .menu_quick li + li:before{width:100%;height:1px;background:#dddddd;top:0;left:0;content:'';}

#head_menu .submenu_etc .menu_quick li .img img{vertical-align: middle;}
#head_menu .submenu_etc .contect{background:#f2f2f2;border:1px solid #ddd;padding:1rem .6rem;margin-top:1.15rem;}
#head_menu .submenu_etc .contect > *{display:block;letter-spacing: -0.5px;line-height: 1.4;}
#head_menu .submenu_etc .contect > a{font-family: 'Play', sans-serif;color:#578b9c;font-size:1.15rem;font-weight: bold;}
#head_menu .submenu_etc .contect > span{font-weight:500;color:#000;}#head_menu .submenu_etc .contect > em{color:#767676;font-size:.7rem;}

/*eng*/
h1.logo{float:left;margin-top:1.3rem;}
h1.logo a{display:block;}
#gnb.pc{float:left;margin-left:7rem;}

/*footer*/
#footer{position: relative; width: 100%;background:#363a3f;color:#b2b2b2;}
#footer .foot-wrap{overflow:hidden;padding:2.2rem 0 2rem;position:relative;}
#footer .foot-add{float:left;}
#footer .foot-add address{display:block;}
#footer .foot-add address strong{letter-spacing: -0.5px;color:#fff;font-weight:500;float:left;width:6rem;line-height:1.6;}
#footer .foot-add address .span{font-weight:300;float:left;width:calc(100% - 6rem);padding-left:1rem;line-height:1.6;}
#footer .foot-logo{position:absolute;right:0;}
#footer .copyright{font-size:13px;font-weight:300;display:block;padding-top:13px;float:left;opacity: .5;text-transform: uppercase;}
#footer .foot-relation > .foot-logo > strong{font-weight:500;padding:0 5px 0 10px;}
#footer .foot-relation > .foot-logo > a{color:#b3ffe0;font-size:1.5rem;font-family:'Play', sans-serif;}
#footer .form_select select{background-color:#24292f;font-weight:300;color:#b2b2b2;border: 1px solid #24292f;border-radius: 5px;width:12.4rem;margin-left:15px;}
.moblie_login{display:none;}
.moblie_login ul{overflow:hidden;}
.moblie_login li{background:#353f4d;color:#d9dbe8;float:left;width:33.3333%;height:30px;line-height:30px;font-size:.7rem;position:relative;}
.moblie_login li a{display:block;text-align: center;}
.moblie_login li + li:before{content:'';background:#ddd;width:1px;height:100%;position:absolute;top:0;left:0;}

#head_menu .submenu > ul > li > a > span br{display:none;}

@media screen and (max-width:1400px){
    .container{max-width: 98%;}
    .menubar.active #head_menu li.mnlast .submenu > ul,
    .menubar.on #head_menu li.mnlast .submenu > ul{padding-right:0;}
    #head_menu > li > a{font-size:.9rem;}
    #head_menu > li:before{display:none;}
    #head_menu > li > a{min-width:190px;}
    #head_menu .submenu{padding:1rem .5rem;}
    #head_menu .submenu > ul:before{left:-0.5rem;}
    #head_menu > li > a{padding:0 0.5rem;}
}


@media screen and (max-width:1350px){
    #gnb.pc{margin-left:1.2rem;}


}
@media screen and (max-width:1300px){
    #footer .foot-logo{position:static;right:inherit;margin-bottom:1rem;}

}
@media screen and (max-width:1200px){
    h1.logo{width:220px;}
    h1.logo a>img{width:100%;}
    #head_menu .submenu > ul > li > a > span br{display:block;}
    #gnb.pc{margin-left:1.5rem;}
    #head_menu > li > a{min-width:1px;}
}
@media screen and (max-width:1024px){
    #header .logobar .search_wrap{right:3rem;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:inherit;}
    #header .logobar .search_wrap .input-group .input-group-btn button{padding:4px 0 0 2px;}
    #header .logobar .relation{display:none;}
    #header .logobar .company_wrap{display:none;}
    #header .topbar{display:none;}
    #header{position:fixed;background:#fff;z-index:9;-webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.15);box-shadow: 5px 5px 8px rgba(0,0,0,0.15);}
    #header .headerWrap{position: relative;height:4.5rem;}
    #header .logobar .logo{line-height:90px;}
    #header .logobar{height:4.5rem;position:fixed;width:100%;z-index: 99;background:#fff;}
    #header .menubar:after{display:none;}
    .moblie_login{display:block;}
    .menubar.active .gnb_bg,
    .menubar.on .gnb_bg{z-index: 9;height:100%;position:fixed;}
    .gnb_bg{top:4.5rem;}
    .menubar.active #head_menu li.mnlast .submenu > ul,
    .menubar.on #head_menu li.mnlast .submenu > ul{padding-right:1rem;}
    #head_menu .submenu > ul > li > a{display:block;padding-bottom:10px;border-bottom:1px solid #ddd;position: relative;font-size:.9rem;}
    #head_menu .submenu > ul > li.active > div{border-bottom:1px solid #ddd;padding:5px 0 7px 0;}
    #head_menu .submenu > ul > li > a.plus span{display:block;position:relative;}
    #head_menu .submenu > ul > li > a.plus span:before{content:"\e913";font-family: 'xeicon';font-size:.8rem;color:#333;position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
    #head_menu .submenu > ul > li.active>a.plus span:before{content:"\e91b"}
    #head_menu .submenu > ul > li .lnb-detail > li > a{font-size:.8rem;}
    .menubar.active #head_menu .submenu,
    .menubar.on #head_menu .submenu{height:100%;}
    #gnb{display:none;float:none;height:100vh;position:absolute;right:0;z-index: 9999;width:480px;}
    .menubar.active #gnb,
    .menubar.on #gnb{display:block;top:82px;background:#fff;position:fixed;}
    #head_menu{height:100vh;background:#2c4b6f;position:relative;}
    #head_menu > li{float:none;height:56px;width:146px;position: static;}
    #head_menu > li > a{height:56px;width:146px;min-width:146px;background:#2c4b6f;float:left;color:#fff;line-height:56px;}
    .menubar #head_menu .submenu{float:left;width:calc(100% - 146px);background:#fff;z-index: 999;position:absolute;left:146px;top:0;}
    #head_menu .submenu > ul:before{display:none;}
    #head_menu .submenu > ul > li > div{visibility: hidden;opacity: 0;overflow:hidden;display:none}
    #head_menu .submenu > ul > li.active > div{visibility: visible;opacity: 1;overflow: visible;display:block;}
    #head_menu .submenu > ul{height:auto;}
    #header .menubar.active:before,
    #header .menubar.on:before{display:none;}

    .utile-wrap{position:fixed;right:1rem;top:0;transform:none;height:82px;line-height: 82px;}
    .menubar.active #head_menu > li.active .submenu,
    .menubar.on #head_menu > li.active .submenu{opacity: 1;visibility: visible;background:#fff;z-index: 999;height:100%;}
    .menubar.active #head_menu > li.active > a,
    .menubar.on #head_menu > li.active > a{color:#000;background:#fff;}
    #head_menu > li > a span:before{display:none;}
    #head_menu .submenu > ul > li > a:before{display:none;}
}
@media screen and (max-width:700px){
    #footer .ft_link li{width:50%;}
    #footer .foot-add address strong{display:block;}
    #header .logobar .logo{width:240px;}
    #header .logobar .logo>a>img{max-width: 100%;}
    #header .logobar .search_wrap .input-group{width:11rem;}
    #footer .foot-add address{font-size: .7rem;}
    #footer .foot-relation > .foot-logo > a{font-size:1rem;}
    #footer .foot-relation > .foot-logo{padding-top:0;}
}

@media screen and (max-width:530px){
    .utile-wrap{right:8px;}
    #header .logobar>.container{max-width:98%;}
    #header .logobar .search_wrap{right:2rem;}
    #header .logobar .logo{width:200px;}
    #header .logobar .search_wrap .input-group{width:10rem;}
    #footer .foot-add address span{padding-left:0;}
    #footer .foot-logo{display:none;}
    #footer .foot-add address .span{padding-left:0;}
}
@media screen and (max-width:480px){
    #gnb{width:375px;}
    #header .logobar .search_wrap{display:none;}

}

@media screen and (max-width:375px){
    #gnb{overflow-x: auto;width:100%;}
    #head_menu{min-width:375px;}

}