/* main */
.main_tit {padding-bottom: 50px;}
.main_tit .big {font-size: 8rem; font-weight: 700; line-height: 1.2;}
.main_top {overflow: hidden;}
.main_top .inner {display: flex; align-items: center; gap: 40px;}
.main_top .cont {text-align: right; margin-left: auto; display: flex; flex-direction: column; gap:80px}
.main_top .title .big {font-weight: 900; font-size: 9rem; line-height: 1.2; margin-top: 20px;}
.main_top .title .small {color: var(--mainColor); font-weight: 700; font-size: 3.5rem; line-height: 1.2;}
.main_top .descrip .big {font-size: 2rem; font-weight: 700; color: var(--subText);}
.main_top .descrip .small {font-size: 1.25rem; color: var(--subText); margin-top: 20px;}
.main_top .circle {position: relative; width: 1000px; aspect-ratio: 1/1; margin-left:-500px;}
.main_top .circle img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main_top .circle img.lg {animation: imgRotateR 30s linear infinite; width: 100%;}
.main_top .circle img.md {animation: imgRotateL 25s linear infinite; width: 60%;}


@keyframes imgRotateR {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform:translate(-50%,-50%) rotate(360deg);
    }
}
@keyframes imgRotateL {
    0% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}


.main_abt {background: #000;}
.main_abt .main_tit {color: #fff; text-align: center;}
.main_abt .list {display: flex; gap: 50px; flex-wrap: wrap;}
.main_abt .box {display: flex; flex-direction: column; gap: 50px; width: calc(50% - 25px);}
.main_abt .box1 {width: 35%;}
.main_abt .box2 {flex: 1 0 0;}
.main_abt .box3 {width: 100%;}
.main_abt .item {background: #fff; padding: 40px; display: flex; flex-direction: column; width: 100%; height: 100%; gap: 40px;}
.main_abt .item .tit {font-size: 7rem; font-weight: 700; line-height: 1;}
.main_abt .item .descrip {font-size: 1.25rem;}
.main_abt .item1 .descrip {margin-top: auto; text-align: right;}
.main_abt .item2 .tit {order: 2; text-align: right;}
.main_abt .item3 {flex-direction: row; align-items: center;}
.main_abt .item4 {width: 100%; text-align: right; gap: 120px; position: relative; background: #fff;}
.main_abt .item4 > div {position: relative; z-index: 1;}
.main_abt .item4::after {
    display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    background: url('/base/img/mf/img_main_abt_01.png') no-repeat left bottom / auto 70%;
}


.main_port .inner {width: 100%; max-width: unset;}
.main_port .main_tit {width: 90%; max-width: 1600px; margin: 0 auto;}
.main_port .main_tit .big {color: var(--mainColor);}
.main_port .swiper_box {width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.main_port .swiper_box::before,
.main_port .swiper_box::after {
    display: block; content: ""; width: 15%; height: 100%;
    position: absolute; top: 0; z-index: 2;
}
.main_port .swiper_box::before {left: 0; background: linear-gradient(to left, transparent 0%, #FFF 100%);}
.main_port .swiper_box::after {right: 0; background: linear-gradient(to right, transparent 0%, #FFF 100%);}
.main_port .swiper_prev {left: 7%;}
.main_port .swiper_next {right: 7%;}
.main_port .swiper {width: 190%; flex-shrink: 0;} 
.main_port .item {padding: 1.8%;}
.main_port .item.swiper-slide-active {padding: 0;}
.main_port .thumb {aspect-ratio: 8/5; overflow: hidden;}
.main_port .thumb img {width: 100%; height: 100%; overflow: cover;}
.main_port .btn_box {margin: 80px auto 0; width: 90%;}
.main_port .btn_box .btn {width: 100%; max-width: 400px; margin: 0 auto; height: 80px; font-size: 1.5rem; border-radius: 10px;}



/* about */
.abt_tit {margin-bottom: 50px;}
.abt_tit .big {font-size: 6.5rem; font-weight: 700; line-height: 1.2;}
.abt_top {padding-top: 300px; padding-bottom: 0;}
.abt_int {position: relative; background: url('/base/img/mf/bg_about_intro.webp') no-repeat center center / cover;}
.abt_int::after {
    display: block; content: ""; width: 100%; height: 100%; background: #000; opacity: .8;
    position: absolute; top: 0; left: 0;
}
.abt_int .inner {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 100px;}
.abt_int .box {color: #fff; font-size: 2.5rem;}
.abt_biz .list {border-top: 3px solid #000; display: flex; flex-wrap: wrap; gap: 60px 0;}
.abt_biz .item {background: #f0f9f7; width: 33.333%; padding: 40px; position: relative;}
.abt_biz .item::after {
    display: block; content: ""; width: 3px; height: calc(100% - 60px); background: #000;
    position: absolute; top: 50%; transform: translateY(-50%); right: 0;
}
.abt_biz .item:nth-child(3n):after {display: none;}
.abt_biz .item .icon {width: 80px; aspect-ratio: 1/1;}
.abt_biz .item .icon img {width: 100%; height: 100%; object-fit: contain;}
.abt_biz .item .big {font-weight: 700; color: var(--mainColor); font-size: 2rem; margin-top: 10px;}
.abt_biz .item .small {font-size: 1.125rem; margin-top: 10px;}
.abt_bot {overflow: hidden;}
.abt_bot .loopText {display: flex; align-items: center; margin: 10px 0;}
.abt_bot .loopText div {display: flex; align-items: center;}
.abt_bot .loopText p {
    white-space: nowrap; margin-right: 30px; font-size: 4rem; line-height: 1; color: var(--mainColor);
}
.abt_bot .loopText.left {animation: loopTextL 40s linear infinite;}
.abt_bot .loopText.right {animation: loopTextR 40s linear infinite; font-weight: 800;}


@keyframes loopTextL {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


@keyframes loopTextR {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}



/* client */
.cli_list {display: flex; flex-wrap: wrap; gap: 0;}
.cli_list .item {background: #fff; aspect-ratio: 16/9; width: 33.333%; display: flex; align-items: center; justify-content: center;}
.cli_list .item img {width: 50%; height: 50%; object-fit: contain;}
.cli_wrap .btnLoad {margin: 60px auto 0;}



/* contact */
.ct_wrap .info ul {display: flex; flex-direction: column; gap: 30px;}
.ct_wrap .info li {display: flex; gap: 10px; font-size: 2rem;}
.ct_wrap .info .gu {color: var(--subText); width: 130px; flex-shrink: 0;}
.ct_wrap .info .btn {margin-top: 80px; width: 100%; max-width: 300px;}
.ct_wrap .bot {text-align: right; font-size: 3rem; font-weight: 700; margin-top: 150px;}