@charset "utf-8";

/* portfolio */
.portfolio {
    & .portfolio-box {margin-bottom: 100px;
        & .portfolio-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
            & .left {
                & .total {
                    & p {font-size: 15px; line-height: 1; color: #666;}
                }
                & .text {display: flex; align-items: flex-end;
                    & p {font-family: var(--key-font); font-size: 20px; line-height: 1; margin-right: 10px;}
                    & 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: 120px; 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;}
                        }
                        &.type02 {
                            & .bar {
                                &::before {content: none;}
                                & button {color: #fff;}
                                &.on {background: #fff;
                                    & button {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;}
                }
            }
        }
        & .portfolio-list {
            > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px;
                > li {position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
                    & .thumbs {position: relative; padding-top: 75%;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .overlay {position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 1px solid #B9E1C6; background: linear-gradient(#F5FEF8 0%, #F5F9FE 100%); border-radius: 10px; opacity: 0; pointer-events: none; transition: all 0.2s;
                        & .con {width: 100%; text-align: center; padding: 0 15px;
                            & .info {margin-bottom: 20px;
                                & img {max-height: 20px;}
                                & p {font-size: 20px; line-height: 1; font-weight: 600; margin-top: 8px;}
                            }
                            & .place {margin-bottom: 8px;
                                & p {display: inline-block; font-size: 14px; line-height: 1; font-weight: 600; padding: 4px 8px; color: #697385; border: 1px solid #E1E5ED; border-radius: 8px; background: #fff;}
                            }
                            & .cate {display: flex; justify-content: center;
                                & p {font-size: 14px; font-weight: 600; line-height: 1; color: #0782DA; border: 1px solid #6FC9FA; border-radius: 999px; background: #6FC9FA35; margin-right: 4px; padding: 4px 10px;}
                                & p:nth-child(2) {border: 1px solid #6FC9FA; background: #6FC9FA10;}
                                & p:nth-child(3) {border: 1px solid #6FC9FA; background: #fff; margin-right: 0;}
                                &.type02 p {color: #16A775; border: 1px solid #36BE8F;}
                                &.type02 p:nth-child(1) {background: #36BE8F20;}
                                &.type02 p:nth-child(2) {background: #36BE8F10;}
                                &.type03 p {color: #FF9E03; border: 1px solid #F3B200;}
                                &.type03 p:nth-child(1) {background: #FFBB0440;}
                                &.type03 p:nth-child(2) {background: #FFBB041A;}
                            }
                            & .desc {margin-top: 20px;
                                & p {font-weight: 600; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
                            }
                        }
                    }
                    &:hover .overlay {opacity: 1; pointer-events: visible;}
                }
            }
            &.type01 > ul {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px;
                & li {
                    & .overlay {background: #F5FEF8; border: 1px solid #C5EEDE;}
                }
            }
            &.type02 > ul {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 25px;
                & li {border-radius: 0;
                    & .overlay {background: #F2F7FF; border: 1px solid #CADFFF; border-radius: 0;
                        & .con {
                            & .info {margin-bottom: 12px;
                                & p {font-size: 16px;}
                            }
                            & .desc {margin-top: 12px;
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
            &.type03 > ul {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 25px;
                & li {border-radius: 0;
                    & .overlay {background: #F8F6FF; border: 1px solid #DDD5FF; border-radius: 0;
                        & .con {
                            & .info {margin-bottom: 12px;
                                & p {font-size: 15px;}
                            }
                            & .cate {
                                & p {font-size: 12px;}
                            }
                            & .desc {margin-top: 12px;
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
        }
        & .portfolio-list-m {display: none;
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px;
                > li {position: relative; background: linear-gradient(90deg, var(--basic-color) 0%, #4761F9 100%); padding-top: 4px; border-radius: 8px 8px 0 0; cursor: pointer;
                    > div {background: #fff;}
                    & .info {position: relative; padding: 16px 24px; border-radius: 5px 5px 0 0; border: 1px solid #D1D1D150; border-bottom: 0;
                        & .company {display: flex; align-items: center; margin-bottom: 15px;}
                        & .company .logo {position: relative; display: flex; justify-content: center; align-items: center; max-width: 90px; height: 20px; overflow: hidden; margin-right: 8px;}
                        & .company .logo img {width: 100%; max-height: 100%;}
                        & .company .name {display: flex; align-items: center;}
                        & .company .name p {font-size: 20px; font-weight: 600; line-height: 1; margin-right: 6px;}
                        & .company .name i {transition: all 0.2s;}
                        &:hover .company .name i {transform: translateX(5px);}
                        & .cate {display: flex; align-items: center;}
                        & .cate p {font-size: 14px; line-height: 1; font-weight: 600; color: #697385; padding: 4px 8px; border: 1px solid #E1E5ED; border-radius: 8px; margin-right: 8px;}
                        & .cate span {font-size: 14px; font-weight: 600; line-height: 1; color: #292E4160; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}    
                        & .favorite {position: absolute; top: 16px; right: 24px;}
                        & .favorite button {}
                        & .favorite button i {color: #EAEDF4; transition: all 0.2s;}
                        & .favorite button.on i {color: #36BE8F;}
                        & .favorite button:hover i {color: #36BE8F;}
                    }
                    & .thumbs {
                        & .img {position: relative; padding-top: 60%; border-radius: 0 0 8px 8px; overflow: hidden;}
                        & .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                        & .img 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;}
                        & .img p.type01 {color: #9CFFA8; background-image: url("/assets/site/img/main/sec02-type01.svg");}
                        & .img p.type02 {color: #FFFA68; background-image: url("/assets/site/img/main/sec02-type02.svg");}
                        & .img p.type03 {color: #97EBFF; background-image: url("/assets/site/img/main/sec02-type03.svg");}
                    }
                }
            }
        }
        & .portfolio-grid {
            > ul {border-top: 1px solid #8491A7;
                > li {display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid #E1E5ED; cursor: pointer;
                    & .thumbs {position: relative; width: 120px; aspect-ratio: 4 / 3; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .info {display: flex; align-items: center; width: calc(65% - 120px); padding: 0 30px;
                        & p {font-size: 15px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                        & span {display: block; font-family: var(--key-font); font-size: 12px; line-height: 1; border-radius: 5px; padding: 5px; margin-left: 30px;}
                        & span.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #2C9E4F;}
                        & span.type02 {color: #07BB9D; border: 1px solid #07BB9D;}
                        & span.type03 {color: #3675FF; border: 1px solid #3675FF;}
                        & span.type04 {color: #7758FF; border: 1px solid #7758FF;}
                    }
                    & .cate {display: flex; justify-content: center; width: 15%;
                        & 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;}
                        &.type02 p {color: #16A775; border: 1px solid #36BE8F;}
                        &.type02 p:nth-child(1) {background: #36BE8F20;}
                        &.type02 p:nth-child(2) {background: #36BE8F10;}
                        &.type03 p {color: #FF9E03; border: 1px solid #F3B200;}
                        &.type03 p:nth-child(1) {background: #FFBB0440;}
                        &.type03 p:nth-child(2) {background: #FFBB041A;}
                    }
                    & .place {width: 10%; text-align: center;
                        & p {font-size: 15px; font-weight: 600; color: #8491A7;}
                    }
                    & .company {width: 10%; text-align: center;
                        & p {font-size: 18px; font-weight: 600;}
                    }
                    & .time {width: 10%; text-align: center;
                        & p {font-size: 14px; color: #0782DA;}
                    }
                }
                &.on {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; border-top: 0;
                    > li {padding: 0; border-bottom: 0;}
                    > li > div {display: none;}
                    > li > div.thumbs {display: block; width: 100%; aspect-ratio: unset; padding-top: 75%; transition: all 0.2s;}
                }
            }
            > ul.today {
                > li {
                    & .info {width: calc(55% - 120px);}
                }
            }
        }
        & .portfolio-more {margin-top: 25px;
            > button {display: flex; justify-content: center; align-items: center; width: 200px; height: 45px; margin: 0 auto; border: 1px solid #E1E5ED; border-radius: 999px;
                & i {font-size: 12px; line-height: 1; color: #9AA7BC;}
                & p {font-size: 15px; color: #697385; margin-left: 10px;}
            }
        }
        &.pd130 {padding: 0 130px;}
        &:last-child {margin-bottom: 0;}
    }
    @media (width <= 1024px) {
        & .portfolio-box {
            & .portfolio-list {
                > ul {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px;}
            }
            & .portfolio-grid {
                > ul {
                    > li {padding: 10px 0;}
                }
            }
        }
        & .portfolio-box.pd130 {padding: 0;}
    }
    @media (width <= 860px) {
        & .portfolio-box {margin-bottom: 60px;
            & .portfolio-title {
                & .right {
                    & .util {
                        & .util-grid {display: none;}
                    }
                }
            }
            & .portfolio-list {display: none;}
            & .portfolio-list-m {display: block;}
            & .portfolio-grid {
                > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; border-bottom: 1px solid #E1E5ED; padding: 15px 0;
                    > li {flex-wrap: wrap; padding: 0; border-bottom: 0;
                        & .thumbs {width: 100%;}
                        & .info {width: 100%; padding: 0; margin: 8px 0; text-align: center;
                            & p {width: 100%; font-size: 15px;}
                        }
                        & .cate {width: 100%;
                            & p {font-size: 12px;}
                        }
                        & .place {display: none;}
                        & .company {width: 100%; margin-top: 8px;
                            & p {font-size: 14px; color: #aaa;}
                        }
                    }
                }
                > ul.today {
                    > li {
                        & .info {width: 100%; justify-content: center; flex-wrap: wrap;
                            & p {width: 100%; order: 2;}
                            & span {margin-left: 0; order: 1; margin-bottom: 8px;}
                        }
                        & .time {width: 100%; margin-top: 4px;
                            & p {font-size: 12px; font-weight: 500;}
                        }
                    }
                }
            }
            & .portfolio-more {
                & button {width: 100px; height: 36px;
                    & p {font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .portfolio-box {
            & .portfolio-title {margin-bottom: 15px;
                & .left {display: none;}
                & .right {position: relative; width: 100%;
                    & .info {display: none;}
                    & .util {
                        & .util-select {width: 80px; margin: 0 10px 0 0;
                            & .view {
                                & p {font-size: 13px;}
                            }
                            & .list {
                                > ul {
                                    > li {
                                        & button {font-size: 13px;}
                                    }
                                }
                            }
                        }
                        & .util-array {position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin: 0;
                            & .bar {
                                & button {font-size: 12px;}
                            }
                        }
                    }
                }
            }
            & .portfolio-list-m {
                > ul {
                    > li {
                        & .info {padding: 12px 16px;
                            & .company {margin-bottom: 10px;}
                            & .company .name p {font-size: 16px;}
                            & .cate p {font-size: 13px;}
                            & .cate span {font-size: 13px;}
                            & .favorite {top: 4px; right: 12px;}
                        }
                        & .thumbs {
                            & .img {
                                > p {width: 45px; height: 45px; background-size: 40px; font-size: 13px; line-height: 1;}
                            }
                        }
                    }
                }
            }
            &.pd130 {
                & .portfolio-title {margin-bottom: 15px;
                    & .right {position: relative; width: 100%; justify-content: flex-end;
                        & .util {
                            & .util-array {position: relative; top: 0; right: 0; transform: translateY(0); margin: 0;
                                & .bar {
                                    & button {font-size: 12px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .portfolio-box {
            & .portfolio-list-m {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
            & .portfolio-grid {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                    > li {
                        & .cate {
                            & p {display: none;}
                            & p:first-child {display: block;}
                        }
                    }
                }
                > ul.today {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* company */
.company {
    & .company-box {margin-bottom: 100px;
        & .company-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; margin-right: 10px;}
                    & 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;}
                        }
                        &.type02 {
                            & .bar {
                                &::before {content: none;}
                                & button {color: #fff;}
                                &.on {background: #fff;
                                    & button {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;}
                }
            }
        }
        & .company-list {
            > ul {display: grid;
                > li {position: relative; padding-top: 4px; border-radius: 12px; cursor: pointer;
                    &.no-data {background: none !important; border: none !important;}
                    & .front {position: relative; background: #fff; border-radius: 8px; padding: 40px 30px;
                        & .logo {position: relative; display: flex; justify-content: center; padding-top: 40px;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;}
                        }
                        & .company {margin: 40px 0 20px;
                            & p {font-size: 18px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 5px;}
                            & strong {display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; border: 1px solid #CADFFF; border-radius: 7px; padding: 2px 5px; color: #0782DA;
                                & img {width: 16px; height: 16px;}
                            }
                            & span {display: block; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 5px;}
                        }
                        & .info {
                            & p {display: flex; align-items: center; color: #697385;
                                & strong {font-weight: 400; color: #9AA7BC; margin-right: 8px;}
                            }
                        }
                        & .desc {margin: 20px 0 25px;
                            & p {font-weight: 600; color: #2C9E4F; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                        }
                        & .cate {display: flex; align-items: center; padding-top: 25px; border-top: 1px solid #D1D1D150;
                            & 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;}
                            }
                        }
                        & .favorite {position: absolute; bottom: 40px; right: 30px;
                            & button {
                                & i {font-size: 20px; color: #EAEDF4;}
                                &.on {
                                    & i {color: #36BE8F;}
                                }
                            }
                        }
                    }
                    & .overlay {position: absolute; top: 0; left: 0; width: 100%; padding: 80px 30px 30px; border-radius: 12px; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 9; opacity: 0; pointer-events: none; transition: all 0.2s ease-in-out;
                        & .logo {position: relative; width: 100%; max-width: 180px; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff; padding: 20px; margin: 0 auto;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; width: 100%; height: 40px; object-fit: contain;}
                        }
                        & .company {margin: 80px 0 25px;
                            & p {font-size: 28px; font-weight: 600; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                        }
                        & .info {
                            & p {color: #fff;
                                & strong {font-weight: 400; margin-right: 8px;}
                            }
                        }
                        & .desc {margin: 25px 0;
                            & p {font-size: 18px; font-weight: 600; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                        }
                        & .cate {display: flex; align-items: center; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.2);
                            & 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;}
                            }
                        }
                        & .favorite {position: absolute; bottom: 30px; right: 30px;
                            & button {margin-right: 10px;
                                &:last-child {margin-right: 0;}
                                & i {font-size: 20px; color: rgba(255, 255, 255, 0.7);}
                                &:hover {
                                    & i {color: #36BE8F;}
                                }
                                &.on {
                                    & i {color: #36BE8F;}
                                }
                            }
                        }
                    }
                    &:hover {
                        & .overlay {opacity: 1; pointer-events: visible;}
                    }
                }
                &.type01 {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px;
                    > li {background: linear-gradient(90deg, var(--basic-color) 0%, #4761F9 100%);
                        & .front {border: 1px solid #D1D1D150;
                            & .company {min-height: 91px;}
                        }
                        & .overlay {overflow: hidden;
                            &::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(41, 46, 65, 0.3) 0%, rgba(41, 46, 65, 1) 100%); z-index: -1;}
                        }
                    }
                }
                &.type02 {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px;
                    > li {background: #07BB73;
                        & .front {border: 1px solid #BCE5C9;
                            & .company {min-height: 91px;}
                        }
                        & .overlay {width: 100%; background: #F5FEF8; padding: 60px 30px 30px; border: 1px solid #BCE5C9;
                            & .company {margin: 60px 0 25px;
                                & p {font-size: 18px; color: #292E41;}
                            }
                            & .info {
                                & p {font-size: 14px; color: #292E41;
                                    & strong {color: #697385;}
                                }
                            }
                            & .desc {
                                & p {font-size: 15px; color: #16A775;}
                            }
                            & .cate {border-top: 1px solid #BCE5C9;}
                        }
                        &:nth-child(5n - 1) {
                            & .overlay {left: auto; right: 0;}
                        }
                        &:nth-child(5n) {
                            & .overlay {left: auto; right: 0;}
                        }
                    }
                }
                &.type03 {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
                    > li {border: 1px solid #CDDDFF; border-left: 0; padding-top: 0; border-radius: 0; perspective: 2000px;
                        & .front {border-radius: 0; padding: 30px; backface-visibility: hidden; transform-style: preserve-3d; transition: all 0.2s ease-in-out;
                            & .logo {position: absolute; top: 30px; right: 30px; width: 60px; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; background: #fff; overflow: hidden;
                                & img {width: calc(100% - 12px); height: calc(100% - 12px);}
                            }
                            & .company {margin: 0 0 15px; padding-right: 60px; min-height: 67px;
                                & p {font-size: 17px; margin-bottom: 5px;}
                                & span {display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; border: 1px solid #CADFFF; border-radius: 7px; padding: 2px 5px; color: #0782DA;
                                    & img {width: 16px; height: 16px;}
                                }
                            }
                            & .info {padding-right: 80px;
                                & p {font-size: 13px;}
                            }
                            & .desc {
                                & p {font-size: 14px; color: #0782DA;}
                            }
                            & .favorite {bottom: 30px; right: 30px;}
                        }
                        & .overlay {position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; width: 100%; height: 100%; padding: 30px; opacity: 1; border-radius: 0; pointer-events: none; z-index: 3; transform: rotateY(-180deg); backface-visibility: hidden; transform-style: preserve-3d; transition: all 0.5s ease-out 0s; background: #F4F7FF;
                            & .logo {max-width: 60px;}
                            & .company {width: 100%; margin: 10px 0 30px; text-align: center;
                                & p {font-size: 16px; color: #292E41;}
                            }
                            & .place {display: flex; justify-content: center; width: 100%; margin: 0 0 10px;
                                & p {font-size: 14px; font-weight: 600; line-height: 1; color: #697385; background: #fff; border-radius: 999px; border: 1px solid #E1E5ED; padding: 4px 8px;}
                            }
                            & .cate {width: 100%; justify-content: center; border: 0; padding: 0;}
                            & .desc {width: 100%; margin: 30px 0 0; text-align: center;
                                & p {font-size: 14px; color: #292E41;}
                            }
                            &.on {transform: rotateY(0); pointer-events: visible;}
                        }
                        &:first-child {border-left: 1px solid #CDDDFF;}
                        &:nth-child(5n + 1) {border-left: 1px solid #CDDDFF;}
                        &:nth-child(n + 6) {border-top: 0;}
                        &:hover {
                            & .front {transform: rotateY(180deg); z-index: 0;}
                        }
                    }
                }
                &.type04 {grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
                    > li {padding-top: 0; border: 1px solid #DDD5FF; border-left: 0; border-radius: 0;
                        & .front {border-radius: 0; padding: 30px; transition: all 0.2s ease-in-out;
                            & .logo {display: none;}
                            & .company {margin: 0 0 15px; min-height: 65px;
                                & p {font-size: 16px;}
                                & span {display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; border: 1px solid #CADFFF; border-radius: 7px; padding: 2px 5px; color: #0782DA;
                                    & img {width: 16px; height: 16px;}
                                }
                            }
                            & .info {
                                & p {font-size: 13px;}
                            }
                            & .desc {
                                & p {font-size: 14px; color: #292E41;}
                            }
                            & .favorite {bottom: 30px; right: 30px;}
                        }
                        &:first-child {border-left: 1px solid #DDD5FF;}
                        &:nth-child(6n + 1) {border-left: 1px solid #DDD5FF;}
                        &:nth-child(n + 7) {border-top: 0;}
                        &:hover {
                            & .front {background: #F8F6FF;}
                        }
                    }
                }
            }
        }
        & .company-grid {
            > ul {border-top: 1px solid #8491A7;
                > li {display: flex; align-items: center; border-bottom: 1px solid #E1E5ED; cursor: pointer; padding: 35px 50px;
                    & .company {width: 20%; padding-right: 50px;
                        & p {font-size: 18px; font-weight: 600;}
                    }
                    & .info {display: flex; align-items: center; width: 30%; padding: 0 50px 0 0;
                        & p {font-size: 15px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                    }
                    & .badge {display: flex; justify-content: space-between; align-items: center; width: 15%;
                        & p {font-size: 14px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px;
                            &.type02 {color: #289FF4; background: #D0ECFF;}
                            &.type03 {color: #DA5AE0; background: #DA5AE020;}
                            &.type04 {color: #DA5AE0; background: #DA5AE020;}
                            &.type01 {color: #6270F4; background: #DDE0FF;}
                            /* &.type04 {color: #F3B200; background: #FFBB0410;} */
                        }
                        & 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; background: #fff;
                            & img {height: 14px; margin-right: 4px;}
                        }
                    }
                    & .place {display: flex; justify-content: center; width: 15%;
                        & p {font-size: 14px; color: #697385; margin-right: 5px;}
                        & span {font-size: 14px;}
                    }
                    & .cate {display: flex; justify-content: center; width: 10%;
                        & p {font-size: 14px; color: #697385; margin-right: 5px;}
                        & span {font-size: 14px;}
                    }
                }
            }
            > ul.today {
                > li {padding: 20px;
                    & .logo {width: 100px;
                        & img {max-width: 100%; max-height: 30px; object-fit: cover;}
                    }
                    & .company {width: 10%; padding: 0 0 0 50px;
                        & p {font-size: 15px;}
                    }
                    & .info {width: calc(50% - 100px); padding: 0 0 0 50px;}
                    & .address {width: 10%; text-align: center;
                        & p {font-size: 14px; color: #8491A7;}
                    }
                    & .cate {width: 10%;
                        & p {color: #292E41; font-weight: 600; margin-right: 0;}
                    }
                    & .time {width: 10%; text-align: center;
                        & p {font-size: 14px; color: #0782DA;}
                    }
                }
            }
        }
        & .company-more {margin-top: 25px;
            > button {display: flex; justify-content: center; align-items: center; width: 200px; height: 45px; margin: 0 auto; border: 1px solid #E1E5ED; border-radius: 999px;
                & i {font-size: 12px; line-height: 1; color: #9AA7BC;}
                & p {font-size: 15px; color: #697385; margin-left: 10px;}
            }
        }
        &.pd130 {padding: 0 130px;}
        &:last-child {margin-bottom: 0;}
    }
    @media (width <= 1280px) {
        & .company-box {
            &.pd130 {padding: 0;}
            & .company-list {
                > ul {
                    &.type01 {grid-template-columns: repeat(3, minmax(0, 1fr));}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .company-box {
            & .company-list {
                > ul {
                    &.type01 {grid-template-columns: repeat(2, minmax(0, 1fr));}
                    &.type02 {grid-template-columns: repeat(2, minmax(0, 1fr));
                        > li {
                            &:nth-child(5n - 1) {
                                & .overlay {left: 0; right: auto;}
                            }
                            &:nth-child(5n) {
                                & .overlay {left: 0; right: auto;}
                            }
                            &:nth-child(2n) {
                                & .overlay {left: auto; right: 0;}
                            }
                        }
                    }
                    &.type03 {grid-template-columns: repeat(2, minmax(0, 1fr));
                        > li {
                            &:nth-child(2n + 1) {border-left: 1px solid #CDDDFF;}
                            &:nth-child(n + 3) {border-top: 0;}
                        }
                    }
                    &.type04 {grid-template-columns: repeat(2, minmax(0, 1fr));
                        > li {
                            &:nth-child(2n + 1) {border-left: 1px solid #DDD5FF;}
                            &:nth-child(n + 3) {border-top: 0;}
                        }
                    }
                }
            }
            & .company-grid {
                > ul {
                    > li {padding: 20px 0;
                        & .info {width: 40%;}
                        & .badge {width: 20%;}
                        & .place {width: 20%;}
                        & .cate {display: none;}
                    }
                    &.today {
                        > li {padding: 20px 0;
                            & .company {width: 20%;}
                            & .address {width: 15%;}
                            & .time {width: 15%;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .company-box {
            & .company-grid {
                > ul {
                    > li {
                        & .company {padding-right: 20px;
                            & p {font-size: 15px; white-space: nowrap;}
                        }
                        & .info {padding-right: 20px;
                            & p {font-size: 13px; white-space: nowrap;}
                        }
                        & .badge {
                            & p {font-size: 12px; white-space: nowrap;}
                            & span {font-size: 12px; white-space: nowrap;}
                        }
                        & .place {
                            & p {font-size: 12px; white-space: nowrap;}
                            & span {font-size: 12px; white-space: nowrap;}
                        }
                    }
                    &.today {
                        > li {
                            & .address {
                                & p {font-size: 12px;}
                            }
                            & .time {
                                & p {font-size: 12px;}
                            }
                        }
                    }
                }
            }
            & .company-more {
                & button {width: 100px; height: 36px;
                    & p {font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .company-box {margin-bottom: 60px;
            & .company-title {margin-bottom: 15px;
                & .left {display: none;}
                & .right {position: relative; width: 100%; justify-content: flex-end;
                    & .info {display: none;}
                    & .util {
                        & .util-select {width: 80px; margin: 0 10px 0 0;
                            & .view {
                                & p {font-size: 13px;}
                            }
                            & .list {
                                > ul {
                                    > li {
                                        & button {font-size: 13px;}
                                    }
                                }
                            }
                        }
                        & .util-array {position: relative; top: 0; right: 0; transform: translateY(0); margin: 0;
                            & .bar {
                                & button {font-size: 12px;}
                            }
                        }
                    }
                }
            }
            & .company-list {
                > ul {
                    &.type01 {grid-template-columns: repeat(1, minmax(0, 1fr));
                        > li {
                            & .front {padding: 20px 30px;
                                & .logo {padding-top: 30px;}
                                & .company {margin: 30px 0 10px;
                                    & p {font-size: 16px;
                                        & strong {font-size: 10px;}
                                    }
                                    & span {font-size: 13px;}
                                }
                                & .info {
                                    & p {font-size: 14px;}
                                }
                                & .desc {margin: 10px 0 20px;
                                    & p {font-size: 14px;}
                                }
                                & .cate {padding-top: 20px;
                                    & p {font-size: 12px;}
                                    & span {font-size: 12px;}
                                }
                                & .favorite {bottom: 20px; right: 30px;
                                    & button {
                                        & i {font-size: 16px;}
                                    }
                                }
                            }
                            & .overlay {opacity: 1; pointer-events: visible; height: 100%; padding: 20px;
                                & .logo {max-width: 80px; border-radius: 10px;
                                    & img {width: 80%;}
                                }
                                & .company {margin: 20px 0; text-align: center;
                                    & p {font-size: 18px;}
                                }
                                & .info {
                                    & p {font-size: 14px;}
                                }
                                & .desc {margin: 10px 0;
                                    & p {font-size: 14px;}
                                }
                                & .cate {padding: 10px 0 0;
                                    & p {font-size: 12px;}
                                    & span {font-size: 12px;}
                                }
                                & .favorite {display: none;}
                            }
                        }
                    }
                    &.type02 {grid-template-columns: repeat(1, minmax(0, 1fr));
                        > li {padding: 0;
                            & .front {padding: 20px;
                                & .logo {padding-top: 30px;}
                                & .company {margin: 30px 0 10px;
                                    & p {font-size: 16px;
                                        & strong {font-size: 10px;}
                                    }
                                    & span {font-size: 13px;}
                                }
                                & .info {
                                    & p {font-size: 14px;}
                                }
                                & .desc {margin: 10px 0 20px;
                                    & p {font-size: 14px;}
                                }
                                & .cate {padding-top: 20px;
                                    & p {font-size: 12px;}
                                    & span {font-size: 12px;}
                                }
                                & .favorite {bottom: 20px; right: 30px;
                                    & button {
                                        & i {font-size: 16px;}
                                    }
                                }
                            }
                            & .overlay {opacity: 1; pointer-events: visible; padding: 20px; height: 100%;
                                & .logo {max-width: 80px; border-radius: 10px;
                                    & img {width: 80%;}
                                }
                                & .company {margin: 10px 0; text-align: center;}
                                & .desc {margin: 10px 0;
                                    & p {font-size: 14px;}
                                }
                                & .cate {padding: 10px 0 0;
                                    & p {font-size: 12px;}
                                    & span {font-size: 12px;}
                                }
                                & .favorite {display: none;}
                            }
                        }
                    }
                    &.type03 {grid-template-columns: repeat(2, minmax(0, 1fr));
                        > li {
                            & .front {padding: 20px 30px;
                                & .logo {display: none;}
                                & .company {margin: 0 0 10px; padding-right: 0;
                                    & p {font-size: 15px;}
                                    & span {font-size: 10px;}
                                }
                                & .info {padding-right: 0;
                                    & p {font-size: 13px;}
                                }
                                & .desc {margin: 10px 0 20px;
                                    & p {font-size: 13px;}
                                }
                                & .cate {padding-top: 20px;
                                    & p {font-size: 12px;}
                                    & span {font-size: 12px;}
                                }
                                & .favorite {display: none;}
                            }
                            & .overlay {display: none;}
                        }
                    }
                    &.type04 {grid-template-columns: repeat(2, minmax(0, 1fr));
                        > li {
                            & .front {padding: 20px 30px;
                                & .logo {display: none;}
                                & .company {margin: 0 0 10px;
                                    & p {font-size: 15px;}
                                    & span {font-size: 10px;}
                                }
                                & .info {
                                    & p {font-size: 13px;}
                                }
                                & .desc {margin: 10px 0 20px;
                                    & p {font-size: 13px;}
                                }
                                & .cate {padding-top: 20px;
                                    & p {font-size: 12px;}
                                    & span {font-size: 12px;}
                                }
                                & .favorite {display: none;}
                            }
                            & .overlay {display: none;}
                        }
                    }
                }
            }
            & .company-grid {
                > ul {
                    > li {flex-wrap: wrap; gap: 10px 0;
                        & .company {width: calc(100% - 300px);}
                        & .info {width: 100%; padding-right: 0; order: 4;}
                        & .badge {width: 170px; order: 2;}
                        & .place {width: 130px; order: 3;}
                    }
                    &.today {
                        > li {position: relative; padding-left: 100px;
                            & .logo {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 80px;
                                & img {width: 100%;}
                            }
                            & .company {width: calc(100% - 250px);}
                            & .info {width: 100%; padding-right: 0;}
                            & .address {width: 150px;}
                            & .time {width: 100px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .company-box {margin-bottom: 60px;
            & .company-list {
                > ul {
                    &.type01 {
                        > li {
                            & .front {padding: 20px;
                                & .logo {padding-top: 25px;}
                                & .company {margin: 20px 0 10px;}
                                & .desc {margin: 10px 0 15px;}
                                & .cate {padding-top: 15px;}
                            }
                        }
                    }
                    &.type02 {
                        > li {
                            & .front {padding: 20px;
                                & .logo {padding-top: 25px;}
                                & .company {margin: 20px 0 10px;}
                                & .desc {margin: 10px 0 15px;}
                                & .cate {padding-top: 15px;}
                            }
                        }
                    }
                    &.type03 {grid-template-columns: repeat(1, minmax(0, 1fr));
                        > li {
                            & .front {padding: 20px;
                                & .desc {margin: 10px 0 15px;}
                                & .cate {padding-top: 15px;}
                            }
                            &:nth-child(-n + 2) {border-top: unset;}
                            &:nth-child(-n + 1) {border-top: 1px solid #CDDDFF;}
                            &:nth-child(1n) {border-right: 1px solid #CDDDFF; border-left: 1px solid #CDDDFF;}
                        }
                    }
                    &.type04 {grid-template-columns: repeat(1, minmax(0, 1fr));
                        > li {
                            & .front {padding: 20px;}
                            &:nth-child(-n + 6) {border-top: unset;}
                            &:nth-child(-n + 1) {border-top: 1px solid #DDD5FF;}
                            &:nth-child(1n) {border-right: 1px solid #DDD5FF; border-left: 1px solid #DDD5FF;}
                        }
                    }
                }
            }
            & .company-grid {
                > ul {
                    > li {
                        & .company {width: 100%;}
                    }
                    &.today {
                        > li {padding-left: 0; gap: 5px 0;
                            & .logo {display: none;}
                            & .company {width: calc(100% - 100px); padding-right: 0;}
                            & .address {text-align: left; order: 3;}
                            & .time {order: 2;}
                        }
                    }
                }
            }
        }
    }
}

/* map */
.map {width: 100vw; height: 100vh;
    & .map-area {width: 100%; height: 100% !important;
        & .con {position: relative; width: 100%; max-width: 300px; border-radius: 10px; box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 15%); z-index: 9999999; background: #fff; overflow: hidden;
            & .thumbs {
                > ul {position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
                    > li {position: relative; aspect-ratio: 100 / 85;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                        &.no-photo {position: unset; font-size: 0;
                            &::before {content: 'test'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px;}
                        }
                    }
                }
            }
            & .info {padding: 25px;
                & .tit {
                    & p {font-size: 20px; font-weight: 600; color: #2C9E4F; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
                    & span {display: block; font-size: 14px; line-height: 1; color: #8491A7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
                }
                & .bt {display: flex; gap: 4px; margin: 15px 0;
                    & button {display: flex; justify-content: center; align-items: center; padding: 8px; border-radius: 13px; background: #292E41;
                        & img {margin-right: 5px;
                            &.off {display: block;}
                            &.on {display: none;}
                        }
                        & span {font-size: 14px; color: #36BE8F;}
                        &.on {
                            & img {
                                &.off {display: none;}
                                &.on {display: block;}
                            }
                        }
                    }
                }
                & .more {
                    & button {display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 3px; background: #f5f5f5; padding: 8px 0;
                        & img {margin-right: 5px;}
                        & p {font-size: 14px; font-weight: 500;}
                    }
                }
            }
        }
    }
    & .map-pc {
        & .map-search {position: fixed; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; max-width: 360px; height: 100vh; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 20%);
            & .search-header {flex: 0 0 auto;
                & .logo {display: flex; align-items: center; padding: 16px 30px;
                    & a {display: flex; align-items: center; width: 100%; gap: 10px;
                        & i {color: #2C9E4F;}
                        & img {max-width: 110px; width: 100%;}
                    }
                }
                & .place {display: flex; justify-content: space-between; align-items: center; padding: 8px 30px; background: #F9FAFC; border-top: 1px solid #EAEDF4; border-bottom: 1px solid #EAEDF4;
                    & p {font-size: 15px; line-height: 1.2; font-weight: 600;}
                    & span {font-size: 15px; line-height: 1.2; color: #697385;}
                }
                & .bar {padding: 20px 30px;
                    & .bar-con {display: flex; align-items: center; border: 2px solid var(--basic-color-60); border-radius: 8px;
                        > i {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 18px;}
                        > input[type="text"] {width: calc(100% - 80px); font-size: 14px; color: #8B8989; line-height: 40px; border: 0;}
                        > button {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; opacity: 0; pointer-events: none; transition: all 0.2s;}
                        > input[type="text"]:focus + button {opacity: 0.2; pointer-events: visible;}
                        > input[type="text"]:focus + button:hover {opacity: 0.5;}
                        > button i {font-size: 18px;}
                    }
                }
                & .cate {padding-bottom: 20px;
                    > div {padding: 0 30px; margin-bottom: 20px;}
                    > div:last-child {margin-bottom: 0;}
                    & .depth01 {
                        > ul {display: flex; flex-wrap: wrap; gap: 5px;
                            > li {
                                & button {border: 1px solid #E8E8E8; border-radius: 999px;}
                                & button p {font-size: 14px; line-height: 1; color: #697385; padding: 6px 12px;}
                                &.on {
                                    & button {background: #697385; border: 1px solid #697385;
                                        & p {color: #fff;}
                                    }
                                }
                            }
                        }
                    }
                    & .depth02 {
                        > ul {display: flex; flex-wrap: wrap; gap: 5px;
                            > li {
                                & button {background: #EAEDF450; border-radius: 999px;}
                                & button p {font-size: 14px; line-height: 1; color: #697385; padding: 6px 12px;}
                                &.on {
                                    & button {background: #697385;
                                        & p {color: #fff;}
                                    }
                                }
                            }
                        }
                    }
                }
                > .banner-slide {height: 100px; overflow: hidden; margin: 0 0 20px;
                    & .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 {padding: 30px; background: url("/assets/site/img/sub/banner-bg02.jpg") no-repeat center; background-size: cover;
                    & p {font-family: var(--key-font); font-size: 18px; font-weight: 700;}
                    & p strong {color: #A95B0D;}
                }
            }
            & .search-list {flex: 1; overflow-y: scroll;
                > ul {padding: 30px;
                    > li {margin-bottom: 30px; cursor: pointer;
                        &:last-child {margin-bottom: 0;}
                        &.type01 {
                            & .thumbs {
                                & .img {position: relative; padding-top: 75%; border-radius: 5px; overflow: hidden;
                                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                                }
                                & .swiper-bt {
                                    > div {all: unset;}
                                    > div.swiper-button-disabled {opacity: 0; transition: all 0.2s;}
                                    > div::after {content: none;}
                                    > div > i {font-size: 30px; color: #fff;}
                                    & .next, .prev {position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;}
                                    & .next {right: 3px;}
                                    & .prev {left: 3px;}
                                }
                            }
                            & .text {display: flex; justify-content: space-between; align-items: flex-start; line-height: 1; margin-top: 20px;
                                & .info {
                                    & p {font-size: 18px; line-height: 1; font-weight: 600; margin-bottom: 10px;}
                                    & span {font-size: 14px; line-height: 1; opacity: 0.6;}
                                }
                                & .desc {text-align: right;
                                    > button {display: inline-flex; align-items: center; margin-bottom: 4px;}
                                    > button i {color: #E1E5ED;}
                                    > button p {font-size: 14px; margin-left: 5px;}
                                    > button.on i {color: #36BE8F;}
                                    > span {display: block; font-family: var(--key-font); font-size: 12px; line-height: 1; border-radius: 5px; padding: 5px;}
                                    > span.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775;}
                                    > span.type02 {color: #16A775; border: 1px solid #16A775;}
                                    > span.type03 {color: #3675FF; border: 1px solid #3675FF;}
                                    > span.type04 {color: #7758FF; border: 1px solid #7758FF;}
                                }
                            }
                        }
                        &.type02 {position: relative; padding: 25px; background: #F5FEF8; border: 1px solid #BCE5C9; border-radius: 12px;
                            & .logo {position: absolute; top: 25px; right: 25px; width: 80px; height: 25px;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: cover;}
                            }
                            & .company {
                                & p {font-size: 18px; font-weight: 600; line-height: 25px; margin-bottom: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 100px;}
                                & span {display: block; font-size: 15px; font-weight: 600; color: #2C9E4F; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                            }
                            & .text {display: flex; justify-content: space-between; align-items: flex-end; margin: 35px 0 20px;
                                & .cate {
                                    & p {display: flex; align-items: center; font-size: 15px; line-height: 1; color: #697385; margin-bottom: 10px;}
                                    & p:last-child {margin-bottom: 0;}
                                    & p span {color: #9AA7BC; margin-right: 8px;}
                                }
                                & .grade {
                                    & p {font-family: var(--key-font); font-size: 12px; line-height: 1; padding: 5px; border-radius: 5px; border: 1px solid #000;
                                        &.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775;}
                                        &.type02 {color: #16A775; border: 1px solid #16A775;}
                                        &.type03 {color: #3675FF; border: 1px solid #3675FF;}
                                        &.type04 {color: #7758FF; border: 1px solid #7758FF;}
                                    }
                                }
                            }
                            & .util {display: flex; justify-content: space-between; align-items: center;
                                & .place {display: flex; align-items: center; width: 100%;
                                    & p {font-size: 15px; line-height: 1; color: #8491A7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                                    & span {font-size: 15px; line-height: 1; font-weight: 600; color: #0782DA; margin-left: 8px;}
                                }
                                /* & .bt {
                                    & button {display: flex; align-items: center;}
                                    & button i {color: #E1E5ED;}
                                    & button p {font-size: 14px; line-height: 1; margin-left: 5px;}
                                } */
                            }
                        }
                    }
                }
                > ul.type02 {padding: 30px;
                    > li.type01 {background: linear-gradient(#F5FEF8 0%, #F5F9FE 100%);
                        & .company {
                            & span {color: var(--basic-color);}
                        }
                        & .grade {
                            & p {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #16A775; background-color: #fff;}
                        }
                        & .util {
                            & .place {
                                span {color: #16A775;}
                            }
                        }
                    }
                    > li.type02 {background: #F5FEF8;
                        & .company {
                            & span {color: #16A775;}
                        }
                        & .grade {
                            & p {color: #16A775; border: 1px solid #16A775; background: #fff;}
                        }
                        & .util {
                            & .place {
                                span {color: #16A775;}
                            }
                        }
                    }
                    > li.type03 {border: 1px solid #CDDDFF; background: #CDDDFF20;
                        & .company {
                            & span {color: #3675FF;}
                        }
                        & .grade {
                            & p {color: #3675FF; border: 1px solid #3675FF; background: #fff;}
                        }
                        & .util {
                            & .place {
                                span {color: #3675FF;}
                            }
                        }
                    }
                    > li.type04 {border: 1px solid #DDD5FF; background: #F8F6FF;
                        & .company {
                            & span {color: #7758FF;}
                        }
                        & .grade {
                            & p {color: #7758FF; border: 1px solid #7758FF; background: #fff;}
                        }
                        & .util {
                            & .place {
                                span {color: #7758FF;}
                            }
                        }
                    }
                    > li:last-child {margin-bottom: 0;}
                }
            }
        }
        & .map-cate {position: fixed; top: 20px; left: 380px;
            > ul {display: flex; align-items: center;
                > li {border: 1px solid #E1E5ED; background: #fff; border-radius: 999px; margin-right: 5px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%);
                    & button {display: flex; align-items: center; padding: 10px 20px;}
                    & button img {height: 20px; margin-right: 5px;}
                    & button p {font-size: 15px; line-height: 20px; font-weight: 500;}
                    &.on {background: #292E41;
                        & button {
                            & img {filter: brightness(0) invert(1);}
                            & p {color: #fff;}
                        }
                    }
                }
                > li:last-child {margin-right: 0;}
            }
        }
        & .map-reset {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
            & button {display: flex; align-items: center; background: #0475f4; border-radius: 999px; padding: 12px 20px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%); border: 3px solid #fff;}
            & button i {font-size: 16px; line-height: 1; color: #fff; margin-right: 10px; transition: all 0.2s;}
            & button:hover i {transform: rotate(45deg);}
            & button p {font-size: 15px; font-weight: 600; line-height: 1; color: #fff;}
        }
    }
    & .map-mb {display: none;
        & .map-header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99999;
            & .map-search {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 20px 0;
                & a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #07BB73; border-radius: 5px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%);
                    & i {font-size: 20px; color: #fff;}
                }
                & input[type="text"] {width: calc(100% - 100px); height: 40px; font-size: 15px; background: #fff; border: none; border-radius: 5px; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%); padding: 0 12px;}
                & button {width: 40px; height: 40px; background: #07BB73; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%); border-radius: 5px;
                    & i {font-size: 20px; color: #fff;}
                }
            }
            & .map-cate {margin-top: 10px;
                > ul {display: flex; gap: 10px; overflow-x: scroll; padding: 0 20px; -ms-overflow-style: none;
                    &::-webkit-scrollbar {display: none;}
                    > li {
                        & button {display: flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%);
                            & img {height: 18px; margin-right: 4px;}
                            & p {font-size: 14px; font-weight: 600;}
                        }
                    }
                }
            }
        }
        & .map-list {position: fixed; bottom: 0; left: 0; width: 100%; height: calc(var(--vh, 1vh) * 30); background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 10%); border-radius: 15px 15px 0 0; z-index: 99999; transition: all 0.2s ease-in-out;
            &.on {height: calc(var(--vh, 1vh) * 100 - 120px);}
            & .bt {position: absolute; top: 0; left: 0; width: 100%; height: 20px; z-index: 7;
                & span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 4px; background: #ddd; border-radius: 999px;}
            }
            & .list {height: calc(100% - 20px); padding: 0 20px 20px; margin-top: 20px; overflow-y: scroll;
                > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
                    > li {cursor: pointer;
                        & .thumbs {position: relative; padding-top: 60%; overflow: hidden; border-radius: 5px;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                        }
                        & .subject {text-align: center; margin: 8px 0;
                            & p {font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                            & span {display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                        }
                        & .cate {display: flex; justify-content: center;
                            & p {font-size: 12px; 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;}
                            &.type02 {
                                p {color: #16A775; border: 1px solid #36BE8F;
                                    &:nth-child(1) {background: #36BE8F20;}
                                    &:nth-child(2) {background: #36BE8F10;}
                                }
                            }
                            &.type03 {
                                p {color: #FFCD42; border: 1px solid #FFCD42;
                                    &:nth-child(1) {background: #FEDE5E10;}
                                    &:nth-child(2) {background: #FEDE5E10;}
                                }
                            }
                        }
                        & .name {text-align: center; margin-top: 8px;
                            & p {font-size: 13px; color: #697385;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .map-pc {display: none;}
        & .map-mb {display: block;}
    }
    @media (width <= 640px) {
        & .map-mb {
            & .map-header {
                & .map-cate {
                    > ul {
                        > li {
                            & button {
                                & p {font-size: 12px;}
                            }
                        }
                    }
                }
            }
            & .map-list {
                & .list {
                    > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                        > li {
                            & .subject {
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* about */
.about {padding-top: 85px;
    & .about-img {
        & img {width: 100%;}
    }
    & .about-cate {margin: 50px 0 100px;
        > ul {display: flex; justify-content: center;
            > li {border-radius: 999px;
                &.on {background: #292E41;
                    & a {color: #fff;}
                }
                & a {display: block; font-size: 17px; line-height: 1; color: #8491A7; padding: 8px 25px;}
            }
        }
    }
    & .about-tit {text-align: center; margin-bottom: 60px;
        & p {font-family: var(--key-font); font-size: 22px; line-height: 1; margin-bottom: 10px;}
        & span {display: inline-block; font-size: 14px; color: #697385; border-bottom: 1px solid #D4D8E1; padding-bottom: 10px;}
    }
    & .about-con {
        & .intro {
            & .text {text-align: center; margin-bottom: 100px;
                & p {font-size: 30px; font-weight: 700; color: #222; margin-bottom: 30px;}
                & span {line-height: 2; color: #222;}
            }
            & .img {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px;
                & img {width: 100%;}
            }
        }
        & .ci {width: 100%; max-width: 968px; margin: 0 auto;
            & .logo {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 70px;
                & .name {width: 100%; margin-bottom: 15px;
                    & p {font-size: 18px;
                        & strong {margin-left: 20px;}
                    }
                }
                & .img {display: flex; justify-content: center; align-items: center; padding: 30px 0; background-size: 8px 8px; background-image: linear-gradient(to right, #dfdfdf 1px, transparent 1px), linear-gradient(to bottom, #dfdfdf 1px, transparent 1px); border-right: 0.5px solid #dfdfdf; border-bottom: 0.5px solid #dfdfdf;
                    &.left {width: calc(100% - 365px);}
                    &.right {width: 350px;}
                    & img {height: 100px;}
                }
            }
            & .text {
                > ul {
                    > li {margin-bottom: 80px;
                        > div {margin-bottom: 20px;
                            &:last-child {margin-bottom: 0;}
                        }
                        &:last-child {margin-bottom: 0;}
                        & .tit {
                            & p {font-size: 22px; line-height: 1; font-weight: 700;}
                        }
                        & .desc {
                            & p {font-size: 18px; color: #16A775; font-weight: 600; margin-bottom: 10px;}
                            & span {display: block;}
                        }
                        & .color {display: flex;
                            > div {border: 3px solid #36BE8F; border-radius: 999px;}
                            & .left {display: flex; align-items: center; padding: 20px 30px;
                                & span {width: 40px; height: 40px; border-radius: 50%; background: #2C9E4F; margin-right: 20px;}
                                & p {font-size: 12px; font-weight: 600; line-height: 1;
                                    & strong {display: block; font-size: 20px; line-height: 1; color: #2C9E4F; margin-top: 5px;}
                                }
                            }
                            & .right {display: flex; justify-content: center; align-items: center; padding: 0 50px; transform: translateX(-20px);
                                & p {margin-right: 30px;
                                    &:last-child {margin-right: 0;}
                                    & strong {margin-right: 10px;}
                                }
                            }
                        }
                        & .font {display: flex; justify-content: space-between;
                            > div {border: 1px solid #E8E8E8;
                                & .con {text-align: center;
                                    & p {padding: 12px 20px; border-bottom: 1px solid #e8e8e8; text-align: left;
                                        & strong {}
                                    }
                                    & img {height: 82px; margin: 50px 0;}
                                }
                            }
                            & .left {display: flex; width: calc(100% - 240px);
                                & .con {width: calc(100% / 2); border-right: 1px solid #e8e8e8;
                                    &:last-child {border-right: 0;}
                                }
                            }
                            & .right {width: 220px;}
                        }
                    }
                }
            }
        }
        & .brand {width: 100%; max-width: 1024px; margin: 0 auto;
            & .text {text-align: center; margin-bottom: 70px;
                & p {font-size: 30px; font-weight: 700; color: #222; margin-bottom: 30px;}
                & span {line-height: 2; color: #222;}
            }
            & .list {margin-bottom: 180px;
                > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px;
                    > li {text-align: center; padding: 40px 20px; background: #f9f9f9;
                        & img {height: 28px;}
                        & p {font-size: 18px; font-weight: 600; margin: 40px 0 12px;}
                        & span {display: block; font-size: 14px; line-height: 1.4;}
                    }
                }
            }
            & .cate {
                & .tit {margin-bottom: 50px; text-align: center;
                    & p {font-size: 30px; font-weight: 700;}
                }
                & .con {
                    > ul {display: flex; justify-content: space-between;
                        > li {text-align: center;
                            & p {position: relative; display: flex; justify-content: center; align-items: center; width: 170px; aspect-ratio: 1 / 1; border-radius: 50%; background: #F5FEF8; font-size: 18px; font-weight: 600; color: #36BE8F; margin: 0 auto;
                                &::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 20px); height: calc(100% - 20px); border: 2px dotted #36BE8F; border-radius: 50%;}
                            }
                            & span {display: block; font-weight: 600; line-height: 1.8; margin-top: 24px;}
                        }
                    }
                }
            }
        }
        & .code {width: 100%; max-width: 968px; margin: 0 auto;
            & .tit {text-align: center;
                & p {font-size: 30px; font-weight: 700; color: #222;}
            }
            & .desc {padding: 40px 70px; background: #f9f9f9; margin: 50px 0 80px;
                & p {display: flex; align-items: center; font-size: 18px; font-weight: 600; margin-bottom: 18px;
                    & i {margin-right: 10px;}
                }
                & span {}
            }
            & .list {
                & .text {text-align: center; margin-bottom: 20px;
                    & p {font-size: 20px; font-weight: 600;}
                }
                & .con {padding: 50px; border: 1px solid #E8E8E8; border-radius: 10px;
                    > ul {
                        > li {margin-bottom: 60px;
                            &:last-child {margin-bottom: 0;}
                            & h2 {font-weight: 600; line-height: 1; margin-bottom: 30px;
                                & strong {margin-right: 10px; color: #36BE8F;}
                            }
                            > p {position: relative; line-height: 1; padding-left: 18px; margin-bottom: 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; background: #C5EEDE; border-radius: 50%;}
                                &::after {content: ''; position: absolute; top: 50%; left: 2.5px; transform: translateY(-50%); width: 5px; height: 5px; background: #36BE8F; border-radius: 50%;}
                                &:last-child {margin-bottom: 0;}
                            }
                            & span {position: relative; display: block; line-height: 1; padding-left: 30px; margin-bottom: 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 4px; height: 4px; background: #222; border-radius: 50%;}
                                &:last-child {margin-bottom: 0;}
                            }
                            & .pr {display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 580px; padding: 20px 30px; border: 3px solid #C5EEDE; border-radius: 999px; margin-bottom: 20px;
                                & p {line-height: 1;}
                                & i {color: #36BE8F;}
                            }
                        }
                    }
                }
            }
            & .point {margin: 80px 0;
                > h2 {font-size: 20px; font-weight: 600; margin-bottom: 20px; text-align: center;}
                > ul {display: flex; justify-content: space-between;
                    > li {display: flex; align-items: center; width: calc(100% / 2 - 10px); background: #F5FEF8; padding: 50px;
                        & .cate {text-align: center;
                            & img {}
                            & p {font-size: 12px; line-height: 1; font-weight: 600; color: #a3a3a3; margin-top: 15px;
                                & strong {display: block; font-size: 18px; line-height: 1; font-weight: 600; color: #36BE8F; margin-bottom: 3px;}
                            }
                        }
                        & .txt {width: 100%; padding-left: 25px;
                            & p {position: relative; line-height: 1; padding-left: 10px; margin-bottom: 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 3px; height: 3px; background: #222; border-radius: 50%;}
                                &:last-child {margin-bottom: 0;}
                            }
                        }
                    }
                }
            }
            & .use {
                > h2 {font-size: 20px; font-weight: 600; margin-bottom: 20px; text-align: center;}
                > ul {border: 1px solid #E8E8E8; border-radius: 10px; padding: 50px;
                    > li {margin-bottom: 20px;
                        &:last-child {margin-bottom: 0;}
                        & p {position: relative; color: #222; line-height: 1; padding-left: 18px;
                            &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; background: #C5EEDE; border-radius: 50%;}
                            &::after {content: ''; position: absolute; top: 50%; left: 2.5px; transform: translateY(-50%); width: 5px; height: 5px; background: #36BE8F; border-radius: 50%;}
                            & strong {}
                        }
                    }
                }
            }
        }
        & .guide {width: 100%; max-width: 968px; margin: 0 auto;
            & .tit {text-align: center;
                & p {font-size: 30px; font-weight: 700; color: #222;}
            }
            & .list {margin-bottom: 80px;
                &:last-child {margin-bottom: 0 ;}
                & .text {text-align: center; margin-bottom: 20px;
                    & p {font-size: 20px; font-weight: 600;}
                }
                & .con {padding: 50px; border: 1px solid #E8E8E8; border-radius: 10px;
                    > ul {
                        > li {margin-bottom: 60px;
                            &:last-child {margin-bottom: 0;}
                            > * {margin-bottom: 0;}
                            > *:last-child {margin-bottom: 0;}
                            & h2 {font-weight: 600; line-height: 1; margin-bottom: 30px;
                                & strong {margin-right: 10px; color: #36BE8F;}
                            }
                            > p {position: relative; line-height: 1; padding-left: 18px; margin-bottom: 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; background: #C5EEDE; border-radius: 50%;}
                                &::after {content: ''; position: absolute; top: 50%; left: 2.5px; transform: translateY(-50%); width: 5px; height: 5px; background: #36BE8F; border-radius: 50%;}
                                &:last-child {margin-bottom: 0;}
                            }
                            & span {position: relative; display: block; line-height: 1; padding-left: 30px; margin-bottom: 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 4px; height: 4px; background: #222; border-radius: 50%;}
                                &:last-child {margin-bottom: 0;}
                            }
                            & .pr {display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 580px; padding: 20px 30px; border: 3px solid #C5EEDE; border-radius: 999px;
                                & p {line-height: 1;}
                                & i {color: #36BE8F;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {padding-top: 0;
        & .about-cate {margin: 30px 0 50px;
            > ul {
                > li {
                    & a {font-size: 14px; padding: 8px 15px;}
                }
            }
        }
        & .about-tit {margin-bottom: 25px;
            & p {font-size: 18px;}
        }
        & .about-con {
            & .intro {
                & .text {margin-bottom: 60px;
                    & p {font-size: 24px;}
                    & span {font-size: 15px;}
                }
                & .img {gap: 20px;}
            }
            & .ci {
                & .logo {margin-bottom: 50px;
                    & .name {
                        & p {font-size: 16px;}
                    }
                    & .img {
                        & img {height: 70px;}
                    }
                }
                & .text {
                    > ul {
                        > li {margin-bottom: 50px;
                            & .tit {
                                & p {font-size: 18px;}
                            }
                            & .desc {
                                & p {font-size: 16px;}
                                & span {font-size: 15px;}
                            }
                            & .color {
                                & .left {padding: 10px 40px 10px 15px;
                                    & span {width: 30px; height: 30px;}
                                    & p {
                                        & strong {font-size: 16px;}
                                    }
                                }
                                & .right {padding: 0 30px;
                                    & p {font-size: 15px; margin-right: 20px;}
                                }
                            }
                            & .font {
                                > div {
                                    & .con {
                                        & img {height: 60px;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .brand {
                & .text {margin-bottom: 60px;
                    & p {font-size: 24px;}
                    & span {font-size: 15px;}
                }
                & .list {margin-bottom: 60px;
                    > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
                        > li {
                            & p {margin: 15px 0 10px;}
                        }
                    }
                }
                & .cate {
                    & .tit {margin-bottom: 30px;
                        & p {font-size: 24px;}
                    }
                    & .con {
                        > ul {
                            > li {width: calc(100% / 5 - 10px);
                                & p {width: 100%; font-size: 16px;}
                                & span {font-size: 13px;
                                    & br {display: none;}
                                }
                            }
                        }
                    }
                }
            }
            & .code {
                & .tit {
                    & p {font-size: 24px;}
                }
                & .desc {margin: 30px 0 50px; padding: 30px;
                    & span {
                        & br {display: none;}
                    }
                }
                & .list {
                    & .con {padding: 30px;
                        > ul {
                            > li {margin-bottom: 30px;
                                & h2 {margin-bottom: 25px;}
                                > p {margin-bottom: 15px;}
                                & span {margin-bottom: 15px;}
                            }
                        }
                    }
                }
                & .point {margin: 50px 0;
                    > ul {
                        > li {padding: 30px;
                            & .txt {
                                & p {font-size: 15px; margin-bottom: 15px;}
                            }
                        }
                    }
                }
                & .use {
                    > ul {padding: 30px;}
                }
            }
            & .guide {
                & .list {margin-bottom: 50px;
                    & .text {
                        & p {font-size: 18px;}
                    }
                    & .con {padding: 30px;
                        > ul {
                            > li {margin-bottom: 30px;
                                & h2 {margin-bottom: 25px;}
                                > p {margin-bottom: 15px;}
                                & span {margin-bottom: 15px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 768px) {
        & .about-con {
            & .ci {
                & .logo {
                    & .img {
                        &.left {width: calc(100% - 245px);}
                        &.right {width: 230px;}
                        & img {height: 45px;}
                    }
                }
                & .text {
                    > ul {
                        > li {
                            & .color {align-items: center; flex-wrap: wrap;
                                & .left {
                                    & span {width: 25px; height: 25px; margin-right: 10px;}
                                }
                                & .right {width: 100%; transform: translateX(0); margin-top: 10px; padding: 10px;}
                            }
                            & .font {flex-wrap: wrap;
                                > div {
                                    & .con {
                                        & img {margin: 30px 0;}
                                    }
                                }
                                & .left {width: 100%;}
                                & .right {width: 100%; margin-top: 20px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .about-con {
            & .code {
                & .point {
                    > ul {flex-wrap: wrap;
                        > li {width: 100%; margin-bottom: 20px;
                            &:last-child {margin-bottom: 0;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .about-cate {margin: 20px 0 40px;
            > ul {justify-content: center; flex-wrap: wrap; gap: 8px 0;
                > li {width: calc(100% / 3 - 10px);
                    & a {display: block; font-size: 13px; padding: 6px 14px; text-align: center;}
                }
            }
        }
        & .about-tit {
            & span {font-size: 12px;}
        }
        & .about-con {
            & .intro {
                & .text {margin-bottom: 30px;
                    & p {font-size: 18px; margin-bottom: 20px;}
                    & span {font-size: 14px;
                        & br {display: none;}
                    }
                }
                & .img {gap: 5px;}
            }
            & .ci {
                & .logo {
                    & .name {text-align: center;
                        & p {font-size: 14px;
                            & strong {margin-left: 12px;}
                        }
                    }
                    & .img {padding: 20px 0; background-size: 6px 6px;
                        &.left {width: 100%;}
                        &.right {width: 100%; margin-top: 10px;}
                        & img {height: 30px;}
                    }
                }
                & .text {
                    > ul {
                        > li {text-align: center;
                            & .tit {margin-bottom: 15px;
                                & p {font-size: 16px;}
                            }
                            & .desc {margin-bottom: 15px;
                                & p {font-size: 15px;}
                                & span {font-size: 14px;
                                    & br {display: none;}
                                }
                            }
                            & .color {border: 3px solid #36BE8F; border-radius: 999px; flex-wrap: nowrap; padding: 10px 20px;
                                > div {border: 0;}
                                & .left {width: 100px; padding: 0;
                                    & span {width: 20px; height: 20px;}
                                    & p {text-align: left;
                                        & strong {font-size: 14px;}
                                    }
                                }
                                & .right {width: calc(100% - 100px); margin-top: 0; padding: 0;
                                    & p {width: calc(100% / 3); font-size: 12px; margin-right: 0;
                                        & strong {display: block; margin-right: 0;}
                                    }
                                }
                            }
                            & .font {
                                > div {
                                    & .con {width: 100%;
                                        & p {font-size: 14px; line-height: 1; text-align: center; padding: 10px 0;}
                                        & img {height: 30px; margin: 15px 0;}
                                    }
                                }
                                & .right {
                                    & .con {
                                        & img {width: 35px; height: unset;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .brand {
                & .text {margin-bottom: 30px;
                    & p {font-size: 18px; margin-bottom: 20px;}
                    & span {font-size: 14px;
                        & br {display: none;}
                    }
                }
                & .list {
                    > ul {
                        > li {padding: 20px;
                            & img {height: 24px;}
                            & p {font-size: 15px; margin: 10px 0 5px;}
                            & span {font-size: 13px;
                                & br {display: none;}
                            }
                        }
                    }
                }
                & .cate {
                    & .tit {margin-bottom: 20px;
                        & p {font-size: 18px;}
                    }
                    & .con {
                        > ul {justify-content: center; flex-wrap: wrap; gap: 20px;
                            > li {width: calc(100% / 2 - 10px); padding: 0 10px;
                                & p {width: calc(100% - 30px); font-size: 15px;}
                                & span {margin-top: 15px;
                                    & br {display: none;}
                                }
                            }
                        }
                    }
                }
            }
            & .code {
                & .tit {
                    & p {font-size: 18px;
                        & br {display: none;}
                    }
                }
                & .desc {text-align: center; padding: 20px;
                    & p {justify-content: center; font-size: 16px; margin-bottom: 10px;}
                    & span {font-size: 14px;}
                }
                & .list {
                    & .text {
                        & p {font-size: 18px;}
                    }
                    & .con {padding: 20px;
                        > ul {
                            > li {
                                & h2 {margin-bottom: 15px;}
                                > p {font-size: 14px; line-height: 1.4; padding-left: 0; font-weight: 500;
                                    &::before, &::after {content: none;}
                                }
                                & span {font-size: 14px;}
                                & .pr {padding: 12px 24px;
                                    & p {font-size: 13px;}
                                    & i {font-size: 12px;}
                                }
                            }
                        }
                    }
                }
                & .point {
                    > h2 {font-size: 18px;}
                    > ul {
                        > li {padding: 20px;
                            & .cate {
                                & img {height: 45px;}
                                & p {
                                    & strong {font-size: 15px;}
                                }
                            }
                            & .txt {
                                & p {font-size: 14px; margin-bottom: 10px;}
                            }
                        }
                    }
                }
                & .use {
                    > h2 {font-size: 18px;}
                    > ul {padding: 25px;
                        > li {margin-bottom: 12px;
                            & p {font-size: 14px;}
                        }
                    }
                }
            }
            & .guide {
                & .list {
                    & .text {
                        & p {font-size: 18px;}
                    }
                    & .con {padding: 20px;
                        > ul {
                            > li {
                                & h2 {margin-bottom: 15px;}
                                > p {font-size: 14px; line-height: 1.4; padding-left: 0; font-weight: 500;
                                    &::before, &::after {content: none;}
                                }
                                & span {font-size: 14px;}
                                & .pr {flex-wrap: wrap; border-radius: 5px; padding: 12px 24px; gap: 10px 0;
                                    & p {width: 100%; text-align: center; font-size: 14px;}
                                    & i {width: 100%; text-align: center; transform: rotate(90deg); font-size: 12px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 360px) {
        & .about-con {
            & .ci {
                & .text {
                    > ul {
                        > li {text-align: center;
                            & .color {justify-content: center; flex-wrap: wrap; border-radius: 15px; padding: 15px 0;
                                & .left {width: unset;}
                                & .right {width: 100%; margin-top: 20px;
                                    & p {width: unset; margin-right: 10px;}
                                }
                            }
                            & .font {
                                & .right {
                                    & .con {
                                        & img {width: 30px; height: unset;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
            & .brand {
                & .text {
                    & p {
                        & br {display: none;}
                    }
                }
                & .list {
                    > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                        > li {
                            & span {
                                & br {display: block;}
                            }
                        }
                    }
                }
                & .cate {
                    & .con {
                        > ul {gap: 30px;
                            > li {width: 100%; padding: 0;
                                & p {width: 100%; aspect-ratio: unset; padding: 20px 0; border-radius: 10px;
                                    &::after {border-radius: 10px;}
                                    & br {display: none;}
                                }
                                & span {
                                    & br {display: block;}
                                }
                            }
                        }
                    }
                }
            }
            & .code {
                & .list {
                    & .con {
                        > ul {
                            > li {
                                & span {font-size: 14px; padding-left: 15px;
                                    &::before {left: 0;}
                                }
                                & .pr {flex-wrap: wrap; border-radius: 5px; padding: 12px;
                                    & p {width: calc(100% / 3);}
                                    & i {width: calc(100% / 3); text-align: center;}
                                    & i:nth-child(4) {display: none;}
                                    /* & i:nth-child(4) {width: 100%;} */
                                }
                            }
                        }
                    }
                }
                & .point {
                    > ul {
                        > li {justify-content: center; flex-wrap: wrap;
                            & .cate {width: 100%; margin-bottom: 20px;}
                            & .txt {width: 100%; padding-left: 0;}
                        }
                    }
                }
                & .use {
                    > ul {padding: 20px;}
                }
            }
            & .guide {
                & .list {
                    & .con {
                        > ul {
                            > li {
                                & span {font-size: 14px; padding-left: 15px;
                                    &::before {left: 0;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* cs */
.cs {width: 100%; max-width: 968px; margin: 0 auto; padding-top: 85px;
    & .cs-tit {text-align: center; margin-bottom: 30px;
        & p {font-family: var(--key-font); font-size: 22px; line-height: 1;}
    }
    & .cs-depth {margin-bottom: 60px;
        > ul {display: flex; justify-content: center;
            > li {width: 100%; max-width: 150px; border-bottom: 1px solid #E8E8E8; text-align: center;
                &.on {border-bottom: 2px solid #36BE8F;
                    & a {font-weight: 700;}
                }
                & a {display: block; font-size: 17px; line-height: 40px;}
            }
        }
    }
    & .cs-cate {margin-bottom: 40px;
        > ul {display: flex;
            > li {width: 100%; text-align: center; background: #F9F9F9; border: 1px solid #E8E8E8; border-left: 0; border-bottom: 1px solid #6a6a6a;
                &.on {background: #fff; border: 1px solid #6A6A6A; border-bottom: 0;}
                & button {display: block; width: 100%; font-size: 17px; line-height: 50px; color: #292E41;}
            }
        }
    }
    & .cs-con {
        & .faq {
            & .list {
                > ul {
                    > li {border-bottom: 1px solid #E8E8E8;
                        &.on {
                            & .q {display: block;}
                        }
                        & .f {display: flex; align-items: center; padding: 20px 40px;
                            & p {display: flex; justify-content: center; align-items: center; width: 32px; aspect-ratio: 1 / 1; border-radius: 50%; background: #484848; color: #fff;}
                            & span {width: calc(100% - 52px); padding: 0 20px;}
                            & i {font-size: 20px; text-align: right;}
                        }
                        & .q {display: none; padding: 30px 40px; background: #F9F9F9; border-top: 1px solid #E8E8E8;
                            & p {line-height: 1.6; padding: 0 40px 0 52px;}
                        }
                    }
                }
            }
        }
        & .inquiry {
            & .inquiry-list {
                & .desc {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
                    & p {color: #666;}
                    & span {font-size: 14px; color: #222;}
                }
                & .list {border-top: 1px solid #222;
                    & table {width: 100%; table-layout: fixed;
                        & tr {border-bottom: 1px solid #CBCBCB;
                            & td {width: 100px; text-align: center; vertical-align: middle; padding: 20px 0;
                                &.num {}
                                &.ct {}
                                &.subject {width: calc(100% - 400px);
                                    & span {display: none !important;}
                                }
                                &.date {}
                                &.reply {}
                                & p {font-size: 600;}
                            }
                        }
                        & thead {
                            & tr {background: #f9f9f9;
                                & td {
                                    & p {font-weight: 600;}
                                }
                            }
                        }
                        & tbody {
                            & tr {
                                & td {
                                    & p {}
                                    & a {display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: left; padding: 0 10px;}
                                }
                            }
                        }
                    }
                }
                & .paging {margin-top: 70px;
                    > ul {display: flex; justify-content: center; align-items: center;
                        > li {
                            & a {display: block; padding: 0 10px;
                                & p {color: #868686;}
                                &.on p {font-weight: 700; color: #292E41;}
                            }
                        }
                    }
                }
            }
            & .inquiry-view {
                & .con {border-top: 1px solid #222;
                    & .info {display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background: #f9f9f9; border-bottom: 1px solid #CBCBCB;
                        & p {width: calc(100% - 100px); font-size: 18px; font-weight: 600;}
                        & span {width: 100px; text-align: right;}
                    }
                    & .desc {padding: 40px; border-bottom: 1px solid #CBCBCB;}
                }
                & .reply {display: flex; justify-content: space-between; padding: 40px; border-bottom: 1px solid #CBCBCB;
                    & .ico {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2C9E4F;
                        & p {color: #fff;}
                    }
                    & .info {display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 70px);
                        & .subject {width: calc(100% - 100px); font-size: 18px; font-weight: 600;}
                        & .date {width: 100px;}
                        & p {width: 100%; margin-top: 20px;}
                    }
                }
                & .nav {
                    > ul {
                        > li {display: flex; border-bottom: 1px solid #CBCBCB;
                            > div {padding: 20px 0;}
                            & .cate {display: flex; justify-content: center; width: 200px; background: #f9f9f9;
                                & i {margin-right: 10px;}
                                & p {}
                            }
                            & .desc {display: flex; align-items: center; width: calc(100% - 200px);
                                & a {display: flex; width: calc(100% - 200px); padding: 0 20px;
                                    & i {margin-right: 10px;}
                                    & p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                                }
                                & span {width: 200px; text-align: center;}
                            }
                        }
                    }
                }
            }
            & .inquiry-write {
                > ul {padding: 0 25px; border: 1px solid #e8e8e8; border-radius: 10px;
                    > li {display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                        & .cate {width: 120px;
                            p {position: relative; display: inline-block; line-height: 40px;
                                &::after {content: ''; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2C9E4F;}
                            }
                        }
                        & .desc {display: flex; align-items: center; flex-wrap: wrap; width: calc(100% - 140px);
                            & select {}
                            & input[type="text"] {width: 100%; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & input[type="text"]:read-only {max-width: 390px;}
                            & input[type="file"] {display: none;}
                            & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; background: #292E41; color: #fff; border-radius: 5px; margin-left: 10px;
                                &.invalid-feedback {width: unset; height: unset; cursor: unset; background: unset; color: unset; margin: 10px 0 0 10px;}
                            }
                            & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                            & select {position: relative; width: 100%; max-width: 390px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                            & p {position: relative; width: 100%; font-size: 14px; margin-top: 10px; padding: 0 20px;
                                &::before {content: ''; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 4px; height: 4px; background: #697385; border-radius: 50%;}
                            }
                        }
                    }
                    > li:last-child {border-bottom: 0;}
                }
            }
            & .bt {display: flex; justify-content: center; margin-top: 70px;
                & 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;}
            }
        }
        & .partner {
            & .step {
                > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
                    > li {position: relative; padding: 40px; background: #F9F9F9; border: 1px solid #E8E8E8; border-radius: 10px;
                        &::after {content: ''; position: absolute; top: 50%; right: -34px; transform: translateY(-50%); width: 40px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #fff; background-image: url("/assets/site/img/common/ico-arrow-right.png"); background-repeat: no-repeat; background-position: center; border: 1px dotted #A0A0A0; z-index: 9;}
                        &::before {content: ''; position: absolute; top: 50%; right: -40px; transform: translateY(-50%); width: 54px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #fff; z-index: 9;}
                        &:last-child {
                            &::before {content: none;}
                            &::after {content: none;}
                        }
                        & .num {position: absolute; top: 0; left: 20px; padding: 8px 12px; background: #36BE8F; border-radius: 0 0 5px 5px;
                            & span {display: block; font-size: 12px; font-weight: 600; text-align: center; color: #fff;
                                & strong {display: block; font-size: 18px; line-height: 1;}
                            }
                        }
                        & .con {text-align: center;
                            & img {}
                            & p {font-size: 17px; font-weight: 700; margin: 20px 0 12px;}
                            & span {display: block; font-size: 14px; line-height: 1.4;}
                        }
                    }
                }
            }
            & .info {margin: 60px 0;
                > ul {padding: 40px; border: 1px solid #E8E8E8; border-radius: 10px;
                    > li {margin-bottom: 40px;
                        &:last-child {margin-bottom: 0;}
                        & h2 {display: inline-block; font-size: 18px; font-weight: 600; line-height: 1; border-radius: 999px; background: #C5EEDE; padding: 10px 20px; margin-bottom: 10px;}
                        & p {position: relative; padding-left: 14px; margin-bottom: 10px;
                            &:last-child {margin-bottom: 0;}
                            &::before {content: ''; position: absolute; top: 10px; left: 0; width: 4px; aspect-ratio: 1 / 1; border-radius: 50%; background: #222;}
                            & .blue {display: block; font-size: 14px; font-weight: 400; color: #0782DA;}
                            & .bold {}
                        }
                        & a {display: inline-flex; align-items: center; font-size: 17px; font-weight: 600; color: #000; border: 1px solid #C5EEDE; border-radius: 7px; background: #F5FEF8; padding: 10px 20px;
                            & img {margin-right: 10px;}
                        }
                    }
                }
            }
            & .form {
                > ul {padding: 25px; border-radius: 10px; border: 1px solid #E8E8E8;
                    > li {display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px dotted #E1E5ED;
                        & .cate {width: 120px; height: 40px; margin-right: 20px;
                            & p {position: relative; display: inline-block; font-size: 16px; line-height: 40px; color: #222; padding-right: 15px;}
                            & p::before {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 5px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--basic-color);}
                            & p.none::before {content: none;}
                        }
                        & .con {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                            > * {margin: 0 5px;}
                            > *:first-child {margin-left: 0;}
                            > *:last-child {margin-right: 0;}
                            & input[type="text"], & input[type="password"] {width: 100%; max-width: 390px; height: 40px; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 12px;}
                            & input[type="text"].phone {max-width: 100px;}
                            & input[type="submit"] {width: 100px; height: 40px; border-radius: 5px; background: #292E41; color: #fff;}
                            & textarea {width: 100%; font-size: 16px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 12px;}
                            & select {position: relative; width: 100%; max-width: 155px; border: 1px solid #e1e5ed; border-radius: 5px; padding: 0 28px 0 12px; background: url("/assets/site/img/common/ico-angle-down.png") no-repeat; background-position: center right 12px; background-size: 16px;}
                            & select.mail {max-width: 280px;}
                            & select.phone {max-width: 100px;}
                            & .invalid-feedback {white-space: nowrap;}
                        }
                        & .con:last-child {margin-bottom: 0;}
                        & .desc {width: calc(100% - 140px); padding: 0 10px;
                            & p {position: relative; font-size: 14px; color: #697385; padding: 0 10px;}
                            & p.bold {font-weight: 700;}
                            & p::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #697385;}
                        }
                        & .thumbs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: calc(100% - 140px); margin-bottom: 10px;
                            & label {position: relative; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; aspect-ratio: 1.25 / 1; border: 1px solid #E1E5ED; border-radius: 5px;
                                & img {}
                                & p {width: 100%; line-height: 1; text-align: center; margin-top: 10px;}
                                & input[type="file"] {display: none;}
                                & .img_preview, .img_preview1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px;
                                    & img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                                    & button {position: absolute; z-index: 2; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 4px;}
                                }
                            }
                        }
                        & .file {display: flex; align-items: center; width: calc(100% - 140px); margin-bottom: 10px;
                            & label {display: flex; justify-content: center; align-items: center; width: 100px; height: 40px; font-size: 16px; border: 1px solid #292E41; border-radius: 5px;}
                            & input[type="file"] {display: none;}
                            & p {font-size: 14px; color: #697385; margin-left: 10px;}
                        }
                    }
                    > li:first-child {padding-top: 0;}
                    > li:last-child {padding-bottom: 0; border-bottom: 0;}
                }
            }
            & .guide {padding: 15px 20px; background: #F9F9F9; border-radius: 10px; margin-top: 20px;
                & p {position: relative; font-size: 14px; line-height: 1; padding-left: 14px; margin-bottom: 5px;
                    &:last-child {margin-bottom: 0;}
                    &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; aspect-ratio: 1 / 1; border-radius: 50%; background: #222;}
                }
            }
            & .bt {display: flex; justify-content: center; margin-top: 70px;
                & 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;}
            }
        }
    }
    @media (width <= 860px) {padding-top: 40px;
        & .cs-tit {margin-bottom: 20px;
            & p {font-size: 18px;}
        }
        & .cs-depth {margin-bottom: 40px;
            > ul {
                > li {
                    & a {font-size: 15px;}
                }
            }
        }
        & .cs-cate {margin-bottom: 0;
            > ul {
                > li {
                    & button {font-size: 15px; line-height: 45px;}
                }
            }
        }
        & .cs-con {
            & .faq {
                & .list {
                    > ul {
                        > li {
                            & .f {padding: 20px;
                                & p {width: 28px; font-size: 14px;}
                                & span {width: calc(100% - 48px); font-size: 14px;}
                            }
                            & .q {padding: 20px;
                                & p {font-size: 14px; padding: 0 40px 0 48px;}
                            }
                        }
                    }
                }
            }
            & .inquiry {margin-top: 30px;
                & .inquiry-list {
                    & .desc {margin-bottom: 15px;
                        & p {font-size: 14px;}
                        & span {}
                    }
                    & .list {
                        & table {
                            & tr {
                                & td {width: 80px; padding: 12px 0;
                                    &.num {width: 60px;}
                                    &.ct {}
                                    &.subject {width: calc(100% - 280px);}
                                    &.date {}
                                    &.reply {}
                                    & p {font-size: 14px;}
                                    & a {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .cs-con {
            & .faq {
                & .list {
                    > ul {
                        > li {
                            & .f {padding: 15px 0;
                                & p {width: 24px; font-size: 12px;}
                                & span {width: calc(100% - 40px); padding: 0 15px;}
                                & i {font-size: 16px;}
                            }
                            & .q {padding: 15px 0;
                                & p {padding: 0 31px 0 39px;}
                            }
                        }
                    }
                }
            }
            & .inquiry {margin-top: 30px;
                & .inquiry-list {
                    & .desc {margin-bottom: 12px;
                        & p {font-size: 13px;}
                        & span {display: none;}
                    }
                    & .list {
                        & table {
                            & tr {
                                & td {padding: 8px 0;
                                    &.num {width: 50px;}
                                    &.subject {width: calc(100% - 190px);}
                                    &.date {display: none;}
                                    & p {font-size: 13px;}
                                    & a {font-size: 13px; padding: 0;}
                                }
                            }
                            & tbody {
                                & tr {
                                    & td {
                                        & a {font-size: 13px; padding: 0 5px;}
                                    }
                                }
                            }
                        }
                    }
                    & .paging {margin-top: 25px;
                        > ul {
                            > li {
                                & a {padding: 0 8px;
                                    & i {}
                                    & p {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
                & .bt {margin-top: 40px;
                    & button {width: 120px; height: 35px; font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .cs-depth {margin-bottom: 30px;
            > ul {
                > li {
                    & a {font-size: 14px;}
                }
            }
        }
        & .cs-cate {margin-bottom: 0;
            > ul {
                > li {
                    & button {font-size: 14px; line-height: 35px;}
                }
            }
        }
        & .cs-con {
            & .faq {
                & .list {
                    > ul {
                        > li {
                            & .f {
                                & p {width: 20px; font-size: 10px;}
                                & span {width: calc(100% - 36px);}
                            }
                            & .q {
                                & p {padding: 0 31px 0 35px;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* search */
.search {
    & .search-tab {margin-bottom: 90px;
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            > li {
                & button {width: 100%; height: 50px; font-size: 16px; color: #222; font-weight: 600; text-align: center; background: #f9f9f9;}
                &.on {
                    & button {background: var(--basic-color); color: #fff;}
                }
            }
        }
    }
    & .search-box {margin-bottom: 60px;
        &:last-child {margin-bottom: 0;}
        & .tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
            > p {position: relative; font-size: 22px; font-weight: 600; line-height: 1; padding-left: 25px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; height: 14px; border: 4px solid var(--basic-color); border-radius: 50%; box-sizing: border-box;}
            }
            & .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;}
                    }
                    &.type02 {
                        & .bar {
                            &::before {content: none;}
                            & button {color: #fff;}
                            &.on {background: #fff;
                                & button {color: #8491A7;}
                            }
                        }
                    }
                    & .cn {
                        & 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;}
                }
            }
        }
        & .con {padding: 25px 40px; border: 1px solid #E8E8E8; border-radius: 10px;
            > ul {
                > li {display: flex; align-items: center; padding: 10px 0; cursor: pointer; border-bottom: 1px solid #E1E5ED;
                    &:last-child {border-bottom: 0;}
                    & .thumbs {position: relative; width: 120px; aspect-ratio: 4 / 3; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .logo {position: relative; width: 120px; height: 30px; overflow: hidden;
                        & img {width: 100%; height: 100%; object-fit: contain;}
                    }
                    & .info {display: flex; align-items: center; width: calc(65% - 120px); padding: 0 30px;
                        & p {font-size: 15px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
                        & span {display: block; font-family: var(--key-font); font-size: 12px; line-height: 1; border-radius: 5px; padding: 5px; margin-left: 30px;}
                        & span.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent; border: 1px solid #2C9E4F;}
                        & span.type02 {color: #07BB9D; border: 1px solid #07BB9D;}
                        & span.type03 {color: #3675FF; border: 1px solid #3675FF;}
                        & span.type04 {color: #7758FF; border: 1px solid #7758FF;}
                    }
                    & .cate {display: flex; justify-content: center; width: 15%;
                        & 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;}
                        &.type02 {
                            p {color: #16A775; border: 1px solid #36BE8F;
                                &:nth-child(1) {background: #36BE8F20;}
                                &:nth-child(2) {background: #36BE8F10;}
                            }
                        }
                        &.type03 {
                            & p {color: #FF9E03; border: 1px solid #F3B200;}
                            & p:nth-child(1) {background: #FFBB0440;}
                            & p:nth-child(2) {background: #FFBB041A;}
                        }
                    }
                    & .place {width: 10%; text-align: center;
                        & p {font-size: 14px; font-weight: 600; color: #8491A7;}
                    }
                    & .company {width: 10%; text-align: center;
                        & p {font-size: 14px; font-weight: 600;}
                    }
                    & .time {width: 10%; text-align: center;
                        & p {font-size: 14px; color: #0782DA;}
                    }
                    & .sector {width: 10%; text-align: center;
                        & p {font-size: 14px; font-weight: 600;}
                    }
                }
                &.type02 {
                    > li {padding: 40px 0;
                        & .company {width: 15%;}
                        & .info {width: calc(55% - 120px);}
                        & .ct {width: 100px; text-align: center;
                            & p {font-size: 15px; font-weight: 600;}
                        }
                        & .subject {width: calc(100% - 300px); padding: 0 20px;
                            & a {display: block; font-size: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
                                &:hover {text-decoration: underline;}
                            }
                        }
                        & .date {width: 200px; text-align: center;
                            & p {font-size: 15px;}
                        }
                    }
                }
            }
        }
        & .list {
            > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 70px 30px;
                > li {cursor: pointer;
                    & .thumbs {position: relative; aspect-ratio: 385 / 250; overflow: hidden; border-radius: 10px;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .info {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;
                        & .left {display: flex; align-items: center; width: calc(100% - 80px);
                            & span {font-size: 14px; font-weight: 600; line-height: 1; color: #697385; padding: 4px 8px; border: 1px solid #E1E5ED; border-radius: 999px;}
                            & p {font-weight: 600; line-height: 1; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                        }
                        & .right {display: flex; justify-content: space-between; align-items: center; width: 60px;
                            & .view {display: flex; align-items: center;
                                & img {}
                                & p {font-size: 14px; line-height: 1; color: #697385; margin-left: 3px;}
                            }
                            & .favorite {
                                & button {
                                    & i {font-size: 14px; color: #EAEDF4;}
                                    &.on {
                                        & i {color: #36BE8F;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .search-box {
            & .tit {
                > p {font-size: 20px;}
            }
            & .con {padding: 0 20px;
                > ul {
                    > li {padding: 20px 0;
                        & .thumbs {width: 100px;}
                        & .info {width: calc(50% - 100px); padding: 0 20px;
                            & p {font-size: 14px;}
                            & span {display: none;}
                        }
                        & .cate {width: 20%;}
                        & .place {width: 15%;}
                        & .company {width: 15%;}
                    }
                    &.type02 {
                        > li {padding: 20px 0;
                            & .logo {width: 100px;}
                            & .info {width: calc(40% - 100px);}
                            & .sector {width: 15%;}
                        }
                    }
                }
            }
            & .list {
                > ul {grid-template-columns: repeat(3, minmax(0, 1fr));}
            }
        }
    }
    @media (width <= 860px) {
        & .search-tab {margin-bottom: 60px;
            > ul {
                > li {
                    & button {height: 45px; font-size: 14px;}
                }
            }
        }
        & .search-box {
            & .tit {
                > p {font-size: 18px;}
            }
            & .con {padding: 20px;
                > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
                    > li {flex-wrap: wrap; border-bottom: 0; padding: 0;
                        & .thumbs {width: 100%; order: 1; border-radius: 5px;}
                        & .company {width: 100%; order: 2; margin: 10px 0;}
                        & .cate {width: 100%; order: 3;
                            & p {font-size: 12px;}
                        }
                        & .place {width: 100%; order: 5; margin-top: 10px;
                            & p {font-size: 12px;}
                        }
                        & .info {display: none;}
                    }
                    &.type02 {
                        > li {padding: 0;
                            & .logo {display: flex; justify-content: center; align-items: center; width: 100%; height: unset; aspect-ratio: 2 / 1; border: 1px solid #E8E8E8;
                                & img {max-height: 30px;}
                            }
                            & .company {width: 100%; margin: 15px 0 0;}
                            & .sector {display: none;}
                            & .place {margin-top: 5px;}
                        }
                    }
                    &.type03 {display: block;
                        > li {margin-bottom: 15px;
                            &:last-child {margin-bottom: 0;}
                            & .ct {
                                & p {font-size: 14px;}
                            }
                            & .subject {width: calc(100% - 200px);
                                & a {font-size: 14px;}
                            }
                            & .date {width: 100px;
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
            & .list {
                > ul {gap: 40px 20px;
                    > li {
                        & .info {
                            & .left {
                                & span {font-size: 12px;}
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .search-tab {margin-bottom: 40px;
            > ul {
                > li {
                    & button {height: 38px; font-size: 13px;}
                }
            }
        }
        & .search-box {
            & .tit {
                > p {font-size: 16px; padding-left: 15px;
                    &::before {width: 10px; height: 10px; border: 3px solid var(--basic-color);}
                }
            }
            & .con {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
            }
            & .list {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px;
                    > li {
                        & .info {margin-top: 15px; flex-wrap: wrap;
                            & .left {width: 100%; justify-content: center; flex-wrap: wrap;
                                & p {width: 100%; margin: 10px 0 5px; text-align: center;}
                            }
                            & .right {width: 100%; justify-content: center; gap: 10px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .search-box {
            & .con {
                > ul {
                    > li {
                        & .cate {
                            & p {font-size: 10px; padding: 3px 6px;}
                        }
                    }
                    &.type02 {
                        > li {
                            & .logo {
                                & img {max-height: 20px;}
                            }
                            & .ct {width: 80px;
                                & p {font-size: 13px;}
                            }
                            & .subject {width: calc(100% - 160px); padding: 0 12px;
                                & a {font-size: 13px;}
                            }
                            & .date {width: 80px;
                                & p {font-size: 13px;}
                            }
                        }
                    }
                }
            }
        }
    }
}