blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img {
    border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal
}

ol, ul {
    list-style: none
}

caption, th {
    text-align: left
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%
}

q:after, q:before {
    content: ''
}

abbr, acronym {
    border: 0
}

a {
    color: #333;
    text-decoration: none;
    outline: 0
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset
}

abbr, acronym {
    border: 0;
    font-variant: normal
}

del {
    text-decoration: line-through
}

textarea {
    resize: none
}

body {
    min-width: 1300px;
    background: #eae6df;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Microsoft Sans Serif", Arial, sans-serif;
}

.fl {
    float: left
}

.fr {
    float: right
}

@font-face {
    font-family: iconfont;
    src: url(https://s1.howtozen.com/assets/fonts/iconfont.eot);
    src: url(https://s1.howtozen.com/assets/fonts/iconfont.eot@#iefix) format('embedded-opentype'), url(https://s1.howtozen.com/assets/fonts/iconfont.woff2) format('woff2'), url(https://s1.howtozen.com/assets/fonts/iconfont.woff) format('woff'), url(https://s1.howtozen.com/assets/fonts/iconfont.ttf) format('truetype'), url(https://s1.howtozen.com/assets/fonts/iconfont.svg#iconfont) format('svg')
}

.iconfont {
    font-family: iconfont, sans-serif !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.f-banner {
    width: 1301px;
    height: 380px;
    display: block;
    margin: 0 auto;
    position: relative;
    background: #000000
}

.f-banner-content {
    width: 1301px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative
}

.f-banner-content .f-banner-left {
    width: 168px;
    height: 100%;
    display: block;
    margin: 0 auto;
    background: #473b2b url(https://s1.howtozen.com/assets/img/pc/flame.png) center top no-repeat;
    position: relative;
    z-index: 2
}

.f-banner-content .f-banner-left p {
    width: 165px;
    height: auto;
    display: block;
    text-align: center;
    color: #FFFFFF;
    line-height: 26px;
    font-size: 14px;
    padding-top: 14%;
    letter-spacing: 2px;;
    padding-left: 3px
}

.f-banner-content .f-banner-left img {
    width: 133px;
    height: auto;
    display: block;
    margin: 62% auto 0 auto
}

.f-banner-content .f-banner-right {
    width: 1133px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.f-banner-content .swiper-1 {
    background: url(https://s1.howtozen.com/assets/img/pc/banner1.jpg) center center no-repeat;
    background-size: auto 100%
}

.f-banner-content .swiper-2 {
    background: url(https://s1.howtozen.com/assets/img/pc/banner2.jpg) center center no-repeat;
    background-size: auto 100%
}

.f-banner-content .swiper-3 {
    background: url(https://s1.howtozen.com/assets/img/pc/banner3.jpg) center center no-repeat;
    background-size: auto 100%
}

.f-banner-content .f-banner-right p {
    width: auto;
    display: block;
    height: auto;
    color: #d9bc92;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 1px;
    position: absolute;
    left: 120px;
    top: 42%;

}

.f-banner-content .f-banner-right img {
    width: 100%;
    height: 380px
}

.f-fo {
    width: auto;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 0
}

.f-fo img {
    width: auto;
    display: block;
    height: 100%;
    margin: 0 auto
}

.f-text {
    width: 1300px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    border-right: 1px solid #b19d7e
}

.f-nav {
    width: 168px;
    display: block;
    height: 100%;
    overflow: hidden;
    background: #98866b;
    word-break: break-all;
    padding-bottom: 9999px;
    margin: 0 auto -9999px
}

.f-nav dl {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
    padding-bottom: 20px
}

.f-nav dl dt {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

.f-nav dl dt a {
    width: 100%;
    color: #FFFFFF;
    font-size: 16px;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 8px 0;

}

.f-nav dl .list_dt {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    color: #FFFFFF;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative
}

.f-nav dl .list_dt p {
    width: 100%;
    color: #FFFFFF;
    font-size: 18px;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 15px 0
}

.f-nav dl .list_dt .list_dt_icon {
    width: 15px;
    height: 30px;
    background: url(https://s1.howtozen.com/assets/img/pc/triangle.png) center center no-repeat;
    display: block;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    margin: -10px auto 0 auto
}

#open .list_dt_icon {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg)
}

.list_dd {
    display: none;
    margin-top: 5px
}

.list_dd li {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

.list_dd li a {
    width: 100%;
    color: #FFFFFF;
    font-size: 14px;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 3px 0
}

.f-list {
    width: 1132px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    background: #FFFFFF;
    border-bottom: 1px solid #b19d7e
}

.f-list-news {
    padding-bottom: 50px
}

.f-list-top {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-list-top .f-list-top-t {
    width: 33%;
    height: 105px;
    display: block;
    float: left
}

.f-list-top .f-list-top-t:last-child {
    width: 34%
}

.f-list-top .f-list-top-t:last-child ul {
    width: 500px;
    border-right: none
}

.f-list-top .f-list-top-t h2 {
    width: 100%;
    height: 104px;
    display: block;
    margin: 0 auto;
    position: relative
}

.f-list-top .f-list-top-t h2 img {
    width: 100%;
    height: 104px;
    display: block;
    margin: 0 auto
}

.f-list-top .f-list-top-t h2 span {
    width: 67px;
    height: 67px;
    display: block;
    border-radius: 100px;
    background: #98866b;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    position: absolute;
    top: 72px;
    left: 35px
}

.f-list-top .f-list-top-t h2 span em {
    padding-top: 15px;
    display: block;
    font-weight: 100;

}

.f-list-top .f-list-top-t ul {
    width: 500px;
    height: 173px;
    display: block;
    margin: 0 auto;
    border-right: 1px solid #b19d7e;
    padding-top: 52px
}

.f-list-top .f-list-top-t ul li {
    width: 500px;
    display: block;
    height: 38px;
    margin: 0 auto;
    padding: 4px 0;
    overflow: hidden
}

.f-list-top .f-list-top-t ul li a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: #000000;
    overflow: hidden
}

.f-list-top .index-tip-ls1 {
    width: 50%;
}

.f-list-top .index-tip-ls2 {
    width: 50%;
}

.f-list-top .index-tip2-ls1 {
    width: 50%;
}

.f-list-top .index-tip2-ls2 {
    width: 50%;
}

.f-notice {
    width: 95%;
    height: auto;
    display: block;
    padding-left: 33px;
    padding-bottom: 30px;
    position: relative
}

.f-notice a {
    display: block;
    font-size: 20px;
    color: #98866b;

}

.f-list-bottom {
    margin: 0 auto
}

.f-list-bottom .f-list-top-t ul {
    padding: 0;
    border: none;
    height: auto
}

.f-list-bottom .f-list-top-t {
    width: 50%;
    height: auto;
    display: block;
    float: left;
    border-bottom: none
}

.f-notice-f {
    padding: 76px 51px 47px 0
}

.f-notice-f a {
    width: auto;
    float: right
}

.f-notice-f .f-notice {
    width: auto;
    float: left
}

.f-footer {
    width: 1301px;
    height: 339px;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-footer .f-footer-left {
    width: 168px;
    height: 100%;
    display: block;
    float: left
}

.f-footer .f-footer-left img {
    width: 100%;
    height: 100%;
    display: block
}

.f-footer .f-footer-right {
    width: 1133px;
    height: 339px;
    display: block;
    float: right;
    position: relative;
    border-top: 1px solid #b19d7e
}

.f-footer .f-footer-right ul {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
    text-align: center;
    padding-top: 85px
}

.f-footer .f-footer-right ul li {
    width: 150px;
    height: 135px;
    display: inline-block
}

.f-footer .f-footer-right ul li img {
    width: 110px;
    height: 110px
}

.f-footer .f-footer-right ul li p {
    font-size: 16px;
    color: #373533;
    text-align: center
}

.f-footer .f-footer-right .f-copyright {
    width: 100%;
    text-align: center;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 20px;
    color: #b2b2b2;
    font-size: 12px
}

.f-footer .f-footer-right .f-copyright a {
    vertical-align: middle;
    display: inline-block;
    padding-right: 5px
}

.f-banner-about {
    width: 1301px;
    background: url(https://s1.howtozen.com/assets/img/pc/fo_img2.jpg) center center no-repeat
}

.f-banner-about .f-banner-right p strong {
    width: 80px;
    height: 80px;
    display: block;
    background: #98866b;
    text-align: center;
    border-radius: 100px;
    color: #f8e2c3;
    font-weight: 100;
    font-size: 20px;
    line-height: 25px;
    margin: 0 auto 15px auto
}

.f-banner-about .f-banner-right p {
    min-width: 220px;
    left: 85px;
    top: 155px;
    letter-spacing: 4px;
    text-align: center
}

.f-banner-about .f-banner-right p strong i {
    font-style: initial;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
    letter-spacing: 1px
}

.f-flower {
    width: auto;
    position: absolute;
    margin-left: -135px
}

.f-flower img {
    width: auto;
    height: 414px;
    display: block
}

.f-list-about {
    padding: 30px 0
}

.f-list-about p {
    font-size: 16px;
    color: #000000;
    padding-bottom: 30px;
    line-height: 1.625;

}

.f-about-text-l {
    width: 416px;
    display: block;
    height: auto;
    margin: 0 auto;
    padding-left: 85px;
    padding-right: 65px;
    position: relative
}

.f-list-about p strong {
    font-family: "Times New Roman", sans-serif;
    font-size: 20px;
    color: #000000;
    font-weight: 700;
}

.f-about-text-l:before {
    content: '';
    width: 1px;
    height: 100%;
    background: #b4a184;
    position: absolute;
    right: 0
}

.f-about-text-r {
    width: 415px;
    display: block;
    height: auto;
    margin: 0 auto;
    padding-left: 65px;
    padding-right: 85px
}

.f-banner-reveal .f-banner-right p {
    top: 176px
}

.f-list-receal {
    width: 1082px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center
}

.f-list-receal ul {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2
}

.f-list-receal ul li {
    width: 426px;
    display: block;
    margin: 0 auto;
    height: auto;
    padding: 10px 0
}

.f-list-receal .f-receal-active:after {
    content: '';
    width: 1px;
    height: 100%;
    background: #b4a184;
    position: absolute;
    left: 530px;
    top: 0
}

.f-list-receal ul li a {
    width: 100%;
    font-family: "Trebuchet MS", "Helvetica Neue", "San Francisco", -apple-system, sans-serif;
    font-size: 16px;
    color: #473a2b;
    display: block;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left
}

.f-page {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    padding-top: 40px;
    text-align: center
}

.f-page a {
    font-size: 13px;
    border: 1px solid #d1cdc6;
    color: #a39e96;
    margin: 0 3px;
    text-decoration: none;
    display: inline-block;
    width: 32px;
    height: 25px;
    text-align: center;
    line-height: 25px
}

.f-page a:first-child {
    width: 66px;
    margin-left: 0
}

.f-page a:last-child {
    width: 66px;
    margin-right: 0
}

.f-page a.active {
    color: #000000;
    cursor: default;
    border: none
}

.f-banner-clean {
    background: #010101
}

.f-banner-clean .f-flower {
    width: auto;
    position: absolute;
    margin-right: 90px;
    right: 0;
    z-index: 9
}

.f-list-clean ul {
    padding: 0 85px;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-list-clean ul li {
    width: 142px;
    height: 183px;
    display: block;
    float: left;
    border-bottom: 1px solid #c2b39b;
    margin: 0 25px 50px auto
}

.f-list-clean ul li a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto
}

.f-list-clean ul li a p {
    width: 100%;
    height: 142px;
    display: block;
    margin: 0 auto;
    padding-bottom: 0;
    overflow: hidden;
    position: relative
}

.f-list-clean ul li a p img {
    width: 142px;
    height: auto;
    display: block
}

.f-list-clean ul li a p em {
    width: 100%;
    height: 40px;
    display: block;
    background: url(https://s1.howtozen.com/assets/img/pc/f_bg3.png) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 12px;
    vertical-align: middle
}

.f-list-clean ul li a p em img {
    width: 15px;
    height: 15px;
    display: inline-block;
    padding-left: 20px;
    padding-right: 6px;
    vertical-align: middle;
    margin-top: -3px
}

.f-list-clean ul li a span {
    width: 100%;
    display: block;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
    font-family: "Trebuchet MS", "Helvetica Neue", "San Francisco", -apple-system, sans-serif;
    font-size: 15px;
    color: #473a2b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.f-clean-details {
    padding: 0 85px;
    width: 967px;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-clean-details .f-cliean-img {
    width: 230px;
    height: 230px;
    display: block;
    margin: 0 auto;
    position: relative
}

.f-clean-details .f-cliean-img img {
    width: 230px;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-clean-details .f-cliean-text {
    width: 687px;
    height: 187px;
    min-height: 163px;
    display: block;
    border-bottom: 1px solid #b6a385;
    border-top: 1px solid #b6a385;
    padding-left: 30px;
    margin: 0 auto 0 20px;
    padding-top: 20px;
    padding-bottom: 21px
}

.f-clean-details .f-cliean-text p {
    color: #010101;
    font-size: 16px;
    text-align: justify;
    padding-bottom: 0;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical
}

.f-clean-details .f-cliean-text p strong {
    color: #98866b;
    font-weight: 400;
    line-height: 35px;
    padding-bottom: 19px;
    font-size: 30px;
    display: block;
    width: 90%;

}

.f-wrap {
    width: 20px;
    height: 10px;
    margin: 0 auto;
    float: left
}

.f-wrap .music {
    display: none
}

.f-wrap dl {
    position: absolute;
    bottom: -5px;
    display: inline-block;
    vertical-align: baseline;
    font-size: 0
}

.f-wrap dl dd {
    background-color: #b6a385;
    margin-left: 2px;
    display: inline-block;
    width: 2px;
    height: 10px
}

.m1 {
    -webkit-animation: .8s .1s living linear infinite backwards normal;
    animation: .8s .1s living linear infinite backwards normal;
    -webkit-animation-delay: -1.1s
}

.m2 {
    -webkit-animation: .8s .3s living linear infinite backwards normal;
    animation: .8s .3s living linear infinite backwards normal;
    -webkit-animation-delay: -1.3s
}

.m3 {
    -webkit-animation: .8s .6s living linear infinite backwards normal;
    animation: .8s .6s living linear infinite backwards normal;
    -webkit-animation-delay: -1.6s
}

@-webkit-keyframes living {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 10px;
        transform-origin: 0 10px
    }
    50% {
        -webkit-transform: scaleY(.3);
        transform: scaleY(.3);
        -webkit-transform-origin: 0 10px;
        transform-origin: 0 10px
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 10px;
        transform-origin: 0 10px
    }
}

@keyframes living {
    0% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 10px;
        -ms-transform-origin: 0 10px;
        transform-origin: 0 10px
    }
    50% {
        -webkit-transform: scaleY(.3);
        -ms-transform: scaleY(.3);
        transform: scaleY(.3);
        -webkit-transform-origin: 0 10px;
        -ms-transform-origin: 0 10px;
        transform-origin: 0 10px
    }
    100% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 10px;
        -ms-transform-origin: 0 10px;
        transform-origin: 0 10px
    }
}

.current .f-wrap .music {
    display: block
}

.f-banner-works {
    background: #000 url(https://s1.howtozen.com/assets/img/pc/f_bg3.jpg) center center no-repeat
}

.f-list-works ul {
    width: 962px;
    display: block;
    margin: 0 auto;
    padding: 0 80px 40px
}

.f-list-works li {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 30px 0;
    border-top: 1px solid #b6a385;
    overflow: hidden;
    position: relative
}

.f-list-works .f-works-img {
    width: 167px;
    display: block;
    height: auto;
    margin: 0 auto;
    float: left;
    position: relative;
    cursor: pointer
}

.f-list-works .f-works-img img {
    width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 6;
    border-radius: 0 8px 8px 0
}

.f-list-works .f-works-text {
    width: 759px;
    display: block;
    float: left;
    padding-left: 35px
}

.f-list-works .f-works-text h3 {
    font-size: 22px;
    color: #98866a;
    padding-bottom: 10px;
    width: 54%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;;
    font-weight: 400
}

.f-list-works .f-works-text p {
    padding-bottom: 0;
    color: #98866b;
    font-size: 14px;
    line-height: 25px;
    padding-top: 10px
}

.f-list-works .f-works-btn {
    width: 350px;
    height: 38px;
    display: block;
    float: right;
    position: absolute;
    right: 0;
    top: 20px
}

.f-list-works .f-works-btn a {
    width: 155px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    text-align: center;
    color: #98866b;
    font-size: 14px;
    border: 1px solid #b29e7f;
    margin-left: 15px
}

.f-list-works .f-works-btn a:hover {
    background: #98866b;
    color: #fff
}

.f-list-works .f-works-img:hover:after {
    transition: all .8s;
    opacity: 1
}

.f-list-works .f-works-img:after {
    content: '';
    width: 167px;
    height: 245px;
    display: block;
    background: url(https://s1.howtozen.com/assets/img/pc/w_bg.png) right center no-repeat;
    position: absolute;
    top: -3px;
    right: -8px;
    z-index: 0;
    background-size: auto 92%;
    opacity: 0
}

.f-text-notice {
    width: 1300px;
    overflow: initial;
    position: relative;
    z-index: 5;
    clear: both;
    height: auto;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #b19d7e;
    background: #fff
}

.f-text-notice .f-list {
    width: 1131px;
    height: auto;
    min-height: 1015px;
    overflow: initial;
    margin-top: -260px;
    border-bottom: none;
    border-top: 1px solid #b19d7e;
    padding-bottom: 0;
    margin-bottom: 0;
    border-right: 1px solid #b19d7e
}

.f-text-notice .f-list-works .f-notice-t {
    width: 820px;
    padding-bottom: 10px
}

.f-text-notice .f-nav {
    height: 575px;
    padding-bottom: 0;
    margin-bottom: 0
}

.f-banner-notice {
    background: #ebe4d8 url(https://s1.howtozen.com/assets/img/pc/l_img4.jpg) center center no-repeat;
    width: 1300px
}

.f-banner-notice .f-banner-content {
    width: 1300px
}

.f-notice-t {
    width: 820px;
    height: auto;
    display: block;
    padding: 0 85px
}

.f-notice-t h1, .f-notice-t h2 {
    color: #98866b;
    font-size: 15px;
    width: 30%;
    display: inline-block;;
    font-weight: 400;
    padding-right: 0;
    float: left;
    text-align: left
}

h1.announcement-title {
    margin-bottom: 10px;
    display: block;
    float: none
}

.f-notice-t h5 {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding-top: 40px
}

.f-notice-t p {
    padding-bottom: 0;
    color: #000000;
    line-height: 28px;
    display: block;
    margin: 0;
    text-align: justify
}

.f-notice-t p strong {
    display: block;
    width: 100%;
    font-weight: 400
}

.f-notice-t p em {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px
}

.f-notice-t p i {
    font-style: normal;
    padding-left: 10px
}

.f-reveal-t .f-reveal-time {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 0;
    border-bottom: 1px solid #d9bc92;
    color: #98866b;
    font-size: 15px;
    padding-bottom: 5px;
    text-align: right
}

.f-reveal-t p {
    line-height: 32px;
    display: block;
    text-indent: 32px;
    padding-bottom: 25px
}

.f-announcement p {
    text-indent: 0 !important
}

.f-reveal-t .f-reveal-time strong {
    display: inline-block;
    width: auto;
    font-weight: 400;
    padding-left: 17px;
    font-size: 16px
}

.f-article .f-reveal-time strong {
    display: inline-block;
    width: 33%
}

.f-reveal-t .f-reveal-time .f-yd {
    display: inline-block;
    min-width: 100px;
    text-align: right
}

.f-reveal-t h1, .f-reveal-t h3 {
    color: #111111;
    font-family: "Times New Roman", sans-serif;
    font-size: 34px;
    width: 100%;
    height: auto;
    padding: 50px 0;;
    font-weight: 400
}

.f-reveal-t .f-reveal-fot {
    padding-bottom: 4px;
    color: #98866b;
    font-size: 13px;
    border-bottom: 1px solid #d9bc92
}

.f-reveal-t .f-reveal-fot p {
    padding: 0;
    min-width: 150px;
    display: inline-block;
    text-align: left;
    text-indent: 0;
    color: #98866b;
    font-size: 13px
}

.f-reveal-t .f-reveal-fot .f-share {
    max-width: 213px;
    display: inline-block
}

.f-reveal-t .f-reveal-fot .f-share a {
    color: #98866b;
    font-size: 13px;
    padding-left: 10px
}

.f-reveal-t .f-reveal-fot .f-bj {
    min-width: 304px;
    display: inline-block;
    text-align: right
}

.f-reveal-t .f-reveal-btn {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: 45px;
    overflow: hidden;
    position: relative;
    padding-bottom: 30px
}

.f-reveal-t .f-reveal-btn:before {
    content: '';
    width: 1px;
    height: 65px;
    background: #d9bc92;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 45px
}

.f-reveal-t .f-reveal-btn a {
    display: inline-block;
    color: #98866b;
    padding-bottom: 10px;
    font-size: 20px
}

.f-book table {
    max-width: 600px;
    border: 1px solid #d9bc92;
    font-size: 15px;
    color: #000000
}

.f-book table thead {
    background: #eee6db
}

.f-book table thead th {
    border: 1px solid #d9bc92;
    padding: 5px 0
}

.f-book table thead th {
    padding-left: 20px
}

.f-book table tbody td {
    padding: 5px 0;
    border: 1px solid #d9bc92;
    color: #000000
}

.f-book table tbody td span {
    padding-left: 0;
    font-weight: 400
}

.f-book .f-form tbody td span {
    padding-left: 20px;
    font-weight: 400
}

.f-book table tbody td strong {
    padding-left: 20px;
    font-weight: 400
}

.f-book .f-form tbody td strong {
    padding-left: 0;
    font-weight: 400
}

.f-reveal-t .f-bj {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: right;
    padding-bottom: 50px;
    padding-top: 20px;
    font-size: 16px
}

.f-book table tbody .f-book-td {
    text-align: center
}

.f-text-notice .f-list-works .f-book h4 {
    width: 100%;
    display: block;
    color: #98866b;
    font-size: 20px;
    padding-top: 40px;
    padding-bottom: 15px;
    font-weight: 400;

}

.f-book-td .f-reduce {
    display: inline-block;
    cursor: pointer;
    padding-right: 10px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none
}

.f-book-td .f-reduce em {
    padding: 0 10px
}

.f-book-td .loge {
    display: inline-block;
    vertical-align: middle;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none
}

.f-book-td .f-add {
    display: inline-block;
    cursor: pointer;
    padding-left: 10px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none
}

.f-book-td .f-add em {
    padding: 0 10px
}

.f-book a {
    width: 80px;
    height: 35px;
    display: block;
    line-height: 35px;
    text-align: center;
    color: #FFFFFF;
    font-size: 15px;
    margin: 30px auto 50px auto;
    background: #98866b
}

.f-form {
    text-align: center
}

.f-form td input {
    width: 80%;
    padding: 5px 8%;
    background: #f3f1ed;
    height: 100%;
    display: block;
    border: none;
    outline: 0;
    color: #929292;
    font-size: 15px
}

.f-form td input:focus {
    outline: 0
}

#distpicker1 select {
    width: 161px;
    display: block;
    float: left;
    height: 39px;
    border-right: 1px solid #d9bc92;
    border-top: none;
    border-left: none;
    border-bottom: none;
    font-size: 15px;
    color: #000000;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #f3f1ed url(https://s1.howtozen.com/assets/img/pc/triangle2.png) no-repeat 93% 17px;
    padding-left: 15px
}

.f-book table tbody .f-seleft {
    padding: 0
}

.f-form td select:focus {
    outline: 0
}

.f-form td input::-webkit-input-placeholder {
    font-size: 12px;
    color: #ccc
}

.f-form td input:-moz-placeholder {
    color: #ccc;
    font-size: 12px
}

.f-form td input::-moz-placeholder {
    color: #ccc;
    font-size: 12px
}

.f-form td input:-ms-input-placeholder {
    color: #ccc;
    font-size: 12px
}

select::-ms-expand {
    display: none
}

.f-form .f-address strong {
    display: block;
    padding-left: 15px;
    width: 69px;
    text-align: left;
    float: left;
    line-height: 28px;
    font-weight: 100
}

.f-form .f-address input {
    float: left;
    display: block;
    width: 374px;
    padding: 5px 3%
}

.f-text-notice .f-list-works .f-book2 h4 {
    border-bottom: 2px solid #d9bc92;
    margin-bottom: 20px;
    padding-bottom: 10px
}

.f-text-notice .f-list-works .f-book2 {
    color: #010101
}

.f-book2-total {
    width: 100%;
    height: auto;
    display: block;
    margin: 25px auto 10px auto
}

.f-book2-total dl {
    width: 100%;
    display: block;
    text-align: left;
    margin: 0 auto
}

.f-book2-total dl dd {
    display: inline-block;
    min-width: 140px;
    font-size: 16px;
    color: #010101;
    font-weight: 800
}

.f-payment {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 30px auto
}

.f-payment dl dd {
    min-width: 180px;
    display: inline-block;
    text-align: center
}

.f-payment dl dd img {
    width: 135px;
    display: block
}

.f-payment dl dd p {
    width: 135px;
    text-align: center;
    padding-top: 5px;
    font-size: 15px;
    color: #000000
}

.swiper-container {
    width: 100%;
    height: 380px;
    position: absolute;
    top: 0
}

.swiper-slide {
    width: 100%;
    height: 380px;
    background-position: center;
    background-size: cover
}

.f-banner-content .f-banner3 p {
    font-size: 24px;
    line-height: 40px
}

.f-article {
    padding-bottom: 40px
}

.f-article h3 {
    padding: 40px 0
}

.f-article img {
    padding: 30px 0;
    display: block;
    width: 400px
}

.f-article p {
    padding-bottom: 15px
}

.f-article span {
    color: #000000;
    line-height: 28px;
    margin: 0 auto;
    padding-bottom: 15px;
    text-align: justify
}

.f-article-text {
    padding-bottom: 50px
}

.f-article .f-reveal-fot {
    position: relative;
    border-bottom: none
}

.f-article .f-reveal-fot:after {
    content: '';
    width: 1px;
    height: 20px;
    background: #dabe96;
    position: absolute;
    right: 205px;
    top: 6px
}

.f-article .f-reveal-fot:before {
    content: '';
    width: 1px;
    height: 20px;
    background: #dabe96;
    position: absolute;
    left: 192px;
    top: 6px
}

.f-article .f-reveal-fot a {
    font-size: 14px;
    color: #000000;
    width: 32%;
    height: 30px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    line-height: 30px
}

.article-content, .article-content p {
    margin-top: 8px;
    color: #000000;
    font-size: 18px;;
    line-height: 1.667
}

.article-content {
    margin-top: 2rem
}

.article-content p strong {
    display: inline;
    font-weight: 600;
    font-size: 18px;
    color: #333333
}

.f_toolbar {
    position: fixed;
    z-index: 1001;
    top: 16%;
    width: 45px;
    height: 192px;
    right: 0;
    left: 0;
    margin: 0 auto
}

.f-toolbar_btn {
    position: absolute;
    top: 100%;
    height: auto;
    width: 45px;
    margin-left: 460px;
    background: #FFFFFF;
    border: 1px solid #d9bc92;
    border-bottom: none
}

.f-toolbar_click {
    width: 45px;
    height: 45px;
    border-bottom: 1px solid #d9bc92;
    line-height: 45px;
    font-family: "Trebuchet MS", "Helvetica Neue", "San Francisco", -apple-system, sans-serif;
    font-size: 12px;
    letter-spacing: -0.03rem;
    text-align: center;
    color: #c1b39e
}

.f-toolbar_btn .f-toolbar_btn-a, .f-toolbar_btn .f-toolbar_btn-a .f-toolbar_samp {
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    border-bottom: 1px solid #d9bc92;
    cursor: pointer;
    line-height: 45px
}

.f-toolbar_btn .f-toolbar_btn-a .f-toolbar_samp {
    font-size: 13px;
    width: 45px;
    color: #c1b39e;
    background: #FFFFFF;
    text-align: center
}

.f-toolbar_btn .f-toolbar_btn-a .f-toolbar_div {
    font-size: 13px;
    font-style: normal;
    line-height: 45px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 45px;
    display: block;
    overflow: hidden;
    width: 0;
    height: 45px;
    -webkit-transition: all .4s cubic-bezier(.2, .83, .42, .91);
    transition: all .4s cubic-bezier(.2, .83, .42, .91);
    text-align: center;
    color: #fff
}

.f-toolbar_btn .f-toolbar_btn-a .f-toolbar_div p {
    font-size: 16px;
    color: #c1b39e;
    padding-bottom: 0;
    line-height: 45px
}

.f-toolbar_btn .f-toolbar_btn-a .f-toolbar_fx p {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.f-toolbar_btn .f-toolbar_btn-a .f-toolbar_fx a {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
    color: #c1b39e
}

.f-toolbar_btn .f-toolbar_btn-ab {
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    border-bottom: 1px solid #d9bc92;
    cursor: pointer;
    line-height: 45px
}

.f-toolbar_btn .f-toolbar_btn-ab:hover .f-toolbar_div {
    height: 200px
}

.f-toolbar_btn .f-toolbar_btn-ab .f-toolbar_samp {
    font-size: 13px;
    width: 45px;
    color: #c1b39e;
    background: #FFFFFF;
    text-align: center
}

.f-toolbar_btn .f-toolbar_btn-ab .f-toolbar_samp {
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    border-bottom: 1px solid #d9bc92;
    cursor: pointer;
    line-height: 45px
}

.f-toolbar_btn .f-toolbar_btn-ab .f-toolbar_div {
    font-size: 13px;
    font-style: normal;
    line-height: 45px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    width: 45px;
    height: 0;
    -webkit-transition: all .5s cubic-bezier(.2, .83, .42, .91);
    transition: all .5s cubic-bezier(.2, .83, .42, .91);
    text-align: center;
    color: #FFFFFF;
    margin-top: 45px
}

.f-toolbar_btn .f-toolbar_btn-ab .f-toolbar_div a {
    display: block;
    color: #c1b39e;
    height: 33px;
    margin: 0 auto
}

.f-toolbar_btn .f-toolbar_btn-ab:hover .f-toolbar_div {
    height: 600px
}

.f-toolbar-wx {
    font-size: 18px
}

.f-toolbar-wb {
    font-size: 24px
}

.f-toolbar-kj {
    font-size: 24px
}

.f-online_tab {
    display: none;
    width: 270px;
    background: #FFFFFF;
    max-height: 435px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    left: 45px;
    top: -1px;
    border: 1px solid #d9bc92;
    z-index: 9
}

.f-online_tab ul {
    width: 100%;
    padding: 0
}

.f-online_tab ul li {
    width: 80%;
    padding: 0 5px;
    border-top: none;
    border-bottom: 1px solid #ece8e5;
    display: block;
    margin: 0 auto
}

.f-online_tab ul li a {
    width: 100%;
    display: block;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 15px;
    color: #000000
}

.f-online_tab::-webkit-scrollbar {
    width: 5px;
    height: 6px
}

.f-online_tab::-webkit-scrollbar-track {
    width: 6px;
    background-color: #fafafa;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

.f-online_tab::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

.f-cliean-i {
    font-size: 21px
}

.f-online-close {
    width: 20px;
    height: 20px;
    position: absolute;
    right: -260px;
    top: -5px;
    display: none;
    z-index: 10
}

.f-toolbar_btn .f-toolbar_btn-a:hover .f-toolbar_div {
    width: 80px
}

.f-toolbar_btn .f-toolbar_btn-a:hover .f-toolbar_div1 {
    width: 95px
}

.f-toolbar_btn .f-toolbar_btn-a:hover .f-toolbar_fx {
    width: 195px
}

.f-nav dl dt:nth-child(5) a {
    padding-bottom: 0
}

.f-nav dl dt:nth-child(6) {
    padding-top: 10px
}

.f-works-li {
    width: 100%;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-btn-new {
    width: 230px;
    display: block;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    padding-top: 25px
}

.f-btn-new a {
    display: block;
    width: 100px;
    height: 35px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #b6a385;
    line-height: 35px;
    font-size: 14px;
    color: #000000;
    background: 0 0
}

.f-text-new {
    width: 712px;
    min-height: 163px;
    display: block;
    margin: 0 auto
}

.f-list-clean .f-page {
    padding-top: 0;
    width: 72%;
    float: left;
    padding-left: 85px
}

.tip-content {
    min-height: 250px
}

.tip-content, .tip-content p {
    line-height: 1.625;
    font-size: 18px;
    text-align: justify;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #333333
}

.announce-content, .announce-content p {
    line-height: 1.667;
    font-size: 18px;
    text-align: justify;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #333333
}

.f-list-c-table table {
    width: 80%;
    border-collapse: collapse;
    border: 1px solid #d9bc92;
    margin: 0 auto 60px auto
}

.f-list-c-table table .f-w-table-tr {
    background: #eee6db;
    color: #000000
}

.f-list-c-table table td {
    text-align: center;
    border: 1px solid #d9bc92;
    padding: 20px 0;
    font-size: 17px
}

.f-list-c-table table .f-w-table-tr td {
    color: #000000
}

.f-list-c-table table td a {
    color: #000000;
    display: block;
    padding: 15px 0
}

.f-list-c-table table td span {
    color: #98866a;
    display: block;
    padding: 15px 0
}

.f-clean-details .f-cliean-img em {
    width: 100%;
    height: 40px;
    display: block;
    position: absolute;
    bottom: 0;
    line-height: 35px;
    color: #FFFFFF;
    font-size: 17px;
    vertical-align: middle;
    background: url(https://s1.howtozen.com/assets/img/pc/f_bg3.png) center center no-repeat;
    background-size: 100% 100%;
    text-indent: 20px
}

.f-clean-details .f-cliean-img em i {
    padding-right: 5px;
    font-size: 19px;
    vertical-align: top
}

.f-rdu {
    width: 759px;
    height: auto;
    display: block;
    margin: 0 auto;
    font-size: 15px;
    color: #98866a;
    text-align: right;
    padding-top: 40px;
    position: absolute;
    bottom: 30px;
    right: 0
}

.f-new-title, .f-new-title h1 {
    width: 962px;
    display: block;
    margin: 0 auto;
    padding-bottom: 4px;
    font-size: 23px;
    color: #98866a;
    padding-top: 10px;

}

.f-list-c-table table td:first-child a {
    color: #98866a
}

.f-list-c-table {
    width: 982px;
    display: block;
    margin: 0 auto;
    padding: 40px 75px 0;
    background: #fff
}

.f-list-c-table .f-news-ul {
    width: 450px;
    min-height: 495px;
    display: block;
    float: left;
    margin-bottom: 50px
}

.f-list-c-table .f-news-ul h2 {
    width: 100%;
    display: block;
    margin: 0 auto 15px auto;
    color: #98866a;
    font-size: 22px;
    font-weight: 100;
    border-bottom: 1px solid #98866a;
    padding-bottom: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}

.f-list-c-table .f-news-ul h2 a {
    color: #98866a;
    font-size: 22px
}

.f-list-c-table .f-news-ul ul {
    width: 100%;
    display: block;
    height: auto;
    margin: 0 auto
}

.f-list-c-table .f-news-ul ul li {
    width: 100%;
    height: 44px;
    line-height: 22px;
    padding: 5px 0;
    position: relative;
    overflow: hidden
}

.f-list-c-table .f-news-ul ul li a {
    width: 415px;
    display: block;
    height: auto;
    margin: 0 auto;
    float: left
}

.f-list-c-table .f-news-ul ul li a span {
    overflow: hidden;
    font-size: 16px;
    color: #000000
}

.f-list-c-table .f-news-ul ul li a em {
    display: inline-block;
    font-size: 14px;
    color: #98866a
}

.f-list-c-table .f-new-active {
    float: right
}

.list_dd {
    margin: 0
}

.list_dd .list-dd-title {
    padding-top: 10px;
    padding-bottom: 5px
}

.list_dd .list-dd-title a {
    font-size: 14px;
    color: #eed9b9;

}

.list_dd li a {
    width: 95%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.f-footer {
    height: 245px;
    overflow: hidden
}

.f-footer .f-footer-right {
    height: 245px
}

.f-footer-right-l {
    width: 650px;
    display: block;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    float: left;
    position: relative
}

.f-footer .f-footer-right .f-footer-right-l ul {
    width: 355px;
    display: block;
    margin: 0 auto;
    height: auto;
    text-align: center;
    padding-top: 70px;
    float: left
}

.f-footer .f-footer-right .f-footer-right-l ul li {
    width: 150px;
    height: 135px;
    display: inline-block
}

.f-footer .f-footer-right .f-footer-right-l ul li img {
    width: 110px;
    height: 110px
}

.f-footer .f-footer-right .f-footer-right-l ul li p {
    font-size: 16px;
    color: #373533;
    text-align: center
}

.f-footer .f-footer-right .f-footer-right-l a {
    width: 250px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #b2b2b2;
    font-size: 13px;
    line-height: 21px
}

.f-footer .f-footer-right .f-footer-right-l a img {
    display: block;
    padding-right: 5px;
    width: 18px;
    float: left
}

.f-copy-right-btn {
    width: 130px;
    display: block;
    height: 30px;
    background: #e5e5e5;
    position: absolute;
    right: 0;
    bottom: 42px
}

.f-copy-right-btn a {
    width: 63px;
    display: block;
    float: left;
    text-align: center;
    line-height: 30px;
    color: grey;
    font-size: 16px;
    border: 1px solid grey;
    position: relative
}

.f-copy-right-btn a:nth-child(2) {
    border-left: none
}

.f-copy-right-btn .f-news-btn-active {
    border: 1px solid #000000;
    color: #000000;
    background: #fff
}

.f-news-artcle {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    position: relative
}

.f-news-artcle .book-cover {
    width: 47%;
    height: auto;
    float: left;
    display: block;
    margin: 0 auto
}

.f-news-artcle .f-works-btn {
    width: 50%;
    height: 60px;
    display: block;
    margin: 0 auto;
    position: absolute;
    right: 0;
    bottom: 20px;
    top: auto;
    float: none
}

.f-news-artcle .f-works-btn a {
    width: 95px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    text-align: center;
    color: #98866b;
    font-size: 14px;
    border: 1px solid #b29e7f;
    margin-left: 15px;

}

.f-reveal-t .f-reveal-fot p {
    font-size: 14px
}

.f-reveal-t .f-reveal-share {
    width: 100%;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
    font-size: 14px;
    position: relative;
    padding-bottom: 0
}

.f-reveal-t .f-reveal-share p {
    width: 32.5%;
    display: inline-block;
    padding: 0;
    text-align: center;
    margin: 0;
    font-size: 15px;
    position: relative
}

.f-reveal-t .f-reveal-share .f-reveal-share-l {
    text-align: left
}

.f-reveal-t .f-reveal-share .f-reveal-share-r {
    text-align: right;
    cursor: pointer;
    float: right
}

.f-reveal-t .f-reveal-share .f-reveal-share-r img {
    width: 15px;
    display: inline-block;
    position: relative;
    top: 2px
}

.f-reveal-t .f-reveal-share p span {
    display: inline-block;
    padding-right: 0;
    font-size: 14px
}

.f-reveal-t .f-reveal-share #praise {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    padding-right: 0;
    cursor: pointer
}

.f-reveal-t .f-reveal-share .praise {
    height: 20px;
    margin: 0 auto;
    padding-right: 0;
    cursor: pointer
}

.f-reveal-t .f-reveal-share #praise-txt {
    height: 25px
}

.f-reveal-t .f-reveal-share .praise-txt {
    height: 25px
}

.f-reveal-t .f-reveal-share .praise img {
    width: 20px;
    margin: 0 auto;
    vertical-align: text-bottom
}

.f-reveal-t .f-reveal-share .praise img.animation {
    animation: myfirst .5s;
    -moz-animation: myfirst .5s;
    -webkit-animation: myfirst .5s;
    -o-animation: myfirst .5s
}

#add-num {
    display: none
}

.add-num {
    display: none
}

#add-num .add-animation {
    color: #98866b;
    position: absolute;
    top: -25px;
    left: 102px;
    font-size: 15px;
    opacity: 0;
    filter: Alpha(opacity=0);
    -moz-opacity: 0;
    animation: mypraise .5s;
    -moz-animation: mypraise .5s;
    -webkit-animation: mypraise .5s;
    -o-animation: mypraise .5s;
    font-style: normal;
    margin-right: 0;
    padding: 0
}

.add-num .add-animation {
    color: #98866b;
    position: absolute;
    top: -25px;
    left: 115px;
    font-size: 15px;
    opacity: 0;
    filter: Alpha(opacity=0);
    -moz-opacity: 0;
    animation: mypraise .5s;
    -moz-animation: mypraise .5s;
    -webkit-animation: mypraise .5s;
    -o-animation: mypraise .5s;
    font-style: normal;
    margin-right: 0;
    padding: 0
}

.f-ob-dp {
    width: 790px;
    display: block;
    float: right;
    background: #f8f5f0;
    border-radius: 10px;
    margin-top: 20px;
    padding-bottom: 30px;
    overflow: hidden;
    padding-top: 30px
}

.f-observing-details {
    padding-top: 0;
    background: #f5f5f5
}

.f-observing-details .f-observing {
    background: #FFFFFF;
    margin-top: 0;
    padding-bottom: 20px
}

.f-observing-details .f-observing ul li a p i {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 23px;
    padding-top: 15px
}

.f-observing-details .f-observing ul li a img {
    width: 135px;
    border-radius: 10px
}

.f-observing ul {
    border: none
}

.f-observing ul li {
    border-top: none
}

.f-observing-back {
    background: #FFFFFF;
    padding: 30px 75px 10px 75px
}

.f-observing-back a {
    width: 80%;
    height: 30px;
    display: block;
    background: url(https://s1.howtozen.com/assets/img/pc/n_left.png) left center no-repeat;
    padding-left: 20px;
    float: left;
    font-size: 16px;
    color: #98866b;
    line-height: 30px
}

.f-observing-details ul li a p {
    padding-top: 3px
}

.f-observing-details ul li a p strong {
    font-size: 26px
}

.f-observing-details ul li a p span em {
    margin-top: 15px;
    line-height: initial
}

.f-observing-details-nav {
    padding: 30px 85px;
    height: 45px;
    display: block
}

.f-observing-details-nav .f-observing-nav-l {
    width: 50%;
    display: block;
    float: left;
    color: #000000;
    font-size: 16px;
    line-height: 45px
}

.f-observing-details-nav .f-observing-nav-l span {
    display: inline-block;
    padding-left: 5px
}

.f-observing-details-nav .f-observing-nav-r {
    width: 50%;
    display: block;
    float: right;
    text-align: right
}

.f-observing-details-nav .f-observing-nav-r a {
    width: 100px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    color: #98866b;
    border: 1px solid #98866b;
    border-radius: 30px
}

.f-observing-details-nav .f-observing-nav-r p {
    padding-top: 0;
    margin-right: 0;
    width: 120px
}

.f-observing-details-nav .f-observing-nav-r p input {
    background: 0 0;
    font-size: 13px;
    border: 1px solid #98866b;
    border-radius: 30px;
    padding-right: 0;
    width: 95px;
    color: #98866b;
    outline: 0;
    cursor: pointer
}

.f-observing-details-nav .f-observing-nav-r p em {
    top: 1px;
    border-left: none
}

.f-observing-details-nav .f-observing-nav-r p input::-webkit-input-placeholder {
    color: #98866b
}

.f-observing-details-nav .f-observing-nav-r p input::-moz-placeholder {
    color: #98866b
}

.f-observing-details-nav .f-observing-nav-r p input:-ms-input-placeholder {
    color: #98866b
}

.f-nav-ob-list {
    height: auto;
    display: block;
    margin: 0 auto 80px auto;
    border-top: .12rem solid #f7f7f7;
    padding: 0 85px
}

.f-nav-ob-list ul {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

.f-nav-ob-list ul li {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 15px;
    margin: 0 auto 20px;
    padding: 30px 0
}

.f-nav-ob-list ul li .f-ob-list-title {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: hidden
}

.f-nav-ob-list ul li .f-ob-list-title img {
    width: 60px;
    border-radius: 10rem;
    height: auto;
    display: block;
    margin: 0 auto;
    float: left
}

.f-nav-ob-list ul li .f-ob-list-title p {
    width: 790px;
    display: block;
    height: auto;
    margin: 0 auto;
    float: right;
    padding-top: 0
}

.f-nav-ob-list ul li .f-ob-list-title p strong {
    width: 100%;
    height: auto;
    display: block;
    font-size: 16px;
    padding-top: 3px
}

.f-nav-ob-list ul li .f-ob-list-title p span {
    width: 100%;
    height: auto;
    display: block;
    font-size: 14px;
    color: #999;
    padding-top: 1px;
    line-height: 18px
}

.f-nav-ob-list ul li .f-ob-list-title p span em {
    display: inline-block;
    width: auto;
    padding-right: 10px;
    font-weight: 500
}

.f-ob-list-text {
    width: 93.5%;
    font-size: .3rem;
    display: block;
    margin: 0 auto;
    line-height: .5rem;
    padding-top: .3rem;
    color: #000000;
    text-align: justify
}

.f-ob-list-text a {
    color: #0072d2;
    font-size: 16px
}

.f-ob-list-text a span {
    color: #000000;
    font-size: 16px
}

.f-ob-list-text {
    position: relative;
    margin: 0 auto;
    font-size: 16px;
    width: 93.5%;
    line-height: .5rem;
    padding-bottom: 30px;
    overflow: hidden
}

.f-ob-list-dy {
    height: 138px;
    line-height: 30px;
    text-align: justify;
    width: 90%;
    overflow: hidden;
    padding-bottom: 0
}

.f-ob-list-dy em {
    font-style: normal;
    display: block;
    overflow: hidden;
    padding-top: 20px;
    width: 790px;
    float: right;
    color: #999;
    font-size: 14px
}

.f-ob-list-a {
    color: #0072d2;
    font-size: .3rem;
    position: absolute;
    display: block;
    text-decoration: none;
    width: 600px;
    height: 33px;
    text-align: left;
    padding-left: 14px;
    right: 0;
    bottom: -5px;
    line-height: 35px;
    background: #fff
}

.f-text-reveal-d-ob-list {
    padding-bottom: 0
}

.f-text-reveal-d-ob-list .f-text-reveal-top {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: .3rem;
    padding-top: .1rem
}

.f-ob-list-text p {
    padding-top: 0;
    padding-bottom: 0;
    width: 790px;
    float: right
}

.sr-body .f-text-reveal-d-ob-list {
    padding-bottom: 0;
    width: 90%;
    display: block;
    margin: 0 auto;
    border-right: none
}

.sr-body .f-text-reveal-d-ob-list .f-text-reveal-top {
    padding-bottom: 0;
    margin-top: 30px;
    padding-top: 10px;
    width: 790px;
    float: right;
    border-top: 1px solid #e6e6e6
}

.sr-body .f-text-reveal-d-ob-list p {
    width: 32.5%;
    display: inline-block;
    padding: 0;
    text-align: center;
    margin: 0;
    font-size: 15px;
    position: relative
}

.sr-body .f-text-reveal-d-ob-list .f-reveal-share-l {
    text-align: left
}

.sr-body .f-text-reveal-d-ob-list .f-reveal-share-r {
    text-align: right;
    cursor: pointer
}

.sr-body .f-text-reveal-d-ob-list .c-praise .praise {
    height: 25px;
    margin: 0 auto;
    padding-right: 0;
    cursor: pointer;
    display: inline-block
}

.sr-body .f-text-reveal-d-ob-list .c-praise .praise img {
    height: 20px;
    margin: 0 auto;
    vertical-align: text-top
}

.sr-body .f-text-reveal-d-ob-list .c-praise .praise-txt {
    color: #98866b;
    height: 25px;
    line-height: 25px;
    font-size: 16px
}

.sr-body .f-text-reveal-d-ob-list .f-reveal-share-r img {
    height: 15px;
    margin: 0 auto;
    vertical-align: middle
}

.f-nav-ob-list ul li .f-ob-list-comment {
    width: 90%
}

.f-nav-ob-list ul li .f-ob-list-comment img {
    padding-left: 0;
    width: 50px;
    float: left
}

.f-nav-ob-list ul li .f-ob-list-comment p {
    width: 90%;
    padding-bottom: .1rem;
    float: none
}

.f-nav-ob-list ul li .f-ob-list-comment p strong {
    font-size: 16px;
    color: #98866b;
    font-weight: 500;
    width: 600px;
    display: block;
    float: left;
    padding-top: 5px;
    padding-left: 15px;
    text-align: left
}

.f-nav-ob-list ul li .f-ob-list-comment p strong em {
    width: 100%;
    display: block;
    margin: 0 auto;
    color: #999;
    font-size: .24rem;
    padding-top: .03rem
}

.f-nav-ob-list ul li .f-ob-list-comment p span {
    line-height: 25px;
    color: #000000;
    font-size: 16px;
    width: 645px;
    display: block;
    float: right;
    text-align: left
}

.f--ob-list-active .f-reveal-share p {
    width: 24%
}

.f-ob-list-comment .f-text-reveal-d-ob-list {
    width: 90%;
    float: none;
    padding-right: 0;
    text-align: right
}

.f-ob-list-comment .f-text-reveal-d .f-reveal-share .f-reveal-share-l {
    text-align: left;
    width: 70%;
    float: left;
    padding-right: 0;
    line-height: .65rem;
    color: #999;
    font-size: .26rem
}

.sr-body .f-ob-list-comment .f-text-reveal-d-ob-list .f-reveal-share {
    width: 645px;
    display: block;
    float: right;
    border: none;
    padding-top: 0;
    margin-top: 20px
}

.sr-body .f-ob-list-comment .f-text-reveal-d-ob-list .f-reveal-share .f-reveal-share-l {
    text-align: left;
    width: 50%;
    float: left;
    padding-right: 0;
    line-height: 40px;
    color: #999;
    font-size: 14px
}

.sr-body .f-ob-list-comment .c-praise {
    width: 50%;
    height: 40px;
    display: block;
    float: right;
    text-align: right
}

.sr-body .f-ob-list-comment .c-praise .praise {
    height: 25px;
    margin: 0 auto;
    padding-right: 0;
    cursor: pointer;
    float: none;
    display: inline-block;
    width: 25px
}

.sr-body .f-ob-list-comment .c-praise .praise img {
    width: auto;
    border-radius: 0;
    padding-top: 10px
}

.sr-body .f-ob-list-comment .c-praise .praise-txt {
    width: auto;
    float: none;
    display: inline-block;
    line-height: 40px
}

.sr-body .f-ob-list-comment .add-num .add-animation {
    top: -14px;
    left: auto;
    right: 10px
}

.f-book-news {
    display: block;
    height: auto;
    margin: 0 auto;
    padding: 0 85px
}

.f-book-news .f-book-title-new {
    width: 100%;
    height: auto;
    display: block;
    font-size: 16px;
    color: #98866b;
    border-bottom: 1px solid #98866b;
    padding-bottom: 10px;
    margin: 30px auto
}

.f-book-news ul {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
    overflow: hidden
}

.f-book-news ul li {
    width: 275px;
    min-height: 128px;
    display: block;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 20px 20px auto;
    border: 1px solid #e6e6e6;
    padding: 20px 15px;
    border-radius: 5px
}

.f-book-news ul li span {
    min-width: 20px;
    height: 30px;
    display: block;
    float: left;
    font-size: 14px;
    text-align: center;
    color: #98866b;
    margin-right: 15px;
    margin-top: 0
}

.f-book-news ul li img {
    width: 90px;
    display: block;
    height: auto;
    float: left
}

.f-book-news ul li .f-book-news-text {
    width: 140px;
    display: block;
    height: 2.9rem;
    float: right;
    position: relative
}

.f-book-news ul li .f-book-news-text h2 {
    width: 100%;
    min-height: 65px;
    display: block;
    font-weight: 600;
    padding: 0;
    color: #000000;
    font-size: 16px
}

.f-book-news ul li .f-book-news-text h2 strong {
    width: 100%;
    height: auto;
    display: block;
    color: #7f7f7f;
    font-size: 14px;
    padding-top: .2rem
}

.f-book-news ul li .f-book-news-text p {
    width: 100%;
    height: auto;
    font-size: 16px;
    float: left;
    overflow: hidden;
    padding-top: 0
}

.f-book-news ul li .f-book-news-text p span {
    border: none;
    color: #d29944;
    font-size: 16px;
    margin-top: 0;
    margin-right: 0
}

.f-book-news ul li .f-book-news-text p em {
    border: none;
    color: #d29944;
    font-size: 16px;
    margin-top: 0;
    float: left;
    font-weight: 700
}

.f-book-news ul li .f-book-news-text p span em {
    font-size: .42rem
}

.f-book-yf {
    height: auto;
    display: block;
    padding: 0 85px;
    margin: 20px auto 60px
}

.f-book-yf h3 {
    width: 100%;
    height: auto;
    display: block;
    font-size: 16px;
    padding-bottom: 0;
    margin: 10px auto 0;
    color: #333333
}

.f-book-yf p {
    font-size: 16px;
    line-height: 25px;
    color: #333333
}

.f-book-foot {
    height: 75px;
    display: block;
    background: #f4f4f4;
    margin: 0 85px 60px
}

.f-book-foot .f-book-foot-l {
    width: 200px;
    display: block;
    height: auto;
    font-size: 16px;
    padding-left: 5%;
    float: left;
    line-height: 75px
}

.f-book-foot .f-book-foot-r {
    width: 500px;
    height: 75px;
    display: block;
    float: right
}

.f-book-foot .f-book-foot-r p {
    width: 281px;
    display: block;
    float: left;
    font-size: 16px;
    color: grey;
    font-weight: 700;
    padding-top: 0;
    line-height: 75px
}

.f-book-foot .f-book-foot-r p span {
    width: 138px;
    display: block;
    overflow: hidden;
    padding-top: .18rem;
    float: left
}

.f-book-foot .f-book-foot-r p span em {
    font-size: 16px;
    color: #d29944;
    font-weight: 700
}

.f-book-foot .f-book-foot-r a {
    width: 200px;
    height: 75px;
    float: right;
    font-size: 20px;
    line-height: 75px;
    text-align: center;
    background: #d29944;
    color: #FFFFFF;
    border-radius: 0 5px 5px 0
}

.item_list .item_img img {
    height: 100%;
    width: auto;
    margin: 0 auto
}

.item_price span {
    font-size: 1.4rem;
    color: #e74040;
    font-weight: 800
}

.item_price s {
    font-size: 1.2rem;
    color: #999;
    margin-left: .6rem
}

.item_price s::before {
    content: "Â¥";
    font-size: 1.2rem
}

.item_list li .calc {
    width: 100px;
    position: relative;
    display: block;
    height: 25px;
    border: 1px solid #d2d2d2;
    border-radius: 5px
}

.item_list li .calc .item_sub {
    cursor: pointer;
    position: relative;
    background: url(https://s1.howtozen.com/assets/img/pc/reduce_h.png) center center no-repeat;
    background-size: 15px;
    height: 25px;
    float: left;
    bottom: 0;
    padding-top: 0;
    width: 31%
}

.item_list li .calc .item_add {
    cursor: pointer;
    background: url(https://s1.howtozen.com/assets/img/pc/add_h.png) center center no-repeat;
    background-size: 15px;
    display: block;
    float: right;
    position: relative;
    bottom: 0;
    height: 25px;
    width: 31%;
    padding-top: 0
}

.item_list li .select-active .item_sub {
    background: url(https://s1.howtozen.com/assets/img/pc/reduce.png) center center no-repeat;
    background-size: 15px
}

.item_list li .select-active .item_add {
    background: url(https://s1.howtozen.com/assets/img/pc/add.png) center center no-repeat;
    background-size: 15px
}

.f-book-news ul li .f-book-news-text .select-active .item_num {
    color: #000000
}

.item_list .f-ceng {
    position: absolute;
    height: 25px;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 67px
}

.f-book-news ul li .f-book-news-text .item_num {
    position: relative;
    text-align: center;
    height: 25px;
    line-height: 25px;
    bottom: 0;
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    color: #d2d2d2;
    width: 35.3%;
    padding-top: 0
}

.f-book-zy {
    width: 89%;
    height: auto;
    display: block;
    margin: 0 auto;
    font-size: 12px;
    text-align: justify;
    color: grey;
    padding-top: 10px;
    overflow: hidden;
    float: right;
    line-height: 20px
}

.f-book-news ul li .f-book-news-text .item_content {
    overflow: hidden;
    padding-top: 5px
}

.f-book-news ul li .f-book-news-text h2 span {
    width: 100%;
    display: block;
    text-align: left;
    font-weight: 600;
    padding: 0;
    color: #000000;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: auto;
    float: none;
    height: auto;
    max-height: 50px
}

.f-book-news ul li:nth-child(3n+3) {
    margin-right: 0
}

@keyframes myfirst {
    0% {
        width: 20px;
        height: 20px
    }
    50% {
        width: 25px;
        height: 25px
    }
    100% {
        width: 20px;
        height: 20px
    }
}

@-moz-keyframes myfirst {
    0% {
        width: 20px;
        height: 20px
    }
    50% {
        width: 25px;
        height: 25px
    }
    100% {
        width: 20px;
        height: 20px
    }
}

@-webkit-keyframes myfirst {
    0% {
        width: 20px;
        height: 20px
    }
    50% {
        width: 25px;
        height: 25px
    }
    100% {
        width: 20px;
        height: 20px
    }
}

@-o-keyframes myfirst {
    0% {
        width: 20px;
        height: 20px
    }
    50% {
        width: 25px;
        height: 25px
    }
    100% {
        width: 20px;
        height: 20px
    }
}

@keyframes mypraise {
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
    25% {
        top: -25px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    50% {
        top: -30px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1
    }
    75% {
        top: -35px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    100% {
        top: -40px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
}

@-moz-keyframes mypraise {
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
    25% {
        top: -25px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    50% {
        top: -30px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1
    }
    75% {
        top: -35px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    100% {
        top: -40px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
}

@-webkit-keyframes mypraise {
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
    25% {
        top: -25px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    50% {
        top: -30px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1
    }
    75% {
        top: -35px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    100% {
        top: -40px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
}

@-o-keyframes mypraise {
    0% {
        top: -15px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
    25% {
        top: -25px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    50% {
        top: -30px;
        opacity: 1;
        filter: Alpha(opacity=100);
        -moz-opacity: 1
    }
    75% {
        top: -35px;
        opacity: .5;
        filter: Alpha(opacity=50);
        -moz-opacity: .5
    }
    100% {
        top: -40px;
        opacity: 0;
        filter: Alpha(opacity=0);
        -moz-opacity: 0
    }
}

body .layui-layer-demo {
    width: 600px !important;
    height: auto;
    background-color: #f7f5f2 !important
}

body .layui-layer-demo ul {
    width: 90%;
    display: block;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0
}

body .layui-layer-demo ul li {
    width: 20%;
    display: block;
    float: left
}

body .layui-layer-demo ul li a {
    width: 100%;
    height: auto;
    display: block
}

body .layui-layer-demo ul li a img {
    width: 70%;
    display: block;
    margin: 0 auto;
    padding: 0
}

body .layui-layer-demo ul li a span {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 0 auto;
    color: #97866a;
    padding-top: 8px
}

body .layui-layer-demo .layui-layer-btn {
    padding: 0
}

body .layui-layer-demo .layui-layer-btn .layui-layer-btn0 {
    background-color: #FFFFFF;
    color: #97866a !important;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 17px;
    border: none
}

.f-reveal-btn p {
    width: 100%;
    display: block;
    text-indent: 0;
    line-height: 22px;
    font-size: 15px;
    padding-top: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    display: -webkit-box
}

.f-reveal-btn-l {
    width: 47%;
    height: auto;
    display: block;
    margin: 0 auto;
    float: left
}

.f-reveal-btn-r {
    width: 47%;
    height: auto;
    display: block;
    margin: 0 auto;
    float: right
}

.f-reveal-btn a {
    font-size: 17px;
    display: inline-block;
    padding: 0;
    color: #98866a;
    width: 100%;
    text-align: left
}

.f-reveal-btn a img {
    width: 10px;
    position: relative;
    top: 2px;
    padding-right: 10px
}

.f-reveal-btn .f-reveal-btn-r a {
    text-align: right
}

.f-reveal-btn .f-reveal-btn-r p {
    text-align: right
}

.f-reveal-btn:before {
    content: '';
    width: 1px;
    height: 1.2rem;
    background: #d9bc92;
    position: absolute;
    left: 0;
    right: -.13rem;
    margin: 0 auto;
    top: .75rem
}

.f-reveal-btn .f-reveal-btn-r a img {
    padding-left: 10px
}

.f-list-receal .f-news-search {
    width: 950px;
    display: block;
    margin: 0 auto;
    height: auto
}

.f-list-receal .f-news-search p {
    width: 300px;
    display: block;
    float: left;
    margin-top: 53px;
    padding-bottom: 0;
    position: relative;
    text-align: left
}

.f-list-receal .f-news-search p span {
    display: inline-block;
    color: #98866b
}

.f-list-receal .f-news-search p em {
    width: 41px;
    height: 27px;
    display: block;
    position: absolute;
    top: 3px;
    right: 45px;
    border-left: 1px solid #d1cdc6
}

.f-list-receal .f-news-search p em img {
    width: 20px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: 4px;
    padding-right: 7px
}

.f-list-receal .f-news-search p input {
    height: 27px;
    padding: 0 25px;
    border: 1px solid #d1cdc6;
    display: inline-block;
    color: #000000;
    outline-color: #d1cdc6
}

.f-list-receal .f-news-search .f-page {
    width: 646px;
    display: block;
    margin: 0 auto;
    height: auto;
    float: right;
    text-align: left
}

.f-list-c-table .f-news-ul:last-child {
    min-height: 300px
}

.f-list-c-table .f-news-ul:nth-child(5) {
    min-height: 300px
}

.f-text-notice .f-list {
    width: 1131px;
    height: auto;
    min-height: auto;
    border-bottom: none
}

.f-text-notice-news {
    border-bottom: none
}

.f-text-notice-news .f-list {
    border-bottom: 1px solid #b19d7e;
    width: 1130px
}

.f-text-notice-news .f-nav {
    transition: all .5s
}

.f-notice-footer {
    width: 1300px
}

.f-notice-footer .f-footer-right {
    width: 1132px
}

.input-box-new {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    z-index: 999;
    top: -1px
}

.input-box-new .search {
    position: absolute;
    margin: auto;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    transition: all 1s;
    z-index: 4
}

.input-box-new .search:hover {
    cursor: pointer
}

.input-box-new .search::before {
    content: "";
    position: absolute;
    margin: auto;
    top: 14px;
    right: 0;
    bottom: 0;
    left: 20px;
    width: 7px;
    height: 2px;
    background: #8d7c5e;
    transform: rotate(40deg);
    transition: all .5s
}

.input-box-new .search::after {
    content: "";
    position: absolute;
    margin: auto;
    top: -3px;
    right: 0;
    bottom: 0;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #8d7c5e;
    transition: all .5s
}

.input-box-new input {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    outline: 0;
    border: 1px solid #8d7c5e;
    color: #8d7c5e;
    transition: all .1s;
    opacity: 0;
    z-index: 5;
    font-size: 16px;
    background: 0 0;
    border-radius: 100px
}

.input-box-new input:hover {
    cursor: pointer
}

.input-box-new input:focus {
    width: 275px;
    text-indent: 35px;
    opacity: 1;
    cursor: text
}

.input-box-new input:focus ~ .search {
    right: 0;
    z-index: 6
}

.input-box-new input:focus ~ .search::before {
    top: 0;
    left: 0;
    width: 15px
}

.input-box-new input:focus ~ .search::after {
    top: 0;
    left: 0;
    width: 15px;
    height: 2px;
    border: none;
    background: #8d7c5e;
    border-radius: 0;
    transform: rotate(-45deg)
}

.input-box-new input::placeholder {
    font-size: 14px;
    color: #777777;
    opacity: .8
}

.f-list-receal .f-news-search p input {
    padding: 0 25px \0;
    padding-top: 4px \9
}

.f-list-receal .f-news-search p em {
    padding-top: 4px \9
}

.input-box-new input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.input-box-new img {
    width: 15px;
    position: absolute;
    height: auto;
    display: block;
    right: 0;
    padding-top: 8px;
    transition: all .2s;
    opacity: 0
}

.input-box-new input:focus ~ .search img {
    right: 250px
}

.input-box-new input:focus ~ .search img {
    opacity: 1
}

.f-notice {
    width: 91%;
    margin-right: 51px;
    margin-top: 40px;
    padding-bottom: 20px
}

.f-banner-notice .f-banner-content .f-banner-right {
    width: 1132px
}

.f-text-reveal-search ul li a {
    text-overflow: initial;
    white-space: initial;
    padding-top: 0
}

.f-text-reveal-search ul li a span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: .3rem
}

.f-text-reveal-search ul li a em {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    color: grey;
    font-size: 14px;
    padding-top: .1rem
}

.f-text-reveal-search ul {
    padding: 0
}

.f-text-reveal-search ul li {
    padding: 15px 0;
    border-top: none;
    border-bottom: 1px solid #b6a385
}

.scroll_top {
    position: fixed;
    right: 50px;
    bottom: 80px;
    width: 40px;
    height: 40px
}

.scroll_top img {
    width: 100%;
    display: block;
    height: auto;
    margin: 0 auto
}

.f-notice-f {
    display: block;
    margin: 0 auto;
    width: 95%
}

.f-text-notice-news .f-list-works .f-reveal-t {
    padding-top: 26px
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text h1, .f-text-notice-news .f-list-works .f-reveal-t .f-article-text h2 {
    color: #000000;
    font-size: 30px;
    width: 100%;
    display: block;
    font-weight: 400
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text .f-reveal-time {
    width: 100%;
    height: auto;
    display: block;
    padding-top: 40px;
    border-bottom: 1px solid #d9bc92;
    color: #473a2b;
    font-size: 15px;
    padding-bottom: 4px;
    overflow: hidden
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text .f-reveal-time strong {
    display: inline-block;
    width: 22%;
    padding: 0;
    text-align: left;
    color: #98866b
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text .f-reveal-time strong:nth-child(2) {
    width: 35%
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text .f-reveal-time strong:nth-child(3) {
    width: 19%
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text .f-reveal-time strong {
    display: inline-block;
    width: 22%;
    padding: 0;
    text-align: left
}

.f-text-notice-news .f-list-works .f-reveal-t .f-article-text .f-reveal-time .f-yd {
    display: inline-block;
    min-width: 100px;
    text-align: right;
    float: none
}

.f-notice-t .search-result-list {
    color: #98866b;
    font-size: 30px;
    width: 100%;
    display: block;
    border-bottom: 1px solid #b6a385;
    font-weight: 400;
    padding-bottom: 20px;

}

.z-news-nav {
    width: 35px;
    height: 40px;
    display: block;
    float: right;
    text-align: right;
    cursor: pointer;
    position: relative;
    z-index: 5
}

.z-news-nav img {
    width: 20px;
    vertical-align: text-top;
    padding-top: 1px
}

.f-list-c-table .f-news-ul dl {
    width: 200px;
    height: 40px;
    position: absolute;
    top: 0;
    right: -200px;
    background: #FFFFFF;
    overflow: hidden;
    z-index: 88;
    transition: all .5s
}

.f-list-c-table .f-news-ul dl dd {
    width: 100px;
    height: auto;
    float: left
}

.f-list-c-table .f-news-ul dl dd a {
    width: 90px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    color: #98866b;
    font-size: 14px;
    border: 1px solid #b29e7f;
    margin-left: 8px;
    margin-top: 8px
}

.f-list-c-table table td a:hover {
    text-decoration: underline
}

.f-text-notice .f-list-works .f-notice-t-news-z {
    padding-top: 26px
}

.f-footer-news {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 40px auto 0;
    background: #282622
}

.f-footer-news a {
    width: 377px;
    display: block;
    float: left;
    margin-right: 1px;
    position: relative
}

.f-footer-news a:last-child {
    margin-right: 0;
    float: right
}

.f-footer-news a span {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 30px;
    color: #FFFFFF;
    z-index: 2;
    font-size: 18px;;
    text-indent: 45px
}

.f-footer-news a:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: .5;
    position: absolute;
    top: 0;
    transition: all .5s
}

.f-footer-news a:hover:after {
    content: '';
    opacity: 0
}

.f-footer-news a img {
    width: 100%;
    display: block;
    height: auto
}

.f-ico-qb img {
    height: 20px;
    vertical-align: middle;
    margin-top: -2px;
    display: inline-block;
    padding-left: 10px
}

.f-text-reveal-new {
    overflow: hidden
}

.f-text-reveal-new #announce-editable {
    overflow: hidden;
    padding: 0 85px 30px
}

.f-text-reveal-new h2 {
    width: 100%;
    display: block;
    margin: 0 auto;
    color: #000000;
    font-size: 30px;
    padding: 0 85px 20px
}

.f-text-reveal-new p {
    padding-top: 10px;
    padding-bottom: 0
}

.f-text-reveal-new h3 {
    font-size: 17px
}

.f-info-title {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: 45px;
    overflow: hidden
}

.f-info-title h2 {
    width: 50%;
    display: block;
    height: auto;
    float: left;
    padding-right: 0
}

.f-info-title p {
    width: 130px;
    height: 30px;
    display: block;
    float: right;
    margin: 0 85px 0 auto;
    padding-top: 10px;
    position: relative
}

.f-info-title p input {
    width: 100px;
    height: 27px;
    padding: 0 15px;
    border: 1px solid #d1cdc6;
    display: inline-block;
    color: #98866b;
    font-size: 15px;
    outline-color: #d1cdc6
}

.f-info-title p em {
    width: 20px;
    height: 29px;
    padding: 0 5px;
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
    border-left: 1px solid #d1cdc6
}

.f-info-title p em img {
    width: 20px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: 4px;
    padding-right: 7px
}

.f-info-list {
    padding: 0 85px;
    display: block;
    margin-top: 40px
}

.f-info-list ul {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-bottom: 1px dashed #cfcfcf
}

.f-info-list ul li {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-top: 1px dashed #cfcfcf;
    padding: 25px 0;
    overflow: hidden
}

.f-info-list ul li a {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    font-size: 16px;
    color: #000000
}

.f-info-list ul li a span {
    width: 75%;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: auto;
    float: left
}

.f-info-list ul li a em {
    width: 20%;
    display: block;
    float: right;
    text-align: right;
    color: #999;
    font-size: 14px
}

.f-info-list ul li a:hover {
    color: #98866b
}

.f-info-list ul li a:hover span {
    text-decoration: underline
}

.f-info-list ul li a:hover em {
    text-decoration: underline;
    color: #98866b
}

.f-observing {
    display: block;
    height: auto;
    margin: 50px auto 0;
    padding: 0 85px 80px
}

.f-observing ul {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-bottom: 1px dashed #cfcfcf
}

.f-observing ul li {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 30px auto;
    overflow: hidden;
    border-top: 1px dashed #cfcfcf;
    padding-top: 30px
}

.f-observing ul li a {
    width: 100%;
    height: 100%;
    display: block
}

.f-observing ul li a img {
    width: 100px;
    display: block;
    height: auto;
    float: left;
    overflow: hidden;
    border-radius: 10px
}

.f-observing ul li a p {
    width: 80%;
    display: block;
    float: left;
    height: auto;
    padding-left: 30px;
    padding-top: 1px
}

.f-observing ul li a p strong {
    width: 100%;
    display: block;
    color: #000000;
    font-size: 18px;
    font-weight: 700
}

.f-observing ul li a p span {
    width: 100%;
    display: block;
    margin: 0 auto;
    color: #98866b;
    font-size: 12px;
    overflow: hidden
}

.f-observing ul li a p span em {
    padding: 5px 15px;
    background: #f3f3f3;
    display: block;
    float: left;
    margin-right: 20px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 10px;
    line-height: initial
}

.f-observing ul li a p i {
    font-style: normal;
    color: #999;
    width: 100%;
    font-size: 14px;
    padding-top: 10px;
    line-height: 30px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.f-observing-details .f-observing ul li {
    border-top: none
}

.f-observing-details .f-observing ul {
    border-bottom: none
}

.f-book-news2 .f-observing-back {
    padding: 0 85px 10px 85px
}

.f-book-news2 .f-info-title {
    padding-top: 30px
}

.f-book-news2 .f-info-title h2 {
    width: 60%;
    font-size: 20px;
    font-weight: 500
}

.f-book-address {
    padding: 0 85px;
    display: block;
    margin-bottom: 20px
}

.f-book-address .f-book-address-m {
    height: 130px;
    display: block;
    width: 100%;
    background: #f4f4f4;
    text-align: center;
    cursor: pointer
}

.f-book-address .f-book-address-m img {
    width: 25px;
    display: block;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 5px
}

.f-book-address .f-book-address-m span {
    color: #999;
    font-size: 14px;
    display: block;
    margin: 0 auto;
    width: 100%
}

.f-book-address-ok {
    width: 100%;
    height: 130px;
    display: block;
    border: 1px solid #d29944;
    padding: 20px 0;
    position: relative
}

.f-book-address-ok h3 {
    width: 90%;
    display: block;
    margin: 0 auto;
    font-size: 18px;
    color: #000000;
    border-bottom: 1px dashed #cfcfcf;
    padding-bottom: 22px
}

.f-book-address-ok p {
    width: 90%;
    display: block;
    margin: 0 auto;
    padding-top: 20px
}

.f-book-address-ok p span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto
}

.f-book-address-ok p strong {
    font-size: 16px;
    display: block;
    font-weight: 500
}

.f-book-address-ok p strong i {
    font-style: normal
}

.f-book-uplud {
    font-size: 16px;
    display: revert;
    width: 50px;
    height: 30px;
    color: #d29944;
    position: absolute;
    top: 20px;
    right: 40px;
    cursor: pointer
}

.f-table-from {
    width: 100%;
    height: auto;
    display: block;
    margin: 40px auto 0 auto;
    position: relative
}

.f-table-from p {
    width: 550px;
    height: 45px;
    display: block;
    padding-bottom: 0;
    line-height: 45px;
    margin: 20px auto 0;
    padding-top: 0;
    position: relative
}

.f-table-from p strong {
    width: 100px;
    height: 45px;
    display: block;
    float: left;
    color: #666;
    font-size: 16px;
    font-weight: 100;
    line-height: 45px;
    text-align: right
}

.f-table-from p input {
    width: 357px;
    display: block;
    float: left;
    outline: 0;
    font-size: 16px;
    height: 100%;
    border: 1px solid #d2d2d2;
    margin-left: 20px;
    padding-left: 30px
}

.f-table-from p input:focus {
    outline: 0
}

.f-table-from .f-men input {
    width: 97%
}

.f-table-from .f-address {
    width: 100%;
    height: .7rem;
    display: block;
    margin: .3rem auto 0 auto;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: .2rem
}

.f-table-from .f-address strong {
    width: 25%;
    height: auto;
    display: block;
    float: left;
    color: #000000;
    font-size: .3rem;
    font-weight: 100;
    padding-top: .15rem
}

.f-table-from .f-address #trigger4 {
    width: 70%;
    display: block;
    float: right;
    border: none;
    outline: 0;
    height: 100%;
    line-height: .7rem;
    color: #b2b2b2;
    font-size: .28rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.f-table-from .f-address #trigger4 em {
    min-width: 28%;
    display: inline-block;
    margin: 0 auto;
    color: #b2b2b2;
    font-size: .28rem
}

.f-table-from p input::-webkit-input-placeholder {
    color: #b2b2b2;
    font-size: 15px
}

.f-table-from p input::-moz-placeholder {
    color: #b2b2b2;
    font-size: 15px
}

.f-table-from p input:-moz-placeholder {
    color: #b2b2b2;
    font-size: 15px
}

.f-table-from p input:-ms-input-placeholder {
    color: #b2b2b2;
    font-size: 15px
}

.f-book-news-btn {
    width: 120px;
    display: block;
    height: 45px;
    font-size: 16px;
    color: #FFFFFF;
    background: #d29944;
    text-align: center;
    margin: 2rem auto 0 auto;
    border-radius: 5px;
    line-height: 45px
}

.f-book-news-btn1 {
    width: 120px;
    display: block;
    height: 45px;
    font-size: 16px;
    color: #FFFFFF;
    background: #d29944;
    text-align: center;
    margin: 2rem auto 0 auto;
    border-radius: 5px;
    line-height: 45px
}

.f-table-from .f-iphone .f-btn-default {
    width: 130px;
    position: absolute;
    height: 45px;
    right: 5%;
    font-size: 15px;
    color: #d29944;
    border: none;
    border-left: 1px solid #d2d2d2;
    background: 0 0;
    float: none;
    left: 378px;
    padding-left: 0;
    margin-left: 0
}

.f-iphone {
    width: 550px;
    height: 45px;
    display: block;
    margin: 20px auto 0 auto;
    padding-bottom: 0;
    line-height: 45px;
    padding-top: 0
}

.f-table-from .f-iphone strong {
    width: 100px;
    height: 45px;
    display: block;
    float: left;
    color: #666;
    font-size: 16px;
    font-weight: 100;
    line-height: 45px;
    text-align: right
}

.city-picker-span {
    cursor: pointer;
    width: 357px !important;
    display: block;
    height: 45px !important;
    line-height: 45px !important;
    float: left;
    outline: 0;
    font-size: 16px;
    border: 1px solid #d2d2d2;
    margin-left: 20px;
    padding-left: 30px
}

.f-book-dd-list {
    height: auto;
    display: block;
    line-height: 45px;
    padding: 0 85px;
    margin-bottom: 60px
}

.f-book-dd-list .f-book-dd-list-t {
    background: #f4f4f4;
    font-size: 14px;
    color: #999;
    height: 45px
}

.f-book-dd-list .f-book-dd-list-t li {
    width: 281px;
    display: block;
    float: left;
    text-align: center
}

.f-book-dd-list .f-book-dd-list-t .dd-li1 {
    width: 400px;
    text-align: left;
    text-indent: 100px
}

.f-book-dd-list .f-book-dd-list-n {
    background: 0 0;
    overflow: hidden;
    height: auto
}

.f-book-dd-list .f-book-dd-list-n .dd-li1 {
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid
}

.f-book-dd-list .f-book-dd-list-n .dd-li1 img {
    width: 70px;
    display: block;
    padding-left: 20px;
    float: left
}

.f-book-dd-list .f-book-dd-list-n .dd-li1 h2 {
    width: 300px;
    float: right;
    padding: 0;
    text-align: left;
    text-indent: 0;
    line-height: 25px;
    font-size: 16px
}

.f-book-dd-list .f-book-dd-list-n .dd-li1 h2 span {
    width: 100%;
    display: block;
    margin: 0 auto
}

.f-book-dd-list .f-book-dd-list-n .dd-li1 h2 strong {
    color: #7f7f7f;
    font-size: 14px;
    width: 100%;
    display: block
}

.f-num-m {
    width: 281px;
    display: block;
    float: left;
    text-align: center;
    text-indent: 0;
    height: 100px;
    line-height: 60px;
    font-size: 16px;
    color: #d29944
}

.f-num-sl {
    width: 281px;
    display: block;
    float: left;
    text-align: center;
    text-indent: 0;
    height: 100px;
    line-height: 60px;
    font-size: 16px;
    color: #000000
}

.f-dd-li-zt {
    width: 400px;
    display: block;
    float: left
}

.f-book-dd-list .f-book-dd-list-n .dd-li1 {
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6
}

.f-article-t h2 a {
    padding-top: 0;
    color: #000000;
    font-size: 30px;

}

.f-article-t h2 img {
    width: auto;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
    padding-left: 10px;
    margin-top: -3px
}

.f-nav-news dl dt a {
    color: #e1dbd1;
    position: relative
}

.f-nav-news dl .nav-active a {
    color: #fff
}

.f-nav-news {
    width: 168px;
    height: 747px;
    overflow: initial;
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0
}

.f-aside-all {
    position: absolute;
    display: block;
    min-width: 168px;
    height: 360px
}

.f-aside-all .f-aside-cList > li {
    height: 45px;
    line-height: 44px;
    text-align: center
}

.f-aside-all .f-aside-cList > li a {
    color: #e1dbd1;
    font-size: 18px;

}

.f-aside-all .f-aside-cList > li > div {
    display: block;
    height: 100%
}

.f-aside-all .f-aside-cList > li > div > a {
    display: block;
    height: 100%;
    position: relative
}

.f-aside-all .f-aside-cList > li > div > a:after {
    position: absolute;
    top: 18px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-bottom: 1px solid #e1dbd1;
    border-right: 1px solid #e1dbd1;
    transform: rotate(-23deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

.f-aside-all .f-aside-cList > li:first-child {
    height: 46px;
    line-height: 45px
}

.f-aside-all .f-aside-cList > li:last-child {
    height: 44px;
    line-height: 44px
}

.f-aside-all .f-aside-cList > li .list-show {
    position: absolute;
    top: 0;
    left: 168px;
    display: inline-block;
    width: 0;
    background: #806d54;
    overflow: hidden;
    min-height: 360px;
    z-index: 99;
    overflow-y: auto
}

.list-show::-webkit-scrollbar {
    width: 5px;
    height: 1px
}

.list-show::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    background: #535353
}

.list-show::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 10px;
    background: #ededed
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system {
    width: 520px;
    padding: 30px 0;
    height: auto;
    margin: 0;
    display: block
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system dl {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: top;
    border-bottom: 1px solid #f0f0f0
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system dl:last-child {
    border-bottom: 0;
    padding: 0;
    display: block
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system dd, .f-aside-all .f-aside-cList > li .list-show .knowledge-system dt {
    display: block;
    line-height: 30px;
    padding: 15px 0;
    font-size: 0
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system dt {
    flex-grow: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-shrink: 0;
    margin-right: 20px
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system dt a {
    font-size: 13px;
    color: #333333
}

.f-aside-all .f-aside-cList > li .list-show .knowledge-system dd a {
    font-size: 13px;
    border: none;
    color: #FFFFFF;
    width: 100%;
    display: block;
    text-align: left;
    line-height: 18px;
    margin-bottom: 17px;
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study {
    padding-left: 20px;
    padding-right: 20px
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend-title {
    border-bottom: 1px solid #35b558
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend-title span {
    background: #35b558
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li {
    position: relative;
    padding-left: 28px;
    height: 39px;
    border-bottom: 1px solid #f0f0f0
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li:last-child {
    border-bottom: 0
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li img, .f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li > i {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -9px;
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li > p {
    font-size: 12px;
    text-align: justify;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    line-height: 38px
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li > p a {
    color: #333333
}

.f-aside-all .f-aside-cList > li .list-show .recommend-study .recommend li > p a:hover {
    color: #35b558
}

.f-aside-all .f-aside-cList > li:hover {
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.f-aside-all .f-aside-cList > li:hover > div > a {
    color: #fff
}

.f-aside-all .f-aside-cList > li:hover div {
    background: #806d54
}

.f-aside-all .f-aside-cList > li:hover > a {
    color: #fff
}

.f-aside-all .f-aside-cList > li:hover .list-show {
    width: 520px
}

.f-aside-all ul {
    padding-top: 20px
}

.f-aside-all .f-aside-cList > li:hover > div > a:after {
    content: '';
    width: 8px;
    height: 8px;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    transform: rotate(-23deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

.news-nav-list {
    min-width: 200px;
    display: block;
    float: left;
    margin: 0 30px
}

.f-aside-all .news-nav-list .news-nav-list-a {
    width: 100%;
    height: auto;
    display: block;
    color: #eed9b9;
    font-family: "Times New Roman", sans-serif;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    text-align: left;
    font-weight: 500;
    position: relative;
    line-height: 35px
}

.news-nav-list .news-nav-list-a:hover:after {
    position: absolute;
    top: 15px;
    content: '';
    right: 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-bottom: 1px solid #eed9b9;
    border-right: 1px solid #eed9b9;
    transform: rotate(-23deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

.f-aside-all .f-aside-cList > .news-active a {
    color: #FFFFFF;
}

.f-aside-all .f-aside-cList li a {
    font-family: Thaoma, "Helvetica Neue", "San Francisco", -apple-system, sans-serif;
    font-size: 17px;
}

.f-aside-all .f-aside-cList li a.pc-menu-btn {
    font-family: "Trebuchet MS", "Helvetica Neue", "San Francisco", -apple-system, sans-serif;
    letter-spacing: -0.04rem;
}

.f-footer-n {
    height: 122px;
    overflow: initial
}

.f-footer-n .f-footer-right-l {
    width: 250px;
    display: block;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    float: left;
    position: relative;
    padding-left: 30px
}

.f-footer-n .f-footer-right .f-footer-right-l a {
    width: 250px;
    display: block;
    position: relative;
    color: #9b8566;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    padding-top: 80px
}

.f-footer-n .f-footer-right .f-footer-right-l a img {
    display: block;
    padding-right: 5px;
    width: 18px;
    float: left;
    padding-top: 4px
}

.f-footer-n .f-copy-right-btn {
    width: 500px;
    display: block;
    height: 80px;
    background: 0 0;
    float: right;
    position: static
}

.f-footer-n .f-footer-right ul {
    width: 500px;
    display: block;
    margin: 0 auto;
    height: auto;
    text-align: center;
    padding-top: 0
}

.f-footer-n .f-footer-right ul li {
    display: block;
    float: right;
    width: 200px;
    position: relative;
    margin-left: 30px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    margin-top: 80px
}

.f-footer-n .f-footer-right ul li img {
    width: 150px;
    height: auto;
    position: absolute;
    bottom: 25px;
    z-index: 5;
    left: 0;
    right: 0;
    display: none;
    margin: 0 -5px 0 auto;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.f-footer-n .f-footer-right {
    height: 80px;
    border-top: none
}

.f-footer .f-footer-right .share li p {
    height: 30px;
    display: block;
    line-height: 30px;
    color: #4b392b;
    font-size: 12px;
    text-align: right;
    cursor: pointer
}

.f-footer .f-footer-right .share li .n-iphone {
    background: url(https://s1.howtozen.com/assets/img/pc/f_ico2.png) left center no-repeat;
    background-size: 23px;
    width: 215px
}

.f-footer .f-footer-right .share li .n-wx {
    background: url(https://s1.howtozen.com/assets/img/pc/f_ico1.png) left center no-repeat;
    background-size: 23px;
    width: 200px
}

.f-footer .f-footer-right .share li:hover .n-iphone {
    background: url(https://s1.howtozen.com/assets/img/pc/f_ico2_j.png) left center no-repeat;
    background-size: 23px;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.f-footer .f-footer-right .share li:hover .n-wx {
    background: url(https://s1.howtozen.com/assets/img/pc/f_ico1_j.png) left center no-repeat;
    background-size: 23px;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.f-footer .f-footer-right .share li:hover p {
    color: #9b8566;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s
}

.f-footer .f-footer-right .share li:hover img {
    display: block
}

.f-language {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 30px;
    text-align: center
}

.f-language a {
    width: 40px;
    display: inline-block;
    color: #FFFFFF;
    position: relative;
    opacity: .5;

}

.f-language .f-news-btn-active:after {
    content: '';
    width: 17px;
    height: 1px;
    background: #FFFFFF;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: 0 auto
}

.f-language .f-news-btn-active {
    opacity: 1
}

.input-box-new input {
    border: none;
    border-bottom: 1px solid #8d7c5e;
    border-radius: 0
}

@media only screen and (max-width: 1280px) {
    body {
        min-width: 1000px;
        overflow-x: hidden
    }

    .f-banner-content {
        width: 1200px
    }

    .f-banner-content .f-banner-right {
        width: 1032px
    }

    .f-text {
        width: 1199px
    }

    .f-list {
        width: 1031px
    }

    .f-list-top .f-list-top-t {
        width: 33%
    }

    .f-list-top .f-list-top-t ul {
        width: 450px
    }

    .f-list-top .f-list-top-t ul li {
        width: 450px;
    }

    .f-list-top .index-tip-ls1 {
        width: 50%;
    }

    .f-list-top .index-tip-ls2 {
        width: 50%;
    }

    .f-list-top .index-tip2-ls1 {
        width: 50%;
    }

    .f-list-top .index-tip2-ls2 {
        width: 50%;
    }

    .f-list-receal .f-receal-active:after {
        left: 490px;
    }

    .f-footer {
        width: 1200px
    }

    .f-footer .f-footer-right {
        width: 1032px
    }

    .f-about-text-l {
        width: 346px;
        padding-left: 60px;
        padding-right: 60px
    }

    .f-text-notice {
        width: 1200px
    }

    .f-text-notice .f-list {
        width: 1031px
    }

    .f-list-receal {
        width: 981px
    }

    .f-list-clean ul {
        padding: 0 35px
    }

    .f-clean-details {
        padding: 0 35px
    }

    .grid-music-container {
        padding: 0.4px 35px 0
    }

    .f-list-works ul {
        padding: 0 35px
    }

    .f-list-c-table {
        width: 881px
    }

    .f-list-c-table .f-news-ul {
        width: 415px
    }

    .f-reveal-t .f-reveal-time strong {
        display: inline-block;
        width: 49%;
        font-weight: 400
    }

    .f-banner {
        width: 1200px
    }

    .f-banner-content .f-banner-right img {
        width: 100%;
        height: 380px
    }

    .f-reveal-t .f-reveal-time strong:nth-child(1) {
        width: 40%
    }

    .f-reveal-t .f-reveal-time strong:nth-child(2) {
        width: 25%
    }

    .f-footer-news a {
        width: 343px
    }
}

@media only screen and (min-width: 3840px) {
    body {
        zoom: 2
    }
}

.pcVideo {
    width: 98%;
    height: auto;
    display: block;
    margin: 0 auto 30px auto
}

.video-icon {
    display: block;
    float: right;
    width: 24px;
    margin: 4px 10px
}

.tips-searchTop {
    margin-top: 0;
    padding-bottom: 40px
}

.f-chapter span {
    display: block
}