@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem;}
.inner {	width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}


@media all and (max-width:1599px) {	
	.inner {width:94%;}
}


/* header */
#header{position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100px; transition: .4s;}
#header.hover::after{content: ''; top: 100px; width: 100%; height: 320px; background-color: #f8f8f8; display: block; position: absolute; z-index: -1;}
#header #logo{position: absolute; left: 60px; top: 50%; transform: translateY(-50%);}
#header #logo a{width: 164px; height: 48px; background: url(/images/common/logo.webp) no-repeat left center / contain; display: block;}
#header .pcGnb{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content;}
#header .pcGnb > ul{display: flex; align-items: center; gap:100px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 19px; color: #fff; font-weight: 600; line-height: 100px;}
#header .pcGnb > ul > li:hover > div > a{color: #3e876c !important;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; text-align: center; left: 50%; transform: translateX(-50%); width: max-content; padding: 30px 0; z-index: 2;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li + li{margin-top: 20px;}
#header .pcGnb > ul > li > ul > li > a{font-size: 17px; font-weight: 500; color: #000; opacity: 0.8;}
#header .pcGnb > ul > li > ul > li:hover > a{opacity: 1; font-weight: 700; text-decoration: underline; text-underline-position: under;}
#header .catalog_btn{position: absolute; right: 60px; top: 50%; transform: translateY(-50%);}
#header .catalog_btn a{background-color: #0e6948; display: inline-flex; line-height: 48px; color: #fff; padding: 0 25px; border-radius: 40px; font-size: 15px; font-weight: 600; align-items: center; gap:8px;}
#header .catalog_btn a::before{content: ''; width: 20px; height: 24px; background: url(/images/common/catalog_icon.webp) no-repeat center center / contain;}
#header .menuToggle{display: none; width: 24px; height: 20px; flex-direction: column; justify-content: space-between;}
#header .menuToggle span{display: block; width: 100%; height: 2px; background-color: #fff;}

#header:hover{background-color: #fff;}
#header:hover #logo a,
.fp-viewing-2Page #header #logo a,
.fp-viewing-4Page #header #logo a,
.fp-viewing-5Page #header #logo a{background-image: url(/images/common/logo_on.webp);}
#header:hover .pcGnb > ul > li > div > a,
.fp-viewing-2Page #header .pcGnb > ul > li > div > a,
.fp-viewing-3Page #header .pcGnb > ul > li > div > a,
.fp-viewing-4Page #header .pcGnb > ul > li > div > a,
.fp-viewing-5Page #header .pcGnb > ul > li > div > a{color: #000;}
#header:hover .menuToggle span{background-color: #000;}


#header.on{background-color: #fff; border-bottom: 1px solid #eee;}
#header.on #logo a{background-image: url(/images/common/logo_on.webp);}
#header.on .pcGnb > ul > li > div > a{color: #000;}
#header.on .menuToggle span{background-color: #000;}

#header.onn{background-color: #fff; border-bottom: 1px solid #eee;}
#header.onn #logo a{background-image: url(/images/common/logo_on.webp);}
#header.onn .pcGnb > ul > li > div > a{color: #000;}
#header.onn .menuToggle span{background-color: #000;}

.mo_bg,
.moGnb{display: none;}


