@charset "utf-8";


/* common */
.btn-link {display: inline-block; margin-top: 86px; background-color: var(--primary); font-family: var(--font-primary); font-size: 18px; font-weight: 600; min-width: 157px; min-height: 44px; padding: 8px 10px; color: #fff; text-align: center;  transition: all .2s;}
.btn-link.secondary {background-color: var(--secondary);}
.btn-link.border-white {border:2px solid #fff; color: #fff; background-color:transparent }
.btn-link.border-primary {border:2px solid var(--primary); color: var(--primary); background-color:transparent }

.category {font-family: var(--font-secondary); color: var(--text-grey-1); font-size: 25px; font-weight: 600; text-transform: uppercase; padding-bottom: .5em;}
.mp-title {font-family: var(--font-secondary); color: #fff; font-size: 70px; font-weight: 500;  line-height: 1; margin-bottom: 20px;}

@media (hover:hover){
  .btn-link:hover {background-color: var(--secondary);}
  .btn-link.secondary:hover {background-color: var(--primary);}
  .btn-link.border-white:hover {background-color: #fff; color: var(--primary);}
  .btn-link.border-primary:hover {background-color: var(--primary); color: #fff;}
}


.main-visual {width: 100%; position: relative;}
.main-visual .visual-bg {width: 100%; height: 100vh; object-fit: cover;}
.main-visual .page::before {content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background:linear-gradient(to top, rgba(0, 0, 0,0.5) 0%, transparent 40%); z-index: 0; mix-blend-mode: multiply;}
.main-visual .container {height: 100%;display: flex; align-items: center; }
.main-visual .content { color:#fff; transition:transform .4s ease, opacity .8s ; opacity: 0; transform: translate(100px); transition-duration: .5s ; width: 100%; position: relative;}
.main-visual .content {color:#fff; position: relative;}
.main-visual .content .sbj {font-size: 53px; line-height: 1.47;  font-family: var(--ff-secondary); font-weight: 400; }

.main-visual.init .swiper-slide-active .content { opacity: 1; transform: translate(0px); }

.main-visual-nav {position: absolute; z-index: 10; bottom: 340px; left: 50%; width: 100%; transform: translate(-50%, 0); max-width: 1440px;}
.main-visual-nav .container {margin: 0; display: flex; align-items: center; justify-content: flex-start; color: #fff; gap: 15px; padding-bottom: 0;}
.main-visual-nav .pagination {display: flex; align-items: center; justify-content: flex-start; gap: 0; margin: 0; width: auto; }
.main-visual-nav .pagination-item {display: flex; align-items: center; gap: .5em; opacity: .3; transition: opacity .7s; width: auto; height: auto; background: none; margin-right: 10px;}
.main-visual-nav .pagination-item .no {font-weight: 500;  font-size: 19px; line-height: 1;}
.main-visual-nav .pagination-item .progress {position: relative; transition: width .7s; width: 0px; height: 3px; background: rgb(255,255,255,.3); flex-shrink: 0;}
.main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%; background: #fff; transition: transform .7s linear; transform: scaleX(0); transform-origin: left;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active {opacity: 1;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress {width: 97px;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress::after {transform: scaleX(1); transition: transform var(--main_visual_delay) linear;}
.main-visual .main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%; background: #fff; transition: transform .7s linear; transform: scaleX(0); transform-origin: left;}
.main-visual.init .main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress::after {transform: scaleX(1); transition: transform var(--main_visual_delay) linear;}

.swiper-pagination {display: flex; gap: 9px; align-items: center; justify-content: center; position: static; width: auto !important;}
.swiper-pagination-bullet {justify-content: center; min-width: 33px; margin: 0 !important; width: auto; height: auto; background: none; position: relative; display: inline-flex; margin: 0 5px; text-align: center; font-size: 19px; font-weight: 600; color: #fff; font-family: var(--ff-secondary); gap: 9px;}
.swiper-pagination-bullet .progress-bar {position: relative; display: block; width: 97px; height: 3px; background: rgba(255, 255, 255, 0.3); margin-top: 13px; overflow: hidden; flex-shrink: 0;}
.swiper-pagination-bullet .progress-fill {display: block; height: 100%; width: 0%; background: #fff;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) .progress-bar {width: 0px; visibility: hidden; opacity: 0;}
.swiper-btnPlay {font-size: 0; background: none; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid white; cursor: pointer;}
.swiper-btnPlay.active {border: none; width: 20px; height: 20px; background-image: url("../images/main/main-btnStop.svg"); background-repeat: no-repeat; background-size: 9px 13px; background-position: center center;}
.progress-bar {transition: all 1s;}
.progress-bar.hide {width: 0px; visibility: hidden; opacity: 0;}



.section1 {position: relative;}
.section1 video {width: 100%;}
.section1-inner {position: absolute; left: 50%; bottom: 165px; transform: translate(-50%,0); max-width: 1440px; width: 100%; }
.section1-title {font-family: var(--font-primary); font-size: 68px; color: #fff; line-height: 1.14; font-weight: 700;}



.product .inner {padding: 74px 0px 82px;}
.product .row {margin-top: 9px; display: flex; gap: 160px;}
.product .row-title {font-family: var(--font-secondary); color: var(--text-black-1); font-size: 78px; font-weight: 500; line-height: 1;}
.product .row-title b {font-weight: 700;}
.product .col {padding-top: 20px;}
.product .col-title {font-family: var(--font-primary); color: var(--primary); font-size: 31px; font-weight: 700;}
.product .col-desc {margin-top: 24px; font-family: var(--font-primary); color: var(--text-black-1); font-size: 20px;}



.product-ls .bannerWrap {display: grid; grid-template-columns: 1fr 1fr;overflow: hidden;}
.product-ls .inner {z-index: 1; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; padding-block: 196px 146px;}
.product-ls .inner .sml {font-size: 15px; line-height: 1.8; text-align: center; color:#fff;}
.product-ls .banner {position: relative; overflow: hidden; background-image: url("../images/main/main-banner-1.png"); background-repeat: no-repeat;  background-size: cover; overflow: hidden; transition: transform .5s ease;}
.product-ls .banner:nth-child(2) { background-image: url("../images/main/main-banner-2.png"); }
.product-ls .banner::before {content: ""; background-color: rgba(62, 62, 62, 0.26); position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.product-ls .banner > img {position: absolute; z-index: -2;}
.product-ls .mp-title{line-height: 1.25;}

@media (hover:hover){
  .product-ls .banner:hover {transform: scale(1.01); }
}



.tech-banner {position: relative; overflow: hidden; background-image: url("../images/main/tech-thumb.png"); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; transition: transform .5s ease;}
.tech-banner .l-container {height: 100%; padding: 0px;}
/* .tech-banner::before {content: ""; background-color: rgba(62, 62, 62, 0.26); position: absolute; left: 0; right: 0; top: 0; bottom: 0;} */
.tech-banner .inner {height: 100%; align-items: center; padding: 141px 0px 173px; position: relative; z-index: 1; display: flex; justify-content: space-between;}
.tech-banner img {position: absolute; z-index: -2;}
.tech-banner .desc {color: #fff; font-family: var(--font-primary); font-size: 20px;}
.tech-banner .btn-link {margin-top: -70px;}


@media (hover:hover){
}



.etc {background: #F1F1F1;}
.etc .inner {padding: 100px 0px 152px;}
.etc .titleWrap {display: flex; justify-content: space-between; align-items: center;}
.etc .btn-link {margin-top: 0;}
.etc .mp-title {color:#333;}
.etc .thumbs {display: grid; grid-template-columns: repeat(2,1fr); margin-top: 73px; overflow: hidden;}
.etc .thumb {position: relative; aspect-ratio: 12 / 4.269; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: transform .5s ease; }
.etc .thumb:nth-of-type(1) {background-image: url("../images/main/main-banner-4.png"); background-repeat: no-repeat; background-size: 113%; background-position: center 42%;}
.etc .thumb:nth-of-type(2) {background-image: url("../images/main/main-banner-5.png"); background-repeat: no-repeat; background-size: 117%; background-position: center 63%;}
.etc .thumb-title {z-index: 1; color: #fff; font-family: var(--font-secondary); font-size: 35px; font-weight: 500;}

.etc .listBox {display: flex; margin-top: 49px;}
.etc .list {width: 33.3333%; padding: 10px 35px;}
.etc .list:first-of-type {padding-left: 0px;}
.etc .list:last-of-type {padding-right: 0px;}
.etc .list:not(:first-of-type) {border-left: 1px solid rgba(112,112,112,0.23);}
.etc .list-date {font-family: var(--font-primary); color: var(--text-grey-2); font-weight: 600; font-size: 15px; }
.etc .list-content {margin-top: 11px; font-family: var(--font-primary); color: var(--text-black-0); font-weight: 500; font-size: 20px; min-height: 90px;}
.etc .list-btnMore {display: inline-block; margin-top: auto; font-family: var(--font-primary); color: var(--text-grey-3); font-weight: 600; font-size: 15px;}

@media (hover:hover){
  .etc .thumb:hover {transform: scale(1.01); }
}

:lang(en){
  .main-visual-nav{ bottom: 400px;}
  .section1-title{font-size: 62px;}
  .product-ls .mp-title{font-size: 55px;}
  .ceo-message .container.flex>div:last-child p span{white-space: nowrap;}
 

}

/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .main-visual-nav>.container{padding: 0 15px;}
  .section1-title{font-size: 50px; padding: 0 15px;}
  .product .row{flex-direction: column; gap: 80px;}
  .mp-title{font-size: 60px; min-height: 180px;}
  :lang(en){
  .section1-title{font-size: 48px;}
  .product-ls .mp-title{font-size: 35px; min-height: auto; width: 90%;}
  .product-ls .inner .sml{width: 90%;}
  .etc .listBox{margin-top: 0;}
  }
}

@media screen and (max-width: 767px) {
  #mainpage{text-align: center;}
  .section1-title{font-size: 32px; line-height: 1.5;}
  .main-visual-nav>.container{margin: auto;}
  .main-visual-nav>.container .container{justify-content: center;}
  .main-visual-nav{bottom: 100px;}

  .product .inner{padding: 60px 0;}
  .product .row-title{font-size: 34px;}
  .product .row{gap: 10px;}
  .product .col-title{font-size: 18px;}
  .product .col-desc{font-size: 14px;}

  .product-ls .bannerWrap{grid-template-columns: 1fr;}
  .product-ls .inner{padding-block: 140px 80px;}
  .mp-title{font-size: 28px; min-height: initial; margin-bottom: 40px;}
  .product-ls .inner .sml{font-size: 14px; padding: 0 15px;}
  .btn-link{margin-top: 40px;}

  .tech-banner .inner{flex-direction: column; padding: 81px 0 123px;}
  .category{font-size: 16px;}
  .tech-banner .btn-link{margin-top: 40px;}
  .tech-banner .desc{font-size: 14px;}

  .etc .inner{padding: 60px 0;}
  .etc .titleWrap{flex-direction: column;}
  .etc .listBox{flex-direction: column;}
  .etc .list{width: 100%; padding: 20px 0;}
  .etc .list:not(:first-of-type){border-left: none; border-top: 1px solid rgba(112,112,112,0.23) ;}

  .etc .thumbs{grid-template-columns: 1fr; margin-top: 60px; gap: 20px;}
  .etc .thumb-title{font-size: 24px;}

  :lang(en){
    .section1-title{font-size: 26px; line-height: 1.3;}
    .main-visual-nav{ bottom: 100px;}
    }
}