* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}
html,
body {
	width:100%;
	height:100%;
	font-size: 16px;
	line-height: 1.2;
	position:relative;
}
.shadow{
	position:relative;
	-webkit-box-shadow: #ccc 0px 2px 5px;
	-moz-box-shadow: #ccc 0px 2px 5px;
	box-shadow: #ccc 0px 2px 5px;
}
.wrapper{width:1200px;margin:0 auto;position:relative;}


.iframe-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

.btn {cursor:pointer;} 

a {text-decoration: none;color:#BA9C4B;}
a:hover {text-decoration: none;color:#1F497D;}
:target:before {
content:"";
display:block;
height:70px; /* fixed header height*/
margin:-70px 0 0; /* negative fixed header height */
}


em{color:#888 !important;}
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {background-color:#BA9C4B;}


.uk-form-controls {position:relative;}
.uk-form-blank,.uk-form-blank:focus {border-style: none;border-width: 0;background: transparent;}
label.error {position: absolute;top: 8px; right:8px;background:#D95C5C; padding:3px 8px; border-radius: 3px;color:#fff;font-size:12px;}

input[aria-invalid="true"] {border: 1px solid #D95C5C !important;}
.middle-wrap{font-size:0;}
.middle-wrap:after{content:"";display:inline-block;height:100%;vertical-align: middle;}
.middle-obj{display:inline-block;vertical-align: middle;}



main {
	overflow: hidden;
	position: relative;
}
.gold-gradient{background:linear-gradient(to right, #BA9C4B, #9E7B1C);color:#fff;}
.blue-gradient{background:linear-gradient(to right, #1F497D, #103766);color:#fff;}
.button{display:inline-block;padding:8px 16px;margin: 4px;border-radius: 5px;border:1px solid #999;color:#666;cursor: pointer;}
.button_blue{background:linear-gradient(to right, #1f497d, #103766);border-style:none;color:#fff;}
.button_gold{background:linear-gradient(to right, #BA9C4B, #9E7B1C);border-style:none;color:#fff !important;}
.button:hover {border-color: #666;color:#666;}
.button_blue:hover,.button_gold:hover{opacity: 0.9;color:#fff !important;}
.button2x {padding: 14px 32px !important;font-size:16px;}

#toTop {display:none; position:fixed; z-index:9999; bottom:30px; right:30px;}
#toTop a{display:block;width:50px; height:50px;text-align: center;color:#1F497D;}

/* === Header === */
header {position:relative;z-index:99;background-color:#fff;}
.header_btn {float:left;display:block;padding: 10px 5px; color:#fff;background:#BA9C4B; background:linear-gradient(to bottom, #DAC078, #9E7B1C);text-align:center;line-height:1;height:68px;width:55px;border-right:1px solid #fff;}
.header_btn:hover {color:#fff;background:#1F497D;}
.header_btn_txt {margin-top: 3px;height:25px;font-size: 12px;}
.header_btn_txt:after, .mobile_open:after {content:"";display:inline-block;height:100%;vertical-align: middle;}
.header_btn_txt span, .mobile_open span {display: inline-block;vertical-align: middle;}
.Logo {width: 300px;padding:3px 0 3px 16px;}

#top_bar {position:absolute;left:0;width:100%;padding:0;background-color:rgba(0,0,0,0.4);z-index:990; }
#index_bar,#search_input {height:55px;}
#search_input {border-top:1px solid #ccc;}

#home_quote {height:40px;width: 250px;background: rgba(255,255,255,0.5) url(/img/home_quote_icon.png) 10px center no-repeat;background-size: 25px auto; padding: 5px 45px;border-style: none;color:#fff;font-size: bold;}
#home_quote_wrapper {position:absolute; right:50px; top: 100%; width: 60%; height:400px;background: #F6F6F6;padding:16px 32px;display:none;}

#Login_section{display:block;position: absolute;top:100%;right:0;background:#fff;width:960px;overflow-y:auto;height:auto;}


/* === Main Nav === */
#Languages {background:#fff;padding:5px}
#Languages a {text-decoration: none;display:block;text-align:center;color:#222;padding:10px 5px;font-size:14px;}
#Languages a:hover {background:#BA9C4B; border-radius: 5px;color:#fff;}


.nav {width:100%; position: relative; }
.nav ul {list-style: none;padding-left:0;margin-bottom:0;}
.nav ul a {text-decoration: none;display:block;color:#555;font-size:14px;}
.nav ul a:lang(en) {font-size:12px;}

.nav ul.layer0 {}
.nav ul.layer0 > li {}
.nav ul.layer0 > li > a {color: #222; text-transform: uppercase;padding:22px 20px;border-bottom: 5px solid #fff;}
.nav ul.layer0 > li > a:lang(en) {padding:22px 10px;}
.nav ul.layer0 > li.active > a {}
.nav ul.layer0 > li:hover > a{border-bottom: 5px solid #1F497D;}

/*.nav ul.layer1 {padding: 32px 64px 32px 64px ;background:#fff;max-width: 1200px;}
.nav ul.layer1 > div > div > li {margin-bottom: 16px;}
.nav ul.layer1 > div > div > li > a, 
.nav ul.layer1 > div > div > li > span {color :#BA9C4B; font-size :16px; font-weight: bold;cursor: normal;}*/
.nav ul.layer1 {padding: 32px 64px 32px 64px ;background:#fff;}
.nav ul.layer1 > div > li {}
.nav ul.layer1 > div > li > a, 
.nav ul.layer1 > div > li > span {color :#BA9C4B; font-size :16px; font-weight: bold;cursor: normal;}


.nav ul.nav_link {text-align:left;margin-top:0;width:auto !important;}
.nav ul.nav_link >li {position:relative;-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Firefox */
		 break-inside: avoid;}
.nav ul.nav_link > * > a {display:block;padding: 2px 8px;width:100%;color:#555;font-size:14px;font-weight: normal;border-radius: 3px;}
.nav ul.nav_link > * > a:hover {background:linear-gradient( to right,#BA9C4B, #DAC078);color: #fff;}



/* == Mobile Nav === */
#mobile_nav{background:#fff;}
#mobile_nav ul {list-style: none;padding-left:1rem;}
#mobile_nav a {font-size: 1.25rem;padding:8px 0;line-height:1;color:#555;}
#mobile_nav a:lang(en) {font-size: 1.25rem;}
.uk-offcanvas-bar {padding:0 !important;}

#mobile_nav ul.layer0 {padding-left:0;}
#mobile_nav ul.layer0 > li {border-bottom: 1px solid #eee;padding: 12px 0 12px 2rem;}
#mobile_nav ul.layer0 > li > div > a {display:block;font-size:1.5rem;padding:5px 0;}
#mobile_nav ul.layer0 > li > div > span.openSubBtn {padding: 0 8px;vertical-align: middle;}
#mobile_nav ul.layer1 {display:none;}
#mobile_nav ul.layer1.open {display:block;margin-top: 8px;}
#mobile_nav ul.layer1 > li > div {color:#BA9C4B;font-weight:bold;margin:4px 0;}


#mobile_language ul {display:flex; display:-webkit-flex;padding:0;}
#mobile_language li{
	-ms-flex: 1;
	-webkit-flex: 1;
	flex:1;
	text-align:center;
	padding:0;
}

/* === BANNER ===*/
#banner {position:relative;}
#banner_border_bottom {height:10px;background:linear-gradient( to right,#DAC078, #9E7B1C)}
.banner_container {position:relative;width:100%;}
.banner_content {height:calc(95% - 215px);}


/*  === Home Section === */
.portal_news {cursor:pointer;padding: 8px 2rem;color: #222;}
.portal_news:nth-of-type(odd){background: #f4f4f4;}
.portal_news:hover {background:#FBF6EA}
.portal_news_date { font-size:1rem; font-weight: bold;}
.portal_news_title{ display:inline-block;font-size:1.25rem;padding:5px 3rem 0 0;background: url(/img/news_title_deco.png) right bottom no-repeat; background-size: auto 50%; }


#home_btn_container{margin-top:-50px;padding-bottom: 50px;}
.home_btn{display:block;margin:0 auto; width:100%;max-width:200px;height: 173px;background:url(/img/home_btn_bg.png);background-size:100% 100%;padding: 32px 16px; }
.home_btn_ico,.home_btn_txt{display:block;}
.home_btn_ico {margin-bottom: 16px;}
.home_btn_ico img {height:60px;}
.home_btn_txt{color:#BA9C4B; line-height:1.2;font-size: 16px;font-weight: bold;}

.home_heading {color: #BA9C4B; font-size: calc(16px + 1vw); font-weight: bold;text-align: center;white-space: nowrap;}
.sLine {display:block;margin: 16px auto; width:60%;height:2px;background:linear-gradient(to right, #fff, #BA9C4B 40%,#BA9C4B 60%,#fff 100%);}

/*section Online Trade*/
#section-OnlineTrade {position:relative;height:30vw;}
#section-OnlineTrade .left {position:relative;z-index: 1;height:100%;width:25%;float:left;background:linear-gradient( to bottom,#DAC078, #9E7B1C);}
#section-OnlineTrade .left .left-Content{width:70%;color:#fff;padding-left:3vw;}


#section-OnlineTrade .center {position: absolute;z-index: 3;top:0;left:20%;height:100%;width:48%;transform:skewX(170deg);overflow:hidden;}
#section-OnlineTrade .center .image{position:absolute;top:0;left:-55px;transform:skewX(-170deg);width:calc( 100% + 110px );height:100%;background-position:center center;background-repeat: no-repeat ; background-size:cover;}

#section-OnlineTrade .right {position:relative;z-index: 1;margin-left:-55px;height:100%;width:38%;float:right;background:url(/admin/Uploads/Home/depositphotos_56475871-stock-photo-girl-holding-iphone-6-space.png) center center no-repeat; background-size:cover;}

.trade_btn_online, .trade_btn_mobile {display: inline-block;height:60px; position:absolute;background:#1F497D; padding: 20px 32px;color:#fff;font-size:20px;font-weight: bold;}
.trade_btn_online:hover, .trade_btn_mobile:hover { color:#BA9C4B;}
.trade_btn_online {bottom:10%;right: 15%;}
.trade_btn_online:after{
	content:"";
	width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 100%;
	border-top: 30px solid #1F497D;
	border-left: 6px solid #1F497D;
    border-right: 6px solid transparent;
    border-bottom: 30px solid transparent;
}
.trade_btn_mobile {bottom:10%;left: 20%;}
.trade_btn_mobile:after{
	content:"";
	width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 100%;
	border-top: 30px solid transparent;
	border-left: 6px solid transparent;
    border-right: 6px solid #1F497D;
    border-bottom: 30px solid #1F497D;
}
/*section Short Cut*/
.shortCut-wrap {position:relative; width:90%;margin:0 auto;}
.sc-btn {display:inline;position:relative;}
.sc-btn-1{width:56.25%;float:left;z-index:2;}
.sc-btn-2{width:50%;float:right;z-index:1;margin-left:-6.25%;}
.sc-btn-3{width:50%;float:left;z-index:1;}
.sc-btn-4{width:56.25%;float:right;z-index:2;margin-left:-6.25%;}
.sc-btn-title {position:absolute;color:#fff;font-size:20px; font-weight:bold;padding: 16px 24px;border-bottom:5px solid #1F497D; opacity: 0.9;transition: all 0.3s ease;}
.sc-btn-title:hover {opacity: 1;color:#fff;box-shadow: 0 3px 5px #666;}
.sc-btn-title-1 {top: 8%; left:-16px;width:70%; text-align:right;background:#4c7455;}
.sc-btn-title-2 {bottom: 8%; right:-16px;width:70%; text-align:left;background:#d1c677;}
.sc-btn-title-3 {top: 8%; left:-16px;width:60%; text-align:right;background:#704444;}
.sc-btn-title-4 {bottom: 8%; right:-16px;width:70%; text-align:left;background:#555555;}


/*.sc-ipo{background:#4C7455;width:55%;}
.sc-morning{background:#DFD172;width:45%;}
.sc-deposit{background:#693535;width:55%;}
.sc-charges{background:#494949;width:55%;}*/

/*section Opening Account*/
.openacc_btn {display:block;width: 100%;height: 142px;padding-left:15%;margin-left: -30px;font-size:calc(22px + 0.5vw); font-weight: bold;color:#BA9C4B;
	background-image:url(/img/button-1.png);
	background-size:100% 200%;
	background-position:left top ;
	background-repeat: no-repeat;
}
.openacc_btn:after {content:"";display:inline-block;height:100%;vertical-align: middle;}
.openacc_btn span {display:inline-block;vertical-align: middle;margin-top:-5px;}
.openacc_btn:hover {background-position:left bottom;color:#fff;}

.home_list{position: relative;}
.home_list:before{
	content:"";
	position: absolute;
	top:0;
	left:-8px;
	width:0;
	height:calc(100% - 16px);
	border-top: 8px solid transparent;
	border-right: 8px solid #E8D6A4;
	border-bottom: 8px solid transparent;
	border-left: 0 solid transparent;
}



/* === Content === */
h1,h2,h3,h4 {}
.content {padding: 2rem 0 ;height:100%;}
.content_title {display:inline-block;font-size: calc(20px + 1vw);font-weight:bold;padding:1.5rem 6px;color:#fff; border-bottom:1px solid #fff;}
.content_title_desc{max-width:800px;color:#fff;padding:1.5rem 0;margin:0 auto;}
.content_banner_height {min-height:450px;}
.content_banner_center_wrap {min-height:450px;display:table;width:100%;height: 450px;}
.content_banner_center_obj {display:table-cell;vertical-align: middle;text-align: center;}

.editor_content {padding: 1rem 1.5rem;line-height:1.5;}
.editor_content .tablewrap{width:100%;overflow-x:auto;overflow: visible;}
.editor_content table {position:relative;table-layout:auto;border-collapse:collapse;width: 100%;}
.editor_content table:before{
	content:"";
	position: absolute;
	top:0;
	left:-8px;
	width:0;
	height:calc(100% - 16px);
	border-top: 8px solid transparent;
	border-right: 8px solid #E8D6A4;
	border-bottom: 8px solid transparent;
	border-left: 0 solid transparent;
}
.editor_content table p {margin:0 0 0 0;}
.editor_content td, th {border-right:1px solid #fff;}
.editor_content td {padding: 5px 10px;vertical-align: top;}
.editor_content th {border-bottom: 3px solid #BA9C4B;padding:10px;background:#5D5D5D;color:#fff;}
.editor_content th:first-of-type {border-bottom: 3px solid #002951;}
.editor_content table.withheader tr:nth-of-type(even){background: #f4f4f4;}
.editor_content table.withheader tr:nth-of-type(odd):last-of-type{border-bottom: 1px solid #a5a5a5;}
.editor_content table:not(.withheader) tr:nth-of-type(odd){background: #f4f4f4;}
.editor_content table:not(.withheader) tr:nth-of-type(even):last-of-type{border-bottom: 1px solid #a5a5a5;}

.editor_content table.nostyle:before {content:"";display:none;}
.editor_content table.nostyle td, .editor_content table.nostyle th{border-style: none;}
.editor_content table.nostyle th{background:transparent;color:inherit;}
.editor_content table.nostyle tr {background:transparent !important;border-style: none !important;}



.news_list {cursor: pointer;}
.news_list td {padding-bottom:12px;}
.news_list_date{color:#1F497D;padding-right:16px;white-space: nowrap;width:15%;min-width: 100px;}
.news_list:hover .news_list_title{font-weight: bold;}

.news_title {text-align:center;color:#1F497D;font-size: 20px; font-weight: bold; }
.news_date {text-align:center;color:#999999;font-size: 14px;margin-bottom:16px;}

.back-btn {padding:8px;}

.file_ico {height:20px;}
#news_pager, .tablepager {text-align: center;margin: 16px 0;}
#news_pager a, .tablepager span.page-number {position:relative;display:inline-block;margin:3px; width:28px;height:30px;
 line-height:30px;color: #666;border:1px solid #ccc;border-radius: 3px;cursor: pointer;}
#news_pager a:hover, .tablepager span.page-number:hover,
.tablepager span.page-number.active
{color: #fff;background-color: #666;border:1px solid #666;text-decoration: none;}

#content-SubNav {position: absolute;bottom:0;width:100%;  }
#content-SubNav #subnav_wrap{background:#fff;text-align: center;}
#content-SubNav #subnav_wrap div{position:relative;}

#content-SubNav #subnav_wrap div.active{background:linear-gradient(to bottom, #DAC078, #9E7B1C);}
#content-SubNav #subnav_wrap div.active a,
#content-SubNav #subnav_wrap div.active a:hover {color:#fff;}
#content-SubNav #subnav_wrap div.active:before{
	content:"";
	position: absolute;
	top:-10px;
	left:0;
	width:calc(100% - 20px);
    height: 0px;
    border-bottom: 10px solid #DAC078;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;	
}
#content-SubNav #subnav_wrap div:not(:last-child):not(.activeprev):not(.active):after{
	content:"|";
	position: absolute;
	right:0;
	top:45%;
	color:#ccc;
}
#content-SubNav #subnav_wrap div a{position:relative;display:block;height:100%;}
#content-SubNav #subnav_wrap div a span {display:inline-block;padding:16px 6px;vertical-align: middle;}
#content-SubNav #subnav_wrap div a:before{
	content:"";
	height:100%;
	display:inline-block;
	vertical-align: middle;
}

.uk-accordion-title {color:#1F497D;font-size:initial}

#MarginTableResult {text-align: center; font-size:20px;font-weight: bold;}

ol.remarks {list-style: none;}
ol.remarks li {
	counter-increment: item;
	position: relative;
	padding-left: 20px;
	line-height:1.2;
	margin: 8px 0;
  }
ol.remarks li:before{
	position: absolute;
	top:1.5px;
	left:0;
	content: counter(item)".";
	font-size:14px;
	display: inline-block;
}

.map_btn_overlay{background-color:rgba(0, 0, 0, 0.4)}
.map_btn_txt {}
.map_btn_txt a{display:inline-block;height:100%; width:100%;text-align:center;font-size: 2rem;font-weight:bold;padding:16px;line-height:1;color: #fff;text-shadow: #333 0 2px 3px;}
.map_btn_txt a:hover {color: #fff;}


/* === Side === */
#side {width: 100%;}



#side_menu ul{list-style: none;padding:0;}
#side_menu li {position:relative;padding-bottom: 6px;}
#side_menu a {color:#fff; font-weight:bold;display:block;padding: 5px 12px;}
#side_menu ul.layer0 {position:relative; width:100%;}
#side_menu ul.layer0 > li { width:100%;}
#side_menu ul.layer0 > li >a {background-color:#898989; border-radius: 6px;}
#side_menu ul.layer0 ul {background-color:#898989;left:103% !important;margin-left:0 !important;border-radius: 6px;width:250px;}

/* === Site Map === */
#sitemap ul {list-style: none;margin-bottom:16px;padding-left:16px;text-align:center;}

#sitemap ul.sm_layer0 > li > span {display:block;font-size: 20px; font-weight: bold;color:#1f497d;border-bottom: 1px solid #ccc;padding-bottom: 8px; margin-bottom:16px;}

#sitemap ul.sm_layer1 {padding-left: 0;}
#sitemap ul.sm_layer1 > li  {font-size: 16px; font-weight: bold;color:#BA9C4B;}
#sitemap ul.sm_links > * > a {font-size: 16px; font-weight: normal;color:#555;}
#sitemap ul.sm_links > * > a:hover {color:#1f497d;}
/* === FOOTER === */
footer {position:relative;padding: 32px 0;background:linear-gradient( to bottom,#9E7B1C, #BA9C4B);color:#fff;line-height:1.5;border-bottom:6px solid #1F497D;overflow: hidden;}
footer:after{
	content:"";
	width: 0;
    height: 0;
    position: absolute;
    top: 0;
	left: calc(100% - 30px);
	border-top: 60px solid #fff;
	border-left: 60px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 0 solid transparent;
}
footer a {color: #fff;}
footer a:hover {color: #1F497D;}




@media (max-width: 1200px) {
	html, body{height:100%;}
    .wrapper {width:100%;padding: 0 8px;}
	.wrapper.nopadding {padding: 0 0;}
}

@media only screen and (max-width: 960px) {
	html {font-size: 80%;}

	#Login_section{width:100%;}
	#section-OnlineTrade {height:auto;}
	#section-OnlineTrade .left {height:auto;width:100%;float:none;}
	#section-OnlineTrade .left .left-Content{display:block;text-align: center;margin: 0 auto;padding:16px 0;}
	#section-OnlineTrade .left .left-Content>div{width:100% !important;}
	#section-OnlineTrade .center {position: relative;left:0;float:left;height:200px;width:50%;transform:skewX(0deg);}
	#section-OnlineTrade .center .image{position:relative;left: 0;transform:skewX(0deg);width:100%;height:100%;}
	#section-OnlineTrade .right {margin-left:0;height:200px;width:50%;}
	.trade_btn_online, .trade_btn_mobile {bottom:10%;right: 20%;left:20%;text-align: center;padding:20px 8px;}
	.trade_btn_online:after, .trade_btn_mobile:after{border-style: none;}
}


@media (max-width: 640px) {
	table.tableDefault th{
		display:inline-block;
		width:100%;
		border-bottom:0 solid #fff !important;
		padding:2px 10px;
		text-align:left;
	}
	.news_list td {display:inline-block;padding-bottom:0;width:100%;line-height: 1.2;}
	.news_list td:first-of-type {padding-top:12px;}
	.news_list td:last-of-type {padding-bottom:12px;border-bottom: 1px dotted #ccc;}
	#index_bar {height:130px;}
	.header_btn {width:25%;}
	.mobile_open {width:60px;}
	.content_banner_center_wrap {min-height:30vh;height:30vh;}
	.editor_content {padding:8px 0;}
	.editor_content table:before{display:none;}
	table.style1 {border-style: none; width:100% !important;}
	table.style1 tr:after{
		content: "";
		display: block;
		border-bottom: 1px solid #666;
	}
	table.style1 td,table.style1 th {display:inline-block;width:100% !important;text-align:left !important;border-style: none;}
	
	table.style2 {border-style: none;width:100% !important;}

	
	table.style2 tr {display:block;border: 1px solid #666;margin-bottom: 8px;}
	table.style2 tr:first-of-type{display:none;}
	table.style2 td{display:block;width:100% !important;border-bottom: 1px dotted #ccc;text-align:center;}
	table.style2 td:last-child{border-style: none;}
	table.style2 td:before {
		content: attr(data-th);
		display: block;
		width: 100% !important;
		font-weight: bold;
		color:#BA9C4B;
		text-align:center;
	}

	#section-OnlineTrade .center, #section-OnlineTrade .right {float:none;height:200px;width:100%;}
	.openacc_btn{margin-left:0;}
	.sc-btn-title{width:90% !important;}
	:target:before {
		height:145px; /* fixed header height*/
		margin:-145px 0 0; /* negative fixed header height */
		}
}

@media only screen and (max-width:550px) {
	#index_bar {height:165px;}
}
@media only screen and (max-width:450px) {
	.home_btn{width:100%;}
}