@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");

@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {

    --main-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* 컨텐츠 너비 */
    --containerV1-width: 1600;

    --main-color: #c31515;
    /* mainColor */
    --basic-border-color: #c31515;
    /* 게시판 및 게시판헤드 등 기타 버튼들 border 컬러 */

    --h-height: 100px;
    /* head 높이값 */
    --header-full-H: 430;
    /* 서브메뉴 배경일때 높이값 */

    --h-Add: 40;
    /* head_add 높이값 */
}


/* reset */
@media all {
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }

    html::-webkit-scrollbar {
        width: 20px;
        background: #eee;
    }

    html::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 40px;
        background-clip: padding-box;
        border: 4px solid transparent;
    }

    html::-webkit-scrollbar-track {
        box-shadow: inset 0px 0px 5px white;
    }

    * {
        margin: 0;
        padding: 0;
        outline: none;
        box-sizing: border-box;
    }

    body {
        line-height: 1;
        font-size: 14px;
        font-weight: 400;
        color: #000;
        word-wrap: break-word;
        word-break: keep-all;
        font-family: var(--main-font) !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        line-height: 1;
        font-size: 1em;
        font-family: var(--main-font) !important;
    }

    ul,
    ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    a {
        outline: 0;
        text-decoration: none;
        color: #000;
        font-family: var(--main-font) !important;
    }

    a:focus {
        outline: none;
    }

    figure,
    dl,
    dd,
    input[type=radio],
    input[type=checkbox] {
        margin: 0;
        padding: 0;
    }

    img {
        border: none;
        outline: none;
        max-width: 100%;
    }

    p {
        margin: 0;
        padding: 0;
        word-wrap: break-word;
        word-break: keep-all;
    }

    button,
    input,
    submit {
        border: none;
        background: none;
    }

    dt {
        font-weight: normal;
    }

    ::placeholder {
        font-family: var(--main-font) !important;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-transition: background-color 9999s ease-out;
        box-shadow: none !important;
        -webkit-text-fill-color: none !important;
    }
}

/* 탭 초기화 */
.tabBox1 .nav {
    border: none;
}

.tabBox1 .nav>li {
    margin: 0;
    float: none;
}

.tabBox1 .nav>li>a {
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: 0;
}

.tabBox1 .nav>li:hover>a {
    background: none;
}

.tabBox1 .nav>li.active>a {
    border: none;
    background: none;
}


/* container */
.containerV1 {
    width: 100%;
    margin: 0 auto;
    max-width: calc(var(--containerV1-width) * 1px);
}

@media (max-width:1630px) {
    .containerV1 {
        padding: 0 15px;
    }
}

/* spliting */
main .char {
    display: inline-block;
    /* animation-delay: calc(0.25s + var(--char-index) * 0.1s); */
    transition: transform 1s calc(var(--char-index) * 0.05s),
        opacity 1s calc(var(--char-index) * 0.05s);
}

main .sec_frame .titleBox .char {
    opacity: 0;
    transform: translateY(20%);
}

main .sec_frame .titleBox.scr .char {
    opacity: 1;
    transform: translateY(0);
}


/* 게시판 글 없을 때 */
.post-none {
    font-size: 16px;
}

/* 개별 폰트 */
.NanumS {
    font-family: 'NanumSquare', sans-serif !important;
}

.S-CoreD {
    font-family: 'S-CoreDream-3Light', sans-serif !important;
}

.Nexon-V2 {
    font-family: 'NEXON Lv2 Gothic', sans-serif !important;
}

.Ptd {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

@media (max-width: 991px) {
    .responsive .wrapper {
        overflow: unset;
    }
}

/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
@media all {
    #header {
        --menu-font-color: #424242;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: var(--h-height);
        z-index: 1000;
        transition: 0.4s;
        background: transparent;
        /* mix-blend-mode: difference; */
    }

    #header>.containerV1 {
        height: 100%;
        max-width: 1800px;
    }

    @media (max-width: 1830px) {
        #header>.containerV1 {
            padding: 0 15px;
        }
    }


    #header .itemBox {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    #logo {
        min-width: 235px;
    }

    /* #logo .logo_1 {display: block;} */
    /* #logo .logo_2 {display: none;} */
    #logo a {
        display: flex;
        align-items: center;
    }

    /* 버튼 */
    #header .h-active_box {
        margin-left: 40px;
    }

    #header .close_btn {
        font-size: 50px;
        color: #fff;
        cursor: pointer;
    }

    #header .h-active_box .close_btn {
        display: none;
    }

    .open_btn {
        font-size: 30px;
        color: #000;
        cursor: pointer;
        padding: 0 43px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    /*main_menu---------------------------------------------------------------------------*/
    #nav {
        display: flex;
        margin-left: auto;
    }

    #nav .nav_logo {
        display: none;
    }

    #nav .nav_inner {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0 50px;
    }

    #nav .outer {
        display: flex;
        position: relative;
    }

    #nav .outer>li {
        position: relative;
        margin-left: 80px;
        height: var(--h-height);
    }

    #nav .outer>li:first-child {
        margin-left: 0;
    }

    #nav .outer>li>a {
        display: flex;
        color: var(--menu-font-color);
        font-size: 18px;
        line-height: 1.3;
        align-items: center;
        position: relative;
        transition: all 0.3s;
        font-weight: 300;
        letter-spacing: 1px;
    }

    #nav .outer>li>a>.kw_box {
        display: flex;
        align-items: baseline;
        position: relative;
    }

    #nav .outer>li>a>.kw_box h4 {
        color: var(--main-color);
        font-weight: 900;
        position: absolute;
        top: 60%;
        left: 0;
        width: 0;
        height: 100%;
        white-space: nowrap;
        background: transparent;
        z-index: 2;
        transition: 0.5s;
        overflow: hidden;
        transform: translateY(-50%);
    }

    #nav .outer>li>a>.kw_box span {
        position: relative;
        transition: 0.2s;
    }

    #nav .outer>li>a>i {
        color: var(--main-color);
        display: none;
    }

    #nav .outer>li>a>.kw_box::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 0;
        height: 100%;
        background: var(--main-color);
        right: 0;
        transition: 0.4s;
    }

}

