xingyou/public/static/ebook/ebook.css

.w1200{position:relative;}
.w1024{width: 1024px;margin:0px auto;position:relative;}
.btn{background-image: linear-gradient(to right,#2990e5, #3cd2f8);width:222px;height:56px;color:#fff;line-height:56px;text-align:center;display:block;font-size:24px;border-radius:4px;transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;}
.btn:hover{transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);}

.head{background:url(./bg1.png) center center no-repeat;background-size:100% 100%;height:581px;}
.head .logolay{float:left;width:100%;margin-top:20px;}
.head .logolay img{float:left;margin-right:20px;}
.head .logolay span{float:left;height:40px;line-height:40px;font-size:26px;color:#fff;}
.head .logolay ul{float:right;width:auto;height:40px;}
.head .logolay ul li{float:left;margin-right:40px;height:40px;line-height:40px;font-size: 20px;color:#000;}
.head .leftword{position:absolute;top:114px;width:500px;left:0px;}
.head .leftword h1{float:left;color:#fff;font-size:44px;position:relative;}
.head .leftword .word1{font-size:20px;float:left;color:#fff;width:100%;line-height:40px}
.head .leftword .btn1{float:left;margin-top:30px;transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;font-size:34px;border-radius:43px;width:364px;height:86px;text-align:center;line-height:86px;background-color:#fff;color:#347aeb;}
.head .leftword .btn1:hover{transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);}
.head .leftword .word2{float:left;width:100%;font-size:14px;color:#eee;margin-top:10px;}
.head .rightgif{position:absolute;top:114px;right:-24px;cursor:pointer;width:500px;}


.btnactive{position:relative;overflow:hidden;}
.btnactive:before{content:"";position:absolute;width:200%;height:525%;left:0%;top:0%;margin-left:-50%;margin-top:-50%;border-radius:50%; background: rgba(0, 0, 0, .1); animation: spread 1.5s infinite both;
        -webkit-animation: spread 1.5s infinite both;
        -moz-animation: spread 1.5s infinite both;
        -o-animation: spread 1.5s infinite both;}

 @keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }

    @-webkit-keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }

    @-moz-keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }

    @-o-keyframes spread {
        0% {
            transform: scale(0);
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }


.nav{display: none;}
.w1024{ width: 1200px; }
body .nav{ display: block; top: 5px; }
.nav .nav-link li{padding: 12px 0;}
.head .logolay span{font-size: 28px;font-weight: 400;line-height: 38px;height: 38px;}
.head .logolay img{ width: 38px;height: 38px; }
.head .logolay {margin-top: 0;line-height:1;padding-top: 25px;}
.head .rightgif{ width: 50%; right: 0;}
.head .leftword h1{font-size: 46px;font-weight: 600; color: white; margin-bottom: 17px;}
.head .leftword{ width: 45.5%; }
.head .leftword .word1{font-size: 21px; font-weight: 400; color: white; line-height: 48px; margin-bottom: 40px;}
.head .leftword>span{font-size: 24px !important;white-space: nowrap;top: 309px !important;left: 355px !important;}
.head .leftword .btn1{ width: 330px; }
.head .leftword>span em{color: #fff600 !important;}
.head{height: 643px;}

@media screen and (max-width:1201px) {
    body{ min-width: 100%; }
    .w1024,.icos .ico{ width: 1024px; }
    .wordbg3 .pian{margin-bottom: 0;}
}

.nav {
    position:absolute;right:0px;top:9px;
}

.nav-link li {
    padding: 5px 0;
    float: left;
}

.nav-link li+li {
    margin-left: 70px;position: relative;
}

.nav-link li a {
    font-size: 16px;
    color: #fff;
    line-height: 48px;
    display: block;
    position: relative;
}

.nav-link li a:hover {
    color: #fff;
}

.nav-link li a:hover::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50%;
    left: 25%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
}

.nav-link li+li::after {
    content: "";
    position: absolute;
    left: -32px;
    height: 20px;
    top: 50%;
    margin-top: -10px;
    border-left: 1px solid #EDEDED;
}



/****   ***/
.contit {
	font-size: 2.5rem;
	margin: 0 0 3rem;
	line-height: 3rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	position: relative
}

.contit:before {
	content: '';
	position: absolute;
	width: 100px;
	height: 4px;
	background: #007fff;
	left: 50%;
	bottom: -2rem;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0)
}
.conbox {
	padding: 4rem 0;
	text-align: center
}

#index-skill .skill-box {
	padding: 2rem 0;
	flex-wrap: wrap
}

#index-skill dl {
	width: calc(25% - 12px);
	padding: 2.5rem 0;
	margin: 6px;
	background: #3892fc;
	box-shadow: 0 3px 6px rgba(0, 64, 128, 0.08);
	cursor: pointer
}

#index-skill dl:hover, #index-skill dl:focus {
	transform: scale(1.05);
	box-shadow: 0 0px 24px rgba(0, 64, 128, 0.16)
}

