@charset "utf-8";
/* CSS Document */

/* class naming notes:
	mfrm = margin frame size
	mctn = margin content size
	_t   = RWD for tablet
	_m   = RWD for moblie
	
	tb   = table
	txt  = text style
	hdr  = header
	ftr  = footer
	nav  = navigation
	tle  = title
	pto  = photo
	16px = 1em
	tbe  = table
	shp  = shape
	eff  = effect
	icn  = icon
	hom  = home
	mai  = main
	itm  = item
	mar  = margin
	
	
	layer level:
	100000~999999 teacher layer 
	900 footer
*/


[class*="col_"] {float: left; }
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin: 0px;}
a:link { color: #000000; text-decoration:none;} /* unvisited link */
a:visited { color: #000000; text-decoration:none; } /* visited link */
a:hover { color: #000000; text-decoration:none;} /* mouse over link */
a:active { color: #000000; text-decoration:none;} /* selected link */


/*--------------------  text style  ----------------------------*/

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

hk20_mainframe {
display: table;
height: 100%;
width: 100%;
}

hk20_header {
  display: table-row;
  height:/*Media Query*/; 
  width: 100%;
  background: url(../img/hdr_title01a.png) center 20px no-repeat, url(../img/hdr_title01b.png) 70% -10px no-repeat, url(../img/hdr_frbg01.png) bottom center no-repeat;
  background-size:/*Media Query*/;

}
  
hk20_main {
  display: table-row;
  height: auto; 
  background: url(../img/mai_frbg01a.png) center top no-repeat, url(../img/mai_frbg01b.png) center bottom no-repeat;
  background-color:#FFFFFF;
  background-size: 200% auto, 200% auto;
}

hk20_section {
  display: table;
  width:/*Media Query*/;
  margin-left:auto;
  margin-right:auto;
  padding: 20px 0px 10px 0px;
  border: 0px solid #FFFF00;
}

hk20_item1 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
hk20_item2 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
hk20_item3 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
hk20_item4 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
hk20_item5 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
hk20_item6 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}

w6ds_tle {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_item1 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_item2 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_item3 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_item4 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_item5 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_item6 {
  border: 0px solid #FF0000;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}
w6ds_map{
  border: 1px solid #888888;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height:/*Media Query*/;
  width:/*class*/;
  background:/*Media Query*/;
  background-size:/*Media Query*/;
}

.motion { -webkit-transition-duration: 1s; /* Safari */ transition-duration: 1s;}
.motion2 { -webkit-transition-duration: 0.5s; /* Safari */ transition-duration: 0.5s;}
.clearfloat { clean: both;}

.w6ds_tle_01{ border: 0px solid #FF0000;
  height:/*Media Query*/; width:/*class*/;
  background: url(../img/tle_w6ds01.png) left bottom no-repeat; background-size: contain; }
.w6ds_tle_02{ border: 0px solid #FF0000;
  height:/*Media Query*/; width:/*class*/;
  background: url(../img/tle_w6ds02.png) left bottom no-repeat; background-size: contain; }
.w6ds_tle_03{ border: 0px solid #FF0000;
  height:/*Media Query*/; width:/*class*/;
  background: url(../img/tle_w6ds03.png) left bottom no-repeat; background-size: contain; }
.w6ds_tle_04{ border: 0px solid #FF0000;
  height:/*Media Query*/; width:/*class*/;
  background: url(../img/tle_w6ds04.png) left bottom no-repeat; background-size: contain; }
.w6ds_tle_05{ border: 0px solid #FF0000;
  height:/*Media Query*/; width:/*class*/;
  background: url(../img/tle_w6ds05.png) left bottom no-repeat; background-size: contain; }
.w6ds_tle_06{ border: 0px solid #FF0000;
  height:/*Media Query*/; width:/*class*/;
  background: url(../img/tle_w6ds06.png) left bottom no-repeat; background-size: contain; } 
.content { padding: 0px 1% 10px 1%; font-size:1em;}
.btn_video1 { border: none;	
  height: 50px;
  width: 150px;
  background: url(../img/btn_video01.png) center no-repeat;
  background-size: contain;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-align:left;
  font-size:1em;
  font-weight:bolder;
  color: #FFF;
  padding: 0px 0px 0px 10px;
}

.btn_video1:hover {
  background: url(../img/btn_video01x.png) no-repeat;
  background-size: contain;
}
.btn_video1:hover span { 
 opacity: 0;
 -webkit-transition: 0.5s;
 transition: 0.5s;
 font-size:2em;
}
.frbg_intro1 {
  width:/*class*/ ;
  padding: 3px 10px 3px 10px;
  -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,210,235,1)), to(rgba(255,255,255,1)));
  background: linear-gradient(to bottom, rgba(255,210,235,1), rgba(255,255,255,1)); /* Standard syntax (must be last) */}
.frbg_video {
  width:/*class*/ ;
  padding: 10px 10px 10px 10px;
  -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,240,245,0.5)), to(rgba(255,255,255,0.5)));
  background: linear-gradient(to bottom, rgba(255,240,245,0.5), rgba(255,255,255,0.5)); /* Standard syntax (must be last) */}