@media all and (max-width:1400px){
	#header #logo{left: 3%;}
	#header .pcGnb > ul{gap:80px;}
	#header .catalog_btn{right: 3%;}
}
@media all and (max-width:1280px){
	#header.hover::after{height: 303px;}
	#header .pcGnb > ul{gap:60px;}
	#header .pcGnb > ul > li > ul{padding: 25px 0;}
	#header .pcGnb > ul > li > ul > li > a{font-size: 16px;}
}
@media all and (max-width:1024px){
	#header{height: 70px;}
	#header #logo a{height: 42px; width: 144px;}
	#header .pcGnb{display: none;}
	#header .catalog_btn a{line-height: 44px; font-size: 14px; padding: 0 20px; gap:7px;}
	#header .catalog_btn a::before{width: 18px; height: 22px;}
	#header .catalog_btn{right: calc(3% + 40px);}
	#header .menuToggle{display: flex; position: absolute; top: 50%; right: 3%; transform: translateY(-50%); cursor: pointer;}
	
	.mo_bg{position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 109; opacity: 0; visibility: hidden; z-index: -1; transition: 0s; top: 0; left: 0; display: block;}
	.mo_bg.on{z-index: 109; visibility: visible; opacity: 1;}
	.moGnb{position: fixed; right: -100%; background-color: #fff; height: 100vh; z-index: 10000; width: 280px; top: 0; transition: .2s; display: block;}
	.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; font-weight: 600;}
	.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: #0e6948;}
	.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;}
}
@media all and (max-width:768px){
	#header #logo a{height: 38px; width: 130px;}
	#header .catalog_btn a{line-height: 42px; padding: 0 18px;}
	#header .catalog_btn a::before{width: 17px; height: 21px;}
}
@media all and (max-width:500px){
	#header #logo a{height: 36px; width: 123px;}
	#header .catalog_btn a{line-height: 40px; padding: 0 16px; gap:6px;}
	#header .catalog_btn a::before{width: 16px; height: 20px;}
}


/* footer */
#footer{background-color: #212121; padding-bottom: 100px;}
#footer .inner{}
#footer .inner .top{padding: 40px 0;border-bottom: 1px solid rgba(255,255,255,0.2);}
#footer .inner .top ul{display: flex; gap:25px;}
#footer .inner .top ul li{}
#footer .inner .top ul li a{font-size: 16px; color: #fff;}
#footer .inner .bottom{display: flex; justify-content: space-between; padding-top: 50px;}
#footer .inner .bottom .l_cont{display: flex; justify-content: space-between; flex-direction: column;}
#footer .inner .bottom .l_cont .f_logo{}
#footer .inner .bottom .l_cont .f_logo img{max-width: 100%;}
#footer .inner .bottom .l_cont .copy{}
#footer .inner .bottom .l_cont .copy p{font-size: 15px; color: #a3a3a3;}
#footer .inner .bottom .l_cont .copy p + p{margin-top: 5px;}
#footer .inner .bottom .l_cont .copy p a{color: #a3a3a3;}
#footer .inner .bottom .r_cont{}
#footer .inner .bottom .r_cont .list{display: flex; justify-content: flex-end; gap:20px; margin-bottom: 40px;}
#footer .inner .bottom .r_cont .list li{}
#footer .inner .bottom .r_cont .list li a{}
#footer .inner .bottom .r_cont .list li a img{max-width: 100%;}
#footer .inner .bottom .r_cont .text{text-align: right;}
#footer .inner .bottom .r_cont .text span{text-align: right; display: inline-block; font-size: 15px; color: #fff; opacity: 0.6; line-height: 2em;}
#footer .inner .bottom .r_cont .text span + span{margin-left: 18px;}


@media all and (max-width:1280px){
	#footer{padding-bottom: 90px;}
	#footer .inner .top{padding: 40px 0 35px;}
	#footer .inner .bottom{padding-top: 45px;}
	#footer .inner .bottom .l_cont .f_logo img{max-width: 160px;}
	#footer .inner .bottom .l_cont{width: 35%;}
	#footer .inner .bottom .r_cont{width: 65%;}
	#footer .inner .bottom .r_cont .list{gap:16px; margin-bottom: 30px;}
	#footer .inner .bottom .r_cont .text span{line-height: 1.8em;}
	#footer .inner .bottom .r_cont .text span + span{margin-left: 15px;}
}
@media all and (max-width:768px){
	#footer{padding-bottom: 80px;}
	#footer .inner .top{padding: 35px 0 30px;}
	#footer .inner .top ul{gap:15px; display: grid; grid-template-columns: repeat(3, 1fr);}
	#footer .inner .top ul li{text-align: center;}
	#footer .inner .top ul li a{font-size: 15px;}
	#footer .inner .bottom{padding-top: 40px; flex-direction: column-reverse;}
	#footer .inner .bottom .l_cont{width: 100%; margin-top: 40px; align-items: center; justify-content: center; gap:30px;}
	#footer .inner .bottom .l_cont .f_logo img{max-width: 152px;}
	#footer .inner .bottom .l_cont .copy{text-align: center;}
	#footer .inner .bottom .r_cont{width: 100%;}
	#footer .inner .bottom .r_cont .text{text-align: center;}
	#footer .inner .bottom .r_cont .text span{font-size: 14px;}
	#footer .inner .bottom .r_cont .list{justify-content: center; margin-bottom: 25px;}
	#footer .inner .bottom .r_cont .text span + span{margin-left: 7px; margin-right: 7px;}
}
@media all and (max-width:500px){
	#footer{padding-bottom: 70px;}
	#footer .inner .top{padding: 35px 0 25px;}
	#footer .inner .bottom .l_cont{margin-top: 35px;}
	#footer .inner .bottom .l_cont .f_logo img{max-width: 146px;}
}


