:root {
    --color-interactive: 140, 100, 255;
    --color-interactive: 255, 255, 255;
}
body{
    margin: 0;
    padding: 0;
    background: #020415;
}
/* @font-face {
    font-family: 'Noto Serif SC';
    src: url('../fonts/SourceHanSerifSC-Regular.woff2') format('woff2'),
        url('../fonts/SourceHanSerifSC-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.fmNotoSerif{font-family: 'Noto Serif SC';font-weight: bold;} */

.screen1{
    font-size: 0;
    height: 100vh;
    position: relative;
}
.screen1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

.wrapbanner{ margin: 0 auto; width: 100%; position: relative; z-index: 1;}

.banner{ position: relative; overflow: hidden; z-index: 2;}
.banner a{display:block;position:relative;overflow: hidden; font-size: 0;}
.banner a::before{ content: '';display: block;width: 100%; height: 0; padding-bottom: 36.46%;
    background: url(../images/banner-mask.png) no-repeat center bottom/100% auto;
    position: absolute; left: 0;bottom: 0;z-index: 1;}
.banner .gp-img{padding-bottom: 44.65%; padding-bottom: 0; height: 100vh; background-size: cover;background-position: center;}
.banner .gp-img video,.banner .gp-img img{width:100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;}
.banner .gp-img video{min-width:100%;min-height: 100%;max-height: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%) scale(1.2);}
.banner .gp-img-responsive{ position: relative; padding-bottom: 56.25%; padding-bottom: 90vh;}
.banner .gp-img-responsive::before{ content: '';display: block;width: 100%;height: 100%;background: rgba(2, 4, 21, .4);
    position: absolute; left: 0;top: 0;z-index: 1;}
.banner .gp-img-responsive img{ transition: all .3s ease; /* position: absolute; top: 0;right: 0;height: 100%;object-fit: cover; */}
.banner .gp-img-responsive img:hover{ transform: scale(1);}
/* .banner .swiper-slide-active .gp-img-responsive img{ animation: bannerAnimate 5s ease-in-out forwards;} */
@keyframes bannerAnimate {
    0%{ transform: scale(1);}
    100%{ transform: scale(1.1);}
}

.wrapbanner .arrows{ position: absolute; bottom: 3rem; right: 50%; transform: translateX(50%);z-index: 10;}
.wrapbanner .arrows > *{ cursor: pointer; width: 6rem;}
.wrapbanner .arrows .next{ transform: rotateY(180deg);}
.wrapbanner .arrows .control{ margin: 0 3rem;}
.wrapbanner .arrows .control img:first-child{ display: block;}
.wrapbanner .arrows .control img:last-child{ display: none;}
.wrapbanner .arrows .control.stop img:first-child{ display: none;}
.wrapbanner .arrows .control.stop img:last-child{ display: block;}

/* 添加旋转动画 */
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.wrapbanner .aboutUs{
    position: absolute;
    left: 2.6vw;
    top: 43.5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.wrapbanner .aboutBtn{
    margin-top: 5rem;
    justify-content: flex-start;
}
.wrapbanner .aboutBtn a{
    position: relative;
    z-index: 1;
    display: block;
    border-radius: 1rem;
    font-size: 0;
    margin-right: 2rem;
}
.wrapbanner .aboutBtn a:first-child{
    background: #0066CC;
}
.wrapbanner .aboutBtn a:last-child{
    margin-right: 0;
}
.wrapbanner .aboutBtn a .my-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}


