.com-card {
    width: 15rem;
    height: 100%;
    margin: 0 auto;
}

.flex {
    display: flex;
}

.flex-c {
    display: flex;
    align-items: center;
}

.flex-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-wp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-con {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aluminiumBox2 li img,
.aluminiumBox5Swiper img,
.aluminiumBox8 li img,
.aluminiumBox3 .rt .img img,
.aluminiumBox4 .img img,
.aluminiumBox6 li img,
.aluminiumBox7 .top .lt img,
.aluminiumBox7 li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
    vertical-align: bottom;
}

.aluminiumBox2 li:hover img,
.aluminiumBox5Swiper .swiper-slide:hover img,
.aluminiumBox8 li:hover img,
.aluminiumBox4 li:hover img,
.aluminiumBox6 li:hover img,
.aluminiumBox7 .top .lt:hover img,
.aluminiumBox7 li:hover img {
    transform: scale(1.1);
}


.aluminiumBox1 {
    position: relative;
    width: 100%;
    height: 13.375rem;
}

.aluminiumBox1 .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

.aluminiumBox1Con {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: auto;
}

.aluminiumBox1 .con {
    width: 100%;
    height: auto;
}

.aluminiumBox1 .top .lt {
    width: 7.625rem;
}

.aluminiumBox1 .top .lt .icon {
    width: 3.0375rem;
    height: auto;
    object-fit: cover;
    margin-right: .125rem;
}

.aluminiumBox1 .top .lt .txt h3 {
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
    font-size: .3rem;
}

.aluminiumBox1 .top {
    align-items: flex-end;
}

.aluminiumBox1 .top .lt .txt .more {
    display: inline-block;
    width: 3.075rem;
    height: .5875rem;
    border-radius: .075rem;
    background: var(--mainColor);
    color: rgba(255, 255, 255, 1);
    text-align: center;
    font-size: .225rem;
    line-height: .5875rem;
    font-weight: 400;
    margin-top: .0625rem;
}

.aluminiumBox1 .top .lt .ls {
    color: var(--mainColor);
    font-size: .6rem;
    font-weight: 400;
    line-height: .65rem;
    text-align: left;
    margin-top: .0625rem;

}

.aluminiumBox1 .top .rt .icon {
    width: .35rem;
    height: auto;
    object-fit: contain;
    margin-right: .25rem;
}

.aluminiumBox1 .top .rt {
    width: 35%;
}

.aluminiumBox1 .top .rt .item {
    margin-bottom: .25rem;
}

.aluminiumBox1 .top .rt p {
    color: rgba(255, 255, 255, 1);
    font-size: .225rem;
    font-weight: 400;
    line-height: .3rem;
}

.aluminiumBox1 ul {
    margin-top: .75rem;
}

.aluminiumBox1 li {
    width: 2.4rem;
    margin-right: .125rem;
}

.aluminiumBox1 li:hover img {
    transform: translateY(-10px);
}

.aluminiumBox1 li img {
    width: 100%;
    height: auto;
    transition: all 0.3s;
    object-fit: cover;
}

.aluminiumBox1 li p {
    color: rgba(255, 255, 255, 1);
    font-size: .225rem;
    font-weight: 400;
    line-height: .525rem;
    text-align: center;
}

.com-tl {
    color: rgba(35, 41, 57, 1);
    font-size: .45rem;
    text-align: center;
    font-family: 'Poppins-Medium';
    font-weight: 600;
    margin-bottom: .125rem;
}

.com-tl2 {
    color: rgba(51, 51, 51, 1);
    font-size: .225rem;
    line-height: .325rem;
    text-align: center;
}

