@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@charset "utf-8";
img, object, embed, video { max-width: 100%; }
area 		{ outline: none; }
div, a 	    { box-sizing: border-box; }
span, small { vertical-align: baseline; }
:focus 		{ outline: none; }
* {
	font-family: 'Noto Sans TC','微軟正黑體', Arial,Helvetica,sans-serif;
    font-weight: 300;	
}
html, body  {
	/* background-color: #000 !important; */
	color: #666 !important;
	position: relative;

}
.wrap {
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 48px auto 0;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
.content {
	width: 1110px;
	max-width: 95%;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
.section {
	width: 100%;
}
/*--- 版頭輪播 ---*/
.kv_slider {
	width: 100%;
	position: relative;
	margin-bottom: 30px;
	overflow: hidden;
}
.kv_slider .item {
	width: 100%;
	height: 473px;
}
.kv_slider .owl-theme .owl-nav [class*=owl-] {
    position: absolute;
    width: 70px;
    top: 0;
    left: 50%;
    right: 50%;
    margin: 150px 0 0 -660px;
    background-color: inherit;
    font-size: 10rem;
    color: rgba(255,255,255,.5);;
}
.kv_slider .owl-theme .owl-nav .owl-next {
	margin-left: 590px;
}
.kv_slider .owl-theme .owl-dots .owl-dot span {
	border-radius: 10px;
    width: 50px;
    height: 5px;
}
.kv_slider .owl-theme .owl-dots {
	position: absolute;
    width: 100%;
    bottom: 0;
}
.kv_slider .item img.mobile {
	display: none;
}
.shadow {
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.2);
			box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

/*--- 輪播banner ---*/
.banner_slider {
	padding: 0 0 30px;
}
.banner_slider .content {
	max-width: 86%;
	width: 1100px;
}
.banner_slider .owl-theme .owl-nav [class*=owl-] {
	position: absolute;
	top: 0;
    left: -25px;
    margin: 10vw 0 0 0;
}
.banner_slider .owl-carousel .owl-nav .owl-next {
	left: inherit;
	right: -25px;
}


/*--- 銀行小格 ---*/
.all_bank {
	background-color: #e4e4e4;
	padding: 30px 0 20px;
	overflow: hidden;
}
.all_bank .title {
	width: 350px;
	margin: 0 auto 30px;
	text-align: center;
	font-weight: 500;
	font-size: 3.5rem;
	letter-spacing: 1px;
	border: 2px solid #666;
	border-radius: 50px;
}
.all_bank .content {
	max-width: 97%;
	width: 1120px;
}
a.box, .box {
	background-color: #fff;
	width: calc(100% / 3 - 14px);
	height: auto;
	border: 5px solid #fff;
	border-radius: 15px;
	margin: 0 7px 20px;
	padding: 15px 15px 8% 15px;
	position: relative;
	text-decoration: none;
	color: #666 !important;
	display: block;
	-webkit-transition: 0.2s;
			transition: 0.2s;
    -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,.3);
    		box-shadow: 0px 2px 7px rgba(0,0,0,.3);
}
a.box:hover .btn-info {
    background-color: #ff4e39;
    border-color: #ff4e39;
}
a.box:hover {
    border: 5px solid #ff4e39;

    -webkit-transform: scale(1.03);
    		transform: scale(1.03);
}
.bank_logo {
	text-align: center;
	margin-bottom: 10px;
}
.bank_logo img {
	height: 40px;
	width: auto;
}
.month_evnet {
	background-color: #d92d7d;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	font-size: 14px;
	margin-bottom: 15px;
}

.month_evnet01 {
	background-color: #ec5e00;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	font-size: 14px;
	margin-bottom: 15px;
}
.month_evnet span.s1 {
	font-size: 17px;
}
.month_evnet span.s2 {
	font-size: 18px;
	color: #fff100;
}
.month_evnet01 span.s3 {
	font-size: 18px;
	color: #fff100;
}
.month_evnet.clean {
	background-color: inherit;
	border: 1px solid #ccc;
	color: #ccc;
}
.month_evnet.clean span.s2 {
	color: #ccc;
}
.bank_event {
	font-size: 16px;
	line-height: 1.2;
	margin-bottom: 15px;
}
.bank_event span.s1 {
	font-weight: bold;
	color: #ee0000;
}
.bank_event span.s2 {
    font-size: 22px;
    color: #ee0000;
    font-weight: bold;
}
.bank_event.clean, .bank_event.clean span.s1, .bank_event.clean span.s2 {
	color: #ccc;
}
.clean span.soldout {
	background-color: #ccc;
	color: #fff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	font-size: 13px;
    padding: 1px 3px;
    margin-left: 3px;
}
.reg {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 15px;
	left: -1px;
}
.reg .goto_btn {
	width: 85%;
	margin: 0 auto 5px;
	font-size: 16px;
}
.reg p {
	font-size: 12px;
	color: #aaa;
}
.reg span {
	color: #0d71ea;
    margin-left: 3px;
	text-decoration: underline;
}
img.hand {
    vertical-align: -1px;
}

/*--- 紅利折抵 ---*/
a.box.grid_2 {
 	width: calc(100% - (100% / 3 + 16px));
	height: auto;
}
a.box.grid_3 {
	width: 100%;
}
.bonus_title {
	text-align: center;
	font-size: 26px;
    color: #ee0000;
    font-weight: bold;
    margin-bottom: 15px;
}
.more_bank {
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 15px;
}
.more_bank small {
    color: #9d9d9d;
	padding-left: 2px;
}

/* 紅利試算 */
.calculate .card_select {
	margin: 15px 0;
}
.calculate .card_select select{
	width: 70%;
	margin-left: auto;
	height: 40px;
	font-size: 16px;
}
.calculate .content-box .flex {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	margin-bottom: 15px;
}
.calculate .content-box p{
	margin-bottom: 0;
	width: 25%;
}
.calculate .content-box img{
	width: 35px;
	height: 25px;
}
.calculate .content-box a.btn{
	width: 50%;
	padding: 8px 20px;
	color: #5bc0de;
	font-size: 16px;
	border: 1px solid #5bc0de;
	transition: .3s;
}
.calculate .content-box a.btn:hover {
	color: white;
	background-color: #5bc0de;
}
.calculate .reg a.btn{
	transition: .3s;
}
.calculate .reg a.btn:hover {
	background-color: #ff4e39;
	border-color: #ff4e39;
}



/*--- 分期0利率 ---*/
ul.installment_box {
	font-size: 18px;
	margin-bottom: 10px;
}
ul.installment_box li {
	overflow: hidden;
	margin: 0 0 15px 0;
}
.installment_left, .installment_right {
	min-height: 65px;
}
.installment_left {
	width: 140px;
	float: left;
	text-align: right;
	font-size: 22px;
}
.installment_right {
	width: calc(100% - 160px);
	float: right;
	display: table;
}
.installment_right p {
	display: table-cell;
    vertical-align: middle;
	font-weight: 400;
    margin: 0;
}
.installment_name {
	color: #db0c54;
	font-weight: 500;
	line-height: 1.2;
}
.installment_name span {
	font-size: 130%;
	font-weight: inherit;
}
.installment_ps {
	font-size: 16px;
	padding-right: 5px;
}
#installment .modal-dialog {
	width: 900px;
	max-width: 95%;
}
#installment .modal-header {
	background-color: #e5e5e5;
}
#installment .modal-title {
	text-align: center;
	font-size: 3rem;
}
#installment .modal-content {
	overflow: hidden;
}
#installment .close {
	filter: alpha(opacity=50);
    opacity: .5;
}
#installment .note {
	text-align: center;
	overflow: hidden;
    background-color: #e5e5e5;
    padding: 0 10px;
}
/*--- 警語 ---*/
.attention {
	text-align: center;
    overflow: hidden;
    background-color: #464646;
    color: #fff;
    padding: 20px 10px;
}
.attention .content {
	max-width: 100%;
}
.attention h3 {
	margin-top: 0;
}

