@charset "utf-8";

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

/* 타블렛 가로 */
@media all and (max-width:1420px) {
	.inner {	width:90%; }
}
@media all and (max-width:1300px) {
	.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: 200; border-bottom: 1px solid rgba(255,255,255,0.3);}
#header #logo{position: absolute; left: 40px; top: 50%; transform: translateY(-50%);}
#header #logo a{display: block; width: 260px; }
#header #logo a img{width: 100%;}
#header #logo a img.off{display: block;}
#header #logo a img.on{display: none;}
#header .pcGnb{display: flex; align-items: center; margin-left: 380px;}
#header .pcGnb > ul{display: flex; justify-content: center; align-items: center; gap:40px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 600; color: #fff; line-height: 100px; display: block;}
#header .pcGnb > ul > li:hover > div > a{text-decoration: underline;text-decoration-thickness: 2px;  text-underline-offset: 5px;  }
#header .pcGnb > ul > li:last-child > div> a{color: #238bfd;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #fff; left: 50%; transform: translateX(-50%); text-align: center; width: 170px; padding: 20px 0;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li > a{font-weight: 600; color: #444; font-size: 18px;  display: block; line-height: 35px;font-size: 17px;}
#header .pcGnb > ul > li > ul > li:hover > a{color: #238bfd;}
#header .r_menu{display: flex; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); right: 40px; gap:40px;}

#header .r_menu .menuToggle{cursor: pointer; display: none;}
#header .r_menu .menuToggle img{max-width: 23px; filter: invert(1) grayscale(1) brightness(10);}
#header .login{display: flex; align-items: center;gap: 20px; font-size: 14px;}
#header .login li{position: relative;}
#header .login li::after{position: absolute; content: '';width: 1px; height: 70%; right: -10px; top: 50%; background: #fff; opacity: 0.5; transform: translateY(-50%);}
#header .login li:last-child::after{display: none;}
#header .login a{color: #fff; opacity: 0.5;}