.com-ls20 {
    color: rgba(51, 51, 51, 1);
    font-size: .2rem;
    line-height: .25rem;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.quote {
    width: 100%;
    cursor: pointer;
    height: .525rem;
    line-height: .525rem;
    border: 1px solid rgba(156, 195, 93, 1);
    border-radius: .075rem;
    background: rgba(255, 255, 255, 1);
    color: rgba(156, 195, 93, 1);
    font-family: Montserrat;
    font-size: .2rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s;
}

.aluminiumBox2 {
    width: 100%;
    height: auto;
    background: rgba(248, 248, 250, 1);
    padding: 1rem 0 1.4375rem 0;
    border-bottom: .25rem solid var(--mainColor);
}

.aluminiumBox2 ul {
    margin-top: .4375rem;
}

.aluminiumBox2 li {
    width: 3.6375rem;
    height: 4.825rem;
    margin: 0 .15rem .1875rem 0;
    border-radius: .0625rem;
    padding: .2rem;
    background: rgba(255, 255, 255, 1);
}

.aluminiumBox2 li:nth-child(4n) {
    margin-right: 0;
}


.aluminiumBox2 li .img {
    width: 100%;
    height: 1.8375rem;
    overflow: hidden;
}

.aluminiumBox2 li .img img {
    object-fit: contain;
}


.aluminiumBox2 li h3 {
    color: rgba(0, 0, 0, 1);
    font-size: .3rem;
    font-weight: 600;
    margin: .35rem  0 .025rem 0;
    text-align: center;
}

.aluminiumBox2 li .text {
    width: 100%;
    display: flex;
    height: calc(100% - 1.8375rem);
    flex-direction: column;
    justify-content: space-between;

}

.aluminiumBox2 li .com-ls20 {
    /* flex: 1; */
}


.aluminiumBox2 li:hover .quote {
    background-color: var(--mainColor);
    color: #fff;
}

.aluminiumBox3 {
    width: 100%;
    height: auto;
    padding: 1rem 1.45rem .875rem 4.5rem;
    background: url(../images/ic4-14.png) no-repeat;
    background-size: cover;
}

.aluminiumBox3 .com-tl2 {
    width: 80%;
}

.aluminiumBox3Con {
    margin-top: .75rem;
}

.aluminiumBox3 .lt {
    flex: 1;
}

.aluminiumBox3 .rt {
    position: relative;
    width: 11.65rem;
    height: auto;
    padding-top: 1.0625rem;
}

.aluminiumBox3 .lt h3 {
    color: var(--mainColor);
    font-size: .45rem;
    font-weight: 600;
    text-decoration-line: underline;
    text-transform: capitalize;
    margin-bottom: .25rem;
}

.aluminiumBox3 .lt .text {
    margin-bottom: .375rem;
}

.aluminiumBox3 .lt .text .ls {
    color: rgba(51, 51, 51, 1);
    font-size: .225rem;
    line-height: .325rem;
    text-align: left;
    position: relative;
    padding-left: .3125rem;
    margin-bottom: .1875rem;
}

.aluminiumBox3 .lt .text .ls::before {
    display: block;
    content: '';
    width: .175rem;
    height: .175rem;
    position: absolute;
    left: 0;
    top: .075rem;
    background-color: var(--mainColor);
    transform: rotate(45deg)
}


.com-quote {
    cursor: pointer;
    width: 2.25rem;
    height: .6rem;
    line-height: .6rem;
    border-radius: .075rem;
    color: rgba(255, 255, 255, 1);
    font-size: .2rem;
    font-weight: 600;
    text-align: center;
    background-color: var(--mainColor);
}


.aluminiumBox3 .rt .top {
    position: absolute;
    left: .625rem;
    top: 0;
}

.aluminiumBox3 .rt .top img {
    width: 2.75rem;
    height: auto;
    object-fit: cover;
    vertical-align: bottom;
    margin-right: .175rem;
}

.aluminiumBox3 .rt .img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.aluminiumBox4 {
    width: 100%;
    height: auto;
    padding: 1rem 0;
    background: rgba(248, 248, 250, 1);
}


.aluminiumBox4 ul {
    margin-top: .5rem;
}


.aluminiumBox4 li {
    width: calc((100% - .2rem) / 2);
    height: 3.1375rem;
    border-radius: .0625rem;
    background: rgba(255, 255, 255, 1);
    margin: 0 .2rem .25rem 0;
}

.aluminiumBox4 li:nth-child(2n) {
    margin-right: 0;
}

.aluminiumBox4 .img {
    width: 3.85rem;
    height: 100%;
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0% 100%);
    background-color: var(--mainColor);
}

