@charset "utf-8";



@media all  and (max-width:850px) { 

.about-purpose .purpose-intro > dt {flex-shrink:0;font-size:1rem;width:120px;box-shadow: 4px 0 4px 0 rgba(2,60,128,1);}
.about-purpose .purpose-intro > dd {font-size:1rem;padding:29px;}

.about-purpose .purpose-goal > li {padding:15px 20px;font-size:1rem;border-width:10px;}
.about-purpose .purpose-goal > li:nth-child(1) {padding-right:60px;}
.about-purpose .purpose-goal > li:nth-child(3) {padding-left:60px;}


.about-purpose .purpose-exp {gap:10px;}
.about-purpose .purpose-exp > li {padding:30px 30px;font-size:1rem;}


}




@media all  and (max-width:850px) { 

.about-history .title {padding:0 15%;}

.about-history .history > li > dl {flex-wrap:wrap;gap:5px;margin-top:20px;}
.about-history .history > li > dl  > dt {width:80px;height:26px;}
.about-history .history > li > dl  > dd {width:100%;margin-bottom:10px;}

.about-history .history > li:nth-child(odd) > dl > dt {order:-1;}


.about-history .history > li .label-wrap {flex-wrap:wrap;}

}





@media all  and (max-width:1656px) { 

.about-chairman .greeting-summary .greeting .sub {padding-bottom:50px;}

}



@media all  and (max-width:890px) { 

.about-chairman .greeting-summary  {padding-top:0;margin-top:-40px;}
.about-chairman .greeting-summary .swr-imgwrap.chairman {position:relative;left:auto;bottom:auto;display:block;width:auto;margin:0 -20px;margin-bottom:-33%;padding-right:30%;}
.about-chairman .greeting-summary .swr-imgwrap.chairman:after {position:absolute;content:"";left:0;right:0;top:23%;bottom:0;background-repeat:no-repeat;background-position:center top;background-size:cover;background-image:url(../images/content/cluster.jpg);}

.about-chairman .greeting-summary .swr-imgwrap.logo {top:5%;left:auto;right:0;width:50%;}

.about-chairman .greeting-summary .greeting {padding:40px 0;z-index:11;}
.about-chairman .greeting-summary .greeting .sub {padding-bottom:0;}

.about-chairman .greeting-summary .greeting:before {content:none;}
.about-chairman .greeting-summary .greeting:after {left:-50px;}



}









@media all  and (max-width:890px) { 
.about-chairman .profile-summary {padding-top:0;margin-top:-40px;}

.about-chairman .profile-summary .swr-imgwrap.chairman {position:relative;left:10px;bottom:auto;display:block;width:auto;margin:0 -20px;margin-bottom:-50%;padding-right:50%;overflow:visible;}
.about-chairman .profile-summary .swr-imgwrap.chairman:after {position:absolute;z-index:-1;content:"";left:-20px;right:-20px;top:80px;bottom:0;background-repeat:no-repeat;background-position:center bottom;background-size:cover;background-image:url(../images/content/cluster.jpg);}

.about-chairman .profile-summary .profile:after {left:-20px;right:-20px;;top:0;bottom:0;border-radius:0;}

.about-chairman .profile-summary .profile {z-index:11;padding:50px 20px;}

.about-chairman .profile-summary .name {position:absolute;right:auto;left:50%;bottom:auto;top:20px;line-height:1.2;}


.about-chairman ul > li   {margin-top:20px;}
.about-chairman ul > li .wrap  {flex-wrap:wrap;gap:5px 10px;}


}








@media all  and (max-width:1550px) { 
.about-strategy .strategy-system .system-exp  {gap:2%;}

.about-strategy .strategy-system .system-exp.value > li {font-size:1.2rem;border-width:5px;}
.about-strategy .strategy-system .system-exp.value > li:after {border:0;}

.about-strategy .strategy-system .system-exp.goal > li > strong {font-size:1.2rem;}

.about-strategy .strategy-system .system-exp.objective > li {font-size:1.2rem;line-height:1.2;}

}






