body {overflow-x: hidden;}
.wrap{width: 100%; position: relative;}



/* section01 */
.sec01{width: 100%;}
.sec01img{ 
    width: 100%; height: 460px; background-image: url(/img/business/business\ img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}
.sec01Wrap{max-width: 1200px; margin: 0 auto;}
.sec01Wrap>h1{position: absolute; top: 400px; font-size: 80px; font-weight: 900;}

/* section02 */

.sec02{max-width: 1200px; margin: 150px auto;}
.sec02>ul{display: flex; width: 100%;}
.sec02>ul>li{width: 50%;}
.sec2Wrap p{font-size: 24px; font-weight: 700;}

/* section03 */

.sec03 {background-color: #f0f0f0; padding: 130px 0;}
.sec03 ul.tab {max-width: 1200px; width: 95%; margin: 0 auto; display: flex; gap: 12px; flex-wrap: wrap;}
.sec03 ul.tab li {width: calc(25% - 9px); display: flex; aspect-ratio: 1/1; position: relative; align-items: end; cursor: pointer;}
.sec03 ul.tab li img {filter: brightness(80%); position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.sec03 ul.tab li p{position: relative; z-index: 2; font-size: 16px; color: #fff; padding-left: 15px; padding-bottom: 15px;}

/* section04 */
.sec04{width: 100%; background-color: #333; scroll-margin-top: 100px;}

.sec04 ul.content li{display: none; max-width: 1600px; width: 95%; gap: 30px; margin: 0 auto; padding: 55px 0;}
.sec04 ul.content li.active{display: flex;}

.sec04 ul.content li.left .txt {order: 2;}
.sec04 ul.content li.left .video {order: 1;}
.sec04 ul.content li.right .txt {order: 1;}
.sec04 ul.content li.right .video {order: 2;}

.sec04 ul.content li .txt {width: calc(35% - 15px); padding-top: 30px;}
.sec04 ul.content li .txt span.slogan {font-size: 16px; color: #eee; margin-bottom: 12px; display: inline-block;}
.sec04 ul.content li .txt p.title {color: #fff; padding-bottom: 50px; font-size: 28px; font-weight: 700; position: relative;}
.sec04 ul.content li .txt p.title::after {display: block; content: ''; width: 10px; position: absolute; height: 1px; background-color: #fff; left: 0; bottom: 25px;}
.sec04 ul.content li .txt span:last-of-type {color: #eee; font-size: 15px; font-weight: 400; word-break: keep-all;}

.sec04 ul.content li .video {width: calc(65% - 15px); padding-bottom: 150px;}
.sec04 ul.content li .video .wrap {width: 100%; position: relative; aspect-ratio: 16/9; position: relative;}
.sec04 ul.content li .video .wrap video {width: 100%; height: 100%; object-fit: cover;}
.sec04 ul.content li.right .video .wrap .linkBox {position: absolute; right: 50px; bottom: -150px;}
.sec04 ul.content li.left .video .wrap .linkBox {position: absolute; bottom: -150px; right: auto; left: 50px;}



@media screen and (max-width: 1200px) {
    .sec04 ul.content li .txt {width: calc(40% - 15px); padding-top: 0;}
    .sec04 ul.content li .video {width: calc(60% - 15px); padding-top: 30px;}
}


/* mobile */
@media screen and (max-width: 1024px) {
    
    /* section01 */
    .sec01{width: 100%;}
    .sec01img{ 
        width: 100%; height: 328px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;
    }
    .sec01Wrap{margin: 0 15px;}
    .sec01Wrap>h1{position: absolute; top: 290px; font-size: 55px; font-weight: 900;}
    

    /* section02 */

    .sec02{margin: 60px 0; padding: 0 15px; box-sizing: border-box;}
    .sec02>ul{display: flex; width: 100%;}
    .sec02 .blank{display: none;}
    .sec02>ul>li{width: 50%;;}
    .sec2Wrap p{font-size: 20px; font-weight: 700;}


    /* section03 */
    .sec03 {padding: 100px 0;}
    .sec03 ul.tab {gap: 10px;}
    .sec03 ul.tab li {width: calc(50% - 5px); display: flex; aspect-ratio: unset; height: 160px;}
    

    /* section04 */
    .sec04 ul.content {padding: 50px 0;}
    .sec04 ul.content li {display: flex; flex-direction: column; gap: 20px; padding: 0 0 30px;}
    .sec04 ul.content li.right .video {order: 1;}
    .sec04 ul.content li.right .txt {order: 2;}
    .sec04 ul.content li .txt {width: 100%;}
    .sec04 ul.content li .video {width: 100%; font-size: 0; box-sizing: border-box; padding-bottom: 0;}
    .sec04 ul.content li:is(.left, .right) .video .wrap .linkBox {bottom: -120px; left: auto; right: 0;}
    
} 


@media screen and (max-width: 500px) {
    .sec03 {padding: 40px 0;}

    .sec03 ul.tab li p {padding-left: 10px; padding-bottom: 10px; font-size: 14px;}
    .sec04 ul.content li .txt span.slogan {font-size: 15px;}
    .sec04 ul.content li .txt p.title {font-size: 24px;}
    .sec04 ul.content li .txt span:last-of-type {font-size: 14px;}
    .sec04 ul.content li:is(.left, .right) .video .wrap .linkBox {bottom: -80px; width: 80px; height: 80px; padding: 10px;}
    .sec04 ul.content li:is(.left, .right) .video .wrap .linkBox a p {font-size: 13px}
    .sec04 ul.content li:is(.left, .right) .video .wrap .linkBox a img {width: 15px; height: 5px;}
}

@media screen and (max-width: 350px) {
    .sec04 ul.content li .video {padding-bottom: 80px;}
}


/* end */