header .community{
            z-index: 120;
        }
        header .menu{
            background: transparent;
        }

        main{
            padding-top: 0px;
        }
        main .ttl{
            text-align: center;
            text-transform: uppercase;
        }
        main .ttl i{
            display: block;
            margin: 0 auto;
            height: 5px;
            background: #008486;
        }
        main .ttl i:first-child{
            width: 80px;
        }
        main .ttl i:last-child{
            width: 60px;
            margin-top: 15px;
        }
        main .ttl .words{
            font-size: 48px;
            color: #231815;
            margin-top: 10px;
        }
        main .ttl span{
            font-size: 14px;
            color: #808080;
        }
        

        main>*{
            padding: 3% 0px;
        }
        main .headSwiper{
            height: 720px;
            padding: 0px;
        }
        main .headSwiper .swiper-slide img{
            display: block;
        }
        main .headSwiper .swiper-pagination{
            height: 12px;
        }
        main .headSwiper .swiper-pagination .swiper-pagination-bullet{
            vertical-align: top;
            width: 12px;
            height: 12px;
            margin: 0px 6px;
            background: rgba(255,255,255,.6);
            outline: none;
            cursor: pointer;
            opacity: 1;
        }
        main .headSwiper .swiper-pagination .swiper-pagination-bullet-active{
            background: rgba(255,255,255,.9);
        }

        main .offer{
            padding-bottom: 0px;
        }
        main .offer .offerList{
            padding-top: 3%;
            position: relative;
            padding-bottom: 60px;
            overflow: hidden;
        }
        main .offer .offerList ul li{
            margin-bottom: 82px;
            float: right;
            width: 30%;
        }
        main .offer .offerList ul li:nth-child(odd){
            float: left;
            clear: left;
        }
        main .offer .offerList ul li a{
            display: block;
        }
        main .offer .offerList ul li a .icon{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            float: left;
            margin-right: 15px;
            transition: background .3s ease;
        }
        main .offer .offerList ul li a .icon::before{
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            background-repeat: no-repeat;
            background-position: 0 0;
            position: relative;
            z-index: 2;
        }
        main .offer .offerList ul li a:hover .icon{
            background-color: #008486;
        }
        main .offer .offerList ul li a:hover .icon::before{
            background-position: 0 -102px;
        }
        main .offer .offerList ul li a .t span{
            font-size: 21px;
            font-family: sans-serif;
            display: block;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        main .offer .offerList ul li a:hover .t span{
            color: #008486;
        }
        main .offer .offerList ul li a .t p{
            color: #808080;
            font-size: 12px;
            line-height: 24px;
            overflow: hidden;
            height: 72px;
        }
        main .offer .offerList ul li:nth-child(1) a .icon::before{
            background-image: url(../img/index/icon1.png);
        }
        main .offer .offerList ul li:nth-child(2) a .icon::before{
            background-image: url(../img/index/icon2.png);
        }
        main .offer .offerList ul li:nth-child(3) a .icon::before{
            background-image: url(../img/index/icon3.png);
        }
        main .offer .offerList ul li:nth-child(4) a .icon::before{
            background-image: url(../img/index/icon4.png);
        }
        main .offer .offerList ul li:nth-child(5) a .icon::before{
            background-image: url(../img/index/icon5.png);
        }
        main .offer .offerList ul li:nth-child(6) a .icon::before{
            background-image: url(../img/index/icon6.png);
        }
        main .offer .offerList .pics{
            position: absolute;
            top: 5%;
            left: 50%;
            width: 33%;
            transform: translateX(-50%);
            text-align: center;
            transition: all .3s;
            padding: 10px;
        }
        main .offer .offerList .pics .item{
            margin-bottom: 1px;
            display: none;
        }
        main .offer .offerList .pics .item.show{
            display: block;
        }
        main .offer .offerList .pics .item .type{
            background: #e5e5e5;
            font-size: 16px;
            padding: 10px 15px;
            position: relative;
            transition: all .3s;
            cursor: pointer;
        }
        main .offer .offerList .pics .item.show .type{
            background: #008486;
        }
        main .offer .offerList .pics .item .type span{
            transition: .3s all;
        }
        main .offer .offerList .pics .item .type span:hover{
            text-decoration: underline;
            color: #23527c;
        }
        main .offer .offerList .pics .item .type::after{
            content: '';
            float: right;
            margin-top: 10px;
            border-top: solid #c1c1c1 7px;
            border-left: solid transparent 6px;
            border-right: solid transparent 6px;
        }
        main .offer .offerList .pics .item.show .type::after{
            border-top-width: 0px;
            border-bottom: solid #fff 7px;
        }
        main .offer .offerList .pics .item .box .inner{
            display: inline-block;
            vertical-align: top;
            max-width: 100%;
            pointer-events: none;
        }
        main .offer .offerList .pics .item .box .inner img{
            width: 100%;
            height: auto;
        }
        main .offer .offerList .pics .item .box .inner p{
            font-size: 14px;
            line-height: 24px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        main .offer .advtg{
            background: #f8f8f8;
            padding: 3% 0px;
        }
        main .offer .advtg .fluid .box{
            width: calc(100% / 3);
            padding: 0px 15px;
        }
        main .offer .advtg .fluid .box:hover .more{
            background: #008486;
            border: 2px solid #008486;
            color: #fff;
        }
        main .offer .advtg .fluid .box .pic,
        main .offer .advtg .fluid .box .tip{
            display: block;
            position: relative;
        }
        main .offer .advtg .fluid .box .pic::after{
            content: '';
            position: absolute;
            width: 212px;
            height: 183px;
            background: url(../img/index/triangle.png) no-repeat;
            right: 10px;
            bottom: 10px;
            z-index: 2;
        }
        main .offer .advtg .fluid .box .pic img{
            width: 100%;
            height: auto;
            display: block;
        }
        main .offer .advtg .fluid .box .pic:hover img{
            opacity: .9;
        }
        main .offer .advtg .fluid .box .tip{
            margin: 15px 0px;
            text-transform: uppercase;
            font-size: 21px;
            padding-left: 40px;
        }
        main .offer .advtg .fluid .box:hover .tip{
            color: #008486;
        }
        main .offer .advtg .fluid .box .tip img{
            position: absolute;
            height: 26px;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
        }
        main .offer .advtg .fluid .box .t{
            color: #999999;
            font-size: 14px;
            line-height: 24px;
            cursor: default;
            height: 120px;
            overflow: hidden;
        }
        main .offer .advtg .fluid .box .more{
            margin-top: 25px;
        }


        main .projects .proList{
            padding: 2% 0px;
            overflow: hidden;
        }
        main .projects .proList .item{
            float: left;
            position: relative;
            width: 25%;
            background: #000;
            overflow: hidden;
            transition: all .3s;
        }
        main .projects .proList .item .pic img{
            width: 100%;
            height: auto;
            display: block;
            transition: all .3s;
        }
        main .projects .proList .item:hover .pic img{
            opacity: .7;
        }
        main .projects .proList .item a{
            position: absolute;
            width: 100%;
            z-index: 2;
            height: 62px;
            bottom: 0px;
            left: 0px;
            background: rgba(255,255,255,.9);
            transform: translateY(100%);
            transition: all .3s;
        }
        main .projects .proList .item:hover a{
            transform: translateY(0px);
        }
        main .projects .proList .item a .t{
            width: 85%;
            padding: 10px;
            float: left;
        }
        main .projects .proList .item a .t p{
            font-size: 18px;
            color: #231815;
            font-family: sans-serif;
            text-transform: uppercase;
            width: 100%;
            display: block;
            text-transform: uppercase;
            overflow: hidden;
            width: 100%;
            white-space: nowrap;
            word-wrap: normal;
            margin-bottom: 5px;
        }
        main .projects .proList .item a .t span{
            display: block;
            color: #231815;
            font-size: 12px;
            text-transform: uppercase;
            overflow: hidden;
            width: 100%;
            white-space: nowrap;
            word-wrap: normal;
        }
        main .projects .proList .item a .color{
            text-align: center;
            height: 100%;
            width: 13%;
            background: #ee921f;
            float: right;
            line-height: 62px;
        }
        main .projects .proList .item a .color img{
            display: inline-block;
            vertical-align: middle;
            height: 25px;
        }
        main .projects .proList + p{
            text-align: center;
            margin-top: 1%;
        }
        main .projects .proList + p .more{
            padding: 6px 15px;
            font-size: 14px;
        }

        main .news{
            background: #f8f8f8;
        }
        main .news .fluid{
            padding-top: 3%;
            overflow: hidden;
        }
        main .news .fluid .newsSwiper{
            padding-bottom: calc(3% + 20px);
        }
        main .news .fluid .newsSwiper .swiper-slide{
            padding: 0px 15px;
        }
        main .news .fluid .newsSwiper .swiper-slide .pic{
            display: block;
        }
        main .news .fluid .newsSwiper .swiper-slide .pic img{
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: 214px;
        }
        main .news .fluid .newsSwiper .swiper-slide:hover .pic{
            opacity: .9;
        }
        main .news .fluid .newsSwiper .swiper-slide .newsTtl{
            color: #231815;
            font-family: sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            margin: 15px 0 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            white-space: normal;
            word-break: break-all;
        }
        main .news .fluid .newsSwiper .swiper-slide:hover .newsTtl{
            color: #008486;
        }
        main .news .fluid .newsSwiper .swiper-slide .date{
            position: relative;
            padding-left: 18px;
            margin-bottom: 15px;
        }
        main .news .fluid .newsSwiper .swiper-slide .date img{
            position: absolute;
            height: 12px;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
        }
        main .news .fluid .newsSwiper .swiper-slide .date span{
            font-style: italic;
            font-size: 12px;
            color: #808080;
        }
        main .news .fluid .newsSwiper .swiper-slide i{
            display: block;
            width: 50px;
            height: 4px;
            background: #008486;
            margin-bottom: 10px;
        }
        main .news .fluid .newsSwiper .swiper-slide .t{
            font-size: 13px;
            color: #808080;
            line-height: 24px;
            overflow: hidden;
            height: 72px;
            margin-top: 10px;
        }
        
        
        main .news .fluid .page{
            text-align: center;
            margin-top: 3%;
            padding: 7px 0px;
        }
        main .news .fluid .page p{
            display: inline-block;
            vertical-align: top;
            width: 50px;
            height: 5px;
            background: #e5e5e5;
            margin: 0px 7px;
            cursor: pointer;
        }
        main .news .fluid .page p:hover,
        main .news .fluid .page p.active{
            background: #008486;
        }
        

        main .feedback{
            background: url(../img/index/feedBg.jpg) no-repeat center center;
            background-size: cover;
            position: relative;
        }
        main .feedback::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: #000;
            opacity: 0;
            z-index: 1;
        }
        main .feedback>*{
            position: relative;
            z-index: 2;
        }
        main .feedback .ttl i{
            background: #ee921f;
        }
        main .feedback .ttl p{
            color: #fff;
        }
        main .feedback .feedbkSwiper{
            margin-top: 3%;
        }
        main .feedback .feedbkSwiper .swiper-slide{
            text-align: center;
        }
        main .feedback .feedbkSwiper .t{
            max-width: 75%;
            margin:0 auto;
            font-size: 16px;
            color: #ffffff;
            font-style: italic;
            line-height: 34px;
        }
        main .feedback .feedbkSwiper a{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            background: #ee921f;
            position: relative;
            margin-top: 3%;
            margin-bottom: 2%;
            transition: opacity .3s;
        }
        main .feedback .feedbkSwiper a:hover{
            opacity: .9;
        }
        main .feedback .feedbkSwiper a img{
            height: 20px;
        }
        
        main .feedback .feedbkSwiper .name{
            font-size: 12px;
            color: #808080;
            padding-bottom: 4%;
            text-transform: uppercase;
        }
        main .feedback .fluid>p{
            position: absolute;
            bottom: 0px;
            opacity: .5;
            transition: opacity .3s;
            z-index: 2;
            transform: translateY(50%);
        }
        main .feedback .fluid>p:hover{
            opacity: .9;
        }
        main .feedback .fluid>p img{
            display: block;
        }
        main .feedback .fluid .prev{
            left: 50%;
            margin-left: -30px;
        }
        main .feedback .fluid .next{
            right: 50%;
            margin-right: -30px;
        }


        main .team .fluid{
            position: relative;
            padding: 0px;
            padding-top: 5%;
        }
        main .team .memberSwiper{
            width: 92%;
        }
        main .team .memberSwiper .swiper-wrapper{
            transition-timing-function: linear;
        }
        main .team .memberSwiper .swiper-slide{
            padding: 0px 15px;
            cursor: pointer;
            text-align: center;
        }
        main .team .memberSwiper .pic{
            position: relative;
            display: inline-block;
            vertical-align: top;
        }
        main .team .memberSwiper .pic>img{
            display: block;
            height: auto;
            width: 100%;
            max-width: 237px;
            max-height: 257px;
        }
        main .team .memberSwiper .community{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            transition: all .3s;
            background: rgba(0,0,0,0);
            z-index: 2;
        }
        main .team .memberSwiper .swiper-slide:hover .community{
            background: rgba(0,0,0,.6);
        }
        main .team .memberSwiper .community .item{
            width: 32px;
            height: 32px;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            background: transparent;
            transition: all .5s;
            opacity: 0;
            margin: 0px 3px;
        }
        main .team .memberSwiper .swiper-slide:hover .community .item{
            opacity: 1;
        }
        main .team .memberSwiper .community .item img{
            height: 16px;
        }
        main .team .memberSwiper .community .item:hover{
            background: #008486;
        }

   
        main .team .memberSwiper .info{
            background: #f8f8f8;
            padding: 2%;
            text-transform: uppercase;
            font-family: sans-serif;
            height: 80px;
            transition: all .3s;
        }    
        main .team .memberSwiper .swiper-slide:hover .info{
            background: #008486;
        }
        main .team .memberSwiper .info p{
            font-size: 18px;
            color: #231815;
            margin-top: 10px;
            line-height: 24px;
            margin-bottom: 5px;
            transition: color .3s;
        }
        main .team .memberSwiper .swiper-slide:hover .info p{
            color: #fff;
        }
        main .team .memberSwiper .info span{
            font-size: 12px;
            color: #808080;
            transition: color .3s;
        }
        main .team .memberSwiper .swiper-slide:hover .info span{
            color: #000;
        }
        main .team .fluid>p{
            position: absolute;
            top: 45%;
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 50%;
            background: #000;
            cursor: pointer;
            transition: all .3s;
            z-index: 2;
        }
        main .team .fluid>p:hover{
            opacity: .8;
        }
        main .team .fluid .prev,
        main .team .fluid .next{
            background: url(../img/common/icons.png) no-repeat;
        }
        main .team .fluid .prev{
            left: 0px;
            background-position: -10px -152px;
        }
        main .team .fluid .next{
            right: 0px;
            background-position: -73px -152px;
        }
        main .team .fluid>p img{
            height: 11px;
        }


        main .data{
            background: #f8f8f8;
        }
        main .data .fluid{
            overflow: hidden;
        }
        main .data .item{
            width: 25%;
            float: left;
            padding: 0 10px;
            text-align: center;
        }

        main .data .item .num{
            color: #ee921f;
            font-size: 60px;
            margin-bottom: 10px;
            font-family: sans-serif;
            font-weight: bold;
            letter-spacing: -4px;
        }
        main .data .item.str .num::after{
            /*content: '.5GW';*/
            content: 'MW';
            color: #ee921f;
            font-family: sans-serif;
            font-weight: bold;
            letter-spacing: -4px;
        }
        main .data .item.add .num::after{
            content: '+';
            color: #ee921f;
            font-size: 36px;
            display: inline-block;
            vertical-align: top;
            font-family: sans-serif;
            font-weight: bold;
            margin-top: 5px;
        }
        main .data .item span{
            color: #231815;
            font-size: 18px;
            font-family: sans-serif;
            text-transform: uppercase;
        }

        @media(max-width:1199px){
            main .offer .offerList ul li{
                margin-bottom: 68px;
            }
            main .offer .offerList ul li a .t span{
                font-size: 18px;
            }
            main .offer .offerList ul li a .t p{
                height: 48px;
            }
            main .offer .offerList .pic{
                width: 330px;
            }

            main .team .memberSwiper .info p{
                font-size: 14px;
                line-height: 18px;
            }
        }
        @media(max-width:991px){
            main .ttl .words{
                font-size: 40px;
            }
            main .ttl span{
                font-size: 12px;
            }

            main .offer .offerList ul li a .t span{
                font-size: 14px;/*zgw*/
            }
            main .offer .offerList .pic{
                width: 255px;
            }
            main .data .item .num{
                font-size: 48px;
                margin-bottom: 5px;
            }
            main .data .item span{
                font-size: 16px;
            }
        }
        @media (min-width:768px) and (max-width:991px){
            main .offer .advtg .fluid .box .tip{
                font-size: 16px;
                padding-left: 32px;
            }
            main .offer .advtg .fluid .box .tip img{
                height: 20px;
            }
            main .offer .advtg .fluid .box .t{
                font-size: 12px;
                line-height: 20px;
                height: 100px;
            }
            main .offer .advtg .fluid .box .more{
                margin-top: 20px;
            }

            main .projects .proList .item a .t p{
                font-size: 16px;
            }
        }
        @media(min-width:768px){
            main .offer .offerList .pics .item .type,
            main .offer .offerList .pics .item .box .inner p{
                display: none;
            }
        }
        @media(max-width:767px){
            header .community{
                display: none;
            }
            header .menu{
                background: #fff;
            }
            
            main .ttl .words{
                font-size: 32px;
            }


            main .headSwiper{
                height: 500px;
            }
            main .offer .offerList ul{
                display: none;
            }   
            main .offer .offerList .pics{
                position: relative;
                width: 100%;
            }
            main .offer .offerList .pics .item{
                display: block;
            }
            main .offer .advtg .fluid{
                flex-direction: column;
            }
            main .offer .advtg .fluid .box{
                width: 100%;
                margin-bottom: 20px;
            }
            main .offer .advtg .fluid .box .t{
                height: initial;
                overflow: initial;
            }
            
            main .offer .offerList .pics .item .box{
                overflow: hidden;
                height: 0px;
                transition: all .5s;
            }
            main .offer .offerList .pics .item .box .inner{
                pointer-events: all;
            }
            main .projects .proList .item{
                width: 50%;
            }
            main .projects .proList .item a{
                transform: translateY(14px);
            }
            main .projects .proList .item a .t{
                width: 80%;
            }
            main .projects .proList .item a .color{
                width: 20%;
            }
            main .projects .proList .item a .color img{
                height: 20px;
                transform: translateY(-7px);
            }
            main .projects .proList .item:hover a .color img{
                transform: translateY(0px);
            }
            main .projects .proList .item a .t span{
                display: none;
            }

            main .news .fluid .page p{
                width: 40px;
            }
            main .feedback .feedbkSwiper .t{
                font-size: 14px;
                max-width:90%;
            }
            main .feedback .fluid .prev{
                margin-left: -5%;
            }
            main .feedback .fluid .next{
                margin-right: -5%;
            }

            main .team .fluid{
                padding-left: 15px;
                padding-right: 15px;
            }
            main .team .memberSwiper .swiper-slide{
                padding: 0px 10px;
            }
            main .team .fluid .prev{
                left: 15px;
            }
            main .team .fluid .next{
                right: 15px;
            }

            main .data .item.add .num::after{
                font-size: 32px;
            }
        }
        @media(max-width:600px){
            main .data .item{
                width: 50%;
                margin-bottom: 2%;
            }
        }
        @media(max-width:420px){
            main .projects .proList .item{
                width: 100%;
            }
        }