.sub .flexList {--y-gap: 4.5rem}

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

/*---- 스페셜---- */
.sub #happydoctor {background: url("/img/sub/happydoctor/happydoctor_bg.jpg"); background-position: center; background-size: cover;}
.sub #happydoctor .line {height: 7.5rem; width: 2px; background: linear-gradient(var(--pointcolor) 5%, transparent 80% ); margin: 3rem auto 0rem;}

.sub #service .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sub #service .bg_wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center top; background-size: cover; transform: translateZ(0); will-change: transform; background-image: url("/img/sub/happydoctor/service_bg.jpg"); }

.sub #service .wrap {max-width: 1720px; margin: auto;}
.sub #service h2 span {color: #ffefd6;}

.sub #service .cont_wrap ul {position:relative; display:flex; justify-content:center; align-items:center; width:100%}
.sub #service .cont_wrap ul li {position:relative; width:44rem; border-radius:50%;}
.sub #service .cont_wrap ul li:first-child{z-index:1; right:-5rem}
.sub #service .cont_wrap ul li:nth-child(2){z-index:2}
.sub #service .cont_wrap ul li:last-child{z-index:3; left:-5rem}

.sub #service .cont_wrap ul li div {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}

.sub #service li svg path {stroke-width: 0.5px; fill:none; stroke-dasharray: 44rem; stroke-dashoffset: 44rem; stroke:#fff; opacity: 0.6;}
.sub #service .cont_wrap.on li svg path {animation:stroke_ani 0.9s ease-in forwards;}
.sub #service .cont_wrap li:nth-child(1) svg path{animation-delay:0.5s}
.sub #service .cont_wrap li:nth-child(2) svg path{animation-delay:0.75s}
.sub #service .cont_wrap li:nth-child(3) svg path{animation-delay:1s}

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

@keyframes stroke_ani {0% {stroke-dashoffset:44rem}100% {stroke-dashoffset:0}}
@keyframes bar_left_ani{0%{left:-40%} 100%{left:-10%}}
@keyframes bar_right_ani{0%{right:25%;opacity:0;} 100%{right:-10%;opacity:1}}

@media(max-width:1240px) {
    .sub #service .cont_wrap ul li:first-child{right:-3rem}
    .sub #service .cont_wrap ul li:last-child{left:-3rem}
    .sub #service li svg path {stroke-dasharray: 48rem; stroke-dashoffset: 48rem;}

    @keyframes stroke_ani {0% {stroke-dashoffset:48rem}100% {stroke-dashoffset:0}}
    @keyframes bar_left_ani{0%{left:-40%} 100%{left:-10%}}
    @keyframes bar_right_ani{0%{right:25%;opacity:0;} 100%{right:-10%;opacity:1}}
}

@media(max-width:1024px) {
    .sub #service li svg path {stroke-dasharray: 56rem; stroke-dashoffset: 56rem;}
    @keyframes stroke_ani {0% {stroke-dashoffset:56rem}100% {stroke-dashoffset:0}}
    @keyframes bar_left_ani{0%{left:-40%} 100%{left:-10%}}
    @keyframes bar_right_ani{0%{right:25%;opacity:0;} 100%{right:-10%;opacity:1}}
}

@media(max-width:990px) {
    .sub #service .cont_wrap {margin-top: 0;}
    .sub #service .cont_wrap ul {flex-direction: column;}
    .sub #service .cont_wrap ul li {width: 35rem;}
    .sub #service .cont_wrap ul li:first-child{right:0rem; top: 5rem;}
    .sub #service .cont_wrap ul li:last-child{left:0rem; top: -5rem;}
}

@media(max-width:768px) {
    .sub #service li svg path {stroke-dasharray: 66rem; stroke-dashoffset: 66rem;}
    @keyframes stroke_ani {0% {stroke-dashoffset:66rem}100% {stroke-dashoffset:0}}
    @keyframes bar_left_ani{0%{left:-40%} 100%{left:-10%}}
    @keyframes bar_right_ani{0%{right:25%;opacity:0;} 100%{right:-10%;opacity:1}}
}

