/* common */
.title-box span{ display: inline-block; font-family: var(--engFont); font-size: 1.8rem; font-weight: 600; color: var(--mainColor); text-transform: uppercase; }
.title-box h3{ font-size: 7rem; font-weight: 700; color: #111; letter-spacing: -0.02em; margin-top: 20px; }

.viewmore{ display: flex; justify-content: center; align-items: center; width: max-content; height: 60px; background: var(--mainColor); font-family: var(--engFont); font-size: 1.4rem; font-weight: 600; color: #fff !important; padding: 10px 8px; padding-left: 20px; border-radius: 50px; }
.viewmore span{ display: inline-block; width: 40px; height: 40px; background: #fff; border-radius: 50%; margin-left: 23px; position: relative; }
.viewmore span::before, .viewmore span::after{ content: ""; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.5s; }
.viewmore span::before{ width: 11px; height: 1px; }
.viewmore span::after{ width: 1px; height: 11px; }

@media screen and (hover: hover){
	.viewmore:hover span::before, .viewmore:hover span::after{ transform: translate(-50%, -50%) rotate(180deg); }
}

@media screen and (max-width: 1700px){
	.title-box h3{ font-size: 5rem; }
}

@media screen and (max-width: 1280px){
	.title-box span{ font-size: 1.7rem; }
	.title-box h3{ font-size: 4rem; margin-top: 10px; }

	.viewmore{ height: 50px; padding-left: 15px; }
	.viewmore span{ width: 35px; height: 35px; margin-left: 15px; }
}

@media screen and (max-width: 900px){
	.title-box h3{ font-size: 3rem; }

	/* .viewmore{ height: 45px; font-size: 1.3rem; }
	.viewmore span{ width: 30px; height: 30px; } */
}

/* visual */
#visual .visual{ position: relative; overflow: hidden; }
#visual .visual .bg{ height: 100vh; transform: scale(1.2); transition: transform 1.5s ease-in-out; }
#visual .visual .bg01{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#visual .visual .bg02{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }

#visual .visual .text-box{ position: absolute; top: 44%; left: 0; right: 0; transform: translateY(-50%); }
#visual .visual .text-box *{ font-family: var(--engFont); color: #fff; }
#visual .visual .text-box p{ font-size: 2.2rem; font-weight: 500; color: #fff; line-height: 1.5; color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; transform: translateY(-50px); opacity: 0; --transform: translateY(-50px); }
#visual .visual .text-box h2:not(:last-of-type){ margin-bottom: 10px; }
#visual .visual .text-box h2.left{ --transform: translateX(-100%); }
#visual .visual .text-box h2.right{ --transform: translateX(100%); }
#visual .visual .text-box h2 span{ display: inline-block; font-size: 13rem; font-weight: 700; line-height: 1.05; opacity: 0; transform: var(--transform); }

#visual .visual.slick-active .bg{ transform: scale(1); }
#visual .visual.slick-active .text-box p{ animation: textTransform 1s 0.5s forwards; }
#visual .visual.slick-active .text-box h2 span{ animation: textTransform 1s 0.5s forwards; }

@keyframes textTransform{
	0%{ transform: var(--transform); opacity: 0; }
	100%{ transform: translate(0); opacity: 1; }
}

#visual .scroll-box{ position: absolute; bottom: 40px; left: 0; right: 0; }
#visual .scroll-box p{ display: inline-block; font-family: var(--engFont); font-size: 1.3rem; font-weight: 400; color: #fff; line-height: 1; text-transform: uppercase; padding-right: 25px; position: relative; transform: rotate(90deg) translate(-100%, -100%); transform-origin: top left; }
#visual .scroll-box p span{ display: inline-block; width: 15px; height: 15px; background: url("/img/main/scroll_dot.svg") no-repeat center center / auto; border-radius: 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

@media screen and (max-width: 1700px){ 
	#visual .visual .text-box h2 span{ font-size: 10rem; }
}

@media screen and (max-width: 1280px){
	#visual .visual .text-box p{ font-size: 2rem; margin-bottom: 10px; }
	#visual .visual .text-box h2 span{ font-size: 7rem; }
}

@media screen and (max-width: 900px){
	#visual .visual .text-box p{ font-size: 1.7rem; }
	#visual .visual .text-box h2 span{ font-size: 5rem; }

	#visual .scroll-box{ bottom: 20px; }
}


/* 원형 슬라이드 영역 (공통) */
.circleSec{ --totalW: 1300px; display: flex; align-items: center; min-height: 100vh; overflow: hidden; position: relative; }

/* 원형 슬라이드 영역 (cover) */
.circleSec .cover{ width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 50; background: #fff; }
.circleSec .cover.active{ position: fixed; }
.circleSec .cover .text-box{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; }
.circleSec .cover .text-box span, .circleSec .cover .text-box h3{ transform: var(--transform); opacity: 0; transition: transform 1s, opacity 1s; }
.circleSec .cover .text-box span{ --transform: translateY(-100px); }
.circleSec .cover .text-box h3{ margin-top: 30px; --transform: translateY(100px); }
.circleSec .cover .text-box h3:not(:first-of-type){ margin-top: 0; }

.circleSec .cover.active span, .circleSec .cover.active h3{ transform: translateY(0); opacity: 1; }


/* 원형 슬라이드 영역 (circle-wrap) */
.circleSec .left-box, .circleSec .right-box{ position: relative; }
.circleSec .inner{ max-width: var(--totalW); width: 100%; }
.circle-wrap{ position: static; }
.circle-wrap .slick-list{ overflow: visible; }
.circle-wrap .circle{ max-width: var(--totalW); width: 100%; position: relative; outline: none; margin-right: 150px; }

.circle-wrap .figure > div{ max-width: 100%; width: calc(100vh - var(--headerH) - 40px); position: relative; left: 0; transform: translateX(0); transition: left 1s, transform 1s; will-change: left, right, transform; }
.circle-wrap .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 100%; border-radius: 50%; transform: scale(0.8); opacity: 0.2; transition: transform 1s, opacity 1s; will-change: transform, opacity; }
.circle-wrap .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.circle-wrap .text{ position: absolute; top: 19%; left: 0; right: 0; opacity: 0; transition: opacity 0.5s; }
.circle-wrap .text h5{ font-size: 2.5rem; font-weight: 600; color: #222; letter-spacing: -0.02em; margin-top: 30px; }
.circle-wrap .text p{ font-size: 1.8rem; font-weight: 300; color: #333; line-height: 1.5; letter-spacing: -0.02em; margin-top: 20px; }
.circle-wrap .text .mt{ display: flex; margin-top: 110px; }

.circle-wrap .slick-slide .aos-animate{ opacity: 0; }
.circle-wrap .slick-slide.slick-active .aos-animate{ opacity: 1; transform: translate(0, 0); }
.circle-wrap .slick-active .figure figure, .circle-wrap .slick-now .figure figure{ transform: scale(1); opacity: 1; }
.circle-wrap .slick-active .text{ opacity: 1; }


/* 원형 슬라이드 영역 (dots) */
.circle-wrap .slick-dots{ position: absolute; top: 50%; transform: translateY(-50%); }
.circle-wrap .slick-dots li{ position: relative; opacity: 0.2; transition: opacity 0.5s; cursor: pointer; }
.circle-wrap .slick-dots li:not(:last-of-type){ margin-bottom: 20px; }
.circle-wrap .slick-dots li::before{ content: ""; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); }
.circle-wrap .slick-dots li button{ opacity: 0; }
.circle-wrap .slick-dots li span{ display: inline-block; font-size: 1.9rem; font-weight: 700; color: var(--mainColor); letter-spacing: -0.02em; line-height: 1.3; transition: font-size 0.5s; }
.circle-wrap .slick-dots li.slick-active{ opacity: 1; }
.circle-wrap .slick-dots li.slick-active span{ font-size: 3.4rem; }

.circleSec .left-box .slick-dots{ right: 0; text-align: right; }
.circleSec .left-box .slick-dots li{ padding-right: 30px; }
.circleSec .left-box .slick-dots li::before{ right: 0; }

.circleSec .right-box .slick-dots{ left: 0; text-align: left; }
.circleSec .right-box .slick-dots li{ padding-left: 30px; }
.circleSec .right-box .slick-dots li::before{ left: 0; }


/* 원형 슬라이드 영역 (텍스트 오른쪽) */
.circleSec .right-box{ display: flex; justify-content: flex-end; text-align: right; }
.circleSec .right-box .circle-wrap .text .mt{ justify-content: flex-end; }
.circleSec .right-box .circle-wrap .figure > div{ left: 100%; transform: translateX(-100%); }
.circleSec .right-box .circle-wrap .figure figure{ transform-origin: center right; }

.circleSec .right-box .circle-wrap .slick-active .figure > div, .circleSec .right-box .circle-wrap .slick-now .figure > div{ left: 0; transform: translateX(0); }


/* 원형 슬라이드 영역 (텍스트 왼쪽) */
.circleSec .left-box .circle-wrap .figure > div{ left: 0; transform: translateX(0); }
.circleSec .left-box .circle-wrap .figure figure{ transform-origin: center left; }

.circleSec .left-box .circle-wrap .slick-active .figure > div, .circleSec .left-box .circle-wrap .slick-now .figure > div{ left: 100%; transform: translateX(-100%); }

@media screen and (max-width: 1700px){
	.circle-wrap .text h5{ font-size: 2.3rem; }
	.circle-wrap .text .mt{ margin-top: 80px; }

	.circle-wrap .slick-dots li span{ font-size: 1.7rem; }
	.circle-wrap .slick-dots li.slick-active span{ font-size: 3rem; }
}

@media screen and (max-width: 1600px){
	.circleSec{ --totalW: 1000px; }
}

@media screen and (max-width: 1280px){	
	.circleSec .cover .text-box h3:not(:first-of-type){ margin-top: 5px; }

	.circle-wrap .slick-list{ margin-right: -50px; }
	.circle-wrap .circle{ width: calc(100vw - 90px); margin-right: 50px; }
	.circle-wrap .figure > div{ width: 60%; }

	.circle-wrap .text h5{ font-size: 2rem; margin-top: 15px; }
	.circle-wrap .text p{ font-size: 1.7rem; margin-top: 10px; }
	.circle-wrap .text .mt{ margin-top: 50px; }

	.circle-wrap .slick-dots li:not(:last-of-type){ margin-bottom: 15px; }
	.circle-wrap .slick-dots li span{ font-size: 1.6rem; }
	.circle-wrap .slick-dots li.slick-active span{ font-size: 2.5rem; }
}

@media screen and (max-width: 1040px){
	.circle-wrap .slick-list{ margin-right: -30px; }
	.circle-wrap .circle{ width: calc((100vw / 100) * 50); margin-right: 30px; }
	
	.circle-wrap .figure > div{ width: 100%; }
	.circle-wrap .figure figure{ transform-origin: center center !important; }

	.circle-wrap .text{ position: static; text-align: center; margin-top: 30px; }
	.circle-wrap .text .title-box span{ transform: translateY(-30px); }
	.circle-wrap .text .mt{ justify-content: center !important; }
}

@media screen and (max-width: 900px){
	.circle-wrap br{ display: none; }
	.circle-wrap .slick-list{ margin-right: 0; }
	.circle-wrap .circle{ margin-right: 0; }

	.circle-wrap .text .mt{ margin-top: 30px; }
}

@media screen and (max-width: 700px){
	.circle-wrap .circle{ width: calc((100vw / 100) * 70); }
}


/* BUSINESS */
#business{ padding: 180px 0 200px; }
#business.circleSec .cover{ background: url("/img/main/business_bg.jpg") no-repeat center center / cover; }

/* R&D */
#rnd{ padding: 200px 0 300px; }
#rnd.circleSec .cover{ background: url("/img/main/rnd_bg.jpg") no-repeat center center / cover; }

@media screen and (max-width: 1700px){
	/* BUSINESS */
	#business{ padding: 150px 0; }

	/* R&D */
	#rnd{ padding: 150px 0 200px; }
}

@media screen and (max-width: 1280px){
	/* BUSINESS */
	#business{ padding: 100px 0; }

	/* R&D */
	#rnd{ padding: 50px 0 100px; }
}


/* NEWS */
#news{ padding-bottom: 180px; overflow: hidden; }
#news .title-box{ margin-bottom: 60px; }
#news .slide-box{ position: relative; }
#news .slide-box::after{ content: ""; width: calc(((100vw - 100%) / 2) - 20px); height: calc(100% + 40px); background: #fff; position: absolute; top: 50%; right: -20px; transform: translate(100%, -50%); }

#news .news-wrap .slick-list{ padding: 20px; margin-left: -20px; margin-top: -20px; margin-right: -53px; }
#news .news-wrap .slick-track{ margin: 0; }
#news .news{ padding: 40px 35px; border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(14, 145, 226, 0.10); margin-right: 33px; outline: none; position: relative; }
#news .news .date{ margin-bottom: 15px; position: relative; }
#news .news .date::after{ content: url("/img/main/plus_icon.svg"); position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: top 0.5s, transform 0.5s; }
#news .news .date span{ font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #777; }
#news .news figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 54%; border-radius: 15px; }
#news .news figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.5s; }
#news .news .text{ margin-top: 30px; }
#news .news .text h6{ font-size: 2.3rem; font-weight: 700; color: #111; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 5px; }
#news .news .text p{ display: -webkit-box; height: 4.5em; font-size: 1.8rem; font-weight: 300; color: #333; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
#news .news a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#news .progress{ width: 100%; height: 2px; background: #eee; border-radius: 100px; margin-top: 35px; }
#news .progress .bar{ width: 0; height: 100%; background: var(--mainColor); border-radius: 100px; }

@media screen and (hover: hover){
	#news .news:hover .date::after{ top: 27%; transform: translateY(-50%) rotate(180deg); }
	#news .news:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-width: 1700px){
	#news{ padding-bottom: 150px; }
	#news .news .text h6{ font-size: 2.1rem; }
}

@media screen and (max-width: 1400px){
	#news .news{ padding: 30px 25px; }
}

@media screen and (max-width: 1280px){
	#news{ padding-bottom: 100px; }
	#news .title-box{ margin-bottom: 30px; }

	#news .news{ padding: 25px 20px; }
	#news .news .text{ margin-top: 20px; }
	#news .news .text h6{ font-size: 2rem; }
	#news .news .text p{ font-size: 1.7rem; }

	#news .progress{ margin-top: 10px; }
}

@media screen and (max-width: 600px){
	#news .news{ max-width: 350px; width: calc(100vw - 100px); }
}