@charset "utf-8";
/* CSS Document */
*:focus{
    outline:none;
}
.show-grid [class^="col-"] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(86, 61, 124, 0.15);
    border: 1px solid rgba(86, 61, 124, 0.2);
}

.News_Sub_Heading {
    color: #666666;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
    font-size: 0.8125em;
    line-height: 1.6em;
}

.index-margin {
    margin-top: 30px;
}

#headerMenu {
    position: fixed;
    height: 70px;
    display: block;
    z-index: 1000;
    text-align: center;
    color: #000;
    padding: 0;
    top: 0px;
    right: 0px;
}

#headerMenu-logo {
    position: absolute;
    height: 70px;
    display: block;
    text-align: center;
    color: #000;
    padding: 0;
    top: 0px;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.3);
    width: 100%;
}

#fullpage h1 {
    font-weight: 300;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
    font-weight: bold;
    font-size: 2em;
    letter-spacing: 0px;
    line-height: 70px;
    color: #B9480C;
    text-align: left;
}

#fullpage h2 {
    font-weight: 300;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);
    font-size: 1.8em;
    color: #fff;
    margin-top: 20px;
    line-height: 1.5em;
}

body {
    color: #333333;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
    font-size: 15px;
    line-height: 1.5em;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    font-weight: normal;
    line-height: 1;
    color: #614200;
}


h3.subtitle {
    color: #B60808;
    font-size: 1.125em;
    font-weight: bold;
    margin: 20px 0px 5px 0px;
}

.h2bottomline {
    margin: 15px 0;
    border-bottom: 1px dotted #3f625f;
}


h3.social {
    color: #004E9F;
    font-size: 1.125em;
    line-height: 1.25em;
    font-weight: bold;
    margin: 8px 0px 10px 0px;
}




a {
    color: #00529b;
    text-decoration: none;
	overflow-wrap: break-word;
}

a:focus, a:hover {
    color: #00529b;
    text-decoration: underline;
} 


.checkbox, .radio{
margin-top:5px;
margin-bottom:5px;
}


/* --------------  ghost-button ------------------ */
.ghost-button-full-color {
    cursor: pointer;
    display: inline-block;
    padding: 8px 30px;
    color: #1abec7;
    font-weight: bold;
    border: 2px solid #1abec7;
    background-color: #ffffff;
    text-align: center;
    outline: none;
    text-decoration: none;
    border-radius: 8px;
    line-height: normal;
    font-size: 22px;
    margin: 0 15px;
    letter-spacing: 0px;
    position: relative;
    width: 270px;
    transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
}

.ghost-button-full-color:hover,
.ghost-button-full-color:active {
    background-color: #08602a;
    /* border-color: #a5015d; */
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease-in, background-color 0.3s ease-in, border-color 0.3s ease-in;
}

.ghost-button-full-color:visited,
.ghost-button-full-color a:visied,
.ghost-button-full-color a:focus {
    color: #fff;
    text-decoration: none;
}

/* --------------  popup container ------------------ */
#popupDetail {
    transform: scale(0.8);
}

.popup_visible #popupDetail {
    transform: scale(1);
}

.popContainer {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
'    max-width: 1170px;
}

.popContainer p {
    font-weight: 300;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
    font-size: 1.2em;
    color: #fff;
    margin-top: 20px;
    max-width: 700px;
}

.popContain {
    margin: 0 20px;
}

.popContain h1 {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial';
    display: inline;
    font-size: 1.6em;
    font-weight: 300;
    color: #1ABEC7;
}

.popContain ul {
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    list-style-type: disc;
}

.overlayContainer {
    background: #000000;
    max-width: 550px;
}

.contentContainer {
    margin: 0;
    background: #c23600 url(../images/1920-content-bg.jpg) repeat-y;
    background-size: 100%;
    auto;
}


.focuspoint {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
}

.shareBtn {
    padding: 5px 10px;
}

.shareBtn .fa.fa-share-alt {
    font-size: 28px;
    text-shadow: none;
}

.jthumb {
    width: 30%;
}


.jkThumbGrp a {
    display: block;
    margin-bottom: 15px;
    padding: 0 10px;
    color: #B9480C;
}

.jkThumbGrp a img {
    width: 100%;
    padding: 5px;
}

.btnRgp {
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    position: fixed;
    bottom: 0;
    width: 100px;
    display: block;
    text-align: center;
    z-index: 99999;
}

    .btnRgp a {
        color: #fff;
    }

#fp-nav ul li, .fp-slidesNav ul li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    height: 16px;
    margin: 7px;
    width: 14px;
}