@media (min-width: 991px) {

    #header #nav .outer {
        transition: 0.3s;
    }

    #header #nav .outer>li {
        display: flex;
        align-items: center;
    }

    #header #nav .outer>li a {
        height: 100%;
    }

    /*sub_menu---------------------------------------------------------------------------*/
    #header #nav .inner {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-60%);
        top: 90%;
        width: 12em;
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        text-align: center;
        background: #fff;
        padding: 10px 0 15px;
        border-radius: 0 0 0 15px;
        box-shadow: 1px 5px 15px -6px #333;
        height: 0;
        overflow: hidden;
    }

    #header #nav .inner>li {
        position: relative;
        color: #000;
        line-height: 1.3;
        transition: all 0.3s;
    }

    #header #nav .inner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--main-color);
    }

    #header #nav .inner>li>a {
        display: block;
        font-size: 16px;
        color: inherit;
        transition: all 0.3s;
        position: relative;
        left: 0;
        padding: 10px 15px;
    }

    #header #nav .outer>li:nth-child(1) .inner {
        z-index: 10;
    }

    #header #nav .outer>li>a>span:after {
        content: '';
        position: absolute;
        bottom: -10px;
        width: 0;
        height: 3px;
        background: #fff;
        transition: 0.4s;
        right: 0;
    }

    #header #nav .outer>li:hover>a>.kw_box h4 {
        width: 112%;
    }

    #header #nav .outer>li:hover>a>.kw_box span {
        opacity: 0;
    }

    #header #nav .outer>li>.inner>li:hover>a {
        background: var(--main-color);
        color: #000;
    }

    #header #nav .outer>li:hover .inner {
        opacity: 1;
        visibility: visible;
        z-index: 2;
        height: auto;
        transition: all 0.3s;
        transform: translateX(-50%);
    }


    /* sec1, sec4일때 */
    #header.sec_hb #logo {
        filter: brightness(10);
    }

    #header.sec_hb .open_btn {
        color: #fff;
    }

    /* 해당페이지일 때 */
    #header #nav .outer>li>a.on>span::after {
        width: 100%;
    }

    /* scroll */
    /* #header.scroll {background: rgba(0,0,0,0.1);} */
    #header.scroll #nav .outer>li>a {
        color: #000;
    }

    /* #header.scroll .open_btn {color: #000;} */
}


/*모바일에서 피씨 로고 클래스 지움.*/
#logo.logo_hide {
    opacity: 1;
    visibility: visible;
}



/*반응형-------------------------------------------------------------*/

@media (max-width: 1850px) {
    body::after {
        display: none;
    }

    #header>.containerV1 {
        padding-left: 15px;
        padding-right: 0;
    }

    #header .itemBox {
        gap: 20px;
    }

    #nav .outer>li {
        margin-left: 50px;
    }

    #nav {
        gap: 30px;
    }
}


@media (max-width: 1430px) {
    #logo {
        min-width: 200px;
    }

    #header>.containerV1 {
        padding: 0 15px;
    }

    .open_btn {
        padding: 0;
    }

    #nav {
        padding-left: 30px;
    }

    #nav .outer>li {
        margin-left: 30px;
    }

    #nav .outer>li>a {
        font-size: 15px;
    }

}


/*모바일*/
@media all and (max-width: 991px) {

    :root {
        --h-height: 70px;
    }

    #header {
        --menu-font-color: #222;
        background: rgba(0, 0, 0, 0.5);
    }

    #header .itemBox {
        justify-content: unset;
    }

    #header .h-active_box {
        margin-left: auto;
    }

    #header .open_btn {
        color: #fff;
    }


    #logo {
        width: max(160px, min(calc(200 / 768 * 100vw), 200px));
        min-width: auto;
    }

    #nav {
        display: none;
    }

    .btn_off {
        display: none;
    }

    .btn_on {
        display: block !important;
    }

    #header .close_btn {
        font-size: 30px;
    }
}


