@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:#f2f3f4;
	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;}

/*输入框*/
.input_text{ display: inline-block; background-color: #fff; border: 1px solid #eee; height: 32px; line-height: 32px; padding: 0 10px; font-size: 14px; color: #333; margin-top: 8px; width: 298px;margin-left: 24px;}
::-webkit-input-placeholder{ color: #999999;}
:-moz-placeholder{ color: #999999;}
::-moz-placeholder{ color: #999999;}
:-ms-input-placeholder{ color: #999999;}
.input_text:focus,.input_text:hover{ border: 1px solid #FFC528;}

.head{ width: 100%; height: 98px; background: #fff;}
.logo{ float: left; margin: 22px 20px;font-size: 38px;color: #007AFF;font-weight: bold;}
.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: #398DFF;}
.nav li h3{ font-size: 20px; color: #333;}
.nav li p{ font-size: 14px; color: #999;}

.title{ width: 100%; min-width: 1200px; background: url(https://cdn.hztangyou.com/chuwanddz/title_bg.jpg) repeat; height: 180px;}
.title .wrap{ position: relative; height: 180px;}
.title h2{position: absolute; font-size: 48px; font-weight: bold; color: #fff; padding: 20px; border-bottom: 8px solid #398DFF; left: 0; bottom: 0;}

.normal_title{ height: 68px; line-height: 68px; font-size: 32px; color: #398DFF; position: relative; margin-bottom: 12px; font-weight: bold; margin: 12px 0 24px 24px;}
.normal_title span{ font-size: 16px; color: #999; margin-left: 8px;}
.normal_title:after{ content: ""; position: absolute; width: 128px; height: 4px; border-radius: 1px; background-color: #398DFF; bottom: 0; left: 0;}


/*游戏列表*/
.games{ margin-top: 20px;}
.games_img{ width: 750px; position: relative;}
#games_big{ width: 750px; height: 422px; overflow: hidden; position: relative;}
#games_big li{ position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.6s; -webkit-transition: opacity 0.6s;}
.games_thumb{ width: 750px; margin-top: 10px; overflow: hidden;}
#games_small{ width: 7500px; position: relative; left: 0; top: 0; transition: left 0.6s; -webkit-transition: left 0.6s;}
#games_small li{ width: 180px; height: 102px; margin-right: 10px; float: left; cursor: pointer;}
.games_img img{ width: 100%;}
.games_active{ width: 180px; height: 122px; background: url(https://cdn.hztangyou.com/chuwanddz/games_active.png) no-repeat; position: absolute; bottom: 0; left: 0; z-index: 99;}
.games_info{ width: 430px; height: 533px; background-color: #fff; margin-left: 20px;}
.games_t img{ width: 100%;}
.games_name{ margin: 0 10px; padding:12px 10px 20px; border-bottom: 1px solid #F1F5FA;}
.games_name h3{ font-size: 24px; font-weight: bold; color: #398DFF;}
.games_name .btn_download{ display:block; width:160px; height:48px; line-height:48px; background-color:#398DFF; text-align:center; border-radius:10px; font-size: 16px; color: #fff; margin-top: 12px;}
.games_name p{ font-size: 16px; color: #7C98AF; margin-top: 12px;}
.games_qr{ margin: 20px;}
.games_qr .qr_word{ margin: 40px 0 0 16px;}
.games_qr h3{ font-size: 20px;}
.qr_download{ font-size: 20px; color: #398DFF; text-indent: 26px; background: url(https://cdn.hztangyou.com/chuwanddz/icon_download2.png) no-repeat left; margin-top: 6px;}
.qr_img img{ width: 142px;}
.games_c{ background-color: #fff; margin-top: 20px;}
.games_detail{ width: 720px; margin: 20px;}
.games_part{ margin-top: 40px;}
.games_part:first-of-type{ margin-top: 0;}
.games_part h3,.games_aside h3{ font-size: 24px; color: #398DFF; margin: 0 10px; font-weight: bold;}
.games_part p{ font-size: 14px; color: #7C98AF; margin: 0 10px; line-height: 24px;}
.games_part p b{ color: #2E4461; line-height: 32px;}
.games_aside{ width: 400px; margin: 20px;}
.games_list li{ margin: 20px 10px;}
.list_img{ width: 92px; height: 92px; text-align: center; border: 4px solid #398DFF; border-radius: 10px;}
.list_img img{ vertical-align: middle; max-width: 100%;}
.list_img span{ height: 100%; display: inline-block; vertical-align: middle;}
.list_word{ margin: 24px 0 0 16px;}
.list_word h4{ font-size: 18px;}
.list_word p{ font-size: 14px; color: #7C98AF; margin-top: 6px;}


/*关于*/
.about{ width: 1200px; margin: 32px auto 0; overflow: hidden; padding-bottom: 20px;background-color: #fff;}
.about_t{}
.about_tab{ width: 376px; height: 48px; background: url(https://cdn.hztangyou.com/chuwanddz/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: #398DFF;}

/*联系*/
.contact{ width: 1200px; margin: 32px auto 0; overflow: hidden; padding-bottom: 60px; background-color: #fff;}
.contact_t{}
.code{ float: left; width: 220px; text-align: center; margin: 0px 24px 0;}
.code p img{ width: 100%;}
.code h4{ font-weight: 24px; color: #333; margin-top: 8px;}
.info{ float: right; margin-right: 24px;}
.qq{ padding-left: 64px; background: url(https://cdn.hztangyou.com/chuwanddz/icon_qq.png) no-repeat 4px; margin-bottom: 24px;}
.phone{ padding-left: 64px; background: url(https://cdn.hztangyou.com/chuwanddz/icon_phone.png) no-repeat 4px; margin-bottom: 24px;}
.email{ padding-left: 64px; background: url(https://cdn.hztangyou.com/chuwanddz/icon_email.png) no-repeat 4px;margin-bottom: 24px;}
.add{ padding-left: 64px; background: url(https://cdn.hztangyou.com/chuwanddz/icon_add.png) no-repeat 4px;}
.info h3{ font-size: 20px; color: #999;}
.info p{ font-size: 20px; color: #333;}

.link{ width: 1200px; margin: 32px auto 0; overflow: hidden; padding-bottom: 60px; background-color: #fff;}
.link_box{ display: flex; flex-wrap: wrap;}
.link_box a{ font-size: 20px; margin-left: 24px; 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; margin-top: 32px;}
.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: #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(https://cdn.hztangyou.com/chuwanddz/beian.png) 0 center no-repeat;}

/*弹窗*/
.buy_mask{ position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; display: none;}
.mask_bg{ width: 100%; height: 100%; background-color: #000; opacity: 0.85; filter: alpha(opacity=85); position: absolute; left: 0; top: 0; z-index: -1;}
.mask_content{ width: 640px; margin: 0 auto; background-color: #fff; padding-bottom: 24px; margin-top: 80px;}
.mask_title{ height: 40px; line-height: 40px; text-align: center; background-color: #3984F3; color: #fff; font-size: 18px; position: relative;}
.close{position: absolute; width: 40px; font-size: 32px; color: #fff; right: 0;}

/*购买弹窗*/
.user span{ font-size: 14px; color: #333333; margin-left: 0;}

.recharge_select, .pay_select{ width: 640px; background-color: #fff; overflow: hidden; margin-top: 10px;}
.recharge_h, .pay_h{ font-size: 16px; color: #DB8E69; margin: 12px 24px 0;}
.link_history{ color: #1AA6FF;}
#recharge_list{ padding-bottom: 0px;}
#recharge_list li{ margin-top: 8px; background-color: #fff; margin-left: 24px;}
#recharge_list a{ display: block; width: 120px; border: 1px solid #eee; font-size: 14px; line-height: 32px; text-align: center;}
#recharge_list a.active{ border: 1px solid #ffc528; background: url(https://cdn.hztangyou.com/pc/icon_pay.png?0110v1) no-repeat 100px bottom;}
#recharge_list .cion span, #recharge_list .pay_cion{ color: #1aa6ff;}
#recharge_list .jewel span{ color: #eb5044;}

#pay_list{ text-align: left; margin-bottom: 24px;}
#pay_list li{ margin: 8px 0 0 24px; float: left;}
#pay_list .pay{ display: block; width: 120px; height: 32px; border: 1px solid #eee; line-height: 32px;}
#pay_list .active{ border: 1px solid #ffc528; background: url(https://cdn.hztangyou.com/pc/icon_pay.png?0110v1) no-repeat 100px bottom;}
#pay_list .pay i{ display: block; width: 32px; height: 32px; background: url(https://cdn.hztangyou.com/pc/icon_pay.png) no-repeat;}
#pay_list .active{ border: 1px solid #FFC528;}
#pay_list .pay h2{ font-size: 14px;}
#pay_list .pay i.zhifubao{ background-position: -80px 5px; margin-left: 20px;}
#pay_list .pay i.weixin{ background-position: 4px 5px; margin-left: 14px;}
#pay_list .pay i.others{ background-position: -422px 17px;}

.pay_btn{ display: block; width: 160px; height: 36px; line-height: 36px; text-align: center; font-size: 16px; background-color: #3984F3; color: #fff; border-radius: 20px; margin: 0 auto; margin-top: 24px;}
.pay_btn:hover{ background-color: #398DFF;}

/*返回顶部*/
.backTop{ width: 80px; height: 80px; font-size: 24px; background-color: rgba(0,0,0,0.85); position: fixed; right: 16px; bottom: 116px; border-radius: 10px; display: none;}
.backTop a{ display: block; padding: 0 24px; height: 60px; line-height: 80px; padding-top: 20px; color: #007AFF; text-align: center;}
.up_arrow{ display: inline-block; width: 32px; height: 32px; border: 2px solid #fff; border-width: 4px 4px 0 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}