.txt_intro { font-size: 1.25em;}
.txt_caption { font-size: 0.8em;}
.txt_right { text-align: right;}
.txt_center { text-align: center;}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/




/************************************** Media Query ***************************************/
/******************************************************************************************/
/******************************************************************************************/
/*********************************** For mobile S: ****************************************/
[class*="col_"] { width: 100%;}
[class*="w6ds_tle"] { height: 120px;}
hk20_header {height: 150px; background-size: 90% auto, 70% auto, 200% auto;}
hk20_item1 { height: 90px; background: url(../img/btn_hom01_2.png) center top no-repeat; background-size: contain}
hk20_item2 { height: 90px; background: url(../img/btn_hom02_2.png) center bottom no-repeat; background-size: contain}
hk20_item3 { height: 90px; background: url(../img/btn_hom03_2.png) center top no-repeat; background-size: contain}
hk20_item4 { height: 90px; background: url(../img/btn_hom04_2.png) center bottom no-repeat; background-size: contain}
hk20_item5 { height: 90px; background: url(../img/btn_hom05_2.png) center top no-repeat; background-size: contain}
hk20_item6 { height: 90px; background: url(../img/btn_hom06_2.png) center bottom no-repeat; background-size: contain}
w6ds_tle { height: 50px; background: url(../img/tle_w6ds.png) center top no-repeat; background-size: contain}
w6ds_item1 { height: 90px; background: url(../img/btn_w6ds01_2.png) center bottom no-repeat; background-size: contain}
w6ds_item2 { height: 90px; background: url(../img/btn_w6ds02_2.png) center bottom no-repeat; background-size: contain}
w6ds_item3 { height: 90px; background: url(../img/btn_w6ds03_2.png) center bottom no-repeat; background-size: contain}
w6ds_item4 { height: 90px; background: url(../img/btn_w6ds04_2.png) center bottom no-repeat; background-size: contain}
w6ds_item5 { height: 90px; background: url(../img/btn_w6ds05_2.png) center bottom no-repeat; background-size: contain}
w6ds_item6 { height: 90px; background: url(../img/btn_w6ds06_2.png) center bottom no-repeat; background-size: contain}
w6ds_map { height: 350px}
.video_size { width: 100%; height: auto;}

 
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/**************************** For vertical mobile & tablet: *******************************/
@media only screen and (orientation: portrait) {
[class*="col_"] { width: 100%;}
hk20_section { width: 100%; height: 800px;}
}

/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/************************************* For tablet H: **************************************/
@media only screen and (min-width: 500px) {
[class*="col_"] { width: 100%;}
[class*="w6ds_tle"] { height: 100px;}
hk20_header {height: 160px; background-size: 75% auto, 60% auto, 200% auto;}
hk20_section { width: 100%; height: 760px;}
}

