@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

@media(max-width:767px) {

    .hide-for-small {

        display: none !important;

    }

}

a{

    transition: all 0.5s;

}

@media(min-width:768px) {

    .show-for-small {

        display: none !important;

    }

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

        transition: opacity 0.5s;

        opacity: 1;

    }

    .header-main .nav-main .nav-item a img.hover {

        opacity: 0;

    }

    .header-main .nav-main .nav-item:hover a img.hover {

        opacity: 1;

    }

    .header-main .nav-main .nav-item:hover a img.default {

        opacity: 0;

    }

}



html {

    overflow-y: scroll;

    font-size: 62.5%;

}

select,input{

    

    font-family: 'Noto Sans JP', sans-serif;

}

body {

    font-family: 'Noto Sans JP', sans-serif;

    font-size: 1.6rem;

    -webkit-text-size-adjust: none;

    color: #333;

    overflow: hidden;

    font-weight: 400;

    font-style: normal;

}



body:not(.home) {

    line-height: 1.75;

}



a.btn {

    transition: all 0.5s;

}



.ff-maru {

    font-family: 'Zen Maru Gothic', sans-serif;

}



#go-top {

    position: fixed;

    bottom: 50px;

    right: 65px;

    opacity: 0;

    transition: all 300ms;

    z-index: 6;

    width: 72px;

    height: 117px;

    background-image: url(../images/index/page-top.svg);

    background-size: 100% 100%;

    cursor: pointer;

}

#go-top.show:hover {

    opacity: 0.6;

}



#go-top.show {

    opacity: 1;

    bottom: 100px;

}



#go-top a {

    display: flex;

}



#go-top a span {

    color: #000;

    position: absolute;

    bottom: -20px;

}



/* banner */



.box-slide-home img {

    width: 100%;

}



@keyframes zoomOut {

    0% {

        transform: scale(1.15);

    }

    100% {

        transform: scale(1);

        /* 拡大率 */

    }

}



.add-animation {

    animation: zoomOut 10s linear 0s normal both;

}



/*ANIMATION*/



.anim {

    opacity: 0;

}



.anim.fade {

    opacity: 1;

}



.anim.fade.is-animated {

    opacity: 1;

    animation-name: fade;

    animation-duration: 2s;

}



.anim.faderight.is-animated {

    opacity: 1;

    animation-name: faderight;

    animation-duration: 2s;

}



.anim.fade.is-animated {

    opacity: 1;

    animation-name: fade;

    animation-duration: 2s;

}



.anim.fadeleft.is-animated {

    opacity: 1;

    animation-name: fadeleft;

    animation-duration: 2s;

}



.anim.fadeup.is-animated {

    opacity: 1;

    animation-name: fadeup;

    animation-duration: 0.5s;

}



@keyframes fade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes faderight {

    from {

        opacity: 0;

        transform: translateX(-150px);

    }

    to {

        opacity: 1;

        transform: translateX(0px);

    }

}



@keyframes fadeup {

    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0px);

    }

}



@keyframes fadeleft {

    from {

        opacity: 0;

        transform: translateX(100px);

    }

    to {

        opacity: 1;

        transform: translateX(0px);

    }

}



#logo img {

    width: 206px;

}



.header-main {

    left: 50%;

    position: absolute;

    transform: translateX(-50%);

    top: -90px;

    opacity: 0;

    transition: 1s;

    width: 100%;

    z-index: 9;

}

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

    top: 35px;

    opacity: 1;

}





a {

    color: #333;

}



.top-menu ul li {

    margin-left: 20px;

    margin-right: 0;

}



a.btn.btn-top-menu {

    font-size: 1.2rem;

    line-height: 1.75;

    padding: 3.5px 18px;

    border-radius: 50px;

}



a.menu-btn span {

    display: block;

    position: absolute;

    height: 2px;

    left: 50%;

    transform: translateX(-50%);

    transition: all 0.5s;

    border-radius: 1px;

}



a.menu-btn.open span {

    transform: rotate(45deg);

    transform-origin: 0 0;

    left: 5px;

}



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

    display: none;

}



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

    transform: rotate(-45deg);

}



