/* main_visual */
#main_visual { position: relative; height: 100vh; max-height: 100vh; overflow: hidden; }
#main_visual .mv_wrap { position: relative; height: 100%; }
#main_visual .mv_text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#main_visual .mv_text .contwrap { top: 100px; height: calc(100% - 100px); width: 918px; margin: 0 auto;}

#main_visual .mv_text .textbox { z-index: 4; position: absolute;  top: 50%; transform: translateY(-50%);  color: #fff; width: 100%;}
#main_visual .mv_text .textbox .text1 { display: block; font-weight: 300; font-size: 80px; line-height: 1.3;  text-align: left; color: #fff; min-height: 1.3em;}
#main_visual .mv_text .textbox .text1 b {font-weight: 700; font-size: 90px; font-size: inherit;}

#main_visual .mv_text .textbox .text2 { display: block; font-weight: 300; font-size: 80px; line-height: 1.3;  text-align: right; color: #fff; min-height: 1.3em;}
#main_visual .mv_text .textbox .text2 b {font-weight: 700; font-size: 90px; font-size: inherit;}

#main_visual .mv_text .textbox .typed-inner { display: inline-block; text-align: left; vertical-align: top; }
#main_visual .mv_text .textbox .typed-cursor { display: none; width: 0.08em; height: 0.85em; margin-left: 0.08em; background-color: #fff; vertical-align: -0.05em; }
#main_visual .mv_text .textbox .typed-cursor.is-on { display: inline-block; animation: typed-blink 0.7s step-end infinite; }
@keyframes typed-blink {
    50% { opacity: 0; }
}

#main_visual .mv_text .textbox a {text-align: right; display: block; margin-top: 30px; font-size: 24px; text-decoration: underline; position: relative; padding-right: 20px;}
#main_visual .mv_text .textbox a::after {content: "\f105"; font-family: FontAwesome;  display: block; position: absolute; top: 0; right: 0; text-decoration: none;}

#main_visual .mv_slick { z-index: 1; position: relative; height: 100%; }
#main_visual .mv_slick .slick-list, #main_visual .mv_slick .slick-track, #main_visual .mv_slick .slick-slide, #main_visual .mv_slick .slick-slide > div { height: 100%; }
#main_visual .mv_slick .con { position: relative; height: 100%; }
#main_visual .mv_slick .con .bg { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: url(/image/main/mv_bg1.jpg) no-repeat center/cover; }
#main_visual .mv_slick .con .bg iframe,
#main_visual .mv_slick .con .bg video { position: absolute; top: 50%; left: 50%; width: 177.77vh; height: 100vh; min-width: 100vw; min-height: 56.25vw; border: 0; object-fit: cover; pointer-events: none; }
#main_visual .mv_slick .con .bg iframe { transform: translate(-50%, -50%) scale(1.55); }
#main_visual .mv_slick .con .bg video { transform: translate(-50%, -50%); }
#main_visual .mv_slick .con .frame { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); pointer-events: none; }

#main_visual .slick-dots { z-index: 10; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; display: flex; flex-wrap: nowrap; }
#main_visual .slick-dots li { position: relative; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; margin: 0 9px; cursor: pointer; }
#main_visual .slick-dots li button { display: none; }
#main_visual .slick-dots li.slick-active { background-color: #005aa6; }

@media (max-width: 1660px) {
    #main_visual { height: calc(470px + 20vw); }
    #main_visual .mv_text .contwrap { top: 90px; height: calc(100% - 90px); }

    #main_visual .mv_text .textbox .morebtn { max-width: 420px; }
    #main_visual .mv_text .textbox .morebtn a { padding: 15px 5px; }
}
@media (max-width: 1440px) {
    #main_visual { height: calc(350px + 17vw); }
    #main_visual .mv_text .contwrap { top: 80px; height: calc(100% - 80px); width: 100%;}
    #main_visual .mv_text .textbox .text1 {text-align: center;}
    #main_visual .mv_text .textbox .text2 { margin-top: 11px;  text-align: center;}
    #main_visual .mv_text .textbox .text3 { margin-top: 15px; }
    #main_visual .mv_text .textbox a {text-align: center;}
    #main_visual .mv_text .textbox a::after {display: none;}
}
@media (max-width: 1279px) {
    #main_visual { max-height: calc(100vh - 70px); }

    #main_visual .mv_text .textbox .text2 { margin-top: 10px; }
    #main_visual .mv_text .textbox .text3 { margin-top: 13px; }
    #main_visual .mv_text .textbox .morebtn { max-width: 300px; font-weight: 500; }
    #main_visual .mv_text .textbox .morebtn a { padding: 10px 5px; }

    #main_visual .slick-dots { bottom: 12px; }
    #main_visual .slick-dots li { width: 12px; height: 12px; margin: 0 6px; }
}
@media (max-width: 1023px) {
    #main_visual { max-height: calc(100vh - 60px); }
    #main_visual .mv_text .contwrap { top: 60px; height: calc(100% - 60px); }
}
@media (max-width: 767px) {
    #main_visual .mv_text .textbox { text-align: center; }
    #main_visual .mv_text .textbox .text1 br { display: inline-block; }
    #main_visual .mv_text .textbox .text2 { margin-top: 10px; }
    #main_visual .mv_text .textbox .text2 br { display: inline-block; }
    #main_visual .mv_text .textbox .text3 { margin-top: 10px; }
    #main_visual .mv_text .textbox .morebtn { position: relative; left: 50%; transform: translateX(-50%); max-width: 260px; }
    #main_visual .mv_text .textbox .morebtn a { padding: 9px 5px; }
}

