body { overflow-x: hidden !important; }
#mtkContainer * {box-sizing: border-box;}

/*---版頭---*/
header.header{ width: 100%; height: 680px; background: url(../images/topBg.jpg) top center no-repeat; position: relative;}
.middle{ width: 100%; max-width: 1330px; margin: 0 auto; }

header.header h1.title{ position: relative; }
header.header h1 .pc{ width: 100%; max-width: 782px; width: 100%; text-align: center; margin: 0 auto; padding-top: 87px;/*top:86px; left: 23.4%; position: absolute;*/ }
header.header h1 img{ width: 100%;}
header.header h1 .titleInfo{ width: 65%; display: block; margin: 0 auto; text-align: center; font: bold 20px/1.5 "arial", "微軟正黑體"; padding-top: 14px;/* top:442px;left:20%;position: absolute; */ color: #002063;
text-shadow: 1px 1px 6px rgba(255, 255, 255, 1), 1px 1px 6px rgba(255, 255, 255, 1), 1px 1px 6px rgba(255, 255, 255, 1), 1px 1px 6px rgba(255, 255, 255, 1);}


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


/*---第二區---*/
.secondArea{width: 100%; height: 884px; background: url(../images/secondBg.jpg) top center no-repeat; position: relative;margin: 0 auto; padding: 2% 0;}
.secondBox{letter-spacing: normal;text-align: center;}

