@charset "utf-8";

/*public*/
body {font-family:'HelvLight-Norma386e03af65e5c',"微软雅黑";}
input,textarea,select {outline:none}
a:hover {text-decoration: none; outline: none;}
a:focus {text-decoration: none; outline: none;}

.cl{clear:both;}
.mainbody, .subBody {width: 100%; margin: 0 auto;}
.subBody {padding-bottom: 120px;}
.wrapper {width: 1400px; margin: 0 auto;}
.box {width: 100%; margin: 0 auto; overflow: hidden;}
.box.gray {background: #eee;}


/********************* mainBody *********************/


/*header*/
.header {width: 100%; height: 122px; margin: 0 auto; background: #fff; overflow: hidden; position: relative; z-index: 1;}
.logo {float: left; width: 138px; height: 122px; margin: 0;}
.logo {background:url(../images/logo.png) no-repeat;}
.logo a {width: 100%; height: 100%; display: block;}
.nav {float: left; height: 100%; line-height: 100%; margin-left: 160px;}
.nav li {float: left;}
.nav li a {display:block; width: 110px; height: 122px; line-height: 140px; text-align:center; font-size:14px; font-weight:bold; color:#4f4c4c; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; transition: 0.5s all;}
.nav li a:hover, .nav li a.on, .nav li a:hover.on {color: #fff; background: none;}
.nav li a:before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.nav li a:hover:before, .nav li a.on:before {-webkit-transform: scaleY(1); transform: scaleY(1);}
.nav > li > a:hover, .nav > li > a:focus {background: none;}
#nav_1:before {background: #ff8a19;}
#nav_2:before {background: #ff35a1;}
#nav_3:before {background: #61c0ff;}
#nav_4:before {background: #de6aff;}
#nav_5:before {background: #27c3ae;}
.language {float: right; height: 100%; line-height: 160px; margin-right: 24px;}
.language a {margin: 0 10px; color: #666;}
.language a:hover, .language a.on, .language a.on:hover {color: #4abefb;}

/*Banner*/
.banner {width: 100%; height: 500px; margin: 0 auto;}
.banner img {position: absolute; left: 50%; margin-left: -1000px;}
.bannerMask {position: absolute; z-index: 99; width: 100%; height: 50px; background: -ms-linear-gradient(top, rgba(255,0,0,0) 0%,  rgba(255,0,0,0) 0%,);
background: -moz-linear-gradient(top, #fff, transparent); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.bannerLink {position: absolute; bottom: 20px; right: 150px; text-align: center;}
.bannerLink a {margin: 0 10px;}

.swiper-pagination-bullet {width: 24px; height: 24px; background: #fff; opacity: 1;}
.swiper-pagination-bullet-active {background: #ff79c8;}

.btn-prev, .btn-next {width: 100px; height: 100%; position: absolute; top: 0; cursor: pointer; z-index: 99;}
.btn-prev.swiper-button-disabled, .btn-next.swiper-button-disabled {opacity: .2; cursor: default;}
.btn-prev {background: url(../images/btn-prev-white.png) 50% 50% no-repeat; left: 0px;}
.btn-next {background: url(../images/btn-next-white.png) 50% 50% no-repeat; right: 0px;}

.banner .btn-prev, .banner .btn-next {width: 20%; opacity: 0; -webkit-transition: 1.0s all; -o-transition: 1.0s all; -moz-transition: 1.0s all; -ms-transition: 1.0s all; transition: 1.0s all;}
.banner .btn-prev:hover, .banner .btn-next:hover {opacity: 1;}
.banner .btn-prev {background: url(../images/btn-prev-white.png) left 40px top 50% no-repeat;}
.banner .btn-next {background: url(../images/btn-next-white.png) right 40px top 50% no-repeat;}

/*subBanner*/
.subBanner {width: 100%; height: 600px; margin: 0 auto; overflow: hidden; position: relative; background-position: center center; background-repeat: no-repeat;}

/*gamesPopular*/
.gamesPopular {width: 1100px; height: 208px; margin: 0 auto 65px auto; position: relative;}
.gamesPopular .swiper-container {width: 1060px; height: 208px;}
.gamesPopular .swiper-slide a {width: 208px; height: 208px; display: table-cell; vertical-align: middle; text-align: center; *display: block;}
.gamesPopular .swiper-slide a img {vertical-align: middle; border-radius: 20%; widows: 208px; height: 208px;}
.gamesPopular .btn-prev {left: -100px; background: url(../images/btn-prev-gray.png) 50% 50% no-repeat;}
.gamesPopular .btn-next {right: -100px; background: url(../images/btn-next-gray.png) 50% 50% no-repeat ;}
.gamesPopular .btn-prev, .gamesPopular .btn-next {opacity: 0.5; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; transition: 1.0s all;}
.gamesPopular .btn-prev:hover, .gamesPopular .btn-next:hover {opacity: 1;}

/*download*/
.download {width: 800px; height: 150px; padding: 70px 40px 0 40px; margin: 45px auto 75px auto; background: url(../images/bg_download.png) no-repeat;}
.download p.times {color: #4f4c4c; font-size: 50px; line-height: 80px; letter-spacing: 30px;}

/*rss*/
.rss {width: 1100px; margin: 0 auto; padding-bottom: 200px; text-align: center;}
.rss h5 {font-size: 34px; line-height: 80px; color: #4f4c4c;}
.rss p {width: 445px;; margin: 0 auto; font-size: 18px; color: #4f4c4c;}
.subscription {width: 826px; height: 110px; border: 2px solid #d6d0d0; border-radius: 60px; background: #fff; margin: 38px auto 0 auto; position: relative;}
.subscription img {position: absolute; top: -138px; left: 38px; z-index: -1;}
#rssEmail {width: 480px; height: 80px; line-height: 80px; padding: 0 5px; background: transparent; font-size: 24px; border: none; position: absolute; top: 15px; left: 40px;}
.rssBtn {height:90px; border: none; position: absolute; top: 7px; right: 7px; cursor: pointer;}
#rssSubmit {width: 270px; line-height: 90px; font-size: 30px; color: #fff; border-radius: 60px; background: #6ad36d; -webkit-box-shadow: 0 2px 0 rgba(63, 174, 67, 1), inset 0 0 10px rgba(252, 250, 254, 0.2); -moz-box-shadow: 0 2px 0 rgba(4,5,5,.25), inset 0 0 10px rgba(252,250,254,.2); box-shadow: 0 2px 0 rgba(63, 174, 1), inset 0 0 10px rgba(252, 250, 254, 0.2);}
#isLoading {width: 90px; height:90px; border-radius: 60px; background: #18acfa; -webkit-animation: load 1s infinite ease; -moz-animation: load 1s infinite ease; animation: load 1s infinite ease; -webkit-box-shadow: 0 2px 0 rgba(51, 122, 183, 1), inset 0 0 10px rgba(252, 250, 254, 0.2); -moz-box-shadow: 0 2px 0 rgba(4,5,5,.25), inset 0 0 10px rgba(252,250,254,.2); box-shadow: 0 2px 0 rgba(51, 122, 183, 1), inset 0 0 10px rgba(252, 250, 254, 0.2); display: none;}
@keyframes load {
	 0% {transform: scale(1);}
	 50% {transform: scale(0.5);}
	 100% {transform: scale(1);}
}
.tips {font-size: 16px; color: #468847; background: #dff0d8; text-align: center; line-height: 110px;}

/*aboutIndex*/
.aboutIndex {min-height: 500px; padding: 50px 0; text-align: center; background: url(../images/bg_about.jpg) center bottom no-repeat fixed; background-size: cover; overflow: hidden;}

/*footer*/
.footer {height: 170px; background: #191919; text-align:center; color: #898989; position: relative;}
.footer .wrapper {position: relative; display: inline-block;}
.footer h1.logo {float: left; width: 106px; height: 150px; margin: 0 10px 0 50px; background:url(../images/logo_ft.png) center center no-repeat; background-size: 100%;}
.footer h1.logo a {width: 100%; height: 100%; display: block;}
.copy {float: left;}
.sitemap {margin: 50px 0 10px 0; overflow: hidden; list-style-image: none; list-style-position: outside; list-style-type: none;}
.sitemap li {float: left; padding: 0 38px; position: relative;}
.sitemap li a {color: #4f4c4c;}
.sitemap li a:hover {color: #4abefb;}
.sitemap li span {color: #2c2c2c; position: absolute; top: 0px; right: 0px;}
.copyright {color: #3a3939;}

/*goTop*/
.tboxMask {width: 146px; height: 150px; background: #191919; position: absolute; right: 0%; bottom: 0px; z-index: 2;}
.tapme {width: 106px; height: 34px; background: url(../images/tapme.png) center no-repeat; display: none; opacity: 0; position: absolute; top: -125px; right: 15px; -webkit-animation: tapme 1.3s ease infinite 2s; -moz-animation: tapme 1.3s ease infinite 2s; animation: tapme 1.3s ease infinite 2s;}
.tbox{width: 146px; float: right; position: absolute; right: 0%; bottom: 0px;}
.tbox #goTop{width: 146px; height: 114px; background:url(../images/gotop.png) no-repeat 0 0; display: block; cursor: pointer;}
.reAnimation {-webkit-animation: rebound 2s 1 ease forwards; -moz-animation: rebound 2s 1 ease forwards; animation: rebound 2s 1 ease forwards;}
@keyframes rebound {
	 0% {bottom: 0px; z-index: 1;}
	 38% {bottom: 150px; z-index: 1;}
	 39% {bottom: 150px; z-index: 3;}
	 100% {bottom: 135px; z-index: 3;}
}
@keyframes tapme {
	 0% {opacity: 0; top: -125px}
	 50% {opacity: 1; top: -135px;}
	 100% {opacity: 0; top: -125px;}
}

/********************* subBody *********************/

/*about*/
.about {width: 100%; padding: 40px 0; margin: 0 auto; overflow: hidden;}

/*teamInfo*/
.teamInfo {padding: 70px 0 90px 0; text-align: center;}
.teamInfo h5 {font-size: 34px; font-weight: bold; line-height: 60px; color: #333;}
.teamInfo p {font-size: 25px; font-weight: bold; line-height: 30px; color: #7AD6FF;}

.teamList {width:1100px; margin: 25px auto; position: relative;}
.teamList .swiper-container {width: 864px; height: 540px;}
.teamList .swiper-slide {height: 248px; text-align: center; overflow: hidden;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.teamList .swiper-slide a {width: 248px; height: 248px; display: table-cell; vertical-align: middle; text-align: center; *display: block; position: relative;}
.teamList .swiper-slide a:hover {}
.teamList .swiper-slide a img {width: 248px; height: 248px; vertical-align:middle;}
.teamList .swiper-slide a p {width: 100%; height: 86px; line-height: 43px; text-align: center; color: #fff; font-size: 22px; font-weight: normal; position: absolute; bottom: -43px; left: 0px; background: rgba(100,100,100,0.6); margin: 0; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; transition: 0.5s all;}
.teamList .swiper-slide a:hover p {bottom: 0px;}
.teamList .btn-prev {left: -50px;}
.teamList .btn-next {right: -50px;}

/*gameList*/
.gameList {overflow: hidden; padding-left: 0; margin-bottom: 0; list-style: none;}
.gameList li {float: left; width: 50%; padding: 15px 60px 20px 0; background: url(../images/line.jpg) 38px bottom no-repeat;}
.gameList li h5 {color: #101e1e; font-size: 24px;}
.gameList li a {display: inline-block;}
.gameList li a .img{float: left; width: 168px; height: 168px; margin: 20px 40px 20px 20px; display: table-cell; vertical-align: middle; text-align: center; *display: block; overflow: hidden; border-radius: 20%;}
.gameList li .desc {line-height: 22px; font-size: 15px; color: #4f4c4c; margin-top: 30px;}
.gameBtn {overflow: hidden;}
.more {float: right; font-size: 20px; line-height: 35px; color: #4abefb;}

/*gameShow*/
.gameShow {}
.gameHeader {text-align: center; margin: 20px auto; overflow: hidden; background: url(../images/line.jpg) center bottom no-repeat;}
.gameHeader .title {color: #101e1e; font-size: 38px; font-weight: 400; margin: 20px auto;}
.gameHeader .icon {margin: 20px auto; width: 254px; height: 254px; border-radius: 20%;}
.gameHeader .desc {color: #4f4c4c; font-size: 16px; margin: 20px auto;}
.storeLinks {margin: 20px auto; overflow: hidden;}
.linkBtnBig {width: 227px; height: 77px; margin: 0 40px; display: inline-block;}
.linkBtnSmall {float: left; width: 103px; height: 35px; margin-right: 5px; display: inline-block;}
.appStore {background: url(../images/link_appStore.png) no-repeat; background-size: 100% 100%;}
.googlePlay {background: url(../images/link_googlePlay.png) no-repeat; background-size: 100% 100%;}
.gameContent {overflow: hidden; background: url(../images/line.jpg) center bottom no-repeat;}
.gameDetails {margin: 40px auto;}
.contTitle {color: #101e1e; font-size: 25px; font-weight: bold; margin: 20px auto;}

/*RandomGames*/
.like {width: 100%; overflow: hidden;}
.like ul {width: 110%; margin: 40px auto; padding: 0px; overflow: hidden;}
.like ul li {float: left; margin: 0 85px 0 0; list-style: none;}
.like ul li a img {width: 152px; height: 152px; border-radius: 20%;}
.like ul li a:hover img{}

/*ssList*/
.ssList {width: 1100px; height: 430px; margin: 0 auto 65px auto; position: relative;}
.ssList .swiper-container {width: 990px; height: 430px; list-style: none;}
.ssList .swiper-slide a {width: 320px; height: 430px; display: table-cell; vertical-align: middle; text-align: center; *display: block;}
.ssList .swiper-slide a img {vertical-align: middle;}
.ssList .btn-prev {left: -100px; background: url(../images/btn-prev-gray.png) 50% 50% no-repeat;}
.ssList .btn-next {right: -100px; background: url(../images/btn-next-gray.png) 50% 50% no-repeat ;}
.ssList .btn-prev, .ssList .btn-next {opacity: 0.5; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; transition: 1.0s all;}
.ssList .btn-prev:hover, .ssList .btn-next:hover {opacity: 1;}

/*contact*/
.contact {width: 100%; margin: 0 auto;}
.contactForm {width: 100%; margin: 50px auto;}
.contactForm td {padding: 15px 0;}
.msg_input {width: 480px; line-height: 26px; border:2px solid #4abefb; padding: 18px; background:#f6f9fb; border-radius: 50px; font-size: 20px; color: #73d3fe;-webkit-box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.03);box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.03);}
.msg_input::-webkit-input-placeholder, .msg_input_on::-webkit-input-placeholder {color:#73d3fe;}
.msg_input_on {width: 480px; line-height: 26px; border: 2px solid #8cd1ff; padding: 18px; background: #f1f9ff; border-radius: 50px;font-size: 20px; color: #73d3fe; -webkit-box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.03);box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);}
.msg_btn_submit {display:inline-block; width: 220px; height:76px; line-height: 76px; text-align: center; font-size: 26px; color: #fff; border-radius: 60px; background: #6ad36d; border: none; -webkit-box-shadow: 0 2px 0 rgba(63, 174, 67, 1), inset 0 0 10px rgba(252, 250, 254, 0.2); -moz-box-shadow: 0 2px 0 rgba(4,5,5,.25), inset 0 0 10px rgba(252,250,254,.2); box-shadow: 0 2px 0 rgba(63, 174, 1), inset 0 0 10px rgba(252, 250, 254, 0.2);}
.msg_btn_submit:hover {text-decoration: none; background: #F60; color: #fff; -webkit-box-shadow: 0 2px 0 rgba(255, 47, 0, 1), inset 0 0 10px rgba(252, 250, 254, 0.2); -moz-box-shadow: 0 2px 0 rgba(4,5,5,.25), inset 0 0 10px rgba(252,250,254,.2); box-shadow: 0 2px 0 rgba(255, 47, 0, 1), inset 0 0 10px rgba(252, 250, 254, 0.2);}
.msg_btn_submit:focus {color: #fff;}
#content {width: 100%; height: 470px; border-radius: 30px;}
#subject {height: 66px; line-height: 60px;}
.MsgTips {display: none; color: #e20453; padding: 10px 10px 0 10px; margin-bottom: 0px; text-indent: 10px; font-size: 20px;}
.MsgSuccess {color: #00b89f;}
.onError {border-color: #d8000f !important;}

/*Select Reset*/
.select2-container--default .select2-selection--single {height: 60px; border: 2px solid #4abefb; background: #f6f9fb; border-radius: 30px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 60px; padding-left: 18px; padding-right: 45px; text-align: left; font-size: 20px; color: #73d3fe;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 12px; right: 22px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {border-color: #4abefb transparent transparent transparent; border-width: 12px 10px 0 10px;}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {border-color: transparent transparent #4abefb transparent; border-width: 0 10px 12px 10px;}
.select2-dropdown {border: 2px solid #4abefb;}
.select2-results__option {font-size: 20px; padding-left: 18px; color: #4abefb;}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: #4abefb;}

/*Page*/
.page_info {height: 48px; line-height: 48px; text-align: center; font-size: 20px; margin: 25px 0; color:#4f4c4c;}
.page_info span {padding:0 2px; font-weight:bold;}
.page_list {height: 48px; line-height: 46px; text-align: right; font-size: 20px; margin: 25px 0;}
.page_list a {min-width: 48px; display:inline-block; color: #4f4c4c; border: 1px solid #95deff; background: #fff; text-align:center; padding: 0 8px; margin: 0 5px;}
.page_list a:hover {color: #4f4c4c; border: 1px solid #95deff; background: #95deff;}
.page_list a.on {color: #4f4c4c; border: 1px solid #95deff; background: #95deff;}