@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*{margin: 0; padding: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body { font-family: "Noto Sans TC","微軟正黑體",Arial, Helvetica, sans-serif, "新細明體";  font-size:15px; line-height:1.5; font-weight:normal; color:#3D3A39;}
em{ font-style: normal;}
a:link, a:visited { color:#3D3A39; text-decoration:none; }
a:hover, a:active { color:#3D3A39; text-decoration:none;}

:root{
  --topH: 30px;
  --swiper-theme-color: #488CC6;
}

.iframe_gamelist{width:calc(100% - 70px);margin:0 auto;position:relative; padding: 2px; padding-top: 0; height:130px; display: flex; justify-content: stretch; align-content:stretch; flex-wrap: wrap; background: var(--swiper-theme-color); }


.top_bar{background:var(--swiper-theme-color); text-align: center; color: #fff; width: 100%; height: var(--topH); font-size:14px; line-height: var(--topH);}
.top_bar a{display:inline-block; color:#f1cd28; font-size:13px; border-radius: 10px; line-height: 1.2; padding: 0 5px;}

.swiper{height: calc(100% - var(--topH)); overflow:hidden;}
.swiper .box_0{width: auto; border-right:2px solid var(--swiper-theme-color); font-size: 13px; background:#fff; display: flex; align-content:stretch; padding-right: 5px;}

.swiper .box_0.spotlight{background: #FFE5EC;}
.swiper .box_0.spotlight .box_2 span{color: #FB6F92; font-weight: 600;}

.swiper .box_0 .box_1{ display: flex; align-content:stretch; flex-wrap: wrap; width: 100%; }
.swiper .box_0 .box_2{width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.8;}
.swiper .box_0 .box_2:last-child{border-bottom:none;}
.swiper .box_0 .box_2 p {display: inline-block; width: 70%; }
.swiper .box_0 .box_1 strong {width: 30%; color: #333; font-weight: normal; text-align: center; padding-left: 7px; font-size: 13px; }

.swiper .box_0 .box_1 .box_2:not(:first-child) strong{overflow:hidden;white-space: nowrap;
text-overflow: ellipsis;}

.swiper .box_0 .box_1 span {width: 70%; }
.swiper .box_0 em {display: block; }
.swiper .box_0 .tag{ font-size: 13px; color: #2085f8; margin-right: -5px; padding-right: 5px; }
.swiper .box_0 .date{background: #f9f9f9; font-weight: bold; /*border-right: 1px solid #2085f8;*/ border-radius:10px; text-align:center; margin-bottom:2px;}
.swiper .box_0 .s1{font-size: 14px; color: #8b8b8b; font-weight: bolder;}

.swiper .box_0 .box_2 .sw_1{}
.swiper .box_0 .box_2 .sw_2{ display: none;}

.swiper .box_0.ad{ background: #fff; text-align: center; width: auto; max-width:260px; }
.swiper .box_0.ad >*{height: 100%; width: auto;} 
.swiper .box_0.ad img {height: 100%!important; width: auto!important;}

.swiper_btn{position:absolute;z-index:10;}
.swiper-button-prev, .swiper-rtl .swiper-button-next{left:-30px;}    
.swiper-button-next, .swiper-rtl .swiper-button-prev{right:-30px;}    
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{width:50%;left:50%;transform:translateX(-50%);bottom:0px;}    

@media only screen and (max-width:1000px){
  :root{
    --topH: 20px;
  }
  .iframe_gamelist{width:100%; height: 100px;}
  .swiper .box_0{ max-width:370px;}
  .swiper .box_0 .box_1{ max-width: inherit; display: block;}
  .swiper .box_0 .box_1 > *{ line-height: 1.9;}
  .swiper .box_0 .tag {display: inline; margin-right:3px  }
  .swiper .box_0.ad{ max-width:200px;}
  .swiper .box_0 .date{padding-right: 8px;}
  .swiper_btn{}
  .swiper-button-prev, .swiper-rtl .swiper-button-next{left:0px; top:50px; padding: 30px 30px 30px 15px;}    
  .swiper-button-next, .swiper-rtl .swiper-button-prev{right:0px; top:50px; padding: 30px 15px 30px 30px;} 
  .swiper .box_0 .box_1 strong {font-size: 13px; width: 110px; text-align:center;}
  .swiper .box_0 .box_1 p span{font-size: 11px;}
  .swiper .box_0 .box_1 span {width: calc(100% - 110px); }
}

@media only screen and (max-width:340px){
  .swiper .box_0{ font-size: 12px; border-right:2px solid #488CC6;}
}

.iframe_gamelist.h75{ height:75px; padding: 1px; font-size: 11px;}
.iframe_gamelist.h75 .top_bar{ height: 15px; line-height: 15px; font-size: 10px; }
.iframe_gamelist.h75 .top_bar p { margin-top: -1px;}
.iframe_gamelist.h75 .top_bar a {font-size: 10px;}
.iframe_gamelist.h75 .swiper{height: calc(100% - 15px); overflow:hidden;}
.iframe_gamelist.h75 .date{padding-right: 10px;}
.iframe_gamelist.h75 .box_0 {max-width: inherit; align-content:inherit; width: max-content; }
.iframe_gamelist.h75 .swiper .box_0 .box_1 > *{ line-height: 1.6;}
.iframe_gamelist.h75 .swiper .box_0 .box_1 .tag{display: inline; margin-right: 5px; font-size: 11px;}
.iframe_gamelist.h75 .swiper .box_0 .s1{font-size: 11px; color: #777777; font-weight: bold;}
.iframe_gamelist.h75 .box_0 .box_1 strong {font-size: 11px;}
.iframe_gamelist.h75 .box_0 .box_1 p {font-size: 11px;}
.iframe_gamelist.h75 .box_0 .box_1 p span{font-size: 11px;}
.iframe_gamelist.h75 .box_0 .box_1{ display: block;}



.iframe_gamelist.style_1{flex-wrap: nowrap; overflow: hidden;/*要箭頭刪掉overflow*/ align-items: center; height: inherit; }
.iframe_gamelist.style_1 .swiper{height: 35px; /*padding-top: 2px;*/ }
.iframe_gamelist.style_1 .top_bar{width: 110px; flex-shrink: 0; padding: 0 5px;}
.iframe_gamelist.style_1 .swiper .box_0 .box_1 {padding: 0 10px;}
.iframe_gamelist.style_1 .swiper .box_0 .box_1 strong {width: auto;}
.iframe_gamelist.style_1 .swiper .box_0 .box_1 span {width: auto; display: flex; flex-direction: row; align-items: center;}
.iframe_gamelist.style_1 .swiper .box_0 .box_1 span img{ display: none; width: 20px; height: auto; margin-right: 3px;}
.iframe_gamelist.style_1 .swiper .box_0 .tag{margin-right: 0; padding-right: 0;}
@media only screen and (max-width: 1000px){
  .iframe_gamelist.style_1 .swiper .box_0 .box_1 {padding: 0 5px;}
  .iframe_gamelist.style_1 .swiper .box_0 .box_1 > *{ line-height: 2.2;}
  .iframe_gamelist.style_1 .swiper{height: 30px; }
  .iframe_gamelist.style_1 .top_bar{width: 90px; font-size: 13px; padding: 0;}
  
}