@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');

.main.index{
    section.banner{
        padding: 0 !important;
        .swiper-slide{
            background-color: map-get($cisColor, second);
            height: 75vh;
            .imgCnt{
                position: relative;
                width:100%;
                height: 100%;
                // mix-blend-mode: soft-light;
            }
            .article{
                position: absolute;
                width:100%;
                margin: auto;
                padding: 20px 50px;
                top:55%;
                text-shadow: 2px 2px 1px rgba($color: #000, $alpha: .6);
                .title {
                    font-family: 'Jost';
                }
                &.right{
                    text-align: right;
                }
            }
        }
        // .swiper-pagination{
        //     display: flex;
        //     justify-content: center;
        //     align-items: center;
        //     flex-direction: column;
        //     width: 15px;
        //     height: 30%;
        //     left:initial;
        //     right: 15px;
        //     bottom: 0px;
        //     .swiper-pagination-bullet{
        //         border-radius: 0;
        //         height:30px;
        //         margin: 4px 0;
        //         background-color: #fff;
        //         opacity: 1;
        //         transition: all .3s;
        //         &.swiper-pagination-bullet-active{
        //             height:80px;
        //             background-color: map-get($cisColor, master);
    
        //         }
        //     }
        // }
        .swiper-pagination{
            .swiper-pagination-bullet.swiper-pagination-bullet-active{
                background-color: map-get($cisColor, master);
            }
        }
    }
    
    section.products{
        .content{
            position: relative;
            border-radius: 5px;
        }
        .item{
            width:100%;
            margin-bottom: 20px;
            .title{
                font-size: 18px;
                font-weight: bold;
                margin-top: 10px;
            }
            &:hover{
                .title{
                    color:map-get($cisColor, master);
                }
                .imgCnt img{
                    transform: scale(1.2) rotate(5deg);
                }
            }
        }
        .moreBtn{
            width:140px;
            margin: 30px auto;
            text-align: center;
            color: map-get($cisColor, master);
            border: 1px map-get($cisColor, master) solid;
            border-radius: 30px;
            background-color: #fff;
            padding: 5px 0;
            cursor: pointer;
            transition: all .3s;
            &:hover{
                width:180px;
                color: #fff;
                background-color: map-get($cisColor, master);
                border: 1px map-get($cisColor, master) solid;
            }
        }
    }
    
    section.concept{
        background-color: map-get($cisColor, third);
        .bg{
            position: absolute;
            width:100%;
            height: 100%;
            top:0;
            left:0;
            // mix-blend-mode: exclusion;
        }
        .content{
            position: relative;
            max-width: 600px;
            margin: auto;
            color:#fff;
            text-align: center;
            text-shadow: 0 0 10px rgba($color: #000, $alpha: .7);
            .moreBtn{
                width:140px;
                margin: auto;
                border: 1px #ddd solid;
                border-radius: 30px;
                padding: 5px 15px;
            }
        }
    }
    
    section.supplier{
        background-color: #ebebeb;
        .swiper{
            mix-blend-mode: multiply;
            .swiper-slide{
                display: flex;
                justify-content: center;
                transition: all .3s;
                .imgCnt{
                    max-width: 150px;
                }
                &:hover{
                    mix-blend-mode: normal;
                }
            }
        }
    }
}

/* ==============================================  media  ============================================ */

@media (max-width: 992px) {
    
}

@media (max-width: 768px) {   
    .main.index{
        section.banner{
            .swiper-slide{
                height: 60vh;
                .article{
                    top:35%;
                }
            }
        }
    }  
}

@media (max-width: 480px) {

}