:root {
	/* color */
	--color-main: #318500 ;/* Green */
	--color-second: #003E5A ;/* Dark Green */

	--color-main-blue:rgb(30, 138, 201);

	--color-success: #04AA6D ;/* Green */
	--color-info:#2196F3 ;/* Blue */
	--color-warning:#ff9800 ;/* Orange */
	--color-danger:#f44336 ;/* Red */
	--color-default:#e7e7e7 ;/* Gray */
	
	--FOOT-BG:#3F3F41;

	--header-color: rgb(224, 235, 255);
/*main cloud menu*/

	--HEADER-FRAME-height: 6rem;
	--HEADER-FRAME-width:68rem;

	--BODY-FRAME-width: calc( 100vw - var(--MENU-FRAME-LEFT-width ) );
	--MAIN-FRAME-height: calc(100vh - var(--HEADER-FRAME-height) - var(--FOOTER-FRAME-height) );
	--MENU-FRAME-LEFT-width: 15rem;
	/* --MENU-FRAME-LEFT-min-height: calc(100vh - var(--HEADER-FRAME-height) - var(--FOOTER-FRAME-height)); */
	--MENU-FRAME-LEFT-min-height: calc(100vh - var(--HEADER-FRAME-height) - var(--FOOTER-FRAME-height) + 16rem );
	--FOOTER-FRAME-height: 8rem;
}

body {
	/* width: 100vw; */
	background-color:var(--BODY-bgColor,#DDD);
	letter-spacing: 0.09375rem;
	}
/* header */
#MAINVIEW-FRAME {
	margin: auto;
	/* min-width: 100vw; */
	background-color: var(--color-bg-MAINVIEW-FRAME);
}
.cloud-menu,
#HEADER-FRAME {

	height: var(--HEADER-FRAME-height);
	min-width: var(--HEADER-FRAME-width);
	background:#ffffff;
	box-shadow: 0 0 10px #333;
	border-top: 0.2rem solid;
	border-bottom: 0.5rem solid;
	border-color:var(--color-main);
	position: relative;

}
#HEDER_CONTANER{

	margin-left:auto;
	margin-right:auto;
	/* padding:0rem 1rem 0rem 1rem; */
	width:var(--HEADER-FRAME-width);
	height:100%;

	display: flex;
	align-content: center;
	align-items: center;
	justify-content: space-around;

	background:#ffffff;
}
/*Main body*/
#BODY-FRAME {
	min-height: var(--MAIN-FRAME-height);
	height: auto;
	/* width: 100vw; */
	/* min-width: 80rem; */
	min-width: 1080px;
	/* margin-top: 0.5rem; */
	/* margin-bottom: 0.5rem; */

	margin-right: auto;
	margin-left: auto;

	background-color: #ffffff;
	display: table;

}
.side-menu-contaner,
#MENU-FRAME-LEFT {
	width: var(--MENU-FRAME-LEFT-width);
	min-height: var(--MENU-FRAME-LEFT-min-height);
	padding: 1rem;
	background: #f7f7f7;
	float: left;
	clear: both;
}

#CONTANER {
	float: left;
	width:48rem;
	margin: 1rem;
}

/* footer */
div.footer-fix,
#FOOTER-FRAME {
	/* height: var(--FOOTER-FRAME-height); */
	background: #3F3F41;

	/* position: fixed; */
	width: 100%;
}
#FOOTER-FRAME > .container{
	padding: 1.5rem 1rem 1.5rem 1rem;
	margin-right: auto;
	margin-left: auto;
	display: table;
}
#FOOTER-FRAME *{
	font-weight: 400;
	font-size: 0.8rem !important;
	color: #cecece;
}
#FOOTER-FRAME p.footer_first{
line-height: 1.625rem !important;}
/* #IFRAME-FRAME {} */

.BANNER
{
	max-width:68rem;
	float: left;
	clear:both;
}

#IFRAME {
padding: 1rem;
	min-width: 48rem;
	/* height: 980px; */
	height: 100%;
	/* height: auto; */
	position: absolute;

}


.main-view {
	height:100vh;/* login page */
}

.cloudMainMenuLogo {
	width: 16rem;
	float: left;
}
.cloudButtons {
	padding-top: 1.5rem;
	width: inherit;
	display: flex;
	justify-content: space-evenly;
}



footer img {
	display: block;
	margin: auto;
}

/*object*/
/*button*/
#mainMenu button:first-child{
	/* border-top:0.1rem solid; */
}
#mainMenu button{
	border-left:0;
	border-right:0;
	border-top:0;
	border-bottom:0.05rem solid;
	border-color:#ece4d8;
	background-color:#f7f7f7;
}

#mainMenu button:hover {
	transition: all 0.1s ease-in;
	background-image: linear-gradient(to left, transparent , transparent , #318500 25%, #318500);
	color:#FFF;
}

#mainMenu * {text-decoration: none;}
#mainMenu >* button{
	padding-top:0.2rem;
	padding-bottom:0.2rem;
	display: block;
	width: 100%;
	line-height: 1.4rem;
	text-align: left;
	font-size: 1.2rem;
}
#mainMenu >* button.taiwan{padding-left:1rem ;}
#mainMenu >* button.MenuSection{padding-left:2rem ;}
#mainMenu >* .MenuSection button{padding-left:4rem ;}
#mainMenu >* .MenuCounty button{padding-left:6rem ;}
#mainMenu >* button.MenuZone {padding-left:7rem ;}



#backToHome{
	font-size:1.5rem;
	text-decoration: none;
	font-weight: 400;
	color:#000;
	border-top:rgba(49,133,0,0.1) hidden 0.1rem;
	border-left:rgba(49,133,0,0.1) hidden 0.1rem;
	border-right:rgba(49,133,0,0.1) hidden 0.1rem;
	border-bottom:rgba(49,133,0,0.1) solid 0.4rem;
}
#backToHome:hover{

	color:var(--color-main,#080);
	border-bottom:var(--color-main,#080) solid 0.4rem
}
.menuTitle{font-size:1.3rem;
padding:1rem 1rem 0 1rem;}
.menuTitleEN{font-size:0.8rem;
padding:0.5rem 1rem 0.5rem 1rem;}
.menuTitle,.menuTitleEN{
	background-color:var(--color-second,#000);
	color:#fff;
}

.fa.fa-home,
.glyphicon {
	font-size: 6rem;
	color: #304980;
}

/*subject class*/
.center {
	text-align: center;
	margin: auto;
}
.TextCenter {text-align:center;}
.TextLeft {text-align:left;}
.TextRight {text-align:right;}

.vhcenter {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.flexCenter {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
}

.autoSize{
	max-width:100%
}
.menuMobil
,.menuHide{display: none;}

/*TEXT*/
*{
	font-family:"Microsoft JhengHei","微軟正黑體";
	font-weight:500;
}


h1,h2,h3,h4,h5,h6{
	color:var(--color-second,#666666);
	font-weight:500;
}
h1{ font-size:3rem;}
h2{ font-size:2rem;}
h3{ font-size:1.6rem;}


.swicthMapBtn{
	font-size:1.2rem;
	border:0;
	padding:.5rem;
	width:9rem;
}
.swicthMapBtn:hover{
	background-color:var(--color-main);
	color: #fff;
}
.swicthMapBtn.switch{
	background-color:var(--color-main-blue);
	color:#fff;
	font-weight:bold;
}