@charset "utf-8";

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

.main_title {width: 100%;}
.main_title .title_m {font-size: 18px; color: #003365; font-weight: 800;}
.main_title .title {font-size: 40px; color: #222; font-weight: 800;}
.main_title p {font-size: 18px; padding-top: 40px;}

/*자세히 보기 버튼*/
.more_btn {display: inline-flex; width: 150px; justify-content: space-between; align-items: center; padding: 5px 15px; border-radius: 50px; font-size: 16px; font-weight: 500; vertical-align: middle; transition: .3s ease; margin-top: 60px;}
.more_btn .ri-add-line {font-size: 20px; }
.more_btn.gray {border: 1px solid #C9CACA; color: #C9CACA;}
.more_btn.gray:hover {background: #003365; color: #fff; border: 1px solid #003365;}

.more_btn.wht {border: 1px solid #fff; color: #fff;}
.more_btn.wht:hover {background: #fff; color: #003365;}

/*main visual*/
#mainVisual{overflow:hidden;position:relative;width:100%;height:100vh;background-color:#222}

/* 타이틀 */
#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 b {display:block; font-size: 50px; font-weight: 600; color:#fff; font-family:var(--k-font)}
#mainVisual .title p {font-size: 18px; font-weight: 400; 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 li {display:flex; align-items:center; justify-content:center; width:100%; height: 100vh; text-align:center; background: url(../../images/thema/main/main_slide01.png); background-position: center; background-size: cover; background-repeat: no-repeat;}
#mainVisual .slider li.img02 {background-image: url('../../images/thema/main/main_slide02.png');}
#mainVisual .slider li.img03 {background-image: url('../../images/thema/main/main_slide03.png');}

/* progressbar */
.progress.visual_progress {display: flex; justify-content: center; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: 110px; transform:translate(-50%, -50%); max-width:var(--mainsize); width:100%;}
.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%}}

/*주요제품*/
.sec.s1 {padding: 120px 0; background: url('../../images/thema/main/product_bg.png') center center / cover no-repeat;}
.sec.s1 .inner {flex-wrap: wrap; position: relative;}

.sec.s1 .slick-wrap {width: 100%; max-width: 1280px;}
.sec.s1 .slick-wrap .slide-inner {display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 60px;}
.sec.s1 .slide-image {width: 100%; height: 450px; max-width: 550px; display: flex; justify-content: center; align-items: center;}
.sec.s1 .slide-content {width: 100%; max-width: 500px; position: relative; height: 400px; }
.sec.s1 .slide-content h2 {font-size: 48px; color: #222; font-weight: 800;}
.sec.s1 .slide-content h3 {font-size: 28px; color: #003365; font-weight: 600;}
.sec.s1 .slide-content p {font-size: 18px; color: #555; font-weight: 400; margin-top: 50px;}

.progress.product_progress {position: absolute; bottom: 80px; right: 425px; display: flex; gap: 8px; z-index: 10; cursor: pointer;}
.progress.product_progress li {position: relative; height: 8px; overflow: hidden; position: relative;}
.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}

/*핵심솔루션*/
.sec.s2 {position: relative;}

.sec.s2 .main_title {position: absolute; top: 100px; margin: auto; text-align: center; z-index: 1005;}
.sec.s2 .main_title .title_m {color: #AFD8FF;}
.sec.s2 .main_title .title {color: #fff;}

.solution {display: flex; background: #000; overflow: hidden;}
.solution .t_item {position: relative; width: calc(100% / 5); height: 100vh; display: flex; align-items: flex-end; padding: 30px; color: #fff; overflow: hidden; transition: width 0.5s ease; box-sizing: border-box;}
.solution .t_item::before {content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-color 0.3s ease; z-index: 0;}

.item01::before { background-image: url('../../images/thema/main/solution01.jpg'); }
.item02::before { background-image: url('../../images/thema/main/solution02.jpg'); }
.item03::before { background-image: url('../../images/thema/main/solution03.jpg'); }
.item04::before { background-image: url('../../images/thema/main/solution04.jpg'); }
.item05::before { background-image: url('../../images/thema/main/solution05.jpg'); }

.solution .text_box {position: relative; z-index: 2; left: 25px; bottom: 50px; word-break: break-all; max-width: 300px;}
.solution .text_box h3, .solution .text_box p {transform: translateY(30px); transition: transform 0.5s ease, opacity 0.5s ease;}

.solution .text_box h3 {font-size: 30px; margin-bottom: 10px;}
.solution .text_box p {font-size: 18px; transition-delay: 0.1s; opacity: 0;}

.solution .t_item:hover {width: calc((100% / 5) + 60px);}
.solution .t_item:hover .text_box h3, .solution .t_item:hover .text_box p {transform: translateY(0); opacity: 1;}

/*연구개발*/
.s3 {position: relative; background: #fff;}
.s3::before {content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-color: #fbfbfb; z-index: 0;}

.rnd.con {width: 100%; min-height: 425px; height: auto; display: flex; justify-content: space-between; align-items: center; gap: 90px;}
.rnd.con .main_title {max-width: 340px; width: 100%;}

.rnd_card_wrap {width: 100%; display: flex; gap: 20px; }
.rnd_card {flex: 1; min-height: 350px; height: auto; border-radius: 20px; z-index: 300; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); transition: transform .4s ease;} 

.card01 {background-image: url('../../images/thema/main/card01.png');}
.card02 {background-image: url('../../images/thema/main/card02.png'); transform: translateY(75px);}
.card03 {background-image: url('../../images/thema/main/card03.png');}

.rnd_card:hover {transform: translateY(-30px);}
.rnd_card.card02:hover {transform: translateY(40px);}

.rnd_card_text {text-align: center; padding: 50px 20px 0;}
.rnd_card_text .card_eng {color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 500;}
.rnd_card_text .card_title {color: #fff; font-size: 26px; font-weight: 700; line-height: 1.3;}

/*공지 및 뉴스*/

.s4 {position: relative; height: 1000px; background: url('../../images/thema/main/news_bg.jpg') center center / cover no-repeat; display: flex; justify-content: center; align-items: center; overflow: hidden;}

.s4 .inner.news_wrap {max-width: 1280px; width: 100%; margin: 0 auto; display: flex; align-items: center; z-index: 10;}
.s4 .main_title {color: #fff; max-width: 400px;}

.s4 .main_title * {color: #fff;}

.news_progress {width: 150px; height: 8px; background: #fff; border-radius: 10px; margin-top: 60px; overflow: clip;}
.progress_bar {width: 0; height: 100%; border-radius: 0 10px 10px 0; background: #003365; transition: .3s ease; will-change: width; transform: translateZ(0);}

.news_slider_wrap {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 60%; max-width: 1920px; box-sizing: border-box; z-index: 500; overflow: visible;}
.newsSwiper {overflow: visible;}
.newsSwiper .swiper-wrapper {display: flex; pointer-events: auto;}

.newsSwiper .swiper-slide {width: 400px !important; display: flex; height: auto; margin-right: 20px; pointer-events: auto;}

.news_card {display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border-radius: 16px; min-height: 480px; overflow: hidden;}
.news_card:hover .news_card_text {background: #003365;}
.news_card:hover .news_card_text * {color: #fff;}

.news_img {width: 100%; height: 240px; object-fit: cover; background: url('../../images/board/no_image.jpg') #fff; background-size: cover !important; background-position: center !important;}

.board_meta.main {gap: 5px;}
.news_card_text {width: 100%; padding: 35px; height: 240px; box-sizing: border-box; flex: 1; transition: background .3s ease;}
.news_card_text .news_title {font-size: 20px; height: 130px; font-weight: 700; margin-bottom: 15px; color: #222; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; max-height: 2.5em; word-break: break-word; overflow-wrap: break-word;}
.news_card_text .news_description {font-size: 16px; height: 4.5em; color: #363636; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; word-break: break-word; overflow-wrap: break-word; }
.news_card_text * {font-size: 12px; color: #666;}

@media (min-width: 1024px) {
  .sec.h825 {height: 825px; padding: 200px 0;}
}

@media (max-width:1380px){
  .progress{max-width:unset; width:95%}
}

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

@media (max-width:768px){
  
  /*공통*/
  .sec.h1000 {height: auto;}
  .more_btn {margin-top: 30px; font-size: 14px; padding: 3px 15px;}


  #mainVisual .title b {font-size:40px; white-space:normal}
  .progress li p{text-align:center}

  .sec.s1 {height: auto;}
  .sec.s1 .slick-wrap .slide-inner {flex-direction: column; padding: 30px 20px; gap: 30px;}
  .sec.s1 .slide-image {max-width: 100%; height: 100%; min-height: 450px;}
  .sec.s1 .slide-image img {min-height: 450px; height: auto;}
  .sec.s1 .slide-content {max-width: 100%; height: auto; min-height: 250px; text-align: center; justify-content: center;}
  .sec.s1 .slide-content h2 {font-size: 28px;}
  .sec.s1 .slide-content h3 {font-size: 20px;}
  .sec.s1 .slide-content p {font-size: 16px; margin-top: 30px;}
  
  .progress.product_progress {position:static; width: 100%; justify-content: center;}

  .sec.s2 {height: auto; padding-top: 200px;}
  .sec.s2 .main_title {top: 50px;}
  .sec.s2 .main_title .title {color: #363636;}
  .solution {flex-direction: column;}
  .solution .t_item {width: 100%; height: 200px;}
  .solution .t_item:hover {width: auto;}
  .solution .t_item:hover .text_box h3, .solution .t_item:hover .text_box p {transform: none; opacity: 1;}
  .solution .text_box {left: 10px; bottom: 0;}
  .solution .text_box h3, .solution .text_box p {transform: none; opacity: 1;}

  .s3::before {top: auto; bottom: 0; width: 100%; height: 50%;}
  .sec.s3.h825 {height: auto; min-height: auto; padding: 100px 0;}
  .rnd.con {flex-direction: column; gap: 40px;}
  .rnd.con .main_title {max-width: 100%; text-align: center;}
  .rnd_card_wrap {flex-direction: column;}
  .rnd_card {min-height: 160px;}
  .rnd_card:hover, .card02 {transform: none;}

  .s4 {padding: 100px 0;}
  .s4.h1000 {flex-direction: column;}
  .s4 .inner.news_wrap {max-width: 100%; text-align: center;}
  .s4 .swiper {width: 100%;}
  .news_slider_wrap {position: static; top: auto; transform: none; width: 90%;}
  .newsSwiper .swiper-slide {width: 50% !important; margin-right: 0;}
  .news_progress {width: 100%; margin: 50px auto;}

}
@media (max-width:480px){
  #mainVisual .title b {font-size: 28px; white-space:normal}
  #mainVisual .title p {font-size: 16px;}
  .progress li p{font-size:14px}

  .newsSwiper .swiper-slide {width: 100% !important;}
}
@media (max-width:370px){

  .progress li p{font-size:13px}

  .sec.s1 .slide-image img {min-height: 300px !important;}

  .solution .text_box h3 {font-size: 22px;}
  .solution .text_box p {font-size: 16px;}
}
/* 반응형 [e] */