/*

reset boostrap
common 
  共用模組
  icon
  form
  navbar
  footer

Layout
  layout 共用
  KV-box
  section_1 任意回饋這樣刷
  section_2 天天回饋
  section_3 綁卡教學
  section_4 更多優惠
  func-menu 立即辦卡/立即下載/任意回饋這樣刷/天天回饋/綁卡教學/更多優惠/GOTO
  


*/



/* //////////////////////////reset boostrap////////////////////////// */
.container{padding:0 40px;}

@media (min-width:992px){
  .container{margin-right:auto; margin-left:auto; max-width: 1440px;}
}
@media (max-width:991px){
  .container{margin-right:auto; margin-left:auto; max-width: 100%;}
}

@media (max-width:767px){
  .container{padding:0 40px;}
}
@media (max-width:460px){
  .container{padding:0 20px;}
}
/* //////////////////////////common////////////////////////// */

* {margin: 0; padding: 0; outline: 0;}
* {margin: 0; padding: 0; outline: 0;}
*, *:before, *:after {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;   }
html {scroll-behavior: smooth}
html, body {
 font-size: 10px;
 font-family: 'Noto Sans TC',Arial, sans-serif,"微軟正黑體", Microsoft JhengHei;
 line-height: 1.4;
 color: #4c4c4c;
}

a{ color: #4c4c4c;text-decoration:none; }
a:hover {
    color: #f35923;
    text-decoration: underline;
}

 ul, li {    margin: 0; padding:0; list-style-type: none;}
.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

h1, h2, h3, h4{ color: #200833; font-size: 2.6rem; font-weight: bolder; }
h1{  font-size: 3.6rem; color: #ff8f1f; }
h2{  font-size: 2.4rem; }
h3{  font-size: 2.2rem; }

p{ font-size: 1.8rem; line-height:1.5;}



/*
.fleft{ float: left; }
.fright{float: right;}
.ps{color:#b3b3b3;}
hr{ height: 0;font-size: 0;border: 0; border-bottom: 1px solid #e7e7e7;  padding:0; margin: 20px 0 20px 0; }



figure{margin:15px 0 35px 0;  font-size: 1.6rem; }
figure img{max-width:100% ; width: auto; }
figcaption{ color: #878787; font-size: 1.6rem; margin-top: 10px;}

*/

body{
  background:#cfcaff url('../img/bg.png') no-repeat 50% 0 ;
}


  .m-hidden{display: inline-block; }
  .m-show{display: none; }


@media (max-width:767px){
  h1{  font-size: 3.2rem; }
  h2{  font-size: 2.8rem; }
  h3{  font-size: 2.4rem; }
  p{font-size: 1.8rem; }
  .ps{font-size:1.4;}
  #PageTop{
    margin-top: 35px;
  }

  body{
    background:#cfcaff url('../img/bg-m.png') no-repeat 50% 35px / contain;
  }

  .m-hidden{ display: none!important; }
  .m-show{display: block!important; }



}


/* == modal== */

/* ====icon==== */


.ic{ 
  height: 20px; width: 20px; 
  display: inline-block; 
  background-position: 0 0; 
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: bottom;
}

.ic-s{ width: 12px; height: 12px; }
.ic-l{ width: 24px; height: 24px; }

.ic-award{ background-image:url(../img/icon/ic-card-award.png) ; }
.ic-award-title{ background-image:url(../img/icon/ic-award-title.png) ; }
.ic-date{background-image:url(../img/icon/ic-card-calendar.png) ;}
.ic-clock{background-image:url(../img/icon/ic-clock.png) ;}
.ic-countdown{background-image:url(../img/icon/ic-card-hourglass.png) ;}
.ic-company{background-image:url(../img/icon/ic-card-company.png) ;}
.ic-thumback{background-image:url(../img/icon/ic-thumback-white-fill.png) ;}
.ic-thumbacking{background-image:url(../img/icon/ic-thumbacking.png) ;}

.btn .ic{margin:0 2px; vertical-align: middle;}




/* ====navbar==== */
  header{display: none}
/* <nav class="navbar navbar-expand-lg"> */




.navbar{padding:0;width: 100%;}

.navbar-brand {  
    padding-top:0;
    padding-bottom: 0;
    margin-right:0;
    padding-right:0px;

}

/* <div class="collapse navbar-collapse" id="navbarMenu"> */
#navbarMenu{
 flex-direction: column;
  align-items: flex-end;
}

/*
第一層hover active 效果 
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus, .navbar-nav .nav-link.active{ color:#000;}
*/

.navbar-shrink{ 
  background-color: rgba(255,255,255,.9); 
  height: 85px;
 box-shadow: 0 0px 4px rgba(0,0,0,.1);

}


@media (min-width: 992px) {
  header{
      display: none;
      align-items: center;
      position: fixed;
      z-index: 99;
      left: 0;
      top: 0;
      right: 0;
      padding: 0 36px;
  }
  #navbarMenu{  display: none!important;}
   #navbarMenu .nav-link{margin-right: 12px;}
   #navbarMenu .nav-fb{position: absolute; right:   0; top:   -4px; margin-top: 0;}
   #navbarMenu .nav-fb:hover, #navbarMenu .nav-fb:focus{top: 0;}
 #navbarMenu .nav-link{
    font-size: 20px;
    color: #0070bc;
    font-weight: bold;
    display: inline-block;
    border: 2px solid #23b6bd;
    background-color: #fff;
    box-shadow: 2px 4px  0 #048b99;
    line-height: 40px;
    padding: 0 28px;
    border-radius: 40px;
    
  }
  #navbarMenu .nav-fb{
    color: #000;
    font-size: 14px;
    padding: 0 15px;
  }
  #navbarMenu .nav-fb img{width: 30px;}
  #navbarMenu .nav-link:hover,
  #navbarMenu .nav-link:focus{
    box-shadow: 0 2px 0 #038b97; 
    color:#23b6bd;
    margin-top: 0;
    
  }



}

