@charset "utf-8";
header{position: fixed; top: 0; left: 0; z-index: 999; transition: background 0.3s;}
header::after{display: none;}
a, .menu-btn, .sc-btn, label{cursor: pointer;}
.sub-top{margin-bottom: 0; position: relative; width: 100%; height: 100vh; padding: 0 120px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 2vw;}
.sub-top::after{content: ''; display: block; width: 100%; height: 100%; z-index: -1; position: absolute; top: 0; left: 0; background: var(--input-bg); backdrop-filter: blur(5px);}
.sub-top .sub-tit{position: relative; margin-top: 10rem;}
.sub-top .sub-tit h2{font-size: 4.5rem; font-weight: bold;}
.sub-top .sub-tit span{font-family: 'SBAggroB'; position: absolute; left: 0; z-index: 1; opacity: 0.3; bottom: 0; font-size: 10vw; font-weight: bold; white-space: nowrap;}
.sub-top > p{max-width: 650px; opacity: 0.5; font-size: 1.25rem;}

.sub-cont {row-gap: 20vw; margin-bottom: 0;}
.sub-cont > .content{width: 100%;}
.cont-tit{text-align: center; margin-bottom: 10vw;}
.cont-tit, .cont-info h4 {font-size: 3rem; font-weight: bold;}
.cont-img img{width: 100%; height: 100%; object-fit: contain;}
.sub-cont .cont1 li{display: flex; column-gap: 2.5rem; margin-bottom: 7rem;}
.sub-cont .cont1 li:last-child{margin-bottom: 0;}
.sub-cont .cont1 li .cont-img{width: 8.75rem; height: 8.75rem;}
.sub-cont .cont1 .cont-info p {font-size: 1.5rem; opacity: 0.5; margin-top: 2rem;}
.sub-cont .cont1 .cont-wrap{max-width: 850px; margin: 0 auto; overflow: hidden;}
.sub-cont .cont2 .cont-wrap{display: flex; justify-content: center;}
.sub-cont .cont2 .cont-wrap li{flex-shrink: 0; position: relative; margin-right: -32px; width: 25vw; height: 25vw; max-width: 300px; max-height: 300px; min-width: 180px; min-height: 180px; border-radius: 50%; border: 1px solid var(--line-color); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;}
.sub-cont .cont2 .cont-wrap li:last-child{margin-right: 0;}
.sub-cont .cont2 .cont-wrap li:not(:last-child)::after{content: ''; display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 12px; height: 24px; background: url(../img/arrow2.svg) no-repeat center;}
.sub-cont .cont2 .cont-wrap p{font-size: 1.125rem;}
.sub-cont .cont2 .cont-wrap .cont-img{animation: imgani 2s linear infinite 0.2s; width: 6vw; height: 6vw; max-width: 100px; max-height: 100px; min-width: 50px; min-height: 50px;}
.sub-cont .cont2 .cont-wrap span{display: flex; justify-content: center; align-items: center; width: 1.6vw; height: 1.6vw; max-width: 30px; max-height: 30px; min-width: 20px; min-height: 20px; border-radius: 50%; background-color: var(--point-color);}