/*--- 關鍵字 ---*/
.keyword {
	background-color: #85898a;
	padding: 40px 0;
	width: 100%;
    margin: 0 auto;
    color: #ffffff;
    overflow: hidden;
}
.keyword .sectiion {
	max-width: 90%;
}
.key_left {
	width: 90px;
	float: left;
}
.key_link {
	width: calc(100% - 90px);
	float: right;
}
.key_link a {
	background-color:#ffffff;
	color: #292929;
	padding: 5px 8px;
	border-radius: 3px;
	margin: 0 3px 10px 0;
	font-size: 16px;
	display: inline-block;
}
.key_link a:hover {
	text-decoration: none;
	background-color: #ffffff;
	color: #ca2626;
}
/*--- 影片 ---*/
.modal {
	text-align: center;
	padding: 0!important;
}

.modal:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -4px;
}
.modal-content {
	z-index: 999;
}
.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}

#videoModal .modal-header .close {
	position: absolute;
	z-index: 9;
    font-size: 26px;
    right: -15px;
    top: -15px;
    background: #fff;
    border-radius: 100%;
    opacity: 1;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
#videoModal .modal-header {
	padding: 0;
	height: 0;
	border: 0;
	position: relative;
}
#videoModal .modal-body {
	padding: 0;
    background-color: #000;
}
/* 省錢小撇步 */
.bot_banner {
	text-align: center;
	background-color: #f5b41c;
	padding: 40px 0;
}
.bot_banner-title,.bot_banner-img{
	text-align: center;
	padding: 10px;
}
.bot_banner-title img, .bot_banner-img img{
	width: 100%;
	max-width: 1100px;
}
.bot_banner-img .mb {
	display: none;
	padding: 0 20px;
}
.bot_banner-img .mb img{
	padding: 3vw 0;
}


