/*修改*/
body{
    width: 100%;
    background-color: #f7f7f7!important;
    background: url(../images/bg.jpg) no-repeat top fixed !important;
    text-align: center;
    overflow-x: hidden;
 }
a{ text-decoration: none; }
img { border:0; /*display: block; margin: auto;*/  }

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

.wrapper{background: url(../images/kv_bg.png) no-repeat top;}
.wrap-topview, .main-section{background-color: transparent !important;}
/*.main-section{background: url(../images/bg.jpg) no-repeat top fixed !important;}*/
.mobile{display: none;}
.pc{display: block;}
.wrap-topview{display: block !important;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;display: block;padding-top: 70px;max-width: 1320px;}


@-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 !important;margin: -4% 0 5% !important;padding: 2% 2% 8%!important;}
.box_bg{border: 2px solid #333;}
.pid-box{text-align: center;background:#fbfbfb !important;border-radius: 1rem;}
.container .toppic-title{display: none;}

.content_tit{display: block; width: 100%;margin: 0 auto 1%;max-width: 257px;padding-top: 3%;}

/*流程*/
.bonus_list_box{display: flex;flex-wrap: wrap;}
.bonus_list {
  background-color: #3c3c3c;
  -webkit-box-flex: 0;
  margin: 5% auto 3.5%;
  position: relative;
  border: 6px solid #898989;
  border-radius: 5px;
  max-width: 300px;
}
.bonus_list .step {
  background-color: #5069fa;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: -2.8rem;
  left: 1rem;
  padding: 1rem 0.5rem 0;
}
.bonus_list .step span.text {
  font-size: 1.2rem;
  margin-top: 0.9rem;
  color: #FFF;
}
.bonus_list .step span.number {
  font-size: 1.8rem;
  font-style: italic;
  font-weight: bold;
  color: #FFF;
}
.bonus_list img{width: 100%;}
.bonus_list .step_img {
  max-width: 300px;
}
.bonus_list .content {
  padding: 1rem 1.5rem;
  /*min-height: 125px;*/
}
.bonus_list .content p {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #fff;
}

.btn_01{max-width: 321px;margin: 0 auto;animation: fingerHandle 1.4s ease infinite both;}
.btn_01 img{width: 100%;cursor: pointer;}
@keyframes fingerHandle {
    0% {
        transform: none;
    }
    70% {
        transform: scale3d(.9, .9, .9);
    }
    100% {
        transform: none;
    }
}


/*立即體驗*/
.try{display: flex;flex-wrap: nowrap;justify-content: space-evenly;margin: 3% auto 5%;}
.try img{width: 100%;max-width: 610px;cursor: pointer;}
.btn_go_01:hover,.btn_go_02:hover{opacity: 0.9;}


/*轉贈活動*/
.special_box{margin: 3% auto 5%;display: flex;flex-wrap: nowrap;justify-content: space-between;}
.special_01,.special_02{position: relative;margin: 3% auto 5%;}
.special_img{width: 100%;max-width: 610px;}
.btn_img{width: 100%;max-width: 260px;position: absolute;}
.btn_02-1,.btn_04{left: 30%;top: 49%;}
.btn_02-2{right: 5.5%;top: 49%;}
.btn_03{left: 5.5%;top: 49%;}


/*說明*/
.policyBox{background-color: #222;}
.policy {padding: 0 1.8rem 2rem !important;}
#policy h3{border: 1px solid #fff;border-radius: 2rem;width: 30% !important;color: #fff !important;text-align: center;margin: 2rem auto;padding: 0.5rem 0;}
.policy .sub-title{font-weight: bold;font-size: 1.5rem !important;color: #ffd800 !important;}
.sub-title{color: #ffd800;}
.policy ul li {list-style: disc inside!important;padding: 0.5rem 0 0 0.5rem!important;}
.policy ul li span{box-shadow: 0 1px;padding-bottom: 2px;}
.policy ul li span.pink{color: #ff9cb8;}
.policy ul li a{color: #69efff;box-shadow: 0 1px;padding-bottom: 2px;font-weight: 600;}
.policy ul li a:hover{color: #92f3ff;}
.policy p b{color: #ffe9bd;font-size: 1.2rem;}
.policy p{margin-top: 2vh;}
.policy p.example{color: #ffbb9c;margin-top: 1vh;}


/* 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;}
    .bonus_list {width: 24%;}
    .special_img {padding: 3%;}
    .try {margin: 0 auto 3%;}
    .try img {padding: 3%;}
    .btn_img {width: 43%;}
    .btn_02-1,.btn_04{left: 28%}
}

@media(max-width: 1198px){
    .btn_img {width: 43%;}
    .btn_02-1,.btn_04{left: 28%}
}

/* iPad 橫式 1024x768 */
@media(max-width: 1025px){
    /*.nav-tabs .dropdown-menu{width: 192px;}*/
    .title_kv{width: 100%;height: auto;}
    .title_kv img{max-width: 100%;}
    .wrap-topview {height: auto;}
}
/* iPad 直式 size800x600 */
@media(max-width: 970px){
    .wrapper{background: unset;}
    .wrap-topview{display: none !important;margin-top:0 !important;}
    .m-wrap-topview{display: block;position: relative;overflow: hidden;}
    .kv_bg_m{width: 100%;margin: 0 auto;display: block;}

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

    .title_kv{width: 100%;margin: 0;}
    .container{width: 100% !important;max-width: 1140px !important;border-radius: 0 !important;}
    .toppic-pid-box {border-radius: 0 !important;margin: 0% 0 15% !important;padding: 2% 3% 8%!important;}
    .try{display: flex;flex-wrap: wrap;justify-content: space-evenly;}
    .special_box{display: flex;flex-wrap: wrap;justify-content: space-between;}
    .bonus_list {width: 100%;}
}

@media(max-width: 768px){
    body{width: 100%;background-color: #f7f7f7!important;background: url(../images/bg.jpg) repeat top fixed !important;text-align: center;overflow-x: hidden;}
    .m-wrap-topview{display: block;position: relative;overflow: hidden;margin-top: 0;}
    .title{max-width: 100% !important;flex: 0 0 100% !important;/*padding: 2rem 0 0;*/}
    .title_kv{width: 100%;margin:0;}
    .title img{max-width: 100%;}
    .container {max-width: 100% !important;}
    .btn_img {width: 43%;}
    .btn_02-1,.btn_04{left: 28%}
}

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

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

  .title_kv{width: 100%;margin:0;display: block;}
  .title_kv img{max-width: 100%;height: auto;}

  .content_tit {margin: 5% auto;width: 75%;}
  #policy h3{width: 90% !important;}
  .policyBox {padding: 0rem 0 1rem !important;}

  .bonus_list {margin: 10% auto;}
  .try img {margin: 3% auto;}

  .special_01, .special_02 {margin: 6% auto;}
  .btn_img {width: 43%;}
  .btn_02-1,.btn_04{left: 28%}

}
@media(max-width: 415px){
}
@media (max-width: 393px){
}
@media (max-width: 375px){
  .se{display: block;}
}
@media (max-width: 360px){
}
@media (max-width: 320px){
}