body,html { background: #bfe5fb;overflow-x: hidden; width:100%}
#mtkContainer { position: relative; width: 100%;background: #bfe5fb;}
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

header.header { background: url(../images/headerBG.jpg) top center no-repeat;  height:792px; }
header h1 .mobile {display: none;}
header .red { text-align: center;}
header .red img {width: 100%; max-width: 1204px; }
header h1 .hand{position: absolute; right:50%; bottom: 34%; margin-right: -486px;}

.header .coin0{position: absolute;top:-150px;left:10%;}
.header .coin{position: absolute;top:-150px;left:3%;}
.header .coin2{position: absolute;top:-150px;right:10%;}
.header .coin3{position: absolute;top:-150px;right:5%;}
a:hover,a:visited {text-decoration:none;}

.mobile{display: none;}
.width1400 { margin: 0 auto; width: 90%; max-width: 1300px; }
.repeatBG .bgRed{text-align: center;}
.repeatBG {background: url(../images/repeatBG.jpg) top center repeat-y ;}
.repeatBG .bgYellow {background: #88c932; border-radius: 20px;margin-top: -114px; position: relative;text-align: center; margin-bottom: 50px;}
.repeatBG .bgYellow .nowjoinBox .newJoin {margin: 0 auto; width: 64.6%; max-width: 840px;margin:-200px 0 0 -70px;}
.repeatBG .bgYellow .nowjoinBox .newJoin:hover{transform:  translate(0px,-20px);-webkit-filter: brightness(108%); filter: brightness(108%);transition: .5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;}
.repeatBG .bgYellow .nowjoinBox{position:relative;}

.repeatBG .width1400 h2 {width: 100%;max-width: 644px; position: absolute;
    left: 50%;
    top: -5%;
    margin-left: -322px;     z-index: 99;}

.repeatBG .width1400 .collect h2{top: 3%;}
.repeatBG .width1400 h2 img {width: 100%;}
.repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:22%;top: 0;margin:-60px 0 0 0;}




.repeatBG .bgYellow .box1 {margin: 20px 0;}
.repeatBG .bgYellow .box1 .foursale {width: 24%; display: inline-block;cursor: pointer;}
.repeatBG .bgYellow .box1 .foursale:hover{transform:  translate(0px,-10px); transition: .4s;-moz-transition:.4s;-webkit-transition:.4s;-o-transition:.4s;}
.repeatBG .bgYellow .box1 .foursale img {width: 100%;max-width: 298px;}
.repeatBG .bgYellow .box2 {position: relative; }
.repeatBG .bgYellow .box2 .car {width: 100%;
    max-width: 1311px;     padding-top: 43px;}
.repeatBG .bgYellow .box2 > div .stepText { display: inline-block;}
.repeatBG .bgYellow .box2 > div .stepText h3 {font:40px/1.2em "微軟正黑體";font-weight: bold; margin:0 10px;text-align: left;}
.repeatBG .bgYellow .box2 > div .stepText p  {font:24px/1.2em "微軟正黑體";color:#000; margin:0 10px;text-align: left;}
.repeatBG .bgYellow .box2 .stepImg {max-width:423px;}
.repeatBG .bgYellow .box2 .step {-webkit-animation: up ease-out 1.7s; -webkit-animation-iteration-count: infinite; animation: up ease-out 1.7s;  animation-iteration-count: infinite;cursor: pointer;}
.repeatBG .bgYellow .box2 .step1 {position: absolute;top:18%;left:11%; color: #d6393d; }
.repeatBG .bgYellow .box2 .step2 {position: absolute;top:65%;left:48%; color:#20b8f3;}
.repeatBG .bgYellow .box2 .step3 {position: absolute;top:46%;left:26%; color:#00cfb4;}
.repeatBG .bgYellow .box2 .step4 {position: absolute;top:24%;left:51%; color:#00a19a;}

.repeatBG .bgYellow .box2 .step1 a{color: #d6393d; }
.repeatBG .bgYellow .box2 .step2 a {color:#20b8f3;}
.repeatBG .bgYellow .box2 .step3 a {color:#00cfb4;}
.repeatBG .bgYellow .box2 .step4 a {color:#00a19a;}

.repeatBG .bgYellow .box2 .step3 .stepText{ left: 14% }
.repeatBG .bgYellow .box2 .step4 .stepText{ left: 16% }




.stepText{ position: absolute;
    left: 8%;
    top: 33%;}



.repeatBG .bgYellow .box2 .hand{position: absolute;right:69%;bottom: 11%;}

.repeatBG .bgYellow .box2 .flag {width: 15.7%;max-width: 205px;position: absolute;right:68%; bottom: 10%;cursor: pointer;}
.repeatBG .bgYellow .box2 .flag:hover { transform:  translate(0px,-10px); transition: .3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s;}

.repeatBG .bgYellow .box3 .hand {position: absolute;right:12%;top:61%;}

.repeatBG .bgYellow .box3 .tip {width: 100%;max-width: 1311px;}
.repeatBG .bgYellow .box3 .tipsBtn {width:12%;position: absolute;right:12%;top:47%;animation: up ease-out 1.3s;  animation-iteration-count: infinite;cursor: pointer;-webkit-animation: up ease-out 1.3s; -webkit-animation-iteration-count: infinite;}
.repeatBG .bgYellow .box3 {position: relative;padding-bottom: 10px;  }
.repeatBG .bgYellow .box3.collect {position: relative;padding-bottom: 0px;  }
.repeatBG .bgYellow .box3 .order {display:none;position: absolute;top:7%;left:32%;box-shadow: 2px 2px 30px #646464;     z-index: 99;}
.repeatBG .bgYellow .box3 .order > img {width: 100%;}
.repeatBG .bgYellow .box3 .order .close{ top:10px;right:1%;position: absolute; z-index:555;background: rgba(255,255,255,1);width: 36px; height: 36px; font-size: 30px; color: #000; text-align: center; text-decoration: none; border-radius: 50%; transition: .5s;}
.repeatBG .bgYellow .box3 .order .close:hover{background: rgba(255,255,255,0.9);}
.repeatBG .bgRed .box4 .goodsTitle {margin:35px 0 10px 0;}

.repeatBG .bgRed .box4 .goodsTitle h3 {font:500 40px/1.2em "微軟正黑體";color:#FFF;width: auto;}
.repeatBG .bgRed .box4 .moreGo {width: 150px;font:bold 20px/1.2em "微軟正黑體";color:#FFF;background: #00184a;border-radius: 99em;padding: 3px 20px;margin:10px auto;}
.repeatBG .bgRed .box4 .moreGo:hover{transform: translate(0px,-5px);-webkit-filter: brightness(130%); filter: brightness(130%);transition: .3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s;}
.repeatBG .bgRed .box4 {margin-bottom: 80px;}



.repeatBG .bgRed .box5 {background: #FFF;    padding: 120px 25px 25px;text-align: left;margin:80px 0 20px;     position: relative;}
.repeatBG .bgRed .box5 h3 {color:#bb0908;font:bold 24px/1.4em "微軟正黑體"}
.repeatBG .bgRed .box5 h4 {color:#bb0908;font:bold 18px/1.4em "微軟正黑體"}
.repeatBG .bgRed .box5 p {font:14px/1.4em "微軟正黑體"}
.repeatBG .bgRed .box5 p b { color: #ff0c00;}


.group-type-ph .ph { display: inline-block; margin:0 6px 0 6px;  width: 250px; background: #fff; vertical-align: top; 
	box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: .5s ;position: relative;}
.group-type-ph .ph:hover { transform: translateY(-10px);box-shadow: 0 25px 20px rgba(0,0,0,0.1);  } 
.group-type-ph .ph-img { overflow: hidden; }
.group-type-ph .ph img { width: 100%; transition: .5s }
.group-type-ph .ph-title { padding: 0 5px; font: 500 16px/1.8em "微軟正黑體";color: #fff; letter-spacing: normal; text-align: center; background: #303030; }
.group-type-ph .ph-detail { padding: 5px 5px; font: 500 14px/1.4em "微軟正黑體";color: #303030; letter-spacing: 0px; text-align:left; }
/*.group-type-ph .ph-feature { padding: 0 5px; font: 300 14px/1.4em "微軟正黑體";color: #303030; letter-spacing: 0px;text-align:left; }*/
.group-type-ph .price { display: block; padding: 10px 0; font: 16px/1.4em "Century Gothic";color: #e31a19; text-align: center;}
.group-type-ph .price span { font-size:30px; }
.group-type-ph .price i {font: 16px/1.4em "微軟正黑體"} 
.group-type-ph .ph a:hover { text-decoration: none; }
.group-type-ph .ph:hover img { transform: scale(1.1); }

.group-type-ph .ph .point {position: absolute;top:0;right:0;width:70px;height: 70px;color:#ff0000;text-align: center;z-index: 2;background: #ffda0a;font:bold 28px/0.8em Century Gothic, 微軟正黑體;padding:3px 0;}
.group-type-ph .ph .point p {color:#000;font: bold 18px/0.8em arial, 微軟正黑體;margin: 5px 0;}
.group-type-ph .ph .point h5 {color:#000;font: bold 14px/0.8em arial, 微軟正黑體;margin: 5px 0;}

.slick-list { padding-top: 10px !important; padding-bottom: 20px !important; padding-right:5px !important; padding-left:5px !important; }

.welfare{padding-top: 58px;}
.welfare img.line , .welfare img.wifi{width: 46%; max-width: 574px; transition: all 0.2s; }
.welfare img.line:hover , .welfare img.wifi:hover{ filter: brightness(1.1); }


.collect{padding-top: 100px;}





@keyframes up{

  0% {transform:  translate(0px,0px);}
  50% {transform:  translate(0px,7px);}
  100% {transform:  translate(0px,0px);}
}

@-moz-keyframes up{
  0% {-moz-transform:  translate(0px,0px);}
  50% {-moz-transform:  translate(0px,7px);}
  100% {-moz-transform:  translate(0px,0px);}
}

@-webkit-keyframes up {
  0% {-webkit-transform:  translate(0px,0px);}
  50% {-webkit-transform:  translate(0px,7px);}
  100% {-webkit-transform:  translate(0px,0px);}
}

@-o-keyframes up {
  0% {-o-transform:  translate(0px,0px);}
  50% {-o-transform:  translate(0px,7px);}
  100% {-o-transform:  translate(0px,0px);}
}

@-ms-keyframes up {
  0% {-ms-transform:  translate(0px,0px);}
  50% {-ms-transform:  translate(0px,7px);}
  100% {-ms-transform:  translate(0px,0px);}
}  


.brightness { -webkit-animation: brightnessUp .4s  infinite alternate; animation: brightnessUp .4s  infinite alternate; }
@-webkit-keyframes brightnessUp {
 0% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
 50% { -webkit-filter: brightness(120%); filter: brightness(120%);  }
 100% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
}
@keyframes brightnessUp {
 0% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
 50% { -webkit-filter: brightness(120%); filter: brightness(120%);  }
 100% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
}

@-moz-keyframes brightnessUp{
 0% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
 50% { -webkit-filter: brightness(120%); filter: brightness(120%);  }
 100% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
}


@-o-keyframes brightnessUp {
 0% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
 50% { -webkit-filter: brightness(120%); filter: brightness(120%);  }
 100% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
}

@-ms-keyframes brightnessUp {
 0% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
 50% { -webkit-filter: brightness(120%); filter: brightness(120%);  }
 100% { -webkit-filter: brightness(100%); filter: brightness(100%);  }
} 


@media only screen and (max-width: 1600px) {
.repeatBG .bgYellow .nowjoinBox .newJoin{ margin:-160px 0 0 -70px;}

.repeatBG .bgYellow .box2 div .stepImg {}

}


@media only screen and (max-width: 1300px) {
header h1 .mobile {display: block;width: 100%;}
header h1 .red {display: none;}
header.header {height:auto;}
header h1 .hand{margin-right: -35%;}
header h1 .hand img{width: 5vw;}

.repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:17%;top: 0;margin:-30px 0 0 0;}
.repeatBG .bgYellow .nowjoinBox .newJoin {width: 80%; max-width: 840px;margin:-150px 0 0 -70px;}



.repeatBG .bgYellow .box2 div .stepImg {}
.repeatBG .bgYellow .box2 .hand{position: absolute;right:67%;bottom: 12%;}
.repeatBG .bgYellow .box2 .hand img{width: 80%;}
.repeatBG .bgYellow .box3 .hand {position: absolute;right:11%;top:61%;}
.repeatBG .bgYellow .box3 .hand img{width: 80%;}
}
@media only screen and (max-width: 1000px) {
.pc{display: none;}
.mobile{display: block;}

.welfare {
    padding-top: 9%;
}
.collect {
    padding-top: 14%;
}
.repeatBG .bgYellow .box3{padding-bottom: 5%;}


.repeatBG .bgYellow {    margin-top: -4%;}
.repeatBG .width1400 h2 {width: 80%; margin-left:-40%; top: -7%;}

.repeatBG .bgYellow .box1 .foursale {width: 40%; }
.repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:17%;top: 0;margin:-30px 0 0 0;}
.repeatBG .bgYellow .nowjoinBox .hand img{width: 80%;}
.repeatBG .bgYellow .nowjoinBox .newJoin{ margin:-120px 0 0 -70px;}
.repeatBG .bgYellow .box2{padding-top: 7%;}
.repeatBG .bgYellow .box2 .stepImg { max-width: inherit;     width: 66%; margin-left: 16%; }

.repeatBG .bgYellow .box2 div .stepText {display: inline-block;}

.repeatBG .bgYellow .box2 .step3 .stepText , .repeatBG .bgYellow .box2 .step4 .stepText {left: 50%;}

.repeatBG .bgYellow .box2 div .stepText {display: inline-block; width:60%; left: 50%;
    margin-left: -30%;}


.repeatBG .bgYellow .box2 > div .stepText h3{font: 5vw/1.2em "微軟正黑體";}
.repeatBG .bgYellow .box2 > div .stepText p{    font: 3.3vw/1.2em "微軟正黑體";}

.repeatBG .bgYellow .box2 .step1 , .repeatBG .bgYellow .box2 .step2 , .repeatBG .bgYellow .box2 .step3 , .repeatBG .bgYellow .box2 .step4 {position: static;}

.repeatBG .bgYellow .box2 .step2 {position: static;}

.repeatBG .bgYellow .box2 .step3 {position: static;}
.repeatBG .bgYellow .box2 .flag {width: 22%;position: absolute;right:5%; bottom: -15%;}

.repeatBG .bgYellow .box2 .hand{position: absolute;right:30%;bottom: 0;}
.repeatBG .bgYellow .box2 .hand img{width: 80%;}

.repeatBG .bgYellow .box3 .tip {width: 100%;}
.repeatBG .bgYellow .box3 .tipsBtn {width:17%;position: absolute;right:6%;top:49%;}
.repeatBG .bgYellow .box3 .hand {position: absolute;right:5%;top:69%;}
.repeatBG .bgYellow .box3 .hand img{width: 80%;}


.repeatBG .bgYellow .box3 .order {display:none;position: absolute;top:-80%;left:20%;}

.repeatBG .bgYellow .box2 .flagM {width: 45%;max-width: 332px;position: static;margin: 10px auto;}

}

@media only screen and (max-width: 850px) {
  .repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:12%;top: 0;margin:-30px 0 0 0;}
.repeatBG .bgYellow .nowjoinBox .newJoin{width: 90%;  margin:-110px 0 0 -70px;}

.repeatBG .bgYellow .box2 .hand{position: absolute;right:25%;bottom: 0;}
.repeatBG .bgYellow .box2 .hand img{width: 60%;}
.repeatBG .bgYellow .box3 .hand img{width: 60%;}
}


@media only screen and (max-width: 768px) {


.repeatBG .bgRed .box5{    padding: 14% 25px 25px;}





.repeatBG .bgYellow .box3 .order {display:none;position: absolute;top:-80%;left:10%;}
}

@media only screen and (max-width: 670px) {

.repeatBG .bgYellow .nowjoinBox .newJoin{margin:-80px 0 0 -70px;}

.repeatBG .bgYellow .box3 .order {display:none;position: absolute;top:-80%;left:5%;}

}
@media only screen and (max-width: 555px) {
.repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:12%;top: 0;margin:-10px 0 0 0;}
.repeatBG .bgYellow .nowjoinBox .newJoin{margin:-70px 0 0 -70px;}
.repeatBG .bgYellow .box2 > div .stepImg{width: 90%;     margin-left: 5%;}
.repeatBG .bgYellow .box2 > div .stepText{width: 80%;     margin-left: -40%;}
.repeatBG .bgYellow .box2 > div .stepText h3 {
    font: 7vw/1.2em "微軟正黑體";
}
.repeatBG .bgYellow .box2 > div .stepText p {
    font: 4vw/1.2em "微軟正黑體";
}
.repeatBG .width1400 h2{top: -5%;}

.width1400 { width: 90%;}
}

@media only screen and (max-width: 475px) {
.repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:5%;top: 0;margin:-10px 0 0 0;}
.repeatBG .bgYellow .nowjoinBox .hand img{width: 50%;}
.repeatBG .bgYellow .nowjoinBox .newJoin{width: 90%; margin:-60px 0 0 -10px;}
.repeatBG .bgYellow {border-radius: 10px;margin-top: -30px; }

.repeatBG .bgRed .box4 .goodsTitle h3 {font:500 30px/1.2em "微軟正黑體";}
.repeatBG .bgRed .box5 h3 {font:bold 18px/1.4em "微軟正黑體"}
.repeatBG .bgRed .box5 h4 {font:bold 14px/1.4em "微軟正黑體"}
.repeatBG .bgYellow .box2 .flagM {width: 70%;}
.repeatBG .bgYellow .box2 .hand {position: absolute;right:20%;bottom: -10px;}
.repeatBG .bgYellow .box2 .hand img{width: 60%;}
.repeatBG .bgYellow .box3 .hand img{width: 60%;}

}

@media only screen and (max-width: 420px) {
  .repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:2%;top: 0;margin:7px 0 0 0;}
  .repeatBG .bgYellow .nowjoinBox .newJoin{width: 100%; margin:-50px 0 0 -10px;}
  .repeatBG .bgYellow {margin-top: -20px; }
  .repeatBG .bgYellow .box1 .foursale {width: 45%; }
  .repeatBG .bgYellow .box1 {margin: 10px 0;}
  .repeatBG .bgYellow .box2 > div {width: 100%;}


  .repeatBG .bgYellow .box3 .order .close{ top:10px;right:1%;width: 30px; height: 30px; font-size: 24px; }
  .repeatBG .bgRed .box4 .goodsTitle .moreGo {width: auto;font:bold 16px/1.2em "微軟正黑體";padding: 3px 20px;margin:8px 16px;}
  .repeatBG .bgYellow .box2 .hand {right:-32%;bottom: -1%;}

  .repeatBG .bgYellow .box2 .hand img{width: 10%;}

}

@media only screen and (max-width: 370px) {
  .repeatBG .bgYellow .nowjoinBox .hand {position: absolute;right:0;top: 0;margin:10px 0 0 0;}
  .repeatBG .bgYellow .nowjoinBox .newJoin{width:100%; margin:-40px 0 0 -10px;}
  .repeatBG .bgYellow {margin-top: -20px; }
  .repeatBG .bgYellow .box1 {margin: 0;}
}

@media only screen and (max-width: 320px) {
  .repeatBG .bgYellow .nowjoinBox .newJoin{width: 90%; margin:-30px 0 0 -10px;}
    .repeatBG .bgYellow .box1 {margin: 0;}
      .repeatBG .bgYellow .box2 .hand {position: absolute;right:0;bottom: -10px;margin-right:-60px; }
       .repeatBG .bgYellow .box3 .hand img{width: 50%;}
}