@charset "UTF-8";

/* header */
.bottom-header-wrap{background:#0d3f7a;}
header.fixed{position:fixed;top:0;left:0;width:100%;}
.gnb-open .bottom-header-wrap{background:#fff;}
.header-box{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin:0 auto;padding:0 0 0 40px;max-width:1920px;background-color:#0d3f7a;box-sizing:border-box;}
.gnb-open .header-box{background-color:#fff;}
.header-box .logo{padding:16px 0;}
.header-box .logo a{display:block;width:194px;}
.header-box .logo a img{display:none;}
.header-box .logo a img:nth-of-type(1){display:inline-block;}
.gnb-open .header-box .logo a img:nth-of-type(1){display:none;}
.gnb-open .header-box .logo a img:nth-of-type(2){display:inline-block;}

.sub header{position:relative;top:0;left:0;width:100%;background-color:transparent;}
.sub header.fixed{position:fixed;}
.sub .bottom-header-wrap{background-color:transparent;}
.sub .bottom-header-wrap.fixed{background-color:#0d3f7a;}
.gnb-open .sub .bottom-header-wrap{background-color:#fff;}
.gnb-open .sub .bottom-header-wrap.fixed{background-color:#fff;}
.sub .header-box{background-color:transparent;}

.gnb-open .util-box .link-box li:after{background-color:#585858;}
.gnb-open .util-box .link-box li a, .gnb-open .gnb .gnb-ul > li > a, .gnb-open .util-box .link-box li a{color:#111;}
.gnb-open .util-box .btn-srch{background-image:url(/_res/yu/english/img/common/ico-srch01-over.png);}

.gnb{padding:30px 0 0;}
.gnb .gnb-ul > li{display:inline-block;padding:0 90px 0 0;}
.gnb .gnb-ul > li:last-of-type{padding-right:0;}
.gnb .gnb-ul > li > a{display:inline-block;position:relative;padding:0 0 30px 0;font-size:1.188rem;color:#fff;line-height:1.75rem;box-sizing:border-box;}
.gnb .gnb-ul > li > a:hover{color:#1976d2;}
.gnb .gnb-ul > li > a:after{content:'';display:block;position:absolute;left:50%;bottom:-1px;transform:translatex(-50%);width:0;height:4px;background:#1976d2;visibility:hidden;transition:width 0.3s;}
.gnb .gnb-ul > li > a[target="_blank"] span{position:relative;}
.gnb .gnb-ul > li > a[target="_blank"]:hover span:after{content:'';display:block;position:absolute;top:50%;right:-25px;width:14px;height:14px;background:url(/_res/yu/english/img/common/ico-sitemap-link-hover.png) no-repeat center right 1px/13px;transform:translateY(-50%);}

/* gnb가 오픈되어있을 때만 */
.gnb-open .gnb .gnb-ul > li > a:hover:after{visibility:visible;width:100%;}
.gnb-open .gnb .gnb-ul > li.on > a:after{visibility:visible;width:100%;}

.gnb .gnb-ul > li.on > a{color:#1976d2;}
.gnb .gnb-ul > li.on > a:after{display:block;}
.gnb .gnb-ul > li > .gnb-inner{display:block;position:absolute;top:100%;left:50%;transform:translate(-50%,0);z-index:20;width:100%;max-width:1920px;min-height:605px;border-top:1px solid #e0e0e0;background:#fff;overflow-y:auto;visibility:hidden;opacity:0;transition:all 0.3s;}
.gnb .gnb-ul > li.on > .gnb-inner{visibility:visible;opacity:1;}
.gnb .gnb-ul > li > .gnb-inner > div{position:relative;margin:0 auto;width:100%;max-width:1480px;min-height:605px;background-color:#fff;box-sizing:border-box;}
.gnb .gnb-ul > li > .gnb-inner .btn-menu-close{position:absolute;top:40px;right:0;width:24px;height:24px;background:url(/_res/yu/english/img/common/btn-menu-close.png) no-repeat 50% 50%/100%;}

/* scrollert */
.gnb .gnb-ul > li > .gnb-inner .scrollert-content{padding:40px 40px 40px 0;}
.gnb .gnb-ul > li > .gnb-inner .scrollert > .scrollert-scrollbar{top:64px;max-height:506px;}
.gnb .scrollert > .scrollert-scrollbar > .scrollert-track:before{background:#E5E5E5;}
.scrollert > .scrollert-scrollbar:before{background:rgba(0, 0, 0, .01);}

.sub-mn{display:flex;flex-wrap:wrap;}
.sub-mn > li{margin:0 0 40px;padding:0 15px 0 0;width:calc(100% / 6);border-left:1px solid #e0e0e0;box-sizing:border-box;}
.sub-mn > li:nth-of-type(6n){border-right:1px solid #e0e0e0;}
.sub-mn > li:last-of-type{border-right:1px solid #e0e0e0;}
.sub-mn > li > a{display:block;padding:10px 0 10px 20px;font-weight:700;font-size:1.125rem;color:#333;line-height:1.75rem;}
.sub-mn > li > a[target='_blank'] span{padding:0 18px 0 0;background:url(/_res/yu/english/img/common/ico-link-gnb.png) no-repeat center right 1px/12px;}
.sub-mn > li > a.download span{padding:0 20px 0 0;background:url(/_res/yu/english/img/common/ico-down-gnb.png) no-repeat center right 1px/14px;}
.sub-mn > li > a[target='_blank']:hover span,
.sub-mn > li:hover > a[target='_blank'] span{background-image:url(/_res/yu/english/img/common/ico-link-gnb-hover.png);}
.sub-mn > li > a.download:hover span,
.sub-mn > li:hover > a.download span{background-image:url(/_res/yu/english/img/common/ico-down-gnb-hover.png);}
.sub-mn > li:hover > a{color:#1976d2;}
.sub-mn > li > a.active{color:#1976d2;}

.sub-mn02{padding:18px 0 0 0;}
.sub-mn02 > li{padding:0 0 13px;}
.sub-mn02 > li:last-of-type{padding-bottom:0;}
.sub-mn02 > li > a{position:relative;display:inline-block;padding:0 0 0 20px;font-weight:500;font-size:1rem;color: #555;line-height:21px;}
.sub-mn02 > li > a:after{content:'';display:none;position:absolute;top:0;left:-1px;width:1px;height:100%;background:#1976d2;}

.sub-mn02 > li > a.active{color:#1976d2;}
.sub-mn02 > li > a.active:after{display:block;}
.sub-mn02 > li > a[target='_blank'] span{padding:0 16px 0 0;background:url(/_res/yu/english/img/common/ico-link-gnb.png) no-repeat center right 1px/11px;}
.sub-mn02 > li > a.download span{padding:0 16px 0 0;background:url(/_res/yu/english/img/common/ico-down-gnb.png) no-repeat center right 1px/11px;}
.sub-mn02 > li > a:hover{color:#1976d2;}
.sub-mn02 > li > a:hover:after{display:block;}
.sub-mn02 > li:hover > a[target='_blank'] span{background-image:url(/_res/yu/english/img/common/ico-link-gnb-hover.png);}
.sub-mn02 > li:hover > a.download span{background-image:url(/_res/yu/english/img/common/ico-down-gnb-hover.png);}
/* 임시 링크 아이콘 적용 */
#pc-gnb-menu-2091{position:relative;}
.sub-mn > li:hover #pc-gnb-menu-2091:after{background-image:url(/_res/yu/english/img/common/ico-link-on.png);}
#pc-gnb-menu-2091:after{content:'';display:inline-block;margin:0 0 0 10px;width:15px;height:14px;background:url(/_res/yu/english/img/common/ico-link.png) no-repeat 0 0/100%;vertical-align:middle;}

.util-box{display:flex;flex-wrap:wrap;align-items:center;}
.util-box > li{position:relative;}
.util-box > li > .btn-srch{display:block;margin:0 30px 0 0;width:25px;height:25px;background:url(/_res/yu/english/img/common/ico-srch01.png) no-repeat 0 0/100%;}
.util-box > li > .btn-srch:hover{animation:vibrate 0.75s linear 1;}
.util-box > li > .btn-all-menu{display:block;position:relative;margin:0 30px 0 0;width:30px;height:25px;}
.util-box > li > .btn-all-menu:before{content:'';display:block;position:absolute;top:0;right:0;width:30px;height:3px;background:#fff;transition:all .3s ease;}
.util-box > li > .btn-all-menu span{position:absolute;top:50%;right:0;margin:-1.5px 0 0;width:23px;height:3px;background:#fff;text-indent:-9999px;color:transparent;transition:all .3s ease;}
.util-box > li > .btn-all-menu:after{content:'';display:block;position:absolute;right:0;bottom:0;width:26px;height:3px;background:#fff;transition:all .3s ease;}

/* gnb 오픈시 */
.gnb-open .util-box > li > .btn-all-menu:before,
.gnb-open .util-box > li > .btn-all-menu span,
.gnb-open .util-box > li > .btn-all-menu:after{background:#000;}

/* 사이트맵 버튼 호버효과 */ 
.util-box > li > .btn-all-menu:hover:before,
.util-box > li > .btn-all-menu:hover span,
.util-box > li > .btn-all-menu:hover:after{width:30px;}

/* 퀵메뉴 */
.util-box > li > .btn-quick-menu{display:block;padding:52px 0 22px 0;width:90px;height:90px;background:#caae78 url(/_res/yu/english/img/common/ico-quick.png) no-repeat top 25px center/20px;font-size:0.9375rem;line-height:1;color:#11244c;font-weight:500;text-align:center;box-sizing:border-box;}
.util-box > li > .btn-quick-menu.on{background-image:url(/_res/yu/english/img/common/ico-quick-on.png);background-size:30px;}
.util-box > li > .quick-box{display:none;position:absolute;top:100%;right:0;}
.util-box > li > .quick-box .quick-ul > li{text-align:center;}
.util-box > li > .quick-box .quick-ul > li > a{display:block;padding:33.5px 10px;width:90px;background:rgba(17, 36, 76, 0.7);font-size:0.937rem;line-height:1.438rem;color:#fff;box-sizing:border-box;}
.util-box > li > .quick-box .quick-ul > li.on > a{background:rgba(25, 118, 210, 0.7);}
.util-box > li > .quick-box .quick-ul > li .quick-inner{display:none;position:absolute;top:0;right:100%;padding:30px 38px;width:420px;height:100%;background:rgba(0, 0, 0, 0.85);text-align:left;box-sizing:border-box;}
.util-box > li > .quick-box .quick-ul > li.on .quick-inner{display:block;}
.util-box > li > .quick-box .quick-ul > li .quick-inner .scrollert{height:100%;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul{display:flex;flex-wrap:wrap;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul li{padding:6px 10px 0 0;width:50%;box-sizing:border-box;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul li:nth-of-type(2n){padding:6px 0 0 0;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul li:nth-of-type(-n+2){padding-top:0;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul li > a{display:inline-block;position:relative;padding:0 0 0 10px;font-size:0.937rem;line-height:1.25rem;color:#fff;font-weight:200;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul li > a:hover{font-weight:300;}
.util-box > li > .quick-box .quick-ul > li .quick-inner ul li > a:before{content:'';display:block;position:absolute;top:9px;left:0;width:3px;height:3px;background:#ddd;border-radius:50%;}

.gnb-bg{display:none;min-height:605px;}
.header-wrap.on .gnb-bg{display:block;}

.m-menu-box{display:none;}

/* 탑배너 닫는 버튼 */
.bottom-header-wrap > .btn-banner-wrap > .btn-banner{display:none;position:absolute;top:0;left:50%;transform:translate(-50%, 0);width:90px;height:22px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;background:#f3f3f3 url(/_res/yu/english/img/common/ico-top-banner-open.png) no-repeat center center/10px;}
.bottom-header-wrap > .btn-banner-wrap.open > .btn-banner{background:#f3f3f3 url(/_res/yu/english/img/common/ico-top-banner-close.png) no-repeat center center/10px;}

/* keyframe */
@keyframes vibrate{
	10%, 30%{transform:translateX(3px) rotate(2deg);}
	20%, 40%{transform:translateX(-3px) rotate(-2deg);}
	50%, 70%{transform:translateX(2px) rotate(1deg);}
	60%, 80%{transform:translateX(-2px) rotate(-1deg);}
	90%{transform:translateX(1px) rotate(0);}
	100%{transform:translateX(-1px) rotate(0);}
}

@media screen and (min-width:1025px) {
	.m-util{display:none;}
}

@media screen and (max-width:1600px) {
	.gnb .gnb-ul > li{padding:0 35px 0 0;}
	.gnb .gnb-ul > li > a{font-size:1rem;}
}
@media screen and (max-width:1400px) {
	.header-box .logo a{width:175px;}

	/* scrollert */
	.gnb .gnb-ul > li > .gnb-inner .scrollert-content{padding:37px 90px 37px 50px;}
	.gnb .gnb-ul > li > .gnb-inner .scrollert > .scrollert-scrollbar{top:60px;right:50px;}
	.gnb .gnb-ul > li > .gnb-inner .btn-menu-close{right:50px;}

	.sub-mn > li{width:calc(100%/3);}
	.sub-mn > li:nth-of-type(3n){border-right:1px solid #e0e0e0;}
	.sub-mn02{padding:10px 20px 10px;}
	.sub-mn02 > li > a:after{left:-21px;}
	.util-box .btn-srch{margin:0 15px 0 0;}
	.gnb .gnb-ul > li > .gnb-inner > p a{padding:0 0 0 56px;}
	.gnb .gnb-ul > li > .gnb-inner > p a:before{width:45px;}

}
@media screen and (max-width:1280px) {
	.header-box{padding:0 0 0 15px;}
	
	.gnb .gnb-ul > li{padding:0 20px 0 0;}
	.gnb .gnb-ul > li > a{letter-spacing:-0.05rem;}
	
	.util-box > li > .btn-srch{margin:0 15px 0 0;}
	.util-box > li > .btn-all-menu{margin:0 15px 0 0;}
}
@media screen and (max-width:1024px) {
	.header-box{display:block;position:relative;padding:0;}
	.header-box:after{content:'';display:block;clear:both;}
	.header-box .logo{display:inline-block;position:relative;left:50%;transform:translateX(-50%);padding:19px 0;}
	.header-box .logo a{width:unset;height:52px;}
	.header-box .logo a img{height:80%;}

	.gnb{display:none;}	

	.util-box{float:right;}
	.util-box > li > .btn-all-menu{margin:0;width:25px;height:25px;background:url(/_res/yu/english/img/common/btn-m-menu.png) no-repeat 50% 50%/100%;}
	.util-box > li > .btn-all-menu:before,
	.util-box > li > .btn-all-menu span,
	.util-box > li > .btn-all-menu:after{display:none;}
	.util-box > li > .btn-quick-menu{background-position:top 22px center;}
	.util-box > li.menu-box{position:absolute;top:30px;left:30px;}

	.m-menu-box{display:block;text-align:left;}
	.m-menu-box .btn-m-menu{display:none;margin:0 50px 0 0;width:25px;height:25px;background:url(/_res/yu/english/img/common/btn-m-menu.png) no-repeat 50% 50%/100%;}
}
@media screen and (max-width:640px) {
	.header-box .logo{display:inline-block;padding:20px 0 0 0;}
	.header-box .logo a{height:35px;}
	.header-box .logo a img{height:85%;}
	
	.util-box > li > .btn-srch{margin:0 16px 0 0;width:22px;height:23px;}
	.util-box > li > .btn-quick-menu{padding:40px 0 15px;;width:70px;height:70px;background-position:top 15px center;}
	.util-box > li > .quick-box .quick-ul > li > a{padding:26px 10px;width:70px;font-size:0.928rem;}
	.util-box > li > .quick-box .quick-ul > li .quick-inner{padding:10px;width:250px;}
	.util-box > li > .quick-box .quick-ul > li .quick-inner ul li > a{font-size:0.928rem;}

	.util-box > li > .btn-all-menu{width:22px;height:22px;}
	.util-box > li.menu-box{top:25px;left:20px;}
	.m-menu-box .btn-m-menu{margin:0 20px 0 0;width:22px;height:22px;}
}
@media screen and (max-width:420px) {
	.header-box .logo{left:25%;transform:none;}

	/* 탑배너 닫는 버튼 */
	.bottom-header-wrap > .btn-banner-wrap > .btn-banner{width:54px;height:14px;background-size:8px;}
	.bottom-header-wrap > .btn-banner-wrap.open > .btn-banner{background-size:8px;}
}
@media screen and (max-width:320px) {
	.header-box .logo{padding:20px 0;}
	.header-box .logo a{height:30px;}
}