/* client */
.cli_item {filter: grayscale(1); transition: all .3s; aspect-ratio: 2/1;}
.cli_item:hover {filter: grayscale(0);}
.cli_item img {width: 80%; height: 80%; object-fit: contain;}



/* project */
.pj_tab {display: flex; gap: 30px; margin-bottom: 80px;}
.pj_tab li {font-size: 1.25rem; border-bottom: 3px solid transparent; color: #777; padding-bottom: 3px; cursor: pointer;}
.pj_tab li:hover {color: var(--mainColor);}
.pj_tab li.active {font-weight: 700; border-color: #000; color: #000;}
.pj_list {display: flex; flex-wrap: wrap; padding-bottom: 60px;}
.pj_item {width: 33.333%; overflow: hidden; position: relative; aspect-ratio: 5/7; background: #000;}
.pj_item .thumb {width: 100%; height: 100%; overflow: hidden; position: absolute; opacity: .4;}
.pj_item .thumb img {width: 100%; height: 100%; object-fit: cover; transition: all .5s;}
.pj_item:hover .thumb img {scale: 1.2;}
.pj_item .cont {
    position: relative; z-index: 1; color: #fff; width: 100%; height: 100%; padding: 30px;
    display: flex; flex-direction: column; text-align: center; justify-content: center;
}
.pj_item .cont .cate {position: absolute; top: 20px; left: 20px; font-size: 1.125rem;}
.pj_item .cont .tit {font-weight: 700; font-size: 2rem; line-height: 1.2;}
.pj_item .cont .tit::after {
    display: block; content: ""; width: 40px; height: 2px; background: #fff; margin: 15px auto 16px;
}
.pj_item .cont .client {font-size: 1.125rem;}
.pj_item .cont .year {font-size: 1.125rem;}


.pje_list {display: flex; flex-wrap: wrap; gap: 30px 20px;}
.pje_item {width: calc(33.333% - 13.333px);}
.pje_item .thumb {aspect-ratio: 4/3; overflow: hidden;}
.pje_item .thumb img {width: 100%; height: 100%; object-fit: cover; transition: all .3s;}
.pje_item:hover .thumb img {scale: 1.1;}
.pje_item .cont {margin-top: 10px;}
.pje_item .cont .tit {font-weight: 700;}


.pj_view .top_sec {position: relative; width: 100%; min-height: 100vh; padding: 100px 0 100px; display: flex;}
.pj_view .top_sec .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; overflow: hidden;}
.pj_view .top_sec .bg img {opacity: .4; width: 100%; height: 100%; object-fit: cover; animation: pjViewTopBg 1.5s linear both;}
@keyframes pjViewTopBg {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}


.pj_view .top_sec .inner {position: relative; z-index: 1; color: #fff; display: flex; flex-direction: column; max-width: unset; gap: 20px;}
.pj_view .top_sec .tit {flex: 1 0 0; display: flex; align-items: center; justify-content: center; font-size: 6rem; line-height: 1.3; font-weight: 700; text-align: center;}
.pj_view .top_sec .info {display: flex; gap: 20px 40px; flex-wrap: wrap; font-size: 1.125rem;}
.pj_view .top_sec .info .gu {font-weight: 700;}
.pj_view .dt_sec .mo {display: none;}
.pj_view .dt_sec .btnbox {padding: 0 0 150px; width: 90%; margin: 0 auto;}
.pj_view .dt_sec .btnbox.d-none{display:none}
.pj_view .dt_sec .btnbox .gohome {
    margin: 0 auto; background: var(--mainColor); color: #fff; font-size: 1.25rem; font-weight: 700; height: 70px; max-width: 400px;
    display: flex; align-items: center; justify-content: center; transition: all .3s;
}
.pj_view .dt_sec .btnbox .gohome:hover {background: #d7a3f4;}
.pj_view .bot_sec .cont {background: url('/base_6/img/mf/bg_pj_view_bot.webp') no-repeat center center / cover; position: relative;}
.pj_view .bot_sec .cont::after {
    display: block; content: ""; background: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .7;
}
.pj_view .bot_sec .cont .text {padding: 150px 0; width: 90%; margin: 0 auto; text-align: center; font-size: 2rem; color: #fff; position: relative; z-index: 1;}
.pj_view .bot_sec .cont .text .bold {color: #d7a3f4;}
.pj_view .bot_sec .btnbox {padding: 100px 0; width: 90%; margin: 0 auto;}
.pj_view .bot_sec .btnbox .golist {
    margin: 0 auto; border: 1px solid #000; color: #000; font-size: 1.125rem; height: 60px; max-width: 250px;
    display: flex; align-items: center; justify-content: center;
}


/*contact*/
.ct_wrap {min-height: 100vh; display: flex; align-items: center; justify-content: center;}
.ct_wrap .inner {display: flex; gap: 40px; align-items: flex-start; padding-top: 40px;}
.ct_wrap .info_box {width: 100%;}
.ct_wrap .info_box .info {font-size: 1.125rem; font-weight: 700; margin-left: 5px; }
.ct_wrap .info_box .info li {display: flex; gap: 10px; margin-top: 20px;}
.ct_wrap .info_box .info .gu {width: 80px; flex-shrink: 0; color: #999;}
.ct_wrap .form_wrap {width: 100%; margin-top: 45px;}
.ct_wrap .form_wrap .top {margin-bottom: 20px; text-align: center; font-size: 1.125rem;}



/* main */
.main_top {min-height: 100vh; width: 100vw; padding: 150px 0; position: relative; overflow: hidden;}
.main_top .sec_box {position: relative; width: 100%; height: 100%; z-index: 1;}
.main_top .item .inner {display: flex; gap: 40px; align-items: center;}
.main_top .item .img {width: calc(50% - 40px)}
.main_top .item .img img {max-height: 650px;width: 100%; height: 100%; object-fit: contain; object-position: center right; } 
.main_top .item .info {width: 50%; display: flex; flex-direction: column; gap: 40px;}
.main_top .item .info .name {font-size: 3rem; font-weight: 700; }
.main_top .item .info .tit {font-size: 5.5rem; font-weight: 700; line-height: 1.3;}
.main_top .item .info .tit2 {font-size: 4.5rem; font-weight: 700; line-height: 1.3;}
.main_top .item .info .descrip {font-size: 1.25rem;}
.main_top .item .info .goto {margin-top: 50px; font-weight: 700; display: flex; align-items: center; gap: 5px; line-height: 1; }
.main_top .item .info .goto::after {display: block; content: ""; width: 16px; aspect-ratio: 1/1; background: url('/base_6/img/mf/icon_more_arr.png') no-repeat center center / contain;}
.main_top .btn_box {
    display: flex; flex-direction: column; align-items: flex-end; position: absolute; width: max-content;
    top: 55%; right: 60px; left: unset; transform: translateY(-50%); z-index: 1; gap: 15px;
}
.main_top .swiper-pagination-bullet {
    width: max-content; height: auto; text-align: right; background: transparent; line-height:1;
    font-size: 0.9375rem; font-weight: 900; color: #aaa; opacity: 1; border-radius: 0;
}
.main_top .swiper-pagination-bullet-active {color: #000; position: relative;}
.main_top .swiper-pagination-bullet-active::after {
    display: block; content: ""; width: 100%; height: 60%; background: var(--mainColor); opacity: .3;
    position: absolute; left: 0; top: 70%;
}
.main_top .bg {display: flex; width: auto; position: absolute; top: 90px; opacity: .3;}
.main_top .bg p {width: 3600px; font-size: 0; flex-shrink: 0; animation: flowText 50s linear infinite;}



.main_flow {background: #000; padding: 20px 0; display: flex; gap: 20px; align-items: center; overflow: hidden;}
.main_flow .flow {display: flex; gap: 20px; align-items: center; animation: flowText 25s linear infinite;}
.main_flow .flow .icon {width: 60px; aspect-ratio: 1/1; font-size: 0; flex-shrink: 0;}
.main_flow .flow .text {color: #fff; font-size: 2.5rem; font-weight: 700; white-space: nowrap;}


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


.main_vs .inner {position: relative; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.main_vs .tit_box {position: relative; z-index: 1;}
.main_vs .tit {font-weight: 700; text-align: center; font-size: 6.25rem; line-height: 1.2;}
.main_vs .descrip {text-align: center; font-size: 1.25rem; margin-top: 60px;}
.main_vs .chageText {display: inline-block; width: max-content; width: 485px; vertical-align: bottom; text-align: right;}
.main_vs .chageText .web {color: var(--mainColor);}
.main_vs .chageText .ai {color: #510f86;}
.main_vs .item {
    width: max-content; max-width: 100%; padding: 20px; border-radius: 20px; font-size: 1.125rem; line-height: 1.4; font-weight: 700; text-align: center;
    background: #000; color: #fff; min-height: 100px; display: flex; align-items: center; justify-content: center; position: absolute; transform: translateY(-50%);
}
.main_vs .item::after {
    display: block; content: ""; width: 24px; aspect-ratio: 1/1; position: absolute;
    left: 50%; bottom: -12px; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 5px 0; background: #000;
}
.main_vs .item:nth-child(even),
.main_vs .item:nth-child(even)::after {background: #b1b1b1;}
.main_vs .item1 {top: -5%;left: 10%;}
.main_vs .item2 {top: 5%; right: 10%;}
.main_vs .item3 {top: 55%; right: 0;}
.main_vs .item4 {top: 45%; left: 0;}
.main_vs .item5 {top: 95%; left: 10%;}
.main_vs .item6 {top:105%; right: 10%;}


.main_wk .list {display: flex; gap: 40px;}
.main_wk .item {width: 100%; background: #f5f5f5; padding: 40px; min-height: 300px; position: relative; overflow: hidden; transition: all .3s; cursor: default;}
.main_wk .item:hover {background: var(--mainColor);}
.main_wk .item .tit {font-size: 2rem; font-weight: 700; line-height: 1.2;}
.main_wk .item .descrip {font-size: 1.125rem; margin-top: 15px;}
.main_wk .item .bg {opacity: .05; font-size: 5rem; font-weight: 700; line-height: 1; position: absolute; bottom: 5px; right: 0px;}


.main_cli {overflow: hidden;}
.main_cli .tit {font-size: 3.75rem; font-weight: 700; text-align: center; line-height: 1.4; margin-bottom: 80px;}
.main_cli .swiper-wrapper {transition-timing-function: linear;}


/* .main_cert .swiper {width: 125%;}
.main_cert .swiper {overflow: visible;}
.main_cert .item {width: 20%;} */
.main_cert {overflow: hidden;}
.main_cert .swiper {width: 120%; margin-left: -10%;}
.main_cert .item .img {font-size: 0; overflow: hidden; aspect-ratio: 5/7; position: relative;}
.main_cert .item .img::after {
    display: block; content: ""; background: #000; opacity: 0.03;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.main_cert .item .img img {width: 100%; height: 100%; object-fit: cover;}
.main_cert .item .info {text-align: center;  margin-top:15px;}
.main_cert .item .name {font-size: 1rem;}
.main_cert .item .descrip {font-size: 0.875rem; color: #555;}


.main_pj .list {display: flex; gap: 60px;}
.main_pj .item {display: flex; flex-direction: column; gap: 30px; width: 100%;}
.main_pj .item .tit {position: relative; padding-right: 50px;}
.main_pj .item .tit .big {font-weight: 700; font-size: 3rem; line-height: 1.4;}
.main_pj .item .tit .small {font-weight: 500;}
.main_pj .item .tit .arr {
    width: 40px; aspect-ratio: 1/1; font-size: 0; background: url('/base_6/img/mf/icon_main_pj.png') no-repeat center center / contain; display: block;
    position: absolute; top: 10px; right: 0;
}
.main_pj .item .descrip {font-size: 1.125rem; margin-top: 15px; color: #777;}

/* .main_pj .item .img {aspect-ratio: 3/2; overflow: hidden; margin-top: auto;} */
.main_pj .item .img{overflow: hidden; margin-top: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap:30px}
.main_pj .item .img img {width: 100%; height: 100%; object-fit: cover; transition: all .3s;}

/* .main_pj .item .img:hover img {scale: 1.1;} */\



/* about */
.abt_tit {display: flex; flex-direction: column; gap: 20px; margin-bottom: 60px;}
.abt_tit .name {font-size: 1.125rem; margin-left: 5px;}
.abt_tit .big {font-size: 3.5rem; font-weight: 700; line-height: 1.4;}
.abt_tit .descrip {font-size: 1.25rem; margin-top: 20px;}


.abt_top {min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 150px;}
.abt_top .abt_tit {margin-bottom: 0;}
.abt_top .abt_tit .big {font-size: 6.25rem;}


.abt_team {background: url('/base_6/img/mf/bg_about_team.webp') no-repeat center center / cover; background-attachment: fixed; position: relative; }
.abt_team::after {
    display: block; content: ""; background: #000; opacity: .4;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.abt_team .inner {position: relative; z-index: 1;}
.abt_team .abt_tit {color: #fff; margin-bottom: 0;}


.abt_cli .list {display: flex; flex-wrap: wrap; gap: 40px;}
.abt_cli .cli_item {width: calc(20% - 32px);}



.abt_off .item {aspect-ratio: 2/1; overflow: hidden; filter: grayscale(1); transition: all .3s;}
.abt_off .item:hover {filter: grayscale(0); }
.abt_off .item .img {width: 100%; height: 100%;}
.abt_off .item .img img {width: 100%; height: 100%; object-fit: cover;}


.abt_exh .item {aspect-ratio: 2/1; overflow: hidden; filter: grayscale(1); transition: all .3s;}
.abt_exh .item:hover {filter: grayscale(0); }
.abt_exh .item .img {width: 100%; height: 100%;}
.abt_exh .item .img img {width: 100%; height: 100%; object-fit: cover;}


.abt_ceo .abt_ceo_wrap{display: flex;}
.abt_ceo .abt_ceo_wrap .img{margin-right: 15rem;}
.abt_ceo .abt_ceo_wrap h3{font-size: 1.875rem;font-weight: bold;display: flex;align-items: center;border-bottom: 1px solid #000;padding-bottom: 0.625rem;}
.abt_ceo .abt_ceo_wrap h3 span{font-size: 1.375rem;margin-left: 0.875rem;font-weight: 400;}
.abt_ceo .abt_ceo_wrap p{font-size: 1.25rem;font-weight: 400; line-height: 1.4; padding-top: 1.25rem;}

/* ai */
.ai_wrap {position: relative;}
.ai_wrap .no_cont {min-height: 100vh; padding: 150px;}


.ai_fixed {width: 100%; min-height: 100vh; padding: 150px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 0;}
.ai_fixed .inner { max-width: 1600px; position: relative; flex: 1 0 0;}
.ai_fixed .bg {position: absolute; width: 100%; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between;}
.ai_fixed .bg .tit {font-size: 8.7vw; font-weight: 700; opacity: 1; transition: all 2s;}
.ai_fixed .tit.left {}
.ai_fixed .tit.right {}
.ai_fixed .mic {width: 13vw; position: absolute; left: 48.4%; top: 50%; transform: translate(-50%,-50%); z-index: 1; transition: all 2s;}
.ai_fixed .mic img {height: 100%; object-fit: contain;}


.ai_fixed .cont {display: flex; flex-direction: column; height: 100%; gap: 15vw;  transition: all 2s;}
.ai_fixed .cont .tbox,
.ai_fixed .cont .bbox {height: calc(50% - 7.5vw); width: 32vw;}
.ai_fixed .cont .tbox {display: flex; flex-direction: column; justify-content: flex-end; }
.ai_fixed .cont .bbox {text-align: right; margin-left: auto;}
.ai_fixed .cont .tit {font-size: 2.1vw; font-weight: 700; line-height: 1.4;}
.ai_fixed .cont .descrip {font-size: 1.1vw; font-weight: 700;}
.ai_fixed .cont .descrip p {margin-bottom: 1.5vw;}


.ai_fixed .bg.on .tit {opacity: 0.05;}
.ai_fixed .cont.on {opacity: 0;}



.ai_sec {min-height: 100vh; padding: 150px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1;}
.ai_sec .inner {max-width: 1600px; flex: 1 0 0;}
.ai_sec .cont {display: flex; flex-direction: column; height: 100%; gap: 10vw;}
.ai_sec .tbox,
.ai_sec .bbox {height: calc(50% - 5vw); width: 32vw;}
.ai_sec .tbox {display: flex; flex-direction: column; justify-content: flex-end;  gap: 40px;}
.ai_sec .bbox {text-align: right; margin-left: auto;}
.ai_sec .tit {font-size: 3.6vw; font-weight: 700; line-height: 1.4;}
.ai_sec .tit .pt {color: var(--mainColor);}
.ai_sec .descrip {font-size: 1.3vw; font-weight: 700;}
.ai_sec .stit {font-size: 2.5vw; font-weight: 700;}
.ai_sec .keyword {display: flex; flex-wrap: wrap; gap: 10px 20px; font-weight: 700; font-size: 0.9vw; margin-bottom: 20px;}
.ai_sec .cmnt {margin-top: 20px; font-size: 1vw; font-weight: 700;}
.ai_sec .goluna {
    background: #000; color: #fff; font-size: 1vw; padding: 15px 20px; width: max-content; margin-top: 30px; margin-left: auto; font-weight: 700;
    display: flex; align-items: center; gap: 10px; max-width: 100%;
} 
.ai_sec .goluna::after {display: block; content: ""; width: 20px; aspect-ratio: 1/1; background: url('/base_6/img/mf/icon_more_arr_w.png') no-repeat center center / contain;}