@charset "utf-8";
/* CSS Document */
 
/*區塊一 real1*/
.real1_div{
	position: relative;
	display: none;
}
.real1_div > .bg{
	position: relative;
	z-index: 0;
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center;
}
.real1_div > .detail{
	z-index: 2;
}
.real1_div > .detail > .title{
	width:100%;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.real1_div > .detail > .smark{
	width:100%;
}

.real1_div > .detail > .icon_group > .icon_group_in:nth-of-type(1){
	margin-top: 0px;
}
.real1_div > .detail > .icon_group > .icon_group_in:nth-of-type(2){
	margin-top: 0px;
}
/*區塊2 real2*/
.real2_div{
	float:left;
	position: relative;
	margin-top:5px; 
	display: none;
}
.real2_div > .bg{
	float:left;
	background-position: center;
	background-size: cover;
}
.real2_div > .bg > .play{
	position: relative;
	background-image: url(../images/video_play.png);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.real2_div > .bg > .play > .time{
	position: absolute;
	right:0px;
	bottom:0px;
	padding:2px 9px;
	font-size: 13px;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.6);
}

.real2_div > .detail{
	float:left;
	position: relative;
	cursor: pointer;
}
.real2_div > .icon_group{
	width: 100%;
	position: relative;
	box-sizing: border-box;
}
.real2_div > .detail > .smark{
	color:#7e7e7e;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.real2_div > .detail .title,.real2_div > .detail .title a{
	color:#0caed7;
}
/*區塊3 real3*/
.real3{
	position: relative;
	width:100%;
}
.real3 > .hidden_box{
	position: relative;
	overflow: hidden;
}
.real3 .detail{
	background: #ffffff;
}
.real3 .title{
	width:100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.real3 .price{
	float:left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.real3 .price_btn{
	float:right;
	color:#FFFFFF;
	background: #0ea2ca;
}

.real3 .icon_group{
	width:100%;
}
.real3 .icon_group_in{
	float:right;
}
.real3_pc .icon_group_in > span > text{
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/*區塊4 real4*/
.real4{
	background-color: #ffffff;
}
.real4_div{
	box-shadow:0px 0px 1px #999999;
	display: none;
}
.real4_div > img{
	width:100%;
	height: 155px;
	display: block;
}
.real4_div .title{
	padding-top: 7px !important;
}
.real4_div .smark{
	color:#414242;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.real4_div > .detail > .bottom{
	position: absolute;
	bottom:0;
	width:100%;
}
.real4_div > .detail{
	position: relative;
	width:100%;
}
.real4_div  .icon_group{
	color:#7e7e7e;
}
/*區塊5 real5*/
.real5_div{
	width:100%;
	background-color: #ffffff;
}
.real5_div:nth-child(even){
	background: #f5f5f5;
}
.real5_div .school{
	color:#7e7e7e;
}
.real5_div .school_right{
	position:relative;
}
.real5_div .hidden_box_pc{
	position: absolute;
}
.real5_div .hidden_box_pc .box{
	float:left;
	position: relative;
}
.real5_div .hidden_box_pc .box > a > .module_bg{
	position: relative;
	display: block;
	z-index: 5;
}
.real5_div .icon_group{
	position: absolute;
	background: rgba(0, 0, 0, 0.6);
	bottom:0px;
	width: 100%;
	padding: 2px 0;
	z-index: 10;
	color:#ffffff;
}
.real5_div .icon_group img{
	width:19.5%;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(1){
	width:47%;
	float:left;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(2){
	width:47%;
	float:right;
	text-align: right;
}
.real5 .hidden_box_other{
	display: none;
}
.real5 .school > .title{
	display: block;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
/*區塊6 real6*/
.real6{
	background: #ffffff;

}
.real6_div{
	box-shadow:0px 0px 1px #999999;
	border-radius: 10px;
	overflow: hidden;
	float:left;
}
.real6_div > img{
	width:100%;
	display: block;
}
.real6_div .detail{
	background-color:#ffffff;
	position: relative;
}

.real6_div .detail >img{
	display: block;
	overflow: hidden;
	float:left;
}
.real6_div .detail .title{
	font-weight: bold;
	float:left;
	color:#414242;
}
.real6_div .detail .smark{
	position: absolute;
	color:#414242;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.real6_div .icon_group{
	background: #eeeeee;
	width: 100%;
	padding: 2px 0;
	color:#7e7e7e;
}
.real6_div .icon_group >.icon_group_in:nth-of-type(1){
	width:47%;
	float:left;
}
.real6_div .icon_group >.icon_group_in:nth-of-type(2){
	width:47%;
	float:right;
	text-align: right;
}
@media screen and (min-width: 1280px) {
	 /*如果使用者之視窗寬度 >= 1280px，將會再載入這裡的 CSS。 電腦*/

/*區塊一 real1*/
.real1{
	background-color: #ffffff;
}
.real1_div{
	float:left;
	width:295.25px;
	height:286px;
	margin-left:8px;
}
.real1_div:nth-of-type(1){
	margin-left:0px;
}
.real1_div > .bg{
	width:295.25px;
	height:286px;
}
.real1_div > .detail{
	position: absolute;
	width: 271.25px;
	background: rgba(70, 84, 86, 0.9);
	bottom:0px;
	padding:10px 12px;
	color:#ffffff;
}
.real1_div > .detail > .title{
	height:25px;
}
.real1_div > .detail > .smark{
	height:20px;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
	margin-top: 5px;
}
.real1_div > .detail > .icon_group{
	width:100%;
	height:34px;
}
.real1_div > .detail > .icon_group > .icon_group_in{
	width:123px;
	margin-top: 5px;
}
.real1_div > .detail > hr{
	color:#ffffff;
}
/*區塊2 real2*/
.real2_div{
	width:398px;
	height:167px;
	margin-left:5.5px;
}
.real2_div > .bg{
	width:210px;
	height:119px;
}
.real2_div > .bg > .play{
	width:210px;
	height:119px;
	background-size: 59px;
}
.real2_div > .detail{
	width:164px;
	background-color: #ffffff;
	padding:10px 12px;
}
.real2_div > .icon_group{
	border-top: 1px solid #e3e3e3;
	padding: 0 5%;
	height:47px;
	background-color: #ffffff;
}
.real2_div > .detail > .star > img{
	width:14px;
	margin-right: -1px;
}
.real2_div > .icon_group > .icon_group_in{
	width:23.5%;
	margin-top: 4%;
}
.real2_div > .icon_group > .icon_group_in:nth-of-type(4){
	width: 28%;
}
/*區塊3 real3*/
.real3{
	height:376px;
	padding-top: 20px;
	background-color: #ffffff;
}
.real3 > .hidden_box{
	width: 1140px;
	height:376px;
	background-color: #ffffff;
	margin:0 auto;
}
.real3_pc_outer_box{
	position: absolute;
	height:376px;
	left:0px;
}
.real3_pc_left_btn{
	position: absolute;
	width: 35px;
	top:170px;
	left:-15px;
	cursor: pointer;
	display: block;
}
.real3_pc_right_btn{
	position: absolute;
	width: 35px;
	top:170px;
	right:-15px;
	cursor: pointer;
	display: block;
}
.real3_pc_outer_box > .real3_box{
	width:435px;
	height: 376px;
	float:left;
	margin-left: 25px;
	color:#414242;
}
.real3_pc_outer_box > .real3_box:nth-of-type(1){
	margin-left: 0px;
}
.real3 .bg{
	width:100%;
	height:240px;
	background-size: 102%;
	background-position: center;
	margin: auto;
}
.real3 .detail{
	width:86%;
	margin: auto;
	padding: 17px 0 11px 0;
}
.real3 .price{
	width:266px;
}
.real3 .price_btn{
	border-radius: 20px;
	padding: 3px 15px 3px 15px;
	margin-top: -4px;
}
.real3 .price_div{
	margin-top: 12px;
}
.real3 .icon_group{
	margin-top: 12px;
}
.real3 .icon_group_in:nth-of-type(1){
	margin-left:15px;
}
.real3 .icon_group_in > span > text{
	max-width:57px;
	margin:0 3px -4px 0px;
}
/*區塊4 real4*/
.real4{
	width:1016px;
	padding:14px 94.5px;
}
.real4_div{
	width:240px;
	margin:7px;
	float:left;
}
.real4_div .title , .real4_div .smark , .real4_div  .icon_group{
	padding: 0px 15px;
	color:#414242;
}
.real4_div .title{
	width:210px;
	font-weight: bold;

}
.real4_div .smark{
    width:210px;
}
.real4_div  .icon_group{
	margin-top:2px;
	padding-top: 3px;
	padding-bottom: 3px;

}
.real4_div .icon_group_in{
	width:50%;
}
/*區塊5 real5*/
.index_half1{
	width:34% !important;
}
.index_half2{
	width:36% !important;
}
	.index_half3{
		width:26% !important;
	}
.real5_div{
	width:100%;
}
.real5_div .school{
	width: 110px;
	height:125px;
	float:left;
	text-align: center;
}
.real5_div .school img{
	width:70px;
	height: 70px;
	display: block;
	margin:20px auto 0 auto;
}
.real5_div .school_right{
	width: 297px;
	height:125px;
	float:left;
}
.real5_div .hidden_box_pc{
	top:19px;
	left:2px;
	width: 451px;
	height:85px;
}
.real5_div .hidden_box_pc .box{
	margin: 0 3.5px;
}
.real5_div .hidden_box_pc .box > a > .module_bg{
	width: 140px;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 2%;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 2%;

}
/*區塊6 real6*/
.real6{
	padding:1px 19px;
}
.real6_div{
	width: 182px;
	margin:23.5px 5px;
}
.real6_div .detail{
	width:172px;
	padding: 7px 5px;
}

.real6_div .detail >img{
	width:56px;
	border-radius: 28px;
}
.real6_div .detail .title{
	width:108px;
	margin-left:7px;
}
.real6_div .detail .smark{
	bottom: 3px;
	width:108px;
	margin-left:63px;
}
.real6_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 2%;
}
.real6_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 2%;
}
/*otto2特別處理*/
.otto2_page .hidden_box_pc > .outer_box .box:nth-of-type(n+8){
	display: none;
}
.otto2_page .hidden_box_pc{
	width: 1100px;
}
}
@media screen and (max-width: 1279px) {
	 /*如果使用者之視窗寬度 <= 1279px，將會再載入這裡的 CSS。手機板*/
/*區塊一 real1*/
.real1_div{
	width:100%;
	margin-top: 3px;
	background-color:#ededed;
	color:#4c4747;
}
.real1_div:nth-of-type(1){
	/*margin-left:0px;*/
}
.real1_div > .bg{
	float:left;
	width:35%;
	padding-top: 33%;
}
.real1_div > .detail{
	position: relative;
	float:left;
	width: 57%;
	padding:0% 4%;
}
.real1_div > .detail > .title{
	color:#0caed7;
	margin-top: 1%;
}
.real1_div > .detail > .smark{
	margin-top: 0%;
}
.real1_div > .detail > .icon_group{
	width:88%;
	margin:0 auto;
	position: absolute;
	bottom:3%;
	/*background-color: #000000;*/
}
.real1_div > .detail > .icon_group > .icon_group_in{
	width:50%;
	margin-top: 1%;
}
.real1_div > .detail > .icon_group > .icon_group_in > span{
	margin:0 1%;
}
.real1_div > .detail > hr{
	color:#c8c8c8;
	position: absolute;
	bottom:32%;
	width:88%;
}
/*區塊2 real2*/
.real2_div{
	width:100%;
	background-color:#ededed;
}
.real2_div > .bg{
	width:35%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 168%;
}
.real2_div > .bg > .play{
	width:100%;
	padding-top: 95%;
	background-size: 38%;
}
.real2_div > .detail{
	width: 57%;
	height:99px;
	padding:0% 4%;
}
.real2_div > .icon_group{
	padding: 1% 5%;
	background-color: #414242;
}
.real2_div > .detail > .star{
	width:100%;
	position: absolute;
	bottom:8%;
}
.real2_div > .detail > .star > img{
	width:6%;
	margin-right: -0.5%;
}
.real2_div > .detail > .smark{
	margin-top: 4%;
}
.real2_div > .icon_group > .icon_group_in{
	width:23%;

}
.real2_div > .icon_group > .icon_group_in:nth-of-type(4){
	width:31%;
}
.real2_div > .icon_group > .icon_group_in > span{
	margin:0 2%;
}
.real2_div > .detail > .title{
	margin-top: 2%;
}
/*區塊3 real3*/
.real3 > .hidden_box{
	width: 100%;
}
.real3_pc_outer_box{
	position: relative;
	width:100%;
	z-index: 0;
}
.real3_phone_outer_box > .real3_box{
	top:0;
	width:100%;
	background-color: #eeeeee;
	color:#414242;
	position: absolute;
	z-index: 0;
}
.real3 .bg{
	width:67%;
	padding-top:46%;
	background-size: 127%;
	background-position: center;
	margin:0 auto;
}
.real3 .detail{
	width:80%;
	padding: 2% 10% 2% 10%;
}
.real3 .title{
	text-align: center;
}
.real3 .price_btn{
	border-radius: 1em;
	padding: 0.05em 0.7em 0.15em 0.7em;
	margin-top: -1%;
}
.real3 .price_div{
	margin-top: 3%;
}
.real3 .icon_group{
	margin-top: 3%;
}
.real3 .icon_group_in{
	width:50%;
	text-align: center;
}
.real3 .icon_group_in:nth-of-type(1){
	margin-bottom: 5%;
}
/*.real3 .icon_group_in > img{
	margin-bottom: -4%;

}*/
.real3 .icon_group_in > span {
	margin-bottom: 0%;
}
.real3_pc .icon_group_in > span > text{
	margin:0% 2% -2% 0px;
}
.real3_phone_left_btn{
	position: absolute;
	width: 11%;
	margin-top: 16%;
	left:2%;
	z-index: 5;
	cursor: pointer;
	display: block;
}
.real3_phone_right_btn{
	position: absolute;
	width: 11%;
	margin-top: 16%;
	right:2%;
	z-index: 5;
	cursor: pointer;
	display: block;
}
.real3_show{
	z-index: 1 !important;
}
.real3_phone_outer_box > .box_height{
	top:0;
	position: relative;
	padding-top: 74%;
}
/*區塊4 real4*/
.real4{
	width:100%;
	padding-top:1%;
}
.real4_div{
	width:48%;
	margin:1%;
	float:left;
}
.real4_div .title{
	color:#0ea2ca;
}
.real4_div .title , .real4_div .smark , .real4_div  .icon_group{
	padding: 0px 5%;
}
.real4_div .smark{
	text-align: center;
}
.real4_div  .icon_group{
	color:#7e7e7e;
	margin-top:1%;
	padding-top: 1%;
	padding-bottom: 1%;
}
.real4_div .icon_group_in:nth-of-type(1){
	width: 47%;
}
.real4_div .icon_group_in:nth-of-type(2){
	width: 53%;
}
/*區塊5 real5*/
.real5{
	width:100%;
	padding-top:1%;
}
.real5_div .school{
	width: 98%;
	margin: 1% 1% 2% 1%;
}
.real5_div .school img{
	width:12.6%;
	margin-bottom: -1%;
}
.real5_div .school_right{
	width: 100%;
	padding-top: 21%;
}
.real5_div .hidden_box_pc{
	top:0px;
	left:0px;
	width:100%;

}
.real5_div .hidden_box_pc .box{
	margin: 0 1%;
	width: 31.3%;
}
.real5_div .hidden_box_pc .box > a > .module_bg{
	width: 100%;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 3%;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 3%;
}
.real5 .hidden_box_other{
	display: none;
}
/*區塊6 real6*/
.real6{
	width:100%;
	padding-top:1%
}
.real6_div{
	width: 48%;
	margin:1% 1%;
}
.real6_div .detail{
	width:92%;
	padding: 4%;
}
.real6_div .detail >img{
	width:35%;
	border-radius: 4em;
}
.real6_div .detail .title{
	width:61%;
	margin-left:4%;
}
.real6_div .detail .smark{
	bottom: 8%;
	width:53%;
	margin-left:37%;
}
.real6_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 3%;
}
.real6_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 3%;
}
/*otto2特別處理*/
.otto2_page .hidden_box_pc > .outer_box .box:nth-of-type(n+4){
	display: none;
}
}
@media screen and (max-width: 750px) {
.hide_750{
	display: none;
}
/*區塊5 real5*/
.real5 .hidden_box_pc{
	display: none !important;
}
.real5 .hidden_box_other{
	display: block !important;
}
/*區塊5 real5*/
.index_half1 .group_in{
	width: 102%;
	margin-left: -1%;
}
.real5{
	width:100%;
	padding-top:1%;
}
.real5_div{
	border-top: solid 1px #7e7e7e;
}
.real5_div:nth-of-type(1){
	border-top: 0;
}
.real5_div .school{
	width: 98%;
	margin: 1% 1% 2% 2%;
}
.real5_div .school img{
	width:12.6%; 
	margin-bottom: -1%;
}
.real5_div .school_right{
	width: 100%;
	padding-top: 165px;
}
.real5_div .hidden_box_other{
	position: absolute;
	top:0px;
	left:2%;
	width:100%;
	overflow: hidden;
	overflow-x: scroll;
}
.real5_div .hidden_box_other .outer_box{
	position: relative;	
	/*width: 1020px;*/
}
.real5_div .hidden_box_other .box{
	margin: 0 5px 0 0;
	float:left;
	position: relative;
	overflow: hidden; 
	width:200px;
}
.real5_div .hidden_box_other .box > a > .module_bg{
	position: relative;
	display: block;
	width: 250px;
	z-index: 5;
	margin-left: -25px;
	padding-top: 76%;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(1){
	margin-left: 3%;
}
.real5_div .icon_group >.icon_group_in:nth-of-type(2){
	margin-right: 3%;
}	

}

.hide {
	display: none;
}