@charset "utf-8";

@media screen and (max-width: 1220px) {
   .foot-info { margin: 0 20px; }
   .main-box { margin: 0 20px; }

   .index-steps .steps-list { margin-bottom: 50px; }
   .index-carousel .banner-carousel { padding: 0 15px; }
    
    .index-products .index-products-list .i-pro-item{
            width: calc(100% / 4 - 30px);
    }
}

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

   .index-steps .steps-list .basic-line:before { padding-bottom: 20%; }

/* product detaile */
.product-cont {  padding: 10px;}
.product-box { display:block; height:auto; }
.product-info { padding:0;}
.product-photo { height:auto; padding-right:0;}
.product-info .cart { position: relative; margin-top:10px;}
.product-info .cart a { padding:0 10px; }
.qtyInputBox input { width:30px;}
.product-lis li .quantity-num { width:90px;}
.product-info .briefly { line-height:1.6em; height: auto; overflow-y: inherit; margin-bottom: 20px; }
.product-title { padding:10px 0 20px 0;}
.product-info .price { position: relative; left: auto; bottom: auto;}


/* index-catalog */
.index-catalog { padding:0 10px;}
.index-catalog .index-catalog-banner { display:none;}
.index-catalog .index-catalog-list {  padding-left:0px; float:none; width:100%; } 

/* i-recommend */ 
.i-recommend { margin:0 -0.5%;  }

/* store */
.store-list {  margin:0;}
.store-itim { width:100%; margin:0 0 10px 0; float:none;}


/* activity */
.activity ul li { width:33.33%;}
.activity ul li a { height:150px; }

/* index-highlight */
.index-highlights ul li {width:33.33%; height:150px;}


