img{
    width: 100%;
}
.top-hero{
    display: none;
}
.subbanner{
    height: 500px;
}
.sample{
    width: 100%;   
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 서브 배경 */
.sub_visual{
	/* height: 340px; */
}
.sub_visual_bg {
    height: 340px;
    overflow: hidden;
    position: relative;
}
.sub_visual_bg img {
position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.sub_visual_bg:after{
    content: '';
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;
    background: rgba(0,0,0,0.5);
}

/* sub title */
.sub_title{
  text-align: left;
  padding: 10px 0;
  line-height: 1.3;
}
.sub_title .tit {
    line-height: 1;
    display: inline-block;
    font-family: 'noto-r';
    font-size:20px;
    position: relative;
    color: #222;
    letter-spacing: -0.5px;
}
/* header_top */
.subNav_wrap {
    width: 100%;
    background-color: #fff;
    position: absolute;
    height: 59px;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #ddd;
}
.subNav {
    width: 1100px;
    height: 59px;
    line-height: 59px;
    background: #fff;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    color: #333;
    font-family: 'noto-m';
    z-index: 1;
}
.subNav>li {
    float: left;
    width: 135px;
    text-align: center;
}
.subNav li a {
    display: block;
    border: 1px solid #ddd;
    border-top: 0;
}
.subNav .subNavHome {
    width: 59px;
    height: 59px;
    background: #fff url(/img/home.png) no-repeat;
    text-indent: -9999px;
    border-right: 0;
}
.subNav .subNavMenu {
    width: 250px;
    text-align: left;
    text-indent: 20px;
}
.subNavMenu>a {
    background: url(/images/sub/ar_snb.png) no-repeat right center;
}
.snb {
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.09);
}
.subNavMenu:hover .snb {
    max-height: 500px;
}

.sub_bg_txt h2{
	color:#fff;
}
.snb_area{
	margin-top:15px;
}
.snb_area ul li{
	display: inline-block;
	margin:0 10px;
}
.snb_area ul li a{
	color: #fff;
    opacity: 0.8;
}
.snb_area ul li.on{
	border-bottom:5px solid #263647;
}
.snb_area ul li.on a{
	color:#263647;
	opacity: 1;
	font-family: 'noto-b'
}
.navi-location{
	margin-top:40px;
}
.navi-location li{
	display: inline-block;
	margin-right: 10px;	
}

select{
    font-family: "Hakgyoansim Allimjang";
        border-radius: 999px;
    background: #fff;
    color: #333;padding: 3px 8px;
    border: 2px solid #d5eef0;
}
.po_center{margin-top: -20px;}


#sub_down{
    width:100%; 
  background-color: #eceef4;
    /* margin-top:-46px; */
    position: relative;
    z-index: 20;
    }
/*#sub_drop .inner{background:#767ba5;}*/
#sub_down .inner{border-top:1px solid #e6e6e6; border-color:rgba(255,255,255,0.3)}

#sub_down .inner:after{content:''; display:block; clear:both}
#sub_down .drop{width:calc(100% - 45px); float:left; position:relative;}
#sub_down .drop.home{width:45px; border:0; display:block;}
#sub_down .drop.home a{
    display: flex;
    align-items: center;
    justify-content: center; line-height:45px; height: 45px; padding:0 10px;   background:#263647; text-align:center}

#sub_down .home img{
    display:inline-block; vertical-align:middle; max-width:20px;filter: invert(1);}
#sub_down .dropbtn {
    width:100%; text-align:left; 
    display:inline-block; height:auto; 
    position:relative; line-height:45px; 
    padding:0 25px 0 20px; cursor:pointer; 
    color:#111;
background-color: #fff;}

#sub_down .drop.active a.dropbtn{background:#ffffff; color:#263647}