.aluminiumBox4 .img .mg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: polygon(0% 0%, 95% 0%, 87% 100%, 0% 100%);
}

.aluminiumBox4 li .text {
    flex: 1;
    padding: .375rem .25rem .25rem .25rem;
    height: 100%;
}

.aluminiumBox4 li .text h3 {
    color: var(--mainColor);
    font-size: .225rem;
    line-height: .325rem;
    font-weight: 600;
    margin-bottom: .0875rem;
}

.aluminiumBox4 li .ls p {
    color: rgba(51, 51, 51, 1);
    font-size: .225rem;
    line-height: .3rem;
}

.aluminiumBox5 {
    width: 100%;
    height: 10.375rem;
    background: url(../images/ic5-7.webp) no-repeat;
    background-size: cover;
    padding: 1rem 0 0;
}



.aluminiumBox5 .com-tl,
.aluminiumBox5 .com-tl2 {
    color: #fff;
}

.com-more {
    display: inline-block;
    cursor: pointer;
    width: 2.25rem;
    height: .6rem;
    line-height: .6rem;
    color: rgba(255, 255, 255, 1);
    font-size: .2rem;
    font-weight: 600;
    text-align: center;
    border-radius: .075rem;
    margin: 0 auto;
    background-color: var(--mainColor);
}

.aluminiumBox5 .com-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.aluminiumBox5 .com-more {
    margin-top: .375rem;
}


.aluminiumBox6 {
    width: 100%;
    height: auto;
    padding: .375rem 0 1.25rem;
}

.aluminiumBox6 .top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aluminiumBox6 li {
    position: relative;
    width: 3.65rem;
    height: 2.625rem;
    overflow: hidden;
    margin: 0 .125rem .125rem 0;
    border-radius: .075rem;
}

.aluminiumBox6 li .text,
.aluminiumBox7 li .text,
.aluminiumBox7 .top .text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    color: rgba(255, 255, 255, 1);
    padding: 0 0 .125rem .3125rem;
    font-size: .2rem;
    text-align: left;
    border-radius: 0px 0px .075rem .075rem;

    background: linear-gradient(180.00deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 100%);
}

.aluminiumBox6 li:nth-child(4n) {
    margin-right: 0;
}


.aluminiumBox6 li:nth-child(6) {
    width: 7.425rem;
}

.aluminiumBox6 li:nth-child(7),
.aluminiumBox6 li:last-child {
    margin-right: 0;
}

.aluminiumBox6 li:nth-child(8) {
    margin-right: .125rem;
}

.aluminiumBox6 .com-more {
    margin: .125rem 0 .5rem 0;
}


.aluminiumBox7 {
    width: 100%;
    height: auto;
    padding: 1rem 0 1.25rem 0;
    background: rgba(248, 248, 250, 1);
}

.aluminiumBox7 .com-tl {
    width: 60%;
    margin: 0 auto;
}

.aluminiumBox7 .top {
    margin-top: .5rem;
}


.aluminiumBox7 li {
    position: relative;
    width: 3.6625rem;
    height: 2.6rem;
    border-radius: .075rem;
    overflow: hidden;
    margin: 0 .1125rem .15rem 0;
}



.aluminiumBox7 .top .lt {
    position: relative;
    width: 7.3875rem;
    height: 5.35rem;
    overflow: hidden;
    border-radius: .075rem;
    margin-right: .175rem;
}

.aluminiumBox7 .top ul {
    flex: 1;
}

.aluminiumBox7 .top li:nth-child(2n),
.aluminiumBox7 .bto li:last-child {
    margin-right: 0;
}









