4124 lines
105 KiB
CSS
4124 lines
105 KiB
CSS
@charset "utf-8";
|
|
/* ==========================
|
|
* SUB HEADER
|
|
* ========================== */
|
|
#hd.sub { position: absolute !important }
|
|
|
|
@media (max-width: 480px) {
|
|
#hd.sub { position: relative !important }
|
|
}
|
|
/* ==========================
|
|
* SUB VISUAL
|
|
* ========================== */
|
|
#sub_visual {
|
|
position: relative;
|
|
height: clamp(240px, calc(43.27vw - 92.3px), 600px);
|
|
}
|
|
#sub_visual::before {
|
|
position: absolute;
|
|
content: "";
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.45);
|
|
z-index: 1;
|
|
}
|
|
#sub_visual .sub-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
/* 페이지별 배경 이미지 */
|
|
.sub-bg.bg-company { background: url('../img/sub/subtop_company.png') center / cover no-repeat }
|
|
.sub-bg.bg-vision { background: url('../img/sub/subtop_vision.png') center / cover no-repeat }
|
|
.sub-bg.bg-history { background: url('../img/sub/subtop_history.png') center / cover no-repeat }
|
|
.sub-bg.bg-organ { background: url('../img/sub/subtop_organ.png') center / cover no-repeat }
|
|
.sub-bg.bg-location { background: url('../img/sub/subtop_location.png') center / cover no-repeat }
|
|
.sub-bg.bg-business { background: url('../img/sub/subtop_business.png') center / cover no-repeat }
|
|
.sub-bg.bg-pg { background: url('../img/sub/subtop_pg.png') center / cover no-repeat }
|
|
.sub-bg.bg-prepay { background: url('../img/sub/subtop_prepay.png') center / cover no-repeat }
|
|
.sub-bg.bg-pay { background: url('../img/sub/subtop_pay.png') center / cover no-repeat }
|
|
.sub-bg.bg-shop { background: url('../img/sub/subtop_shop.png') center / cover no-repeat }
|
|
.sub-bg.bg-b2b { background: url('../img/sub/subtop_b2b.png') center / cover no-repeat }
|
|
.sub-bg.bg-status { background: url('../img/sub/subtop_status.png') center / cover no-repeat }
|
|
.sub-bg.bg-talent { background: url('../img/sub/subtop_talent.png') center / cover no-repeat }
|
|
.sub-bg.bg-benefits { background: url('../img/sub/subtop_benefits.png') center / cover no-repeat }
|
|
.sub-bg.bg-employ { background: url('../img/sub/subtop_employ.png') center / cover no-repeat }
|
|
.sub-bg.bg-press { background: url('../img/sub/subtop_press.png') center / cover no-repeat }
|
|
.sub-bg.bg-news { background: url('../img/sub/subtop_news.png') center / cover no-repeat }
|
|
.sub-bg.bg-inquiry { background: url('../img/sub/subtop_inquiry.png') center / cover no-repeat }
|
|
#sub_visual .sub-tit-wrap {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
animation: subTitDown 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
}
|
|
@keyframes subTitDown {
|
|
0% { opacity: 0; transform: translateY(-30px) }
|
|
100% { opacity: 1; transform: translateY(0) }
|
|
}
|
|
#sub_visual .sub-tit {
|
|
font-size: clamp(2.8rem, calc(2.14vw + 1.8rem), 5.5rem);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
word-break: keep-all;
|
|
padding-bottom: clamp(8px, 0.75vw, 14px);
|
|
}
|
|
#sub_visual .sub-desc {
|
|
font-size: clamp(1.6rem, calc(0.36vw + 1.23rem), 2rem);
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
@media (max-width: 480px) {
|
|
#sub_visual::before { background-color: rgba(0, 0, 0, 0.55) }
|
|
}
|
|
/* ==========================
|
|
* SUB BREADCRUMB
|
|
* ========================== */
|
|
#sub_breadcrumb {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
#sub_breadcrumb .inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: var(--mainsize);
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
height: clamp(50px, calc(2.64vw + 29.73px), 72px);
|
|
}
|
|
#sub_breadcrumb .breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#sub_breadcrumb .breadcrumb > li {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#sub_breadcrumb .breadcrumb > li + li::before {
|
|
content: '·';
|
|
display: inline-block;
|
|
margin: 0 clamp(10px, 1vw, 30px);
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
}
|
|
#sub_breadcrumb .bc-home {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #888;
|
|
transition: color 0.2s;
|
|
text-decoration: none !important;
|
|
}
|
|
#sub_breadcrumb .bc-home svg { width: 16px; height: 16px; flex-shrink: 0 }
|
|
/* depth 버튼 공통 */
|
|
#sub_breadcrumb .bc-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-family: var(--k-font);
|
|
font-size: clamp(1.6rem, calc(0.18vw + 1.27rem), 1.8rem);
|
|
font-weight: 500;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
transition: color 0.2s;
|
|
}
|
|
#sub_breadcrumb .bc-btn .bc-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #aaa;
|
|
transition: transform 0.25s, color 0.2s;
|
|
}
|
|
#sub_breadcrumb .bc-btn .bc-arrow img { width: 14px; height: 14px }
|
|
#sub_breadcrumb .bc-item.open .bc-arrow { transform: rotate(180deg) }
|
|
#sub_breadcrumb .bc-dropdown {
|
|
display: none;
|
|
opacity: 0;
|
|
transform: translateY(-6px);
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
left: -14px;
|
|
z-index: 100;
|
|
min-width: 160px;
|
|
background: #fff;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
padding: 6px 0;
|
|
list-style: none;
|
|
margin: 0;
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
#sub_breadcrumb .bc-dropdown.show {
|
|
display: block;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
#sub_breadcrumb .bc-dropdown li a {
|
|
display: block;
|
|
padding: 9px 18px;
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
color: #555;
|
|
transition: background-color 0.15s, color 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#sub_breadcrumb .bc-dropdown li a:hover,
|
|
#sub_breadcrumb .bc-dropdown li.active a {
|
|
background-color: var(--bg);
|
|
color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
@media (max-width: 480px) {
|
|
#sub_breadcrumb .bc-dropdown { min-width: 130px }
|
|
}
|
|
|
|
/* ==========================
|
|
* SUB CONTENT 공통
|
|
* ========================== */
|
|
.sub_content {
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
.sub_content .sub-section {
|
|
padding: clamp(6rem, calc(7.21vw + 0.46rem), 12rem) 0
|
|
clamp(10rem, calc(12.02vw + 7.69px), 20rem);
|
|
}
|
|
.sub_content .sub-section2 {
|
|
padding: clamp(5rem, calc(6.01vw + 3.85px), 10rem) 0 0;
|
|
}
|
|
|
|
.sub_content .sub-inner {
|
|
max-width: var(--mainsize);
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
.sub_content .blue-bg {
|
|
background: var(--bg);
|
|
padding: clamp(6rem, calc(4.81vw + 2.31rem), 10rem) 0;
|
|
}
|
|
.pb-10 {
|
|
padding-bottom: clamp(5rem, calc(6.01vw + 3.85px), 10rem) !important;
|
|
}
|
|
.pb-20 {
|
|
padding-bottom: clamp(10rem, calc(12.02vw + 7.69px), 20rem) !important;
|
|
}
|
|
.mb-10 {
|
|
margin-bottom: clamp(5rem, calc(6.01vw + 3.85px), 10rem);
|
|
}
|
|
.mb-20 {
|
|
margin-bottom: clamp(10rem, calc(12.02vw + 7.69px), 20rem);
|
|
}
|
|
.mt-10 {
|
|
margin-top: clamp(5rem, calc(6.01vw + 3.85px), 10rem);
|
|
}
|
|
.pd-10 {
|
|
padding: 10rem 0;
|
|
}
|
|
.sm-text {
|
|
font-size: clamp(1.4rem, calc(0.54vw + 1.5rem), 1.6rem) !important;
|
|
padding-top:2rem;
|
|
color:var(--cont1);
|
|
font-weight: 400;
|
|
}
|
|
.sub_content .sub-block-title {
|
|
font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 1.8rem);
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
padding-bottom: clamp(14px, 1.5vw, 24px);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
margin-bottom: clamp(24px, 2.5vw, 40px);
|
|
}
|
|
.sub_content .sub-h2 {
|
|
font-size: clamp(2.2rem, calc(1.43vw + 1.514rem), 3.4rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
line-height: 150%;
|
|
word-break: keep-all;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.sub_content .sub-h2 em { color: var(--primary); font-style: normal }
|
|
|
|
/* 본문 설명 텍스트 */
|
|
.sub_content .sub-desc-txt {
|
|
font-size: clamp(1.6rem, calc(0.36vw + 1.23rem), 2rem);
|
|
font-weight: 400;
|
|
color: var(--cont2);
|
|
line-height: 150%;
|
|
letter-spacing: -0.2pt;
|
|
word-break: keep-all;
|
|
white-space: pre-line;
|
|
margin-top: clamp(12px, 1.25vw, 20px);
|
|
}
|
|
.sub_content .sub-desc-txt b {
|
|
color: var(--primary)
|
|
}
|
|
.text-center { text-align: center }
|
|
|
|
/* ══════════════════════════
|
|
텍스트 + 이미지 레이아웃
|
|
══════════════════════════ */
|
|
.sub_content .sub-txt-img {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(30px, 5vw, 80px);
|
|
padding-bottom: clamp(5rem, calc(6.25vw - 0px), 10rem);
|
|
}
|
|
|
|
.sub_content .sub-txt-img .txt-side { flex: 1; min-width: 0 }
|
|
|
|
.sub_content .sub-txt-img .img-side {
|
|
flex-shrink: 0;
|
|
width: clamp(280px, 35vw, 690px);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub_content .sub-txt-img .img-side img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* ══════════════════════════
|
|
작은 타이틀 (dot_tit)
|
|
══════════════════════════ */
|
|
.dot-tit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-bottom: 2rem;
|
|
font-size: clamp(2rem, calc(0.54vw + 1.5rem), 2.4rem); /* 18px~24px */
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
line-height: 1.3;
|
|
word-break: keep-all;
|
|
}
|
|
.dot-tit::before {
|
|
content: '';
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
width: 21px;
|
|
height: 16px;
|
|
background: url('../img/sub/dot_tit.svg') center / contain no-repeat;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sub_content .sub-txt-img { flex-direction: column }
|
|
.sub_content .sub-txt-img .img-side { width: 100% }
|
|
}
|
|
|
|
/* ==========================
|
|
* 서브 사이드 레이아웃
|
|
* ========================== */
|
|
.sub-side-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-bottom: clamp(50px, calc(6.25vw - 0px), 100px);
|
|
}
|
|
.sub-side-wrap:last-of-type { padding-bottom: 0 }
|
|
.sub-side-label {
|
|
width: 270px;
|
|
flex-shrink: 0;
|
|
padding-top: 3px;
|
|
font-size: clamp(2rem, calc(0.27vw + 1.457rem), 2.4rem);
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
word-break: keep-all;
|
|
}
|
|
.sub-side-cont { flex: 1; min-width: 0 }
|
|
.sub-side-cont p {
|
|
font-size: clamp(1.8rem, calc(0.27vw + 1.457rem), 2rem);
|
|
padding-bottom:2rem;
|
|
font-weight: 600;
|
|
}
|
|
.sub-side-cont p em {
|
|
font-weight: 700;
|
|
color:var(--primary);
|
|
font-style: normal;
|
|
}
|
|
.sub-side-cont .sub-box {
|
|
padding: 30px;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
.sub-side-cont .sub-box .space-between {
|
|
justify-content: space-around;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.sub-side-wrap { flex-direction: column; gap: clamp(12px, 1.5vw, 20px) }
|
|
|
|
.sub-side-label {
|
|
width: 100%;
|
|
padding-top: 0;
|
|
padding-bottom: 4px;
|
|
border-bottom: 2px solid var(--primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sub-side-cont { width: 100% }
|
|
}
|
|
|
|
/* ==========================
|
|
* 회사개요 — 마퀴
|
|
* ========================== */
|
|
.company-text { overflow: hidden; width: 100%; max-width: 100% }
|
|
.company-text .marquee { --x: -3450px }
|
|
.company-text .marquee ul {
|
|
display: flex;
|
|
gap: clamp(24px, 3.125vw, 50px);
|
|
animation: Marquee 50s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
.company-text .marquee ul li {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(2.8rem, calc(6.43vw - 0.3rem), 10rem);
|
|
line-height: .8;
|
|
font-weight: 700;
|
|
color: #E7F0FA;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
@keyframes Marquee {
|
|
0% { transform: translateX(0) }
|
|
100% { transform: translateX(var(--x)) }
|
|
}
|
|
|
|
/* ==========================
|
|
* 회사개요 — co-table
|
|
* ========================== */
|
|
.co-row {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--bd-color);
|
|
}
|
|
.co-row--last { border-bottom: 0 }
|
|
.co-cell {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: clamp(18px, 1.875vw, 30px) 0;
|
|
}
|
|
.co-cell--full { flex: unset; width: 100% }
|
|
.co-row .co-cell:not(.co-cell--full) + .co-cell:not(.co-cell--full) {
|
|
padding-left: clamp(24px, 3.125vw, 50px);
|
|
}
|
|
.co-label {
|
|
flex-shrink: 0;
|
|
width: 190px;
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 1.8rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
line-height: 1.6;
|
|
padding-right: 20px;
|
|
}
|
|
.co-val {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 1.8rem);
|
|
font-weight: 400;
|
|
color: var(--cont1);
|
|
line-height: 1.6;
|
|
}
|
|
.co-list {flex: 0.75;}
|
|
.co-reg-list { display: flex; flex-direction: column; gap: 6px }
|
|
.co-reg-list li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.co-reg-txt { color: var(--cont1); font-size: inherit }
|
|
.co-reg-org {
|
|
font-size: clamp(1.2rem, calc(0.18vw + 1.17rem), 1.6rem);
|
|
color: #999;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
}
|
|
.co-val .co-patent { color: var(--primary); font-weight: 600; margin-top: 4px }
|
|
.co-tech-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px }
|
|
.co-tech-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--cont1);
|
|
}
|
|
.co-tech-list li::before {
|
|
content: '';
|
|
flex-shrink: 0;
|
|
width: 12px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: url('../img/sub/check_small.svg') center / cover no-repeat;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.co-row { flex-direction: column }
|
|
.co-row .co-cell:not(.co-cell--full) + .co-cell:not(.co-cell--full) {
|
|
border-left: none;
|
|
border-top: 1px solid var(--bd-color);
|
|
padding-left: 0;
|
|
}
|
|
.co-label { width: 130px }
|
|
.co-tech-list { grid-template-columns: 1fr; gap: 8px }
|
|
.co-reg-list li { gap: 2px;}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.co-block {display: block !important;}
|
|
.co-block .co-val {margin-top:10px;}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.co-cell { gap: 8px }
|
|
.co-label { width: 100%; padding-right: 0; padding-bottom: 4px }
|
|
}
|
|
.co-cert-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 34px;
|
|
}
|
|
.co-cert-list li {
|
|
flex: 1;
|
|
min-width: 160px;
|
|
}
|
|
.co-cert-list li img {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
height: auto;
|
|
display: block;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 8px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.co-cert-list { gap: 16px }
|
|
.co-cert-list li { min-width: calc(50% - 8px); flex: 0 0 calc(50% - 8px) }
|
|
.co-cert-list li img { max-width: 100% }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.co-cert-list li { min-width: 100%; flex: 0 0 100% }
|
|
}
|
|
|
|
/* ==========================
|
|
* 경영이념/비전 — 카드 그리드
|
|
* ========================== */
|
|
.vision-intro {
|
|
text-align: center;
|
|
padding-bottom: clamp(40px, 5vw, 100px);
|
|
}
|
|
.vision-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: clamp(14px, 2vw, 30px);
|
|
}
|
|
.vision-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: clamp(15px, 2vw, 30px);
|
|
padding: clamp(30px, 4vw, 60px) clamp(20px, 2vw, 30px) clamp(24px, 3vw, 40px);
|
|
background: linear-gradient(160deg, #A7DAFF 0%, #F3F9FF 100%);
|
|
border-radius: clamp(16px, 1.5vw, 24px);
|
|
min-height: clamp(100px, 25vw, 400px);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.vision-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 16px 40px rgba(19, 152, 248, 0.18);
|
|
}
|
|
.vision-card-icon {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
.vision-card-icon img {
|
|
width: clamp(100px, 12vw, 180px);
|
|
height: auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 8px 20px rgba(19, 152, 248, 0.25));
|
|
}
|
|
.vision-card-label {
|
|
font-size: 2.4rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.vision-intro h2 br { display: none }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.vision-cards { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto }
|
|
.vision-card {
|
|
min-height: 130px;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
padding: clamp(20px, 4vw, 30px);
|
|
gap: 20px;
|
|
}
|
|
.vision-card-icon { flex: 0 0 auto; width: 80px }
|
|
.vision-card-icon img { width: 80px }
|
|
.vision-card-label { text-align: left }
|
|
}
|
|
|
|
/* ==========================
|
|
* 경영이념/비전 — 스크롤 슬라이드
|
|
* ========================== */
|
|
.vision-scroll {
|
|
position: relative;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
.vs-slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.vs-slide[data-idx="1"] { z-index: 1; opacity: 1 }
|
|
.vs-slide[data-idx="2"] { z-index: -1; opacity: 0; transform: translateY(30%) scale(1.2) }
|
|
.vs-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
will-change: transform, opacity;
|
|
}
|
|
.about-bg1 { background-image: url('../img/sub/bg_vision01.jpg') }
|
|
.about-bg2 { background-image: url('../img/sub/bg_vision02.jpg') }
|
|
.vs-slide[data-idx="2"] .vs-bg { opacity: 0; transform: scale(1.5) }
|
|
.vs-slide::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
.vs-slide-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
gap: clamp(30px, 5vw, 80px);
|
|
width: 100%;
|
|
max-width: var(--mainsize, 1400px);
|
|
margin: 0 auto;
|
|
padding: 0 clamp(20px, 3vw, 60px);
|
|
}
|
|
.vs-title-section { flex: 1 }
|
|
.vs-label {
|
|
display: block;
|
|
font-family: var(--e-font, "Outfit", sans-serif);
|
|
font-size: clamp(1.1rem, calc(0.18vw + 1.07rem), 1.6rem);
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
color: var(--primary);
|
|
text-transform: uppercase;
|
|
margin-bottom: clamp(12px, 1.25vw, 20px);
|
|
}
|
|
.vs-label.white { color: #fff !important }
|
|
.vs-title {
|
|
font-size: clamp(2.8rem, calc(2.04vw + 1.233rem), 4.5rem);
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
letter-spacing: -0.02em;
|
|
padding-bottom: 3rem;
|
|
color: #fff;
|
|
word-break: keep-all;
|
|
white-space: pre-line;
|
|
}
|
|
.vs-desc-section { flex: 1 }
|
|
.vs-desc {
|
|
font-size: clamp(1.5rem, calc(0.45vw + 1.28rem), 2rem);
|
|
font-weight: 400;
|
|
line-height: 1.75;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
word-break: keep-all;
|
|
}
|
|
.vs-pagination {
|
|
position: absolute;
|
|
right: 180px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.vs-bullet {
|
|
width: 7px;
|
|
height: 7px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 100px;
|
|
will-change: height;
|
|
}
|
|
.vs-bullet[data-idx="1"] { height: 30px; background: #fff }
|
|
|
|
@media (max-width: 1400px) {
|
|
.vs-pagination { right: 10px }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.vs-slide-content { flex-direction: column; text-align: center; gap: 20px }
|
|
.vs-desc br { display: none }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.vs-pagination { right: 12px }
|
|
}
|
|
|
|
/* ==========================
|
|
* 회사 연혁
|
|
* ========================== */
|
|
|
|
.history-intro { padding: 0 0 clamp(20px, 7.5vw, 40px) }
|
|
.history-intro span {
|
|
display: block;
|
|
text-align: center;
|
|
font-family: var(--e-font);
|
|
font-size: 1.6rem;
|
|
}
|
|
.history-intro .hero-scroll-arrow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
animation: arrowBounce 1.8s ease-in-out infinite;
|
|
}
|
|
.history-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
border-top: 1px solid var(--bd-color);
|
|
padding-bottom: clamp(80px, calc(7.5vw + 0px), 200px);
|
|
background: url('../img/sub/bg_history.png') left bottom / contain no-repeat;
|
|
}
|
|
.history-inner {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 20px 0 40px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.year-col {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 38%;
|
|
height: 100vh;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-right: 60px;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
align-self: flex-start;
|
|
}
|
|
.year-main { display: flex; align-items: baseline }
|
|
.year-static {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(3rem, 11vw, 10rem);
|
|
line-height: 1;
|
|
color: var(--primary);
|
|
letter-spacing: -.5pt;
|
|
user-select: none;
|
|
font-weight: 700;
|
|
}
|
|
.odo-wrap {
|
|
display: inline-flex;
|
|
overflow: visible;
|
|
font-family: var(--e-font);
|
|
font-size: clamp(3rem, 11vw, 10rem);
|
|
line-height: 1;
|
|
color: var(--navy);
|
|
letter-spacing: -3pt;
|
|
user-select: none;
|
|
font-weight: 700;
|
|
}
|
|
.odo-col { overflow: hidden }
|
|
.odo-strip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
will-change: transform;
|
|
transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.odo-strip span { display: block; line-height: 1; text-align: center }
|
|
.year-label {
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
font-family: var(--e-font);
|
|
text-transform: uppercase;
|
|
color: var(--dark);
|
|
}
|
|
.scroll-hint {
|
|
position: absolute;
|
|
bottom: 48px;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
}
|
|
.scroll-hint-text {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: rgba(3, 43, 105, 0.25);
|
|
}
|
|
.scroll-arrow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3px;
|
|
animation: arrowBounce 1.8s ease-in-out infinite;
|
|
}
|
|
.scroll-arrow svg:nth-child(2) { opacity: 0.35; margin-top: -7px }
|
|
|
|
@keyframes arrowBounce {
|
|
0%, 100% { transform: translateY(0) }
|
|
50% { transform: translateY(6px) }
|
|
}
|
|
/* 우측: 리스트 컬럼 */
|
|
.list-col {
|
|
flex: 1;
|
|
padding-top: 60px;
|
|
padding-bottom: 20vh;
|
|
border-left: 2px solid var(--bd-color);
|
|
padding-left: 60px;
|
|
}
|
|
.year-section {
|
|
padding-bottom: 60px;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
}
|
|
.year-section:last-child { padding-bottom: 0 }
|
|
.year-section.is-visible { opacity: 1; transform: translateY(0) }
|
|
.year-section-head {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(2rem, 5.5vw, 4rem);
|
|
color: #DEE6EE;
|
|
line-height: 1;
|
|
letter-spacing: -.5pt;
|
|
padding: 20px 0;
|
|
margin-bottom: 0;
|
|
font-weight: 700;
|
|
}
|
|
.timeline-items { display: flex; flex-direction: column; gap: 0 }
|
|
.timeline-item {
|
|
display: flex;
|
|
align-items: top;
|
|
margin-bottom: 12px;
|
|
transition: background 0.2s;
|
|
}
|
|
.item-month {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(1.6rem, 1.5vw, 2rem);
|
|
line-height: 1.5;
|
|
color: var(--cont1);
|
|
font-weight: 700;
|
|
min-width: 70px;
|
|
width: 70px;
|
|
flex-shrink: 0;
|
|
letter-spacing: 0.02em;
|
|
display: flex;
|
|
align-items: top;
|
|
}
|
|
.item-text {
|
|
flex: 1;
|
|
font-size: clamp(1.6rem, 1.5vw, 2rem);
|
|
line-height: 1.5;
|
|
color: var(--cont2);
|
|
font-weight: 300;
|
|
word-break: keep-all;
|
|
}
|
|
.item-text a { color: var(--primary) }
|
|
|
|
@media (max-width: 1024px) {
|
|
.year-col { width: 30%; padding-right: 40px }
|
|
.list-col { padding-left: 40px }
|
|
.timeline-item { margin-bottom: 5px }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.history-inner { flex-direction: column; padding: 0 20px }
|
|
.year-col { display: none }
|
|
.list-col { border-left: none; padding-left: 0; padding-bottom: 10vh }
|
|
.year-section { padding-bottom: 40px }
|
|
.year-section-head { font-size: 4rem; padding: 15px 0 }
|
|
.item-month { min-width: 50px; width: 50px }
|
|
}
|
|
|
|
/* ==========================
|
|
* 조직도
|
|
* ========================== */
|
|
.org-tree {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: 1220px;
|
|
margin: 0 auto;
|
|
padding: clamp(5rem, calc(6.01vw + 3.85px), 10rem) 0 0;
|
|
}
|
|
.node {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
padding: 15px 20px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: box-shadow .2s, transform .2s;
|
|
}
|
|
.node:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(19, 152, 248, .18) }
|
|
.node--ceo {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: clamp(2rem, calc(0.27vw + 1.457rem), 2.4rem);
|
|
padding: 50px 70px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(19, 152, 248, .28);
|
|
}
|
|
.node--ceo::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 13px;
|
|
height: 13px;
|
|
background-color: #fff;
|
|
border: 3px solid var(--primary);
|
|
bottom: -5px;
|
|
border-radius: 10px;
|
|
}
|
|
.node--support {
|
|
background: var(--navy);
|
|
color: #fff;
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 2rem);
|
|
width: 240px;
|
|
height: 60px;
|
|
padding: 15px 24px;
|
|
}
|
|
.node--dept {
|
|
background: var(--white);
|
|
color: var(--navy);
|
|
border: 2px solid var(--navy);
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 2rem);
|
|
width: 240px;
|
|
padding: 15px 0;
|
|
}
|
|
.node--team {
|
|
background: var(--bg);
|
|
color: var(--navy);
|
|
border: 1px solid var(--bd-color);
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 2rem);
|
|
font-weight: 500;
|
|
padding: 12px 14px;
|
|
border-radius: 8px;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
/* CEO 줄기 */
|
|
.ceo-stem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.ceo-stem__top { width: 1px; height: 20px; background: var(--bd-color) }
|
|
.ceo-stem__bot { width: 1px; height: 50px; background: var(--bd-color) }
|
|
/* 경영지원 그룹 */
|
|
.support-group {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: calc(50% + 1px);
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.support-group::before {
|
|
content: '';
|
|
display: block;
|
|
width: clamp(60px, 8vw, 120px);
|
|
height: 1px;
|
|
background: var(--bd-color);
|
|
flex-shrink: 0;
|
|
}
|
|
.support-group::after {
|
|
content: '';
|
|
display: block;
|
|
height: 50px;
|
|
left: 0;
|
|
width: 1px;
|
|
background: var(--bd-color);
|
|
flex-shrink: 0;
|
|
}
|
|
/* 부서 컬럼 */
|
|
.depts-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.dept-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.dept-col::before {
|
|
content: '';
|
|
display: block;
|
|
height: 50px;
|
|
flex-shrink: 0;
|
|
}
|
|
.dept-col--center::before { width: 1px; background: var(--bd-color) }
|
|
.dept-vdown { width: 1px; height: 50px; background: var(--bd-color); flex-shrink: 0 }
|
|
/* 팀 컬럼 */
|
|
.teams-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
.teams-wrap::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(100% / 6);
|
|
right: calc(100% / 6);
|
|
height: 1px;
|
|
background: var(--bd-color);
|
|
z-index: 0;
|
|
}
|
|
.team-col { flex: 1; display: flex; flex-direction: column; align-items: center }
|
|
.team-col::before {
|
|
content: '';
|
|
display: block;
|
|
width: 1px;
|
|
height: 50px;
|
|
background: var(--bd-color);
|
|
flex-shrink: 0;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.dept-vdown { height: 20px }
|
|
.depts-wrap,
|
|
.teams-wrap { gap: 3px }
|
|
.node--dept,
|
|
.node--team,
|
|
.node--support { width: 100% }
|
|
.team-col::before { height: 20px }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.ceo-stem { flex-direction: column; align-items: center; width: auto }
|
|
.ceo-stem__top,
|
|
.ceo-stem__bot { width: 1px; height: 30px }
|
|
.support-group::before { width: 28px }
|
|
.depts-wrap { flex-direction: column; align-items: center; width: 100% }
|
|
.dept-col--left::before { width: 1px; height: 30px; background: var(--bd-color) }
|
|
.dept-col { width: 100%; max-width: 420px }
|
|
.dept-col::before { height: 24px }
|
|
.team-col .node--team { width: 100%; text-align: center }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.node--ceo { font-size: 1.35rem; padding: 12px 26px }
|
|
.node--support { font-size: 1.15rem; padding: 10px 14px }
|
|
.node--team { font-size: 1.05rem; padding: 9px 4px }
|
|
.support-group::before { width: 18px }
|
|
}
|
|
/* ==========================
|
|
* 찾아오는 길
|
|
* ========================== */
|
|
/* ── 본사주소 블록 ── */
|
|
.loc-address {
|
|
padding-top: clamp(50px, 6.25vw, 100px);
|
|
}
|
|
.loc-address-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding-top: clamp(20px, 2.5vw, 20px);
|
|
padding-bottom: clamp(20px, 2.5vw, 36px);
|
|
flex-wrap: wrap;
|
|
}
|
|
.loc-address-info dl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.addr-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: clamp(16px, 2.5vw, 40px);
|
|
}
|
|
.addr-row dt {
|
|
flex-shrink: 0;
|
|
width: clamp(80px, 7vw, 100px);
|
|
font-size: clamp(1.6rem, calc(0.18vw + 1.271rem), 2rem);
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.addr-row dd {
|
|
font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 1.8rem); /* 15px~18px */
|
|
font-weight: 400;
|
|
color: var(--cont2);
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
.loc-map-wrap {
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--bd-color);
|
|
line-height: 0; /* iframe 하단 여백 제거 */
|
|
height: clamp(260px, calc(15.63vw + 160px), 500px);
|
|
}
|
|
|
|
#kakao-map {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#kakao-map {
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
/* ── 하단 그리드: 교통 + 연락처 ── */
|
|
.loc-bottom-grid {
|
|
padding-top: clamp(25px, 6.25vw, 50px);
|
|
padding-bottom: clamp(50px, 6.25vw, 100px);
|
|
display: grid;
|
|
grid-template-columns: 1fr 360px;
|
|
gap: clamp(20px, 3.125vw, 50px);
|
|
align-items: flex-start;
|
|
}
|
|
/* ── 대중교통 안내 ── */
|
|
.loc-transport {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(14px, 1.875vw, 24px);
|
|
}
|
|
/* 교통 카드 */
|
|
.transport-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: clamp(20px, 2.5vw, 30px);
|
|
}
|
|
@media (hover: hover) {
|
|
.transport-card:hover { border-color: var(--primary);}
|
|
}
|
|
/* 아이콘 영역 */
|
|
.transport-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
width: clamp(60px, 5.625vw, 110px);
|
|
height: clamp(60px, 5.625vw, 110px);
|
|
background: var(--bg);
|
|
border-radius: 14px;
|
|
}
|
|
.transport-icon .material-symbols-outlined {
|
|
font-size: clamp(2.2rem, 1.875vw, 3.2rem);
|
|
color: var(--navy);
|
|
}
|
|
.transport-label {
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 1.8rem);
|
|
font-weight: 700;
|
|
color: var(--navy);
|
|
}
|
|
/* 노선 리스트 */
|
|
.transport-routes {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(10px, 1.25vw, 16px);
|
|
}
|
|
.transport-routes li { display: block; }
|
|
.route-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
/* 지하철 노선 뱃지 */
|
|
.subway-badge {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 34px;
|
|
padding: 5px 15px;
|
|
border-radius: 30px;
|
|
font-size: clamp(1.4rem, 1.875vw, 1.6rem);
|
|
white-space: nowrap;
|
|
margin-top: 1px;
|
|
}
|
|
.subway-badge.line1 { background: #263C96; color: #fff; }
|
|
.subway-badge.line7 { background: #697215; color: #fff; }
|
|
/* 노선 설명 */
|
|
.route-desc {
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.257rem), 1.7rem); /* 14px~17px */
|
|
color: var(--cont1);
|
|
line-height: 1.6;
|
|
word-break: keep-all;
|
|
}
|
|
.route-highlight {
|
|
color: #263C96;
|
|
}
|
|
.route-highlight2 {
|
|
color: #697215;
|
|
}
|
|
/* ── 대표전화 ── */
|
|
.loc-contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.contact-card {
|
|
padding: clamp(15px, 3.125vw, 20px) 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(18px, 1.875vw, 26px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.contact-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -60px;
|
|
right: -60px;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
/* 전화번호 */
|
|
.contact-tel-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.contact-tel-wrap span {
|
|
font-size: clamp(2.6rem, 1.875vw, 3.6rem);
|
|
color: var(--dark);
|
|
}
|
|
.contact-tel-num {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(2.8rem, calc(2.32vw + 1.7rem), 4.4rem);
|
|
font-weight: 800;
|
|
color: var(--dark);
|
|
line-height: 1;
|
|
transition: color 0.2s;
|
|
}
|
|
@media (hover: hover) {
|
|
.contact-tel-num:hover { color: var(--primary); }
|
|
}
|
|
/* 팩스 */
|
|
.contact-fax {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 2rem);
|
|
color:var(--cont1);
|
|
padding-left:clamp(4rem, 1.875vw, 6rem);
|
|
}
|
|
/* 운영시간 */
|
|
.contact-hours {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: clamp(16px, 1.875vw, 22px);
|
|
background: rgba(255, 255, 255, 0.07);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.hours-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.hours-label {
|
|
font-size: clamp(1.3rem, calc(0.18vw + 1.271rem), 1.5rem); /* 13px~15px */
|
|
font-weight: 700;
|
|
color: rgba(255,255,255,0.5);
|
|
width: 35px;
|
|
flex-shrink: 0;
|
|
}
|
|
.hours-val {
|
|
font-size: clamp(1.3rem, calc(0.18vw + 1.271rem), 1.5rem); /* 13px~15px */
|
|
font-weight: 400;
|
|
color: rgba(255,255,255,0.8);
|
|
text-align: right;
|
|
}
|
|
.hours-row.hours-off .hours-val { color: rgba(255,255,255,0.4); }
|
|
/* 문의 버튼 */
|
|
.btn-inquiry {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: clamp(48px, 3.25vw, 52px);
|
|
border-radius: 100px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 1.8rem); /* 15px~18px */
|
|
font-weight: 700;
|
|
transition: background-color 0.2s, transform 0.2s;
|
|
}
|
|
.btn-inquiry .material-icons-round { font-size: 1.8rem; /* 18px */ transition: transform 0.2s; }
|
|
@media (hover: hover) {
|
|
.btn-inquiry:hover { background-color: #0d7fd4; transform: translateY(-2px); }
|
|
.btn-inquiry:hover .material-icons-round { transform: translateX(3px); }
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1200px) {
|
|
.loc-bottom-grid {
|
|
grid-template-columns: 1fr 300px;
|
|
}
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.loc-bottom-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.loc-contact {
|
|
max-width: 100%;
|
|
}
|
|
.contact-card {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
.contact-tel-wrap,
|
|
.contact-fax { flex: 1; min-width: 200px; }
|
|
.contact-hours { flex: 1 0 100%; }
|
|
.btn-inquiry { flex: 1 0 100%; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.transport-card {
|
|
display: block;
|
|
padding-bottom:3rem
|
|
}
|
|
.transport-icon {
|
|
padding:10px 0;
|
|
width:100%;
|
|
margin-bottom:10px;
|
|
}
|
|
.loc-map-wrap {
|
|
height: clamp(220px, 52vw, 340px);
|
|
border-radius: 12px;
|
|
}
|
|
.subway-badge {padding:4px 10px;}
|
|
.contact-tel-wrap, .contact-fax { flex: none; width: 100%; }
|
|
.addr-row { gap: 12px; }
|
|
.addr-row dt { width: 80px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.loc-map-wrap { height: 240px; border-radius: 10px; }
|
|
.route-row { flex-wrap: wrap; }
|
|
}
|
|
|
|
/* ==========================
|
|
* 사업소개
|
|
* ========================== */
|
|
.diagram-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.diagram-grid img {
|
|
width:100%;
|
|
max-width: var(--diagram-max, 940px);
|
|
margin:0 auto;
|
|
}
|
|
|
|
.diagram-btns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
max-width:990px;
|
|
margin-top: 7rem;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
.diagram-btns .d-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
background: var(--bg);
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
|
color: var(--navy)
|
|
}
|
|
.diagram-btns .d-btn:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 4px 20px rgba(19,152,248,0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
.diagram-btns .d-btn__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.diagram-btns .d-btn__logo {
|
|
height: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.diagram-btns .d-btn__logo img { height: 100%; }
|
|
.diagram-btns .d-btn__txt {
|
|
font-size: clamp(1.6rem, calc(0.63vw + 1.1rem), 2rem);
|
|
color: var(--navy);
|
|
}
|
|
.diagram-btns .d-btn__arrow {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--bg);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: background 0.2s;
|
|
}
|
|
.diagram-btns .d-btn:hover .d-btn__arrow { background: var(--primary); }
|
|
.diagram-btns .d-btn__arrow svg { width: 16px; height: 16px; stroke: var(--primary); transition: stroke 0.2s; }
|
|
.diagram-btns .d-btn:hover .d-btn__arrow svg { stroke: #fff; }
|
|
|
|
@media (max-width: 1200px) {
|
|
.diagram-btns {
|
|
gap:20px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
|
|
.diagram-btns { grid-template-columns: 1fr; gap: 8px; }
|
|
.diagram-btns .d-btn { padding: 16px 18px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
}
|
|
|
|
/* ==========================
|
|
* 시스템 구성 공통
|
|
* ========================== */
|
|
|
|
/* 복수 행 쌓기 */
|
|
.ib-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--row-gap);
|
|
}
|
|
/* 열 그리드 */
|
|
.ib-grid--col1 { display: grid; grid-template-columns: 1fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--col2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--col3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--col4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--col-gap); align-items: stretch; }
|
|
|
|
.ib-grid--col1,
|
|
.ib-grid--col2,
|
|
.ib-grid--col3,
|
|
.ib-grid--col4 {
|
|
margin-bottom:2rem;
|
|
}
|
|
/* 비율 그리드 */
|
|
.ib-grid--r2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--r1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--r3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--r1-3 { display: grid; grid-template-columns: 1fr 3fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--r1-1-2 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--r2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--col-gap); align-items: stretch; }
|
|
.ib-grid--r1-2-1 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--col-gap); align-items: stretch; }
|
|
|
|
.ib-grid--r2-1,
|
|
.ib-grid--r2-2,
|
|
.ib-grid--r3-1,
|
|
.ib-grid--r1-3,
|
|
.ib-grid--r1-1-2,
|
|
.ib-grid--r2-1-1,
|
|
.ib-grid--r1-2-1 {
|
|
margin-bottom:2rem;
|
|
}
|
|
/* ════════════════════════════════════════
|
|
컬럼 래퍼 .ib-col
|
|
─ 같은 열의 카드들을 세로로 쌓는 flex 컨테이너
|
|
════════════════════════════════════════ */
|
|
.ib-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--card-gap);
|
|
}
|
|
/* ════════════════════════════════════════
|
|
독립 카드 .ib-card
|
|
─ 자체 border-radius, 자체 헤더
|
|
─ flex-grow 로 높이 비율 제어
|
|
════════════════════════════════════════ */
|
|
.ib-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--bd-color);
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
/* grow 헬퍼 */
|
|
.ib-card--grow1 { flex-grow: 1; }
|
|
.ib-card--grow2 { flex-grow: 2; }
|
|
.ib-card--grow3 { flex-grow: 3; }
|
|
.ib-card--grow4 { flex-grow: 4; }
|
|
/* 카드 헤더 */
|
|
.ib-card__hd {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
font-size: clamp(1.8rem, calc(0.63vw + 1.1rem), 2rem);
|
|
font-weight: 700;
|
|
padding: 13px 16px;
|
|
height:5rem;
|
|
flex-shrink: 0;
|
|
text-align: center
|
|
}
|
|
.ib-card__hd--navy { background: var(--navy); }
|
|
.ib-card__hd--dark { background: var(--dark); }
|
|
|
|
/* 카드 바디 */
|
|
.ib-card__bd {
|
|
flex: 1;
|
|
background: #fff;
|
|
padding: var(--body-pad);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
min-height: 0;
|
|
}
|
|
/* 카드 바디 내부 2열 */
|
|
.ib-card__bd--col2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* ════════════════════════════════════════
|
|
서브카드 .ib-sub
|
|
─ 카드 바디 안의 배경 박스
|
|
════════════════════════════════════════ */
|
|
.ib-sub {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.ib-sub--grow1 { flex-grow: 1; }
|
|
.ib-sub--grow2 { flex-grow: 2; }
|
|
.ib-sub--grow3 { flex-grow: 3; }
|
|
.ib-sub__title {
|
|
padding: 12px 30px;
|
|
font-size: clamp(1.6rem, calc(0.63vw + 1.1rem), 1.8rem);
|
|
color: var(--navy);
|
|
background: var(--bg);
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--bd-color);
|
|
line-height: 1.4;
|
|
}
|
|
.ib-sub__content {
|
|
flex: 1;
|
|
padding: 10px 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* ════════════════════════════════════════
|
|
리스트
|
|
════════════════════════════════════════ */
|
|
.ib-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.ib-list li {
|
|
/*display: flex;*/
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
font-size: clamp(1.4rem, calc(0.63vw + 1.1rem), 1.6rem);
|
|
color: var(--cont1);
|
|
line-height: 1.5;
|
|
padding-left:1.5rem;
|
|
}
|
|
.ib-list li::before {
|
|
position: absolute;
|
|
margin-top:9px;
|
|
margin-left:-1.5rem;
|
|
content: '';
|
|
width: 3px; height: 3px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
|
|
}
|
|
|
|
/* 흰 박스 아이템 리스트 */
|
|
.ib-plain {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.ib-plain li {
|
|
padding: 12px 30px;
|
|
font-size: clamp(1.6rem, calc(0.63vw + 1.1rem), 1.8rem);
|
|
color: var(--navy);
|
|
background: var(--bg);
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--bd-color);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ════════════════════════════════════════
|
|
반응형
|
|
════════════════════════════════════════ */
|
|
@media (max-width: 1024px) {
|
|
.ib-grid--col4,
|
|
.ib-grid--r1-1-2,
|
|
.ib-grid--r2-1-1,
|
|
.ib-grid--r1-2-1 { grid-template-columns: 1fr 1fr; }
|
|
|
|
.ib-grid--r2-1-1,
|
|
.ib-grid--r1-2-1 { grid-template-columns: 1fr; }
|
|
|
|
}
|
|
@media (max-width: 768px) {
|
|
.ib-grid--col3,
|
|
.ib-grid--r2-1,
|
|
.ib-grid--r1-2,
|
|
.ib-grid--r3-1,
|
|
.ib-grid--r1-3,
|
|
.ib-grid--r2-1,
|
|
.ib-grid--r2-2,
|
|
.ib-grid--r3-1,
|
|
.ib-grid--r1-3,
|
|
.ib-grid--r1-1-2,
|
|
.ib-grid--r2-1-1,
|
|
.ib-grid--r1-2-1 { grid-template-columns: 1fr; }
|
|
.ib-plain li, .ib-sub__title {padding:10px 20px;}
|
|
.ib-sub__content {padding:10px 20px}
|
|
|
|
}
|
|
@media (max-width: 540px) {
|
|
.ib-grid--col2,
|
|
.ib-grid--col4 { grid-template-columns: 1fr; }
|
|
.sc-section__body { padding: 16px; }
|
|
.ib-card__bd--col2 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ==========================
|
|
* 시스템 구성 공통
|
|
* ========================== */
|
|
.mo-only { display: none; }
|
|
|
|
@media (max-width: 768px) {
|
|
.pc-only { display: none; }
|
|
.mo-only { display: block; }
|
|
}
|
|
.sub-tab__list {
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--bg);
|
|
border-radius: 100px;
|
|
padding: 6px;
|
|
gap: 4px;
|
|
list-style: none;
|
|
max-width: var(--mainsize);
|
|
margin:0 auto;
|
|
}
|
|
.sub-tab__item {
|
|
flex: 1;
|
|
}
|
|
.sub-tab__btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: clamp(4rem, 4vw, 5rem);
|
|
border: none;
|
|
border-radius: 100px;
|
|
background: transparent;
|
|
font-family: var(--k-font);
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.2rem), 2rem);
|
|
font-weight: 600;
|
|
color: var(--cont1);
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
white-space: nowrap;
|
|
padding: 0 clamp(1rem, 2vw, 1rem);
|
|
}
|
|
/* 활성화 */
|
|
.sub-tab__btn[aria-selected="true"],
|
|
.sub-tab__btn.is-active {
|
|
background: var(--navy);
|
|
color: #fff;
|
|
}
|
|
/* 호버 */
|
|
@media (hover: hover) {
|
|
.sub-tab__btn:not([aria-selected="true"]):not(.is-active):hover {
|
|
background: rgba(3, 43, 105, 0.07);
|
|
color: var(--navy);
|
|
}
|
|
}
|
|
|
|
/* ══════════════════════════
|
|
탭 패널 (이미지 + 텍스트)
|
|
══════════════════════════ */
|
|
.sub-tab__panels {
|
|
margin-top: 5rem;
|
|
}
|
|
.sub-tab__panel {
|
|
display: none;
|
|
}
|
|
.sub-tab__panel.is-active {
|
|
display: block;
|
|
animation: tabFadeIn 0.35s ease both;
|
|
}
|
|
|
|
@keyframes tabFadeIn {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.sub-tab__media {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(2rem, 5vw, 4rem);
|
|
}
|
|
|
|
.sub-tab__img {
|
|
flex-shrink: 0;
|
|
width: 550px;
|
|
height: 380px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub-tab__img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.sub-tab__txt {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ══════════════════════════
|
|
반응형
|
|
══════════════════════════ */
|
|
@media (max-width: 1200px) {
|
|
.sub-tab__txt .sub-h2 {
|
|
white-space:inherit;
|
|
}
|
|
.sub-tab__img {
|
|
width: clamp(300px, 42vw, 550px);
|
|
height: clamp(210px, 29vw, 380px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.sub-tab__list {
|
|
border-radius: 14px;
|
|
padding: 5px;
|
|
}
|
|
.sub-tab__btn {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sub-tab__media {
|
|
flex-direction: column;
|
|
}
|
|
.sub-tab__img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.sub-tab__list {
|
|
flex-wrap: wrap;
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
gap: 3px;
|
|
}
|
|
.sub-tab__item {
|
|
flex: 1 0 calc(50% - 2px);
|
|
}
|
|
.sub-tab__btn {
|
|
border-radius: 8px;
|
|
font-size: 1.4rem;
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
/* ─────────────────────────────────────────
|
|
테이블 스크롤
|
|
───────────────────────────────────────── */
|
|
.tbl-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.tbl-scroll::-webkit-scrollbar { height: 5px }
|
|
.tbl-scroll::-webkit-scrollbar-track { background: transparent }
|
|
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--bd-color); border-radius: 10px }
|
|
/* ═══════════════════════════════════════════
|
|
TABLE STYLE 1
|
|
═══════════════════════════════════════════ */
|
|
.tbl-gantt {
|
|
width: 100%;
|
|
min-width: 860px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border:1px solid var(--bd-color);
|
|
overflow: hidden;
|
|
border-top: 2px solid var(--navy);
|
|
}
|
|
.tbl-gantt thead tr th {
|
|
font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.6rem);
|
|
font-weight: 600;
|
|
padding: 14px 8px;
|
|
text-align: center;
|
|
border-right: 1px solid var(--bd-color);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
white-space: nowrap;
|
|
}
|
|
.tbl-gantt thead tr th:first-child {
|
|
text-align: center;
|
|
width: 230px;
|
|
color: var(--cont1);
|
|
border-right: 1px solid var(--bd-color);
|
|
}
|
|
.tbl-gantt tbody tr td {
|
|
border-right: 1px solid var(--bd-color);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
padding: 0;
|
|
height: 52px;
|
|
text-align: center;
|
|
font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.6rem);
|
|
}
|
|
.tbl-gantt tbody tr td.td-label {
|
|
color: var(--cont1);
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
padding: 14px 8px;
|
|
text-align: center;
|
|
border-right: 1px solid var(--bd-color);
|
|
white-space: nowrap;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
.tbl-gantt tbody tr td.td-dots {
|
|
color: rgba(255,255,255,0.25);
|
|
font-size: 1.2rem;
|
|
border-right: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.tbl-gantt tbody tr td.active {
|
|
background-color: var(--bg);
|
|
position: relative;
|
|
}
|
|
.tbl-gantt tbody tr td.active + td.active {
|
|
border-left: none;
|
|
}
|
|
.tbl-gantt thead tr th:last-child, .tbl-gantt tbody tr td:last-child {
|
|
border-right: none;
|
|
}
|
|
.tbl-gantt tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.tbl-gantt tbody tr:hover td { background-color: #f9f9f9; }
|
|
.tbl-gantt tbody tr:hover td.active { background-color: #e8f4ff }
|
|
.tbl-gantt tbody tr:hover td.td-label,
|
|
.tbl-gantt tbody tr:hover td.td-dots { background-color: #f9f9f9; }
|
|
|
|
/* ═══════════════════════════════════════════
|
|
TABLE STYLE 2
|
|
═══════════════════════════════════════════ */
|
|
.tbl-spec {
|
|
width: 100%;
|
|
min-width: 700px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
overflow: hidden;
|
|
border: 1px solid var(--bd-color);
|
|
border-top: 2px solid var(--navy);
|
|
}
|
|
.tbl-spec thead tr th {
|
|
color: var(--dark);
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
padding: 16px 20px;
|
|
text-align: center;
|
|
border-right: 1px solid var(--bd-color);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
white-space: nowrap;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.tbl-spec thead tr th:last-child { border-right: none }
|
|
|
|
.tbl-spec tbody tr td {
|
|
background-color: #fff;
|
|
border-right: 1px solid var(--bd-color);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
padding: 18px 22px;
|
|
font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.6rem);
|
|
color: var(--dark);
|
|
vertical-align: middle;
|
|
line-height: 1.7;
|
|
}
|
|
.tbl-spec tbody tr td:last-child { border-right: none }
|
|
.tbl-spec tbody tr:last-child td { border-bottom: none }
|
|
.tbl-spec tbody tr td.td-item {
|
|
background-color: #f8fafd;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
border-right: 1px solid var(--bd-color);
|
|
white-space: nowrap;
|
|
}
|
|
.tbl-spec tbody tr td.td-spec {
|
|
color: #555;
|
|
font-weight: 400;
|
|
line-height: 1.8;
|
|
}
|
|
.tbl-spec tbody tr td.td-qty,
|
|
.tbl-spec tbody tr td.td-note {
|
|
text-align: center;
|
|
}
|
|
.tbl-spec tbody tr:hover td { background-color: #f0f6ff }
|
|
.tbl-spec tbody tr:hover td.td-item { background-color: #e8f2fb }
|
|
|
|
@media (max-width: 768px) {
|
|
.tbl-spec tbody tr th, .tbl-spec tbody tr td {
|
|
padding:10px 15px;
|
|
}
|
|
}
|
|
/* ═══════════════════════════════════════════
|
|
Box List
|
|
═══════════════════════════════════════════ */
|
|
|
|
.split-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.split-box {
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
}
|
|
.split-box__title {
|
|
padding: 40px 0 0 40px;
|
|
display: flex;
|
|
align-items: top;
|
|
font-size: clamp(2.0rem, calc(0.27vw + 1.35rem), 2.4rem);
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
word-break: keep-all; line-height: 1.4;
|
|
}
|
|
.split-box__divider {
|
|
width: 1px;
|
|
background: var(--bd-color);
|
|
flex-shrink: 0
|
|
}
|
|
.split-box__content {
|
|
flex: 1;
|
|
padding: 20px 40px 40px 40px;
|
|
display: flex;
|
|
align-items: top;
|
|
}
|
|
.split-box__ul {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.split-box__ul li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 1.8rem);
|
|
color: var(--cont1);
|
|
line-height: 1.5;
|
|
}
|
|
.split-box__ul li::before {
|
|
content: '';
|
|
flex-shrink: 0;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: var(--primary);
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.split-box { flex-direction: column; }
|
|
.split-box__title { flex:none; padding: 30px 30px 0;}
|
|
.split-box__content { padding: 20px 30px 30px 30px; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.split-list { grid-template-columns: 1fr; }
|
|
.split-box__title {padding: 20px 20px 0;}
|
|
.split-box__divider { display: none; }
|
|
.split-box__content { padding: 20px; }
|
|
}
|
|
|
|
.premay-img__info {
|
|
background-color: #FFFBF3;
|
|
margin-top:50px;
|
|
}
|
|
.premay-img__info ul {
|
|
max-width:990px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding:20px;
|
|
margin:0 auto;
|
|
}
|
|
.premay-img__info ul li {
|
|
margin-right:20px;
|
|
font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.8rem);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.premay-img__info ul li img {
|
|
width:30px;
|
|
}
|
|
}
|
|
|
|
/* ===== SECTION: 인재상 ===== */
|
|
.sec-talent {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0 20px clamp(10rem, calc(8vw + 10px), 15rem) 0;
|
|
overflow: hidden;
|
|
background: url('../img/sub/bg-talent.png') center center / cover no-repeat;
|
|
}
|
|
|
|
/* 내부 wrap */
|
|
.sec-talent .talent-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ── 상단 장식 선 (스크롤다운 효과) ── */
|
|
.talent-scroll-line {
|
|
position: relative;
|
|
width: 1px;
|
|
height: 110px;
|
|
background: rgba(255,255,255,0.15);
|
|
margin-bottom: clamp(30px, 4vw, 56px);
|
|
overflow: hidden;
|
|
}
|
|
.talent-scroll-line::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%;
|
|
height: 40px;
|
|
background: linear-gradient(to bottom, transparent, #fff);
|
|
animation: scrollDown 1.8s ease-in-out infinite;
|
|
}
|
|
@keyframes scrollDown {
|
|
0% { transform: translateY(-40px); opacity: 0 }
|
|
20% { opacity: 1 }
|
|
80% { opacity: 1 }
|
|
100% { transform: translateY(80px); opacity: 0 }
|
|
}
|
|
|
|
/* ── 타이틀 ── */
|
|
.talent-title {
|
|
font-size: clamp(2.4rem, calc(1.25vw + 1.4rem), 3.4rem);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: clamp(20px, 6vw, 40px);
|
|
word-break: keep-all;
|
|
}
|
|
.talent-title .point {
|
|
color: var(--primary);
|
|
}
|
|
/* 中心 한자 강조 */
|
|
.talent-title .hanja {
|
|
font-family: var(--e-font);
|
|
color: var(--mint);
|
|
}
|
|
|
|
/* ── 카드 그리드 ── */
|
|
.talent-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
/* ── 개별 카드 ── */
|
|
.talent-card {
|
|
background: #fff;
|
|
border-radius: 20px;
|
|
padding: clamp(28px, 3vw, 70px) clamp(2rem, 2vw, 3rem) clamp(3rem, 3vw, 5rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 0;
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
|
|
transition: transform 0.25s, box-shadow 0.25s;
|
|
}
|
|
@media (hover: hover) {
|
|
.talent-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 12px 36px rgba(19, 152, 248, 0.25);
|
|
}
|
|
}
|
|
|
|
/* 아이콘 영역 */
|
|
.talent-card .card-icon {
|
|
width: 105px;
|
|
height: 105px;
|
|
margin-bottom: clamp(2.5rem, 2.5vw, 5.2rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.talent-card .card-icon img {
|
|
width: 105px;
|
|
height: 105px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* 카드 제목 */
|
|
.talent-card .card-title {
|
|
font-size: clamp(1.8rem, calc(0.5vw + 1.35rem), 2.4rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
line-height: 1.3;
|
|
margin-bottom: clamp(10px, 1.5vw, 10px);
|
|
word-break: keep-all;
|
|
}
|
|
.talent-card .card-title .point {
|
|
color: var(--primary);
|
|
}
|
|
|
|
|
|
/* 카드 설명 */
|
|
.talent-card .card-desc {
|
|
font-size: clamp(1.6rem, calc(0.25vw + 1.22rem), 1.8rem);
|
|
font-weight: 400;
|
|
color: #666;
|
|
line-height: 1.75;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1100px) {
|
|
.talent-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.talent-cards {
|
|
grid-template-columns: 1fr;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
|
|
/* ==========================
|
|
* 복리후생
|
|
* ========================== */
|
|
.welfare-wrap {
|
|
border-top: 1px solid var(--bd-color);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
}
|
|
.welfare-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.welfare-row--border {
|
|
position: relative;
|
|
margin-bottom: 20px; /* 선 아래 → 다음 행 사이 간격 20px */
|
|
}
|
|
.welfare-row--border::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
.welfare-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 4rem clamp(1rem, 2vw, 2rem) 2.5rem;
|
|
border-bottom:1px solid var(--bd-color);
|
|
}
|
|
.welfare-icon {
|
|
height: 65px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
.welfare-icon img {
|
|
height: 65px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
.welfare-icon svg {
|
|
height: 65px;
|
|
width: auto;
|
|
}
|
|
.welfare-title {
|
|
font-size: clamp(1.8rem, 1.4vw, 2rem);
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.3;
|
|
}
|
|
.welfare-desc {
|
|
font-size: clamp(1.4rem, 1.1vw, 1.6rem);
|
|
font-weight: 400;
|
|
color: var(--cont2);
|
|
line-height: 1.7;
|
|
word-break: keep-all;
|
|
}
|
|
.welfare-row--last .welfare-item:nth-child(1),
|
|
.welfare-row--last .welfare-item:nth-child(2) {
|
|
border-bottom:0;
|
|
}
|
|
|
|
|
|
@media (max-width: 1024px) {
|
|
|
|
.welfare-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.welfare-row--border {
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.welfare-row--border::after { display: none; }
|
|
.welfare-row--border .welfare-item:nth-child(1),
|
|
.welfare-row--border .welfare-item:nth-child(2) {
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.welfare-row--border .welfare-item:nth-child(1)::after,
|
|
.welfare-row--border .welfare-item:nth-child(2)::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
.welfare-row--border + .welfare-row--border {
|
|
margin-top: 0;
|
|
}
|
|
.welfare-row--border:last-of-type {
|
|
position: relative;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.welfare-row--border:last-of-type::after {
|
|
display: block;
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
.welfare-row:last-child {
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.welfare-row:last-child::after { display: none; }
|
|
.welfare-row:last-child .welfare-item::after { display: none !important; }
|
|
.welfare-row:last-child .welfare-item {
|
|
padding-bottom: clamp(3rem, 4vw, 5rem);
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.welfare-item {
|
|
padding: 2.5rem 1rem;
|
|
}
|
|
.welfare-title { font-size: 1.8rem; }
|
|
.welfare-desc { font-size: 1.4rem; line-height: 1.6; }
|
|
.welfare-icon { height: 55px; margin-bottom: 16px; }
|
|
.welfare-icon svg,
|
|
.welfare-icon img { height: 55px; }
|
|
}
|
|
|
|
|
|
.recruit-info-grid {
|
|
margin-top:1.5rem;
|
|
margin-bottom: 15rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap:0 60px;
|
|
}
|
|
.ri-item {
|
|
padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 3vw, 3rem) 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: clamp(2rem, 3vw, 4rem);
|
|
border-top:1px solid var(--bd-color);
|
|
}
|
|
.ri-item:nth-child(3),
|
|
.ri-item:nth-child(4) {
|
|
border-bottom:1px solid var(--bd-color);
|
|
}
|
|
|
|
/* 헤더 영역 */
|
|
.ri-head {
|
|
flex-shrink: 0;
|
|
width: clamp(100px, 15vw, 140px);
|
|
flex-direction: column; /* 번호 위, 타이틀 아래 */
|
|
align-items: flex-start;
|
|
gap: 0.6rem;
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 번호 */
|
|
.ri-num {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(1.8rem, calc(1.25vw + 1.4rem), 2rem);
|
|
font-weight: 700;
|
|
color: var(--primary, #1398F8);
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* 타이틀 */
|
|
.ri-title {
|
|
font-size: clamp(1.8rem, calc(0.54vw + 1.5rem), 2.2rem);
|
|
font-weight: 600;
|
|
color: var(--dark, #222);
|
|
line-height: 1.3;
|
|
word-break: keep-all;
|
|
padding-top:10px;
|
|
}
|
|
|
|
/* 리스트 */
|
|
.ri-list {
|
|
margin-top:3rem;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
flex: 1;
|
|
}
|
|
|
|
.ri-list li {
|
|
position: relative;
|
|
padding-left: 1.6rem;
|
|
font-size: clamp(1.5rem, calc(0.27vw + 1.35rem), 1.6rem);
|
|
color: var(--cont1, #444);
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.ri-list li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.85em;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--primary, #1398F8);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 지원하기 버튼 */
|
|
.ri-apply-wrap {
|
|
margin-top: clamp(2rem, 2.5vw, 3.2rem);
|
|
}
|
|
|
|
.ri-apply-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 28px;
|
|
border: 1.5px solid var(--navy);
|
|
border-radius: 100px;
|
|
font-size: clamp(1.5rem, calc(0.27vw + 1.35rem), 1.7rem);
|
|
font-weight: 500;
|
|
color: var(--navy);
|
|
background: #fff;
|
|
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
|
|
cursor: pointer;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.ri-apply-btn:hover {
|
|
background: var(--navy);
|
|
color: #fff;
|
|
border-color: var(--navy);
|
|
}
|
|
|
|
.ri-apply-btn svg {
|
|
transition: transform 0.22s ease;
|
|
}
|
|
|
|
.ri-apply-btn:hover svg {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
|
|
/* ==============================
|
|
반응형
|
|
============================== */
|
|
@media (max-width: 900px) {
|
|
.recruit-info-grid {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: none;
|
|
}
|
|
|
|
.ri-item {
|
|
padding: clamp(2.4rem, 3.5vw, 3rem) 0;
|
|
}
|
|
.ri-item:nth-child(3) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ri-item {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
|
|
.rp-flow {
|
|
margin-top:30px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 0;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* 각 스텝 */
|
|
.rp-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 아이콘 카드 */
|
|
.rp-card {
|
|
width: clamp(16rem, calc(4.8vw + 58px), 16rem);
|
|
height: clamp(16rem, calc(4.8vw + 58px), 16rem);
|
|
background: #fff;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: clamp(1.4rem, 1.8vw, 2.2rem);
|
|
transition: box-shadow 0.22s ease, transform 0.22s ease;
|
|
}
|
|
|
|
.rp-step:hover .rp-card {
|
|
box-shadow: 0 6px 28px rgba(19, 152, 248, 0.20), 0 2px 8px rgba(0,0,0,0.08);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.rp-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 스텝 이름 */
|
|
.rp-step-name {
|
|
display: block;
|
|
font-size: clamp(1.8rem, calc(0.36vw + 1.4rem), 2rem);
|
|
font-weight: 700;
|
|
color: var(--dark, #222);
|
|
line-height: 1.3;
|
|
margin-bottom: clamp(8px, 1vw, 12px);
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* 스텝 설명 */
|
|
.rp-step-desc {
|
|
font-size: clamp(1.5rem, calc(0.18vw + 1.2rem), 1.6rem);
|
|
font-weight: 400;
|
|
color: var(--cont2, #666);
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* 화살표 */
|
|
.rp-arrow {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top:7.5rem;
|
|
padding: 0 clamp(4px, 0.8vw, 10px);
|
|
}
|
|
|
|
.rp-arrow svg {
|
|
width: clamp(14px, 1.4vw, 22px);
|
|
height: clamp(14px, 1.4vw, 22px);
|
|
flex-shrink: 0;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/* ==============================
|
|
반응형
|
|
============================== */
|
|
@media (max-width: 1024px) {
|
|
.rp-flow {
|
|
flex-wrap: wrap;
|
|
gap: 0;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.rp-step {
|
|
flex: 0 0 calc(30% - 10px);
|
|
max-width: calc(30%);
|
|
padding: 0 8px;
|
|
margin-bottom: clamp(2.4rem, 3.5vw, 4rem);
|
|
}
|
|
.rp-arrow:nth-child(6) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.rp-step {
|
|
flex: 0 0 45%;
|
|
max-width: 100%;
|
|
}
|
|
.rp-card {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
.rp-icon img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.rp-arrow:nth-child(3),
|
|
.rp-arrow:nth-child(4),
|
|
.rp-arrow:nth-child(8){
|
|
display: none;
|
|
}
|
|
.rp-arrow:nth-child(6) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.rp-step {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
.rp-arrow{
|
|
display: none;
|
|
}
|
|
.rp-arrow:nth-child(6) {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
|
|
/* ==========================
|
|
* 채용문의
|
|
* ========================== */
|
|
.sec-recreuit {
|
|
background:url('../img/main/inc04/inc04_bg.png') center bottom no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.sec-recreuit .sub-h2 {
|
|
padding-top:10rem;
|
|
padding-bottom:8rem;
|
|
}
|
|
.inquiry-wrap {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
gap: clamp(40px, 6vw, 100px);
|
|
align-items: flex-start;
|
|
border-top:1px solid var(--bd-color);
|
|
padding-top: 8rem;
|
|
}
|
|
.inquiry-aside {
|
|
position: sticky;
|
|
top: 120px;
|
|
}
|
|
|
|
.inquiry-aside__title {
|
|
font-size: clamp(2.4rem, calc(0.89vw + 1.53rem), 3.4rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
line-height: 1.3;
|
|
letter-spacing: -0.03em;
|
|
word-break: keep-all;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.inquiry-aside__title em {
|
|
color: var(--primary);
|
|
font-style: normal;
|
|
}
|
|
|
|
.inquiry-aside__desc {
|
|
font-size: clamp(1.8rem, calc(0.18vw + 1.26rem), 2rem);
|
|
color: var(--cont2);
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* ── 폼 영역 ── */
|
|
.inquiry-form {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ── 필드 그룹 ── */
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.form-row--full {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ── 라벨 ── */
|
|
.form-label {
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.form-label .required {
|
|
color: var(--primary);
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
/* ── 입력 공통 ── */
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
height: 54px;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
font-family: var(--k-font);
|
|
font-size: 1.5rem;
|
|
color: var(--dark);
|
|
padding: 0 18px;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.form-input::placeholder,
|
|
.form-textarea::placeholder {
|
|
color: #aab4c0;
|
|
font-size: 1.45rem;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(19, 152, 248, 0.12);
|
|
}
|
|
|
|
/* ── 셀렉트 ── */
|
|
.form-select-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.form-select {
|
|
cursor: pointer;
|
|
padding-right: 44px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.form-select-wrap .select-ico {
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
color: var(--cont2);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* ── 파일 업로드 ── */
|
|
.form-file-wrap {
|
|
position: relative;
|
|
height: 54px;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 18px;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form-file-wrap:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.form-file-wrap:focus-within {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(19, 152, 248, 0.12);
|
|
}
|
|
|
|
.form-file-wrap .file-ico {
|
|
color: var(--dark);
|
|
font-size: 2.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-file-name {
|
|
flex: 1;
|
|
font-size: 1.45rem;
|
|
color: #aab4c0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.form-file-name.has-file {
|
|
color: var(--dark);
|
|
}
|
|
|
|
.form-file-btn {
|
|
flex-shrink: 0;
|
|
height: 34px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
font-family: var(--k-font);
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: var(--cont1);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.form-file-btn:hover {
|
|
background: #e2eef9;
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.form-file-input {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ── 텍스트에어리어 ── */
|
|
.form-textarea {
|
|
height: 180px;
|
|
padding: 16px 18px;
|
|
resize: vertical;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── 개인정보 수집 이용 안내 ── */
|
|
.privacy-section {
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.privacy-section__title {
|
|
font-size: clamp(2.2rem, calc(1.43vw + 1.514rem), 3.4rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--navy);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.privacy-box {
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 22px 24px;
|
|
height: 170px;
|
|
overflow-y: auto;
|
|
font-size: 1.4rem;
|
|
color: var(--cont2);
|
|
line-height: 1.8;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--bd-color) transparent;
|
|
}
|
|
|
|
.privacy-box::-webkit-scrollbar { width: 5px }
|
|
.privacy-box::-webkit-scrollbar-track { background: transparent }
|
|
.privacy-box::-webkit-scrollbar-thumb { background: var(--bd-color); border-radius: 10px }
|
|
|
|
.privacy-box p { margin-bottom: 14px; word-break: keep-all; }
|
|
.privacy-box p:last-child { margin-bottom: 0; }
|
|
.privacy-box strong {
|
|
display: block;
|
|
color: var(--dark);
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* ── 동의 체크박스 ── */
|
|
.form-agree {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-agree__cb {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-agree__cb input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.form-agree__cb .cb-custom {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 2px solid var(--bd-color);
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-agree__cb .cb-custom::after {
|
|
content: '';
|
|
display: block;
|
|
width: 5px;
|
|
height: 9px;
|
|
border: 2px solid #fff;
|
|
border-top: none;
|
|
border-left: none;
|
|
transform: rotate(45deg) translateY(-1px);
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.form-agree__cb input:checked ~ .cb-custom {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.form-agree__cb input:checked ~ .cb-custom::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-agree__cb input:focus-visible ~ .cb-custom {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.form-agree__label {
|
|
font-size: 1.6rem;
|
|
color: var(--cont1);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.form-agree__label .required {
|
|
color: var(--primary);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* ── 제출 버튼 ── */
|
|
.form-submit-wrap {
|
|
margin-top: 50px;
|
|
margin-bottom:200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-submit-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
height: 58px;
|
|
min-width: 200px;
|
|
padding: 0 40px;
|
|
background: var(--primary);
|
|
border: none;
|
|
border-radius: 100px;
|
|
font-family: var(--k-font);
|
|
font-size: 1.7rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
letter-spacing: -0.01em;
|
|
transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
|
|
box-shadow: 0 6px 24px rgba(19, 152, 248, 0.3);
|
|
}
|
|
|
|
.form-submit-btn:hover {
|
|
background: #0a82d8;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 32px rgba(19, 152, 248, 0.45);
|
|
}
|
|
|
|
.form-submit-btn:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 14px rgba(19, 152, 248, 0.25);
|
|
}
|
|
|
|
.form-submit-btn .btn-arrow {
|
|
font-size: 2.2rem;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.form-submit-btn:hover .btn-arrow {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ── 입력 오류 상태 ── */
|
|
.form-input.is-error,
|
|
.form-select.is-error,
|
|
.form-textarea.is-error {
|
|
border-color: #e53e3e;
|
|
box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
|
|
}
|
|
|
|
.form-error-msg {
|
|
font-size: 1.6rem;
|
|
color: #e53e3e;
|
|
display: none;
|
|
}
|
|
|
|
.form-error-msg.is-show {
|
|
display: block;
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1024px) {
|
|
.sec-recreuit .sub-h2 {
|
|
padding-top:5rem;
|
|
padding-bottom:5rem;
|
|
}
|
|
.inquiry-wrap {
|
|
grid-template-columns: 220px 1fr;
|
|
gap: clamp(30px, 4vw, 60px);
|
|
padding-top:5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.inquiry-wrap {
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.inquiry-aside {
|
|
position: static;
|
|
}
|
|
|
|
.inquiry-aside__title {
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.form-submit-wrap {
|
|
margin-top: 25px;
|
|
margin-bottom:100px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea,
|
|
.form-file-wrap {
|
|
height: 50px;
|
|
}
|
|
|
|
.form-textarea {
|
|
height: 150px;
|
|
}
|
|
|
|
.privacy-box {
|
|
height: 140px;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ==============================
|
|
PG등록
|
|
============================== */
|
|
.evpg-sec-head {
|
|
text-align: center;
|
|
margin: 0 auto 40px auto;
|
|
}
|
|
.evpg-eyebrow {
|
|
display: inline-block;
|
|
font-family: var(--e-font);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
letter-spacing: .15em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 12px;
|
|
background-color: var(--bg);
|
|
padding:10px 20px;;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
/* ── 요약 지표 카드 ── */
|
|
.evpg-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: clamp(40px, 5vw, 70px);
|
|
}
|
|
.evpg-stat-card {
|
|
background: var(--bg);
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 16px;
|
|
padding: clamp(22px, 2.5vw, 36px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: box-shadow .25s, transform .25s;
|
|
}
|
|
.evpg-stat-card:hover {
|
|
box-shadow: 0 10px 32px rgba(19,152,248,.12);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.evpg-stat-num {
|
|
font-family: var(--e-font);
|
|
font-size: clamp(3.6rem, calc(2vw + 2rem), 5.2rem);
|
|
font-weight: 800;
|
|
color: var(--navy);
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
.evpg-stat-unit { font-size: clamp(1.8rem, calc(.5vw + 1.4rem), 2.4rem); font-weight: 600; color: var(--cont1) }
|
|
.evpg-stat-label { font-size: 1.6rem; color: var(--cont2); margin-top: 8px; line-height: 1.5; word-break: keep-all }
|
|
.evpg-stat-sub { font-size: 1.4rem; color: var(--primary); font-weight: 600; margin-top: 6px }
|
|
|
|
/* ── 체크 카드 ── */
|
|
.evpg-check-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 22px;
|
|
}
|
|
.evpg-check-card {
|
|
background: #fff;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 16px;
|
|
padding: clamp(24px, 3vw, 38px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: box-shadow .25s, transform .25s, border-color .25s;
|
|
}
|
|
.evpg-check-card:hover {
|
|
box-shadow: 0 12px 36px rgba(19,152,248,.11);
|
|
transform: translateY(-4px);
|
|
border-color: rgba(19,152,248,.3);
|
|
}
|
|
.evpg-check-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary), #0a5fd8);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform .3s;
|
|
}
|
|
.evpg-check-card:hover::before { transform: scaleX(1) }
|
|
.evpg-card-num {
|
|
font-family: var(--e-font);
|
|
font-size: 5rem;
|
|
font-weight: 800;
|
|
color: var(--bg);
|
|
line-height: 1;
|
|
margin-bottom: 10px;
|
|
user-select: none;
|
|
transition: color .25s;
|
|
}
|
|
.evpg-check-card:hover .evpg-card-num { color: rgba(19,152,248,.1) }
|
|
.evpg-card-icon {
|
|
width: 48px; height: 48px;
|
|
background: var(--bg);
|
|
border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 16px;
|
|
transition: background .25s;
|
|
}
|
|
.evpg-check-card:hover .evpg-card-icon { background: rgba(19,152,248,.1) }
|
|
.evpg-card-icon svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
|
|
.evpg-card-tit {
|
|
font-size: clamp(1.7rem, calc(.3vw + 1.4rem), 2rem);
|
|
font-weight: 700; color: var(--dark); line-height: 1.4;
|
|
margin-bottom: 12px; word-break: keep-all;
|
|
}
|
|
.evpg-card-body { font-size: 1.5rem; color: var(--cont2); line-height: 1.72; word-break: keep-all }
|
|
.evpg-card-body strong { color: var(--primary); font-weight: 600 }
|
|
.evpg-card-tag {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
background: var(--bg); border: 1px solid var(--bd-color);
|
|
border-radius: 50px; padding: 4px 12px;
|
|
font-size: 1.2rem; font-weight: 600; color: var(--primary); margin-top: 14px;
|
|
}
|
|
|
|
/* ── 요건 박스 ── */
|
|
.evpg-req-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 22px;
|
|
}
|
|
.evpg-req-box {
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 16px; overflow: hidden; background: #fff;
|
|
transition: box-shadow .25s;
|
|
}
|
|
.evpg-req-box:hover { box-shadow: 0 8px 28px rgba(0,0,0,.06) }
|
|
.evpg-req-head {
|
|
background: var(--navy);
|
|
padding: 18px 26px; display: flex; align-items: center; gap: 14px;
|
|
}
|
|
.evpg-hicon {
|
|
width: 38px; height: 38px;
|
|
background: rgba(255,255,255,.12); border-radius: 9px;
|
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
}
|
|
.evpg-hicon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
|
|
.evpg-req-head h3 { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.4 }
|
|
.evpg-req-body { padding: 22px 26px }
|
|
.evpg-dot-list { display: flex; flex-direction: column; gap: 10px }
|
|
.evpg-dot-list li {
|
|
display: flex; align-items: flex-start; gap: 10px;
|
|
font-size: 1.5rem; color: var(--cont1); line-height: 1.65;
|
|
}
|
|
.evpg-dot-list li::before {
|
|
content: ''; flex-shrink: 0; width: 6px; height: 6px;
|
|
border-radius: 50%; background: var(--primary); margin-top: 8px;
|
|
}
|
|
.evpg-dot-list li strong { color: var(--primary); font-weight: 600 }
|
|
.evpg-note {
|
|
margin-top: 14px; padding: 12px 16px;
|
|
background: var(--bg); border-radius: 8px;
|
|
font-size: 1.4rem; color: var(--cont2); line-height: 1.6;
|
|
}
|
|
.evpg-note strong { color: var(--primary); font-weight: 700 }
|
|
|
|
/* ── 장점 리스트 ── */
|
|
.evpg-adv-list { display: flex; flex-direction: column; gap: 16px }
|
|
.evpg-adv-item {
|
|
display: flex; align-items: flex-start; gap: 22px;
|
|
background: var(--bg); border: 1px solid var(--bd-color);
|
|
border-radius: 14px;
|
|
padding: clamp(18px,2vw,28px) clamp(20px,2.5vw,36px);
|
|
transition: box-shadow .25s, border-color .25s;
|
|
}
|
|
.evpg-adv-item:hover {
|
|
box-shadow: 0 6px 20px rgba(19,152,248,.09);
|
|
border-color: rgba(19,152,248,.22);
|
|
}
|
|
.evpg-adv-icon {
|
|
flex-shrink: 0; width: 50px; height: 50px;
|
|
background: var(--primary); border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.evpg-adv-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
|
|
.evpg-adv-txt h4 {
|
|
font-size: clamp(1.6rem,calc(.2vw + 1.4rem),1.9rem);
|
|
font-weight: 700; color: var(--dark); margin-bottom: 6px;
|
|
}
|
|
.evpg-adv-txt p { font-size: 1.5rem; color: var(--cont2); line-height: 1.7; word-break: keep-all }
|
|
|
|
/* ── 레퍼런스 다크 섹션 ── */
|
|
.evpg-ref-wrap {
|
|
background: var(--navy);
|
|
padding: clamp(6rem,calc(6vw + 1rem),10rem) 0;
|
|
}
|
|
.evpg-ref-wrap .evpg-eyebrow { color: rgba(19,152,248,.9) }
|
|
.evpg-ref-wrap .sub-h2 { color: #fff }
|
|
.evpg-ref-wrap .sub-desc-txt { color: rgba(255,255,255,.65) }
|
|
.evpg-ref-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
gap: 18px; margin-top: clamp(32px, 4vw, 54px);
|
|
}
|
|
.evpg-ref-card {
|
|
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: 14px; padding: clamp(22px,2.5vw,34px);
|
|
transition: background .25s, border-color .25s;
|
|
}
|
|
.evpg-ref-card:hover { background: rgba(255,255,255,.1); border-color: rgba(19,152,248,.4) }
|
|
.evpg-ref-icon {
|
|
width: 44px; height: 44px; background: rgba(19,152,248,.2);
|
|
border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
|
}
|
|
.evpg-ref-icon svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
|
|
.evpg-ref-card h4 { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4 }
|
|
.evpg-ref-card p { font-size: 1.45rem; color: rgba(255,255,255,.65); line-height: 1.7; word-break: keep-all }
|
|
.evpg-cta-row {
|
|
display: flex; justify-content: center; gap: 14px;flex-wrap: wrap;
|
|
}
|
|
.evpg-btn-outline {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: transparent; color: #fff;
|
|
border: 1px solid rgba(255,255,255,.35);
|
|
font-size: 1.6rem; font-weight: 600;
|
|
padding: 0 28px; height: clamp(48px,3.25vw,52px);
|
|
border-radius: 100px; transition: background .25s, border-color .25s;
|
|
}
|
|
.evpg-btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.65) }
|
|
.evpg-btn-outline svg,
|
|
.btn-inquiry svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
|
|
|
|
/* ── 문의 폼 ── */
|
|
.evpg-form-wrap { max-width: 860px; margin: 0 auto }
|
|
.evpg-form-box {
|
|
background: var(--bg); border: 1px solid var(--bd-color);
|
|
border-radius: 20px; padding: clamp(30px, 4vw, 52px);
|
|
}
|
|
.evpg-form-desc { font-size: 1.5rem; color: var(--cont2); margin-bottom: 28px; line-height: 1.6 }
|
|
.evpg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px }
|
|
.evpg-form-row.full { grid-template-columns: 1fr }
|
|
.evpg-form-group { display: flex; flex-direction: column; gap: 7px }
|
|
.evpg-label { font-size: 1.4rem; font-weight: 600; color: var(--cont1) }
|
|
.evpg-label .req { color: var(--primary); margin-left: 2px }
|
|
.evpg-ctrl {
|
|
width: 100%; padding: 13px 16px;
|
|
font-size: 1.5rem; font-family: var(--k-font);
|
|
color: var(--dark); background: #fff;
|
|
border: 1px solid var(--bd-color); border-radius: 10px;
|
|
outline: none; transition: border-color .2s, box-shadow .2s;
|
|
}
|
|
.evpg-ctrl:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(19,152,248,.12) }
|
|
.evpg-ctrl::placeholder { color: #c0c8d4 }
|
|
select.evpg-ctrl { cursor: pointer }
|
|
textarea.evpg-ctrl { min-height: 130px; resize: vertical }
|
|
.evpg-agree {
|
|
background: rgba(19,152,248,.05); border: 1px solid rgba(19,152,248,.15);
|
|
border-radius: 10px; padding: 12px 15px;
|
|
font-size: 1.35rem; color: var(--cont2); line-height: 1.65;
|
|
margin-bottom: 22px; margin-top: 4px;
|
|
}
|
|
.evpg-agree strong { color: var(--cont1); font-weight: 600 }
|
|
.evpg-submit {
|
|
width: 100%; padding: 16px;
|
|
background: var(--primary); color: #fff;
|
|
font-size: 1.7rem; font-weight: 700; font-family: var(--k-font);
|
|
border: none; border-radius: 12px; cursor: pointer;
|
|
transition: background .25s, transform .2s; letter-spacing: -0.02em;
|
|
}
|
|
.evpg-submit:hover { background: #0d7fd4; transform: translateY(-1px) }
|
|
.evpg-submit:active { transform: translateY(0) }
|
|
|
|
/* ── 스크롤 페이드업 ── */
|
|
.evpg-fade { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease }
|
|
.evpg-fade.on { opacity: 1; transform: translateY(0) }
|
|
.evpg-fade:nth-child(2) { transition-delay: .08s }
|
|
.evpg-fade:nth-child(3) { transition-delay: .16s }
|
|
.evpg-fade:nth-child(4) { transition-delay: .24s }
|
|
.evpg-fade:nth-child(5) { transition-delay: .32s }
|
|
.evpg-fade:nth-child(6) { transition-delay: .40s }
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1200px) {
|
|
.split-box { flex-direction: column }
|
|
.split-box__title { flex: none; padding: 28px 28px 0 }
|
|
.split-box__content { padding: 18px 28px 28px }
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.evpg-check-grid { grid-template-columns: repeat(2, 1fr) }
|
|
.evpg-ref-grid { grid-template-columns: repeat(2, 1fr) }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.evpg-summary { grid-template-columns: 1fr 1fr }
|
|
.evpg-check-grid { grid-template-columns: 1fr }
|
|
.evpg-req-grid { grid-template-columns: 1fr }
|
|
.evpg-ref-grid { grid-template-columns: 1fr }
|
|
.evpg-form-row { grid-template-columns: 1fr }
|
|
.split-list { grid-template-columns: 1fr }
|
|
.split-box__divider { display: none }
|
|
.split-box__title { padding: 20px 20px 0 }
|
|
.split-box__content { padding: 16px 20px 20px }
|
|
.evpg-card-num {font-size:1.8rem;}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.evpg-summary { grid-template-columns: 1fr }
|
|
.evpg-cta-row { flex-direction: column; align-items: center }
|
|
.evpg-btn-outline,
|
|
.btn-inquiry { width: 100%; justify-content: center }
|
|
}
|
|
|
|
|
|
/* ==============================
|
|
other - 선정산서비스
|
|
============================== */
|
|
|
|
/* ── 섹션 공통 헤더 ── */
|
|
.ps-sec-head {
|
|
text-align: center;
|
|
margin-bottom: clamp(36px, 4.5vw, 60px);
|
|
}
|
|
.ps-eyebrow {
|
|
display: inline-block;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
background: rgba(19,152,248,.08);
|
|
border-radius: 50px;
|
|
padding: 5px 16px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* ══════════════════════
|
|
SECTION 1 — 시스템 카드
|
|
══════════════════════ */
|
|
.ps-sys-section {
|
|
padding: clamp(6rem, calc(6vw + 1rem), 10rem) 0;
|
|
background: #fff;
|
|
}
|
|
.ps-sys-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
margin-top: clamp(32px, 4vw, 52px);
|
|
}
|
|
.ps-sys-card {
|
|
background: var(--bg);
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 18px;
|
|
padding: clamp(24px, 2.5vw, 36px) clamp(20px, 2vw, 28px);
|
|
transition: box-shadow .28s, border-color .28s, transform .28s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ps-sys-card:hover {
|
|
box-shadow: 0 10px 34px rgba(19,152,248,.12);
|
|
transform: translateY(-4px);
|
|
}
|
|
.ps-sys-card:hover::before { opacity: 1; }
|
|
|
|
.ps-sys-num {
|
|
font-family: var(--e-font);
|
|
font-size: 3.6rem;
|
|
font-weight: 800;
|
|
color: rgba(19,152,248,.12);
|
|
line-height: 1;
|
|
margin-bottom: 8px;
|
|
transition: color .28s;
|
|
}
|
|
.ps-sys-card:hover .ps-sys-num { color: rgba(19,152,248,.2); }
|
|
|
|
.ps-sys-icon {
|
|
width: 50px; height: 50px;
|
|
background: #fff;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 16px;
|
|
transition: background .28s, border-color .28s;
|
|
}
|
|
.ps-sys-card:hover .ps-sys-icon {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
.ps-sys-icon svg {
|
|
width: 22px; height: 22px;
|
|
stroke: var(--primary); fill: none;
|
|
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
|
transition: stroke .28s;
|
|
}
|
|
.ps-sys-card:hover .ps-sys-icon svg { stroke: #fff; }
|
|
|
|
.ps-sys-tit {
|
|
font-size: clamp(2.2rem, calc(.25vw + 1.4rem), 2.4rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
line-height: 1.4;
|
|
margin-bottom: 16px;
|
|
word-break: keep-all;
|
|
}
|
|
.ps-sys-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
}
|
|
.ps-sys-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 9px;
|
|
font-size: 1.6rem;
|
|
color: var(--cont2);
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
.ps-sys-list li::before {
|
|
content: '';
|
|
flex-shrink: 0;
|
|
width: 5px; height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* ══════════════════════
|
|
SECTION 2 — 이용 혜택
|
|
══════════════════════ */
|
|
.ps-benefit-section {
|
|
padding: clamp(6rem, calc(6vw + 1rem), 10rem) 0;
|
|
background: var(--navy);
|
|
}
|
|
.ps-benefit-section .ps-sec-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
|
|
.ps-benefit-section .ps-eyebrow { color: rgba(19,152,248,.9); background: rgba(19,152,248,.15); }
|
|
.ps-benefit-section .sub-h2 { color: #fff; }
|
|
.ps-benefit-section .sub-desc-txt { color: rgba(255,255,255,.65); }
|
|
|
|
.ps-benefit-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 16px;
|
|
margin-top: clamp(32px, 4vw, 52px);
|
|
}
|
|
.ps-benefit-card {
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: 16px;
|
|
padding: clamp(22px, 2.5vw, 32px) clamp(18px, 2vw, 26px);
|
|
text-align: center;
|
|
transition: background .28s, border-color .28s, transform .28s;
|
|
}
|
|
.ps-benefit-card:hover {
|
|
background: rgba(255,255,255,.11);
|
|
border-color: rgba(19,152,248,.45);
|
|
transform: translateY(-4px);
|
|
}
|
|
.ps-benefit-ico {
|
|
width: 58px; height: 58px;
|
|
background: rgba(19,152,248,.2);
|
|
border-radius: 16px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin: 0 auto 18px;
|
|
transition: background .28s;
|
|
}
|
|
.ps-benefit-card:hover .ps-benefit-ico { background: var(--primary); }
|
|
.ps-benefit-ico svg {
|
|
width: 24px; height: 24px;
|
|
stroke: var(--primary); fill: none;
|
|
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
|
transition: stroke .28s;
|
|
}
|
|
.ps-benefit-card:hover .ps-benefit-ico svg { stroke: #fff; }
|
|
|
|
.ps-benefit-tit {
|
|
font-size: clamp(2.2rem, calc(.2vw + 1.35rem), 2.4rem);
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 10px;
|
|
word-break: keep-all;
|
|
line-height: 1.35;
|
|
}
|
|
.ps-benefit-desc {
|
|
font-size: 1.6rem;
|
|
color: rgba(255,255,255,.62);
|
|
line-height: 1.7;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* ══════════════════════
|
|
SECTION 3 — 인터뷰
|
|
══════════════════════ */
|
|
.ps-review-section {
|
|
padding: clamp(6rem, calc(6vw + 1rem), 10rem) 0;
|
|
background: var(--bg);
|
|
}
|
|
.ps-review-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 22px;
|
|
margin-top: clamp(36px, 4.5vw, 60px);
|
|
}
|
|
.ps-review-card {
|
|
background: #fff;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 20px;
|
|
padding: clamp(26px, 3vw, 38px);
|
|
position: relative;
|
|
transition: box-shadow .28s, border-color .28s;
|
|
}
|
|
.ps-review-card:hover {
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.07);
|
|
border-color: rgba(19,152,248,.25);
|
|
}
|
|
|
|
/* 말풍선 꼬리 */
|
|
.ps-review-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -16px;
|
|
left: clamp(28px, 3vw, 38px);
|
|
width: 0; height: 0;
|
|
border-left: 14px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-top: 16px solid #fff;
|
|
filter: drop-shadow(0 2px 1px rgba(0,0,0,.05));
|
|
}
|
|
.ps-review-quote {
|
|
font-size: 4rem;
|
|
line-height: 1;
|
|
margin-bottom: 10px;
|
|
}
|
|
.ps-review-txt {
|
|
font-size: clamp(1.5rem, calc(.2vw + 1.35rem), 1.75rem);
|
|
color: var(--cont1);
|
|
line-height: 1.78;
|
|
word-break: keep-all;
|
|
font-weight: 500;
|
|
margin-bottom: 0;
|
|
height:80px;
|
|
}
|
|
.ps-reviewer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-top: 36px;
|
|
}
|
|
.ps-reviewer-ava {
|
|
width: 48px; height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
.ps-reviewer-ava img {
|
|
width: 50px; height: 50px;
|
|
stroke: #fff; fill: none;
|
|
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.ps-reviewer-name {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
}
|
|
.ps-reviewer-role {
|
|
font-size: 1.35rem;
|
|
color: var(--cont2);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* 인터뷰 섹션 헤더 intro */
|
|
.ps-review-intro {
|
|
font-size: clamp(1.5rem, calc(.3vw + 1.3rem), 1.8rem);
|
|
color: var(--cont2);
|
|
line-height: 1.7;
|
|
word-break: keep-all;
|
|
text-align: center;
|
|
margin-top: clamp(10px, 1.2vw, 18px);
|
|
}
|
|
|
|
/* ══════════════════════
|
|
하단 버튼 4개
|
|
══════════════════════ */
|
|
.ps-cta-section {
|
|
background: #fff;
|
|
padding: clamp(5rem, calc(5vw + 1rem), 8rem) 0;
|
|
border-top: 1px solid var(--bd-color);
|
|
}
|
|
.ps-cta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.ps-cta-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: clamp(24px, 3vw, 36px) 16px;
|
|
border-radius: 16px;
|
|
border: 1.5px solid var(--bd-color);
|
|
background: var(--bg);
|
|
text-align: center;
|
|
transition: background .28s, border-color .28s, box-shadow .28s, transform .28s;
|
|
cursor: pointer;
|
|
text-decoration: none !important;
|
|
}
|
|
.ps-cta-btn:hover {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
box-shadow: 0 8px 24px rgba(19,152,248,.22);
|
|
transform: translateY(-3px);
|
|
}
|
|
.ps-cta-btn-ico {
|
|
width: 52px; height: 52px;
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.06);
|
|
transition: background .28s;
|
|
}
|
|
.ps-cta-btn:hover .ps-cta-btn-ico { background: rgba(255,255,255,.2); }
|
|
.ps-cta-btn-ico svg {
|
|
width: 22px; height: 22px;
|
|
stroke: var(--primary); fill: none;
|
|
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
|
transition: stroke .28s;
|
|
}
|
|
.ps-cta-btn:hover .ps-cta-btn-ico svg { stroke: #fff; }
|
|
.ps-cta-label {
|
|
font-size: clamp(1.4rem, calc(.25vw + 1.2rem), 1.7rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
line-height: 1.35;
|
|
word-break: keep-all;
|
|
transition: color .28s;
|
|
}
|
|
.ps-cta-btn:hover .ps-cta-label { color: #fff; }
|
|
|
|
/* ── 스크롤 페이드업 ── */
|
|
.ps-fade { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease }
|
|
.ps-fade.on { opacity: 1; transform: translateY(0) }
|
|
.ps-fade:nth-child(2) { transition-delay: .08s }
|
|
.ps-fade:nth-child(3) { transition-delay: .16s }
|
|
.ps-fade:nth-child(4) { transition-delay: .24s }
|
|
.ps-fade:nth-child(5) { transition-delay: .32s }
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1200px) {
|
|
.ps-sys-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.ps-benefit-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.ps-cta-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.ps-benefit-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.ps-sys-grid { grid-template-columns: 1fr; }
|
|
.ps-review-grid { grid-template-columns: 1fr; }
|
|
.ps-benefit-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.ps-cta-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.ps-review-card::after { display: none; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.ps-benefit-grid { grid-template-columns: 1fr; }
|
|
.ps-cta-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
|
|
/* ── 사이트맵 ── */
|
|
.smap-wrap {
|
|
padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px);
|
|
}
|
|
|
|
/* 그리드: 4열 */
|
|
.smap-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 각 1depth 컬럼 */
|
|
.smap-col {
|
|
border-right: 1px solid var(--bd-color);
|
|
}
|
|
.smap-col:last-child { border-right: none }
|
|
|
|
/* 1depth 헤더 */
|
|
.smap-depth1 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 26px 28px;
|
|
background: var(--navy);
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.smap-depth1-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.smap-depth1-icon svg {
|
|
width: 18px; height: 18px;
|
|
stroke: #fff; fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.smap-depth1-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.smap-depth1-en {
|
|
font-family: var(--e-font, 'Outfit', sans-serif);
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
color: rgba(255,255,255,0.45);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
line-height: 1;
|
|
}
|
|
.smap-depth1-ko {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1.5;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* 2depth 목록 */
|
|
.smap-depth2-list {
|
|
list-style: none;
|
|
margin: 0; padding: 0;
|
|
}
|
|
|
|
.smap-depth2-list li {
|
|
border-bottom: 1px solid var(--bd-color);
|
|
}
|
|
.smap-depth2-list li:last-child { border-bottom: none }
|
|
|
|
.smap-depth2-list li a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 17px 28px;
|
|
font-size: 1.8rem;
|
|
font-weight: 500;
|
|
color: var(--cont1);
|
|
text-decoration: none;
|
|
transition: background 0.2s, color 0.2s, padding-left 0.2s;
|
|
}
|
|
.smap-depth2-list li a .smap-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #c8d0dc;
|
|
transition: color 0.2s, transform 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
.smap-depth2-list li a .smap-arrow svg {
|
|
width: 14px; height: 14px;
|
|
stroke: currentColor; fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
|
|
.smap-depth2-list li a:hover {
|
|
background: #f3f8ff;
|
|
color: var(--primary);
|
|
padding-left: 32px;
|
|
}
|
|
.smap-depth2-list li a:hover .smap-arrow {
|
|
color: var(--primary);
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* 컬럼별 액센트 라인 */
|
|
.smap-col:nth-child(1) .smap-depth1 { background: #032B69 }
|
|
.smap-col:nth-child(2) .smap-depth1 { background: #053580 }
|
|
.smap-col:nth-child(3) .smap-depth1 { background: #073f98 }
|
|
.smap-col:nth-child(4) .smap-depth1 { background: #0949b0 }
|
|
|
|
/* 하단 홈 링크 */
|
|
.smap-home-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
margin-top: 40px;
|
|
}
|
|
.smap-home-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
background: var(--navy);
|
|
color: #fff;
|
|
font-size: 1.55rem;
|
|
font-weight: 600;
|
|
padding: 0 30px;
|
|
height: 52px;
|
|
border-radius: 100px;
|
|
text-decoration: none;
|
|
transition: background 0.2s, transform 0.2s;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.smap-home-btn svg {
|
|
width: 17px; height: 17px;
|
|
stroke: #fff; fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.smap-home-btn:hover {
|
|
background: var(--primary);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1024px) {
|
|
.smap-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
border-radius: 16px;
|
|
}
|
|
.smap-col:nth-child(2) { border-right: none }
|
|
.smap-col:nth-child(3) { border-top: 1px solid var(--bd-color) }
|
|
.smap-col:nth-child(4) {
|
|
border-right: none;
|
|
border-top: 1px solid var(--bd-color);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.smap-grid {
|
|
grid-template-columns: 1fr;
|
|
border-radius: 14px;
|
|
}
|
|
.smap-col { border-right: none }
|
|
.smap-col + .smap-col { border-top: 1px solid var(--bd-color) }
|
|
.smap-depth1 { padding: 20px 22px }
|
|
.smap-depth2-list li a { padding: 15px 22px }
|
|
.smap-depth2-list li a:hover { padding-left: 26px }
|
|
.smap-home-row { flex-direction: column }
|
|
.smap-home-btn { width: 100%; max-width: 320px; justify-content: center }
|
|
}
|
|
|
|
/* ==========================
|
|
* 진행프로젝트 — 카드 그리드
|
|
* ========================== */
|
|
|
|
/* 패널 헤더 (제목 + 총 건수) */
|
|
.pj-panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-bottom: clamp(20px, 2vw, 30px);
|
|
margin-bottom: clamp(24px, 2.5vw, 36px);
|
|
border-bottom: 1px solid var(--bd-color);
|
|
}
|
|
.pj-panel-head .dot-tit { padding-bottom: 0 } /* dot-tit 자체 padding 상쇄 */
|
|
.pj-panel-count {
|
|
font-size: 1.6rem;
|
|
color: var(--cont2);
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
}
|
|
.pj-panel-count strong {
|
|
font-size: 2.4rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* 카드 그리드 */
|
|
.pj-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
/* 카드 */
|
|
.pj-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--bd-color);
|
|
border-radius: 14px;
|
|
padding: 22px 22px 18px;
|
|
background: #fff;
|
|
position: relative;
|
|
transition: box-shadow 0.25s ease, transform 0.25s ease;
|
|
overflow: hidden;
|
|
}
|
|
.pj-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--primary), #6dceff);
|
|
opacity: 0;
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.pj-card:hover {
|
|
box-shadow: 0 8px 28px rgba(19, 152, 248, 0.05);
|
|
transform: translateY(-3px);
|
|
}
|
|
.pj-card:hover::before { opacity: 1; }
|
|
.pj-card__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
/* 상태 뱃지 */
|
|
.pj-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.pj-badge::before {
|
|
content: '';
|
|
display: block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pj-badge--pgd {
|
|
background: rgba(255, 127, 36, 0.1);
|
|
color: rgba(255, 106, 0, 1);
|
|
}
|
|
.pj-badge--pgd::before { background:rgba(255, 106, 0, 1); }
|
|
|
|
.pj-badge--done {
|
|
background: rgba(19, 152, 248, 0.1);
|
|
color: var(--primary);
|
|
}
|
|
.pj-badge--done::before { background: var(--primary); }
|
|
|
|
.pj-badge--ing {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
color: #16a34a;
|
|
}
|
|
.pj-badge--ing::before {
|
|
background: #22c55e;
|
|
animation: pjBlink 1.4s infinite;
|
|
}
|
|
@keyframes pjBlink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.2; }
|
|
}
|
|
|
|
/* 업체명 */
|
|
.pj-card__company {
|
|
font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 2rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.35;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* 업무 유형 */
|
|
.pj-card__type {
|
|
font-size: 1.5rem;
|
|
color: var(--cont2);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
margin-bottom: 20px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* 정보 목록 */
|
|
.pj-card__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-bottom:10px;
|
|
flex: 1; /* 카드 높이 균일하게 */
|
|
}
|
|
.pj-card__info li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
font-size: 1.4rem;
|
|
}
|
|
.pj-key {
|
|
flex-shrink: 0;
|
|
width: 64px;
|
|
color: #aaa;
|
|
font-weight: 500;
|
|
}
|
|
.pj-val {
|
|
color: var(--cont1);
|
|
font-weight: 400;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 카드 하단 (날짜 + 링크) */
|
|
.pj-card__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--bd-color);
|
|
}
|
|
.pj-date {
|
|
font-family: var(--e-font);
|
|
font-size: 1.25rem;
|
|
color: #bbb;
|
|
font-weight: 400;
|
|
}
|
|
.pj-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
text-decoration: none !important;
|
|
transition: gap 0.2s ease;
|
|
}
|
|
.pj-link:hover { gap: 7px; }
|
|
.pj-link svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── 반응형 ── */
|
|
@media (max-width: 1200px) {
|
|
.pj-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.pj-grid { grid-template-columns: 1fr; }
|
|
.pj-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
|
|
} |