@charset "utf-8";

/* ===================================
    Default CSS (Ver.2022.12.30)
=================================== */

:root {
    /* Layout */
    --layoutwidth: 1410px ;
    --boldWeight:400;

 
}

/* ========== Font family ========== */
.main-font    {font-family: var(--mainfont), sans-serif}
.point-font   {font-family: var(--pointfont),serif; }
.point-font2   {font-family: var(--pointfont2),sans-serif}
.point-font3   {font-family: var(--pointfont3),sans-serif}
.point-font4   {font-family: var(--pointfont4),sans-serif}

.font_serif   {font-family: var(--koSerif), serif;}

/* =============== Color ===============*/
.point-color   {color: #f36c7d!important;color: var(--pointcolor)}/* 익스용 CSS > impotant 쓰면 적용안되는 부분으로 한줄더 작성 */
.point-color2   {color: #024875!important;color: var(--pointcolor2)}/* 익스용 CSS > impotant 쓰면 적용안되는 부분으로 한줄더 작성 */
.point-color3   {color: #034087!important;color: var(--pointcolor3)}/* 익스용 CSS > impotant 쓰면 적용안되는 부분으로 한줄더 작성 */
.point-color4   {color: #c1edff!important;color: var(--pointcolor3)}/* 익스용 CSS > impotant 쓰면 적용안되는 부분으로 한줄더 작성 */
.dg-color{color: var(--dark-gray);}
.lg-color{color: rgba(0,32,57,.03);}
.point-bg      {background-color: #f36c7d}
.point-bg2      {background-color: #024875}
.point-bg3      {background-color: #0071bb}

/* ==================================================================
    Reset 초기화
===================================================================== */

*{outline:none;}
*, :after, :before {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;scroll-behavior: smooth;}

html, body{font-family: var(--mainfont), sans-serif;font-weight:var(--boldWeight);line-height: 1.7;}
body{-webkit-font-smoothing: antialiased;-font-smoothing: antialiased; letter-spacing: -0.02em; overflow-x: hidden; color: #333;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
div,span,p,ul,ol,li,dd,dt,dl,h1,h2,h3,h4,h5,h6{word-break: keep-all;} /* 줄바꿈 속성 (단어기준)*/
h1, h2, h3, h4, h5, h6{font-size: 1em;margin: 0;padding: 0;font-family: inherit;}
a{text-decoration:none;color:#000;-webkit-tap-highlight-color: transparent;}
button{border:none;background-color:transparent;cursor: pointer;}
ul,li, ol, dl,dt,dd {list-style:none}
b, strong {font-weight: 500;}
small{font-size:0.9em;vertical-align: text-bottom;}
tbody, tfoot, thead, tr, th, td{vertical-align: middle;}
br{font-family:sans-serif}
img{
    image-rendering: -moz-auto;         /* Firefox */
    image-rendering:   -o-auto;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: auto;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

input, button,textarea, select {margin:0;padding:0;font-family: var(--mainfont), sans-serif;font-size:1em}
input[type="submit"] {width: auto}
input[type="button"], input[type="text"], input[type="email"],
input[type="search"], input[type="password"], textarea, input[type="submit"] {   appearance: none;-webkit-appearance: none; outline: none;}

input:focus, textarea:focus{ border-color: #585858; outline: none; }
input[type="button"]:focus{ outline: none;}
select::-ms-expand{ display:none;}

::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis;}
::-moz-placeholder { color: #6f6f6f; text-overflow: ellipsis; opacity:1;}
::-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; opacity:1;}

/* Scroll관련 */
/* ::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);box-shadow: inset 0 0 6px rgba(0,0,0,0.1); border-radius: 5px; background-color: rgba(220, 220, 220, 0.3);}
::-webkit-scrollbar-thumb {background-clip: padding-box; border-radius: 5px; background: var(--pointcolor); border: 2px solid transparent;} */

@media (max-width: 500px) {
    div,span,p,ul,ol,li,dd,dt,dl,h1,h2,h3,h4,h5,h6{word-break: keep-all;} /* 줄바꿈 속성 (글자기준)*/
}

/* ==============================================================
    ♥ Custom ♥
============================================================== */

/* ===== Basic ===== */
html,body{font-size:16px}
@media (max-width:1440px){html, body {font-size: 14px;}}
@media (max-width:1240px){html, body {font-size: 13px;}}
@media (max-width:1024px){html, body {font-size: 11px;}}
@media (max-width:768px) {html, body {font-size: 10px;}}

/* ========== Font size (16px 기준) ========== */
.font-12  { font-size: 0.750rem; }
.font-14  { font-size: 0.875rem; }
.font-16  { font-size: 1.000rem; }
.font-18  { font-size: 1.125rem; }
.font-20  { font-size: 1.250rem; }
.font-22  { font-size: 1.375rem; }
.font-24  { font-size: 1.500rem; }
.font-26  { font-size: 1.625rem; }
.font-28  { font-size: 1.750rem; }
.font-30  { font-size: 1.875rem; }
.font-32  { font-size: 2.000rem; }
.font-34  { font-size: 2.125rem; }
.font-36  { font-size: 2.250rem; }
.font-38  { font-size: 2.375rem; }
.font-40  { font-size: 2.500rem; }
.font-42  { font-size: 2.625rem; }
.font-44  { font-size: 2.750rem; }
.font-46  { font-size: 2.875rem; }
.font-48  { font-size: 3.000rem; }
.font-50  { font-size: 3.125rem; }
.font-55  { font-size: 3.4375rem;}
.font-60  { font-size: 3.750rem; }
.font-65  { font-size: 4.0625rem;}
.font-70  { font-size: 4.375rem; }
.font-75  { font-size: 4.6875rem;}
.font-80  { font-size: 5.000rem; }
.font-85  { font-size: 5.3125rem;}
.font-90  { font-size: 5.625rem; }
.font-95  { font-size: 5.9375rem;}
.font-100 { font-size: 6.250rem; }
.font-110 { font-size: 6.875rem; }
.font-120 { font-size: 7.500rem; }
.font-130 { font-size: 8.125rem; }
.font-140 { font-size: 8.750rem; }
.font-150 { font-size: 9.375rem; }
.font-160 { font-size: 10.000rem; }
.font-170 { font-size: 10.625rem; }
.font-180 { font-size: 11.250rem; }
.font-190 { font-size: 11.875rem; }
.font-200 { font-size: 12.500rem; }

@media (max-width:768px) {
    .font-90  {font-size: 4.625rem;}
    .font-100 {font-size: 5.250rem;}
    .font-120 {font-size: 5.500rem;}
}

/* ========== Font weight ========= */
.bold100 {font-weight:100}
.bold200 {font-weight:200}
.bold300 {font-weight:300}
.bold400 {font-weight:400}
.bold500 {font-weight:500}
.bold600 {font-weight:600}
.bold700 {font-weight:700}
.bold800 {font-weight:800}
.bold900 {font-weight:900}


/* ===== Basic color + background =====*/
.color-white          {color:#ffffff;}
.color-black          {color: #000000;}

.color-gray           {color: #808080;}
.color-dark-gray      {color: var(--dark-gray )}
.color-light-gray     {color: var(--light-gray )}

.bg-white             {background-color:#ffffff;}
.bg-black             {background-color:#000000;}

.bg-gray              {background-color: #f3f4f6}
.bg-dark-gray         {background-color: var(--dark-gray )}
.bg-light-gray        {background-color: var(--light-gray )}

/* ========== Line-hight ========== */
.lh-10 {line-height: 1.0}
.lh-12 {line-height: 1.2}
.lh-14 {line-height: 1.4}
.lh-15 {line-height: 1.5}
.lh-17 {line-height: 1.7}
.lh-20 {line-height: 2.0}

/* =============== Letter-spacing =============== */
.spacing01{letter-spacing: 0.1em}


/* =============== Display =============== */
.block { display: block; }
.inline-block { display: inline-block; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-wrap{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-between {display: flex; justify-content: space-between;}

.justify-start { justify-content:flex-start !important}
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.align-self-start{-ms-flex-item-align: start;align-self: flex-start}
.align-self-center{-ms-flex-item-align:center;align-self: center}
.align-self-end{-ms-flex-item-align:end;align-self: flex-end}

.shrink0{flex-shrink: 0}

/* ========== Section Common ==========*/
.section       {padding:200px 0;}
.section_mini  {padding:100px 0;}
.section-left  {padding-left : calc((100% - var(--layoutwidth)) / 2);width:100%;}
.section-right {padding-right: calc((100% - var(--layoutwidth)) / 2);width:100%;}

.container {max-width: var(--layoutwidth); margin:auto}
.cont_box {margin-top: 4.68rem;}

.mark     {display: inline !important;box-shadow: inset 0 -0.65em 0 rgba(var(--markcolor), 0.3);}
.shadow   {box-shadow: 0 0 7px rgb(0 0 0 / 10%);}
.line-bar{width: 100%;height: 1px;border:none}
.clearfix {*zoom:1;}
.clearfix:before,.clearfix:after {content: '';clear: both;display: block;}
.basicZindex{z-index: 1}
.object_img{height: 100%;object-fit: cover}

@media (max-width:1520px) {
    .container{width:90%;margin:auto;}
    .section-left  {padding-left : 5%}
    .section-right {padding-right: 5%}
}
@media (max-width:1440px) {
    .section       {padding:130px 0;}
    .section_mini  {padding:100px 0;}
}

@media (max-width: 990px) {
    .section       {padding:100px 0;}
    .section_mini  {padding:80px 0}
}

@media (max-width: 768px) {
    .section      {padding:80px 0;}
    .section_mini {padding:50px 0}

    .cont_box {margin-top: 3.5rem;}
}

/* ========== Text-align ========== */
.text-left   {text-align:left;}
.text-right  {text-align:right;}
.text-center {text-align:center;}

/* ========== Position & Visible ========== */
.hidden   {overflow: hidden;}
.relative {position: relative;}
.absolute {position: absolute;}
.pointerNon{pointer-events: none;}

.visible-lg, .visible-md, .visible-sm, .visible-xs,.visible-xxs {display:none !important}

@media (max-width:1440px) { .hidden-lg {display:none!important} .visible-lg {display:block!important}}
@media (max-width:1240px) { .hidden-md {display:none!important} .visible-md {display:block!important}}
@media (max-width:990px)  { .hidden-sm {display:none!important} .visible-sm {display:block!important}}
@media (max-width:768px)  { .hidden-xs {display:none!important} .visible-xs {display:block!important}}
@media (max-width:500px)  { .hidden-xxs{display:none!important} .visible-xxs{display:block!important}}

/* ===== Img & Width===== */
.img-responsive {max-width: 100%;display: block;}

.width100 {width: 100% !important;width:100%}
.width95 {width: 95%;}
.width90 {width: 90%;}
.width85 {width: 85%;}
.width80 {width: 80%;}
.width75 {width: 75%;}
.width70 {width: 70%;}
.width65 {width: 65%;}
.width60 {width: 60%;}
.width55 {width: 55%;}
.width50 {width: 50%;}
.width45 {width: 45%;}
.width40 {width: 40%;}
.width35 {width: 35%;}
.width30 {width: 30%;}
.width25 {width: 25%;}
.width20 {width: 20%;}
.width15 {width: 15%;}
.width10 {width: 10%;}

/* ===== Layout ===== */
.max1920{max-width:1920px}
.max1820{max-width:1820px}
.max1660{max-width:1660px}
.max1600{max-width:1600px}
.max1520{max-width:1520px}
.max1440{max-width:1440px}
.max1400{max-width:1400px}
.max1240{max-width:1240px}
.max1200{max-width:1200px}
.max1024{max-width:1024px}
.max990{max-width:990px}
.max768{max-width:768px}
.max600{max-width:600px}
.max500{max-width:500px}

/* ===== Margin ===== */
.no-margin {margin:0 !important}
.m-zero-auto {margin: 0 auto ;}
.m-auto {margin: auto}

.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}
.mt-auto {margin-top: auto;}
.mb-auto {margin-bottom: auto;}
.mx-auto {margin-left: auto;margin-right:auto}
.my-auto {margin-top: auto;margin-bottom:auto}

.mt-0   {margin-top: 0 !important;}
.mt-5   {margin-top: 0.3125rem;}
.mt-10  {margin-top: 0.625rem; }
.mt-15  {margin-top: 0.9375rem;}
.mt-20  {margin-top: 1.250rem; }
.mt-25  {margin-top: 1.5625rem;}
.mt-30  {margin-top: 1.875rem; }
.mt-35  {margin-top: 2.1875rem;}
.mt-40  {margin-top: 2.500rem; }
.mt-45  {margin-top: 2.8125rem;}
.mt-50  {margin-top: 3.125rem; }
.mt-60  {margin-top: 3.750rem; }
.mt-70  {margin-top: 4.375rem; }
.mt-80  {margin-top: 5.000rem; }
.mt-90  {margin-top: 5.625rem; }
.mt-100 {margin-top: 6.250rem; }

.mb-0   {margin-bottom: 0 !important;}
.mb-5   {margin-bottom: 0.3125rem;}
.mb-10  {margin-bottom: 0.625rem; }
.mb-15  {margin-bottom: 0.9375rem;}
.mb-20  {margin-bottom: 1.250rem; }
.mb-25  {margin-bottom: 1.5625rem;}
.mb-30  {margin-bottom: 1.875rem; }
.mb-35  {margin-bottom: 2.1875rem;}
.mb-40  {margin-bottom: 2.500rem; }
.mb-45  {margin-bottom: 2.8125rem;}
.mb-50  {margin-bottom: 3.125rem; }
.mb-60  {margin-bottom: 3.750rem; }
.mb-70  {margin-bottom: 4.375rem; }
.mb-80  {margin-bottom: 5.000rem; }
.mb-90  {margin-bottom: 5.625rem; }
.mb-100 {margin-bottom: 6.250rem; }

.mr-0   {margin-right: 0 !important;}
.mr-5   {margin-right: 0.3125rem;}
.mr-10  {margin-right: 0.625rem; }
.mr-15  {margin-right: 0.9375rem;}
.mr-20  {margin-right: 1.250rem; }
.mr-25  {margin-right: 1.5625rem;}
.mr-30  {margin-right: 1.875rem; }
.mr-35  {margin-right: 2.1875rem;}
.mr-40  {margin-right: 2.500rem; }
.mr-45  {margin-right: 2.8125rem;}
.mr-50  {margin-right: 3.125rem; }
.mr-60  {margin-right: 3.750rem; }
.mr-70  {margin-right: 4.375rem; }
.mr-80  {margin-right: 5.000rem; }
.mr-90  {margin-right: 5.625rem; }
.mr-100 {margin-right: 6.250rem; }

.ml-0   {margin-left: 0 !important;}
.ml-5   {margin-left: 0.3125rem;}
.ml-10  {margin-left: 0.625rem; }
.ml-15  {margin-left: 0.9375rem;}
.ml-20  {margin-left: 1.250rem; }
.ml-25  {margin-left: 1.5625rem;}
.ml-30  {margin-left: 1.875rem; }
.ml-35  {margin-left: 2.1875rem;}
.ml-40  {margin-left: 2.500rem; }
.ml-45  {margin-left: 2.8125rem;}
.ml-50  {margin-left: 3.125rem; }
.ml-60  {margin-left: 3.750rem; }
.ml-70  {margin-left: 4.375rem; }
.ml-80  {margin-left: 5.000rem; }
.ml-90  {margin-left: 5.625rem; }
.ml-100 {margin-left: 6.250rem; }

/* ===== Padding ===== */
.no-padding {padding:0!important}

.pt-0   {padding-top: 0!important;}
.pb-0   {padding-bottom: 0!important;}
.pr-0   {padding-right:0!important}
.pl-0   {padding-left:0!important}

.pt-5   {padding-top: 0.3125rem;}
.pt-10  {padding-top: 0.625rem; }
.pt-15  {padding-top: 0.9375rem;}
.pt-20  {padding-top: 1.250rem; }
.pt-25  {padding-top: 1.5625rem;}
.pt-30  {padding-top: 1.875rem; }
.pt-35  {padding-top: 2.1875rem;}
.pt-40  {padding-top: 2.500rem; }
.pt-45  {padding-top: 2.8125rem;}
.pt-50  {padding-top: 3.125rem; }
.pt-60  {padding-top: 3.750rem; }
.pt-70  {padding-top: 4.375rem; }
.pt-80  {padding-top: 5.000rem; }
.pt-90  {padding-top: 5.625rem; }
.pt-100 {padding-top: 6.250rem; }

.pb-5   {padding-bottom: 0.3125rem;}
.pb-10  {padding-bottom: 0.625rem; }
.pb-15  {padding-bottom: 0.9375rem;}
.pb-20  {padding-bottom: 1.250rem; }
.pb-25  {padding-bottom: 1.5625rem;}
.pb-30  {padding-bottom: 1.875rem; }
.pb-35  {padding-bottom: 2.1875rem;}
.pb-40  {padding-bottom: 2.500rem; }
.pb-45  {padding-bottom: 2.8125rem;}
.pb-50  {padding-bottom: 3.125rem; }
.pb-60  {padding-bottom: 3.750rem; }
.pb-70  {padding-bottom: 4.375rem; }
.pb-80  {padding-bottom: 5.000rem; }
.pb-90  {padding-bottom: 5.625rem; }
.pb-100 {padding-bottom: 6.250rem; }

.pr-5   {padding-right: 0.3125rem;}
.pr-10  {padding-right: 0.625rem; }
.pr-15  {padding-right: 0.9375rem;}
.pr-20  {padding-right: 1.250rem; }
.pr-25  {padding-right: 1.5625rem;}
.pr-30  {padding-right: 1.875rem; }
.pr-35  {padding-right: 2.1875rem;}
.pr-40  {padding-right: 2.500rem; }
.pr-45  {padding-right: 2.8125rem;}
.pr-50  {padding-right: 3.125rem; }
.pr-60  {padding-right: 3.750rem; }
.pr-70  {padding-right: 4.375rem; }
.pr-80  {padding-right: 5.000rem; }
.pr-90  {padding-right: 5.625rem; }
.pr-100 {padding-right: 6.250rem; }

.pl-5   {padding-left: 0.3125rem;}
.pl-10  {padding-left: 0.625rem; }
.pl-15  {padding-left: 0.9375rem;}
.pl-20  {padding-left: 1.250rem; }
.pl-25  {padding-left: 1.5625rem;}
.pl-30  {padding-left: 1.875rem; }
.pl-35  {padding-left: 2.1875rem;}
.pl-40  {padding-left: 2.500rem; }
.pl-45  {padding-left: 2.8125rem;}
.pl-50  {padding-left: 3.125rem; }
.pl-60  {padding-left: 3.750rem; }
.pl-70  {padding-left: 4.375rem; }
.pl-80  {padding-left: 5.000rem; }
.pl-90  {padding-left: 5.625rem; }
.pl-100 {padding-left: 6.250rem; }

/* Padding (em)*/
.pt-1em   {padding-top:    1em}
.pt-2em   {padding-top:    2em}
.pt-3em   {padding-top:    3em}
.pt-4em   {padding-top:    4em}
.pb-1em   {padding-bottom: 1em}
.pb-2em   {padding-bottom: 2em}
.pb-3em   {padding-bottom: 3em}
.pb-4em   {padding-bottom: 4em}
.pr-1em   {padding-right:  1em}
.pr-2em   {padding-right:  2em}
.pr-3em   {padding-right:  3em}
.pr-4em   {padding-right:  4em}
.pl-1em   {padding-left:   1em}
.pl-2em   {padding-left:   2em}
.pl-3em   {padding-left:   3em}
.pl-4em   {padding-left:   4em}

.pd-1em {padding: 1em}
.pd-2em {padding: 2em}
.pd-3em {padding: 3em}
.pd-4em {padding: 4em}
.px-1em {padding-left: 1em ; padding-right: 1em}
.px-2em {padding-left: 2em ; padding-right: 2em}
.px-3em {padding-left: 3em ; padding-right: 3em}
.px-4em {padding-left: 4em ; padding-right: 4em}

.py-1em {padding-top:  1em ; padding-bottom: 1em}
.py-2em {padding-top:  2em ; padding-bottom: 2em}
.py-3em {padding-top:  3em ; padding-bottom: 3em}
.py-4em {padding-top:  4em ; padding-bottom: 4em}

.px-em-point {padding-left:  0.5em ; padding-right: 0.5em}
.py-em-point {padding-top:  0.5em ; padding-bottom: 0.5em}


/* ==================================================================
    기본 box style Layout
===================================================================== */
.flexList { --x-gap:1.5rem; --y-gap:1.5rem;   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="1"]{ --count:1; }
[boxCount="2"]{ --count:2; }
[boxCount="3"]{ --count:3; }
[boxCount="4"]{ --count:4; }
[boxCount="5"]{ --count:5; }
[boxCount="6"]{ --count:6; }
[boxCount="7"]{ --count:7; }

@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-wrap3{--count:3}
    .xxs-wrap2{--count:2}
    .xxs-wrap1{--count:1}
}

/* ==================================================================
    그누보드 팝업 (기본제공)
===================================================================== */
@media(max-width:1440px){
    #hd_pop {width: 90% !important;z-index: 10000;display: flex;justify-content: space-between;flex-wrap: wrap;    align-items: flex-start;}
    .hd_pops{position: relative;width:49% !important; left: auto !important; top: 10px !important; margin-bottom: 2%;}
    .hd_pops_con{width: 100% !important;  height: auto !important;}
    .hd_pops img{width: 100% !important;}
}
@media(max-width:1024px){
    .hd_pops{width: 49% !important;}
}

@media(max-width:768px){
    .hd_pops{width: 100% !important;position: absolute;;}
}

/* ==================================================================
    게시판 관련 CSS (수정예정)
===================================================================== */
#bo_list, #bo_w, #bo_v, #bo_gall,#board_FAQ,#Membership {max-width: var(--layoutwidth) !important;width: 90% !important;margin:var(--borderMargin) !important;font-size:var(--borderFontsize)}
.more_opt{font-size:0.92rem}/* ... 옵션 관련 글자크기 */
.btn_submit{background:var(--pointcolor)}
.btn_submit:hover{background:#bfb7ac}
.register{max-width: 1800px; width: 90%; margin: 150px auto !important;}
/* 게시판 background 색 설정시 */
body.board{background: var(--boardBodyColor);}
.sub.board{background: var(--boardBodyColor);}
#bo_cate ul{text-align: center;}
#bo_v{padding: 2rem;}

/* list부분 */
.tbl_wrap table, #bo_list tbody .even td{background: none;}
.tbl_head01 tbody tr:hover td, #bo_list tbody .even:hover td{background:rgba(var(--pointcolor-rgb),.05)!important}
/* view */
#bo_v, .cmt_btn{background: var(--boardBodyColor)!important;}
/* btn */
#bo_v_top ul, .btn_bo_user li, .more_opt li button, .more_opt li a, #bo_v_share .btn{background: none;}


/* ==================================================================
    Animation 및 효과 설정부분
===================================================================== */

/* ========== Aos (fade) ========== */
[data-aos=fade-up2] { transform: translate3d(0, 30px, 0); }
[data-aos=fade-down2] { transform: translate3d(0, -30px, 0); }
[data-aos=fade-right2] { transform: translate3d(-30px, 0, 0); }
[data-aos=fade-left2] { transform: translate3d(30px, 0, 0); }
[data-aos=fade-up-right2] { transform: translate3d(-30px, 30px, 0); }
[data-aos=fade-up-left2] { transform: translate3d(30px, 30px, 0); }
[data-aos=fade-down-right2] { transform: translate3d(-30px, -30px, 0); }
[data-aos=fade-down-left2] { transform: translate3d(30px, -30px, 0); }
[data-aos=fade-in] { transform: translate3d(0, 0, 0); }
/* ========== Aos (zoom) ========== */
[data-aos*="bg-zoom-out"]{transform: scale(1.1)}
[data-aos*="bg-zoom-out"].aos-animate {transform: scale(1);}
[data-aos*="bg-zoom-in"]{transform: scale(1)}
[data-aos*="bg-zoom-in"].aos-animate {transform: scale(1.1);}

/* ========== Aos (reveal) ========== */
[data-aos="reveal-line"]{clip-path:polygon(0 0,0 0,0 100%,0 100%);}
[data-aos="reveal-line"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
[data-aos="reveal-line-revers"]{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
[data-aos="reveal-line-revers"].aos-animate {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}

[data-aos="reveal-line-half"]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%);}
[data-aos="reveal-line-half"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
[data-aos="reveal-line-half-revers"]{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}
[data-aos="reveal-line-half-revers"].aos-animate {clip-path: polygon(0 0,100% 0,100% 100%,0% 100%)}

[data-aos="reveal-top"]{clip-path:polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);}
[data-aos="reveal-top"].aos-animate {clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
[data-aos="reveal-bottom"]{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
[data-aos="reveal-bottom"].aos-animate {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
[data-aos="reveal-circle"]{clip-path: circle(0% at 50% 50%);}
[data-aos="reveal-circle"].aos-animate {clip-path:  circle(100% at 50% 50%);}
[data-aos="reveal-open"]{clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%)}
[data-aos="reveal-open"].aos-animate {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}


/* ========== Aos (animation 효과로 설정) ========== */
[data-aos="title"]{ opacity: 0;}
[data-aos="title"].aos-animate {animation: title 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
[data-aos="tit_mini"]{ opacity: 0;}
[data-aos="tit_mini"].aos-animate {animation: tit_mini 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
[data-aos="focus"]{ opacity: 0;}
[data-aos="focus"].aos-animate {animation: focus 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

/* ========== Animation ========== */
@keyframes title    {0% {letter-spacing: -0.5em;opacity: 0;} 40% {opacity: 0.6;}  100% {opacity: 1;} }
@keyframes tit_mini {0% {letter-spacing: 0.5em;opacity: 0;}  40% {opacity: 0.6;}  100% {letter-spacing: 0;opacity: 1;}}
@keyframes focus    {0% {-webkit-filter: blur(12px);filter: blur(12px);opacity: 0;}  100% {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;}}
@keyframes cycleM   {0% {transform:  translateY(0) scale(1);}    100% {transform: translateY(1.5rem) scale(0.95)}}
@keyframes rotate   {from{ transform: rotate(0); }to{ transform: rotate(360deg); }}
@keyframes scroll   {0% {transform: translate(-50%, 0);opacity: 0;} 40% {opacity: 1;}80% {transform: translate(-50%, 1.4rem);opacity: 0;}100% {opacity: 0;}}
@keyframes bigger   {0%{transform: scale(0); opacity:1;} 100%{transform: scale(5); opacity:0;}}
@keyframes bounce   {to {transform: translateX(2rem);opacity: 0;}}


#subTabBx .layout{max-width: 1410px !important;}

.pk_bg{background-color: #fdf3f3;}
.bl_bg{background-color: rgba(137,206,231,0.1);}
.txt_border{text-decoration: underline; text-underline-position : under}
.point_txt{ display: inline;
    box-shadow: inset 0 -10px 0 rgba(243, 108, 125, 0.3); }
.point_txt2{ display: inline;
        box-shadow: inset 0 -10px 0 rgba(2, 72, 117, 0.3); }
.point_txt3{ display: inline; box-shadow: inset 0 -10px 0 #386f92; }
.point_txt4{ display: inline; box-shadow: inset 0 -10px 0 rgba(53,143,201,0.3); }

.bx_chart .point_txt{ display: inline; box-shadow: inset 0 -16px 0 rgba(243, 108, 125, 0.3); }

@media(max-width:990px) {
    .bx_chart .point_txt{ display: inline; box-shadow: inset 0 -10px 0 rgba(243, 108, 125, 0.3); }
}

.go_btn {width: fit-content;}

/* define */
.define .point-bg{border-radius: 100px; position: relative; }
.define .point-bg:after{content: url(../images/sub_new/clinic001/tr_p.png); display: block; width: 25px; height: 21px; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);}
.define .flexList{border: 1px solid #cfd0d1; border-right: 0; border-left: 0;}

@media(max-width:990px) {
    .define .box.flex {justify-content: center;}
}

@media(max-width:380px) {
    .define .box.flex {flex-direction: column; gap: 1rem;}
}

.focus a {border: 2px solid #f36c7d; border-radius: 100px; position: relative; z-index: 1; transition: color 0.5s; overflow: hidden;}
.focus a::before {content: ''; position: absolute; top: 100%; right: 100%; z-index: -1; height: 800px; width: 800px; border-radius: 50%; transition: all 0.6s;     background: #f36c7d;}
.focus a:hover {color: #fff !important;}
.focus a:hover::before {top: -80px; right: -150px;}
.focus a:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.focus .t_tit{padding-left: 50px; position: relative;}
.focus .t_tit:after{content:''; display: block; width:33px; height: 2px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.focus .point-color.t_tit:after{background-color: #f36c7d;}
.focus .point-color2.t_tit:after{background-color: #024875;}

@media(max-width:990px) {
    .focus .box img {width: 100%;}
}

@media(max-width:990px) {
    .hesitate .width40,
    .hesitate .width60 {width: 100%;}
    .hesitate .width60 {margin-top: 3.25rem;}
}

.pk_bg a {border: 2px solid #f36c7d; border-radius: 100px; position: relative; z-index: 1; transition: color 0.5s; overflow: hidden;}
.pk_bg a::before {content: ''; position: absolute; top: 100%; right: 100%; z-index: -1; height: 800px; width: 800px; border-radius: 50%; transition: all 0.6s;     background: #f36c7d;}
.pk_bg a:hover {color: #fff !important;}
.pk_bg a:hover::before {top: -80px; right: -150px;}
.pk_bg a:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.bl_bg a {border: 2px solid #024875; border-radius: 100px; position: relative; z-index: 1; transition: color 0.5s; overflow: hidden;}
.bl_bg a::before {content: ''; position: absolute; top: 100%; right: 100%; z-index: -1; height: 800px; width: 800px; border-radius: 50%; transition: all 0.6s;     background: #024875;}
.bl_bg a:hover {color: #fff !important;}
.bl_bg a:hover::before {top: -80px; right: -150px;}
.bl_bg a:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

@media(max-width:990px) {
    .pk_bg a::before,
    .bl_bg a::before {display: none;}
    .pk_bg a:hover img,
    .bl_bg a:hover img {-webkit-filter: none; filter: none;}
    .pk_bg a:hover {color: #f36c7d !important;}
    .bl_bg a:hover {color: #024875 !important;}
}


.point01{background-image: url(../images/sub_new/clinic001/cont_03bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}
.point01 .point-color {color: #ffb2b3 !important;}
.point02{background-image: url(../images/sub_new/clinic001/cont07_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}

#subStore .bx{border: none;}

.check .flexList .box{box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.05); border-radius: 10px;}
.check .flexList .box p{position: relative;}
.check .flexList .box p:after{content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: #80a3ba;}

/* keypoint */
.keypoint .pk_bg{border-radius: 150px;}
.keypoint .txt .flex-wrap:nth-child(1){border: 2px solid #c8182e; border-right: 0; border-left: 0; border-bottom: 0;}
.keypoint .txt .flex-wrap:nth-child(3){border-top: 0;}
.keypoint .txt .flex-wrap{border: 1px solid #d9d9d9; border-left: 0; border-right: 0;}
.keypoint .flexList .box{position: relative;}
.keypoint .flexList .box:after{content: url(../images/sub_new/clinic001/pluse.png); width: 15px; height: 15px; display:block; position: absolute; top: 50%; left: -10%;}
.keypoint .flexList .box:nth-child(1):after{display: none;}

@media(max-width:990px) {
    .keypoint .flexList {--x-gap:2.5rem;}
    .keypoint .flexList.width60 {width: 80%;}
    .keypoint .flexList .box:after {left: -10%;}
}

@media(max-width:768px) {
    .keypoint .flexList .box:after {left: -12.5%;}
}

@media(max-width:680px) {
    .keypoint .txt > div {flex-direction: column;}
    .keypoint .txt > div .t_txt {width: 100%;}
    .keypoint .txt > div .t_txt p.pl-50 {padding-left: 1rem;}
}

@media(max-width:580px) {
    .keypoint .flexList .box:after {left: -17.5%;}
}

@media(max-width:480px) {
    .keypoint .flexList.width60 {width: 100%;}
}

@media(max-width:380px) {
    .keypoint .flexList .box:after {left: -22.5%;}
    .keypoint .flexList.pt-30,
    .keypoint .flexList.pb-30,
    .keypoint .flexList.pr-30,
    .keypoint .flexList.pl-30 {padding: 1.25rem;}

}

@media(max-width:340px) {
    .keypoint .flexList .box:after {left: -25.5%;}
}


/* verify */
.verify .width80 {width: 100%;}

.verify .f_wrap{--x-gap: 5rem;}

@media(max-width:990px) {
    .verify .box.imgbox img {width: 100%;}
}

@media(max-width:500px) {
    .verify .bx_chart {flex-direction: column;}
    .verify .bx_chart p {margin: 1rem 0; padding-right: 0 !important;}
    .verify .bx_chart img {transform: rotate(90deg) scale(0.8);}
}


.program .point-bg{border-radius: 100px; position: relative; }
.program .point-bg:after{content: url(../images/sub_new/clinic001/tr_p.png); display: block; width: 25px; height: 21px; position: absolute; bottom: -16px; left: 10%; }
.program .s-btn {display: flex; align-items: center; gap: 2rem;}

.program .swiper-button-next, .program .swiper-button-prev, .program .swiper-pagination {position: initial; margin-top: 0;}
.program .swiper-button-next, .program .swiper-button-prev {color: #ccc; transition: color 0.3s;}
.program .swiper-button-next:hover, .program .swiper-button-prev:hover {color: #222;}
.program .material-symbols-outlined {font-size: 30px;}
.program .swiper-button-prev:after,
.program .swiper-button-next:after {content: "";}
.program .swiper-pagination-current {color: #f36c7d; font-size: 1.875rem;}
.program .swiper-pagination {font-size: 1.5rem; width: 5rem;}
.program .slideWrap .imgbox img {border-radius: 10px;}
.program .slideWrap {width: 100%; display: flex; align-items: flex-end; overflow: hidden;}
.program .programSwiper01 {width: 65%; margin: 0;}
.program .programSwiper01 .swiper-slide {background: #f3f4f6;}

.program .programSwiper02 {width: 35%; margin: 0;}
.program .programSwiper02 img {filter: grayscale(1);}

.program .slideWrap h3 {position: relative;}
.program .slideWrap h3::after {position: absolute; left: -10%; top: 50%; transform: translateY(-50%); width: 33px; height: 2px; background: #f36c7d; content: "";}

@media(max-width:990px) {
    .program .programSwiper01 {width: 100%;}
    .program .programSwiper01 .swiper-slide .flex {gap: 4%;}
    .program .programSwiper01 .imgbox.width40 {width: 48%;}
    .program .programSwiper01 .txtbox.width60 {width: 48%;}
    .program .slideWrap h3::after {width: 25px;}
}

@media(max-width:768px) {
    .program .slideWrap.section-left {width: 90%; margin: 3.750rem auto 0; padding: 0;} 
    .program .programSwiper03 .swiper-slide .flex {flex-direction: column;}
    .program .programSwiper03 .swiper-slide {height: 100%;}
    .program .programSwiper03 .imgbox.width40 {width: 100%;}
    .program .programSwiper03 .txtbox.width60 {width: 100%; margin-top: 3rem;}
    .program .slideWrap h3::after {width: 20px; left: -8%;}
}

@media(max-width:580px) {
    .program .titwrap {flex-direction: column; align-items: flex-start !important;}
    .program .titwrap .s-btn {margin-top: 2rem;}
    .program .slideWrap h3::after {left: -11%;}
}

@media(max-width:480px) {
    .program .slideWrap h3::after {left: -14%;}
}

@media(max-width:380px) {
    .program .slideWrap h3::after {left: -12%;}
}


/* 엄마가 쓴 후기 _ review */
.review .flex-between a {border: 2px solid #f36c7d; border-radius: 100px; position: relative; z-index: 1; transition: color 0.5s; overflow: hidden;}
.review .flex-between a::before {content: ''; position: absolute; top: 100%; right: 100%; z-index: -1; height: 800px; width: 800px; border-radius: 50%; transition: all 0.6s;     background: #f36c7d;}
.review .flex-between a:hover {color: #fff !important;}
.review .flex-between a:hover::before {top: -80px; right: -150px;}
.review .flex-between a:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.review .reviewSwiper .imgbox {position: relative;}
.review .reviewSwiper .imgbox .hover {opacity: 0; position: absolute; padding-bottom: 50px; left: 0; width: 100%; top: 65%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); text-align: center; background: url("../images/sub/thum_hover.png") no-repeat bottom center; background-size: 40px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; z-index: 1;}
.review .reviewSwiper .swiper-slide:hover .hover {opacity: 1; top: 50%;}
.review .reviewSwiper .imgbox {position: relative;}
.review .reviewSwiper .imgbox:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(243,108,125,0.8); content: ""; transition: all 0.4s; opacity: 0;}
.review .reviewSwiper .swiper-slide:hover .imgbox:after {opacity: 1;}
.review .reviewSwiper .txt h3 {width: fit-content; padding: 0.5rem 1rem; color: #c8182e;}
.review .swiper-pagination { position: initial; margin-top: 5rem;}
.review .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #f36c7d;}
.review .swiper-button-next, .review .swiper-button-prev {color: #dfdfdf; top: 52%;}
.review .swiper-button-next {right: -3%;}
.review .swiper-button-prev {left: -3%;}
.review .swiper-button-next:after, .review .swiper-button-prev:after {font-size: 30px; font-weight: bold;}

@media(max-width:990px) {
    .review .flex-between a::before {display: none;}
    .review .flex-between a:hover {color: #f36c7d !important;}
    .review .flex-between a:hover img {-webkit-filter: none; filter: none;}
    .review .swiper-button-next {right: -4%;}
    .review .swiper-button-prev {left: -4%;}
}

@media(max-width:768px) {
    .review .swiper-button-next {right: -4.5%;}
    .review .swiper-button-prev {left: -4.5%;}
}

@media(max-width:580px) {
    .review .flex-between {flex-direction: column; align-items: flex-start !important;}
    .review .flex-between .tit {margin-bottom: 2.5rem;}
    .review .swiper-button-next, .review .swiper-button-prev {top: 59%;}
    .review .swiper-button-next {right: -5.5%;}
    .review .swiper-button-prev {left: -5.5%;}
}

@media(max-width:480px) {
    .review .swiper-button-next, .review .swiper-button-prev {display: none;}
}


.sub_t .box.img img {width: 100%;}

/* 하이키 네트워크 */
#subStore .bx > div {width: 60%;}
#subStore .bx > div.right div.flex {width: 100%;}
#subStore .bx > div.right .bx_L  {width: 50%;}
#subStore .bx > div.right .bx_R  {width: 50%;}
#subStore .bx > div.right div strong {color: #fff !important; font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem;}
#subStore .bx > div.left img {width: 100%; max-width: 450px;}
#subStore .bx > div.right div ul li {width: 25%; margin-right: 15px; margin-bottom: 15px;}
#subStore .bx > div.right div ul li a {height: 50px; border-radius: 10px; background: #848b90; border: 1px solid #024875;}
#subStore .bx > div.right div ul li a span { line-height: 50px; font-size: 20px;}

@media(max-width:1024px) {
    #subStore .bx > div {width: 100%;}
}

@media(max-width:768px) {
    #subStore .bx > div.right div.flex {flex-direction: column;}
    #subStore .bx > div.right .bx_L,
    #subStore .bx > div.right .bx_R {width: 100%;}
}

@media(max-width:480px) {
    #subStore .bx > div.right div ul li a {height: 45px;}
    #subStore .bx > div.right div ul li a span { line-height: 45px; font-size: 16px;}
    #subStore .bx > div.right .bx_R .mt-80 {margin-top: 3.125rem;}
}

.light-blue {color: #a4b3c2;}

/* 폰트변경 */
#subClinic01,
#subClinic02 {font-family: 'Pretendard-Regular' !important;}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


/* 성장클리닉 */
/* sub_t */

@media(max-width:990px){
    #subClinic02 .sub_t .flex {flex-direction: column; gap: 1.5rem;}
    #subClinic02 .sub_t .box {width: 100% !important;}
}

/* define */
#subClinic02 .define .point-bg3 {border-radius: 100px; position: relative; }
#subClinic02 .define .point-bg3:after {content: url(../images/sub_new/clinic002/tr_p.png); display: block; width: 25px; height: 21px; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);}
#subClinic02 .define .flexList {border-top: 0;}

#subClinic02 .focus a {border: 2px solid #024875; border-radius: 100px; position: relative; z-index: 1; transition: color 0.5s; overflow: hidden;}
#subClinic02 .focus a::before {content: ''; position: absolute; top: 100%; right: 100%; z-index: -1; height: 800px; width: 800px; border-radius: 50%; transition: all 0.6s;     background: #024875;}
#subClinic02 .focus a:hover {color: #fff !important;}
#subClinic02 .focus a:hover::before {top: -80px; right: -150px;}
#subClinic02 .focus a:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#subClinic02 .point01{background-image: url(../images/sub_new/clinic002/cont_03bg.jpg); background-repeat: no-repeat; background-size: cover;}

#subClinic02 .keypoint .bl_bg{border-radius: 150px;}
#subClinic02 .keypoint .txt .flex-wrap:nth-child(1){border: 2px solid #024875; border-right: 0; border-left: 0; border-bottom: 0;}
#subClinic02 .keypoint .flexList .box:after{content: url(../images/sub_new/clinic002/pluse.png); width: 15px; height: 15px; display:block; position: absolute; top: 50%; left: -10%;}
#subClinic02 .keypoint .flexList .box:nth-child(1):after {display: none;}

@media(max-width:990px) {
    #subClinic02 .keypoint .flexList .box:after {left: -10%;}
    #subClinic02 .focus a::before {display: none;}
    #subClinic02 .focus a:hover {color: #024875 !important;}
    #subClinic02 .focus a:hover img {-webkit-filter: none; filter: none;}
}

@media(max-width:768px) {
    #subClinic02 .keypoint .flexList .box:after {left: -12.5%;}
}

@media(max-width:580px) {
    #subClinic02 .keypoint .flexList .box:after {left: -17.5%;}
}

@media(max-width:380px) {
    #subClinic02 .keypoint .flexList .box:after {left: -22.5%;}

}

@media(max-width:340px) {
    #subClinic02 .keypoint .flexList .box:after {left: -25.5%;}
}

#subClinic02 .program .point-bg3{border-radius: 100px; position: relative; z-index: 1;}
#subClinic02 .program .point-bg3:after{content: url(../images/sub_new/clinic002/tr_p.png); display: block; width: 25px; height: 21px; position: absolute; bottom: -16px; left: 10%; }

#subClinic02 .program .swiper-pagination-current {color: #024875; font-size: 1.875rem;}
#subClinic02 .program .slideWrap h3::after {background: #024875;}

#subClinic02 .review .flex-between a {border: 2px solid #024875; border-radius: 100px; position: relative; z-index: 1; transition: color 0.5s; overflow: hidden;}
#subClinic02 .review .flex-between a::before {content: ''; position: absolute; top: 100%; right: 100%; z-index: -1; height: 800px; width: 800px; border-radius: 50%; transition: all 0.6s; background: #024875;}
#subClinic02 .review .flex-between a:hover {color: #fff !important;}
#subClinic02 .review .flex-between a:hover::before {top: -80px; right: -150px;}
#subClinic02 .review .flex-between a:hover img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
#subClinic02 .review .reviewSwiper .imgbox:after {background: rgba(2,72,117,0.8);}
#subClinic02 .review .reviewSwiper .txt h3 {color: #024875;}
#subClinic02 .review .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #024875;}

@media(max-width:990px) {
    #subClinic02 .review .flex-between a::before {display: none;}
    #subClinic02 .review .flex-between a:hover {color: #024875 !important;}
    #subClinic02 .review .flex-between a:hover img {-webkit-filter: none; filter: none;}
}