*{margin:0px;padding:0px;}
button,input,select,textarea {font-family:"SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;color: #696777;-webkit-font-smoothing: antialiased;font-weight: 200;vertical-align: middle;font-size: 14px;}
body {font-family:"SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;-webkit-font-smoothing: antialiased;font-weight: 400;color: #696777;font-size: 14px;line-height:24px;letter-spacing: 1px;}
/*标签统一样式*/
article,aside,details,figcaption,figure,footer,header,nav,section {display: block;}
a {text-decoration: none;outline: none;cursor: pointer; color: #999;}
a:hover {text-decoration: underline;outline: 0;}
a:active {outline: 0;}
input{background:none;outline:0;}
button,input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button;outline:0;}
ol,ul,li {list-style: none;list-style-type: none;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: 500;}
textarea {resize: vertical;}
em{font-style: normal;}
img{border:none;margin: 0px; padding: 0px;}
.clear{zoom:1}
.clear:after{display:block;content:"";clear:both}
/*css统一样式*/
.left{float:left}
.right{float:right}
.po_re{position:relative}
.po_ab{position:absolute}
.center{text-align: center;}
.margin{margin: 0px auto;}
/*颜色*/
.red{color:#b61d1c!important}
.green{color:#009900!important}
.orange{color:#ff7800!important}
.blue{color: #5bbbff!important;}
.hui4{ color:#444;}
.hui2{ color:#222;}
.hui9{color: #999;}
.hui{ color: #a9afbe;}
.hui2{ line-height: 35px;}
.white{color: #fff!important;}
.color-black{color: #21212b}
.color-red{color: #ff6226;}
.color_a0a0ab{color: #a0a0ab!important;}
/*宽度*/
.wfull{width:100%}
.w1200{width: 1200px; margin: 0px auto;}
.w1000{width: 1000px; margin: 0px auto;}
.w930{width: 930px; margin: 0px auto;}
.font_14{font-size: 14px!important;}
.font_12{font-size: 12px!important;}
.mt_60{margin-top: 60px;}
.mt_30{margin-top: 30px;}
.mt_70{margin-top: 70px!important;}
.mt_110{margin-top: 110px;}
.ml_88{margin-left: 88px!important;}
.mb_0{margin-bottom:0px!important;}
.mb_60{margin-bottom:60px!important;}
.pt_15{padding-top: 15px;}
.pt_20{padding-top: 20px;}
.pt_30{padding-top: 30px;}
.pt_40{padding-top: 40px;}
.pt_60{padding-top: 60px;}
.pr_40{padding-right: 40px}
.pr_47{padding-right: 47px;}
.pr_55{padding-right: 55px;}
.pr_60{padding-right: 60px;}
.pr_65{padding-right: 65px;}
.pl_10{padding-left: 10px;}
.pl_50{padding-left: 50px;}
.pl_65{padding-left: 65px;}
.pl_70{padding-left: 70px;}
.pl_123{padding-left: 123px;}
.pl_138{padding-left: 138px;}
.pb_20{padding-bottom: 20px;}
.w500{width: 500px}
.w600{width: 600px}
/*font-size*/
.fz_10{font-size: 10px!important;}
.fz_12{font-size: 12px!important;}
.fz_13{font-size: 13px!important;}
.fz_14{font-size: 14px!important;}
.fz_15{font-size: 14px!important;}
.fz_16{font-size: 16px!important;}
.fz_18{font-size: 18px!important;}
.fz_20{font-size: 20px!important;}
.fz_21{font-size: 21px!important;}
.fz_22{font-size: 22px!important;}
.fz_24{font-size: 24px!important;}
.fz_44{font-size: 44px!important;}

.indx4{height: 660px; background: #f8f8f8;}
.index4_con{height: 262px; background: url("../images/index4_bg.png") center no-repeat; background-size:1920px;}
.index4_list{width: 323px; height: 262px;transition: all .4s ease-in-out 0s; float: left; cursor:pointer;left: 0px;top: 0px;}
.index4_list2{ left: 200px; top:0px;}
.index4_list3{ left: 403px; top:0px;}
.index4_list4{ left: 606px; top:0px;}
.index4_list .flip-box:first-child{display:none;background: url("../images/index4_3.png") no-repeat; background-size: 323px auto; width: 323px; height: 262px;padding-top: 146px;box-sizing: border-box;}
.index4_list .flip-box:last-child{background: url("../images/index4_1.png") no-repeat;width: 323px; background-size: 323px auto; height: 262px;padding-top: 146px;box-sizing: border-box;}
.index4_list2 .flip-box:first-child,.index4_list4 .flip-box:first-child{display:none;background: url("../images/index4_4.png") no-repeat;background-size: 323px auto;padding-top: 50px;}
.index4_list2 .flip-box:last-child,.index4_list4 .flip-box:last-child{display:none;background: url("../images/index4_2.png") no-repeat;background-size: 323px auto;padding-top: 50px;}
.index4_list h2{color:#682e00; font-size: 16px; margin-bottom: 10px;}
.index4_list .flip-box:first-child h2{ color: #680000;}
.index4_list p{ font-size: 12px; color: #fff; width: 100px; margin: 0px auto; line-height: 20px; text-align: left;}
.index4_list3 p{ width: 108px;}
.index4_list4 p{ width: 110px;}
.viewport-flip { -webkit-perspective: 1000;perspective: 1000;position: absolute;}
.flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0);
    backface-visibility: hidden;
    transform: translateX(0);
}
.flip.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 300ms;
    transform: rotateY(-90deg) scale(.9);
    animation-name: flipouttoleft;
    animation-duration: 300ms;
}
.flip.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 300ms;
    animation-name: flipintoright;
    animation-duration: 300ms;
}
.flip.out.reverse {
    -webkit-transform: rotateY(90deg) scale(.9);
    -webkit-animation-name: flipouttoright;
    transform: rotateY(90deg) scale(.9);
    animation-name: flipouttoright;
}
.flip.in.reverse {
    -webkit-animation-name: flipintoleft;
    animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}
.index5{height: 740px; background: #001027;}
.section1{position: absolute; top: 0px; height: 710px; overflow: hidden;}
.index5_con{width:100%;max-width: 700px; height: 443px;  background-size: 640px auto;}
.index5_con_all{width:100%;max-width: 590px; height: 443px; margin: 0px auto;background: url("../images/2eefa189dc7be47f.png") no-repeat center; z-index: 100; background-size: 590px auto;}
.index5_con_bg{width:100%;max-width: 700px; height: 443px; background-size: 640px auto; margin: 0px auto;
    opacity:0.7;filter:"alpha(opacity=70)";-ms-filter:"alpha(opacity=70)"; top: 0px; left: 0px;}
.index5_con_all{width:100%;max-width: 590px; height: 443px; margin: 0 auto;}
.index5_con_all  div{position: absolute; }
.index5_con_all  div span{cursor:pointer;display: inline-block; width: 30px; height: 30px; border: 1px solid #fff; float: left; box-sizing: border-box; padding: 7px;border-radius: 50%;}
.index5_con_all  div span em{display: block; width: 14px; height: 14px; background: #ff9e02;border-radius: 50%;}
.index5_con_all  div p{font-size: 16px; color: #ff9e00; line-height: 30px; float: left; margin-left: 7px;}
.index5_con_all  div.quan1{left: 0px; top: 111px;}
.index5_con_all  div.quan2{left: 186px; top: 35px;}
.index5_con_all  div.quan3{left: 137px; top: 92px;}
.index5_con_all  div.quan4{left: 149px; top: 178px;}
.index5_con_all  div.quan5{left: 55px; top: 238px;}
.index5_con_all  div.quan6{left: 60px; top: 400px;}
.index5_con_all  div.quan7{left: 414px; top: 0px;}
.index5_con_all  div.quan8{left: 333px; top: 113px;}
.index5_con_all  div.quan9{left: 505px; top: 133px;}
.index5_con_all  div.quan10{left: 440px; top: 258px;}
.index5_con_all  div.quan11{left: 362px; top: 377px;}
.index5_con_all  div:hover span{background: #fff;}
.index5_con_all  div:hover span::after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 1px 2px rgba(255,255,255,0.8);left:-15px; top:-15px;z-index: 3; opacity: 0; -webkit-animation: halo 0.8s 0s infinite ease-out; -moz-animation: halo 0.8s 0s infinite ease-out; animation: halo 0.8s 0s infinite ease-out; }
@-webkit-keyframes halo { 0% { opacity: 0;-webkit-transform: scale(0.1); }
    50% {opacity: 1; }
    100%{opacity: 0;-webkit-transform: scale(1.2); } }
@-moz-keyframes halo {0% { opacity: 0; -moz-transform: scale(0.1); }
    50% { opacity: 1; }
    100%{ opacity: 0; -moz-transform: scale(1.2); } }
@-ms-keyframes halo {0% { opacity: 0; }
    50% { opacity: 1; }
    100%{opacity: 0; } }
@-o-keyframes halo {0% { opacity: 0; -o-transform: scale(0.1); }
    50% {opacity: 1; }
    100%{ opacity: 0;-o-transform: scale(1.2); } }
@keyframes halo {0% { opacity: 0; transform: scale(0.1); }
    50% {opacity: 1; }
    100%{opacity: 0;transform: scale(1.2); } }
.index6{padding-bottom: 100px;}
.index6_con{border: 1px solid #f2f2f2; border: 1px solid #f2f2f2; border-bottom: none; border-right: none; display: table;}
.index6_con li{ float: left; width: 238px; height: 109px; border-bottom: 1px solid #f2f2f2; display: table-cell; overflow: hidden; border-right: 1px solid #f2f2f2;}
.index6_con li img{ width: 238px;transition: all .2s ease-in-out 0s;}
.index6_con li img:hover{ width: 260px;margin-left: -11px; margin-top: -5px;}
/*底部*/
footer{ height: 160px; background: #2c4052; padding-top: 35px; box-sizing: border-box;}
footer p{text-align: center; line-height: 40px; color: #fff; font-size: 12px;}
.foot_nav{color: #fff; text-align: center;}
.foot_nav a{color: #fff; margin: 0px 10px;}
.foot_time{font-size: 12px;  margin-top: 10px; color: #fff; width:100%;max-width:500px;}
.foot_time span{display: block; float: left;width:50%}
.foot_time em{ background: url("../images/3c2dc649f44ab51b.png") no-repeat center; background-size: 20px auto;}
.foot_time em.icon_foot1{display: inline-block; width: 17px; height: 17px; background-position: -1px 0px; float: left; margin:3px 8px;}
.foot_time em.icon_foot2{display: inline-block; width: 20px; height: 16px; background-position: 0px -17px; float: left; margin:3px 8px;}
.foot_right{position: fixed; bottom: 20px; right: 10px;z-index: 667;}
@media screen and (max-width: 1024px) {
	.foot_time span {display: block;float: left;width: 50%;}
	.index5_con_all  div.quan1{left: 0px; top: 111px;}
	.index5_con_all  div.quan2{left: 186px; top: 35px;}
	.index5_con_all  div.quan3{left: 137px; top: 92px;}
	.index5_con_all  div.quan4{left: 149px; top: 178px;}
	.index5_con_all  div.quan5{left: 55px; top: 238px;}
	.index5_con_all  div.quan6{left: 60px; top: 400px;}
	.index5_con_all  div.quan7{left: 414px; top: 0px;}
	.index5_con_all  div.quan8{left: 333px; top: 113px;}
	.index5_con_all  div.quan9{left: 505px; top: 133px;}
	.index5_con_all  div.quan10{left: 440px; top: 258px;}
	.index5_con_all  div.quan11{left: 362px; top: 377px;}
	.blete-portfolio-items .blete-portfolio-item{width:50%;height: 280px;position: relative;overflow: hidden;}
	#demo .topcn p:nth-child(1){font-size:2rem;}
	#demo .topcn p:nth-child(2){font-size:2rem;}
}
@media screen and (max-width: 767px) {
	.foot_time span {display: block;width:80%;margin:0 10%;}
	.index5_con_all  div.quan1{left: 0px; top: 111px;}
	.index5_con_all  div.quan2{left: 186px; top: 35px;}
	.index5_con_all  div.quan3{left: 137px; top: 92px;}
	.index5_con_all  div.quan4{left: 149px; top: 178px;}
	.index5_con_all  div.quan5{left: 55px; top: 238px;}
	.index5_con_all  div.quan6{left: 60px; top: 400px;}
	.index5_con_all  div.quan7{left: 414px; top: 0px;}
	.index5_con_all  div.quan8{left: 333px; top: 113px;}
	.index5_con_all  div.quan9{left: 505px; top: 133px;}
	.index5_con_all  div.quan10{left: 440px; top: 258px;}
	.index5_con_all  div.quan11{left: 362px; top: 377px;}
	.blete-portfolio-items .blete-portfolio-item{width:50%;height: 280px;position: relative;overflow: hidden;}
	#demo .topcn p:nth-child(1){font-size:2rem;}
	#demo .topcn p:nth-child(2){font-size:2rem;}
}
@media screen and (max-width: 640px) {
	.foot_time span {display: block;width:80%;margin:0 10%;}
	.index5_con_all  div.quan1{left: 0px; top: 111px;}
	.index5_con_all  div.quan2{left: 186px; top: 35px;}
	.index5_con_all  div.quan3{left: 137px; top: 92px;}
	.index5_con_all  div.quan4{left: 149px; top: 178px;}
	.index5_con_all  div.quan5{left: 55px; top: 238px;}
	.index5_con_all  div.quan6{left: 60px; top: 400px;}
	.index5_con_all  div.quan7{left: 414px; top: 0px;}
	.index5_con_all  div.quan8{left: 333px; top: 113px;}
	.index5_con_all  div.quan9{left: 505px; top: 133px;}
	.index5_con_all  div.quan10{left: 440px; top: 258px;}
	.index5_con_all  div.quan11{left: 362px; top: 377px;}
	.blete-portfolio-items .blete-portfolio-item{width:50%;height: 280px;position: relative;overflow: hidden;} 
	#demo .topcn p:nth-child(1){font-size:2rem;}
	#demo .topcn p:nth-child(2){font-size:2rem;}

}
@media screen and (max-width: 480px) {
	.foot_time span {display: block;width:80%;margin:0 10%;}
	.index5_con_all  div.quan1{left: 0px; top: 111px;}
	.index5_con_all  div.quan2{left: 151px; top: 35px;}
	.index5_con_all  div.quan3{left: 114px; top: 92px;}
	.index5_con_all  div.quan4{left: 121px; top: 178px;}
	.index5_con_all  div.quan5{left: 45px; top: 238px;}
	.index5_con_all  div.quan6{left: 49px; top: 400px;}
	.index5_con_all  div.quan7{left: 337px; top: 0px;}
	.index5_con_all  div.quan8{left: 271px; top: 113px;}
	.index5_con_all  div.quan9{left: 344px; top: 133px;}
	.index5_con_all  div.quan10{left: 338px; top: 258px;}
	.index5_con_all  div.quan11{left: 295px; top: 377px;}
	.blete-portfolio-items .blete-portfolio-item{width:100%;height: 280px;position: relative;overflow: hidden;}
	#demo .topcn p:nth-child(1){font-size:2rem;}
	#demo .topcn p:nth-child(2){font-size:2rem;}

}
@media screen and (max-width: 360px) {
	.foot_time span {display: block;width:80%;margin:0 10%;}
	.index5_con_all  div.quan1{left: 0px; top: 111px;}
	.index5_con_all  div.quan2{left: 113px; top: 35px;}
	.index5_con_all  div.quan3{left: 84px; top: 92px;}
	.index5_con_all  div.quan4{left: 91px; top: 178px;}
	.index5_con_all  div.quan5{left: 33px; top: 238px;}
	.index5_con_all  div.quan6{left: 37px; top: 400px;}
	.index5_con_all  div.quan7{left: 253px; top: 0px;}
	.index5_con_all  div.quan8{left: 203px; top: 113px;}
	.index5_con_all  div.quan9{left: 309px; top: 133px;}
	.index5_con_all  div.quan10{left: 268px; top: 258px;}
	.index5_con_all  div.quan11{left: 221px; top: 377px;}
	.blete-portfolio-items .blete-portfolio-item{width:100%;height: 280px;position: relative;overflow: hidden;}
	#demo .topcn p:nth-child(1){font-size:2rem;}
	#demo .topcn p:nth-child(2){font-size:2rem;}

}
@media screen and (max-width: 320px) {
	.foot_time span {display: block;width:80%;margin:0 10%;}
	.index5_con_all  div.quan1{left: 0px; top: 111px;}
	.index5_con_all  div.quan2{left: 101px; top: 35px;}
	.index5_con_all  div.quan3{left: 74px; top: 92px;}
	.index5_con_all  div.quan4{left: 81px; top: 178px;}
	.index5_con_all  div.quan5{left: 55px; top: 238px;}
	.index5_con_all  div.quan6{left: 31px; top: 400px;}
	.index5_con_all  div.quan7{left: 224px; top: 0px;}
	.index5_con_all  div.quan8{left: 180px; top: 113px;}
	.index5_con_all  div.quan9{left: 270px; top: 133px;}
	.index5_con_all  div.quan10{left: 239px; top: 258px;}
	.index5_con_all  div.quan11{left: 196px; top: 377px;}
	.blete-portfolio-items .blete-portfolio-item{width:100%;height: 280px;position: relative;overflow: hidden;}
	#demo .topcn p:nth-child(1){font-size:2rem;}
	#demo .topcn p:nth-child(2){font-size:2rem;}

}