@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:120px; left:0; width:100%; padding:0 160px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { color:#fff; font-size:var(--font82); 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(--font32); 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:400; }
#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 { animation:ani_5 0.1s 0.1s 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 .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; }
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 100px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 80px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:10px; }
	#visual .swiper-pagination .swiper-pagination-bullet { width: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; }
}
@media screen and (max-width:860px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 24px; bottom:160px;  }
	#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:#111; font-size:var(--font52); font-weight:500; line-height:1.3; letter-spacing:-0.03em; }
.title-box h3 span { font-weight:600; }
.title-box .txt { margin-top:20px; color:#111; font-size:var(--font36); font-weight:300; line-height:1.4; letter-spacing:-0.04em; }
.title-box .txt strong { font-size:var(--font52); font-weight:500; letter-spacing:-0.05em; }
.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; }
@media screen and (max-width:1024px){
	.btn_more a { padding:0 25px; height:45px; gap:0 10px; }
}
@media screen and (max-width:640px){
	.btn_more a { padding:0 20px; height:35px; }
}


.about .title-box h3 { color:#111; font-size:var(--font20); font-weight:400; line-height:1.3; letter-spacing:-0.04em; }
.about .listbox { display:flex; gap:5px; } 
.about .listbox .box { transition:all 1.0s; position:relative; width:calc((100% - 10px) / 3); height:530px; overflow:hidden; }
.about .listbox .box::before { content: ""; display:block; transition:all 1.0s; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.about .listbox .box:nth-child(1)::before { background-image:url(/img/main/about_bg1.jpg); background-position:left center; }
.about .listbox .box:nth-child(2)::before { background-image:url(/img/main/about_bg3.jpg); }
.about .listbox .box:nth-child(3)::before { background-image:url(/img/main/about_bg2.jpg); background-position:right center; }
.about .listbox .box a { position:relative; display:block; width:100%; height:100%; }
.about .listbox .box .txtbox { position:absolute; bottom:40px; left:40px; transform:translateY(62px); transition:all 1.0s; }
.about .listbox .box .txtbox h4 { transition:all 0.8s; color:#fff; font-size:var(--font32); font-weight:600; line-height:1.3; letter-spacing:-0.055em; }
.about .listbox .box .txtbox .btn { margin-top:20px; }
.about .listbox .box .txtbox .btn a { color:#fff; font-size:var(--font21); font-weight:400; line-height:1.3; letter-spacing:-0.025em; display:flex; align-items:center; gap:15px; }
.about .listbox .box .txtbox .btn { opacity:0; transition:all 0.4s; }
.about .listbox.active .box.active .txtbox { transform:translateY(0); }
.about .listbox.active .box.active .txtbox h4 { font-size:var(--font52); }
.about .listbox.active .box.active .txtbox .btn { opacity:1; }
.about .listbox.active .box.active::before { transform:scale(1.10); }
.about .listbox.active .box.off { transition-delay:0.2s; width:calc((100% - 54% - 10px) / 2); }
.about .listbox.active .box.active { transition-delay:0s; width:54%; }
@media screen and (max-width:1280px){
	.about .listbox .box { height:480px; } 
	.about .listbox .box .txtbox { bottom:30px; left:30px; transform:translateY(58px); }
	.about .listbox .box .txtbox .btn { margin-top:15px; }
}
@media screen and (max-width:1024px){
	.about .listbox .box { height:360px; } 
	.about .listbox .box .txtbox { bottom:20px; left:20px; transform:translateY(54px); }
	.about .listbox .box .txtbox .btn { margin-top:10px; }
	.about .listbox .box .txtbox .btn a { gap:10px; }
	.about .listbox .box .txtbox .btn a img { height:10px; }
}
@media screen and (max-width:960px){
	.about .listbox .box { height:300px; } 
	.about .listbox .box .txtbox { transform:translateY(0); }
	.about .listbox.active .box.off,
	.about .listbox.active .box.active { transition-delay:0; width:calc((100% - 10px) / 3); }
	.about .listbox .box .txtbox h4 { font-size:var(--font52); }
	.about .listbox .box .txtbox .btn { opacity:1; }
}
@media screen and (max-width:640px){
	.about .listbox { flex-wrap:wrap; }
	.about .listbox .box { height:200px; width:100%; } 
	.about .listbox .box .txtbox { transform:translateY(0); }
	.about .listbox.active .box.off,
	.about .listbox.active .box.active { transition-delay:0; width:100%; }
	.about .listbox .box .txtbox h4 { font-size:var(--font52); }
	.about .listbox .box .txtbox .btn { opacity:1; }
	.about .listbox .box .txtbox .btn { margin-top:5px; }
	.about .listbox .box .txtbox .btn a { gap:5px; }
	.about .listbox .box .txtbox .btn a img { height:8px; }
}

/* animation */
.about .listbox .box { position:relative; }
.about .listbox .box:after { content:""; background:rgba(255, 255, 255, 1); position:absolute; top:0; left:0; bottom:0; transition:all 1.2s; width:100%; height:100%; }
.about .listbox.subOn .box:after { height:0; }
.about .listbox .box:nth-child(1):after { transition-delay:0.5s; }
.about .listbox .box:nth-child(2):after { transition-delay:0.55s; }
.about .listbox .box:nth-child(3):after { transition-delay:0.6s; }

.sustainability { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.sustainability .bg { position:absolute; left:0; top:0; width:100%; height:100%; }
.sustainability .bg:before { opacity:1; transition:all 0.8s 0.2s; content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%;  background-position:center center; background-repeat:no-repeat; background-size:cover; background-image:url(/img/main/sustainability_bg.jpg); }
.sustainability.off .bg:before { opacity:0; }
.sustainability .bg > div { transition:all 0.8s; opacity:0; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.sustainability.active .bg > div.active { opacity:1; }
.sustainability .bg > .over1 { background-image:url(/img/main/sustainability_bg1.jpg); }
.sustainability .bg > .over2 { background-image:url(/img/main/sustainability_bg2.jpg); }
.sustainability .bg > .over3 { background-image:url(/img/main/sustainability_bg3.jpg); }
.sustainability .txtbox { position:relative; z-index:2; text-align:center; }
.sustainability .txtbox h3 { color:#fff; font-size:var(--font20); font-weight:400; line-height:1.3; letter-spacing:-0.025em; }
.sustainability .txtbox p { margin-top:20px; color:#fff; font-size:var(--font52); font-weight:500; line-height:1.4; }
.sustainability .txtbox .btn { margin-top:80px; }
.sustainability .txtbox .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; }
.sustainability .txtbox .btn a span { display:flex; align-items:center; gap:10px; font-weight:400; }
.sustainability .txtbox .btn a .aniTxt { height:var(--font23); }
.sustainability .txtbox .btn a:hover { color:#fff; border-color:var(--mainColor); background:var(--mainColor); }
.sustainability .nav { position:absolute; left:0; bottom:0; width:100%; z-index:2; }
.sustainability .nav ul { display:flex; }
.sustainability .nav li { position:relative; width:calc(100% / 3); height:100px; border-top:1px solid rgba(255, 255, 255, 0.10); }
.sustainability .nav li:before {content:""; display:block; position:absolute; left:50%; top:-2px; transform:translate(-50%, 0); width:0; height:3px; background:#d9d9d9; transition:all 0.4s; } 
.sustainability .nav li a { height:100%; width:100%; display:flex; align-items:center; justify-content:center; }
.sustainability .nav li a span { transition:all 0.4s; color:rgba(255, 255, 255, 0.30); font-size:var(--font22); font-weight:600; line-height:1.3; letter-spacing:-0.025em; }
.sustainability.active .nav li.on a span { color:#fff; }
.sustainability.active .nav li.on:before { width:100%; }
@media screen and (max-width:1024px){
	.sustainability .nav li { height:80px; }
	.sustainability .txtbox .btn { margin-top:40px; }
	.sustainability .txtbox .btn a { width:200px; border-width:1px; height:55px; }
	.sustainability .txtbox .btn a span img { height:12px; }
}
@media screen and (max-width:640px){
	.sustainability { height:calc(100vh - 40px); }
	.sustainability .nav li { height:60px; }
	.sustainability .txtbox .btn { margin-top:20px; }
	.sustainability .txtbox .btn a { width:150px; height:45px; }
}

/* animation */
.sustainability { position:relative; }
.sustainability:after { content:""; background:rgba(255, 255, 255, 1); position:absolute; top:0; right:0; top:0; transition:all 1.2s 0.5s; width:100%; height:100%; }
.sustainability.subOn:after { width:0; }


.affiliates .a-box { display:flex; }
.affiliates .a-box .l-box { width:33%; }
.affiliates .a-box .r-box { width:calc(100% - 33%); }
.affiliates .a-box .l-box .txtbox { position:relative; margin-top:120px; }
.affiliates .a-box .l-box .txtbox dt h4 { color:var(--mainColor); font-size:var(--font36); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.affiliates .a-box .l-box .txtbox dt strong { display:block; margin-top:20px; color:#111; font-size:var(--font22); font-weight:600; line-height:1.3; }
.affiliates .a-box .l-box .txtbox dd { margin:40px 0; color:#333; font-size:var(--font20); font-weight:300; line-height:1.5; }
.affiliates .a-box .l-box .txtbox .btn a { color:#ccc; font-size:var(--font19); font-weight:500; line-height:1.3; display:flex; align-items:center; gap:0 15px; }
.affiliates .a-box .l-box .txtbox .box { transition:all 0.4s; opacity:0; position:absolute; left:0; top:0; visibility:hidden; z-index:-1; }
.affiliates .a-box .l-box .txtbox .box.on { opacity:1; z-index:2; visibility:visible; }
.affiliates .a-box .l-box .txtbox .fbox { transition:all 0.4s; opacity:1; z-index:2; visibility:visible; }
.affiliates .a-box .l-box .txtbox .fbox.off { opacity:0; z-index:-1; visibility:hidden; }
.affiliates .a-box .r-box .imgbox { display:flex; gap:10px; }
.affiliates .a-box .r-box .imgbox .i-box { cursor:pointer; position:relative; width:calc((100% - 20px) / 3); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) { height:620px; }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) { height:650px; margin-top:120px; }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) { height:820px; }
.affiliates .a-box .r-box .imgbox .i-box strong { position:relative; z-index:5; }
.affiliates .a-box .r-box .imgbox .i-box strong span { transition:all 0.4s; color:rgba(255, 255, 255, 0.6); font-size:var(--font32); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.affiliates .a-box .r-box .imgbox .i-box.on strong span { color:#fff; }
.affiliates .a-box .r-box .imgbox .i-box .sbg { position:absolute; left:1px; top:1px; width:calc(100% - 2px); height:calc(100% - 2px); background-position:center center; background-repeat:no-repeat; background-size:cover; }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) .sbg { background-image:url(/img/main/brand_01_1.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) .sbg { background-image:url(/img/main/brand_02_2.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) .sbg { background-image:url(/img/main/brand_03_3.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov1:nth-child(1) .sbg { background-image:url(/img/main/brand_01_1.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov1:nth-child(2) .sbg { background-image:url(/img/main/brand_01_2.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov1:nth-child(3) .sbg { background-image:url(/img/main/brand_01_3.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov2:nth-child(1) .sbg { background-image:url(/img/main/brand_02_1.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov2:nth-child(2) .sbg { background-image:url(/img/main/brand_02_2.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov2:nth-child(3) .sbg { background-image:url(/img/main/brand_02_3.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov3:nth-child(1) .sbg { background-image:url(/img/main/brand_03_1.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov3:nth-child(2) .sbg { background-image:url(/img/main/brand_03_2.png); }
.affiliates .a-box .r-box .imgbox .i-box.sov3:nth-child(3) .sbg { background-image:url(/img/main/brand_03_3.png); }
.affiliates .a-box .r-box .imgbox .i-box .bg { position:absolute; left:1px; top:1px; z-index:2; width:calc(100% - 2px); height:calc(100% - 2px); background-position:center center; background-repeat:no-repeat; background-size:cover; }
.affiliates .a-box .r-box .imgbox .i-box .bg > div { z-index:2; clip-path:inset(0 100% 0 0); transition:all 0.5s ease; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.affiliates .a-box .r-box .imgbox .i-box .bg .off  { z-index:3; }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) .bg .chk1 { background-image:url(/img/main/brand_01_1.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) .bg .chk1 { background-image:url(/img/main/brand_01_2.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) .bg .chk1 { background-image:url(/img/main/brand_01_3.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) .bg .chk2 { background-image:url(/img/main/brand_02_1.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) .bg .chk2 { background-image:url(/img/main/brand_02_2.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) .bg .chk2 { background-image:url(/img/main/brand_02_3.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) .bg .chk3 { background-image:url(/img/main/brand_03_1.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) .bg .chk3 { background-image:url(/img/main/brand_03_2.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) .bg .chk3 { background-image:url(/img/main/brand_03_3.png); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) .bg .chk2.off { clip-path:inset(0 0 0 100%); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) .bg .chk2.off { clip-path:inset(0 50% 0 50%); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) .bg .chk3.off { clip-path:inset(0 0 0 100%); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) .bg .chk3.off { clip-path:inset(0 0 0 100%); }
.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) .bg .chk3.off { clip-path:inset(0 0 0 100%); }
.affiliates.active .a-box .r-box .imgbox.over1 .i-box:nth-child(1) .bg .chk1 { }
.affiliates.active .a-box .r-box .imgbox.over1 .i-box:nth-child(2) .bg .chk1 { transition-delay:0.25s; }
.affiliates.active .a-box .r-box .imgbox.over1 .i-box:nth-child(3) .bg .chk1 { transition-delay:0.5s; }
.affiliates.active .a-box .r-box .imgbox.over2 .i-box:nth-child(1) .bg .chk2 { transition-delay:0.3s; }
.affiliates.active .a-box .r-box .imgbox.over2 .i-box:nth-child(2) .bg .chk2 { transition:all 0.6s ease; }
.affiliates.active .a-box .r-box .imgbox.over2 .i-box:nth-child(3) .bg .chk2 { transition-delay:0.3s; }
.affiliates.active .a-box .r-box .imgbox.over3 .i-box:nth-child(1) .bg .chk3 { transition-delay:0.5s; }
.affiliates.active .a-box .r-box .imgbox.over3 .i-box:nth-child(2) .bg .chk3 { transition-delay:0.25s; }
.affiliates.active .a-box .r-box .imgbox.over3 .i-box:nth-child(3) .bg .chk3 { }
.affiliates.active .a-box .r-box .imgbox .i-box .bg .active { clip-path:inset(0 0 0 0); z-index:4; } 
@media screen and (max-width:1440px){
	.affiliates .a-box .l-box .txtbox { margin-top:100px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) { height:580px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) { height:610px; margin-top:100px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) { height:780px; }
}
@media screen and (max-width:1280px){
	.affiliates .a-box .l-box { padding-right:40px; }
	.affiliates .a-box .l-box .txtbox { margin-top:80px; }
	.affiliates .a-box .l-box .txtbox dd { margin:30px 0; }
	.affiliates .a-box .l-box .txtbox dd br { display:none }
	.affiliates .a-box .l-box .txtbox dd span.m_br { display:block }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) { height:480px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) { height:510px; margin-top:60px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) { height:620px; }
}
@media screen and (max-width:1024px){
	.affiliates .a-box .l-box .txtbox { margin-top:60px; }
	.affiliates .a-box .l-box .txtbox dt strong { margin-top:10px; }
	.affiliates .a-box .l-box .txtbox dd { margin:20px 0; }
	.affiliates .a-box .l-box .txtbox .btn a { gap:0 10px; }
	.affiliates .a-box .l-box .txtbox .btn a img { height:10px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) { height:400px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) { height:430px; margin-top:50px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) { height:520px; }
}
@media screen and (max-width:960px){
	.affiliates .a-box { position:relative; flex-direction:column-reverse; padding-top:80px; }
	.affiliates .a-box .title-box { position:absolute; top:0; left:20px; }
	.affiliates .a-box .l-box,
	.affiliates .a-box .r-box { width:100%; }
	.affiliates .a-box .l-box .txtbox { margin-top:-50px; min-height:200px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) { height:350px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) { height:380px; margin-top:40px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) { height:480px; }
}
@media screen and (max-width:640px){
	.affiliates .a-box { padding-top:60px; }
	.affiliates .a-box .l-box .txtbox { margin-top:-50px; min-height:200px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(1) { height:280px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(2) { height:310px; margin-top:20px; }
	.affiliates .a-box .r-box .imgbox .i-box:nth-child(3) { height:360px; }
}

/* animation */
.affiliates .a-box .l-box .txtbox { transform:translateY(50px); opacity:0; }
.affiliates .a-box .l-box .txtbox.subOn { transform:translate(0); opacity:1; transition:all 1.0s 0.8s; }
.affiliates .a-box .r-box .imgbox .i-box strong { transform:translateY(20px); }
.affiliates .a-box .r-box .imgbox.subOn .i-box strong { transform:translate(0); transition:all 0.8s 0.8s; }
.affiliates .a-box .r-box .imgbox .i-box { position:relative; }
.affiliates .a-box .r-box .imgbox .i-box:after { content:""; background:rgba(255, 255, 255, 1); position:absolute; top:0; left:0; bottom:0; transition:all 1.2s 0.5s; width:100%; height:100%; }
.affiliates .a-box .r-box .imgbox.subOn .i-box:after { height:0; }


.news .listbox { position:relative; margin-top:80px; padding-bottom:82px; }
.news .listbox .swiper-container { position:relative; width:100%; overflow:hidden; }
.news .listbox .swiper-container .swiper-slide { position:relative; width:calc(25% - 20px); max-width:385px; }
.news .listbox .swiper-container .swiper-slide a { display:block; width:100%; height:100%; }
.news .listbox .swiper-container .swiper-slide .imgbox { position:relative; overflow:hidden; margin-top:30px; transition:all 0.5s; }
.news .listbox .swiper-container .swiper-slide .imgbox:before { content:''; display:block; padding-bottom:73%; }
.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 .info { display:flex; align-items:center; gap:5px; }
.news .listbox .swiper-container .swiper-slide .info .type { height:28px; padding:0 20px; color:#fff; font-size:var(--font14); font-weight:600; line-height:1.0; display:inline-flex; align-items:center; justify-content:center; background:var(--mainColor); border-radius:30px; }
.news .listbox .swiper-container .swiper-slide .info .date { height:28px; padding:0 20px; color:#ccc; font-size:var(--font14); font-weight:600; line-height:1.0; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e5e5; border-radius:30px; }
.news .listbox .swiper-container .swiper-slide h4 { min-height:62px; transition:all 0.3s; position:relative; z-index:2; margin-top:30px; color:#111; font-size:var(--font22); font-weight:500; line-height:1.4; 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 h4 span { display:inline; background:linear-gradient(to top, #111 0 2px, transparent 2px 100%) no-repeat left center; background-size:0 auto !important; line-height:inherit; word-break:inherit; transition:background-size 0.5s; }
.news .listbox .swiper-container .swiper-slide a:hover h4 span { background-size:100% auto !important; }
.news .listbox .swiper-container .swiper-slide a:hover .imgbox { border-radius:var(--borderR40); }
.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:40px; padding-bottom:40px; }
	.news .listbox .swiper-container .swiper-slide .imgbox { margin-top:15px; }
	.news .listbox .swiper-container .swiper-slide h4 { min-height:48px; margin-top:15px; }
	.news .listbox .swiper-container .swiper-slide .info { gap:3px; }
}
@media screen and (max-width:640px){
	.news .listbox { margin-top:20px; }
	.news .listbox .swiper-container .swiper-slide { width:100%; max-width:100%; }
	.news .listbox .swiper-container .swiper-slide h4 { margin-top:10px; min-height:45px; }
}

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


.dongsung .imgbox { background:url(/img/main/dongsung_bg.jpg) no-repeat center center / cover; }
.dongsung .txtbox { padding:180px 0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.dongsung .txtbox h4 { color:#fff; font-size:var(--font36); font-weight:600; line-height:1.43; letter-spacing:-0.045em; }
.dongsung .txtbox h4 span { display:block; font-weight:600; }
.dongsung .txtbox h4 strong { display:block; font-size:var(--font52); 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 #fff; 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:400; }
.dongsung .txtbox .btn a .aniTxt { height:var(--font23); }
.dongsung .txtbox .btn a:hover { color:#fff; border-color:var(--mainColor); background:var(--mainColor); }
@media screen and (max-width:1280px){
	.dongsung .txtbox { padding:140px 0; }
}
@media screen and (max-width:1024px){
	.dongsung .txtbox { padding:100px 0; }
	.dongsung .txtbox .txt { margin-top:15px; }
	.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 .txtbox { padding:60px 0; }
	.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 h4 strong { opacity:0; display:block }
.dongsung .txtbox.subOn h4 strong { animation:ani_3 0.5s 0.2s; 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; }