@charset "gb2312";
/* CSS Document */
* { margin: 0; padding:0;} 
html {width:100%; height:100%; margin:0px; padding:0; font:16px/1.5 "Microsoft YaHei" , tahoma, arial, \5FAE\8F6F\96C5\9ED1, "Hiragino Sans GB", sans-serif;  -webkit-font-smoothing:antialiased;  background:url(../images/bj.jpg) center center no-repeat; background-size: cover;  background-attachment:fixed;}
body { width:100%; height:100%; }

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,em,i,b,span,fieldset,input,textarea,blockquote,img,button {border:0;  padding:0; margin:0; font-weight:normal; font-style:normal;} 
table,td,tr,th{font-size:12px;}
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
address,cite,code,th {font-weight:normal;font-style:normal;}
img:hover { opacity:1; filter: alpha(opacity=100); }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
.fl { float:left; }
.fr { float:right; }
a { color: #333; text-decoration: none; transition:all ease-out .4s 0s;-webkit-transition:all ease-out .4s 0s;}
a:hover{ color:#0f7d82; text-decoration:none; }
div,ul,li,h1,h2,h3,h4,h5,h6,dl,dd,dt,p,i,em,b,span,td,tr,a,strong,input,textarea,blockquote,img,button { box-sizing:border-box; -webkit-box-sizing:border-box; }


#main {	width: 100%;height:100vh;  overflow-y:hidden;overflow-x:hidden;}
.main0 { width: 42183px; background: url("../images/index.jpg") no-repeat center center; height: 100vh; position:relative;}
#footer { position: absolute; left: 10px; bottom: 30px; font-size: 12px;}
.shubiao  { position: absolute; right: 143px; bottom: 56px;}
.silk { position: absolute; width: 120%; left: -2%; top: 3%; transform: rotate(5deg);}


.arrows{width:60px;height:72px;position:absolute; right:70px;bottom:70px;transform: rotate(-90deg);}
.arrows path{stroke:#fff;fill:transparent;stroke-width:2px;animation:arrow 2s infinite;-webkit-animation:arrow 2s infinite}
@keyframes arrow{0%{opacity:0}
40%{opacity:1}
80%{opacity:0}
100%{opacity:0}
}
@-webkit-keyframes arrow{0%{opacity:0}
40%{opacity:1}
80%{opacity:0}
100%{opacity:0}
}
.arrows path.a1{animation-delay:-1s;-webkit-animation-delay:-1s}
.arrows path.a2{animation-delay:-0.5s;-webkit-animation-delay:-0.5s}
.arrows path.a3{animation-delay:0s;-webkit-animation-delay:0s}




.wrapper-scroll { -webkit-overflow-scrolling: touch;
                overflow-scrolling: touch;
                overflow: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

            }

            .content {
                width: -moz-max-content;
                width: -webkit-max-content;
                width: -o-max-content;
                width: -ms-max-content;
                width: max-content;
            }

        /* 容器样式 */
        .scroll-container {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            cursor: grab; /* 鼠标样式 */
        }

	.reel-left{
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	max-height: 970px;
	z-index: 999;
}

.reel-right{
	position: relative;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	max-height: 970px;
	margin-left: -5px;
	z-index: 990;
}

.reel-right i{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	right: 100%;
	background: url("http://www.dzwww.com/2021zthz/doctor/images/main/reel2-shadow.png");
	background-size: 100% 100%;
}

.reel-left2,.reel-right2{
	position: fixed;
	top: 0px;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	max-height: 970px;
	z-index: 9100;
}

.reel-left img,.reel-right img,.reel-left2 img,.reel-right2 img{
	height: 100%;
}

.reel-left2 img,.reel-right2 img{
	width: auto;
	max-width: none;
}

.reel-left2{
	right: 50%;
}

.reel-right2{
	left: 50%;
}
		
		
		/* 卷轴展开左 */
@-ms-keyframes reel1{
	from{  }
	to{ right: 100%; }
}
@-moz-keyframes reel1{
	from{  }
	to{ right: 100%; }
}
@-o-keyframes reel1{
	from{  }
	to{ right: 100%; }
}
@-webkit-keyframes reel1{
	from{  }
	to{ right: 100%; }
}
@keyframes reel1{
	from{  }
	to{ right: 100%; }
}

.reel-left2.open{
	animation:'reel1' 1.0s linear 0.5s forwards;
	-ms-animation:reel1 1.0s linear 0.5s forwards;
	-moz-animation:reel1 1.0s linear 0.5s forwards;
	-o-animation:'reel1' 1.0s linear 0.5s forwards;
	-webkit-animation:'reel1' 1.0s linear 0.5s forwards;
}

/* 卷轴展开右 */
@-ms-keyframes reel2{
	from{  }
	to{ left: 100%; }
}
@-moz-keyframes reel2{
	from{  }
	to{ left: 100%; }
}
@-o-keyframes reel2{
	from{  }
	to{ left: 100%; }
}
@-webkit-keyframes reel2{
	from{  }
	to{ left: 100%; }
}
@keyframes reel2{
	from{  }
	to{ left: 100%; }
}

.reel-right2.open{
	animation:'reel2' 1.0s linear 0.5s forwards;
	-ms-animation:reel2 1.0s linear 0.5s forwards;
	-moz-animation:reel2 1.0s linear 0.5s forwards;
	-o-animation:'reel2' 1.0s linear 0.5s forwards;
	-webkit-animation:'reel2' 1.0s linear 0.5s forwards;
}