﻿






:root {

    --main-color: #182B62;

    --dark-color: #00559B;

    --blue-color: #0D9ED7;

    --white-color: #fff;

}






.all_right {

    float: right;

    padding-left: 58px;

    min-width: 40%;

    border-left: 1px solid rgba(255, 255, 255, 0.5);

    display: flex;

    align-items: flex-end;

    transition: all ease 1s;

    transition-delay: .2s;

    opacity: 0;

    margin-left: -10px;

}



.all_right p {

    color: #FFF;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    margin-bottom: 16px;

}



.all_right .tel {

    display: block;

    margin-bottom: 30px;

}



.all_right .tel span {

    display: flex;

    align-items: center;

}



.all_right .tel span img {

    margin-right: 8px;

}



.all_right .tel strong {

    display: block;

    margin-top: 8px;

    color: var(--white-color);

    font-family: DIN;

    font-size: 36px;

    font-weight: 700;

    line-height: 1;

}



.all_right .tel strong a {

    font-size: inherit;

    color: inherit;

}



.all_right .a_r_list {

    display: flex;

    align-items: center;

}



.all_right .a_r_list span {

    display: inline-block;

    line-height: 20px;

}



.all_right .a_r_list p {

    display: flex;

    align-items: center;

}



.all_right .a_r_list img {

    width: 20px;

    margin-right: 10px;

}



.all_right .a_r_list a {

    color: inherit;

    font-size: inherit;

}



/*点击展开导航*/

.ys_navph2_subnav .ys_navph2_subnav_li {

    padding-bottom: 25px;

}



.ys_navph2_subnav .ys_navph2_subnav_li:last-child {

    padding-bottom: 0;

}



.ys_navph2_subnav .ys_navph2_subnav_li:last-child .one_depth {

    margin-bottom: 0;

}



.ys_navph2_subnav_li.act {

    opacity: 1;

}



.ys_navph2_subnav_li .one_depth {

    color: var(--white-color);

    font-size: 32px;

    font-weight: 400;

    line-height: 1.2;

    padding-left: 64px;

    background-image: url(../image/jia.svg);

    background-position: left center;

    background-repeat: no-repeat;

    background-size: 24px 24px;

}



.ys_navph2_thirnav {

    display: none;

}



.ys_navph2_thirnav .ys_navph2_thirnav_a {

    display: inline-block;

    position: relative;

    color: var(--white-color);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;

    line-height: 64px;

}



.ys_navph2_thirnav .ys_navph2_thirnav_a:before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    right: 0;

    height: 2px;

    background-color: #fff;

    transform-origin: bottom right;

    transform: scaleX(0);

    transition: transform 0.5s ease;

}



.ys_navph2_thirnav .ys_navph2_thirnav_a:hover:before {

    transform-origin: bottom left;

    transform: scaleX(1);

}



.ys_navph2_thirnav {

    padding-top: 22px;

    padding-left: 64px;

}



.ys_navph2_thirnav li {

    float: left;

    padding-right: 32px;

}



.all_menu .gnb>li .one_depth {

    display: inline-block;

    opacity: 0.5;

    margin-bottom: 25px;

}



.all_menu .gnb.initial>li .one_depth {

    opacity: 1;

}



.all_menu .gnb>li .one_depth.on {

    opacity: 1;

    margin-bottom: 0;

}



.all_menu .ys_navph2_subnav_li .one_depth.on {

    background-image: url(../image/jian.svg);

}



header.gnb-open .all_bg .all_left {

    opacity: 1;

    margin-left: 0;

}



header.gnb-open .all_bg .all_right {

    opacity: 1;

    margin-left: 0;

}



header.gnb-open .header_top .menubar .bar {

    background-color: #fff;

}



header.gnb-open .logo img:nth-child(1) {

    display: block;

}



header.gnb-open .logo img:nth-child(2) {

    display: none;

}



@media (max-width:1580px) {

    .header_top .menu>ul>li {

        padding-right: 50px;

    }



    .header_top .menu>ul>li:last-child {

        padding-right: 0;

    }



}



@media (max-width:1440px) {

    .header_top .menu>ul>li {

        padding-right: 30px;

    }



}



@media (max-width:1280px) {

    .ys_navph2_subnav_li .one_depth {

        font-size: 30px;

    }



}



@media (max-width:1200px) {

    .header_top .menu {

        display: none !important;

    }



}



@media (max-width:1024px) {

    .ys_navph2_subnav_li .one_depth {

        font-size: 28px;

        padding-left: 64px;

        background-size: 20px 20px;

    }



    .ys_navph2_subnav .ys_navph2_subnav_li {

        padding-bottom: 15px;

    }



    .all_menu .gnb>li .one_depth {

        margin-bottom: 15px;

    }



    .ys_navph2_thirnav .ys_navph2_thirnav_a {

        line-height: 54px;

    }



    .all_right .tel strong {

        font-size: 32px;

    }



}



@media (max-width:991px) {

    .header {

        padding: 0 30px;

    }



    .all_right .tel strong {

        font-size: 30px;

    }



}



@media (max-width:767px) {

    .header {

        padding: 0 20px;

        height: 80px;

    }



    .gnb-all .all_bg:before {

        width: 100%;

        background-size: contain;

        background-position: top center;

    }



    .search_eject {

        top: 80px;

        padding: 30px 0;

    }



    .head_search {

        margin-right: 10px;

    }



    .header_top .menubar {

        padding: 15px 15px;

        margin-top: 14px;

        margin-left: 10px;

    }



    .sebox_form {

        margin-top: 20px;

        padding: 18px 15px;

    }



    .sebox_form .sebox_input input::-webkit-input-placeholder {

        font-size: 12px;

    }



    .sebox_form .sebox_input input:-moz-placeholder {

        font-size: 12px;

    }



    .sebox_form .sebox_input input::-moz-placeholder {

        font-size: 12px;

    }



    .sebox_form .pro_select_box {

        margin-right: 10px;

        width: 70px;

    }



    .sebox_form .m_ser_l {

        padding-right: 10px;

    }



    .sebox_input {

        width: calc(100% - 100px);

        padding-left: 10px;

    }



    .sear_more {

        display: block;

        padding-top: 30px;

    }



    .sear_more ul {

        padding-top: 20px;

        margin-left: -6px;

        margin-right: -6px;

        padding-left: 0;

        width: 100%;

        max-width: 608px;

    }



    .sear_more ul li a {

        font-size: 14px;

    }



    .gnb-all .all_bg {

        margin-top: 100px;

        height: calc(100% - 100px);

        padding: 0 15px;

        display: block;

        overflow-y: auto;

    }



    .all_bg .all_left {

        width: 100%;

        padding-right: 0;

    }



    .all_right {

        padding-left: 0;

        min-width: 40%;

        width: 100%;

        margin-top: 20px;

        padding-top: 20px;

        border-left: none;

        border-top: 1px solid rgba(255, 255, 255, 0.3);

    }



    .all_right .tel strong {

        font-size: 26px;

    }



    .all_bg .ys_navph2_subnav {

        max-height: inherit;

    }



    .ys_navph2_subnav_li .one_depth {

        font-size: 18px;

        padding-left: 30px;

        background-size: 15px 15px;

    }



    .ys_navph2_thirnav .ys_navph2_thirnav_a {

        font-size: 16px;

        font-weight: 400;

        line-height: 34px;

    }



    .ys_navph2_thirnav {

        padding-top: 15px;

        padding-left: 30px;

    }



    .all_right p {

        font-size: 14px;

        margin-bottom: 12px;

    }



}



