@charset "utf-8";

/* layout */
.w-inner {	width: 100%; max-width:1780px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.s-inner {	width:100%; max-width:1480px;	position:relative;	margin-left:auto;	margin-right:auto; }
#wrap { /* overflow-x: hidden; */ /*scroll-behavior:smooth;*/ }

/* 타블렛 가로 */
@media all and (max-width:1800px) {
	.w-inner {	width:94% !important; }
}
@media all and (max-width:1620px) {
	.inner {	width:94% !important; }
}
@media all and (max-width:1500px) {
	.s-inner {	width:94% !important; }
}
@media all and (max-width:1280px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:976px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:768px) {
	html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}


/* header  */
#header{height: 100px; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999;border-bottom: 1px solid transparent;}
#header.ons{background: #fff;}
#header.scrolled{background: #fff;}
#header.scrolled2{background: transparent;}
#header .w-inner{height: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .w-inner #logo{}
#header .w-inner #logo a{display: block; width:224px; height: 48px; background: url(/images/common/logo.png) no-repeat left center / contain;}
#header:hover .w-inner #logo a, #header.scrolled .w-inner #logo a {background: url(/images/common/logo_b.png) no-repeat left center / contain;}
#header .w-inner .pcGnb{}
#header .w-inner .pcGnb > ul{display: flex; align-items: center; gap:60px;}
#header .w-inner .pcGnb > ul > li{position: relative;}
#header .w-inner .pcGnb > ul > li > div{line-height: 100px;}
#header .w-inner .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 500; color: #fff;}
#header:hover .w-inner .pcGnb > ul > li > div > a, #header.scrolled .w-inner .pcGnb > ul > li > div > a {color:#122663;}
#header .w-inner .pcGnb > ul > li:hover > div > a{color:var(--color1);}
#header .w-inner .pcGnb > ul > li > ul{position: absolute; width: max-content; background:#fff; padding: 25px 30px; border-radius: 10px; border: 1px solid #eeeeee; top: 80px; display: none; left: 50%; transform: translateX(-50%);}
#header .w-inner .pcGnb > ul > li > ul > li{}
#header .w-inner .pcGnb > ul > li > ul > li + li{margin-top: 13px;}
#header .w-inner .pcGnb > ul > li > ul > li > a{font-size: 16px; color: #777; font-weight: 500;}
#header .w-inner .pcGnb > ul > li > ul > li:hover > a{font-weight: 500; color: #000;}
#header .w-inner .r_menu{display: flex; align-items: center; gap:40px;}
#header .w-inner .r_menu .cta{}
#header .w-inner .r_menu .cta a{background-color: var(--color1); color: #fff; font-size: 16px; font-weight: 600; line-height: 44px; padding: 0 30px; border-radius: 5px; display: block;}
#header .w-inner .menutoggle{height: 19px; flex-direction: column; justify-content: space-between; cursor: pointer; display: none;}
#header .w-inner .menutoggle span{width: 25px; height: 1px; background-color: #fff;}
#header .w-inner .menutoggle span.t{transition: 0.3s;}
#header .w-inner .menutoggle span.m{transition: 0.3s;}
#header .w-inner .menutoggle span.b{transition: 0.3s;}
#header .lang{display: flex; font-family: 'poppins'; font-size: 1.8rem; font-weight: 600; gap: 20px;}
#header .lang li{position: relative;}
#header .lang li:after{content: ''; width: 2px; height: 12px; top: 51%; transform: translateY(-50%); right: -11px; background: #fff; opacity: 0.3; position: absolute;}
#header .lang li:last-child:after{display: none;}
#header .lang li a{color: #fff;}
#header .lang li a{opacity: 0.3;}
#header .lang li.on a{opacity: 1;}


#header.onss .w-inner .menutoggle span.t { transform: translateY(9px) rotate(45deg); background-color: #111; }
#header.onss .w-inner .menutoggle span.m { opacity: 0; }
#header.onss .w-inner .menutoggle span.b { transform: translateY(-9px) rotate(-45deg); background-color: #111; }
#header.onss .lang li a{color: #222;}
#header.onss .lang li:after{background: #222;}

.mo_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: none; }
.mo_bg.on { display: block; }

