body { background: #f3221e;  }
#mtkContainer { position: relative; background:url(../images/topBanner.jpg) top center no-repeat; }
#mtkContainer,
#mtkContainer * { /*vertical-align: top;*/ }

#mtkContainer.couponWrap { position: relative; background:url(../images/couponBanner.jpg) top center no-repeat; }


header.header { }
header.header h1 { height: 700px; }
header.headerCoupon h1 { height: 800px; }
header.header h1 .m { display: none; }



.mobileMenuButton { display: none }
.mainPageButton { position:sticky; position: -webkit-sticky; top:0px; left: 0; width: 100%; margin-bottom: -36px; text-align: center; background: rgba(0,0,0,0.5) ; z-index: 201;}
.mainPageButton ul { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; text-align: center; white-space:nowrap; }
.mainPageButton ul li { display:inline-block; margin:5px 0; padding: 5px 10px;white-space:nowrap;  }
.mainPageButton ul li a,
.mainPageButton ul li a:link {  font:16px/16px "arial","微軟正黑體"; color: #fff; white-space:nowrap;  }
.mainPageButton ul li a:hover { /*text-decoration: underline !important;*/ border:1px solid #fff; }



.hasButton { position: relative;  z-index: 1 }
.hasButton .secButton { display: none; position: absolute; top: 20px; left: 0; width: auto; min-width: 100%; z-index: 2; background: rgba(0,0,0,0.5) }
.hasButton .secButton a { display: block; padding: 5px 0 }
.mainPageButton a:hover {color: #fff200 !important;}

.hasButton .secButton.ship { left: -30px }

.contentBase { padding: 50px 0; }

.box2 { margin: 0 auto;  width: 90%; max-width: 1400px;  text-align: center; }
.box2 > .aBox { display: inline-block; width: 30%; margin: 1.6%; }
.box2 > .bBox { display: inline-block; width: 100%; max-width: 1100px;}
.box2 > .cBox { display: inline-block; width: 45%; margin: 2.5%; }
.box2 > .aBox img , .box2 > .bBox img , .box2 > .cBox img { width: 100%; }

@media only screen and (max-width: 1200px) {
.box2 > .aBox {width: 45%; margin: 2.5%;}
}

@media only screen and (max-width: 960px) {
.box2 > .cBox { width: 100%; margin: 0 0 10% 0; max-width: 600px;}
}

@media only screen and (max-width: 768px) {
.box2 { width: 85%; }
.box2 > .aBox { display: block; width: 100%; margin: 0 0 10% 0;}
}




.joinLine {     display: inline-block; position: fixed; bottom: 60%; right: 0; z-index: 20; border-radius: 10px;transition: .5s;
 box-shadow:0 10px 10px rgba(0,0,0,0.3); overflow: hidden; background: rgba(255,255,255,0.7);cursor: pointer;  z-index: 202;  }
.joinLine:hover { background: #fff; }
.joinLine img { width: 100%; }
.joinLine .pc { display: block; max-width: 170px;}
.joinLine .m { display: none; }

.qr { display: none; position: absolute; top: 0; left: 0; transition: .5s; }
.joinLine:hover .qr { display: block }




@media only screen and (max-width: 1200px) {
#mtkContainer , #mtkContainer.couponWrap  { position: relative;  background-size: 150% auto }
header.header h1 { height: 52vw; }


header.headerCoupon h1 { height: 60vw; }






}


@media only screen and (max-width: 960px) {
.joinLine { display: inline-block; position: fixed; bottom: 0%; right: 0; width: 100%; border-radius: 0px;
 box-shadow: none; overflow: visible; background: rgba(255,255,255,1); text-align: center; padding: 10px 0;}
.joinLine .pc { display: none; }
.joinLine .m { display: block; margin:0 auto;}

.qr { display: none; position: absolute; top: -200px; max-width: 200px; left: 0; transition: .5s; opacity: 0; }
.joinLine:hover .qr { display: block; opacity: 1;}

}


@media only screen and (max-width: 768px) {
#mtkContainer { position: relative; background:none; }

header.header h1 { height: auto; }
header.header h1 .m { display: block; width: 100%;}


.mobileMenuButton { display: inline-block; position: fixed; bottom:0; left:calc(50% + 15px); padding: 5px; width:auto; height:auto; z-index: 100; background: rgba(0,0,0,0.5) }
.mainPageButton { position:fixed; top:-100vh; left: 0; width: 100%; height: 100vh;margin-bottom:0;background: rgba(0,0,0,0.8); z-index:98; }
.mainPageButton ul { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; text-align: center; }
.mainPageButton ul li { display: block; margin:5px 0; padding: 5px 10px; }
.mainPageButton ul li a,
.mainPageButton ul li a:link { font:16px/16px "arial","微軟正黑體"; color: #fff }

.hasButton { position: relative; z-index: 1 }
.hasButton .secButton { display: block; position: static;width: 100%; z-index: 2; background: rgba(255,255,255,0.2) }
.hasButton .secButton a { display: block; padding: 5px 0 }






.box1 { margin: 0 auto; width: 90%; max-width: 850px; }
.box1 > .aBox { display: block; margin: 0 auto; width: 100%; text-align: center; }


.joinLine:hover .qr { display: none; opacity: 1;}



.mobileMenuButton { left: calc(100% - 40px); bottom: 80px; }


}

@media only screen and (max-width: 500px) {
.contentBase { padding: 5% 0; }
}

















/*coupon*/
.coupon{ background-color: white;  font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif; padding: 60px 0;}

.coupon .wrapper{max-width: 980px;     margin: 0 4%;}
.coupon .ticket{border-radius: 10px; position: relative;
background: #ff8398; 
background: -moz-linear-gradient(45deg, #ff8398 0%, #ffbb8d 100%); /
background: -webkit-linear-gradient(45deg, #ff8398 0%,#ffbb8d 100%); 
background: linear-gradient(45deg, #ff8398 0%,#ffbb8d 100%); 
overflow: hidden;
}

.ticket .bottom{background:#de5252; color: white; font-size: 14px;line-height: 1.6; 
	padding: 40px 18px 10px;
        margin-top: -25px;
    display: inline-block;
    width: 100%;
}
.ticket .bottom li{list-style-type: none;}

.ticket .price{    display: block; position: relative;width: 92%; background-color: white;    
    left: 4%; padding: 35px 0 10px 0;
        margin-top: 41px;
    font-family:"Century Gothic", Arial, "Microsoft JhengHei";
    font-weight: bold; text-align: center; font-size: 110px;     line-height: 1.2;     letter-spacing: -0.08em;
}
.ticket .price small{font-size: 50px;position: relative; font-family:"Century Gothic", Arial, "Microsoft JhengHei"; font-weight: bold;
    top: -14px;}


.ticket .category{position: absolute; background-color: white;    width: 80%;    top: 20px; text-align: center;
    left: 10%; padding:12px 20px; border-radius: 5em;  
    font-family:"Century Gothic", Arial, "Microsoft JhengHei";
    font-size: 16px; color:white;
    background: #de5252; 
background: -moz-linear-gradient(left, #de5252 0%, #de5252 71%, #fda0a0 100%); 
background: -webkit-linear-gradient(left, #de5252 0%,#de5252 71%,#fda0a0 100%); 
background: linear-gradient(to right, #de5252 0%,#de5252 71%,#fda0a0 100%); 
}

.ticket .receive{
	display: inline-block;
	position: relative; width: 92%; background-color: #ffec40;    right: 4%;
    left: 4%; padding: 20px 0;
    
    font-weight: bold; text-align: center; font-size: 28px;
    color: black; text-decoration: none; letter-spacing: 0.05em;
    animation:receive 0.4s linear infinite alternate;
}
.ticket .receive:hover{background-color: black; color: #fff; }


@keyframes receive {
   from {}
     to {transform: scale(1.03);}
}

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

	.coupon{padding: 100px 0;}
	.coupon .wrapper{margin: 0 auto;}

	.ticket .category{font-size: 18px; width: auto;
    left: 5%; text-align: left;}
	.ticket .price{  position: absolute;    width: 70%; top: 40px;
    left: 2%;     margin-top: 0;
    font-size: 198px; line-height: 1;
  padding:30px 5% 20px 0; 
    -webkit-clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
   }
	.ticket .price small{    font-size: 105px;}
	.ticket .receive{ position: absolute;
    width: 30%;
    font-size: 46px;
    top: 40px;
    right: 2%;     left: inherit;
        padding:60px 0 60px 3%; 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
    }
    .ticket .bottom{padding: 50px 50px 20px;    margin-top: 250px;}

@keyframes receive {
   from {}
   to {width: 32%;}
 }

}/*media*/













/*ttp*/
.ttpShow {
	display: none;
}

#ttpPanel {
	padding: 5px;
	display: none;
	background: #fff;
	border: #ccc 3px solid;
	position: absolute;
	z-index: 203;
}

#ttpPanel img {width: 180px;}





.coupon .explanation{display: flex; flex-wrap: wrap; margin: 20px 0; font-size: 14px; }

.coupon .explanation li{list-style-type: none;}

.coupon .explanation .left , .coupon .explanation .right {width: 100%;}
.coupon .explanation .left li{padding:5px; line-height: 1.5; text-indent: -5.7em;
    margin-left: 5.7em;     }
.coupon .explanation .left li span{ background-color:black; padding: 0 10px; margin-right: 7px; color: white; border-radius: 10px;}
.coupon .explanation .left li a.member{background-color: #ffd741;
    padding: 0 10px;
    border-radius: 10px;
    margin: 0 2px; text-decoration: none; color: black;}
.coupon .explanation .left li a{color: #0b7fd1;}
.coupon .explanation .left li a.member img{width: 18px;
    vertical-align: text-top;}
 .coupon .explanation .left li a.member:hover{background-color: #5cacd8; color: white;}


  .coupon .explanation .right ul{display: flex; justify-content: center;
     }
    .coupon .explanation .right li{  width: 100%;
    margin: 2% 1%;     }
  .coupon .explanation .right li a{display: block; font-size: 14px; color: white; padding: 12px 0; border-radius: 5em; text-decoration: none; 
  background: #5aabd7; text-align: center;  
background: -moz-linear-gradient(left, #5aabd7 0%, #5aabd7 77%, #cee6f3 100%); 
background: -webkit-linear-gradient(left, #5aabd7 0%,#5aabd7 77%,#cee6f3 100%); /
background: linear-gradient(to right, #5aabd7 0%,#5aabd7 77%,#cee6f3 100%); 
}

.coupon .explanation .right li:last-child a{
	background: #55c698; 
background: -moz-linear-gradient(left, #55c698 0%, #55c698 77%, #86e6d2 100%); 
background: -webkit-linear-gradient(left, #55c698 0%,#55c698 77%,#86e6d2 100%); 
background: linear-gradient(to right, #55c698 0%,#55c698 77%,#86e6d2 100%); 
}

.coupon .explanation .right li a:hover{
	filter:hue-rotate(180deg);
}

@media screen and (min-width:980px){
	.coupon .explanation{flex-wrap: nowrap;     font-size: 16px;}
	.coupon .explanation .left , .coupon .explanation .right {width: 100%;}
	.coupon .explanation .left {
		width: 70%;
    padding-right:20px;
    border-right: dashed 2px;}
    .coupon .explanation .right{width: 30%;}
    .coupon .explanation .right ul{    justify-content: flex-end;   flex-wrap:wrap;}
    .coupon .explanation .right li {width: 87%; margin: 0 0 15px 0;}
	.coupon .explanation .right li a{font-size: 18px;     padding: 16px 0;}

}/*media*/


/*浮層-注意事項視窗*/
.ruleBase{ 
	font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif; 
	position: fixed; 
	top:0; 
	left: 0; 
	width: 100%; 
	min-height: 100vh; 
	height: 100%; 
	overflow-y: scroll; 
	z-index: 202; 
	background: rgba(0,0,0,0.8);
	padding: 4%;
	display: none;
	font-size: 14px;
	line-height: 1.4;
}
.ruleBase .content{max-width: 1220px; margin:0 auto;}
.ruleBase .cusText1 { color: #fff200; }
ul.rule { color: #fff; text-align: left; list-style: none; height: 100%;}
ul.rule li { margin-bottom:20px;  }
ul.rule li.strong { margin-top: 30px; font-size:2rem; font-weight: bold; color: #fff; text-align: center; }

.colseBase { position: relative; }
.closeButton { position: absolute; top:0;right: 0; width: 40px; height: 40px; border: 1px solid #fff; cursor: pointer; }
.closeButton::after,
.closeButton::before { content: ""; position: absolute; top:18px;left: 0; width: 100%; height: 1px; border-bottom: 1px solid #fff; transition: .5s; }
.closeButton::after { transform: rotate(45deg); }
.closeButton::before { transform: rotate(-45deg); }

.closeButton:hover::after { transform: rotate(-45deg); }
.closeButton:hover::before { transform: rotate(45deg); }


.information li .tableBox{text-align: center; padding: 0.5% 0 2%;}
.tableBoxInfo{text-align: center; padding: 0.5% 0 2%;}
.tableBoxInfo table{width:100%;}

.tableBoxInfo{width: 100%;}
.tableBoxInfo table tbody td.tdTextA{background: #f8355c;color: #FFFFFF; border:1px #f8355c solid; padding: 5px 0;text-align: center;}
.tableBoxInfo table tbody td.tdTextB{ border:1px #f8355c solid; padding: 10px 0; background: rgba(255,255,255,1); color: #000;text-align: center;}

.tableBoxInfo table tbody td.box1{width: 25%;}
.tableBoxInfo table tbody td.box2{width: 50%;}
.tableBoxInfo table tbody td.box3{width: 25%;}

@media screen and (min-width:960px){
	.ruleBase{font-size: 16px;}
	.closeButton{width: 50px; height: 50px;}
	.closeButton::after , .closeButton::before { top:22px;}
	
}/*media*/

.award{background-color: #fdfaee; padding: 20px; margin:10px auto; text-align: center; width:94%; border-radius: 10px;}
.award h3{font-size: 30px; color:#5b8da7;padding-bottom: 10px;}
.award .awardBox{width: 96%; max-width: 1040px; background-color: #9ce7f5; border-radius: 10px; padding: 20px;  margin:auto;  }
#awardLink{display: inline-block;margin:10px auto; background-image:-webkit-linear-gradient(left, #5aabd7 0%,#5aabd7 77%,#cee6f3 100%);color: #fff;cursor: pointer; padding: 15px 30px; border-radius: 50px;font-size: 18px;}
#awardLink:hover{background-image:-webkit-linear-gradient(left, #ffc75f 0%,#ffc956 77%,#f3edce 100%);}
.award .awardBox strong{font-size: 24px; line-height: 30px; color:#28566e;}
.award .awardBox p{margin: 10px;font-size: 18px; color:#666; border-top: 1px dashed #ffffff; padding:10px 0px 0px;}
















/*bn*/
.bn{margin: 10px auto 0; width: 86%; max-width: 1200px; transition: all .2s; box-shadow:0px 5px 5px rgba(0,0,0,0.3);}
.bn img{width: 100%;}
.bn:hover{transform: translateY(5px); box-shadow:0px 2px 5px rgba(0,0,0,0.5)}

@media screen and (min-width:768px){
	
	.bn{margin: 100px auto 0;}
}/*media*/