/*白底导航*/

.header.headerColor,
.header.headerColor2,
.header.headerColor3 {

    background-color: #fff;

    border-bottom: 1px solid rgba(212, 212, 212, 0.30);

}



.headerColor .logo img:nth-child(1),
.headerColor2 .logo img:nth-child(1),
.headerColor3 .logo img:nth-child(1) {

    display: none;

}



.headerColor .logo img:nth-child(2),
.headerColor2 .logo img:nth-child(2),
.headerColor3 .logo img:nth-child(2) {

    display: inline-block;

}



.headerColor .head_search i.sousuoend,
.headerColor2 .head_search i.sousuoend,
.headerColor3 .head_search i.sousuoend {

    background-image: url(../image/search_blue.svg);

}



.headerColor .head_languge img:nth-child(1),
.headerColor2 .head_languge img:nth-child(1),
.headerColor3 .head_languge img:nth-child(1) {

    display: none;

}



.headerColor .head_languge img:nth-child(2),
.headerColor2 .head_languge img:nth-child(2),
.headerColor3 .head_languge img:nth-child(2) {

    display: inline-block;

}



.headerColor .header_top .menubar .bar,
.headerColor2 .header_top .menubar .bar,
.headerColor3 .header_top .menubar .bar {

    background: var(--main-color);

}



.headerColor .menu>ul>li>a,
.headerColor2 .menu>ul>li>a,
.headerColor3 .menu>ul>li>a {

    color: var(--main-color);

}



.headerColor .menu>ul>li.active>a,
.headerColor2 .menu>ul>li.active>a,
.headerColor3 .menu>ul>li.active>a {

    color: var(--blue-color);

}



.headerColor .menu>ul>li.active>a:before,
.headerColor2 .menu>ul>li.active>a:before,
.headerColor3 .menu>ul>li.active>a:before {

    background-color: var(--blue-color);
    /*bottom: 1px;*/

}



.headerColor .menu>ul>li>a:hover,
.headerColor2 .menu>ul>li>a:hover,
.headerColor3 .menu>ul>li>a:hover {

    color: var(--blue-color);

}



.headerColor .menu>ul>li>a:hover:before,
.headerColor2 .menu>ul>li>a:hover:before,
.headerColor3 .menu>ul>li>a:hover:before {

    width: 100%;

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

}



@media (max-width:1024px) {

    .header {

        background-color: #fff;

    }



    .header .logo img:nth-child(1) {

        display: none;

    }



    .header .logo img:nth-child(2) {

        display: inline-block;

    }



}



/*footer*/

.right_flow {

    position: fixed;

    right: 5px;

    bottom: 10px;

    z-index: 99;

}



.right_flow ul li {

    position: relative;

    overflow: hidden;

    margin-bottom: 1px;

}



.right_flow ul li a {

    display: block;

    padding: 16px;

    border-radius: 2px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background: var(--dark-color);

}



.right_flow .top-button {

    display: none;

}



.right_flow ul li .hide_tel {

    position: absolute;

    right: calc(100% + 10px);

    top: 50%;

    transform: translateY(-50%);

    width: 180px;

    padding: 24px 32px;

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

    opacity: 0;

    justify-content: center;

    border-radius: 4px;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    -ms-transition: all 0.4s;

    -o-transition: all 0.4s;

    transition: all 0.4s;

    z-index: -1;

    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 10%);

}



.right_flow ul li .hide_tel:before {

    border: solid transparent;

    content: ' ';

    height: 0;

    position: absolute;

    width: 0;

    border-width: 10px;

    border-left-color: var(--dark-color);

    right: -20px;

    top: 50%;

    transform: translateY(-50%);

}



.right_flow ul li .hide_tel a {

    color: #ffffff;

    font-size: 16px;

    background-color: transparent;

    border: none;

    padding: 0;

}



.right_flow ul li:hover {

    overflow: visible;

}



.right_flow ul li:hover .hide_tel {

    opacity: 1;

    z-index: 8;

}



footer {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    z-index: 1;

}



footer:before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    /*background: linear-gradient(279deg, #00559B 23.13%, #017FC3 129.16%);*/

    z-index: -1;

}



.foot_b_logo {

    position: absolute;

    max-width: 90%;

    right: 0;

    bottom: 0;

    z-index: -1;

}



.foot_top {

    padding: 40px 0 35px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}



.foot_top .text {

    position: relative;

    display: inline-block;

    padding-left: 24px;

    margin-left: 24px;

    color: var(--white-color);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.foot_top .text:before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 16px;

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

}



.foot_mid {

    padding-top: 40px;

    padding-bottom: 55px;

}



.foot_scoll {

    padding-right: 25px;

    max-height: 216px;

    overflow-y: auto;

}



.foot_scoll::-webkit-scrollbar {

    width: 2px;

    height: 2px
}



.foot_scoll::-webkit-scrollbar-button:vertical {

    display: none
}



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

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

}



.foot_scoll::-webkit-scrollbar-thumb {

    border-radius: 0;

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

}



.swiper-foot {

    height: 200px;

}



.swiper-foot .swiper-slide {

    height: 34px;

}



.swiper-container-vertical>.foot-scrollbar {

    width: 2px;

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

}



.foot-scrollbar .swiper-scrollbar-drag {

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

}



.foot_scoll a {

    display: block;

    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    white-space: nowrap;

}



.foot_scoll a:last-child {

    margin-bottom: 0;

}



.foot_scoll a:hover {

    color: rgba(255, 255, 255, 0.9);

}



.footer .big_t {

    padding-bottom: 16px;

    color: var(--white-color);

    font-size: 18px;

    font-weight: 700;

    line-height: 28px;

}



.footer .big_t a {

    font-size: inherit;

    color: inherit;

    font-style: normal;

}



.foot_mid .foot_menu {

    flex: 1;

    max-width: 950px;

    display: flex;

    justify-content: space-between;

}



.foot_mid .foot_menu ul {

    display: flex;

    justify-content: space-between;

}



.foot_mid .foot_menu ul:nth-child(1) {

    flex: 1;

}



.foot_mid .foot_menu ul:nth-child(2) {

    width: 115px;

    display: block;

}



.foot_mid .foot_menu ul:nth-child(1) li {

    padding-right: 15px;

}



.foot_mid .foot_menu ul:nth-child(2) li {

    padding-right: 0;

}



.foot_img {

    padding-left: 15px;

}



.foot_img p {

    padding-top: 8px;

    color: var(--white-color);

    font-size: 14px;

    font-weight: 400;

    line-height: 24px;

    text-align: center;

}



.foot_img .dis_flex>div {

    padding-left: 30px;

}

.foot_img .dis_flex>div img {
    border-radius: 8px;
    max-width: 100px;
}


.foot_img .dis_flex>div:first-child {

    padding-left: 0;

}



.foot_line {

    padding-top: 28px;

    padding-bottom: 32px;

    border-top: 1px solid rgba(255, 255, 255, 0.20);

}



