@charset "UTF-8";

@media screen and (max-width: 1600px){
    .container{
        width: 1400px;
    }
    .menu>li{
        padding: 0 20px;
    }
}

@media screen and (max-width: 1400px){
    .container{
        width: 1200px;
    }
    .menu>li{
        padding: 0 15px;
    }
    .video{
        height: auto;
    }
}

@media screen and (max-width: 768px){
    .container{
        min-width: auto;
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .header .logo{
        padding: 20px 0;
    }
    .header .logo img{
        height: 40px;
    }
    .header .oa{
        margin-top: 20px;
    }
    .header .oa a{
        display: none;
    }
    .header .toggle{
        display: inline-block;
        margin-left: 15px;
    }

    .fixed{
        background: rgba(0,0,0, .4);
    }

    .header .menu{
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        margin-top: 0;
        padding: 10px 0;
        background: rgba(0,0,0,.8);
    }
    .menu>li{
        width: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
      position: relative;
    }
    .menu>li>a{
        font-weight: normal;
        margin-right: 40px;
		color: #fff;
    }
	.header:hover .menu>li>a, .header.fixed .menu>li>a{
		color: #fff;
		line-height: 2;
	}
	.menu>li>a::before{
		background-color: rgba(255,255,255, .4);
                display: none;
	}
    .menu>li span{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        font-family: 'ËÎÌå';
        font-size: 18px;
        transform: rotate(90deg);
    }
    .menu .second-menu{
        height: auto;
    }

 .menu .second-menu ul {
    flex-direction: column;
}

 .menu .second-menu ul li{
    height: 40px;
}

    #slide{
        height: 60vh;
    }
    #slide .swiper-button-prev,
    #slide .swiper-button-next{
        display: none;
    }

    .title{
        padding: 20px 0;
        height: 35px;
        line-height: 35px;
    }
    .title h1 a{
        font-size: 22px;
    }
	.news>li{
		margin-bottom: 15px;
	}
        .news li .date h1 {
             font-size: 34px;
        }
	.news li .date{
		font-size: 16px;
		margin-top: 5px;
	}
	.news li .info {
	    margin-left: 70px;
	    padding: 0 10px 0 12px;
	}
	.news li .info h2 {
	    font-size: 18px;
	}
	.news li .info p {
	    color: #666;
	    font-size: 14px;
	    height: 3.2em;
	    line-height: 1.6em;
	}
	.news li:after {
	    display: none;
	}
    .news, .notice{
        width: 100%;
    }
    .news{
        padding: 0;
    }
	.news li a{
		padding: 15px 10px;
	}
    .news:before{
        right: -15px;
    }
	.detail{
		padding:10px;
	}
	.detail .caption h1{
		font-size: 24px;
	}
	.detail .caption p {
	    font-size: 14px;
	    margin-top: 10px;
	}
	
       .prev-next{
        padding: 10px 15px;
        flex-direction: column;
    }
    .prev-next .prev,
    .prev-next .next{
        width: 100%;
        padding: 0;
        justify-content: left;
    }
    .prev-next .back{
        margin: 15px 0;
    }
    .prev-next .prev span,
    .prev-next .next span{
        margin: 0;
        text-align: center;
    }

    .tab h1:last-of-type{
        margin-left: 20px;
    }

    .news-list li{
        width: 100%;
    }
	.news-list li a {
	    border-bottom: 1px solid #EBEBEB;
		padding: 15px 0;
	}
	.news-list li p {
		min-width: 70px;
		font-size: 14px;
	}
	.news-list li p span {
	    font-size: 20px;
	}
	.news-list li h2 {
	    margin-left: 0px;
	    font-size: 16px;
	    font-weight: normal;
	    height:50px;
	    line-height: 1.7;
	    margin-top: 0px;
	}
    .notice ul {
        padding: 15px;
        margin-bottom: 20px;
    }
	.notice ul li h2{
		font-size: 16px;
	}
	.notice ul li{
		padding-bottom: 15px;
		padding-left: 20px;
	}
	.notice ul li:before{
		width: 8px;
		height: 8px;
		left: -5px;
	}
	.mark{
		margin: 30px 0;
	}
	.mark ul li img{
		max-width: 85%;
	}
    .product{
        height: auto;
    }
    .product .topic{
        width: 90%;
        margin: 30px auto;
        font-size: 22px;
    }
    .swiper .swiper-slide{
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .swiper .swiper-slide>div{
        margin-top: 20%;
        width: 90%;
    }
    .swiper h2{
        font-size: 18px;
    }
    .swiper p{
        font-size: 14px;
    }

    .thumbs{
        width: 100%;
        margin: 220px auto 50px;
    }
    .thumbs .swiper-slide{
        padding: 15px;
    }
    .thumbs .context{
        height: 100%;
    }
    .thumbs .context p{
        display: none;
    }
	.section .intro{
		padding: 15px 0;
		border-radius: 10px;
	}
	.video video{
		height: 30vh;
	}
    .about, .culture{
        width: 100%;
        height: auto;
    }
    .about:before{
        right: -15px;
    }
    .about h1 a:after{
        bottom: -8px;
        width: 30px;
        height: 3px;
    }
    .about .intro>h2{
        font-size: 20px;
    }
    .about .intro>p{
        margin-bottom: 20px;
    }
    .about ul li{
        width: 33.33%;
    }
    .about ul li span{
        font-size: 24px;
    }
    .about ul li:nth-of-type(2){
        padding: 0 10px;
        margin: 0;
        box-sizing: border-box;
    }
    .about ul li:nth-of-type(3){
        padding: 0 10px;
    }
    .about ul li sup{
        top: -5px;
        font-size: 12px;
    }
    .about .more{
        margin: 30px 0 40px;
    }

    .culture:before{
        left: -15px;
    }
    .culture .info{
        padding: 20px 20px 30px;
    }
    .culture .info h1 a{
        font-size: 22px;
    }
    .culture .info p{
        padding-bottom: 10px;
    }

    .event{
        height: auto;
        padding-bottom: 30px;
    }
    .event:before {
        left: 88px;
        transform: scale(0.5);
        transform-origin: left top;
    }
    .event h1{
        font-size: 24px;
    }

.event:after {
    top: 35px;
    left: 102px;
    bottom: -15px;
    width: 2px;
}
.event ul li h3 {
    font-size: 14px;
    padding: 0; 
}
.event ul li span {
    min-width: 150px;
}

    .swiper-event .swiper-slide{
        padding: 0;
    }
    .swiper-event h2{
        font-size: 22px;
    }
    .swiper-event h3{
        font-size: 20px;
    }
    .swiper-event .swiper-slide-active h2{
        width: 200px;
        height: 200px;
        line-height: 160px;
        margin-bottom: 30px;
    }
    .swiper-event .swiper-slide-active h2 span{
        width: 120px;
        height: 120px;
        line-height: 120px;
    }
    .swiper-event .swiper-button-prev,
    .swiper-event .swiper-button-next{
        width: 38px;
        height: 38px;
        top: 20%;
        background-size: contain;
    }

    .footer .nav{
        display: none;
    }
    .footer .contact{
        width: 100%;
        padding: 20px 0;
        border-left: none;
    }
    .footer .contact>.rt{
        float: none;
    }
    .footer .tel h3{
        font-size: 16px;
    }
    .footer .tel h2{
        font-size: 20px;
    }
    .footer .bottom{
        line-height: 20px;
        padding: 8px 0;
        font-size: 12px;
    }
    .footer .bottom a{
        display: block;
    }
    .footer .wechat .code {
        margin-left: -22px;
    }

    .search form{
        width: 96%;
        margin-top: 50%;
        box-sizing: border-box;
    }
    .search input[type='text']{
        width: 100%;
        box-sizing: border-box;
    }
    .search .close{
        top: 5%;
        right: 15px;
        font-size: 40px;
    }

   .bread{
        margin: 15px 0 0;
    }
    .detail{
        padding: 20px;
    }
    .detail .caption h1{
        font-size: 18px;
    }
    .detail .caption h2{
        font-size: 16px;
    }
    .detail .caption p{
        font-size: 14px;
        margin-top: 10px;
    }

    .industry ul li{
        width: 100%;
        margin-bottom: 20px;
    }

    .ztxx {
        width: 60px;
        top: 50%;
        transform: translateY(-50%);
    }

}