@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: pingfanglight;
	src: url(../images/PingFangLight.ttf);
}
@font-face {
	font-family: pingfangregular;
	src: url(../images/PingFangRegular.ttf);
}

body{ font-family: pingfangregular;}


@media screen and ( min-width: 1024px ){
	
	.join{ width: 100vw; height: 100vh; background-image: url(../images/bg_join.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: center; position: relative; z-index: 0;}
	.black{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.3); position: absolute; z-index: 0;}

	.box{ width: 800px; height: 800px; background-color: #FFFFFF; position: absolute; left: 50%; margin-left: -400px; top: 50%; margin-top: -400px; border-radius: 4px; overflow: hidden;}
	.title{ width: 720px; overflow: hidden; margin: 40px auto 30px;}
	.title img{ width: 220px; height: 50px; float: left; margin-right: 20px;}
	.title h2{ height: 36px; font-size: 24px; color: #222222; line-height: 36px; font-style: italic; float: left; margin-top: 14px;}
	.box h3{ width: 720px; font-size: 18px; color: #666666; line-height: 30px; margin: 0 auto;}
	.box >img{ width: 800px; height: 120px; margin: 30px 0;}

	.submit{ width: 500px; margin: 40px auto;}
	.submit ul{ width: 500px; overflow: hidden;}
	.submit ul li{ width: 500px; overflow: hidden; margin-bottom: 30px;}
	.submit ul li h3{ width: 90px; font-size: 16px; color: #222222; line-height: 40px; text-align: right; float: left;}
	.submit ul li h3 b{ color: #ff6a24; margin-right: 6px;}
	.submit ul li input{ display: block; width: 360px; height: 38px; border: none; outline: none; border-bottom: solid 1px #AAAAAA; font-family: pingfangregular; font-size: 16px; color: #222222; text-align: center; float: left; margin-left: 10px;}
	.submit ul li input:focus::placeholder{ opacity: 0.2;}

	.submit button{ display: block; width: 300px; height: 50px; background-color: #FF6A24; border-radius: 4px; border: none; outline: none; margin: 30px auto; font-family: pingfangregular; font-size: 20px; color: #FFFFFF; cursor: pointer;}
	.submit button:active{ opacity: 0.8;}

	.submit >p{  font-size: 14px; color: #222222; line-height: 30px; text-align: center; user-select: none;}
	.submit >p input{ width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-bottom: 2px; cursor: pointer;}
	.submit >p label{ cursor: pointer;}
	.submit >p a{ color: #1E92FF;  cursor: pointer;}

	.xieyi{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.3); position: absolute; z-index: 9; display: none;}
	.xieyi div{ width: 1000px; height: 600px; background-color: #FFFFFF; position: absolute; left: 50%; margin-left: -500px; top: 50%; margin-top: -300px; border-radius: 4px; overflow-y: auto}
	.xieyi div h3{ font-size: 24px; color: #222222; line-height: 40px; text-align: center; margin: 30px 0 10px;}
	.xieyi div h4{ color: #222222; line-height: 30px; text-align: center; margin: 20px 0 5px;}
	.xieyi div p{ width: 900px; height: auto; overflow-y: auto; font-size: 16px; color: #666666; line-height: 24px; text-align: justify; margin: 0 auto;}
	
	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	.xieyi div p::-webkit-scrollbar{ width:6px; height:6px; background-color:#FFFFFF;}
	/*定义滚动条轨道 内阴影+圆角*/
	.xieyi div p::-webkit-scrollbar-track{ border-radius:3px; background-color:#AAAAAA;}
	/*定义滑块 内阴影+圆角*/
	.xieyi div p::-webkit-scrollbar-thumb{ border-radius:3px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5); box-shadow:inset 0 0 6px rgba(0,0,0,0.5); background-color:#888888;}
	
	.xieyi div button{ display: block; width: 100px; height: 30px; background-color: #FF6A24; border-radius: 4px; border: none; outline: none; font-size: 14px; color: #FFFFFF; line-height: 30px; float: right; margin: 20px 50px 0 0; cursor: pointer;}
	.xieyi div button:active{ opacity: 0.8;}
	
}


@media screen and ( max-width: 1023px ){
	
	.join{ width: 100vw; height: 100vh; background-image: url(../images/bg_join.jpg); background-repeat: no-repeat; background-size: auto 100%; background-position: center; position: relative; z-index: 0;}
	.black{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.3); position: absolute; z-index: 0;}

	.box{ width: 92vw; height: 100vw; background-color: #FFFFFF; position: absolute; left: 50%; margin-left: -46vw; top: 50%; margin-top: -50vw; border-radius: 1vw; overflow: hidden;}
	.title{ width: 84vw; overflow: hidden; margin: 4vw auto 3vw;}
	.title img{ width: 22vw; height: 5vw; float: left; margin-right: 2vw;}
	.title h2{ height: 3.6vw; font-size: 2.8vw; color: #222222; line-height: 3.6vw; font-style: italic; float: left; margin-top: 1.4vw;}
	.box >h3{ width: 84vw; font-size: 2.4vw; color: #666666; line-height: 3.6vw; font-style: italic; margin: 0 auto;}
	.box >img{ width: 100%; height: auto; margin: 4vw 0;}

	.submit{ width: 84vw; margin: 8vw auto 4vw;}
	.submit ul{ width: 100%; overflow: hidden;}
	.submit ul li{ width: 100%; overflow: hidden; margin-bottom: 4vw;}
	.submit ul li h3{ width: 16vw; font-size: 2.6vw; color: #222222; line-height: 6vw; text-align: right; float: left;}
	.submit ul li h3 b{ color: #ff6a24; margin-right: 1vw;}
	.submit ul li input{ display: block; width: 60vw; height: calc(6vw - 1px); border: none; outline: none; border-bottom: solid 1px #AAAAAA; font-family: pingfangregular; font-size: 2.6vw; color: #222222; text-align: center; float: left; margin-left: 2vw;}
	.submit ul li input:focus::placeholder{ opacity: 0.2;}

	.submit button{ display: block; width: 36vw; height: 7vw; background-color: #FF6A24; border-radius: 1vw; border: none; outline: none; margin: 3vw auto 4vw; font-family: pingfangregular; font-size: 2.8vw; color: #FFFFFF; cursor: pointer;}
	.submit button:active{ opacity: 0.8;}

	.submit >p{  font-size: 2.6vw; color: #222222; line-height: 3vw; text-align: center; user-select: none;}
	.submit >p input{ width: 2.8vw; height: 2.8vw; display: inline-block; vertical-align: middle; margin-bottom: 0.2vw; cursor: pointer;}
	.submit >p label{ cursor: pointer; -webkit-tap-highlight-color: rgba(255,255,255,0);}
	.submit >p a{ color: #1E92FF;  cursor: pointer;}
	
	.xieyi{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.3); position: absolute; z-index: 9; display: none;}
	.xieyi div{ width: 88vw; height: 120vw; background-color: #FFFFFF; position: absolute; left: 50%; margin-left: -44vw; top: 50%; margin-top: -60vw; border-radius: 1vw; overflow-y: auto;}
	.xieyi div h3{ font-size: 2.8vw; color: #222222; line-height: 4vw; text-align: center; margin: 4vw 0 2vw;}
	.xieyi div h4{ color: #222222; line-height: 3vw; font-size: 2.2vw; text-align: center; margin: 3vw 0 1vw;}
	.xieyi div p{ width: 78vw; height: auto;  font-size: 2.4vw; color: #666666; line-height: 3.6vw; text-align: justify; margin: 0 auto;}
	
	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	.xieyi div p::-webkit-scrollbar{ width:6px; height:6px; background-color:#FFFFFF;}
	/*定义滚动条轨道 内阴影+圆角*/
	.xieyi div p::-webkit-scrollbar-track{ border-radius:3px; background-color:#AAAAAA;}
	/*定义滑块 内阴影+圆角*/
	.xieyi div p::-webkit-scrollbar-thumb{ border-radius:3px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5); box-shadow:inset 0 0 6px rgba(0,0,0,0.5); background-color:#888888;}
	
	.xieyi div button{ display: block; width: 16vw; height: 6vw; background-color: #FF6A24; border-radius: 1vw; border: none; outline: none; font-size: 2.4vw; color: #FFFFFF; line-height: 4vw; margin: 4vw auto 0; cursor: pointer;}
	.xieyi div button:active{ opacity: 0.8;}

}