img {max-width: 100%;}
.off { display: none; }

#cover.off,
#q1.off, #q2.off,
#q3.off, #q4.off,
#q5.off, #q6.off {
    display: none;
}

body {
    background-position: center;
    font-family: "DB Heavent Med";
    font-size: 3.4vmin;
    line-height: 1em;
    background: url(../images/responsive/bg.jpg) center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-width: 100vw;
    min-height: 100vh;
}
#cover,
#q1, #q2,
#q3, #q4,
#q5, #q6 {
    background: transparent;
}
.next-btn {
    cursor: pointer;
}

.wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    /*background: url(../images/responsive/bg.jpg) center center no-repeat;
    background-size: cover;*/
}

img.center-logo.mobile {
    display: none;
}

img.banner-mobile {
    display: none;
}

.bg-mobile-wrapper, img.bg-mobile {
    display: none;
}

.text-center {
    display: block;
    width: 100%;
    max-width: 100vmin;
    height: 100%;
    max-height: 100vmin;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-45%);
    /* position: relative; */
}

img#cover-next {
    max-width: 50vmin;
    margin-top: 9vmin;
}


/* choice number */
span.choiceNumber {
    /* max-width: 18%; */
    display: inline-block;
    position: relative;
    background-image: url('../images/00-global_checkbox.png');
    background-size: cover;
    height: 1.18em;
    padding: 0;
    line-height: 1.2em;
    width: 1.1em;
    text-indent: 1.8%;
    margin-left: -1%;
    margin-top: -1%;
    margin-right: 1.5%;
}

span.choiceNumber img {
    position: absolute;
    left: -37%;
    top: 20%;
    max-width: 155%;
}
span.choiceNumber:hover {
    cursor: pointer;
}

.choice:hover {
    cursor: pointer;
    color: #e7546c;
}
.choice.check {
    color: #e7546c;
}
.choice.check span.choiceNumber {
    color: #fff;
    background-image: url("../images/00-global_checkbox-selected.png");
}

span.line {
    background: url("../images/responsive/line.jpg") no-repeat center;
    display: block;
    height: 5px;
    width: 100%;
}

/* CHECK */
.checkmark {
    position: absolute;
    top: 42vmin;
    left: 8vmin;
    max-width: 3.2vmin;
}

/* NEXT BUTTON*/
span.back {
    position: absolute;
    top: 62.25vmin;
    max-width: 20.5vmin;
    left: 44vmin;
    cursor: pointer;
}
span.next {
    position: absolute;
    top: 62vmin;
    max-width: 21vmin;
    left: 67vmin;
    cursor: pointer;
}


#q1 span.next {
    position: absolute;
    top: 62vmin;
    max-width: 21vmin;
    left: 56vmin;
    cursor: pointer;
}

/************************************************ q1 */
img.bg {
    position: absolute;
    top: 10vmin;
    left: 0;
    max-width: 94vmin;
}

img.title {
    position: absolute;
    max-width: 40vmin;
    top: 8vmin;
    left: 33vmin;
}

img.cartoon {
    position: absolute;
    max-width: 26vmin;
    top: 27vmin;
    left: 76vmin;
    z-index: 9;
}

.text-left {
    position: absolute;
    top: 20vmin;
    left: 36.6vmin;
    width: 57.1vmin;
}

.choice-row {
}

.choice {
    padding: 0.4em 1em 0.2em;
}

#q1 .choice.choice3 {
    margin-left: 1.25em;
    /* padding: 0; */
}

#q1 .choice.choice3 span.choiceNumber {
    position: absolute;
    left: 1em;
}

/************************************************ q2 */
#q2 img.title {
    max-width: 49vmin;
    top: 10.7vmin;
    left: 35vmin;
}
#q2 .choice {
    margin-left: 5em;
}

#q2 img.cartoon {
    left: 32vmin;
    top: 23vmin;
    max-width: 23vmin;
}
#q2 .text-left {
    top: 22vmin;
    width: 56.8vmin;
}

/******************************************** q3 */
#q3 img.title {
    left: 41vmin;
    top: 7vmin;
    max-width: 43vmin;
}
#q3 .choice {
    padding: 0.4em 3em 0.2em;
}


/******************************************** RESULT q4 */
img.title.result-frame {
    max-width: 60%;
}

