[data-aos="mark-line"]{position: relative;background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(var(--markcolor), 0.2) 50%);background-size: 200% 0.65em;background-repeat: no-repeat;background-position: 200% 100%;padding: 0 0.1em;}
[data-aos="mark-line"].aos-animate{background-position: 100% 100%;}

/* ============= SubBackground ============= */
.opacity_bg{background:var(--opacityColor, rgba(255,255,255,0.7))}
.bgSection{position: relative;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);overflow: hidden;padding:12em 0;}
.fixed_bg:before{position: fixed;;content:'';background-size: cover;background-repeat: no-repeat;background-position: center center;width: 100%;height: 100vh;left: 0;top: 0;z-index: -1;pointer-events: none;}

.sotongIntro_bg:before{background-image:url(/images/sub/Common/sotongIntro_bg.jpg);background-position: left 30% top;}
.sotongInfo_bg:before{background-image:url(/images/sub/Common/sotongInfo_bg.jpg);}



.stemCell_bg:before{background-image:url(/images/sub/Common/stemCell_bg.jpg) }
.Cancer_bg:before{background-image:url(/images/sub/Common/Cancer_bg.jpg)}
.intractable_bg:before{background-image:url(/images/sub/Common/intractable_bg.jpg)}
.Rehabilitation_bg:before{background-image:url(/images/sub/Common/Rehabilitation_bg.jpg)}
.nonSurgical_bg:before{background-image:url(/images/sub/Common/nonSurgical_bg.jpg)}
.bodyType_bg:before{background-image:url(/images/sub/Common/bodyType_bg.jpg);}
.developmentPsychology_bg:before{background-image:url(/images/sub/Common/developmentPsychology_bg.jpg);}
.sports_bg:before{background-image:url(/images/sub/Common/sports_bg.jpg);}

/* ============= SubCommon ============= */
.min-w50{min-width:50%}
.conuteNumber { counter-reset: number 0; } 
.conuteNumber .num-count:before { counter-increment: number 1; content: counter(number,decimal-leading-zero) } 
.dash-line{border-top:2px dashed var(--gray)}

.pd-Box{padding:var(--pdValue ,0.8em 1em)}
[pdVlaue = "style01"]   {--pdValue:0.4em 1.5em}
[pdVlaue = "style01-2"] {--pdValue:0.4em 3em}
[pdVlaue = "style02"] {--pdValue:2em 1.5em}

.rd-Box{border-radius:var(--rdValue ,0.8rem)}

.shadow-round{box-shadow: 0 0 1rem rgba(0,0,0,0.1); border-radius: var(--bdR,0.8rem);}
[sdValue="style01"] {--bdR:2em}
[sdValue="style02"] {min-width:10em}

/* ul style */
.ul-style01 li{min-width:50%;}
.ul-style01 li+li{margin-top:0.5em}

/* ================ Table ================ */
.basic-table {overflow-x: auto;padding-bottom:8px}
.basic-table::-webkit-scrollbar{height: 6px;}

