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

.swiper-container { position:absolute; top:0; bottom:0; width:100%}





#d1 { position:absolute; top:0; bottom:0; width:100%; background:#22252a; color:#fff; text-align:center;}
.swiper-slide-active #d1 .slg h1{color:#fff; font-size:42px; opacity:1; animation:d1h1 1s 1;}
@keyframes d1h1{0%{margin-top:0; opacity:0;} 35%{margin-top:0; opacity:0;}}
.swiper-slide-active #d1 .slg h3{margin:15px 0; opacity:1; animation:d1h3 2s 1;}
@keyframes d1h3{0%{margin-top:50px; opacity:0;} 60%{margin-top:50px; opacity:0;}}
.swiper-slide-active #d1 .slg .link{ opacity:1; animation:d1a 2.5s 1;}
.swiper-slide-active #d1 .slg .layoutbtn{ opacity:1; margin-top:15px; animation:d1a 3s 1;background:#f80; border:0; color:#fff;padding:6px 20px;}
@keyframes d1a{0%{margin-top:25px; opacity:0;} 65%{margin-top:25px; opacity:0;}}
.swiper-slide-active #d1 .slg .link a{padding:0 15px; border-left:1px solid #fff;}
.swiper-slide-active #d1 .slg .link a:first-child{padding:0 15px; border-left:0;}
.swiper-slide-active #d1 .img1 {height:100%;position:absolute; top:0; margin:auto; left:0; right:0; bottom:0; color:#fff; opacity:1;animation:d1img1move 2s 1;}
@keyframes d1img1move {from{opacity:0;}}
.swiper-slide-active #d1 .container {position:relative; height:100%; text-align:left;}
#d1 .slg {position:absolute; top:0; margin:auto; left:0; right:0; bottom:0; height:162px;}
.swiper-slide-active #d1 .img2 {height:500px; position:absolute; margin:auto; top:0; bottom:0; right:0; opacity:1;animation:d1img1move 2s 1; }
@media(max-width:767px){
	.swiper-slide-active #d1 .container {text-align:center;}
	.swiper-slide-active #d1 .img2 {width:95%; height:auto; top:auto; bottom:15px; opacity:1;animation:d1img1move 2s 1; }
	#d1 .slg {top:80px; bottom:auto; height:auto;}
	.swiper-slide-active #d1 .slg h1{font-size:24px;}
	.swiper-slide-active #d1 .slg h3{font-size:16px;}
}

#d2 { position:absolute; top:0; bottom:0; padding-top:100px; width:100%; background:#fff url(../images/3dbg2.jpg) center; background-size:cover; text-align:center;}
.swiper-slide-active #d2 .d2-img {height:90%; display:inline-block; position:relative; padding:0;}
.swiper-slide-active #d2 .img1 {height:100%; color:#fff; opacity:1;animation:d1img1move 2s 1; }
.swiper-slide-active #d2 .left {position:absolute; text-align:right; padding:30px 30px 0 0; height:400px; margin:auto; top:0; bottom:0; left:-300px; width:300px; animation:d2l 3s 1;}
@keyframes d2l{0%{opacity:0; left:-400px;} 40%{opacity:0; left:-400px;}}
.swiper-slide-active #d2 .right {position:absolute; text-align:left; padding:30px 0 0 30px; height:400px; margin:auto; top:0; bottom:0; right:-300px; width:300px; animation:d2r 3s 1;}
@keyframes d2r{0%{opacity:0; right:-400px;} 40%{opacity:0; right:-400px;}}
.swiper-slide-active #d2 .ld div{height:80px; margin-bottom:60px;}
.swiper-slide-active #d2 .ld span{display:block; float:right; width:80px; height:80px; line-height:74px; text-align:center; border:2px solid #333; border-radius:500px; font-size:32px; margin-left:15px; position:relative; top:-10px;}
.swiper-slide-active #d2 .right span{float:left;margin-left:0; margin-right:15px;}
@media(max-width:767px){
	.swiper-slide-active #d2 .d2-img {height:100%; padding-top:45%; padding-bottom:5%; position:static;}
	.swiper-slide-active #d2 .left{top:50px; bottom:auto; left:0; width:50%; padding-right:7.5px; height:auto;}
	.swiper-slide-active #d2 .right{top:50px; bottom:auto; right:0; width:50%; padding-left:7.5px; height:auto;}
	.swiper-slide-active #d2 .ld div{height:auto; margin-bottom:30px;}
	.swiper-slide-active #d2 .ld span{width:40px; height:40px; line-height:40px; font-size:16px; margin-top:5px;}
	.swiper-slide-active #d2 .ld h3{font-size:16px;margin-bottom:5px;}
	.swiper-slide-active #d2 .ld h4{font-size:12px; color:#999; font-weight:normal;}
}