.index-prodocut .index-pro-hoto { width: 100%; flex: none; }
.index-prodocut .index-pro-info { margin: 0 auto; width: 100%; }

}


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

   body { padding-top: 70px; }

    /*  header */
    header { height:auto; }
    header .top-head { padding-top: 0px; padding: 5px 0 10px 10px;  } 
    header .logo { padding-top: 8px; }
    header.down .logo { max-width: 180px; padding-top: 5px; }
 
    .language {  top:20px; right:5px; }

   /* mobile menu */
   .m-burger { display: block;}
   .m-burger.down { top: 15px;}
   .m-burger { width: 30px; top: 25px; right: 10px; height: auto; }
   .m-burger.active:before { margin-top: 8px; }
   .m-burger span { margin: 7px 0; height: 1px; background-color: #000000; }
   .m-burger:before,
   .m-burger:after { height: 1px; background-color: #000000; }
   .m-burger.active:after { margin-top: -2px; }

   /*  nav  */
   nav { display:none; }
   .slicknav_menu li.cart a img { height:16px; width:auto; padding-right:5px; vertical-align:middle; margin-top:-4px;}
   .menu li>span { display:none; }
   .menu li>.sub { opacity:1; position: relative; visibility: visible;}
   ul.slicknav_nav>li>div, .slicknav_nav span { display:none;}
   a.a-m { display:block;}

    .index-products .index-products-list .i-pro-item{
        width: calc(100% / 3 - 30px);
    }
    
    .swiper-slide{
        padding: 20px 50px;
    }
    
       .product-point .product-point-cont .title img { display: block; margin: 0 auto;}
   .product-point .product-point-list .list { width: 100%; flex: none; }

    .product-applications .product-applications-list .list{
        width: calc(100% / 3 - 30px);
    }
    
    .index-products .index-products-list .i-pro-title{
        font-size: 18px;
    }
    
    .product-great{
        font-size: 24px;
    }
    
    .product-great span{
        padding: 4px;
    }
    
   /* product-steps */
   .product-steps .title { margin-bottom: 20px; }
   .product-steps .steps-list { margin-bottom: 0; }
   .product-steps .steps-list .basic-line { background-size: auto 100%; }
   .product-steps .steps-list .basic-line:before { padding-bottom: 5%; }
   .product-steps .steps-list .list { position: relative; width: 100%; display: flex; padding: 10px 20px;  }
   .product-steps .steps-list .list label { flex: none; margin-right: 15px; }
   .product-steps .steps-list .list label span.number:before { display: none; }
   .product-steps .steps-list .list p { flex: 1; margin: 0; border-left: 1px #333 solid; padding-left: 1em; }
   .product-steps .steps-list .list.step01,
   .product-steps .steps-list .list.step02,
   .product-steps .steps-list .list.step03,
   .product-steps .steps-list .list.step04,
   .product-steps .steps-list .list.step05,
   .product-steps .steps-list .list.step06 { top: auto; left: auto; }
}


@media screen and (max-width: 640px) {
    .index-map .cont-box .map .map-box{
        height: 300px;
    }
    
    .index-map .cont-box .title{
        margin-right: 5px;
    }
    
    .index-map .cont-box .title .map-text{
        font-size: 70px;
        top: 35%;
    }
    
    .index-products .index-products-list .i-pro-item{
        margin: 5px;
        width: calc(100% / 2 - 30px);
    }
    
    .index-products .index-products-list .i-pro-title{
        font-size: 16px;
    }
    
    .swiper-slide{
        padding: 0;
    }
    
    .index-products .title{
        margin-bottom: 30px;
    }
    
    .index-products .slogan span{
        padding: 10px;
        bottom: -10%;
        line-height: 1.5em;
    }
    
    
   .main-box { max-width:1200px; margin:0 10px 20px 10px; padding:0; border-radius: 10px; }
   .left-bg { display:none;}
   .sign-box { margin-top: 50px;}
   
  .pc { display: none; }

   .content-left, .content-right { width: 100% !important; flex: none; margin: 0 0 20px 0 !important; padding: 0; }


   /* member   */
   .login-info { right:10px; left: 150px; top:auto; bottom: 10px; }

   ul.top-tool { position: fixed; top:5px; bottom: auto; right:50px; z-index: 995;}
   ul.top-tool li .search-btn { padding:0px 15px;}
   ul.top-tool li img { height:20px; width:auto; padding:0;}
   ul.top-tool li span { display:none;}
   ul.top-tool li .search-input { width:120px;}




   /*  banner  */
   .banner-box { display:none;}
   .banner-box-m { display: block; z-index: 1;}
   .top-banner { margin-bottom:20px;}
   .top-banner .pc { display:none;}
   .top-banner .mobile { display: block;}

   .subbanner a.pcp { display:none; }
   .subbanner a.mop { display:block; }


   /*  index-news  */
   .i-news { padding:20px 0 50px 0; display: block; }
   .i-news .title {  width:100%; padding-bottom:20px; }
   .i-news .news-list { -webkit-flex: 1; flex: 1; padding:0 30px; }
   .i-news .news-list .lis a { background:url(../images/i-news-dot.jpg) 0 10px no-repeat; color:#333; display:block; font-size:14px; padding:3px 0 3px 15px;}
   .i-news .news-list .lis a:hover { color:#F60;}
   .i-news .news-more { display: block; width: 100%; padding-top:30px;}


   /* i-announcement */
   .i-announcement { height: auto; overflow: auto;}
   .i-announcement .item h3 { height: auto; overflow:auto;}


   /* member   */
   .order-lis ul li { display: flex; }
   .order-lis ul li.th-lis { display: flex;  }
   .order-lis ul li.th-lis>div { font-size:14px; -webkit-flex: 1; flex: 1; -webkit-align-items: center; align-items: center;  -webkit-justify-content: center;  justify-content: center;}
   .order-lis ul li .number { display:inline-block;-webkit-flex: 1; flex: 1; }
   .order-lis ul li .time {   -webkit-flex: 1; flex: 1; }
   .order-lis ul li .finish {  display:block; -webkit-flex: 1; flex: 1;}
   .order-lis ul li .unpaid {display:iblock; -webkit-flex: 1; 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;}
   .search-bar {   display: block;}
   .search-bar .kyeword { width:100%; padding:0 0px 10px 0;}
   .search-bar .timearea { padding-left:0px;}
   .index-store { width:100%; margin:0; float:none; }


   .font-title { padding: 0 0px 20px 0px; }
   .font-title:after { left: 0; }

   .member-cont { padding:10px 10px 30px 10px; }
   .cart-table, .form.delivery-member, .contact-form { padding-left: 0; }
   .form.member { padding: 15px 0; }

   /* news */ 
   .news-list { padding:0px 10px; min-height:300px;}


   .lis-itim { width:46%; margin:2%;}
   .lis-itim .time { font-size:16px; color:#4899a2; padding: 10px 0; text-align:center; border-bottom:1px #d7d7d7 solid; display:block; }
   .lis-itim h4 a { color:#535353; font-size:16px; padding:10px 5px; line-height:1.4em; display:block; height:auto; overflow:hidden;}

   .lis-itim02 { margin:0 0 1% 0px;}
   .lis-itim02 .info .content-box  { height:auto;}



   /* message */
   .message-box { padding:10px; }

   /*  page  */
   .page-title { background-size: cover; background-position: left center; margin: 0; padding-top: 20px;} 
   .page-title h3 { padding:10px 45px;}
   .left-img-box { margin: -10px -10px 0 -10px;}
   .left-menu-title { margin:0 -10px; border-radius: 12px 12px 0 0;}


   /*  left-menu  */
   .left-menu { margin: 0 -10px 30px -10px; border-bottom:3px #CCCCCC solid;  }
   .m-left-menu { display:block; width:100%; background:#5dc2cc; color:#ffffff; text-align:center; margin-bottom:10px; line-height:30px; border:0; padding:10px; font-family:Microsoft JhengHei; font-size:16px; }

   /* i-recommend */ 
   .i-recommend .item { width:100%; margin:0 0 10px 0; display: block;}
   .i-recommend .item .photo { width:100%;}
   .i-recommend .item .info { height:auto; padding:15px 15px 25px 15px; }

   /* i-video */
   .i-video { margin:0 0 20px 0%;  padding:5px;}
   .i-video .item { width:100%; float:none;}
   .i-video .item .i-video-media { width:100%; height:180px; }
   .i-video .item h3 { font-size:16px; text-align:center; padding:10px 10px; margin:0;}
   .i-video .item h3 a { height:auto; overflow: inherit;  }

   /* i-community */
   .i-community { margin:0; height:auto;  padding:5px; }
   .i-community .search-code {width:100%; background:url(../images/search-code-m.jpg) #b2b06f no-repeat center bottom; background-size: contain; margin:0 0 10px 0; height:auto; float:none; height:400px; overflow:hidden; }
   .i-community .ig { width:100%; margin:0 0 10px 0; height:auto; float:none;} 

   /* activity */
   .activity ul li { width:50%;}
   .activity ul li a { height:120px; }
   .activity ul li h3 { height:6em; }

   /* index-highlight */
   .index-highlights ul li {width:50%; height:120px;}

   /* product detaile */
   .pro-detail-box { padding-left:0px;}
   .product-cont {  padding: 10px 0;}
   .product-box { display:block; height:auto; }

   .product-photo { height:auto; padding-right:0;}
   .product-info .cart { position: relative; margin-top:10px;}
   .product-info .cart a { padding:0 10px; }
   .qtyInputBox input { width:50px;}
   .product-lis li .quantity-num { width:110px;}
   .product-info .price { text-align:center; position:relative;  bottom:0; padding:15px 0; font-size:30px;}

   .product-info .price .normal {font-size: 20px;}
   .product-info .price .normal span { padding-top:0px;}
   .product-info .price .special { width:100%; float:none; text-align: center; }
   .product-info .price .special span { font-size:36px; font-family:BebasNeue; padding-left:5px; display: inline-block; line-height:48px; }

   .product-title { padding:10px 0 20px 0;}


   /* login */
      ul.tabs li {  font-size:12px;}
      .page-box .login-bg { background: rgba(227, 227, 225, 0.8);}

   /* footer */
   footer { position: relative; bottom: inherit; left: auto;}
   footer .bg { display:block;}
   .foot-info > div { width: 100%; flex: none;}
   footer .bg .foot-info > div { display:block; padding:0px; margin: 0 0 20px 0;}

   /*  page  */
   .page-box { margin: 0px 0 0 0px;}
   .page-box .content-box { min-height:300px; padding: 10px 10px 30px 10px;}

   /* cart */

   .cart-table ul li {position:relative;}
   .cart-table ul li .photo {flex: initial;width: 80px; height: auto;}
   .cart-table ul li .name, 
   .cart-table ul li .quantity, 
   .cart-table ul li .price,
   .cart-table ul li .subtotal
   {justify-content: flex-start; }
   .cart-table ul li .unit { padding-top: 0; display: inline-block;}
   .cart-table ul li.th-lis { display:none;}
   .cart-table ul li .del { position:absolute; left:0; bottom:15px; 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 { display: inline-block; color:#999; padding-right:5px;}
   .cart-table ul li .quantity {flex: initial;width: 30px;justify-content: center;}
   .cart-table ul li .space {  text-align: center; padding:5px 0; }
   .delivery-member-info { display:block;}
   .delivery-member-info span { display:block; width:100%; margin:0;}
   .delivery-member-info input { width:100%; }
   .delivery-member-info input.checkbox { width:auto;}

   /* store */
   .store-itim .photo { float:none; width:100%;}
   .store-itim .info { margin:10px 0 0 0; float:none; width:100%;}
   .store-itim .info .left { height:auto; width:100%; float:none;}
   .store-itim .info p { height:auto;}
   .store-itim .info .right { height:150px; width:100%; float:none; border:5px #f7f3f1 solid;}


   /*  content  內文  */
   .img-left { padding-right:0px;}
   .img-right { padding-left:0px;}
   .font-title-02 {  padding-left:0; }


   /*  about  內文  */
   .about-pro { text-align: center; float:none;}



   /* i-community */
   .i-community { margin:0; height:auto;  }
   .i-community .banner-area { width:100%; margin:0 0 10px 0; height:auto; float:none; }
   .i-community .facebook {width:100%; margin:0 0 10px 0; height:auto; float:none; height:450px; }
   .i-community .ig {width:100%; margin:0 0 10px 0; height:auto; float:none; }

   .multiple-items { padding:0px; width:80%;}

   /* contect*/
   .contact-info {  padding:10px 10px; margin-bottom:20px; height:auto;}
   .contact-info .left-box { float:none; width:100%; height:auto; padding-left:0; }
   .contact-info .right-box { float:none; width:100%; height:auto; }
   .contact-map { max-height:200px;} 



   /* form */
   .form .form-lis .title { width:90px; padding:0 5px 0 0; line-height: 30px;}
   .member-form .form-lis { display:block; padding:5px 0;}
   .member-form .form-lis .title { background: #c4b4aa; color:#ffffff; width:100%; line-height:25px; text-align:left; border-left:0;}
   .member-form .form-lis .data { width:100%;}



   /* 框架 */
   .col-box { margin:0; flex-direction: column-reverse;}
   .col-box img { max-width:100%; width:auto; height:auto;}
   .col-1,
   .col-2,
   .col-3,
   .col-4,
   .col-5,
   .col-6,
   .col-7,
   .col-8,
   .col-9,
   .col-10,
   .col-11,
   .col-12 { width:100%;margin:0;}

   .classBox{padding:0 0 20px 0;}

   
   .index-great span { display: block; margin: 10px; padding: 10px; }

	.m_classLink {display:block; position:relative; background-color:#eeeeee; border:1px solid #d1d1d1;}
	.m_classLink a.main{display:block; background:none; font-size:16px; font-family:"Microsoft JhengHei", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
	.m_classLink a.main i{display:block; font-size:16px; background:#afafaf; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
	.m_classLink ul {display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #d1d1d1; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box;}
	.m_classLink ul li{margin:0; padding:0;}
	.m_classLink ul li a{display:block; padding:8px; border-top:1px solid #d1d1d1; font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:16px; color:#222;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background:#efeded;}
	.m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none; width:calc(100% - 20px); background:#FFF; border:1px solid #d1d1d1; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}

    
    /*  sticky icon  */
    .float-icon{
        position: sticky;
        bottom: 0;
        z-index: 950;
        font-size: 24px;
        display: flex;
        background: #2193b6;
        padding: 5px 10px;
        justify-content: space-between;
        width: 100%;
    }
    
    .float-icon a{
        margin-bottom: 0;
    }

}


@media screen and (max-width: 480px) {
    .index-products .title{
        margin-bottom: 40px;
    }
    
    .index-products .slogan span{
        bottom: 0;
        font-size: 14px;
    }
        
    .index-products{
        padding: 40px 0;
    }
    
    .index-products .title .first{
        font-size: 60px;
    }
    
    .index-products .title .last span{
        font-size: 18px;
    }
    
    .index-products .title .last{
        font-size: 30px;
    }
    
    .index-products .slogan img{
        height: 60px;
    }
    
    
   header .logo { max-width: 240px; }

   body { padding-top: 60px; }
   .wallpeper { padding: 0; }

   .lis-itim02 { display: block; margin-bottom: 30px;}
   .lis-itim02 .photo { width: 100%; max-width: none; margin: 0 0 10px 0;   }
   .lis-itim02 h4 a { padding: 0 0 0 20px;}
   .lis-itim02 .info .content-box { overflow: inherit; max-height: none;}

   footer .bg .foot-info { display: block;}
   footer .bg .foot-info > div.social-icon { width: 100%;}
   .company-info > div { font-size: 14px; }
   .foot-logo { margin: 0 auto 20px auto;}
   footer .bg .foot-info > div { width: 100%; max-width: 100%; }

   .form .form-lis .data,
   .form.member .form-lis input.data { max-width: 100%; width: 100%; flex: none; padding: 10px 0; }

   .float-icon { font-size: 20px; right: 5px; }
   .float-icon a { width: 36px; height: 36px;}

   .pop-body { width: 90%; }
   .demand-list { justify-content: center; }
   .demand-list .pro-name { width: 100%; flex: none;  justify-content: center; }
   .demand-list .demand-potal { text-align: center; padding: 15px 0; }

   .pop .btn-close { top: 5px; right: 5px; width: 36px; height: 36px; font-size: 36px; }

   .i-pro-info-lis .list .info { word-break: break-all; padding-left: 1em; }

   .product-applications .slogan span { padding:0 10px 10px 10px; position: relative; left: auto; bottom: auto; line-height: 1.6em; }
   .product-applications .product-applications-list .list { width: calc(50% - 30px); }

   .index-video .cont-box .title { margin-right: 20px; }
   .index-video .cont-box .title .video-text { font-size: 60px; left: -100%; top: 36%; }

   
      
}

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

   .product-info .cart a.btn-cart { margin-top: 10px; width: 180px; padding: 8px 10px;}
   .pop-body { width: 96%; }

   .index-prodocut .i-pro-btn a.i-pro-btn-addcart{ width: 100%; flex: none; margin: 0 0 30px 0;}
   .index-prodocut .i-pro-btn a.i-pro-btn-buy { width: 100%; flex: none; margin: 0 0 10px 0;}

   .index-steps .title span.back { font-size: 80px; }

}


@media screen and (max-height: 920px) {
/*   .pop { padding-top: 40px; }*/
   .pop-cont { height: auto; max-height: calc(100% - 50px);}
}