/* basic */
@font-face {font-family: montserrat;src: url('montserrat.woff2') format('woff2');}
* {font-family: montserrat !important;}
body,
load {background-color: var(--f7);}
body,input {font-size: 16px;}
.name {width: 330px;height: 170px;font-size: 60px;text-transform: uppercase;padding: 20px 30px;border: 5px var(--color) solid;line-height: 100%;color: var(--color);}

/* color */
:root {
    --color: #FFBB00;
    --color-5: rgba(255, 187, 0, .5);
    --color-9: rgba(255, 187, 0, .9);
}

/* btn */
.btn {border-radius: 100px;}
.btn .ico {font-size: 28px;}
.btn-special {outline: 5px var(--color-5) solid;background-color: var(--color);}

/* head */
.head {z-index: 3;width: 100%;padding: 20px;max-width: 2560px;margin: auto;right: 0;}
.head-cont {padding: 10px 0;}
.head-cont > a {padding: 0;flex: 1;width: 150px;height: 40px;}
.head-cont .lang {margin: 0 10px;}
.head-cont .lang > a {width: 50px;display: flex;align-items: center;font-size: 32px;color: white;border-radius: 100%;}
.head-cont .lang > a:hover {background-color: var(--fff-3);}
.logo {width: 140px;display: block;}

/* light */
.light {height: 930px;max-width: 2560px;margin: auto;margin-bottom: 120px;}
.light .swiper-slide {height: 930px;}
.light .main {height: 100%;display: flex;align-items: center;}
.light-cont {width: 480px;padding-top: 200px;}
.light-cont h3 {text-transform: uppercase;margin-left: 600px;}
.light-cont h3 em {font-size: 60px;color: var(--color);margin-right: 100px;}
.light-cont h3 span {font-size: 90px;font-weight: lighter;color: white;}
.light-cont p {font-size: 18px;text-align: right;margin: 50px 0;}

/* menu */
menu {}
menu x {color: white;}
menu-cont {}
menu-cont li > a {color: white;font-size: 18px;text-transform: uppercase;padding: 0 20px;line-height: 50px;border-radius: 100px;}
menu-cont li > a.active,
menu-cont li > a:hover {background-color: var(--fff-3);}
menu-group {border-radius: 10px;}
menu-group a {line-height: 50px;}
menu-group a:hover {background-color: var(--color);color: white;}

/* intro */
.intro em {display: block;margin-top: -50px;}
.intro-cont {display: flex;}
.intro-cont p {flex: 1;margin-right: 240px;}
.intro-cont h3 {margin: 0 80px;}

/* special */
.special {background-color: white;padding: 50px 0;}
.special-cont {display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 40px;padding: 20px 0;}
.special-cont li {text-align: center;}
.special-cont li > i {font-size: 48px;color: var(--color);border: 2px var(--color) solid;width: 80px;height: 80px;display: flex;align-items: center;border-radius: 100%;margin-bottom: -40px;z-index: 1;position: relative;background-color: white;outline: 5px white solid;transition-duration: .5s;}
.special-cont li em {display: block;width: 100%;height: 220px;border-radius: 20px;overflow: hidden;}
.special-cont li em img {transition-duration: .5s;}
.special-cont li h5 {padding: 20px 0;font-size: 18px;}
.special-cont li p {height: 110px;}
.special-cont li a {width: 60%;}
.special-cont li:hover i {transform: rotate(360deg);}
.special-cont li:hover em img {transform: scale(1.1);}

/* title */
.title {padding: 50px 0;}
.title h3 {font-size: 32px;text-transform: uppercase;padding: 0 30px;}
.title em {width: 40px;height: 3px;background-color: var(--color);}

/* complete */
.complete {padding: 50px 0;}
.complete-cont {column-count: 3;column-gap: 20px;padding: 40px 0;}
.complete-cont li {border-radius: 10px;overflow: hidden;position: relative;margin-bottom: 20px;break-inside: avoid;}
.complete-cont li img {}
.complete-cont li em {position: absolute;left: 0;bottom: 0;width: 100%;color: white;text-transform: capitalize;text-align: center;padding: 20px;background-image: linear-gradient(transparent,var(--000-5));}
.complete-cont li aside {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: var(--color-9);opacity: 0;transition-duration: .3s;}
.complete-cont li aside a {color: white;width: 220px;}
.complete-cont li:hover aside {opacity: 1;}

