@charset "utf-8";
body input,
body select,
body{font-family: 'microsoft yahei'; font-size:.24rem; color: #000;}
body { -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow-x: hidden; }

*{ margin:0; padding:0; outline: none; border: 0;}
html { max-width: 640px; min-width: 320px; margin: 0 auto; height: auto; font-size: 50px; }
ul,ol,li{ list-style:none;}
a{ text-decoration:none;color:#000;} 
i, em{ font-style:normal;}
img{ border:none;vertical-align:top;}
input{ background:none; border:none; outline:none;}
select:focus{ outline: none;}
textarea{ outline:none; resize:none;}
.clearfix:after{content:""; display:block; clear:both;}
.clearfix{zoom:1;} 
table {border-collapse: collapse; border-spacing: 0; }
.fl{ float:left;}
.fr{ float:right;}
.pr { position:relative}
.pa { position:absolute}
.hidden{ display: none !important;}

.footer { background-color: #000; color: #b1b1b1;  line-height: .3rem; font-size: .18rem; text-align: center;  padding: .3rem; }
.footer a { color: #b1b1b1; }

.bg_auto { width: 100%; }
.img{ background-image: url(../images/img.png); background-size: 6.25rem 1.16rem; background-repeat: no-repeat; }
.m_body { width: 6.4rem; height: auto; margin: 0 auto; position: relative; overflow: hidden; }
.m_body .header{ width: 100%; height: .94rem; background:#590000; position: relative;}
.m_body .header .logo{ width: .82rem; height: .82rem; background: url(../images/logo.png) no-repeat; background-size: 100% 100%; position: absolute; top: .06rem; left: .23rem;}
.m_body .header p{ color: #fff; font-size: .23rem; line-height: .3rem; position: absolute; top: .16rem; left: 1.15rem;}
.m_body .header .btn{ width: 1.3rem; height: .54rem; line-height: .54rem; background: #dbb28c; text-align: center; color: #830000; position: absolute; top: .22rem; border-radius: .1rem;}
.m_body .header .btn_gw{ right: 1.53rem;}
.m_body .header .btn_lt{ right: .09rem;}

/*index*/
.index{ width: 6.4rem; height: 9.9rem; }
.index .down_btn{ display: block; position: absolute; top: 5.34rem; left: 2.12rem; width: 2.34rem; height: .9rem; text-indent: -99999rem; }
.index .nav{ position: absolute; top: 7.02rem; left: 0; width: 6.4rem; height: 1.86rem; }
.index .nav a{ float: left; width: .76rem; height: 1.86rem; margin: 0 .15rem; text-indent: -99999rem; }

.index .video_btn { position: absolute; left: 2.8rem; top: 2rem; z-index: 3; }
.index .video_btn em { background: url(../images/video_btn.png); background-size: .74rem .74rem; width: .74rem; height: .74rem;
display: inline-block; animation: arrow 2s infinite linear; -webkit-animation: arrow 2s infinite linear; }
@keyframes arrow {  0% {
transform: rotate(0) scale(1);
}
 50% {
transform: rotate(360deg) scale(1);
}
 100% {
transform: rotate(720deg) scale(1);
}
}
@-webkit-keyframes arrow {  0% {
transform: rotate(0) scale(1);
}
 50% {
transform: rotate(360deg) scale(1);
}
 100% {
transform: rotate(720deg) scale(1);
}
}
.index .video_btn i { position: absolute; left: .02rem; top: .02rem; display: inline-block; width: .7rem; height: .7rem; background-image: url(../images/video_btn_en.png); background-size: .7rem .7rem; }
/*navbar*/
.com_msg_moduleTop{ height: .7rem; text-align: center; background-image: url(../images/nav_bar.jpg); background-repeat: no-repeat; background-size: 6.4rem .7rem; }
.com_msg_moduleTop .swiper-container{ width: 5.6rem; margin:0; padding-right: .8rem;}
.com_msg_moduleTop .swiper-slide{width: 2rem !important;}
.com_msg_moduleTop .swiper-slide a{ height: .7rem; line-height: .7rem; box-sizing: border-box; margin: 0 .12rem; display: block; color: #ffab61; font-size: .24rem; }
.com_msg_moduleTop .swiper-slide.active a{ color: #f7e628;}
.com_msg_moduleTop:after{ content: ''; position: absolute; right: 0; top: 0; width: 1rem; height: 100%; z-index: 3;
	background: -webkit-linear-gradient(right, #803d3a, transparent);
	background: -webkit-gradient(linear, 100% 0, 0 0, from(#803d3a), to(transparent));
	background: linear-gradient(right, #803d3a, transparent);
}
/**/
.img{ background-image: url(../images/img.png); background-size: 4.8rem 1.96rem; }
.bg2{ position: relative; width: 6.4rem; height: 9.2rem; background-image: url(../images/bg2.jpg); background-size: 6.4rem 9.2rem; }
.bg2 .tabs{ }
.bg2 .tabs a{ position: absolute; display: block; width: 1.38rem; height: .96rem; padding-top: .42rem; background-position: 0 0;  font-size: .18rem; color: #fff; text-align: center; }
.bg2 .tabs a.active{ background-position: -1.45rem 0; color: #f7e628; }
.bg2 .tabs a.t1{ left: 4.68rem; top: 1.32rem; }
.bg2 .tabs a.t2{ left: 3.86rem; top: 2.18rem; }
.bg2 #tabs-container{ top: 3.7rem; left: .85rem; }
.bg2 .con_detail a{ display: block; float: left; width: 1.48rem; height: .74rem; padding-top: .9rem; margin: 0 .18rem .06rem 0; background-position: -2.88rem 0; text-align: center; font-size: .26rem; color: #fff000; font-weight: 600; }
.bg2 .con_detail a.pt6{ height: 1rem; padding-top: .64rem; }


.bg3{ position: relative; width: 6.4rem; height: 9.2rem; background-image: url(../images/bg3.jpg); background-size: 6.4rem 9.2rem; }
.bg3 h2{ width: 4.14rem; height: 1.29rem; padding-top: .36rem; margin:0 auto; }
.bg3 h2 img{ display: block; width: 4.14rem; height: 1.29rem; }
.bg3 .tabs{ width: 6.4rem; height: .52rem; margin-top: .18rem; text-align: center; }
.bg3 .tabs a{ display: inline-block; width: 1.42rem; height: .52rem; margin: 0 .26rem; line-height: .52rem; font-size: .24rem; text-align: center; background-position: -1.44rem -1.4rem; color: #f8ede1; }
.bg3 .tabs a.active{ background-position: -.01rem -1.4rem; }
.bg3 .con_detail{ padding: .4rem; font-size: .24rem; color: #6a1a1a; }
.bg3 .con_detail h3{ margin-top: .12rem; font-size: .24rem; color: #6a1a1a; }
.bg3 .con_detail p{ font-size: .24rem; color: #6a1a1a; text-indent: 2em; line-height: .4rem; }

/*pop*/
.popup{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 22222;}
.popup .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.85);}
.popup .popup_box{ position: absolute; top: 50%; left: 50%; width: 6.4rem;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.close{ display: block; width: .42rem; height: .42rem; background-position: -4.34rem 0; bottom: -1rem; left: 50%; margin-left: -.21rem; }

/*video*/
.popup_video { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 22222; }.popup { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 22222; }
.popup_video .bg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); }
.popup_video .popup_box { position: absolute; top: 50%; left: 50%; width: 6.4rem; text-align: center; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.popup_video video { width: 100%; }

.gifts_box{ width: 4.8rem; margin:auto; }
.gifts_box li{ float: left; width: 2.4rem; margin-bottom: .2rem; }
.gifts_box li img{ display: block; width: 2.02rem; height: 1.62rem; }
.gifts_box li p{ padding-left: .4rem; text-align: center; font-weight: 600; font-size: .24rem; color: #fff;  }
.gift_img{ width: 4.67rem; height: 6.25rem; margin:0 auto; }
.gift_img img{ display: block; width: 4.67rem; height: 6.25rem; }

/*loading*/
.loading { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background: #0d0d0d; }
.loading_all { width: 3.5rem; height: 1.5rem; overflow: hidden; position: absolute; top: 50%; left: 50%;  margin: -.75rem 0 0 -1.75rem;
}
.loading p { text-align: center; color: #fff;  font-size: .34rem;
}
.loading img:nth-child(1) { display: inline-block;  width: .8rem;
-moz-animation: question 2s linear infinite; -webkit-animation: question 2s linear infinite; animation: question 2s linear infinite; }
.loading img:nth-child(2) { display: inline-block; width: 2.6rem; }
@-moz-keyframes question {  0% {
 -moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 -moz-animation-timing-function: ease-out;
}
 20% {
 -moz-transform: perspective(400px) translate3d(0, 0, 60px) rotate3d(0, 1, 0, -190deg);
 -moz-animation-timing-function: ease-out;
}
 25% {
 -moz-transform: perspective(400px) translate3d(0, 0, 60px) rotate3d(0, 1, 0, -170deg);
 -moz-animation-timing-function: ease-in;
}
 40% {
 -moz-transform: perspective(400px) scale3d(.95, .95, .95);
 -moz-animation-timing-function: ease-in;
}
 50% {
 -moz-transform: perspective(400px);
 -moz-animation-timing-function: ease-in;
}
}
@-webkit-keyframes question {  0% {
 -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 -webkit-animation-timing-function: ease-out;
}
 20% {
 -webkit-transform: perspective(400px) translate3d(0, 0, 60px) rotate3d(0, 1, 0, -190deg);
 -webkit-animation-timing-function: ease-out;
}
 25% {
 -webkit-transform: perspective(400px) translate3d(0, 0, 60px) rotate3d(0, 1, 0, -170deg);
 -webkit-animation-timing-function: ease-in;
}
 40% {
 -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
 -webkit-animation-timing-function: ease-in;
}
 50% {
 -webkit-transform: perspective(400px);
 -webkit-animation-timing-function: ease-in;
}
}
@keyframes question {  0% {
 transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 animation-timing-function: ease-out;
}
 20% {
 transform: perspective(400px) translate3d(0, 0, 60px) rotate3d(0, 1, 0, -190deg);
 animation-timing-function: ease-out;
}
 25% {
 transform: perspective(400px) translate3d(0, 0, 60px) rotate3d(0, 1, 0, -170deg);
 animation-timing-function: ease-in;
}
 40% {
 transform: perspective(400px) scale3d(.95, .95, .95);
 animation-timing-function: ease-in;
}
 50% {
 transform: perspective(400px);
 animation-timing-function: ease-in;
}
}
.loadingDot { min-width: 2px; min-height: 2px; display: inline-block; box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; -webkit-animation: dot 2.4s infinite steps(1, start); -moz-animation: dot 2.4s infinite steps(1, start); animation: dot 2.4s infinite steps(1, start); }
@-webkit-keyframes dot {  25% {
 box-shadow: none;
}
 50% {
 box-shadow: 2px 0 currentColor;
}
 75% {
 box-shadow: 2px 0 currentColor, 6px 0 currentColor;
}
}
@keyframes dot {  25% {
 box-shadow: none;
}
 50% {
 box-shadow: 2px 0 currentColor;
}
 75% {
 box-shadow: 2px 0 currentColor, 6px 0 currentColor;
}
}
@-moz-keyframes dot {  25% {
 box-shadow: none;
}
 50% {
 box-shadow: 2px 0 currentColor;
}
 75% {
 box-shadow: 2px 0 currentColor, 6px 0 currentColor;
}
}