@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}


.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}
.main-visual__bg i{transform: scale(1.2); transition:transform 15s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(1);}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

/* main visual */
.main-visual{height:var(--height-full); /* background: url(../img/main/main-visual.jpg) no-repeat;  */background-size: cover; background-position: 50% 50%; overflow: hidden; position: relative;}
.main-visual__video {overflow: hidden; position: absolute; width: 100%; height: 100%;}
.main-visual__video::before{content: "";position: absolute;width: 100%;height: 56.25vw;z-index: 2;background: rgba(0,0,0,0.3);left: 0;top: 0;top: 0;}
.main-visual__video iframe,.main-visual__video video{object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100%;transform: translate(-50%, -50%);}



@media (min-aspect-ratio: 16/9) {
    .main-visual__video iframe,.main-visual__video video{height: 56.25vw;}
  }
  @media (max-aspect-ratio: 16/9) {
      .main-visual__video iframe,.main-visual__video video{width: 177.78vh;}
  }

.main-visual .wrap{height: 100%; z-index: 3;}
.main-visual .swiper-slide{background-color: transparent;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 8rem;}
.main-visual__btn > i{}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;bottom: 215rem;padding-left: 146rem;z-index:89;width:100%;justify-content: flex-start;}
.main-visual__controls > div{align-items:center;justify-content: center;}
.main-visual__count{display:flex;align-items:center;/* margin:0 50rem; */font-size:16rem;font-family: var(--lang-en);color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count .cur-num{color: var(--c-01);}


.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:14rem; height:14rem; background:#fff;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}

.main-visual__text{position:absolute; top:35vh; width:100%; color:#fff; padding-left: 146rem; z-index: 3;}
.main-visual__text h2{overflow:hidden;line-height:1.1;font-weight:600;letter-spacing:-0.5rem;opacity: 0;}
.main-visual__text h2 + h2{margin-top: 10rem;}
.main-visual__text p{margin-top:17rem;font-weight:700;font-size:23rem;opacity: 0;}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{ width: 100%; transition: var(--progress-duration) linear; }

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

.main-visual-control{position: absolute;top: 76vh;padding-left: 146rem;width: 100%; z-index: 1;}
.main-visual-num{align-items: center;}
.main-visual-num *{color: var(--f-01); font-family: var(--lang-en); font-size: 16rem; font-weight: 500;}
.main-visual-num *.cur-num{color: var(--c-01);}
.main-visual-bar{width: 110rem; height: 1px; position: relative; background-color: rgba(255,255,255,0.5);margin: 0 24rem; overflow: hidden;}
.main-visual-bar span{position: absolute; content: ""; width: 0; height: 100%; top: 0;left:0; background-color: var(--f-01); }

.video-button {width: 86rem; height: 86rem; position: absolute; cursor: pointer; right: 180rem; top: 50%; transform: translateY(-50%); z-index: 90;}
.video-button *{transition: var(--trans-01);}
.play-button{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border:1px solid var(--f-01); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.video-button__circle{ position: absolute; z-index: 2; top: 50%; left: 50%;  width: 100%; height: 100%; border-radius: 100%; border:1px solid rgba(255,255,255,1); transform: translate(-50%, -50%) scale(1); animation: ripple 2s ease-out infinite}
.video-button__circle.delay{animation-delay: 1s;}
.video-button svg:nth-child(2){display: none;}

@keyframes ripple {
    0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.6;
    }
    100% {
      transform: translate(-50%, -50%) scale(2);
      opacity: 0;
    }
  }

.main-visual [data-round] {width: 807px;height: 807px;bottom: -224rem;left: -306rem; z-index: 2}
/* .main-visual [data-round] svg circle{stroke-dasharray: 2000; stroke-dashoffset: 2000;} */

.main-visual .ytp-pause-overlay, .ytp-pause-overlay, .ytp-pause-overlay-container{display: none !important; opacity: 0 !important; z-index: -100; position: absolute; bottom: -1000rem;}
 

@media (hover: hover) and (pointer: fine){
    .video-button:hover *{border-color: var(--c-01);}
    .video-button:hover path{fill: var(--c-01);}
}

@media (max-width:1600px){
  .main-visual__text,.main-visual__controls{padding-left: 80rem;}
}
@media (max-width:1480px){
    .main-visual__text{top: inherit; bottom: 30vh;} 
  .main-visual__controls{bottom: 20vh}
  .video-button{right: 80rem;}

}
@media (max-width:1200px){
  .main-visual__text, .main-visual__controls{padding-left: 0;}

  .video-button{width: 70rem; height: 70rem; right: 50rem;}
  .main-visual [data-round="1"] {bottom: -265rem;}
  .main-visual [data-round="1"] svg circle{stroke-width: 130rem;}
  /* .main-visual__controls{bottom: 350rem;} */
}

@media (max-width:1023px){


  .main-visual [data-round]{width: 900rem; height: 900rem;}
  .main-visual [data-round="1"]{bottom: -325rem;}
}

@media (max-width:860px){
	
  
  .main-visual__controls{bottom: 80rem;}
  .main-visual [data-round]{left: -44%;}
  .main-visual [data-round="1"] svg circle{stroke-width: 190rem;}

   .video-button{top: inherit; bottom: 80rem; transform: none;}

}

@media (max-width:540px){
	.main-visual__text{bottom: 180rem;}
	.main-visual__text h2{line-height:1.2;  word-break: keep-all;}
    .main-visual__text h2 + h2{margin-top: 8rem;}
    [lang="en-US"] .main-visual__text h2 span{font-size: 28rem; line-height: 1.4;}
    [lang="en-US"]  .main-visual__text h2 + h2{margin-top: 4rem;}
    .main-visual__text p{margin-top:10rem; font-size:15rem;}
    .main-visual__count{margin:0 10rem; font-size:15rem;}
    .main-visual__btn{font-size:14rem;}

    .main-visual [data-round]{width: 480rem; height: 480rem; bottom: -130rem;}
    .main-visual [data-round="1"] svg circle{stroke-width: 100rem; }

    .main-visual-bar{width: 60rem; margin: 0 12rem;}
    .main-visual__count{font-size: 14rem; font-weight: 500;}
    .main-visual__controls{bottom: 48rem;}
    
    .video-button{width: 45rem; height: 45rem; right: 30rem; bottom: 40rem;}
  
}


.main-about{position: relative;}
.main-about__title h3 + p{margin-top: 24rem;}
.main-about{margin-top: var(--gap170);  overflow: hidden;}
.main-about__image{ position: relative; border-radius: 5rem 0 0 5rem; margin-top: var(--gap80); width: calc(100% + 102rem); background:url(../img/main/main-intro.jpg) no-repeat; background-size: cover; height: 730rem;}
.main-about__image::before{content: ""; position: absolute; width: 100%; height: 100%; background-color: var(--bg-01); right: 0; top: 0; transition: all 1.6s; transition-delay: .3s;}
.main-about.is_moved .main-about__image::before{width: 0}
.main-slide{margin: var(--gap170) 0; overflow: hidden;}

.main-about [data-round] {width: 539rem;height: 539rem; bottom: -224rem; right: -146rem;top: 90rem; z-index: -1;}
.main-about [data-round] svg{transform: rotate(140deg);}
.main-about [data-round].is_moved circle{stroke: var(--c-01); animation-delay: 1s;}


@media (max-width:1480px){
  .main-about__image{height: 550rem;}
}
@media all and (max-width:1200px){
	
  .main-about__image{height:480rem}
  .main-about [data-round] {width: 430rem; height: 430rem;}

}
@media all and (max-width:1023px){
	.main-about__image{height: 410rem;}
  .main-about__title h3 + p{margin-top: 16rem;}
  .main-about__image::before{transition: all 1.2s; transition-delay: .4s;}
}
@media (max-width:860px){

}
@media (max-width: 540px){

    .main-slide{margin: 32rem 0;}
  .main-about__image{height: 190rem; width:calc(100% +  20rem);}
  .main-about [data-round]{width: 280rem; height: 280rem; top: 80rem;}
  .main-about__title h3 + p{margin-top: 10rem;}
  [lang="en-US"] .main-about__title h3 br{display: none;}
  .main-about [data-round].is_moved circle{animation-delay: .6s;}

}


.main-grid{margin-bottom: var(--gap170);}
.main-grid__text.mo-ver{display: none;}
.main-grid__text{margin-top: 80rem;}
.main-grid__text h3{margin-bottom: 16rem;}
.main-grid__text p + a{margin-top: 73rem;}
[lang="en-US"] .main-grid__text p br{display: none;}
.main-grid__list{gap: 40rem 46rem;}
.main-grid__link{border-radius: 5rem; cursor: pointer;}
.main-grid__link,.main-grid__round{position: relative; height: 0; padding-bottom: 100%; overflow: hidden;}
.main-grid__link img{position: absolute; width: 100%; height: 100%; left: 0; top: 0; transition: var(--trans-01);}
.main-grid__link > span{font-weight: 700; font-size: var(--font-17);display: inline-flex; padding: 9rem 16rem; background-color: #fff; border-radius: 3rem; position: absolute; right: 30rem; bottom: 30rem;}
.main-grid__round [data-circle]{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.main-grid__round [data-circle="orange"]{left: -50%;}


.main-grid__hover{position: absolute; z-index: -1; opacity: 0; visibility: hidden; transition: var(--trans-01); width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); left: 0; top: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.main-grid__hover > *{transition: var(--trans-01); transform: translateY(30rem); transition-delay: .2s; opacity: 0; }
.main-grid__hover h4{color: var(--f-01); margin-bottom: 14rem;}

@media (hover: hover) and (pointer: fine){

    .main-grid__link:hover .main-grid__hover{opacity: 1; z-index: 1; visibility: visible;}
    .main-grid__link:hover .main-grid__hover > *{transform: translateY(0); opacity: 1;}
    .main-grid__link:hover  > span{opacity: 0;}

}
@media (min-width:2000px){

    .main-about__image{width: 117%;}

 }

 @media (max-width:1480px){
  .main-grid__list{gap: 36rem;}
  .main-grid__text p br{display: none;}
 }
 @media all and (max-width:1200px){
  .main-grid__text p br{display: none;}
  .main-grid__text{margin-top: 24rem;}
  .main-grid__text p + a{margin-top: 50rem;}
 }
 @media all and (max-width:1023px){
   .main-grid__list{gap: 26rem;}
   .main-grid__link > span{padding: 8rem 12rem; right: 20rem; bottom: 20rem;}
   .main-grid__text h3{margin-bottom: 8rem;}
 }
 @media (max-width:860px){
  
  .main-grid__list{grid-template-columns: 1fr 1fr}
  .main-grid__round [data-circle="green"]{left: 50%;}
  .main-grid__text:not(:has(.mo-ver)),.main-grid__empty{display: none;}
  .main-grid__text{}
  .main-grid__text.mo-ver{display: block; text-align: center; margin-top: 54rem;}
  .main-grid__round:has([data-circle="green"]){display: none;}
  .main-grid__round [data-circle="orange"]{left: 0;}
 }
 @media (max-width: 540px){
  .main-grid__list{grid-template-columns: 1fr; gap: 20rem;}
  .main-grid__round:has([data-circle="orange"]){display: none;}
  .main-grid__text.mo-ver{margin-top: 32rem;}
 
 }
.main-process,.main-global{background-color: var(--c-02); }

.main-process{ position: relative; /* padding: 227rem 0 239rem; */ overflow: hidden; padding-bottom: 100vh;}

.main-process__wrapper{gap: 42rem;will-change: transform;width: max-content;align-items: center;padding-left: 205rem;}
.main-process__center{display: flex; align-items: center;}
.main-process__sticky{overflow: hidden; position: absolute; top: 0; left: 0; height: 100vh; width: 100%;}
.main-process_center{display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100% ;}
.main-process__item h3{color: var(--f-01);}
.main-process__item h3 img{width: 45rem;height: 45rem;border-radius:100%;border:4rem solid var(--f-01);display: inline-block;vertical-align: middle;position: relative;top: -5rem;margin: 0 5rem;} 
.main-process__item p{color: var(--f-01); margin-top: 24rem;}
.main-process__item{width: 430rem; border-radius: 5rem; overflow: hidden; position: relative;height: 430rem; }
.main-process__item img{width: 100%; position: absolute; height: 100%; left: 0; top: 0;}
.main-process__item:nth-child(1){padding-right: 160rem;width: 39vw; display: flex; flex-direction: column; justify-content: center; height: auto;}
[lang="en-US"] .main-process__item:nth-child(1){padding-right: 0;}
.main-process [data-circle]{ position: absolute; top: -197rem; left: -243rem; width: 642rem; height: 642rem; border:120rem solid rgba(255,255,255,0.05);}

.main-process__hover{position: absolute; width: 100%; height: 100%;text-align: center;  opacity: 0; transition: var(--trans-01); background-color: rgba(255,173,0,0.9); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.main-process__hover span{font-family: var(--lang-en); font-size: 16rem; display: block; margin-bottom: 14rem;font-weight: 300;}
.main-process__hover strong{font-size: 31rem; font-family: var(--lang-ko2); font-weight: 700;}


@media (max-width:1600px){
  .main-process__item:nth-child(1){padding-right: 110rem;}
}
@media (max-width:1480px){
 
}
@media all and (max-width:1200px){
	.main-process__item:nth-child(1){padding-right: 0;}
  .main-process__item{width: 370rem; height: 370rem;}
  .main-process__hover span{margin-bottom: 8rem;}
  .main-process__hover strong{font-size: 26rem;}
  .main-process__wrapper{gap: 34rem; padding-left: 145rem;}
}
@media all and (max-width:1023px){
	.main-process__hover span{font-size: 15rem;}
  .main-process__hover strong{font-size: 24rem;}
  .main-process__wrapper{padding-left: 100rem;}
  .main-process__item{width: 340rem; height: 340rem;}
}
@media (max-width:860px){
  .main-process__wrapper{width: 100%; gap: 22rem; flex-wrap:wrap}
  .main-process__item:nth-child(1){width: 100%; height: auto;} 

  .main-process{padding-bottom: 0;}
  .main-process__sticky,.main-process_center{position: relative; height: auto;}
  .main-process__wrapper{margin: 0 40rem; padding-left: 0; }
  .main-process__item:not(:nth-child(1)){width: calc(100% / 2 - 16rem); height: auto;}
  .main-process__item:not(:nth-child(1))::before{content: ""; display: block; padding-bottom: 100%;}
  .main-process__hover{width: auto; height: auto; opacity: 1; bottom: 20rem; right: 20rem; padding: 8rem 12rem; border-radius: 3rem;}
  .main-process__hover span{display: none;}
  .main-process__hover strong{font-size: 15rem;}
  .main-process_center{padding-top: var(--gap130);}
  .main-process__item p{margin-top: 18rem;}
  .main-process__item:nth-child(1){margin-bottom: 30rem;}
  .main-process [data-circle]{width: 560rem; height: 560rem; border:80rem solid rgba(255,255,255,0.05);}
  .main-process__item h3 img{width: 34rem; height: 34rem;}
}
@media (max-width: 540px){
  .main-process__item:not(:nth-child(1)){width: 100%;}
  .main-process__wrapper{margin: 0 20rem;}
  .main-process__item h3 img{width: 26rem; height: 26rem; top: -2rem;}
  .main-process__item:nth-child(1){margin-bottom: 10rem;}
  .main-process__item p{margin-top: 12rem;}
  [lang="en-US"] .main-process__hover strong{font-size: 14rem; line-height: 1.2; font-weight: 500;}
}




@media (max-width:1480px){
    .main-global{padding-bottom: 120rem;}
    .main-global__title{bottom: 0}
}
@media all and (max-width:1200px){
	.main-global{padding-top: 80rem;}
    .main-global__title a{margin-top: 52rem;}
    
}
@media all and (max-width:1023px){
	.main-global{padding-bottom: var(--gap170);}
    .main-global__title a{margin-top: 42rem;}
    .main-global__title h3{margin-bottom: 10rem;}
}
@media (max-width:860px){
    .main-global{min-height: auto;}
    .main-global .wrap{flex-direction: column;}
    .main-global__title{position: relative;}
}


.main-esg{margin-top: var(--gap170);}
.main-esg__title{text-align: center; margin-bottom: 49rem;}
.main-esg__title p{margin-top: 21rem;}
.main-esg__conts{position: relative;}
.main-esg__conts .main-esg__fruit{margin: 0 auto;}
.main-esg__conts ul{background-color: var(--c-01); max-width: 1400rem; border-radius: 5rem; margin: 106rem auto -153rem; position: relative; z-index: 1;}
.main-esg__conts ul li{padding: 55rem 0; position: relative;}
.main-esg__conts ul li + li::before{content: ""; width: 1px; height: calc(100% - 110rem); position: absolute; display: block; left: 0; top: 50%; transform: translateY(-50%); border-right:  1px solid rgba(255,255,255,0.3);}
.main-esg__conts ul a{width: 100%; display: block; padding:0 50rem }
/* .main-esg__conts ul li + li a{border-left: 1px solid rgba(255,255,255,0.3);} */
.main-esg__conts h4{margin-top: 55rem; display: inline-flex; gap: 12rem;}
.main-esg__conts h4 svg{position: relative; top: 4rem; opacity: 0; transform: translateY(20rem); transition: var(--trans-01);}
.main-esg__conts p{margin-top: 6rem;}
.main-esg__conts div:has([data-circle]){position: absolute;top: 210rem;width: 100%;z-index: -1;}
.main-esg__conts [data-circle]{ width: 640rem; height: 640rem; border: 120rem solid; opacity: 0.1; margin: 0 auto;} 

.main-esg__bg{width: 100%; height: 560rem; background: url(../img/main/main-esg.jpg) no-repeat; background-size: cover; border-radius: 5rem;} 
@media (hover: hover) and (pointer: fine){
    .main-esg__conts ul a:hover svg{opacity: 1; transform: translateY(0);}
}


@media (max-width:1480px){
    .main-esg__conts .main-esg__fruit{width: 340rem;}
    .main-esg__conts ul{width: 85%;}

    .main-esg__icon{width: 40rem; display: block;}
    .main-esg__icon img{width: 100%;}
    .main-esg__bg{height: 510rem;}
}
@media all and (max-width:1200px){
	
    .main-esg__conts ul li{padding: 38rem 0;}
    .main-esg__conts ul a{padding: 0 34rem;}
    .main-esg__conts p br{display: none;}
    .main-esg__bg{height: 430rem;}
}
@media all and (max-width:1023px){
	.main-esg__icon{width: 32rem;}
    .main-esg__conts h4 {margin-top: 34rem;}
    .main-esg__bg{height:  340rem; background-position: 50% 50%;}
    .main-esg__conts [data-circle] {width: 530rem; height: 530rem; border:100rem solid}
    .main-esg__conts h4 svg{opacity: 1; top: -16rem;}
}
@media (max-width:860px){
    .main-esg__conts .main-esg__fruit{width: 280rem;}
    .main-esg__conts [data-circle]{width: 430rem; height: 430rem;}
    .main-esg__title{margin-bottom: 28rem;}
    .main-esg__conts ul{margin: 56rem auto -123rem; grid-template-columns: 1fr; gap: 0;}
    .main-esg__conts div:has([data-circle]){top: 130rem;}
    .main-esg__conts ul li{padding: 28rem 0;}
    .main-esg__conts ul a{padding: 0 30rem;}
    .main-esg__conts ul li + li::before{width: calc(100% - 60rem); height: 1px; border-top: 1px solid rgba(255,255,255,0.3); border-left: 0; top: 0; left: 50%; transform: translateX(-50%);}
    .main-esg__icon{width: 28rem;}
    .main-esg__conts h4 svg{width: 9rem; left: -5rem;}
}
@media (max-width: 540px){
    .main-esg__title p{margin-top: 12rem; padding: 0 30rem;}
    [lang="en-US"] .main-esg__title p br{display: none;}
    .main-esg__conts .main-esg__fruit{width: 200rem;}
    .main-esg__conts ul {width: 100%; margin: 56rem auto -213rem;}
    .main-esg__conts ul li{padding: 22rem 0;}
    .main-esg__conts ul li a{padding: 0 22rem;}
    .main-esg__conts ul li + li::before{width: calc(100% - 44rem);}
    .main-esg__bg{border-radius:0; height: 490rem; margin: 0 -20rem; width: calc(100% + 40rem);}
    .main-esg__conts [data-circle]{width: 280rem; height: 280rem; border:60rem solid;}
    .main-esg__conts div:has([data-circle]){top: 110rem;}
    
}

.main-board{margin-top: var(--gap130);}
.main-board .main-board__big{font-size: 120rem ; line-height: 1.15; display: block; margin-bottom: 115rem; font-weight: 500; letter-spacing: -3.6rem;}
.main-board__title{align-items: center; justify-content: space-between; margin-bottom: 37rem;}
.main-board__big{}
.main-board__big i{width: 49rem; height: 49rem; border:16rem solid; display: inline-block; position: relative; top: -80rem; left: -17rem;}

.gallery-list__title strong{}
.gallery-list li a{margin:0}

@media (max-width:1480px){
    .main-board .main-board__big{font-size: 106rem;}
    .gallery-list__title strong{font-size: 20rem;}
}
@media all and (max-width:1200px){
    .main-board .main-board__big{font-size: 76rem;  margin-bottom: 85rem;}
    .main-board__big i{width: 40rem; height: 40rem; top: -57rem; left: -17rem; border:12rem solid;}
    .main-board .gallery-list__img{height: 280rem;}
    
}
@media all and (max-width:1023px){
    .main-board .main-board__big{font-size: 72rem; letter-spacing: -2.4rem;} 
    .main-board__big i{width: 32rem; height: 32rem; border:9rem solid;}
    
}
@media (max-width:860px){
    .main-board .main-board__big{font-size: 60rem;}
    .main-board .gallery-list__img{height: 200rem;}
    .main-board .gallery-list__title strong{margin-top: 5rem; font-size: 16rem;}
}

@media (max-width: 540px){

    .main-board .main-board__big{font-size: 44rem; margin-bottom: 20rem;}
    .main-board__big i{width: 16rem; height: 16rem; border:5rem solid; top: 0; left: 0;}
    .main-board__title *.btn-basic.bd-green{ padding: 8rem 20rem;}
    [lang="en-US"] .main-board__title *.btn-basic.bd-green{min-width: 120rem;}
    .main-board__title{margin-bottom: 20rem;}
    .main-board .gallery-list{gap: 28rem;}
    .main-board .gallery-list__title{padding-top: 20rem;}
}