body {
    --all-pd: calc((220 / 19.2) * 1%)
}

.box1 {
    margin-top: calc((160 / 19.2) * 1%)
}

.box1 .box1_main {
    --pd: 76px;
    --l-w: 549px;
    --l-w: calc((549/14.8) * 1%);
    align-items: center
}

.box1 .box1_main .img {
    padding-bottom: calc((732 / 15) * 1%)
}

.box1 .box1_main .rrr .t2 {
    margin-top: 64px
}

.box1 .box1_main .rrr .t2 * {
    line-height: 30px
}

.box1 .box1_main .rrr .line {
    width: 67px;
    height: 2px;
    background: #333333;
    margin-top: 50px
}

.box2 {
    margin-top: calc((160 / 19.2) * 1%)
}

.box2 .big_tit {
    font-family: Cambria;
    font-size: 115px;
    color: #f7f7f4;
    opacity: .95
}

.box2 .box2_main {
    margin-top: -60px;
    position: relative;
    z-index: 2;
    --pd: 34px;
    --l-w: 605px;
    --l-w: calc((605/14.8) * 1%);
    align-items: center;
}

.box2 .box2_main .lll .desc {
    margin-top: 33px
}

.box2 .box2_main .lll .img_par {
    margin-top: 117px;
    display: flex;
    align-items: flex-start
}

.box2 .box2_main .lll .img_par .rotate_txt {
    writing-mode: sideways-lr;
    font-size: 19px
}

.box2 .box2_main .lll .img_par .img {
    margin-left: 20px;
    flex: 1;
    flex-shrink: 0;
    padding-bottom: calc((383 / 6.05) * 1%)
}

.box2 .box2_main .rrr{padding-left: 3%;}

.box2 .box2_main .rrr .box2_swiper_par {
    position: relative
}

.box2 .box2_main .rrr .box2_swiper {
    overflow: hidden
}

.box2 .box2_main .rrr .item {
    display: flex;
    align-items: start
}

.box2 .box2_main .rrr .img {
    margin-right: 20px;
    width: 757px;
    width: calc((757 / 8.41) * 1%);
    flex: 1;
    /* padding-bottom: calc((642 / 8.41) * 1%) */
    padding-bottom: 60%;
}

.box2 .box2_main .rrr .rotate_txt {
    writing-mode: sideways-lr;
    font-size: 19px
}

.box2 .box2_swiper_par .box2_btns {
    position: absolute;
    left: 0;
    right: 40px;
    top: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none
}

.box2 .box2_swiper_par .box2_btns .sw_com {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ccc;
    border-radius: 50%;
}

.box2 .box2_swiper_par .box2_btns .sw_n {
    left: 20px;
    right: auto;
    background-image: url(../images/color/sw_left_.png);
}

.box2 .box2_swiper_par .box2_btns .sw_p {
    right: 20px;
    left: auto;
    background-image: url(../images/color/sw_right_.png);
}

.box2 .box2_main2 {
    margin: 34px 0 0;
    align-items: flex-start
}

.box2 .box2_main2 .lll .img_par {
    margin: 0
}

.box2 .box2_main2 .rrr {
    display: flex
}

.box2 .box2_main2 .rrr .item:first-child {
    width: 429px;
    width: calc((429 / 8.41) * 1%);
    align-items: flex-end;
    margin-right: 33px
}

.box2 .box2_main2 .rrr .item:first-child .img {
    padding-bottom: calc((635 / 4.28) * 1%);
    margin-right: 0;
    margin-left: 20px
}

.box2 .box2_main2 .rrr .item:nth-child(2) {
    width: 357px;
    width: calc((357 / 8.41) * 1%)
}

.box2 .box2_main2 .rrr .item:nth-child(2) .img {
    padding-bottom: calc((635 / 3.56) * 1%)
}

.box3 {
    margin-top: calc((109 / 19.2) * 1%);
    background: #1c1c1c;
    padding: calc((65 / 19.2) * 1%) 0 calc((100 / 19.2) * 1%)
}