@media(max-width:500px) {
    .sub #service .wrap {width: 90%;}
    .sub #service .cont_wrap ul li {width: 90%;}
    .sub #service .cont_wrap ul li:first-child{top: 3rem;}
    .sub #service .cont_wrap ul li:last-child{top: -3rem;}
}

@media(max-width:380px) {
    .sub #service  br.visible-mo {display: block;}
}

.sub #slide:after {position: absolute; left: 0; bottom: 0; width: 100%; height: 45%; background: var(--sub2color); content: "";}

.sub #slide .page-wrap {position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 100%; display: flex; align-items: center; z-index: 1;}
.sub #slide .page-wrap div {position: inherit; width: fit-content;}
.sub #slide .page-wrap div:after {display: none;}
.sub #slide .page-wrap div.swiper-button-prev {margin-right: 3rem;}
.sub #slide .page-wrap div.swiper-button-next {margin-left: 3rem;}
.sub #slide .page-wrap div img {width: 4rem;}
.sub #slide .page-wrap div.swiper-button-next img {transform: rotate(180deg);}

@media(max-width:1920px) {
    .sub #slide .max1600 {width: 90%;}
}

@media(max-width:990px) {
    .sub #slide .specialSwiper.width85 {width: 80%;}
}

@media(max-width:768px) {
    .sub #slide .specialSwiper br {display: none;}
}

@media(max-width:680px) {
    .sub #slide .specialSwiper.width85 {width: 75%;} 
}

@media(max-width:500px) {
    .sub #slide .specialSwiper.width85 {width: 100%;} 
    .sub #slide .page-wrap {display: none;}
}

/*---- 서브공통---- */
/* 인트로 */
.sub #intro {background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}

@media(max-width:680px) {
    .sub #intro {text-align: center; background-position: 90%;}
    .sub #intro:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); content: "";}
    .sub #intro .box {color: #fff; position: relative; z-index: 1;}
    .sub #intro .box h2 {color: #fff5e5 !important;}
    .sub #intro .box .point-color {color: #fff5e5 !important;}
    .sub #intro .sub-color {color: #ffd9d9 !important;}
}

@media(max-width:520px) {
    .sub #intro p br {display: none;}
}

/* 체크 */
@media(max-width:990px) {
    .sub #check .container > .flex-between {gap: 1.5rem;}
    .sub #check .box {width: 50% !important;}
}

@media(max-width:768px) {
    .sub #check .container > .flex-between {flex-direction: column; gap: 4.5rem;}
    .sub #check .box {width: 100% !important;}
    .sub #check .box.txt {order: 2;}
    .sub #check .box.img img {width: 100%;}
}

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

@media(max-width:768px) {
    .sub #check2 .cont {width: 100%; flex-direction: column;}
    .sub #check2 .cont .box {width: 100% !important;}
    .sub #check2 .cont .box.txt {padding: 4.5rem 2rem;}
}

/* 포인트 */
.sub #box.box3 .flexList {max-width: 1055px; margin: 3rem auto 0;}

@media(max-width: 620px) {
    .sub #box p br {display: none;}
    .sub #box p br.no {display: block;}
}

@media(max-width:360px) {
    .sub #box .flexList {--count: 1;}
    .sub #box h3 br {display: none !important;}
}

/* 노하우 */
.sub #box.knowhow .box .line {width: 100%; height: 1px; background: var(--linecolor);}
@media(max-width:990px) {
.sub #box.knowhow br.hidden-lg {display: block !important;}
}

@media(max-width: 620px) {
    .sub #box.knowhow p br {display: block !important;}
}

@media(max-width: 500px) {
    .sub #box.knowhow p br {display: none !important;}
    .sub #box.knowhow br.hidden-lg {display: none !important;}
}

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

