@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC');

body{
    font-family: 'Noto Sans TC';
  }
  /*====================================basic-setting====================================*/
  body{
    margin: 0;
    padding: 0;
  }
  html{
    font-size: 15px;
    letter-spacing: 1.5px;
    line-height: : 24px;
    width:100%; height:auto;
    position: relative;
  }
  a{text-decoration: none; cursor: pointer;}
  img{border:0px solid; display: block; }
  body{overflow-x: hidden;}
  img {-webkit-user-drag: none; -webkit-user-select:none;}
  /*====================================pc====================================*/
  @media only screen and (min-width: 768px) and (max-width: 5000px) { /*PC*/
    body{
      width:100%; height:auto;
      position: relative;
      display: block;
      background-color: #e4d2c9;
    }
    .wrapper{display: block;}
    .wrapper-mobile{display: none;}
    .wrapper{
      width:100%; height:auto;
      display: block;
      margin: 0 auto;
      position: relative;
      background-position: center top;
      background-repeat: no-repeat;
    }
    .wrapper .kv{
      width: 100vw;
      height: 100vh;
      position: relative;
      display: block;
      margin: 0 auto;
    }
    .wrapper .kv .screen1 .logo{
      width: 183px; height:36px;
      position: relative;
      display: block;
      top:55px;
      left: 50%;
      margin-left:-100px;
      z-index: 20;
    }
    .wrapper .kv .screen1{
      width: 100vw;
      height: 100vh;
      position: absolute;
      display: block;
      top:0px;
      z-index: 4;
      background-color: #bb723f;
      opacity: 0;
      overflow: hidden;
      background-image: url(../images/kv_line_web.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .wrapper .kv .screen2{
      width: 100vw;
      height: 100vh;
      position: absolute;
      display: block;
      z-index: 5;
      opacity: 0;
      overflow: hidden;
    }
      .wrapper .kv .screen2 .wall1{
        width: 100vw;
        height: 100vh;
        position: absolute;
        display: block;
        top:0px;
        z-index: 5;
        overflow: hidden;
        background-image: url(../images/kv_wall1.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .wrapper .kv .screen2 .bg1{
        width: 3840px; height:760px;
        position: absolute;
        display: block;
        left: 50%;
        margin-left:-960px;
        z-index: 4;
      }
    .wrapper .kv .screen3{
      width: 100vw;
      height: 100vh;
      position: absolute;
      display: block;
      top:0px;
      z-index: 6;
      background-color: #bb723f;
      opacity: 0;
      overflow: hidden;
      background-image: url(../images/kv_line_web.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #65b236;
    }
    .wrapper .kv .screen4{
      width: 100vw;
      height: 100vh;
      position: absolute;
      display: block;
      z-index: 7;
      opacity: 0;
      overflow: hidden;
    }
      .wrapper .kv .screen4 .wall1{
        width: 100vw;
        height: 100vh;
        position: absolute;
        display: block;
        top:0px;
        z-index: 5;
        overflow: hidden;
        background-image: url(../images/kv_wall2.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .wrapper .kv .screen4 .bg1{
        width: 3840px; height:760px;
        position: absolute;
        display: block;
        left: 50%;
        margin-left:-960px;
        z-index: 4;
      }
      .wrapper .kv .menus{
        width:50vh; height:100vh;
        position: absolute;
        display: block;
        left: 50%;
        margin-left:calc(-25vh);
        z-index: 8;
      }
        .wrapper .kv .menus .btn1{
          position: absolute;
          display: block;
          top:calc(67vh);
          z-index: 8;
        }
        .wrapper .kv .menus .btn1 a:hover .btn_on{
          opacity: 1;
          transition: 0.4s;
        }
        .wrapper .kv .menus .btn1 .btn_off{
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-48vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn1 .btn_on{
          opacity: 0;
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-48vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn2{
          position: absolute;
          display: block;
          top:calc(67vh);
          z-index: 8;
        }
        .wrapper .kv .menus .btn2 a:hover .btn_on{
          opacity: 1;
          transition: 0.4s;
        }
        .wrapper .kv .menus .btn2 .btn_off{
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-23vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn2 .btn_on{
          opacity: 0;
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-23vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn3{
          position: absolute;
          display: block;
          top:calc(75vh);
          z-index: 8;
        }
        .wrapper .kv .menus .btn3 a:hover .btn_on{
          opacity: 1;
          transition: 0.4s;
        }
        .wrapper .kv .menus .btn3 .btn_off{
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-48vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn3 .btn_on{
          opacity: 0;
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-48vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn4{
          position: absolute;
          display: block;
          top:calc(75vh);
          z-index: 8;
        }
        .wrapper .kv .menus .btn4 a:hover .btn_on{
          opacity: 1;
          transition: 0.4s;
        }
        .wrapper .kv .menus .btn4 .btn_off{
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-23vh);
          z-index: 7;
        }
        .wrapper .kv .menus .btn4 .btn_on{
          opacity: 0;
          width: calc(24vh); height: auto;
          position: absolute;
          display: block;
          left: 50vh;
          margin-left:calc(-23vh);
          z-index: 7;
        }
  
    /*====================================pc animate====================================*/
  .wrapper .kv .bg1{
    animation-name: bg1;
    animation-duration: 25s;
    animation-timing-function:linear;
    animation-delay: 0s;
    animation-direction:normal;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-play-state: running;
  }
  @keyframes bg1 {
    0% {margin-left:-960px;}
    100% {margin-left:-2690px;}
  }
  .wrapper .kv .screen1{
    animation-name: screen1;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-direction:normal;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-play-state: running;
  }
  @keyframes screen1 {
    0% {height:100vh; opacity: 0;}
    5% {height:100vh; opacity: 1;}
    97% {height:100vh; opacity: 1;}
    100% {height:0vh; opacity: 0;}
  }
  .wrapper .kv .screen2{
    animation-name: screen2;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-direction:normal;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-play-state: running;
  }
  @keyframes screen2 {
    0% {height:0vh; opacity: 0;}
    5% {height:0vh; opacity: 0;}
    15% {height:100vh; opacity: 1;}
    97% {height:100vh; opacity: 1;}
    100% {height:0vh; opacity: 0;}
  }
  .wrapper .kv .screen3{
    animation-name: screen3;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-direction:normal;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-play-state: running;
  }
  @keyframes screen3 {
    0% {height:100vh; opacity: 0;}
    50% {height:100vh; opacity: 0;}
    60% {height:100vh; opacity: 1;}
    97% {height:100vh; opacity: 1;}
    100% {height:100vh; opacity: 0;}
  }
  .wrapper .kv .screen4{
    animation-name: screen4;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-direction:normal;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards;
    animation-play-state: running;
  }
  @keyframes screen4 {
    0% {height:0vh; opacity: 0;}
    60% {height:0vh; opacity: 0;}
    70% {height:100vh; opacity: 1;}
    97% {height:100vh; opacity: 1;}
    100% {height:0vh; opacity: 0;}
  }
  }
  /*====================================mobile====================================*/
  @media only screen and (min-width: 50px) and (max-width: 768px) { /*手機*/
    .wrapper{display: none;}
    .wrapper-mobile{display: block;}
    body{
      min-height: none;
      background-position: center top;
      background-color: #e4d2c9;
  
    }
    .wrapper-mobile{
      width: 100vw;
      height: 100vh;
      display: block;
      margin: 0 auto;
      position: relative;
    }
    .wrapper-mobile .kv{
      width: 100vw;
      height: 100vh;
      display: block;
      position: relative;
    }
    .wrapper-mobile .kv .mob_kv_logo{
      width: 40%;
      height: auto;
      position: absolute;
      z-index: 10;
      left: 50%;
      margin-left: -20%;
      margin-top:5%;
    }
    .wrapper-mobile .kv .screen1{
      width: 100vw;
      height: 100vh;
      position: absolute;
      background-color: #bb723f;
      z-index: 5;
      display: block;
      overflow: hidden;
    }
    .wrapper-mobile .kv .screen1 .line1{
      width: 100vw;
      height: 110vh;
      position: absolute;
      z-index: 20;
      background-image: url(../images/mob_kv_line.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
      .wrapper-mobile .kv .screen1 .menus{
        width: 100%;
        height: auto;
        position: absolute;
        margin-top: 160%;
        z-index: 20;
      }
      .wrapper-mobile .kv .screen1 .menus .btn1{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -50%;
      }
      .wrapper-mobile .kv .screen1 .menus .btn2{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -25%;
      }
      .wrapper-mobile .kv .screen1 .menus .btn3{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 0%;
      }
      .wrapper-mobile .kv .screen1 .menus .btn4{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 25%;
      }
  
    .wrapper-mobile .kv .screen2{
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: 6;
      display: block;
      overflow: hidden;
    }
      .wrapper-mobile .kv .screen2 .wall1{
        width: 100vw;
        height: 110vh;
        position: absolute;
        top: 0;
        background-image: url(../images/mob_kv_wall1.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .wrapper-mobile .kv .screen2 .bg1{
        width: 700%;
        height: 100vh;
        position: absolute;
        left: 50%;
        margin-left: -50%;
        z-index: -1;
      }
      .wrapper-mobile .kv .screen2 .bg1 img{
        width: 700vw;
        height: 100vh;
        position: absolute;
        z-index: -1;
      }
      .wrapper-mobile .kv .screen2 .menus{
        width: 100%;
        height: auto;
        position: absolute;
        margin-top: 160%;
        z-index: 20;
      }
  
      .wrapper-mobile .kv .screen2 .menus .btn1{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -50%;
      }
      .wrapper-mobile .kv .screen2 .menus .btn2{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -25%;
      }
      .wrapper-mobile .kv .screen2 .menus .btn3{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 0%;
      }
      .wrapper-mobile .kv .screen2 .menus .btn4{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 25%;
      }
  
    .wrapper-mobile .kv .screen3{
      width: 100vw;
      height: 100vh;
      position: absolute;
      background-color: #65b236;
      z-index: 7;
      display: block;
      overflow: hidden;
    }
      .wrapper-mobile .kv .screen3 .menus{
        width: 100%;
        height: auto;
        position: absolute;
        margin-top: 160%;
        z-index: 20;
      }
      .wrapper-mobile .kv .screen3 .menus .btn1{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -50%;
      }
      .wrapper-mobile .kv .screen3 .menus .btn2{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -25%;
      }
      .wrapper-mobile .kv .screen3 .menus .btn3{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 0%;
      }
      .wrapper-mobile .kv .screen3 .menus .btn4{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 25%;
      }
      .wrapper-mobile .kv .screen3 .line1{
        width: 100vw;
        height: 110vh;
        position: absolute;
        z-index: 20;
        background-image: url(../images/mob_kv_line.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    .wrapper-mobile .kv .screen4{
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: 7;
      display: block;
      overflow: hidden;
    }
    .wrapper-mobile .kv .screen4 .wall1{
      width: 100vw;
      height: 110vh;
      position: absolute;
      top: 0;
      background-image: url(../images/mob_kv_wall2.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .wrapper-mobile .kv .screen4 .bg1{
      width: 700%;
      height: auto;
      position: absolute;
      left: 50%;
      margin-left: -50%;
      z-index: -1;
    }
      .wrapper-mobile .kv .screen4 .menus{
        width: 700%;
        height: 100vh;
        position: absolute;
        left: 50%;
        margin-left: -50%;
        z-index: -1;
      }
      .wrapper-mobile .kv .screen4 .bg1 img{
        width: 700vw;
        height: 100vh;
        position: absolute;
        z-index: -1;
      }
      .wrapper-mobile .kv .screen4 .menus .btn1{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -50%;
      }
      .wrapper-mobile .kv .screen4 .menus .btn2{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: -25%;
      }
      .wrapper-mobile .kv .screen4 .menus .btn3{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 0%;
      }
      .wrapper-mobile .kv .screen4 .menus .btn4{
        width: 25%;
        height: auto;
        position: absolute;
        display: block;
        left:50%;
        margin-left: 25%;
      }
      .wrapper-mobile img{
        width: 100%; height: auto;
      }
  
      .m-burger{
        display: block;
        position: fixed;
        right: 15px;
        top: 15px;
        width: 36px;
        height: 36px;
        z-index: 990;
        cursor: pointer;
      }
      .m-burger span{
        color: #ffffff;
        font-size: 12px;
        display: block;
        width: 100%;
        margin: 4px 0;
        transition: all 0.3s ease;
      }
      .m-burger:before, .m-burger:after{
        content: '';
        display: block;
        height: 4px;
        border-radius: 5px;
        background-color: #ffffff;
        transition: all 0.3s ease;
      }
      .m-burger span:before{
        content: 'MENU';
      }
      nav{
        width: 100%;
        height: 100%;
        z-index: 900;
        background-color: #846248;
        opacity: 0.95;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: auto;
        right: -100%;
        transition: all 0.3s ease;
      }
      nav.active{
        right: 0;
        transition: all 0.3s ease;
      }
      nav .social-icon{
        position: absolute;
        top: 80px;
        right: calc(50% - 52px);
        z-index: 100;
      }
      nav .social-icon a.icon-fb{
        background-image: url(../images/icon-fb.svg);
        margin-right: 5px;
      }
      nav .social-icon a.icon-line{
        background-image: url(../images/icon-line.svg);
      }
      nav .social-icon a{
        width: 48px;
        height: 48px;
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: all 0.3s ease;
      }
      nav ul{
        top: 0;
        width: 90%;
        margin: 0 5%;
        display: block;
        background: none;
        border: 0;
        position: relative;
        left: auto;
        bottom: auto;
        height: auto;
        padding: 0;
        list-style: none;
        z-index: 900;
      }
      nav li{
        flex: 1;
        text-align: center;
        font-size: 22px;
        margin: 10px;
        transition: all 0.3s ease;
        position: relative;
        box-sizing: border-box;
      }
      nav ul li a{
        width: 100%;
        color: #FFF;
        border: 1px rgba(255, 255, 255, 0.6) solid;
        font-size: 20px;
        border-radius: 5px;
        font-weight: 500;
        padding: 0.2em 0em;
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
        display: block;
      }
    /*====================================mob animate====================================*/
    .wrapper-mobile .kv .bg1{
      animation-name: mbg1;
      animation-duration: 25s;
      animation-timing-function:linear;
      animation-delay: 0s;
      animation-direction:normal;
      animation-iteration-count:infinite;
      animation-fill-mode:forwards;
      animation-play-state: running;
    }
    @keyframes mbg1 {
      0% {margin-left: -50%;}
      100% {margin-left: -365%;}
    }
  
    .wrapper-mobile .kv .screen1{
      animation-name: screen1;
      animation-duration: 20s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-direction:normal;
      animation-iteration-count:infinite;
      animation-fill-mode:forwards;
      animation-play-state: running;
    }
    @keyframes screen1 {
      0% {height:0vh; opacity: 0;}
      5% {height:100vh; opacity: 1;}
      97% {height:100vh; opacity: 1;}
      100% {height:0vh; opacity: 0;}
    }
    .wrapper-mobile .kv .screen2{
      animation-name: screen2;
      animation-duration: 20s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-direction:normal;
      animation-iteration-count:infinite;
      animation-fill-mode:forwards;
      animation-play-state: running;
    }
    @keyframes screen2 {
      0% {height:0vh; opacity: 0;}
      5% {height:0vh; opacity: 0;}
      15% {height:100vh; opacity: 1;}
      97% {height:100vh; opacity: 1;}
      100% {height:0vh; opacity: 0;}
    }
    .wrapper-mobile .kv .screen3{
      animation-name: screen3;
      animation-duration: 20s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-direction:normal;
      animation-iteration-count:infinite;
      animation-fill-mode:forwards;
      animation-play-state: running;
    }
    @keyframes screen3 {
      0% {height:0vh; opacity: 0;}
      50% {height:0vh; opacity: 0;}
      60% {height:100vh; opacity: 1;}
      97% {height:100vh; opacity: 1;}
      100% {height:0vh; opacity: 0;}
    }
    .wrapper-mobile .kv .screen4{
      animation-name: screen4;
      animation-duration: 20s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-direction:normal;
      animation-iteration-count:infinite;
      animation-fill-mode:forwards;
      animation-play-state: running;
    }
    @keyframes screen4 {
      0% {height:0vh; opacity: 0;}
      60% {height:0vh; opacity: 0;}
      70% {height:100vh; opacity: 1;}
      97% {height:100vh; opacity: 1;}
      100% {height:0vh; opacity: 0;}
    }
  
  }

  /* pop */
.btn-rule,
.btn-privacy { cursor: pointer; }

.pop { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9);  top: 0; right: 0; z-index: 990; display: flex;  -webkit-align-items: center;  align-items: center;  -webkit-justify-content: center; justify-content: center; transition: all 0.5s ease;  opacity: 0; visibility: hidden;}
.pop.active {  opacity: 1;  visibility: visible;  transition: all 0.5s ease; }
.pop-body { background-color: #ffffff; border-radius: 15px;  max-width: 800px;  width: 80%; min-height: 540px; height: 540px;   padding: 20px; overflow: hidden;  position: relative; z-index: 10;}
.pop-cont { overflow-y: auto;   height: calc(100% - 88px);  max-height: 710px;}
.pop-cont p { font-size: 18px; line-height: 1.6em;  margin-bottom: 20px;}
.pop-cont ul { list-style-type: cjk-ideographic; color: #333333; padding: 0 0 0 3em; font-size: 18px;}
.pop-cont ul li { margin-bottom: 10px;  line-height: 1.6em;}
.pop .pop-title { font-size: 30px; line-height: 48px; color: tomato; text-align: center; }
.pop .btn-close { display: block; width: 40px; height: 40px; background-image: url(../images/btn-close.png); background-size: cover; position: absolute; top: 20px; right: 20px; z-index: 999;}
.pop .btn-close:hover { opacity: 0.8; }

.review-box { display: flex; padding-top: 30px;}
.review-box > div { flex: 1; text-align: center; margin: 0 5px; font-size: 16px;}
.review-box h3 { font-size: 18px; border-radius: 5px; padding: 6px 16px; background-color: #2b8883; color: #ffffff;}
.review-box .list { padding-top: 20px;}
.review-box .list span { display: block; float: left; text-align: center; width: calc(50% - 10px); margin: 5px; font-size: 18px; } 

.winner-not-yet { font-size: 1.8em; color: #ffffff; text-align: center; padding: 50px 20px;  border-radius: 15px; box-shadow: 0 0 10px #e2e2e2;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffadf2+0,ff60e7+100 */
    background: #ffadf2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffadf2 0%, #ff60e7 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffadf2 0%, #ff60e7 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffadf2 0%, #ff60e7 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffadf2', endColorstr='#ff60e7', GradientType=0);
    /* IE6-9 */
}