body{
	font-family: "Arial", "Microsoft JhengHei", Serif;
	font-size: 15px;
	background: #f2f2f2;
}

h1 img{width: 100%;margin-top: -10px;	}

h2{margin-top: 0;}

h3{
	font-weight: bold;
	color: #7c5527;
}

ul{
	list-style: none;
	padding-left: 0;
}

.web-none{
	display: none;
}

.fl{
	float: left;
}

.fr{
	float: right;
}

a {
    color: #767676;
    text-decoration: none;
}

a:hover {
    color: #767676;
    text-decoration: none;
}

table a {
    color: #337ab7;
}

.fb-link{
    color: #337ab7;
    display: inline-block;
    margin: 0 3px;
    padding:2px 5px;
    border: 1px solid #337ab7;
}

.fb-link:hover{
	background-color: #337ab7;
	color: #fff;
}

.down, .fall{
	color: #d51a23;
}

.up, .rise{
	color: #459f22;
}

.date{
	color: #27627c;
}

.header{
	background: #fff;
}

.chart-part .down, .chart-part .up{
	font-weight: bold;
}

.btn.btn-default{
	border-radius: 0;
	/* width: 150px; */
	background: #ad7f49;
	color: #ffffff;
	border-color: #ad7f49;
}

.btn-default:active:hover{
	background: #9a6d38;
	color: #ffffff;
	border-color: #9a6d38;	
}

.btn.online-btn{
	width: 200px;
	background: #27627c;
	color: #ffffff;
	border-color: #27627c;
}

.btn.online-btn:active:hover{
	background: #1d566f;
	color: #ffffff;
	border-color: #1d566f;	
}

.search_number .form-group .form-control{
	float: left;
    width: 250px;
}

.search_number .form-group input{
	border-radius: 0;
}

.search_number .form-group .btn{
	margin-left:0;
	height: 34px;
	width: 40px;
}

.carousel img{
	width: 100%;
}

.carousel{
	height: 500px;
	overflow: hidden;
}

.menu{
	position: absolute;
	top: 87px;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 5px 10px #00000085;
	border-top: 1px solid #e6e6e6;
}

.menu .nav > li{
	width: 158px;
	text-align: center;
}

.menu .nav > li > a:hover, 
.menu .nav > li > a:focus {
    text-decoration: none;
    background-color: #e0e0e0;
}

.navbar-toggle{
	margin-right: 0;
}

.lang .active{
	background: #ad7f49;
	border-radius: 50%;
}

.lang li{
	padding: 5px 9px;
	text-align: center;
}

.lang .active a{
	color: #fff;
}

.disclaimer{
	margin-top: 10px;
}

.table > thead > tr > th, 
.table > tbody > tr > th,  
.table > thead > tr > td, 
.table > tbody > tr > td{
	border-top: 0;
}

.table > tbody > tr > th, 
.table > thead > tr > th{
	color: #27627c;
}

td.date{
	width: 20%;
}

.nav-tabs .active{
	margin-bottom: 0;
}

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {
    color: #ad7f49;
    border: none;
    border-bottom: 2px solid #ad7f49;
}

.nav-tabs > li > a:hover {
    border-radius: 0;
}

.navbar{
	margin-bottom: 0;
}

.nav-tabs li a{
	margin-left: 20px;
}

.top-five{
	padding-top: 15px;
}

.table_list .btn{
    width: 70px;
}

.tab-content #datacontent .time{
	padding-left: 5px;
}

.table_list .btn:active, 
.table_list .btn.active {
    color: #ffffff;
    background-color: #ad7f49;
    border-color: #ad7f49;
    border-radius: 0;
}

.table_list .btn.active::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #ad7f49 transparent transparent transparent;
    position: absolute;
    bottom: -6px;
    left: 44%;
}

.table_list{
	position: absolute;
    top: 10px;
    right: 30px;	
}

.online-login{
	border: 1px solid #ddd;
	/* min-height: 380px; */
}

.online-login img{
	width: 100%;
}

