@charset "utf-8";
/* CSS Document */
#status{
	position: absolute;
	width:30px;
	bottom:5px;
	left:50%;
	margin-left:-23.5px;
	z-index: 100;
}
/*class_real*/
.popular_real1.class_real .popular_banner_div{
	border-radius: 0px;
	padding: 2% 0 1% 0;
}
.popular_real1.class_real .popular_banner_div img{
	width: 60%;
	margin: auto; 
}
.popular_real1.class_real .class_name{
	color: #414242;
	font-weight: bold;
	text-align: center;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/	
	border-top: 1px solid #c9c9c9;
	margin:6% 6% 0% 6%;
	padding-top: 4%;
}
.popular_real1.class_real .popular_banner_div:hover .class_name{
	color: #005aff;
}
/*popular_real*/
.popular_real{
	background-color: #ffffff;
	color:#414242;
}
.popular_real1 .left{
	float:left;
}
.popular_real1 .right{
	float:left;
}
.popular_real1 .bg{
	width:99%;
	margin-left: 1%;
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
	-moz-box-shadow: -4px 4px 5px #dcdcdc;
	-webkit-box-shadow: -4px 4px 5px #dcdcdc;
	box-shadow: -4px 4px 5px #dcdcdc;
	background-position: center;

}
.popular_real1 .play{
	background-image: url(../images/video_play.png);		
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 58%;
	cursor: pointer;
	background-size: 59px;
	width:100%;
}
.popular_real1 .right .title{
	width:100%;
	text-align: center;
}
.popular_real1 .right .detail{
	margin: 0 auto;
}
.popular_real1 .right .detail > img{
	width: 25%;
	display: block;
	overflow: hidden;
	float:left;
	border-radius: 50%;
	margin-right: 7.5%;
}
.popular_real1 .right .icon_group{
	width: 67.5%;
	margin-top: 3%;
	float:left;
}
.popular_real1 .right .icon_group_in{
	margin: 1.5% 1%; 
}
.popular_banner{
	position: relative;
}
.popular_left_btn{
	position: absolute;
	cursor: pointer;
}
.popular_right_btn{
	position: absolute;
	cursor: pointer;
}
/*popular_banner_div*/
.popular_banner_div{
	box-shadow:0px 0px 1px #999999;
	border-radius: 10px;
	overflow: hidden;
	float:left;


	cursor: pointer;
}
.popular_banner_div > img{
	width:100%;
	display: block;
}
.popular_banner_div .detail{
	background-color:#ffffff; 
	position: relative;
} 

.popular_banner_div .detail >img{
	display: block;
	overflow: hidden;
	float:left;
} 
.popular_banner_div .detail .title{
	font-weight: bold;
	float:left;
	color:#414242;
} 
.popular_banner_div .detail .smark{
	position: absolute;
	color:#414242;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
} 
.popular_banner_div .icon_group{
	background: #eeeeee;
	width: 100%;
	padding: 2px 0;
	color:#7e7e7e;
} 
.popular_banner_div .icon_group >.icon_group_in:nth-of-type(1){
	width:47%;
	float:left;
}
.popular_banner_div .icon_group >.icon_group_in:nth-of-type(2){
	width:47%;
	float:right;
	text-align: right;
}
/*popular_real2*/
.popular2_div{
	float:left;
}
.popular2_div .top{
	background-color: #ededed;
}
.popular2_div .top > img{
	width:100%;
	display: block;
}
.popular2_div .icon_group_in{
	width: 47%;
}
.popular2_div .icon_group_in:nth-of-type(1){
	float:left;
}
.popular2_div .icon_group_in:nth-of-type(2){
	float:right;
	text-align: right;
}
.popular2_div .detail{
	background-color:#ffffff; 
	position: relative;
} 