#index-skill dl dd {
	color: #fff;
	font-size: 1.25rem;
	padding: 0.5rem 0
}



/****/



.titleh2css {
    height: 46px;
    font-size: 36px;
    font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
    font-weight: bold;
    color: #1F2227;
    line-height: 42px;
    margin-top: 80px;
    text-align: center;
}


/* whyChoiceUs */

.whyChoiceUs {
    height: 658px;
    background: #F7F8FA;
    position: relative;
    overflow: hidden;
}

.whylist {
    width: 1200px;
    height: auto;
    margin: 70px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.whyitems {
    width: 344px;
    height: 372px;
    background: #FFFFFF;
    box-shadow: 0px 8px 30px 0px rgba(12, 51, 152, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

.whyitems>img {
    display: block;
    width: 344px;
    height: 230px;
    margin: 0 auto;
}

.whyitems>h3 {
    height: 24px;
    font-size: 20px;
    font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
    font-weight: 400;
    color: #1F2227;
    line-height: 24px;
    margin-top: 24px;
    box-sizing: border-box;
    padding: 0 20px;
}

.whyitems>p {
    font-size: 16px;
    font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
    font-weight: 400;
    color: #717F94;
    line-height: 24px;
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 20px;
}

/**  **/


.eboox {
    height: 818px;
    position: relative;
    overflow: hidden;
}

.eboox>.titleh2css {
    height: 46px;
    font-size: 36px;
    font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
    font-weight: bold;
    color: #1F2227;
    line-height: 42px;
    margin: 90px auto 0 auto;
}

.eboox>h3 {
    height: 29px;
    font-size: 22px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #78818E;
    line-height: 26px;
    margin-top: 20px;
    text-align: center;
}

.ebooxbanner {
    display: flex;
    width: 1200px;
    height: auto;
    justify-content: space-between;
    align-items: flex-start;
    margin: 115px auto 0 auto;
}

.ebooxleft {
    position: relative;
    top: 0px;
}

.ebooxitem {
    height: 120px;
    box-sizing: border-box;
    padding-left: 43px;
    border-left: none;
    position: relative;
    box-sizing: border-box;
    border-left: 2px dashed rgba(22, 31, 45, 0);
}

.ebooxitem>i {
    display: block;
    width: 38px;
    height: 38px;
    position: absolute;
    left: -21px;
    right: auto;
    top: -20px;
    bottom: auto;
}

.ebooxitem>.emsg {
    width: 454px;
    height: 120px;
    border-radius: 16px 16px 16px 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 30px 0 24px;
    top: -50px;
}

.ebooxitem:hover>.emsg , .ebooxitem.active>.emsg{
    background: linear-gradient(138deg, #3593FF 0%, #267DFF 100%);
    box-shadow: 0px 2px 14px 0px rgba(11, 89, 195, 0.36);
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
}

.ebooxitem>.emsg>h2 {
    height: 29px;
    font-size: 22px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #3F4753;
    line-height: 26px;
}

.ebooxitem:hover>.emsg>h2 ,.ebooxitem.active>.emsg>h2{
    height: 29px;
    font-size: 22px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 26px;
}

.ebooxitem>.emsg>p {
    font-size: 16px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #585F67;
    line-height: 19px;
    margin-top: 8px;
}

.ebooxitem:hover>.emsg>p,.ebooxitem.active>.emsg>p {
    color: #FFFFFF;
}

.zhinanrightimgshowbox {
    width: 674px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.zhinanrightimgshowbox>img {
    display: none;
}

.zhinanrightimgshowbox>.img1.active {
    display: block;
    width: 590px;
    height: 412px;
    box-shadow: 2px 2px 6px #eee, -2px -2px 6px #eee;
}


.ebook-down-btn{
    width: 230px !important;
    height: 60px !important;
    border-radius: 10px !important;
    font-size: 24px !important;
    line-height: 60px !important;
}
.ebook-down-btn span{
    line-height: 60px !important;
}