.aluminiumBox9 {
    width: 100%;
    height: auto;
    background-color: var(--mainColor);
    padding: .875rem 0 .9375rem 0;
}

.aluminiumBox9 .com-tl {
    color: #fff;
    line-height: .5625rem;
    padding: 0 .625rem;
}

.aluminiumBox9 .form .lt {
    flex: 1;
}


.aluminiumBox9 .form .info-top {
    height: .675rem;
    margin-bottom: .25rem;
}

.aluminiumBox9 .form .info {
    height: 100%;
    width: calc((100% - .225rem) / 2);
    margin-bottom: 0;

}

.aluminiumBox9 .form input[type=text],
.aluminiumBox9 .form select {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: .0625rem;
    font-family: Montserrat-Light;
    font-size: .2rem;
    padding-left: .25rem;
    color: #000000;
    border: none;
}

.aluminiumBox9 .form {
    width: 100%;
    height: auto;
}

.aluminiumBox9 .form .textarea {
    width: 6.2rem;
    height: 1.6rem;
    margin-bottom: 0;
    margin-left: .225rem;
}

.aluminiumBox9 .form textarea {
    background-color: #ffffff;
    height: 100%;
    width: 100%;
    border-radius: .0625rem;

    font-family: Montserrat-Light;
    font-size: .2rem;
    padding: .1875rem 0 0 .25rem;
    color: #000000;
    border: none;
}

.aluminiumBox9 .form .con {
    align-items: flex-start;
    margin-top: .3125rem;
}

.aluminiumBox9 .form .bto {
    font-family: Montserrat-Light;
    font-size: .2rem;
    text-align: center;
    color: #ffffff;
}

.aluminiumBox9 .form .bto a {
    text-decoration: underline;
}

.aluminiumBox9 .form input[type=submit] {
    width: 2.675rem;
    cursor: pointer;
    height: .725rem;
    text-align: center;
    line-height: .725rem;
    background-color: #ffffff;
    border-radius: .3625rem;
    font-family: Montserrat-Bold;
    font-size: .225rem;
    color: var(--mainColor);
    border: none;
    margin-top: .425rem;
}

.aluminiumBox9 .form .btnSub {
    width: 100%;
    float: none;
    height: auto;
}



@media screen and (min-width: 1921px) {
    html {
        font-size: 80px !important;
    }

}

@media screen and (max-width: 1024px) {

    .com-card,
    .aluminiumBox3 {
        width: 100%;
        padding: 0 4%;
    }

    .aluminiumBox1,
    .aluminiumBox2 li .img,
    .aluminiumBox2 li,
    .aluminiumBox5,
    .aluminiumBox7 .top .lt {
        height: auto;
    }

    .aluminiumBox1 .top .lt {
        display: none;
    }

    .aluminiumBox1 ul {
        margin-top: 2%;
    }

    .aluminiumBox1 .top .rt {
        width: 100%;
    }

    .aluminiumBox2,
    .aluminiumBox4,
    .aluminiumBox6,
    .aluminiumBox7,
    .aluminiumBox9 {
        padding: 20px 0;
    }

    .aluminiumBox3 {
        padding: 20px 4%;
    }

    .com-tl,
    .aluminiumBox3 .lt h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .aluminiumBox2 li h3 {
        font-size: 15px;
    }

    .com-tl2,
    .com-ls20 {
        font-size: 14px;
        line-height: 20px;
    }

    .aluminiumBox2 li,
    .aluminiumBox6 li,
    .aluminiumBox7 li {
        width: calc((100% - 20px) / 3);
        margin: 0 10px 10px 0;
    }

    .aluminiumBox2 li:nth-child(3n),
    .aluminiumBox7 li:nth-child(3n) {
        margin-right: 0;
    }

    .aluminiumBox2 li .com-ls20 {
        margin: 8px 0;
    }

    .aluminiumBox2 ul,
    .aluminiumBox4 ul,
    .aluminiumBox7 .top {
        margin-top: 15px;
    }

    .aluminiumBox3 .lt,
    .aluminiumBox7 .top ul {
        flex: none;
        width: 100%;
        margin-bottom: 15px;
    }

    .aluminiumBox3Con,
    .aluminiumBox7 .top,
    .aluminiumBox9 .form .con {
        flex-wrap: wrap;
    }

    .aluminiumBox4 ul li {
        width: 100%;
        margin-right: 0;
    }

    .aluminiumBox5 {
        padding: 10% 0;
    }

    .aluminiumBox6 li:nth-child(3n),
    .aluminiumBox6 li:nth-child(10) {
        margin-right: 0;

    }

    .aluminiumBox6 li:nth-child(4n),
    .aluminiumBox2 li:nth-child(4n),
    .aluminiumBox6 li:nth-child(9),
    .aluminiumBox6 li:nth-child(6) {
        margin-right: 10px;
    }

    .aluminiumBox7 .top .lt {
        margin-bottom: 10px;
    }

    .aluminiumBox9 .form .textarea {
        width: 100%;
        margin-left: 0;
    }


}


