@charset "utf-8";
.banner01{ padding: 123.5px 0; background: url(../images/bg-banner.png) no-repeat top center; background-size: cover;}
.banner01 img{ width:auto; height: 244px; margin: 0 auto; display: block;}

.banner01-list{ padding-top: 27px; overflow: hidden;}
.banner01-list ul{ margin-right: -43px;}
.banner01-list ul li{ width:100%; float: left;}
.banner01-list ul li a{ margin: 43px 43px 0 0; padding: 33px; background-color: #edf6fc; display: block;}
.banner01-list ul li a .img-box{ width:304px; margin: 0 auto;}
.banner01-list ul li a .img-box .img-book{ width: 180px; height: 220px; margin: 0 auto; background-repeat: no-repeat; background-position: top center; background-size: cover; box-shadow: 2px 2px 20px 5px rgba(35, 39, 37, 0.2); position: relative;}
.banner01-list ul li a .img-box .img-book .img-book-b{ width:10px; height: 100%; background: url(../images/img-book-b.png) repeat-y top center; position: absolute; top: 0; left: 0; bottom: 0;}
.banner01-list ul li a:hover .img-box .img-book{ width: 180px; height: 220px; margin: 0 auto; background-repeat: no-repeat; background-position: top center; background-size: cover; box-shadow: 2px 2px 20px 5px rgba(11, 70, 189, 0.35); position: relative;}
.banner01-list ul li a .img-box span{ margin-top: 20px; font-size: 18px; font-weight: bold; text-align: center; display: block;}

.banner02{ padding: 117px 0; background: url(../images/bg-banner.png) no-repeat top center; background-size: cover;}
.banner02 span{ font-size: 48px; font-weight: bold; text-align: center; letter-spacing: 5px; background: -webkit-linear-gradient(top, #0dccff, #479eff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; display: block; position: relative;}
.banner02 span::before { width: 100%; height: 100%; content: attr(data-text); position: absolute; top: 0; left: 0; color: transparent; text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;}
.banner02 span::after { width: 100%; height: 100%; content: attr(data-text); position: absolute; top: 0; left: 0; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, #0dccff, #479eff);}

.nav{ height: 61px; background-color: #4b91ee;}
.nav ul{ width: calc(100% - 198px); float: left;}
.nav ul li{ width: calc(100% / 9); float: left; text-align: center;}
.nav ul li a{ font-size: 18px; color: #fff; line-height: 61px; display: inline-block; position: relative;}
.nav ul li a i{ width: 0; height: 3px; background-color: #fff; position: absolute; left: 0; right: 0; bottom: 0;}
.nav ul li a:hover{ font-weight: bold;}
.nav ul li a:hover i{ width:100%;}
.nav .search{ width: 178px; height: 37px; margin: 12px 0 12px 20px; float: right; border-radius: 18.5px; background-color: #fff; position: relative;}
.nav .search input { width: 100%; display: block; height: 100%; padding-left: 37px; padding-right: 15px; background: none;}
.nav .search button { width: 37px; height: 100%; background-color: transparent; background-image: url(); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: absolute; top: 0; left: 0; bottom: 0; cursor: pointer;}

.banner02-list{ padding-top: 27px;}
.banner02-list .lf{ width: 210px;}
.banner02-list .lf .title{ padding: 15px; background-color: #4b91ee;}
.banner02-list .lf .title span{ font-size: 20px; color: #fff; line-height: 30px; text-align: center; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.banner02-list .lf .list{ height: 576px; background-image: url(); background-repeat: no-repeat; background-position: center; background-size: 100% 100%;}
.banner02-list .rf{ width: calc(100% - 210px); padding-left: 33px;}
.banner02-list .rf .article{ width:100%; min-height: 500px;}
.banner02-list .rf .article img, .banner02-list .rf .article video{ margin: 0 auto; display: block;}