/* <ul class="container navbar-nav"> */
.navbar-nav{ 
  justify-content: flex-start;
  align-items: center; 
  margin:0;
  max-width:100%;
  position: relative;
  height: calc(44px + 4px);
}
.navbar-expand-lg .navbar-nav .nav-link{padding:0; margin-top: -4px;}


@media (min-width: 992px) and (max-width: 1200px) {

#navbarMenu .nav-link{
  padding: 0 15px;
  font-size: 17px;
}


}


/* mobile head */
.navbar-toggler{ background-color: transparent;  border: 0;  }
.navbar-toggler:focus{outline: 0 !important;box-shadow: 0 0 0 0;}
.navbar-expand-lg .navbar-toggler-icon{ 
  background: transparent url('../img/ic/ic_nav_close.png') 0 0 no-repeat; 
  background-size: cover;
  height: 40px; width: 40px;
  cursor: pointer;
}
.navbar-toggler.collapsed .navbar-toggler-icon{ background: transparent url('../img/ic/ic_nav_hambergur.png') 0 0 no-repeat;background-size: cover;  }
.navbar-light .navbar-toggler-icon:hover, .navbar-light .navbar-toggler-icon:focus{ opacity: 0.8; }





@media (max-width: 767px) {
    header{
        height:35px;
        background-color:#fff;
        padding:0;
        display: flex;

    }

    #navbarMenu .navbar-toggler{
      position: absolute;
      right:  -60px;
      top:  -60px;
    }

    .btn-menu-close{ width:72px; height:72px;display:inline-block; position: relative; }
    .btn-menu-close img{ max-width:100%;}

    #navbarMenu{
      position: fixed;
      bottom:0;
      right: 0px;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,.5);
      height: auto!important;
    }

    #navbarMenu .box{ 
      transform: translateY(50%);
      width: 60%; 
      margin:0 auto;
      border-radius: 60px;
      box-shadow: 4px 4px 0  #7055bc, 1px 1px  0 #ffe3e9 inset;
      padding: 6%;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f182dd+0,a171ed+100 */
     background: linear-gradient(to bottom,  rgba(241,130,221,1) 0%,rgba(161,113,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    }
    #navbarMenu .box:before{
      content: '';
      display: block;
      border:2px solid #ffe3e9;
      top: 12px;
      bottom: 12px;
      left: 12px;
      right: 12px;
      position: absolute;
      border-radius: 56px;
    }

    #navbarMenu .nav-item {
        text-align: center;
        font-size: 5vw;
        font-weight: 500;
        padding: 0 20px;
        
    }
    #navbarMenu .nav-item:last-of-type .nav-link{border-bottom:0px solid #fff; }

    #navbarMenu  .nav-link{color: #fff;  border-bottom:2px solid #fff; display:block; padding: 1em 0;}
    #navbarMenu  .nav-link:hover,#navbarMenu  .nav-link:focus{color: #3b7ae0; text-decoration: none}

    #navbarMenu .navbar-nav{margin-top: 0px;     align-items: stretch; height: auto;}
    .navbar-brand img{ height:18px; width: auto; }
    .navbar-shrink{/* height: 44px; */}

 

    header{ 
    position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 99;
    }

    header .navbar{

      padding:0 28px;
    }
     #navbarMenu .nav-fb img{width: 30px;}



}


