@charset "utf-8";
/* CSS Document */
/*
 * Ghvzon
 * 共用元件 js_link-v3.1
 *******************************************************************
 *  --2019.04.03--修改上傳圖片路徑設定9~16行(v3.1)
 *******************************************************************
 */


/* --------------------------------------
 * uiLayout 共用元件、共用動畫
 * -------------------------------------- */


/* --------------------------------------
 * 共用元件--功能
 * -------------------------------------- */

@media screen and (max-width: 767px){
	.m_Area96p{width:96%}
}

/*版頭動畫控制*/
.an_paused.an_paused   { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -ms-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused;}
.an_running.an_running { -webkit-animation-play-state:running; -moz-animation-play-state:running; -ms-animation-play-state:running; -o-animation-play-state:running; animation-play-state:running;}


/*tag錨點定位問題*/
.tag { position: absolute !important; display:block !important; width:0; height:0;}
  @media screen and (max-width:767px){
    .tag { position:absolute ; top:-50px; display:block ;}
  }


/* --------------------------------------
 * 共用元件--元件
 * -------------------------------------- */


/*活動標*/
.Area_logo   { z-index:50; position:absolute; }
.Area_logo a { display:block; -webkit-transition: .2s ease; transition: .2s ease; transform-origin: top center;}
  @media screen and (max-width:767px){
    .Area_logo { top: 0;  left: 3%;  width: 17%;/* filter: drop-shadow(0 5px 7px rgba(0,0,0,0.4));*/}
    .Area_logo img { width:100%; height:auto;}
  }
  @media screen and (min-width:768px){
    .Area_logo { top:50px; left:50%; width: 95px; -webkit-transform:translateX(-575px); transform:translateX(-575px); }
    .Area_logo img{ width: 100%; }
    .Area_logo:hover a{ -webkit-transform:scale(.95); transform:scale(.95);}
  }


/*注意事項*/
.Area_msg { }
  /*產品標示*/
  .Area_msg_PDmark {}
  /*APPLE-APP警語*/
  .Area_msg_apple {}


/*注意事項*/
.Area_bgfooter { color:#fff; text-align:left; }
.Area_bgfooter .box { margin:0 auto; padding: 0 50px;}
.Area_bgfooter p { margin: 0; font-weight:800; font-size: 54px; line-height: 1.5em;}
.Area_bgfooter ul,
.Area_bgfooter ol { margin-top: 1.2rem; }
.Area_bgfooter ul ol,
.Area_bgfooter ul ul { margin-top: 0.5rem; }
.Area_bgfooter li { margin-bottom: 1.2rem; font-size: 24px; line-height: 1.8rem; text-align:justify;}
.Area_bgfooter li p { margin-top: 1.2rem; font-size:24px;}
  @media screen and (max-width:767px){
    .Area_bgfooter { }
    .Area_bgfooter .box { width:90%; padding:5%;}
    .Area_bgfooter p { font-size:24px;}
    .Area_bgfooter ul,
    .Area_bgfooter ol { margin-top: 1rem;  padding-left: 7%;}   
    .Area_bgfooter ul ol,
    .Area_bgfooter ul ul { margin-top: 0rem; }
    .Area_bgfooter li { margin-bottom:1rem; font-size:16px; line-height:1.2rem;}
    .Area_bgfooter li p { margin-top: 1rem; font-size:16px;}

  }

/*可拖移廣告icon*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; right: 0; transform: translate3d(0,200px,0); /*background-color: rgba(0,0,0,0.5);*/}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto;}
.Area_hammerAD .closeButton a { display:block; cursor:pointer; position:absolute; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2}
    @media screen and (min-width:768px){
      .Area_hammerAD { display: none; width: 90px;}
      .Area_hammerAD .closeButton a { top: 0; right: 0;}
    }
    @media screen and (max-width:767px){
        .Area_hammerAD { display: block; width: 22%;}
        .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
    }


/*回版頭*/
#gotopBtn { display:none !important;} /*把系統手機版原本的Gotop關掉*/
#gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%);
        bottom:90px;
        bottom: calc(90px + constant(safe-area-inset-bottom)*0.6 );
        bottom: calc(90px + env(safe-area-inset-bottom)*0.6 );}
#gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; }
#gotop::after  { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);}
#gotop.cate-open { transform: translateX(0%);}
  /*白色*/
  #gotop { color:#000; }
  #gotop::before { border-color: transparent transparent #000;}
  #gotop::after  { background-color: rgba(255,255,255,0.95);  box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2);}




/*共用--輪播基本設定*/
.Area_swiper { position:relative; margin:0 auto; -webkit-box-sizing:border-box; box-sizing:border-box; overflow: hidden;}
.Area_swiper_box { z-index:1; padding-bottom:25px;}
.Area_swiper_box.Area_swiper_box_relative { position:relative;}
.Area_swiper_box.Area_swiper_box_absolute { position:absolute; top:0; left:0; right:0; bottom:0;}
.Area_swiper_box .swiper-wrapper { margin:0; padding:0; list-style:none;}
.Area_swiper_box .swiper-wrapper:after { content:""; display:block; clear:both;}
.Area_swiper_box .swiper-slide { margin:0; padding:0;}
.Area_swiper_box .pagination { bottom:0px !important; transform:scale(0.7);}
.Area_swiper_box .pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { transform: translateX(-50%) scale(0.7);}
    @media screen and (max-width:767px){
      .Area_swiper { }
      .Area_swiper_box { padding-bottom: 5vw;}
    }
    /*按忸*/
    .button.swiper-button-next,
    .button.swiper-button-prev { outline: none;} 
    @media screen and (max-width:767px){
      .button.swiper-button-next,
      .button.swiper-button-prev { display:none !important;} 
    }
    /*輪播套公版時修正*/
    .Area_swiper_box .PD_layout.PD_layout { position: static;}








/* --------------------------------------
 * 動畫
 * -------------------------------------- */

/*選單*/
  @-webkit-keyframes width-a {
     0% { bottom: -15px;}
     100% {bottom: -5px;}
  }

  @keyframes width-a {
     0% { bottom: -15px; }
     100% { bottom: -5px;}
  }