/* 시술부위 */
.sub #area .tabs {width: 28.125rem;}
.sub #area .tabs li {margin-top: 1rem; cursor: pointer;}
.sub #area .tabs li:first-child {margin-top: 0;}
.sub #area .tabs div {padding: 1rem; border-bottom: 1px solid var(--linecolor);}
.sub #area .tabs p {padding: 1rem 1rem 1rem 4rem; background: #fcfbf7;}
.sub #area  span {display: inline-block;}
.sub #area .tabs li img {transition: 0.45s;}
.sub #area .tabs li.on img {transform: rotate(180deg);}

@media(max-width: 1240px) {
    .sub #area .flexList {align-items: center;}
}

@media(max-width: 768px) {
    .sub #area .tabs .font-30 {font-size: 2.5rem;}
    .sub #area .tabs .font-24 {font-size: 1.875rem;}
    .sub #area .tit {text-align: center;}
    .sub #area .tabs {width: 100%;}
    .sub #area .tabs li {margin-top: 1.5rem;}
    .sub #area .tabs div {padding: 1rem 2rem;}
    .sub #area .tabs p {padding: 1rem 1rem 1rem 6rem;}
}


/* 하단공통 */
.sub #contact .flexList {--y-gap: 0rem; --x-gap : 0rem;}
.sub #contact .box {padding: 3.5rem 1rem; position: relative;}
.sub #contact .box:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 50%; background: #fff; opacity: 0.5; content: ""; width: 1px;}
.sub #contact .box:first-child::after {display: none;}
.sub #contact .box img {transition: 0.5s;}
.sub #contact .box:hover img {transform: translateY(-10px);}

/* 전후사진 없을때 추가 */
#contact.hyperhidrosis,
#contact.dietpills,
#contact.SaxendaWegovy,
#contact.stretchmarks,
#contact.tinea,
#contact.tatto,
#contact.disease,
#contact.skincare,
#contact.petite   {padding-top: 0;}

#contact.hyperhidrosis .container,
#contact.dietpills .container,
#contact.SaxendaWegovy .container,
#contact.stretchmarks .container,
#contact.tinea .container,
#contact.tatto .container,
#contact.disease .container,
#contact.skincare .container,
#contact.petite .container {border-right: 1px solid var(--linecolor); border-left: 1px solid var(--linecolor);}

@media(max-width:990px) {
    #contact.hyperhidrosis .container,
    #contact.dietpills .container,
    #contact.SaxendaWegovy .container,
    #contact.stretchmarks .container,
    #contact.tinea .container,
    #contact.tatto .container,
    #contact.disease .container,
    #contact.skincare .container,
    #contact.petite .container  {border: none;}
}

@media(max-width:768px) {
    .sub #contact .font-20 {font-size: 1.75rem;}
    .sub #contact .flexList {position: relative;}
    .sub #contact .flexList:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 85%; height: 1px; background: #fff; content: ""; opacity: 0.5;}
    .sub #contact .flexList::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 80%; background: #fff; content: ""; opacity: 0.5;}
    .sub #contact .box {padding: 5rem 1rem;}
    .sub #contact .box:after {display: none;}
    .sub #contact .box p.mt-10 {margin-top: 0.8rem;}
    .sub #contact .box p.mt-15 {margin-top: 1rem;}
}

@media(max-width:500px) {
    .sub #contact .box img {width: 25px;}

}

/* 포인트 */
.sub #point h2 span {background: var(--subcolor); padding-left: 0.5rem; padding-right: 0.5rem;}
.sub #point.easylipo h2 span {padding-right: 0;}
.sub #point.BS h2 span {padding-right: 0.25rem;}
.sub #point.hairloss h2 span {padding-right: 0rem;}
.sub #point.tinea h2 span {padding-right: 0rem;}
.sub #point.tatto h2 span {padding-right: 0rem;}
.sub #point.disease h2 span {padding-right: 0rem;}
.sub #point.pigmentation h2 span {padding-right: 0rem;}
.sub #point.skinbooster h2 span {padding-right: 0rem;}
.sub #point.skincare h2 span {padding-right: 0rem;}
.sub #point.thermage h2 span {padding-right: 0rem;}