@media (max-width: 460px) {
        .btn-menu-close {    width: calc(72px * .6);      height: calc(72px * .6);        }
        #navbarMenu .box {   border-radius: calc(60px * .6);      }
        #navbarMenu .box:before { border-radius: calc(56px * .6);  }
        #navbarMenu .navbar-toggler{ top:calc(-60px * .6); right:  calc(-60px * .6); }

}

/* ====swiper==== */

.swiper {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0 62px;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

.swiper-button-next, .swiper-button-prev{
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #cfcaff!important;
  opacity: 1!important;
  margin-top: 0;
  display: block;
  height: 100%;
  width: 62px;

}
.swiper-button-prev.swiper-button-disabled:after, .swiper-button-next.swiper-button-disabled:after{ opacity:.35; }

.swiper-button-next{ right:0; left: auto; text-align: right;}
.swiper-button-prev{ left:0; right: auto; }

.swiper-button-next:after, .swiper-button-prev:after {
   width: 29px;
   height: 104px;
   display: block;
   transform: translateY(-50%);
    position: absolute;
    top: 50%;

}


.swiper-button-next:after {
    content: '';
    background: url(../img/swiper-right.png)  no-repeat 0 0;
    right: 0;
}
.swiper-button-prev:after{
  content: '';
  background: url(../img/swiper-left.png) no-repeat 0 0;

}





.swiper-slide{ display:flex; flex-wrap:wrap; }
.swiper-slide .img, .swiper-slide .text{ width:100%; margin-top: 15px;}
.swiper-slide .text > span{ display:block; color:#9887cc; font-weight:700; font-size:16px;margin-bottom:5px; }
.swiper-slide .text{color: #4d4d4d; font-size: 21px; font-weight: 500;}




@media (max-width:460px){
    .swiper-button-next:after, .swiper-button-prev:after {
       width: 15px;
       height: 52px;
       display: block;
       background-size: cover;

    }
    .swiper{padding: 0 32px;}
    .swiper-button-next, .swiper-button-prev{ width:32px; }
}

/* ====footer==== */

 footer{
    
    background-color: #888888;
    color: #fff;
 }
 footer .box{ 
    max-width: 1440px;
    padding: 13px 90px 22px 90px; 
    margin: 0 auto ;
  }
  footer .text1, footer .text2{width: 1218px; max-width:100%; margin:0 auto;}
  footer .text1 img{width: 100%; }
  footer .text2{
    font-size: 22px;
    line-height: 1.18;
    font-weight: 300;
    
  }

 

@media (max-width:767px){

  footer .box{ padding: 13px 40px  22px 40px ; }
  footer .text2{
    font-size: 13px;
    margin-top: 15px;
  }

}


@media (max-width:460px){
  footer .box{ padding: 13px 20px  22px 20px ; }
}



/* //////////////////////////Layout////////////////////////// */

/* ====共用==== */



#section_1 .box,
#section_2 .box,
#section_3 .box,
#section_4 .box{
  text-align: center;
}

#section_1 .box,
#section_2 .box,
#section_3 .box,
#section_4 .container{
  max-width: 1050px;
  margin-right:auto;
  margin-left: auto;
}


#section_1 .title,
#section_2 .title,
#section_3 .title,
#section_4 .title{
  text-align: center;
}

