@charset "UTF-8";

/* ================================================
Basic
================================================ */

body {
    min-width: 1250px;
    color: #333;
    font: 13px/1.6em "Century Gothic", Arial, "Microsoft JhengHei", "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";
    background-color: #fff6ec; 
}

a {
    display: block;
    text-decoration: none;
}
:focus {
    outline: none;
}
i {
    font-style: normal;
}
.header, .footer {
    width: 100%;
    margin: auto;
    background: #fff;
}
.hd_pc {
    width: 100%;
}
.hd_m {
   display: none;
}
.pc_mode {
    display: block;
}
.m_mode {
    display: none;
}
.M_menu_wrap {
    display: none;
}

/**wrapper**/
.wrapper {
    position: relative;
    background: url("../images/main_bg.png") center repeat-y;
    margin: auto;
    width: 100%;
    overflow: hidden;
}

/**main**/
.main {
  position: relative;
  margin: auto;
  width: 100%;
  overflow: hidden;
  margin-bottom: 80px;
}


/* ================================================
kv
================================================ */

.kv_bg {
    position: relative;
    background: url('../images/kv_bg.png') no-repeat top center;
}
.kv {
    position: relative;
    z-index: 1;
    margin: auto;
    max-width: 1200px;
    height: 940px;
}
.kv img {
  width: 100%;
  max-width: 100%;
}

/**kv_slogan**/
.kv_slogan1 {
    position: absolute;
    top: 9%;
    left: 4%;
    z-index: 2;
}

/**.kv_slogan1 img {
  -webkit-animation: lighting 2s ease-in-out infinite alternate;
  animation: lighting 2s ease-in-out infinite alternate;
}**/

/**kv_date**/
.kv_slogan2 {
    position: absolute;
    left: 3%;
    top: 0%;
    z-index: 2;
}

/**kv_product**/
.kv_item1 {
    position: absolute;
    right: 4.6%;
    top: 8%;
    z-index: 3;
}

.kv_item1 img {
  -webkit-animation: lightning 3s ease-in-out infinite alternate;
  animation: lightning 3s ease-in-out infinite alternate;
}

/**kv_product_04**/
.kv_item2 {
    position: absolute;
    right: 17%;
    top: 5.5%;
    z-index: 4;
}
/**kv_text**/
.kv_item3 {
    position: absolute;
    right: 11.5%;
    top: 23%;
    z-index: 3;
}


/* ================================================
event
================================================ */

.event_wrapper{
    position: absolute;
    /**max-width: 370px;**/
    top: 31%;
    left: 3%;
    /**background-color: #000;**/
}
.event{
    position: relative;
}
.events .event4{
    position: absolute;
    margin-top: -8%;
}

.events .event-item a img {
  transition: .3s all ease-in-out;
}
@media(hover:hover) {
  .events .event-item a img:hover {
    filter: brightness(1.3);
    transform: translateX(10px);
  }
}

/* ================================================
title
================================================ */
.title{
    width: 825px;
    margin: 0 auto;
}

/* ================================================
new
================================================ */

.new_wrapper{
    position: relative;
    margin-top: -150px;
    margin-bottom: 50px;
}