@media(max-width:420px) {
    .sub #point h2 br {display: none !important;}
    .sub #point h2 br.no {display: block !important;}
    .sub #point p br {display: none !important;}
    .sub #point h2 br.visible-xs {display: none !important;}
}

/* 포인트배경 */
/* .sub #point.easylipo .bg_wrap .bg {background-image: url("/img/sub/signature/easylipo_point_bg.jpg"); }
.sub #point.BS .bg_wrap .bg {background-image: url("/img/sub/signature/BS_point_bg.jpg"); } */

/* 추천대상 */
.sub #recommend .flexList {--y-gap: 1.5rem;}
.sub #recommend .box {background: #fff; padding: 1.5rem 3em;}
.sub #recommend .box img {width: 1.375rem; margin-top: 0.3rem;}

@media(max-width:768px) {
    .sub #recommend .box img {width: 1.8rem;}
}

/* 프리미엄관리시스템 */
.sub #system .flexList {--x-gap: 0rem; --y-gap: 0rem;}
.sub #system .box.txt {padding: 0 5%;}
.sub #system .container {border-right: 1px solid var(--linecolor); border-left: 1px solid var(--linecolor);}

@media(max-width: 1240px) {
    .sub #system .box.txt {padding: 0 3%;}  
}

@media(max-width: 990px) {
    .sub #system .container {border: none;}
    .sub #system .box:nth-child(1) {order: 2}
    .sub #system .box:nth-child(2) {order: 1}
    .sub #system .box:nth-child(3) {order: 3}
    .sub #system .box:nth-child(4) {order: 4}
    .sub #system .box:nth-child(5) {order: 6}
    .sub #system .box:nth-child(6) {order: 5}
    .sub #system .box:nth-child(7) {order: 7}
    .sub #system .box:nth-child(8) {order: 8}
    .sub #system .box.txt {padding: 2.5rem 0 3.5rem;}  
}

@media(max-width:380px) {
    .sub #system .box.txt br {display: none;}
}

/* 비포애프터 */
.sub #bfaf:after {position: absolute; left: 0;  top: 0; width: 100%; height: 60%; background: var(--sub2color); content: ""; z-index: -1;}
.sub #bfaf .box {width: 50%;}
.sub #bfaf .box h3 {position: absolute; bottom: 0; right: 0; z-index: 3; text-transform: uppercase; padding: 0.4rem 0.5rem 0; }
.sub #bfaf .box.bf h3 {background: #fff;}
.sub #bfaf .box.af h3 {background: var(--pointcolor); color: #fff;}

.sub #bfaf .login {background: rgba(0,0,0,0.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff;}
.sub #bfaf .login a {color: #fff; display: inline-block; border: 1px solid rgba(255,255,255,0.5); padding: 0.5rem 2rem;}

.sub #bfaf .page-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; display: flex; align-items: center; z-index: 1;}
.sub #bfaf .page-wrap div {position: inherit; width: fit-content; height: auto; margin-top: 0;}
.sub #bfaf .page-wrap div:after {display: none;}
.sub #bfaf .page-wrap div.swiper-button-prev {margin-right: 1.5rem;}
.sub #bfaf .page-wrap div.swiper-button-next {margin-left: 1.5rem;}
.sub #bfaf .page-wrap div img {width: 4.75rem;}
.sub #bfaf .page-wrap div.swiper-button-next img {transform: rotate(180deg);}

.swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0;}

@media(max-width:1880px) {
    .sub #bfaf .max1720 {width: 90%;}
    .sub #bfaf .max1400 {width: 85%;}
}