/* title_wrap */
.title_wrap { text-align: center; }
.title_wrap > p:first-child { font-size: 18px; font-weight: 400; color: #777777; text-transform: uppercase; }
.title_wrap h3 { margin-top: 12px; font-size: 47px; font-weight: 700; color: #000000; letter-spacing: -0.04em; line-height: 1.3; }
.title_wrap h3 + p { margin-top: 14px; font-size: 18px; font-weight: 400; color: #777777; line-height: 1.5; }

/* main_service */
#main_service { position: relative; padding: 110px 0 90px; background-color: #f6f6f6; }
#main_service .item_wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; }
#main_service .item { display: flex; flex-direction: column; background-color: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); padding: 16px 16px 24px; transition: transform 0.3s, box-shadow 0.3s; }
#main_service .item:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1); }
#main_service .item img { display: block; width: 100%; height: 168px; object-fit: cover; border-radius: 12px; background-color: #eaeaea; }
#main_service .item .text_box { display: flex; flex-direction: column; flex: 1; padding: 20px 6px 0; }
#main_service .item .text_box > p:first-child { font-size: 16px; font-weight: 400; color: #666666; line-height: 1.4; }
#main_service .item .text_box strong { display: block; margin-top: 8px; font-size: 24px; font-weight: 700; color: #111; letter-spacing: -0.03em; }
#main_service .item .text_box strong + p { margin-top: 10px; font-size: 16px; font-weight: 400; color: #888; line-height: 1.65; }
#main_service .item .tag_wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
#main_service .item .tag { padding: 7px 12px; background-color: #e2e2e2; border-radius: 20px; font-size: 15px; font-weight: 400; color: #777; line-height: 1; }
#main_service > a { display: block; width: fit-content; margin: 50px auto 0; padding: 16px 42px; background-color: #fff; border: 1px solid #111; border-radius: 50px; font-size: 16px; font-weight: 500; color: #111; line-height: 1; transition: background-color 0.25s, color 0.25s; }
#main_service > a::after { content: "\f105"; font-family: FontAwesome; margin-left: 8px; }
#main_service > a:hover { background-color: #111; color: #fff; }

/* main_project */
#main_project { position: relative; padding: 40px 0 110px;}
#main_project .project_wrap { display: grid; grid-template-columns: 1fr 1fr; margin-top: 50px; }
#main_project .project_item { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 300px; padding: 48px 42px; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
#main_project .project_item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#main_project .project_item:nth-child(1) { background-image: url(/image/main/project1.jpg); }
#main_project .project_item:nth-child(2) { background-image: url(/image/main/project2.jpg); }
#main_project .project_item > * { position: relative; z-index: 1; }
#main_project .project_item > p:first-child { display: inline-block; width: fit-content; padding: 7px 14px; background-color: #111; border-radius: 20px; font-size: 23px; font-weight: 500; color: #fff; line-height: 1; }
#main_project .project_item strong { display: block; margin-top: 16px; font-size: 47px; font-weight: 700; color: #111; letter-spacing: -0.04em; line-height: 1.3; }
#main_project .project_item strong + p { margin-top: 12px; font-size: 20px; font-weight: 400; color: #000000; line-height: 1.5; }
#main_project .project_item:last-child strong + p { color: #111; }
#main_project .project_item:last-child strong + p::after { content: " >"; }

/* main_news */
#main_news { position: relative; padding: 40px 0 110px; background-color: #fff; }

/* main_contect */
#main_contect { position: relative; padding: 0; }

@media (max-width: 1440px) {
    .title_wrap h3 { font-size: 36px; }

    #main_service { padding: 90px 0 80px; }
    #main_service .item img { height: 150px; }
    #main_service .item .text_box strong { font-size: 20px; }

    #main_project { padding: 30px 0 90px; }
    #main_project .project_item { min-height: 260px; padding: 40px 32px; }
    #main_project .project_item strong { font-size: 28px; }
}
@media (max-width: 1279px) {
    .title_wrap h3 { font-size: 32px; }
    .title_wrap h3 + p { font-size: 15px; }

    #main_service .item_wrap { gap: 14px; }
    #main_service .item { padding: 12px 12px 20px; border-radius: 14px; }
    #main_service .item img { height: 130px; }
    #main_service .item .text_box { padding-top: 16px; }
    #main_service .item .text_box strong { font-size: 18px; }
    #main_service .item .text_box strong + p { font-size: 13px; }
    #main_service > a { padding: 14px 36px; font-size: 15px; }

    #main_project .project_item { min-height: 230px; padding: 32px 26px;}
    #main_project .project_item strong { font-size: 24px; }
}
@media (max-width: 1023px) {
    .title_wrap h3 { font-size: 28px; }

    #main_service { padding: 70px 0 60px; }
    #main_service .item_wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
    #main_service .item img { height: 180px; }
    #main_service > a { margin-top: 36px; }

    #main_project { padding: 20px 0 70px; }
    #main_project .project_wrap { margin-top: 36px; }
    #main_project .project_item { min-height: 220px; }
}
@media (max-width: 767px) {
    .title_wrap > p:first-child { font-size: 12px; }
    .title_wrap h3 { font-size: 24px; margin-top: 8px; }
    .title_wrap h3 + p { font-size: 14px; margin-top: 10px; }

    #main_service { padding: 60px 0 50px; }
    #main_service .item_wrap { grid-template-columns: 1fr; gap: 14px; }
    #main_service .item img { height: 200px; }
    #main_service .item .text_box strong { font-size: 20px; }
    #main_service > a { padding: 13px 32px; font-size: 14px; margin-top: 28px; }

    #main_project { padding: 10px 0 60px; }
    #main_project .project_wrap { grid-template-columns: 1fr; }
    #main_project .project_item { min-height: 210px; padding: 32px 24px; }
    #main_project .project_item strong { font-size: 22px; margin-top: 12px; }
}