.head {
    background-color: #707070;
    padding-left: calc(100vw*290/1423);
    padding-right: calc(100vw*290/1423);
    padding-top: calc(100vw*10/1423);
    padding-bottom: calc(100vw*10/1423);
    color: #FFFFFF;
}

.banner {
    width: 100%;
    background:linear-gradient(to bottom, #707070 0%,#707070 50%,#050706 51%,#050706 100%);
}
.banner img {
    width: 100%;
}
.content1 {
    background-color: #050706;
}
.content1 .content-header {
    padding-top: 3%;
    padding-bottom: 3%;
}
.content1 .content-header .title {
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 1%;
    padding-right: 1%;
}
.content1 .content-content {
    padding-left: calc(100vw*290/1423);
    padding-right: calc(100vw*290/1423);
    padding-bottom: 3%;
} 
.content1 .content-content img {
    width: 25%;
}


.content2 {
    background-color: #050706;
}
.content2 .content-header {
    padding-top: 3%;
    padding-bottom: 3%;
}
.content2 .content-header .title {
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 1%;
    padding-right: 1%;
}
.content2 .content-content {
    padding-left: calc(100vw*290/1423);
    padding-right: calc(100vw*290/1423);
    padding-bottom: 3%;
} 
.content2 .content-content img {
    width: 100%;
}

.content3 {
    background-color: #050706;
    padding-bottom: 3%;
}
.content3 img {
    width: 100%;
}

.content3 .one {
    margin-top: 3%;
}
.content3 .two {
    margin-top: 3%;
}


.font {
    padding-bottom: 3%;
    background-color: #222929;
    color: #FFFFFF;
    font-weight: 400;
}

.font .font-content {
    padding-left: calc(100vw*290/1423);
    padding-right: calc(100vw*590/1423);
}
.font .font-content .one {
    padding-top: 4%;
}

.font .font-content .two {
    margin-top: 3%;
}
.font .font-content .three {
    margin-top: 3%;
}