/*공통*/
.sec.h1000 {height: 100vh;}
.sec.h825 {min-height: 600px; height: auto;}

.main_title {text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0 auto 70px;}
.main_title.white {color: #fff;}
.main_title .title {font-size: 56px; color: #222; font-weight: 800; text-align: center;}
.main_title .title.wht {color: #fff;}

.main_title p {font-size: 20px;}

.main_title .dash {display: flex; width: 50px; height: 1px; background: #222; margin: 10px 0 20px;}

.s2 .main_title .dash, .s4 .main_title .dash {background: #fff;}

.inner.col {flex-direction: column;}

.txt.highlight {font-weight: 900;}
.highlight {color: var(--brand-color);}

/*main visual*/
#mainVisual{overflow:hidden;position:relative;width:100%;height: 948px;}

/* 타이틀 */
#mainVisual .title{position:absolute; top: 40%; left:50%; transform:translateX(-50%); z-index:1; width:max-content; color:#fff; text-align: center; user-select: none;}
#mainVisual .title h2 {display:block; font-size: 46px; font-weight: 600; color:#fff;}
#mainVisual .title p {font-size: 28px; font-weight: 600; line-height:1.3; white-space:pre-line; text-transform:uppercase;}

/* 슬라이드 */
#mainVisual .mainSwiper {position:absolute; left:0; top:0; z-index:1001; width:100%; height:100vh;}
#mainVisual .slider {margin: 0; padding: 0;}
#mainVisual .slider li {display:flex; align-items:center; justify-content:center; width:100%; height: 100vh; text-align:center; background-position: center; background-size: cover; background-repeat: no-repeat; margin: 0; padding: 0;}
#mainVisual .slider li.img01 {background-image: url('../../images/thema/main/slide01.jpg');}

/* progressbar */
.progress.visual_progress {display: flex; justify-content: center; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: 30%; transform:translate(-50%, -50%); max-width:var(--mainsize); width:100%; z-index: 2;}
.progress.visual_progress li{position:relative; cursor:pointer; width: 100px; height: 8px; background: rgba(255, 255, 255, 0.4);}
.progress.visual_progress li:after{position:absolute; content:''; bottom:0 ;left:0; z-index:-1; width:100%; background: transparent;}
.progress.visual_progress li .bar{position:absolute; bottom: 0; left:0; width:0; height: 8px; background:#fff;}
.progress.visual_progress li.active .bar{background:#fff; animation:countingBar 3s linear forwards;}
@keyframes countingBar{0%{width:0}100%{width:100%}}

/*scrolled-icon*/
.scroll-indicator {position:absolute; left:50%; bottom: 10%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:10;}
.scroll-indicator .label{font-size: 14px; font-weight: 400; letter-spacing: 1px; color: #fff; margin: 0;}
.scroll-indicator .mouse{position:relative; width: 25px; height: 40px; border: 1px solid rgba(255, 255, 255, 1); border-radius:18px; display:flex; justify-content:center; align-items:flex-start; padding-top: 8px;}
.scroll-indicator .wheel{width: 4px; height: 4px; background:#fff; border-radius:50%; animation:wheelMove 1.4s ease-in-out infinite;}
@keyframes wheelMove{0%{transform:translateY(0);opacity:1;}50%{transform:translateY(5px);opacity:.6;}100%{transform:translateY(0);opacity:1;}}

/*제품소개*/
.s1 {padding: 150px 0;}

.s1 .main_title {max-width: 400px; text-align: left; margin: 0; align-items: flex-start;}

.s1 .main_title .title {text-align: left; margin-bottom: 20px; font-size: 42px;}
.s1 .main_title p {font-size: 18px;}

.s1-wrap {display: flex; align-items: center; gap: 60px;}

.s1-slide-wrap {flex: 1; min-width: 0; width: 100vw; margin-right: calc((100vw - 1280px) / -2); padding-left: 60px;}
.s1-slide-clip {overflow: hidden; padding: 10px 0;}

.s1-slider {margin: 0; padding: 0;}
.s1-slider .slick-list {overflow: visible;}
.s1-slider .slick-slide {padding: 0 20px 0 0;}

.s1-card {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 430px; height: 350px; padding: 40px 50px; background: #eee; position: relative;}
.s1-card strong {font-size: 30px; font-weight: 800; color: #333; letter-spacing: .2px;}

.s1-slider .slick-current .s1-card {background: #0b66d6;}
.s1-slider .slick-current .s1-card strong {color: #fff;}

.s1-slider .s1-spacer {width: calc(100vw - 430px - 60px); height: 1px; pointer-events: none; background: transparent;}

/*회사소개*/
.s2 {background: radial-gradient(50% 50% at 50% 50%, #014083 0%, #16142C 100%); padding: 100px 0;}

.s2 .main_title h2 {font-size: 56px;}

.s2 .main_title p {font-size: 20px;}

.s2 .map-box {position: relative; margin: 0 auto; max-width: 1580px;}
.s2 .map-img {width: 100%; max-width: 1580px; height: auto;}

.gp-marker {position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.95); transform: translate(-50%, -50%); pointer-events: none;}
.gp-marker::before {content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.35); animation: gpPulse 1.8s ease-out infinite;}
.gp-marker::after {content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.18); animation: gpPulse 1.8s ease-out infinite; animation-delay: .35s;}

.gp-label {position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .4px; white-space: nowrap;}

@keyframes gpPulse {0%{transform:translate(-50%,-50%) scale(.2); opacity:.9;}70%{transform:translate(-50%,-50%) scale(6); opacity:0;}100%{transform:translate(-50%,-50%) scale(6.5); opacity:0;}}

/* 스크린샷 기준 대략 좌표(%) */
.gp-marker.usa {left: 18%; top: 33%;}
.gp-marker.mexico {left: 18%; top: 49%;}
.gp-marker.poland {left: 56%; top: 29%;}
.gp-marker.china {left: 73%; top: 41%;}
.gp-marker.india {left: 69%; top: 53%;}
.gp-marker.vietnam {left: 75.5%; top: 54%;}

/*파트너사*/
.s3 {padding: 100px 0;}
.s3 .main_title {margin-bottom: 70px;}

.s3 .dash {margin: 10px auto 20px;}

.s3 .swiper {margin-bottom: 20px; overflow: hidden;}
.s3 .swiper-wrapper {transition-timing-function: linear; will-change: transform;}
.s3 .swiper-slide {display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 305px; max-width: 305px; height: 130px; background: rgba(38, 119, 199, .05); border-radius: 20px;}

/*ESG*/
.s4 {background: url(../../images/thema/main/s4_bg.jpg); padding: 100px 0;}

.s4 .s4-wrap {width: 100%; display: flex; justify-content: space-between; align-items: stretch; gap: 20px; flex-wrap: wrap;}
.s4 .s4-item {flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(2px); padding: 45px 50px; color: #fff; transition: .3s ease;}
.s4 .s4-item:hover {background: rgba(0, 0, 0, 0.70);}

.s4 .s4-item p {opacity: .6; transition: .3s ease;}
.s4 .s4-item:hover p {opacity: 1; transform: translateX(10px);}

.s4 .s4-item img {margin-top: auto; align-self: flex-end; transition: .3s ease;}
.s4 .s4-item:hover img {transform: scale(1.2);}

/*자세히 보기 버튼*/
.more_btn {display: inline-flex; width: 150px; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 16px; font-weight: 400; vertical-align: middle; transition: .3s ease; margin-top: 30px;}
.more_btn .ri-add-line {font-size: 30px;}
.more_btn.gray {border: 1px solid #aaa; color: #444;}
.more_btn.gray:hover {background: var(--brand-color); color: #fff; border-color: transparent;}

.more_btn.wht {border: 1px solid #fff; color: #fff; text-align: center;}
.more_btn.wht:hover {background: #fff; color: var(--brand-color2);} 

.progress.product_progress {position: absolute; left: 61.8%; right: auto; bottom: 15%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; cursor: pointer;}
.progress.product_progress li {position: relative; height: 8px; overflow: hidden;}
.progress.product_progress li .bar {display: block; width: 8px; height: 100%; background: rgba(0, 0, 0, .15); transition: width .5s ease; border-radius: 10px;}
.progress.product_progress li.active .bar {width: 100px; background: #003365;}


@media (max-width:1024px){
  #mainVisual .cont{position: static;}
  #mainVisual .title {width:95%}

  .progress.product_progress {bottom: 10%;}

  .s1 {padding: 70px 0;}
  .s1 .inner {flex-direction: column;}

  .s1 .main_title .title {text-align: center;}
  .s1 .main_title {max-width: 100%; text-align: center; margin-bottom: 50px; align-items: center; }

  .s1-slide-wrap {width: 100%; margin-right: 0; padding-left: 0;}


  .s4 .inner {flex-direction: column;}
}

@media (max-width:768px){
  .main_title .title {font-size: 42px;}
  #mainVisual .title h2 {font-size:40px; white-space:normal}
  .progress li p{text-align:center}

  .mainSwiper .slide-text {top: 30%; left: 10%;}
  .mainSwiper .slide-text h2 {font-size: 1.75rem;}
  .mainSwiper .slide-text p {width: 80%;}

  .more_btn {margin: 30px auto 0;}

  /*GLOBAL PARTNERS*/
  .s2 {padding: 70px 0;}
  .s2 .main_title h2 {font-size: 38px;}
  .s2 .main_title p {font-size: 16px;}
  .gp-label {font-size: 12px; top: calc(100% + 8px);}
  .gp-marker {width: 8px; height: 8px;}
  .gp-marker::before {width: 8px; height: 8px;}
  .gp-marker::after {width: 8px; height: 8px;}

  .s4 .s4-wrap {flex-direction: column;}
}

@media (max-width:576px){
  #mainVisual .title h2 {font-size: 42px; white-space:normal}
  #mainVisual .title p {font-size: 20px;}
  .progress li p{font-size:14px}
  
  .progress.product_progress {bottom: -5%;}

}

@media (max-width: 370px){

}