/* basic */
.main {max-width: 1500px;}

/* color */
:root {
    --color: #81b36c;
}

/* btn */
.btn {border-radius: 5px;}
.shadow::after {transition-duration: .3s;}
.btn:hover,
.btn:hover.shadow::after {background-color: var(--orange);}


/* head */
.head {position: relative;z-index: 3;}
.head .main {display: flex;align-items: center;}
.head h1 {text-transform: uppercase;}
.head h1 i {width: 260px;margin-right: 10px;}
.head-cont {}

/* menu */
menu {flex: 1;}
menu x {}
menu-cont {}
menu-cont li a {}
menu-cont li > a {font-size: 16px;line-height: 80px;padding: 0 20px;}
menu-cont li > a:hover {background-color: var(--eee);}
menu-group {width: 200%;}
menu-group a {}
menu-group a:hover {background-color: var(--color);color: white;}
menu-list {}

/*search*/
.search {}
.search i {cursor: pointer;}
.search i.ico-close {display: none;}
.search .ico {width: 50px;}
.search-cont {background-color: var(--eee);border-radius: 10px;display: none;}
.search-cont input {}
.search-cont a {}

/* lang */
.lang > a {width: 50px;height: 50px;display: flex;}

/* light */
.light {max-width: 1920px;height: 700px;margin: auto;}

/* title */
.title {margin: 60px 0;}
.title h3 {font-size: 30px;margin-bottom: 10px;}
.title span {width: 40px;height: 3px;display: block;background-color: var(--color);margin: auto;}

/* recommend */
.recommend {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px;}
.recommend li:first-child {grid-row: span 2;}
.recommend li {min-height: 400px;}
.recommend li a {display: block;background-size: cover;background-position: center top;height: 100%;padding: 50px 30px;}
.recommend li a span {opacity: .3;}
.recommend li a h5 {font-size: 30px;padding: 10px 0;font-weight: normal;}
.recommend li a p {text-align: center;}
.recommend li a:hover h5 {color: var(--color);}
.recommend li a:hover {transform: translateY(5px);}

/* slogan */
.slogan {margin: 100px auto;max-width: 1920px;}
.slogan-cont {background-size: cover;height: 500px;background-image: url(../images/slogan.jpg);margin-bottom: 100px;}
.slogan-cont h3 {margin-bottom: 30px;font-size: 32px;}
.slogan-cont p {font-size: 18px;}
.slogan-data {display: flex;}
.slogan-data li {text-align: center;flex: 1;}
.slogan-data li h3 {font-size: 40px;margin-bottom: 10px;color: var(--color);transition-duration: .3s;}
.slogan-data li:hover h3 {color: orange;}

/* foot */
.foot {background-color: var(--eee);margin-top: 120px;}
.foot-cont {display: flex;align-items: center;padding: 30px 0;}
.foot-logo {width: 180px;display: block;}
.foot-nav {flex: 1;text-align: center;}
.foot-nav a {padding: 0 20px;}
.foot-nav a:not(:last-child) {border-right: 1px var(--ccc) solid;}
.foot-sns a {font-size: 30px;width: 50px;height: 50px;display: flex;align-items: center;border-radius: 5px;}
.foot-sns a:hover {background-color: var(--ddd);}
.foot-copy {text-align: center;padding: 20px 0;background-color: var(--333);color: var(--ccc);}

/* im */
.im {z-index: 1;margin: 10px;}
.im a {padding: 15px;margin: 5px;}

/* banner */
.banner {height: 400px;background-size: cover;max-width: 1920px;margin: auto;}
.banner .main {height: 100%;display: flex;align-items: center;}
.banner * {font-size: 40px;color: white;}
.banner span {text-transform: uppercase;font-weight: lighter;opacity: .3;padding: 20px;}

