/*body{
    background-size:100%;
    background-image: url('/bg.jpg');
}
body>div{
    opacity: 0.6;
}
div{
    border: solid 1px #F00;
}
*/


/* 超小屏幕（手机，小于 768px） */

@font-face {
    font-family: verdana;
    src: url('/assets/font/verdana.ttf');
}

@font-face {
    font-family: erasbd;
    src: url('/assets/font/Eras Bold ITC.TTF');
}

@font-face {
    font-family: eras;
    src: url('/assets/font/ERASDEMI.TTF');
}

@font-face {
    font-family: trebuchet;
    src: url('/assets/font/Trebuchet MS');
}

html {
    font-size: 12px;
    overflow-x: hidden;
    text-align: center;
}

#main-content {
    font-size: 1rem;
}


/*header begin*/

#header {
    width: 100%;
    position: fixed;
    background-color: #f1f1f1;
    height: 3.7rem;
    font-size: 1rem;
}

#header .container {
    width: 100%;
}

#logo {
    float: left;
    height: 3.7em;
}

#logo>img {
    height: 100%;
    margin-left: 0.6rem;
}

.nav {
    font-family: tahoma, arial, 'Hiragino Sans GB', 'Microsoft Yahei', 宋体;
    background-color: #f1f1f1;
    padding-top: calc((3.7rem - 50px) / 2);
}

.navbar {
    margin-bottom: 0px;
    height: 3.7em;
    background-color: #f1f1f1;
}

.navbar-toggle {
    padding: 0;
    margin-top: 0.35em;
}

.navbar .nav>li>a {
    color: #777;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
}

#bs-navbar {
    border: none;
}

.navbar-nav {
    margin: 0 -15px;
}

.glyphicon-menu-hamburger:before {
    color: #f8aa32;
    font-size: 1.67em;
    line-height: 1.67em;
}

.glyphicon-remove {
    display: none;
    color: #f8aa32;
    font-size: 1.67em;
    line-height: 1.67em;
}


/*header end*/

#content {
    margin-left: auto;
    margin-right: auto;
    background-color: #f1f1f1;
    padding-top: 3.7rem;
}

.game-item {
    clear: both;
}

.game-pic-div {
    position: relative;
    width: 100%;
}

.game-intro-div {
    width: 100%;
}

.game-item:nth-child(even) .game-pic-div,
.game-item:nth-child(odd) .game-intro-div {
    float: right;
    background-color: #f1f1f1;
}

.game-item:nth-child(even) .game-intro-div,
.game-item:nth-child(odd) .game-pic-div {
    float: left;
    background-color: #f1f1f1;
}

.game-title,
.game-title-detail {
    font-family: erasbd, "Microsoft YaHei", 微软雅黑;
    font-size: 1.41rem;
    margin-top: 1rem;
}

@media screen and (max-width: 1200px) {
    #main-content {
        padding: 0;
    }
    .container {
        width: 100%;
    }
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .game-title,
    .game-title-detail {
        font-size: 2.2rem;
    }
}

@media screen and (min-width: 992px) {
    .game-intro-div,
    .game-pic-div {
        width: 50%;
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 22px;
    }
    #header {
        width: 1200px;
        font-size: 0.7rem;
        height: 2.59rem/*calc(3.7rem * 0.7);*/
        ;
        margin-left: -600px;
        left: 50%;
    }
    #content {
        width: 1200px;
        padding-top: 2.59rem/*calc(3.7rem * 0.7);*/
        ;
    }
    .nav {
        padding-top: calc((3.7rem * 0.7 - 50px) / 2);
    }
    #footer {
        width: 1200px;
    }
}

@media screen and (min-width: 1600px) {
    html {
        font-size: 22px;
    }
    #header {
        width: 1600px;
        font-size: 0.8rem;
        height: 2.96rem/*calc(3.7rem * 0.8);*/
        ;
        margin-left: -800px;
        left: 50%;
    }
    #content {
        width: 1600px;
        padding-top: 2.96rem/*calc(3.7rem * 0.8);*/
        ;
    }
    #footer {
        width: 1600px;
    }
    .nav {
        padding-top: calc((3.7rem * 0.8 - 50px) / 2);
    }
}

.game-pic {
    width: 100%;
}

.game-logo,
.game-logo-detail {
    margin-top: 4rem;
}

.game-logo img,
.game-logo-detail>img {
    width: 30%;
}

.game-intro {
    color: #727272;
    text-align: left;
    font-family: verdana, "Microsoft YaHei", 微软雅黑;
    font-size: 1rem;
    padding: 0 18%/*vw*/
    ;
    margin-top: 2rem;
    line-height: 1.75;
}

