@charset "utf-8";


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

.main { padding-bottom:150px; }
@media screen and (max-width:1024px){
	.main { padding-bottom:75px; }
}
@media screen and (max-width:640px){
	.main { padding-bottom:30px; }
}

#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 { transition:all 1.0s; 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:50%; left:0; transform:translateY(-50%); width:100%; padding:0 160px; z-index:15; }
#visual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { transform:scale(1.10); transition:all 5.0s; /* animation:bgs2-1 5.0s 0.1s; animation-fill-mode:both; */ }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1 !important; }
/*
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; opacity:0; top:-80px; left:150px; transition:all 1.8s 0.1s; 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 { position:relative; opacity:0; margin-top:40px; left:150px; transition:all 1.8s 0.8s; color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 { top:0; left:0; opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 { left:0; opacity:1; }
*/
#visual .swiper-container .swiper-slide .txtbox .txt-1 { position:relative; transition:all 1.8s 0.1s; 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 { position:relative; margin-top:40px; left:0; transition:all 1.8s 0.8s; color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 span,
#visual .swiper-container .swiper-slide .txtbox .txt-2 span { display:block; opacity:0; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 span { animation:ani_3 0.8s 0.6s; animation-fill-mode:both;  }
#visual .btn_pn { display:none }

#visual .swiper-container .control_box { position:absolute; left:160px; padding:0; bottom:100px; z-index:5; display:flex; align-items:center; gap:0 10px; }
#visual .swiper-container .control_box .swiper-btn { position:relative; left:unset; top:unset; right:unset; bottom:unset; display:flex; align-items:center; justify-content:center; width:21px; height:21px; margin:0; padding:0; }
#visual .swiper-container .control_box .box { position:relative; width:80px; display:flex; align-items:center; justify-content:center; gap:38px; }
#visual .swiper-container .control_box .box:before { content:""; display:block; width:3px; height:3px; border-radius:3px; background:rgba(255, 255, 255, 0.3); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } 
#visual .swiper-container .control_box .box .txt span { color:rgba(255, 255, 255, 0.3); font-size:var(--font16); font-weight:500; line-height:1.3; }
#visual .swiper-container .control_box .box .txt:first-child span { color:#fff; }


#visual .swiper-pagination { position:relative; bottom:0; top:0; display:none }
#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; }

#visual .scrolldown { position:absolute; right:160px; bottom:100px; z-index:30; text-align:center }
#visual .scrolldown .line { position:relative; width:25px; height:45px; display:block; margin:0 auto; border-radius:22px; border:2px solid #fff; }
#visual .scrolldown .line:before { content:""; display:block; width:5px; height:5px; border-radius:5px; background:#fff; position:absolute; top:8px; left:50%; transform:translateX(-50%); animation:scrollDown 2s infinite; }

@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 100px; }
	#visual .swiper-container .control_box { left:100px; }
	#visual .scrolldown { right:100px; }
}
@media screen and (max-width:1280px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 60px; }
	#visual .swiper-container .control_box { left:60px; bottom:80px; }
	#visual .scrolldown { right:60px; bottom:80px;}
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 40px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:20px; }
	#visual .swiper-container .control_box { left:40px; bottom:60px; }
	#visual .scrolldown { right:40px; bottom:60px; }
	#visual .scrolldown .line { border-width:1px; width:21px; height:37px; }
	#visual .scrolldown .line:before { width:3px; height:3px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container { height:100dvh; }
	#visual .swiper-container .swiper-slide .txtbox { padding:0 30px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:10px; }
	#visual .swiper-container .control_box { left:30px; bottom:40px; }
	#visual .scrolldown { right:30px; bottom:40px; }
}

@keyframes scrollDown {
    0% { top:6px; opacity:1; }
    10% { opacity:1; }
    65% { top:calc(100% - 8px); opacity:0; }
    100% { top:6px; opacity:1; }
}


