@charset "utf-8";

/* ================================ join ================================ */

.join {
	padding: 7% 7% 8%;
}

.join .left {
	float: left;
}

.join .left h1 {
	font-size: 2.1vw;
	font-family: 'OPPOSans-R';
}

.join .right {
	float: right;
	width: 53%;
}

.join .right .top {
}

.join .right .top p {
	font-size: 1vw;
	font-family: 'OPPOSans-R';
	line-height: 1.8em;
	white-space: pre-wrap;
}

.join .right .content {
	margin-top: 2vw;
}

.join .right .content ul {
}

.join .right .content ul li {
	margin-top: 2vw;
}
.join .right .content ul li:first-child {
	margin-top: 0vw;
}

.join .right .content ul li div {
}

.join .right .content ul li div h1 {
	font-size: 1vw;
	font-family: 'OPPOSans-R';
}

.join .right .content ul li div p {
	font-size: 1vw;
	font-family: 'OPPOSans-R';
	line-height: 2em;
	white-space: pre-wrap;
}

@media (min-width: 1px) and (max-width: 750px) {
	
	/* ================================ join ================================ */
	
	.join {
		padding: 7% 7% 8%;
		
		padding: 5% 3% 5%;
		padding: 7% 7% 7%;
	}
	
	.join .left {
		float: left;
	}
	
	.join .left h1 {
		font-size: 2.1vw;
		font-family: 'OPPOSans-R';
		
		font-size: 5vw;
	}
	
	.join .right {
		float: right;
		width: 53%;
		
		float: left;
		width: 100%;
		margin-top: 4vw;
	}
	
	.join .right .top {
	}
	
	.join .right .top p {
		font-size: 1vw;
		font-family: 'OPPOSans-R';
		line-height: 1.8em;
		white-space: pre-wrap;
		
		font-size: 3.3vw;
	}
	
	.join .right .content {
		margin-top: 2vw;
		
		margin-top: 5vw;
	}
	
	.join .right .content ul {
	}
	
	.join .right .content ul li {
		margin-top: 2vw;
		
		margin-top: 5vw;
	}
	.join .right .content ul li:first-child {
		margin-top: 0vw;
	}
	
	.join .right .content ul li div {
	}
	
	.join .right .content ul li div h1 {
		font-size: 1vw;
		font-family: 'OPPOSans-R';
		
		font-size: 3vw;
	}
	
	.join .right .content ul li div p {
		font-size: 1vw;
		font-family: 'OPPOSans-R';
		line-height: 2em;
		white-space: pre-wrap;
		
		font-size: 3vw;
	}
	
}