@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
	font-family: 'IntroFont';
	src:url("../font/PingFang Bold.ttf");
}

.ContentFont{
	font-family:'Noto Sans TC';
	line-height: 1.8;
	font-weight: 500;
}
.TitleFont{
	font-family:'Noto Sans TC';
	line-height: 1.8;
	font-weight: 800;
}
*{
  padding:0px; margin: 0px
}
body{
	background-color: #FCEB74;
	overflow: hidden;
}
.Center{
	display:block;
	text-align: center;
	margin: auto;
}

/*wrappers*/
.outerWrapper{
	/*background-color:black;*/
	position:relative;
	overflow: hidden;
	left:.5vw;
	top:.5vh;
	width: 99vw;
	height: 99vh;	

	
}
#back_frame{
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	
	/*background-color: #FCEB74;
	border-top: 10px solid transparent;
	border-right: 15px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 15px solid transparent;
	border-image:url("../img/frame.png") 5 stretch;
	border-image-slice:10 15 15 10;*/
}
.frameTitle{
	position:relative;		
	background-color:rgb(96,51,255);
	min-height:60px;
	/*height:10%;*/
	overflow:hidden;
}
#left_top_corner{
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	/*background-color: #FCEB74;*/
	border-top: 5px solid #122C9A;	
	border-bottom: 5px solid #122C9A;
	border-left: 5px solid #122C9A;
	/*border-image:url("../img/frame-02.png") 5 stretch;
	border-image-slice:13 21 5 13;*/

}
#left_top_corner_img{
	position: absolute;
	top:-5px;
	left:-5px;
}

#music_wrapper{
	border-right: 5px solid #122C9A;	
	border-left: 5px solid #122C9A;	
	position: relative;
	margin-right: -5px;
    /*top: -7.5px;*/
}

.innerFrame{
	position:relative;
	/*width:calc(100vw - 5px);*/
	/*overflow:scroll;*/
	min-height:calc(90% - 20px);
	/*left:5px;*/
	bottom:0px;
	
	/*border-top: 0px solid transparent;*/
	border-right: 13px solid #122C9A;	
	border-bottom: 13px solid #122C9A;
	border-left: 5px solid #122C9A;
	/*border-image:url("../img/frame-01.png") 5 stretch;
	border-image-slice:0 13 13 5;*/

}
.vertCenterWrapper{
	display: table;
	height:100%;
}
.vertCenterChild{
	display:table-cell;
	vertical-align: middle;
}
.outerFrame{
	position:absolute;
	top:10px;
	left:10px;
	bottom:15px;
	right:5px;
}
.overlapFrame{
	/*background-color:white;*/
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	padding-left:10%;
	padding-right:10%;
	padding-bottom:50px;
	padding-top:50px;
	opacity: 1;
	transition: .3s ease-out;
}
.overlapFrame.hidden{
	opacity: 0;
	transition: .3s ease-out;
}


#frame_button_wrapper{
	/*width:20%;
	float:right;
	height:100%;*/
	position: absolute;
	right: 0px;
	top:0px;
	bottom:0px;

	border-top: 5px solid #122C9A;
	border-bottom: 5px solid #122C9A;
	border-right: 13px solid #122C9A;
}
.frameButton{

	/*width:100%;*/
	/*min-width:60px;
	height:100%;*/
/*	width: 50%;
	height: 0;
	padding-bottom: 50%;*/
	/*width:auto;*/
	height:100%;
	/*float:right;*/
	display: inline-block;

	background-color:#FCEB74;
	background-size:100% 200%;
	background-repeat:none;
	cursor:pointer;

	overflow: hidden;
/* 
	border:5px solid;
	border-color:#122C9A;*/
}
#title_logo{
	position:absolute;
	width:auto;
	cursor: pointer;
	left:20px;
	top:5px;

}
.noLeftBorder{
	border-left-style:none;
}
.musicButton{
	/*background-image:url(../img/ui_sound.png);*/
	position: absolute;
	height:100%;
	opacity: 1;
	transition: 0.2s ease-in;
}
#music_button_off{
	position: relative;
}
#music_button_on{
	position: absolute;
	top:0;
	left:0;
}
.hidden{
	opacity: 0;
}
#hambuger_button{
	/*background-size:100% 100%;*/
	/*background-image:url(../img/hambuger.png);*/
	height:100%;
}


canvas{
	position:absolute;
	top:0;
	left:0;
}

.objMargin{
	margin-top:10%;
}


/* width */
::-webkit-scrollbar {
  width: 31px;
 
}

/* Track */
::-webkit-scrollbar-track {
 background: #FCEB74;
  border-left:5px solid #122C9A;
  border-right:5px solid #122C9A;
  /* background-image: url("../img/scrollbar-thumb.png");*/
}

/* Handle */
::-webkit-scrollbar-thumb {
  /*background: #888; */
 background: rgb(96,51,255); 

  border:5px solid #122C9A;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
/*    background-image: url("../img/scrollbar-up.png");
  background-position: : center;
  width:21px;
  height:36px;
    border-left:5px solid #122C9A;
    border-right:5px solid #122C9A;*/
}

/*::-webkit-scrollbar-button:single-button:vertical:increment{
	 background-image: url("../img/scrollbar-down.png");
}*/