/*--------------------------------------------------
    project:yg-zonghenengyuan
    producer:Chan.
    date:2020-07-14
--------------------------------------------------*/


/*
    初始化
*/
body{ margin: 0; padding: 0; width:100%; height: 100%; font-family: 'Microsoft YaHei'; background: #fbfbfb; position: relative;}
h1,h2,h3,h4,h5,h6,ul,ol,li,p,figure{list-style: none; padding: 0; margin: 0;}
a,a:hover{text-decoration: none;}
.color-blue{background: #2663ff; color: #2663ff;}

.row{margin: 0 -15px;}
.row .col-xl-6{padding: 0 15px; margin-bottom: 30px;}

/*--------------------------------------------------
    组件
--------------------------------------------------*/
.container{width: 1200px; max-width: 1200px; padding: 0;}


/* 
    header
*/
.header{height: 80px; box-shadow: 0 1px 10px rgba(0, 13, 27, .1); z-index: 999; position: fixed; left: 0; top: 0; width: 100%; background: #fff;}
.header .logo{ line-height: 80px; float: left;}
.header .search-area{ float: right; border-radius: 18px; width: 240px; height: 36px; position: relative; top: 22px;}
.header .search-area input{ width: 100%; height: 36px; border: none; padding: 0 15px; font-size: 14px; outline: none; position: absolute; left: 0; top: 0; background: #f2f1fc; border-radius: 18px; }
.header .search-area .search-button{width: 36px; line-height: 36px; display: inline-block; text-align: center; background: #2b2243; color: #fff; border-radius: 50%; cursor: pointer; position: absolute; right: 0; top: 0;}
.header .back{float: right; width: 140px; line-height: 40px; display: block; background: linear-gradient(145deg, #f0f0f0, #ffffff); box-shadow:  5px 5px 10px #e6e6e6, -5px -5px 10px #ffffff; border-radius: 20px; padding: 0 15px;position: relative; top:  20px; color: #8b929c; text-align: center; font-weight: bold; transition: all .3s;}
.header .back:hover{color: #2663ff;  box-shadow: 10px 10px 20px #e6e6e6, -10px -10px 20px #ffffff;}


/* 
    banner
*/
.banner{width: 100%; margin-top: 80px;}
.banner img{width: 100%; object-fit: cover; object-position: center;}



/* 
    mainbox
*/
.mainbox{padding: 60px 0;}
.mainbox-gray{background: #fbfbfb;}
.mainbox-ti{font-size: 30px; font-weight: bold; text-align: center; position: relative; width: 400px; margin: 0 auto 60px;}
.mainbox-ti::before{content: ''; width: 120px; height: 4px; background: linear-gradient(to right, #f6f6f6 , #ebebeb); position: absolute; left: 0; top: 50%;}
.mainbox-ti::after{content: ''; width: 120px; height: 4px; background: linear-gradient(to left, #f6f6f6 , #ebebeb); position: absolute; right: 0; top: 50%;}


/* 
    introduction
*/
.introduction{position: relative; top: -60px;}
.introduction .box{background: #fff; padding: 60px; position: relative; z-index: 2;  overflow: hidden; box-shadow: 0 6px 12px rgba( 232, 234,238, .74); } 
.introduction .text{float: left; width: 68%; padding-right: 50px;}
.introduction .text p{font-size: 14px; color: #767d8d; line-height: 2em; text-indent: 2em; margin-bottom: 20px; text-align: justify;}
.introduction .img{float: right; width: 32%;}
.introduction .img img{width: 100%;}


/* 
    newsest
*/
.newest{margin-bottom: 60px; margin-top: -20px;}
.newest .box{background: #fff; padding: 60px; position: relative; z-index: 2;  overflow: hidden; box-shadow: 0 6px 12px rgba( 232, 234,238, .74); display: block; transition: all .3s; position: relative;} 
.newest .box::after{content: '最新推荐'; position: absolute; right: 0; top: 0; width: 80px; line-height: 40px; background: #2663ff; color: #fff; text-align: center; font-size: 14px;}
.newest .box:hover{background: #fafafa; box-shadow: 6px 12px 12px rgba( 232, 234,238, .74), -12px -12px 12px #fff; transform: translate(0,-5px);}
.newest .text{float: right; width: 68%; padding-left: 50px;}
.newest .text h5{font-size: 20px; font-weight: bold; color: #000; margin-bottom: 25px; transition: all .3s;}
.newest .text p{font-size: 14px; color: #767d8d; line-height: 2em; text-align: justify; margin-bottom: 10px;}
.newest .box:hover h5{color: #2663ff;}
.newest .img{float: left; width: 32%;}
.newest .img img{width: 100%;}


/* 
    caixin
*/
.caixin{background: #e8f0ff; padding: 60px 0;}
.caixin .row{margin: 40px -15px -30px;}
.caixin .logo{display: table; margin: 0 auto; position: relative;}
.caixin .logo::before{content: ''; position: absolute; left: -30px; top: 50%; transform: translate(-100%,-50%); background: linear-gradient( to right, #e8f0ff ,#1f276e); width: 300px; height: 6px;}
.caixin .logo::after{content: ''; position: absolute; right: -30px; top: 50%; transform: translate(100%,-50%); background:  linear-gradient( to left, #e8f0ff ,#1f276e); width: 300px; height: 6px;}
.caixin .box{display: block; background: #fff; height: 220px; padding: 40px 30px; box-shadow: 0 6px 12px rgba( 0, 0,0, .05); transition: all .3s;} 
.caixin .box h5{font-size: 18px; font-weight: bold; color: #000; transition: all .3s;  display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.caixin .box p{font-size: 14px; color: #999; margin: 20px 0; line-height: 1.8em; text-align: justify; height: 5.2em; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.caixin .box span{font-size: 14px; color: #999;}
.caixin .box:hover h5{color: #2663ff;}
.caixin .box:hover{background: #fafafa; transform: translate(0,-5px);}


/* 
    nanfang
*/
.nanfang{background: #ffe8e8; padding: 60px 0;}
.nanfang .row{margin: 40px -15px -30px;}
.nanfang .logo{display: table; margin: 0 auto; position: relative;}
.nanfang .logo::before{content: ''; position: absolute; left: -30px; top: 50%; transform: translate(-100%,-50%); background: linear-gradient( to right, #ffe8e8 ,#db0025); width: 300px; height: 6px;}
.nanfang .logo::after{content: ''; position: absolute; right: -30px; top: 50%; transform: translate(100%,-50%); background:  linear-gradient( to left, #ffe8e8 ,#db0025); width: 300px; height: 6px;}
.nanfang .box{display: block; background: #fff; height: 220px; padding: 40px 30px; box-shadow: 0 6px 12px rgba( 0, 0,0, .05); transition: all .3s;} 
.nanfang .box .img{float: left; width: 35%;}
.nanfang .box .img img{width: 100%;}
.nanfang .box .con{float: right; width: 65%; padding-left: 20px;}
.nanfang .box h5{font-size: 18px; font-weight: bold; color: #000; transition: all .3s;  display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.nanfang .box p{font-size: 14px; color: #999; margin: 15px 0 25px; line-height: 1.8em; text-align: justify; height: 5.2em; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.nanfang .box span{font-size: 14px; color: #999;}
.nanfang .box:hover h5{color: #2663ff;}
.nanfang .box:hover{background: #fafafa; transform: translate(0,-5px);}


/* 
    footer
*/
.footer{background: #16202d;}
.footer .container{width: 1200px;}
.footer .top{padding: 72px 0; overflow: hidden; width: 100%;}
.footer .menu-list{float: left; margin-right: 120px;}
.footer .menu-list:last-child{float: right; margin-right: 0;}
.footer .menu-list h5{font-size: 20px; color: #fff; margin-bottom: 30px; line-height: 1em; display: block; transition: all .3s;}
.footer .menu-list a.link{font-size: 20px; color: #fff; margin-bottom: 30px; line-height: 1em; display: block; transition: all .3s;}
.footer .menu-list a.link:hover{color: #2663ff;}
.footer .menu-list h5.link{display: none;}
.footer .menu-list ul{}
.footer .menu-list ul li{line-height: 2em; margin-bottom: 5px; font-size: 14px; color: #878e97;}
.footer .menu-list ul li a{font-size: 14px; color: #878e97; transition: all .2s;}
.footer .menu-list ul li a:hover{color: #ddd;}
.footer .bottom{overflow: hidden; line-height: 66px; border-top: 1px solid #353f4d;}
.footer .bottom .copy{float: left;}
.footer .bottom .copy p,.footer .bottom .copy a{display: inline-block; font-size: 14px; color: #878e97; margin-right: 15px; transition: all .2s ;}
.footer .bottom .copy a:hover{color: #ddd;}
.footer .bottom .LM{float: right;}
.footer .bottom .LM a{display: inline-block; font-size: 14px; color: #878e97; margin-right: 15px; transition: all .2s;}
.footer .bottom .LM a:hover{color: #ddd;}
.footer .bottom .LM a:last-child{margin-right: 0; position: relative;}
.footer .bottom .LM a:last-child::before{content: ''; background: #353f4d; width: 1px; height: 14px; position: absolute; left: 0; top: 50%; transform: translate(-10px,-7px);}



/* 
    Mobile
*/
@media all and (max-width: 768px){

    .container{width: 100%; padding: 0 15px;}

    .header{height: 70px;}
    .header .logo{float: none; display: table; margin: 0 auto; line-height: 70px;}
    .header .search-area{display: none; }

    .banner{margin-top: 70px;}
    .banner img{height: 180px;}

    .introduction{top: -30px; margin-bottom: 30px;}
    .introduction .box{ padding: 30px 15px;  } 
    .introduction .text{float: none; width: 100%; padding-right: 0; margin-top: 30px;}
    .introduction .text p{}
    .introduction .img{float: none; width: 100%;}
    .introduction .img img{width: 100%;}

    .newest{margin-bottom: 60px; margin-top: -30px;}
    .newest .box{background: #fff; padding: 30px 15px;} 
    .newest .text{float: none; width: 100%; padding-left: 0; margin-top: 30px;}
    .newest .text p:nth-child(n+3){display: none;}
    .newest .img{float: none; width: 100%;}
    .newest .img img{width: 100%;}

    .caixin{ padding: 50px 0;}
    .caixin .logo::before{display: none;}
    .caixin .logo::after{display: none;}
    .caixin .box{ height: auto; padding: 30px;} 

    .nanfang{padding: 50px 0;}
    .nanfang .logo::before{display: none;}
    .nanfang .logo::after{display: none;}
    .nanfang .box{ height: auto; padding: 30px; overflow: hidden;} 
    .nanfang .box .img{font: none; width: 100%; margin-bottom: 20px;}
    .nanfang .box .con{font: none; width: 100%; padding-left: 0;}



    .footer .container{width: 100%;}
    .footer .top{padding: 60px 20px 0; }
    .footer .menu-list{float: none; margin-right: 0; margin-bottom: 40px;}
    .footer .menu-list:last-child{float: none; margin-right: 0;}
    .footer .menu-list .link{display: none;}
    .footer .menu-list h5{font-size: 16px; color: #fff; margin-bottom: 30px; line-height: 1em; position: relative;}
    .footer .menu-list a.link{display: none;}
    .footer .menu-list h5.link{display: block;}
    .footer .menu-list h5::after{content: '\e603'; font-family: 'iconfont'; display: block; position: absolute; right: 0; top: 0; transition: all .3s;}
    .footer .menu-list h5.active::after{transform: rotate(180deg);}
    .footer .menu-list ul{display: none;}
    .footer .menu-list ul li{line-height: 2em; margin-bottom: 10px; font-size: 14px; color: #878e97;}
    .footer .menu-list img{margin: 0 auto; display: none;}
    .footer .bottom{line-height: 2.5em; text-align: center; padding: 20px;}
    .footer .bottom .copy{float: none;}
    .footer .bottom .LM{float: none;}

}

@media all and (min-width: 1280px) and (max-width: 1366px){

    .container{transform: scale(0.9);}

    .header{height: 70px;}

    .banner{margin-top: 70px;}

    .newest{margin-top: -60px;}

    .caixin{padding: 10px 0;}

    .nanfang{padding: 10px 0;}

}

@media all and (min-width: 768px) and (max-width: 1200px){

    .container{width: 100%; padding: 0 30px; transform: scale(0.9);}
    .banner{margin-top: 70px;}
    .banner img{height: 300px; }
    .footer .container{width: 100%;}
    .newest{margin-top: -60px;}
    .caixin , .nanfang{padding: 0;}

}

@media all and (min-width: 800px) {

 

}
.pagiGroup {
    display: table;
    margin: 0 auto 0;
}

    .pagiGroup li {
        display: inline-block;
        margin: 0 5px;
    }

        .pagiGroup li .active {
            background: #005bac;
            color: #fff;
        }

        .pagiGroup li a {
            width: 36px;
            line-height: 36px;
            background: #e0e4ef;
            color: #8f9dc1;
            border-radius: 50%;
            display: block;
            text-align: center;
            transition: all .3s;
        }