/* 척추관절 병원 CSS */
/* 원본 CSS : introduce */
@import url('https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
:root {
  --font-size-30: clamp(20px,2.564vw,30px); /* 비율: 1170px */
  --font-size-28: clamp(16px,2.393vw,28px); /* 비율: 1170px */
  --font-size-26: clamp(16px,2.222vw,26px); /* 비율: 1170px */
  --font-size-24: clamp(14px,2.051vw,24px); /* 비율: 1170px */
  --padding-clamp-top: clamp(30px, 5.1282vw, 60px);

  --hospital-padding-top-01: clamp(25px, 7.8125vw, 50px);
  --hospital-padding-top-02: clamp(40px, 12.5vw, 80px);
  --disease-intro-img-box-gap: clamp(10px, 3.90625vw, 25px);

  --gwanak-intro-section:clamp(112px, 6.3036vh, 208px);
}
.gwanak-intro-section{
  padding:var(--gwanak-intro-section) 0px;
  word-break: keep-all;
}
.sub-section-title{
  text-align: center;
  padding-bottom: var(--content-between-gap-22);
}
.icon{
  width:50px;
  height:50px;
  margin: 0 auto 30px;
  background: #333;
  line-height: 1;
  border-radius:50%;
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  &::after{
    content:"";
    display:block;
    position:absolute;
    width:1px;
    height:24px;
    background-color: var(--color-board-05);
    left:calc(50% - 0.5px);
    bottom:-24px;
    z-index: 0;
  }
  & img{
    width:100%;
  }
}
.mo{
  display: none;
  @media screen and (max-width: 769px) {
    display: block;
  }
}
.pc{
  display: block;
  @media screen and (max-width: 769px) {
    display: none;
  }
}
/* ***************************************************** */
/* ******************* 본문 ******************* */
/* ***************************************************** */
.gwanak-intro1{
  background:url('/img/sub/hospital/bluegray-dot.png') no-repeat 50% 100%;
  background-size:100% clamp(282px, 52vh, 565px);

  & .sub-section-title-box.left{
    justify-content: flex-start;
    text-align: left;

    & .sub-section-text{
      font-weight:var(--font-weight-bold);
      color:var(--color-main-03);
      padding-bottom: var(--content-vertical-gap-sm);
    }
  }
  & .sub-section-title-gwanak{
    & .disease-intro-img-box {
      display: grid;
      gap: var(--disease-intro-img-box-gap);
      margin-top: var(--mobile-content-vertical-gap-sm);
      max-width: 100%;
      margin:0px auto 60px;

      &.col-4 {
        grid-template-columns: repeat(4, 1fr);
        @media screen and (max-width: 550px) {
          & {
            grid-template-columns: repeat(2, 1fr);
          }
        }
      }
      & .disease-intro-img-item {
          position: relative;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          flex-direction: column;
          border: 1px solid var(--color-line-01);
          border-radius: var(--simple-input-border-radius);
          background:rgb(255,255,255);
          box-shadow: 0px 6px 10px rgba(0,0,0,0.16);
          box-sizing: border-box;
          padding:var(--hospital-padding-top-01) var(--disease-intro-img-box-gap);
          aspect-ratio: 3/2;

          @media screen and (max-width: 550px) {
            & {
              align-items: flex-start;
              aspect-ratio: 1/1;
            }
          }
          & div{
            width:30%;
            margin:0px auto 12px;
            & img {width: 100%;}
          }
          & h3{
            font-size: var(--font-size-22);
            font-weight: var(--font-weight-bold);
            margin:0px auto 8px;
          }
          & p{
            font-size: var(--font-size-16);
            font-weight: var(--font-weight-regular);
            line-height:1.4;
            color: var(--color-profile-03);
          }
        }
    }
    & dl{
      line-height: 1.5;
      word-break: keep-all;
      & dt{
        font-size: var(--font-size-22);
        font-weight: var(--font-weight-extra-bold);
        margin-bottom: 4px;
      }
      & dd{
        font-size: var(--font-size-18);
        font-weight: var(-font-weight-normal);
      }
    }
  }
}

.gwanak-intro2{
  & .sub-section-text{
    margin-bottom:var(--mobile-content-vertical-gap-sm);
  }
  & .gwanak-intro2-box{
    max-width: 1070px;
    margin: var(--hospital-padding-top-01) auto 0px;

    & ul{
      display: grid;
      gap: var(--disease-intro-img-box-gap);
      grid-template-columns: repeat(3, 1fr);
      gap:8px;
      margin: 0 auto 30px;
      & li{
        box-sizing: border-box;
        border:1px solid #b7babd;
        padding:12px;
        & img{
          width:100%;
        }
      }
    }
    & p{
      text-align: center;
      font-size: var(--font-size-18);
      color: var(--color-text-03);
      line-height: 1.8;
      word-break: keep-all;
    }
  }
}
.gwanak-intro3{
   background: #EAE9E7;
   text-align: center;
   & .sub-section-text{
     margin-bottom:var(--mobile-content-vertical-gap-sm);
   }
   & h3{
     position: relative;
     max-width: 600px;
     width:fit-content;
     border-top:2px solid #B4AEA7;
     border-bottom:2px solid #B4AEA7;
     margin: 0 auto 40px;
     padding: 15px 0;
     font-family: 'NanumMyeongjo';
     font-size: var(--font-size-22);
     line-height: 1.3;
     font-weight: bold;
     text-align: center;
     color: #333;
   }
   & .gwanak-intro3-box{
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     max-width: 1200px;
     margin: 0px auto;

     & .value-item{
       min-width: 0;
       height: 100%;
     }
     & .gwanak-intro3-img{
        overflow: hidden;
        & img {
          display: block;
          width:100%;
          object-fit: cover;
        }
     }
     & .gwanak-intro3-text{
        padding:54px;
        box-sizing: border-box;
        display: flex;
        @media screen and (max-width: 769px){
          padding:0px 16px;
        }
      }
     @media screen and (min-width: 769px){
       & {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 0px;
         align-items: stretch;

         & .value-item:nth-child(1){
           grid-column: 2;
           grid-row: 1;
         }
         & .value-item:nth-child(2){
           grid-column: 1;
           grid-row: 1;
           & p{
             text-align: right;
           }
         }
         & .value-item:nth-child(3){
           grid-column: 1;
           grid-row: 2;
         }
         & .value-item:nth-child(4){
           grid-column: 2;
           grid-row: 2;
           & p{
             text-align: left;
           }
         }
       }
     }
   }
}

.gwanak-clinic{
  display: grid;
  width:100%;
  max-width:1200px;
  margin:0px auto;
  & .gwanak-clinic-text{
    & h2{
      text-align: left;
      align-items: flex-start;
      color:rgb(255,255,255);
      & strong{
        display: block;
        font-size:var(--font-size-22);
        font-weight:800;
        text-align: left;
        margin-bottom: var(--disease-intro-img-box-gap);
        letter-spacing:-0.032em;
      }
    }
    & p{
      color:rgb(255,255,255);
      line-height: 1.5;
      text-align:left;
    }
  }
}

.gwanak-intro4{
  background:#1861BF;
  & .gwanak-intro4-wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
     @media screen and (max-width: 769px){
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
    & h2{
      & strong{
        color:#00CBFF;
      }
    }
    & .gwanak-intro4-img{
      & img{width:75%;}
      @media screen and (max-width: 769px){
        & {
          margin:24px auto 0px;
          & img{width:100%;}
        }
      }
    }
  }
}

.gwanak-intro5{
  background:#00865E;
  & .gwanak-intro5-wrap{
    grid-template-columns: minmax(0, 1fr);
    & h2{
      & strong{
        color:#CEFAB1;
      }
    }
    & .gwanak-intro5-img{
      border-radius:16px;
      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
      margin:var(--disease-intro-img-box-gap) auto 0px;
      & img{width:100%;}
    }
  }
}

.gwanak-intro6{
  background:url('/img/sub/hospital/lightgray-dot.png') no-repeat 50% 100%;
  background-size:100% 414px;
  padding-bottom: 470px;
  position: relative;

  & .gwanak-intro6-content{
    width:1920px;
    position: absolute;
    left: calc(50% - 960px);
    bottom:0px;
    & img{width:100%;}
  }
}

.gwanak-intro7{
  padding:var(--hospital-padding-top-02) 0px var(--gwanak-intro-section);
  & .sub-section-title{
    & strong{
      font-size:var(--font-size-14);
      color:#DEB470;
      padding-bottom:4px;
    }
  }
  & .gwanak-intro7-img{
    margin:var(--padding-clamp-top) auto 0px;
    width:86%;
    max-width:1000px;
    @media screen and (max-width: 769px){
      width:100%;
    }
    & img{width:100%;}
  }
}

.gwanak-intro8{
  background:url('/img/sub/hospital/gwanak-intro8-bg.jpg') no-repeat 50% 50%;
  background-size: cover;

  & .sub-section-title{
    color:#fff;
  }
  & .sub-section-text{
    color:#fff;
    position: relative;
    padding:0px clamp(32px, 4vw, 60px);
    box-sizing: border-box;
    display: flex;
    width: fit-content;
    margin: 0px auto;
    &::before{
      content:"";
      display:block;
      position:absolute;
      width:60px;
      height:204px;
      background: url('/img/sub/hospital/gwanak-intro8-bf.png') no-repeat 50% 50%;
      background-size:100% auto;
      left:0px;
      top:0px;
      transform: translateY(-50%);
    }
    &::after{
      content:"";
      display:block;
      position:absolute;
      width:60px;
      height:204px;
      background: url('/img/sub/hospital/gwanak-intro8-af.png') no-repeat 50% 50%;
      background-size:100% auto;
      right:0px;
      top:0px;
      transform: translateY(-50%);
    }
    @media screen and (max-width: 769px){
      &::before{display: none;}
      &::after{display: none;}
    }
  }
  & .gwanak-intro8-content{
    max-width: 1200px;
    margin:var(--hospital-padding-top-02) auto 0px;
    & ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      grid-gap:16px;
      & li{
        width:calc(25% - 16px);
        border-radius:16px;
        box-shadow:rgba(0,0,0,0.16);
        & img{width:100%;}
      }
    }
  }
}

