﻿
/* CSS Document */

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figure{margin:0;padding:0;}
html{height:100%;}
a,u,s,del{color:#666;text-decoration:none}
fieldset ,a img,.bor0 {border:0;}
i,em,b,th{font-style:normal;font-weight:100;}
li{list-style:none}
img{vertical-align:middle ;}
table{border-collapse:collapse;}
mark{background:none;}
input,textarea{outline:none;}/*去除谷歌点击蓝色虚框*/
textarea{resize:none;}/*禁止多行文本输入框的拖动*/
.margin{margin:0 auto;width:1200px;}
header {
        z-index: 1100;
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
        font-size: 14px;
        color: #333;
        line-height: 60px;
        background-color: #fff;
        width: 100%;
        font-weight: 500;
    }
    header .margins {
        padding: 0 30px 0;
    }
    header li {
        padding: 0 15px;
        position: relative;
    }
    header li:hover {
        cursor: pointer;
    }
     header li .link {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        /* padding-left: 204px;
        left: 0; */
        bottom: 0;
        -webkit-transform: translate(-50%,100%);
        transform: translate(-50%,100%);
        left: 50%;
        background-color: #fff;
        border: 1px solid #eee;
        width: 200px;
        white-space: nowrap;
        -webkit-box-shadow: 10px 10px 5px #888888;
        box-shadow: 0px 3px 10px #bbbbbb;
    }
    header li .link a {
        display: block; 
        padding: 20px 0;
    }
    header li.hove:hover .link {
        cursor: default;
        visibility: visible;
        opacity: 1;
    }
    header li.hove:hover i.el-icon-caret-bottom {
        display: inline-block;
        transform: rotateZ(180deg);
    }
    header li .link>li {
        /* padding: 20px 0;
        display: block; */
        text-align: center;
        /* margin-top: 30px;
        margin-bottom: 45px; */
        border-bottom: 1px solid #eeeeee;
        overflow: hidden;
        position: relative;
        padding: 0;
        box-sizing: border-box;
        line-height: 35px;
        cursor: default;
    }
    header li .link>li:last-child {
        border-bottom: none;
    }
    /* header li .link a .square{
        height: 75px;
        position: absolute;
        left: -112px;
        transition: all 0.3s ease-out;
    } */
    header li .link>li:hover .underline {
        width: 100%;
    }
    header li .link a span {
        display: inline-block;
        height: 35px;
        line-height: 35px;
        position: relative;
        /* padding: 10px 0; */
        margin: 0 22px;
        cursor: pointer;
    }
    .underline {
        height: 2px;
        position: absolute;
        width: 0;
        bottom: 0;
        left: 0;
        background: #e82255;
        transition: all 0.3s ease-out;
    }
    header li .link a:hover {
        color: #e82255;
        /* background-color: #f9edef; */
    }
    header li .red {
        color: #e82255;
        /* background-color: #f9edef; */
    }
    header li .beta {
        position: absolute;
        top: 50%;
        right: -5px;
        -webkit-transform: translate(100%,-100%);
        transform: translate(100%,-100%);
    }
    .file-dropzone {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 6000;
        background: rgba(84,97,108,.8);
        text-align: center;
        padding-top: 40vh;
        color: #fff;
    }
    .file-dropzone h1 {
        margin-top: 0;
        color: #fff;
        line-height: 1.3;
        font-size: 3.75rem;
        margin-bottom: .5rem;
    }
    .file-dropzone p {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
    }
    .file-dropzone * {
        pointer-events: none;
    }
    header li.hove .product {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        /* padding-left: 204px;
        left: 0; */
        bottom: 0;
        -webkit-transform: translate(-50%,100%);
        transform: translate(-15%,100%);
        left: 50%;
        background-color: #fff;
        border: 1px solid #eee;
        color: #000;
        width: 750px;
        height: 338px;
        white-space: nowrap;
        -webkit-box-shadow: 10px 10px 5px #888888;
        box-shadow: 0px 3px 10px #bbbbbb;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px 0;
        cursor: default;
        box-sizing: border-box;
    }
    header li.hove:hover .product {
        cursor: default;
        visibility: visible;
        opacity: 1;
    }
    header li.hove .industry {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        /* padding-left: 204px;
        left: 0; */
        bottom: 0;
        -webkit-transform: translate(-50%,100%);
        transform: translate(-15%,100%);
        left: 50%;
        background-color: #fff;
        border: 1px solid #eee;
        color: #000;
        width: 620px;
        height: 260px;
        white-space: nowrap;
        -webkit-box-shadow: 10px 10px 5px #888888;
        box-shadow: 0px 3px 10px #bbbbbb;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;
        cursor: default;
        box-sizing: border-box;
    }
    header li.hove:hover .industry {
        cursor: default;
        visibility: visible;
        opacity: 1;
    }
    header li.hove .price {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        /* padding-left: 204px;
        left: 0; */
        bottom: 0;
        -webkit-transform: translate(-50%,100%);
        transform: translate(-50%,100%);
        left: 50%;
        background-color: #fff;
        border: 1px solid #eee;
        color: #000;
        width: 170px;
        height: 100px;
        white-space: nowrap;
        -webkit-box-shadow: 10px 10px 5px #888888;
        box-shadow: 0px 3px 10px #bbbbbb;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding: 18px 0;
        padding-left: 18px;
        box-sizing: border-box;
    }
    header li.hove:hover .price {
        cursor: default;
        visibility: visible;
        opacity: 1;
    }
    header li.hove .left, header li.hove .middle, header li.hove .right {
        margin-right: 20px;
        height: 100%;
        box-sizing: border-box;
    }
    header li.hove .product .right li span {
        padding: 0;
    }
    header li.hove .product .left .proItem {
        padding: 0;
    }
    .eachItem li .el-icon-right {
        opacity: 0;
        /* transition: all .7s ease ; */
    }
    .eachItem li:hover .el-icon-right {
        opacity: 1;
        animation: leftToRight 1.8s ease infinite;
        color: #e82255 !important;
        font-weight: bold !important;
    }
    @keyframes leftToRight {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(5px);
        }
        100% {
            transform: translateX(0px);
        }
    }
    .eachItem li:hover span {
        color: #e82255;
        font-weight: bold;
    }
    .eachItem li {
        line-height: 24px;
        padding: 0;
    }
    .proItem {
        box-sizing: border-box;
        float: left;
        margin-right: 6px;
        width: 170px;
        margin-bottom: 15px;
        
    }
    .proItem:nth-child(2),.proItem:nth-child(5) {
        width: 130px;
    }
    .proItem:nth-child(3),.proItem:nth-child(6) {
        width: 100px;
    }
    #navigaTwo .left .proItem:nth-child(1) .title img {
        width: 19px;
        height: 17px;
    }
    #navigaTwo .left .proItem:nth-child(2) .title img {
        width: 21px;
        height: 16px;
    }
    #navigaTwo .left .proItem:nth-child(3) .title img {
        width: 18px;
        height: 17px;
    }
    #navigaTwo .left .proItem:nth-child(4) .title img {
        width: 19px;
        height: 17px;
    }
    #navigaTwo .left .proItem:nth-child(5) .title img {
        width: 18px;
        height: 19px;
    }
    #navigaTwo .left .proItem:nth-child(6) .title img {
        width: 18px;
        height: 17px;
    }
    #navigaTwo .left .proItem .title img {
        margin-top: -3px;
    }
    .middle .proItem .title img {
        width: 19px;
        height: 16px;
        margin-top: -3px;
    }
    .right .proItem .title img {
        width: 17px;
        height: 19px;
        margin-top: -3px;
    }
    .price .proItem:nth-child(1) .title img {
        width: 19px;
        height: 17px;
    }
    .price .proItem:nth-child(2) .title img {
        width: 21px;
        height: 16px;
    }
    .price .proItem .title img {
        margin-top: -3px;
    }
    .proItem .title span {
        font-size: 16px;
        font-weight: bold;
    }
    .proItem .eachItem img{
        width: 13px;
        height: 13px;
    }
    .proItem .eachItem span {
        font-size: 14px;
        font-weight: normal;
    }
    .title {
        line-height: 40px;
    }
    .eachItem li {
        height: 24px;
    }
    #navigaTwo .left {
        margin-left: 20px;
        width: 470px;
    }
    .middle {
        width: 260px;
        background-color: #F8F0F3;
        border-radius: 8px;
    }
    .middle .proItem {
        width: 100%;
    }
    #navigaTwo .product .right {
        width: 180px;
        background-color: #F0F0F4;
        border-radius: 8px;
    }
    .middleItem {
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .middleItem .eachItem:first-child {
        margin-right: 30px;
    }
    .industry ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .industry ul li a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 160px
    }
    .industry ul li a:hover {
        color: #e82255;
    }
    .industry ul li a>div {
        height: 40px;
        line-height: 40px;
        margin-bottom: 14px;
    }
    .industry ul:nth-child(1) li:nth-child(1) a img {
        width: 41px;
        height: 37px;
    }
    .industry ul:nth-child(1) li:nth-child(2) a img {
        width: 40px;
        height: 35px;
    }
    .industry ul:nth-child(1) li:nth-child(3) a img {
        width: 41px;
        height: 36px;
    }
    .industry ul:nth-child(2) li:nth-child(1) a img {
        width: 42px;
        height: 32px;
    }
    .industry ul:nth-child(2) li:nth-child(2) a img {
        width: 40px;
        height: 36px;
    }
    .industry ul:nth-child(2) li:nth-child(3) a img {
        width: 43px;
        height: 32px;
    }
    .industry ul li a p {
        height: 20px;
        line-height: 20px;
    }
    .rightFloat {
        position: fixed;
        right: 1rem;
        bottom: 3.125rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 3.5rem;
        background-color: #FFFFFF;
        box-shadow: 1px 1px 5px 3px #00000030;
    }
    .rightFloat .floatItem {
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
        /* height: 2.5rem; */
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        line-height: 1.5;
        padding: .625rem;
    }
    .rightFloat .floatItem img {
        width: 1.5rem;
    }
    .rightFloat .floatItem:hover .noC{display: flex;}
    .rightFloat .floatItem  .noC{
        position: absolute;    
        top: -55px;
        left: -138px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 5px;
        border-radius: 5px;
        background-color: #fff;
        display: none;
        box-shadow: 1px 1px 5px 3px #00000030;
    }
    #goToTop {
        cursor: pointer;
    }

