:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .xgap1 {--x-gap:1rem}
.sub .xgap2 {--x-gap:2rem}
.sub .xgap3 {--x-gap:3rem}
.sub .xgap4 {--x-gap:4rem}
.sub .xgap5 {--x-gap:5rem}

.sub .ygap0 {--y-gap:0rem}
.sub .ygap1 {--y-gap:1rem}
.sub .ygap2 {--y-gap:2rem}
.sub .ygap3 {--y-gap:3rem}
.sub .ygap4 {--y-gap:4rem}
.sub .ygap5 {--y-gap:5rem}



@media(max-width:768px) {
    .sub.font-18 {font-size: 1.5rem;}
}

.sub .subTit {font-size: 2.5rem; line-height: 1.3; font-weight: 700;}
.sub .subTit span {color:var(--pointcolor);}
.sub .subTit.Wh span {color:#add6e4;}

.sub .gray {color:#808080;}
.sub .sky {color:#add6e4;}

.subImg {border-radius: 1rem; overflow: hidden;}

.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum.Gr {font-weight: 400; color:#767676;}
.sub .zum:after {content:'· '; font-weight: 700; color:var(--pointcolor); position: absolute; left: 0; top:0;}
.sub .zum.Gr:after {color:#767676; font-weight: 400;}

.sub .check {position: relative; padding-left: 2.5rem;}
.sub .check:after {content:''; width: 1rem; height: .8125rem; background-image: url('/img/sub/check.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: .8rem; top:.4rem;}

.sub .swiper-pagination {position: relative; bottom:0; display: flex; flex-direction: column; gap:2rem;}
.sub .swiper-pagination-bullet {width: 100%; margin: 0; border-radius: 0; background-color: transparent; opacity: .3; height: auto; text-align: left; display: flex; align-items: center; gap:0 1rem;} 
.sub .swiper-pagination-bullet-active {opacity: 1;}
.sub .swiper-pagination-bullet .arrow {width: 1.875rem; opacity: 0;}
.sub .swiper-pagination-bullet-active .arrow {opacity: 1;}
.sub .swiper-pagination-bullet:only-child {display: flex !important;}


/* subTop */
.subTop {height:90vh; position:Relative; top:0; left:0; z-index: 3;}
.subTop .subTopImg {position:relative; width:100%; height:100%;}
.subTop .inner {position: absolute; max-width: var(--layoutwidth); width: 90%; left: 0; right:0; top:22.5rem; margin: auto;}
@media (max-width: 768px) {
    .subTop {height: auto;}
    .subTop .subTopImg {height: 90vh;}
    .subTop .inner {text-align: center; top:13vh;}
}

.subTab {position: absolute; max-width: var(--layoutwidth); width: 90%; bottom: 5rem; margin: auto; left: 0; right:0;}
.subTab .select-options {gap:0 .5rem; align-self: flex-end;}
.subTab .select-options li a {text-align: center; font-weight: 700; white-space: nowrap; padding: 1rem 0; border-bottom:4px solid #000; font-size: 1.625rem; display: flex; align-items: center; justify-content: center;}
.subTab .select-options li a {opacity: .3;}
.subTab .select-options li a.on {opacity: 1;}
.subTab .select-trigger {display: none;}

.subTab .select-trigger:after {width: 10px; height: 10px; border-right: 2px solid #191919; border-bottom: 2px solid #191919; position: absolute; right: 2rem; content: ''; top: 2rem; transform: rotate(45deg); transition: all 0.2s ease-in-out;}
.subTab.open .select-trigger:after {transform: rotate(-135deg); transition: all 0.2s ease-in-out;}

@media (max-width: 1400px) {
    .subTab .select-options li {font-size: 1.2rem; align-self: end;}
}


@media (max-width: 500px) {
    .subTab {position: relative; bottom:auto; max-width: 100%; width: 100%;}
    .subTab button {color:#111;}
    .subTab .select-trigger {display: block; width: 100%; padding: 1.3rem 2rem; border-bottom: 1px solid #e5e5e5; background: #fff;text-align: left; cursor: pointer; font-size: 2rem; font-weight: 700;}
    .subTab .select-options {display: none; position: relative; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; z-index: 10; padding: 1.3rem 0;}
    .subTab .select-options li a {font-size: 2rem; border-bottom:none; text-align: left; justify-content: flex-start; padding:0 2rem;}
    .subTab .select-options li a {opacity: 1;}
    .subTab .select-options li a.on {opacity: .3;}
    .subTab.open .select-options {display: flex; gap:1.6rem 0; height: 100%;}
}



/* intro */
.sub .intro .inner {background-color: #f2f1eb; border-radius: 1rem; overflow: hidden;}
.sub .intro .Desc {padding: 3rem 0 3rem 7.5rem; display: flex; align-items: center;}
.sub .intro .Desc > div {max-width: 36.6875rem; width: 100%;}

.sub .intro .Img {display: flex; align-items: flex-end; justify-content: flex-end;}

.sub .intro .checkList li {background-color: #fff; padding: .8rem; max-width: 538px;}
.sub .intro .checkList.LG li {max-width: 580px;}
.sub .intro .checkList.MD li {max-width: 414px;}
.sub .intro .checkList.SM li {max-width: 330px;}

@media (max-width: 990px) {
    .sub .intro .Desc {padding-top: 4rem;}
    .sub .intro .Img img {width: 44.9375rem; margin-left: auto;}
}
@media (max-width: 768px) {
    .sub .intro .check:after {top:.5rem}
}
@media (max-width: 500px) {
        .sub .intro .Desc {padding: 4rem 2rem 1rem;}
        .sub .intro .Desc > div {margin: auto;}
}


/* early */
.sub .early .inner {background-color: #ebf0f2; border-radius: 1rem; overflow: hidden;}
.sub .early .Desc img {width: 35.1875rem;}
.sub .early .roundBox {border-radius: 1rem; background-color: #FAF9F7; padding: 2rem 1rem;}
@media (max-width: 990px) {
    .sub .early .Desc {order:-1; justify-content: center; padding: 7.5rem 0 0;}
    .sub .early .Img img {width: 44rem; margin: auto;}
}


/* symptom */
.sub .symptom .flexBox {display: flex; gap:3rem 2rem;}
.sub .symptom .TitFlex {display: flex; gap:1rem 2rem; align-items: flex-end;}
.sub .symptom .TitFlex .subTit {width: 23%;}

.sub .symptom .Line {width: 100%; height: 1px; background-color: #111; margin: 2rem auto;}
.sub .symptom .DescList {display: flex; flex-direction: column; gap:.5rem;}
.sub .symptom .DescList li {background-color: #f2f1eb; padding: .8rem 1.5rem;}
.sub .symptom .subImg {margin-left: auto; width: 30.5rem;}
@media (max-width: 990px) {
    .sub .symptom .flexBox {flex-wrap: wrap; gap:3rem 0;}
    .sub .symptom .TitFlex {flex-direction: column; align-items: flex-start;}
    .sub .symptom .TitFlex .subTit {width: 100%;}
    .sub .symptom .Btn {order:1; width: 40%;}
    .sub .symptom .Img {order:2; width: 60%;}
    .sub .symptom .Txt {order:3;}
}
@media (max-width: 500px) {
    .sub .symptom .box {width: 100% !important;}
    .sub .symptom .subImg {margin-right: auto;}
}


/* symptomTab */
.sub .symptomTab .tab-menu {display: flex; flex-direction: column; gap:2rem;}
.sub .symptomTab .tab-menu li {display: flex; align-items: center; gap:0 1rem; opacity: .3; cursor: pointer;}
.sub .symptomTab .tab-menu li .arrow {width: 1.875rem; opacity: 0;}
.sub .symptomTab .tab-menu li.active {opacity: 1;}
.sub .symptomTab .tab-menu li.active .arrow {opacity: 1;}
@media (max-width: 990px) {
    .sub .symptomTab .tab-menu {position: absolute;}

    .sub .symptom.symptomTab .Img {order:2; width: 100%;}
    .sub .symptomTab .TabDesc {width: 75%; margin-left: auto;}
    
}
@media (max-width: 500px) {
    .sub .symptomTab .tab-menu {position: relative;}
    .sub .symptomTab .TabDesc {width: 100%;}
}



/* treatment */
.sub .treatment .box {border-radius: 1rem; overflow: hidden; aspect-ratio: 1/1; position: relative;}
.sub .treatment .box .Bg {width: 100%; height: 100%; background-color: #ddd; background: no-repeat center / cover;  transition: .3s;}
.sub .treatment .box1 .Bg {background-image: url('/img/sub/treatment01.jpg');} 
.sub .treatment .box2 .Bg {background-image: url('/img/sub/treatment02.jpg');} 
.sub .treatment .box3 .Bg {background-image: url('/img/sub/treatment03.jpg');} 
.sub .treatment .box4 .Bg {background-image: url('/img/sub/treatment04.jpg');} 
.sub .treatment .box5 .Bg {background-image: url('/img/sub/treatment05.jpg');} 
.sub .treatment .box6 .Bg {background-image: url('/img/sub/treatment06.jpg');} 
.sub .treatment .box7 .Bg {background-image: url('/img/sub/treatment07.jpg');} 
.sub .treatment .box8 .Bg {background-image: url('/img/sub/treatment08.jpg');} 
.sub .treatment .box9 .Bg {background-image: url('/img/sub/treatment09.jpg');} 
.sub .treatment .box10 .Bg {background-image: url('/img/sub/treatment10.jpg');} 


.sub .treatment .box:hover .Bg {transition: .3s; transform: scale(1.05);}
.sub .treatment .TxtBox {position: absolute; width: fit-content; height: fit-content; left: 2.5rem; top:3rem;}
@media (max-width: 500px) {
    .sub .treatment .box {aspect-ratio: 3/2;}
}


/* review */
.sub .review .Txt {padding: 2rem; background-color: #fff; min-height: 13rem; height: 100%; font-size: 1rem;}
.sub .review .gray {color:#808080; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}

.sub .review .swiper-wrapper {transition-timing-function: linear;}
.sub .review .swiper-slide {border-radius: 1rem; overflow: hidden;}
.sub .review .swiper-slide img {width: 100%;}
@media (max-width: 768px) {
    .sub .review .Txt {font-size: 14px; min-height: 17.5rem;}
}



/* spineClinic */
.sub .spineClinic .inner {max-width: 89.75rem;width: 100%; position: relative; padding-bottom: 2rem;}
.sub .spineClinic .Img {background: no-repeat center / cover; border-radius: 1rem; overflow: hidden; aspect-ratio: 28/12; width: 66.875rem; position: relative;}
.sub .spineClinic .Txt_wrap {position: absolute; right:0; bottom:0; display: flex; align-items: flex-end; gap:0 1rem;}
.sub .spineClinic .TxtBox {border-radius: 1rem; background-color: #fff; padding: 3rem; aspect-ratio: 1/1; width: 29rem; position: relative; z-index: 3;}
.sub .spineClinic .Number {position: absolute; right:1rem; bottom:1rem;}
.sub .spineClinic .Number b {font-size: 26px;}
.sub .spineClinic .Number span {font-size: 18px;}
.sub .spineClinic .Deco img {max-width: 23.9375rem;}

.sub .spineClinic .swiper-slide {display: flex; transition-delay: all 1s;}
.sub .spineClinic .swiper-slide .Deco {/* position: absolute; width: fit-content; height: fit-content; left:37rem; */ position: relative; bottom: 2rem; opacity: 0; filter: blur(20px); transition: 1s; transition-duration: 2s;}
.sub .spineClinic .swiper-slide-active .Deco {opacity: 1; filter: blur(0); transition: 1s; transition-duration: 2s;}

.sub .spineClinic .swiper-slide .Tit {transform: translateY(0px); transition: 1s; transition-duration: 2s; font-weight: 700;}
.sub .spineClinic .swiper-slide-active .Tit {transform: translateY(10px); transition: 1s; transition-duration: 2s;}

.sub .spineClinic .Tit {text-decoration:1px underline; text-underline-offset: .4375rem;}
.sub .spineClinic .comma {position: relative; padding-top: 1.6rem;}
.sub .spineClinic .comma:after {content:''; width: .9375rem; height: 1.125rem; background-image: url('/img/sub/comma.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top:0;}
@media (max-width: 768px) {
    .sub .spineClinic .inner {display: flex; flex-direction: column; width: 90%; margin: auto;}
    .sub .spineClinic .Txt_wrap {position: relative;}

    .sub .spineClinic .Deco img {width: 18rem;}
    .sub .spineClinic .Img {width: 100%; height: 18.125rem;}
    .sub .spineClinic .swiper-slide .Deco {position: absolute; top:-10rem; right:0;}
    .sub .spineClinic .TxtBox {width: 100%; max-width: 100%; aspect-ratio: auto; min-height: 290px;}
}
/* @media (max-width: 500px) {
        .sub .spineClinic .TxtBox {aspect-ratio: 9/7;}
} */



/* reservation */
.sub .reservation .inner {max-width: 1792px; margin: auto; width: 95%; background-color: #f2f1eb; padding:7rem 3rem 5rem; border-radius: 4rem;}
.sub .reservation .flexBox {display: flex; gap:6rem 2rem;}
.sub .reservation .Desc {color:#bfbfbf; line-height: 1.2;}
.sub .reservation .box {position: relative; transform: translateY(0px); transition: all .3s;}
.sub .reservation .box img {transition: .3s;}
.sub .reservation .box:hover img {transform: translateY(-10px); transition: .3s;}
.sub .reservation .box:after {content:''; height: 100%; width: 1px; background-color: #e5e5e5; position: absolute; right:0; top:0; bottom:0;}
.sub .reservation .box:last-child:after {display: none;}

.sub .reservation .boxImg img, .sub .reservation .callImg img {border-radius: 1.25rem; overflow: hidden;}
.sub .reservation .callBox {position: absolute; left: 0; right:0; margin: auto; top:-3.3rem; width: fit-content; color:#fff; padding: .3rem 1.5rem; border-radius: .5rem; background-color: var(--pointcolor);}
.sub .reservation .box.call:hover .callBox {animation: bounce 1s ease-in infinite;}
.sub .reservation .callBox:after {content:''; width: 1.25rem; height: .875rem; clip-path: polygon(50% 83%, 0 0, 100% 0); background-color: var(--pointcolor); bottom:-0.8rem; left: 0; right:0; margin: auto; position: absolute;}
.sub .reservation .Num {display: none;}
@media(max-width:768px) {
    .sub .reservation .flexBox {gap:4rem;}
    .sub .reservation .box:hover img {transform: translateY(0px);}
}
@media(max-width:500px) {
    .sub .reservation .box:after {display: none;}
    .sub .reservation .inner {max-width: 100%; width: 100%; padding:7rem 0rem 5rem;}
    .sub .reservation .Tit {padding: 0 3rem;}
    .sub .reservation .box.call {width: 100%;}
    .sub .reservation .callImg {width: 84%; margin: auto; background-color: var(--pointcolor); border-radius: 1.25rem; position: relative;}
    .sub .reservation .callImg img {margin-left: auto; margin-right: 0; border-radius: 0 1.25rem 1.25rem 0;}
    .sub .reservation .Num {position: absolute; display: block; font-size: 2.25rem; color:#fff; width: fit-content; height: fit-content; top:0; bottom:0; left: 2rem; margin: auto;}
}
@keyframes bounce {
  50% {
    transform: translateY(-15px);
  }
}


/* person */
.sub .person {background: no-repeat center url('/img/sub/personBg.jpg'); background-size: cover;}
.sub .person .inner {display: flex; gap:3rem; justify-content: space-between;}
.sub .person .enTit {font-size: 16px; letter-spacing: 14px; font-weight: 300; line-height: 1.8;}
.sub .person .Line {width: 1.25rem; height: .25rem; background-color: #fff; margin: 2rem 0;}

.sub .person .DescList {max-width: 44.3125rem; width: 100%;}
.sub .person .DescList li {display: flex; gap:3rem;}
.sub .person .Line100 {width: 100%; height: 1px; background-color: rgba(255,255,255,.2); margin: 2rem auto;}
.sub .person .Tit {text-decoration: 4px underline; text-underline-offset: .9rem; line-height: 1;}
.sub .person .gray {color:#bfbfbf;}
@media(max-width:1100px) {
    .sub .person .TitBox {display: none;}
    .sub .person .DescList {margin: auto;}
}
@media(max-width:500px) {
    .sub .person .DescList {max-width: 100%;}
    .sub .person .DescList li {flex-direction: column;}
}



/* clinic */
.sub .clinic .inner {max-width: 1792px; margin: auto; width: 95%; background-color: #f2f1eb; padding:7rem 3rem 5rem; border-radius: 4rem;}
.sub .clinic .LogoImg {position: relative; padding-left: 3.5rem;}
.sub .clinic .LogoImg:after {content:''; width: 2.875rem; height: 3.3125rem; background-image: url('/img/sub/LogoImg.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top:.3125rem;}

.sub .clinic .flexBox {display: flex; gap:4rem 2rem;}
.sub .clinic .arrowBox {background-color: #fff; display: flex; align-items: center; gap:0 2rem; justify-content: space-between; padding: .85rem 1.7rem;}
.sub .clinic .arrowBox:hover {background-color: var(--pointcolor); color:#fff; font-weight: 700;}

.sub .clinic .arrowBox .arrow {transition: .3s; opacity: 1; width: 1.875rem;}
.sub .clinic .arrowBox:hover .arrow {transform: translateX(10px); opacity: 0; transition: .3s;}

@media(max-width:500px) {
    .sub .clinic .inner {width: 100%; max-width: 100%; padding:7rem 1rem 6rem;}
    .sub .clinic .arrowBox {gap:0 1rem;}
}


/* process */
.sub .process .TitBox {display: flex; gap:0 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid #e5e5e5;}
.sub .process .step {background-color: var(--pointcolor); border-radius: .25rem; padding: .3rem 1rem; color:#fff; white-space: nowrap;}



/* start */
.sub .start .inner {background-color: #f2f1eb; border-radius: 1rem; overflow: hidden; padding: 8.125rem 2rem;}
.sub .start .Desc {padding-left: 3rem;}
.sub .start .checkList {display: flex; flex-direction: column; gap:1rem;}
.sub .start .checkList li {background-color: #fff; padding: .8rem 1rem; max-width: 418px;}
.sub .start .check {position: relative; padding-left: 3rem;}
.sub .start .check:after {content:''; width: 1rem; height: .8125rem; background-image: url('/img/sub/check.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 1rem; top:.4rem;}
@media(max-width:768px) {
    .sub .start .Img img {margin: auto;}
    .sub .start .Desc {padding-left: 0;}
}



.sub .public {background-color: #000; position: relative; z-index: 0;}
.sub .public .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute;top: 0;left: 0;width: 100%;height: 100%; z-index: -1;}
.sub .public .bg {position: fixed;display: block;top: 0;left: 0;width: 100%;height: 100vh;background-image: url('/img/sub/IndustrialAccident/publicBg.jpg');background-position: 50%;background-repeat: no-repeat;background-size: cover;transform: translateZ(0);will-change: transform;}

.sub .public .subTit {display: flex; align-items: center; justify-content: center;}
.sub .public .subTit span {color:#add6e4;}

.sub .public .publicLogo {position: relative; padding-left: 4rem;}
.sub .public .publicLogo:after {content:''; width: 2.5625rem; height: 2.6875rem; background-image: url('/img/sub/IndustrialAccident/public.png'); background-repeat: no-repeat; background-size: contain; position: absolute; top:0; bottom:0; left: 1rem; margin: auto;}

.sub .public .iconList {max-width: 610px; margin: 4rem auto 0;}
.sub .public .public_icon {width: 6.25rem;}
@media(max-width:768px) {
    .sub .public .subTit {flex-direction: column;}
}



/* part */
.sub .part .inner {background-color: #f2f1eb; border-radius: 1rem; overflow: hidden; padding: 2rem;}
.sub .part .inner .inner_wrap {max-width: 1197px; margin: auto;}

.sub .part .partBgImg {position: absolute; top:0; bottom:0; left: 0; right:0; margin: auto; width: 19.9375rem;}

.sub .part .box {display: flex; height: 41.4375rem;}
.sub .part .LeftBox {width: 50%; height: 100%; position: relative; left: 0;}
.sub .part .RightBox {width: 50%; height: 100%; position: relative; right:0;}

.sub .part .Desc {display: flex; position: absolute;}
.sub .part .Desc.Col {flex-direction: column;}
.sub .part .Desc1 {right: 0; top:1.75rem;}
.sub .part .Desc2 {right: 6rem; top:10rem;}
.sub .part .Desc3 {right: 3rem; bottom: 5rem;}
.sub .part .Desc4 {left:0; top: 5rem;}
.sub .part .Desc5 {left:0; top: 19rem;}

.sub .part .Desc6 {right: 4.5rem; top:13.5rem;}
.sub .part .Desc7 {right: 5.2rem; bottom:2rem;}
.sub .part .Desc8 {left: 3rem; top:4.5rem;}
.sub .part .Desc9 {left: 2.5rem; bottom:0;}

.sub .part .TxtBox {background-color: #fff; border-radius: 1rem; padding: 1.1rem 1.5rem; width:fit-content;}
.sub .part .Line {width: 3rem; height: 1px; background-color: var(--pointcolor); position: relative; top:0; bottom:0; margin: auto;}
.sub .part .Line.H {width: 1px; height: 3rem;}
.sub .part .Line:after {content:''; width: .6875rem; height: .6875rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; right:0; top:0; bottom:0; margin: auto;}
.sub .part .Line.H:after {top:0; bottom:auto; left: 50%; transform: translateX(-50%);}
.sub .part .Line.R:after {left:0; right:auto;}

.sub .part .Line.Top {top:2rem; bottom:auto; margin: 0;}
.sub .part .Line.Bottom {top:auto; bottom:-7rem; margin: 0;}
.sub .part .Line.Center {right:0; left:0; margin: auto;}

@media(max-width:768px) {
    .sub .part .Desc2 {top:12rem;}
    .sub .part .Desc6 {top:11.5rem;}
    .sub .part .Desc7 {bottom:0;}
}
@media(max-width:500px) {
    .sub .part .container {width: 100%;}
    .sub .part .inner {padding: 2rem 0;}
    .sub .part .inner .inner_wrap {position: relative; left: 1.3rem;}

    .sub .part .Desc2 {right:auto; left: 0;}
    .sub .part .Desc7 {right: auto; left: 0;}
}


/* way */
.sub.doctor .enTxt {font-size: 1rem; letter-spacing: .875rem; font-weight: 300; line-height: 1.8;}
.sub.doctor .Line {width: 100%; height: 1px; background-color: rgba(229,229,229,.3); margin: 4rem 0;}
.sub.doctor .Line.Dark {background-color: #e5e5e5;}

.sub .way {background: no-repeat center url('/img/sub/kh365/wayBg.jpg'); background-size: cover;}

.sub .way .DescBox {max-width: 51.875rem; margin-left: auto;}
.sub .way .name {font-family: 'KOTRA_SONGEULSSI';}

@media(max-width:768px) {
    .sub .way .DescBox {max-width: 100%; flex-direction: column; gap:3rem;}
}


/* doctorBox */
.sub .doctorBox .flexList {height: auto; position: relative;}
.sub .doctorBox .Img {position: sticky; top:6rem; align-self: flex-start}
.sub .doctorBox .Desc {height: auto; z-index: 3;}
@media(max-width:768px) {
    .sub .doctorBox .Img {order: 2;}
}



/* kh */
.sub .kh {background: no-repeat center url('/img/sub/kh365/khBg.jpg'); background-size: cover; height: 100vh; position: relative;}
.sub .kh.kh2 {background-image: url('/img/sub/kh365/khBg2.jpg');;}
.sub .kh.kh3 {background-image: url('/img/sub/kh365/khBg3.jpg');;}
.sub .kh .TxtBox {position: absolute; width: 95%; height: fit-content; top:0; bottom:0; margin: auto; left: 50%; transform: translateX(-50%);}
.sub .kh .LogoImg {width: 22.0625rem;}
.sub .kh .Tit span {color:#41aed4;}

.sub.kh365 .under {text-decoration : underline rgba(17,17,17,.3); padding-left: 1.5rem; text-decoration-thickness: 1px; letter-spacing: -0.025rem; text-underline-offset:.6rem; line-height: 1.4;}
.sub.kh365 .under.Wh {text-decoration : underline rgba(255,255,255,.3); text-decoration-thickness: 1px;}

.sub.kh365 .brit {position: relative;}
.sub.kh365 .brit:after {content:''; width: .9375rem; height: 1.125rem; background-image: url('/img/main/brit.png'); background-repeat: no-repeat; background-size: contain; position: absolute; left: -1.5rem; top:.3125rem;}
.sub.kh365 .brit.Wh:after {filter: invert(1);}

/* kh_half */
.sub .kh_half .Desc > div {padding: 2rem;}
.sub .kh_half .Img {background: no-repeat center / cover; align-self: stretch; height: 100vh;}
.sub .kh_half .Img1 {background-image: url('/img/sub/kh365/kh_halfBg_01.jpg');}
.sub .kh_half .Img2 {background-image: url('/img/sub/kh365/kh_halfBg_02.jpg');}
.sub .kh_half .Img3 {background-image: url('/img/sub/kh365/kh_halfBg_03.jpg');}
.sub .kh_half .Img4 {background-image: url('/img/sub/kh365/kh_halfBg_04.jpg');}
@media(max-width:768px) {
    .sub .kh_half .Img {height: 50vh;} 
    .sub .kh_half .Desc {height: 50vh; order:-1;}
    .sub .kh_half .Desc > div {max-width: 480px; width: 100%;}
}

@media(max-width:500px) {
    .sub .kh_half .Img {height: 40vh;} 
    .sub .kh_half .Desc {height: 60vh; order:-1;}
    .sub .kh_half .Desc > div {padding: 2rem 2rem 0;}
}

.sub.story .story_item {position: relative; width: 100%; height: 100vh; background-attachment: fixed; background-color: #faf9f7; padding: 0;}
.sub.story .blank {height: 100vh;}



/* interior */
.sub .interior .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
.sub .interior .swiper-slide {width: auto !important;}
.sub .interior .swiper-slide img {object-fit: cover;}

@media(max-width:990px) {
    .sub .interior .swiper-slide img {height:30rem}
}
@media(max-width:500px) {
    .sub .interior .swiper-slide img {height:20rem}
}


/* recommend */
.sub .recommend .Img {background: no-repeat center / cover; align-self: stretch; border-radius: 1rem; overflow: hidden;}
.sub .recommend .Desc {background-color: #f2f1eb; border-radius: 1rem; padding: 7.9rem 2rem;}
.sub .recommend .Desc > div {max-width: 530px; width: 90%;}
.sub .recommend .Tit {max-width: 6.1875rem; width: 100%; height: 6.1875rem; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.sub .recommend .Tit.Md {border-radius: 1rem; text-align: center; max-width: 6.25rem; height: 5.625rem;}
.sub .recommend .recommendList {display: flex; flex-direction: column; gap:.7rem}
.sub .recommend .recommendList li {display: flex; align-items: center; gap:1rem;}

.sub .recommend .checkBox .box {background-color: #fff; border-radius: 1rem; padding: 2rem;}
@media(max-width:990px) {
    .sub .recommend .Img {aspect-ratio: 13/16;}
}
@media(max-width:500px) {
    .sub .recommend .Tit.Md {max-width: fit-content; height: auto; padding: .7rem 1rem;}
    .sub .recommend .recommendList {gap:2rem;}
    .sub .recommend .recommendList li {flex-direction: column; align-items: flex-start;} 
}


/* get */
.sub .get .flexBox {display: flex; gap:4rem 1rem;}
.sub .get .box {background-color: #fff; padding: .8rem 1rem;}


.sub .get .inner {max-width: 1792px; border-radius: 1rem; width: 95%; margin: auto; background: no-repeat center url('/img/sub/Rejuvenation/getBg.jpg'); background-size: cover; padding: 8.125rem 0;} 



/* cause */
.sub .cause .inner {max-width: 1792px; margin: auto; width: 95%; background-color: #f2f1eb; padding:7rem 3rem 5rem; border-radius: 4rem;}
.sub .cause .flexBox {display: flex; gap:6rem 2rem;}

.sub .cause .box {position: relative;}
.sub .cause .box:after {content:''; height: 100%; width: 1px; background-color: #e5e5e5; position: absolute; right:0; top:0; bottom:0;}
.sub .cause .box:last-child:after {display: none;}
@media(max-width:768px) {
    .sub .cause .box:after {display: none;}
}



/* important */
.sub .important .Img {background: no-repeat center / cover; border-radius: 1rem; overflow: hidden; min-height: 24.25rem;}
.sub .important .importantList {display: flex; flex-direction: column; gap:.7rem; max-width: 490px; width: 100%;}
.sub .important .importantList li {background-color: #f2f1eb; padding: .8rem 1rem;}
@media(max-width:768px) {
    .sub .important .Img {height: 35rem;}
}


/* time */
.sub .time .flexList {border-radius: 1rem; overflow: hidden;}
.sub .time .Img {background: no-repeat center / cover;}
.sub .time .Desc {background-color: #fff; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.sub .time .Desc > div {max-width: 33.125rem; width: 100%; padding: 3rem 1rem;}
.sub .time .timeList {display: flex; flex-direction: column; gap:3rem;}
.sub .time .timeList li {display: flex; align-items: center; gap:2rem;}
.sub .time .timeList .Tit {background-color: #f2f1eb; border-radius: 1rem; max-width: 6.75rem; width: 100%; height: 6.875rem; display: flex; align-items: center; justify-content: center;}
@media(max-width:768px) {
    .sub .time .Img {height: 25rem;}
    .sub .time .Desc {justify-content: flex-start; padding: 0 2rem;}
    .sub .time .Desc > div {max-width: 100%;}
}



/* need */
.sub .need .box {display: flex; align-items: center;}
.sub .need .Img {border-radius: 1rem; overflow: hidden; align-self: stretch; background: no-repeat center / cover;}
.sub .need .Desc {background-color: #fff; padding:2.5rem 2rem; border-radius: 1rem; align-self: stretch;}
.sub .need .hyphen {position: relative; padding-left: 1.5rem;}
.sub .need .hyphen:after {content:'- '; color:var(--pointcolor); position: absolute; left: 0; top:0;}
@media(max-width:400px) {
    .sub .need .box {flex-direction: column;}
    .sub .need .Desc {width: 100%;}
    .sub .need .Img {height: 20rem; width: 100%;}
}



/* change */
.sub .change .box {display: flex; flex-direction: column; position: relative;}
.sub .change .Tit {background-color: #fff; border-radius: 1rem; padding: 2rem;}
.sub .change .Desc {background-color: #f2f1eb; border-radius: 1rem; padding: 2rem; height: -webkit-fill-available;}
.sub .change .info {background-color: var(--pointcolor); color:#fff; width: fit-content; padding: .5rem 1.5rem; margin: 4rem auto 0;}
.sub .change .info .i {position: relative; padding-left: 2rem; letter-spacing: -0.025rem;}
.sub .change .info .i:after {content:''; width: 1.25rem; height: 1.25rem; background-image: url('/img/sub/Medial/woman/i.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top:.1875rem;}

.sub .change .BgBox .Tit {min-height: 13.3125rem; position: relative;}
.sub .change .BgBox .Tit:after {content:''; position: absolute; font-family: var(--koSerif); right:1rem; bottom:1rem; font-size: 6.25rem; color:#f2f1eb; line-height: 1;}
.sub .change .BgBox .box1 .Tit:after {content:'濕';}
.sub .change .BgBox .box2 .Tit:after {content:'滯';}
.sub .change .BgBox .box3 .Tit:after {content:'虧';}

.sub .change .changeList {display: flex; align-items: center; gap:1.5rem; justify-content: flex-end;}
.sub .change .changeList li {display: flex; align-items: center; gap:1rem;}
.sub .change .changeList li .square {width: 1.75rem; height: 1.75rem; border-radius: .25rem; background-color: #826750;}
.sub .change .changeList li:nth-child(2) .square {background-color: #941a1a;}
.sub .change .changeList li:nth-child(3) .square {background-color: #41aed4;}
@media(max-width:500px) {
    .sub .change .changeList {flex-wrap: wrap; gap:1rem;}
    .sub .change .changeList li {width: 100%;}
}


/* reason */
.sub .reason .Desc > div {max-width: 490px; width: 100%;}
.sub .reason .DescBox {background-color: #fff; border-radius: 1rem; padding: 1.5rem;}
.sub .reason .Img {align-self: stretch; background: no-repeat center / cover; border-radius: 1rem; overflow: hidden; min-height: 43.5rem;}
@media(max-width:768px) {
    .sub .reason .Desc {justify-content: flex-start;}
}



/* uneasy */
.sub .uneasy .inner {background-color: #ebf0f2; border-radius: 1rem; overflow: hidden; display: flex; position: relative;}
.sub .uneasy .Desc {max-width: 756px; width: 100%; margin-left: auto; margin-right: 5rem; padding: 8.125rem 0;}
.sub .uneasy .Desc .box {background-color: #fff; border-radius: 1rem; padding: 1rem 0; position: relative;}
.sub .uneasy .Desc .box:after {content:''; width: 1.3125rem; height: 1rem; background-image: url('/img/sub/Medial/digestive/arrow.png'); background-repeat: no-repeat; background-size: cover; position: absolute; top:0; bottom:0; right: -1.7rem; margin: auto;}
.sub .uneasy .Desc .box:last-child:after {display: none;} 

.sub .uneasy .uneasyImg {position: absolute; left: 2rem; bottom:0; width: 28.875rem;}

@media(max-width:1340px) {
    .sub .uneasy .inner {flex-direction: column;}
    .sub .uneasy .Desc {margin-right: auto;  padding: 8.125rem 0 3rem; width: 90%;}
    
    .sub .uneasy .uneasyImg {position: relative; order:2; left: 0; right:0; margin: auto;}
}

@media(max-width:768px) {
    .sub .uneasy .Desc .box:after {display: none;} 
}



/* versus */
.sub .versus .inner {max-width: 1197px; width: 100%; margin: auto;}
.sub .versus .versusTb {width: 100%; border-spacing: 0; border-radius: 1rem; overflow: hidden; border:1px solid #b5b4ac;}
.sub .versus .versusTb td {border-bottom:1px solid #b5b4ac; border-left:1px solid #b5b4ac; padding: 1rem;}
.sub .versus .versusTb tr td:first-child {border-left: none;}
.sub .versus .versusTb tr:last-child td {border-bottom: none;}

.sub .versus .versusTb .Tit {background-color: var(--pointcolor); color:#fff;}
.sub .versus .versusTb .Img {padding: 3rem;}