/* sub tab */

.sub_tab_wrap {
  position: relative;
  color: #fff;
  text-align: center;
  font-family: 'GmarketSans';
  overflow: hidden;
}
.sub_tab_overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.sub_tab_overlay {
  position: absolute;
  inset: 0;
  background: url('../img/sub_intro_top_bg.png') no-repeat center center / cover;
  filter: blur(8px);
  z-index: -1;
  animation: blurIn 1.5s ease-out forwards;
}

@keyframes blurIn {
  0% {
    transform: scale(1.1);
    filter: blur(8px);
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
  }
}

.sub_tab_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.sub_tab_wrap > *:not(.sub_tab_overlay) {
  position: relative;
  z-index: 1;
}
.sub_tab_wrap h2{
  position: relative;
  font-size: 5rem;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 1.2;
  padding: 220px 0 70px;
}
.sub_tab_wrap h2 b{
  font-family: "Paperlogy7";
}
.sub_tab_wrap h2 i{
  font-family: "Pretendard Variable";
  content: '';
  text-transform: uppercase;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}
.sub_tab{
  font-family: "Paperlogy6";
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #fff;
}

.sub_tab li {
  width: 13%;
  height: 100%;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.19);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.sub_tab li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background-color: #fff;
  transition: width 0.3s ease;
}
.sub_tab li a:hover::after,
.sub_tab li a.on::after {
  width: 100%;
}

.sub_tab li a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.06);
}
.sub_tab li a:hover,
.sub_tab li a.on{
  font-weight:500 ;
  color: #fff;
}
/* hover 시 효과 */
.sub_tab li a:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* on 클래스일 때 반전 */
.sub_tab li a.on {
  background-color: #fff;
  color: #000;
}

