*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

:root{
  --navy:#0b1c38;
  --blue-900:#0b3b8c;
  --blue-800:#1d4f9a;
  --blue-700:#2f78cf;
  --blue-600:#4a90e2;
  --blue-500:#60a5fa;
  --blue-400:#86afe1;
  --blue-300:#cfe2ff;
  --blue-200:#dbeafe;
  --blue-100:#eaf3ff;
  --line:#d6e4ff;
  --text:#1f2937;
  --sub:#475569;
  --white:#ffffff;
}


.container{
  width:95%;
  max-width:1200px;
  margin:0 auto;
}

body{
  margin:0;
  padding:0;
  background:#f3f7fd;
  color:var(--text);
}

.header-wrap{
  position:relative;
  width:100%;
  z-index:9999;
}

.main-content{
  position:relative;
}

/* top util */
.top-util{
  background:var(--navy);
  color:#fff;
  font-size:14px;
}

.util-container{
  width:95%;
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
}

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

.util-right{
  display:flex;
  gap:20px;
}

.util-right a{
  color:#fff;
  text-decoration:none;
}

.util-right a:hover{
  text-decoration:underline;
}

/* header / gnb */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}




/* Food Section */
.food-section{
  background:linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
  border-radius:40px;
  padding:70px;
  margin-top:30px;
  margin-bottom:30px;
  border:1px solid var(--line);
}

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

.food-card{
  background:var(--white);
  color:var(--text);
  border-radius:35px;
  padding:40px;
  min-height:120px;
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(11, 59, 140, 0.05);
  transition:0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.food-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(11, 59, 140, 0.1);
}

.food-card h3{
  font-size:30px;
  line-height:1.2;
  word-break:keep-all;
  color:var(--blue-900);
}

/* 상담 배너 */
.consult-section{
  margin:30px 0;
  padding:28px 32px;
  border-radius:14px;
  background:linear-gradient(90deg, #4ea84f 0%, #3b9a47 100%);
  box-shadow:0 10px 24px rgba(0, 0, 0, 0.08);
  color:#fff;
}

.consult-grid{
  display:grid;
  grid-template-columns:90px 2.2fr 1.4fr 1fr;
  align-items:center;
  gap:28px;
}

.consult-icon-box{
  width:82px;
  height:82px;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
}

.consult-icon-box img{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
}

.consult-org{
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
  opacity:0.95;
}

.consult-heading{
  font-size:26px;
  font-weight:800;
  line-height:1.2;
  margin-bottom:14px;
  color:#fff;
}

.consult-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:7px 0;
}

.consult-badge{
  min-width:48px;
  padding:5px 10px;
  border-radius:6px;
  background:#2f7e35;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.consult-number{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.2px;
}

.consult-time-text{
  font-size:22px;
  font-weight:800;
  line-height:1.35;
  margin-bottom:6px;
}

.consult-time-sub{
  font-size:14px;
  opacity:0.9;
}

.consult-question{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.consult-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:128px;
  height:46px;
  padding:0 18px;
  border-radius:8px;
  background:#2b6fd6;
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:800;
  transition:all 0.25s ease;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

.consult-btn:hover{
  background:#1f57ad;
  transform:translateY(-2px);
}

/* common section head */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

.section-head h2{
  font-size:34px;
  color:var(--blue-900);
  font-weight:800;
}

.more-link{
  text-decoration:none;
  color:var(--blue-800);
  font-size:15px;
  font-weight:700;
}

.more-link:hover{
  text-decoration:underline;
}

/* gallery */
.gallery-section{
  background:linear-gradient(180deg, #dcecff 0%, #cfe2ff 100%);
  border:1px solid #c4dafb;
  border-radius:40px;
  padding:40px;
  margin-bottom:30px;
}

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

.gallery-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(11, 59, 140, 0.05);
  transition:0.3s;
}

.gallery-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(11, 59, 140, 0.1);
}

.gallery-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.gallery-body{
  padding:22px 20px;
}

.gallery-body h3{
  font-size:22px;
  color:var(--blue-900);
  margin-bottom:10px;
  line-height:1.35;
}

.gallery-body p{
  font-size:15px;
  color:var(--sub);
  line-height:1.7;
}

/* notice */
.notice-section{
  background:linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
  border:1px solid var(--line);
  border-radius:40px;
  padding:40px;
  margin-bottom:30px;
}