/* cooperation */
.cooperation {background-image: url(../images/partner/partner.jpg);background-size: cover;padding: 50px 0;max-width: 2560px;margin: auto;}
.cooperation-cont {display: flex;padding: 30px 0;}
.cooperation-txt {padding: 70px 200px 0 50px;width: 656px;height: 471px;background-image: url(../images/partner/partner.svg);}
.cooperation-txt p {color: white;}
.cooperation-txt a {color: white;margin-top: 30px;width: 250px;}
.cooperation-link {flex: 1;overflow: hidden;}
.cooperation-link li {float: right;padding: 10px 0 10px 20px;}
.cooperation-link li a {height: 95px;display: block;}
.cooperation-link li a img {height: 100%;width: auto;border-radius: 10px;}
.cooperation-link li a:hover {transform: translateY(-5px);}

/* foot */
.foot {background-color: white;}
.foot-cont {padding: 50px 0;display: flex;}
.foot-cont h3 {text-transform: uppercase;margin-bottom: 10px;}
.foot-logo {width: 150px;margin: 50px 100px 0 0;}
.foot-list {flex: 1;display: flex;}
.foot-list li {flex: 1;}
.foot-list li a {display: block;line-height: 30px;text-transform: capitalize;}
.foot-list li a:hover {color: var(--color);}
.foot-contact {margin: 0 40px;}
.foot-contact li {line-height: 30px;}
.foot-contact li span {text-transform: capitalize;}
.foot-contact li a:hover {color: var(--color);}
.foot-provider {width: 300px;}
.foot-provider ul li {}
.foot-provider ul li a {height: 35px;display: block;}
.foot-provider ul li a img {width: auto;height: 100%;opacity: .2;transition-duration: .3s;}
.foot-provider ul li a:hover img {opacity: 1;}
.foot-copy {text-align: center;background-color: var(--222);color: white;padding: 20px;text-transform: uppercase;}

/* banner */
.banner {height: 370px;background-size: cover;max-width: 2560px;margin: auto;padding-top: 100px;}
.banner .main {height: 100%;justify-content: flex-start;}
.banner h3 {text-transform: uppercase;}
.banner h3 em {font-size: 40px;color: var(--color);margin-right: 10px;}
.banner h3 span {font-size: 70px;color: white;font-weight: lighter;}

/* solution */
.solution {margin-bottom: 50px;}
.solution-cont {}
.solution-group {overflow: hidden;padding: 50px 0;}
.solution-group em {width: 580px;height: 740px;display: block;float: right;position: relative;margin-right: 60px;}
.solution-group em img {border-radius: 20px;}
.solution-group em span {position: absolute;top: 0;bottom: 0;right: -60px;;margin: auto;width: 360px;height: 280px;background-color: white;padding: 30px;border-radius: 20px;line-height: 150%;}
.solution-group .solution-txt {width: 600px;float: left;}
.solution-txt h4 {font-size: 30px;}
.solution-txt ul {padding: 40px 0;}
.solution-txt ul li {padding: 10px;}
.solution-txt ul li h5 {display: flex;align-items: center;font-size: 18px;}
.solution-txt ul li h5 span {flex: 1;}
.solution-txt ul li i {width: 50px;height: 50px;background-color: var(--color);display: flex;align-items: center;color: white;border-radius: 100%;outline: 5px var(--color-5) solid;margin: 0 20px 0 0;}
.solution-txt ul li p {padding-left: 70px;}
.solution-txt a {width: 220px;}
.solution-group:nth-child(2n) em {float: left;margin: 0 0 0 60px;}
.solution-group:nth-child(2n) em span {right: auto;left: -60px;}
.solution-group:nth-child(2n) .solution-txt {float: right;}
.solution-info > p {padding: 30px 0;}
.solution-info .solution-txt p {padding: 20px 0 20px 70px;}

/* how */
.how {background-color: white;padding: 50px 0;}
.how p {padding: 10px 0;}
.how-cont {display: grid;grid-template-columns: repeat(7,1fr);}
.how-cont li {text-align: center;padding: 10px;}
.how-cont li em {width: 180px;height: 180px;display: block;margin-bottom: 20px;transition-duration: .3s;margin: auto;}
.how-cont li em:hover {transform: scale(.95);}
.how-cont li em img {width: 100%;height: 100%;}
.how-cont li span {text-transform: capitalize;padding: 10px 20px;display: block;background-color: var(--f7);border-radius: 100px;font-size: 18px;}
.how-txt h5 {font-size: 18px;}