.news{
    background-image: url("../images/new_bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    height: 970px;   
}

.news1, .news2{
    display: flex;
    justify-content: center;
}

.news img{
    width: 100%;
}

.news a{
    cursor: pointer;
}

.news a img{
   transition: .3s all ease-in-out; 
}
@media(hover:hover) {
.news a img:hover{
    filter: brightness(1.05);
    transform: scale(.97);
  }
}

/* ================================================
but
================================================ */
.but{
    position: relative;
    z-index: 1;
    margin: auto;
    max-width: 950px;
    /**background-color: aqua;**/
    margin-top: 10px;
}

.but ul{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    /**height: 40px;**/
}
.but li a{
    display: block;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 40px;
    border-radius: 30px;
    background: linear-gradient(275deg, rgba(228,206,163,1) 0%, rgba(255,244,220,1) 100%);
    transition: .3s all ease-in-out; 
}

@media(hover:hover) {
.but li a:hover{
    transform: translateY(5px);  
 }
}

/*bg_wrapper*/
.bg_wrapper {
    /**display: none; **/
    position: absolute;
    width: 100%; 
    height: 100%; 
    top: 0; 
    z-index:1; 
    pointer-events: none;
}
.bg_fly {
    top: 0; 
    width: 100%; 
    height: 100%;
    background: url("../images/deco.png") center repeat-y;
    animation: lightning 2s ease-in-out infinite alternate, upDown_animation 1s ease-in-out infinite alternate;
    /**animation-delay: 1s;**/
}

/* ================================================
prod_wrapper
================================================ */

.title_temp {
    max-width: 1200px;
    margin: auto;
}

.pro_temp {
    display: none;
}

.prod_wrapper {
    position: relative;
    padding-bottom: 0;
}

.prod_container {
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.ProductList {
    margin: auto;
    position: relative;
    z-index: 9;
}

/**title**/
.tit {
    display: none;
    margin: auto;
}
.group {}
.group .tit {
    display: block !important;
    position: relative;
    z-index: 2;
}

.group .tit > div {}

.group .tit a {
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    text-align: left;
    box-sizing: border-box;
    height: 150px;
    position: relative;
    cursor: default;
    margin-left: 1.8em;
    margin-top: .5em;
    color: #ffecc4;
    font-weight: bold;
    display: block;
    cursor: pointer;
}

#group_2 .tit a, #group_4 .tit a{
    margin-left: 13em;
}

/**more**/
.group .tit a span {
    color: #000;
    background:linear-gradient(275deg, rgba(247,247,247,1) 0%, rgba(195,187,174,1) 100%);
    font-size: 20px;
    line-height: 20px;
    display:block;
    padding: 7px 20px;
    border-radius: 30px;
    position: absolute;
    margin-left: 9%;
    margin-top: 2%;
    text-align: center;
    height: 20px;
}

#group_2 .tit a span{
    margin-left: 19%;
    margin-top: 4%;
}

#group_4 .tit a span{
    margin-left: 16%;
    margin-top: 4%;
}

/**PID group**/
.group {
    box-sizing: border-box;
    max-width: 1140px;
    width: 100%;
    padding-top: 235px;
    padding-bottom: 70px;
    margin: 0 auto;
    position: relative;
    left: 75px;
}
.group:before {
    content:'';
    background: url("../images/border_01.png") no-repeat center transparent;
    width: 1140px;
    height: 1270px;
    margin: auto;
    /* position */
    position: absolute;
    top: 25px;
    left: -73px;
    z-index: 1;
}

#group_2:before, #group_4:before{
    background: url("../images/border_02.png") no-repeat center transparent;
}

/**product**/
.ProductList {
    width: initial;
    overflow: initial;
}

.ProductList .item {
    width: 240px;
    border-radius: 10px;
}
        
.ProductList .item > a {
    border-radius: 10px;
    position: relative;
    z-index: 9;
}

.ProductList .ProductImg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 240px; 
    height: 240px;
    border-radius: 10px;
}