img.result-image {
    position: absolute;
    max-width: 55vmin;
    top: 9vmin;
    left: 37vmin;
}
.answer span.next {
    position: absolute;
    top: 62vmin;
    max-width: 37vmin;
    left: 46vmin;
    cursor: pointer;
}
.text-container {
    position: absolute;
    max-width: 57vmin;
    top: 54vmin;
    left: 35vmin;
    font-size: 5vmin;
    width: 100%;
}
/******************************************** q5 */
#q5 .next-wrapper {
    position: relative;
    top: -2.5vmin;
    top: -1.5vmin;
    left: 0;
    z-index: 9;
    color: #fff;
    display: block;
    text-align: center;
    max-width: 100%;
    width: 100%;
    font-family: 'db_heaventregular';
    /* line-height: 3.6; */
    /* background: url('../images/responsive/06-next-btn.png') center no-repeat; */

}
/*
span#q5-next-normal {
    max-width: 44.5vmin;
    cursor: pointer;
    display: block;
    background: url(../images/responsive/06-next-btn.png) no-repeat;
    position: static;
    margin: 0 auto;
    background-size: cover;
    width: 100%;
    fonts-size: 3.81vmin;
    line-height: 7.7vmin;
}
*/
#q5 .next:hover {
    opacity: 1;
}

img.banner {
    max-width: 32vmin;
    margin: 0 auto;
}

.title.recommend.sensitive {
    max-width: 83vmin;
    margin: 1.5vmin auto auto;
}

#q5 span.next {
    position: relative;
    top: 2vmin;
    color: #fff;
    display: block;
    text-align: center;
    font-family: 'db_heaventregular';
    /* line-height: 3.6; */
    z-index: 9;
    /* left: 20.5vmin; */
    /* left: 18vmin; */
    width: 100%;
    max-width: 42vmin;
    font-size: 3.4vmin;
    /* left: auto; */
    display: block;
    top: -5.4vmin;
    margin: 0 auto;
    left: auto;
}
img.q5-next-button {
    max-width: 40vmin;
}

.recommend-image.mobile {
    display: none;
}

#q5 .acne img.recommend-image {
    margin-left: -12vmin;
}

img.icon {
    max-width: 20vmin;
    position: absolute;
    top: 17vmin;
    left: 23vmin;
}

img.recommend-image {
    max-width: 75vmin;
    z-index: 10;
    position: relative;
}

img.icon {
    max-width: 15vmin;
}

img.banner {
    max-width: 30vmin;
}

.title.recommend {
    margin-top: 2vmin;
}
#q6.text-center {
    max-width: 80vmin;
}
#q6 .desktop {
    display: block;
}
#q6 .mobile {
    display: none;
}
a#q6-recheck {
    position: absolute;
    top: 42vmin;
    left: 10vmin;
    z-index: 11;
    /*background: rgba(255, 0, 0, 0.36);*/
    display: block;
    width: 15vmin;
    height: 3.5vmin;

}
span#q6-share-normal {
    position: absolute;
    top: 48.5vmin;
    left: 28vmin;
    z-index: 11;
    /*background: rgba(162, 211, 115, 0.36);*/
    display: block;
    width: 20vmin;
    height: 5.5vmin;
    cursor: pointer;
}
#q6 .next {
    position: absolute;
    top: 56.5vmin;
    left: 20vmin;
    z-index: 11;
    /*background: rgba(18, 174, 241, 0.36);*/
    display: block;
    width: 100%;
    height: 6.5vmin;
    max-width: 39.5vmin;
}


/********************************************
img.result-image {
    position: absolute;
    max-width: 55vmin;
    top: 9vmin;
    left: 37vmin;
}

img.result-image.dry {
    position: absolute;
    max-width: 55vmin;
    top: 9vmin;
    left: 37vmin;
}

span.result-text {

}

.text-container {
    position: absolute;
    max-width: 57vmin;
    top: 54vmin;
    left: 35vmin;
    fonts-size: 5vmin;
    width: 100%;
}

.answer span.next {
    position: absolute;
    top: 62vmin;
    max-width: 37vmin;
    left: 46vmin;
    cursor: pointer;
}




/********************** CHECKMARK*/
#checkmark3 {
    top: 46.5vmin;
}
#checkmark4 {
    top: 51vmin;
}
/********************* loading */
#loading-div-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}

#loading-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #202020;
    z-index: 11;
    font-size: 4vw;
}
#loading-div img {
    max-width: 20%;
    min-width: 30px;
    /* fonts-size: 70vw; */
}


.checklist {
    font-size: 2.6vmin;
    position: absolute;
    top: 38.9vmin;
    left: 11vmin;
    background: url('../images/responsive/00-global_checklist-bg.png');
    background-size: cover;
    background-position: center center;
    z-index: 9;
}

.checklist .checklist-item {
    display: block;
    text-align: left;
    line-height: 4.25vmin;
    color: #AAAAAA;
}
.checklist .checklist-item.passed {
    color: #000;
}

/******************************** COVER */
div#cover {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: auto;
}
span.paging {
    display: none;
}
/***************************************************** MOBILE */

img.bottom-logo {
    max-width: 50vmin;
    display: inline-block;
    margin-top: 5vmin;
}

