#container {
    padding: 0;
    max-width: 100%;
}


.visual {
    width: 100%;
    height: 86rem;
    height: calc(100vh - var(--headerHeight));
   .swiper-slide{
        position: relative;
        background: no-repeat center / cover;
        .tw-container {
            height: 100%;
        }
   }
}
.visual_inner {
    position: absolute;
    left: 1rem; top: 33%;
}
.visual__tit {
    font-family: var(--inter); 
    font-weight: 900;
    font-size: 7rem; 
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    text-transform: uppercase;
}
.visual__txt {
    margin-top: 5rem;
    font-size: 2.8rem;
    line-height: 1.428;
    color: var(--white);
}
.scroll-down {
    display: block;
    position: absolute;
    left: 50%; 
    bottom: 7rem;
    transform: translateX(-50%);
    z-index: 10;
    font-family: var(--inter); 
    line-height: 1;  
    font-size: 2.2rem; 
    font-weight: 300;
    color: var(--white);
    span {
        opacity: 0;
        display: block;
        position: absolute;
        top: -6rem;
        left: 50%; transform: translateX(-50%);
        width: 3rem;
        height: 1.2rem;
        background: url(../img/ico_scrolldown.png) no-repeat center / contain ;    
        animation: scroll-down infinite 2.7s linear ;
        &:nth-of-type(2) {
            animation-delay: .9s;
        }
        &:nth-of-type(3) {
            animation-delay: 1.8s;
        }
    }  
}

@media(width<=991px){
    .scroll-down {        
        bottom: 3rem;
        font-size: 1.6rem;
        span {
            width: 2rem;
        }
    }
}
@media(width<=576px){
    .visual { 
        height: 60rem;
    }
    .visual__tit{
        font-size: 6.6rem;
    }
    .visual__txt{
        font-size: 2.2rem;
    }
    .scroll-down {  
        display: none;
    }
}



@keyframes scroll-down {
    from { opacity: .5; top: -5rem; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    to { opacity: .5; top: -2rem; }
}



main section {
    padding: 10rem 0;
}
.sec_tit {
    margin-bottom: 5rem;
    font-family: var(--inter);
    line-height: 0.8;
    font-size: 5rem;
    font-weight: 900;
    color: var(--gray33);
}

.company__inner .flex{
    gap:2rem;
    .tem {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex:1;
        position: relative;
        padding: 7rem 5.886%;
        height: 45rem;        
        &:after {
            content:'';
            display: block;
            position: absolute;
            z-index: -1;
            inset:0;
            transition: 0.3s ease-in;
            background: no-repeat center / cover;
        }
        &.intro:after {
            background-image: url(../img/main_com1.png);
        }
        &.business:after {            
            background-image: url(../img/main_com2.png);
        }
      
        .tem_tit {
            display: flex;
            align-items: center;
            font-size: 2.8rem;
            font-weight: 700;
            line-height: 1;
            color: var(--white);
            &:after {
                content:'\F4FE';
                font-family: var(--boot-icon);
                font-size: 3rem;
                transition: 0.3s;
                transition: 0.3s;
            }
        }
        p {
            color: var(--white);
        }
        &:hover {
            .tem_tit:after {
                transform: rotate(90deg);
            }
            &:after {
                transform: scale(1.1);              
            }
        }
    }    
}
.company__link {
    display: flex;
    margin-top: 5rem;
    li {
        flex:1;
        border-right: 1px solid var(--border-color-dd);
        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap:3rem;
            padding: 3rem 0;            
            .ico{
                height: 6.7rem;
                transition: 0.3s;
                fill:var(--grayAa);
            }
            span {
                font-size: 2.2rem; 
                font-weight: 700;
                line-height: 0.8;    
                color: var(--gray33);            
            }
            &:hover {
                .ico {
                    fill:var(--main-color)
                }
            }
        }
        &:last-of-type {
            border-right: 0;
        }
    }
}