.gwanak-intro9{
  background:#F3F4F8;
  & .gwanak-intro9-wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    @media screen and (max-width: 769px){
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    & .gwanak-intro9-text{
      & h2{
        display: inline-block;
        position: relative;
        z-index:2;
        color:var(--color-main-black);
        &::after{
          content:"";
          position: absolute;
          display: block;
          width: 94%;
          height: 42.5px;
          background:url('/img/sub/hospital/yellow-borderline.png') no-repeat 50% 50%;;
          background-size:100% auto;
          bottom:10px;
          left:0px;
          z-index:-1;
          @media screen and (max-width: 769px){
            width:100%;
          }
        }
      }
      & p{
        clear: both;
        color:var(--hosp-muted);
      }
    }
    & .gwanak-intro9-img{
      @media screen and (max-width: 769px){
        margin:24px auto 0px;
      }
      & ul{
        display: flex;
        flex-wrap: wrap;
        gap:20px;
        justify-content: center;
        & li{
          width:calc(33.33% - 13.33px);
          & figure{
            width:100%;
            max-width:236px;
            margin:0px auto 16px;
            border-radius:50%;
            overflow:hidden;
            & img{width:100%;}
          }
          & figcaption{
            font-size: var(--font-size-16);
            font-weight: var(--font-weight-bold);
            color: var(--color-main-06);
            text-align: center;
            word-break: keep-all;
            line-height: 1.45;
          }
        }
      }
    }
  }
}

