@charset "utf-8";


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

}


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

    .banner { margin: 0 -10px 30px -10px; }
    .product-lis { margin: 0 -15px; }
    .product-lis li { width: calc(33.3% - 30px);}

    .product-lis li .price-box .g-coin { width: auto; flex: 1; }
}

@media screen and (max-width: 1080px) {
    .nav-item { display: block; }
    .nav-item:before { display: none; }
    .nav-item a { width: 100%; flex: none;}
    .nav-item .dropdown-menu { width: 100%; flex: none; top: auto !important; left: auto !important; inset: auto; position: relative; }

    header .nav-item > a span { font-size: 13px; }

}



@media screen and (max-width: 992px) {
    .teacher-cover { width: 100%; flex: none; margin-bottom: 30px; }
    .teacher-tool-links .gruid-line { display: block; height: 1px; width: 100%; margin: 20px 0; border-bottom: 1px #00c0de solid; }

    .product-photo { width: 100%; margin: 0;}

   body { padding-top: 75px; padding-bottom: 70px; }
   header { height: 75px; }
   header.down  { height: 75px; }
   header.down .top-search-box .input-group { top: 20px; }
   header.down .top-search-box .btn-language { top: 20px; }
   
   header .logo a { width: 140px; padding-top: 5px;}
   header .top-search-box .input-group { position: absolute; right: 38px; top: 24px; transition: all 0.3s ease; }
   header .top-search-box .btn-language { position: absolute; right: 8px; top: 24px; transition: all 0.3s ease; }
   header .navbar .navbar-nav { justify-content: center; margin-right: 0; display: none; }
   nav.bottom-menu { display: flex; }
   header .navbar .navbar-nav .nav-item { margin: 0 12px; }
   header .navbar .navbar-nav .nav-item > a img { height: 32px; }
   header .nav-item:before { display: none; }
   
}

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

    .product-lis { margin: 0 -10px; }
    .product-lis li { width: calc(50% - 10px); margin: 5px;}
    .product-lis.list-format li .format-md { padding-bottom: 50px; }
    .product-lis.list-format li .format-right { width: 100%; flex: none;  padding-top: 10px; } 
    .product-lis.list-format li .pro-tool { top: auto; bottom: 90px; }
    .product-lis.list-format li .pro-tool.just-buy {  bottom: 50px; }
    
    
    .video-cont .video-product { width: 100%; margin: 15px 0; }
    .product-lis.video-pro-list { margin: 0 -5px; }
    .product-lis.video-pro-list li { width: calc(33.3% - 10px); margin: 5px; }

    .catalogry-box { display: flex; } 
}

@media screen and (max-width: 728px) {
    
    .company-info { margin-bottom: 30px; }
    .page-title01 { padding: 0px 0 20px 0; text-align: center; }
    .left-menu-title.in-products,
    .left-menu.in-products { display: none; }
    .catalogry-box-menu { display: block; }

}

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


    .banner-box.pc {   display: none; }
    .banner-box.mb {   display: block; }
    .teacher-tool-links { border-radius: 1em; }
    .teacher-tool-links .button { width: 100%; display: block; margin-bottom: 0.5em; }

    .teacher-info-list { margin-bottom: 1.6em; }
    
    .i-daily-picks,
    .i-live-broadcast,
    .i-major-team { padding: 0; }

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

       /* 暫存購物車 */
    .temporary-cart { width: 100%; left: -100%; top: 51px; height: 100%; }
    .temporary-cart.down { top: 51; height: calc(100% - 55px); }

   .pro-sec select { width: 100%; }

   .product-lis li .quantity-num { margin: 0 0 8px 0; }
   .product-lis li .price, .product-lis li .s-price { min-height: 60px; }

   /* product detaile */
   .pro-detail-box { padding-left: 0px; }
   .product-cont { padding: 0px; }
   .product-box { display: block; height: auto; }
   .product-info { padding: 0; }
   .product-info .cart { position: relative; margin-top: 10px; }
   .product-info .cart a { padding: 0 10px; }


   .product-info .price .special span { font-size: 48px; font-family: BebasNeue; padding-left: 5px; display: inline-block; line-height: 48px; }
   .product-info .price .normal { font-size: 12px;}
   .product-info .price .normal span { font-size: 14px; text-decoration: line-through; padding-top: 0px;}
   .product-info .price .special { font-size: 16px; }
   .product-info .price .special span { font-size: 24px; line-height: 1em;}
   .product-title { padding: 10px 0 20px 0; }

   /* cart */
   .cart-table ul li { display: block; position: relative; padding-bottom: 70px; margin: 10px 0; }

   .cart-table ul li .photo { float: left; width: 50%; height: 120px; }

   .cart-table ul li .name,
   .cart-table ul li .quantity,
   .cart-table ul li .price,
   .cart-table ul li .subtotal { float: left; width: 50%; padding-bottom: 5px; }
   .cart-table ul li.th-lis { display: none; }
   .cart-table ul li .del { position: absolute; left: 0; bottom: 10px; width: 50%; }
   .cart-table ul li .delivery { text-align: right; float: left; width: 50%; padding-right: 5px; }
   .cart-table ul li .total { text-align: left; }
   .cart-table ul li .price span,
   .cart-table ul li .subtotal span,
   .cart-table ul li .quantity span { display: inline-block; color: #999; padding-right: 5px; }

   .cart-table ul li .quantity { position: absolute; bottom: 0px; right: 0px; }
   .cart-table ul li .space { text-align: center; padding: 5px 0; }

   .delivery-member-info span { display: block; }
   .delivery-member-info input { width: 100%; }
   .delivery-member-info input.checkbox { width: auto; width: 20px; height: 20px; margin: 0 10px 0 0; }
   .delivery-member-info select { width: 100%; }

   .order-lis ul li { display: flex;}
   .order-lis ul li.th-lis { display: flex; }
   .order-lis ul li.th-lis>div {
      font-size: 12px;
      -webkit-flex: 1;
      flex: 1;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
   }
   .order-lis ul li.th-lis .finish {  font-size: 12px; }
   .order-lis ul li .number { display: inline-block; font-size: 12px; -webkit-flex: 1; flex: 1; text-align: center; }
   .order-lis ul li .time { display: block; font-size: 12px; -webkit-flex: 1; flex: 1; }
   .order-lis ul li .finish { display: block;  flex: 1; }
   .order-lis ul li .unpaid { display: block;  flex: 1; }
   .order-lis ul li .preparing { display: block; -webkit-flex: 1; flex: 1; }
   .order-lis ul li .shipped { display: block;  text-align: left; }
   .order-lis ul li .name { display: block; text-align: left; }

   .order-list { margin: 0 -10px; }


   .i-pro-list { padding: 0; }
   .i-pro-list .list-item { width: calc(33.3% - 10px); margin: 5px; padding: 0; }

   .product-lis li .pro-tool { max-width: 370px; }
   .product-box .pro-tool button { padding: 6px 15px;}
   .product-box .pro-tool button:before {  width: 36px; height: 36px; }

}

