@import url('//fonts.googleapis.com/earlyaccess/notosanstc.css');
body { 
  min-width: 1200px; 
  color: #333; 
  font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "ī�G�פ���", "�׶� Pro", "�s�ө���", "sans-serif"; 
  background-color: #edfcbc;
}
a { 
  text-decoration: none;
  display: inline-block;
}
:focus { 
  outline: none;
}
i { 
  font-style: normal;
}
* {
  box-sizing: border-box;
}
.header, .footer { 
  text-align: center; 
  background: #fff;
}
.display_pc { 
  display: block;
}
.display_m { 
  display: none;
}
.table_m { 
  display: none;
}

.main_wrapper {
  margin: auto; 
  position: relative; 
  width: 100%; 
  overflow: hidden; 
  background: url('../images/rule_bg.jpg') no-repeat center top #f9e8b2;
}

.kv_wrapper {position: relative;;}
.kv_head {position: relative; z-index: 6; width: 98%; max-width: 1200px; margin: auto;}
.kv_logo {position: absolute; top: 0; left: 6.5%;
        box-sizing: border-box; background: url('../images/bg_logo.png') no-repeat center bottom #eb7335;
        padding: 10px 15px; border-radius: 0 0 10px 10px; transition: all .5s;}
@media(hover:hover) {
.kv_logo:hover {transform: translateY(-8%); filter: brightness(1.2);}  
}

.kv_content {max-width: 1200px; height: 580px; margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;}
.kv_slogan {position: absolute; top: 280px;}

.kv_bg {background: url("../images/kv_moon.png") no-repeat top right; background-size: contain;
  width: 100%; height: 20vw; max-width: 1920px; max-height: 414px;
  position: absolute; top: 0; right: 0; z-index: 1;}
@keyframes move-forever {
  0% {transform: translate3d(-90px, 0, 0);}
  100% {transform: translate3d(85px, 0, 0);}
}


/**prod**/
.prod_wrapper {
  position: relative;
}
.prod_container {
  position: relative;
  z-index: 100;
}
.ProductList {
  position: relative; 
  z-index: 500;
}
/**group**/
.group {
  width: 1100px; 
  margin: auto; 
  padding-bottom: 50px;
}

