/* 면역 sub css */


/* subMenu */
#subMenu {position: fixed; z-index: 999; left: 1rem; bottom:1rem; width: 100%; max-width: 225px; padding: 2rem 1rem; background-color: rgba(48,83,82,.9); text-align: center; color:#fff;}
#subMenu .Line {width: 100%; height: 1px; background-color: rgba(228,224,215,.2); margin: 1rem 0;}
#subMenu ul li + li {margin-top: .9rem;}
#subMenu ul li a {color:#fff; font-size: 1.125rem;}
#subMenu ul li.active a {font-weight: 500; border-bottom:1px solid #e4e0d7; color:#e4e0d7;} 

/* doctor */
.sub .doctor .Desc {display: flex; align-items: center; justify-content: center;}
.sub .doctor .name {background-color: #f8f6f1; padding: .7rem 2rem;}
@media(max-width:990px) {
    .sub .doctor .Desc {width: 100%; justify-content: flex-start;}
    .sub .doctor .Img {width: 48%;}
}
@media(max-width:550px) {
    .sub .doctor .section-left {padding-right: 5%;}
    .sub .doctor .box {width: 100%;}
}

.sub .underLine {width: .125rem; height: 6.25rem; background-color: #e4e0d7; display: block; margin:0 auto 5rem;}
.sub .under {display: block; border-bottom: 1px solid var(--pointcolor); width: fit-content;}
/* balance */
.sub .balance .balanceImg {position: relative; margin: auto; padding: 2.5rem 0 2rem; width: 31.875rem;}

.sub .balance .LeftBox {width: 23rem; position: absolute; left: 5%; top:0; display: flex; flex-direction: column; gap:4.5rem 0;}
.sub .balance .RightBox {width: 23rem; position: absolute; right: 4%; top:0; display: flex; flex-direction: column; gap:4.5rem 0;}
.sub .balance .BottomBox {width: 18.75rem; position: relative; margin: auto;}
.sub .balance .TxtBox {display: flex; align-items: center; gap:0 1rem; position: relative; padding-bottom: 1rem;}
.sub .balance .TxtBox.Right {justify-content: flex-end;}

.sub .balance .enTit {color:#b5afa3;}
.sub .balance .Img {width: 25%;}
.sub .balance .Img img {width: 4.125rem;}
.sub .balance .Desc {width: 70%;}

.sub .balance .Line {width: 145%; height: 1px; background-color: #e4e0d7; position: absolute; bottom:0;}
.sub .balance .Line:after {content:''; width: 8px; height: 8px; border-radius: 50%; background-color: #e4e0d7; position: absolute; right: 0; top:0; bottom:0; margin: auto;}
.sub .balance .Line.Right:after {left: 0; right:auto;}
.sub .balance .Line.two {width: 120%;}
.sub .balance .Line.three {width: 135%;}

.sub .balance .Line.Bottom {width: 100%;}
.sub .balance .Line.Bottom:after {display: none;}

.sub .balance .Line.Top {width: 1px; height: 4.0625rem; top:-70%; right:0; left:0; bottom:auto; margin: auto;}
.sub .balance .Line.Top:after {bottom:auto; transform: translateX(50%);}

.sub .balance .Txt {background-color: #f8f6f1; padding: 2rem;}
@media(max-width:1340px) {
    .sub .balance .balanceImg {width: 30rem;}

    .sub .balance .Line {width: 125%;}
    .sub .balance .Line.two {width: 110%;}
    .sub .balance .Line.three {width: 120%;}

    .sub .balance .Img img {margin-left: auto;}
}
@media(max-width:1240px) {
    .sub .balance .balanceImg {margin-bottom: 2rem;}
    .sub .balance .LeftBox, 
    .sub .balance .RightBox, 
    .sub .balance .BottomBox {position: relative; width: 100%; max-width: 41.5625rem; margin: auto; left: auto; right:auto; gap:2.5rem 0;}
    .sub .balance .LeftBox {flex-direction: column-reverse;}
    .sub .balance .BottomBox {margin: 2.5rem auto;}

    .sub .balance .TxtBox.Right {justify-content: center;}

    .sub .balance .Line.Top {display: none;}
    .sub .balance .Line {width: 100% !important;}
    .sub .balance .Line:after {left: 0; right:auto;}
    .sub .balance .Line.Bottom:after {display: block;}
}



/* process */
.sub .process .TitFlex {display: flex; gap: 0 1rem}
.sub .process .enTit {width: 26%; white-space: nowrap;}

.sub .process .Line {width: 100%; height: 1px; background-color: #e4e0d7; margin: 1rem 0;}

.sub .process .box {position: relative;}
.sub .process .box:after {content:''; width: 1.625rem; height: 1.625rem; background-image: url('/img/sub/immunity/arrow.png'); background-size: contain; background-repeat: no-repeat; position: absolute; right:-3.2rem; top:35%;}
.sub .process .nonArrow .box:after {display: none;}

.sub .process .Box3 .box:nth-child(3n):after {display: none;}
.sub .process .Box4 .box:nth-child(4n):after {display: none;}

@media(max-width:990px) {
    .sub .process .Box4 .box:after {display: none;}
}
@media(max-width:768px) {
    .sub .process .flexList {--x-gap:1.5rem;}
    .sub .process .box:after {display: none;}
}
@media(max-width:400px) {
    .sub .process .enTit {width: 33%;}
}



/* examine */
.sub .examine {background: no-repeat center url('/img/sub/immunity/examineBg.jpg'); background-size: cover;}
.sub .examine .swiper-pagination-progressbar {max-width: 990px; height: 3px; background-color: #e4dfd6; position: relative; margin: 4rem auto 0;}
.sub .examine .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}

.sub .examineImgSwiper .swiper-slide {transition: opacity 1.5s ease-out !important;}

.sub .examineTxtSwiper .Num {color:#b5afa3; font-family: var(--pointfont);}
.sub .examineTxtSwiper .inner {max-width: 37.5rem; padding: 2rem; margin-left: auto;}
@media(max-width:768px) {
    .sub .examineTxtSwiper .inner {margin-right: auto; padding: 1rem;}
}


/* recovery */
.sub .recovery .flexBox {display: flex; gap:0 1rem; justify-content: space-between;}
.sub .recovery .TitBox {width: 40%; display: flex; justify-content: center;}
.sub .recovery .TitBox .subTit {position: sticky; top:6rem; height: fit-content;}
.sub .recovery .DescBox {width: 55%;}

.sub .recovery .Num {position: relative; padding-left: 2.2rem;}
.sub .recovery .Num:after {content:''; font-family: var(--pointfont); color:var(--pointcolor); position: absolute; left: 0; top: .1rem;}
.sub .recovery .Num1:after {content:'01';}
.sub .recovery .Num2:after {content:'02';}
.sub .recovery .Num3:after {content:'03';}
.sub .recovery .Num4:after {content:'04';}
.sub .recovery .Num5:after {content:'05';}
.sub .recovery .Num6:after {content:'06';}
.sub .recovery .Num7:after {content:'07';}
.sub .recovery .Num8:after {content:'08';}
.sub .recovery .Num9:after {content:'09';}
.sub .recovery .Num10:after {content:'10';}
.sub .recovery .Num11:after {content:'11';}



@media(max-width:1440px) {
    .sub .recovery .DescBox {width: 60%;}
}
@media(max-width:1240px) {
    .sub .recovery .TitBox {width: 33%;}
    .sub .recovery .DescBox {width: 65%;}
}
@media(max-width:990px) {
    .sub .recovery .TitBox {width: 100%; justify-content: flex-start; margin-bottom: 5rem;}
    .sub .recovery .DescBox {width: 100%;}
}



/* programme */
.sub .programme {background:no-repeat center url('/img/sub/immunity/programmeBg.jpg'); background-size: cover;}
.sub .programme .flexList {max-width: 1230px; margin: 5rem auto 0;}

.sub .programme .LineBox {position: relative; padding: 1rem 0; margin-top: 1rem;}
.sub .programme .one {width: 10px; height: 10px; border-radius: 50%; background-color: var(--pointcolor); margin: auto; z-index: 3; position: relative; transition: .3s;}
.sub .programme .box.on .one:before {content:''; width: 20px; height: 20px; border-radius: 50%; background:rgba(48,83,82,.4); z-index: -5; position: absolute; top:0; bottom:0; left:-150%; transform: translateX(50%); margin: auto; transition: .3s;}
.sub .programme .box.on .one:After {content: ''; background:rgba(48,83,82,.5); position: absolute;width: 40px;height: 40px;z-index: -9; opacity: 0;border-radius: 50%;-webkit-animation: ripple 1.8s infinite;animation: ripple 1.8s infinite; top:0; bottom:0; left:-150%; transform: translateX(50%); margin: auto;}

.sub .programme .Line {width: 100%; height: 2px; background-color:#e4dfd6; position: absolute; top:0; bottom:0; margin: auto;}
.sub .programme .Line.Left:after {content:''; width: 6rem; height: 2px; background-color: #e4dfd6; position: absolute; top:0; bottom:0; left: -4vw;} 
.sub .programme .Line.Right:after {content:''; width: 6rem; height: 2px; background-color: #e4dfd6; position: absolute; top:0; bottom:0; right: -4vw;} 

@-webkit-keyframes ripple { 0% { opacity: 1;-webkit-transform: scale(0);transform: scale(0); } 100% { opacity: 0;-webkit-transform: scale(1);transform: scale(1); } }
@keyframes ripple { 0% { opacity: 1;-webkit-transform: scale(0);transform: scale(0); } 100% { opacity: 0;-webkit-transform: scale(1);transform: scale(1); } }

@media(max-width:768px) {
    .sub .programme .Line:after {display: none;}
}



/* restoration */
.sub .restoration .flexBox {display: flex; align-items: center;}
.sub .restoration .Desc {padding:1rem 2.5rem;}
@media(max-width:990px) {
    .sub .restoration .Desc {padding: 0 1rem 5rem; max-width: 40rem;}
}



/* course */
.sub .course .Dot {width: 11.5938rem; height: 11.5938rem; border-radius: 50%; border:1px solid #e4e0d7; display: flex; align-items: center;justify-content: center; margin: auto;}
.sub .course .Dot img {width: 5.5rem;}
.sub .course .box {position: relative;}
.sub .course .box:after {content:''; width: 1.625rem; height: 1.625rem; background-image: url('/img/sub/immunity/arrow.png'); background-size: contain; background-repeat: no-repeat; position: absolute; right:-2.2rem; top:18%;}
.sub .course .box:last-child:after {display: none;}
@media(max-width:1240px) {
    .sub .course .md_Box3 .box:nth-child(3n):after {display: none;}  
}
@media(max-width:500px) {
    .sub .course .box:after {display: none;}  
    .sub .course .md_Box3 {--x-gap:1rem;}
}


/* iconBox */
.sub .iconBox .box {display: flex; align-items: center; gap:0 1.5rem; padding: 2rem;}
.sub .iconBox .Dot {width: 6.25rem; height: 6.25rem; aspect-ratio: 1/1; border-radius: 50%; display: flex; align-items: center; justify-content: center;} 
.sub.reinforce .iconBox .Dot img {width: 3rem;}
.sub.VIP .iconBox .Dot img {width: 3.25rem;}
@media(max-width:500px) {
    .sub .iconBox .box {padding: 2rem 3rem;}
}



/* step */
.sub .step .Img {position: relative;}
.sub .step .Tit {position: absolute; width: fit-content; height: fit-content; top:0; bottom:0; left: 0; right:0; margin: auto; color:#fff;}
.sub .step .arrow {width: 1.625rem; transform: rotate(90deg); padding: 2rem 0;}
.sub .step .Desc {background: #fff; padding: 2rem; min-height: 11.5rem;}
.sub .step .check {position: relative; padding-left: 1.5rem;}
.sub .step .check:after {content:''; width: .875rem; height: .75rem; background-image: url('/img/sub/immunity/check.png'); background-size: contain; position: absolute; left: 0; top:.5rem;}
@media(max-width:990px) {
    .sub .step .flexList {--x-gap:2rem;} 
}



/* equipmentBox */
.sub .equipmentBox .Img {padding: 2rem 1rem;}


/* cell */
.sub .cell .inner {position: relative; display: flex;}
.sub .cell .cellImg {margin: auto; width: 24.75rem;}
.sub .cell .TxtBox {position: absolute; height: 100%; width: 50%;}
.sub .cell .TxtBox.L {left: 0; text-align: right;}
.sub .cell .TxtBox.R {right: 0;}
.sub .cell .TxtBox .Txt {position: absolute; height: fit-content; font-weight: 600; color:var(--pointcolor);}

.sub .cell .TxtBox.L .Txt {padding-right: 2rem; right:0;}
.sub .cell .TxtBox.R .Txt {padding-left: 2rem; left: 0;}
.sub .cell .TxtBox .Txt:after {content:''; width: .625rem; height: .625rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; top:.5625rem;}
.sub .cell .TxtBox.L .Txt:after {right:0;}
.sub .cell .TxtBox.R .Txt:after {left:0;}


.sub .cell .TxtBox.L .Txt.Txt1 {top:-.8rem; right: 5.8rem;}
.sub .cell .TxtBox.L .Txt.Txt2 {top:10.2rem; right:11.9rem;}
.sub .cell .TxtBox.L .Txt.Txt3 {bottom:-1rem; right: 5.8rem;}

.sub .cell .TxtBox.R .Txt.Txt1 {top:-.8rem; left: 5.8rem;}
.sub .cell .TxtBox.R .Txt.Txt2 {top:10.2rem; left:11.9rem;}
.sub .cell .TxtBox.R .Txt.Txt3 {bottom:-1rem; left: 5.8rem;}
@media(max-width:500px) {
    .sub .cell .inner {margin-bottom: 5rem;}
    .sub .cell .cellImg {width: 17rem;}
    .sub .cell .TxtBox.L .Txt {padding-right: 1rem;}
    .sub .cell .TxtBox.R .Txt {padding-left: 1rem;}

    .sub .cell .TxtBox.L .Txt.Txt1 {top:-.8rem; right: 3.8rem;}
    .sub .cell .TxtBox.L .Txt.Txt2 {top:7rem; right:8.2rem;}
    .sub .cell .TxtBox.L .Txt.Txt3 {bottom:-3.6rem; right: 3.8rem;}

    .sub .cell .TxtBox.R .Txt.Txt1 {top:-.8rem; left: 3.8rem;}
    .sub .cell .TxtBox.R .Txt.Txt2 {top:7rem; left:8.2rem;}
    .sub .cell .TxtBox.R .Txt.Txt3 {bottom:-1.4rem; left: 3.8rem;}
}


/* effect */
.sub .effect .box {padding:3rem 1rem;}
.sub .effect span {display: block; width: 5rem; height: 1px; background-color: #e4e0d7; margin: 1rem auto;}
@media(max-width:990px) {
    .sub .effect .width70 {margin-top: 5rem;}
    .sub .effect .subTit {text-align: center;}
}


/* careBg */
.sub .careBg .box {background: no-repeat center; background-size: 100%; background-blend-mode: multiply; background-color: #ccc; transition: all .3s ease-in-out; aspect-ratio: 47/60; padding: 2rem; position: relative;}
.sub .careBg .box.box1 {background-image: url('/img/sub/immunity/careBg01.jpg');} 
.sub .careBg .box.box2 {background-image: url('/img/sub/immunity/careBg02.jpg');} 
.sub .careBg .box.box3 {background-image: url('/img/sub/immunity/careBg03.jpg');} 
.sub .careBg .inner {position: absolute; width: fit-content; left: 0; right:0; top:35%; margin: auto;}

.sub .careBg .box:hover {background-size: 110%; background-blend-mode: normal;}


/* expert */
.sub.VIP .expert {background: no-repeat center url('/img/sub/immunity/expertBg.jpg'); background-size: cover;}
.sub.special .expert {background: no-repeat center url('/img/sub/daniel/expertBg.jpg'); background-size: cover;}
.sub .expert .flexBox {display: flex; justify-content: center;}
.sub .expert .box {aspect-ratio: 1/1; max-width: 24.25rem; height: 24.25rem; border-radius: 50%; border:1px solid #e4dfd6; position: relative;}
.sub .expert .box img {width: 3.625rem;}
.sub .expert .box.L {left: 2rem;}
.sub .expert .box.R {right:2rem;}

@media(max-width:768px) {
    .sub .expert .flexBox {flex-wrap: wrap;}
    .sub .expert .box {width: 50%; max-width: 22rem; height: 22rem;}
    .sub .expert .box.L {left: 1rem;}
    .sub .expert .box.C {right: 1rem;}
    .sub .expert .box.R {right: 0; top:-5rem;}
}
@media(max-width:500px) {
    .sub .expert .box {width: 100%;}
    .sub .expert .box.L {left: 0;}
    .sub .expert .box.C {right: 0; top:-1rem;}
    .sub .expert .box.R {top:-2rem;}
}


/* condition */
.sub .condition .inner {display: flex; align-items: center; justify-content: center;} 
.sub .condition .inner .box {position: relative; max-width: 28.125rem; width: 100%; height: 28.125rem; aspect-ratio: 1/1; border-radius: 50%; border:1px solid #e4e0d7;}
.sub .condition .inner .box.R {left: -3rem;}

.sub .condition .plus {position: relative;}
.sub .condition .plus:after {content:'+'; color:var(--pointcolor); font-weight: 500; font-size: 1.375rem; width: fit-content; height: fit-content; position: absolute; top:0; bottom:0; right: 3rem; left:0; margin: auto;}

.sub .condition .conditionArrow {width: 5.3125rem; position: relative; left: -1.5rem;}

@media(max-width:990px) {
    .sub .condition .conditionArrow {transform: rotate(90deg); bottom:2rem; left: 0;}
    .sub .condition .inner .box.L {left: 1.5rem;}
    .sub .condition .inner .box.R {left: -1.5rem;}
    .sub .condition .plus:after {right:0;}
}
@media(max-width:500px) {
    .sub .condition .inner .box.L {left: 0;}
    .sub .condition .inner .box.R {left: 0; bottom:3rem;}
    .sub .condition .plus:after {right:0; bottom:3rem;}
    .sub .condition .conditionArrow {bottom:1rem; padding-right: 1rem;}
}


/* FDA */
.sub .FDA .flexList {padding: 3rem 2rem 5rem;}
.sub .FDA .flexList img {width: 32rem;}
@media(max-width:990px) {
    .sub .FDA .flexList {padding: 5rem 2rem 6rem;}
}