.footdown {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: rgba(255, 255, 255, 0.5);

    font-size: 14px;

    line-height: 26px;

    font-weight: 400;

}


.footdown .fl {
    flex-wrap: wrap;
}

.footdown a {

    color: rgba(255, 255, 255, 0.5);

    font-size: 14px;

    line-height: 26px;

    font-weight: 400;

}



.footdown a:hover {

    color: rgba(255, 255, 255, 1);

}



@media screen and (max-width:1366px) {

    .footdown {

        display: block;

        overflow: hidden;

    }



}



@media screen and (max-width:1280px) {

    .foot_img .dis_flex>div {

        padding-left: 15px;

    }



    .footdown .fl {

        display: block;

    }



    .footdown .fr {

        float: left;

    }



}



@media screen and (max-width:1200px) {

    .swiper-foot {

        height: 170px;

    }



    .footdown,
    .footdown a {

        font-size: 14px;

    }



}



@media screen and (max-width:991px) {

    .footdown {

        display: block;

        line-height: 26px;

    }



    .footdown div {

        line-height: 26px;

    }



}



@media screen and (max-width:767px) {

    .pc_show {

        display: none !important;

    }



    .mo_shwo {

        display: block !important;

    }



    .right_flow {

        right: 1px;

    }



    .right_flow ul li a {

        padding: 10px;

    }



    .right_flow>ul>li>a>img {

        width: 20px;

    }



    .foot_top img {

        width: 120px;

    }



    .foot_top .text {

        padding-left: 12px;

        margin-left: 12px;

        font-size: 16px;

        line-height: 26px;

    }



    .foot_mid {

        padding-bottom: 15px;

        padding-top: 20px;

    }



    .foot_mid .foot_menu ul {

        display: block;

    }



    .foot_mid .foot_menu ul li {

        width: 33.33%;

        float: left;

    }



    .foot_mid .foot_menu ul li:last-child {

        width: inherit;

    }



    .foot_img {

        padding-top: 0px;

    }



    .foot_scoll {

        display: none !important;

    }



    .foot_line {

        padding-top: 15px;

        padding-bottom: 15px;

    }



    .footdown,
    .footdown a {

        font-size: 14px;

    }



}



/*last*/

.index_last {

    padding-top: 90px;

    background: #F1F8FD;

}



.main-link-page {

    overflow: hidden;

}



.main-link-page li {

    position: relative;

    display: flex;

    float: left;

    width: 50%;

    height: 320px;

    background-size: cover;

    z-index: 1;

    transition: all 0.8s cubic-bezier(0, 0, 0, 0.8);

}



.main-link-page li:before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    z-index: -1;

}



.main-link-page li a {

    display: flex;

    align-items: center;

    width: 100%;

    padding: 0 0px 0 90px;

    vertical-align: middle;

    background-image: url(../image/last_jt.svg);

    background-size: 88px 88px;

    background-repeat: no-repeat;

    background-position: calc(100% - 90px) center;

}



.main-link-page li a>div {

    width: 100%;

}



.main-link-page li a strong {

    display: block;

    color: #fff;

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.2;

}



.main-link-page li p {

    padding-top: 18px;

    width: calc(100% - 200px);

    max-width: 530px;

    color: var(--white-color);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



@media screen and (min-width:768px) {

    .main-link-page li.active {

        width: 55%;

        transition: all 0.8s cubic-bezier(0, 0, 0, 0.8);

    }



    .main-link-page li.deactive {

        width: 45%;

        transition: all 0.8s cubic-bezier(0, 0, 0, 0.8);

    }



}



@media screen and (max-width:1280px) {

    .main-link-page li {

        height: 300px;

    }



    .main-link-page li a {

        padding: 0 0px 0 60px;

        background-size: 78px 78px;

        background-position: calc(100% - 60px) center;

    }



}



@media screen and (max-width:1100px) {

    .foot_top {

        padding: 20px 0 15px 0;

    }



    .main-link-page li {

        height: 260px;

    }



    .foot_mid {

        padding-top: 20px;

        padding-bottom: 25px;

    }



    .foot_line {

        padding-top: 15px;

        padding-bottom: 15px;

    }



    .main-link-page li p {

        width: calc(100% - 200px);

        overflow: hidden;

        display: -webkit-box;

        -webkit-line-clamp: 3;

        -webkit-box-orient: vertical;

    }



}



@media screen and (max-width:1024px) {

    .index_last {

        padding-top: 0px;

    }



}



@media screen and (max-width:991px) {

    .main-link-page li a {

        padding: 0 0px 0 40px;

        background-size: 60px 60px;

        background-position: calc(100% - 40px) center;

    }



    .main-link-page li p {

        width: calc(100% - 120px);

    }



    .foot_mid {

        display: block;

    }



    .foot_mid .foot_menu {

        width: 100%;

    }



    .foot_img {

        padding-left: 0;

        padding-top: 30px;

    }



}



@media screen and (max-width:767px) {

    .main-link-page li {

        width: 100%;

        height: 300px;

    }



    .main-link-page li a {

        padding: 0 0px 0 20px;

        background-size: 40px 40px;

        background-position: calc(100% - 20px) center;

    }



    .main-link-page li p {

        width: calc(100% - 90px);

    }



    .foot_mid .foot_menu {

        display: none;

    }



    .foot_img {

        padding-top: 0px;

    }



}



/*index new*/

.in_new_bg {

    position: relative;

    background: #F1F8FD;

    width: 100%;

    height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    z-index: 1;

}



.in_new_bg:before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 50%;

    height: 100%;

    background-image: url(../image/new_icon.svg);

    background-size: cover;

    background-repeat: no-repeat;

    z-index: -1;

}



.in_new_bg .down_icon {

    bottom: 48px;

}



.index_title .big_t {

    color: var(--main-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.1;

}



.index_title .new_more {

    position: relative;

    display: flex;

    align-items: center;

    color: #666;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.index_title .new_more .new_cicle {

    position: relative;

    display: flex;

    align-items: center;

    margin-left: 16px;

    width: 66px;

    height: 38px;

    overflow: hidden;

}



.index_title .new_more span {

    position: absolute;

    right: 0;

    left: 0;

    top: 0;

    bottom: 0;

    display: flex;

    align-items: flex-start;

    border-radius: 28px;

    transition: .6s all;

}



.index_title .new_more .grey {

    background: #E9E9E9;

    transform: translate(0px, 0px);

    opacity: 1;

}



.index_title .new_more .blue {

    background: var(--main-color);

    opacity: 0;

    transform: scale(.7);

}



.index_title .new_more i {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .6s all;

}



.index_title .new_more i img {

    width: 28px;

    height: 28px;

}



.index_title .new_more span.grey i {

    transform: translate(0px, 0px);

    opacity: 1;

}



.index_title .new_more span.blue i {

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

    opacity: 0;

}



.index_title .new_more:hover {

    color: var(--main-color);

}



.index_title .new_more:hover .grey {

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

    opacity: 0;

}



.index_title .new_more:hover .blue {

    transform: translate(0px, 0px);

    opacity: 1;

}



.index_title .new_more:hover .grey i {

    transform: translate(50%, 0);

    opacity: 0;

}



.index_title .new_more:hover .blue i {

    transform: translate(0, 0);

    opacity: 1;

}



.new_list {

    padding-top: 60px;

}



.new_list ul {

    display: flex;

    flex-flow: row wrap;

    align-items: stretch;

    margin-left: -13px;

    margin-right: -13px;

}



.new_list ul li {

    float: left;

    width: 29%;

    height: 566px;

    padding: 0 13px;

}



.new_list li:first-child {

    width: 42%;

}



.new_list .new_one {

    display: block;

    position: relative;

    width: 100%;

    height: 100%;

    border-radius: 8px;

    overflow: hidden;

}



.new_list .thumb {

    position: relative;

    border-radius: 8px;

    overflow: hidden;

}



.new_list .thumb i {

    display: block;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s;

    z-index: 2;

}



.new_list .title_mask {

    padding: 32px;

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);

    z-index: 3;

}



