@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: "Outfit";
    src: url('../fonts/Prompt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Outfit Medium";
    src: url('../fonts/Prompt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Outfit Bold";
    src: url('../fonts/Prompt-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}



body {



    background: var(--white-color);

    font-family: 'Microsoft YaHei UI', '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;

}





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

}



/* 为锚点目标添加偏移（备用方案） */

[id] {

    scroll-margin-top: 200px;

}



/*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 */

.btn a {

    display: flex;

    padding: 16px 16px 16px 32px;

    align-items: center;

    border-radius: 70px;

    border-width: 1px;

    border-style: solid;

    transition: all .3s;

}

.btn a:nth-child(2) {

    margin-left: 16px;

}

.btn i{

    display: flex;

    width: 38px;

    height: 38px;

    padding: 7px;

    justify-content: center;

    align-items: center;

    border-radius: 30px;

    background-color: #F88413;
    color: #F88413;

}

.btn span {

    margin-right: 24px;

}

.btn span em {

    opacity: 0;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

}

.white_btn {

    background: var(--white-color);

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

}

.white_btn span::before {

    color: var(--white-color);

}

.white_btn span:after{

    color: #666;

}

.white_btn i {

    background: #F88413;

}

.opacity_btn {

    background-color: rgba(255, 255, 255, 0.40);

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

}

.opacity_btn span:after{

    color: var(--white-color);

}

.opacity_btn span::before {

    color: var(--main-color);

}

.opacity_btn i {

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

}



.border_btn {

    border: 1px solid #EFEFEF;
    background: #ffffff52;


}

.border_btn span:after{

    color: var(--white-color);

}

.border_btn span::before {

    color: #F88413;

}

.border_btn i {

    background-color: #F88413;

}





.btn a i svg {

    transition: all .3s;

}



/* button hover */



.btn .white_btn:hover i {

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

}

.btn .white_btn:hover i svg path{

    stroke: #F88413;

}



.white_btn:hover {

    background-color: #F88413;

    border-color: #F88413;

}

.white_btn:hover span{

    color: var(--white-color);

}

.opacity_btn:hover,

.border_btn:hover {

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

}

.btn .opacity_btn:hover i,

.btn .border_btn:hover i {

    background-color: #F88413;

}

.btn .opacity_btn:hover i svg path,

.btn .border_btn:hover i svg path{

    stroke: var(--white-color);

}





/* 按钮文字动画 */

.btn span {

    position: relative;

    overflow: hidden;

    display: inline-block;

    transition: transform 0.5s ease;

}

.btn span:after {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    font-size: 18px;

    font-weight: 400;

    transition: transform 0.5s ease;

}

.btn span::before {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    font-size: 18px;

    font-weight: 400;

    transform: translateX(-100%);

    transition: transform 0.5s ease;

}



.btn a:hover span:after {

    transform: translateX(100%);

    color: var(--white-color);

}



.btn a:hover span::before {

    transform: translateX(0);

}



.btn a:hover i svg{

    transform: rotate(45deg);

}

@media (max-width:1279px) {

    .btn a {

        padding: 16px 16px 16px 22px;

    }

    .btn span {

        margin-right: 10px;

    }



}



@media (max-width:767px) {

    .btn a {

        padding: 12px 10px 12px 16px;

    }

    .btn span em,

    .btn span::before,

    .btn span::after    {

        font-size: 16px;

    }

    .btn span {

        margin-right: 10px;

    }

    .btn i {

        width: 30px;

        height: 30px;

        padding: 3px;

    }




}



/*版心页面大小*/



.my-container {



    width: 100%;



    margin-right: auto;



    margin-left: auto;



    max-width: 1520px;



}



@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: 28px;

    }



    .font50 {

        font-size: 28px;

    }



    .font52 {

        font-size: 28px;

    }

    .font56 {

        font-size: 28px;

    }



    .font60 {

        font-size: 28px;

    }



    .font64 {

        font-size: 28px;

    }



    .font68 {



        font-size: 28px;



    }



}







@media (max-width:360px) {



    .font30 {

        font-size: 22px;

    }

    .font32 {

        font-size: 22px;

    }

    .font36 {

        font-size: 22px;

    }

    .font38 {

        font-size: 22px;

    }

    .font46 {

        font-size: 24px;

    }











}



@media (max-width:359px) {





}





/* 视频弹窗 */



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: 56px;

    height: 56px;

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

    background-size: 30px 30px;

    top: 0;

    right: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 9;

}

.z_tanchuang .tbox .out:after {

    content: "";

    display: block;

    width: 36px;

    height: 36px;

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

    background-repeat: no-repeat;

    background-size: 100%;

    transition: transform 0.5s ease;

}

.z_tanchuang .tbox .out:hover:after {

    transform: rotate(180deg);

}

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

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    border-radius: 16px;

    width: auto;

}





/* 弹窗选中 */



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

    }



    .z_tanchuang .tbox .out {

        border-radius: 50%;

        margin-bottom: 20px;

    }



    .z_tanchuang .tbox .modal {

        align-items: flex-end;

        flex-flow: column;

        padding: 0;

        padding-bottom:66px;

        width: 100%;

    }




    .z_tanchuang .tbox .modal .img {

        flex-wrap: wrap;

        flex-flow: column;

        height: auto;

        width: 100%;

    }




    .z_tanchuang .tbox .modal .img video {

        position: inherit;

        left: inherit;

        top: inherit;

        border-radius: 0;

        transform: inherit;

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



    }



    .z_tanchuang .tbox .out {

        width: 46px;

        height: 46px;

    }



}