/* contact */
.contact {}
.contact-cont {display: flex;align-items: center;}
.contact-info {flex: 1;}
.contact-info i {width: 160px;display: block;}
.contact-info h2 {font-size: 30px;padding: 20px 0 10px;}
.contact-info h6 {text-transform: uppercase;}
.contact-list {width: 50%;}
.contact-list a {margin: 10px 0;padding: 15px;background-color: var(--f7);display: flex;align-items: center;}
.contact-list a i {margin: auto 10px;}
.contact-list a:hover {background-color: var(--eee);}
.contact-form .form {padding: 20px 0;}
.contact-form-cont {display: flex;align-items: center;}
.contact-form-cont ul {flex: 1;}
.contact-form-cont li {flex: 1;}
.contact-form-cont textarea {height: 170px;}
.contact-form-send {width:400px;float: right;display: flex;align-items: center;}
.contact-form-send li:first-child {flex: 1;}
.contact-form-send li {width: auto;}

/* map */
.map {height: 600px;margin: 100px auto;max-width: 1920px;}
#allmap {width: 100%;height: 100%;}

/* about */
.about {}
.about-group {overflow: hidden;margin-bottom: 80px;}
.about-txt {width: 48%;float: left;}
.about-img {width: 48%;height: 400px;float: right;}
.about-group:nth-child(2n) .about-txt {float: right;}
.about-group:nth-child(2n) .about-img {float: left;}

/* join */
.join {}
.join tab {display: flex;}
.join tab-list {width: 300px;margin-right: 40px;}
.join tab-list li {width: 100%;text-align: left;transition-duration: .3s;}
.join tab-list li a {height: 50px;line-height: 50px;display: flex;}
.join tab-list li a span {flex: 1;}
.join tab-list li a i {margin: auto;display: none;}
.join tab-list li.active a {background-color: var(--eee);}
.join tab-list li.active a i {display: block;}
.join tab-list li:hover {background-color: var(--f7);}

.join tab-cont {flex: 1;min-width: 0;}
.join-cont {background-color: var(--f7);display: flex;align-items: center;margin-bottom: 30px;}
.join-cont h3 {width: 250px;padding: 0 20px;}
.join-cont h6 {padding: 10px 0;}
.join-txt {flex: 1;padding: 20px;}
.join-txt a {margin: 20px 0;}

/* product */
.product {display: flex;padding: 50px 0 0;}
.product-light {width: 45%;margin-right: 30px;}
.product-light .gallery-top .swiper-slide {height: 500px;}
.product-light .gallery-thumb .swiper-slide {height: 120px;}
.product-info {flex: 1;}
.product-info h2 {font-size: 40px;margin: 20px 0;}
.product-info h5 {font-size: 20px;border-bottom: 1px var(--eee) solid;padding-bottom: 20px;}
.product-info ul {padding: 20px 0;}
.product-info li {padding: 10px 0;}
.product-info a {height: 60px;font-size: 16px;padding: 0 30px;}
.product-txt {padding: 50px 0;}
.product-txt .table {}
.product-txt .table tr * {padding: 20px;}