/*---第二區---訂購資訊---*/
.secondArea .memberHowToBuy{ text-align: center; padding-bottom: 6.6%;}
.secondArea .memberHowToBuy .buyTitle{ display: inline-block; position: relative; width: auto;font: bold 40px/1.6 "arial", "微軟正黑體";color: #fff; border-radius: 50px; 
	background: linear-gradient(-45deg, #e11f37, #e55d2b);/*#ea5338*/; padding: 0 2%; transform: translateY(20px);box-shadow: 0px 5px 10px rgba(0,0,0,0.3);}

.secondArea .memberHowToBuy .buyDateText{ display: block; background-color: #c71628; width: 68%; margin: 0 auto; padding: 4.5% 0 3%;}
.secondArea .memberHowToBuy .buyDateText ul li{ font: bold 26px/1.5 "arial", "微軟正黑體";color: #fff; position: relative;}
.secondArea .memberHowToBuy .buyDateText a.blueSquare{background-color: #004c9a; color: #fff; padding: 4px 15px; transition: all .3s;}
.secondArea .memberHowToBuy .buyDateText a:hover{background-color: #ffef81; color: #002063;}
.secondArea .memberHowToBuy .buyDateText ul>li.yellowTxt{color: #ffef81; font: bold 24px/1.5 "arial", "微軟正黑體";}
/*.secondArea .memberHowToBuy .buyDateText .finger{ display: inline-block; transform: rotate(-45deg); position: absolute;}
.secondArea .memberHowToBuy .buyDateText .finger img{width: 100%;}*/

/*---第二區---搶先看---*/
.secondArea .firstLook{ padding-bottom: 0.5%;transition: all 0.5s;}
.secondArea .firstLook .firstTitle{display: inline-block; position: relative; width: 50%; font: bold 40px/1.1 "arial", "微軟正黑體";color: #fff; border-radius: 99em;
    padding: 1.5% 2%; cursor: pointer; transition: all .2s;  background: linear-gradient(-45deg,#002063, #004c9a);}
.secondArea .firstLook .firstTitle .finger{ display: inline-block; transform: rotate(-45deg); position: absolute;}
.secondArea .firstLook .firstTitle .finger img{width: 100%;}
.secondArea .firstLook .firstTitle:hover{ background: linear-gradient(-45deg, #0026c9,#e3003b);}
.secondArea .firstLook .firstTitle a{color: #fff;}
.secondArea .firstLook .firstTitle a>i.bullhorn{width: 7%;display: inline-block; }
.secondArea .firstLook .firstTitle a>i.bullhorn img{width: 100%;}
.secondArea .firstLook .firstTitle a>p{display: inline-block;}
.secondArea .firstLook .firstTitle a>p.sText{font-size: 30px}
.secondArea .firstLook .infoText{display: block; width: 60%; margin: 0 auto; font: bold 20px/1.5 "arial", "微軟正黑體"; color: #003f7f; text-align: justify; padding: 1.5%;}

.ani-jump{
  animation: jump ease-in 1.4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: jump ease-in 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: jump ease-in 1.5s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: jump ease-in 1.5s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: jump ease-in 1.5s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes jump{
  0% {transform:  translate(0px,0px);}
  50% {transform:  translate(0px,-5px);}
  100% {transform:  translate(0px,0px);}
}






/*---第二區---ICON---*/
.secondArea .iconArea{padding-bottom: 3%;}
.secondArea .iconArea .iconBox{display: inline-block; width: 18%; margin:0; transition: all .2s; /*padding: 1%;*/}
.secondArea .iconArea .iconBox img.iconImg{margin: 0 auto; width: 100%;max-width: 122px}
.secondArea .iconArea .iconBox img{width: 100%;}
.secondArea .iconArea .iconBox p{font: bold 22px/1.5 "arial", "微軟正黑體"; color: #003f7f; padding-top: 4%; white-space:nowrap;}
.secondArea .iconArea .iconBox:hover{cursor: pointer;transform: scale(1.1); }
.secondArea .iconArea .iconBox:hover p{color: red;}



/*---第三區---*/
.thirdArea{width: 100%;background: #004c9a; padding: 2.5% 0 0 ;margin: 0 auto; text-align: left; color: #fff;}
.thirdArea .memberInfo{letter-spacing: normal; padding: 2% 1%; width: 65%;}
.thirdArea .memberInfo .infoTitle{ padding-bottom: 2%; position: relative;text-align: center;}
.thirdArea .memberInfo .infoTitle:before{ content: ""; position: absolute; width: 27%; height: 1px; z-index: 3; border-bottom: 1px solid #fff; top: 36px; left: 0;}
.thirdArea .memberInfo .infoTitle:after{ content: ""; position: absolute; width: 27%; height: 1px; z-index: 3; border-bottom: 1px solid #fff; top: 36px; right: 0;}
.thirdArea .memberInfo .infoTitle strong{ font: bold 46px/1.6 "arial", "微軟正黑體";color: #ffe04d; z-index: 8; padding: 0 5px; }

.thirdArea .memberInfo h5{font: bold 26px/1.5 "arial", "微軟正黑體"; color: #ffe04d;}
.thirdArea .memberInfo i.tag-solid{width: 2%;display: inline-block; }
.thirdArea .memberInfo i.tag-solid img{width: 100%;}
.thirdArea .memberInfo p{font: 18px/1.4 "arial", "微軟正黑體"; text-align: justify; padding-bottom: 3%;}



/*-------------------------------Mobile-------------------------------*/

@media only screen and (max-width: 1550px){
.thirdArea .memberInfo .infoTitle:before,
.thirdArea .memberInfo .infoTitle:after{ width: 24%;}
}


@media only screen and (max-width: 1400px){
.thirdArea .memberInfo .infoTitle:before,
.thirdArea .memberInfo .infoTitle:after{ width: 20%;}
}


@media only screen and (max-width: 1260px){
header.header h1 .titleInfo{width: 70%;}
.secondArea .firstLook .infoText{width: 64%;}
.secondArea .iconArea .iconBox{width: 20%;}

.thirdArea .memberInfo{width: 70%;}
}



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

header.header h1 .titleInfo{width: 75%;}
.secondArea .firstLook .firstTitle{width: 53%;}
.secondArea .firstLook .firstTitle a>p.sText{font-size: 2rem;}
.thirdArea .memberInfo{width: 80%;}
}



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

header.header h1 .titleInfo{width: 80%;}
.secondArea .firstLook .infoText{width: 70%;}
}



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

header.header{background: none;height: 100%;}
header.header h1 .pc,header.header h1 .titleInfo{display: none;}

.pc{display: none;}
.mobile{display:block; width: 100%; height: auto; position: relative; margin: 0 auto;}

.secondArea{width: 100%; height: auto; background: url(../images/secondBg_m.jpg) top center repeat-y;}
.secondArea .memberHowToBuy{padding-bottom: 7.5%;}
.secondArea .memberHowToBuy .buyTitle{padding: 0 3%;}
.secondArea .memberHowToBuy .buyDateText{width: 85%;}

.secondArea .firstLook .firstTitle{width: 65%;}
.secondArea .firstLook .firstTitle a>p.sText{font-size: 1.8rem;}
.secondArea .firstLook .infoText{width: 85%;}

.secondArea .iconArea .iconBox{width: 26%;}
}



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

.secondArea{padding: 4.5% 0;}
.secondArea .memberHowToBuy .buyTitle,
.secondArea .firstLook .firstTitle{font-size: 5vw;}
.secondArea .firstLook .firstTitle i{font-size: 4vw;}
.secondArea .memberHowToBuy .buyDateText{width: 89%; padding: 6% 0 2%;}
.secondArea .memberHowToBuy .buyDateText ul li,
.secondArea .memberHowToBuy .buyDateText ul>li.yellowTxt{font-size: 3vw;line-height: 1.8;}
.secondArea .memberHowToBuy .buyDateText a.blueSquare{display: block; width: 80%; margin: 0 auto;  font-size: 4vw; margin-bottom:2.5%;}
/*.secondArea .memberHowToBuy .buyDateText .finger{ width: 7.5%; position: absolute; top: 50%; right: 18%;}*/

.secondArea .firstLook .firstTitle{width: 73%; padding: 2%;}
.secondArea .firstLook .firstTitle .finger{width: 7.5%; position: absolute; top: 50%; right: 26%;}
.secondArea .firstLook .infoText{font-size: 2.8vw; line-height: 1.4; width:84%; padding: 3% 1.5%;}

.secondArea .iconArea{padding-bottom: 0;}

.thirdArea .memberInfo{width: 90%;}

.thirdArea{padding: 3% 0;}
.thirdArea .memberInfo .infoTitle strong{font-size: 5vw;}
.thirdArea .memberInfo h5{font-size: 3vw;}
.thirdArea .memberInfo p{font-size: 1.8vw;}
}


@media only screen and (max-width: 768px){
.secondArea .firstLook .firstTitle{width: 80%;}


.secondArea .iconArea .iconBox{width: 28%;}
.secondArea .iconArea .iconBox p{font-size: 2.2vw; line-height: 1.4;}

.thirdArea .memberInfo .infoTitle:before,
.thirdArea .memberInfo .infoTitle:after{ width: 18%;top:40%;}

.thirdArea .memberInfo p{font-size: 2.3vw; line-height: 1.5; padding-bottom:4%;}
}


@media only screen and (max-width: 620px){
.secondArea .memberHowToBuy .buyTitle{transform: translateY(20px);}
.secondArea .memberHowToBuy .buyDateText{width: 90%; padding: 7% 0 4%;}
.secondArea .memberHowToBuy .buyDateText ul li,
.secondArea .memberHowToBuy .buyDateText ul>li.yellowTxt{font-size: 3.3vw;line-height: 2;}

.secondArea .firstLook .firstTitle{width: 85%;}
.secondArea .firstLook .firstTitle .finger{ width: 8%; right: 28%;}
.secondArea .firstLook .firstTitle a>p.sText{font-size: 1.5rem;}

.secondArea .iconArea .iconBox p{font-size: 2.6vw; line-height: 1.4;}
.secondArea .iconArea .iconBox img.iconImg{width: 65%;}

.thirdArea .memberInfo .infoTitle{padding: 2% 0 5%;}
.thirdArea .memberInfo .infoTitle strong{font-size: 5.8vw;}

.thirdArea .memberInfo .infoTitle:before,
.thirdArea .memberInfo .infoTitle:after{ width: 13%; top:40%;}

.thirdArea .memberInfo h5{font-size: 4.5vw;}
.thirdArea .memberInfo p{font-size: 2.8vw; line-height: 1.5; padding-bottom: 5%;}
}


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

.secondArea .memberHowToBuy .buyTitle{ transform: translateY(20px);}

.secondArea .firstLook .firstTitle a>p.sText{font-size: 1.3rem;}
.secondArea .firstLook .infoText{font-size: 3.2vw; width: 90%; line-height: 1.6; padding: 3% 0;}
.secondArea .iconArea .iconBox{width: 33%;}

.thirdArea .memberInfo p{font-size: 3.4vw; line-height: 1.5; padding-bottom: 5%;}
}


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

.secondArea .memberHowToBuy .buyTitle{ transform: translateY(15px); font-size:5.5vw;}

.secondArea .firstLook .firstTitle{width: 80%; font-size: 5.5vw; line-height: 1.2;}
.secondArea .firstLook .firstTitle .finger{width: 11%; position: absolute; top: 45%; right: 22%;}
.secondArea .firstLook .firstTitle a>i.bullhorn{display: none;}
.secondArea .firstLook .firstTitle a>p.sText{font-size: 1.1rem;}

.secondArea .iconArea .iconBox img.iconImg{width: 60%;}

}

@media only screen and (max-width: 320px){
.secondArea .firstLook .firstTitle{width: 85%;}
.secondArea .firstLook .firstTitle a>p.sText{font-size: 1rem;}
}