/* banner */

.banner {

    width: 100%;

    padding: 100px 0 0 0;

}



.banner .wrap {

    position: relative;

    width: 100%;

    height: 600px;

    background-size: cover !important;

    padding: 0 240px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.banner .title {

    text-align: center;

}



.banner .title p {

    font-size: 36px;

    font-family: Source Han Sans CN;

    font-weight: 500;

    color: #FFFFFF;

    line-height: 33px;

}



.banner .wrap .line-wrap {

    width: 1371px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    position: absolute;

}



.banner .wrap .line1 {

    width: 613px;

    display: inline-block;

    height: 2px;

    transition: ease all 1s;

    background: linear-gradient(90deg, transparent, #ffffff);

}



.banner .wrap .line2 {

    width: 613px;

    display: inline-block;

    height: 2px;

    transition: ease all 1s;

    background: linear-gradient(90deg, #ffffff, transparent);

}



.banner .title span {

    font-size: 18px;

    font-family: Source Han Sans CN;

    font-weight: 400;

    color: #FFFFFF;

    line-height: 33px;

    opacity: 0.6;

    margin-top: 13PX;

}





/* section */

.section .wrap {

    width: 100%;

    padding: 0 120px;

    background: #F5F5F5;

}



/*products_cut*/

.products_cut {

    display: flex;

    justify-content: center;

    padding: 146px 0 0 0;

}



.products_cut .left .title {

    font-size: 36px;

    font-family: Source Han Sans CN;

    font-weight: bold;

    color: #333333;

    line-height: 48px;

    margin-bottom: 21px;

}



.products_cut .left {

    width: 330px;

    border-radius: 20px;

    margin-bottom: 290px;





}



.products_cut .left .line {

    width: 309px;

    height: 1px;

    background: #000000;

    opacity: 0.13;

    margin-bottom: 38px;

}



.products_cut .left .item {

    margin: 0 0 30px 0;

}



.products_cut .left .item .active-p .iconfont {

    color: #0867AF !important;



}



.products_cut .left .item .active-p p {

    color: #0867AF !important;



    transform: scale(1.1);

}



.products_cut .left .item .active-p .drop div {

    color: #0867AF !important;



}



.products_cut .left .item .active-p .drop div:first-child {

    opacity: 0;

}



.products_cut .left .item .headline {

    display: flex;

    align-items: center;

    cursor: pointer;

}



.products_cut .left .item .headline .iconfont {

    font-size: 24px;

    color: #333333;

    margin-right: 5px;

    transition: 0.8s;



}



.products_cut .left .item .headline p {

    font-size: 20px;

    font-family: Source Han Sans CN;

    font-weight: 400;

    color: #333333;

    line-height: 48px;

    transition: 0.8s;

    width: 100px;

    white-space: nowrap;





}



.products_cut .left .item .headline .drop {

    position: relative;

    margin-left: 200px;



}



.products_cut .left .item .headline .drop div {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 2px;

    height: 16px;

    background: #5A6370;

    transition: 0.6s;



}



.products_cut .left .item .headline .drop div:last-child {

    transform: translate(-50%, -50%) rotate(90deg);

}



.products_cut .left .item .hidden {

    display: none;

    overflow: hidden;

}



.products_cut .left .item .hidden div {

    margin: 15px 0 0 10px;

}



.products_cut .left .item .hidden div p {

    font-size: 16px;

    font-family: Source Han Sans CN;

    font-weight: 400;

    color: #666666;

    line-height: 48px;

    position: relative;

    margin-bottom: 10px;

    cursor: pointer;

}



.products_cut .left .item .hidden div p::after {

    content: "";

    width: 309px;

    height: 1px;

    background: #000000;

    opacity: 0.13;

    position: absolute;

    left: 0;

    bottom: -4px;

}



.products_cut .right {

    margin: 20px 0 0 111px;

    position: relative;

    width: 1260px;

}

.products_cut .right .box{

    display: flex;

    flex-wrap: wrap;



}

.products_cut .right .box .item{

    width: 376px;

background: #FFFFFF;

cursor: pointer;

display: flex;

justify-content: center;

flex-direction: column;

margin-bottom: 72px;

}

.products_cut .right .box .item:not(:nth-child(3n)){

    margin-right: 52px;

}

.products_cut .right .box .item img{

    width: 229px;

    margin: 74px auto 65px;

    filter: brightness(.7); opacity: 1; transform: scale(1); transition: 0.8s;



}

.products_cut .right .box .item .line{

    width: 322px;

height: 1px;

background: #000000;

opacity: 0.15;

margin: 0 auto 27px;

}

.products_cut .right .box .item p{

    font-size: 16px;

font-family: Source Han Sans CN;

font-weight: 400;

color: #333333;

line-height: 48px;

text-align: center;

padding-bottom: 27px;

transition: 0.8s;



}

.products_cut .right .box .item:hover p {

color: #0867AF;

}

.products_cut .right .box .item:hover img{

    filter: brightness(1); 

    opacity: 1.03;

    transform: scale(1.03);

}

/* 底部点 */

.products_cut .right .bottom{

    display: flex;

    width: 100%;

    justify-content: center;

    margin-bottom: 79px;



}

.products_cut .right .bottom .point{

    width: 8px;

    height: 8px;

    background: #0867AF;

    cursor: pointer;

}



.products_cut .right .bottom .one{  

    opacity: 0.2;

    margin-right: 7px;

}

.products_cut .right .bottom .two{  

    opacity: 0.5;

    margin-right: 7px;



}



.detail-swiper  {

    overflow: hidden;



}



.detail-swiper .swiper-slide  .box{

    opacity: 0;

    transition: 0.8s;

    transform: translateY(25px);

}

.detail-swiper .swiper-slide-active .box{

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.5s;

}







.products_cut .left .item .headline .icon{

    display: flex;

    align-items: center;

}

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

    .big-swiper>.swiper-wrapper{
        height: auto !important;
    }

}



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

	

}



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

	.products_cut .right .box .item{

        width: 19.583333vw;

    }

    .products_cut .right .box .item:not(:nth-child(3n)) {

        margin-right: 2.718532vw;

    }

    .products_cut .right{

        width: 65.625vw;

    }

    .products_cut .right .box .item img{

        width: 11.92708vw;

    }

    .products_cut .left .item .headline .drop{

        margin-left: 160px;

    }

    .products_cut .right .box .item{

        margin-bottom: 30px;

    }

    .products_cut .right {

        margin-left: 60px;

    }

    .products_cut .right .box .item .line{

        width: 16.77083vw;

    }

}



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

	

}



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

	.products_cut .left .title {

        font-size: 30px;

    }

    .products_cut .right .box .item .line{

        margin-bottom: 10px;

    }

    .products_cut .right .box .item p{

        padding-bottom: 10px;

        font-size: 14px;

    }

}



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

	

}



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

	.products_cut .right .box .item p{

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        width: 90%;

        margin: 0 auto;

    }

}



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

	

}



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

	

}













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

    .products_cut .left .item .headline p {

        font-size: 16px;

    }

    .products_cut .right .box .item {

        width: 48%;

        margin-right: 1% !important;

    }

    .products_cut .left .item .headline .drop {

        margin-left: 80px;

    }

    .products_cut .left {

        width: 270px;

    }

    .section .wrap{

        padding: 0 30px;

    }

    .products_cut .left .line{

        width: 100%;

    }

    .products_cut{

        width: 100%;

        justify-content: space-between;

        padding-top: 60px;

    }

    .products_cut .right {

        margin-left: 40px;

    }

    .products_cut .left .item{

        margin-bottom: 10px;

    }

    .products_cut .right .box .item {

        margin-bottom: 5px;

    }

    .products_cut .left .item .headline .icon{

        display: flex;

        align-items: center;

    }

    .products_cut .left .title {

        font-size: 24px;

    }

    .products_cut .right {

        width: 62.625vw;

    }

    .products_cut .left .item .headline .drop {

        margin-left: 100px;

    }

    .products_cut .right .box .item p{

        font-size: 12px;

    }

    .products_cut .right .box .item p{

        line-height: 1;

        width: 90%;

        margin: 20px auto;

        

    }

}





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

    .products_cut .right {

        width: 60.625vw;

    }

}





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

    .products_cut .right .box .item p{

        margin: 10px auto;

    }

    .section .wrap {

        padding: 0 20px;

    }

    .products_cut{

        flex-direction: column;

    }

    .products_cut .left{

        width: 100%;

        margin-bottom: 0;

    }

    .products_cut .right{

        width: 100%;

        margin-left: 0;

    }

    .detail-swiper .swiper-slide-active .box{

        justify-content: space-between;

    }

    .products_cut .right .box .item{

        margin-bottom: 10px;

    }

    .products_cut .left .item .headline .left{

        display: flex;

        align-items: center;

    }

    .products_cut .left .title {

        font-size: 20px;

        margin-bottom: 0;

    }

    .products_cut .left .item .headline .drop{

        width: 16px;

    }

    .products_cut .left .item .hidden div p::after{

        width: 100%;

    }

    .products_cut .right .box .item img{

        width: 70%;

    }

    .products_cut .right .box .item .line{

        width: 90%;

    }

    .products_cut .right .box .item img{

        margin: 30px auto 30px;

    }

    

    .banner .wrap{

        padding: 0 0;

    }

    .banner .title p {

        font-size: 30px;

    }

    .products_cut .left .item .headline{

        justify-content: space-between;

    }

}





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

	

}



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

	

}



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

	

}