@charset "utf-8";

@media screen and (max-width:1500px){
	.sustainability-box .box-txt > dl > dd > .txt-1 br { display:none }
	.sustainability-box .box-txt > dl > dd > .txt-1 span.m_br { display:block }
	.sustainability-box .box-txt > dl > dd > .txt-2 br { display:none }
	.sustainability-box .box-txt > dl > dd > .txt-2 span.m_br { display:block }
}


.sustainability-box .sus-cont1 .txt1 { height:110px; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; background:linear-gradient(121deg, #6622d4 29.77%, #401585 92.53%);}
.sustainability-box .sus-cont1 .txt1 h5 { color:#fff; font-size:var(--font26); font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.sustainability-box .sus-cont1 .txt1 span { color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; letter-spacing:-0.02em; }
.sustainability-box .sus-cont1 .list { margin-top:20px; display:flex; gap:20px; padding-bottom:80px; background:url(/img/sub/sustainability/sustainability_bg1.png) center bottom no-repeat; background-size:100% auto; }
.sustainability-box .sus-cont1 .list .box { height:103px; width:calc((100% - 40px) / 3); text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; background:#fff; box-shadow:0 0 10px 0 rgba(109, 36, 227, 0.10); }
.sustainability-box .sus-cont1 .list .box strong { color:#333; font-size:var(--font24); font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.sustainability-box .sus-cont1 .list .box span { color:var(--mainColor); font-size:var(--font17); font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.sustainability-box .sus-cont2 .txtbox { border:1px solid #eee; padding:30px 20px; text-align:center; display:flex; align-items:center; flex-direction:column; gap:10px; background:url(/img/sub/sustainability/sustainability_bg2.png) left top repeat; }
.sustainability-box .sus-cont2 .txtbox strong { color:var(--mainColor); font-size:var(--font26); font-weight:600; line-height:1.3; letter-spacing:-0.035em; }
.sustainability-box .sus-cont2 .txtbox span { color:#333; font-size:var(--font19); font-weight:500; line-height:1.3;  letter-spacing:-0.02em; }
.sustainability-box .sus-cont3 .listbox { display:flex; flex-wrap:wrap; gap:10px; }
.sustainability-box .sus-cont3 .listbox .box { width:calc((100% - 20px) / 3); background:#f8f8f8; }
.sustainability-box .sus-cont3 .listbox .box dt { height:87px; display:flex; gap:5px; align-items:center; justify-content:center; flex-direction:column; background:linear-gradient(148deg, #38bea9 -21.63%, #401585 80.78%);}
.sustainability-box .sus-cont3 .listbox .box dt strong { color:#fff; font-size:var(--font22); font-weight:500; line-height:1.3; }
.sustainability-box .sus-cont3 .listbox .box dt span { color:rgba(255, 255, 255, 0.80); font-size:var(--font18); font-weight:500; line-height:1.3; }
.sustainability-box .sus-cont3 .listbox .box dd { padding:20px 10px; display:flex; flex-direction:column; align-items:center; }
.sustainability-box .sus-cont3 .listbox .box dd ul { display:flex; flex-direction:column; gap:10px; }
.sustainability-box .sus-cont3 .listbox .box dd li { position:relative; padding-left:13px; color:#555; font-size:var(--font18); font-weight:300; line-height:1.3; }
.sustainability-box .sus-cont3 .listbox .box dd li:before { content:''; display:block; position:absolute; left:0; top:10px; width:3px; height:3px; border-radius:4px; background:#555; }
.sustainability-box .sus-cont4 .listbox { margin-top:80px; display:flex; flex-wrap:wrap; gap:10px; }
.sustainability-box .sus-cont4 .listbox .box { width:calc((100% - 40px) / 5); padding:20px; background:#f8f8f8; text-align:center; }
.sustainability-box .sus-cont4 .listbox .box dt { margin-top:40px; color:#333; font-size:var(--font20); font-weight:600; line-height:1.5; letter-spacing:0; }
.sustainability-box .sus-cont4 .listbox .box dd { margin-top:15px; color:#555; font-size:var(--font18); font-weight:300; line-height:1.6; padding-bottom:40px; letter-spacing:0; }
@media screen and (max-width:1440px){
	.sustainability-box .sus-cont1 .txt1 { height:100px; } 
	.sustainability-box .sus-cont1 .list { gap:15px; }
	.sustainability-box .sus-cont1 .list .box { height:100px; width:calc((100% - 30px) / 3); }
	.sustainability-box .sus-cont3 .listbox .box dt { height:80px; }
	.sustainability-box .sus-cont4 .listbox .box dd br { display:none }
}
@media screen and (max-width:1280px){
	.sustainability-box .sus-cont4 .listbox .box { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width:1024px){
	.sustainability-box .box-txt.down > dl > dd { margin-top:20px; }
	.sustainability-box .sus-cont1 .txt1 { height:80px; gap:5px; } 
	.sustainability-box .sus-cont1 .list { margin-top:10px; gap:10px; padding-bottom:50px; }
	.sustainability-box .sus-cont1 .list .box { height:80px; }
	.sustainability-box .sus-cont2 .txtbox { padding:20px; gap:5px; }
	.sustainability-box .sus-cont3 .listbox .box dt { height:60px; gap:3px; }
	.sustainability-box .sus-cont3 .listbox .box dd { padding:15px 10px; }
	.sustainability-box .sus-cont3 .listbox .box dd ul { gap:5px; }
	.sustainability-box .sus-cont3 .listbox .box dd li { padding-left:10px; }
	.sustainability-box .sus-cont3 .listbox .box dd li:before { top:8px; width:2px; height:2px; }
	.sustainability-box .sus-cont4 .listbox { margin-top:40px; gap:5px; }
	.sustainability-box .sus-cont4 .listbox .box { width:calc((100% - 10px) / 3); }
	.sustainability-box .sus-cont4 .listbox .box figure img { width:80px; }
	.sustainability-box .sus-cont4 .listbox .box dt { margin-top:20px; }
	.sustainability-box .sus-cont4 .listbox .box dd { margin-top:8px; padding-bottom:20px; }
}
@media screen and (max-width:640px){
	.sustainability-box .box-txt.down > dl > dd { margin-top:10px; }
	.sustainability-box .sus-cont1 .txt1 { height:60px; gap:3px; } 
	.sustainability-box .sus-cont1 .list { flex-wrap:wrap; margin-top:5px; gap:5px; padding-bottom:30px; }
	.sustainability-box .sus-cont1 .list .box { height:60px; width:100%; }
	.sustainability-box .sus-cont3 .listbox { flex-wrap:wrap; }
	.sustainability-box .sus-cont3 .listbox .box { width:100%; }
	.sustainability-box .sus-cont3 .listbox .box dt { height:50px; }
	.sustainability-box .sus-cont3 .listbox .box dd { padding:10px; }
	.sustainability-box .sus-cont3 .listbox .box dd ul { gap:5px; }
	.sustainability-box .sus-cont3 .listbox .box dd li { padding-left:10px; }
	.sustainability-box .sus-cont3 .listbox .box dd li:before { top:8px; width:2px; height:2px; }
	.sustainability-box .sus-cont4 .listbox { margin-top:20px; gap:5px; }
	.sustainability-box .sus-cont4 .listbox .box { width:calc((100% - 5px) / 2); padding:15px; }
	.sustainability-box .sus-cont4 .listbox .box figure img { width:60px; }
	.sustainability-box .sus-cont4 .listbox .box dt { margin-top:10px; }
	.sustainability-box .sus-cont4 .listbox .box dd { margin-top:5px; padding-bottom:10px; }
}

/* animation 
.sustainability-box .box-txt.down > dl > dd { opacity:1; }
.sustainability-box .box-txt.subOn.down > dl > dd { animation:none; }
.sustainability-box .box-txt .sus-cont1,
.sustainability-box .box-txt .sus-cont2,
.sustainability-box .box-txt .sus-cont3 { opacity:0; }
.sustainability-box .box-txt.subOn .sus-cont1,
.sustainability-box .box-txt.subOn .sus-cont2,
.sustainability-box .box-txt.subOn .sus-cont3 { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
*/

.sustainability-box .overlist { border-top:2px solid #000; }
.sustainability-box .overlist > ul > li { border-bottom:1px solid #ddd; }
.sustainability-box .overlist > ul > li .box { padding:60px 0; display:flex; align-items:center; gap:0 100px; }
.sustainability-box .overlist > ul > li .box figure { flex-shrink:0; }
.sustainability-box .overlist > ul > li .box > dl > dt { color:#111; font-size:var(--font30); font-weight:600; line-height:1.3; }
.sustainability-box .overlist > ul > li .box > dl > dd { margin-top:20px; color:#555; font-size:var(--font20); font-weight:300; line-height:1.3; }
.sustainability-box .overlist > ul > li .over { display:none; overflow:hidden; }
.sustainability-box .overlist > ul > li .boxCont { margin-bottom:60px; background:#f8f8f8; padding:40px; }
.sustainability-box .overlist > ul > li .boxCont > p { color:#555; font-size:var(--font20); font-weight:300; line-height:1.3; letter-spacing:-0.03em; margin-bottom:30px; }
.sustainability-box .overlist > ul > li .boxCont .sCont { display:flex; gap:20px; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox { width:100%; padding:40px; border:1px solid #eee; background:#fff; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox h5 { color:#333; font-size:var(--font20); font-weight:600; line-height:1.3; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox ul { margin-top:25px; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox li:not(:last-child) { margin-bottom:15px; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox li { display:flex; color:#555; font-size:var(--font18); font-weight:300; line-height:1.3; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox li span { flex-shrink:0; font-weight:400; width:120px; display:block; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox.center { text-align:center; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox dt { color:#333; font-size:var(--font22); font-weight:600; line-height:1.3; }
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox dd { margin-top:20px; color:#555; font-size:var(--font18); font-weight:300; line-height:1.6; } 
.sustainability-box .overlist > ul > li .boxCont .sCont .sbox .txt { margin-top:25px; color:#333; font-size:var(--font18); font-weight:300; line-height:1.5; }
.sustainability-box .ethics-box .overlist > ul > li .boxCont { background:none; padding:0; }
.sustainability-box .ethics-box .overlist > ul > li .boxCont .sCont { flex-wrap:wrap; }
.sustainability-box .ethics-box .overlist > ul > li .boxCont .sCont .sbox { width:calc((100% - 40px) / 3); }
@media screen and (max-width:1440px){
	.sustainability-box .overlist > ul > li .box { padding:40px 0; gap:0 80px; }
	.sustainability-box .overlist > ul > li .boxCont { padding:30px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox li span { width:100px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont { gap:10px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox { padding:30px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox .txt br { display:none }
	.sustainability-box .ethics-box .overlist > ul > li .boxCont .sCont .sbox { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width:1024px){
	.sustainability-box .overlist > ul > li .box { padding:30px 0; gap:0 50px; }
	.sustainability-box .overlist > ul > li .box figure img { width:80px; }
	.sustainability-box .overlist > ul > li .box > dl > dd { margin-top:10px; }
	.sustainability-box .overlist > ul > li .over { display:block !important; }
	.sustainability-box .overlist > ul > li .boxCont > p { margin-bottom:15px; }
	.sustainability-box .overlist > ul > li .boxCont { margin-bottom:30px; padding:20px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox { padding:20px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox ul { margin-top:13px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox li:not(:last-child) { margin-bottom:8px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox dd { margin-top:10px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox .txt { margin-top:12px; }
	.sustainability-box .ethics-box .overlist > ul > li .boxCont .sCont .sbox { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
	.sustainability-box .overlist > ul > li .box { padding:20px 0; gap:0 25px; }
	.sustainability-box .overlist > ul > li .box figure img { width:60px; }
	.sustainability-box .overlist > ul > li .box > dl > dd { margin-top:5px; }
	.sustainability-box .overlist > ul > li .boxCont { margin-bottom:20px; }
	.sustainability-box .overlist > ul > li .boxCont > p { margin-bottom:8px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont { gap:5px; flex-wrap:wrap; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox { width:100%; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox ul { margin-top:10px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox li:not(:last-child) { margin-bottom:5px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox dd { margin-top:5px; }
	.sustainability-box .overlist > ul > li .boxCont .sCont .sbox .txt { margin-top:6px; }
	.sustainability-box .ethics-box .overlist > ul > li .boxCont .sCont .sbox { width:100%; }
}

.sustainability-box .ethics-box .tab ul { display:flex; flex-wrap:wrap; gap:10px; }
.sustainability-box .ethics-box .tab ul li { width:calc((100% - (10px * (var(--tab-count) - 1))) / var(--tab-count)); }
.sustainability-box .ethics-box .tab ul li a { transition:all 0.4s; color:#999; font-size:var(--font20); font-weight:500; line-height:1.3; display:flex; align-items:center; justify-content:center; height:60px; border-radius:70px; border:1px solid #bbb; }
.sustainability-box .ethics-box .tab ul li.on a { color:#fff; border-color:var(--mainColor); background:var(--mainColor); }
@media screen and (max-width:1280px){
	.sustainability-box .ethics-box .tab ul li { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width:960px){
	.sustainability-box .ethics-box .tab ul { gap:5px; }
	.sustainability-box .ethics-box .tab ul li { width:calc((100% - (5px * (var(--tab-count) - 1))) / var(--tab-count)); }
	.sustainability-box .ethics-box .tab ul li a { height:55px; }
}
@media screen and (max-width:960px){
	.sustainability-box .ethics-box .tab ul li { width:calc((100% - 10px) / 3); }
	.sustainability-box .ethics-box .tab ul li a { height:45px; }
}

.sustainability-box .ethics-box .system-box { text-align:center; }
.sustainability-box .ethics-box .system-box img { max-width:100%; }
.sustainability-box .ethics-box .cont1 { border-top:2px solid #000; }
.sustainability-box .ethics-box .cont1 > dl { display:flex; flex-wrap:wrap; }
.sustainability-box .ethics-box .cont1 > dl > dt { width:410px; padding-top:5px; padding-top:60px; }
.sustainability-box .ethics-box .cont1 > dl > dt > h4 { color:#000; font-size:var(--font42); font-weight:600; line-height:1.3; letter-spacing:-0.035em; }
.sustainability-box .ethics-box .cont1 > dl > dd { width:calc(100% - 410px); } 
.sustainability-box .ethics-box .cont1 > dl > dd .overlist { border-top:none; }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn { margin-top:40px; }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a { transition:all 0.4s; position:relative; width:240px; height:60px; gap:10px; display:flex; align-items:center; justify-content:center; border:1px solid #333; overflow:hidden; }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a span { transition:all 0.4s; position:relative; z-index:3; color:#333; font-size:var(--font20); font-weight:600; line-height:1.3; }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a img { transition:all 0.4s; }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a:hover { border-color:var(--mainColor); }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a:hover span { color:#fff;  }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a:before { transition:all 0.6s; content:''; display:block; opacity:0.4; background:var(--mainColor); width:0; height:0; border-radius:100%;  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a:hover:before { transition:all 0.8s; width:500px; height:500px; opacity:1; } 
.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a:hover img { filter:brightness(0) invert(1); }
.sustainability-box .ethics-box .cont1 > dl > dd .b_list { margin-top:25px; }
.sustainability-box .ethics-box .cont1 > dl > dd .b_list li:not(:last-child) { margin-bottom:10px; }
.sustainability-box .ethics-box .cont1 > dl > dd .b_list li { color:#999; font-size:var(--font17); font-weight:400; line-height:1.3; }
.sustainability-box .ethics-box .cont2 .imgbox { width:100%; position:relative; overflow:hidden; background:#f8f8f8; }
.sustainability-box .ethics-box .cont2 .imgbox:before {content:""; display:block; padding-bottom:25%; }
.sustainability-box .ethics-box .cont2 .imgbox img { position:absolute; left:1px; top:1px; width:calc(100% - 2px); height:calc(100% - 2px); object-fit:cover; -o-object-fit:cover; }
.sustainability-box .ethics-box .cont3 .btn { margin-top:40px; display:flex; gap:30px; }
.sustainability-box .ethics-box .cont3 .btn a { transition:all 0.4s; position:relative; width:100%; height:80px; padding:0 10px; text-align:center; gap:10px; display:flex; align-items:center; justify-content:center; border:1px solid #333; overflow:hidden; }
.sustainability-box .ethics-box .cont3 .btn a span { transition:all 0.4s; position:relative; z-index:3; color:#333; font-size:var(--font20); font-weight:600; line-height:1.3; }
.sustainability-box .ethics-box .cont3 .btn a img { transition:all 0.4s; }
.sustainability-box .ethics-box .cont3 .btn a:hover { border-color:var(--mainColor); }
.sustainability-box .ethics-box .cont3 .btn a:nth-child(2):hover { border-color:var(--mainColor1); }
.sustainability-box .ethics-box .cont3 .btn a:hover span { color:#fff;  }
.sustainability-box .ethics-box .cont3 .btn a:before { transition:all 0.6s; content:''; display:block; opacity:0.4; background:var(--mainColor); width:0; height:0; border-radius:100%;  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.sustainability-box .ethics-box .cont3 .btn a:nth-child(2):before { background:var(--mainColor1); }
.sustainability-box .ethics-box .cont3 .btn a:hover:before { transition:all 0.8s; width:700px; height:700px; opacity:1; } 
.sustainability-box .ethics-box .cont3 .btn a:hover img { filter:brightness(0) invert(1); }
@media screen and (max-width:1440px){
	.sustainability-box .ethics-box .cont1 > dl > dt { width:360px; padding-top:40px; }
	.sustainability-box .ethics-box .cont1 > dl > dd { width:calc(100% - 360px); }
	.sustainability-box .ethics-box .cont1 > dl > dd .listbox ul li { padding:40px; }
}
@media screen and (max-width:1280px){
	.sustainability-box .ethics-box .cont1 > dl > dt { width:300px; }
	.sustainability-box .ethics-box .cont1 > dl > dd { width:calc(100% - 300px); }
}
@media screen and (max-width:1024px){
	.sustainability-box .ethics-box .cont1 > dl > dt { width:260px; padding-top:30px; }
	.sustainability-box .ethics-box .cont1 > dl > dd { width:calc(100% - 260px); }
	.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn { margin-top:20px; }
	.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a { width:200px; height:55px; }
	.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a img { width:13px; }
	.sustainability-box .ethics-box .cont2 .imgbox:before { padding-bottom:35%; }
	.sustainability-box .ethics-box .cont3 .btn { margin-top:20px; gap:20px; }
	.sustainability-box .ethics-box .cont3 .btn a { height:65px; }
}
@media screen and (max-width:960px){
	.sustainability-box .ethics-box .cont1 > dl > dt { width:100%; padding-top:30px; }
	.sustainability-box .ethics-box .cont1 > dl > dd { width:100%; margin-top:20px; border-top:1px solid #ddd; }
}
@media screen and (max-width:640px){
	.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn { margin-top:10px; }
	.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a { width:160px; height:45px; }
	.sustainability-box .ethics-box .cont1 > dl > dd .overlist .btn a img { width:10px; }
	.sustainability-box .ethics-box .cont2 .imgbox:before { padding-bottom:40%; }
	.sustainability-box .ethics-box .cont3 .btn { margin-top:10px; gap:10px; }
	.sustainability-box .ethics-box .cont3 .btn a { height:50px; }
}

/* animation 
.sustainability-box .ethics-box .system-box { opacity:0; }
.sustainability-box .ethics-box .system-box.subOn { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.sustainability-box .ethics-box .cont1 > dl > dt { overflow:hidden }
.sustainability-box .ethics-box .cont1 > dl > dt h4 { opacity:0; }
.sustainability-box .ethics-box .cont1 > dl.subOn > dt h4 { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
.sustainability-box .ethics-box .cont1 > dl > dd { opacity:0; }
.sustainability-box .ethics-box .cont1 > dl.subOn > dd { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
.sustainability-box .ethics-box .cont2 .imgbox:after { content:''; display:block; background:#fff; position:absolute; right:0; top:0; width:100%; height:100%; transition:all 1.0s 0.3s; }
.sustainability-box .ethics-box .cont2 .imgbox.subOn:after { width:0; }
@media screen and (max-width:960px){
	.sustainability-box .ethics-box .cont1 > dl.subOn > dt h4 { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }
	.sustainability-box .ethics-box .cont1 > dl.subOn> dd { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
}
*/

.sustainability-box .guide-box .cont1 .imgbox { width:100%; position:relative; overflow:hidden; background:#f8f8f8; }
.sustainability-box .guide-box .cont1 .imgbox:before {content:""; display:block; padding-bottom:25%; }
.sustainability-box .guide-box .cont1 .imgbox img { position:absolute; left:1px; top:1px; width:calc(100% - 2px); height:calc(100% - 2px); object-fit:cover; -o-object-fit:cover; }
.sustainability-box .guide-box .cont2 .listbox { display:flex; gap:10px; }
.sustainability-box .guide-box .cont2 .listbox .box { padding:30px; text-align:center; width:calc((100% - 40px) / 5); background:#f8f8f8; }
.sustainability-box .guide-box .cont2 .listbox .box .txt { margin-top:40px; color:#333; font-size:var(--font20); font-weight:600; line-height:1.5; }
.sustainability-box .guide-box .process { display:flex; gap:0; padding:0; }
.sustainability-box .guide-box .process .box { position:relative; width:calc(100% / 4);  }
.sustainability-box .guide-box .process .box .icon { padding:0 40px; }
.sustainability-box .guide-box .process .box .i-img { position:relative; width:100%;}
.sustainability-box .guide-box .process .box .i-img:before {content:""; display:block; padding-bottom:100%; }
.sustainability-box .guide-box .process .box .i-img figure { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:500px; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; }
.sustainability-box .guide-box .process .box .i-img figure:after {content:""; display:block; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); width:9px; height:9px; border-radius:9px; }
.sustainability-box .guide-box .process .box .i-img figure:before {content:""; display:block; position:absolute; left:50%; bottom:-40px; transform:translateX(-50%); width:1px; height:40px; background:#ddd; }
.sustainability-box .guide-box .process .box .txt { position:relative; margin-top:40px; width:100%; height:80px; text-align:center; display:flex; align-items:center; justify-content:center; border-radius:80px; }
.sustainability-box .guide-box .process .box .txt strong { color:#fff; font-size:var(--font20); font-weight:600; line-height:1.3; }
.sustainability-box .guide-box .process .box .txt .arr { position:absolute; top:0; right:-40px; width:80px; height:80px; border-radius:80px; display:flex; align-items:center; justify-content:center; z-index:2; }
.sustainability-box .guide-box .process .box:nth-child(1) .txt { background:var(--mainColor1); }
.sustainability-box .guide-box .process .box:nth-child(2) .txt { background:#4a8bbc; }
.sustainability-box .guide-box .process .box:nth-child(3) .txt { background:#5b5acf; }
.sustainability-box .guide-box .process .box:nth-child(4) .txt { background:var(--mainColor); }
.sustainability-box .guide-box .process .box:nth-child(1) .txt .arr { background:#417aa6; }
.sustainability-box .guide-box .process .box:nth-child(2) .txt .arr { background:#5150ba; }
.sustainability-box .guide-box .process .box:nth-child(3) .txt .arr { background:#611fcc; }
.sustainability-box .guide-box .process .box:nth-child(1) .icon figure:after { background:var(--mainColor1); }
.sustainability-box .guide-box .process .box:nth-child(2) .icon figure:after { background:#4a8bbc; }
.sustainability-box .guide-box .process .box:nth-child(3) .icon figure:after { background:#5b5acf; }
.sustainability-box .guide-box .process .box:nth-child(4) .icon figure:after { background:var(--mainColor); }
.sustainability-box .guide-box .p-list { margin-top:80px; border-top:2px solid #000; border-bottom:1px solid #ddd; padding:60px; }
.sustainability-box .guide-box .p-list li:not(:last-child) { margin-bottom:15px; }
.sustainability-box .guide-box .p-list li { position:relative; padding-left:24px; color:#333; font-size:var(--font20); font-weight:300; line-height:1.3; }
.sustainability-box .guide-box .p-list li:after {content:""; display:block; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:4px; background:#333; }
.sustainability-box .guide-box .btn { margin-top:60px; display:flex; gap:30px; }
.sustainability-box .guide-box .btn a { transition:all 0.4s; position:relative; width:360px; height:80px; padding:0 10px; text-align:center; gap:10px; display:flex; align-items:center; justify-content:center; border:1px solid #333; overflow:hidden; }
.sustainability-box .guide-box .btn a span { transition:all 0.4s; position:relative; z-index:3; color:#333; font-size:var(--font20); font-weight:600; line-height:1.3; }
.sustainability-box .guide-box .btn a img { transition:all 0.4s; }
.sustainability-box .guide-box .btn a:hover { border-color:var(--mainColor); }
.sustainability-box .guide-box .btn a:nth-child(2):hover { border-color:var(--mainColor1); }
.sustainability-box .guide-box .btn a:hover span { color:#fff;  }
.sustainability-box .guide-box .btn a:before { transition:all 0.6s; content:''; display:block; opacity:0.4; background:var(--mainColor); width:0; height:0; border-radius:100%;  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.sustainability-box .guide-box .btn a:nth-child(2):before { background:var(--mainColor1); }
.sustainability-box .guide-box .btn a:hover:before { transition:all 0.8s; width:700px; height:700px; opacity:1; } 
.sustainability-box .guide-box .btn a:hover img { filter:brightness(0) invert(1); }
@media screen and (max-width:1600px){
	.sustainability-box .guide-box .cont2 .listbox .box .txt br { display:none; }
	.sustainability-box .guide-box .process .box .icon { padding:0 20px; }
	.sustainability-box .guide-box .process .box .txt { height:70px; }
	.sustainability-box .guide-box .process .box .txt .arr { width:70px; height:70px; right:-35px; }
}
@media screen and (max-width:1440px){
}
@media screen and (max-width:1280px){
	.sustainability-box .guide-box .cont2 .listbox { flex-wrap:wrap; gap:10px; }
	.sustainability-box .guide-box .cont2 .listbox .box { width:calc((100% - 20px) / 3); }
	.sustainability-box .guide-box .process .box .icon { padding:0 10px; }
	.sustainability-box .guide-box .process .box .icon img { height:50px; }
	.sustainability-box .guide-box .process .box .txt { height:60px; }
	.sustainability-box .guide-box .process .box .txt .arr { width:60px; height:60px; right:-30px; }
	.sustainability-box .guide-box .process .box .txt .arr img { height:24px; }
}
@media screen and (max-width:1024px){
	.sustainability-box .guide-box .cont1 .imgbox:before { padding-bottom:35%; }
	.sustainability-box .guide-box .cont2 .listbox .box { padding:20px; }
	.sustainability-box .guide-box .cont2 .listbox .box figure img { width:80px; }
	.sustainability-box .guide-box .cont2 .listbox .box .txt { margin-top:20px; }
	.sustainability-box .guide-box .process .box .i-img figure:after { bottom:-3px; width:6px; height:6px; }
	.sustainability-box .guide-box .process .box .txt { height:50px; }
	.sustainability-box .guide-box .process .box .txt .arr { width:50px; height:50px; right:-25px; }
	.sustainability-box .guide-box .process .box .txt .arr img { height:20px; }
	.sustainability-box .guide-box .p-list { margin-top:40px; padding:30px; }
	.sustainability-box .guide-box .p-list li:not(:last-child) { margin-bottom:8px; }
	.sustainability-box .guide-box .p-list li { padding-left:20px; }
	.sustainability-box .guide-box .p-list li:after { top:9px; width:3px; height:3px; }
	.sustainability-box .guide-box .btn { margin-top:30px; gap:20px; }
	.sustainability-box .guide-box .btn a { height:65px; width:300px; }
}
@media screen and (max-width:640px){
	.sustainability-box .guide-box .cont1 .imgbox:before { padding-bottom:40%; }
	.sustainability-box .guide-box .cont2 .listbox { gap:5px; }
	.sustainability-box .guide-box .cont2 .listbox .box { width:calc((100% - 5px) / 2); }
	.sustainability-box .guide-box .cont2 .listbox .box figure img { width:60px; }
	.sustainability-box .guide-box .cont2 .listbox .box .txt { margin-top:10px; }
	.sustainability-box .guide-box .process { flex-wrap:wrap; gap:30px 0; }
	.sustainability-box .guide-box .process .box { width:calc(100% / 2);  }
	.sustainability-box .guide-box .process .box .icon { padding:0 40px; }
	.sustainability-box .guide-box .process .box .icon img { height:40px; }
	.sustainability-box .guide-box .process .box:nth-child(2) .txt .arr { display:none }
	.sustainability-box .guide-box .process .box .txt { height:40px; }
	.sustainability-box .guide-box .process .box .txt .arr { width:40px; height:40px; right:-20px; }
	.sustainability-box .guide-box .process .box .txt .arr img { height:18px; }
	.sustainability-box .guide-box .p-list { margin-top:20px; padding:15px; }
	.sustainability-box .guide-box .p-list li { padding-left:16px; }
	.sustainability-box .guide-box .p-list li:after { top:8px; }
	.sustainability-box .guide-box .btn { margin-top:15px; gap:10px; }
	.sustainability-box .guide-box .btn a { height:50px; width:250px; }
}
@media screen and (max-width:480px){
	.sustainability-box .guide-box .process { gap:20px 0; }
	.sustainability-box .guide-box .process .box .icon { padding:0 20px; }
}


/* animation 
.sustainability-box .guide-box .cont1 .imgbox:after { content:''; display:block; background:#fff; position:absolute; right:0; top:0; width:100%; height:100%; transition:all 1.0s 0.3s; }
.sustainability-box .guide-box .cont1 .imgbox.subOn:after { width:0; }
*/