body{
    width: 1920px;
    height: 915px;
    opacity: 1;
    display: block;
    transform-origin: left top;
    overflow: hidden;
}

.hide{
    display: none;
}
.chapter{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-size: 100% 100%;
}
.chapter1{
    background-image: url("../images/chapter1_bg.png");
    left: 0;
}
.chapter2{
    background-image: url("../images/chapter2_bg.png");
    left: 1920px;
}
.chapter3{
    background-image: url("../images/chapter3_bg.png");
    left: 1920px;
}
.chapter4{
    background-image: url("../images/chapter4_bg.png");
    left: 1920px;
}
.chapter5{
    background-image: url("../images/chapter5_bg.png");
    left: 1920px;
}
.chapter6{
    background-image: url("../images/chapter6_bg.png");
    left: 1920px;
}
.chapter1-title{
    position: relative;
    left: 50%;
    margin-left: -620px;
    top: 100px;
}
.chapter1-main{
    position: relative;
    top:160px;
    display: flex;
}
.chapter1-main:after{
    clear: both;
}
.chapter1-word, .chapter2-word, .chapter3-word, .chapter4-word, .chapter5-word, .chapter6-word{
    position: relative;
    flex: 1;
    text-align: center;
}
.chapter1-image, .chapter2-image, .chapter3-image, .chapter4-image, .chapter5-image, .chapter6-image{
    flex: 1;
    display: flex;
    padding-top: 50px;
}
.chapter2-image, .chapter3-image, .chapter4-image, .chapter5-image, .chapter6-image{
    margin-top: 40px;
}
.chapter1-image-item{
    flex: 1;
}
.chapter1-image-item:nth-child(2n){
    padding-top: 70px;
}
.chapter1-boat{
    position: relative;
    top:240px;
    left: 1600px;
}
.chapter1-move{
    position: relative;
    left: 1600px;
    top: 150px;
}
.chapter2-move, .chapter3-move, .chapter4-move, .chapter5-move, .chapter6-move{
    position: relative;
    left: 1600px;
    top: -20px;
}
.chapter2-boat, .chapter3-boat, .chapter4-boat, .chapter5-boat, .chapter6-boat{
    position: relative;
    top:40px;
    left: 1600px;
}
.chapter2-title, .chapter3-title, .chapter4-title, .chapter5-title, .chapter6-title{
    position: relative;
    left: 50%;
    margin-left: -150px;
}
.chapter2-subtitle img, .chapter3-subtitle img, .chapter4-subtitle img, .chapter5-subtitle img, .chapter6-subtitle img{
    width: 30%;
}
.chapter2-main, .chapter3-main, .chapter4-main, .chapter5-main, .chapter6-main{
    position: relative;
    top:60px;
    display: flex;
}

.chapter-show{
    position: relative;
    left: 1700px;
    display: inline-block;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #1c7430;
    color: white;
    font-size: 18px;
    font-weight: bolder;
    box-shadow: rgba(0, 0, 0, 0.3);
}
.content{
    position: absolute;
    top: 1000px;
    border: 3px solid #ddd;
    border-bottom: none;
    z-index: 9999;
    background-color: #eee;
    height: 820px;
    overflow-y: scroll;

}
.content-title{
    font-size: 40px;
    line-height: 80px;
    margin: 30px 10px;
    border-bottom: 2px solid green;
    font-weight: bolder;
    color: green;
}
.content-item{
    width: 450px;
    height: 340px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    float: left;
}
.content-item img{
    width: 450px;
    height: 300px;
    object-fit: cover;
}
.content-item .title{
    width: 450px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
.btn-close{
    float: right;
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    border: 1px solid green;
    border-radius: 20px;
}