@charset "big5";
/* CSS Document */

/* --------------------------------------
 * pageGameRWDLayout RWD分頁用 2020/02/04 11:30
 * -------------------------------------- */

/*基本*/
html, body{ background-color:#8358df;}
  /*@media screen and (max-width:767px){*/
  /*}*/


/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; /*overflow:hidden;*/ background: url(bgtop_0.jpg?t=1586742441445)repeat-y center top; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
  @media screen and (max-width:767px){
    .WRAPPER { min-width: inherit; min-height:100%; overflow:hidden;background: #7433e0;}
    .WRAPPER img { width:100%; height:auto;}
  }

  /*寬度,間距*/
  .Area_boxstyle_box960 { margin:0 auto; width:100%;}
    @media screen and (min-width:768px){
      .Area_boxstyle_box960 { width:960px;}
    }

/*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=1586742441445); height:1010px;}
	.Area_bgtop_1 .bgtop_1_2 span { background-image: url(bgtop_1_2.png?t=1586742441445);  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%;}


/*版頭*/
.Area_top {}
.Area_top .go_bt:hover { filter: brightness(110%);
  -webkit-transform:none;
   -moz-transform:none;
    -ms-transform:none;
     -o-transform:none;
      transform:none;}
.Area_top > .box { }
  @media screen and (max-width:767px){
    .Area_top { }
    .Area_top > .box { }
  }
    /*主標*/
    .Area_top .box_title { }
    /*按鈕btn*/
    .Area_top .btn_ { z-index:5; position:absolute; top:70px; right:10px;}
    .Area_top .btn_ a { display:block;}
    .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;}
      @media screen and (max-width:767px){
        .Area_top .btn_ { top: 4vw; right: 1%;}
      }
      /*CSS樣式*/
/*
      .Area_top .btn_ a { display:block; border-radius:100px; padding:0 20px; font-weight:800; font-size:25px; line-height:40px;         
                          color:#fff; 
                          background-color: #8138FF;
                          background-image: linear-gradient( 5deg, #8138FF 60%, #B027FF);
                          box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5),
                                      inset -1px -1px 1px #4335F1,
                                      inset 0 0 0 2px #8c83ff,
                                      inset 3px 3px 2px #816CFF,
                                      inset -3px -3px 2px #3D16D5,
                                      inset 0 -6px 6px rgba(0,0,0,0.2);}
*/
        @media screen and (max-width:767px){
            .Area_top .btn_ { top: 4vw; right: 1%;}
            .Area_top .btn_ a { padding: 0 4vw; font-size:4.2vw; line-height:1.7; }
        }

      /*詳情*/
      .Area_top .btn_more { top:80px; right:10px;}
        @media screen and (max-width:767px){
          .Area_top .btn_more {  top:3vw; right:1.5vw; }
          /*.Area_top .btn_more a:after { background-image:url(m_btn_more1.png?t=1586742441445);}*/
        }
      /*查詢*/
      .Area_top .btn_list { top:134px; right:10px;}
        @media screen and (max-width:767px){
          .Area_top .btn_list {  top:11vw; right:1.5vw; }
        }
      /*懶人包*/
      .Area_top .btn_guide { position:absolute; top:80px; right:20px;}
      .Area_top .btn_guide a { width:90px; height:43px;}
      .Area_top .btn_guide a:after { background-image:url(btn_guide.png?t=1586742441445);}
        @media screen and (max-width:767px){
          .Area_top .btn_guide {  top:4vw; right:3vw; }
          .Area_top .btn_guide a { padding:0; width:15vw; height:7vw;}
          .Area_top .btn_guide a:after { background-image:url(m_btn_guide.png?t=1586742441445);}
        }


    /*版頭銀行*/
    .Area_top .box_bank { }
    .Area_top .box_bank .Area_swiper { z-index:2; position:absolute; bottom:5px; left:50%; margin-left:-515px; /*width:700px; height:130px;*/ width:700px; height:90px;}
    .Area_top .box_bank .Area_swiper_box { padding-bottom: 0;}
    .Area_top .box_bank li { -webkit-transform-origin: 100% 60%;
                                -moz-transform-origin: 100% 60%;
                                 -ms-transform-origin: 100% 60%;
                                  -o-transform-origin: 100% 60%;
                                     transform-origin: 100% 60%;}

    .Area_top .box_bank .Area_swiper img { width:100%; height:auto;}
      @media screen and (max-width:767px){
        .Area_top .box_bank .Area_swiper { top:60.8vw; bottom:inherit; left:14%; margin:0; width:74%; height:10vw; overflow:hidden;}
      }

/*共用--遊戲*/
    .Area_game { margin-bottom:120px;}
        @media screen and (max-width:767px){
            .Area_game {width: 96%;margin-bottom:15vw;}
        }
    .Area_game .title { position: relative; top: 10px; }
    .Area_game .box {position: relative;margin: 60px auto 0;padding: 50px 34px 0;width: 100%;height: auto;box-sizing: border-box;}



  /*共用--區塊背景*/
  .Area_boxstyle {}
      @media screen and (min-width:768px){
          .Area_boxstyle > .Area_boxstyle_box { padding-bottom: 40px; }
      }
      @media screen and (max-width:767px){
          .Area_boxstyle > .Area_boxstyle_box { margin: 0 auto; width: 94%;}
          .Area_boxstyle > .Area_boxstyle_box1 { margin: 0 auto; width: 100%;}
      }
      /*底圖*/
      .Area_boxstyle > .Area_boxstyle_box1 { position:relative; background-repeat: no-repeat; background-position: center bottom;}
      .Area_boxstyle > .Area_boxstyle_box1:before {content:"";display:block;z-index: -1;position:absolute;left:0;width:100%;background-repeat: no-repeat;}
      .Area_boxstyle > .Area_boxstyle_box1:after  {content:"";display:block;z-index:0;position:absolute;top:0;left:0;width:100%;height:100%;background-repeat: no-repeat;}

          /*CSS模式
              @media screen and (min-width:768px){
                .Area_boxstyle > .Area_boxstyle_box:before { top: 35px; left: 35px; width: calc(100% - 70px); height: calc(100% - 70px); }
                .Area_boxstyle > .Area_boxstyle_box:before { background-color: #fff; box-shadow: 0 0 0 30px #000;}
                .Area_boxstyle > .Area_boxstyle_box:after { border-radius: 6px; width: 100%; height: 100%; }
                .Area_boxstyle > .Area_boxstyle_box:after { background-image: repeating-linear-gradient(135deg, rgb(45,14,106,1) 0%, rgb(211,26,114,1) 100%); box-shadow: 0 0 30px 6px rgba(168,15,147,1);}
              }
              @media screen and (max-width:767px){
                .Area_boxstyle > .Area_boxstyle_box:before { top: 1vw; left: 1vw; width: calc(100% - 2vw); height: calc(100% - 2vw);}
                .Area_boxstyle > .Area_boxstyle_box:before { background-color: #fff; box-shadow: none;}
                .Area_boxstyle > .Area_boxstyle_box:after { border-radius: 0; width: 100%; height: 100%;}
                .Area_boxstyle > .Area_boxstyle_box:after { background-image: repeating-linear-gradient(135deg, rgb(45,14,106,1) 0%, rgb(211,26,114,1) 100%); box-shadow: 0 0 3vw 1vw rgba(168,15,147,1);}
              }*/
          /*圖片模式*/
              @media screen and (min-width:768px){
                .Area_boxstyle > .Area_boxstyle_box { padding-top: 20px; padding-bottom: 58px; background-repeat: repeat-y;}
                .Area_boxstyle > .Area_boxstyle_box:before { top: -203px; height: 203px;}
                .Area_boxstyle > .Area_boxstyle_box:after { top: inherit; bottom: -23px;height: 25px; background-position: center bottom;}
                .Area_boxstyle > .Area_boxstyle_box { }
                .Area_boxstyle > .Area_boxstyle_box:before { }
                .Area_boxstyle > .Area_boxstyle_box:after  { }                
                .Area_boxstyle > .Area_boxstyle_box1 { background-image: url(Area_boxstyle_center1.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box1:before { background-image: url(Area_boxstyle_top1.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box1:after  { background-image: url(Area_boxstyle_bottom1.png?t=1586742441445);}                
                .Area_boxstyle > .Area_boxstyle_box0 { padding-top: 0!important; padding-bottom: 0!important;}
                .Area_boxstyle > .Area_boxstyle_box0:before { display: none;}
                .Area_boxstyle > .Area_boxstyle_box0:after { display: none;}
                .Area_boxstyle > .Area_boxstyle_box0 { background-image: none;}
                .Area_boxstyle > .Area_boxstyle_box0:before { background-image: none;}
                .Area_boxstyle > .Area_boxstyle_box0:after  { background-image: none;}
                /*960寬度同手機*/
                .Area_boxstyle > .Area_boxstyle_box960 {width: 960px; margin-top: 40px; padding-top: 40px; padding-bottom:72px; background-repeat: repeat-y; }
                .Area_boxstyle > .Area_boxstyle_box960:before { top:-72px; height:72px;}
                .Area_boxstyle > .Area_boxstyle_box960:after  { top: inherit; bottom:0; height:72px;}
                .Area_boxstyle > .Area_boxstyle_box960.Area_boxstyle_box1 { background-image:url(Area_boxstyle_center1.png?t=1586742441445); }
                .Area_boxstyle > .Area_boxstyle_box960.Area_boxstyle_box1:before { background-image:url(Area_boxstyle_top1.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box960.Area_boxstyle_box1:after  { background-image:url(Area_boxstyle_bottom1.png?t=1586742441445);}                
                
                /*960寬度同手機
                .Area_boxstyle > .Area_boxstyle_box960 { padding-bottom:58px; background-repeat: repeat-y; }
                .Area_boxstyle > .Area_boxstyle_box960:before { top:-192px; height:192px;}
                .Area_boxstyle > .Area_boxstyle_box960:after  { top: inherit; bottom:0; height:58px;}
                .Area_boxstyle > .Area_boxstyle_box960 { background-image:url(m_Area_boxstyle_center.png?t=1586742441445); }
                .Area_boxstyle > .Area_boxstyle_box960:before { background-image:url(m_Area_boxstyle_top.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box960:after  { background-image:url(m_Area_boxstyle_bottom.png?t=1586742441445);}*/
              }
              @media screen and (max-width:767px){
                .Area_boxstyle > .Area_boxstyle_box1,
                .Area_boxstyle > .Area_boxstyle_box1:before,
                .Area_boxstyle > .Area_boxstyle_box1:after  { background-size: 100%;}
                .Area_boxstyle > .Area_boxstyle_box {margin-top: 6vw;padding-top: 2vw;padding-bottom: 7.4vw;background-repeat: repeat-y;}
                .Area_boxstyle > .Area_boxstyle_box:before {top: -19.4vw;height: 19.4vw;}
                .Area_boxstyle > .Area_boxstyle_box:after {top: inherit;bottom: -2vw;height: 2vw;background-position: center bottom;}
                .Area_boxstyle > .Area_boxstyle_box { background-image: url(m_Area_boxstyle_center.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box:before { background-image: url(m_Area_boxstyle_top.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box:after  { background-image: url(m_Area_boxstyle_bottom.png?t=1586742441445);} 
                .Area_boxstyle > .Area_boxstyle_box1 {background-image: url(m_Area_boxstyle_center1.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box1:before { background-image: url(m_Area_boxstyle_top1.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box1:after  {background-image: url(m_Area_boxstyle_bottom1.png?t=1586742441445);}
                .Area_boxstyle > .Area_boxstyle_box0 { margin-top: 3vw; padding-top: 0; padding-bottom: 0;}
                .Area_boxstyle > .Area_boxstyle_box0:before { display: none;}
                .Area_boxstyle > .Area_boxstyle_box0:after { display: none;}
                .Area_boxstyle > .Area_boxstyle_box0 { background-image: none;}
                .Area_boxstyle > .Area_boxstyle_box0:before { background-image: none;}
                .Area_boxstyle > .Area_boxstyle_box0:after  { background-image: none;}
				.Area_boxstyle > .Area_boxstyle_box960 {width: 100%;}
              }

      /*標題字*/
      .Area_boxstyle > h2 { z-index:2; position: absolute; top:0; left: 23%; margin:0; padding:0; overflow: hidden; width:54%; height:200px; font-size:60px; line-height:200px; text-align: center; letter-spacing:-2px; color: transparent; font-family:"微軟正黑體", "Microsoft JhengHei", Arial;}
          @media screen and (max-width:767px){
            .Area_boxstyle > h2 { height:22vw; font-size:6vw; line-height:22vw; letter-spacing:-0.5px;}
          }
          /*樣式*/
          /*.Area_boxstyle > .Area_boxstyle_title { color: #fff; text-shadow:2px 2px #000; -webkit-transform: skewX(-7.5deg); transform: skewX(-7.5deg);}
          .Area_boxstyle > .Area_boxstyle_title b { color: #ffe2a7;}*/
          .Area_boxstyle > .Area_boxstyle_title { font-weight: 700; font-size: 52px; height: 132px; line-height: 125px; color: #fff; 
                                                  /*漸層文字*/
                                                  background-image: linear-gradient(0deg, #fff, #fff);
                                                  -webkit-background-clip: text;
                                                  -webkit-text-fill-color: transparent;
                                                  /*text-shadow: 0 0 10px #ea1c6a, 0 0 10px #ea1c6a, 0 0 50px #ea1c6a, 0 0 50px #ea1c6a, 0 0 50px #ea1c6a;
                                                  -webkit-transform: skewX(-7.5deg); transform: skewX(-7.5deg);*/}
              @media screen and (max-width:767px){
                .Area_boxstyle > .Area_boxstyle_title { height: 10.4vw; font-size: 5.4vw; line-height: 10.4vw; letter-spacing: -0.5px;}
              }

      /*標題圖+btn*/
      .Area_boxstyle > .title { position:relative; overflow:hidden;}
          @media screen and (min-width:768px){
            .Area_boxstyle > .title .btn { z-index:3; position:absolute; bottom:50px; right:70px;}
          }
          @media screen and (max-width:767px){
            .Area_boxstyle > .title .btn { z-index:3; position:absolute; bottom:7vw; right:0vw; width:24%;}
          }



/* --------------------------------------
 * 遊戲機制
 * -------------------------------------- */