@charset "utf-8";

/****************************** joinus ******************************/
.support.joinus .sub-head{margin-bottom:3.333rem;}

/* joinus */

.support.joinus .cont .inputbox {max-width: 600px;}
.support.joinus .cont .inputbox input[type="text"],input[type="email"],input[type="password"]{width:100%;}
.support.joinus .cont .inputbox form > ul > li {font-size:1.25rem;position:relative;}
.support.joinus .cont .inputbox form > ul > li span.at{color:#ccc;margin:0;}
.support.joinus .cont .inputbox form > ul > li .input-half{width:47.368%;display: inline-block;}
.support.joinus .cont .inputbox form > ul > li .input-half:first-child{margin-right:;}
.support.joinus .cont .inputbox form > ul > li .input-half input{width:100% !important;}
.support.joinus .cont .inputbox form > ul > li .input-half select{width:100% !important;}
.support.joinus .cont .inputbox form > ul > li .title{line-height: 1.75rem;}
.support.joinus .cont .inputbox form > ul > li .title.essential{position:relative;padding-left:13px;}
.support.joinus .cont .inputbox form > ul > li .title.essential:before{content:'*';display: block;position:absolute;top:2px;left:0;color:#b02626;}
.support.joinus .cont .inputbox form > ul > li.email input[type="text"],
.support.joinus .cont .inputbox form > ul > li.email .common-select{width:34.671%;}
.support.joinus .cont .inputbox .common-select{border:none; position:relative;display: inline-block;width:100%;}
.support.joinus .cont .inputbox .common-select select{ border:none; padding:8px 10px 7px; background:#fff url('/images/joinus/m_ico_select.png') 90% 55% no-repeat;background-size:8px; color:#111; line-height:1.4rem; font-size:1.1rem; cursor:pointer;width:100%;}
.support.joinus .cont .inputbox input.user-select{display: none;position:absolute;top:0;left:0;width:80% !important;padding:8px 10px 7px;}
.support.joinus .cont .inputbox input.user-select:focus{background: #fff !important;}
.support.joinus .cont .inputbox input.chk-duplicate{padding:10px 10px 8px;border:none; background:#999; color:#fff; line-height:1.25rem; font-size:1.1rem; font-weight: 300;transition:all .2s ease-out;margin-left:2px;width:20%;text-align: center;float: right;}
.support.joinus .cont .inputbox input.chk-duplicate:hover,
.support.joinus .cont .inputbox input.chk-duplicate:focus{background: #333;}
.support.joinus .cont .inputbox input.input-serial{width:77.192% !important;}
.support.joinus .cont .inputbox .wrap-btn{width:9.583rem;}
.support.joinus .cont .inputbox .wrap-btn .btn-ok{width:100%;}
.support.joinus .cont .inputbox .col-xs-6:nth-child(1){padding-left:0;padding-right:8px;}
.support.joinus .cont .inputbox .col-xs-6:nth-child(2){padding-right:0;padding-left:8px;}

.support.joinus .cont .inputbox input[type=checkbox]{display: none;}
.support.joinus .cont .inputbox input[type=checkbox] + label{
	display: inline-block;
	cursor: pointer; 
	position: relative;  
	padding-left: 25px;  margin-top:13px;margin-left: 0;margin-bottom: 0;font-weight: 500;
	}
.support.joinus .cont .inputbox input[type=checkbox]+ label:before { 
	content: "";  
	display: inline-block; 
	width: 18px;  height: 18px; margin-right: 10px;  
	position: absolute;  left: 0;  bottom: -3px;  
	background: url('/images/joinus/m_check_off.png') 0 0 no-repeat;
	background-size:17px;
	transition:.2s;
	}
.support.joinus .cont .inputbox input[type=checkbox]:checked + label:before {
	background: url('/images/joinus/m_check_on.png') 0 0 no-repeat;
	background-size:17px;
	text-align: center;
	line-height: 18px;  
	} 

.support.joinus .cont .inputbox input[type="text"]:focus,.support.joinus .cont .inputbox input[type="email"]:focus,
.support.joinus .cont .inputbox input[type="password"]:focus{background: rgba(0,0,0,0.1);}


/* complete */
.support.complete .cont {}
.support.complete .cont .inputbox {max-width: 600px;}
.support.complete .cont .inputbox {background: #fff;padding:2.5rem 2.083rem;}
.support.complete .cont .inputbox h4{padding: 5rem 0 0 0;color: #111;line-height: 1.2em;font-size: 1.917rem;font-weight: bold;background:url(/images/joinus/ico_joinus.png) center top no-repeat;background-size:3.333rem;text-align: center;margin-bottom:1.667rem;}
.support.complete .cont .inputbox .msg{text-align: center;font-size: 1.083rem;line-height: 1.5em;color: #666;margin-bottom:40px;}
.support.complete .cont .inputbox .wrap-btn{width:9.583rem;}
.support.complete .cont .inputbox .wrap-btn a.btn-login{background: #fff;border: 2px solid #000;width:100%;margin-bottom:20px;}
.support.complete .cont .inputbox .wrap-btn a.btn-login:hover,
.support.complete .cont .inputbox .wrap-btn a.btn-login:focus{background:#1257ab;border:2px solid transparent;color:#fff;}



@media screen and (min-width: 992px) {
	.mypage-pop .modal-dialog{margin:170px auto !important}

	/* joinus */
	.support.joinus .cont .inputbox {max-width: 770px;margin: 0 auto;padding: 98px 100px 100px 100px;}
	.support.joinus .cont .inputbox form > ul > li {font-size:16px;}
	.support.joinus .cont .inputbox form > ul > li span.at{margin:0 5px;}
	.support.joinus .cont .inputbox form > ul > li .title{line-height: 16px;}
	.support.joinus .cont .inputbox form > ul > li .input-half:first-child{margin-right:25px;}
	.support.joinus .cont .inputbox form > ul > li.email input[type="text"],
	.support.joinus .cont .inputbox form > ul > li.email .common-select{width:36.571%}

	.support.joinus .cont .inputbox .common-select{width:100%;}
	.support.joinus .cont .inputbox .common-select select{height:41px;padding:0 20px; background:#f5f5f5 url('/images/joinus/ico_select.png') 90% 55% no-repeat; background-size:auto;line-height:16px; font-size:16px;}
	.support.joinus .cont .inputbox input.user-select{width:160px !important;padding:10px 0 10px 20px;}
	.support.joinus .cont .inputbox input.user-select:focus{background: #f5f5f5 !important;}
	.support.joinus .cont .inputbox input.chk-duplicate{height:41px; line-height:16px; font-size:16px; margin-left:2px;width:20%;padding:0;}
	.support.joinus .cont .inputbox .wrap-btn{width:170px;}
	.support.joinus .cont .inputbox input[type=checkbox]+ label:before {background: url('/images/joinus/check_off.gif') 0 0 no-repeat;background-size:auto; }
	.support.joinus .cont .inputbox input[type=checkbox]:checked + label:before {background: url('/images/joinus/check_on.gif') 0 0 no-repeat;background-size:auto;}

	/* complete */
	.support.complete .cont .inputbox {max-width: 770px;margin: 0 auto;padding: 98px 100px 100px 100px;}
	.support.complete .cont .inputbox h4{margin: 0 0 40px 0;padding: 118px 0 0 0;line-height: 30px;font-size: 30px;background-size:auto;}
	.support.complete .cont .inputbox .msg{margin-bottom:40px;font-size: 18px;line-height: 18x;}
	.support.complete .cont .inputbox .wrap-btn{width:170px;}
	.support.complete .cont .inputbox .wrap-btn a.btn-login{border-width: 3px;}
	.support.complete .cont .inputbox .wrap-btn a.btn-login:hover,
	.support.complete .cont .inputbox .wrap-btn a.btn-login:focus{border-width: 3px;}

}

@media screen and (min-width: 1200px) {
}