@charset "utf-8";

.greeting-txt {position: relative; padding-top: var(--space-60); margin-top: 10px;}
.greeting-txt:before {content: ''; position: absolute;  top: 0; left: 0; width: 100%; height: clamp(32px, calc(64 / var(--inner) * 100vw), 64px);  background: url('/images/sub/greeting-logo.png') no-repeat center right; background-size: contain;}
.greeting-txt h2 { margin-bottom: var(--space-60); }

/* Vision Page */
.vision-section .sec:not(:last-child) {margin-bottom: var(--space-80);}

/* Section 01 */
.vision-sec01 { display: flex; flex-direction: column; gap: var(--space-80); }
.vision-sec01 .page-title { font-size: var(--font-size-46); font-weight: 700; line-height: 1; color: var(--dark-color); text-align: center; }
.vision-content { display: flex; flex-direction: column; gap: var(--space-40); }
.vision-motto { display: flex; align-items: center; justify-content: center; gap: clamp(20px, calc(48 / var(--inner) * 100vw), 48px); text-align: center; }
.vision-motto .bracket { font-size: var(--font-size-40); font-weight: 700; line-height: 0.75; color: var(--primary-color); }
.vision-motto .motto-text { font-size: var(--font-size-34); line-height: 1.3; color: var(--dark-color); }
.vision-motto .motto-text strong { font-weight: 600; }
.vision-hero { position: relative; }
.vision-hero:after {content: ''; position: absolute; left: 50%; bottom: 0;  transform: translate(-50%, 50%); width: 2px; height: clamp(40px, calc(80 / var(--inner) * 100vw), 80px); background: var(--primary-color);}
.vision-hero .hero-bg { position: relative; width: 100%; height: clamp(300px, calc(530 / var(--inner) * 100vw), 530px); overflow: hidden; }
.vision-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.vision-hero .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.vision-hero .hero-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size-70); font-weight: 700; line-height: 1; color: #fff; white-space: nowrap; }

/* Section 02 */
.vision-sec02 { position: relative; max-width: clamp(1200px, calc(1920 / var(--inner) * 100vw), 1920px); margin: 0 auto; }
.vision-item { display: flex; align-items: center; gap: 10px clamp(30px, calc(60 / var(--inner) * 100vw), 60px); margin-bottom: clamp(50px, calc(60 / var(--inner) * 100vw), 60px); }
.vision-item:last-of-type { margin-bottom: 0; }
.vision-img { flex-shrink: 0; width: clamp(300px, calc(600 / var(--inner) * 100vw), 600px); height: clamp(180px, calc(360 / var(--inner) * 100vw), 360px); border-radius: clamp(150px, calc(300 / var(--inner) * 100vw), 300px); overflow: hidden; }
.vision-img img { width: 100%; height: 100%; object-fit: cover; }
.vision-icon {margin-bottom: 10px;}
.vision-title {margin-bottom: var(--space-25); font-size: var(--font-size-32); font-weight: 700; line-height: 1.2em; color: var(--dark-color); }
.vision-desc { font-size: var(--font-size-16); line-height: 1.5; color: #454545; }
.vision-desc p { margin: 0; }
.vision-item02 { flex-direction: row-reverse; margin-left: clamp(1px, calc(144 / var(--inner) * 100vw), 144px); }
.vision-info {flex: 1;}

/* History Page */
.history-section { display: flex; flex-direction: column; gap: var(--space-116); max-width: 925px; margin: 0 auto; }
.history-item { position: relative; display: flex; gap: 10px 35px; }
.history-left { flex-shrink: 0; width: clamp(200px, calc(300 / var(--inner) * 100vw), 300px); }
.history-year { font-size: var(--font-size-72); font-weight: 700; line-height: 1; color: var(--primary-color); margin-bottom: clamp(4px, calc(9 / var(--inner) * 100vw), 9px); }
.history-desc { font-size: var(--font-size-16); line-height: 1.25; color: #454545; }
.history-right { position: relative; flex: 1; padding-top: clamp(30px, calc(46 / var(--inner) * 100vw), 46px); }
.history-circle { position: absolute; top: clamp(3px, calc(20 / var(--inner) * 100vw), 22px); left: 0; width: clamp(12px, calc(16 / var(--inner) * 100vw), 16px); height: clamp(12px, calc(16 / var(--inner) * 100vw), 16px); }
.history-circle img { width: 100%; height: 100%; }
.history-line {position: absolute; top: clamp(3px, calc(30 / var(--inner) * 100vw), 30px); left: clamp(8px, calc(16 / var(--inner) * 100vw), 16px); width: 100%; height: 1px; border-bottom: 1px dashed #ddd;}
.history-line img { width: 100%; height: 100%; }
.history-list { display: flex; flex-direction: column; gap: var(--space-40); padding-left: clamp(23px, calc(46 / var(--inner) * 100vw), 46px); line-height: 1.5em;}
.history-list-item { display: flex; gap: var(--space-10); align-items: flex-start;}
.item-year { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.item-year .dot { display: block; width: 4px; height: 4px; flex-shrink: 0; }
.item-year .dot img { width: 100%; height: 100%; }
.item-year strong {display: flex; align-items: center; gap: 6px; min-width: 62px; font-weight: 600; color: #000; white-space: nowrap; }
.item-year strong:before {content: ''; display: block; width: 4px; height: 4px; background: #d9d9d9; border-radius: 100%;}

.page-direction {display: flex; flex-direction: column; gap: var(--space-30);}
.direction-map {width: 100%; height: clamp(250px, calc(440 / var(--inner) * 100vw), 440px);}
.root_daum_roughmap .cont {display: none;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.direction-info h2 {padding: 16px clamp(20px, calc(27 / var(--inner) * 100vw), 27px); background: var(--primary-color);}
.direction-info ul {justify-content: space-around; gap: 10px 20px; border: 1px solid #ddd;}
.direction-info li, .direction-tit {display: flex; align-items: center;}
.direction-tit {gap: var(--space-15); margin-right: var(--space-30);}
.address-info {gap: clamp(8px, calc(12 / var(--inner) * 100vw), 12px);}

.page-certification ul {display: flex; flex-wrap: wrap; margin: calc(var(--space-20) * -1);}
.page-certification li {width: 33.33335%; padding: var(--space-20);}
.certification-item .img {margin-bottom: var(--space-20); border: 1px solid #ddd; padding: var(--space-40);}

.btn-kakao {display: block; margin: var(--space-20) auto var(--space-40); width: clamp(50px, calc(60 / var(--inner) * 100vw), 60px); height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px); background: url('/images/sub/logo-kakao.png') no-repeat center center; background-size: contain; border-radius: 100%;}
.btn-kakao:hover {box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}