@charset "utf-8";



#visual { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container { position:relative; width:100%; height:100vh; overflow:hidden; background:rgba(0,0,0,0.3); }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; opacity:0 !important; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; }
#visual .swiper-container .swiper-slide .bg1 { background:linear-gradient(0deg, rgba(221, 136, 75, 0.15) 0%, rgba(221, 136, 75, 0.15) 100%); } 
#visual .swiper-container .swiper-slide .bg3 { background:linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); } 
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#visual .swiper-container .swiper-slide .mvisualImage { opacity:1; position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide .txtbox { position:absolute; top:60%; left:0; width:100%; padding:0 160px; z-index:15; }

#visual .swiper-container .swiper-slide .txtbox.long {
  top: 40%;
}



#visual .swiper-container .swiper-slide .txtbox .txt-1 { color:#fff; font-size:var(--font60); font-weight:600; line-height:1.5; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { color:#fff; font-size:var(--font80); font-weight:600; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:25px; color:#fff; font-size:var(--font30); font-weight:500; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt span { opacity:0; font-weight:600; display:block; }
#visual .swiper-container .swiper-slide .txtbox .txt-3 span { font-weight:500; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1 !important; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox { animation:ani_5 0.1s 0.1s forwards, visual_txt_off 0.7s 4.6s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 span { animation:ani_3 0.8s 0.7s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 span { animation:ani_3 0.7s 0.2s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-3 span { animation:ani_3 0.7s 0.4s; animation-fill-mode:both; }
#visual .btn_pn { display:none }
#visual.is_paused .swiper-container .swiper-slide .txtbox,
#visual.is_paused .swiper-container .swiper-slide .txtbox .txt span { animation-play-state:paused !important; }

/* 기존 (원형 페이지네이션 스타일)
#visual .swiper-container .control_box { position:absolute; left:160px; padding:0; top:52%; z-index:5; display:flex; align-items:center; justify-content:center; gap:0 5px; }
#visual .swiper-container .control_box .swiper-btn { display:none; }
#visual .swiper-pagination { position:relative; bottom:0; top:0; }
#visual .swiper-pagination .swiper-pagination-bullet { display:block; position:relative; width:30px; height:30px; text-align:center; opacity:1; background-color:transparent; display:inline-block; margin-right:5px !important; }
#visual .swiper-pagination .swiper-pagination-bullet span { transition:all 0.3s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block; width:8px; height:8px; background:rgba(255, 255, 255, 0.3); border-radius:5px; }
#visual .swiper-pagination .swiper-pagination-bullet-active span { background:#fff; }
#visual .circular-chart { width:30px; height:auto; position:absolute; left:0; top:0; z-index:8; padding:0; margin:0; }
#visual .circle { opacity:1; stroke:rgba(255,255,255,1); fill:none; stroke-width:1.1; stroke-dasharray:100; stroke-dashoffset:100; padding:0; margin:0; }
#visual .swiper-pagination .swiper-pagination-bullet-active .circle { stroke-dashoffset:100; }
*/
/* dongsung 스타일 (하단 중앙 + 막대 진행바 + 정지버튼) */
#visual .swiper-container .control_box { position:absolute; left:50%; transform:translateX(-50%); padding:0; top:unset; bottom:40px; z-index:15; display:flex; gap:10px; align-items:center; justify-content:center; }
#visual .swiper-container .control_box .swiper-btn { display:none; }
#visual .swiper-container .control_box .playstop a { transition:all 0.3s; width:40px; height:40px; border:2px solid rgba(255, 255, 255, 0.2); display:flex; align-items:center; justify-content:center; border-radius:40px;  background-position:center center; background-repeat:no-repeat; }
#visual .swiper-container .control_box .playstop .stop a { background-image:url(/img/svg/stop_icon.svg); }
#visual .swiper-container .control_box .playstop .play a { background-image:url(/img/svg/play_icon.svg); }
#visual .swiper-container .control_box .playstop a:hover { border-color:var(--mainColor); background-color:var(--mainColor); }
#visual .swiper-pagination { position:relative; width:100px; height:2px; top:unset; left:unset; bottom:unset; right:unset; padding:0; margin:0; }
#visual .swiper-pagination span { display:none }
#visual .swiper-pagination .swiper-pagination-bullet { opacity:0; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(255, 255, 255, 0.2); border-radius:5px; margin:0; overflow:hidden; }
#visual .swiper-pagination .swiper-pagination-bullet-active { opacity:1; }