.new_one .thumb {

    width: 100%;

    height: 100%;

}



.new_list .new_one .time {

    padding-left: 24px;

    color: var(--white-color);

    background-image: url(../image/time_white.svg);

    background-size: 16px 16px;

    background-repeat: no-repeat;

    background-position: left;

    font-size: 16px;

    font-family: 'D-DINExp';

    font-weight: 400;

    line-height: 24px;

    opacity: 0.5;

}



.new_list .new_one .title {

    margin-top: 10px;

    color: var(--white-color);

    font-size: 20px;

    font-style: normal;

    font-weight: 400;

    max-height: 60px;

    line-height: 30px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.new_list a:hover .thumb i {

    transform: scale(1.1);

}



.new_list .new_two {

    position: relative;

    display: block;

    width: 100%;

    height: 100%;

}



.new_two .thumb {

    width: 100%;

    height: 47.8%;

}



.new_list .new_two .new_text {

    padding-top: 16px;

}



.new_list .new_text .time {

    padding-left: 24px;

    color: var(--blue-color);

    font-size: 16px;

    font-family: 'D-DINExp';

    font-weight: 400;

    line-height: 24px;

    background-image: url(../image/time_blue.svg);

    background-size: 16px 16px;

    background-repeat: no-repeat;

    background-position: left center;

}



.new_list .new_text .title {

    margin-top: 16px;

    color: var(--main-color);

    font-size: 20px;

    font-weight: 400;

    height: 60px;

    line-height: 30px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.new_list .new_text .des {

    margin-top: 14px;

    color: #657188;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    height: 108px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.new_list .more {

    margin-top: 50px;

}



.new_list .more span {

    display: flex;

    width: 34px;

    height: 24px;

    padding: 6px;

    justify-content: center;

    align-items: center;

    border-radius: 23px;

    background: #fff;

    transition: background .4s;

}



.new_list .more span i {

    display: block;

    width: 8px;

    height: 8px;

    background-image: url(../image/new_jia.svg);

    background-repeat: no-repeat;

}



.new_list a:hover .more span {

    background: var(--main-color);

}



.new_list a:hover .more span i {

    background-image: url(../image/new_jiaw.svg);

}



.new_list .new_three {

    display: block;

    position: relative;

    width: 100%;

}



.new_list li:last-child .new_three:nth-child(1) {

    height: calc(50% - 10px);

}



.new_list li:last-child .new_three:nth-child(2) {

    padding-top: 16px;

    height: calc(50% + 10px);

}



.new_list .line:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: #D9D9D9;

}



.new_list .line:before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 1px;

    background: var(--main-color);

    transition: width .8s;

}



.new_list .line:hover .title {

    color: var(--blue-color);

}



.new_list .line:hover:after {

    opacity: 0;

}



.new_list .line:hover:before {

    width: 100%;

}



@media screen and (min-width:1025px) {

    .in_new_bg .index_title {

        opacity: 0;

        pointer-events: none;

        -webkit-transform: translateY(4vw);

        transform: translateY(4vw);

    }



    .new_list ul li {

        opacity: 0;

        pointer-events: none;

        -webkit-transform: translateY(4vw);

        transform: translateY(4vw);

    }



    /*切屏加载*/

    .index_page_current .index_title {

        opacity: 1;

        pointer-events: auto;

        -webkit-transform: none;

        transform: none;

        -webkit-transition: all 1s cubic-bezier(.4, 0, .2, 1);

        transition: all 1s cubic-bezier(.4, 0, .2, 1);

    }



    .index_page_current .new_list ul li {

        opacity: 1;

        pointer-events: auto;

        -webkit-transform: none;

        transform: none;

        -webkit-transition: all 1s cubic-bezier(.4, 0, .2, 1);

        transition: all 1s cubic-bezier(.4, 0, .2, 1);

    }



    .index_page_current .new_list ul li:first-child {

        -webkit-transition-delay: .2s;

        transition-delay: .2s;

    }



    .index_page_current .new_list ul li:nth-child(2) {

        -webkit-transition-delay: .4s;

        transition-delay: .4s;

    }



    .index_page_current .new_list ul li:nth-child(3) {

        -webkit-transition-delay: .5s;

        transition-delay: .5s;

    }



}



@media screen and (max-width:1366px) {

    .new_list {

        padding-top: 30px;

    }



    .new_list ul li {

        height: 430px;

    }



    .new_list .more {

        margin-top: 22px;

    }



    .new_list .new_text .des {

        margin-top: 10px;

    }



    .new_list .new_text .title {

        font-size: 18px;

        line-height: 26px;

        height: 52px;

    }



    .in_new_bg .down_icon {

        bottom: 34px;

    }



}



@media screen and (max-width:1280px) {

    .new_list .title_mask {

        padding: 32px 20px;

    }



}



@media screen and (max-width:1024px) {

    .in_new_bg {

        padding: 60px 0;

    }



}



@media screen and (max-height:700px) {

    .new_list {

        padding-top: 30px;

    }



    .new_list ul li {

        height: 410px;

    }



    .new_list .new_text .des {

        margin-top: 10px;

    }



    .new_list .more {

        margin-top: 13px;

    }



    .in_new_bg .down_icon {

        bottom: 34px;

    }



}



@media screen and (max-height:690px) {

    .in_new_bg .container {

        padding-top: 40px;

    }



    .in_new_bg .down_icon {

        bottom: 15px;

    }



}



@media screen and (max-width:767px) {

    .in_new_bg {

        padding-bottom: 30px;

    }



    .in_new_bg .container {

        padding-top: 0px;

    }



    .in_new_bg:before {

        display: none;

    }



    .index_title .new_more .new_cicle {

        margin-left: 12px;

        width: 40px;

        height: 30px;

    }



    .new_list ul {

        display: block;

    }



    .new_list li:first-child {

        width: 100%;

    }



    .new_list ul li {

        height: auto;

        width: 100%;

        padding-bottom: 20px;

    }



    .new_two .thumb {

        height: auto;

    }



    .new_list .new_one .title {

        font-size: 18px;

        line-height: 26px;

        max-height: 52px;

    }



    .new_list .title_mask {

        padding: 20px 15px;

    }



    .new_list .new_two .new_text {

        margin-bottom: 20px;

        padding-bottom: 20px;

    }



    .new_list li:last-child .new_three {

        height: inherit;

        padding-bottom: 20px;

    }



    .new_list .new_text .des {

        font-size: 14px;

    }



}



/*banner*/

