/*
Theme Name: 시원이비인후과
Author: Jeymedi
Author URI: https://jmedidesign.com
Description: 시원이비인후과 웹사이트 테마
Version: 1.0.0
*/

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LAYOUT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.inner {
    max-width: 1920px;
    width: 1600px;
    margin: 0 auto;
    position: relative;
}

body {
    overflow-x: hidden;
}

/* ------ 헤더 */
header.header {
    width: 100vw;
    position: relative;
    z-index: 999;
    transition: all ease 0.4s;
}
header.header div.logo {
    position: relative;
    width: fit-content;
}
header.header div.logo img.logo-main {
    max-width: 100%;
    width: 240px;
}
header.header.gnb {
   background-color: var(--primary);
}
/* 헤더 스크롤*/
header.header.gnb.on {
    position:fixed;
    top:0;
    background-color: var(--primary);
}

header.header > .inner,
section.sub-intro .inner,
section.sub-header .breadcrumb-zone .inner {
    width: 1440px;
}
/* 헤더 스타일링 */
header.header > .inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    padding: 30px 0;
}
/* 헤더-전화 */
header.header > .inner > div.call {
    display: flex;
    align-items: center;
}
header.header > .inner > div.call::before {
    content: '';
    display: block;
    width: 6em;
    height: 5em;
    background-image: url('./img/header-call.png');
    background-repeat: no-repeat;
    background-size: contain;
}
header.header > .inner > div.call a span.graycolor{
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0;
    color: #818181;
}
header.header > .inner > div.call a span.main-bluecolor{
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 0;
    color: #3286D3;
}
header.header > .inner > div.subway {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
header.header > .inner > div.subway > a {
    background-repeat: no-repeat;
    background-position: center left 6%;
    background-size: auto 60%;
    padding: 0.4em 1.0em 0.4em 2.25em;
    border-radius: 3em;
    letter-spacing: -0.025em;
    font-size: 1.15em;
    color: #fff;
    width: 50%;
    font-family: var(--p);
    background-color: var(--bg);
}
header.header > .inner > div.subway > a.subway-1st {
    background-image: url('./img/subway-1st.png');
    --bg : #FF6316;
}
header.header > .inner > div.subway a.subway-3rd{
    background-image: url('./img/subway-3rd.png');
    --bg :#E6AD22;
}
/* 헤더-로고 */
header.header > .inner > a.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    text-align: center;
}
header.header > .inner > a.logo img { max-height:100%; }

/* gnb */
header.header.gnb > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
header.header.gnb nav {
    width: 90%;
}
header.header.gnb nav ul.menu {
    align-items: center;
    display: flex;
    justify-content: space-around;
}

/* 메인메뉴 텍스트 */
header.header.gnb nav ul.menu > li {
    height: 100%;
    position: relative;
}
header.header.gnb nav ul.menu > li > a {
    align-items: center;
    text-align: center;
    font-size: 1.0em;
    color: #fff;
}
header.header.gnb nav ul.menu > li.current-menu-parent > a {
    font-weight: 600;
    border-bottom: 1px solid;
}

header.header.gnb nav ul.menu ul.sub-menu {
    visibility: hidden;
    position: absolute;
    top: 2.5em;
    left: calc(50% - 4.8em);
    display: none;
    z-index: 9;
    width: 10em;
    overflow: hidden;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 5px 25px -5px rgb(129, 148, 185, .35)
}
header.header.gnb nav ul.menu ul.sub-menu.on {
    display: block;
    visibility: visible;
}
header.header.gnb nav ul.menu ul.sub-menu > li a {
    font-size: 0.9em;
    color: #5F5E5E;
    display: block;
    padding: 0.45em 0;
    text-align: center;
}
header.header.gnb nav ul.menu ul.sub-menu > li::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}
header.header.gnb nav ul.menu ul.sub-menu > li { position:relative;
    transition: all ease 0.5s; }
header.header.gnb nav ul.menu ul.sub-menu > li.current-menu-item a,
header.header.gnb nav ul.menu ul.sub-menu > li:hover a {
    color: #fff;
    background-color: var(--primary);
}