#visual .line-chart { position:absolute; z-index:1; top:0; left:0; width:100px; height:3px; }
#visual .line { opacity:1; stroke:none; fill:#fff; width:0; }

#visual .scrollDown { position:absolute; top:50%; right:50px; transform:translateY(-50%); z-index:11; display:flex; align-items:center; gap:10px; }
#visual .scrollDown .txt { display:flex; }
#visual .scrollDown .txt > span { opacity:0; transition:all 0.8s; min-width:5px; display:block; transform:translateY(-15px); color:#fff; font-size:var(--font16); font-weight:600; line-height:1.3; }
#visual .scrollDown .line { position:relative; display:flex; gap:0; flex-direction:column; }
#visual .scrollDown .line span { width:12px; height:7px; display:flex; background:url(/img/svg/scrolldown_arr.svg) center center no-repeat; opacity:0.2; }
#visual .scrollDown .line span:nth-child(1) { animation:scrollDown1 1.5s 0.3s infinite; }
#visual .scrollDown .line span:nth-child(2) { animation:scrollDown2 1.5s 0.3s infinite; }
#visual .scrollDown .line span:nth-child(3) { animation:scrollDown3 1.5s 0.3s infinite; }

@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 120px; }
	/* #visual .swiper-container .control_box { left:120px; } */
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 100px; }
	/* #visual .swiper-container .control_box { left:100px; } */
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 80px; }
	/* #visual .swiper-container .control_box { left:80px; } */
	#visual .swiper-container .control_box { bottom:80px; }
	#visual .swiper-container .control_box .playstop a { width:34px; height:34px; border-width:1px; background-size:34px auto; }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:15px; }
	/* #visual .swiper-pagination .swiper-pagination-bullet { width:24px; height:24px; } */
	/* #visual .swiper-pagination .swiper-pagination-bullet span { width:4px; height:4px; } */
	#visual .swiper-pagination .swiper-pagination-bullet { width:80px; }
	/* #visual .circular-chart { width:24px; } */
}
@media screen and (max-width:860px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 24px; top:50%; }
	/* #visual .swiper-container .control_box { left:20px; top:44%; } */
	#visual .swiper-container .swiper-slide .txtbox .txt-1 { font-size:var(--font50); }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { font-size:var(--font70); }
	#visual .swiper-container .swiper-slide .txtbox .txt-3 { margin-top:10px; font-size:var(--font26); }
	#visual .swiper-pagination .swiper-pagination-bullet { width:60px; }
	#visual .scrollDown { top:unset; bottom:80px; right:unset; left:50%; transform:translate(-50%, 0); display: none;}
}

