.sub_bg_wrap {
    width: 100%;
    height: 560px;
    position: relative;
}

.sub_bg_wrap .sub_bg_area {
    width: 100%;
    height: 100%;
    position: relative;
}

.sub_bg_wrap .sub_bg_con {
    width: 100%;
    height: 100%;
    position: relative;
}

.sub_bg_wrap .sub_bg_size {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.sub_bg_wrap .sub_bg_size .sub_bg_ob {
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-animation: zoomani 6s ease-in-out 0s;
    -o-animation: zoomani 6s ease-in-out 0s;
    -moz-animation: zoomani 6s ease-in-out 0s;
    animation: zoomani 6s ease-in-out 0s;
}

.sub_bg_wrap .sub_bg_size .sub_bg_ob::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/bg_dim.png');
    background-position: center;
    background-repeat: repeat;
    -webkit-background-size: auto auto;
    background-size: auto;
    opacity: 0.3;
}

.sub_bg_wrap .sub_bg_size_01 .sub_bg_ob {
    background-image: url('/img/notice_sub_bg.png');
}

.sub_bg_wrap .sub_bg_size_02 .sub_bg_ob {
    background-image: url('/img/technology_sub_bg.png');
}

.sub_bg_wrap .sub_bg_size_03 .sub_bg_ob {
    background-image: url('/img/service_bg.png');
}

.sub_bg_wrap .sub_bg_size_04 .sub_bg_ob {
    background-image: url('/img/company_sub_bg.png');
}



.sub_bg_wrap .sub_bg_size .sub_title_box {
    width: 100%;
    height: auto;
    position: absolute;
    text-align: center;
    top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);

}

.sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob {
    width: auto;
    display: block;
    height: auto;
        padding: 0 10px;
}

.sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob > h2 {
    font-size: 3.125rem;
    font-weight: 500;
    color: #fff;
    display: inline-block;
    line-height: 3.2rem;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob > p {
    font-size: 1.625rem;
    font-weight: 100;
    letter-spacing: -1px;
    color: #fff;
}

@-webkit-keyframes zoomani {
    from {
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }

    to {
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-o-keyframes zoomani {
    from {
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }

    to {
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes zoomani {
    from {
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
        -moz-transform: scale(1.3);
        transform: scale(1.3);
    }

    to {
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes zoomani {
    from {
        -webkit-transform: scale(1.3);
        -o-transform: scale(1.3);
        -moz-transform: scale(1.3);
        transform: scale(1.3);
    }

    to {
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@media all and (max-width: 1281px) {
    .sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob > h2 {
        font-size: 2.5rem;
    }
    
    .sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob > p {
        font-size: 1.25rem;
    }
}

@media all and (max-width: 1025px) {
    .sub_bg_wrap {
        height: 400px;
    }

    .sub_bg_wrap .sub_bg_size .sub_title_box {
        top: 50%;
    }
}

@media all and (max-width: 801px) {
    .sub_bg_wrap {
        height: 290px;
    }
    
    .sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob > h2 {
        margin-bottom: 0;
    }
}

@media all and (max-width: 481px) {
    .sub_bg_wrap {
        height: 230px;
    }


    .sub_bg_wrap .sub_bg_size .sub_title_box > .sub_title_ob > h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
    
}

.footer {background:#333;}

 /* ✅ 전체 가운데 + max-width 1600 */
    .wrap{
      max-width:1600px;
      margin:150px auto 150px;
      padding: 0 24px;
    }

    /* 상단 여백(캡처처럼 넉넉하게) */
    .page-hero{
      height: 260px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    .page-hero::before{
      content:"";
      position:absolute;
      top: 40px;
      width:1px;
      height:60px;
      background:#e6e6e6;
    }
    .page-title{
      font-size: 40px;
      font-weight: 700;
      margin-top: 60px;
    }

    /* ✅ 리스트 상단 정보 */
    .list-top{
      display:flex;
      justify-content:flex-start;
      align-items:center;
      font-size:12px;
      color:#8a8a8a;
      margin: 6px 0 6px;
    }

    /* ✅ 테이블 스타일 */
    .notice-table{
      width:100%;
      border-collapse: collapse;
      table-layout: fixed;
      border-top: 2px solid #2F80ED; /* 파란 라인 */
    }
    .notice-table thead th{
      font-size:20px;
      font-weight:600;
      color:#111;
      padding: 10px 12px;
      border-bottom: 1px solid #e7e7e7;
      background:#fff;
    }
    .notice-table tbody td{
      font-size:20px;
      color:#444;
      padding: 10px 12px;
      border-bottom: 1px solid #efefef;
      vertical-align: middle;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
          text-align: center;
    }
    .notice-table tbody tr:nth-child(even){
      background:#f3f3f3;
    }

    .notice-table tbody tr:hover {background:#0A0C35;}
    .notice-table tbody tr:hover > td {
  color:#fff !important;
}
    .notice-table tbody tr:hover > td a{
  color:#fff !important;
}

    /* 열 너비(캡처 비율 비슷하게) */
    .col-no{ width: 70px; text-align:left; }
    .col-title{ width: auto; text-align:center; }
    .col-writer{ width: 120px; text-align:center; }
    .col-views{ width: 90px; text-align:center; }
    .col-date{ width: 90px; text-align:center; }

    /* 제목 링크 */
    .title-link{
      display:inline-block;
      max-width:100%;
      color:#444;
    }

    /* ✅ 모바일에서 보일 메타(글쓴이/조회/날짜) */
    .m-meta{
      display:none;
      margin-top:6px;
      font-size:11px;
      color:#9a9a9a;
      text-align:center;
      white-space: normal;
    }
    .m-meta span{ margin:0 8px; }
    .m-meta span::before{
      content:"";
      display:inline-block;
      width:1px;
      height:10px;
      background:#d9d9d9;
      margin-right:8px;
      vertical-align:-1px;
    }
    .m-meta span:first-child::before{ display:none; }

    /* ✅ 페이지네이션 */
    .pagination{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
      padding: 22px 0 28px;
      user-select:none;
    }
    .pg{
      width:26px;
      height:26px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
      color:#666;
      border:1px solid transparent;
    }
    .pg:hover{ border-color:#e6e6e6; }
    .pg.active{
      background:#2f66ff;
      color:#fff;
    }
    .pg.icon{
      border:1px solid #eee;
      color:#777;
    }

    /* ✅ 반응형: 999 이하부터 촘촘하게 */
    @media (max-width: 999px){
      .wrap{ padding: 0 18px; }
      .page-hero{ height: 220px; }
      .page-title{ font-size: 22px; }
      .notice-table thead th {font-size:17px;}
      .notice-table tbody td {font-size:16px;}
    }

    /* ✅ 768 이하: 글쓴이/조회/날짜 컬럼 숨기고 제목 아래 메타로 */
    @media (max-width: 768px){

      .notice-table tbody td{
        white-space: normal; /* 모바일에서 제목 줄바꿈 허용 */
      }
      .col-title{ text-align:left; }
      .m-meta{ display:block; text-align:left; }
      .col-no{ width:56px; }
    }

    /* ✅ 480 이하: 글씨/패딩 더 줄이기 */
    @media (max-width: 480px){
      .wrap{ padding: 0 12px; }
      .page-hero{ height: 190px; }
      .page-title{ font-size: 20px; }
      .notice-table thead th,
      .notice-table tbody td{
        padding: 9px 8px;
        font-size:11px;
      }
      .pg{ width:24px; height:24px; font-size:11px; }
    }

    /* ✅ 280까지도 깨지지 않게 */
    @media (max-width: 320px){
      .notice-table{ font-size:10px; }
      .pg{ width:22px; height:22px; }
    }


    .footer p:last-child { margin-bottom:0; padding-bottom:20px;}
body { margin:0; }


.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width: 768px){
  .notice-table{
    min-width: 720px;   /* 필요하면 640~900 사이로 조절 */
  }
}




.sub-nav-wrap{
  background:#fff;
  border-bottom:1px solid #e5e5e5;
}

.sub-nav{
  max-width:1600px;
  margin:0 auto;
  height:64px;                 /* ✅ 캡처처럼 높이 */
  display:flex;
  align-items:stretch;          /* ✅ 세로선 꽉 차게 핵심 */
  border-top:1px solid #e5e5e5; /* (선택) 위 라인 */
}

/* ✅ 각 칸(셀) */
.nav-item{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 22px;
  border-right:1px solid #d9d9d9;  /* ✅ 회색선이 “칸” 높이만큼 꽉 참 */
  box-sizing:border-box;
}


/* 홈 */
.nav-home{
  width:72px;
  justify-content:center;
  text-decoration:none;
  color:#666;
  font-size:26px;
}

/* 버튼 */
.nav-btn{
  display:flex;
  align-items:center;
  gap:15px;
  border:0;
  background:transparent;
  padding:0;
  font-size:20px;        /* ✅ 캡처처럼 큼 */
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
}

.nav-btn.active{ font-weight:800; }

.arrow{
  font-size:14px;
  color:#d9d9d9;
}

/* 드롭다운 */
.nav-select{ cursor:pointer; }
.nav-dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:100%;
  background:#fff;
  border:1px solid #ddd;
  z-index:50;
}

.nav-dropdown a{
  display:block;
  padding:10px 12px;
  color:#333;
  text-decoration:none;
  font-size:14px;
}

.nav-dropdown a:hover,
.nav-dropdown a.active{
  background:#0A0C35;
  color:#fff;
}

.nav-select.open .nav-dropdown{ display:block; }

/* ✅ 반응형 (999~280 자연스럽게) */
@media (max-width:999px){
  .sub-nav{ height:56px; }
  .nav-btn{ font-size:22px; }
  .nav-item{ padding:0 16px; }
  .nav-home{ width:60px; font-size:22px; }
}

@media (max-width:480px){
  .sub-nav{ height:52px; }
  .nav-btn{ font-size:18px; gap:8px; }
  .nav-item{ padding:0 12px; }
  .nav-home{ width:54px; font-size:20px; }
}

@media (max-width:320px){
  .sub-nav{ height:48px; }
  .nav-btn{ font-size:15px; gap:6px; }
  .nav-item{ padding:0 10px; }
  .nav-home{ width:48px; font-size:18px; }
  .arrow{ font-size:12px; }
}

@media (max-width:280px){
  .nav-btn{ font-size:14px; }
  .nav-item{ padding:0 8px; }
}


/* ===== Notice View ===== */
.notice-view-wrap{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

.notice-view{
  background:#fff;
}

.nv-head{
  padding: 18px 0 14px;
  border-bottom: 1px solid #eaeaea;
}

.nv-title{
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px;
  word-break: keep-all;
}

.nv-meta-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}

.nv-meta-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.nv-avatar{
  width: 22px;
  height: 22px;
  display:inline-block;
  position: relative;
  flex: 0 0 auto;
}
.nv-avatar::before{
  content:"";
  position:absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background:#cfcfcf;
  left:50%; top:32%;
  transform: translate(-50%, -50%);
}
.nv-avatar::after{
  content:"";
  position:absolute;
  width: 12px; height: 7px;
  border-radius: 10px 10px 0 0;
  background:#cfcfcf;
  left:50%; top:70%;
  transform: translate(-50%, -50%);
}

.nv-meta{
  min-width:0;
}
.nv-writer{
  font-size: 13px;
  font-weight: 600;
  color:#222;
  line-height: 1.2;
  margin-bottom: 2px;
}
.nv-meta-line{
  font-size: 12px;
  color:#8a8a8a;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items:center;
}
.nv-dot{ color:#bdbdbd; }

.nv-more{
  width: 26px;
  height: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex: 0 0 auto;
}
.nv-more span{
  width: 3px; height: 3px;
  background:#1c1c1c;
  border-radius: 50%;
  display:block;
}
.nv-more span + span{ margin-top: 3px; }

.nv-body{
  padding: 18px 0 22px;
  font-size: clamp(13px, 1.5vw, 15px);
  color:#333;
  line-height: 1.7;
  min-height: 260px; /* 캡처처럼 넉넉한 본문 영역 */
}
.nv-body p{ margin: 0 0 10px; }
/* ===== 캡처 하단(다음글 + 댓글) ===== */
.nv-bottom{
  border-top: 1px solid #eaeaea;
}

/* 다음글 한 줄 */
.nv-next{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  text-decoration:none;
  color:#222;
  border-bottom: 1px solid #ededed;
  min-width: 0;
  margin-bottom: 50px;
}

.nv-next-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.nv-next-arrow{
  width: 12px;
  height: 12px;
  display:inline-block;
  border-right: 2px solid #747272;
  border-bottom: 2px solid #747272;
  transform: rotate(45deg); /* 캡처처럼 내려가는 V 느낌 */
  margin-top: -9px;
}

.nv-next-label{
  font-size: 16px;
  color:#8f8f8f;
  flex: 0 0 auto;
}

.nv-next-title{
  font-size: 13px;
  color:#333;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.nv-next-date{
  font-size: 12px;
  color:#9a9a9a;
  flex: 0 0 auto;
}

/* 댓글 헤더(왼쪽 댓글 0 / 오른쪽 아래화살표) */
.nv-cmt-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ededed;
  cursor: pointer;
}



/* 파란 underline: '댓글 0' 영역 폭만큼 */
.nv-cmt-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;                 /* 회색선 위에 딱 겹치게 */
  width: fit-content;
  height: 2px;
  background:#1D599D;
}

/* fit-content가 width로 바로 안 먹는 브라우저 대비: left영역 기준으로 계산 */
.nv-cmt-left{
  position: relative;
}

/* 실제 파란 라인은 nv-cmt-left 기준으로 그리기(가장 안정적) */
.nv-cmt-left::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;                /* nv-cmt-head padding(12px) 기준 */
  width: 100%;
  height: 2px;
  background:#1D599D;
}


.nv-cmt-left{
  display:flex;
  align-items:center;
  gap: 6px;
}

.nv-cmt-label{
  font-size: 16px;
  color:#222;
  font-weight:600;
}

.nv-cmt-count{
  font-size: 13px;
  color:#1771D8;
  font-weight: 700;
}

/* 오른쪽 chevron (캡처처럼 아래방향) */
.nv-cmt-chevron{
  width: 10px;
  height: 10px;
  display:inline-block;
  border-right: 2px solid #747272;
  border-bottom: 2px solid #747272;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* 댓글 내용(빈 상태) */
.nv-cmt-body{
  min-height: 140px;              /* 캡처처럼 넓게 */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 0;
}

.nv-cmt-empty{
  font-size: 12px;
  color:#9a9a9a;
}

/* ===== 반응형 (280까지) ===== */
@media (max-width: 480px){
  .nv-next{ padding: 10px 0; }
  .nv-cmt-head{ padding: 10px 0; }
  .nv-next-title{ font-size: 12px; }
}

@media (max-width: 320px){
  .nv-next-left{ gap: 8px; }
  .nv-next-date{ font-size: 11px; }
  .nv-next-label{ font-size: 11px; }
  .nv-cmt-label, .nv-cmt-count{ font-size: 12px; }
  .nv-cmt-body{ min-height: 120px; }
}

@media (max-width: 280px){
  .nv-next-left{ gap: 6px; }
  .nv-next-title{ font-size: 11px; }
  .nv-cmt-label, .nv-cmt-count{ font-size: 11px; }
  .nv-cmt-empty{ font-size: 11px; }
}


/* ===== 댓글 영역 ===== */
.cmt-wrap{
  width:100%;
  background:#fff;
}

/* 헤더 */
.cmt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #ededed;
  position:relative;
}
.cmt-head-left{
  font-size:14px;
  color:#111;
  font-weight:600;
  position:relative;
  padding-bottom:8px; /* 파란 underline 공간 */
}
.cmt-count{ color:#1D599D; font-weight:700; }

/* 파란 underline: "댓글 3" 폭만큼 */
.cmt-head-left::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;          /* cmt-head padding과 맞춤 */
  width:100%;
  height:2px;
  background:#1D599D;
}

/* 접기 버튼(우측 화살표) */
.cmt-fold{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px;
  line-height:1;
}
.cmt-fold-icon{
  font-size:16px;
  color:#777;
}

/* 리스트 */
.cmt-list{
  list-style:none;
  margin:0;
  padding:0;
}
.cmt-item{
  padding:14px 14px 12px;
  border-bottom:1px solid #f0f0f0;
}

/* 상단 메타(프로필/이름/시간/더보기) */
.cmt-meta{
  display:flex;
  align-items:center;
  gap:10px;
}
.cmt-user{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.cmt-avatar{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:block;
}
.cmt-name{
  font-size:12.5px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:22vw;
}

/* 시간 */
.cmt-time{
  display:flex;
  align-items:center;
  gap:6px;
  color:#777;
  font-size:11.5px;
  white-space:nowrap;
}
.cmt-clock{
  width:14px;
  height:14px;
  display:block;
}

/* 우측 메뉴 */
.cmt-more{
  margin-left:auto;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px;
  flex:0 0 auto;
}
.cmt-more img{
  width:16px;
  height:16px;
  display:block;
}

/* 내용 */
.cmt-text{
  margin:8px 0 0 30px; /* 프로필 아이콘 라인에 맞춰 들여쓰기 */
  font-size:12.5px;
  color:#333;
  line-height:1.5;
  word-break:break-word;
}

/* 입력영역 */
.cmt-form{
  margin-top:50px;
}
.cmt-input{
  width:100%;
  box-sizing:border-box;
  min-height:110px;
  resize:none;
  border:1px solid #e5e5e5;
  border-radius:3px;
  padding:14px 12px;
  font-size:12.5px;
  outline:none;
}
.cmt-input:valid {
    border-color:#DADADA;
}


.cmt-input::placeholder{ color:#9b9b9b; }

.cmt-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:12px;
  margin-left:auto;
  width:92px;
  height:36px;
  border:none;
  border-radius:4px;
  background:#d9d9d9;
  color:#666;
  font-size:12px;
  cursor:pointer;
  float:right;
}

.cmt-submit:hover {background:#2589E5; color:#fff;}

/* clearfix */
.cmt-form::after{ content:""; display:block; clear:both; }

/* ===== 반응형 ===== */
@media (max-width: 640px){
  .cmt-head{ padding:10px 12px; }
  .cmt-item{ padding:12px; }
  .cmt-text{ margin-left:28px; }
  .cmt-name{ max-width:34vw; }
}

@media (max-width: 360px){
  .cmt-head-left{ font-size:13px; }
  .cmt-name{ max-width:40vw; }
  .cmt-time{ font-size:11px; }
  .cmt-text{ font-size:12px; }
  .cmt-submit{ width:84px; height:34px; }
}

@media (max-width: 280px){
  .cmt-meta{ gap:6px; }
  .cmt-avatar{ width:20px; height:20px; flex-basis:20px; }
  .cmt-clock{ width:12px; height:12px; }
  .cmt-name{ max-width:38vw; font-size:12px; }
  .cmt-time{ font-size:10px; }
  .cmt-text{ margin-left:24px; font-size:11.5px; }
  .cmt-submit{ width:76px; height:32px; font-size:11px; }
}


.write-wrap{ width:100%; background:#fff; }
.write-form{background:#fff; }


/* 제목 */
.wf-input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #f0b3b3;
  outline:none;
  height:40px;
  padding:0 12px;
  font-size:12px;
  border-radius:5px;
}
.wf-input:valid { border-color:#DADADA; }
.wf-input::placeholder{ color:#bdbdbd; }

/* 내용 */
.wf-textarea{
  width:100%;
  box-sizing:border-box;
  border:none;
  outline:none;
  min-height:320px;
  padding:12px;
  font-size:12px;
  resize:none;
  border:1px solid #DADADA;
   border-radius:5px;
   
  margin-top:10px;
}
.wf-textarea::placeholder{ color:#bdbdbd; }
.wf-textarea:valid { border-color:#DADADA; }

/* ✅ 공통: "아이콘 + 입력칸" 한 줄 */
.wf-line{
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid #ededed;
  border-radius:5px;
  
  margin-top:10px;
}
.wf-ico{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wf-ico img{
  display:block;
  width:16px;
  height:16px;
}

/* 링크 인풋(캡처처럼 줄 전체를 차지) */
.wf-line-input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  outline:none;
  font-size:12px;
  color:#333;
}
.wf-line-input::placeholder{ color:#bdbdbd; }

/* ✅ 파일 줄(캡처처럼 "파일 선택" + "선택된 파일 없음") */
.wf-fileline{
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid #ededed;
  border-radius:5px;
  margin-top:10px;
}

/* 실제 file input 숨김 */
.wf-file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* 파일 선택(텍스트 형태) */
.wf-file-btn{
  flex:0 0 auto;
  font-size:12px;
  color:#111;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  background:#F0F0F0;
  border:1px solid #626262;
  padding:0 10px;
  border-radius:2px;
}

/* 파일명 */
.wf-file-name{
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  color:#666;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 버튼 */
.wf-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 0px 0 0;
}
.wf-btn{
  border:none;
  border-radius:6px;
  height:42px;
  padding:0 22px;
  font-size:13px;
  cursor:pointer;
}
.wf-cancel{ background:#616161; color:#fff; }
.wf-submit{ background:#1E6BFF; color:#fff; }

/* 반응형 */
@media (max-width: 480px){
  .wf-textarea{ min-height:260px; }
  .wf-actions{ padding:12px; gap:8px; }
  .wf-btn{ height:40px; padding:0 18px; font-size:12px; }
}

@media (max-width: 320px){
  .wf-input{ height:38px; padding:0 10px; }
  .wf-line{ height:42px; padding:0 10px; gap:8px; }
  .wf-fileline{ height:50px; padding:0 10px; gap:8px; }
  .wf-file-btn{ font-size:11px; }
  .wf-file-name{ font-size:11px; }
  .wf-line-input{ font-size:11px; }
}

/* 280px: 버튼 세로 */
@media (max-width: 280px){
  .wf-actions{ flex-direction:column; align-items:stretch; }
  .wf-btn{ width:100%; padding:0 12px; }
}


/* 첨부파일 전체 */

/* 한 줄 */
.attach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}

/* 파일 정보 */
.attach-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.attach-label {
  color: #555;
  white-space: nowrap;
}

/* ✅ 파일명(아이콘+텍스트) */
.attach-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;              /* ellipsis 필수 */
  max-width: 260px;
}

.attach-fileicon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ✅ 실제 파일명만 ... 처리 */
.attach-filename {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #222;
}

/* 다운로드 버튼 */
.attach-download {
  font-size: 11px;
  color: #fff;
  background: #1166AC;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 우측 메타 */
.attach-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #777;
  white-space: nowrap;
  flex: 0 0 auto;
}

.attach-meta img {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 2px;
}

/* ================= 반응형 ================= */

/* 768px 이하 */
@media (max-width: 768px) {
  .attach-name { max-width: 180px; }
}

/* 480px 이하: 우측 메타는 다음 줄로 */
@media (max-width: 480px) {
  .attach-item {
    flex-wrap: wrap;
    gap: 6px;
  }
  .attach-meta {
    width: 100%;
    justify-content: flex-end;
    font-size: 11px;
  }
}

/* 320px 이하 */
@media (max-width: 320px) {
  .attach-name { max-width: 140px; }
  .attach-download { padding: 2px 4px; font-size: 10px; }
}

/* ✅ 280px 이하: 전부 자연스럽게 줄바꿈 */
@media (max-width: 280px) {
  .attach-info {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .attach-label { width: 100%; }     /* 라벨 먼저 한줄 */
  .attach-name { max-width: 100%; }  /* 파일명은 전체폭 */
  .attach-download { margin-left: 0; }

  .attach-meta {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
}


.wf-fileline{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  height:52px;
  border-bottom:1px solid #ededed;
  overflow:hidden;
}

.wf-filetype{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

/* 기본은 숨김 */
.wf-filetype-icon{
  width:14px;
  height:14px;
  display:none; /* ✅ 초기 숨김 */
}
.wf-filetype-icon.is-on{
  display:block; /* ✅ 파일 선택 시 노출 */
}

/* 파일명은 줄임표 */
.wf-file-name{
  min-width:0;
  flex:1 1 auto;
  font-size:12px;
  color:#666;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 280까지 자연스럽게 */
@media (max-width: 280px){
  .wf-fileline{ gap:6px; padding:0 10px; }
  .wf-filetype-icon{ width:12px; height:12px; }
  .wf-file-name{ font-size:11px; }
}



/* ===== Contact Section (SUB PAGE) ===== */
.csq-contact{
  width:100%;
  color:#fff;
  overflow:hidden;
  position:relative;

  /* ✅ 섹션 전체(=wrap 밖) 배경: 그라데이션 + 효과 + 이미지 */
  background:
    url("/img/contactus_bg.png") no-repeat right center;

  background-size: cover;
  background-color:#050b2e;
  height: 620px;
}

/* ✅ 내용만 1600으로 잡는 역할(컨텐츠 제한) */
.csq-contact__inner{
  max-width:1600px;
  margin:0 auto;
  padding:24px 16px;
  box-sizing:border-box;
}

/* 패널(전체 카드 느낌) */
.csq-contact__panel{
  position:relative;
  width:100%;
  border-radius:10px;
  overflow:hidden;


  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 430px;
}

/* 왼쪽 폼 영역 */
.csq-contact__formArea{
  padding:22px 22px 18px;
  box-sizing:border-box;
}

/* 오른쪽 비주얼(원래 이미지 자리) - 배경은 섹션에 있으니 투명 */
.csq-contact__visual{
  position:relative;
  background: transparent;
  min-height: 798px;
}

/* ===== 라디오 ===== */
.csq-form__type{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.csq-type{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:rgba(255,255,255,.9);
  cursor:pointer;
  user-select:none;
}

.csq-type input{
  appearance:none;
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.85);
  position:relative;
  margin:0;
  flex:0 0 auto;
}

.csq-type input:checked{ border-color:#0A7AFF; }
.csq-type input:checked::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:#0A7AFF;
}

/* ===== 입력 그리드 ===== */
.csq-form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.csq-field{
  position:relative;
  border:1px solid rgba(120,125,165,.55);
  border-radius:6px;
  background: rgba(0,0,0,0.08);
  box-sizing:border-box;
}

.csq-field--full{ grid-column: 1 / -1; }

.csq-field__label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:#fff;
  pointer-events:none;
  white-space:nowrap;
}
.csq-field--textarea .csq-field__label{
  top:18px;
  transform:none;
}

.csq-field__label b{
  color:#134EA5;
  font-weight:800;
}

.csq-field input,
.csq-field textarea{
  width:100%;
  box-sizing:border-box;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:13px;
  padding:14px 14px 14px 96px;
}

.csq-field textarea{
  resize:none;
  min-height:120px;
  padding-top:16px;
  line-height:1.6;
}

.csq-field input::placeholder,
.csq-field textarea::placeholder{
  color:rgba(170,175,205,.55);
}

.csq-field:focus-within{
  border-color: #0075FF;
  box-shadow: 0px 0px 50px 7px rgba(24,122,254,0.5);
} 

/* ===== 하단 동의/내용보기 ===== */
.csq-form__bottom{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.csq-agree{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:rgba(255,255,255,.78);
}

.csq-agree__chk{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  display:inline-grid;
  place-content:center;
  cursor:pointer;
  margin:0;
}

.csq-agree__chk:input:valid {border-color:#fff !important;}

.csq-agree__chk:invalid{ border-color:#fff; }

.csq-agree__chk:checked{
  background:#134EA5;
  border-color:#134EA5;
}
.csq-agree__chk:checked::after{
  content:"";
  width:6px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-1px;
}

.csq-btnView{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;
  color:rgba(255,255,255,.86);
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
}
.csq-btnView__ico{
  width:14px;
  height:14px;
  display:block;
}

/* ===== 문의하기 버튼 ===== */
.csq-form__submit{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.csq-btnSubmit{
  min-width:220px;
  padding:12px 18px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background:#2d63ff;
  color:#fff;
  font-weight:700;
  font-size:14px;
  box-shadow:0 12px 28px rgba(45,99,255,.28);
}

/* ===== Responsive ===== */
@media (max-width: 999px){
  .csq-contact__panel{ grid-template-columns: 1fr; }
  .csq-contact__visual{ min-height:240px; }
  .csq-form__grid{ grid-template-columns: 1fr; }

  /* ✅ 핵심: 모바일에선 높이 고정 풀고, 배경을 아래로 깔기 */
  .csq-contact{
    height:auto;                 /* ✅ 고정 높이 해제 */
    min-height:620px;            /* ✅ 기본 높이는 유지 */
    padding-bottom:260px;        /* ✅ 배경이 아래에 보일 공간 확보 */

    background-repeat:no-repeat;
    background-position:center bottom; /* ✅ 아래로 */
    background-size:auto 36%;          /* ✅ cover 금지(잘림 방지) */
  }
}

@media (max-width: 480px){
  .csq-contact__formArea{ padding:18px 14px 16px; }
  .csq-field input,
  .csq-field textarea{ padding-left:86px; }
  .csq-field__label{ left:12px; font-size:14px; }

  .csq-contact{
            padding-bottom: 0px;
        background-position: center bottom;
        background-size: auto 24%;
  }
}

@media (max-width: 320px){
  .csq-btnSubmit{ min-width:100%; }
  .csq-form__submit{ justify-content:stretch; }
  .csq-btnView{ padding:7px 10px; }
  .csq-field input,
  .csq-field textarea{ padding-left:78px; }

  .csq-contact{
    background-position:center bottom;
    background-size:auto 15%;
  }
}

@media (max-width: 280px){
  .csq-contact__inner{ padding:18px 10px; }
  .csq-type{ font-size:12px; }
  .csq-field__label{ font-size:13px; left:10px; }
  .csq-field input,
  .csq-field textarea{
    padding-left:72px;
    padding-right:10px;
    font-size:12px;
  }
  .csq-btnView,
  .csq-btnSubmit{
    width:100%;
    justify-content:center;
  }

  .csq-contact{
    background-position:center bottom;
    background-size:auto 14%;
  }
      .csq-contact__visual {
        min-height: 150px;
    }
}

/* 주요기술1 */
:root{
  --blue:#1e6bff;
  --text:#222;
  --muted:#666;
  --border:#e5e7eb;
}

.section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  margin-bottom:16px;
}
.section-title img.icon{
  width:20px;
  height:20px;
}

/* 🔹 핵심특징 블록 */
.feature-block{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap; /* 280px 대응 */
}
.feature-image{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.feature-block span{
  font-size:18px;
  font-weight:700;
}

/* 🔹 리스트 (커스텀 불릿) */
.list{
  list-style:none;
  padding-left:0;
  margin:0 0 48px;
}
.list li{
  position:relative;
  padding-left:40px;
  margin:8px 0;
  line-height:1.6;
  color:var(--muted);
}
.list li::before{
  content:"";
  position:absolute;
  left:27px;
  top:0.6em;
  width:6px;      /* ← 불릿 크기 */
  height:6px;     /* ← 불릿 크기 */
  background:#000;
  border-radius:50%;
}

/* 카드 */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:56px;
}
.card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.card-body{
  padding:20px;
}
.card-title{
  font-weight:700;
  margin-bottom:10px;
}
.card-body ul{
  list-style:none;
  padding-left:0;
  margin:0;
}
.card-body li{
  position:relative;
  padding-left:16px;
  font-size:14px;
  color:var(--muted);
  margin:6px 0;
}
.card-body li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;
  width:5px;
  height:5px;
  background:#999;
  border-radius:50%;
}

.divider{
  height:1px;
  background:var(--border);
  margin:30px 0;
}

.list-style01 > li {padding-left:27px;}
.list-style01 > li:before {display:none !important;}

/* 반응형 */
@media (max-width:999px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .card-grid{grid-template-columns:1fr;}
  .section-title{font-size:20px;}
  .feature-block span{font-size:16px;}
}
/* 🔧 375px 이하 section-title 안정화 (아이콘 고정 + 텍스트 줄내림) */
@media (max-width:375px){
  .section-title{
            align-items: flex-start !important;
  }

  .section-title img.icon{
    flex:0 0 20px;          /* 아이콘 크기 고정 */
            margin-top: 6px;
  }


  .section-title{
    gap:8px;
  }

  .section-title > *:not(img){
    flex:1;
    min-width:0;           /* ⭐ 줄바꿈 핵심 */
    word-break:keep-all;
  }
}

/* 주요기술2 */
.section_content {}
.section_content > p {margin-bottom:16px; padding-left:29px;}
.section-title .icon{ flex:0 0 auto; }
/* 기본 */
.section-title{
  display:flex;
  align-items:center;   /* ✅ 아이콘을 항상 위 기준으로 */
  gap:10px;
  font-size:22px;
  font-weight:700;
  margin-bottom:16px;
}

.section-title .icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-top:0px;           /* 필요하면 미세 조정 */
}

.section-title > span{
  flex:1 1 auto;            /* 텍스트만 유연하게 */
  min-width:0;
  line-height:1.35;         /* 여러 줄일 때 자연스럽게 */
  word-break:keep-all;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.process-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 28px;
  background:#fff;
}

.process-icon{
  width:80px;
  height:80px;
  margin-bottom:20px;
}

.process-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}

.process-list{
  list-style:none;
  padding:0;
  margin:0;
}

.process-list li{
  position:relative;
  padding-left:14px;
  margin:6px 0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.process-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;
  width:4px;
  height:4px;
  background:#999;
  border-radius:50%;
}

/* 반응형 */
@media (max-width:999px){
  .process-grid{grid-template-columns:repeat(2,1fr);}  
}
@media (max-width:600px){
  .process-grid{grid-template-columns:1fr;}  
  .process-card{padding:24px 20px;}
}


/* 주요 서비스 */

.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.info-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px 24px;
  background:#fff;
}

.info-title{
  position:relative;
  font-size:16px;
  font-weight:700;
  margin-bottom:14px;
  padding-top:20px; /* 사각형 공간 */
}
.info-title::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:48px;
  height:6px;
  background:#4675CE;
}

.info-list{
  list-style:none;
  padding:0;
  margin:0;
}

.info-list li{
  position:relative;
  padding-left:14px;
  margin:8px 0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

.info-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;
  width:4px;
  height:4px;
  background:#999;
  border-radius:50%;
}

/* 반응형 */
@media (max-width:999px){
  .info-grid{grid-template-columns:repeat(2,1fr);}  
}
@media (max-width:600px){
  .info-grid{grid-template-columns:1fr;}  
  .info-card{padding:22px 18px;}
}

/* 회사소개 */
/* ====== 풀폭 히어로 ====== */
.qi-hero-full{
  width:100%;
  background:#fff;
}

/* ✅ 풀폭 안에서 “내용만” 좌우 배치 */
.qi-hero-inner{
  width:100%;
  display:flex;
  align-items:center;
  min-height:300px;
}

/* 왼쪽 이미지 */
.qi-hero-image{
  flex:0 0 55%;
  min-height:300px;          /* 이미지 높이 안정 */
}
.qi-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius: 0 233px 233px 0;
}

/* 오른쪽 텍스트 */
.qi-hero-text{
  flex:1;
  padding:0 60px;
  line-height:1.4;
  box-sizing:border-box;
}

.qi-hero-text > p{ margin:0; font-weight:600; 
  font-size:40px;}
.qi-hero-text > p.hello{ font-weight:400; }

/* ====== 본문(1600 안) ====== */
.text_wrap{
  margin:129px auto 100px;
}
.qi-text{
  font-size:16px;
  line-height:1.8;
  color:#222;
}
.qi-text blockquote{
  font-size:35px;
  font-weight:400;
  margin:0 0 20px;
}
.qi-text p{ margin:0 0 16px; font-size:20px;}
.qi-text ul{ margin:0 0 16px; padding-left:18px; }
.qi-text ul li{
  position:relative;
  padding-left:14px;
  margin:6px 0;
  font-size:20px;
  line-height:1.6;
  color:#000;
}

.qi-text ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;
  width:4px;
  height:4px;
  background:#000;
  border-radius:50%;
}

.qi-ceo{ margin-top:40px; font-weight:600; font-size:25px;}

/* ====== 반응형 ====== */
@media (max-width:1024px){
  .qi-hero-inner{
    flex-direction:column;
    align-items:stretch;
    min-height:auto;
  }

  .qi-hero-image{
    flex:none;
    width:100%;
    min-height:240px;
  }

  .qi-hero-text{
    padding:24px 20px;
    font-size:20px;
  }

  .text_wrap{ margin:0px auto 80px; }
  .wrap_style01 {margin:0px;}
}

@media (max-width:480px){
  .qi-hero-image{ min-height:200px; }
  .qi-hero-text{ font-size:18px; }
  .qi-text{ font-size:14px; }
  .qi-text blockquote{ font-size:16px; }
}

@media (max-width:320px){
  .qi-hero-image{ min-height:170px; }
  .qi-hero-text{ font-size:16px; padding:18px 14px; }
  .qi-text{ font-size:13px; }
}

@media (max-width:280px){
  .qi-hero-image{ min-height:150px; }
  .qi-hero-text{ font-size:15px; padding:16px 10px; }
  .qi-text{ font-size:12.5px; }
  .qi-text blockquote{ font-size:14px; }
}

/* ====== 타이포만 유동화 ====== */

/* 히어로 문구(안녕하십니까/감사합니다) */
.qi-hero-text > p{
  margin:0;
  font-weight:600;
  font-size: clamp(18px, 2.6vw, 40px); /* ✅ 280~PC 자연 감소 */
  line-height: 1.35;
  word-break: keep-all;
}

.qi-hero-text > p.hello{
  font-weight:400;
  font-size: clamp(16px, 2.2vw, 36px);
}

/* 본문 */
.qi-text{
  font-size: clamp(12.5px, 1.05vw, 16px);
  line-height: 1.85;
}

.qi-text blockquote{
  font-size: clamp(16px, 2.2vw, 35px);
  line-height: 1.35;
  margin:0 0 20px;
  word-break: keep-all;
}

.qi-text p{
  margin:0 0 16px;
  font-size: clamp(12.5px, 1.25vw, 20px);
}

.qi-text ul li{
  font-size: clamp(12.5px, 1.25vw, 20px);
  line-height: 1.65;
}

/* CEO */
.qi-ceo{
  margin-top:40px;
  font-weight:600;
  font-size: clamp(14px, 1.6vw, 25px);
}

/* 280~320에서 너무 답답하면 여백도 같이 줄이기 */
@media (max-width:480px){
  .text_wrap{ margin:0px auto 70px; }
}
@media (max-width:320px){
  .text_wrap{ margin:0px auto 60px; }
}
@media (max-width:280px){
  .text_wrap{ margin:0px auto 55px; }
  .qi-hero-text{ padding:16px 10px; } /* 너가 이미 가지고 있으면 유지 */
}

/* 회사개요 */
/* =========================
   Company Overview Hero
========================= */

.company-hero{
  width:100%;
  overflow:hidden;              /* 가로 스크롤 방지 */
  background:#000;              /* 이미지 로딩 전 대비 */
}

/* 이미지 래퍼 */
.company-hero__img{
  width:100%;
  aspect-ratio: 1920 / 480;     /* ⭐ 기본 비율 (필요 시 조절) */
  position:relative;
}

/* 실제 이미지 */
.company-hero__img img{
  width:100%;
  height:100%;
  object-fit:cover;             /* ⭐ 핵심: 꽉 차게 + 비율 유지 */
  display:block;
}

/* =========================
   반응형 보정
========================= */

/* 태블릿 */
@media (max-width:1024px){
  .company-hero__img{
    aspect-ratio: 16 / 5;
  }
}

/* 모바일 */
@media (max-width:480px){
  .company-hero__img{
    aspect-ratio: 16 / 7;        /* 세로 조금 더 확보 */
  }
}

/* 320px */
@media (max-width:320px){
  .company-hero__img{
    aspect-ratio: 16 / 8;
  }
}

/* 280px */
@media (max-width:280px){
  .company-hero__img{
    aspect-ratio: 16 / 9;        /* 가장 안전한 비율 */
  }
}


/* ===== 기업 기본 정보 ===== */
.company-info{
  width:100%;
  background:#fff;
  margin:48px 0;
}

.company-info__inner{
  max-width:1600px;          /* ✅ 전체 가로 1600 */
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

.company-info__title{
  font-size:25px;
  font-weight:800;
  margin:0 0 16px;
  color:#111;
}

/* 테이블 래퍼 */
.company-info__tableWrap{
  width:100%;
}

/* 테이블 */
.company-info__table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  border-top:3px solid #0F64D3;   /* ✅ 상단 파란 라인 */
  border-bottom:1px solid #DBDBDB;
}

/* 컬럼 폭 (PC) */
.company-info__table .col-label{ width:190px; }
.company-info__table .col-value{ width:auto; }

/* 셀 공통 */

.company-info__table th {
  border-right:1px solid #DBDBDB;}

.company-info__table th,
.company-info__table td{
  padding:16px 18px;
  border-bottom:1px solid #e9e9e9;
  font-size:18px;
  color:#222;
  vertical-align:middle;
  line-height:1.5;
  word-break:keep-all;
}

/* 왼쪽 라벨 */
.company-info__table th{
  background:#f6f6f6;
  font-weight:700;
  color:#333;
}

/* 첫 줄(스크린샷처럼 살짝 톤 다르게) */
.company-info__table tr.is-first th,
.company-info__table tr.is-first td{
  background:#f3f8ff;
}

/* 값 강조 */
.company-info__table td b{
  font-weight:800;
}

/* =========================
   반응형: 768 이하부터 여백/폰트 줄이기
========================= */
@media (max-width:768px){
  .company-info__inner{ padding:0 16px; }
  .company-info__table th,
  .company-info__table td{
    padding:14px 14px;
    font-size:13px;
  }
  .company-info__table .col-label{ width:160px; }
}

/* =========================
   480 이하: 표 → 카드형(세로)로 전환 (280까지 안정)
========================= */
/* ✅ 480 이하: 표 유지 + 글씨/여백만 줄이기 */
@media (max-width:480px){
  .company-info__inner{ padding:0 12px; }

  .company-info__title{
    font-size:16px;
    margin-bottom:10px;
  }

  .company-info__table th,
  .company-info__table td{
    padding:10px 10px;
    font-size:12px;
    line-height:1.45;
    word-break:break-word;   /* 아주 좁을 때 단어 끊기 */
  }

  .company-info__table .col-label{ width:110px; } /* 라벨 폭 줄이기 */
}

/* 320 */
@media (max-width:320px){
  .company-info__inner{ padding:0 10px; }
  .company-info__table th,
  .company-info__table td{
    padding:9px 9px;
    font-size:11.5px;
  }
  .company-info__table .col-label{ width:96px; }
}

/* 280 */
@media (max-width:280px){
  .company-info__inner{ padding:0 8px; }
  .company-info__table th,
  .company-info__table td{
    padding:8px 8px;
    font-size:11px;
  }
  .company-info__table .col-label{ width:84px; }
}

/* ===== 섹션 ===== */
.strategy{
  width:100%;
  background:#fff;
  padding: clamp(24px, 3.2vw, 52px) 0;
}
.strategy__inner{
  max-width:1600px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* 3개 배치 */
.strategy__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(420px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  justify-content:center;
}

/* 카드 */
.strategy__item{
  display:grid;
  place-items:center;
}

/* ===== 원 래퍼 ===== */
.strategy__bubble{
  width:100%;
  max-width:420px;   /* 🔑 최대만 제한 */
  aspect-ratio:1 / 1;
  position:relative;
}

/* 원 */
.strategy__circle{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding: clamp(16px, 2vw, 28px);
  box-sizing:border-box;
}

/* 바깥 테두리 */
.strategy__circle::after{
  content:"";
  position:absolute;
  inset: clamp(-10px, -1.2vw, -14px);
  border-radius:50%;
  border: clamp(6px, .8vw, 10px) solid rgba(46,164,255,.18);
  pointer-events:none;
}

/* 색상 */
.strategy__item.is-blue1 .strategy__circle{ background:#1c87d0; }
.strategy__item.is-blue2 .strategy__circle{ background:#0d6ea4; }
.strategy__item.is-blue3 .strategy__circle{ background:#0a5a85; }

/* 아이콘 */
.strategy__icon{
  width: clamp(44px, 5vw, 74px);
  height: clamp(44px, 5vw, 74px);
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.strategy__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* 제목 */
.strategy__title{
  margin:0 0 clamp(10px, 1.4vw, 18px);
  font-size: clamp(13px, 1.6vw, 25px);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1.25;
  word-break:keep-all;
}

/* 리스트 */
.strategy__list{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;   /* 🔑 세로 고정 */
  align-items:center;
  gap:6px;
}
.strategy__list li{
  display:flex;            /* 🔑 inline 제거 */
  align-items:center;
  justify-content:center;

  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing:-0.05em;

  white-space:nowrap;      /* 한 줄 유지 */
  text-align:center;

  opacity:.95;
}
.strategy__list li::before{
   content:"•";
  margin-right:6px;
  font-size:0.9em;
}

/* ===== 퍼짐 효과 ===== */
.strategy .ball-scale{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:1;
  pointer-events:none;
}
.strategy .ball-scale > div{
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 0 0 rgba(46,164,255,.35);
  animation: ball-shadow 3s ease-out infinite;
}
.strategy .ball-scale > div:nth-child(1){ animation-delay:0s; }
.strategy .ball-scale > div:nth-child(2){ animation-delay:-.6s; }
.strategy .ball-scale > div:nth-child(3){ animation-delay:-1.2s; }
.strategy .ball-scale > div:nth-child(4){ animation-delay:-1.8s; }
.strategy .ball-scale > div:nth-child(5){ animation-delay:-2.4s; }

@keyframes ball-shadow{
  0%   { opacity:.55; box-shadow:0 0 0 0 rgba(46,164,255,.35); }
  70%  { opacity:.18; }
  100% { opacity:0; box-shadow:0 0 0 22px rgba(46,164,255,0); }
}

/* ===== 반응형 ===== */
@media (max-width:999px){
  .strategy__grid{ grid-template-columns: repeat(2, 1fr); }
  .strategy__bubble{
    width: clamp(320px, 52vw, 420px);
  }
}
@media (max-width:600px){
  .strategy__grid{ grid-template-columns:1fr; }
  .strategy__bubble{
    width: clamp(260px, 78vw, 360px);
  }
}
@media (max-width:320px){
  .strategy__bubble{ width:280px; }
}
@media (max-width:280px){
  .strategy__bubble{ width:210px; }
}

@media (max-width:1380px){
  .strategy__grid{
    grid-template-columns: repeat(2, 1fr); /* 🔑 minmax 제거 */
  }

  .strategy__bubble{
    width: clamp(320px, 38vw, 400px); /* 🔑 1024 대응 */
  }
}

@media (max-width:768px){
  .strategy__grid{
    grid-template-columns: 1fr;
  }

  .strategy__bubble{
    width: min(420px, 90vw); /* 화면 안에 100% 보장 */
  }
}

@media (max-width:320px){
  .strategy__bubble{
    width: 88vw;
  }

  .strategy__title{
    font-size: 16px;
  }

  .strategy__list li{
    font-size: 14px;
    letter-spacing:-0.04em;
  }
}


@media (max-width:999px){
  .strategy__title{
    font-size: 22px;      /* 고정으로 안정 */
  }

  .strategy__list li{
    font-size: 17px;
  }
}

@media (max-width:600px){
  .strategy__title{
    font-size: 20px;
  }

  .strategy__list li{
    font-size: 16px;
    letter-spacing:-0.03em;
  }
}

@media (max-width:320px){
  .strategy__title{
    font-size: 18px;
  }

  .strategy__list li{
    font-size: 15px;
  }
}

@media (max-width:280px){
  .strategy__title{
    font-size: 17px;
  }

  .strategy__list li{
    font-size: 14.5px;
    letter-spacing:-0.02em;
  }
}


/* 조직(팀) 소개 */
/* ===== Leaders Section ===== */
.leaders{
  width:100%;
  background:#fff;
  padding: clamp(22px, 3vw, 48px) 0;
}

.leaders__inner{
  max-width:1600px;
  margin:0 auto;
  padding: 0 clamp(10px, 2vw, 24px);
  box-sizing:border-box;
}

/* 3열 → 2열 → 1열 */
.leaders__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
}

/* 카드 */
.leader-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius: 6px;
  padding: clamp(14px, 2.2vw, 22px);
  text-align:center;
  box-sizing:border-box;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* 사진(원형 + 은은한 번짐) */
.leader-card__photo{
  width: clamp(74px, 7.6vw, 110px);
  aspect-ratio: 1 / 1;
  
  margin: 0 auto clamp(10px, 1.6vw, 14px);
  display:grid;
  place-items:center;
}

.leader-card__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 이름 */
.leader-card__name{
  margin:0 0 6px;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 800;
  color:#111;
  letter-spacing:-0.02em;
}

/* 직책/설명 1줄 */
.leader-card__role{
  margin:0;
  font-size: clamp(12px, 1.05vw, 14px);
  color:#6b6b6b;
  letter-spacing:-0.02em;
  line-height:1.35;

  /* 너무 길면 2줄까지 자연스럽게 (필요시 1줄로 바꾸려면 아래 3줄 주석처리) */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 구분선 */
.leader-card__divider{
  height:1px;
  background:#e6e6e6;
  margin: clamp(12px, 2vw, 16px) 0;
}

/* 불릿 */
.leader-card__list{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
}

.leader-card__list li{
  position:relative;
  padding-left: 12px;
  margin: 8px 0;
  font-size: clamp(12px, 1.05vw, 14px);
  color:#444;
  line-height:1.55;
  letter-spacing:-0.02em;
  word-break:keep-all;
}

.leader-card__list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#333;
  opacity:.9;
}

/* ===== Responsive ===== */
@media (max-width: 999px){
  .leaders__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .leaders__grid{ grid-template-columns: 1fr; }
}

/* 320 */
@media (max-width: 320px){
  .leader-card__list li{ margin:7px 0; }
}

/* 280 */
@media (max-width: 280px){
  .leaders__inner{ padding:0 10px; }
  .leader-card{ padding: 12px; }
}


/* 오시는 길 */
/* 오시는 길 */
.loc{
  width:100%;
  background:#fff;
  padding: clamp(16px, 2.5vw, 28px) 0 clamp(24px, 3.2vw, 44px);
}

.loc__inner{
  max-width:1600px;
  margin:0 auto;
  padding: 0 clamp(10px, 2vw, 24px);
  box-sizing:border-box;
}

/* ===== Map ===== */
.loc__map{
  width:100%;
  overflow:hidden;
}

/* 카카오 roughmap 강제 100% */
.loc__map .root_daum_roughmap,
.loc__map .wrap_map,
.loc__map .map,
.loc__map iframe{
  width:100% !important;
  max-width:100% !important;
}

.loc__map .root_daum_roughmap,
.loc__map .wrap_map,
.loc__map .map,
.loc__map iframe{
  height: clamp(200px, 32vw, 500px) !important;
}

/* ===== Address ===== */
.loc__addr{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 14px 0;
  border-bottom:1px solid #eee;
}

.loc__addr-label{
  font-weight:600;
  color:#111;
  white-space:nowrap;
  font-size: clamp(14px, 1.4vw, 22px);
}

.loc__addr-text{
  color:#333;
  min-width:0;
  word-break:keep-all;
  font-size: clamp(12px, 1.2vw, 18px);
}

/* ===== Title ===== */
.loc__h3{
  margin: clamp(16px, 2.2vw, 22px) 0 10px;
  font-size: clamp(14px, 1.4vw, 22px);
  font-weight:600;
  color:#111;
}

/* ===== Transport Table-like ===== */
.loc__trans{
  border-top:1px solid #dcdcdc;
}

.loc__row{
  display:grid;
  grid-template-columns: 120px 1fr; /* 아이콘 영역 + 내용 */
  align-items:stretch;
  border-bottom:1px solid #dcdcdc;
}

/* 왼쪽 아이콘 박스 */
.loc__left{
  background:#efefef;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 10px;
  border-right:1px solid #dcdcdc;
}

.loc__left-ico{
  width: clamp(34px, 3vw, 46px);
  height: clamp(34px, 3vw, 46px);
  object-fit:contain;
  display:block;
}

.loc__left-txt{
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight:400;
  color:#111;
}

/* 오른쪽 내용 */
.loc__right{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ✅ 한 줄(시안처럼) */
.loc__rline{
  display:grid;
  grid-template-columns: 80px 1fr; /* ✅ 시안처럼 왼쪽 좁게 */
  align-items:center;
  padding: 18px 18px;
}

.loc__rline_style{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.loc__rline:last-child{ border-bottom:none; }

.loc__tagcol{
  display:flex;
  align-items:center;
  min-width:0;
}

/* “청량리 방면” 같은 일반 텍스트 */
.loc__plain-tag{
  display:block;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight:400;
  color:#111;
  white-space:nowrap;
}

/* ✅ 버스: 오른쪽 내용을 "엔터친것처럼" 아래로 붙이기 */
.loc__stack{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.loc__desc{
  font-size: clamp(14px, 1.3vw, 20px);
  line-height:1.5;
  word-break:keep-all;
}

/* pill */
.pill{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight:400;
  vertical-align: baseline;
}
.pill.blue{ background:#4C6DB1; color:#fff; }

/* 지하철 배지 */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:6px;
  font-weight:400;
  font-size: clamp(12px, 1.1vw, 18px);
  color:#fff;
  white-space:nowrap;
}
.badge.brown{ background:#A3623A; }
.badge.navy{ background:#0E208B; }

/* ✅ 추가: 768 이하에서 “배지 위 / 설명 아래”로 바꿀 라인 */
.loc__rline--col{}

/* ===== 아래 안내 박스 ===== */
.loc__box{
  padding: 16px 0 0;
  border-top:1px solid #eee;
}

.loc__h4{
  margin: 14px 0 6px;
  font-size: clamp(13px, 1.2vw, 22px);
  font-weight:600;
  color:#111;
}

.loc__box p{
  margin: 4px 0;
  font-size: clamp(12px, 1.1vw, 16px);
  color:#333;
  line-height:1.6;
  word-break:keep-all;
}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .loc__row{ grid-template-columns: 96px 1fr; }

  /* 기존 라인 기본 */
  .loc__rline{
    grid-template-columns: 72px 1fr;
    padding: 14px 12px;
  }

  /* ✅ 핵심: (지하철) .loc__rline--col 안의 각 .loc__rline을 세로로 */
  .loc__right.loc__rline--col{
    display:flex;
    flex-direction:column;
  }

  .loc__right.loc__rline--col .loc__rline{
    grid-template-columns: 1fr;  /* 배지 위 / 설명 아래 */
    align-items:flex-start;
    row-gap:8px;
  }

  .loc__right.loc__rline--col .loc__tagcol,
  .loc__right.loc__rline--col .loc__desc{
    width:100%;
  }
  .rline_style01 {padding:0px 11px 18px !important;}
}

@media (max-width: 480px){
  .loc__row{ grid-template-columns: 82px 1fr; }
  .loc__left{ gap:8px; padding:12px 8px; }
  .loc__rline{ grid-template-columns: 64px 1fr; padding: 12px 10px; }
  .pill{ padding: 2px 6px; }

  /* (세로 배치 유지) */
  .loc__rline--col{ padding: 12px 10px; row-gap:8px; }
}

@media (max-width: 320px){
  .loc__row{ grid-template-columns: 74px 1fr; }
  .loc__rline{ grid-template-columns: 60px 1fr; }

  .loc__rline--col{ row-gap:7px; }
}

@media (max-width: 280px){
  .loc__inner{ padding: 0 10px; }
  .loc__row{ grid-template-columns: 66px 1fr; }
  .loc__rline{ grid-template-columns: 56px 1fr; padding: 10px 8px; }

  .loc__rline--col{ padding: 10px 8px; row-gap:6px; }
}


/* 문의완료 되었습니다 페이지 영역 20251216 */
/* ===== 배경 전체 ===== */
.inquiry_completed_wrap{
  min-height: 100vh;
  background: url("/img/inquiry_completed_bg.png") center / cover no-repeat;
  display: flex;
  align-items: center;
}

/* 기존 wrap 유지 (질문에서 주신 것) */
/*
.wrap {
  max-width: 1600px;
  margin: 150px auto 150px;
  padding: 0 24px;
}
*/

/* wrap 안 카드 */
.inquiry_card{
   max-width: 720px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px);
  text-align: center;

  /* ✅ 너가 준 스타일 적용 */
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);

  /* 기존 그림자는 유지(원하면 더 약하게도 가능) */
  box-shadow:
    0 18px 45px rgba(0,0,0,0.18),
    0 2px 10px rgba(0,0,0,0.10);
}

/* 타이틀/문구 */
.inquiry_card h1{
  margin: 0 0 14px;
  font-size: 25px;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  word-break: keep-all;
}

.inquiry_card p{
  margin: 0 0 22px;
  font-size: 20px;
  color: #222;
  line-height: 1.6;
  word-break: keep-all;
}

/* 버튼 */
.inquiry_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 10px 22px;
  border-radius: 12px;

  font-size: 18px;
  font-weight: 600;
  text-decoration: none;

  color: #fff;
  background: #1e6bff;
  box-shadow: 0 10px 24px rgba(30,107,255,0.28);
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.inquiry_btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(30,107,255,0.32);
}
.inquiry_btn:active{
  transform: translateY(0);
  opacity: 0.92;
}

/* ===== 반응형 ===== */
@media (max-width: 768px){
  .wrap{ margin: 90px auto; }
  .inquiry_card{ max-width: 560px; }
  .inquiry_card h1{ font-size: 22px; }
  .inquiry_card p{ font-size: 16px; }
  .inquiry_btn{ font-size: 16px; }
}

@media (max-width: 480px){
  .wrap{ margin: 70px auto; padding: 0 16px; }
  .inquiry_card{ border-radius: 16px; }
  .inquiry_card h1{ font-size: 20px; }
  .inquiry_card p{ font-size: 15px; }
  .inquiry_btn{ width: 100%; }
}

@media (max-width: 280px){
  .wrap{ margin: 56px auto; padding: 0 10px; }
  .inquiry_card{ padding: 14px; }
  .inquiry_card h1{ font-size: 18px; }
  .inquiry_card p{ font-size: 13px; }
  .inquiry_btn{ font-size: 14px; min-height: 40px; }
}

/* 새로 추가한 영역 20251219 */
@media (max-width:999px){
  /* nav-select는 padding 제거 */
  .nav-item.nav-select{ padding: 0; }

  /* 버튼이 칸 전체 */
  .nav-btn{
    width: 100%;
    height: 100%;
    padding: 0 14px;                 /* 여백은 여기로 */
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    min-width:0;
  }

  /* 텍스트 ... 처리 */
  .nav-btn{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:999px){
  /* 홈: 고정폭(작게) */
  .sub-nav > .nav-home{
    flex: 0 0 52px;     /* ✅ 여기 숫자만 줄이면 더 작아짐 (48~64 추천) */
    width: 52px;
    padding: 0;
    justify-content: center;
  }

  /* 홈 아이콘도 칸에 맞게 */
  .sub-nav > .nav-home img{
    width: 22px;        /* 아이콘 크기 */
    height: 22px;
    object-fit: contain;
    display:block;
  }

  /* 1차/2차 메뉴: 같은 폭으로(1:1) */
  .sub-nav > #navPrimary,
  .sub-nav > #navSecondary{
    flex: 1 1 0;
    min-width: 0;
  }
}
/* 새로 추가한 영역 20251219 끝 */ 


  .notice-search{
    display:flex;
    justify-content:flex-end;
    margin:12px 0 10px;
  }

  .notice-search__form{
    display:flex;
    gap:8px;
    align-items:center;

    /* 핵심: 좁아지면 줄바꿈 허용 + 폼 자체도 화면폭에 맞게 */
    flex-wrap:wrap;
    width:100%;
    max-width:360px; /* 필요 없으면 제거 가능 */
    justify-content:flex-end;
  }

  .notice-search__input{
    height:40px;
    padding:0 12px;
    border:1px solid #ddd;
    border-radius:8px;

    /* 핵심: 기본은 넓게, 좁아지면 자연스럽게 줄어듦 */
    flex:1 1 180px;      /* grow, shrink, basis */
    min-width:0;         /* flex 아이템 overflow 방지(중요) */
    width:100%;
    box-sizing:border-box;
  }

  .notice-search__btn{
    height:40px;
    padding:0 14px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    cursor:pointer;

    /* 버튼은 내용만큼, 필요시 줄바꿈 */
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* 더 좁은 화면(예: 280px 근처)에서 버튼이 아래로 내려가도 예쁘게 */
  @media (max-width: 320px){
    .notice-search__btn{
      width:100%;
    }
  }