.banner {
    height: 100vh;
    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}
img{width:100%}
.book-box{position:relative}
.book {
    position: absolute;
    background: #fff;
    width: 80%;
    left: 10%;
    top: 0%;
    padding: 7rem 24%;
}
.book-c {
    font-weight: bold;
    font-size: 2rem;
    text-align: justify;
}
.author {
    text-align: right;
    margin-top: 2rem;
}
.author .line{
    width: 6rem;
    display: inline-block;
    height: 1px;
    background: #000;
    vertical-align: middle;
    margin-right: .5rem;
}
p.desc{margin-top:4rem;font-size:var(--small-font-size);text-align:justify;color:#8e8e8e}
.target{padding:8rem 15%;}
.target-c{padding:0 20%;margin-top:8rem}
.way{padding:10rem 10%}
.s-content{display:flex;flex-wrap:wrap;background:#f5f7fa;margin-bottom:5rem}
.s-content>div{width:50%;}
.s-img{line-height:0}
.s-img>img{width:100%}
.s-text {
    text-align: left;
    padding: 5rem;
    padding-right: 11rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.s-text .desc{
    margin-top:2rem;
    color:#000
}
.s-text h2{font-size:var(--main-font-size);font-weight:bold}
.know-More{display:flex;align-items:center;color:#8e8e8e;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;
}