@media screen and (max-width: 560px) {
    #cover,
    #q1, #q2,
    #q3, #q4,
    #q5, #q6 {
        max-height: 100%;
        /* overflow: hidden; */
    }

    .checklist {
        display: none;
    }

    body {
        font-size: 7vmin;
    }
    img.center-logo.mobile {
        display: inline-block;
        max-width: 95vmin;
    }
    img.center-logo.desktop {
        display: none;
    }

    img.banner-mobile {
        /*
        display: block;
        max-width: 57vmin;
        max-width: 48vmin;
        position: absolute;
        top: 2vmin;
        left: 27vmin;
        */

        display: block;
        max-width: 57vmin;
        max-width: 40vmin;
        max-width: 30vmin; /* 2017-03-07 v7*/
        /* margin: 5vmin auto 10vmin; */
        position: absolute;
        top: 7vmin;
        top: 12vmin;/* 2017-03-07 v7*/
        left: 50vmin;
        transform: translate(-50%,0%);
    }
    .bg-mobile-wrapper {
        display: block;
        position: relative;
        left: 0;
        max-width: 120vmin;
        width: 100%;
        height: 110vmin;
        height: 100vmin; /*2017-07-03*/
        top: 47vmin;
        top: 40vmin;
        overflow: hidden;
    }
    img.bg-mobile {
        display: block;
        position: relative;
        left: -10%;
        max-width: 120%;
        width: 120%;
        height: 100%;
        top: 0;
        /* top: 40vmin; */
    }
    img.bg {
        display: none;
    }

    .text-center {
        left: 50%;
        top: -4%;
        top: -8%; /* 2017-03-07 v7*/
        transform: translate(-50%,0%);
        max-height: 100%;
    }

    #main-wrapper .text-left {
        position: absolute;
        top: 69vmin;
        top: 60vmin;
        top: 55.5vmin; /* 2017-07-03 */
        top: 52vmin; /* 2017-07-07 */
        left: 0;
        width: 100vmin;
    }

    span.back {
        position: relative;
        top: 40vmin;
        top: 33vmin;
        left: 0;
        max-width: 40vmin;
        display: inline-block;
        margin-right: 8vmin;
    }

    #main-wrapper span.next {
        position: relative;
        top: 40vmin;
        top: 33vmin;
        left: 0;
        max-width: 40vmin;
        display: inline-block;
    }

    #main-wrapper .choice {
        padding: 0.4em 0em 0.2em 1.9em;
        margin-left: 0;
    }

    img.cartoon {
        display: none;
    }
    #q1 .choice.choice3 span.choiceNumber {
        position: absolute;
        left: 1.95em;
    }

    #main-wrapper img.title {
        position: absolute;
        max-width: 75vmin;
        top: 40vmin;
        top: 33vmin;
        top: 30vmin; /* 2017-07-07 */
        left: 6vmin;
    }
    #main-wrapper #q3 img.title {
        top: 29vmin;
        top: 27vmin; /* 2017-07-07 */
        max-width: 87vmin; /* 2017-07-07 */
    }
    span.paging {
        position: absolute;
        max-width: 20vmin;
        top: 64vmin;
        top: 57vmin;
        top: 53vmin; /* 2017-07-03*/
        top: 50vmin; /* 2017-07-07 */
        left: 80vmin;
        display: block;
        color: #ccc;
    }
    img.checkmark {
        display: none;
    }

    #q2 img.title {
        max-width: 84vmin;
    }


    #q3 .text-left {

    }
    #q3.choice {
        padding: 0.4em 1em 0.2em;
    }



    #main-wrapper img.title {
        max-width: 90vmin;
        left: 5vmin;
    }
    #main-wrapper #q4 img.title {
        top: 33vmin; /* 2017-07-07 */
    }

    #main-wrapper #q1 img.title {
        max-width: 80vmin;
    }

    #main-wrapper img.result-image {
        top: 39vmin;
        max-width: 100vmin;
        left: 0vmin;
    }
    .text-container {
        top: 126vmin;
        top: 122vmin; /* 2017-03-07 v7 */
        font-size: 10vmin;
        max-width: 100vmin;
        left: 0;
    }
    #main-wrapper .answer span.next {
        max-width: 75vmin;
        top: 37vmin;
        top: 30vmin;
        top: 33vmin;
    }

    #main-wrapper img.result-image.mixed {
        top: 48vmin;
        top: 41vmin; /* 2017-03-07 v7 */
    }
    .text-container.mixed {
        top: 132vmin;
        top: 124vmin; /* 2017-03-07 v7 */
    }

    img.recommend-image {
        display: none;
    }

    .recommend-image.mobile {
        display: block;
        top: 5vmin;
        top: 12vmin;
        position: relative;
        max-width: 95vmin;
        left: 0vmin;
        z-index: 10;
    }

    .title.recommend {
        max-width: 83vmin;
        margin: 1.5vmin auto auto;
    }

    #q5 .sensitive span.next {
        top: 2vmin;
        font-size: 5.5vmin;

        top: 3vmin;/* 2017-03-07 v7 */
        font-size: 6.5vmin;/* 2017-03-07 v7 */
    }

    #q5 img.recommend-image.mobile {
        left: -7vmin;
    }
    #q5 .normal img.recommend-image.mobile {
        left: -7vmin;
    }

    #q5 .sensitive img.recommend-image.mobile {
        left: -7vmin;
    }

    #q5 .mixed img.recommend-image.mobile {
        top: 4vmin;
        left: -7vmin;
    }

    #q5 .acne img.recommend-image.mobile {
        left: -5vmin;
        top: 4vmin;
    }

    #q5 .acne img.recommend-image {
        /*max-width: 130%;
        margin-left: -37vmin;
        margin-top: 30vmin;
        */
        margin-left: 0;
    }


    #q5 .next-wrapper {
        max-width: 80%;
        max-width: 100%;/* 2017-03-07 v7 */
        margin: 0 auto;
        top: 2.5vmin;
        top: 8vmin
    }
    img.q5-next-button {
        max-width: 100%;
    }
    #q5 span.next {
        max-width: 100%;
        top: 2vmin;
        position: absolute;
        font-size: 5.5vmin;

        /* normal */
        max-width: 100%;
        top: 3vmin;
        position: absolute;
        font-size: 6.5vmin;

    }
    #q5 img.banner-mobile {
        position: relative;
    }

    #q5 img.banner {
        display: none;
    }
    img.icon {
        max-width: 25vmin;
        position: absolute;
        top: 38vmin;
        top: 29vmin;
        left: 4vmin;
    }


    #q6.text-center {
        max-width: 100%;
        top: 5%;
    }
    #q6 .item-code {
        margin-top: 10px;
    }
    #q6 .desktop {
        display: none;
    }
    #q6 .mobile {
        display: block;
    }

    a#q6-recheck {
        top: 82vmin;
        left: 10vmin;
        width: 31vmin;
        height: 6.5vmin;

    }
    span#q6-share-normal {
        top: 95.5vmin;
        left: 30vmin;
        width: 37vmin;
        height: 13.5vmin;
    }
    #main-wrapper #q6 .next {
        position: absolute;
        top: 115vmin;
        left: 11vmin;
        z-index: 11;
        display: block;
        width: 100%;
        height: 14.5vmin;
        max-width: 75.5vmin;
    }
}

