/*container background*/
.index-container{
	background: url(../images/page1.jpg) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 950px;
    min-height: 950px;
    max-height: 950px;
    margin: 0 auto;
}
.page2-container{
    background: url(../images/page_bg.jpg) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 950px;
    min-height: 950px;
    max-height: 950px;
    margin: 0 auto;
}
.page3-container{
    background: url(../images/page_bg.jpg) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 950px;
    min-height: 950px;
    max-height: 950px;
    margin: 0 auto;
}
.page4-container{
    background: url(../images/page_bg.jpg) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 950px;
    min-height: 950px;
    max-height: 950px;
    margin: 0 auto;
}
.page5-container{
    background: url(../images/page_bg.jpg) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 950px;
    min-height: 950px;
    max-height: 950px;
    margin: 0 auto;
}
/*base setting*/
.container-col{
    width: 600px;
    min-width: 600px;
    height: 800px;
    min-height: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 160px 80px 0px 80px;
}
.index-col{
    padding: 500px 80px 0px 80px;
}
.col-adj{
    width: 100%;
    height: 50px;
}
.text{
    font-family: "MHeiHK";
    font-size: 18px;
    line-height: 45px;
    text-align: left;
    color: #7c7c7c;
    font-weight: bold;
}
.numtext{
    font-family: 'Allerta Stencil', sans-serif;
    color:#f3b0b2;
    font-size: 18px;
    line-height: 45px;
}
.default-text{
    padding-top: 30px;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    line-height: 25px;
}
.score-text{
    font-size: 65px;
    font-weight: bold;
    line-height: 50px;
}
.score-text span{
    padding-top: 10px;
    font-size: 45px;
    font-family: "MHeiHK";
}
.info-text{
    padding-top: 10px;
    text-align: center;
    width: 360px;
    margin: 0 auto;
    line-height: 30px;
}
.info-text span{
    color:#f3b0b2;
    font-family: "MHeiHK";
}
 .info-title span{
    padding-top: 0px;
    font-size: 20px;
    font-family: "MHeiHK";
}
.final-col{
    padding-top: 0px!important;
}
/*btn setting */
.btn-var{
    width: 200px;
    height: 100px;
}