a:hover:not(.btn) {

    opacity: 0.6;

}



/* header */



.logo-left .logo {

    margin-right: 22px;

}



.header-inner {

    position: relative;

    background-color: #fff;

    border-radius: 50px;

    z-index: 1;

    padding: 14px 15px 14px 33px;

    box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);

}



.nav-main .nav>li>a {

    font-size: 16px;

    font-weight: 700;

    position: relative;

    z-index: 1;

    transition: .3s;

}



.header-inner:before {

    content: "";

    position: absolute;

    z-index: -1;

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

    top: -1px;

    left: -1px;

    bottom: -1px;

    right: -1px;

    border-radius: 40px;

    transition: .3s;

}



.header-inner:after {

    content: "";

    background: #fff;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: -1;

    border-radius: 40px;

    transition: .3s;

}



.nav-main .nav>li {

    margin: 0;

}



.nav-main .nav {

    column-gap: 43px;

}



.bth-inquiry a {

    background: #EE7A00;

    color: #fff;

    display: block;

    padding: 13px 15px 17px;

    border-radius: 30px;

    font-weight: 700;

    min-width: 164px;

    text-align: center;

    transition: .3s;

}

.bth-inquiry a:hover {

    background: #27ACD8;

}



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

    content: "";

    position: absolute;

    background: #6AC437;

    top: -15px;

    right: -20px;

    bottom: -15px;

    left: -20px;

    z-index: -1;

    border-radius: 6px;

    opacity: 0;

    pointer-events: none;

    transition: .3s;

}



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

    color: #fff;

    opacity: 1;

}



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

    opacity: 1;

    pointer-events: auto;

}





/* body */



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

    background-image: url(../images/index/banner-home-1.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 722px;

    background-position: center;

}



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

    background-image: url(../images/index/banner-home-2.jpg);

}



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

    background-image: url(../images/index/banner-home-3.jpg);

}



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

    background-image: url(../images/index/banner-home-4.jpg);

}



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

    background-image: url(../images/index/banner-home-5.jpg);

}



.slick-arrow img {

    width: 15px;

}



ul.slick-dots button {

    transition: .3s;

    padding: 0;

    font-size: 0;

    width: 10px;

    height: 10px;

    background: #B1B1B1;

    border: 0;

    border-radius: 50%;

    position: relative;

    cursor: pointer;

}



ul.slick-dots {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px 0 0;

    position: relative;

    z-index: 1;

}



ul.slick-dots li {

    display: flex;

    margin: 0 10px;

}



.box-slide-home .slick-arrow {

    position: absolute;

    bottom: -9px;

    left: 50%;

    transform: translateX(-50%);

    padding: 0;

    background: transparent;

    border: 0;

    z-index: 2;

    cursor: pointer;

}



.box-slide-home .slick-arrow.next-arrow {

    left: calc(50% + 90px);

}



.box-slide-home .slick-arrow.prev-arrow {

    left: calc(50% - 90px);

}



ul.slick-dots li.slick-active button, ul.slick-dots li button:hover {

    background: #2AB8F1;

    box-shadow: 0 0 0 2.5px #fff;

}



ul.slick-dots button:before {

    content: "";

    width: 18px;

    height: 18px;

    background: #2AB8F1;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    z-index: -1;

    opacity: 0;

    transition: .3s;

}



ul.slick-dots li.slick-active button:before, ul.slick-dots li button:hover:before {

    opacity: 1;

}



.text-banner {

    max-width: 350px;

    width: 100%;

    margin: 0 0 0 auto;

    font-size: 37px;

    font-weight: 700;

    letter-spacing: 0.22em;

    line-height: 1.7;

    position: relative;

    opacity: 0;

    transition: 1s;

}

.fadeimg .text-banner {

    opacity: 1;

}

.banner-home {

    position: relative;

}



.banner-home:before {

    content: "";

    width: 255px;

    height: 183px;

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

    position: absolute;

    left: calc(50% + 430px);

    bottom: -90px;

    opacity: 0;

    transition: 1s;

    z-index: 2;

    transform: translateX(-50%);

}



.fadeimg .banner-home:before {

    bottom: 0;

    opacity: 1;

}





