@import 'common/var.less';
@import 'common/common.less';

.section {
    .section-title {
        text-align: center;
    }

    .section-title.style-1 {
        .title {
            font-size: 36px;
            line-height: 36px;
            font-weight: bold;
            color: #141414;
            display: flex;
            align-items: center;
            justify-content: center;

            .rtext {
                color: #E50020;
            }
        }

        .title::before,
        .title::after {
            content: '';
            display: inline-block;
            width: 58px;
            height: 3px;
            background: #D4D4D4;
            margin: 0 15px;
        }
    }
}

.section.idx-about {
    margin-top: 60px;

    .idx-about-container {
        margin-top: 70px;
        font-size: 20px;
        color: #666666;
        line-height: 36px;
    }
}

.main-banner {
    width: 100%;

    .swiper-slide {
        display: flex;
    }

    .swiper-pagination-bullet {
        width: 40px;
        height: 2px;
        background: #F8F8F8;
        border-radius: 0;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: #E50020;
    }

    .swiper-pagination {
        bottom: 40px;
    }

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 720px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .text-box {
        color: #FFFFFF;
        text-align: center;

        p:nth-child(1),
        p:nth-child(2) {
            transform: translate3d(0, 20px, 0);
            opacity: 0;
        }

        p:nth-child(1) {
            font-size: 38px;
            margin-bottom: 25px;
            line-height: 38px;
            transition: .8s ease .4s;
        }

        p:nth-child(2) {
            font-size: 30px;
            line-height: 30px;
            transition: .8s ease .6s;
        }

        .cname {
            color: #E30020;
        }
    }

    .swiper-slide-active .text-box {

        p:nth-child(1),
        p:nth-child(2) {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}