#header.on{background-color: #fff; border-bottom: 1px solid #eee;}
#header.on #logo a img.off{display: none;}
#header.on #logo a img.on{display: block;}
#header.on .pcGnb > ul > li > div > a{color: #222;}
#header.on .pcGnb > ul > li:last-child > div> a{color: #238bfd;}
#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)}
#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 .pcGnb > ul > li:last-child > div> a{color: #238bfd;}
#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{width: 230px;}
    #header .pcGnb{margin-left: 320px;}
    #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;}
    #header .r_menu > .login{display: none;}
}
@media all and (max-width:1280px){
    #header #logo a{width: 200px;}
    #header .pcGnb{margin-left: 280px;}
    #header .pcGnb > ul{gap: 30px;}
    #header .pcGnb > ul > li > div > a{font-size: 15px;}
}
@media all and (max-width:1024px){
    #header .pcGnb{display: none;}
}
@media all and (max-width:780px){
    #header{height: 70px;}
    #header #logo{left: 20px;}
    #header .r_menu{right: 20px;}
}
@media all and (max-width:580px){
    #header{height: 60px;}
    #header #logo a{width: 170px;}
    #header .r_menu #hd_sch{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;}
.mo_bg.on{z-index: 201; visibility: visible; opacity: 1;}
.moGnb{position: fixed; right: -100%; background-color: #fff; height: 100vh; width: 280px; top: 0; transition: .2s; z-index: 202;}
.moGnb.on{right: 0;}
.moGnb .close{padding: 20px; font-size: 24px; color: #000; text-align: right; cursor: pointer;}
.moGnb > ul{padding: 20px; border-top: 1px solid #eee;}
.moGnb > ul > li{}
.moGnb > ul > li > div{cursor: pointer;}
.moGnb > ul > li > div > a{font-size: 16px; color: #333; padding: 16px 12px; display: block; border-bottom: 1px solid #eee;}
.moGnb > ul > li.active > div > a{pointer-events: none; position: relative;}
.moGnb > ul > li.active > div > a::after{content: ''; width: 12px; height: 12px; display: block; background: url(/images/common/quick_arrow.webp) no-repeat center center / contain; position: absolute; top: 50%; transform: translateY(-50%) rotate(90deg); right: 12px;}
.moGnb > ul > li.active.on > div > a::after{transform: translateY(-50%) rotate(270deg);}
.moGnb > ul > li.on > div > a{color: #22372b;}
.moGnb > ul > li > ul{background-color: #f3f3f3; display: none;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li > a{display: block; padding: 12px 20px; font-size: 14px; color: #555; font-weight: 300; transition: .2s;}
.moGnb > ul > li > ul > li:hover{color: #000;}

.moGnb .login{display: flex; gap: 5px; flex-wrap: wrap;}
.moGnb .login li{width: calc(100%/2 - 5px/2);}
.moGnb .login li a{border: 1px solid #ddd; text-align: center;padding: 10px; width: 100%; height: 100%; display: inline-block;}
.moGnb #hd_sch{display: none;}


@media all and (max-width:580px){
    .moGnb #hd_sch{display: block;}
    .moGnb .sch_inner{width: 260px;}
    .moGnb #hd_sch .sch_inner{padding-bottom: 20px;}
}


#footer{padding: 60px 0 80px; border-top: 1px solid #e5e5e5;}
#footer .logo{width: 260px;}
#footer .logo img{width: 100%;}
#footer .top{display: flex;gap: 70px;color: #444;}
#footer .top ul{padding-top: 20px; font-size: 16px;}
#footer .top .info{width: calc(100% - 520px);}
#footer .top .info ul{display: flex; flex-wrap: wrap; gap: 15px 20px;}
#footer .top .info ul li:nth-child(6),
#footer .top .info ul li:nth-child(7){width: 100%;}
#footer .top .link{width: 120px;text-align: right;}
#footer .top .link li + li{margin-top: 7px;}
#footer .top .link li:nth-child(1) a{color: #444;}
#footer .top .link li:nth-child(2) a{font-weight: bold; color: #000;}
#footer .bot{border-top: 1px solid #e5e5e5;margin-top: 40px; padding-top: 40px; display: flex;justify-content: space-between;}
#footer .bot p.copy{color: #444; opacity: 0.7; line-height: 26px; font-size: 16px;}
#footer .bot .sns{display: flex; gap: 25px; text-align: center;}
#footer .bot .sns p{font-size: 11px; color: #666; opacity: 0.7; margin-top: 5px;}


@media all and (max-width:1280px){
    #footer .logo{width: 230px;}
    #footer .top{gap: 40px;}
    #footer .top ul{padding-top: 10px;}
    #footer .top .info{width: calc(100% - 430px);}
}
@media all and (max-width:980px){
    #footer{padding: 40px 0;}
    #footer .top{flex-wrap: wrap;justify-content: center;gap: 20px;}
    #footer .top .info{width: 100%; text-align: center;}
    #footer .top .info ul{justify-content: center;}
    #footer .top .link{width: 100%;}
    #footer .top .link ul{display: flex; justify-content: center; gap: 20px;}
    #footer .top .link li + li{margin-top: 0px;}
}
@media all and (max-width:680px){
    #footer .logo{width: 200px;}
    #footer .bot{flex-wrap: wrap; gap: 20px; justify-content: center;}
    #footer p{width: 100%; text-align: center; order: 2;}
    #footer ul{order: 1;}
}
@media all and (max-width:480px){
    #footer .logo{width: 40vw;}
    #footer .top ul{font-size: 1.5rem;padding-top: 0;}
    #footer .top .info ul{gap: 10px 20px;}
    #footer .bot{margin-top: 30px; padding-top: 30px;}
    #footer .bot .sns{gap: 20px;}
    #footer .bot p.copy{line-height: 2.4rem; font-size: 1.4rem;}
}

#quick_menu1{position: fixed; right: 0;top: 50%; transform: translateY(-50%);}
#quick_menu1 li + li{margin-top: 10px;}

@media all and (max-width:680px){
    #quick_menu1 li a{width: 45px; display: inline-block;}
    #quick_menu1 li a img{width: 100%;}
}

#quick_menu2{width: 88px; height: 88px; border-radius: 1000px; position: fixed; bottom: 40px; right: 20px;z-index: 98;}
#quick_menu2 a{width: 100%; height: 100%; text-align: center; display: flex;justify-content: center; align-items: center; position: relative;z-index: 2;background: url('../img/common/quick_bg.png') no-repeat center center / cover;}
#quick_menu2 a p{color: #fff;font-size: 20px; font-weight: bold;}

@keyframes loca-circle {
    0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.5; }
    50% { opacity: 1.0; }
    100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
    }

.loca-circle {position:absolute; left:50%; top:50%; display:inline-block; width:70px; height:70px; margin-top:-35px; margin-left:-35px; z-index: -1;}
.loca-circle > span:nth-child(2) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.loca-circle > span:nth-child(3) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.loca-circle > span:nth-child(4) { -webkit-animation-delay: 2s; animation-delay:2s; }
.loca-circle > span:nth-child(5) { -webkit-animation-delay: 2.5s; animation-delay:2.5s; }
.loca-circle > span:nth-child(6) { -webkit-animation-delay: 4s; animation-delay:4s; }
.loca-circle > span {  border-radius: 50%; background: #238bfd; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height: 100%; 
    -webkit-animation: loca-circle 5s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; 
    animation: loca-circle 5s cubic-bezier(1, 2, 0.66, 3) infinite;  opacity: 0.05;}

@media all and (max-width:680px){
	#quick_menu2{width: 66px; height: 66px; bottom: 3%; right: 2%;}
	.loca-circle{width: 54px; height: 54px; margin-top: -27px; margin-left: -27px;}
	#quick_menu2 a p{font-size: 17px;}
}