@charset 'utf-8';

/* 공통 */
* { box-sizing: border-box; word-break: break-all; }
html, body { width: 100%; max-width: 100%;  box-sizing: border-box; -webkit-overflow-scrolling: touch; }
button { border: none; background: transparent; }
input, input:focus, textarea, textarea:focus { border: none; outline: none; }
#wrap { width: 100%;  overflow:hidden;}
.w1500 { width: 100%; max-width: 1500px; margin: 0 auto; box-sizing: border-box; }
.w1720 { width: 100%; max-width: 1720px; margin: 0 auto; box-sizing: border-box; }
.korean { font-family: 'Pretendard', sans-serif; }
.english { font-family: 'Urbanist', sans-serif; }
.f200 { font-weight: 300; }
.f300 { font-weight: 400; }
.f400 { font-weight: 400; }
.f500 { font-weight: 500; }
.f600 { font-weight: 600; }
.f700 { font-weight: 700; }
.f800 { font-weight: 800; }
.letter { letter-spacing: -0.025em; }
.color-w { color: #ffffff; }
.color-1 { color: #111111; }
.color-2 { color: #222222; }
.color-3 { color: #333333; }
.color-a { color: #aaaaaa; }
.color-m { color: #0cb48d; }
.bgset { background-size: cover; background-repeat: no-repeat; background-position: center center; }

.view-more { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 21px; font-size: 14px; }
.view-more span { display: block; width: 6px; height: 6px; transform: rotate(45deg); margin: 0 0 0 25px; }

/* background animation */
.ani-border { position: relative; }
.ani-border::before, .ani-circle::after { content: ""; display: block; border-radius: 50%; position: absolute; }
.ani-border::before { border: 1px dashed #dddddd; }
.ani-circle { display: block; position: absolute; }
.ani-circle::after { background: #0cb48d; }

/* header */
header { width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 3; transition: all 0.4s; }
.header-box { height: 100px; display: flex; align-items: center; justify-content: space-between; }
.header-box h1 { width: 180px; height: 51px; }
.header-box h1 a { display: block; width: 100%;  }
.header-box nav, .header-box nav > ul { height: 100%; display: flex; align-items: center; }
.header-box nav > ul > li { width: 195px; height: 100px; text-align: center; }
.header-box nav > ul > li > a { display: block; height: 100%; line-height: 100px; font-size: 19px; font-weight: 700; color: #ffffff; letter-spacing: -0.025em; text-align: center; box-sizing: border-box; }
.header-box nav > ul > li > ul { width: 100%; text-align: center; background: #0cb48d; padding: 25px 0; box-sizing: border-box; display: none; box-shadow: 3px 3px 7px rgb(0 0 0 / 20%); }
.header-box nav > ul > li > ul > li > a { display: block; width: 100%; height: 35px; line-height: 35px; font-weight: 300; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.025em; transition: all 0.4s; }
.header-box nav > ul > li > ul > li:hover > a { font-weight: 600; color: #ffffff; }
.header-box nav > ul > li:last-child,
#snb > ul > li:last-child { display: none; }
.header-btn { margin: 0 0 0 40px; display: flex; align-items: center; position: relative; }
.img-position { position: relative; z-index: 4; }
.img-position > img { position: absolute; top: 0; left: 0; }
.img-position > img:last-child { display: none; }
.menu-open-btn { width: 20px; height: 16px; margin: 0 0 0 30px; display: flex; flex-flow: column nowrap; justify-content: space-between; }
.menu-open-btn span { display: block; width: 100%; height: 2px; background: #ffffff; }
.lang-btn { transition: all 0.4s 0.8s; width: 20px; height: 20px; }
.lang-btn .img-position { width: 20px; height: 20px; }
.lang-btn.on .lang-option ul li a { opacity: 1; }
.lang-option { display: none; position: absolute; background: #0cb48d; top: -15px; left: -20px; padding: 44px 0 12px; box-sizing: border-box; z-index: 2; text-align: center; }
.lang-option ul li a { opacity: 1; display: block; height: 24px; line-height: 24px; padding: 0 20px; box-sizing: border-box; font-weight: 300; font-size: 16px; color: rgba(255, 255, 255, 0.5); transition: all 0.4s; }
.lang-option ul li a:hover { font-weight: 600; font-size: 16px; color: #ffffff; }
/* full menu */
.full-menu { position: fixed; top: 0; width: 100%; height: 100vh; opacity: 0; background: rgba(0, 0, 0, 0.7); z-index: -2; transition: all 0.4s; }
.full-menu.on { opacity: 1; z-index: 4; }
.full-menu.on #snb { right: 0; }
#snb { position: absolute; right: -640px; width: 100%; height: 100vh; min-width: 340px; max-width: 640px; background: #0cb48d; padding: 60px 0 0 60px; box-sizing: border-box; transition: all 0.4s 0.2s; overflow-y: scroll; }
#snb > ul > li { box-sizing: border-box; }
#snb > ul > li > a { display: block; width: 100px; height: 75px; line-height: 75px; font-size: 35px; font-weight: 700; color: #ffffff; }
#snb > ul > li > ul { text-indent: 20px; transform: translateY(-10px); display: none; }
#snb > ul > li > ul > li > a { display: block; font-weight: 400; padding: 15px 0; box-sizing: border-box; color: rgba(255, 255, 255, 0.5); transition: all 0.4s; }
#snb > ul > li > ul > li:hover > a { font-weight: 600; color: #ffffff; }
.menu-close-btn { width: 30px; height: 30px; position: absolute; top: 50px; right: 50px; transition: all 0.4s; }
.menu-close-btn:hover { transform: rotate(180deg); }
.menu-close-btn span { display: block; width: 100%; height: 2px; background: #ffffff; }
.menu-close-btn span:first-child { transform: rotate(-45deg) translateX(-1px); }
.menu-close-btn span:last-child { transform: rotate(45deg) translateX(-1px); }
header:hover, header.scrollOn1 { background: #ffffff; }
header.scrollOn1, 
header.scrollOn1 .header-box, 
header.scrollOn1 .header-box nav > ul > li { height: 85px; }
header.scrollOn1 .header-box nav > ul > li > a { line-height: 85px; }
header:hover .header-box nav > ul > li > a,
header.scrollOn1 .header-box nav > ul > li > a { color: #333333; }
header:hover .menu-open-btn span,
header.scrollOn1 .menu-open-btn span { background: #333333; }
header:hover .img-position > img:first-child,
header.scrollOn1 .img-position > img:first-child { display: none; }
header:hover .img-position > img:last-child,
header.scrollOn1 .img-position > img:last-child { display: block; }
header.scrollOn2 { top: -100px; transition: all 0.8s; }



/* footer */
.footer-contact-box { width: 100%; max-width: 1500px; margin: 0 auto; }
.footer-contact-box, .footer-cont { display: flex; justify-content: space-between; }
.footer-faq, .footer-inquiry { width: 100%; max-width: 730px; height: 145px; position: relative; }
.footer-faq { background-image: url("/img/common/footer-img1.jpg"); }
.footer-inquiry { background-image: url("/img/common/footer-img2.jpg"); }
/*.footer-faq > div, .footer-inquiry > div { width: 100%; position: absolute; top: 0; left: 0; }*/
.footer-contact { display: flex; align-items: center; justify-content: space-between; padding: 50px 40px 50px 50px; box-sizing: border-box; }
.footer-contact h4 { font-size: 22px; }
.footer-contact p { font-size: 15px; margin: 15px 0 0; line-height: 1.2; }
.footer-contact .view-more { width: 125px; background: #222222; color: #ffffff; }
.footer-faq .view-more span { border-top: 1px solid #f88e41; border-right: 1px solid #f88e41; }
.footer-inquiry .view-more span { border-top: 1px solid #50c1a7; border-right: 1px solid #50c1a7; }
.footer-box { background: #222222; padding: 50px 0 60px; box-sizing: border-box; margin: 60px 0 0; }
.footer-info h2 { font-size: 20px; padding: 0 0 10px; box-sizing: border-box; }
.footer-info > div { margin: 15px 0 0; font-size: 14px; color: #777777; font-weight: 200; display: flex; align-items: center; }
.footer-info > div b { font-weight: 500; margin-right: 7px; }
.footer-info .footer-line { display: block; width: 1px; height: 8px; background: #555555; margin: 0 10px; }
.footer-info > div br { display: none; }
.footer-policy { text-align: right; display: flex; flex-flow: column nowrap; justify-content: space-between; }
.footer-policy a { color: #999999; }
.footer-policy a:last-child { margin: 0 0 0 35px; }
.footer-policy div.letter { font-weight: 200; font-size: 14px; color: #444444; }
.top-btn-box { width: 100%; max-width: 1720px; height: 40px; position: fixed; left: 50%; transform: translateX(-50%); bottom: 66px; display: flex; justify-content: flex-end; box-sizing: border-box; z-index: 10; }
.history-btn,
.top-btn { width: 26px; height: 38px; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; padding: 2px 0; color: #555555; }
.history-btn { margin: -1px 10px 0 0; }
.history-btn span { font-size: 12px; }
.top-btn span { font-size: 13px; }

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:15px; line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; margin-top:8px;}
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

/* 231016팝업 */
.main-pop{position:fixed; top: 120px; left: 20px; width: 100%; max-width: 500px;background:url(/img/common/pop_bg.png) 50% 50% /cover no-repeat; box-sizing:border-box; padding: 15px 15px 0 15px; z-index: 1000;}
.main-pop .fbox{display:flex; flex-wrap:wrap; gap:20px 16px}
.main-pop .fbox .item{position:relative; width: calc(50% - 8px); background:url(/img/common/img_bg01.png) 50% 50% /cover no-repeat;	height: 240px; margin-top: 18px;}
.main-pop .fbox .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-pop .fbox .item:nth-of-type(2){background:url(/img/common/img_bg02.png) 50% 50% /cover no-repeat; margin-top: 0;}
.main-pop .fbox .item:nth-of-type(3){background:url(/img/common/img_bg03.png) 50% 50% /cover no-repeat; margin-top: 0;}
.main-pop .fbox .item:nth-of-type(4){background:url(/img/common/img_bg04.png) 50% 50% /cover no-repeat; margin-top: -18px;}
.main-pop .fbox .item figure{text-align: center;}
.main-pop .fbox .item figure img{}
.main-pop .fbox .item .txt{text-align: center;}
.main-pop .fbox .item .txt h3{font-weight:bold; font-size:16px; color: #fff; letter-spacing:-0.01em; line-height: 1.4em;}
.main-pop .fbox .item .txt h3.mt{margin-top: 6px;}
.main-pop .fbox .item .txt p.st{font-weight:bold; font-size:12px; color: #fff;margin-top: 6px; letter-spacing:-0.01em;}
.main-pop .fbox .item .txt .btn{margin-top: 4px; text-align: center;}
.main-pop .fbox .item .txt .btn p{position:relative; font-weight:bold; font-size:10px; color: #fff; display:inline-block; padding: 6px 10px; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.3) 80%, rgba(0,0,0,0) 100%);}
.main-pop .fbox .item .txt .btn p.p{padding: 6px 30px;}
.main-pop .fbox .item .txt .btn p::before{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid transparent; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(0,0,0,0) 100%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; box-sizing:border-box;}
.main-pop .close{position:absolute; display:flex; justify-content:center; align-items:center; bottom: 0; right: 0; width: 95px; height: 29px; padding-left: 23px; box-sizing:border-box; cursor: pointer;}
.main-pop .close::before{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(/img/common/close_bg.png) 50% 50% /cover no-repeat; mix-blend-mode: overlay; opacity: 0.4;}
.main-pop .close p{font-weight:bold; font-size:11px; color: #fff; letter-spacing:-0.01em;}
.main-pop .close p img{margin-left: 8px;}
.main-pop .day{cursor: pointer; font-size:15px; color: #fff; padding-top: 10px; margin-top: 5px; width: calc(100% - 95px); padding-bottom:10px; margin-bottom:5px;}
@media (max-width: 600px){
	.main-pop{max-width: none; width: calc(100% - 40px); top: 80px;}
}