@import "../../../sass/base/mixins";

$borderColor : #dcdcdc;
$orange : #ff6b1a;

.page-zt-boxofficePlus,.page-zt-boxofficeDetail{
    min-height: 100%;
    background: #ffffff;
    padding-top:px2rem(140);
    &.is-ch{
        padding-top:px2rem(310);
    }
    .boxoffice-ch-detail{
        position: relative;
        color: #ffffff;
        text-align: center;
        height: px2rem(180);
        background: url(./../../img/bg-boxoffice-hd.jpg) 0 center / 100% no-repeat;
        h2{
            font-size: px2rem(32);
            padding: px2rem(60) 0 px2rem(15) 0;
            span{
                color: $orange;
                font-size: px2rem(20);
            }
            em{
                font-size: px2rem(32);
            }
        }
        p{
            font-size: px2rem(20);
            color: rgba(#ffffff,0.5);
        }
        .date{
            position: absolute;
            top: px2rem(24);
            left: px2rem(24);
            font-size: px2rem(24);
        }
    }
    .boxoffice-hd{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
    }
    .boxoffice-bd{
        position: relative;
        z-index: 1;
    }
    .boxoffice-tab-thead{
        @include webkitbox();
        color: #999999;
        font-size: px2rem(20);
        text-align: center;
        line-height: px2rem(50);
        height: px2rem(50);
        background: #f6f6f6;
        li{
            &:first-child{
                @include flex(1);
                padding: 0 px2rem(24);
                text-align: left;
            }
            &:nth-child(2){
                width: px2rem(120);
            }
            &:nth-child(3),&:nth-child(4),&:nth-child(5){
                width: px2rem(110);
            }
        }
    }
    .boxoffice-tab-tbody{
        .tab-row{
            @include webkitbox();
            line-height: px2rem(94);
            height: px2rem(94);
            color: #999999;
            font-size: px2rem(24);
            text-align: center;
            &:hover{
                opacity: 0.8;
            }
            &:nth-child(even){
                background: #f6f6f6;
            }
            li{
                &:first-child{
                    @include flex(1);
                    padding: 0 px2rem(24);
                    text-align: left;
                }
                &:nth-child(2){
                    width: px2rem(120);
                }
                &:nth-child(3),&:nth-child(4),&:nth-child(5){
                    width: px2rem(110);
                }
            }
            h3{
                color: #181818;
                line-height: 1;
                padding: px2rem(22) 0 px2rem(10);
                @include ellipsis();
            }
            p{
                font-size: px2rem(22);
                line-height: 1.1;
                @include ellipsis();
            }
            span{
                color: $orange;
            }
        }
    }
    .box-rank{
        position: relative;
        z-index: 1;
        .hd-row1{
            @include webkitbox();
            line-height: px2rem(80);
            text-align: center;
            font-size: px2rem(28);
            background: #FFFFFF;
            li{
                @include flex(1);
            }
            a{
                display: block;
                color: #292929;
                position: relative;
                &.active{
                    color: $orange;
                    &:before{
                        opacity: 1;
                    }
                }
                &:before{
                    content: '';
                    position: absolute;
                    left: 50%;
                    margin-left: px2rem(-15);
                    bottom: px2rem(15);
                    width: px2rem(30);
                    height: px2rem(5);
                    background: $orange;
                    border-radius: px2rem(5);
                    opacity: 0;
                }
            }
        }
        .hd-row2{
            display: flex;
            justify-content: space-between;
            background: #f2f2f2;
            line-height: px2rem(60);
            height: px2rem(60);
            font-size: px2rem(24);
            padding: 0 px2rem(24);
            overflow: hidden;
            color: #666666;
            p{
                a{
                    &.active{
                        color: $orange;
                    }
                }
            }
            .tip{
                font-size: px2rem(20);
                color: #919090;
            }
        }
    }
    .box-detail{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        transform: translateX(100%);
        transition: all .4s;
        @include webkitbox(2);
        &.active{
            transform: translateX(0);
        }
        .film-nav{
            @include webkitbox();
            line-height: px2rem(80);
            text-align: center;
            font-size: px2rem(28);
            background: #FFFFFF;
            .btn{
                height: px2rem(80);
                width: px2rem(80);
            }
            h2{
                @include flex(1);
                text-align: center;
                font-size: px2rem(36);
                color: $orange;
            }
            .btn-back{
                background: url(../../img/btn-back.png) center / px2rem(40) no-repeat;
            }
        }
        .film-detail{
            position: relative;
            overflow: hidden;
            color: #FFFFFF;
            .detail-info{
                position: relative;
                @include webkitbox();
                padding: px2rem(30) px2rem(40);
            }
            .detail-bg{
                position: absolute;
                top: -20px;
                left: -20px;
                width: 100%;
                height: 100%;
                padding: 20px;
                box-sizing: content-box;
                background-size: 120% 120%;
                background-repeat: no-repeat;
                background-position: center;
                -webkit-filter: blur(10px);
                -moz-filter: blur(10px);
                -ms-filter: blur(10px);
                filter: blur(10px);
                filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
                &:before{
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(#000000,0.2);
                }
            }
            .detail-boxoffice{
                position: relative;
                text-align: center;
                background: rgba(#000000,0.5);
                font-size: px2rem(20);
                ul{
                    @include webkitbox();
                    padding: px2rem(20) px2rem(24);
                }
                li{
                    @include flex(1);
                }
                p{
                    margin-bottom: px2rem(16);
                }
                em{
                    font-size: px2rem(30);
                }
            }
            .info-cover{
                width: px2rem(120);
                height: px2rem(170);
                background: #fefefe;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                border-radius: px2rem(5);
                margin-right: px2rem(20);
            }
            .info-cont{
                font-size: px2rem(24);
                line-height:  px2rem(40);
                h1{
                    font-size: px2rem(32);
                    margin-bottom: px2rem(12);
                }
            }
        }
        .box-detail_bd{
            @include flex(1);
            overflow: auto;
        }
    }
}
