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

/*menu*/
nav{top: 0; left: 0;  height:100%; z-index: 9999; position:fixed; width:60px; background:none; overflow: hidden;-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
nav.expand{ width:100%;}
nav header{ position: fixed; width:60px; height:100%; left:0; background-color:#FFF; z-index:10;}
nav header h2{ width:100%; height:100%; overflow:hidden; display: inline-block; text-align:center; vertical-align: middle; display: flex; align-items: center; justify-content: center;}
nav header h2 span{ color:#000; font-weight:600; font-size:2.5rem; width:2rem; text-align:center; vertical-align: middle; word-wrap: break-word;display: inline-block;display: table-caption; align-items: center; justify-content: center;}
#menuWrapper{ width:100%; height:100%; opacity:1; position: absolute; z-index:9}
#menuWrapper ul li{ margin-bottom: 1.5rem;}
#menuWrapper ul li a{ color:#000; font-size:2.4rem; line-height: 2.8rem; position:relative; text-decoration:none; display:inline-block;}
#menuWrapper ul{ position:absolute; top:60px;}
#menuWrapper ul li a:after{
  display:block; bottom:-2px;
  content: '';
  border-bottom: solid 2px #000;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  transform-origin:100% 50%
}
#menuWrapper ul li a:hover:after,#menuWrapper ul li a.is-active:after{ transform: scaleX(1); transform-origin:0 50%;}
ul.mainMenu{ left: 120px;}
.subMenu{ left:400px; display:none;}
.submenu_select{ font-weight:bolder;}
	/*BGcolors*/
	.dan_01{ background-color:#538e7c;}
	.dan_02{ background-color:#66be8c;}
	.dan_03{ background-color:#407c9e;}
	.best_ch{ background-color:#e84365;}
	.best_en{ background-color:#c15a6f;}
	.best_cn{ background-color:#a93b6a;}
	.top_01{ background-color:#eb5c58;}
	.aut_01{ background-color:#1aa0a1;}
	.aut_02{ background-color:#8585b7;}
	.aut_03{ background-color:#db516b;}
	.aut_04{ background-color:#1dafe0;}

/***mobile***/
@media screen and (max-width: 736px) {
/*menu*/
nav{top: 30px; left: 0; width:100%; height:50px; z-index: 9999; position:fixed;  background:none; overflow: hidden;}
nav.expand{ width:100%; height:100%;}
nav header{ position: fixed; width:100%; height:50px; left:0; background-color:#FFF; z-index:10;}
nav header h2{ width:100%; height:100%; overflow:hidden; display: inline-block; text-align:center; vertical-align: middle; display: flex; align-items: center; justify-content: center;}
nav header h2 span{ color:#000; font-weight:600; font-size:2.5rem; width:100%; text-align:center;}
#menuWrapper ul{ top: 70px;}
#menuWrapper ul li{ margin-bottom: .8rem;}
#menuWrapper ul li a{ font-size:2rem; line-height: 2.5rem;}
ul.mainMenu{ left: 5%;}
.subMenu{ left:50%; display:none;}	
}