/* qa */
.qa {padding: 50px 0 100px;}
.qa fold-title {transition-duration: .3s;}
.qa fold-title:hover {color: var(--color);}
.qa fold-title h5 {font-size: 18px;}
.qa fold-cont {padding: 20px;}
.qa fold-cont p {padding: 10px 0;}

/* about */
.about {}
.about-cont {display: flex;padding: 50px 0 100px;}
.about-cont em {width: 600px;height: 740px;display: block;margin-left: 150px;position: relative;}
.about-cont em img {border-radius: 20px;}
.about-cont em h3 {position: absolute;top: 0;bottom: 0;left: -100px;margin: auto;}
.about-txt {flex: 1;}
.about-txt h4 {font-size: 24px;padding: 20px 0;}
.about-txt p {padding: 10px 0;}
.about-impact {padding: 50px 0;}
.about-impact em {margin: 0 50px 0 0;}
.about-impact ul {}
.about-impact ul li {display: flex;padding: 10px 0;}
.about-impact ul li i {width: 25px;height: 25px;border-radius: 100%;border: 3px var(--color) solid;margin-right: 10px;display: block;flex-shrink: 0;}

/* project */
.project {padding-bottom: 100px;}
.project-light {margin: 50px 0;}
.project-light img {border-radius: 10px;}
.project-light .swiper-gallery {display: flex;}
.project-light .gallery-top {flex: 1;}
.project-light .gallery-top .swiper-slide {height: 630px;}
.project-light .gallery-thumb {width: 300px;height: 630px;margin-left: 10px;}
.project-light .gallery-thumb .swiper-slide {height: 150px;opacity: .5;}
.project-light .gallery-thumb .swiper-slide-thumb-active {opacity: 1;}
.project-cont {background-color: white;border-radius: 20px;padding: 20px 40px;}
.project-cont ul {display: flex;padding: 20px 0;}
.project-cont ul:not(:last-child) {border-bottom: 1px var(--333) solid;}
.project-cont ul li {flex: 1;}
.project-cont ul li h5 {font-size: 18px;padding: 10px 0;}
.project-cont ul li span {text-transform: capitalize;padding: 10px 0;display: block;}

/* contact */
.contact {}
.contact-cont {padding: 30px 0 100px;display: flex;}
.contact-cont h5 {font-size: 20px;margin-bottom: 20px;}
.contact-info {flex: 1;padding: 30px 50px;}
.contact-info ul {}
.contact-info ul li {padding: 10px 0;}
.contact-info ul li aside {display: flex;align-items: center;padding: 10px 0;}
.contact-info ul li aside i {color: var(--color);font-size: 30px;margin: 0 20px 0 0;}
.contact-info ul li aside span {text-transform: capitalize;}
.contact-info ul li a {font-weight: bold;padding-left: 50px;display: block;font-size: 18px;}
.contact-info ul li a:hover {color: var(--color);}
.contact-form {width: 700px;background-color: white;border-radius: 20px;padding: 30px;}
.contact-form p {margin-bottom: 30px;}
.contact-form .form {}
.contact-form .form li {}
.contact-form .form li:nth-child(-n+4) {width: 50%;float: left;}
.contact-form .form li input,
.contact-form .form li textarea {background-color: transparent;border-bottom: 1px var(--333) solid;}
.contact-form .form li input {}
.contact-form .form li textarea {height: 200px;}
.contact-form .form li.resolve {padding: 30px 0 0;}
.contact-form .form li a {width: 200px;}

.map {max-width: 2560px;margin: auto;}
.map iframe {width: 100%;height: 500px;}

/* crumb */
crumb {padding: 20px 0;}

/* im */
.im {width: 60px;height: 180px;z-index: 3;}
.im a {width: 50px;height: 50px;display: flex;align-items: center;background-color: var(--color);color: white;margin: 5px;border-radius: 10px;}
.im .top {margin: 5px;position: absolute;bottom: auto;}










