@charset "utf-8";

.loc_step{margin-bottom: 40px;}

.step_tit{margin-bottom: 40px;}
.step_tit h4, .step_tit h4 em{font-size:26px;}
.step_tit h4 em{color:#999;}
.step_tit p{margin-top:15px; color:#777; font-size: 13px;}

/* step1 */
.login_box{overflow: hidden; border:1px solid #d9d9d9; padding:45px 0 45px 210px;}
.login_box .input_area {float:left; margin-right:10px;}
.login_box .input_area dl {overflow:hidden;}
.login_box .input_area dl + dl {margin-top:10px;}
.login_box .input_area dt {float:left; font-weight:bold; line-height:34px; height:34px; width:100px;}
.login_box .input_area dd {float:left;}
.login_box .input_area .btn_area {float:left;}

.n_info_box{padding:30px 0; border:1px solid #d9d9d9; border-top:0; background-color: #f9f9f9; text-align: center;}
.n_info_box p{margin-bottom: 20px; font-weight: bold;}

.member_area{margin-top:30px; padding:30px; border:1px solid #d9d9d9;}
.member_area dl{margin-bottom: 30px;}
.member_area dl dt{margin-bottom:20px; font-weight: bold; font-size: 18px;}
.member_area dl.member_info dd p{margin-bottom: 5px; color:#777; font-size: 13px;}
.member_area dl.family_site dd ul{overflow: hidden; margin-top:-40px;}
.member_area dl.family_site dd ul li{float: left; margin-top:50px; margin-right:25px; min-width:80px;}
.member_area dl.family_site dd ul li a{display: block;}

/* step2 */
.agreement dl{margin-bottom: 30px;}
.agreement dl dt{overflow: hidden; margin-bottom:10px; padding-bottom: 15px; border-bottom:1px solid #333;}
.agreement dl dt > strong{float: left; font-size: 18px;}
.agreement dl dd{overflow: hidden;}
.agreement dl dd .iframe{background-color:#f9f9f9; overflow:hidden; box-sizing:border-box; margin-bottom: 10px; padding:10px 15px; height:160px;}
.agreement dl dd .iframe iframe{overflow-x:hidden; border:1px solid #f9f9f9; box-sizing:border-box; height:140px; width:100%;}
.agreement dl dd .agree_info{overflow:hidden; border-top:1px solid #d9d9d9; text-align:right; padding-top:10px;}
.agreement dl dd .agree_info span + span {padding-left:20px;}

/* step3 */
.join .board_write tbody tr td .i_t{margin-left:20px; color:#777; font-size: 13px; line-height: 33px; vertical-align: top;}
.join .board_write tbody tr td .i_t em{display: inline-block; margin-right:20px; font-size: 13px; vertical-align: top;}
.join .board_write tbody tr td .i_t em.n_use{color:#ed1c24;}

.join .board_write tbody tr td .btn_area{display: inline-block;}

.join .board_write tbody tr td .email{display: inline-block;}
.join .board_write .next_btn{margin-top:20px;}

/* step4 */
.complete_info{overflow: hidden; margin-bottom: 40px; border-top:1px solid #333; border-bottom:1px solid #d9d9d9; padding-top:10px; padding-bottom:10px;}
.complete_info .txt_area{float: left; box-sizing:border-box; padding:45px 50px; width:50%; background-color: #f9f9f9; height:235px;}
.complete_info .txt_area .greeting_txt{overflow:hidden; margin-bottom:10px;}
.complete_info .txt_area .greeting_txt *{font-weight:bold; font-size: 20px;}
.complete_info .txt_area .greeting_txt p:first-child{margin-bottom: 10px;}
.complete_info .txt_area .greeting_txt p strong:before{content: "'";}
.complete_info .txt_area .greeting_txt p strong:after{content: "'";}
.complete_info .txt_area p.txt_777 {margin-bottom: 30px;}
.complete_info .img_area{float: left; height:235px; width:545px;}



/*join_tab*/
.join_tab{
	
}
.join_tab .join_tab_bx{
	display: block;position: relative;
}

.join_tab .join_tab_bx .join_tab_btn{
	width: calc(50% - 2px);text-align: center;float: left;color: #ddd;border-left: 0;border: 1px solid #ddd;margin-bottom: 2em;
}

.join_tab .join_tab_bx .join_tab_btn.active{
	color: #222;
	background-color: #fff;
}

.join_tab .join_tab_bx .join_tab_btn a{
	display: block; color: #999; padding: 1em; background-color: #f1f1f1;
}
.join_tab .join_tab_bx .join_tab_btn.active a{
	display: block; color: #000; padding: 1em; background-color: #fff;
}

.join_tab .join_tab_bx .join_tab_btn a span{
	font-size:1.2em; display:inline-block; margin-top:0.5em;
}

.join_tab .join_tab_bx .join_tab_btn a:hover{
	text-decoration: none;
	color: #000;
}

.join_tab .join_tab_bx .join_tab_btn a:hover img{
	-webkit-filter:opacity(1) drop-shadow(0 0 0 #000);
	filter:opacity(1) drop-shadow(0 0 0 #000);
}
.join .title{
	clear: both;
}