﻿.ArefRuqaa {
    font-family: 'Aref Ruqaa', cursive;
    display: inline-block;
}

h2 span.ArefRuqaa {
    transform: skewX(-10deg) scaleY(0.8) scaleX(0.8) translateY(10%);
}

p span.ArefRuqaa {
    transform: skewX(-10deg);
}

p.Description {
    margin: 0;
    padding: 1em;
    text-align: center;
    font-size: 16px;
    line-height: 1.5em;
    color: #999;
    background-color: hsl(230, 16%, 96%);
}

#Smart .Top {
    background-image: url(../../_Image/technology/smart_banner.jpg);
}

.TechnologyItem:nth-child(1),
.TechnologyItem:nth-child(2)::before {
    background-image: url(../../_Image/technology/smart_ailinc.png);
}

.TechnologyItem:nth-child(2) {
    background-image: url(../../_Image/technology/smart_iconsole.jpg);
}

.TechnologyItem:nth-child(3),
.TechnologyItem:nth-child(4)::before {
    background-image: url(../../_Image/technology/smart_app.png);
}

.TechnologyItem:nth-child(4) {
    background-image: url(../../_Image/technology/smart_digitalcommunicationbox.jpg);
}

.TechnologyItem .Wapper h2.Title {
    margin: 0 0 20px 0;
    font-size: 45px;
    line-height: 45px;
    font-weight: bolder;
    letter-spacing: 0.05em;
    background-position: left center;
}

@media screen and (max-width:1249px) {
    .TechnologyItem:nth-child(2) {
        background-image: url(../../_Image/technology/smart_iconsole_m.jpg);
    }

    .TechnologyItem:nth-child(2) .Wapper {
        transform: translateX(-55%);
    }

    .TechnologyItem:nth-child(4) {
        background-image: url(../../_Image/technology/smart_digitalcommunicationbox_m.jpg);
    }

    .TechnologyItem:nth-child(4) .Wapper {
        width: calc(50% - 80px);
    }
}

@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 {
        padding: 100px 100px 400px 100px;
        transform: none;
        width: 100%;
    }

    .TechnologyItem:nth-child(4) .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%);
    }
}

@media screen and (max-width:767px) {
    p.Description {
        font-size: 14px;
    }

    .TechnologyItem:nth-child(2n) {
        background-size: auto 81vw;
    }

    .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) {
        background-position: left calc(73% + (300px *.6));
        background-size: auto calc(-22% + (1000px *.6));
    }

    .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 .Wapper .Title,
    .TechnologyItem:nth-child(2n) .Wapper .Title {
        margin: 0 0 20px 0;
    }

    .TechnologyItem .Wapper h2.Title {
        font-size: 32px;
        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;
    }

}