.box3 .box3_main * {
    color: #f7f7f4
}

.box3 .box3_main .t2 {
    margin-top: 4%;
    line-height: 32px
}

.box3 .box3_main .box3_img{margin: 30px auto 0; overflow: hidden;}
.box3 .box3_main .box3_img img{display: block; margin: 0 auto; max-width: 50%;}

.box3 .box3_main .line {
    margin-top: 6%;
    width: 80%;
    height: 3px;
    background: #cccccc;
    opacity: .54;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.box3 .box3_main .nums {
    margin-top: 6%;
    justify-content: space-evenly; align-items: unset;
}
.box3 .box3_main .nums .item{justify-content: unset; max-width: 30%; text-align: center;}

.box4 {
    margin-top: calc((140 / 19.2) * 1%)
}

.box4 .box4_swiper_par {
    position: relative
}

.box4 .box4_swiper_par .box4_swiper {
    margin-top: 72px
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide {
    background: #f4f4f4;
    padding: 116px 132px 144px 64px
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide-next {
    margin-top: 34px
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide-duplicate-prev {
    margin-top: 68px
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide .img {
    width: 70px;
    height: 66px;
    padding: 0
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide .img img {
    position: relative
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide .t1 {
    font-size: 24px;
    font-family: Cambria;
    margin-top: 45px
}

.box4 .box4_swiper_par .box4_swiper .swiper-slide .t2 {
    margin-top: 48px
}

.cer {margin-top: 5%}
.cer .cer_swiper {margin-top: 3%; overflow: hidden;}
.cer .cer_swiper .swiper-slide{height: auto; width: calc((100% - 90px) / 4); margin-right: 30px;}
.cer .cer_swiper .img {padding-bottom: 140%;}
.cer .cer_swiper .img img{object-fit: contain;}

@media screen and (max-width: 1450px) {
    .box4 .box4_swiper_par .box4_swiper .swiper-slide{padding: 40px 30px;}
    .box4 .box4_swiper_par .box4_swiper .swiper-slide .t1{margin-top: 24px;}
    .box4 .box4_swiper_par .box4_swiper .swiper-slide .t2{margin-top: 20px;}
}
@media screen and (max-width:950px) {
    .cer .cer_swiper {margin-top: 20px;}
    .cer .cer_swiper .swiper-slide{width: 100%;}

    .box1 .box1_main .img {
        padding-bottom: 70%
    }

    .box1 .box1_main .rrr .t2 {
        margin-top: 30px
    }

    .box2 .big_tit {
        font-size: 50px
    }

    .box2 .box2_main {
        margin-top: -30px
    }

    .box2 .box2_main .lll .img_par {
        margin-top: 50px
    }
    .box2 .box2_main .rrr{padding-left: 0;}

    .box2 .box2_main .rrr .img {
        padding-bottom: 62%
    }

    .box2 .box2_swiper_par .box2_btns {
        right: 28px
    }

    .box2 .box2_swiper_par .box2_btns .sw_n {
        left: 10px
    }

    .box2 .box2_swiper_par .box2_btns .sw_p {
        right: 10px
    }

    .box3 {
        margin-top: 50px;
        padding: 50px 0 30px
    }

    .box3 .box3_main .t2{line-height: 28px;}
    .box3 .box3_main .box3_img{margin-top: 20px;}
    .box3 .box3_main .line{margin-top: 30px;}

    .box3 .box3_main .nums {
        margin-top: 0;
        flex-wrap: wrap
    }

    .box3 .box3_main .nums .item {
        width: 50%;
        margin-top: 30px; text-align: center; justify-content: unset; max-width: unset;
    }
    .box3 .box3_main .box3_img img{max-width: 100%;}

    .box4 {
        margin-top: 50px
    }

    .box4 .box4_swiper_par .box4_swiper {
        margin-top: 30px
    }

    .box4 .box4_swiper_par .box4_swiper .swiper-slide {
        padding: 50px 30px 30px;
        margin-top: 0 !important
    }
}

/* s_about_company */
.s_about_company{background: #f5f5f5; padding: 4.5% 0; margin-top: 5%;}
.s_about_company .c_sub_th{text-align: left; margin-top: 0;}

.about_company_inner{padding: 25px 0 50px; position: relative; align-items: center; display: flex; justify-content: space-between;}
.about_company_inner .swiper-wrapper{flex-direction: column;}
.about_company_inner .swiper-slide{height: auto;}
.about_company_inner .about_dev_item{border-top: 1px solid #ddd;}
.about_company_inner .swiper-slide:last-child .about_dev_item{border-bottom: 1px solid #ddd;}
.about_com_left{width: 48.2%;}
.about_com_left .imgBox{padding-bottom: 68%; overflow: hidden; height: 0;}
.about_com_left .imgBox img{transition: all 0.3s ease;}
.about_com_left .imgBox:hover img{transform: scale(1.05);}

.about_com_right{width: 48%; height: 100%;}
.swiper_about_company {height: 400px;}
.about_dev_item{display: flex; align-items: center; justify-content: space-between; padding: 16px 0;}
/* .about_dev_item:first-child{padding-top: 0;} */
.about_dev_item .year{font-size: 30px; width: 20%; font-weight: bold;}
.about_dev_item .brief{flex: 1; line-height: 26px; color: #333;}

.about_company-prev, .about_company-next{background: #333; width: 76px; height: 38px; border-radius: 0;}
.about_company-prev::before, .about_company-next::before{content: ''; transform: scale(1); position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.about_company-prev::before{background: url(../images/icon_left_w.png) no-repeat center /20px auto;}
.about_company-next::before{background: url(../images/icon_right_w.png) no-repeat center /20px auto;}

.about_company-prev, .about_company-next{top: auto; bottom: 0;}
.about_company-prev{right: 100px; left: auto;}
.about_company-next{right: 0;}

@media only screen and (max-width: 950px) {
	.s_about_company{padding: 25px 0 30px; margin-top: 30px;}
	.about_company_inner{padding: 15px 0 50px; flex-wrap: wrap;}
	.about_com_left{width: 100%;}
	.about_com_right{width: 100%; margin-top: 20px;}
	.about_dev_item{padding: 15px 0; flex-direction: column; align-items: flex-start;}
	.about_dev_item .year{font-size: 24px; width: 100%;}
	.about_dev_item .brief{line-height: 26px;}
}

/* exhibition */
.exhibition{margin-top: 5%;}
.exhibition_inner{margin-top: 3%; position: relative;}
.exhibition_swiper{overflow: hidden;}
.exhibition_swiper .swiper-slide{height: auto; width: calc((100% - 40px) / 3); margin-right: 20px;}
.exhibition_swiper .item .img{padding-bottom: 75%;}
.exhibition-prev, .exhibition-next{background: #333; width: 32px; height: 50px; border-radius: 0;}
.exhibition-prev::before, .exhibition-next::before{content: ''; transform: scale(1); position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.exhibition-prev::before{background: url(../images/com-prev.png) no-repeat center /10px auto;}
.exhibition-next::before{background: url(../images/com-next.png) no-repeat center /10px auto;}
.exhibition-prev{left: -50px;}
.exhibition-next{right: -50px;}
.about_company-prev:hover, .about_company-next:hover{background: #000;}
@media only screen and (max-width: 1366px) {
    .exhibition-prev{left: -16px;}
    .exhibition-next{right: -16px;}
}
@media only screen and (max-width: 950px) {
    .exhibition_swiper .swiper-slide{width: 100%;}
    .exhibition-prev, .exhibition-next{width: 26px; height: 42px;}
    .exhibition-prev{left: -13px;}
    .exhibition-next{right: -13px;}
}