#sub_down .drop ul{}
#sub_down .drop ul li{padding:5px 20px; }
#sub_down .dropmenu {
    display: none;  
    position: absolute;  
    z-index: 5; background:#ffffff; 
    border:1px solid #e6e6e6;  
    color:#323232; text-align:left; 
    left:0; box-sizing:content-box; 
    left:-1px; width:100%;
}
#sub_down .dropmenu p{
    position: relative;
    z-index: 11;
        height: 60px;
 font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* justify-content: flex-start; */
}
#sub_down .dropmenu a{display:block; line-height:30px;}
#sub_down .dropmenu a:hover {color:#263647; }
#sub_down .drop > .dropmenu li{position:relative;}
#sub_down .drop > .dropmenu li a{display: block;position: relative;z-index: 10;}
#sub_down .drop.active > .dropmenu {display:block;}

#sub_down:after{display:block; content:''; clear:both;}

@media all and (min-width:1024px) {
#sub_down{position:fixed;z-index: 20;        top: 86px; }
#sub_down .inner{background:none; border:0px}
#sub_down .dropmenu{border:0px; background:none;  text-align:center; left:0; display:block !important}
#sub_down .drop.home{width:60px}
#sub_down .drop{display:block; width:calc(100% - 60px); float:left; }
#sub_down .drop.active a.dropbtn,
#sub_down .dropbtn.has-focus{background:#767ba5; border:0px;}

#sub_down .drop > .dropmenu li a.current{
   background-color: #e8e8e8;
   color:#263647;
     font-weight:600}
#sub_down .drop > .dropmenu li a:before{
    content:''; position:absolute; 
left:0%; width:0%; height:100%;  
    /* background:linear-gradient(-90deg, #6ff0ff 0% ,#6ff0ff 50%, #c5ff67  100%); transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1); */
    background-color: #e1e1e1;
    transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1)}
#sub_down .drop > .dropmenu li:hover a:before,
#sub_down .drop > .dropmenu li a.current:before{width:100%; margin-left:0;}

#sub_down .drop.home a{line-height:60px; height: 60px; width:100%;  padding:0 } 
#sub_down .dropbtn {line-height:50px; display:none}


#sub_down .dropmenu a{color:#263647; font-weight:500}
#sub_down .dropmenu a:hover{color:#263647;}
#sub_down .drop > .dropmenu li{display:block;position:relative; padding:0 ; float:left; width:25%;}
#sub_down .drop > .dropmenu li:before{content:''; display:block; width:1px; height:30px; background:#ffffff; opacity:0.2; position:absolute; left:0; top:0; bottom:0; margin:auto;}
#sub_down .drop > .dropmenu li:first-child:before{display:none}

#sub_down .drop > .dropmenu li a{line-height:60px;height: 60px; }
#sub_down .drop > .dropmenu.list07 li{width:13.666%}
#sub_down .drop > .dropmenu.list06 li{width:16.666%}
#sub_down .drop > .dropmenu.list05 li{width:20%}
#sub_down .drop > .dropmenu.list03 li{width:33.33%}
#sub_down .drop > .dropmenu.list02 li{width:50%}
#sub_down .drop > .dropmenu li a{display:block; margin-right:2px; 
      background-color: #eceef4;

}

#sub_down{
    width:100%; 
}
}


/* motion */
.motion{
    margin-top: 20px;
}
.path li {
    display: inline-block;
    vertical-align: top;
    color: #ffffff;
}
.path li:before {
    content: 'ㆍ';
    width: 10px; height: 10px;
    padding: 0px 14px;
}
.path li:first-child::before{display: none;}




.title {
    text-align: left;
    padding: 140px 0 40px;
}

.title .tit {
    line-height: 1;
    display: inline-block;
    position: relative;
    color: #222;
}

.title p {
    color: #555;
    padding: 15px 0;
}

.greeting {
      padding: 120px 0px 60px 0;
  color: #333;
}



.greeting-title {
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  padding-bottom: 54px;
  border-bottom:1px solid #ddd;
}

/* 서브 안에 있는 리스트 제목 */
.list-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}
.list-title2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 5px #ff6f91, 0 0 10px #ff6f91, 0 0 20px #ff9472;
}


.list-title3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2c3e50;          /* 딥 네이비 텍스트 */
  border-bottom: 2px solid #054570; /* 세련된 블루 라인 */
  display: inline-block;
  letter-spacing: -0.3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.list-title3:hover {
  color: #054570;          /* 조금 더 진한 블루로 */
  border-color: #3498db;   /* 포인트 블루 강조 */
}
.accordion-item{
    margin-bottom: 20px;
}

