@charset "UTF-8";*{box-sizing:border-box}
body,html{padding:0;margin:0;min-height:100%}
html{-ms-overflow-style:scrollbar}
img{border:none;outline:0;max-width:100%}
a{cursor:pointer;text-decoration:none}
a:active{outline:0}
a:focus{-moz-outline-style:none;outline:0}
ul{list-style:none}
li,ul{padding:0;margin:0}
h1,h2,h3,h4,h5,p{padding:0;margin:0;font-weight:400}
h1 a:active,h1 a:focus,h1 a:hover,h1 a:link,h2 a:active,h2 a:focus,h2 a:hover,h2 a:link,h3 a:active,h3 a:focus,h3 a:hover,h3 a:link,h4 a:active,h4 a:focus,h4 a:hover,h4 a:link,h5 a:active,h5 a:focus,h5 a:hover,h5 a:link,p a:active,p a:focus,p a:hover,p a:link{text-decoration:none}
h2{font-size:26px}
h3{font-size:20px}
h4{font-size:16px}
ol{padding:0 0 0 20px}
ol li{list-style-type:decimal;list-style-position:outside}
.fl{float:left}
.fr{float:right}
.clearfix:after{content:"";display:block;clear:both}
.main{width:1000px;margin:0 auto}
.mr0{margin-right:0!important}
h2{text-align:center;font:700 40px/60px;color:#333}
.clearfix:after{content:"";display:table;clear:both;height:0}
body{font-family:"Microsoft YaHei","宋体";color:#0e1418;min-width:1200px;background-color:#fff}
.container{width:1200px;margin:0 auto; padding: 0; max-width: none;}
.container:after{content:"";display:table;clear:both;height:0}
.hide{display:none!important}
.show{display:block!important}


/*Header Of  Offcn*/
.headerbar{background:#ffffff;width:100%;height:70px;min-width:1200px;}
.header{width:1200px;height:70px;margin:0 auto;}
.header .offcn_logo{padding-top:8px;float:left;}
.header .header_nav{float:left;padding-left:20px;padding-top:5px; height: 70px;}
.header .header_nav li{float:left;line-height:70px;width:90px;text-align:center;font-size:16px;}
.header .header_nav li a{color:#323232;}
.header .header_nav li:hover  a{color:#e60012;font-size:17px;}
.header .offcn_he_tel{float:right;line-height:65px;padding-top:4px;font-size:18px;font-family:'Arial','Microsoft Yahei';}

.banner{background:url(../images/bannerbg.jpg) no-repeat center top; }
.banner img{display:block;pointer-events: none}
.banner .container{position: relative;}
.banner .container img{
}
.banner .banTltBox{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 220px;}
.banner .banTltBox .title1{}
.banner .banTltBox .title2{margin-top: 60px}
.banner .banTltBox .shapeBox{position: absolute; top: 0; right: -76px; width: 710px; height: 100%;}
.banner .banTltBox .shapeBox .line{position: absolute; top: 50%; left: 50%; margin-left: -360px; margin-top: -345px; }
.banner .banTltBox .shapeBox .shape{position: absolute; top: 50%; left: 50%; margin-top: -170px; margin-left: -149px; animation: shapeRotate 30s linear infinite;}

@keyframes lineRotate{
	0%{transform: rotate(0)}
	100%{transform: rotate(360deg)}
}

@keyframes shapeRotate{
	0%{transform: rotate(0)}
	100%{transform: rotate(-360deg)}
}

.titleBox{ text-align: center }
.titleBox h2{color: #191594; font-size: 50px; letter-spacing: 2px;}
.titleBox p{position: relative; font-size: 18px; margin-top: 20px; letter-spacing: 5px; color: #333; text-transform: uppercase}
.titleBox p span{position: relative; display: inline-block; padding: 5px 20px; background-color: #191594; color: #fff; z-index: 2;}
.titleBox p:after{content:""; position: absolute; top: 50%; height: 1px; width: 1920px; left: 50%; margin-left: -960px; background-color: #191594; z-index: 0;}

.zg_con01{padding: 30px 0; overflow: hidden}
.wrapper{margin-top: 50px;}

.step1{position: absolute; left: -9999px; }
.step1.active{position: relative; left: auto; }
.step1 form{position: relative;width: 530px;height: 40px; margin: 0 auto;}
.step1 #inputImage{position: absolute;cursor: pointer;left: 0;top: 0;width: 426px;height: 38px;line-height: 38px;opacity: 0;filter: alpha(opacity:0);}
.step1 .btn {width: 74px;margin-right: 10px;}
.step1 .shc {background: #fe625f;cursor: pointer;width: 80px;border: none;color: #fff;vertical-align: middle;font-size: 16px;}
.step1 .ipt_text {width: 344px;height: 38px;line-height: 24px;margin-right: 4px;background: #fbfbfb;border: 1px solid #b5b5b5;vertical-align: middle;}


.step2{position: absolute; left: -9999px;  padding: 0 100px;}
.step2.active{position: relative; left: auto; }
.step2:after{content:""; display: table; clear: both;}
.step2 #clipArea{ float: left; width: 300px; }
.step2 #clipArea img{display: block; max-width: 100%}
.step2 .sizeBox{ float: left; width: calc(100% - 300px); padding-top: 20px; padding-left: 30px;}
.step2 .sizeBox h3{font-size: 18px;}
.step2 .sizeBox label{display: block; float: left; width: 20%; font-size: 14px; margin-top: 15px;}
.step2 .sizeBox label input{margin-right: 10px;}
.step2 .btns{height: 40px; margin-top: 50px;}
.step2 .btn{margin-right: 40px;width: 100px;}

.preview{ margin-bottom: 20px; overflow: hidden; background-color: #eee;}

.modal-body img{display: block; margin: 0 auto;}


.inp{display: block; width: 100%; height: 40px;}
.form-group{position: relative; }
.form-group .yzm_btn{position: absolute; right: 0; bottom: 0; line-height: 38px; padding: 0 10px; color: #333}
.form-group label{width: 30%; /*text-align: right;*/ float: left;}
.form-group input{}


.sms{font-size: 18px;line-height: 35px;padding: 25px 100px;}

.tabBox{width:1200px;}
.tabBox .tabTlt{border: 1px solid #eaeaea;}
.tabBox .tabTlt:after{content:""; display: table; clear: both;}
.tabBox .tabTlt li{float: left; width: 33.333%; height: 50px; line-height: 50px; font-size: 18px; background-color: #f8f8f8; text-align: center; cursor: pointer;}
.tabBox .tabTlt li.active{background-color: #191594; color: #fff;}
.tabBox .tabTlt li + li{border-left: 1px solid #eaeaea;}
.tabBox .con{display: none; padding: 15px 25px; border: 1px solid #eaeaea; border-top: none;}
.tabBox .con.active{display: block;}
.tabBox .con p{font-size: 16px; line-height: 32px; color: #5e5e5e}
.tabBox .con .table{width: 100%; border-collapse: collapse}
.tabBox .con .table th{font-size: 16px;}
.tabBox .con .table td{font-size: 16px;}
.tabBox .con .table td:nth-child(even){}



/*右侧浮窗*/


.dbgg{width: 1000px;margin: 0px 0px 25px auto; float: left; margin-left: 102px;}
.dbgg li{width: 260px; height: 260px; float: left;margin: 0px 0px 0px 52px; border: 1px solid #EEEEEE;text-align: center;}
.dbgg li img{width: 260px; height: 258px;}
.dbgg li p{font-weight: bold; line-height: 50px; font-size: 18px;}
.bktj{width: 100%; text-align: center; line-height: 85px; font-size: 24px; font-weight: bold;}

.floatLeftItem{position: fixed; left: 15px; top: 60%; width: 152px; height: 289px; padding: 35px 8px 0; margin-top: -286px; background:url(../images/floatLeftItem.png) no-repeat center; text-align: center; color: #fff; transition: 1s;}
.floatLeftItem h3{font-size: 24px; margin-bottom: 8px; font-weight: bold;}
.floatLeftItem li+li{margin-top: 12px;}
.floatLeftItem li a{display: block;padding: 2px 0;color: #fff; font-size: 13px; line-height: 24px; border: 1px solid #fff; transition: .3s;}
.floatLeftItem li a:hover{border-color: transparent; background-size: 100%;}
.floatLeftItem a.close1{position: absolute; bottom: 35px; left: 50%; width: 24px; height: 24px;margin-left: -12px;}
.leftShow{position: fixed; left: -60px; top: 50%; width: 60px; height: 60px; letter-spacing: 3px; padding: 8px; font-size: 18px; font-weight: bold;  color: #fff; cursor: pointer; transition: 1s;}
.leftShow.show{left: 0;}


.zg_bt{ width: 772px; height:82px; padding: 15px 0 18px 348px; font-size: 52px; color: #000; font-family: 'Microsoft Yahei'; text-align: left; font-weight: bold;}
.zg_m4{ width: 1200px; height: auto; margin: 0 auto 105px;padding-top: 30px;}
.zg_m4c{ width: 1200px; height: 535px; clear: both; padding-top: 80px;}
.zg_m4cl{ width: 602px; height: 532px; border: 1px solid #ebebeb; float: left; margin: 0 20px 0 6px; border-radius: 5px;}
.zg_m4clbt{ width: 193px; height: 45px; background: #b90620; border-radius: 20px; text-align: center; line-height: 45px; margin: 0 auto 22px; position: relative; top: -17px; font-size: 26px; color: #fff; font-family: 'Microsoft Yahei'; font-weight: normal;}
.zg_m4lu{ width: 100%; height: auto; overflow: hidden;}
.zg_m4lu li{ width: 276px; height: 194px; float: left; margin: 0 12px 36px; }
.zg_m4lu li:hover{box-shadow: 0px 0px 5px 1px #D9D7D7; border-radius:10px;}
.zg_m4lu li:hover{transition: 1s;transform: translateY(-5px);}
.zg_m4lu li a{ display: block ; width: 100%; height: 100%;position: relative;}
.zg_m4lu li img{ display: block; width: 276px; height: 194px; position: absolute; left: 0; top: 0;}
.zg_m4lu li i{ display: block; width: 100%; height: 30px; background: #333; position: absolute; left: 0; bottom: 0; opacity: .3;filter:alpha(opacity=30); z-index: 1; }
.zg_m4lu li p{ width: 100%; height: 30px; font-size: 18px; color: #fff; font-family: 'Microsoft Yahei'; line-height: 30px; text-align: center; position: absolute; left: 0; bottom: 0; z-index: 2;}
.zg_m4cr{ width: 567px; height: 532px;border: 1px solid #ebebeb; float: left; border-radius: 5px;}
.zg_m4ru{ width: 100%; height: auto; overflow: hidden;}
.zg_m4ru li{ width: 254px; height: 204px; margin: 0 14px 20px; float: left;}
.zg_m4ru li:hover{box-shadow: 0px 0px 5px 1px #D9D7D7; border-radius:10px;}
.zg_m4ru li:hover{transition: 1s;transform: translateY(-5px);}
.zg_m4ru li a,.zg_m4ru li img{ display:block; width: 254px; height: 204px;}
.floatLeft{position: fixed; left: 20px; top: 20%; width: 133px; height: 410px; padding-top: 135px; background: url(../images/flBg.png) center no-repeat; z-index: 100;}
.floatLeft li{line-height: 42px; text-align: center; font-size: 16px; color: #fff; cursor: pointer;}
.floatLeft .close{position: absolute; top: 0; right: 0;}
.openwindow{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10000; background: url(../images/openwindow.jpg) top left no-repeat;background-size: cover}
.squer{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0, 0); transition: .8s; background-color: #fff; }
.squer2{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0, 0); transition: .8s; background-color: #fff; transition-delay: .1s}
/* .squer3{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0, 0); transition: 1s; background-color: #fff;  transition-delay: .4s} */
.openwindow.active .squer,.openwindow.active .squer2,.openwindow.active .squer3{transform: scale(1, 1); background-color: transparent;}
body.static{overflow: hidden;}


/* nav_left */
.nav_left{
  width: 144px;
  height:364px;
  background: url(../images/zixun.png) no-repeat center center;
  position:fixed;
  left:-10px;
  top: 50%;
  margin-top:-182px;
}
.nav_left.active{
  display: none;
}
.left_close{
  width: 20px;
  height:20px;
  display: block;
  position: absolute;
  right:4px;
  top:-20px;
  cursor: pointer;
}
.nav_left ul{
  padding:43px 0 0 32px;
}
.nav_left ul li{
  font-size:16px;
  color: #fff;
  line-height: 39px;
  cursor: pointer;
}
.nav_left ul li.item01{
  height:42px;
}
.nav_left ul li a{
  color: #fff;
}
.nav_left ul li a:hover{
  color: #ffd802;
  font-weight:bold;
}
.go_top{
  width: 115px;
  height: 39px;
  margin:29px auto 0;
  cursor:pointer;
}