/*------------------------------------------------------
    product : #17091103 (Ying Template 1.0)
    author : Jason
    date : 2017-9-20
------------------------------------------------------*/

@media all and (max-width: 768px)  {

    /*------------------------------------------------------
        components
    ------------------------------------------------------*/


    /*
        boxes
    */
    .wrapper{ overflow: hidden; }
    .box-main{ width: 100%; }


    /*
        b2t
    */
    .b2t{ width: 36px; height: 36px; line-height: 36px; }

    /*
        margins and paddings helper
    */
    .mt-80{ margin-top: 40px; }

    /*
        titles
    */
    .g-title-lg-xs{ margin:0 15px; }

    .g-title-3in1 .box-main{ display: block; text-align: center; }
    .g-title-3in1 h2{ font-size: 3rem; }
    .g-title-3in1 .words{ margin: 15px 0; font-size: 1.6rem; }

    /*
        header
    */
    .header{ position: fixed; top: 0; left: 0; width: 100%; background: #FFF; z-index: 999; }


    /*
        brand-logo
    */
    .brand-logo{ padding: 1rem 0; position: absolute; top: 0; left: 15px; right: 60px;}
    .brand-logo a{ height: auto; }
    .brand-logo img{ max-height: 24px; margin: 0; }

    /*
        top-navbar
    */
    .top-navbar{ display: none; }


    /*
        topbar-social
    */
    .topbar-social{ display: none; }


    /*
        menu
    */
    .menu{ display: none; }

    /*
        slicknav_menu
    */
    .slicknav_menu{ display: block; background: none; padding: 0; }
    .slicknav_btn{ float: right; margin: 10px; }
    .slicknav_btn.slicknav_open{ background: #e25e90; }
    .slicknav_nav{ background: #e25e90; }
    .slicknav_nav .slicknav_arrow{ float: right; }
    .slicknav_nav .slicknav_row:hover , .slicknav_nav a:hover{ background: #dac390;  color: #FFF; border-radius: 0; }
    .slicknav_nav .slicknav_row, .slicknav_nav a{ margin: 0; padding: 10px; }
    .slicknav_nav ul{ margin: 0; }
    .slicknav_nav ul a{ padding-left: 30px;}


    /*
        footer
    */
    .footer .row{ margin: 0; }

    .footer-copyright{ text-align: center; }


    /*
        main-slides
    */
    .main-slides{ height: 360px;}
    .main-slides .slide{ height: 360px; }
    .main-slides .bg{ display: block; left: 0; top: 0; position: absolute; width: 100%; height: 100%; background: #FFF; opacity: .6; }
    .main-slides .caption{ position: relative; height: 260px; margin-top: 120px; max-width: 100%; padding: 0 30px; text-align: center; }
    .main-slides .caption h2{ font-size: 2rem; font-weight:700;  }
    .main-slides .caption .con{ font-size: 1.6rem; color: #404040; }
    .main-slides .caption .btn-more{ padding: 10px 40px; font-size: 1.6rem; }

    .main-slides .bx-controls-direction{ display: none; }

    .main-slides .bx-pager{ display: block; bottom: 15px; }
    .main-slides .bx-pager.bx-default-pager a{ background: #e25e90; }
    .main-slides .bx-pager.bx-default-pager a.active, .main-slides .bx-pager.bx-default-pager a:focus, .main-slides .bx-pager.bx-default-pager a:hover{ background: #dac390; }


    .slide-box {
        width: 100%;
    }
    .slide-box .caption{ height: 260px;  max-width: 100%; padding-top: 100px; padding-left: 5%; padding-right: 5%; }
    .slide-box .caption h2{ color: #FFF; font-size: 2rem; }
    .slide-box .caption .con{ font-size: 1.6rem; }
    .slide-box .caption .btn-more{ padding: 10px 40px; font-size: 1.6rem; }
    .carousel-inner .item {
        width: 100%;
        height: 360px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }


    /*
        list-service
    */
    .list-service{ padding: 0 15px; }
    .list-service .item{ margin-top: 20px; }
    .list-service figure{ margin: 0 auto -30px auto; width: 60px; height: 60px; }
    .list-service figure img{ margin-top: -20px; width: 40px; margin-left: -20px; }
    .list-service .main{ padding: 60px 15px 15px 15px;}


    /*
        section-double
    */
    .section-double{ padding: 40px 0; }
    .section-double .unit-left{ float: none; width: 100%; }
    .section-double .unit-right{ float: none; width: 100%; padding: 0 15px; }


    /*
        box-about
    */
    .box-about{ padding: 0 15px; }
    .box-about figure{ text-align: center; float: none; }
    .box-about figure img{ display: inline; }
    .box-about .main { margin:20px 0 0 0; text-align: center; }


    /*
        list-product
    */
    .list-product{ padding: 0 15px; }
    .list-product figure{ width: 180px; }
    .list-product .btn-area{ text-align: center; }


    /*
        list-news
    */
    .list-news{ padding: 0 15px; }


    /*
        list-category
    */
    .product-category .btn-area{ text-align: center; }


    /*
        box-contact
    */
    .box-contact{ padding: 60px 15px; }
    .box-contact .main>div{ margin-top: 25px; }


    /*
        box-case
    */
    .box-case{ padding: 80px 15px; }
    .box-case .item figure{ max-width: 100%; margin: 0 auto; }
    .box-case .item .con{ opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; align-items: center; display: flex;}




    /*------------------------------------------------------
        pages
    ------------------------------------------------------*/


    /*
        page-404
    */
    .page-404 .logo-area{ padding: 3rem 0; }
    .page-404 h1{ font-size: 10rem; }
    .page-404 h6{ font-size: 3rem; margin-top: 30px; }
    .page-404 .con{ font-size: 1.6rem; }
    .page-404 .btn-area{ margin: 30px 0; }
    .page-404 .btn-area .btn{ padding: 10px 40px; font-size: 1.8rem; }
    .page-404 .footer-area{ font-size: 1.4rem; }


    /*
        subpage-top
    */
    .subpage-top h2{ padding:80px 0 40px 0; font-size: 4rem; }


    /*
        single-post
    */
    .single-post{ padding: 40px 15px; }


    /*
        box-contact-lg
    */
    .box-contact-lg{ padding: 40px 15px; }
    .box-contact-lg .contact-words{ margin-top: 40px; }


    /*
        contact-form
    */
    .contact-form{ margin-top: 40px; }
    .contact-form .btn{ width: 100%; }


    /*
        tabs
    */
    .tab-content{ margin-left:15px; margin-right:15px; }


    /*
        list-news-lg
    */
    .list-news-lg{ padding: 0 15px; }


    /*
        pagination
    */
    .pagination{ padding: 0 15px; }



    /*
        product-detail
    */
    .product-detail figure{ float: none; width: 280px; height: 380px; margin: 0 auto; }
    .product-detail .main{ margin: 30px 0 0 0; }
    .product-detail .con{ padding: 0 15px; }


}