﻿p.Description {
    margin: 0;
    padding: 1em;
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
    color: #999;
    background-color: hsl(230, 16%, 96%);
}

.TechnologyItem:nth-child(1),
.TechnologyItem:nth-child(2)::before {
    background-image: url(../../_Image/technology/smart_glinc.png);
}

.TechnologyItem:nth-child(2) {
    background-image: url(../../_Image/technology/smart_gnet.jpg);
}

.TechnologyItem:nth-child(3),
.TechnologyItem:nth-child(4)::before {
    background-image: url(../../_Image/technology/smart_airbag.png);
}

.TechnologyItem:nth-child(4) {
    background-image: url(../../_Image/technology/smart_ocr.jpg);
}

.TechnologyItem:nth-child(5),
.TechnologyItem:nth-child(6)::before {
    background-image: url(../../_Image/technology/smart_monitor.png);
}

.TechnologyItem:nth-child(6) {
    background-image: url(../../_Image/technology/smart_cube.png);
}

.TechnologyItem:nth-child(7),
.TechnologyItem:nth-child(8)::before {
    background-image: url(../../_Image/technology/smart_sensor.jpg);
}

.TechnologyItem:nth-child(8) {
    min-height: 300px;
}

#Smart .Top {
    background-image: url(../../_Image/technology/banner_smart.jpg);
}

/* 客製 */
.TechnologyItem:nth-child(5) .Wapper {
    padding: 100px 0;
}

/* 客製 */
.TechnologyItem:nth-child(7) .Wapper .Title h2 {
    font-size: 50px;
}

.TechnologyItem:nth-child(5) .Wapper img {
    margin: 2em auto auto auto;
}

/* @media screen and (max-width:1480px) {
    .Wapper .FeatureList .FeatureItem#Overflow span {
        padding: 0 0 0 1em;
        display: block;
    }
} */

@media screen and (max-width:1439px) {
    .TechnologyItem:nth-child(5) .Wapper {
        width: calc(100% - 200px);
        transform: none;
    }

    .TechnologyItem:nth-child(5) .Wapper img {
        float: right;
        width: clamp(10px, 100%, 600px);
    }

    /* 客製 */
    .TechnologyItem:nth-child(6) .Wapper {
        width: 590px;
        transform: translateX(calc(-50% + 90px));
    }

    /* 客製 */
    .TechnologyItem:nth-child(7) .Wapper {
        width: 590px;
        transform: translateX(calc(+50% - 90px));
    }

    .TechnologyItem:nth-child(6) .Wapper .FeatureList:nth-last-of-type(2) {
        width: 240px;
    }
}

@media screen and (max-width:1249px) {
    .TechnologyItem:nth-child(2) {
        background-image: url(../../_Image/technology/smart_gnet_m.jpg);
    }

    .TechnologyItem:nth-child(4) {
        background-image: url(../../_Image/technology/smart_ocr_m.jpg);
    }

    .TechnologyItem:nth-child(6) {
        background-image: url(../../_Image/technology/smart_cube_m.jpg);
    }

    .TechnologyItem:nth-child(2n) .Wapper {
        transform: translateX(-55%);
    }

    .TechnologyItem:nth-child(6) .Wapper {
        margin: 50px auto;
        width: calc(50% - 100px);
        transform: translateX(-50%);
    }

    .TechnologyItem:nth-child(7) .Wapper {
        width: calc(50% - 100px);
        transform: translateX(50%);
    }

    .TechnologyItem:nth-child(7) .Wapper .Title h2 {
        line-height: 1em;
    }

    .TechnologyItem:nth-child(7) .Wapper .Title h3 {
        margin: 5px 0 20px 0;
    }

    .TechnologyItem:nth-child(6) .Wapper .FeatureList {
        width: 100%;
    }
}

@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(6) .Wapper {
        margin: auto;
    }

    .TechnologyItem:nth-child(3) .Wapper,
    .TechnologyItem:nth-child(7) .Wapper {
        background: -moz-linear-gradient(bottom, transparent 25%, #fff 53%);
        background: -webkit-linear-gradient(bottom, transparent 25%, #fff 53%);
        background: linear-gradient(to top, transparent 25%, #fff 53%);
    }

    .TechnologyItem:nth-child(8) {
        min-height: 150px;
    }

    .TechnologyItem:nth-child(6) .Wapper .FeatureList:nth-last-of-type(2) {
        width: 100%;
    }

    .TechnologyItem:nth-child(6) .Wapper .FeatureList .FeatureItem br {
        display: none;
    }
}

@media screen and (max-width:767px) {
    p.Description {
        font-size: 14px;
    }

    .TechnologyItem:nth-child(2n) {
        background-size: auto 81vw;
    }

    .TechnologyItem:nth-child(7) {
        background-position: left calc(100% + (300px *.5));
        background-size: auto calc(1000px *.5);
    }

    .TechnologyItem:nth-child(1) .Wapper {
        padding: 18vw 9.3vw 380px 9.3vw;
    }

    .TechnologyItem:nth-child(2) .Wapper {
        padding: 18vw 9.3vw 67vw 9.3vw;
    }

    .TechnologyItem:nth-child(3) .Wapper {
        padding: 18vw 9.3vw 300px 9.3vw;
    }

    .TechnologyItem:nth-child(4) .Wapper {
        padding: 18vw 9.3vw 72vw 9.3vw;
    }

    .TechnologyItem:nth-child(5) .Wapper {
        padding: 18vw 9.3vw 300px 9.3vw;
    }

    .TechnologyItem:nth-child(6) .Wapper {
        padding: 18vw 9.3vw 72vw 9.3vw;
    }

    .TechnologyItem:nth-child(7) .Wapper {
        padding: 18vw 9.3vw 300px 9.3vw;
        background: -moz-linear-gradient(bottom, transparent 25%, #fff 50%);
        background: -webkit-linear-gradient(bottom, transparent 25%, #fff 50%);
        background: linear-gradient(to top, transparent 25%, #fff 50%);
    }

    .TechnologyItem .Wapper .Title,
    .TechnologyItem:nth-child(2n) .Wapper .Title {
        margin: 0 0 20px 0;
    }

    .TechnologyItem:nth-child(7) .Wapper .Title h2 {
        font-size: 34px;
        line-height: 1em;
    }

    .TechnologyItem .Wapper .Title h3 {
        margin: 0;
        font-size: 19px;
        line-height: 19px;
    }

    .TechnologyItem:nth-child(5) .Wapper img {
        margin: 0 0 50px 0;
        width: 100%;
    }

    .TechnologyItem:nth-child(1) .Wapper .SubButton,
    .TechnologyItem:nth-child(3) .Wapper .SubButton,
    .TechnologyItem:nth-child(6) .Wapper .SubButton {
        float: left;
        margin: 10px 0 0 10px;
        width: 100%;
    }
}

@media screen and (max-width:375px) {
    .TechnologyItem:nth-child(1) {
        background-position: left calc(100% + (300px *.5));
        background-size: auto calc(1000px *.5);
    }

    .TechnologyItem:nth-child(1) .Wapper {
        padding: 18vw 9.3vw 320px 9.3vw;
    }

    .TechnologyItem:nth-child(1) .Wapper .FeatureList {
        width: 100%;
    }
}