.banner {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative
}
img{width:100%}
.book-box{position:relative}
.book {
    position: absolute;
    background: #fff;
    width: 50%;
    left: 25%;
    top: 0%;
    padding: 5rem 0;
    text-align: center;
}
.book-title {
    font-weight: bold;
    color: #be9562;
    font-size: 3rem;
}
.book-desc {
    color: #be9562;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}
.quality {
    background: #f5f7fa;
    padding: 8rem 10%;
    text-align: center;
}
.quality>.desc{text-align:center}
.headline {
    font-weight: bold;
    font-size: 2.25rem;
}
p.desc {
    font-size: var(--small-font-size);
    margin-top: 1.5rem;
    line-height: 1.75;
    text-align: justify;
    color: #8e8e8e
}
.history {
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
}
.history_item{width:19%;text-align:left;background:#fff}
.history_img{line-height:0}
.history_content{padding:2rem}
.history_content .year{font-weight:bold}
.history_item:hover{color:#fff;background:#be9562}
.history_item:hover p.desc{color:#fff}
.manor {
    padding: 10rem 10%;
    display: flex;
    justify-content: space-between;
}
.manor .swiper-container{width:60%;margin:0}
.manor-content {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.know-More{display:flex;align-items:center;color:#8e8e8e;margin-top:2rem;width: max-content;}
.know-More:hover .arrow-line{width:40px}
.arrow-line {
    height: 1px;
    width: 15px;
    background: #8e8e8e;
    margin-left: 10px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    width: 5px;
    height: 5px;
    border-top: 5px solid transparent;
    border-left: 5px solid;
    border-bottom: 5px solid transparent;
}
.subhead {
    font-weight: bold;
    font-size: var(--main-font-size)
}
.manor .know-More,.construct .know-More {
    color: #be9562
}
.manor .arrow-line,.construct .arrow-line {
    background: #be9562
}
.gallery-thumbs{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:3rem}
.thumbs {
    width: 24%;
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
    filter: opacity(40%);
    margin-top: 1rem;
    height: calc(80vw * 0.35 * 0.24);
    cursor:pointer;
}
.thumbs.active{filter:unset}
.info {
    position: absolute;
    color: #fff;
    text-align: right;
    bottom: 5%;
    right: 5%;
}
.info .place{font-size:var(--main-font-size);line-height:125%;margin-bottom:.5rem}
.construct {
    display: flex;
    background: #05034b;
    align-items: center;
}
.construct_t {
    width: 50%;
    color: #be9562;
    padding: 0 15% 0 10%;
}
.construct_t .desc{color:#be9562}
.construct_i {
    width: 50%;
    line-height: 0;
}
.ecology{position:relative}
.ecology_c {
    position: absolute;
    color: #fff;
    padding-right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
}
.ecology_c .desc{color:#fff;width:30rem}
.ecology .sign {
    font-size: var(--main-font-size);
    margin-top: 3rem;
}
.sign span {
    margin-right: 3rem;
}
.sign span:not(:last-child)::after{
    content: "";
    display: inline-block;
    height: 1.75rem;
    width: 1px;
    vertical-align: middle;
    background: #8e8e8e;
    margin-left: 3rem;
}
.ecology .know-More{color:#fff}
.ecology .arrow-line{background:#fff}
.inherit{text-align:center;padding:8rem 10%;background:#f5f7fa}
.inherit .desc{text-align:center}
.inherit .know-More{margin-left:46%;margin-bottom:3rem}
.gain{background:#fff}
.gain .box_s{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin-top:2rem}
.box_s img{width:calc((100% - 1.5rem)/2);margin-bottom:1.5rem}
.gain .box_s:nth-child(4){margin-bottom:7rem}
.swiper-Manor .swiper-slide{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center
}