@charset "utf-8";

@media screen and (max-width: 1220px) {
   .index-main { margin:  16px; }
   .foot-main { margin: 0 30px;}
   .main-body { margin: 3em 15px;}
   .main-body.login-box { margin: 3em auto;}
}



@media screen and (max-width: 1100px) {
   main { padding-top: 60px; }
   header { padding: 0 10px; height: 60px; font-size: 14px; }
   .page-banner { margin-top: 0px; }
}



/********************** 980px *************************/
@media screen and (max-width: 980px) {
   header nav, header .login-box { display: none;}
   .m-burger { display: block; position: fixed; top: 16px; right: 12px; z-index: 950; width: 36px; height: 24px; cursor: pointer; transition: all 0.3s ease;} 
   .m-burger:before, .m-burger:after { content: ''; }
   .m-burger span { margin: 5px 0;}
   .m-burger:before, .m-burger:after, .m-burger span { display: block; width: 100%; height: 5px; background-color: #ca2aa8; transition: all 0.3s ease; border-radius: 2px;}

   .m-burger.active:before, .m-burger.active:after, .m-burger.active span { background-color: #ffffff; }
   .m-burger.active:before { transform: rotate(45deg); margin-top: 10px;}
   .m-burger.active:after { transform: rotate(-45deg); margin-top: -20px;}
   .m-burger.active span { width: 0; }

   .index-main .index-news, .index-main .index-video { width: 100%; flex: none; margin: 0 0 0.5em 0;}

   .mobile-menu { display: block; width: 100%; max-width: 480px; position: fixed; z-index: 920;  top: 0; right: -100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); padding: 100px 20px 20px 20px; transition: all 0.3s ease;}
   .mobile-menu.active { right: 0;}
   .mobile-menu nav { width: 100%; }
   .mobile-menu nav ul { list-style: none; margin: 0; padding: 0;}
   .mobile-menu nav ul li a { display: block; padding: 0.5em 1.5em; text-align: center; font-size: 24px; color: #ffffff; border-bottom: 1px #777777 dashed;}

   .mobile-menu .login-box { margin: 0 auto; text-align: center; padding-top: 1em;  font-size: 24px;}

   .page-banner { width: 100%; overflow: hidden; text-align: right; }
   .page-banner img { width: auto; height: 120px; }

   .news-list { margin: 0;}

   .member-body .left { width: 180px;}
}





/******************* 760px *************************/
@media screen and (max-width: 760px) {

   
   .index-video-lis .list { width: 100%; margin: 5px 0; }

   .video-list .list { width: calc(50% - 10px); margin: 5px;  }

   .shop-list .list { width: calc(50% - 20px); margin: 10px; }
   .shop-list .list h3 { font-size: 16px;}

   .search-box input { width: 100%; flex: none; margin: 0 0 8px 0;}
   .search-box select { width: calc(50% - 5px); margin: 0 0 8px 0; } 
   .search-box select:nth-child(2) { margin-right: 5px;}
   .search-box select:nth-child(3) { margin-left: 5px;}
   .search-box .btn-search { width: 100%; flex: none; margin: 0; padding: 0.4em 1em;}

   .member-body .left { width: 100%; flex: none; margin-right: 0;}

   .index-shop .list {  width: calc(33.3% - 10px); }
}



/******************* 680px *************************/
@media screen and (max-width: 680px) {
   .foot-main { padding-bottom: 100px;}
   .news-list .list { padding: 1.5em 0;}
   .news-list .list .time { flex: 1;}
   .news-list .list .news-label { margin-right: 0;}
   .news-list .list > a { width: 100%; flex: none; padding: 0.5em 0;}
   .news-list .list .views { width: 100%; text-align: right; margin-left: 0;}

   .page-banner { display: none; }
   .page-title h3 { font-size: 24px; }
   .page-title:before { top: 50%;}

   .shop-body .left,
   .shop-body .right { width: 100%; flex: none; padding-right: 0; margin-left: 0; }
  
   .foot-main .list-box { text-align: center; justify-content: center;}
   .foot-main .list-box h4 { width: 100%; flex: none;}
   footer .social-list-box { width: 100%; flex: none;  margin-top: 10px;}

  
   

}

@media screen and (max-width: 480px) {
   
   .bookmark a { display: none;}
   .bookmark select { display: inline-block; font-size: 16px; }
   footer .count-box { padding: 0.5em 0; }

   .page-change .prev { display: flex; align-items: flex-start;}
   .page-change .prev a { padding-left: 1em; text-align:justify;  }
   .page-change .prev a:before { position: relative; top: auto; left: auto; display: block; padding-right:0; width: 100%; flex: none; padding-bottom: 0.5em; }
   .page-change .next a { display: flex; flex-wrap: wrap; align-items: flex-start; padding-right: 1em; text-align:justify; }
   .page-change .next a:before {  position: relative; width: 100%; top: auto; right: auto; text-align: right;  padding-left: 0; padding-bottom: 0.5em; }

   .search-data { font-size: 16px;}

   .invoice-list { border: 1px #ebebeb solid; border-bottom: 0; }
   .invoice-list .td.th { display: none;}
   .invoice-list .td { padding: 10px 5px;}
   .invoice-list .td > div { width: 100%; flex: none; padding: 2px; text-align: left;}
   .invoice-list .td > div:before { display: inline-block; padding-right: 10px; color: #666666;}

   .total-amount .money { flex: none; width: 100%; justify-content: center; }
   .total-amount .bonus-ticket { justify-content: center;}

   .index-shop .list {  width: calc(50% - 10px); }
   
}


/******************* 375px *************************/
@media screen and (max-width: 375px) {

   .main-body { margin-top: 30px;}
   .main-body.login-box { margin: 3em 15px;}



   .index-news-lis .list, .index-video-lis .list { width: 100%; margin: 5px 0; }
   .index-shop .list {  width: 100%; }

   .foot-main .list-box { width: 100%; flex: none; border-right: 0; margin-right: 0; margin-bottom: 1em;}
   footer:before { background-position: center 70%;}

   .article-title { padding: 0.5em 25px }
   .article-body {  padding: 0 5px 1em 5px; }

   .video-list { margin: 0;}
   .video-list .list { width: 100%; margin: 5px 0;  }

   .shop-list { margin: 0;}
   .shop-list .list { width: 100%; margin: 5px 0; }
   .shop-catalogry span { padding: 0px 10px; }

   .search-box { font-size: 14px;}

   .mobile-menu nav ul li a,
   .mobile-menu .login-box { font-size: 20px;}

   .form-body .list label { width: 100%; margin-right: 0; }
   .form-body .list input.text,
   .form-body .list select.select-list,
   .form-body .list textarea { width: 100%; flex: none; }
   .form-body .list .note {  padding:5px 0 0 0em; }

   .form-body .list.radio > div { margin-right: 10px;}
   .form-body .list.radio label { width: auto; flex: 1;}
}


@media screen and (max-width: 330px) {

   
   
}