/* 将动画应用到 banner_btn::after 元素 */
.banner_btn::after{content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px dashed #c2e460;border-radius: 50%;animation: rotate 10s linear infinite;}
/* .banner_btn::before{content: '';display: block;position: absolute;left: 50%;top: 50%;transform:translateX(-50%) translateY(-50%);background: url(../images/banner_bot.png) no-repeat center/cover;width: 42px;height: 46px;animation: arrowBounce 2s ease-in-out infinite, arrowGlow 3s ease-in-out infinite;} */
.banner_btn::before{content: '';display: block;position: absolute;left: 50%;top: 50%;transform:translateX(-50%) translateY(-50%);background: url(../images/banner_bot.png) no-repeat center/cover;width: 42px;height: 46px;animation: arrowBounce 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite, arrowGlow 3s ease-in-out infinite;}
/* 向下跳动动画 */
@keyframes arrowBounce {
  0%, 100% {transform: translateX(-50%) translateY(-50%) scale(1);}
  30% {transform: translateX(-50%) translateY(-70%) scale(1.05);}
  40% {transform: translateX(-50%) translateY(-30%) scale(0.95);}
  50% {transform: translateX(-50%) translateY(-55%) scale(1);}
  60% {transform: translateX(-50%) translateY(-45%) scale(1);}
  70% {transform: translateX(-50%) translateY(-50%) scale(1);}
}

/* 呼吸光效动画 */
@keyframes arrowGlow {
  0%, 100% {filter: drop-shadow(0 0 5px rgba(194, 228, 96, 0.2));}
  50% {filter: drop-shadow(0 0 15px rgba(194, 228, 96, 0.7));}
}



.banner_btn:hover{background-color: rgba(194, 228, 96, 0.1);box-shadow: 0 0 20px rgba(194, 228, 96, 0.4);}
.banner_btn:hover::before{animation-play-state: paused;transform: translateX(-50%) translateY(-40%) scale(1.1);filter: brightness(1.2);}

.wrapbanner .swiper_menu{text-align: center;padding: 0;font-size: 0;position: absolute;right: 0px;bottom: 50%;transform: translateY(50%); z-index: 2;
    width: 100%; padding-right: 50px; box-sizing: border-box;pointer-events: none; text-align: justify;pointer-events: none;-ms-pointer-events: none;}
.wrapbanner .swiper_menu::after{ content: '';display: inline-block;width: 100%;}
.wrapbanner .arrow{width: 100px;height: 100px;display: inline-block;vertical-align: top;margin: 0;cursor: pointer;border-radius: 50%;
    pointer-events: all;transform: translateX(-50%);}
/* .wrapbanner .next{background: url(../images/banner-next.png);} */
.wrapbanner .arrow img{ width: 100%;}

.wrapbanner .swiper-pagination{ position: absolute;right: 2.6vw;top: 17rem;
    display: flex;display: -ms-flexbox; flex-direction: column;align-items: flex-end; font-size: 0;}
.wrapbanner .swiper-pagination .swiper-pagination-bullet{width: 3rem;height: 1px;background: #D7E1F0;opacity: 1;margin-bottom: 2rem;border-radius: 0;}
.wrapbanner .swiper-pagination .swiper-pagination-bullet:last-child{ margin-bottom: 0;}
.wrapbanner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 5rem; height: 1.5rem; opacity: 1;background: url(../images/banner-dot.png) no-repeat center right/auto 100%;
}

.content{padding: 0;position:relative;z-index:10;overflow-x: clip; margin-top: 0rem;}
.modeTil{ position: relative;}

.wrap_mode01{position: relative;z-index: 5; font-size: 0; overflow-x: clip; padding: 5rem 0 12rem;}
.wrap_mode01::before{
    content: '';
    display: none;
    width: 111rem;
    height: 100%;
    min-height: 71rem;
    position: absolute;
    left: 0;
    bottom: -10rem;
    z-index: -1;
    background: url(../images/row01-light.png) no-repeat bottom left/100% auto;
    pointer-events: none;
}
/* .wrap_mode01::after{
    content: '';
    display: block;
    width: 57.5rem;
    height: 94rem;
    background: url(../images/index-bg1.png) no-repeat left bottom/100% auto;
    position: absolute;
    left: 0;
    bottom: -38rem;
    z-index: -1;
} */
.mode01 { position: relative;}
.mode01 a{ position: relative;}
.content .modeTil{ text-align: center;}
.content .modeTil img{ width: auto;}
.wrap_mode01 img{ width: 100%;}
.wrap_mode01 .modeCon{ position: relative;}
.wrap_mode01 .modeCon::before{
    content: '';
    display: none;
    width: 12rem;
    height: 12rem;
    position: absolute;
    bottom: 5rem;
    right: 15rem;
    z-index: 1;
    background: url(../images/row01-ico.png) no-repeat center top/100% auto;
    pointer-events: none;
    transform-origin: center;
    animation: circle360 10s linear infinite reverse;
}
@keyframes circle360 {
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(-360deg);}
}