/* ------ quickmenu  */
#quickmenu {
    position: fixed;
    right: 40px;
    bottom: calc(50vh - 36vh);
    z-index: 999;
    transition: all ease 0.6s;
    display: grid;
    grid-template-columns: 1fr;
    transform: scale(0.86);
}

#quickmenu a.call {
    color: #FFF;
    font-size: 1.8em;
    letter-spacing: 0.05em;
    line-height: 1.0;
    padding: 1.2em 0.6em 0.75em 0.6em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
    transition: background ease 0.6s;
    text-align: center;
    box-shadow: -5px 5px 15px rgba(50,50,50,.1);
}
#quickmenu a.call:hover {
    background-color: var(--primary);
}
#quickmenu div.group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 15px;
    padding: 1em 0.5em 1em 0.7em;
    background-color: #fff;
    border-bottom-right-radius: 5em;
    border-bottom-left-radius: 5em;
    box-shadow: -5px 5px 15px rgba(50,50,50,.1);
}

#quickmenu div.group div:nth-child(1) a{ background-image:url('./img/car.svg'); background-size: auto 2.2em; background-repeat: no-repeat;}
#quickmenu div.group div:nth-child(2) a{ background-image:url('./img/location.svg'); background-size: auto 2.2em; background-repeat: no-repeat;}
#quickmenu div.group div:nth-child(3) a{ background-image:url('./img/insta.svg'); background-size: auto 2.2em; background-repeat: no-repeat;}



#quickmenu div.group a {
    display: flex;
    flex-direction: column;
    min-height: 3.2em;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 1.4em;
    background-position: center center;
    cursor: pointer;
    transition: all ease 0.3s
}
#quickmenu div.group div p{
    font-size: 0.85em;
}

#quickmenu div.group div.quick-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem;
    background-color: #f5f5f5;
    height: 85px;
    width: 85px;
    margin-top: 0.5em;
    border-radius: 50%;
}
#quickmenu div.group div.quick-top a{
    background-image: url(./img/quick-arrow-icon.svg);
    background-repeat: no-repeat;
    background-size: auto 60%;
    background-position: top center;
    opacity: 90%;
    padding-top: 40%;
}
#quickmenu div.group div.quick-top span { color:#AEAEAE; letter-spacing:0;
    font-weight:500; }





















/* footer */
footer.footer {
    background-color: #F3F3F3;
}
footer.footer * {
    font-size: 18px;
    color: #555;
}
footer.footer .inner {
    padding: 120px 0;
    display: grid;
    grid-template-columns: 400px auto;
    justify-content: center;
    align-items: center;
    grid-gap: 200px;
}
footer.footer .inner > div {
    display: grid;
    grid-gap: 30px;
}
footer.footer .inner > div .info-p-wrap {
    display: grid;
    grid-gap: 10px;
}
footer.footer .inner > div .info-p-wrap b {
    font-weight: 700;
    color: #3a3a3a;
}
footer.footer .inner > div .info-p-wrap br.m + b {
    font-weight: 700;
    margin-left: 2em;
    color: #3a3a3a;
}

footer.footer .inner > div .footer-menu ul.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px ;
}
footer.footer .inner > div .footer-menu ul.menu li + li {
    border-left: 2px solid #ddd;
    line-height: 1.0;
}
footer.footer .inner > div .footer-menu ul.menu li a {
    padding: 0 1em;
    line-height: 1.0;
}
footer.footer .inner > div .footer-menu ul.menu li:nth-child(1) a {
    padding-left: 0;
}

footer.footer .copyright {
/*    background-color: #EAE4DC;*/
    background-color: #eaeaea;
}
footer.footer .copyright p {
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1.5em;
    color: #777;
    font-size: 12px;
    font-weight: 500;
}



























/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 메인 공통 */
section > .inner { padding:10em 0; font-weight:400 }
section > .inner p.section-title-eng {
    color: var(--primary);
    margin: 0 auto 1em;
    letter-spacing: 0.4em;
    font-weight: 500;
    font-size: 1.0em;
    text-transform: uppercase;
}
section > .inner h2.section-title {
    font-size: 2.7em;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-top: 0.7em;
}
section > .inner p.section-desc {
    letter-spacing: -0.02em;
    font-size: 1.05em;
    line-height: 1.6;
    color: #949494;
    margin-top: 2em;
}