.moGnb { position: fixed; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100%; background: #fff; z-index: 10001; transition: 0.4s; padding: 40px 30px; }
.moGnb.on { right: 0; }
.moGnb .mo_top { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.moGnb .mo_top .f_logo img { height: 35px; }
.moGnb .mo_top .mo_close { width: 24px; height: 24px; position: relative; cursor: pointer; }
.moGnb .mo_top .mo_close span { width: 100%; height: 2px; background: #111; position: absolute; top: 11px; left: 0; display: block; transition: 0.3s; }
.moGnb .mo_top .mo_close span:nth-child(1) { transform: rotate(45deg); }
.moGnb .mo_top .mo_close span:nth-child(2) { transform: rotate(-45deg); }

.moGnb .m_nav > ul > li { border-bottom: 1px solid #f5f5f5; }
.moGnb .m_nav > ul > li > div > a { display: block; padding: 15px 0; font-size: 18px; font-weight: 700; color: #111; position: relative; }
.moGnb .m_nav > ul > li > div > a::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: #999; }
.moGnb .m_nav > ul > li.on > div > a::after { content: '-'; }

.moGnb .m_nav > ul > li > ul { background: #f8f9fb; padding: 10px 20px; display: none; }
.moGnb .m_nav > ul > li > ul > li > a { display: block; padding: 10px 0; font-size: 15px; color: #666; }


/* 기존 #header 관련 스타일에 .scrolled 클래스만 병기 */
#header{ transition: background 0.3s, border 0.3s; }
/* #header:hover, #header.scrolled { background: #fff; border-bottom: 1px solid #eee; } */
#header:hover .w-inner #logo a, #header.scrolled .w-inner #logo a { background: url(/images/common/logo_b.png) no-repeat left center / contain; }
#header:hover .w-inner .pcGnb > ul > li > div > a, #header.scrolled .w-inner .pcGnb > ul > li > div > a { color:#111; }
#header:hover .w-inner .menutoggle span, #header.scrolled .w-inner .menutoggle span { background-color: #111; }
#header.scrolled .lang li a,
#header:hover .lang li a{color: #222;}
#header:hover .lang li:after,
#header.scrolled .lang li:after{background: #222;}


@media (max-width: 1280px) {
    #header { height: 80px;}
    #header.scrolled {background: #fff;}
    #header .w-inner .l_menu { gap: 40px; }
    #header .w-inner #logo a { width: 200px; }
    #header .w-inner .pcGnb > ul { gap: 30px; }
    #header .w-inner .pcGnb > ul > li > div { line-height: 80px; }
    #header .w-inner .pcGnb > ul > li > div > a { font-size: 16px; }
    #header .lang{font-size: 1.6rem;}
}
@media (max-width: 1024px) {
}
@media  (max-width:768px) {
    #header .w-inner .menutoggle{display: flex;}
    #header .w-inner #logo a{width: 18rem;}
    #header .w-inner .pcGnb, #header .w-inner .r_menu .cta { display: none; }
    #header .w-inner .r_menu { gap: 20px; }
    .moGnb .mo_top .f_logo img { height: 3rem; }
}




/* footer */
#footer {width:100%; overflow: hidden; background: #121212; color: #fff; padding: 7rem 0; height: 42rem;}
#footer .info{padding: 3rem 0 5rem; display: flex; justify-content: space-between; align-items: flex-end;}
#footer .info .lt{display: flex; flex-wrap: wrap; width: 540px; gap: 2rem 4rem; font-size: 1.6rem;}
#footer .info .lt li{display: flex; gap: 3rem; align-items: center;}
#footer .info .lt li span{opacity: 0.5;}
#footer .info .rt{display: flex; flex-direction: column; justify-content: right; text-align: right; gap: 1rem;font-size: 1.6rem;}
#footer .info .rt a{color: #fff;}
#footer .last{border-top: 1px solid rgba(255,255,255,0.4); padding-top: 4rem;display: flex;justify-content: space-between; font-size: 1.6rem; align-items: center;}


@media  (max-width:768px){
    #footer {height: 44rem;}
    #footer .logo img{width: 18rem;}
    #footer .info{flex-direction: column; gap: 4rem;}
    #footer .info .lt{width: 100%;}
    #footer .info .rt{text-align: left; flex-direction: initial; justify-content: flex-start; width: 100%; gap: 2rem;}
    #footer .last{font-size: 1.4rem;}
}
@media  (max-width:480px){
    #footer {padding: 5rem 0; height: 38rem;}
    #footer .logo img{width: 16rem;}
    #footer .info{gap: 2.5rem; padding: 3rem 0 4rem;}
    #footer .info .lt{font-size: 1.5rem; gap: 1rem 3rem;}
    #footer .info .rt{font-size: 1.5rem;}
    #footer .last{font-size: 1.3rem;}
}