.title-box { position:relative; }
.title-box h3 { color:#111; font-size:var(--font56); font-weight:500; line-height:1.3; }
.title-box h3 span { font-weight:500; }
.title-box .btn_more { position:absolute; right:0; bottom:0; }


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


.btn_more a { transition:all 0.4s; width:300px; height:63px; padding:0 40px; background:#f8f8f8; border-radius:100px; display:flex; align-items:center; justify-content:space-between; }
.btn_more a span { transition:all 0.5s; color:#ccc; font-size:var(--font16); font-weight:500; line-height:1.3; }
.btn_more a img { filter:none; }
.btn_more a:hover { padding:0 50px; background:var(--mainColor); }
.btn_more a:hover span { color:#fff; }
.btn_more a:hover img { filter:brightness(0) invert(1); }
@media screen and (max-width:1440px){
	.btn_more a { width:250px; height:55px; }
}
@media screen and (max-width:1280px){
	.btn_more a { width:220px; height:50px; padding:0 30px; }
	.btn_more a:hover { padding:0 40px; }
}
@media screen and (max-width:1024px){
	.btn_more a { width:160px; height:45px; padding:0 20px; border-width:1px; }
	.btn_more a:hover { padding:0 30px; }
}
@media screen and (max-width:760px){
	.btn_more a { width:150px; height:40px; }
}

.product .pcont { display:flex; }
.product .pcont .txtbox { width:43%; padding-top:60px; }
.product .pcont .txtbox dt { color:#111; font-size:var(--font56); font-weight:700; line-height:1.5; letter-spacing:-0.05em; }
.product .pcont .txtbox dd { margin-top:60px; color:#333; font-size:var(--font19); font-weight:300; line-height:1.7; letter-spacing:-0.025em; }
.product .pcont .txtbox .btn_more { margin-top:60px; }
.product .pcont .listbox { width:calc(100% - 43%); display:flex; gap:5px; }
.product .pcont .listbox .box { position:relative; width:calc((100% - 5px) / 2); }
.product .pcont .listbox .box .imgbox { position:relative; }
.product .pcont .listbox .box .imgbox figure { position:relative; overflow:hidden; }
.product .pcont .listbox .box .imgbox figure:before {content:""; display:block; padding-bottom:154%; }
.product .pcont .listbox .box .imgbox figure > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; transition:all 0.4s 0.1s; }
.product .pcont .listbox .box:nth-child(2) { margin-top:60px; }
.product .pcont .listbox .box .over { position:absolute; left:0; top:0; width:100%; height:100%; z-index:3; padding:40px; display:flex; gap:40px 0; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.product .pcont .listbox .box .over:before { transition:all 0.4s 0.1s; opacity:0; content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(127, 190, 38, 0.80); backdrop-filter:blur(7.5px); }
.product .pcont .listbox .box .over > * { position:relative; z-index:6; }
.product .pcont .listbox .box .over h4 { transition:all 0.4s; transform:translateY(calc(var(--product-height) + 80px + 20px)); color:#fff; font-size:var(--font36); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.product .pcont .listbox .box .over .txt { transition:all 0.4s; opacity:0; color:rgba(255, 255, 255, 0.8); font-size:var(--font19); font-weight:500; line-height:1.5; }
.product .pcont .listbox .box .over .btn { transition:all 0.4s; opacity:0; transform:translateY(30px); display:flex; align-items:center; gap:0 20px; }
.product .pcont .listbox .box .over .btn span { color:#fff; font-size:var(--font16); font-weight:500; line-height:1.3; }
.product .pcont.active .listbox .box a:hover .imgbox img { transform:scale(1.08); transition:all 0.4s 0.55s;}
.product .pcont.active .listbox .box a:hover .over:before { opacity:1; transition:all 0.4s 0.55s; }
.product .pcont.active .listbox .box a:hover .over h4 { transform:translateY(0); transition:all 0.5s 0.65s; }
.product .pcont.active .listbox .box a:hover .over .txt { opacity:1; transition:all 0.4s 0.55s; }
.product .pcont.active .listbox .box a:hover .over .btn { transform:translateY(0); opacity:1; transition:all 0.4s 0.65s; }
@media screen and (max-width:1440px){
	.product .pcont .txtbox { padding-top:50px; }
	.product .pcont .txtbox dd,
	.product .pcont .txtbox .btn_more,
	.product .pcont .listbox .box:nth-child(2) { margin-top:50px; }
	.product .pcont .listbox .box .over { padding:30px; gap:30px 0; }
	.product .pcont .listbox .box .over h4 { transform:translateY(calc(var(--product-height) + 60px + 20px)); }
}
@media screen and (max-width:1280px){
	.product .pcont .txtbox { padding-top:40px; }
	.product .pcont .txtbox dd,
	.product .pcont .txtbox .btn_more,
	.product .pcont .listbox .box:nth-child(2) { margin-top:40px; }
	.product .pcont .listbox .box .over { padding:20px; gap:20px 0; }
	.product .pcont .listbox .box .over h4 { transform:translateY(calc(var(--product-height) + 40px + 20px)); }
}
@media screen and (max-width:1024px){
	.product .pcont { flex-wrap:wrap; }
	.product .pcont .txtbox { padding-top:0; width:100%; }
	.product .pcont .txtbox br { display:none; }
	.product .pcont .txtbox span.m_br { display:block; }
	.product .pcont .txtbox dd,
	.product .pcont .txtbox .btn_more,
	.product .pcont .listbox .box:nth-child(2) { margin-top:30px; }
	.product .pcont .listbox { width:100%; margin-top:40px; flex-wrap:wrap; }
	.product .pcont .listbox .box { display:flex; gap:20px; width:100%; }
	.product .pcont .listbox .box a { display:block; width:100%; }
	.product .pcont .listbox .box .imgbox { display:flex; align-items:center; gap:20px; }
	.product .pcont .listbox .box figure { width:calc(45% - 20px) }
	.product .pcont .listbox .box .imgbox figure:before {padding-bottom:130%; }
	.product .pcont .listbox .box .over { position:relative; left:0; top:0; width:55%; gap:20px 0; }
	.product .pcont .listbox .box .over h4 { transform:translateY(0); color:#111; }
	.product .pcont .listbox .box .over .txt { color:#111; }
	.product .pcont .listbox .box .over .txt br { display:none; }
	.product .pcont .listbox .box .over .txt span.m_br { display:block; }
	.product .pcont .listbox .box .over .btn { transition:all 0.4s; width:160px; height:45px; padding:0 20px; border-radius:100px; background:#f8f8f8; display:flex; align-items:center; justify-content:space-between; }
	.product .pcont .listbox .box .over .btn span { transition:all 0.5s; color:#ccc; font-size:var(--font16); font-weight:500; line-height:1.3; }
	.product .pcont .listbox .box .over .btn img { filter:brightness(0) invert(0.85); }
	.product .pcont .listbox .box a:hover .over .btn { padding:0 30px; background:var(--mainColor); }
	.product .pcont .listbox .box a:hover .over .btn span { color:#fff; }
	.product .pcont .listbox .box a:hover .over .btn img { filter:brightness(0) invert(1); }
	.product .pcont .listbox .box a .over:before,
	.product .pcont.active .listbox .box a:hover .over:before { display:none }
	.product .pcont .listbox .box a .over h4,	
	.product .pcont.active .listbox .box a:hover .over h4 { transform:translateY(0); transition:none; }	
	.product .pcont .listbox .box a .over .txt,
	.product .pcont.active .listbox .box a:hover .over .txt { opacity:1; transition:none; }
	.product .pcont .listbox .box a .over .btn,
	.product .pcont.active .listbox .box a:hover .over .btn { transform:translateY(0); opacity:1; transition:all 0.4s;}
}
@media screen and (max-width:640px){
	.product .pcont .txtbox { padding-top:20px; }
	.product .pcont .txtbox dd,
	.product .pcont .txtbox .btn_more { margin-top:15px; }
	.product .pcont .listbox { margin-top:30px; }
	.product .pcont .listbox .box { gap:10px; }
	.product .pcont .listbox .box .imgbox { gap:10px; }
	.product .pcont .listbox .box figure { width:calc(45% - 10px); }
	.product .pcont .listbox .box .over { gap:10px 0; }
	.product .pcont .listbox .box .over .btn { width:150px; height:40px; }
}
@media screen and (max-width:500px){
	.product .pcont .listbox .box .imgbox { flex-direction:column; gap:20px; }
	.product .pcont .listbox .box figure { width:100%; }
	.product .pcont .listbox .box .imgbox figure:before {padding-bottom:110%; }
	.product .pcont .listbox .box .over { width:100%; padding:0; }
}

/* animation */
.product .pcont .txtbox { opacity:0; }
.product .pcont.subOn .txtbox { animation:ani_5 0.8s 0.5s; animation-fill-mode:both; }
/*
.product .pcont .listbox .box .imgbox:after { content:''; display:block; background:#fff; position:absolute; left:0; top:0; width:100%; height:100%; transition:all 0.8s 0.5s; }
.product .pcont.subOn .listbox .box .imgbox:after { height:0; }
*/
.product .pcont .listbox .box { opacity:0; }
.product .pcont.subOn .listbox .box { animation:ani_5 0.8s 0.3s; animation-fill-mode:both; }
.product .pcont.subOn .listbox .box:nth-child(2) { animation:ani_5 0.8s 0.6s; animation-fill-mode:both; }
.product .pcont .listbox .box .imgbox figure span { position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; }
.product .pcont .listbox .box .imgbox figure span:after,
.product .pcont .listbox .box .imgbox figure span:before { content:''; display:block; position:absolute; background:var(--mainColor); z-index:5; }
.product .pcont .listbox .box .imgbox figure span:nth-child(1):after { transition:all 0.2s 0.4s; left:0; top:0; width:0; height:5px; }
.product .pcont.active .listbox .box:hover .imgbox figure span:nth-child(1):after { width:100%; transition:all 0.2s; }
.product .pcont .listbox .box .imgbox figure span:nth-child(1):before { transition:all 0.2s 0.3s; right:0; top:0; width:5px; height:0; }
.product .pcont.active .listbox .box:hover .imgbox figure span:nth-child(1):before { height:100%; transition:all 0.2s 0.15s; }
.product .pcont .listbox .box .imgbox figure span:nth-child(2):after { transition:all 0.2s 0.15s;right:0; bottom:0; width:0; height:5px; }
.product .pcont.active .listbox .box:hover .imgbox figure span:nth-child(2):after { width:100%; transition:all 0.2s 0.3s; }
.product .pcont .listbox .box .imgbox figure span:nth-child(2):before { transition:all 0.2s; left:0; bottom:0; width:5px; height:0; }
.product .pcont.active .listbox .box:hover .imgbox figure span:nth-child(2):before { height:100%; transition:all 0.2s 0.50s; }
@media screen and (max-width:1024px){
	.product .pcont .listbox .box .imgbox figure span:nth-child(1):after,
	.product .pcont .listbox .box .imgbox figure span:nth-child(2):after { height:3px; }
	.product .pcont .listbox .box .imgbox figure span:nth-child(1):before,
	.product .pcont .listbox .box .imgbox figure span:nth-child(2):before { width:3px; }
}


.sustainability { position:relative; width:100%; padding:105px 0; background:url(/img/main/sustainability_bg.jpg) no-repeat center center / cover; overflow:hidden;  }
.sustainability .bg { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.sustainability .bg .sbg { transition:all 0.6s; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.sustainability .bg .bg1 { background-image:url(/img/main/sustainability_bg1.jpg); } 
.sustainability .bg .bg2 { background-image:url(/img/main/sustainability_bg2.jpg); } 
.sustainability .bg.over1 .bg1,
.sustainability .bg.over2 .bg2 { transition:all 0.8s; opacity:1; transform:scale(1.03); }
.sustainability .listbox { display:flex; }
.sustainability .listbox .list { width:46%; display:flex; justify-content:center; flex-direction:column; }
.sustainability .listbox .list .box { position:relative; width:50%; }
.sustainability .listbox .box:nth-child(2) { margin-left:50%;  }
.sustainability .listbox .box:before { content:''; display:block; padding-bottom:100%; }
.sustainability .listbox .box a { transition:all 0.4s; z-index:4; position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.sustainability .listbox .box .scont { transform:translateY(30px); transition:all 0.4s; }
.sustainability .listbox .box .scont dt { margin-top:40px; color:#fff; font-size:var(--font24); font-weight:500; line-height:1.3; }
.sustainability .listbox .box .scont dd { margin-top:10px; color:rgba(255, 255, 255, 0.3); font-size:var(--font18); font-weight:500; line-height:1.3; }
.sustainability .listbox .box .btn { margin-top:40px; display:flex; align-items:center; justify-content:center; gap:40px; opacity:0; transition:all 0.4s; }
.sustainability .listbox .box .btn span { color:#fff; font-size:var(--font16); font-weight:500; line-height:1.3; }
.sustainability .listbox .box a:hover { background:rgba(127, 190, 38, 0.90); backdrop-filter:blur(7.5px); }
.sustainability .listbox .box a:hover .scont { transform:translate(0);}
.sustainability .listbox .box a:hover .btn { gap:25px; opacity:1; }
.sustainability .listbox .list .box .over { display:none; }
.sustainability .listbox .txtbox { position:relative; padding:22% 0 0 13%; width:calc(100% - 46%); }
.sustainability .listbox .txtbox .scont { position:relative; }
.sustainability .listbox .txtbox .stxt { position:absolute; left:0; top:0; height:100%; padding-top:45px; opacity:0; transition:all 0.8s; }
.sustainability .listbox .txtbox .stxt dt { color:#fff; font-size:var(--font64); font-weight:700; line-height:1.5; letter-spacing:-0.05em; }
.sustainability .listbox .txtbox .stxt dd { margin-top:40px; color:#fff; font-size:var(--font23); font-weight:400; line-height:1.7; letter-spacing:-0.025em; }
.sustainability .listbox .txtbox .stxt.ftxt dt { font-size:var(--font56); }
.sustainability .listbox .txtbox .stxt.ftxt dd { font-size:var(--font19); }
.sustainability .listbox .txtbox .stxt.on { opacity:1; }
.sustainability .listbox .txtbox .stxt.ftxt.ov { opacity:1; }
@media screen and (max-width:1640px){
	.sustainability .listbox .txtbox { padding:22% 0 0 10%; }
}
@media screen and (max-width:1440px){
	.sustainability .listbox .txtbox { padding:22% 0 0 8%; }
}
@media screen and (max-width:1280px){
	.sustainability .listbox .box .scont dt { margin-top:30px; }
	.sustainability .listbox .box .btn { margin-top:30px; gap:30px; }
	.sustainability .listbox .txtbox { padding:22% 0 0 8%; }
	.sustainability .listbox .txtbox .stxt { padding-top:35px; }
	.sustainability .listbox .txtbox .stxt dd { margin-top:30px; }
}
@media screen and (max-width:1024px){
	.sustainability { padding:60px 0; }
	.sustainability .listbox .box .scont { transform:translateY(15px); }
	.sustainability .listbox .box .scont .icon img { width:40px; }
	.sustainability .listbox .box .scont dt { margin-top:20px; }
	.sustainability .listbox .box .scont dd { margin-top:5px; }
	.sustainability .listbox .box .btn { margin-top:20px; gap:20px; }
	.sustainability .listbox .txtbox { padding:22% 0 0 5%; }
	.sustainability .listbox .txtbox .stxt { padding-top:25px; }
	.sustainability .listbox .txtbox .stxt dd { margin-top:20px; }
	.sustainability .listbox .box a:hover .btn { gap:10px; }
}
@media screen and (max-width:860px){
	.sustainability .listbox { flex-wrap:wrap; flex-direction:column-reverse; }
	.sustainability .listbox .list { width:100%; margin-top:30px; }
	.sustainability .listbox .list .box .over { position:absolute; left:100%; top:0; height:100%; width:100%; padding:20px; display:flex; align-items:center; }
	.sustainability .listbox .list .box:nth-child(2n) .over { left:-100%; padding-left:0; }
	.sustainability .listbox .list .box .over dt { color:#fff; font-size:var(--font60); font-weight:700; line-height:1.5; letter-spacing:-0.05em; }
	.sustainability .listbox .list .box .over dd { margin-top:20px; color:#fff; font-size:var(--font22); font-weight:400; line-height:1.6; letter-spacing:-0.025em; }
	.sustainability .listbox .list .box .over dd br { display:none; }
	.sustainability .listbox .list .box .over dd span.m_br { display:block; }
	.sustainability .listbox .txtbox { padding:0; width:100%; }
	.sustainability .listbox .txtbox .stxt { display:none; position:relative; left:0; top:0; height:100%; padding-top:0; }
	.sustainability .listbox .txtbox .stxt.ftxt { display:block; opacity:1 !important; }
	.sustainability .listbox .txtbox .stxt dd br { display:none; }
	.sustainability .listbox .txtbox .stxt dd span.m_br { display:block; }
}
@media screen and (max-width:640px){
	.sustainability .listbox .list .box .over dt { font-size:var(--font50); }
	.sustainability .listbox .list .box .over dd {  margin-top:10px; font-size:var(--font20); }
	.sustainability .listbox .box .scont { transform:translateY(10px); }
	.sustainability .listbox .box .scont .icon img { width:30px; }
	.sustainability .listbox .box .scont dt { margin-top:10px; }
	.sustainability .listbox .box .scont dd { margin-top:3px; }
	.sustainability .listbox .box .btn { margin-top:10px; gap:15px; }
	.sustainability .listbox .txtbox .stxt dd { margin-top:10px; }
}
@media screen and (max-width:480px){
	.sustainability .listbox .box:before { padding-bottom:130%; }
}

/* animation */
.sustainability .listbox .box a { opacity:0; } 
.sustainability .listbox.subOn .box a { animation:ani_5 1.0s 0.2s; animation-fill-mode:both; }
.sustainability .listbox .box > span { position:absolute; left:0; top:0; width:100%; height:100%;}
.sustainability .listbox .box > span:after,
.sustainability .listbox .box > span:before { content:''; display:block; position:absolute; background:#fff; z-index:5; }
.sustainability .listbox .box > span:nth-child(1):after { transition:all 0.3s; left:0; top:0; width:0; height:1px; }
.sustainability .listbox.subOn .box > span:nth-child(1):after { width:100%; }
.sustainability .listbox .box > span:nth-child(1):before { transition:all 0.3s 0.25s; right:0; top:0; width:1px; height:0; }
.sustainability .listbox.subOn .box > span:nth-child(1):before { height:100%; }
.sustainability .listbox .box > span:nth-child(2):after { transition:all 0.3s 0.5s; right:0; bottom:0; width:0; height:1px; }
.sustainability .listbox.subOn .box > span:nth-child(2):after { width:100%; }
.sustainability .listbox .box > span:nth-child(2):before { transition:all 0.3s 0.75s; left:0; bottom:0; width:1px; height:0; }
.sustainability .listbox.subOn .box > span:nth-child(2):before { height:100%; }
.sustainability .listbox.subOn .box:hover > span:after,
.sustainability .listbox.subOn .box:hover > span:before { background:var(--mainColor); transition-delay:0s !important; }
.sustainability .listbox.subOn .box.on > span:after,
.sustainability .listbox.subOn .box.on > span:before,
.sustainability .listbox.subOn .box.off > span:after,
.sustainability .listbox.subOn .box.off > span:before { transition-delay:0s !important; }
.sustainability .listbox .txtbox dt,
.sustainability .listbox.subOn .txtbox dd { opacity:0; }
.sustainability .listbox.subOn .txtbox dt { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.sustainability .listbox.subOn .txtbox dd { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }


.news .listbox { position:relative; margin-top:55px; padding-bottom:40px; }
.news .listbox .swiper-container { position:relative; overflow:hidden; width:100%; }
.news .listbox .swiper-slide { position:relative; overflow:hidden; width:100%; }
.news .listbox .swiper-slide .imgbox { position:relative; overflow:hidden; }
.news .listbox .swiper-slide .imgbox:before {content:""; display:block; padding-bottom:64%; }
.news .listbox .swiper-slide .imgbox img { transition:all 0.3s; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.news .listbox .swiper-slide .txtbox { margin-top:35px; }
.news .listbox .swiper-slide .txtbox h4 { color:#111; font-size:var(--font22); font-weight:500; line-height:1.7; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.news .listbox .swiper-slide .txtbox 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-slide a:hover .txtbox h4 span { background-size:100% auto !important; }
.news .listbox .swiper-slide .txtbox .date { margin-top:20px; color:#888; font-size:var(--font16); font-weight:400; line-height:1.3; }
.news .listbox .swiper-slide a:hover .imgbox img { transform:translate(-50%, -50%) scale(1.10); }
/*
.news .listbox .swiper-slide a:hover .txtbox h4 span { text-decoration-line:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
*/
.news .listbox .swiper-pagination { position:absolute; bottom:0; display:flex; align-items:center; justify-content:center; gap:10px; }
.news .listbox .swiper-pagination .swiper-pagination-bullet { width:10px; height:10px; background:#ddd; border-radius:10px; opacity:1; margin:0; }
.news .listbox .swiper-pagination .swiper-pagination-bullet-active { background:var(--mainColor);}
@media screen and (max-width:1024px){
	.news .listbox { margin-top:25px; }
	.news .listbox .swiper-slide .txtbox { margin-top:20px; }
	.news .listbox .swiper-slide .txtbox .date { margin-top:10px; }
}
@media screen and (max-width:640px){
	.news { padding-top:20px; }
	.news .listbox { margin-top:15px; }
	.news .listbox .swiper-slide .txtbox { margin-top:10px; }
	.news .listbox .swiper-slide .txtbox .date { margin-top:5px; }
}