@font-face {
	font-family: 'jf-jinxuan';
	src: url('../../inc/css/font/jf-jinxuan-fresh2.2-medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

html{
	font-family: jf-jinxuan;
	width: 100%;
	height: auto;
}
body{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
img#background-web,
img#background-mobile
{
	width: 100%;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#container{
	position: relative;
	width: 100%;
	height: auto;
	text-align: left;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}
.content{
	position: absolute;
	color: #347ead;
}
.content2{
	position: absolute;
	color: #ff3f26;
	font-family: 'MHeiHK-Medium';

	-ms-transform: skewy(20deg); /* IE 9 */
	-webkit-transform: skewy(20deg); /* Safari prior 9.0 */
	transform: skewy(20deg); /* Standard syntax */
}

.title1{
	position: absolute;
	color: #ff3f26;

	-ms-transform: skewy(20deg); /* IE 9 */
	-webkit-transform: skewy(20deg); /* Safari prior 9.0 */
	transform: skewy(20deg); /* Standard syntax */
}

.title2{
	position: absolute;
	color: #347ead;

	-ms-transform: skewy(-25deg); /* IE 9 */
	-webkit-transform: skewy(-25deg); /* Safari prior 9.0 */
	transform: skewy(-25deg); /* Standard syntax */
}

.title3{
	position: absolute;
	color: #347ead;

	-ms-transform: skewy(20deg); /* IE 9 */
	-webkit-transform: skewy(20deg); /* Safari prior 9.0 */
	transform: skewy(20deg); /* Standard syntax */
}

.title4{
	position: absolute;
	color: #ff3f26;
	text-align:center;

	-ms-transform: skewy(-25deg); /* IE 9 */
	-webkit-transform: skewy(-25deg); /* Safari prior 9.0 */
	transform: skewy(-25deg); /* Standard syntax */
}

.title5{
	position: absolute;
	color: #ff3f26;
	text-align:center;

	-ms-transform: skewy(-25deg); /* IE 9 */
	-webkit-transform: skewy(-25deg); /* Safari prior 9.0 */
	transform: skewy(-25deg); /* Standard syntax */
}

@media only screen and (min-width: 768px){
	body{width: 1400px;}
	img#background-web{display: block;}
	img#background-mobile{display: none;}
	.content, .content2, .title3{letter-spacing: 0.8px; font-size: 14px;}
	.title5{letter-spacing: 0.8px; font-size: 21px;}
	.title1{letter-spacing: 0.8px; font-size: 30px;}
	.title2{letter-spacing: 0.8px; font-size: 49px;}
	.title4{letter-spacing: 0.8px; font-size: 45px;}
	br.desktop{display:block;}
	br.mobile{display:none;}
	#c1{ top:21%; left:36%; right: 35%; }
#c2{ top:23.9%; left:36%; right: 35%; }
#c3{    top: 40.5%; right:3.5%; }
#c4{     top: 53.5%; left:3.5%; }
#c5{    top: 7%;
    left: 3.5%;}
#c6{    top: 8%;
    left: 34%;}
#c7{
    top: 13%;
    left: 4%;
}
#c8{top: 20.5%;
    left: 3.5%;}
#c9{
    top: 22%;
    left: 16%;
}
#c10{top: 32.5%;
    left: 24%;}
#c11{    top: 38.5%;
    left: 5%;}
#c12{    top: 45%;
    left: 19%;}
#c13{top: 4%;
    right: 21%;}
#c14{top: 4.5%;
    right: 5.5%;}
#c15{top: 17.5%;
    right: 4.5%;}
#c16{top: 25%;
    right: 9%;}
#c17{    top: 30%;
    right: 21.5%;}
#c18{top: 33.5%;
    right: 22.5%;}
#c19{    bottom: 33%;
    left: 36%;}
#c20{bottom: 27.2%;
    left: 32%;}
#c21{    bottom: 17%;
    left: 8%;}
#c22{bottom: 10.5%;
    left: 8%;}
#c23{bottom: 15%;
    left: 38%;}
#c24{    bottom: 38%;
    right: 40%;}
#c25{    bottom: 32%;
    right: 41%;}
#c26{bottom: 50%;
    right: 4%;}
#c27{    bottom: 34%;
    right: 6%;}
#c28{    bottom: 24%;
    right: 28%;}
#c29{    bottom: 18.5%;
    left: 57.5%;}
#c30{bottom: 11%;
    right: 21%;}
}

@media (max-width: 767px) {
	body{width: 780px;}
	img#background-web{display: none;}
	img#background-mobile{display: block;}
	.title5{letter-spacing: 0.8px; font-size: 29px;}
	.content, .content2, .title3{letter-spacing: 0.8px; font-size: 29px;}
	.title1, .title2, .title4{letter-spacing: 0.8px; font-size: 54px;}
	br.desktop{display:none;}
	br.mobile{display:block;}
	#c1{ top:9%; left:57%; line-height: 1.35; }
	#c2{ top:12%; left:48%; }
	#c3{ top:19%; left:13%; line-height: 1.35; }
	#c4{ top:15.7%; left:14%; }
	#c5{ top:15.05%; left:52%; line-height: 1.35; }
	#c6{ top:14%; left:19%; }
	#c7{ top:21%; left:12%; line-height: 1.35; }
	#c8{ top:22.3%; left:56%; line-height: 1.35; }
	#c9{ top:26%; left:14%; line-height: 1.35; }
	#c10{ top:28%; left:51%; line-height: 1.35; }
	#c11{ top:8%; left:9%; }
	#c12{ top:49.5%; left:36.5%; line-height: 1.35; }
	#c13{ top:48%; left:10%;}
	#c14{ top:52.4%; left:58.5%; line-height: 1.35; }
	#c15{ top:90.2%; left:43.1%; line-height: 1.35; }
	#c16{ top:95%; left:10%; }
	#c17{ top:2.7%; left:28%; right: 22%; }
	#c18{ top:3.4%; left:28%; right: 22%; }
	#c19{ top:60.1%; left:21%; line-height: 1.35; }
	#c20{ top:55.4%; left:47%; line-height: 1.35; }
	#c21{ top:84.6%; left:31%; line-height: 1.35; }
	#c22{ top:88.1%; left:20%; }
	#c23{ top:30.5%; left:15%; }
	#c24{ top:35.4%; left:18%; line-height: 1.35; text-align: justify; width: 500px; }
	#c25{ top:38%; left:63%; }
	#c26{ top:42.1%; left:20%; line-height: 1.35; }
	#c27{ top:45.5%; right:8%; }
	#c28{ top:64%; left:19.5%; }
	#c29{ top:68.4%; left:10%; line-height: 1.35; }
	#c30{ top:71.6%; left:53%; line-height: 1.35; }
	#c31{ top:79.3%; left:10%; }
	#c32{ top:75%; left:11.5%; line-height: 1.35; }
	#c33{ top:75%; left:54%; line-height: 1.35; }
	#c34{ top:81%; left:44%; line-height: 1.35; }
}