@charset "utf-8";



:root {

    --main-color: #12408C;

    --dark-color: #333;

    --white-color: #FFFFFF;

    --red-color: #c8161d;

    --custom-wave-anim: custom_common_wave 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;

}



img {

    max-width: 100%;

}



.index-wrapper {

    overflow: hidden;

}



.index_more {

    display: flex;

}



.index_more a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    display: flex;

    padding: 16px;

    align-items: center;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 400;

    line-height: 24px;

    overflow: hidden;

    transition: background-color .3s;

    z-index: 1;

}



.grey_bg a {

    background: #F2F2F2;

    border: 1px solid #F2F2F2;

}



.grey_border a {

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

}



.index_more span {

    margin-right: 16px;

    font-size: 16px;

}



.index_more i {

    display: block;

    width: 20px;

    height: 20px;

    background-repeat: no-repeat;

    background-size: cover;

    transition: all .3s;

}



.grey_bg i {

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

}



.grey_border i {

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

}





.grey_bg a:hover {

    background: #F2F2F2;

    border-color: #F2F2F2;

}



.grey_border a:hover {

    background: var(--main-color);

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

}



.grey_border a:hover span {

    color: var(--white-color);

}

.grey_border a:hover  i {

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

}



.index_more a:hover {

    /* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05); */

}



.index_more a:hover i {

    transform: rotate(45deg);

}







@media (max-width:767px) {

    .index_more a {

        padding: 12px 16px;

    }



    .index_more span {

        margin-right: 10px;

        /* font-size: 14px; */

    }

}

@media (max-width:359px) {

     .index_more span {

        font-size: 14px;

    }

}

/*banner*/

.banner {

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

}



/* .banner .swiper-slide:after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, .3);

    z-index: 2;

} */



.ban_button {

    position: absolute;

    left: 0;

    bottom: 120px;

    width: 100%;

    height: 1px;

    z-index: 99;

}



.ban_button>.my-container {

    height: 1px;

    justify-content: flex-end;

}



.ban_button .ban_border {

    width: 50px;

    height: 50px;

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

    border-radius: 50%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: 20px 20px;

    transition: all .3s;

    cursor: pointer;

}



.ban_button .ban-prev {

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

}



.ban_button .ban-next {

    margin-left: 30px;

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

}



.ban_button .ban_border:hover {

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

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

}



.banner .swiper-container {

    width: 100%;

    height: 100%;

}

.banner .swiper-slide {

    opacity: 0 !important;

}

.banner .swiper-slide.swiper-slide-active {

    opacity: 1 !important;

}

.index_banner .img_pc {

    height: 100%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

}



.img_m {

    height: 100%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

}



.index_banner video {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}





.left_sch {

    position: absolute;

    left: 48px;

    bottom: 48px;

    width: 18px;

    z-index: 9;

}



.left_sch span {

    margin-top: 8px;

    display: inline-block;

    color: #FFF;

    width: 100%;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    letter-spacing: 1.6px;

    writing-mode: vertical-rl;

    text-orientation: sideways;

}



.scrillm {

    width: 22px;

    height: 28px;

    border-radius: 8px;

    border: 1px solid #FFF;

    display: flex;

    justify-content: center;

}



.scrillm i {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #fff;

    margin-top: 8px;

}



.scrillm i {

    animation: jumpDown 1.9s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite

}



.ban_text {

    position: absolute;

    bottom: 60px;

    left: 0;

    width: 100%;

    z-index: 99;

}



.ban_text .ban_zh {

    color: var(--white-color);

    font-style: normal;

    font-weight: 700;

    font-family: 'Muli bold';

    line-height: 1.3;

}



.ban_text .ban_eng {

    margin-top: 10px;

    color: var(--white-color);

    font-family: 'Muli bold';

    font-style: normal;

    font-weight: 300;

    line-height: 1.2;

}



.ban_bottom_text {

    margin-top: 25px;

    padding-top: 50px;

    padding-right: 140px;

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

}



.ban_bottom_text .s_t {

    position: relative;

    width: 220px;
    padding-top: 3px;
    /* padding-left: 20px; */

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

}



/* .ban_bottom_text .s_t::before {

    content: "";

    position: absolute;

    left: 0;

    top: 8px;

    width: 10px;

    height: 10px;

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

    border-radius: 50%;

} */



.ban_bottom_text .s_des {

    color: var(--white-color);

    font-size: 20px;

    font-style: normal;

    font-weight: 290;

    line-height: 1.5;

}



.banner .swiper-slide-active .wave_anim {

    overflow: hidden;

}



.banner .swiper-slide-active .wave_anim .wave {

    opacity: 0;

    -webkit-animation: var(--wave-anim);

    animation: var(--wave-anim);

}



.banner .swiper-slide-active .wave_anim.custom .wave {

    opacity: 0;

    -webkit-animation: var(--custom-wave-anim);

    animation: var(--custom-wave-anim);

}



.wave_anim {

    overflow: hidden;

}



.wave_anim>.wave {

    display: inline-block;

    transform: translateY(125%);

    opacity: 0;

}



.wave_anim.on .wave {

    -webkit-animation: var(--wave-anim);

    animation: var(--wave-anim);

}



.wave_anim.on.custom .wave {

    -webkit-animation: var(--custom-wave-anim);

    animation: var(--custom-wave-anim);

}



@keyframes common_wave {

    0% {

        opacity: 0;

        -webkit-transform: translateY(125%);

        transform: translateY(125%);

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}



@keyframes custom_common_wave {

    0% {

        opacity: 0;

        -webkit-transform: translateY(125%) rotate(3.5deg);

        transform: translateY(125%) rotate(3.5deg);

    }



    100% {

        opacity: 1;

        -webkit-transform: translateY(0) rotate(0deg);

        transform: translateY(0) rotate(0deg);

    }

}



@media (max-width:1440px) {



    .left_sch {

        left: 25px;

        bottom: 25px;

    }



}



@media (max-width:1280px) {



    .left_sch {

        left: 20px;

        bottom: 20px;

    }

}



@media (max-width:991px) {



    .left_sch {

        display: none;

    }



    .ban_bottom_text .s_t {

        width: 150px;

    }



    .ban_bottom_text .s_t::before {

        top: 10px;

        width: 6px;

        height: 6px;

    }



    .ban_button .ban-next {

        margin-left: 10px;

    }



}



@media (max-width:767px) {

    .ban_bottom_text .s_des {

        font-size: 16px;

    }



    .ban_text {

        bottom: 120px;

    }



    .ban_bottom_text {

        margin-top: 20px;

        padding-top: 20px;

        padding-right: 0;

        flex-wrap: wrap;

    }



    .ban_bottom_text .s_t {

        width: 100%;

        margin-bottom: 15px;

    }



    .ban_button {

        bottom: 80px;

    }



    .ban_button .ban_border {

        width: 40px;

        height: 40px;

        background-size: 20px 20px;

    }



    .scrillm {

        width: 18px;

        height: 24px;

        border-radius: 4px;

    }

}





/*footer*/

.right_rove {

    position: absolute;

    display: flex;

    flex-flow: column;

    align-items: flex-end;

    right: 32px;

    top: 74px;

    z-index: 9;

}



.right_rove ul li a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    border-radius: 50%;

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

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

    overflow: hidden;

    transition: background-color 0.3s;

    cursor: pointer;

}



.right_rove a img:nth-child(2) {

    display: none;

}



.right_rove a:hover {

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

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

}



.right_rove a:hover img:nth-child(1) {

    display: none;

}



.right_rove a:hover img:nth-child(2) {

    display: block;

}



#footer {

    position: relative;

    background: #E7E8EA;

    z-index: 1;

}



.foot_top {

    padding: 68px 0 70px 0;

}



.foot_logo {

    max-width: 120px;

}



.foot_top .right {

    flex: 1;

    max-width: 85%;

    display: flex;

}



.foot_menu {

    flex: 1;

}



.foot_menu ul {

    display: flex;

}



.foot_menu a {

    display: block;

    font-weight: 400;

}



.foot_menu ul li {

    width: 50%;

    padding-right: 20px;

}



.foot_menu ul li a:first-child {

    color: #000;

    font-size: 24px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px;

    margin-bottom: 20px;

}



.foot_menu ul li a {

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px;

    margin-bottom: 16px;

}



.foot_menu ul li a:last-child {

    margin-bottom: 0;

}



.foot_menu ul li a:nth-child(n+2):hover {

    color: var(--main-color);

}



.foot_share {

    justify-content: flex-end;

}



.foot_share .f_t {

    padding-right: 16px;

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

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.foot_share ul {

    display: flex;

    margin-left: -8px;

    margin-right: -8px;

}



.foot_share ul li {

    padding: 0 8px;

}



.foot_share .w_bg {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    border-radius: 50%;

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

    transition: all 0.4s;

    z-index: 1;

}



.foot_share .w_bg img {

    width: 24px;

    height: 24px;

}





.foot_share a:hover .w_bg {

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

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

}



.eject_cont {

    position: relative;

    display: inline-block;

    overflow: hidden;

}



.eject_cont .eject_tc {

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -50px;

    transform: translateY(-10px);

    padding-top: 7px;

    opacity: 0;

    justify-content: center;

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

}



.eject_cont .eject_tc:before {

    content: ' ';

    position: absolute;

    top: 0;

    left: 50%;

    margin-left: -8px;

    width: 16px;

    height: 7px;

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

    background-repeat: no-repeat;

    background-size: 100%;

}



.eject_cont .eject_tc .img_ {

    width: 100%;

    text-align: center;

    width: 100px;

    background: #FFFFFF;

    border-radius: 5px;

    overflow: hidden;

}



.eject_cont:hover {

    overflow: visible;

}



.eject_cont .eject_tc.m_show {

    opacity: 1;

    transform: translateY(0);

    z-index: 99;

}



.foot_contact {

    width: 33.33%;

}



.foot_contact .f_t {

    color: #000;

    font-size: 24px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px;

    margin-bottom: 30px;

}



.foot_contact .f_t2 {

    display: flex;

    align-items: flex-start;

    padding-bottom: 20px;

    color: var(--dark-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 30px;

}



.foot_contact>div>p>img {

    padding-top: 4px;

    width: 24px;

    margin-right: 8px;

}



.foot_contact p a {

    font-family: "Muli Web";

}



.foot_bottom {

    border-top: 1px solid rgba(0, 0, 0, .1);

    flex-wrap: wrap;

    padding: 48px 0 55px 0;

    color: rgba(0, 0, 0, .3);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.foot_bottom a {

    color: rgba(0, 0, 0, .3);

}



.foot_bottom a:hover {

    color: var(--main-color);

}



.foot_bottom .l {

    padding-right: 10px;

}



.foot_bottom .r a {

    position: relative;

    margin-right: 29px;

    padding-right: 32px;

}



.foot_bottom .r a::before {

    content: '·';

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);



    color: #000;

    font-family: 'Muli Web';

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    opacity: 0.3;

}



.foot_bottom .r a:last-child {

    margin-right: 0;

    padding-right: 0;

}



.foot_bottom .r a:last-child:before {

    display: none;

}



@media (max-width:1440px) {

    .right_rove {

        right: 25px;

        top: 70px;

    }



    .foot_bottom .r a {

        margin-right: 22px;

        padding-right: 25px;

    }



}



@media (max-width:1366px) {

    .foot_bottom {

        padding: 38px 0 45px 0;

    }



    .right_rove {

        top: 50px;

    }



    .foot_bottom .r a {

        margin-right: 17px;

        padding-right: 20px;

    }



}

@media (max-width:1280px) {



.foot_contact {

    width: 40%;

}



}

@media (max-width:991px) {

    .right_rove {

        top: 30px;

    }



    .foot_top {

        padding: 50px 0 50px 0;

        flex-wrap: wrap;

    }



    .foot_top .right {

        padding-top: 40px;

        flex: inherit;

        width: 100%;

        max-width: inherit;

    }



    .foot_contact {

        width: 45%;

    }



    .foot_menu ul li a:first-child,

    .foot_contact .f_t {

        font-size: 22px;

    }



    .foot_menu ul li a,

    .foot_contact .f_t2 {

        font-size: 18px;

    }



    .foot_bottom {

        padding: 20px 0 25px 0;

    }



}



@media (max-width:767px) {

    .right_rove {

        top: 15px;

        right: 4px;

    }



    .foot_top {

        padding: 30px 0 20px 0;

    }



    .foot_logo {

        max-width: 100px;

    }



    .foot_top .right {

        flex-wrap: wrap;

    }



    .foot_menu {

        flex: inherit;

        width: 100%;

    }



    .foot_menu ul {

        flex-wrap: wrap;

    }



    .foot_menu ul li {

        width: 100%;

        padding-bottom: 10px;

        padding-right: 0;

    }



    .foot_contact .f_t,

    .foot_menu ul li a:first-child {

        font-size: 20px;

        margin-bottom: 10px;

    }



    .foot_menu ul li a:nth-child(n+2) {

        width: auto;

        display: inline-block;

        margin-right: 5px;

        font-size: 16px;

        margin-bottom: 5px;

    }



    .foot_share .w_bg {

        width: 40px;

        height: 40px;

        padding: 10px;

    }



    .eject_cont .eject_tc {

        margin-left: -32px;

    }



    .eject_cont .eject_tc:before {

        margin-left: -29px;

    }



    .foot_contact {

        padding-top: 10px;

        width: 100%;

    }



    .foot_contact>div .f_t {

        margin-bottom: 10px;

    }



    .foot_bottom {

        padding: 20px 0 20px 0;

        font-size: 14px;

    }



    .foot_bottom a {

        font-size: 14px;

    }



    .foot_bottom .r a {

        margin-right: 10px;

        padding-right: 15px;

    }



    .eject_cont .eject_tc .img_ {

        width: 110px;

    }



}



/*index two*/

.index_about {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.index_about>.my-container {

    height: 100%;

}



.about_cont {

    position: relative;

    width: 100%;

    height: 100%;

}



.pt180 {

    padding-top: 175px;

}



.pb80 {

    padding-bottom: 80px;

}



.about_cont .div {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    flex-flow: column;

}



@keyframes widthAnimation {

    from {

        width: 0;

    }



    to {

        width: 100%;

    }

}



@keyframes heightAnimation {

    from {

        height: 0;

    }



    to {

        height: 100%;

    }

}



@keyframes fadeInFromTop {

    0% {

        transform: translateY(-100%);

        opacity: 0;

    }



    100% {

        transform: translateY(0);

        opacity: 1;

    }

}



.about_top {

    padding-bottom: 60px;

    width: 100%;

}

.about_top .left {

    max-width: 600px;

}

.about_top .right {

    flex: 1;

    margin-left: 110px;

    display: flex;

    min-height: 210px;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

}



#mainCompany .scrillm,

#mainNews .scrillm {

    border-color: #666;

}



#mainCompany .scrillm i,

#mainNews .scrillm i {

    background-color: #666;

}



.index_title h2 {

    color: var(--dark-color);

    font-weight: 400;

    line-height: 1.4;

}

.about_text {

    padding-bottom: 20px;

}

.about_text p {

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 1.6;

    text-align: justify;

}



.about_number {

    flex: 1;

    position: relative;

    display: flex;

    flex-flow: column;

    justify-content: space-between;

    padding: 40px;

    padding-bottom: 45px;

    width: 100%;

    height: 100%;

    border-radius: 8px;

    overflow: hidden;

    z-index: 1;

}



/* .about_number::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    transition: all .3s;

} */



.about_number .about_bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

    z-index: -1;

}



.about_number .about_b_title {

    position: relative;

    z-index: 9;

}



.about_number .about_b_title h3 {

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.5;

}



.about_number .about_b_title p {

    padding-top: 8px;

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

    font-size: 20px;

    font-style: normal;

    font-weight: 400;

    line-height: 1.6;

}



.about_number ul {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: stretch;

    margin-left: -26px;

    margin-right: -26px;

    height: 60%;

    max-height: 230px;

    z-index: 2;

}



.about_number ul li {

    position: relative;

    padding-left: 26px;

    padding-right: 26px;

    width: 25%;

}



.about_number ul li::before {

    content: "";

    position: absolute;

    right: 0;

    top: 5%;

    width: 3px;

    height: 90%;

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

}



.about_number ul li::after {

    content: "";

    display: block;

    position: absolute;

    height: 2px;

    width: 3px;

    top: 5%;

    right: 0;

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

    transition: height .8s;

    -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);

    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);

}



.about_number ul li:last-child:before,

.about_number ul li:last-child:after {

    display: none;

}



.about_number .info-detail {

    display: flex;

    flex-flow: column;

    justify-content: space-between;

    height: 100%;

}



.about_number .info-detail p {

    color: var(--white-color);

    font-size: 20px;

    font-weight: 400;

    line-height: 1.5;

}



.about_number .info-detail p img {

    width: 24px;

    margin-right: 8px;

}



.about_number .info_number span {

    color: #FFF;

    font-family: 'Muli bold';

    font-size: 66px;

    font-style: normal;

    font-weight: 600;

    line-height: 1;

}



.about_number .info_number em {

    margin-left: 8px;

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

    font-size: 20px;

    font-style: normal;

    font-weight: 400;

    line-height: 32px;

}



.about_number:hover::before {

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

}



.about_number:hover ul li:after {

    height: 90%;

}



@media (max-height:800px) {

    .pt180 {

        padding-top: 155px;

    }



    .pb80 {

        padding-bottom: 60px;

    }

}



@media (max-height:750px) {

    .pt180 {

        padding-top: 140px;

    }



    .pb80 {

        padding-bottom: 40px;

    }



    .about_top {

        padding-bottom: 30px;

    }

}



@media (max-width:1580px) {

    .about_number .info_number span {

        font-size: 58px;

    }

}



@media (max-width:1440px) {

    .about_number .info_number span {

        font-size: 40px;

    }



    .about_text p {

        font-size: 18px;

    }

}



@media (max-width:1366px) {

    .pt180 {

        padding-top: 140px;

    }



    .pb80 {

        padding-bottom: 40px;

    }



    .about_text p {

        font-size: 18px;

    }



    .about_number {

        padding: 30px 40px;

    }



    .about_number .info_number span {

        font-size: 40px;

    }



    .about_number .about_b_title p {

        padding-top: 4px;

        font-size: 18px;

    }

    .about_top .right {

        margin-left: 30px;

    }



}



@media (max-width:1280px) {

    .pt180 {

        padding-top: 120px;

    }



    .pb80 {

        padding-bottom: 40px;

    }



    .about_number .info_number span {

        font-size: 36px;

    }



}

@media (max-width:1279px) {


.about_top .left {

    max-width: 490px;

}



}

@media (max-width:1180px) {

    .about_number ul {

        height: auto;

        padding-top: 20px;

    }

    .about_number .info-detail p {

        margin-bottom: 30px;

    }

}



@media (max-width:991px) {

    .pt180 {

        padding-top: 80px;

    }



    .pb80 {

        padding-bottom: 80px;

    }



    .about_cont {

        padding-bottom: 30px;

    }



    .about_top {

        flex-wrap: wrap;

        padding-bottom: 30px;

    }



    .about_top .left {

        flex: inherit;

        margin-right: 0px;

        padding-bottom: 35px;

        width: 100%;
        max-width: inherit;

    }



    .about_top .right {

        flex: inherit;

        margin-left: 0;

        min-height: inherit;

    }



    .about_top .right .index_more {

        margin-top: 30px;

    }



    .about_number {

        padding-top: 40px;

    }



    .about_number ul {

        padding-top: 80px;

    }

    .about_number ul li {
        padding-left: 20px;
        padding-right: 20px;
    }


    .about_number .info-detail p {

        font-size: 16px;

    }



    .about_number .info_number {

        padding-top: 40px;

    }


    .about_number .info_number span {

        font-size: 30px;

    }

    .about_number ul {

        max-height: inherit;

    }



}



@media (max-width:767px) {

    .pt180 {

        padding-top: 50px;

    }



    .pb80 {

        padding-bottom: 50px;

    }



    .about_number .about_b_title h3 {

        font-size: 22px;

    }

  

    .about_cont {

        padding-bottom: 0;

    }

    .about_text p {

        -webkit-line-clamp: inherit;

    }

    .about_number .about_b_title p {

        font-size: 16px;

    }



    .about_number {

        padding: 40px 20px 30px 20px;

    }



    .about_number ul {

        flex-wrap: wrap;

    }



    .about_number ul li {

        width: 50%;

        margin: 10px 0;

        padding: 0 20px;

    }



    .about_number ul li:nth-child(2n):before,

    .about_number ul li:nth-child(2n):after {

        display: none;

    }

    .about_number .info-detail p {

        margin-bottom: 0;

    }

    .about_number .info_number {

        padding-top: 20px;

    }



    .about_number .info_number span {

        font-size: 28px;

    }



    .about_number .info_number em {

        font-size: 18px;

    }

   

}



@media (max-width:767px) {}



/* product */

@media (min-width:991px) {

    .in_pro_top {

        position: absolute;

        top: 180px;

        left: 0;

        width: 100%;

        z-index: 9;

    }



    .pro_table_title {

        position: absolute;

        left: 0;

        bottom: 80px;

        width: 100%;

        z-index: 9;

    }

}



.in_pro_top .index_title h2 {

    color: var(--white-color);

    font-family: 'Muli bold';

}



.pro_table_title ul {

    display: flex;

    justify-content: space-between;

    align-items: stretch;

}



.pro_table_title ul li {

    width: calc(25% - 15px);

}



.pro_table_title .border {

    position: relative;

    display: flex;

    padding: 32px 32px 15px 32px;

    height: 200px;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-start;

    border-radius: 8px;

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

    backdrop-filter: blur(2px);

    overflow: hidden;

    cursor: pointer;

    transition: all .4s;

}



