/* ========== 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);}

/* ============> 반응형 <============ */
@media (max-width:1440px) { .md-cont_box {margin-top: 4.68rem;}}
@media (max-width: 990px) { .sm-cont_box {margin-top: 4.68rem;}}
@media (max-width: 768px) { .md-cont_box,.sm-cont_box,.xs-cont_box {margin-top: 3.5rem;}}
@media (max-width: 500px) { .xxs-cont_box {margin-top: 3.5rem}}

.pd-half-em{padding: 0.5em;}
.pd-1em{padding: 1em;}
.pd-2em{padding: 2em;}

.px-half-em{padding-left: 0.5em; padding-right: 0.5em;}
.px-1em{padding-left: 1em; padding-right: 1em;}
.px-2em{padding-left: 2em; padding-right: 2em;}

.py-half-em{padding-top: 0.5em; padding-bottom: 0.5em;}
.py-1em{padding-top: 1em; padding-bottom: 1em;}
.py-2em{padding-top: 2em; padding-bottom: 2em;}

.min-3em{min-width:3em}
.min-4em{min-width:4em}
.min-5em{min-width:5em}
.min-6em{min-width:6em}
.min-7em{min-width:7em}
.min-8em{min-width:8em}
.min-9em{min-width:9em}

.minH-4em{min-height: 4em}
.minH-5em{min-height: 5em}
.minH-6em{min-height: 6em}

/* ============> 공통 <============ */
.absolut-position{position: absolute;top:var(--top,auto);bottom:var(--bottom,auto);left:var(--left,auto);right:var(--right,auto)}
.En_tit{letter-spacing: 0.1em;font-family: var(--pointfont),sans-serif;text-transform:capitalize;font-weight: 500;line-height: 1.7}
.point-dot{position: relative;}
.point-dot::after{position: absolute;right: 0;top: 0;line-height: 0.8;content:'\2022';transform:translate(0.35em,-0.35em)}
.tagbox{padding:0.5em 1em;border-bottom-right-radius: 1em}

.pointSec{position: relative}
.pointSec:before{background: var(--pointcolor2);position: absolute;z-index: -1;content:'';top: 0;left: 0;width:100%;height: calc(100% + 10rem);}

/* ============> background <============ */
.audiphone-bg{background:url(/images/common/audiphone-bg.jpg) no-repeat right center / cover}

/* Icon & Shape & Line */
.icon-box{display: flex;font-variation-settings: 'FILL' var(--Fill,0), 'wght' var(--wght,300), 'GRAD' var(--GRAD, 0);font-family: var(--font,'Material Symbols Rounded')}
.circleBox{border-radius: 50%; width: 8em; height: 8em; padding:1em;display: flex; align-items: center; justify-content: center;}
.checkbox-sq:before{display: inline-block;content:'select_check_box';margin-right:0.5em }
.arrowbox:before{display: inline-block;content:'arrow_right_alt';}
.plusBox:before{display: inline-block;content:'add';}


