body, .web_main{background: #fff;}

.solution_div{
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.odm_top .layout, 
.odm_custom .layout,
.odm_manufact .layout,
.odm_solution .layout{max-width: 1300px;}


/* odm_top */
.otop_left{width: 58%;}
.otop_right{width: 38%; padding: 18px 3% 4% 18px; position: relative;}
.otop_right::before{position: absolute; left: 0; top: 0; width: 28%; height: 32%; content: ''; background: #6A7B8E; z-index: 0;}
.otop_right::after{position: absolute; right: 0; bottom: 0; width: 70%; height: 70%; content: ''; border: 10px solid var(--lightColor); z-index: 0;}
.otop_right .pic{padding-bottom: 100%; z-index: 2;}

.otop_ul{margin-top: 30px;}
.otop_ul .otop_item{width: 49%; height: auto; background: var(--lightColor); text-align: center; position: relative; padding: 40px; padding-bottom: 88px;}
.otop_item::before{position: absolute; left: 50%; width: 0; height: 2px; content: ''; background: var(--commonColor); bottom: 0;}
.otop_item .title{font-size: 22px; font-weight: bold;}
.otop_item .brief{line-height: 28px; color: #666; margin: 14px 0 30px;}
.otop_item .btn_div{position: absolute; left: 0; bottom: 40px; width: 100%;}
.otop_item .btn{height: 48px; line-height: 48px; display: inline-block; padding: 0 30px; border-radius: 50px; background: #333; color: #fff;}
.otop_item .btn:hover{background: var(--commonColor);}

.otop_item:hover::before{width: 100%; left: 0;}


@media only screen and (max-width: 1300px) {
    .otop_right{padding: 14px 3% 4% 14px;}
    .otop_ul .otop_item{padding: 30px; padding-bottom: 78px;}
    .otop_item .brief{margin: 12px 0 20px;}
    .otop_item .btn_div{bottom: 30px;}
}
@media only screen and (max-width: 980px) {
    .otop_inner{flex-direction: column;}
    .otop_left{width: 100%;}
    .otop_right{width: 100%; margin-top: 20px; padding: 10px 24px 30px 10px;}
    .otop_right::after{border-width: 8px;}

    .otop_ul{margin-top: 24px;}
    .otop_ul .otop_item{width: 100%; padding: 20px; padding-bottom: 66px;}
    .otop_item:nth-child(n+2){margin-top: 20px;}
    .otop_item .brief{margin: 10px 0 20px;}
    .otop_item .btn_div{bottom: 24px;}
    .otop_item .btn{height: 46px; line-height: 46px;}
}

/* odm_solution */
.odm_solution{background: var(--lightColor);}
.solution_div{margin-top: 3%; padding: 20px; border-radius: 26px; background: #fff; box-shadow: 0px 20px 30px -20px rgba(var(--comColorRgb), 0.1);}
.solution_div .left{width: 29.5%; padding: 0 10px 20px;}
.solution_div .right{width: 68%; border-left: 1px solid rgba(var(--comColorRgb), 0.2); padding: 65px 10px 45px 28px; overflow: hidden; position: relative;}

.solution_div .order{color: rgba(var(--comColorRgb), 0.4); font-size: 24px; font-weight: bold;}
.solution_div .title{color: var(--commonColor); font-size: 22px; font-weight: bold;}
.solution_div .brief{margin-top: 12px; line-height: 28px; color: #666;}


.solution_div .right .swiper-slide{width: calc((100% - 40px) / 3); margin-right: 20px;}

.photo_item .pic{padding-bottom: 65%;}

.solution_div .common-prev,
.solution_div .common-next{width: 40px; height: 40px; background: var(--lightColor); position: absolute; border-radius: 40px 0 0 40px; top: 5px; margin: 0; right: 0; left: unset; transform: none; line-height: 40px; font-size: 24px; color: var(--commonColor); display: none;}
.solution_div .common-prev{right: 42px;}
.solution_div .common-next{border-radius: 0 40px 40px 0;}

.solution_div .common-next:hover, .solution_div .common-prev:hover{background: var(--commonColor); color: #fff;}

.solution_div:hover{box-shadow: 0px 20px 30px -20px rgba(var(--comColorRgb), 0.45);}

.photo_list .photo_item{width: calc((100% - 40px) / 3); margin-right: 20px;}
.photo_list .photo_item:last-child{margin-right: 0;}


@media only screen and (max-width: 980px) {
    .solution_div{margin-top: 20px; padding: 18px; border-radius: 20px; flex-direction: column;}
    .solution_div .left{width: 100%; padding: 0 0 6px;}
    .solution_div .right{width: 100%; border-left: none; padding: 62px 0 0;}
    .solution_div .common-prev,
    .solution_div .common-next{display: block !important;}
    .solution_div .swiper .swiper-wrapper{justify-content: unset;}
    .solution_div .right .swiper-slide{width: 100%;}
}

/* odm_steps */
.odm_solution .web_th .txt,
.odm_steps .web_th .txt{position: relative; padding-bottom: 14px; display: inline-block;}
.odm_solution .web_th .txt::before,
.odm_steps .web_th .txt::before{position: absolute; left: 50%; bottom: 2px; width: 100px; margin-left: -50px; content: ''; background: var(--commonColor); height: 3px;}
.steps_inner{margin: 3% 0 10px;}
.steps_inner img{display: block; margin: 0 auto; width: auto; max-width: 100%;}

@media only screen and (max-width: 980px) {
    .odm_steps .web_th .txt::before{width: 80px; margin-left: -40px;}
    .steps_inner{margin: 24px 0 10px;}
}


/* odm_custom */
.custom_inner{margin: 3% 0 0;}
.custom_item:nth-child(n+2){margin-top: 4%;}
.custom_pic_item{width: 48%; order: 1;}
.custom_pic_item .pic{padding-bottom: 68%;}
.custom_info{width: 48%; order: 2;}
.custom_info .title{font-weight: bold; font-size: 26px; line-height: 1.4;}
.custom_info .brief{color: #666; line-height: 28px; margin-top: 14px;}

.custom_item:nth-child(odd) .custom_pic_item{order: 3;}

@media only screen and (max-width: 1200px) {
    .custom_item:nth-child(n+2){margin-top: 32px;}
    .custom_info .title{font-size: 24px;}
}
@media only screen and (max-width: 980px) {
    .custom_inner{margin-top: 16px;}
    .custom_item{flex-direction: column;}
    .custom_item:nth-child(n+2){margin-top: 24px;}
    .custom_pic_item{width: 100%; order: 1 !important;}
    .custom_info{width: 100%; margin-top: 16px;}
    .custom_info .title{font-size: 22px;}
    .custom_info .brief{margin-top: 8px;}
}


/* odm_manufact */
.manufact_list{margin: 3% 0 0;}
.manufact_item:nth-child(n+2){margin-top: 4%;}

.manufact_item .manufact_icon{margin-right: 5%;}
.manufact_item .manufact_icon img{width: 150px; height: auto; display: block;}
.manufact_item .manufact_info{flex: 1; padding-top: 15px;}
.manufact_info .title{font-size: 26px; font-weight: bold; line-height: 1.4;}
.manufact_info .brief{color: #666; line-height: 28px; margin-top: 12px;}

.manufact_item:hover .manufact_icon img{animation: bounceInA 0.5s;}

@media only screen and (max-width: 1200px) {
    .manufact_item .manufact_icon img{width: 140px;}
    .manufact_item .manufact_info{padding-top: 10px;}
    .manufact_info .title{font-size: 22px;}

}
@media only screen and (max-width: 980px) {
    .manufact_list{margin-top: 14px;}
    .manufact_item{flex-direction: column;}
    .manufact_item:nth-child(n+2){margin-top: 20px;}
    .manufact_item .manufact_icon{width: 100%;}
    .manufact_item .manufact_icon img{margin: 0 auto;}
    .manufact_item .manufact_info{width: 100%; padding-top: 12px;}
    .manufact_info .brief{margin-top: 8px;}
}

/* odm_bottom */
.odm_bottom{margin-top: 3%;}
.obottom_inner .title{color: #fff; font-size: 36px; font-weight: bold; line-height: 1.3;}
.obottom_inner .brief{color: #fff; line-height: 28px; margin: 20px 0 0;}
.obottom_left{background: #6e7e90; width: 100%; padding: 4% 5%;}
.obottom_right{width: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 4% 5%; display: none;}
.obottom_inner .btn_div{width: 100%; margin-top: 36px;}
.obottom_inner .btn{height: 48px; line-height: 48px; display: inline-block; padding: 0 30px; border-radius: 50px; background: var(--commonColor); color: #fff;}
.obottom_inner .btn:hover{background: #fff; color: var(--commonColor);}


@media only screen and (max-width: 1450px) {
    .obottom_inner .title{font-size: 32px;}
}
@media only screen and (max-width: 1300px) {
    .odm_bottom{margin-top: 30px;}
    .obottom_inner .title{font-size: 28px;}
    .obottom_left, .obottom_right{padding: 3% 4%;}
    .obottom_inner .brief{margin-top: 14px;}
    .obottom_inner .btn_div{margin-top: 24px;}
}
@media only screen and (max-width: 980px) {
    .obottom_inner{flex-direction: column;}
    .obottom_inner .title{font-size: 24px;}
    .obottom_left, .obottom_right{padding: 22px 20px 24px; width: 100%;}
    .obottom_inner .brief{margin-top: 10px;}
    .obottom_inner .btn_div{margin-top: 16px;}
}