.ProductImg .tab {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    background-color: #e04d34;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
    box-shadow: rgb(0 0 0 / 35%) 2px 2px 3px;
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 4;
}
.ProductList .ProductDesc {
    background: linear-gradient(90deg, #e04d34 0%, #ffb02c 100%);
}

.item {
    text-align: center;
    float: left;
    width: 240px;
    margin-right: 4px; 
    margin-left: 4px;
    margin-bottom: 15px;
}
.item > a {
    display: block;
    background: #fff;
    padding-top: 5px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    overflow: hidden;
}

@media(hover:hover) {
.item > a:hover, .item > a:focus, .item > a:active {
    transform: translateY(-5px)
}
}

.item .ProductImg {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 240px; height: 240px;
}
.item .ProductImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item .ProductDesc {
    overflow: hidden;
    padding: 0 5px;
    height: 36px;
    color: #000;
    font-weight: bold;
    font-size: 15px;
    line-height: 36px;
    background: linear-gradient(275deg, rgba(228,206,163,1) 0%, rgba(255,244,220,1) 100%);
    width: 90%;
    margin: 2px auto;
    border-radius: 50px;
}
.item .ProductName {
    overflow: hidden;
    padding: 4px 5px;
    height: 38px;
    color: #000;
    text-align: center;
    font-size: 16px;
    line-height: 21px;
}
.item .ProducPrice, .item .Event_Condition {
    padding: 7px 10px 0 10px;
    height: 45px;
    color: crimson;
    position: relative;
    margin-top: 3px;
}
.item .ProducPrice label {
    cursor: pointer;
}
.item .ProducPrice i em span {
    margin: 0 10px 0 0;
    font-weight: 100;
    font-size: 13px;
}
.item .ProducPrice span, .item .Event_Condition i span {
    margin: 0 2px 0 2px;
    font-weight: 500;
    font-size: 33px;
    line-height: 37px;
    font-weight: bold;
}
.item .ProducPrice i em {
    color: #747474;
    text-decoration: line-through;
    font-style: normal;
}
.item .ProducPrice .price_txt {
    color: crimson;
    font-size: 15px;
    line-height: 26px;
}        
/**tag wfe******************/
.tag_wfe {
    position: relative;
    top: -5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("//www.payeasy.com.tw/pezlib/images/tag_wfe_s.png") left;
    background-size: cover;
}
.tag_wfe:before {
    display: inline-block;
    height: 100%;
    content: '';
    vertical-align: text-bottom;
}
.tag_wfe .brief:after {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 0;
    height: 0;
    border-color: transparent #E36E1A transparent transparent;
    border-style: solid;
    border-width: 5px;
    content: '';
    font-size: 0;
    line-height: 0;
}
.tag_wfe.checked {
    background-position: right;
}
.tag_wfe.checked:hover .brief {
    display: none;
}
.tag_wfe .brief {
    position: absolute;
    top: -5px;
    left: 25px;
    z-index: 10;
    display: none;
    width: 64px;
    background: #E36E1A;
    color: #f6f6f6 !important;
    text-align: center;
    font-size: 12px !important;
    line-height: 16px !important;
}
.tag_wfe:hover .brief {
    display: block;
}

/* ================================================
brand
================================================ */

.brand_wrapper{
    position: relative; 
    z-index: 2;
}
.brand_container{
    position: relative;
    margin: 0 auto;
    max-width: 1250px;
}

.brand{
    position: relative;
    margin: 0 auto;
    max-width: 1050px;
    /**background-color:aqua;**/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.brand .brand1,
.brand .brand3,
.brand .brand4,
.brand .brand6{
    position: relative;
    margin-top: 3.5%;
}

.brand .brand-item a img {
  transition: .3s all ease-in-out;
}
@media(hover:hover) {
.brand .brand-item a img:hover {
    filter: brightness(1.2);
    transform: translateY(10px);
  }
}


/* ================================================
NavArea
================================================ */

.gotop {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 22px;
    line-height: 60px;
    text-align: center;
    height: 60px;
    position: fixed;
    left: calc(50% + 620px);
    width: 60px;
    border-radius: 30px;
    bottom: 250px;
    z-index: 999;
    display: none;
    cursor: pointer;
}

.NavArea {
    display: none;
}
@media screen and (min-width: 769px) {

/**NavArea**/
.NavArea {
    display: none;
    width: 140px;
    position: fixed;
    top: 50px;
    right: 0;
    z-index: 250;
    animation: slideLeft 1s ease-in-out 1;
}
    
@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}

	50% {
		transform: translateX(-8%);
	}

	65% {
		transform: translateX(4%);
	}

	80% {
		transform: translateX(-4%);
	}

	95% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(0%);
	}
}

.Nav-slide.active {
    color: #fff;
    background: #977d68;
    text-shadow: #000 0 0 0.5em;
}   

.float_tit {
    text-align: center;
}

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

.go_top {
    display: block;
    cursor: pointer;
}

.Nav-wrapper {
    background-color: rgb(49 47 57 / 95%);
    width: 105px;
    margin: -8px auto 0;
    padding-top: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.Nav-wrapper li {
   font-size: 15px;
   line-height: 15px;
   text-align: center;
   background: transparent;
   margin: 1px auto;/**可調整上下間距**/
   padding: 5px 0;
   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: 20px;
   padding-left: 2px;
}
.Nav-wrapper li.go_top:before {
   content: ' ';
   display: block;
   background: url("../images/float_bottom.png");
   position: absolute;
   width: 126px;
   height: 116px;
   bottom: -85px;
   right: -20px;
   z-index: 251;
}

.Nav-wrapper li a {
   color: #ffecc4;
   font-weight: bold;
   cursor: pointer;
   display: block;
   padding: 2px 0;
   position: relative;
   z-index: 500;
}
    
.Nav-wrapper li.best a {
    background-color: #000;
    padding: 8px 0;
    margin: 0 5px;
    border-radius: 30px;

}

.Nav-wrapper li a:hover,
.Nav-wrapper li a:focus,
.Nav-wrapper li a:active {
   color: #fff;
   text-shadow: #fff 0 0 1em;
}

.Nav-wrapper li:after {
   background: #fff;
   box-shadow: #fff 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;
}
}

