@charset "utf-8";

.container {width: min(var(--container-wide-width), calc(100% - 100px));}

/* common */
.img-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-title {font-size: 50px; font-weight: 700; line-height: 1.36; padding-bottom: 40px;}
.mp-desc {font-size: 18px; line-height: 1.77;}
.mp-tag {font-size: 30px; font-family: var(--ff-secondary); color:#fff; text-transform: uppercase; font-weight: 700; display: block; padding-bottom: 1rem;}

.link-btn {}
.link-btn .btn { font-family: var(--ff-secondary); display: flex; gap: 1rem; align-items: center;}
.link-btn .btn .txt {font-size: 20px;font-weight: 600; color:#575757; text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 1px; text-transform: uppercase;transition: .3s;}
.link-btn .btn .arr {color:#fff; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #898989; font-weight: 600; transition: .3s;}

.link-btn.gray .btn .txt { color:#9A9A9A;}
.link-btn.gray .btn .arr { background: #9A9A9A;}

@media screen and (hover: hover){
  .link-btn .btn:hover .txt {color:var(--primary);}
  .link-btn .btn:hover .arr {transform: translateX(5px); color:#fff; background: var(--primary);} 
}
@media screen and (max-width: 1399px) {
  .container {width: min(calc(100% - 30px), 720px)}
  .section {height: auto !important; overflow: hidden;}
  .section .fp-tableCell {display: block !important; height: auto !important;}
  .mp-title {font-size: 32px; padding-bottom: 24px;}
  .mp-desc {word-break: keep-all;}
  .mp-tag {font-size: 20px;}
  .link-btn .btn .txt {font-size: 16px;}
  .link-btn .btn .arr {width: 24px; height: 24px;}
}
@media screen and (max-width: 767px) {
  .mp-desc {font-size: 16px; }
  .mp-title {font-size: 26px;}
  .mp-tag {font-size: 18px; padding-bottom: .5rem;}

}


/* visual */
.main-visual {width: 100%; position: relative; height: 100vh;}
.main-visual .visual-bg {width: 100%; height: 100%;}
.main-visual .page {position: relative;}
.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 100%); z-index: 1; mix-blend-mode: multiply;}
.main-visual .container {height: 100%;display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;}
.main-visual .content {color:#fff; position: relative;width: 100%; padding-top: 200px; transform: translateX(100px); opacity: 0; transition: .8s;}
.main-visual .content .sbj {font-size: 56px; font-weight: 600; line-height: 1.53; font-family: var(--ff-secondary);}
.main-visual.init .swiper-slide-active .content { opacity: 1; transform: translateX(0px); }
.main-visual-nav {position: absolute; z-index: 10; bottom: 90px; left: 50%; width: 100%; transform: translate(-50% , 0);}
.main-visual-nav .container {display: flex; align-items: center; justify-content: center; 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; flex-direction: column; align-items: center; gap: .5em; width: 100px; height: auto; background: none; margin: 0px !important; opacity: 1;}
.main-visual-nav .pagination-item .no {font-weight: 500;  font-size: 16px; line-height: 1; color:rgb(255,255,255,.4);}
.main-visual-nav .pagination-item .progress {position: relative; transition: width .7s; width: 100%; height: 3px; background: rgb(255,255,255,.4); flex-shrink: 0; }
.main-visual-nav .pagination-item .progress::after {position: absolute; content: ''; display: block; width: 100%; height: 100%;  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 .no {color:var(--primary); font-weight: 600;}
.main-visual-nav .pagination-item.swiper-pagination-bullet-active .progress {width: 100%;}
.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: var(--primary); 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;}


  @media screen and (max-width:1399px){
    .main-visual .content .sbj {font-size: 40px;}
    .main-visual-nav .container {padding-bottom: 0;}
    .main-visual-nav {bottom: 100px;}
  }

  @media screen and (max-width:767px){
    .main-visual .content .sbj {font-size: 28px;}
    .main-visual .container {align-items: center; justify-content: center; text-align: center; padding-bottom: 0;}
    .main-visual-nav {bottom: 70px;}
    .main-visual-nav .pagination-item .no {font-size: 14px;}
  }


  /* company */
  .company {position: relative;}
  .company .bg-gray {position: absolute;bottom:0; left:0; width: 100%; height: 40%; background: #F2F2F2;}
  .company .container {position: relative;display: flex; align-items: center;}
  .company .mp-head {display: flex; flex-direction: column; gap: 374px; position: relative; z-index: 10;}
  .company .link-btn {display: inline-flex; gap: 3rem;}
  .company .comp-list {position: absolute; top:50%; transform: translateY(-50%);height: 100%; width:100%;}
  .company .comp-list .item {display: block; position: absolute; padding: 35px 30px; color: #fff; overflow: hidden; border-radius: 15px; display: flex; flex-direction: column;justify-content: space-between; transition:.3s ease; }
  .company .comp-list .item:nth-child(1) {top: 0; right: 0; width: 720px; min-height: 287px;}
  .company .comp-list .item:nth-child(2) {top: 326px; right: 444px; width: 505px; min-height: 341px;}
  .company .comp-list .item:nth-child(3) {top: 326px; right: 0; width: 406px; min-height: 427px;}
  .company .comp-list .item::before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: linear-gradient(180deg, rgba(0 0 0 0), rgba(0 0 0 1)); z-index: 1;}
  .company .comp-list .item h3 {position: relative; font-size: 28px; font-weight: 700; z-index: 2;}
  .company .comp-list .item .desc {position: relative; font-size: 16px; line-height: 1.625; z-index: 2;}
  .company .comp-list .item:nth-child(1) p {margin-top: 150px;}
  .company .comp-list .item:nth-child(2) p {margin-top: 190px;}
  .company .comp-list .item:nth-child(3) p {margin-top: 277px;}

  @media screen and (hover: hover) {
  }
  @media screen and (max-width: 1399px) {
    .company {padding-block: 100px;}
    .company .comp-list {position: static; transform: translateY(0) !important; gap: 1rem; display: flex; flex-direction: column;}
    .company .comp-list .item {position: static !important; width: 100% !important; height: auto !important; padding: 20px; border-radius: 10px ; min-height: 200px !important;} 
    .company .container {flex-direction: column; gap: 80px;}
    .company .mp-head {gap: 30px;}
  }
  @media screen and (max-width: 767px) {
    .company .container {gap: 40px;}
    .company {padding-block: 80px;}
    .company .comp-list .item {padding: 25px 15px; justify-content: flex-end;}
    .company .comp-list .item h3 {font-size: 24px;}
  }
  @media screen and (max-width: 409px) {
    .company .comp-list .item .desc {font-size: 14px;}
    .company .comp-list .item {padding: 30px 15px;}
  }


/* business area */
.biz-area {}
.biz-area .content {display: flex;width: 100%;height: 100%;}
.biz-area .content .item {width: 100%;position: relative; overflow: hidden; transition:.3s ease; }
.biz-area .content .item .img-bg {transition:.5s var(--cubic-pop1); }
.biz-area .content .item .mp-head {width: 100%; height: 100%; display: flex; flex-direction: column;padding-top: 200px;padding-left: 60px; color:#fff; position: relative;transition:.5s var(--cubic-pop1);}
.biz-area .content .item .mp-head .mp-title {padding-bottom: 20px;}
.biz-area .content .item .mp-head .mp-desc {line-height: 1.55;}

@media screen and (hover: hover) {
  .biz-area .content .item:not(.active) {filter: brightness(0.5);}
  .biz-area .content .item:hover .img-bg {transform: scale(1.02); transition:.5s var(--cubic-pop1);}
  .biz-area .content .item:hover .mp-head {transform: translateY(-20px); }
}
@media screen and (min-width:1400px) and (max-width: 1599px) {
  .biz-area .content .item .mp-head {padding-left: 40px;}
  .biz-area .content .item .mp-head .mp-desc br {display: none;}
}
@media screen and (max-width: 1399px) {
  .biz-area .content {flex-direction: column; }
  .biz-area .content .item {padding: 20px;}
  .biz-area .content .item .mp-head {padding: 20px;background: rgba(71, 71, 71, 0.2); border-radius: 10px; backdrop-filter: blur(2px); webkit-backdrop-filter: blur(2px);}
  .biz-area .content .item .img-bg {object-position: center 60%;}
}
@media screen and (max-width: 767px) {
  .biz-area .content .item .mp-head .mp-title {padding-bottom: 15px;}
}
@media screen and (max-width: 409px) {
  .biz-area .content .item .mp-head {padding:20px 14px;}
  .biz-area .content .item .mp-head .mp-desc br {display: none;}
  .footer-col-body .slogan {font-size: 13px;}

}



/* partner */
.partner {position: relative; padding-block: 230px 100px;}
.partner .container {position: relative; display: flex;justify-content: space-between;  align-items: center; }
.partner .mp-head {color:#fff;  position: relative; align-self: start;}
.partner .mp-head .mp-tag {position: absolute;bottom:100%;}
.partner .partner-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 47px 30px;}
.partner .partner-list .item {background: #fff; border-radius: 10px; padding: 10px; border:1px solid #E1E1E1; box-shadow: 0 0 3px 6px rgba(0, 0, 0, 0.16); width: 208px; height: 94px;display: flex; align-items: center; justify-content: center;}


/* Quick */
.connect {padding-block: 140px 240px;}
.connect .mp-tag {color:#9A9A9A;}
.connect .mp-title {padding-bottom: 80px;}
.connect .link-btn {}
.connect .link-btn .txt {font-size: 18px; text-decoration:initial; }
.connect .quick_card {display: grid; grid-template-columns: repeat(3, 1fr); gap: 41px;}
.connect .quick_card__item {padding-bottom: 27px; border-bottom: 2px solid #dfdfdf;}
.connect .quick_card__item a {display: flex; flex-direction: column; height: 100%;}
.connect .quick_card__item .thumb {margin-bottom: 25px; display: block; border-radius: 20px; }
.connect .quick_card__item .thumb.video-box {padding-bottom: 50%;}
.connect .quick_card__item .cont {display: flex;  align-items: flex-end; height: 100%; justify-content: space-between;}
.connect .quick_card__item .cont .wrap {display: flex; flex-direction: column; align-items: flex-start; height: 100%;}
.connect .quick_card__item .cont .tit {font-weight:600;font-size: 26px; text-transform: uppercase; }
.connect .quick_card__item .cont .desc {line-height: 1.5;font-size: 16px; margin-top: 0.6em;}
.connect .quick_card__item .cont .more-link {margin-left: auto; margin-top: auto;}

  @media screen and (hover: hover) {}
  @media screen and (max-width:1399px){
    .partner {padding-block: 100px;}
    .partner .mp-head .mp-tag {position: static;}
    .partner .container {flex-direction: column;}
    .partner .partner-list {gap: 10px;}
    .partner .partner-list .item {width: 100%; height: auto; padding: 0;}
    .partner .container {gap: 50px;}

    .connect {padding-block: 100px 120px;}
    .connect .mp-title {padding-bottom: 46px;}
    .connect .quick_card {gap: 10px;}
    .connect .quick_card__item .cont {align-items: flex-start; gap: 15px;}
    .connect .quick_card__item .thumb {border-radius: 10px;}
    .connect .quick_card__item .thumb .btn--play {width: 60px; height: 60px;}
    .connect .quick_card__item .cont {flex-direction: column;}
    .connect .quick_card__item .cont .tit {font-size: 18px;}
    .connect .quick_card__item .cont .desc {font-size: 14px;}
    .connect .link-btn .txt {font-size: 16px;}
  }

  @media screen and (max-width:767px){
    .partner {padding-block: 80px;}
    .connect {padding-block: 80px;}
    .connect .mp-title {font-size: 24px;}
    .connect .quick_card {grid-template-columns: repeat(1,1fr); gap: 20px;}
    .connect .quick_card__item {padding-bottom: 10px;}
    .connect .link-btn {margin-left: auto;}
  }





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