.swiper-button-next, 
.swiper-button-prev,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@keyframes scrollDown1 {
    0% { opacity:0.2; }
    30% { opacity:1; }
    50% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes scrollDown2 {
    0% { opacity:0.2; }
    20% { opacity:0.2; }
    50% { opacity:1; }
    70% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes scrollDown3 {
    0% { opacity:0.2; }
    40% { opacity:0.2; }
    70% { opacity:1; }
    90% { opacity:0.2; }
    100% { opacity:0.2; }
}
@keyframes visual_txt_off {
	0% { opacity:1; }
	100% { opacity:0; }
}


.title-box { position:relative; }
.title-box h3 { color:#111; font-size:var(--font20); font-weight:500; line-height:1.3; }
.title-box h3 span { font-weight:500; }
.title-box .txt { margin-top:20px; color:var(--mainColor); font-size:var(--font24); font-weight:500; line-height:1.3; }
.title-box .txt span { font-weight:500; }
.title-box p { margin-top:20px; color:#111; font-size:var(--font52); font-weight:600; line-height:1.5; letter-spacing:-0.045em; }
.title-box .btn_more {  position:absolute; right:0; bottom:10px; }
@media screen and (max-width:1024px){
	.title-box .txt,
	.title-box p { margin-top:20px; }
	.title-box .btn_more { position:absolute; right:0; bottom:5px; }
}
@media screen and (max-width:640px){
	.title-box .txt,
	.title-box p { margin-top:10px; font-size:var(--font48); }
}

/* animation */
.title-box h3 { overflow:hidden; }
.title-box h3 span { opacity:0; display:block }
.title-box.subOn h3 span { animation:ani_3 0.5s 0.1s; animation-fill-mode:both; }
.title-box .txt { overflow:hidden; }
.title-box .txt span { opacity:0; display:block }
.title-box.subOn .txt span { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }
.title-box p { opacity:0; }
.title-box.subOn p { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }



.btn_more a { position:relative; width:180px; height:55px; color:#333; font-size:var(--font18); font-weight:700; line-height:1.5; border:1px solid #333; transition:all 0.4s; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.btn_more a:before {content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:0; height:0; background:var(--mainColor); border-radius:1000px; transition:all 0.4s; }
.btn_more a span { position:relative; z-index:2; font-weight:700; }
.btn_more a:hover { color:#fff; border-color:var(--mainColor); }
.btn_more a:hover:before { width:250px; height:250px; }
@media screen and (max-width:1024px){
	.btn_more a { width:140px; height:45px; }
	.btn_more a:hover:before { width:210px; height:210px; }
}
@media screen and (max-width:640px){
	.btn_more a { width:110px; height:38px; }
	.btn_more a:hover:before { width:190px; height:190px; }
}

.about { padding:0 20px; }
.about .title-box { text-align:center; }
.about .listbox { margin-top:80px; display:flex; gap:20px; }
.about .listbox .box { position:relative; width:calc((100% - 40px) / 3); overflow:hidden; }
.about .listbox .box .imgbox { position:relative; z-index:2; clip-path:inset(0 0 0 0 round 0); transition:all 0.45s ease-in-out; }
.about .listbox .box .imgbox figure { position:relative; }
.about .listbox .box .imgbox figure:before {content:""; display:block; padding-bottom:126%; }
.about .listbox .box .imgbox figure img { transition:all 0.6s ease-in-out; transform:scale(1); position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.about .listbox .box h4 { position:absolute; left:40px; bottom:40px; z-index:3; color:#fff; font-size:var(--font52); font-weight:600; line-height:1.3; transition:all 0.6s; }
.about .listbox .box .txt { position:absolute; left:0; bottom:118px; color:#333; font-size:var(--font20); font-weight:300; line-height:1.6; letter-spacing:-0.04em; transition:all 0.4s; width:80%; }
.about .listbox .box .btn_more { position:absolute; left:0; bottom:-60px; transition:all 0.3s 0.1s; }
.about .listbox .box:hover .imgbox { clip-path:inset(0 0 280px 0 round 0); }
.about .listbox .box:hover .imgbox figure img { transform:scale(1.15); }
.about .listbox .box:hover h4 { left:0; bottom:200px; color:#111; }
.about .listbox .box:hover .btn_more { bottom:0; transition:all 0.5s 0.3s; }
@media screen and (max-width:1660px){
	.about .listbox .box:hover h4 { bottom:220px; }
	.about .listbox .box:hover .imgbox { clip-path:inset(0 0 300px 0 round 0); }
	.about .listbox .box .txt { width:100%; }
}
@media screen and (max-width:1440px){
	.about .listbox { margin-top:60px; }
	.about .listbox .box h4 { left:20px; bottom:20px; font-size:var(--font46); }
	.about .listbox .box:hover h4 { bottom:190px; }
	.about .listbox .box:hover .imgbox { clip-path:inset(0 0 260px 0 round 0); }
	.about .listbox .box .txt { bottom:100px; width:100%; }
}
@media screen and (max-width:1024px){
	.about .listbox { margin-top:40px; gap:10px; }
	.about .listbox .box { width:calc((100% - 20px) / 3); padding-bottom:40px; }
	.about .listbox .box h4,
	.about .listbox .box:hover h4 { left:unset; bottom:unset; color:#111; position:relative; }
	.about .listbox .box .imgbox,
	.about .listbox .box:hover .imgbox { clip-path:inset(0 0 0 0 round 0); position:relative; }
	.about .listbox .box .txt { bottom:unset; position:relative; margin:20px 0 40px; }
	.about .listbox .box .btn_more { bottom:0; }
	.about .listbox .box .txtbox { margin-top:20px; }
}
@media screen and (max-width:760px){
	.about .listbox { margin-top:20px; gap:10px; flex-wrap:wrap; }
	.about .listbox .box { width:100%; padding-bottom:0; display:flex; }
	.about .listbox .box .imgbox { width:50%; }
	.about .listbox .box .imgbox figure:before { padding-bottom:145%; }
	.about .listbox .box .btn_more { left:unset; bottom:unset; position:relative; }
	.about .listbox .box .txtbox { margin-top:20px; width:50%; padding:0 5px 0 10px; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
	.about .listbox .box .txt { margin:10px 0 20px; }
	.about .listbox .box:nth-child(2n) { flex-direction:row-reverse; }
	.about .listbox .box:nth-child(2n) .txtbox { align-items:flex-start; text-align:left; padding:0 10px 0 5px; }
}

/* animation */
.about .title-box.subOn p { animation:ani_5 0.5s 0.5s; animation-fill-mode:both; }
.about .listbox .box { opacity:0; }
.about .listbox.subOn .box { animation:bgs3 0.5s 0.2s; animation-fill-mode:both; }


.best { padding-bottom:80px; background:url(/img/main/best_bg.png) no-repeat center top / cover; }
.best .title-box .logo { margin-bottom:20px; }
.best .listbox { margin-top:50px; display:flex; gap:20px; }
.best .listbox .box { position:relative; width:calc((100% - 40px) / 3); overflow:hidden; padding:40px; background:rgba(0, 0, 0, 0.02); }
.best .listbox .box .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; clip-path:circle(0% at 50% 50%); transition:all 0.45s ease-in-out;}
.best .listbox .box figure img { transition:all 0.3s; }
.best .listbox .box dl { position:relative; z-index:2; }
.best .listbox .box dt { margin-top:60px; color:#111; font-size:var(--font32); font-weight:700; line-height:1.4; letter-spacing:-0.045em; transition:all 0.3s; }
.best .listbox .box dd { margin-top:20px; color:#333; font-size:var(--font19); font-weight:300; line-height:1.6; transition:all 0.3s; }
.best .listbox .box:hover .bg { clip-path: circle(75% at 50% 50%); }
.best .listbox .box:hover figure img { filter:brightness(0) invert(1); }
.best .listbox .box:hover dt, 
.best .listbox .box:hover dd { color:#fff; }
@media screen and (max-width:1560px){
	.best .listbox .box dd br { display:none }
}
@media screen and (max-width:1280px){
	.best .listbox { margin-top:30px; gap:20px; }
	.best .listbox .box { padding:30px; }
	.best .listbox .box dt { margin-top:40px; }
	.best .listbox .box dd { margin-top:15px; }
}
@media screen and (max-width:1024px){
	.best .title-box .logo img { width:70px; }
	.best .listbox { margin-top:25px; gap:10px; }
	.best .listbox .box { width:calc((100% - 20px) / 3); padding:20px; }
	.best .listbox .box figure img { width:40px; }
	.best .listbox .box dt { margin-top:30px; }
	.best .listbox .box dd { margin-top:15px; }
}
@media screen and (max-width:760px){
	.best .listbox { flex-wrap:wrap; }
	.best .listbox .box { width:100%; }
}
@media screen and (max-width:640px){
	.best .title-box .logo img { width:55px; }
	.best .listbox { margin-top:15px; }
	.best .listbox .box figure img { width:36px; }
	.best .listbox .box dt { margin-top:15px; }
	.best .listbox .box dd { margin-top:10px; }
}
@media screen and (max-width:580px){
	.best .btn_more { position:relative; right:unset; top:unset; margin-top:10px; }
}

/* animation */
.best .listbox .box { opacity:0; }
.best .listbox.subOn .box { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }


.sustainablity .listbox { margin:70px 0 -210px 0; display:flex; gap:20px; }
.sustainablity .listbox .box { transition:all 0.3s; position:relative; width:calc((100% - 40px) / 3); text-align:center; }
.sustainablity .listbox .box .sbox,
.sustainablity .listbox .box a { transition:all 0.3s; padding:60px 20px 65px; width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; border:2px solid rgba(109, 36, 227, 0.05); background:#fff; box-shadow:0 0 20px 0 rgba(109, 36, 227, 0.08); }
.sustainablity .listbox .box h4 { color:#111; font-size:var(--font30); font-weight:600; line-height:1.3; height:var(--font40); overflow:hidden; }
.sustainablity .listbox .box h4 span { position:relative; font-weight:600; transition:all 0.5s; display:block; }
.sustainablity .listbox .box h4 span:before { content:attr(data-text); display:block; text-wrap:nowrap; font-weight:600; }
.sustainablity .listbox .box:hover h4 span { transform:translateY(-50%); color:var(--mainColor); }
.sustainablity .listbox .box figure { height:330px; display:flex; align-items:center; justify-content:center; }
.sustainablity .listbox .box figure .line { transition:all 0.3s; stroke:#999; }
.sustainablity .listbox .box .txt { color:#222; font-size:var(--font18); font-weight:400; line-height:1.8; }
.sustainablity .bottom { padding:500px 0 340px; text-align:center; background:url(/img/main/sustainablity_bg.jpg) no-repeat center bottom / cover; }
.sustainablity .bottom .txt { color:#fff; font-size:var(--font100); font-weight:400; line-height:1.3; letter-spacing:-0.045em; margin:-10px 0; }
.sustainablity .listbox .box:hover a { transform:translateY(-10px); border-color:rgba(109, 36, 227, 0.15); }
.sustainablity .listbox .box:hover figure .line { stroke:#38bea9; }
@media screen and (max-width:1280px){
	.sustainablity .listbox { margin:50px 0 -180px 0; }
	.sustainablity .listbox .box .sbox,
	.sustainablity .listbox .box a { padding:50px 20px 55px; }
	.sustainablity .listbox .box figure { height:280px; }
	.sustainablity .listbox .box figure svg { width:48%; height:auto; }
	.sustainablity .listbox .box .txt br { display:none }
	.sustainablity .bottom { padding:400px 0 240px; }
}
@media screen and (max-width:1024px){
	.sustainablity .listbox { margin:40px 0 -160px 0; gap:10px; }
	.sustainablity .listbox .box { width:calc((100% - 20px) / 3); }
	.sustainablity .listbox .box .sbox,
	.sustainablity .listbox .box a { padding:40px 20px 45px; }
	.sustainablity .listbox .box figure { height:220px; }
	.sustainablity .bottom { padding:300px 0 140px; }
}
@media screen and (max-width:760px){
	.sustainablity .listbox { flex-wrap:wrap; }
	.sustainablity .listbox .box { width:100%; }
	.sustainablity .listbox .box .sbox,
	.sustainablity .listbox .box a { padding:40px 20px 45px; }
	.sustainablity .listbox .box figure { height:auto; margin:30px 0; }
	.sustainablity .listbox .box figure svg { width:22%; }
	.sustainablity .listbox .box:hover a { transform:translateY(0);}
}
@media screen and (max-width:640px){
	.sustainablity .listbox { margin:20px 0 -100px 0; }
	.sustainablity .listbox .box .sbox,
	.sustainablity .listbox .box a { padding:20px; }
	.sustainablity .listbox .box figure { margin:20px 0; }
	.sustainablity .bottom { padding:180px 0 80px; }
}

/* animation */
.sustainablity .listbox .box { opacity:0; }
.sustainablity .listbox.subOn .box { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }
.sustainablity .bottom .txtbox .txt { overflow:hidden; }
.sustainablity .bottom .txtbox .txt span { opacity:0; display:block }
.sustainablity .bottom .txtbox.subOn .txt span { animation:ani_3 0.5s 0.1s; animation-fill-mode:both; }
.sustainablity .bottom .txtbox.subOn .txt:nth-child(2) span { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }

.news .listbox { position:relative; margin-top:60px; }
.news .listbox .swiper-container { position:relative; width:100%; overflow:hidden; }
.news .listbox .swiper-container .swiper-slide { position:relative; }
.news .listbox .swiper-container .swiper-slide:before { content:''; display:block; padding-bottom:85%; }
.news .listbox .swiper-container .swiper-slide a { position:absolute; left:0; top:0; width:100%; height:100%; background:#f5f5f5; padding:40px;  }
.news .listbox .swiper-container .swiper-slide .type { transition:all 0.3s; position:relative; z-index:2; height:40px; padding:0 15px; color:#777; font-size:var(--font14); font-weight:500; line-height:1.3; display:inline-flex; align-items:center; justify-content:center; border:1px solid #bbb; }
.news .listbox .swiper-container .swiper-slide h4 { transition:all 0.3s; position:relative; z-index:2; margin-top:30px; color:#111; font-size:var(--font30); font-weight:600; line-height:1.3; letter-spacing:-0.045em; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.news .listbox .swiper-container .swiper-slide .txt { transition:all 0.3s; position:relative; z-index:2; margin-top:30px; color:#999; font-size:var(--font17); font-weight:300; line-height:1.5; letter-spacing:-0.03em; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.news .listbox .swiper-container .swiper-slide .date { transition:all 0.3s; position:absolute; left:40px; bottom:40px; z-index:2; color:var(--mainColor1); font-size:var(--font16); font-weight:600; line-height:1.3; }
.news .listbox .swiper-container .swiper-slide .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; clip-path:circle(0% at 50% 50%); transition:all 0.45s ease-in-out;}
.news .listbox .swiper-container .swiper-slide .bg:before { content:''; display:block; background:rgba(0, 0, 0, 0.80); position:absolute; left:0; top:0; width:100%; height:100%; }
.news .listbox .swiper-container .swiper-slide a:hover .bg {  clip-path: circle(75% at 50% 50%); }
.news .listbox .swiper-container .swiper-slide a:hover .type { color:#fff; border-color:var(--mainColor1); background:var(--mainColor1); }
.news .listbox .swiper-container .swiper-slide a:hover h4  { color:#fff; }
.news .listbox .swiper-container .swiper-slide a:hover .txt { color:rgba(255, 255, 255, 0.80); }
.news .listbox .swiper-container .swiper-slide a:hover .date { color:rgba(255, 255, 255, 0.50); }
.news .listbox .swiper-pn { position:absolute; top:-125px; right:190px; display:flex; gap:10px; }
.news .listbox .swiper-pn > div { position:relative; left:unset; right:unset; top:unset; margin:0; padding:0; display:block; width:55px; height:55px; display:flex; align-items:center; justify-content:center; border:1px solid #333; transition:all 0.4s; overflow:hidden; }
.news .listbox .swiper-pn > div:before {content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:0; height:0; background:var(--mainColor); border-radius:1000px; transition:all 0.4s; }
.news .listbox .swiper-pn > div img { transition:all 0.3s; position:relative; z-index:2; }
.news .listbox .swiper-pn > div:hover { border-color:var(--mainColor); }
.news .listbox .swiper-pn > div:hover img { filter:brightness(0) invert(1); }
.news .listbox .swiper-pn > div:hover:before { width:90px; height:90px; }
.news .listbox .swiper-pagination { display:none }
@media screen and (max-width:1280px){
	.news .listbox { margin-top:40px; }
	.news .listbox .swiper-pn { top:-105px; }
}
@media screen and (max-width:1024px){
	.news .listbox { margin-top:30px; }
	.news .listbox .swiper-container .swiper-slide:before { padding-bottom:300px; }
	.news .listbox .swiper-container .swiper-slide a { padding:20px; }
	.news .listbox .swiper-container .swiper-slide .type { height:35px; padding:0 15px; }
	.news .listbox .swiper-container .swiper-slide h4,
	.news .listbox .swiper-container .swiper-slide .txt { margin-top:15px; }
	.news .listbox .swiper-container .swiper-slide .date { left:20px; bottom:20px; }
	.news .listbox .swiper-pn { top:-80px; right:145px; gap:5px; }
	.news .listbox .swiper-pn > div { width:45px; height:45px; }
	.news .listbox .swiper-pn img { width:14px; }
}
@media screen and (max-width:640px){
	.news .listbox { margin-top:15px; padding-bottom:30px; }
	.news .listbox .swiper-container .swiper-slide:before { padding-bottom:220px; }
	.news .listbox .swiper-container .swiper-slide .type { height:30px; padding:0 15px; }
	.news .listbox .swiper-container .swiper-slide h4,
	.news .listbox .swiper-container .swiper-slide .txt { margin-top:10px; }
	.news .listbox .swiper-pn { top:-58px; right:115px; gap:5px; }
	.news .listbox .swiper-pn > div { width:38px; height:38px; }
	.news .listbox .swiper-pn img { width:12px; }
	.news .listbox .swiper-pagination { display:block; bottom:0; }
	.news .listbox .swiper-pagination .swiper-pagination-bullet-active { background:var(--mainColor); }
}
@media screen and (max-width:580px){
	.news .btn_more { position:relative; right:unset; top:unset; margin-top:10px; }
	.news .listbox .swiper-pn { right:0; }
}

/* animation */
.news .listbox .swiper-container { opacity:0; }
.news .listbox.subOn .swiper-container { animation:ani_4 0.5s 0.1s; animation-fill-mode:both; }


.affiliates .listbox { margin-top:60px; padding:0 20px; display:flex; flex-wrap:wrap; gap:20px; }
.affiliates .listbox .box { width:calc((100% - 40px) / 3); }
.affiliates .listbox .box .imgbox { position:relative; z-index:2; clip-path:inset(0 0 0 0 round 0); transition:all 0.45s ease-in-out; }
.affiliates .listbox .box .imgbox figure { position:relative; overflow:hidden; }
.affiliates .listbox .box .imgbox figure:before {content:""; display:block; padding-bottom:78%; }
.affiliates .listbox .box .imgbox figure img { transition:all 0.4s; transform:scale(1); position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.affiliates .listbox .box .imgbox .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; clip-path:circle(0% at 50% 50%); transition:all 0.45s ease-in-out; }
.affiliates .listbox .box .imgbox .bg:before { content:''; display:block; background:rgba(109, 36, 227, 0.80); position:absolute; left:0; top:0; width:100%; height:100%; }
.affiliates .listbox .box .imgbox > span { opacity:0; color:#fff; font-size:var(--font24); font-weight:600; line-height:1.3; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; display:flex; align-items:center; justify-content:center; transition:all 0.45s ease-in-out; }
.affiliates .listbox .box dl h4 { margin:20px 0 10px; color:#333; font-size:var(--font28); font-weight:600; line-height:1.3; letter-spacing:-0.035em; }
.affiliates .listbox .box dd { color:var(--mainColor); font-size:var(--font17); font-weight:500; line-height:1.3; letter-spacing:-0.025em; }
.affiliates .listbox .box a:hover .imgbox figure img { transform:scale(1.08); }
.affiliates .listbox .box a:hover .imgbox .bg { clip-path: circle(75% at 50% 50%); }
.affiliates .listbox .box a:hover .imgbox > span { opacity:1; }
@media screen and (max-width:1024px){
	.affiliates .listbox { margin-top:30px; gap:10px; }
	.affiliates .listbox .box { width:calc((100% - 20px) / 3); }
	.affiliates .listbox .box dl h4 { margin:10px 0 5px; }
}
@media screen and (max-width:640px){
	.affiliates .listbox { margin-top:15px; gap:20px 10px; }
	.affiliates .listbox .box { width:100%; }
	.affiliates .listbox .box .imgbox figure:before { padding-bottom:50%; }
	.affiliates .listbox .box dl h4 { margin:5px 0 3px; }
}

/* animation */
.affiliates .listbox .box { opacity:0; }
.affiliates .listbox.subOn .box { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }


.dongsung { background:url(/img/main/dongsung_bg.jpg) no-repeat center center / cover; }
.dongsung .txtbox { padding:170px 0; }
.dongsung .txtbox h4 { color:#111; font-size:var(--font64); font-weight:600; line-height:1.3; letter-spacing:-0.045em; }
.dongsung .txtbox h4 span { display:block; font-weight:600; }
.dongsung .txtbox h4 strong { font-weight:600; color:var(--mainColor); }
.dongsung .txtbox .txt { margin-top:25px; color:#333; font-size:var(--font22); font-weight:300; line-height:1.3; letter-spacing:-0.035em; }
.dongsung .txtbox .btn_more { margin-top:60px; }
.dongsung .txtbox .btn_more a { width:220px; color:#555; border:1px solid #777; font-size:var(--font20); height:60px; }
.dongsung .txtbox .btn_more a span { display:flex; align-items:center; gap:10px; font-weight:600; }
.dongsung .txtbox .btn_more a span img { transition:all 0.3s; }
.dongsung .txtbox .btn_more a:hover { color:#fff; border-color:var(--mainColor); }
.dongsung .txtbox .btn_more a:hover span img { filter:brightness(0) invert(1); }
@media screen and (max-width:1280px){
	.dongsung .txtbox { padding:120px 0; }
}
@media screen and (max-width:1024px){
	.dongsung .txtbox { padding:90px 0; }
	.dongsung .txtbox .txt { margin-top:15px; }
	.dongsung .txtbox .btn_more { margin-top:30px; }
	.dongsung .txtbox .btn_more a { width:180px; height:50px; }
	.dongsung .txtbox .btn_more a img { height:14px; }
}
@media screen and (max-width:640px){
	.dongsung .txtbox { padding:60px 0; }
	.dongsung .txtbox .txt { margin-top:10px; }
	.dongsung .txtbox .btn_more { margin-top:20px; }
	.dongsung .txtbox .btn_more a { width:160px; height:45px; }
	.dongsung .txtbox .btn_more a img { height:12px; }
}

/* animation */
.dongsung .txtbox h4 { overflow:hidden; }
.dongsung .txtbox h4 span { opacity:0; display:block }
.dongsung .txtbox.subOn h4 span { animation:ani_3 0.5s 0.1s; animation-fill-mode:both; }
.dongsung .txtbox .txt { overflow:hidden; }
.dongsung .txtbox .txt span { opacity:0; display:block }
.dongsung .txtbox.subOn .txt span { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }
.dongsung .txtbox .btn_more { opacity:0; }
.dongsung .txtbox.subOn .btn_more { animation:ani_5 0.5s 0.4s; animation-fill-mode:both; }