/*checkbox setting*/
.checkbox_wrapper{
    position: relative;
    height: 50px;
    width: 50px;
}
input[type="checkbox"] {
    opacity:0;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
input[type="checkbox"] + label{
    background:url('../images/blank.png') no-repeat center center;
    background-size: contain;
    height: 50px;
    width: 50px;
    display: inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
input[type="checkbox"]:checked + label{
    background:url('../images/tick.png') no-repeat center center;
    background-size: contain;
    height: 50px;
    width: 50px;
    display: inline-block;
    padding: 0 0 0 0px;
}

/*index*/
.btn-index{
	text-align: center;
    width: 200px;
    margin: 0 auto;
}
.btn-img-st{
    background: url(../images/start_btn.jpg) no-repeat center center;
    background-size: contain;
}
/*page2*/
.btn-page2{
    text-align: center;
    width: 200px;
    margin: 0 auto;
}
.btn-img-np{
    background: url(../images/nextpage_btn.jpg) no-repeat center center;
    background-size: contain;
}
.btn-img-np:hover{
    background: url(../images/nextpage_btn_after.jpg) no-repeat center center;
    background-size: contain;
}
/*page3*/
.btn-page3{
    text-align: center;
    width: 200px;
    margin: 0 auto;
}
.btn-img-rslt{
    background: url(../images/result_btn.jpg) no-repeat center center;
    background-size: contain;
}
.btn-img-rslt:hover{
    background: url(../images/result_btn_after.jpg) no-repeat center center;
    background-size: contain;
}
/*page4*/
.btn-page4{
    text-align: center;
    width: 200px;
    margin: 0 auto;
}
.btn-img-tips{
    background: url(../images/tips_btn.jpg) no-repeat center center;
    background-size: contain;
}
.btn-img-tips:hover{
    background: url(../images/tips_btn_after.jpg) no-repeat center center;
    background-size: contain;
}
/*page5*/
.btn-page5{
    text-align: center;
    width: 200px;
    margin: 0 auto;
}
.btn-img-free{
    background: url(../images/free_btn.jpg) no-repeat center center;
    background-size: contain;
}
.btn-img-free:hover{
    background: url(../images/free_btn_after.jpg) no-repeat center center;
    background-size: contain;
}
/*gif*/
.king{
    width: 100%
}
.princess{
    width: 100%
}
.posion{
    width: 200px;
}
.crown{
    width: 130px;
    padding-bottom:10px;
}
/*result*/
#result-1{
    display: none;
}
#result-2{
    display: none;
}
#result-3{
    display: none;
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
    /*container background*/
    .index-container{
        background: url(../images/page1.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 660px;
        min-height: 660px;
        max-height: 660px;
        margin: 0 auto;
    }
    .page2-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 660px;
        min-height: 660px;
        max-height: 660px;
        margin: 0 auto;
    }
    .page3-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 660px;
        min-height: 660px;
        max-height: 660px;
        margin: 0 auto;
    }
    .page4-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 660px;
        min-height: 660px;
        max-height: 660px;
        margin: 0 auto;
    }
    .page5-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 660px;
        min-height: 660px;
        max-height: 660px;
        margin: 0 auto;
    }
    /*base setting*/
    .container-col{
        width: initial;
        min-width: initial;
        height: initial;
        min-height: initial;
        margin: 0 auto;
        text-align: center;
        padding: 25% 0% 0% 0%;
    }
    .index-col{
        padding: 80% 0% 0% 0%;
    }
    .col-adj{
        width: 100%;
        height: 40px;
        padding: 0% 12% 0% 5%;
    }
    .text{
        font-family: "MHeiHK";
        font-size: 14px;
        line-height: 25px;
        text-align: left;
        color: #7c7c7c;
        font-weight: bold;
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
    .numtext{
        font-family: 'Allerta Stencil', sans-serif;
        color:#f3b0b2;
        font-size: 18px;
        line-height: 25px;
    }
    .default-text{
        padding-top: 5%;
        width: 200px;
        text-align: center;
        margin: 0 auto;
        line-height: 25px;
    }
    .score-text{
        font-size: 50px;
        font-weight: bold;
        line-height: 40px;
    }
    .score-text span{
        padding-top: 0px;
        font-size: 30px;
        font-family: "MHeiHK";
    }
    .info-title span{
        padding-top: 0px;
        font-size: 18px;
        font-family: "MHeiHK";
    }
    .info-text{
        padding-top: 0px;
        text-align: center;
        width: 300px;
        margin: 0 auto;
        line-height: 30px;
    }
    .info-text span{
        color:#f3b0b2;
        font-family: "MHeiHK";
    }
    .final-col{
        padding-top: 0px!important;
    }
    .mob-var{
        line-height: 22px!important;
        padding-top: 10px!important;
    }
    .mob-var2{
        line-height: 22px!important;
        padding-top: 0px!important;
    }
    /*btn setting */
    .btn-var{
        width: 200px;
        height: 70px;
    }

    /*checkbox setting*/
    .checkbox_wrapper{
        position: relative;
        height: 25px;
        width: 25px;
    }
    input[type="checkbox"] {
        opacity:0;
        height: 50px;
        width: 50px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    input[type="checkbox"] + label{
        background:url('../images/blank.png') no-repeat center center;
        background-size: contain;
        height: 25px;
        width: 25px;
        display: inline-block;
        padding: 0 0 0 0px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    input[type="checkbox"]:checked + label{
        background:url('../images/tick.png') no-repeat center center;
        background-size: contain;
        height: 25px;
        width: 25px;
        display: inline-block;
        padding: 0 0 0 0px;
    }

    /*index*/
    .btn-index{
        text-align: center;
        width: 200px;
        margin: 0 auto;
    }
    .btn-img-st{
        background: url(../images/start_btn.jpg) no-repeat center center;
        background-size: contain;
    }
    /*page2*/
    .btn-page2{
        text-align: center;
        width: 200px;
        margin: 0 auto;
    }
    .btn-img-np{
        background: url(../images/nextpage_btn.jpg) no-repeat center center;
        background-size: contain;
    }
    .btn-img-np:hover{
        background: url(../images/nextpage_btn_after.jpg) no-repeat center center;
        background-size: contain;
    }
    /*page3*/
    .btn-page3{
        text-align: center;
        width: 200px;
        margin: 0 auto;
    }
    .btn-img-rslt{
        background: url(../images/result_btn.jpg) no-repeat center center;
        background-size: contain;
    }
    .btn-img-rslt:hover{
        background: url(../images/result_btn_after.jpg) no-repeat center center;
        background-size: contain;
    }
    /*page4*/
    .btn-page4{
        text-align: center;
        width: 200px;
        margin: 0 auto;
    }
    .btn-img-tips{
        background: url(../images/tips_btn.jpg) no-repeat center center;
        background-size: contain;
    }
    .btn-img-tips:hover{
        background: url(../images/tips_btn_after.jpg) no-repeat center center;
        background-size: contain;
    }
    /*page5*/
    .btn-page5{
        text-align: center;
        width: 200px;
        height: 80px;
        margin: 0 auto;
    }
    .btn-img-free{
        background: url(../images/free_btn.jpg) no-repeat center center;
        background-size: contain;
    }
    .btn-img-free:hover{
        background: url(../images/free_btn_after.jpg) no-repeat center center;
        background-size: contain;
    }
    /*gif*/
    .king{
        width: 100%
    }
    .princess{
        width: 55%
    }
    .posion{
        width: 25%;
    }
    .crown{
        width: 15%;
        padding-bottom:0px;
    }
}

/*iphone6plus*/
@media only screen and (max-device-width : 414px) and (min-width : 376px) { 
.index-container{
        background: url(../images/page1.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 736px;
        min-height: 736px;
        max-height: 736px;
        margin: 0 auto;
    }
    .page2-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 736px;
        min-height: 736px;
        max-height: 736px;
        margin: 0 auto;
    }
    .page3-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 736px;
        min-height: 736px;
        max-height: 736px;
        margin: 0 auto;
    }
    .page4-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 736px;
        min-height: 736px;
        max-height: 736px;
        margin: 0 auto;
    }
    .page5-container{
        background: url(../images/page_bg.jpg) no-repeat center center;
        background-size: contain;
        width: 100%;
        height: 736px;
        min-height: 736px;
        max-height: 736px;
        margin: 0 auto;
    }
}