/*--- 共用 ---*/
.over-hide   { overflow: hidden; }
.nomargin    { margin: 0 !important; }
.top_KV img  { width: 100%; }
.flex        { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.flex-wrap   { -moz-box-wrap: wrap; -webkit-box-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flexbox-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }


@media only screen and (max-width: 1310px) {
	.kv_slider .owl-theme .owl-nav [class*=owl-] 	{ margin: 150px 0 0 0; left: 0; right: inherit; }
	.kv_slider .owl-theme .owl-nav .owl-next 		{ right: 0; left: inherit; }
}
@media only screen and (max-width: 1210px) {
	.moreBank_border 		{ width: 950px; }
}

@media only screen and (max-width: 1050px) {
}
@media only screen and (max-width: 1023px) {
	a.box, a.box.grid_2,.box 		{ width: calc(100% / 2 - 11px); margin: 0 5px 10px !important;}
}
@media only screen and (max-width: 980px) {
	.moreBank_border 		{ width: 97%; max-width: none; }
}
@media only screen and (max-width: 899px) {

}
@media only screen and (max-width: 768px) {
	.wrap 					{ margin-top: 0; }
	#videoModal iframe.RWD 							{ width: 500px; max-width: 100%; height: 281px; }
	.kv_slider 										{ margin-bottom: 0; }
	.kv_slider .item 								{ background: none !important; height: auto; }
	.kv_slider .item img.pc 						{ display: none; }
	.kv_slider .item img.mobile 					{ display: block; }
	.kv_slider .owl-theme .owl-nav [class*=owl-], .banner_slider .owl-theme .owl-dots 	{ display: none; }
	.banner_slider 									{ padding: 10px 0 ; }
	#installment::before 							{ display: none; }
	a.box, .box 											{ padding-bottom: 11%; }
}
@media only screen and (max-width: 767px) {
	.kv_slider .owl-theme .owl-dots .owl-dot span 	{ width: 30px; margin: 5px;  }
	a.box, a.box.grid_2,.box 							{ width: 100%; margin: 0 0 10px 0 !important; }
	.reg 											{ position: static; }
	a.box,.box 											{ padding: 10px; margin-bottom:15px !important; }
	ul.layaway_box 									{ width: 100%; padding: 25px; }
	ul.layaway_box li 								{ border-bottom: 1px dotted #b7b7b7; padding-bottom: 15px; }
	ul.layaway_box li:last-child  					{ border: 0; }
	.layaway_left, .layaway_right 					{ width: 100%; float: none; text-align: left; min-height: auto; margin-bottom: 10px; }
	.layaway_name 									{ display: inline-block; }
	.layaway_ps 									{ display: inline-block; vertical-align: sub; }
	#videoModal iframe.RWD 							{ width: 100%; height: auto; }
	.installment_left, .installment_right			{ width: 100%; text-align: left; min-height: auto; margin-bottom: 5px; }
	.installment_left>div 							{ display: inline-block; }
	.all_bank .title 								{ width: 250px; font-size: 2.5rem; margin-bottom: 20px; }
	.all_bank .content 								{ max-width: 90%; }
	ul.installment_box li 							{ margin-bottom: 20px; }
	.bank_event, .reg .goto_btn 					{ font-weight: 500; }
	.month_evnet 									{ font-weight: 600; }
	#installment .modal-title 						{ font-size: 2.5rem; }
	.month_evnet span 								{ font-weight: inherit; }
	#installment .note h4							{ font-size: 16px; }
	#installment .note h5							{ font-size: 14px; line-height: 1.5; }
	.key_left, .key_link							{ width: 100%; }
	.key_link 										{ margin-top: 10px; }
	.key_link a 									{ font-size: 14px; }
	.all_bank 										{ padding: 15px 0 ; }
	.bot_banner {
		padding: 20px 0;
	}
	.bot_banner-img .mb {
		display: block;
	}
	.bot_banner-img .pc {
		display: none;
	}
	.bot_banner-title{
		padding: 0 10px;
	}
}
@media only screen and (max-width: 360px) {
	.owl-theme .owl-nav	 	{ margin: 5px 0 0; }
}
@media only screen and (max-width: 359px) {
	.month_evnet 			{ font-size: 13px; }
	.month_evnet span.s1 	{ font-size: 15px; }
	.month_evnet span.s2, .more_bank 	{ font-size: 16px; }
	.bank_event, 			{ font-size: 14px; }
	.bank_event span.s2 	{ font-size: 18px; }
	.clean span.soldout 	{ font-size: 12px; }
	.layaway_left 			{ font-size: 20px; }
	.layaway_name span 		{ font-size: 28px; }
	.layaway_ps 			{ vertical-align: -5px; }
}
@media only screen and (max-width: 320px) {
	.modal::before 			{ display: none; }
	.modal-content 			{ margin-top: 150px; }

}