/* 사이트맵 -----------------------------------------------------------------------------*/

html.scroll-none {
    height: 100%;
    overflow: hidden;
}

#siteMap {
    font-size: min(calc(10 / 650 * 100vw), 10px);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1020;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;

    transition: 0.5s;
}

#siteMap .close_btn {
    font-size: max(20px, 6em);
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: max(10px, 0.5em);
    right: max(10px, 0.5em);
    z-index: 2;
}

#siteMap .site_menu {
    width: 100%;
    height: 100%;
}

#siteMap .site_menu .outer {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: inherit;
    height: inherit;
}

#siteMap .site_menu .outer>li {
    --transition: 0.3s;
    display: flex;
    flex-direction: column;
    color: #fff;
}

#siteMap .site_menu .outer>li .kw_box h4 {
    display: none;
}

#siteMap .site_menu .outer>li>a {
    font-family: 'Poppins', sans-serif !important;
    position: relative;
    font-size: max(20px, 3.2em);
    color: inherit;
    font-weight: 500;
    letter-spacing: 1px;
}

#siteMap .site_menu .outer>li>.inner>li {
    padding: 10px 0;
}

#siteMap .site_menu .outer>li>.inner>li>a {
    display: block;
    font-size: max(14px, 2em);
    color: inherit;
    opacity: 0.3;
    transition: var(--transition);
    font-weight: 500;
}

/* hover */
#siteMap .site_menu .outer>li>.inner>li>a:hover {
    opacity: 1;
}

/* 지도 및 info */
#siteMap .location_box {
    display: flex;
    flex-direction: column;
}

#siteMap .location_box>* {
    width: 100%;
    height: 50%;
}

#siteMap .location_box .text_box {
    display: flex;
    align-items: center;
    padding-left: 5em;
}

#siteMap .location_box .text_box ul {
    display: flex;
    flex-direction: column;
    gap: max(20px, 3em);
}

#siteMap .location_box .text_box ul>li h4 {
    color: rgba(255, 255, 255, 0.3);
    font-size: max(14px, 1.8em);
    font-weight: 300;
}

#siteMap .location_box .text_box ul>li p {
    color: #fff;
    font-weight: 500;
    font-size: max(15px, 2em);
    line-height: 1.3;
    margin-top: 0.5em;
}

/* #siteMap .location_box .map_frame {height: 50%;} */
#siteMap .location_box .map_frame .root_daum_roughmap {
    width: 100% !important;
    height: 100% !important;
}

#siteMap .location_box .root_daum_roughmap_landing {
    width: 100% !important;
}

#siteMap .location_box .map_frame .root_daum_roughmap .wrap_map {
    height: 100% !important;
}




@media (min-width: 992px) {
    #header.menu_active .logo_1 {}

    #siteMap .siteMap_wrap {
        font-size: min(calc(10 / 1200 * 100vw), 10px);
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    #siteMap .site_menu .outer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3em;
    }

    #siteMap .site_menu .outer>li {
        padding-left: 10em;
        transform: translateY(-5%);
        opacity: 0;
    }

    #siteMap .site_menu .outer>li>a {
        font-size: 7em;
        font-weight: 700;
        letter-spacing: 1px;
        transition: var(--transition);
        width: fit-content;
    }

    #siteMap .site_menu .outer>li>.inner {
        display: none;
    }

    #siteMap .site_menu .outer>li>a>i {
        display: none;
    }

    /* hover */
    #siteMap .site_menu .outer>li>a:hover {
        color: var(--main-color);
    }
}


/*모바일*/
@media (max-width: 991px) {

    /* menu 클릭시 header 효과 */
    #header.menu_active {
        background: var(--main-color);
    }

    #header.menu_active .logo_1 {
        filter: brightness(100);
    }

    /* #header.menu_active .logo_2 {display: none !important;} */
    #header.menu_active .langBox {
        --color: #fff !important;
    }

    #siteMap .close_btn {
        display: none;
    }

    #siteMap {
        overflow-y: auto;
        height: calc(100% - var(--h-height));
        top: var(--h-height);
    }

    #siteMap .siteMap_wrap {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    #siteMap .site_menu {
        height: auto;
    }

    /* #siteMap .siteMap_wrap > * {width: 50%;} */

    #siteMap .site_menu .outer {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 20px 20px 0;
        transform: translateY(-5%);
        transition: 0.3s;
    }

    #siteMap .site_menu .outer>li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding: max(15px, 2em) 0;
    }

    #siteMap .site_menu .outer>li>a {
        display: flex;
        justify-content: space-between;
        font-size: max(20px, 2.5em);
    }

    #siteMap .site_menu .outer>li>a>i {
        transition: 0.3s;
    }

    #siteMap .site_menu .outer>li>.inner {
        height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
    }

    #siteMap .site_menu .outer>li>.inner>li>a {
        font-size: 20px;
    }

    /* 메뉴 클릭 시 */
    #siteMap .site_menu .outer>li.on_sub>.inner {
        padding-top: 20px;
        transition: 0.3s;
        height: auto;
        opacity: 1;
        visibility: visible;
    }

    #siteMap .site_menu .outer>li.on_sub>a>i {
        transform: rotate(180deg);
    }

    #siteMap .location_box {
        width: 100%;
    }

    #siteMap .location_box .text_box {
        padding: 20px;
        height: auto;
    }

    #siteMap .location_box .text_box ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: max(10px, 2em);
    }

    /* #siteMap .location_box .map_frame {position: absolute; left: 0; bottom: 0; width: 100%; height: 40%;} */
    #siteMap .location_box .map_frame {
        height: 100%;
        display: none;
    }

}