/*文本溢出 出现省略号*/
.over{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/*垂直对齐方式*/
.valign:after{content:"";display:inline-block;width:0;height:100%;vertical-align:middle;}



/*万能清除法*/
.clear{zoom:1;}
.clear:after{content:"";clear:both;display:block;}

/*鼠标手势点*/
.cu{cursor:pointer;}
/*.cu:hover{color:#bd2c00}*/

.ind2{text-indent:2em}

.flex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.j-b {
  justify-content: space-between;
}
.a-i{
align-items: center
}
.f-w{
  flex-wrap: wrap;
}

.border-r{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.margin.youqin{
  margin-top: 50px;
  color: #666;
}
.youqin a{
  color: #666;
  margin:0 10px;
}
div.book-summary,div.book-body,.body-inner{
  top: 60px;
}


.headtwo {
        width: 100%;
        min-width: 1200px;
        background-image: url(static/image/new1.jpg);
        height: 1520px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: 60px;
    }
    .headtwo .topTitle {
        text-align: center;
    }
    .headtwo .topTitle .first-title {
            font-size: 70px;
            line-height: 1;
            text-align: left;
            padding-left: 300px;
            font-weight: bold;
    }
    .headtwo .topTitle .second-title {
            font-size: 60px;
            font-weight: bold;
            line-height: 1;
            margin-top: -100px;
    }
    .headtwo .topTitle .titleP {
            font-size: 26px;
            color: #666;
            line-height: 1.4;
    }
    .headtwo .topTitle .changeWord {
            display: inline-block;
            position: relative;
            text-align: left;
            color: #E82255;
    }
    .headtwo .topTitle .changeWord::after {
            content: '|';
            position: relative;
            -webkit-animation: wordInput .8s linear infinite;
                    animation: wordInput .8s linear infinite;
    }
    .headtwo .topTitle .three-part {
            margin-top: 70px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: space-evenly;
                -ms-flex-pack: space-evenly;
                    justify-content: space-evenly;
    }
    .headtwo .topTitle .three-part .single {
            width: 18rem;
            height: 12.5rem;
    }
    .headtwo .topTitle .three-part .toolItem {
            position: relative;
            display: block;
            border-radius: 1.25rem;
            overflow: hidden;
            height: 100%;
    }
    .headtwo .topTitle .three-part .toolItem img {
                -o-object-fit: fill;
                    object-fit: fill;
                position: absolute;
                left: 50%;
                top: 0;
                -webkit-transform: translateX(-50%);
                        transform: translateX(-50%);
    }
    .headtwo .topTitle .three-part .toolItem video {
                width: 384px;
                height: 197px;
                -o-object-fit: fill;
                    object-fit: fill;
                position: absolute;
                left: 50%;
                top: 0;
                -webkit-transform: translateX(-50%);
                        transform: translateX(-50%);
    }
    .headtwo .topTitle .three-part .toolItem .textContainer {
                position: absolute;
                bottom: 0;
                left: 0;
                padding-bottom: 10px;
                color: #fff;
                font-weight: bold;
                text-align: center;
                width: 100%;
                background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
                background: linear-gradient(transparent, #000);
                font-size: 20px;
                height: 100px;
    }
    .headtwo .topTitle .three-part .toolItem .textContainer .first {
                font-weight: bold;
                position: absolute;
                bottom: 18px;
                width: 100%;
    }
    .headtwo .topTitle .three-part .toolItem .textContainer .second {
                font-size: 12px;
                position: absolute;
                bottom: 10px;
                width: 100%;
    }
	