#quick{position: fixed; z-index: 998; right: 30px; bottom: 40px;}
#quick > div{box-shadow: 0 4px 24px rgba(0,0,0,0.09);}
#quick .katalk{ border-radius: 20px; overflow: hidden;}
#quick .katalk a{display: block;}
#quick .katalk a img{max-width: 100%;}
#quick .go_top{margin-top: 10px; border-radius: 20px; overflow: hidden; cursor: pointer;}
#quick .go_top img{max-width: 100%;}


.terms{}
.terms .hgrp{margin-bottom: 40px;}
.terms .hgrp p.infBox{ font-size: 16px; font-weight: 300; margin-top: 10px;}
.terms .hgrp h5{color: #000; font-size: 16px; font-weight: 500; margin-bottom: 10px;}
.terms .hgrp h3{background-color: #f3f3f3; border: 1px solid #bbb; padding: 20px; text-align: center; font-size: 20px; font-weight: 600; color: #000;}
.terms .hgrp p{font-size: 18px; line-height: 1.5em; word-break: keep-all; font-weight: 400; color: #686868; margin-top: 10px;}
.terms .acon{font-size: 18px; line-height: 1.5em; word-break: keep-all; font-weight: 400; color: #686868;}
.terms .acon + .acon{margin-top: 50px;}
.terms .acon h4{font-size: 20px; font-weight: 700; color: #000; margin-bottom: 10px;}
.terms .acon > ol{padding-left: 18px; margin-top: 10px;}
.terms .acon > ul{padding-left: 18px; margin-top: 10px; margin-bottom: 10px;}
.terms .acon > ul > li{list-style: disc; word-break: keep-all;}
.terms .acon > ol > li{list-style: decimal; word-break: keep-all;}
.terms .acon > ol > li + li{margin-top: 10px;}
.terms .acon > ol > li > ol{padding-left: 18px; margin-top: 10px;}
.terms .acon > ol > li > ol > li{list-style: decimal; word-break: keep-all;}
.terms .acon > ol > li > ol > li + li{margin-top: 5px;}
.terms .acon p{font-size: 18px; line-height: 1.5em; word-break: keep-all; font-weight: 400; color: #686868;}

@media all and (max-width:1280px){
	.terms .hgrp{margin-bottom: 35px;}
	.terms .hgrp h5{font-size: 15px;}
	.terms .hgrp h3{padding: 18px; font-size: 19px;}
	.terms .hgrp p{font-size: 17px; margin-top: 9px;}
	.terms .acon{font-size: 17px;}
	.terms .acon > ol > li + li{margin-top: 8px;}
	.terms .acon > ol{padding-left: 16px;}
	.terms .acon > ol > li > ol{padding-left: 16px;}
	.terms .acon + .acon{margin-top: 40px;}
	.terms .acon p{font-size: 17px;}
}
@media all and (max-width:768px){
	.terms .hgrp{margin-bottom: 30px;}
	.terms .hgrp h5{font-size: 14px;}
	.terms .hgrp h3{padding: 16px; font-size: 18px;}
	.terms .hgrp p{font-size: 16px; margin-top: 8px;}
	.terms .acon{font-size: 16px;}
	.terms .acon > ol > li + li{margin-top: 7px;}
	.terms .acon > ol{padding-left: 14px;}
	.terms .acon > ol > li > ol{padding-left: 14px;}
	.terms .acon + .acon{margin-top: 35px;}
	.terms .acon p{font-size: 16px;}
}