﻿.TechnologyItem .Wapper .Title {
    font-size: 45px;
    line-height: 1.1em;
}

.TechnologyItem:nth-child(1),
.TechnologyItem:nth-child(2)::before {
    background-image: url(../../_Image/technology/design_1.png);
}

.TechnologyItem:nth-child(2) {
    background-image: url(../../_Image/technology/design_2.jpg);
}

.TechnologyItem:nth-child(3),
.TechnologyItem:nth-child(4)::before {
    background-image: url(../../_Image/technology/design_3.png);
}

.TechnologyItem:nth-child(4) {
    background-image: url(../../_Image/technology/design_4.jpg);
}

.TechnologyItem:nth-child(5),
.TechnologyItem:nth-child(6)::before {
    background-image: url(../../_Image/technology/design_5.png);
}

.TechnologyItem:nth-child(6) {
    background-image: url(../../_Image/technology/design_6.jpg);
}

.TechnologyItem:nth-child(7),
.TechnologyItem:nth-child(8)::before {
    background-image: url(../../_Image/technology/design_7.jpg);
}

.TechnologyItem:nth-child(8) {
    min-height: 300px;
}

#Design .Top {
    background-image: url(../../_Image/technology/banner_design.jpg);
}

@media screen and (max-width:1439px) {
    .TechnologyItem:nth-child(1) {
        height: 600px;
    }

    .TechnologyItem:nth-child(2) .Wapper {
        width: 600px;
        transform: translateX(calc(-50% + 100px));
    }

    .TechnologyItem:nth-child(4) .Wapper {
        width: 650px;
        transform: translateX(calc(-50% + 150px));
    }

    .TechnologyItem:nth-child(8) {
        min-height: 450px;
    }
}

@media screen and (max-width:1249px) {
    .TechnologyItem:nth-child(1) {
        height: 650px;
    }

    .TechnologyItem:nth-child(2) {
        background-image: url(../../_Image/technology/design_2_m.jpg);
    }

    .TechnologyItem:nth-child(2) .Wapper,
    .TechnologyItem:nth-child(4) .Wapper {
        width: calc(50% - 100px);
        transform: translateX(-50%);
    }

    .TechnologyItem:nth-child(3) {
        background-image: url(../../_Image/technology/design_3_m.jpg);
    }

    .TechnologyItem:nth-child(4) {
        background-image: url(../../_Image/technology/design_4_m.jpg);
    }

    .TechnologyItem:nth-child(6) {
        background-image: url(../../_Image/technology/design_6_m.jpg);
    }

    .TechnologyItem:not(:nth-child(8)) .Wapper {
        padding: 100px 0;
    }

}

@media screen and (max-width:1023px) {
    .TechnologyItem:nth-child(1) {
        height: auto;
    }

    .TechnologyItem:nth-child(1) .Wapper,
    .TechnologyItem:nth-child(2) .Wapper,
    .TechnologyItem:nth-child(3) .Wapper,
    .TechnologyItem:nth-child(4) .Wapper,
    .TechnologyItem:nth-child(5) .Wapper,
    .TechnologyItem:nth-child(6) .Wapper,
    .TechnologyItem:nth-child(7) .Wapper {
        padding: 100px 100px 400px 100px;
        transform: none;
        width: 100%;
    }

    .TechnologyItem:nth-child(8) {
        min-height: 150px;
    }
}

@media screen and (max-width:767px) {
    .TechnologyItem:nth-child(odd) {
        background-position: 10% calc(100% + (3 *12vw));
        background-size: auto calc(10 *12vw);
    }

    .TechnologyItem:nth-child(even) {
        background-size: auto clamp(100px, 90vw, 600px);
    }

    .TechnologyItem:nth-child(6) {
        background-position: 78% bottom;
    }

    .TechnologyItem:nth-child(7) {
        background-position: 10% calc(100% + (3 *15vw));
        background-size: auto calc(10 *15vw);
    }

    .TechnologyItem:nth-child(1) .Wapper {
        padding: 18vw 9.3vw 62vw 9.3vw;
    }

    .TechnologyItem:nth-child(2) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 50px) 9.3vw;
    }

    .TechnologyItem:nth-child(3) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 90px) 9.3vw;
    }

    .TechnologyItem:nth-child(4) .Wapper {
        padding: 18vw 9.3vw 85vw 9.3vw;
    }

    .TechnologyItem:nth-child(5) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 90px) 9.3vw;
    }

    .TechnologyItem:nth-child(6) .Wapper {
        padding: 18vw 9.3vw 75vw 9.3vw;
    }

    .TechnologyItem:nth-child(7) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 50px) 9.3vw;
    }

    .TechnologyItem .Wapper .Title,
    .TechnologyItem:nth-child(2n) .Wapper .Title {
        margin: 0 0 20px 0;
    }

    .TechnologyItem .Wapper .Title {
        font-size: 35px;
    }

    .TechnologyItem .Wapper .FeatureList {
        padding: 0 0 0 1em;
        width: calc(100% - 1em);
    }
}