@charset "utf-8";

@font-face {
	font-family:"NotoSansSC-Thin";
	font-style:normal;
	font-weight:100;
	src:url("../font/NotoSansSC-Thin.eot");
	src:url("../font/NotoSansSC-Thin.eot?#iefix") format("embedded-opentype"),
		url("../font/NotoSansSC-Thin.woff") format("woff"),
		url("../font/NotoSansSC-Thin.woff2") format("woff2");
}

@font-face {
	font-family:"NotoSansSC-Medium";
	font-style:normal;
	font-weight:500;
	src:url("../font/NotoSansSC-Medium.eot");
	src:url("../font/NotoSansSC-Medium.eot?#iefix") format("embedded-opentype"),
		url("../font/NotoSansSC-Medium.woff") format("woff"),
		url("../font/NotoSansSC-Medium.woff2") format("woff2");
}

/* Mobile Reset CSS */
html, body, div, header, footer, section, nav, article, aside, h1, h2, h3, h4, h5, h6, p, span, a, blockquote, dl, dt, dd, ol, ul, li, form, fieldset, legend, table, tr, th, td, textarea, input, select, button{margin:0;padding:0;line-height:1;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
body{-webkit-text-size-adjust:none}
ul, ol, li{list-style:none}
table{border-collapse:collapse;border-spacing:0}
button{display:block;margin:0;padding:0;border:0;background-color:transparent;cursor:pointer;outline:none}
a{color:inherit;text-decoration:none}
em, address{font-style:normal}
iframe, fieldset, img{border:0}
textarea{resize:none}
body{position:relative;font-family:"NotoSansSC-Thin";background:#fff;overflow:hidden;font-weight: normal}
img{width:100%}

#wrapper{position:relative;width:420px;height:640px;margin:0 auto;background:#fff;padding:30px 20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.wechat-ttl{width:100%}
.wechat-ttl-sub{width:100%;padding-top:15px;padding-bottom:3px;border-bottom:2px solid #000}
.wechat-ttl-sub img{width:50%}
.container{position:relative;width:100%;padding:0 10px;text-align:center}
.content{margin-top:40px}
.nickname-input-box{position:relative;width:100%;height:60px}
.nickname-input{display:block;width:100%;height:50px;padding:0 30px 0 50px;font-family:inherit;border:5px solid #e5e5e5;border-radius:25px;outline-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:"NotoSansSC-Medium";font-size:16px;background:url("../img/icon.png") 0 50% no-repeat;background-size:45px 33px}
#nickname_alert,
#age_alert{display:block;padding-top:5px;color:#ff0000;font-size:14px;text-align:center}
.join-radio-box{position:relative;width:100%;height:50px;border:5px solid #e5e5e5;border-radius:25px;margin-top:40px;font-size:0}
.join-input-radio{display:inline-block;position:absolute;top:0;left:0;z-index:10;vertical-align:middle;width:1px;height:1px;opacity:0;filter:alpha(opacity=0);border:0;cursor:pointer}
input[type="radio"].join-input-radio + .join-radio-label{display:inline-block;vertical-align:middle;width:50%;height:40px;border-radius:20px;color:#000;font-family:"NotoSansSC-Thin";font-size:16px;line-height:40px;letter-spacing:-.05em;text-align:center;background:#fff}
input[type="radio"].join-input-radio:checked + .join-radio-label{display:inline-block;vertical-align:middle;width:50%;height:40px;border-radius:20px;color:#fff;font-family:"NotoSansSC-Medium";font-size:16px;line-height:40px;letter-spacing:-.05em;text-align:center;background:#01c1c4}
.join-info-txt{padding:25px 0 15px;margin:0 -10px;border-bottom:1px solid #aaa;color:#aaa;font-size:12px;letter-spacing:-.05em;line-height:1.25;text-align:center}
.join-submit-btns{margin-top:40px;font-size:0;text-align:center}
.join-submit-btn{display:inline-block;vertical-align:middle;width:150px;height:50px;border-radius:25px;font-size:16px;letter-spacing:-.025em;text-align:center}
.join-submit-next{color:#fff;font-family:"NotoSansSC-Medium";background:#ee2735;line-height:50px}
.join-submit-cancel{margin-left:10px;color:#000;font-family:"NotoSansSC-Thin";border:4px solid #e5e5e5;line-height:40px;background:#fff}
.join-submit-complete{width:300px;color:#fff;font-family:"NotoSansSC-Medium";background:#ee2735;line-height:50px}
.wechat-qr-box{position:relative;width:100%}
.code{width:300px;margin:0 auto}
.code iframe{width:100%}
.wechat-complete-txt{padding:75px 0;color:#45cae7;font-family:"NotoSansSC-Thin";font-size:20px;text-align:center;letter-spacing:-.05em}

.container .blank{display:inline-block;width:0;height:100%;vertical-align:middle}
.top_logo{position:relative;width: auto;margin:8% 6% 0 6%;overflow:hidden}
.top_logo img{width:99%;overflow:hidden}
.title{position:relative;margin:2% 6%;text-align: left;border-bottom: 2px solid #000;padding:0;width: 86%;overflow:hidden}
.title img{width:60%;}
.title01{position:relative;margin:2% 6%;text-align: left;border-bottom: 2px solid #000;padding:0;width: 85.5%;overflow:hidden}
.title01 img{width:60%;}
.title02{position:relative;margin:2% 6%;text-align: left;border-bottom: 2px solid #000;padding:0;width: 85.5%;overflow:hidden}
.title02 img{width:47%;}
.qr_page{margin-top:580px}
.qr_input {position: relative;width:auto;margin-top:600px}
.qr_submit {position: relative;margin-top:210px}
.qr_submit .txt{text-align: center;vertical-align: middle;font-size:5.5rem;color:#45cae7;padding-top:45%;font-weight: normal;letter-spacing:-.2rem;line-height:8.5rem;}

.qr_submit_foot{width:100%;margin-top:150px}

/* Ãß°¡ Á¤º¸ÀÔ·Â */
.input_box_txt{line-height:1.4;padding-top:20px;font-size:1.4rem;font-weight: normal;}
.button_box{position:relative;vertical-align:middle;text-align: center;margin:5% 0}
.button_box .btn01{border:5px solid #ee2735;border-radius:55px;background: #ee2735;float:left;width:350px;color:#fff;line-height: 2;font-size:2.8rem;margin:0 .3%;font-weight: normal;}
.button_box .btn02{border:5px solid #e5e5e5;border-radius:55px;float:right;width:350px;color:#fff;line-height: 2;font-size:2.8rem;color:#000;margin:.5%;font-weight: normal;}

.qr_tlb{width:auto;text-align: left;color:#000;font-weight: bold;width: 500px;text-align: center;font-weight: bold}
.qr_tlb .title{font:bold 1.2rem/1.8 NotoSans-Medium}
.qr_tlb .un_line{border-bottom:1px solid #000;padding-top:5%}
.qr_tlb .radio{line-height:3rem;}
.qr_tlb .radio td{border:6px solid #e5e5e5;border-radius:65px;width:auto;text-align: center;}
.qr_tlb .radio input[type="radio"] {display: none;}
.qr_tlb .radio input[type="radio"] + label {color: #000;font-family: NotoSans-Medium;font-weight: normal;font-size:28px;line-height:3;}
.qr_tlb .radio input[type="radio"] + label span {display: inline-block;width: 50%;height: auto;margin:0;vertical-align: middle;cursor: pointer;font-weight: normal;font-weight: normal;}
.qr_tlb .radio input[type="radio"]:checked + label span {font-weight: bold;background:#01c1c4;border-radius:55px;color:#fff;font-weight: bold}
.textbox {position:relative;width:100%;height:36px}
.textbox label {position: absolute;top:30px;left:120px;width:500px; height: 80px; line-height : 3rem; color:#e5e5e5;cursor: text;font-weight: normal;line-height:1;font-size:36px;text-align: left;}
.textbox span {color:#45cae7;font-size:1.8rem;font-weight: normal;line-height: 2.4;}
.sp30{height:20px}