@charset "utf-8";

/* all */
.inner {position: relative; width: 100%; max-width: 1640px; margin: 0 auto;
    @media (width <= 1640px) {width: calc(100% - 40px);}
}

/* header */
header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99;
    & .header-pop {position: relative; background-color: #000; background-image: url("/assets/site/img/common/header-pop-bg01.png"); background-repeat: no-repeat; background-size: cover; background-position: center;
        & .header-wrap {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1640px; margin: 0 auto; padding: 12px 0;}
        & .header-wrap .con {display: flex; justify-content: center; align-items: center;}
        & .header-wrap .con p {font-family: var(--key-font); font-size: 18px; margin-right: 18px; color: #9CFFA8;}
        & .header-wrap .con a {margin-right: 10px;}
        & .header-wrap .con a:last-child {margin-right: 0;}
        & .header-wrap .close {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; cursor: pointer;}
        & .header-wrap .close p {font-size: 14px; margin-right: 8px; color: #d1d1d1;}
        & .header-wrap .close i {font-size: 12px; color: #fff;}
    }
    & .header-top {border-bottom: 1px solid #eaedf4; background: #fff;
        & .header-wrap {position: relative; display: flex; align-items: center; width: 100%; max-width: 1640px; margin: 0 auto; padding: 28px 0;}
        & .header-wrap .logo {}
        & .header-wrap .logo a {display: block;}
        & .header-wrap .logo a img {height: 32px;}
        & .header-wrap .search {margin-left: 24px;}
        & .header-wrap .search .search-bar {display: flex; align-items: center; width: 340px; border: 2px solid var(--basic-color-60); padding: 0 15px; border-radius: 8px;}
        & .header-wrap .search .search-bar input[type="text"] {width: 100%; font-size: 14px; line-height: 40px; border: 0;}
        & .header-wrap .search .search-bar input[type="text"]::placeholder {color: #8B8989;}
        & .header-wrap .search .search-bar button i {font-size: 16px; line-height: 40px; cursor: pointer;}
        & .header-wrap .quick {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
        & .header-wrap .quick > ul {display: flex;}
        & .header-wrap .quick > ul li {position: relative; margin-right: 25px;}
        & .header-wrap .quick > ul li:last-child {margin-right: 0;}
        & .header-wrap .quick > ul li a {display: flex; align-items: center;}
        & .header-wrap .quick > ul li a img {display: block; padding: 5px; border: 1px solid #e8e8e8; border-radius: 7px;}
        & .header-wrap .quick > ul li:first-child a img {filter: invert(50%) sepia(34%) saturate(2819%) hue-rotate(1deg) brightness(105%) contrast(106%);}
        & .header-wrap .quick > ul li:first-child a:hover img {filter: unset; border: 1px solid #FF8000; background: #FF8000;}
        & .header-wrap .quick > ul li:last-child a img {filter: invert(51%) sepia(54%) saturate(6005%) hue-rotate(220deg) brightness(100%) contrast(92%);}
        & .header-wrap .quick > ul li:last-child a:hover img {filter: unset; border: 1px solid #6270F4; background: #6270F4;}
        & .header-wrap .quick > ul li a p {font-weight: 600; margin-left: 7px;}
        & .header-wrap .quick .hm {position: relative; display: none; width: 16px; height: 12px;}
        & .header-wrap .quick .hm span {position: absolute; width: 100%; height: 2px; border-radius: 999px; background: #292e41; transition: all 0.3s ease-out;}
        & .header-wrap .quick .hm span:nth-child(1) {top: 0; left: 50%; transform: translateX(-50%);}
        & .header-wrap .quick .hm span:nth-child(2) {top: 50%; left: 50%; transform: translate(-50%, -50%);}
        & .header-wrap .quick .hm span:nth-child(3) {top: 50%; left: 50%; transform: translate(-50%, -50%);}
        & .header-wrap .quick .hm span:nth-child(4) {bottom: 0; left: 50%; transform: translateX(-50%);}
        & .header-wrap .quick .hm.on span:nth-child(1) {width: 0; opacity: 0;}
        & .header-wrap .quick .hm.on span:nth-child(2) {transform: translate(-50%, -50%) rotate(45deg);}
        & .header-wrap .quick .hm.on span:nth-child(3) {transform: translate(-50%, -50%) rotate(-45deg);}
        & .header-wrap .quick .hm.on span:nth-child(4) {width: 0; opacity: 0;}
        & .header-wrap {
            & .nav {position: fixed; top: calc(var(--header-height) - 1px); left: 0; width: 100vw; height: calc(100dvh - var(--header-height) - 55.19px); background: #fff; border-top: 1px solid #EAEDF4;
                & .nav-con {height: 100%;
                    & .info {display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid #EAEDF4;
                        & a {position: relative; display: flex; align-items: flex-end; font-size: 14px; line-height: 1; color: #999;
                            & span {font-size: 16px; color: var(--basic-color-text); font-weight: 700; margin-right: 4px;}
                            & strong {font-size: 16px; color: var(--basic-color-text); margin-right: 4px;}
                            & i {position: absolute; top: 50%; right: -20px; transform: translateY(-50%); font-size: 12px;}
                        }
                    }
                    & .list {height: calc(100% - 37px); overflow-y: scroll;
                        > ul {
                            > li {margin-bottom: 10px;
                                &:last-child {margin-bottom: 0;}
                                & .cate {padding: 10px 20px;
                                    & p {font-size: 12px; color: #aaa;}
                                }
                                & .con {
                                    &:nth-child(2) {
                                        & .depth1 {padding: 0 20px 10px;}
                                    }
                                    & .depth1 {padding: 10px 20px;
                                        &.on {
                                            & p {color: #2C9E4F;}
                                        }
                                        & p {display: flex; justify-content: space-between; align-items: center; font-size: 15px; line-height: 1; font-weight: 600;
                                            & i {font-size: 12px;}
                                        }
                                    }
                                    & .depth2 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 10px 20px; background: #f9f9f9;
                                        & a {display: block; font-size: 14px; color: #aaa;}
                                    }
                                }
                            }
                        }
                        > .bt {padding: 20px; text-align: right;
                            & a {display: inline-flex; align-items: center; font-size: 13px; line-height: 1; background: #f9f9f9; border: 1px solid #EAEDF4; padding: 6px 12px; border-radius: 4px; color: #999; font-weight: 600;
                                & img {height: 14px; margin-right: 4px;}
                            }
                        }
                    }
                }
            }
        }
    }
    & .header-bot {border-bottom: 1px solid #eaedf4; background: #fff;
        & .header-wrap {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1640px; margin: 0 auto; }
        & .header-wrap .gnb {display: flex; align-items: center;}
        & .header-wrap .gnb .bt {position: relative; width: 20px; height: 20px; margin-right: 50px;}
        & .header-wrap .gnb .bt span {position: absolute; display: block; width: 4px; height: 4px; border-radius: 1px; background: #000;}
        & .header-wrap .gnb .bt span:nth-child(1) {top: 0; left: 0;}
        & .header-wrap .gnb .bt span:nth-child(2) {top: 0; left: 50%; transform: translateX(-50%);}
        & .header-wrap .gnb .bt span:nth-child(3) {top: 0; right: 0;}
        & .header-wrap .gnb .bt span:nth-child(4) {top: 50%; left: 0; transform: translateY(-50%);}
        & .header-wrap .gnb .bt span:nth-child(5) {top: 50%; left: 50%; transform: translate(-50%, -50%);}
        & .header-wrap .gnb .bt span:nth-child(6) {top: 50%; right: 0; transform: translateY(-50%);}
        & .header-wrap .gnb .bt span:nth-child(7) {bottom: 0; left: 0;}
        & .header-wrap .gnb .bt span:nth-child(8) {bottom: 0; left: 50%; transform: translateX(-50%);}
        & .header-wrap .gnb .bt span:nth-child(9) {bottom: 0; right: 0;}
        & .header-wrap .gnb .cate {}
        & .header-wrap .gnb .cate .d1 {display: flex; align-items: center;}
        & .header-wrap .gnb .cate .d1 > li {margin-right: 50px;}
        & .header-wrap .gnb .cate .d1 > li:last-child {margin-right: 0;}
        & .header-wrap .gnb .cate .d1 > li > a {display: block; font-family: var(--key-font); font-weight: 500; line-height: 70px;}
        & .header-wrap .gnb .cate .d1 > li > a:hover {color: var(--basic-color);}
        & .header-wrap .gnb .cate .d1 > li > .d2 {display: none;}
        & .header-wrap .gnb .cate .d1 > li > .d2 > li {}
        & .header-wrap .gnb .cate .d1 > li > .d2 > li > a {}
        & .header-wrap .gnb .list {position: absolute; top: 100%; left: 0; display: none;}
        & .header-wrap .gnb .list .d1 {}
        & .header-wrap .gnb .list .d1 > li {}
        & .header-wrap .gnb .list .d1 > li > .d2 {}
        & .header-wrap .gnb .list .d1 > li > .d2 > li {}
        & .header-wrap .gnb .list .d1 > li > .d2 > li > a {}
        & .header-wrap .member {display: flex; align-items: center;}
        & .header-wrap .member .join {margin-right: 20px;}
        & .header-wrap .member .join a {display: flex; align-items: center; color: #8491a7;}
        & .header-wrap .member .join a i {font-size: 20px;}
        & .header-wrap .member .join a p {font-size: 14px; font-weight: 600; margin-left: 5px;}
        & .header-wrap .member .link {}
        & .header-wrap .member .link ul {display: flex; align-items: center;}
        & .header-wrap .member .link ul li {margin-right: 6px;}
        & .header-wrap .member .link ul li:last-child {margin-right: 0;}
        & .header-wrap .member .link ul li a {display: block; padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 1; color: #8491A7; border-radius: 8px; border: 1px solid #8491A730; text-align: center;}
        & .header-wrap .member .link ul li a:hover {background: #F7F8FB; border: 1px solid #8491A7;}
    }
    @media (width <= 1640px) {
        & .header-pop {
            & .header-wrap {width: calc(100% - 40px);}
        }
        & .header-top {
            & .header-wrap {width: calc(100% - 40px);}
        }
        & .header-bot {
            & .header-wrap {width: calc(100% - 40px);}
        }
    }
    @media (width <= 1280px) {
        & .header-pop {
            & .header-wrap .con p {font-size: 14px;}
        }
    }
    @media (width <= 860px) {
        & .header-pop {display: none !important;}
        & .header-top {border-bottom: 0;
            & .header-wrap {justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px 0;}
            & .header-wrap .search {width: 100%; margin: 15px 0 0 0; order: 3;}
            & .header-wrap .search .search-bar {width: 100%;}
            & .header-wrap .search .search-bar input[type="text"] {line-height: 36px;}
            & .header-wrap .search .search-bar i {line-height: 36px;}
            & .header-wrap .quick {all: unset; display: flex; align-items: center;}
            /* & .header-wrap .quick > ul li {margin-right: 0;} */
            /* & .header-wrap .quick > ul li:last-child {display: none;} */
            & .header-wrap .quick > ul li a p {font-size: 14px;}
            & .header-wrap .quick .hm {display: block; margin-left: 15px;}
        }
        & .header-bot {display: none;}
    }
    @media (width <= 640px) {
        & .header-top {
            & .header-wrap .logo a img {height: 26px;}
        }
    }
    @media (width <= 460px) {
        & .header-top {
            & .header-wrap {padding: 15px 0;}
            & .header-wrap .logo a img {height: 23px;}
            & .header-wrap .search {margin: 10px 0 0 0;}
            & .header-wrap .quick > ul li {margin-right: 15px;}
            & .header-wrap .quick > ul li a p {font-size: 12px;}
        }
    }
}

/* footer */
footer {padding-bottom: 57.19px;
    & .footer-link {background: #F7F8FB; padding: 20px 0; border-top: 1px solid #EAEDF4;
        & ul {display: flex; justify-content: center; align-items: center;
            > li {margin-right: 40px;}
            > li:last-child {margin-right: 0;}
            > li a {font-size: 14px; color: #555; line-height: 1;}
            > li a:hover {color: #222;}
        }
    }
    & .footer-desc {position: relative; padding: 40px 0; border-top: 1px solid #EAEDF4;
        & .inner {
            display: flex; justify-content: center; align-items: flex-end;
        }
        & .footer-info {
            > ul {
                > li {display: flex; justify-content: center; align-items: center;}
                > li:first-child {margin-bottom: 18px;}
                > li:nth-last-child(2) {margin-top: 18px;}
                > li:last-child {margin-top: 18px;}
                > li img {filter: invert(41%) sepia(2%) saturate(3%) hue-rotate(32deg) brightness(95%) contrast(91%);}
                > li p {position: relative; font-size: 14px; line-height: 1.4; color: #666; padding: 0 8px;}
                > li p:first-child {padding-left: 0;}
                > li p:last-child {padding-right: 0;}
                > li p::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 50%; background: #666;}
                > li p:last-child::after {content: none;}
                > li span {display: block; font-size: 12px; color: #c0c0c0; text-align: center;}
            }
        }
        & .footer-list {display: none;
            & .logo {display: flex; justify-content: center;
                & img {height: 26px; filter: invert(41%) sepia(2%) saturate(3%) hue-rotate(32deg) brightness(95%) contrast(91%);}
            }
            & .bt {margin: 15px 0;
                & button {display: flex; justify-content: center; align-items: center; gap: 5px; width: 150px; margin: 0 auto;
                    & p {font-size: 14px; color: #666;}
                    & i {font-size: 12px;}
                }
            }
            & .list {padding: 0 0 15px;
                > ul {
                    > li {display: flex; justify-content: center; gap: 10px; text-align: center;
                        & p {display: inline-block; font-size: 13px; color: #666;}
                    }
                }
            }
            & .desc {text-align: center;
                & p {font-size: 12px; color: #666;}
                & span {font-size: 12px; color: #c0c0c0;}
            }
        }
        & .footer-sns {position: absolute; bottom: 0; right: 0;
            > ul {display: flex;
                > li {margin-right: 12px;}
                > li:last-child {margin-right: 0;}
                > li a {display: block; width: 30px; height: 30px; border: 1px solid rgba(0,0,0,0); box-sizing: border-box; font-size: 0; text-indent: -9999px; border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-color: #444444; background-size: 20px;}
                > li a.in {background-image: url("../img/common/ico-sns-in.png");}
                > li a.fb {background-image: url("../img/common/ico-sns-fb.png");}
                > li a.nb {background-image: url("../img/common/ico-sns-nb.png");}
                > li a.yt {background-image: url("../img/common/ico-sns-yt.png"); background-size: 18px;}
                > li a.cf {background-image: url("../img/common/ico-sns-cf.png"); background-size: 18px;}
            }
        }
    }
    @media (width <= 860px) {
        & .footer-link {padding: 12px 0;}
        & .footer-desc {padding: 25px 0;
            & .inner {flex-wrap: wrap;
                > div {width: 100%;}
                & .footer-sns {position: relative; bottom: auto; right: auto; margin-top: 18px;
                    > ul {justify-content: center;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .footer-link {
            & ul {flex-wrap: wrap;
                > li {margin: 0 10px;
                    & a {font-size: 13px;}
                }
            }
        }
        & .footer-desc {
            & .footer-info {display: none;
                & ul {
                    > li {flex-wrap: wrap;
                        & p {width: 100%; font-size: 13px; text-align: left; padding: 0;
                            &::after {content: none;}
                        }
                        & img {height: 26px;}
                    }
                }
            }
            & .footer-list {display: block;}
        }
    }
}

/* sub */
.sub-container {overflow: hidden;
    &.sub-grid {padding-top: var(--header-height); padding-bottom: 140px;}
    & .sub-visual {
        & .inner {
            > .banner-slide {height: 250px; margin: 60px 0 0; border-radius: 10px; overflow: hidden;
                & .swiper {width: 100%; height: 100%;
                    & .swiper-wrapper {
                        & .swiper-slide {width: 100%;
                            & a {position: relative; display: block; width: 100%; height: 100%;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                        }
                    }
                }
            }
        }
    }
    & .sub-depth {padding: 85px 0;
        & .tit {text-align: center;
            & h2 {font-family: var(--key-font); font-size: 22px; font-weight: 700;}
            & p {font-size: 18px; margin-top: 20px; line-height: 1;
                & strong {color: var(--basic-color); font-weight: 500;}
            }
        }
        & .cate {margin-top: 35px;
            & .depth01 {
                > ul {display: flex; justify-content: center;
                    > li {margin-right: 8px;}
                    > li:last-child {margin-right: 0;}
                    > li button {border: 1px solid #E1E5ED; border-radius: 999px; color: var(--basic-color-text);}
                    > li.on button {background: #697385; border: 1px solid #697385;}
                    > li button p {font-size: 16px; font-weight: 500; line-height: 1; padding: 12px 20px;}
                    > li.on button p {color: #fff;}
                }
            }
            & .depth02 {margin-top: 20px;
                > ul {display: flex; justify-content: center;
                    > li {margin-right: 8px;}
                    > li:last-child {margin-right: 0;}
                    > li button {background: #EAEDF4; border-radius: 999px; color: var(--basic-color-text);}
                    > li.on button {background: #697385;}
                    > li button p {font-size: 16px; font-weight: 500; line-height: 1; padding: 12px 20px;}
                    > li.on button p {color: #fff;}
                }
            }
            & .depth03 {margin-top: 20px;
                > ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 40px;
                    > li {}
                    > li button {}
                    > li button p {font-size: 16px; font-weight: 500; color: #8491A7; line-height: 1;}
                    > li.on button p {color: var(--basic-color-text);}
                }
            }
        }
        & .desc {text-align: center; margin-top: 15px;
            & p {}
        }
    }
    @media (width <= 1280px) {
        & .sub-depth {
            & .cate {
                & .depth01 {
                    > ul {justify-content: flex-start; overflow-x: scroll;}
                }
                & .depth02 {
                    > ul {justify-content: flex-start; overflow-x: scroll;}
                }
                & .depth03 {
                    > ul {justify-content: flex-start; overflow-x: scroll; flex-wrap: nowrap;}
                }
            }
        }
    }
    @media (width <= 860px) {
        &.sub-grid {padding-bottom: 80px;}
        & .sub-visual {
            & .inner {padding: 30px 40px; border-radius: 5px;
                & p {font-size: 20px;}
                & span {font-size: 14px; letter-spacing: 0.02rem; margin: 6px 0 20px;}
            }
        }
        & .sub-depth {padding: 45px 0;
            & .tit {
                & h2 {font-size: 18px;}
                & p {font-size: 14px; margin-top: 15px;}
            }
            & .desc {margin-top: 12px;
                & p {font-size: 14px;}
            }
            & .cate {margin-top: 25px;
                & .depth01 {
                    > ul {margin-right: 6px;
                        > li {
                            & button {
                                & p {font-size: 14px; padding: 8px 16px;}
                            }
                        }
                    }
                }
                & .depth02 {margin-top: 12px;
                    > ul {
                        > li {margin-right: 6px;
                            & button {
                                & p {font-size: 14px; padding: 8px 16px;}
                            }
                        }
                    }
                }
                & .depth03 {margin-top: 12px;
                    > ul {
                        > li {margin-right: 6px;
                            & button {
                                & p {font-size: 14px; padding: 8px 16px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .sub-depth {padding: 30px 0 20px;}
    }
    @media (width <= 460px) {
        & .sub-visual {
            & .inner {padding: 20px; text-align: center;
                & p {font-size: 16px;}
                & span {font-size: 12px;}
                & a {display: inline-block; max-width: 80px;
                    & img {width: 100%;}
                }
            }
        }
        & .sub-depth {
            & .cate {
                & .depth01 {
                    > ul {
                        > li {
                            & button {
                                & p {font-size: 13px;}
                            }
                        }
                    }
                }
                & .depth02 {
                    > ul {
                        > li {
                            & button {
                                & p {font-size: 13px;}
                            }
                        }
                    }
                }
                & .depth03 {
                    > ul {
                        > li {
                            & button {
                                & p {font-size: 13px;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* right-bar */
.fix-right-bar {position: fixed; top: calc(var(--header-height) + 35px); right: 40px;
    & .list {
        > ul {
            > li {margin-bottom: 20px;
                &:last-child {margin-bottom: 0;}
                & a {display: block; text-align: center;
                    & .txt {text-align: center; margin-bottom: 8px;
                        & p {font-size: 14px; font-weight: 600; color: #697385;}
                    }
                    & .img {position: relative; width: 28px; aspect-ratio: 1 / 1; border: 1px solid #e6eaf0; background: #F7F8FB; border-radius: 10px; margin: 0 auto;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                        & img:first-child {opacity: 1;}
                        & img:last-child {opacity: 0;}
                    }
                }
                &:hover {
                    & a {
                        & .img {background: #697385; border: 1px solid #697385;
                            & img:first-child {opacity: 0;}
                            & img:last-child {opacity: 1;}
                        }
                    }
                }
            }
        }
    }
    & .top {display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; text-align: center; width: 50px; aspect-ratio: 1 / 1; border-radius: 50%; background: #F7F8FB; border: 1px solid #EAEDF4; margin: 20px auto 0; cursor: pointer;
        & i {font-size: 12px; color: #B3B9C3;}
        & p {width: 100%; font-size: 14px; line-height: 1; font-weight: 600; color: #3A3A3A; text-align: center; margin-top: -2px;}
    }
    @media (width <= 1860px) {display: none;}
}

/* bottom-bar */
.fix-bottom-bar {position: fixed; bottom: 0; width: 100%; border-top: 1px solid #EAEDF4; padding-bottom: calc(constant(safe-area-inset-bottom) + 1px); padding-bottom: calc(env(safe-area-inset-bottom) + 1px); background: #fff; display: none; z-index: 99;
    & .bar {background: #fff;
        > ul {display: flex; align-items: center;
            > li {width: calc(100% / 5);
                & a {display: block; text-align: center; padding: 6px 0;
                    & i {}
                    & img {height: 16px;}
                    & p {font-size: 11px;}
                }
                &.on {color: #2C9E4F;
                    & a {
                        & img {filter: invert(46%) sepia(60%) saturate(527%) hue-rotate(86deg) brightness(96%) contrast(88%);}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {display: block;}
}

/* portfolio - modal */
.portfolio-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; right: 0; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; padding: 0 30px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); max-width: 1920px; width: calc(100vw - 60px); height: calc(var(--vh, 1vh) * 100 - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 5% 10%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            > .top {display: flex; justify-content: space-between; align-items: center;
                & .num {}
                & .num p {font-weight: 600; line-height: 1; color: #697385; padding: 8px 25px; border: 1px solid #E1E5ED; border-radius: 999px; box-shadow: 2px 2px 6px 0px rgba(132, 145, 167, 15%);}
                & .bt {display: flex; align-items: center;
                    & button {display: flex; justify-content: center; align-items: center; background: #292E41; border-radius: 13px; padding: 8px; margin-right: 4px;
                        &:last-child {margin-right: 0;}
                        & img {height: 16px;
                            &.off {display: block;}
                            &.on {display: none;}
                        }
                        & p {font-size: 14px; color: #36be8f; margin-left: 5px;}
                        &.on {
                            & img {
                                &.off {display: none;}
                                &.on {display: block;}
                            }
                        }
                    }
                }
            }
            > .thumbs {margin: 15px 0 80px;
                > ul {position: relative; display: flex; justify-content: flex-start; flex-wrap: wrap; padding-right: 40%;
                    > li {position: relative; width: calc(100% / 3 - 10px); aspect-ratio: 900 / 570; border-radius: 10px; overflow: hidden; margin-right: var(--modal-pf-thum-gap);
                        &:first-child {width: 100%; margin-bottom: var(--modal-pf-thum-gap); margin-right: 0;}
                        &:nth-child(2) {position: absolute; top: 0; right: 0; width: calc(40% - 15px); aspect-ratio: 900 / 578; margin-right: 0;}
                        &:nth-child(3) {position: absolute; bottom: 0; right: 0; width: calc(40% - 15px); aspect-ratio: 900 / 578; margin-right: 0;}
                        &:nth-child(6) {margin-right: 0;}
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
            > .info {margin-bottom: 100px;
                & .cate {display: flex; justify-content: center;
                    & p {font-size: 14px; line-height: 1; font-weight: 600; color: #0782da; padding: 5px 10px; border-radius: 999px; border: 1px solid #6FC9FA; background: #fff; margin: 0 2px;}
                    & p:nth-child(1) {background: #6FC9FA35;}
                    & p:nth-child(2) {background: #6FC9FA10;}
                }
                & .subject {text-align: center; margin: 25px 0;
                    & p {font-size: 24px; font-weight: 600;}
                    & span {display: inline-block; font-size: 14px; line-height: 1; color: #697385; margin-right: 5px;}
                    & img {}
                }
                & .desc {
                    > ul {display: flex; justify-content: center; align-items: center;
                        > li {text-align: center; padding: 0 40px;}
                        > li img {}
                        > li span {font-size: 15px; color: #697385;}
                        > li p {font-size: 24px; font-weight: 600; margin-top: 12px;}
                    }
                }
                & .bt {text-align: center; margin: 35px 0 60px;
                    & a {display: inline-block; font-size: 20px; line-height: 1; font-weight: 500; color: #fff; padding: 15px 20px; background: #2C9E4F; border-radius: 10px;}
                }
                & .text {text-align: center;
                    & p {font-size: 15px; color: #697385;}
                }
            }
            > .img {
                & .bt {display: flex; justify-content: flex-end; margin-bottom: 15px;
                    & button {width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e1e5ed; margin-right: 4px;}
                    & button:last-child {margin-right: 0;}
                    & button i {font-size: 20px; color: #e1e5ed;}
                    & button.on i {color: #697385;}
                }
                & .list {
                    > ul {
                        > li {border-radius: 10px; overflow: hidden; margin-bottom: 60px;
                            & img {width: 100%;}
                        }
                        > li:last-child {margin-bottom: 0;}
                    }
                }
                &.on {
                    & .list {
                        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px;
                            > li {position: relative; margin-bottom: 0; aspect-ratio: 350 / 200;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                        }
                    }
                }
            }
            > .banner-slide {height: 250px; margin: 60px 0; border-radius: 10px; overflow: hidden;
                & .swiper {width: 100%; height: 100%;
                    & .swiper-wrapper {
                        & .swiper-slide {width: 100%;
                            & a {position: relative; display: block; width: 100%; height: 100%;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                        }
                    }
                }
            }
            > .banner {color: #fff; background: url("/assets/site/img/sub/banner-bg01.jpg") no-repeat center; background-size: cover; border-radius: 10px; padding: 55px 100px; margin: 60px 0 180px;
                & p {font-family: var(--key-font); font-size: 24px;}
                & span {display: block; font-family: var(--key-font); font-size: 18px; margin: 12px 0 30px;}
                & a {display: inline-block; margin-right: 12px;}
                & a:last-child {margin-right: 0;}
            }
            > .ai {
                & .title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
                    & .left {
                        & .text {display: flex; align-items: flex-end;
                            & p {font-family: var(--key-font); font-size: 20px; line-height: 1;}
                            & p.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
                            & p.type02 {color: #07BB9D;}
                            & p.type03 {color: #3675FF;}
                            & p.type04 {color: #7758FF;}
                            & span {font-size: 15px; line-height: 1; color: #666;}
                        }
                    }
                    & .right {display: flex; align-items: center;
                        & .util {display: flex; align-items: center;
                            & .util-select {position: relative; width: 100px; margin: 0 8px;
                                & .view {display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; cursor: pointer;
                                    & p {font-size: 14px; margin-right: 10px; color: #697385;}
                                    & i {font-size: 14px; color: #697385;}
                                }
                                & .list {position: absolute; top: 100%; left: 0; width: 100%; z-index: 9;
                                    > ul {background: #fff; border: 1px solid #eaedf4; border-radius: 4px;
                                        > li {}
                                        > li button {width: 100%; color: #697385; padding: 4px 8px; text-align: left;}
                                        > li button:hover {background: #f9f9f9;}
                                    }
                                }
                            }
                            & .util-array {margin-right: 8px;
                                & .bar {position: relative; display: flex; border: 1px solid #8491A7; border-radius: 999px; background: #8491A7;
                                    &::before {content: ''; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 50%; height: 100%; background: #fff; border-radius: 999px; transition: all 0.2s;}
                                    &.on::before {left: 50%;}
                                    &  button {position: relative; font-size: 14px; line-height: 1; padding: 4px 8px; z-index: 2;}
                                    &  button:first-child {color: #8491A7;}
                                    &.on button:first-child {color: #fff;}
                                    &  button:last-child {color: #fff;}
                                    &.on button:last-child {color: #8491A7;}
                                }
                                & .con {
                                    & button {display: flex; align-items: center; gap: 5px;
                                        & .ball {position: relative; width: 28px; height: 18px; border-radius: 999px; background: #CBCBCB;
                                            & span {position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: all 0.2s ease-out;}
                                        }
                                        & .txt {
                                            & p {font-size: 16px; font-weight: 500; color: #697385;}
                                        }
                                        &.on {
                                            & .ball {background: #8491A7;
                                                & span {left: 12px;}
                                            }
                                        }
                                    }
                                }
                            }
                            & .util-grid {
                                & button {width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e1e5ed; margin-right: 4px;}
                                & button:last-child {margin-right: 0;}
                                & button i {font-size: 20px; color: #e1e5ed;}
                                & button.on i {color: #697385;}
                            }
                        }
                        & .info {position: relative; display: flex; align-items: center; cursor: pointer;
                            & i {color: #6a6a6a;}
                            & p {font-size: 15px; color: #63687A; margin-left: 5px;}
                            & span {position: absolute; bottom: 100%; right: 0; width: 200px; font-size: 12px; color: #fff; padding: 12px; background: #343a40; border-radius: 3px; opacity: 0; pointer-events: none; transition: all 0.2s; z-index: 9;}
                            &:hover span {opacity: 1; pointer-events: visible;}
                        }
                    }
                }
                & .list {
                    > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 90px 25px;
                        > li {
                            & .thumbs {position: relative; padding-top: 75%; border-radius: 10px; overflow: hidden;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                            & .text {
                                & .cate {display: flex; align-items: center; margin: 15px 0 10px;
                                    & span {font-size: 14px; line-height: 1; color: #697385; font-weight: 600; padding: 4px 8px; border-radius: 999px; border: 1px solid #E1E5ED;}
                                    & p {font-size: 14px; line-height: 1; font-weight: 600; color: #8491A7; margin-left: 8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                }
                                & .subject {display: flex; justify-content: space-between; align-items: center;
                                    & p {display: flex; align-items: center; font-size: 20px; font-weight: 600; line-height: 1;}
                                    & p i {}
                                    & button {color: #EAEDF4;
                                        &.on {color: #36BE8F;}
                                    }
                                    & button i {}
                                }
                            }
                        }
                    }
                }
            }
        }
        & .modal-quick {position: fixed; top: 10%; right: 25px; max-width: 135px; width: 100%; padding: 25px 15px; border: 1px solid #CDEFD8; border-radius: 30px; text-align: center;
            & .logo {margin-bottom: 8px; cursor: pointer;
                & img {max-width: 60px;}
            }
            & .name {cursor: pointer;
                & p {font-weight: 600;}
            }
            & .code {padding: 6px; border: 1px solid #E1E5ED; border-radius: 5px; margin: 15px 0;
                & img {width: 100%;}
            }
            & .bt {
                & a {display: block; font-size: 14px; line-height: 1; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: 999px; background: var(--basic-color);}
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1640px) {
        & .modal-box {
            & .modal-quick {display: none;}
        }
    }
    @media (width <= 1280px) {
        & .modal-box {
            & .modal-con {padding: 30px;
                > .img {
                    & .list {
                        > ul {
                            > li {margin-bottom: 30px;}
                        }
                    }
                }
                > .ai {
                    & .list {
                        > ul {
                            > li {
                                & .text {
                                    & .subject {
                                        & p {font-size: 16px;
                                            & i {display: none;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {padding: 25px;
                > .top {
                    & .num {
                        & p {font-size: 14px; padding: 6px 18px;}
                    }
                    & .bt {
                        & button {padding: 8px 14px;
                            & img {height: 14px;}
                            & p {line-height: 1;}
                        }
                    }
                }
                > .thumbs {margin: 15px 0 60px;
                    > ul {padding-right: 0;
                        > li {border-radius: 5px;
                            &:nth-child(2) {position: relative; width: calc(100% / 2 - 7.5px); margin-bottom: 15px; margin-right: 15px;}
                            &:nth-child(3) {position: relative; width: calc(100% / 2 - 7.5px); margin-bottom: 15px;}
                        }
                    }
                }
                > .info {margin-bottom: 60px;
                    & .subject {
                        & p {font-size: 20px;}
                    }
                    & .desc {
                        > ul {
                            > li {width: calc(100% / 5); padding: 0;
                                & span {font-size: 14px;}
                                & p {font-size: 20px;}
                            }
                        }
                    }
                    & .bt {margin: 25px 0 30px;
                        & a {font-size: 16px; padding: 12px 24px;}
                    }
                }
                > .img {
                    & .bt {display: none;}
                    & .list {
                        > ul {display: flex; flex-wrap: wrap; gap: 15px;
                            > li {width: calc(100% / 2 - 7.5px); border-radius: 5px; margin-bottom: 0;}
                        }
                    }
                }
                > .banner {padding: 30px 40px; border-radius: 5px; margin: 60px 0 80px;
                    & p {font-size: 20px;}
                    & span {font-size: 14px; letter-spacing: 0.02rem; margin: 6px 0 20px;}
                }
                > .ai {
                    & .title {
                        & .left {
                            & .text {
                                & p {font-size: 18px;}
                            }
                        }
                        & .right {
                            & .util {
                                & .util-array {
                                    & .bar {
                                        & button {font-size: 12px; padding: 4px 10px;}
                                    }
                                    & .con {
                                        & button {display: flex; align-items: center; gap: 5px;
                                            & .ball {position: relative; width: 28px; height: 18px; border-radius: 999px; background: #CBCBCB;
                                                & span {position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: all 0.2s ease-out;}
                                            }
                                            & .txt {
                                                & p {font-size: 16px; font-weight: 500; color: #697385;}
                                            }
                                            &.on {
                                                & .ball {background: #8491A7;
                                                    & span {left: 12px;}
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .list {
                        > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 15px;
                            > li {
                                & .thumbs {border-radius: 5px; padding-top: 65%;}
                                & .text {
                                    & .cate {
                                        & span {font-size: 13px;}
                                        & p {font-size: 13px;}
                                    }
                                    & .subject {
                                        & p {font-size: 15px;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .modal-box {
            & .modal-con {
                > .thumbs {
                    > ul {
                        > li {display: none;
                            &:first-child {display: block; margin: 0;}
                        }
                    }
                }
                > .img {
                    & .list {
                        > ul {
                            > li {width: 100%;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-close {padding: 0 20px;}
        & .modal-box {width: calc(100vw - 40px);
            & .modal-con {padding: 20px;
                > .top {
                    & .num {
                        & p {font-size: 12px;}
                    }
                    & .bt {
                        & button {padding: 6px 12px;
                            & img {height: 12px;}
                            & p {font-size: 11px;}
                        }
                    }
                }
                > .thumbs {margin: 15px 0 40px;
                    > ul {gap: 5px;
                        > li {width: calc(100% / 2 - 2.5px); margin: 0;
                            &:first-child {margin: 0;}
                            &:nth-child(2) {width: 100%;; margin: 0;}
                            &:nth-child(3) {width: calc(100% / 2 - 2.5px); margin: 0;}
                        }
                    }
                }
                > .info {margin-bottom: 40px;
                    & .cate {
                        & p {font-size: 12px;}
                    }
                    & .subject {margin: 15px 0;
                        & p {font-size: 18px;}
                        & span {font-size: 12px;}
                    }
                    & .desc {
                        > ul {justify-content: center; flex-wrap: wrap; gap: 5px 0;
                            > li {width: calc(100% / 3);
                                & img {height: 15px;}
                                & span {font-size: 12px;}
                                & p {font-size: 16px; margin-top: 6px;}
                            }
                        }
                    }
                    & .bt {margin: 20px 0;
                        & a {font-size: 14px; padding: 10px 20px;}
                    }
                    & .text {
                        & p {font-size: 14px;}
                    }
                }
                > .img {
                    & .list {
                        > ul {gap: 5px;}
                    }
                }
                > .banner {margin: 40px 0 60px; padding: 20px; text-align: center;
                    & p {font-size: 16px;}
                    & span {font-size: 12px;}
                    & a {max-width: 80px;
                        & img {width: 100%;}
                    }
                }
                > .ai {
                    & .title {margin-bottom: 15px;
                        & .left {
                            & .text {
                                & p {font-size: 16px;}
                            }
                        }
                        & .right {
                            & .info {
                                & p {font-size: 12px;}
                                & span {font-size: 11px;}
                            }
                        }
                    }
                    & .list {
                        > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
                    }
                }
            }
        }
    }
}

/* company - modal */
.company-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1001; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 50px; right: 0; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; padding: 0 10%; z-index: 1001; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; color: #fff;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); max-width: 1920px; width: calc(100vw - 20%); height: calc(100vh - 160px); background: #fff; z-index: 1001; opacity: 0; pointer-events: none; border-radius: 10px; overflow: hidden; transition: transform .7s ease-in-out, opacity .2s ease-in-out; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%);
        & .modal-con {width: 100%; height: 100%; padding: 65px 0; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            > .top {text-align: center;
                & p {font-size: 36px; line-height: 1; font-weight: 500;}
            }
            > .company {display: flex; justify-content: space-between; align-items: center; padding: 0 70px; margin: 50px 0 70px;
                & .left {width: calc(100% - 530px);
                    & .name {display: flex; align-items: center;
                        & .text {
                            & p {font-size: 26px; font-weight: 600;}
                        }
                        & .bt {display: flex; align-items: center; margin: 0 15px;
                            & button {display: flex; justify-content: center; align-items: center; background: #292E41; border-radius: 13px; padding: 8px; margin-right: 4px;
                                &:last-child {margin-right: 0;}
                                & img {height: 16px;
                                    &.on {display: none;}
                                    &.off {display: block;}
                                }
                                & p {font-size: 14px; color: #36be8f; margin-left: 5px;}
                                &.on {
                                    & img {
                                        &.on {display: block;}
                                        &.off {display: none;}
                                    }
                                }
                            }
                        }
                        & .call {
                            & button {display: flex; align-items: center; padding: 8px 10px; background: #16A775; border-radius: 10px;}
                            & button img {margin-right: 5px;}
                            & button p {font-size: 14px; color: #fff;}
                        }
                    }
                    & .info {margin: 35px 0;
                        > ul {
                            > li {display: flex; align-items: center; margin-bottom: 15px;
                                & p {font-size: 15px; line-height: 1; color: #697385; margin-right: 5px;}
                                & span {font-size: 15px; line-height: 1; font-weight: 600;}
                                & button {margin: 0 5px 0 10px;
                                    & img {}
                                }
                                & strong {font-size: 15px; line-height: 1; color: #0782DA;}
                            }
                            > li:last-child {margin-bottom: 0;}
                        }
                    }
                    & .desc {
                        & p {font-size: 18px; font-weight: 600; margin-bottom: 5px;}
                        & span {font-size: 15px;}
                    }
                    & .desc2 {
                        & p {font-size: 15px; font-weight: 600; margin-bottom: 5px;}
                        & span {font-size: 15px;}
                    }
                }
                & .right {position: relative; width: 280px;
                    & .qr {position: absolute; top: 0; right: calc(100% + 20px); width: 100%; max-width: 200px;
                        & img {width: 100%;}
                    }
                    & .logo {position: relative; width: 100%; aspect-ratio: 280 / 230; border: 1px solid #E1E5ED; border-radius: 10px;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 80px); object-fit: cover;}
                    }
                    & .cate {display: flex; justify-content: center; align-items: center; margin-top: 25px; 
                        & p {font-size: 14px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px;
                            &.type01 {color: #6270F4; background: #DDE0FF;}
                            &.type02 {color: #289FF4; background: #D0ECFF;}
                            &.type03 {color: #DA5AE0; background: #DA5AE020;}
                            &.type04 {color: #DA5AE0; background: #DA5AE020;}
                        }
                        & span {display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 1; padding: 5px 10px; border: 1px solid #D4D8E1; border-radius: 999px; color: #697385; margin-left: 5px; background: #fff;
                            & img {height: 14px; margin-right: 4px;}
                        }
                    }
                }
            }
            > .thumbs {padding: 25px 70px; background: #36BE8F10;
                & .swiper-slide {position: relative; border-radius: 10px; aspect-ratio: 440 / 290; overflow: hidden;}
                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            }
            > .banner-slide {height: 250px; border-radius: 10px; overflow: hidden; padding: 70px 70px 0;
                & .swiper {width: 100%; height: 100%;
                    & .swiper-wrapper {
                        & .swiper-slide {width: 100%;
                            & a {position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                        }
                    }
                }
            }
            > .img {padding: 55px 70px 0;
                & .bt {display: flex; justify-content: flex-end; margin-bottom: 15px;
                    & button {width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e1e5ed; margin-right: 4px;}
                    & button:last-child {margin-right: 0;}
                    & button i {font-size: 20px; color: #e1e5ed;}
                    & button.on i {color: #697385;}
                }
                & .list {
                    > ul {
                        > li {border-radius: 10px; overflow: hidden; margin-bottom: 60px;
                            & img {width: 100%;}
                        }
                        > li:last-child {margin-bottom: 0;}
                    }
                }
                &.on {
                    & .list {
                        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px;
                            > li {position: relative; margin-bottom: 0; aspect-ratio: 350 / 200;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                        }
                    }
                }
            }
            > .pf {padding: 100px 70px 0;
                & .title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
                    & .left {
                        & .text {display: flex; align-items: flex-end;
                            & p {font-family: var(--key-font); font-size: 20px; line-height: 1;}
                            & span {font-size: 15px; line-height: 1; color: #666;}
                        }
                    }
                    & .right {display: flex; align-items: center;
                        & .util {display: flex; align-items: center;
                            & .util-select {position: relative; width: 100px; margin: 0 8px;
                                & .view {display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; cursor: pointer;
                                    & p {font-size: 14px; margin-right: 10px; color: #697385;}
                                    & i {font-size: 14px; color: #697385;}
                                }
                                & .list {position: absolute; top: 100%; left: 0; width: 100%; z-index: 9;
                                    > ul {background: #fff; border: 1px solid #eaedf4; border-radius: 4px;
                                        > li {}
                                        > li button {width: 100%; color: #697385; padding: 4px 8px; text-align: left;}
                                        > li button:hover {background: #f9f9f9;}
                                    }
                                }
                            }
                            & .util-array {margin-right: 8px;
                                & .bar {position: relative; display: flex; border: 1px solid #8491A7; border-radius: 999px; background: #8491A7;
                                    &::before {content: ''; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: 50%; height: 100%; background: #fff; border-radius: 999px; transition: all 0.2s;}
                                    &.on::before {left: 50%;}
                                    &  button {position: relative; font-size: 14px; line-height: 1; padding: 4px 8px; z-index: 2;}
                                    &  button:first-child {color: #8491A7;}
                                    &.on button:first-child {color: #fff;}
                                    &  button:last-child {color: #fff;}
                                    &.on button:last-child {color: #8491A7;}
                                }
                                & .con {
                                    & button {display: flex; align-items: center; gap: 5px;
                                        & .ball {position: relative; width: 28px; height: 18px; border-radius: 999px; background: #CBCBCB;
                                            & span {position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: all 0.2s ease-out;}
                                        }
                                        & .txt {
                                            & p {font-size: 16px; font-weight: 500; color: #697385;}
                                        }
                                        &.on {
                                            & .ball {background: #8491A7;
                                                & span {left: 12px;}
                                            }
                                        }
                                    }
                                }
                            }
                            & .util-grid {
                                & button {width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e1e5ed; margin-right: 4px;}
                                & button:last-child {margin-right: 0;}
                                & button i {font-size: 20px; color: #e1e5ed;}
                                & button.on i {color: #697385;}
                            }
                        }
                        & .info {position: relative; display: flex; align-items: center; cursor: pointer;
                            & i {color: #6a6a6a;}
                            & p {font-size: 15px; color: #63687A; margin-left: 5px;}
                            & span {position: absolute; bottom: 100%; right: 0; width: 200px; font-size: 12px; color: #fff; padding: 12px; background: #343a40; border-radius: 3px; opacity: 0; pointer-events: none; transition: all 0.2s; z-index: 9;}
                            &:hover span {opacity: 1; pointer-events: visible;}
                        }
                    }
                }
                & .list {
                    > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 90px 25px;
                        > li {
                            & .thumbs {position: relative; padding-top: 60%; border-radius: 10px; overflow: hidden;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                                & p {position: absolute; bottom: 20px; left: 20px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-size: 45px; font-size: 15px; font-weight: 700; background-repeat: no-repeat; background-position: center;}
                                & p.type01 {color: #9CFFA8; background-image: url("/assets/site/img/main/sec02-type01.svg");}
                                & p.type02 {color: #97EBFF; background-image: url("/assets/site/img/main/sec02-type03.svg");}
                                & p.type03 {color: #FFFA68; background-image: url("/assets/site/img/main/sec02-type02.svg");}
                                & p.type04 {color: #D2C8FD; background-image: url("/assets/site/img/main/sec02-type04.svg");}
                            }
                            & .text {display: flex; justify-content: space-between; align-items: center; margin-top: 15px;
                                & .cate {display: flex; align-items: center; width: 80%;
                                    & span {font-size: 14px; line-height: 1; color: #697385; font-weight: 600; padding: 4px 8px; border-radius: 999px; border: 1px solid #E1E5ED;}
                                    & p {line-height: 1; font-weight: 600; margin-left: 8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                                }
                                & .bt {display: flex; align-items: center;
                                    & button {display: flex; align-items: center; margin-right: 15px;}
                                    & button:last-child {margin-right: 0;}
                                    & button i {color: #9AA7BC;}
                                    & button p {font-size: 14px; color: #9AA7BC; margin-left: 4px;}
                                    & button.on i {color: #36BE8F;}
                                }
                            }
                        }
                    }
                }
            }
            > .banner {color: #fff; background: url("/assets/site/img/sub/banner-bg01.jpg") no-repeat center; background-size: cover; padding: 55px 100px; transform: translateY(2px);
                & p {font-family: var(--key-font); font-size: 24px;}
                & span {display: block; font-family: var(--key-font); font-size: 18px; margin: 12px 0 30px;}
                & a {display: inline-block; margin-right: 12px;}
                & a:last-child {margin-right: 0;}
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1640px) {
        & .modal-close {padding: 0 30px;}
        & .modal-box {width: calc(100vw - 60px);}
    }
    @media (width <= 1280px) {
        & .modal-box {
            & .modal-con {
                & .company {flex-wrap: wrap;
                    & .left {width: 100%; order: 2;}
                    & .right {width: 100%; order: 1; margin-bottom: 20px;
                        & .qr {display: none;}
                        & .logo {aspect-ratio: 6 / 1;
                            & img {max-width: 30%; max-height: calc(100% - 20px);}
                        }
                        & .cate {margin-top: 15px;}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .modal-box {
            & .modal-con {padding: 50px 0;
                > .top {
                    & p {font-size: 28px;}
                }
                > .company {padding: 0 20px; margin: 30px 0 50px;}
                > .thumbs {padding: 50px 20px;}
                > .img {padding: 50px 20px 0;
                    & .list {
                        > ul {
                            > li {margin-bottom: 30px;}
                        }
                    }
                }
                > .pf {padding: 50px 20px 0;
                    & .list {
                        > ul {gap: 40px 20px;}
                    }
                }
                > .banner-slide {padding: 50px 20px 0;}
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {
                & .company {
                    & .left {
                        & .name {justify-content: center; flex-wrap: wrap; gap: 15px 8px;
                            & .text {width: 100%; margin: 0; text-align: center;}
                            & .bt {margin: 0; order: 3;}
                            & .call {order: 2;}
                        }
                        & .info {
                            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px 0;
                                > li {width: 100%; justify-content: center; margin: 0;}
                            }
                        }
                        & .desc {text-align: center;}
                    }
                }
                & .img {
                    & .bt {display: none;}
                }
                & .pf {
                    & .list {
                        > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .modal-close {top: 30px;}
        & .modal-box {height: calc(var(--vh, 1vh) * 100 - 120px);
            & .modal-con {
                & .top {
                    & p {font-size: 24px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-box {
            & .modal-con {
                > .top {
                    & p {font-size: 20px;}
                }
                > .company {margin: 30px 0;
                    & .left {
                        & .name {gap: 12px 0;
                            & .text {
                                & p {font-size: 18px; line-height: 1;}
                            }
                        }
                        & .call {margin-right: 5px;}
                        & .info {
                            > ul {gap: 10px 0;
                                > li {
                                    & p {font-size: 13px;}
                                    & span {font-size: 13px;}
                                    & button {
                                        & img {width: 18px;}
                                    }
                                    & strong {font-size: 13px;}
                                }
                            }
                        }
                        & .desc {
                            & p {font-size: 16px;}
                            & span {font-size: 14px;}
                        }
                    }
                    & .right {
                        & .logo {aspect-ratio: 3 / 1;
                            & img {max-width: 50%;}
                        }
                        & .cate {
                            & p {font-size: 12px;}
                            & span {font-size: 12px;}
                        }
                    }
                }
                > .thumbs {padding: 30px 20px;}
                > .pf {padding: 30px 20px;
                    & .title {
                        & .left {
                            & .text {
                                & p {font-size: 16px;}
                            }
                        }
                        & .right {
                            & .util {
                                & .util-array {
                                    & .bar {
                                        & button {font-size: 12px;}
                                    }
                                    & .con {
                                        & button {display: flex; align-items: center; gap: 5px;
                                            & .ball {position: relative; width: 28px; height: 18px; border-radius: 999px; background: #CBCBCB;
                                                & span {position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: all 0.2s ease-out;}
                                            }
                                            & .txt {
                                                & p {font-size: 16px; font-weight: 500; color: #697385;}
                                            }
                                            &.on {
                                                & .ball {background: #8491A7;
                                                    & span {left: 12px;}
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            & .info {
                                & i {font-size: 14px;}
                                & p {font-size: 14px;}
                            }
                        }
                    }
                    & .list {
                        > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 30px 0;}
                    }
                }
                > .banner-slide {padding: 30px 20px 0;}
            }
        }
    }
}

/* company - modal */
.map-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1001; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 50px; right: 0; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; padding: 0 10%; z-index: 1001; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 640px; height: 400px; background: #fff; z-index: 1001; opacity: 0; pointer-events: none; border-radius: 10px; overflow: hidden; transition: transform .7s ease-in-out, opacity .2s ease-in-out; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%);
        & .modal-con {width: 100%; height: 100%; padding: 20px; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .place {display: flex; flex-wrap: wrap; align-content: space-between; width: 100%; height: 100%;
                > div {width: 100%;}
                & .cp {display: flex; justify-content: space-between; align-items: center; height: 40px;
                    & p {width: 250px; font-size: 14px; font-weight: 600; color: #0782DA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                    & span {width: calc(100% - 300px); font-size: 12px; color: #697385; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                }
                & .con {height: calc(100% - 100px); background: #000; border-radius: 5px; overflow: hidden;}
                & .close {height: 40px;
                    & button {width: 100%; height: 100%; text-align: center; font-size: 14px; font-weight: 500; background: #292E41; color: #fff; border-radius: 5px;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-close {top: 30px;}
        & .modal-box {width: calc(100% - 40px); height: calc(var(--vh, 1vh) * 80);
            & .modal-con {
                & .place {
                    & .cp {flex-wrap: wrap; height: 50px;
                        & p {width: 100%; line-height: 30px;}
                        & span {width: 100%; line-height: 20px;}
                    }
                    & .con {height: calc(100% - 120px);}
                }
            }
        }
    }
}

/* call - modal */
.call-modal {position: relative; z-index: 9999;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 640px; background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .close {position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 36px; aspect-ratio: 1 / 1; background: #E1E5ED; border-radius: 0 0 0 10px; cursor: pointer;
                & i {font-size: 20px; color: #697385;}
            }
            & .call {
                & .tit {text-align: center; margin-bottom: 50px;
                    & img {width: 30px;}
                    & p {font-size: 24px; font-weight: 500; margin-top: 10px;}
                }
                & .info {
                    > ul {
                        > li {display: flex; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px;
                            &:last-child {margin-bottom: 0;}
                            & .cate {width: 70px;
                                & p {line-height: 40px;}
                            }
                            & .desc {display: flex; width: calc(100% - 70px); margin-bottom: 10px;
                                &:last-child {margin-bottom: 0;}
                                & input[type="text"] {width: 100%; height: 40px; border-radius: 5px; padding: 0 10px;}
                                & textarea {width: 100%; border-radius: 5px; padding: 10px;}
                                & input[type="text"]:read-only {width: calc(100% - 100px);}
                                & input[type="file"] {display: none;}
                                & label {display: flex; justify-content: center; align-items: center; width: 50px; height: 40px; border-radius: 5px; background: #697385; font-size: 14px; color: #fff; padding: 8px 12px; margin-left: 5px;}
                                & button {width: 50px; margin-left: 5px;
                                    &.add {background: #E1E5ED; border-radius: 5px;
                                        & p {font-size: 14px;}
                                    }
                                    &.del {
                                        & p {width: 20px; height: 20px; border-radius: 50%; line-height: 20x; background: #9AA7BC; color: #fff;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .bt {text-align: center; margin-top: 50px;
                    & button {display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 10px; background: #16A775; font-size: 16px; font-weight: 500; line-height: 1; color: #fff;
                        & img {width: 24px; filter: brightness(0) invert(1);}
                        & p {font-size: 20px; font-weight: 500; line-height: 1; color: #fff; margin-left: 8px;}
                    }
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-box {width: calc(100% - 60px);
            & .modal-con {padding: 30px;
                & .close {width: 30px; height: 30px;}
                & .call {
                    & .tit {margin-bottom: 20px;
                        & p {font-size: 18px;}
                    }
                    & .info {
                        > ul {
                            > li {
                                & .cate {
                                    & p {font-size: 14px; line-height: 35px;}
                                }
                                & .desc {
                                    & input[type="text"] {height: 35px; font-size: 14px;}
                                    & textarea {font-size: 14px;}
                                    & label {height: 35px; font-size: 14px;}
                                    & button {height: 35px; font-size: 14px;}
                                }
                                > p {font-size: 12px;}
                            }
                        }
                    }
                    & .bt {
                        & button {font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* cert - modal */
.cert-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1001; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 50px; right: 0; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; padding: 0 10%; z-index: 1001; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 640px; background: #fff; z-index: 1001; opacity: 0; pointer-events: none; border-radius: 10px; overflow: hidden; transition: transform .7s ease-in-out, opacity .2s ease-in-out; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%);
        & .modal-con {width: 100%; height: 100%; padding: 20px; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .place {display: flex; flex-wrap: wrap; align-content: space-between; width: 100%; height: 100%;
                > div {width: 100%;}
                & .cp {display: flex; justify-content: space-between; align-items: center; height: 40px;
                    & p {width: 250px; font-size: 14px; font-weight: 600; color: #0782DA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                    & span {width: calc(100% - 300px); font-size: 12px; color: #697385; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                }
                & .con {margin: 0 0 20px;
                    & img {width: 100%;}
                }
                & .close {height: 40px;
                    & button {width: 100%; height: 100%; text-align: center; font-size: 14px; font-weight: 500; background: #292E41; color: #fff; border-radius: 5px;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-close {top: 30px;}
        & .modal-box {width: calc(100% - 40px); height: calc(var(--vh, 1vh) * 80);
            & .modal-con {
                & .place {
                    & .cp {flex-wrap: wrap; height: 50px;
                        & p {width: 100%; line-height: 30px;}
                        & span {width: 100%; line-height: 20px;}
                    }
                    & .con {height: calc(100% - 120px);}
                }
            }
        }
    }
}

/* report - modal */
.report-modal {position: relative; z-index: 99999;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 640px; background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .close {position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 36px; aspect-ratio: 1 / 1; background: #E1E5ED; border-radius: 0 0 0 10px; cursor: pointer;
                & i {font-size: 20px; color: #697385;}
            }
            & .report {
                & .tit {text-align: center; margin-bottom: 50px;
                    & img {width: 30px;}
                    & p {font-size: 24px; font-weight: 500; margin-top: 10px;}
                }
                & .info {
                    > ul {
                        > li {display: flex; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px;
                            &:last-child {margin-bottom: 0;}
                            & .cate {width: 70px;
                                & p {line-height: 40px;}
                            }
                            & .desc {display: flex; flex-wrap: wrap; width: calc(100% - 70px); margin-bottom: 10px;
                                &:last-child {margin-bottom: 0;}
                                & input[type="text"] {width: 100%; height: 40px; border-radius: 5px; padding: 0 10px;}
                                & textarea {width: 100%; border-radius: 5px; padding: 10px;}
                                & input[type="text"]:read-only {width: calc(100% - 75px);}
                                & input[type="file"] {display: none;}
                                & label {display: flex; justify-content: center; align-items: center; width: 70px; height: 40px; border-radius: 5px; background: #697385; font-size: 14px; color: #fff; padding: 8px 12px; margin-left: 5px;}
                                & p {position: relative; width: 100%; font-size: 14px; color: #697385; padding: 0 20px; margin-top: 10px;
                                    &::before {content: ''; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                                }
                            }
                        }
                    }
                }
                & .bt {display: flex; justify-content: center; margin-top: 70px;
                    & button {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-size: 16px; border-radius: 5px; background: #292E41; color: #fff; margin-right: 5px;}
                    & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222; margin-right: 0;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-box {width: calc(100% - 60px);
            & .modal-con {padding: 30px;
                & .close {width: 30px; height: 30px;}
                & .report {
                    & .tit {margin-bottom: 20px;
                        & p {font-size: 18px;}
                    }
                    & .info {
                        > ul {
                            > li {
                                & .cate {
                                    & p {font-size: 14px; line-height: 35px;}
                                }
                                & .desc {
                                    & input[type="text"] {height: 35px; font-size: 14px;}
                                    & textarea {font-size: 14px;}
                                    & label {height: 35px; font-size: 14px;}
                                    & button {height: 35px; font-size: 14px;}
                                    > p {font-size: 12px;}
                                }
                            }
                        }
                    }
                    & .bt {margin-top: 30px;
                        & button {height: 35px; font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* company report - modal */
.company-report-modal {position: relative; z-index: 9999;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 640px; background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .close {position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 36px; aspect-ratio: 1 / 1; background: #E1E5ED; border-radius: 0 0 0 10px; cursor: pointer;
                & i {font-size: 20px; color: #697385;}
            }
            & .report {
                & .tit {text-align: center; margin-bottom: 50px;
                    & img {width: 30px;}
                    & p {font-size: 24px; font-weight: 500; margin-top: 10px;}
                }
                & .info {
                    > ul {
                        > li {display: flex; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px;
                            &:last-child {margin-bottom: 0;}
                            & .cate {width: 70px;
                                & p {line-height: 40px;}
                            }
                            & .desc {display: flex; flex-wrap: wrap; width: calc(100% - 70px); margin-bottom: 10px;
                                &:last-child {margin-bottom: 0;}
                                & input[type="text"] {width: 100%; height: 40px; border-radius: 5px; padding: 0 10px;}
                                & textarea {width: 100%; border-radius: 5px; padding: 10px;}
                                & input[type="text"]:read-only {width: calc(100% - 75px);}
                                & input[type="file"] {display: none;}
                                & label {display: flex; justify-content: center; align-items: center; width: 70px; height: 40px; border-radius: 5px; background: #697385; font-size: 14px; color: #fff; padding: 8px 12px; margin-left: 5px;}
                                & p {position: relative; width: 100%; font-size: 14px; color: #697385; padding: 0 20px; margin-top: 10px;
                                    &::before {content: ''; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                                }
                            }
                        }
                    }
                }
                & .bt {display: flex; justify-content: center; margin-top: 70px;
                    & button {display: flex; justify-content: center; align-items: center; width: 160px; height: 44px; font-size: 16px; border-radius: 5px; background: #292E41; color: #fff; margin-right: 5px;}
                    & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222; margin-right: 0;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-box {width: calc(100% - 60px);
            & .modal-con {padding: 30px;
                & .close {width: 30px; height: 30px;}
                & .report {
                    & .tit {margin-bottom: 20px;
                        & p {font-size: 18px;}
                    }
                    & .info {
                        > ul {
                            > li {
                                & .cate {
                                    & p {font-size: 14px; line-height: 35px;}
                                }
                                & .desc {
                                    & input[type="text"] {height: 35px; font-size: 14px;}
                                    & textarea {font-size: 14px;}
                                    & label {height: 35px; font-size: 14px;}
                                    & button {height: 35px; font-size: 14px;}
                                    > p {font-size: 12px;}
                                }
                            }
                        }
                    }
                    & .bt {margin-top: 30px;
                        & button {height: 35px; font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* quotation - modal */
.quotation-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1001; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 50px; left: 50%; transform: translate(-50%, -100%); display: flex; justify-content: flex-end; width: 100%; max-width: 640px; z-index: 1001; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 640px; height: calc(100vh - 160px); padding: 40px; background: #fff; z-index: 1001; opacity: 0; pointer-events: none; border-radius: 10px; overflow: hidden; transition: transform .7s ease-in-out, opacity .2s ease-in-out; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%);
        .modal-con {position: relative; display: flex; align-content: center; flex-wrap: wrap; width: 100%; height: 100%;
            & .top {position: absolute; top: 0; left: 0; display: flex; align-items: center;
                & p {font-size: 18px; margin-right: 8px; line-height: 1.3;}
                & p strong {font-weight: 700;}
            }
            & .estimate {width: 100%;
                & .step {
                    & .tit {text-align: center; margin-bottom: 35px;
                        & p {font-size: 24px; font-weight: 500;}
                    }
                }
                & .step01 {
                    & .con {display: flex; justify-content: center; text-align: center;
                        & input[type="radio"] {display: none;}
                        & label {margin: 0 15px;}
                        & label > div {display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 30px;}
                        & label > div lord-icon {width: 70px; height: 70px;}
                        & label .c1 {background: #36be8f;}
                        & label .c2 {background: #65c4fa;}
                        & label .c3 {background: #a39cf4;}
                        & label .c4 {background: #ffcd42;}
                        & label p {font-size: 18px; font-weight: 600; color: #697385; margin-top: 15px;}
                    }
                }
                & .step02, .step03, .step04, .step05, .step06, .step07 {
                    & .con {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; align-items: center;
                        & input[type="radio"] {display: none;}
                        & label {border: 1px solid #D4D8E1; border-radius: 999px; text-align: center;}
                        & label:hover {border: 1px solid #36BE8F; background: #36BE8F;}
                        & label p {font-size: 15px; font-weight: 500; line-height: 1; padding: 10px 15px;}
                        & label:hover p {color: #fff;}
                    }
                    & .bt {display: flex; justify-content: center; margin-top: 35px;
                        & button {display: flex; justify-content: center; align-items: center;}
                        & button i {font-size: 20px; color: #8491A7;}
                        & button p {font-size: 18px; line-height: 1; margin-left: 6px;}
                    }
                }
                & .step08 {
                    & .write {padding: 0 50px; max-height: 300px; overflow-y: scroll;
                        & ul {
                            > li {display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; margin-bottom: 15px;
                                & .cate {width: 70px;
                                    & p {font-size: 14px; line-height: 30px; color: #222;}
                                }
                                & .desc {position: relative; display: flex; width: calc(100% - 70px); margin-bottom: 15px;
                                    > input[type="text"] {width: 100%; height: 30px; border-radius: 5px; padding: 0 12px;}
                                    > label {display: flex; justify-content: center; align-items: center; width: 80px; height: 30px; border-radius: 5px; background: #697385;
                                        & p {font-size: 14px; color: #fff;}
                                        & input[type="file"] {display: none;}
                                    }
                                    > textarea {padding: 12px; border-radius: 5px;}
                                    > .add {display: flex; justify-content: center; align-items: center; width: 50px; height: 30px; border-radius: 5px; border: 1px solid #D4D8E1; background: #E1E5ED;
                                        & p {font-size: 14px; line-height: 1;}
                                    }
                                    > .del {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: #9AA7BC; border-radius: 50%;
                                        & span {display: block; width: 10px; height: 3px; background: #fff; border-radius: 999px;}
                                    }
                                    > input[type="text"]:read-only {width: calc(100% - 140px);}
                                    &.attach-file {justify-content: flex-start; align-items: center; gap: 5px;}
                                }
                                & .desc:last-child {margin-bottom: 0;}
                            }
                            > li:last-child {margin-bottom: 0;}
                        }
                    }
                    & .bt {display: flex; justify-content: center; margin-top: 35px;
                        & button {display: flex; justify-content: center; align-items: center;}
                        & button i {font-size: 20px; color: #8491A7;}
                        & button p {font-size: 18px; line-height: 1; margin-left: 6px;}
                    }
                    & .apply {display: flex; justify-content: center; margin-top: 35px;
                        & button {display: flex; align-items: center; background: #16A775; border-radius: 10px; padding: 14px 20px;}
                        & button img {height: 24px; filter: brightness(0) invert(1);}
                        & button p {font-size: 20px; line-height: 1; font-weight: 500; color: #fff; margin-left: 8px;}
                    }
                }
            }
            & .progress {position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: #EAEDF4; border-radius: 999px;
                & p {position: absolute; bottom: calc(100% + 5px); left: 0; font-size: 16px; font-weight: 500; color: #697385;}
                & span {position: absolute; top: 0; left: 0; width: 10%; height: 100%; background: #8491A7; border-radius: 999px;}
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(-50%, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-close {padding: 0 20px; top: 70px;}
        & .modal-box {width: calc(100% - 40px); padding: 30px; height: calc((var(--vh, 1vh) * 100) - 200px);
            & .modal-con {
                & .top {width: 100%; justify-content: center;
                    & p {font-size: 16px;}
                }
                & .estimate {
                    & .step {
                        & .tit {margin-bottom: 25px;
                            & p {font-size: 18px;}
                        }
                    }
                    & .step01 {
                        & .con {justify-content: center;
                            & label {width: calc(100% / 5); margin: 0 10px;
                                > div {width: 100%; height: unset; aspect-ratio: 1 / 1; border-radius: 5px;
                                    & lord-icon {width: calc(100% - 20px); height: calc(100% - 20px);}
                                }
                            }
                        }
                    }
                    & .step02, .step03, .step04, .step05, .step06, .step07 {
                        & .con {grid-template-columns: repeat(4, minmax(0, 1fr));
                            & label {
                                & p {font-size: 13px;}
                            }
                        }
                        & .bt {
                            & button {
                                & i {font-size: 16px;}
                                & p {font-size: 15px;}
                            }
                        }
                    }
                    & .step08 {
                        & .tit {
                            & p {font-size: 16px;}
                        }
                        & .write {padding: 0 50px 0 0;
                            > ul {
                                > li {margin-bottom: 10px;}
                            }
                        }
                        & .bt {margin-top: 20px;
                            & button {
                                & i {font-size: 16px;}
                                & p {font-size: 15px;}
                            }
                        }
                        & .apply {margin-top: 20px;
                            & button {padding: 6px 12px;
                                & img {height: 20px;}
                                & p {font-size: 12px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-box {
            & .modal-con {
                & .top {display: none;}
                & .estimate {
                    & .step01 {
                        & .con {flex-wrap: wrap; gap: 10px 0;
                            & label {width: calc(100% / 2); margin: 0;
                                > div {width: 60%; margin: 0 auto;}
                                & p {font-size: 15px; margin-top: 10px;}
                            }
                        }
                    }
                    & .step02, .step03 {
                        & .con {grid-template-columns: repeat(3, minmax(0, 1fr));
                            & label {
                                & p {font-size: 12px; padding: 8px 12px; white-space: nowrap;}
                            }
                        }
                    }
                }
                & .progress {height: 4px;
                    & p {font-size: 14px;}
                }
            }
        }
    }
}

/* status - modal */
.status-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; right: 0; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; padding: 0 30px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); max-width: 1920px; width: calc(100vw - 60px); height: calc(100vh - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .status {display: flex; justify-content: space-between;
                & .status-con {width: calc(100% / 2 - 50px);
                    & .tit {margin-bottom: 30px;
                        & p {font-family: var(--key-font); font-size: 22px; font-weight: 500; margin-bottom: 10px;}
                        & span {}
                    }
                    & .list {
                        > ul {
                            > li {display: flex; align-items: center; border-bottom: 1px solid #F6F8FB;
                                > div {text-align: center; padding: 12px 0;
                                    & p {font-size: 14px; font-weight: 600; line-height: 1; color: #74839B;}
                                    & span {font-size: 14px; line-height: 1; color: #697385;}
                                }
                                & .date {width: 20%;
                                    & p {}
                                    & span {}
                                }
                                & .cate {width: 15%;
                                    & p {}
                                    & span {display: inline-block; padding: 5px 10px; border-radius: 999px;
                                        &.type01 {border: 1px solid #36BE8F; background: #36BE8F10; color: #16A775;}
                                        &.type02 {border: 1px solid #6FC9FA; background: #fff; color: #0782DA;}
                                        &.type03 {border: 1px solid #F3B200; background: #FFBB0410; color: #FF9E03;}
                                        &.type04 {border: 1px solid #6270F4; background: #F0F2FF; color: #6270F4;}
                                        &.normal {font-weight: 600; color: var(--basic-color-text); padding: 6px 10px;}
                                    }
                                }
                                & .name {width: 10%;
                                    & p {}
                                    & span {}
                                }
                                & .place {width: 40%;
                                    & p {}
                                    & span {display: block;}
                                }
                                & .current {width: 15%;
                                    & p {}
                                    & span {}
                                }
                            }
                            > li:first-child {background: #F6F8FB; border: 1px solid #E2E8F0;}
                        }
                    }
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1280px) {
        & .modal-box {
            & .modal-con {padding: 30px;
                & .status {
                    & .status-con {width: calc(100% / 2 - 20px);
                        & .list {
                            > ul {
                                > li {
                                    & .cate {width: 20%;}
                                    & .place {width: 35%;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .modal-box {
            & .modal-con {
                & .status {flex-wrap: wrap; gap: 30px;
                    & .status-con {width: 100%;
                        & .tit {margin-bottom: 20px;
                            & p {font-size: 18px; margin-bottom: 5px;}
                            & span {font-size: 15px;}
                        }
                        & .list {
                            > ul {
                                > li {
                                    & > div {padding: 8px 0;}
                                    & .date {width: 100px;}
                                    & .cate {width: 15%;
                                        & span {font-size: 12px; vertical-align: middle;}
                                    }
                                    & .place {width: calc(60% - 100px);}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .modal-box {
            & .modal-con {
                & .status {
                    & .status-con {
                        & .list {overflow-x: scroll;
                            > ul {width: 800px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-box {
            & .modal-con {
                & .status {
                    & .status-con {
                        & .tit {
                            & p {font-size: 16px; margin-bottom: 0;}
                            & span {font-size: 13px;}
                        }
                    }
                }
            }
        }
    }
}

/* popup - modal */
.popup-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 500px; background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .close {position: absolute; top: 0; right: 0; display: none; justify-content: center; align-items: center; width: 36px; aspect-ratio: 1 / 1; background: #E1E5ED; border-radius: 0 0 0 10px; cursor: pointer;
                & i {font-size: 20px; color: #697385;}
            }
            & .pop {
                & .text {text-align: center;
                    & p {font-size: 24px; font-weight: 500; line-height: 1.4;}
                    & span {display: block; font-size: 15px; color: #666; margin-top: 20px;}
                }
                & .bt {display: flex; justify-content: center; margin-top: 40px;
                    & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                    & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-box {max-width: unset; width: calc(100% - 40px);
            & .modal-con {padding: 30px 0;
                & .pop {
                    & .text {
                        & p {font-size: 18px;}
                        & span {font-size: 14px;}
                    }
                    & .bt {margin-top: 30px;
                        & button {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* popup - modal */
.extend-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 500px; background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .close {display: none;}
            & .pop {
                & .text {text-align: center;
                    & p {font-size: 18px; font-weight: 500; line-height: 1.4;}
                    & span {display: block; font-size: 15px; color: #666; margin-top: 20px;}
                }
                & .bt {display: flex; justify-content: center; margin-top: 40px;
                    & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                    & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-box {max-width: unset; width: calc(100% - 40px);
            & .modal-con {padding: 30px 0;
                & .pop {
                    & .text {
                        & p {font-size: 18px;}
                        & span {font-size: 14px;}
                    }
                    & .bt {margin-top: 30px;
                        & button {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
            }
        }
    }
}

.change-portfolio-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 500px; background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px 5%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .close {display: none;}
            & .pop {
                & .text {text-align: center;
                    & p {font-size: 18px; font-weight: 500; line-height: 1.4;}
                    & span {display: block; font-size: 15px; color: #666; margin-top: 20px;}
                }
                & .bt {display: flex; justify-content: center; margin-top: 40px;
                    & button {width: 160px; height: 40px; font-size: 16px; background: #292E41; color: #fff; border-radius: 5px; margin-right: 5px;}
                    & button:last-child {background: #fff; border: 1px solid #E1E5ED; color: #222; margin-right: 0;}
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(0, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 640px) {
        & .modal-box {max-width: unset; width: calc(100% - 40px);
            & .modal-con {padding: 30px 0;
                & .pop {
                    & .text {
                        & p {font-size: 18px;}
                        & span {font-size: 14px;}
                    }
                    & .bt {margin-top: 30px;
                        & button {width: 100px; height: 35px; font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* contract - modal */
.contract-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; left: 50%; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; max-width: 1400px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 1400px; height: calc(100vh - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .paper {
                & .tit {text-align: center;
                    & h2 {font-size: 40px; line-height: 1; margin-bottom: 15px;
                        & strong {}
                    }
                    & p {font-size: 20px; line-height: 1;}
                }
                & .con {border-top: 1px solid #0F162A; margin: 48px 0;
                    > ul {
                        > li {display: flex;
                            > div {padding: 18px 40px; border-bottom: 1px solid #CBCBCB;}
                            & .cate {width: 100%; max-width: 250px; background: #f9f9f9;
                                & p {font-weight: 600; color: #222;}
                            }
                            & .desc {width: calc(100% - 250px);
                                & p {color: #222; margin-top: 10px;
                                    &:first-child {margin-top: 0;}
                                    & strong {}
                                }
                                & a {display: flex; align-items: center; margin-top: 10px;
                                    &:first-child {margin-top: 0;}
                                    & i {font-size: 14px; margin-right: 5px;}
                                }
                            }
                        }
                    }
                }
                & .text {padding: 30px; background: #F9F9F9; border-radius: 10px; margin-bottom: 48px;
                    & p {font-size: 20px; color: #222; margin-bottom: 10px;
                        &:last-child {margin-bottom: 0;}
                    }
                }
                & .date {text-align: center;
                    & p {font-size: 24px; font-weight: 700;}
                }
                & .sign {display: flex; justify-content: space-between; margin: 48px 0;
                    & .info {width: calc(100% / 2 - 20px);
                        & .cp {margin-bottom: 20px;
                            & p {font-size: 18px; font-weight: 600;}
                        }
                        & .tb {display: flex; width: 100%;
                            > ul {width: 100%; border-top: 1px solid #222;
                                > li {display: flex; border-bottom: 1px solid #CBCBCB;
                                    > div {padding: 18px 40px;}
                                    & .cate {width: 200px; background: #F9F9F9;
                                        & p {font-weight: 600;}
                                    }
                                    & .desc {width: calc(100% - 200px);
                                        & .sign-box {position: relative; width: 100%; height: 100px; border: 1px solid #CBCBCB; border-radius: 5px; margin-bottom: 10px; overflow: hidden;
                                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-height: 90%; object-fit: cover;}
                                            &::after {content: 'Signature'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #CBCBCB; transition: all 0.2s;}
                                            &:hover::after {opacity: 0;}
                                            &.fin {
                                                &::after {content: none;}
                                            }
                                        }
                                        & p {}
                                        & button {width: 80px; height: 30px; border-radius: 5px; font-size: 14px; background: #fff; border: 1px solid #63687A; color: #63687A; margin: 10px 0 0;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .guide {padding: 30px; background: #f9f9f9;
                    & p {font-size: 20px;}
                }
            }
            & .clauses {margin-top: 80px; padding-bottom: 120px;
                & .tit {text-align: center; margin-bottom: 48px;
                    & h2 {font-size: 40px; line-height: 1; font-weight: 700; margin-bottom: 15px;}
                    & p {font-size: 20px; line-height: 1;}
                }
                & .con {
                    > ul {
                        > li {margin-bottom: 30px;
                            &:last-child {margin-bottom: 0;}
                            & h4 {font-weight: 600;}
                            & p {margin-top: 10px;}
                            & span {position: relative; display: block; padding-left: 22px; margin-top: 10px;
                                & strong {position: absolute; top: 0; left: 0;}
                                & b {}
                            }
                        }
                    }
                }
            }
            & .list {
                & .text {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;
                    & p {font-size: 18px; font-weight: 600;}
                    & span {font-size: 14px; color: #697385;}
                }
                & .tb {
                    & table {width: 100%; border-top: 1px solid #0F162A; border-bottom: 1px solid #0F162A; table-layout: fixed;
                        & tr {
                            & td {text-align: center; padding: 18px; vertical-align: middle;
                                & p {font-size: 16px; line-height: 1; color: #222;}
                            }
                            & td.cate {width: 200px;}
                            & td.desc {width: calc(100% - 30% - 200px);}
                            & td.price {width: 10%;}
                            & td.vat {width: 10%;}
                            & td.total {width: 10%;}
                        }
                        & thead {
                            & tr {background: #F9F9F9;
                                & td {font-weight: 600;}
                            }
                        }
                        & tbody {
                            & tr {border-top: 1px solid #CBCBCB;
                                & td.desc {text-align: left;}
                            }
                        }
                        & tfoot {
                            & tr {background: #F9F9F9; border-top: 1px solid #0F162A;
                                & td.t {
                                    & p {font-weight: 600;}
                                }
                                & td.n {
                                    & p {font-size: 26px; font-weight: 600; text-align: right;}
                                }
                            }
                        }
                    }
                }
            }
            & .bt {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%); padding: 80px 0;
                & button {width: 160px; height: 44px; border-radius: 5px; font-size: 16px; background: #292E41; color: #fff;}
                & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222; margin-left: 5px;}
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(-50%, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1400px) {
        & .modal-close {top: 20px; padding: 0 30px;}
        & .modal-box {width: calc(100% - 60px); height: calc(var(--vh, 1vh) * 100 - 100px); max-width: unset;
            & .modal-con {padding: 40px;
                & .paper {
                    & .tit {
                        & h2 {font-size: 30px;}
                        & p {font-size: 16px;}
                    }
                    & .con {margin: 30px 0;}
                    & .text {margin-bottom: 30px;
                        & p {font-size: 16px;}
                    }
                    & .date {
                        & p {font-size: 20px;}
                    }
                    & .sign {
                        & .info {
                            & .cp {
                                & p {font-size: 16px;}
                            }
                        }
                    }
                    & .guide {
                        & p {font-size: 16px;}
                    }
                }
                & .clauses {padding-bottom: 60px;
                    & .tit {margin-bottom: 30px;
                        & h2 {font-size: 30px;}
                        & p {font-size: 16px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {
                & .paper {
                    & .tit {
                        & h2 {font-size: 24px; margin-bottom: 10px;}
                    }
                    & .con {margin: 20px 0 30px;
                        > ul {
                            > li {
                                > div {padding: 10px 15px;}
                                & .cate {width: 200px;
                                    & p {font-size: 14px;}
                                }
                                & .desc {width: calc(100% - 200px);
                                    & p {font-size: 14px; margin-top: 5px;}
                                    & a {font-size: 14px; margin-top: 5px;}
                                }
                            }
                        }
                    }
                    & .text {padding: 15px;
                        & p {font-size: 14px;}
                    }
                    & .date {
                        & p {font-size: 18px;}
                    }
                    & .sign {flex-wrap: wrap; margin: 30px 0;
                        & .info {width: 100%; margin-bottom: 15px;
                            &:last-child {margin-bottom: 0;}
                            & .cp {margin-bottom: 15px;
                                & p {font-size: 15px;}
                            }
                            & .tb {
                                > ul {
                                    > li {
                                        > div {padding: 10px 15px;}
                                        & .cate {width: 200px;
                                            & p {font-size: 14px;}
                                        }
                                        & .desc {width: calc(100% - 200px);
                                            & p {font-size: 14px;}
                                            & .sign-box {
                                                & img {width: unset; max-height: unset;}
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .guide {padding: 15px;
                        & p {font-size: 14px;}
                    }
                }
                & .clauses {
                    & .tit {
                        & h2 {font-size: 24px;}
                        & p {font-size: 14px;}
                    }
                    & .con {
                        > ul {
                            > li {margin-bottom: 15px;
                                & h4 {font-size: 14px;}
                                & p {font-size: 14px; margin-top: 6px;}
                                & span {font-size: 14px; margin-top: 6px;}
                            }
                        }
                    }
                }
                & .list {
                    & .text {margin-bottom: 15px;
                        & p {font-size: 15px;}
                        & span {font-size: 12px;}
                    }
                    & .tb {
                        & table {
                            & tr {
                                & td {padding: 10px;
                                    &.cate {width: 100px;}
                                    &.desc {width: calc(55% - 100px);}
                                    &.price {width: 15%;}
                                    &.vat {width: 15%;}
                                    &.total {width: 15%;}
                                    & p {font-size: 14px;}
                                }
                            }
                            & tfoot {
                                & tr {
                                    & td.n {
                                        & p {font-size: 14px;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .modal-box {
            & .modal-con {padding: 25px 30px;
                & .paper {
                    & .tit {
                        & h2 {font-size: 18px;}
                        & p {font-size: 14px;}
                    }
                    & .con {
                        > ul {
                            > li {flex-wrap: wrap;
                                > div {padding: 10px;}
                                & .cate {width: 100%; max-width: unset;
                                    & p {font-size: 13px;}
                                }
                                & .desc {width: 100%; font-size: 13px;
                                    & p {font-size: 13px;}
                                    & a {font-size: 13px;
                                        & i {font-size: 12px;}
                                    }
                                }
                            }
                        }
                    }
                    & .sign {
                        & .info {
                            & .tb {
                                > ul {
                                    > li {flex-wrap: wrap;
                                        > div {padding: 10px;}
                                        & .cate {width: 100%;
                                            & p {font-size: 13px;}
                                        }
                                        & .desc {width: 100%; font-size: 13px;
                                            & p {font-size: 13px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                & .clauses {
                    & .tit {
                        & h2 {font-size: 18px;}
                    }
                }
                & .list {
                    & .tb {overflow-x: scroll;
                        & table {width: 860px;}
                    }
                }
            }
        }
    }
}

/* estimate - modal */
.estimate-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; left: 50%; transform: translate(0, -100%); display: flex; justify-content: flex-end; width: 100%; max-width: 1400px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 1400px; height: calc(100vh - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 80px; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .paper {padding-bottom: 120px;
                & .tit {
                    & p {font-size: 30px; line-height: 1;}
                }
                & .name {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 40px;
                    & button {font-size: 16px; line-height: 1; padding: 12px 20px; border-radius: 999px; border: 1px solid #E1E5ED; background: #fff;
                        &.on {background: #697385; border: 1px solid #697385; color: #fff;}
                    }
                }
                & .info {border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 20px 0; margin: 48px 0;
                    > ul {display: flex;
                        > li {width: calc(100% / 3); padding: 0 20px; border-right: 1px solid #E8E8E8;
                            &:last-child {border-right: 0;}
                            & .company {
                                & p {font-weight: 700; margin-bottom: 10px;}
                                & span {display: block; line-height: 1.4;}
                            }
                            & .total {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; align-content: space-between; height: 100%;
                                & p {width: 100%; font-weight: 700;}
                                & span {}
                                & h2 {text-align: right;
                                    & strong {display: block; font-size: 50px; margin-bottom: 10px;}
                                    & b {text-decoration: underline; font-weight: 400;}
                                }
                            }
                        }
                    }
                }
                & .list {
                    & .text {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;
                        & p {font-size: 18px; font-weight: 600;}
                        & span {font-size: 14px; color: #697385;}
                    }
                    & .tb {
                        & table {width: 100%; border-top: 1px solid #0F162A; border-bottom: 1px solid #0F162A; table-layout: fixed;
                            & tr {
                                & td {text-align: center; padding: 18px; vertical-align: middle;
                                    & p {font-size: 16px; line-height: 1; color: #222;}
                                }
                                & td.cate {width: 200px;}
                                & td.desc {width: calc(100% - 30% - 200px);}
                                & td.price {width: 10%;}
                                & td.vat {width: 10%;}
                                & td.total {width: 10%;}
                            }
                            & thead {
                                & tr {background: #F9F9F9;
                                    & td {font-weight: 600;}
                                }
                            }
                            & tbody {
                                & tr {border-top: 1px solid #CBCBCB;
                                    & td.desc {text-align: left;}
                                }
                            }
                            & tfoot {
                                & tr {background: #F9F9F9; border-top: 1px solid #0F162A;
                                    & td.t {
                                        & p {font-weight: 600;}
                                    }
                                    & td.n {
                                        & p {font-size: 26px; font-weight: 600; text-align: right;}
                                    }
                                }
                            }
                        }
                    }
                }
                & .guide {padding: 15px 20px; background: #f9f9f9; border-radius: 10px; margin-top: 40px;
                    & p {position: relative; padding-left: 15px;
                        &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; aspect-ratio: 1 / 1; border-radius: 50%; background: #0F162A;}
                    }
                }
            }
            & .bt {position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 5px; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%); padding: 80px 0;
                & button {width: 160px; height: 44px; border-radius: 5px; font-size: 16px; background: #292E41; color: #fff;}
                & button:nth-child(2) {border: 1px solid #2C9E4F; background: #2C9E4F;}
                & button:last-child {border: 1px solid #E1E5ED; background: #fff; color: #222;}
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(-50%, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    &.print {
        & .modal-box {box-shadow: none;
            & .modal-con {padding: 0;
                & .paper {padding-bottom: 0;
                    & .name {display: none;}
                }
            }
        }
    }
    @media (width <= 1400px) {
        & .modal-close {top: 20px; padding: 0 20px;}
        & .modal-box {width: calc(100% - 40px); height: calc(var(--vh, 1vh) * 100 - 100px);
            & .modal-con {padding: 40px;
                & .paper {
                    & .name {margin-top: 30px;}
                    & .info {margin: 30px 0;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {
                & .paper {padding-bottom: 80px;
                    & .tit {
                        & p {font-size: 24px;}
                    }
                    & .name {margin-top: 20px;
                        & button {font-size: 14px; padding: 5px 15px;}
                    }
                    & .info {margin: 20px 0 40px; padding: 0;
                        > ul {flex-wrap: wrap;
                            > li {width: calc(100% / 2); border-right: 0; padding: 20px 10px;
                                &:last-child {width: 100%; border-top: 1px solid #E8E8E8;}
                                & .company {
                                    & p {font-size: 15px;}
                                    & span {font-size: 14px;}
                                }
                                & .total {
                                    & p {font-size: 15px;}
                                    & span {font-size: 14px;}
                                    & h2 {font-size: 14px;
                                        & strong {font-size: 30px;}
                                    }
                                }
                            }
                        }
                    }
                    & .list {
                        & .text {margin-bottom: 15px;
                            & p {font-size: 15px;}
                            & span {font-size: 12px;}
                        }
                        & .tb {
                            & table {
                                & tr {
                                    & td {padding: 10px;
                                        &.cate {width: 100px;}
                                        &.desc {width: calc(55% - 100px);}
                                        &.price {width: 15%;}
                                        &.vat {width: 15%;}
                                        &.total {width: 15%;}
                                        & p {font-size: 14px;}
                                    }
                                }
                                & tfoot {
                                    & tr {
                                        & td.n {
                                            & p {font-size: 14px;}
                                        }
                                    }
                                }
                            }
                        }
                    }
                    & .guide {
                        & p {font-size: 15px;}
                    }
                }
                & .bt {padding: 40px 0;
                    & button {width: 120px; height: 35px; font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .modal-box {
            & .modal-con {padding: 30px 25px;
                & .paper {
                    & .tit {
                        & p {font-size: 18px;}
                    }
                    & .info {
                        > ul {
                            > li {width: 100%; padding: 10px;
                                &:first-child {border-bottom: 1px solid #E8E8E8;}
                            }
                        }
                    }
                    & .list {
                        & .tb {overflow-x: scroll;
                            & table {width: 860px;}
                        }
                    }
                    & .guide {padding: 10px 15px;
                        & p {font-size: 14px;}
                    }
                }
                & .bt {padding: 30px 25px;
                    & button {width: calc(100% / 3); font-size: 12px;}
                }
            }
        }
    }
}

/* agree - modal */
.agree-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; left: 50%; transform: translate(-50%, 0); display: flex; justify-content: flex-end; width: 100%; max-width: 1400px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 1400px; height: calc((var(--vh, 1vh) * 100) - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 5% 10%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .agree {margin: 0 0 60px;
                &:last-child {margin: 0;}
                & .agree-con {
                    & .tit {text-align: center; margin-bottom: 48px;
                        & h2 {font-size: 40px; line-height: 1; font-weight: 700;}
                    }
                    & .con {
                        > ul {
                            > li {margin-bottom: 30px;
                                &:last-child {margin-bottom: 0;}
                                & h4 {font-weight: 600;}
                                & p {margin-top: 10px;}
                                & span {position: relative; display: block; padding-left: 22px; margin-top: 10px;
                                    & strong {position: absolute; top: 0; left: 0;}
                                    & b {}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(-50%, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1640px) {
        & .modal-close {width: calc(100% - 60px);}
        & .modal-box {width: calc(100% - 60px);}
    }
    @media (width <= 1280px) {
        & .modal-box {
            & .modal-con {padding: 30px;
                & .agree {
                    & .agree-con {
                        & .tit {margin-bottom: 30px;
                            & h2 {font-size: 24px;}
                        }
                        & .con {padding: 0 30px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {padding: 25px;
                & .agree {
                    & .agree-con {
                        & .tit {
                            & h2 {font-size: 20px;}
                        }
                        & .con {padding: 0 25px;
                            > ul {
                                > li {margin-bottom: 25px;
                                    & h4 {font-size: 15px;}
                                    & span {font-size: 14px;}
                                    & p {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-box {
            & .modal-con {padding: 30px 20px;
                & .agree {
                    & .agree-con {
                        & .tit {margin-bottom: 20px;
                            & h2 {font-size: 18px;}
                        }
                        & .con {padding: 0 10px;
                            > ul {
                                > li {
                                    & h4 {}
                                    & span {}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* privacy - modal */
.privacy-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; left: 50%; transform: translate(-50%, 0); display: flex; justify-content: flex-end; width: 100%; max-width: 1400px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 1400px; height: calc((var(--vh, 1vh) * 100) - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 5% 10%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .agree {
                & .agree-con {
                    & .tit {text-align: center; margin-bottom: 48px;
                        & h2 {font-size: 40px; line-height: 1; font-weight: 700;}
                    }
                    & .con {
                        > ul {
                            > li {margin-bottom: 30px;
                                &:last-child {margin-bottom: 0;}
                                & h4 {font-weight: 600;}
                                & p {margin-top: 10px;}
                                & span {position: relative; display: block; padding-left: 22px; margin-top: 10px;
                                    & strong {position: absolute; top: 0; left: 0;}
                                    & b {}
                                }
                                & table {width: 100%; table-layout: fixed; border-top: 1px solid #eee; margin: 10px 0;
                                    & tr {border-bottom: 1px solid #eee;
                                        & td {font-size: 14px; padding: 5px; text-align: center; border-right: 1px solid #eee; vertical-align: middle;
                                            &.brn {border-right: 0;}
                                        }
                                    }
                                    & thead {background: #f9f9f9;
                                        & tr {
                                            & td {font-weight: 600;}
                                        }
                                    }
                                    & tbody {
                                        & tr {
                                            & td {}
                                        }
                                    }
                                    &:last-child {margin: 10px 0 0;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(-50%, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1640px) {
        & .modal-close {width: calc(100% - 60px);}
        & .modal-box {width: calc(100% - 60px);}
    }
    @media (width <= 1280px) {
        & .modal-box {
            & .modal-con {padding: 30px;
                & .agree {
                    & .agree-con {
                        & .tit {margin-bottom: 30px;
                            & h2 {font-size: 24px;}
                        }
                        & .con {padding: 0 30px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {padding: 25px;
                & .agree {
                    & .agree-con {
                        & .tit {
                            & h2 {font-size: 20px;}
                        }
                        & .con {padding: 0 25px;
                            > ul {
                                > li {margin-bottom: 25px;
                                    & h4 {font-size: 15px;}
                                    & span {font-size: 14px;}
                                    & p {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-box {
            & .modal-con {padding: 30px 20px;
                & .agree {
                    & .agree-con {
                        & .tit {margin-bottom: 20px;
                            & h2 {font-size: 18px;}
                        }
                        & .con {padding: 0 10px;
                            > ul {
                                > li {
                                    & h4 {}
                                    & span {}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* mail - modal */
.mail-modal {position: relative;
    & .modal-bg {position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .15s linear;}
    & .modal-close {position: fixed; top: 0; left: 50%; transform: translate(-50%, 0); display: flex; justify-content: flex-end; width: 100%; max-width: 1400px; z-index: 1000; transition: transform .7s ease-in-out, opacity .2s ease-in-out; opacity: 0; pointer-events: none;
        & button {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px;}
        & button i {font-size: 24px; color: #fff;}
    }
    & .modal-box {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 100%; max-width: 1400px; height: calc((var(--vh, 1vh) * 100) - 60px); background: #fff; z-index: 1000; opacity: 0; pointer-events: none; border-radius: 10px; transition: transform .7s ease-in-out, opacity .2s ease-in-out; overflow-y: scroll; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%); -ms-overflow-style: none;
        &::-webkit-scrollbar {display: none;}
        & .modal-con {width: 100%; height: 100%; padding: 5% 10%; overflow-y: scroll; -ms-overflow-style: none;
            &::-webkit-scrollbar {display: none;}
            & .agree {
                & .agree-con {
                    & .tit {text-align: center; margin-bottom: 48px;
                        & h2 {font-size: 40px; line-height: 1; font-weight: 700;}
                    }
                    & .con {
                        > ul {
                            > li {margin-bottom: 30px;
                                &:last-child {margin-bottom: 0;}
                                & h4 {font-weight: 600;}
                                & p {margin-top: 10px;}
                                & span {position: relative; display: block; padding-left: 22px; margin-top: 10px;
                                    & strong {position: absolute; top: 0; left: 0;}
                                    & b {}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &.on {
        & .modal-bg {opacity: 0.86; pointer-events: visible;}
        & .modal-close {transform: translate(-50%, 0); pointer-events: visible; opacity: 1;}
        & .modal-box {transform: translate(-50%, -50%); pointer-events: visible; opacity: 1;}
    }
    @media (width <= 1640px) {
        & .modal-close {width: calc(100% - 60px);}
        & .modal-box {width: calc(100% - 60px);}
    }
    @media (width <= 1280px) {
        & .modal-box {
            & .modal-con {padding: 30px;
                & .agree {
                    & .agree-con {
                        & .tit {margin-bottom: 30px;
                            & h2 {font-size: 24px;}
                        }
                        & .con {padding: 0 30px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .modal-box {
            & .modal-con {padding: 25px;
                & .agree {
                    & .agree-con {
                        & .tit {
                            & h2 {font-size: 20px;}
                        }
                        & .con {padding: 0 25px;
                            > ul {
                                > li {margin-bottom: 25px;
                                    & h4 {font-size: 15px;}
                                    & span {font-size: 14px;}
                                    & p {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .modal-box {
            & .modal-con {padding: 30px 20px;
                & .agree {
                    & .agree-con {
                        & .tit {margin-bottom: 20px;
                            & h2 {font-size: 18px;}
                        }
                        & .con {padding: 0 10px;
                            > ul {
                                > li {
                                    & h4 {}
                                    & span {}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* popup */
.div_popup{
    z-index: 99 !important;
    border: 1px solid rgba(0,0,0,.1); box-sizing: border-box;
    min-width: 320px;
}
.div_popup table {
    width: 100%;
}
.div_popup .divpop-img img {
    width: 100%;
}
.div_popup .divpop-bottom{
    background: #fff;
}
.div_popup .divpop-bottom a td::after {
    content: ''; display: block; clear: both;
}
.div_popup .divpop-bottom a{
    display: inline-block;
    color: #222;
    font-size: 14px; letter-spacing: -0.5px; vertical-align: middle;
    margin: 0 20px; line-height: 40px;

    transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -webkit-transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -moz-transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -o-transition: all .2s cubic-bezier(.08, .03, .22, .87);
}
.div_popup .divpop-bottom a:hover {
    color: #999;
}
.div_popup .divpop-bottom a.close {
    float: right;
    position: relative;
    padding: 0 25px 0 0;
}
.div_popup .divpop-bottom a.close::before {
    content: ''; display: inline-block;
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);

    transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -webkit-transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -moz-transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -o-transition: all .2s cubic-bezier(.08, .03, .22, .87);

    width: 17px; height: 1px;
    background: #222;
}
.div_popup .divpop-bottom a.close::after {
    content: ''; display: inline-block;
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) rotate(-45deg);

    transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -webkit-transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -moz-transition: all .2s cubic-bezier(.08, .03, .22, .87);
    -o-transition: all .2s cubic-bezier(.08, .03, .22, .87);

    width: 17px; height: 1px;
    background: #222;
}
.div_popup .divpop-bottom a.close:hover::before,
.div_popup .divpop-bottom a.close:hover::after {
    background: #999;
}
.div_popup .divpop-bottom a.today {
    float: left;
}

@media screen and (max-width:640px){
    .div_popup{
        z-index: 999999 !important;
        width: 90% !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
    }
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #sitemapBG {display: none;}
}

/* IE6,7 */
@media screen\9 {
    #sitemapBG {display: none;}
}

/* IE8 */
@media \0screen {
    #sitemapBG {display: none;}
}

/* IE6,7,8 */
@media \0screen\,screen\9 {
    #sitemapBG {display: none;}
}

/* IE9,10 */
@media screen and (min-width:0\0){
    #sitemapBG {display: none;}
}