/*공통*/
.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: 40px; 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: 100vh;}
#mainVisual::before {content:''; position: absolute; inset: 0; background:rgba(0,0,0,.4); z-index: 1;}

/* 타이틀 */
#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: 20px; font-weight: 500; 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');}
#mainVisual .slider li.img02 {background-image: url('../../images/thema/main/slide02.jpg');}
#mainVisual .slider li.img03 {background-image: url('../../images/thema/main/slide03.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; background: none;}
.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: 100px 0 150px; background: url(../../images/thema/main/sec1_bg.jpg); background-size: cover;}

.s1 .inner {flex-direction: column; gap: 100px;}

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

/* s1 hero */
.s1-hero {width: 100%; max-width: 1280px; display: flex; align-items: center; gap: 28px;}
.s1-slide-wrap {flex: 1; min-width: 0;}
.s1-swiper {width: 100%;}
.s1-hero-row {display: flex; align-items: center; gap: 28px; min-height: 450px; width: 100%;}
.s1-hero-text {display: flex; flex-direction: column; flex: 0 1 520px; min-width: 320px; gap: 25px;}
.s1-hero-kicker {display: inline-block; font-size: 28px; font-weight: 500; color: #217AFF;}
.s1-hero-head {font-size: 30px; font-weight: 700; margin: 0;}
.s1-hero-desc {margin: 0; color: #555; line-height: 28px; max-width: 520px; text-align: justify;}
.s1-hero-btn {display: inline-flex; max-width: 150px; align-items: center; justify-content: space-between; padding: 8px 10px 8px 18px; border-radius: 999px; background: #217AFF; color: #fff; font-weight: 400; text-decoration: none; transition: background .3s ease;}
.s1-hero-btn i {font-size: 20px; font-weight: 400;}
.s1-hero-btn:hover {background: #0A349F;}

.s1-hero-visual {flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;}
.s1-hero-img {max-width: 100%; height: auto; display: block;}

.s1-hero-tabs {display: flex; flex-direction: column; flex: 0 0 200px; width: 200px; margin-left: auto; gap: 10px;}
.s1-tab {display: block; width: 100%; background: transparent; border: 2px solid transparent; cursor: pointer; font-size: 18px; font-weight: 700; color: #9a9a9a; text-align: right; transition: all .3s ease; padding: 0 10px; height: 50px; line-height: 1.2;}
.s1-tab.is-active {background: #fff; border-color: #217AFF; color: #222;}
.s1-tab:hover {background: #fff; border-color: #217AFF; color: #222;}

/*회사소개*/
.s2 {background: url(../../images/thema/main/sec2_bg.jpg); background-size: cover; min-height: 600px;}

.s2 .inner {flex-direction: column; align-items: center; padding: 160px 20px;}
.s2 .main_title {gap: 40px; margin-bottom: 40px;}
.s2 .main_title h2 {color: #fff;}
.s2 p {font-size: 18px; color: #fff; text-align: center; margin-bottom: 15px; text-shadow: 0 0 4px rgba(0, 0, 0, 0.55);}

/*자세히 보기 버튼*/
.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);} 

@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; gap: 0;}

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

  .s1-hero {flex-direction: column; align-items: stretch;} 
  .s1-hero-row {min-height: 300px;}
  .s1-hero-tabs {flex: 0 0 auto; width: 100%; margin-left: 0;}
  .s1-tabs {flex-direction: row; flex-wrap: wrap; gap: 12px; justify-content: center;}
  .s1-tab {width: auto; height: 44px; font-size: 18px; text-align: center; padding: 0 12px;}

  
}

@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}

  .more_btn {margin: 30px auto 0;}

  /*제품소개*/
  .s1-hero-row {flex-direction: column; min-height: auto;}
  .s1-hero-text {min-width: 0; width: 100%; order: 2; flex: 0; align-items: center;}
  .s1-hero-head {font-size: 26px;}
  .s1-hero-desc {max-width: none;}
  .s1-hero-img {width: 300px;}

  .scroll-indicator {bottom: 5%;}

}

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

}

@media (max-width: 370px){

}