﻿.TechnologyItem:nth-child(3) .Wapper {
    transform: translateX(calc(50% + 100px));
}

.TechnologyItem .Wapper .Title {
    font-size: 45px;
    line-height: 1.1em;
}

.TechnologyItem:nth-child(1),
.TechnologyItem:nth-child(2)::before {
    background-image: url(../../_Image/technology/process_1.png);
}

.TechnologyItem:nth-child(2) {
    background-image: url(../../_Image/technology/process_2.jpg);
}

.TechnologyItem:nth-child(3),
.TechnologyItem:nth-child(4)::before {
    background-image: url(../../_Image/technology/process_3.png);
}

.TechnologyItem:nth-child(4) {
    background-image: url(../../_Image/technology/process_4.jpg);
}

.TechnologyItem:nth-child(5),
.TechnologyItem:nth-child(6)::before {
    background-image: url(../../_Image/technology/process_5.png);
}

.TechnologyItem:nth-child(6) {
    background-image: url(../../_Image/technology/process_6.jpg);
}

.TechnologyItem:nth-child(7),
.TechnologyItem:nth-child(8)::before {
    background-image: url(../../_Image/technology/process_7.png);
}

.TechnologyItem:nth-child(8) {
    min-height: 300px;
}

#Process .Top {
    background-image: url(../../_Image/technology/banner_process.jpg);
}

@media screen and (max-width:1699px) {
    .TechnologyItem:nth-child(3) .Wapper {
        transform: translateX(calc(50% + 50px));
    }
}

@media screen and (max-width:1439px) {
    .TechnologyItem:nth-child(8) {
        min-height: 450px;
    }
}

@media screen and (max-width:1249px) {

    .TechnologyItem:nth-child(3),
    .TechnologyItem:nth-child(4)::before {
        background-position: -40px calc(100% + (300px *.6));
    }

    .TechnologyItem:nth-child(2) .Wapper {
        width: calc(50% - 50px);
    }

    .TechnologyItem:nth-child(3) .Wapper {
        width: calc(50% - 50px);
        transform: translateX(50%);
    }
}

@media screen and (max-width:1023px) {

    .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;
    }

    .TechnologyItem:nth-child(2) {
        background-image: url(../../_Image/technology/process_2_m.jpg);
    }

    .TechnologyItem:nth-child(3) {
        background-image: url(../../_Image/technology/process_3_m.jpg);
    }

    .TechnologyItem:nth-child(4) {
        background-image: url(../../_Image/technology/process_4_m.jpg);
    }

    .TechnologyItem:nth-child(5) {
        background-image: url(../../_Image/technology/process_5_m.jpg);
    }

    .TechnologyItem:nth-child(6) {
        background-image: url(../../_Image/technology/process_6_m.jpg);
    }
}

@media screen and (max-width:767px) {
    .Top:not(#ProductDetail .Top) .Container h1 {
        font-size: clamp(1px, 9vw, 30px);
    }

    .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(odd) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 90px) 9.3vw;
    }

    .TechnologyItem:nth-child(even):not(:nth-child(8)) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 50px) 9.3vw;
    }

    .TechnologyItem:nth-child(3) .Wapper {
        padding: 18vw 9.3vw calc(100vw - 60px) 9.3vw;
    }

    .TechnologyItem .Wapper .Title,
    .TechnologyItem:nth-child(2n) .Wapper .Title {
        margin: 0 0 20px 0;
    }

    .TechnologyItem .Wapper .Title {
        font-size: 35px;
        line-height: 1em;
    }
}