@media(max-width:768px) {
    .sub #bfaf .max1400 {width: 100%;}
    .sub #bfaf .page-wrap {position: relative; justify-content: center; gap: 1.5rem; margin-top: 2rem;}
    .sub #bfaf .page-wrap div.swiper-button-prev {margin-right: 0;}
    .sub #bfaf .page-wrap div.swiper-button-next {margin-left: 0;}
}

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

.sub #type.box1 .cont {max-width: 43.125rem; margin: 5rem auto 0;}

.sub #type .tit p.point {color: #fff; background: var(--pointcolor); padding: 0.5rem 1rem; width: fit-content; margin: 2.5rem auto 0;}

.sub #type .page-wrap {position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); width: 100%; display: flex; align-items: center; z-index: 1;}
.sub #type .page-wrap div {position: inherit; width: fit-content; height: auto; margin-top: 0;}
.sub #type .page-wrap div:after {display: none;}
.sub #type .page-wrap div.swiper-button-prev {margin-right: 1.5rem;}
.sub #type .page-wrap div.swiper-button-next {margin-left: 1.5rem;}
.sub #type .page-wrap div img {width: 4.75rem;}
.sub #type .page-wrap div.swiper-button-next img {transform: rotate(180deg);}

.sub #type .desc {padding: 0.625rem 1rem; width: fit-content; background: #f3f1eb;}

.swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0;}
.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0;}

@media(max-width:1880px) {
    .sub #type .max1720 {width: 90%;}
    .sub #type .max1400 {width: 85%;}
    .sub #type.tinea .box br {display: none;}
}

@media(max-width:768px) {
    .sub #type .max1400 {width: 100%;}
    .sub #type .page-wrap {position: relative; justify-content: center; gap: 1.5rem; margin-top: 2rem;}
    .sub #type .page-wrap div.swiper-button-prev {margin-right: 0;}
    .sub #type .page-wrap div.swiper-button-next {margin-left: 0;}
    .sub #type.tinea .box br {display: block;}
}

@media(max-width:420px) {
    .sub #type .box p br {display: none;}
    .sub #type.tinea .box br {display: none;}
}

.sub #principle .box {background: #fcfbf7;}
.sub #principle .box h3 {background: #f6f1e4; padding: 0.8rem 1rem; border-bottom: 1px solid #d7d3ca;}
.sub #principle .box .desc {padding: 2rem 1rem;}

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

.sub #program h4 {background: var(--sub2color); padding: 0.8rem 1rem;}
.sub #program .flexList.cont {position: relative;}
.sub #program .flexList.cont:after {position: absolute; left: 50%; top: 0.5rem; transform: translateX(-50%); content: url("/img/sub/plus.png"); width: auto; height: auto;}

@media(max-width:1240px) {
    .sub #program .flexList.cont:after {transform: translateX(-50%) scale(0.8); top: 0.2rem;}
}

@media(max-width:1024px) {
    .sub #program .flexList.cont:after {transform: translateX(-50%) scale(0.6); top: -0.2rem;}
}

@media(max-width:768px) {
    .sub #program .flexList.cont:after {transform: translate(-50%, -50%) scale(0.8); top: 50%; margin-top: 1px;}
}


.sub #program2 .box {width: 36rem; padding: 3.5rem;}
.sub #program2 .box.box1 { background: #f3f1eb; margin: auto;}
.sub #program2 .box.box2 { background: #e2e2e2; margin-top: 6.25rem;}
.sub #program2 .box.box3 { background: #ecefec; margin-top: 6.25rem; position: absolute; right: 0; bottom: 0;}
.sub #program2 .point {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;}

@media(max-width:1240px) {
    .sub #program2 .box {width: 33rem;}
}

@media(max-width:1024px) {
    .sub #program2 .point {transform: translate(-50%, -50%) scale(0.8);}
}

@media(max-width:990px) {
    .sub #program2 .point {display: none;}
    .sub #program2 .box {margin: auto;}
    .sub #program2 .box.box2 {position: inherit; margin-top: 2.5rem;}
    .sub #program2 .box.box3 {position: inherit; margin-top: 2.5rem;}
}

