@media screen and (max-width:1440px){
.slick-active .binbox .imgt5 { position:absolute;left:60px; top:280px; text-align: left; background:rgba rgba(0,102,153,0.6)}
.slick-active .binbox .imgt6 { position:absolute;right:100px;; top:120px; text-align: left; }
.slick-active .binbox .imgt7 { position:absolute;right:90px; top:350px; text-align: left}
.slick-active .binbox .imgt8 { position:absolute;right:80px; bottom:190px; text-align: left}
}

@media screen and (max-width:1240px){
	.inner,.pinner{ width: 1000px;}
	.brandIdea-ibox .con{ padding: 55px 8% 40px;}
	.brandStory-ibox .con{ padding: 45px 8%;}
	.product-ibox .con{ padding: 45px 8%;}
	.aboutNav .con{ font-size: 16px;}
	.aboutNav .con .num{ font-size: 14px;}
	.advantage-nav-box{ right: 5%; margin-right: 0;}
	.advantage-img{ height: 400px;}
	.advantage-nav a{ font-size: 16px;}
	.advantage-con{ width: 68%;}
	.contact-dl dt .t{ font-size: 30px;}
	.w812{ width: 700px;}
	.imgShowDemo .txt{ top: auto; bottom: 50px; padding: 8px 0px; height: auto; line-height: 1.5; background-color: rgba(0,0,0,0.4); z-index: 100;}
	.imgShowDemo .img{ bottom: 0px; top: 0px;}
	.imgstools{ width: 100%;}
	.imgstools li,.overlayClose{ height: 50px; width: 50px;}
	.imgstools li .snumBox{ height: 50px; line-height: 55px; font-size: 14px;}
	.imgstools li.lastItem{ padding-left: 0; float: right;}
	.overlayClose i{ background-size: 30% auto;}
	.imgstools{ position: relative; left: auto; top: 0;}
	.imgstools .imgNext,.imgstools .imgPrev{ background-size: 50% auto;}
	.pro-img-List dd{ width: 31.33%;}
}
@media screen and (max-width:1024px){
	.transYT,.transYT2 { transform: translateY(0px); -webkit-transform: translateY(0px); transition: transform 0ms; -webkit-transition: transform 0ms; transition-timing-function: ease-out;  }
	.transXT,.transXT2{ transform: translateX(0px); -webkit-transform: translateX(0px); transition: transform 0ms; -webkit-transition: transform 0ms;}
	.transXT50 { transform: translateX(0px); -webkit-transform: translateX(0px); opacity: 1; visibility: visible; transition: transform 0ms,opacity 0s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 0ms,opacity 0s cubic-bezier(0.445, 0.145, 0.355, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
	.action.transYT,.action.transYT2 { transform: translateY(0px); -webkit-transform: translateY(0px); }
	.action.transXT,.action.transXT2 { transform: translateY(0px); -webkit-transform: translateY(0px); }
	.action.transXT50 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); }
	.inner,.pinner{ width: 90%;}
	
	
	.banner .slick-dots li a{ border-radius: 50%; width: 6px; height: 6px; margin: 0px auto; border: 2px solid rgba(0,0,0,0); background: none #fff;}
	.banner .slick-dots li.slick-active a{ border: 2px solid #fff; background:none transparent;}
	.banner .slick-arrow{ display: none !important;}
	.iboxT{ font-size: 22px;}
	.about-ibox .c{ width: 80%; font-size: 14px;}
	.jt-more{ background-size: auto 90%;}
	.brandIdea-ibox .jt-more,.brandStory-ibox .jt-more,.brandIdea-ibox:hover .jt-more,.brandStory-ibox:hover .jt-more,.product-ibox .jt-more,.product-ibox:hover .jt-more,.newIlist .jt-more,.newIlist dd:hover .jt-more{ width: 40px;}
	.brandIdea-ibox{ top: 15%;}
	.brandIdea-ibox .con{ padding: 50px 7% 40px;}
	.brandStory-ibox .con{ padding: 40px 7%;}
	.about-ibox .c{ font-size: 14px;}
	.fixedImg{ background-attachment: inherit; background-size: cover;}
	.advantage-imore i{ background-size: auto 50%; width: 40px;}
	.advantageBox .c{ font-weight: normal;}
	.proIbox{ padding-bottom: 100px;}
	.product-ibox .con{ padding: 40px 7%;}
	.newIbox{ padding-bottom: 80px;}
	.newIlist .c{ height: 62px; font-size: 14px;}
	.mapICon{ height: 462px;}
	.footI{ width: 90%; padding: 18px 5%; position: relative; left: auto; bottom: auto; float: none;}
	.footC{ width: 90%; padding: 18px 5%; float: none; text-align: left;}
	.footI .sharpbox2{ float: right;}
	.aboutNav{ width: 50%;}
	.aboutPage{ padding: 70px 0px;}
	.aboutimg{ position: relative; right: auto; bottom: auto;}
	.pageT{ font-size: 30px;}
	.pageI{ font-size: 16px;}
	.page-blueT .name,.page-whiteT .name{ font-size: 16px;}
	.ideaBox{ float: none; margin:0px auto; width: 60%; background-color: #fff;}
	.ideaPage{ padding: 70px 0px 200px;}
	.ideaBox article{ padding: 50px 8% 60px;}
	.storyPage{ padding: 290px 0 150px;}
	.historyDemo .hitem1 .year, .historyDemo .hitem3 .year { bottom: -30px; }
	.historyDemo .hitem2 .year, .historyDemo .hitem4 .year { top: -30px; }
	.historyDemo .hitem1, .historyDemo .hitem3{ width: 42%;}
	.historyDemo .hitem2, .historyDemo .hitem4{ width: 36%;}
	.historyDemo .hitem2{ left: 18%;}
	.historyDemo .hitem4{ left: 62%;}
	.historyDemo .slick-arrow{ width: 40px; height: 40px; margin-top: -20px; background-color: #fff; border-radius: 50%;}
	.historyDemo .slick-prev{ left: -40px; }
	.historyDemo .slick-next { right: -40px;}
	.historyDemo .slick-arrow i,.historyDemo .slick-arrow:hover i{ margin: 7px auto; width: 26px; height: 26px; background-size: cover;}
	.advantage-con{ width: 100%; padding: 60px 0px;}
	.advantage-top{ height: 0;}
	.advantage-nav-box{ width: 100%; position: relative !important; right: auto; top: auto;}
	.advantage-pibox{ padding: 40px 5% 0px; font-size: 24px;}
	.advantage-nav a{ padding: 15px 5%; height: auto;}
	.advantage-T{ font-weight: normal; font-size: 16px;}
	.advantage-img{ background-position: center center;}
	.newBanner .name{ font-size: 20px; line-height: 44px; height: 44px; margin-top: -22px;}
	.newDL dd{ background-color: #F9F9F9;}
	.newDL dd .bgf9 { display: none; }
	.newDL .item{ height: 193px;}
	.newDL .img{ width: 250px;}
	.newDL .con{ padding-left: 430px;}
	.newDL .t{ font-weight: normal; font-size: 18px; margin: 0px auto 10px; height: 54px;}
	.newDL .c{ margin-bottom: 20px;}
	.newPage{ padding-bottom: 0px;}
	.paging{ width: 100%;}
	.infoInner{ width: 80%;}
	.infoT,.infoI .t{ font-size: 18px;}
	.infoC{ margin: 35px auto 50px;}
	.contact-dl dt .t{ font-size: 24px;}
	.contact-dl .mico{ width: 30px; height: 30px;}
	.contact-dl .mt20{ padding-top: 4px;}
	.contact-box{ width: 50%; margin-left: 0%;}
	.message-box{ width: 55%;}
	.impressionPage .pageI ,.knowledgePage .pageI,.impressionBox,.knowledge-dl{ width: 80%; margin-left: auto; margin-right: auto;}
	.impressionBox dd .bg{ display: none;}
	.pageI .name{ background-size: 12px 12px; padding-left: 26px; display: inline-block; background-position: left 8px;}
	.knowledge-dt{ padding: 12px 40px 12px 26px;}
	.knowledge-dc{ padding: 30px 0px 40px;}
	.knowledge-down .ico{ background-size: 10px auto;}
	.knowledge-down .btn{ background-size: 14px auto;}
	.knowledge-down a{ height: 52px; line-height: 52px;}
	.knowledge-down .item{ padding: 0px 26px;}
	.addoico { right: 20px;}
	.pro-link-box{ width: 130px;}
	.pro-link-box .txt .ico{ width: 40px; height: 40px;}
	.pro-link-box .txt{ font-size: 16px;}
	.pro-actnum2{ left: 150px;}
	.w812{ width: 80%;}
	.pro-top{ height: 0;}
	.product-img dd{ width: 33.33%; margin-left: 0%;}
	.product-zmlist .zm{ font-size: 70px;}
	.product-zmlist .con{ margin:0px 0px 0px 55px;}
	.productNavBox{ width: 100%;}
	.productNav{ position: relative; top: 0px; height: 58px;}
	.productNav a{ padding: 10px 5%; font-size: 20px; width: 90%;}
	.productNav a .jt{ background-size: 100% auto;}
	.productNav a:hover .jt, .productNav a.active .jt{ top: 8px;}
	.mlogo{ float: none; margin-bottom: 15px; width: 120px;}
	.otex-ImgBox{ padding: 40px 0px 80px;}
	.otex-img-List dd{ width: 15.66%;}
	.otex-ImgBox-t{ font-size: 20px; padding: 30px 1% 5px;}
	.otex-img-List dd .bg{ display: none;}
	.otex-case-nav{ padding: 20px 1% 40px;}
	.otex-case-nav ul{ width: 100%;}
	.pro-img-List{ width: 100%;}
}
@media screen and (max-width:860px){
	.binbox{ width: 80%; margin-left: 0; left: 10%;}
	.about-ibox{ padding: 65px 0px;}
	.about-ibox .c{ margin-top: 30px;}
	.ideaBox article{ padding: 40px 5%;}
	.brandIdea-ibox .c{ margin: 20px auto 35px;}
	.brandIdea-ibox{ position: relative; top: auto; width: 90%; margin: 0px auto 35px;}
	.brandIdea-ibox .con{ background-color: #f5f3f3;}
	.brandStory-ibox{ float: none; width: 90%; margin: 0px auto 35px;}
	.advantageBox{ width: 81%; margin:0px auto 35px; padding: 90px 0px;}
	.advantageBox .img img{ width: 150px;}
	.advantageBox .c{ margin: 35px auto 20px;}
	.advantageBox .line{ display: inline-block;}
	.product-ibox{ position: relative; top: auto; width: 90%; margin: 0px auto 35px;}
	.product-ibox-img{ float: none; width: 90%; margin: 0px auto 35px;}
	.newIlist{ border-bottom: 1px solid #ccc; width: 90%; margin: 35px auto 0px;}
	.newIlist dd{ float: none; width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #fff;}
	.newIlist dd .con{ border-left: 0px none; padding: 38px 30px 42px 124px; min-height: 70px;}
	.newIlist dd .num,.newIlist dd .month{ width: 78px; position: absolute; left: 0px; top: 38px;}
	.newIlist dd .month{ top: 86px;}
	.newIlist dd .c{ font-size: 18px; height: auto; }
	.newIlist dd:last-child .con{ border-right: 0px none;}
	.newIlist .jt-more,.newIlist dd:hover .jt-more{ display: none;}
	.footI .con{ margin-right: 0;}
	.ideaBox{ width: 90%;}
	.historyDemo .item{ height: auto;}
	.stline{ top: 0px; left: 5%; width: 2px; height: 100%; margin-top: 0px;}
	.historyDemo .hitem1,.historyDemo .hitem2,.historyDemo .hitem3,.historyDemo .hitem4{ float: none; width: auto; position: relative; left: auto; top: auto; height: auto; padding-bottom: 25px;}
	.historyDemo .hitem1 .xian, .historyDemo .hitem2 .xian,.historyDemo .hitem3 .xian, .historyDemo .hitem4 .xian{ bottom: auto; top: 3px; height: 5px;}
	.historyDemo .dian,.historyDemo .hitem1 .dian, .historyDemo .hitem2 .dian{ top: 0px; bottom: 0px; left: -8px; background: none #64aa92; border: 3px solid #fff; border-radius: 50%; width: 10px; height: 10px;}
	.historyDemo .hitem2 .dian, .historyDemo .hitem4 .dian{ top: 0px;}
	.historyDemo .year{ position: relative; font-size: 24px; top: auto; line-height: 1.2; width: auto; display: block; margin:0px 0px 10px 36px; text-align: left;}
	.historyDemo .hitem1 .year, .historyDemo .hitem3 .year{ bottom: auto;}
	.historyDemo .hitem2 .year, .historyDemo .hitem4 .year{ top: auto;}
	.historyDemo .hitem1 .yg, .historyDemo .hitem3 .yg{ width: 30px; background: url(../images/yg2.png) no-repeat scroll left top; bottom: auto; top: 4px;}
	.historyDemo .hitem2 .yg, .historyDemo .hitem4 .yg{ width: 30px; top: 4px;}
	.historyDemo .con{ background-color: #fff; background-color: rgba(255,255,255,0.9); border-radius: 8px; padding: 15px; margin: 0px 0px 0px 36px; color: #333;}
	.historyDemo .hitem2 .c, .historyDemo .hitem4 .c{ position: relative; left: auto; bottom: auto;}
	.advantage-img{ height: auto;}
	.advantage-img .img{ display: block;}
	.newDL .item{ height: 154px;}
	.newDL .time{ width: 68px; padding: 15px 0px 10px;}
	.newDL .time .day{ font-size: 30px;}
	.newDL .img{ width: 200px; left: 96px;}
	.newDL .con{ padding-left: 330px;}
	.newDL .t{ margin-bottom: 20px;}
	.newDL .c{ display: none;}
	.contactPage{ padding: 80px 0px;}
	.contact-box{ float: none; width: 100%; margin-left: 0; margin-bottom: 25px;}
	.message-box{ width: 100%; position: relative; right: auto; top: auto;}
	.message-demo{ padding: 50px 5%;}
	.message-demo .mb{ margin-bottom: 20px;}
	.impressionBox dd{ width: 19%; margin-bottom: 8px;}
	.impressionPage .pageI ,.knowledgePage .pageI,.impressionBox,.knowledge-dl{ width: 90%;}
	.knowledge-dt{ font-size: 16px;}
	.product-zmlist dd{ float: none; width: 100%; margin:35px 0px 0px 0px; min-height: 0;}
	.product-zmlist dd:last-child{ margin-bottom: 0;}
	.otex-img-List dd{ width: 19%;}
	.otex-img-nav{ width: 98%;}
	.pro-img-List dd{ width: 48%;}
}
@media screen and (max-width:641px){
	.backTop.showme{ right: 0;}
	.navMobile{ padding: 60px 0px 35px;}
	.navMobile .itemA{line-height: 50px; height: 50px; font-size: 20px;}
	.binbox{ width: 90%; left: 5%;}
	.binbox .imgt img{ width: 150px;}
	.binbox .by{ font-size: 12px;}
	.sharpbox a{ width: 34px;height: 34px;}
	.iboxT{ font-size: 20px;}
	.about-ibox .c,.brandIdea-ibox,.brandStory-ibox,.product-ibox,.product-ibox-img{ width: 100%;}
	.brandIdea-ibox .con{ padding: 50px 5% 40px;}
	.brandStory-ibox .con{ padding: 35px 5%;}
	.brandIdea-ibox,.brandStory-ibox,.advantageBox,.product-ibox,.product-ibox-img{ margin-bottom: 20px;}
	.advantageBox{ width: 90%; padding: 70px 0px;}
	.advantageBox .img img{ width: 120px;}
	.newIbox{ padding-bottom: 54px;}
	.newIlist{ width: 100%;}
	.newIlist dd .con{ padding: 30px 24px 30px 90px; min-height: 50px;}
	.newIlist dd .num, .newIlist dd .month{ width: 66px;}
	.newIlist dd .num{ top: 30px; font-size: 30px;}
	.newIlist dd .month{ top: 62px;}
	.newIlist dd .c{ font-size: 16px;}
	.footI .con,.footI .sharpbox2{ float: none; display: block;}
	.pageT{ font-size: 22px;}
	.aboutNav{ width: 70%;}
	.aboutPage,.ideaPage{ padding: 50px 0px;}
	.aboutCL,.aboutCR{ float: none; margin-right: 0; width: 100%;}
	.ideaBox article{ padding: 40px 8%;}
	.ideaBox{ width: 100%;}
	.storyTbox{ top: 5%; width: 180px; height: 180px; margin:0px 0px 0px -90px;}
	.pageLogo img{ width: 60px;}
	.storyTbox .pageLogo{ padding: 18px 0px 10px;}
	.storyTbox .pageLogo{ height: auto;}
	.storyTbox .pageI{ margin-bottom: 0; line-height: 1.8; height: auto;}
	.storyTbox .pageT{ font-size: 20px;}
	.newBanner{ height: 240px;}
	.newPnav{ top: 0; width: 100%; margin-bottom: 25px;}
	.newPnav{  height: 44px; line-height: 44px;}
	.newPnav a{ font-size: 15px; width: 40%; padding: 0px 5%; text-indent: 0;}
	.newPnav a:hover .jt, .newPnav a.active .jt{ top: 4px; background-size: 100% auto; width: 12px;}
	.newDL dd{ padding: 25px 0px;}
	.newDL .item{ height: auto;}
	.newDL .time{ display: none;}
	.newDL .img{ float: left; display: block; margin-right: 5%; position: relative; left: auto; width: 30%;}
	.newDL .con{ float: left; display: block; padding-left: 0; width: 65%;}
	.newDL .t{ font-size: 16px; height: 48px;}

	.infoInner{ width: 90%;}
	.sharpbox3 a{ width: 34px; height: 34px;}
	.infoI .time{ padding: 10px 0px;}
	.infoI .numBox{ position: relative; right: auto; bottom: auto; margin-top: 8px;}
	.contact-dl dt .t{ font-size: 18px; font-weight: normal;}
	.contact-dl dt .time{ display: block;}
	.contact-dl .vertical-inner{ padding:15px 5%;}
	.contact-dl dt .vertical-inner{ padding: 25px 5% 15px;}
	.impressionBox dd{ width: 24%;}
	.impressionBox dd,.allBtn{ height: 120px;}
	.impressionBox dd .bg{ display: none;}
	.allBtn .yj{ width: 24px; height: 16px; margin-left: -12px; top: 20%;}
	.allBtn .txt{ top: 42%; background-size: 12px 12px;}
	.impressionPage .pageI ,.knowledgePage .pageI,.impressionBox,.knowledge-dl{ width: 100%;}
	.addoico{ top: 18px;}
	.knowledge-dt{ font-size: 14px;}
	.knowledge-down .btn{ display: none;}
	.advantage-con{ padding: 50px 0px;}
	.pro-link-box{ width: 100px;}
	.pro-link-box .txt .ico{ width: 30px; height: 30px;}
	.pro-link-box .txt{ font-size: 14px;}
	.pro-actnum2{ left: 120px;}
	.w812{ width: 100%;}
	.productNav a{ font-size: 18px;}
	.product-img dl{ width: 100%;}
	.product-img .name{ font-size: 14px; height: 40px; line-height: 40px;}
	.product-obox{ padding: 50px 0px;}
	.product-obox-green{ padding: 50px 0px 60px;}
	.mlogo{ margin: 0px auto 10px;}
	.product-timg dd,.product-timg2 dd{ width: 48%; margin:0px 1%;}
	.product-timg dd:nth-child(1), .product-timg dd:nth-child(2), .product-timg dd:nth-child(4){ padding-top: 0;}
	.product-timg2 dd:nth-child(odd){ padding-top: 0px;}
	.product-timg2 dd:nth-child(even){ padding-bottom:0px;}
	.otex-img-List dd{ width: 24%; height: 180px; margin: 25px 0 15px 1%;}
	.otex-ImgBox{ padding: 40px 0px 60px;}
	.otex-ImgBox-t{ font-size: 16px; padding: 25px 1% 5px;}
	/*.imgstools{ background: none transparent;}
	.imgstools li{ display: none;}
	.imgstools li.lastItem{ display: block;}
	.overlayClose{ position: fixed; z-index: 1000; background-color: #10664b;}*/
	.caseRedMore{ padding: 10px 5%;}
	.caseRedMore .jt-more{ left: 85%;}
	.otex-case-nav{ padding: 0px 1% 30px;}
	.otex-case-nav li{ font-size: 14px; height: 40px; line-height: 40px;}
	.otex-img-nav .mb{padding:0 50px 0px 15px; line-height:40px;}
	.otex-img-nav .mb .aw{ width:40px; }
	.otex-img-nav .mb .aw i{ display: block; width: 40px; background-size: 50% auto;}
	.otex-img-nav .b{top:40px;}
	.otex-img-nav a{ padding:0px 15px;}
	
}	
@media screen and (max-width:481px) {
	.newIT .line1{ margin-right: 35px;}
	.newIT .line2{ margin-left: 35px;}
	.newIbox-ico{ width: 60px; height: 60px; top: -30px; margin-left: -30px;}
	.smLink{ display: block;}
	.newDL .t{ font-size: 14px; height: 42px; margin-bottom: 5px;}
	.newBanner{ height: 200px;}
	.otex-img-List dd{ width: 32.33%; height: 160px;}
	.caseRedMore .jt-more{ left: 80%;}
}
@media screen and (max-width:421px) {
	.newIlist dd .num{ font-size: 30px;}
	.newIlist dd .c{ font-size: 14px;}
	.newIlist dd .con{ padding: 25px 15px 25px 65px;}
	.newIlist dd .num, .newIlist dd .month{ width: 50px;}
	.newIlist dd .num{ top: 25px;}
	.newIlist dd .month{ top: 50px;}
	.aboutNav{ width: 80%;}
	.aboutNav .con{ font-size: 14px;}
	.contact-dl .mico{ margin-bottom: 6px; float: none;}
	.pro-img-List dd{ width: 90%; margin: 25px 5% 0px; float: none;}
	.pro-img-List .con .name{ height: auto; line-height: 1.2;}
	.inner{ width: 96%;}
}
@media screen and (max-width: 375px) {
	.newBanner{ height: 180px;}
	.newBanner .name{ font-size: 18px; height: 40px; line-height: 40px; width: 180px; margin-left: -90px;}
}
@media screen and (max-width: 360px) {
	.navMobile{ padding: 50px 0px 35px;}
	.sharpbox a{ margin-left: 5px;}
	.advantageBox .c{ font-size: 14px;} 
	.newBanner{ height: 170px;}
	.impressionBox dd{ width: 32.33%;}
	.product-img .name{ font-size: 12px;}
	.caseRedMore .jt-more{ left: 78%;}
	.otex-case-nav li{ font-size: 12px;}
}
