@charset "utf-8";

:root {
	--main-color: #2c61e7;
	--main-color-hover: #2958d0;
}

.main-banner {
	height: 460px;
	background: url(../images/joinShop/main-banner-bg.png) no-repeat center #2c61e7;
	background-color: #;
}

.main-banner-wrap {
	height: 460px;
}

.main-banner-p {
	margin-top: 40px;
	font-size: 18px;
	color: #fff;
}

.main-banner-btn {
	margin-top: 50px;
}

.main-banner-btn-a {
	display: inline-block;
	width: 248px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 50px;
	background-color: #FFED27;
	font-size: 24px;
	font-weight: bold;
	box-shadow: 0 0 10px 3px rgba(15, 69, 168, .4);
}

.main-banner-btn-a:hover {
	background-color: #e9d825;
}

.items {
	padding: 70px 0 85px;
}

.gray-bg {
	background-color: #F7F7F7;
}

.main-title {
	font-size: 36px;
	font-weight: bold;
	color: #2c61e7;
	text-align: center;
}

.main-title:before {
	content: "";
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAllBMVEUAAAAsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYecsYeeaeB0dAAAAMXRSTlMAx60xGfPf6Y0j+9AI2btgBczBmXNbtJKAekoQC/bjUUdBNi0oFadsVR/unjzvZYjbhl8oCAAAAn1JREFUSMetlum6qiAUhtE0c8pZK6dKK5s3939z52xAIwEzn/39KVvrDYG1PgBi6ZvTehWedgr4VrenCYkMaV1/g259+K7jbCx6kCGrxchhNciTqY9gIyiQuv/IOlR6YZoFjX+id12m7NQWAG7tyK+xD4NsprYotbxVh3uDcJv2EMwlHGBnJGfL7EBbMJkYXuKUho2UhF6JqxknXHmxK45dhPAKxXOLF3PJUm5EsITCT37wieFAwFoGCteDczJFbYiicyCQjQuFO6wjX3B5fKgBmZ31aQ6JEhGcdP0VAVqVN6JxF6+cmCryjQFfCkRwQCVps45Fzx+L36OzDELXr/9bHo+meuaziuYdj/69zb2kZAuwlqWF5q8InA3ZUOp4bfrvY0genJ4bJQusZNEzkDXsCtUiNXtjHKWTkXJdzu76nN46/D6UZoA79o208JIpGhqu+ZUaAJXvizpl3r7Lt1gbiJoh3c+I9pxgjtYCkGb4UibCMJx8Cy//Co5Zy7qaEpbnhSz8Q8EaE20gpTPfklRQ8D0xZA44tkokEJDPnqLBkS/kAKj4dpzFxbzVSnAA6ADE6Ms9ZRzRJUvnsqXbrbJCXM0CQvFbUqfOMFMZhe789yPvQYwlGsYsfVauMUr3YZPjH6RINLoSJVIBKfnUpsfkt1wKHjelv0RbOe9f6t6nElPeff+xbVvza4J6zKXqBHo6O1d/rhqGgXBbXm0zNNOgj2oLvjm7BwUJYUiVTWG5WkhBk4GR2uVkNDksK/1w+FgMrAHLZQa+VtXe5yYo035fuJxAEq+J02lsiMxtms7/2TWYKAldU6epQU03URoMJrMP6IPJUgt3OtyM2d9/8A+0Yev5N88AAAAASUVORK5CYII=) no-repeat center;
	display: inline-block;
	vertical-align: middle;
	width: 60px;
	height: 60px;
	margin-right: 16px;
}

.items-shop .items-block {
	margin-top: 66px;
	justify-content: space-around;
}

.items-shop .img-block {
	margin: 0;
}

.items-shop .item-p {
	width: 575px;
	font-size: 16px;
	line-height: 2.25em;
}

.items-shop .item-em {
	font-size: 24px;
	font-weight: bold;
	margin-right: 8px;
}

.items-join-range .items-block {
	margin-top: 70px;
	justify-content: space-between;
}

.items-join-range .item {
	width: 300px;
}

.items-join-range .img-block {
	height: 142px;
}

