﻿.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);
}

.Top {
    background-image: url(../../_Image/technology/smart_banner.jpg);
}

.TechnologyItem:nth-child(1) {
    background-image: url(../../_Image/technology/smart_1.jpg);
}

.TechnologyItem:nth-child(2) {
    background-image: url(../../_Image/technology/smart_2.jpg);
}

@media screen and (max-width:1699px) {
    .TechnologyItem .Container .Wapper img {
        width: 100%;
    }
}

@media screen and (max-width:1279px) {
    .TechnologyItem:nth-child(2) {
        background-size: 48%;
    }
    .TechnologyItem .Container .Wapper .FeatureList:nth-child(2) {
        width: 45%;
    }
    .TechnologyItem .Container .Wapper .FeatureList:nth-child(3) {
        width: 55%;
    }
}

@media screen and (max-width:1024px) {
    .TechnologyItem:nth-child(2n) .Container .Wapper {
        transform: translateY(-35%);
    }
}

@media screen and (max-width:767px) {
    .SubButton#AilincSubButton {
        margin: 0 0 5% 10px;
    }
    .Top {
        background-image: url(../../_Image/technology/smart_banner_m.jpg);
    }
    .TechnologyItem:nth-child(2n+1),
    .TechnologyItem:nth-child(2n) {
        background-image: none;
    }
    .TechnologyItem:nth-child(2) {
        margin: -10% 0 0 0;
    }
    .TechnologyItem:nth-child(2n) .Container {
        margin: -100px auto auto auto;
    }
    .TechnologyItem:nth-child(2) .Container .Wapper {
        transform: none;
    }
    .TechnologyItem .Container .Wapper .Title {
        margin: 40px 0 20px 0;
        padding: 0 0 0 50px;
        background-size: auto 52px;
        background-position: left 10px;
    }
    .TechnologyItem:nth-child(2n) .Wapper .Title {
        padding: 0 0 0 60px;
        background-position: 10px 10px;
    }
    .TechnologyItem .Container .Wapper .Title h2 {
        font-size: 33px;
        line-height: 33px;
    }
    .TechnologyItem .Container .Wapper .Title h3 {
        margin: 10px 0 15px 0;
        font-size: 19px;
        line-height: 19px;
    }
    .TechnologyItem:nth-child(1) .BgImg {
        margin: -21% auto auto auto;
    }
    .TechnologyItem:nth-child(1) .BgImg img {
        margin: 0 0 0 -8%;
        width: 126%;
    }
    .TechnologyItem:nth-child(2) .BgImg {
        margin: -15% auto auto auto;
    }
    .TechnologyItem:nth-child(2) .BgImg img {
        float: right;
        margin: 0 0 0 -10%;
        width: 100%;
    }
}