@media(max-width:640px){
    /* btn */
    .btn {border-radius: .1rem;}

    /* head */
    .head h1 i {width: .8rem;margin-right: .1rem;}

    /* menu */
    menu-cont li > a {font-size: .2rem;line-height: .8rem;padding: 0;}
    menu-cont li > a:hover {background-color: inherit;}
    menu-group {width: 100%;}

    /*search*/
    .search {}
    .search .ico {width: .8rem;}
    .search-cont {border-radius: 0;position: absolute;top: .8rem;left: 0;width: 100%;height: .8rem;background-color: var(--000-8);}
    .search-cont input {height: .8rem;color: white;}
    .search-cont a {color: white;}

    /* lang */
    .lang > a {width: .8rem;height: .8rem;}

    /* light */
    .light {height: 3rem;}

    /* title */
    .title {margin: .4rem 0;}
    .title h3 {font-size: .3rem;margin-bottom: .1rem;}
    .title span {width: .5rem;height: .03rem;}

    /* recommend */
    .recommend {display: block;overflow: hidden;}
    .recommend li:first-child {width: 100%;height: 6rem;}
    .recommend li {min-height: 0;height: 2.6rem;width: 50%;float: left;padding: .05rem;}
    .recommend li a {padding: .2rem .2rem;}
    .recommend li a h5 {font-size: .26rem;padding: 0;}
    .recommend li a:hover {transform: translateY(0);}

    /* slogan */
    .slogan {margin: .6rem auto;}
    .slogan-cont {height: 3rem;margin-bottom: .6rem;}
    .slogan-cont h3 {margin-bottom: .2rem;font-size: .28rem;}
    .slogan-cont p {font-size: .18rem;}
    .slogan-data li {text-align: center;flex: 1;}
    .slogan-data li h3 {font-size: .4rem;margin-bottom: .1rem;}

    /* foot */
    .foot {margin-top: 1rem;}
    .foot-cont {display: block;padding: .3rem 0;}
    .foot-logo {width: 1rem;;display: block;margin: .2rem auto;}
    .foot-nav {padding: .2rem 0;}
    .foot-nav a {padding: 0 .1rem;}
    .foot-sns a {font-size: .36rem;width: .7rem;height: .7rem;display: flex;border-radius: .1rem;}
    .foot-copy {padding: .2rem 0;}

    /* im */
    .im {z-index: 1;margin: .05rem;}
    .im a {padding: .15rem;margin: .05rem;height: .7rem;}

    /* banner */
    .banner {height: 2rem;}
    .banner * {font-size: .3rem;}
    .banner span {padding: .2rem;}

    /* contact */
    .contact-cont {display: block;}
    .contact-info i {width: 1.2rem;}
    .contact-info h2 {font-size: .3rem;padding: .3rem 0 .1rem;}
    .contact-list {width: 100%;margin: .3rem 0;}
    .contact-list a {margin: .1rem 0;padding: .2rem 0;}
    .contact-list a i {margin: auto .1rem;}
    .contact-form .form {padding: 0;}
    .contact-form-cont {display: block;}
    .contact-form-cont li:last-child {border-bottom: 1px var(--eee) solid;}
    .contact-form-cont textarea {height: auto;}
    .contact-form-send {width:100%;float: none;display: block;}
    .contact-form-send li:first-child {flex: 1;}
    .contact-form-send li {width: auto;}
    .contact-form-send li .btn {margin: .2rem 0;}

    /* map */
    .map {height: 4rem;margin: .8rem auto;}

    /* about */
    .about-group {margin-bottom: .6rem;}
    .about-txt {width: 100%;float: none;}
    .about-img {width: 100%;height: 400px;float: none;}
    .about-group:nth-child(2n) .about-txt {float: none;}
    .about-group:nth-child(2n) .about-img {float: none;}

    /* join */
    .join {}
    .join tab {display: block;}
    .join tab-list {width: 100%;margin: 0 0 .3rem;display: flex;}
    .join tab-list li {text-align: center;}
    .join tab-list li a {height: .8rem;line-height: .8rem;}
    .join tab-list li.active a i {display: none;}
    .join-cont {margin-bottom: .3rem;}
    .join-cont h3 {width: 2rem;padding: 0 0 0 .2rem;}
    .join-cont h6 {padding: .2rem 0;}
    .join-txt {padding: .2rem;}
    .join-txt a {margin: .2rem 0;}

    /* product */
    .product {display: block;padding: .5rem 0 0;}
    .product-light {width: 100%;margin: 0;}
    .product-light .gallery-top .swiper-slide {height: 4rem;}
    .product-light .gallery-thumb .swiper-slide {height: 1.2rem;}
    .product-info {padding: .2rem 0;}
    .product-info h2 {font-size: .4rem;margin: .2rem 0;}
    .product-info h5 {font-size: .22rem;padding-bottom: .2rem;}
    .product-info ul {padding: .2rem 0;}
    .product-info li {padding: .1rem 0;}
    .product-info a {height: .8rem;font-size: .22rem;padding: 0 .4rem;}
    .product-txt {padding: .5rem 0;}
    .product-txt .table tr * {padding: .2rem;}
}