body #fp-nav ul li .fp-tooltip {
    opacity: 1;
    width: auto;
    font-size: 12px;
    margin-right: -20px;
}

body #fp-nav ul li a span, .fp-slidesNav ul li a span {
    background: rgba(0, 0, 0, 0.0);
}

.socialBlock {
    float: left;
    width: 28%;
    margin: 1%;
}



div.page {
    background: #ffffff; 
    background-size: 100%;
    auto;
}

html.mm-background body .page.mm-page {
    background: #ffffff;
    background-size: 100%;
    auto;
}

.indexContainer {
    margin: 0;
    background: #eaf6ec url(../images/1920-content-index-bg.gif);
    background-size: 100%;
    auto;
}

.container-fluid {
    padding-right: 20px;
    padding-left: 20px;
    *zoom: 0;
    background: #ffd958 url(../images/container-bg.jpg) repeat;
    padding-top: 20px;
    margin-top: 12px;
    margin-bottom: 15px;
    border-left: 0px solid #000000;
    border-right: 0px solid #000000;
}

.containerBackground {
    *zoom: 0;
/*    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */
    background: rgba(240, 239, 236, 1) none repeat scroll 0px 0px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.content-title-margin {
    margin-top:20px;
    margin-bottom:20px;
}

.heroContainer {
    margin: 0;
}

.heroImg {
    width: 100%;
    margin-top: -35px;
}

.heroImg-insidepage {
    width: 100%;
    margin-top: -35px;
    min-height: 100px;
}

/* EWIN LOGO */
.ewinLogo {
    position: relative;
    float: right;
    width: 170px;
    margin-right: 10px; 
    z-index:1;   
}

.ewin_logo_all {
    float: right;
    height: 73px;
}
.ewin_logo_if {
    top: -10px;
    margin-left: 20px;
    position: absolute;
    bottom: 20px;
    right:20px;
}
.ewin_logo {
    float: left;
    padding-top: 22px;
}

.ewin_logo_if .others {
    padding-top: 15px;
    float: left;
    color: #fff ;
}


.ewin_logo_if .others div {
    height: 12px;
    margin-left:4px;
}

.hkjcLogo {
    display: block;
    margin: 10px 0 ;
    position: absolute;
    z-index: 9999;
}

.hkjcLogo img {
    display: block;
}

.shortcutMenu {
    top: 0;
    right: 120px;
    z-index: 9999;
    color: #999;
    border-radius: 0px 0px 4px 4px;
    position: relative;
    float: right;
}

.shortcutMenu a {
    color: #fff;
    margin: 0px 5px;
    opacity: 1;
    font-weight: 300;
    font-size: 0.875em;
    line-height: 1em;
}

.shortcutMenu a:hover {
    color: #ec0101;
    transition: color 0.3s ease-in, background-color 0.3s ease-in;
    text-decoration: none;
}

.shortcutMenuHeadbar {
    background: none !important;
    top: 42px !important;
}

.shortcutMenuHeadbar a:hover {
    color: #000 !important;
    transition: color 0.3s ease-in, background-color 0.3s ease-in !important;
}

div#nextrace {
    background: rgba(110, 75, 45, 0.01) !important;
}

.footer-container {
	color: #ffffff;
    width: 100%;
    margin: 0;
    padding: 0 -15px !important;
	background-color: #057138;
    background-size: 100% auto;
    background-repeat: repeat-y;
}

.photo_fullwidth img {
    max-width: 100%;
}

/* --------------  RGP style ------------------ */
.rgp-container {
    color: #FFF;
    font-size: 1em;
    text-align: left;
}

a.rgp-text {
    color: #FFF;
    font-size: 1.2em;
}

a.rgp-text:hover {
    color: #fcd63a;
    text-decoration: none;
}

.rgp-container ul li {
    color: #FFF;
    font-size: 0.9em;
    list-style: disc;
}

.footer-margintop {
    bottom: -100px;
}

.container .footer-projectlist ul li {
    list-style: none;
}

.360-view {
    display: none;
}

.mobile-view {
    display: none;
}

/* --------------  panel-default style ------------------ */

.panel-title {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 16px;
    color: inherit;
}

    .panel-title a {
        text-decoration: none;
    }

.panel-default {
    border-color: #ddd;
}

.panel-default > .panel-heading {
    color: #ffffff;
    background-color: #1abec7;
    border-color: #ddd;
}

.panel-default > .panel-heading a:hover {
    color: #ff0420;
}

.panel-default > .panel-heading a {
    color: #ffffff;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}

.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}