.items-join-range .item-title {
	font-size: 24px;
	text-align: center;
	margin-top: 30px;
}

.items-join-range .item-p {
	color: #666;
	font-size: 16px;
	line-height: 1.5em;
	margin-top: 24px;
}

.items-join-how {
	padding-bottom: 75px;
}

.items-join-how .items-block {
	margin-top: 80px;
	justify-content: space-between;
	position: relative;
}

.items-join-how .items-block:before {
	content: "";
	position: absolute;
	width: 1000px;
	height: 4px;
	background-color: #E5E5E5;
	left: 100px;
	top: 32px;
}

.items-join-how .item {
	width: 200px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.items-join-how .img-block {
	height: 68px;
}

.items-join-how .item-title {
	color: #666;
	font-size: 18px;
	margin-top: 24px;
}

.items-join-how .item-btn {
	margin-top: 75px;
	text-align: center;
}

.items-join-how .item-btn-a {
	display: inline-block;
	width: 248px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 50px;
	background-color: #2c61e7;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	box-shadow: 0 0 10px 0 rgba(15, 69, 168, .4);
}

.items-join-how .item-btn-a:hover {
	background-color: #2958d0;
}

.items-join-rules {
	padding-bottom: 70px;
}

.items-join-rules .item-title-block {
	text-align: center;
	position: relative;
}

.items-join-rules .item-title-block:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	border-bottom: 1px dashed #E5E5E5;
	left: 0;
	top: 50%;
}

.items-join-rules .item-title {
	display: inline-block;
	background-color: #fff;
	position: relative;
	z-index: 1;
	color: #666;
	font-size: 18px;
	padding: 0 30px;
}

.items-join-rules .item-info {
	width: 432px;
	margin: 32px auto 0;
	counter-reset: rules-num;
}

.items-join-rules .item-p {
	color: #999;
	font-size: 14px;
	line-height: 1.7143em;
	padding-left: 20px;
	position: relative;
	counter-increment: rules-num;
}

.items-join-rules .item-p:before {
	content: counter(rules-num);
	position: absolute;
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	text-align: center;
	line-height: 13px;
	font-size: 12px;
	border-radius: 50%;
	border: 1px solid #9D9D9D;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.items-why {
	background-color: #2c61e7;
}

.items-why .main-title {
	color: #fff;
}

.items-why .main-title:before {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAt1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8QiqlJAAAAPHRSTlMAx0kxGazq3wf72Y5g8s/LWyoiBIJB97GbknxRNhUK9OGncmxVJRHuwr+8tYo8Lh4N5bmWZe9129Ged6CstOmtAAACjElEQVRIx6WW54KiMBRGgwKjiAKi2HvvOpYpe9//uXYliYkkoe35McXLIRO498sgNfXC7LfxmDV1lJXDvgaEstb1sqiFDbwzKaZVBwaIVNK5TRNk1BYpXBcUVPuJrg2My/f3mNeT7CZQWrZXQsj37BZbexDrnqtUPbIPjwa1nViZXnZT7GUa4xYBUxBePG2Ys1omvTEXKz1iN9TdjC/4kdXauLZSyo2wHpRkNX9Ed6RAC8v7uDvDVeGWgrDsxe6pphrDsPqBFFi4UaTL2sYqrBoJPWCIu56NE2ev85ovF/F4DrzYq+Q9u2Y34PqnDIyrSm4DwyxGei+p+R3gKJPBWbD7bSeTWvUkd3XTmUzWdyCszuQVYLa9Ybh/XZFs9efXpU3/gM/nr1PA2JE06lQwnUokQH7Z6JXI+B/ERKGUl9KUs15z7qJ3psARDe0uXW/LNsAz42VP3qltNJLnYt1k7tqXR6yFVMOw7BcJfUlOBuGzQGQYMoJPQSx3ssqf/yNvOXknjne7pmEcRxLWX5xsCtU5cJzkkTRCY3kmToUDTuwSDV3J9whu7MorcgAc5XE8bF0+KMIp8YOdBUK78If7WXhkPkl7X9K69CnrJNVKKCVdoAuzM6ymp1Kbm/cj70aCxY3XSotir0tVNofzAH+guarVB25HuwDHmnvpLcAE2vV20P3o0W4E0X/q3rfS4rL7/mVZlrleENWBCKOZ0HL2n814VC6HN6laRrcwxE0eVc29PJz9pR4yZAeRxa9YHWvtOSkm0wzIaq1H71gfDBKbQQxgAx8H2fCwWkQ5GD4T9NLLqrGs2S3zuVMcbrk4/XO7KCcawCOvO8dDlw8T2rndG6xRbqpjP788T/N+/wLDttqnZIf6jgAAAABJRU5ErkJggg==);
}

