@charset "big5";
/* CSS Document */
/* --------------------------------------
 * Layout.css
 * -------------------------------------- */


  /*PC背景-背景00捲動物件
  @media screen and (min-width:768px){
		.Area_bgtop_00 { z-index:-55; position:fixed; top:0; left:0; width:100%; height:100%; background-image:url(bgtop_00.png?t=1586742441459); background-position:center 0px; background-repeat:repeat-y; transition: 0.1s linear; pointer-events:none;}
		.Area_bgtop_00 { opacity: 0; transition: opacity 0.5s, background 0.1s linear;}
		.Area_bgtop_00.cate-hover { opacity: 1; transition: opacity 1s, background 0.1s linear;}	
  }*/

  /*PC背景*/
.Area_bgtop { z-index:-40; position:absolute; top:0; left:50%; width:2000px; -webkit-transform:translateX(-50%); transform:translateX(-50%); pointer-events: none; }
.Area_bgtop .bgtop_  { position:absolute; top:0; left:0; width:100%; height:1000px;}
.Area_bgtop .bgtop_  span { position:absolute; display: block; width:100%; height:100%; background-position:center top;}
	  /*PC背景*/
	@media screen and (min-width:768px){
    .Area_bgtop { width:100%;}
    .Area_bgtop span { background-repeat: no-repeat;}
	.Area_bgtop_1 .bgtop_1_1 span { background-image: url(bgtop_1_1.jpg?t=1586742441459); height:1010px;}
	.Area_bgtop_1 .bgtop_1_2 span { background-image: url(bgtop_1_2.png?t=1586742441459);  height:1010px; z-index: 10;pointer-events: none;}
	}

/*Phone背景*/
.m_Area_bgtop { z-index:-40; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events: none;}
.m_Area_bgtop .m_bgtop_  { position:absolute; top:0; left:0; width:100%; height:0; padding-bottom:100%;}
.m_Area_bgtop .m_bgtop_  span { position:absolute; display: block; width:100%; height:0; padding-bottom:100%; overflow:hidden; background-position:center top; background-size:100%;}
@media screen and (max-width:767px){
		.m_Area_bgtop_1 { overflow: hidden; }
		.m_Area_bgtop_1 .m_bgtop_1_1 span { background-image: url(m_bgtop_1_1.jpg?t=1586742441459); padding-bottom: 100vw;}
		.m_Area_bgtop_2 .m_bgtop_2_1 span { background-image: url(m_bgtop_2_1.png?t=1586742441459); background-repeat: no-repeat;padding-bottom: 90%;}
		.m_Area_bgtop_2 .m_bgtop_2_2 span { background-image: url(m_bgtop_2_2.png?t=1586742441459); background-repeat: no-repeat;}
  }

