@charset "utf-8";

body {position:relative; background:url(/images/crm/bg/content_bg.gif) 0 0 repeat}

.r_img {width:100%; height:auto}

#warp {padding-top:5px; padding-bottom:0; background:url(/images/crm/bg/top_bg.gif) left top repeat-x}
#warp:after {content:''; display:block; clear:both}

.content {max-width:800px; margin:0 auto; overflow:auto}
footer {width:100%; height:40px; line-height:40px; text-align:center; font-size:11px; color:#cccccc; background:#666}


.content .logo {display:block; margin:20px 0 6px}
.content h1 {clear:both; text-align:center; margin-bottom:16px; font-size:48px; color:#333; letter-spacing:-3px; transition: all 0.2s}
.content h1 span {font-weight:bold}
.content h1 .c1 {color:#018385}
.content h1 .c2 {color:#0070a8}
.top_text {display: block; font-size: 16px; border: 2px solid #dfdfdf; padding: 20px; width: 80%; text-align: center; margin: 0 auto; word-break: keep-all;}

.body_box {border-top:4px solid #484848; margin-top:40px; background:#fff}
.body_box.step01 {padding:50px 30px}
.body_box.step02 {padding:35px 30px}
.greeting {margin-bottom:40px; color:#666; font-size:16px; line-height:30px}

.progress {margin-top:20px; overflow:hidden; height:50px; line-height:50px; color:#000; font-size:16px; border:1px solid #f3f3f3}
.progress span {float:left; width:18%; text-align:center; font-weight:bold; background:#f3f3f3}
.progress strong.date {width:64%; float:left; text-align:center}
.progress span.mrk {float:right; width:18%; color:#fff; background:#0070a8}

.btn_set {text-align:center; margin-top:30px}
.link_btn {display:inline-block; padding:15px 34px; color:#fff; font-size:18px; font-weight:bold; background:#018385; transition: all 0.2s}
.link_btn.end {min-width:180px}

.body_box.step02 h2 {text-align:center; font-size:30px; font-weight:bold; }
.body_box.step02 h2 span { font-size: 1.5rem; display: block; font-weight: 400;}

.join_tb {margin-top: 30px; border-top: 2px solid #355672; border-bottom: 2px solid #355672;  }
.join_tb .item_list {width: 100%; display: flex; justify-content: space-evenly;border-bottom: 1px solid #ddd;}
.join_tb .item_list:nth-first-child(1) {border-bottom:none;}
.join_tb .item_list:nth-last-child(1) {border-top: none;}
.join_tb .item_list > div:nth-child(1) {padding: 12px; display: inline-block; width: 20%; text-align: center; font-size: 1rem; box-sizing: border-box; background-color: aliceblue;}
.join_tb .item_list > div:nth-child(2) {padding: 12px; width: 80%; text-align: left; font-size: 1rem; box-sizing: border-box;}
/* .join_tb {width:100%; margin-top:30px}
.join_tb th {width:25%; height:43px; text-align:center; color:#333; font-size:13px; border:1px solid #f7f7f7; background:#fbfbfb; transition: all 0.2s}
.join_tb td {width:75%; height:43px; text-align:left; color:#333; font-size:13px; padding:0 2%; border:1px solid #f7f7f7} */

input.name { padding: 2px 10px; border-radius: 5px; height: 30px;  min-width: 30%;}
input.num {padding: 2px 10px; border-radius: 5px; height: 30px;width:20%;}
select.num {padding: 2px 10px; border-radius: 5px; height: 30px;width:20%;}

.join input { border:1px solid #a0a0a0}
.join select {border:1px solid #a0a0a0}

.join input[type=radio] {margin-right:5px}
.join .ml15 {margin-right:25px}
.join > span { display: block; padding: 20px; text-align: center;font-size: 16px;word-break: keep-all;}

.if_title {display: block; padding: 20px; font-size: 16px; text-align:left; background-color:#fafafa;}
.if_title .title:nth-child(1) { padding-top:0;}
.if_title .title { font-weight:600; padding-top: 10px; }
.if_title .pl {    padding-left: 15px; word-break: keep-all;}
.if_title .pll { padding-left: 30px;}
.if_title .blue {font-weight: 800; color: #2270ed; text-decoration: underline; font-size: 1.2rem;}
.quest {display: block; font-size: 16px; text-align: center; padding: 30px 20px;}
.btnbox {display: flex;justify-content: space-between;}
.btn {display: block; background-color: aliceblue; padding: 16px; width: 49%; text-align: center; box-sizing: border-box; border-radius: 10px;}
.btn > label { font-size: 16px;}

.question {}

.qu_chek.bdb {margin-bottom:30px; border-bottom:1px solid #f7f7f7;}
.qu_chek {overflow:hidden; padding:0 20px 30px;}
.qu_chek > i {float:left; width:55px; height:28px; line-height:28px; margin-right:20px; text-align:center; color:#fff; font-size:13px;  background:#018385; border-radius:4px;}

.q_feild {float:left; width:80%; }
.q_feild > strong {font-size:1rem;}
.q_feild > p {margin:12px 0;}
.q_feild > p > input[type=checkbox],
.q_feild > p > input[type=radio] {width:13px; height:13px;}
.q_feild > p > label {margin-left:10px; font-size:1rem;}
.q_feild textarea {width:100%; height:118px; padding:1%; margin:20px 0; border:1px solid #ccc; box-sizing:border-box;}
.q_feild .em {display:block; color:#784d27; font-size:13px;}

.q_table_top {float:left; margin-top:5px;}
.q_table_body {clear:both; padding-top:30px}
.q_table_body ul li {width:638px; overflow:hidden; border-bottom:1px solid #eee;}

.q_table_body ul li span {float:left; width:75px; height:42px; line-height:42px; text-align:center; border-right:1px solid #eee;}
.q_table_body ul li span i {display:inline-block; width:55px; height:28px; line-height:28px; text-align:center; color:#fff; font-size:13px; background:#0070a8; border-radius:4px;}
.q_table_body ul li p {float:left; width:334px; height:42px; line-height:42px; padding-left:10px;}


.q_table_body table {float:left; width:216px}
.q_table_body thead {display:none;}
.q_table_body thead tr th {height:42px; text-align:center; font-size:12px; font-weight:normal;border-left:1px solid #eee; border-right:1px solid #eee; background:#fbfbfb;}
.q_table_body tbody tr td {height:42px; text-align:center; border-left:1px solid #eee; border-right:1px solid #eee;}

.q_table_body.table2 ul li p {width:245px;}
.q_table_body.table2 table {width:307px}







@media(max-width:860px){
	.content {max-width:100%; margin:0 10px}
	.content .logo {text-align:center}
	.content h1 {font-size:36px; }
	.body_box.step01, .body_box.step02 {width:100%; box-sizing:border-box; padding:20px 15px}
	.greeting {margin-bottom: 30px; font-size: 14px; line-height: 24px}
	
	select.num {min-width:15%;}
	input.num {min-width:15%;}
	input.btn {display: block; background-color: aliceblue; padding: 12px; width: 49%; text-align: center; box-sizing: border-box; border-radius: 10px;}
	.item > span { width: 2%; display: inline-block;}
	
	.q_table_body {padding-top:10px;}
	.q_table_body img {display:none;}
	.q_table_body ul li {width:100%; margin-top:15px;}
	.q_table_body ul li p {float:left; width:80%; height:42px; line-height:42px;}
	.q_table_body ul li span {width:60px; border-right:none; background:url(/images/crm/bg/table_span.gif) left center no-repeat;}
	.q_table_body ul li span i {width:37px; height:22px; line-height:22px;}
	.q_table_body table {float:left; width:100%;}
	.q_table_body thead {display:table-header-group;}
	.q_table_body thead tr th {border-top:1px solid #eee;}


	.q_table_body.table2 img {display:none;}
	.q_table_body.table2 ul li {width:100%; margin-top:15px;}
	.q_table_body.table2 ul li p {float:left; width:80%; height:42px; line-height:42px;}
	.q_table_body.table2 ul li span {width:60px; border-right:none; background:url(/images/crm/bg/table_span.gif) left center no-repeat;}
	.q_table_body ul li span i {width:37px; height:22px; line-height:22px;}
	.q_table_body.table2 table {float:left; width:100%;}
	.q_table_body.table2 thead {display:table-header-group;}
	.q_table_body.table2 thead tr th {border-top:1px solid #eee;}
}
@media(max-width:500px){
	
	.join_tb .item_list {width: 100%; display: block; }
	.join_tb .item_list > div:nth-child(1) {padding: 12px; display: block; width: 100%; text-align: center; font-size: 1rem;}
	.join_tb .item_list > div:nth-child(2) {padding: 12px; display: block; width: 100%; text-align: center; font-size: 1rem; display: flex; justify-content: space-between; }
	input.name {width:100%; }
	select.num {width:30%;}
	input.num {width:30%;}
}

@media(max-width:480px){
	
	
	.join > span {font-size: 0.85rem;}
	.content h1 {font-size:28px}
	.body_box.step02 h2 {   font-size: 1.3rem; word-break: keep-all;}
	.progress {height:36px; line-height:36px; font-size:12px}
	.if_title {margin:10px 0 20px; font-size:14px}
	.join .w170 {width:100%}
	.qu_chek {padding: 0 0 20px;}
	.qu_chek > i {width:30px; height:22px; line-height:22px; margin-right:10px; font-size:13px;  background:#018385; border-radius:4px;}
	.qu_chek.bdb {margin-bottom:20px; border-bottom:1px solid #f7f7f7;}
	.q_feild {margin-top:0px;}
	.q_feild strong {font-size:13px;}
	.q_feild textarea {height:70px; padding:1%;  margin: 12px 0;}
	.q_feild .em {font-size:12px;}
	.q_table_body ul li p {width:70%;}
	.q_table_body.table2 ul li p {width:70%;}
	.quest {padding: 1rem;}
	
	
	}

@media(max-width:430px){


}

@media(max-width:360px){
	.content h1 {font-size:24px}
	.body_box.step02 h2 {font-size:20px}
	.greeting {margin-bottom:20px; font-size:12px}
	.link_btn {width:100%; padding:15px 0px}
	.join .w60 {width:49px}
	.if_title {font-size:12px}
}


@media(max-width:320px){
	.progress {font-size:11px}
	.progress span {width:20%}
	.progress strong.date {width:60%}
}