@charset "utf-8";

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

/* 타블렛 가로 */
@media all and (max-width:1599px) {
	.inner {	width:90%; }
}
@media all and (max-width:1399px) {
	.s-inner {	width:90%; }
}
@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{height: 100px; width: 100%; position: fixed; top: 0; left: 0; z-index: 2000; }
#header::before{ content:''; position: fixed; top:0; left:0; width:100vw; height:100vh; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: rgba(255,255,255,0.08); opacity: 0; visibility: hidden; transition: .3s; pointer-events: none; z-index: -1;}
#header.ons::before{ opacity: 1; visibility: visible;}
#header .inner{display: flex; height: 100%; justify-content: space-between;}
#header #logo{height: 100%; display: flex; align-items: center; justify-content: center;}
#header #logo a{display: block; width: 200px; }
#header #logo a img{width: 100%;}
#header #logo a img.on{display: none;}
#header.on #logo a img.off{display: none;}
#header.on #logo a img.on{display: block;}
#header .pcGnb{display: flex; align-items: center; margin-right: 180px;}
#header .pcGnb > ul{display: flex; justify-content: center; align-items: center; gap:50px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 400; color: #222; line-height: 100px; display: block;}
#header .pcGnb > ul > li:hover > div > a{ color: var(--color1) !important;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; left: 50%; transform: translateX(-50%); text-align: left; width:100%; }
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li > a{font-weight: 400; color: #222; font-size: 18px;  display: block; line-height: 40px;font-size: 17px;}
/* #header .pcGnb > ul > li > ul > li:hover > a{} */


#header .pcGnb button{display: none;}
#header .pcGnb > ul > li > ul > li > ul{display: none; top: 0; height: 100%; position: absolute; width:200px; right: -200px; z-index: 2001; background-color: #0886bd;}
#header .pcGnb > ul > li > ul > li > ul > li > a{font-weight: 600; color: #fff;  display: block; line-height: 40px;font-size: 17px; background-color: #0886bd;}
#header .pcGnb > ul > li > ul > li > ul > li:hover > a{background-color: #fff; color: #0886bd;}
#header .pcGnb > ul > li > ul > li > ul > li > ul{display: none; top: 0; height: 100%;  position: absolute; width: 200px; right: -200px; z-index: 2002; background-color: #0a6992;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > a{font-weight: 600; color: #fff;  display: block; line-height: 40px;font-size: 17px; background-color: #0a6992;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li:hover > a{background-color: #fff; color: #0a6992;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > ul{display: none; top: 0; height: 100%;   position: absolute; width: 200px; right: -200px; z-index: 2002; background-color: #074661;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > ul > li > a{font-weight: 600; color: #fff;  display: block; line-height: 40px;font-size: 17px; background-color: #074661;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a{background-color: #fff; color: #074661;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > ul > li > ul{display: none; top: 0; height: 100%;   position: absolute; width: 200px; right: -200px; z-index: 2002; background-color: #022a3b;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a{font-weight: 600; color: #fff;  display: block; line-height: 50px;font-size: 17px; background-color: #022a3b;}
#header .pcGnb > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:hover > a{background-color: #fff; color: #022a3b;}

#header .r_menu{display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: 40px; gap:20px;}
#header .r_menu > a{color: #fff; background: var(--color1);font-size: 1.5rem; display: inline-block; padding: 0.5rem 1rem; border-radius: 5px;}

#header .r_menu .menuToggle{cursor: pointer;}
#header .r_menu .menuToggle img{max-width: 23px; filter: grayscale(0) brightness(1)}


.lang{display: flex;gap: 1rem;}
.lang li{width: 2.5rem;}
.lang li img{filter: grayscale(1) opacity(0.5);}
.lang li.on img{filter: grayscale(0) opacity(1);}
.lang li img{width: 100%;}

#header.on{background-color: #000;}
#header.on #logo a img.off{display: none;}
#header.on #logo a img.on{display: block;}
#header.on .pcGnb  ul  li  div  a{color: #fff;}
#header.on .r_menu .call{cursor: pointer;}
#header.on .r_menu .call img{filter: grayscale(0) brightness(1)}
#header.on .r_menu .call p{color: #222222;}
#header.on .r_menu .call p b{ color: #22372b;}
#header.on .r_menu .menuToggle img{max-width: 23px; filter: grayscale(0) brightness(1) invert(1)}
#header.on .login li::after{background: #000;}
#header.on .login a{color: #000;}

/* #header.onn{background-color: #fff; border-bottom: 1px solid #eee;}
#header.onn #logo a img.off{display: none;}
#header.onn #logo a img.on{display: block;}
#header.onn .pcGnb > ul > li > div > a{color: #222;}
#header.onn .pcGnb > ul > li:last-child > div> a{color: #238bfd;}
#header.onn .r_menu .call{cursor: pointer;}
#header.onn .r_menu .call img{filter: grayscale(0) brightness(1)}
#header.onn .r_menu .call p{color: #222222;}
#header.onn .r_menu .call p b{ color: #22372b;}
#header.onn .r_menu .menuToggle img{max-width: 23px; filter: grayscale(0) brightness(1)}
#header.onn .login li::after{background: #000;}
#header.onn .login a{color: #000;} */

/* #header:hover{background-color: #fff; border-bottom: 1px solid #eee;}
#header:hover #logo a img.off{display: none;}
#header:hover #logo a img.on{display: block;}
#header:hover .pcGnb > ul > li > div > a{color: #222;}
#header:hover .r_menu .call img{filter: grayscale(0) brightness(1)}
#header:hover .r_menu .call p{color: #222222;}
#header:hover .r_menu .call p b{ color: #22372b;}
#header:hover .r_menu .menuToggle img{max-width: 23px; filter: grayscale(0) brightness(1)}
#header:hover .login li::after{background: #000;}
#header:hover .login a{color: #000;} */



@media all and (max-width:1480px){
    #header #logo a{}
    #header .pcGnb > ul{gap:30px;}
    #header .pcGnb > ul > li > div > a{font-size: 16px;}
    #header .r_menu{gap: 20px;}
}
@media all and (max-width:1340px){
    #header .r_menu .menuToggle{display: block;}
}
@media all and (max-width:1280px){
    #header #logo a{width: 180px; }
    #header .pcGnb > ul{gap: 20px;}
    #header .pcGnb > ul > li > ul{width:160px;}
    #header .pcGnb > ul > li > ul > li > a{font-size: 1.6rem;}
    #header .pcGnb > ul > li > div > a{font-size: 15px;}
    #header .r_menu > a{font-size: 1.4rem;}
}
@media all and (max-width:1080px){
    #header .inner{height: 100%; display: flex; justify-content: space-between; align-items: center;}
    #header #logo{position: static; transform: none; width:160px;}
    #header #logo a{width: 100%;}
    #header #logo a img{width: 100%;}
    #header .pcGnb{display: none;}
    #header .r_menu{position: static; transform: none;}
}
@media all and (max-width:780px){
    #header{height: 70px;}
    #header #logo{}
    #header .r_menu{right: 20px;}
}
@media all and (max-width:580px){
    #header{height: 60px;}
    #header #logo{width: 16rem;}
    #header .r_menu #hd_sch{display: none;}
    #header .r_menu > a{display: none;}
}


/* moGnb */
.mo_bg{position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: -1; opacity: 0; visibility: hidden; z-index: -1; transition: 0s; top: 0; left: 0;  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.mo_bg.on{z-index: 2004; visibility: visible; opacity: 1;}
.moGnb{position: fixed; right: -100%; background-color: #fff; height: 100vh; width: 35%; top: 0; transition: .2s; z-index: 2005;}
.moGnb.on{right: 0;}
.moGnb .close{padding: 20px; font-size: 35px; color: #000; text-align: right; cursor: pointer;}
.moGnb .close a{color: #fff; background: var(--color1);font-size: 1.5rem; display: inline-block; padding: 0.5rem 1rem; border-radius: 5px; display: none;}
.moGnb > ul{padding: 2rem 4rem;}
.moGnb > ul > li{}
.moGnb > ul > li > div{cursor: pointer;}
.moGnb > ul > li > div > a{font-size: 2rem; color: var(--color1); padding: 2rem; display: block; font-weight: bold;}
.moGnb > ul > li.on > div > a{color: #22372b;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li > a{display: block; padding:0.5rem 2.5rem; font-size: 1.8rem; color: #222; font-weight: 300; transition: .2s;}
.moGnb > ul > li > ul > li:last-child > a{padding-bottom: 2rem;}
.moGnb > ul > li > ul > li:hover{color: #000;}
.moGnb .info{margin-top: 5rem; text-align: right;font-size: 2rem;}
.moGnb .info li + li{margin-top: 1rem;}



@media all and (max-width:1280px){
    .moGnb{width: 100%; max-width: 500px;}
}
@media all and (max-width:580px){
    .moGnb > ul{padding: 1rem 2rem;}
    .moGnb .info{font-size: 1.8rem;}
    .moGnb .close{display: flex; justify-content: space-between; align-items: center;}
    .moGnb .close a{display: inline-block; margin-left: 1rem;}
}


/* footer */
#footer {padding: 7rem 0; background: var(--color2);}
#footer .top{display: flex; align-items: center; gap: 5rem;}
#footer .top a{color: #fff;font-size: 2rem;}
#footer .bot{display: flex; align-items: end; color: #fff; margin-top: 6rem; justify-content: space-between;}
#footer .bot .lt{font-size: 1.6rem; width: 660px;}
#footer .bot .lt ul{display: flex; flex-wrap: wrap; gap: 0.5rem 3rem; margin-top: 1rem;}
#footer .bot .lt ul li{position: relative;}
#footer .bot .lt ul li:after{content: '';width: 1px; height: 1.5rem; background: #fff; position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%);}
#footer .bot .lt ul li:nth-child(4):after{display: none;}
#footer .bot .lt ul li:nth-child(6):after{display: none;}
#footer .bot .lt ul li:last-child:after{display: none;}
#footer .bot .lt a{background: #fff; display: inline-block; margin-top: 2rem; color: var(--color1); padding: 0.5rem 2rem;font-size: 1.5rem; border-radius: 0.5rem;}

@media all and (max-width:1280px){
    #footer .top a{font-size: 1.8rem;}
    #footer .bot .rt{width: 20rem;}
    #footer .bot .rt img{width: 100%;}
}
@media all and (max-width:980px){
    #footer .bot{flex-wrap: wrap;gap: 4rem; justify-content: end;}
    #footer .bot .lt ul li:nth-child(4):after{display: block;}
    #footer .bot .lt ul li:nth-child(6):after{display: block;}
    #footer .bot .lt{width: 100%;}
}
@media all and (max-width:768px){
    #footer {padding: 5rem 0;}
    #footer .top{gap: 1rem 2rem;flex-wrap: wrap;}
    #footer .top a{font-size: 1.6rem;}
}
@media all and (max-width:480px){
    #footer .top a{font-size: 1.4rem;}
    #footer .bot{margin-top: 4rem;}
    #footer .bot .lt{font-size: 1.4rem;}
    #footer .bot .lt ul li:after{height: 1rem;}
    #footer .bot .lt ul li:nth-child(even):after{display: none;}
    #footer .bot .rt{width: 16rem;}
}