.flexList { --x-gap:1.750rem; --y-gap:1.750rem;   display:flex;  flex-wrap:wrap;  gap:var(--y-gap) var(--x-gap);}
.flexList > .box{width:calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)); }
.flexList[layoutStyle="fullbox"] {--x-gap:0; --y-gap:10px; }
.flexList[layoutStyle="fullbox"] > .box{  width:calc(100% / var(--count)) }
/* boxCout */
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }

.sub .ygap3 {--y-gap:3rem;}
.sub .ygap5 {--y-gap:5rem;}
.sub .ygap7 {--y-gap:7rem;}
.sub .xgap3 {--x-gap:3rem;}
.sub .xgap7 {--x-gap:7rem;}
.sub .xgap9 {--x-gap:9rem;}
.sub .xgap13 {--x-gap:13rem;}

@media (max-width:1440px){
    .lg-direction{flex-direction: column;}
    .lg-w100{width:100%}
    .lg-w90{width:90%}
    .lg-w80{width:80%}
    .lg-order{order: 1}
    .lg-cont_box {margin-top: 4.68rem;}

    .lg-wrap3{--count:3}
    .lg-wrap2{--count:2}
    .lg-wrap1{--count:1}
}
@media (max-width:1240px){
    .md-direction{flex-direction: column;}
    .md-w100{width:100%}
    .md-w90{width:90%}
    .md-w80{width:80%}
    .md-order{order: 1}
    .md-cont_box {margin-top: 4.68rem;}

    .md-wrap3{--count:3}
    .md-wrap2{--count:2}
    .md-wrap1{--count:1}
}
@media (max-width:990px){
    .sm-direction{flex-direction: column;}
    .sm-w100{width:100%}
    .sm-w90{width:90%}
    .sm-w80{width:80%}
    .sm-order{order: 1}
    .sm-cont_box {margin-top: 4.68rem;}

    .sm-wrap3{--count:3}
    .sm-wrap2{--count:2}
    .sm-wrap1{--count:1}
}
@media (max-width:768px){
    .xs-direction{flex-direction: column;}
    .xs-w100{width:100%}
    .xs-w90{width:90%}
    .xs-w80{width:80%}
    .xs-order{order: 1}
    .lg-cont_box,.md-cont_box,.sm-cont_box,.xs-cont_box {margin-top: 3.5rem;}

    .xs-wrap3{--count:3}
    .xs-wrap2{--count:2}
    .xs-wrap1{--count:1}
}
@media (max-width:500px){
    .xxs-direction{flex-direction: column;}
    .xxs-w100{width:100%}
    .xxs-w90{width:90%}
    .xxs-w80{width:80%}
    .xxs-order{order: 1}
    .xxs-cont_box {margin-top: 3.5rem}

    .xxs-wrap2{--count:2}
    .xxs-wrap1{--count:1}
}



.sub .subTitle .Tit {position: relative; width: fit-content; letter-spacing: 2px; font-weight: 600;}
.sub .subTitle .Tit:after {content:''; position: absolute; width: 2rem; height: 2rem; border-radius: 50%; background-color: rgba(208,177,127,.3); left: -1rem; top:-.7rem;}

