@charset "utf-8";


  /* common */
  .mp-tit-tag {font-size: 40px;font-weight: 500; color:#7E7E7E; padding-bottom: 0.3em; display: block; font-family: var(--ff-secondary); line-height: 1;  text-transform: uppercase;}
  .mp-tit {font-size: 55px; font-weight: 700; line-height: 1.43;}
  .mp-desc {font-size: 20px; line-height: 1.75;padding-top: 1.7em; color:#fff; padding-bottom: 100px;}

  .link-more {width: 176px; font-size: 17px; font-weight: 700; color:#fff; border-bottom: 2px solid #fff; transition: 0.2s;}
  .link-more .btn {display: flex; align-items: center; justify-content: space-between;padding-bottom: .2em; transition: 0.2s;}
  .link-more .icon {transition: 0.2s;}
  
  @media screen and (hover:hover) {
    .link-more:hover {border-color:var(--primary);}
    .link-more:hover .btn {color:var(--primary);}
    .link-more:hover .btn .icon svg path{stroke:var(--primary);}
  }

  @media screen and (max-width:1399px) {
    .mp-tit-tag {font-size: 28px;}
    .mp-tit {font-size: 38px;}
  }
  @media screen and (max-width:767px) {
    .mp-tit {font-size: 29px; word-break: keep-all;}
    .mp-tit-tag {font-size: 22px;}
    .mp-desc {font-size: 15px; padding-bottom: 30px; word-break: keep-all;}
  }



  .bg {position: absolute;top: 0; left:0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}

  .fp-viewing-product .header {background: transparent;}
  /* .fp-viewing-etc .header {background: rgba(255, 255, 255, 0.2); color:#333; backdrop-filter: blur(10px);} */
  /* .fp-viewing-etc .header .logo .light {opacity: 0 !important;} */
  /* .fp-viewing-etc .header .logo .dark {opacity: 1 !important; } */
  /* .fp-viewing-etc .header .lang-nav .lang-ls a.active {color:#333;} */

  .main-visual {width: 100%; height: 100%;}
  .main-visual .visual-slide {width: 100%; height: 100%; position: relative;}
  .main-visual .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;}
  .main-visual .visual-slide .visual-slide-video {width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0; z-index: -1;}
  .main-visual .visual-slide .container { height: 100%; display: flex; align-items: flex-end; }
  .main-visual .visual-slide .text-cont {color:#fff;margin-bottom: 300px;}
  .main-visual .visual-slide .title { font-size: 75px; font-family: var(--ff-secondary); font-weight: 500; line-height: 1.06; text-transform: uppercase; opacity: 0; transform: translateY(50px); transition: opacity 1s, transform 1s;}
  .main-visual .visual-slide .desc {font-size: 20px; font-weight: 500; color:rgba(255, 255, 255,0.8); opacity: 0; margin-top: 1em; display: block; transform: translateY(50px); transition: opacity 1s, transform 1s;}
  .main-visual .controller {position: relative; bottom:228px; height: 50px; left:0;z-index:1; width: 280px; }
  .main-visual .controller .pagination {position: relative; width: 100%; }

  .pagination .swiper-pagination-bullet { width:0px; height: 40px ;background: none;transition:0.7s ease-in-out;}
  .pagination .swiper-pagination-bullet .num {opacity: 0.8;display: flex; align-items: flex-end; color:#fff; font-size: 27px; font-weight: 400;  margin-bottom: 12px; opacity: 0; position: absolute;top:0; left:0;  gap: 5px;}
  .pagination .swiper-pagination-bullet .bar {width:280px ;height: 3px; background: rgba(255, 255, 255, 0.4);  position: absolute; bottom:0; left: 0;}
  .pagination .swiper-pagination-bullet .bar .inner { width: 0;  height: 100%; background: #fff; transform: scaleX(0); transform-origin: left;  transition: transform 5.8s linear;  }
  .pagination .swiper-pagination-bullet-active .num{width:100%; opacity: 1; line-height: 1;}
  .pagination .swiper-pagination-bullet-active .num .index_num {font-size: 17px; color:rgba(255, 255, 255,0.62); }

  .init .pagination .swiper-pagination-bullet-active .bar .inner {width: 100%; height: 100%; background: #fff; transform: scaleX(1); transform-origin: left;  }
  .init .pagination .swiper-pagination-bullet-active:nth-child(2) .bar .inner {transition: transform 6.6s linear;}
  .main-visual .controller .navigation { position: absolute;top:-6px; right:0; width: 80px; height: 32px; z-index:111;}
  .main-visual .controller .navigation > svg {display: block;}
  .navigation .swiper-button-prev {left: 0; width: 31px; height: 31px;}
  .navigation .swiper-button-next {right: 0; width: 31px; height: 31px;}
  .navigation .swiper-button-next::after,
  .navigation .swiper-button-prev::after {display: none;}

  .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);}

  @media screen and (max-width:1399px) {
    .fp-viewing-product .header {background: #fff;}
    .main-visual .visual-slide .title {font-size: 34px;}
    .main-visual .visual-slide .desc {font-size: 18px;}
    .main-visual .pagination .swiper-pagination-bullet .num {font-size: 22px;}
    .main-visual .pagination .swiper-pagination-bullet-active .num .index_num {font-size: 15px;}
  }
  @media screen and (max-width:767px) {
    .main-visual .visual-slide .text-cont {margin-bottom: 168px;}
    .main-visual .visual-slide .title  {font-size: 24px;}
    .main-visual .visual-slide .desc {font-size: 16px;}
    .main-visual .controller {width: 100%; bottom: 100px;}
  }


  /* product */

  .product {}
  .product .mp-tit-tag {color:#c7c7c7}
  .product .prod-container {height: 100%;}
  .product .prod-content {display: flex; position: relative; }
  .product .prod-content .container {position: relative;}
  .product .prod-content .content {display: flex; flex-direction: column; padding-block: 165px;}
  .product .prod-content .content .mp-tit {color:#fff;}

  .product .prod-btn {background: rgba(255, 255, 255,0.5); border-radius: 50px;display: flex; align-items: center; justify-content: space-between; padding: .5em 1em; z-index: 2;  height: 54px; position: relative; bottom: 160px; backdrop-filter: blur(10px);}
  .product .prod-btn .swiper-pagination {display: flex; align-items: center; justify-content: center; gap: 0px;height: 100%; bottom:0; padding-inline: 10px;}
  .product .prod-btn .swiper-pagination-bullet {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;  color:#646464; cursor: pointer; opacity: 1; background: transparent; padding: .5em;  font-size: 18px; font-weight: 500;}
  .product .prod-btn .swiper-pagination-bullet-active {background: var(--primary); border-radius: 50px; color:#fff;}
  .product .prod-btn .btn {position: relative; height: 38px;}
  .product .prod-btn .btn:before {content:""; position: absolute; top:50%; transform: translate(0,-50%); right:-5px; width: 1px; height: 80%; background: #a9a9a9;}
  .product .prod-btn .btn:last-child:before {display: none;}

  .product .prod-content .item-ls {}
  .product .prod-content .item-ls .item { position: absolute; width: 40px; height: 40px; display: flex; align-items: center; cursor:pointer;}
  .product .prod-content .item-ls .item.item-1 {left:44.4%; top:calc(50% - 6px);}
  .product .prod-content .item-ls .item.item-2 {left:73%; top:calc(50% + 33px);}
  .product .prod-content .item-ls .item .txt {font-size:20px; background: var(--primary); color:#fff; padding: .5em 1em; border-radius: 50px; line-height: 1; align-items: center;justify-content: center;  white-space: nowrap; flex-shrink: 0;display: flex; width: 0; transition: width 0.4s , opacity .3s; opacity: 0;}
  .product .prod-content .item-ls .item.active .txt {width: 193px; opacity: 1; transition: width 0.5s , opacity 0.3s;}
  .product .prod-content .item-ls .item .bullet {width: 20px; height: 20px; background: var(--primary); border-radius: 50%; border:2px solid #fff;display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
  .product .prod-content .item-ls .item .bullet .radar {width: 46px; height: 46px; background: var(--primary); border-radius: 50%; display: block; opacity: 0.4; position: absolute; flex-shrink: 0; z-index: -1;}
  .product .prod-content .item-ls .item .bullet .radar.r1 {animation: radarR1 1s linear infinite;}
  .product .prod-content .item-ls .item .bullet .radar.r2 {animation: radarR2 1s linear infinite; opacity: 0.2;}

  @keyframes radarR1 {
    0% {transform: scale(0.5);}
    100% {transform: scale(1.5);}
  }
  @keyframes radarR2 {
    0% {transform: scale(1);}
    100% {transform: scale(2);}
  }



  @media screen and (max-width:1399px){
    .prod-container {padding-top: 0;}
    .product .section-tit {position: relative;}
    .product .prod-content {height: 100%;;}
    .product .prod-content .visual {top:50%; width: 50%; transform: translate(0,-50%);}
    .product .prod-content .content .tit-sml {font-size: 21px; padding-bottom: 0;}
    .product .prod-content .content .tit {font-size: 38px;}
    .product .prod-content .visual.current-2 {top:50%;}
    .product .prod-btn {display: grid; grid-template-columns: repeat(3,1fr); border-radius: 50px;}
    /* .product .prod-btn .btn:nth-child(3):before {display: none;} */
    .product .prod-btn .btn:nth-child(6):before {display: none;}
    .product .prod-btn .swiper-pagination-bullet {font-size: 16px;}
    .product .prod-car .bg {object-position: 60%;}
    .product .prod-content .item-ls .item.item-1 {left:30%;}
  }
  @media screen and (max-width:767px){
    .product .section-tit {margin-bottom: 30px;}
    .product .prod-content {flex-direction: column; height: auto; justify-content: space-between;}
    .product .prod-content .content {padding-block: 50px;}
    .product .prod-content .content .tit-sml {font-size: 17px;}
    .product .prod-content .content .tit {font-size: 30px;}
    .product .prod-content .visual {width: 100%; transform: none; position: static; }
    .product .prod-btn {padding:.5em; bottom: 116px; grid-template-columns: repeat(3,1fr);  height: 100px; border-radius: 10px;}
    .product .prod-btn .swiper-pagination-bullet {line-height: 1.2; font-size: 14px; width: auto;}
    .product .prod-btn .swiper-pagination-bullet-active {border-radius: 10px;}
    .product .prod-btn .btn:before {display: none;}
    .product .prod-car .bg {object-position: 66%;}
    .product .prod-content .item-ls .item.item-1 {top:calc(50% + 186px); left: 10%;}
    .product .prod-content .item-ls .item.item-2 {top:calc(100% + 30px)}
    .product .prod-content .item-ls .item .txt {font-size: 16px;}
    .product .prod-content .item-ls .item.active .txt {width: 100px;}
    .product .prod-btn .swiper-pagination {display: grid; grid-template-columns: repeat(3,1fr);}
    .product .prod-btn .swiper-pagination-bullet {font-size: 13px; letter-spacing: -0.025rem;}
  }





  .technology .fp-tableCell{height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
  .technology .tech-bg-cont {width: 100%; max-height: 670px; height: 670px; position: relative; overflow: hidden;} 
  .technology .tech-bg-cont video{z-index: -1;}
  .technology .tech-bg-cont::before{content: ''; width: 100%; height: 100%; background-color: rgba(33,64,154,.8); position: absolute; left: 0; top: 0; z-index: 0; mix-blend-mode: multiply;}
  .technology .tech-bg {position:absolute; left:0; height:auto; top:0;  height: 100%; object-fit: cover; width: 100%;} 
  .technology .container {padding-block:100px 0; display: flex; flex-direction: column;  align-items: center;  justify-content: center; }
  .technology .tech-bg-cont .container{padding-block: 0;}
  .technology .head {padding-bottom:7vh; padding-top: 7.4vh;}
  .technology .content {display: flex; gap: 50px; padding-bottom: 140px; padding-top: 55px;}
  .technology .content .item {position: relative;}
  .technology .content .item .num {position: absolute; bottom:0; font-size: 79px; font-family: var(--ff-secondary);  color:var(--primary); line-height: 1;}
  .technology .content .item .top {display: flex; flex-direction: column; }
  .technology .content .item .tit-en {font-size: 20px; font-weight: 500; color:var(--primary); line-height: 1.2; padding-bottom: 0.5em;}
  .technology .content .item .tit {font-size: 32px; font-weight: 700; color:#fff; line-height: 1.2; padding-bottom: 0.5em;}
  .technology .content .item .line {}
  .technology .content .item .icon {justify-content: flex-end; padding-top: 40px; display: flex;}

  @media screen and (min-width:1999px){
    /* .technology .head {padding-bottom: 200px; padding-top: 0;} */
    /* .technology .container {gap: 100px;} */
    .technology .fp-tableCell{justify-content: center;}
  }
  @media screen and (max-width:1979px){
    .technology .tech-bg-cont {}
    .technology .container {padding-block: 100px 0;}
  }

  @media screen and (max-width: 1650px){
    .technology .head{padding-bottom: 50px;}
    .technology .tech-bg-cont{height: initial; min-height: initial; max-height: initial; padding-bottom: 6.66vh;}
    /* .technology .fp-tableCell{display: initial;} */
    .technology .content{padding-bottom: 72px;}
  }

  @media screen and (max-width:1399px){
    .technology .fp-tableCell{display: initial;}
    .technology .head {padding-bottom: 100px; padding-top: 0;}
    /* .technology .tech-bg-cont {height: 740px;} */
    .technology .content {width: 100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 50px; padding-bottom: 50px;}
    .technology .content .item .tit {font-size: 28px;}
    .technology .content .item .tit-en {font-size: 18px;}
    .technology .content .item .num {font-size: 49px;}
    .technology .content .item .icon {padding-top: 30px; }
    .technology .content .item .icon img {width: 100px;}

  }

  @media screen and (max-width:767px){
    .technology .content {grid-template-columns: repeat(1,1fr);}
    /* .technology .tech-bg-cont {height: 1150px;} */
    .technology .content .item .tit {font-size: 24px; padding-bottom: 0.3em;}
  }





  .etc.container {padding-block: 150px;}
  .etc .link-more {border-color: #717171;}
  .etc .link-more .btn {color:#717171; }
  .etc .mp-tit-tag {position: absolute;bottom:100%;}


  .more-link {display: inline-flex; gap: 21px; align-items: center; --theme: var(--primary);}
  .more-link .val {font-size: 21px; font-weight: 700; font-family: var(--sub-font1); font-weight: 700; padding: .3em 0; border-bottom: 2px solid var(--theme); color: var(--theme); line-height: 1;}
  .more-link .icon {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--theme);}
  .more-link .icon .arrow {border-top-color: white; border-right-color: white; transform: translateX(-12.5%) rotate(45deg);}
  .mp-etc-block:not(:last-child) {margin-bottom: 80px;}
  .mp-news {position: relative; padding-top: 65px;}
  .mp-news .bar {width: 100%; border-top: 5px solid #000;}
  .mp-news .wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap: 39px;  margin:65px 0 80px; min-height: 270px;}
  .mp-news__head {display: flex; flex-direction: column; align-items: flex-start; grid-column: span 1;  position: relative; justify-content: space-between;}
  .mp-news__head .title {margin-top: -0.3em; font-size: 49px; font-family: var(--ff-secondary); font-weight: 700; text-transform: uppercase; margin-bottom: 0.5em;}
  .mp-news__head .desc {margin-bottom: 1em; font-size: 20px; color: #A8A8A8;}
  .mp-news__head .more-link {margin-top: auto; font-family: var(--ff-secondary);}
  .mp-news__ls {width: 100%; grid-column: span 2;}
  .mp-news__ls li:not(:last-child) {border-bottom: 1px solid #A8A8A8;}
  .mp-news__ls li a {display: flex; width: 100%; justify-content: space-between; gap: 2em; font-size: 20px; padding: 1em 0.5em 1em 1.2em;}
  .mp-news__ls li:first-child a {padding-top: 0;}
  .mp-news__ls li:last-child a {padding-bottom: 0;}
  .mp-news__ls li a .tit {}
  .mp-news__ls li a .date {flex-shrink: 0; font-size: 15px; color: #A8A8A8;}
  .quick_card {display: grid; grid-template-columns: repeat(3, 1fr); gap: 41px;}
  .quick_card__item {padding-bottom: 27px; border-bottom: 2px solid #D2D2D2;}
  .quick_card__item a {display: flex; flex-direction: column; height: 100%;}
  .quick_card__item .thumb {margin-bottom: 29px; display: block; border-radius: 20px;}
  .quick_card__item .cont {display: flex; flex-direction: column; align-items: flex-start; height: 100%; position: relative;}
  .quick_card__item .cont .tit {font-weight: 600; font-size: 26px;}
  .quick_card__item .cont .more-link {margin-left: auto; margin-top: auto; font-weight: 700; font-size: 17px; color:#717171; position: absolute;bottom:0; right:0;}

@media (hover:hover) {
  .etc .link-more:hover {border-color:var(--primary);}
  .etc .link-more:hover .btn {color:var(--primary);}
  .etc .link-more:hover .btn svg path {stroke:var(--primary);}

  .quick_card__item:hover .cont .more-link {color:var(--primary);}
  .quick_card__item:hover .cont .more-link svg path {stroke:var(--primary);}
}

  @media screen and (max-width: 1399px) {
    .etc.container {padding-block:0 100px;}
    .more-link {gap: 15px;}
    .more-link .val {font-size: 18px;}
    .more-link .icon {width: 30px; height: 30px;}
    .mp-mp-sc-etc-0block:first-child {padding-top: 0;}
    .mp-mp-sc-etc-0block:not(:last-child) {margin-bottom: 50px;}
    .mp-news .wrap {gap: 50px; grid-template-columns: repeat(1, 1fr); padding-top: 35px; margin: 0px;}
    .mp-news__head {gap: 20px;}
    .mp-news__head .title {font-size: 32px;}
    .mp-news__head .desc {font-size: 16px;}
    .mp-news__ls {grid-column: span 1;}
    .mp-news__ls li a {padding-left: 0; padding-bottom: 15px; font-size: 16px;}
    .quick_card {gap: 20px;}
    .quick_card__item .cont {padding-inline: 10px;}
    .quick_card__item .cont .more-link {position: static; font-size: 15px;}
    .quick_card__item .cont .tit {font-size: 20px;}

  }
  @media screen and (max-width: 767px) {
    .more-link {gap: 12px;}
    .more-link .val {font-size: 16px;}
    .more-link .icon {width: 26px; height: 26px;}
    .more-link .icon svg {width: 60%;}
    .mp-mp-sc-etc-0block:not(:last-child) {margin-bottom: 50px;}
    .mp-news .bar {border-top-width: 2px;}
    .mp-news .wrap {padding-top: 25px; gap: 30px;}
    .mp-news__head .title {font-size: 26px;}
    .mp-news__ls li a {font-size: 16px; padding: 10px 0;}
    .quick_card {grid-template-columns: repeat(1, 1fr);}
    .quick_card__item {padding-bottom: 15px;}
    .quick_card__item .thumb {margin-bottom: 15px;}
  }








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