@charset "utf-8";
/* CSS Document */

   .wrapper {width:100%;background-image: url(../images/main_bg.jpg) , url(../images/con_bg.jpg);background-position:center 0, center bottom;background-repeat:no-repeat, repeat;position:relative;}
   .menu_bg {width:100%;height:85px;background:url(../images/menu_bg.png) 0 0 repeat-x;top:0;position:fixed;z-index:100;}
   .menu {width:1100px;margin:0 auto;}
   .menu li {width:25%;height:85px;border-right:1px solid #FFF;box-sizing:border-box;font:26px/80px Arial, "微軟正黑體";text-align:center;float:left;}
   .menu li:last-child {border:0;}
   .menu li a {display:inline-block;width:100%;height:85px;text-decoration:none;color:#000; vertical-align:middle;}
   .menu li a:hover {display:block;width:100%;height:85px;text-decoration:none;color:#7D0000;font:26px/80px Arial, "微軟正黑體";}
    .menu li > a::before {
        content: " ";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        line-height: 85px;
        background-repeat: no-repeat;
        background-position: center 43%;
        background-size: initial;
    }
   .menu li.m1 > a::before {background-image:url(../images/m1.png); width: 40px;}
   .menu li.m2 > a::before {background-image:url(../images/m2.png); width: 50px;}
   .menu li.m3 > a::before {background-image:url(../images/m3.png); width: 40px; background-size: 100%;}
   .menu li.m4 > a::before {background-image:url(../images/m4.png); width: 35px;}
   .menu li.m1 > a:hover::before {background-image:url(../images/m1-1.png);}
   .menu li.m2 > a:hover::before {background-image:url(../images/m2-1.png);}
   .menu li.m3 > a:hover::before {background-image:url(../images/m3-1.png);}
   .menu li.m4 > a:hover::before {background-image:url(../images/m4-1.png);}


   .main {width:1100px;height:955px;margin:0 auto;position:relative;}
   .logo {width:572px;height:347px;left:50%;top:150px;margin:0 0 0 -286px;position:absolute;
	animation: scroll 0.8s linear infinite alternate;
    -webkit-animation: scroll 0.8s linear infinite alternate;}
	@keyframes scroll {
     from {margin-top:0;}
    to {margin-top:-10px;}
	}
   .content {width:1100px;margin:0 auto 20px;padding:0 20px 20px;box-sizing:border-box;}
   .content_l {width:740px;float:left;}
   .content_r {width:300px;float:right;position:relative;}
   .banner.active {position:fixed;z-index:99;bottom:120px;
    /*animation: move 2s ease-out;*/}
	/*@keyframes move
	{
	  0% {top:85px;}
	  50% {top:115px;}
	  100% {bottom:116px;}
	}*/



   .mazu {width:100%;margin:20px 0 0;padding:0 0 40px;background-image: url(../images/b_btm.jpg) , url(../images/b_bg.png);background-position:center bottom, center 0;background-repeat:no-repeat, repeat;box-sizing:border-box;position:relative;}
   .m0 {margin:0;}
   .mazu iframe {margin:20px 40px 0;}
   .banner300 {width:740px;height:330px;margin:20px 0 0;padding:20px;background:url(../images/banner.jpg) 0 0 no-repeat;box-sizing:border-box;}
   .banner300 li {width:300px;height:250px;margin:20px 0 0 33px ;float:left;}
   .banner740 {width:740px;margin:20px 0 0;}

   .news {width:100%;padding:20px 40px 0;box-sizing:border-box;}
   .news img {width:100%;}
   .news li {width:48%;margin:10px 1%;float:left;}
   .news li p {border-bottom:1px solid #000;margin:5px 0;font:12px/20px Arial;}
   .news_title {color:#7D0000;font:bold 20px/26px "微軟正黑體", Arial;}
   .news_title a {text-decoration:none;color:#7D0000;font:bold 20px/26px "微軟正黑體", Arial;}
   .news_con {font:13px/20px "微軟正黑體", Arial;}
   .news_con a {text-decoration:none;color:#000;font:13px/20px "微軟正黑體", Arial;}
   .More {width:100px;height:30px;margin:20px auto 10px;background:#000;text-align:center;border-radius:30px;font:20px/30px "微軟正黑體", Arial;}
   .More a ,.More a:hover {display:block;text-decoration:none;width:100px;height:30px;color:#FF0;}
   
   .maps {width:683px;height:312px;margin:40px auto 10px;background:url(../images/maps.png) 0 0 no-repeat;position:relative;}
   .day1 {width:64px;height:39px;top:60px;left:290px;position:absolute;}
   .day2 {width:65px;height:39px;top:95px;left:135px;position:absolute;}
   .day3 {width:65px;height:39px;top:160px;left:80px;position:absolute;}
   .day5 {width:65px;height:39px;top:125px;left:185px;position:absolute;}
   .day6 {width:65px;height:39px;top:95px;left:230px;position:absolute;}
   .day7 {width:61px;height:39px;top:55px;left:210px;position:absolute;}
   .day8 {width:57px;height:39px;top:20px;left:320px;position:absolute;}
   .day9 {width:58px;height:39px;top:10px;left:385px;position:absolute;}

   .day1 a {display:block;width:64px;height:39px;background:url(../images/day1.png) 0 0 no-repeat;}
   .day2 a {display:block;width:65px;height:39px;background:url(../images/day2.png) 0 0 no-repeat;}
   .day3 a {display:block;width:65px;height:39px;background:url(../images/day3.png) 0 0 no-repeat;}
   .day5 a {display:block;width:65px;height:39px;background:url(../images/day5.png) 0 0 no-repeat;}
   .day6 a {display:block;width:65px;height:39px;background:url(../images/day6.png) 0 0 no-repeat;}
   .day7 a {display:block;width:61px;height:39px;background:url(../images/day7.png) 0 0 no-repeat;}
   .day8 a {display:block;width:57px;height:39px;background:url(../images/day8.png) 0 0 no-repeat;}
   .day9 a {display:block;width:58px;height:39px;background:url(../images/day9.png) 0 0 no-repeat;}
   .day1 a:hover {display:block;width:64px;height:39px;background:url(../images/day1-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day2 a:hover {display:block;width:65px;height:39px;background:url(../images/day2-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day3 a:hover {display:block;width:65px;height:39px;background:url(../images/day3-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day5 a:hover {display:block;width:65px;height:39px;background:url(../images/day5-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day6 a:hover {display:block;width:65px;height:39px;background:url(../images/day6-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day7 a:hover {display:block;width:61px;height:39px;background:url(../images/day7-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day8 a:hover {display:block;width:57px;height:39px;background:url(../images/day8-1.png) 0 0 no-repeat;top:-2px;position:absolute;}
   .day9 a:hover {display:block;width:58px;height:39px;background:url(../images/day9-1.png) 0 0 no-repeat;top:-2px;position:absolute;}

   .mask, .popup_content {
     display:none;
   }

   .mask {
     position: fixed;
     top:0;
     left:0;
     z-index:100;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,.9);
   }

   .poptext {
     display: none;
   }

   .popup_content {
     position: fixed;
     z-index:101;
     left: 50%;
     top: 50%;
     width:660px;
     height:auto;
     margin: -285px 0 0 -330px;
     padding:30px;
     background: rgba(255,255,255,.9);
     border:1px solid #999;
     box-sizing:border-box;
   }
   .closeBtn {width:30px;height:30px;top:30px;right:30px;position:fixed;}
   .popmain h2 {font:bold 30px/36px "微軟正黑體", Arial;}
   .popmain p {font:15px/25px "微軟正黑體", Arial;}
   .temple {width:450px;height:300px;margin:60px auto 0;}
   .temple img {width:100%;}

   .fortune {width:700px;height:280px;margin:20px auto 10px;}
   .rndBtn {
     display: block;
     width: 230px;
     height: 60px;
     margin:0 auto;
   }

   #content {
     position:absolute;
     top:100px;
     left:20px;
	 width:700px;height:300px;
   }

   #content > div {
     position: absoulte;
     left: 0;
     top: 0;
     display: none;
	 width:540px;height:260px;padding:20px 80px;
   }

   #content > div:first-child {
     background:#b6e8eb;
   }
   #content > div:first-child + div {
     background:#b6e8eb;
   }
   #content > div:first-child + div + div {
     background:#b6e8eb;
   }
   #content > div:first-child + div + div + div {
     background:#b6e8eb;
   }
   #content > div:first-child + div + div + div + div {
     background:#b6e8eb;
   }
.result {width:540px;height:260px;margin:20px auto 0;padding:20px 80px 0;}
.result_l {width:240px;height:235px;float:left;}
.result_r {width:285px;height:235px;margin:10px 0 0;font:20px/30px "微軟正黑體", Arial;float:right;}
.result_btn {width:100%;margin:20px 0 0;}
.share {width:140px;height:45px;cursor: pointer;float:left;}
.again {width:140px;height:45px;cursor: pointer;float:right;}




   .activities_title {margin:10px 0 0;font:15px/25px "微軟正黑體", Arial;}
   .activities li {list-style-type:decimal;margin:0 10px 0 20px;font:15px/25px "微軟正黑體", Arial;text-align:justify;}

   .playAgainWindow {
      position: fixed;
      z-index: 102;
      top: 50%;
      left: 50%;
      display: none;
      width: 400px;
      height: 150px;
      margin: -75px 0 0 -200px;
      background: #fff;
      box-shadow: 0 0 6px rgba(0,0,0, .5);
      border-radius: 5px;
      border: 2px solid #ccc;
   }

   .playAgainWindow h2 {
      display: block;
      width: 100%;
      height: 80px;

      line-height: 80px;
      text-align: center;
      font-size: 20px;
   }

   .playAgainWindow > p {
      display: block;
      width: 100%;
      height: auto;

      text-align: center;
   }

   .playAgainWindow > p a {
      display: inline-block;
      width: 90px;
      height: 40px;
      margin-left: 10px;
      background: #ececec;
      border-radius: 3px;

      text-decoration: none;
      line-height: 40px;
      color: #666;

   }

   .playAgainWindow > p a.playAgainBtn {
      background: #b6e8eb;
   }


.gift {width:680px;margin:0 auto;}
.gift li {width:31%;margin:0 1.1666%;font:13px/20px "微軟正黑體", Arial;text-align:center;float:left;}
.gift li img {width:100%;}
.gift li span {color:#7D0000;}


.copyright {margin:0 auto;}
.copyright_l {font:13px/58px "微軟正黑體", Arial;text-align:center;color:#CCC;}

.footer {
    font-family: Arial, "Microsoft JhengHei", sans-serif;
    line-height: 30px;
    width: 100%;
    box-sizing:border-box;
    margin:0;
    background: #000000;
    font-size: 15px;
    color: #888;
    padding: 10px;
}

.copyright {
    width: 98%;
    max-width: 1100px;
    margin: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
}
    .copyright > div {
        width: 60px;
        vertical-align:middle;
    }
    .copyright > ul {
        display: -webkit-flex;
        display: flex;

        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
        .copyright > ul > li {
            box-sizing: border-box;
            -webkit-align-content: center;
            align-content: center;
            -webkit-align-items: center;
            align-items: center;

            padding: 5px;
        }
        .copyright > ul > li > img{
            width: 100%;
            display:inline-block;
            vertical-align:middle;
        }

@media screen and (max-width:1099px) {
    .menu {width:100%;margin:0 auto;}

    .main {width:100%;}

    .content {width:100%;}
    .content_l {margin:0 auto;float:none;}
    .content_r {display:none;}
    .banner img {width:100%;}
}
@media screen and (max-width: 1024px) {
    .copyright {
        display: initial;
    }
    .copyright > div {
        width: 100%;
       text-align:center;
       margin: 10px;
    }
        .copyright > ul {
            -webkit-flex-wrap: wrap; /* Safari 6.1+ */
            flex-wrap: wrap;
            -webkit-justify-content: space-around;
            justify-content: space-around;
        }
            .copyright > ul > li {
                -webkit-flex: initial;
                -ms-flex: initial;
                flex: initial;
            }
}
/*.copyright {width:100%;}
.copyright_bg p {width:100%;padding:10px 0;}
.copyright {text-align:center;}
.copyright span {display:inline-block;margin:5px 0;height:44px;}
.copyright img {margin:0 10px;float:left;}*/