@charset "utf-8";
/* CSS Document */
body,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,select,textarea,form,p,img,div,pre,fieldset,blockquote,th,td {margin:0;padding:0;outline:none;}
html, body{ background-color: #ffffff; overflow-x: hidden;}
body{ font-family: 'Noto Sans SC', sans-serif; font-size: 100%; color:#333; line-height: 1.1;}
@media (min-width:1601px) {
    html {
        font-size: 16px !important;
    }
}

@media (min-width:1400px) and (max-width:1600px) {
    html {
        font-size: 14px !important;
    }
}

@media (min-width:640px) and (max-width:1399px) {
    html {
        font-size: 13px !important;
    }
}

@media (min-width:481px) and (max-width:639px) {
    html {
        font-size: 13px !important;
    }
}

@media (max-width:480px) {
    html {
        font-size: 13px !important;
    }
}
ul,li,ol,dl,dt,dd{list-style:none}
img{border:none;border-style: none;}
*{ margin:0; padding:0;}
input,textarea,button{ background: transparent;vertical-align:middle}
a{ color:#333; text-decoration:none;}
:focus{outline:0}
table { border-spacing: 0px; border-collapse: collapse; }
tr { cursor: pointer; }
input, textarea{ border: 0; }
textarea{resize:none}
select{ border:none;outline: none;}
video, iframe{ width:100%;}

/*href*/
a:link,a:visited{color:inherit; text-decoration:none;}
a:hover,a:active{color:#a00; text-decoration:none;}
.cfff,.cfff a:link,.cfff a:visited{color:#fff !important}
.cfff a:hover,.cfff a:active{color:#ddd}
.cccc,.cccc a:link,.cccc a:visited{color:#ccc}
.cccc a:hover,.cccc a:active{color:#ddd}
.c666,.c666 a:link,.c666 a:visited{color:#666}
.c666 a:hover,.c666 a:active{color:#a00}
.c999,.c999 a:link,.c999 a:visited{color:#999}
.c999 a:hover,.c999 a:active{color:#a00}

.bfff{ background-color: #ffffff;}

/*common*/
.wrap{ width:75%; max-width: 1440px; height: 100%; margin:0 auto;}
.l{float:left !important}
.r{float:right !important}
.o{overflow:hidden}
.c{display:block;height:0;overflow:hidden}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*zoom:1}
.hidden{display:none}
.center{text-align:center}
.img{display:block;margin:0;padding:0;width:100%;}
.flexbox{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
.lc{-webkit-box-direction:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.flex1{ flex: 1;}
/*文字超出省略*/
.ellipsis{-webkit-box-direction:normal;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.ovh1{text-overflow:ellipsis;white-space: nowrap;overflow: hidden;}
.ovh2{-webkit-line-clamp:2}
.ovh3{-webkit-line-clamp:3}
.ovh5{-webkit-line-clamp:5}

.table{ display:table; table-layout: fixed; width:100%; height:100%}
.table_cell{ display:table-cell; vertical-align:middle}

.header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 2; height: 5.3125rem; transition: all 0.3s ease;}
.header .wrap{ align-items: center;}
.logo{ display: block; background: url(../images/logo.png) no-repeat center center; background-size: 100%; width: 17.8125rem; height: 100%;}
.outer-container{ display: flex; gap: 1.25rem; max-width: 46%; margin: 0 auto; align-items: center; font-size: 0.875rem; color: #444444;}
.outer-container .active{ background-color: #d3f8ff;}
.first-item{ flex: 0 0 4.75rem; height: 1.875rem; align-items: center; justify-content: center; border-radius: 1.875rem;}
.right-container{ display: flex; flex-wrap: wrap; gap: 0.3125rem 0;}
.right-item{ flex: 0 0 16.666%; height: 1.5rem; border-radius: 1.5rem; align-items: center; justify-content: center;}
.search{ width: 18%; height: 2rem; line-height: 2rem; border-radius: 2rem; background-color: #ffffff;}
.shuru{ width: 68.4%; height: 2rem; padding: 0 7.6%; font-size: 0.875rem;}
.tijiao{ width: 16.1%; height: 2rem; background: url(../images/search.png) no-repeat center center; font-size: 0;}
.header.on, .header.on .search{ box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 10%); background-color: #ffffff;}

.box1{ padding: 50px 0;}
.box1 .wrap{ justify-content: space-between;}
.box1_left{ width: 64.5%; position: relative;}
.box_tit{}
.box_tit h1{ font-size: 1.5rem; color: #000000; font-weight: normal; line-height: 2.5rem;}
.box_tit p{ font-size: 0.875rem; color: #999999; margin-top: 0.875rem;}
.box_tit h1:before, .box_tit h1:after{ content: ''; width: 0.8125rem; height: 2.5rem; background-position: center center; background-repeat: no-repeat; background-size: 100% auto;}
.box1_tit h1:before{ background-image: url(../images/box1_tit_icon1.png); margin-right: 5px;}
.box1_tit h1:after{ background-image: url(../images/box1_tit_icon2.png); margin-left: 5px;}
.box1_book{ position: relative;}
.box1_swiper, .news_book{ height: 23.75rem; margin: 2.75rem 0 0 0; width: 90.3%; padding-bottom: 2.25rem;}
.box1_swiper .swiper-slide, .news_book li{ background-color: #f5f9f8; border-radius: 5px;}
.box1_swiper .swiper-slide a, .news_book li a{ padding: 10px 12px; justify-content: space-between;}
.box1_num{ font-size: 1rem; color: #23916a;}
.box1_con{ margin-left: 8px; flex: 1 1 0%; overflow: hidden;}
.box1_name{ font-size: 1rem; color: #282a27;}
.box1_author{ font-size: 0.75rem; color: #999999; margin-top: 0.75rem;}
.box1_img{ border-radius: 4px; overflow: hidden; width: 4.125rem; height: 5.5rem; margin-left: 1rem;}
.box1_swiper .swiper-pagination{ bottom: 0;}
.box_next, .box_prev{ background-color: #ffffff; border-radius: 100%; box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 10%); color: #333333;}
.box_next{ right: 0;}
.box_prev{ left: 0;}
.box_next:after, .box_prev:after{ font-size: 1rem; font-weight: bold;}
.box1_next, .box1_prev{ width: 2.8125rem; height: 2.8125rem;}
.box1_swiper .swiper-pagination-bullet{ width: 1.5rem; height: 2px; border-radius: 0;}
.box1_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: #c37858;}
.box1_right{ width: 27.25%;}
a.more{ font-size: 0.875rem; color: #999999;}
.more-icon{ margin-left: 0.5rem; font-style: normal; font-weight: bold; font-size: 0.5rem; font-family: swiper-icons;}
.more-icon:after{ content: 'next';}

.box2_tit h1:before{ display: none;}
.box2_tit h1:after{ background: url(../images/box2_tit.png) no-repeat right top; width: 1.6875rem;}
.box1_ul{ margin-top: 3.276rem;}
.box1_ul li{ margin-bottom: 2.5rem; font-size: 0.875rem; color: #4c4c4c; line-height: 1;}

.box2{ padding: 2.5rem 0 3.375rem;}
.box2_swiper{ padding: 10px 0; margin-top: 1.875rem;}
.box2_swiper .swiper-slide{ width: 10.7%; height: 15.4375rem; border-radius: 10px; overflow: hidden; box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 10%); background-color: #ffffff;}
.box2_bottom{ position: absolute; bottom: 0; width: 100%; height: 9.5625rem; background: url(../images/box2_bg.png) no-repeat center center; background-size: cover;}
.box2_bottom .title{ font-size: 1rem; color: #312e29; margin-top: 3.125rem;}
.box2_bottom .level{ font-size: 0.75rem; color: #844921; width: 5.25rem; line-height: 1.5; border-radius: 5px; background-color: #f7e1d3; margin: 0.625rem auto;}
.box2_bottom .desc{ font-size: 0.75rem; color: #999999; line-height: 1rem; padding: 0 0.5rem;}
.box2_next, .box2_prev{ width: 3.875rem; height: 3.875rem;}

.box3{ width: 100%;}
.box3_content{ white-space: nowrap; position: relative; height: 576px;}
.box3_content_bg{ width: 100%; height: 100%; background-color: #fff;}
.box3_content_bg .male {
    background-color: #fffcf3;
    width: 50%;
    transition: width .6s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 0;
}
.box3 .left-expand .box3_content_bg .male {
    width: calc(50vw + 444px);
    animation: width-change 1s forwards;
}
.box3_content_bg .female {
    width: 100%;
    background-color: #fff5f5;
    transition: width .6s ease;
    z-index: 0;
}
.box3 .left-expand .box3_content_bg .female {
    width: calc(50vw - 434px);
}
.box3 .left-collapse .box3_content_bg .male {
    width: calc(50vw - 454px);
    min-width: 156px;
}
.box3 .left-collapse .box3_content_bg .female {
    width: calc(50vw + 454px);
    min-width: 156px;
}
@keyframes width-change {
	to {
		min-width: 1064px
	}
}
.box3_con{width: 1440px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);}
.absolute-btn {
    border-radius: 50%;
    position: absolute;
    color: #333;
    z-index: 3;
    background: #fff;
    box-shadow: 0 6px 20px rgb(0 0 0 / 8%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .6s ease;
    font-size: 22px;
	cursor: pointer;
}
.box3_content .absolute-btn {
    width: 48px;
    height: 48px;
    bottom: 51px;
    z-index: 55;
    transition: left .6s ease;
}
.box3_content .absolute-btn:not(.disabled):hover {
    box-shadow: 0 12px 20px rgb(0 0 0 / 10%);
}
.box3_content.left-expand .absolute-btn {
    left: 1143px;
}
.box3_content.left-expand .absolute-btn:hover{
	left: 1133px;
}
.absolute-btn i {
    position: absolute;
    display: inline-block;
    width: 8px;
    height: 16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAcBAMAAACaHyIpAAAAD1BMVEUAAAAzMzMzMzMzMzMzMzNw57/sAAAABHRSTlMAX+/fG/kvcQAAADZJREFUCNdjgAAhQwjN6OIEYYi4OEMFXByhAi4C1BJgMIEKMKgAGQgpiGLaCDnBPOgM9bKwIgA3sBK6OKDbJgAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
}
.box3_content .absolute-btn i {
    width: 6px;
    height: 12px;
    transition: transform .6s ease;
}
.box3_content.left-collapse .absolute-btn {
    left: 246px;
}
.box3_content.left-collapse .absolute-btn:hover {
    left: 256px;
}
.absolute-btn.next i {
    transform-origin: center;
    transform: translate(-50%,-50%) rotate(180deg);
}
.muye-bottom-choiceness-main {
    height: 576px;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
}
.muye-bottom-choiceness-main.male {
    position: absolute;
    width: 276px;
    left: 0;
    overflow: hidden;
    transition: all .6s;
    z-index: 1;
}
.box3_content.left-expand .muye-bottom-choiceness-main.male {
    width: 1174px;
}
.mbox3_content.left-collapse .muye-bottom-choiceness-main.male {
    z-index: 11;
}
.muye-bottom-choiceness-main:last-child {
    margin-right: 0;
}
.muye-bottom-choiceness-main.female {
    right: 0;
    width: 276px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: all .6s;
}
.box3_content.left-collapse .muye-bottom-choiceness-main.female {
    width: 1174px;
    z-index: -1;
}
.muye-bottom-choiceness-main.female:before, .muye-bottom-choiceness-main.male:after{
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 100%;
	top: 0;
	background-size: 100% 100%;
}
.muye-bottom-choiceness-main.male:after {
    right: 0;
    background-color: #fff;
}
.muye-bottom-choiceness-main.female:before {
    left: 0;
    background-color: #fff;
    z-index: 11;
}
.muye-bottom-choiceness-title {
    margin-top: 78px;
    font-weight: 500;
    font-size: 28px;
    line-height: 39px;
    text-align: center;
    color: #382802;
	position: relative;
}
.left-expand .muye-bottom-choiceness-main.female h2{ margin-left: 10px;}
.left-collapse .muye-bottom-choiceness-main.male h2{ margin-right: 10px;}
.muye-bottom-choiceness-main.female:before, .muye-bottom-choiceness-main.female h2:after, .muye-bottom-choiceness-main.male:after, .muye-bottom-choiceness-main.male h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 100%;
    top: 0;
    background-size: 100% 100%;
}
.muye-bottom-choiceness-main.male h2:after {
    top: 5px;
    width: 40px;
    height: 30px;
    transition: left .6s ease;
    background-image: url(../images/bird1.png);
}
.left-expand .muye-bottom-choiceness-main.male h2:after {
    left: 41%;
}
.left-collapse .muye-bottom-choiceness-main.male h2:after {
    left: 8%;
}
.muye-bottom-choiceness-main.female h2:after {
    top: 5px;
    right: 0;
    width: 55px;
    height: 44px;
    position: absolute;
    transition: left .6s ease;
    z-index: -1;
    background-image: url(../images/bird2.png);
}
.left-collapse .muye-bottom-choiceness-main.female h2:after {
    right: 38%;
}
.left-expand .muye-bottom-choiceness-main.female h2:after {
    right: 5px;
}
.muye-bottom-choiceness-list {
    margin-top: 66px;
    display: flex;
    justify-content: flex-start;
}
.box3_content.left-collapse .muye-bottom-choiceness-main.male .muye-bottom-choiceness-list{ padding-left: 63px;}
.box3_content.left-expand .muye-bottom-choiceness-main.female .muye-bottom-choiceness-list {
    position: absolute;
    right: 0;
	padding-right: 63px;
}
.muye-bottom-choiceness-item {
    width: 132px;
}
.male .muye-bottom-choiceness-item {
    margin-left: 38px;
}
.muye-bottom-choiceness-item:first-child {
    margin-left: 0;
}
.left-collapse .muye-bottom-choiceness-main.male .muye-bottom-choiceness-list .muye-bottom-choiceness-item:not(:first-child){ display: none;}
.left-expand .muye-bottom-choiceness-main.female .muye-bottom-choiceness-list .muye-bottom-choiceness-item:not(:last-child){ display: none;}
.female .muye-bottom-choiceness-item {
    margin-left: 38px;
}
.muye-book-cover {
    position: relative;
    display: inline-block;
    width: inherit;
    height: inherit;
    overflow: visible;
    border-radius: 4px;
}
.muye-book-cover {
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
}
.muye-bottom-choiceness-cover.muye-book-cover {
    width: 130px;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
}
.muye-bottom-choiceness-item .gender-text .title {
    margin-top: 24px;
    white-space: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    color: #382802;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.muye-bottom-choiceness-main.male .gender-text .title {
    color: #382802;
}
.muye-bottom-choiceness-item .gender-text .author {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #999999;
	margin-top: 1rem;
}

.box4{ padding-top: 66px;}
.box4_tab .swiper-wrapper{ justify-content: center}
.box4_tab .swiper-slide{ cursor: pointer; width: 88px; line-height: 36px; border-radius: 36px; background-color: #f1f1f1; font-size: 14px; color: #444444; text-align: center; margin: 0 6px;}
.box4_tab .swiper-slide.swiper-slide-thumb-active{ background-color: #fe5f01; color: #ffffff;}
.box4_content{ width: 1250px; margin: 0 auto; padding: 56px 0 77px;}
.box4_content .swiper-slide{ width: 980px; margin: 0 135px; justify-content: space-between;}
.box4_left, .box4_right{ width: 480px; height: 730px; box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 10%); background-color: #ffffff; background-position: center top; background-repeat: no-repeat; background-size: 100%; overflow: hidden; border-radius: 10px;}
.box4_left{ background-image: url(../images/box4_bg1.png);}
.box4_right{ background-image: url(../images/box4_bg2.png);}
.box4_ul{ padding: 95px 30px 0;}
.box4_ul li{ position: relative; padding-left: 45px; margin-bottom: 26px; border-radius: 10px;}
.box4_ul li.on{ background-color: #ffffff; box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 10%); padding: 15px 0 15px 45px; margin-bottom: 20px;}
.box4_tit{ align-items: center; line-height: 1.2; width: 230px;}
.box4_order{ font-size: 22px; color: #23916a; margin-right: 10px;}
.box4_name{ font-size: 18px; color: #505046;}
.box4_author, .box4_desc, .box4_img{ display: none;}
.box4_author{ font-size: 14px; color: #a7a7a7; line-height: 35px;}
.box4_desc{ font-size: 14px; line-height: 19px; color: #666666; width: 230px;}
.box4_img{ position: absolute; bottom: 15px; right: 20px; width: 6.25rem; border-radius: 5px; overflow: hidden;}
.box4_ul li.on .box4_author, .box4_ul li.on .box4_desc, .box4_ul li.on .box4_img{ display: block;}
.box4_prev, .box4_next{ width: 63px; height: 63px;}
.box4_prev{ left: 5px;}
.box4_next{ right: 5px;}

.box5{ width: 100%; height: 5rem; background-color: #fafafa; font-size: 1.125rem; color: #999999;}
.box5 .wrap{ justify-content: center; align-items: center;}
.box5 a{ margin-right: 1.25rem;}

.footer{ background-color: #f1f1f1; padding: 3.25rem 0;}
.f_logo{ background: url(../images/logo.png) no-repeat center center; background-size: auto 100%; width: 100%; height: 2.875rem;}
.f_txt{ line-height: 2.125rem; margin: 1.875rem 0 1.5625rem;}
.f_tel{ font-size: 1.5rem; color: #d31200; font-weight: bold;}
.f_adr{ font-size: 1.125rem; color: #505046;}
.footer p{ font-size: 0.875rem; color: #999999; line-height: 1.75rem;}
.footer img{ vertical-align: middle;}

.content{ background-color: #fffcf3; width: 100%; padding: 3.125rem 0;}
.content .wrap{ justify-content: space-between;}
.content .box_tit h1{ justify-content: center; font-size: 2rem;}
.article{ padding: 3.125rem 7.5rem;}
.article, .article p{ font-size: 1.25rem; color: #666666; line-height: 2.25rem;}
.article p.p1{ font-size: 1.5rem;}
.email{ flex-wrap: wrap; justify-content: space-between; margin-top: 1.25rem;}
.email li{ border-radius: 1.25rem; line-height: 4.125rem; width: 31.6%; background-color: #fff5b4; text-align: center; margin-bottom: 1.75rem; color: #333333;}

.content_left{}
.content_left{ border-right: 1px solid #f5f2e9; width: 78.3%;}
.content_left .booklist li{ width: 12.6%; margin-right: 3.6%; margin-bottom: 1.75rem;}
.content_left .booklist li.muye-bottom-choiceness-item .gender-text .title{ font-size: 1.125rem; line-height: 1.375rem; height: 2.75rem; margin-top: 1.5625rem;}
.content_left .booklist li.muye-bottom-choiceness-item .gender-text .author{ font-size: 0.9375rem; margin-top: 1.25rem;}
.content_right{ width: 17.2%;}
.news_book{ width: 100%;}
.news_book li{ margin-bottom: 1.75rem;}
.content .content_left .box_tit h1, .content .content_right .box_tit h1{ justify-content: flex-start;}

.newslist{ flex-wrap: wrap; justify-content: space-between;}
.newslist li{ width: 45%; margin-right: 5%;}

.authorlist{ margin-top: 2.875rem; flex-wrap: wrap;}
.authorlist li{ position: relative; width: 18.1%; height: 25.9375rem; margin: 0 2.375% 2.125rem 0; background-color: #ffffff;}
.authorlist li:nth-child(5n){ margin-right: 0;}
.authorlist li .box2_bottom{ height: 16.25rem;}
.authorlist li .box2_bottom .title{ font-size: 1.625rem; margin-top: 5.5rem;}
.authorlist li .box2_bottom .level{ font-size: 1.25rem; width: 8.1875rem; margin: 1rem auto;}
.authorlist li .box2_bottom .desc{ font-size: 1.25rem; line-height: 1.75rem;}

.booklist{ margin-top: 3.125rem; flex-wrap: wrap;}
.booklist li{ width: 13.3%; margin: 0 4.04% 3.4375rem 0;}
.booklist li:nth-child(6n){ margin-right: 0;}
.booklist li .muye-bottom-choiceness-cover.muye-book-cover{ width: 100%; height: auto;}
.booklist li.muye-bottom-choiceness-item .gender-text .title{ font-size: 1.5rem; line-height: 1.75rem; height: 3.5rem; color: #282a27; margin-top: 2.1875rem;}
.booklist li.muye-bottom-choiceness-item .gender-text .author{ font-size: 1.25rem; margin-top: 1.5rem;}

.pagelist{text-align: center;clear: both;padding: 1.875rem 0;}
.pagelist span, .pagelist strong, .pagelist a{display: inline-block;border: 1px solid #ddd;padding: 2px 6px;margin-right: 2px;line-height: 16px;text-decoration: none;color: #666;}
.pagelist strong{background: #e13e00;color: #fff;}