html { -ms-content-zooming: none; -ms-touch-action: pan-x pan-y; touch-action: pan-y;} 
body{background: #c9e2c5;}

#wrap.intro{width: 420px;margin: 0 auto;background: url(../img/intro_bg.png) no-repeat;background-size: cover;background-position: top center;position: relative;}

#mask{position: fixed;top:0;left: 0;width: 100%;height: 100%;display: none;z-index: 1000;}
#mask.on{display: block;}

#header.on{margin-bottom: 0;}
#header .back_btn{display:none;position:absolute;top:15px;left:0;cursor:pointer}
#header .type_02{background: #fff;margin-top: 0;padding: 20px 0 10px;}
#header .type_02::after{content: '';width: 100%;height: 83px;background: #fff;position: fixed;top:0;left: 0;z-index: -1;transition: all 0.3s;}

#progress-bar{width:100%;height:10px;margin:20px auto 0;background:#f3f3f3;overflow:hidden;border-radius:5px;color:#000}
#progress-bar p{font-size: .75rem;}
#progress{height:100%;width:0;background:#000;border-radius:5px;transition:all .4s}

#intro-page .top_obt{position: absolute;top:0;left: 0;width: 100%;}
#intro-page .bottom_obt_01{position: absolute;bottom:0;left: 0;width: 100%;width: 100%;z-index: 1;}
#intro-page .bottom_obt_02{position: absolute;bottom:10px;left: 0;width: 100%;width: 100%;z-index: 2;}
#intro-page .contents{position: relative;z-index: 3;font-family: 'Cafe24Oneprettynight';color: #fff;}
#intro-page .contents span{font-size: 1.5625rem;line-height: 45px;}
#intro-page .contents p{font-size: 2rem;line-height: 45px;margin-bottom: 40px;}
#intro-page .start-btn img{cursor: pointer;}

#test-page .page-wr{height: calc(100vh - 120px);overflow-y: scroll;padding-top: 20px;-ms-overflow-style: none; scrollbar-width: none;box-sizing: border-box;}
#test-page .page-wr::-webkit-scrollbar {display: none;}
#test-page .chat-wr .chat{}
#test-page .chat-wr .chat.on{display: block;}
#test-page .chat-wr .chat p{display: inline-block;padding:8px 14px;box-sizing: border-box;font-family: 'Cafe24Oneprettynight';font-size: 1.1875rem;line-height: 28px;}
#test-page .chat-wr .chat.left{padding:0 0 0 60px;box-sizing: border-box;position: relative;text-align: left;margin-bottom: 8px;}
#test-page .chat-wr .chat.left .profile{position: absolute;left: 0;top: -5px;}
#test-page .chat-wr .chat.left .profile img{width: 50px;border-radius: 50%;}
#test-page .chat-wr .chat.left span{font-size: .9375rem;display: block;margin-bottom: 5px;color: #000;}
#test-page .chat-wr .chat.left p{border-radius: 0 15px 15px 15px;background: #fff;}
#test-page .chat-wr .chat.left p span{background: #000;}
#test-page .chat-wr .chat.right{text-align: right;margin:10px 0 15px;}
#test-page .chat-wr .chat.right p{background: #f1a64a;color: #fff;border-radius: 15px 15px 0 15px;text-align: left;word-break: keep-all;}
#test-page .chat-wr .chat.right p .dot{width: 5px;height: 5px;background: #fff;border-radius: 5px;display: inline-block;margin:0 2px;animation-name: typing_bounce;animation-duration: 0.9s;animation-iteration-count: infinite;}
#test-page .chat-wr .chat.right p .dot:nth-child(2){animation-delay: 0.3s;}
#test-page .chat-wr .chat.right p .dot:nth-child(3){animation-delay: 0.6s;}
#test-page .chat-wr .chat.right .img-wr{display: block;text-align: right;margin-bottom: 5px;}
#test-page .chat-wr .chat.right .img-wr img{width: 50%;}

#test-page .chat-wr .answer input[type=radio]{display:none}
#test-page .chat-wr .answer input[type=radio]+label{display:block;margin-bottom:10px;cursor:pointer;transition:all .3s;padding: 5px;color: #f1a64a;border-radius: 15px 15px 0 15px;background: #fff;line-height: 22px;}
#test-page .chat-wr .answer input[type=radio]+label span{border: 1px solid #f1a64a;border-radius: 15px 15px 0 15px;padding: 10px 30px;box-sizing: border-box;display: inline-block;width: 100%;position: relative;word-break: keep-all;}
#test-page .chat-wr .answer input[type=radio]+label span::before{content: '';width: 27px;height: 30px;background: url(../img/test_obt.png) no-repeat;position: absolute;top:0;left: 0;transform: scale(0.4);}
#test-page .chat-wr .answer input[type=radio]+label span::after{content: '';width: 27px;height: 30px;background: url(../img/test_obt.png) no-repeat;position: absolute;bottom:0;right: 0;transform: scale(0.4);}

#test-page .chat-wr .answer.picture{overflow: hidden;}
#test-page .chat-wr .answer.picture > p{width: 48.5%;float: left;}
#test-page .chat-wr .answer.picture > p:nth-child(1){margin-right: 3%;}
#test-page .chat-wr .answer.picture input[type=radio]+label{background: none;padding: 0;}
#test-page .chat-wr .answer.picture input[type=radio]+label span{background: #fff;border: 1px solid #fbe4c8;}
#test-page .chat-wr .answer.picture input[type=radio]+label span::before,
#test-page .chat-wr .answer.picture input[type=radio]+label span::after{display: none;}

#test-page .chat-wr .answer.calc{display:block;margin-bottom:10px;cursor:pointer;transition:all .3s;padding: 5px;color: #f1a64a;border-radius: 15px 15px 0 15px;background: #fff;line-height: 22px;}
#test-page .chat-wr .answer.calc span{border: 1px solid #f1a64a;border-radius: 15px 15px 0 15px;padding: 10px 30px;box-sizing: border-box;display: inline-block;width: 100%;position: relative;word-break: keep-all;}
#test-page .chat-wr .answer.calc span::before{content: '';width: 27px;height: 30px;background: url(../img/test_obt.png) no-repeat;position: absolute;top:0;left: 0;transform: scale(0.4);}
#test-page .chat-wr .answer.calc span::after{content: '';width: 27px;height: 30px;background: url(../img/test_obt.png) no-repeat;position: absolute;bottom:0;right: 0;transform: scale(0.4);}

#test-page .input-pot{display: none !important;}

#calc-page .circle{display:inline-block;position:relative;}
#calc-page .circle p{position:absolute;top:0;left:0;text-align:center;width:100%;line-height:1;color:#000;font-weight:500;font-size:4.375rem;font-weight: 600;padding: 112px 0;}
#calc-page .circle b{display: block;font-size: 1.375rem;font-weight: 400;color: #000;margin-top: 15px;}

#result-page{margin-top: 20px;}
#result-page .page-wr{padding: 0;}
#result-page .sec_01{font-size: 0;}
#result-page .sec_01 img{box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.2);}
#result-page .sec_02{margin: 50px 20px 30px;background: #fff;padding: 30px 5px;box-sizing: border-box;border-radius: 15px;}
#result-page .sec_02 img{margin-bottom: 10px;}
#result-page .sec_02 span{color: #598850;font-family: 'Cafe24Oneprettynight';font-size: 1.75rem;font-weight: 600;display: block;margin-bottom: 20px;}
#result-page .sec_02 ul{font-size: 1.0625rem;line-height: 1.5rem;text-align: left;padding: 0 20px;box-sizing: border-box;}
#result-page .sec_02 ul li{margin-bottom: 15px;padding-left: 10px;box-sizing: border-box;position: relative;word-break: keep-all;}
#result-page .sec_02 ul li:after{content: '';width: 4px;height: 4px;background: #598850;position: absolute;top:9px;left: 0;transform: rotate(45deg);}

#footer .type_03{padding: 0 20px;box-sizing: border-box;margin-bottom: 100px;}
#footer .type_03 .btn{font-size: 1.125rem;line-height: 60px;border-radius: 15px;background: #000;margin-top: 10px;color: #fff;position: relative;}
#footer .type_03 .btn a{color: #fff;display: block;}
#footer .type_03 .btn a::after{content: '';width: 95%;height: 80%;position: absolute;border: 2px solid #fff;left: 2.5%;top:10%;border-radius: 15px;opacity: 0.3;box-sizing: border-box;}
#footer .type_03 .btn.b1{background: #598850;}
#footer .type_03 .btn.b2{background: #8cb638;}
#footer .type_03 .btn.b3{background: #f1a64a;}
#footer .type_03 .btn.b4{background: #afcdd0;}
#footer .type_03 .btn.b4::after{content: '';width: 95%;height: 80%;position: absolute;border: 2px solid #fff;left: 2.5%;top:10%;border-radius: 15px;opacity: 0.3;box-sizing: border-box;}
#footer .type_03 ul{padding-top: 20px;}
#footer .type_03 ul li{display: inline-block;width: 50px;cursor: pointer;margin: 0 5px;}
#footer .type_03 ul li img{width: 100%;}

@keyframes typing_bounce {
    0%{
        margin-bottom: 0;
    }
    25%{
        margin-bottom: 3px;
    }
    50%{
        margin-bottom: 0;
    }
    75%{
        margin-bottom: 0;
    }
    100%{
        margin-bottom: 0;
    }
}

@media all and (max-width:420px){
    html{font-size: 14px;}
    #wrap.intro{width: 100%;height: 100vh;}
    #header .type_02:after{display: none;}
    #intro-page .bottom_obt_01{display: none;}
    #test-page .page-wr{padding: 20px 2% 0;box-sizing: border-box;}
}