/* 테이블 */
.table-wrap{max-width: 100%;}
.table-wrap table {table-layout: fixed; min-width: 800px; width: 100%; border-collapse: collapse;border-spacing: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.table-wrap table thead tr:first-child th:first-child {border-top-left-radius: 12px;}
.table-wrap table thead tr:first-child th:last-child {border-top-right-radius: 12px;}
.table-wrap table thead th {background-color: #2a2a2a; color: var(--cont-color); font-weight: bold; padding: 16px 12px; text-align: center; font-size: 1rem; height: 5rem; position: relative;}
.table-wrap table thead th span {position: relative; z-index: 10;}
.table-wrap table thead th:not(:last-child)::after {content: ''; display: block; width: 1px; height: 50%; position: absolute; right: 1px; top: 50%; background-color: #555; transform: translateY(-50%); opacity: 0.5;}
.table-wrap table tbody td {padding: 14px 12px; text-align: center; background-color: #262626; color: #ccc; font-size: 0.875rem; border-bottom: 1px solid #333;}
.table-wrap table tbody tr:last-child td {border-bottom: none;}
.table-wrap table tbody td:first-child {font-weight: 500; color: var(--cont-color); background-color: #2f2f2f; padding-left: 20px;}
/* 선택 강조 */
.table-wrap table thead th.on, .table-wrap table tbody td.on {position: relative;}
.table-wrap table thead th.on::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px 12px 0 0; background: linear-gradient(to right, #e68f44, var(--point-color)); z-index: 5;}
.table-wrap table tbody td.on::after, .table-wrap table tbody td.on::before {content: ""; position: absolute; top: 0; width: 1px; height: 100%; border-radius: 12px 12px 0 0; z-index: 5; background: linear-gradient(to right, #e68f44, var(--point-color));}
.table-wrap table tbody td.on::after {left: 0;}
.table-wrap table tbody td.on::before {right: 0;}
.table-wrap table tbody tr:last-child td.on {border-bottom: 1px solid var(--point-color);}
.table-wrap table thead th:nth-child(2), .table-wrap table thead th:nth-child(3), .table-wrap table thead th:nth-child(4), .table-wrap table tbody td:nth-child(2), .table-wrap table tbody td:nth-child(3), .table-wrap table tbody td:nth-child(4) {cursor: pointer;}

/* div 테이블 */
.table-wrap .table-tab, .table-wrap .table-tab-nav{display: none;}
.table-container {display: flex;}
.table-container > .table-col {flex: 1;}
.table-col .thead .th{background-color: #2a2a2a; color: var(--cont-color); font-weight: bold; padding: 16px 12px; text-align: center; font-size: 1rem; height: 5rem; position: relative; display: flex; align-items: center; justify-content: center;}
.table-col .thead .th span{position: relative; z-index: 10;}
.table-col .tbody .tr{padding: 0.875rem 0.75rem; height: 65px; text-align: center; background-color: #262626; color: #ccc; font-size: 0.875rem; border-bottom: 1px solid #333; display: flex; align-items: center; justify-content: center;}
.col-head .tbody .tr{font-weight: 500; color: var(--cont-color); background-color: #2f2f2f; padding-left: 20px;}
.col-head .thead .th {border-top-left-radius: 12px;}
.col-tail .thead .th {border-top-right-radius: 12px;}

.table-col.on .thead .th, .table-col.on, .table-col.on .tr:last-child {position: relative;}
.table-col.on .thead .th::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px 12px 0 0; background: linear-gradient(to right, #e68f44, var(--point-color)); z-index: 5;}
.table-col.on::after, .table-col.on::before {content: ""; position: absolute; bottom: 0; width: 1px; height: calc(100% - 5rem); z-index: 5;}
.table-col.on::after {left:-1px; background: linear-gradient(180deg, #e68f44, var(--point-color));}
.table-col.on::before {right: 0; background: linear-gradient(180deg, var(--point-color), #e68f44);}
.table-col.on .tr:last-child::after{width: 100%; height: 1px; content: ""; position: absolute; bottom: 0; left: 0; background: linear-gradient(to right, var(--point-color), #e68f44);}

.fixed .thead{position: fixed; top: 112px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3)}
.fixed .thead .th{border-radius: 12px 12px 0 0;}
.fixed .table-col.on::after, .fixed .table-col.on::before {height: 100%;}

/* 서브 배경 */
.web-top{background: url(../img/web.png) center/cover; background-repeat: no-repeat;}
.design-top{background: url(../img/design.png) center/cover; background-repeat: no-repeat;}
.marketing-top{background: url(../img/marketing.jpg) center/cover; background-repeat: no-repeat;}
.column-top{background: url(../img/columns.webp) center/cover; background-repeat: no-repeat;}

@keyframes imgani{
    0% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(-5px);
    }
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
    .sub-top{padding: unset;}
    .sub-top > .sub-tit, .sub-top > p {margin: 0 auto; max-width: 1440px; width: 80%;}
    .sub-top .sub-tit{margin-top: 10rem;}
    .sub-top .sub-tit h2{font-size: 4rem;}
    .sub-top .sub-tit span{font-size: 6rem;}
    .sub-top > p{font-size: 1rem;}
    .cont-tit, .cont-info h4{font-size: 2.5rem;}
}

@media screen and (max-width: 768px) {
    .sub-top .sub-tit h2{font-size: 3rem;}
    .sub-top .sub-tit span {font-size: 4rem;}
    .sub-cont .cont1 li{flex-direction: column; align-items: center; row-gap: 2.5rem;}
    .sub-cont .cont1 li:nth-child(even){flex-direction: column-reverse}
    .sub-cont .cont1 .cont-info{text-align: center; max-width: 360px;}
    .sub-cont .cont1 .cont-info h4{font-size: 2rem;}
    .sub-cont .cont1 .cont-info p{font-size: 1.25rem;}
    .sub-cont .cont2 .cont-wrap {flex-direction: column; align-items: center; row-gap: calc(12px + 3rem);}
    .sub-cont .cont2 .cont-wrap li{margin-right: 0; width: 300px; height: 300px;}
    .sub-cont .cont2 .cont-wrap li:not(:last-child)::after{rotate: 90deg;right: 50%; top: calc(100% + 1.5rem); transform: translate(-50%,0);}
    .sub-cont .cont2 .cont-wrap .cont-img { width: 100px; height: 100px;}
    /* div 테이블 */
    .table-wrap .table-tab{margin: 0 auto 5rem; display: flex; width: 100%; max-width: 390px; border-radius: 5rem; border: 1px solid var(--line-color); overflow: hidden;}
    .table-wrap .table-tab >li{cursor: pointer; padding: 0.5rem 2rem; flex: 1; text-align: center;}
    .table-wrap .table-tab >li.on{background-color: var(--cont-color); color: #000; border-radius: 5rem;}
    .table-wrap .table-tab-nav {width: 48%; align-items: center; justify-content: space-between; z-index: 99; position: fixed; top: 50%; left: 35%; transform: translateY(-50%);}
    .table-wrap .table-tab-nav > button {width: 32px; height: 32px; background-color: #000; border-radius: 50%; transition: all 0.3s; opacity: 0.7;}
    .table-wrap .table-tab-nav > button:disabled {opacity: 0.3;}
    .table-wrap .table-tab-nav > button:hover {opacity: 1;}
    .table-wrap .table-tab-nav > button svg path{fill: var(--point-color);}
    .table-wrap .table-tab-nav > button:hover svg path{fill: var(--sub-color);}
    .table-container{min-height: 850px; position: relative; border-radius: 12px 12px 0 0; overflow: hidden;}
    .col-head{width: 30%; position: absolute;  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); z-index: 99;}
    .table-col .thead .th{border-radius: 12px 12px 0 0;}
    .table-col {transition: transform 0.5s ease, opacity 0.5s ease;}
    .table-col:not(.col-head):not(.on){opacity: 0.5;}
    .table-col:not(.col-head) {position: absolute; top: 0; left: 35%; z-index: 98; width: 50%;}

    .table-wrap:not(.web-table) .table-tab-nav {width: 62%;}
    .table-wrap:not(.web-table) .table-col:not(.col-head) {width: 65%;}
}

@media screen and (max-width: 480px) {
    .sub-top .sub-tit span{display: none;}
}