#subpage_rules .head_title{
	position:absolute;
	top:0;
	background-color:rgba(0,0,0,0.8);
	    z-index: 1;
    width: 100%;
}
#subpage_rules .upper .page:nth-child(1){
	background-image:url(images/subpage1/page0.jpg);
}

#subpage_rules .photo2{
	margin:0 auto;
	max-width:670px;
	width:calc(100% - 20px);
	height:320px;
}


#subpage_rules .simon_yam_video .prestart{
	background-image:url(../images/video_thumb/v1.jpg);
}
#subpage_rules .may_chow_video .prestart{
	background-image:url(../images/video_thumb/v2.jpg);
}
#subpage_rules .vivien_liu_video .prestart{
	background-image:url(../images/video_thumb/v3.jpg);
}


#subpage_rules .kols{
	margin-top:24px;
}

#subpage_rules .other_kol,#subpage_rules .lower {
    margin-bottom: 40px;
}

#subpage_rules .other_kol{
	text-align:center;
	padding:0 18px;
	width:100%;
}
#subpage_rules .other_kol a.active .dark{
	opacity:0.5;
}
#subpage_rules .other_kol a:hover .dark{
	opacity:0;
}
#subpage_rules .other_kol a{
	display:inline-block;
	border:1px solid #3ea9a7;
	position:relative;
	width:196px;
	height:90px;
	padding:2px;
	background-size:cover;
	background-position:center center;
	position:absolute;
}
#subpage_rules .other_kol a:nth-child(1){
	left:0;
}
#subpage_rules .other_kol a:nth-child(2){
	left:calc(50% - 98px);
}
#subpage_rules .other_kol a:nth-child(3){
	right:0;
}
#subpage_rules .other_kol .dark{
	position:absolute;
	width:100%;
	height:100%;
	    top: 0;
    left: 0;
	background-color:rgba(0,0,0,0.8);
}
#subpage_rules .other_kol .title{
	position:absolute;
	width:100%;
	top: 30px;
    left: 0;
	color:#FFF;
}
#subpage_rules .other_kol a[pid=simon_yam]{
	background-image:url(../images/video_thumb/v1.jpg);
}
#subpage_rules .other_kol a[pid=yann_wong]{
	background-image:url(../images/video_thumb/v2.jpg);
}
#subpage_rules .other_kol a[pid=tbc]{
	background-image:url(../images/video_thumb/v3.jpg);
}

#subpage_rules .photo2 td{
	width:50%;
	height:50%;
	vertical-align:top;
}
#subpage_rules .photo2 td a{
	display:block;
	width:100%;
	height:100%;
	background-size:cover;
}
#subpage_rules .video_box {
	margin-bottom:40px;
}

#subpage_rules .kols .caption{
	text-align:center;
	width: calc(100% - 40px);
    margin: -50px auto 20px auto;
    max-width: 600px;
}
#subpage_rules .kols>*:not(.active){
	display:none !important;
}
#subpage_rules .kols table.photo2 {
    border-collapse: collapse;
    border-style: hidden;
}

#subpage_rules .kols table.photo2 td {
    border: 3px solid black;
}

@media screen and (min-width: 768px) {
.change_page_container .pages .page .inner{
	height: calc(100% - 125px);
}
#subpage_rules .middle {
    padding-top: 21px;
    height: 130px;
}
#subpage_rules .photo2{
	height:467px;
	width:668px;
	
}
#subpage_rules .photo2 td a{
	width:339px;
	height:225px;
}
#subpage_rules .photo2 a.long{
	height:461px;
	
    margin-left: 8px;
}
#subpage_rules .other_kol {
    padding: 0 18px;
    width: 760px;
    height: 90px;
    position: relative;
	margin:-40px auto 40px auto;
}
#subpage_rules .other_kol a:nth-child(2) {
    left: calc(50% - 98px);
}
#subpage_rules .twoline {
    top:21px;
}
#subpage_rules .kols .caption{
	margin-bottom:30px;
	max-width:780px
}
#subpage_rules .kols .caption p{
	fz20px
}
}
@media screen and (max-width: 767px) {
#subpage_rules .middle{
	padding-top: 16px;
    height: 100px;
}
#subpage_rules .upper{
	height: 286px;
}
#subpage_rules .other_kol{
    width: calc(100% - 36px);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#subpage_rules .other_kol a:nth-child(2) {
    left: calc(50% - 45px);
}
#subpage_rules .other_kol a{
	/*margin-left:calc((100vw - 30px - 270px) / 2);*/
}
#subpage_rules .other_kol{
    height: 50px;
}
#subpage_rules .other_kol a {
    width: 90px;
    height: 50px;
}
#subpage_rules .other_kol .title {
    top: 15px;
}
#subpage_rules .other_kol .title.twoline {
    top: 10px;
}
}