.sub{overflow-x: hidden;}
.sub_wrap{z-index: 99; background-color: #fff;}
.subTop {height:70vh;position:relative;top:0;left:0;overflow:hidden; z-index: 1;}
.subTop .subTopImg {position: fixed;top:0;left:0;width:100%;height: 70vh;opacity:1;transform:scale(1.05);transition:transform 2s; z-index: 1;}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}
.subTop .inner {position: absolute; width: 1400px; margin: auto; z-index: 9998; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.special .subTop, .event .subTop{display: none;}
.subTop .subdesc{display: none;}
.procedure .subTop .subdesc{display: block;}

#d_point{background:url(/img/sub/introduce/doctor/point_bg.jpg) no-repeat center / cover; border-radius: 20px; padding-left: 3%; padding-right: 3%;}
#d_point .line{width: 2px; height: 60px; background-color: var(--pointcolor); margin-left: auto; margin-right: auto; opacity: .3;}

#doctor_info .line{width: 60px; height: 2px; background-color: var(--pointcolor); opacity: .3;}

.special .section{padding: 0;overflow: hidden;}

#equipment .eq_tab{background-color: #fafafa; border-radius: 60px; padding: .5rem;}
#equipment .eq_tab .current{font-weight: bold; color: #fff; background-color: var(--pointcolor); border-radius: 60px;}
#equipment .eq_tab li{border-bottom: 0 !important; padding: .5rem;}
#equipment .container>.line{width: 2px; height: 60px; background-color: var(--pointcolor); margin-left: auto; margin-right: auto; opacity: .3;}
#equipment .container>ul li{border-bottom: 1px solid #dedede;}
#equipment ul li .line{width: 60px; height: 2px; background-color: var(--pointcolor); opacity: .3;}
#equipment ul li ul li{background-color: #fafafa; padding: .8rem 2rem .8rem 4rem; position: relative; border-bottom: 0 !important;}
#equipment ul li ul li:after{content: url(/img/sub//equipment/equipment/check.png); display: block; width: 19px; height: 16px; position: absolute; top: 40%; left: 2rem; transform: translateY(-50%);}
#equipment .tab-content00{display: none;}
#equipment .tab-content00.current{display: inherit; }

#s_event .event_btn .box { border-radius: 12px; padding: 2.5rem 1rem; }
#s_event .event_btn .spEvent { background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; background-color: rgba(0,0,0,.25); background-blend-mode: color; transition: .3s; cursor: pointer; }
/* #s_event .event_btn .box:nth-child(1), #s_event .event_btn .box:nth-child(3), #s_event .event_btn .box:nth-child(5){background-color: #eefcfb;}
#s_event .event_btn .box:nth-child(2), #s_event .event_btn .box:nth-child(4){background-color: #eef7fc;} */
#s_event .event_btn .box.active{ font-weight: 700; background-color: rgba(0,0,0,.5); }
#s_event ul.tabs{border: 1px solid #eeeeee; border-radius: 12px; overflow: hidden; --x-gap: 0rem; --y-gap: 0rem}
#s_event ul.tabs li{cursor: pointer; padding: .5rem; border-bottom: 1px solid #eeeeee; border-right: 1px solid #eee;}
#s_event ul.tabs li:nth-child(6), #s_event ul.tabs li:last-child{border-right: 0;}
#s_event ul.tabs li:nth-child(n+7){border-bottom: 0;}
#s_event ul.tabs li.current{background-color: var(--pointcolor); color: #fff; font-weight: 700;}
#s_event .tab-content{display: none;}
#s_event .tab-content.current{display: inherit; overflow-x: hidden;}
#s_event .tab-content.current .price span:last-child{opacity: .5; text-decoration:line-through;}
#s_event .tab-content.current .price a{width: 130px; text-align: center; padding: 1rem; color: var(--pointcolor); border-radius: 60px; border: 1px solid var(--pointcolor); display: block; margin-left: auto;}
#s_event .tab-content.current .price a:hover{color: #fff; background-color: var(--pointcolor); font-weight: 600;}
#s_event .tab-content.current .price a.disabled { color: #ccc; border-color: #ccc; cursor: not-allowed; }
#s_event .tab-content.current .price a.disabled:hover { color: #ccc; background: transparent; font-weight: initial; }
#s_event .tab-content.current .price b{border-radius: 60px; padding: .3rem 1rem;}
#s_event .tab-content ul li{padding: 1.875rem 0; border-bottom: 1px solid #e5e5e5;}
#s_event .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, #s_event .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 5%;}
#s_event .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, #s_event .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{opacity: 1; background-color: #fff; margin: 6px 10px}
#s_event .swiper-pagination-bullet-active{background-image: url(/img/sub/event/event/pager-active.png); width: 20px; height: 20px; margin: 0 10px !important;}

#counsel .container>.flexList{--x-gap: 5rem}
#counsel .choice, #counsel .day{border-bottom: 1px solid #eeeeee;}
#counsel .price .font-20{text-decoration:line-through;}
#counsel .reservation-btn{border: 1px solid var(--pointcolor); background-color: #fff; width: 450px; padding: 1rem; border-radius: 60px; margin: auto; display: block; color: var(--pointcolor);}
#counsel .reservation-btn:hover{color: #fff; font-weight: 700; background-color: var(--pointcolor) !important;}
#counsel input, #counsel select {border: 1px solid #e1e1e1;background-color: #fff !important;padding: 5px;line-height: 1.3;height: 100%;}
#counsel .time .flexList{--x-gap: 1rem; --y-gap: 1rem}
#counsel .time .box{border: 1px solid var(--pointcolor); border-radius: 60px; padding: .5rem;}
#counsel .time .box.active{background-color: var(--pointcolor); color: #fff; }
#counsel .counselCont textarea{height: 280px; width: 100%; border: 1px solid #e1e1e1;}
#counsel input[type='checkbox'] {width: 15px;height: 15px;border: 1px solid #eeeeee; border-radius: 2px; outline: none;  cursor: pointer; margin-top: 3px; }
#counsel input[type='checkbox']:checked { background-color: var(--pointcolor); box-shadow: 0 0 0 2px var(--pointcolor)}

#sub_map .root_daum_roughmap_landing{width: 100%;}
#sub_map .root_daum_roughmap .wrap_map{height: 400px;}
#sub_map .yt_box{position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; margin: 0 auto;}
#sub_map .yt_box iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

#beforeafter{background:url(/img/sub/procedure/beaf_bg.jpg) no-repeat center 30px / cover;}
#beforeafter .title::after{display: block; content: ''; clear: both;}
#beforeafter a.morebtn{width: 230px; border-radius: 60px; padding: 1rem 2rem; float: right; margin-top: -60px;}
#beforeafter .flexList{--x-gap: 0rem; --y-gap: 0rem; border-radius: 12px; overflow: hidden;}
#beforeafter .box{position: relative;}
#beforeafter .box a{color: #fff; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
/* #beforeafter .box a::after{content:''; display:block; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; backdrop-filter: blur(5px);} */
#beforeafter .box .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: none;}
#beforeafter .box .cont{border-radius: 60px; position: absolute; top: 6%; left: 30px; padding: .5rem 2rem;}
#beforeafter .box:first-child .cont{background-color: #fff;}
#beforeafter .box:last-child .cont{background-color: var(--pointcolor); z-index: 3; color: #fff;}
#beforeafter .box .date{position: absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0,.5); color: #fff; padding: .5rem 0;}

#sub_title .flexList{--x-gap: 0rem}
#sub_title .flexList .line{width: 100%; height: 1px; background-color: var(--pointcolor); opacity: .3;}

#effect{background:url(/img/sub/procedure/effect_bg.png) no-repeat center / cover; border-radius: 50px 50px 0 0;}
#effect .box .txt{position: relative; height: 90px;}
#effect .box .txt:after{display: block; content: ''; width: 2px; height: 90px; background-color: var(--pointcolor); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.freckle #effect .width80{border: 1px solid #ececec; border-radius: 12px; overflow: hidden;}
#effect .width80 table{background-color: #ffffff; border-collapse: collapse; border-spacing: 0;}
#effect .width80 table th{background-color: #eaf9f9; padding: 1rem; border-right: 1px solid #ececec;}
#effect .width80 table td{padding: 1rem; border-top: 1px solid #ececec; border-right: 1px solid #ececec;}
#effect .width80 table td:last-child{border-right: 0;}
#effect .width80 .bg-white{padding: 5rem 1rem; border-radius: 12px;}
.waxing #effect .bg-white{padding: 2rem 1rem 3rem 1rem; border-radius: 12px;}
.pimple #effect .box{background-color: #fff; padding: 1rem 2rem; border-radius: 8px;}
.filler #effect.pb-0{background: none}
.filler #effect .bg-white{padding: 3rem 1rem; border-radius: 8px;}
.filler #effect .line{width: 35px; height: 1px; background-color: #c0efec;}
.obesity #effect .flexList{--x-gap: .1rem; border-radius: 12px; overflow: hidden;}
.obesity #effect .img-box{position: relative;}
.obesity #effect .img-box:after{content: ''; display: block; width: 100%; height: 100%; background-color: rgba(255,255,255,.7); position: absolute; top: 0; left: 0; visibility: hidden; transition: all 0.3s;}
.obesity #effect .box:hover .img-box:after{visibility: visible;  transition: all 0.3s;}
.obesity #effect .img-box .txt-b{position: absolute; top: 50%; left: 50%; visibility: hidden; transform: translate(-50%,-50%); width: 100%; transition: all 0.3s; z-index: 2;}
.obesity #effect .box:hover .img-box .txt-b{visibility: visible;}

#principle .flexList{--x-gap: 5rem}
#principle .flexList .box{position: relative;}
#principle .flexList .box:after{display: block; content: url(/img/sub/procedure/lifting/principle_arrow.png); width: 21px; height: 19px; position: absolute; top: 35%; left: 107%; transform: translateY(-50%); }
#principle .flexList .box:last-child:after{display: none;}

#reason{background:url(/img/sub/procedure/reason_bg.jpg) no-repeat center / cover;}
#reason table{background-color: #ffffff; border-collapse: collapse; border-spacing: 0; border: 1px solid #ececec;}
#reason table th{background-color: #eaf9f9; padding: 1rem; border-right: 1px solid #ececec;}
#reason table th:last-child{border-right: 0;}
#reason table td{padding: 1rem; border-top: 1px solid #ececec; border-right: 1px solid #ececec;}
#reason table td:last-child{border-right: 0;}
#reason .bg-white{padding: 5rem 1rem; border-radius: 12px;}

#part .container>div{border-radius: 20px; padding: 0 2rem;}
.lifting #part .container>div{background:url(/img/sub/procedure/lifting/part_bg.jpg) no-repeat center / cover;}
.waxing #part .container>div{background:url(/img/sub/procedure/waxing/part_bg.jpg) no-repeat center / cover;}
.pimple #part .container>div{background:url(/img/sub/procedure/pimple/part_bg.jpg) no-repeat center / cover;}
.filler #part .container>div{background:url(/img/sub/procedure/filler/part_bg.jpg) no-repeat center / cover;}
#part .tabs01{background-color: #fafafa; border-radius: 60px; padding: .5rem;}
#part .tabs01 li{cursor: pointer; padding: .5rem .1rem;}
#part .tabs01 li.current{background-color: var(--pointcolor); border-radius: 60px;  color: #fff; font-weight: 700;}
#part .tab-content01{display: none;}
#part .tab-content01.current{display: inherit; }
.waxing #part .tab-content01:nth-child(2){ padding: 0 2rem 0 2rem;}
.obesity #part .tabs01 {background-color: #fff ;}
.obesity #part .tab-content01 .flexList{background-color: #fff; padding: 2rem; border-radius: 20px; --x-gap: 3rem}
.obesity #part .tab-content01 .line{width: 35px; height: 1px; background-color: #c0efec;}

#recommend {border-radius: 50px 50px 0 0 ;}
.lifting #recommend{background:url(/img/sub/procedure/lifting/recommend_bg.jpg) no-repeat center / cover;}
.freckle #recommend{background:url(/img/sub/procedure/freckle/recommend_bg.jpg) no-repeat center / cover;}
.pore #recommend{background:url(/img/sub/procedure/pore/recommend_bg.jpg) no-repeat center / cover;}
.waxing #recommend{background:url(/img/sub/procedure/waxing/recommend_bg.jpg) no-repeat center / cover;}
.pimple #recommend{background:url(/img/sub/procedure/pimple/recommend_bg.jpg) no-repeat center / cover;}
.filler #recommend{background:url(/img/sub/procedure/filler/recommend_bg.jpg) no-repeat center / cover;}
.skinbooster #recommend{background:url(/img/sub/procedure/skinbooster/recommend_bg.jpg) no-repeat center / cover;}
.obesity #recommend{background:url(/img/sub/procedure/obesity/recommend_bg.jpg) no-repeat center / cover;}
#recommend ul li{background-color: #fff; padding: .8rem 2rem .8rem 4rem; position: relative; border-bottom: 0 !important; border-radius: 8px;}
#recommend ul li:after{content: url(/img/sub/equipment/equipment/check.png); display: block; width: 19px; height: 16px; position: absolute; top: 40%; left: 2rem; transform: translateY(-50%);}

#sub_special{background:url(/img/sub/procedure/sub_special_bg.jpg) no-repeat center / cover; border-radius: 50px 50px 0 0 ; margin-top: -50px;}
#sub_special .faq-container {display: flex; flex-direction: column;}
#sub_special .faq {position: relative; overflow: hidden; transition: 0.3s ease; background-color: rgba(255,255,255,.5); padding: 2rem 3rem;}
#sub_special .faq.active{background-color: rgba(255,255,255,1);}
#sub_special .faq__question00 { cursor: pointer;}
#sub_special .faq__title {margin: 0; font-size: 1.5rem;}
#sub_special .faq__answer {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out;}
#sub_special .faq__text {padding: 1rem 0; }
#sub_special .faq.active .faq__answer {max-height: 13rem;  transition: max-height 0.3s ease-in-out;}
#sub_special .faq__btn {cursor: pointer; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%;right: 3rem; transform: translateY(-50%);}
#sub_special .faq__btn:focus {outline: 0;}
#sub_special .faq__icon.close {display: none;}
#sub_special .faq.active .faq__icon.close {display: block;}
#sub_special .faq.active .faq__icon.open {display: none;}

#process .width90{border-radius: 20px; }
.freckle #process .width90{background:url(/img/sub/procedure/freckle/process_bg.jpg) no-repeat center / cover;}
.pore #process .width90{background:url(/img/sub/procedure/pore/process_bg.jpg) no-repeat center / cover;}
.waxing #process .width90{background:url(/img/sub/procedure/waxing/process_bg.jpg) no-repeat center / cover;}
#process .box{padding: 3rem 0; border-radius: 12px;}
.waxing #process .box{padding: 0;}

#point{background:url(/img/sub/procedure/pore/point_bg.jpg) no-repeat center / cover;}

#type .box .txt{position: relative;}
#type .box .txt:after{display: block; content: ''; width: 2px; height: 100%; background-color: var(--pointcolor); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

.filler #way{background:url(/img/sub/procedure/filler/way_bg.jpg) no-repeat center / cover;}

#skinbooster_info .container>.flexList{background-color: #f9f9f9; border-radius: 20px; padding: 3rem 4rem; --x-gap: 5rem}
#skinbooster_info .box .line{width: 35px; height: 1px; background-color: #c0efec;}
#skinbooster_info .box .flexList{--x-gap: 1rem; --y-gap: 1rem}
#skinbooster_info .box .flexList .box{padding: .5rem 2rem; border-radius: 4px;}

.introduce #space .tabs001{background-color: #fafafa; border-radius: 60px; padding: .5rem;}
.introduce #space .tabs001 li{cursor: pointer; padding: .5rem .1rem;}
.introduce #space .tabs001 li.current{background-color: var(--pointcolor); border-radius: 60px;  color: #fff; font-weight: 700;}
.introduce #space .tab-content02{display: none;}
.introduce #space .tab-content02.current{display: inherit; }

#o_kind{background:url(/img/sub/procedure/obesity/o_kind_bg.jpg) no-repeat center / cover;}
#o_kind .flexList .box .point-bg{border-radius: 60px; padding: 0.5rem;}

#o_process .flexList{--x-gap: 6rem; --y-gap: 3rem}
#o_process .flexList .box{position: relative;}
#o_process .flexList .box:after{content: url(/img/sub/procedure/obesity/arrow.png); display: block; width: 31px; height: 30px; position: absolute; top: 38%; left: 108%; transform: translateY(-50%);}
#o_process .flexList .box:nth-child(3):after, #o_process .flexList .box:nth-child(6):after{display: none;}
#o_process .onotice_box span{background-color: #edf9f9; border-radius: 8px; padding: .8rem 2rem;}

#o_comparison table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
#o_comparison tr{border-bottom: 1px solid #ddd;}
#o_comparison tr:nth-child(1){border-top: 1px solid #ddd;}
#o_comparison tr td{padding: 1rem; }

.obesity #part{background:url(/img/sub/procedure/obesity/o_part_bg.png) no-repeat center / cover;}
.obesity #recommend{margin-top: -50px;}

/*step 원 컨텐츠*/
.cir_step_sect {overflow: hidden; }
.cir_step_sect > .tit { margin-bottom: 80px; font-size: var(--sub_h1); font-weight: 800; text-align: center; font-family: var(--nsr); }
.cir_step_sect .in2 > .tit { font-size: var(--sub_h1); font-weight: 800; text-align: center; font-family: var(--nsr); }
.cir_step_sect .in2 > .tit + .txt { margin-top: 10px; }
.cir_step_sect .in2 > .tit.left { text-align: left; }

.cir_step_sect .in2 + .cir_wrap { margin: 50px auto 0; }
.cir_step_sect .cir_wrap { position: relative; display: flex; max-width: var(--layoutwidth); margin: 0 auto 0; align-items: center; justify-content: center; }

.cir_step_sect .cir_wrap .line.before { content: ''; position: absolute; right: -20px; top: 50%; width: 100%; height: 1px; background-color: #1cbbb2; transform: translate(-100%, -50%); }
.cir_step_sect .cir_wrap .line.before:before { content: ''; position: absolute; display: block; right: 0; top: 50%; width: 100%; height: 10px; transform: translateY(-50%); transition: all 1s;  background-color: #e1e1e1;}
.cir_step_sect .cir_wrap .line.after { content: ''; position: absolute; left: -20px; top: 50%; width: 100%; height: 1px; background-color: #1cbbb2; transform: translate(100%, -50%); }
.cir_step_sect .cir_wrap .line.after:before { content: ''; position: absolute; display: block; right: -1px; top: 50%; width: 100%; height: 10px; transform: translateY(-50%); transition: all 1.5s; transition-delay: 2s; background-color: #f5f5f5;}


.cir_step_sect.on .cir_wrap .line.before:before { width: 0; }
.cir_step_sect.on .cir_wrap .line.after:before { width: 0; }

.cir_step_sect .cir_wrap .cir { position: relative; width: calc(100%/3); padding-top: calc(100%/3); }
.cir_step_sect .cir_wrap .cir + .cir { margin-left: -20px; }
.cir_step_sect .cir_wrap .cir .svg { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); opacity: 0; transition-delay: 1s; }
.cir_step_sect.on .cir_wrap .cir .svg { opacity: 1; }
.cir_step_sect .cir_wrap .cir .svg svg { width: 100%; height: 100%; stroke-dasharray: 1214; stroke-dashoffset: 0; stroke-linecap: round; transform: rotate(-90deg); }
.cir_step_sect.on .cir_wrap .cir .svg svg { animation: drawCircle 1s linear; animation-delay: 1s; }
.cir_step_sect .cir_wrap .cir:nth-of-type(2n) .svg svg { transform: rotate(-270deg); }
.cir_step_sect .cir_wrap .cir .box { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; }

.cir_step_sect.col2 .cir_wrap { width: 33%; }
.cir_step_sect.col2 .cir_wrap .cir { width: calc(100%/2); padding-top: calc(100%/2); }
.cir_step_sect.col2 .cir_wrap .line.before { width: 110%; left: 12px; right: unset; }
.cir_step_sect.col2 .cir_wrap .line.after { width: 110%; right: 11px; left: unset;}


@keyframes drawCircle {
  0% {
      stroke-dashoffset: 1214;
  }
  100% {
      stroke-dashoffset: 0;
  }
}
@media(max-width: 1550px){
    .subTop .inner{width: 90%;}

    #sub_map .width35{width: 40%;}
    #sub_map .width65{width: 60%;}

    #reason .width80{width: 100%;}

    #beforeafter .width70{width: 100%;}

    #beforeafter a.morebtn{margin-top: 1.875rem;}

    #effect .width80{width: 100%;}

    #skinbooster_info .width80{width: 100%;}

    #part .width80{width: 100%;}
}
@media(max-width: 1240px){
  #sub_map .root_daum_roughmap .wrap_map{height: 300px;}

  #sub_special .faq__btn {width: 50px; height: 50px;}

  #beforeafter a.morebtn{width: 185px;}

  #equipment .eq_tab{width: 100%;}
  
}
@media(max-width: 990px){
  #doctor_info .flex-between{flex-direction: column; margin-top: 5.000rem;}  
  #doctor_info .flex-between img{order: 1;}
  #doctor_info .flex-between .txt{padding-left: 0; width: 100%; order: 2; margin-top: 3.125rem;}

  #equipment .flex-between{flex-direction: column; margin-top: 5.000rem;}  
  #equipment .flex-between img{order: 1;}
  #equipment .flex-between .txt{padding-left: 0; width: 100%; order: 2; margin-top: 3.125rem;}
  #equipment .width45{width: 100%;}
  #equipment .width45 img{max-width: 100%; width: auto !important; margin: auto;}

  #s_event ul.tabs li:nth-child(3), #s_event ul.tabs li:nth-child(9){border-right: 0;}
  #s_event ul.tabs li:nth-child(n+7){border-bottom: 1px solid #eeeeee; }
  #s_event ul.tabs li:nth-child(n+10){border-bottom: 0;}

  #sub_map .width35{width: 45%;}
  #sub_map .width65{width: 55%;}

  #sub_title .box .pl-70{padding-left: 5%; padding-right: 5%;}

  #sub_special .flex-between{flex-direction: column;}
  #sub_special .flex-between .width70{width: 100%; margin-top: 3.125rem;}

 #effect .box .txt{height: auto;}
 #effect .box .txt:after{height: 100%;}

  #type .flex-between{flex-direction: column;}
  #type .flex-between .width20,  #type .flex-between .width80{width: 100%;}
  #type .flex-between .width80{margin-top: 4.375rem;}
  #skinbooster_info .container .f01 .box:nth-child(2),  #skinbooster_info .container .f03 .box:nth-child(2){order: 1;}
  #skinbooster_info .container .f01 .box:nth-child(1),  #skinbooster_info .container .f03 .box:nth-child(1){order: 2;}

  #principle .flexList .box:after{left: 104%;}
  
  #part .tabs01.width30{width: 50%;}

  #sub_special .faq .faq__icon.close, #sub_special .faq .faq__icon.open, #sub_special .faq.active .faq__icon.close{display: none;}
  #sub_special .faq .faq__answer{max-height: 13rem;}

.introduce #space .width60{width: 100%;}

/*라인 원*/
    .cir_step_sect .cir_wrap { width: 100%; padding: 0 4vw; margin-top: 25px; flex-direction: column; }
    .cir_step_sect .cir_wrap .cir { position: relative; width: calc(50%); padding-top: calc(50%); }
    .cir_step_sect .cir_wrap .cir + .cir { margin-left: 0; margin-top: -20px;}
    .cir_step_sect .cir_wrap .line.before, .cir_step_sect .cir_wrap .line.after{display: none;}

    #o_comparison .width80{ width: 100%;}

    #o_process .flexList .box:nth-child(3):after{display: block;}
    #o_process .flexList .box:nth-child(2):after,#o_process .flexList .box:nth-child(4):after{display: none;}
    #o_process .flexList .box:after{left: 105%;}

    .obesity #effect .box .img-box:after{visibility: visible;}
    .obesity #effect .img-box .txt-b{visibility: visible;}

    #skinbooster_info .container>.flexList{padding: 45px 30px;}

    #beforeafter a.morebtn{float: none;}

      #recommend ul li:after{content: url(/img/sub/check_m.png); width: 15px; height: 13px; position: absolute; top: 40%; left: 2rem; transform: translateY(-50%);}

      #sub_special .faq{    background-color: rgba(255, 255, 255, 1);}

      .obesity #part .tabs01{border-radius: 20px;}

}
@media(max-width: 768px){

  #s_event .tab-content ul li{flex-direction: column;}
  #s_event .tab-content ul li .price{width: 100%;}
  #s_event .tab-content ul li .price .font-30{text-align: right;}

  #sub_map .section-left>.flex-between{flex-direction: column;}
  #sub_map .width35{width: 100%;}
  #sub_map .width65{width: 100%; padding-left: 0; padding-right: 5%; margin-top: 50px;}
  #sub_map .root_daum_roughmap .wrap_map{height: 400px;}

   #sub_special .faq__btn {width: 40px; height: 40px;}

   #type .flex-between .width80{width: 80%; margin-left: auto; margin-right: auto; --y-gap: 3rem}

   #principle .flexList{--y-gap: 8rem}
   #principle .flexList .box:after{left: 48%; top: 107%; transform: rotate(90deg);}

  #recommend .r_list{margin-bottom: 400px;}
  .lifting #recommend{background:url(/img/sub/procedure/lifting/recommend_bgm.jpg) no-repeat center / cover;}
  .freckle #recommend{background:url(/img/sub/procedure/freckle/recommend_bgm.jpg) no-repeat center / cover;}
  .pore #recommend{background:url(/img/sub/procedure/pore/recommend_bgm.jpg) no-repeat center / cover;}
  .waxing #recommend{background:url(/img/sub/procedure/waxing/recommend_bgm.jpg) no-repeat center / cover;}
  .pimple #recommend{background:url(/img/sub/procedure/pimple/recommend_bgm.jpg) no-repeat center / cover;}
  .filler #recommend{background:url(/img/sub/procedure/filler/recommend_bgm.jpg) no-repeat center / cover;}
  .skinbooster #recommend{background:url(/img/sub/procedure/skinbooster/recommend_bgm.jpg) no-repeat center / cover;}
  .obesity #recommend{background:url(/img/sub/procedure/obesity/recommend_bgm.jpg) no-repeat center / cover;}

  #o_process .onotice_box{background-color: #edf9f9; border-radius: 8px; padding: 0.5rem;}
  #o_process .onotice_box span{background-color: rgba(255,255,255,0);}

  #counsel .reservation-btn{width: 300px;}

  #s_event .tab-content.current>img{max-width: 120%;}

  #effect, #recommend{border-radius: 30px 30px 0 0;}

  #way .flexList{width: 80%; margin-left: auto; margin-right: auto;}

  #beforeafter .box .date{font-size: 14px;}
}
@media(max-width: 500px){
   #type .flex-between .width80{width: 100%;}

      .cir_step_sect .cir_wrap .cir {
      width: calc(80%);
      padding-top: calc(80%);
      
  }
  #o_process .flexList .box:after{display: none;}
  
  
}