.notice-tabs{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.notice-tab{
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--blue-900);
  padding:10px 18px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:0.3s;
  appearance:none;
  outline:none;
}

.notice-tab:hover{
  background:var(--blue-100);
}

.notice-tab.active{
  background:var(--blue-600);
  color:#fff;
  border-color:var(--blue-600);
  box-shadow:0 6px 18px rgba(74, 144, 226, 0.18);
}

.notice-tab-content{
  display:none;
}

.notice-tab-content.active{
  display:block;
}

.notice-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.notice-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px 24px;
  text-decoration:none;
  color:var(--text);
  transition:0.3s;
  box-shadow:0 6px 18px rgba(11, 59, 140, 0.04);
}

.notice-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(11, 59, 140, 0.08);
}

.notice-title{
  font-size:17px;
  font-weight:700;
  color:var(--blue-900);
  line-height:1.5;
}

.notice-date{
  font-size:14px;
  color:var(--sub);
  white-space:nowrap;
}

/* stats */
.stats-section{
  background:linear-gradient(180deg, #dcecff 0%, #cfe2ff 100%);
  border-radius:40px;
  padding:30px;
  margin-bottom:30px;
  border:1px solid #c4dafb;
}

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

.stat-card{
  background:var(--white);
  border-radius:30px;
  padding:40px;
  min-height:160px;
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(11, 59, 140, 0.05);
  transition:0.3s;
}

.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(11, 59, 140, 0.1);
}

.stat-number{
  font-size:60px;
  font-weight:800;
  margin-bottom:10px;
  line-height:1;
  color:var(--blue-900);
}

.stat-label{
  font-size:20px;
  color:var(--sub);
  line-height:1.5;
  font-weight:600;
}

/* partner */
.partner-section{
  background:linear-gradient(180deg, #eef5ff 0%, #e3efff 100%);
  border:1px solid var(--line);
  border-radius:40px;
  padding:40px;
  margin-bottom:30px;
}

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

.partner-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:var(--blue-900);
  font-size:20px;
  font-weight:800;
  box-shadow:0 6px 18px rgba(11, 59, 140, 0.04);
  transition:0.3s;
}

.partner-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(11, 59, 140, 0.08);
}

/* footer */
.site-footer{
  background:var(--navy);
  color:#dbe7ff;
  border-radius:28px 28px 0 0;
  padding:36px 32px;
  margin-top:10px;
}

.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.footer-logo{
  font-size:24px;
  font-weight:800;
  color:#fff;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.footer-links a{
  text-decoration:none;
  color:#dbe7ff;
  font-size:14px;
}

.footer-links a:hover{
  color:#fff;
  text-decoration:underline;
}

.footer-info p{
  font-size:14px;
  line-height:1.8;
  color:#dbe7ff;
}

.footer-info .copyright{
  margin-top:10px;
  color:#a9bddf;
}

/* responsive */
@media (max-width: 1100px){
  .hero-card h1{
    font-size:52px;
  }

  .food-card,
  .stat-card{
    padding:35px;
  }

  .food-card h3{
    font-size:28px;
  }

  .stat-number{
    font-size:52px;
  }
}

@media (max-width: 900px){
  .topbar{
    flex-wrap:wrap;
    padding:16px 18px;
  }

  .logo{
    font-size:20px;
  }

  .menu-toggle{
    display:flex;
    margin-left:auto;
  }

  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-left:0;
    padding-top:10px;
    border-top:1px solid var(--line);
  }

  .nav.active{
    display:flex;
  }

  .dropdown{
    width:100%;
    border-bottom:1px solid #edf3ff;
  }

  .dropbtn{
    width:100%;
    text-align:left;
    font-size:16px;
    padding:14px 4px;
  }

  .dropbtn::after{
    display:none;
  }

  @media (max-width: 900px){
  .dropdown-menu{
    position:static;
    left:auto;
    top:auto;
    min-width:100%;
    border-radius:0;
    box-shadow:none;
    padding:0 0 10px 0;

    transform:none;      /* 슬라이드 제거 */
    transition:none;     /* 애니메이션 제거 */

    opacity:1;
    visibility:visible;
    display:none;
    background:transparent;
  }

  .dropdown.active .dropdown-menu{
    display:block;
  }

}



  .dropdown-menu a{
    padding:10px 14px;
    background:#f7fbff;
    border-radius:8px;
    margin:4px 0;
    font-size:14px;
	transition:none;
  }

  .dropdown-menu a:hover{
    background:var(--blue-100);
  }

  .hero{
    grid-template-columns:1fr;
  }

  .hero-card,
  .hero-image,
  .hero-image iframe,
  .hero-image video{
    min-height:360px;
  }

  .food-grid,
  .stats-grid,
  .gallery-grid,
  .partner-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .hero-card h1{
    font-size:42px;
  }

  .food-section,
  .stats-section{
    padding:45px 30px;
  }

  .section-head h2{
    font-size:28px;
  }

  .consult-grid{
    grid-template-columns:80px 1fr 1fr;
    gap:20px;
  }

  .consult-question{
    grid-column:2 / 4;
  }

  .consult-heading{
    font-size:22px;
  }

  .consult-number,
  .consult-time-text{
    font-size:19px;
  }
}