@media(width<=991px){
    .company__inner .flex .tem{
        padding: 7rem 4%;
    }
}
@media(width<=768px){
    .company__inner .flex .tem{
        padding: 7rem 4%;
        br {
            display: none;
        }
    }
}
@media(width<=480px){
    .company__inner .flex {
        flex-direction: column;
        .tem {
            height: auto;
            .tem_tit {
                padding-bottom: 13%;
            }
        }
    }
    .company__link {
        flex-wrap:wrap;
        li {
            flex:auto;
            width: 50%;
            border-bottom: 1px solid var(--border-color-dd);
            &:nth-of-type(2n)
            {
                border-right: 0;
            }
            &:nth-of-type(n+3)
            {
                border-bottom: 0;
            }
        }
    }
}

.banner {
    background: url(../img/main_banner.png) no-repeat center / cover;    
}
.banner .flex{
    align-items: center;
    .banner_tit{
        font-size: 2.8rem;
        font-weight: 700;
        line-height: .8;
        color: var(--main-color);
        word-break: keep-all;
    }
    .banner_txt{
        margin-top: 3rem;
        color: var(--white);
    }    
    .banner_tel{
        font-family: var(--inter);
        font-size: 5rem;
        font-weight: 900;
        color: var(--white);
    }
}

@media(width<=768px){
    .banner .flex{
        flex-direction: column;
        gap:5rem;       
        text-align: center;
    }
}
@media(width<=430px){
    .banner .flex{
        .banner_tit { line-height: 1.4;}
    }
}

.customer {
    background: var(--grayF8);    
}
.customer__inner{
    flex-direction: row-reverse;
    gap:2rem;
    .tem{
        width: 49%;
    }
}
.customer_tit{
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 0.8;
    color: var(--gray33);
    &+p {
        margin-top: 1rem;             
        color: var(--gray66t);
    }
}
.customer__left {
    display: flex;
    flex-direction: column;        
    justify-content: space-between;       
    gap: 1.7rem;
    a {
        display: block;
        position: relative;
        padding: 3rem 12.01%;
        background: var(--white);      
        &:before {
            content:'';
            opacity: 0;
            display: block;
            position: absolute;
            inset:0;
            border: 2px solid var(--main-color);
            transition: 0.3s;
        }
        .inner{     
            position: relative;             
            &:after {
                content:'\F138';
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                font-family: var(--boot-icon);                
                font-size: 3rem;
                color: var(--grayAa);
                transition: 0.3s;
            }
        }
        &:hover{
            &:before{
                opacity: 1;
            }   
            .inner:after{
                color: var(--main-color);
            }
        }
    }     
    
}

.customer__right{
    padding: 7rem 5.886%;
    background: var(--white);
    .customer_tit{
        margin-bottom: 3rem;
    }
}

@media(width<=768px){
    .customer__inner{ 
        flex-direction: column;
        .tem { width: 100%;}
    }
    .customer__right {
        padding:4rem 5.886%;
    }
    .customer__left {
        a {
            padding: 3rem 5.886%;
        }
    }
}



.video{
    background: url(../img/main_video.png) no-repeat center / cover;
}
.video__inner {
  
    .vdo {
        width: 58.824%;
    }
    .txt {
        display: flex;        
        flex-direction: column;
        justify-content: center;
        flex:1;
        margin-left: 11.773%;
        .video_tit {
            font-size: 2.8rem;
            font-weight: 700;
            line-height: 0.8;
            color: var(--gray33);
        }
        p {
            padding: 3rem 0 5rem;
            font-weight: 500;
            color: var(--gray66);  
            line-height: 1;          
        }
        a {           
            display: flex;
            justify-content: center;
            align-items: center;
            width: 18rem;
            height: 5rem; 
            color: var(--white);
            background: var(--main-color);
        }
    }
}

@media( width<=991px){
    .video__inner {
        .vdo {
            width: 65%;
        }
        .txt { margin-left: 7.7%;}
    }
}
@media( width<=768px){
    .video__inner {
        flex-direction: column;
        gap:4rem;
        .vdo {
            width: 100%;
        }
        .txt { 
            margin-left:0;
            p {
                padding: 2.5rem 0 3rem;
            }
           
        }
    }
}