@media(max-width:680px) {
    .sub .font-60 {font-size: 4rem;}
}

.sub .tit p.point-font {letter-spacing: 0.25px}

.sub #desc .tit .line {width: 1.5rem; height: 1px; background: var(--pointcolor); margin: 1.25rem auto;}

@media(max-width:380px) {
    .sub #desc .tit br {display: none !important;}
    .sub #desc .tit p br.no {display: block !important;}
}

/* about */
.sub #about .wrap.flex {gap: 1.5rem;}
.sub #about .box:nth-child(1) {display: flex; flex-direction: column; justify-content: space-between;}
.sub #about .box:nth-child(1) img {float: right; width: 28.5rem;}
.sub #about .bg_txt {font-size: 9.375rem; font-weight: 900; color: var(--pointcolor); opacity: 0.1; position: absolute; left: 0; top: 20rem; text-transform: uppercase;}

/* bg_txt용 */
[data-aos="blur-scale"] {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.6);
    transition-property: filter, opacity, transform !important;
}
[data-aos="blur-scale"].aos-animate {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

@media (max-width:1550px) {
    .sub #about .bg_txt {top: 18rem;}
}

@media(max-width:1240px) {
    .sub #about .box:nth-child(1) img  {width: 20rem;}
    .sub #about .box:nth-child(1) h3 {margin-top: 1.5rem;}
    .sub #about .bg_txt {top: 14rem;}
}

@media(max-width:1024px) {
    .sub #about .bg_txt {top: 16rem;}
}

@media(max-width:990px) {
    .sub #about .wrap.flex {flex-direction: column; gap: 3.5rem;}
    .sub #about .box {width: 100%;}
    .sub #about .box:nth-child(2) .flex {align-items: flex-start; gap: 1.5rem;}
    .sub #about .box:nth-child(2) img:nth-child(1) {width: 40%;} 
    .sub #about .box:nth-child(2) img:nth-child(2) {width: calc(60% - 1.5rem);} 
    /* .sub #about .bg_txt {top: auto; bottom: 0;} */
    .sub #about .bg_txt {top: auto; bottom: 0; left: 5%; z-index: 1; opacity: 1;}
}

@media(max-width:680px) {
    .sub #about .bg_txt {font-size: 6.25rem;}
}

@media(max-width:360px) {
    .sub #about .bg_txt {font-size: 5rem;}
}

/* only */
.sub #only li {padding: 2rem 8rem; background-position: inherit; background-size: cover; margin-top: 1.5rem; transition: 0.45s;}
.sub #only li.on {padding: 6.25rem 8rem;}

.sub #only li p {opacity: 0; transform: translateX(-10%); transition: 1s; transition-delay: 0.45s;}
.sub #only li.on p {opacity: 1; transform: translateX(0);}
.sub #only li:not(.on) p {transition: none;}

/* 배경 */
.sub #only li:nth-child(1) {background-image: url("/img/sub/about/only_bg01.jpg");}
.sub #only li:nth-child(2) {background-image: url("/img/sub/about/only_bg02.jpg");}
.sub #only li:nth-child(3) {background-image: url("/img/sub/about/only_bg03.jpg");}
.sub #only li:nth-child(4) {background-image: url("/img/sub/about/only_bg04.jpg");}

@media(max-width:990px) {
    .sub #only li {padding: 6.25rem 2rem; flex-direction: column; justify-content: center; text-align: center; align-items: center;}
    .sub #only li.on {padding: 6.25rem 2rem;}
    .sub #only li p {order: 2; opacity: 1; margin-top: 1.5rem; transition: none; transform: none;}
}

@media(max-width:360px) {
    .sub #only li p br {display: none !important;}
}

/* 인테리어 */
.sub #interior {background: #eaeaea;}
.sub #interior .swiper-slide {height: 548px; width: auto;}
.sub #interior .pg-wrap {display: flex; position: absolute; bottom: -1rem; right: 0;}
.sub #interior .pg-wrap div {display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; background: var(--pointcolor); box-shadow: inset 10px 0 10px rgba(33,22,12,0.13);}
.sub #interior .pg-wrap div:after {display: none;}

@media(max-width:990px) {
    .sub #interior .swiper-slide {height: 500px;}
    .sub #interior .pg-wrap div {width: 4.5rem; height: 4.5rem;}
}

@media(max-width:500px) {
    .sub #interior .swiper-slide {height: 350px;}
    .sub #interior .pg-wrap {position: relative; margin-top: 1.5rem; justify-content: flex-end;}
}

/* infor */
.sub #infor.time .box {border: 1px solid var(--linecolor); padding: 4.5rem;}

.sub #infor.lc .box {padding-left: 4.5rem;}
.sub #infor.lc .visible-mo {display: none;}
.sub #infor.lc .hidden-mo {display: block;}

.sub #infor .map {width: 100%;}
.sub #infor .map > div {height: 600px;}

.sub #infor .nav {gap: 1.5rem;}

/* infor a 공통 */
.sub #infor a[cursor-class="hover"] {border: 1px solid #000; padding: 0.8rem; position: relative; transition: 0.45s; width: 11rem; text-align: center;}
.sub #infor a[cursor-class="hover"]:after {position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--pointcolor); content: ""; transition: 0.45s; z-index: -1;}
.sub #infor a[cursor-class="hover"]:hover {color: #fff;}
.sub #infor a[cursor-class="hover"]:hover:after {width: 100%;} 

.sub #infor .line {width: 100%; height: 1px; background: var(--linecolor);}

@media(max-width:1440px) {
    .sub #infor.lc .box {padding-left: 3rem;}
}

@media(max-width:1240px) {
    .sub #infor.time .box {padding: 4rem 3rem;} 
}

@media(max-width:990px) {
    .sub #infor.time .box {display: block;}
    .sub #infor.time .box ul {margin-left: 0; margin-top: 1rem;}
}

@media(max-width:768px) {
    .sub #infor .font-24 {font-size: 1.8rem;}
    .sub #infor a {width: 14rem;}
    .sub #infor .map > div {height: 350px;}

    .sub #infor .cont .item {flex-direction: column; gap: 1.5rem;}
    .sub #infor .cont .box {width: 100%; padding: 0 3rem;}
}

@media(max-width:440px) {
    .sub #infor.lc p br.visible-xs {display: none !important;}
}

@media(max-width:350px) {
    .sub #infor.lc p br.hidden-mo {display: none !important;}
}

/* intro */
.sub #intro {overflow: hidden;}
.sub #intro .flex-between {gap: 1.5rem;}
.sub #intro .cont:after {position: absolute; left: -100%; top: 0; transform: translateY(-50%); height: 1px; width: 0; background: var(--linecolor); z-index: -1; content: ""; transition: 5s;}
.sub #intro .cont:not(.aos-animate):after {transition: none;}
.sub #intro .cont.aos-animate:after {width: 220%;}
.sub #intro h3 {gap: 0.5rem;}
.sub #intro .box.img {position: relative; z-index: 1;}

.sub #intro ul {column-gap: 1.5rem; row-gap: 1rem; flex-wrap: wrap;}
.sub #intro ul li {background: rgba(88,53,145,0.06); line-height: inherit; padding: 0.5rem 2rem;}

.sub #intro .flexList {--x-gap: 4.5rem}
.sub #intro .flexList .box {box-shadow: 5px 5px 24px rgba(0,0,0,0.03); padding: 1rem;}

.sub #intro img.check {width: 1.4375rem;}

.sub #intro .visible-mo {display: none;}

@media(max-width:1240px) {
    .sub #intro .box.txt,
    .sub #intro .box.img {width: 50%;}
    .sub #intro .box.txt {margin-top: 4.5rem;}
    .sub #intro .box.txt.width40 {padding-left: 3rem;}
}

@media(max-width:990px) {
    .sub #intro .box.txt {margin-top: 3.5rem;}
}

@media(max-width:768px) {
    .sub #intro .container {width: 85%;}
    .sub #intro .flex-between {flex-direction: column; gap: 3.5rem;}
    .sub #intro .box.txt,
    .sub #intro .box.img {width: 100%;}
    .sub #intro .box.txt {order: 2; margin-top: 0; padding-left: 0 !important;}
    .sub #intro .box.txt p.mt-10 {margin-top: 1rem;}
    .sub #intro .box.img img {width: 100%;}
    .sub #intro .flexList {--x-gap: 2.5rem}

    .sub #intro p br.hidden-sm {display: block !important;}
}

@media(max-width: 550px) {
    .sub #intro p br.hidden-sm {display: none !important;}
}

@media(max-width:500px) {
    .sub #intro h3 {flex-direction: column; align-items: flex-start; gap: 0;}
}

@media(max-width:480px) {
    .sub #intro.radiesse .box.txt p br {display: none !important;}
}

@media(max-width:390px) {
    .sub #intro .font-30 {font-size: 2.25rem;}
    .sub #intro .box.txt p br {display: none !important;}
    .sub #intro .visible-mo {display: block;}

}

/* 의료진소개 */
.sub #philosophy .flexList {--x-gap:0rem; --y-gap:0rem;}
.sub #philosophy .box {background: #eaeaea;}
.sub #philosophy .imgbox img {animation: rotate 8s linear infinite; width: 7.5rem;}
.sub #philosophy .imgbox .line {position: absolute; left: 50%; top: 50%; transform: translateX(-50%); height: 0; width: 1px; background: var(--pointcolor); opacity: 0.3; transition: 1s;}
.sub #philosophy .imgbox .line.aos-animate {height: 6rem;}

@keyframes rotate {
    0% {
		transform: rotate(0deg);
	}
    100% {
		transform: rotate(360deg);
	}
}

@media(max-width:990px) {
    .sub #philosophy .box.txt {padding:20% 5%;}
}

.sub #doctor .flexList {--x-gap:0rem; --y-gap:0rem;}
.sub #doctor .box {background: linear-gradient(52deg, #e9ebf7, #cccfdb); background-repeat: no-repeat; background-size: cover; background-position: center bottom; aspect-ratio: 1/ 1.5; position: relative;}
.sub #doctor .box .txt {position: absolute; left: 50%; top: 7%; transform: translateX(-50%); width: 100%;}
/* 배경 */
.sub #doctor .box:nth-child(2) {background-image: url("/img/sub/about/doc01.jpg");}
.sub #doctor .box:nth-child(1) {background-image: url("/img/sub/about/doc02.jpg");}
.sub #doctor .box:nth-child(3) {background-image: url("/img/sub/about/doc03.jpg");}

@media(max-width:768px) {
    .sub #doctor .box .txt {top: 5%;}
    .sub #doctor .box .font-30 {font-size: 1.875rem;}
    .sub #doctor .box .font-20 {font-size: 1.250rem;}
}

@media(max-width:580px) {
    .sub #doctor .flexList {--count: 1;}
    .sub #doctor .box .txt {top: 7%;}
    .sub #doctor .box .font-30 {font-size: 2.625rem;}
    .sub #doctor .box .font-20 {font-size: 1.75rem;}
}

@media(max-width:360px) {
    .sub #doctor .box .txt {top: 6%;}
}

/* 장비 */
.sub #equipment .flexList {--y-gap: 5rem;}
.sub #equipment .imgbox h3 {position: absolute; left: 1.5rem; top: 1.5rem; background: #fff; padding: 0.25rem 2rem; border-radius: 100px; z-index: 1; line-height: inherit;}


/* #description */
.sub #description .container {max-width: 1190px;}
.sub #description .cont_box {margin-top: 5rem;}
.sub #description .flexList {--x-gap: 60px; position: relative;}
.sub #description .flexList:after {position: absolute; left: 50%; top: 15%; transform: translateX(-50%); width: 45px; height: 45px; border: 1px solid #000; border-radius: 50%; content: url("/img/sub/plus.png"); line-height: 43px;}
.sub #description .box > div {border-bottom: 1px solid #000; padding: 1.5rem 0;}
.sub #description .box .cont-tit {border-bottom: none;}
/* 문구 배경 색상 */
.sub #description .box.ulthera .cont-tit {background: #ffc13e;}
.sub #description .box.thermage .cont-tit {background: #9b3d95;}
.sub #description .box.tuneface .cont-tit  {background: #854399;}
.sub #description .box.titanium .cont-tit  {background: #251619;}
.sub #description .box.juvelook .cont-tit  {background: #0054a7;}
.sub #description .box.rejuran .cont-tit  {background: #00bbb4;}
.sub #description.tuneliner .box.tuneliner .cont-tit  {background: #7e5790;}
.sub #description.tuneliner .box.tuneface .cont-tit  {background: #8cafcb;}

.sub #description .box .cont-desc {column-gap: 1.5rem; font-weight: 700;}
.sub #description .box .cont-desc p {background: #000; width: fit-content; padding: 0.5rem 1.5rem; border-radius: 100px;}

.sub #description .box.ulthera div span {color: #ffc13e;}
.sub #description .box.thermage div span {color: #9b3d95;}


@media(max-width:1580px) {
    .sub #description .flexList:after {line-height: 47px;}
}

@media(max-width:990px) {
    .sub #description .flexList {--x-gap:50px}
    .sub #description .flexList:after {width: 40px; height: 40px; line-height: 42px;}
}

@media(max-width:768px) {
    .sub #description .cont_box {overflow-x: scroll;}
    .sub #description .flexList {width: 800px; padding-bottom: 4rem;}
    .sub #description .flexList:after {left: 52%;}
    .sub #description .cont-desc {flex-wrap: wrap; width: 70%; margin: auto; row-gap: 1rem;}
    .sub #description.tuneliner .cont-desc {width: 100%;}
    .sub #description ::-webkit-scrollbar {height: 3px;}
}

@media(max-width:580px) {
    .sub #description .tit br {display: none;}
}

/* @media(max-width:380px) {
    .sub #description .box div br {display: none;}
} */

/* synergy */
.sub #synergy .flexList {max-width: 1190px; margin: 5rem auto 0;}
.sub #synergy .imgbox img {box-shadow: 5px 5px 24px rgba(0,0,0,0.03); width: auto;}
.sub #synergy .flexList {--y-gap: 3rem;}
.sub #synergy .box {border: 1px solid var(--pointcolor); padding: 2.5rem 0.5rem 1rem;}
.sub #synergy .box h3 {position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); padding: 0.5rem; border-radius: 100px;}

.sub #synergy.ulthermage .box:nth-child(3),
.sub #synergy.ulthermage .box:nth-child(4) {padding: 2.5rem 0.5rem 2rem;}
.sub #synergy.ulthermage .box h3{width: 14rem;}
.sub #synergy.tunetanium .box h3{width: 18rem;}
.sub #synergy .imgbox > .flex-center {gap: 1.5rem;}
.sub #synergy.rejuvelook .box h3{width: 18rem;}
.sub #synergy.oligio .box h3{width: 12rem;}
.sub #synergy.belotero .box h3{width: 14rem;}
.sub #synergy.juvelook .box h3{width: 14rem;}
.sub #synergy.olidia .box h3{width: 22rem;}
.sub #synergy.volnewmer .box h3 {width: 16rem;}
.sub #synergy.coolfase .box h3 {width: 16rem;}
.sub #synergy.tuneliner .box h3 {width: 18rem;}
.sub #synergy.virtueRF .box h3 {width: 16rem;}
.sub #synergy.xeomin .box h3 {width: 15rem;}
.sub #synergy.shurink .box h3 {width: 15rem;}
.sub #synergy.inmode .box h3 {width: 16rem;}
.sub #synergy.liftera2 .box h3 {width: 17rem;}
.sub #synergy.density .box h3 {width: 17rem;}
.sub #synergy.lilied .box h3 {width: 17rem;}
.sub #synergy.excelV .box h3 {width: 10rem;}
.sub #synergy.acne .box h3 {width: 13rem;}
.sub #synergy.waxing .box h3 {width: 16rem;}
.sub #synergy.pigment .box h3 {width: 12rem;}
.sub #synergy.intense .box h3 {width: 12rem;}
.sub #synergy.IBPS .box h3 {width: 12rem;}
.sub #synergy.tunebody .box h3 {width: 12rem;}
.sub #synergy.ulfit .box h3 {width: 12rem;}
.sub #synergy.revive .box h3 {width: 16rem;}

@media(max-width:1550px) {
    .sub #synergy.oligio .img-flex img {width: 50%;}
    .sub #synergy.shurink .img-flex img {width: 50%;}
    .sub #synergy.radiesse .img-flex img {width: 50%;}
    .sub #synergy.acne .img-flex img {width: 50%;}
}

@media(max-width:990px) {
    .sub #synergy .img-flex img {width: 50%;}
}

@media(max-width:768px) {
    .sub #synergy .imgbox .flex-center {flex-wrap: wrap;}
    .sub #synergy .img-flex img {width: auto !important;}

    .sub #synergy .box {padding: 3.5rem 0.5rem 1rem;}
    .sub #synergy.ulthermage .box:nth-child(3),
    .sub #synergy.ulthermage .box:nth-child(4) {padding: 3.5rem 0.5rem 2rem;}
    .sub #synergy.tunebody .imgbox {overflow-x: scroll; padding-bottom: 4rem;}
    .sub #synergy.tunebody .imgbox img {width: 1000px !important;   max-width: fit-content;}
    .sub #synergy ::-webkit-scrollbar {height: 3px;}
    
    .sub #synergy .box h3 {padding: 1rem; top: -2rem;}
    .sub #synergy.ulthermage .box h3 {width: 20rem;}
    .sub #synergy.tunetanium .box h3 {width: 22rem;}
    .sub #synergy.rejuvelook .box h3 {width: 22rem;}
    .sub #synergy.oligio .box h3{width: 18rem;}
    .sub #synergy.belotero .box h3{width: 20rem;}
    .sub #synergy.juvelook .box h3{width: 20rem;}
    .sub #synergy.olidia .box h3{width: 28rem;}
    .sub #synergy.volnewmer .box h3{width: 22rem;}
    .sub #synergy.coolfase .box h3{width: 22rem;}
    .sub #synergy.tuneliner .box h3 {width: 26rem;}
    .sub #synergy.virtueRF .box h3 {width: 22rem;}
    .sub #synergy.xeomin .box h3 {width: 22rem;}
    .sub #synergy.shurink .box h3 {width: 22rem;}
    .sub #synergy.inmode .box h3 {width: 22rem;}
    .sub #synergy.liftera2 .box h3 {width: 22rem;}
    .sub #synergy.density .box h3 {width: 24rem;}
    .sub #synergy.lilied .box h3 {width: 24rem;}
    .sub #synergy.excelV .box h3 {width: 15rem;}
    .sub #synergy.acne .box h3 {width: 20rem;}
    .sub #synergy.waxing .box h3 {width: 22rem;}
    .sub #synergy.pigment .box h3 {width: 18rem;}
    .sub #synergy.intense .box h3 {width: 18rem;}
    .sub #synergy.IBPS .box h3 {width: 18rem;}
    .sub #synergy.tunebody .box h3 {width: 18rem;}
    .sub #synergy.ulfit .box h3 {width: 18rem;}
    .sub #synergy.revive .box h3 {width: 22rem;}

}

@media(max-width:580px) {
    .sub #synergy .box {padding: 3.5rem 2rem 1rem;}
    .sub #synergy .box br {display: none;}
}


@media(max-width:400px) {
    .sub #synergy.xeomin .tit p br {display: none !important;}
    .sub #synergy.radiesse p br {display: none !important;}
}

@media(max-width:360px) {
    .sub #synergy.inmode .tit p br {display: none !important;}
}


/* period */
.sub #period {background: #eaeaea;}
.sub #period p.font-16 {color: #6d6c6f;}

@media(max-width:768px) {
    .sub #period .imgbox {overflow-x: scroll;}
    .sub #period .imgbox img {width: 1300px !important; max-width: fit-content !important; padding-bottom: 3.5rem;}
    .sub #period ::-webkit-scrollbar {height: 3px;}

    .sub #period.waxing .imgbox {overflow-x: hidden;}
    .sub #period.waxing .imgbox img {width: 100% !important; max-width: fit-content !important; padding-bottom: 0;}
}

@media(max-width:380px) {
    .sub #period .cont_box p br {display: none !important;}
}

/* period */
.sub #period.filler {background: transparent;}
.sub #period .cont > .flex-center {gap: 1.5rem;}
.sub #period .cont .box:nth-child(1) {padding: 5rem;}
.sub #period .cont .box:nth-child(2) {padding: 7rem 5rem; background: #f36b30;}

@media(max-width:990px) {
    .sub #period .cont .box:nth-child(1) {padding: 5rem 7rem;}
    .sub #period .cont .box:nth-child(2) {padding: 7rem;}
    .sub #period .cont .box .icon {transform: scale(0.8);}
}

@media(max-width:768px) {
    .sub #period .cont {overflow-x: scroll; padding-bottom: 3.5rem;}
    .sub #period .cont > .flex-center {width: 800px;}
    .sub #period .cont .box:nth-child(1) {padding: 5rem;}
    .sub #period .cont .box:nth-child(2) {padding: 7rem 5rem;}
    /* .sub #period .cont > .flex-center {flex-direction: column;}
    .sub #period .cont .box {padding: 7rem 3rem !important; width: 42rem;} */
}

/* @media(max-width:500px) {
    .sub #period .cont .box {width: 100%;}
} */

/* point */
.sub #point .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sub #point .bg_wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh;  background-repeat: no-repeat; background-position: center; background-size: cover; transform: translateZ(0); will-change: transform; z-index: -1;}
.sub #point p.en {text-transform: uppercase; letter-spacing: 5px;}
.sub #point h2 span {color: #e4d3ff;}
.sub #point .visible-mo {display: none;} 

/* 배경 */
.sub #point.signature .bg_wrap .bg  {background-image: url("/img/sub/signature/point_bg.jpg");}
.sub #point.lifting .bg_wrap .bg  {background-image: url("/img/sub/lifting/point_bg.jpg");}
.sub #point.filler .bg_wrap .bg  {background-image: url("/img/sub/filler/point_bg.jpg");}
.sub #point.botox .bg_wrap .bg  {background-image: url("/img/sub/botox/point_bg.jpg");}
.sub #point.laser .bg_wrap .bg  {background-image: url("/img/sub/laser/point_bg.jpg");}
.sub #point.skin .bg_wrap .bg  {background-image: url("/img/sub/skin/point_bg.jpg");}

@media(max-width:768px) {
    .sub #point .txt {padding-bottom: 3.5rem;}
    .sub #point .txt p.mt-20 {margin-top: 2rem;}
}

@media(max-width:380px) {
    .sub #point .txt p br {display: none !important;}
    .sub #point .visible-mo {display: block;} 

}

/* authentication */
.sub #authentication .btn-wrap {gap: 1.5rem;}
.sub #authentication .btn-wrap a {border: 1px solid #000; padding: 0.8rem; width: 17.5rem; position: relative; transition: 0.3s;}
.sub #authentication .btn-wrap a:hover {color: #fff;}
.sub #authentication .btn-wrap a:after {position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--pointcolor); content: ""; transition: 0.45s; z-index: -1;}
.sub #authentication .btn-wrap a:hover:after {width: 100%;}
.sub #authentication .btn-wrap a:nth-child(2) img {transition: 0.3s;}
.sub #authentication .btn-wrap a:nth-child(2):hover img {-webkit-filter: brightness(0) invert(1); ; filter: brightness(0) invert(1); ;}

.sub #authentication.shurink .btn-wrap a {width: 22rem;}
.sub #authentication.ulthermage .btn-wrap a {width: 22rem;}

@media(max-width:990px) {
    .sub #authentication .flexList {--y-gap: 3.5rem;}
    .sub #authentication .box.text {order: -1; display: block; width: 90%; margin: auto;}
}

@media(max-width:768px) {
    .sub #authentication .btn-wrap {flex-direction: column; gap: 2.5rem;}
    .sub #authentication .btn-wrap a {width: 25rem;}
    .sub #authentication.shurink .btn-wrap a {width: 30rem;}
    .sub #authentication.ulthermage .btn-wrap a {width: 30rem;}
}

@media(max-width:360px) {
    .sub #authentication .btn-wrap a {width: 100% !important;}
}

/* caution */
.sub #caution .box-wrap {gap: 1.5rem;}
.sub #caution .box.txt > div {padding: 2rem 0 1rem; border-bottom: 1px solid #000;}

@media(max-width:990px) {
    .sub #caution .tit {width: 90%; margin: auto;}
    .sub #caution .box-wrap {flex-direction: column;}
    .sub #caution .box-wrap .txt {width: 100%;}
    .sub #caution .box.txt > div {padding: 2rem 5% 1rem;}
}

/* special */
.sub #special .flexList {--y-gap: 3.5rem;}
.sub #special .tit h2 span {display: inline-flex;}
.sub #special .line {width: 100%; height: 1px; background: #000;}

@media(max-width:768px) {
    .sub #special .container {width: 80%;}
    .sub #special .box h3 {margin-top: 2rem;}
    .sub #special .box .line {margin: 2.25rem 0;}
}

@media(max-width:480px) {
    .sub #special .tit h2 span {display: inline;}
    .sub #special .tit h2 span img {margin: 0.5rem auto;}
}

@media(max-width:400px) {
    .sub #special .box p br {display: none !important;}
}

/* common */
.sub #common .bg_txt {position: absolute; left: 0; top: 400px; z-index: -1; font-size: 9.375rem; color: var(--gray); font-weight: 900; opacity: 0.25; text-transform: uppercase; line-height: 1;}
.sub #common .flexList {--y-gap: 3.5rem; justify-content: center;}
.sub #common .imgbox h3 {position: absolute; left: 50%; transform: translateX(-50%); bottom: 2.5rem; z-index: 1; width: 100%;}
.sub #common .imgbox h3 img {-webkit-filter: brightness(0) invert(1); ; filter: brightness(0) invert(1);}

.sub #common.skin .cont_box {margin: 7.5rem auto 0; max-width: 990px;}
.sub #common.botox .cont_box {margin: 7.5rem auto 0; max-width: 990px;}

@media(max-width:1550px) {
    .sub #common .bg_txt {top: 300px;}
}

@media(max-width:1024px) {
    .sub #common .bg_txt {top: 260px;}
}


@media(max-width:990px) {
    .sub #common .box {margin-top: 0;}
    .sub #common .bg_txt {top: 230px;}
}

@media(max-width:768px) {
    .sub #common .bg_txt {font-size: 5.75rem; top: 220px;} 
    .sub #common.filler .bg_txt {top: 270px;}
    .sub #common .font-30 {font-size: 1.75rem;}
    .sub #common h3 img {transform: scale(0.8);}
}

@media(max-width:500px) {
    .sub #common.filler .bg_txt {top: 320px;}
}

/* type */
.sub #type .box .line {width: 100%; height: 1px; background: var(--pointcolor);}
.sub #type .flexList {--y-gap : 3.5rem; }
.sub #type.excelV .flexList {max-width: 1000px; margin: 5rem auto 0;}
.sub #type.acne .flexList {max-width: 1100px; margin: 5rem auto 0; --x-gap : 2rem; }
.sub #type.potenza .flexList.img {max-width: 1100px; margin: 5rem auto 0; --x-gap : 2rem; }

.sub #type.potenza h3 {width: 18rem; margin: auto; padding: 0.5rem 2rem; border-radius: 100px;}

@media(max-width:768px) {
    .sub #type.potenza h3 {width: 24rem;}
}

@media(max-width:380px) {
    .sub #type.acne .box br {display: none !important;}
}

/* type2 */
.sub #type2 .flexList {padding-left: 10rem;}
.sub #type2 .box {background: rgba(196,196,196,0.2);}
.sub #type2 .imgbox {background: #f8f8f8;}
.sub #type2 .imgbox img {width: 11.4375rem;}
.sub #type2 h3 {padding: 0.5rem; position: relative;}
.sub #type2 p {padding: 1rem; position: relative;}

.sub #type2 .box:nth-child(1) p:after {position: absolute; left: -10rem; top: 1rem; color: var(--pointcolor); text-align: left; border-bottom: 1px solid var(--pointcolor); width: 8.5rem;}
.sub #type2 .box:nth-child(1) p.desc01:after {content: "발생 시기";}
.sub #type2 .box:nth-child(1) p.desc02:after {content: "특징";}

@media(max-width:1240px) {
    .sub #type2 .box p br {display: none !important;}
}

@media(max-width:768px) {
    .sub #type2 .cont_box {overflow-x: scroll;}
    .sub #type2 .flexList {width: 1000px; padding-bottom: 4rem;}
    .sub #type2 .imgbox img {width: 15rem;}
    .sub #type2 ::-webkit-scrollbar {height: 3px;}
}

/* comparison */
.sub #comparison table {max-width: 1190px; margin: auto; width: 100%; border-collapse: collapse;}
.sub #comparison table th,
.sub #comparison table td {padding: 1rem;}
.sub #comparison table th:nth-child(odd) {width: 37%;}
.sub #comparison table td:nth-child(odd) {background: rgba(196,196,196,0.2);}
.sub #comparison table th:first-child {background: var(--pointcolor);}
.sub #comparison table th:last-child {background: #c4c4c4;}
.sub #comparison table td:first-child {color: var(--pointcolor);}
.sub #comparison table .img td {background: transparent; padding: 0;}

@media(max-width:990px) {
    .sub #comparison table th:nth-child(odd) {width: 40%;}
}

@media(max-width:768px) {
    .sub #comparison .table-wrap {overflow-x: scroll; padding-bottom: 4rem;}
    .sub #comparison table {width: 900px;}
    .sub #comparison ::-webkit-scrollbar {height: 3px;}
}

/* box */
.sub #box .flexList {--y-gap : 3.5rem; }
.sub #box.two .flexList {max-width: 950px; margin: 5rem auto 0;}
.sub #box .box {border: 1px solid var(--pointcolor); padding: 4.5rem 1rem;}
.sub #box .imgbox img {width: 19rem;}

@media(max-width:990px) {
    .sub #box.potenza .hidden-md {display: block !important;}
}

@media(max-width:350px) {
    .sub #box p br {display: none !important;}
    .sub #box.potenza .hidden-md {display: none !important;}
}

/* reason */
.sub #reason .flexList {--y-gap : 3.5rem; max-width: 1190px; margin: 5rem auto 0;}
.sub #reason .imgbox img {box-shadow: 5px 5px 24px rgba(0,0,0,0.03); }
.sub #reason h3 {width: fit-content; margin: auto; padding: 0.5rem 2rem; border-radius: 100px;}


/* principle */
.sub #principle .flexList {--y-gap : 3.5rem}
.sub #principle .imgbox img {box-shadow: 5px 5px 24px rgba(0,0,0,0.03); }

@media(max-width:768px) {
    .sub #principle p br {display: none !important;}
}

/* procedure */
.sub #procedure .flexList {--y-gap : 3.5rem;}
.sub #procedure .num {width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--pointcolor); margin: auto; color: var(--pointcolor); line-height: 3rem; position: relative;}
.sub #procedure .num.line:after {position: absolute; left: 4.5rem; top: 50%; transform: translateY(-50%); content: ""; width: 26rem; background: url("/img/sub/line.png"); height: 2px;} 
.sub #procedure .num.line::before {position: absolute; right: 4.5rem; top: 50%; transform: translateY(-50%); content: ""; width: 26rem; background: url("/img/sub/line.png"); height: 2px;} 

@media(max-width:1580px) {
    .sub #procedure .num.line:after,
    .sub #procedure .num.line:before {display: none;}
}

@media(max-width:768px) {
    .sub #procedure .num {width: 5rem; height: 5rem; line-height: 5rem;}
}

/* progress */
.sub #progress .flex {gap: 1.5rem;}
.sub #progress .box h3 {width: 100%; padding: 1rem;}
.sub #progress .box.box1 h3 {background: #1c1c1c; color: #fff;}
.sub #progress .box.box2 h3 {background: #c4c4c4;}
.sub #progress .box.box3 h3 {background: var(--pointcolor); color: #fff;}

.sub #progress .box img {width: 21.875rem; height: 18.75rem;}

@media(max-width:990px) {
    .sub #progress .cont_wrap > .flex {flex-wrap: wrap; row-gap: 3.5rem;}
    .sub #progress .box.box1 {width: calc(50% - 0.75rem);}
    .sub #progress .box.box2 {width: calc(50% - 0.75rem);}
    .sub #progress .box.box3 {width: 100%;}
    .sub #progress .box.box3 .imgbox {width: calc(50% - 0.75rem);}
    .sub #progress .box img { width:100%; height: auto;}
}

@media(max-width:500px) {
    .sub #progress .box h3 {font-size: 2rem;}
}