/*RWD*/
.for_pc{ display: block; }
.for_m{ display: none; }
@media screen and (max-width:950px){
.for_pc{ display: none;}
.for_m{ display: block;}
}

@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

body{background:#312a31; background-size:100% auto;}




/*BG-lantern*/
.decoration .lantern1{ width: 109px; height: 241px; position: absolute; left:50%; top:0; margin: -45px 0 0 566px; transform-origin: center top; animation:lantern1 1.2s linear infinite alternate;}
.decoration .lantern2{ width: 55px; height: 125px; position: absolute; left:50%; top:0; margin: 97px 0 0 -583px; transform-origin: center top; animation:lantern2 1.2s 0.5s linear infinite alternate;}
@keyframes lantern1{
	from{transform:rotate(2deg);}
	to{transform:rotate(-2deg);}
}
@keyframes lantern2{
	from{transform:rotate(-3deg);}
	to{transform:rotate(3deg);}
}


/*進度*/
.pro{position: absolute; left:50%; top:0; margin: 20px 0 0 -198px; }
.pro li{float: left; width:91px; height:91px; background: url(../images/progress.png) no-repeat; font-family:"Century Gothic", Arial, "Microsoft JhengHei"; font-weight: bold; color:#f5c656; text-align: center;
    padding-top: 9%; margin: 0 0 0 3px; 
    font-size: 26px;}
.pro li span{ font-size:17px; position: relative;
    top: -2px;}
.pro li.on{background: url(../images/progressON.png) no-repeat; color: #fff;}
.pro li.show{animation:pro 1.2s linear;}
@keyframes pro {
   0% {transform: scale(1);}
   15% {transform: scale(1.15);}
   30% {transform: scale(1);}
   45% {transform: scale(1.15);}
   60% {transform: scale(1);}
   75% {transform: scale(1.15);}
   90% {transform: scale(1);}
   100% {transform: scale(1);}
}

@media screen and (max-width:950px){
	.pro {
    position: absolute;
    top: 0;
    margin: 2% 0 0 -32.5%;
    width: 65%;}
	.pro li {
    width: 25%;
    height: 0;
    background: url(../images/progress.png);
    padding-top: 8%;
    background-size: contain;
    padding-bottom: 17%;
    margin: 0;
	font-size: 5.5vw;}
	.pro li span {
    font-size: 60%;}
    .pro li.on {
    background: url(../images/progressON.png);
    background-size: contain;}
}/*media*/


/*other*/
.progress a{text-decoration: none;}



/*字型樣式*/
/*.fontSize_S{font-size:30px !important;}*/
.fontSize_S{font-size:30px;}
/*.fontSize_M{font-size:40px !important;}*/
.fontSize_M{font-size:40px;}
/*.fontSize_L{font-size:50px !important;}*/
.fontSize_L{font-size:50px;}

/*.fontColor_red{ color:#a50707 !important;}
.fontColor_orange{ color:#cd8024 !important;}
.fontColor_yellow{ color:#fcff00 !important;}
.fontColor_green{ color:#2aa17e !important;}
.fontColor_blue{ color:#4d65dd !important;}
.fontColor_pink{ color:#dd2c90 !important;}
.fontColor_white{ color:#fff !important;}
.fontColor_black{ color:#000 !important;}*/
.fontColor_red{ color:#a50707;}
.fontColor_orange{ color:#cd8024;}
.fontColor_yellow{ color:#fcff00;}
.fontColor_green{ color:#2aa17e;}
.fontColor_blue{ color:#4d65dd;}
.fontColor_pink{ color:#dd2c90;}
.fontColor_white{ color:#fff;}
.fontColor_black{ color:#000;}

/*.cwTeXYen{ font-family:'cwTeXYen' !important; }
.cwTeXKai{ font-family:'cwTeXKai' !important; }
.cwTeXMing{ font-family:'cwTeXMing' !important; }*/

.cwTeXYen{ font-family:'cwTeXYen'; }
.cwTeXKai{ font-family:'cwTeXKai'; }
.cwTeXMing{ font-family:'cwTeXMing'; }

/*.fontBorder_red{text-shadow: 0 0 5px #a50707,0 0 5px #a50707,0 0 5px #a50707,0 0 5px #a50707 !important; }
.fontBorder_orange{text-shadow: 0 0 5px #cd8024,0 0 5px #cd8024,0 0 5px #cd8024,0 0 5px #cd8024 !important; }
.fontBorder_yellow{text-shadow: 0 0 5px #fcff00,0 0 5px #fcff00,0 0 5px #fcff00,0 0 5px #fcff00 !important; }
.fontBorder_green{text-shadow: 0 0 5px #2aa17e,0 0 5px #2aa17e,0 0 5px #2aa17e,0 0 5px #2aa17e !important; }
.fontBorder_blue{text-shadow: 0 0 5px #4d65dd,0 0 5px #4d65dd,0 0 5px #fff,0 0 5px #4d65dd !important; }
.fontBorder_pink{text-shadow: 0 0 5px #dd2c90,0 0 5px #dd2c90,0 0 5px #dd2c90,0 0 5px #dd2c90 !important; }
.fontBorder_white{text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff !important; }
.fontBorder_black{text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000 !important; }*/

.fontBorder_red{text-shadow: 0 0 5px #a50707,0 0 5px #a50707,0 0 5px #a50707,0 0 5px #a50707; }
.fontBorder_orange{text-shadow: 0 0 5px #cd8024,0 0 5px #cd8024,0 0 5px #cd8024,0 0 5px #cd8024; }
.fontBorder_yellow{text-shadow: 0 0 5px #fcff00,0 0 5px #fcff00,0 0 5px #fcff00,0 0 5px #fcff00; }
.fontBorder_green{text-shadow: 0 0 5px #2aa17e,0 0 5px #2aa17e,0 0 5px #2aa17e,0 0 5px #2aa17e; }
.fontBorder_blue{text-shadow: 0 0 5px #4d65dd,0 0 5px #4d65dd,0 0 5px #fff,0 0 5px #4d65dd; }
.fontBorder_pink{text-shadow: 0 0 5px #dd2c90,0 0 5px #dd2c90,0 0 5px #dd2c90,0 0 5px #dd2c90; }
.fontBorder_white{text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff; }
.fontBorder_black{text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000; }

@media screen and (max-width:950px){
/*.fontSize_S{font-size:6vw !important;}
.fontSize_M{font-size:8vw !important;}
.fontSize_L{font-size:10vw !important;}*/
.fontSize_S{font-size:6vw;}
.fontSize_M{font-size:8vw;}
.fontSize_L{font-size:10vw;}

}/*media*/