.pro_table_title .border .icon {

    position: absolute;

    right: 22px;

    top: 22px;

    width: 28px;

}



.pro_table_title .border .icon img {

    width: 100%;

}



.pro_table_title .title {

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

    font-weight: 700;

    line-height: 1.4;

    font-size: 20px;

    min-height: 62px;

    max-width: 250px;

}



.pro_table_title .text {

    margin-top: 8px;

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

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    height: 52px;

}



.pro_table_title .active .border {

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

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

}



.pro_table_title .active .icon {

    right: 20px;

    top: 20px;

    width: 38px;

}



.pro_table_title .active .title {

    color: var(--white-color);

    font-size: 22px;

}



@media (min-width:991px) { 

    .pro_table_title .title {

        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    }

    .pro_table_title .text {

        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    }

    .pro_table_title .active .title {

        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

    }

    .pro_table_title .active .text {

        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    }

}

.pro_table {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 8;

}



.pro_table::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    /* opacity: 0.3; */

    background: #000;

    opacity: 0.1;

}



.pro_table .pub-t1 {

    display: none;

    opacity: 0;

    width: 100%;

    height: 100%;

    transition: all .5s;

    transition-delay: .2s;

}

.pro_table_title .progress-bar {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 3px;

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

  

}

.pro_table .pub-t1.d-show {

    display: block;

    opacity: 1;

}



.pro_table .pub-t1 video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.pro_e_video .s {

    display: none;

}

.pro_e_video .title {

    font-size: 20px;

    color: var(--white-color);

    font-weight: 600;

}

.pro_e_video .text {

    padding-top: 10px;

    padding-bottom: 20px;

    font-size: 16px;

    color: var(--white-color);

}



@keyframes progressBarAnimation {

    0% {

        width: 0%;

    }

    100% {

        width: 100%;

    }

}

@media (max-width:1680px) {

.pro_table_title .border {

    padding: 32px 20px 15px 20px;

}



}



@media (max-width:1440px) {

    .pro_table_title .border {

        height: 180px;

    }

    .pro_table_title .border {

        padding: 32px 16px 15px 16px;

    }

    .pro_table_title .active .title {

        font-size: 22px;

    }



}



@media (max-width:1366px) {

    .in_pro_top {

        top: 140px;

    }



    .pro_table_title {

        bottom: 40px;

    }



    .pro_table_title .border {

        height: 160px;

        padding-bottom: 26px;

    }

   

    .pro_table_title .text {

        margin-top: 6px;

    }

}



@media (max-width:1365px) {

    .pro_table_title .border {

        padding: 65px 16px 15px 16px;

        height: 100%;

    }

    .pro_table_title .text {

        margin-top: 4px;

    }

 
    .pro_table_title .active .icon {

        right: 16px;

        top: 16px;

        width: 32px;

    }



}

@media (max-width:1279px) {

    .pro_table_title ul li {

        width: calc(25% - 8px);

    }

    .pro_table_title .active .title {

        font-size: 20px;

    }

    .pro_table_title .border {

        padding: 65px 16px 15px 16px;

    }

    .pro_table_title .text {

        height: 40px;

        line-height: 20px;

        font-size: 12px;

    }



}

@media (max-width:1200px) {

    .pro_table_title .border {

        padding: 65px 12px 15px 12px;

    }

}

@media (max-width:991px) {

    .in_pro_top {

        padding-top: 50px;

    }



    .in_pro_top .index_title h2 {

        color: var(--dark-color);

    }



    .pro_table {

        display: none;

    }



    .pro_table_title ul {

        flex-wrap: wrap;

    }



    .pro_table_title {

        padding-top: 20px;

        bottom: inherit;

        padding-bottom: 20px;

    }



    .pro_table_title ul li {

        width: 100%;

    }



    .pro_table_title .border {

        padding: 15px 0 15px 0;

        height: auto;

    }
    .pro_table_title .title {
        max-width: inherit;
        min-height: inherit;
    }
    .pro_table_title .text {

        height: auto;

        font-size: 16px;

    }

    .pro_table_title .border .icon {

        display: none;

    }



    .pro_table_title .mo_show {

        position: relative;

        display: block !important;

        z-index: 2;

    }



    .pro_table_title .mo_show::after {

        content: "";

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, .1);

        z-index: 1;

    }



    .pro_table_title .mo_show::before {

        content: "";

        position: absolute;

        left: 50%;

        top: 50%;

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

        width: 56px;

        height: 56px;

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

        background-repeat: no-repeat;

        background-size: 100%;

        z-index: 2;

    }



    .pro_table_title .mo_show img {

        border-radius: 8px;

    }



    .pro_table_title .active .title,

    .pro_table_title .title {

        margin-top: 20px;

        color: var(--dark-color);

    }



    .pro_table_title .text {

        color: #666;

    }



}



@media (max-width:767px) {



    .pro_table {

        display: none;

    }

    .pro_table_title ul li {

        padding-bottom: 10px;

    }

    .pro_table_title .active .title,

    .pro_table_title .title {

        padding-top: 15px;

        font-size: 20px;

        line-height: 1.2;

        min-height: inherit;

    }

    .pro_table_title .text {

        margin-top: 8px;

    }

    .pro_e_video .s {

        display: block;

    }

    .pro_e_video .tbox {

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

    }

}



/* index new */

.index_new_bg {

    background-color: #F8F9FB;

}



.index_new_bg .my-container {

    height: 100%;

}



.index_news {

    position: relative;

    width: 100%;

    height: 100%;

}

.index_news .index_title h2 {

    font-family: 'Muli bold';

}

.index_new_top {

    width: 100%;

    padding-bottom: 50px;

}



.index_new_box {

    position: relative;

    width: 100%;

    /* max-height: calc(100% - 110px); */

}



.new_list_scoll {

    position: absolute;

    right: 0;

    top: 0;

    padding-left: 60px;

    padding-right: 10px;

    width: 60%;

    height: 100%;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch; 

    /* scrollbar-width: thin; 

    scrollbar-color: #888 #f1f1f1;  */

}

/* .new_list_scoll::-webkit-scrollbar {

    width: 4px;

}



.new_list_scoll::-webkit-scrollbar-track {

    background: #f1f1f1;

}



.new_list_scoll::-webkit-scrollbar-thumb {

    background: #888;

    border-radius: 2px;

}



.new_list_scoll::-webkit-scrollbar-thumb:hover {

    background: #555;

} */



.new_big_left {

    position: relative;

    width: 40%;

    height: 0;

    padding-top: 40%;

    overflow: hidden;

}

.new_big_left::before {

    content: "";

    position: absolute;

    right:100%;

    bottom: 30px;

    width: 80px;

    height: 160px;

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

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 0;

    z-index: 8;

}

.new_big_left .thumb {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    border-radius: 8px;

    overflow: hidden;

}



.new_big_left .thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.new_big_left .new_big_title {

    position: absolute;

    display: flex;

    flex-flow: column;

    justify-content: center;

    bottom: 30px;

    right: 100px;

    padding: 35px 35px 35px 35px;

    width: calc(100% - 100px);

    height: 160px;

    border-radius: 0 100px 8px 0;

    background:var(--white-color);

    overflow: hidden;

    z-index: 1;

}





.new_big_left .new_big_title::after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 100%;

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

    background-repeat: no-repeat;

    background-size: cover;

    transition: all .4s ease-in-out;

    z-index: -2;

}



.new_big_title .time {

    display: block;

    align-items: center;

    color: #999;

    font-size: 18px;



    font-weight: 290;

    line-height: normal;

    z-index: 9;

}



.new_big_title .time em {

    font-style: normal;

    color: #999;

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

}



.new_big_title .time span {

    position: relative;

    margin-right: 10px;

    padding-right: 11px;

}



.new_big_title .time span::before {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 16px;

    background: #CCC;

}



.new_big_title .title {

    margin-top: 10px;

    font-weight: 400;

    z-index: 9;

}



.new_big_left:hover .thumb img {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.new_big_left:hover .time,

.new_big_left:hover .new_big_title .time em {

    color: var(--white-color);

}



.new_big_left:hover .new_big_title .time span::before {

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

    opacity: 1;

}

.new_big_left:hover .new_big_title::after{

    width: 100%;

}



.new_big_left:hover .title {

    color: var(--white-color);

}

.active-item .new_big_left::before{

    opacity: 1;

    transition: opacity 3.8s;

    transition-delay: .8s;



}

.active-item .new_big_left {

    overflow: visible;

}





.new_list_scoll::-webkit-scrollbar {

    width: 4px;

    height: 2px

}



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

    display: none

}



.new_list_scoll::-webkit-scrollbar-corner,

::-webkit-scrollbar-track {

    background-color: #999;

}



.new_list_scoll::-webkit-scrollbar-thumb {

    border-radius: 0;

    background-color:rgba(0, 0, 0, .1);

    /* 竖拉条颜色 */

}



.new_list_scoll ul li {

    padding-top: 36px;

}



.new_list_scoll a {

    position: relative;

    display: block;

    padding-bottom: 36px;

}



.new_list_scoll a::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background-color: rgba(0, 0, 0, 0.10);

}



.new_list_scoll a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

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

    transition: width .5s;

}



.new_list_scoll .time {

    display: block;

    align-items: center;

    color: #999;

    font-size: 18px;



    font-weight: 290;

    line-height: normal;

}



.new_list_scoll .time em {

    font-style: normal;

    color: #999;

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

}



.new_list_scoll .time span {

    position: relative;

    margin-right: 10px;

    padding-right: 11px;

}



.new_list_scoll .time span::before {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 16px;

    background: #CCC;

}



.new_list_scoll .title {

    margin-top: 10px;

    color: var(--dark-color);

    font-style: normal;

    font-weight: 400;

    line-height: 30px;

}



.new_list_scoll a:hover::after {

    width: 100%;

}



.new_list_scoll a:hover .title {

    color: var(--main-color);

}



@media (min-width:1181px) {



    .index_new_top,

    .index_new_box {

        -webkit-transform: translateY(60px);

        -moz-transform: translateY(60px);

        -ms-transform: translateY(60px);

        transform: translateY(60px);

        opacity: 0;

        -webkit-transition: .7s ease-out;

        -moz-transition: .7s ease-out;

        transition: .7s ease-out;

        visibility: hidden;

    }



    .active-item .index_new_top {

        -webkit-transition-delay: .6s;

        -moz-transition-delay: .6s;

        transition-delay: .6s;

    }



    .active-item .index_new_box {

        -webkit-transition-delay: .8s;

        -moz-transition-delay: .8s;

        transition-delay: .8s;

    }



    .active-item .index_new_top,

    .active-item .index_new_box {

        -webkit-transform: translate(0);

        -moz-transform: translate(0);

        -ms-transform: translate(0);

        transform: translate(0);

        opacity: 1;

        visibility: visible;

    }





}



@media (max-height:800px) {

    .index_new_top {

        padding-bottom: 20px;

    }



    .new_big_left {

        width: 39%;

        padding-top: 39%;

    }



    .new_list_scoll {

        width: 61%;

    }

}



@media (max-height:700px) {

    .new_big_left {

        width: 35%;

        padding-top: 35%;

    }



    .new_list_scoll {

        width: 65%;

    }



}



@media (max-width:1439px) {

    .index_new_bg .my-container {

        overflow: hidden;

    }

    .new_big_left::before {

        height: 150px;

    }

    .new_big_left .new_big_title {

        right: 70px;

        width: calc(100% - 70px);

        height: 150px;

    }

}



@media (max-width:1365px) {

   

    .index_new_top {

        padding-bottom: 30px;

    }





}



@media (max-width:1280px) {

    .new_big_left {

        width: 45%;

        padding-top: 45%;

    }



    .new_list_scoll {

        width: 55%;

    }





    .new_list_scoll ul li {

        padding-top: 30px;

    }



    .new_list_scoll a {

        padding-bottom: 30px;

    }



}



@media (max-width:1279px) {

    .new_big_left {

        width: 50%;

        padding-top: 50%;

    }



    .new_list_scoll {

        width: 50%;

        padding-left: 40px;

    }



    .new_big_left .new_big_title {

        right: 60px;

       width: calc(100% - 60px);

    }



}



@media (max-width:991px) {

    .new_big_left {

        width: 51%;

        padding-top: 51%;

    }



    .new_list_scoll {

        width: 49%;

        padding-left: 30px;

    }

    .new_big_left::before {

        height: 130px;

    }

    .new_big_left .new_big_title {

        padding: 25px 35px 25px 35px;

        right: 40px;

        width: calc(100% - 40px);

        height: 130px;

    }



    .new_list_scoll ul li {

        padding-top: 20px;

    }



    .new_list_scoll a {

        padding-bottom: 20px;

    }



    .new_list_scoll .title {

        font-size: 18px;

        line-height: 28px;

    }

}



@media (max-width:767px) {



    .index_new_box {

        flex-wrap: wrap;

    }



    .new_big_left {

        width: 100%;

        padding-top: 100%;

    }



    .new_big_title .time,

    .new_list_scoll .time,

    .new_list_scoll .time em {

        font-size: 16px;

    }

    .active-item .new_big_left::before {

        bottom: 20px;

    }

    .new_big_left::before {

        height: 100px;

        bottom: -120px;

    }

    .new_big_left .new_big_title {

        height: 100px;

    }

    .new_big_left .new_big_title {

        bottom: 20px;

        right: 20px;

        padding: 18px 15px 18px 20px;

        width: calc(100% - 20px);

        border-radius: 0 70px 8px 0px;

    }



    .new_list_scoll {

        position: relative;

        margin-top: 30px;

        width: 100%;

        padding-left: 0px;

        height: 400px;

    }



    .new_list_scoll ul li {

        padding-top: 20px;

    }



    .new_list_scoll a {

        padding-bottom: 20px;

    }



}





/* product detail */

.pro_video {

    position: relative;

    width: 100%;

    height: 850px;

    overflow: hidden;

    z-index: 1;

}



.pro_video .mask {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    z-index: -1;

}



.pro_video .mask video,

.pro_video .mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.pro_d_text {

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    text-align: center;

    z-index: 2;

}

.pro_d_text .my-container {

    max-width: 1200px;

}



.pro_d_text h2 {

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.5;

}



.pro_d_text h3 {

    margin-top: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.pro_d_text h3 span {

    margin-left: 16px;

    margin-right: 16px;

    color: var(--white-color);

    text-align: center;

    font-style: normal;

    font-weight: 400;

    line-height: 1.2;

}



.pro_d_text h3 em {

    display: inline-block;

    width: 76px;

    height: 1px;

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

}



.pro_d_menu {

    position: sticky;

    position: -webkit-sticky;

    top: 0;

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

    z-index: 9;

}



.pro_d_menu ul {

    padding-top: 25px;

    padding-bottom: 25px;

    display: flex;

    align-items: stretch;

    justify-content: center;

    flex-wrap: wrap;

}



.pro_d_menu ul li {

    margin: 5px 18px;

}



.pro_d_menu a {

    display: block;

    font-size: 18px;

    color: #666;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.pro_d_menu a:hover {

    color: var(--dark-color);

    font-weight: 500;

}



.pro_d_menu .active a {

    color: var(--dark-color);

    font-weight: 700;



}



.pro_d_box {

    background: #F8F9FB;

}



.pro_d_box .term_box {

    /* padding-top: 85px; */

    padding-top: 65px;

    overflow: hidden;

}



.pro_d_box .pto_d_title {

    color: var(--main-color);

    font-weight: 700;

    line-height: 1.5;

}



.pro_d_box .pro_d_des {

    max-width: 1040px;

    margin: 0 auto;

    padding-top: 24px;

    text-align: center;

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

}



.pro_d_box .pro_detail_video {

    margin-top: 48px;

    position: relative;

    border-radius: 8px;

    margin-bottom: 30px;

    overflow: hidden;

}



.pro_d_box .pro_detail_video video {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

}



.pro_d_box .pro_d_left {

    flex: 1;

}



.pro_d_box .pro_d_right {

    width: 57.5%;

}



.pro_d_box .pro_d_left .pro_d_des {

    text-align: left;

}



.pro_d_box .pro_d_left .pro_d_label {

    padding-top: 64px;

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

}



.pro_d_box .pro_d_label span {

    margin: 5px;

    display: flex;

    padding: 8px 20px;

    justify-content: center;

    align-items: center;

    border-radius: 30px;

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

}



.pro_d_three .pro_d_left {

    padding-right: 122px;

}



.pro_d_four .pro_d_left {

    padding-left: 122px;

}



.pro_d_four .pro_d_left {

    order: 2;

}



.term_box .pro_d_right {

    border-radius: 8px;

    overflow: hidden;

}



.pro_d_right video {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    border-radius: 8px;

}



.pro_d_right img {

    border-radius: 8px;

}



.pro_d_box .clinical_bg {

    padding-bottom: 88px;

}



.pro_d_box .sup_bg {

    padding-bottom: 100px;

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

}



.pro_d_swiper {

    margin-top: 48px;

    overflow: visible;

}



.pro_d_swiper .swiper-slide {

    cursor: url('../images/cursor.svg'), auto;

}



.pro_d_swiper .bg {

    background: var(--white-color);

    border-radius: 8px;

    overflow: hidden;

}



.pro_d_swiper .thumb {

    padding: 16px;

    overflow: hidden;

}



.pro_d_swiper .thumb i {

    border-radius: 4px;

    display: block;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.pro_d_swiper .cont {

    padding: 16px;

}



.pro_d_swiper .cont .t {

    color: var(--dark-color);

    text-align: center;

    font-size: 20px;

    font-weight: 700;

    line-height: 30px;

}



.pro_d_swiper .cont .text {

    margin-top: 10px;

    text-align: center;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.pro_button {

    margin-top: 48px;

}



.pro_button .pro-pagination {

    flex: 1;

    max-width: 600px;

    margin-right: 38px;

    position: relative;

    height: 3px;

    background-color: transparent;

}



.pro_button .pro-pagination::before {

    content: "";

    position: absolute;

    left: 0;

    top: 1px;

    height: 1px;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.10);

}



.pro_button .pro-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

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

}



.page_button>div {

    position: relative;

    padding: 15px;

    border-radius: 50px;

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

    transition: all 0.3s;

    cursor: pointer;

}



.page_button>div::before {

    content: "";

    width: 24px;

    height: 24px;

    background-repeat: no-repeat;

    background-size: cover;

    display: block;

}



.page_button>div.swiper-button-disabled {

    opacity: 0.5;

    pointer-events: none;

    cursor: not-allowed;

}



.pro_button .pro_b_bg>div:nth-child(2) {

    margin-left: 16px;

}



.page_left::before {

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

}



.page_right::before {

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

}



.page_button>div:hover {

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

}



.page_left:hover:before {

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

}



.page_right:hover:before {

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

}



.sup_product {

    position: relative;

    margin-top: 48px;

}



.pro_list_swiper .bg {

    border-radius: 4px;

    background: #F8F9FB;

    overflow: hidden;

}



.pro_list_swiper .thumb {

    padding: 21px;

}



.pro_list_swiper .thumb i {

    display: block;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .3s;

    -o-transition: transform .3s;

    transition: transform .3s;

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

    -webkit-transition: transform .3s;

}



.pro_list_swiper .cont {

    padding: 32px 40px;

}



.pro_list_swiper .title {

    color: var(--dark-color);

    text-align: center;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    height: 56px;

}



.pro_list_swiper a:hover .title {

    color: var(--main-color);

}

.pro_list_swiper a:hover .bg {

    background-color: #F2F4F6;

}

.pro_list_swiper a:hover i {

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

}



.sub_button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 9;

}



.sub_button {

    padding: 15px;

    border-radius: 50px;

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

    transition: all 0.3s;

    cursor: pointer;

}



.sub_button::before {

    content: "";

    width: 24px;

    height: 24px;

    background-repeat: no-repeat;

    background-size: cover;

    display: block;

}



.sub_button.swiper-button-disabled {

    opacity: 0.5;

    pointer-events: none;

    cursor: not-allowed;

}



.sub-prev {

    left: -80px;

}



.sub-next {

    right: -80px;

}



.sub-prev::before {

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

}



.sub-next::before {

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

}



.sub_button:hover {

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

}



.sub-prev:hover:before {

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

}



.sub-next:hover:before {

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

}



@media (max-width:1440px) {

    .pro_d_menu ul li {

        margin: 5px 20px;

    }



    .pro_d_three .pro_d_left {

        padding-right: 100px;

    }



    .pro_d_four .pro_d_left {

        padding-left: 100px;

    }

}



@media (max-width:1366px) {

    .pro_video {

        height: 750px;

    }



    .pro_d_menu ul li {

        margin: 5px 15px;

    }



    .pro_d_three .pro_d_left {

        padding-right: 80px;

    }



    .pro_d_four .pro_d_left {

        padding-left: 80px;

    }





}


@media (max-width:1280px) {

    .pro_video {

        height: 700px;

    }



    .pro_d_three .pro_d_left {

        padding-right: 60px;

    }



    .pro_d_four .pro_d_left {

        padding-left: 60px;

    }



    .pro_d_box .pro_d_left .pro_d_label {

        padding-top: 40px;

    }



    .sub-prev {

        left: -75px;

    }



    .sub-next {

        right: -75px;

    }





}



@media (max-width:1200px) {

    .pro_d_menu {

        display: none;

    }



    .pro_d_three .pro_d_left {

        padding-right: 40px;

    }



    .pro_d_four .pro_d_left {

        padding-left: 40px;

    }



    .pro_d_box .pro_d_left .pro_d_label {

        padding-top: 30px;

    }



    .sub-prev {

        left: -60px;

    }



    .sub-next {

        right: -60px;

    }



}