@media (max-width: 640px){
  body{
    padding:8px;
  }

  .container{
    width:100%;
  }

  .util-container{
    width:100%;
    padding:8px 14px;
    gap:10px;
    flex-wrap:wrap;
  }

  .util-right{
    gap:12px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }


  .hero{
    gap:16px;
    margin-top:18px;
  }

  .hero-card,
  .hero-image,
  .hero-image iframe,
  .hero-image video{
    min-height:280px;
    border-radius:18px;
  }

  .hero-card{
    padding:28px 20px;
  }

  .hero-card h1{
    font-size:32px;
    margin-bottom:14px;
  }

  .hero-card p{
    font-size:15px;
    line-height:1.6;
    margin-bottom:14px;
  }

  .menu-btn{
    width:100%;
    padding:14px 18px;
    font-size:15px;
  }

  .food-section,
  .stats-section,
  .notice-section,
  .gallery-section,
  .partner-section{
    padding:24px 18px;
    border-radius:24px;
    margin-top:20px;
    margin-bottom:20px;
  }

  .food-grid,
  .stats-grid,
  .gallery-grid,
  .partner-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .food-card,
  .stat-card{
    padding:24px 18px;
    border-radius:22px;
    min-height:auto;
  }

  .food-card h3{
    font-size:24px;
  }

  .stat-number{
    font-size:42px;
  }

  .stat-label{
    font-size:16px;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:18px;
  }

  .section-head h2{
    font-size:24px;
  }

  .notice-item{
    flex-direction:column;
    align-items:flex-start;
    padding:16px 18px;
    gap:8px;
  }

  .notice-title{
    font-size:15px;
  }

  .notice-date{
    font-size:13px;
  }

  .notice-tabs{
    gap:8px;
    margin-bottom:16px;
  }

  .notice-tab{
    font-size:13px;
    padding:8px 14px;
  }

  .gallery-card img{
    height:190px;
  }

  .gallery-body{
    padding:18px 16px;
  }

  .gallery-body h3{
    font-size:19px;
  }

  .partner-item{
    min-height:84px;
    font-size:17px;
    border-radius:16px;
  }

  .site-footer{
    padding:28px 18px;
    border-radius:20px 20px 0 0;
  }

  .footer-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-logo{
    font-size:20px;
  }

  .footer-links{
    gap:12px;
  }

  .footer-info p{
    font-size:13px;
    line-height:1.7;
  }

  .consult-section{
    padding:22px 18px;
    border-radius:12px;
  }

  .consult-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .consult-icon-box{
    width:68px;
    height:68px;
  }

  .consult-icon-box img{
    width:40px;
    height:40px;
  }

  .consult-heading{
    font-size:20px;
    margin-bottom:10px;
  }

  .consult-org{
    font-size:14px;
  }

  .consult-number,
  .consult-time-text{
    font-size:18px;
  }

  .consult-time-sub{
    font-size:13px;
  }

  .consult-question{
    grid-column:auto;
  }

  .consult-btn{
    width:100%;
  }
}



/* quick menu */

.quick-menu-section{
margin:30px 0;
background:#fff;
border-radius:25px;
padding:30px 20px 45px 20px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
position:relative;
}

.quick-menu{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:10px;
text-align:center;
}

.quick-item{
text-decoration:none;
color:#333;
transition:0.2s;
}

.quick-item:hover{
transform:translateY(-4px);
}

.quick-icon{
width:80px;
height:80px;
margin:0 auto 8px;
display:flex;
align-items:center;
justify-content:center;
}