.banner-home .container {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.text-banner span.only {

    display: inline-block;

}



.text-banner small.two {

    display: inline-block;

}



small {

    font-size: inherit;

}



.text-banner span {

    display: block;

}



.text-banner small {

    position: relative;

    color: #fff;

    margin: 0 0 0 -18px;

}



.text-banner small:before {

    content: "";

    background: #6AC437;

    position: absolute;

    width: 329px;

    height: 46px;

    z-index: -1;

    left: 11px;

    top: calc(50% + 2px);

    transform: translateY(-50%);

}



.text-banner small.two:before {

    background: #2AB8F1;

    width: 238px;

}



.text-banner:before {

    content: "";

    width: 400px;

    height: 400px;

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

    position: absolute;

    left: calc(50% - 35px);

    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    z-index: -1;

    background-size: cover;

}

.onlineshop{
    position: absolute;
    top: 570px;
	    left: 77px;
	    width: 320px;
}

.onlineshop a img{
	border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(142, 101, 101, 0.5);
}
.onlineshop a:hover{
	opacity: 0.8;
}
.box-delicious {

    display: flex;

    align-items: center;

}



.box-delicious .left {

    max-width: 447px;

    margin: 0 73px 0 0;

}



.box-delicious .des {

    text-align: justify;

    line-height: 2.25;

    letter-spacing: -0.04em;

}



.box-delicious .title {

    line-height: 1.73;

    padding: 0 0 0 25px;

    letter-spacing: 0.08em;

    position: relative;

}



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

    content: "";

    width: 18px;

    height: 10px;

    position: absolute;

    left: -2px;

    top: 0;

    background: url(../images/index/quote-start.svg);

    background-size: 100% 100%;

}



.box-delicious .title:after {

    left: auto;

    right: 10px;

    top: auto;

    bottom: 40px;

    background: url(../images/index/quote-end.svg);

}



.box-delicious .right {

    height: 475px;

    position: relative;

}



.box-delicious .right:before {

    content: "";

    height: 475px;

    width: 50vw;

    position: absolute;

    background: url(../images/index/img-delicious.png);

    border-radius: 10px;

    background-size: cover;

    background-position: center;

}



.delicious {

    position: relative;

}



.delicious:before {

    content: "";

    width: 986px;

    height: 714px;

    position: absolute;

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

    left: calc(50% - 80px);

    transform: translateX(-50%);

    top: -50px;

    z-index: -1;



}



.btn-play {

    max-width: 312px;

    height: 60px;

    background: #6AC437 url(../images/index/play-circle.svg);

    border-radius: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    font-size: 1.9rem;

    color: #fff;

    font-weight: 700;

    position: relative;

    background-repeat: no-repeat;

    background-size: 35px 35px;

    background-position: right 10px center;

}



.btn-play:hover {

    background-color: #27ACD8;

}



.product-intro {

    background: #FFE9D9;

    padding-bottom: 190px;

}



.title-type-1 {

    font-size: 36px;

    font-weight: 700;

    text-align: center;

    margin: 0 0 84px;

    position: relative;

}



.title-type-1:before {

    content: "";

    width: 202px;

    height: 9px;

    background: url(../images/index/border-title.svg);

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    bottom: -35px;

    background-size: 100% 100%;

}



.box-product-intro img {

    border-radius: 10px;

}



.box-product-intro .row > div {

    padding: 0 8px;

    margin: 0 0 50px;

}



.product-inner .thumb {

    margin: 0 0 20px;

}



.product-inner .title-thumb {

    text-align: center;

    font-size: 1.9rem;

    font-weight: 700;

}



.box-product-intro .box-btn-play {

    position: relative;

    top: -10px;

}



.product-dev {

    display: flex;

    justify-content: center;

    margin: -110px 0 0;

}



.box-oem {

    display: flex;

    border-radius: 10px;

    z-index: 1;

    position: relative;

    background-color: #fff;

}

.box-oem img {

    border-radius: 0 9px 9px 0;

}

.box-oem .right {

    margin: 0 0 0 auto;

    position: relative;

}



.box-oem:before {

    content: "";

    background: #fff;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    z-index: -1;

    border-radius: 10px;

}