.main_wrapper h1 {
    position: relative;
    z-index: 2;
    display: table;
    background: #438f86;
    color: #fff;
    border-radius: 10px;
    border: 3px solid #fff;
    font-size: 27px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    padding: 10px 40px;
    margin: 30px auto;
}
.terms_wrapper {width: 1100px;  margin: 0 auto; padding-bottom: 20px;}
.terms_container {background-color: #fff; border: solid 3px #fff; border-radius: 30px 30px; box-shadow: rgba(35, 76, 75, 0.32) 0px 2px 4px 0px, rgba(35, 76, 75, 0.52) 0px 2px 16px 0px}
.terms_container h2 {font-size: 36px; font-weight: 800; text-align: center;  background-color: #c16032; color: #fff; border-radius: 30px 30px 0 0; padding: 30px 0;}
.terms_content {width: 90%; margin: 30px auto 40px; font-size: 17px;  line-height: 24px;}
.terms_container h3 {background-color: #a66f6d; border-radius: 20px;  font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 20px; display: inline-block; margin: 20px 0; color: #fff;}
.terms_content h3 strong {color: #ffe398; margin-right: 3px;}
.terms_content h4 {font-weight: bold; font-size: 18px;  color: tomato;}
.terms_content ul li {margin: 0 30px 7px 30px; list-style-type: disc;}
.terms_content ul li.circle {list-style-type: circle;  }
.terms_content li strong {color: red;}
.terms_content a {display: inline-block; font-weight: bold; font-size: 18px; margin: 5px 3px; border-radius: 30px; color: #fff; background-color: #ff706d; padding: 3px 15px; transition: transform .35s; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
.terms_content a:hover {-webkit-transform: translate(5%, 0); transform: translate(5%, 0); cursor: pointer;}
.terms_content a.over {background-color: lightgray;}
.terms_content a.over:hover {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
.terms_container p { padding-left: 18px; margin-bottom: 5px;}
.terms_prize_list th, .terms_prize_list td {border: 2px solid #66cda3; text-align: center;}

table {background: white; border-collapse: collapse; margin: 15px 0; width: 100%; border: 2px solid #008fbe;}
table tr,table th,table td {border: none; border-bottom: 1px solid #e4ebeb;}
table th,table td {padding: 5px 10px; text-align: left;}
table th {background: #008fbe; color: #ffffff; text-transform: uppercase; padding: 10px;}
table tr td {background: #fff;}
/* table.two-axis tr:nth-of-type(2n+2) td { background: #f5f5f5; } */
table.bt tfoot th,table.bt tfoot td,table.bt tbody td {font-size: 14px; padding: 0;}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before {background: #989898; color: white; margin-right: 10px; padding: 10px 10px 0;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content {display: inline-block; padding: 10px 5px 0;}
table.bt tfoot th:first-of-type:before,
table.bt tfoot th:first-of-type .bt-content,
table.bt tfoot td:first-of-type:before,
table.bt tfoot td:first-of-type .bt-content,
table.bt tbody td:first-of-type:before,
table.bt tbody td:first-of-type .bt-content {padding-top: 10px;}
table.bt tfoot th:last-of-type:before,
table.bt tfoot th:last-of-type .bt-content,
table.bt tfoot td:last-of-type:before,
table.bt tfoot td:last-of-type .bt-content,
table.bt tfoot td:last-of-type .bt-content,
table.bt tbody td:last-of-type:before,
table.bt tbody td:last-of-type .bt-content {padding-bottom: 10px;}

table.box2 tr, table.box2 td {border: 1px solid #c5c5c5;}
table.box3 tr, table.box3 td {border: 1px solid #c5c5c5;}

/**coupon**/
.coupon {width: 100%; margin: 15px auto; position: relative;}
.coupon ul{display: flex; justify-content: space-around;}
.coupon ul li {list-style-type: none; margin: 0;}
.coupon a { display: inline-block; transition: transform .35s;  -webkit-transform: translate(0, 0); background: none; padding: 0px 0px; }
.coupon a:hover { -webkit-transform: translate(0, -5px);  transform: translate(0, -5px); }

/**button**/
.button { }
.button a {
    display: inline-block;
    background: #cc3032;
    border-radius: 20px;
    color: #FFF;
    padding: 10px 15px;
    border-bottom: 3px #8d1f20 solid;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.2;
}
.button a:hover{background-color: #8d1f20;}

/**img**/
.layout{width: 100%; margin:5px 0;}
.label{width: 20%; margin:5px 0;}
.red{ color: crimson; font-weight: bolder;}

/**/
.bg_wrapper {display: none; position: absolute; width: 100%; height: 100%; top: 0; z-index:-1; pointer-events: none;}
.bg_fly {width: 100%; height: 100%; background: url("../images/float.png") center top;
		animation: flyItemfadeIn 1.5s linear backwards, upDown_animation 1s linear .5s infinite alternate;}

.NavArea {display: none;}

@media screen and (min-width: 1025px) {

    /** float **/
    .NavArea {
        display: none;
        width: 140px;
        position: fixed;
        top: 25%;
        right: 0;
        z-index: 250;
    }

    .Nav-slide.active, .Nav-slide.active a {
        color: #FFEB3B;
        background: #009688;
        border-radius: 1em;
    }
    

    .float_tit {}

    .float_main {
        width: 138px;
        opacity: 0.9;
        filter: alpha(opacity=90);
    }

    .go_top {
        display: block;
        cursor: pointer;
    }
    .go_top a,
    .Nav-wrapper li a.go_top {
        color: #ffea37;
    }

    .Nav-wrapper {
        background: #c16032;
        width: 125px;
        padding: 5px;
        margin: 0 auto;
        border-radius: 10px;
        overflow: hidden;
    }

    .Nav-wrapper li {
        font-size: 15px;
        text-align: center;
        background: transparent;
        margin: auto;
        padding: 5px 0 5px;
        position: relative;
    }

    .Nav-wrapper li.highlight0 {
        font-size: 24px;
        line-height: 26px;
        border-radius: 20px 0 0 0;
        padding-top: 20px;
        padding-left: 2px;
        color: #fff;
        font-weight: bold;
    }

    .Nav-wrapper li.highlight1 {
        padding-left: 2px;
    }

    .Nav-wrapper li.highlight2 {
        font-size: 24px;
        border-radius: 0 0 20px 20px;
        padding-bottom: 5px;
    }

    .Nav-wrapper li.highlight3, .Nav-wrapper li.highlight3 a {
        color: #946b4e;
        background-color: #fbe97b;
        border-radius: 1em;
    }
    .Nav-wrapper li.Nav-slide.highlight3:hover, .Nav-wrapper li.Nav-slide.highlight3:hover a {
        color: #fbe97b;
        background-color: #946b4e;
    }

    .Nav-wrapper li a {
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        position: relative;
        z-index: 500;
    }
    .Nav-wrapper li.Nav-slide:hover,
    .Nav-wrapper li.Nav-slide:focus,
    .Nav-wrapper li.Nav-slide:active {
        color: #336e3e;
        /*background: #009688;
        border-radius: 1em;*/
    }
    .Nav-wrapper li.Nav-slide:hover a,
    .Nav-wrapper li.Nav-slide:focus a,
    .Nav-wrapper li.Nav-slide:active a { color: #FFEB3B; }

    .Nav-wrapper li:after {
        background: transparent;
        box-shadow: transparent 0 0 1em;
        height: 2px;
        position: absolute;
        right: 51%; left: 51%;
        bottom: 0;
        z-index: 1;
        content: '';
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: left, right;
        transition-property: left, right;
    }

    .Nav-wrapper li:hover:after,
    .type_leftmenu li:focus:after,
    .type_leftmenu li:active:after,
    .type_leftmenu li.active:after,
    .type_leftmenu li.Nav-slide.active:after {
        right: 10%;
        left: 10%;
    }

    .Nav-wrapper li.highlight0:after {
        background: transparent;
    }

    .Nav-wrapper li.Nav-slide2 {
        background-color: #fff;
        width: 96%;
        margin: 5px auto 10px;
        padding: 0;
    }
    .Nav-wrapper li.Nav-slide2 .Nav-title {
        color: #fff;
        background: #946b4e;
    }
    .Nav-wrapper li.Nav-slide2 a {
        color: #946b4e;
    }
    .Nav-wrapper li.Nav-slide2 .Nav-slide.active, .Nav-wrapper li.Nav-slide2 .Nav-slide.active a {
        background-color: transparent;
        border-radius: 0;
    }
    .Nav-wrapper li.Nav-slide2 .highlight {
        border-bottom: 1px dotted #946b4e;
    }
    .Nav-wrapper li.Nav-slide2 .highlight:hover,
    .Nav-wrapper li.Nav-slide2 .highlight:focus,
    .Nav-wrapper li.Nav-slide2 .highlight:active {
        background-color: aliceblue;
        border-radius: 0;
    }
}

/* ================================================
RWD
================================================ */
@media screen and (max-width:1024px) {
    body {width: 100vw; min-width: inherit;}
    .gotop {background: url('//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png') no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 60px; z-index: 999;display: none;}
    .gotop a {display: block; width: 48px; height: 36px;}
    .header {width: 100vw; }
    .display_m {display: block;}
    .display_pc {display: none;}
	
    .Nav-slide2.highlight4 {}
    .Nav-slide2.highlight4 ol {
        color: #fff;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        background: rgba(148, 107, 78, .5);
        padding-left: 15px;
    }
        
    .main_wrapper{
    background-size: 170vw, 100vw, 170vw !important;
    }
    .main_wrapper h1 {
        margin: 20px auto 10px;
        font-size: 16px;
        line-height: 22px;
        padding: 6px 30px;
        border: 2px solid #fff;
    }
        
.wrapper {background: #faeab6;}
	
.kv_wrapper {background: url('../images/kv_bg_m.jpg') no-repeat center top; background-size: 100%;}
.kv_wrapper img {width: 100%}
.kv_bg {height: initial;}
.kv_content {width: 100vw; height: 61vw;}
.kv_slogan {width: 65%; padding: 0; margin: auto; top: 30vw; left: 0; right: 0;}

    .bg_fly {display: none;}    
        
    /**prod_m**/
    .prod_wrapper{
    padding-bottom: 50px;
    } 
        
    .group {width: 100vw; padding-bottom: 20px;}
    

    /****/
    .terms_wrapper {width: 94vw; padding-bottom: 36px;}
    .terms_container {border-radius: 30px 30px;}
    .terms_container h2 {font-size: 21px; line-height: 24px; border-radius: 30px 30px 0 0; padding: 10px 0;}
    .terms_container h2 span {display: block;}
    .terms_content {width: 92%; font-size: 14px; line-height: 18px; margin: 15px auto 0; padding-bottom: 10px;}
    .terms_content a {font-size: 15px;}
    .terms_container h3 {font-size: 16px; line-height: 20px; margin-bottom: 10px;}
    .terms_content ol li {margin: 4px 5px 0 15px;}
    .terms_content ul li {margin: 0 0 0 20px;}
    .lazy .terms_prize_list { font-size: 14px;  line-height: 20px;}
    .terms_prize_list th { display: none;}
    .terms_prize_list td { display: block;  text-align: left;  border: none;  border-bottom: 1px dotted #66cda3;  margin: 3px 0;}
    .lazy .terms_prize_list td {float: left; border-bottom: none; margin: 0;  }
    .terms_prize_list_date {margin-top: 20px !important;}
    .terms_prize_list td:before {display: inline-block;  width: 120px;  text-align: center;  font-size: 15px;  color: #fff;  border-radius: 10px;  background-color: #66cda3;  content: attr(data-label);  margin: 3px 5px 3px 0; padding: 3px 0; font-weight: bold;}
    .rule .terms_content img {max-width: 80%;}
    .rule-img{width:100%; padding-top: 10px;}
    .rule-img img{width:100%;}

    table {border: 1px solid #e4ebeb;}
    table.two-axis tr td:first-of-type,
    table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
    table.two-axis tr td:first-of-type:before {background: #008fbe; color: #ffffff;}
    table.two-axis tr td:first-of-type {border-bottom: 1px solid #e4ebeb;}
    table.two-axis tr td:first-of-type:before {padding-bottom: 10px;}
    table tr,table th,table td {border-bottom: 1px solid #e4ebeb; font-size:14px; padding: 10px 5px;}
    table th {background: #008fbe;}
        
    table th.denomination {width: 17%;}

    /**coupon**/
    .coupon {width: 100%; margin-top: 0;}
    .coupon ul {
        display: flex;
        flex-wrap: wrap;}
    .coupon ul li {margin: 0; width: 33%;}
    .coupon ul li img{ width: 100%;}
  
    .button { }
    .button a {border-radius: 10px; padding: 7px 25px; font-size: 15px; display: block;}

    /**���I-top**/ 
    .float_tit, .float_tit2, .float_tit3{display: none;}
    .NavArea {display: none; position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
    .NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
    .NavArea .Nav ul {display: flex;}
    .NavArea .Nav li {z-index: 10;flex: none;}
    .NavArea .Nav a {color: #fff; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
    .Nav-slide.active a {color: yellow;}
    .NavArea li.highlight0 {display: none;}
    .Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
    .NavArea .Nav li span {
        display: inline-block;
    }
        
    /**floatM-bottom**/
    .float_wrapper { display: none;}
    .M_menu_wrap { position: fixed;  bottom: 0; z-index: 999; }
    .M_menu_block { width: 100vw; background-color: rgb(0 0 0 / 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);  }
    .M_menu_block ul { border-top: 2px solid #999; display: flex; justify-content: center; align-items: center; }
    .M_menu_block li { width: 100%; font-size: 16px; line-height: 18px; height: 50px; display: flex; flex: auto; justify-content: center; align-items: center; text-align: center; border-left: 1px solid #222; border-right: 1px solid #666; padding-bottom: 8px;}
    .M_menu_block li a{ color: #fff; width: 100%;}
    .M_menu_block a{ color: #fff;}
        
    .label{width: 40%;}

}

@media screen and (max-width:768px) {
.table_m { display: none;}
	
.coupon ul li {width: 50%;}
.coupon ul {justify-content: flex-start;}	
}