@media screen and (max-width: 320px) {
    /*
    img.banner-mobile {
        display: block;
        max-width: 57vmin;
        max-width: 45vmin;
    }
    */
}



@media screen and (max-width: 414px) and (max-height: 736px) {
    /*
    .text-center {
        top: 3vmin;
    }
     */
    img.banner-mobile {
        max-width: 40vmin;
        top: 4vmin;
    }


    .recommend-image.mobile {
        top: 6vmin;
    }
    #q5 .next-wrapper {
        top: 3vmin;
    }

    .text-center {
        top: 0vmin;
    }

    html.mobile-safari .text-center {
        top: 0vmin;
    }
    html.mobile-safari #q6.text-center {
        top: 1%;
    }
}

@media screen and (max-width: 411px) and (max-height: 731px) {
    /*
    .text-center {
        top: 3vmin;
    }
    img.banner-mobile {
        max-width: 40vmin;
        top: 4vmin;
    }
    */

    .recommend-image.mobile {
        top: 8vmin;
    }
    #q5 .next-wrapper {
        top: 3vmin;
    }
}

@media screen and (max-width: 375px) and (max-height: 667px) {
    /*
    .text-center {
        top: 3vmin;
    }
    img.banner-mobile {
        max-width: 40vmin;
        top: 4vmin;
    }
    */
}

@media screen and (max-width: 320px) and (max-height: 568px) {
    /*
    .text-center {
        top: 3vmin;
    }
    img.banner-mobile {
        max-width: 40vmin;
        top: 4vmin;
    }
    */
}


@media screen and (max-width: 320px) and (max-height: 480px) {
    html.mobile-safari .text-center {
        top: -8%;
        top: -6%;
    }
    html.mobile-safari #q6.text-center {
        top: 1%;
    }

    .text-center {
        top: -8%;
    }
    img.banner-mobile {
        max-width: 30vmin;
        top: 12vmin;
        top: 10.5vmin;
    }

    .recommend-image.mobile {
        top: 12vmin;
    }
    #q5 .next-wrapper {
        top: 8vmin;
    }

    #q6.text-center {
        top: 0%;
    }
    #q6 .item-code {
        margin-top: 5px;
    }
}