@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; bottom:112px; left:0; width:100%; padding:0 160px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { color:#fff; font-size:var(--font80); font-weight:600; line-height:1.4; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:20px; color:#fff; font-size:var(--font22); 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-2 span { font-weight:300; }
#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.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 span { animation:ani_3 0.7s 0.6s; 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:unset; bottom:52px; z-index:5; display:flex; align-items:center; justify-content:center; } */
#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; } */
#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:100px; height:3px; background:rgba(255, 255, 255, 0.2); border-radius:5px; margin:0; overflow:hidden; } */
#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-2 { margin-top:10px; }
	/* #visual .swiper-pagination .swiper-pagination-bullet { width:80px; height:2px; } */
	#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; bottom:100px;  }
	/* #visual .swiper-container .control_box { left:24px; bottom:50px; } */
	#visual .swiper-container .swiper-slide .txtbox .txt-1 { font-size:var(--font60); }
	#visual .swiper-pagination .swiper-pagination-bullet { width:60px; }
	#visual .scrollDown { top:unset; bottom:80px; right:unset; left:50%; transform:translate(-50%, 0); }
}

.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:#000; font-size:var(--font20); font-weight:600; line-height:1.3; letter-spacing:-0.03em;}
.title-box h3 span { font-weight:600; }
.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:0; }
@media screen and (max-width:1024px){
	.title-box .txt,
	.title-box p { margin-top:20px; }
}
@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; padding:0 30px; height:55px; color:#000; font-size:var(--font18); font-weight:500; line-height:1.5; border:1px solid #000; transition:all 0.4s; display:inline-flex; align-items:center; justify-content:center; gap:0 20px; overflow:hidden; border-radius:70px; }
.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:500; }
/*
.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 { padding:0 25px; height:45px; gap:0 10px; }
	/* .btn_more a:hover:before { width:210px; height:210px; } */
}
@media screen and (max-width:640px){
	.btn_more a { padding:0 20px; height:35px; }
	/* .btn_more a:hover:before { width:190px; height:190px; } */
}