#d3 { position:absolute; top:0; bottom:0; padding-top:100px; width:100%; background:#22252a; color:#fff; text-align:center;}
#d3 img {position:absolute; height:60%;}
.swiper-slide-active #d3 .img1 {margin:auto; top:55%; bottom:45%; left:0; right:50%; animation:d3img1 4s 1;}
@keyframes d3img1{0%{left:0; right:0; opacity:0;} 30%{left:0; right:0; opacity:1;}}
.swiper-slide-active #d3 .img2 {margin:auto; top:55%; bottom:45%; left:50%; right:0; animation:d3img2 4s 1;}
@keyframes d3img2{0%{left:0; right:0; opacity:0;} 30%{left:0; right:0; opacity:0;}}
.swiper-slide-active #d3 i{display:block; position:absolute; margin:auto; top:55%; bottom:45%; left:0; right:0; opacity:0.8; animation:d3i 4s 1}
@keyframes d3i{0%{opacity:0;} 40%{opacity:0;}}
@media(max-width:767px){
	.swiper-slide-active #d3 h2{font-size:24px; padding:0 30px; line-height:1.5;}
	.swiper-slide-active #d3 h3{font-size:16px;}
	.swiper-slide-active #d3 i{display:none;}
	.swiper-slide-active #d3 .img1 {margin:auto; top:65%; bottom:35%; left:-100%; opacity:0; animation:md3img1 4s 1;}
	@keyframes md3img1{0%{left:0; right:0; opacity:0;} 40%{left:0; right:0; opacity:1;}}
	.swiper-slide-active #d3 .img2 {margin:auto; top:65%; bottom:35%; left:0; right:0; animation:md3img2 4s 1;}
	@keyframes md3img2{0%{left:0; right:0; opacity:0;} 40%{left:0; right:-100%; opacity:0;}}
}

#d4 { position:absolute; top:0; bottom:0; padding-top:100px; width:100%; background:#fff url(../images/3dbg3.jpg) center; background-size:cover;}
#d4 img {position:absolute; height:70%;}
.swiper-slide-active #d4 .img1 {margin:auto; top:0; bottom:0; left:40%; right:0; animation:d4img1 2s 1;}
@keyframes d4img1{from{top:55%; opacity:0;}}
#d4 .slg{width:500px; position:absolute; top:35%; margin:auto; left:0; right:30%; animation:d4slg 2.5s 1;}
@keyframes d4slg{0%{top:55%; opacity:0;} 30%{top:55%; opacity:0;}}
#d4 .slg h4{line-height:1.8; margin-top:15px;}
@media(max-width:767px){
	#d4 img {height:70%;}
	.swiper-slide-active #d4 .img1 {top:auto; bottom:5%; left:0; right:0; animation:md4img1 2s 1;}
	@keyframes md4img1{from{bottom:-10%; opacity:0;}}
	.swiper-slide-active #d4 .slg{text-align:center; width:100%; padding:15px; top:10%; bottom:0; animation:md4slg 2.5s 1;}
	@keyframes md4slg{0%{top:55%; opacity:0;} 30%{top:-5%; opacity:0;}}
	.swiper-slide-active #d4 h1{font-size:24px;}
	.swiper-slide-active #d4 h4{font-size:14px;}
}

#d5 { position:absolute; top:0; bottom:0; padding-top:100px; width:100%; background:#fff; text-align:center;}
#d5 img {position:absolute; height:70%;}
#d5 h4 {margin-top:15px; line-height:1.8;}
.swiper-slide-active #d5 .img1 {margin:auto; bottom:15px; left:0; right:0; animation:d5img1 2s 1;}
@keyframes d5img1{from{bottom:-80px;}}
@media(max-width:767px){
	#d5 img {width:100%; height:auto;}
	.swiper-slide-active #d5 .img1 {top:auto; bottom:5%; left:0; right:0; animation:md5img1 2s 1;}
	@keyframes md5img1{from{bottom:-10%; opacity:0;}}
	.swiper-slide-active #d5 .slg{text-align:center; width:100%; padding:15px; top:10%; bottom:0; animation:md5slg 2.5s 1;}
	@keyframes md5slg{0%{top:55%; opacity:0;} 30%{top:-5%; opacity:0;}}
	.swiper-slide-active #d5 h1{font-size:24px;}
	.swiper-slide-active #d5 h4{font-size:14px;}
}

#d6 {text-align:center; padding:50px 0; }
#d6 h4{line-height:1.8; margin-top:15px; margin-bottom:30px;}
#d6 .solli{border:1px solid #DBDBDD; border-left:0; padding:0;}
#d6 .solli:first-child{border-left:1px solid #DBDBDD;}
#d6 .litop{background-color:#EBEBEC; padding:25px;}
#d6 .litop img {width:30%;}
#d6 .litop h5{ font-size:18px; font-weight:bold;}
#d6 .litop span {color:#949a9e;}
#d6 .libottom { width:100%; background:#f5f5f5; padding:25px; text-align:left; line-height:1.8; text-overflow:ellipsis; overflow:hidden;}
#d6 em{color:#ea5504; font-size:24px; display:block; text-align:center; padding-top:15px;}