.popular2_div .detail >img{
	display: block;
	overflow: hidden;
	float:left;
} 
.popular2_div .detail .title{
	font-weight: bold;
	float:left;
	color:#414242;
} 
.popular2_div .detail .smark{
	position: absolute;
	color:#414242;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
} 
.popular2_div .contents{
	border-top: 1px solid #c9c9c9;
}
.school_excellent .class_name{
	color: #414242;
	font-weight: bold;
	text-align: center;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/	
	border-bottom: 1px solid #c9c9c9;
}
.school_excellent .class_name:hover{
	color: #005aff;
}
/*school*/
/*top*/
.school_real > .top{
	background-color: #ffffff;
} 
.school_real .school_img{
	width: 20%;
	display: block;
	float:left;
}
.school_real .contents_in1 .school_table_div{
	display: block;
	width: 78%;
	/*margin-left:2%;*/
	/*height:200px;*/
	/*background-color: #999999;*/
	float:left;
	color:#465456;
	line-height: 1.8em;
	margin-left: 2%; 
}
.school_real table {
	border-collapse: collapse;
	border-spacing: 0;
	vertical-align:text-top;
}
.school_real td{
	vertical-align:text-top;
	padding-bottom: 2%;
}
.special_add .popular_real{
	position: relative;
}
@media screen and (min-width: 1280px) {
	 /*如果使用者之視窗寬度 >= 1280px，將會再載入這裡的 CSS。 電腦*/
/*special_add*/
.special_add .rect_title{
	margin:0px 20px 20px 36px !important;
	width: 86%; 
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.special_add .rect_title > img{
	margin-left:0 !important;
}
.special_add .popular_real1:first-of-type .rect_title{
	margin:40px 20px 20px 36px !important; 
}
.special_add .rect_more,.special_add .rect_return{
	position: absolute;
	top:0;
	right:6.5%;
	margin-top:1%;
	color:#414242;
}
.special_add #content .rect_title{
	margin:0px 20px 20px 36px !important;
}
.special_add .popular_real1:first-of-type .rect_more,.special_add .popular_real1:first-of-type .rect_return{
	margin-top:4% !important;;
}
.special_add .rect_more img,.special_add .rect_return img{
	width: 18px;
	margin-bottom: -3px;
}
.special_add .popular_banner_div{
	margin:0px 18px 25px 18px !important;
}
.special_add .popular_real{
	padding: 1px 40px 20px 40px !important;
}
/*popular_real*/
.popular_real{
	/*padding: 20px 40px 35px 40px;*/
}
.popular_real_new {
	padding: 20px 40px 35px 40px;
}

	.popular_real .rect_title{
		margin-bottom: 10px;
	}

	.popular_real .rect_title img{
		height: 21px;
	}

	.popular_real .rect_more{
		float: right;
		margin-top: 10px;
		color: #414242;
	}

	.popular_real .rect_more img{
		width: 18px;
		height: 18px;
		margin-bottom: -3px;
	}

.popular_real1 .left{
	width: 56%;
	margin-top: 20px;
}
.popular_real1 .rect_title{
	margin-top: 20px;
}
.popular_real1 .right{
	width: 44%;
	margin-top: 20px;
}
.popular_real1 .right .title{
	margin-top: 30px;
}
.popular_real1 .right .detail{
	width: 80%;
}
.popular_real1 .right .icon_group_in{
	width: 40%;
}
.popular_real1 .right .hr{
	margin:10px 0  20px 0;
}
.popular_real1 .right .smark{
	margin-top: 35px;
}
.popular_real1 > .hr{
	margin:40px 0; 
}
.popular_real1 .bottom{
	/*margin: 0 17.5px; */
}
.popular_banner{
	width: 100%;
}
.popular_icon{
	width: 100%;
	text-align: center;
	margin: 20px 0 -20px 0;
}
.popular_icon > img{
	width: 12px;
	margin:0 3px; 
	cursor: pointer;
}
.popular_left_btn{
	width: 35px;
	left:-30px;
	top:80px;
}
.popular_right_btn{
	width: 35px;
	right:-30px;
	top:80px;
}
/*popular_banner_div*/
.popular_banner_div{
	width: 182px;
	/*margin:0px 18px;*/
	margin-right: calc(7% - 30px);
}
.popular_banner_div_sub{
	margin-right: calc(6% - 30px);
	margin-bottom: calc(5% - 30px);
	float: none;
	display: inline-block;
}

	.popular_banner_div_new{
		margin:0px 18px;
	}

.popular_banner_div .detail{
	width:172px;
	padding: 7px 5px;
} 

.popular_banner_div .detail >img{
	width:56px;
	height: 56px;
	border-radius: 28px;
} 
.popular_banner_div .detail .title{
	width:108px;
	margin-left:7px;
} 
.popular_banner_div .detail .smark{
	bottom: 3px;
	width:108px;
	margin-left:63px;
} 
.popular_banner_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 2%;
}
.popular_banner_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 2%;
}
/*popular_real2*/
.popular2_div:nth-of-type(1){
	margin-left: 0px;
}
.popular2_div{
	width:260px;
	box-shadow: 0px 0px 1px #999999;
	margin-left: 21.25px;
	height:385px;
}
.popular2_div .top{
	padding:9% 13% 4% 13%;

}
.popular2_div .icon_group{
	margin-top: 4%;
}
.popular2_div .detail{
	width:172px;
	padding: 7px 5px;
	margin: 2.5% auto; 
} 

