@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 

.sub-sec {margin-bottom:var(--space-120);}
.sub-sec:last-child {margin-bottom:0;}
.sub-sec.bg {padding:var(--space-100) 0; background:#F9FAFB;}

.doc-tit {margin-bottom:var(--space-28);}
.doc-tit h3 {font-size:var(--font-size-28); line-height:1.3em; letter-spacing:-0.03em; color:var(--color-primary);}
.doc-tit p {margin-top:var(--space-10); font-size:var(--font-size-18); line-height:1.5em; color:#505050; letter-spacing:-0.02em;}

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px;}
.table-style th, 
.table-style td {padding:var(--space-20); border:1px solid #ddd; font-size:var(--font-size-18); line-height:1.66em; text-align:center;}
.table-style thead th {color:#fff; font-weight:600; background:var(--color-primary); border:0;}
.table-style tbody th {font-weight:600; color:#121212; background:rgba(26,40,71,0.08);}
.table-style tbody td {color:#505050;}
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;}
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;}

/* 회사소개 */
.greetings {background:url('/images/sub/greetings-bg-2.jpg') 50% 100% no-repeat; font-size:var(--font-size-18); line-height:1.66em;}
.greetings .inner {padding:var(--space-80) 0 clamp(200px, calc(300 / var(--inner) * 100vw), 300px); background:url('/images/sub/greetings-bg-1.png') no-repeat 50% 0;}
.greetings .title {margin-bottom:60px; font-size:var(--font-size-40); font-weight:400; line-height:1.4em; letter-spacing:-.03em;}
.greetings .subtitle {margin:60px 0 30px; font-size:var(--font-size-20); font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.greetings .subtitle strong {font-weight:600;}
.greetings .text {margin-top:20px; color:#505050;}
.greetings .list {display:flex; flex-direction:column; gap:var(--space-15); margin:30px 0;}
.greetings .list li {position:relative; padding-left:1em;}
.greetings .list li:before {content:''; position:absolute; top:calc(.75em - 3px); left:0; width:6px; height:6px; border-radius:50%; background:#1A2847;}
.greetings .sign {margin-top:60px; font-size:var(--font-size-20); line-height:1.4em; text-align:right;}

@media (min-width: 1920px) {
    .greetings {background-size:contain;}
}

@media (max-width: 1400px) {
    .greetings .inner {background-size:contain;}
}

.directions-map {position:relative; margin-bottom:var(--space-60);}
.directions-map .map-wrap {position:relative; height:clamp(240px, calc(600 / var(--inner) * 100vw), 600px); border:1px solid #ddd; border-radius:var(--radius-24); overflow:hidden;}
.directions-map .map-wrap .root_daum_roughmap {position:absolute; inset:0; width:100%; height:100%;}
.directions-map .map-wrap .root_daum_roughmap .wrap_map {height:100% !important;}
.directions-map .map-wrap .root_daum_roughmap .map_border {display:none;}
.directions-map .comp-info-wrap {position:absolute; left:0; right:0; bottom:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:var(--space-20); padding:var(--space-30) var(--space-60); background:rgba(26,40,71,0.95); border-radius:0 0 var(--radius-24) var(--radius-24);}
.directions-map .comp-info-wrap .item {display:flex; align-items:center; gap:var(--space-20); font-size:var(--font-size-18); line-height:1.5em; color:#fff;}
.directions-map .comp-info-wrap .item .label {display:flex; align-items:center; gap:var(--space-10); font-weight:700;}
.directions-map .comp-info-wrap .item .label img {width:24px; height:24px;}
.directions-map .comp-info-wrap .group {display:flex; align-items:center; gap:var(--space-70);}
.traffic-info {display:flex; flex-direction:column;}
.traffic-info .info-item {display:flex; border-top:1px solid #ddd;}
.traffic-info .info-item:first-child {border-top-color:#121212;}
.traffic-info .info-item .icon {width:150px;}
.traffic-info .info-item .cont {flex:1 1 auto; min-width:0; width:1%; padding:var(--space-50) 0;}
.traffic-info .info-item .tit {margin-bottom:var(--space-20); font-size:var(--font-size-20); font-weight:700; line-height:1.3em; color:#121212;}
.traffic-info .info-item .route-list {display:flex; flex-direction:column; gap:var(--space-15);}
.traffic-info .info-item .route {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-16); color:#505050; line-height:1.4em;}
.traffic-info .info-item .badge {flex-shrink:0; padding:0 var(--space-10); font-size:var(--font-size-12); font-weight:700; color:#fff; line-height:22px; border-radius:var(--radius-4);}
.traffic-info .info-item .badge.trunk {background:#1e7bdb;}
.traffic-info .info-item .badge.branch {background:#59be0a;}
.traffic-info .info-item .badge.line7 {background:#8c8621;}
.traffic-info .info-item .badge.line-sinbundang {background:#ffb600;}

/* 비즈니스 */
.biz-overview {position:relative; padding:var(--space-80); border-radius:var(--radius-24); color:#fff; overflow:hidden;}
.biz-overview.st1 {background:url('/images/sub/investment-overview.jpg') no-repeat 50% 50% / cover;}
.biz-overview.st2 {background:url('/images/sub/employment-overview.jpg') no-repeat 50% 50% / cover;}
.biz-overview.st3 {background:url('/images/sub/dubai-overview.jpg') no-repeat 50% 50% / cover;}
.biz-overview.st4 {background:url('/images/sub/e2-overview.jpg') no-repeat 50% 50% / cover;}
.biz-overview .tit {margin-bottom:var(--space-140); font-size:var(--font-size-32); line-height:1.5em; letter-spacing:-0.03em;}
.biz-overview .subtitle {margin-bottom:var(--space-40); font-size:var(--font-size-24); line-height:1.5em; letter-spacing:-.03em;}
.biz-overview .text {font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-.03em;}

.dubai-advant {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.dubai-advant .item {display:flex; gap:var(--space-30); padding:var(--space-40); background:#fff; border:1px solid #ddd; border-radius:var(--radius-16);}
.dubai-advant .item .icon {width:40px; height:40px; flex-shrink:0;}
.dubai-advant .item .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.dubai-advant .item .txt {flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-10);}
.dubai-advant .item .tit {font-size:var(--font-size-22); font-weight:600; line-height:1.33em; color:#121212; letter-spacing:-0.03em;}
.dubai-advant .item .desc {font-size:var(--font-size-18); color:#505050; letter-spacing:-0.02em; line-height:1.5em;}

.advant-list {display:flex; flex-direction:column; gap:var(--space-30);}
.advant-list .item {display:flex; align-items:center; justify-content:space-between; gap:var(--space-20); padding:var(--space-50) var(--space-100); border:1px solid #ddd; border-radius:var(--radius-16);}
.advant-list .item .left {display:flex; align-items:center; gap:var(--space-40); flex:1; min-width:0;}
.advant-list .item .num {flex-shrink:0; font-size:var(--font-size-30); font-weight:600; color:var(--color-primary); letter-spacing:-0.03em; line-height:1.3em;}
.advant-list .item .txt {display:flex; flex-direction:column; gap:var(--space-16);}
.advant-list .item .tit {font-size:var(--font-size-24); font-weight:600; line-height:1.4em; color:#121212; letter-spacing:-0.03em;}
.advant-list .item .desc {font-size:var(--font-size-18); color:#505050; line-height:1.5em; letter-spacing:-0.02em; line-height:1.5em;}
.advant-list .item .icon {flex-shrink:0; width:50px; height:50px;}

.procedure-flow {margin:0 -10px; text-align:center;}

.cost-cards {display:flex; gap:var(--space-40);}
.cost-cards .item {flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-24); padding:var(--space-40) var(--space-20); background:#fff; border:1px solid #ddd; border-radius:var(--radius-16);}
.cost-cards .item .icon {margin:0; width:48px; height:48px; flex-shrink:0;}
.cost-cards .item .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.cost-cards .item .txt {display:flex; flex-direction:column; align-items:center; gap:var(--space-10); text-align:center; width:100%;}
.cost-cards .item .tit {font-size:var(--font-size-22); font-weight:600; line-height:1.4em; color:#121212; letter-spacing:-0.03em;}
.cost-cards .item .desc {font-size:var(--font-size-18); color:#505050; line-height:1.4em; letter-spacing:-0.02em; line-height:1.4em;}

.cost-table table {width:100%; border-collapse:collapse; border-spacing:0px;}
.cost-table th, 
.cost-table td {padding:var(--space-20); border:1px solid #ddd; font-size:var(--font-size-18); line-height:1.66em; text-align:center;}
.cost-table thead th {font-weight:600;  color:#121212; background:#f8f8f8;}
.cost-table thead th:nth-child(1), 
.cost-table thead th:nth-child(2) {color:#fff; background:var(--color-primary);}
.cost-table tbody td {color:#505050;}
.cost-table tbody td:nth-child(1), 
.cost-table tbody td:nth-child(2) {background:rgba(26,40,71,0.08);}
.cost-table tr th:first-child,
.cost-table tr td:first-child {border-left:0;}
.cost-table tr th:last-child,
.cost-table tr td:last-child {border-right:0;}

.investment-structure {text-align:center; background:#F9FAFB; padding:var(--space-100) 0; margin-bottom:var(--space-40);}

.req-docs {display:flex; gap:var(--space-60);}
.req-docs .card {flex:1; display:flex; flex-direction:column;}
.req-docs .card-head {height:168px; display:flex; flex-direction:column; justify-content:center; padding:var(--space-30); background:var(--color-primary); color:#fff; font-size:var(--font-size-24); font-weight:600; text-align:center; border-radius:var(--radius-16) var(--radius-16) 0 0; line-height:1.4em;}
.req-docs .card-head .sub {margin-top:var(--space-16); font-size:var(--font-size-18); font-weight:400; line-height:1.5em;}
.req-docs .card-body {flex:1; padding:var(--space-60); background:#fff; border:1px solid #ddd; border-top:0; border-radius:0 0 var(--radius-16) var(--radius-16); display:flex; flex-direction:column; gap:var(--space-40);}
.req-docs .card-body .list {display:flex; flex-direction:column; gap:var(--space-20);}
.req-docs .card-body .list li {position:relative; padding-left:1.7em; font-size:var(--font-size-18); color:#505050; line-height:1.4em;}
.req-docs .card-body .list li:before {content:''; position:absolute; left:0; top:2px; width:20px; height:20px; background:url('/images/sub/icon-check.svg') no-repeat 50% 50% / contain;}
.req-docs .card-body .list li strong {font-weight:600;}
.req-docs .card-body .sublist {display:flex; flex-direction:column; gap:var(--space-10); margin:var(--space-20) 0; max-width:480px;}
.req-docs .card-body .sublist li {position:relative; padding-left:var(--space-10); font-size:var(--font-size-16); color:#888; line-height:1.5em;}
.req-docs .card-body .sublist li:before {content:''; position:absolute; left:0; top:0.6em; width:4px; height:4px; border-radius:50%; background:#888;}

.advant-wrap {display:flex; gap:var(--space-60);}
.advant-wrap .image {width:50%; max-width:673px;}
.advant-wrap .image img {border-radius:var(--radius-16);}
.advant-wrap .content {flex:1 1 auto; min-width:0; width:1%;}
.advant-wrap .content h4 {margin-bottom:var(--space-50); font-size:var(--font-size-24); font-weight:600; line-height:1.4em; color:#121212; letter-spacing:-0.03em;}
.advant-wrap .content p {font-size:var(--font-size-18); color:#505050; line-height:1.55em; letter-spacing:-0.02em;}

.procedure-step {padding:var(--space-60) var(--space-20); border:1px solid #ddd; border-radius:var(--radius-16); display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-40); text-align:center;}
.procedure-step .step {position:relative; padding:0 20px; text-align:center;}
.procedure-step .step:after {content:''; position:absolute; top:68px; right:-14px; width:28px; height:5px; background:url('/images/sub/step-dots.svg') 50% 50%/contain no-repeat; z-index:1;}
.procedure-step .step:nth-child(4n):after {display:none;}
.procedure-step .step:last-child:after {display:none;}
.procedure-step .step .icon {margin:0 auto 18px; width:48px; height:48px;}
.procedure-step .step .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.procedure-step .step .num {margin-bottom:8px; font-size:var(--font-size-16); color:#454545; line-height:1em;}
.procedure-step .step .tit {margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:600; color:#121212; line-height:1.36em;}
.procedure-step .step .desc {font-size:var(--font-size-18); color:#505050; line-height:1.55em;}

.dubai-info {display:flex; gap:var(--space-60);}
.dubai-info .image {width:50%; max-width:653px;}
.dubai-info .image img {border-radius:var(--radius-16);}
.dubai-info .content {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; gap:var(--space-30);}
.dubai-info .item {flex:1; display:flex; flex-direction:column; gap:var(--space-16); padding:var(--space-24) var(--space-30); background:#fff; border:1px solid #ddd; border-radius:var(--radius-16);}
.dubai-info .item .tit {font-size:var(--font-size-18); line-height:1.4em; color:#505050; letter-spacing:-0.03em;}
.dubai-info .item .desc {font-size:var(--font-size-24); color:var(--color-primary); line-height:1.4em; letter-spacing:-0.02em;}


.dubai-condition {display:flex; gap:var(--space-40);}
.dubai-condition .item {flex:1; position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:center; border-radius:var(--radius-16); overflow:hidden; box-shadow:0 0 16px rgba(0,0,0,0.08);}
.dubai-condition .item .img {position:absolute; inset:0; margin:0;}
.dubai-condition .item .img img {width:100%; height:100%; object-fit:cover;}
.dubai-condition .item .cnt {position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-30); padding:var(--space-40); text-align:center; color:#fff;}
.dubai-condition .item .tit {font-size:var(--font-size-24); font-weight:700; line-height:1.3em;}
.dubai-condition .item .desc {font-size:var(--font-size-18); line-height:1.66em;}
.dubai-condition .item .desc strong {font-weight:600;}

.e2-condition {display:grid; grid-template-columns:repeat(3, 1fr); gap:40px var(--space-40);}
.e2-condition .item {display:flex; flex-direction:column; gap:var(--space-20);}
.e2-condition .item .img {aspect-ratio:44/28; border-radius:var(--radius-16); overflow:hidden;}
.e2-condition .item .img img {width:100%; height:100%; object-fit:cover;}
.e2-condition .item .txt .num {margin-bottom:var(--space-10); font-size:var(--font-size-16); font-weight:700; color:var(--color-primary); line-height:1.33em;}
.e2-condition .item .txt .tit {margin-bottom:var(--space-20); font-size:var(--font-size-20); font-weight:600; color:#121212; line-height:1.33em;}
.e2-condition .item .txt .desc {font-size:var(--font-size-16); color:#505050; line-height:1.5em;}

.e2-procedure {display:flex; flex-direction:column; gap:var(--space-80);}
.e2-procedure .step-block {display:flex; gap:var(--space-80); align-items:flex-start;}
.e2-procedure .step-block .img {flex-shrink:0; width:40%; max-width:450px;}
.e2-procedure .step-block .img img {border-radius:var(--radius-16);}
.e2-procedure .step-block .cnt {flex:1; min-width:0; padding-top:10px;}
.e2-procedure .step-block .head {display:flex; align-items:center; gap:var(--space-10); margin-bottom:var(--space-20);}
.e2-procedure .step-block .head .num {font-size:var(--font-size-24); font-weight:700; color:var(--color-primary);}
.e2-procedure .step-block .head .tit {font-size:var(--font-size-20); font-weight:600; color:#121212;}
.e2-procedure .step-block .line {display:block; width:100%; height:1px; background:#d9d9d9; margin-bottom:var(--space-30);}
.e2-procedure .step-block .list {margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-30);}
.e2-procedure .step-block .list li {display:flex; flex-direction:column; gap:var(--space-10);}
.e2-procedure .step-block .list .tit {margin:0; padding-left:1.5em; font-size:var(--font-size-16); font-weight:600; line-height:1.5em; color:#121212; position:relative;}
.e2-procedure .step-block .list .tit:before {content:''; position:absolute; left:0; top:0.2em; width:14px; height:14px; background:url('/images/sub/icon-check-2.svg') no-repeat 50% 50% / contain;}
.e2-procedure .step-block .list .desc {margin:0; font-size:var(--font-size-16); color:#505050; line-height:1.5em;}

/* 모달 */
.modal.modal-md {max-width:850px; padding:var(--space-50); border-radius:16px;}

.modal-container {position:relative; height:80vh; max-height:800px; overflow:auto; margin-right:-12px; padding-right:12px;}
.modal-container::-webkit-scrollbar {width:8px; height:8px; background:#eee; border-radius:4px;}
.modal-container::-webkit-scrollbar-thumb {background:#ccc; border-radius:4px;}

.modal-header {padding-bottom:var(--space-16); margin-bottom:var(--space-40); border-bottom:1px solid #121212;}
.modal-header h2 {font-size:var(--font-size-32); color:#121212; line-height:1.3em; letter-spacing:-0.03em;}

.seminar-title {display:flex; align-items:center; justify-content:space-between; gap:var(--space-20); margin-bottom:var(--space-15);}
.seminar-title h3 {display:flex; align-items:center; gap:10px; font-size:var(--font-size-24); color:#121212; line-height:1.2em; letter-spacing:-0.03em;}
.seminar-title h3:before {content:''; display:block; width:3px; height:var(--font-size-24); border-radius:3px; background:var(--color-primary);}

.seminar-table {margin-bottom:var(--space-30);}
.seminar-table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #035191;}
.seminar-table table th, 
.seminar-table table td {padding:var(--space-16) var(--space-20); border:1px solid #ddd; border-top:0; font-size:var(--font-size-16); line-height:1.5em;}
.seminar-table table th {background:#F9F9F9; color:#121212; font-weight:600; text-align:center;}
.seminar-table table td {color:#505050;}
.seminar-table table td strong {font-weight:600; color:#121212;}
.seminar-table tr th:first-child,
.seminar-table tr td:first-child {border-left:0;}
.seminar-table tr th:last-child,
.seminar-table tr td:last-child {border-right:0;}

.btn-booking {display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:4px; padding:var(--space-12) var(--space-20); background:var(--color-primary); color:#fff; font-size:14px; font-weight:700; line-height:1.2em; letter-spacing:-0.03em;}
.btn-booking:before {content:''; display:block; width:16px; height:16px; background:url('/images/sub/pancel.svg') no-repeat 50% 50% / contain;}
.btn-booking:hover {background:#dd2323;}

.booking-form {display:flex; flex-direction:column; gap:var(--space-40);}
.booking-form .form-wrap {display:flex; flex-direction:column; gap:var(--space-20);}
.booking-form .form-group {display:flex; align-items:center; gap:var(--space-20);}
.booking-form .form-group .label {flex:0 0 91px; font-size:var(--font-size-16); font-weight:600; color:#121212; letter-spacing:-0.03em; line-height:1.5em;}
.booking-form .form-group .label .required {background:#e7000b; display:inline-block; width:6px; height:6px; border-radius:50%; margin:-.2em 0 0 4px; vertical-align:middle;}
.booking-form .form-group .input {height:50px; padding:0 var(--space-16); border:1px solid #ddd; border-radius:var(--radius-4); font-size:var(--font-size-16); color:#121212; letter-spacing:-0.03em;}
.booking-form .form-group .input::placeholder {color:#878787;}
.booking-form .form-group .input.middle-width {width:250px; flex-shrink:0;}
.booking-form .form-group .input.full-width {flex:1; min-width:0;}
.booking-form .form-group textarea.input {flex:1; min-width:0; height:150px; padding:var(--space-16);}
.booking-form .form-group .captcha-wrap {display:flex; align-items:center; gap:10px; height:50px;}
.booking-form .form-group .captcha-wrap img {border-radius:var(--radius-4);}
.booking-form .form-group .captcha-wrap .input {width:180px; flex-shrink:0;}
.booking-form .form-agree {margin:0;}

.booking-form .form-submit {margin:0; text-align:center;}
.booking-form .form-submit .submit {display:inline-flex; align-items:center; justify-content:center; width:170px; height:56px; border:0; border-radius:var(--radius-4); background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:700; letter-spacing:-0.03em; cursor:pointer; transition:0.2s;}
.booking-form .form-submit .submit:hover {background:#dd2323;}