.login_top {text-align: center; margin-bottom:30px; margin-top: 5px;}
.login_top img{height: 30px;}

.login_top_text {font-size: 2em;font-weight: 900;margin-bottom:20px;}
.result_box {text-align: center;font-size: 18px;padding: 30px 0}

.login_body .input_box{margin-bottom: 10px; position: relative;}
.login_body .input_box:last-of-type{margin-bottom: 0;}
.login_body .input_box input{border-radius: 5px;line-height: 40px}
.login_body .input_box input[name="password"]{padding-right:46px;}
.login_body .input_box .eyeClose{position: absolute; border:none; background: transparent; right:0; top:0; bottom:0; margin:auto; padding:0 15px; color:#555;}
.login_body .login_btn button{background: #478ECC; border:1px solid #478ECC; font-size: 15px; color:#fff; border-radius: 5px; width:100%; padding:0.75rem 0.75rem; transition: all .4s;}
.login_body .login_btn button:hover, .login_body .login_btn button:focus, .login_body .login_btn button:active{background: #3373ab; border-color:#3373ab}

.login_bottom{margin-top: 15px; padding:20px 0 5px; border-top:1px solid #ddd;}
.login_bottom ul{display: flex; justify-content: center;}
.login_bottom ul li{padding-right: 8px; margin-right:8px; border-right:1px solid #ddd; line-height: 1em;}
.login_bottom ul li:last-of-type{padding-right:0; margin-right:0; border:none;}
.login_bottom ul li a{text-decoration: none;color:#2e2e2e; font-size: 15px;}
.login_bottom ul li a:hover, .login_bottom ul li a:active, .login_bottom ul li a:focus{color:#8e8e8e}

.join_container{padding-top: 60px;}
.join_container .stepwrap{display: flex; position: relative; justify-content: center;}
.join_container .stepwrap .step::after{display: block; content:''; width:160px; height: 2px; border-bottom:2px dashed #D4D4D4; position: absolute; top:40px; left:84px; z-index: 0;}
.join_container .stepwrap .step{margin-right:160px; text-align: center; position: relative;}
.join_container .stepwrap .step:last-of-type{margin-right:0;}
.join_container .stepwrap .step:last-of-type::after{display: none;}
.join_container .stepwrap .step .imgwrap{background: #E9E9E9; border-radius: 80px; width:80px; height: 80px; margin:0 auto; position: relative; z-index: 1;}
.join_container .stepwrap .step .imgwrap.on{background: #4F92CF;}
.join_container .stepwrap .step .imgwrap.check{background: #AEDFFF;}
.join_container .stepwrap .step .text{margin-top: 15px;}


.option_tab{margin-top: 50px;}
.option_tab .alert_box{background: #F5F5F5; padding:25px; border-radius: 10px;}
.option_tab .alert_box .alert_title{display: table; width:100%; font-size: 15px; color:#535353}
.option_tab .alert_box .alert_title div:first-of-type{display: table-cell; vertical-align: top; width:25px;}
.option_tab .alert_box .alert_title div:last-of-type{display: table-cell; vertical-align: top;}
.option_tab .alert_box ul.option_list{margin-bottom: 0; margin-top: 10px;}
.option_tab .alert_box ul.option_list li{font-size: 14px; line-height: 1.5em; margin-bottom: 5px; color:#535353}
.option_tab .alert_box ul.option_list li span{white-space: nowrap;}

.join_form{margin-top: 50px; margin-bottom: 130px;}
.join_form .stepouter{border:1px solid #D4D4D4; border-radius: 8px; padding:60px; background: rgba(255,255,255,.5);}
.join_form .stepouter .stepinner h4{border-bottom:1px solid #d4d4d4; border-top:1px solid #d4d4d4; padding: 30px 0;}
.join_form .stepouter .stepinner:first-of-type h4{padding-top: 0; border-top:none;}
.join_form .stepouter .steprow{padding-top:30px;}
.join_form .stepouter .steprow .stepbox{}
.join_form .stepouter .steprow .stepbox input{}
.join_form .stepouter .steprow .stepbox label{}
.join_form .stepouter .steprow .stepbox .textbox{max-height: 130px; overflow-y:scroll; border:1px solid #ccc; border-radius: 3px; padding:10px 20px; color:#535353; margin-top: 15px;}
.join_form .stepouter .artwrap{display: flex; margin:40px 0; flex-wrap:wrap;}
.join_form .stepouter .artwrap .article{width:50%;}
.join_form .stepouter .artwrap .article:nth-of-type(1){padding-right:30px;}
.join_form .stepouter .artwrap .article:nth-of-type(2){padding-lefT:30px;}
.join_form .stepouter .artwrap .full_art{width:100%;}
.join_form .stepouter .artwrap .article .row, .join_form .stepouter .artwrap .full_art .row{margin-left:0; margin-right:0; align-items: start; margin-bottom: 20px;position: relative;}
.join_form .stepouter .artwrap .article .row>label, .join_form .stepouter .artwrap .article .row>.label, .join_form .stepouter .artwrap .full_art .row>.label, .join_form .stepouter .artwrap .article .row .passwrap label, .join_form .stepouter .artwrap .full_art .row>label{width:135px; padding:0; white-space: nowrap; position: relative; padding-left:10px; font-weight: 500; font-size: 15px; line-height: 1.5em; margin-top: 7px}
.join_form .stepouter .artwrap .article .row>label span, .join_form .stepouter .artwrap .article .row>.label span, .join_form .stepouter .artwrap .full_art .row>.label span, .join_form .stepouter .artwrap .article .row>label span, .join_form .stepouter .artwrap .article .passwrap>label span, .join_form .stepouter .artwrap .full_art .row label span{color:#4f92cf; position: absolute; left:0;}
.join_form .stepouter .artwrap .article .row>input, .join_form .stepouter .artwrap .article .row .passwrap input, .join_form .stepouter .artwrap .full_art .row .addresswrap{width:calc(100% - 135px); font-size: 15px;}
.join_form .stepouter .artwrap .article .row .passwrap{display: flex; position: relative; padding:0;}
.join_form .stepouter .artwrap .full_art .row .addresswrap{display: flex; padding:0; flex-wrap:wrap;}
.join_form .stepouter .artwrap .full_art .row .addresswrap>input{margin-bottom: 10px;}
.join_form .stepouter .artwrap .full_art .row .addresswrap .postcode{width:250px; margin-right:20px;}
.join_form .stepouter .artwrap .full_art .row .addresswrap .address_btn{border:1px solid #4f92cf; color:#4f92cf; background:transparent; padding:0 15px; border-radius: 5px; font-size: 15px; margin-bottom: 10px;}
.join_form .stepouter .artwrap .full_art .row .addresswrap .address_btn:hover, .join_form .stepouter .artwrap .full_art .row .addresswrap .address_btn:focus, .join_form .stepouter .artwrap .full_art .row .addresswrap .address_btn:active{background:#4f92cf; color:#fff;}
.join_form .stepouter .artwrap .article .row .eyeClose{background: transparent; border:none; position: absolute; right:5px; width:auto; top:0; bottom:0; margin:auto; font-size: 14px;}
.join_form .stepouter .artwrap .article .row input[readonly="readonly"], .join_form .stepouter .artwrap .full_art .row input[readonly="readonly"]{background:#e9e9e9;}
.join_form .stepouter .artwrap .article .row input::placeholder{color:#999;}
.join_form .stepouter .artwrap .article .row>select{width:calc(100% - 135px); border-radius: 5px; font-size: 15px;}
.join_form .stepouter .artwrap .article .row select.fullhalf{width:285px; border-radius: 5px; font-size: 15px;}
.join_form .stepouter .artwrap .article .row>select[name="special_part"]{width:100px;}
.join_form .stepouter .artwrap .article .row>input[name="doc_number"]{width:calc(100% - 250px);margin-left:15px;}
.join_form .stepouter .artwrap .article .row>.checkwrap, .join_form .stepouter .artwrap .full_art .row>.checkwrap{display: flex; padding:0; width:calc(100% - 135px); flex-wrap:wrap; margin-top: 5px;}
.join_form .stepouter .artwrap .article .row>.checkwrap .form-check, .join_form .stepouter .artwrap .full_art .row>.checkwrap .form-check{margin-right:20px;}
.join_form .stepouter .artwrap .article .row>.checkwrap input:checked, .join_form .stepouter .artwrap .full_art .row>.checkwrap input:checked{background-color:#4f92cf; border-color:#4f92cf;}
.join_form .stepouter .artwrap .article .row>.checkwrap label, .join_form .stepouter .artwrap .full_art .row>.checkwrap label{font-size: 15px; line-height: 1.5em; color:#535353}
.join_form .stepouter .artwrap .full_art .row>.checkwrap .optionbox{width:100%; padding:10px 15px; border:1px solid #ccc; border-radius: 10px; height: 120px; overflow-y:scroll; margin-top: 20px; color:#535353; font-size: 14px; line-height: 1.7em;}
.join_form .btnwrap{margin-top: 40px; text-align: right;}
.join_form .btnwrap button{}


.join_form .stepouter .artwrap .article .row> #emailtab{position: absolute;height: 117px;overflow-y: auto;width: calc(100% - 135px);display: block;background: #fff;border: 1px solid #ddd;border-radius: .2rem;margin-top:5px; z-index: 5; right:0; top:36px;}
.join_form .stepouter .artwrap .article .row> #emailtab .result-item{padding: 8px 15px; border: none; border-bottom: 1px solid #ddd; cursor: pointer; background: transparent; display: block; width: 100%; text-align: left; font-size:15px;}
.join_form .stepouter .artwrap .article .row> #emailtab .result-item:hover, .join_form .stepouter .artwrap .article .row> #emailtab .result-item:active, .join_form .stepouter .artwrap .article .row> #emailtab .result-item:focus{background:#eee; outline:none;}
.join_form .stepouter .artwrap .article .row> #emailtab .result-item:last-of-type{border-bottom: none;}

#searchResults{position: absolute;height: 117px;overflow-y: auto;width: calc(100% - 135px);display: block;background: #fff;border: 1px solid #ddd; margin-top:5px; z-index: 5; border-radius: .2rem; right:0; top: 36px;}
#searchResults .result-item{padding: 8px 15px; border: none; border-bottom: 1px solid #ddd; cursor: pointer; background: transparent; display: block; width: 100%; text-align: left; font-size:15px;}
#searchResults .result-item:hover, #searchResults .result-item:focus, #searchResults .result-item:active{background:#eee; outline:none;}
#searchResults .result-item:last-of-type{border-bottom: none;}
#searchResults .result-item.none{text-align: center;}
#searchResults .result-item.none button{background:#ccc; border:none; border-radius: 5px; font-weight: 500; font-size: 14px; padding:5px 15px; transition: background .4s;}
#searchResults .result-item.none button:hover, #searchResults .result-item.none button:focus, #searchResults .result-item.none button:active{background:#aaa;}

.step04{margin-top:60px; margin-bottom: 100px;}
.step04 .headline{border-bottom:1px solid #d4d4d4; padding-bottom:40px;}
.step04 .headline h4{}
.step04 .middle{padding:80px 0;text-align: center;}
.step04 .middle h4{padding-bottom:30px; position: relative; margin-top: 40px;}
.step04 .middle h4::after{position: absolute; bottom:0; display: block; content: ''; left:0; right:0; margin:0 auto; width:50px; height: 2px; background: #000;}
.step04 .middle h3{margin-top: 30px;}
.step04 .footline{padding-top:40px; border-top:1px solid #d4d4d4; text-align: right;}

@media screen and (max-width:1199px) {
	.join_form .stepouter{padding:0; border:none;}
	
	.join_form .stepouter .artwrap .article .row> #emailtab .result-item{padding: 6px 12px;font-size:14px;}
	
	#searchResults .result-item{padding: 6px 12px; font-size:14px;}
	#searchResults .result-item.none button{padding:4px 12px; font-size: 13px;}
}

@media screen and (max-width:780px) {
	.login_top img{height: 33px}
	.login_body .input_box input{font-size: 14px;}
	.login_body .login_btn button{font-size: 14px;}
	.login_bottom ul li a{font-size: 11px;}
	
	.join_form .stepouter .artwrap{display: block;}
	.join_form .stepouter .artwrap .article{width:100%;}
	.join_form .stepouter .artwrap .article:nth-of-type(1){padding-right:0;}
	.join_form .stepouter .artwrap .article:nth-of-type(2){padding-left:0;}
	.join_form .stepouter .steprow .stepbox .textbox{font-size: 14px;}
	
	.join_container .stepwrap .step{margin-right:100px;}
	.join_container .stepwrap .step::after{width:100px; left:69px; top:32px;}
	.join_container .stepwrap .step:nth-of-type(2)::after{left:77px;}
	.join_container .stepwrap .step .imgwrap{width:64px; height: 64px;}
	.join_container .stepwrap .step .imgwrap img{height: 64px;}
	
	.join_form .stepouter .artwrap .article .row> #emailtab .result-item{padding: 4px 10px;font-size:13px;}
	
	#searchResults .result-item{padding: 4px 10px; font-size:13px;}
	#searchResults .result-item.none button{padding:3px 10px; font-size: 12px;}
	
	.step04{margin-top: 100px; margin-bottom: 60px;}
	.step04 .headline{padding-bottom:20px;}
	.step04 .middle{padding:60px 0;}
	.step04 .middle h4{padding-bottom:20px; margin-top: 30px;}
	.step04 .middle h3{margin-top: 20px;}
	.step04 .footline{padding-top:30px;}
}

@media screen and (max-width:620px) {
	
}

@media screen and (max-width:520px) {
	.login_top img{height: 30px}
	.login_body .input_box input{font-size: 13px;}
	.login_body .login_btn button{font-size: 13px;}
	.login_bottom ul li a{font-size: 10px;}
	
	.join_container{padding-top:50px;}
	.join_container .stepwrap .step{margin-right:60px;}
	.join_container .stepwrap .step::after{width:60px; left:62px; top:28px; border-bottom:1px dashed #d4d4d4;}
	.join_container .stepwrap .step:nth-of-type(2)::after{left:73px;}
	.join_container .stepwrap .step .imgwrap{width:56px; height: 56px;}
	.join_container .stepwrap .step .imgwrap img{height: 56px;}
	.join_container .stepwrap .step .text{margin-top: 10px; font-size: 13px;}
	
	.join_form .stepouter .artwrap .article .row, .join_form .stepouter .artwrap .full_art .row{display: block;}
	.join_form .stepouter .artwrap .article .row>label, .join_form .stepouter .artwrap .article .row>.label, .join_form .stepouter .artwrap .full_art .row>.label, .join_form .stepouter .artwrap .article .row .passwrap label, .join_form .stepouter .artwrap .full_art .row>label{width:100%; margin-bottom: 3px; margin-top: 0; font-size: 14px; padding-left:0;}
	.join_form .stepouter .artwrap .article .row>label span, .join_form .stepouter .artwrap .article .row>.label span, .join_form .stepouter .artwrap .full_art .row>.label span, .join_form .stepouter .artwrap .article .row>label span, .join_form .stepouter .artwrap .article .passwrap>label span, .join_form .stepouter .artwrap .full_art .row label span{left:-9px;}
	.join_form .stepouter .artwrap .article .row .eyeClose{height: 35px; bottom:0; top:auto;}
	.join_form .stepouter .artwrap .full_art .row>.label>div{display: none;}
	.join_form .stepouter .artwrap .article .row>input, .join_form .stepouter .artwrap .article .row .passwrap input, .join_form .stepouter .artwrap .full_art .row .addresswrap{width:100%; font-size: 14px;}
	.join_form .stepouter .artwrap .article .row .passwrap{display: block;}
	.join_form .stepouter .artwrap .article .row>select[name="special_part"]{display: inline-block; font-size: 14px;}
	.join_form .stepouter .artwrap .article .row>input[name="doc_number"]{display: inline-block; width: calc(100% - 120px); font-size: 14px;}
	.join_form .stepouter .artwrap .article .row>select{width:100%; font-size: 14px;}
	.join_form .stepouter .artwrap .full_art .row .addresswrap .postcode{width:150px;}
	.join_form .stepouter .artwrap .full_art .row .addresswrap .address_btn{font-size: 14px;}
	.join_form .stepouter .artwrap .article .row>.checkwrap, .join_form .stepouter .artwrap .full_art .row>.checkwrap{width:100%;}
	.join_form .stepouter .artwrap .article .row>.checkwrap label, .join_form .stepouter .artwrap .full_art .row>.checkwrap label{font-size: 14px;}
	
	.step04 .middle{padding:40px 0;}
}

@media screen and (max-width:420px) {
	.join_container .stepwrap .step{margin-right:40px;}
	.join_container .stepwrap .step::after{width:40px; left:55px; top:24px;}
	.join_container .stepwrap .step:nth-of-type(2)::after{left:66px;}
	.join_container .stepwrap .step .imgwrap{width:48px; height: 48px;}
	.join_container .stepwrap .step .imgwrap img{height: 48px;}
	.join_container .stepwrap .step .text{margin-top: 10px; font-size: 13px;}
}