@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

html { _background-image: url(about:blank); _background-attachment: fixed; }

input { padding: 0; border: 0px solid transparent; margin: 0; }
input:focus { outline: 0; }
input::-moz-focus-inner { border: 0; }

input, button, select, textarea { outline: none; padding: 0; border: none; margin: 0; }

textarea { resize: none; }

li { vertical-align: bottom; list-style: none; }

em, i { font-style: normal; }

a { cursor: pointer; blr: expression(this.onFocus=this.blur()); outline: none; text-decoration: none; }

.nav, .hot-game-list, .rec-list, .gift-list { *zoom: 1; }
.nav:after, .hot-game-list:after, .rec-list:after, .gift-list:after { content: " "; visibility: hidden; clear: both; display: block; height: 0; font-size: 0; }

html, body { background-color: #fff; }

body { position: relative; font: 12px/1.5 "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

a { color: #fff; }
a:hover { text-decoration: underline; }

.wrapper { position: relative; width: 100%; }

.content { position: relative; z-index: 100; width: 100%; }

.center { position: relative; width: 980px; margin: 0 auto; }
.top { height: 30px; color: #fff; background: #d72226; }
.top__center { width: 980px; margin: 0 auto; }

.title { float: left; padding: 0 15px; line-height: 30px; background: #b90408; }

.top-nav { float: right; font-size: 0; line-height: 30px; }
.top-nav__item { display: inline-block; *display: inline; *zoom: 1; padding: 0 14px; margin-left: 1px; font-size: 12px; background: #b90408; }
.top-nav__item--on { background: #d72226; }
.top-nav__item--on .top-nav__link:hover { text-decoration: none; }
.top-nav__item:nth-child(3) { padding-right: 0; }
.header { height: 60px; margin-bottom: 20px; background: #fff7f7; }
.header__center { width: 980px; margin: 0 auto; }

.logo { color:#ef4242; float: left; display: inline; width: 164px; height: 29px; margin: 15px 30px 0 0; font-size: 24px;}

.nav { float: left; position: relative; height: 60px; font-size: 14px; line-height: 60px; font-weight: bold; text-align: center; }
.nav__item { float: left; position: relative; width: 90px; }
.nav__link { color: #ef4242; }
.nav__link:hover { text-decoration: none; }
.nav__line { position: absolute; top: 50%; right: 0; width: 1px; height: 12px; margin-top: -6px; overflow: hidden; background: #fbc7c7; }
.nav__bottom { position: absolute; bottom: 0; left: 0; width: 90px; height: 2px; _overflow: hidden; background: #ff6666; }
.nav__bottom:before { content: ' '; position: absolute; top: -8px; left: 50%; width: 0; height: 0; overflow: hidden; border-width: 4px; border-style: dashed dashed solid dashed; border-color: transparent transparent #ff6666 transparent; margin-left: -4px; }

.collect { float: right; position: relative; width: 188px; height: 30px; padding: 1px; border: 1px solid #4c8d06; border-radius: 1px; margin-top: 13px; font: bold 14px/30px "微软雅黑"; text-align: center; background: #77d216; }
.collect__content { background: #5eb105; }
.collect__icon { position: absolute; top: 7px; left: 12px; width: 13px; height: 12px; padding-bottom: 2px; border-bottom: 2px solid #d8ff00; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/arr-d.png?1463706472') no-repeat; }
.collect__txt { padding-left: 5px; }
.collect:hover { text-decoration: none; }
.collect:hover .collect__icon { -moz-animation: 0.5s linear 0s normal both infinite go-down; -webkit-animation: 0.5s linear 0s normal both infinite go-down; animation: 0.5s linear 0s normal both infinite go-down; }
.hot-game-box { margin-bottom: 25px; }

.hot-game-list { position: relative; z-index: 102; margin-left: -13px; }

.hot-game { position: relative; float: left; display: inline; width: 304px; padding: 7px 6px 0 6px; border: 1px solid #e7e7e7; margin-left: 13px; }
.hot-game__figure { width: 100%; height: 351px; overflow: hidden; }
.hot-game__txt { padding-top: 10px; text-align: center; color: #999; }
.hot-game__name { font-size: 14px; color: #333; }
.hot-game__bottom { padding: 15px 0 20px; text-align: center; }
.hot-game__link { position: relative; display: inline-block; width: 68px; height: 26px; border: 1px solid #ccc; border-radius: 2px; margin-right: 10px; line-height: 26px; text-align: center; color: #666; }
.hot-game__link-icon { position: absolute; top: 3px; left: 8px; width: 20px; height: 20px; overflow: hidden; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map-se45384d8fc.png') no-repeat; background-position: 0 0; }
.hot-game__link-txt { padding-left: 18px; }
.hot-game__start { display: inline-block; width: 110px; height: 28px; border-radius: 2px; margin-left: 10px; font-size: 14px; line-height: 28px; text-align: center; background: #ff6666; }
.hot-game__status { position: absolute; top: -1px; right: -1px; display: none; width: 64px; height: 26px; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map-se45384d8fc.png') -43999px 0 no-repeat; }
.hot-game--hot .hot-game__status { display: block; background-position: 0 -116px; }
.hot-game--rec .hot-game__status { display: block; background-position: 0 -182px; }

.hot-game-show { position: absolute; top: 0; left: 0; z-index: 101; width: 980px; height: 359px; }
.hot-game-show--on { z-index: 103; }
.hot-game-mask { position: absolute; top: 0; left: 0; z-index: 101; width: 980px; height: 359px; cursor: pointer;}
.box { position: relative; border-top: 2px solid #ddd; }
.box__title { position: relative; margin-top: 15px;}
.box__title-icon {display: block; width: 200px; height: 32px; background-repeat: no-repeat; background-position: 0 0;}
.box__title-txt { padding-left: 38px; }
.box--server { float: left; width: 318px; margin-bottom: 38px; }
.box--server .box__title-icon {background-image: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map/t1.gif');}
.box--rec { float: right; width: 649px; margin-bottom: 25px; }
.box--rec .box__title-icon {background-image: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map/t2.gif');}
.box--gift { clear: both; }
.box--gift .box__title-icon {background-image: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map/t2.gif');}

.server-box { position: relative; margin-top: 15px; }

.server { height: 34px; padding-bottom: 3px; border-bottom: 1px dashed #dbdbdb; line-height: 34px; color: #666; font-size: 0;}
.server-list { position: relative; z-index: 102; }
.server img, .server__game, .server__num, .server__link, .server__status { display: inline-block; vertical-align: middle; }
.server img { padding: 0 9px; }
.server__game { width: 95px; font-size: 14px; color: #333; }
.server__num { width: 70px; font-size: 12px;}
.server__link { width: 72px; height: 25px; border-radius: 2px; line-height: 25px; text-align: center; background: #ff6666; font-size: 12px;}
.server__status { width: 26px; height: 11px; overflow: hidden; margin-left: 5px; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map-se45384d8fc.png') -43999px 0 no-repeat; }
.server--hot .server__status { background-position: 0 -142px; }
.server-hl { position: absolute; top: 0; left: 0; z-index: 101; display: block; width: 316px; height: 35px; border: 0px solid transparent; background: transparent; }
.server-hl--on { border: 1px solid #ff6666; background: #ffeeee; }
.rec-search { position: absolute; top: 28px; right: 10px; }
.rec-search__link { margin-left: 3px; color: #888; }

.rec-list { margin: 15px 0 0 4px; }

.rec-game { float: left; position: relative; display: inline; width: 306px; height: 145px; border: 1px solid #ddd; margin: 0 7px 13px 6px;}
.rec-game__figure { position: absolute; top: 0; left: 0; z-index: 101; width: 195px; height: 145px; overflow: hidden;  cursor: pointer;}
.rec-game__figure img { position: absolute; top: 0; left: 0; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }
.rec-game__content { position: relative; z-index: 102; margin-left: 195px; color: #555; }
.rec-game__name { padding: 28px 0 5px; font-size: 14px; font-weight: bold; color: #ff6666; display: block;}
.rec-game__bref { display: block; width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-game__link { display: block; width: 100px; height: 30px; margin-top: 18px; border-radius: 2px; line-height: 30px; text-align: center; color: #fff; background: #ff6666; }
.rec-game__link:hover { text-decoration: none; background: #3098d5; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.rec-game__status { position: absolute; top: -1px; right: 12px; width: 22px; height: 29px; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map-se45384d8fc.png') -43999px 0; }
.rec-game:hover { border: 1px solid #ff6666; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.rec-game--hot .rec-game__status { background-position: 0 -153px; }
.rec-game--rec .rec-game__status { background-position: 0 -208px; }
.rec-game--01 .rec-game__figure img { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.rec-game--02 .rec-game__figure img { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.rec-game--03 .rec-game__figure img { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.rec-game--04 .rec-game__figure img { -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.rec-game--01:hover .rec-game__figure img { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
.rec-game--02:hover .rec-game__figure img { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
.rec-game--03:hover .rec-game__figure img { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
.rec-game--04:hover .rec-game__figure img { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); }
.gift-list { width: 100%; margin-top: 20px; }

.gift { float: left; position: relative; width: 293px; display: inline; border: 1px solid #ddd; margin: 0 0 28px 28px; }
.gift__link { color: #888; }
.gift__link:hover { text-decoration: none; }
.gift__figure { width: 293px; height: 141px; }
.gift__figure img { display: block; }
.gift__bottom { height: 39px; overflow: hidden; margin: 0 15px; line-height: 39px; }
.gift__left { float: left; }
.gift__right { float: right; padding-right: 38px; }
.gift__game { padding-right: 5px; font-weight: bold; }
.gift__re { color: #ff3300; }
.gift__icon { position: absolute; bottom: 12px; right: 15px; width: 33px; height: 15px; overflow: hidden; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/map-se45384d8fc.png') no-repeat; background-position: 0 -237px; }
.gift:hover { border: 1px solid #ff6666; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.footer { margin-top: 40px; font-size: 12px; color: #ccc; background: #404952; }
.footer__logo { overflow: hidden; font-size: 0; line-height: 0; float: left; width: 180px; height: 50px; margin-right: 20px; background: url('http://www.yinyueyouxi.com/tpl/universal/dt16/images/4399-2.png?1463983233') center center no-repeat; }
.footer__line { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; float: left; display: inline; width: 1px; height: 38px; overflow: hidden; margin: 5px 20px 5px 0; background: #000; }
.footer__content { width: 980px; padding: 35px 0 45px; margin: 0 auto; line-height: 24px; background: #404952; }
.footer__content a { color: #ccc; }
.footer__content a:hover { text-decoration: underline; color: #d9d9d9; }

.bg { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; min-width: 980px; height: auto; overflow: hidden; }
@media \0screen\,screen\9 { .bg { width: expression(eval((document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement.clientWidth < 980 ? 980 : document.documentElement.clientWidth: document.body.clientWidth < 980 ? 980 : document.body.clientWidth)); } }
.bg__img { height: auto; background: center top no-repeat; }
.bg__img-list { position: absolute; top: 0; left: 50%; z-index: 1; width: 1920px; margin-left: -960px; }
.bg__img--01 { background-image: none; }
.bg__flash { position: absolute; top: 0; left: 50%; z-index: 2; width: 1920px; height: 0; margin-left: -960px; }

@-moz-keyframes go-down { from { background-position: 0 -12px; }
  to { background-position: 0 0; } }
@-webkit-keyframes go-down { from { background-position: 0 -12px; }
  to { background-position: 0 0; } }
@keyframes go-down { from { background-position: 0 -12px; }
  to { background-position: 0 0; } }