@media (max-width: 500px) {
    #siteMap .location_box .text_box ul {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* active */
#siteMap.inactive {
    opacity: 1;
    visibility: visible;
}

#siteMap.inactive .outer {
    transform: translateY(0);
}

@media (min-width: 992px) {
    #siteMap.inactive .outer>li {
        transform: translateY(0%);
        opacity: 1;
    }
}


/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/
/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
.wrapper {
    background: transparent !important;
}

main {
    --sec1-mh: 450;

    position: relative;
}

main .sec_frame {
    font-size: min(calc(10 / 600 * 100vw), 10px);
}

main .sec_frame .sub {
    font-size: max(16px, 3em);
    line-height: 1.3;
    color: #434343;
    margin-bottom: 5px;
    text-transform: uppercase;
}

main .sec_frame .title-V1 {
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3;
    color: #000;
}


/* 버튼 시작 */
main .sec_frame .item_btn {
    --transition1: 0.4s;
    --transition2: 0.6s;
    --delay: 0.2s;
    width: 100%;
    max-width: 19.5em;
    height: 6em;
    border: 1px solid #898989;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
    background: #fff;
    transition: var(--transition1);
}

main .sec_frame .item_btn p {
    font-size: max(14px, 1.6em);
    text-transform: uppercase;
    transition: var(--transition2);
    position: relative;
    z-index: 3;
}

main .sec_frame .item_btn::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    background: #fff;
    width: 2em;
    height: 2em;
    transition: var(--transition1);
}

main .sec_frame .item_btn::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: var(--main-color);
    width: 0;
    height: 100%;
    transition: var(--transition2);
}

main .sec_frame .item_btn .fl {
    position: absolute;
    width: 2em;
    height: 2em;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
    transform: translate(-50%, -50%);
}

main .sec_frame .item_btn .fl::before,
main .sec_frame .item_btn .fl::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--main-color);
    transition: var(--transition1);
}

main .sec_frame .item_btn .fl::before {
    width: 100%;
    height: 2px;
}

main .sec_frame .item_btn .fl::after {
    width: 2px;
    height: 100%;
}

@media (min-width: 992px) {
    main .sec_frame .item_btn:hover {
        border-color: var(--main-color);
    }

    main .sec_frame .item_btn:hover:after {
        width: 100%;
        transition-delay: var(--delay);
    }

    main .sec_frame .item_btn:hover:before {
        width: 0;
        height: 0;
    }

    main .sec_frame .item_btn:hover p {
        color: #fff;
        transition-delay: var(--delay);
    }

    main .sec_frame .item_btn:hover .fl:before {
        left: 100%;
        opacity: 0;
    }

    main .sec_frame .item_btn:hover .fl:after {
        top: 100%;
        opacity: 0;
    }
}

/* 버튼 끝 */



/* 베너 */
main .main_banner {
    padding-top: calc(var(--h-height) + 40px);
    height: fit-content;
    font-size: min(calc(10 / 1920 * 100vw), 10px);
}

/* padding-bottom: 45em; */
main .main_banner .banner_wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

main .main_banner .video_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

main .main_banner .video_bg video {
    width: 100%;
}

main .main_banner .video_bg video.pc-video {
    display: block;
}

main .main_banner .video_bg video.mob-video {
    display: none;
}

main .main_banner .text_bg {
    background: #fff;
    width: 100%;
    height: 100%;
}

main .main_banner h2 {
    position: relative;
    z-index: 2;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: 50em;
    mix-blend-mode: screen;
    color: #000;
    text-align: center;
    font-weight: 900;
    /* animation: banner_moveX 300s infinite linear; */
}

main .main_banner h2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: -100%;
    background: #fff;
}

main .main_banner .pin_text {
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 55%;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 11.2em;
    mix-blend-mode: unset;
}

main .main_banner .pin_text h3 {
    opacity: 0;
    transition: 1s;
    transform: translateY(20%);
    font-weight: 900;
}

main .main_banner .pin_text h3.active {
    opacity: 1;
    transition-delay: 0.5s;
    transform: translateY(0%);
}


@media (min-width: 992px) {
    main .main_banner .text_bg .text {
        display: none;
    }
}