@media all  and (max-width:880px) { 
.about-strategy .strategy-system > dl:nth-child(n+2) {padding-top:50px;}
.about-strategy .strategy-system > dl:before {margin-left:auto;background-position:right center;}

.about-strategy .strategy-system > dl {flex-wrap:wrap;padding-right:0;gap:10px 20px;}
.about-strategy .strategy-system > dl > dd {width:100%;}


.about-strategy .quote {font-size:1.2em;margin-top:10px;padding:0 30px;}


}




@media all  and (max-width:500px) { 
.about-strategy .strategy-system .system-exp.goal {gap:10px;flex-wrap:wrap;}
.about-strategy .strategy-system .system-exp.goal > li {width:calc(50% - 5px);padding:5%;}

.about-strategy .strategy-system .system-exp.objective {gap:10px;flex-wrap:wrap;margin-top:10px;}
.about-strategy .strategy-system .system-exp.objective > li {width:calc(50% - 5px);}

.about-strategy .strategy-system .system-exp.task {gap:10px;flex-wrap:wrap;}
.about-strategy .strategy-system .system-exp.task > li {width:calc(50% - 5px);padding:5%;}

}







@media all  and (max-width:760px) { 
.about-strategy .strategy-vision .main-copy {padding:10% 5%;font-size:1.6em;}
.about-strategy .strategy-vision > ul > li {margin-top:20px;}

.about-strategy .strategy-vision > ul > li .line {padding-top:30px;}

.about-strategy .strategy-vision > ul > li .title {font-size:1.2em;}

}




@media all  and (max-width:580px) { 
.about-strategy .strategy-vision > ul {flex-wrap:wrap;}
.about-strategy .strategy-vision > ul > li {width:100%;margin-bottom:-15px;}
}




@media all  and (max-width:720px) { 
.about-strategy .strategy-policy > dl:nth-child(n+2) {margin-top:50px;}

.about-strategy .strategy-policy .copies > li {font-size:1rem;}
.about-strategy .strategy-policy .copies.management > li > strong {width:60%;}


.about-strategy .strategy-policy .copies.value > li {font-size:1.2rem;border-width:5px;}
.about-strategy .strategy-policy .copies.value > li:after {content:none;}

}





