@charset "utf-8";
/* 遠東國際商業銀行外匯保證金交易 */
/*===== 通用樣式 =====*/
img {max-width: 100%;height: auto}
.clear_both:after{content:"";display:table;clear:both;}
.FL {float: left;}
.FR {float: right;}
.margin_auto {margin-left: auto;margin-right: auto;}
.margin_top {margin: 1% 0;}
.box_shadow {-moz-box-shadow: 0px 5px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.4); box-shadow: 0px 5px 10px rgba(0,0,0,0.4);}
.inline_block {display: inline-block;}

/*===== Forms =====*/
#content .input-area { padding-bottom: 1em;}

#content input[type="checkbox"], input[type="radio"] { display: none;}
#content input[type="checkbox"] + label { height: 1.5em; width: 1.5em; display: inline-block; top: 0px; left: 0px; z-index: 1; vertical-align: middle; background: url(../images/checkboxOff.png) 0% 0% / 100% no-repeat; padding: 0px; margin: 0px 4px 0px 4px;position: relative;top: 2px;}
#content input[type="checkbox"]:checked + label { height: 1.5em; width: 1.5em; display: inline-block; background: url(../images/checkboxOn.png) 0% 0% / 100% no-repeat; padding: 0px;}

#content input[type="radio"] + label { height: 1.5em; width: 1.5em; display: inline-block; top: 0px; left: 0px; z-index: 1; vertical-align: middle; background: url(../images/radioOff.png) 0% 0% / 100% no-repeat; padding: 0px; margin: 0px 4px 0px 4px;position: relative;top: 2px;}
#content input[type="radio"]:checked + label { height: 1.5em; width: 1.5em; display: inline-block; background: url(../images/radioOn.png) 0% 0% / 100% no-repeat; padding: 0px;}

/*===== iframe =====*/
.iframe { width:100%; height:70vh; border:none; overflow: hidden;overflow-y: auto;}

/*===== 主要匯率匯價 =====*/
.listing_a .box { padding: 5px; margin: .5%; width: 32%; display: inline-block; box-sizing: border-box; background: #fff; border: 1px solid #dfdfdf; border-right-color: #a3a3a3; border-bottom-color: #a3a3a3; border-radius: 5px;}
.listing_a ul { margin-left: 0;}
.title_2 {background: rgba(255,255,255,.5);padding: 8px 8px 5px 8px;border-bottom: 2px solid #f0ece7;}
.title_2 span {width: 50%;display: inline-block;}
.title_2 span h2 {font-size: 1.250em; line-height: 1.250em; font-weight: 600; margin-bottom: 0;}
.title_2 span.date {font-size: 0.875em; line-height: 0.875em; text-align: right;}
.exchange .table-chart .rows .colm {line-height: 1.250em;}

#content .Terms input[type="checkbox"] + label {top:-3px}
#content .-colm.left { width:8em;}
#content .-colm.right { width:455px;}

@media screen and (min-width: 991px) {
	.listing_a .box:hover {-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.2); box-shadow: 0px 5px 15px rgba(0,0,0,0.2);border-top-color: #7b7b7b;border-left-color: #7b7b7b;border-right-color: #000; border-bottom-color: #000;position: relative;top:-1px;left: -1px;}
}

@media only screen and (max-width: 991px) {
	.panel-body ul.event_list li {width: 100%;}
	.panel-body ul.event_list { margin-left: 0;}
	.cards .card {width: 50%;}
	.listing_a .box { width: 48.5%;}
	.whats .margin_bottom { margin-bottom: -60px;}
	.whats .space { height: 80px;}
	.table_RWD_wrapper {width: 100%;overflow: hidden;overflow-x: auto;}
	#PrivacyPolicy .table_RWD_wrapper table {width: 1500px;}
	.Video .leftbox, .Video .rightbox { width: 100%;float: none;margin: 0;}
	.Video .leftbox iframe {  height: 432px;}
	.video_list .item {width: 33.33%;}
}
@media only screen and (max-width: 767px) {
	.mobile-apps .col-md-6 {margin: 0 auto 25px auto;width: 90%;float: none;}
	.list_container .panel {padding: 10px 0;}
	.note.-policy .page-wrapper {max-height: 150px; overflow-y:auto; -webkit-overflow-scrolling: touch;padding-top: 10px;}
	.newscontent .topimg { height: 300px;}
	.listing_a .box { width: 100%; margin: 0 0 4% -30px;}
	.exchange .table-chart .rows { width: 12rem; min-width: 12rem;margin: .5rem;}
	.table th, .table td {font-size: 0.938em;}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: .5rem 0.3rem;}
	.detail .first.layer-tabs > .link-wrap-trigger, .detail .layer-tabs.-scrollable {text-align: center;}
	.detail .first.layer-tabs > .link-wrap-trigger br, .detail .layer-tabs.-scrollable br {display: none;}
	.video_list .item { width: 50%;}
	#content .-colm.left {padding: 0;}
	#content .-colm.left .-label {padding-bottom: 0;}
	.fetpmg ul[place="1"] li.box, .fetpmg ul[place="2"] li.box, .fetpmg ul[place="1"] li.arrow, .fetpmg ul[place="2"] li.arrow { width: 98%; }
	.fetpmg ul[place="1"] li.box, .fetpmg ul[place="2"] li.box {min-height: inherit;margin: .3em 1% 1em 1%;}
	.fetpmg ul[place="1"] li.arrow, .fetpmg ul[place="2"] li.arrow {margin-top: 0;margin: 0 1% .3em 1%;}
	.fetpmg ul li.arrow img {width: 40px;transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);}
	.fetpmg ul[place="2"] {padding-top: 1.5em; border-top: 1px dotted #8F8F8F;}
}
@media only screen and (max-width: 700px) {
	.list_area {width: 15%;}
	.list_event {width: 83%;}
}
@media only screen and (max-width: 590px) {
	.list_area {width: 17%;}
	.list_event {width: 81%;}
	.list_btn { width: 90%;}
	.fa.FR { position: absolute; top: auto; right: 30px; margin-top: 8px;}
	.newscontent .date, .newscontent .social {width: 100%;float: none;text-align: center}
	.newscontent .date {font-size: 0.875em}
	.calendar_week_item {line-height: 28px;}
	.downloads li {font-size: 1.063em;}
}
@media only screen and (max-width: 470px) {
	.list_area {width: 23%;}
	.list_event {width: 75%;}
	.calendar_top .FL, .calendar_top .FR {float: none;width: 100%;}
	.calendar_top .weektitle, .calendar_top .R {text-align: center !important; margin-bottom: 5px;}
	.newscontent .topimg { height: 200px;}
	.title_2 span { width: 100%; text-align: center;}
	.title_2 span, .title_2 span.date { text-align: center;}
	.News_ml .header .logo { width: 130px;}
	.fetpmg .download li {width: 100%;margin:0 0 .5em 0}
	.fetpmg .download li:last-child {margin-bottom:0}
}
@media only screen and (max-width: 380px) {
	.list_area {width: 20%;}
	.list_event {width: 79%;}
	.Video .leftbox iframe { height: 237px;}
	.width_33, .width_50 {width: 100%;padding: 0 0 .5em 0;}
	.form .-row .input.-text {margin-top: 0!important;}
}