@media (min-width: 1921px) {
    main .main_banner h2 {
        font-size: 34vw;
    }

    main .main_banner .pin_text {
        font-size: 5vw;
    }
}


@media (max-width: 991px) {
    main .main_banner {
        --font-color: var(--main-color);
        font-size: min(calc(10 / 500 * 100vw), 10px);
        padding-top: 0;
        height: calc(var(--vh, 1vh) * 100);
        position: relative;
        text-align: center;
    }

    main .main_banner .banner_wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    main .main_banner .banner_wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    main .main_banner .video_bg {
        object-fit: unset;
    }

    main .main_banner .video_bg video {
        min-width: 177.77vh;
    }

    main .main_banner .video_bg video.pc-video {
        display: none;
    }

    main .main_banner .video_bg video.mob-video {
        display: block;
    }

    main .main_banner .text_bg {
        position: relative;
        z-index: 11;
        background: transparent;
        width: fit-content;
        height: auto;
    }

    main .main_banner h2 {
        background: unset;
        mix-blend-mode: unset;
        height: auto;
        color: var(--font-color);
        font-size: 18em;
    }

    main .main_banner h2::after {
        display: none;
    }

    main .main_banner .text_bg .text {
        position: relative;
        font-size: 5.4em;
        color: #fff;
        font-weight: bold;
        z-index: 1;
        letter-spacing: 3px;
        height: auto;
        text-transform: uppercase;
        transform: translateY(-20px);
    }

    main .main_banner .sub_banner_wrap {
        display: none;
    }
}


/* sec1 */
main .sec1 {
    position: relative;
    height: auto;
    padding-bottom: 10em;
}

main .sec1 .sec_bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: #fff;
    transition: 1s;
    width: 100%;
    height: 100%;
}

/* 배경색 변경 */
.bgb {
    background: #000 !important;
}

main .sec1 .containerV1 {
    height: 100%;
    position: relative;
    z-index: 2;
}

main .sec1 .titleBox {
    color: #000;
    z-index: 2;
    transition: 1s;
}

/* main .sec1 .text_wrap {padding: 40em 0 20em;} */
main .sec1 .text_wrap {
    padding: 40em 0 10em;
}

main .sec1 .titleBox {
    opacity: 0;
    transform: translateY(30%);
}

main .sec1 .titleBox .sub {
    color: inherit;
    font-size: 4em;
    margin-bottom: 0.25em;
}

main .sec1 .titleBox .title-V1 {
    color: inherit;
    font-weight: normal;
}

/* active */
main .sec1 .titleBox.active {
    color: #fff;
}

main .sec1 .map_wrap {
    width: 100%;
    height: 70em;
}

main .sec1 .map_box {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    transition: 1s;
    opacity: 0;
    transform: translateY(30%);
    visibility: hidden;
}

/* main .sec1 .map_box::before {
    content:''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 2;
} */

/* main .sec1 .map_box .root_daum_roughmap {filter: grayscale(1);} */
main .sec1 .map_box .root_daum_roughmap {
    width: 100% !important;
    height: 100% !important;
}

main .sec1 .map_box .root_daum_roughmap .wrap_map {
    height: 100% !important;
}

main .sec1 .map_box #map {
    height: 100% !important;
}

/* active */
main .sec1 .map_box.map_active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}


@media (min-width: 991px) {
    /* main .sec1 .map_wrap {height: 100vh;} */
    /* main .sec1 .map_box {opacity: 0; transform: translateY(30%);} */
    /* main .sec1 .map_box {
        transform: scale(0.2); opacity: 0;
    } */
}



@media (max-width: 1200px) {
    main .sec1 .titleBox br {
        display: none;
    }
}

@media (max-width: 991px) {
    main .sec1 {
        padding: 0 0 10em;
    }

    main .sec1 .text_wrap {
        padding: 20em 0 10em;
    }

    main .sec1 .map_wrap {
        height: 60em;
        margin: 0 auto;
    }

    main .sec1 .map_box {
        width: 90%;
        transform: translateY(10%);
    }

    main .sec1 .titleBox .sub {
        font-size: 3em;
    }

    main .sec1 .titleBox .title-V1 {
        font-size: 4em;
    }
}



/* sec2 */
main .sec2 {
    padding: 20em 0 16em;
    height: auto;
    overflow: hidden;
}

main .sec2 .containerV1 {
    position: relative;
}

main .sec2 .containerV1>* {
    z-index: 2;
}

main .sec2 .svg_bg {
    font-size: min(calc(10 / 1920 * 100vw), 10px);
    position: absolute;
    left: 0;
    top: 53%;
    transform: translateY(-50%);
    z-index: 1;
    width: 193.6em;
    height: 88em;
}

main .sec2 .svg_bg svg {
    width: 100%;
    height: 100%;
}