@media (max-width:991px) {

    .pro_d_box .pro_d_des {

        padding-top: 10px;

        font-size: 16px;

        line-height: 1.5;

    }



    .pro_video {

        height: 600px;

    }



    .pro_d_box .cont_img {

        flex-wrap: wrap;

    }



    .pro_d_box .pro_d_left {

        flex: inherit;

        padding: 0;

    }



    .pro_d_box .pro_d_right {

        margin-top: 30px;

        width: 100%;

    }



    .pro_d_four .pro_d_left {

        order: inherit;

    }



    .sup_product {

        padding-bottom: 70px;

    }



    .sub_button {

        top: inherit;

        transform: inherit;

        bottom: 0;

    }



    .sub-prev {

        left: inherit;

        right: 70px;

    }



    .sub-next {

        right: 0;

    }



}



@media (max-width:767px) {
    .pro_d_text h3 {
        margin-top: 20px;
    }
    .pro_d_text h3 em {

        width: 30px;

    }



    .pro_d_text h3 span {

        margin-left: 12px;

        margin-right: 12px;

        font-size: 18px;

    }



    .pro_video {

        height: 450px;

    }



    .pro_d_box .term_box {

        padding-top: 50px;

        padding-bottom: 20px;

    }



    .pro_d_box .clinical_bg {

        padding-bottom: 50px;

    }



    .pro_button {

        margin-top: 20px;

    }



    .page_button>div,

    .sub_button {

        padding: 12px;

    }



    .sub-prev {

        right: 60px;

    }



    .page_button>div::before,

    .sub_button::before {

        width: 20px;

        height: 20px;

    }



    .pro_button .pro_b_bg>div:nth-child(2) {

        margin-left: 10px;

    }



    .pro_d_swiper .cont .t {

        font-size: 18px;

    }



    .pro_d_swiper .cont .text {

        font-size: 16px;

        margin-top: 5px;

    }



    .pro_d_box .pro_detail_video {

        margin-top: 30px;

    }



    .pro_d_box .sup_bg {

        padding-bottom: 50px;

    }



    .pro_d_swiper .cont {

        padding: 10px 16px 20px 16px;

    }
    /* .pro_list_swiper .title {
        height: auto;
        max-height: 56px;
    } */
}



/* 内页公共 */

.page_banner {

    position: relative;

    width: 100%;

    height: 800px;

    overflow: hidden;

}



.page_banner .mask {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;



    z-index: -1;

}



@keyframes scaleToNormal {

    from {

        -webkit-transform: scale(1.1);

        -ms-transform: scale(1.1);

        transform: scale(1.1);

    }



    to {

        -webkit-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

}



.page_banner::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    /* background: rgba(0, 0, 0, 0.3); */

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

}



.page_banner .mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

    animation: scaleToNormal 1.2s ease-in-out forwards;

}

.page_banner .mask video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.page_banner .page_text {

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    text-align: center;

    z-index: 2;

}



.page_banner .page_text .s_t {

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

    font-size: 24px;

    font-weight: 400;

    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}



.page_banner .page_text h2 {

    margin-top: 24px;

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.5;

}

.product_ban .page_text .s_t {

    max-width: 1000px;

    margin: 0 auto;

    margin-top: 24px;

}

.product_ban .page_text h2 {

    margin-top: 0;

}



.page_menu {

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

}



.page_menu ul {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}



.page_menu ul li {

    padding: 0 20px;

}



.page_menu ul li a {

    position: relative;

    padding: 30px 0;

    display: block;

    color: #666;

    font-size: 20px;

    font-weight: 400;

    line-height: 30px;

}



.page_menu ul li a::before {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    bottom: 0;

    height: 2px;

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

    transition: width .4s ease;

}



.page_menu ul li a:hover {

    color: var(--dark-color);

}



.page_menu ul li.active a {

    color: var(--dark-color);

    font-weight: 700;

}



.page_menu ul li a:hover::before,

.page_menu ul li.active a::before {

    width: 100%;

}



@media (max-width:1440px) {



    .page_banner {

        height: 750px;

    }





}



@media (max-width:1366px) {



    .page_banner {

        height: 700px;

    }



    .page_banner .page_text .s_t {

        font-size: 22px;

    }



    .page_menu ul li {

        padding: 0 15px;

    }



}



@media (max-width:1280px) {



    .page_banner {

        height: 650px;

    }



    .page_menu ul li {

        padding: 0 10px;

    }



}



@media (max-width:991px) {



    .page_banner {

        height: 600px;

    }







}



@media (max-width:767px) {



    .page_banner {

        height: 350px;

    }



    .page_banner .page_text .s_t {

        font-size: 16px;

    }



    .page_menu ul li {

        padding: 0 15px;

    }



    .page_menu ul li a {

        padding: 20px 0;

        font-size: 18px;

        line-height: 1.4;

    }



    .page_banner .page_text h2 {

        margin-top: 10px;

        font-size: 22px;

        line-height: 1.4;

    }

    .product_ban .page_text .s_t {

        margin-top: 10px;

        line-height: 1.4;

    }



}



/* product */

.pro_position {

    position: relative;

    padding: 80px 0;

    background-color: #F8F9FB;

    overflow: hidden;

    z-index: 1;

}



.form_search {

    flex: 1;

    padding: 8px 8px 8px 32px;

    display: flex;

    justify-content: space-between;

    border-radius: 50px;

    background: var(--white-color);

    height: 70px;

}



.form_search .sear_input {

    flex: 1;

    margin-right: 15px;

    color: var(--dark-color);

    font-family: 'Muli Web';

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    background-color: transparent;

}



.form_search .submit_icon {

    display: flex;

    width: 54px;

    height: 54px;

    padding: 14px;

    justify-content: center;

    align-items: center;

    border-radius: 30px;

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

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

    background-size: 24px 24px;

    background-repeat: no-repeat;

    background-position: center;

    cursor: pointer;

}



.form_search .sear_input::-webkit-input-placeholder {

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

    font-size: 18px;

    opacity: 0.8;

    font-family: 'Muli Web';

}



.form_search .sear_input::-moz-placeholder {

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

    opacity: 0.8;

    font-size: 18px;

    font-family: 'Muli Web';

}



.form_search .sear_input:-moz-placeholder {

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

    opacity: 0.8;

    font-size: 18px;

    font-family: 'Muli Web';

}



.form_search .sear_input:-ms-input-placeholder {

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

    opacity: 0.8;

    font-size: 18px;

    font-family: 'Muli Web';

}



.year_select_box {

    position: relative;

    display: flex;

    margin-right: 24px;

    width: 464px;

    z-index: 9;

}



.year_select_box>.span {

    position: relative;

    display: flex;

    width: 100%;

    padding: 8px 24px 8px 32px;

    height: 70px;

    justify-content: space-between;

    align-items: center;

    border-radius: 50px;

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

    cursor: pointer;

    overflow: hidden;

    transition-delay: .2s;

}



.year_select_box>.span input {

    background: transparent;

    border: none;

    color: var(--dark-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    width: calc(100% - 20px);

    font-family: 'Muli Web';

    cursor: pointer;

}



.year_select_box>.span.active input {

    color: var(--main-color);

}



.year_select_box>.span input::-webkit-input-placeholder {

    color: var(--white-color);

    font-size: 18px;

    font-family: 'Muli Web';

}



.year_select_box>.span input::-moz-placeholder {

    color: var(--white-color);

    font-size: 16px;

    font-family: 'Muli Web';

}



.year_select_box>.span input:-moz-placeholder {

    color: var(--white-color);

    font-size: 16px;

    font-family: 'Muli Web';

}



.year_select_box>.span input:-ms-input-placeholder {

    color: var(--white-color);

    font-size: 16px;

    font-family: 'Muli Web';

}



.year_select_box>.span .icon {

    position: absolute;

    right: 16px;

    width: 24px;

    height: 24px;

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

    background-repeat: no-repeat;

    background-size: 100%;

}



.year_select_box .drop_down_ {

    position: absolute;

    display: none;

    padding: 24px 0;

    left: 50%;

    top: calc(100% + 10px);

    width: 100%;

    transform: translateX(-50%);

    border-radius: 17px;

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

    background: var(--white-color);

    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);



    transition: background-color .3s;

    overflow: hidden;



}



.year_select_box .drop_down_>div:first-child {

    padding: 0 24px;

    overflow-y: auto;

    max-height: 250px;

}



.year_select_box .drop_down_ p {

    padding-top: 12px;

    padding-bottom: 12px;

}



.year_select_box .drop_down_ p:last-child {

    padding-bottom: 0;

    border-bottom: none;

}



.year_select_box .drop_down_ p span {

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    display: inline-block;

    cursor: pointer;

}



.year_select_box .drop_down_ p span:hover {

    color: var(--main-color);

}



.year_select_box .drop_down_>div:first-child::-webkit-scrollbar {

    width: 5px;

    height: 5px;

    background-color: transparent;

    border-radius: 10px;

}



.year_select_box .drop_down_>div:first-child::-webkit-scrollbar-track {

    border-radius: 10px;

    background-color: transparent;

}



.year_select_box .drop_down_>div:first-child::-webkit-scrollbar-thumb {

    border-radius: 10px;

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

}



.year_select_box>.span.active input::-webkit-input-placeholder {

    color: var(--main-color);

    font-family: 'Muli Web';

}



/* .year_select_box>.span.active input::-moz-placeholder {

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

    font-family: 'Muli Web';

} */



.year_select_box>.span.active input:-moz-placeholder {

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

    font-family: 'Muli Web';

}



.year_select_box>.span.active input:-ms-input-placeholder {

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

    font-family: 'Muli Web';

}



.rec_product {

    margin-top: 64px;

    position: relative;

    overflow: hidden;

    z-index: -1;

}



.rec_product>.core_big_title {

    padding-top: 0;

    padding-bottom: 30px;

}



.rec_swiper .swiper-slide {

    opacity: 0.2;

    padding-top: 20px;

    height: auto;

    transform-origin: center bottom;

}



.rec_swiper .swiper-slide.swiper-slide-prev,

.rec_swiper .swiper-slide.swiper-slide-next {

    opacity: 0.8;

}



.rec_swiper .swiper-slide .bg {

    display: block;

    transform: scale(0.7);

    transition:transform 0.3s;

    width: 100%;

    cursor: pointer;

}



.rec_swiper .swiper-slide .text {

    margin-top: 24px;

    text-align: center;

}



.rec_swiper .text .title {

    max-width: 310px;

    margin: 0 auto;

    color: var(--dark-color);

    font-size: 26px;

    font-weight: 700;

    line-height: 30px;

    overflow: hidden;

    /* white-space: nowrap;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis; */

}



.rec_swiper .text .des {

    margin-top: 16px;

    color: #666;

    font-size: 22px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    overflow: hidden;

    white-space: nowrap;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

}



.rec_swiper .thumb i {

    display: block;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}



.rec_swiper .thumb i img {

    width: 100%;

}



.rec_swiper .index_more {



    opacity: 0;

    display: none;

    justify-content: center;

}



.rec_swiper .swiper-slide-active {

    padding-top: 0;

    opacity: 1;

}



.rec_swiper .swiper-slide-active .bg {

    transform: scale(1);

}



.rec_swiper .swiper-slide-active .text .title {

    font-size: 24px;

    height: 60px;

    max-width: 100%;

}



.rec_swiper .swiper-slide-active .text .des {

    font-size: 18px;

}



.rec_swiper .swiper-slide-active .index_more {

    padding-top: 32px;

    opacity: 1;

    display: flex;

}



@media all and (min-width:1441px) {

    .pc_pro_button .page_button>div{

        position: absolute;

        top: -600%;

        z-index: 9;

    }

    .pc_pro_button .page_button .rec-button-prev {

        left: 0;

    }

    .pc_pro_button .page_button .rec-button-next {

        right:0;

    }

}

@media all and (min-width:1280px) and (max-width: 1440px) {

    .pc_pro_button .page_button>div{

        position: absolute;

        top: -550%;

        z-index: 9;

    }

    .pc_pro_button .page_button .rec-button-prev {

        left: 0;

    }

    .pc_pro_button .page_button .rec-button-next {

        right:0;

    }

}

@media all and (min-width:991px) and (max-width: 1279px) {

    .pc_pro_button .page_button>div{

        position: absolute;

        top: -480%;

        z-index: 9;

    }

    .pc_pro_button .page_button .rec-button-prev {

        left: 0;

    }

    .pc_pro_button .page_button .rec-button-next {

        right:0;

    }

}



.rec_button {

    padding-top: 55px;

    max-width: 280px;

    margin: 0 auto;

}



.rec_button .rec-pagination {

    flex: 1;

    margin-left: 20px;

    margin-right: 20px;

    position: relative;

    height: 3px;

    background-color: transparent;

}



.rec_button .rec-pagination::before {

    content: "";

    position: absolute;

    left: 0;

    top: 1px;

    height: 1px;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.10);

}



.rec_button .rec-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

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

}



.pro_box {

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

}



.heavy_list {

    padding-top: 20px;

}



.heavy_list ul {

    margin-left: -12px;

    margin-right: -12px;

    display: flex;

    flex-wrap: wrap;

}



.heavy_list ul li {

    padding: 12px;

    width: 50%;

}



.heavy_list .pro_bg {

    position: relative;

    display: flex;

    padding-top: 120px;

}



.heavy_list .pro_bg .thumb {

    position: absolute;

    right: 0;

    bottom: 48px;

    width: 56%;

    height: 400px;

    overflow: hidden;

    transition: right .4s;

    z-index: 9;

}



.heavy_list .pro_bg .thumb i {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    display: block;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;



}





.heavy_list .pro_bg .text_box {

    position: relative;

    padding: 24px 18px 24px 40px;

    padding-right: 56%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    width: 100%;

    height: 328px;

    overflow: hidden;

    z-index: 1;

}



.heavy_list .text_box .t {

    color: var(--dark-color);

    font-size: 20px;

    font-weight: 700;

    line-height: 32px;

    min-height: 64px;

}



.heavy_list .text_box .des {

    margin-top: 16px;

    color: #666666;

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

    height: 56px;

}





.heavy_list .text_box .more {

    opacity: 0;

    position: absolute;

    right: 26px;

    bottom: 36px;

    transition: opacity .4s;

}



.heavy_list .text_box .more span {

    padding-right: 32px;

    color: var(--dark-color);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

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

    background-size: 24px 24px;

    background-repeat: no-repeat;

    background-position: right center;

}



.heavy_list .pro_bg:hover .text_box::before {

    opacity: 1;

    width: 100%;

}



.heavy_list .pro_bg:hover .text_box .t {

    color: var(--main-color);

}



.heavy_list .pro_bg:hover .text_box .more {

    opacity: 1;

}





.core_big_title {

    padding-top: 105px;

    color: var(--dark-color);

    font-weight: 700;

}



.core_title {

    padding-top: 50px;

    padding-bottom: 30px;

    font-weight: 700;

    color: var(--dark-color);

    border-bottom: 1px solid rgba(0, 0, 0, .1);

}



.core_title img {

    width: 36px;

    margin-right: 10px;

}



.core_list {

    padding-top: 36px;

}



.core_list ul {

    margin-left: -12px;

    margin-right: -12px;

    display: flex;

    flex-wrap: wrap;

}



.core_list ul li {

    padding: 12px;

    width: 25%;

}



.core_left_menu {

    position: fixed;

    left: 24px;

    top: 50%;

    transform: translateY(-50%);

    margin-top: -140px;

    display: none;

}



.core_left_menu ul li {

    padding: 16px 0;

}



.core_left_menu ul li a {

    position: relative;

    padding-left: 12px;

    color: rgba(194, 194, 194, 0.90);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.core_left_menu ul li a::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 5px;

    height: 5px;

    background-color: rgba(194, 194, 194, 0.90);

    border-radius: 50%;

}



.core_left_menu ul li.active a {

    color: var(--main-color);

}



.core_left_menu ul li.active a::before {

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

}



.core_box .term_box {

    padding-bottom: 15px;

}



.core_box .term_box:last-child {

    padding-bottom: 115px;

}



@media (min-width:768px) {

    .heavy_list .text_box::before {

        content: "";

        position: absolute;

        left: 0;

        top: 0;

        width: 0;

        height: 100%;

        background-color: #E7E8EA;

        opacity: 0;

        transition: all .6s ease;

        z-index: -1;

    }



    .heavy_list .pro_bg:hover .thumb {

        right: -30px;

    }







}



@media (min-width:541px) {

    .heavy_list .pro_bg .text_box {

        background: #F8F9FB;

        border-radius: 4px;

    }

}



@media (max-width:1440px) {



    .core_left_menu {

        left: 6px;

    }

}



@media (max-width:1366px) {

    .heavy_list .pro_bg .text_box {

        height: 300px;

    }

}



@media (max-width:1365px) {

    .core_left_menu {

        display: none !important;

    }



    .year_select_box {

        width: 350px;

    }



}



@media (max-width:1279px) {



    .heavy_list .pro_bg .text_box {

        padding: 24px 18px 24px 30px;

        padding-right: 56%;

        height: 260px;

    }



    .heavy_list .pro_bg .thumb {

        height: 280px;

    }



    .pro_list_swiper .cont {

        padding: 30px 20px;

    }





}



@media (max-width:991px) {

    .pro_position {

        overflow: hidden;

    }



    .pro_box {

        overflow: hidden;

    }



    .year_select_box {

        width: 298px;

    }



    .heavy_list ul li {

        width: 100%;

    }



    .heavy_list .pro_bg .text_box {

        padding-right: 40%;

    }



    .heavy_list .pro_bg .thumb {

        width: 40%;

    }



    .core_list ul li {

        width: 33.33%;

    }



}



@media (max-width:767px) {

    .pro_position {

        padding-top: 50px;

        padding-bottom: 50px;

    }



    .pro_select {

        flex-wrap: wrap;

    }



    .year_select_box {

        width: 100%;

        margin-right: 0;

    }



    .year_select_box>.span {

        padding-left: 20px;

        height: 56px;

    }



    .year_select_box .drop_down_ p {

        padding-top: 6px;

        padding-bottom: 6px;

    }



    .year_select_box .drop_down_ p span {

        font-size: 16px;

        line-height: 26px;

    }



    .form_search {

        margin-top: 20px;

        padding-left: 20px;

        flex: inherit;

        width: 100%;

        height: 56px;

    }



    .form_search .submit_icon {

        width: 42px;

        height: 42px;

    }



    .year_select_box>.span input {

        font-size: 16px;

    }



    .form_search .sear_input::-webkit-input-placeholder {

        font-size: 16px;

    }



    .form_search .sear_input::-moz-placeholder {

        font-size: 16px;

    }



    .form_search .sear_input:-moz-placeholder {

        font-size: 16px;

    }



    .form_search .sear_input:-ms-input-placeholder {

        font-size: 16px;

    }



    .rec_product {

        margin-top: 30px;

    }

    .rec_swiper .swiper-slide {

        padding-top: 0;

    }    

.rec_swiper .swiper-slide .bg {

    transform: scale(1);

}

.rec_swiper .text .title,

    .rec_swiper .swiper-slide-active .text .title {

        font-size: 20px;

    }



    .rec_swiper .text .des {

        font-size: 16px !important;

    }



    .rec_button {

        padding-top: 30px;

    }



    .core_box .core_big_title {

        padding-bottom: 20px;

    }



    .core_big_title {

        padding-top: 50px;

    }



    .core_list ul li {

        width: 50%;

    }



    .core_title {

        padding-top: 25px;

        padding-bottom: 15px;

    }



    .core_box .term_box:last-child {

        padding-bottom: 60px;

    }



    .heavy_list .text_box .des {

        margin-top: 10px;

        font-size: 16px;

    }



    .core_list {

        padding-top: 20px;

    }



    .core_title img {

        width: 26px;

        margin-right: 6px;

    }



    .year_select_box>.span input,

    .form_search .sear_input {

        font-family: 'Microsoft YaHei', 'Open Sans', 'PingFang SC';

        font-size: 16px;

        width: 100%;

    }





}



@media (max-width:540px) {

    .heavy_list .pro_bg {

        padding-top: 30px;

        flex-wrap: wrap;

        background: #F8F9FB;

        border-radius: 4px;

        overflow: hidden;

    }



    .heavy_list .pro_bg .thumb {

        position: relative;

        width: 100%;

        height: auto;

        bottom: inherit;

    }



    .heavy_list .pro_bg .thumb i {

        position: relative;

    }



    .heavy_list .pro_bg .thumb i img {

        width: 100%;

    }



    .heavy_list .pro_bg .text_box {

        position: relative;

        padding: 24px 16px;

        width: 100%;

        height: auto;

    }



    .heavy_list .text_box .t {

        width: 100%;

    }



    .heavy_list .text_box .more {

        margin-top: 20px;

        opacity: 1;

        position: relative;

        right: inherit;

        bottom: inherit;

    }



    .pro_list_swiper .cont {

        padding: 24px 16px;

    }



    .heavy_list .text_box .t {

        font-size: 18px;

        height: 60px;

        line-height: 30px;

    }

}



@media (max-width:540px) {

    .core_list ul li {

        width: 100%;

    }



    .core_list ul li:last-child {

        padding-bottom: 0;

    }



    .pro_list_swiper .thumb i {

        background-size: contain;

    }



    .pro_list_swiper .thumb i img {

        width: 100%;

    }



}



/* new chennal */

.height100 {

    height:106px;

}



.page_box {

    min-height: 70vh;

}



.page_white_bg {

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

    overflow: hidden;

}



.new_position {

    padding-top: 70px;

}



