.page{ height:40px; line-height:37px; text-align:right; margin:20px 15px; color:#333; font-size:14px; clear:both}
.page a,.page span{ font-size:14px; position: relative; padding: 10px 18px; margin-left: -1px; line-height: 1.5; color: #000; background-color: #fff; border: 1px solid #ddd}
.page a:hover{color:#fb5e1d}
.page .current { background-color: #fb5e1d; color: #FFF;}

.sub-banner{ height: 320px; background: url(../img/sub-banner.jpg) no-repeat center}
.company-banner{ height: 320px; background: url(../img/banner-company.jpg) no-repeat center}
.news-banner{ height: 320px; background: url(../img/banner-news.jpg) no-repeat center}
.video-banner{ height: 320px; background: url(../img/banner-video.jpg) no-repeat center;}
.inquiry-banner{ height: 320px; background: url(../img/banner-inquiry.jpg) no-repeat center;}
.application-banner{ height: 320px; background: url(../img/banner-application.jpg) no-repeat center;}
.contact-banner{ height: 320px; background: url(../img/banner-contact.jpg) no-repeat center;}
.products-banner{ height: 320px; background: url(../img/banner-product.jpg) no-repeat center;}
.case-banner{ height: 320px; background: url(../img/banner-case.jpg) no-repeat center;}

.sub-ctn{ min-height: 500px; margin-top: 55px}

.location{ background-color: #f3f3f3; line-height: 45px; font-family: Arial}
.location .name{ padding-left: 16px; font-size: 18px}
.location .name:before{ position: absolute; content: ''; width: 3px; height: 24px; background-color: #333; top: 10px; left: 0px}
.location .links{ font-size: 14px}
.location .links a{ transition: all 0.3s}
.location .links a:hover{ color: #ff6700}
.location .links span, .location .links i{ display: inline-block; background-image: url(../img/little-icon.png); background-repeat: no-repeat; margin: 0 12px; vertical-align: middle; color: #666}
.location .links span{ width: 12px; height: 18px; background-position: -295px -11px; margin-top: -3px}
.location .links i{ width: 11px; height: 9px; background-position: -336px -16px; margin-top: -2px}

.pro-gallery{ width: 50%}
.pro-gallery .bd{ border: 2px solid #e0e0e0; height: 489px}
.pro-gallery .bd li{ width: 646px; height: 489px}
.pro-gallery .bd img{ width: 100%; height: 100%; object-fit: cover}

.pro-gallery .hd{ margin-top: 10px}
.pro-gallery .hd ul{ margin-left: -6px; margin-right: -12px}
.pro-gallery .hd li{ float: left; width: 22.4%; margin: 0 6px; border: 2px solid #e0e0e0}
.pro-gallery .hd img{ width: 100%; height: 111.72px; object-fit: cover}
.pro-gallery .hd .on{ border: 2px solid #727272}

.pro-property{ width: 50%}
.pro-property .inner{ padding-left: 45px}
.pro-property .name{ font-size: 30px; margin: 15px 0 45px; color: #fb5e1d}
.pro-property .brief{ padding: 25px 0; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; font-family: Arial}
.pro-property .brief .intro{ padding: 25px; background-color: #f3f3f3; margin-bottom: 20px}
.pro-property .brief .intro span{ line-height: 21px; height: 42px}
.pro-property .brief .category{ padding-left: 5px}
.pro-property .custom-property{ margin: 25px 0 30px; font-family: Arial}
.pro-property .custom-property .p{ line-height: 42px; cursor: default}
.pro-property .custom-property .p b{ margin-right: 15px}
.pro-property .custom-property .p:hover span{ color: #ff6700}
.pro-property .action .button{ padding: 20px 70px; border-radius: 7px}
.pro-property .action i{ width: 30px; height: 30px; background-image: url(../img/little-icon.png); background-repeat: no-repeat; vertical-align: bottom; margin-right: 5px}
.pro-property .action .btn-contact i{ background-position: -366px -5px}
.pro-property .action .btn-inquiry i{ background-position: -405px -5px}
.pro-property .action .btn-contact:hover{ background-color: #fb4900}
.pro-property .action .btn-inquiry:hover{ background-color: #ccc}
.pro-property .action .button:hover i{ transform: scale(1.02)}
.pro-property .action span{ font-size: 24px}
.pro-property .action .btn-contact{ background-color: #ff6700; color: #fff}
.pro-property .action .btn-inquiry{ background-color: #e0e0e0}
.pro-property .online{ padding: 10px 60px; background-color: #fff0e5; color: #ff6700; margin-top: 35px; font-family: Arial; cursor: default}
.pro-property .online i{ width: 45px; height: 26px; background: url(../img/little-icon.png) no-repeat -438px -6px; vertical-align: bottom}
.pro-property .online:hover i{ animation: shake 0.3s}

.pro-info{ margin-top: 50px}
.pro-main .left-nav{ width: 350px}
.pro-main .product-left-nav .hd{ font-size: 42px; padding: 20px 0; background: url(../img/bg-product-nav.jpg) no-repeat center; font-family: "FlamaCondensed-Basic"; letter-spacing: 2px}
.pro-main .product-left-nav .bd{ background-color: #f7f7f7}
.pro-main .product-left-nav .bd li:not(:last-child){ margin-bottom:5px;}
.pro-main .product-left-nav .bd a{ padding: 15px 0; font-size: 18px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.pro-main .product-left-nav .bd a:hover, .pro-main .product-left-nav .bd .on a{ background-color: #ff6700; color: #fff}
.pro-main .fix-left-nav{ position: fixed; top: 0}
.pro-main .bs-left-nav{ position: absolute; bottom: 0}
.pro-main .info{ width: 920px}
.pro-main .info .fixed{ position: fixed; top: 0; width: 929px}
.pro-main .info .anchor-set{ margin-left: -3px; margin-right: -6px; z-index: 9}
.pro-main .info .anchor-set li{ width: 32.6%; margin: 0 3px}
.pro-main .info .anchor-set a{ padding: 15px 0; background-color: #e0e0e0; font-size: 20px; font-family: "FlamaCondensed-Basic"; letter-spacing: 1px}
.pro-main .info .anchor-set .current a, .pro-main .info .anchor-set a:hover{ background-color: #ff6700; color: #fff}
.pro-main .info .anchor{ padding-top: 56px}

.pro-main .info .anchor .inner{  background-color: #f3f3f3}
.pro-main .info .anchor strong{ font-size: 20px; padding: 15px 34px; background-color: #e0e0e0; color: #333; font-weight: normal; font-family: "FlamaCondensed-Basic"; letter-spacing: 1px; cursor: default}
.pro-main .info .anchor strong:hover{ color: #fb5e1d}

.pro-main .info .section-ctn h3{ margin-top: 56px; background-color: #f3f3f3; margin-bottom:35px;}
.pro-main .info .section-ctn h3 strong{font-size: 20px; padding: 15px 34px; background-color: #e0e0e0; color: #333; font-weight: normal; font-family: "FlamaCondensed-Basic"; letter-spacing: 1px; cursor: default;    display: inline-block;}
.pro-main .info .section-ctn h3 strong:hover{color: #fb5e1d}
.pro-main .section-ctn p{line-height: 30px;color: #666; }

.pro-main .section-ctn img{ max-width:100%;}
.pro-main .section-ctn table{ width:100%;}

.leave-msg{ background-color: #f7f7f7; padding-bottom: 20px; margin-top: 20px;}
.leave-msg .hd{ padding: 16px 0 16px 85px; background-color: #ff6700;}
.leave-msg .hd span{ font-size: 22px; font-family: DINPro-M; color: #fff;}
.leave-msg .hd .icon{ width: 30px; height: 30px; background: url(../img/little-icon.png) no-repeat -1175px -14px; position: absolute; left: 25px; top: 50%; margin-top: -15px;}
.leave-msg .bd{ padding: 0 25px; font-family: Arial;}
.leave-msg .bd .des{ line-height: 24px; padding: 10px 0 15px;}
.leave-msg .bd .des:after{ content: ''; width: 300px; height: 5px; background: url(../img/little-icon.png) no-repeat -16px -65px; position: absolute; left: 0; bottom: 0;}
.leave-msg .bd .input-title{ padding: 10px 0; color: #333}
.leave-msg .bd .input-title i{ color: #ff6700; padding-right: 5px;}
.leave-msg .bd .input{ width: 100%; height: 35px; border: 1px solid #dddde1; border-radius: 5px; padding-left: 5px;}
.leave-msg .bd textarea{ width: 100%; border: 1px solid #dddde1; text-indent: 22px; padding-top: 5px;}
.leave-msg .bd .icon-pen{ width: 15px; height: 15px; background: url(../img/little-icon.png) no-repeat -736px -14px; position: absolute; left: 5px; top: 10px;}
.leave-msg .bd .button{ padding: 13px 35px; border-radius: 7px; background-color: #ff6700; color: #fff; margin-top: 20px; border: none; display: block; margin: 20px auto 0;}
.leave-msg .bd .button span{ font-size: 18px;}

.pro-list{}
.pro-list-ctn{ margin: 0 -18px 0 -9px}
.pro-list-ctn li{ float: left; width: 31.1%; margin: 0 9px 18px; padding-bottom: 38px; position: relative; overflow: hidden}
.pro-list-ctn li img{ width: 100%; height: 294.5px; object-fit: cover}
.pro-list-ctn li a{ position: absolute; top: 300.5px; bottom: 0; width: 100%; background-color: #fda633; text-align: center; color: #fff;left: 0;}
.pro-list-ctn li h1{ margin-top: 10px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 14px; font-weight: bold}
.pro-list-ctn li h2{ margin-top: 75px; display: inline-block; font-size: 14px; font-family: Arial; letter-spacing: 2px; padding: 5px 10px; border: 1px solid #fff}
.pro-list-ctn li h2 .fa{ font-size: 12px; margin-left: 5px}
.pro-list-ctn li:hover a{ top: 0; background-color: rgba(253,166,51,0.8)}
.pro-list-ctn li:hover h1{ margin-top: 111px; font-size: 20px; letter-spacing: 2px}
.pro-list-ctn li h2:hover{ background-color: rgba(253,166,51,0.9)}

.news-list{ margin-left: -5px; margin-right: -10px}
.news-item{ width: 32.1%; margin: 0 5px 22px}
.news-item .pic img{ width: 100%; height: 251px; object-fit: cover}
.news-item .con{ padding: 15px 15px 0; background-color: #ededed}
.news-item .con .title{ font-size: 18px; font-weight: bold; line-height: 28px; height: 54px; margin-bottom: 10px; font-family: 'DINPro'}
.news-item .con .des{ padding: 15px;  background-color: #e2e2e2; font-family: 'DINPro'; font-size: 15px}
.news-item .con .des span{ font-size: 14px; color: #666; line-height: 20px; height: 60px}
.news-item .con .ft{ line-height: 50px; padding-left: 17px; font-size: 14px; font-family: 'DINPro-M'}
.news-item:hover .des{ background-color: #feaf48}
.news-item:hover .des span{ color: #fff}
.news-item:hover .ft{ color: #ff6700}

.video-list{}
.video-item{ margin-bottom: 40px}
.video-item .video-cover{ width: 256px; height: 164px; object-fit: cover}
.video-item .text{ width: 69.8%; font-family: 'Arial, Helvetica, sans-serif'}
.video-item h3{ font-weight: bold; margin-bottom: 5px; height: 21px}
.video-item .des{ font-size: 14px; line-height: 30px; color: #666; margin: 6px 0; height: 90px}
.video-item .btn-more{ text-align: left;  margin-top: 15px}
.video-item .btn-more .btn{ padding: 5px 10px; background-color: #d9d9d9; font-size: 14px; border-radius: 15px}
.video-item:hover h3{ color: #fb5e1d}
.video-item:hover .btn-more .btn{ background-color: #fb5e1d; color: #fff}
.video-item .play-btn{ width: 36px; height: 36px; background: rgba(255,255,255,0.5); border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -18px; margin-top: -18px}
.video-item .play-btn .fa{ margin: 8px 0 0 12px; font-size: 20px}

.video{ margin: 50px 0}
.video-width{ width: 960px; margin: 0 auto}
.video-title{ font-size: 22px; font-weight: bold; margin-bottom: 40px}
.video-title i{ position: absolute; top: 50%; margin-top: -12px; left: 10px; color: #fb5e1d}
.video-title a{ padding-left: 50px; line-height: 30px; max-height: 60px}
.video iframe{ display: block; margin: 0 auto}
.video-back-btn a{ display: inline-block; padding: 9px 45px; background-color: #fb5e1d; color: #fff; font-size: 18px; border-radius: 22px}

.application{ margin-left: -17px; margin-right: -34px}
.app-item{ width: 22.2%; margin: 0 17px 50px; background-color: #f7f7f7}
.app-item .img{ height: 250px; z-index: 1}
.app-item .name{ position: absolute; width: 100%; bottom: -10px; font-family: 'Open Sans', sans-serif; color: #fff; font-size: 14px}
.app-item .name .inner{ padding: 30px 15px}
.app-item .name .bg{ position: absolute; left: 0; top: 0; right: 0; height: 100%; background-color: rgba(251,94,29,0.9); z-index: -1; transform: skewY(-3.1deg)}
.app-item:hover .name .inner{ padding-left: 30px}
.app-item:hover .name .inner .fa{ padding-left: 5px}
.app-item:hover .name .bg{ background-color: rgba(251,94,29,0.8)}

.app-info .bigimg{ width: 50%}
.app-info .info{ width: 50%}
.app-info .bigimg img{ width: 600px; height: 450px; object-fit: cover}
.app-info .info .name{ font-size: 30px; margin: 15px 0 27px}
.app-info .info .brief{ padding: 30px 0 0; border-top: 1px solid #d2d2d2; font-family: Arial}
.app-info .info .brief .intro{ padding: 25px; background-color: #f3f3f3; margin-bottom: 20px}
.app-info .info .brief .intro span{ line-height: 21px; height: 42px}
.app-info .info .brief .category{ padding-left: 5px}
.app-info .info .custom-property{ margin: 25px 0 30px; font-family: Arial; height: 129px}
.app-info .info .custom-property .p{ line-height: 42px; cursor: default}
.app-info .info .custom-property .p b{ margin-right: 15px}
.app-info .info .custom-property .p:hover span{ color: #ff6700}
.app-info .info .button{ padding: 20px 40px; border-radius: 7px; background-color: #ff6700; color: #fff}
.app-info .info .button:hover{ background-color: #fb4900}
.details-hd{ background-color: #f3f3f3; margin: 100px 0 40px}
.details-hd button{ border: none; padding: 10px 20px; color: #fff; font-weight: bold; background-color: #fb5e1d}
.details-ctn{ font-family: opensans}

.news-info p:after{ content:'\20';display:block;height:0;clear:both}
.news-info-left{ width: 67%}
.news-title{ font-size: 30px; line-height: 40px; max-height: 80px}
.news-info-right{ width: 30%}
.news-share{ padding: 30px 20px 30px 0}
.news-share .date{ color: #fb5e1d}
.news-share .date .fa{ margin-right: 5px}
.news-ctn img{ max-width:100%;}
.news-ctn p{ margin: 16px 0; line-height: 1.8; color: rgb(77, 79, 83);}

.prev-next{ text-align: center; margin-top: 50px}
.prev-next .btn{ width: 40%; border: 1px solid #999; padding: 30px}
.prev-next .btn:hover{ background-color: #fb5e1d; border-color: #fb5e1d; color: #fff}
.prev-next .fa{ padding: 0 8px; line-height: 22px}
.prev-next .title{ height: 22px; display: inline-block; max-width: 316px}

.related-news .hd{ font-size: 24px; padding: 20px; margin-bottom: 20px; background-color: #f3f3f3}
.related-news .hd:after{ content: ''; position: absolute; width: 100px; height: 2px; background-color: #ff7200; left: 21px; bottom: 13px;}
.related-news li{ margin-bottom: 20px}
.related-news .img{ width: 30%; height: 86px; opacity: 0.9}
.related-news .text{ width: 70%}
.related-news .text .title{ padding: 7px 0 0 20px; margin-bottom: 5px; line-height: 36px; height: 36px}
.related-news .text .date{ padding:  0 20px; font-size: 14px; color: #666}
.related-news li:hover .title{ color: #fb5e1d; color: #fff}
.related-news li:hover .date{ color: #fff}
.related-news li:hover .img{ transform: scale(1.02); opacity: 1}
.related-news li:hover{ background-color: rgba(251,94,29,0.9)}
.news-info-right .fixed{ position: fixed; top: 0}

.company-ctn{ padding: 34px; background-color: #f2f2f2; font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif}
.company-ctn:before, .company .company-ctn:after{ content: ''; position: absolute; width: 38px; height: 38px; background-image: url(../img/little-icon.png); background-repeat: no-repeat}
.company-ctn:before{ background-position: -572px 0px; top: 0; right: 0}
.company-ctn:after{ background-position: -527px 0px; bottom: 0; left: 0}
.company-ctn p{ font-size: 16px; line-height: 32px;font-family: Arial;}
.company-ctn .title{ width: 525px; font-size: 24px; font-family: '思源黑体'; color: #ff6700; font-weight: bold; padding-bottom: 10px; margin: -10px 0 10px; border-bottom: 1px solid #c4c4c4}
.company-ctn .img{ width: 294px; height: 425px; margin-left: 20px;    margin-top: 38px;}/* background: url(../img/about_bg.jpg) no-repeat center/cover ;*/
.compnay-img{ margin: 40px 0 30px; font-family: 'HelveticaNeueLTS'}
.compnay-img .left, .compnay-img .right{ background-image: url(../img/company-bg.png); background-repeat: no-repeat}
.compnay-img .left{ width: 48%; background-position: -319px 0px}
.compnay-img .right{ width: 48%; background-position: 0px 0px}
.compnay-img .img{ width: 180px; height: 218px; background-image: url(../img/company-bg.png); background-repeat: no-repeat; cursor: default}
.compnay-img .right .img{ background-position: -637px 0px}
.compnay-img .text{ position: absolute; top: 50%; left: 0; width: 100%; margin-top: -14px; color: #fff; font-size: 20px; text-shadow: 2px 2px 0px #a29c9e}
.compnay-img .right .text{ margin-top: -24px}
.compnay-img .left .img{ background-position: -820px 0px}

.hot-pro{ margin-top: 34px}
.hot-title{ padding: 16px 0; background-color: #ff6700}
.hot-title .icon{ width: 25px; height: 33px; background: url(../img/little-icon.png) no-repeat -648px -2px; vertical-align: bottom; margin-right: 5px}
.hot-title .text{ color: #fff; font-size: 22px; font-family: 'DINPro-M'}
.hot-ctn{ padding: 16px; background-color: #f7f7f7}
.hot-ctn .bd{ height: 368px}
.hot-ctn .bd a{ background-color: #fff}
.hot-ctn .bd .img{ width: 318px; height: 318px; object-fit: cover}
.hot-ctn .bd .name{ line-height: 50px; font-family: 'DINPro'}
.hot-ctn .hd li{ width: 7px; height: 7px; border-radius: 50%; background-color: #bcbcbc; display: inline-block;margin: 0 5px; color: transparent; overflow: hidden; cursor: pointer}
.hot-ctn .hd .on{ background-color: #ff6700}

.inquiry-list-ctn{ padding: 44px; border: 1px solid #dddde1}
.inquiry-list-ctn .title{ font-size: 24px; font-weight: bold; color: #ff6700}
.inquiry-list-ctn .title .icon{ width: 30px; height: 27px; background: url(../img/little-icon.png) no-repeat -691px -8px; vertical-align: sub; margin-right: 8px;}
.inquiry-list-ctn .des{ margin-top: 20px; font-family: Arial; line-height: 24px;}
.inquiry-list-ctn .line{ margin-top: 20px; height: 5px; background: url(../img/little-icon.png) no-repeat -16px -65px;}
.inquiry-list-ctn table{ width: 750px; margin: 0 auto;}
.inquiry-list-ctn table td{ width: 50%;}
.inquiry-list-ctn table td input,.inquiry-list-ctn table td select{ width: 90%; height: 38px; border: 1px solid #dddde1; background-color: #fff3eb; border-radius: 5px;text-indent: 5px; outline:none;}
.inquiry-list-ctn table .hd{ color: #333; margin: 15px 0 10px;}
.inquiry-list-ctn table .hd i{ color: #ff6700; font-style: normal;}
.inquiry-list-ctn table textarea{ width: 95%; border: 1px solid #dddde1;outline:none; background-color: #fff3eb; text-indent: 22px;padding-top: 3px;}
.inquiry-list-ctn table textarea:focus{ border:1px solid #ff6700; }
.inquiry-list-ctn table td input:focus,.inquiry-list-ctn table td select:focus{ border:1px solid #ff6700;}
.inquiry-list-ctn table .button{ padding: 13px 35px; border-radius: 7px; background-color: #ff6700; color: #fff; margin-top: 20px; border: none;}
.inquiry-list-ctn table .button span{ font-size: 18px; font-family: Arial;}
.inquiry-list-ctn table .icon-pen{ width: 15px; height: 15px; background: url(../img/little-icon.png) no-repeat -736px -14px; position: absolute; left: 5px; top: 5px;}

.contact{ border: 1px solid #ededed; background-color: #f7f7f9; padding: 9px;}
.contact .inner{ background-color: #fff;}
.contact .text{ width: 33%; }
.contact .map{ width: 66%; }
.contact .map iframe{ width: 100%; height: 425px;}
.contact-ctn{ padding: 40px; }
.contact-ctn .hd{ padding-bottom: 20px; font-size: 28px; font-weight: bold; font-family: opensans-bold;}
.contact-ctn .hd:after{ content: ''; width: 71px; height: 3px; position: absolute; left: 0; bottom: 0; background-color: #fb5e1d}
.contact-ctn .ct{ margin-top: 50px; }
.contact-ctn .ct li{ margin-bottom: 40px; }
.contact-ctn .ct .icon{ width: 53px; height: 53px; background-image: url(../img/little-icon.png); background-repeat: no-repeat}
.contact-ctn .ct .text{ width: 80%; font-size: 14px; font-family: opensans; color: #555; line-height: 24px;}

.contact-ctn .address{ background-position: -990px 0px}
.contact-ctn .email{ background-position: -1049px 0px}
.contact-ctn .phone{ background-position: -1108px 0px}

.contact-ctn .ft{ padding-left: 18%; }
.contact-ctn .ft .icon{ width: 38px; height: 38px; margin: 0 5px; background-image: url(../img/little-icon.png); background-repeat: no-repeat; float: left;}
.contact-ctn .ft .icon a{ display: block; width: 100%; height: 100%;}
.contact-ctn .ft .icon1{ background-position: -778px -2px; }
.contact-ctn .ft .icon2{ background-position: -830px -2px; }
.contact-ctn .ft .icon3{ background-position: -883px -2px; }
.contact-ctn .ft .icon4{ background-position: -935px -2px; }



.page > ul > li{
    box-sizing: border-box;
    float: left;
}

.page > ul {
    padding-left: 20%;
}

