@charset "utf-8";

/* Rest
-----------------------------------------------------------------------------------------------------------*/
body, h1, h2, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
img { border: 0; vertical-align: top; }
em { font-style: normal; }
section, article, aside, header, footer { display: block; }

/* Font
-----------------------------------------------------------------------------------------------------------*/
body, a { color: #555; }
body { font: 12px/1.6 \5FAE\8F6F\96C5\9ED1, Tahoma, Geneva, sans-serif; }
h1, h2 { font-weight: 400; font-size: 1em; }

/* Pendant
-----------------------------------------------------------------------------------------------------------*/
.pr { position: relative; }
.pa { position: absolute; }
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.bc { margin-left: auto; margin-right: auto; }
.tc { text-align: center; }
.fn { font-weight: 400; }
.fb { font-weight: 700; }
.nt { text-indent: -38888px; outline: none; }

/* Layout
-----------------------------------------------------------------------------------------------------------*/
.container { max-width: 1900px; min-width: 1100px; overflow: hidden; *position: relative; }
.container { _width: expression((document.documentElement.clientWidth > 1900 || document.body.clientWidth > 1900) ? "1900px" : ((document.documentElement.clientWidth < 1100 || document.body.clientWidth < 1100) ? "1100px" : "100%")); _margin:0 auto; }
.range { width: 1900px; margin-left: -400px; _margin-right: -400px; _position: relative; }

html { background-color: #f3f6f9; }
.container { border-width: 1px 0; border-style: solid; border-color: #dcdee0; background-color: #fff; }
.wrap { width: 1100px; }

/* header */
.header { height: 7em; }
.header h1 { padding-top: 1em; }
.header h1 img { height: 5em; }

.header ul { padding-top: 3.4em; }
.header li a { display: block; width: 7em; border-right: 1px solid #999; font-size: 1.5em; line-height: 1.1; }
.header li a:hover { color: #4ab71a; text-decoration: none; }
.header .first a { width: 5em; color: #4ab71a; }
.header .last a { border-right: 0; }

/* footer */
.footer, .footer a { color: #888; }
.footer { padding: 3em 0; }
.footer a { *display: inline-block; margin: 0 4px; }
.footer em { color: #4ab71a; }

/* slider */
.slider { height: 492px; background: #e4f0e2 url(slider-loading.gif) no-repeat center; }
.slider p { display: none; top: 0; left: 0; _position: absolute; }
.slider img { width: 100%; height: 492px; }
.slider div { position: absolute; top: 462px; left: 0; width: 100%; text-align: center; }
.slider i { display: inline-block; *zoom: 1; *display: inline; width: 14px; height: 14px; margin: 0 8px; border-radius: 7px; background-color: #555; }
.slider .current { background-color: #36cf56; }

/* ie6~8 hack */
.slider i { background: url(img/slider-light-ie.png) no-repeat -14px 0\9; background-color: transparent\9; _overflow: hidden; }
.slider .current { background-position: 0 0\9; background-color: transparent\9; }

/* games */
.games-menu li, .games-menu i { background: url(img/games-el.png) no-repeat 0 0; }

.games { height: 280px; background-color: #f3f6f9; }

.games-menu .wrap { position: relative; padding-top: 37px; }
.games-menu .box { position: relative; height: 223px; overflow: hidden; }
.games-menu ul { position: absolute; top: 3px; left: 0; }
.games-menu li, .games-menu li p { width: 348px; height: 200px; }
.games-menu li { margin: 0 8px 0 10px; padding-bottom: 20px; background-position: 0 200px; }
.games-menu li p { top: 0; left: 0; background-repeat: no-repeat; *cursor: pointer; }
.games-menu li i { top: -3px; right: -3px; width: 57px; height: 58px; }
.games-menu .page { top: 124px; width: 30px; height: 33px; cursor: pointer; }
.games-menu .prev { left: -50px; background-position: -288px -45px; }
.games-menu .next { right: -50px; background-position: -318px -45px; }

.games-menu .front { background-position: 0 0; }
.games-menu .back { top: 200px; height: 0; background-position: 0 -200px; _overflow: hidden; }
.games-menu .name { top: 160px; left: 0; padding: 4px 0 0 20px; border-top-width: 2px; border-top-style: solid; font-size: 1.5em; }
.games-menu .name em { font-size: .7em; color: #888; }
.games-menu .state { top: 174px; right: 18px; color: #f3f3f3; }

.games-menu .hot i { background-position: 0 -20px; }
.games-menu .hot .name { border-top-color: #d93d1e; color: #d93d1e; }
.games-menu .new i { background-position: -57px -20px; }
.games-menu .new .name { border-top-color: #48b518; color: #48b518; }

.games-menu .df p { background-image: url(img/games-df.jpg); }
.games-menu .mx p { background-image: url(img/games-mx.jpg); }
.games-menu .dy p { background-image: url(img/games-dy.jpg); }
.games-menu .sg p { background-image: url(img/games-sg.jpg); }
.games-menu .yx p { background-image: url(img/games-yx.jpg); }
.games-menu .jzmy p { background-image: url(img/games-jzmy.jpg); }
.games-menu .bbc p { background-image: url(img/games-bbc.jpg); }

.games-show { display: none; top: -280px; left: 0; width: 100%; background: url(img/games-bg.png) no-repeat 0 0; color: #f3f6f9; }
.games-show .wrap { height: 280px; }
.games-show .close { top: 0; right: 8px; width: 34px; height: 34px; background-color: #000; opacity: 0; filter: alpha(opacity=0); }
.games-show .close:hover { opacity: 0.1; filter: alpha(opacity=10); }

.games-show .intro { width: 516px; margin-left: 8px; }
.games-show .intro h2 { height: 70px; padding-top: 40px; font-size: 1.7em; }
.games-show .intro img { position: relative; top: -8px; width: 90px; height: 58px; margin-right: 4px; vertical-align: middle; }
.games-show .intro .brief { text-indent: 2em; font-size: 1.2em; }
.games-show .intro .more { top: 56px; right: 0; font-size: 1.3em; }
.games-show .intro .more a { margin-left: .5em; padding: .1em 1em; color: #272836; }
.games-show .intro .more .gre { background-color: #44b790; }
.games-show .intro .more .org { background-color: #fca158; }
.games-show .intro .more .blu { background-color: #66d0fa; }
.games-show .intro .more a:hover { text-decoration: none; }
.games-show .intro .more .gre:hover { background-color: #38c476; }
.games-show .intro .more .org:hover { background-color: #fc914f; }
.games-show .intro .more .blu:hover { background-color: #5ec0fa; }

.games-show .screenshot { top: 40px; left: 558px; width: 460px; }
.games-show .screenshot ul, .games-show .screenshot li, .games-show .screenshot img { width: 348px; height: 200px; }
.games-show .screenshot ul { overflow: hidden; }
.games-show .screenshot li { top: 0; left: 0; background: url(img/games-loading.gif) no-repeat center; }
.games-show .screenshot i { top: 78px; width: 45px; height: 45px; cursor: pointer; }
.games-show .screenshot .b { z-index: 9; top: 0; left: 56px; width: 336px; height: 188px; border: 6px solid #f3f6f9; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=) repeat 0 0; opacity: .4; filter: alpha(opacity=40); }
.games-show .screenshot .l { left: 0; }
.games-show .screenshot .r { right: 0; }
.games-show .screenshot .hover { background-color: #fff; opacity: .1; filter: alpha(opacity=10); }

/* news & service */
.news, .service { margin: 0 10px; padding-bottom: 4em; }
.news h2, .service h2 { padding: 2em 0 .5em; border-bottom: 1px solid #d5d9dd; font-size: 1.5em; }

/* news */
.news { width: 714px; }
.news div { height: 120px; margin-top: 2em; padding-right: 40px; }
.news img { width: 230px; height: 120px; }
.news .pic { z-index: 9; margin-right: 60px; }
.news .headline { padding: .7em 0; font-size: 2em; }
.news .brief { *zoom: 1; line-height: 22px; color: #888; }
.news .more { top: 22px; right: 0; color: #4ab71a; }

.news i { width: 9px; height: 9px; border-style: solid; border-color: #d5d9dd; _overflow: hidden; }
.news .lt { top: 0; left: 250px; border-width: 1px 0 0 1px; }
.news .rb { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* service */
.service li a, .contact { background: url(img/icon-service.png) no-repeat 0 0; }

.service { width: 346px; }
.service ul { height: 290px; border-bottom: 1px solid #d5d9dd; }
.service li { width: 115px; margin-top: 42px; }
.service li a { display: block; padding-top: 58px; font-size: 1.3em; }
.service li a:hover { color: #4ab71a; text-decoration: none; }
.service li .my { background-position: 0 0; }
.service li .pay { background-position: -115px 0; }
.service li .cs { background-position: 0 -100px; }
.service li .jyr { background-position: -115px -100px; }
.service li .dbg { background-position: -230px -100px; }
.service li .shop { background-position: 0 -200px; }

.contact { height: 80px; margin-top: 36px; padding-top: 25px; background-color: #f3f6f9; background-position: -226px 34px; }
.contact p { text-indent: 108px; line-height: 1.8; font-size: 1.3em; }