.chart-part {
    margin-top: -225px;
    z-index: 1000;
    position: absolute;
    width: 100%;
}

.chart-part .container{
    background: url(../images/index-bg.png) repeat;
	padding: 30px 0;
   -moz-box-shadow:    inset 0 0 20px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
   box-shadow:         inset 0 0 20px rgba(0, 0, 0, 0.4); 
}

.hsi, .hscei{
	overflow: hidden;
}

.chart-part h3{
	margin-top: 0;
	color: #fff;
}

.chart-part img{
	float: left;
}

.chart-part .hsi-content, 
.chart-part .hscei-content{
	float: left;
	padding-left: 30px;
	color: #fff;
}

.chart-part .col-md-6{
	border-right: 1px solid #fff;
	padding-left: 30px;
}

.chart-part .col-md-6:last-child{
	border-right: none;
}

.chart-part .time{
	font-size: 12px;
	color: #cccccc;
}

.time{
	font-size: 12px;
}

.news-part {
    box-shadow: 0 5px 20px #d4d4d4;
    padding: 30px 0;
    z-index: 1000;
    position: relative;
    background: #fff;
}

.news-stock{
	background: #f2f2f2;
	padding: 30px 0;
}

.main_time{
	background: #ffffff;
	box-shadow: 0 0 20px #d4d4d4;
	padding-top: 30px;
	overflow: hidden;
}

.main_time h3{
	margin-top: 0;
	padding-left: 20px;
}

.top-five{
	background: #ffffff;
	box-shadow: 0 0 20px #d4d4d4;
	overflow: hidden;
}

.up .glyphicon-triangle-top {
    display: initial;
}

.up .glyphicon-triangle-bottom {
    display: none;
}

.banner{
	width: 100%;
	height: 400px;	
}

.banner h2{
	color: #fff;
    background: url(../images/index-bg.png) repeat;
    width: 100%;
    margin-top: 327px;
    padding: 20px 30px;
}

.banner .container{
	overflow: hidden;
	padding: 0;
}

/* .quote-banner{
	background: url(../images/banner01.jpg) no-repeat center;
	background-size: cover;
}

.top20-banner, .new-stock-banner{
	background: url(../images/banner02.jpg) no-repeat center;
	background-size: cover;	
}

.news-banner{
	background: url(../images/banner03.jpg) no-repeat center;
	background-size: cover;
}

.about-banner{
	background: url(../images/banner04.jpg) no-repeat center;
	background-size: cover;
}

.oa-banner, 
.service-banner, 
.stock-banner, 
.download-banner{
	background: url(../images/banner05.jpg) no-repeat center;
	background-size: cover;
}

.contact-banner{
	background: url(../images/banner06.jpg) no-repeat center;
	background-size: cover;
} */

.inline-page{
	padding: 0;
}

.inline-page .container{
	background: #fff;    
	box-shadow: 0 0 20px #d4d4d4;
	padding: 30px 15px;
	margin-bottom: 30px;
}

.quote-header{
	padding: 0 30px;
}

.quote-content .tab-content{
	padding: 30px;
}

.quote-content .tab-content img{
	width: 100%;
}

.quote-bottom{
	padding: 30px 15px;
	overflow: hidden;	
}

.quote-bottom h3{
	margin-top: 0;
}

.number_list{
	overflow: hidden;
	background: #f2f2f2;
	border: 1px solid #ddd;
	margin-bottom: 0;
}

.number_list li{
	padding: 15px 30px;
	border-right: 1px solid #ddd;
	color: #737373;
    font-weight: bold;
    font-size: 28px;
}

.number_list h4{
    color: #27627c;
    font-weight: bold;
    margin-bottom: 0;
}

.top20-content, .new-stock-content{
	position: relative;
	padding: 0 30px 30px 30px;
}

.top20-content .table_list {
    top: 0;
}

.exotic-link{
	float: right;
	font-size: 0.7em;
	color: #a5a5a5;
}

.exotic-link:focus, .exotic-link:active{
    color: #767676;
    text-decoration: none;
}

