@charset "utf-8";

/***** 顏色、字體 *****/
.blue{ color:#2d68a9;}
.red { color:#c9321f;}
.yellow{ color:#ffe433;}
.green {color:#007c7d;}
.white {color:#ffffff;}
.w1,.w2,.w3{ font-weight:normal; line-height:150%; letter-spacing:1px}
.w1{ font-size:21px;}
.w2{ font-size:19px;}
.w3{ font-size:15px; text-align:justify}
.bold{ font-weight:bold;}
.dk{ display:block; }
.mb{ display:none;}
td{vertical-align:top; padding-top:5px;}
span {display: inline-block; word-break: break-all;}

@media (max-width:767px) {
.w1{ font-size:16px; line-height:180%;}
.w2{ font-size:15px; line-height:150%;}
.w3{ font-size:14px;}
.dk{ display:none; }
.mb{ display:block;}
}

/*****kv設定 *****/
#section1,#section2,#section3,#section6,#sp1,#sp2
{ position:relative; clear:both; width:100%; margin-top:-50px; padding-top:50px; overflow:hidden;}
.s1-main,.s2-main,.step-main,.s6-main,.sp2-main {position:absolute; z-index:22; overflow:hidden}
#section2 {background-color:#e1f0f7;}
.s-bg{ width:100%;}

/*****KV+ section1  下載綁定設定 *****/
.kv { width:100%; margin-top:20px }
.s1-main {width:100%; }
.s1-qrc {float:right; width:12%; margin-top:43.5%; margin-right:15% }
.s1-btn { width:32%; margin:auto; margin-top:58%;}
.s1-btn1 {float:left; width:55%; margin-left:5%; outline: none;}
.s1-info {float:left; width:33%; margin-left:7%; outline: none;}

@media (max-width:767px) {
.s1-qrc {width:28%; margin-top:187%;margin-right:5% }
.s1-btn { width:76%; margin:auto; margin-top:225%;}
.s1-btn1 {width:61%; margin-left:0}
.s1-info {width:36%; margin-left:3%}
}


/*****section2 儲值消費設定 *****/
.s2-bg{ width:100%;}
.s2-main {clear:both; width:100%;}
.s2-btn { width:30%; margin:auto; margin-top:47%;}
.s2-btn1 { float:left; width:55%; margin-left:5%; outline: none;}
.s2-info {float:left; width:33%; margin-left:7%; outline: none;}

@media (max-width:767px) {
.s2-btn { width:76%; margin-top:196%;}
.s2-btn1 {clear:both; width:61%; margin-left:12%;}
.s2-info {clear:both; width:36%; margin-left:24.5%;margin-top:3%;}
}


/***** section3 申辦首刷設定 *****/
#section3 { padding-top:5%;}
.s3-main { position:relative; width:100%; background:#fff; margin:0; padding:0 0 5%; }
.s3-btn { width:42%; margin-left:29%; margin-top:1%; overflow:hidden}
.s3-btn1 { float:left; width:26%; outline: none;}
.s3-info {float:left; width:26%; margin-left:3%; outline: none;}
.s3-btn3 { float:left; width:42%; margin-left:3%; outline: none;}
.s3-btn5 { position:absolute; z-index:99; width:32%; bottom:30%; right:-3%;}

@media (max-width:767px) {
#section3 { padding-top:2%;}
.s3-main {padding:0 0 11%; }
.s3-btn { width:60%;margin-left:20%; margin-top:2%;}
.s3-btn1 { width:48%;}
.s3-info { width:48%; margin-left:4%;}
.s3-btn3 {clear:both; width:80%; margin-left:10%; margin-top:5%;}
.s3-btn5 { width:80%; bottom:30%; right:-35%;}
}


/*****section-hot 設定 *****/
#section-hot{clear:both; width:100%; margin-top:-50px; padding-top:50px; overflow:hidden;background-color:#edf6fd}
.hot-main {position:absolute; z-index:22; width:80%; margin-left:6%;}

.hot{ width:85%; margin:12% 8% 0; }
.hot .item { float:left; width:96%; margin:15px 2% 0;}

.owl-theme .owl-controls .owl-nav [class*=owl-] {position:absolute; z-index:99; width:100%;  background: none; display: block; cursor: pointer; border-radius: 0;}
.hot .owl-carousel .owl-nav button.owl-prev
{float:left;width:50px; height:50px; margin-left:-50px; margin-top:-18%; background:url(../img/prev-b.png)no-repeat; background-size:contain; outline: none;}
.hot .owl-carousel .owl-nav button.owl-next
{float:right;width:50px; height:50px; margin-right:-60px; margin-top:-18%; background:url(../img/next-b.png)no-repeat; background-size:contain; outline: none;}

.hot-btn,.hot-btn2 {clear:both; width:12%; min-width:100px; float:right; outline: none;}
.hot-btn2 {margin-top:42%;}

@media (min-width:768px) and (max-width:1047px){
.hot .owl-carousel .owl-nav button.owl-prev
{width:40px; height:40px; margin-left:-45px;}
.hot .owl-carousel .owl-nav button.owl-next
{width:40px; height:40px; margin-right:-55px;}
}

@media (max-width:767px) {
.hot{ width:86%; margin:45% 10% 0;}
.hot .owl-carousel .owl-nav button.owl-prev
{width:35px; height:35px; margin-left:-30px; margin-top:-50%}
.hot .owl-carousel .owl-nav button.owl-next
{width:35px; height:35px; margin-right:-35px; margin-top:-50%}
.hot-btn,.hot-btn2 {width:30%;min-width:85px;}
.hot-btn2 { margin-right:35%; margin-top:170%;}
}



/*****s5 數存帳戶設定 *****/
#section5{ position:relative; clear:both; width:100%; margin-top:-50px; padding-top:50px; overflow:hidden;}
.s5-main { width:38%;margin:0 auto 50px; background:#FFF;}
.s5-btn { clear:both;  width:100%; overflow:hidden; }
.s5-btn1 { float:left; width:63%; }
.s5-btn2 { float:left; width:31%; margin-left:6%; margin-top:13%; }
@media (max-width:767px) {
.s5-main { width:92%; margin-left:4%; margin-bottom:30px;}
.s5-btn1 { width:62%;}
.s5-btn2 { width:38%; margin-left:0;margin-top:10%;}
}



/***** section6 尊榮服務設定 *****/
.s6-main { width:70%; margin:4% 12% 0px;}
.s6-hd { width:22%; margin-left:8%}
.s6-txt { clear:both; width:80%;margin-top:10px; }
.s6-txt1,.s6-txt3,.s6-txt2,.s6-txt4,.s6-txt5,.s6-txt6 { float:left; width:43%; margin-top:22px; margin-bottom:10px}
.s6-txt2,.s6-txt4,.s6-txt6 {margin-left:8%}
.s6-info {  width:90%; margin:20px auto; outline: none;}

@media (max-width:767px) {
.s6-main { width:80%; margin-left:5%; margin-top:15%;}
.s6-hd { width:42%; margin-left:10%}
.s6-txt { clear:both; width:90%; margin-left:5%;}
.s6-txt1,.s6-txt3,.s6-txt2,.s6-txt4,.s6-txt5,.s6-txt6 {clear:both; width:100%; margin-top:15px}
.s6-txt2,.s6-txt4,.s6-txt6 {margin-left:0}
}



/***** modal彈窗 *****/
.modal{ overflow:hidden !important}
.m-box{ height:100vh; display: flex; }/** 固定居中 **/
.modal-dialog{width: 75%; margin: 20px auto; }
.modal-content{width: 100%; padding:50px 5px 30px; margin:auto; border-radius:20px ;background:#2d68a9;}
.modal-body{width: 100%; padding:0px 50px 0px;}
.pre-scrollable{overflow-y:auto; max-height:65vh}
.info-close{ position:absolute; width:50px; right:2%; top:2%; cursor: pointer; z-index:99;}
.marg-top{ margin-top:8px}
.pop-top{ margin-top:30px}
.pop-td1{ width:36px;}

.pop-btn{ border:1px #fff solid; border-radius:10px; padding:3px 10px;}

/***** step *****/
.step-dialog{ width: 70%; margin:30px auto; }
.step-content{ margin:auto; background-color:#ffffff;}
.sp-step{ width:100%; margin:auto;}
.step-close{ position:absolute; width:40px; right:2%; top:3%;cursor: pointer; z-index:99; }

@media (max-width:767px) {
.modal-dialog{ width:92%; margin: 10px auto;}
.info-close{width:40px; right:5%; top:1%;}
.modal-content{ padding:40px 10px 30px;}
.modal-body{padding:0px 15px 0px 10px}
.pre-scrollable{overflow-y:auto; max-height:75vh}
/***** step *****/
.step-dialog { width:96%; }
.step-close{ top:1%; }
}



/***** modal2彈窗 *****/
.modal2{ overflow:auto!important}
.m-box{ height:100vh; display: flex; }/** 固定居中 **/
.modal-dialog2{width: 630px; margin:auto; }
.modal-content2{ position:relative; margin:auto; background-color:#e1f0f7; box-shadow:none; border:none; border-radius:3%}
.popup-kv { width:95%; margin:5px auto 0;}
.popup-close{ position:absolute; width:48px; right:3%; top:3%;cursor: pointer; z-index:99; }
.popup-content{ padding:5px 6% 30px }
.popup-btn{clear:both; width:80px; margin:auto; padding-bottom:10px; }
.popup-content td{ vertical-align:text-top; padding-top:3px }
.popup-w5{ font-size:13px; line-height:130%; font-weight:normal; text-align:justify;}

@media (max-width:767px) {
.m-box{ height:90vh; display: flex; }/** 固定居中 **/
.modal-dialog2{ width:90%; margin:auto }
.popup-kv { width:90%; margin:10px auto 0;}
.popup-close{ top:1%; }
.modal-content2{ padding:10px 0; border-radius:10px; }
.popup-content{ padding:0 3% 30px }
}