main .sec2 .svg_bg svg .st0 {
    fill: none;
    stroke: #e5e5e5;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

main .sec2 .svg_bg svg .st0.draw {
    animation: draw 10s ease-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}


main .sec2 .titleBox {
    margin-bottom: 3em;
}

main .sec2 .itemBox {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 1065px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(39em, auto);
}

main .sec2 .itemBox .item {
    border: 1px solid #c9c9c9;
    padding: 6em 1.5em 6em 4.5em;
    display: flex;
    flex-direction: column;
    gap: 4em;

    transition: 0.3s;
}

main .sec2 .itemBox .item .img {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4f4f4;
    width: 8.3em;
    height: 8.3em;
}

main .sec2 .itemBox .item .img img {
    width: 4.6em;
}

main .sec2 .itemBox .item .text_box>h3 {
    color: var(--main-color);
    font-weight: bold;
    font-size: 3em;
    margin-bottom: 0.7em;
}

main .sec2 .itemBox .item .text_box>p {
    font-size: max(14px, 1.8em);
    line-height: 1.4;
    transition: 0.3s;
}

main .sec2 .itemBox .item .text_box>p.text1 {
    color: #434343;
    margin-bottom: 0.7em;
}

main .sec2 .itemBox .item .text_box>p.text2 {
    color: #000;
    font-weight: bold;
}

/* animation */
main .sec2 .titleBox .char {
    transition: transform 1s calc(var(--char-index) * 0.03s),
        opacity 1s calc(var(--char-index) * 0.03s);
}


@media (min-width: 992px) {
    main .sec2 .itemBox {
        margin-left: auto;
    }

    main .sec2 .itemBox::before {
        content: '';
        position: relative;
    }

    main .sec2 .itemBox .item1 {
        border-bottom: none;
    }

    main .sec2 .itemBox .item2 {
        border-right: none;
    }

    main .sec2 .itemBox>.item:hover {
        background: rgba(0, 0, 0, 0.9);
    }

    main .sec2 .itemBox>.item:hover .text_box>p.text1 {
        color: #fff;
    }

    main .sec2 .itemBox>.item:hover .text_box>p.text2 {
        color: #fff;
    }
}

@media (min-width: 1200px) {
    main .sec2 .titleBox {
        position: absolute;
        top: 50px;
        left: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 1550px) {
    main .sec2 .titleBox {
        left: 15px;
    }
}

@media (max-width: 1330px) {
    main .sec2 .titleBox {
        top: 10px;
        left: 20px;
        max-width: 515px;
        width: 100%;
    }

    main .sec2 .svg_bg {
        top: 33%;
    }
}

@media (max-width: 991px) {
    main .sec2 .titleBox {
        margin-bottom: 7em;
        position: relative;
        left: 0;
    }

    main .sec2 .itemBox {
        grid-template-columns: repeat(1, 1fr);
        gap: 6em;
    }

    main .sec2 .itemBox .item {
        width: 100%;
        max-width: 530px;
    }

    main .sec2 .itemBox .item:nth-child(odd) {
        justify-self: end;
    }

    main .sec2 .svg_bg {
        top: 20%;
        font-size: min(calc(10 / 991 * 100vw), 10px);
        left: 50%;
        transform: translate(-50%, -50%);
    }

    main .sec2 .svg_bg svg .st0.draw {
        animation: draw 5s ease-out forwards;
    }
}

@media (max-width: 600px) {
    main .sec2 .titleBox {
        font-size: min(calc(10 / 600 * 100vw), 10px);
    }

    main .sec2 .itemBox .item {
        padding: 6em 3em;
    }

    main .sec2 .itemBox .item br {
        display: none;
    }

    main .sec2 .svg_bg {
        top: 0;
    }

    main .sec2 .svg_bg svg .st0.draw {
        animation: draw 1s ease-out forwards;
    }
}



/* sec3 */
main .sec3 {
    padding: 9em 0 11.3em;
    height: auto;
}

main .sec3 .top_itemBox {
    padding-bottom: 3.3em;
    border-bottom: 1px solid #c9c9c9;
    margin-bottom: 10em;
    display: flex;
    justify-content: space-between;
}

/* animation */
main .sec3 .titleBox>* {
    opacity: 0;
    transform: translateY(20%);
    transition-duration: 0.8s;
}

main .sec3 .titleBox>h4 {
    transition-delay: 0.2s;
}

main .sec3 .titleBox>h2 {
    transition-delay: 0.4s;
}

main .sec3 .titleBox.scr>* {
    opacity: 1;
    transform: translateY(0);
}

main .sec3 .item_btn {
    opacity: 0;
    transform: translateY(10%);
    --transition1: 0.8s 0.2s;
}

main .sec3 .item_btn.scr {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 900px) {
    main .sec3 .top_itemBox {
        flex-direction: column;
        gap: 6em;
    }

    main .sec_frame .item_btn {
        align-self: end;
    }
}




/* sec4 */
main .sec4 {
    padding: 13.8em 0 20em;
    height: auto;
    overflow: hidden;
    position: relative;
    background: url(../img/sec4_bg.jpg) no-repeat center center / cover;
}

main .sec4 .itemBox {
    position: relative;
    display: flex;
    padding: 4.5em 0 5em;
    align-items: center;
    justify-content: space-between;
}

main .sec4 .itemBox .titleBox {
    color: #fff;
}

main .sec4 .itemBox .titleBox>h2.title-V1 {
    color: inherit;
    margin-bottom: 0.25em;
}

main .sec4 .itemBox .titleBox>p.text1 {
    font-size: max(14px, 1.8em);
    line-height: 1.4;
    color: inherit;
}

main .sec4 .itemBox .contact_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21em;
    height: 21em;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    transition: 0.3s;
}

main .sec4 .itemBox .contact_btn .circle_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/sec4_btn_circle.png) no-repeat center center / cover;

    animation: crc_rotate 15s infinite linear;
    transition: 0.3s;
}