@media(max-width:500px) {
    .sub #program2 .box {width: 100%;}
}

@media(max-width:380px) {
    .sub #program2 .box p br {display: none;}
}

.sub #program3 .flexList {--y-gap: 2.5rem}
.sub #program3 .box p {width: 100%; padding: 1rem; background: var(--sub2color);}
.sub #program3 .box h4 {width: 100%; padding: 1rem; color: #fff; background: var(--pointcolor);}

.sub #table table {width: 100%; border-collapse: collapse;}
.sub #table th {font-weight: 700; color: #fff; padding: 0.8rem 1rem;}
.sub #table th:nth-child(1) {background: #938d83; width: 41%;}
.sub #table th:nth-child(2) {width: 18%;}
.sub #table th:nth-child(3) {background: var(--pointcolor); width: 41%;}
.sub #table td {padding: 1rem;}
.sub #table td:nth-child(1),
.sub #table td:nth-child(3) {background: #fff;}
.sub #table tr {border-bottom: 1px solid var(--linecolor);}
.sub #table tr:nth-child(1),
.sub #table tr:last-child {border: none;}

.sub #table.difference tr.imgbox td {border: none;}
.sub #table.difference tr:nth-child(2) {border: none;}
.sub #table.difference th:nth-child(1) {background: var(--pointcolor);}


@media(max-width:680px) {
    .sub #table .table-wrap {overflow-x: scroll; padding-bottom: 3.5rem;}
    .sub #table table {width: 700px;}
    .sub #table ::-webkit-scrollbar {height: 5px;} 
}

/* ----오시는길----- */
.sub #location {padding-bottom: 0;}
.sub #location .cont .item a {padding: 0.25rem 1rem; border-radius: 5px;     display: inline-block;}

.sub #location .infor .flex-between {gap: 1.5rem;}
.sub #location .line {width: 100%; height: 1px; background: var(--linecolor);}
.sub #location .mapbox .wrap_map {height: 810px !important;}

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

@media(max-width:990px) {
    .sub #location .infor .flex-between {flex-direction: column;}  
}

@media(max-width:768px) {
    .sub #location .mapbox .wrap_map {height: 350px !important;}
}

@media(max-width:400px) {
    .sub #location .infor .visible-mo {display: block;}
}

/* ----공간---- */
.sub #space {background-image: url("/img/sub/happydoctor/space_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

@media(max-width:1880px) {
    .sub #space .max1660{width: 90%;}
}

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

.sub #space2 .max1600 {padding-left: 5%;}
.sub #space2 .item {gap: 7.5rem; margin-top: 2rem;}
.sub #space2 .item .box.txt {width: 33rem; margin-top: 3rem;}

@media(max-width:1880px) {
    .sub #space2 .max1600 {width: 90%;}
    .sub #space2 .item br {display: none;}
}

@media(max-width:1240px) {
    .sub #space2 .item .box.txt {width: 50rem;}
}

@media(max-width:990px) {
    .sub #space2 .item {flex-direction: column; gap: 2.5rem; margin-top: 4.5rem;  padding-left: 0;}
    .sub #space2 .item .box.txt {width: 100%; order: 3; margin-top: 0;}
    .sub #space2 .item br {display: block;}
}

@media(max-width:400px) {
    .sub #space2 .item br {display: none;}
}

/* ----의료진---- */
.sub #doc .emblem {position: absolute; top: 30px; right: 40px;}
.sub #doc .emblem img {width: 14.5rem;}

@media(max-width:1660px) {
    .sub #doc .emblem img {width: 10rem;}
}

@media(max-width:990px) {
    .sub #doc .tit {padding-left: 20%;}
    .sub #doc .emblem {top: auto; bottom: 20px; filter: grayscale(1); opacity: 0.1;} 
    .sub #doc .emblem img {width: 18rem;}
}

