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

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

.page-zt-blueray{
    background: #ffffff;
    min-height: 100%;
    padding-top: px2rem(100);
    .blueray-hd{
        // position: relative;
        position: fixed;
        top: 0;
        z-index: 2;
        background: #ffffff;
        overflow: hidden;
        width: 100%;
        &.active{
            overflow: inherit;
            .hd-row1{
                &:after{
                    top: px2rem(0);
                    transform: rotate(-45deg);
                }
            }
            .hd-row2{
                transform: translateY(0);
            }
        }
        &.is-fixed{
            position: fixed;
            top: 0;
            .hd-row3{
                display: block;
            }
        }
    }
    .hd-row1{
        text-align: center;
        line-height: px2rem(100);
        position: relative;
        z-index: 2;
        background: #FFFFFF;
        font-size: px2rem(28);
        color: #181818;
        span{
            color: $orange;
            margin: 0 px2rem(12);
        }
        &:after{
            content: '';
            position: relative;
            top: px2rem(-8);
            display: inline-block;
            width: px2rem(12);
            height: px2rem(12);
            border-top: 1px solid $orange;
            border-right: 1px solid $orange;
            transform: rotate(135deg);
        }
    }
    .hd-row2{
        position: absolute;
        width: 100%;
        z-index: 1;
        background: #ffffff;
        transform: translateY(-100%);
        transition: all .2s;
        text-align: center;
        padding-bottom: px2rem(26);
        border-bottom: 1px solid $borderColor;
        font-size: px2rem(24);
    }
    .hd-row3{
        display: none;
    }
    .calendar-hd{
        @include webkitbox();
        line-height: px2rem(60);
        background: #f2f2f2;
        .col-fl,.col-fr{
            width: px2rem(60);
            &:before{
                content: '';
                display: inline-block;
                width: px2rem(12);
                height: px2rem(12);
                border-top: 1px solid #ababab;
                border-left: 1px solid #ababab;
            }
            &:active{
                background: #eaeaea;
            }
        }
        .col-fl{
            &:before{
                @include rotate(-45deg);
            }
        }
        .col-fr{
            &:before{
                @include rotate(135deg);
            }
        }
        .col-fm{
            @include flex(1);
            color: #666666;
        }
    }
    .calendar-bd{
        ul{
            @include clearfix();
        }
        li{
            float: left;
            width: px2rem(154);
            height: px2rem(109);
            border-radius: px2rem(5);
            border: 1px solid $borderColor;
            color: $orange;
            padding-top: px2rem(10);
            margin: px2rem(26) 0 0 px2rem(26);
            p{
                font-size: px2rem(32);
                color: #181818;
                line-height: px2rem(53);
            }
            &.active{
                background: $orange;
                color: #FFFFFF;
                p{
                    color: #FFFFFF;
                }
            }
        }
    }
    .blueray-bd{
        position: relative;
        z-index: 1;
        .zt-list-film{
            .item-film{
                padding: px2rem(20) px2rem(24) px2rem(20) px2rem(30);
                border: none;
            }
        }
    }
    .list-date{

    }
    .item-date{
    }
    .title-date{
        padding-left: px2rem(20);
        position: relative;
        font-size: px2rem(24);
        color: #888888;
        line-height: px2rem(60);
        border-top: 1px solid #dcdcdc;
        padding-top: px2rem(10);
        background: #FFFFFF;
        i{
            display: inline-block;
            width: px2rem(20);
            height: px2rem(20);
            border-radius: 50%;
            background: rgba(255,111,0,0.2);
            padding: px2rem(5) 0 0 px2rem(5);
            margin-right: px2rem(10);
            &:before{
                content: '';
                display: block;
                width: px2rem(10);
                height: px2rem(10);
                border-radius: 50%;
                background: $orange;
            }
        }
    }
    .no-blueray{
        background: url(../../img/bg-no-blueray.png) center px2rem(200) no-repeat;
        background-size: auto px2rem(164);
        font-size: px2rem(28);
        color: #888888;
        text-align: center;
        padding-top: px2rem(400);
        border-top: 1px solid $borderColor;
    }
}