* { text-decoration: none; }

.inner {width: 480px; margin:0 auto; background: #000; border: 1px solid #333;
 height: 100vh; overflow-y: hidden;}

button {padding: 18px 50px; font-size: 24px; background: #F0F0F0; border-radius: 40px; color:#000; display: inline-block; border: none;}

#wrap { width: 100%; height: 100%; box-sizing: border-box; padding: 5%;}

.clear:after{content:''; display:block; clear:both;}


/*main*/

.main-title {width: 100%; text-align: center;padding-top: 30px;}
.main-title img {width: 90%; padding-top: 20px;}
.button {text-align: center; padding-top: 20px;}
.button button {display: inline; background: #31A8FF; color:#fff; }


/*QUIZ*/









/*register*/

.regi-title {width: 100%; text-align: center;}
.regi-title img {width: 85%; padding: 0 20px 20px 20px;}

.register {width: 100%; background: #353535; border-radius: 37px; box-sizing: border-box; padding: 20px 30px; color:#fff;}
.register .regist-area {display: table; width: 100%;box-sizing: border-box;}
.register .regist-area dl {font-size: 18px; display: table-row; line-height: 30px; width: 100%;}
.register .regist-area dl dt {width: 40%; display: table-cell; padding-right: 10px;}
.register .regist-area dl dd {width: 60%; display: table-cell; padding-bottom: 10px;}
.register .regist-area dl dd input {font-size: 16px; padding: 10px 0px; color:#888; background:#353535; border:1px solid #474747; border-radius: 20px;}
.register .regist-area dl dd input[placeholder] {padding: 10px;}
.personalinfo-area {width: 100%; box-sizing: border-box; border-top: 1px solid #474747; border-bottom: 1px solid #474747; padding: 20px 0;}
.personalinfo-area p {font-size: 13px; padding-bottom: 10px;}
.personalinfo-area p a {text-decoration: underline; color:#fff;}
.personalinfo-area input{font-size: 16px;}
.personalinfo-area label {font-size: 16px;}
.register button:nth-child(1) {background:#31A8FF; border:none; color:#fff; font-size: 18px; display: block; margin: 0 auto; }
.register button:nth-child(2) {background:none; border:none; color:#fff; font-size: 18px; padding: 10px 0 0 0; border-radius: 0;}
.gift {width: 100%; padding-top: 20px; color:#fff;}
.gift ul li {width: 48%; float: left ;text-align: center; border:1px solid #1D1D1D; border-radius: 37px;}
.gift ul li p {font-size: 16px; padding-bottom: 150px; }
.gift ul li:nth-child(1) {background: url('../images/gift_01.png') no-repeat bottom; margin-right: 10px;}
.gift ul li:nth-child(2) {background: url('../images/gift_02.png') no-repeat bottom;}
.gift_info {text-align: center; font-size: 16px; padding-top: 20px;}


/*result*/

.result-title {width: 100%; text-align: center;}
.result-title img {width: 80%; padding: 0 20px 20px 20px;}
.result {width: 100%; background: #353535; border-radius: 37px; box-sizing: border-box; padding: 20px 30px; text-align: center;}
.result img {width: 80%;}
.result p {font-size: 16px; padding: 20px 0; color:#fff;}
.result button {background:#31A8FF; border:none; color:#fff; font-size: 18px;}
.result .share {width: 100%; padding-top: 20px;}
.result .share button {background: none; display: inline-block; width: 30%; text-align: center; padding: 0; border-radius: none; }
.result .share p {padding: 5px 0; font-size: 1.5rem;}
.result .share button img {width: 50%;}



/*info*/

.info {width: 480px; margin: 0 auto; overflow-y: scroll; overflow-x: hidden; }
.info div {width: 100%; padding: 20px 30px;box-sizing: border-box; height: auto; }
.info div h1 { color:#000; padding: 30px 0;}
.info div p { font-size: 14px;  color:#000;}
.info table {color:#000;}




@media only screen and (max-width: 480px) {
    .inner {width: 95%; border: none; height:auto; overflow-y: auto;}
    .info {width: 80%;}
    .info div {padding: 10px 10px;}
    
.result .share button {width: 45%;}
.result .share p {padding: 5px 0; font-size: 1.5rem;}
.result .share button img {width: 40%;}

}




@media only screen and (max-width: 430px) {
    button {padding: 15px 25px; font-size: 18px; }
    .text-container p {font-size: 18px; }
    label .answer {padding: 12px 20PX; font-size: 14px;}
    #btn {margin: 20px auto;font-size: 14px;}
    .image-container img {margin: 20px 0; }
    .register {border-radius: 20px;}
    .regi-title img {width: 85%;}
    .register .regist-area dl {font-size: 14px;}
    .register .regist-area dl dd input[placeholder] {font-size: 13px;}
    .register button:nth-child(1) {display: block; width: 60%; margin: 0 auto; text-align: center;font-size: 14px;}
    .register button:nth-child(2) {font-size: 14px;}
    .personalinfo-area input{font-size: 14px;}
    .personalinfo-area label {font-size: 14px;}
    .gift ul li {border-radius: 20px;}
    .gift ul li img {width: 90%;}
    .gift ul li p {font-size: 15px; padding-bottom:100px; }
    .gift ul li:nth-child(1) {background-size: cover; }
    .gift ul li:nth-child(2) {background-size: cover; }
    .gift_info {font-size: 14px;}
}

@media only screen and (max-width: 410px) {
    .gift ul li {width: 47%;}
    .result div p br{display: none;}
}