@charset "utf-8";


/* layout */
html, body { height:100%;}
body  { color:#686868; letter-spacing:-.04em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
body.on{overflow: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1.6rem; padding-top: var(--hdtop); --hdtop:130px;}
.inner {	width:1480px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;}

@media all and (max-width:1479px){
	.inner {width:94%;}
}
@media all and (max-width:1279px) {	
	.s-inner {width:94%;}
}
@media all and (max-width:1024px){
    #wrap {--hdtop:90px;}
}



/* header */
#header{position: fixed; top: 0; left: 0; width: 100%; z-index: 99;}
#header .top{height: 40px; background-color: #edf1f5;}
#header .top .inner{height: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .top .inner .l_cont{}
#header .top .inner .l_cont a.loc{color: #808790; font-size: 14px; display: flex;; align-items: center;}
#header .top .inner .l_cont a.loc .sp1{display: none;}
#header .top .inner .l_cont a.loc img{padding-right: 5px;}
#header .top .inner .r_cont{display: flex; gap: 20px;}
#header .top .inner .r_cont a{font-size: 14px; color: #666666;}
#header .main { height: 90px; background-color: #fff; }
#header .main .inner{height: 100%; display: flex; justify-content: space-between;}
#header .main .inner .l_cont{display: flex; height: 100%; gap:70px;}
#header .main .inner .l_cont #logo{width: 220px; height: 100%;}
#header .main .inner .l_cont #logo a{display: block; width: 100%; height: 100%; background: url(/images/common/logo.webp) no-repeat center center / contain;}
#header .main .inner .l_cont .pcGnb{}
#header .main .inner .l_cont .pcGnb > ul{display: flex; gap:55px;}
#header .main .inner .l_cont .pcGnb > ul > li{position: relative;}
#header .main .inner .l_cont .pcGnb > ul > li > div{}
#header .main .inner .l_cont .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 600; color: #000000; display: block; line-height: 90px;}
#header .main .inner .l_cont .pcGnb > ul > li > ul{display: none; background-color: #003380; text-align: center; width: 115px; border-radius: 10px; position: absolute; left: 50%; transform: translateX(-50%); top: 66px; padding: 10px 0;}
#header .main .inner .l_cont .pcGnb > ul > li > ul > li{}
#header .main .inner .l_cont .pcGnb > ul > li > ul > li > a{color: #fff; opacity: .7; font-size: 16px; font-weight: 600; display: block; line-height: 36px;}
#header .main .inner .l_cont .pcGnb > ul > li > ul > li:hover > a{opacity: 1;}
#header .main .inner .r_cont{display: flex; align-items: center; height: 100%; gap:30px;}
#header .main .inner .r_cont .user{display: flex; gap:25px;}
#header .main .inner .r_cont .user li{}
#header .main .inner .r_cont .user li a{font-size: 16px; color: #666666; font-weight: 500;}
#header .main .inner .r_cont .buy{}
#header .main .inner .r_cont .buy a{font-size: 16px; color: #fff; font-weight: 600; background-color: #1167f1; line-height: 46px; padding: 0 20px; border-radius: 5px; display: block;}
#header .main .inner .r_cont .menuToggle{cursor: pointer;}
#header .main .inner .r_cont .menuToggle span{color: #000; font-size: 27px;}

.moGnb{position: fixed; background-color: #003380; right: -300px; top: var(--hdtop); z-index: 98; width: 300px; height: 100%; transition: .6s;}
.moGnb.on{right: 0;}
.moGnb > ul{ text-align: left; }
.moGnb > ul > li{}
.moGnb > ul > li > div{position: relative;}
.moGnb > ul > li > div.on::after{content: '↓'; font-family: 'SUIT', sans-serif; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);font-size: 18px; color: #fff;}
.moGnb > ul > li.on > div.on::after{content: '↑';}
.moGnb > ul > li > div{cursor: pointer;}
.moGnb > ul > li > div > a{color: #fff; font-size: 20px; font-weight: 700; display: block; padding: 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.1); pointer-events: none;}
.moGnb > ul > li.on > div >  a{ color: #278de8;}
.moGnb > ul > li > div.on > a{pointer-events: none; }
.moGnb > ul > li:hover > div >  a{color: #278de8;}
.moGnb > ul > li > ul{margin-top: 0px; background-color: #fff; display: none;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li > a{color: #333; opacity: 0.5; font-size: 18px; transition: .6s; font-weight: 500; display: block; padding: 10px 30px; border-bottom: 1px solid rgba(255,255,255,0.1);}
.moGnb > ul > li > ul > li:hover > a{opacity: 1;}

.mo_bg{background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:-2; opacity: 0; transition: .6s; display: none;}
.mo_bg.on{z-index: 97; opacity: 1;}


@media all and (max-width:1280px){
	#header .main .inner .l_cont{gap:50px;}
	#header .main .inner .l_cont .pcGnb > ul{gap:40px;}
}
@media all and (max-width:1024px){
    #header .top{height: 30px;}
    #header .main{height: 60px;}
	#header .main .inner .l_cont #logo{width: 132px;}
	#header .main .inner .l_cont .pcGnb{display: none;}
	#header .main .inner .r_cont{gap:15px;}
	#header .main .inner .r_cont .user{display: none}
	#header .main .inner .r_cont .buy a{font-size: 15px; line-height: 42px; padding: 0 15px;}
	#header .main .inner .r_cont .menuToggle{display: block;}
	.moGnb{display: block;}
	.moGnb > ul > li > div > a{font-size: 18px; padding: 15px 25px;}
	.moGnb > ul > li > div.on::after{right: 25px;}
	.moGnb > ul > li > ul > li > a{font-size: 16px;}
	.mo_bg{display: block;}
    #header .main .inner .l_cont{gap:30px;}
    .since{font-size: 16px; padding: 3px 10px;}
}
@media all and (max-width:768px){
    #header .top .inner .l_cont a.loc{font-size: 13px;}
    #header .top .inner .l_cont a.loc .sp2{display: none;}
    #header .top .inner .l_cont a.loc .sp1{display: inline;}
     #header .top .inner .r_cont{gap: 10px;}
    #header .top .inner .r_cont a{font-size: 13px;}
}
@media all and (max-width:640px){
    #header .inner .l_cont{gap:15px;}
    .since{font-size: 14px;}
}
@media all and (max-width:480px){}



/* footer */
#footer{padding-top: 55px; background-color: #003380;}
#footer .inner{}
#footer .inner .top{display: flex;  align-items: center; gap: 60px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgb(255, 255, 255, 0.1);}
#footer .inner .top .f_logo{}
#footer .inner .top .f_logo img{}
#footer .inner .top .list{display: flex; gap:30px;}
#footer .inner .top .list li{}
#footer .inner .top .list li a{font-size: 15px; color: #fff; font-weight: 700;}
#footer .inner .top .list li a span{}
#footer .inner .top .tel{margin-left: auto; font-size: 18px; color: #cbd0de; font-weight: 700;}
#footer .inner .top .tel b{padding-left: 10px; font-size: 40px; color: #fff; font-weight: 700;}
#footer .inner .bottom{padding-bottom: 75px; display: flex; align-items: flex-end; justify-content: space-between;}
#footer .inner .bottom .l_cont{}
#footer .inner .bottom .l_cont .ft_sns{margin-bottom: 35px; display: flex; gap: 15px;}
#footer .inner .bottom .l_cont span{font-size: 16px; font-weight: 500; color: #fff; display: inline-block; margin-right: 20px; line-height: 2em;}
#footer .inner .bottom .r_cont{text-align: right; line-height: 2;}
#footer .inner .bottom .r_cont .copy{font-size: 16px; font-weight: 500; color: #fff; opacity: 0.6;}

@media all and (max-width:1400px){
	#footer .inner .top{padding-bottom: 40px; margin-bottom: 40px;}
	#footer .inner .bottom{padding-bottom: 60px;}
}
@media all and (max-width:1024px){
	#footer .inner .top{padding-bottom: 35px; margin-bottom: 35px; flex-direction: column; gap:30px;}
	#footer .inner .top .f_logo img{max-width: 132px}
    #footer .inner .top .tel{margin-left: auto; margin-right: auto;}
	#footer .inner .bottom{padding-bottom: 55px; flex-direction: column; gap:30px; align-items: center;}
	#footer .inner .bottom .l_cont{text-align: center;}
	#footer .inner .bottom .l_cont span{margin-right: 0; margin: 0 10px;}
    #footer .inner .bottom .l_cont .ft_sns{justify-content: center;}
    #footer .inner .bottom .r_cont{text-align: center;}
}
@media all and (max-width:640px){
	#footer .inner .top{padding-bottom: 30px; margin-bottom: 30px; gap:25px;}
	#footer .inner .top .list li a{font-size: 14px;}
	#footer .inner .bottom{padding-bottom: 50px; gap:25px;}
	#footer .inner .bottom .l_cont span,
	#footer .inner .bottom .r_cont .copy{font-size: 14px;}
}
@media all and (max-width:568px){
	#footer .inner .top{padding-bottom: 25px; margin-bottom: 25px;}
    #footer .inner .top .tel{font-size: 16px;}
    #footer .inner .top .tel b{font-size: 30px;}
	#footer .inner .bottom{padding-bottom: 45px;}
    #footer .inner .bottom .l_cont .ft_sns{margin-bottom: 25px;}
}

.quick{position: fixed; right: 0; top: 200px; z-index: 50; background-color: #1167f1;border-top-left-radius: 10px; border-bottom-left-radius: 10px; cursor: pointer;}
.quick .box{display: flex; flex-direction: column; align-items: center; gap:8px; width: 60px; height: 154px; justify-content: center; }
.quick .box img{}
.quick .box p{color: #fff; writing-mode: vertical-rl; font-size: 16px; font-weight: 600;}

.go_top{position: fixed; right: 30px; bottom: 50px; z-index: 49; border-radius: 100%; box-shadow: 3px 3px 30px rgba(0,0,0,0.1); cursor: pointer;}
.go_top img{max-width: 100%;}


@media all and (max-width:976px){
	.quick{display: none;}
	.go_top{right: 3%; bottom: 3%;}
}




#Quick {width:70px; padding: 6px 0; background:#FFF; border-radius: 45px; text-align:center; position:fixed; right:30px; bottom:20%; z-index:151; box-shadow: 0 0 32px rgba(0,0,0,0.17);}
#Quick h3 {padding:1em 0; font-size:1.3rem; font-family:'Montserrat'; font-weight:700; background:#0090da; color:#FFF}
#Quick ul {padding:5px 0;}
#Quick ul li + li {}
#Quick ul li a {padding:10px 0; display:block; width:100%; height:100%}
#Quick ul li .t1 {margin-top:0.3em; font-size:13px; color:#111; opacity: 0.6;}
#Quick .top { width: 59px; height: 59px; font-size:13px; font-family:'Pretendard'; font-weight:500; background:#222; color:#FFF;
				display:inline-flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 45px;}
                #Quick .top span{display: block; font-size: 20px; font-weight: 400; line-height: 1;}

@media all and (max-width:1600px) {
	#Quick {width:70px;}
	#Quick ul li a #icon {}
	#Quick ul li .t1 { font-size:1.3rem; }
}
@media all and (max-width:1280px) {
	#Quick {right:10px; bottom:80px;  width:auto; background:transparent}
	#Quick h3 {display:none}
	#Quick ul {padding:0}
	#Quick ul li.pc {display:none}
	#Quick ul li + li {border-top:0}
	#Quick ul li a {padding:2px 0;}
	#Quick ul li .t1 {display:none}
	#Quick .top {display:none}
}