@charset 'utf-8';

/* 공통 */
:root {
    --color-point01: #5C15DD;
    --color-point02: #89F73F;
    --font80: 80px;
    --font66: 66px;
    --font36: 36px;
    --font24: 24px;
    --font22: 22px;
    --font20: 20px;
}

@media screen and (max-width:1840px) {
    :root {
        --font80: clamp(56px, 4.35vw, 80px);
        --font66: clamp(40px, 3.59vw, 66px);
        --font36: clamp(26px, 1.96vw, 36px);
        --font24: clamp(20px, 1.3vw, 24px);
        --font22: clamp(18px, 1.2vw, 22px);
        --font20: clamp(16px, 1.09vw, 20px);
    }
}
@media screen and (max-width:1400px) {
    :root {
        --font80: clamp(40px, 4vw, 56px);
        --font66: clamp(32px, 2.86vw, 40px);
        --font36: clamp(22px, 1.86vw, 26px);
        --font24: clamp(18px, 1.43vw, 20px);
        --font22: clamp(17px,1.29vw,18px);
        --font20: clamp(16px, 1.09vw, 20px);
    }
}

*{box-sizing: border-box; line-height: 1.3; letter-spacing: -0.02em; word-break: keep-all;}
.ir{position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px;overflow: hidden;}
.f-bl{font-family: "Barlow", sans-serif; letter-spacing: -0.03em;}
.w1720{position: relative; width: 100%; max-width: 1720px; margin: 0 auto;}
.w1380{position: relative; width: 100%; max-width: 1380px; margin: 0 auto;}
.w1000{position: relative; width: 100%; max-width: 1000px; margin: 0 auto;}
/* 버튼 */
.common-btn{display:flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #111; border-radius:5px; overflow: hidden; cursor: pointer; z-index: 50;}
.common-btn .view-box{display:flex; align-items: center; width: 15px; height: 15px; overflow: hidden;}
.common-btn .view-box figure{display:flex; align-items: center; text-align: center; width: 100%; height: 100%; transform: translateX(0); transition: 0.6s;}
.common-btn .view-box figure img{width: 15px; height: 15px;}
.common-btn.prev{left: 36px;}
.common-btn.next{right: 36px;}
.common-btn.next .view-box figure{transform: translateX(-15px);}
.common-btn.prev:hover .view-box figure{transform: translateX(-15px);}
.common-btn.next:hover .view-box figure{transform: translateX(0);}

.top-btn{position: fixed; bottom: 40px; right: 30px; z-index: 1000;}
.top-btn .common-btn{width: 50px; height: 50px;}
.top-btn .common-btn .view-box figure img,
.top-btn .common-btn .view-box{width: 20px; height: 20px;}
.top-btn .common-btn .view-box figure{display: block;}
.top-btn .common-btn .view-box figure img{display: block;}
.top-btn:hover .common-btn .view-box figure{transform: translateY(-20px);}
.top-btn.stop{position: absolute; bottom: auto;}
@media screen and (max-width:1024px) {
    .top-btn{right: 6px; bottom: 20px;}
    .top-btn .common-btn{width: 40px; height: 40px;}
}

/* header */
.header{position: fixed; top: 0; left: 0; display:flex; justify-content: space-between; padding: 0 60px; width: 100%; z-index: 9999; transition: 0.3s;}
.header *:not(.f-bl){letter-spacing: -0.03em;}
.header .bg{content:""; display: none; position: absolute; top: 80px; left: 0; width: 100%; height: 422px; background: rgba(255, 255, 255, 0.95);}
.header .logo{position: relative; z-index: 10;}
.header .logo a{position: relative;}
.header .logo .msl{ opacity: 1; animation: logo-FadeIn 7s linear infinite;}
.header .logo .lig{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; animation: logo-FadeOut 7s linear infinite;}
.header .logo img{ transition: 0.3s;  }
.header .box{display:flex; gap:0 110px; align-items: center;}
.header .gnb{color: #fff; }
.header .gnb > ul{display:flex; align-items: center;}
.header .gnb > ul > li{position: relative;}
.header .gnb > ul > li > a{font-weight: 600; width: 100%; font-size: 20px; line-height: 80px; text-transform: uppercase; padding: 0 40px; transition: 0.3s;}
.header .gnb > ul > li > ul{position: absolute; display: none; top: 80px; left: 0; width: 100%; color: #333;  padding: 20px 0; text-align: center;}
.header .gnb > ul > li > ul > li > a{width: 100%; padding: 10px 0; font-weight: 500; font-size: 20px;}
.header .gnb > ul > li > ul > li > ul{ padding-top: 5px; color: #666;}
.header .gnb > ul > li > ul > li > ul > li a{padding: 5px; font-size: 18px;}
.header .gnb > ul > li > ul > li > ul.scroll{overflow-y: auto; max-height: 200px; padding-right: 4px;margin-right: -4px;}
.header .gnb > ul > li > ul > li > ul.scroll::-webkit-scrollbar {background-color: transparent; width: 4px; height: 4px;}
.header .gnb > ul > li > ul > li > ul.scroll::-webkit-scrollbar-thumb {background-color: var(--color-point01); border-radius: 2px}
.header .gnb > ul > li > ul > li > ul.scroll li a{font-size: 16px;}
.header .header-ui{position: relative; display:flex; align-items: center; color: #fff; transition: color 0.3s; z-index: 1;}
.header .header-ui .family{position: relative; width: 160px;}
.header .header-ui .family p{position: relative; padding: 7px 15px 5px; font-weight: 600; font-size: 20px; cursor: pointer; border-bottom: 2px solid #fff; transition: 0.3s;}
.header .header-ui .family p img{position: absolute; top: 55%; right: 15px; transform: translateY(-50%); transition: 0.3s;}
.header .header-ui .family ul{display:none; position: absolute; top: 60px; left: 0; width: 100%; background: #000; border-radius:10px; padding: 15px 0;}
.header .header-ui .family ul li{ text-align: center;}
.header .header-ui .family ul li a{width: 100%; padding: 5px 0; font-weight: 500; font-size: 18px; opacity: 0.5; transition: 0.3s; color: #fff;}
.header .header-ui .lang{position: relative; padding: 0 30px;}
.header .header-ui .lang figure{cursor: pointer;}
.header .header-ui .lang figure img{transition: 0.3s;}
.header .header-ui .lang ul{display: none; position: absolute; top: 55px; left: 0; width: 100%; background: #000; border-radius:10px; padding: 15px 0; text-align: center;}
.header .header-ui .lang ul li a{width: 100%; padding: 5px 0; font-weight: 500; font-size: 18px; opacity: 0.5; transition: 0.3s; color: #fff;}
.header .header-ui .lang ul li.on a{opacity: 1;}
.header .header-ui .m-btn{position: relative; width: 35px; height: 35px; border-radius:50%; background-color: var(--color-point01); cursor: pointer;}
.header .header-ui .m-btn span{position: relative; display: block; margin: 16px auto 0; width: 3px; height: 3px; background: #fff; transition: 0.3s;}
.header .header-ui .m-btn span::before{content:""; position: absolute; top: -9px; left: 0; width: 100%; height: 100%; background: #fff; transition: 0.3s;}
.header .header-ui .m-btn span::after{content:""; position: absolute; top: 9px; left: 0; width: 100%; height: 100%; background: #fff; transition: 0.3s;}
.header .all-menu{ position: absolute; top: 0; left: 0; padding: 150px 110px 0; width: 100%; height: 100svh; background: #fff; opacity: 0; visibility: hidden; transition: 0.5s;}
.header .all-menu::before{content:""; position: absolute; height: 400px; bottom: 0; right: 0; background: url("/img/common/icon-symbol.svg") 50% 50% no-repeat; aspect-ratio: 978 / 400;}
.header .all-menu strong{font-weight: 600; font-size: 60px;}
.header .all-menu .snb{margin-top: 100px;}
.header .all-menu .snb > ul > li{display:flex; align-items: center;}
.header .all-menu .snb > ul > li > a{width: 363px; font-weight: 800; font-size: 80px; color: #ddd; text-transform: uppercase; letter-spacing: 0; transition: 0.3s;}
.header .all-menu .snb > ul > li > ul{display:flex; gap:0 40px; align-items: center; padding-left: 80px; opacity: 0; visibility: hidden; transition: 0.3s;}
.header .all-menu .snb > ul > li > ul > li{position: relative;}
.header .all-menu .snb > ul > li > ul > li > a{font-size: 22px; padding: 10px 20px; color: #333; transition: 0.3s;}
.header .all-menu .snb > ul > li > ul > li > a:has(img) span{display: inline-block; vertical-align: top; position: relative;padding-right: 30px;}
.header .all-menu .snb > ul > li > ul > li > a img{position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.header .all-menu .snb > ul > li > ul > li > ul{position: absolute; top: 45px; left: 0; width: 100%;}
.header .all-menu .snb > ul > li > ul > li > ul > li a{font-size: 20px; color: #666; padding: 5px 20px;  transition: 0.3s;}
.header .all-menu p.copy{position: absolute; bottom: 60px; right: 60px; font-weight: 300; font-size: 18px; color: #666;}
.header .all-menu .snb > ul > li > ul.sub-depth02 li:first-of-type a{width: 240px;}
.header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll{display:flex; flex-wrap:wrap; width: 380px; overflow-y: auto; max-height: 200px;}
.header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll li{width: 100%;}
.header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll li a{width: 100%;}
.header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll::-webkit-scrollbar {background-color: transparent; width: 4px; height: 4px;}
.header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll::-webkit-scrollbar-thumb {background-color: var(--color-point01); border-radius: 2px}
/* on */
.header.on .header-ui .family p{border-bottom-color:#000; color: #222;}
.header.black .logo img,
.header.on .header-ui .lang figure img,
.header.on .header-ui .family p img,
.header.on .logo img{filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(2127%) hue-rotate(18deg) brightness(109%) contrast(87%);}
.header .all-menu.on{opacity: 1; visibility: visible;}
.header .all-menu .snb > ul > li.on > a{color: var(--color-point01);}
.header .all-menu .snb > ul > li.on > ul{opacity: 1; visibility: visible;}
.header .header-ui .m-btn.on span{background: transparent;}
.header .header-ui .m-btn.on span::before{top: 0; left: -4px; width: 12px; height: 2px; transform: rotate(45deg);}
.header .header-ui .m-btn.on span::after{top: 0; left: -4px; width: 12px; height: 2px; transform: rotate(-45deg);}
/* down */
.header.down{top: -80px;}
.header:has(.m-btn.on).down{top: 0 !important;}
.header.bg{background: #fff;}
.header.bg .header-ui .family p{border-bottom-color:#000; color: #222;}
.header.bg .header-ui .lang figure img,
.header.bg .header-ui .family p img,
.header.bg .logo img{filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(2127%) hue-rotate(18deg) brightness(109%) contrast(87%);}
.header.black .gnb > ul > li > a,
.header.bg .gnb > ul > li > a{color: #222;}

.footer{position: relative; padding: 100px 0 108px; background: #171717; color: #fff;}
.footer *:not(.f-bl){letter-spacing: -0.03em;}
.footer .box{display:flex; align-items: center; justify-content: space-between; margin: 0 10px 80px; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); padding-bottom: 30px;}
.footer .box:last-of-type{border-bottom: none;}
.footer .box ul{display:flex; gap:0 40px; align-items: center;}
.footer .box ul li{font-weight: 400; font-size: 18px; color: #fff;}
.footer .box ul li:hover{font-weight: 600;}
.footer .box:last-of-type{align-items: flex-start; margin-bottom: 0; padding-bottom: 0;}
.footer .box .addr-box{display:flex; gap:0 85px}
.footer .box .addr-box .txt p{font-weight: 500; font-size: 18px; color: #fff; margin-bottom: 13px;}
.footer .box .addr-box .txt ul{display: block;}
.footer .box .addr-box .txt address,
.footer .box .addr-box .txt ul li{font-weight: 300; font-size: 16px;}
.footer .box .addr-box .txt ul li{margin-bottom: 10px;}
.footer .box .addr-box .txt ul li:last-of-type{margin-bottom: 0;}
.footer .box .copy{font-weight: 300; font-size: 18px; color: #666; line-height: 1.66666em;}

@media (hover: hover){
    .header:hover{background-color: #fff;}
    .header:hover .gnb,
    .header:hover .header-ui{ color: #222;}
    .header:hover .header-ui .lang figure img,
    .header:hover .header-ui .family p img,
    .header:hover .logo img{filter: brightness(0) saturate(100%) invert(0%) sepia(4%) saturate(2127%) hue-rotate(18deg) brightness(109%) contrast(87%);}
    .header:hover .header-ui .family p{border-bottom-color:#000;}
    .header .gnb > ul > li:hover > a{background-color: var(--color-point01); color: #fff;}
    .header .header-ui .family ul li:hover a{opacity: 1;}
    .header .all-menu .snb > ul > li > ul > li > ul > li a:hover,
    .header .all-menu .snb > ul > li > ul > li:hover > a,
    .header .gnb > ul > li > ul > li > ul > li a:hover,
    .header .gnb > ul > li > ul > li:hover > a{color: var(--color-point01);}
    .header .header-ui .m-btn:hover span::after,
    .header .header-ui .m-btn:hover span::before{top: 0;}
    .header .header-ui .lang ul li:hover a{opacity: 1;}
}
@media screen and (max-width:1840px) {
    .w1720{padding: 0 clamp(16px,3.26vw,60px); max-width: none;}
    .header .all-menu{padding: clamp(80px,8.15vw,150px) clamp(16px,3.26vw,60px);}
    .header .all-menu strong{font-size: clamp(40px,3.26vw,60px );}
    .header .all-menu .snb{margin-top: clamp(50px,5.43vw,100px);}
    .header .all-menu .snb > ul > li > a{width: clamp(220px,19.73vw,363px); font-size: clamp(50px,4.35vw,80px);}
    .header .all-menu .snb > ul > li > ul{gap:0 10px}
    .header .all-menu .snb > ul > li > ul > li > a{font-size: clamp(20px,1.2vw,22px); padding: 0 clamp(10px,1.09vw,20px);}
    .header .all-menu .snb > ul > li > ul > li > a:has(img) span{padding-right: clamp(24px,1.63vw,30px);}
    .header .all-menu .snb > ul > li > ul > li > a img{width: clamp(18px,1.36vw,25px); height: clamp(18px,1.36vw,25px);}
    .header .all-menu .snb > ul > li > ul > li > ul > li a{font-size: clamp(18px,1.09vw,20px); padding: 5px clamp(10px,1.09vw,20px );} 
    .header .all-menu::before{height: clamp(200px,21.74vw,400px); background-size: contain;}
    
    .footer{padding: clamp(50px,5.43vw,100px) 0 clamp(50px,5.87vw,108px);}
    .footer .box{padding-bottom: clamp(20px,1.63vw,30px); margin-bottom: clamp(30px, 4.35vw, 80px);}
    .footer .box:last-of-type{margin-bottom: 0; padding-bottom: 0;}
}
@media screen and (max-width:1440px) {
    .w1380{padding: 0 clamp(16px,2.08vw,30px); max-width: none;}
}
@media screen and (max-width:1400px) {
    .header .header-ui .family p,
    .header .gnb > ul > li > ul > li > a,
    .header .gnb > ul > li > a{font-size: 18px;}
    .header .gnb > ul > li > ul > li > ul > li a{font-size: 17px;}
    .header .header-ui .family ul{top: 59px;}
    .header .box{gap: 0 60px;}
}
@media screen and (max-width:1200px) {
    .header{padding: 10px clamp(16px,2.67vw,32px);}
    .header .gnb{display: none;}
    .header .header-ui .lang{padding: 0 15px;}
    .header .header-ui .family{width: 130px;}
    .header .header-ui .family p{font-size: 16px;}
    .header .header-ui .family ul{top: 46px; padding: 10px 0;}
    .header .header-ui .family ul li a{font-size: 15px; }
    .header .header-ui .lang figure{width: 30px; height: 30px; text-align: center;}
    .header .header-ui .lang figure img{width: 24px; height: 24px; margin: 3px;}
    .header .header-ui .lang ul{top: 43px; padding: 6px 0;}
    .header .header-ui .lang ul li a{font-size: 15px;}
}
@media screen and (max-width:1024px) {
    .w1000{padding: 0 16px;}
    .header .all-menu strong{font-size: 26px;}
    .header .all-menu .snb{margin-top: 30px; border-top: 1px solid #ddd;}
    .header .all-menu .snb > ul > li{display: block; border-bottom: 1px solid #ddd;}
    .header .all-menu .snb > ul > li > a{width: 100%; font-size: 43px;}
    .header .all-menu .snb > ul > li > ul{display: none; padding-left: 0; opacity: 1; visibility: visible; transition: unset;}
    .header .all-menu .snb > ul > li > ul{border-top: 1px solid #eee;}
    .header .all-menu .snb > ul > li > ul > li{border-bottom: 1px solid #eee;}
    .header .all-menu .snb > ul > li > ul > li:last-of-type{border-bottom: none;}
    .header .all-menu .snb > ul > li > ul > li > a{padding: 12px 0; width: 100%; font-weight: 500; font-size: 19px;}
    .header .all-menu .snb > ul > li > ul > li > ul{position: static; display:flex; flex-wrap:wrap; gap:0 20px; padding-bottom: 5px;}
    .header .all-menu .snb > ul > li > ul > li > ul > li a{padding: 2px 0; width: 100%;}
    .header .all-menu .snb > ul > li > ul.sub-depth02 li:first-of-type a{width: 100%;}
    .header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll{width: 100%; flex-wrap:wrap}
    .header .all-menu .snb > ul > li > ul.sub-depth02 li .scroll li{width: 100%;}
    .header .header-ui .family p{padding: 7px 10px 5px;}
    .header .all-menu p.copy{bottom: 20px; right: 20px; font-size: 16px;}
    .header .header-ui .family p img{right: 5px;}
    
    .footer .box{margin-right: 0; margin-left: 0;}
    .footer .box:last-of-type{flex-wrap: wrap; margin-bottom: 0;}
    .footer .box ul{gap:0 20px}
    .footer .box .addr-box .txt p,
    .footer .box ul li{font-size: 16px;}
    .footer .box .addr-box{width: 100%; gap:0 40px}
    .footer .box .addr-box .txt p{margin-bottom: 8px;}
    .footer .box .addr-box .txt address,
    .footer .box .addr-box .txt ul li{font-size: 15px;}
    .footer .box .addr-box .txt ul li{margin-bottom: 5px;}
    .footer .box .copy br{display: none;}
    .footer .box .copy{padding-top: 20px; font-size: 16px;}
}
@media screen and (max-width:500px) {
    .w1720{padding: 0 16px;}
    .header{padding: 10px 16px;}
}


/* 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%; }
.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; }


/* animation */
@keyframes logo-FadeIn {
	0% {
		opacity: 1;
	}
	33.333% {
		opacity: 1; 
	}
	50% {
		opacity: 0;
	}
	83.333% {
		opacity: 0; 
	}
	100% {
		opacity: 1;
	}
}

@keyframes logo-FadeOut {
	0% {
		opacity: 0;
	}
	33.333% {
		opacity: 0; 
	}
	50% {
		opacity: 1;
	}
	83.333% {
		opacity: 1; 
	}
	100% {
		opacity: 0;
	}
}