@charset "utf-8";
/* ======================================================================================================================= */
/* ======================================================= main style ==================================================== */
/* ======================================================================================================================= */

main {
    position: relative;
}
#wrapper {
    overflow: hidden;
}
.content:first-of-type {
    padding-top: 0;
}
.content-slide{
    background-color: #000;
}

.main-slide-section {
  background-color: #000;
}

.main-slide {
    background-color: #000;
    max-width: 1920px;
    margin: 0 auto;
}

.main-slide .swiper-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.main-slide .swiper-slide .img {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    transition: transform 0.8s ease-in-out;
}

.main-slide .swiper-pagination {
    left: 0;
    bottom: 40px !important;
    top: auto !important;
    width: 100%;
}
.main-slide .swiper-pagination-bullet {
    margin: 0 4px;
    width: 14px;
    height: 14px;
    background: #ffffffdd;
    transition: all 0.4s ease-in-out;
}
.main-slide .swiper-pagination-bullet-active {
    background: #ffffff;
    opacity: 1;
}

.main-tit {
    margin-bottom: 40px;
    text-align: center;
}
.main-tit .sub-tit {
    font-weight: 600;
    white-space: pre-line;
}
.main-tit .tit {
    font-weight: 900;
    font-family: 'NanumSquare', san-serif;
    transform: skew(-0.1deg);
    white-space: pre-line;
}
.main-tit .sub {
    margin-top: 30px;
    white-space: pre-line;
}


/* ===================== Mobile size : 425px ======================= */

@media screen and (max-width: 480px) {
    main {
        margin-top: 55px;
    }

    .main-tit {
        margin-bottom: 20px;
    }
}

/* ===================== Mobile size : 425px ======================= */

@media screen and (max-width: 480px) and (min-height: 720px) {
    
}

@media screen and (max-width: 480px) and (min-height: 850px) {
    .main-slide .swiper-slide {
        height: calc(var(--vh, 1vh) * 100 - 285px);
    }
}

