@charset "utf-8";



* {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    outline: 0;

    -webkit-text-size-adjust: none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



* {

    margin: 0;

    padding: 0;

}



@font-face {

    font-family: 'OPPOSans';

    src: url('../fonts/opposans-r.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'OPPOSans bold';

    src: url('../fonts/opposans-b.woff2') format('woff2');

    font-weight: normal;

    font-style: normal;

}


body {

    background: var(--white-color);

    font-family: 'OPPOSans', 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Arial', "sans-serif";

    font-size: 14px;

    color: #666;

}



/*用来解决在安卓上的点击出现篮框问题*/

body {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



/*解决ios上去除微信点击蓝色边框 */

a:focus, input:focus, p:focus, div:focus {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



li {

    list-style: none;

}



img[src=""], img:not([src]) {

    opacity: 0;

}



font {

    font-size: inherit;

    font-weight: inherit;

    color: inherit;

    font-family: inherit;

    font-style: inherit;

    text-transform: inherit;

}



body, html {

    height: 100%;

}



a, img, button, input, textarea, select {

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

}



input, input:focus, button, button:focus {

    box-shadow: none;

    outline: 0;

    border: none;

}



a {

    text-decoration: none;

    color: #333;

}



a:hover {

    text-decoration: none;

}



a:focus {

    text-decoration: none;

}



img {

    vertical-align: middle;

    border: none;

}



i {

    font-style: normal;

}



.img img {

    width: 100%;

}



.left {

    float: left;

}



.right {

    float: right;

}



.clear {

    clear: both;

}



.clear:after {

    content: '';

    height: 0;

    clear: both;

    display: block;

}



.oh {

    overflow: hidden;

}



h1, h2, h3, h4, h5, h6 {

    font-weight: normal;

    line-height: 1;

}



.pr {

    position: relative;

}



.tc {

    text-align: center;

}



.db {

    display: block;

}



.clearfix:after {

    content: "";

    display: block;

    height: 0;

    visibility: hidden;

    clear: both;

}



.sca {

    overflow: hidden;

}



.cp {

    cursor: pointer;

}

.one_line {

    overflow: hidden;

    white-space: nowrap;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

}

.two_line {

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}







/*图片悬浮放大*/

.sca>img {

    -webkit-transition: -webkit-transform .4s;

    transition: -webkit-transform .4s;

    -o-transition: transform .4s;

    transition: transform .4s;

    transition: transform .4s, -webkit-transform .4s;

    -webkit-transition: transform .4s;

}



.sca>img:hover {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



/*scroll*/

::-webkit-scrollbar {

    width: 4px;

    height: 2px

}



::-webkit-scrollbar-button:vertical {

    display: none

}



::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {

    background-color: #999;

}



::-webkit-scrollbar-thumb {

    border-radius: 0;

    background-color: #ccc;

}





.mo_show {

    display: none !important;

}



.dis_flex {

    display: flex;

}



.dis_between {

    justify-content: space-between;

}



.dis_center {

    align-items: center;

}



/* btn */



/* 按钮容器 */

.button-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



/* 按钮基本样式 */

.btn.gradient-button {

    position: relative; 

    display: flex;

    padding: 16px 20px 16px 26px;

    justify-content: space-between;

    align-items: center;

    overflow: hidden;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px; 

    border-width: 1px;

    border-style: solid;

    border-radius: 16px;

    transition: all 0.3s;

}

.btn span i {

    display: block;

    margin-left: 26px;

    width: 24px;

    height: 24px;

    background-repeat: no-repeat;

    background-position: center;

}



.blue_btn {

    background-color: var(--main-color);

    border-color: var(--main-color);

}

.blue_btn span {

    color: var(--white-color);

}

.white_btn {

    border-color: var(--white-color);

}

.blue_btn span i,

.opacity_btn span i,

.white_btn span i  {

    background-image: url(../images/jt_white.svg);

}

.black_btn {

    /* background-color: var(--white-color); */

    border-color: rgba(0, 0, 0, 0.20);;

}

.black_btn span {

    color: var(--dark-color);

}

.opacity_btn {

    background: rgba(255, 255, 255, 0.20);

    border-color: transparent;

    backdrop-filter: blur(8px);

}

.opacity_btn span,

.white_btn span {

    color: var(--white-color);

}

.black_btn span i{

    background-image: url(../images/jt_black.svg);

}

.black_btn:hover,

.opacity_btn:hover,

.white_btn:hover {

    background-color: var(--main-color);

    border-color: var(--main-color);

}

.black_btn:hover span{

   color: var(--white-color);

}

.black_btn:hover span i {

    background-image: url(../images/jt_white.svg);

}

.btn.gradient-button span {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;



    z-index: 2; 

}

@media (max-width:991px) {

.btn span i {

    margin-left: 25px;

}



}

@media (max-width:767px) {



.btn.gradient-button {

    padding: 14px 14px 14px 18px;

    font-size: 16px;

}

.btn span i {

    margin-left: 8px;

}

.light-effect {

    opacity: 0;

}



}

/* 光效元素 */

.light-effect {

    position: absolute;

    width: 120%; 

    height:220%;

    background-image: linear-gradient(

        135deg,

        #FFC300,

        #FF6A00

    );



    filter: blur(85px);

    opacity: 0;

    transition: 

        opacity 0.3s ease,

        transform 0.1s linear; 

    pointer-events: none;

    z-index: 1;

    transform: translate(-50%, -50%); 

}



.btn.gradient-button:hover .light-effect {

    opacity: 1; 

    transform: translate(

        calc(var(--mouse-x) * 1px), 

        calc(var(--mouse-y) * 1px)

    );

}



/*版心页面大小*/

.my-container {

    width: 100%;

    margin-right: auto;

    margin-left: auto;

    max-width: 1680px;

}

@media (max-width:1780px) {

    .my-container {

        padding: 0 100px;

    }



}

@media (max-width:1580px) {

    .my-container {

        padding: 0 90px;

    }



}



@media (max-width:1366px) {

    .my-container {

        padding: 0 90px;

    }



}

@media (max-width:1280px) {

    .my-container {

        padding: 0 80px;

    }



}

@media (max-width:1024px) {



    .my-container {

        padding: 0 60px;

    }

}



@media (max-width:991px) {

    .my-container {

        padding: 0 30px;

    }



}



@media (max-width:767px) {

    .my-container {

        max-width: 100%;

        padding: 0 16px

    }



    .mo_show {

        display: block !important;

    }



    .pc_show {

        display: none !important;

    }



}









.font16 {

    font-size: 16px;

}



.font18 {

    font-size: 18px;

}



.font20 {

    font-size: 20px;

}

.font22 {

    font-size: 22px;

}



.font24 {

    font-size: 24px;

}



.font26 {

    font-size: 26px;

}

.font28 {

    font-size: 28px;

}

.font30 {

    font-size: 30px;

}



.font32 {

    font-size: 32px;

}



.font36 {

    font-size: 36px;

}



.font38 {

    font-size: 38px;

}



.font40 {

    font-size: 40px;

}



.font42 {

    font-size: 42px;

}



.font46 {

    font-size: 46px;

}



.font48 {

    font-size: 48px;

}



.font50 {

    font-size: 50px;

}



.font52 {

    font-size: 52px;

}



.font56 {

    font-size: 56px;

}



.font60 {

    font-size: 60px;

}



.font64 {

    font-size: 64px;

}

.font68 {

    font-size: 68px;

}

@media (max-width:1580px) {

    .font50 {

        font-size: 46px;

    }



    .font52 {

        font-size: 48px;

    }

    .font60 {

        font-size: 58px;

    }



    .font64 {

        font-size: 60px;

    }

    .font68 {

        font-size: 64px;

    }



}

@media (max-width:1440px) {

    .font32 {

        font-size: 30px;

    }



    .font38 {

        font-size: 36px;

    }



    .font40 {

        font-size: 36px;

    }



    .font42 {

        font-size: 38px;

    }



    .font46 {

        font-size: 44px;

    }



    .font48 {

        font-size: 42px;

    }



    .font50 {

        font-size: 42px;

    }



    .font52 {

        font-size: 44px;

    }



    .font56 {

        font-size: 50px;

    }



    .font60 {

        font-size: 54px;

    }



    .font64 {

        font-size:56px;

    }

    .font68 {

        font-size: 60px;

    }



}



@media (max-width:1366px) {

    .font24 {

        font-size: 22px;

    }



    .font26 {

        font-size: 24px;

    }

    .font28 {

        font-size: 26px;

    }

    .font32 {

        font-size: 28px;

    }



    .font36 {

        font-size: 34px;

    }



    .font38 {

        font-size: 34px;

    }



    .font40 {

        font-size: 34px;

    }



    .font42 {

        font-size: 36px;

    }



    .font46 {

        font-size: 40px;

    }



    .font48 {

        font-size: 38px;

    }



    .font50 {

        font-size: 40px;

    }



    .font52 {

        font-size: 42px;

    }



    .font56 {

        font-size: 44px;

    }



    .font60 {

        font-size: 52px;

    }



    .font64 {

        font-size: 52px;

    }

    .font68 {

        font-size: 56px;

    }



}



@media (max-width:1280px) {

    .font26 {

        font-size: 22px;

    }



    .font30 {

        font-size: 28px;

    }



    .font32 {

        font-size: 28px;

    }



    .font36 {

        font-size: 32px;

    }



    .font38 {

        font-size: 32px;

    }



    .font40 {

        font-size: 32px;

    }



    .font42 {

        font-size: 32px;

    }



    .font46 {

        font-size: 36px;

    }



    .font48 {

        font-size: 38px;

    }



    .font50 {

        font-size: 38px;

    }



    .font52 {

        font-size: 38px;

    }



    .font56 {

        font-size: 42px;

    }



    .font60 {

        font-size: 50px;

    }



    .font64 {

        font-size: 50px;

    }

    .font68 {

        font-size: 52px;

    }



}



@media (max-width:991px) {

    .font24 {

        font-size: 22px;

    }



    .font30 {

        font-size: 26px;

    }

    .font32 {

        font-size: 26px;

    }

    .font36 {

        font-size: 30px;

    }



    .font38 {

        font-size: 30px;

    }



    .font40 {

        font-size: 30px;

    }



    .font42 {

        font-size: 30px;

    }



    .font46 {

        font-size: 32px;

    }



    .font48 {

        font-size: 34px;

    }



    .font50 {

        font-size: 36px;

    }



    .font52 {

        font-size: 36px;

    }



    .font56 {

        font-size: 40px;

    }



    .font60 {

        font-size: 40px;

    }



    .font64 {

        font-size: 40px;

    }

    .font68 {

        font-size: 40px;

    }

}



@media (max-width:767px) {

    .font20 {

        font-size: 18px;

    }



    .font24 {

        font-size: 20px;

    }



    .font26 {

        font-size: 22px;

    }

    .font28 {

        font-size: 22px;

    }

    .font30 {

        font-size: 22px;

    }



    .font32 {

        font-size: 24px;

    }



    .font36 {

        font-size: 24px;

    }



    .font38 {

        font-size: 26px;

    }



    .font40 {

        font-size: 26px;

    }



    .font42 {

        font-size: 26px;

    }



    .font46 {

        font-size: 26px;

    }



    .font48 {

        font-size: 26px;

    }



    .font50 {

        font-size: 26px;

    }



    .font52 {

        font-size: 26px;

    }



    .font56 {

        font-size: 26px;

    }



    .font60 {

        font-size: 26px;

    }



    .font64 {

        font-size: 26px;

    }

    .font68 {

        font-size: 28px;

    }

}



@media (max-width:360px) {

    .font24 {

        font-size: 18px;

    }



    .font30 {

        font-size: 22px;

    }



    .font32 {

        font-size: 22px;

    }



    .font36 {

        font-size: 22px;

    }



    .font38 {

        font-size: 22px;

    }



    .font40 {

        font-size: 22px;

    }

    .font46 {

        font-size: 24px;

    }



    .font48 {

        font-size: 24px;

    }

    .font50 {

        font-size: 24px;

    }



    .font52 {

        font-size: 24px;

    }

    /* .font56 {

        font-size: 24px;

    } */

    .font60 {

        font-size: 26px;

    }



}

@media (max-width:359px) {

/* 

    .font56 {

        font-size: 22px;

    } */



}



/* 逐个显示 */

/* 初始隐藏标题 */

.aos-animate-title {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.5s ease, transform 0.5s ease;

  }

  

  /* 动画完成后显示标题 */

  .aos-animate-title.animated {

    opacity: 1;

    transform: translateY(0);

  }

  

  /* 每个字母的样式 */

  .letter {

    opacity: 0;

    transform: translateY(50px);

    display: inline-block;

    animation: fadeInUp 0.5s ease forwards;

  }

  

  /* 使用 CSS 动画关键帧 */

  @keyframes fadeInUp {

    to {

      opacity: 1;

      transform: translateY(0);

    }

  }

  

  /* 为每个字母设置不同的动画延迟 */

  .letter:nth-child(1) { animation-delay: 0.1s; }

  .letter:nth-child(2) { animation-delay: 0.2s; }

  .letter:nth-child(3) { animation-delay: 0.3s; }

  .letter:nth-child(4) { animation-delay: 0.4s; }

  .letter:nth-child(5) { animation-delay: 0.5s; }

  .letter:nth-child(6) { animation-delay: 0.6s; }

  .letter:nth-child(7) { animation-delay: 0.7s; }

  .letter:nth-child(8) { animation-delay: 0.8s; }

  .letter:nth-child(9) { animation-delay: 0.9s; }

  .letter:nth-child(10) { animation-delay: 1.0s; }

  

  /* 根据需要继续添加更多 nth-child 规则 */

  .aos-animate-title {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.5s ease, transform 0.5s ease;

  }



  /* 动画完成后显示标题 */

  .aos-animate-title.animated {

    opacity: 1;

    transform: translateY(0);

  }



  /* 每个字母的样式 */

  .letter {

    opacity: 0;

    transform: translateY(50px);

    display: inline-block;

    animation: fadeInUp 0.5s ease forwards;

  }



  /* 使用 CSS 动画关键帧 */

  @keyframes fadeInUp {

    to {

      opacity: 1;

      transform: translateY(0);

    }

  }







/* 视频弹窗 */

html.act {

    height: 100vh;

    overflow: hidden;

}



html.act body {

    height: 100vh !important;

    overflow: hidden !important;

}



.z_tanchuang {

    position: fixed;

    display: table;

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    transform: scale(0);

    -webkit-transform: scale(0);

    z-index: 1110;

}



.z_tanchuang .tbox {

    display: table-cell;

    background: rgba(0, 0, 0, 0.5);

    text-align: center;

    vertical-align: middle;

}



.z_tanchuang .tbox .modal {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 50px;

    width: 100%;

    height:100vh;

}



.z_tanchuang .tbox .out {

    position: absolute;

    width: 58px;

    height: 58px;

    background: var(--main-color) url(../fonts/white_close.svg) center no-repeat;

    background-size: 30px 30px;

    top: 0;

    right: 0;

    cursor: pointer;

    z-index: 9;

}



.z_tanchuang .tbox .modal .img {

    position: relative;

    width: 95%;

    height: 95%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

}



.z_tanchuang .tbox .modal .img video {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    width: 100%;

    max-height: 100%;

    object-fit: cover;

}





/* 弹窗选中 */

.z_tanchuang.one {

    transform: scaleY(0.01) scaleX(0);

    animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

    -webkit-transform: scaleY(0.01) scaleX(0);

    -webkit-animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}



.z_tanchuang.one .tbox .modal {

    transform: scale(0);

    animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

    -webkit-transform: scale(0);

    -webkit-animation: mzoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}



.z_tanchuang.one.out {

    transform: scale(1);

    animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

    -webkit-transform: scale(1);

    -webkit-animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}



.z_tanchuang.one.out .tbox .modal {

    animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

    -webkit-animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}



/* 弹窗动画 */

@keyframes unfoldIn {

    0% {

        transform: scaleY(0.005) scaleX(0);

    }



    50% {

        transform: scaleY(0.005) scaleX(1);

    }



    100% {

        transform: scaleY(1) scaleX(1);

    }

}



@keyframes mzoomIn {

    0% {

        transform: scale(0);

    }



    100% {

        transform: scale(1);

    }

}



@keyframes zoomOut {

    0% {

        transform: scale(1);

    }



    100% {

        transform: scale(0);

    }

}



@keyframes unfoldOut {

    0% {

        transform: scaleY(1) scaleX(1);

    }



    50% {

        transform: scaleY(0.005) scaleX(1);

    }



    100% {

        transform: scaleY(0.005) scaleX(0);

    }

}



@-webkit-keyframes mzoomIn {

    0% {

        transform: scale(0);

    }



    100% {

        transform: scale(1);

    }

}



@-webkit-keyframes zoomOut {

    0% {

        transform: scale(1);

    }



    100% {

        transform: scale(0);

    }

}



@-webkit-keyframes unfoldOut {

    0% {

        transform: scaleY(1) scaleX(1);

    }



    50% {

        transform: scaleY(0.005) scaleX(1);

    }



    100% {

        transform: scaleY(0.005) scaleX(0);

    }

}



@-webkit-keyframes unfoldIn {

    0% {

        transform: scaleY(0.005) scaleX(0);

    }



    50% {

        transform: scaleY(0.005) scaleX(1);

    }



    100% {

        transform: scaleY(1) scaleX(1);

    }

}

@media (max-width:767px) {

   

    .z_tanchuang .tbox .out {

        position: relative;

        margin-top: 15%;

    }

    .z_tanchuang .tbox .out {



        border-radius: 50%;

    }

    .z_tanchuang .tbox .modal {

        padding:0;

        width: 100%;

    }

    .z_tanchuang .tbox .modal .img {

        flex-wrap: wrap;

        flex-flow: column;

    }

    .z_tanchuang .tbox .modal .img video {

        position: inherit;

        left: inherit;

        top: inherit;

        transform: inherit;

        max-height: calc(100vh - 100px);

    }

}



@media print {

  

    header {

        position: absolute !important;

        left: 0;

        top: 0;

    }

 

}