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

/*css reset*/
*{ margin:0; padding:0; font-weight:normal; text-decoration:none; list-style:none;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);
	/*transition: width 2s linear;
	-moz-transition:width 2s linear;
	-webkit-transition:width 2s linear;
	-o-transition:width 2s linear*/}
body {

	/*-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/
	text-size-adjust: none;
	outline: none;
	font-size:16px;
	background-color:#fff;
	color:#82878c;
	font-family:"????????????", Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
	font-weight: 400
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
fieldset,img {
	border: 0
}
li {
	list-style: none
}
input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit
}
button,input[type="submit"] {
	border: none;
	background: none;
	appearance: none;
	outline: none
}
a {
	touch-callout: none;
	text-decoration: none;
	outline:none;
	color:inherit;
}
em {
	font-style: normal
}
html,body {
	width: 100%;
	height: 100%;
}

.clearfix:after{ content: ""; display: block; clear: both;}
.fl{ float: left;}
.fr{ float: right;}
.wrap{ width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden;}

.head{ width: 100%; height: 98px; background: #fff; border-bottom: 2px solid #ffae2f; position: fixed; left: 0; top: 0; z-index: 999;}
.logo{ float: left; margin: 22px 20px;}
.nav{ float: right; margin-right: 40px; margin-top: 26px;}
.nav li{ display: inline-block; width: 120px; text-align: center; cursor: pointer;}
.nav li.active h3,.nav li.active p{ color: #FFAE2F;}
.nav li h3{ font-size: 20px; color: #333;}
.nav li p{ font-size: 14px; color: #999;}

.swiper-container {
    width: 100%;
    height: 700px;
    min-width: 1200px;
    position: relative;
}
.swiper-wrapper{
	padding-top: 100px;
}
.banner{ background: url(img/banner3.jpg) no-repeat center; background-size: cover;}
.swiper-pagination{ bottom: 50px; text-align: right;}
.my_page{ width: 80px; height: 4px; background-color: #ccc; display: inline-block; margin: 0 15px;}
.my_page p{ height: 4px; background-color: #999;}
.icon_QR{ width: 560px; margin-top: 180px; padding:0 0 30px 20px; border-bottom: 1px solid rgba(0,0,0,0.8);}
.icon_QR .icon{ width: 144px; margin-right: 8px;}
.icon_QR p{ width: 160px; height: 144px; background: url(img/games_QR_bg.png) no-repeat;}
.icon_QR p img{ width: 140px; margin: 2px 0 0 18px;}
.banner_t{ font-size: 36px; color: #333; font-weight: bold; margin: 20px 0 0 20px;}
.banner_c{ font-size: 18px; color: #666; margin: 10px 0 0 20px;}
.banner_btn{ display: block; width: 210px; height: 60px; line-height: 60px; color: #fff; font-size: 24px; font-weight: bold; text-align: center; border-radius: 30px; background-color: #ffae2f; margin: 40px 0 0 20px;}
.an_width{ animation: anWidth 2s linear; -moz-animation: anWidth 2s linear; -webkit-animation: anWidth 2s linear; -o-animation: anWidth 2s linear;}
@keyframes anWidth
{
from {width: 0;}
to {width: 80px;}
}

@-webkit-keyframes anWidth
{
from {width: 0;}
to {width: 80px;}
}

@-moz-keyframes anWidth
{
from {width: 0;}
to {width: 80px;}
}

@-o-keyframes anWidth
{
from {width: 0;}
to {width: 80px;}
}

.arrow { width: 100%; height: 37px; position: absolute; bottom: 0; left: 0; z-index: 999; text-align: center;}

/*????????????*/
.games{ min-width: 1200px; overflow: hidden; padding-bottom: 20px;background-color: #f6f6f6;}
.games_t{ width: 100%; height: 62px; min-width: 1200px; background: url(img/games_h.png) no-repeat center; margin: 50px 0;}
.games_t h2,.news_t h2,.about_t h2,.contact_t h2,.link_t h2{ width: 0; overflow: hidden;}

.swiper-container2 {
    width: 1200px;
    position: relative;
}
.swiper-container2 .swiper-button-prev{ background: url(img/arrow_left.png) no-repeat;}
.swiper-container2 .swiper-button-next{ background: url(img/arrow_right.png) no-repeat;}
.games .title{ text-indent: 32px; background: url(/tangyoupc/icon_games.png) no-repeat left; font-size: 24px; color: #398DFF; font-weight: bold;}
.games_list{ width: 1200px; margin: 12px auto; text-align: center;}
.games ul li{ display: inline-block; text-align: left;}
.games a{ display: block; width: 380px; height: 270px; background-color: #fff; margin: 0 16px;}
.games_pic{ width: 380px; height: 150px; position: relative;}
.games_img{ width: 380px;}
.qr_mask{ display: none; width: 380px; height: 150px; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.8);}
.qr_img{ margin: 25px 0 25px 60px;}
.qr_word{ color: #fff; margin: 55px 0 0 12px;}
.qr_word h3{ font-size: 14px;}
.qr_download{ text-indent: 20px; background: url(img/icon_download.png) no-repeat left; margin-top: 6px;}
.qr_img img{ width: 100px;}
.games_h{ margin: 12px 10px; padding: 0 0 12px 6px; border-bottom: 1px solid #F1F5FA; font-size: 20px; color: #2E4461; font-weight: bold;}
.games_c{ color: #96ACBE; margin:0 16px; line-height: 20px;}

/*??????*/
.about{ min-width: 1200px; overflow: hidden; padding-bottom: 20px;background-color: #f6f6f6;}
.about_t{ width: 100%; height: 62px; min-width: 1200px; background: url(img/about_h.png) no-repeat center; margin: 50px 0;}
.about_tab{ width: 376px; height: 48px; background: url(img/about_tab.png) no-repeat 0 0; float: right;}
.about_tab a{ display: inline-block; width: 160px; height: 48px; margin: 0 8px; }
.logo_img{ float: left; margin: 20px 20px 0 20px;}
.c_word{ float: right; margin-right: 20px;}
.c_word h2{ font-size: 36px; color: #333; font-weight: bold; margin: 60px 0 20px 0;}
.c_word p{ width: 780px; margin-top: 30px; line-height: 32px;}
.c_word .line{ width: 80px; height: 4px; background-color: #FFAE2F;}

/*??????*/
.contact{ min-width: 1200px; overflow: hidden; padding-bottom: 60px; background-color: #f6f6f6;}
.contact_t{ width: 100%; height: 62px; min-width: 1200px; background: url(img/contact_h.png) no-repeat center; margin: 50px 0;}
.code{ float: left; width: 256px; text-align: center; margin: 0px 24px 0;}
.code p img{ width: 100%;}
.code h4{ font-weight: 24px; color: #333; margin-top: 8px;}
.info{ margin-top: 24px;}
.info_item{ float: left; width: 560px; margin:0 20px 60px; height: 100px; text-indent: 120px; border-radius: 10px; box-shadow: rgba(235,235,235,1) 5px 5px 16px;}
.qq{ background: #fff url(img/icon_qq.png) no-repeat 48px;}
.phone{ background: #fff url(img/icon_phone.png) no-repeat 48px;}
.email{ background: #fff url(img/icon_email.png) no-repeat 48px;}
.add{ background: #fff url(img/icon_add.png) no-repeat 48px;}
.info h3{ font-size: 20px; color: #999; margin-top: 20px;}
.info p{ font-size: 20px; color: #333; margin-top: 6px;}

.link{ min-width: 1200px; overflow: hidden; padding-bottom: 20px;background-color: #f6f6f6;}
.link_t{ width: 100%; height: 62px; min-width: 1200px; background: url(img/link_h.png) no-repeat center; margin: 50px 0;}
.link_box{ margin-bottom: 36px; display: flex; flex-wrap: wrap;}
.link_box a{ font-size: 20px; margin: 0 18px; line-height: 40px; width: 164px;}
.link_box a:hover{ color: #3984F3;}

/*??????*/
.copyright{ width: 100%; min-width: 1200px; background-color: #333; color: #ccc; padding: 12px 0; text-align: center;}
.copyright .copy_age{ margin: 0 32px 0 16px; width: 160px;}
.copyright .copy_age img{ width: 100%;}
.copyright .copy_word{ margin-top: 12px;}
.copyright p{ font-size: 16px; line-height: 24px;}
.copyright p a{ font-size: 16px; color: red;}
.copyright p.beian a{ font-size: 16px; color: #ccc;}
.copyright p a:hover{ font-size: 16px; color: #398DFF;}
.copyright .beian{ display: block; width: 480px; margin: 0 auto; text-align: center; line-height: 24px; height: 24px; background: url(img/beian.png) 0 center no-repeat;}


/*?????????-??????*/
.back_home{ float: right; margin-right: 40px; margin-top: 26px;}
.back_home a{ display: inline-block; width: 120px; text-align: center; font-size: 20px; color: #333; line-height: 20px;}
.back_home a span{ font-size: 14px; color: #999;}
.back_home a:hover,.back_home a:hover span{ color: #FFAE2F;}

.news_list{ min-width: 1200px; margin-top: 100px; background-color: #F6F6F6; overflow: hidden;}
.news_head{ width: 100%; min-width: 1200px; height: 200px; background: url(img/news_top.jpg) no-repeat center;}
.news_head h2{ width: 0; overflow: hidden;}
.news_cont{ width: 1200px; margin: 0 auto;}
.news_tab{ width: 376px; height: 48px; background: url(img/news_tab.png) no-repeat 0 0; float: right; margin: 30px 24px 0 0;}
.news_tab a{ display: inline-block; width: 160px; height: 48px; margin: 0 8px; }
.list { margin: 24px;}
.list li{ width: 360px; height: 240px; background: #fff url(img/list_bg.png) no-repeat right top; overflow: hidden; margin: 10px; display: inline-block; cursor: pointer;}
.list li:hover{ box-shadow: rgba(255,174,47,0.10) 0 2px 6px; -webkit-transform: translateY(-2px);}
.list li h6{ font-size: 20px; color: #FFAE2F; padding-left: 24px; background: url(img/list_h_bg.png) no-repeat 4px; margin: 20px 32px 12px 8px;}
.list li p{ font-size: 16px; line-height: 24px; margin: 0 32px 10px;}
.list li p.time{ color: #999;}
.list li p.brief{ color: #333;}

/*????????????*/
.page{ width: 1200px; margin: 0 auto; text-align: center; margin-bottom: 30px;}
.page a{ display: inline-block; width: 39px; height: 45px; text-align: center; line-height: 45px; color: #333; font-size: 20px; background: url(img/page_num.png) no-repeat;}
.page a.page_active{ background: url(img/page_active.png) no-repeat;}
.page a:hover{ background: url(img/page_hover.png) no-repeat; color: #FFAE2F;}

/*?????????-??????*/
.article{ width: 740px; background-color: #fff; margin: 40px 20px; float: left;}
.article h2{ font-size: 24px; color: #FFAE2F; padding-left: 32px; background: url(img/list_h_bg.png) no-repeat 8px; margin: 20px 32px 12px 8px;}
.article p{ font-size: 16px; line-height: 24px; margin: 0 40px 10px;}
.article p.time{ color: #999;}
.article p.brief{ color: #333; margin-bottom: 32px;}
.hot_art{ width: 400px; background-color: #fff; margin: 40px 20px 0 0; float: right;}
.hot_art h2{ font-size: 24px; color: #FFAE2F; padding-left: 32px; background: url(img/list_h_bg.png) no-repeat 8px; margin: 20px 32px 24px 8px;}
.hot_art ul{ margin-bottom: 6px;}
.hot_art li{ height: 60px; line-height: 60px; font-size: 16px; border-top: 1px solid #F6F6F6; padding: 0 40px; color: #666;}
.hot_art a:hover{ color: #FFAE2F;}

/*404??????*/
.page404{ padding-top: 100px; text-align: center;}
.page404_h{ font-size: 36px; font-weight: bold; color: #FFAE2F; padding: 100px 0 60px;}
.page404_c{ font-size: 16px; color: #999; padding: 0 0 20px;}
.page404_more{ font-size: 20px; color: #FFAE2F; padding: 40px 0 40px;}
.btn_group{ margin-bottom: 100px; text-align: center;}
.back_btn{ display: inline-block; width: 210px; height: 60px; line-height: 60px; color: #FFAE2F; font-size: 24px; font-weight: bold; text-align: center; border-radius: 30px;border: 2px solid #FFAE2F; margin: 0px 0 0 20px;}
.page404 .banner_btn{ display: inline-block; margin-top: 0;}
.btn_group p{ font-size: 18px; color: #FFAE2F; line-height: 60px; margin-left: 24px;}

/*????????????*/
#msg{ width: 640px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -320px; display: none; z-index: 999;}
#msg span{ display: inline-block; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.85); color: #fff; font-size: 18px; padding: 0 32px;}