/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/************************************* For tablet H: **************************************/
@media only screen and (min-width: 600px) {
[class*="col_"] { width: 100%;}
[class*="w6ds_tle"] { height: 120px;}
hk20_header {height: 160px; width: 100%; background-size: 60% auto, 45% auto, 200% auto;}
hk20_section { width: 100%;  height: 820px;}
hk20_item1 { height: 100px; background: url(../img/btn_hom01_2.png) center top no-repeat; background-size: contain}
hk20_item2 { height: 100px; background: url(../img/btn_hom02_2.png) center bottom no-repeat; background-size: contain}
hk20_item3 { height: 100px; background: url(../img/btn_hom03_2.png) center top no-repeat; background-size: contain}
hk20_item4 { height: 100px; background: url(../img/btn_hom04_2.png) center bottom no-repeat; background-size: contain}
hk20_item5 { height: 100px; background: url(../img/btn_hom05_2.png) center top no-repeat; background-size: contain}
hk20_item6 { height: 100px; background: url(../img/btn_hom06_2.png) center bottom no-repeat; background-size: contain}
w6ds_tle { height: 50px; background: url(../img/tle_w6ds.png) center top no-repeat; background-size: contain}
w6ds_item1 { height: 100px; background: url(../img/btn_w6ds01_2.png) center bottom no-repeat; background-size: contain}
w6ds_item2 { height: 100px; background: url(../img/btn_w6ds02_2.png) center bottom no-repeat; background-size: contain}
w6ds_item3 { height: 100px; background: url(../img/btn_w6ds03_2.png) center bottom no-repeat; background-size: contain}
w6ds_item4 { height: 100px; background: url(../img/btn_w6ds04_2.png) center bottom no-repeat; background-size: contain}
w6ds_item5 { height: 100px; background: url(../img/btn_w6ds05_2.png) center bottom no-repeat; background-size: contain}
w6ds_item6 { height: 100px; background: url(../img/btn_w6ds06_2.png) center bottom no-repeat; background-size: contain}
w6ds_map { height: }
}
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/************************************* For tablet H: **************************************/
@media only screen and (min-width: 720px) {
[class*="w6ds_tle"] { height: 140px;}
.col_M_1 {width: 8.33%;}
.col_M_2 {width: 16.66%;}
.col_M_3 {width: 25%;}
.col_M_4 {width: 33.33%;}
.col_M_4a {width: 31.33%; margin: 1%;}
.col_M_4b {width: 32.33%; margin: 0.5%;}
.col_M_5 {width: 41.66%;}
.col_M_6a {width: 48%; margin: 1%;}
.col_M_6a {width: 49%; margin: 0.5%;}
.col_M_6 {width: 50%;}
.col_M_7 {width: 58.33%;}
.col_M_8 {width: 66.66%;}
.col_M_9 {width: 75%;}
.col_M_10 {width: 83.33%;}
.col_M_11 {width: 91.66%;}
.col_M_12 {width: 100%;}
/*[class*="col_"] { width: 100%;}*/
hk20_header {height: 160px; width: 100%; background-size: 60% auto, 40% auto, 200% auto;}
hk20_section { width: 95%;  height: 720px;}
hk20_item1 { height: 220px; background: url(../img/btn_hom01_1.png) center top no-repeat; background-size: contain}
hk20_item2 { height: 220px; background: url(../img/btn_hom02_1.png) center bottom no-repeat; background-size: contain}
hk20_item3 { height: 220px; background: url(../img/btn_hom03_1.png) center top no-repeat; background-size: contain}
hk20_item4 { height: 220px; background: url(../img/btn_hom04_1.png) center bottom no-repeat; background-size: contain}
hk20_item5 { height: 220px; background: url(../img/btn_hom05_1.png) center top no-repeat; background-size: contain}
hk20_item6 { height: 220px; background: url(../img/btn_hom06_1.png) center bottom no-repeat; background-size: contain}
w6ds_tle { height: 50px; background: url(../img/tle_w6ds.png) left top no-repeat; background-size: contain}
w6ds_item1 { height: 220px; background: url(../img/btn_w6ds01_1.png) center bottom no-repeat; background-size: contain}
w6ds_item2 { height: 220px; background: url(../img/btn_w6ds02_1.png) center bottom no-repeat; background-size: contain}
w6ds_item3 { height: 220px; background: url(../img/btn_w6ds03_1.png) center bottom no-repeat; background-size: contain}
w6ds_item4 { height: 220px; background: url(../img/btn_w6ds04_1.png) center bottom no-repeat; background-size: contain}
w6ds_item5 { height: 220px; background: url(../img/btn_w6ds05_1.png) center bottom no-repeat; background-size: contain}
w6ds_item6 { height: 220px; background: url(../img/btn_w6ds06_1.png) center bottom no-repeat; background-size: contain}
w6ds_map { height: }
.video_size { width: 70%; height: auto;}
}
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/************************************* For tablet H: **************************************/
@media only screen and (min-width: 840px) {
[class*="w6ds_tle"] { height: 160px;}
.col_V_1 {width: 8.33%;}
.col_V_2 {width: 16.66%;}
.col_V_3 {width: 25%;}
.col_V_4a {width: 31.33%; margin: 1%;}
.col_V_4b {width: 32.33%; margin: 0.5%;}
.col_V_4 {width: 33.33%;}
.col_V_5 {width: 41.66%;}
.col_V_6a {width: 48%; margin: 1%;}
.col_V_6b {width: 49%; margin: 0.5%;}
.col_V_6 {width: 50%;}
.col_V_7 {width: 58.33%;}
.col_V_8 {width: 66.66%;}
.col_V_9 {width: 75%;}
.col_V_10 {width: 83.33%;}
.col_V_11 {width: 91.66%;}
.col_V_12 {width: 100%;}
question {font-size: 1.5em;}
hk20_header {height: 170px; background-size: 50% auto, 40% auto, 200% auto;}
hk20_section { width:95%; height: 680px;}
hk20_item1 { height: 220px; background: url(../img/btn_hom01_1.png) center top no-repeat; background-size: contain}
hk20_item2 { height: 220px; background: url(../img/btn_hom02_1.png) center bottom no-repeat; background-size: contain}
hk20_item3 { height: 220px; background: url(../img/btn_hom03_1.png) center top no-repeat; background-size: contain}
hk20_item4 { height: 220px; background: url(../img/btn_hom04_1.png) center bottom no-repeat; background-size: contain}
hk20_item5 { height: 220px; background: url(../img/btn_hom05_1.png) center top no-repeat; background-size: contain}
hk20_item6 { height: 220px; background: url(../img/btn_hom06_1.png) center bottom no-repeat; background-size: contain}
w6ds_tle { height: 50px; background: url(../img/tle_w6ds.png) left top no-repeat; background-size: contain}
w6ds_item1 { height: 220px; background: url(../img/btn_w6ds01_1.png) center bottom no-repeat; background-size: contain}
w6ds_item2 { height: 220px; background: url(../img/btn_w6ds02_1.png) center bottom no-repeat; background-size: contain}
w6ds_item3 { height: 220px; background: url(../img/btn_w6ds03_1.png) center bottom no-repeat; background-size: contain}
w6ds_item4 { height: 220px; background: url(../img/btn_w6ds04_1.png) center bottom no-repeat; background-size: contain}
w6ds_item5 { height: 220px; background: url(../img/btn_w6ds05_1.png) center bottom no-repeat; background-size: contain}
w6ds_item6 { height: 220px; background: url(../img/btn_w6ds06_1.png) center bottom no-repeat; background-size: contain}
w6ds_map { height: }
.video_size { width: 70%; height: auto;}
}
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/******************************* For tablet V or notebook: ********************************/
@media only screen and (min-width: 960px) {
[class*="w6ds_tle"] { height: 180px;}
.col_T_1 {width: 8.33%;}
.col_T_2a {width: 14.66%; margin: 1%;}
.col_T_2b {width: 15.66%; margin: 0.5%;}
.col_T_2 {width: 16.66%;}
.col_T_3a {width: 20%;}
.col_T_3 {width: 25%;}
.col_T_4a {width: 31.33%; margin: 1%;}
.col_T_4b {width: 32.33%; margin: 0.5%;}
.col_T_4 {width: 33.33%;}
.col_T_5a {width: 40%;}
.col_T_5 {width: 41.66%;}
.col_T_6 {width: 50%;}
.col_T_6a {width: 48%; margin: 1%;}
.col_T_7a {width: 57%;}
.col_T_7 {width: 58.33%;}
.col_T_8a {width: 60%;}
.col_T_8 {width: 66.66%;}
.col_T_9 {width: 75%;}
.col_T_10 {width: 83.33%;}
.col_T_11 {width: 91.66%;}
.col_T_12 {width: 100%;}
question {font-size: 1.5em;}
hk20_header {height: 180; background-size: 45% auto, 30% auto, 200% auto;}
hk20_section { width: 95%; height: 440px;}
hk20_item1 { height: 220px; background: url(../img/btn_hom01_1.png) center top no-repeat; background-size: contain}
hk20_item2 { height: 220px; background: url(../img/btn_hom02_1.png) center bottom no-repeat; background-size: contain}
hk20_item3 { height: 220px; background: url(../img/btn_hom03_1.png) center top no-repeat; background-size: contain}
hk20_item4 { height: 220px; background: url(../img/btn_hom04_1.png) center bottom no-repeat; background-size: contain}
hk20_item5 { height: 220px; background: url(../img/btn_hom05_1.png) center top no-repeat; background-size: contain}
hk20_item6 { height: 220px; background: url(../img/btn_hom06_1.png) center bottom no-repeat; background-size: contain}
w6ds_tle { height: ; background: url(../img/tle_w6ds.png) left top no-repeat; background-size: contain;}
w6ds_item1 { height: 280px; background: url(../img/btn_w6ds01_1.png) center no-repeat; background-size: contain; position: absolute; left: 4%;}
w6ds_item2 { height: 280px; background: url(../img/btn_w6ds02_1.png) center bottom no-repeat; background-size: contain; position: absolute; left: 22%;}
w6ds_item3 { height: 280px; background: url(../img/btn_w6ds03_1.png) center top no-repeat; background-size: contain; position: absolute; left: 35%;}
w6ds_item4 { height: 280px; background: url(../img/btn_w6ds04_1.png) center bottom no-repeat; background-size: contain; position: absolute; right: 27%;}
w6ds_item5 { height: 280px; background: url(../img/btn_w6ds05_1.png) center top no-repeat; background-size: contain; position: absolute; right: 11%;}
w6ds_item6 { height: 280px; background: url(../img/btn_w6ds06_1.png) center bottom no-repeat; background-size: contain; position: absolute; right: 2%;}
w6ds_map { height: }
.video_size { width: 60%; height: auto;}
}
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/******************************* For destop with HD monitor: ******************************/
@media only screen and (min-width: 1150px) {
[class*="w6ds_tle"] { height: 200px;}
.col_H_1 {width: 8.33%;}
.col_H_2a {width: 14.66%; margin: 0.5%;}
.col_H_2b {width: 15.66%; margin: 0.5%;}
.col_H_2 {width: 16.66%;}
.col_H_3a {width: 20%;}
.col_H_3 {width: 25%;}
.col_H_4a {width: 31.33%; margin: 1%;}
.col_H_4b {width: 32.33%; margin: 0.5%;}
.col_H_4 {width: 33.33%;}
.col_H_5a {width: 40%;}
.col_H_5 {width: 41.66%;}
.col_H_6 {width: 50%;}
.col_H_6a {width: 48%; margin: 1%;}
.col_H_7a {width: 57%;}
.col_H_7 {width: 58.33%;}
.col_H_8a {width: 60%;}
.col_H_8 {width: 66.66%;}
.col_H_9 {width: 75%;}
.col_H_10 {width: 83.33%;}
.col_H_11 {width: 91.66%;}
.col_H_12 {width: 100%;}
question {font-size: 1.5em;}
hk20_header {height: 200px; background-size: 45% auto, 30% auto, 200% auto;}
hk20_section { width: 1100px; height: 500px;}
hk20_item1 { height: 240px; background: url(../img/btn_hom01_1.png) center top no-repeat; background-size: contain}
hk20_item2 { height: 240px; background: url(../img/btn_hom02_1.png) center bottom no-repeat; background-size: contain}
hk20_item3 { height: 240px; background: url(../img/btn_hom03_1.png) center top no-repeat; background-size: contain}
hk20_item4 { height: 240px; background: url(../img/btn_hom04_1.png) center bottom no-repeat; background-size: contain}
hk20_item5 { height: 240px; background: url(../img/btn_hom05_1.png) center top no-repeat; background-size: contain}
hk20_item6 { height: 240px; background: url(../img/btn_hom06_1.png) center bottom no-repeat; background-size: contain}
w6ds_tle { height: ; background: url(../img/tle_w6ds.png) left top no-repeat; background-size: contain}
w6ds_item1 { height: 320px; background: url(../img/btn_w6ds01_1.png) center no-repeat; background-size: contain; position: absolute; left: 4%;}
w6ds_item2 { height: 320px; background: url(../img/btn_w6ds02_1.png) center bottom no-repeat; background-size: contain; position: absolute; left: 22%;}
w6ds_item3 { height: 320px; background: url(../img/btn_w6ds03_1.png) center top no-repeat; background-size: contain; position: absolute; left: 35%;}
w6ds_item4 { height: 320px; background: url(../img/btn_w6ds04_1.png) center bottom no-repeat; background-size: contain; position: absolute; right: 27%;}
w6ds_item5 { height: 320px; background: url(../img/btn_w6ds05_1.png) center top no-repeat; background-size: contain; position: absolute; right: 11%;}
w6ds_item6 { height: 320px; background: url(../img/btn_w6ds06_1.png) center bottom no-repeat; background-size: contain; position: absolute; right: 2%;}
w6ds_map { height:;}
.video_size { width: 60%; height: auto;}
}
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/

/* Back Button */
.btn-back {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 8px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    color: white;
    text-align: center;
    font-size: 26px;
}
.btn-back:hover {
    background-color: rgba(0,0,0,1);
}