/* 대표원장 인사말 */
.introduce_center{
  background: url(../img/sub_intro_img.png)no-repeat center/cover;
  height: fit-content;
  color: #fff;
  padding: 100px;
  text-align: left;
}
.introduce_flex{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-left: 7vw;
}
.introduce_flex h3{
  font-family: "Paperlogy8";
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: 0.0035em;
}
.introduce_flex h3 b{
  font-family: "Paperlogy7";
  font-size: 3rem;
}
.introduce_flex P{
  font-family: "Pretendard Variable";
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: -0.004em;
}
.introduce_flex b{
  font-family: "Paperlogy8";
  font-size: 2.5rem;
}
.introduce_flex b i{
  font-family: "Paperlogy3";
}
/* doc */
.doc_wrap.sub{
  display: flex;
}
.doc_left.sub, .doc_right.sub{
  flex: 1;
}
.doc_left.sub{
  position: relative;
  background: url(../img/sub_doc_img_bg.png)no-repeat center/cover;
  display: flex;
  justify-content: center;
}
.doc_left.sub .doc2{
  background: #727171;
}
.doc_left.sub img{
  position: absolute;
  display: block;
  bottom: 0;
}
.doc_right.sub{
  background: #F8F8F8;
  padding: 5rem;
}
.doc_right.sub .first > div:nth-child(1){
  font-family: "Paperlogy7";
  font-size: 5.2rem;
}
.doc_right.sub .first > div:nth-child(1) i{
  font-size: 3rem;
  color: #00388F;
  font-family: "Pretendard Variable";
  font-weight: 600;
}
.doc_right.sub .first > div:nth-child(2){
  font-family: "Pretendard Variable";
  font-size: 2rem;
  font-weight: 500;
}
.doc_right.sub .before{
  display: inline-block;
  width: 4px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 20px;
  background: linear-gradient(0deg, #1E52A2 0%, #1E52A2 100%), linear-gradient(0deg, #062C5D 0%, #062C5D 100%), #00388F;
}
.doc_right.sub .second > div:nth-child(1),
.doc_right.sub .third > div:nth-child(1){
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Paperlogy";
  font-size: 3rem;
  font-weight: 600;
}
.doc_right.sub .second > div:not(:nth-child(1)),
.doc_right.sub .third > div:not(:nth-child(1)){
  font-family: "Pretendard Variable";
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 500;
}
/* 보유장비 */
.sub13_ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem 3rem;
}
.sub13_ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sub13_ul .equ_wrap.equ{
  width: 100%;
  border: 1px solid #9A9A9A;
  margin-bottom: 1rem;
  overflow: hidden;
  aspect-ratio: 1/1;
  position: relative;
  padding: 20px 20px 50px;
}
.sub13_ul span {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #0E3075;
  color: #fff;
  font-family: "Paperlogy7";
  font-size: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub13_ul .equ_wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub13_ul p{
  font-size: 2rem;
  font-family: "Paperlogy6";
  line-height: 1.3;
}
.sub13_ul p:nth-of-type(2){
  font-family: "Paperlogy4";
}

/* 척추질환 */
.sub_clinic1{
  background: url(../img/sub_clinic1_bg.png) no-repeat center center / cover;
}
.sub_tab_overlay.clinic1 {
  position: absolute;
  inset: 0;
  background: url(../img/sub_clinic1_top_bg.png) no-repeat center center / cover;
  filter: blur(8px);
  z-index: -1;
  animation: blurIn 1.5s ease-out forwards;
}
.sub_clinic1 .intro_tit .main_tit i{
  color: #123A8E;
}
.sub_clinic1 .main_tit::before{
  display: none;
}
/* m20 */
.m2_0 .content_inner{
  position: relative;
}
.m2_tit{
  font-size: 50px;
  position: absolute;
  left: 0;
  top: 140px;
}
.m2_tit b{
  color: #003B75;
}
.m20_wrap{
  /* display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px; */
  width: 40%;
  margin: 0 auto;
}
.m2_tab li:not(:last-child){
  margin-bottom: 30px;
}
.m2_tab li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  width: 250px;
  height: 65px;
  border-radius: 20px;
  background: rgba(22, 64, 153, 0.17);
  box-shadow: 4px 5px 10px 0 rgba(0, 0, 0, 0.10);
  color: #0E3075;
  padding: 15px  30px;
  line-height: 1;
  transition: .3s;
  font-family: "Paperlogy9";
}
.m2_tab li:hover a{
  background: #0E3075;
  color: #fff;
}
.m2_tab li:hover .more:before, 
.m2_tab li:hover .more:after{
  background-color: #003B75;
}
.more {
  width: 30px;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  position: relative;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
  
}
/* 호버 시 그라데이션 이동 */
.m2_tab li:hover .more {
  animation: shine 1s forwards;
}
/*  */
.m20_body{
  position: relative;
  line-height: 0;
}
.pointer_wrap li {
  position: absolute;
  transition: all 1.5s ease-in 0s;
  cursor: pointer;
  width: 260px;
  z-index: 10;
  transform: translate(-50%, -50%);
}

/* 기본 링크 애니메이션 */
.pointer_wrap li a.delayed-link {
  animation: spot 1.2s ease 0s infinite alternate both;
}

/* again 은 예외 */
.pointer_wrap li a.delayed-link.again {
  animation: none !important;
}
@keyframes spot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.neck{
  top: 23%;
    left: 65%;
}
.spine{
  top: 53%;
    left: 33%;
}
.waist{
  top: 53%;
  left: 30%;
}
.wrap.blur-effect {
  overflow: hidden;
  filter: blur(4px) ;
  transition: filter 1s ease-in-out;
}