.box-oem:after {

    content: "";

    position: absolute;

    z-index: -2;

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

    top: -1px;

    left: -1px;

    bottom: -1px;

    right: -1px;

    border-radius: 10px;

}



.box-oem .left {

    padding: 12px 0 10px 35px;

}



.box-oem .title {

    font-size: 67px;

    font-weight: 700;

    display: flex;

    align-items: center;

    color: #27ACD8;

}



.box-oem .title .title-small {

    font-size: 22px;

    margin: 0 0 0 18px;

}



.box-oem ul {

    margin: 5px 0 0;

}



.box-oem li {

    padding: 0 0 0 65px;

    font-size: 23px;

    font-weight: 700;

    line-height: 1.4;

    position: relative;

    margin: 0 0 16px;

}



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

    margin: 0 0 28px;

}



.box-oem li span {

    position: absolute;

    left: 5px;

    top: 50%;

    transform: translateY(-50%);

    background: url(../images/index/border-number.svg);

    background-size: 100% 100%;

    width: 43px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #27ACD8;

}



.box-oem .right .box-btn-play {

    position: absolute;

    width: 100%;

    bottom: 42px;

    left: 0;

}



.production-system {

    padding-bottom: 220px;

    position: relative;

}



.production-system:before {

    content: "";

    width: 986px;

    height: 713px;

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

    position: absolute;

    left: calc(50% - 90px);

    transform: translateX(-50%);

    bottom: -10px;

    z-index: -1;

}



.box-production-system {

    display: flex;

    padding: 24px 0 0;

}



.box-production-system .box-delicious {

    display: block;

}



.box-production-system .left {

    flex: 0 0 480px;

    position: relative;

    left: -70px;

}



.box-production-system img {

    border-radius: 10px;

}



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

    line-height: 1.87;

    letter-spacing: 0;

    margin: 10px 0 40px;

}



.production-system:after {

    content: "";

    width: 100vw;

    height: 165px;

    background: #27acd8;

    position: absolute;

    bottom: 135px;

    left: 0;

    z-index: -1;

}



.map-home {

    display: flex;

}



.map-home .left {

    width: 50vw;

    position: relative;

}



.map-home .left:before {

    content: "";

    width: 100%;

    height: 425px;

    background: url(../images/index/img-map.png);

    position: absolute;

    left: 0;

    background-size: cover;

    background-position: center center;

}



.map-home iframe {

    display: block;

}



/* footer */



.footer-content {

    display: flex;

}



.footer-content .left {

    flex: 0 0 400px;

    padding: 75px 0 0;

}



.logo_footer {

    max-width: 310px;

}



.footer-content .text-logo {

    margin: 24px 0 0;

}



.footer-content .box-btn-play {

    margin: 30px 0 0;

}



.footer-content .box-btn-play a {

    margin: 0;

    color: #fff;

}



.footer-content .right {

    position: relative;

    width: 100%;

    padding: 140px 0 0;

    display: flex;

    flex-direction: column;

}



.footer-wrap:before {

    content: "";

    width: calc(50vw + 120px);

    height: 100%;

    background: #27acd8;

    position: absolute;

    right: 0;

    top: 0;

}



.footer-wrap {

    position: relative;

    height: 372px;

}



.footer-content ul {

    display: flex;

    column-gap: 45px;

    justify-content: flex-end;

}



.footer-content ul li a {

    color: #fff;

    font-weight: 700;

    position: relative;

}

.footer-content ul li a:before {

    content: "";

    width: 100%;

    height: 1px;

    background: #fff;

    position: absolute;

    left: 0;

    bottom: -1px;

    opacity: 0;

    transition: .3s;

}

.footer-content ul li a:hover:before {

    opacity: 1;

}



.footer-copyright {

    margin: auto 14px 0 auto;

}



/* company */



.page-banner {

    height: 324px;

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

    display: flex;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center; 

    position: relative;

}

.page-banner:before {

    content: "";

    width: calc(50vw - 40px);

    height: 336px;

    background: #24BAEB;

    position: absolute;

    left: 0;

    bottom: 0;

    border-radius: 0 200px 200px 0;

}