.banner {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.index_banner {

    width: 100%;

    height: 100%;

}



.index_banner .index_banner_swp {

    width: 100%;

    height: 100%;

}



.index_banner .swiper-slide {

    position: relative;

    width: 100%;

    height: 100%;

}



.index_banner .img_pc {

    height: 100%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;
    /*transform: translateZ(0) scale(1);*/

    transition: all 2.5s ease-in-out;

}



/*.index_banner .swiper-slide-active .img_pc {

transform: translateZ(0) scale(1.1);

}*/

.index_banner .img_pc video {

    -o-object-fit: cover;

    object-fit: cover;

    width: 100%;

    height: 100%;

}



.index_banner .img_m {

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

}



.index_banner_text {

    position: absolute;

    left: 0;

    width: 100%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    z-index: 2;

}



.index_banner .index_banner_text .t1 {

    color: #FFF;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    overflow: hidden;

    transition: all 1.2s .4s;

}



.index_banner .index_banner_text .t2 {

    font-weight: 700;

    line-height: 1.2;

    color: #fff;

    margin-top: 16px;

    overflow: hidden;

    transition: all 1.2s .6s;

}



.index_banner .index_banner_text .t3 {

    color: #FFF;

    font-size: 22px;

    font-weight: 400;

    line-height: 26px;

    margin-top: 16px;

    overflow: hidden;

    transition: all 1.2s .8s;

}



.index_banner .index_banner_text .more_n {

    overflow: hidden;

    transition: all 1.2s 1s;

}



.index_banner_text .more_n {

    overflow: hidden;

    margin-top: 116px;

}



.more_n a {

    display: flex;

    position: relative;

    align-items: center;

    justify-content: center;

    width: 158px;

    height: 55px;

    background-image: url(../image/more_n_bg.svg);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    color: #FFF;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    overflow: hidden;

    z-index: 1;

}



.more_n a:before {

    content: "";

    position: absolute;

    background-image: url(../image/more_hover_bg.svg);

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

    width: 0;

    height: 102%;

    left: 50%;

    top: -1px;

    transform: translateX(-50%);

    transition: width .6s;

    z-index: -1;

}



.more_n a .icon {

    margin-left: 23px;

    line-height: 10px;

}



.index_banner_text i {

    font-style: normal;

    line-height: inherit;

    display: block;

}



.index_banner_text i {

    transform: translateY(200%);

    transition: all 1.6s cubic-bezier(.33, 1, .68, 1);

}



.index_banner_text .more_n a {

    transform: translateY(200%);

    transition: all 1.6s cubic-bezier(.33, 1, .68, 1);

}



.more_n a:hover {

    color: var(--dark-color);

}



.more_n a:hover:before {

    width: 100%;

}



.more_n a:hover .icon svg path {

    stroke: var(--dark-color);

}



.index_banner .swiper-slide.swiper-slide-active i,
.index_banner .swiper-slide.swiper-slide-active .more_n a {

    transform: translateY(0);

}



.index_banner_bottom {

    position: absolute;

    z-index: 3;

    bottom: 0;

    left: 0;

    right: 0;

    padding-top: 30px;

    padding-bottom: 30px;

}



.white_r_line {

    position: absolute;

    right: 184px;

    bottom: 0;

    width: 1px;

    height: calc(100% - 90px);

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

    z-index: 3;

}



.index_banner_bottom .white_b_line {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 1px;

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

}



.index_banner_progress {

    display: inline-block;

    float: right;

}



.index_banner_progress .list_ {

    display: flex;

}



.index_banner_progress .list_ .i {

    margin-left: 20px;

    display: flex;

    align-items: center;

}



.index_banner_progress .list_ span {

    color: var(--white-color);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    opacity: 0.5;

    cursor: pointer;

}



.index_banner_progress .list_ span:hover {

    opacity: 1;

}



.index_banner_progress .i.active span {

    opacity: 1;

}



.index_banner_progress .progress {

    position: relative;

    margin-left: 10px;

    width: 141px;

    height: 2px;

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

}



.index_banner_progress .progress .d {

    position: absolute;

    left: 0;

    height: 100%;

    background-color: #ffffff;

}



.index_banner_progress .progress {

    display: none;

}



.index_banner_progress .i.active .progress {

    display: block;

}



.down_click {

    cursor: pointer;

}



.icon-scroll {

    float: left;

    position: relative;

    width: 48px;

    height: 48px;

}



.icon-scroll span {

    display: inline-block;

    width: 100%;

    height: 100%;

    background-image: url(../image/cicle.svg);

    background-repeat: no-repeat;

    background-position: center;

    animation: spin 10s linear infinite;

}



.icon-scroll i {

    position: absolute;

    left: 50%;

    top: 50%;

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

    animation: wave 1s ease-in-out alternate infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }



}



@keyframes wave {

    from {

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

    }



    to {

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

    }



}



.index_banner_bottom .play {

    position: relative;

    float: right;

    height: 26px;

    width: 20px;

    margin-left: 10px;

}



.index_banner_bottom i {

    cursor: pointer;

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 20px;

    height: 20px;

}



.index_banner_bottom .suspend {

    display: none;

}



@media screen and (max-width:1800px) {

    .index_banner_bottom .container {

        padding-right: 50px;

    }



}



@media screen and (max-width:1680px) {

    .index_banner_bottom .container {

        padding-right: 150px;

    }



}



@media screen and (max-width:1580px) {

    .index_banner_bottom .container {

        padding-right: 200px;

    }



}



@media screen and (max-width:1366px) {

    .index_banner_bottom .container {

        padding-right: 15%;

    }



    .index_banner_text .more_n {

        margin-top: 66px;

    }



}



@media screen and (max-width:1200px) {

    .white_r_line {

        display: none !important;

    }



    .index_banner_bottom .container {

        padding-right: 8%;

    }



}



@media screen and (max-width:991px) {

    .index_banner .index_banner_text .t3 {

        font-size: 20px;

    }



    .index_banner_bottom .container {

        padding-right: 20px;

    }



    .index_banner_progress .progress {

        width: 120px;

    }



}



@media screen and (max-width:767px) {

    .index_banner_text {

        text-align: left;

    }



    .index_banner .index_banner_text .t3 {

        font-size: 14px;

    }



    .index_banner_text .more_n {

        padding-top: 50px;

    }



    .index_banner_text .more_n a {

        /*margin: 0 auto;*/

    }



    .index_banner_progress .progress {

        margin-left: 6px;

        width: 80px;

    }



    .index_banner_progress .list_ .i {

        margin-left: 16px;

    }



    .index_banner_progress .list_ .i:first-child {

        margin-left: 0;

    }



    .white_b_line {

        display: none !important;

    }



    .icon-scroll {

        display: none !important;

    }



    .index_banner_bottom .dis_flex {

        justify-content: flex-start;

    }



}



/*index about*/

.in_about {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.about_video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

}



.about_icon {

    position: absolute;

    top: 0;

    right: 0;

    width: 50%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    z-index: -1;

}



.about_video video {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}



.about_video img {

    display: none;

}



.in_about .about_mask {

    position: relative;

    width: 100%;

    height: 100%;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%);

    z-index: 1;

}



.in_about .about_mask .container {

    height: 100%;

}



.about_top {

    display: flex;

    align-items: center;

    width: 100%;

    height: 100%;

}



.about_top .about_k {

    width: 100%;

    display: flex;

    justify-content: space-between;

}



