@media (max-width: 767px) {
    .banner-desc-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-left: 5px;
    }


    .banner-desc-box-title {
        font-size: 25px;
        font-weight: 300;
        color: #37414b;
        text-align: left;
        width: 100%;
    }

    .banner-desc-box-content {
        font-size: 14px;
        color: #37414b;
        text-align: left;
        width: 100%;
    }

    .carousel-item {
        height: 100%;
    }
    .w-100{
        height: 100%;
        object-fit: cover;
    }
    .carousel-inner{
        height: 200px;
    }

    .youshi-box {
        margin-top: 20px;
    }

    .youshi-item-1 {
        max-width: 1300px;
        width: 100%;
        margin: 0 auto 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 10px;
        padding: 0 10px;
    }

    .youshi-item-2 {
        max-width: 1920px;
        width: 100%;
        margin: 0 auto 50px;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-direction: column;
        flex-wrap: wrap;
        padding: 0 10px;
    }

    .side-1 {
        width: 100%;
    }

    .side-2 {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .side-2 img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-1 {
        width: 48%;
        height: 200px;
        background: #cccccc;
    }

    .img-2 {
        width: 48%;
        height: 200px;
        background: #cccccc;
    }

    .title {
        font-size: 34px;
        padding: 20px 0;
    }

    .desc {
        font-size: 16px;
        line-height: 30px;
    }

    .img-b {
        background: #cccccc;
        width: 100%;
        height: 400px;
    }

    .padding-left-20 {
        padding-left: 20px;
    }

    .padding-right-20 {
        padding-right: 20px;
    }

    .bg-f8f8f8 {
        background: #f8f8f8;
    }

    .side-r-1 {
        width: 100%;
        /*padding-right: 10%;*/
    }

    .img-swiper-pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }

    .img-swiper-pagination2 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }

    .img-swiper-pagination3 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }


    .swiper-pagination-bullet-active {
        background: #37414b !important;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .banner-desc-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding:10px;
    }


    .banner-desc-box-title {
        font-size: 40px;
        font-weight: 300;
        color: #37414b;
        text-align: left;
        width: 100%;
    }

    .banner-desc-box-content {
        font-size: 16px;
        color: #37414b;
        text-align: left;
        width: 100%;
    }

    .youshi-box {
        margin-top: 50px;
    }

    .youshi-item-1 {
        max-width: 1300px;
        width: 100%;
        margin: 0 auto 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        /*flex-direction: column;*/
        gap: 10px;
        padding: 0 10px;
    }

    .youshi-item-2 {
        max-width: 1920px;
        width: 100%;
        margin: 0 auto 50px;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        /*flex-direction: column;*/
        flex-direction: row-reverse;
        flex-wrap: wrap;
        padding: 0 10px;
    }

    .side-1 {
        width: 350px;
    }

    .side-2 {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .side-2 img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-1 {
        width: 48%;
        height: 300px;
        background: #cccccc;
    }

    .img-2 {
        width: 48%;
        height: 300px;
        background: #cccccc;
    }

    .title {
        font-size: 34px;
        padding: 20px 0;
    }

    .desc {
        font-size: 16px;
        line-height: 30px;
    }

    .img-b {
        background: #cccccc;
        width: 100%;
        height: 400px;
    }

    .padding-left-20 {
        padding-left: 20px;
    }

    .padding-right-20 {
        padding-right: 20px;
    }

    .bg-f8f8f8 {
        background: #f8f8f8;
    }

    .side-r-1 {
        width: 350px;
        /*padding-right: 10%;*/
    }

    .img-swiper-pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }

    .img-swiper-pagination2 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }

    .img-swiper-pagination3 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }


    .swiper-pagination-bullet-active {
        background: #37414b !important;
    }

    .title h1{
        font-size: 30px;
    }
}

@media (min-width: 1366px) {
    .banner-desc-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }


    .banner-desc-box-title {
        font-size: 40px;
        font-weight: 300;
        color: #37414b;
        text-align: left;
        width: 60%;
    }

    .banner-desc-box-content {
        font-size: 16px;
        color: #37414b;
        text-align: left;
        width: 60%;
    }

    .youshi-box {
        margin-top: 50px;
    }

    .youshi-item-1 {
        max-width: 1300px;
        width: 100%;
        margin: 0 auto 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

    .youshi-item-2 {
        max-width: 1300px;
        width: 100%;
        margin: 0 auto 50px;
        display: flex;
        justify-content: space-between;
        /*align-items: center;*/
        flex-direction: row-reverse;
        gap: 30px;
    }

    .side-1 {
        width: 50%;
    }

    .side-2 {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:50%;
        overflow: hidden;
        position: relative;
    }

    .side-2 img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-1 {
        width: 100%;
        height: 400px;
        background: #cccccc;
    }

    .img-2 {
        width: 300px;
        height: 370px;
        background: #cccccc;
    }

    .title {
        font-size: 44px;
        padding: 20px 0;
    }

    .desc {
        font-size: 16px;
        line-height: 30px;
    }

    .img-b {
        background: #cccccc;
        width: 100%;
        height: 400px;
    }

    .padding-left-20 {
        padding-left: 20px;
    }

    .padding-right-20 {
        padding-right: 20px;
    }

    .bg-f8f8f8 {
        background: #f8f8f8;
    }

    .side-r-1 {
        width: 50%;
        padding-right: 10%;
    }

    .img-swiper-pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }

    .img-swiper-pagination2 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }

    .img-swiper-pagination3 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
    }


    .swiper-pagination-bullet-active {
        background: #37414b !important;
    }
}

.title h1{
    font-family: Quicksand-Medium;
}