@charset "utf-8";



/* 加入我们 */
@media screen and (min-width: 320px) {
	.join-link{  padding-bottom: 15px;}
	.join-link dl{display: flex;}
	.join-link dt{font-weight: bold; font-size: 12px; flex-shrink: 0; line-height: 28px; color: #333;}
	.join-link dd{ display: flex; flex-wrap: wrap;}
	.join-link dd a{ margin-left: 10px; line-height: 28px; font-size: 12px;}
	
	.join-row .col{ }
	
	.join-list{}
	
	.join-body dl:nth-child(even) .join-row{background: #F6F6F6;}
	
	.join-header .join-row{ background: #036EB8;}
	.join-header .join-row .col{ color: #fff;}
	.col-m-hide{display: none;}
	
	.join-row {display: flex; border: solid 1px #E8E8E8; border-top: none; }
	.join-row .col{padding: 10px 10px;}
	.join-row .col-10{ flex:1; flex-shrink: 0;}
	
	.join-row i{display: flex; align-items: center; justify-content: center;}
	.join-row i::before{ color: #CBCBCB; display: block;}
	
	.join-body dt{ cursor: pointer; background: #fff;}
	.join-body dd{ padding: 10px; border-bottom: solid 1px #E8E8E8; display: none;}
	
	.join-body ul { background: #f9f9f9; padding: 10px; border-radius: 4px; margin-bottom: 15px;}
	.join-body ul li{ display: flex; border-bottom: solid 1px #E8E8E8; padding: 5px 0;}
	.join-body ul li:nth-last-child(1){border: none;}
	.join-body ul li span{ padding-right: 15px; font-size: 12px;}
	.join-body ul li span:nth-child(1){font-weight: bold;}
	
	.join-body dd .mess{ padding-bottom: 15px;}
	.join-body dd .mess div{ font-size: 12px; color: #666;}
	
	
	.join-body .on .join-row div{ color: #036EB8;}
	.join-body .on .join-row i::before{transform: rotate(90deg); color: #036EB8;}
	
	.join-body .btn a{display: inline-flex; align-items: center; padding: 0 20px; height: 46px; border-radius: 23px; background: #036EB8;}
	.join-body .btn a i{ padding-right: 5px; line-height: 22px;}
	.join-body .btn a i::before{ color: #fff; font-size: 22px; line-height: 22px;}
	.join-body .btn a span{ color: #fff; font-size: 14px;}
	.join-body .btn .mess{display: inline-flex; }
	.join-body .btn a:hover{ opacity: .8;}
}

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

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

@media screen and (min-width: 992px) {
	.join-link{ display: flex; justify-content: flex-end; padding-bottom: 20px;}
	.join-link dt{font-size: 14px;}
	.join-link dd a{font-size: 14px; margin-left: 15px;}
	
	.col-m-hide{display: block;}
	
	.join-row .col{display: flex; align-items: center; justify-content: center;}
	.join-row .col-10{ flex-basis: 41.66667%; flex-shrink: 0; justify-content: flex-start;}
	.join-row .col-03{ flex-basis: 12.5%; flex-shrink: 0;}
	.join-row .col-02{ flex-basis: 8.333333%;flex-shrink: 0;}
	.join-row .col-01{ flex-basis: 4.166667%; flex-shrink: 0;}
	
	.join-row .col{ padding: 10px 10px;}
	
	.join-body ul{display: none;}
	
	.join-header .join-row{ padding: 0 10px;}
	.join-body dt .join-row{ padding: 0 10px;}
	.join-body dd{ padding: 15px 20px;}
	
	.join-body dd .mess .sub-tit{font-size: 14px;}
	.join-body dd .mess .sub-txt{ font-size: 14px;}
	
	.join-row i::before{font-size: 16px; line-height: 1;}
	
	.join-body .btn .mess{padding-left:5px; font-size: 14px;}
	
}


@media screen and (min-width: 1440px) {
	.join-row .col{ padding: 15px 30px;}
	.join-row div{font-size: 16px;}
	.join-body dd{ padding: 20px 40px;}
	.join-body dd .mess .sub-tit{font-size: 16px;}
	.join-body dd .mess .sub-txt{ font-size: 16px;}
	
	.join-row i::before{font-size: 18px;}
	
	.join-body dd .mess{ padding-bottom:20px;}
	.join-body .btn a{ padding: 0 28px; height: 52px; border-radius: 26px;}
	.join-body .btn a span{}
}