.hide{
    display: none;
}

.container{
    position: relative;
    width: 100%;
    overflow: hidden;
}
#contents_wrapper{
    padding-bottom: 0 !important;
}
.v-main{
    min-width: 1000px;
}
.v-main .p-v{
    width: 100%;
    position: relative;
}
.v-main .p-v>img{
    width: 100%;
    display: block;
}
.mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.7;
    left: 0;
    top: 0;
}
.mask-35{
    opacity: 0.35;
}
.mask-60{
    opacity: 0.6;
}
.mask-white{
    background-color: #fff;
    opacity: 0.97;
}
.mask-black{
    background-color: #000;
    opacity: 0.97;
}
.sprite-zoom{
    position: absolute;
    width: 29% !important;
    left: 13%;
    top: -4%;
}
.link-rule{
    display: block;
    width: 26%;
    height: 66%;
    position: absolute;
    left: 15.3%;
    top: 19%;
    cursor: pointer;
}
.link-r5-club{
    width: 9%;
    height: 9%;
    position: absolute;
    left: 16.5%;
    top: 80%;
    cursor: pointer;
}
.link-flow{
    display: block;
    width: 26%;
    height: 69%;
    position: absolute;
    left: 57.5%;
    top: 19%;
    cursor: pointer;
}
.link-reward{
    display: block;
    width: 30.5%;
    height: 35.7%;
    position: absolute;
    left: 57.8%;
    top: 35%;
    cursor: pointer;
}
.btn-link1{
    display: block;
    width: 14%;
    height: 76%;
    position: absolute;
    left: 12.4%;
    top: 9%;
}
.btn-link2{
    display: block;
    width: 14%;
    height: 76%;
    position: absolute;
    left: 29.4%;
    top: 9%;
}
.btn-link3{
    display: block;
    width: 30.5%;
    height: 63.5%;
    position: absolute;
    left: 13.8%;
    top: 6%;
}
.btn-link4{
    display: block;
    width: 30.5%;
    height: 63.7%;
    position: absolute;
    left: 56%;
    top: 6%;
}
.btn-link5{
    display: block;
    width: 31.2%;
    height: 35.7%;
    position: absolute;
    left: 11.4%;
    top: 35%;
}


/* ******************************** intro page ************************************ */
.intro-page{
    background-color: unset;
    z-index: 1000;
}
.intro-r5-club-board, .service-flow-board, .reward-pop1-board, .reward-pop2-board{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.reward-pop1-board, .reward-pop2-board{
    z-index: 10000;
}
.intro-r5-club{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 443px;
    transform: translate(-50%, -50%);
    z-index: 99;
    background-image: url("../images/pc/pop1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.service-flow-content-board{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 80%;
    transform: translate(-50%, -50%);
    z-index: 99;
    min-height: 100px;
}
.service-flow-content-inner{
    position: absolute;
    top: 66px;
    height: calc(100% - 106px);
    width: 98%;
    left: 1%;
    overflow: auto;
}
.service-flow-content-inner img{
    width: 100%;
}
.service-flow-content-bg-01{
    position: relative;
    width: 100%;
    display: block;
}
.service-flow-content-bg-02{
    position: relative;
    width: 100%;
    height: calc(100% - 105px);
    display: block;
}
.service-flow-content-bg-03{
    position: relative;
    width: 100%;
    display: block;
}
.service-flow-btn-close{
    position: absolute;
    display: block;
    right: 20px;
    top: 20px;
    width: 5%;
    cursor: pointer;
}
.intro-r5-club-btn-close{
    position: absolute;
    right: 32px;
    top: 23px;
    width: 36px;
    height: 36px;
    cursor: pointer;
}
.intro-board{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 80vh;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 50px 0px #aaa;
}
.intro-btn-close{
    position: absolute;
    width: 17px;
    right: 15px;
    top: 15px;
    z-index: 1;
    cursor: pointer;
}
.intro-title{
    position: relative;
    width: 100%;
    height: 80px;
    font-size: 20px;
    color: #5a5a5a;
}
.intro-title span{
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.intro-content{
    position: absolute;
    width: 100%;
    height: calc(100% - 100px);
    left: 50%;
    top: 80px;
    transform: translate(-50%, 0%);
    overflow-y: auto;
    padding: 0 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 14px;
    color: #5a5a5a;
    line-height: 20px;
}
.intro-content-flow{
    top: 40px;
    height: calc(100% - 80px);
}
.intro-content-flow .p-v{
    width: 100%;
    position: relative;
}
.intro-content-flow .p-v>img {
    width: 100%;
    display: block;
}
.intro-board-flow{
    height: 90vh;
}

.reward-btn{
    position: fixed;
    left: 5px;
    top: 30%;
    width: 130px;
    z-index: 98;
    cursor: pointer;
}
.reward-pop1{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    padding-bottom: 27.91%;
    transform: translate(-50%, -50%);
    z-index: 99;
    background-image: url("../images/pc/reward_pop1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.reward-pop1-btn-detail{
    position: absolute;
    left: 27%;
    top: 66%;
    width: 46%;
    height: 20%;
    cursor: pointer;
}
.reward-pop1-btn-close{
    position: absolute;
    right: 0%;
    top: 0%;
    width: 8%;
    height: 14%;
    cursor: pointer;
}
.intro-tips{
    font-size: 14px;
    width: 80%;
    margin: 0 auto;
}
.number-board{
    position: relative;
    width: 90%;
    margin: 0 auto;
}
.number-board div {
    position: relative;
    float: left;
    width: 50%;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    color: #5a5a5a;
}
.number-board div span:first-of-type{
    margin-left: 0px;
}
.number-board div span{
    margin-left: 17px;
}
.reward-pop2-board .intro-board{
    min-width: 900px !important;
}
.reward-pop2-board .intro-content{
    height: calc(100% - 150px);
    top: 130px;
}



.mini-program-board{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 25vw;
    height: 25vw;
    max-width: 974px;
    max-height: 393px;
    transform: translate(-50%, -50%);
}
.mini-program-img{
    width: 100%;
}
.mini-program-board-close-btn{
    position: absolute;
    right: 1%;
    top: 1%;
    width: 8%;
    height: 20%;
    cursor: pointer;
}