#section_1 .title img,
#section_2 .title img,
#section_3 .title img,
#section_4 .title img{
 max-width: 100%;
 margin-left:auto;
 margin-right: auto;
}

#section_1{padding-bottom: 80px;}
#section_2, #section_3 ,#section_4 .box{
    padding: 80px 0;
}


@media (max-width:767px){
 
}

@media (max-width:460px){
  #section_1{padding-bottom: 40px;}
   #section_2, #section_3 ,#section_4 .box{
      padding:40px 0;
  }
  
}


/* ====KV-box==== */
.KV-box{padding-bottom: 58px; padding-top: 33px;}
.KV-box .container{ 
  text-align: center;
  padding:0 40px;

}
.KV-box .container .box{
  max-width: 1050px;
  margin: 0 auto;
}

.KV-box .title{}
.KV-box img{max-width: 100%;}
.KV-box .exp{
  display: flex;
}
.KV-box .exp > div{
  width: calc((615 / 1099) * 100%);
}
.KV-box .exp > div:last-of-type{
  width: calc(((1099 - 615) / 1099) * 100%) ;
}

@media (max-width: 767px) {
    .KV-box {padding-bottom: 55px; padding-top: 24px;}
    .KV-box .title{width: 90%; margin:0 auto;}
    .KV-box .container{padding:0;}
    .KV-box .exp{flex-direction: column;}
    .KV-box .exp > div, .KV-box .exp > div:last-of-type{ width:78%; margin:0 auto;}

}











@media (max-width: 991px) {
  

    .btn-menu > span{ position: relative; }
    .btn-menu > span img{ width:22px; }
    .navbar-toggler{padding:0}

.btn-menu-close{}

.collapsing{display: block; }
button[aria-expanded="true"] .ball-btn img.ic-menu{ visibility: hidden;}
button[aria-expanded="true"] .ball-btn img.ic-menu-close{ visibility: visible;}

.collapsing,
button[aria-expanded="true"] .ball-btn img.ic-menu,
button[aria-expanded="true"] .ball-btn img.ic-menu-close{transition: all .1s;}


  
}
/* ====section_1 任意回饋這樣刷==== */


#section_1{}
#section_1 .title{
  margin-bottom: 20px;
  text-align: center;
  padding: 12px 5px;
}
#section_1 .exp{
  font-size: 30px;
  line-height: 1.6;
  color: #000;
  font-weight: 500;
  text-align: left;
  padding-bottom: 60px;
}


#section_1 .box{
  box-shadow:0 0 12px rgba(84,39,114,.75);
  border-radius: 50px;
  background-color: #fff1e6;
  padding:55px;
}


