﻿.slide-main { height: 700px; position: relative; }
.prev, .next { display: block; width: 44px; height: 44px; position: absolute; z-index: 222; top: 308px; overflow: hidden; cursor: pointer; opacity: 0.6; -moz-opacity: 0.6; filter: alpha(opacity=60); _border: 1px solid none; }
.prev { left: 80px; }
.next { right: 80px; }
.prev:hover, .next:hover, .nav-main a:hover, .nav-main a.cur { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }
.item { display: block; width: 100%; height: 5px; position: absolute; z-index: 124; top: 660px; left: 0; text-align: center; }
.item a { display: inline-block; width: 24px; height: 5px; margin-right: 11px; background: #303192; opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); overflow: hidden; }
.item a.cur { background: #eee; }
.slide-box, .slide { display: block; width: 100%; height: 700px; overflow: hidden; }
.slide-box { position: relative; }
#bgstylea { background: #ff6900; }
#bgstyleb { background: #193d85; }
#bgstylec { background: #000; }
.slide { background-repeat: no-repeat; background-position: center center; }
.slide a { display: block; width: 100%; height: 490px; cursor: pointer; }
.obj-a, .obj-b, .obj-c, .obj-d, .obj-e, .obj-f { position: absolute; z-index: 9; left: 50%; }
.obj-a, .obj-b { width: 952px; margin-left: -476px; text-align: center; }
.obj-a { display: block; height: 352px; top: 100px; }
.obj-b { top: 406px; height: 100px; }
.obj-c { display: block; height: 582px; top: 0; margin-left: -540px; }
.obj-d { top: 228px; height: 164px; }
.obj-d p { display: block; padding-top: 20px; font-size: 16px; color: #fff; clear: both; }
.obj-e { width: 366px; height: 170px; margin-left: -460px; top: 223px; z-index: 12; }
.obj-f { width: 692px; height: 394px; top: 158px; margin-left: -180px; }
.banAnimate .obj-a { display: block; animation-name: baoAni; -webkit-animation: baoAni 0.4s linear 0s normal none; -moz-animation: baoAni 0.4s linear 0s normal none; animation: baoAni 0.4s linear 0s normal none; }
@-webkit-keyframes baoAni {
	from { opacity: 0; left: 60%; }
	to { opacity: 1; left: 50%; }
}
@-moz-keyframes baoAni {
	from { opacity: 0; left: 60%; }
	to { opacity: 1; left: 50%; }
}
@keyframes baoAni {
	from { opacity: 0; left: 60%; }
	to { opacity: 1; left: 50%; }
}
.banAnimate .obj-b { display: block; animation-name: saAni; -webkit-animation: saAni 0.4s linear 0s normal none; -moz-animation: saAni 0.4s linear 0s normal none; animation: saAni 0.4s linear 0s normal none; }
@-webkit-keyframes saAni {
	from { opacity: 0; -webkit-transform: scale(0, 0); }
	to { opacity: 1; -webkit-transform: scale(1, 1); }
}
@-moz-keyframes saAni {
	from { opacity: 0; -moz-transform: scale(0, 0); }
	to { opacity: 1; -moz-transform: scale(1, 1); }
}
@keyframes saAni {
	from { opacity: 0; transform: scale(0, 0); }
	to { opacity: 1; transform: scale(1, 1); }
}
.watch-code.code-show { display: block; animation-name: scode; -webkit-animation: scode 0.3s linear 0s normal none; -moz-animation: scode 0.3s linear 0s normal none; animation: scode 0.3s linear 0s normal none; }
@-webkit-keyframes scode {
	from { opacity: 0; -webkit-transform: scale(1, 0); transform-origin: left bottom; }
	to { opacity: 1; -webkit-transform: scale(1, 1); transform-origin: left bottom; }
}
@-moz-keyframes scode {
	from { opacity: 0; -moz-transform: scale(1, 0); transform-origin: left bottom; }
	to { opacity: 1; -moz-transform: scale(1, 1); transform-origin: bottom bottom; }
}
@keyframes scode {
	from { opacity: 0; transform: scale(1, 0); transform-origin: left bottom; }
	to { opacity: 1; transform: scale(1, 1); transform-origin: left bottom; }
}
.banAnimate .obj-c, .banAnimate .obj-e { display: block; animation-name: saAnic; -webkit-animation: saAnic 0.3s linear 0s normal none; -moz-animation: saAnic 0.3s linear 0s normal none; animation: saAnic 0.3s linear 0s normal none; }
@-webkit-keyframes saAnic {
	from { opacity: 0; left: 47%; }
	to { opacity: 1; left: 50%; }
}
@-moz-keyframes saAnic {
	from { opacity: 0; left: 47%; }
	to { opacity: 1; left: 50%; }
}
@keyframes saAnic {
	from { opacity: 0; left: 47%; }
	to { opacity: 1; left: 50%; }
}
.banAnimate .obj-d, .banAnimate .obj-f { display: block; animation-name: saAnid; -webkit-animation: saAnid 0.3s linear 0s normal none; -moz-animation: saAnid 0.3s linear 0s normal none; animation: saAnid 0.3s linear 0s normal none; }
@-webkit-keyframes saAnid {
	from { opacity: 0; left: 53%; }
	to { opacity: 1; left: 50%; }
}
@-moz-keyframes saAnid {
	from { opacity: 0; left: 53%; }
	to { opacity: 1; left: 50%; }
}
@keyframes saAnid {
	from { opacity: 0; left: 53%; }
	to { opacity: 1; left: 50%; }
}
.banner { height: 400px; background-position: top cenetr; background-repeat: no-repeat; -webkit-animation: banner_inside 2s ease 1 forwards; -moz-animation: banner_inside 2s ease 1 forwards; -o-animation: banner_inside 2s ease 1 forwards; animation: banner_inside 2s ease 1 forwards; }
@-webkit-keyframes banner_inside {
	from { -webkit-transform: translateZ(0) scale(1.2); transform: translateZ(0) scale(1.2); }
	to { -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); }
}
@-moz-keyframes banner_inside {
	from { -moz-transform: translateZ(0) scale(1.2); transform: translateZ(0) scale(1.2); }
	to { -moz-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); }
}
@-o-keyframes banner_inside {
	from { -o-transform: translateZ(0) scale(1.2); transform: translateZ(0) scale(1.2); }
	to { -o-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); }
}
@keyframes banner_inside {
	from { -webkit-transform: translateZ(0) scale(1.2); -moz-transform: translateZ(0) scale(1.2); -o-transform: translateZ(0) scale(1.2); transform: translateZ(0) scale(1.2); }
	to { -webkit-transform: translateZ(0) scale(1); -moz-transform: translateZ(0) scale(1); -o-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); }
}
.banner_h { height: 350px; }
.banner_txt1, .banner_txt2 { text-align: left; color: #fff; text-shadow: 1px 1px 5px #333; letter-spacing: 2px; padding-left: 50px; }
.banner_txt1 { font-size: 40px; font-weight: bold; }
.banner_txt2 { font-size: 20px; margin-top: 20px; }
.b2 { top: 140px; width: 1200px; left: 50%; margin-left: -600px; }
@media only screen and (max-width:1199px) {
	.banner_h { height: 220px; margin-top: 80px; }
	.slide-main { height: 220px; }
	.prev, .next { top: 90px; }
	.prev { left: 20px; }
	.next { right: 20px; }
	.slide-box, .slide { height: 220px; }
	.item { top: 190px; }
	.slide { background-size: auto 220px; }
	.banner { height: 220px; background-size: auto 320px; background-position: center center; }
	.banner_txt1, .banner_txt2 { text-align: center; color: #fff; text-shadow: 1px 1px 5px #333; letter-spacing: 1px; padding-left: 5%; }
	.banner_txt1 { font-size: 1.5rem; font-weight: bold; }
	.banner_txt2 { font-size: 0.9rem; margin-top: 2%; }
	.b2 { top: 38%; width: 100%; left: 0; margin-left: 0; }
}
@media only screen and (max-width:480px) {
	.banner_h { margin-top: 0px; }
	.banner { background-size: 100%; }
	.banner_txt1 { font-size: 28px; }
}