@charset "UTF-8";
@import "mixins";

@function border(){
    @return 1px solid #dedede;
}
@mixin full{
    display: block;
    width: 100%;
    height: 100%;
}

.page-game {
    overflow: hidden;
    .mod-title {
        padding:px2rem(35) 0;
        @include clearfix;   
        .content {
            float: left;
            line-height: px2rem(45);
            font-size: px2rem(32);
            font-weight: bold;
            i {
                display: inline-block;
                width: px2rem(22);
                height: px2rem(22);
                margin-right: px2rem(12);
            }
            
        }
        a {
            float: right;
            display: block;
            color: #999;
            font-size: px2rem(24);
            line-height: px2rem(45);            
            i {
                display: inline-block;
                width: px2rem(11);
                height: px2rem(20);
                margin-left: px2rem(18);
                background: url(../../img/icon-arrow.png) no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    nav {
        padding: 0 px2rem(25);
        border-bottom: border();
        ul {
            @include clearfix;
            margin-right: -px2rem(92);
            li {
                line-height: px2rem(90);
                margin-right: px2rem(92);
                float: left;
                font-size: px2rem(30);
                font-weight: bold;
                color: #999;
                a {
                    color: #999;
                }
                &.current {
                    a { 
                        color: #000;
                    }
                    border-bottom: 2px solid #fe4953; 
                }
            }
        }
    }
    .carousel {
        padding: px2rem(35) 0 0 0;
        ul {
            height: px2rem(320);
            perspective: 200px;
            transform-style: preserve-3d;
            position: relative;        
        }
        li {
            width: px2rem(650);
            height: px2rem(320);
            position: absolute;
            transition: all .8s ease;
            left: 50%;
            top: 0;
            margin-left: -px2rem(325);
            z-index: 1;
            visibility: hidden;
            transform: translate3d(0,0,-200px);
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
            border: 1px solid #ebebeb;
            
            
            &.first {
                transform:translate3d(0,0,0); 
                z-index: 5;
                visibility: visible;
                a {
                    &:after {
                        background: rgba(0,0,0,0);
                    }
                }
                
            }
            &.second {
                transform: translate3d(100%,0,-200px); 
                z-index: 5;
                visibility: visible;                
            }
            &.last {
                transform: translate3d(-100%,0,-200px);  
                z-index: 5;    
                visibility: visible;                
            }
            a {
                @include full;
                &:after {
                    content: "";
                    background: rgba(0,0,0,.4);
                    position: absolute;
                    @include full;
                    z-index: 22;
                    top: 0;
                    left: 0;
                    transition: all .8s ease;
                }
                img {
                    @include full;
                }
            }
        }
        h3 {
            line-height: px2rem(100);
            font-size: px2rem(32);
            color: #000;
            text-align: center;
            display: none;
            &.first {
                display: block;
            }
        }
    }
    .rank {
        padding: px2rem(35) 0;
        width: px2rem(700);
        margin: 0 auto;
        border-top:border();
        border-bottom: border() ;
        ul {
            @include clearfix;
            margin-right: -px2rem(5);
            li {
                float: left;
                width: px2rem(230);
                height: px2rem(130);
                margin-right: px2rem(5);
                position: relative;
                img {
                    @include full;
                }
                a {
                    position: absolute;
                    @include full;
                    top: 0;
                    left: 0;
                    // background: rgba(0,0,0,.2);
                    line-height: px2rem(130);
                    text-align: center;
                    color: #fff;
                    font-size: px2rem(30);
                }
            }
        }
    }
    .mod {
        padding: 0 px2rem(25);
        &:after {
            content: "";
            display: block;
            height: 0;
            width: px2rem(700);
            margin: 0 auto;
            border-bottom: border();
        }
        .new-icon {
            background: url(../../img/icon-new.png) no-repeat;
            background-size: 100% 100%; 
        }
        
        .tb-wrap {
            overflow-x:scroll; 
            -webkit-overflow-scrolling : touch;
        }
        .tb-wrap::-webkit-scrollbar {
            display: none;
        }
        table {
            td {
                
                a {
                    display: block;
                    margin-right: px2rem(22);
                    img {
                        width: px2rem(148);
                        height: px2rem(198);
                    }
                    p {
                        line-height: px2rem(80);
                        font-size: px2rem(26);
                        @include ellipsis;
                        color: #000;
                        font-weight: bold;

                    }
                }
            }
        }
    }
    .mod.mobgame {
        .mob-icon {
            background: url(../../img/icon-sy.png) no-repeat;
            background-size: 100% 100%;
        }
        img {
            width: px2rem(148);
            height: px2rem(148);
            border-radius: 5px;
        }
        p {
            line-height: px2rem(50); 
            margin-top: px2rem(10); 
            width: px2rem(148);
            @include ellipsis;          
        }
        em {
            display: block;
            color: #999;
            font-size: px2rem(24);
            line-height: px2rem(50);
            margin-bottom: px2rem(20);   
            @include ellipsis;                    
        }
    }
    .ka {
        padding: 0 px2rem(25);
        .ka-icon {
            background: url(../../img/icon-ka.png) no-repeat;
            background-size: 100% 100%;
        }
        ul {
            li {
                border-bottom: border();
                padding: px2rem(30) 0;
                a {
                    @include clearfix;
                    display: block;
                }
                .content {
                    float: left;
                    width: px2rem(550);
                    @include ellipsis;
                    font-size: px2rem(32);
                    color: #000;
                }
                .status {
                    float: right;
                    display: block;
                    color: #999;
                    font-size: px2rem(24);
                    line-height: px2rem(45);            
                    i {
                        display: inline-block;
                        width: px2rem(11);
                        height: px2rem(20);
                        margin-left: px2rem(18);
                        background: url(../../img/icon-arrow.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }
    }

}