@charset "utf-8";

main{background: #101010; }
.container {position: relative; background: #101010;}
.container::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: rgba(255, 255, 255, 0.15);}
.main-title{}
.main-title em{display:block; font-family:var(--font-hankook); font-size:clamp(14px, calc(17 / var(--inr) * 100vw), 17px); color:var(--color-point); margin-bottom:15px;}
.main-title h2{font-family:var(--font-hankook); font-size:clamp(40px, calc(86 / var(--inr) * 100vw), 86px); color:#fff; line-height:1.05;}
.main-title p{font-weight:300; line-height:1.6; color:#fff;}
@media screen and (max-width:1024px){
	.main-title em{font-size:clamp(14px, calc(17 / 1024 * 100vw), 17px);}
	.main-title h2{font-size:clamp(50px, calc(80 / 1024 * 100vw), 80px);}
}
@media screen and (max-width:420px){
	.main-title h2{font-size:clamp(0px, calc(50 / 420 * 100vw), 50px);}
}

/* 공통 */
article[data-main]{padding:clamp(80px, calc(120 / var(--inr) * 100vw), 120px) 0;}
@media screen and (max-width:768px){
	article[data-main]{padding:clamp(60px, calc(100 / 768 * 100vw), 100px) 0;}
}

/* visual */
[data-main="visual"]{height:calc(var(--vh, 1vh) * 100); min-height:850px;}
.visual-main__list{height:100%;}
.visual-main__list .box{display:flex; flex-direction:column; justify-content:center; position:relative; height:100%;}
.visual-main__list .box .img{overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%;}
.visual-main__list .box .img img{object-fit:cover; width:100%; height:100%;}
.visual-main__list .visual-text{position:relative; z-index:5; max-width:calc(var(--inr) * 1px); width:calc(var(--inr-width) * 100%); margin:0 auto;}
.visual-main__list .visual-text > *{display:block; overflow:hidden; font-family:var(--font-hankook); color:#fff;}
.visual-main__list .visual-text > * > span{display:flex; align-items:center; gap:clamp(15px, calc( 40 / var(--inr) * 100vw ), 40px);}
.visual-main__list .visual-text em{--translateY:50px; margin-bottom:30px; font-size:clamp(14px, calc( 17 / var(--inr) * 100vw ), 17px); color:var(--color-point);}
.visual-main__list .visual-text p{--translateY:120px; display:flex; align-items:center; gap:clamp(15px, calc( 30 / var(--inr) * 100vw ), 30px); font-family:var(--font-hankookM); font-size:clamp(50px, calc( 126 / var(--inr) * 100vw ), 126px); line-height:1.05;}
.visual-main__list .visual-text p i:not(.visual-small-img){display:inline-block; width:clamp(300px, calc( 569 / var(--inr) * 100vw ), 569px); height:96px; background:url(../images/common/logo_emblem.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0;}
.visual-main__list .visual-text p strong{font-weight:normal; color:var(--color-point);}
.visual-main__list .visual-text small{display:block; margin-top:55px; font-family:var(--font-kor); font-size:clamp(18px,calc(28 / var(--inr) * 100vw), 28px); font-weight:200; word-break:keep-all;}
.visual-small-img{overflow:hidden; display:none; width:150px; border-radius:6px; aspect-ratio:3/2;}
.visual-small-img img{object-fit:cover; width:100%; height:100%;}
.visual-main__list .swiper-control{position:relative; max-width:calc(var(--inr) * 1px); width:calc(var(--inr-width) * 100%); margin:0 auto;}
.visual-main__list .swiper_page{position:absolute; z-index:10; bottom:130px;}
.visual-main__list .swiper-pagination-bullet{opacity:0.6; width:10px; height:10px; box-sizing:border-box; border:1px solid #fff; border-radius:100%; transition:0.3s ease 0s;}
.visual-main__list .swiper-pagination-bullet-active{opacity:1; background-color:#fff;}
	/* visual-active */
.visual-main__list .box .img{transform:scale(1.15); transition:transform 6s ease 0s;}
.visual-main__list .visual-text > * > span{opacity:0; transform:translateY(var(--translateY)) rotate(3deg); transition:1.5s cubic-bezier(0.4, 0, 0.2, 1); transition-property:opacity, transform;}
.visual-main__list .visual-text small{opacity:0; transform:translateY(30px); transition:1.5s cubic-bezier(0.4, 0, 0.2, 1); transition-property:opacity, transform;}
.visual-main__list .visual-small-img{clip-path:inset(50% 50% 50% 50%); transition:1.5s cubic-bezier(0.4, 0, 0.2, 1);}
.visual-main__list .visual-small-img img{transform:scale(1.5); transition:transform 2s cubic-bezier(0.4, 0, 0.2, 1);}
.visual-main__list .swiper-slide-active .visual-text > * > span,
.visual-main__list .swiper-slide-duplicate-active .visual-text > * > span{opacity:1; transform:translateY(0) rotate(0deg); transition-delay:0.2s;}
.visual-main__list .swiper-slide-active .visual-text small,
.visual-main__list .swiper-slide-duplicate-active .visual-text small{opacity:1; transform:translateY(50px); transition-delay:0.4s;}
.visual-main__list .swiper-slide-active .visual-text .visual-small-img,
.visual-main__list .swiper-slide-duplicate-active .visual-text .visual-small-img{clip-path:inset(0% 0% 0% 0%);}
.visual-main__list .swiper-slide-active .visual-text .visual-small-img img,
.visual-main__list .swiper-slide-duplicate-active .visual-text .visual-small-img img{transform:scale(1);}
.visual-main__list .box.active .img,
.visual-main__list .swiper-slide-active .img,
.visual-main__list .swiper-slide-duplicate-active .img{transform:scale(1);}
@media screen and (max-width:768px){
	[data-main="visual"]{min-height:700px;}
	.visual-main__list .visual-text em{margin-bottom:10px;}
	.visual-main__list .visual-text small{margin-top:clamp(10px, calc(30 / 768 * 100vw), 30px);}
	.visual-main__list .visual-text p{font-size:clamp(35px, calc(126 / 768 * 100vw), 50px);}
	.visual-main__list .visual-text p i:not(.visual-small-img){width:clamp(200px, calc(300 / 768 * 100vw), 300px); height:50px;}
	.visual-main__list .swiper_page{bottom:clamp(30px, calc(100 / 768 * 100vw), 100px);}
}
@media screen and (max-width:500px){
	.visual-small-img{display:none;}
	.visual-main__list .visual-text p{font-size:clamp(0px, calc(45 / 500 * 100vw), 45px);}
	.visual-main__list .visual-text p i:not(.visual-small-img){width:clamp(0px, calc(200 / 500 * 100vw), 200px); height:clamp(0px, calc(50 / 500 * 100vw), 50px);}
}

/* about */
.main-bg{background:url(../images/main/bg_obj01.jpg) no-repeat 100% 20%;}
[data-main="about"] .inr{display:flex; flex-direction:column;}
.about-conts{margin-left:auto;}
.about-conts p{margin-bottom:45px; font-size:clamp(20px, calc(28 / var(--inr) * 100vw), 28px); font-weight:600; line-height:1.6;}
@media screen and (max-width:1024px){
	.about-conts{margin-left:0; margin-top:40px;}
	.about-conts p{font-size:clamp(20px, calc(25 / 1024 * 100vw), 25px);}
}
@media screen and (max-width:620px){
	.about-conts p{font-size:clamp(0px, calc(20 / 620 * 100vw), 20px);}
}

/* info */
[data-main="info"]{padding-bottom:0 !important;}
[data-main="info"] .inr{--step2Box:120px; padding-bottom:var(--step2Box);}
[data-main="info"] .main-title{display:flex; justify-content:center; align-items:flex-end; gap:16px; margin-bottom:95px;}
[data-main="info"] .main-title h2{width:clamp(200px, calc( 569 / var(--inr) * 100vw ), 416px); height:70px; background:url(../images/common/logo_emblem.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0;}
[data-main="info"] .main-title:after{--sizeWid:18px; content:''; display:block; width:var(--sizeWid); height:var(--sizeWid); background:var(--color-point); border-radius:100%;}
[data-main="info"] .main-title[data-motion]{opacity:0; transform:translateY(50px); transition:0.9s cubic-bezier(0.4, 0, 0.2, 1) 0s; transition-property:opacity, transform;}
[data-main="info"] .main-title[data-motion].motion__in{opacity:1; transform:translateY(0);}
.info-box{position:sticky; top:150px;}
.info-box .box{display:flex; justify-content:center; align-items:center; position:relative; height:clamp(400px, calc(680 / var(--inr) * 100vw), 680px);}
.info-box.step2 .box{transform:translateY(var(--step2Box));}
.info-box p{position:relative; z-index:10; font-size:clamp(30px, calc(56 / var(--inr) * 100vw), 56px); font-weight:600; text-align:center; letter-spacing:-1px;}
.info-box .img{overflow:hidden; display:block; position:absolute; width:100%; height:100%; border-radius:20px;}
.info-box .img img{object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 2s ease 0s;}
.info-box[data-motion]{filter:blur(10px); opacity:0; transform:scale(1.1); transition:1s ease 0s;}
.info-box[data-motion].motion__in{filter:blur(0); opacity:1; transform:scale(1);}
.info-box[data-motion].motion__in .img img{transform:scale(1); transition-delay:0.5s;}
@media screen and (max-width:768px){
	[data-main="info"] .inr{--step2Box:80px;}
	[data-main="info"] .main-title{margin-bottom:clamp(10px, calc(95 / 768 * 100vw) ,95px);}
	.info-box{top:10px;}
	.info-box p{font-size:clamp(0px, calc(40 / 768 * 100vw), 40px); word-break:keep-all;}
	.info-box .box{height:50vh; min-height:clamp(0px, calc(550 / 768 * 100vw), 550px);}
}
@media screen and (max-width:500px){
	[data-main="info"] .main-title h2{width:clamp(0px, calc(250 / 500 * 100vw ), 250px); height:clamp(0px, calc(42 / 500 * 100vw), 42px);}
	[data-main="info"] .main-title:after{--sizeWid:clamp(0px, calc(16 / 500 * 100vw ), 16px);}
}

/* biz */
[data-main="biz"]{position:relative; padding-top:clamp(120px, calc(240 / var(--inr) * 100vw), 240px) !important; background:url(../images/main/bg_obj02.jpg) no-repeat 50% 0; padding-bottom:0 !important; background-size:100% auto;}
[data-main="biz"] .flow-text{position:relative; height:100px; mask:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);}
[data-main="biz"] .inr{padding-top:clamp(120px, calc(240 / var(--inr) * 100vw), 240px);}
.biz-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.biz-list [data-biz]{display:flex; flex-direction:column; align-items:center; gap:clamp(30px, calc(60 / var(--inr) * 100vw), 60px); position:relative; padding:clamp(60px, calc(100 / var(--inr) * 100vw), 100px) clamp(20px, calc(40 / var(--inr) * 100vw), 40px) clamp(30px, calc(60 / var(--inr) * 100vw), 60px); background:#0f0f0f url(../images/main/biz_box_bg.png) no-repeat 50% 0; border:1px solid #2d2d2d; border-radius:12px;}
.biz-list [data-biz]:before{content:''; display:block; position:absolute; top:-6px; left:50%; width:150px; height:6px; background-color:var(--color-point); border-radius:6px 6px 0 0; transform:translateX(-50%);}
.biz-list [data-biz] i{position:relative; z-index:5; width:clamp(85px, calc(105 / var(--inr) * 100vw), 105px);}
.biz-list [data-biz] div{display:flex; flex-direction:column; gap:40px; align-items:center; position:relative; z-index:5; text-align:center;}
.biz-list [data-biz] em{font-family:var(--font-hankookM); font-size:clamp(18px, calc(22 / var(--inr) * 100vw), 22px); color:var(--color-point);}
.biz-list [data-biz] h3{font-size:clamp(22px, calc(36 / var(--inr) * 100vw), 36px); font-weight:600; letter-spacing:-1px; line-height:1.2;}
.biz-list [data-biz] p{font-size:clamp(15px, calc(18 / var(--inr) * 100vw), 18px); color:#afafaf; font-weight:300; letter-spacing:-1px; line-height:1.6; word-break:keep-all;}
.biz-list .dot-list > li{font-size:clamp(16px, calc(20 / var(--inr) * 100vw), 20px);}
.biz-list .dot-list strong{margin-right:10px; font-weight:normal; color:#ffbc95;}
.biz-list [data-biz][data-motion]{opacity:0; transform:translateY(50px); transition:0.9s cubic-bezier(0.4, 0, 0.2, 1) 0s; transition-property:opacity, transform;}
.biz-list [data-biz][data-motion].motion__in{opacity:1; transform:translateY(0);}
.biz-list [data-biz="01"][data-motion].motion__in{transition-delay:0.2s;}
.biz-list [data-biz="02"][data-motion].motion__in{transition-delay:0.4s;}
.biz-list [data-biz="03"][data-motion].motion__in{transition-delay:0.6s;}
@media screen and (max-width:1600px){
	.biz-list [data-biz="01"] p br,
	.biz-list [data-biz="02"] p br{display:none;}
}
@media screen and (max-width:768px){
	[data-main="biz"]{padding-top:clamp(60px, calc(130 / 768 * 100vw), 130px) !important;}
	[data-main="biz"] .inr{padding-top:clamp(60px, calc(130 / 768 * 100vw), 130px);}
	[data-main="biz"] .flow-text{height:clamp(32px, calc(100 / 768 * 100vw), 100px);}
	.biz-list{grid-template-columns:1fr;}
	.biz-list [data-biz]{flex-flow:row nowrap; padding:40px 40px;}
	.biz-list [data-biz] i{flex:none;}
	.biz-list [data-biz] h3,
	.biz-list [data-biz] p{word-break:keep-all;}
	.biz-list [data-biz] div{align-items:flex-start; gap:10px; text-align:left;}
	.biz-list [data-biz] h3 br{display:none;}
	.biz-list [data-biz] p br{display:none;}
	.biz-list .dot-list strong{min-width:45px;}

	.biz-list [data-biz="01"][data-motion].motion__in{transition-delay:0s;}
	.biz-list [data-biz="02"][data-motion].motion__in{transition-delay:0s;}
	.biz-list [data-biz="03"][data-motion].motion__in{transition-delay:0s;}
}
@media screen and (max-width:500px){
	.biz-list [data-biz]{flex-flow:column wrap;}
	.biz-list [data-biz] div{align-items:center; text-align:center;}
}
@media screen and (max-width:360px){
	.biz-list [data-biz]{padding:40px 20px;}
	.biz-list [data-biz] i{width:70px;}
}