@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/*공통*/
body {width:100%; max-width:640px; background:#fff; margin: 0 auto; color:#333; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-1px; text-align:left; *word-break:break-all;-ms-word-break:break-all;}
* {padding:0; margin:0;}
img {border:0; vertical-align:top;}
li {list-style:none;}
a {text-decoration:none; color:#222;}

input {vertical-align:top;}
select {vertical-align:top;}

.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}
.imgbox img {width:100%;}

.vid {position:relative; width:100%; max-width:640px; }
.vid iframe { position:absolute; width:100%; height:100%;}
.vid_txt {text-align:right; font-size:17px; box-sizing:border-box; padding:0 5%; color:#555; margin-bottom:30px;}

/*디비*/
.db {width:100%; box-sizing:border-box; background:#fff; position:relative; z-index:999999;}
.db > form {width:100%; padding:5% 5%; box-sizing:border-box;}
.checkbox {width:100%; padding:0 0 10px 0; letter-spacing:-1px; box-sizing:border-box;}
.checkbox > div {width:100%;}
.checkbox > div > div:nth-child(1) {font-size:17px; font-weight:600; color:#000;}
.checkbox > div > div:nth-child(2) {display:flex; flex-wrap: wrap;}
.checkbox > div > div:nth-child(2) > div {width:33.3%; height:20px; line-height:20px; margin-top:8px; font-size:15px;}
.checkbox > div > div:nth-child(2) > div input {vertical-align:middle;}
.checkbox > div.q2 > div:nth-child(2) > div {width:50%;}
.checkbox > .q1 {}
.inputbox {width:100%; padding:0; box-sizing:border-box;}
.inputbox > div {width:100%; font-size:16px; height:40px; line-height:40px; margin-top:10px;}
.inputbox > div > div {float:left; height:100%;}
.inputbox > div > div:nth-child(1) {width:20%; font-weight:600;}
.inputbox > div > div:nth-child(2) {width:80%;}
.inputbox > div > div:nth-child(2) input {width:100%; height:100%; font-size:16px; border:1px solid #999; box-sizing:border-box; padding-left:10px; border-radius:0;}
/*성별*/
.sex input[type=radio] {display:none;}
.sex input:checked + label {background:#222; color:#fff;}
.sex input ~ label {display:inline-block; width:49%; text-align:center; box-sizing:border-box; background:#fff; border: 1px solid #999; font-size:15px;}
/*나이*/
.inputbox .age > div:nth-child(2) input {width:100%;}
/*연락처*/
.inputbox .tel > div:nth-child(2) {font-size:0;/*필요*/}
.inputbox .tel > div:nth-child(2) select {width:32%; height:100%; font-size:16px; color:#333; border:1px solid #999; box-sizing:border-box; padding-left:10px; border-radius:0;}
.inputbox .tel > div:nth-child(2) input {width:32%; height:100%; font-size:16px; color:#333; border:1px solid #999; box-sizing:border-box; padding-left:10px; border-radius:0; margin-left:2%;}
.agree {width:100%; text-align:center; font-size:12px; margin-top:10px;}
.agree input {vertical-align:middle;}
.db-btn {width:100%; margin-top:5%;}


.db_form {padding:20px; border:10px solid #c43635; border-top:0px; text-align:left;}
.db_q {border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:10px; text-align:center;}
.db_q h3 {margin-bottom:10px; text-align:left;}
.db_q input {display: none;}
.db_q input + label {display:inline-block; width:23%; text-align:center; padding:6px 0; border:1px solid #ccc; font-size: 14px; border-radius:3px; transition:all .5s;}
.db_q2 input + label {display:inline-block; width:18%; text-align:center; padding:6px 0; border:1px solid #ccc; font-size: 14px; border-radius:3px; transition:all .5s;}
.db_q input:checked + label {background: #000; border:1px solid #000; color:#fff;}
.db_q:nth-child(2) input + label {margin-bottom: 2px;}
.db_form dl dt {width: 25%; text-align: center; font-weight: 700; color: #000; float: left; margin-top: 10px;}
.db_form dl dt em {color: #ff3333;}
.db_form dl dd {width:75%; display: inline-block; padding: 5px 0;}
.db_form dl dd input[type=text] , .db_form dl dd input[type=tel] , .db_form dl dd select {height:35px; line-height: 35px; padding-left:10px; background: #fff; border-radius:5px; font-size: 14px; width:85%; border: 1px solid #dedede;}
.db_form dl dd .tel {width: 25%!important;}
.gender input {display: none;}
.gender input + label {display:inline-block; width:27%; text-align:center; padding:6px 0; border:1px solid #ccc; font-size: 14px; border-radius:3px; transition:all .5s;}
.gender input:checked + label {background: #ff3333; border:1px solid #ff3333; color:#fff;}
.gender input:checked + label:last-child {background:#2680ea; border:1px solid #2680ea;}
.db_form input[type=image] {width: 85%; margin: 0 auto; display: block; padding: 15px 0 ;}
.db_form img {width: 100%;}
.db_form img { width: 100%; margin: 0 auto; display: block; padding: 0 0 15px;}
.db_form .result {font-size: 14px; font-weight: 600; padding: 5px; text-align: center; border: 1px solid #eee; background: #f5f5f5;}
.db_form .result input {height: 30px;  border-radius: 5px; border: 1px solid #ccc; width: 25%;}

footer {margin-top:30px; width:100%; background:#555; color:#eee; text-align:center; font-size:13px; font-weight:300; letter-spacing:0; padding:30px 0;}
footer img {padding-bottom:10px;}