.title-page-banner {

    display: flex;

    align-items: center;

    padding: 0 0 85px;

    line-height: 1.11;

    color: #fff;

}



.title-page-banner span {

    font-size: 3.4rem;

    font-weight: 700;

    margin: 0 20px 0 0;

}



.page-banner .container {

    margin: 0 auto;

    display: flex;

    align-items: flex-end;

}



.title-page-banner small {

    font-weight: 700;

}



.bread {

    display: flex;

    justify-content: flex-end;

    margin: 25px 15px 0 0;

}



.bread ul {

    display: flex;

}



.bread li:first-child a {

    color: #27acd8;

    font-weight: 500;

}



.bread li a {

    font-weight: 300;

}



.bread li:not(:last-child):after {

    content: "";

    width: 7px;

    height: 12px;

    display: inline-block;

    margin: 0 12px;

    background-image: url(../images/company/arr-right-bread.svg);

    vertical-align: middle;

    background-size: 100% 100%;

}

ul.list-anchor {

    display: flex;

    align-items: center;

    width: 100%;

    margin-top: 50px;

    justify-content: center;

    column-gap: 32px;

}

ul.list-anchor li a {

    min-width: 174px;

    padding: 0 35px 0 35px;

    height: 38px;

    border-radius: 30px;

    background-color: #E4E4E4;

    background-image: url(../images/company/arr-down.svg);

    background-size: 12px 17px;

    background-repeat: no-repeat;

    background-position: center left 16px;

    font-size: 1.2rem;

    font-weight: 500;

    display: flex;

    align-items: center;

    line-height: 1.1;

    text-align: center;

    justify-content: center;

}



.title-type-2 {

    height: 78px;

    font-size: 30px;

    font-weight: 700;

    position: relative;

    padding: 0 0 10px 33px;

    display: flex;

    align-items: center;

}



.title-type-2:before {

    content: "";

    width: 5.38px;

    height: 100%;

    background-image: url(../images/company/border-title-02.svg);

    background-size: 100% 100%;

    position: absolute;

    left: 0;

    top: 0;

}



.greetings .author {

    display: flex;

    justify-content: flex-end;

    font-weight: 700;

    line-height: 1;

    align-items: center;

    padding: 20px 0 0 0;

}



.greetings .author span {

    font-size: 1.3rem;

}



.greetings .author small {

    width: 103px;

    height: 26px;

    background-image: url(../images/company/name.svg);

    background-size: 100% 100%;

    font-size: 0;

    margin: 0 0 0 15px;

}

.coporate {

    padding: 160px 0 0;

    position: relative;

}

.banner-coporate:before {

    content: "";

    width: 474px;

    height: 428px;

    background-image: url(../images/company/bg-corporate.png);

    background-size: 100% 100%;

    top: -428px;

    right: -2px;

    position: absolute;

    z-index: -1;

}

.banner-coporate:after {

    content: "";

    width: 310px;

    height: 309px;

    background-image: url(../images/company/bg-corporate-2.png);

    background-size: 100% 100%;

    position: absolute;

    bottom: -309px;

    z-index: -1;

    left: -55px;

}

.coporate .container{

    z-index: 1;

}

.banner-coporate {

    height: 455px;

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

    background-size: cover;

    position: relative;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 1;

}

.text-banner-corporate {

    background-image: url(../images/company/text-banner-corporate.svg);

    width: 472px;

    height: 484px;

    background-size: 100% 100%;

    position: absolute;

    top: 50%;

    transform: translate(-50%, -50%);

    left: calc(50% - 235px);

}

.color-banner-corporate {

    position: absolute;

    height: 100%;

    width: 472px;

    background: #FFE9DA;

    left: calc(50% - 425px);

    transform: translateX(-50%);

    z-index: -1;

}

.box-coporate {

    display: flex;

}



.box-coporate .left {

    flex: 0 0 190px;

    font-size: 29px;

    font-weight: 700;

    text-align: center;

    color: #27acd8;

    padding: 10px 0 0;

}



.box-coporate li {

    display: block;

    padding: 14px 0 14px 50px;

    font-size: 18px;

    font-weight: 500;

    border-bottom: 1px solid #A6A6A6;

    position: relative;

}



