@charset "utf-8";

/* 탭 버튼 스타일 */
.network-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 60px; }
.tab-btn { padding: 12px 40px; border: 1px solid #ddd; background: #fff; border-radius: 30px; font-size: 20px; font-weight: 600; color: #999; cursor: pointer; transition: all 0.3s ease; }
.tab-btn.active { border-color: var(--primary-color); color: var(--primary-color); }

/* 컨텐츠 레이아웃 */
.network-content { display: flex; align-items: center; justify-content: space-between;margin: 0 auto; }

/* 지도 영역 */
/* 지도 영역 - 수정 */
.map-area { flex: 1.2; position: relative; min-height: 400px; }
.dot-map { position: relative; width: 100%; height: 100%; }
.map-bg { width: 100%; opacity: 0.8; display: block; }

/* 지도 포인트 */
.map-point { position: absolute; cursor: pointer; z-index: 5; display: none; }
.map-point.korea { top: 50%; right: 30%; }
.map-point.china { top: 55%; right: 36%; }
.map-point.vietnam { top: 65%; right: 42%; }
.map-point .ping { display: block; width: 6px; height: 6px; background: #ccc; border-radius: 50%; transition: all 0.3s; }
.map-point.active { display: block; }
.map-point.active .ping { background: var(--primary-color); box-shadow: 0 0 0 8px rgba(198, 33, 40, 0.2); }
.map-point .label { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 700; color: #999; white-space: nowrap; transition: all 0.3s; padding-top: 70px; }
.map-point .label::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 70px; background-color: var(--primary-color); content: ''; }
.map-point.active .label { color: var(--primary-color); }

/* 정보 카드 */
.info-area { flex: 0.8; min-height: 500px; position: relative; }
.info-card { position: absolute; top: 0; left: 0; width: 100%; min-height:660px; background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.info-card.active { position: relative; opacity: 1; visibility: visible; }
.card-title { font-size: 30px; font-weight: 800; color: var(--primary-color); margin-bottom: 25px; }
.card-img { border-radius: 10px; overflow: hidden; margin-bottom: 30px; }
.detail-group { margin-bottom: 20px; }
.detail-group h4 { font-family:'Pretendard', sans-serif !important; font-size: 20px; font-weight: 700; color: #333; margin-bottom: 10px; }
.dot-list { list-style: none; padding: 0; }
.dot-list li { font-family:'Pretendard', sans-serif !important;position: relative; padding-left: 12px; font-size: 16px; color: #666; margin-bottom: 5px; }
.dot-list li::before { content: '·'; position: absolute; left: 0; font-weight: bold; }
.view-more { display: inline-block; width: 100%; padding: 15px; background: var(--primary-color); color: #fff; text-align: center; border-radius: 10px; font-size:20px;font-weight:400; margin-top: 20px; transition: background 0.3s; }
.view-more:hover { background: #a51b21; }

/* 반응형 */
@media (max-width: 1400px) {
    .global-network-page-wrap .container{padding:160px 5%;}
}

@media (max-width: 1024px) {
    .network-content { flex-direction: column; gap: 40px; }
    .map-area, .info-area { width: 100%; flex: none; }
    .info-area { min-height: auto; }
}

@media (max-width: 768px) {
    .global-network-page-wrap .container{padding:100px 5%;}
    .tab-btn { padding: 10px 20px; font-size: 14px; }
    .info-card { padding: 25px; }
    .map-area{min-height:auto;}
    .info-card{min-height: auto;}
}