.popular2_div .detail >img{
	width:56px;
	border-radius: 28px;
} 
.popular2_div .detail .title{
	width:108px;
	margin-left:7px;
} 
.popular2_div .detail .smark{
	bottom: 3px;
	width:108px;
	margin-left:63px;
} 
.popular2_div .contents{
	margin:0 6% 4% 6%;
	padding-top: 4%;
}
.school_excellent .class_name{
	margin:0 6% 4% 6%;
	padding: 4% 0 3% 0;
}
.school_excellent .popular2_div{
	height:315px !important;
}
/*school*/
.school_real .contents{
	width:940px;
	margin:40px auto 0 auto;
}
/*top*/
.school_real > .top{
	padding: 20px 40px;
} 
.school_real .contents_in1{
	margin-bottom: 20px;
	position: relative;
}
.school_real .contents_in1 .school_table_div .td_l{
	width: 13%;
}
.school_real .contents_in1 .school_table_div .td_r{
	width: 87%;
}
.school_real .contents_in1 .school_house{
	width: 9%;
	margin-bottom:-2%;
}
/*contents_in2*/
.school_real .contents_in2{
	margin-bottom: 20px;
	position: relative;
}
.school_real .contents_in2 .school_left_banner_outer{
	margin-bottom: 20px;
	position: relative;
}
.school_left_banner_outer{
	width: 50%;
	float:left;
}
.school_real .contents_in2 .school_table_div .td_l{
	width: 20%;
}
.school_real .contents_in2 .school_table_div .td_r{
	width: 80%;
}
.school_real .contents_in2 .school_house{
	width: 9%;
	margin-bottom:-2%;
}
.school_real .contents_in2 .school_table_div{
	display: block;
	width: 48%;
	float:left;
	color:#465456;
	line-height: 1.8em;
	margin-left: 2%; 
}
.school_left_banner{
	width: 436px;
	margin:0 auto;
	/*height:188px;*/
	overflow: hidden;
}
.school_left_banner_div{
	width: 188px;
	margin: 0 15px;
	float: left;
}
.school_left_banner_div .fsp_13{
	padding-top: 7px;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
	color:#465456;
}
.school_left_banner_div img{
	display: block;
	width: 100%;
}
.school_left_banner_outer .popular_left_btn{
	left: 15px;
}
.school_left_banner_outer .popular_right_btn{
	right: 15px;
}
	.popular_banner_div_class {
		/*margin-right:0px;*/
		margin: 0px 18px;
	}
}
@media screen and (max-width: 1279px) {
	 /*如果使用者之視窗寬度 <= 1279px，將會再載入這裡的 CSS。手機板*/
/*special_add*/
.special_add .rect_title{
	width: 86%; 
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
	margin-left: 0em;
}
.special_add .rect_title > img{
	margin-left:0 !important;
}

.special_add .rect_more,.special_add .rect_return{
	position: absolute;
	top:0;
	left:87.5%;
	margin-top:0.5%;
	color:#414242;
}
.special_add .rect_return{
	left:85% !important;
}
.special_add .rect_more img,.special_add .rect_return img{
	width: 28%;
	margin-bottom: -6%;
}
/*class_real*/
.popular_real1.class_real .popular_banner_div img{
	width: 50%;
}
.popular_real1.class_real .class_name{
	padding-top: 1%;
}
/*popular_real*/
.popular_real1{
	padding: 0;
	width:98%;
	margin:2% 1%;
}
	.popular_real1 .rect_more{
		float: right;
		margin-top: 10px;
		color: #414242;
	}
	.popular_real1 .rect_more img{
		width: 18px;
		height: 18px;
		margin-bottom: -3px;
	}
.popular_real1 .left{
	width: 100%;
	margin-top: 3%;
}
.popular_real1 .right{
	width: 100%;
	margin-top: 2%;
}
.popular_real1 .right .title{
	margin-top: 1%;
}
.popular_real1 .right .detail{
	width: 90%;
}
.popular_real1 .right .icon_group_in{
	width: 48%;
}
.popular_real1 .right .hr{
	margin:1% 0  3% 0;
}
.popular_real1 .right .smark{
	margin-top: 2%;
}
.popular_real1 > .hr{
	display: none;
}
.popular_real1 .bottom{
	margin: 0; 
}
.popular_banner{
	width: 102%;
	margin-left: -1%;
	margin-top: 3%;
}
.popular_icon{
	display: none;
}
.popular_left_btn{
	width: 11%;
	left:-1%;
	top:0;
	margin-top:19%;
}
.popular_right_btn{
	width: 11%;
	right:-1%;
	top:0px;
	margin-top:19%;
}
/*popular_banner_div*/
.popular_banner_div{
	width: 48%;
	margin:1% 1%;
}

	.popular_banner_div_sub{
		width: 47%;
		float: none;
		display: inline-block;
	}

.popular_banner_div .detail{
	width:92%;
	padding: 4%;
} 
.popular_banner_div .detail >img{
	width:35%;
	border-radius: 4em;
} 
.popular_banner_div .detail .title{
	width:61%;
	margin-left:4%;
} 
.popular_banner_div .detail .smark{
	bottom: 8%;
	width:53%;
	margin-left:37%;
}  
.popular_banner_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 3%;
}
.popular_banner_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 3%;
}
/*popular_real2*/
.popular_real2{
	width:100%;
	padding:1% 0;
}
.popular2_div{
	width:48%;
	box-shadow: 0px 0px 2px #bf4f4f;
	margin: 1%;

}
/*.popular2_div:nth-of-type(1){
	margin-top: 0%;
}
.popular2_div:nth-of-type(2){
	margin-top: 0%;
}*/
.popular2_div .top{
	padding:6% 7% 1% 7%;
}
.popular2_div .icon_group{
	margin-top: 1%;
	color: #7e7e7e;
}
.popular2_div .detail{
	width:92%;
	padding: 4%; 
} 

