@charset "utf-8";
/* CSS Document */
@import url("fonts.css");

/* content */
.to_left { float: left; }
.to_right { float: right; }
/*.space_top { margin: 40px 0 0 0; }*/
.content { margin: 0px 0 0 0; padding: 0; position: relative; width: 100%; }
.c_box { margin: 20px; padding: 40px; width: 600px; height: 470px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.c_info { margin: 0; padding: 50px 0 0 50px; position: relative; width: 450px; }
.c_info h1 { margin: 20px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 46px; line-height: 50px; text-transform: uppercase; color: #fff; }
.c_info h1 span { font-family: 'tenagabold', Arial, sans-serif; }
.c_info h2 { font-family: 'tenagabold', Arial, sans-serif; font-size: 18px; text-transform: uppercase; color: #fff; }
.c_info h3 { margin: 10px 0 70px 0; font-family: 'tenaga', Arial, sans-serif; font-size: 18px; line-height: 26px; color: #fff; }
.c_info p { margin: 35px 0 0 0; font-family: 'tenaga', Arial, sans-serif; color: #fff; font-size: 14px; }
.c_info p a { padding: 18px 60px; color: #fff; text-transform: uppercase; text-decoration: none; -webkit-border-radius: 0px 30px 0px 30px; -moz-border-radius: 0px 30px 0px 30px; border-radius: 0px 30px 0px 30px; border: 4px solid #fff; }
.c_info p a:hover { background-color: #fff; color: #000; }

/* content 2*/
.content2 { margin: 0; padding: 80px 0 100px 0; position: relative; width: 100%; }
.c2_info { margin: 0; padding: 0; position: relative; width: 100%; text-align: center; }
.c2_info h1 { font-family: 'tenagabold', Arial, sans-serif; font-size: 60px; line-height: 50px; text-transform: uppercase; color: #f44336; }
.c2_info h2 { margin: 5px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 26px; text-transform: uppercase; color: #f44336; }
.c2_tips { margin: 50px auto 0 auto; padding: 0; position: relative; width: 1200px; }
.item { margin: 0 auto; padding: 0; width: 300px; text-align: center; }
.item h3 { margin: 10px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; color: #4d4d4d; font-size: 22px; line-height: 22px; text-transform: uppercase; }
.item h3.item_top_space { margin: 49px 0 0 0; }
.item h3.item2_top_space { margin: 30px 0 0 0; }
.item p { margin: 40px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; color: #fff; font-size: 16px; }
.item p.item_top_space  { margin: 60px 0 0 0; }
.item p a { padding: 18px 60px; color: #fff; text-transform: uppercase; text-decoration: none; -webkit-border-radius: 0px 30px 0px 30px; -moz-border-radius: 0px 30px 0px 30px; border-radius: 0px 30px 0px 30px; background-color: #e44126; }
.item p a:hover { background-color: #005da9; color: #fff; }

/* only for safari and chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {

}

/* only for IE10 or above */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#wrapper { /*padding-top: 20px;*/ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } 
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { margin: 0 auto; padding: 20px 0 55px 0; height: auto; }
	.c_info { margin: 0; padding: 10px 0 0 50px; }	

	/* content 2*/
	.content2 { padding: 20px 0 90px 0; }	
	.c2_tips { margin: 0 auto; width: 100%; }
}

@media only screen and (min-width: 991px) and (max-width: 1023px) {
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { margin: 0 auto; padding: 20px 0 55px 0; height: auto; }
	.c_info { margin: 0; padding: 10px 0 0 50px; }	

	/* content 2*/
	.content2 { padding: 20px 0 100px 0; }
	.c2_tips { margin: 0 auto; width: 100%; }
	.item { margin: 40px auto 0 auto; padding: 0; }
	.item h3 { padding: 0 20px; line-height: 24px; }
	.item h3.item_top_space { margin: 10px 0 0 0; }
	.item h3.item2_top_space { margin: 10px 0 0 0; }
	.item p.item_top_space  { margin: 40px 0 0 0; }		
}

@media only screen and (min-width: 769px) and (max-width: 990px) {	
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { margin: 0 auto; padding: 20px 0 55px 0; height: auto; }
	.c_info { margin: 0; padding: 10px 0 0 50px; }	
	
	/* content 2*/
	.content2 { padding: 20px 0 100px 0; }	
	.c2_tips { margin: 0 auto; width: 100%; }
	.item { margin: 40px auto 0 auto; padding: 0; }
	.item h3 { padding: 0 20px; line-height: 24px; }
	.item h3.item_top_space { margin: 10px 0 0 0; }
	.item h3.item2_top_space { margin: 10px 0 0 0; }
	.item p.item_top_space  { margin: 40px 0 0 0; }	
}

@media only screen and (min-width: 641px) and (max-width: 768px) {
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { margin: 0 auto; padding: 20px 0 55px 0; width: 100%; height: auto; }
	.c_info { margin: 0; padding: 10px 0 0 50px; }
	
	/* content 2*/
	.content2 { padding: 20px 0 100px 0; }
	.c2_tips { margin: 0 auto; width: 100%; }
	.item { margin: 40px auto 0 auto; padding: 0; }
	.item h3 { padding: 0 20px; line-height: 24px; }
	.item h3.item_top_space { margin: 10px 0 0 0; }
	.item h3.item2_top_space { margin: 10px 0 0 0; }
	.item p.item_top_space  { margin: 40px 0 0 0; }	
}

/* Smartphones (other smartphones portrait) */
@media only screen and (min-width: 481px) and (max-width: 640px) {
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { padding: 20px 0 50px 0; width: 100%; height: auto; }
	.c_info { padding: 0; width: 100%; text-align: center; }
	.c_info h1 { padding: 0 20px; font-size: 40px; line-height: 40px; }
	.c_info h2 { padding: 0 20px; }
	.c_info h3 { margin: 10px 0; padding: 0 20px; }	

	/* content 2*/
	.content2 { padding: 20px 0 100px 0; }
	.c2_info h1 { font-size: 40px; line-height: 40px; }	
	.c2_tips { margin: 0 auto; width: 100%; }
	.item { margin: 40px auto 0 auto; padding: 0; }
	.item h3 { padding: 0 20px; line-height: 24px; }
	.item h3.item_top_space { margin: 10px 0 0 0; }
	.item h3.item2_top_space { margin: 10px 0 0 0; }
	.item p.item_top_space  { margin: 40px 0 0 0; }	
}

/* Smartphones (Landscape) */
@media only screen and (min-width: 321px) and (max-width: 480px) {
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { padding: 20px 0 45px 0; width: 100%; height: auto; }
	.c_info { padding: 0; width: 100%; text-align: center; }
	.c_info h1 { padding: 0 20px; font-size: 30px; line-height: 35px; }
	.c_info h2 { padding: 0 20px; }
	.c_info h3 { margin: 10px 0; padding: 0 20px; }
	.c_info p { margin: 40px 0 0 0; }
	.c_info p a { padding: 15px 40px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }

	/* content 2*/
	.content2 { padding: 20px 0 100px 0; }
	.c2_info h1 { font-size: 30px; line-height: 35px; }
	.c2_info h2 { padding: 0 20px; font-size: 20px; line-height: 20px; }	
	.c2_tips { margin: 0 auto; width: 100%; }
	.item { margin: 40px auto 0 auto; padding: 0; }
	.item h3 { padding: 0 20px; line-height: 24px; }
	.item h3.item_top_space { margin: 10px 0 0 0; }
	.item h3.item2_top_space { margin: 10px 0 0 0; }
	.item p.item_top_space  { margin: 40px 0 0 0; }
	.item p a { padding: 15px 40px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }	
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
	/* content */
	.to_left { float: none; }
	.to_right { float: none; }
	.space_top { margin: 0; }
	.content { margin: 0; }
	.c_box { margin: 0; padding: 20px 0 45px 0; width: 100%; height: auto; }
	.c_info { padding: 0; width: 100%; text-align: center; }
	.c_info h1 { padding: 0 20px; font-size: 30px; line-height: 35px; }
	.c_info h2 { padding: 0 20px; }
	.c_info h3 { margin: 10px 0; padding: 0 20px; }
	.c_info p { margin: 40px 0 0 0; }
	.c_info p a { padding: 15px 40px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	
	/* content 2*/
	.content2 { padding: 20px 0 100px 0; }
	.c2_info h1 { font-size: 30px; line-height: 35px; }
	.c2_info h2 { padding: 0 20px; font-size: 20px; line-height: 20px; }
	.c2_tips { margin: 0 auto; width: 100%; }
	.item { margin: 40px auto 0 auto; padding: 0; }
	.item h3 { padding: 0 20px; line-height: 24px; }
	.item h3.item_top_space { margin: 10px 0 0 0; }
	.item h3.item2_top_space { margin: 10px 0 0 0; }
	.item p.item_top_space  { margin: 40px 0 0 0; }
	.item p a { padding: 15px 40px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
}