@media screen and (max-width: 600px) {
    .product-lis.list-format li .pro-tool { bottom: 110px; }
    .mission-contestants .list-item { width: calc(33.3% - 6px); }

    .index-maim-pro  .i-pro-list .list-item { width: calc(50% - 10px);} 

    
}

@media screen and (max-width: 540px) {
    .product-lis.list-format li { padding: 0 0 15px 0; margin-bottom: 20px; }
    .product-lis.list-format li h3 a,
    .product-lis.list-format li .brief { padding-left: 180px; }

    .i-pro-list .list-item { width: calc(50% - 10px); margin: 5px; padding: 0; }

    .product-photo.video { margin: -15px -22px 0 -22px; width: calc(100% + 44px) !important; }

    .product-lis { padding: 10px; }
    .product-lis li { width: 100%; margin: 5px 0;}
    .product-lis.min-2row li{ width: calc(50% - 10px); margin: 5px;}

    .product-lis.list-format li .pro-tool { bottom: 110px; }
}

@media screen and (max-width: 480px) {
    header.down { height: 60px; }


    header .nav-item > a span { font-size: 12px; }
    header .top-search-box .input-group { width: 175px; top: 16px; }
    header .top-search-box .btn-language { top: 16px; }
    header.down .top-search-box .input-group,
    header.down .top-search-box .btn-language {top: 13px; }

    h3.page-title { text-align: left;  font-size: 18px;}
    h3.page-title .btn-back { right: 0; }

    .navbar-brand { padding: 0;}
    .teacher-info .teacher-cover { justify-content: center; }
    .teacher-info .teacher-name { width: 100%; max-width: 100%; flex: none; text-align: center; justify-content: center; margin: 30px 0 0 0; }

    .product-photo .pro-photos-show { width: 300px; height: 300px;}

    .pro-detail-box.group-shop { box-shadow: none; margin: 0; border-radius: 0; padding: 0; }
    
    .foot-info .footer-title { text-align: center; }
    footer nav.footer-link a { width: auto; flex: none; }

    .page-main { padding: 50px 0 30px 0; }

    .page-banner { padding: 50px 0; }
    .page-banner-title h1 { font-size: 24px; }

    .teacher-mug-shut { width: 120px; height: 120px; }
    .options .list { font-size: 14px; line-height: 1.2em; padding: 8px 5px;}

    .group-pro-info .group-number .group-leader {  width: 100%; margin-right: 0; margin-bottom: 20px; text-align: center; }
    .group-pro-info .group-number .group-leader:before { top: 116px;}
    .group-pro-info .group-number .group-leader .member-photo-item { max-width: 120px; display: inline-block; }
    .group-pro-info .group-number .group-tool .tool-btn { flex-wrap: wrap; }
    .group-pro-info .group-number .group-tool .tool-btn button { width: calc(50% - 4px); flex: none; }


    .login-select button { width: 100%; flex: none; margin-bottom: 5px; }

    /*
    .product-lis.video-pro-list { margin: 0; }
    .product-lis.video-pro-list li { width: 100%; margin: 15px 0; }
    */

    .breadcrumb { font-size: 14px; }
    
   
    
    .product-photo .pro-photos-show { width: calc(100% + 30px); height: auto; margin: 0 -15px; }
    .product-photo img { border-radius: 0; }
   
    .product-lis.list-format li h3 a{ margin: 0 0 10px 0; }
    
    .product-lis.list-format li .price-box { width: auto; bottom: 40px; right: 0; left: 180px;}
    .product-lis.list-format .add-to-cart-box { height: auto;}
    .product-lis.list-format li .pro-tool {  bottom: 90px; }

    .product-lis li h3 a { font-size: 14px; }
    .product-lis li .dd-eat-pro-lsit-info .price,
    .product-info .dd-eat-pro-lsit-info .price,
    .product-lis li .dd-eat-pro-lsit-info .praise, 
    .product-info .dd-eat-pro-lsit-info .praise {  font-size: 14px;  }

    .video-cont .video-box .video-iframe { width: calc(100% + 30px); margin: 0 -15px; }

    /* bottom-menu */
    nav.bottom-menu { display: flex;}
    .footer-info {  padding: 20px 0 0 0;}
    .footer-info .footer-logo-box,
    .footer-info .info-list,
    .footer-link-info { width: 100%; flex: none; margin: 0 0 20px 0; text-align: center;}
    .footer-info .footer-logo { max-width: 80px; margin: 0 auto; }
    .copyright { margin: 0 0 25px 0;}

    nav.bottom-menu li a { padding: 8px 5px; font-size: 12px; }
    nav.bottom-menu li a img { width: 32px; margin: 0 auto ; }
    

    .icon-groups a.icon-item { display: inline-block; width: 60px; margin: 5px 5px; font-size: 14px; }
    .icon-groups a.icon-item span { font-size: 14px; }


    .point-give input { width: calc(100% - 110px); flex: none; margin:10px 10px 10px 0;}
    .point-give button { width: 100px; flex: none; margin:10px 0; }

    .btn-box { padding: 10px 20px; }
    .btn-box button { min-width: 100%; margin: 5px 0; }

    .my-work .work-item { width: calc(50% - 20px); margin: 10px; }

    .product-lis li .pro-tool { max-width: 330px; }
   .pro-tool button { padding: 5px 15px;}
   .pro-tool button:before {  width: 30px; height: 30px; }

   .content-box { padding: 2em; }

   .dd-plus-tool { position: fixed; bottom: 65px; left: 0; width: 100%; background-color: #ffffff; z-index: 900; }

   .group-info-detail .g-coin { width: 100%; margin-bottom: 10px; }
   .member-photo-item02 { width: calc(50% - 8px); }

   .pro-detail-tool { position: fixed; left: 0; bottom:66px; width: 100%; background-color: #ffffff; border: 0; border-top: 1px #f0999a solid; z-index: 900; margin: 0; }
   .pro-detail-tool button:before { width: 26px; height: 26px; }

   .live-streaming .list-item { width: calc(50% - 10px);}

   .mission-contestants .list-item { width: calc(50% - 6px); }
}



@media screen and (max-width: 440px) {
    header .container-fluid { padding: 0; }
    .payment-lis .delivery-member.options .list { width: calc(33.33% - 8px);}
    .catalogry-box .catalogry-sub a {  width: 68px; height: 68px; }

    .product-lis.list-format li .pro-tool { bottom: 120px; width: 100%; justify-content: center; }
    .product-lis.list-format li .price-box .g-coin { width: 100%; flex: none; }

    nav.bottom-menu li { width: 50px; }

    .group-buy-list .group-buy-item .photo { width: 80px; }
    .group-buy-list .group-buy-item .info h3.name { font-size: 14px; }
    .group-buy-list .group-buy-item .info .btn-cancel { bottom: 55px; padding: 0px 20px; }

    .product-lis li .pro-tool { max-width: 290px; }
   .pro-tool button { padding: 3px 12px;}
   .pro-tool button:before {  width: 26px; height: 26px; }

   .content-box { padding: 1em; }

   .product-box .pro-tool button:before { width: 24px; height: 24px; }
   .product-box .pro-tool button { padding: 3px 12px; margin: 0 1px; }

   .ranking-list .ranking-item .member-name {font-size: 22px; }
   .ranking-list .ranking-item .ranking-sort { width: 65px;}
   .ranking-list .ranking-item .past-number { font-size: 12px; width: 40px; }


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

    /* product 
   .product-lis { margin: 0; }
   .product-lis li { width: 100%; margin: 5px 0 40px 0px; }
   .product-lis li .brief { line-height: 1.4em; height: 4.2em;}
   .product-lis li .pro-sec { padding: 0 0 8px 0; }
   */
    
    header .logo a { width: 120px; }
    header .top-search-box .input-group { width: 140px; }

}


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

    .i-pro-list .list-item { width: 100%; margin: 5px 0; padding: 0; }
    .index-maim-pro  .i-pro-list .list-item { width: calc(50% - 10px); margin: 5px;} 
}