/* 포인트 컬러 밑줄 */
.list-title::before {
    content: "▶";
    color: #054570;
    margin-right: 3px;
    font-size: 1.2rem;
}


/* 비전 */
.gdc-table-remote{
    margin-top: 60px;

}
.gdc-table-remote.vision{
        margin: 0 auto;
    max-width: 700px;
    margin-top: 60px;
}
.gdc-table-remote.table{

}

/* 조직소개 */
  .table-wrapper {
      overflow-x: auto;
      background-color: #fff;
      padding: 10px;
    }

.table-wrapper th{
    font-weight: 400;
}
    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 800px;
    }

    th, td {
      padding: 12px 15px;
      text-align: center;
       font-family: 'Pretendard';
      border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    }
td{
    /* width: 33%; */
}
    th {
      background-color: #f8f8f8;
      color: #333;
      border-bottom: 1px solid #e0e0e0;
      border-top: 1px solid #e0e0e0;
    }

    tr:hover {
      /* background-color: #f1f1f1; */
    }
.working p{
    font-weight: 400;
    text-align: left;
       font-family: 'Pretendard';
}




.card-list {
  display: none;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  color: #333;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(255, 189, 189, 0.05);
}

.card strong {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  color: #333;
}

.card p {
  margin: 6px 0;
}

