body{ background: #f4f4f4; }
.clr{ clear: both;}
.section .section_sub_title span{ color: inherit !important;}
.section .list_ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.list_ul .title{ font-size: 24px; line-height: 1; padding: 40px 0 20px; text-align: center;}
.list_ul .sub_title{ font-size: 14px; color: #666; line-height: 1.8; text-align: center;}

.menu_div{ padding: 0; background: #fff; box-shadow: 0px -10px 15px rgba(0,0,0,.1); overflow: visible;}
.menu_div .section_div{ margin: 0;}
.menu_div .menu_list{ height: 60px;}
.menu_div .item{ float: left; position: relative; padding-right: 20px; margin-right: 30px; cursor: pointer;}
.menu_div .item a{ font-size: 14px; color: #222; height: 60px; line-height: 60px;}
.menu_div .item:hover .a_item,.menu_div .item ul li:hover a{ color: #c00;}
.menu_div .item:hover i{ border-top-color: #c00; transform: rotate(180deg);}
.menu_div .item ul{ display: none;  position: absolute; width: 150px; left: 50%; top: 100%; background: #fff; box-shadow: 0px 0px 5px rgba(0,0,0,.2); z-index: 10; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.menu_div .item ul a{ height: 35px; line-height: 35px;}
.menu_div .item:hover ul{ display: block;}
.menu_div .item:hover:after{ border-top-color: #c00;}
.menu_div .more{ display: none;}
/* 形象 */
.vivid_box{ padding-top: 0px;}
.vivid_box li{ width: 380px; background: #fff; padding: 50px 30px 25px;}
/* 优势 */
.dev_box{ background: #077ed8; padding-bottom: 40px;}
.dev_box .section_title,.dev_box .section_sub_title,.model_box .section_title,.model_box .section_sub_title{ color: #fff;}
.dev_box li{ width: 220px; background: #fff; padding: 40px 20px; margin-bottom: 20px;}

/* 行业 */
.industry_box{ padding-bottom: 40px;}
.industry_box li{ width: 151px;height: 151px; margin-bottom: 20px; padding: 30px 0; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.industry_box li:after{ display: none; content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; opacity: .7; left: 0; top: 0; background: -webkit-linear-gradient(left top, #194af9 , #3fc2f9); background: -moz-linear-gradient(left top, #194af9 , #3fc2f9); background: -ms-linear-gradient(left top, #194af9 , #3fc2f9); background: -o-linear-gradient(left top, #194af9 , #3fc2f9);}
.industry_box li:hover:after{ display: block;}
.industry_box li div{ transition: transform .3s;}
.industry_box li div img{ height: 100%;}
.industry_box li:hover div{ transform: rotateY(180deg);}
.industry_box li .titles{ color: #fff; font-size: 18px; padding-top: 30px; text-align: center;}
.industry_box li *{ position: relative; z-index: 2;}

.web_num{ padding: 0; background: url(/design/images/newpc/index/numbg.jpg) no-repeat center;}
.web_num .section_div{ font-size: 30px; height: 160px; line-height: 160px; color: #fff; margin: 0;}
.web_num span{ font-family: 'Georgia'; font-size: 60px; color: #f3d52c; padding: 0 10px;}
/* 模板 */
.model_box{ background: #000;}
.swiper-container{ overflow: visible;}
.model_box li{height: 405px; border: 10px solid #ccc; overflow: hidden; transition: transform .3s;}
.model_box li:hover{ transform: scale(1.3); z-index: 10;}
.model_box .more_btn{ display: block; width: 400px; height: 60px; line-height: 60px; font-size: 18px; text-align: center; margin: 60px auto 0;}
.model_box a:hover{columns: #fff;}

.honor_box .section_div{ overflow: hidden; margin: 60px 10px 0; padding: 0;}
.honor_box .list_type{ overflow: hidden; position: relative; display: inline-block; margin-bottom: 40px;}
.honor_box .list_type div{ float: left; font-size: 20px; cursor: pointer; height: 50px; line-height: 50px; margin: 0 48px;}
.honor_box .list_type div:first-of-type{ width: 80px;}
.honor_box .list_type div:nth-of-type(2){ width: 100px;}
.honor_box .list_type div.hot,.honor_box .list_type div:hover{ color: #c00;}
.honor_box .hot_div{ position: absolute; bottom: 0; left: 48px; width: 80px; border-bottom: 2px solid #c00; display: block; z-index: 2;}

.honor_box .content{ position: relative; height: 470px;}
.honor_box .content>div{ position: absolute; top: 0; z-index: 10; width: 100%; height: 100%;}
.honor_box .honor_div{ left: 0px;}
.honor_box .software_div{ left: 100%; overflow: hidden; position: relative;}
.honor_box .img_div{ width:50%;}
.honor_box .list{ padding-left: 128px; width: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.honor_box .list li{ font-size: 16px; color: #222; cursor: pointer; text-align: left; margin-bottom: 40px;}
.honor_box .list li span{ padding-right: 17px;}
.honor_box .list .hot,.honor_box .list li:hover{ color: #c00;}
.honor_box .img_div{ float: right; position: relative; height: 461px; overflow: hidden;}
.honor_box .img_div .image{ position: absolute; width: 80%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;}
.honor_box .img_div p{ font-size: 16px; color: #222; padding-top: 30px; text-align: center;}
.honor_box .img_div .arrow{ cursor: pointer; width: 17px; height: 30px; background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.honor_box .img_div .arrow_left{ left: 0; background-image: url(/design/images/newpc/index/arrow_left.png);}
.honor_box .img_div .arrow_right{ right: 0; background-image: url(/design/images/newpc/index/arrow_right.png);}

.button_box{ background: #333333; padding: 0; height: 130px; border-bottom: 1px solid #555;}
.button_box .section_div{ text-align: center; margin-top: 35px;}
.button_box a:first-of-type{ background: #fff;}
.button_box a{ display: inline-block; width: 390px; height: 60px; line-height: 60px; font-size: 18px; margin: 0 10px;}
.button_box a:last-of-type:hover{ color: #fff;}

/* 案例 */
.case_box li {width: 380px;background: #fff;float: left;margin: 10px;}
.case_box .img{height: 155px;overflow: hidden;}
.case_box .info_box{padding: 30px 20px;}
.case_box .info_box .title_item{overflow: hidden;font-size: 16px;padding-bottom: 20px;}
.case_box .info_box .title_item .title_left{float: left;max-width: calc(100% - 110px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.case_box .info_box .title_item .trade{color: #999;float: right;width: 100px;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.case_box .info_box .sub_info{color: #999;font-size: 14px;text-align: left;}
.case_box .bottom_btn{margin-top: 40px;}
.case_box .bottom_btn a:first-of-type {background: #fff;}
.case_box .bottom_btn  a {display: inline-block;width: 390px;height: 60px;line-height: 60px;font-size: 18px;margin: 0 10px;}
.case_box .bottom_btn a:hover{opacity: 0.8;}
.case_box .bottom_btn a.more_btn:hover{color: #fff;}
.case_box li:hover{transform: scale(1.05);}
.case_box .window_width{padding: 0;}
@media screen and (max-width: 1024px){
    .vivid_box li{ width: calc((100% - 40px)/3);}
    .dev_box li{ width: calc((100% - 40px)/5); margin-bottom: 10px;}
    .industry_box li{ width: calc((100% - 60px)/7);height: calc((100% - 60px)/7); margin-bottom: 10px;}
    .honor_box .section_div{ padding: 0;}
    .honor_box .content>div{ width: calc(100% - 10px);}
}
@media screen and (max-width: 768px){
    .list_ul .title{ font-size: 18px;}
    .dev_box li{ width: calc((100% - 10px)/2);}
    .web_num .section_div{ font-size: 24px; line-height: 1.8; height: auto; padding: 25px 20px;}
    .web_num span{ font-size: 40px;}
    .honor_box .list{ padding-left: 20px;}
    .honor_box .img_div img{ width: 60%;}
    .honor_box .content{ height: 370px;}
    .button_box a{ width: calc((100% - 20px)/2); margin: 0;}
    .button_box a:first-of-type{ margin-right: 20px;}
    .honor_box .img_div{ height: 350px;}
}
@media screen and (max-width: 640px){
    .menu_div .item{ margin-right: 10px;}
    .menu_div .item a{ font-size: 12px;}
    .list_ul .title{ font-size: 16px; padding: 20px 0 10px;}
    .list_ul .sub_title{ font-size: 12px;}

    .vivid_box li{ width: 100%; padding: 20px; margin-bottom: 10px;}
    .vivid_box li:last-of-type{ margin-bottom: 0;}
    .vivid_box li img{ width: 45px; margin: 0 auto;}

    .dev_box{ padding-bottom: 10px;}
    .dev_box li{ padding: 20px 10px; margin-bottom: 10px;}
    .dev_box li img{ margin: 0 auto; width: 45px;}

    .industry_box{ padding-bottom: 10px;}
    .industry_box li{ width: calc((100% - 20px)/3); height: calc((100% - 20px)/3); margin-bottom: 10px;}
    .industry_box li div{ height: 25px; margin: 0 auto;}
    .industry_box li .titles{ font-size: 14px; padding-top: 15px;}

    .web_num .section_div{ font-size: 12px; }
    .web_num span{ font-size: 18px;}

    .model_box li{ height: 250px; border-width: 5px;}
    .model_box .more_btn{ width: 160px; height: 40px; line-height: 40px; font-size: 14px; margin: 20px auto 0;}
    
    .honor_box .section_div{ padding: 0; margin: 40px 20px 0;}
    .honor_box .content{ overflow: visible; height: 324px;}
    .honor_box .content>div{ height: auto;}
    .honor_box .list_type{ margin-bottom: 20px;}
    .honor_box .list_type div{ font-size: 14px; height: 40px; line-height: 40px; margin: 0 20px;}
    .honor_box .list_type div:first-of-type{ width: 56px;}
    .honor_box .list_type div:nth-of-type(2){ width: 70px;}
    .honor_box .hot_div{ left: 20px; width: 56px;}
    .honor_box .software_div{ left: 100%;}

    .honor_box .list{ padding-left: 0; width: 100%; position: relative; left: 0; top: 0; transform: unset;}
    .honor_box .list li{ font-size: 12px; margin-bottom: 0; line-height: 2;}
    .honor_box .img_div{ float: none; width: 100%; margin-top: 20px; height: 200px;}
    .honor_box .img_div img{ width: 40%;}
    .honor_box .img_div p{ display: none;}

    .button_box{ height: auto; padding: 0 0 20px 0;}
    .button_box a{ height: 40px; line-height: 40px; font-size: 14px;}
    .button_box .section_div{ margin-top: 20px;}
}
@media screen and (max-width: 480px){
    .model_box li{ height: 200px;}
}
@media screen and (max-width: 414px){
    .honor_box .content{ height: 250px;}
    .honor_box .img_div{ height: 100px;}
}
@media screen and (max-width: 320px){
    .model_box li{ height: 150px;}
    .menu_div .item:nth-of-type(4){ clear: both;}
    .menu_div .item:nth-of-type(4),.menu_div .item:last-of-type{ display: none;}
    .menu_div .more{ display: block; position: relative; float: right; height: 60px; line-height: 60px; padding-right: 20px;}
    .menu_div .more:hover i{ transform: rotate(180deg);}
    .honor_box .content{ height: 267px;}
    .honor_box .img_div{ height: 80px;}
}