/* TAB */
.tab-box{
    margin-bottom: 70px;
}
.tab-nav{
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tab-nav .tablinks{
  border-top-left-radius: 14px;
  border-top-right-radius:14px;
  border:3px solid #000;
  border-bottom-width: 0;
  font-size: 28px;
  color: #b3b3b3;
  font-weight: 500;
  background-color: #f2f2f2;
  line-height: 1.2;
  margin: 0 6px;
  padding: 0 15px;
  width: 340px;
  text-align: center;
}

.tab-nav .tablinks > span{ font-size:1.4285em; font-weight: 700;}
.tab-nav .tablinks.active{
  background-color: #000;
  border:5px solid #000;
  color: #fff;
  padding:2px 15px;
}
.tab-box .tabcontent{
  display: none;
  border-radius: 10px;
  border:2px solid #000;
  border-top-width:12px;
  border-bottom-width:12px;
  background-color: #fff;
  padding:40px 30px;

  
}

.sbox-area{
  display: flex;
  justify-content: center;
  align-items: center;
}
.sbox-area .sbox{ flex:0 260px; }

.sbox{
  border:4px solid #9a82ff;
  border-radius: 14px;
  font-weight: 500;
}

#section_1 .sbox .title{margin-bottom: 0;}
.sbox .title{
  font-size: 26px;
  line-height: 1.2;
  background-color: #9a82ff;
   color: #fff;
}
.sbox-o{border-color:#f08c00;}
.sbox-o .title{ background-color: #f08c00;}

.sbox .title span{ 
  display:block;
}
.sbox .cont{
  color: #5546aa;
   font-size: 24px;
   padding:20px 0;
}
.sbox .cont strong{font-size:1.68em; font-weight: 900; color: #ff1a36; display: block; margin:0 5px;}
.sbox .cont strong span{ font-size: 1.36em; line-height: 1}
.sbox .more, .sbox2 .more{ 
  height:30px; 
  line-height:30px; 
  color:#fff; 
  font-weight:500; 
  background-color:#009245;
  display: inline-block;
  text-decoration: none;
  font-size: 18px;
  border-radius: 15px;
  padding:0 12px;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
}
.add{
  font-family: 'Arial';
  font-size: 44px;
  font-weight: 900;
  color: #000;
  margin:0 7px;
  line-height: 1;
}
.sbox-ps{
  margin-top: 20px; 
  margin-bottom: -20px;
  font-size: 18px;
  font-weight: 500;
}

.sbox-ps a{
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
   display: inline-block;
   margin-left:10px;
}
.sbox-ps a:hover{text-decoration:none;}

/* sbox2 */
.sbox2{
    border: 4px solid #ff1a36;
    border-radius: 14px;
    font-weight: 500;
    background-color: #fff;
    padding:0 15px 0 15px;
    position: relative;
    margin:0 10px;
    flex: 1;

}
.sbox2:first-of-type{
  margin-left: 0;
}
.sbox2:last-of-type{
  margin-right: 0;
}

#section_1 .description{
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
#section_1 .sbox2 .title{
  color: #fff;
  border-radius: 23px;
  padding:4px 23px;
  font-size: 26px;
  font-weight: 500;
  background-color: #ff1a36;
  margin-bottom: 0;
  display: inline-block;
  position: relative;
  top:-25px;
}
.sbox2 .cont{
  font-size: 30px;
  color: #000;
  font-weight: 500;
  position: relative;
  top:  -10px;
  padding-bottom: 10px;
}
.sbox2 .cont > span{ display:block; }
.sbox2 .cont strong{ color:#ff1a36;  }
.sbox2 .cont strong i{ font-style:normal; font-weight: 700; font-size: 2em;}
.sbox2 .cont font{color: #808080; font-size:0.733em;}

.f-blue{ color:#5546aa; font-size:0.733em; }

#section_1 .btn{ display:flex; justify-content:center; align-items:center; }
#section_1 .btn img{ width:50% }

@media (max-width: 1023px) {
    .sbox .title,
    #section_1 .sbox2 .title{font-size: 24px;}
    .sbox .cont
    .sbox2 .cont{font-size: 22px;}
    .sbox-area{ flex-direction:column; }
    .sbox-area .sbox{width: 100%; flex: 1;}
    .sbox-area, .sbox-ps{ max-width:100%; width: 440px; margin-right:auto; margin-left:auto;}
    .sbox2:first-of-type, .sbox2:last-of-type{ max-width:100%; width: 480px; margin-right:auto; margin-left:auto;}
    #section_1 .description{ display:block; }
    .sbox2:first-of-type{
      
    }
    .sbox2:last-of-type{
      
      margin-top: 40px;
    }
    .sbox, .sbox2{border-width: 5px;}
    .sbox-ps > div{ display: block; margin:5px 0;}
}


@media (max-width: 767px) {
    .sbox .title span{display: inline;}
    .tab-nav .tablinks{font-size: 20px;  width: auto; padding: 5px 15px;}
    .tab-nav .tablinks.active{padding: 8px 15px;}
    .tab-box .tabcontent{padding-top: 30px; padding-bottom: 30px;}
    .sbox .cont strong{ display:inline; }
    .m-block{ display: block;}
    .sbox .cont{padding:0 15px 15px;}
    #section_1 .box {
        box-shadow: 0 0 15px rgba(84, 39, 114, .5);
        border-radius: 25px;
        background-color: #fff1e6;
        padding: 27px 30px;
        max-width:100%;
        margin: 0 auto;
    }
    .sbox-ps img{margin:0;}
    .tab-box{
      margin-bottom:30px;
    }
    
    #section_1 .description{
      padding: 40px 0  60px 0;
    }
    .tab-nav .tablinks{  border:2px solid #000;}
    

    
    
   

}

@media (max-width: 460px) {
  #section_1 .exp{font-size: 24px;}
    .tab-box .tabcontent{padding: 30px 20px;}
    .tab-nav .tablinks{font-size: 16px; height: auto; padding: 5px;}
    #section_1 .title{margin-bottom: 0}
    .sbox2:first-of-type, .sbox2:last-of-type {
        max-width: 100%;
        margin-right: 20px;
        margin-left: 20px;
        width: auto;
    }
    .sbox .title, #section_1 .sbox2 .title {
        font-size: 20px;
    }
    .sbox2 .cont, .sbox .cont{ font-size:20px; }
    #section_1 .sbox2 .title{ padding-right:15px; padding-left:15px; }
}



/* 活動注意事項 */
.btn-more {
  border-radius: 20px;
  border:4px solid #fff;
  background-color: #f08c00;
  padding:15px 48px;
  margin: 40px 0;
    
}
.btn-more #title{
  font-size: 40px;
    font-weight: 500;
    color: #fff;
    text-align: left;

    display: flex;
    align-items: baseline;
    justify-content: flex-start;
   

}
.btn-more #title strong{   
    margin-right: 5px;
}

.btn-more #title .pattern{
   background: url(../img/sec-1-toggler-title-pattern.png) repeat-x 0 50%;
   height: 27px;
   flex: 1;
   margin-left:15px;
   margin-right: 15px;
}

.btn-more #title #go{ cursor: pointer; width: 30px;   flex: 0 30px;}
.btn-more #title #go.active{ 
    transform:rotate(90deg);
   
}
  