/* ------ 01 메인비주얼 */
section.main-visual { position:relative; }
section.main-visual div.swiper-slide {
    height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
section.main-visual .swiper-pagination {
    top: unset;
    bottom: 7vh;
}
/* 메인비주얼 swiper pagination bullets */
section.main-visual .swiper-pagination-bullet {
    width: 100px;
    height: 5px;
    display: inline-block;
    border-radius: 1px;
    background: rgba(50, 50, 50,.3);
    opacity: 0.5;
    margin: 0 10px !important;
    transition: all ease 0.5s;
}
section.main-visual .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: rgba(255,255,255,.9);
    opacity: 1;
}

section.main-visual div.swiper-slide {
    position: relative;
    overflow: hidden;
}
/* 메인슬라이드 텍스트스타일링 */
section.main-visual div.swiper-slide .txt-box {
    width: 60vw;
    height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
section.main-visual div.swiper-slide .txt-box p.uppercase {
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.5em;
    margin-bottom: 2em;
    animation-delay: 0.4s;
    text-align: center;
    color: var(--primary);
}
section.main-visual div.swiper-slide .txt-box h1.main-text {
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-size: 2.7em;
    margin-bottom: 0.8em;
    animation-delay: 0.8s;
    text-align: center;
    color: #272727;
    font-family: var(--p);
}
section.main-visual div.swiper-slide .txt-box h1.main-text span {
    font-weight: inherit;
    color: var(--primary);
}
section.main-visual div.swiper-slide .txt-box h1.main-text span.circle-highlight {
    font-weight: 600;
    background-color: var(--primary);
    border-radius: 500px;
    color: #FFFB7D;
    padding: 0.1em 20px;
    letter-spacing: 5px;
}
section.main-visual div.swiper-slide .txt-box img {
    margin: 1em 0;
}
section.main-visual div.swiper-slide.swiper-slide-active .txt-box > * {
    opacity: 0;
    transform: translateY(20px);
    animation: slideEffect 0.5s ease alternate forwards;
}
section.main-visual div.swiper-slide.swiper-slide-active .txt-box img {
    opacity: 0;
    transform: translateY(20px);
    animation: slideEffect 1s ease 1s alternate forwards;
}
section.main-visual div.swiper-slide .txt-box p.main-desc {
    font-size: 1.0em;
    font-weight: 500;
    color: rgba(50, 50, 50, .8);
    letter-spacing: -0.03em;
    line-height: 1.5;
    text-align: center;
    animation-delay: 1.1s;
}
@keyframes slideEffect {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}


/* 메인슬라이드 1 */
section.main-visual div.swiper-slide.mv1 { background-image: url('./img/mv1.png'); }
/* 메인슬라이드 2 */
section.main-visual div.swiper-slide.mv2 { background-image: url('./img/mv2.jpg'); }
section.main-visual div.swiper-slide.mv2 .txt-box h1.main-text { margin-bottom: 0 }
section.main-visual div.swiper-slide.mv2 .txt-box img.bogun { height:10em; }




/* ------ 02 메인 상단 위치안내 */
section.main-info-section {
    background-color: #fafafa;
    display: grid;
    grid-template-columns: 1fr 2.1fr;
    align-items: stretch;
}
section.main-info-section > .box {
    padding: 40px;
}
/* 병원명 */
section.main-info-section > .box.bg-secondary {
    background-color: var(--secondary);
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    grid-gap: 0;
    padding-right: 60px;
}
section.main-info-section > .box.bg-secondary img {
    /*  심볼  */
    width: 100px;
    margin-right: 12em;
}
section.main-info-section > .box.bg-secondary p {
    color: #fff;
    text-align: right;
    line-height: 1.5;
}
section.main-info-section > .box.bg-secondary p strong {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.02em;
}
/* 병원정보 컨테이너 */
section.main-info-section > .box.info-wrap {
    width: 90%;
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* 비율조정 */
    justify-content: flex-start;
    align-items: center;
}

/* 이용안내 */
section.main-info-section > .box.info-wrap > div.info article {
    width: fit-content;
    margin: 0 auto;
}
section.main-info-section > .box.info-wrap > div.info {
    border-right: 1px solid #ccc;
}
section.main-info-section > .box.info-wrap > div.info p.subject {
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.25em;
}
/* 이용안내 - 시간표 */
section.main-info-section div.info .time-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: 7em auto; /* 비율조정 */
  grid-gap: 1em;
  margin-top: 2em;
}
section.main-info-section div.info .time-grid > div.grid-title {
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.main-info-section div.info .time-grid > div.grid-items {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 비율조정 */
    align-items: center;
    grid-gap: 0 1em;
}
section.main-info-section div.info .time-grid > div.grid-items > * { font-size:1.1em; font-weight:500; padding:0.5em }

section.main-info-section div.info .time-grid > div.grid-items small {
    font-size: 0.75em;
    opacity: 0.7;
}

/* 주차안내 */
section.main-info-section > .box.info-wrap > div.parking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 1em;
}
section.main-info-section > .box.info-wrap > div.parking img.parking-icon {
    width: 140px;
}