.line-bar-flex{width: 1px;align-self: stretch;display: block;background:var(--line-color,#eee);margin:var(--line-margin,0.4em 1.5em)}
.line-bar-flex[styleLayout="style01"] {--line-color:#000;--line-margin:0.1em 1em;height: 1em;}

.radiusBox{border-radius: var(--radius,0.5em)}
.borderBox{border:1px solid var(--borderColor,var(--pointcolor));}
.border-left-Box{border-left:0.5em solid var(--borderColor,var(--pointcolor));}

.numList{counter-reset: number 0;}
.numList .num:before{display: inline-block;counter-increment: number 1;content: counter(number,decimal-leading-zero);min-width:1.5em}

.numList[styleLayout="style01"] .num:before{font-family: var(--Fontstyle,var(--pointfont));margin-right:1em;font-weight: bold; color:var(--colorStyle,var(--pointcolor))}

.numList[styleLayout="style02"] .num{border:2px solid var(--pointcolor);border-radius: 0.5em;}
.numList[styleLayout="style02"] .num.width50{width:49%}
.numList[styleLayout="style02"] .num:before{font-family: var(--Fontstyle,var(--pointfont));margin-right:1em;font-weight: bold; color:var(--colorStyle,var(--pointcolor))}

.numList[styleLayout="style03"] .num{width: 2em;height: 2em;line-height: 2;display: inline-block;transform: translateY(-50%);}

.numList[sectionPage="style04"] .num{position: relative}
.numList[sectionPage="style04"] .num:before{display: block;font-size: 2em;line-height: 0.2;font-family: var(--pointfont);font-weight: 500;z-index: -1;opacity: 0.2;color: var(--pointcolor);transform: translateX(-0.5em);}


@media (max-width:768px) {
    .xs-rotate90{transform: rotate(90deg);}
    .numList[styleLayout="style02"] .num.xs-w100{width:100%}
}

/* ============> SubTop <============ */
.subTop {z-index: 2}
.subTop .subTopImg {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: -1}
.subTop .container{display: flex;justify-content: center;align-items: center;height: 50rem;}
@media (max-width:768px) {
    .subTop .container{align-items: flex-end}
}

/* ============> topContent_BG <============ */
.topContent_BG{position: relative}
.topContent_BG:before{ position: absolute;left: -5vw;top:-0.3em;z-index: -1;content: 'THE ONE \A ENT CLINIC'; white-space: pre; color: #fff; -webkit-text-stroke: 1px var(--pointcolor2); font-family: var(--pointfont); font-weight: 500; font-size: 9rem; line-height: 1; opacity: 0.4; }

@media (max-width:768px) {
    .topContent_BG:before{font-size:6.5rem}
}

/* ============> tableStyle <============ */
.table-style01 {border-collapse:collapse;border-spacing:0;vertical-align:middle}
.table-style01 th{padding:0.8em 1em;border:1px solid #fff}
.table-style01 td{padding:0.8em 1em;border:1px solid #ddd}
.table-style01 .border-white{border-color: white}

/* ============> roundChkbox <============ */
.roundChkbox .titbox{border: 2px solid var(--pointcolor); border-radius: 0.5em; padding: 0.5em 1em;}
.roundChkbox .txtbox{padding: 1em;}
.roundChkbox a.titbox:hover{background:rgba(var(--pointcolor2-rgb), 0.3);}

/* ============> chk-between <============ */
.chk-between{display: flex;justify-content: space-between}
.chk-between .txtBox{padding-left: 5%;;border-left: 2px solid #eee;display: flex}

@media (max-width:990px) {
    .chk-between.sm-direction .txtBox{justify-content: center}
    .chk-between.sm-direction .txtList{display: flex;flex-wrap:wrap}
    .chk-between.sm-direction .txtList.List03 li{min-width:33%}

    .chk-between.sm-direction .txtList li+li{padding-right:1em}
}

/* ============> lineBox <============ */
.lineBox{display: flex;border-top:0.4em solid #eee;border-bottom:0.4em solid #eee;padding:2em 5em}
.lineBox+.lineBox{border-top:none}
.lineBox dt{min-width:var(--minW,10em);flex-shrink: 0;margin-right:1em}

@media (max-width:768px) {
    .lineBox{padding:2em;flex-direction: column}
    .lineBox dd{margin-top:0.7em}
}

/* ============> tabBox (Swiper 일때 ** styleLayout="TabSwiper" **) <============ */
.TabBox{display: flex;justify-content: space-between;}
.TabBox .tabMenu{display: flex;align-self: baseline;flex-wrap: wrap;justify-content: center;position: relative;bottom: auto; right: auto; transform: none;width:auto;gap:0.5em;}
.TabBox .tabMenu .swiper-pagination-bullet{width:auto;height: auto;margin:0;display: block;background: none;color:var(--pointcolor);padding:0.5em 1.5em;border:1px solid;border-radius: 0.2em;}
.TabBox .tabMenu .swiper-pagination-bullet-active{background:var(--pointcolor);color: #fff;}
.TabBox .tabMenu .swiper-pagination-bullet:only-child{display: block !important; }

.TabBox .tabContent{margin-top:2em;padding-left:0}
.TabBox .TabCard{overflow: hidden;}
.TabBox .TabCard .swiper-wrapper{counter-reset: number 0}

.TabBox .swiper-slide{background:white;padding:2em;border-radius: 1em; height: auto !important;box-shadow: 0 0.3em 1em rgba(0,0,0,0.1)}
.TabBox .swiper-slide-active{background: var(--pointcolor); color:white}
.TabBox .swiper-slide .line-bar{height: 0.2em; background:#efefef}
.TabBox .swiper-slide-active .line-bar{background:#fff}

.TabBox .swiper-slide:after{position: absolute;font-family: var(--pointfont),sans-serif;font-size:10em;font-weight: 700;line-height: 1;bottom: 0;right: 2rem;counter-increment: number 1;content: counter(number,decimal-leading-zero);color:var(--pointcolor);opacity: 0.1;pointer-events: none}
.TabBox .swiper-slide-active:after{color:#fff}

.TabBox .mini_name{width:var(--miniW,7em);font-weight: bold;flex-shrink: 0}

.TabBox[styleLayout="pageCard"] .namePagi .swiper-pagination-bullet{color:var(--pointcolor);opacity: 1}
.TabBox[styleLayout="pageCard"] .namePagi .swiper-pagination-bullet-active{color: #fff;}
.TabBox[styleLayout="pageCard"] .swiper-slide{background: none; box-shadow: none;padding: 6px;} /* padding 0 설정했떠니 테두리 사라지는것대매 임의값 적용 */
.TabBox[styleLayout="pageCard"] .swiper-slide-active{color:inherit;}
.TabBox[styleLayout="pageCard"] .swiper-slide:after{content:''}


@media (min-width:991px) {
    .TabBox .tabMenu{display: block;flex-shrink: 0;}
    .TabBox .tabMenu .swiper-pagination-bullet+.swiper-pagination-bullet{margin-top:1em;}
    .TabBox .tabContent{padding-left:5%;margin-top:0}
}

/* ============> TabBox (Swiper 아닐때) ============> */
[styleLayout="pagiNone"].TabBox .tabContent{padding-left:0%;}

.TabBox [styleLayout="whiteCard"] .swiper-wrapper{flex-direction: column}
.TabBox [styleLayout="whiteCard"] .swiper-slide + .swiper-slide{margin-top:2em}
@media (max-width:768px) {
    /* styleLayout */
    .TabBox [styleLayout="whiteCard"] .swiper-slide{padding-bottom:7em}
    .TabBox [styleLayout="whiteCard"] .swiper-slide:after{font-size:7em}
}
/* ============> card_list ============> */
.card_list .cardBox{background:#fff;padding:2em 1em;border-radius: 0.5em;}
.card_list .cardBox[styleLayout="transparent"]{background:none;color:white;border:1px solid #fff}

/* ============> CommonSwiper ============> */
.CommonWhy .titwrap{padding-right:5%}
.CommonWhy .pagi{position: relative;bottom:auto;text-align: left}
.CommonWhy .pagi > .swiper-pagination-bullet{margin: 0;background:#fff;width:auto;height: auto; border:1px solid;border-radius: 0.2em;padding: 0.4em 0.6em;opacity: 1;color:var(--pointcolor); font-weight: 700}
.CommonWhy .pagi > .swiper-pagination-bullet-active{color: #fff; background: var(--pointcolor);}
.CommonWhy .swiper-pagination-bullet + .swiper-pagination-bullet{margin-left:0.5em}

.CommonWhy .slideContent+ .slideContent{display: none}


/* ============> Subpage별 CSS ============> */
.numList[sectionPage="Sleep-clinic"] .num{position: relative;padding-top:1em;}
.numList[sectionPage="Sleep-clinic"] .num:before{display: block;font-size: 4em; line-height: 0.2; font-family: var(--pointfont); font-weight: 500; z-index: -1; opacity: 0.2; color: var(--pointcolor);}

/* 코클리닉 */
#subPage.rhinoplasty .TabCard .Imgbox {border:1px solid #eee}
@media (max-width:768px) {
    #subPage.rhinoplasty .TabCard .Imgbox img{max-width:180px}
}

.numList[sectionPage="Nose-rhinoplasty"] .num{border:2px solid #eee;padding:0.5em 1em}
.numList[sectionPage="Nose-rhinoplasty"] .num:before{font-family: var(--Fontstyle,var(--pointfont));margin-right:1em;font-weight: 700; color:var(--colorStyle,var(--pointcolor)); display: inline-block;counter-increment: number 1;content: 'case ' counter(number,decimal-leading-zero);min-width:1.5em; flex-shrink: 0}

@media (min-width:769px) {
.numList[sectionPage="Nose-rhinoplasty"] .num.width50{width:49%}

}