$deviceWidth: 750;
@function vmin($rpx) {
    @return #{$rpx * 100 / $deviceWidth}vmin;
}

@keyframes popping {
    from {
        transform: translateY(vmin(11.2));
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@mixin container-rules {
    animation: popping ease 300ms;
    position: absolute;
    top: 0;
    left: 0;
    width: vmin(750);
    height: calc(100% - 287px);
    background-color: #fff !important;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 999;
}
@mixin viewAreaPackUp {
    height: calc(100% - 80px);
}
@mixin viewUnPackUp {
    height: 100%;
    width: 100%;
}

@mixin wrapper {
    height: 100%;
    .header {
        height: vmin(94);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(50,50,51,1);
        font-size: vmin(28);
        font-weight: 700;
        font-family: "PingFang SC";
        text-align: center;
    }
    .icon-left-back {
        position: absolute;
        left: vmin(20);
        transform: rotate(270deg);
        width: vmin(45);
        height: vmin(45);
    }
    .detail {
        box-sizing: border-box;
        overflow-y: scroll;
        height: calc(100% - 47px);
        .detail-info {
            padding: vmin(16) vmin(32) 0;
        }
    }

}

.container-rules {
    @include container-rules;
}

.viewAreaPackUp {
    @include viewAreaPackUp;
}

.viewUnPackUp {
    @include viewUnPackUp;
}

.wrapper {
    @include wrapper;
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
    $deviceWidth: 1536 !global;

    .container-rules {
        @include container-rules;
    }
    
    .viewAreaPackUp {
        @include viewAreaPackUp;
    }
    
    .viewUnPackUp {
        @include viewUnPackUp;
    }
    
    .wrapper {
        @include wrapper;
    }
}

// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
    $deviceWidth: 1536 !global;

    .container-rules {
        @include container-rules;
    }
    
    .viewAreaPackUp {
        @include viewAreaPackUp;
    }
    
    .viewUnPackUp {
        @include viewUnPackUp;
    }
    
    .wrapper {
        @include wrapper;
    }
}