@media(max-width:620px) {
    .sub #doc .tit {padding-left: 5%;}
}

@media(max-width:500px) {
    /* .sub #doc .tit {padding-left: 15%;} */
    .sub #doc .emblem img {width: 15rem;}
}

.sub #doc2:after {position: absolute; left: 0; top: 0; width: 100%; background: var(--sub2color); height: 430px; content: ""; z-index: -1;}
.sub #doc2 .max1720 {padding-left: 8%;}

@media(max-width:1880px) {
    .sub #doc2 .max1720 {width: 90%; padding-left: 0;}
}

@media(max-width:1550px) {
   .sub #doc2:after  {height: 320px;} 
}

@media(max-width:1240px) {
    .sub #doc2:after  {height: 270px;} 
    .sub #doc2 .box p.mt-150 {margin-top: 6.25rem;}
}

@media(max-width:990px) {
    .sub #doc2:after  {height: 1150px;} 
    .sub #doc2 .box.img {padding-left: 0;}
    .sub #doc2 .box.img {order: -1;}
    /* .sub #doc2 .box.img img {width: 100%;} */
}

@media(max-width:768px) {
    .sub #doc2:after  {height: 40%;} 
    .sub #doc2 .box p.mt-150 {margin-top: 3.5rem;}
}

@media(max-width:500px) {
    .sub #doc2:after  {height: 35%;} 
    .sub #doc2 .box p br {display: none;}
    .sub #doc2 .box p br.no {display: block !important;}
}

.sub #type01 ul li{border-bottom: 1px solid #d7d3ca;}
.sub #type01 ul li:last-child{border-bottom: 0}
@media(max-width: 990px){
    .sub #type01 .flex{flex-direction: column; flex-wrap: wrap}
    .sub #type01 .flex .width45{width: 100%; padding-right: 0}
    .sub #type01 .flex .width55{width: 100%; margin-top: 30px;}
}

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

@media(max-width:768px) {
    .sub #method .box .flex-between {flex-direction: column;}
    .sub #method .box .imgbox,
    .sub #method .box .txtbox {width: 100% !important;}
}

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

@media(max-width:360px) {
    .sub #method .flexList {--count: 1;}
}

.sub #care .line {width: 100%; height: 1px; background: var(--linecolor);}
.sub #care .page-wrap {position: absolute; right: 0; top: 0; width: 10rem; display: flex; align-items: center; z-index: 10;}
.sub #care .page-wrap div {position: inherit; width: fit-content; height: auto; margin-top: 0;}
.sub #care .page-wrap div:after {display: none;}
.sub #care .page-wrap div.swiper-button-prev {margin-right: 3rem;}
.sub #care .page-wrap div.swiper-button-next {margin-left: 3rem;}
.sub #care .page-wrap div img {width: 4.5rem;}
.sub #care .page-wrap div.swiper-button-next img {transform: rotate(180deg);}

@media(max-width:1240px) {
    .sub #care .txtbox br {display: none;}
}

@media(max-width:768px) {
    .sub #care .swiper-slide {flex-direction: column;}
    .sub #care .swiper-slide .imgbox {width: 100%;}
    .sub #care .swiper-slide .imgbox img {width: 100%;}
    .sub #care .swiper-slide .txtbox {width: 100%; padding-left: 0; margin-top: 2.5rem;}
    .sub #care .txtbox br {display: block;}

    .sub #care .page-wrap {position: relative; width: 100%; justify-content: center; gap: 1.5rem; margin-bottom: 3.5rem;}
    .sub #care .page-wrap div.swiper-button-prev {margin-right: 0;}
    .sub #care .page-wrap div.swiper-button-next {margin-left: 0;}
}

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