/*按鈕btn*/
    .Area_top .btn_ { z-index:5; position:absolute; top:80px; right:140px;}
    .Area_top .btn_ a { -webkit-transition: all 0.2s ease;
								 -moz-transition: all 0.2s ease;
								  -ms-transition: all 0.2s ease;
								   -o-transition: all 0.2s ease;
									  transition: all 0.2s ease; }

    .Area_top .btn_ a { display:block;padding:0 20px; font-weight:800; font-size:25px;height: 45px; line-height:30px; color:#fff; background:url(btn_more_bg.png?t=1586742441459) no-repeat center top; background-size: 100%; text-shadow: 0 2px 0 rgba(0,0,0,.6);}
    .Area_top .btn_ a:after { content:""; display:block; z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; background-size: auto 100%; background-repeat:no-repeat; background-position: 100% center; pointer-events: none;}
    .Area_top .btn_:hover a { color:#ffd080; filter: brightness(1.5);}
      @media screen and (max-width:767px){
        .Area_top .btn_ { top: 4vw; right: 15vw;}
        .Area_top .btn_ a {padding: 0 5vw 0 3vw;border-width:0.4vw;font-size:5vw;line-height: 7vw;}
        .Area_top .btn_2n a {padding: 0px 6vw 0 3vw;}
      }

		/*詳情*/
		.Area_top .btn_more { top:80px; right:50px;}
			@media screen and (max-width:767px){
				.Area_top .btn_more {top:4vw;right: -5vw;}
			}

    
        @media screen and (max-width:767px){
            .Area_game .title { position: relative; top: 0; }
            .Area_game .box { position:relative; width: 96%;  margin: 4vw auto 0; padding:3% 2% 1%;  background-size: 100%;}
            .Area_game .box:before { top: -18.5vw;height: 20vw; background-size: 100%;}
            .Area_game .box:after { bottom:-2vw; height: 2vw; background-size: 100%; } 
        }

/* --------------------------------------
 * 登記抽
 * -------------------------------------- */



/*--船的動畫--*/
.ferry {z-index: -1; position: absolute;left: -22vw;top: 46.5vw;width:20%;animation: move 3s ease-in-out 0s 1 alternate forwards;background-image: url('boat.png?t=1586742441459');background-position: center center;background-size: 100%;padding-bottom: 0vw;height:20%;background-repeat: no-repeat;}

@keyframes move {
  0% {transform:translate(-25vw,-4.5vw);}
  100% {transform:translate(25vw,4.5vw);}
}
@-webkit-keyframes move {
  0% {transform:translate(-25vw,-4.5vw);}
  100% {transform:translate(25vw,4.5vw);}
}

/*--火車的動畫--*/
.train {z-index: -1; position: absolute;right: -23vw;top: 18.5vw;width:23%;animation: move_2 3s ease-in-out 0s 1 alternate forwards; background-image: url('train.png?t=1586742441459');background-position: center center;background-size: 100%;padding-bottom: 0vw;height:27%;background-repeat: no-repeat;}

@keyframes move_2{
  0% {transform:translate(22vw,-12vw);}
  100% {transform:translate(-22vw,12vw);}
}

@-webkit-keyframes move_2{
  0% {transform:translate(22vw,-12vw);}
  100% {transform:translate(-22vw,12vw);}
}

    /*登記*/
.Area_game01 { }
.Area_game01 .box .game_close { z-index: 1;  display: block; position: relative; top: 0px; left: 0; width: 960px; margin: 0 auto;}
    @media screen and (max-width:767px){
      .Area_game01 { }
	  .Area_game01 .box .game_close {  top: 0; left: 0; width: 100%; }
	  .Area_game01 .box_1 .box_btn .btn_01 {width: 45%;margin: 0 auto;}
    }
    /*文字*/
	.Area_game01 .box_1 p{ margin: 0; padding: 0;}
	.Area_game01 .box_1 .txt_1{font-size: 34px;color: #ffefc5;}
	.Area_game01 .box_1 .txt_2{font-size: 34px;color: #fff;}
	.Area_game01 .box_1 .txt_2 span{color:rgba(255,255,255,0.5);}
    .Area_game01 .box_txt {position: relative;color: #fff;font-size: 36px;padding-top: 0;}
	.Area_game01 .box_txt span{position: relative;color: #ffe6a5}
    .Area_game01 .box_txt .txt_time_period { font-weight: 900; font-family: "Century Gothic","Microsoft JhengHei"; }
    .Area_game01 .box_txt .txt_time_now    {font-size: 48px;line-height: 1.5;font-weight: 900;background: #b08bff;border-radius: 15px 15px 0 0;}
    .Area_game01 .box_txt .txt_cpNum       { font-size: 43px; line-height: 2; color: #9cbce6;}
    .Area_game01 .box_txt2 { margin-top: 60px;}
	.Area_game01 .box_2 .txt_box .txt_{font-size:34px;text-align: left;color: #fff;line-height: 1.7;} 
	.Area_game01 .box_2 .txt_box .txt_ h4{font-size:44px;padding: 3% 0 0;margin: 0;}
        @media screen and (max-width:767px){
          .Area_game01 .box_txt { font-size: 4.6vw;    padding-top: 1vw;}
          .Area_game01 .box_txt .txt_time_now    {font-size: 5vw;line-height: 2;width: 90%;margin: 0 auto;}
          .Area_game01 .box_txt .txt_cpNum       { font-size: 5.6vw; line-height: 2;}
		  .Area_game01 .box_txt2 {margin-top: 6vw;}
		  .Area_game01 .txt_description{padding-bottom: 3vw;}
		  .Area_game01 .box_1 .txt_1{font-size:4.8vw;}
		  .Area_game01 .box_1 .txt_2{font-size:4vw;}
		  .Area_game01 .box_2 .txt_box .txt_{font-size:4vw;padding: 2% 2% 2% 0;} 
		  .Area_game01 .box_2 .txt_box .txt_ h4{font-weight: 500;font-size: 5.5vw;padding: 4vw 0 0 4vw;margin: 0;}
        }