:root{
    --gray:#eeeeee
}
/* ========== 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);}

/* ============> 공통 Common <============ */
.bg-gray{background: var(--gray)}
.bg-sub01{background:url(/img/sub/Common/bg-sub01.jpg) no-repeat center center / cover}

.border-box{border:1px solid var(--borderColor, #eee);border-radius: var(--radius,0)}
.round-box{border-radius: 10em; padding: 0.2em 1em;max-width:20rem;margin-left: auto;margin-right:auto}
.En_tit{text-transform: uppercase;letter-spacing: 0.2em}
.miniTit{color: var(--beige);font-family: var(--miniTit), cursive; line-height: 1;display: inline-block}


/* ============> kakaoMap <============ */
.root_daum_roughmap .wrap_controllers {display: none}
.root_daum_roughmap .wrap_btn_zoom{z-index: 1}
.root_daum_roughmap .wrap_map{height: 100% !important;}

/* ============> SubTop <============ */
.subTop {z-index: 2;}
.subTop .subTopImg {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: -1}
.subTop .container{display: flex;align-items: center;justify-content: flex-end;min-height: 350px;}

@media (min-width:991px) {
    .subTop .sub_tit{width:50%}
}

@media (max-width:500px) {
    .subTop .container {justify-content: center; text-align: center; }
}

/* ============> pointSec <============ */
.pointSec{position: relative;z-index: 1}
.pointSec:before{background:url(/img/sub/Common/pointSection.jpg) no-repeat right center / cover;position: absolute;z-index: -1;content:'';top: 0;left: 0;width:100%;height: calc(100% + 15rem);}
.pointSec .inner{padding-bottom:6rem;position: relative;}
.pointSec .pointsecBG{position: absolute;z-index: -1;right: 0;bottom: 0;max-width:65%;max-height: 80%;filter: drop-shadow(-1.2em -0.2em 0.3em rgba(0, 0, 0,0.1));}
.pointSec .pointsecBG.pointsecBGfull{max-height:none !important;height:100%;}
.pointSec_cont{position: relative;z-index: 2;box-shadow: 1rem 1rem 0.8rem rgba(0,0,0,0.1);padding:0 5%}

@media (max-width:768px) {
    .pointSec .pointsecBG {max-width:none;max-height: 65%;}
    .pointSec .pointsecBG[data-aos^=fade][data-aos^=fade].aos-animate{opacity: 0.6;}
    .pointSec .pointsecBG.Alignment-R {right:-5em} /* 오른쪽정렬 */
    .pointSec .pointsecBG.Max-w80 {max-width:80%} /* 최대넓이 설정 */
}

/* ============> table-style01 <============ */
.tb-style01{border-collapse:collapse;border-spacing:0;vertical-align:middle}
.tb-style01 th{padding:0.3em 0.6em}
.tb-style01 td{padding:0.5em;border-bottom:1px dashed #7d7d7d;}
.tb-style01 td+td{border-left:1px dashed #7d7d7d;}
.tb-style01 tr td:first-child{text-align: left;padding: 0.5em 1em;}
.tb-style01 .sq-box{padding: 0.5em; border: 0.1em solid #7d7d7d; margin-top: 0.2em;display: inline-block;}

/* ============> VS_list (비교Table) <============ */
.vs_list {display: flex;justify-content: space-between;}
.vs_list .vs_box{width: 50%;display: flex; align-items: center;justify-content: center;padding: 0.8em}
.vs_list .vs_box_ct{width:20%;padding:0.4em;flex-shrink: 0;display: flex;align-items: center;justify-content: center;color: #fff}

.vs_list + .vs_list .vs_box{border-bottom: 1px dashed #bbb;}
.vs_list:first-child .vs_box{padding:0.3em 0.5em}
.vs_list:last-child .vs_box{border-bottom:none}


@media (max-width:768px) {
    .vs_list{flex-wrap:wrap}
    .vs_list .vs_box{border-left: 1px solid #eee;}
    .vs_list + .vs_list .vs_box{border-bottom: none}
    .vs_list .vs_box_ct{width: 100%;max-width:none;order:-1;margin:0;padding: 10px}
    .vs_list:first-child .vs_box{width:50%;border-left:0}
}

/* ============> radiusList <============ */
.radiusList{justify-content: center}
.radiusList li{border:0.3em solid var(--radiusColor,var(--pointcolor));border-radius: 10em;padding:1em;display: flex;align-items: center;justify-content: center;color:var(--radiusColor,black);line-height: 1.2}

.radiusList[secStyle="style01"]{--radiusColor:var(--pointcolor2)}

/* ============> infoList <============ */
.infoList li{padding:0.5em 1.2em;display: flex;align-items: center;border-right:1px solid #7d7d7d;border-left:1px solid #7d7d7d}
.infoList li+li{border-left:none}
.infoList .iconbox{width:35%;margin-right:1em;}

@media (max-width:990px) {
    .infoList{justify-content: center;max-width:500px;margin-left:auto;margin-right:auto}
    .infoList .iconbox{max-width:4em;}

    .infoList.wrap-sm .iconbox{margin: 0 auto;padding-bottom:0.5em}
    .infoList.wrap-sm li{flex-direction: column;text-align: center}
    .infoList.wrap-sm li:nth-child(2n+1){border-left:1px solid #7d7d7d}
}


/* ============> chkList <============ */
.chkList li{position: relative;padding:1em}
.chkList li+li:before{position: absolute;content:'';width: 1px;height: calc(100% - 3.5em);left: 0;bottom: 0;background: #7d7d7d;}
.chkList .chk_icon{width:3.5em;display: inline-block;}

.chkList.reversal .chk_icon{filter: brightness(3);}
.chkList.reversal li+li:before{background: #fff;}

@media (max-width:990px) {
    .chkList {justify-content: center}
    .chkList.wrap-sm li:before{display: none}
}
@media (max-width:500px) {
    .chkList.wrap-xxs100 li{padding:1.5em 1em}
    .chkList.wrap-xxs100 li:before{background:none}
    .chkList.wrap-xxs100 li:nth-child(1)~li.box{border-top:1px dashed var(--pointcolor);margin-top:0}
    .chkList.wrap-xxs100.reversal li:nth-child(1)~li.box{border-top:1px dashed #fff;}
}

/* ============> QnAbox <============ */
.QnAbox{counter-reset: number 0;}
.QnAbox li+li{margin-top:3rem}
.QnAbox .DTbox{display: flex; align-items: center;}
.QnAbox .DDbox{display: flex;align-items: center;margin-top:0.8em;}
.QnAbox .DTbox:before,.QnAbox .DDbox:before{min-width:3em;text-align: center;border-right:1px solid;flex-shrink: 0; margin-right:1em}
.QnAbox .DTbox:before{background: var(--pointcolor); color:#fff; counter-increment: number 1; content: 'Q' counters(number,'' ) "";align-self: stretch;display: flex; align-items: center; justify-content: center;}
.QnAbox .DDbox:before{content: 'A'; color: var(--pointcolor);align-self: baseline;}
.QnAbox .DTbox .txt{padding:0.5em;padding-left:0;width:100%}
.QnAbox .DDbox .txt{font-size:0.8em}


/* ============> gradientList <============ */
.gradientList li{background: linear-gradient(to var(--gradientPosition,right), var(--gradientColor,#7b7369) ,transparent);color:var(--txtColor,white);position: relative;padding:5em 0}
.gradientList li .container{display: flex}
.gradientList li .bgImg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;object-position: var(--gradientPosition,right);z-index: -1}
.gradientList li:nth-child(even){background: linear-gradient(to var(--gradientPosition2,left), var(--gradientColor2,white) ,transparent);color:var(--txtColor2,black);}
.gradientList li:nth-child(even) .container{justify-content: flex-end}
.gradientList li:nth-child(even) .bgImg{object-position: var(--gradientPosition2,left);}
.gradientList .titwrap .num{display: inline-block;font-size: 2.8em;line-height: 0.8;}
.gradientList .titwrap .txt{padding-left:0.5em;font-weight: 400}


.gradientList[secStyle="reversal"]{ --gradientColor:white; --gradientColor2:#7b7369; --txtColor: black; --txtColor2:white; --gradientPosition:left;--gradientPosition2:right}
.gradientList[secStyle="reversal"] li {min-height: 21em;}
.gradientList[secStyle="reversal"] li .container{justify-content: flex-end}
.gradientList[secStyle="reversal"] li:nth-child(even) .container{justify-content: flex-start}


@media (max-width:500px) {
    .gradientList .titwrap {flex-direction: column;}
    .gradientList .titwrap .txt{padding-left:0;margin-top:0.5em}
    .gradientList li{background: linear-gradient(to top, var(--gradientColor,#7b7369) ,transparent)}
    .gradientList li:nth-child(even){background: linear-gradient(to top, var(--gradientColor2,white) ,transparent)}
    .gradientList li:nth-child(even) .container{text-align: right}

    /* Img position */
    .MultiAugmentation .gradientList li:nth-child(1) .bgImg{object-position: 60%}
    .MultiAugmentation .gradientList li:nth-child(2) .bgImg{object-position: 15%}
    .MultiAugmentation .gradientList li:nth-child(3) .bgImg{object-position: 85%}

    .prosthesis .gradientList li:nth-child(1) .bgImg{object-position: 85%}
    .prosthesis .gradientList li:nth-child(2) .bgImg{object-position: 15%}
    .prosthesis .gradientList li:nth-child(3) .bgImg{object-position: 95%}

    .clinic .gradientList li:nth-child(1) .bgImg{object-position: 15%}
    .clinic .gradientList li:nth-child(2) .bgImg{object-position: 80%}
    .clinic .gradientList li:nth-child(3) .bgImg{object-position: 15%}
    .clinic .gradientList li:nth-child(4) .bgImg{object-position: 95%}
}

/* ============> cirList <============ */
.cirList li{background:var(--cirListbg, var(--pointcolor2));color:white;display: flex;align-items: center;justify-content: center;padding:1em;border-radius: 50%;min-width:5em;max-width:7em;height: 7em;}

@media (max-width:768px) {
    .cirList li{min-width:auto;max-width:none;height: auto;border-radius:0;padding:0.7em 1em}
}

/* ============> symbolList <============ */
.symbolList li{background: var(--symbolcolor,var(--pointcolor));display: flex;padding:0.4em;border-radius: 10em}
.symbolList li:nth-child(2)~ li{margin-top:2%}
.symbolList .Cir_left{background:#fff;border-radius: 50%;width:8em;height: 8em;flex-shrink: 0}
.symbolList .Cir_right{padding:0.8em 1em;text-align: left}

@media (max-width:1240px) {
    .symbolList li{display: block;border-radius: 0;padding:1em;}
    .symbolList .Cir_left {width:auto;height: auto;border-radius: 0;padding:0.5em 1em}
    .symbolList .Cir_right{text-align: center}

}
@media (max-width:768px) {
    .symbolList.box_wrap2  .box.narrow{width: 100%;margin-right:0;margin-left:0;}
    .symbolList li:nth-child(1)~.box{margin-top:2%}
}

/* ============> 병원소개 <============ */
.ruleBox{display: flex;align-items: center;justify-content: space-between}
.ruleBox .imgbox{flex-shrink: 0}
.ruleBox .txtbox{width:48%}
.ruleBox .txtbox li{padding:1em;min-height: 10em;}
@media (min-width:991px) {
    .ruleBox .txtbox li{padding-right: 3em}
    .ruleBox .txtbox li+li{border-top:3px dashed #000}
    .ruleBox .txtbox:last-child li{padding-left:3em;padding-right:1em}
}
@media (max-width:990px) {
    .ruleBox {flex-wrap:wrap}
    .ruleBox .imgbox{order:-1;width:70%;}
    .ruleBox .txtbox li{text-align: center}
}
@media (max-width:500px) {
    .ruleBox .txtbox{width:100%}
    .ruleBox .txtbox li{min-height: auto;border-bottom:1px dashed}
    .ruleBox .txtbox:last-child li:last-child{border-bottom:none}
}

/* ============> 진료시간안내 <============ */
.infoSection {display: flex;}
.infoSection .mapbox .map{width: 100% !important; height: 100% !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important;}
.infoSection .time dt{width: 4.5em; display: flex; justify-content: space-between; margin-right: 1em;font-weight: 500}

.directions dl{display: flex}
.directions .iconbox{align-self: baseline;width:5em;flex-shrink: 0}
.directions .txtbox{padding-top:1em;padding-left:0.5em;width:100%}
.directions .Busnumber{letter-spacing: -0.04em}
.directions .tag{display: inline-block; background: black; color: white; border-radius: 3em; padding: 0.2em 0.8em; align-self: baseline; line-height: 1;margin-right:0.5em;flex-shrink: 0;font-weight: 500}

@media (max-width:768px) {
    .infoSection{flex-direction: column;text-align: center}
    .infoSection .mapbox {width:100%;min-height: 300px;height: 55vw;}
    .infoSection .time{text-align: center;justify-content: center}
}
@media (max-width:500px) {
    .directions dl{display: block;text-align: center;}
    .directions .Busnumber li{display: block}
    .directions .Busnumber li+li{margin-top:1em}
    .directions .tag{margin-right:0;margin-bottom:4px}
}
/* ============> 비급여항목 <============ */
.benefit-table {overflow-x: auto;padding-bottom:8px}
.benefit-table::-webkit-scrollbar{-webkit-appearance:none;height: 6px;}/* 아이폰 오류로 재설정 */

.benefit-table table{border-collapse:collapse;border-spacing:0;vertical-align:middle;min-width:650px}
.benefit-table th{padding:0.5em 1em;border:1px solid #ccc;background: gray;color:white;font-weight: bold;font-size:1.2em}
.benefit-table td{padding:0.3em 1em;border:1px solid #ccc}
.benefit-table .point-td td{background:#eee;font-weight: 500}


/* ========================================
==>  SubPage별 background 설정 <===
    (imageSection으로 설정)
========================================*/
.PenisAugmentation .imageSection{padding:4em;background:linear-gradient(to right, #404041, transparent 60%),url(/img/sub/Man/PenisAugmentation/imageSection.jpg) no-repeat right center / cover;}
.Ejaculation .imageSection{background:url(/img/sub/Man/Ejaculation/imageSection.jpg) no-repeat center center / cover}
.curvature .imageSection,
.posthetomy .imageSection {padding:4em;padding-bottom:0;background:url(/img/sub/OtherSurgeries/curvature/imageSection.jpg) no-repeat center center / cover}

@media (max-width:768px) {
    .curvature .imageSection,
    .PenisAugmentation .imageSection,
    .posthetomy .imageSection {padding-left:2em;padding-right:2em}
}

/* ========================================
==>  SubPage 섹션별 개별추가 css 설정 <===
========================================*/
[section-name="vasectomy"].gray-checknote{background:url(/img/sub/OtherSurgeries/vasectomy/checknote_bg.jpg) no-repeat left center / cover !important}

[section-name="Absolute_pic"] .radiusList{margin-bottom:3rem}
[section-name="Absolute_pic"] .radiusList li{border: none;margin-top: 2%;}

@media (min-width:1241px) {
    [section-name="Absolute_pic"] .radiusList{position: absolute; left: -1em; top: 1em; width: calc(100% + 2em); margin: auto;justify-content: space-between;z-index: 2}
    [section-name="Absolute_pic"] .radiusList li{max-width:36%;}
    [section-name="Absolute_pic"] .radiusList li:nth-child(1),
    [section-name="Absolute_pic"] .radiusList li:nth-child(5){margin-left:1em}
    [section-name="Absolute_pic"] .radiusList li:nth-child(2),
    [section-name="Absolute_pic"] .radiusList li:nth-child(6){margin-right:1em}
    [section-name="Absolute_pic"] img{filter: drop-shadow(-1.4em -0.2em 0.2em rgba(0, 0, 0,0.2))}

    .MaleHormone .radiusList[secStyle="style01"] li,
    .cystitis .radiusList[secStyle="style01"] li,
    .prostatitis .radiusList[secStyle="style01"] li{min-height: 5em}/* 남성갱년기 , 방광염, 전립선염*/
}