.btn-more #title:after{
  content: '';
  display: inline-block;

  
   transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
 
    margin-left:15px;
    transition: all 0.5s;
}
.btn-more #title.active:after{
   transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
   margin-bottom: 5px;
  
}
#precautions{
  display: none;
  transition: all 0.5s;   
  margin-top: 20px;
  font-size: 18px;
  text-align: left;
  font-weight: 500;
  color: #fff;
}
#precautions a{ text-decoration:underline; color: #fff;}
#precautions a:hover{ text-decoration:none; }

#precautions ol{ } 
#precautions ol li{list-style-type: decimal;}
#precautions ol u{ font-weight:bold; }
#precautions ul{  margin-left: 1.2em;}
#precautions li{margin-bottom: 10px;}

#precautions .cor-box{
  border-radius: 15px;
  padding: 30px;
  background-color: #fff;
  margin-bottom: 20px;
  color: #000;
  font-weight: 500;
}
#precautions .cor-box .stitle{color: #f08c00;  font-weight: 700;}
.cor-box .list-item{ 
      display:flex; 
      align-items:flex-start; 
      justify-content:flex-start; 
      margin-top: 15px;
      font-size: 1.1em;
    }
.cor-box .list-item div:first-of-type{
  border-radius: 15px;
  background-color: #f08c00;
  color: #fff;
  padding:0 .7em;
  line-height: 30px;
  font-size: 1.05em;
  white-space: nowrap;
  margin-right: 10px;
}


#precautions .stitle{
  font-size: 1.33em; 
  color: #fff;
  margin-bottom: 10px;

}

#precautions .end{
  display: flex;
  margin-top: 20px;
}
#precautions .end:before,
#precautions .end:after{
  content: '';
  display: block;
}
#precautions .end:before{ 
  height:27px; flex:1; 
  background: url(../img/sec-1-toggler-title-pattern.png) repeat-x 0 50%;
  margin-left: -48px;
}
#precautions .end:after{ 
  width:50px; height:38px; 
  transform: rotate(180deg); 
  background: url(../img/quotation.png) repeat-x 0 50% /cover;
}


@media (max-width: 767px) {
      .btn-more{padding:20px 25px; border-width: 3px;}
      .btn-more #title{font-size: 30px;}
      #precautions{ font-size:16px; }
      .btn-more #title strong img { width:40px;vertical-align: baseline; }
      #precautions .end:after{         height: 30px;        width: 40px;}
      #precautions .cor-box{ padding:10px 20px; }
}

