/**title**/

    .banner
    {
        position: relative;
        overflow: hidden;
    }
    
    
    .index_bn
    {
        margin-top:80px;
    }
    .index_bn .text
    {
        width: 100%;
        position: absolute;
        top: 20%;
        text-align: center;
    }
    .index_bn .text .title
    {
        width: 100%;
        color: #000;
        font-weight: 700;
        position: relative;
        font-size: 3.444em;
    }
    .index_bn .text .more
    {
        width: 100%;
        padding: 0 30px;
        line-height: 42px !important;
        text-align: center;
        border: 1px solid #000;
        display: block;
        color: #000 !important;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 0.9em;
        margin: 20px auto 0px;
        max-width: 170px;
        transition: all 0.5s;
        border-radius: 4px;
    }
    .index_bn .text .more:hover
    {
        background:#000;
        color:#fff !important;
    }
    
    .index_bn
    {
        margin-top:80px;
        position: relative;
    }
    .swiper-bn-list
    {
        position: absolute;
        bottom: 125px !important;
        width: 100%;
        text-align: center;
        z-index: 2;
    }
    .swiper-bn-list span
    {
        width: 100px;
        height: 4px;
        background: rgba(255,255,255,0.4);
        border-radius: 0px;
        opacity: 1;
        margin: 0px 10px;
        position: relative;
    }
    
    
    .swiper-bn-list span.swiper-pagination-bullet-active:before
    {
        content:'';
        width: 100%;
        height: 4px;
        background: #fff;
        position: absolute;
        left: 0px;
    }
    
    .thumbnail
    {
        background: rgba(0,0,0,0.6);
        width: 100%;
        overflow: hidden;
        position: absolute;
        bottom: 0px;
        z-index: 2;
    }
    .thumbnail .center
    {
        width: 86%;
        max-width: 1400px;
        margin: auto;
        padding: 20px 20px;
        position: relative;
    }
    .swiper-thumbnail
    {
        position: relative;
        width: calc(100% - 280px);
        margin: auto;
        overflow: hidden;
    }
    .swiper-thumbnail .swiper-wrapper
    {
        display: flex;
        justify-content: center;  
    }
    .thumbnail li:nth-last-of-type(1) 
    {
        margin-right: 0px !important;
    }
    
    .thumbnail .pic
    {
        height: 60px;
        background: rgba(0,0,0,0.5);
        overflow: hidden;
        position: relative;
        overflow: hidden;
    }
    .thumbnail .pic img
    {
      display: block;
      width: 100%;
      transition: all 0.5s;
      position: absolute;
      top: 50%;
      transform: translate(-50%,-50%)scale(1);
      height: 100%;
      background-size: cover !important;
      opacity: 0;
      left:50%;
    }
    .thumbnail li:hover .pic img
    {
          transform: translate(-50%,-50%)scale(1.1);
    }
    
    
    .thumbnail .swiper-slide-thumb-active .title
    {
      opacity: 1;	
    }
    
    .thumbnail .title
    {
        position: absolute;
        top: 50%;
        text-align: center;
        color: #fff;
        width: 100%;
        transform: translateY(-50%);
        opacity: 0.5;
        font-size: 1.2em;
    }
    
    .thumbnail li
    {
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        border: 1px rgba(255,255,255,0) solid;
    }
    .swiper-button-prev,.swiper-button-next
    {
        opacity: 1 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        width: 50px;
        height: 50px;
        border: 1px #fff solid;
        border-radius: 100%;
        top: 50%;
        margin-top: -25px;
    }
    .swiper-button-prev:hover,.swiper-button-next:hover
    {
        background:#fff;
    }
    .swiper-button-prev
    {
        left:0px;	
    }
    .swiper-button-next
    {
        right:0px;	
    }
    .swiper-button-prev:after,.swiper-button-next:after
    {
        font-size: 20px;
        color: #fff;
    }
    .swiper-button-prev:hover:after,.swiper-button-next:hover:after
    {
        color: #222;
    }
    
    
    .pag1 {
        padding:140px 0px;
        overflow:hidden;
    }
    .pag1 .center
    {
        max-width: 1400px;
        margin: auto;
    }
    
    .pag-title {
        text-align:center;
        display:block;
        color:#333;
        margin-bottom: 10px;
    }
    .pag-title p {
        font-size: 3.2em;
        color: #000;
        font-weight: 700;
        position: relative;
        padding-bottom: 5px;
    }
    
    
    
    /**pag2**/
    .pag2
    {
        overflow: hidden;
        padding: 80px 0px 60px;
        width: 100%;
    }
    .pag2 .center
    {
        max-width: 1440px;
        overflow: hidden;
        position: relative;
        margin: auto;
        width: 86%;
    }
    .pag2 .center ul.top
    {
        display: flex;
    }
    .pag2 .center ul.top li:nth-of-type(1)
    {
        /*width: 66.66%;*/
    }
    
    
    .pag2 .center ul
    {
        display: flex;
    }
    
    .pag2 .center ul li
    {
        width: 33.33%;
        float: left;
        padding: 20px;
        position: relative;
    }
    .pag2 .center ul li a
    {
        display: block;
        position: relative;
        overflow: hidden;
    }
    .pag2 .center ul li a:before
    {
        visibility: visible;
        opacity: 1;
        height: 50%;
        width: 100%;
        content: "";
        background: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 70%);
        display: block;
        top: auto;
        bottom: 0;
        content:'';
        position: absolute;
        bottom: 0px;
        z-index: 2;
    }
    .pag2 .center ul li:hover a:before
    {
        height:100%;
    }
    
    
    .pag2 .center ul li .ico
    {
        
    }
    .pag2 .center ul li .ico img
    {
        transform: scale(1);
        transition: all 0.5s;
    }
    
    .pag2 .center ul li .ico .mobile
    {
        display:none;
    }
    
    .pag2 .center ul li:hover .ico img
    {
        transform: scale(1.1);
    }
    
    .pag2 .center ul li .text
    {
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 30px 25px;
        z-index: 3;
        transition: all 0.5s;
    }
    .pag2 .center ul li:hover .text
    {
        padding: 30px 25px 60px;	
    }
    
    
    
    .pag2 .center ul li .text .title
    {
        color: #fff;
        font-size: 1.6em;
        line-height: 1.4em;
        font-weight: 700;
    }
    .pag2 .center ul li .text .title i
    {
        font-style: normal;
        font-weight: normal;
        font-size: 0.7em;
    }
    
    .pag2 .center ul li .text .title img
    {
        height: 28px;
        margin-bottom: 4px;
    }
    
    
    .pag2 .center ul li .text .title span
    {
        display: block;
        font-size: 16px;
        font-weight: normal;
        opacity: 0.9;
    }
    .pag2 .center ul li .text .more
    {
        font-size: 0.9em;
        color: #fff;
        width: 160px;
        line-height: 1.5em;
        border: 0px #fff solid;
        text-align: left;
        margin-top: 10px;
        position: absolute;
        opacity: 0;
        transition: all 0.5s;
    }
    
    
    
    .pag2 .center ul li:hover .text .more
    {
        opacity:1;	
    }
    
    
    
    
    
    /**pag3**/
    .pag3
    {
        background: #fafafa;
        overflow: hidden;
        padding: 0px 0px;
        position: relative;
    }
    .pag3 img{
        width: 100%;
    }
    
    .pag3 .text
    {
        overflow: hidden;
        padding: 0px 0px;
        position: absolute;
        width: 100%;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
    }
    .pag3 .center
    {
        overflow: hidden;
        max-width: 1440px;
        width: 86%;
        margin: auto;
        padding: 0px 20px;
    }
    .pag3 .title
    {color: #000;font-weight: 700;position: relative;font-size: 3.2em;}
    .pag3 .content
    {
        overflow: hidden;
        max-width: 350px;
        color: #000;
        margin-top: 20px;
        font-size: 1.3em;
    }
    .pag3 .btn-group
    {
        margin: 51px 0px 0px;
    }
    
    
    
    
    /**pag4**/
    .pag4
    {
        background: #fafafa;
        overflow: hidden;
        padding: 30px 0px;
    }
    .pag4 .center
    {
        background: #ececec;
        /*background-image: url('../image/news_bgs.jpg');*/
        /*background-repeat: no-repeat;*/
        /*background-size: 100% 100%;*/
        padding: 20px 0;
    }
    .pag4 ul
    {
        max-width: 1440px;
        padding: 0px 0px;
        width: 86%;
        margin: auto;
        overflow: hidden;
        margin-top: 30px;
		display: flex; justify-content: flex-start; align-items: flex-start;
		flex-wrap: wrap;
    }
    .pag4 ul li
    {
        width: 33.33%;
		margin-bottom: 15px;
		box-sizing: border-box; padding: 10px;
		height: 500px;
/*        padding: 0px 20px;
        float: left;*/
    }
    .pag4 ul li .ico
    {
		width: 100%;
		height: 290px;
		box-sizing: border-box;
/*        overflow: hidden;
        height: 0px;
        padding-top:60%;
        position: relative;*/
    }
    .pag4 ul li .ico img
    {
        width: 100%;
        transition: all 0.5s;
/*        position: absolute;
        top: 50%;
        left: 50%;*/
        transform: translate(-50%,-50%)scale(1);
        object-fit: cover;
        height: 100%; 
    }
    .pag4 ul li:hover .ico img
    {
        transform: translate(-50%,-50%)scale(1.1);
    }
    
    
    .pag4 ul li .text
    {
        background: #fff;
		box-sizing: border-box;
		width: 100%;
		height: 210px;
        padding: 1.8em;
    }
    .pag4 ul li .title
    {
        font-size: 1.32em;
        color: #000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        font-weight: 700;
    }
    
    .pag4 ul li .ext_summary
    {
        font-size: 0.875em;
        color: #666666;
        line-height: 1.6em;
        margin: 10px 0px 35px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    
    .pag4 ul li .category
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pag4 ul li .category .sortname
    {
        display: inline-block;
        background: #3284ff;
        color: #fff;
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 4px;
    }
    .pag4 ul li .category .date
    {
        font-size: 0.875em;
    }
    
    .btn-group
    {
        padding: 0 30px;
        line-height: 42px !important;
        text-align: center;
        border: 1px solid #000;
        display: block;
        color: #000 !important;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 0.9em !important;
        margin: 40px auto 0px;
        max-width: 170px;
        transition: all 0.5s;
        border-radius: 4px;
    }
    
    .carbon-case .btn-group
    {
        overflow: hidden;
        margin: 0px auto 60px;
    }
    
    
    .scene .btn-group
    {
        margin-top: 0px;
        margin-bottom: 20px;
    }
    
    
    
    .btn-group:hover
    {
     background:#000;
        color: #fff !important;
    }