@media(max-width:767px) {

    .header-inner {

        padding: 8px 25px 8px 22px;

        flex-wrap: wrap;

        transition: .3s;

    }

    .layout-page .header-main,.fadeimg  .header-main {

        top: 12px;;

    }

    #logo img {

        max-width: 147px;

    }

    .header-main .container {

        padding: 0 10px;

    }

    .icon-main-menu {

        display: none;

    }

    .menu-open .header-main .main-menu .nav {

        flex-direction: column;

    }

    .menu-open .header-main .main-menu .nav>li {

        width: 100%;

        margin: 0;

        padding: 0 27px;

    }

    .header-main .main-menu .nav-item a {

        width: 100%;

        height: 65px;

        justify-content: center;

        align-items: flex-start;

        font-size: 1.8rem;

        line-height: 1.75;

        letter-spacing: 0.1em;

        padding-left: 25px;

        position: relative;

    }

    body.menu-open header:before {

        display: none;

    }

    a.menu-btn {

        height: 19px;

        width: 25px;

        box-shadow: unset;

        margin: 0 0 0 auto;

        position: relative;

    }

    a.menu-btn span {

        width: 100%;

        top: 0;

        background: linear-gradient(90deg, rgba(39,172,216,1) 0%, rgba(131,194,79,1) 100%);

    }

    a.menu-btn span:nth-child(2) {

        top: 9px;

    }

    a.menu-btn span:nth-child(3) {

        top: 18px;

    }

    a.menu-btn.open span:nth-child(3) {

        left: 4px;

    }

    .nav-main .nav {

        flex-direction: column;

    }

    

    .nav-main .nav>li {

        width: 100%;

    }

    

    .nav-main .nav>li>a:before {

        display: none;

    }

    

    .nav-main .nav>li.active>a, .nav-main .nav>li>a:hover {

        color: #000;

    }

    

    .nav-main .nav>li a {

        padding: 19px 0;

        text-align: center;

        display: block;

        border-top: 1px solid #D1D1D1;

    }

    

    .nav-main {

        display: block !important;

        order: 1;

        width: calc(100% + 47px);

        margin: 0 -25px 0 -22px;

        height: 0;

        transition: .3s;

        opacity: 0;

        pointer-events: none;

    }

    

    .menu-open .nav-main {

        height: 100%;

        opacity: 1;

        pointer-events: auto;

        margin-top: 6px;

    }

    

    .menu-open .header-inner {

        border-radius: 15px;

        padding-bottom: 0;

    }

    

    .menu-open .header-inner:before, .menu-open .header-inner:after {

        border-radius: 15px;

    }

    .bth-inquiry {

        width: 100%;

        padding: 23px 25px;

        background: #FFF3E2;

        border-radius: 0 0 15px 15px;

    }

    .box-slide-home .bg-home-slide {

        height: 432px;

    }

    .text-banner {

        font-size: 2.5rem;

        margin: 0 0 45px 35px;

    }

    

    .banner-home .container {

        align-items: flex-end;

    }

    

    .text-banner small:before {

        height: 32px;

        left: 8px;

        width: 221px;

    }

    

    .text-banner small.two:before {

        width: 161px;

    }

    

    .banner-home:before {

        left: auto;

        right: 16px;

        transform: none;

        background-image: url(../images/index/img-home-banner-sm.png);

        width: 104px;

        height: 82px;

        bottom: 33px;

    }

    

    ul.slick-dots {

        padding: 87px 0 0;

    }

    

    .text-banner:before {

        width: 313px;

        height: 196px;

        /* background-image: url(../images/index/bg-text-banner-sm.png); */

        background-image: unset;

        background-color: #fff;

        opacity: 0.55;

        filter: blur(8px);

        left: calc(50% - 75px);

        top: calc(50% - 17px);



    }
    
    .onlineshop {
        position: relative;
        top: 0;
        left: 0;
		        margin-top: 45px;
		        width: unset;
    }
	
