/*修改*/
html{
  scroll-behavior: smooth;
}
body{
    width: 100%;
    /*background: url(../images/bg.jpg) no-repeat top fixed ;*/
    text-align: center;
    overflow-x: hidden;

 }
a{ text-decoration: none; }
img { border:0; /*display: block; margin: auto;*/  }

.header{background-color: #666 ;}
.footer{background-color: #000 ;}

.wrapper{
  /* background: url(../images/kv_bg.png) no-repeat top; */
  background-color: transparent ;
}
.wrap-topview{
  background: url(../images/BG_H.png) no-repeat center/contain;
}

.main-section{
  background: url(../images/BG_V.png) no-repeat center/cover fixed;
}

.mobile{
  display: none;
}
.pc{
  display: block;
}

.wrap-topview{
  display: block ;
  position: relative;

}

.m-wrap-topview{
  display: none;
}

/* kv */
.title{padding: 0 0;}
.title_kv{width: 100%;max-width: 1320px;margin: 0 auto;}
.kv{margin: 0 auto 50px;display: block;padding-top: 110px;max-width: 748px;margin-left: calc(50% - 9.5%);}


@-webkit-keyframes updown {
  from{
    transform:translate(0,0)
  }
  to{
    transform:translate(0,20px)
  }
}
@keyframes updown {
  from{
    transform:translate(0,0)
  }
  to{
    transform:translate(0,10px)
  }
}


.contentBox{display: none;}
.contentBox.show{display: block;}
.contentBox .toppic-title {display: none;}

.toppic-pid-box{position: relative; text-align: center;background:#fbfbfb ;margin: -4% 0 5% ;padding: 2% 2% 8%;}
.box_bg{border: 2px solid #333;}
.pid-box{text-align: center;background:#fbfbfb ;border-radius: 1rem;}
.container .toppic-title{display: none;}

/* .coupon_box{
  text-align: center;
  padding: 8% 0 5%;

}
.coupon{
  width: 100%;
  max-width: 1021px;
  margin: 0 auto;
}
.coupon_m{
  width: 100%;
  max-width: 651px;
  margin: 0 auto;
} */

.tag_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-direction: row;
  margin: 5% 0;
}

.tag_img{
  width: 100%;
  /* max-width: 300px; */
  margin: 5% 0;
}

/*說明*/
.policyBox{
  background-color: #222;
  scroll-margin-top: 80px;
}
.policy {padding: 0 1.8rem 2rem ;}
#policy h3{border: 1px solid #fff;border-radius: 2rem;width: 30% ;color: #fff ;text-align: center;margin: 2rem auto;padding: 0.5rem 0;}
.policy .sub-title{font-weight: bold;font-size: 1.5rem ;color: #ffd800 ;}
.sub-title{color: #ffd800;}
.policy ul li {list-style: disc inside;padding: 0.5rem 0 0 0.5rem;}
.policy ul li span{/*box-shadow: 0 1px;padding-bottom: 2px;*/color: #ffcc00;}
.policy ul li a{color: #5ccbff;box-shadow: 0 1px;padding-bottom: 2px;font-weight: 600;}
.policy ul li a:hover{color: #93ddff;}
.policy p b{color: #ffe9bd;font-size: 1.2rem;}
.policy p{margin-top: 2vh;}


/* RESPONSIVE
-------------------------------------------------- */
@media (min-width: 1200px) {
}

/* Between Medium and Small size 1366x 1281 */
@media(max-width: 1366px){
    .float {right: 3.3rem;}
}

/* Between Medium and Small size 1280x 800 */
@media(max-width: 1280px){
    .float {right: 1rem;bottom: 8rem;}
    .kv{margin-left: calc(50% - 13%);}
}

@media(max-width: 1198px){
    .kv{margin-left: calc(50% - 20%);}
}

@media(max-width: 1100px){
    .kv{margin-left: calc(50% - 23%);}
}

/* iPad 橫式 1024x768 */
@media(max-width: 1025px){
    /*.nav-tabs .dropdown-menu{width: 192px;}*/
    .title_kv{width: 100%;height: auto;}
    .title_kv img{max-width: 100%;}
    .kv{margin-left: calc(50% - 27%);}
    .wrap-topview {height: auto;}
}
/* iPad 直式 size800x600 */

@media(max-width: 970px){
    /* .wrapper{background: unset;} */
    .wrap-topview{
      display: none ;
      margin-top:0 ;
      
    }
    .m-wrap-topview{
      display: block;
      position: relative;
      overflow: hidden;
      background: url(../images/BG_v.png) no-repeat center/cover ;


      
    }
    .kv_bg_m{
      width: 100%;
      margin: 0 auto;
      display: block;
    }

    .mm-topBanner-box.container {
      max-width: 100% ;
      margin: 0;
      padding: 0;
    }

    .title_kv{
      width: 100%;
      margin: 0;
      aspect-ratio: 9 / 16;
    }
    .container{
      width: 100% ;
      max-width: 1140px ;
      border-radius: 0 ;
    }
    .toppic-pid-box {
      border-radius: 0 ;
      margin: 0% 0 15% ;
      padding: 2% 3% 8%;
    }

    .pc{
    display: none ;
  }

    .mobile{
    display: block ;
  }
}

@media(max-width: 768px){
    .m-wrap-topview{display: block;position: relative;overflow: hidden;margin-top: 0;}
    .title{max-width: 100% ;flex: 0 0 100% ;/*padding: 2rem 0 0;*/}
    .title_kv{width: 100%;margin:0;}
    .title img{max-width: 100%;}
    .container {max-width: 100% ;}



}

/* APP and mobile */
@media (max-width: 500px){
  
	.container .toppic-title h3.m-title{
    display: block;
  }
	.container .toppic-title h3{
    font-size: 1.4rem ;
    line-height: 1.1 ;
  }
  .container .toppic-title{
    margin-bottom: -0.5rem ;
    display: block;
    border-radius: 0 ;
    /* background-color: #ffc89c ; */
  }
  .contentBox .toppic-title {
    margin-bottom: -0.5rem ;
    display: block;
  }
    

	.toppic-pid-box h4{
    font-size: 1.4rem;
    padding: 0.3rem 0;
  }
  .mobile{
    display: block ;
  }
  .pc{
    display: none ;
  }


  .title_kv{
    width: 100%;
    margin:0;
    display: block;
    aspect-ratio: 9 / 16;
  }
  .title_kv img{
    max-width: 100%;
    height: auto;}

  .tag_img{
    /* max-width: 160px; */
    margin: 5% 0;
  }

  #policy h3{width: 90% ;}
  .policyBox {
    padding: 0rem 0 1rem ;
  }

}



@media(max-width: 415px){
}
@media (max-width: 393px){
}
@media (max-width: 375px){

  .se{
    display: block;
  }

  .tag_img{
    /* max-width: 150px; */
    margin: 5% 0;
  }
}
@media (max-width: 360px){
}
@media (max-width: 320px){
}