/* main-section-01 */
.main-section-01{

}
.main-section-01 .main-section-01-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
.main-section-01 .main-section-01-box > div{
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.main-section-01 .main-section-01-box > div:nth-child(1) img {
  width: 100%;
}
.main-section-01 .main-section-01-box > div:nth-child(2){
  background-color: #e8edf4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
}
.main-section-01 .main-section-01-box-num{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #23305b;
  height: 35px;
  width: 35px;
  font-weight: 800;
  font-size: 20px;
  flex-shrink: 0;
}
.main-section-01 .main-section-01-box > div:nth-child(2) p{
  font-size: 28px;
  font-weight: 800;
  color: #000;
}


/* doctor-intro */
.doctor-intro {
  margin-top: 150px;
  padding-bottom: 120px;
  position: relative;

  background: url(../img/main/doctor-intro-bg.jpg) bottom/contain no-repeat;
  background-color: #f9fafc;
}
.doctor-intro p{
  font-size: 24px;
  
}
.intro-doc-name{
  margin-top: 80px;
  font-size: 24px;
  font-weight: 700;
}
.intro-doc-name p{
  font-weight: 700;
}
.intro-doc-name > span:last-child b{
  font-size: 35px;
}

/* main03 */
.main-circle-con{
  display: flex;
  justify-content: space-between;
}

.main-circle-con .main-circle{
  background-color: #23305b;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.main-circle-con .main-circle p{
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  color: #fff;
}

.main03 .main-sub{
  font-size: 70px;
}
.main03-p-box{
  margin: 0 auto;
  max-width: 800px;
  padding: 40px 10px;
  border: 1px solid #000;
}
.main03-p-box p{
  font-size: 24px;
}

@media(max-width:1400px) {
  .doctor-intro p{
    font-size: 18px;
  }
}


@media(max-width:1200px) {

  .main-circle-con .main-circle{
      width: 25vw;
    height: 25vw;
  }
}

@media(max-width:769px) {
  .main-circle-con {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .main-circle-con .main-circle{
      width: 80vw;
    height: 80vw;
  }
  .doctor-intro p{
    font-size: 18px;
  }
  .doctor-intro .middle-title h3{
    font-size: 24px;
  }
  .main-section-01 .main-section-01-box{
    margin: 10px;
  }
  .main-section-01 .main-section-01-box > div:nth-child(2) p{
    font-size: 20px;
  }
  .main-section-01 .main-section-01-box > div{
    border-radius: 10px;
  }
  .main-section-01 .main-section-01-box > div:nth-child(2){
    padding: 14px;
  }
  /* doctor-intro */
  .doctor-intro {
    margin-top: 120px;
    padding-bottom: 0;
    background: none;
    background-color: #f9fafc;
  }

  .main03 .main-sub {
    font-size: 40px;
  }
}

@media(max-width:429px) {
  .main-section-01 .main-section-01-box > div:nth-child(2){
    padding: 8px;
  }
  .main-section-01 .main-section-01-box > div:nth-child(2) p{
    font-size: 16px;
  }
  .doctor-intro p{
    font-size: 16px;
  }
  .main03 .main-sub{
    font-size: 28px;
  }
  .main03-p-box p{
    font-size: 18px;
  }
}

/* main04 */
.main04 {
  padding: 120px 0 !important;
  position: relative;
  margin-top: 120px;

  background-color: #8ea6c9;
  color: #fff;
}

.main04 p {
  font-size: 24px;
}

.main04-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.main04-img-box{
  background-color: #fff;
}

@media(max-width:769px) {
  .main04 p {
    font-size: 18px;
  }
}

@media(max-width:429px) {
  .main04 .main04-sub{
    text-align: center;
    gap: 20px;
  }
  .main04 p {
    font-size: 18px;
  }
}

/* BA-section */
.main-ba-section {
  text-align: center;
}

.ba-box{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ba-box strong {
  margin-top: 10px;
  font-size: 28px;
  letter-spacing: 0.5rem;
  font-weight: 700;
}

.ba-box .ba-img{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.ba-box .ba-login-cover{
    backdrop-filter: blur(4px);
    background-color: #000000c3;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    cursor: pointer;
}

.ba-box .ba-login-cover p{
    color: #fff;
    font-size: 20px;
}

.ba-box .ba-login-cover img{
    max-width: 80px;
}

.ba-tit {
  font-size: 24px;
}
.ba-tit b{
    color: #fff;
    font-weight: 800;
    display: inline-block;
    padding: 6px 14px;
    line-height: 1;
    border-radius: 999px;
    background-color: #23305b;
    margin-right: 10px;
}
.ba-sub-box{
  display: inline-block;
  margin: 40px auto;
  border: 2px solid #23305b;
  text-align: center;
  padding: 20px 40px;
  border-radius: 999px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.ba-sub-box p{
  font-size: 24px;
  text-align: center;
  white-space: pre-line;
}

@media(max-width:1200px) {
  .ba-sub-box p {
    font-size: 18px;
  }
}

@media(max-width:769px) {
  .ba-sub-box{
    padding: 10px;
    width: 100%;
    border-radius: 14px;
  }
  .ba-sub-box p {
    font-size: 16px;
  }
  .ba-box strong{
    font-size: 24px;
  }
  .ba-tit {
    font-size: 18px;
  }
  .ba-tit b{
    margin-right: 0px;
  }
  .ba-box-after {
    padding-top: 40px;
  }
  .ba-box .ba-login-cover img{
    max-width: 50px;
  }
  .ba-box .ba-login-cover {
    gap: 10px;
  }
  .ba-box .ba-login-cover p {
    font-size: 14px;
  }
}

/* info-map */
.info-map {
  padding-bottom: 120px;
  background-color: #f3f6f9;
}
.info-map h4.info-map-title-con {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.info-map p {
  font-size: 18px;
}

.info-map p.bus-sub{
  margin-top: 4px;
  font-size: 14px;
}
.info-map h4.info-map-title-con > span:first-child {
  flex-shrink: 0;
}
.info-map h4.info-map-title-con img {
  height: 35px;
  width: 35px;
  flex-shrink: 0;
}
.info-map .info-map-sub {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-weight: 800;
    gap: 4px;
}
.info-map h2.info-map-sub {
  font-weight: 800;
}

/* --- 진료시간 자간 및 양쪽 정렬 수정 영역 --- */
.info-map-sub .info-time {
  display: flex;
  gap: 80px;
  align-items: center;
}

/* 첫 번째 li (요일/제목) 영역 자간 균등 배분 */
.info-map-sub .info-time li:nth-child(1) {
    width: 150px;                   /* 폰트 크기(24px) 대비 적절한 너비로 조정 */
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;  /* ★ 한글 글자 단위 자간 균등 배분 핵심 속성 */
    flex-shrink: 0;                 /* 너비 줄어듦 방지 */
    white-space: nowrap;
}
/* ------------------------------------------- */

/* 카카오 지도 박스 높이 등 레이아웃 보정 */
.info-map .root_daum_roughmap {
  width: 100% !important;
  border-radius: 15px;
  overflow: hidden;
}

/* 오시는 길 카테고리 카드 */
.info-map-category .info-map-category-box {
  text-align: center;
  background-color: #fff;
  box-shadow: 9px 10px 21px -3px #1a6db617;
  border-radius: 30px;
  padding: 20px;
}
.info-map-category .info-map-category-box strong {
  font-weight: 700;
  font-size: 24px;
}
.info-map-category .info-map-category-box > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  height: 180px;
}
.info-map-category .info-map-category-box > div:first-child {
  border-bottom: 1px solid #00000010;
}

/* 미디어 쿼리 (반응형) */
@media(max-width:1200px) {
  .info-map-category .info-map-category-box > div {
    height: 250px;
  }
  .info-map .info-map-sub {
    font-size: 20px;
  }
  .info-map-btn a {
    font-size: 18px;
    padding: 8px;
  }
}

@media(max-width:769px) {
  .info-map h4.info-map-title-con{
    font-size: 16px;
  }
  .info-map {
    padding-bottom: 80px;
  }
  .info-map-btn {
    max-width: 100%;
  }
  .info-map-btn a {
    font-size: 18px;
    padding: 2px;
  }
  .info-map .info-map-sub {
    font-size: 18px;
  }
  .info-map-sub .info-time {
    gap: 20px;
  }
  
  /* 모바일 화면에서 요일 항목 너비 자동 조정 */
  .info-map-sub .info-time li:nth-child(1) {
    width: 95px;
  }

  .info-map-category .info-map-category-box .info-map-category-box-con > div {
    max-height: 170px;
    height: auto;
  }
  .info-map-category .info-map-category-box p {
    font-size: 16px;
    font-weight: 700;
  }
}