@charset "utf-8";

/* Default */
.mp-article {padding-block: 138px;}
.mp-article__title {font-size: 56px; font-weight: 400; color: #000; margin-bottom: 0.53em;}
.mp-article__title .label {display: block; font-size: .46em; color: var(--primary); font-weight: 700; line-height: 1.3; margin-bottom: 0.5em;}

.ly-split {display: flex; gap: 75px;}
.ly-split .head {width: 480px; flex-shrink: 0;}
.ly-split .body {width: 100%;}

@media screen and (max-width: 1399px) {
  .mp-article {padding-block: 120px;}
  .mp-article__title {font-size: 32px;}

  .ly-split {flex-direction: column; gap: 30px;}
  .ly-split .head {width: 100%;}
}
@media screen and (max-width: 767px) {
  .mp-article {padding-block: 100px;}
  .mp-article__title {font-size: 25px;}
  .mp-article__title .label {font-size: 0.6em;}
}


/* Intro Hero */
.intro-hero {--top-padding: 205px; overflow: hidden; position: relative; top: 0; left: 0; height: 180vh;}
.intro-hero .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; will-change: transform;}
.intro-hero .content {position: relative; padding-top: var(--top-padding);}
.intro-hero .typo {font-size: 170px; font-weight: 500; color: #000; line-height: 1.3;}
.intro-hero .typo span {display: block;}
.intro-hero .typo .t2 {display: flex; align-items: center; gap: 48px;}
.intro-hero .typo .t2::before {display: block; content: ''; width: 100%; height: 10px; background: #000; border-radius: 10px;}
.intro-hero .typo span small {display: block; font-size: 0.6em; line-height: 1; text-indent: 0.1em; margin-bottom: -0.2em;}
.intro-hero .desc {position: absolute; top: 310px; right: 67px; color: #888;}

.intro-hero .overlay {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 440px; overflow: hidden; will-change: transform;}
.intro-hero .overlay .bg {background: #fff;}
.intro-hero .overlay .content {}

.intro-hero .effect {position: relative; z-index: 0; height: calc(var(--vh, 1vh) * 100);}
.intro-hero .effect .content {opacity: .5; will-change: transform;}
.intro-hero .effect .bg {display: block; width: 100%;}
.intro-hero .effect .typo {color: #fff;}
.intro-hero .effect .typo span {opacity: 1;}
.intro-hero .effect .typo .t2::before {background: #fff; opacity: 1;}
.intro-hero .effect .desc {color: #fff;}

@media screen and (max-width: 1599px) {
  .intro-hero .typo {font-size: 130px;}
  .intro-hero .overlay {height: 390px;}
}

@media screen and (min-width: 1399px) {
  .intro-hero {--top-padding: 150px;}
}

@media screen and (max-width: 1399px) {
  .intro-hero {--top-padding: 160px; height: 100vh;}
  .intro-hero .typo {font-size: 70px;}
  .intro-hero .typo .t2 {gap: 25px;}
  .intro-hero .typo .t2::before {height: 7px;}
  .intro-hero .desc {position: static; text-align: right; margin-top: .5em;}
  .intro-hero .overlay {height: auto; padding-bottom: 50px;}
  .intro-hero .effect .content {opacity: 1;}
  .intro-hero .typo span small {font-size: 1em; line-height: inherit;}
}
@media screen and (max-width: 767px) {
  .intro-hero {--top-padding: 200px;}
  .intro-hero .typo {font-size: 50px; text-align: center;}
  .intro-hero .typo .t2 {gap: 20px; justify-content: center;}
  .intro-hero .typo .t2::before {height: 5px; display: none;}
  .intro-hero .desc {font-size: 15px; text-align: center;}
  .intro-hero .overlay {padding-bottom: 30px; display: none;}
  .intro-hero .typo span small {text-indent: 0; margin-bottom: 0;}
}



/* About us */
.mp-about-us {padding: 0; padding-bottom: 0;}
.mp-about-us .container {display: flex; align-items: flex-start; gap: 50px;}
.mp-about-us .container .content {position: relative; top: 0; padding-block: 176px 0; width: 50%;}
.mp-about-us .container .content .mp-article__title,
.mp-about-us .container .content .mp-article__title strong {letter-spacing: -0.06em;}
.mp-about-us .container .content .round-button {margin-top: 75px;}
.mp-about-us .container .cards {display: grid; grid-template-columns: repeat(2, 1fr); width: 50%; gap: 80px 29px; padding-block: 120px 300px;}
.mp-about-us .container .cards .card {display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 420px; padding: 40px; padding-top: 72px; border-radius: 30px; background: #F2F2F2; border: 1px solid #E7E7E7; box-shadow: 20px 20px 30px rgb(0,0,0,.15);}
.mp-about-us .container .cards .card .icon {margin-bottom: auto;}
.mp-about-us .container .cards .card .tit {color: #000; font-size: 30px; font-weight: 700; line-height: 1.45; margin-bottom: 0.6em;}
.mp-about-us .container .cards .card .desc {font-family: var(--font-secondary); font-size: 20px; color: #888; line-height: 1.5;}
.mp-about-us .container .cards .card:nth-child(even) {transform: translate(0, 220px);}

@media screen and (max-width: 1399px) {
  .mp-about-us {padding-block: 120px;}
  .mp-about-us .container {flex-direction: column;}
  .mp-about-us .container .content {width: 100%; padding: 0;}
  .mp-about-us .container .content .round-button {margin-top: 45px;}
  .mp-about-us .container .cards {padding: 0; width: 100%; gap: 20px;}
  .mp-about-us .container .cards .card {height: auto; transform: translate(0)!important; padding: 25px; border-radius: 15px; box-shadow: 10px 10px 15px rgb(0,0,0,.05);}
  .mp-about-us .container .cards .card .tit {font-size: 20px;}
  .mp-about-us .container .cards .card .desc {font-size: 16px;}
  .mp-about-us .container .cards .card .icon {position: absolute; top: 20px; right: 20px; height: 30px;}
}
@media screen and (max-width: 767px) {
  .mp-about-us .container .content .round-button {margin-top: 25px;}
  .mp-about-us .container .cards {grid-template-columns: repeat(1, 1fr);}
  .mp-about-us .container .cards .card .icon {width: 30px; height: auto;}
  .mp-about-us .container .cards .card .tit {font-size: 20px;}
  .mp-about-us .container .cards .card .desc {font-size: 16px;}
}



/* Plug */
.mp-plug {position: relative; z-index: 1; padding-bottom: 190px;}
.mp-plug .banner {position: relative; opacity: 0;}
.mp-plug .banner .bg {position: relative; top: 0; width: 100%; height: 512px; z-index: -1;}
.mp-plug .banner .dim {position: absolute; top: 0; width: 50%; height: 100%; background: #f00; will-change: transform; background: #fff;}
.mp-plug .banner .dim1 {left: 0;}
.mp-plug .banner .dim2 {right: 0;}
.mp-plug .banner .content {margin-top: -220px; padding-inline: 100px; display: flex; gap: 90px; justify-content: space-between;}
.mp-plug .banner .content .title {color: #fff;}
.mp-plug .banner .content .title .tag {display: block; font-size: 26px; font-weight: 700; font-family: var(--font-secondary); margin-bottom: 0.7em;}
.mp-plug .banner .content .title svg {display: block;}
.mp-plug .banner .content .slogan {text-align: right; padding-top: 50px;}
.mp-plug .banner .content .slogan .t {display: block; line-height: 1.5;}
.mp-plug .banner .content .slogan .t1 {padding-right: 2.7em;}
.mp-plug .banner .content .slogan .t2 {}
.mp-plug .banner .content .slogan .t3 {padding-right: 3.25em;}

.mp-plug .accordion {display: flex; align-items: center; padding-inline: 18px; height: 600px; margin-top: 500px;}
.mp-plug .accordion .item {position: relative; width: 25%; background-color: #000; color: #fff; height: 538px; transition: all .4s linear; overflow: hidden;}
.mp-plug .accordion .item:nth-child(1) {background-color: #006EFF;}
.mp-plug .accordion .item:nth-child(2) {background-color: #111833;}
.mp-plug .accordion .item:nth-child(3) {background-color: #0058CD;}
.mp-plug .accordion .item:nth-child(4) {background-color: #004094;}
.mp-plug .accordion .item .bg {position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-image: var(--bg); opacity: 0; transition: opacity .4s;}
.mp-plug .accordion .item .cont {flex-shrink: 0; position: relative; z-index: 1; padding: 90px 70px; width: 1000px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; opacity: 0; transition: opacity .4s;}
.mp-plug .accordion .item .cont .tit {font-size: 45px; font-weight: 300; line-height: 1; margin-bottom: 0.3em;}
.mp-plug .accordion .item .cont .desc {margin-bottom: 2em;}
.mp-plug .accordion .item .cont .round-button {background: rgb(0,0,0,.6);}
.mp-plug .accordion .item .cont .round-button span {position: relative; z-index: 1;}
.mp-plug .accordion .item .cont .round-button::before {z-index: 0;}
.mp-plug .accordion .item .cont .round-button::after {border-color: #fff;}
.mp-plug .accordion .item .tag {position: absolute; top: 50%; right: 30px; transform: translate(50%, -50%) rotate(90deg); white-space: nowrap; font-size: 18px; font-family: var(--font-secondary);}
.mp-plug .accordion .item.active {width: 500%; height: 100%;}
.mp-plug .accordion .item.active .bg {opacity: 1;}
.mp-plug .accordion .item.active .cont {opacity: 1;}

@media screen and (max-width: 1399px) {
  .mp-plug {padding-bottom: 150px;}
  .mp-plug .banner .bg {height: 400px;}
  .mp-plug .banner .content {padding: 0; margin-top: -160px; gap: 40px;}
  .mp-plug .banner .content {flex-direction: column; justify-content: flex-start;}
  .mp-plug .banner .content .title .tag {font-size: 22px;}
  .mp-plug .banner .content .title svg {width: 220px; height: auto;}

  .mp-plug .accordion {height: 400px; padding: 0;}
  .mp-plug .accordion .item {height: 100%;}
  .mp-plug .accordion .item.active {width: 220%;}
  .mp-plug .accordion .item .cont {padding: 40px; width: 500px;}
  .mp-plug .accordion .item .cont .tit {font-size: 30px;}
  .mp-plug .accordion .item .cont .desc {font-size: 15px; margin-bottom: 1em;}
  .mp-plug .accordion .item .tag {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .mp-plug {padding-bottom: 100px;}
  .mp-plug .banner .bg {height: 260px;}
  .mp-plug .banner .content {margin-top: -70px;}
  .mp-plug .banner .content .title .tag {font-size: 18px; color: #000;}
  .mp-plug .banner .content .title svg {width: 180px;}
  .mp-plug .banner .content .title svg path {fill: #000;}
  .mp-plug .banner .content .slogan {font-size: 22px; padding-top: 0;}

  .mp-plug .accordion {height: auto; display: block; width: calc(100% + 30px); margin-left: -15px; margin-top: 220px;}
  .mp-plug .accordion .item {width: 100%!important;}
  .mp-plug .accordion .item .bg {opacity: 1!important;}
  .mp-plug .accordion .item .tag {display: none;}
  .mp-plug .accordion .item .cont {width: 100%; opacity: 1!important; padding: 30px 20px;}
  .mp-plug .accordion .item .cont .tit {font-size: 24px;}
  .mp-plug .accordion .item .cont .desc {font-size: 14px;}
  .mp-plug .accordion .item .cont .round-button {font-size: 14px; height: 38px;}
}



/* Core tech */
.mp-tech {position: relative;}
.mp-tech .bg {width: 100%; height: 525px; position: absolute; top: 0; left: 0; z-index: -1;}
.mp-tech .cards {display: flex; gap: 50px; justify-content: center; margin-top: 64px;}
.mp-tech .cards .card {width: min(100%, 526px); text-align: center; border-radius: 30px; background: #fff; border: 1px solid var(--gray); transition: box-shadow .4s;}
.mp-tech .cards .card > a {padding: 60px 20px 68px 20px; display: flex; flex-direction: column; align-items: center; opacity: .5; transition: opacity .4s;}
.mp-tech .cards .card .icon {margin-bottom: 40px;}
.mp-tech .cards .card .tit {font-size: 42px; font-weight: 700; font-family: var(--font-secondary); margin-bottom: 0.3em; color: var(--black);}
.mp-tech .cards .card .desc {}
.mp-tech .cards .card .round-button {margin-top: 67px;}

@media (hover: hover) {
  .mp-tech .cards .card:hover {box-shadow: 20px 20px 30px rgb(0,0,0,.15);}
  .mp-tech .cards .card:hover > a {opacity: 1;}
  .mp-tech .cards .card:hover .round-button {color: #fff; border-color: var(--primary);}
  .mp-tech .cards .card:hover .round-button::before {transform: translate(0);}
  .mp-tech .cards .card:hover .round-button::after {border-color: #fff;}
}
@media screen and (max-width: 1399px) {
  .mp-tech .cards {gap: 20px;}
  .mp-tech .cards .card {border-radius: 20px;}
  .mp-tech .cards .card > a {padding: 40px 20px; height: 100%; opacity: 1!important;}
  .mp-tech .cards .card .icon {width: auto; height: 100px;}
  .mp-tech .cards .card .tit {font-size: 28px;}
  .mp-tech .cards .card .desc {line-height: 1.5; margin-bottom: auto;}
  .mp-tech .cards .card .round-button {margin-top: 40px;}
}
@media screen and (max-width: 767px) {
  .mp-tech .bg {height: 400px;}
  .mp-tech .cards {margin-top: 40px; flex-wrap: wrap; justify-content: center;}
  .mp-tech .cards .card {width: max(calc(50% - 10px), 320px);}
  .mp-tech .cards .card .icon {height: 60px; margin-bottom: 25px;}
  .mp-tech .cards .card .tit {font-size: 22px;}
}


/* News */
.latest-news {padding-block: 20px 54px;}
.latest-news .item {border-bottom: 1px solid #333;}
.latest-news .item a {display: block; padding-block: 35px;}
.latest-news .item .label {display: block; color: #c8c8c8; font-size: 27px; font-weight: 500; font-family: var(--font-secondary); line-height: 1; margin-bottom: 0.4em;}
.latest-news .item .cont {display: flex; justify-content: space-between; align-items: center; gap: 100px;}
.latest-news .item .tit-wrap {display: flex; align-items: center; font-size: 27px; font-weight: 500; line-height: 1.5; }
.latest-news .item .date {flex-shrink: 0; padding-right: 0.6em; margin-right: .6em; position: relative;}
.latest-news .item .date::after {position: absolute; content: ''; display: block; width: 3px; height: .8em; background: var(--gray-darker); right: 0; top: 50%; transform: translate(50%, -50%);}
.latest-news .item .tit {align-items: center;}
.latest-news .item .icon {flex-shrink: 0;}

@media (hover: hover) {
  .latest-news .item a:hover {opacity: .5;}
  .latest-news .item a:hover .icon :where(line, path) {stroke: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .latest-news {padding-block: 0px 40px;}
  .latest-news .item:first-child a {padding-top: 0;}
  .latest-news .item a {padding-block: 20px;}
  .latest-news .item .label {font-size: 20px;}
  .latest-news .item .tit-wrap {font-size: 22px;}
  .latest-news .item .icon {width: 20px;}
}
@media screen and (max-width: 767px) {
  .latest-news .item a {padding-block: 15px 10px}
  .latest-news .item .cont {gap: 30px;}
  .latest-news .item .label {font-size: 16px;}
  .latest-news .item .tit-wrap {font-size: 16px;}
  .latest-news .item .icon {width: 16px;}
}


/* Brands */
.mp-brand .ly-split {align-items: center;}
.brand-ls {display: flex; gap: 16px;}
.brand-ls .item {width: 100%; background: var(--gray-lighter); border: 1px solid #D9D9D9; border-radius: 30px; overflow: hidden;}
.brand-ls .item > a {display: flex; align-items: center; gap: 30px; justify-content: space-between; padding: 40px;}
.brand-ls .item > a .cont {}
.brand-ls .item > a .cont span {color: #000; font-size: 20px; font-weight: 500; line-height: 1; margin-bottom: 1em; display: block;}
.brand-ls .item > a .cont img {height: 43px;}
.brand-ls .item > a .cont .brand-golf {height: 50px;}
.brand-ls .item > a .round-button {flex-shrink: 0; border: none; padding: 0; overflow: visible;}

@media (hover: hover) {
  .brand-ls .item:hover {opacity: .5;}
}
@media screen and (max-width: 1399px) {
  .brand-ls .item {border-radius: 20px;}
  .brand-ls .item > a {position: relative; padding: 30px; padding-left: 25px; align-items: flex-end;}
  .brand-ls .item > a .cont {width: 100%;}
  .brand-ls .item > a .cont span:not(.round-button) {line-height: 1.3; white-space: nowrap;}
  .brand-ls .item > a .cont img {height: 30px; display: block;}
  .brand-ls .item > a .round-button {height: auto; position: absolute; bottom: 15px; right: 20px;}
}
@media screen and (max-width: 767px) {
  .brand-ls {flex-direction: column;}
  .brand-ls .item {border-radius: 10px;}
  .brand-ls .item > a {padding-inline: 20px; flex-direction: row; align-items: center;}
  .brand-ls .item > a .cont span {font-size: 16px;}
  .brand-ls .item > a .round-button {position: static; font-size: 0; color: transparent;}
}



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