main .sec4 .itemBox .contact_btn img {
    width: 11.8em;
    z-index: 2;
    transition: 0.3s;
}

main .sec4 .text_bg {
    font-size: 21em;
    font-weight: bold;
    color: #fff;
    opacity: 25%;
    position: absolute;
    left: 50%;
    bottom: -0.15em;
    transform: translateX(-50%);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 15px;
    cursor: default;
    max-width: 1454px;
    overflow: hidden;
}


@keyframes crc_rotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


@media (min-width: 992px) {
    main .sec4 .itemBox .contact_btn:hover {
        background: #000;
    }

    main .sec4 .itemBox .contact_btn:hover .circle_bg {
        width: 93%;
        height: 93%;
    }

    main .sec4 .itemBox .contact_btn:hover img {
        width: 9em;
    }
}



@media (max-width: 1430px) {
    main .sec4 .text_bg {
        max-width: unset;
        animation: text_bg_move 80s infinite linear;
    }

    /* 슬로건 애니메이션*/
    @keyframes text_bg_move {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-200%);
        }
    }
}

@media (max-width: 1130px) {
    main .sec4 .itemBox {
        flex-direction: column;
        gap: 5em;
    }

    main .sec4 .itemBox .titleBox {
        text-align: center;
    }
}

@media (max-width: 650px) {
    main .sec4 .itemBox .titleBox>h2.title-V1 {
        font-size: 4em;
    }

    /* main .sec4 .itemBox .contact_btn {background: #000;}
    main .sec4 .itemBox .contact_btn .circle_bg {width: 93%; height: 93%;}
    main .sec4 .itemBox .contact_btn img {width: 9em;} */
}





/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
footer {
    --ft-f-color: #fff;
    font-size: min(calc(10 / 500 * 100vw), 10px);
    background: #2e2e2e;
}

footer .containerV1 {
    max-width: 1400px;
}

@media (max-width: 1430px) {
    footer .containerV1 {
        padding: 0 15px;
    }
}


footer .contents {
    display: flex;
    width: 100%;
    padding: 11em 0 7em;
}

footer .contents .item_title {
    font-size: max(14px, 1.6em);
    color: var(--ft-f-color);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1.5625em;
    letter-spacing: 1px;
    margin-top: 1em;
}

footer .item1 {
    display: flex;
    flex-direction: column;
    letter-spacing: 1px;
    gap: 5em;
}

footer .item1>h1 a {
    font-size: 3.5em;
    color: var(--ft-f-color);
    white-space: nowrap;
    font-weight: bold;
}

footer .item1>h1 p {
    font-size: 1.8em;
    color: var(--ft-f-color);
    line-height: 1.2;
    margin-top: 5px;
    font-weight: bold;
}

footer .item1>.company_txt p {
    font-size: max(14px, 1.6em);
    color: #d9d9d9;
    line-height: 1.6;
}

footer .item1>.company_txt p:not(:last-child) {
    margin-bottom: 1.8em;
}

footer .item2 {
    width: 100%;
    max-width: 465px;
}

footer .item2>.list {
    display: flex;
    flex-direction: column;
}

footer .item2>.list>li {
    border: 1px solid #c9c9c9;
    border-right: none;
    border-left: none;
}

footer .item2>.list>li:not(:last-child) {
    border-bottom: none;
}

footer .item2>.list>li a {
    color: var(--ft-f-color);
    padding: 1.5625em 3.125em 1.5625em 2.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: max(13px, 1.6em);
    line-height: 1.2;

    transition: 0.2s;
}

footer .item2>.list>li a i {
    font-size: 1.5em;
}

footer .item3>div {
    line-height: 1.4;
    font-size: max(13px, 1.6em);
    color: var(--ft-f-color);
    margin-bottom: 5px;
}

footer .item3>div a {
    color: inherit;
}

footer .item3>.text>span {
    position: relative;
    font-weight: inherit;
}

footer .item3>.text>span:not(:last-child) {
    margin-right: 0.8em;
}

footer .item3>.text>span:not(:last-child):after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 1em;
    background: var(--ft-f-color);
}

footer .item3>.copy {
    text-transform: uppercase;
    color: var(--ft-f-color);
    font-size: max(13px, 1.6em);
    margin-top: 3em;
}

footer .item3>.copy a {
    color: inherit;
}