@media (max-width: 460px){
    .btn-more #title{ font-size:24px; }
        .btn-more {
        padding: 10px 15px;
    }
    .cor-box .list-item div:first-of-type{margin-bottom: 10px;}
    .cor-box .list-item{ flex-direction:column; }
    .btn-more #title strong img{ width:24px; }
      #precautions .end:after{   height: 18px;  width: 24px;}
      #precautions .end:before, .btn-more #title .pattern { height: 18px; }
      .btn-more #title #go{ height:22px; }
}

/* ====section_2 icash Pay 天天回饋日 再疊加!!==== */
#section_2,
#section_3{
  background-color: #f9e7d4;
}

#section_2 .title{padding-bottom: 14px; }

#section_2 .sub-title,
#section_3 .sub-title,
#section_4 .sub-title{ 
  text-align:center; 
  font-size: 40px;
  line-height: 1.4;
  color: #000;
  font-weight: 500;
  margin-bottom: 40px;
  margin-top: 10px;
  display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;


}
#section_2 .ps{
  font-size: 21px;
  color: #000;
  text-align: left;
  padding-top:20px;
}
#section_2 .ps a{
  font-size: 21px;
  text-decoration: underline;
  color: #009eff;
}
#section_2 .ps a:hover{ text-decoration:none }



.i-table table{
    border-collapse:separate;
    border-spacing:2px;
    width: 100%;
}
.i-table th, .i-table td{
  padding:5px 10px;
  background-color: #fff;
  line-height: 1.25;
  font-weight: 500;
  color: #f08c00;
  text-align: center;
}
.i-table th{ 
      background-color:#f08c00 ; 
      color: #fff; 
      font-size: 24px;
   
    }
    .i-table th:first-of-type{border-top-left-radius: 22px;}
    .i-table th:last-of-type{border-top-right-radius: 22px;}
.i-table td{
  font-size: 32px;
  line-height: 1.25;
  font-weight: 400;
  vertical-align: middle;
}
    .i-table td strong{ font-size:30px;font-weight:700; }
    .i-table tr:last-child td:first-of-type{border-bottom-left-radius: 22px;}
    .i-table tr:last-child td:last-of-type{border-bottom-right-radius: 22px;}

    .i-table th:last-of-type{ background-color:#ff1a36 }
    .i-table td:last-of-type{ background-color:#fff0f8; color:#ff1a36; font-size:45px; font-weight:700; }

    .i-table td:nth-of-type(4){  width:calc(100% - 15% - 15% - 18% - 100px - 100px); }
.i-table .partner{ margin:0 18px; }

@media (max-width: 767px) {
   #section_2 .title{padding-bottom: 0;        margin-bottom: -5px;}
   #section_2 .sub-title img:last-of-type{
    display: block;
    margin:10px auto;
   }
    .i-table th{font-size: 18px; white-space: nowrap;}
    .i-table td{font-size: 28px;}
    .i-table td strong{ font-size:21px;}
    .i-table td:last-of-type{font-size:36px;}
    #section_2 .ps{font-size: 18px;}
    .i-table  .partner{ max-height: 40px; margin:0 10px; }

    #section_2 .sub-title, #section_3 .sub-title, #section_4 .sub-title{      font-size: 40px;    }
    #section_2 .sub-title .m-block{ width:100% }

}
@media (max-width: 740px) {
.i-table{ width:100%; overflow-x:scroll; }

}

@media (max-width: 460px){
  #section_2 .sub-title img:last-of-type{ height: 50px;}
  #section_2 .title{padding-bottom: 10px; }
  #section_2 .sub-title, #section_3 .sub-title, #section_4 .sub-title{    font-size: 24px;   }

    
}


/* ====section_3 綁卡教學==== */

#section_3{
    background-color: #fff;
}

#section_3 .btn-box,
#section_4 .btn-box{
  text-align: center;
}
.swiper-out-box{
  padding: 30px 20px 30px 20px;
  border-radius: 50px;
  border:1px solid #fff;
  background-color: #cfcaff;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
}