.box-coporate li:before {

    content: "";

    width: 21px;

    height: 21px;

    background: #27acd8;

    border-radius: 50%;

    position: absolute;

    left: 0;

    top: 20px;

}



.box-coporate .right {

    width: 100%;

}



.com-profile {

    padding: 160px 0 0;

}

.box-table-about > div {

    padding: 21px 0 21px 30px;

}

.box-table-about {

    display: flex;

    align-items: baseline;

    color: #000000;

    line-height: 1.75;

}



.box-table-about-left {

    flex: 0 0 120px;

    border-bottom: 1px solid #27acd8;

    margin: 0 18px 0 0;

    font-weight: 700;

}

.box-table-about-right {

    width: 100%;

    border-bottom: 1px solid #A6A6A6;

}

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

    height: 95px;

}

.banner-com-profile {

    position: relative;

}



.banner-com-profile:before {

    content: "";

    width: 50vw;

    height: 490px;

    background-image: url(../images/company/company-profile-img.png);

    position: absolute;

    display: block;

    background-size: cover;

    background-position: center center;

    margin: 21px 0 0;

}

.history-page{

    padding-top: 230px;

}

.history-inner {

    padding: 110px 0;

    position: relative;

    background-image: url(../images/company/bg-history.png);

    background-size: cover;

    background-position: center center;

}

.history-inner:before {

    content: "";

    width: 310px;

    height: 310px;

    background-image: url(../images/company/bg-company-profile.png);

    background-size: 100% 100%;

    top: -309px;

    right: -1px;

    position: absolute;

    z-index: 1;

}

.history-table-inner {

    display: flex;

    line-height: 1.5;

    margin: 0 0 15px;



}



.history-table-inner .title {

    font-size: 16px;

    font-weight: 700;

    color: #27acd8;

    margin: 0 22px 0 0;

}

.history-box {

    background: rgb(255 255 255 / 86%);

    padding: 47px 45px;

}



.list-img-his .row > div {

    padding: 8px;

}



.list-img-his .row {

    margin: 0 -8px;

    width: calc(100% + 16px);

    justify-content: center;

}



.list-img-his img {

    width: 100%;

}



.history-table {

    margin: 8px 0 0;

    font-size: 16px;

}

.main-customer {

    background: #FFE9DA;

}



.main-customer ul {

    display: flex;

    flex-wrap: wrap;

    margin-top: 50px;

}



.main-customer ul li {

    width: 25%;

    margin: 0 0 10px;

    font-size: 16px;

    position: relative;

    padding: 0 0 0 30px;

}



.main-customer ul li:before {

    content: "";

    width: 13px;

    height: 13px;

    background: #6AC437;

    position: absolute;

    left: 0;

    top: 8px;

}



.layput-page .footer-wrap {

    height: 411px;

}



.layput-page .footer-content .right {

    padding: 180px 0 0;

}



.layput-page .footer-copyright {

    position: relative;

    bottom: -60px;

}

.map-home iframe {

    width: 100%;

    height: 425px;

}

.map-home .right {

    width: 50vw;

}

.footer-content ul li a:hover {

    opacity: 1;

}

body .box-slide-home {

    opacity: 0;

}

body.fadeinbanner .box-slide-home {

    opacity: 1;

    transition: 1s;

}

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

    .bth-inquiry a{

        padding: 5px 5px;

        border-radius: 20px;

        min-width: 0;

        font-size: 12px;

    }

    .nav-main .nav>li>a{

        font-size: 12px;

    }

    .nav-main{

        padding-left: 20px;

        padding-right: 20px;

    }

    .logo-left .logo{

        width: 135px;

    

    }

}

.cf-er td{

    height: 90px;

}

.btn-play.btn-system:hover{

    background-color: #EE7A00;

}

input[type="submit"]{

    transition: all 0.5s;

}

input[type="submit"]:hover{

    opacity: 0.6;

}

.img-slide-product img{

    width: 100%;

    height: auto;

}

.product-dev  a{

    display: block;

    margin: auto;

    width: 100%;

    max-width: 784px;

}

.product-dev img{

    width: 100%;

}