@charset "UTF-8";
/* Font Import */
@font-face {
	font-family: "MYRIADPRO-BOLD";
	src: url("../font/MYRIADPRO-BOLD.OTF");
}
@font-face {
	font-family: "MYRIADPRO-REGULAR";
	src: url("../font/MYRIADPRO-REGULAR.OTF");
}
@font-face {
	font-family: "MYRIADPRO-SEMIBOLD";
	src: url("../font/MYRIADPRO-SEMIBOLD.OTF");
}

/* Global Reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
html,
body {
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	overflow: auto;
	font-family: "MYRIADPRO-REGULAR", Arial, Helvetica, sans-serif;
}
html {
	scroll-behavior: smooth;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

/* Text */
h1 {
	font-family: "MYRIADPRO-BOLD", Arial, Helvetica, sans-serif;
}
h3 {
	font-family: "MYRIADPRO-BOLD", Arial, Helvetica, sans-serif;
}
h4 {
	font-family: "MYRIADPRO-SEMIBOLD", Arial, Helvetica, sans-serif;
}
p {
	font-family: "MYRIADPRO-REGULAR", Arial, Helvetica, sans-serif;
}

/* Styling */
body {
	background-color: #ffffff;
}
.container {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.full-box {
	width: 100%;
}
.pull-down {
	position: absolute;
	display: block;
	bottom: 12px;
}
.logo-container {
	display: block;
	margin-top: 24px;
}
.varnion-logo {
	width: 174px;
}
.hotzone-logo {
	width: 212px;
}
.logo {
	height: auto;
}
#header {
	width: 100%;
}
#banner {
	position: relative;
	width: 100%;
	background-position: center;
	background-image: url("../img/banner.jpg");
	background-repeat: no-repeat;
	background-size: cover;

}
	#banner p {
		font-size: 36px;
		line-height: 42px;
		color: #ffffff;
		margin-bottom: 12px;
	}

#content {
	width: 100%;
	padding: 48px 0;
	text-align: center;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../img/hotzone_background.png');
}
	#content p {
		color: #364B7F;
		font-size: 24px;
		line-height: 30px;
	}
	#content p.additional {
		margin-top: 24px;
	}
	#content h3 {
		color: #364B7F;
		font-size: 26px;
		line-height: 36px;
	}
	#content ul {
		/*margin-top: 12px;*/
	}
		#content li {
			display: inline-block;
			width: 33%;
			max-width: 240px;
			padding: 16px;
		}
		#content .item-box {
			width: 100%;
			padding: 16px;
			background-color: #ffffff;
			box-shadow: 2px 2px 6px rgba(0,0,0,.5);
		}
		#content .item-box p:first-child {
			font-size: 20px;
			margin-bottom: 6px;
		}
		#content .item {
		}
			#content .item h1 {
				font-size: 64px;
				line-height: 64px;
			}
			#content .item h3 {
				margin-top: 0;
				font-family: "MYRIADPRO-SEMIBOLD", Arial, Helvetica, sans-serif;
				font-size: 32px;
			}
			#content .item p {
				font-size: 24px;
			}
			#content .item a {
				display: inline-block;
				width: 130px;
				height: 36px;
				margin-top: 16px;
				font-size: 18px;
				line-height: 36px;
				color: #ffffff;
			}

		/* Theme Basic */
		#content .item-box.theme-basic p:first-child {
			color: #2d61c9;
		}
		#content .item-box.theme-basic .item {
			border-top: 1px solid #2d61c9;
		}
			#content .item-box.theme-basic .item h1 {
				color: #2d61c9;
			}
			#content .item-box.theme-basic .item h3 {
				color: #2d61c9;
			}
			#content .item-box.theme-basic .item p {
				color: #2d61c9;
			}
			#content .item-box.theme-basic .item a {
				background-color: #2d61c9;
			}
		/* Theme Silver */
		#content .item-box.theme-silver p:first-child {
			color: #686868;
		}
		#content .item-box.theme-silver .item {
			border-top: 1px solid #686868;
		}
			#content .item-box.theme-silver .item h1 {
				color: #686868;
			}
			#content .item-box.theme-silver .item h3 {
				color: #686868;
			}
			#content .item-box.theme-silver .item p {
				color: #686868;
			}
			#content .item-box.theme-silver .item a {
				background-color: #686868;
			}
		/* Theme Gold */
		#content .item-box.theme-gold p:first-child {
			color: #966309;
		}
		#content .item-box.theme-gold .item {
			border-top: 1px solid #966309;
		}
			#content .item-box.theme-gold .item h1 {
				color: #966309;
			}
			#content .item-box.theme-gold .item h3 {
				color: #966309;
			}
			#content .item-box.theme-gold .item p {
				color: #966309;
			}
			#content .item-box.theme-gold .item a {
				background-color: #966309;
			}
		/* Theme Platinum */
		#content .item-box.theme-platinum p:first-child {
			color: #8C8C8C;
		}
		#content .item-box.theme-platinum .item {
			border-top: 1px solid #8C8C8C;
		}
			#content .item-box.theme-platinum .item h1 {
				color: #8C8C8C;
			}
			#content .item-box.theme-platinum .item h3 {
				color: #8C8C8C;
			}
			#content .item-box.theme-platinum .item p {
				color: #8C8C8C;
			}
			#content .item-box.theme-platinum .item a {
				background-color: #8C8C8C;
			}
		/* Theme Sapphire */
		#content .item-box.theme-sapphire p:first-child {
			color: #11256B;
		}
		#content .item-box.theme-sapphire .item {
			border-top: 1px solid #11256B;
		}
			#content .item-box.theme-sapphire .item h1 {
				color: #11256B;
			}
			#content .item-box.theme-sapphire .item h3 {
				color: #11256B;
			}
			#content .item-box.theme-sapphire .item p {
				color: #11256B;
			}
			#content .item-box.theme-sapphire .item a {
				background-color: #11256B;
			}

#footer {
	padding-bottom: 48px;
}
.terms li {
	font-size: 16px;
	line-height: 26px;
	color: #6b6b6b;
}
.terms li:before {
	content: "* ";
}
#footer p {
	font-size: 16px;
	line-height: 26px;
	color: #545454;
}
#footer a {
	color: #333333;
}

/* Responsive style */
@media (max-width: 1200px) {
	.container {
		max-width: 960px;
	}
}
@media (max-width: 992px) {
	.container {
		max-width: 720px;
	}
	.varnion-logo {
		width: 127px;
	}
}
@media (max-width: 768px) {
	.container {
		max-width: 540px;
	}
	.varnion-logo {
		width: 86px;
	}
	.hotzone-logo {
		width: 126px;
	}
	#banner p {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 6px;
	}
	#content {
		background-image: none;
	}
	#content li {
		width: 100%;
		max-width: 100%;
	}
		#content .item-box {
			max-width: 200px;
			margin: 0 auto;
		}
		#content .item-list li {
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url('../img/hotzone_background.png');
		}
}
@media (max-width: 576px) {
	.container {
		padding: 0 12px;
	}
	.logo-container {
		margin-top: 6px;
	}
	.hotzone-logo {
		width: 96px;
	}
	#banner p {
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 0;
	}
}