.quick-icon img{
width:70px;
height:70px;
object-fit:contain;
}

.quick-item p{
font-size:14px;
font-weight:600;
margin-top:5px;
}

/* 아래 화살표 */

.quick-more{
position:absolute;
bottom:-15px;
left:50%;
transform:translateX(-50%);
background:#eee;
width:60px;
height:30px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* tablet */

@media (max-width:1000px){

.quick-menu{
grid-template-columns:repeat(4,1fr);
row-gap:20px;
}

}

/* mobile */

@media (max-width:600px){

.quick-menu{
grid-template-columns:repeat(3,1fr);
row-gap:20px;
}

.quick-item p{
font-size:12px;
}

}




/* 고객센터 안내 섹션 */
/* 고객센터 안내 섹션 - 블루 + 그린 조합 */

.customer-center-section{
  margin:30px 0;
}

.customer-center-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:30px;
}

.customer-card{
  background:linear-gradient(180deg, #f6fcf8 0%, #eef8f2 100%);
  border-radius:22px;
  padding:34px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid #dcefe4;
  box-shadow:0 8px 22px rgba(18, 88, 48, 0.06);
}

.customer-text{
  flex:1;
}

.customer-text h3{
  font-size:20px;
  font-weight:800;
  color:#1f3554;
  margin-bottom:28px;
  line-height:1.4;
  word-break:keep-all;
}

.customer-number-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.customer-number{
  font-size:30px;
  font-weight:800;
  color:#179a57;
  letter-spacing:-1px;
  line-height:1;
}

.customer-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  height:30px;
  padding:0 14px;
  border:1px solid #33bb73;
  border-radius:8px;
  color:#179a57;
  font-size:15px;
  font-weight:700;
  background:#ffffff;
}

.customer-desc{
  font-size:18px;
  color:#314763;
  line-height:1.7;
  margin-bottom:22px;
  word-break:keep-all;
}

.customer-time p{
  font-size:16px;
  color:#5a6d86;
  line-height:1.9;
}

.customer-icon-box{
  width:170px;
  height:170px;
  min-width:170px;
  border-radius:32px;
  background:linear-gradient(180deg, #edf7f1 0%, #e4f4ea 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d9eee2;
}

.customer-icon-box img{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
  filter:hue-rotate(70deg) saturate(1.2);
}

/* hover */
.customer-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(18, 88, 48, 0.1);
  transition:all 0.25s ease;
}

/* 태블릿 */
@media (max-width: 1100px){
  .customer-card{
    padding:28px 22px;
  }

  .customer-number{
    font-size:26px;
  }

  .customer-desc{
    font-size:16px;
  }

  .customer-icon-box{
    width:140px;
    height:140px;
    min-width:140px;
  }

  .customer-icon-box img{
    width:60px;
    height:60px;
  }
}

/* 모바일 */
@media (max-width: 768px){
  .customer-center-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .customer-card{
    flex-direction:column;
    align-items:flex-start;
	padding:26px 20px;
  }

  .customer-text h3{
    font-size:18px;
    margin-bottom:20px;
  }

  .customer-badge{
    font-size:14px;
    min-width:78px;
    height:28px;
  }

  .customer-desc{
    font-size:15px;
    margin-bottom:18px;
  }

  .customer-time p{
    font-size:14px;
  }

  .customer-icon-box{
    width:110px;
    height:110px;
    min-width:110px;
    border-radius:24px;
    align-self:flex-end;
	display:none;
  }

  .customer-icon-box img{
    width:48px;
    height:48px;
  }
}

/* 울산공제회 모바일 햄버거 버튼 디자인 */
@media (max-width: 900px) {

    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;
        padding: 0;

        background: #ffffff !important;
        color: #243247 !important;

        border: 1px solid #dce3eb !important;
        border-radius: 10px !important;

        box-shadow: none !important;
        cursor: pointer;
        transition: background-color .2s ease,
                    border-color .2s ease;
    }

    /* 햄버거 아이콘 */
    .menu-toggle i,
    .menu-toggle svg {
        color: #243247 !important;
        font-size: 25px !important;
    }

    /* 터치 시 */
    .menu-toggle:active {
        background: #f0f4f8 !important;
        border-color: #c7d3df !important;
        transform: none !important;
    }

    /* 키보드 접근성 */
    .menu-toggle:focus-visible {
        outline: 2px solid #496a9b;
        outline-offset: 2px;
    }
}