.items-why .items-block {
	margin-top: 45px;
	justify-content: space-around;
}

.items-why .item-p {
	width: 807px;
	color: #fff;
	font-size: 16px;
	line-height: 2.25em;
	letter-spacing: 1px;
}

.items-why .item-em {
	font-size: 24px;
	color: #ffed27;
}

.items-why .item-title {
	text-align: center;
	font-size: 16px;
	color: #fff;
	margin-top: 18px;
}

/* form */

.join-shop-form {
	padding-bottom: 70px;
	background-color: #F7F7F7;
}

.join-shop-form .top {
	height: 140px;
	background: url(../images/joinShop/form-top-bg.png) no-repeat center;
}

.join-shop-form .top .title {
	text-align: center;
	line-height: 140px;
	font-size: 44px;
	font-weight: bold;
	color: #fff;
}

.form-block {
	margin-top: 46px;
	background-color: #fff;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.form-wrap {
	width: 512px;
	margin: 50px auto 0;
	padding-bottom: 56px;
}

.form-item {
	margin-top: 20px;
}

.form-item>label {
	width: 95px;
	text-align: right;
	color: #666;
	align-self: flex-start;
	line-height: 38px;
}

.form-item.required>label:before {
	content: "*";
	color: #ff8b47;
}

.form-input {
	flex: 1 1 auto;
	box-sizing: border-box;
	height: 38px;
	line-height: 36px;
	border: 1px solid #E5E5E5;
	padding: 0 10px;
}

.form-item-radio {
	flex: 1 1 auto;
	justify-content: flex-start;
}

.radio-label {
	margin-right: 25px;
	cursor: pointer;
}

.form-item textarea {
	height: calc(1.5em * 3 + 20px);
	line-height: 1.5em;
	padding: 10px;
}

.form-item .form-r {
	flex: 1 1 auto;
	justify-content: flex-start;
}

.form-file-preview {
	width: 162px;
	min-height: 110px;
	border: 1px solid #E5E5E5;
	background-color: #F7F7F7;
	position: relative;
	margin: 0;
}

.form-file-preview:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAANUlEQVQ4jWM8c+YMAwHwn4GBgRGfEiZCJhADRg0ZzIawQNMBIYBXDQuhhDSa2Ea8IQwMDAwAbMgGie2s6t4AAAAASUVORK5CYII=) no-repeat center;
}

.form-file-preview img {
    position: relative;
    z-index: 1;
}

.form-file-btn {
	margin-left: 20px;
	position: relative;
	text-align: center;
	width: 150px;
}

.form-file-button {
	width: 70px;
	height: 24px;
	line-height: 24px;
}

.form-file-note {
	color: #ccc;
	font-size: 12px;
	margin-top: 10px;
}

.form-file {
	position: absolute;
	font-size: 0;
	color: transparent;
	text-indent: -9999px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	left: -1px;
	top: -1px;
	cursor: pointer;
	outline: none;
	opacity: 0;
}

.form-verify-a {
    box-sizing: border-box;
    width: 110px;
    height: 38px;
    line-height: 36px;
    margin: 0 8px;
}

.form-input.verify-input {
    width: 100px;
    flex: none;
}

.form-btns {
    margin-top: 32px;
    text-align: center;
}

.form-btn {
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}

.form-block .items-join-rules .item-title {
    font-size: 14px;
}

.form-block .items-join-rules .item-info {
    width: 370px;
}

.form-block .items-join-rules .item-p {
    font-size: 12px;
}