.basic-table table{border-collapse:collapse;border-spacing:0;vertical-align:middle;min-width:650px}
.basic-table th{padding: 0.8em 1em;border:1px solid #fff}
.basic-table td{padding: 1em 2em;border:1px solid #fff}
.basic-table thead tr{background: #6d6e70 ;}
.basic-table tbody{border-top:1px solid #ddd}
.basic-table tbody td{background: #f8f8f8;}
.basic-table tbody td:first-child{text-align: center; background: #f0f0f0;font-weight: 800;}

/* ============= SubTop ============= */
.subTop {z-index: 2;background: #000;}
.subTop .subTopImg {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: -1; background-position: center center;background-repeat: no-repeat;background-size: cover;}
.subTop .container{display: flex;justify-content: center;align-items: center;height:  45rem; padding-top:4em}

/* ============= Icon 모양 ============= */
.sqchk-icon:before{content:'';width:1em;height: 1em;margin-right: 0.6em; margin-top:0.1em; background:url(/images/sub/Common/sq-chk.png) no-repeat center center / contain;}
.number-icon:before{font-family: var(--pointfont);color: white;background: #000;width: 3em;height: 3em;display: flex;align-items: center;justify-content: center;border-radius: 0.5em; margin-right:1em;flex-shrink: 0; font-weight: 700;}
.cir-icon::before{content:'ㆍ';margin-right: 0.2em}

/* ============= pageTab ============= */
.pageTab {display: flex;flex-wrap:wrap; gap:0.5em 1em}
.pageTab a{color:#ccc; position: relative; display: inline-block; padding-top:0.2em;padding-right:0.4em}
.pageTab a:after{position: absolute; content:''; padding:0.2em; border-radius: 50%; background: var(--pointcolor); right:0 ;top:0.2em; transition: all 0.3s; opacity: 0;}

.pageTab a:hover{color: #ccc; font-weight: bold;}
.pageTab a.current{color: #000; font-weight: 800;}
.pageTab a.current:after{top:0; opacity: 1;}

.TabContent + .TabContent{border-top:1px solid #eee;}
.TabVisible:not(.currunt){display: none;}

/* ============= POP-tabLink ============= */
.popLink{border-radius: 0.8em; display: flex; overflow: hidden;box-shadow: 0 0 1em rgba(0,0,0,0.1);}
.popLink a{color: #ccc; background:#fff; flex:1 1 auto; padding:0.8em; position: relative; }
.popLink a+a:before{content:''; position: absolute;width:1px;height: 1em; background:#ddd;top:50%;left:0; transform: translateY(-50%);}

.popLink a.current{background: var(--pointcolor); color: #fff; font-weight: bold}
.popLink a.current:before{display: none;}

@media (max-width:768px) {
    .popLink{flex-wrap:wrap}
    .popLink a{width: calc(100% / 3)}
    .popLink a:nth-child(3n+1)::before{display: none;}
}

/* ============= Popup ============= */
#Popup{display:none;position: fixed;width: 100%;height: 100vh;top: 0;left: 0;background-color:rgba(0,0,0,0.5);z-index: 101;color: #333;}
#Popup .inner{background:#fff;overflow-y: auto;position: fixed;top: 55%;left: 50%;transform: translate(-50%,-50%);width: 90%;max-width:900px; padding:4em 5%; box-shadow: 4px 4px 4px rgba(0,0,0,0.2);max-height: 60%; z-index: 101}
#Popup .close_btn{position:sticky; color: white;background: #000;border-radius: 50%;cursor: pointer;width: 2.7em;height: 2.7em;display: flex;align-items: center;justify-content: center;margin-left: auto; transform: translate(3vw,-3em);top: 0;right: 0; margin-bottom:-2.7em}
#Popup .pd-Box{--pdValue : 0.4em 1em}
#Popup .pop_txt{display: none;}

/* ============= CircleList ============= */
.CircleList {display:flex; gap:2em 1em; justify-content: center;}
.CircleList > .box{width:25%;background: #f7f7f7; padding: 2.5em 1.5em 1em; border-radius: 50%; max-width: 12em; min-height: 12em;}

@media(max-width:1240px){
    .CircleList {flex-wrap:wrap; gap:1em;}
    .CircleList > .box {width:calc((100% - 2em) / 3); max-width:none;min-height: auto; border-radius: 1em; padding:2em}
}
@media(max-width:768px){ 
    .CircleList > .box {width:calc((100% - 1em) / 2)}
}

/* ============= IntroSection ============= */
.introSection{position: relative;}
.introSection:before{content: '';position: absolute;top: 0;left: 0;right: 0;background: var(--pointcolor);height: 50%;z-index: -1;}
.introSection .introShadow{background: #fff;padding: 5em;box-shadow: 0 0 0.5em rgb(0 0 0 / 10%);border-radius: 2em;}

.introSection .introTxt{position: relative; }
.introSection .introTxt:before,.introSection .introTxt:after{position: absolute; content: 'SOTONG';top: 0;top: 0;right: -5%;color:transparent;-webkit-text-stroke: 1px var(--pointcolor);transform: translateY(-50%); font-weight: bold; }

.introSection .introTxt:before{mix-blend-mode: darken; }
.introSection .introTxt:after{mix-blend-mode: plus-lighter;}

@media (max-width:500px) {
    .introSection .introTxt{font-size:18vw}
    .introSection .introTxt:before,.introSection .introTxt:after{right: 50%;transform: translate(50%,-50%);}

    .introSection .introShadow{padding:4em 3em}
}

/* ============= Advantage ============= */
.Advantage{--pdValue:1em 2em;position: relative;}
.Advantage .num-count{border-right: 1px solid #000;margin-right:0.8em;align-self: baseline; flex-shrink: 0;width: 2em;padding-right: 0;}

/* ============= bfafBox ============= */
.bfafBox {gap: 1em}
.bfafBox .titbox{padding:0.7em 1em;background: var(--pointcolor); color: #fff; border-radius: 0.8em;}
.bfafBox .radiusImg{border-radius: 1em;overflow: hidden;position: relative;}
.bfafBox .loginLink{position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.8);    display: flex;align-items: center;justify-content: center;flex-direction: column;color: #fff;}
.bfafBox .loginLink a{background:#fff; color: #000;padding:0.5em;width:8em;display: block;border-radius: 0.5em;}
.bfaf_sbj{background: #000;color:#fff;padding:0.5em;border-radius: 0.5em;}

.bfafSwiper .empty_slide{text-align: center;padding:2em 0;}

/* ============= Cardlist ============= */
.CardList{--y-gap: 2.5rem;padding:1em}
.CardList .box {padding: 2em 1em;border-radius: 1em;display: flex;flex-direction: column;min-height: 15em;justify-content: center;background:#fff}
.CardList .box .txtbox{line-height: 1.2;display: none;}

@media (min-width:1241px) {
    .CardList .box:hover {background: var(--pointcolor); color: #fff;}
    .CardList .flexList{ justify-content: center;}
}
@media (max-width:1240px) {
    .CardList {overflow: visible;}
    .CardList .flexList{gap:0;flex-wrap:nowrap;}
    .CardList .swiper-slide{height:auto !important}
    .CardList .swiper-slide-active {background: var(--pointcolor); color: #fff;}
}

/* ============= ProcessList ============= */
.ProcessList[layoutStyle="fullbox"] {--y-gap : 0em;position: relative;}

.ProcessList .dot, .ProcessList .dot:before{position: absolute;content: '';top: 0;left: 50%;background: #000; border-radius: 50%; z-index: 1;}
.ProcessList .dot{width: 0.5em;height: 0.5em;transform: translate(-50%,-50%);}
.ProcessList .dot:before{left:0;width: 100%;height: 100%;opacity: 0.3;animation: miniBigger 2.5s ease-in-out infinite;}

.ProcessList .box{position: relative;}
.ProcessList .box:after{width: 1px;height: 2em; transform:translateX(-50%);position: absolute;content: '';top: 0;left: 50%;background: #000; }
.ProcessList .tag{padding:0.2em 1em; border-radius: 0.5em}

.ProcessList .nonebox:after{display: none;}

    /* ======> 레이아웃 세로방향  */
    .ProcessList.vertical .box{display: flex; align-items: baseline; padding:0;padding-bottom:3em; border-top:none;border-right:none !important}
    .ProcessList.vertical .box:after{left: 16.5em; background: none; border-right: 1px dashed #aaa; height: 100%;}
    .ProcessList.vertical .box:last-child{padding-bottom:0}
    .ProcessList.vertical .box:first-child:after{height: calc(100% - 1em);top: auto;bottom: 0;}
    .ProcessList.vertical .box:last-child:after{height:1em}
    
    .ProcessList.vertical .tag{flex-shrink: 0; width: 7em; margin-right: 7em;}
    .ProcessList.vertical .dot{left:16.5em;top:1em}

    /* ======> 갯수따른 레이아웃설정  */
    .ProcessList[boxCount="3"] {padding:0 calc((105% - 1400px))}
    .ProcessList .box{padding:3em 1.5em 5em;position: relative; border-top:2px dashed #aaa}
    .ProcessList .num-count:before { counter-increment: number 1; content: 'STEP 'counter(number,decimal-leading-zero) } 

@media (min-width:769px) {
    .ProcessList[boxCount="3"] .box:nth-child(3){border-right: 2px dashed #aaa}
    .ProcessList[boxCount="3"] .box:nth-child(4){order:2;}
    .ProcessList[boxCount="3"] .box:nth-child(5){order:1;}
}
@media (max-width:768px) {
    .ProcessList.xs-wrap2 .box:nth-child(2){border-right: 2px dashed #aaa}
    .ProcessList.xs-wrap2 .box:nth-child(3){order:2}
    .ProcessList.xs-wrap2 .box:nth-child(4){order:1;border-left: 2px dashed #aaa}
    .ProcessList.xs-wrap2 .box:nth-child(4)~.box{order:3}
    
    .ProcessList[boxCount="4"].xs-wrap2 .box:nth-child(4){border-left-color: transparent}

    /* ======> 레이아웃 세로방향  */
    .ProcessList.vertical .box{flex-direction: column;padding-left:3em}
    .ProcessList.vertical .box:after, .ProcessList.vertical .dot{left:0}
    .ProcessList.vertical .tag{margin-bottom:1em;position: relative;}
}

/* ============= StepList ============= */
.StepList {--x-gap: 3em ; --y-gap: 3em; padding-top:1.5em}
.StepList .tagbox{padding:0.2em 1em;border-radius: 0.5em; display: inline-block; transform: translateY(-50%);}
.StepList .txtbox{border-radius: 1em; padding:0 2em 2em}
.StepList .box{position: relative;}
.StepList .box+.box:before{content:'';padding:1em;background:url(/images/sub/Common/step-arr.png) no-repeat center center / 1em; position: absolute;left: -1.5em;transform: translate(-50%,-50%);top:50%}

@media (max-width:500px) {
    .StepList {--y-gap:5em}
    .StepList .box+.box:before{transform: translate(-50%,-50%) rotate(90deg);top: -3em;left: 50%;}
}

/* ============= facilitySwiper ============= */
.facilitySwiper{overflow: visible;width:calc(100% - 2em)}
.facilitySwiper .slide-btn{z-index: 2;}

/* ============= AreaSwiper ============= */
.AreaPagi.swiper-pagination-bullets .swiper-pagination-bullet{width:auto;height: auto; border-radius: 0;margin: 0;display: block; border-radius: 0.5em;}
.AreaPagi{display: flex;flex-direction: column;gap:1em;padding-right:5%;flex-wrap:wrap}
.AreaPagi .swiper-pagination-bullet{background:none;padding:0.8em; opacity: 1;}
.AreaPagi .swiper-pagination-bullet-active{background: var(--pointcolor); color: #fff; font-weight: 700;}

    /* ====> Page */
    .AreaPagi[pagiCount="2"] {flex-direction: row;}
    .AreaPagi[pagiCount="2"] .swiper-pagination-bullet{width:calc((100% - 1em) / 2) !important; }

@media (max-width:1240px) {.AreaPagi{flex-direction: row; }}
@media (max-width:500px) {.AreaPagi .swiper-pagination-bullet{width:100% !important}}

/* ============= CommonSwiper ============= */
.CommonSwiper .num{font-size:7em; line-height: 1; flex-shrink: 0;margin-right:0.3em;color:transparent;-webkit-text-stroke: 1px var(--pointcolor); font-weight: 700;}
.CommonSwiper .txtwrap{display: flex; padding:2em 1.5em 0 0;position: relative;background:#fff}

@media (max-width:768px) {
    .CommonSwiper .txtwrap{padding-top:3em}
    .CommonSwiper .num{position: absolute;top:0; left:0; transform:translateY(-60%);mix-blend-mode: multiply; color: var(--pointcolor);}
}

/* ============= 특정 Section ============= */
[data-section="immunity"] {background: linear-gradient(to right, #f4f4f4,transparent), url(/images/sub/Cancer/immunity/gradientbg.jpg) no-repeat right 15% center / cover}
[data-section="immunity"] .min50{min-width:50%}
[data-section="immunity"] .line_txt{line-height: 0.5; border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom: 0.5em;color: rgba(0,0,0,0.1);mix-blend-mode: multiply;}

[data-section="shingles"] {background: url(/images/sub/intractable/shingles/shingles_bg.jpg) no-repeat center center / cover}

/* ============= 비급여페이지 ============= */
@keyframes shake { 0%,100% { transform: translateX(-25%);} 50% {transform: translateX(25%);}}
.benefit-table {overflow-x: auto;padding-bottom:8px}
.benefit-table::-webkit-scrollbar{height: 6px;}

.benefit-table table{border-collapse: collapse;border-spacing: 0;min-width:768px}
.benefit-table th {background-color: var(--pointcolor);color: #fff;padding: 0.5em; font-weight: bold;font-size:1.2em; border: 1px solid #fff; }
.benefit-table td { padding: 0.4em 1em;word-break: normal;border: 1px solid #ddd; }

.morebox .hand{max-width:2.5rem;animation: shake 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;-webkit-animation: shake 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;}
.morebox .more_table{border: 1px solid;color:var(--pointcolor);border-radius: 5rem;padding: 4px 2.5em;transition: background 0.3s}
.morebox .more_table:hover{background:var(--pointcolor);color:#fff}



.sub .special .box {background: var(--light-gray); border-radius: 50px; padding: 4.5rem 1rem;}
.sub .special .box p {color: #d6d6d6;}

.sub .process .box {position: relative;}
.sub .process .box:after {position: absolute; right: -3rem; top: 45%; transform: translateY(-50%); content: url("/images/sub/bodyType/sports/arrow.png");}
.sub .process .box:last-child:after {display: none;}
.sub .process .sb {background: #000; padding: 1rem; border-radius: 10px; position: relative; }
.sub .process .sb:after {position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); content: ""; width: 0; height: 0; border-bottom: 30px solid transparent; border-top: 30px solid #000; border-left: 25px solid transparent; border-right: 25px solid transparent;}

.sub .process .sb.point-bg {background: var(--pointcolor);}
.sub .process .sb.point-bg:after {border-top: 30px solid var(--pointcolor);}

.sub .process .flexList {--x-gap: 4rem; --y-gap:4rem;}
.sub .process .checkList li {position: relative; padding-left: 25px; margin-top: 0.5rem;}
.sub .process .checkList li:after {position: absolute; left: 0; top: 0; content: url("/images/sub/bodyType/sports/check.png");}

@media(max-width:1240px) {
    .sub .process .box:nth-child(2):after {display: none;}
}

@media(max-width:990px) {
    .sub .process .box:nth-child(1):after {display: none;}
}

.sub .callSection {background: #ebeef6;}
.sub .callSection .bg-white {width: fit-content; margin: auto; padding: 0.5rem; border-radius: 10px;}
.sub .callSection .call {width: fit-content; margin: 0.5rem auto 1rem;}

@media(max-width:768px) {
    .sub .callSection .call img {transform: scale(0.8);}
}

@media(max-width:420px) {
    .sub .callSection .call .font-80 {font-size: 4.5rem;}
}

@media(max-width:990px) {
    .sub .treat .flex-between {flex-direction: column;}
    .sub .treat .titwrap {width: 100%;}
    .sub .treat .arr-box {position: relative; top: auto; right: auto; width: 100%; margin-top: 1rem;}
}

.sub .Sp-interior{position: relative;}
.sub .Sp-interior .slide-btn{position: absolute; z-index: 2; top:50%;transform: translateY(-50%);}
.sub .Sp-interior .slide-prev{left:0}
.sub .Sp-interior .slide-next{right:0}

.sub .Sp-interior .interiorSwiper{padding:5em 1.5em}
.sub .Sp-interior .interiorSwiper .swiper-slide {opacity: 0.5; aspect-ratio: 830/555; border-radius: 1.5em; overflow: hidden;}
.sub .Sp-interior .interiorSwiper .swiper-slide-active {transform: scale(1.4) !important;z-index: 3 !important;opacity: 1;}
.sub .Sp-interior .interiorSwiper .swiper-slide img {object-fit: cover; width: 100%;;height: 100%;;}

@media (max-width:1240px) {
    .sub .Sp-interior .interiorSwiper{overflow: visible;}
}


.Q-instar {position: fixed; left: 1.5rem; bottom: 3rem; z-index: 99; width: 50px; height: 50px;}
.Q-instar img {box-shadow: 0 0 1em rgba(0, 0, 0, 0.15); border-radius: 50%;}

@media(max-width:990px) {
    .Q-instar {bottom: 7.5rem;} 
}