.onlineshop a img{
  box-shadow: 0px 0px 10px 0px rgba(142, 101, 101, 0.5);
	display: block;
	        margin: 0 auto;
	        width: 85%;
}
    .box-delicious {

        flex-direction: column-reverse;

        align-items: unset;

    }

    

    .box-delicious .right {

        height: 230px;

        width: 100%;

        margin: 0 0 10px;

    }

    

    .box-delicious .right:before {

        height: 230px;

        width: 100%;

        left: 0;

    }

    

    .box-delicious .left {

        margin: 0;

    }

    

    .delicious .container {

        padding: 0 12px;

    }

    

    .box-delicious .title {

        font-size: 2rem;

        padding: 7px 0 0 20px;

        display: inline-block;

    }

    .box-delicious .title:before, .box-delicious .title:after {

        width: 15px;

        height: 8px;

    }

    .box-delicious .title:before {

        left: 5px;

    }

    

    .box-delicious .title:after {

        right: 0;

        bottom: 32px;

    }

    

    .box-delicious .des {

        margin: 18px 0 17px;

        padding: 0 18px 0 8px;

        line-height: 2;

        font-size: 1.4rem;

    }

    

    .btn-play a {

        max-width: 274px;

        height: 52px;

        font-size: 1.8rem;

    }

    .product-intro {

        padding: 45px 0 117px;

    }

    

    .title-type-1 {

        font-size: 2rem;

        margin: 0 0 47px;

    }

    

    .title-type-1:before {

        width: 135px;

        height: 6px;

        bottom: -20px;

    }

    .box-product-intro .btn-play {

        margin-top: 20px;

    }

    .product-dev {

        margin: -63px 0 0;

        padding: 0 10px;

    }

    .box-oem li:nth-child(2) {

        margin: 0 0 19px;

    }

    .box-product-intro .row > div {

        padding: 0 4px;

        margin: 0 0 20px;

    }

    

    .box-product-intro .row {

        margin: 0 -5px;

        width: calc(100% + 10px);

    }

    

    .product-inner .thumb {

        margin: 0 0 10px;

    }

    

    .product-inner .title-thumb {

        font-size: 1.4rem;

    }

    

    .box-oem:before, .box-oem:after {

        display: none;

    }

    

    .box-oem {

        flex-direction: column-reverse;

    }

    

    .oem .container {

        padding: 0;

    }

    

    .box-oem .right {

        height: 142px;

        overflow: hidden;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0;

    }

    

    .box-oem .title {

        font-size: 5.5rem;

    }

    

    .box-oem .title .title-small {

        font-size: 1.8rem;

    }

    

    .box-oem .left {

        padding: 12px 0 10px 25px;

        position: relative;

    }

    

    .box-oem li {

        font-size: 1.9rem;

        padding: 0 0 0 55px;

        margin: 0 0 12px;

    }

    

    .box-oem li span {

        width: 37px;

        height: 40px;

        top: -5px;

        transform: none;

    }

    .box-oem .btn-play {

        position: static;

        margin: 4px auto 0;

    }

    .box-production-system {

        flex-direction: column;

        padding: 0;

    }

    

    .box-production-system .left {

        flex: unset;

        position: static;

        margin: 0 0 25px;

    }

    

    .production-system .container {

        padding: 0 11px;

    }

    

    .box-production-system .box-delicious .title:before {

        left: 0;

    }

    .production-system:after {

        display: none;

    }

    .box-production-system .box-delicious .des {

        margin: 10px 0 15px;

    }

    .production-system {

        padding-bottom: 35px;

    }

    .map-home {

        flex-direction: column;

    }

    

    .map-home .left {

        width: 100%;

        height: 212px;

        overflow: hidden;

    }

    

    .map-home .left:before {

        height: 100%;

    }

    

    .map-home iframe {

        height: 234px;

    }

    .delicious:before {

        width: 47px;

        height: 343px;

        background: url(../images/index/icon-sec-2-sm.png);

        top: auto;

        bottom: 122px;

        left: calc(50% + 78px);

    }

    .page-banner {

        height: 200px;

        background-image: url(../images/company/banner-company-sm.png);

    }

    .title-page-banner {

        padding: 0 0 0 13px;

        margin: 0 0 -10px;

    }



    .page-banner:before {

        width: calc(100vw - 22px);

        height: 95px;

        bottom: -47px;

    }

    

    .title-page-banner span {

        font-size: 2.3rem;

        margin: 0 25px 0 0;

    }

    

    .title-page-banner small {

        font-size: 1.1rem;

    }

    .breadcrumb {

        display: none;

    }

    ul.list-anchor {

        flex-wrap: wrap;

        justify-content: center;

        margin-top: 63px;

        column-gap: unset;

    }

    .page-system ul.list-anchor {

        margin-top: 83px;

    }

    ul.list-anchor li {

        width: 50%;

        margin: 0 0 6px;

        padding: 0 3px;

    }

    ul.list-anchor li a {

        width: 100%;

        text-align: left;

    }

    #page-anchor .container {

        padding: 0 3px;

    }

    .title-type-2 {

        padding-bottom: 0;

        font-size: 2.1rem;

        height: 66px;

    }

    .banner-coporate:before {

        width: 206px;

        height: 184px;

        right: 5px;

        top: -318px;

        pointer-events: none;

    }

    .greetings .author {

        padding: 30px 15px 0 0;

    }

    .greetings .author span {

        font-size: 1rem;

    }

    .greetings .author small {

        font-size: 2.4rem;

    }

    .greetings .container, .coporate .container, .main-customer .container {

        padding: 0 12px;

    }

    .banner-coporate {

        height: 138px;

        background-position: right;

        background-repeat: no-repeat;

        background-color: #FFE7D7;

    }

    .text-banner-corporate {

        width: 174px;

        height: 178px;

        left: calc(50% - 96px);

    }

    .banner-coporate:after, .history-inner:before {

        display: none;

    }

    .greetings .container {

        padding: 0 12px;

    }

    

    .coporate .container {

        padding: 0 12px;

    }

    .coporate {

        padding: 175px 0 0;

    }

    .box-coporate {

        flex-direction: column;

    }

    

    .box-coporate .left {

        flex: unset;

        font-size: 1.6rem;

        text-align: left;

        padding: 0 0 7px;

    }

    

    .box-coporate li {

        font-size: 1.4rem;

        padding: 10px 0 10px 21px;

        line-height: 1.35;

    }

    

    .box-coporate li:before {

        width: 13px;

        height: 13px;

        top: 14px;

    }

    .com-profile {

        padding: 50px 0 0;

    }



    .box-table-about > div {

        padding: 13px 0 13px 0px;

        font-size: 1.4rem;

    }

    

    .box-table-about-left {

        flex: 0 0 75px;

        margin: 0 10px 0 0;

    }

    .box-table-about:last-child .box-table-about-left {

        height: 100px;

    }

    .banner-com-profile:before {

        height: 255px;

        width: calc(100% + 30px);

        position: static;

        margin: 40px 0 0 -15px;

    }

    

    .history-page {

        padding-top: 75px;

    }

    

    .history-inner {

        padding: 37px 0;

    }

    

    .history-box {

        padding: 15px 20px;

    }

    

    .history-table-inner .title {

        font-size: 1.4rem;

        flex: 0 0 51px;

        margin: 0 28px 0 0;

    }

    

    .history-table-inner {

        font-size: 1.4rem;

        line-height: 1.4;

    }

    

    .history-inner .container {

        padding: 0 20px;

    }

    

    .list-img-his .row {

        margin: 0 -4px;

        width: calc(100% + 8px);

    }

    

    .list-img-his .row > div {

        padding: 4px;

    }

    .main-customer {

        background: unset;

    }

    

    .main-customer ul li {

        width: 100%;

    }

    

    .main-customer ul {

        padding: 45px 37px 26px;

        background: #FFE9DA;

        margin: 12px -12px 0;

    }

    

    .main-customer .container {

        padding: 0 12px;

    }

    .map-home .right {

        width: 100vw;

    }

    

    .main-customer ul li a {

        font-size: 1.4rem;

        padding: 0 0 0 25px;

    }

    

    .main-customer ul li a:before {

        top: 5px;

        width: 12px;

        height: 12px;

    }

    .footer-wrap:before {

        display: none;

    }

    

    .footer-content .left {

        flex: unset;

        text-align: center;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        padding: 50px 0 0;

    }

    

    .footer-content {

        flex-direction: column;

    }

    

    .logo_footer {

        width: 100%;

        max-width: 220px;

    }

    

    .footer-content .text-logo {

        margin: 10px 0 0;

    }

    

    .footer-content .box-btn-play {

        max-width: 273px;

        width: 100%;

    }

    .footer-content ul {

        display: none;

    }

    .layput-page .footer-wrap, .footer-wrap {

        height: auto;

    }

    .footer-copyright {

        margin: 0 auto;

        background: #00C6FA;

        height: 70px;

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        text-align: center;

    }

    

    .footer-wrap .container {

        padding: 0;

    }

    .layput-page .footer-content .right, .footer-content .right {

        padding: 110px 0 0;

    }

    #go-top.show {

        bottom: 10px;

    }

    #go-top {

        bottom: 0;

        right: 10px;

    }

    .fadeimg .banner-home:before {

        bottom: 33px;

    }

    .layput-page .footer-copyright {

        bottom: 0;

    }

    .btn-play{

        /* background-color: #74CC33; */

    }

    .cf-er td{

        height: 30px;

    }

    .greetings .author small{

        font-size: 0;

    }

    .page-contact .page-banner{

        background-position: right bottom;

    }

    .page-product .page-banner{

        background-position: right -15px center;

        background-image: url(../images/product/bg-page-prodcut-sm.png);

    }

}