/* sub neck */
.sub_clinic1_neck{
  position: relative;
  text-align: center;
}
.sub_clinic1_neck .main_tit::before{
  display: none;
}
.sub_line{
  display: inline-block;
  background: #003668;
  width: 3px;
  height: 0px;
  animation: drawLine .8s ease-out forwards;
}
@keyframes drawLine {
  from {
    height: 0;
  }
  to {
    height: 40px;
  }
}
.sub_neck_top{
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.sub_neck_top .txt{
  font-size: 2.5rem;
  font-family: "Pretendard Variable";
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-weight: 400;
}
.sub_neck_top .txt:nth-of-type(2){
  font-weight: 600;
}
.sub_neck_center{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.sub_neck_center .flex1{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sub_neck_center .flex1 img {
  transition: transform 0.3s ease; /* 부드럽게 확대 */
}

.sub_neck_center .flex1:hover img {
  transform: scale(1.1); /* 10% 확대 */
}
.sub_neck_center span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  color: #fff;
  background: #0E3075;
  font-size: 2rem;
  z-index: 1;
  line-height: 1.1;
}
.sub_neck_bot_all_wrap{
  background: #E8F0F7 url(../img/sub_clinic1_running_wh.png)no-repeat right bottom / 700px;
}
.sub_neck_bot_card_wrap{
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
}
.sub_neck_bot_card{
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.card_wrap{
  border-radius: 20px;
  background: #D7DFEE;
  box-shadow: 4px 5px 10px 0 rgba(0, 0, 0, 0.10);
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sub_neck_bot_card .card_wrap img{
  display: block;
  height: 97px;
  width: auto;
  object-fit: contain;
}
.sub_neck_bot_card p{
  font-family: "Paperlogy7";
  font-size: 2.5rem;
}
.sub_neck_bot_card_wrap .sub_neck_arrow{
  position: relative;
  bottom: 20px;
}
.clinic2_point .neck .again{
  position: absolute;
    top: -58px;
    left: -257px;
}
.neck .show_up{
position: absolute;
      top: -80px;
  left: -388px;
}
.clinic2_point .spine .again{
  position: absolute;
    top: 0px;
    left: -356px;
}
.spine .show_up{
position: absolute;
      top: -30px;
    left: -485px;
}
/* 관절질환 */
.sub_tab_overlay.clinic2{
  background: url(../img/sub_clinic2_top_bg.png) no-repeat center center / cover;
}
.clinic2_point li {
  width: 100px;
}
.shoulder{
  position: relative;
  top: 16%;
  left: 52%;
}
.show_up{
  display: block;
  width: 120px;
  height: 120px;
  opacity: 1;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.show_up .clinic2_line{
  position: absolute;
  z-index: -1;
  bottom: 50px;
  left: 65%;
  display: block;
  background: #48AEED;
  height: 1px;
  width: 70px;
  transform: rotate(40deg);
  transform-origin: left center;
}
.shoulder .show_up .clinic2_line{
  bottom: 50px;
  left: 65%;
  transform: rotate(40deg);
}
.shoulder .show_up {
  position: absolute;
  top: -54px;
  left: -390px;
}
.elbow .show_up{
  position: absolute;
  top: -12px;
  left: -388px;
}
.wrist .show_up{
  position: absolute;
  top: -14px;
  right: -399px;
}
.ass .show_up{
  position: absolute;
  top: -9px;
  left: -388px;
}
.knee .show_up{
  position: absolute;
  top: -18px;
    left: 373px;
}
.ankle .show_up{
  position: absolute;
  top: -7px;
    left: -390px;
}
.elbow .show_up .clinic2_line{
  bottom: 80px;
  left: 150px;
  transform: rotate(0deg);
}
.wrist .show_up .clinic2_line{
  top: -30px;
  left: 10px;
  transform: rotate(56deg);
}
.ass .show_up .clinic2_line{
  top: 80px;
  left: 158px;
  transform: rotate(-10deg);
}
.knee .show_up .clinic2_line{
  top: 89px;
  left: -17px;
  transform: rotate(-10deg);
}
.ankle .show_up .clinic2_line{
  top: 33px;
  left: 74px;
  transform: rotate(-123deg);
}
.shoulder:hover .show_up,
.elbow:hover .show_up,
.wrist:hover .show_up,
.ass:hover .show_up,
.knee:hover .show_up,
.ankle:hover .show_up,
.neck:hover .show_up,
.spine:hover .show_up
{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.elbow{
  top: 27%;
  left: 31%;
}
.wrist{
  top: 30%;
  right: -2%;
}
.ass{
  top: 50%;
  left: 43%;
}
.knee{
  top: 73%;
  right: 12%;
}
.ankle{
  bottom: 12%;
  left: 12%;
}
/* 비수술통증치료 */
.sub_tab_overlay.clinic3{
  background: url(../img/sub_clinic3_top_bg.png) no-repeat center center / cover;
}
.sub_clinic3_top{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.sub_clinic3_top .txt{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Pretendard Variable";
  font-size: 2.2rem;
}
.clinic3_center .main_tit,
.clinic3_bot .main_tit{
  font-size: 3.8rem;
}
.clinic3_center .main_tit b .copy,
.clinic3_bot .main_tit b .copy{
  color: rgb(14, 48, 117 ,1);
}
.clinic3_center .copy_e,
.clinic3_bot .copy_e{
  color: rgb(14, 48, 117 ,0.15);
}
.clinic3_table{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clinic3_table .table_txt{
  display: flex;
  align-items: center;
  background: #E8F0F7;
  height: 75px;
  font-size: 2.2rem;
  font-family: "Pretendard Variable";
  font-weight: 500;
  width: 80%;
  margin: 0 auto;
}
.clinic3_table .table_txt >div:first-child{
  background: #0E3075;
  color: #fff;
  font-weight: 900;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
}
.clinic3_table .table_txt >div:nth-of-type(2){
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 3vw;
}
.clinic3_bot_table{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.clinic3_bot_table .box{
  background: #E9F1F8;
  font-family: "Pretendard Variable";
  font-size: 2.2rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 220px;
  width: 350px;
}
.clinic3_bot_table .box >div div{
  font-weight: 500;
}
.clinic3_bot_table .box img{
  height: 45px;
  object-fit: contain;
  display: block;
}
/* 도수치료 이미지 css */  
.clinic3_table.manual .table_wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.clinic3_table.manual .table_wrap.shock{
  width: 80%;
}
.clinic3_table.manual .table_wrap.img{
  display: block;
  object-fit: cover;
}
.clinic3_table.manual .table_txt{
  width: 100%;
}
/* 체외충격파 이미지 css */  
.clinic3_table.manual .table_wrap .txt{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 80px 0px;
  text-align: left;
}
.clinic3_table.manual .table_wrap .txt >div{
  font-family: "Pretendard Variable";
  font-size: 2.5rem;
  line-height: 1.4;
  font-weight: 500;
  width: 42%;
}
.clinic3_table.manual .table_wrap .txt >div b{
  color: #0E3075;
  font-weight: 800;
}
/* 비수술 치료 */
.sub_tab_overlay.surgery {
  background: url(../img/sub_clinic4_top_bg.png) no-repeat center center / cover;
}
/* 오시는길 및 진료시간 */
.sub_tab_overlay.way {
  background: url(../img/sub_clinic5_top_bg.png) no-repeat center center / cover;
}
.way_bot{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 80px;
  column-gap: 20px;
  justify-items: left;
  justify-content: center;
  align-items: center;
}
.way_bot .box{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.way_bot .box .img{
  display: flex;
  align-items: center;
  gap: 20px;
  color: #0E3075;
  font-size: 3rem;
}
.way_bot .box img{
  height: 35px;
  object-fit: contain;
  display: block;
}
.way_bot ul{
  font-family: "Paperlogy5";
  line-height: 1.5;
  font-size: 2.4rem;
}
.way_bot ul li:first-child{
  font-family: "Paperlogy7";
}

/* again */
.clinic2_point .again{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;
  width: 250px;
  height: 65px;
  border-radius: 20px;
  background: rgba(22, 64, 153, 0.17);
  box-shadow: 4px 5px 10px 0 rgba(0, 0, 0, 0.10);
  color: #0E3075;
  padding: 15px  30px;
  line-height: 1;
  transition: .3s;
  font-family: "Paperlogy9";
  
}
/* 같은 요소에 동시에 붙은 경우 */
.pointer_wrap li.shoulder a.again {
  animation: none !important;
}
.pointer_wrap li.shoulder a.again * {
  animation: none !important;
}
.clinic2_point .shoulder .again{
  position: absolute;
  top: -28px;
  left: -257px;
}
.clinic2_point .elbow .again{
  position: absolute;
  top: 15px;
  left: -257px;
}
.clinic2_point .wrist .again{
  position: absolute;
  top: 15px;
  left: 116px;
}
.clinic2_point .ass .again{
  position: absolute;
  top: 15px;
  left: -257px;
}
.clinic2_point .ankle .again{
  position: absolute;
  top: 15px;
  left: -266px;
}
.clinic2_point .knee .again{
  position: absolute;
  top: 15px;
  left: 112px;
}