.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}

/* --------------  hr style ------------------ */

hr {
    margin-top: 10px;
    margin-bottom: 20px;
    border-right: 0px none;
    border-width: 1px 0px 0px;
    border-style: solid none none;
    /*  border-color: #6f6f6f -moz-use-text-color -moz-use-text-color; */
    border-color: #ccc;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}

/* =========== what's next ============== */
.next-photo {
    border-left: 8px solid #ec8bb9;
    padding-right: 10px;
}

table.next {
    width: 100%;
}

h2.next {
    color: #2c1d18;
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: bold;
    margin: 10px 0px 10px 0px;
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85); */
}

a.next-txt {
    color: #383838;
    font-size: 0.9375em;
    line-height: 1.25em;
    /*  font-weight:bold; */
    margin: 10px 0px 10px 0px;
    text-decoration: underline;
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85); */
}

a:hover.next-txt {
    color: #004E9F;
    font-size: 0.9375em;
    line-height: 1.25em;
    /* font-weight:bold; */
    margin: 10px 0px 10px 0px;
    text-decoration: underline;
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85); */
}


h1.lastest {
    color: #ffffff;
    font-weight: 400;
    font-family: 'open sans', 'arial', "Meiryo", "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "微軟正黑體";
    font-size: 1.5em;
    padding: 10px;
    margin-top: 15px;
    border-left: #ff0000 solid 6px;
    float: left;
}

.social-button {
    /*  bottom: 0%; position: absolute; text-align: right;*/
    display: block;
    margin-top: 15px;
}

/* ========== 2015 hkir 2nd level ========== */
.droplist {
    float: right;
}

.bcLv1 {
    color: #333333;
    border-bottom: 1px solid #b6b6b6;
    margin: 5px 0px;
    font-size: 0.9375em;
    min-height: 40px;
}

.content-bg {
    margin-top: 20px;
    /*margin-top:40px;*/
    /*padding: 10px;*/
    /* background: rgba(255, 255, 255, 1) none repeat scroll 0px 0px;*/
}

/* ========== 2015 hkir race submenu ========== */
.race-submenu {
    font-size: 0.9375em;
    line-height: 2em;
    /*background-position: right center;
    background-color: #696263;*/
    color: #333333;
    padding: 0px;
    margin-bottom: 10px;
}

.race-submenu a {
    color: #333333;
    padding: 7px;
}

.race-submenu a:hover {
    text-decoration: none;
    color: #ffffff;
    background-color: #cc0000;
}

.race-submenu > .active,
.race-submenu > .active {
    padding: 5px;
    text-decoration: none;
    color: #ffffff;
    background-color: #cc0000;
}



/* ========== 2015 hkir index feature ========== */
.feature-date {
    font-size: 0.8125em;
    color: #5a5a5a;
    padding-left: 15px;
}

.feature-index-more {
    font-size: 0.875em;
    line-height: 1.25em;
    color: #b9480c;
}

h3.feature {
    color: #003366;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0px;
    padding-left: 10px;
    border-left: #ff0000 solid 6px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial' ;
    padding-top: 10px;
    font-weight: bold;
}

h3.feature-title {
    color: #003366;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0px;
    padding-left: 10px;
    border-left: #ff0000 solid 6px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", "Meiryo UI", "Meiryo", 'open sans', 'arial' ;
    padding-top: 5px;
    font-weight: 400;
}

.feature-box {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            background: rgba(241, 237, 225, 1) none repeat scroll 0px 0px;
            padding: 0px;

}

.feature-box a:hover{
    color: #003366;
    text-decoration: none;
}

.feature-text {
    color: #2c1d18;
    font-size: 0.9375em;
    line-height: 1.2em;
    text-align:left;
    padding: 5px 15px 5px 0px;
}

.feature-news-box {
    background-color: #cccccc;
    height: 240px;
    margin-bottom: 20px;
}


/* ========== social share & fontChange ========== */
.socialutility {
    float:right;
}

.iconsContainer * {
    /*float: right;*/
    margin-top: 3px;
}

@media all and (max-width: 480px) {
    .iconsContainer * {
        margin-top: 10px;
    }

    .social-float {
        float: left;
    }
}

.social-float {
    float:right;
}

/* fontChange */
body #fontSizeSelecter {
    background: none;
}

#fontSizeSelecter a {
    color: #999999 !important;
}

#fontSizeSelecter a:hover {
    color: #3b3b3b !important;
    ;
    background: none !important;
    transition: .25s ease-out;
    border-radius: 4px 4px 4px 4px;
}

