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

/* tab */
.content { margin: 0; padding: 30px 0; width: 100%; position: relative; background-color: #fff; }
.tab { margin: 0 auto; padding: 0; width: 1000px; }
.tab p { font-family: 'tenagabold', Arial, sans-serif; font-size: 16px; text-transform: uppercase; }
.tab p a { color: #666; }
.tab p a:hover { padding: 10px 20px; color: #fff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #e44126; }
.tab p a.selected { padding: 10px 20px; color: #fff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #e44126; cursor: default; }
.fixed-header { position: fixed; top: 0; left: 0; z-index: 6; }

/* overview */
.over { margin: 0; padding: 80px 0; width: 100%; position: relative; background-color: #f2f2f2; }
.o_info { margin: 0 auto; padding: 0; width: 640px; text-align: center; }
.o_info h1 { font-family: 'tenagabold', Arial, sans-serif; font-size: 60px; line-height: 50px; text-transform: uppercase; color: #f44336; }
.o_info h2 { margin: 15px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 26px; text-transform: uppercase; color: #f44336; }
.o_info h2 span.sym { font-family: 'tenagabold', Arial, sans-serif; }
.o_info p { margin: 25px 0 0 0; font-family: 'tenaga', Arial, sans-serif; font-size: 18px; color: #333; line-height: 30px; }

/* history */
.history { margin: 0; padding: 80px 0; width: 100%; position: relative; }
.bg_year { margin: 0; padding: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 1; }
.bg_gradient { background: url("../img/gradient_bar2.png") top left repeat-y #0171bd; }
.h_info { margin: 0 auto; padding: 0; width: 640px; text-align: center; z-index: 3; }
.h_info h2 { font-family: 'tenagabold', Arial, sans-serif; font-size: 30px; text-transform: uppercase; color: #fff; }
.h_info h2 span { font-family: 'tenagabold', Arial, sans-serif; }
.h_info h3 { margin: 20px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 20px; text-transform: uppercase; color: #fff; }
.h_info h3.top_space { margin: 35px 0 0 0; }
.h_info p { margin: 25px 0 0 0; font-family: 'tenaga', Arial, sans-serif; font-size: 16px; color: #fff; line-height: 24px; }
.h_info p.special { margin: 5px 0 0 0; font-family: 'tenaga', Arial, sans-serif; font-size: 16px; color: #fff; line-height: 24px; }

/* our objective */
.our { margin: 0; padding: 80px 0; width: 100%; position: relative; }
.our_info { margin: 0 auto; padding: 0; width: 1000px; text-align: left; }
.our_info h2 { font-family: 'tenagabold', Arial, sans-serif; font-size: 40px; line-height: 36px; text-transform: uppercase; color: #f44336; }
.oi_item { margin: 120px auto 0 auto; padding: 40px; width: 480px; -webkit-border-radius: 0px 40px 0px 40px; -moz-border-radius: 0px 40px 0px 40px; border-radius: 0px 40px 0px 40px; background-color: #f2f2f2; }
.oi_c2_top_space { margin: 0 auto; }
.oi_c3_top_space { margin: 70px auto 0 auto; }
.oi_c4_top_space { margin: -60px auto 0 auto; }
.oi_item p { margin: 20px 0 0 0; font-family: 'tenaga', Arial, sans-serif; font-size: 20px; line-height: 30px; color: #333; }
.oi_img { margin: -110px 0 0 0; padding: 0; text-align: center; }
.m_ani { display: none; width: 100%; height: auto; }
.oi_img_top_space { margin: -80px 0 0 0; }

/* board */
.board { margin: 0; padding: 80px 0 0 0; width: 100%; position: relative; }
.board_bg_gradient { background: url("../img/gradient_bar.png") top left repeat-y #ca0054; }
.board h2 { font-family: 'tenagabold', Arial, sans-serif; font-size: 40px; line-height: 40px; text-transform: uppercase; color: #fff; }
.board_ppl { margin: 100px auto 0 auto; padding: 0; width: 940px; }
.board_item { margin: 0 auto; padding: 30px 20px; width: 220px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; background: url("../img/fade_box.png") top left repeat; text-align: center; }
.bottom_space { padding-bottom: 50px; }
.board_item p { margin: 30px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 18px; line-height: 20px; color: #fff; }
.board_img { margin: -80px 0 0 0; padding: 0; }

/* organisation */
.organisation { margin: 0; padding: 80px 0 0 0; width: 100%; position: relative; }
.org_info { margin: 0 auto; padding: 0; width: 1000px; text-align: left; }
.org_info h2 { margin: 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 40px; line-height: 36px; text-transform: uppercase; color: #f44336; }
.os { margin: 0 auto; padding: 0; width: 1000px; text-align: left; }
.os h3 { margin: 60px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 30px; text-transform: uppercase; color: #f44336;}
.os_item { margin: 40px 0 0 0; padding: 0; width: 300px; }
.os_item_second { margin: 20px 0 0 0; }
.os_top { margin: 0; padding: 20px 0; background: url("../img/os_top_bar.png") top left repeat-y; -webkit-border-radius: 0px 20px 0px 0px; -moz-border-radius: 0px 20px 0px 0px; border-radius: 0px 20px 0px 0px; text-align: center; }
.os_top_second { background: none; background-color: #c90054; }
.os_top_third { background: url("../img/os_top_bar2.png") top left repeat-y; }
.os_top_last { background: none; background-color: #0071bc; }
.os_top_space { padding: 34px 0; }
.os_top p { font-family: 'tenagabold', Arial, sans-serif; font-size: 18px; color: #fff; text-transform: uppercase; }
.os_bottom { margin: 0; padding: 20px 0; background-color: #f4f4f4; -webkit-border-radius: 0px 0px 0px 20px; -moz-border-radius: 0px 0px 0px 20px; border-radius: 0px 00px 0px 20px; text-align: center; }
.os_bottom p { font-family: 'tenaga', Arial, sans-serif; font-size: 18px; color: #666; }
.os_img { margin: 40px auto 0 auto; padding: 0; width: 1000px; text-align: center; }

/* only for safari and chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#wrapper { /*padding-top: 20px;*/ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
}

/* only for IE10 or above */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board_item { margin: 70px auto 0 auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }	
	
	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }
}

@media only screen and (min-width: 991px) and (max-width: 1023px) {
	/* tab */
	.content { padding: 30px 0; width: auto; }
	.tab { margin: 0 auto; width: auto; }

	/* overview */
	.over { padding: 30px 20px; width: auto; }
	.o_info { margin: 0 auto; }	
	
	/* history */
	.history { padding: 30px 20px; width: auto; }
	
	/* our objective */
	.our { padding: 30px 20px; width: auto; }
	.our_info { margin: 0 auto; width: 100%; text-align: center; }
	.oi_item { margin: 110px auto 0 auto; }
	.oi_c2_top_space { margin: 120px auto 0 auto; }
	.oi_c3_top_space { margin: 90px auto 0 auto; }
	.oi_c4_top_space { margin: 120px auto 0 auto; }		
	
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board_ppl { margin: 0 auto; width: auto; }	
	.board_item { margin: 70px auto 0 auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }		

	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }
	.os { width: 600px; }
	.os h3 { margin: 30px 0 0 0; }
	.os_item { width: 280px; }	
	.os_img { width: auto; }
}

@media only screen and (min-width: 768px) and (max-width: 990px) {
	/* tab */
	.content { padding: 30px 0; width: auto; }
	.tab { margin: 0 auto; width: 100%;  }

	/* overview */
	.over { padding: 30px 20px; width: auto; }
	.o_info { margin: 0 auto; }	
	
	/* history */
	.history { padding: 30px 20px; width: auto; }	
	
	/* our objective */
	.our { padding: 30px 20px; width: auto; }
	.our_info { margin: 0 auto; width: 100%; text-align: center; }
	.oi_item { margin: 110px auto 0 auto; }
	.oi_c2_top_space { margin: 120px auto 0 auto; }
	.oi_c3_top_space { margin: 90px auto 0 auto; }
	.oi_c4_top_space { margin: 120px auto 0 auto; }		
	
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board_ppl { margin: 0 auto; width: auto; }	
	.board_item { margin: 70px auto 0 auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }		
	
	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }
	.os { width: 600px; }
	.os h3 { margin: 30px 0 0 0; }
	.os_item { width: 280px; }	
	.os_img { width: auto; }
}

@media only screen and (min-width: 641px) and (max-width: 767px) {	
	/* tab */
	.content { padding: 30px 20px 10px 20px; width: auto; }
	.tab { margin: 0; width: auto; }
	.top_space { margin: 0 0 25px 0; }

	/* overview */
	.over { padding: 30px 20px; width: auto; }
	.o_info { margin: 0; width: 100%; }	
	
	/* history */
	.history { padding: 30px 20px; width: auto; }	
	.bg_year img { width: 100%; height: auto; }
	.h_info { width: 600px; }
	
	/* our objective */
	.our { padding: 30px 20px; width: auto; }
	.our_info { margin: 0 auto; width: 100%; text-align: center; }
	.oi_item { margin: 110px auto 0 auto; }
	.oi_c2_top_space { margin: 120px auto 0 auto; }
	.oi_c3_top_space { margin: 90px auto 0 auto; }
	.oi_c4_top_space { margin: 120px auto 0 auto; }	
	
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board_ppl { margin: 0 auto; width: auto; }	
	.board_item { margin: 70px auto 0 auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }	
	
	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }	
	.os { width: 280px; text-align: center; }
	.os h3 { margin: 30px 0 0 0; }
	.os_item { margin: 20px 0 0 0; padding: 0; width: 280px; }
	.os_top_space { padding: 20px 0; }		
	.os_img { margin: 40px auto 0 auto; width: auto; }
}

@media only screen and (min-width: 481px) and (max-width: 640px) {
	/* tab */
	.content { padding: 30px 20px 10px 20px; width: auto; }
	.tab { margin: 0; width: auto; }
	.top_space { margin: 0 0 25px 0; }
	
	/* overview */
	.over { padding: 30px 20px; width: auto; }
	.o_info { margin: 0; width: 100%; }
	.o_info h1 { font-size: 40px; line-height: 40px; }
	
	/* history */
	.history { padding: 30px 20px; width: auto; }
	.bg_year img { width: 100%; height: auto; }
	.h_info { margin: 0; width: 100%; }
	.h_info p { margin: 15px 0 0 0; }	
	
	/* our objective */
	.our { padding: 30px 20px; width: auto; }
	.our_info { margin: 0 auto; width: 100%; text-align: center; }
	.oi_item { margin: 110px auto 0 auto; width: auto; }
	.oi_c2_top_space { margin: 120px auto 0 auto; }
	.oi_c3_top_space { margin: 90px auto 0 auto; }
	.oi_c4_top_space { margin: 120px auto 0 auto; }
	
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board_ppl { margin: 0 auto; width: auto; }	
	.board_item { margin: 70px auto 0 auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }	
	
	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }
	.os { width: 280px; text-align: center; }
	.os h3 { margin: 30px 0 0 0; }
	.os_item { margin: 20px 0 0 0; padding: 0; width: 280px; }
	.os_top_space { padding: 20px 0; }	
	.os_img { margin: 40px auto 0 auto; width: auto; }
	.os_img img { width: 100%; height: auto; }
}

/* Smartphones (Landscape) */
@media only screen and (min-width: 321px) and (max-width: 480px) {
	/* tab */
	.content { padding: 30px 20px 10px 20px; width: auto; }
	.tab { margin: 0; width: auto; }
	.top_space { margin: 0 0 25px 0; }
	
	/* overview */
	.over { padding: 30px 20px; width: auto; }
	.o_info { margin: 0; width: 100%; }
	.o_info h1 { font-size: 30px; line-height: 35px; }
	.o_info h2 { margin: 5px 0 0 0; font-size: 20px; line-height: 20px; }
	.o_info p { margin: 15px 0 0 0; font-size: 18px; line-height: 28px; }	
	
	/* history */
	.history { padding: 30px 20px; width: auto; }
	.bg_year img { width: 100%; height: auto; }
	.h_info { margin: 0; width: 100%; }
	.h_info h2 { font-size: 24px; }
	.h_info p { margin: 15px 0 0 0; }	
	
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board h2 { font-size: 28px; line-height: 28px; }
	.board_ppl { margin: 0 auto; width: auto; }
	.board_item { margin: 70px auto 0 auto; width: auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }	
	
	/* our objective */
	.our { padding: 30px 20px; width: auto; }
	.our_info { margin: 0 auto; width: 100%; text-align: center; }
	.our_info h2 { font-size: 28px; line-height: 28px; }
	.oi_item { margin: 110px auto 0 auto; padding: 20px; width: auto; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	.oi_c2_top_space { margin: 120px auto 0 auto; }
	.oi_c3_top_space { margin: 90px auto 0 auto; }
	.oi_c4_top_space { margin: 120px auto 0 auto; }
	.oi_item p { margin: 20px 0 0 0; font-size: 16px; line-height: 22px; }
	.spriteanim_13, .spriteanim_14, .spriteanim_15, .spriteanim_16 { display: none; }
	.m_ani { display: block; }	
	
	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }
	.org_info h2 { margin: 0; font-size: 28px; line-height: 28px; }
	.os { width: 280px; text-align: center; }
	.os h3 { margin: 30px 0 0 0; font-size: 22px; }
	.os_item { margin: 20px 0 0 0; padding: 0; width: 280px; }
	.os_top_space { padding: 20px 0; }	
	.os_img { margin: 40px auto 0 auto; width: auto; }
	.os_img img { width: 100%; height: auto; }
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
	/* tab */
	.content { padding: 30px 20px 10px 20px; width: auto; }
	.tab { margin: 0; width: auto; }
	.top_space { margin: 0 0 25px 0; }
	
	/* overview */
	.over { padding: 30px 20px; width: auto; }
	.o_info { margin: 0; width: 100%; }
	.o_info h1 { font-size: 30px; line-height: 35px; }
	.o_info h2 { margin: 5px 0 0 0; font-size: 20px; line-height: 20px; }
	.o_info p { margin: 15px 0 0 0; font-size: 18px; line-height: 28px; }	
	
	/* history */
	.history { padding: 30px 20px; width: auto; }
	.bg_year img { width: 100%; height: auto; }
	.h_info { margin: 0; width: 100%; }
	.h_info h2 { font-size: 24px; }
	.h_info p { margin: 15px 0 0 0; }	

	/* our objective */
	.our { padding: 30px 20px; width: auto; }
	.our_info { margin: 0 auto; width: 100%; text-align: center; }
	.our_info h2 { font-size: 28px; line-height: 28px; }
	.oi_item { margin: 110px auto 0 auto; padding: 20px; width: auto; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	.oi_c2_top_space { margin: 120px auto 0 auto; }
	.oi_c3_top_space { margin: 90px auto 0 auto; }
	.oi_c4_top_space { margin: 120px auto 0 auto; }
	.oi_item p { margin: 20px 0 0 0; font-size: 16px; line-height: 22px; }
	.spriteanim_13, .spriteanim_14, .spriteanim_15, .spriteanim_16 { display: none; }
	.m_ani { display: block; }
	
	/* board */
	.board { padding: 30px 20px; width: auto; }
	.board h2 { font-size: 28px; line-height: 28px; }
	.board_ppl { margin: 0 auto; width: auto; }
	.board_item { margin: 70px auto 0 auto; width: auto; }
	.bottom_space { padding-bottom: 30px; }
	.board_item p { margin: 20px 0 0 0; }
	
	/* organisation */
	.organisation { padding: 30px 20px 80px 20px; width: auto; }
	.org_info { margin: 0 auto; width: auto; text-align: center; }
	.org_info h2 { margin: 0; font-size: 28px; line-height: 28px; }
	.os { width: auto; text-align: center; }
	.os h3 { margin: 30px 0 0 0; font-size: 22px; }
	.os_item { margin: 20px 0 0 0; padding: 0; width: 280px; }
	.os_top_space { padding: 20px 0; }
	.os_img { margin: 40px auto 0 auto; width: auto; }
	.os_img img { width: 100%; height: auto; }
}