.exotic-link .glyphicon{
	font-size: 14px;
	margin-left: 5px;
}

.news-content, .terms-content{
	padding:0 30px;
}

.pagination a{
	font-size: 14px;
}

.pagination > li > a, 
.pagination > li > span{
    border: 1px solid #ffffff;    
    padding: 3px 9px;
}

.news-content .date{
	font-size: 0.9em;
}

.quote-header .time{
	margin-top: 10px;
}

.about-content, 
.oa-content, 
.service-content, 
.contact-content, 
.stock-content, 
.download-content{
	padding: 0 30px;
}

.download-content .table tr{
	border-bottom: 1px solid #ddd;
}

.number-content{
	padding: 0 30px;
}

.inline-page .pager li > a {
    border: none;
    border-radius: 0;
    padding: 3px 8px;
}

.pager li > a, .pager li > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
}

.inline-page .pager .pgEmpty a, 
.inline-page .pager .pgEmpty a:hover {
    cursor: text;
    background: none;
    border-radius: 0;
}

.choose_active a, 
.inline-page .pager li .current {
    background-color: #337ab7;
    border-color: #337ab7;
    color: #fff;
    border-radius: 0;
}

.top-five.card .last_update{
	margin-left: 5px;
}

.last_update{
	font-size: 13px;	
}

footer{
	background: #555555;
	color: #fff;
	padding: 20px 0 13px 0;

	font-size: 13px;
}

footer a{
	color: #3da0ca;
}

.prompt{
	font-size: 13px;
	color: #ad7f49;
}

.pager{
	margin: 0;
}

#top20 .nav-tabs li:first-child a {
    margin-left: 0;
}

/*responsive moblie css=======================================================================================================*/

/*for ipad*/
@media all and (min-width: 768px) and (max-width: 1024px) {
	.banner {
	    height: 250px;
	}
	.banner h2{
	    margin-top: 177px;
	}
	.menu{
	    top: 104px;
	}
	.navbar-collapse{
		padding: 0;
	}
	.nav > li > a{
	    padding: 10px 0;
	}
	.menu .nav > li{
		width: 100px;
	}
	.disclaimer {
	    margin-top: 20px;
	    margin-bottom: 20px;
	}
	.chart-part{
		margin-top: -195px;
	}
	.chart-part .container{
		padding: 15px 0;
	}

	.chart-part .col-md-6{
		padding: 0 15px;
	}
	.chart-part img{
		width: 50%;
	}
	.chart-part .hsi-content, 
	.chart-part .hscei-content{
		padding-left: 15px;
	}
	td.date{
		width: 30%;
	}
	.top-five {
	    padding-top: 60px;
	}
	.table_list {
	    top: 20px;
	}
	.online-login {
	    height: auto;
	}
	.navbar{
		min-height: auto;
	}
	.number_list li {
	    padding: 15px 15px;
	}
	.quote-header{
		padding: 0 15px;
	}
	.quote-header .time{
		margin-top: 10px;
	}
	.top20-content .table_list {
	    top: -10px;
	}
	.pagination{
		margin: 0;
	}
	.quote-bottom {
	    padding: 30px 15px 0 15px;
	    overflow: hidden;
	}
	.quote-bottom .table{
		margin-bottom: 0;
	}
	.quote-content .tab-content {
	    padding: 30px 15px;
	}
	.inline-page .container{
		margin-bottom: 10px;
	}
	#HKEX_news td a{
	    word-break: break-all;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    max-width: 315px;
	    width: 100%;
	    float: left;
	}
	#datacontent .tab-content .last_update{
		font-size: 14px;
		margin-left: 5px;
		margin-bottom: 10px;
	    display: block;
	}	
	.news-part .nav-tabs li a {
	    margin-left: 9px;
	}
	.top-five #stock th:nth-child(2), 
	.top-five #warrant th:nth-child(2), 
	.top-five #cbbc th:nth-child(2){
		min-width: 120px;
	}
	.top-five #stock th:nth-child(4), 
	.top-five #warrant th:nth-child(4), 
	.top-five #cbbc th:nth-child(4){
		min-width: 80px;
	}
	.top-five #stock th:nth-child(5), 
	.top-five #warrant th:nth-child(5), 
	.top-five #cbbc th:nth-child(5){
		min-width: 110px;
	}
	.main_time th:first-child{
		min-width: 121px;
	}
	.table_list{
		right: auto;
		left: 25px;
	}
	#top20 .table_list{
		right: 0;
		left: auto;
	}
	#top20 .nav-tabs li:first-child a {
	    margin-left: 0;
	}
}