.new_text {

    padding-top: 16px;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.new_aca_box {

    padding: 70px 0;

}



.new_indus_box {

    padding: 80px 0;

    background-color: #F8F9FB;

}



.page_title {

    align-items: center;

}



.new_big_title,

.page_title h2 {

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.new_positon_loop {

    margin-top: 64px;

    position: relative;

}



.white_loop_button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    padding: 15px;

    border-radius: 50px;

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

    transition: all 0.3s;

    cursor: pointer;

    z-index: 9;

}



.white_loop_button::before {

    content: "";

    width: 24px;

    height: 24px;

    background-repeat: no-repeat;

    background-size: cover;

    display: block;

}



.new-p-prev {

    left: 32px;

}



.new-p-next {

    right: 32px;

}



.new-p-prev::before {

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

}



.new-p-next::before {

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

}



.white_loop_button:hover {

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

}



.new-p-prev:hover:before {

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

}



.new-p-next:hover:before {

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

}



.white_loop_button.swiper-button-disabled {

    opacity: 0.5;

    /* pointer-events: none; */

    cursor: default;

}



.new_p_swiper .thumb {

    position: relative;

    border-radius: 8px;

    overflow: hidden;

}



.new_p_swiper .thumb i {

    display: block;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.new_p_swiper .new_text_box .label {

    display: inline-flex;

    align-items: center;

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 290;

}



.new_p_swiper .new_text_box .label span {

    display: block;

    padding-left: 16px;

    margin-left: 16px;

    position: relative;

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

}



.new_p_swiper .new_text_box .label span::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 12px;

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

}



.new_p_swiper .new_text_box {

    position: absolute;

    left: 0;

    width: 100%;

    bottom: 0;

    display: flex;

    padding: 32px;

    flex-direction: column;

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

    z-index: 3;

}



.new_p_swiper .new_text_box .title {

    margin-top: 16px;

    margin-bottom: 24px;

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.5;

}



.new_p_swiper a:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.new_progress {

    position: absolute;

    right: 32px;

    bottom: 32px;

    z-index: 4;

}



.new_progress .list_ {

    display: flex;

}



.new_progress .list_ .i {

    position: relative;

    display: flex;

    align-items: center;

    width: 40px;

    height: 2px;

    margin-right: 8px;

}



.new_progress .list_ .i:last-child {

    margin-right: 0;

}



.new_progress .progress {

    position: absolute;

    top: 0;

    width: 100%;

    height: 2px;

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

    overflow: hidden;

    cursor: pointer;

}



.new_progress .progress .d {

    position: absolute;

    left: 0;

    height: 100%;

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

}



.new_progress .i.active .progress {

    display: block;

}



.new_aca_list {

    padding-top: 56px;

}



.new_aca_list .new_aca_swiper {

    overflow: visible;

}



.new_aca_swiper .swiper-slide {

    cursor: url('../images/cursor.svg'), auto;

}



.new_aca_swiper .thumb {

    position: relative;

    border-radius: 8px;

    overflow: hidden;

}



.new_aca_swiper .thumb i {

    display: block;

    width: 100%;

    overflow: hidden;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.new_aca_swiper .new_text_box {

    position: absolute;

    left: 0;

    width: 100%;

    bottom: 0;

    padding: 32px;

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

    transition: all 0.3s ease;

    z-index: 3;

}



.new_aca_swiper .time {

    color: var(--white-color);

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

}



.new_aca_swiper .title {

    margin-top: 16px;

    color: var(--white-color);

    font-style: normal;

    font-weight: 700;

    height: 64px;

    line-height: 32px;

}



.new_aca_swiper .des {



    color: var(--white-color);

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

    height: 0;

    opacity: 0;

    transition: all 0.4s;

}



.new_aca_swiper .icon {

    position: absolute;

    right: 48px;

    top: 48px;

    width: 56px;

    height: 56px;

}



.new_aca_swiper .icon i {

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.new_aca_swiper .icon i img {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    opacity: 0;

    transition: left .4s;

}



.new_aca_swiper .icon i::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 0;

    height: 0;

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

    border-radius: 50%;

    transition: all 0.3s;

    z-index: -1;

}



.new_aca_swiper a:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.new_aca_swiper a:hover .des {

    margin-top: 16px;

    height: 56px;

    opacity: 1;

}



.new_aca_swiper a:hover .icon {

    opacity: 1;

}



.new_aca_swiper a:hover .icon i::before {

    width: 100%;

    height: 100%;

}



.new_aca_swiper a:hover .icon i img {

    left: 50%;

    opacity: 1;

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

}



.pro_button .aca-pagination {

    flex: 1;

    max-width: 600px;

    margin-right: 38px;

    position: relative;

    height: 3px;

    background-color: transparent;

}



.pro_button .aca-pagination::before {

    content: "";

    position: absolute;

    left: 0;

    top: 1px;

    height: 1px;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.10);

}



.pro_button .aca-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

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

}



.new_indus_top {

    margin-top: 56px;

}



.new_indus_top a {

    display: flex;

    align-items: stretch;

    border-radius: 8px;

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

    overflow: hidden;

}



.new_indus_top .thumb {

    width: 48.65%;

    overflow: hidden;

    border-radius: 8px;

}



.new_indus_top .thumb i {

    display: block;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.new_indus_top .new_in_right {

    position: relative;

    width: calc(100% - 48.65%);

    display: flex;

    padding: 80px;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

    z-index: 1;

}

.new_indus_top .new_in_right:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: all .3s;

    z-index: -1;

}

.new_indus_top .new_in_right>div {

    width: 100%;

}



.new_in_right .title {

    margin-top: 16px;

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 32px;

}



.new_in_right .des {

    margin-top: 32px;

}



.new_in_right .index_more {

    padding-top: 108px;

}



.index_more .a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    display: flex;

    padding: 16px;

    align-items: center;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 400;

    line-height: 24px;

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

    overflow: hidden;

    transition: background-color .3s;

    z-index: 1;

}



a:hover .index_more .a span {

    color: var(--white-color);

}



a:hover .index_more .a {

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

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

}



a:hover .index_more .a i {

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

    transform: rotate(45deg);

}



.new_indus_top a:hover .time {

    /* color: #999; */

    color: var(--main-color);

}



.new_indus_top a:hover .title {

    color: var(--main-color);

}



.new_indus_top a:hover .new_in_right::after {

    opacity: 1;

}

.new_indus_top a:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.new_indus_list {

    margin-top: 40px;

}



.new_indus_list ul {

    margin-left: -45px;

    margin-right: -45px;

    display: flex;

    flex-wrap: wrap;

}



.new_indus_list ul li {

    position: relative;

    padding-left: 45px;

    padding-right: 45px;

    margin-bottom: 20px;

    width: 33.33%;

}



.new_indus_list ul li::before {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    width: 1px;

    height: 100%;

    background-color: rgba(0, 0, 0, .1);

}



.new_indus_list ul li:nth-child(3n)::before {

    display: none;

}



.new_in_right .time,

.new_indus_list .time {

    /* color: var(--main-color); */

    color: #999;



    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

    line-height: normal;

}



.new_indus_list .title {

    margin-top: 40px;

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 32px;

    height: 64px;

}



@media (min-width:768px) {



    .new_in_right .title,

    .new_indus_list .title {

        font-size: 22px;

    }

}



.new_in_right .des,

.new_indus_list .des {

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    height: 56px;

    color: #666;

}



.new_indus_list .des {

    margin-top: 24px;

}



.new_indus_list ul li a:hover .time {

    color: var(--main-color);



}



.new_indus_list ul li a:hover .title {

    color: var(--main-color);

}



@media (max-width:1440px) {

    .new_indus_top .new_in_right {

        padding: 70px;

    }



    .new_in_right .index_more {

        padding-top: 80px;

    }

}



@media (max-width:1366px) {

    .new_indus_top .new_in_right {

        padding: 60px;

    }



    .new_in_right .index_more {

        padding-top: 60px;

    }

}



@media (max-width:1365px) {

    .height100 {

        height: 80px;

    }

}



@media (max-width:1280px) {

    .new_indus_top .new_in_right {

        padding: 50px;

    }



    .new_in_right .index_more {

        padding-top: 60px;

    }

}



@media (max-width:1279px) {

    .new_aca_swiper .icon {

        right: 20px;

        top: 20px;

        width: 56px;

        height: 56px;

    }



}

@media (max-width:1150px) {

    .height100 {

        height: 60px;

    }

}

@media (max-width:991px) {

    .new-p-prev {

        left: 20px;

    }



    .new-p-next {

        right: 20px;

    }



    .new_p_swiper .new_text_box .label {

        font-size: 16px;

    }



    .new_p_swiper .new_text_box .title {

        margin-top: 10px;

        font-size: 24px;

    }



    .new_aca_swiper .icon {

        right: 20px;

        top: 20px;

        width: 46px;

        height: 46px;

    }



    .new_aca_swiper .title {

        font-size: 18px;

        line-height: 28px;

        height: 56px;

    }



    .new_aca_swiper .des {

        font-size: 16px;

        line-height: 25px;

    }



    .new_aca_swiper a:hover .des {

        height: 50px;

    }



    .new_aca_swiper .new_text_box {

        padding: 30px 20px 20px 20px;

    }



    .new_indus_top .new_in_right {

        padding: 50px 40px;

    }



    .new_in_right .title,

    .new_indus_list .title {

        font-size: 18px;

    }



    .new_indus_list .title {

        line-height: 28px;

        height: 56px;

    }



    .new_in_right .des {

        margin-top: 20px;

    }



    .new_in_right .des,

    .new_indus_list .des {

        font-size: 16px;

        line-height: 25px;

        height: 50px;

    }

}



@media (max-width:767px) {

    .height100 {

        height: 75px;

    }



    .new_text {

        padding-top: 10px;

        font-size: 16px;

        line-height: 1.5;

    }



    .new_position {

        padding-top: 50px;

    }



    .new_aca_box {

        padding: 50px 0;

    }



    .new_aca_list {

        padding-top: 40px;

    }



    .new_positon_loop {

        margin-top: 40px;

    }



    .new_positon_loop .white_loop_button {

        display: none !important;

    }



    .new_p_swiper .thumb i {

        min-height: 250px;

    }



    .new_p_swiper .new_text_box .title {

        margin-top: 10px;

        margin-bottom: 15px;

        font-size: 18px;

        line-height: 28px;

        height: 56px;

        white-space: inherit;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

    }



    .new_in_right .title {

        font-size: 18px;

        line-height: 28px;

        height: 56px;

        white-space: inherit;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

    }



    .new_p_swiper .new_text_box {

        padding: 25px 20px;

    }

    .new_p_swiper .new_text_box .label {

        flex-wrap: wrap;

    }

    .new_p_swiper .new_text_box .label span {

        display: block;

        width: 100%;

        padding-left: 0;

        margin-left: 0;

        margin-top: 8px;

    }

    .new_p_swiper .new_text_box .label span::before {

        display: none;

    }

    .new_progress {

        right: inherit;

        left: 20px;

        bottom: 15px;

        width: calc(100% - 40px);

        z-index: 9;

    }



    .white_loop_button {

        padding: 12px;

    }



    .new_indus_top a {

        flex-wrap: wrap;

    }



    .new_indus_top .thumb {

        width: 100%;

    }



    .new_indus_top {

        margin-top: 40px;

    }



    .new_indus_top .new_in_right {

        padding: 30px 20px 40px 20px;

        width: 100%;

    }



    .new_indus_list ul li {

        width: 100%;

        padding-bottom: 20px;

    }



    .new_indus_list ul li::before {

        width: calc(100% - 90px);

        height: 1px;

        top: inherit;

        right: inherit;

        bottom: 0;

    }



    .new_in_right .time,

    .new_indus_list .time,

    .new_aca_swiper .time {

        font-size: 16px;

    }



    .new_aca_swiper .des {

        display: none !important;

    }



    .new_aca_swiper .title {

        margin-top: 10px;

    }



    .new_indus_box {

        padding: 50px 0;

    }



    .new_in_right .index_more {

        padding-top: 40px;

    }



    .new_indus_list .title {

        margin-top: 20px;

        max-height: 56px;

        height: auto;

    }



    .index_more .a {

        padding: 12px 16px;

    }



}



/* new list */

.page_banner .left_sch {

    left: 50%;

    transform: translateX(-50%);

}



.new_list_box {

    padding: 60px 0;

    background-color: #F8F9FB;

    min-height: 60vh;

    overflow: hidden;

}



.new_list_box .pro_select {

    position: relative;

    z-index: 1;

}



.new_list_box .new_big_title {

    padding-bottom: 64px;

}



.new_list {

    padding-top: 50px;

    padding-bottom: 15px;

}



.new_list ul li a {

    position: relative;

    padding: 32px 0;

    display: flex;

    align-items: stretch;

    justify-content: space-between;

    width: 100%;

}



.new_list ul li a::before {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.10);

    width: 100%;

    height: 1px;

}



.new_list ul li a::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

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

    width: 0;

    height: 2px;

    transition: width 0.8s ease-in-out;

}



.new_list .thumb {

    order: 2;

    position: relative;

    width: 272px;

    border-radius: 2px;

    overflow: hidden;

}



.new_list .thumb::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    opacity: 0;

    z-index: 1;

}



.new_list .thumb>i {

    display: block;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    transition: all 0.4s ease-in-out;

}



.new_list .thumb .icon {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 40px;

    height: 40px;

    z-index: 2;

}



.new_list .thumb .icon>i {

    position: relative;

    display: block;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.new_list .thumb .icon>i img {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    opacity: 0;

    transition: left .4s;

}



.new_list .icon>i::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 0;

    height: 0;

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

    border-radius: 50%;

    transition: all 0.3s;

    z-index: -1;

}



.new_list .new_list_r {

    position: relative;

    /* flex: 1; */

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

    width: calc(100% - 272px);

    padding-right: 170px;

    transition: all 0.4s ease;

}



.new_list .new_list_r>div:first-child {

    width: 100%;

}



.new_list .new_list_r .time {

    color: var(--main-color);

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

    line-height: normal;

}