.popular2_div .detail >img{
	width:35%;
	border-radius: 4em;
} 
.popular2_div .detail .title{
	width:61%;
	margin-left:4%;
} 
.popular2_div .detail .smark{
	bottom: 8%;
	width:53%;
	margin-left:37%;
} 
.popular2_div .contents{
	margin:0% 3% 4% 4%;
	padding-top: 3%;
}
.school_excellent .class_name{
	margin:0% 3% 4% 4%;
	padding: 4% 0 3% 0;
}
/*school*/
.school_real > .top{
	padding: 0;
	width:98%;
	margin:3% 1%;
} 
.school_real .contents_in1{
	width: 100%;
	margin-bottom: 3%;
}
.school_real .contents_in1 .school_table_div .td_l{
	width: 28%;
}
.school_real .contents_in1 .school_table_div .td_r{
	width: 72%;
}
.school_real .contents_in1 .school_house{
	width: 15%;
	margin-bottom:-3%;
}
/*contents_in2*/
.school_real .contents_in2{
	width: 100%;
	margin-bottom: 3%;
}
.school_real .contents_in2 .school_left_banner_outer{
	margin-bottom: 20px;
	position: relative;
}
.school_left_banner_outer{
	width: 100%;
}
.school_real .contents_in2 .school_table_div .td_l{
	width: 22%;
}
.school_real .contents_in2 .school_table_div .td_r{
	width: 78%;
}
.school_real .contents_in2 .school_house{
	width: 9%;
	margin-bottom:-2%;
}
.school_real .contents_in2 .school_table_div{
	display: block;
	width: 100%;
	color:#465456;
	line-height: 1.8em; 
}
.school_left_banner{
	width: 100%;
	margin:0 auto;
	/*height:188px;*/
	overflow: hidden;
}
.school_left_banner_div{
	width: 48%;
	margin: 1% 1%;
	float: left;
}
.school_left_banner_div .fsp_13{
	padding-top: 7px;
	color:#465456;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.school_left_banner_div img{
	display: block;
	width: 100%;
}
.school_left_banner_outer .popular_left_btn{
	left: -5px;
	margin-top:19%;
}
.school_left_banner_outer .popular_right_btn{
	right: -5px;
	margin-top:19%;
}
}
/*特別處理*/
@media screen and (min-width: 750px) and (max-width: 1279px) {
.popular_real1{
	width:98% !important;
}
.popular_real1 .left{
	width: 45% !important;
}
.popular_real1 .right{
	width: 55% !important;
}
.popular_real1 .right .detail{
	width: 90% !important;
}
.popular_real1 .right .detail > img{
	width: 25% !important;
	margin-right: 5% !important;
}
.popular_real1 .right .icon_group{

	width: 70% !important;
	margin-top: 1%;
}
.popular_real1 .right .icon_group_in{
	width: 48% !important;
	margin:1% 1% !important; 
}
.popular_real1 .right .title{
	margin-top: 1%;
}
.popular_real1 .right .hr{
	margin:1% 0  3% 0 !important;
}
.popular_real1 .right .smark{
	margin-top: 2% !important;
}
.popular_real1 > .hr{
	margin:4% 0 2% 0 !important; 
	display: block;
}

}