/* ci */

    .logo-intro {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-top: 20px;
    }

    .logo-intro img {
      width: 120px;
    }

    .description {
      font-size: 15px;
      line-height: 1.6;
    }

    .button-group {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }

    .button-group button {
      padding: 10px 20px;
      background-color: #005bac;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }

    .section-title {
      font-weight: bold;
      font-size: 18px;
      margin-top: 40px;
      margin-bottom: 10px;
      color: #004c99;
    }

    .logo-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    .logo-table th, .logo-table td {
      padding: 15px;
      text-align: center;
      border-bottom: 1px solid #e0e0e0;
      border-top: 1px solid #e0e0e0;
    }

    .logo-table th {
      background-color: #f1f1f1;
      color: #333;
      
    }

    .logo-table img,
    .symbol-color img {
        width: auto;
        height:150px;
    }
  .logo-table.row img {
        width: auto;
        height:54px;
    }


    /* 심볼 */
      .symbol-section {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 30px;justify-content: space-around;
    }

    .symbol-color {
      padding: 20px;
    
    }

    .symbol-color img {
      max-width: 100%;
      height: auto;
    }

    .symbol-grid {
    }

    .symbol-grid img {
        width: auto;
      max-width: 300px;
      background-image: linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px), 
                        linear-gradient(0deg, rgba(0,0,0,0.05) 1px, transparent 1px);
      background-size: 10px 10px;
      padding: 20px;
    }

    .download-buttons {
     margin-top: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    }

    .download-buttons a {
      padding: 10px 16px;
      text-decoration: none;
      font-size: 14px;
      border-radius: 4px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .btn-ai {
      background-color: #4a4a4a;
    }

    .btn-jpg {
      background-color: #4CAF50;
    }

    .download-buttons a svg {
      width: 16px;
      height: 16px;
      fill: white;transform: rotate(180deg);
    }

    /* 심볼 모바일 */
      /* 모바일 카드형 */
    .logo-cards {
      display: none;
    }

    .logo-card-group {
      margin-bottom: 30px;
    }

    .logo-card {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    .logo-card h3 {
      font-size: 15px;
      margin-bottom: 10px;
      color: #005bac;
      font-weight: 400;
    }

    .logo-card img {
      width: 100%;
      height: auto;
    }
    .logo-card .logo-table img{
        width: auto;
    height: 150px;
    }
    /* 반응형 전환 */

/* --------------------- */
/* 반응형 스타일 (모바일 전환) */
/* --------------------- */
/* 카드 레이아웃 */
.shuttle-card{
  margin-top: 40px;
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 38, 70, .06);
  overflow: hidden;
}

/* 좌하단 장식 원 (스샷 분위기) */
.shuttle-card::after{
  content:"";
  position:absolute;
  left:-140px; bottom:-140px;
  width:280px; height:280px;
  border-radius:50%;
  pointer-events:none;
}
.root_daum_roughmap .map_border{
        border: 0 !important;
}
.root_daum_roughmap .border4,
.root_daum_roughmap .border3{
    width: 0;
}
/* 아이콘 */
.shuttle-card__icon{
  flex: 0 0 80px;
  height: 80px;
  border-radius: 16px;
  background: #EEF6FF;
  display:flex; align-items:center; justify-content:center;
}
.shuttle-card__icon img{
    width: 33px;
}
/* 본문 */
.shuttle-card__body{ flex: 1; min-width: 0; }
.shuttle-card__title{
  margin: 2px 0 10px;
  font-size: 24px; line-height: 1.3; font-weight: 800; color:#222;
}

/* 노선 라인 */
.shuttle-card__route{
  display:flex; align-items:center; gap:8px;
  margin: 0 0 10px;
  font-size: 16px; font-weight: 600; color:#222;
}
.shuttle-card__route .dot{
  width:10px; height:10px; border-radius:50%; background:#005bac;
}
.shuttle-card__route .arrow{ margin: 0 6px; color:#4a4a4a; }

/* 설명 */
.shuttle-card__desc{
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.7; color:#4b5563;
}

/* 버튼 */
.btn-primary{
  display:inline-block;
  padding: 12px 18px;
  background:#005bac;
  color:#fff; text-decoration:none;
  border-radius: 10px;
  font-size: 15px; font-weight:400 !important;
  box-shadow: 0 4px 10px rgba(31,111,208,.2);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover{
  background:#005bac;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(31,111,208,.28);
}
.root_daum_roughmap{
    width: 92% !important;
    height: 500px;
    margin: 0 auto;
    padding-top: 80px;
}



/* 레이아웃 */
.drive-section{ margin: 24px 0; 
margin-bottom: 80px;}
.drive-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.drive-icon{
  width:52px; height:52px; border-radius:12px;
  background:#EEF6FF; display:flex; align-items:center; justify-content:center;
}
.drive-title{ margin:0; font-size:22px; font-weight:800; color:#111827; }

/* 리스트 */
.drive-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:14px; }
.drive-item__title{
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
  color:#1f2937; font-size:16px;
}
.drive-item__title .dot{
  width:10px; height:10px; border-radius:50%; background:#005bac; flex:0 0 auto;
}

/* 경로 라인 */
.route{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 12px; color:#4b5563; font-size:15px;
}
.route li{ position:relative; padding-right:18px; }
.route li:not(:last-child)::after{
  content:"➜"; position:absolute; right:0; top:0; color:#005bac; font-weight:700;
}

/* 카드 레이아웃 (icon + body) */
.shuttle-card{
  position: relative;
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding: 24px;
  margin-bottom: 20px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(16,38,70,.06);
}

/* 아이콘 박스 */
.shuttle-card__icon{
  flex:0 0 80px; height:80px;
  border-radius:16px; background:#EEF6FF;
  display:flex; align-items:center; justify-content:center;
}

/* ---- drive-section (네 구조 그대로) ---- */
.drive-section{ flex:1; min-width:0; }
.drive-header{ margin-bottom:6px; }
.drive-title{ margin:0; font-size:22px; font-weight:800; color:#111827; }

.drive-list{
  list-style:none; margin:10px 0 0; padding:0; display:grid; gap:14px;
}
.drive-item__title{
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
  color:#1f2937; font-size:16px;
}
.drive-item__title .dot{
  width:10px; height:10px; border-radius:50%; background:#005bac; flex:0 0 auto;
}

/* 경로(> 화살표) */
.route{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px 12px;
  color:#4b5563; font-size:15px; line-height:1.8;
}
.route li{ position:relative; padding-right:18px; }
.route li:not(:last-child)::after{
  content:"➜"; position:absolute; right:0; top:0; color:#005bac; font-weight:700;
}



/* 카드 프레임 (이미 있다면 생략해도 됨) */
.shuttle-card{
  position:relative; display:flex; gap:20px; align-items:flex-start;
  padding:24px; border-radius:14px; background:#fff;
  box-shadow:0 10px 24px rgba(16,38,70,.06);
}
.shuttle-card__icon{
  flex:0 0 80px; height:80px; border-radius:16px; background:#EEF6FF;
  display:flex; align-items:center; justify-content:center;
}

/* 버스 본문 */
.bus-body{ flex:1; min-width:0; }
.bus-head{ display:flex; align-items:center; gap:12px; }
.bus-title{ margin:0; font-size:22px; font-weight:800; color:#111827; }
.btn-buslink{
  margin-left:auto; padding:10px 14px; border-radius:10px;
  background:#005bac; color:#fff; text-decoration:none; font-weight:400; font-size:14px;
  box-shadow:0 4px 10px rgba(31,111,208,.2);
}
.btn-buslink:hover{ background:#005bac; }

/* 블록 */
.bus-blocks{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:18px; }
.bus-block__title{
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
  color:#1f2937; font-size:16px;
}
.bus-block__title .dot{
  width:10px; height:10px; border-radius:50%; background:#005bac; flex:0 0 auto;
}
.bus-block__detail{ color:#4b5563; font-size:15px; line-height:1.8; }
.bus-block__detail .bullet{ margin:0 0 6px; }
.bus-block__detail em{ font-style:normal; font-weight:700; color:#005bac; }

/* 반응형 */
@media (max-width: 720px){
  .shuttle-card{ padding:18px; gap:14px; }
  .shuttle-card__icon{ width:64px; height:64px; }
  .bus-title{ font-size:20px; }
  .btn-buslink{ margin-left:0; margin-top:6px; }
  .bus-head{ flex-wrap:wrap; }
  .bus-block__detail{ font-size:14px; }
}


/* 반응형 */
@media (max-width: 720px){
  .shuttle-card{ padding:18px; gap:14px; }
  .shuttle-card__icon{ width:64px; height:64px; }
  .drive-title{ font-size:20px; }
  .route{ font-size:14px; gap:8px 10px; }
}


/* 반응형 */
@media (max-width: 640px){
  .drive-title{ font-size:20px; }
  .route{ font-size:14px; gap:8px 10px; }
  .greeting {
    padding: 50px 0px 6px 0;
    color: #333;
    border-bottom: 1px solid #f1f1f1;
}
}



/* 반응형 */
@media (max-width: 768px){
  .shuttle-card{
    padding:20px;
    flex-direction: column;
  }
  .shuttle-card__icon{
    width:72px; height:72px;
  }
  .shuttle-card__title{ font-size: 20px; }
  .shuttle-card__desc{ font-size: 14px; }
}


.kmap-16x9{ position:relative; width:100%; }
.kmap-16x9::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
#kmap1{ position:absolute; inset:0; width:100%; height:100%; }

    @media (max-width: 1200px) {
      .logo-intro {
        align-items: flex-start;
      }

      .button-group {
        flex-direction: column;
        width: 100%;
      }

      .button-group button {
        width: 100%;
      }

      .logo-table th, .logo-table td {
        font-size: 13px;
        padding: 10px;
      }

        .symbol-section {
        /* flex-direction: column; */
  align-items: flex-start;
      }

      .symbol-grid img {
        max-width: 100%;
      }

    .logo-table {
        display: none;
      }

      .logo-cards {
        display: block;
      }
    .logo-card-group{
        display: grid;
        flex-wrap: wrap;
        gap: 10px;
        grid-template-columns:1fr 1fr;
    }

    }


@media (max-width: 950px){
    .gdc-table-remote.vision{
        max-width: 360px;
    }
    .working p{
    font-size: 0.85rem;
    }
    #sub_down .dropmenu p{
    justify-content: flex-start;

}

}



@media (max-width: 768px) {
  .table-wrapper {
    display: none;
  }

  .card-list {
    display: block;
  }

  table {
    min-width: 100%;
  }

  th, td {
    padding: 10px;
 }
 .symbol-grid img{
    height: 95px;
 }
 .symbol-color img{
    height: 55px;
 }
 #sub_down .dropmenu p{
    font-size: 1rem;
 }
}