.wrap_mode02{ position: relative;font-size: 0;z-index: 1; padding: 0rem 0 15rem;}
/* .wrap_mode02::before,
.wrap_mode02::after{ content: ''; display: block; width: 100%; padding-bottom: 66.66%;
    background: url(../images/mode02-bg1.png) no-repeat center top/100% auto;
    position: absolute;left: 0;top: 5rem;z-index: -1; pointer-events: none;-ms-pointer-events: none;} */
.wrap_mode02::after{ top: 13rem; padding-bottom: 140%; background: url(../images/mode02-bg2.png) no-repeat center top/100% auto;z-index: -2;}
.mode02{ position: relative;z-index: 1;}
.mode02 .modeCon{ position: relative; margin-top: 0rem;}
.mode02Swiper{
    max-width: 153rem;
    /* margin: 0 auto; */
    position: relative;
}
.mode02Swiper .swiper-wrapper{
    align-items: flex-end;
}
.mode02Swiper .swiper-slide{
    transition: all 0.3s ease-in-out;
    transform-origin: center bottom;
}
.mode02Swiper .swiper-slide-active{
    width: 50rem;
}
/* .mode02Swiper .swiper-slide-prev{
    transform: scale(.8) rotateZ(-14deg) translateY(6rem);
}
.mode02Swiper .swiper-slide-next{
    transform: scale(.8) rotateZ(14deg) translateY(6rem);
}
.mode02Swiper .swiper-slide:has(+ .swiper-slide-prev){
    transform: scale(.6) translateX(13%) rotateZ(-26deg) translateY(33rem);
}
.mode02Swiper .swiper-slide-next + .swiper-slide{
    transform: scale(.6) translateX(-13%) rotateZ(26deg) translateY(33rem);
} */
.mode02Swiper .img{
    border-radius: 1rem;
    overflow: hidden;
}
.mode02Swiper .img img{
    width: 100%;
}
.mode02Swiper .txt{
    position: relative;
    text-align: center;
    font-size: 0;
    margin-top: 2rem;
    /* top: calc(100% + 5rem); */
    /* right: 50%; */
    /* width: 100rem; */
    /* transform: translateX(50%); */

}
.mode02Swiper .swiper-slide-active .txt{
    display: block;
}
.mode02Swiper .prev,
.mode02Swiper .next{
    width: 15rem;
    height: 15rem;
    font-size: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
.mode02Swiper .prev{
    /* left: 35%;
    bottom: 10%; */
    left: -10%;
    bottom: 10%;
    transform: translateX(-100%);
}
.mode02Swiper .next{
    right: -10%;
    bottom: -5%;
    transform: translateX(100%);
}
.wrap_mode02:hover .mode02Swiper .prev,
.wrap_mode02:hover .mode02Swiper .next{
    pointer-events: auto;
}
.mode02 .mode02-pagination{
    position: relative;
    width: 80rem;
    margin: 5rem auto 0;
    height: .4rem;
    background: rgba(255, 255, 255, 0.1);
}
/* .mode02 .mode02-pagination .swiper-pagination-progressbar-fill */
.mode02 .mode02-pagination .swiper-scrollbar-drag::before{
    content: '';
    display: block;
    position: absolute;
    top: -.2rem;
    left: 0;
    right: 0;
    bottom: -.2rem;
    z-index: 1;
    border-radius: 5px;
    background: #8486A2;
    cursor: pointer;
}


.wrap_mode03{padding: 0 0 0rem; position: relative;z-index: 5;}
.mode03{ position: relative; text-align: center; font-size: 0;}
.mode03 a{ position: relative; display: block;}
.mode03 .text{
    position: relative;
    z-index: 10;
    font-size: 6rem;
    line-height: 6rem;
    height: 12rem;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    pointer-events: none;
}
.mode03 .text span{
    display: inline-block;
    overflow: hidden;
    max-height: 0;
    pointer-events: all;
}
.mode03 .my-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.mode03 li:hover .my-container div{
    background: #0066CC !important;
    box-shadow: none !important;
    border: none !important;
}
.mode03 ul{
    /* position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0; */
    position: relative;
    z-index: 1;
    padding-top: 1.5rem;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mode03 li{
    /* position: absolute;
    left: 0%;
    top: 20%; */
    display: inline-block;
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: calc(20% - 2.4rem);
    margin-top: 3rem;
}
/* .mode03 li:nth-of-type(1){ top: 0%; left: 12.2%;}
.mode03 li:nth-of-type(2){ top: 5.6rem; left: 42%;}
.mode03 li:nth-of-type(3){ top: 15.4rem; left: 80%;}
.mode03 li:nth-of-type(4){ top: 23.2rem; left: 21%;}
.mode03 li:nth-of-type(5){ top: 28.5%; left: 57.9%;}
.mode03 li:nth-of-type(6){ top: 46%; left: 79%;}
.mode03 li:nth-of-type(7){ top: 53%; left: 0%;}
.mode03 li:nth-of-type(8){ top: 75%; left: 13%;}
.mode03 li:nth-of-type(9){ top: 91%; left: 37%;}
.mode03 li:nth-of-type(10){ top: 79%; left: 70.5%;} */

.mode03 li i{
    position: absolute;
    width: 3rem;
    height: 3rem;
    background: url(../images/mode03-bt-ico.png) no-repeat center top/100% auto;
    position: absolute;
    right: 3rem;
    bottom: 50%;
    transform: translateY(50%);
    opacity: 0;
}
.mode03 li:hover i{ opacity: 1;}
.mode03 .logoBox{
    position: absolute;
    width: 30rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mode03 .logoBox img{ width: auto;}
.mode03 .middle{
    padding-left: 2.5rem;
    padding-right: 1.7rem;
    margin-top: .7rem;
}
.mode03 .bottom{
    padding-left: 2.5rem;
    padding-right: 1.7rem;
    margin-top: 3.6rem;
}

.mode03 .detailMask{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    display: none;
}
.mode03 .detailMask:hover{
    cursor: url(../images/mode03-close.png), pointer;
}
.mode03 .btnDetail{
    position: fixed;
    top: 50%;
    right: 50%;
    z-index: 20;
    transform: translate(50%, -50%);
    width: 60rem;
    font-size: 0;
    display: none;
}
.mode03 .btnDetail .close{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.mode03 .btnDetail:hover .close{ opacity: 1;}
.mode03 .modeMore{ margin-top: 5rem;}


.wrap_mode04{position: relative; overflow: hidden; padding: 0;}
.mode04{ font-size: 0;}
.mode04 a{ display: block;}
.mode04 .modeCon{
    padding: 0 11rem;
}


.wrap_mode05{position: relative;background: #f6f6f6;
    padding: 10.98vh 0 0; height: 100vh; text-align: center;}
.mode05{ margin: 0 -4.42vw;}
.mode05 img{ width: 100%;}


.subContent{ font-size: 0; position: relative; overflow-y: clip;}
.sider{ width: 13.8%; position: absolute; top: 14%; top: 0; left: 13.5%; padding-top: 27.4%;}
.sider ul{ padding: 1rem 0 8rem; padding-right: 1rem; border-right: 1px solid #ebebeb; background: #f0f7f7; }
.sider ul::before{ content: '';display: block;width: 50vw; height: 100vh;background: #ebebeb;
    position: absolute; right: 0; top: 0;z-index: -1; pointer-events: none;}
.sider li{ position: relative;}
.sider li::before{ content: '';display: block;width: .5rem; height: 3rem;background: #20c965;
    position: absolute;right: -1rem; top: 50%;transform: translateY(-50%); opacity: 0;}
.sider li.on::before,
.sider li:hover::before{ opacity: 1;}
.sider li a{ display: block; line-height: 9rem; padding-left: 1.3rem; border-bottom: 1px dashed #cfcfcf; color: #000;
    white-space: nowrap;}
.sider li.on a{ color: #20c965;}




@media screen and (max-width:996px){
    .banner .gp-img{ height: 0; padding-bottom: 47.91%;}
}

/* 页面滚动首屏切换效果 */
body{
    height: 100%;
    padding: 0;
}
.body_home {
    background: #94070a;
    height: 100%;
    overflow: hidden;
}
.body_b {
    position: fixed;
    left: 0%;
    top: 100%;
    bottom: 0;
    right: 0;
    overflow: hidden;
    transition: top 0.7s cubic-bezier(0.5,0,0.2,1) 0s;
    z-index: 11;
    outline: none;
}
.body_b.showdiv {
    top: 0;
}
.body_b header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* background: #920303; */
}
.body_b header img{
    width: 100%;
}

/* Semantic content layout */
body{ color: #f7f8fb; font-family: Arial, Helvetica, sans-serif; }
.site-nav{ position: absolute; top: 4.8rem; left: 38%; display: flex; pointer-events: auto; }
.site-nav a,.language-switcher a{ color: #fff; font-size: 1.6rem; line-height: 1; text-decoration: none; }
.site-nav a:hover,.language-switcher a:hover{ color: #c2e460; }
.language-switcher{ position: absolute; top: 4.8rem; right: 2.6vw; display: flex; pointer-events: auto; }
.language-switcher span{ color: rgba(255,255,255,.5); font-size: 1.6rem; }
.wrapbanner .aboutUs{ width: min(44rem, 42vw); }
.aboutText .eyebrow,.section-kicker{ margin: 0 0 1.8rem; color: #c2e460; font-size: clamp(11px, .8vw, 16px); font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.aboutText h1{ margin: 0; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -.04em; line-height: .86; }
.hero-subtitle{ max-width: 34rem; margin: 2.5rem 0 0; color: rgba(255,255,255,.84); font-size: clamp(16px, 1.7vw, 30px); line-height: 1.35; }
.wrapbanner .aboutBtn{ margin-top: 4rem; }
.wrapbanner .aboutBtn a{ border-radius: 999px; font-size: clamp(13px, 1vw, 18px); font-weight: 700; line-height: 1; margin-right: 0; padding: 1.25rem 1.8rem; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.wrapbanner .aboutBtn .button-primary{ background: #0066cc; color: #fff; }
.wrapbanner .aboutBtn .button-ghost{ border: 1px solid rgba(255,255,255,.4); color: #fff; overflow: hidden; }
.wrapbanner .aboutBtn a:hover{ transform: translateY(-3px); }
.wrapbanner .aboutBtn .button-ghost span{ display: inline-block; margin-left: 1rem; color: #c2e460; }
.wrap_mode01 .modeCon{ display: flex; justify-content: space-between;align-items: center; }
.intro-copy{ font-size: 1.5rem; width: calc(50% - 5rem);}
.intro-copy h2,.section-heading h2{ margin: 0 0 2.5rem; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 6vw, 110px); font-weight: 700; letter-spacing: -.04em; line-height: .92; }
.intro-copy p:not(.section-kicker),.section-heading > p:last-child{ max-width: 43rem; margin: 0 0 1.6rem; color: rgba(255,255,255,.68); font-size: clamp(15px, 1.15vw, 21px); line-height: 1.65; }
.intro-image{ overflow: hidden; border-radius: 1.2rem; width: calc(50% - 5rem);}
.intro-image img{ display: block; width: 100%; height: auto; }
.text-link,.txt a{ display: inline-flex; align-items: center; gap: 1rem; color: #c2e460; font-size: clamp(14px, 1vw, 18px); font-weight: 700; text-decoration: none; }
.text-link span,.txt a span{ font-size: 1.8rem; transition: transform .25s ease; }
.text-link:hover span,.txt a:hover span{ transform: translateX(.4rem); }
.section-heading{ margin: 0 0 5rem; }
.section-heading h2{ margin-bottom: 1.5rem; }
.mode02Swiper .txt{ margin-top: 2rem; text-align: left; }
.mode02Swiper .txt h3{ margin: 0 0 1.2rem; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(18px, 1.5vw, 28px); line-height: 1.1; }

@media screen and (max-width:996px){
    .site-nav{ display: none; }
    .language-switcher{ top: 3.5rem; right: 2rem; }
    .wrapbanner .aboutUs{ left: 6vw; width: 90%; }
    .wrapbanner .aboutBtn{ margin-top: 2.5rem; }
    .aboutText h1{ font-size: 12rem;}
    .wrap_mode01 .modeCon{ grid-template-columns: 1fr; gap: 3rem; }
    .wrap_mode01{ padding: 5rem 0 8rem; }
    .wrap_mode02{ padding: 0 0 8rem; }
    .section-heading{ margin-bottom: 3rem; }
    .mode02Swiper{ overflow: hidden; }
    .mode02Swiper .swiper-slide-active{ width: auto; }
    .mode02Swiper .swiper-slide{ width: 78%; }
    .mode02 .mode02-pagination{ width: 100%; }
}
@media screen and (max-width:600px){
    .aboutText h1{ font-size: 4vw; }
    .hero-subtitle{ font-size: 1.2rem; }
    .wrapbanner .aboutBtn{ align-items: flex-start; flex-direction: column; }
    .wrapbanner .aboutBtn a{ font-size: 1rem; padding: 1rem 1.35rem; }
    .intro-copy h2,.section-heading h2{ font-size: 3.5rem; }
    .intro-copy p:not(.section-kicker),.section-heading > p:last-child{ font-size: 1.1rem; }
    .mode02Swiper .swiper-slide{ width: 88%; }
    .mode02Swiper .txt h3{ font-size: 1.6rem; }
}

/* Reference-inspired visual polish */
body{ background: #05060d; }
.wrapbanner{ min-height: 88vh; background: #05060d; }
.banner .gp-img-responsive{ height: 90vh; padding-bottom: 0; }
.banner .gp-img-responsive::before{ background: linear-gradient(90deg, rgba(3,5,16,.78) 0%, rgba(3,5,16,.24) 52%, rgba(3,5,16,.08) 100%), linear-gradient(0deg, rgba(3,5,16,.9) 0%, transparent 42%); }
.wrapbanner .aboutUs{ top: 56%; }
.aboutText h1{ line-height: .82; }
.hero-subtitle{ max-width: 37rem; font-weight: 500; }
.wrapbanner .aboutBtn a{ min-height: 4.8rem; display: inline-flex; align-items: center; }
.wrapbanner .aboutBtn .button-primary{ box-shadow: 0 12px 28px rgba(0,102,204,.3); }
.content{ background: linear-gradient(180deg, #05060d 0%, #0a0b14 46%, #05060d 100%); }
.wrap_mode01{ padding-top: clamp(8rem, 12vw, 16rem); padding-bottom: clamp(9rem, 14vw, 18rem); }
.intro-copy h2,.section-heading h2{ font-size: clamp(48px, 6.4vw, 122px); }
.intro-copy p:not(.section-kicker),.section-heading > p:last-child{ max-width: 48rem; }
.intro-image{ border: 1px solid rgba(255,255,255,.16); box-shadow: 0 2rem 6rem rgba(0,0,0,.28); }
.wrap_mode02{ padding-top: clamp(7rem, 10vw, 13rem); padding-bottom: clamp(10rem, 15vw, 20rem); background: #0a0b14; }
.section-heading{ display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(28rem, 1.2fr); column-gap: clamp(3rem, 8vw, 12rem); align-items: end; }
.section-heading .section-kicker{ grid-column: 1 / -1; }
.section-heading h2{ margin-bottom: 0; }
.section-heading > p:last-child{ margin-bottom: .5rem; }
.mode02Swiper{ max-width: none; margin-top: clamp(4rem, 7vw, 9rem); }
.mode02Swiper .swiper-slide{ padding-bottom: 2rem; }
.mode02Swiper .img{ border-radius: 0; border: 1px solid rgba(255,255,255,.14); background: #151725; }
.mode02Swiper .img img{ display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mode02Swiper .swiper-slide:hover .img img{ transform: scale(1.04); }
.mode02Swiper .txt{ padding: 0 .2rem; }
.mode02Swiper .txt h3{ font-family: Arial, Helvetica, sans-serif; font-weight: 700; }
.mode02Swiper .txt a{ text-transform: uppercase; letter-spacing: .08em; max-width: 2.16rem;}
.mode02 .mode02-pagination{ margin-top: 3rem; background: rgba(255,255,255,.18); }
.mode02 .mode02-pagination .swiper-scrollbar-drag::before{ background: #c2e460; }
footer{ background: #05060d; }

@media screen and (max-width:996px){
    .wrapbanner{ min-height: unset; }
    .banner .gp-img-responsive{ height: 0 !important; padding-bottom: 56.25%;}
    .wrapbanner .aboutUs{ top: 50%; }
    .section-heading{ display: block; }
    .section-heading > p:last-child{ margin-top: 2rem; }
    .mode02Swiper{ margin-top: 4rem; }
}
@media screen and (max-width:600px){
    .banner .gp-img-responsive{ height: 82vh; }
    .wrapbanner .aboutUs{ top: 57%; left: 2rem; width: calc(100% - 4rem); }
    .aboutText h1{ max-width: 100%; font-size: 48px; letter-spacing: -.06em; overflow-wrap: anywhere; }
    .aboutText .eyebrow{ max-width: 18rem; }
    .wrap_mode01{ padding-top: 7rem; }
    .intro-copy h2,.section-heading h2{ font-size: 3.7rem; }
    html,body{ overflow-x: hidden; }
}