@media(max-width:640px){
    /* basic */
    body,input {font-size: .2rem;}
    .name {width: 3.3rem;height: 1.8rem;font-size: .6rem;padding: .2rem .3rem;border: .05rem var(--color) solid;}

    /* btn */
    .btn {border-radius: 1rem;}
    .btn .ico {font-size: .36rem;}
    .btn-special {outline: .05rem var(--color-5) solid;}

    /* head */
    .head {padding: .1rem;}
    .head-cont {padding: .1rem 0;}
    .head-cont > a {width: 1.6rem;height: .6rem;font-size: .18rem;}
    .head-cont .lang {margin: 0 .1rem;}
    .head-cont .lang > a {width: .7rem;font-size: .44rem;}
    .logo {width: 1.5rem;}

    /* light */
    .light {height: 8rem;margin-bottom: .5rem;}
    .light .swiper-slide {height: 8rem;background-position: top right;}
    .light-cont {width: 90%;padding-top: .6rem;margin: auto;}
    .light-cont h3 {margin-left: 0;}
    .light-cont h3 em {font-size: .4rem;margin-right: .2rem;}
    .light-cont h3 span {font-size: .6rem;}
    .light-cont p {font-size: .2rem;text-align: left;margin: .2rem 0;color: white;}
    .light-cont a {height: .7rem;}

    /* menu */
    menu-cont {top: 1rem;}
    menu-cont li > a {font-size: .2rem;padding: 0;line-height: .8rem;border-radius: 0;}
    menu-group {border-radius: 0;}
    menu-group a {line-height: .7rem;}

    /* intro */
    .intro em {margin-top: 0;}
    .intro-cont {display: block;}
    .intro-cont p {margin: 0;padding: 0 .2rem .5rem;}
    .intro-cont h3 {margin: 0 auto;}

    /* special */
    .special {padding: .5rem 0;}
    .special-cont {grid-template-columns: repeat(1,1fr);grid-gap: .4rem;padding: .2rem 0;}
    .special-cont li > i {font-size: .5rem;width: 1rem;height: 1rem;margin-bottom: -.5rem;}
    .special-cont li em {height: 3rem;border-radius: .2rem;}
    .special-cont li h5 {padding: .2rem 0;font-size: .22rem;}
    .special-cont li p {height: auto;}
    .special-cont li a {margin-top: .2rem;}

    /* title */
    .title {padding: .5rem 0;}
    .title h3 {font-size: .3rem;padding: 0 .3rem;}
    .title em {width: .4rem;height: .03rem;}

    /* complete */
    .complete {padding: .5rem 0;}
    .complete-cont {column-count: 2;column-gap: .1rem;padding: .4rem 0;}
    .complete-cont li {border-radius: .1rem;margin-bottom: .1rem;}
    .complete-cont li em {padding: .2rem;}
    .complete-cont li aside a {width: 2rem;height: .6rem;font-size: .18rem;}

    /* cooperation */
    .cooperation {padding: .5rem 0;}
    .cooperation-cont {display: block;padding: .3rem 0;}
    .cooperation-txt {padding: .5rem;width: 100%;height: auto;background: var(--color);border-radius: .2rem;margin-bottom: .2rem;}
    .cooperation-txt a {margin-top: .3rem;width: 3rem;}
    .cooperation-link li {padding: .05rem;}
    .cooperation-link li a {height: 1rem;}
    .cooperation-link li a img {border-radius: .1rem;}

    /* foot */
    .foot-cont {padding: .5rem 0;display: block;}
    .foot-cont h3 {margin: .2rem 0;}
    .foot-logo {display: none;}
    .foot-list li a {line-height: .5rem;}
    .foot-list li a:hover {color: var(--color);}
    .foot-contact {margin: .2rem 0;border-width: 1px 0 1px 0;padding: .2rem 0;}
    .foot-contact li {line-height: .4rem;}
    .foot-provider {width: 100%;}
    .foot-provider ul li a {height: .4rem;}
    .foot-copy {padding: .2rem;}

    /* banner */
    .banner {height: 3rem;padding-top: .9rem;}
    .banner h3 em {font-size: .3rem;margin-right: .1rem;}
    .banner h3 span {font-size: .5rem;}

    /* solution */
    .solution {margin-bottom: .5rem;}
    .solution-group {padding: .5rem 0;}
    .solution-group em {width: 100%;height: 7rem;margin: 0 0 .4rem;}
    .solution-group em img {border-radius: .2rem;}
    .solution-group em span {top: auto;right: 0;width: 100%;bottom: -.1rem;height: auto;padding: .2rem;border-radius: .2rem;background-color: var(--color);color: white;}
    .solution-group .solution-txt {width: 100%;float: none;}
    .solution-txt h4 {font-size: .28rem;}
    .solution-txt ul {padding: .3rem 0;}
    .solution-txt ul li {padding: .1rem;}
    .solution-txt ul li h5 {font-size: .22rem;}
    .solution-txt ul li i {width: .5rem;height: .5rem;margin: 0 .2rem 0 0;}
    .solution-txt ul li p {padding-left: .7rem;}
    .solution-txt a {width: 2.4rem;}
    .solution-group:nth-child(2n) em {float: none;margin: 0 0 .4rem;}
    .solution-group:nth-child(2n) em span {left: 0;}
    .solution-group:nth-child(2n) .solution-txt {float: none;}
    .solution-info > p {padding: .3rem 0;}
    .solution-info .solution-txt p {padding: .2rem 0 .2rem .7rem;}

    /* how */
    .how {padding: .5rem 0;}
    .how p {padding: .1rem;}
    .how-cont li {padding: .1rem;}
    .how-cont li em {width: .8rem;height: .8rem;margin-bottom: .1rem;}
    .how-cont li span {padding: .05rem .1rem;border-radius: 1rem;font-size: .16rem;}
    .how-cont li.center img {width: .4rem;height: .4rem;}
    .how-txt h5 {font-size: .22rem;}

    /* qa */
    .qa {padding: .5rem 0 1rem;}
    .qa fold-title h5 {font-size: .2rem;}
    .qa fold-cont {padding: .2rem;}
    .qa fold-cont p {padding: .1rem 0;}

    /* about */
    .about-cont {display: block;padding: .5rem 0 1rem;}
    .about-cont em {width: 100%;height: 5rem;margin: 0;}
    .about-cont em img {border-radius: .2rem;}
    .about-cont em h3 {left: 0;right: 0;}
    .about-txt h4 {font-size: .24rem;padding: .2rem 0;}
    .about-txt p {padding: .1rem 0;}
    .about-impact {padding: .5rem 0;}
    .about-impact em {margin: 0 .5rem 0 0;}
    .about-impact ul li {padding: .1rem 0;}
    .about-impact ul li i {width: .3rem;height: .3rem;margin-right: .1rem;}

    /* project */
    .project {padding-bottom: 1rem;}
    .project-light {margin: .5rem 0;}
    .project-light img {border-radius: .1rem;}
    .project-light .swiper-gallery {display: block;}
    .project-light .gallery-top .swiper-slide {height: 5rem;}
    .project-light .gallery-thumb {width: 100%;height: 1rem;margin: 0;}
    .project-light .gallery-thumb .swiper-slide {height: 1rem;}
    .project-cont {border-radius: .2rem;padding: .2rem;display: flex;}
    .project-cont ul {padding: 0;display: block;flex: 1;}
    .project-cont ul:not(:last-child) {border: 0;}
    .project-cont ul li {padding: .2rem 0;}
    .project-cont ul li:not(:last-child) {border-bottom: 1px var(--333) solid;}
    .project-cont ul li h5 {font-size: .22rem;padding: .1rem 0;}
    .project-cont ul li span {padding: .1rem 0;}

    /* contact */
    .contact-cont {padding: .3rem 0 1rem;display: block;}
    .contact-cont h5 {font-size: .26rem;margin-bottom: .2rem;}
    .contact-info {padding: .3rem .2rem;}
    .contact-info ul li {padding: .1rem 0;}
    .contact-info ul li aside {padding: .1rem 0;}
    .contact-info ul li aside i {font-size: .36rem;margin: 0 .2rem 0 0;}
    .contact-info ul li a {padding-left: .55rem;font-size: .22rem;}
    .contact-form {width: 100%;border-radius: .2rem;padding: .3rem;}
    .contact-form p {margin-bottom: .3rem;}
    .contact-form .form li {border: 0;}
    .contact-form .form li:nth-child(-n+4) {width: 100%;float: none;}
    .contact-form .form li textarea {height: 2rem;}
    .contact-form .form li.resolve {padding: .3rem 0 0;}
    .contact-form .form li a {width: 100%;padding: 0 .4rem;}

    .map iframe {height: 5rem;}

    /* crumb */
    crumb {padding: .2rem 0;}
}