@import url("swiper-bundle.min.css");
@import url("jquery-ui.css");
@import url("reset.css");

:root{
    --point-color-1:#201EC9;
    --width:1840px;
    --sub_width: 1620px;
    --color-texta: #1d1d1d;
    --color-textb: #fff;
}
.board_cont {margin:100px auto; padding:0 20px; max-width:var(--sub_width);}

/* header */
@keyframes arrow {
    0% {
        right:-30px; top:-30px;
    }

    70% {
        stroke-dashoffset: 0;
        stroke-width: 1;
    }

    80% {
        stroke-width: 1;
        fill: #000;
    }

    90% {
        stroke-width: 0;
    }

    100% {
        fill: #fff;
        stroke-width: 0;
    }

}
.header{position:fixed; left:0; top:0; z-index:10; width:100%;  background-color:#fff;}
.header_inner{position:relative; padding:0 1.25%; height: 112px; display:flex; justify-content: space-between; align-items: center;}
.gnb{display:flex; align-items: center;}
.gnb>ul{display:flex; padding-right:80px;}
.gnb>ul>li{position:relative; padding:0 18px;}
.gnb>ul>li:before{position:absolute; left:0; top:50%; width:6px; height:6px; background-color:#000; display:block; content:""; transform: translateY(-50%); border-radius:50%;}
.gnb>ul>li>a{position:relative; z-index:5; font-weight:900; font-size:1.5rem;}
.gnb>ul>li:first-child:before{display:none;}
.total_menu_open{position:relative; width:62px; height:62px; }
.total_menu_open span{text-indent:-9999px;}
.total_menu_open span{position:absolute; left:50%; top:50%;width:45px; height:4px; background-color:#292929; display:block; content:""; transform: translate(-50%, -50%);}
.total_menu_open span:before{position:absolute; left:50%; top:-12px; width:45px; height:4px; background-color: #292929; display:block; content:""; transform: translateX(-50%);}
.total_menu_open span:after{position:absolute; left:50%; top:12px; width:45px; height:4px; background-color: #292929; display:block; content:""; transform: translateX(-50%);}

.gnb>ul>li:hover .s_gnb{padding-top:60px; opacity:1; visibility: visible;}
.s_gnb{position:absolute; left:0; top:0; padding-top: 80px; width:300px; opacity:0; visibility: hidden; transition: all 0.3s ease-out; }
.s_gnb>ul{position:relative; background-color:#fff; border:1px solid #ddd;}
.s_gnb>ul>li a{position:relative; padding:1.5rem; font-size:1.25rem; font-weight:800; display:block;}
.s_gnb>ul>li:nth-child(2n){background-color:#efefef;}
.s_gnb>ul>li .arrow{position:absolute; right:1.5rem; top:50%; width:30px; height:30px; transform: translateY(-50%);  overflow:hidden;}
.s_gnb>ul>li .arrow:before{position:absolute; z-index:2; right:0; top:0; width:30px; height:30px; background:url(../img/gnb_arrow.svg) no-repeat center center #fff; background-size:100%; display:block; content:""; transition: all 0.3s ease-out; opacity:1;}
.s_gnb>ul>li .arrow:after{position:absolute; z-index:1; right:30px; top:30px; width:30px; height:30px; background:url(../img/gnb_arrow.svg) no-repeat center center #fff; background-size:100%; display:block; content:""; transition: all 0.3s ease-out 0.3s; opacity:0;}
.s_gnb>ul>li:hover .arrow:before{right:-30px; top:-30px; opacity:0; transition-delay: 0.3s;}
.s_gnb>ul>li:hover .arrow:after{right:0; top:0; opacity:1; }
.s_gnb>ul>li:nth-child(2n) .arrow:before{background:url(../img/gnb_arrow.svg) no-repeat center center #efefef; background-size:100%;}
.s_gnb>ul>li:nth-child(2n) .arrow:after{background:url(../img/gnb_arrow.svg) no-repeat center center #efefef; background-size:100%;}

.total_menu_wrap{position:fixed; left:0; top:0; z-index:100; padding:2vw;  width:100vw; height:100vh; box-sizing:border-box; visibility: hidden; opacity:0; transition: all 0.2s ease-out;}
.total_menu_wrap.active{visibility: visible; opacity:1;}
.total_menu_wrap .menu_bg{position:absolute; left:0; top:0; width:100%; height:100%;}
.total_menu_wrap .menu_bg span{width:0%; height:20%; display:block; background-color: #292929; transition: all 0.3s ease-out;}
.total_menu_wrap .menu_bg span:nth-child(1){transition-delay: 0.2s;}
.total_menu_wrap .menu_bg span:nth-child(2){transition-delay: 0.3s;}
.total_menu_wrap .menu_bg span:nth-child(3){transition-delay: 0.4s;}
.total_menu_wrap .menu_bg span:nth-child(4){transition-delay: 0.5s;}
.total_menu_wrap .menu_bg span:nth-child(5){transition-delay: 0.6s;}
.total_menu_wrap.active .menu_bg span{width:100%}
.total_menu_wrap.active .inner{opacity:1;}
.total_menu_wrap .inner{position:relative; z-index:12; height:100%; display: flex;flex-direction: column; justify-content: space-between; opacity:0; transition: all 0.6s ease-out 0.8s;}
.total_menu_wrap .menu_top{display:flex; align-items: center;}
.total_menu_wrap .btn_total_menu_close{margin-left:auto; width:64px; height:64px; background:url(../img/close.svg) no-repeat center center; text-indent: -9999px;}
.total_menu_wrap .total_menu{text-align:center;}
.total_menu_wrap .total_menu ul{display:inline-block; text-align:left;}
.total_menu_wrap .total_menu ul li{position:relative; margin-bottom:6vh; overflow:hidden;}
.total_menu_wrap .total_menu ul li a:before{position:absolute; left:-40px; top:50%; width:16px; height:16px; display:block; background-color:var(--point-color-1); border-radius:50%; content:""; transform: translateY(-50%); transition: all 0.6s ease-out;}
.total_menu_wrap .total_menu ul li a:hover:before{left:100%;}
.total_menu_wrap .total_menu ul li a{position:relative; display:inline-block; font-size:2.6vw; color:#fff; font-family: "Red Hat Display", sans-serif; font-weight:900;}
.total_menu_wrap .total_menu ul li:last-child{margin-bottom:0;}
.total_menu_wrap .total_menu ul li ul{display:none;}
.total_menu_wrap .menu_btm{display:flex; align-items: center;}
.total_menu_wrap .sns ul{display:flex; align-items: center;}
.total_menu_wrap .sns ul li{position:Relative; padding:0 14px; }
.total_menu_wrap .sns ul li:before{position:absolute; left:0; top:50%; width:1px; height:16px; background-color:#bdbdbd; display:block; content:""; transform: translateY(-50%);}
.total_menu_wrap .sns ul li:first-child{padding-left:0;}
.total_menu_wrap .sns ul li:first-child:before{display:none;}
.total_menu_wrap .sns ul li a{font-size: 1.0417vw; color:#fff;}
.total_menu_wrap .copyright{margin-left:auto; font-size: 1.0417vw; color:#fff; font-family: "Red Hat Display", sans-serif; font-weight:600;}

.black_bg .header{background-color:#292929;}
.black_bg .header .logo .link img{display:none;}
.black_bg .header .logo .link{width:145px; height:36px; background:url(../img/logo_w.svg) no-repeat center center; background-size:100%; display:block;}
.black_bg .gnb>ul>li>a{color:#fff;}
.black_bg .gnb>ul>li:before{background-color:#fff;}
.black_bg .total_menu_open span,
.black_bg .total_menu_open span:before,
.black_bg .total_menu_open span:after{background-color:#fff;}

@media screen and (max-width: 1200px) {
.total_menu_wrap .total_menu ul li a{font-size:6vw;}
.total_menu_wrap .sns ul li a{font-size:2.5vw;}
.total_menu_wrap .copyright{font-size:2vw;}
}
@media screen and (max-width: 960px) {
.gnb>ul{display:none;}
}
@media screen and (max-width: 768px) {
.header_inner{padding:0 3%; height:70px;}
.header .logo img{width:110px;}
.total_menu_open{width:40px; height:40px;}
.total_menu_open span{width:35px; height:3px;}
.total_menu_open span:after{top:8px; width:35px; height:3px;}
.total_menu_open span:before{top: -8px;width:35px; height:3px;}
.black_bg .header .logo .link{width:110px; height:28px;}
.total_menu_wrap .btn_total_menu_close{width:40px; width:40px; background-size:100%;}
.total_menu_wrap{padding:5vw}
.total_menu_wrap .total_menu ul li{margin-bottom:3vh;}
.total_menu_wrap .total_menu ul li a{font-size:8vw;}
.total_menu_wrap .menu_btm{display:block;}
.total_menu_wrap .sns ul{justify-content: center;}
.total_menu_wrap .sns ul li a{font-size:4vw;}
.total_menu_wrap .copyright{margin-top:20px; font-size:4vw; text-align:center;}
}

@keyframes swipe {
0% {
    clip-path: polygon(00% 0, 0 0, 0 100%, 0% 100%);
}

100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}

/*
body:before{position:fixed; left:0; top:0; z-index:100; width:100vw; height:100vh; background-color:#010101; display:block; content:""; transition: all 0.6s ease-out;}
body:after{position:fixed; left:0; top:100vh; z-index:100; width:100vw; height:100vh; background-color:#010101; display:block; content:""; transition: all 0.3s ease-out;}
body.page_end:after{top:0;}
body.page_on:before{top:100vh;}
*/

.container{padding:120px 0 0; }
.main_visual{position:relative; margin:0 1.5%; overflow:hidden; aspect-ratio: 1/0.3; background-color:#000; display:flex; }
.main_visual .video_area{position:absolute; left:50%; top:50%; width:60%;  aspect-ratio: 1/0.56; transform: translate(-50%, -50%);}
.main_visual iframe{position:absolute; left:0; top:0;  width:100%; height:100%; }
.main_visual.active:before{left:100%;}
.main_visual img{width:100%;}
.main_visual .video_area{position:relative; display:Flex; }
.main_visual .video_area:before{position:absolute; left:0; top:0; z-index:6; width:100%; height:100%; display:block; content:"";}
.main_visual .video_area>div{position:relative; height:658px;}
.main_visual  .inner{position:absolute; width:150%; top:50%; left:50%; transform: translate(-50%, -50%);  aspect-ratio: 1/0.56; }
.main_visual  iframe{width:100%; height:100%; }
.main_visual  .video_1{position:relative; width:35%; overflow:hidden;}
.main_visual  .video_2{position:relative; width:30%; background: linear-gradient(59deg, #835eff 0%, #f33fa2 100%); overflow:hidden;}
.main_visual  .video_2 object{width:100%;}
.main_visual  .video_3{position:relative; width:35%; overflow:hidden; }
.main_visual  .video_1 .inner{width:80%; }
.main_visual  .video_3 .inner{width:70%; }

#container_3d{width:100%; aspect-ratio: 1/1; /*background-color:#000;*/}
#container_3d2{width:100vw; height:100vh; /*background-color:#000;*/}
#container_3d canvas,
#container_3d2 canvas{width:50%; height:50%;}
#visualElement{height:658px;}

@keyframes typing {
    0% {
        left: 0;
    }
    100% {
        left: calc(100% + 1px);
    }
}


.main_section_1{margin:0 auto; padding:30px 30px 150px; max-width:var(--width); overflow:hidden;}
.main_section_1 .title_area{margin-bottom:50px;}
.main_section_1 .title_area>div{display:inline-block;}
.main_section_1 .title_area>div:before{position:absolute; left:0; top:0; width:0; height:100%; background-color:#000; display:block; content:"";}
.main_section_1 .title_area>div:nth-child(1):before{transition-delay: 0.2s;}
.main_section_1 .title_area>div:nth-child(2):before{transition-delay: 0.4s;}
.main_section_1 .title_area>div:nth-child(3):before{transition-delay: 0.6s;}
.main_section_1 .title_area>div span{opacity:0; transition: all 0.3s ease-out;}
.main_section_1.on .title_area>div:before{animation: txtMotion 1.5s forwards 0.2s;}
.main_section_1.on .title_area>div span {opacity:1;}
.main_section_1 .txt_area{position:relative; margin-left:auto; width:68%; bottom:-40px; opacity:0; transition: all 0.3s ease-out 1s;}
.main_section_1 .txt_area>div{position:relative; }
.main_section_1.on .txt_area{bottom:0; opacity:1;}
.main_section_1 .title_area .txt_1{position:relative; font-size:2rem; font-weight:500; overflow:hidden;}
.main_section_1 .title_area .txt_1 span,
.main_section_1 .title_area .txt_2 span,
.main_section_1 .title_area .txt_3 span{opacity:0; transition: all 0.3s ease-out;}
.main_section_1 .title_area .txt_2{position: relative; font-family: "Red Hat Display", sans-serif; font-size:4rem; font-weight:700; overflow: hidden;}
.main_section_1 .title_area .txt_3{position: relative; font-family: "Red Hat Display", sans-serif; font-size:1.5rem; font-weight:500; overflow: hidden;}
.main_section_1 .title_area .txt_1 span{transition-delay: 0.6s;}
.main_section_1 .title_area .txt_2 span{transition-delay: 0.9s;}
.main_section_1 .title_area .txt_3 span{transition-delay: 1.2s;}
.main_section_1 .txt_area p{font-size:2rem; font-weight:700; line-height:1.5; word-break: keep-all;}

.clients_area{margin-bottom:30px; display:flex; align-items: center; }
.clients_area .total_num{padding:0 30px; width:23%; box-sizing:border-box; font-size:2rem;}
.clients_area .clients_list{display:flex; align-items: center;}
.clients_area .clients_list img{max-width:none;}
.clients_area .clients_list>div{margin-right:15px;}
.clients_area.reverse{position:relative; padding-right:23%; flex-direction: column-reverse;}
.clients_area.reverse .total_num{position:absolute; right:0; top:0;  text-align:right;}
.clients_area.reverse .clients_list_wrap{width:100%;}
.clients_list_wrap{width:77%; overflow:hidden;}
.clients_list_wrap .swiper-slide{width:auto;}

@media screen and (max-width: 960px) {
.clients_area{display:none;}
.main_visual{aspect-ratio:1/0.7}
.main_visual .video_area{width:100%;}
}

@keyframes vs_txt{ 
    0%{ transform: translateY(100%);} 
    20%{transform: translateY(0%);} 
    100%{transform: translateY(0%);} 
}

@keyframes turning_point1{ 
    0%{ top:5%;} 
    50%{top:3%;}
    100%{ top:5%;} 
}
@keyframes turning_point2{ 
    0%{ top:0;} 
    50%{top:-2%;}
    100%{ top:0;} 
}
@keyframes turning_point3{ 
    0%{ background:url(../img/turning_point_2_off.png) no-repeat center center; background-size: 100% 100%;} 
    20%{background: url(../img/turning_point_2_on.png) no-repeat center center; background-size: 100% 100%;}
    80%{background: url(../img/turning_point_2_on.png) no-repeat center center; background-size: 100% 100%;}
    100%{background: url(../img/turning_point_2_off.png) no-repeat center center; background-size: 100% 100%;} 
}
.main_md_visual{position:relative; }
.main_md_visual .visual_txt{position:absolute; left:50%; bottom:0; width:100%; transform: translateX(-50%); text-align:center; overflow:hidden;}
.main_md_visual .visual_txt b{position:relative; font-size:10rem; font-weight:700; font-family: "Red Hat Display", sans-serif; letter-spacing:32px; display:inline-block; transform: translateY(100%); transition: all 0.4s ease-out;}
.main_md_visual .video_area{position:relative; margin-bottom:40px; padding-bottom:25%; overflow: hidden;}
.main_md_visual .video_area img{width:100%;}
.main_md_visual .video_area iframe{positioN:absolute; left:50%; top:50%;  width:100%; height:300%; transform: translate(-50%, -50%);}
.main_md_visual.active .visual_txt b{animation: vs_txt 1.5s linear forwards;}
.main_md_visual.active .visual_txt b:nth-child(1){animation-delay: 0.2s;}
.main_md_visual.active .visual_txt b:nth-child(2){animation-delay: 0.24s;}
.main_md_visual.active .visual_txt b:nth-child(3){animation-delay: 0.28s;}
.main_md_visual.active .visual_txt b:nth-child(4){animation-delay: 0.34s;}
.main_md_visual.active .visual_txt b:nth-child(5){animation-delay: 0.38s;}
.main_md_visual.active .visual_txt b:nth-child(6){animation-delay: 0.42s;}
.main_md_visual.active .visual_txt b:nth-child(7){animation-delay: 0.46s;}
.main_md_visual.active .visual_txt b:nth-child(8){animation-delay: 0.5s;}
.main_md_visual.active .visual_txt b:nth-child(9){animation-delay: 0.54s;}
.main_md_visual.active .visual_txt b:nth-child(10){animation-delay: 0.58s;}
.main_md_visual.active .visual_txt b:nth-child(11){animation-delay: 0.62s;}
.main_md_visual.active .visual_txt b:nth-child(12){animation-delay: 0.66s;}
.main_md_visual .turning_point{position:Relative; padding:50px 20px; display:Flex; align-items: flex-end; justify-content: center; background:url(../img/turning_point_bg.jpg) no-repeat center center; background-size:cover;}
.main_md_visual .turning_point .person{position:relative; padding-top:120px; margin:0 auto; max-width:954px;}
.main_md_visual .turning_point .person .icon_1{position:absolute; left:5.4%; top:5%; width:9.8%; animation: turning_point1 3s cubic-bezier(0.51, 0.04, 0.27, 0.91) infinite;}
.main_md_visual .turning_point .person .icon_2{position:absolute; left:33.9%; top: 0; width:9.8%; width:11.5%; }
.main_md_visual .turning_point .person .icon_2:before{position:relative; width:100%; padding-bottom:109%; display:block; content:""; background:url(../img/turning_point_2_off.png) no-repeat center center; background-size:100% 100%; animation: turning_point3 1.5s ease-out infinite;}
.main_md_visual .turning_point .person .icon_3{position:absolute; left:67.4%; top: 0; width:8.59%; animation: turning_point2 2.8s cubic-bezier(0.6, 0.25, 0.24, 0.98) infinite 0.8s;}
.main_md_visual .turning_point .person .icon_4{position:absolute; left:82.6%; top: 5%; width:8.8%; animation: turning_point1 2.4s cubic-bezier(0.51, 0.04, 0.27, 0.91) infinite 0.2s;}

.main_section_2{position:relative; margin:0 auto; padding:0 30px; max-width:var(--width); }
.main_section_2 h1{position:relative; padding-bottom:14px; font-family: "Red Hat Display", sans-serif; font-weight:900; font-size:4rem; overflow:hidden;}
.main_section_2 h1:before{position:absolute; left:0; bottom:0; width:0; height:3px; display:block; background-color:#000; content:""; transition: all 1s ease-out;}
.main_section_2 h1 span{position:relative; transform: translateY(100%); transition: all 0.3s ease-out 0.6s; display:block; }
.main_section_2.active h1 span{transform: translateY(0%);}
.main_section_2.active h1:before{width:100%;}
.main_section_2 .top_txt{margin:100px 0 0;  text-align:center; }
.main_section_2 .top_txt>div{font-size:2rem; font-weight:700; text-align:left; display:inline-block;}
.main_section_2 .top_txt>div>div{position:relative; overflow:hidden;}
.main_section_2 .top_txt>div>div:nth-child(1) span{transition-delay: 1s;}
.main_section_2 .top_txt>div>div:nth-child(2) span{transition-delay: 1.2s;}
.main_section_2 .top_txt span{transform: translateY(100%); transition: all 0.3s ease-out; display:block;}
.main_section_2.active .top_txt span{transform: translateY(0%);}
.main_works{position:relative; }
.main_works:before{position:absolute; left:50%; top:0; width:100vw; height:100%; display:block; content:""; transform: translateX(-50%); opacity:0; transition: all 0.6s ease-out;
background: rgb(32,30,201);
background: linear-gradient(180deg, rgba(32,30,201,1) 0%, rgba(0,0,0,1) 100%);
}
.main_works.active:before{opacity:1;}
.main_works .panel_wrap{position:Relative; z-index:2; margin:0 auto; max-width:1400px;}
.main_works.active .list .txt_area .cate,
.main_works.active .list .txt_area .tit{color:#fff;}

.main_section_2_wrap{overflow:hidden;}
.main_works .panel_wrap{padding:8% 0;}
.main_works .panel{padding:15% 0;}
.main_works .list{width:100%; display:flex; font-size: 1.25rem; align-items: center;}
.main_works .list .txt_area{width:30%; }
.main_works .list .img_area{margin-left:auto; width:58%; background-color:#292929; box-sizing:border-box; box-shadow:6px 8px 10px rgba(0,0,0,0.3);}
.main_works .list .img_area .inner{position:relative; padding-bottom:60%; text-align:center; overflow:hidden;}
.main_works .list .img_area .inner img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover;}
.main_works .list .txt_area .cate{font-size:1.5rem; margin-bottom:5%;}
.main_works .list .txt_area .tit{font-size:2.5rem; font-weight:700; word-break: keep-all;}
.main_works .list .txt_area .txt{margin-top:10px; font-size:1.125rem; color:#fff; }
.main_works .list .txt_area .more{position:relative; margin-top:10%; width:60px; height:60px; transition: all 0.6s ease-out; display:Flex; align-items: center; justify-content: center; border-radius: 50%; box-sizing:border-box;  background:url(../img/main_arrow.svg) no-repeat center center; background-size:60%;}
.main_works .list .txt_area .more:before{position:absolute; left:0; top:0; width:100%; height:100%; transition: all 0.6s ease-out; opacity:0; border:1px solid #000; border-radius:50%; display:block; content:"";}
.main_works .list:hover .txt_area .more:before{opacity:1;}
.main_works .panel:nth-child(2n) .list{flex-direction: row-reverse;}
.main_works .panel:nth-child(2n) .list .txt_area{margin-left:auto;}
.main_works.active .img_area .inner>div{}
.main_works.active .txt_area .more{background:url(../img/main_arrow_w.svg) no-repeat center center; background-size:60%;}
.main_works.active .txt_area .more:before{border-color:#fff;}

.main_video_area{position:Relative; margin:30px 30px;}
.main_video_area:before{position:absolute; left:0; top:0; width:100%; height:100%; background-color:#fff; display:block; content:""; transition: all 1.2s ease-out 0.2s;}
.main_video_area.active:before{ left:-100%;}
.main_video_area .stage{width:100%; height:700px;}
.main_section_3{margin:0 auto 270px; padding:0 20px; max-width:1840px; }
.main_section_3 .title_area{margin-bottom:70px; display:flex; align-items: center;}
.main_section_3 .title_area h1{position:relative; padding-left:60px; font-family: "Red Hat Display", sans-serif; font-size:4rem; font-weight:700; flex-shrink: 1;}
.main_section_3 .title_area h1:before{position:absolute; left:0; top:30px; width:32px; height:32px; display:block; background-color:var(--point-color-1); border-radius:50%; content:"";}
.main_section_3 .arrow{margin-left:auto; width:calc(100% - 520px);}
.main_section_3 .arrow:before{width:100%; height:4px; background-color:#000; display:block; content:"";}
.main_section_3 p{font-size:2rem; font-weight:700; word-break: keep-all; word-break: keep-all; line-height:1.6;}
.main_section_3 p span{position:relative; display:inline-block; vertical-align:top;}
.main_section_3 p span img{position:absolute; left:0; bottom:-5px; width:100%;}

.stage{background-color: #201EC9;}


@media screen and (max-width: 1750px) {
.main_section_1 .title_area{width:100%;}
.main_md_visual .visual_txt b{font-size:7vw; letter-spacing:1vw;}
}
@media screen and (max-width: 1200px) {
.main_visual .video_area{flex-wrap:wrap;}
/*.main_visual .video_area>div{height:400px;}*/
.main_visual{aspect-ratio:1/0.4;}
.main_visual  .video_1{width:50%;}
.main_visual  .video_2{width:50%;}
.main_visual  .video_3{display:none;}
.main_section_1{padding-bottom:100px;}
.main_works .works_txt_list{display:none;}
.main_works .panel_wrap{width:100%; }
.main_works .list{display:block;}
.main_works .list .txt_area{margin-bottom:40px;width:100%; display:block;}
.main_works .project_name{padding-bottom:15px;}
.main_works .list .img_area{width:100%;}
}
@media screen and (max-width: 960px) {
.main_section_2 .top_txt{margin:50px 0 0;}
.main_md_visual .turning_point{height:auto; padding:30px 0 0;}
.main_md_visual .turning_point .person{padding-top:15%;}
}

@media screen and (max-width: 768px) {
.main_visual .video_area>div{height:250px;}
.main_visual{display:block; aspect-ratio:auto;}
.main_visual .video_1{width:100%; aspect-ratio:1/0.7;}
.main_visual .video_2{width:100%; aspect-ratio:1/0.7;}
.main_visual .video_3{position:relative; width:100%; aspect-ratio:1/0.7;}
.main_visual .video_3{position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); aspect-ratio: 1/0.56; width:120%; }
.main_visual .video_3 iframe{width:100%; height:100%; }
.main_visual .video_3 .brush{display:none;}
.main_visual .video_3 .bottom{width:100%; height:260px;}
.main_section_1{padding:30px 2% 50px;}
.main_section_1 .title_area .txt_1{font-size:4vw;}
.main_section_1 .title_area .txt_2{font-size:9vw;}
.main_section_1 .title_area .txt_3{font-size:3vw;}
.main_section_1 .title_area{margin-bottom:50px;}
.main_section_1 .txt_area{width:100%; }
.main_section_1 .txt_area p{font-size: 4vw;}
.main_section_2 h1{font-size:8vw;}
.main_section_2{padding:0 2%;}
.main_section_2 .top_txt{margin-top:25px;}
.main_section_2 .top_txt>div{font-size:4vw;}
.main_works .panel{padding-top:70px;}
.main_works .list{font-size:1rem;}
.main_works .project_name .category{font-size:1.25rem; background-position:0 3px;}
.main_works .project_name{padding:10px 0; }
.main_works .project_name .hit{width:20%;}
.main_works .project_name .left_txt{width:78%;}
.main_works .project_name .year{display:none;}
.main_video_area{margin:50px 0 30px;}
.main_section_3{margin-bottom:100px;}
.main_section_3 .title_area h1{padding-left:30px; font-size:8vw;}
.main_section_3 .title_area h1:before{width:16px; height:16px; top:10px;}
.main_section_3 p{font-size:4vw;}
.main_section_3 .title_area{margin-bottom:30px;}
.main_works .list .txt_area .cate{margin-bottom:2%;}
}


/* footer */
.footer_3d{overflow:hidden;}
.footer_3d .logo_txt{padding:0 50px; font-size:28.1250vw; font-weight:700; line-height:1.2; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #292929; color:#fff;}
.footer_3d .contents{position:relative;}
.footer_3d .contents .circle{position:relative; width:100vw; min-height:100vh; display:Flex; align-items:center; justify-content: center; overflow:hidden;}
.footer_3d .contents .circle canvas{position:absolute; left:50%; top:50%; width:120vw; height:120vw; transform: translate(-50%, -50%);}
.footer_3d .contents .menu_list{position:absolute; left:30px; top:50%; z-index:10; transform: translateY(-50%); font-family: "Red Hat Display", sans-serif; font-size:2rem; font-weight:600; }
.footer_3d .contents a{font-family: inherit; font-weight:inherit; }
.footer_3d .contents  li{margin-bottom:10%;}
.footer_3d .contents  li:last-child{margin-bottom:0;}
.footer_3d .contents .sns_list{position:absolute; right:30px; top:50%; z-index:10; transform: translateY(-50%); text-align:right; font-family: "Red Hat Display", sans-serif; font-size:2rem; font-weight:600; }
.footer{padding:0 30px; height:70px; display:flex; align-items: center;}
.footer .copyright{margin-left:auto; font-family: "Red Hat Display", sans-serif; font-weight:600; font-size:2rem;}
.cursor { position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-color: #201EC9; border-radius: 50%; z-index: 9999; pointer-events: none; transition: transform 200ms ease-out; mix-blend-mode: difference; opacity:0.7; } 
.cursor.cursor_expand { transform: scale(1.5); } 
.black_bg .footer_logo img{display:none;}
.black_bg .footer_logo{font-size:24px; color:#fff; display:block; font-weight:700;}
.black_bg .footer_3d .logo_txt{-webkit-text-stroke-color:#fff; color:#292929;}
.black_bg .circle canvas{background-color:#292929;}
.black_bg .clients_area .total_num{color:#fff;}
.black_bg .footer_3d .contents .sns_list a,
.black_bg .footer_3d .contents .menu_list a{color:#fff;}

#circle_3d:before{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; display:block; content:"";}
#circle_3d canvas{position:relative; z-index:1; margin:0 auto; }
.mobile_3d{position:absolute; left:50%; top:50%; transform:translate(-50% , -50%);}

.footer_wrap{position:relative; }
.footer_wrap .video_3d{position:absolute; left:50%; bottom:0; width:150vw; height:100vh;   transform: translate(-50% , 0);}

@media screen and (max-width: 768px) {
.footer_3d .logo_txt{padding:0 10px;}
.footer_3d .contents .circle{min-height:50vh;}
.footer_3d .contents .sns_list,
.footer_3d .contents .menu_list{display:none;}
.footer{height:auto; padding:10px 2%; display:block;}
.footer_logo{display:none;}
.footer .copyright{display:block; margin:0; text-align:center; font-size:4vw;}
.mobile_3d{position:Relative; left:auto; top:auto; min-height: 50vh; display:block; transform:translate(0 , 0);}
.mobile_3d:before{position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:5; }
.main_works .list .txt_area{margin-bottom:20px;}
.main_works .list .txt_area .cate{font-size:5vw;}
.main_works .list .txt_area .tit{font-size:8vw;}
.main_works .list .txt_area .more{margin-top:5%; width:40px; height:40px;}
.main_md_visual .video_area{padding-bottom:40%;}
.cursor{display:none;}

.footer_3d .contents .circle canvas{width:80vw; height:80vh;}
}

/* layout */
.black_bg{background-color: #292929;}
.sub_container{padding-top:112px; }
.sub_visual{position:relative; height:533px;}
.sub_visual img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover;}
@media screen and (max-width: 768px) {
.container{padding-top:70px;}
.sub_container{padding-top:70px;}
.sub_visual{height:260px;}
}

/* work_list */
.titleType_1{position:relative; display:inline-block; font-size:3.5rem; font-weight:700; color:#fff;}
.titleType_1:before{position:absolute; left:0; bottom:0; width:100%; height:50%; background-color:var(--point-color-1); opacity:0.4; display:block; content:"";}
.titleType_1 span{position:relative; padding:0 10px; display:inline-block; display:inline-block; vertical-align: top;;}
.work_list_top{padding:36px 2%; display:flex; align-items: center;}
.work_list_top .tabType_1{margin-left:auto;}
.tabType_1 ul{display:flex; align-items: center; flex-wrap:wrap;}
.tabType_1 ul li{margin-left:10px; }
.tabType_1 ul li a{padding:5px 20px; display:block; border-radius:2em; color:#fff; border:1px solid rgba(255,255,255,0.4);}
.tabType_1 ul li a.active{background-color:#fff; color:#292929;}
.work_list{position:relative; padding:0 2%; }
.work_list ul{display:Flex; flex-wrap:wrap;}
.work_list ul li{position:relative; margin-right:2%; padding:40px 0; width:32%; }
.work_list ul li:nth-child(3n){margin-right:0;}
.work_list ul li .gall_chk{position:absolute; left:10px; top:10px;  z-index:5; }
.work_list ul li:before{position:absolute; left:0; top:0; width:0; height:1px; background-color:#fff; display:block; content:""; transition: all 1.2s ease-out;}
.work_list ul li .img_area{position:relative; overflow:hidden;}
.work_list ul li .img_area a{position:relative; padding-bottom:75%; display:block; transform: scale(1.0); transition: all 0.4s ease-out;}
.work_list ul li .img_area img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; transform: scale(1.3) rotate(8deg); opacity:0; transition: opacity 1s cubic-bezier(.075, 0, .165, 0), transform 1.5s cubic-bezier(.075, .82, .165, 1); transition-delay:0.4s;}
.work_list ul li .img_area a:before{position:absolute; left:0; top:0; z-index:3; width:100%; height:100%; background:rgba(0,0,0,0.7); display:block; content:""; opacity:0; transition: all 0.5s ease-out;}
.work_list ul li:hover .img_area a:before{opacity:1;}
.work_list ul li .txt_area{padding:15px 0 0;}
.work_list ul li .txt_area .tit{font-size:2rem; color:#fff;}
.work_list ul li .txt_area .txt{font-size:1.5rem; color:#fff;}
.work_list ul li:hover .img_area a{transform: scale(1.05);}
.work_list ul li.on:before{width:100%;}
.work_list ul li.on .img_area img{transform:scale(1) rotate(0deg); opacity:1;}
.work_list ul li:nth-child(2).on:before,
.work_list ul li:nth-child(3n+2).on:before{transition-delay: 0.4s;}
.work_list ul li:nth-child(3n).on:before{transition-delay: 0.6s;}
.work_list ul li:nth-child(2).on .img_area img,
.work_list ul li:nth-child(3n+2).on .img_area img{transition-delay: 0.8s;}
.work_list ul li:nth-child(3n).on .img_area img{transition-delay: 1s;}
@media screen and (max-width: 1024px){
.work_list_top{display:block; padding:2%;}
.titleType_1{margin-bottom:40px; font-size:3rem;}
.tabType_1 ul li{margin:0 5px 5px;}
}
@media screen and (max-width: 768px){
.work_list ul li{padding:4% 0;}
.work_list ul li{width:100%;}
.work_list ul li .img_area a{padding-bottom:30%;}
.titleType_1{margin-bottom:25px; font-size:2.5rem;}
.tabType_1 ul li a{padding:5px 10px;}
.work_list ul li .txt_area .tit{font-size:1.5rem;}
.work_list ul li .txt_area .txt{font-size:1rem;}
}

/* inquiry */
.inquiry_visual{padding:40px 3%; margin:0 auto; max-width:var(--sub_width); margin-bottom:100px; display:flex; flex-direction: row-reverse; align-items: center; overflow:hidden;}
.inquiry_visual .img_area{position:Relative; margin-left:auto; width:35%; overflow:hidden; transition: all 0.8s ease-out 0.2s;}
.inquiry_visual .img_area:before{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; display:block; content:"";}
.inquiry_visual .img_area .inner{position:relative;  aspect-ratio: 1/1; }
.inquiry_visual .img_area img{position:absolute; left:50%; top:50%; max-width:none; width:800px; transform: translate(-50%, -50%); }
.inquiry_visual .img_area object,
.inquiry_visual .img_area iframe{position:absolute; left:50%; top:50%; width:200%; height:200%; transform: translate(-50%, -50%); background-color:#292929;}
.inquiry_visual .txt_area{position:Relative; width:60%; font-size:3.5rem; font-weight:700; color:#fff; transition: all 0.8s ease-out 0.6s;}
.inquiry_cont{position:relative; margin:0 auto 180px; padding:max(calc(80/1080*100vh),40px) 3%; max-width:var(--sub_width); }
.inquiry_cont .sticky_txt{position:sticky; left:0; top:150px;margin-left:-40px; font-size:3rem; color:#fff; font-weight:700; transition: all 0.6s ease-out 0.2s;  opacity:0;}
.inquiry_cont.active .sticky_txt{margin-left:0; opacity:1;}
.inquiry_form{position:relative; left:-40px; margin-left:auto; margin-top:-50px; width:53%; transition: all 0.6s ease-out 0.5s; opacity:0;}
.inquiry_cont.active .inquiry_form{left:0; opacity:1;}
.inquiry_form h1{margin-bottom:50px; font-size:2.5rem; color:#fff; font-weight:700;}
.inquiry_form>ul>li{position:relative; margin-bottom:40px; display:flex; align-items: center;}
.inquiry_form>ul>li:before{position:absolute; left:0; bottom:0; width:100%; height:1px; background-color: #fff; display:block; content:"";}
.inquiry_form>ul>li:after{position:absolute; left:50%; bottom:0; width:0; height:1px; background-color: #312CF8; display:block; content:""; transform: translateX(-50%); transition: all 0.6s ease-out;}
.inquiry_form>ul>li .title,
.inquiry_form>ul>li label{font-size:1.5rem; color:#fff; flex-shrink:0;}
.inquiry_form>ul>li  select option{background-color:#000;}
.inquiry_form>ul>li  select,
.inquiry_form>ul>li input[type=password],
.inquiry_form>ul>li input[type=text]{padding-left:20px; width:100%; height:60px; line-height:60px; border:none; background:transparent; color:#fff; flex-shrink:1; font-size:1.25rem;}
.inquiry_form>ul>li.txt_box{display:block;}
.inquiry_form>ul>li.txt_box textarea{padding:0; height:120px; background:transparent; border:none; font-size:1rem; color:#fff; overflow:auto;}
.inquiry_form>ul>li.active:after{width:100%;}
.inquiry_form>ul>li.block{flex-direction: column;  align-items:flex-start;}
.inquiry_form .btn_area{text-align:center;}
.inquiry_form .btn_area button{width:168px; height:52px; line-height:52px; text-align:center; border-radius:2em; background-color:#fff; display:inline-block; font-size:1.25rem; color:#010101;}
.inquiry_location{margin:0 auto 190px; padding: 0 3%; max-width:var(--sub_width); }
.inquiry_location address{margin-bottom:10px; padding-left:38px; background:url(../img/icon_location.svg) no-repeat 0 5px; font-size:1.5rem; color:#fff;}
.inquiry_location .map{margin-bottom:100px;}
.inquiry_location .map iframe{width:100%; height:400px;}

.inquiry_form .custom_radio_list{padding:15px 0 10px; }
.inquiry_form .custom_radio_list ul{display:flex; gap:10px 50px; flex-wrap:wrap;}
.inquiry_form .custom_radio_list ul li{position:relative; }

.custom_radio{position:relative; display:inline-block; overflow:hidden;}
.custom_radio input[type=radio]{position:absolute; left:-20px; top:0; }
.custom_radio label{display:flex; font-size:1rem; color:#fff;  gap:8px; align-items:center;}
.custom_radio label:before{width:26px; aspect-ratio: 1/1;  background:url(/img/ic_check.svg) no-repeat center center #aaa; border-radius:50%; display:block; content:""; }
.custom_radio input[type=radio]:checked+label:before{background:url(/img/ic_check.svg) no-repeat center center var(--point-color-1);}


@media screen and (max-width: 1540px) {
.inquiry_visual .txt_area{word-break: keep-all;}
.inquiry_visual .txt_area br{display:none;}
}
@media screen and (max-width: 1200px) {
.inquiry_visual{display:block; }
.inquiry_visual .img_area{margin:0 auto; width:80%;}
.inquiry_visual .txt_area{width:100%;}
.inquiry_cont .sticky_txt{position:relative; top:0; }
.inquiry_form{margin:50px 0 0; width:100%;}
}
@media screen and (max-width: 960px) {
.inquiry_visual{display:block; }
.inquiry_visual .img_area{margin:0 auto; margin:0 auto; text-align:center;}
.inquiry_visual .txt_area{width:100%; margin-top:50px; }
.inquiry_cont .sticky_txt{position:relative; top:0; width:100%; }
.inquiry_form{margin:50px 0; width:100%;}
.inquiry_form h1{margin-bottom:25px;}
.inquiry_location .map{margin-bottom:50px;}
}
@media screen and (max-width: 768px) {
.inquiry_visual{padding:20px;}
.inquiry_visual .number{width:80%;}
.inquiry_visual .txt_area{margin-top:20px; font-size:2rem; text-align:center;}
.inquiry_cont{margin-bottom:50px;}
.inquiry_cont .sticky_txt{font-size:1.75rem;}
.inquiry_form h1{font-size:1.75rem;}
.inquiry_form>ul>li{margin-bottom:20px;}
.inquiry_form>ul>li .title,
.inquiry_form>ul>li label{font-size:1.125rem;}
.inquiry_form>ul>li  select,
.inquiry_form>ul>li input[type=password],
.inquiry_form>ul>li input[type=text]{height:40px; line-height:40px;}
.inquiry_form .btn_area button{width:140px; height:40px; line-height:40px; font-size:1.125rem;}
.inquiry_location address{font-size:1.125rem;}
.inquiry_location .map iframe{height:300px;}
.inquiry_location{margin-bottom:100px;}
.inquiry_visual .img_area{width:100%;}

.inquiry_visual .img_area img{width:600px;}

.custom_radio label:before{width:20px; background-size:12px;}
.custom_radio input[type=radio]:checked+label:before{background-size:12px;}
}

/* btn */
.basic-btn01{padding:8px 30px; display:inline-block; height:auto; line-height:1.4;}
.btn-black-bd{border:1px solid #000; }
.btn-black-bg{background-color:#000; color:#fff;}
.btn-white-bd{border:1px solid #fff;  color:#fff;}
.btn-white-bg{background-color:#fff; color:#000;}

/* maintain */
.maintain_visual{position:relative; padding:40px 3% 100px; overflow:hidden; display:flex; align-items: center; flex-direction: row-reverse;}
.maintain_visual .txt_area{position:Relative; margin-left:0;  z-index:3; width:60%; font-size:3.5rem; font-weight:700;bottom:-50px; opacity:0; transition: all 0.8s ease-out 0.6s;}
.maintain_visual .img_area{position:relative; width:35%; margin-left:auto; overflow:hidden; opacity:0; transition: all 0.8s ease-out 0.2s;}
.maintain_visual .img_area:before{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; display:block; content:"";}
.maintain_visual .img_area .inner{position:relative; padding-bottom:100%;}
.maintain_visual .img_area iframe{position:absolute; left:50%; top:50%; width:240%; height:240%; transform: translate(-50%, -50%); }
.maintain_visual.active .txt_area{bottom:0; opacity:1;}
.maintain_visual.active .img_area{opacity:1;}
#maintain_vs{position:absolute; left:50%; top:50%; width:100%; height:100%; transform: translate(-50%, -50%) scale(2);} 
.maintain_write{margin:150px 0 200px;}
.maintain_write .title_area{position:Relative; margin:0 auto 70px; padding:0 20px; max-width:1556px; display:flex; align-items: center; flex-wrap:wrap;}
.maintain_write .title_area:before{position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:#eee; display:block; content:"";}
.maintain_write .title_area h1{position:relative; padding-bottom:15px; font-size:3rem; font-weight:700;}
.maintain_write .title_area h1:before{position:absolute; left:0; bottom:0; width:100%; height:4px; background-color:#010101; display:block; content:"";}
.maintain_write .title_area p{margin-left:20px; font-size:1rem; font-weight:500; color:#8d8d8d;}
.maintain_write .write_form{margin:0 auto; padding:0 20px; max-width:1200px; }
.maintain_write .write_form ul{display:flex; align-items: center; flex-wrap:wrap;}
.maintain_write .write_form ul li{margin-bottom:40px; width:100%;}
.maintain_write .write_form ul li.w50p{width:48%;}
.maintain_write .write_form ul li.w50p:nth-child(2n){margin-left:auto;}
.maintain_write .write_form ul li .tit{position:relative; margin-bottom:5px; font-size:1.5rem; }
.maintain_write .write_form ul li .tit.d-flex{display:flex; align-items: center;}
.maintain_write .write_form ul li .tit .ml-auto{margin-left:auto; font-size:1.125rem;}
.maintain_write .write_form ul li input[type=password],
.maintain_write .write_form ul li input[type=text],
.maintain_write .write_form ul li select{padding:0 10px; width:100%; height:56px; line-height:54px; border:1px solid #000; box-sizing:border-box; font-size:1.125rem; }
.maintain_write .write_form ul li textarea{padding:10px; width:100%; height:360px; box-sizing:border-box; border:1px solid #000;}
.maintain_write .btn_area{text-align:center;}
.maintain_list{margin:150px auto 200px; padding:0 20px; max-width:var(--sub_width);}
.maintain_list .title_area{margin-bottom:10px; display:flex; align-items: center;}
.maintain_list .title_area h1{position:relative; font-size:3rem; font-weight:700;}
.maintain_list .title_area p{margin-left:20px; font-size:1rem; font-weight:500; color:#8d8d8d;}
.maintain_list .title_area .ml-auto{margin-left:auto;}
.maintain_list .banner{margin-right:5px; padding:5px 15px; display:inline-block; background-color:#333; color:#fff; border-radius:2rem; white-space:nowrap;}
.maintain_list .special{background-color:var(--point-color-1);}

.maintain_list .plan{background-color:var(--point-color-1);}


@media screen and (max-width: 1440px) {
.maintain_visual .txt_area{font-size:3rem;}
}
@media screen and (max-width: 1240px) {
.maintain_visual{position:relative; display:block; }
.maintain_visual .img_area{margin:0 auto; width:60%;}
.maintain_visual .txt_area{width:100%; text-align:center; word-break: keep-all;}
}
@media screen and (max-width: 960px) {

.maintain_list .title_area{display:block;}
.maintain_list .title_area h1{font-size:2.4rem;}
.maintain_list .title_area .ml-auto{margin-top:10px; text-align:Right;}
.maintain_list .title_area p{margin:5px 0 0;}
.maintain_visual{padding:40px 3%;}
}
@media screen and (max-width: 768px) {
.maintain_visual .txt_area{font-size:2rem; }
.maintain_visual .txt_area br{display:none;}
.maintain_write .write_form ul li{margin-bottom:20px;}
.maintain_write .write_form ul li.w50p{width:100%;}
.maintain_write .write_form ul li input[type=text],
.maintain_write .write_form ul li select{height:40px; line-height:38px;}
.maintain_write .title_area{display:block;}
.maintain_write .title_area p{width:100%; margin:10px 0 0;}
.maintain_visual .img_area{top:-40%;}
.maintain_write .title_area:before{display:none;}
.maintain_write .write_form ul li textarea{height:200px;}
.maintain_write .title_area{margin-bottom:30px;}
.maintain_write .title_area h1{font-size:2.4rem;}
.maintain_list{margin:70px auto 100px;}
}

.listType_1 ul{display:flex; align-items: center;}
.listType_1 .num{width:5%;}
.listType_1 .category{width:10%;}
.listType_1 .company{width:10%;}
.listType_1 .title{width:50%;}
.listType_1 .date{width:10%;}
.listType_1 .state{width:8%;}
.listType_1 .name{width:7%;}
.listType_1 .thead{background-color:#000; color:#fff; text-align:center;}
.listType_1 .thead li{height:72px; display:flex; align-items: center; font-size:1.25rem; justify-content: center;}
.listType_1 .tbody{text-align:center; }
.listType_1 .tbody .company,
.listType_1 .tbody .title{text-align:left; justify-content: flex-start;}
.listType_1 .tbody ul{border-bottom:1px solid #eee;}
.listType_1 .tbody li{padding:0 10px; height:80px; font-size:1.125rem; display:flex; align-items: center; justify-content: center; box-sizing:border-box;}
.listType_1 .state span{width:98px; height:34px; line-height:34px; display:inline-block;  font-size:1rem; box-sizing:border-box;}
.listType_1 .state .ing{background-color:#C91E1E; color:#fff;}
.listType_1 .state .complete{background-color:#444; color:#fff;}
.listType_1 .state .new{border:1px solid #010101; color:#010101;}
.listType_1 .state .estimate{background-color:#201EC9; color:#fff;}
.listType_1 .state .answer{background-color:#444; color:#fff;}

@media screen and (max-width: 1300px) {
.listType_1 .title{width:43%;}
.listType_1 .date{width:12%;}
.listType_1 .state{width:10%;}
.listType_1 .name{width:10%}
}
@media screen and (max-width: 960px) {
.listType_1 .thead{display:none;}
.listType_1 .tbody{border-top:2px solid #000;}
.listType_1 .tbody ul {padding:10px 0; flex-wrap:wrap;}
.listType_1 .tbody li{height:auto; padding:2px 0;}
.listType_1 .num{width:20%;}
.listType_1 .category{width:40%;}
.listType_1 .company{width:40%;}
.listType_1 .title{width:100%; }
.listType_1 .date{width:auto; flex-grow:1;}
.listType_1 .state{width:auto; flex-grow:1;}
.listType_1 .name{width:auto; flex-grow:1;}
.listType_1 .tbody li{font-size:1rem;}
.listType_1 .state span{width:70px; height:26px; line-height:26px;}
.maintain_list .banner{padding:2px 10px;}
}

/* main_popup */
.main_popup{position:fixed; left:0; top:0; width:100vw; z-index:100; height:100%; display:block; background:rgba(3,3,3,0.9);}
.main_popup .over_hidden{overflow-x: hidden; overflow-y:auto; max-height:calc(100vh - 200px);}
.main_popup .popup_inner{position:fixed; left:50%; top:50%; max-width:900px; width:90%;  box-sizing:border-box;  transform: translate(-50%, -50%); }
.main_popup .swiper-slide-1{padding:20px 0; background-color:#fff; }
.main_popup .d-flex{display:flex; flex-direction: row-reverse;}
.main_popup .img_area{margin-left:auto; width:25%;}
.main_popup .txt_area{width:65%;}
.main_popup .popup_cont{padding:25px 5%; }
.main_popup .en{font-size:1.125rem; }
.main_popup .txt_1{margin-bottom:10px; font-size:2.5rem; font-weight:700;}
.main_popup .txt_2{margin-bottom:30px; font-size:1.125rem; word-break: keep-all;}
.main_popup .txt_2 strong{display:block; font-weight:700; font-size:inherit;}
.main_popup .list ul{display:flex; flex-wrap:wrap;}
.main_popup .list ul li{margin-bottom:20px; padding:0 10px; width:48%; height:64px; border:1px solid #333; box-sizing:border-box; display:flex; align-items: center; justify-content: center;}
.main_popup .list ul li:nth-child(2n){margin-left:auto; }
.main_popup .list ul li span{font-size:1.125rem; font-weight:700;}
.main_popup .marquee3k img{margin:0 10px;}
.main_popup_close{position:absolute; right:0; top:-80px; width:80px; height:80px; background:url(../img/close.svg) no-repeat center center; }
.main_popup .swiper-wrapper {transition-timing-function: linear;}
.main_popup .swiper-slide {display: flex; align-items: center; justify-content: center;}
.main_popup .swiper-pagination-bullet{width:12px; height:12px;}
.main_popup .swiper-pagination-bullet-active{background-color:var(--point-color-1);}

@media screen and (max-width: 768px) {
/*.main_popup .logo_area{display:none;}*/
}

@media screen and (max-width: 640px) {
.main_popup .popup_inner{margin-top:30px; padding:0;}
.main_popup .d-flex{display:block; }
.main_popup .img_area{display:none;}
.main_popup .txt_area{width:100%;}
.main_popup .marquee3k{display:none;}
}

/* intro */
.intro .intro_top_txt{padding:140px 20px 40px; font-size:3.5rem; font-weight:700; color:#fff;}
.intro_visual{padding:40px 3%; margin:0 auto; max-width:var(--sub_width); margin-bottom:100px; display:flex; flex-direction: row-reverse; align-items: center; overflow:hidden;}
.intro_visual .img_area{position:Relative; margin-left:auto; width:35%; overflow:hidden;  transition: all 0.8s ease-out 0.2s;}
.intro_visual .img_area .inner{position:relative;  aspect-ratio: 1/1; }
.intro_visual .img_area img{position:absolute; left:50%; top:50%; max-width:none; width:800px; transform: translate(-50%, -50%); }
.intro_visual .img_area iframe,
.intro_visual .img_area object{position:absolute; left:50%; top:50%; width:200%; height:200%; transform: translate(-50%, -50%); }
.intro_visual .txt_area{position:Relative; width:60%; font-size:3.5rem; font-weight:700; }
.black_bg .intro_visual .txt_area{color:#fff;}
.intro_cont{margin:0 auto; padding:75px 3% 150px; display:flex; max-width:var(--sub_width);}
.intro_cont .title{width:16.7%; position:relative; bottom:-40px; opacity:0; transition: all 0.3s ease-out;}
.intro_cont .title h1{font-size:2.5rem; font-weight:700; color:#fff;}
.intro_cont .txt_cont{margin-left:auto; width:83%; position:relative; bottom:-40px; opacity:0; transition: all 0.3s ease-out 0.4s;}
.intro_cont.active .title{bottom:0; opacity:1;}
.intro_cont.active .txt_cont{bottom:0; opacity:1;}
.intro_cont .txt_cont p{font-size:1.5rem; font-weight:700; color:#fff; line-height:2;}
.intro_cont .txt_cont h2{font-size:1.25rem; font-weight:500; color:#fff;}
.intro_cont .list_1{position:relative; }
.intro_cont .list_1 .circle{position:absolute; left:-60px; top:0; transition: all 0.3s ease-out; }
.intro_cont .list_1 li{margin-bottom:70px; opacity:0.4;}
.intro_cont .list_1 li.on{opacity:1;}
.intro_cont .list_1 li:last-child{margin-bottom:0;}
.intro_cont2{margin-bottom:160px;}
.intro_cont2 .title{margin:0 auto 20px; max-width:var(--sub_width); display:flex;  align-items: center; position:relative; bottom:-40px; opacity:0; transition: all 0.3s ease-out;}
.intro_cont2 .title h1{width:16.7%; font-size: 2.5rem; font-weight: 700; color: #fff;}
.intro_cont2 .title .en{margin-left:auto; width:83%; font-size:1.5rem; color:#fff;}
.intro_cont2 .list{position:relative; position:relative; bottom:-40px; opacity:0; transition: all 0.3s ease-out 0.4s;}
.intro_cont2 .list .bar{position:absolute; left:0; top:0; width:100%; height:120px; display:block; background-color: var(--point-color-1); display:block; transition: all 0.3s ease-out;}
.intro_cont2 .list .bar .inner_txt{margin:0 auto; max-width:var(--sub_width); height:120px; display:flex; align-items: center ; font-size:2rem; font-weight:700; color:#fff;}
.intro_cont2 .list .bar .inner_txt span{font-weight:inherit; font-size:inherit; color:inherit;}
.intro_cont2.active .title{bottom:0; opacity:1;}
.intro_cont2.active .list{bottom:0; opacity:1;}
.intro_cont2 ul li{position:Relative; z-index:2; transition: all 0.3s ease-out;}
.intro_cont2 ul li .inner{margin:0 auto; max-width:var(--sub_width);  display:flex; align-items: center; flex-wrap:wrap; color:#fff; }
.intro_cont2 ul li .over{width:16.7%; font-size:2rem; font-weight:700; opacity:0; transition: all 0.6s ease-out;}
.intro_cont2 ul li .txt{margin-left:auto; width:83%; height: 120px; font-size:2rem; font-weight:700; display:Flex; align-items: center; border-bottom:1px solid #fff;}
.intro_cont2 ul li .txt strong{width:20%; display:block; transition: all 0.6s ease-out;}
.intro_cont2 ul li .txt p{font-size:1.5rem; transition: all 0.6s ease-out; opacity:0; transition: all 0.3s ease-out;}
.intro_cont2 ul li.on .txt p{opacity:1;}
.intro_cont2 ul li.on .over{opacity:1;}
.intro .visual2{height:558px; background:url(../img/intro_img.png) no-repeat center center; background-size:cover; display:Flex; align-items: center; justify-content: center;}
.intro .visual2 p{font-size:1.5rem; color:#fff; font-weight:600;}
.intro .client ul{display:flex; align-items: center; gap:70px; flex-wrap:wrap; justify-content: space-between;}
@media screen and (max-width: 1700px) {
.intro_cont2 .list .bar .inner_txt,
.intro_cont2 .title{padding-left:3%;}
}
@media screen and (max-width: 1540px) {
.intro_visual .txt_area{word-break: keep-all;}
.intro_visual .txt_area br{display:none;}
}
@media screen and (max-width: 1340px) {
.intro_cont{display:block; }
.intro_cont .title{margin-bottom:40px; width:100%;}
.intro_cont .txt_cont{width:100%;}
.specialities-wrap{padding-left:60px;}
.intro_cont .list_1 .circle{left:0;}

}
@media screen and (max-width: 1200px) {
.intro_visual{display:block; }
.intro_visual .img_area{margin:0 auto; width:80%;}
.intro_visual .txt_area{width:100%; box-sizing:border-box; text-align:center;}
}
@media screen and (max-width: 960px) {
.intro_visual{display:block; }
.intro_visual .img_area{margin:0 auto; margin:0 auto; text-align:center;}
.intro_visual .txt_area{width:100%; padding-top:50px; }
.intro_cont2 ul li .txt{width:calc(100% - 200px);}
.intro .client ul{gap:30px;}
}
@media screen and (max-width: 768px) {
.intro_visual{padding:20px; margin-bottom:30px;}
.intro_visual .txt_area{padding-top:20px; font-size:2rem; text-align:center;}
.intro_cont{padding:30px 3% 70px;}
.intro_cont2{margin-bottom:70px;}
.intro_cont2 .title .en{margin-left:10px; width:auto;}
.intro_cont2 .title h1{margin-left:0; width:auto; }
.intro_cont2 ul li .inner{padding:}
.intro_cont2 ul li .txt{height:200px; display:block;  padding:60px 3% 0; width:100%; box-sizing:border-box;}
.intro_cont2 ul li .txt strong{width:100%;}
.intro_cont2 .list .bar{height:200px;}
.intro_cont2 .list .bar .inner_txt{padding-top:20px; height:auto; }
.intro .visual2{padding:50px 30px; height:auto; text-align:center; }
.intro .client ul{justify-content: center; gap:0;}
.intro .client ul li{width:48%; margin-bottom:30px;  text-align:center;}
.intro .client ul li:nth-child(2n){margin-left:auto; }
.intro .client img{max-width:140px;}

.intro_visual .img_area img{width:600px;}
}

/* start_intro */
.start_intro{position:fixed; left:0; top:0; z-index:1000; width:100%; height:100vh; background-color:#000; display:flex; align-items: center; justify-content: center;}
.start_intro svg{font-size:7vw; text-transform: uppercase; animation: start_intro 2s 1 alternate; fill: var(--point-color-1); font-weight:900; }
@media screen and (max-width: 1200px) {
.start_intro svg{font-size:15vw;}
}
@media screen and (max-width: 990px) {
.start_intro svg{font-size:25vw;}
}
@media screen and (max-width: 760px) {
.start_intro svg{font-size:45vw;}
}


@keyframes start_intro {
    0% {
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        fill: rgba(72, 138, 204, 0);
        stroke: #201EC9;
        stroke-width: 2;
    }

    70% {
        fill: rgba(72, 138, 204, 0);
        stroke: #201EC9;
    }

    80% {
        fill: rgba(72, 138, 204, 0);
        stroke: #201EC9;
    }

    100% {
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        fill: var(--point-color-1);
        stroke: rgba(54, 95, 160, 0);
        stroke-width: 0;
    }
}

/* history */
.history_list_wrap{position:Relative; margin:0 auto 150px; max-width:var(--sub_width); padding:0 3%; }
.history_list_wrap .year_list{position:sticky; left:0; top:150px; width:21%; }
.history_list_wrap .year_list ul{position:relative; transition: all 0.3s ease-out;}
.history_list_wrap .year_list li{height:100px; font-size:4rem; font-weight:800; transition: all 0.3s ease-out;}
.history_list_wrap .year_list li.on{color:var(--point-color-1);}
.history_list{margin-left:auto; margin-top:-700px; width:75%;}
.history_list>ul>li{position:relative; padding-bottom:150px;}
.history_list>ul>li:before{position:absolute; left:40px; top:0; z-index:-1; width:1px; height:100%; background-color:#ddd; display:block; content:"";}
.history_list>ul>li .year{padding:10px 0; background-color:#fff; font-size:2rem; font-weight:700;}
.history_list>ul>li.on .year{color:var(--point-color-1);}
.history_list>ul>li ul{padding-left:120px;}
.history_list>ul>li li{position:relative; padding-left:15px; display:flex; line-height:1.6;}
.history_list>ul>li li:before{position:absolute; left:0; top:12px; width:4px; height:4px; background-color:#333; display:block; content:""; border-radius:50%;}
.history_list>ul>li li .month{font-size:1.125rem; font-weight:700;}
.history_list>ul>li li .txt{margin-left:auto; width:calc(100% - 40px);font-size:1.125rem; }
@media screen and (max-width: 960px) {
.history_list_wrap .year_list{display:none;}
.history_list{margin:0; width:100%;}
}
@media screen and (max-width: 768px) {
.history_list>ul>li ul{padding-left:60px;}
.history_list>ul>li{padding-bottom:70px;}
.history_list_wrap{margin-bottom:70px;}
}

@keyframes txtMotion{ 
    0%{width:0; left: 0;}
    50%{width:100%; left:0;}
    100%{left:100%; width:100%;}
}

.txt_motion>div{position:relative; display:inline-block; overflow:hidden;}
.txt_motion>div:before{position:absolute; left:0; top:0; width:0; height:100%; background-color:#000; display:block; content:""; transition: all 0.6s ease-out; }
.txt_motion>div span{display:inline-block; opacity:0; transition: all 0.3s ease-out 0.8s;}
.page_on .txt_motion>div:before{animation: txtMotion 1.5s forwards 0.2s;}
.page_on .txt_motion>div span{opacity:1;}
.black_bg .txt_motion>div:before{background-color:#fff;}

/* estimate_info */
.estimate_info{margin:0 auto; padding:100px 4%;  max-width:var(--width);}
.estimate_info .titleType_1{color:#000; margin-bottom:50px;}
.estimate_info thead th{background-color:#dfdfdf; height:60px; text-align:center; font-size:1.25rem; font-weight:500;  border:1px solid #ddd; border-top: 2px solid #000;}
.estimate_info tbody td{height:60px; border:1px solid #ddd; text-align:center; font-size:1.125rem;}
.estimate_info tbody th{background-color:#f9f9f9; border:1px solid #ddd; font-weight:600; font-size:1.125rem;}

.check_list{margin-top:100px; border:10px solid #ddd; padding:40px;}
.check_list h2{margin-bottom:20px; font-weight:700; }
.check_list ul li{position:relative; padding-left:15px;  line-height:1.7; }
.check_list ul li:before{position:absolute; left:0; top:12px; width:6px; height:2px; background-color:#000; border-radius:2em; display:block; content:"";}
@media screen and (max-width: 960px) {
.estimate_info .titleType_1{margin-bottom:25px;}
.estimate_info thead th{padding:5px; height:40px; font-size:1.125rem;}
.estimate_info tbody th,
.estimate_info tbody td{padding:5px; height:40px; font-size:1rem;}
.check_list{margin-top:50px; padding:20px;}
.check_list ul li:before{top:8px;}
}

.animated-title {position: relative; width: 100%;max-width:100%; height: auto; padding:10px 0; overflow-x: hidden; overflow-y: hidden; }
.animated-title .track {white-space: nowrap;will-change: transform;animation: marquee 10s linear infinite; }
.animated-title .track img{margin:0 5px;}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee_re {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
/*
@media (hover: hover) and (min-width: 700px){
.animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
}
*/

.animated-title.reverse .track{animation: marquee_re 10s linear infinite; }

.main_vs_circle {position: relative;width:100%; aspect-ratio: 1/1;transform-style: preserve-3d;animation: animate 10s linear infinite;}

@keyframes animate {
0% {
transform: rotateY(0deg) rotate(0deg);;
}
100% {
transform: rotateY(360deg) rotate(180deg);;
}
}

.main_vs_circle div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform-style: preserve-3d;}
.main_vs_circle div span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background: rgba(255, 255, 200, 0.05);border: 1px solid rgba(255, 255, 255, 0.3);transform: rotateY(calc(10deg * var(--i)));box-shadow: 0 0 100px 0 rgba(255, 220, 200, 0.1);}
.main_vs_circle div span::before {content: "";position: absolute;top: 50%;left: 50%;width: 88%;height: 88%;background: rgba(255, 255, 255, 0.08);border-radius: 100%;transform: translate(-50%, -50%);}
.main_vs_circle div span::after {content: "";position: absolute;top: 50%;left: 50%;width: 40%;height: 40%;background: rgba(0, 0, 0, 0.1);border-radius: 100%;transform: translate(-50%, -50%);}