@charset "utf-8";

* {margin:0; padding:0; box-sizing:border-box}
body {width:100%; max-width:750px; height: 100%;  margin:0 auto; font-family: 'Inter', 'Noto Sans KR', sans-serif; font-size:16px;  touch-action: none; min-height: -webkit-fill-available; background: #fff;}
a {text-decoration:none; color:inherit}
ul, li {list-style: none}
input[type="text"],
input[type="number"] {-webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; border:0; padding:0 10px}
button {background:transparent; border:0; outline:0; cursor:pointer}
img {border:0; vertical-align:middle}
iframe {width:0; height:0; visibility:hidden; position:absolute; top:0; left:0}


#repiera {width: 100%; height: 100vh; overflow: hidden; position:relative}
#repiera .card {position: relative; width: 100%}
#repiera .card  > img {width: 100%}

.t_incall {position: absolute; top: 18px; right: 10px; z-index: 9}
.t_incall a img {height: 25px}

#section01 button {position: absolute; bottom: 3%; left: 0; padding: 0 20px}
#section01 button img {width: 100%}

#section02 button,
#section03 button {position: absolute; bottom: 0; left: 0}
#section02 button img, 
#section03 button img {width: 100%}

.s_btn_wrap {width: 100%; height: auto; padding: 10px 20px 80px 20px}
.s_btn_wrap ul {padding: 0 20px; text-align: center}
.s_btn_wrap ul li {width: 49%; display: inline-block;  padding: 0 5px}
.s_btn_wrap ul:last-child li {width: 100%}
.s_btn_wrap input[type="checkbox"] {width: 1px; height: 1px; overflow: hidden; position: absolute; left: -9999px}
.s_btn_wrap input[type="checkbox"] + label {display: inline-block; width: 100%; height: 26vw; cursor: pointer; text-align: center; background-size: 100% !important}
.s_btn_wrap input#symp01 + label {background: url(../img/symp01.png) center no-repeat;}
.s_btn_wrap input#symp01:checked + label {background: url(../img/symp01_on.png) center no-repeat}
.s_btn_wrap input#symp02 + label {background: url(../img/symp02.png) center no-repeat;}
.s_btn_wrap input#symp02:checked + label {background: url(../img/symp02_on.png) center no-repeat}
.s_btn_wrap input#symp03 + label {background: url(../img/symp03.png) center no-repeat;}
.s_btn_wrap input#symp03:checked + label {background: url(../img/symp03_on.png) center no-repeat}
.s_btn_wrap input#symp04 + label {background: url(../img/symp04.png) center no-repeat;}
.s_btn_wrap input#symp04:checked + label {background: url(../img/symp04_on.png) center no-repeat}
.s_btn_wrap input#symp05 + label {height: 16vw; background: url(../img/symp05.png) center no-repeat;}
.s_btn_wrap input#symp05:checked + label {background: url(../img/symp05_on.png) center no-repeat}

.age_wrap {width: 100%}
.age_wrap input[type="radio"] {width: 1px; height: 1px; overflow: hidden; position: absolute; left: -9999px}
.age_wrap input[type="radio"] + label {display: block;width: 100%;height: 60px; cursor: pointer; text-align: center; background-size: auto 100% !important; padding: 0 30px;margin-bottom: 6px}
.age_wrap #age1 + label {background: url(../img/age_btn01.png) center no-repeat}
.age_wrap #age2 + label {background: url(../img/age_btn02.png) center no-repeat}
.age_wrap #age3 + label {background: url(../img/age_btn03.png) center no-repeat}
.age_wrap #age4 + label {background: url(../img/age_btn04.png) center no-repeat}
.age_wrap #age1:checked + label {background: url(../img/age_btn01_on.png) center no-repeat}
.age_wrap #age2:checked + label {background: url(../img/age_btn02_on.png) center no-repeat}
.age_wrap #age3:checked + label {background: url(../img/age_btn03_on.png) center no-repeat}
.age_wrap #age4:checked + label {background: url(../img/age_btn04_on.png) center no-repeat}

#db_form {padding: 0 20px; margin-top: 10vw}
#db_form dl {width: 100%; display: flex; align-items: center; margin-bottom: 10px}
#db_form dl dt {width: 35%; font-size: 21px; letter-spacing: -1px}
#db_form dl dd {width: 65%}
#db_form dl dd input {background: #f1f1f1; height: 50px; padding: 0 10px; text-align: center; font-family: inherit; font-size: 16px; width: 100%; border: 0}
#db_form .agree {margin: 20px 0}
#db_form .agree input {vertical-align: middle}
#db_form .agree span {font-size: 12px; letter-spacing: -0.5px; font-weight: 300; vertical-align: middle}
#db_form .agree a {display: inline-block;vertical-align: middle;font-size: 12px; background: #ffd700; border-radius: 20px; height: 20px; line-height: 20px; padding: 0 8px; letter-spacing: -0.5px; font-weight: 500}
#db_form .bnr {width: 100%}
#db_form .bnr button {width: 100%; display: block}
#db_form .bnr button > img {width: 100%}



.incall {background:#194a8e}
.incall a {display:block; max-width:1000px; margin:0 auto}
.incall a img {width:100%}

#footer {padding:20px 10px; border-top: 1px solid #ddd; text-align:center; margin-top: 5%}
#footer p {color:#999; line-height:1.5; font-size:9px; opacity:.6}