@charset "utf-8";


/* common */
.mp-tit {font-size: 60px; font-weight: 700; font-family: var(--ff-secondary); color: #000; line-height: 1.25; padding-right: 24px; position: relative;}
.mp-tit::after {content:""; position: absolute; bottom: 15px; right: 0; width: 10px; height: 10px; background: var(--primary);}
.mp-desc {padding-top: 15px; font-size: 1.125rem; line-height: 1.65; color:#8C8C8C; word-break: keep-all;}


@media screen and (hover:hover) {}
@media screen and (max-width:1399px) {
  .fullpage-wrapper{overflow: hidden;}
  .mp-tit::after{bottom: 8px;}
}
.main-visual{
 width: 100%; height: 100%; position: relative;
.visual-slide {width: 100%; height: 100%; position: relative;}
.visual-slide.shadow::before {content:""; position: absolute;width: 50%; height: 100%; background:linear-gradient(to right, rgba(0, 0, 0,.3) , transparent); top:0; left:0;}

.visual-slide .visual-slide-video {width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; z-index: -1;}
.visual-slide .container {height: 100%; display: flex; justify-content: center; align-items: center; position: relative;}
.visual-slide .title {position: relative; padding-right: 36px; font-size: 7.3125rem; font-weight: 500; font-family: var(--ff-secondary); color:#fff; line-height: 1; opacity: 0; text-transform: uppercase; transform: translateY(50px); transition: opacity 1s, transform 1s;}
.visual-slide .title::after {content:""; position: absolute; bottom: 16px; right: 0; width: 12px; height: 12px; background: var(--primary);}
.visual-slide .desc {position: absolute; top: calc(50% + 130px); left: calc(50% + 270px); font-size: 1.125rem; font-weight: 400; color:#fff; line-height: 1.8; color:rgba(255, 255, 255,0.8); opacity: 0; margin-top: 1.2em; display: block; transform: translateY(50px); transition: opacity 1s, transform 1s;}
.visual-slide .bg img {scale: 1; transition: scale 5s ease;}
.btn.side-btn {position: absolute;  right: 0; bottom: 0;  z-index: 10;}
.controller {position: absolute; bottom: 57px; display: flex; width: 100%; margin: 0 auto; padding-top: 45px; border-top: 1px solid #C0C0C0; z-index: 10;}
.controller .container{position: relative;}
.controller .swiper-pagination {display: flex; gap: 4.875em; width: 100%; position: initial;}
.controller .swiper-pagination .pagination-item {position: relative; width: auto; height: auto; display: block; cursor: pointer;}
.controller .swiper-pagination .pagination-item .pagination-txt {display: flex; flex-direction: column; align-items: flex-start; color: #C0C0C0; opacity: .5; transition: all .3s;}
.controller .swiper-pagination .pagination-item .pagination-txt.active {position: absolute; top: 0; left: 0; color: var(--primary); opacity: 1; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);}
.controller .swiper-pagination .pagination-item .pagination-txt span {font-size: 16px; font-weight: 500; line-height: 1.5;}

.controller .swiper-pagination .pagination-item.active .pagination-txt.active {-webkit-animation-name: reveal-text; animation-name: reveal-text; -webkit-animation-duration: 6s; animation-duration: 6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards}

@media screen and (hover:hover) {}
@media screen and (max-width:1399px) {
   .visual-slide .desc{position: static; width: 100%;}
   .visual-slide .container{flex-direction: column; text-align: start; justify-content: end; height: 75%;}
   .visual-slide .title{font-size: 5.3rem; margin-right: auto;}
   .btn.side-btn{position: relative;}
   .controller {bottom: 10%; border-top: 0; padding: 0;}
   .controller .container .swiper-pagination{display: none;}
   .visual-slide .title::after{bottom: 8px;}

}
@media screen and (max-width:767px) {
 .visual-slide .title{font-size: 3.3rem;}
 .visual-slide .desc{line-height: 1.4;}
 .mp-head .head-right{height: auto;}

}
  
}

@keyframes reveal-text {
  from {
      clip-path: inset(0 100% 0 0)
  }

  to {
      clip-path: inset(0 0 0 0)
  }
}

.init.main-visual .visual-slide.swiper-slide-active .title {opacity: 1; transform: translateY(0);}
.init.main-visual .visual-slide.swiper-slide-active .desc {opacity: 1; transform: translateY(0);}
.init.main-visual .visual-slide.swiper-slide-active .bg img {scale: 1.1;}



/* company */
 .company{
  position: relative;
 .top {width: 100%; height: 50vh; position: relative;}
 .top .container {position: relative; height: 100%;}
 .mp-head {position: absolute; bottom: 80px; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0;}
 .mp-head .mp-tit span {color: #CBCBCB;}
 .fp-scroller{height: 100%; display: flex; flex-direction: column;}
 .mp-head .head-right {height: 225px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
 .mp-head .head-right .mp-desc {padding-top: 0;}
 .bottom {width: 100%; height: 55vh; position: relative;}
 .bottom .container {width: 1440px; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 10;}
 .bottom .item {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative;}
 .bottom .item .txt-box {text-align: center; color: #fff;}
 .bottom .item .txt-box .sbj {line-height: 1; font-weight: 700; font-family: var(--ff-secondary); margin-bottom: 1em}
 .bottom .item .txt-box .sub {font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 18px;} .bottom .item .txt-box .desc {font-size: 1rem; font-weight: 400; line-height: 1.5;}
 .line-box {position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 1440px; height: 100%; display: flex; justify-content: space-between;}
 .line-box .line {width: 1px; height: 100%;}
 .top .line-box {z-index: -1;}
 .top .line-box .line {background-color: #EDEDED;}
 .bottom .line-box .line {background-color: #F4FCFF;}
 .bottom .bg .box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, #98DEFA 0%, #68D3FE 100%); mix-blend-mode: multiply;}
@media screen and (max-width:1399px){
 .mp-head{flex-direction: column; position: relative; display: block; bottom: auto;}
 /* .top .container{width: calc(100% - 40px)} */
 .top{height: auto; padding-block: 5em;}
 .fp-scroller{justify-content: space-between;}
 .mp-head .head-right{align-items: flex-end; flex-direction: row; height: 150px; }
 .bottom .container{width: auto;}
 .line-box{width: 100%;}
 .bottom .item{width: 90%; margin: 0 auto;}
 .mp-head .mp-tit{display: inline-block;}
}
@media screen and (max-width:767px){
  .bottom{height: auto;}
  .bottom .container{grid-template-columns: auto;}
  .line-box{display: none;}
  .bottom .item{padding-block: 2em; position: relative;}
  .mp-head .head-right{flex-direction: column; align-items: flex-start;}
  .mp-head .head-right .mp-desc{padding-block: 1em;}
  .bottom .item:not(:first-of-type)::before{content: ""; display: block; width: 100%; height: 1px; background-color: white; position: absolute; top: 0;}
}
@media screen and (max-width:400px){
  .mp-head .mp-tit{font-size: 1.7rem;}
}
 }



/* product */

.product {
  background-color: #F3F3F3; position: relative;
  .mp-head {display: flex; justify-content: space-between; padding-top:2.8571em; margin-bottom: 0.6286em; font-size: 4.375rem;}
  /* .wrap{height: calc(100% - 530px);} */

  .prod-swiper {max-width: 1300px; margin: 0 auto; position: relative; overflow: visible; }
  .prod-swiper .swiper-slide { aspect-ratio:420/562 ;border-radius: 20px; overflow: hidden; margin-right:1.5em; max-width: 420px;}
  .prod-swiper .swiper-slide a {  display: block; position: relative; width: 100%; height: 100%;}
  .prod-swiper .swiper-slide .txt-box {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 2.75em 2.75em; z-index: 10;}
  .prod-swiper .swiper-slide .txt-box .sub {font-size: 1.125rem; font-weight: 400; color: var(--primary); margin-bottom: 10px;}
  .prod-swiper .swiper-slide .txt-box .sbj {font-size: 2.5rem; font-weight: 700; font-family: var(--ff-secondary); text-transform: uppercase;}
  .prod-swiper .swiper-slide .bg{  width: 100%;
    height: 100%;}
  .prod-swiper .swiper-slide .bg img {transition: transform .3s ease;   object-fit: cover; }
  @media screen and (hover:hover) {
     .prod-swiper .swiper-slide:hover .bg img {transform: scale(1.05);}
  }
  @media screen and (max-width:1399px){
    .wrap{width: 90%;margin: 0 auto;}
    .mp-head{flex-direction: column; gap: 0.5em; padding-top:1.4em}
    .prod-swiper .swiper-slide .txt-box .sbj{font-size: 2rem; line-height: 1.3;}
    .prod-swiper .swiper-slide .txt-box .sub{line-height: 1.3; margin-bottom: 0.2em; display: block;}
    .mp-head .mp-tit{display: inline-block;}
  }
  @media screen and (max-width:767px){
    .wrap{overflow: hidden;}
  }
  
  
}


.controller.container {margin-top: 26px;}
.product-controller {display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 3.75em;}
.product-controller .swiper-pagination-custom {width: auto;}
.product-controller .current {font-size: 26px; font-weight: 400; color: var(--primary);}
.product-controller .total {font-size: 20px; font-weight: 400; color: #BCBCBC;}
.product-controller .my-prev {background: url(../images/main/swiper-arrow-left.png) no-repeat center; background-size: cover; max-width: 44px; width: 100%; height: 44px; font-size: 0;}
.product-controller .my-next {background: url(../images/main/swiper-arrow-right.png) no-repeat center; background-size: cover; max-width: 44px; width: 100%; height: 44px; font-size: 0;}


/* oem */

.oem{
   .wrap {width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
 .mp-head {padding-top: 5.3125em; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}
 .mp-head .mp-tit {color: var(--primary);}
 .mp-head .mp-tit::after {background: #fff;}
 .mp-head .sub {font-size: 2.5rem; font-weight: 700; font-family: var(--ff-secondary); color: #fff; line-height: 1.3;}
 .mp-head .mp-desc {margin-bottom: 7.5em}

 .oem-logo {position: absolute; bottom: 35px; left: 50%; width: 1400px; transform: translateX(-50%);}

 .card {width: 1440px; height: 630px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-top: 85px; z-index: -1;}
 .card img {position: absolute; width: 150px; height: auto;}
 .card img:nth-child(1) {left: calc(50% - 623px); transform: translateX(-50%) rotate(-70deg); bottom: 85px;}
 .card img:nth-child(2) {left: calc(50% - 540px); transform: translateX(-50%) rotate(-50deg); bottom: 271px;}
 .card img:nth-child(3) {left: calc(50% - 367px); transform: translateX(-50%) rotate(-30deg); bottom: 424px;}
 .card img:nth-child(4) {left: calc(50% - 124px); transform: translateX(-50%) rotate(-10deg); bottom: 523px;}
 .card img:nth-child(5) {right: calc(50% - 124px); transform: translateX(+50%) rotate(10deg); bottom: 523px;}
 .card img:nth-child(6) {right: calc(50% - 367px); transform: translateX(+50%) rotate(30deg); bottom: 424px;}
 .card img:nth-child(7) {right: calc(50% - 540px); transform: translateX(+50%) rotate(50deg); bottom: 271px;}
 .card img:nth-child(8) {right: calc(50% - 623px); transform: translateX(+50%) rotate(70deg); bottom: 85px;}

 .bg {z-index: -2;}

@media screen and (max-width:1399px){
  .wrap{overflow: hidden;}
  .mp-head .mp-desc{margin-bottom: 3.25em;}
  .oem-logo{width: 100%;}

}
@media screen and (max-width:767px){
  .mp-head .mp-desc{width: 90%;}
}
}


/* ETC */
.etc {
  width: 100%; height: 100%; background-color: #F3F3F3; overflow: hidden;

  .final-scroll {
    height: 100vh;         /* 화면 한 장 크기 */
    overflow-y: auto;      /* 내부만 스크롤 */
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
  }
  .etc-top {width: 100%; display: flex; justify-content: space-between; padding-top: 12.5em}
  .etc-top .txt-frame {display: flex; flex-direction: column; justify-content: space-between; align-items: start; padding: 2.5em 0 1.875em}
  .etc-top .txt-frame .mp-head hr {border: 1.5px solid #DFDFDF; margin: 2.5em 0 1.875em}
  .etc-top .txt-frame p{font-size: 1.125rem;}
  .etc-top .video-frame {width: 900px; height: 530px; position: relative; overflow: hidden; border-radius: 20px;}
 
  .etc-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 80px; padding-bottom: 200px;}
  .etc-list li.item {border-radius: 20px; overflow: hidden;}
  
  .etc-list li.item a {display: block; position: relative; width: 100%; padding: 30px 20px; background: white; transition: all .4s;}
  
  .etc-list li.item a .ico {width: 100%; height: 68px; margin-bottom: 10px;}
  .etc-list li.item a .ico img {width: 68px; height: 68px; float: right; transition: all .4s;}
  .etc-list li.item a .ico img.none {display: block; opacity: 1;}
  .etc-list li.item a .ico img.active {display: none; opacity: 0;}
  
  .etc-list li.item a h4 {font-size: 1.875rem; font-weight: 700; font-family: var(--ff-tertiary); line-height: 1.1;}
  .etc-list li.item a .line {display: block; width: 100%; height: 1px; background: #ECECEC; margin: 20px 0;}
  .etc-list li.item a p {font-size: 1rem; line-height: 1.5; color: #535353;}
  
  .etc-list li.item a.list--hover {background: var(--primary);}
  
  .etc-list li.item a.list--hover .ico img.none {display: none; opacity: 0;}
  .etc-list li.item a.list--hover .ico img.active {display: block; opacity: 1;}
  
  .etc-list li.item a.list--hover h4 {color: white;}
  .etc-list li.item a.list--hover span.line {background: white; opacity: .4;}
  .etc-list li.item a.list--hover p {color: white;}
  
  @media (hover:hover) {}
  
  @media screen and (max-width: 1399px) {
    .etc-top{flex-direction: column; padding-top: 6.25em;}
    .etc-list{grid-template-columns: repeat(2,1fr);}
    .etc-top .txt-frame{flex-direction: column}
    .etc-top .video-frame{width: 100%; height: auto;}
    .etc-top .mp-head{margin-bottom: 1em;}
    .mp-head .mp-tit{display: inline-block;}
    .etc-top .mp-head{width: 100%;}
  }
  @media screen and (max-width: 767px) {
    .etc-top .txt-frame{flex-direction: column;}
    .etc-list{grid-template-columns: auto;}
  }
}









/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}