/* common */
.title {
    text-align: center;
}
.title h3 {
    font-size: 40px;
    color: #e20501;
    line-height:46px;
    font-weight: bold;
    padding: 50px 0 30px 0;
}
.title h6 {
    font-size: 20px;
    color: #526464;
    line-height:26px;
    font-weight: bold;
    padding-bottom: 50px;
}

/* Banner */
.banner {
    position: relative;
    width:100%;
    background: url('../images/product/banner.png') no-repeat 0 0;
    background-size: cover;
    margin-bottom: 20px;
}
.banner .mark {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;

}

/* Product */
.product {
    width: 100%;
    background-color: #f7f7f7;
    padding-bottom: 50px;
    margin-bottom: 20px;
}
.product-inner {
    position: relative;
    width: 65%;
    margin: 0 auto;
}
.product .content {
    padding-top: 50px;
}
.product .content h3 {
    font-size: 26px;
    line-height: 30px;
    color: #000;
    text-align: center;
    padding: 30px 0;
}
.product .content p {
    font-size: 16px;
    line-height: 30px;
    color: #6f6f6f;
    text-indent: 32px;
}
.product .content .paragraph {
    margin-bottom: 20px;
}
.product .content .paragraph-1 {
    width: 70%;
    padding-right: 5px;
}
.product .pic {
    position: absolute;
    top: 135px;
    right: 15px;
    width: 13vw;
    height: 23vh;
    margin-right: 5%;
}
.product .pic img {
    width: 100%;
    height: 100%;
}

/* Principle */
.principle {
    width: 100%;
    background-color: #f7f7f7;
    padding-bottom: 50px;
    user-select: none;
    margin-bottom: 20px;
}
.principle .content {
    display: flex;
    justify-content: center;
}
.principle .content .item {
    position: relative;
    width: 25%;
    height: 300px;
    background-color: #fff;
    margin-right: 100px;
}
.principle .content .item:last-child {
    margin: 0;  
}
.principle .content .item h3 {
    font-size: 50px;
    color: #e20501;
    font-weight: bold;
    padding: 50px 0 30px 30px;
}
.principle .content .item p {
    font-size: 18px;
    color: #e20501;
    line-height: 30px;
    color: #526464;
    padding-left: 30px;
}
.principle .content .item img {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 90px;
    height: 90px;
}
.principle .content .active {
    background-color: #ff214f;
}
.principle .content .active h3 {
    color: #fff;
}
.principle .content .active p {
    color: #fff;
}

/* Ideal && System && Server */
.ideal-system-server {
    width: 100%;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-around;
    padding-bottom: 50px;
    user-select: none;
    margin-bottom: 20px;
}
.ideal {
    width: 30%;
}
.system {
    width: 30%;
}
.server {
    position: relative;
    width: 30%;
}
.ideal .pic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
}
.ideal .pic img {
    width: 100%;
    height: 100%;
}
.ideal .content {
    position: relative;
}
.ideal .content .content-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.ideal .content .content-top {
    margin-bottom: 100px;
}
.ideal .content .item {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    text-align: center;
}
.ideal .content .item h6 {
    padding-top: 42px;
    font-size: 18px;
    color: #fff;
}
.ideal .content .ideal1 {
    background-color: coral;
    margin-right: 80px;
}
.ideal .content .ideal2 {
    background-color: rgb(190, 188, 54);
}
.ideal .content .ideal3 {
    background-color: rgb(132, 182, 103);
    margin-right: 80px;
}
.ideal .content .ideal4 {
    background-color: rgb(204, 89, 104);
}

.system .content {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-image: linear-gradient(to right, #fbcfb5, #ffffff);
}
.system .content .pic {
    width: 100%;
}
.system .content .pic img {
    width: 100%;
}
.system .content .item {
    position: absolute;
    width: 150px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    color: #333;
}
.system .content .item-1 {
    left: 245px;
    top: 10px;
    background-image: linear-gradient(to right, #d1a3ff, #fcf8ff);
}
.system .content .item-2 {
    left: 285px;
    top: 85px;
    background-image: linear-gradient(to right, #ffff1f, #ffffef);
}
.system .content .item-3 {
    left: 284px;
    top: 167px;
    background-image: linear-gradient(to right, #cfff6e, #fcfff6);
}
.system .content .item-4 {
    left: 237px;
    top: 243px;
    background-image: linear-gradient(to right, #d117d1, #fcf0fc);
}

.server .pic {
    position: relative;
}
.server .pic .photo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}
.server .pic .pic-center {
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%,-50%);
}
.server .pic .pic-center img {
    width: 65%;
}

/* slogan */
.slogan {
    width: 100%;
    height: 200px;
    background-color: crimson;
    display: flex;
    justify-content: space-around;
    user-select: none;
    margin-bottom: 20px;
}
.slogan h3 {
    color: #fff;
}
.slogan .slogan-1 {
    float: left;
    padding-top: 50px;
    font-size: 30px;
}
.slogan .slogan-1 span {
    font-size: 40px;
    color: #ffff1f;
}
.slogan .slogan-2 {
    float: right;
    padding-top: 120px;
    font-size: 30px;
}
.slogan .slogan-2 span {
    font-size: 40px;
    color: #ffff1f;
}

/* Core */
.core {
    background-color: #f7f7f7;
    padding-bottom: 50px;
    user-select: none;
    margin-bottom: 20px;
}
.core-inner {
    width: 60%;
    margin: 0 auto;
}
.core .content {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.core .content .item {
    position: relative;
    width: 40%;
    height: 96px;
    border: 1px dashed #ffff;
    background-color: #d82928;
    font-size: 30px;
    color: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.core .content .item:nth-child(2n+1) {
    margin-right: 150px;
}
.core .content .item img {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding: 0 30px 0 70px;
}
.core .content .item:nth-child(2n+1)::after {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    content: '';
    width: 20px;
    height: 1px;
    background-color: #d82928;
}
.core .content .item:nth-child(2n)::before {
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    content: '';
    width: 20px;
    height: 1px;
    background-color: #d82928;
}
.core .content .content-title {
    position: absolute;
    width: 60px;
    font-size: 50px;
    line-height: 60px;
}


/* show-product */
.show-product {
    background-color: #f7f7f7;
    user-select: none;
    margin-bottom: 20px;
}
.show-product .product {
    padding-bottom: 20px;
}
.show-product .product {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.show-product .product .item {
    width: 30%;
    margin-bottom: 30px;
    text-align: center;
}
.show-product .product .item img {
    width: 100%;
}
.show-product .product .item p {
    font-size: 18px;
    padding: 10px 0;
}

/* Company */
.company {
    width: 100%;
    background-color: #f7f7f7;
    padding-bottom: 50px;
    margin-bottom: 20px;
}
.company .layout {
    display: flex;
    justify-content: center;
    align-items: center;
}
.company .content {
    padding:50px 0 20px 0;
}
.company .title {
    margin-right: 5%;
}
.company .content h3 {
    padding-top: 30px;
}
.company .content h6 {
    padding-bottom: 30px;
}
.company .context {
    width: 30%;
}
.company .context p {
    font-size: 16px;
    line-height: 30px;
    color: #333;
    text-indent: 32px;
}
.company .prove {
    padding-bottom: 30px;
    user-select: none;
}
.company .prove .item {
    margin-right: 30px;
}
.company .prove .item:last-child {
    margin-right: 0;
}
.company .contact .tel {
    margin-right: 50px;
}
.company .contact .tel img {
    width: 30px;
    height: 30px;
    padding-right: 15px;
}
.company .contact .vx {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
}