@charset "utf-8";
/* CSS Document */
.my_real > .bottom{
	background-color: #adcfcb;
}
.my_real .white{
	background-color: #ffffff;
	position: relative;
}
.my_real .cabinet{
	width:100%;
	background-image: url(../images/box_body.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
}
.my_real .cabinet:nth-of-type(1){
	margin-top: 0px;
}
.my_real .cabinet img{
	display: block;
	position: absolute;
	bottom: 0px;
	width: 100%;
	z-index: 1;
}
.my_real .content_box{
	width:100%;
	position: relative;
}
.my_real .outer_cabinet{
	position: relative;
	z-index: 1;
}
.my_real .outer_box{
	position: absolute;
	z-index: 5;
	top:0px;
	left:0px;
}
.my_real .box > img{
	position: absolute;
	top:-7%;
	left:-9%;
	z-index: 5;
}
.my_real .box{
	float:left;
}

.my_real .box_in{
	position: relative;
	background-color: #ffffff;
	overflow: hidden;
	z-index: 10;
}
.my_real .bg{
	background-position: center;
	background-repeat: no-repeat;
}
.my_real .play{
	position: relative;
	background-image: url(../images/video_play.png);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	width:100%;
}
.my_real .detail{
	text-align: center;
	color:#414242;
}
.my_real .smark{
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.my_real .title{
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.my_real .date{
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.my_real .bottom .hr{
	color:#eeeeee;
	width:76%;
}
.my_real .features{
	width: 56%;
}
.my_real .features .btn{
	width: 50%;
	margin:0 auto;
	text-align: center;
	float:left;
	cursor: pointer;
	color:#414242;
}
.my_real .features .btn img{
	width: 53%;
	display: block;
	margin:0 auto;
}
.my_real .features .share img {
	width: 70%;
}
.my_real .features .wechat{
	float: none;
}
.my_real .bottom .icon_group{
	background: #eeeeee;
	color:#7e7e7e;
}
.my_real .bottom .icon_group_in{
	width:33.33%;
	text-align: center;
}
/*top*/
.my_real > .top{
	background-color: #ffffff;
}
.my_real .contents_in >img{
	border-radius: 50%;
	display: block;
}
.my_real .contents_in{
	float:left;
	color:#414242;
}
.my_real .contents_in_top > span{
	display: inline-block;
	overflow: hidden;  /*超出範圍的部分隱藏*/
	white-space: nowrap;  /*不自動斷行*/
	text-overflow: ellipsis;  /*出現省略號*/
}
.my_real .top .icon_group{
	display: inline-block;
	float:right;
	color:#7e7e7e;
}
.my_real .icon_group_in .hr{
	width:33.33%;
}
.my_real .status ul{
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	padding:0 1.3em 0 1.3em;
}
@media screen and (min-width: 1280px) {
	/*如果使用者之視窗寬度 >= 1280px，將會再載入這裡的 CSS。 電腦*/
	.my_real .box.pcmt{
		margin-top: 108px !important;
	}
	.my_real > .bottom{
		padding: 57.5px 57.5px 0 57.5px;
	}
	.my_real .white{
		padding: 35px;
	}
	/*別設定頁籤下的外距*/
	.my_real .cabinet{
		margin-top: 40px;
		height:388px;
	}
	.my_real .box{
		margin: 50px 0 0 70px;
		position: relative;
	}
	.my_real .box > img{
		width: 128%;
	}
	.my_real .box_in{
		width: 245px;
		border-radius: 20px;
		height:320px;
	}
	.my_real .bg{
		height:135px;
		width:100%;
		background-size: 100%;
	}
	.my_real .play{
		height:135px;
		background-size: 59px;
	}
	.my_real .detail{
		width: 95%;
		margin:0 auto;
	}
	.my_real .smark{
		margin-top:3.5%;
	}
	.my_real .title{
		margin-top:2%;
	}
	.my_real .date{
		margin-top:1%;
	}
	.my_real .bottom .hr{
		margin:4% auto 1% auto;
	}
	.my_real .features{
		margin: 10% auto 0 auto;
	}
	.my_real .features .btn{
		line-height: 2em;
	}
	.my_real .bottom .icon_group{
		width: 90%;
		padding: 2px 5%;
		position: absolute;
		bottom:0;
	}
	/*top*/
	.my_real > .top{
		padding: 20px 40px;
	}
	.my_real .contents{
		width:940px;
		margin:40px auto 0 auto;
	}
	.my_real .contents_in >img{
		width: 150px;
		position: absolute;
		left:-210px;
	}
	.my_real .contents_in{
		width: 730px;
		min-height:200px;
		margin-left: 210px;
		margin-bottom: 20px;
		position: relative;
	}
	.my_real .contents_in_top > span{
		margin-right: 20px;
	}
	.my_real .contents_in_top > span:nth-of-type(1){
		max-width:192px;
	}
	.my_real .contents_in_top > span:nth-of-type(2){
		max-width:300px;
	}
	.my_real .top .icon_group{
		width: 230px;
	}
	.my_real .contents_in_top .icon_group_in{
		width:33.33%;
	}
	.my_real .contents_in_top{
		width: 100%;
		position: relative;
	}
	.my_real .contents_in_top .icon_group{
		position: absolute;
		right:0;
		bottom:5px;
	}
	.my_real .status{
		margin-top:15px;
	}

}
@media screen and (max-width: 1279px) {
	/*如果使用者之視窗寬度 <= 1279px，將會再載入這裡的 CSS。手機板*/
	.my_real > .bottom{
		padding: 3% 3% 0 3%;
	}
	.my_real .white{
		padding: 2%;
	}
	.my_real .cabinet{
		margin-top: 1%;
		padding-top: 48.5%;
	}
	.my_real .outer_box{
		width:95%;
		padding:0 2.5%;
	}
	.my_real .box > img{
		width: 123%;
	}
	.my_real .box{
		margin: 0% 0.5%;
		width:94%;
		position: absolute;
		top:1px;
	}

	.my_real .box_in{
		width: 100%;
		border-radius: 0.5em;
	}
	.my_real .bg{
		width:39%;
		background-size: 164%;
		float:left;
	}
	.my_real .play{
		padding-top: 98%;
		background-size: 38%;
	}
	.my_real .detail{
		float:left;
		width: 61%;
	}
	.my_real .smark{
		margin-top:3%;
	}
	.my_real .title{
		margin-top:0.5%;
	}
	.my_real .date{
		margin-top:0.5%;
	}
	.my_real .bottom .hr{
		margin:3% auto 3% auto;
	}
	.my_real .features{
		margin: 8% auto 0 auto;
	}
	.my_real .features .btn{
		line-height: 1.5em;
	}
	.my_real .bottom .icon_group{
		width: 97%;
		padding: 1% 1.5%;
	}
	/*top*/
	.my_real > .top{
		padding: 0;
		width:98%;
		margin:3% 1%;
	}
	.my_real .contents_in >img{
		width: 33%;
		float:left;
		margin-right: 4%;
	}
	.my_real .contents_in{
		width: 100%;
		margin-bottom: 3%;
	}
	.my_real .contents_in_top > span{
		width:100%;
	}
	.my_real .contents_in_top > span:nth-of-type(2){
		width:100%;
		margin-bottom: 1%;
	}
	.my_real .top .icon_group{
		width: 100%;
		margin-bottom: 1%;
	}
	.my_real .contents_in_top{
		width: 63%;
		float: left;
		margin-top:2%;
	}
	.my_real .contents_in_top .icon_group{
		width:100%;
	}
	.my_real .contents_in_top .icon_group_in{
		width:33.33%;
	}
	.my_real .status{
		margin-top:1%;
		width: 63%;
		float:left;
	}


}

@media screen and (max-width: 600px) {
	.my_real .smark{
		margin-top:3%;
	}
	.my_real .title{
		margin-top:0%;
	}
	.my_real .date{
		margin-top:0%;
	}
	.my_real .bottom .hr{
		margin:3% auto 3% auto;
	}
	.my_real .features{
		margin: 6% auto 0 auto;
	}
	.my_real .features .btn{
		line-height: 1.5em;
	}
}
@media screen and (max-width: 350px) {
	.my_real .box{
		width:94%;
	}
	.my_real .smark{
		margin-top:2%;
	}
	.my_real .title{
		margin-top:0%;
	}
	.my_real .date{
		margin-top:0%;
	}
	.my_real .bottom .hr{
		margin:2% auto 2% auto;
	}
}