.sub #membership {position: relative;}
.sub #membership:after {background: linear-gradient(to bottom, #f6edde 5%, #fff 95%); height: 20rem; position: absolute; left: 0; top: 0; width: 100%; content: ""; z-index: -1;}
.sub #membership .box {margin-top: 2rem;}
.sub #membership .line {width: 100%; height: 1px; background: var(--linecolor);}
.sub #membership .imgbox img {box-shadow: 10px 10px 25px rgba(0,0,0,0.5);}

@media(max-width:1440px) {
    .sub #membership .wrap {width: 90%;}
}

@media(max-width:768px) {
    .sub #membership .imgbox {margin-top: 0; padding-right: 0;}
    .sub #membership .txtbox {margin-top: -1rem;}
}

@media(max-width:500px) {
    .sub #membership .font-70 {font-size: 3.5rem;}
}

/* .sub #price {margin-top: 90px;} */
.sub #price .flexList {--x-gap: 2.5rem; --y-gap: 2.5rem}
.sub #price .line {width: 100%; height: 1px; background: var(--linecolor);}
.sub #price ul.desc li {margin-top: 1rem;}
.sub #price ul.desc li img {margin-top: 0.3rem; width: 1.375rem;}
.sub #price .box {background: #fcfbf7; padding: 3rem 3.5rem;}
.sub #price .box .price {justify-content: flex-end; align-items: flex-end; line-height: 1; gap: 3.5rem;}
.sub #price .box .price p.bf {padding-bottom: 0.25rem; position: relative; width: fit-content;}
.sub #price .box .price p.bf:after {position: absolute; left: -0.5rem; top: 45%; transform: translateY(-50%); width: calc(100% + 2rem); height: 1px; background: var(--gray); content: "";}
.sub #price .box .price p.bf:before {position: absolute; right: -1.65rem; top: 32%; transform: translateY(-50%) rotate(45deg); width: 1rem; height: 1px; background: var(--gray); content: "";}

 /* list */
.sub #price .tab {height: max-content !important; padding-right: 1rem;}
.sub #price .tab a {display: block; padding-left: 3rem; position: relative; margin-top: .75rem;}
.sub #price .tab a:first-child {margin-top: 0;}
.sub #price .tab a:after {position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 3px; background: var(--pointcolor); content: ""; opacity: 0; transition: 0.3s;}
.sub #price .tab a.on {color: var(--pointcolor); font-weight: 700;}
.sub #price .tab a.on:after {opacity: 1; left: 0;}

.sub #price .tab-content:first-child {margin-top: 0;}
/* .sub #price .tab-content {margin-top: 6.25rem;} */
.sub #price .tab-content .af {text-align: right;}

@media(max-width:1800px) {
    .sub #price .max1720 {width: 90%;}
}

@media(max-width:990px) {
    /* list */
    .sub #price .wrap {flex-direction: column; gap: 3.5rem;}
    .sub #price .tab {display: flex; width: 100%; text-align: center; gap: 1rem; flex-wrap: wrap;}
    .sub #price .tab a {width: calc(33.3333% - 0.35rem); padding-left: 0; background: #eee; margin-top: 0; padding: 1rem;}
    .sub #price .tab a:after {display: none;}
    .sub #price .tab a.on {background: var(--pointcolor); color: #fff;}
    .sub #price .cont_wrap {width: 100%;}
    /* .sub #price .tab-content:first-child {margin-top: 6.25rem;} */
}

@media(max-width:768px) {
    .sub #price ul.desc li img {width: 1.5rem;}
}

@media(max-width:500px) {
    .sub #price .tit > .flex {flex-direction: column; align-items: flex-start;}
    .sub #price .tit > .flex p {padding-left: 0; margin-top: 1.5rem;}
    .sub #price .box .price {flex-direction: column; gap: 1.5rem; margin-top: 2.5rem;}
    
    /* .sub #price .tab a {width: calc(50% - 0.5rem);} */
    .sub #price .tab { gap: .5rem; }
    .sub #price .tab a { padding: 1rem .5rem; }
    .sub #price .tab-content .af {margin-top: 1.5rem;}
}