.inlineBlockSpacing {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
    
}

#mtkContainer,
#mtkContainer * { box-sizing: border-box; }
#mtkContainer { overflow-x:hidden;  }

body { background: #e9e9e8;  }

/* 版頭 */

header.header { position: relative; height: 747px; background: url(../images/top_1961_web.jpg) #e9e9e8 top center no-repeat; }
header.header h1 { display: none; }

.heart {position: absolute;right: 41%; top: 7%; display: inline-block; animation: heartAni 0.8s infinite ; animation-direction:alternate; }
        @keyframes heartAni {
          0% { filter: contrast(80%); }  
          100% { filter: contrast(300%);  } 
        }


.gift{width:60%; margin: 0 auto;max-width: 700px;padding: 30px 0;}
.giftTitle {font:bold 34px/1 "微軟正黑體"; color:#ffffff;text-align: center;padding: 20px 0;}
.giftTitle::after{content: "★★★★★★★★★★★★★★★★★★★★★★";position: relative;color:#FFF;font:18px/1 "微軟正黑體";letter-spacing: 3px;}
.giftArea{width:100%;border: #FFF 3px solid ;border-radius: 30px;margin: 0 auto;padding: 30px 0;background: #4778a1;position: relative;}
.giftArea p  {font:bold 28px/1.4 "微軟正黑體"; color:#f9ff92;text-align: left;margin-left: 10%;}

.giftArea::after{content: "";background: url(../images/cash.png) ;width: 180px;height: 152px;background-size: 100%;right: -10px;position: absolute;top: 50px;}

.giftArea small{font:15px/1.4 "微軟正黑體"; color:#FFF;text-align: center;margin: 0 auto;display: block;}
.her{background:#fb81a9;font:bold 32px/1.6 "微軟正黑體";width: 200px;border-radius: 15px;text-align: center;color:#FFF;margin: 10px auto; animation: bright infinite 0.5s linear;-webkit-animation: bright infinite 0.5s linear;}

@keyframes bright{
    0%{
        background:#fb81a9;
            }

    50%{
       background: #ff5b8d;
    }

    100%{
        background:#fb81a9;
            }

}




@media only screen and (max-width: 1140px){
.gift{width:80%;max-width: none;}
}
@media only screen and (max-width: 855px){
.gift{width:95%;max-width: none;}
}

@media only screen and (max-width: 800px){
.giftArea::after{content:none;}
}
@media only screen and (max-width: 620px){
.giftTitle{font:bold 5.5vw/1 "微軟正黑體";}
.giftTitle::after{font:3.3vw/1 "微軟正黑體";}
.giftArea p{font:bold 4.5vw/1.4 "微軟正黑體";}
.her{font:bold 7vw/1.6 "微軟正黑體";width: 50%;}
.giftArea small{width: 90%;}

}






/* 第二區 */

.text-area{position: relative; background: url(../images/area_bg2.jpg) #53533f top center no-repeat;  }
.text-area .text { display: block; max-width: 1400px;margin: 0 auto; width: 100%; letter-spacing: normal; text-align: center;}


.text-area .text h2 { font: 45px/3 "微軟正黑體" ; color: #fff100; letter-spacing: 7px; text-decoration:underline;}
.text-area .text p { font: 28px/2.5 "微軟正黑體" ;color: #fff; letter-spacing: 2px;}

.md{ position: absolute; bottom: 6% ; right: 25%;} 



/* 第三區 */
.step_area{ background: url(../images/area_bg3.jpg) #6084a1 top center no-repeat; }
.step{display: block;width: 100%; max-width: 1200px;margin: 0 auto; }

.step1{padding: 20px 0; text-align:justify;}
.step1 h2{font:bold 45px/2 "微軟正黑體" ; color: #41ffd0;letter-spacing: 3px; }
.step1 h3{font: 36px/1.5 "微軟正黑體" ; color: #fff100;letter-spacing: 3px;  }
.step1 p{font: 26px/1.5 "微軟正黑體" ;color: #fff; letter-spacing: 2px;}
.step1 a{font: 26px/1.5 "微軟正黑體" ;color: #41ffd0; letter-spacing: 3px;text-decoration:underline;}  
.notice{font: 26px/1.5 "微軟正黑體" ;color: #fff100; letter-spacing: 3px;}  
span.heart2{font-size: 28px; color:#e73155;  -webkit-text-stroke : 1.5px #fff ;  }

.step1 h4{display: block;padding:20px 0 ;}
.step1 h5{display: none;}


/* 第三區icon */
.content {  margin: 20px auto; width: 100%;   letter-spacing: normal;  }
.infor-button li{display: inline-block;text-align: center; padding: 0 5% 0 0;}
.infor-button li a {font: 24px "微軟正黑體" ; color: #41ffd0; letter-spacing: 3px; }  
.infor-button li:hover{  cursor: pointer; text-decoration:underline; }


/* 登入 */
span.sign2 { font: 26px "微軟正黑體" ; color: #41ffd0; letter-spacing: 3px; text-decoration:underline;  }
span.sign2 a:hover{  cursor: pointer; color: #bfffb6; }


/* 第四區 */

.note_area {height: auto; background: url(../images/area_bg4.jpg) #dfdfdf top center no-repeat; }
.note { display: block; width: 100%; max-width: 1200px;margin: 0 auto; padding: 3% 0;}

.note_inside{ letter-spacing:normal ; }
.note1 h2{font:bold 36px/2"微軟正黑體" ; color: #356a8f; }

.note2 li{font: 18px/3 "微軟正黑體" ;color: #356a8f; }

.note_inside .note2_2{font: 18px/2 "微軟正黑體" ;color: #de355b; }



@media only screen and (max-width: 800px){
header.header { height: auto; background: #e9e9e8; }
header.header h1 { display: block; }
header.header h1 img { width: 100%; }

.heart {position: absolute;right: 21%; top: 7%; display: inline-block; animation: heartAni 0.8s infinite ; animation-direction:alternate; }
        @keyframes heartAni {
          0% { filter: contrast(80%); }  
          100% { filter: contrast(300%);  } 
        }
.heart img{width: 45%;}


/* 第二區 */
.text-area{position: relative;}
.text-area .text h2 { font: 40px/3 "微軟正黑體" ; color: #fff100; letter-spacing: 7px; text-decoration:underline;}
.md{ position: absolute; bottom: 6% ; right: 0;} 


/* 第三區 */
.step1 a{font: 16px}  

.step_area{margin: 0 auto; padding: 3% 6%;}

.step1 h2{font:bold 40px/2 "微軟正黑體" ;  }

.step1 h4{width: 100%;}
.step1 h4 img{width: 100%; }





/* 第三區icon */

.content {   width:100%;   }

.infor-button li h2{   line-height: 1; }

.infor-button li h2 a{font: 20px "微軟正黑體" ;color: #41ffd0; letter-spacing: 3px; }  

.infor-button li{  width: 20%;  padding:3%  1% 0 0;}
.infor-button img{width: 90%;}






/* 第四區 */


.note { display: block; margin: 0 auto; padding: 3% 4%; }


}









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

/* 第二區 */
.text-area {position: relative; padding: 5% 5% 0 5%;}
.text-area .text h2 { font: 24px/1.5 "微軟正黑體" ;  }
.text-area .text p { font: 16px/2 "微軟正黑體" ;  }


.text-area .md { position: absolute; bottom: -60px; right: -40px;} 

.text-area .md img{ width: 60%;} 





/* 第三區 */
.step_area{padding: 0 4% 0 4%;}
.step1 h2{font:bold 28px/2 "微軟正黑體" ;   }
.step1 h3{font: 20px/1.5 "微軟正黑體" ;   }
.step1 p{font: 16px/1.5 "微軟正黑體" ;}
.notice{font: 16px/1.5 "微軟正黑體" ;}  
.step1 a{font: 16px "微軟正黑體" ;}  
.step1 .heart2{font: 16px/1.5; }



.infor-button li{  width: 20%;  padding:0; }
.infor-button li h2{   line-height: 0.5; }

.infor-button li h2 a{font: 14px "微軟正黑體" ;color: #41ffd0; letter-spacing: normal;}  

.infor-button img{width: 80%;}


span.heart2{font-size: 26px; line-height: 25px; }



.step1 h4{display: none;}

.step1 h5{display: block;width: 100%;padding: 5% 5% 0 5%;}

.step1 h5 img{width: 100%;  border: solid 1px #fff ;   }


/* 第四區 */


.note1 h2{font:bold 24px/2"微軟正黑體" ; color: #356a8f; }

.note2 li{font: 16px/2 "微軟正黑體" ;color: #356a8f; }

.note_inside .note2_2{font: 16px/2 "微軟正黑體" ;color: #de355b; }


	
}