@media (min-width: 992px) {
    footer .item2>.list>li:hover a {
        color: #fff;
        transform: translateX(2%);
    }

    footer .item1 {
        padding-right: 6em;
    }

    footer .item2 {
        padding-right: 5em;
    }
}

@media (max-width: 1430px) {
    footer .contents {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4em 0;
    }

    footer .item1 {
        width: 100%;
    }

    footer .item1 .company_txt {
        max-width: 495px;
        width: 100%;
    }

    footer .item1>.company_txt p br {
        display: none;
    }

    footer .item2 {
        max-width: 100%;
    }
}


@media (max-width:991px) {
    footer .contents {
        display: flex;
        flex-direction: column;
        padding: 6em 0;
    }

    footer .item1 .company_txt {
        display: none;
    }

    footer .item1>.copy {
        display: block;
    }

    footer .item2 {
        display: none;
    }
}

/*--------------------------------------------------- 푸터세팅 끝 ------------------------------------------------------------*/


/* quickmenu */
#quick_menu {
    font-size: min(calc(10 / 550 * 100vw), 10px);
    position: fixed;
    bottom: 40%;
    right: max(10px, 2em);
    z-index: 1000;
    transition: 0.3s;
}

#quick_menu .quick_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#quick_menu .quick_list>li {
    --size: max(50px, 7em);
    border-radius: 15px;
    background: var(--main-color);
    position: relative;
    width: var(--size);
    height: var(--size);
    transition: 0.3s;
}

#quick_menu .quick_list>li i {
    font-size: 2.5em;
    color: #fff;
}

#quick_menu .quick_list>li img {
    width: 4em;
}

#quick_menu .quick_list>li.kakao {
    background: #fae100;
}

#quick_menu .quick_list>li .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 7px;
}

#quick_menu .quick_list>li .item span {
    font-size: 12px;
    color: #fff;
    line-height: 1.2;
    font-weight: 500;
}

#quick_menu .quick_list>li:nth-child(even) .item>span {
    color: var(--main-color);
}

/* sns */
#quick_menu .quick_list>li.sns_box {
    cursor: pointer;
}

#quick_menu .quick_list>li .sns_hover {
    position: absolute;
    top: 50%;
    left: -160%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: var(--main-color);
    padding: 2em 1.7em 2em;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 20em;
    overflow: hidden;

    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
}

#quick_menu .quick_list>li .sns_hover::before {
    content: '';
    position: absolute;
    top: -41%;
    left: -79%;
    width: 150%;
    height: 100%;
    background: #111;
    z-index: 1;
    transform: rotate(-40deg);
}

#quick_menu .quick_list>li .sns_hover>a {
    color: #fff;
    font-size: 1.6em;
    line-height: 1.5;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

#quick_menu .quick_list>li .sns_hover>a b {
    font-size: 1.2em;
}


/* close */
#quick_menu .quick_list>li:last-child {
    border: 1px solid #fff;
}

#quick_menu .quick_list>li .close_quick {
    cursor: pointer;
}

#quick_menu .quick_list>li .close_quick>span {
    font-size: max(12px, 1.6em);
    font-weight: bold;
    letter-spacing: 1px;
}

#quick_menu .quick_list>li .close_quick .show_bn {
    display: none;
}


/* active */
#quick_menu.quick_none {
    bottom: 15px;
    height: var(--size);
    overflow: hidden;
}

#quick_menu.quick_none .quick_list>li:not(:last-child) {
    display: none;
}

#quick_menu.quick_none .quick_list>li .close_quick .show_bn {
    display: block;
}

#quick_menu.quick_none .quick_list>li .close_quick .hide_bn {
    display: none;
}

#quick_menu .quick_list>li.sns_box:hover .sns_hover {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 992px) {
    #quick_menu .quick_list>li:last-child {
        display: none;
    }
}

@media (max-width: 768px) {

    /* #quick_menu .quick_list > li > .item > img {width: 3rem;} */
    #quick_menu {
        right: 10px;
    }

}

/* 퀵메뉴 끝 */

/* 서브페이지 패딩 */
.sub_wrap {
    margin: 20px 0 80px;
    min-height: 70vh;
}


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn-primary {
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
}

.btn-primary:hover {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.bg-primary {
    border: 1px solid var(--main-color);
    background-color: var(--main-color) !important;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.border-color,
i.border-color,
img.border-color {
    border-color: var(--basic-border-color);
}


/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal {
    z-index: 9999;
}

.modal-backdrop {
    z-index: 9998;
}

/*modal*/
.modal-backdrop {
    z-index: 2000;
}

.modal {
    z-index: 2001;
}

#myModal .modal-body {
    height: 400px;
    position: relative;
}

#myModal .modal-body>* {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 15px 30px;
    overflow-y: auto;
    height: 400px;
}

#myModal .modal-title {
    font-size: var(--font-size5, max(15px, 2rem));
    color: #000;
}



#style-switcher .widget-setup {
    top: 155px !important;
}

#fviewcomment #wr_content {
    resize: auto !important;
}