.banner {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative
}
.banner-title {
    position: absolute;
    bottom: 47%;
    color: #fff;
    text-align: center;
    width: 100%;
}
.banner-title p{font-size:1.5rem}
.banner-title h2{font-size:4rem}
.book-box{position:relative}
.book {
    background: #be9562;
    width: 50%;
    margin-left: 25%;
    padding: 5rem 0;
    text-align: center;
    color:#fff
}
.book-title {
    font-weight: bold;
    font-size: 3rem;
}
.book-desc {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}
.intro{padding:10rem 15% 8rem}
.manager {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8rem;
    justify-content: space-between;
}
.manager .manager_i{
    width: calc((100% - 3rem)/3);
    margin-bottom: 1.5rem;
    border: 1px solid #8e8e8e;
    padding: 1.5rem;
    color: #8e8e8e;
}
p.desc {
    font-size: var(--small-font-size);
    margin-top: 1.5rem;
    line-height: 1.75;
    text-align: justify;
    color: #8e8e8e
}
.manager .info {
    border-bottom: 1px solid #8e8e8e;
    padding-bottom: 1rem;
}
.manager .name{font-size:1.25rem}
.manager .identity{font-size:1.3rem}
.manor{position:relative}
.manor_i {
    background: #be9562;
    color: #fff;
    width: 50vw;
    padding: 4rem;
    opacity:0;
    text-align: center;
    display: inline-flex;
    margin-top:-25%;
    justify-content:space-between
}
.manor_i .info{text-align:left;width:30%}
.manor_i .place{font-size: var(--main-font-size);line-height:125%;margin-bottom:.5rem;text-align:left}
.manor_i .manor-c{width:70%}
.manor_i .manor-c .desc{color:#fff;margin-bottom:1rem;margin-top:0}
.manor_s .manor_s_i{width:100%;margin:3rem auto 0;text-align:center;position:relative}
.manor_map {
    position: absolute;
    width: 10rem;
    left: 3%;
    bottom: 25%;
    height: 10rem;
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular{position:absolute;left:0;top:0;transition: all .5s cubic-bezier(0.31, 0.66, 0.46, 0.95);}
.manor_map:hover  .circular{transform:rotate(270deg)}
.manor_s img{width:100%}
.map {
    position: absolute;
    width: 40%;
    left: 30%;
    bottom: 8rem;
}
.map>img{width:100%;}
.hainan {
    position: absolute;
    right: 7%;
    bottom: 7%;
    width:9rem
}
.map .point{position:absolute;cursor:pointer}
.map .point img{width:1.5rem}
.point1{bottom:18%;right:20%;}
.point2{bottom:26%;right:20%;}
.point3{bottom:23%;right:17%;}
.point4{bottom:22%;right:22%;}
.point5{bottom:18%;right:57%;}
.point6{bottom:39%;right:28%;}
.point7{bottom:20%;right:54%;}
.point8{bottom:31%;right:18%}
.point-content {
    position: absolute;
    width: 0;
    top: 0%;
    color: #fff;
    left: 125%;
    overflow: hidden;
    transition:width .75s linear;
    display:flex
}
.point:hover .point-content {
    width:50rem
}
.point:hover .point-content p{opacity:1;transition-delay:.35s;}
.point-content::before {
    content:"";
    display:inline-block;
    margin-top:1rem;
    width:10rem;
    border-top:1px dashed;
    vertical-align:top;
}
.point-content p{white-space:nowrap;display:inline-block;transition:opacity .3s linear;opacity:0}
.point5 .point-content,.point7 .point-content{left:auto;right:125%;flex-direction:row-reverse}