body {
	background-color: #F2F2F2;
}

.header {
    position: absolute;
}

.main-banner {
    width: 100%;
    display: inline-block;
   /* height: 305px;
    background: url('//cdn.chaxiaoliang.com/public/images/welcome-back.png') no-repeat center; */
    height: 176px;
    background: #175ede url(//cdn.chaxiaoliang.com/public/images/BG-96114b0bf0d.jpg) center top no-repeat;
}
.main-banner .introBlock {
    /* position: fixed; */
    position: absolute;
    width: 100%;
    height: 100%;
}

.main-banner .introBlock .circle {
    transform: translateZ(0);
    position: absolute;
    border-radius: 50%;
    width: 800px;
    height: 800px;
    background: rgba(255, 255, 255, 0.04);
}

.main-banner .introBlock .c1 {
    top: -30.74%;
    left: -13.125%;
    animation: 60s circle_1 infinite;
    transform-origin: center;
}

.main-banner .introBlock .c2 {
    animation: 40s circle_2 infinite;
    transform-origin: center;
    top: -8.148%;
    right: -0.52%;
}

.main-banner .introBlock .c3 {
    bottom: -21.66%;
    left: -17.1875%;
    animation: 16s circle_3 infinite;
    transform-origin: center;
}

.main-banner .introBlock .c4 {
    bottom: -31.48%;
    right: -7.6%;
    animation: 16s circle_4 infinite;
    transform-origin: center;
}
.main-banner .title {
    font-size: 18px;
    color: #999999;
    line-height: 18px;
    color: #fff;
    font-weight: bold;
    padding-top: 116px;
}

.main-banner .title h1 {
    font-size: 32px;
    line-height: 32px;
    font-weight: bold;
}

.main-banner .title p {
    font-size: 20px;
    line-height: 20px;
}

.content {
    width: 1200px;
    margin: 0 auto;
    /* box-shadow: 0px 0px 17px 0px rgba(82, 82, 82, 0.13); */
    /* border-radius: 12px; */
    position: relative;
    /* top: -68px; */
    top: -50px;
}

.layui-row .pro-title {
    /* width: 100%; */
    height: 68px;
    min-height: 300px;
    line-height: 68px;
    font-size: 16px;
    color: #b9c8d3;
    border-bottom: 1px solid rgb(239, 240, 242);
    /* border-radius: 3px; */
    background: #fff;
    /* border:1px solid #efefef; */
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.content .pro-title-left {
	float: left;
    width: 742px;	
}

.content .pro-title-right {
    float: right;
    width: 438px;	
}

.content .pro-title-sub {
	font-size: 12px;
	color:#999;
	margin-left: 20px;
}

.layui-card-header {
	/* float: left; */
    font-size: 16px !important;
    margin: 0;
    color: #555 !important;
    border-bottom: 1px solid #e8e7e7 !important;
    width: 100%;
    text-align: left;
}

.content .pro-title .wel-pro-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url('//cdn.chaxiaoliang.com/public/images/wel-pro-icon.png') no-repeat center;
    vertical-align: middle;
    margin-right: 13px;
}

.content .pro-box {
    padding: 24px 48px 20px;
    overflow: hidden;
}

.content .pro-box .pro {
    float: left;
    width: 284px;
    height: 452px;
    background-color: rgb(251, 252, 254);
    border: 1px solid rgb(239, 240, 242);
    border-radius: 4px;
    margin: 0 15px 17px 0;
    cursor: pointer;
    transition: transform .3s ease-in-out;
}

.content .pro-box .pro:hover {
    box-shadow: 0px 0px 16px 0px rgba(35, 52, 67, 0.16);
    transform: translateY(-4px);
    transition: transform .3s ease-in-out;
}

.content .pro-box .pro:nth-child(4n) {
    margin-right: 0;
}

.content .pro-box .pro .pro-name {
    width: 168px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: bold;
    color: #298dff;
    margin: 0 auto;
    border-bottom: 2px solid #298dff;
    position: relative;
}

.content .pro-box .pro .pro-name .pro-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}


.content .pro-box .pro .pro-name .pro-jdsz~span:nth-child(2) {
    background-image: -webkit-linear-gradient(bottom, #653ed2, #ba3ad8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.content .pro-box .pro .pro-name .pro-jdkc~span:nth-child(2) {
    background-image: -webkit-linear-gradient(bottom, #653ed2, #ba3ad8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.content .pro-box .pro .pro-intro {
    padding: 15px 0 6px 28px;
    text-align: left;
}

.content .pro-box .pro .pro-intro>p {
    line-height: 38px;
    font-size: 14px;
    color: #333;
}

.content .pro-box .pro .pro-intro>p .intro-icon {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 2px;
    background-color: rgb(41, 141, 255);
    vertical-align: middle;
    margin-right: 7px;
}

.content .pro-box .pro .experience-btn {
    display: inline-block;
    width: 210px;
    height: 34px;
    line-height: 34px;
    background-color: rgba(41, 141, 255, 0.122);
    border: 1px solid rgb(123, 184, 253);
    border-radius: 2px;
    font-size: 12px;
    color: #298dff;
    margin-bottom: 10px;
}

.content .pro-box .pro .experience-btn:hover {
    background: #298dff;
    color: #fff;
    border: none;
}

.content .pro-box .pro .recomend,
.keywords {
    cursor: pointer;
}
.mg-5 {margin: 5px;}