.gwanak-intro10{
  & .sub-section-title{
    display: flex;
    width:fit-content;
    margin:0px auto;
    position: relative;
    z-index:2;

    &::after{
      content:"";
      display: block;
      position: absolute;
      width:100%;
      height:49.5px;
      background:url('/img/sub/hospital/yellow-borderline.png') no-repeat 50% 50%;;
      background-size:100% auto;
      z-index:-1;
      left:0px;
      bottom:4px;
      @media screen and (max-width: 769px){
        display: none;
      }
    }
  }
  & .gwanak-intro10-content{
    max-width: 1200px;
    margin:var(--hospital-padding-top-02) auto 0px;
    & ul{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin: 0px auto;

      & li{
        border-radius:16px;
        background:#3375CC;
        cursor:pointer;
        & a{
          display: block;
          width:100%;
          height:100%;
          box-sizing: border-box;
          padding:52px 32px;
          position: relative;
          @media screen and (max-width: 769px){
            padding:24px 16px;
            border-radius:8px;
          }
          & h3{
            color:var(--color-main-white);
            font-weight:var(--font-weight-bold);
            font-size:var(--font-size-22);
            margin-bottom:16px;
          }
          & p{
            clear: both;
            font-size:var(--font-size-18);
            color:var(--color-profile-01);
          }
          & div{
            position: absolute;
            right:30px;
            top:50%;
            transform: translateY(-50%);
            width:104px;
            @media screen and (max-width: 769px){
              display: none;
            }
            & img{width:100%;}
          }
        }
      }
    }
  }
}

.intro-schedule-section{
  & .sub-section-title-box{text-align: center;}
}
/* ***************************************************** */
/* ******************* 모바일 반응형 ******************* */
/* ***************************************************** */
@media screen and (max-width: 1170px)  {
  .node {

  }
  .mb-node-box{

    @media screen and (max-width: 640px) {
      & {margin-top: 30px;}
    }

  }
}
/* ******* /미디어쿼리 1170px  ******* */
@media screen and (max-width: 839px) {
  .sub-introduce-logo-box {
    & .sub-introduce-logo-story {
      & .sub-introduce-story-01 {
        & img {width: 85%;}
      }
      & .sub-introduce-story-02 {
        display: flex;
        flex-direction: column;
        gap: 20px;
        & figure:last-child img { width: 100%;}
      }
    }
  }
}
/* ******* /미디어쿼리 839px  ******* */

@media (max-width: 660px) {

}
/* ******* /미디어쿼리 660px  ******* */


/* ************************************* */
/* ************************************* */