section.main-info-section > .box.info-wrap > div.parking p {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
    font-family: var(--p);
}

section.main-info-section > .box.info-wrap > div.parking .emart {
  height: 0.8em;
  vertical-align: middle;
  margin-right: 4px;
}


/* ------ 03 메인 클리닉 메뉴 */
section.main.main-menu {
    background-image: url('./img/main-menu-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    }
section.main div.inner h2.section-title{
    color:#5F5E5E ;
}
span.color-primary{
    color: var(--primary);
}
section.main.main-menu div.mainclinic-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 930px;
    margin: 40px auto;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card img {
    width: 100%;
    display: block;
    transition: all 0.3s ease;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card div.mainclinic-card-content {
        padding: 20px 10px 10px 10px;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card .mainclinic-btn {
    padding: 8px 25px;
}

/* 텍스트 & 버튼 오버레이 */
section.main.main-menu div.mainclinic-container div.mainclinic-card div.mainclinic-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 20px 10px;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card div.mainclinic-card-content p.section-title-eng {
    font-size: 0.65em;
    margin: 0;
    font-weight: 600;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card h3 {
    margin: 0 0 10px;
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card .mainclinic-btn {
    display: inline-block;
    padding: 10px 30px;
    background-color: #0A62A2;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* 호버 효과 */
section.main.main-menu div.mainclinic-container div.mainclinic-card:hover {
    box-shadow: 0 0 15px rgba(0, 180, 255, 0.6);
    border-radius: 15px;
}
section.main.main-menu div.mainclinic-container div.mainclinic-card:hover img {
    transform: scale(1.05);
}
section.main.main-menu div.mainclinic-container div.mainclinic-card:hover .mainclinic-btn {
    background-color: #0092FF;
    padding: 10px 50px;
    color: #fff;
}





/* ------ 04 메인 의료진 (*) */
section.main.main-greeting div.inner div.doctor-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 60px auto;
  height: 700px;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-left {
  flex: 1.1;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-left img {
  width: 100%;      /* 부모 영역에 가로 꽉 채우기 */
  height: auto;     /* 세로 비율 유지 */
  display: block;   /* 여백 제거 */
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right {
  flex: 1;
  padding-top: 50px;
}
section.main.main-greeting div.inner div.doctor-section div.doctor-right strong{
  color: #5F5E5E;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 2px;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right span.name {
  color: #80B8F2;
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: 12px;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right div.title-line {
  width: 70%;        
  height: 1.5px;            
  background-color: #80B8F2; 
  margin: 20px 0;        
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right div.certification img {
  margin: 10px 0 20px;
  max-width: 100%;  
  height: auto;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right ul.career-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right ul.career-list li {
  position: relative;
  margin-bottom: 6px;
  line-height: 1.4;
  padding-left: 14px;
  color: #5F5E5E;
  font-weight: 400;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right ul.career-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 4px;
  height: 4px;
  background-color: var(--primary);
  border-radius: 50%;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right a.career-btn.arrow {
  display: inline-block;
  background-color: #0092FF;
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right a.career-btn.arrow:hover {
  background-color: var(--tertiary);
}

section.main.main-greeting div.inner div.doctor-section div.doctor-right a.career-btn.arrow{
    background-image: url(./img/career-btn-arrow.svg);
    background-repeat: no-repeat;
    background-size: 3em;
    background-position: left 9em top 1.1em;
    padding: 0.9em 6em 0.9em 2em;
}




/* ------ 05 마음으로 진료 */
 section.main.mind-clinic-section{
    margin: 200px auto;
 }
 section.mind-clinic-section div.container {
    width: 100%;
/*    max-width: 1920px;*/
    text-align: center;
    position: relative;
  }

 section.mind-clinic-section div.container  p.title-ent {
    color: #D9EFFF;
    letter-spacing: 40px;
    font-weight: 700;
    margin-bottom: 60px;
    text-align: center;
    font-size: 4em;
  }

 section.mind-clinic-section div.container div.line-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
  }

 section.mind-clinic-section div.container div.line-wrapper::before{
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--primary);
  }

 section.mind-clinic-section div.container div.line-wrapper::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--primary);
  }


   section.mind-clinic-section div.container div.image-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    gap: 40px;
  }

   section.mind-clinic-section div.container div.image-wrapper img {
    display: block;
    height: auto;
    width: 100%;
  }

      section.mind-clinic-section div.container div.image-wrapper div.symbol {
    position: absolute;
    bottom: 73%;
    left: 81.5%;
    width: 270px;
    height: 270px;
    background: url(./img/mind-ent-symbol.png);
    animation: rotate360 15s linear infinite;
    background-repeat: no-repeat;
    z-index: -1;
  }

  @keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  section.mind-clinic-section div.container h2.section-title{
    font-size: 2.7em;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #5F5E5E;
    text-align: center;
  }

  section.mind-clinic-section div.container h2.section-title.mind::before,
  section.mind-clinic-section div.container h2.section-title.mind::after {
    content: '';
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    background-color: var(--primary);
    border-radius: 50%;
    top: 47%;
    left: 50%;
  }
  section.mind-clinic-section div.container h2.section-title.mind::before {
    transform: translateX(-5.6em);
  }
  section.mind-clinic-section div.container h2.section-title.mind::after {
    transform: translateX(5.5em);
  } 


   section.mind-clinic-section div.container p.section-desc{
    letter-spacing: -0.02em;
    font-size: 1.05em;
    line-height: 1.6;
    color: #727272;
    margin-top: 2em;
    font-weight: 400;
   }






/* ------ 06 장비소개 (*) */
section.main-equipment {
}
section.main-equipment .equip-slide-wrapper {
/*  감싸기위한  */
/*    border: 2px solid lime;*/
    position: relative;
    margin-top: 80px;
}
section.main-equipment .equip-slide {
/*  실제기능  */
/*    border: 3px solid green;*/
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 70px;
}
section.main-equipment .equip-slide .equip-slide-box{
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.main-equipment .equip-slide p.equip-name{
    color: var(--primary);
    font-size: 1.3em;
    font-weight: 700;
    margin-top: 20px;
    }
section.main-equipment .equip-slide p.equip-name::after{
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color:var(--primary) ;
    margin: 10px auto;
}
section.main-equipment .equip-slide p.equip-name-eng{
    color: #5F5E5E;
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 장비 버튼 */
section.main-equipment .equip-control {}
section.main-equipment .equip-control .swiper-button-prev,
section.main-equipment .equip-control .swiper-button-next {
    width: 50px;
    aspect-ratio: 1 / 1;
/*    border: 1px solid magenta;*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1 !important;
}

section.main-equipment .equip-control .swiper-button-prev::after,
section.main-equipment .equip-control .swiper-button-next::after {
    display: none;
}

section.main-equipment .equip-control .swiper-button-prev { background-image:url('./img/equip-control-prev.svg');
    left: 60px; }
section.main-equipment .equip-control .swiper-button-next { background-image:url('./img/equip-control-next.svg');
    right: 60px; }

/* 장비 스크롤 */
.swiper-scrollbar.equip-scrollbar {
    background-color: #D9D9D9 !important;
     width: 50% !important;
    left: 25% !important;
}
.equip-scrollbar .swiper-scrollbar-drag {
    background-color: #0092FF !important;;
}




/* ------ 07 메인 둘러보기 (*) */
section.main-preview {
    position: relative;
}
/* 전체 스와이퍼 wrapper */
section.main-preview div.preview-swiper-zone {
    max-width: 100vw;
    width: 75%; /* 너비 */
    margin: 80px auto 50px;
    overflow: hidden;
}
/* 각 개별 슬라이드(공통) */
section.main-preview .swiper-slide {
    aspect-ratio: 2 / 1;
    background-size: cover;
    background-position: center;
}
section.main-preview .preview-big  .swiper-slide {
    border: 5px solid #4987c7;
    border-radius: 30px;
}
/* 썸네일 슬라이드  */
section.main-preview .preview-thumbs { margin-top:30px }
section.main-preview .preview-thumbs .swiper-slide {
    aspect-ratio: 16 / 9;
    cursor: pointer;
    filter: opacity(0.8) brightness(0.5);
    border-radius: 10px;
    transition: filter ease 0.3s;
}
section.main-preview .preview-thumbs .swiper-slide.swiper-slide-thumb-active {
    filter: opacity(1) brightness(1);
}
/*  버튼스타일링 (공통) */
section.main-preview .swiper-button-prev,
section.main-preview .swiper-button-next {
    aspect-ratio: 1 / 1;
    width: 60px; height: unset;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}
/*  버튼 기본 < > 제거    */
section.main-preview .swiper-button-prev::after,
section.main-preview .swiper-button-next::after { display:none; }

section.main-preview .swiper-button-next {
    right: 80px;
    background-image:url('./img/equip-control-next.svg'); 
}
section.main-preview .swiper-button-prev {
    left: 80px;
    background-image:url('./img/equip-control-prev.svg');
}



/* ------ 08 오시는길 (*) */
section.main-loca {
    background-image: url(./img/loca-bg.png);
}
section.main-loca .inner {
    width: 100vw;
}
section.main-loca .inner p.section-title-eng,
section.main-loca .inner h2.section-title {
    color: #fff !important;
}
section.main-loca .inner h3.section-title {
    color: #FFFCCB;
    margin-top: 10px;
    margin-bottom: 50px;
}
section.main-loca .map {
    background-color: #f1f1f1;
    width: 70%;
    margin: 0 auto;
    aspect-ratio: 2.5 / 1;
    box-sizing: border-box;
    border-radius: 3em;
    border:5px solid #0092FF;
    overflow: hidden;
}


/* 하단 인포 */
section.main-loca div.loca-info-wrap {
    display: grid;
    width: 90%;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 80px auto 0;
    text-align: center;
    align-items: stretch;
    justify-content: center;
}
/* 하단 인포 각 영역 공통 */
section.main-loca div.loca-info-wrap > div {
    display: grid;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    padding: 50px 0 80px;
}
section.main-loca div.loca-info-wrap > div + div {
    border-left: 1px solid #cfdae5;
}
section.main-loca div.loca-info-wrap h4.txt-primary {
  font-size: 2.2em;
  font-weight: 700;
  color: #0099FF;
  margin-bottom: 0.8em;
  text-align: center;
}

/* ===== 진료시간 ===== */
section.main-loca div.loca-info-wrap > div.openclose {}

section.main-loca div.loca-info-wrap > div.openclose article + p {
  display: block;
  color: #4987C7;
  margin-top: 40px;
}

section.main-loca .time-grid {
    width: fit-content;
    margin: 0 auto;
}
section.main-loca .time-grid > div.grid-items {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 비율조정 */
    align-items: center;
    grid-gap: 0 1em;
}
section.main-loca .time-grid > div.grid-items > * { font-size:1.1em; font-weight:600; padding:0.5em; font-family:var(--p); }

section.main-loca .time-grid > div.grid-items small {
    font-size: 0.75em;
    opacity: 0.7;
}

/* ===== 주차 안내 ===== */
section.main-loca div.loca-info-wrap > div.parking { }
section.main-loca div.loca-info-wrap > div.parking * { text-align:center; }
section.main-loca div.loca-info-wrap > div.parking img.parking-icon { width:140px; margin-bottom:1em }
section.main-loca div.loca-info-wrap > div.parking img.parking-icon + p {
    line-height: 1.5;
    font-size: 1.1em;
    font-weight: 500;
}
section.main-loca div.loca-info-wrap > div.parking img.parking-icon + p img.emart {
    height: 0.8em;
    vertical-align: middle;
}

/* 하단 인포 버튼 공통 */
section.main-loca div.loca-info-wrap a.btn-icon {
    display: flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 간격 */
    padding: 5px 20px;
    border: 2px solid var(--border);
    background-color: var(--bg);
    border-radius: 5em;
    font-weight: 500;
    margin-top: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
/* 하단 인포 버튼 공통 : 호버 시 효과 */
section.main-loca div.loca-info-wrap a.btn-icon:hover {
  border-color: var(--point);
  box-shadow: 0 0 12px var(--point); /* 형광 불빛처럼 발광 */
}
/* 하단 인포 버튼 공통 : 아이콘 크기 */
section.main-loca div.loca-info-wrap a.btn-icon img.icon {
  width: 50px;
  height: 50px;
}
/* 하단 인포 버튼 공통 : 화살표 */
section.main-loca div.loca-info-wrap a.btn-icon img.arrow {
  width: 45px;
  height: auto;
}
section.main-loca div.loca-info-wrap a.btn-icon.naver {
    /* 네이버 */
    --border : #00c73c;
    --point : #00c73c;
    --bg : #fff;
}
section.main-loca div.loca-info-wrap a.btn-icon.call {
    /* 전화문의 */
    --border : #0092FF;
    --point : #67BEFF;
    --bg : #EBFAFF;
}

/* ===== 진료문의 ===== */
section.main-loca div.loca-info-wrap > div.call {
    background-image: url('./img/symbol-op10.svg');
    background-repeat: no-repeat;
    background-position: right 10% top 40%;
}
section.main-loca div.loca-info-wrap > div.call p.number {
  font-size: 3.5em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}













/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB TEMPLATE LAYOUT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section.sub > .inner { padding:100px 0 }
/* 서브헤더 */
section.sub.sub-header {
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    position: relative;
}
section.sub.sub-header .inner {
    width: 1440px;
    padding: 150px 0 80px;
    position: unset;
}
section.sub.sub-header .inner::before {
    content: '';
    position: absolute;
    top: 60px; left: 50%;
    transform: translateX(-810px);
    display: block;
    width: 150px; aspect-ratio: 1 / 1;
    background-image: url('./img/symbol-op10.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
section.sub .title-zone p.title-sub {
    color: var(--primary);
    font-weight: 700;
}
section.sub .title-zone .title {
    font-weight: 700;
    margin-bottom: 0.75em;
    font-size: 2.25em;
}
section.sub.sub-header .title-zone p.eng {
    color: rgba(0,146,255,.56);
    letter-spacing: 0.2em;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.8em;
}

/* 서브 인트로 */
section.sub .title-zone p.title-sub.eng {
    font-weight: 600;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-bottom: 1em;
}
section.sub .title-zone h3.title {
    color: #5F5E5E;
}
section.sub .title-zone h3.title span {
    color: var(--primary);
    font-size: inherit;
    font-weight: inherit;
}
section.sub.sub-intro .title-zone p.desc {
    color: #727272;
    font-weight: 600;
}
section.sub.sub-intro .title-zone p.desc::before {
    content: '';
    display: block;
    margin: 0 auto;
    border: 2px solid #80B8F2;
    background-color: #272727;
    border-radius: 50%;
    width: 12px; aspect-ratio: 1 / 1;
    margin: 0 auto .51em;
}
section.sub.sub-intro .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    align-items: center;
    margin-top: 80px;
}
section.sub p {
    color: #727272;
    font-weight: 500;
    line-height: 1.6;
}
section.sub p.txt-black{
    color: #000;
    font-weight: 600;
    line-height: 1.6;
}

section.sub.sub-intro .intro-grid .txt p + p {
    margin-top: 1.5em;
}

section.sub .unit { margin: 80px auto 0; }
section.sub .unit.ml { margin: 50px auto 0; }
section.sub .unit.unit90 { width:90% }
section.sub .unit.unit80 { width:80% }
section.sub .unit.unit70 { width:70% }
section.sub .unit.unit60 { width:60% }
section.sub .unit.unit50 { width:50% }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB PAGE Elements
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 탭 */
section.sub.tab-content {}
section.sub.tab-content .tab-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
}
/**/
section.sub.tab-content div.tab-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 5px;
    flex-wrap: wrap;
}
section.sub.tab-content.vaccine div.tab-buttons {
    justify-content: center;
}
section.sub.tab-content div.tab-buttons > .tab-button {
    width: 10em;
    font-weight: 600;
    border: 2px solid var(--primary);
    border-radius: 3em;
    padding: 0.5em;
    font-size: 0.9em;
    text-align: center;
    cursor: pointer;
}
section.sub.tab-content div.tab-buttons > .tab-button.active { background-color: #EBFAFF; }
/**/
section.sub.tab-content div.tab-desc {
    margin-top: 2em;
}
section.sub.tab-content div.tab-desc p + p { margin-top:1.5em }

/*  */
section.sub.tab-content div.tab-con > * { display:none; }
section.sub.tab-content div.tab-con > *.active { display:block; }



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB PAGE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/*비염*/
section.sub.img-txt-centerbox div.inner img{
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
}

section.sub.grid-trio div.inner div.grid-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 1000px;
    margin: 0 auto;
    padding: 60px 0;
}

section.with-img.change{
    background-color:#F2F9FF ;
}
section.with-img.change > .inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    width: 1200px;
}
section.with-img.change > .inner .content p.desc-smalltitle{
    font-size: 1.3em;
}
section.with-img.change > .inner .content strong.desc-title{
    font-weight: 700;
    font-size: 2.2em;
}
section.with-img.change > .inner .content > p.desc{
    margin: 50px 0;
}

section.with-img.change > .inner .content .txt-linebox p{
    background-color: #fff;
    border-radius: 100px;
    padding: 10px 25px;
    width: 600px;
    margin-bottom: 15px;
}

section.number-label div.label-group {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;
    width: 44%;
    margin: 50px auto 0;
}
section.number-label div.label-group p {
   background-color: #EFFBFF;
    border:solid 2px #0092FF;
    padding: 0.5em 1em;
    border-radius: 3em;
    font-size: 1em;
    text-align: center;
    box-shadow: var(--shadow);
}


section.sub.grid-trio div.inner div.grid-trio.nose-clean{
    margin: 60px auto;
}

section.sub.grid-trio div.inner div.grid-trio .card{
     background: #F2F9FF;
      border-radius: 20px;
      padding: 70px 20px 40px 20px;
      text-align: center;
      box-shadow: 0 4px 14px rgba(0,0,0,0.2);
      position: relative;
}

section.sub.grid-trio div.inner div.grid-trio .card .number {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 40px;
      background: #000;
      color: #fff;
      border-radius: 50%;
      font-weight: 700;
      border: 4px solid #80B8F2;
      position: absolute;
      left: 50% ;
      transform: translateX(-50%);
      top: -30px;
}

section.sub.grid-trio div.inner div.grid-trio .card img {
      margin-bottom: 30px;
}

  /* 배너 본체 */

  .notice-banner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #003468; /* 진한 파랑(이미지 기반 색상) */
    color: #fff;
    border-radius: 999px; /* 완전한 pill 모양 */
    padding: 12px 22px;
    max-width: 980px; /* 필요시 조정 */
    width: 100%;
    box-shadow: none;
    box-sizing: border-box;
    position: relative;
  }

  /* 좌측 동그란 아이콘 래퍼 */
  .icon-wrap{
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #72B0EF;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing: border-box;
    padding: 6px; 
    border: 3px solid rgba(255,255,255,0.12); 
    position: absolute;
    left: -3%;
    top: -12px;
  }
.icon-wrap img {
    display:block;
    width:80%;
    object-fit:contain;
}
  .notice-text{
    font-size:1.2em;
    color:#fff;
    font-weight:700;
  }