.about .txtbox { margin-top:30px; overflow:hidden; }
.about .txtbox .txt { color:#000; font-size:var(--font86); font-weight:600; line-height:1.3; letter-spacing:-0.055em; }
.about .txtbox .txt span { font-weight:600; }
.about .txtbox .txt.txt-2 { text-align:right; margin-top:15px; }
.about .txtbox .txt.txt-2 strong { display:inline-block; color:var(--mainColor); font-weight:600; margin-top:15px; }
.about .listbox { display:flex; gap:10px; padding:0 20px; }
.about .listbox .box { position:relative; width:calc((100% - 30px) / 4); }
.about .listbox .box:before { content:''; display:block; padding-bottom:96%; }
.about .listbox .box .a-box { border:none; position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.about .listbox .box .a-box a { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid #ddd; background:#fff; }
.about .listbox .box .a-box a:before {content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:0; height:0; background:var(--mainColor); border-radius:2000px; transition:all 0.4s; }
.about .listbox .box .a-box a span { transition:all 0.4s; position:relative; color:#000; font-size:var(--font28); font-weight:600; line-height:1.5; letter-spacing:-0.035em; }
.about .listbox .box .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; }
.about .listbox .box .bg img { transition:all 0.5s; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.about .listbox .box .txt { position:absolute; right:0; bottom:0; padding:40px; color:#fff; font-size:var(--font28); font-weight:600; line-height:1.5; letter-spacing:-0.035em; text-align:right; }
.about .listbox .box:hover .bg img { transform:scale(1.10); }
.about .listbox .box .a-box a:hover:before { width:150%; height:150%; }
.about .listbox .box .a-box a:hover span { color:#fff; } 
@media screen and (max-width:1440px){
	.about .listbox .box .txt { padding:0 30px 30px 0; }
}
@media screen and (max-width:1280px){
	.about .listbox .box .txt { padding:0 25px 25px 0; }
}
@media screen and (max-width:1024px){
	.about .txtbox .txt.txt-2,
	.about .txtbox .txt.txt-2 strong { margin-top:8px; }
	.about .listbox .box .txt { padding:0 20px 20px 0; }
}
@media screen and (max-width:1024px){
	.about .txtbox { margin-top:15px; }
	.about .txtbox .txt { font-size:var(--font70); }
	.about .listbox { flex-wrap:wrap; }
	.about .listbox .box { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.about .txtbox { margin-top:10px; }
	.about .txtbox .txt { font-size:var(--font50); }
	.about .txtbox .txt.txt-2,
	.about .txtbox .txt.txt-2 strong { margin-top:5px; }
	.about .listbox { gap:5px; }
	.about .listbox .box { width:calc((100% - 5px) / 2); }
	.about .listbox .box .txt { padding:0 15px 15px 0; }
}
@media screen and (max-width:420px){
	.about .listbox .box .txt { padding:0 10px 10px 0; }
}

/* animation */
.about .txtbox .txt { opacity:0; }
.about .txtbox.subOn .txt.txt-1 { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }
.about .txtbox.subOn .txt.txt-2 { animation:ani_1 0.5s 0.3s; animation-fill-mode:both; }
.about .txtbox .txt.txt-2 strong { opacity:0; }
.about .txtbox.subOn .txt.txt-2 strong { animation:bgs3-1 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; }

.business .listbox { position:relative; margin:0 20px; margin-top:30px; height:85vh; }
.business .listbox .bg { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden }
.business .listbox .bg .sbg { transition:all 0.4s; opacity:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.business .listbox .bg .bg1 { background-image:url(/img/main/business_bg1.jpg); }
.business .listbox .bg .bg2 { background-image:url(/img/main/business_bg2_n.jpg); }
.business .listbox .bg .bg3 { background-image:url(/img/main/business_bg3.jpg); }
.business .listbox .bg .bg4 { background-image:url(/img/main/business_bg4.jpg); }
.business .listbox .bg.over1 .bg1,
.business .listbox .bg.over2 .bg2,
.business .listbox .bg.over3 .bg3,
.business .listbox .bg.over4 .bg4 { opacity:1; transition:all 0.6s; }
.business .listbox .nav { position:absolute; z-index:5; right:140px; top:60px; }
.business .listbox .nav li:not(:last-child) { margin-bottom:5px; }
.business .listbox .nav li a { width:220px; height:55px; color:#fff; font-size:var(--font18); font-weight:600; line-height:1.0; display:flex; align-items:center; padding-left:30px; background:rgba(0, 0, 0, 0.80); backdrop-filter:blur(10px); border-radius:55px; }
.business .listbox .nav li a strong { display:flex; gap:10px; font-weight:600; }
.business .listbox .nav li a span { font-size:0.7em; vertical-align:super; padding-top:2px; }
.business .listbox .nav li.on a { background-color:var(--mainColor); }
.business .listbox .box { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-5; }
.business .listbox .box.on { z-index:3; }
.business .listbox .box .sbox { transition:all 0.5s; opacity:0; position:absolute; left:0; bottom:0; width:100%; padding:0 140px 80px; display:flex; gap:10px; justify-content:space-between; align-items:flex-end; }
.business .listbox .box .sbox dl {  }
.business .listbox .box .sbox dt { flex-shrink:0; color:#fff; font-size:var(--font60); font-weight:500; line-height:1.3; letter-spacing:-0.055em; }
.business .listbox .box .sbox dt h4 { font-weight:500; }
.business .listbox .box .sbox dd { margin-top:30px; color:#fff; font-size:var(--font22); font-weight:300; line-height:1.63; letter-spacing:-0.025em; }
.business .listbox .box .sbox dd .txt { color:#fff; font-size:var(--font26); font-weight:500; line-height:1.3; margin-bottom:20px; }
.business .listbox .box.on .sbox { opacity:1; }
.business .listbox .btn a { width:250px; color:#fff; border:2px solid #fff; font-size:var(--font21); height:75px; display:inline-flex; align-items:center; justify-content:center; border-radius:70px; transition:all 0.4s; }
.business .listbox .btn a span { display:flex; align-items:center; gap:10px; font-weight:600; }
.business .listbox .btn a .aniTxt { height:var(--font23); }
.business .listbox .btn a:hover { color:#fff; border-color:var(--mainColor); background:var(--mainColor); }
@media screen and (max-width:1720px){
	.business .listbox .box .sbox { gap:20px; }
	.business .listbox .box .sbox dd br { display:none }
}
@media screen and (max-width:1440px){
	.business .listbox .nav { right:110px; top:50px; }
	.business .listbox .box .sbox { padding:0 110px 50px; }
}
@media screen and (max-width:1280px){
	.business .listbox { height:75vh; margin-top:15px; }
	.business .listbox .nav { right:40px; top:40px; }
	.business .listbox .box .sbox { padding:0 40px 40px; }
}
@media screen and (max-width:1024px){
	.business .listbox { height:65vh; }
	.business .listbox .nav { right:20px; top:40px; }
	.business .listbox .nav li a { width:190px; height:45px; }
	.business .listbox .box .sbox { padding:0 20px 40px; }
	.business .listbox .box .sbox dd { margin-top:15px; }
	.business .listbox .box .sbox dd .txt { margin-bottom:10px; }
	.business .listbox .btn a { width:200px; border-width:1px; height:55px; }
	.business .listbox .btn a span img { height:12px; }
}
@media screen and (max-width:860px){
	.business .listbox .box .sbox { flex-direction:column; gap:15px; }
	.business .listbox .box .sbox dl { flex-wrap:wrap; }
	.business .listbox .box .sbox dl dt,
	.business .listbox .box .sbox dl dd { width:100%; }
	.business .listbox .box .sbox dd { margin-top:8px; }
	.business .listbox .box .sbox dd .txt { margin-bottom:5px; }
	.business .listbox .btn { display:flex; justify-content:flex-end; }
}
@media screen and (max-width:640px){
	.business .listbox { height:60vh; }
	.business .listbox .nav { top:20px; }
	.business .listbox .nav li a { height:38px; }
	.business .listbox .box .sbox { padding:0 20px 30px; }
	.business .listbox .btn a { width:150px; height:45px; }
}

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


.sustainability .listbox { position:relative; margin:0 20px; margin-top:30px; background:url(/img/main/sustainability_bg.jpg) no-repeat center center / cover; overflow:hidden; }
.sustainability .listbox .bg { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden }
.sustainability .listbox .bg .sbg { transition:all 0.6s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); clip-path:circle(0% at 50% 50%); width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.sustainability .listbox .bg .bg1 { background-image:url(/img/main/sustainability_bg1.jpg); } 
.sustainability .listbox .bg .bg2 { background-image:url(/img/main/sustainability_bg2.jpg); } 
.sustainability .listbox .bg .bg3 { background-image:url(/img/main/sustainability_bg3.jpg); }
.sustainability .listbox .bg.over1 .bg1,
.sustainability .listbox .bg.over2 .bg2,
.sustainability .listbox .bg.over3 .bg3 { transition:all 1.0s; clip-path: circle(80% at 50% 50%); }
.sustainability .listbox .list { display:flex; }
.sustainability .listbox .list .box { position:relative; width:calc(100% / 3); border-left:1px solid rgba(255, 255, 255, 0.20);  }
.sustainability .listbox .box:first-child { border:none }
.sustainability .listbox .box:before { content:''; display:block; padding-bottom:96%; }
.sustainability .listbox .box a { z-index:4; position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.sustainability .listbox .box a span { transition:all 0.6s; display:flex; align-items:center; color:#fff; font-size:var(--font46); font-weight:600; line-height:1.3; letter-spacing:-0.045em; }
.sustainability .listbox .box.off a span { color:rgba(255, 255, 255, 0.2); }
.sustainability .listbox .box a .aniTxt { height:var(--font50); }
.sustainability .listbox .stxt { transition:all 0.7s 0.2s; z-index:2; position:absolute; right:0; bottom:0; transform:translateX(100%); color:rgba(255, 255, 255, 0.2); font-size:var(--font100); font-weight:700; line-height:1.3; letter-spacing:-0.05em; }
.sustainability .listbox .stxt.on { transform:translateX(0); }
@media screen and (max-width:1024px){
	.sustainability .listbox { margin-top:15px; }
	.sustainability .listbox .box:before { padding-bottom:110%; }
}
@media screen and (max-width:640px){
	.sustainability .listbox { margin-top:10px; }
}
@media screen and (max-width:520px){
	.sustainability .listbox .list { flex-wrap:wrap; }
	.sustainability .listbox .list .box { width:100%; border-top:1px solid rgba(255, 255, 255, 0.20); border-left:none; }
	.sustainability .listbox .box:before { padding-bottom:48%; }
}

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

.news .listbox { position:relative; margin-top:30px; padding-bottom:82px; }
.news .listbox .swiper-container { position:relative; width:100%; overflow:hidden; }
.news .listbox .swiper-container .swiper-slide { position:relative; width:calc(50% - 30px - 25px); max-width:770px; }
.news .listbox .swiper-container .swiper-slide a { display:block; width:100%; }
.news .listbox .swiper-container .swiper-slide .imgbox { position:relative; overflow:hidden; }
.news .listbox .swiper-container .swiper-slide .imgbox:before { content:''; display:block; padding-bottom:59.8%; }
.news .listbox .swiper-container .swiper-slide .imgbox img { transition:all 0.5s; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.news .listbox .swiper-container .swiper-slide .imgbox .type { position:absolute; right:10px; bottom:10px; height:30px; padding:0 10px; color:#fff; font-size:var(--font15); font-weight:600; line-height:1.0; display:inline-flex; align-items:center; justify-content:center; background:var(--mainColor); }
.news .listbox .swiper-container .swiper-slide h4 { transition:all 0.3s; position:relative; z-index:2; margin-top:40px; color:#111; font-size:var(--font24); font-weight:500; line-height:1.3; letter-spacing:-0.045em; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.news .listbox .swiper-container .swiper-slide .info { margin-top:20px; display:flex; align-items:center; gap:20px; }
.news .listbox .swiper-container .swiper-slide .info > div { display:flex; align-items:center; gap:10px; color:#666; font-size:var(--font16); font-weight:300; line-height:1.3; }
.news .listbox .swiper-container .swiper-slide a:hover .imgbox img { transform:scale(1.10); }

.news .listbox .swiper-pn { display:none }
.news .listbox .swiper-pagination { display:block; position:absolute; left:50%; top:unset; bottom:0; transform:translate(-50%, 0); max-width:1600px; width:100%; }
.news .listbox .swiper-pagination-progressbar { height:2px; background:#ddd; }
.news .listbox .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { height:100%; background:#000; }
.news .listbox .swiper-pagination .swiper-pagination-bullet-active { background:var(--mainColor); }
@media screen and (max-width:1640px){
	.news .listbox { padding:0 20px; padding-bottom:82px; }
	.news .listbox .swiper-container .swiper-slide { width:calc(50% - 30px); }
	.news .listbox .swiper-pagination { left:20px; width:calc(100% - 40px); transform:translate(0, 0); }
}
@media screen and (max-width:1024px){
	.news .listbox { margin-top:15px; padding-bottom:40px; }
	.news .listbox .swiper-container .swiper-slide h4 { margin-top:20px; }
	.news .listbox .swiper-container .swiper-slide .info { margin-top:10px; gap:15px; }
	.news .listbox .swiper-container .swiper-slide .info > div { gap:8px; }
	.news .listbox .swiper-container .swiper-slide .info > div img { height:15px; }
}
@media screen and (max-width:640px){
	.news .listbox .swiper-container .swiper-slide { width:100%; }
	.news .listbox .swiper-container .swiper-slide h4 { margin-top:10px; }
}

/* 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:30px; display:flex; padding:0 20px; margin-left:1px; }
.affiliates .listbox .box { position:relative; width:calc(100% / 3); border:1px solid rgba(221, 221, 221, 1); border-width:1px 1px 1px 0; margin-left:-1px; }
.affiliates .listbox .box:before { content:''; display:block; padding-bottom:96%; }
.affiliates .listbox .box:first-child { border-width:1px; }
.affiliates .listbox .box .a-box { border:none; position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.affiliates .listbox .box .a-box a { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; }
.affiliates .listbox .box .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% + 2px); height:calc(100% + 2px); clip-path:circle(0% at 50% 50%); transition:all 0.6s ease-in-out;}
.affiliates .listbox .box .bg img { width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.affiliates .listbox .box dl { position:relative; z-index:2; }
.affiliates .listbox .box dt { color:#111; font-size:var(--font46); font-weight:600; line-height:1.4; letter-spacing:-0.045em; transition:all 0.4s; }
.affiliates .listbox .box dd { margin-top:25px; color:#222; font-size:var(--font22); font-weight:400; line-height:1.3; transition:all 0.4s; }
.affiliates .listbox .box:hover .bg { clip-path: circle(80% at 50% 50%); }
.affiliates .listbox .box:hover dt, 
.affiliates .listbox .box:hover dd { color:#fff; transform:translateY(-15px); }
@media screen and (max-width:1280px){
	.affiliates .listbox .box dd { margin-top:20px; }
}
@media screen and (max-width:1024px){
	.affiliates .listbox,
	.affiliates .listbox .box dd { margin-top:15px; }
}
@media screen and (max-width:640px){
	.affiliates .listbox,
	.affiliates .listbox .box dd { margin-top:10px; }
}
@media screen and (max-width:580px){
	.affiliates .listbox { flex-wrap:wrap; }
	.affiliates .listbox .box { width:100%; border-width:0 1px 1px 1px; }
	.affiliates .listbox .box:before { padding-bottom:60%; }
}
@media screen and (max-width:520px){
	.affiliates .listbox .box:before { padding-bottom:56%; }
}
/* animation */
.affiliates .listbox .box { opacity:0; }
.affiliates .listbox.subOn .box { animation:bgs3 0.5s 0.1s; animation-fill-mode:both; }

.dongsung .imgbox { margin:30px 20px 260px; background:url(/img/main/dongsung_bg.jpg) no-repeat center center / cover; }
.dongsung .txtbox { height:600px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.dongsung .txtbox h4 { color:#fff; font-size:var(--font46); font-weight:600; line-height:1.43; letter-spacing:-0.045em; }
.dongsung .txtbox h4 span { display:block; font-weight:600; }
.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 { margin-top:40px; }
.dongsung .txtbox .btn a { width:250px; color:#fff; border:2px solid var(--mainColor); background:var(--mainColor); font-size:var(--font21); height:75px; display:inline-flex; align-items:center; justify-content:center; border-radius:70px; transition:all 0.4s; }
.dongsung .txtbox .btn a span { display:flex; align-items:center; gap:10px; font-weight:600; }
.dongsung .txtbox .btn a .aniTxt { height:var(--font23); }
.dongsung .txtbox .btn a:hover { border-color:#fff; background:none; }
@media screen and (max-width:1280px){
	.dongsung .txtbox { height:450px; }
}
@media screen and (max-width:1024px){
	.dongsung .imgbox { margin:15px 20px 130px; }
	.dongsung .txtbox { height:300px; }
	.dongsung .txtbox .btn { margin-top:20px; }
	.dongsung .txtbox .btn a { width:200px; border-width:1px; height:55px; }
	.dongsung .txtbox .btn a span img { height:12px; }
}
@media screen and (max-width:640px){
	.dongsung .imgbox { margin:10px 20px 80px; }
	.dongsung .txtbox { height:200px; }
	.dongsung .txtbox h4 { font-size:var(--font32); }
	.dongsung .txtbox .btn { margin-top:10px; }
	.dongsung .txtbox .btn a { width:150px; height:45px; }
}

/* 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 { opacity:0; }
.dongsung .txtbox.subOn .btn { animation:ani_5 0.5s 0.4s; animation-fill-mode:both; }

#visual .txtCont {
  text-transform: uppercase;
}