@media all  and (max-width:880px) { 
.about-strategy .strategy-cluster .main-pic:after {width:36%;}

.about-strategy .strategy-cluster .main-pic .title {position:absolute;z-index:12;right:20px;bottom:-20px;padding:20px;aspect-ratio:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#007bc0;color:#fff;box-shadow: 0 8px 16px 0px rgba(0,0,0,0.5);}
.about-strategy .strategy-cluster .main-pic .title > h2 {font-size:1.5rem;font-weight:500;}
.about-strategy .strategy-cluster .main-pic .title .swr-imgwrap {max-width:150px;}


}


@media all  and (max-width:960px) { 
.about-strategy .strategy-cluster .cluster-roadmap > li > dl > dt {font-size:1.2rem;line-height:1.2;}
.about-strategy .strategy-cluster .cluster-roadmap > li > dl > dd {font-size:1rem;line-height:1.2;}
}


@media all  and (max-width:780px) { 
.about-strategy .strategy-cluster .cluster-roadmap {flex-wrap:wrap;max-width:450px;margin:0 auto;padding:30px;}
.about-strategy .strategy-cluster .cluster-roadmap > li {width:100%;}
.about-strategy .strategy-cluster .cluster-roadmap > li:after {left:-18px;right:-18px;}
.about-strategy .strategy-cluster .cluster-roadmap > li:nth-child(odd):after {bottom:-18px;}
.about-strategy .strategy-cluster .cluster-roadmap > li:nth-child(even):after {top:50%;bottom:-18px;border-radius:0 0 500px 500px;}

.about-strategy .strategy-cluster .cluster-roadmap > li:before {left:8px;right:8px;top:8px;bottom:8px;}
.about-strategy .strategy-cluster .cluster-roadmap > li > i {left:-17px;right:-17px;top:-17px;bottom:-17px;}

.about-strategy .strategy-cluster .cluster-roadmap > li .circle-text {font-size:1.2rem;top:23px;color:#222;}
.about-strategy .strategy-cluster .cluster-roadmap > li:nth-child(even) .circle-text {top:23px;bottom:auto;}

.about-strategy .strategy-cluster .cluster-roadmap > li > dl {height:100%;padding:0 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;}

.about-strategy .strategy-cluster .cluster-roadmap > li > dl:before {right:50%;top:auto;width:60px;height:60px;bottom:-30px;transform: translateX(50%) rotate(90deg);}

.about-strategy .strategy-cluster .cluster-roadmap > li > dl:after {right:50%;top:auto;width:60px;height:60px;bottom:-30px;transform: translateX(50%);}

}



@media all  and (max-width:988px) { 
.about-strategy .strategy-cluster .cluster-process {margin-left:-40px;margin-right:-10px;}
.about-strategy .strategy-cluster .cluster-process > ol > li {font-size:1rem;line-height:1.2;text-align:center;padding:10px;}

.about-strategy .strategy-cluster .cluster-process > ul {flex-wrap:wrap;gap:5px 10px;}
.about-strategy .strategy-cluster .cluster-process > ul > li {flex-shrink:1;font-size:0.9rem;}
}


@media all  and (max-width:866px) { 
.about-strategy .strategy-cluster .cluster-plan {flex-wrap:wrap;}
.about-strategy .strategy-cluster .cluster-plan .swr-imgwrap:first-child {width:100%;}
.about-strategy .strategy-cluster .cluster-plan .swr-imgwrap:last-child {width:100%;}

}











@media all  and (max-width:800px) { 
.about-identity .identity-intro {padding:29px;}
.about-identity .identity-intro .wrapper {flex-wrap:wrap;}
.about-identity .identity-intro .wrapper .image {width:100%;}

.about-identity .logo-wrap {padding:20px 20px;}



.about-identity .identity-symbol {flex-wrap:wrap;gap:29px 0;}
.about-identity .identity-symbol .swr-imgwrap {padding-left:0;margin:0 auto;}
}



@media all  and (max-width:1650px) { 
.about-identity .identity-color {gap:20px 10%;}
.about-identity .identity-color .color {width:45%;}
}

@media all  and (max-width:600px) { 
.about-identity .identity-application > dl {flex-wrap:wrap;gap:0;}
.about-identity .identity-application > dl > dt {width:100%;text-align:left;padding-bottom:10px;padding-top:30px;}

.about-identity .identity-color .color {width:100%;}

.about-identity .identity-application > dl.contrast {margin-top:0;margin-bottom:0;}
}








@media all  and (max-width:800px) { 
.about-location .location-item .item {padding:5%;}
.about-location .location-item .item:before {padding-top:30%;}
}







@media all  and (max-width:560px) { 
.about-location .location-item {flex-wrap:wrap;}
.about-location .location-item .item {width:100%;}

.about-location .location-item .item {padding:10% 3%;}
.about-location .location-item .item:before {padding-top:15%;}

.about-location .location-item .item:after {top:auto;bottom:0;right:0;width:100%;height:1px;background:#ddd;}

}







@media all  and (max-width:874px) { 
.about-location .location-vehicle >  dl {flex-wrap:wrap;gap:0;}
.about-location .location-vehicle >  dl > dd {width:100%;}
}



@media all  and (max-width:490px) { 
.about-location .location-vehicle >  dl > dd > ul > li {display:block;position:relative;padding-left:15px;}
.about-location .location-vehicle >  dl > dd > ul > li:before {position:absolute;left:0;margin-top:8px;}
}









@media all  and (max-width:600px) { 
.esg-main-copy {padding:10% 8%;}
.esg-main-copy > strong {font-size:1.6em;}
.esg-main-copy > b {font-size:1.3em;}
.esg-table > dl > dd .copy.main {font-size:1.2rem;}
.esg-table > dl > dd .copy.sub {font-size:1.2rem;}
.esg-table > dl > dd .copy.sub2 {font-size:1.2rem;}
}











@media all  and (max-width:890px) { 
.esg-table .exp-wrap.col4 > * {width:calc(50% - 5px);flex-grow:1;}
}
@media all  and (max-width:440px) { 
.esg-table .exp-wrap > * {width:auto !important;flex-grow:1;}
}










@media all  and (max-width:440px) { 
.technical-advisory > li {width:auto;flex-grow:1;}
}









@media all  and (max-width:770px) { 
.esg-intro > .item {flex-wrap:wrap;gap:10px;}
.esg-intro > .item > .swr-imgwrap {width:100%;order:9 !important;margin-bottom:0;}
.esg-intro > .item:nth-child(n + 2) {margin-top:30px;}
.esg-intro > .item:nth-child(n + 2) > dl {padding-bottom:0;}
}












@media all  and (max-width:850px) { 
.esg-wastewater-type > li .exp {font-size:1rem;}
}
@media all  and (max-width:560px) { 
.esg-wastewater-type {gap:10px;}
.esg-wastewater-type > li {width:calc(50% - 5px);}
}








@media all  and (max-width:850px) { 
.esg-eco-recycling-role > li > dl > dd  {padding:20px 0;}
}

@media all  and (max-width:690px) { 
.esg-eco-recycling-role {flex-wrap:wrap;}
.esg-eco-recycling-role > li {flex-basis:100%;width:100%;}
.esg-eco-recycling-role > li > dl {margin-top:10%;}
.esg-eco-recycling-role > li > dl > dd  {padding:20px;}
}





@media all  and (max-width:690px) { 
.esg-eco-final-copy {margin-top:30px;}
}



@media all  and (max-width:700px) { 
.esg-eco-final-copy {padding-top:18%;padding-bottom:18%;}
.esg-eco-final-copy .main {font-size:1.5rem;padding:0 50px;}
.esg-eco-final-copy .main:before {width:30px;height:30px;top:5px;}
.esg-eco-final-copy .main:after {width:30px;height:30px;top:5px;}

.esg-eco-final-copy .main  > strong:nth-child(2) {padding-left:40px;}
.esg-eco-final-copy .main  > strong:nth-child(2):before {top:0;width:40px;height:40px;}



.esg-eco-final-copy.light .main {margin-top:5%;}
}











@media all  and (max-width:630px) { 
.social-proc {flex-wrap:wrap;}
.social-proc > li {flex-basis:100%;}
.social-proc > li:after {right:auto;left:50%;top:auto;bottom:-55px;transform:rotate(90deg) translateX(-50%);margin-left:-20px;}

}












@media all  and (max-width:830px) { 
.verification-process > ol {flex-wrap:wrap;}
.verification-process > ol > li {width:calc(33.33% - 15px);min-width:180px;flex-grow:1;}
}











@media all  and (max-width:760px) { 
.osh-policy-wrap.with-frame {padding:50px 30px;}
.osh-policy-wrap > h2 {font-size:1.2rem;margin-bottom:30px;}
.osh-policy-wrap .main-title {font-size:1.5rem;}
.osh-policy-wrap {font-size:1rem;}
.osh-policy-wrap .main-content {font-size:1rem;}
.osh-policy-wrap .main-content .list-dot > li:before {margin-top:7px;}
}







@media all  and (max-width:980px) { 
.social-hr-system {flex-wrap:wrap;padding:10% 0;justify-content:center;}
.social-hr-system .goal {width:auto;margin:0 30%;flex-grow:1;flex-shrink:1;}

.social-hr-system .exp {width:50%;}
.social-hr-system .exp > dl {padding:15px !important;}
.social-hr-system .exp:nth-child(2) {order:5;text-align:left;}
.social-hr-system .exp:nth-child(3) {order:6;text-align:left;}


.social-hr-system .exp:nth-child(2):after {content:none;}
.social-hr-system .exp:nth-child(3):after {content:none;}
}





@media all  and (max-width:580px) { 
.social-hr-system .goal {margin:0 auto;max-width:280px;}
.social-hr-system .goal > dl {font-size:1.2rem;}
}

@media all  and (max-width:550px) { 
.social-hr-system .exp {width:100%;justify-content:center;text-align:center;}
}





@media all  and (max-width:950px) { 
.social-hr-declaration .copy {font-size:1.2rem;padding:0;}
}







@media all  and (max-width:730px) { 
.list-ethical-charter {padding:0 0;}
}

@media all  and (max-width:470px) { 
.list-ethical-charter > li {align-items:flex-start;}
.list-ethical-charter > li > em {font-size:2rem;margin-top:5px;}
}







@media all  and (max-width:1600px) { 
.esg-supporters-activity {gap:0 10px;}
.esg-supporters-activity > li .swr-imgwrap {max-width:70px;}
}

@media all  and (max-width:900px) { 
.esg-supporters-activity {flex-wrap:wrap;justify-content:center;}
.esg-supporters-activity > li {width:calc(33.33% - 9px);}
}

@media all  and (max-width:560px) { 
.esg-supporters-activity {gap:10px 10px;j}
.esg-supporters-activity > li {width:calc(50% - 9px);padding:0 10%;}
}

@media all  and (max-width:400px) { 
.esg-supporters-activity > li {width:100%;max-width:230px;}
}







@media all  and (max-width:900px) { 
.service-fulfillment > dl {flex-wrap:wrap;}
.service-fulfillment > dl > dt {width:auto;padding:20px;aspect-ratio:0;}
.service-fulfillment > dl > dt > div {display:flex;align-items:center;gap:20px;}
.service-fulfillment > dl > dt > div .swr-imgwrap {width:60px;}
}






@media all  and (max-width:1450px) { 
.complaint-process > ol  > li .swr-imgwrap {width:60%;}
.complaint-process > ol  > li {padding:20px;}
.complaint-process > ol  > li:after {left:5px;right:5px;top:5px;bottom:5px;}
.complaint-process > ol  > li:before {left:5px;right:5px;top:5px;bottom:5px;}
}


@media all  and (max-width:800px) { 
.complaint-process > ol  > li .swr-imgwrap {width:50%;}
.complaint-process > ol  > li {padding:5px;}
.complaint-process > ol  > li:after {left:0;right:0;top:0;bottom:0;}
.complaint-process > ol  > li:before {content:none;}
.complaint-process .box strong {font-size:1.1rem;line-height:1;margin-top:-15%;}

}











@media all  and (max-width:800px) { 
.complaint-regist-alert {padding:5%;}
}


@media all  and (max-width:390px) { 
.complaint-regist-alert {flex-wrap:wrap;gap:10px;border-radius:50px;padding:20px;text-align:center;justify-content:center;}
.complaint-regist-alert > span {width:100%;}
}



@media all  and (max-width:830px) { 
.complaint-regist-alerts {flex-wrap:wrap;justify-content:center;}
.complaint-regist-alerts .complaint-regist-alert {border-radius:30px;margin-left:0;margin-top:0;padding:5%;}
.complaint-regist-alerts >  .swr-imgwrap {order:9;width:100%;max-width:300px;}
}






@media all  and (max-width:590px) { 
.complaint-regist-guide {flex-wrap:wrap;justify-content:center;}
.complaint-regist-guide > span {width:100%;}
}





@media all  and (max-width:840px) { 
.complaint-verification .guide .main {font-size:1.4rem;line-height:1.4;}
.complaint-verification .guide .sub {font-size:1.1rem;line-height:1.2;}
}



@media all  and (max-width:650px) { 
.complaint-verification .guide {flex-wrap:wrap;justify-content:center;padding:10%;}
.complaint-verification .guide > .swr-imgwrap {order:9;width:100%;max-width:200px;}
}










@media all  and (max-width:730px) { 
.complaint-clean-process > ol > li {font-size:1.2rem;}
}





@media all  and (max-width:760px) { 
.reservation-intro > .guide {padding-left:40px;}
.reservation-intro > .guide .ico {left:-30px;top:11%;width:60px;height:60px;padding:0 10px;padding-top:5px;}
}


@media all  and (max-width:720px) { 
.reservation-intro {flex-wrap:wrap;}
.reservation-intro > .swr-imgwrap {width:100%;}
.reservation-intro > .guide {padding:5% 7%;padding-top:40px;}
.reservation-intro > .guide .ico {left:50%;top:-30px;transform: translateX(-50%);}
}








@media all  and (max-width:950px) { 
.reservation-guide > ul > li {width:calc(50% - 10px);}
}

@media all  and (max-width:440px) { 
.reservation-guide > ul > li {width:100%;padding:5%;}
.reservation-guide > ul > li.half {width:100%;}
.reservation-guide > ul > li.nogrow {flex-grow:1;}
}





@media all  and (max-width:780px) { 
.reservation-notice {flex-wrap:wrap;margin-top:5%;}
.reservation-notice .title {width:100%;}

.reservation-notice .title:after {content:none;}
.reservation-notice .content:after {content:none;}


.reservation-ft {margin-top:7%;}
}