@media screen and (max-width: 768px) {

    .aluminiumBox1 ul,
    .aluminiumBox1 .top .lt .icon {
        display: none;
    }

    .aluminiumBox1 .top .lt {
        display: block;
    }

    .aluminiumBox1 .top {
        flex-wrap: wrap;
    }

    .aluminiumBox1 .top .lt .ls {
        font-size: 15px;
        line-height: 25px;
        margin: 2% 0;
    }

    .aluminiumBox1 .top .lt .txt h3 {
        font-size: 16px;
    }

    .aluminiumBox2 li,
    .aluminiumBox6 li,
    .aluminiumBox7 li {
        width: calc((100% - 10px) / 2);
    }

    .aluminiumBox2 li:nth-child(3n),
    .aluminiumBox6 li:nth-child(2n+1) {
        margin-right: 10px;
    }

    .aluminiumBox2 li:nth-child(2n),
    .aluminiumBox6 li,
    .aluminiumBox6 li:nth-child(4n) {
        margin-right: 0;
    }

    .aluminiumBox3 .rt .top {
        position: static;
    }

    .aluminiumBox3 .rt {
        width: 100%;
        padding-top: 0;
    }

    .aluminiumBox5 {
        background-size: initial;

    }

}

@media screen and (max-width: 640px) {

    .aluminiumBox3 .com-tl2,
    .aluminiumBox4 .img,
    .aluminiumBox6 li,
    .aluminiumBox6 li:nth-child(6),
    .aluminiumBox7 li,
    .aluminiumBox7 .top .lt {
        width: 100%;
    }

    .aluminiumBox6 li,
    .aluminiumBox7 li,
    .aluminiumBox7 .top .lt {
        height: auto;
        margin-right: 0 !important;
    }

    .ejectEmail_form {
        left: 50%;
    }

    .aluminiumBox4 ul li {
        height: auto;
        flex-wrap: wrap;
    }

    .aluminiumBox9 .form .info {
        width: 100%;
        height: 35px;
        margin-bottom: 10px;
    }

    .aluminiumBox9 .form .info-top {
        flex-wrap: wrap;
        height: auto;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 420px) {
    .aluminiumBox1 {
        height: 60vh;
    }

    .aluminiumBox3 .rt .top img {
        width: calc(100% / 2);
    }

}

@media screen and (max-width: 375px) {
    .aluminiumBox4 li a {
        flex-wrap: wrap;
        padding: 2%;

    }

    .aluminiumBox4 li img {
        width: 100%;
        object-fit: contain;
    }

    .aluminiumBox4 li .text {
        flex: none;
        width: 100%;
        margin: 2% 0 0 0;
    }

    .aluminiumBox4 li .com-more {
        margin-top: 3%;
    }

    .aluminiumBox2 li {
        width: 100%;
        margin-right: 0 !important;
    }
}