html {display:table;width:100%; /* need to set a width to 100%, wich means here a min-width since it is displayed with the same specifities thas has a table , it shrinks and expand according to its content */}

@font-face {
    font-family: 'ProximaNova-Regular';
    src: url("font/ProximaNova-Regular.otf") format("opentype");
}

body{
	font-family: 'ProximaNova-Regular','Microsoft JhengHei';
}

.form-control{
	width: calc(100% - 1.5rem);
}

.bodyContainer{
	display: -ms-flex; 
	display: -webkit-flex; 
	display: flex;
	max-width:2000px;
	/* min-width: 1280px; */
	width: 100%;
	margin:auto;
	font-family:'Microsoft JhengHei';
}

.bodyLeftMenu{
	background:#263238;
	/* width:320px; */
	width:240px;
	/* min-height: 768px; */
	display:inline-block;
	/* flex:1; */
	position:relative;
	z-index:11;
	padding-bottom:30px;
}

.hiddenPlan1{
	height:22px;
}

.searchContainer{
	/* margin-left:22px; */
	margin-left:10px;
	margin-top:22px;
	background:#37474F;
	border-radius:23px;
	height:46px;
	width:180px;
}

.searchImg{
	margin-left:10px;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.searchInput{
	margin-left:10px;
	position:relative;
	top:50%;
	transform:translateY(-50%);
	vertical-align:top;
	background: transparent;
    border: none;
	width:100px;
	font-size:16px;
	font-family:'Microsoft JhengHei';
	color:#B0BEC5;
	outline: none;
}

.bodyLeftMenuUi{
	list-style:none;
	margin-top:35px;
	padding-left:0px;
}

.bodyLeftMenuUi li .bodyLeftMenu_span{
	margin-left:60px;
	font-size:15px;
	color: #CED7D8;
	text-decoration:none;
	vertical-align:top;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.bodyLeftMenuUi li{
	position:relative;
	height:24px;
	/* margin-bottom:35px; */
	padding-top:10px;
	padding-bottom:10px;
	border-bottom: 1px solid #1e282c;
}

.bodyLeftMenuUi li:hover{
	background-color: #222d32;
}

.bodyLeftMenuUi li:hover .bodyLeftMenu_span{
	color: #f1f1f1;
}

.bodyLeftMenuUi li .bodyLeftMenuBullet{
	position:absolute;
	width:25px;
	margin-left:24px;
}

.bodyLeftMenuKeydown{
	position:absolute;
	right:8px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

.bodyLeftSubMenuUi{
	list-style:none;
	display:none;
	padding-left:0px;
}


.bodyLeftMenuUi li .bodyLeftSubMenu_span{
	margin-left:60px;
	font-size:15px;
	color:#B0BEC5;
	text-decoration:none;
	vertical-align:top;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.activeLeftMenu {
    background-color: green;
    color: white;
}

.bodyRightContent{
	display:inline-block;
	vertical-align:top;
	width:calc(100% - 240px);
}

.bodyRightBannerSlide{
	position:relative;
	width:100%;
	/* height:415px; */
}

.bodyRightBannerText{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	text-align:center;
	width:100%;
}

.cycle2Banner{
	width:calc(100% - 120px);
	margin:20px 60px;
	border-radius:5px;
}

.bodyRightCommonContainerText{
	font-size:15px;
	color:#000;
	font-weight:bold;
}

.bodyRightCommonContainer{
	padding:20px 60px;
}

.bodyRightEnterpriseBox{
	position:relative;
	height:388px;
	/*width:calc(100% / 5 - 13.3px);*/
	width:calc(100% / 5 - 9px);
	-webkit-box-shadow: 0px 3px 5px 0px rgba(145,145,145,1);
	-moz-box-shadow: 0px 3px 5px 0px rgba(145,145,145,1);
	box-shadow: 0px 3px 5px 0px rgba(145,145,145,1);
	margin-right:10px;
	display:inline-block;
	vertical-align:top;
}

.bodyRightEnterpriseContainer{
	overflow-x:hidden;	
	white-space:nowrap;
	padding-bottom:5px;
}

.bodyRightEnterpriseMainContainer{
	margin-top:20px;
	position:relative;
}

.bodyRightEnterpriseBox_title{
	color:#333333;
	line-height:1.5;
	font-weight:bold;
	font-size:14px;
	padding:0px 10px;
	padding-top:10px;
	padding-bottom:5px;
	max-height:42px;
	overflow-y:hidden;
	white-space:normal;
}

.bodyRightEnterpriseBox_img img{
	vertical-align:top;
}

.bodyRightEnterpriseBox_company_text{
	color:#707070;
	font-size:12px;
	width:55%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	padding:0px 10px;
	display:inline-block;
	vertical-align:top;
}

.bodyRightEnterpriseBox_company_rating{
	display:inline-block;
	vertical-align:top;
	width:calc(44% - 25px);
	margin-top:-3px;
}

.bodyRightEnterpriseBox_company_rating_text{
	color:#EDC455;
	font-size:12px;
	position:relative;
	top:-2px;
}

.bodyRightEnterpriseBox_tag{
	padding: 5px 10px;
	white-space:normal;
}

.bodyRightEnterpriseBox_tag_text{
	display:inline-block;
	vertical-align:top;
	font-size:10px;
	color:#FFF;
	padding:2px 3px;
	margin-bottom:3px;
	border-radius:10px;
}

.yellow{
	background:#BDC41A
}

.blue{
	background:#0067EC;
}

.bodyRightEnterpriseBox_price{
	padding:0px 10px;
}

.bodyRightEnterpriseBox_price_num{
	font-size:13px;
	color:#000;
	font-weight:bolder;
}

.bodyRightEnterpriseBox_price_per_period{
	color:#707070;
	font-size:10px;
}

.bodyRightEnterpriseBox_hr{
	border-top:1px solid #E9E9E9;
	margin-bottom:0px;
}

.bodyRightEnterpriseBox_bottom{
	position:absolute;
	bottom:0px;
	width:100%;
}

.bodyRightEnterpriseBox_enqiury{
	height:45px;
	
}

.bodyRightEnterpriseBox_enqiury_text{
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
	margin-top:-5px;
}

.bodyRightEnterpriseBox_enqiury_text a{
	color:#008EEC;
	font-size:14px;
	text-decoration:none;
}

.bodyRightEnterpriseBox_enqiury_text a:hover{
	opacity:0.5;
}

.bodyRightEnterpriseBox_enqiury_text img{
	position:relative;
	top:6px;
}

.bodyRightClassContainer{
	margin-top:20px;
}

.bodyRightClassBox{
	width:calc(100% / 4 - 10px);
	display:inline-block;
	vertical-align:top;
	margin-right:5px;
	position:relative;
	border-radius:5px;
	margin-bottom:10px;
}

.bodyRightClassBox img{
	width:100%;
}

.bodyRightClassBox_div{
	position:absolute;
	width:100%;
	bottom:0px;
	height:30px;
	background-color:rgba(0,0,0,0.53);
}

.enterpriseLeft{
	cursor:pointer;
}

.enterpriseRight{
	cursor:pointer;
}

.bodyRightClassBox_div_text{
	margin:5px 10px;
	color:#FFF;
	font-size:12px;
}

.enterpriseLeft{
	position:absolute;
	z-index:10;
	left:-50px;
	top:50%;
	transform:translateY(-50%);	
}

.enterpriseRight{
	position:absolute;
	z-index:10;
	right:-30px;
	top:50%;
	transform:translateY(-50%);	
}

.bodyRightEnterpriseBox_img{
	width:100%;
	background-size:cover;
}


.bodyRightBannerText_title{
	font-size:35px;
	color:#FFF
}

.bodyRightBannerText_subtitle{
	font-size:50px;
	color:#FFF
}

/* pager */
.cycle-pager { 
	text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 25px; overflow: hidden;
}
.cycle-pager span { 
	font-family: arial; font-size: 40px; width: 20px; height: 20px; 
	display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

@media screen and (max-width: 1300px) {
	.bodyRightBannerText_title{
		font-size:25px;
	}
	
	.bodyRightBannerText_subtitle{
		font-size:35px;
	}
}

@media screen and (max-width: 1200px) {
	.bodyRightEnterpriseBox{
		width: calc(100% / 4 - 9px);
	}
}

@media screen and (max-width: 1100px) {
	.bodyRightEnterpriseBox{
		width: calc(100% / 3 - 9px);
	}
}

@media screen and (max-width: 1000px) {
	.bodyLeftMenu{
		display:block;
		width:100%;
	}
	
	.bodyContainer{
		display:block;
	}
	
	.bodyRightContent{
		display:block;
		width:100%;
	}
	
	.bodyRightClassBox {
		width: calc(100% / 3 - 10px);
	}
}

@media screen and (max-width: 700px) {
	.bodyRightBannerText_title{
		font-size:15px;
	}
	
	.bodyRightBannerText_subtitle{
		font-size:20px;
	}
	
	.cycle2Banner{
		width:calc(100% - 60px);
		margin: 20px 30px;
	}
	
	.br1{ display:none; }
}


@media screen and (max-width: 570px) {
	.bodyRightEnterpriseBox{
		width: calc(100% / 2 - 9px);
	}
	
	.bodyRightClassBox {
		width: calc(100% / 2 - 10px);
	}
}

@media screen and (max-width: 420px) {
	.bodyRightEnterpriseBox{
		width:100%;
	}
	
	.bodyRightClassBox {
		width: 100%;
	}
}

@media screen and (max-width: 400px) {
	.bodyRightBannerText_title{
		font-size:12px;
	}
	
	.bodyRightBannerText_subtitle{
		font-size:15px;
	}
	
}