@charset "utf-8";

body { background: #f8ce00 }
nav { position:sticky; position: -webkit-sticky;  top:0px; text-align: center; box-shadow: 0 0 30px rgba(0,0,0,0.5); background: rgba(145,23,231,0.9); z-index: 9999 }
nav > ul {display: inline-block;margin:0 auto; width: 100%}
nav > ul > li { display: inline-block; position: relative; margin: 15px 5%;  text-align: center; }
nav > ul > li a,
nav > ul > li a:link,
nav > ul > li a:visited { font:18px/18px "arial","微軟正黑體"; color:#fff; letter-spacing: 0; }
nav > ul > li::after {content: " "; display: inline-block; position: absolute; top:-20%; right:-36px; width: 36px; height: 26px; background: url(../images/navLiAfter1.png)}
nav > ul > li:nth-child(2)::after {background: url(../images/navLiAfter2.png)}
nav > ul > li:nth-child(3)::after {background: url(../images/navLiAfter3.png)}
nav > ul > li:nth-child(4)::after {background: url(../images/navLiAfter4.png)}
nav > ul > li a:hover {color:#fff200;}

.mobileNavButton { display: none; }
.mobileOnly { display: none; }
.allBase { position: relative; background: url(../images/headerBg.jpg) top center no-repeat; }


h2 { position: relative; display:block; font: bold 60px/60px "arial","微軟正黑體";letter-spacing: 0;color: #f8ce00; letter-spacing: 2px;}
h2 img { margin-bottom: 10px; }
h2 small { font-weight: normal; font-size: 12px; line-height: 12px; letter-spacing: 10px }
h2.title { display: inline-block; }
h2.title::before { content: ""; position: absolute; top:-20px; right: -100px; display: inline-block; width: 102px; height: 100px; background: url(../images/h2Img1.png) top center no-repeat; }
h2.title::after { content: ""; position: absolute; top:-20px; left: -160px; display: inline-block; width: 160px; height: 100px; background: url(../images/h2Img2.png) top center no-repeat; }

header { text-align: center; }
header h1 { margin: 43px auto; display: inline-block;}
header h1 .animate { -webkit-animation: headerAnimate 0.6s infinite; animation: headerAnimate 0.6s infinite; animation-direction: alternate;}
@-webkit-keyframes headerAnimate {
  from { transform: scale(1); }
  to { transform: scale(0.9); }
}
@keyframes headerAnimate {
  from { transform: scale(1); }
  to { transform: scale(0.9); }
}


.content_base { padding: 40px 0 80px 0; width: 100%; height: auto; text-align: center; background: url(../images/balckBg.jpg) #000 bottom center no-repeat; }
.yellowBg { background:#f8ce00 }
.yellowBg h2 ,
.yellowBg .introductionBase .introductionTxt strong , 
.yellowBg .introductionBase .introductionTxt { color: #000 }
.yellowType { color:#f8ce00 }

.content_base h3 { display: inline-block; margin:-100px 0 50px 0; padding: 10px 20px; width: 60%;  font: 24px/30px "arial","微軟正黑體";letter-spacing: 0;color: #fff; letter-spacing: 2px; border:1px solid #000; background: #9117e7 }
.content_base h3 strong { font-weight: normal; color: #f8ce00;}

.content_base .box { display: inline-block; width: 320px; padding: 0 20px; margin:0 0 50px 0; }
.content_base h4 { margin:0 0 20px 0; font: bold 22px/22px "arial","微軟正黑體";letter-spacing: 0;color: #f8ce00; letter-spacing: 2px;}
.content_base .box img { width: 100% }
.content_base h5 { margin:20px 0 0 0; font: 16px/22px "arial","微軟正黑體";letter-spacing: 0;color: #fff; letter-spacing: 1px }
.yellowBg h5 { color: #000 }
.yellowBg h4 { color: #4514b3 }


.content_base .content_title { position: relative; z-index: 2; }
.content_base .content_area {  position: relative; margin:-20px auto 0 auto; width:60%; height:auto; background: #7f2ccb url(../images/bg_content_repeat-x.jpg) top center repeat-x; z-index: 1; }
.content_base .content_area .text { position: static; top:9%; left:7%; width:42%; color: #fff}
.content_base .content_area .text h6 { font:bold 30px/40px "arial","微軟正黑體"; text-align: left; }
.content_base .content_area .text h4 { font:bold 20px/28px "arial","微軟正黑體"; text-align: left; color:#f0e325; }
.content_base .content_area .text p { margin: 0 0 10px 0; font:16px/24px "arial","微軟正黑體"; text-align: left; }
.content_base .content_area .text strong { color:#f0e325; }
.content_base .content_area .text small {font-size: 12px;}
.content_base .content_area .text a {color:#fff; text-decoration:underline !important;}
.content_base .content_area .text img { display: inline; white-space: nowrap; }


.content_base .content_area .contentButtonArea { width: 200%; }
.content_base .content_area .contentButtonArea img { margin: 0 1%;}

.content_base .shareCashArea { height: auto; }
.content_base .shareCashArea .text { margin:0 auto; padding: 20px 0; width:90%;}
.content_base .shareCashArea .contentButtonArea { width: 100% ; text-align: center;; }

.content_base .memnerBnArea { display: inline-block; width:28%; height:auto; }
.content_base .memnerBnArea .memnerBnAreaTitle { margin: 0 0 -15px 0 ; text-align: center; }
.content_base .memnerBnArea .memnerBn { background: #7f2ccb; text-align: center; }
.content_base .memnerBnArea .memnerBn img { margin: 3%; width: 94% }

.shareCashGuide { margin: 0 0 3% 0; }
.shareCashGuide li { display: inline-block; padding: 10px 15px; margin: 1% 0%; width:100%; height: auto ; font: 16px/20px "arial","微軟正黑體";color:#2b2b2b; background:#ffce27; }
.shareCashGuide li strong { font-weight: bold; text-decoration: underline; color: #000 !important; }


.ruleArea2 { margin:0 auto; width: 60%; height: auto; border:1px solid #fff; background: rgba(0,0,0,0.8)}
.ruleArea2 ul { margin: 0 auto; padding:  1% 0 ;width:90%; font: 14px/20px "arial","微軟正黑體";color: #fff; text-align:center;}
.ruleArea2 ul li{ margin-left: 5%; list-style-type:decimal ;text-align: left;}
.ruleArea2 ul strong {color:#f0e325;}
.ruleArea2HideButton { margin:10px auto 0 auto; width: 280px;  font: 14px/30px "arial","微軟正黑體"; color: #000; border-radius: 99em; box-shadow: 0 2px 0 rgba(0,0,0,0.5); background: #fff200 ; cursor: pointer;}
.ruleArea2Hide { display: none; }

/*C26*/
.item_base { width: 100%; }
.group-type-ph { }
.group-type-ph .ph { display: inline-block; position: relative; margin:0 0 4% 0; width:300px; vertical-align: top; background: #fff ;}
.ph-title { padding:2% 5%; width: 100% ; font: bold 14px/20px "arial","微軟正黑體"; color: #000; letter-spacing: -1px;}
.ph-detail { margin: 0 8%; padding:1%; width: 84% ; font: bold 14px/20px "arial","微軟正黑體"; color: #fff; background: #000; border-radius: 10px; letter-spacing: 1px; overflow: hidden;}
.ph-feature { margin: 2% 0 2% 2%; width:96%; text-align: left;font: bold 14px/18px "arial","微軟正黑體"; color: #757575; }
.ph em { font: bold 16px/30px "arial","微軟正黑體"; color: #000; letter-spacing: -2px;}
.ph em span{ margin: 0 0 0 -5px ; font: bold 30px/30px "arial","微軟正黑體"; color: #f00;}
.ph em i { margin: 0 0 0 -5px }
.group-type-ph .ph::after { content: "立即訂購"; display: block; position: absolute; bottom: -20px; width:100%; height:20px;font: bold 14px/20px "arial","微軟正黑體"; color: #fff; border-radius: 0 0 10px 10px; background: #f00 }

.slideBase { margin: 0 auto;  width: 50%; }

/**/
.introductionBase { margin:0 0 80px 0;  text-align: center;}
.introductionBase > div { display: inline-block; }
.introductionBase .introductionImg { position: relative; width: auto; }
.introductionBase .introductionImg .spider { position: absolute; top:0; left: 0; z-index: 2; }
.introductionBase .introductionTxt {width: 600px; padding: 10px; font: 16px/24px "arial","微軟正黑體"; text-align: left; color: #fff; }
.introductionBase .introductionTxt strong { font-size: 22px; font-weight: bold; color:#f8ce00 }

.textShadow { text-shadow:#000 0px 2px, #000 2px 0px, #000 -2px 0px, 
                          #000 0px -2px, #000 -1.4px -1.4px, #000 1.4px 1.4px, 
                          #000 1.4px -1.4px, #000 -1.4px 1.4px;  }

.spiderMov {-webkit-animation: spiderMov 5s infinite alternate;
             animation: spiderMov 5s infinite alternate;           
}

@keyframes spiderMov {
   0% {transform: translate(0,0); }
   25% {transform: translate(0,200px);}
   26% {transform: translate(0,200px) rotate(-90deg);}
   50% {transform: translate(300px,200px) rotate(-90deg);}
   51% {transform: translate(300px,200px) rotate(-180deg);}
   100% {transform: translate(300px,0) rotate(-180deg);}
}




.postGiftBase { margin:0 auto; padding: 10px; width: 800px; height: auto; background: #7f2ccb }
.postGiftBase > div { display: inline-block; padding:0; width: 33%; height:40px; border: 1px solid #fff;font: 16px/40px "arial","微軟正黑體"; color: #fff; vertical-align: top}
.postGiftBase > div:nth-child(1),
.postGiftBase > div:nth-child(2),
.postGiftBase > div:nth-child(3) { background: #ffce27; color: #000 }

@media only screen and (max-width: 1400px) {
.content_base .box img { width: 100% }
.slideBase { margin: 0 auto;  width: 80%; }
}

@media only screen and (max-width: 1190px) {
	
.allBase {  background-size: 100% }
header h1 { margin: 0.9% auto; display: inline-block;}
header h1 img { width: 70%; }
nav > ul > li {  margin: 15px 3%; }

.memnerBnAreaTitle img {width: 100%}
.content_base h3 { margin-top: 0; width: 80%;}
.shareCashGuide li { width:100%;  }

.ruleArea2 { width: 80% }

}


@media only screen and (max-width: 800px) {
.postGiftBase { margin:0 auto; padding: 10px; width: 100%; height: auto; background: #7f2ccb }
.postGiftBase > div { display: inline-block; padding:0; width: 30%; height:40px; border: 1px solid #fff;font: 14px/20px "arial","微軟正黑體"; color: #fff; vertical-align: top}
}




@media only screen and (max-width: 640px) {
nav { position: fixed; top:0; left: 100%; display: inline-block; width: 50% ; height: 100%; background: rgba(145,23,231,0.9)}
nav > ul {display: inline-block;margin:0 auto; width: 50%}
nav > ul > li { display: block; position: relative; margin: 15px 0%;  text-align: center; }
nav > ul > li a,
nav > ul > li a:link,
nav > ul > li a:visited { font:16px/18px "arial","微軟正黑體"; color:#fff; letter-spacing: 0; }
nav > ul > li::after { display: none }

.mobileNavButton { display: inline-block; position: fixed; top: 0; right: 0; width: 40px; height: 40px;font: 24px/40px "arial","微軟正黑體"; color: #fff; text-align: center;  background: rgba(0,0,0,0.5); z-index: 9999}	
.mobileOnly { display: block; width: 100% }
header h1 { display: none; }
h2 { margin-bottom: 3%; font: bold 30px/30px "arial","微軟正黑體";letter-spacing: 0;color: #f8ce00; letter-spacing: 2px;}
h2 small { font-weight: normal; font-size: 12px; line-height: 12px; letter-spacing: 4px }
h2 img {width: 80%}
h2.title::before  { display: none }
h2.title::after  { display: none }

.content_base { background-size: 300%}
.content_base h3 { font: 16px/20px "arial","微軟正黑體"; }

.content_base .content_title img { width: 90% }
.content_base .content_area {height: auto; text-align: center;width:80%;}
.content_base .content_area .text { position: static; top:0; left:0; margin: 0 auto; padding: 10% 0 10% 0 ; width: 80%; text-align: center;}
.content_base .content_area .text h6,
.content_base .content_area .text p { text-align: center; }



.content_base .memnerBnArea { display: inline-block; width:80%; height:auto; }
.content_base .memnerBnArea .memnerBnAreaTitle { margin: 0 0 -15px 0 ; text-align: center; }
.content_base .memnerBnArea .memnerBn { background: #7f2ccb; text-align: center; }
.content_base .memnerBnArea .memnerBn img { margin: 3%; width: 94% }
.contentButtonArea img {width: 100%}


.group-type-ph { margin:20% auto 0 auto; width: 300px; }
.group-type-ph .ph::after { display: none }
.group-type-ph .ph { margin-bottom: 1% }

.introductionBase { margin:0 0 0% 0;}
.introductionBase .introductionTxt {width: 80%;  }
.slideBase { margin: 0 auto;  width: 84%; }



}




/*ruleArea*/
.ruleArea { width: 100%; height: auto; background: #232323 }
.ruleArea ul { margin: 0 auto; padding:  1% 0 ;width:70%; font: 14px/20px "arial","微軟正黑體";color: #fff;}
.ruleArea ul li{list-style-type:decimal}
.ruleArea ul strong {color:#f0e325;}




.toMov {
animation-name: toMov;animation-duration: 0.5s;animation-fill-mode: both; z-index: 99 }


@keyframes toMov {
  
  0% {    
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform:scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
 
 
	
100% {
	-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform:scale(1.1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; 
    
  }	
}


.toOrg {
animation-name: toOrg;animation-duration: 0.5s;animation-fill-mode: both; z-index: 1;
}


@keyframes toOrg {
  
  0% {
	 
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform:scale(1.1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
 
 
	
100% {
	
	 -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform:scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    
  }	
}







/*有副按鈕的模組CSS*/
.hasSecButton { position: relative; cursor: pointer;  }
.secButton { display: none; position: absolute; top:0px; left: -10%; width: 120%; background: rgba(0,0,0,0.8) }
.secButton > a { display: block; margin:10px 0; font:16px/20px "arial","微軟正黑體"; color: #fff}
@media only screen and (max-width: 640px) {
  .secButton { display: block; position: static; top:0; left:0; width: 100%; padding: 2% 0; background: rgba(0,0,0,0.2) }
}