/*for mobile*/
@media all and (min-width: 320px) and (max-width: 767px) {
	h1{
		margin-top: 10px;
	}
	.mobile-hide{
		display: none;
	}
	.web-none{
		display: block;
	}
	.chart-part .container{
		padding: 15px;
	}
	.search_number .form-group .input-group {
		overflow: hidden;
	}
	.search_number .form-group .form-control {
	    float: left;
	    width: 100%;
	    margin-bottom: 15px;
	}
	.search_number .form-group .btn {
	    margin-left: -40px;
	    z-index: 100;
	    position: absolute;
	}
	.menu {
	    position: inherit;
	}
	.menu .navbar-toggle .icon-bar{
	    background: #ac7f49;
	}
	.menu .nav > li {
	    width: auto;
	    text-align: left;
	}
	.navbar-toggle{
		border: 1px solid #ab7e4942;
	}
	.chart-part .nav-tabs {
	    border-bottom: none;
	    margin-bottom: 15px;
	}
	.chart-part .nav-tabs > li > a{
		color: #ad7f49;
	}
	.chart-part .nav-tabs .active a{
	    background: #ad7f49;
	    color: #fff;
	}
	.chart-part .nav-tabs > li.active > a, 
	.chart-part .nav-tabs > li.active > a:hover, 
	.chart-part .nav-tabs > li.active > a:focus{
	    background: #ad7f49;
	    color: #fff;		
	}
	.search_number .form-group{
		margin-bottom: 0;
	}
	.search_number .input-group {
		width: 100%;
	}
	.chart-part .nav-tabs a{
	    margin-left: 0;
	    border-radius: 0;
	}

	h1 img {
	    width: 100%;
	    display: block;
	    margin: 0 auto;
	}
	.input-group {
		display: block;
		margin: 0 auto;
		width: 345px;
	}
	.carousel {
	    height: auto;
	}
	.chart-part{
		margin-top: 0;
    	z-index: 1;
     	position: inherit; 
	}
	.chart-part .hsi-content, 
	.chart-part .hscei-content {
	    float: left;
	    padding-left: 0;
		padding-top: 20px;
	}
	.table_list .btn {
	    width: 66px;
	}
	.online-login {
	    padding-bottom: 15px;
	    margin-bottom: 15px;
	    height: auto;
	}
	.main_time{
		margin-bottom: 20px;
	}
	.nav-tabs li a {
	    margin-left: 15px;
	}
	.top-five {
	    padding-top: 55px;
	}
	.chart-part .col-md-6{
		border-right: none;
	}
	.chart-part .hsi-content, 
	.chart-part .hscei-content {
    	float: inherit;
    	text-align: center;
	}
	.hsi img, .hscei img{
		display: block;
		margin: 0 auto;
		float: inherit;
	}
	.nav-tabs li a {
	    margin-left: 0;
	}
	.nav > li > a {
	    padding: 10px 10px;
	}

	.banner {
	    width: 100%;
	    height: 325px;
	}
	.banner h2{
		font-size: 24px;
	    margin-top: 270px;
	    padding: 15px;
	}
	.inline-page .news-content, 
	.inline-page .top20-content, 
	.quote-header{
		padding: 0 15px;
	}
	.quote-bottom{
		padding: 0;
	}
	.top20-content .nav-tabs{
		margin-top: 35px;
	}
	.top20-content .table_list {
	    top: -45px;
	}
	.pagination{
	    margin: 0;
	}
	.quote-content .tab-content {
	    padding: 15px 0;
	}
	.number_list li {
    	padding: 10px;
    	font-size: 24px;
	}
	.top20-content .time{
		margin-bottom: 10px;
	    display: block;
	}
	.news-content nav{
		text-align: center;
	}
	.number_list li{
	    text-align: center;
	}
	.number_list li:nth-child(even){
		border-right: none;
	}
	.quote-bottom h3 {
	    margin-top: 30px;
	}
	.about-content, 
	.oa-content, 
	.service-content, 
	.contact-content, 
	.stock-content, 
	.download-content{
		padding: 0 15px;
	}
	.inline-page .container{
		margin-bottom: 0;
	}
	.quote-content{
		margin-top: 15px;
	}
	.quote-content .tab-content{
		padding: 15px;
	}
	.quote-content .tab-pane{
		overflow: auto;		
	}
	.number-content {
	    padding: 15px;
	}
	.quote-content .tab-content img{
	    width: 265%;
	}
	.disclaimer{
		margin-bottom: 10px;
	}
	.mobile-disclaimer{
		border-top: 1px solid #ddd;
		padding-top: 10px;
	}
	#datacontent .tab-content .tab-pane, 
	.new-stock-content .tab-content div.scorll-area{
		overflow-x:scroll;
	}
	.new-stock-content .table th{
		min-width: 140px;
	}
	.inline-page .pager li > a{
	    padding: 3px 6px;
	    font-size: 12px;
	}
	#service .table th:first-child{
		width: 30%;
	}
	#datacontent .table th{
		min-width: 100px;
	}
	#datacontent .tab-content .last_update{
		font-size: 14px;
		margin-left: 5px;
		margin-bottom: 10px;
	    display: block;
	}
	.news-part .nav-tabs > li {
		width: 33.3333%;
	}
	.nav-tabs > li > a{
		border-bottom: 2px solid #ffffff;
	}
	.table_list{
		right: auto;
		left: 25px;
	}
	/* .btn.btn-default{
	    width: 100px;
	} */
	td.date {
	    width: 26%;
	    font-size: 14px;
	}
	.top-five #stock th:nth-child(5), 
	.top-five #warrant th:nth-child(5), 
	.top-five #cbbc th:nth-child(5){
		min-width: 110px;
	}
	.nav-tabs{
		display: flex;
	}

	.nav-tabs li{
		flex: auto;
		text-align: center;
	}
	.news-part .nav-tabs{
		display: inline-block;
	}
	.chart-part .nav-tabs > li > a {
	    border-bottom: 2px solid #335767;
	}

}

