.s-top{min-height: 100%;}
.b-for-head-tetx{float: left; width: 50%; padding-top: 30px;}
.b-for-head-img{float: left; width: 50%; padding-top: 30px; display: flex; justify-content: end;}
.b-head-img{width: 90%; background-repeat: no-repeat; background-position: center; background-size: cover; border: 10px solid var(--bg); border-radius: 14px;}
.b-head-img::after{content: ""; display: block; padding-bottom: 100%;}
h1{color: var(--color4); font-size: 5vw; margin-top: 30px;}
h4{color: var(--txt); font-size: 2.4vw; margin-top: 30px;}
/************************************************************/
.section-name{width: 100%; color: var(--color4); text-align: center; font-size: 2vw; text-transform: uppercase;}
.grid-3{display: grid; grid-template-columns: auto auto auto; grid-gap: 30px; padding-top: 30px;}
.b-grid-txt{color: var(--txt); font-size: 1.5vw; line-height: 1.4;}
.b-grid-txt b{font-weight: bold;}
.grid-3-img{grid-gap: 20px;}
.b-img{background-repeat: no-repeat; background-position: center; background-size: cover; border: 10px solid var(--bg2); border-radius: 14px;}
.b-img::after{content: ""; display: block; padding-bottom: 100%;}
/************************************************************/
/************************************************************/
@media only screen and (max-width: 767px){
.b-for-head-tetx{width: 100%; padding: 30px 5% 0 5%;}
.b-for-head-img{width: 100%; padding-top: 20px; justify-content: center;}
h1{font-size: 9vw; line-height: 1.2; margin-top: 30px;}
h4{font-size: 6vw; line-height: 1.2; margin-top: 10px;}
/************************************************************/
.s{padding: 30px 0;}
.section-name{font-size: 6vw;}
.grid-3{grid-template-columns: auto; grid-gap: 20px; padding: 20px 10px 10px 10px;}
.b-grid-txt{font-size: 4.5vw; line-height: 1.4;}
}