@charset "big5";
/* CSS Document */
@media only screen and (max-width: 768px) {
  body {overflow-x: hidden;}

  .header {padding-top: 40px; background: none;}
  .top-desktop {display: none;}
  .top-mobile {display: block;}

  .linl-special {margin-left: 0px; width: 100%; height: auto; position: static;}
  .linl-special a {display: block; margin-top: 0; position: relative; top: 0; left: 0; animation: none;}
  .linl-special a img.cloud {display: none;}
  .linl-special a img.hand {top: 5px; left: 87%;}
  .linl-special a .sptext {width: 100%; padding: 5px 0; background-color: #6600cc; font-size: 24px; line-height: 24px; letter-spacing: 2px; position: static;}
  .linl-special a .sptext, .linl-special a:hover .sptext {color: #ffffff;}
  .linl-special a .sptext span {display: inline-block; padding: 0 5px;}

  .main, #category {width: 100%;}
  .main {border-radius: 0;}
  #category-main a {margin: 0; letter-spacing: 0; text-indent: 0;}
  .article {margin-left: 0;}

  .aside {padding: 0; width: auto; float: none;}
  #ad { display:none;}
  /*#ad {padding-top: 5px; white-space: nowrap; overflow-x: scroll; overflow-y: none;}*/
  #ad a {display: inline-block; margin: 0.5%; width: 38%; float: none;}
  #ad a img {width: 100%; border: none;}

  .special a .title {font-size: 24px;}
  .special a .price b {font-size: 48px;}

  .ads {display: flex; width: 100%; margin: 1px; flex-wrap: wrap;}
  .card {margin:5px;}
  .card img {width:100%;}
  .ad-title {font-weight: bold; font-size:18px; line-height:22px;}
  .ad-text {font-size:16px; line-height:20px;}
  .ad-spice {font-size:16px; line-height:22px; text-align: right;}
}

@media only screen and (max-width: 540px) {
 .category-main-content {display: block;}
  #category-sub {white-space: nowrap; *white-space: normal; overflow-x: scroll;}

  #ad a {width: 42%;}

  .special a {width: 95%;}
}