.video-bg {
  overflow: hidden;
}
#slider video {
  width: 100%;
}

/* @media only screen and (min-width: 1200px) {
  .intro-img, .intro-slider, .intro-video, .video-bg {
    min-height: 750px;
    height: auto;
    margin-top: -30px;
  }
} */

@media only screen and (max-width: 991px) {
  .video-bg {
    width: 100%;
    overflow: hidden;
  }
  #slider, #slider video {
    min-height: 1350px;
  }
}

@media only screen and (max-width: 768px) {
  .video-bg {
    width: 100%;
    overflow: hidden;
  }
  #slider, #slider video {
    min-height: 700px;
    width: auto;
  }
  .intro-img, .intro-img-half, .intro-video {
    padding: 0;
  }

}

#slider {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}

.portrait-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  /* height: 100vh; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.slide-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}

.slide-text h2 {
  font-size: 40px;
  font-family: "Times New Romain";
  font-weight: bold;
  font-style: italic;
}

.slide-text p {
  font-size: 18px;
}

.upper-footer {
  background-color: #1b4740;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
}

.upper-footer a {
  color: white;
}

.upper-footer h5 {
  font-size: 18px;
}

.upper-footer img {
  margin-top: 20px;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 80%;
  overflow-y: scroll;
  padding: 20px;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3); 
}

.close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}