#fontSizeSelecter a.active {
    background: #949494 !important;
    border-radius: 4px 4px 4px 4px;
}

#fontSizeSelecter span {
    color: #333333 !important;
}

/* =========== The Race ============== */
.race-hightlight {
    /*cursor: pointer; */
    display: inline-block;
    padding: 5px 30px;
    width: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.3em;
    /*background-color: transparent;
	background:#ffd958 url(../images/calendar-btn.png) no-repeat;
    background-color: rgba(255, 255, 255, 0.7); */
    background-color: #b20c09;
    /*text-align: center;*/
    outline: none;
    text-decoration: none;
    border-radius: 7px;
    /*margin: 0 15px;*/
    margin: 0 0px;
    letter-spacing: 0px;
    position: relative;
    transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out;
    font-family: "arial","open sans","Meiryo","Meiryo UI","Microsoft JhengHei UI","Microsoft JhengHei","微軟正黑體";
}

table.pastwinnerlist td {
    color: #666;
    border-bottom: 1px solid #666;
    padding: 7px 3px;
}

table.pastwinnerlist th {
    color: #fff;
    border-bottom: 2px solid #666;
    padding: 7px 3px;
    background-color: #B20C09;
}

.racedata {
    width:100%;
}

.cheerbox, .cheerbox h2 {
    color:#fff;

}
.cheerbox ol li {
    font-size:0.8em;
    line-height:1.5em;
    margin-bottom:8px;

}

/* --- 2017 rht next section ---  */
.ContainerMiddle-next {
	background: #0090d2;
	padding: 10px;
}

h2.next {
	font-size: 1.8em;
	font-weight: 700;
	text-align: left;
    color: #ffffff;
	padding-bottom: 10px;	
}

.next-txt {
    /*position: absolute;*/
	/*position: relative; */
    margin-top: 5%;
    margin-left: 2%;
	margin-right: 2%;
}

.next-img-align {
	text-align:right;
}
.next-img {
	width:50%;
}
a.next-link {
	color:#d0f2ff;
}

a.next-link:hover {
    color: #ffffff;
    text-decoration: none;
}

@media(max-width: 1024px) {
	.next-txt {
		margin-top: 3%;
		margin-left: 2%;
	}
}

@media(min-width: 768px) and (max-width: 991px) {
	.next-txt {
		margin-top: -2%;
	}
}


@media (min-width: 551px) and (max-width: 767px){
	.ContainerMiddle-next {
		background: #0090d2;
		padding: 20px 0px;
	}
	.next-img-align {
		text-align: left;
		padding-left:10px;
	}	
	.next-txt {
		margin-top:10px;
		margin-left:10px;
	} 
}

@media (max-width: 550px){
   	.ContainerMiddle-next {
		padding: 0px;
		padding-top: 10px;
	}
	.next-img {
		width:100%;
	}
	.next-txt {
		margin-top: 5%;
		margin-bottom: 5%;
	}
	.next-img-align {
		padding-left:0px;
		padding-right:0px;
	}
	.no-RL-space {
		padding-left:0px;
		padding-right:0px;
	}
	
}

/* -------------- 2017 rht ------------------ */
.caption {
    font-size: 0.8125em;
    color: #5a5a5a;
    line-height: 1.5em;
}

.caption-note {
    font-size: 0.8125em;
    color: #999999;
    line-height: 1.5em;
}

.social-share-bg-1{
	background: #5a903b url("../images/social-share-bg-1.jpg") repeat-x top;
	min-height:180px;
	width:100%;
}
.social-share-bg-2{
	background: #5a903b url("i../mages/social-share-bg-2.jpg") repeat-x top;
	min-height:180px;
}
.social-share-bg-3{
	background: #5a903b url("../images/social-share-bg-3.jpg") repeat-x top;
	min-height:180px;
}
.social-share-message{
	text-align: center;
	padding-top: 40px;
	font-size: 1.1875em;	
}

@media (max-width: 550px){
	.social-share-bg-1{
		background: #5a903b url("../images/social-share-bg-1-mobile.jpg") repeat-x top;
		min-height: 150px;
		width:100%;
	}
	.social-share-bg-2{
		background: #5a903b url("../images/social-share-bg-2-mobile.jpg") repeat-x top;
		min-height: 150px;
	}
	.social-share-bg-3{
		background: #5a903b url("../images/social-share-bg-3-mobile.jpg") repeat-x top;
		min-height: 150px;
	}
	.social-share-message{
		text-align: center;
		padding-top: 35px;
		font-size: 1em;	
		line-height: 1.25em;
	}


}