/* CSS Document */
@charset "utf-8";
*:focus {
	outline: none;
}
html, body {
	width: 100%;
	height: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fiedldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var, i {
	font-style: normal;
	font-weight: normal;
}
ol, ul, li {
	list-style: none;
}
html {
	font-size: 62.5%;
}
body {
	color: #bf3637;
	background: #c13737;
	background-attachment: fixed;
	background-size: 10.0rem auto;
	-webkit-overflow-scrolling: touch;
	-webkit-user-select: text;
	-moz-user-select: text;
	-o-user-select: text;
	user-select: text;
}
input, select, textarea, button {
	vertical-align: middle;
	-webkit-appearance: none;
  font-family: 'pinghei'; 
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
a, a:link {
	text-decoration: none;
	outline: none;
}
.hide{ display: none; }
.f18{ font-size: .18rem; }
.f20{ font-size: .2rem; }
.f22{ font-size: .22rem; }
.f24{ font-size: .24rem; }
.f26{ font-size: .26rem; }
@font-face { font-family: pinghei; src: url('../font/SourceHanSerifCN-Regular.otf');}
.wrap{ width: 100%; margin: 0 auto; position: relative; font-family: 'pinghei'; }
.con1{ padding-top: 7.4rem; height: 4.46rem; background: url(../img/index_01.jpg) center top no-repeat; background-size: auto 11.86rem; position: relative; }
.logo{ width: 1.59rem; height: .46rem; background: url(../img/logo.png) no-repeat; background-size: 100% auto; position: absolute; left: .2rem; top: .16rem; }
.navbar{ overflow: hidden; width: 7.35rem; margin: 0 auto; }
.navbar li{ width: 1.95rem; height: .86rem; padding: .27rem .25rem .15rem; background: url(../img/icon.png) -.17rem 0 no-repeat; background-size: 6rem 6rem; float: left; }
.navbar li a{ display: block; height: 100%; }
.navbar li.nav2{ background-position: -3.11rem 0; }
.navbar li.nav3{ background-position: -.17rem -3.14rem; }
.navbar li.nav1.on{ background-position: -3.11rem -3.14rem; }
.navbar li.nav2.on{ background-position: -.17rem -4.51rem; }
.navbar li.nav3.on{ background-position: -3.11rem -4.51rem; }
.con2{ padding-top: 1.4rem; height: 8.98rem; background: url(../img/index_02.jpg) center top no-repeat; background-size: auto 10.38rem; }
.video{ overflow: hidden; width: 8.38rem; margin: 0 auto 2.2rem; }
.video li{ width: 4.05rem; float: left; margin: 0 .07rem; text-align: center; color: #ffe0af; }
.video li a{ display: block; position: relative; height: 2.33rem; background: url(../img/vi1.png) 0 0 no-repeat; background-size: 4.05rem 4.66rem; }
.video li a:hover{ background-position: 0 -2.33rem; }
.play{ width: .81rem; height: .81rem; position: absolute; top: .65rem; left: 50%; margin-left: -.405rem; cursor: pointer;}
.play em{ display: block; width: .28rem; height: .35rem; background: url(../img/icon.png) -.91rem -2.22rem no-repeat; background-size: 6rem 6rem; position: absolute; z-index: 1; left: .31rem; top: .23rem; }
.play span{ display: block; width: .81rem; height: .81rem; position: absolute; left: 0; top: 0; background: url(../img/icon.png) 0 -2.22rem no-repeat; background-size: 6rem 6rem; -webkit-transition: -webkit-transform 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out; transition: transform 0.2s ease-out; animation: four_play 1s .1s linear infinite; -webkit-animation: four_play 1s .1s linear infinite; -moz-animation: four_play 1s .1s linear infinite; }
.play span.red{ background-position: -1.57rem -2.22rem; }
@keyframes four_play {
	from { 
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
	  }
	to {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg);
	 }
}
@-moz-keyframes four_play {
	from {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
	  }
	to {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg);
	  }
}
@-webkit-keyframes four_play {
	from {
      -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
	  }
	to {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg);
	  }
}
.video li a:hover span{ animation-play-state: paused; }
.video-name i{ display: inline-block; width: .16rem; height: .12rem; background: url(../img/icon.png) -1.26rem -2.22rem no-repeat; background-size: 6rem 6rem; vertical-align: middle; margin: -.03rem .08rem 0; }
.video-name i.ri{ background-position: -1.26rem -2.37rem; }
.video li.vi2 a{ background: url(../img/vi2.png) 0 0 no-repeat; background-size: 4.05rem 4.66rem; }
.video li.vi2 a:hover{ background-position: 0 -2.33rem; }
.intro{ width: 5.35rem; padding-right: 2rem; margin: 0 auto; line-height: .36rem; }
.intro p{ margin-bottom: .1rem; }
.con3{ padding-top: 1.7rem; height: 14rem; background: url(../img/index_03.jpg) center top no-repeat; background-size: auto 17.31rem; }
.mind{ width: 8.1rem; overflow: hidden; margin: 0 auto; height: 6.25rem; }
.mind li{ width: 3.65rem; float: left; padding: 0 .2rem; line-height: .34rem; color: #e84e4f; }
.mind li p{ color: #c01617; padding-bottom: .05rem; }
.hero{ width: 8.1rem; margin: 0 auto; overflow: hidden; }
.hero-nav{ overflow: hidden; padding: .15rem; width: .52rem; float: left; }
.hero-nav li{ width: .52rem; height: .86rem; position: relative; cursor: pointer; }
.hero-info{ overflow: hidden; width: 6.7rem; float: left; margin-left: .3rem; padding-top: .7rem; }
.hero-nav li img{ display: block; width: .52rem; -webkit-box-shadow: 0 0 .1rem 0 rgba(229,152,95,0.9); -moz-box-shadow: 0 0 .1rem 0 rgba(229,152,95,0.9); box-shadow: 0 0 .1rem 0 rgba(229,152,95,0.9); }
.hero-nav li p{ text-align: center; color: #bf3637; padding-top: .01rem; }
.hero-nav li.on::after{ position: absolute; display: block; content: ''; width: .58rem; height: .58rem; left: -.03rem; top: -.03rem; background: url(../img/border.png) -3.31rem -2.82rem no-repeat; background-size: 4.22rem 6.59rem; }
.hero-list li{ padding: 0 0 .05rem; }
.hero-img{ width: 4.12rem; height: 2.68rem; float: left; position: relative; margin-left: .05rem; margin-top: .1rem; }
.hero-img::after{ display: block; content: ''; width: 4.22rem; height: 2.75rem; background: url(../img/border.png) 0 0 no-repeat; background-size: 4.22rem 6.59rem; position: absolute; left: -.05rem; top: -.04rem;}
.hero-img img{ display: block; width: 100%; height: 100%; }
.hero-skill{ width: 2.35rem; float: right; line-height: .31rem; text-align:justify; text-justify:inter-ideograph; overflow:hidden; }
.hero-skill p{ border-bottom: 1px solid #f1c7b9; padding-bottom: .03rem; margin-bottom: .05rem; }
.footer{ margin: .7rem auto 0; padding-left: .65rem; width: 10.15rem; overflow: hidden; }
.footer-left{ width: 2.35rem; float: left; border-right: 1px solid #a66164; }
.footer-left img{ width: .43rem; margin-right: .1rem; }
.footer-right{ width: 7.12rem; margin-left: .15rem; font-size: .14rem; float: left; color: #ffbaba; }
.con4{ padding-top: 1.7rem; height: 8.65rem; background: url(../img/vip1.jpg) center top no-repeat; background-size: auto 10.35rem; }
.sys{ width: 6.78rem; margin: 0 auto; line-height: .36rem; color: #d6433d; }
.sys p{ margin-bottom: .1rem; }
.con5{ padding-top: 1rem; background: url(../img/vip2.jpg) center top no-repeat; background-size: auto 18.99rem; height: 17rem; }
.main{ width: 8.1rem; margin: 0 auto; color: #d3423d; }
.person1{ padding-left: 2.65rem; height: 3.51rem; position: relative; }
.skill-nav{ position: absolute; left: 2.65rem; bottom: .37rem; width: auto; padding: .03rem; z-index: 2; }
.skill-nav li{ width: .52rem; margin-right: .13rem; float: left; text-align: center; }
.skill-img{ width: 3.11rem; height: 2rem; float: left; position: relative; margin-left: .05rem; margin-top: .04rem; }
.skill-img::after{ display: block; content: ''; width: 3.19rem; height: 2.1rem; background: url(../img/border.png) 0 -2.8rem no-repeat; background-size: 4.22rem 6.59rem; position: absolute; left: -.04rem; top: -.04rem;}
.skill-img img{ display: block; width: 100%; height: 100%; }
.skill-text{ width: 2rem; float: right; line-height: .31rem; text-align:justify; text-justify:inter-ideograph; overflow:hidden; margin-right: .15rem; color: #bf3637; }
.skill-text p{ border-bottom: 1px solid #f1c7b9; padding-bottom: .03rem; margin-bottom: .05rem; }
.skill-intro{ height: 2.5rem; overflow: auto; padding-right: .08rem; }
.skill-intro::-webkit-scrollbar{ width: .05rem; height: 1px;}
.skill-intro::-webkit-scrollbar-thumb{ background: #e43637; width: .05rem; border-radius: .05rem;}
.skill-intro::-webkit-scrollbar-track{ background: #ddc899; width: .03rem; border: .01rem solid #f8efda; border-radius: .05rem;}
.person1 .play{ left: .65rem; top: .8rem; margin-left: 0; }
.person2{ margin-top: 1.6rem; position: relative; padding-left: .3rem; height: 4.93rem; }
.person2 .play{ left: 6.64rem; margin-left: 0; top: 2.22rem; }
.skin{ width: 2.6rem; }
.skin-title{ display: inline-block; background: #febf90; color: #e9483e; padding: .03rem .06rem; }
.skin-name{ font-weight: bold; color: #d0251f; padding: .07rem 0 .03rem; }
.skin-info{ line-height: .36rem; padding: .04rem 0; }
.skin-info.le{ line-height: .29rem; }
.person3{ padding-left: 5.27rem; height: 4.2rem; position: relative; }
.person3 .play{ left: .45rem; margin-left: 0; top: 2.52rem; }
.con6{ padding-top: 2.60rem; height: 15.33rem; background: url(../img/mode1.jpg) center top no-repeat; background-size: auto 17.93rem; }
.mode{ width: 9.24rem; margin: 0 auto;}
.mode img{ display: block; width: 2.62rem; height: 1.49rem; }
.mode li{ width: 2.62rem; height: 1.49rem; float: left; position: relative;}
.mode li.mo2{ margin-left: 4rem; }
.mode li::after{ display: block; content: ''; width: 2.67rem; height: 1.54rem; background: url(../img/border.png) 0 -4.95rem no-repeat; background-size: 4.22rem 6.59rem; position: absolute; left: -.03rem; top: -.02rem; }
.con7{ padding-top: .85rem; height: 17.36rem; background: url(../img/mode2.jpg) center top no-repeat; background-size: auto 19.21rem; }
.add{ width: 7.92rem; margin: 0 auto; position: relative; }
.add:after{ display: block; content: ''; width: 7.67rem; height: .8rem; background: url(../img/fade.png) no-repeat; background-size: 100% auto; position: absolute; bottom: 0; left: .16rem; }
.add:before{ display: block; content: ''; width: .73rem; height: 1.9rem; background: url(../img/border.png) -3.5rem -3.51rem no-repeat; background-size: 4.22rem 6.59rem; position: absolute; bottom: -.04rem; right: .07rem; }
.add-all{ width: 7.66rem; overflow: auto; height: 8.3rem; color: #c13738; }
.add-all::-webkit-scrollbar{ width: .05rem; height: 1px;}
.add-all::-webkit-scrollbar-thumb{ background: #ff4d34; width: .05rem; border-radius: .05rem;}
.add-all::-webkit-scrollbar-track{ background: #d3a75b; width: .03rem; border: .01rem solid #ffe3a8; border-radius: .05rem;}
.add-list{ overflow: hidden; margin-left: .19rem; padding-bottom: .5rem; }
.add-list li{ width: 7.25rem; }
.add-top{ padding: .17rem .38rem .12rem .42rem; background: url(../img/li.png) 0 0 no-repeat; background-size: 7.25rem 3.5rem; overflow: hidden; min-height: 1.45rem; }
.add-bottom{ height: .24rem; background: url(../img/li.png) 0 -3.26rem no-repeat; background-size: 7.25rem 3.5rem;}
.add-img{ width: 1.26rem; text-align: center; float: left; }
.add-img img{ width: .94rem; display: block; margin: 0 auto .06rem; }
.add-info{ width: 5rem; float: right; padding-top: .15rem; line-height: .28rem; }
.rule{ line-height: .32rem; color: #c43938; width: 7.36rem; margin: 2.47rem auto 0; height: 3.9rem; }
.fade{ position: fixed; top: 0%; left: 0%; background: black; z-index: 16; -moz-opacity: 0.85; opacity: .85; filter: alpha(opacity=85); width: 100%; height: 100%; display: none;}
.alert{ position: fixed; z-index: 17; display: none; left: 50%; top: 50%; width: 8rem;}
.video-info{ height: 4.5rem; background: #000; }
.alert-close{ width: .75rem; height: .75rem; background: url(../img/icon.png) -2.55rem -2.22rem no-repeat; background-size: 6rem 6rem; display: block; margin: .25rem auto; -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; -ms-transition: -ms-transform .3s ease-out; }
.alert-close:hover{ -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); transform: rotateZ(180deg);}
.sidebar{ position: fixed; right: 0; top: 2.1rem; width: 2.45rem; transform:scale(.8); -ms-transform:scale(.8); -moz-transform:scale(.8); -webkit-transform:scale(.8); -o-transform:scale(.8); transform-origin: right center; -ms-transform-origin: right center; -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; }
.sidebar li{ float: none; margin-bottom: -.1rem; }