.about_top .fl {

    max-width: 750px;

    flex: 1;

}



.in_title .a_small_t {

    color: var(--white-color);

    font-weight: 400;

    line-height: 26px;

}



.in_title .a_small_t span {

    position: relative;

    font-style: normal;

}



.in_title .a_small_t span:before {

    content: "";

    position: absolute;

    left: calc(100% + 16px);

    top: 50%;

    transform: translateY(-50%);

    width: 46px;

    height: 1px;

    background: #FFF;

}



.in_title .a_big_t {

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.3;

    margin-top: 16px;

}



.about_top .a_text {

    margin-top: 40px;

}



.a_text p {

    color: var(--white-color);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.about_top .a_more {

    padding-top: 55px;

}



.about_top .a_more .more_n {

    margin-right: 20px;

}



.about_mid {

    padding-top: 26px;

    padding-left: 50px;

    display: flex;

    justify-content: flex-end;

    width: 100%;

}



.about_mid .about_num {

    position: relative;

    max-width: 422px;

}



.about_mid .about_num .w_line {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 1px;

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

}



.about_num .num_small {

    color: var(--white-color);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.about_num ul {

    display: flex;

    flex-flow: row wrap;

    align-items: stretch;

}



.about_num .li {

    width: 50%;

    display: flex;

    padding-bottom: 40px;

}



.about_num .num_ber span {

    color: var(--white-color);

    font-family: D-DINExp;

    font-size: 56px;

    font-weight: 700;

    letter-spacing: 2px;

    line-height: 1.1;

}



.about_num .num_ber em {

    color: var(--white-color);

    font-style: normal;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.about_num .num_ber strong {

    color: var(--white-color);

    font-family: DIN;

    font-size: 58px;

    font-style: normal;

    font-weight: 700;

    line-height: 1.1;

}



.about_link {

    width: 100%;

    padding-top: 18%;

    max-width: 675px;

}



.about_link ul {

    margin-left: -6px;

    margin-right: -6px;

}



.about_link ul li {

    padding-right: 6px;

    padding-left: 6px;

    padding-bottom: 12px;

    width: 33.33%;

    float: left;

}



.about_link ul li:last-child {

    padding-right: 0;

}



.about_link .border {

    display: inline-block;

    padding: 24px;

    /* width: 214px; */
    width: 100%;
    border-radius: 16px 8px 16px 2px;

    border: 1px solid rgba(255, 255, 255, 0.30);

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

    transition: all .4s ease;

}



.about_link .icon img {

    width: 38px;

}



.about_link .title {

    margin-top: 16px;

    display: flex;

    justify-content: space-between;

    color: var(--white-color);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.2;

}



.about_link .m_icon {

    position: relative;

    width: 22px;

    height: 22px;

    opacity: 0.5;

    overflow: hidden;

}



.about_link .m_icon i img {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    transition: left .4s;

}



.about_link .m_icon i img:nth-child(2) {

    left: -100%;

}



.about_link .border:hover {

    border: 1px solid var(--white-color);

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

    backdrop-filter: blur(3px);

}



.about_link .border:hover .m_icon {

    opacity: 1;

}



.about_link .border:hover .m_icon i img:first-child {

    left: 100%;

}



.about_link .border:hover .m_icon i img:nth-child(2) {

    left: 0;

}



.about_mask .down_icon {

    bottom: 48px;

}



.down_icon {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

}



.down_icon span {

    position: relative;

    display: inline-block;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    border: 1px solid white;

}



.down_icon.icon_white span {

    border-color: white;

}



.down_icon span i {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 16px;

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

    animation: wave 1s ease-in-out alternate infinite;

}



@media screen and (max-height:800px) {

    .about_top .a_more {

        padding-top: 35px;

    }



    .about_mask .down_icon {

        bottom: 30px;

    }



}



@media screen and (max-height:700px) {
    .about_k {
        padding-top: 30px;
    }

    .about_link {

        padding-top: 25px;

    }



    .about_top .a_text {

        margin-top: 20px;

    }

    .about_mask .down_icon {
        bottom: 20px;

    }

}



@media screen and (max-width:1366px) {

    .about_num .num_ber span {

        font-size: 54px;

    }



}



@media screen and (max-width:1280px) {

    .about_link {

        padding-top: 10%;

    }



    .about_mid .about_num {

        width: 360px;

    }



    .about_num .num_ber span,
    .about_num .num_ber strong {

        font-size: 50px;

    }



    .about_link .border {

        padding: 20px;

        width: 100%;

    }



    .about_link .icon img {

        width: 30px;

    }



}



@media screen and (max-width:1200px) {

    .about_link .border {

        padding: 20px 15px;

    }



    .about_link .icon img {

        width: 26px;

    }



    .about_mid .about_num {

        width: 340px;

    }



    .about_num .num_ber span,
    .about_num .num_ber strong {

        font-size: 48px;

    }



}



@media screen and (max-width:1024px) {

    .down_icon {

        display: none !important;

    }



    .in_about .about_mask {

        padding-top: 80px;

        padding-bottom: 80px;

    }



}



@media screen and (max-width:991px) {

    .about_top .fl {

        max-width: 690px;

        width: calc(100% - 260px);

    }



    .about_num .num_ber span,
    .about_num .num_ber strong {

        font-size: 50px;

    }



    .about_link .border {

        width: 100%;

    }



    .about_num .num_ber span,
    .about_num .num_ber strong {

        font-size: 48px;

    }



}



@media screen and (max-width:767px) {

    .about_top .fl {

        max-width: inherit;

        width: 100%;

    }



    .in_about .about_mask {

        padding-top: 40px;

        padding-bottom: 56px;

    }



    .about_top .about_k {

        display: block;

    }

    .about_top .about_k .a_small_t {

        display: none;

    }

    .about_video video {

        display: none !important;

    }



    .about_video img {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        display: block;

        object-fit: cover;

    }



    .about_mid {

        justify-content: center;

        padding-top: 35px;

        padding-left: 0;

        width: 100%;

    }



    .about_mid .about_num {

        width: 100%;

    }



    .about_num .num_ber span,
    .about_num .num_ber strong {

        font-size: 28px;

    }



    .about_link {

        display: none !important;

    }



    .about_link ul {

        margin-left: -6px;

        margin-right: -6px;

    }



    .about_link ul li {

        width: 50%;

        padding: 6px;

    }

    .about_num .li {

        padding-bottom: 20px;

    }

    .about_k .fr {

        width: 100%;

        float: inherit;

    }

    .about_link .border {

        padding: 24px 16px;

    }

    .a_text p,
    .about_num .num_small {

        font-size: 14px;

    }

    .about_top .a_more {

        padding-top: 10px;

    }

}



/*product */

.in_product {

    position: relative;

    height: 100%;

    background-color: #fff;

    padding-top: 90px;

    z-index: 1;

}



.in_product:after {

    content: "";

    position: absolute;

    right: 0;

    width: 100%;

    height: 38%;

    bottom: 0;

    background: #F1F8FD;

    z-index: -1;

}



.in_product .pro_bg_r {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 50%;

    height: 50%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    opacity: 0.1;

}



.pro_content {

    position: relative;

    width: 100%;

    height: 100%;

}



.in_product .in_p_pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 50%;

    height: 100%;

}



.in_product .in_p_cont {

    float: right;

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 9;

}



.in_product .in_p_cont:before {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    background-image: url(../image/pro_bg_r.svg);

    background-position: top right;

    background-size: contain;

    background-repeat: no-repeat;

    width: 365px;

    height: 317px;

    z-index: -1;

}



.in_p_cont .container {

    height: 100%;

}



.in_p_cont .p_r_cont {

    position: relative;

    width: 50%;

    height: 100%;

    padding-left: 84px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.in_p_cont .p_r_cont:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 365px;

    height: 317px;

    max-width: 50%;

    background-image: url(../image/pro_bg2.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: bottom left;

}



.in_p_cont .in_title {

    padding-top: 96px;

}



.in_product .in_p_pic .pro_loop_pic {

    width: 100%;

    height: 100%;

}



.in_product .in_p_pic .pro_loop_pic .thumb {

    position: relative;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    font-size: 30px;

    color: red;

    display: flex;

    align-items: center;

    justify-content: center;

}



.in_product .in_p_pic .pro_loop_pic .thumb:before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

}



.in_product .in_p_pic .pro_loop_pic .thumb img {

    display: none;

}



.pro-swiper01 {

    width: 100%;

}



.pro-swiper01 .swiper-slide {

    width: 120px;

}



.infor_button {

    margin-top: 46px;

    display: flex;

    justify-content: space-between;

    width: 100%;

    position: relative;

    z-index: 9;

}



.infor_button .in_l {

    flex: 1;

    display: flex;

    align-items: center;

}



.infor_button .in_l .swiper-num {

    display: flex;

    align-items: center;

}



.infor_button .in_l .swiper-num span {

    font-family: DIN;

    font-size: 20px;

    font-weight: 700;

    line-height: 26px;

    color: #BBCBD7;

}



.infor_button .in_l .swiper-num .total {

    padding-left: 4px;

}



.infor_button .in_l .swiper-num .active {

    color: var(--dark-color);

    padding-right: 4px;

}



.infor-pagination {

    margin-left: 27px;

    position: relative;

    width: calc(100% - 84px);

    height: 2px;

    background: #D2E0EA;

}



.infor-pagination .swiper-pagination-progressbar-fill {

    background: var(--dark-color);

}



.infor_button .in_r {

    display: flex;

    align-items: center;

    width: 116px;

}



.infor_button .in_r>div {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 8px;

    width: 50px;

    height: 50px;

    border: 1px solid #ffffff;

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

    border-radius: 50%;

    transition: background-color 0.3s ease;

    cursor: pointer;

}



.infor_button .in_r>div i {

    position: relative;

    display: inline-block;

    width: 20px;

    height: 20px;

    overflow: hidden;

}



.infor-prev i:before,
.infor-prev i:after,
.infor-next i:before,
.infor-next i:after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    transition: transform 0.4s ease;

}



.infor-prev i:before {

    left: 0;

    top: 0;

    background-image: url(../image/index_p_l.svg);

}



.infor-prev i:after {

    left: 0;

    top: 0;

    transform: translateX(-100%);

    background-image: url(../image/index_p_lh.svg);

}



.infor-next i:before {

    left: 0;

    top: 0;

    background-image: url(../image/index_p_r.svg);

}



.infor-next i:after {

    left: 0;

    top: 0;

    transform: translateX(-100%);

    background-image: url(../image/index_p_rh.svg);

}



.infor_button .in_r>div:hover {

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

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

}



.infor_button .in_r>div.infor-prev:hover i:before {

    transform: translateX(100%);

}



.infor_button .in_r>div.infor-prev:hover i:after {

    transform: translateX(0);

}



.infor_button .in_r>div.infor-next:hover i:before {

    transform: translateX(-100%);

}



.infor_button .in_r>div.infor-next:hover i:after {

    transform: translateX(0);

}



.pro-swiper03 .swiper-slide {

    opacity: 0 !important;

}



.pro-swiper03 .swiper-slide.swiper-slide-active {

    opacity: 1 !important;

}



.pro-swiper01 .bg {

    padding: 20px 10px;

    border-radius: 8px;

    cursor: pointer;

}



.pro-swiper01 .swiper-slide-active .bg {

    background: #FFF;

}



.pro-swiper01 .bg .t {

    margin-top: 8px;

    color: var(--main-color);

    text-align: center;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.pro-swiper01 .bg span {

    display: inline-block;

    text-align: center;

    width: 100%;

}



.pro-swiper01 .bg span img {

    width: 58px;

}



.pro-swiper01:after {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

    background-image: url(../image/pro_t_bg.svg);

    width: 69px;

    z-index: 1;

}



.pro-swiper03 {

    margin-top: 55px;

    margin-bottom: 110px;

    width: 100%;

}



.pro-swiper03 .t {

    position: relative;

    padding-bottom: 16px;

    color: var(--main-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.1;

}



.pro-swiper03 .t:before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    background-image: url(../image/pro_line.svg);

    background-repeat: no-repeat;

    background-position: left;

    background-size: contain;

    width: 31px;

    height: 4px;

}



.pro-swiper03 .text {

    margin-top: 24px;

    color: #657188;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    height: 52px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.pro-swiper03 .more_n {

    margin-top: 40px;

}



.pro-swiper03 .more_n a {

    background-image: url(../image/more_b_bg.svg);

    color: var(--main-color);

}



.pro-swiper03 .more_n a:hover {

    color: #fff;

}



.pro-swiper03 .more_n a:before {

    background-image: url(../image/more_bh_bg.svg);

}



.pro-swiper03 .more_n a:hover .icon svg path {

    stroke: #ffffff;

}



.pro_content .down_icon {

    bottom: 34px;

    z-index: 9;

}



.down_icon.icon_blue span {

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

}



.pro_select_box {

    display: flex;

    width: calc(50% - 16px);

    margin-right: 16px;

    padding: 16px;

    height: 58px;

    justify-content: space-between;

    align-items: center;

    opacity: 1;

    border-radius: 16px 0px 16px 16px;

    background: #F1F8FD;

    position: relative;

}



.select01 {

    z-index: 9;

}



.select02 {

    z-index: 8;

}



.pro_select_box .span {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    cursor: pointer;

    z-index: 1;

}



.pro_select_box .span input {

    display: block;

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    width: calc(100% - 40px);

    height: 100%;

    padding: 0 16px;

    background: #F1F8FD;

    border-radius: 16px 0px 16px 16px;

    font-size: 16px;

    color: #657188;

}



.pro_select_box .span input::-webkit-input-placeholder {

    color: #657188;

    font-size: 16px;

}



.pro_select_box .span input:-moz-placeholder {

    color: #657188;

    font-size: 16px;

}



.pro_select_box .span input::-moz-placeholder {

    color: #657188;

    font-size: 16px;

}



.pro_select_box .span input:-ms-input-placeholder {

    color: #657188;

    font-size: 16px;

}



.pro_select_box .span .icon {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    width: 24px;

    height: 24px;

    background-image: url(../image/pro_s_jt.svg);

}



.pro_select_box .drop_down_ {

    position: absolute;

    left: 0;

    top: 100%;

    right: 0;

    border-radius: 0 0px 16px 16px;

    background: #F1F8FD;

    padding: 10px 0 10px 20px;

    display: none;

}



.select_pro,
.select_lingyu {

    width: 100%;

    padding-right: 20px;

    height: 230px;

}



.select_pro .swiper-slide,
.select_lingyu .swiper-slide {

    height: 46px;

}



.swiper-container-vertical>.select_pro,
.swiper-container-vertical>.select_lingyu {

    width: 2px;

    background-color: transparent;

}



.select_pro .swiper-scrollbar-drag,
.select_lingyu .swiper-scrollbar-drag {

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

}



.pro_select_box .drop_down_ p {

    color: var(--main-color);

    font-size: 16px;

    margin: 10px 0;

    line-height: 26px;

    cursor: pointer;

}



.pro_select_box .drop_down_ p:hover {

    color: #666;

}



.pro_select_box.bg {

    border-radius: 16px 0px 0 0;

}



/* .pro_mo_top .pro-swiper01 .swiper-wrapper {

margin-left: -240px;

}*/

@media (max-height:750px) {

    .pro-swiper03 {

        margin-top: 55px;

        margin-bottom: 50px;

    }



    s .in_product::after {

        height: 36%;

    }



}



@media (max-height:700px) {

    .pro-swiper03 {

        margin-top: 35px;

        margin-bottom: 30px;

    }



    .in_product::after {

        height: 36%;

    }



    .pro-swiper03 .more_n {

        margin-top: 30px;

    }



}



@media (max-width:1366px) {

    .pro-swiper03 {

        margin-top: 55px;

        margin-bottom: 50px;

    }



    .in_product::after {

        height: 36%;

    }



}



@media (max-width:1024px) {

    .in_product {

        padding-top: 0;

        height: 730px;

    }



    .in_product::after {

        height: 42%;

    }



}



@media (max-width:767px) {

    .in_product {

        height: auto;

        background: #F1F8FD;

    }



    .in_product::after {

        display: none;

    }



    .in_product .in_p_cont::before {

        max-width: 50%;

    }



    .in_p_cont .in_title {

        padding-top: 50px;

    }



    .in_p_cont .p_r_cont {

        width: 100%;

        padding-left: 0;

        padding-top: 25px;

    }



    .pro_select_box .span input {

        font-size: 14px;

    }



    .pro_select_box .span input::-webkit-input-placeholder {

        font-size: 14px;

    }



    .pro_select_box .span input:-moz-placeholder {

        font-size: 14px;

    }



    .pro_select_box .span input::-moz-placeholder {

        font-size: 14px;

    }



    .pro_select_box .span input:-ms-input-placeholder {

        font-size: 14px;

    }



    .in_product .in_p_pic {

        position: relative;

        width: 100%;

        height: 100%;

    }



    .in_product .in_title .a_small_t {

        color: #657188;

        display: none;

    }



    .in_product .in_title .a_small_t span::before {

        background-color: #657188;

    }



    .in_product .in_title .a_big_t {

        color: var(--main-color);

    }



    .in_product .in_p_pic .pro_loop_pic .thumb img {

        display: block;

    }



    .pro-swiper01 .bg {

        padding: 15px 10px;

        padding-bottom: 10px;

    }



    .pro_select_box,
    .pro_select_box .span input {

        background-color: #fff;

    }



    .pro_select_box .drop_down_ {

        background: #fff;

    }



    .pro_select_box {

        width: calc(50% - 10px);

        margin-right: 10px;

        padding: 10px 10px;

        height: 45px;

        border-radius: 12px 0px 12px 12px;

    }



    .pro_select .pro_select_box:nth-child(2) {

        margin-right: 0;

    }



    .pro-swiper03 {

        margin-top: 160px;

        margin-bottom: 30px;

    }



    .pro-swiper03 .more_n {

        margin-top: 20px;

    }



    .pro_mo_top {

        position: absolute;

        left: 0;

        top: 100px;

        width: 100%;

        height: 105px;

        padding-left: 40px;

        padding-right: 40px;

    }



    .pro-swiper01:after {

        display: none;

    }



    .pro-swiper01 .bg span img {

        width: 30px;

    }



    .pro-swiper01 .bg .t {

        font-size: 14px;

        height: 40px;

        line-height: 20px;

    }



    .infor_button {

        display: flex !important;

        margin-top: 5px;

        justify-content: flex-end;

        z-index: 8;

    }



    .in_p_cont .p_r_cont:after,
    .infor_button .in_l {

        display: none;

    }



    .pro-swiper03 .text {

        margin-top: 20px;

        font-size: 14px;

        line-height: 24px;

        height: 48px;

    }



    .infor_button .in_r>div {

        position: absolute;

        top: -72px;

    }



    .infor_button .in_r .infor-prev {

        left: -52px;

    }



    .infor_button .in_r .infor-next {

        right: -44px;

    }



    .more_n a {

        width: 127px;

        height: 45px;

        font-size: 14px;

        line-height: 20px;

        background-size: contain;

    }



    .more_n a .icon {

        margin-left: 15px;

    }



    .more_n a .icon svg {

        width: 20px;

        height: 8px;

    }



}



/*right*/

.right-navigate {

    position: fixed;

    right: 30px;

    top: 50%;

    transform: translateY(50%);

    -webkit-transform: translateY(50%);

    margin-top: -75px;

    z-index: 20;

    right: -100px;

    opacity: 0;

    transition: 0.68s cubic-bezier(0.075, 0.82, 0.165, 1);

}



.right-navigate.show {

    opacity: 1;

    right: 30px;

}



.right-navigate.Colors .navigate-li li.active i:before {

    background: none;

}



.right-navigate.Colors .navigate-li li i:before {

    background: #fff;

}



.right-navigate.Colors .navigate-li li span {

    color: #fff;

}



.right-navigate .consulting {

    position: absolute;

    bottom: -90px;

    right: -20px;

}



.right-navigate .consulting i {

    opacity: 0;

    visibility: hidden;

    margin-top: -15px;

    transition: 0.45s;

}



.right-navigate .consulting:hover i {

    opacity: 1;

    visibility: visible;

    margin-top: 0;

}



.navigate-li li {

    position: relative;

    margin-bottom: 16px;

    cursor: pointer;

}



.navigate-li li:hover i:before,
.navigate-li li.active i:before {

    left: 0;

    margin-left: 0;

    top: 0;

    margin-top: 0;

    width: 100%;

    height: 100%;

    border: 2px solid var(--main-color);

    background: transparent;

}



.navigate-li li i {

    display: block;

    position: relative;

    width: 10px;

    height: 10px;

}



.navigate-li li i:before {

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -5px;

    margin-top: -5px;

    content: "";

    width: 10px;

    height: 10px;

    box-sizing: border-box;

    background: rgba(101, 113, 136, 0.80);

    border-radius: 50%;

    transition: 0.45s;

}



.navigate-li li span {

    display: none;

    line-height: 14px;

    color: var(--dark-color);

    font-size: 12px;

    font-weight: 400;

    width: 12px;

    opacity: 0;

    visibility: hidden;

    transition: 0.4s;

}



.navigate-li li.active span {

    opacity: 1;

    display: inline-block;

    visibility: visible;

}



.navigate-li li:hover i {}



.navigate-li li.active i {

    display: none;

}



@media (max-width:1024px) {

    .right-navigate {

        display: none !important;

    }



}