.readmore {
    margin: 2rem 0;
}

.btn-readmore,
.btn-readmore:hover {
    background-color: #ff950a;
    border-radius: 0;
    border: none;
    color: #fff;
    font-size: 1rem;
    padding: 0.65rem 1.1rem;
    margin: 0;
    font-family: eras;
}

@media(max-width:768px) {
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-xs-1,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9 {
        padding-right: 5px;
        padding-left: 5px;
    }
}


/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: 992px) {
    .game-logo {
        margin-top: 1rem;
    }
    .game-logo>img {
        width: 30%;
    }
    .game-intro {
        font-size: 1rem;
        padding: 0 4%/*2vw*/
        ;
        margin-top: 1rem;
        overflow: hidden;
        height: 1.75rem;
    }
    .readmore {
        margin: 1.1rem 0;
    }
}


/*game detail begin*/

#download-div {
    padding: 50px 0;
    margin: auto;
    text-align: center;
}

.download {
    width: 20%;
    display: inline-block;
    margin: 20px;
}

.download img {
    width: 100%;
}

@media (max-width: 768px) {
    .download {
        width: 35%;
        margin: 4%;
    }
}

#detail-game-pic-div {
    /*overflow-x: scroll;*/
    /*overflow-y: hidden;*/
    overflow: hidden;
    /*padding: 0.2em 0 1em 0;*/
    padding: 0.2em 0;
    border-top: solid #dcdcdc 1px;
    border-bottom: solid #dcdcdc 1px;
    background-color: #f7f7f7
}

#detail-game-pic-window {
    width: 500%;
}

.detail-game-pic {
    width: auto;
    float: left;
    margin: 10px 13px 10px 4px;
    /*max-width: 50%;*/
}

.detail-game-pic img {
    /*margin: 2px;*/
    /*border: 1px solid #fff;*/
    /*-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.3);*/
    /*-moz-box-shadow: #999 0 3px 5px;*/
    max-width: 98vw;
}

#game-intro-div {
    width: 70%;
    margin: auto;
}

#game-intro {
    padding: 0;
    height: auto;
}

#scroll-div {
    height: 20px;
    margin-top: -20px;
    background-color: #f1f1f1;
    border-top: solid #dcdcdc 1px;
}

@media screen and (max-width: 1680px) {
    .detail-game-pic img {
        max-height: 622px;
        /*calc(728px - 4rem);*/
    }
    @media screen and (max-width: 1280px) {
        .detail-game-pic img {
            max-height: 484px;
            /*calc(576px - 4rem);*/
        }
        @media only screen and (max-width: 1023px) {
            .detail-game-pic img {
                max-height: 610px;
                /*calc(690px - 4rem);*/
            }
            @media only screen and (max-width: 767px) {
                .detail-game-pic img {
                    max-height: 417px;
                    /*calc(465px - 4rem);*/
                }
            }
        }
    }
}


/*game detail end*/


/*footer begin*/

#footer {
    clear: both;
    font-family: trebuchets, "Microsoft YaHei", 微软雅黑;
    color: #f8aa32;
    background-color: #f8f8f8;
    text-align: left;
    font-size: 0.87rem;
    line-height: 1.36rem;
    padding: 1.36rem 0 2.18rem 3.27rem;
    margin: auto;
}

#footer a {
    color: #f8aa32;
    text-decoration: none;
}

.icp {
    font-size: 0.87rem;
}

.footer-link img {
    width: 40px;
}

@media screen and (min-width: 992px) {
    #footer {
        text-align: center;
        padding: 0;
    }
    .footer-link {
        display: inline-block;
        margin: auto;
        padding: 50px 20px 30px 20px;
    }
    .icp {
        padding-top: 20px;
        font-size: 0.55rem;
    }
}


/*footer end*/

#msg-div {
    width: 80%;
    margin: auto;
    text-align: left;
}

.msg {
    border: 1px solid #9a9494;
    background-color: #aaaaaa;
    border-radius: 10px;
    margin-top: 5px;
    padding: 5px;
    clear: both;
}

.name {
    color: #fff;
}

#text {
    border: 1px solid rgb(154, 148, 148);
    border-radius: 10px;
    height: 60px;
    width: 100%;
    padding: 0;
}

#submit {
    background: rgb(66, 184, 221);
    color: white;
    border-radius: 4px;
    border: transparent;
    text-decoration: none;
    padding: .5em 1em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-top: 20px;
}