/* ================================================
- 底部選單
================================================ */

.M_menu_wrap {
	display: none;
}
.M_menu_block {
    background: rgba(85,85,85,0.85);
    background: -moz-linear-gradient(0deg, rgba(85,85,85,0.85) 0%, rgba(17,17,17,0.85) 100%);
    background: -webkit-linear-gradient(0deg, rgba(85,85,85,0.85) 0%, rgba(17,17,17,0.85) 100%);
    background: linear-gradient(0deg, rgba(85,85,85,0.85) 0%, rgba(17,17,17,0.85) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
@media screen and (max-width:768px) {
    .M_menu_wrap { display:block; font-size: 15px; position: fixed; bottom: 0; z-index: 200; }
    .M_menu_block { position: fixed; bottom:0; /**background: rgba(0,0,0,1)**/; width: 100%; z-index: 200; }
    .M_menu_block ul li { width: 25vw; box-sizing: border-box; text-align: center; float: left; height: 50px; cursor: pointer; border-top: 1px solid #999; border-right: 1px solid #666; border-left: 1px solid #222; }
    .rule .M_menu_block ul li /* - 活動說明頁 : 規則頁 rule */ { width: 26vw; }
    .M_menu_block ul li.M_menu_gotop  { background: linear-gradient(0deg, #173c68 0%, #0378af 100%); width: 22vw; }
    /**.M_menu_block ul li:last-child {border:none;}**/
    .M_menu_block ul li:before {content:''; display: inline-block; vertical-align: middle; height: 100%; }
    .M_menu_block ul li a { display: inline-block; width: 100%; color: #fff; font-size: 15px; line-height: 16px; vertical-align:middle; }
    .M_menu_block ul li a b { display: inline-block; text-shadow: 0 0 2px black; box-sizing: content-box; background: #e04d34; padding: 5px; width: 1em; height: 1em; border-radius: 100px; }
    .M_menu_block ul li.best a { color: yellow; }
    .M_menu_filter { display: none; position: fixed; bottom:60px; width: 95%; margin: auto; left: 0; right: 0; background: #fefefe; border-radius: 10px;z-index: 200; }
    .M_menu_filter:after { content:''; display: inline-block; width: 0; height: 0; border-width:7px; border-color:#fefefe transparent transparent transparent ; border-style:solid; position: absolute; left: 0; right: 0; bottom:-14px; margin: auto; }
    .M_menu_filter ul li { /*width: 33.3%;*/ box-sizing: border-box; text-align: center; float: left; height: 50px; padding: 5px; }
    .M_menu_filter ul li a { background: darkred;  display: block; font-size: 14px; height: 35px; color: #fff;vertical-align: middle; border-radius: 20px; }
    .M_menu_filter ul li a:before { content:''; display: inline-block; vertical-align: middle; height: 100%; }
    .bk_mask { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); top:0;z-index: 100; }   
}



/* ================================================
- 至適應
================================================ */

@media screen and (max-width: 1024px) {  
body {
    width: 100vw;
    min-width: inherit;
}
    
* { box-sizing: border-box; }
       
.header {
    width: 100vw;
}
.footer, .drift { display: none; }
.hd_pc { display: none; }
.hd_m { display: block; }
.pc_mode { display: none; }
.m_mode { display: block; }

/**wrapper**/
.wrapper {}
.bg_wrapper{display: none;}  
/**main**/
.main {
    margin-bottom: 100px;
}

.rule .main {
    padding-bottom: 0;
}

/**kv**/
.kv_bg {
    background: url("../images/kv_m.png") center top no-repeat;
    background-size: contain;
    width: 100vw;
}

.kv {
    width: 100vw;
    height: 130vw;
}
/**kv_slogan**/
.kv_slogan1{
    width: 53%;
    top: 1.5%;
    left: 38%;
} 
/**kv_date**/    
.kv_slogan2 {
    width: 30%;
    left: 8%;
}
/**kv_product**/    
.kv_item1 {
    width: 82%;
    right: 11%;
    top: 16.5%;
}
    
/**kv_product_04**/
.kv_item2 {
    width: 20%;
    right: 27%;
    top: 20.5%;
}
 
/**kv_text**/
.kv_item3 {
    width: 50%;
    right: 25%;
    top: 31%;
}
   
/* ================================================
event
================================================ */

.event_wrapper{
    width: 100vw;
    left: 0%;
    top: 71%;
}
.events{
    display: flex;
    flex-wrap: wrap;
    height: auto;
}

.events .event-item{ width: 50%; }    
.events img{ width: 100% }  
    
.events .event4{
    position: relative;
    margin-top: 0%;
} 
    
/* ================================================
title
================================================ */
.title{ width: 90%; }   
.title img{ width: 100%; }    
    
/* ================================================
new
================================================ */

.new_wrapper{
    margin-top: 0px;
    margin-bottom: 4%;
}

.news{
    background-size: contain;
    height: auto;   
}
    
/* ================================================
but
================================================ */
.but{
    width: 70%;
    margin-top: 0px;
}
    
.but ul{
    display: flex;
    flex-wrap: wrap;
}
    
.but li a{
    padding: 13px 40px;
    margin-top: 15px;
}    

/* ================================================
prod_wrapper
================================================ */
    
.prod_wrapper {
    margin-top: 10px;
}
.prod_wrapper .group:last-child {
    padding-bottom: 0;
}
.prod_wrapper_bg {
    width: 100vw;
}
.prod_container {
    padding-bottom: 30px; /*無底部*/
}
.ProductList {
     width: 100vw;
}
.group {
    background: none;
    padding-top: 0;
    padding-bottom: 10px;
    left: 0px;
}
.group:before {
    background: none;
}
    
#group_2:before, #group_4:before{
    background: none;
}
    
.group .tit {}
.group .tit a {
    background: url('../images/title_m_bg.png') no-repeat center;
    /**background-size: contain;**/
    text-align: center;
    padding-left: 0em;
    line-height: 4.8em;
    font-size: 3em;
    background-size: 100% 100%;
    width: 100vw;
    height: auto;
    margin-left: 0em;
}
    
    
#group_2 .tit a, #group_4 .tit a{
    text-align: center;
    margin-left: 0em; 
}    

/**more**/
.group .tit a span {
    display: inline-block;
    padding: 8px 20px;
    margin-left: 10px;
    margin-top: 10%;
    height: 5vw;
}
    
#group_2 .tit a span{
    margin-left: 10px;
    margin-top: 10%;
}

#group_4 .tit a span{
    margin-left: 10px;
    margin-top: 10%;
}    
    
    
/***/
.ProductList .item {
    margin-right: 0.5vw;
    margin-left: 0.5vw;
}
.ProductList .item, .item {
    margin-top: 5px !important;
    margin-right: 0.5vw;
    margin-left: 0.5vw;
    width: 49vw;
    margin-bottom: 0;
}
.item > a { padding-top: 0; }
.item .ProductImg {
    max-width: 49vw !important;
    height: 49vw !important;
}
.item .ProducPrice {
    padding: 7px 0 0 0;
}
.item .ProducPrice span, .item .Event_Condition i span {
     font-size: 25px;
     font-weight: bold;
}
.item .ProducPrice span, .item .Event_Condition i span {
      line-height: 25px;
}
.item .ProducPrice i em span {
      margin-right: 5px;
      font-size: 12px;
      font-weight: bold;
}
.item .ProductName {
      height: 40px;
      font-size: 14px;
      line-height: 18px;
}
.item .ProductDesc {
      font-size: 14px;
      width: 95%;
      overflow: hidden;
}
    
/* ================================================
brand
================================================ */

.brand_wrapper{
    width: 100vw;
}
.brand_container{ 
    width: 100vw;
}

.brand{
    width: 90vw;
}
.brand-item{
    width: 45vw;
}

.brand .brand1,
.brand .brand3,
.brand .brand4,
.brand .brand6{
    margin-top: 0%;
}   
    
.brand .brand-item a img{
    width: 100%;
}    
    

/**M_menu**/
.M_menu_block {
    width: 100vw;
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); */
    box-shadow: 0px -1px 1px #333;
}
.M_menu_block:after {
    clear: both;
    display: table;
    content: '';
}
.M_menu_block ul {
    overflow: hidden;
}
.M_menu_block li {
    float: left;
    /* padding-top: 7px; */
    width: 20vw;
    height: 55px;
    border-top: 1px solid #999;
    border-right: 1px solid #666;
    border-left: 1px solid #222;
    text-align: center;
}
.M_menu_block li.col-4 {
    width: 25vw;
}
.M_menu_block li a {
    color: #fff;
    display: inline-block;
    line-height: 19px;
}
.M_menu_block ul li.best {
    width: 100vw;
}
.M_menu_block ul li.best a {
    color: yellow;
}
.M_menu_block ul li:before {
    display: inline-block;
    height: 100%;
    content: '';
    vertical-align: middle;
}
/**/
.tag_wfe {
    top: auto;
}
    
/* 規則頁 */
.rule {
    /* background: url("../images/kv_bg_m.jpg") center top no-repeat,  url("../images/bg.jpg") repeat-y center 100vw #fff6ec; */
    /* background-size: contain; */
    /* margin-top: 50px; */
}
.rule .kv_bg {
    /* height: 105vw; */
}
.rule_bg_move { display: none; opacity: 0; }
    /* .terms_wrapper { padding-bottom: 50px; } */
.terms_container { padding-bottom: 8em; }
.terms_container:before,
.terms_container:after { display: none; }
.terms_container .title {}
.terms_container .title img {
    width: 100%;
}
.rule_content strong {
    color: crimson;
}
.go-back-btn {
    /* margin: auto;
    position: absolute;
    left: 0; right: 0;
    bottom: 0; */
    margin: -35px auto 0;
    padding-bottom: 58px;
}

/* 規則頁 : 內文編輯區 */
    
.terms_container h3 {
    font-size: 20px;
    line-height: 26px;
}

    .terms_dflex {
        align-items: flex-start;
        flex-direction: column;
    }

    .terms_content {
        background-color: transparent;
    }

    .terms_content ol li {
        margin: 4px 5px 0 15px;
    }

    .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 #116ca7;
        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: #116ca7;
        content: attr(data-label);
        margin: 3px 5px 3px 0;
        padding: 3px 0;
        font-weight: bold;
    }

    .rule .terms_content img {
        max-width: 80%;
    }
    
    /**rule_container_m**/
    .rule_wrapper { width: 100vw; }
    .rule_container { padding-top: 66px; }
    .rule_content { width: 100%; padding: 20px; }
    .rule_wrapper .title1 { font-size: 23px; width: 100%; padding: 15px 0; }	
    .rule_content span { display: block!important; padding-left: 0.3em; padding-right: 0.3em; }

    table {
        /* border: 0px solid #116ca7; */
    }

    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: #116ca7;
        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: 10px solid #fff; */
        font-size: 14px;
    }
    
    table th {
        /* background: #56a2cf; */
    }

    table th,
    table td {
        padding: 5px;
    }

}

@media screen and (max-width: 768px){
    /* 右側懸浮 float */
.gotop {
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    left: auto;
    right: 10px;
    width: 40px;
    bottom: 80px;
    display: none;
}
.NavArea {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 999;
    /* display: block; */
    display: none;
}
.NavArea .Nav {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: scroll;
    background-color: #000;
}
.NavArea .Nav ul {
    white-space: nowrap;
    padding-top: 10px;
}
.NavArea .Nav li {
    z-index: 10;
    position: relative;
    display: inline-block;
    padding: 0;
    overflow: hidden;
    width: auto;
    font-weight: inherit;
    text-align: center;
}
.NavArea .Nav li:nth-child(odd){
    background-color: #131313;
}
.NavArea .Nav a {
    color: #fff;
    text-decoration: none;
    line-height: 44px;
    position: relative;
    padding: 0 12px;
    height: 44px;
}
.Nav-slide.active a {
    color: salmon;
}
.float_tit { display: none !important; }
/* .go_top { display: none; } */
}



@media screen and (max-width: 480px) {
.group .tit a{
    line-height: 4em;
    font-size: 1.8em;
}   
    
/**more**/    
.group .tit a span{
    font-size: .6em;
    height: 7vw;
    padding: 4px 6px;
    margin-top: 8%;
} 
    
#group_2 .tit a span{
    margin-top: 8%;
}

#group_4 .tit a span{
    margin-top: 8%;
}      
    
/* ================================================
but
================================================ */
.but{ width: 80%;}
.but li a{
    font-size: 15px;
    padding: 7px 10px;
    margin-top: 10px;
}
    
}

@media screen and (max-width: 375px) {
/**more**/    
.group .tit a{
    margin-top: 7.8%;
}  

}

@media screen and (max-width: 320px) {
    .item .ProducPrice i em span {
        font-size: 11px;
    }
    .item .ProducPrice .price_txt {
        font-size: 13px;
    }
    .tag_wfe {
        width: 16px;
        height: 16px;
    }

}