.topNav{position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 70px; background-color: #fff; box-shadow: 0 3px 6px #ccc; overflow: hidden;}
.topNav .fl{padding-top: 1px;}
.topNav .logo{margin-top: 13px; vertical-align: middle;}
.topNav .txt{margin-top: 18px; vertical-align: middle; margin-left: 30px;}
.topNav .fr{padding-top: 20px;}
.topNav .fr a{display: block; float: left;}
.topNav .fr .li{font-size: 16px; color: #666; line-height: 30px; margin: 0 34px;}
.topNav .fr .li.on{color: #33beff;}
.topNav .fr .btn{font-size: 14px; color: #fff; line-height: 30px; margin-left: 10px; text-align: center; border-radius: 30px; background-color: #33beff;padding: 0 15px;}
.topNav .fr .btn .ico{display: inline-block; width: 10px; height: 14px; background:url(../images/ico01.png) no-repeat center; background-size: contain; margin-right: 4px; vertical-align: middle;margin-top: -2px;}

.fp-tableCell{vertical-align: unset;}
.section1 .fp-tableCell{background:url(../images/banner01.jpg) no-repeat center; background-size: cover;}
.section1 .pagewd{position: relative; height: 100%;}
.section1 .pic1{position: absolute; left: 50%; margin-left: -122px; top: 50%; transform: translate(0,-78%);}
.section1 .txt-box{position: absolute; left: 50%; margin-left: -32px; top: 50%; margin-top: 98px; font-size: 24px; color: #4f4f4f; line-height: 44px; width: 552px;}

.title-box{text-align: center;}
.title-box h2{font-size: 36px; line-height: 36px; color: #000; margin-top: 30px;}
.title-box h4{font-size: 18px; line-height: 18px; color: #666;}
.title-box hr{width: 52px; height: 2px; border: 0; display: inline-block;  margin: 24px 0 12px;
	background: -moz-linear-gradient(left,  #00409e 0%, #33bdfe 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00409e), color-stop(100%,#33bdfe));
	background: -webkit-linear-gradient(left,  #00409e 0%,#33bdfe 100%);
	background: -o-linear-gradient(left,  #00409e 0%,#33bdfe 100%);
	background: -ms-linear-gradient(left,  #00409e 0%,#33bdfe 100%);
	background: linear-gradient(to right,  #00409e 0%,#33bdfe 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00409e', endColorstr='#33bdfe',GradientType=0 );
}
.title-box.white h2,.title-box.white h4{color: #fff;}

.section2 .fp-tableCell{background:url(../images/ct1-bg.jpg) no-repeat center; background-size: cover;}
.section2 .title-box{padding-top: 60px;}
.section2 .list>ul{width: 1380px; padding-top: 150px;}
.section2 .list>ul>li{float: left; width: 398px; margin-right: 60px; height: 310px; background: #fff; box-shadow: 0 0 6px #ccc; border-radius: 10px; text-align: center; transition: all 0.4s;}
.section2 .list>ul>li:hover{transform: translate(0,6px);}
.section2 .list>ul>li img{margin-top: -72px; box-shadow: 0 0 8px #ccc; border-radius: 100%; transition: all 0.4s;}
.section2 .list>ul>li:hover img{transform: scale(1.1);}
.section2 .list>ul>li h3{font-size: 24px; line-height: 24px; color: #333; margin-top: 20px;}
.section2 .list>ul>li small{font-size: 13px; line-height: 24px; color: #ccc;}
.section2 .list>ul>li ul{overflow: hidden; padding: 36px 27px 0;}
.section2 .list>ul>li ul li{float: left; width: 74px; height: 88px; margin: 0 5px; border-radius: 5px; border: 1px solid #e5e5e5;}
.section2 .list>ul>li ul li .ico{display: inline-block; width: 18px; height: 18px; background:url() no-repeat center; background-size: contain; margin: 15px 0 6px;}
.section2 .list>ul>li ul li .ico1{background-image: url(../images/16.png);}
.section2 .list>ul>li ul li .ico2{background-image: url(../images/17.png);}
.section2 .list>ul>li ul li .ico3{background-image: url(../images/18.png);}
.section2 .list>ul>li ul li .ico4{background-image: url(../images/19.png);}
.section2 .list>ul>li ul li .ico5{background-image: url(../images/20.png);}
.section2 .list>ul>li ul li .ico6{background-image: url(../images/21.png);}
.section2 .list>ul>li ul li .ico7{background-image: url(../images/22.png);}
.section2 .list>ul>li ul li .ico8{background-image: url(../images/23.png);}
.section2 .list>ul>li ul li .ico9{background-image: url(../images/24.png);}
.section2 .list>ul>li ul li .ico10{background-image: url(../images/25.png);}
.section2 .list>ul>li ul li .ico11{background-image: url(../images/26.png);}
.section2 .list>ul>li ul li .ico12{background-image: url(../images/27.png);}
.section2 .list>ul>li ul li p{font-size: 14px; color: #999; line-height: 16px;}

.section3 .fp-tableCell{background:url(../images/ct2-bg.jpg) no-repeat center top; background-size: cover;}
.section3 .page2wd{position: relative; height: 100%;}
.section3 .title-box{padding-top: 60px;}
.section3 .list{position: absolute; right: -50px; top: 50%; transform: translate(0,-0%);}
.section3 .list li{text-align: center; position: relative; float: left; margin-left: 96px;}
.section3 .list li:after{content: '+'; position: absolute; right: -60px; top: 0px; font-size: 40px; color: #fff;}
.section3 .list li:last-child:after{display: none;}
.section3 .list li p{font-size: 30px; color: #fff; margin-top: 30px;}
.section3 .list li p big{font-size: 60px; font-weight: 600; padding-right: 12px; vertical-align: sub;}

.section4 .fp-tableCell{background:url() no-repeat center; background-size: cover; transition: all 0.4s ease-in-out;}
.section4[rel='bg1'] .fp-tableCell{background-image: url(../images/ct3-bg1.jpg);}
.section4[rel='bg2'] .fp-tableCell{background-image: url(../images/ct3-bg2.jpg);}
.section4[rel='bg3'] .fp-tableCell{background-image: url(../images/ct3-bg3.jpg);}
.section4[rel='bg4'] .fp-tableCell{background-image: url(../images/ct3-bg4.jpg);}
.section4[rel='bg5'] .fp-tableCell{background-image: url(../images/ct3-bg5.jpg);}
.section4[rel='bg6'] .fp-tableCell{background-image: url(../images/ct3-bg6.jpg);}
.section4[rel='bg7'] .fp-tableCell{background-image: url(../images/ct3-bg7.jpg);}
.section4 .page2wd{position: relative; height: 100%;}
.section4 .title-box{padding-top: 36px;}
.section4 .list{overflow: hidden; height: 568px; position: absolute; left: 0; right: 0; bottom: 0;}
.section4 .list .round1{border: 1px solid #fff; border-radius: 100%; width: 1150px; height: 1150px; position: absolute; left: 50%; top: 60px; transform: translate(-50%,0);}
.section4 .list .round2{border-radius: 100%; background: rgba(255,255,255,0.8); width: 736px; height: 736px; position: absolute; left: 50%; top: 236px; transform: translate(-50%,0);}
.section4 .list ul.li li{display: inline-block; width: 118px; height: 118px; border-radius: 100%; background-color: #fff; text-align: center; color: #33beff; position: absolute; cursor: pointer; transition: all 0.4s;}
.section4 .list ul.li li:hover,.section4 .list ul.li li.on{background-color: #33beff; color: #fff;}
.section4 .list ul.li li p{font-size: 19px; line-height: 19px;}
.section4 .list ul li .ico{display: inline-block; width: 44px; height: 44px; background:url() no-repeat center; background-size: contain; margin: 20px 0 6px;}
.section4 .list ul.li li:hover .ico,.section4 .list ul.li li.on .ico{
	-webkit-filter: grayscale(100%) brightness(200%);
    -moz-filter: grayscale(100%) brightness(200%);
    -ms-filter: grayscale(100%) brightness(200%);
    -o-filter: grayscale(100%) brightness(200%);
	filter: grayscale(100%) brightness(200%);
}
.section4 .list ul li .ico1{background-image: url(../images/31.png);}
.section4 .list ul li .ico2{background-image: url(../images/32.png);}
.section4 .list ul li .ico3{background-image: url(../images/33.png);}
.section4 .list ul li .ico4{background-image: url(../images/34.png);}
.section4 .list ul li .ico5{background-image: url(../images/35.png);}
.section4 .list ul li .ico6{background-image: url(../images/36.png);}
.section4 .list ul li .ico7{background-image: url(../images/37.png);}
.section4 .list ul.li li.height1{bottom: 60px;}
.section4 .list ul.li li.height2{bottom: 266px;}
.section4 .list ul.li li.height3{bottom: 400px;}
.section4 .list ul.li li.height4{top: 0px; left: 50%; transform: translate(-50%,0);}
.section4 .list ul.li li:nth-child(1){left: 57px;}
.section4 .list ul.li li:nth-child(7){right: 57px;}
.section4 .list ul.li li:nth-child(2){left: 180px;}
.section4 .list ul.li li:nth-child(6){right: 180px;}
.section4 .list ul.li li:nth-child(3){left: 356px;}
.section4 .list ul.li li:nth-child(5){right: 356px;}
.section4 .list ul.li-box li{text-align: center; display: none;}
.section4 .list ul.li-box li .ico{margin: 44px 0 12px; width: 48px; height: 48px;}
.section4 .list ul.li-box li h3{font-size: 36px; color: #33beff; font-weight: 600; line-height: 36px;}
.section4 .list ul.li-box li h4{font-size: 24px; color: #000; line-height: 24px; margin: 20px 0 28px;}
.section4 .list ul.li-box li p{font-size: 18px; color: #000; line-height: 30px;}

.section5{padding-top: 0 !important;}
.section5 .fp-tableCell{display: block !important;}
#footer{background-color: #f3f3f3; }
#footer .cont{padding: 54px 0 30px; overflow: hidden; }
#footer .cont .fl img{margin-bottom: 30px;}
#footer .cont .fl p{font-size: 16px; color: #666; line-height: 24px; margin-bottom: 10px;}
#footer .cont .fr{background-color: #fff; text-align: center; font-size: 11px; color: #000; padding-bottom: 8px;}
#footer .cont .fr img{display: block;}
#footer .copy{text-align: center; padding: 20px 0; border-top: 1px solid #ccc; font-size: 12px; color: #666;}

.codeFixed{position: fixed; z-index: 20; right: 30px; bottom: 200px; background-color: #fff; text-align: center; font-size: 11px; color: #000; padding-bottom: 8px; box-shadow: 0 4px 16px #6e6e6e; border: 1px solid #eee;}
.codeFixed img{display: block;}

#fp-nav ul li, .fp-slidesNav ul li{margin: 24px 7px; width: auto; height: auto;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{position: unset; top: auto; left: auto; display: block; width: 15px; height: 15px; border-radius: 100%; border: 0; background: rgba(255,255,255,0.8); box-shadow: 0 0 5px #999;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{background-color: #33BEFF;}

/** 公司简介 **/
.intro-cont{padding: 70px 0; overflow: hidden;}
.intro-cont .txt{width: 600px; padding-top: 10px;}
.intro-cont .txt h3{color: #33beff; font-size: 24px; line-height:30px; margin-bottom: 25px;}
.intro-cont .txt p{color: #333; font-size: 18px; line-height:30px;}
.certificateBox{background-color: #f9fafe; padding: 60px 0; overflow: hidden;}
.certificateBox h2{background-color: #f9fafe; font-size: 34px; line-height: 40px; text-align: center; margin-bottom: 58px;}
.certificateBox ul li{float: left; width: calc(25% - 25px); height: 303px; padding: 20px 20px 20px; background-color: #fff; margin-right: 25px; margin-bottom: 30px; text-align: center;box-sizing: border-box;}
.certificateBox ul li:last-child{margin-right: 0;}
.certificateBox ul li:hover{box-shadow: 0 5px 12px #eee;}
.certificateBox ul li img{max-width: 100%; height: auto; cursor: zoom-in;}
.certificateBox ul li p{color: #333; font-size: 14px; line-height:24px; margin-top: 20px;}
.certificateBox2 ul li{width: calc(20% - 25px); height: 215px;}
.certificateBox2 ul li img{height: 124px;}

/** 产品介绍 **/
.productIntro{padding: 40px 0;}
.productIntro h2{font-size: 24px; margin: 0 0 20px; line-height: 24px;}
.productIntro ul{width: 1350px;}
.productIntro li{float: left; width: 410px; height: 380px; padding: 10px; margin-right: 40px; margin-bottom: 40px; border-radius: 6px;	border: solid 1px #f1f1f1; box-sizing: border-box; text-align: center; position: relative; overflow: hidden; cursor: pointer; transition: all 0.4s ease-in-out;}
.productIntro li .pic{width: 100%;}
.productIntro li h3{font-size: 20px; line-height: 20px; margin: 30px 0 8px;}
.productIntro li p{font-size: 16px; color: #999; line-height: 24px;}
.productIntro li .code{width: 100%; background-color: #fff; position: absolute; left: 0; bottom: 0; padding: 28px 0; transform: translate(0,100%); transition: all 0.4s ease-in-out;}
.productIntro li:hover{box-shadow: 0 0 8px #E4E7ED; transform: translate(0,-10px);}
.productIntro li:hover .code{transform: translate(0,0);}
.productIntro li .code .txt{display: inline-block; margin-left: 20px; vertical-align: middle;}
.productIntro li .code .txt div{white-space: nowrap; font-size: 16px;}
.productIntro li .code img{width: 90px; height: 90px; vertical-align: middle;}

/** 加盟对话框 **/
.join-mask{position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 2px; width: 450px; z-index: 110;}
.join-mask .top{padding: 15px 20px; font-size: 16px; line-height: 20px; border-bottom: 1px solid #eee;}
.join-mask .middle{padding: 15px 20px;}
.join-mask .middle p{font-size: 14px; line-height: 24px;}
.join-mask form{display: block; margin: 20px auto; border: 1px solid #ccc; border-radius: 2px; padding: 0 20px;}
.join-mask form .pub_list{padding: 10px 0; border-bottom: 1px solid #eee;}
.join-mask form .pub_list:last-child{border-bottom: 0;}
.join-mask form .tit{font-size: 14px; line-height: 20px;}
.join-mask form .tit sup{font-size: 18px; color: #f30; margin-right: 4px;}
.join-mask form input,.join-mask form select{font-size: 14px; color: #333; height: 20px; border: 0; outline: 0; background: none; line-height: 20px; vertical-align: middle; width: 100%;}
.join-mask form #getCode{font-size: 14px; color: #fff; border:1px solid #33beff; background: #33beff; display: block; width: 90px; height: 30px; line-height: 30px; text-align: center;}
.join-mask form #getCode.disabled{background: #f7f7f7; border:1px solid #f7f7f7; color: #666;}
.join-mask .footer{text-align: center; margin: 0 0 30px;}
.join-mask .footer a{display: inline-block; width: 60px; line-height: 30px; font-size: 14px; border-radius: 2px; margin: 0 10px;}
.join-mask .footer a.btn1{color: #fff; background-color: #33beff;}
.join-mask .footer a.btn2{color: #fff; border: 1px solid #ccc; color: #666;}