@charset 'utf-8';
.mon{font-family: 'Montserrat', sans-serif;}

.header{position:fixed; width: 100%; padding: 0 60px; box-sizing:border-box; top: 0; left: 0; z-index: 500;border-bottom: 1px solid #272a38; border-bottom: 1px solid #ffffff21; font-size:0;}
.header .bg{background: transparent;  position:absolute; top: 0; left: 0; right: 0; height: 100px; transition:0.4s; z-index: -1; border-bottom: 1px solid transparent;}
.header .logo{position:relative; display:inline-block; vertical-align: middle; background:url(/img/common/logo.png) 50% 50% no-repeat; background-size:cover; width: 147.5px; height: 62.5px; transition:0.4s}
.header .logo a{position:absolute; top: 0; right: 0; bottom: 0; left: 0;}
.header .gnb{display:inline-block; width: calc(100% - 305px); vertical-align: middle; text-align: center;}
.header .gnb > ul{}
.header .gnb > ul > li{position:relative; display:inline-block; vertical-align: top;}
.header .gnb > ul > li > a{position:relative; display:inline-block; vertical-align: top; font-size:20px; color: #fff; line-height:100px; padding: 0 60px; transition:0.4s}
.header .gnb > ul > li > a span{position:relative; display:inline-block;}
.header .gnb > ul > li > a span::after{content:""; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #005aab; transition:0.4s}
.header .gnb > ul > li > ul{display:none; position:absolute; width: 100%; padding: 12px 0;}
.header .gnb > ul > li > ul > li{}
.header .gnb > ul > li > ul > li > a{display:inline-block; width: 100%; font-size:16px; color: #666; text-align: center; padding: 12px 0;}
.header .icon_box{display:none; position:relative; width: 87px; vertical-align: middle; z-index: 100; margin-right: 70px; text-align: right;}
.header .icon_box .mail{display:inline-block; vertical-align: middle; width: 24px; height: 22px;background:url(/img/common/icon_mail.png) 50% 50% no-repeat; background-size:cover; cursor: pointer; margin-right: 30px;}
.header .icon_box .my{display:inline-block; vertical-align: middle; width: 24px; height: 22px;background:url(/img/common/icon_my.png) 50% 50% no-repeat; background-size:cover; cursor: pointer;}
.header .icon_box .m_btn{position:relative; top: 2px; display:inline-block; vertical-align: middle; ;cursor: pointer;}
.header .icon_box .m_btn p{position:relative; font-family: 'Montserrat', sans-serif; font-weight:600; font-size:18px; color: #fff;}
.header .icon_box .m_btn p::before{content:""; margin-top: -2px; display:inline-block; vertical-align: middle; background:url(/img/common/icon_menu.png) 50% 50% no-repeat; background-size:cover; width: 16px; height: 16px; margin-right: 12px; margin-left: 0;}

.header .menu{position:fixed; top: 0; right: -100%; width: 100%; height: 100%; max-width:720px; background: #fff; z-index: 10; transition:0.4s}
.header .menu .tel{display:inline-block; vertical-align: top; margin: 37px 0;}
.header .menu .tel p{display:inline-block; vertical-align: middle; font-family: 'Montserrat', sans-serif; font-weight:600; font-size:18px; color: #005aab;} 
.header .menu .tel p::before{content:"";position:relative; top: -4px; display:inline-block; width: 30px; height: 22px; vertical-align: middle; background:url(/img/common/icon_telB.png) 50% 50% no-repeat; background-size:cover; margin-right: 20px; margin-left: 50px;}
.header .menu > ul{margin-top:100px;}
.header .menu > ul > li{display:inline-block; vertical-align: top; position:relative; width: 60%; box-sizing:border-box; padding-left: 80px;}
.header .menu > ul > li > a{display:inline-block; vertical-align: top;font-weight:300; font-size:45px; letter-spacing:-0.03em; color: #333; padding: 27.5px 0;}
.header .menu > ul > li > ul{display:none; position:absolute; left: 100%; width: 67%;vertical-align: top; padding-top: 27.5px; z-index: 2;}
.header .menu > ul > li > ul > li{}
.header .menu > ul > li > ul > li > a{position:relative; display:inline-block; width: 100%; font-size:20px; letter-spacing:-0.03em; color: #666; padding: 15px 0 15px 40px; width: 100%;}
.header .menu > ul > li > ul > li > a::before{content:""; position:absolute; left: -13px; top: 17px; width: 25px; height: 25px; border:1px solid #005aab; background: #fff; opacity: 0; border-radius:50%; z-index: 10;}
.header .menu > ul > li > ul > li > a::after{content:""; position:absolute; left: -4px; top: 26px; width: 9px; height: 9px; background: #005aab;  opacity: 0; border-radius:50%; z-index: 10;}
/* hover */
.header.sc .bg,
.header.on .bg{background: #fff;}
.header.on::after{content:""; position:absolute; top: 100px; left: 0; width: 100%; height: 1px; background: #ddd;}
.header .bg.on{height: 354px; }
.header.sc .gnb > ul > li > a,
.header.on .gnb > ul > li > a{color: #333;}
.header .gnb > ul > li:hover > a{color: #005aab;}
.header .gnb > ul > li:hover > a span::after{width: 100%;}
.header .gnb > ul > li > ul > li:hover > a{color: #005aab;}
.header .menu.on{display:none; right: 0;}
.header .menu > ul > li > a.on,
.header .menu > ul > li:hover > a{font-weight:bold; color: #005aab;}
.header .menu > ul > li > ul > li > a.on,
.header .menu > ul > li > ul > li:hover > a{font-weight:bold; color: #005aab;}
.header .menu > ul > li > ul > li > a:hover::before{opacity: 1; transition:0.4s;}
.header .menu > ul > li > ul > li > a:hover::after{opacity: 1; transition:0.4s;}

.header .loginTop{position:absolute; right: 135px; top: 52%; transform:translateY(-50%); z-index: 100;  padding: 4px 15px; border:1px solid #fff; border-radius:30px; display:flex; gap:10px; }
.header .loginTop li{}
.header .loginTop li a {font-family: 'Montserrat', sans-serif; font-weight:600; font-size:16px; color: #fff;}
.header .loginTop li a.log { padding-left:5px; }
/*
.header .loginTop li a.log { padding-left:25px; background:url(/img/common/log.svg) left 50% no-repeat; }
*/

.header .lang{position:absolute; right: 60px; top: 52%; transform:translateY(-50%); z-index: 100;  padding: 4px 15px; border:1px solid #fff; border-radius:30px}
.header .lang li{}
.header .lang li a{font-family: 'Montserrat', sans-serif; font-weight:600; font-size:16px; color: #fff;}


.header.sc .logo,
.header.on .logo{background:url(/img/common/logo_ov.png) 50% 50% no-repeat; background-size:cover;}
.header .icon_box.on .mail,
.header.on .icon_box .mail{background:url(/img/common/icon_mailOn.png) 50% 50% no-repeat; background-size:cover}
.header .icon_box.on .my,
.header.on .icon_box .my{background:url(/img/common/icon_myOn.png) 50% 50% no-repeat; background-size:cover}
.header .icon_box.on .m_btn p,
.header.sc .icon_box .m_btn p,
.header.on .icon_box .m_btn p{color: #005aab;}
.header.sc .icon_box .m_btn p::before,
.header.on .icon_box .m_btn p::before{background:url(/img/common/icon_menuH.png) 50% 50% no-repeat; background-size:cover;}
.header .icon_box.on .m_btn p::before{background:url(/img/common/icon_menuOn.png) 50% 50% no-repeat; background-size:cover;}
.header.sc .lang,
.header.on .lang{border-color:#333}
.header .lang.on{border-color:#005aab}
.header.on .lang li a,
.header.sc .lang li a{color: #333;}
.header.sc .loginTop,
.header.on .loginTop{border-color:#333}
.header .loginTop.on{border-color:#005aab}
.header.on .loginTop li a,
.header.sc .loginTop li a.log { color: #333; }
/*
.header.on .loginTop li a,
.header.sc .loginTop li a.log { color: #333; background:url(/img/common/log_on.svg) left 50% no-repeat; }
*/


/* 메인 푸터 */
.footer{padding: 38px 60px; font-size:0;border-top: 1px solid #272731; border-top: 1px solid #ffffff21;}
.footer.on{position:fixed; bottom: 0; left: 0; width: 100%; z-index: 50;}
.footer .left{display:inline-block; width: calc(100% - 376px); vertical-align: top;}
.footer .left .f_tel{display:inline-block; width: 152px; vertical-align: top; margin-right: 78px;}
.footer .left .f_tel p{position: relative; font-family: 'Montserrat', sans-serif; font-weight:500; font-size:16px; color: #fff;}
.footer .left .f_tel p::before{content:"";position: relative; top: -2px; display:inline-block; vertical-align: middle;  width: 20px; height: 15px; background:url(/img/common/icon_telS.png) 50% 50% no-repeat; background-size:cover; margin-right: 8px;}
.footer .left .copy{display:inline-block; width: calc(100% - 230px); vertical-align: top; font-family: 'Montserrat', sans-serif; font-size:16px; color: #fff; letter-spacing:-0.03em; opacity: 0.6;}
.footer .right{display:inline-block; width: 376px; vertical-align: top; text-align: right;}
.footer .right li{display:inline-block; vertical-align: top;}
.footer .right li a{display:inline-block; vertical-align: top;font-family: 'Montserrat', sans-serif; font-size:16px; color: #fff; letter-spacing:-0.03em; opacity: 0.6; margin-right: 78px;}
.footer .right li a:hover{opacity: 1;}
.footer .right li:last-of-type a{margin-right: 0;}

/* 서브푸터 */
.sub_foo{ font-size:0; padding: 160px 0 70px;}
.sub_foo .w1600{position:relative; }
.sub_foo .left{display:inline-block; width: calc(100% - 280px); vertical-align: bottom;}
.sub_foo .left .logo{display:inline-block; width: 160px; height: 65px; background:url(/img/common/f_logo.png) 50% 50% no-repeat; background-size:cover;}
.sub_foo .left address{font-size:14px; letter-spacing:-0.03em; color: #fff; opacity: 0.6;line-height:1.5em; margin: 36px 0 14px; word-break:keep-all}
.sub_foo .left .copy{font-size:14px;  color: #fff; letter-spacing:-0.03em; opacity: 0.4; line-height:1.5em}
.sub_foo .right{display:inline-block; width: 280px; vertical-align: bottom; text-align: right;}
.sub_foo .right .f_link{}
.sub_foo .right .f_link li{position:relative; display:inline-block; vertical-align: top; opacity: 0.4; margin-right: 24px;}
.sub_foo .right .f_link li::after{content:""; position:absolute; top:4px; right: -15px; width: 1px; height: 10px; background: #fff;}
.sub_foo .right .f_link li:last-of-type{margin-right: 0;}
.sub_foo .right .f_link li:last-of-type::after{display:none; }

.sub_foo .right .f_link li a{display:inline-block; vertical-align: top; font-size:14px; letter-spacing:-0.03em; color: #fff;}
.sub_foo .right .tel{font-weight:500; font-size:18px; color: #fff; margin-top:37px; opacity: 0.6;}
.sub_foo .right .tel span{font-size:18px; margin-right: 10px;}
.sub_foo .right .tel span i{position: relative; top: -2px; display:inline-block; vertical-align: middle;  width: 20px; height: 15px; background:url(/img/common/icon_telS.png) 50% 50% no-repeat; background-size:cover; margin-right: 8px;}
/* 탑 */
.sub_foo .top_btn{width: 60px; height: 60px; position:absolute; top: -70px; right: 0; cursor: pointer; text-align: center; padding: 17px 0; z-index: 50;}
.sub_foo .top_btn::before{content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff;opacity: 0.2;}
.sub_foo .top_btn p{opacity: 0.5; font-size:12px; letter-spacing:-0.03em; color: #fff; line-height:14px; margin-top:6px;}

@media screen and (max-width:1500px){
	.header .gnb{width: calc(100% - 255px);}
	.header .icon_box{margin-right: 0;}
	.header .gnb > ul > li > a{padding: 0 50px;}
	.header .loginTop{ padding:4px 12px; gap:7px; }
}
@media screen and (max-width:1380px){
	.header .gnb > ul > li > a{padding: 0 30px;}
}

@media screen and (max-width:1200px){
.header{padding: 12px 16px; }
	.header.on::after{display:none; }
	.header .bg{height: 85px;}
	.header .gnb{width: calc(100% - 235px);}
	.header .gnb ul{display:none;}
	.header .icon_box{width: 87px;}
/* 	.header .icon_box .m_btn p::before{margin-left: 40px;} */
	
	.header .menu{max-width:520px;}
	.header .menu.on{display:block; }
	.header .menu .tel{margin: 30px 0; }
	.header .menu > ul{margin-top:100px;}
	.header .menu > ul > li{width: 100%; padding-left: 50px;}
	.header .menu > ul > li > a{width: 100%; padding: 16px 0;}
	.header .menu > ul > li > ul{width: 100%; position:static; padding-top:0;}
	.header .menu > ul > li > ul > li > a{padding: 10px 16px;}
	.header .menu > ul > li > ul > li > a::after,
	.header .menu > ul > li > ul > li > a::before{display:none; }

	.header .icon_box{display:inline-block; }
	.header .lang{right: 130px; z-index: 100;}
	.header .lang.on li a{color: #005aab;}
	.header.on .lang li a,
	.header.sc .lang li a{color: #005aab;}
	.header.sc .lang,
	.header.on .lang{border-color:#005aab}

	.header .loginTop{ right:220px; }


	.footer{padding: 20px 16px;}
	.footer .left{vertical-align: middle; width: calc(100% - 326px);}
	.footer .right{vertical-align: middle; width: 326px;}
	.footer .left .f_tel,
	.footer .left .copy{width: 100%;}
	.footer .left .copy{margin-top:10px;}
	.footer .right li a{margin-right: 30px;}
}

@media screen and (max-width:1000px){
	.sub_foo{padding: 100px 0 70px;}
	.sub_foo .left{width: 100%;}
	.sub_foo .right{width: 100%; text-align: left; margin-top:20px;}
	.sub_foo .left address{margin: 14px 0 10px;}
	.sub_foo .right .tel{margin-top:14px;}
	.sub_foo .top_btn{top: auto; bottom: 0;}


}

@media screen and (max-width:800px){
/* 	.header .gnb{width:calc(100% - 351px);} */
	.header .logo { background-size:135px auto }
	.header .icon_box{margin-right: 0;}
	.header .icon_box .m_btn p::before { margin-right:8px;}
	
	.header .menu > ul{text-align: right; margin-top:85px;}
	.header .menu > ul > li{ padding-left: 0; padding-right: 16px;}
	.header .menu > ul > li > a{font-size:38px;}
	.header .menu .tel p::before{margin-left: 16px;}
	
	
	.footer{padding: 10px 16px;}
	.footer .left{width: 100%;}
	.footer .right{width: 100%; margin-top: 10px;}
	.footer .left .copy{font-size:14px; opacity: 0.8;}
	.footer .right li a{font-size:14px; opacity: 0.8;}
	
	.sub_foo{padding: 30px 0 60px;}
	.sub_foo .right .tel{font-size:26px;}
    .header .lang { right:102px; }
	.header .loginTop{ right:174px; padding:4px 10px 4px 7px; gap:5px; }



}