.stepSwiper .swiper-slide .img{
  border-radius: 50px;
  border:8px solid #e6e6e6;
  overflow: hidden;
}
.stepSwiper .swiper-slide img{
  
}

@media (max-width: 767px) {

  .stepSwiper .swiper-slide .img{
    border-radius: 30px;
    border:6px solid #e6e6e6;
  }
}

@media (max-width: 460px) {

  .stepSwiper .swiper-slide .img{
    border-radius: 19px;
    border:4px solid #e6e6e6;
  }
}


/* ====section_4==== */
#section_4{}

.moreSwiper{
  padding-bottom: 40px;
}

.item-box{ 
  text-align:center; 
  font-size:18px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(40,38,112,.75);
  padding: 25px 5px;
  width: 240px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.item-box .cont{flex: 1}
/*.item-box .stitle,.item-box .date,.item-box .wording,.item-box .btn{width: 100%;}*/
.item-box .stitle{ font-size:1.44em; color:#7a74d1; font-weight:700; margin-bottom:10px; }
.item-box .date{ font-size:1em; color:#7a74d1; font-weight:400; margin-bottom:10px}
.item-box .wording{ font-size:1em; color:#666666; font-weight:500; }
.item-box .wording .f-red{font-size:2.44em; color:#ff1a36; font-weight:700; line-height: 1.3;}
.item-box .wording .f-red strong{  font-size:1.3636em; }
.item-box .btn{font-size: 1em}

.item-box .btn a{ 
  color:#fff; 
  display:inline-block; 
  width:134px; 
  height:38px; 
  line-height:1; 
  font-size:1em; 
  background-color: #fda943;
  border-radius: 20px;
  padding: 7px 21px;
}
.item-box .btn a:hover{ text-decoration:none }


.moreSwiper .swiper-slide{padding:5px; }



#section_4 .box:last-child{
  background-color: #f9e7d4;
}

#section_4 .box:last-child .swiper-button-next, 
#section_4 .box:last-child .swiper-button-prev{
  background-color: #f9e7d4!important;
}
#section_4 .btn-box img{ max-width:80% }



@media (max-width: 767px) {
  


}



/* ==== func-menu 側欄快速連結 ==== */
.func-menu{
  width: 143px;
  z-index: 9;
  text-align: center;
  position: fixed;
  top:50%;
  right:0px;
  transform: translateY(-50%);
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;

}
.func-menu,.func-box a,.func-box img{ 
  display:block; 
  vertical-align: top; 
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
  margin-top: -1px;
}
.func-box, .func-box a{font-size: 0;
  letter-spacing: 0;
  line-height: 0;
}

.btn-creditCard{
  background:  url(../img/btn-creditCard.png) no-repeat 0 0 / cover;
  width:132px;
  height: 132px;
  display: inline-block;
  margin-bottom: 5px;
}


/* app-download */
.app-download{
  background:  url(../img/app-download.png) no-repeat 0 0 / cover;
  width:143px;
  height: 167px;
  
}
.app-download a{position: absolute; top: 0; right: 0; left: 0; bottom: 0; visibility: hidden;}





/* gotop */
.cd-top {
  display: inline-block;
  height:82px;
  width: 82px;
  margin: 12px auto 0 auto;


  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../img/ic-go-top.png) no-repeat center / cover;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;

}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .8;
}
.no-touch .cd-top:hover ,.no-touch .cd-top:focus{
  opacity: 1;
}




@media (max-width:767px){
    .func-box{display: none;}
    .btn-creditCard{
        width:110px;
        height: 110px;
    }

    .app-download{
        width: 122px;
        height: 142px;
        background: url(../img/app-download_m.png) no-repeat 0 0 / cover;
        margin-right: auto;
        margin-left: auto;
    }
    /*.app-download a{ visibility:visible; }*/
    .cd-top{
       height:68px;
       width: 68px;
       margin-right: auto;
       margin-left: auto;
    }

}

@media (max-width:460px){


  .func-menu{  width: 80px;}
  .btn-creditCard {
        width: 60px;
        height: 60px;
    }
   .app-download{ width:80px; height:93px; }  
   .cd-top{ width:44px; height:44px }
  
}