.new_list .new_list_r .title {

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.new_list .new_list_r .text {

    margin-top: 16px;

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

    color: #666;

}



.new_list a:hover .thumb>i {

    transform: scale(1.05);

}



.new_list a:hover .new_list_r .title {

    color: var(--main-color);

}



.new_list ul li a:hover::before {

    opacity: 0;

}



.new_list ul li a:hover::after {

    width: 100%;

}



.new_list a:hover .thumb::before {

    opacity: 1;

}



.new_list a:hover .thumb .icon {

    opacity: 1;

}



.new_list a:hover .thumb .icon>i::before {

    width: 100%;

    height: 100%;

}



.new_list a:hover .thumb .icon>i img {

    left: 50%;

    opacity: 1;

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

}



.new_list a:hover .new_list_r {

    padding-left: 24px;

    padding-right: 146px;

}



@media (max-width:1439px) {

    .new_list .new_list_r {

        padding-right: 120px;

    }



    .new_list a:hover .new_list_r {

        padding-right: 96px;

    }



}



@media (max-width:1365px) {

    .new_list .new_list_r {

        padding-right: 100px;

    }



    .new_list a:hover .new_list_r {

        padding-right: 76px;

    }



}



@media (max-width:1279px) {

    .new_list .new_list_r {

        padding-right: 80px;

    }



    .new_list a:hover .new_list_r {

        padding-right: 56px;

    }



}



@media (max-width:991px) {

    .page_banner .left_sch {

        display: block;

    }



    .new_list .new_list_r {

        padding-right: 50px;

        width: calc(100% - 272px);

    }



    .new_list a:hover .new_list_r {

        padding-right: 26px;

    }



    .new_list .new_list_r .text {

        font-size: 16px;

    }



    .new_list .new_list_r .time {

        font-size: 16px;

    }

}



@media (max-width:767px) {



    .new_list_box .new_big_title {

        padding-bottom: 30px;

    }



    .new_list_box {

        padding: 50px 0 30px 0;

    }



    .new_list {

        padding-top: 20px;

    }



    .new_list a {

        flex-wrap: wrap;

    }



    .new_list .thumb {

        order: inherit;

        width: 100%;

    }



    .new_list .new_list_r {

        padding-right: 0;

        padding-top: 25px;

        width: 100%;

    }



    .new_list a:hover .new_list_r {

        padding-right: 0;

        margin-left: 0;

    }



    .new_list .new_list_r .title {

        font-size: 18px;

    }



    .new_list .new_list_r .time {

        margin-top: 36px;

    }



}



/*page*/

.paged {

    padding: 50px 0 50px 0;

    text-align: center;

    overflow: hidden;

}



.paged .pagination {

    display: flex;

    align-items: center;

    justify-content: center;

}



.paged .pagination li {

    display: inline-block;

}



.paged:after {

    clear: both;

    content: '';

    width: 0px;

    display: block;

    height: 0px;

    visibility: hidden;

}



.paged span,

.paged a {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 4px;

    padding: 4px;

    height: 54px;

    width: 54px;

    font-size: 18px;

    font-family: "Muli Web";

    font-weight: 400;

    border-radius: 40px;

    border: 1px solid #E7E8EA;

}





.paged ul li:first-child span,

.paged ul li:first-child a,

.paged ul li:last-child span {

    width: 54px;

    height: 54px;

    background-color: transparent;

    border: 1px solid rgba(0, 0, 0, 0.20);

}



.paged ul li:first-child span,

.paged ul li:first-child a {

    margin-right: 18px;

}



.paged ul li:last-child span,

.paged ul li:last-child a {

    margin-left: 18px;

}



.paged ul li:first-child a:hover,

.paged ul li:first-child span:hover,

.paged ul li:last-child a:hover,

.paged ul li:last-child span:hover,

.paged a:hover,

.paged .active span {

    color: var(--white-color);

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

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

}



.paged a:hover svg path {

    stroke: var(--white-color);

}



.paged ul li.disabled span {

    cursor: default;

    pointer-events: none;

}



@media (max-width:767px) {

    .paged {

        padding: 30px 0 30px 0;

    }



    .paged span,

    .paged a {

        font-size: 14px;

        padding: 0 5px;

        margin: 0 2px;

        width: 40px;

        height: 40px;

    }



    .paged ul li:first-child span,

    .paged ul li:last-child a,

    .paged ul li:first-child a,

    .paged ul li:last-child span {

        width: 40px;

        height: 40px;

    }



    .paged ul li:first-child a,

    .paged ul li:first-child span,

    .paged ul li:last-child a,

    .paged ul li:last-child span {

        display: none;

    }



    .paged ul li:first-child span,

    .paged ul li:first-child a {

        margin-right: 4px;

    }



    .paged ul li:last-child span,

    .paged ul li:last-child a {

        margin-left: 4px;

    }



}



/* article */

.article_top {

    padding: 88px 0;

    background-color: #F8F9FB;

    overflow: hidden;

}





.article_top_left {

    display: flex;

    padding-right: 116px;

    /* padding-top: 52px; */

    width: 55%;

    flex-direction: column;

    align-items: flex-start;

}



.article_top_right {

    width: 45%;

    display: flex;

    align-items: center;

    border-radius: 4px;



    overflow: hidden;

}

.article_top_right img {

    border-radius: 4px;



}

.article_top_left .articel_labe {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 30px;

    background: var(--main-color);

    color: var(--white-color);

    font-size: 16px;

    font-style: normal;

    font-weight: 290;

    line-height: 26px;

}



.article_top_left h2 {

    margin-top: 24px;

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.8;

}



.article_top_left .article_time {

    padding-top: 16px;

}



.article_top_left .article_time span {

    position: relative;

    padding-right: 24px;

    margin-right: 24px;

    display: flex;

    align-items: center;

    color: var(--main-color);

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

    line-height: normal;

}



.article_top_left .article_time span img {

    width: 20px;

    margin-right: 8px;

}



.article_top_left .article_time span::before {

    content: '';

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 10px;

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

}



.article_top_left .article_time span:last-child {

    padding-right: 0;

    margin-right: 0;

}



.article_top_left .article_time span:last-child:before {

    display: none;

}



.article_top_right i {

    display: block;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    border-radius: 4px;

    overflow: hidden;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.article_top_right i:hover {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.news-details-content-share {

    padding-top: 64px;

}



.news-details-content-share .share_button {

    margin-left: 0;

}



.news-details-content-share .a_small_t {

    margin-right: 16px;

    color: #666;

    font-size: 18px;

    font-weight: 400;

    line-height: normal;

}



.news-details-content-share-item {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    justify-content: center;

    margin-right: 16px;

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

    transition: background-color 0.3s ease-in-out;

    cursor: pointer;

}



.news-details-content-share-item:last-child {

    margin-right: 0;

}



.news-details-content-share-item img {

    width: 20px;

    height: auto;

}



.news-details-content-share-item img:nth-child(2) {

    display: none;

}



.news-details-content-share-item:hover {

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

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

}



.news-details-content-share-item:hover img:first-child {

    display: none;

}



.news-details-content-share-item:hover img:nth-child(2) {

    display: block;

}



.x_sharecopy {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

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

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

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

    background: rgba(78, 78, 78, 0.89);

    border-radius: 6px;

    backdrop-filter: blur(6px);

    font-size: 14px;

    padding: 10px 30px;

    color: var(--white-color);

    width: max-content;

    z-index: 9999;

}



.x_copyIcon {

    background: url(../images/new_link_w.svg) center center / contain no-repeat;

    width: 20px;

    height: 30px;

    float: left;

}



.x_copyDesc {

    font-size: 14px;

    padding-left: 16px;

    font-weight: 400;

    color: #FFFFFF;

    line-height: 30px;

    float: left;

}



.article_box {

    padding-top: 64px;

    padding-bottom: 95px;

}



.article_box_left {

    flex: 1;

    margin-right: 146px;

}



.article_box_right {



    width: 464px;

}



.box_right {

    position: sticky;

    position: -webkit-sticky;

    top: 10px;

    width: 100%;

}



.article_box_left .article_text p {

    padding-bottom: 30px;

    color: var(--dark-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 1.55;

    text-align: justify;

}



.article_box_left .article_text p:last-child {

    padding-bottom: 0;

}



.article_box_left .article_text img {

    display: block;



    max-width: 100%;

    width: auto !important;

    height: auto !important;

    border-radius: 4px;

    margin: 0 auto;

    margin-bottom: 30px;

}



.article_box_left .article_text video {

    display: block;

    max-width: 100%;

    width: auto !important;

    height: auto !important;

    border-radius: 4px;

    margin: 0 auto;

    margin-bottom: 30px;



}



.article_box_left .ar_label {

    padding-top: 4px;

}



.article_box_left .ar_label .label_t {

    color: var(--main-color);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.article_box_left .ar_label .label_list {

    padding-top: 25px;

}



.article_box_left .ar_label .label_list ul {

    margin-left: -4px;

    margin-right: -4px;

    display: flex;

    flex-wrap: wrap;

}



.article_box_left .ar_label .label_list ul li {

    padding-top: 5px;

    padding-left: 4px;

    padding-right: 4px;

    float: left;

}



.article_box_left .label_list a {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 4px;

    border: 1px solid #E7E8EA;

    color: #666;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.article_box_left .label_list a:hover {

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

    color: #fff;

}



.box_right>.title {

    padding-bottom: 15px;

    color: var(--dark-color);

    font-weight: 700;

    line-height: 1.5;

    border-bottom: 1px solid rgba(0, 0, 0, 0.50);

}



.box_right .list {

    padding-top: 5px;

}



.box_right .list li {

    padding-bottom: 27px;

    padding-top: 27px;

    border-bottom: 1px solid rgba(0, 0, 0, .1);

}



.box_right .list li a {

    display: flex;

    align-items: stretch;

}



.box_right .list .thumb {

    width: 150px;

    border-radius: 2px;

    overflow: hidden;

}



.box_right .list .thumb i {

    display: block;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.box_right .list .info {

    padding-left: 18px;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

}



.box_right .list .info .title {

    color: var(--dark-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.box_right .list .info .time {

    color: #999;

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

    line-height: normal;

}



.box_right .list a:hover .info .title {

    color: var(--main-color);

}



.box_right .list a:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.article_box_left .new_page {

    display: flex;

    justify-content: space-between;

    padding-top: 40px;

    margin-top: 75px;

    border-top: 1px solid rgba(0, 0, 0, .1);

}



.article_box_left .newxq_list {

    width: 278px;

}



.article_box_left .new_page a {

    display: flex;

}



.article_box_left .new_page a>div {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 150px;



    align-items: center;

    border-radius: 8px;

    background-color: #F8F9FB;

}



.article_box_left .new_page .newxq_prev {

    padding: 16px 20px 16px 16px;

}



.article_box_left .new_page .newxq_list {

    padding: 16px;

    width: 142px;

}



.article_box_left .new_page .newxxq_next {

    padding: 16px 16px 16px 20px;

}



.article_box_left .new_page span {

    color: #666;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.article_box_left .newxq_list {

    padding: 16px 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 70px;

    background: #F1F8FD;

    font-size: 16px;

    line-height: 26px;

    cursor: pointer;

}



.article_box_left .new_page a:hover>div {

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

}



.article_box_left .new_page a:hover>div svg path {

    stroke: #fff;

}



.article_box_left .new_page a:hover>div span {

    color: #fff;

    transition: .3s;

}



@media (max-width:1440px) {

    .article_box_left {

        margin-right: 100px;

    }



}



@media (max-width:1366px) {

    .article_top_left {

        padding-right: 80px;

    }



    .article_box_right {

        width: 36%;

    }



}





@media (max-width:1279px) {

    .article_top_left {

        padding-right: 60px;

    }



    .article_box_left {

        margin-right: 60px;

    }





}

@media (max-width:1180px) {

    #mainProduct {

        height: 100vh !important;

    }

}

@media (max-width:991px) {

    .article_top_left {

        padding-right: 30px;

        padding-top: 10px;

    }



    .article_top_left h2 {

        line-height: 1.5;

    }





    .article_box_left .new_page a>div {

        width: 136px;

    }



    .box_right .list .info .time {

        font-size: 16px;

    }

}



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

    .box_right .list li a {

        flex-wrap: wrap;

    }



    .box_right .list .thumb {

        width: 100%;

    }



    .box_right .list .info {

        flex: inherit;

        padding-left: 0;

        padding-top: 20px;

    }



    .box_right .list .info .time {

        margin-top: 10px;

        font-size: 16px;

    }



}



@media (max-width:767px) {

    .article_top {

        padding: 50px 0;

    }



    .article_top_right {

        display: none !important;

    }



    .article_top_left {

        width: 100%;

        padding-right: 0;

        padding-top: 0;

    }



    .article_top_left h2 {

        font-size: 22px;

    }



    .article_top_left .article_time span {

        padding-right: 16px;

        margin-right: 16px;

        font-size: 16px;

    }



    .news-details-content-share {

        padding-top: 30px;

    }



    .news-details-content-share>div {

        flex-wrap: wrap;

        margin-left: 0;

    }



    .news-details-content-share .a_small_t {

        margin-right: 0;

        width: 100%;

        margin-bottom: 10px;

        font-size: 16px;

    }



    .news-details-content-share-item {

        margin-right: 10px;

    }



    .article_box_left {

        margin-right: 0;

        flex: inherit;

        width: 100%;

    }



    .article_box_right {

        padding-top: 30px;

        width: 100%;

    }



    .article_box {

        padding-top: 45px;

        padding-bottom: 50px;

    }



    .article_box>.my-container {

        flex-wrap: wrap;

    }



    .article_box_left .article_text p {

        font-size: 16px;

        padding-bottom: 20px;

    }



    .article_box_left .article_text img {



        margin-bottom: 20px;

    }



    .article_box_left .article_text video {



        margin-bottom: 20px;



    }



    .article_box_left .new_page {

        padding-top: 20px;

        margin-top: 35px;

    }



    .article_box_left .new_page a {

        width: calc(50% - 40px);

    }



    .article_box_left .new_page a>div {

        padding: 10px 16px !important;

    }



    .article_box_left .new_page a:nth-child(2) {

        width: auto;

    }



    .article_box_left .new_page a>div,

    .article_box_left .new_page .newxq_list {

        width: 100%;

    }



    .article_box_left .new_page span {

        font-size: 14px;

    }



    .article_box_left .new_page .newxq_list span {

        font-size: 0;

    }



    .box_right .list .thumb {

        width: 140px;

    }



    .box_right .list .info .title {

        font-size: 16px;

    }



    .box_right {

        position: inherit;

    }

}



/* 大白寻宝 */

.white_box {

    padding-top: 70px;

    padding-bottom: 55px;

    min-height: 50vh;

}



.hunt_list {

    padding-top: 40px;

    overflow: hidden;

}



.hunt_list ul {

    margin-left: -24px;

    margin-right: -24px;

    display: flex;

    flex-wrap: wrap;

}



.hunt_list ul li {

    width: 33.33%;

    padding: 24px;

}



.hunt_list ul li:nth-child(1),

.hunt_list ul li:nth-child(2) {

    width: 50%;

    padding-bottom: 16px;

}



.hunt_list ul li a {

    display: block;

    transition: all .3s ease;

}



.hunt_list .thumb {

    position: relative;

    border-radius: 4px;

    overflow: hidden;

}



.hunt_list .thumb::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    z-index: 1;

    display: none;

}



.hunt_list .thumb>i {

    display: block;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.hunt_list .thumb .icon {

    position: absolute;

    right: 40px;

    top: 40px;

    /* left: 50%;

    top: 50%; */

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

    width: 56px;

    height: 56px;

    z-index: 2;

}



.hunt_list .thumb .icon>i {

    position: relative;

    display: block;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.hunt_list .thumb .icon>i img {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    opacity: 0;

    transition: left .4s;

}



.hunt_list .icon>i::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 0;

    height: 0;

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

    border-radius: 50%;

    transition: all 0.3s;

    z-index: -1;

}



.hunt_list .text {

    position: relative;

    padding: 32px 0;

}

.hunt_list .text::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

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

    transition: width .4s;

}

.hunt_list .text:after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background-color: rgba(0, 0, 0, .1);

}

.hunt_list .text .time {

    color: var(--main-color);

    font-family: "Muli Web";

    font-size: 18px;

    font-style: normal;

    font-weight: 300;

    line-height: normal;

}



.hunt_list .text .title {

    margin-top: 16px;

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    height: 60px;

    line-height: 30px;

}



.hunt_list ul li a:hover {

    transform: translateY(-10px);

}



.hunt_list ul li:nth-child(n+3) a:hover .time {

    color: #999;

}



.hunt_list ul li:nth-child(n+3) a:hover .title {

    color: var(--main-color);

}

.hunt_list a:hover .text::before {

    width: 100%;

}



/* .hunt_list ul li a:hover .thumb::before {

    background-color: rgba(0, 0, 0, 0.50);

} */



.hunt_list a:hover .thumb .icon {

    opacity: 1;

}



.hunt_list a:hover .thumb .icon>i::before {

    width: 100%;

    height: 100%;

}



.hunt_list a:hover .thumb .icon>i img {

    left: 50%;

    opacity: 1;

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

}



.hunt_list a:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}







@media (max-width:991px) {

    .hunt_list ul {

        margin-left: -15px;

        margin-right: -15px;

    }



    .hunt_list ul li {

        padding: 15px;

    }



    .hunt_list ul li:nth-child(1),

    .hunt_list ul li:nth-child(2) {

        padding-bottom: 10px;

    }



    .hunt_list .text {

        padding: 20px 0;

    }



    .hunt_list .text .time {

        font-size: 16px;

    }



    .hunt_list .text .title {

        font-size: 18px;

    }



    .hunt_list .thumb .icon {

        width: 40px;

        height: 40px;

    }

}



@media (max-width:767px) {

    .white_box {

        padding-top: 50px;

        padding-bottom: 40px;

    }



    .hunt_list {

        padding-top: 20px;

    }



    .hunt_list ul {

        margin-left: -10px;

        margin-right: -10px;

    }



    .hunt_list ul li {

        width: 100%;

        padding: 10px;

    }



    .hunt_list ul li:nth-child(1),

    .hunt_list ul li:nth-child(2) {

        width: 100%;

    }



    .hunt_list .text .title {

        line-height: 28px;

        height: 56px;

    }

}



/* 故事 */

.story_list {}



.story_list .story_left_title {

    max-width: 450px;

}



.story_list .story_left_title .big_title {

    color: var(--dark-color);

    font-weight: 700;

    line-height: 1.5;

}



.story_list .story_left_title .story_text {

    padding-top: 30px;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.story_list .story_left_title .story_text p {

    padding-bottom: 30px;

}



.story_list .story_left_title .story_text p:last-child {

    padding-bottom: 0;

}



.story_list ul {

    position: relative;

    margin-left: -40px;

    margin-right: -40px;

    overflow: hidden;

}



.story_list ul li {

    float: left;

    padding-left: 40px;

    padding-right: 40px;

    width: 50%;

    padding-bottom: 120px;

}



.story_list ul li:nth-child(odd) {

    margin-top: -300px;

}



.story_list ul li:first-child {

    padding-bottom: 70px;

    margin-top: 0;

}



.story_list ul li a {

    display: block;

    width: 100%;

}



.story_list ul li:last-child {

    padding-bottom: 0;

}



.story_list .thumb {

    position: relative;

    border-radius: 4px;

    overflow: hidden;

}



.story_list .thumb::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    opacity: 0;

    z-index: 1;

}



.story_list .thumb>i {

    display: block;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.story_list .thumb .icon {

    position: absolute;

    right: 40px;

    top: 40px;

    width: 56px;

    height: 56px;

    z-index: 2;

}



.story_list .thumb .icon>i {

    position: relative;

    display: block;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.story_list .thumb .icon>i img {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    opacity: 0;

    transition: left .4s;

}



.story_list .icon>i::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 0;

    height: 0;

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

    border-radius: 50%;

    transition: all 0.3s;

    z-index: -1;

}



.story_list .text {

    display: flex;

    position: relative;

    padding: 40px 24px 40px 0;

    flex-direction: column;

    align-items: flex-start;

    width: calc(100% - 60px);

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

    transition: all 0.3s;

    z-index: 9;

}

.story_list .text:after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background-color: rgba(0, 0, 0, .1);

}



.story_list .text::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

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

    transition: width .4s;

}







.story_list .text .title {

    color: var(--dark-color);

    font-weight: 700;

    line-height: 1.5;

}



.story_list .text .des {

    margin-top: 16px;

    width: 100%;

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.story_list ul li a:hover .thumb::before {

    /* opacity: 1; */

}



.story_list a:hover .thumb .icon {

    opacity: 1;

}



.story_list a:hover .thumb .icon>i::before {

    width: 100%;

    height: 100%;

}



.story_list a:hover .thumb .icon>i img {

    left: 50%;

    opacity: 1;

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

}



.story_list a:hover .thumb>i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.story_list a:hover .text {

    /* transform: translateY(-15px); */

}

.story_list a:hover .text::before {

    width: 100%;

}





@media (max-width:1279px) {

    .story_list ul li:nth-child(2n+1) {

        margin-top: -250px;

    }



    .story_list ul li:first-child {

        margin-top: 0;

    }



}



@media (max-width:991px) {

    .story_list ul {

        margin-left: -20px;

        margin-right: -20px;

    }



    .story_list ul li {

        padding-left: 20px;

        padding-right: 20px;

        padding-bottom: 120px;

    }



    .story_list ul li:nth-child(2n+1) {

        margin-top: -150px;

    }



    .story_list ul li:first-child {

        margin-top: 0;

    }



    .story_list .text {

        padding: 30px 24px 30px 0;

        width: calc(100% - 30px);

    }



    .story_list .text .des {

        margin-top: 10px;

        font-size: 16px;

    }

}



@media (max-width:767px) {

    .story_list .story_left_title .story_text {

        padding-top: 20px;

        font-size: 16px;

    }



    .story_list .story_left_title .story_text p {

        padding-bottom: 20px;

    }



    .story_list ul li {

        width: 100%;

        padding-bottom: 20px;

    }



    .story_list ul li:nth-child(2n+1) {

        margin-top: 0;

    }



    .story_list ul li:first-child {

        padding-bottom: 40px;

    }



    .story_list .text {

        padding: 25px 20px 25px 0;

        width: 100%;

    }

}



/* 社会责任 */

.social_one {

    position: relative;

    margin-top: 70px;

    margin-bottom: 140px;

    display: flex;

    justify-content: space-between;

    overflow: hidden;

}



.social_one_left {

    flex: 1;

    max-width: 587px;

    padding-top: 85px;

    margin-right: 50px;

}



.social_one_left .eng {

    display: none;

    font-weight: 700;

    line-height: 1.5;

    text-transform: uppercase;

    opacity: 0.5;

}



.social_one_right {

    position: relative;

    width: 50%;

    z-index: 1;

}



.social_one_left .title {

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.social_one_left .text {

    margin-top: 48px;



    color: #666;

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

}



.social_one_left .text p {

    padding-bottom: 30px;

}



.social_one_right .eng {

    position: absolute;

    top: 0;

    right: 60%;

    width: 92%;

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

    text-transform: uppercase;

    opacity: 0.05;

    z-index: 1;

}



.social_one_right .thumb {

    border-radius: 4px;

    overflow: hidden;

    z-index: -1;

}



.party_box {

    padding: 80px 0;

    background-color: #F8F9FB;

    overflow: hidden;

}

.party_box_loop .party_box:nth-child(2n){

    /* padding-top: 0; */

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

 }

.welfare_box {

    padding: 80px 0 50px 0;

    overflow: hidden;

}



.party_loop {

    margin-top: 55px;

}



.party_loop .party_swiper,

.party_loop .acti_swiper {

    overflow: visible;

}



.party_loop .swiper-slide {

    cursor: url('../images/cursor.svg'), auto;

}



.party_loop .thumb {

    position: relative;

    border-radius: 4px;

    overflow: hidden;

}



.party_loop .thumb::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

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

    transition: opacity .3s;

    z-index: 1;

}



.party_loop .thumb>i {

    display: block;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.party_loop .thumb .icon {

    position: absolute;

    /* left: 50%;

    top: 50%;

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

    right: 40px;

    top: 40px;

    width: 56px;

    height: 56px;

    z-index: 2;

}



.party_loop .thumb .icon>i {

    position: relative;

    display: block;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.party_loop .thumb .icon>i img {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    left: 0;

    opacity: 0;

    transition: left .4s;

}



.party_loop .icon>i::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 0;

    height: 0;

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

    border-radius: 50%;

    transition: all 0.3s;

    z-index: -1;

}



.party_loop .text {

    position: relative;

    padding-top: 32px;

    padding-bottom: 48px;

}



.party_loop .text:after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background-color: rgba(0, 0, 0, .1);

}



.party_loop .text::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

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

    transition: width .4s;

}



.party_loop .text .title {

    color: var(--dark-color);

    font-weight: 700;

    line-height: 1.5;

}



.party_loop .text .des {

    margin-top: 24px;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    height: 56px;

    color: #666;

}



.party_loop a:hover .thumb::before {

    /* opacity: 1; */

}



.party_loop a:hover .thumb .icon {

    opacity: 1;

}



.party_loop a:hover .thumb .icon>i::before {

    width: 100%;

    height: 100%;

}



.party_loop a:hover .thumb .icon>i img {

    left: 50%;

    opacity: 1;

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

}



.party_loop a:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.party_loop a:hover .text .title {

    color: var(--main-color);

}



.party_loop a:hover .text::before {

    width: 100%;

}



@media (max-width:1366px) {

    .social_one_left {

        padding-top: 80px;

    }



    .social_one_left .text {

        margin-top: 38px;

        font-size: 18px;

        font-weight: 400;

        line-height: 28px;

    }





}



@media (max-width:1280px) {

    .social_one_left {

        padding-top: 70px;

    }



    .social_one_left .text {

        margin-top: 30px;

        font-size: 18px;

        font-weight: 400;

        line-height: 26px;

    }



    .social_one_right .eng {

        line-height: 1.4;

    }



}



@media screen and (min-width: 992px) and (max-width: 1279px) {

    .social_one {

        margin-top: 50px;

        margin-bottom: 100px;

    }



    .social_one_left {

        padding-top: 60px;

    }



    .social_one_left .title {

        font-size: 28px;

    }



    .social_one_right .eng {

        right: 40%;

        width: 110%;

        font-size: 24px;

    }

}



@media (max-width:991px) {



    .social_one {

        flex-wrap: wrap;

        margin-top: 50px;

        margin-bottom: 100px;

    }



    .social_one_left {

        flex: inherit;

        padding-top: 70px;

        width: 100%;

        max-width: inherit;

        margin-right: 0;

    }



    .social_one_right {

        width: 100%;

    }



    .social_one_left .eng {

        display: block;

        position: absolute;

        right: 0;

        top: -10px;

    }



    .social_one_right .eng {

        display: none;

    }



    .social_one_right .thumb img {

        width: 100%;

    }



    .party_loop .text {

        padding-top: 26px;

        padding-bottom: 28px;

    }



    .party_loop .text .des {

        margin-top: 16px;

        font-size: 16px;

        line-height: 26px;

        height: 52px;

    }



}



@media (max-width:767px) {

    .social_one {

        margin-top: 0px;

        margin-bottom: 50px;

    }



    .social_one_left {

        padding-top: 80px;

    }



    .social_one_left .eng {

        opacity: 0.3;

        top: 0;

        font-size: 16px;

    }



    .social_one_left .text p {

        padding-bottom: 20px;

    }



    .party_loop {

        margin-top: 35px;

    }



    .party_loop .text {

        padding-bottom: 18px;

    }



    .party_box,

    .welfare_box {

        padding: 50px 0;

    }



    .welfare_box {

        padding-bottom: 10px;

    }



    .social_one_left .text {

        font-size: 16px;

    }



    .party_loop .thumb .icon {

        width: 50px;

        height: 50px;

    }



}



/* job */

.job_banner {

    height: 100vh;

    min-height: 600px;

}



.job_banner .job_text {

    padding-top: 24px;

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.job_search {

    max-width: 700px;

    margin: 0 auto;



}



.job_search.animated {

    -webkit-animation-fill-mode: inherit;

    animation-fill-mode: inherit;

}



.job_search .f_form {

    position: relative;

    background: inherit;

    z-index: 1;

}



.job_search .f_form::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    backdrop-filter: blur(8px);

    border-radius: 50px;

    z-index: -1;

}



.job_search .f_form {

    margin-top: 20%;

}



.job_search .f_form .f_input {

    color: var(--white-color);

    font-size: 16px;

}



.job_search .f_input::-webkit-input-placeholder {

    color: var(--white-color);

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_search .f_input:-moz-placeholder {

    color: var(--white-color);

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_search .f_input::-moz-placeholder {

    color: var(--white-color);

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_search .f_input:-ms-input-placeholder {

    color: var(--white-color);

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_text {

    padding-top: 16px;

    text-align: center;

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.job_box {

    padding-bottom: 0;

}



.goal-container {

    position: relative;

    padding: 88px 0 0 0;

    overflow: hidden;

    z-index: 1;

}



.goal-bg {

    position: absolute;

    left: 0;

    top: -6px;

    width: 514px;

    height: auto;

    z-index: -1;

}



.goal-title {

    margin-bottom: 16px;

}



.goal-subtitle {

    margin-bottom: 40px;

}



.goal-swiper-container {

    position: relative;

    margin-top: 80px;

    width: 100%;



}



.goal-swiper-content {

    width: 100%;

}



.swiper-goal {

    position: relative;

    height: 686px;

    border-radius: 8px;

    border-bottom-right-radius: 0;

    overflow: hidden;

    margin: 0 auto;

}



.swiper-goal-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.swiper-goal-slide {

    position: relative;

}



.swiper-goal-slide-content-bg {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    align-items: flex-end;

    width: 100%;

    height: 100%;

}



.swiper-goal-slide::before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%;

    opacity: 0.5;

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

}



.swiper-goal-slide-content-text {

    position: relative;

    width: 60%;

    max-width: 680px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    z-index: 9;

}



.swiper-goal-slide-content-text-number {

    color: var(--white-color);

    text-align: center;

    font-family: "Muli Web";

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    margin-bottom: 16px;

}



.swiper-goal-slide-content-text-number span {

    margin-left: 4px;

    margin-right: 4px;

}



.swiper-goal-slide-content-text-title {

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.5;

    margin-bottom: 16px;

}



.swiper-goal-slide-content-text-describe {

    color: var(--white-color);

    text-align: center;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    margin-bottom: 128px;

    text-align: center;

}



.goal-swiper-pagination-content {

    width: 90%;

    position: absolute;

    bottom: 8%;

    left: 5%;

    right: 5%;

    z-index: 10;

}



.goal-swiper-pagination-item {

    width: 23%;

    font-size: var(--font-16-size);

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

    line-height: 26px;

}



.goal-swiper-pagination-item-line {

    width: 100%;

    height: 2px;

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

    margin-bottom: 10px;

}



.goal-swiper-pagination-item-active .goal-swiper-pagination-item-line {

    background: linear-gradient(90deg, #3278FF 0%, #41F0FF 100%);

}



.swiper-goal-pagination {

    width: 90% !important;

    height: 2px !important;

    left: 5% !important;

    top: 84% !important;

}



.index_banner_bottom {

    position: absolute;

    z-index: 3;

    bottom: 0;

    left: 0;

    right: 0;

    padding-left: 72px;

    padding-right: 72px;

    padding-bottom: 36px;

}



.index_banner_progress {

    width: 100%;

    float: left;

}



.index_banner_progress .list_ {

    margin: 0 -16px;

    display: flex;

    justify-content: space-between;

}



.index_banner_progress .i {

    float: left;

    width: 100%;

    padding: 0 16px;

    cursor: pointer;

}



.index_banner_progress .i>span {

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.index_banner_progress .i .progress {

    height: 2px;

    background-color: rgba(255, 255, 255, .2);

    margin-bottom: 16px;

    position: relative;

}



.index_banner_progress .i .progress .d {

    position: absolute;

    left: 0;

    top: 0;

    height: 2px;

    background: var(--white-color);

    width: 0;

}



.decorate-one {

    position: absolute;

    background: #F8F9FB;

}



.goal-swiper-container .decorate-one {

    width: 10.2%;

    padding-bottom: 20%;

    left: -10.2%;

    top: 0;

    z-index: 1;

    transform: translate(100%, 0%);

}



.decorate-two {

    position: absolute;

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

    width: 64px;

    height: 64px;

    right: -37px;

    transform: translate(-71.09%, 0%);

    z-index: 1;

}



.decorate-three {

    position: absolute;

    width: 68px;

    height: 166px;

    bottom: 0;

    right: -68px;

    transform: translate(-100%, 0%);

    opacity: 0.2;

    background: var(--main-color);

    z-index: 1;

}



.goal-swiper-container.animated .decorate-one {

    animation: squareMove1 2s cubic-bezier(0.4, 0.0, 0.2, 1) 1s forwards;

}



.goal-swiper-container.animated .decorate-two {

    animation: squareMove2 2s cubic-bezier(0.4, 0.0, 0.2, 1) 1s forwards;

}



.goal-swiper-container.animated .decorate-three {

    animation: squareMove3 2.6s cubic-bezier(0.4, 0.0, 0.2, 1) 2s forwards;

}



@keyframes squareMove1 {

    0% {

        padding-bottom: 20%;

        transform: translate(100%, 0%);

        -ms-transform: translate(100%, 0%);

    }



    50% {

        padding-bottom: 10%;

        transform: translate(0, 0);

        -ms-transform: translate(0, 0);

    }



    100% {

        padding-bottom: 73px;

        transform: translate(0, 0);

        -ms-transform: translate(0, 0);

    }

}



@keyframes squareMove2 {

    0% {

        transform: translate(-71.09%, 0%);

        -ms-transform: translate(-71.09%, 0%);

    }



    50% {

        transform: translate(0, 0);

        -ms-transform: translate(0, 0);

    }



    100% {

        transform: translate(0, 0);

        -ms-transform: translate(0, 0);

    }

}



@keyframes squareMove3 {

    0% {

        transform: translate(-100%, 0%);

        -ms-transform: translate(-100%, 0%);

    }



    50% {

        transform: translate(0, 0);

        -ms-transform: translate(0, 0);

    }



    100% {

        transform: translate(0, 0);

        -ms-transform: translate(0, 0);

    }

}



.job_mid {

    padding-top: 105px;

    padding-bottom: 76px;

}



.job_mid_list {

    padding-top: 68px;

}



.job_mid_list ul {

    margin-left: -12px;

    margin-right: -12px;

    display: flex;

    align-items: stretch;

}



.job_mid_list ul li {

    padding: 12px;

    overflow: hidden;

}



.job_mid_list ul li:first-child {

    width: 40%;

}



.job_mid_list ul li:nth-child(2) {

    width: 26.6%;

    display: flex;

    flex-flow: column;

    justify-content: space-between;

}



.job_mid_list ul li:nth-child(3) {

    width: 33.4%;

}



.job_mid_list .bg {

    position: relative;

    width: 100%;

    height: 586px;

    overflow: hidden;

}



.job_mid_list .thumb {

    width: 100%;

    height: 100%;

    border-radius: 8px;

    overflow: hidden;

}



.job_mid_list .thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.job_mid_list .thumb {

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 100%;

    transform: scale(1.1);

    transition: 1s;

    transition-delay: 0.3s;

}



.job_mid_list .txt {

    position: absolute;

    left: 0;

    top: 0;

    padding-left: 40px;

    padding-bottom: 40px;

    padding-right: 40px;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: flex-end;

    opacity: 0;

    border-radius: 8px;

    overflow: hidden;

    transition: 0.6s;

    transition-delay: 0.6s;

}



.job_mid_list .txt::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 20%;

    opacity: 0;

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

    transition: 1.2s;

    transition-delay: 1.2s;

    z-index: 1;

}



.job_mid_list .txt span {

    position: relative;

    color: #FFF;

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

    z-index: 2;

}



.job_mid_list .job_mid_up {

    height: calc(50% - 12px);

}



.job_mid_list .job_mid_up .bg {

    height: 100%;

}



.job_mid_list.animated .thumb {

    width: 100%;

    transform: none;

}



.job_mid_list.animated .txt {

    opacity: 1;

}



.job_mid_list.animated .txt::before {

    opacity: 0.5;

}



.job_mid_list .bg:hover img {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.job_bottom {

    padding-top: 96px;

    background: #F8F9FB;

}



.job_search_white .f_form {

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

}



.job_search_white .f_form .f_input {

    font-size: 16px;

    color: var(--dark-color);

}



.job_search_white .f_input::-webkit-input-placeholder {

    color: #666;

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_search_white .f_input:-moz-placeholder {

    color: #666;

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_search_white .f_input::-moz-placeholder {

    color: #666;

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_search_white .f_input:-ms-input-placeholder {

    color: #666;

    opacity: 0.8;

    font-size: 16px;

    line-height: 26px;

}



.job_sta {

    padding: 32px 0 22px 0;

    color: var(--dark-color);

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.job_sta span {

    color: var(--main-color);

}



.job_se_list {

    padding-bottom: 44px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.10);

}



.job_se_list ul {

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    margin-left: -10px;

    margin-right: -10px;

}



.job_se_list ul li {

    width: 50%;

    padding: 10px;

}



.job_se_list .white_bg {

    display: flex;

    padding: 40px;

    justify-content: space-between;

    align-items: center;

    height: 100%;

    border-radius: 8px;

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

    transition: background-color .3s;

}



.job_se_list .white_bg>div:first-child {

    flex: 1;

}



.job_se_list .t {

    color: var(--dark-color);

    font-size: 20px;

    font-weight: 700;

    line-height: 1.5;

}



.job_se_list .bottom {

    padding-top: 32px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    color: #666;

}



.job_se_list .bottom span {

    display: flex;

    align-items: center;

    font-size: 18px;

    font-weight: 400;

}



.job_se_list .bottom span.line {

    margin-left: 24px;

    margin-right: 24px;

    margin-top: 2px;

    width: 2px;

    height: 12px;

    background-color: rgba(0, 0, 0, 0.10);

}



.job_se_list .bottom .j_icon i {

    display: block;

    width: 20px;

    height: 20px;

    margin-right: 8px;

    background-repeat: no-repeat;

    background-size: cover;

}



.job_adress i {

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

}



.job_edu i {

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

}



.job_year i {

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

}



.job_se_list .white_bg:hover {

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

    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.05);

}



/* .job_se_list .white_bg:hover .icon img:first-child {

    display: none;

}



.job_se_list .white_bg:hover .icon img:nth-child(2) {

    display: block;

} */



/* .job_se_list .white_bg:hover .job_adress i {

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

}



.job_se_list .white_bg:hover .job_edu i {

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

}



.job_se_list .white_bg:hover .job_year i {

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

} */



.job_se_list .white_bg:hover .t {

    color: var(--main-color);

}

/* 

.job_se_list .white_bg:hover .j_icon {

    color: var(--white-color);

}



.job_se_list .white_bg:hover .bottom span.line {

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

} */



.job_bottom_end {

    position: relative;

    padding-top: 40px;

    padding-bottom: 88px;

    overflow: hidden;

    z-index: 1;

}



.job_bottom_end .box {

    flex-flow: column;

}



.job_bottom_end .s_t {

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.job_bottom_end .s_t img {

    width: 20px;

    margin-right: 8px;

}



.job_bottom_end .job_email {

    margin-top: 16px;

    margin-bottom: 16px;

    position: relative;

    display: inline-block;

    width: max-content;

    color: var(--dark-color);

    font-family: "Muli Web";

    font-size: 32px;

    font-style: normal;

    font-weight: 600;

    line-height: 1.5;

}



.job_email #copyNotification {

    position: absolute;

    bottom: 100%;

    left: 50%;

    transform: translateX(-50%);

    width: max-content;

    display: none;



}



.job_email #copyNotification span {

    position: relative;

    display: flex;

    padding: 10px 12px;

    justify-content: center;

    align-items: center;

    font-size: 18px;

    color: #666;

    line-height: 26px;

    border-radius: 4px;

    background: #E7E8EA;

    font-weight: 400;

}



.job_email #copyNotification span::before {

    content: "";

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: -6px;

    width: 12px;

    height: 6px;

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

}



.job_bottom_end .job_eng {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    z-index: -1;

}



@media (max-width:1440px) {

    .view-post {

        margin-top: 34px;

    }



    .swiper-goal {

        height: 600px;

    }



    .job_mid_list .bg {

        height: 500px;

    }

}



@media (max-width:1366px) {



    .swiper-goal {

        height: 550px;

    }



    .job_mid_list .bg {

        height: 450px;

    }



    .job_mid_list .txt {

        padding-left: 30px;

        padding-bottom: 30px;

        padding-right: 30px;

    }



    .job_se_list .white_bg {

        padding: 40px 30px;

    }





}



@media (max-width:1280px) {

    .swiper-goal {

        height: 500px;

    }



    .job_mid_list .txt {

        padding-left: 20px;

        padding-bottom: 20px;

        padding-right: 20px;

    }



    .job_se_list .white_bg {

        padding: 30px 25px;

    }



    .job_se_list .bottom span.line {

        margin-left: 16px;

        margin-right: 16px;

    }

}



@media (max-width:1279px) {

    .job_se_list .bottom span {

        font-size: 16px;

    }



    .job_se_list .bottom span.line {

        margin-left: 10px;

        margin-right: 10px;

    }



}



@media (max-width:991px) {

    .job_mid {

        padding-top: 80px;

        padding-bottom: 50px;

    }



    .job_mid_list .bg {

        height: 400px;

    }



    .job_mid_list .txt {

        padding-left: 16px;

        padding-bottom: 20px;

        padding-right: 16px;

        font-size: 20px;

    }



    .index_banner_bottom {

        padding-left: 26px;

        padding-right: 26px;

    }



    .job_se_list ul li {

        width: 100%;

    }



    .job_bottom {

        padding-top: 80px;

    }



    .job_bottom_end .job_email {

        font-size: 28px;

    }



    .job_bottom_end .s_t {

        align-items: flex-start;

    }



    .job_bottom_end .s_t img {

        margin-top: 4px;

    }

}





@media (max-width:767px) {

    .goal-swiper-container {

        margin-top: 50px;

    }



    .job_banner .job_text {

        padding-top: 16px;

        font-size: 16px;

        line-height: 1.5;

    }



    .job_text {

        font-size: 16px;

        line-height: 1.5;

        max-width: 320px;

        margin: 0 auto;

    }



    .swiper-goal {

        height: 400px;

    }



    .swiper-goal-slide-content-text {

        width: 100%;

        padding-left: 20px;

        padding-right: 20px;

        text-align: center;

    }



    .swiper-goal-slide-content-text-describe {

        margin-bottom: 80px;

    }



    .index_banner_progress .i>span {

        display: none;

    }



    .index_banner_bottom {

        padding-bottom: 20px;

    }



    .index_banner_progress .list_ {

        margin: 0 -10px;

    }



    .index_banner_progress .i {

        padding: 0 10px;

    }



    .job_mid {

        padding-top: 50px;

    }



    .job_mid_list {

        padding-top: 30px;

    }



    .job_mid_list ul {

        flex-wrap: wrap;

    }



    .job_mid_list ul li {

        width: 100% !important;

    }



    .job_mid_list .txt {

        font-size: 18px;

    }



    .job_mid_list .bg {

        height: 300px;

    }



    .job_mid_list .job_mid_up {

        height: 300px

    }



    .job_mid_list .job_mid_up:first-child {

        margin-bottom: 24px;

    }



    .job_se_list .bottom {

        flex-flow: column;

        align-items: start;

    }



    .job_se_list .bottom span {

        margin-bottom: 5px;

    }



    .job_se_list .bottom span.line {

        display: none;

    }



    .job_bottom_end {

        padding-top: 30px;

        padding-bottom: 58px;

    }



    .job_bottom_end .s_t {

        font-size: 16px;

    }



    .job_bottom_end .job_email {

        font-size: 26px;

    }



}



/* job detail */

.job_d_banner {

    position: relative;

    height: 620px;

    z-index: 1;

}



.job_d_banner .mask {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: -1;

}



.job_d_banner::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    z-index: 6;

}



.job_d_banner .mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

    animation: scaleToNormal 1.2s ease-in-out forwards;

}



.job_d_banner .job_d_banner_box {

    position: relative;

    padding-top: 248px;

    width: 100%;

    z-index: 8;

}



.job_d_banner .job_d_banner_box>.my-container {

    display: flex;

}



.job_d_banner_box .back_list {

    display: flex;

    padding: 16px;

    align-items: center;

    border-radius: 8px;

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

    transition: all 0.3s ease;

}



.job_d_banner_box .back_list span {

    color: var(--white-color);

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

}



.job_d_banner_box .back_list svg {

    margin-left: 16px;

    width: 20px;

}



.job_d_banner_box .back_list:hover {

    background: #F8F9FB;

    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);

}



.job_d_banner_box .back_list:hover span {

    color: var(--dark-color);

}



.job_d_banner_box .back_list:hover svg path {

    stroke: var(--dark-color);

}



.job_de_bg {

    position: relative;

    margin-top: -223px;

    z-index: 2;

}



.job_de_bg .job_de_white {

    position: relative;

    padding-top: 56px;



    z-index: 1;

}



.job_de_bg .job_de_white::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    width: calc(100% + 112px);

    height: 100%;

    border-radius: 8px;

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

    z-index: -1;

}



.job_xq_top {

    position: relative;

    padding-bottom: 40px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.10);

}



.job_xq_top .zhiwei {

    color: var(--dark-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.share_button {

    margin-left: 24px;

}



.share_button .i {

    display: inline-block;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 24px;

    border-radius: 30px;

    background-color: #F8F9FB;

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

    cursor: pointer;

}



.share_button .i:hover {

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

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

}



/* 分享 */



.share_mask {

    position: fixed;

    width: 100%;

    height: 100%;

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

    left: 0;

    top: 0;

    z-index: 1111;

    display: none;

}



.share_box {

    position: fixed;

    top: 50%;

    width: 298px;

    padding: 0 20px;

    border-radius: 24px;

    background: #FFF;

    left: 50%;

    z-index: 11111;

    display: none;

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

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

    -moz-transform: translateX(-50%) translateY(-50%);

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

    -o-transform: translateX(-50%) translateY(-50%);

}



.share_box .share_list {

    padding-top: 46px;

    padding-bottom: 30px;

}



.share_box .sub {

    text-align: center;

    color: var(--dark-color);

    font-size: 20px;

    font-weight: 600;

    line-height: 30px;

}



.share_box .share_list ul {

    display: flex;

    justify-content: space-around;

}



.share_box .share_list ul li {

    padding-top: 22px;

    width: 33%;

    cursor: pointer;

}



.share_box .share_list ul li p {

    font-size: 16px;

    font-weight: 400;

    color: var(--dark);

    margin-top: 8px;

    line-height: 24px;

    text-align: center;

}



.cancel_share {

    position: absolute;

    right: 16px;

    top: 16px;

    width: 30px;

    height: 30px;

    font-size: 0;

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

    background-repeat: no-repeat;

    background-size: 100%;

    cursor: pointer;

    z-index: 9;

}



.share_bg {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    margin: 0 auto;

    text-align: center;

}



.job_b_list_r_t {

    padding-top: 24px;

}



.job_b_list_r_t_l {

    display: flex;

    align-items: center;

}



.job_b_list_r_t_l span {

    display: flex;

    align-items: center;

    position: relative;

    padding-right: 24px;

    margin-right: 24px;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

}



.job_b_list_r_t {

    padding-top: 24px;

}



.job_b_list_r_t_l span img {

    width: 24px;

    height: 24px;

    margin-right: 8px;

}



.job_b_list_r_t_l span:last-child {

    margin-right: 0;

    padding-right: 0;

}



.job_b_list_r_t_l span:after {

    content: '';

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 12px;

    background-color: rgba(0, 0, 0, 0.10);

}



.job_b_list_r_t_l span:last-child:after {

    display: none;

}



.job_b_list_r_t_r {

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

}



.job_xq_cont {

    padding-bottom: 40px;

}



.job_xq_cont .title {

    padding-top: 40px;

    color: var(--dark-color);

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;

}



.job_xq_cont .text {

    padding-top: 24px;

}



.job_xq_cont .text p {

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.job_yp_more {

    padding-top: 40px;

    border-top: 1px solid rgba(0, 0, 0, 0.10);

    padding-bottom: 56px;

}



.job_yp_more .grey_bg a {

    background: var(--main-color);

    border-color: transparent;

    color: var(--white-color);

}



.job_yp_more .grey_bg i {

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

}



.job_yp_more .grey_bg a:hover {

    background: #2A4F96;

    /* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05); */

}



.job_de_white .job_bottom_end {

    margin-top: 48px;

    border-top: 1px solid rgba(0, 0, 0, 0.10);

}



@media (max-width:1279px) {

    .job_de_bg .job_de_white::before {

        width: calc(100% + 80px);

    }

}



@media (max-width:991px) {

    .job_d_banner {

        height: 480px;

    }



    .job_d_banner .job_d_banner_box {

        padding-top: 168px;

    }



    .job_de_bg .job_de_white {

        padding-top: 40px;

        padding-left: 20px;

        padding-right: 20px;

    }



    .job_de_bg .job_de_white::before {

        width: calc(100% + 20px);

    }



    .job_de_bg {

        margin-top: -10px;

    }



    .job_yp_more {

        padding-top: 40px;

        padding-bottom: 40px;

    }



    .job_b_list_r_t {

        flex-wrap: wrap;

    }



    .job_b_list_r_t_l span {

        padding-right: 16px;

        margin-right: 16px;

        font-size: 16px;

    }



    .job_b_list_r_t_r {

        font-size: 16px;

    }



}



@media (max-width:767px) {

    .job_d_banner {

        height: 240px;

    }



    .job_d_banner .job_d_banner_box {

        padding-top: 150px;

    }



    .job_de_bg .job_de_white {

        padding-top: 30px;

        padding-left: 0;

        padding-right: 0;

    }



    .job_de_bg .job_de_white::before {

        width: calc(100% + 32px);

    }



    .share_button {

        margin-left: 16px;

    }



    .share_button .i {

        width: 40px;

        height: 40px;

        background-size: 16px;

    }



    .job_xq_top {

        padding-bottom: 20px;

    }



    .job_xq_cont .text p {

        font-size: 16px;

    }



    .job_b_list_r_t {

        padding-top: 14px;

    }



    .job_b_list_r_t_l {

        flex-wrap: wrap;

    }



    .job_b_list_r_t_l span {

        padding-right: 10px;

        margin-right: 10px;

        margin-bottom: 5px;

        font-size: 14px;

    }



    .job_b_list_r_t_r {

        font-size: 14px;

        width: 100%;

        padding-top: 16px;

    }



    .job_b_list_r_t_l span img {

        width: 20px;

        height: 20px;

        margin-right: 6px;

    }



    .job_xq_cont .title {

        font-size: 20px;

    }



    .job_de_white .job_bottom_end {

        margin-top: 20px;

    }



    .job_yp_more {

        padding-top: 30px;

        padding-bottom: 20px;

    }



}



/* job form */

.job_form_blue {

    margin-bottom: 16px;

    color: var(--main-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.job_form_cont {

    padding-top: 40px;

}



.job_form_cont .job_form_item {

    display: flex;

    padding-bottom: 40px;

    margin-bottom: 40px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.10);

}



.job_form_cont .job_form_item .item_left {

    width: 30%;

    color: var(--dark-color);

    font-size: 24px;

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.job_form_cont .job_form_item .item_right {

    width: 70%;

}



.item_right {

    margin-left: -12px;

    margin-right: -12px;

    display: flex;

    flex-wrap: wrap;

}



.item_right .col {

    width: 50%;

    padding: 16px 12px;

    float: left;

}



.item_right .colw100 {

    width: 100%;

    padding: 40px 12px 0 12px;

}



.item_right .col_z>span {

    display: block;

    color: var(--dark-color);

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

}



.item_right .col_z>span>em {

    margin-left: 8px;

    color: #D80C18;

    font-size: 18px;

    font-weight: 400;

    font-style: normal;

}



.item_right .input-container {

    margin-top: 16px;

    position: relative;

    border-radius: 4px;

    background: #F8F9FB;

}



.item_right .input-container input {

    outline: none;

    z-index: 1;

    padding: 12px 20px;

    position: relative;

    background: none;

    width: 100%;

    height: 64px;

    border: 0;

    color: #333;

    line-height: 26px;

    font-size: 16px;

    font-weight: 400;

    font-family: 'Microsoft YaHei', ' Open Sans', 'PingFang SC';

    text-align: left;

}



.item_right .input-container .date_bir {

    background-size: 24px;

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

    background-repeat: no-repeat;

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

}



.item_right .input-container input[type="date"] {

    -webkit-appearance: none;

    text-align: left;

}



.input_select_box01 input,

.input_select_box02 input {

    cursor: pointer;

}



.input_select_box .icon {

    width: 24px;

    height: 24px;

    right: 20px;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

    background-repeat: no-repeat;

    cursor: pointer;

}



.input_select_box .drop_down_ {

    position: absolute;

    right: 0;

    top: 60px;

    padding: 24px;

    padding-left: 32px;

    width: 100%;

    border-radius: 4px;

    background: #F2F4F6;

    z-index: 9;

}



.mess_form .input_select_box .drop_down_ {

    max-height: 250px;

    overflow-y: auto;

}



.mess_form .input_select_box .drop_down_::-webkit-scrollbar {

    width: 4px;

    height: 2px

}



.mess_form .input_select_box .drop_down_::-webkit-scrollbar-button:vertical {

    display: none

}



.mess_form .input_select_box .drop_down_::-webkit-scrollbar-corner,

::-webkit-scrollbar-track {

    background-color: transparent;

}



.mess_form .input_select_box .drop_down_::-webkit-scrollbar-thumb {

    border-radius: 8px;

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

}



.input_select_box .drop_down_ p {

    padding-bottom: 8px;

    font-size: 16px;

    color: #666;

    cursor: pointer;

}



.input_select_box .drop_down_.line p {

    padding-bottom: 20px;

    padding-top: 20px;

    border-bottom: 1px solid #EBEFF5;

}



.input_select_box .drop_down_.line p:first-child {

    padding-top: 0;

}



.input_select_box .drop_down_ p:last-child {

    padding-bottom: 0;

    border-bottom: none;

}



.input_select_box .drop_down_ p:hover {

    color: var(--main-color);

}



.item_right .input-container textarea {

    outline: none;

    z-index: 1;

    position: relative;

    background: none;

    width: 100%;

    height: 230px;

    padding: 20px;

    line-height: 26px;

    border: 0;

    color: var(--dark);

    font-size: 16px;



    font-weight: 400;

    resize: none;

    font-family: 'Microsoft YaHei', ' Open Sans', 'PingFang SC';

}



.text-area label {

    position: absolute;

    bottom: -20px;

    left: 0;

    color: #D80C18;

}



.job_form_item .input-container input::-webkit-input-placeholder,

.job_form_item textarea::-webkit-input-placeholder {

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

    font-size: 16px;

    font-family: 'Muli Web';

}



.job_form_item .input-container input::-moz-placeholder,

.job_form_item textarea::-moz-placeholder {

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

    font-size: 16px;

    font-family: 'Muli Web';

}



.job_form_item .input-container input::-ms-input-placeholder,

.job_form_item textarea::-ms-input-placeholder {

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

    font-size: 16px;

    font-family: 'Muli Web';

}



.item_right .yanz {

    padding-top: 16px;

}



.item_right .yanz .input-container {

    margin-top: 0;

    width: 348px;

    max-width: 60%;

}



.item_right .message_code {

    margin-left: 16px;

}



.item_right .message_code img {

    width: 128px;

    height: 64px;

    border-radius: 8px;

}



.item_right .index_more {

    padding: 16px 8px;

    margin-right: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 160px;

    height: 58px;

    font-family: 'Muli Web';

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    border-radius: 32px;

    cursor: pointer;

}



.last_button .index_more span {

    margin-right: 0;

}



.item_right .border_grey {

    border-radius: 4px;

    border: 1px solid rgba(51, 51, 51, 0.20);

    background: var(--white-color);

    color: #666;

}



.item_right .border_black {

    border-radius: 4px;

    background: var(--main-color);

    color: var(--white-color);

}



.item_right .pt0 {

    padding-top: 0;

}





/* file upload */



.print-inquiry .upload-file {

    margin-top: 50px;

    width: 100%;

    max-width: 167px;

    height: 50px;

    display: inline-flex;

    padding: 16px 20px 16px 24px;

    justify-content: center;

    align-items: center;

    border-radius: 50px;

    background: linear-gradient(102deg, rgba(52, 186, 228, 0.00) 47.92%, rgba(52, 186, 228, 0.40) 92.5%), #0249D9;

    border: 1px solid transparent;

    transition: background .3s;

    color: #FFF;

    text-align: center;

    font-size: 16px;

    font-weight: 400;

    cursor: pointer;

}



.print-inquiry .upload-img {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.print-inquiry .upload-img img {

    cursor: pointer;

    max-width: 100%;

    height: auto;

}



.print-inquiry #img-upload {

    display: none;

}



.print-inquiry .upload-success {

    margin-right: 16px;

    width: calc(74% - 16px);

    height: 58px;

    border-radius: 8px;

    background: #F8F9FB;

    padding: 16px;

    padding-right: 60px;

    display: none;

    position: relative;

    color: #999;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.print-inquiry .upload-success span {

    font-size: 16px;

    color: var(--dark-color);

    margin-left: 2px;

    display: block;

    overflow: hidden;

    white-space: nowrap;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

}



.print-inquiry .upload-success .img-ok {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    margin: 0;

}



.print-inquiry .upload-success .img-del {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    margin: 0;

}



.print-inquiry .upload-img .form_upload_f {

    position: relative;

    display: flex;

    height: 58px;



    justify-content: center;

    align-items: center;

    width: 26%;

    border-radius: 4px;

    background: var(--main-color);

    color: var(--white-color);

    text-align: center;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

    cursor: pointer;

}



.print-inquiry .upload-img .form_upload_f .webuploader-pick {

    padding: 16px 48px;

    width: 100%;

}



.form_describe {

    padding-top: 24px;

    color: #999;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



@media (max-width:991px) {

    .print-inquiry .upload-img .form_upload_f {



        width: auto;

    }



}



@media (max-width:767px) {

    .job_d_banner_box .back_list span {

        font-size: 14px;

    }



    .job_form_blue {

        margin-bottom: 10px;

        font-size: 16px;

        line-height: 1.5;

    }



    .job_form_cont .job_form_item .item_left {

        font-size: 20px;

    }



    .item_right .col_z>span {

        font-size: 16px;

    }



    .job_form_cont .job_form_item {

        flex-wrap: wrap;

    }



    .job_form_cont .job_form_item .item_left {

        width: 100%;

    }



    .job_form_cont .job_form_item .item_right {

        width: 100%;

        padding-top: 20px;

    }



    .job_form_cont .job_form_item .item_right>.col:first-child {

        padding-bottom: 32px;



    }



    .job_form_cont .job_form_item.job_form_last .item_right {

        padding-top: 0;

    }



    .item_right {

        margin: 0;

    }



    .item_right .col,

    .item_right .colw100 {

        width: 100%;

        padding-right: 0;

        padding-left: 0;

    }



    .item_right .yanz {

        flex-wrap: wrap;

    }



    .item_right .yanz .input-container {

        width: 100%;

    }



    .item_right .yanz .input-container {

        max-width: inherit;

    }



    .item_right .message_code {

        margin-left: 0;

        margin-top: 30px;

    }



    .item_right .message_code img {

        height: 54px;

    }



    .job_form_top .right a {

        padding: 10px 20px;

    }



    .job_form_top .right span {

        padding-left: 30px;

        font-size: 16px;

        background-size: 20px 20px;

    }



    .job_form_cont .job_form_item {

        padding-bottom: 30px;

        margin-bottom: 30px;

    }



    .print-inquiry .upload-img {

        flex-wrap: wrap;

    }



    .print-inquiry .upload-success {

        margin-right: 0;

        flex: inherit;

        width: 100%;

    }



    .print-inquiry .upload-img .form_upload_f {

        margin-top: 20px;

        width: 160px;

        height: 50px;

    }



    .print-inquiry .upload-img .form_upload_f .webuploader-pick {

        padding: 16px 16px;

    }



    .item_right .input-container input {

        height: 56px;

    }



    .last_button {

        justify-content: space-between;

    }



    .last_button .index_more {

        margin-right: 0;

        width: calc(50% - 10px);

        height: 56px;

    }

    .mess_form .input_select_box .drop_down_ {

        max-height: 365px;

    }



}



/* contact */

.contact_top {

    padding-top: 64px;

    padding-bottom: 64px;

}



.contact_mid {

    position: relative;

    background-color: #F8F9FB;

    z-index: 7;

}



.contact_mid .contact_map {

    position: absolute;

    right: 0;

    top: 0;

    width: 50%;

    height: 100%;

    z-index: 8;

}



.contact_mid .contact_cont {

    padding-bottom: 50px;

    padding-top: 26px;

    padding-right: 80px;

    width: 50%;

}



.contact_code {

    display: flex;

}



.contact_code>div {

    margin-right: 48px;

    display: flex;

    flex-flow: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}



.contact_code>div:last-child {

    margin-right: 0;

}



.contact_code .img {

    padding: 5px;

    width: 120px;

    height: 120px;

    border-radius: 4px;

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

}



.contact_code .t {

    padding-top: 16px;

    color: var(--dark-color);

    text-align: center;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.contact_table>ul>li .title {

    padding: 24px 0;

    padding-right: 30px;

    border-bottom: 1px solid rgba(0, 0, 0, .1);

    position: relative;

    color: var(--dark-color);

    font-weight: 700;

    line-height: 1.5;



    cursor: pointer;

}



.contact_box p {

    display: flex;

    align-items: flex-start;

    padding-bottom: 16px;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.contact_box p img {

    width: 24px;

    margin-top: 4px;

    margin-right: 16px;

}



.contact_box p:last-child {

    padding-bottom: 0;

}



.contact_code {

    padding-top: 48px;

}



.contact_map .pub-t1 {

    display: none;

    width: 100%;

    height: 100%;

}



.contact_map .pub-t1.d-show {

    display: block;

}



.contact_mess {

    padding: 175px 25px;

    margin: 70px 0;

    position: relative;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

    border-radius: 8px;

    overflow: hidden;

}



.contact_mess::before {

    content: '';

    position: absolute;

    background-color: rgba(0, 0, 0, 0.4);

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.contact_mess>div {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    align-self: stretch;

    max-width: 680px;

    margin: 0 auto;

    z-index: 9;

}



.contact_mess .title {

    color: var(--white-color);

    font-weight: 700;

    line-height: 1.5;

}



.contact_mess .des {

    padding-top: 24px;

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

    text-align: center;

}



.contact_mess .button {

    padding-top: 72px;

}



.contact_mess .button .index_more {

    margin-left: 16px;

    margin-right: 16px;

}



.contact_mess .button .index_more a {

    padding: 16px 20px 16px 24px;

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

    border: none; */

    background-color: transparent;

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

    color: var(--white-color);

}

.contact_mess .button .index_more i {

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

}

.contact_mess .button .index_more a:hover {

    background: var(--white-color);

    color: var(--main-color);

}

.contact_mess .button .index_more a:hover i {

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

}





@media (min-width:768px) {

    .contact_table>ul>li .title {

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

        background-position: right;

        background-repeat: no-repeat;

        background-size: 24px;

    }



    .contact_box {

        opacity: 0;

        max-height: 0;



        overflow: hidden;

        transition: opacity .2s, max-height 0.5s ease;

    }



    .contact_table>ul>li.active .title {

        color: var(--main-color);

        border-color: transparent;

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

    }



    .contact_table ul li.active .contact_box {

        max-height: inherit;

        opacity: 1;

        padding-bottom: 24px;

        border-bottom: 1px solid rgba(0, 0, 0, .1);

    }



}



@media (max-width:1279px) {

    .contact_mid .contact_cont {

        padding-right: 40px;

    }

}



@media (max-width:991px) {

    .contact_box p {

        padding-bottom: 10px;

        font-size: 16px;

    }



    .contact_box p img {

        margin-right: 10px;

    }



    .contact_code>div {

        margin-right: 20px;

    }



    .contact_code .t {

        padding-top: 10px;

        font-size: 16px;

        line-height: 1.5;

    }



    .contact_mess {

        padding: 155px 25px;

    }



}



@media (max-width:767px) {

    .contact_top {

        padding: 30px 0;

    }



    .contact_mid .contact_cont {

        padding-right: 0;

        width: 100%;

    }



    .contact_box p img {

        width: 20px;

        margin-top: 4px;

    }



    .contact_table>ul>li {

        padding-bottom: 15px;

        border-bottom: 1px solid rgba(0, 0, 0, .1);

    }



    .contact_table>ul>li .title {

        border-bottom: none;

        padding-bottom: 16px;

    }



    .contact_map {

        display: none !important;

    }



    .contact_code {

        padding-top: 30px;

    }



    .contact_code .img {

        width: 100px;

        height: 100px;

    }



    .contact_mess {

        padding: 60px 25px;

        margin: 50px 0;

    }



    .contact_mess .des {

        font-size: 16px;

    }



    .contact_mess .button {

        padding-top: 40px;

        margin-left: 0;

        margin-right:0;

        flex-wrap: wrap;

        justify-content: center;

    }



    .contact_mess .button .index_more {

        margin-left: 8px;

        margin-right: 8px;

        width: calc(100% - 16px);

        max-width: 220px;

        margin-bottom: 5px;

    }



    .contact_mess .button .index_more a {

        padding: 12px 10px 12px 14px;

        width: 100%;

    }



}



/* mess */

.mess_box {

    padding-bottom: 0;

}



.mess_box .job_d_banner::before {



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

}



.mess_box .page_text {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    z-index: 9;

}



.mess_box .page_text h2 {

    color: var(--white-color);

    text-align: center;

    font-weight: 700;

    line-height: 1.5;

}



.mess_box .job_de_bg {

    margin-top: -134px;

}



.mess_box .mess_de_white {

    min-height: 50vh;

    padding-top: 0;

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

}



.mess_menu {}



.mess_menu ul {

    display: flex;

    align-items: stretch;

}



.mess_menu ul li {

    width: 50%;



}



.mess_menu ul li a {

    display: flex;

    padding: 30px 30px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #F8F9FB;

    text-align: center;

}



.mess_menu ul li .t {

    color: var(--dark-color);

    font-weight: 700;

    line-height: 1.5;

}



.mess_menu ul li p {

    padding-top: 10px;

    color: #666;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.mess_menu ul li.active a {

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

}



.mess_menu ul li.active a .t {

    color: var(--main-color);

}



.mess_contact {

    padding-top: 40px;

    padding-bottom: 100px;

    border-top: 1px solid rgba(0, 0, 0, 0.10);

    text-align: center;

}



.mess_contact .text {

    padding: 16px 0;

    color: var(--dark-color);

    font-family: "Muli Web";

    font-style: normal;

    font-weight: 600;

    line-height: 1.5;

}



.mess_contact .s_t {

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.mess_form {

    padding: 56px 30px 80px 30px;

}



.messform {

    margin-left: -16px;

    margin-right: -16px;

    overflow: hidden;

}



.messform .col {

    width: 50%;

    padding: 16px;

    float: left;

}



.messform .input-container {

    position: relative;

    border-radius: 4px;

    background: #F8F9FB;

}



.messform .input-container input {

    outline: none;

    z-index: 1;

    padding: 15px 16px;

    padding-left: 30px;

    position: relative;

    background: none;

    width: 100%;

    height: 64px;

    border: 0;

    color: #666;

    font-family: 'Muli Web';

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.messform .input-container span {

    position: absolute;

    top: 50%;

    left: 16px;

    transform: translateY(-50%);

    width: 17px;

    font-size: 18px;

    font-weight: 400;

}



.messform .input-container span em {

    margin-right: 8px;

    color: #D80C18;

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

}



.messform .text-area span {

    top: 18px;

    transform: inherit;

}



.messform .input_select_box .icon {

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

}



.input-container input:focus::placeholder,

.input-container textarea:focus::placeholder {

    opacity: 0;

    transition: all .2s linear;

}



.input-container .input_select_box :focus::placeholder {

    opacity: 1;

}



.messform .colw100 {

    width: 100%;

    padding: 16px;

    float: left;

}



.messform .input-container textarea {

    outline: none;

    z-index: 1;

    position: relative;

    background: none;

    width: 100%;

    height: 230px;

    padding: 15px 16px;

    line-height: 26px;

    border: 0;

    color: #666;

    font-size: 18px;

    font-weight: 400;

    resize: none;

    font-family: 'Muli Web';

}



.messform .reset,

.messform .submit {

    display: flex;

    width: 200px;

    height: 64px;

    padding: 10px 30px;

    justify-content: center;

    align-items: center;

    background: transparent;

    color: #FFF;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    font-family: 'Muli Web';

    border-radius: 4px;

    cursor: pointer;

}



.messform .reset {

    color: #666;

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

}



.messform .submit {

    margin-left: 12px;

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



}



.messform .last_button {

    padding-top: 40px;

    justify-content: center;

}



@media (max-width:991px) {

    .mess_form {

        padding: 56px 30px 50px 30px;

    }

}



@media (max-width:767px) {
    .mess_menu ul li a {
        padding: 30px 8px;
        height: 100%;
    }
    .mess_menu ul li .t {
        font-size: 18px;
    }
    .mess_box .job_d_banner {

        height: 260px;

    }



    .mess_box .page_text h2 {

        padding-top: 30px;

        font-size: 20px;

    }



    .mess_box .job_de_bg {

        margin-top: -10px;

    }



    .mess_menu ul {

        flex-wrap: wrap;
        align-items: stretch;

    }

    .messform .colw100.yanz {
        padding-bottom: 0;
    }

    .mess_menu ul li p {

        padding-top: 5px;

        font-size: 14px;

        line-height: 1.5;

    }



    .mess_form {

        padding: 30px 20px 30px 20px;

    }



    .messform .col {

        width: 100%;

    }



    .messform .reset,

    .messform .submit {

        width: calc(50% - 10px);

        max-width: 200px;

        height: 56px;

    }



    .mess_box .job_de_bg>.my-container {

        padding-left: 0;

        padding-right: 0;

    }



    .messform .input-container input {

        height: 56px;

        font-size: 16px;

    }



    .messform .input-container textarea {

        height: 200px;

        font-size: 16px;

    }



    .messform .last_button {

        padding-top: 20px;

    }



    .mess_contact {

        padding-top: 40px;

        padding-bottom: 60px;

    }



    .mess_contact .s_t {

        font-size: 16px;

        line-height: 26px;

    }



    .messform .input-container input {

        font-family: 'Microsoft YaHei', 'Open Sans', 'PingFang SC';

    }



}



/* esg */

.esg_box {

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

    min-height: 50vh;

    overflow: hidden;

}



.esg_top {

    margin-top: 80px;

    margin-bottom: 40px;

    position: relative;

    border-radius: 8px;

    overflow: hidden;

    z-index: 1;

}



.esg_top .esg_text {

    padding: 96px 20px;

    display: flex;

    flex-flow: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

}



.esg_top .esg_img {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

    z-index: -1;

}



.esg_text .title {

    color: var(--white-color);

    text-align: center;

    font-weight: 700;

    line-height: 1.5;

}



.esg_text .text {

    padding-top: 40px;

    max-width: 657px;

    margin: 0 auto;

    color: var(--white-color);

    text-align: center;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: 26px;

}



.esg_text_button {

    padding-top: 215px;

    display: flex;

}



.esg_text_button .esg_down {

    position: relative;

    display: inline-flex;

    padding: 18px 20px;

    justify-content: center;

    align-items: center;

    border-radius: 8px;

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

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

}



.esg_text_button .esg_down i {

    margin-left: 16px;

    width: 28px;

    height: 28px;

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

    background-repeat: no-repeat;

    background-size: 100%;

}



.esg_text_button .esg_down:hover {

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

    color: var(--main-color);

}



.esg_text_button .esg_down:hover i {

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

}



.esg_top:hover .esg_img {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.tooltip {

    position: absolute;

    bottom: calc(100% + 6px);

    left: 50%;

    transform: translateX(-50%);

    white-space: nowrap;

    opacity: 0;

    transition: opacity 0.3s;

    pointer-events: none;

    border-radius: 8px;

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

    backdrop-filter: blur(8px);

    font-size: 16px;

    color: white;

    padding: 6px 12px;

    border-radius: 4px;

    transition: opacity 0.3s;

    z-index: 10;

}



.tooltip::after {

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%);

    border-width: 4px 7px 0;

    border-style: solid;

    border-color: rgba(0, 0, 0, 0.50) transparent;

    backdrop-filter: blur(8px);

    z-index: 10;

}



.esg_button a:hover .tooltip,

.esg_button a:focus .tooltip {

    opacity: 1;

}



.esg_middle {

    margin-bottom: 56px;

}



.esg_middle .esg_swiper {

    overflow: visible;

}



.esg_swiper .border {

    display: flex;

    width: 100%;

    height: 100%;

    padding: 40px 40px 40px 0px;

    align-items: center;

    border-radius: 16px;

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

    background: var(--white-color);

}



.esg_swiper .border .thumb {

    position: relative;

    padding-left: 40px;

}



.esg_swiper .border .thumb::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 40px;

    height: 100%;

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

    background-repeat: no-repeat;

    background-position: left bottom;

}



.esg_swiper .img {

    width: 180px;

    border-radius: 0px 4px 4px 0px;

    overflow: hidden;

}



.esg_swiper .border .thumb i {

    display: block;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.esg_swiper .esg_right {

    flex: 1;

    margin-left: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

}



.esg_swiper .esg_black_button {

    padding-top: 56px;

}



.esg_black_button {

    display: flex;

    align-items: center;

}



.esg_black_button a {

    display: flex;

    align-items: center;

    margin-right: 32px;

    color: var(--dark-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

}



.esg_black_button a:last-child {

    margin-right: 0;

}



.esg_black_button a i {

    margin-right: 8px;

    width: 28px;

    height: 28px;

    display: block;

    background-repeat: no-repeat;

    background-size: 100%;

}



.esg_swiper .label {

    color: rgba(51, 51, 51, 0.2);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.esg_swiper .title {

    margin-top: 16px;

    color: var(--dark-color);

    font-weight: 700;

    height: 60px;

    line-height: 30px;

}



.esg_black_button a.esg_view i {

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

}



.esg_black_button a.esg_down i {

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

}



.esg_swiper .border:hover {

    background: #F8F9FB;

}



.esg_swiper .border:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.esg_swiper .border:hover .title {

    color: var(--main-color);

}



.esg_swiper .esg_black_button a:hover {

    color: var(--main-color);

}



.esg_swiper .esg_black_button a.esg_view:hover i {

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

}



.esg_swiper .esg_black_button a.esg_down:hover i {

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

}



.esg_click_more {

    display: flex;

    justify-content: center;

    padding-bottom: 80px;

}



.esg_click_more a {

    display: flex;

    padding: 16px 20px 16px 24px;

    align-items: center;

    border-radius: 8px;

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

}



.esg_click_more a span {

    color: #666;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

}



.esg_click_more a i {

    margin-left: 16px;

    width: 20px;

    height: 20px;

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

}



.esg_click_more a span:nth-child(2) {

    display: none;

}



.esg_click_more a.active,

.esg_click_more a:hover {

    background: var(--white-color);

    border-color: transparent;

    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);

}



.esg_click_more a:hover i {

    transform: rotate(180deg);

}



.esg_click_more a.active span {

    color: var(--main-color);

}



.esg_click_more a.active span:first-child {

    display: none;

}



.esg_click_more a.active span:nth-child(2) {

    display: block;

}



.esg_click_more a.active i {

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

    transform: rotate(0deg);

}



.esg_bottom {

    display: none;

    padding-top: 0;

    padding-bottom: 100px;

}



.esg_bottom .loop {

    border-top: 1px solid rgba(0, 0, 0, .1);

    padding-top: 56px;

}



.esg_bottom .loop .title {

    min-width: 210px;

    color: #000;

    font-family: "Muli Web";

    font-style: normal;

    font-weight: 600;

    line-height: 1.5;

}



.esg_bottom .loop .list {

    flex: 1;

    padding-bottom: 30px;

}



.esg_bottom .loop .list ul {

    display: flex;

    flex-wrap: wrap;

    margin-left: -48px;

    margin-right: -48px;

}



.esg_bottom .loop .list ul li {

    padding: 0 48px 48px;

    width: 33.33%;

}



.esg_bottom .loop .list .thumb {

    border-radius: 8px;

    border: 1px solid rgba(0, 0, 0, 0.05);

    overflow: hidden;

}



.esg_bottom .loop .list .thumb i {

    display: block;

    width: 100%;

    height: 100%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

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

    transition: -webkit-transform .6s;

    -o-transition: transform .6s;

    transition: transform .6s;

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

    -webkit-transition: transform .6s;

}



.esg_bottom .loop .list .title {

    margin-top: 24px;

}



.esg_bottom .loop .list .esg_black_button {

    padding-top: 24px;



}



.esg_bottom .loop .list li .bg:hover .thumb i {

    -webkit-transform: scale(1.03);

    -ms-transform: scale(1.03);

    transform: scale(1.03);

}



.esg_bottom .loop .list li .bg:hover .title {

    color: var(--main-color);

}



.esg_bottom .esg_black_button a:hover {

    color: var(--main-color);

}



.esg_bottom .esg_black_button a.esg_view:hover i {

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

}



.esg_bottom .esg_black_button a.esg_down:hover i {

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

}



@media (max-width:1579px) {

    .esg_bottom .loop .list ul {

        margin-left: -38px;

        margin-right: -38px;

    }



    .esg_bottom .loop .list ul li {

        padding: 0 38px 38px;

    }

}



@media (max-width:1439px) {

    .esg_bottom .loop .list ul {

        margin-left: -25px;

        margin-right: -25px;

    }



    .esg_bottom .loop .list ul li {

        padding: 0 25px 25px;

    }



    .esg_swiper .esg_right {

        margin-left: 30px;

    }



}



@media (max-width:1365px) {



    .esg_black_button a {

        margin-right: 20px;

    }

}



@media (max-width:1280px) {

    .esg_bottom .loop .title {

        min-width: 180px;

    }



    .esg_black_button a {

        margin-right: 15px;

        font-size: 16px;

    }



}



@media (max-width:1279px) {

    .esg_text_button {

        padding-top: 180px;

    }



    .esg_black_button a i {

        margin-right: 4px;

        width: 24px;

        height: 24px;

    }



    .esg_click_more {

        padding-bottom: 50px;

    }



    .esg_bottom .loop .list ul {

        margin-left: -15px;

        margin-right: -15px;

    }



    .esg_bottom .loop .list ul li {

        padding: 0 15px 25px 15px;

    }



    .esg_swiper .esg_right {

        margin-left: 20px;

    }



    .esg_swiper .img {

        width: 160px;

    }



    .esg_swiper .border {

        padding: 30px 30px 30px 0px;

    }



    .esg_black_button a {

        margin-right: 10px;

    }



}



@media (max-width:991px) {

    .esg_text_button {

        padding-top: 140px;

    }



    .esg_click_more {

        display: flex;

        justify-content: center;

    }



    .esg_bottom .loop .list ul li {

        width: 50%;

    }



}



@media (max-width:767px) {

    .esg_top {

        margin-top: 50px;

        margin-bottom: 40px;

    }



    .esg_top .esg_text {

        padding: 60px 20px;

    }



    .esg_text_button {

        padding-top: 60px;

    }



    .esg_swiper .border {

        flex-wrap: wrap;

    }



    .esg_swiper .esg_black_button {

        padding-top: 15px;

    }



    .esg_swiper .swiper-slide {

        width: 250px;

    }



    .esg_swiper .border {

        padding: 20px 20px 30px 0px;

    }



    .esg_swiper .img {

        width: 180px;

    }



    .esg_swiper .esg_right {

        margin-left: 0;

        padding: 20px;

        padding-right: 0;

        padding-bottom: 0;

    }



    .esg_swiper .label {

        font-size: 16px;

        line-height: 1.2;

    }



    .esg_bottom .loop {

        padding-top: 35px;

        flex-wrap: wrap;

    }



    .esg_bottom .loop .list {

        flex: inherit;

        padding-top: 25px;

    }



    .esg_bottom .loop .list ul {

        margin-left: -10px;

        margin-right: -10px;

    }



    .esg_bottom .loop .list ul li {

        padding: 0 10px 10px 10px;

    }



    .esg_bottom .loop .title {

        min-width: inherit;

    }



    .esg_text_button .esg_down {

        font-size: 16px;

    }



    .esg_text_button .esg_down i {

        margin-left: 10px;

        width: 24px;

        height: 24px;

    }



    .esg_black_button a i {

        width: 20px;

        height: 20px;

    }



    .esg_bottom .loop .list .esg_black_button {

        padding-top: 16px;

    }



    .esg_bottom {

        padding-bottom: 50px;

    }



}



@media (max-width:540px) {

    .esg_bottom .loop .list ul li {

        width: 100%;

        padding: 10px;

    }



}



/* development */

.deve_banner {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    z-index: 1;

}



.deve_banner::before {

    content: '';

    opacity: 0.4;

    background: #000;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

}



.deve_banner .mask {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.deve_banner .mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.deve_banner_box {

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 9;

}



.deve_banner_box>.my-container {

    display: flex;

    flex-flow: column;

    align-items: center;

    justify-content: center;

    height: 100%;

}



.deve_banner_box .deve_cicle {

    position: relative;

    width: 100%;

    max-width: 746px;

    height: 100%;

    max-height: 746px;

    border-radius: 50%;

    margin: 0 auto;

}



.deve_cicle .deve_border {

    display: flex;

    flex-flow: column;

    justify-content: center;

    padding: 100px;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    text-align: center;

    border: 2px dashed rgba(255, 255, 255, 0.5);

    position: relative;

    z-index: 8;

}



.deve_t_time {

    display: flex;

    justify-content: center;

    align-items: center;

    line-height: 1;

}



.deve_t_time span {

    color: var(--white-color);

    font-family: "Muli Web";

    font-weight: 600;

}



.deve_t_time em {

    margin-left: 16px;

    margin-right: 26px;

    width: 26px;

    height: 1px;

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

}



.deve_t_title {

    padding-top: 24px;

    color: var(--white-color);

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.deve_t_text {

    margin-top: 24px;

    position: relative;

}



.deve_t_text p {

    color: var(--white-color);

    font-size: 18px;

    font-style: normal;

    font-weight: 400;

    line-height: 28px;

}



.deve_t_text p:nth-child(1) {

    animation: hide 0.8s forwards 4.5s;

}



.deve_t_text p:nth-child(2) {

    position: absolute;

    overflow: hidden;

    opacity: 0;

    top: 0;

    width: 100%;

    transform: translateY(40%);

    animation: show 1.8s forwards 4.5s;

}



@keyframes hide {

    from {

        opacity: 1;

    }



    to {

        opacity: 0;

        transform: translateY(-30px);

    }

}



@keyframes show {

    from {

        opacity: 0;

        transform: translateY(40%);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes show2 {

    from {

        opacity: 0;

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

    }



    to {

        opacity: 1;

        transform: translate(-50%, 0);

    }

}



.deve_t_btn {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: 80%;

    opacity: 0;

    animation: show2 1.8s forwards 5s;

}



.deve_t_btn>div {

    display: flex;

    justify-content: center;

}



.deve_t_btn .left_sch {

    position: relative;

    left: inherit;

    bottom: inherit;

    width: 22px;

}



.deve_t_btn .t {

    margin-top: 16px;

    color: var(--white-color);

    text-align: center;

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

}



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

    .deve_banner_box .time-move {

        z-index: 4;

        position: absolute;

        width: calc(100% + 8px);

        height: calc(100% + 8px);

        left: -1px;

        top: -1px;

        border-radius: 50%;

    }

}



@media (max-height:900px) {

    .deve_banner_box .deve_cicle {

        width: 700px;

        height: 700px;

    }



}



@media (max-height:849px) {

    .deve_banner_box .deve_cicle {

        width: 650px;

        height: 650px;

    }



}



@media (max-height:800px) {

    .deve_banner_box .deve_cicle {

        width: 600px;

        height: 600px;

    }



}



@media (max-height:750px) {

    .deve_banner_box .deve_cicle {

        width: 500px;

        height: 500px;

    }



    .deve_cicle .deve_border {

        padding: 60px;

    }





}



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

    .deve_t_title {

        padding-top: 16px;

    }



    .deve_cicle .deve_border {

        padding: 60px;

    }



}



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

    .deve_banner_box .deve_cicle {

        width: 560px;

        height: 560px;

    }





}



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

    .deve_banner_box .deve_cicle {

        width: auto;

        height: auto;

    }



    .time-move {

        display: none;

    }



    .deve_cicle .deve_border {

        padding: 0;

        border: none;

    }



    .deve_t_title {

        font-size: 30px;

    }



    .deve_t_text p {

        font-size: 16px;

    }



    .deve_t_btn {

        display: none;

    }



    .deve_t_text p:nth-child(1) {

        animation: hide 0.8s forwards 1.6s;

    }



    .deve_t_text p:nth-child(2) {

        animation: show 1.8s forwards 2s;

    }



}



.deve_box {

    position: relative;

    margin-top: 150px;

    margin-bottom:50px;

    overflow: hidden;

}



.deve_box .line {

    position: absolute;

    left: 50%;

    top: 32px;

    bottom: 0;

    transform: translateX(-50%);

    width: 35px;

    z-index: 1;

}



.deve_box .line span {

    width: 35px;

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

    position: absolute;

    top: 5px;

    left: 0;

}



.timeline .info .thumb {

    display: block;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

    border-radius: 4px;

    overflow: hidden;

}

.timeline .info .thumb img {

    width: 100%;

}



@keyframes bgIco1 {

    0% {

        opacity: 0.38;

        transform: scale(1)

    }



    100% {

        opacity: 0.1;

        transform: scale(2)

    }

}



@keyframes bgIco2 {

    0% {

        opacity: 0.8;

        transform: scale(1)

    }



    100% {

        opacity: 0.28;

        transform: scale(1.38)

    }

}



.deve_list {

    /* display: grid; */

    /* grid-template-columns: repeat(2, 1fr);

    grid-auto-rows: 2vw; */

}



.time_loop {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: space-between;

    padding-bottom: 160px;

}

.deve_list .time_loop:last-child {

    padding-bottom: 80px;

}

.deve_list .timeline {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    width: calc(50% - 200px);

}



.deve_list .timeline.right {

    /* position: absolute;

    right: 0;

    top: 0;

    height: 100%; */

}



.deve_product {

    justify-content: space-between;

}



.deve_list .deve_product .timeline.right {

    position: relative;

}



.deve_list .year {

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    display: flex;

    justify-content: center;

    align-items: center;

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

    z-index: 1;

}



.deve_list .year .s_t {

    color: var(--main-color);

    text-align: center;

    font-family: "Muli Web";

    font-weight: 700;

    line-height: 1.2;

}



.time_loop .year em {

    width: 50px;

    height: 1px;

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

}



.time_loop .year em:first-child {

    margin-right: 24px;

}



.time_loop .year em:nth-child(3) {

    margin-left: 24px;

    opacity: 0;

}

.deve_list .graphic {

    display: none !important;

}



/* 既有公司又有产品 */

.time_loop.deve_product .year em:nth-child(3) {

    opacity: 1;

}



/* 只有右侧产品 */

.time_loop.only_product .year em:nth-child(1) {

    opacity: 0;

}



.time_loop.only_product .year em:nth-child(3) {

    opacity: 1;

}



.deve_list .only_product {

    /* margin-top: -160px; */

    justify-content: flex-end;

}



.deve_list .only_product .timeline.right {

    position: relative;

}



.deve_title {

    padding-top: 24px;

}



.timeline .info>.deve_title:first-child {

    padding-top: 0;

}



.deve_title .big_t {

    padding-bottom: 16px;

    color: var(--main-color);

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

}



.deve_title p {

    color: #666;

    font-size: 18px;

    font-weight: 400;

    line-height: 28px;

    padding-bottom: 40px;

}



.deve_title p:last-child {

    padding-bottom: 0;

}



.mt40 {

    margin-top: 40px;

}

.dev_time_text {

    color: var(--dark-color);

    font-weight: 600;

}

.dev_time_text .index_more a {

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

}

.dev_time_text .index_more a:hover,

.dev_time_text .index_more a.blue-active {

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

    color: var(--white-color);

}



/* year */

/* .deve_list .y_2010 {

    padding-bottom: 60px;

}



.deve_list .y_2012 {

    padding-bottom: 130px;

}



.deve_list .y_2012 .right {

    padding-top: 15%;

}



.deve_list .y_2013 {

    justify-content: space-between;

    padding-bottom: 90px;

}



.deve_list .y_2013 .right {

    position: relative;

    height: auto;

    margin-top: -100px;

}



.deve_list .y_2014 {

    position: absolute;

    right: 0;

    width: 50%;

    margin-top: 200px;

    padding-bottom: 0;

}



.deve_list .y_2014 .year {

    left: 0;

}



.deve_list .y_2014 .right {

    margin-top: 0;

    width: calc(100% - 200px);

}



.deve_list .y_2014 .right .graphic {

    margin-top: 190px;

}



.deve_list .y_2018 {

    margin-top: -320px;

    padding-bottom: 0;

}



.deve_list .y_2019 {

    margin-top: -50px;

}



.deve_list .y_2020 {

    margin-top: -20px;

} */



@media (max-width:1365px) {

    .time_loop .year em {

        width: 40px;

    }



    .deve_list .timeline {

        width: calc(50% - 160px);

    }



    /* .deve_list .y_2014 .right {

        width: calc(100% - 160px);

    } */





}



@media (max-width:1279px) {

    .deve_list .timeline {

        width: calc(50% - 140px);

    }



    /* .deve_list .y_2014 .right {

        width: calc(100% - 140px);

    } */



    .time_loop .year em:first-child {

        margin-right: 16px;

    }



    .time_loop .year em:nth-child(3) {

        margin-left: 16px;

    }



    .time_loop {

        padding-bottom: 120px;

    }



    .deve_title p {

        font-size: 18px;

        line-height: 28px;

        padding-bottom: 25px;

    }



    /* .deve_list .y_2018 {

        margin-top: -250px;

    } */



}



@media (max-width:991px) {

    .deve_box {

        margin-top: 100px;

        margin-bottom: 150px;

    }



    .time_loop {

        padding-bottom: 80px;

    }



    /* .deve_list .y_2013 {

        padding-bottom: 60px;

    }



    .deve_list .y_2014 .right .graphic {

        margin-top: 120px;

    }



    .deve_list .y_2018 {

        margin-top: -200px;

    } */



    .time_loop .year em {

        width: 30px;

    }



    .deve_list .timeline {

        width: calc(50% - 120px);

    }



    /* .deve_list .y_2014 .right {

        width: calc(100% - 120px);

    } */



    .deve_title .big_t {

        font-size: 18px;

    }



    .deve_title p {

        font-size: 16px;

        line-height: 26px;

        padding-bottom: 20px;

    }





}



@media (max-width:767px) {



    .deve_box .line {

        left: 0px;

        top: 0;

        transform: translateX(0);

        /* width: 25px; */

    }



    .deve_box {

        margin-top: 50px;

        margin-bottom: 50px;

    }



    .time_loop {

        flex-wrap: wrap;

        padding-left: 30px;

        padding-top: 40px;

        padding-bottom: 30px;

    }



    .deve_list .timeline {

        width: 100%;

    }



    .deve_list .year {

        left: 0;

        transform: inherit;

    }



    .time_loop .year em:nth-child(3) {

        display: none !important;

    }



    .time_loop.only_product .year em:nth-child(1) {

        opacity: 1;

    }



    .time_graphic {

        display: none !important;

    }



    .mt40 {

        margin-top: 24px;

    }



    /* .deve_list .y_2010 {

        padding-bottom: 30px;

    }



    .deve_list .y_2012 {

        padding-bottom: 30px;

    }



    .deve_list .y_2013 {

        padding-bottom: 30px;

    } */



    /* .deve_list .y_2014 {

        position: relative;

        width: 100%;

        margin-top: 30px;

        padding-left: 0;

        right: inherit;

    }



    .deve_list .y_2014 .right {

        width: 100%;

    }



    .deve_list .y_2018,

    .deve_list .y_2019 {

        margin-top: 0;

        padding-bottom: 30px;

    }



    .deve_list .y_2020 {

        margin-top: 0;

    } */



    .deve_title p {

        padding-bottom: 15px;

    }



    .graphic {

        display: none !important;

    }



    .timeline .info>.thumb:first-child,

    .timeline>.thumb:first-child {

        margin-top: 24px;

    }



    .timeline .info>.deve_title:first-child {

        padding-top: 24px;

    }



}





.pro_play {

    margin-top: 55px;

    display: flex;

    justify-content: center;

}

.pro_play i {

    display: block;

    width: 74px;

    height: 74px;

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

    background-repeat: no-repeat;

    background-size: 100%;

    cursor: pointer;

}



@media (max-width:540px) {

    .pro_play {

        margin-top: 25px;

    }

    .pro_play i {

        width: 48px;

        height: 48px;

    }

}





/* new add */



.custom {

    position: relative;

}

@media (min-width:992px) {



.custom .index_more {

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

}

}

.white_border a {

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

}

.white_border i {

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

}

.white_border span {

    color: var(--white-color);

}

.white_border a:hover {

    background: var(--main-color);

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

}

@media (max-width:991px) {

    .custom .index_more {

        position: relative;

        margin-top: 20px;

    }



}