.sub .Line_wrap {display: flex; align-items: center; justify-content: space-between;}
.sub .Line_Tit {width: fit-content; padding: 0 1rem;white-space : nowrap;}
.sub .Line_width.sm {width: 30%; height: 2px; border-top:2px dashed}
.sub .Line_width {width: 40%; height: 2px; border-top:2px dashed}
.sub .Line_width.solid {width: 50%; border-top:2px solid; position: relative;}
.sub .Line_width.solid:after {content:''; width:8px; height: 8px; border-radius: 50%; background-color: #000; position: absolute; top:0; bottom:0; margin: auto;}
.sub .Line_width.solid.Left:after {right: 0;}
.sub .Line_width.solid.Right:after {left:0;}


.sub.other .zum {position: relative; padding-left: 1.3rem;}
.sub.other .zum:after {content:'•'; color:#d1b180; position: absolute; top:-0.1875rem; left: 0;}

@media (max-width: 1440px) {
    .section-right{width:90%;margin:auto; padding-right: 0}
    .section-left{width:90%;margin:auto; padding-left: 0}
}


/* therapy */
.sub .therapy .centerImg {position: relative; z-index: 1; top:20rem;}
.sub .therapy .leftImg {position: absolute; top:0; left: 0;}
.sub .therapy .zum {position: relative; padding-left: 2rem;}
.sub .therapy .zum:after {position:absolute; content:'•'; left: 0; top:0; color:#d1b180;}
.sub .therapy .Bg_Logo {position: absolute; bottom:-13rem; right:0;}
@media(max-width:1440px) {
    .sub .therapy .box.Img {order:2;}
    .sub .therapy .leftImg {position: relative;}
    .sub .therapy .centerImg {top:0;}
}



/* Various */
.sub .Various .flexList {padding: 0 3rem; --y-gap:3rem}
.sub .Various .box img {position: relative; z-index: 1; height: 30.9375rem;}
.sub .Various .Num {position: absolute; font-size: 10rem; color:#efedee; font-weight: 600; top:18%; bottom:0; right:0; margin: auto;}
.sub .Various .boxTit {border-radius: 2rem; background-color: #000; color:#fff; font-weight: 500; padding: .5rem 1rem; width: 15rem; margin: 3rem auto 0;}
.sub .Various .Desc {width: fit-content; margin:1.5rem auto 0;}
.sub .Various .LineImg {position: absolute; top:30.9rem; z-index: 3;}

@media(max-width:1440px) {
    .sub .Various .flexList {padding: 0;}
}
@media(max-width:768px) {
    .sub .Various .LineImg  {display: none;}
    .sub .Various .box img {border-bottom:2px solid rgba(0,0,0,.2)}
}


/* skill */
.sub .skill {position: relative; overflow: hidden; z-index: 1;}
.sub .skill:after {content:url('/img/sub/other/skillBg.jpg'); width: 100%; top:0; position: absolute; z-index: 0;}   
.sub .skill .smTit {text-align: center; font-size: 6.25rem; font-weight: 600; color:#e0caac; line-height: 1;}
.sub .skill .Tit {text-align: center; position: relative; margin-top: -3rem;}

.sub .skill .DescBox {max-height: 30rem; overflow: hidden;}
.sub .skill .box.Img {transform: translateY(-15%); position: relative;}
.sub .skill .box.Img:after {content:''; height: 50%; width: 1px; background-color: #b2b2b2; position: absolute; left: 0; top:10.625rem}
.sub .skill .Desc {padding: 4rem;}


.sub .skill .skillNum {width: 7.5rem; height: 7.5rem; background-color: #d1b180; line-height: 1; display: flex; align-items: center; justify-content: center; margin:3rem auto 2rem; color:#fff;}
.sub .skill .roundBox {border-radius: 2rem; width: 15rem; padding: .5rem 1rem; color:#fff; margin: auto; font-weight: 500;}
.sub .skill .roundBox.GR1 {background-color:#b3b3b3;}
.sub .skill .roundBox.GR2 {background-color:#666;}
.sub .skill .arrow {width: 100%; height: 1px; background-color:#acabac; margin: 3rem 0; position: relative;}
.sub .skill .arrow:after {content:''; width:1rem; height: 1rem; border-radius: 50%; background-color: #000; position: absolute; top:0; bottom:0; right:0; left:0; margin: auto;}
.sub .skill .arrow:before {content:url('/img/sub/other/arrow.png'); position: absolute; top:2px; bottom:0; right:0; margin: auto; height: fit-content;} 


.sub .skill .blackTit {background-color: #000; color:#fff; width: 100%; padding: .3rem .5rem; letter-spacing: -1px; text-align: center;}


.sub .skill .TitImgBox {padding: 0 1rem 5rem} 
.sub .skill .TitImgBox .Tit {background-color: #000; border-radius: 0 0 10px 10px; width: fit-content; padding: .3rem 2rem; color:#fff; margin: auto;}

.sub .skill .TitImgBox.border {border:.625rem solid #000;} 

.sub .skill .LineBox {width: 100%; height: 1px; background-color:#acabac; margin: 2rem auto; position: relative;}
.sub .skill .LineBox .one {width: 16px; height: 16px; border-radius: 50%; background-color: #d1b180; position: absolute; right:0; left:0; top:0; bottom:0; margin: auto;}
.sub .skill .tattoo_pass {width: 20.875rem; padding: 0 .5rem;}

@media(max-width:1240px) {
    .sub .skill .DescBox {max-height: 100%;}
    .sub .skill .box.Img {transform: translateY(0);}
    .sub .skill .box.Img img {width: 19.6875rem;}
    .sub .skill .box.Img:after {display: none;}
}
@media(max-width:500px) {
    .sub .skill .smTit {font-size: 5.25rem;}
}

.sub.other .youtubeBox { position:relative; height:0; padding-bottom:56.25%;}



/* some */
.sub .some .checkImg {width: 2.75rem;}
.sub .some ul {max-width: 37.5rem; width: 100%; margin-top: 3.125rem;}
.sub .some ul li {background-color: #fff; border-radius: 10px; padding: 1.5rem 2.5rem; display: flex; align-items: center;} 
.sub .some ul li + li {margin-top: 1rem;}
@media(max-width:500px) {
    .sub .some ul {width: 95%;}
    .sub .some ul li {padding:1.3rem}
}




/* markVu */
.sub .markVu .RoundBox {border-radius: 6.25rem; background-color: #d1b180; padding: 3.5rem 1rem; font-weight: 500;}
.sub .markVu .TitBox {position: relative; padding-top: 9.5rem;}
.sub .markVu .TitBox p {position: relative; z-index: 1;}
.sub .markVu .Round_Logo {position: absolute; right: 0; left:0; top:0; margin: auto; width: 53.9375rem;}

@media(max-width:768px) {
    .sub .markVu .RoundBox {padding: 1rem; border-radius: 2.5rem;}
}


.sub .markVu_point .Tit {background-color: #000; padding: .5rem 2rem; color:#fff; font-weight: 500;}
.sub .markVu_point ul li {border:1px solid #cac9ca;}
.sub .markVu_point ul li + li {margin-top: 1rem;}


/* program */
.sub .program .pointBox {background-color:#efe7de; border-top:2px solid #d1b180; padding: 2rem 2.5rem;}
@media(max-width:990px) {
    .sub .program .box.Img {order:2;} 
}



/* tattooCare */
.sub .tattooCare .tattooCareLine {width: 100%; height: 1px; background-color: #000; margin: 1.5rem 0;}
.sub .tattooCare .orTxt {position: absolute; color:#d1b180; font-weight: 600; right:0; left:0; top:8.5rem; bottom:0; margin: auto; width: fit-content;}
@media(max-width:768px) {
    .sub .tattooCare .orTxt {position: relative; top:0;}
}



/* tattooProgram */
.sub .tattooProgram:after {content:''; position: absolute; width: 100%; height: 30%; background-color:#2b2b2b; bottom:0;}
.sub .tattooProgram .SlideBox {display: flex;}

.sub .tattooProSwiper .swiper-pagination {display: flex; flex-direction:column; bottom:0; left: auto; right:1rem; width:fit-content; height: fit-content; top:0; bottom:0; margin: auto;}
.sub .tattooProSwiper .swiper-pagination-bullet {width: .9375rem; height: .9375rem; background-color: #fff; opacity: 1; margin: .3rem;}
.sub .tattooProSwiper .swiper-pagination-bullet-active {background-color: #d1b180;}
.sub .tattooProSwiper .swiper-wrapper {max-height: 30rem; height: 100%; margin: 0 auto;  object-fit: cover;}

.sub .tattooTxtSwiper {padding: 3rem; background-color: #fff; margin-top: -5rem; height: fit-content;}
.sub .tattooTxtSwiper .Line {width: 100%; height: 1px; background-color:#777; margin: 2rem auto;}
@media(max-width:1240px) {
    .sub .tattooProgram .SlideBox {flex-wrap: wrap;}
    .sub .tattooProgram .SlideBox .swiper {width: 100%;}
    .sub .tattooProSwiper .swiper-wrapper {max-height: 40rem;}
}
@media(max-width:700px) {
    .sub .tattooProSwiper .swiper-wrapper {max-height: 30rem;}
}
@media(max-width:500px) {
    .sub .tattooProSwiper .swiper-wrapper {max-height: 22.5rem;}
}