@charset "utf-8";
/* CSS Document */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,table,strong,th,td,frameset,frame,iframe,span{padding:0px;margin:0px;border:none;}
ul,li{margin:0px; padding:0px; list-style-type:none}
img{ margin:0px; padding:0px; border:none; display:block}
p{margin:0px; padding:0px}
a:hover{ text-decoration:none;cursor:pointer;}
.fangda{transition:all .5s;webkitTransform:scale(1.08,1.08);
transform:scale(1.08,1.08);}

/* banner */
.banner{ width:100%; height:auto; background: url(../images/pic_01.jpg) center no-repeat; margin:0 auto; padding-top:798px;}
.container_box{ width:100%; height:auto; margin:0 auto;}
.container_box img{ width:100%; height:auto;}
.case-bg{ width:100%; height:auto;  background-color:#FFF; margin:0 auto; padding-bottom:500px;}
.bottom-bg{ width:100%; height:530px; background:url(../images/zxmr_bg.jpg) center no-repeat; float:left}
.dibu{ width:1200px; height:56px; margin:0 auto; margin-top:30%;}
.dibu:hover{ cursor:pointer}
.anli_div{ width:100%; height:auto; margin:0 auto; margin-top:6%;padding-bottom:13%;}
.stage {
    width:25%;
    height: auto;
    perspective: 1000px;
}
.flipBox {
    width: 100%;
    height: auto;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s;
}
.flipBox img{ width:100%; height:auto}
.pic {
    width:100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
	position:relative
}
.button_img{ width:50%; height:auto; margin:0 auto; position:absolute; left:25%; top:84%; }
.button_img img{ width:100%; height:auto}
.stage:hover .flipBox {
 transform: rotateY(-180deg); cursor:pointer}
#a1{ position:absolute; left:8%; top:0px;}
#a2{ position:absolute; left:37%; top:0px;}
#a3{ position:absolute; left:66%; top:0px;}
#a4{ position:absolute; left:8%; top:65%;}
#a5{ position:absolute; left:37%; top:65%;}
#a6{ position:absolute; left:66%; top:65%;}
.button_div{ width:13% ; height:auto; padding-top:3%; position:absolute; left:21%; top:55%;}
.button_div:hover{ cursor:pointer}
.button2_div{ width:16% ; height:auto; padding-top:3%; position:absolute; left:63%; top:55%;}
.button2_div:hover{ cursor:pointer}
.button3_div{ width:14% ; height:auto; padding-top:3%; position:absolute; left:20%; top:82%;}
.button3_div:hover{ cursor:pointer}
.button4_div{ width:14% ; height:auto; padding-top:3%; position:absolute; left:63%; top:82%;}
.button4_div:hover{ cursor:pointer}






/*手机端*/
.Mobile-container_wap{ width:100%; height:auto; margin:0 auto; display:none}
.Mobile-container_wap img{ width:100%; height:auto}
.button_wap{ width:33%; padding-top:8%; position:absolute; left:7%; top:29%; }
.button2_wap{ width:40%; padding-top:8%; position:absolute; left:52%; top:46%;}
.button3_wap{ width:33%; padding-top:8%; position:absolute; left:8%; top:64%;}
.button4_wap{ width:33%; padding-top:8%; position:absolute; left:56%; top:85%;}
.riji_wap{ width:33%; padding-top:9%; position:absolute; left:55%; top:32%;}
.riji2_wap {width:33%; padding-top:9%; position:absolute; left:13%; top:60%;}
.riji3_wap{width:33%; padding-top:9%; position:absolute; left:54%; top:89%;}
.ditu_wap{ width:28%; padding-top:8%; position:absolute; left:12%; top:78%;}
@media (max-width:630px){
.banner{ display:none}
.Mobile-container_wap{ display:block}
.container_box{ display:none}
.anli_div{ display:none}
.bottom-bg{ display:none}
	}