/*
Theme Name: 에코이비인후과
Author: Jeymedi
Author URI: http://jeymedidesign.dothome.co.kr
Description: 에코이비인후과 웹사이트 테마
Version: 1.0.0
*/

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LAYOUT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body { overflow-x:hidden; }
.inner {
    max-width: var(--inner);
    margin: 0 auto;
    position: relative;
}
.inner.wide {
    max-width: 100vw;
    padding-bottom: 0;
}


/* header */
header.header {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 99;
}
header.header > .inner {
    max-width: 100vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px 12vw;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
header.header > .inner div.logo {
    position: relative;
}
header.header > .inner div.logo img {
    display: block;
    width: 360px;
}

header.header nav {
    width: 60%;
}
header.header nav ul.menu {
    /*  메뉴정렬  */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    grid-gap: 2.0em;
}
header.header nav ul.menu li.menu-item-has-children {
    /*  메인메뉴  */
    position: relative;
    padding: 20px 0;
    text-align: center;
    cursor: pointer;
}
header.header nav ul.menu li.menu-item-has-children > a {
    font-size: 1.1em;
    font-weight: 600;
    width: inherit;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-gap: 0.25em;
}
header.header nav ul.menu li.menu-item-has-children.current-menu-parent > a {
}


header.header nav ul.menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0.8em; height: 0.8em;
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    background-image: url('./img/arrow-menutoggle.svg');
    filter: grayscale(1);
}
header.header nav ul.menu li.menu-item-has-children:hover > a::after {
    transform: scale(-1, -1);
    filter: grayscale(0);
}



/* sub */
header.header nav ul.sub-menu {
    border-top: 2px solid var(--secondary);
    position: absolute;
    width: 14em;
    background-color: #fff;
/*    background-color: var(--ivory);*/
/*    top: 100%;*/
    top: 5em;
    left: calc(50% - 7em);
/*    left: -1.5em;*/
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
    box-shadow: 2px 2px 15px -3px rgba(0,0,0,.1);
    overflow: hidden;
    visibility: hidden;
}
header.header nav ul.sub-menu.on {
    visibility: visible;
}

header.header nav ul.sub-menu li a {
    display: block;
    line-height: 1.4;
    opacity: 0.9;
    padding: 0.75em 1.5em;
    color: #60645d;
}
header.header nav ul.sub-menu li:first-child a { padding-top: 0.8em; }
header.header nav ul.sub-menu li:last-child a { padding-bottom: 0.8em; }

header.header nav ul.sub-menu li.current-menu-item a,
header.header nav ul.sub-menu li:hover a {
    color: #7b9b64;
    font-weight: 500;
    background-color: #f6f4f2;
/*    background-color: #fff;*/
}










/* 메뉴 버튼  */
#menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    transition: all ease 0.5s;
    cursor: pointer;
/*    display: none;*/
}
#menu-btn > div {
    display: flex;
    height: 28px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all ease 0.5s;
}
#menu-btn span {
    display: inline-block;
    width: 40px;
    height: 2px;
    border-radius: 3px;
    background-color: #666;
    transition: all ease 0.5s;
}
#menu-btn.on span:nth-child(1) { transform: rotate(45deg) translateY(18px);}
#menu-btn.on span:nth-child(2) { opacity:0 }
#menu-btn.on span:nth-child(3) { transform: rotate(-45deg) translateY(-18px); }



/* 모바일메뉴 */
#mobile-menu {
    visibility: hidden;
    position: fixed;
    top: 108px;
/*    right: -100vw;*/
    right: 0;
    opacity: 0;
    max-width: 100vw;
    width: 100vw;
    height: calc(100vh - 108px);
    z-index: 9;
    font-size: 1.0em;
    backdrop-filter: blur(10px);
    transition: all ease 0.4s;
}
#mobile-menu.on {
    visibility: visible;
    opacity: 1;
}
/* 닫기버튼 */
#mobile-menu > .close-area {
    width: 100vw;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: -1;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

#mobile-menu > .menu-area {
    width: 30vw;
    height: 100%;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    overscroll-behavior:none;
    background-color: #fff;
    padding: 15px 40px 40px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}
#mobile-menu ul.menu li.menu-item-has-children { display:block }
#mobile-menu ul.menu li.menu-item-has-children > a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 0.5em 1em;
    font-size: 1.4em;
    font-weight: 500;
}
#mobile-menu ul.menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0.8em; height: 0.8em;
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    background-image: url('./img/arrow-menutoggle.svg');
    filter: grayscale(1);
}
#mobile-menu ul.menu li.menu-item-has-children.on > a,
#mobile-menu ul.menu li.menu-item-has-children.current-menu-parent > a { font-weight: 700; }
#mobile-menu ul.menu li.menu-item-has-children.on > a::after,
#mobile-menu ul.menu li.menu-item-has-children.current-menu-parent > a::after {
    transform: scale(-1, -1);
    filter: grayscale(0);
}

#mobile-menu ul.menu li.menu-item-has-children ul.sub-menu {
    display: flex;
    flex-direction: column;
    width:100%;
    max-height: 0;
    overflow-y: hidden;
    background-color: var(--ivory);
    transition: max-height ease 0.5s;
}
#mobile-menu ul.menu li.menu-item-has-children.on ul.sub-menu {
    display: flex;
    height: fit-content;
    border-top: 1px solid var(--secondary);
    max-height: 50vh;
}
#mobile-menu ul.menu li.menu-item-has-children ul.sub-menu li:first-child { margin-top:15px }
#mobile-menu ul.menu li.menu-item-has-children ul.sub-menu li:last-child { margin-bottom:15px }
#mobile-menu ul.menu li.menu-item-has-children ul.sub-menu li a {
    display: block;
    width: 100%;
    padding:0.5em 25px;
    color: #60645d;
}
#mobile-menu ul.menu li.menu-item-has-children ul.sub-menu li.current-menu-item a {
    color: var(--dark);
    font-weight: 600;
}







/* 퀵메뉴 */
#quickmenu {
    position: fixed;
    right: 2vw; bottom: 5vh;
    z-index: 99;
    display: flex;
    flex-direction: column;
}
#quickmenu a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--primary);
    transition: background ease 0.4s;
}
#quickmenu a:hover {
    background-color: var(--secondary);
}
#quickmenu a img { width:32px }
#quickmenu a span {
    font-size: 0.8em;
}
#quickmenu a.top {
    background-color: #111;
    margin: 20px auto 0;
    cursor: pointer;
}
#quickmenu a.top span {
    font-weight: 600;
    letter-spacing: 0;
    margin-top: 5px;
    color: #fff;
}
#quickmenu a.top img { width:15px }






/* footer  */
footer {
    background-color: var(--graysh);
}

footer > .inner {
    padding: 150px 0;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    justify-content: center;
    grid-gap: 0;
}
footer p {
    letter-spacing: 0;
    line-height: 1.8;
}
footer p b {
    display: inline-block;
    margin-right: 1em;
    font-weight: 500;
}
footer p span + b {
    margin-left: 1em;
}

footer img {
    display: block;
    margin: 0 auto;
    width: 300px;
}

footer ul.menu {
    display: flex;
    flex-direction: row;
    margin: 0 auto 2em;
    transform: translateX(-1.5em);
}

footer ul.menu > li {
    line-height: 1.0;
}
footer ul.menu > li > a {
    font-weight: 500;
    padding: 0 1.5em;
    line-height: 1.0;
}
footer ul.menu > li + li {
    border-left: 1.5px solid #ccc;
}
footer p.copyright {
    font-size: 0.9em;
    margin-top: 2em;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    common elements
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section .inner {
    padding: 160px 0;
}
section span.eng.uppercase {
    display: block;
    letter-spacing: 0.4em;
    font-weight: 500;
    font-size: 0.9em;
}
section .section-title {
    margin-top: 0.2em;
    font-size: 2.5em;
    font-weight: 500;
}
section .section-title b {
    font-weight: 700;
}
section .section-desc {
    font-size: 1.1em;
    letter-spacing: -0.05em;
    margin-top: 1.5em;
}
section a.btn.btn-rounded { border-radius:3em }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

section.main-visual {
    background-size: cover;
    background-image: url('./img/mainvisual-forest2.webp');
    background-position: top 10% right;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
section.main-visual .inner.flex {
    height: 100vh;
    grid-gap: 30px;
}
section.main-visual span {
    display: block;
    margin-top: -2em;
    color: rgba(255,255,255,.3);
    opacity: 0;
    animation-fill-mode: forwards;
}
section.main-visual h5 {
    font-family: var(--p);
    font-size: 1.6em;
    letter-spacing: -0.04em;
    font-weight: 300;
    text-shadow: 0 0 2px #fff;
    opacity: 0;
    animation-fill-mode: forwards;
}
section.main-visual h2 {
    font-family: var(--p);
    font-size: 3.2em;
    letter-spacing: -0.04em;
    line-height: 1.35;
    font-weight: 200;
    text-align: center;
    text-shadow: 0 0 2px #fff, 0 0 0.1em rgba(0,0,0,.1);
    opacity: 0;
    animation-fill-mode: forwards;
}
section.main-visual h2 b { font-weight:600 }


/* 메인 - 특별함 */
section.main-special {
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-image: url('./img/gradient-white-ivory-repeatx.png');
}
section.main-special .special-swiper {
    width: 90%;
    margin: 80px auto 0;
    position: relative;
}
section.main-special .special-swiper .swiper-slide {
    position: relative;
}
section.main-special .special-swiper span.bg {
    color: var(--primary);
    position: absolute;
    right: 0;
    top: 0;
    font-size: 5em;
    font-weight: 700;
    line-height: 0;
    opacity: 0.3;
}
section.main-special .special-swiper .grid.half {
    grid-gap: 100px;
    align-items: flex-start;
}

section.main-special .special-swiper .grid.half .img {
    height: 50vh;
    background-image: url('./img/mainvisual-forest.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--primary);
    border-radius: 150px;
    border-bottom-left-radius: 0;
    overflow: hidden;
    box-shadow: 6px 6px 30px -15px rgba(30,30,30,.2);
}
section.main-special .special-swiper .grid.half .txt {
    display: flex;
    flex-direction: column;
    grid-gap: 30px;
    padding: 30px 0 0;
}
section.main-special .special-swiper .grid.half .txt span {
    display: inline-block;
    width: fit-content;
    font-size: 1.3em;
    padding: 0.5em 2em;
    border-radius: 3em;
    border-bottom-left-radius: 0;
}
section.main-special .special-swiper .grid.half .txt strong {
    font-size: 1.5em;
    line-height: 1.3;
}
section.main-special .special-swiper .control {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    grid-gap: 30px;
    position: absolute;
    width: fit-content;
    left: calc(50% + 40px);
    bottom: 30px;
    z-index: 1;
}
section.main-special .special-swiper .control > div {
    cursor: pointer;
    width: 80px;
    aspect-ratio: 2 / 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 90%;
    transition: opacity ease 0.3s;
}
section.main-special .special-swiper .control > div.button-prev {
    background-image: url('./img/special-prev.svg');
}
section.main-special .special-swiper .control > div.button-next {
    background-image: url('./img/special-next.svg');
}
section.main-special .special-swiper .control > div.swiper-button-disabled { opacity:0.5 }




/* 메인 - 중점진료  */
section.main-core {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('./img/main-core-bg.webp');
}
section.main-core .capsule-wrap {
    width: 86%;
    margin: 80px auto 0;
    grid-gap: 40px;
    display: flex;
    flex-direction: row;
}
section.main-core .capsule:nth-child(1) { --point : var(--pink) }
section.main-core .capsule:nth-child(2) { --point : var(--primary) }
section.main-core .capsule:nth-child(3) { --point : var(--sky) }

section.main-core .capsule {
    width: 30%;
    aspect-ratio: 1 / 1.5;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #444;
    border-radius: 500px;
    box-shadow: 0 0 30px 0 transparent;
    transition: all ease 0.5s;
}
section.main-core .capsule:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 30px -5px var(--point);
    background-position: top center;
}
section.main-core .capsule > img {
    display: block;
    transform: translateY(0);
    transition: all ease 0.45s;
}
section.main-core .capsule:hover > img {
    transform: translateY(0);
}
section.main-core .capsule > h5 {
    font-size: 2em;
    font-weight: 600;
    height: 2em;
}


section.main-core .capsule .flex.row {
    flex-wrap: wrap;
    grid-gap: 1em;
    justify-content: center;
    height: 2em;
}
section.main-core .capsule .flex.row p { color:#fff }
section.main-core .capsule .flex.row p::before {
    content: '# ';
    color: var(--point);
}
section.main-core .capsule a.btn {
    background-color: #fff;
    font-weight: 500;
    font-size: 1.1em;
    padding: 0.75em 3em;
    position: relative;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all ease 0.4s;
}
section.main-core .capsule:hover a.btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(15px);
}

section.main-core .capsule a.btn::after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    position: absolute;
    right: 2.4em;
    top: calc(50% - 0.75em);
    z-index: -1;
    background-color: var(--point);
    transition: all ease 0.4s;
}
section.main-core .capsule a.btn:hover {
    background-color: var(--point);
    border-radius: 3em;
}
section.main-core .capsule a.btn:hover::after {
    background-color: #fff;
    transform: scale(2.0);
    opacity: 0;
    transition: all ease 0.4s;
}
section.main-core .capsule a.btn img {
    transform: translateX(0);
    transition: all ease 0.4s;
}
section.main-core .capsule a.btn:hover img {
    transform: translateX(10px);
}





/* 메인 - 의료진  */
section.main-doctor {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('./img/main-doctor-bg.png');
}
section.main-doctor div.grid.half {
    margin: 80px auto 0;
}
section.main-doctor div.grid.half > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 30px;
}
section.main-doctor div.grid.half > div:nth-child(1) h3 {
    color: #fff;
    font-size: 3em;
}
section.main-doctor div.grid.half > div:nth-child(1) h3 span {
    display: block;
    font-size: 0.8em;
}
section.main-doctor div.grid.half > div:nth-child(1) h3 small {
    color: inherit;
    font-weight: 400;
}
section.main-doctor div.grid.half a.btn {
    font-weight: 600;
    font-size: 1.1em;
    padding: 0.8em 3em;
    color:#333;
    border: 2px solid var(--primary);
    transition: all ease 0.3s;
}
section.main-doctor div.grid.half a.btn:hover {
    background-color: transparent;
    color: var(--primary);
}
section.main-doctor div.grid.half > div ul.career + ul.career {
    margin-top: 30px;
}
section.main-doctor div.grid.half > div ul.career li {
    color: #fff;
    padding: 0.25em 0;
    letter-spacing: -0.025em;
}
section.main-doctor div.grid.half > div ul.career li::before {
    content: '\00b7';
    margin-right: 0.45em;
}
section.main-doctor div.grid.half > div:nth-child(2) {
    background-image: url('./img/symbol-white-opacity.svg');
    background-repeat: no-repeat;
    background-position: right 5vw bottom;
}
/*  메인 원장님 이미지  */
section.main-doctor div.grid.half div.doctor-img {
    border: 0;
    border-radius: 2em;
    box-shadow: 0 0 30px rgba(255,255,255,.3);
    width: 50%;
    overflow: hidden;
    background-image: url(./img/doctor.png);
    background-size: 110%;
    aspect-ratio: 1 / 0.8;
    background-position: top 30%center;
}



/* 메인 - 세심한진료(카드)  */
section.main-card {}
section.main-card .grid.quater {
    margin: 80px auto 0;
    grid-gap: 1px;
}
section.main-card .grid.quater > div {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    padding: 30px;
    width: inherit;
    aspect-ratio: 1 / 1.25;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
section.main-card .grid.quater > div::before {
    content: '';
    display: block;
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-color: rgba(0, 0, 0,.4);
    z-index: 0;
    transition: all ease 0.4s;
}
section.main-card .grid.quater > div:hover::before {
    background-color: rgba(190, 210, 167,.5);
    backdrop-filter: blur(5px);
}
section.main-card .grid.quater > div * {
    position: relative;
    z-index: 1;
}
section.main-card .grid.quater > div strong {
    padding-top: 2em;
    transform: translateY(1.5em);
    font-size: 2em;
    text-shadow:  0 0 1px rgba(255,255,255,.5), 1px 1px 10px rgba(79,86,73,.5), 0 0 5px rgba(10,10,10,.25);
    transition: all ease 0.4s;
}
section.main-card .grid.quater > div:hover strong {
    transform: translateY(2em);
}
section.main-card .grid.quater > div p {
    font-size: 1.1em;
    line-height: 1.4;
    font-weight: 500;
    text-shadow:  0 0 1px rgba(255,255,255,.5), 1px 1px 10px rgba(79,86,73,.5), 0 0 5px rgba(10,10,10,.25);

    transform: translateY(3em);
    visibility: visible;
    opacity: 1;
    transition: all ease 0.2s;
}
section.main-card .grid.quater > div:hover p {
    visibility: hidden;
    opacity: 0;
}
section.main-card .grid.quater > div a.btn {
    width: 66%;
    margin: 0 auto;
    padding: 0.75em 2em;
    font-family: "Fraunces", serif;
    text-transform: uppercase;
    background-image: url('./img/arrow-viewmore.svg');
    background-repeat: no-repeat;
    background-position: right 1.5em center;
    box-shadow: 2px 2px 10px rgba(79,86,73,.25);
    border:2px solid #fff;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4em);
    transition: all ease 0.4s;
}
section.main-card .grid.quater > div:hover a.btn {
    visibility: visible;
    opacity: 1;
    transform: translateY(0em);
    background-position: right 1.5em center;
}
section.main-card .grid.quater > div a.btn:hover {
    box-shadow: 0 0 15px rgba(255,255,255,.9);
}







/* 메인 - 둘러보기  */
section.main-preview {}
section.main-preview > .inner {
    padding-bottom: 80px;
}
section.main-preview .bg {
    position: relative;
}
section.main-preview .bg .back {
    width: 100vw; height: 100vh;
    position: absolute;
    top: 0; left: 0;
    background-image: url('./img/main-preview-bg.png');
/*    border: 1px solid red;*/
}

section.main-preview .bg .inner.grid {
    padding: 0;
}
section.main-preview .bg .inner.grid div.txt {
    padding: 150px 0;
     height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 60px;
}
section.main-preview .bg .inner.grid div.txt h3 {
    line-height: 1.3;
    font-weight: 400;
    font-size: 3em;
}
section.main-preview .bg .inner.grid div.txt h3 b {
    font-weight: 800;
}
section.main-preview .bg .inner.grid div.txt p {
    font-weight: 500;
    font-size: 1.2em;
}
section.main-preview .bg .inner.grid div.txt a.btn {
    border: 2px solid #444;
    width: fit-content;
    padding: 0.75em 3.6em 0.75em 2em;
    font-family: "Fraunces", serif;
    text-transform: uppercase;
    background-image: url('./img/arrow-viewmore.svg');
    background-repeat: no-repeat;
    background-position: right 1.5em center;
    cursor: pointer;
    transition: all ease 0.4s;
}
section.main-preview .bg .inner.grid div.txt a.btn:hover {
    background-color: #444;
    color: #fff;
    padding: 0.75em 2.8em;
}
section.main-preview .bg .inner.grid > div.img .img-wrap {
    display: grid;
    grid-gap: 50px;
    padding: 100px 0;
}
section.main-preview .bg .inner.grid > div.img .img-wrap > div {
    width: 450px; aspect-ratio: 3 / 2;
    border-radius: 40px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: 10px 10px 30px -10px rgba(0,0,0,.1);
}
section.main-preview .bg .inner.grid > div.img .img-wrap > div:nth-child(even) {
    margin-left: auto;
}



















/* 메인 - 되겠습니다  */
section.main-promise {
    background-color: #AAABA4;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    background-size: 100% auto;
    background-image: url('./img/main-promise-bg.png');
}




/* 메인 - 오시는길 */
section.main-locate {}
section.main-locate > .inner > .grid.half {
    width: 90%;
    background-repeat: no-repeat;
    margin: 80px auto 0;
    align-items: center;
}
section.main-locate > .inner > .grid.half .info {
    display: flex;
    flex-direction: column;
    grid-gap: 50px;
    background-image: url('./img/symbol-light.svg');
    background-repeat: no-repeat;
    background-position: right -10% bottom 40%;
}
section.main-locate > .inner > .grid.half .info .icon-txt {
    display: grid;
    grid-template-columns: 7em auto;
    grid-gap: 3em;
    align-items: center;
}
section.main-locate > .inner > .grid.half .info .icon-txt .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 1em;
}
section.main-locate > .inner > .grid.half .info .icon-txt .icon img {
    width: 3.0em;
    height: 3.0em;
}
section.main-locate > .inner > .grid.half .info .icon-txt .icon strong {
    font-size: 1.2em;
}
section.main-locate > .inner > .grid.half .info .icon-txt .txt {
    font-size: 1.1em;
}
section.main-locate > .inner > .grid.half .info .icon-txt .txt p {
    font-weight: 600;
    display: grid;
    grid-template-columns: 3em auto;
    align-items: center;
    line-height: 1.0;
}
section.main-locate > .inner > .grid.half .info .icon-txt .txt p + p {
    margin-top: 1em;
}
section.main-locate > .inner > .grid.half .info .icon-txt .txt p strong {
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: 0;
}
section.main-locate > .inner > .grid.half .info > .txt.flex {
    grid-gap: 1em;
    font-size: 1.2em;
    padding-left: 1.5em;
}
section.main-locate > .inner > .grid.half .info > .txt.flex p {
    font-weight: 500;
}
section.main-locate > .inner > .grid.half .info > .txt.flex p b {
    font-weight: 800;
}



section.main-locate > .inner > .grid.half .map {
    width:100%;
    aspect-ratio: 1 / 0.8;
    border-radius: 40px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    font-weight: 500;
    font-size: 2em;
    display: flex;
    color: #aaaba488;
    align-items: center; justify-content: center;
}

section.main-locate > .inner > .flex.row {
    margin: 60px auto 0;
    grid-gap: 30px;
}
section.main-locate > .inner > .flex.row a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.9em 2em;
    font-size: 1.1em;
    font-weight: 500;
    width: 15em;
    border: 2px solid var(--secondary);
    box-shadow: 0 0 15px -5px rgba(127, 140, 112, .0);
    transition: all ease 0.4s;
}
section.main-locate > .inner > .flex.row a:hover {
    border-color: var(--dark);
    transform: translateY(-10px);
    box-shadow: 0 10px 15px 0 rgba(127, 140, 112, .2);
}
section.main-locate > .inner > .flex.row a::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-image: url('./img/arrow-menutoggle.svg');
    transform: rotate(270deg);
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: center;
    transition: all ease 0.4s;
}
section.main-locate > .inner > .flex.row a:hover::after {
    filter: grayscale(1) contrast(1.5) brightness(0.5);
    transform: rotate(270deg) translateY(5px);
}
section.main-locate > .inner > .flex.row a img {
    width: 1em; aspect-ratio: 1 / 1;
    margin-right: -2em;
}











/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB TEMPLATE LAYOUT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 서브 헤더 */
section.sub-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-color: var(--primary);
    background-image: url('./img/sub-header-about.png');
    --eng : var(--primary);
    --big : #fff
}
section.sub-header > .inner {
    padding: 200px 0 180px;
}
section.sub-header.light {
    --eng : rgba(30,30,30,.4);
    --big : rgba(30,30,30,.8);
}
section.sub .title-zone .page-title-eng,
section.sub-header .page-title-eng {
    color: var(--eng);
    display: block;
    letter-spacing: 0.15em;
    text-transform: capitalize;
    font-size: 0.75em;
    text-align: center;
    font-weight: 500;
    margin-bottom: 0.5em;
}
section.sub .title-zone .page-title,
section.sub-header .page-title {
    color: var(--big);
    text-align: center;
    font-size: 2.5em;
    letter-spacing: -0.025em;
    font-weight: 600;
}
section.sub .title-zone .page-title i { font-weight:400 }
section.sub .title-zone .page-title b { font-weight:700 }

section.sub .title-zone div.p-wrap { max-width: 1000px }
section.sub .title-zone div.p-wrap.line {
    border: 1px solid var(--primary);
    border-left: 0;
    border-right: 0;
    padding: 0.75em 1em;
}

section.sub p {
    color: var(--dark);
    font-size: 1.05em;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 1.8;
}


/* 서브 브레드크럼 */
section.sub-breadcrumb {
    background-color: #cfe0bd;
}
section.sub-breadcrumb nav.breadcrumb > ul {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 0;
}
section.sub-breadcrumb nav.breadcrumb > ul > li {
    font-size: 1.1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #60645d;
}
section.sub-breadcrumb nav.breadcrumb > ul li.home {
    border-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('./img/icon-breadcrumb-home.svg');
    background-repeat: no-repeat;
    background-size: auto 0.8em;
    background-position: left center;
    padding: 1.5em;
    padding-left: 1.25em ;
}
section.sub-breadcrumb nav.breadcrumb ul li.has-children {
    position: relative;
    padding: 0 1.5em;
    background-image: url('./img/icon-breadcrumb-arrow.svg');
    background-repeat: no-repeat;
    background-size: auto 0.75em;
    background-position: center left;
}

section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu {
    min-width: 230px;
    display: none;
    position: absolute;
    max-width: inherit;
    width: fit-content;
    top: 100%;
    left: 0;
    padding: 0;
    background-color:#fff;
    border-radius: 3px;
    box-shadow: 5px 5px 20px rgba(190, 196, 185, .3);
    z-index: 999;
}
section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li {
    white-space: nowrap;
    padding: 0.75em 1.5em 0.75em 2em;
    font-size: 0.9em;
    transition: padding ease 0.3s;
}
section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li a {
    display: block;
    color: #60645d;
    font-weight:400;
}

section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li.current,
section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li:hover {
    background-color: #f6f4f2;}

section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li.current a,
section.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li:hover a {
    color: #7b9b64;
    font-weight: 500;
}
section.sub-breadcrumb nav.breadcrumb ul li.has-children:hover > ul.sub-breadcrumb-menu { display: block; }

section.sub-breadcrumb nav.breadcrumb ul li.home + li.has-children ul.sub-breadcrumb-menu li:nth-last-child(1) { display:none; }


/* 서브 인트로(타이틀부분) */
section.sub-intro {}
section.sub-intro > .inner { padding: 150px 0 80px }


/* 서브 제목 / 설명 공통 레이아웃 */
section.sub .title-zone {
    --eng : var(--primary);
    --big : var(--dark)
}
.dark {
    --eng : var(--primary);
    --big : #fff;
    --dark : #fff;
    background-color: #333;
}

section.sub .title-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
section.sub .title-zone div.p-wrap {
    margin-top: 2em;
}


section.sub .intro-zone {
    width: 88%;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
    margin: 40px auto;
}
section.sub .intro-zone.single { grid-template-columns: 1fr; }
section.sub .intro-zone.double { grid-template-columns: 1fr 1fr }

section.sub .intro-zone img.page-img {
    display: inline-block;
    margin: 0 auto;
    max-width: 600px
}
section.sub div.p-wrap p { text-align:center; }
section.sub div.p-wrap.txt-left p { text-align:left; }
section.sub div.p-wrap.txt-center p { text-align:center; }
section.sub div.p-wrap.txt-right p { text-align:right; }
section.sub div.p-wrap p + p { margin-top:1.5em }




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB PAGE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 소아 발생원인 */
section.sub .kids-cause-group {
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px;
    width: 90%;
}
section.sub .kids-cause-group > div {}
section.sub .kids-cause-group > div .img {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--primary);
    border-radius: 1.5em;
}
section.sub .kids-cause-group > div span.vertical-line {
    display: block;
    width: 2px;
    height: 60px;
    margin: 20px auto;
    background-color: var(--primary);
}



/* tab-slide */
section.sub.tab-slide > .inner {
    max-width: 100vw;
}
section.sub.tab-slide .tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 1em;
    width: 80%;
    margin: 50px auto;
}
section.sub.tab-slide .tabs .tab-button {
    width: 16em;
    padding: 1em;
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    color: #aaa;
    background: #F9F8F6;
    border-radius: 10px;
    border: 2px solid #D0E1BE;
}
section.sub.tab-slide .tabs .tab-button.active {
    background: #CFE0BD;
    border-color: #CFE0BD;
    color: var(--dark);
    font-weight: 700;
}

/* 탭 fix */
section.sub.tab-slide .fix-tabs {
    position: fixed;
    z-index: 99;

    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.5em;

    width: 13em;
    left: -30px;
    bottom: 30%;

    opacity: 0;
    visibility: hidden;
    transition: all ease 0.5s;
    transform: scale(0.9) translateX(-10em);
}
section.sub.tab-slide .fix-tabs.on {
    opacity: 1;
    visibility: visible;
    transform: scale(0.9) translateX(0);
}
section.sub.tab-slide .fix-tabs .tab-button {
    width: 100%;
    padding: 0.75em;

    padding: 1em;
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    color: #aaa;
    background: #F9F8F6;
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border: 2px solid #D0E1BE;
}
section.sub.tab-slide .fix-tabs .tab-button.active {
    background: #CFE0BD;
    border-color: #CFE0BD;
    color: var(--dark);
    font-weight: 700;
}



section.sub.tab-slide .swiper-container { overflow: hidden; }

section.sub.tab-slide .swiper-slide article {
    width: var(--inner);
    margin: 0 auto;
    padding: 120px 0;
}
section.sub.tab-slide .swiper-slide article.wide {
    width: 100%;
}
/*  */
section.sub.tab-slide .swiper-slide article .flex.row {
    grid-gap: 60px;
    margin: 80px auto;
}
/* 예방접종 예방법 부분 */
section.sub > .inner.wide article.wide.bg {
    padding: 60px 0;
    margin-top: 60px;
}




/* 체크리스트 */
section.sub ul.checklist {}
section.sub ul.checklist li {
    display: grid;
    grid-template-columns: 2em auto;
    font-size: 1.1em;
    letter-spacing: 0;
    justify-content: flex-start;
    align-items: center;
    grid-gap: 0.5em;
}
section.sub ul.checklist li + li {
    margin-top: 1em;
}
section.sub ul.checklist li::before {
    content: '';
    display: block;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    background-image: url('./img/icon-checklist.png');
}


/*  체크리스트 : 주의사항 : 박스  */
section.sub .checklist-wrap-box {
    width: 70%;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 30px;
    padding:  50px 5vw 60px;
    border-radius: 3em;
    border: 2px solid #cfe0bd;
}
section.sub .checklist-wrap-box ul.checklist li {
    background-color: #fff;
    border: 1px solid #cfe0bd;
    padding: 0.85em 2.5em 0.85em 1.5em;
    border-radius: 1em;
}
section.sub .checklist-wrap-box ul.checklist li + li {
    margin-top: 0.5em;
}





/* 넘버 라벨 (솔로/듀오) */
section.sub div.label-group {
    display: grid;
    width: fit-content;
    min-width: 50%;
    margin: 60px auto;
    grid-gap: 0.5em 1em ;
}
section.sub div.label-group.solo { grid-template-columns:1fr }
section.sub div.label-group.duo { grid-template-columns:1fr 1fr }
section.sub div.label-group > div {
    display: grid;
    grid-template-columns: 3em auto;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 1em;
    border-radius: 3em;
    background-color: #fff;
    padding: 0.75em 1.5em;
    border: 2px solid var(--primary);
}
/* 이미지와 나란히 배열되는 경우 */
section.sub .img-list {
    grid-gap: 60px;
    margin-top: 60px;
}
section.sub .img-list .label-group {
    margin: 0;
    width: 100%;
}
/* 숫자없는라벨 */
section.sub div.label-group.onlytext {
    min-width: unset;
}
section.sub div.label-group.onlytext > p {
    display: block;
    text-align: center;
    padding: 1em 7em;
    border-radius: 3em;
    background-color: #fff;
    border: 2px solid var(--primary);
}


section.sub div.label-group > div span.before {
    color: #cfe0bd;
    font-size: 1.75em;
    font-weight: 500;
}
section.sub div.circle-group p,
section.sub div.label-group p { font-weight:500 }
section.sub div.label-group.duo p { text-align:center; }

/* 추가메시지박스 */
section.sub div.p-wrap.box {
    border-radius: 1em;
    padding: 2em;
    background-color: #F3F6F0;
    width: fit-content;
    min-width: 60%;
    margin: 0 auto;
}



/* 원형 그룹 */
section.sub div.circle-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: fit-content;
    justify-content: center;

    min-width: 50%;
    margin: 60px auto;
    grid-gap: 30px ;
}
section.sub div.circle-group > div {
    width: 250px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 70px;
    background-color: #fff;
    border: 2px solid var(--primary);
}
section.sub div.circle-group > div p {
    color: #333;
    font-size: 1.1em;
}
section.sub div.circle-group > div span.before {
    color: #cfe0bd;
    font-size: 1.75em;
    font-weight: 500;
}
section.sub div.circle-group.duo p { text-align:center; font-weight:500 }

/* 원형라벨 온리텍스트 */
section.sub div.circle-group.onlytxt > div {
    width: 320px;
    padding: 0 30px 0;
    justify-content: center;
}
section.sub div.circle-group.onlytxt > div p {
    color: #333;
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 0.5em;
    text-align: center;
}
section.sub div.circle-group.onlytxt > div p + p {
    font-size: 1em;
    font-weight: 400;
}


/* 원형 라벨 교차색상 */
section.sub div.circle-group.cross {
    width: 1000px;
    grid-gap: 30px;
}
section.sub div.circle-group.cross > div {
    justify-content: center;
    padding-top: 0;
}
section.sub div.circle-group.cross > div:nth-child(odd) {
    background-color: #cfe0bd;
}










/* 제목 라벨 텍스트 */
section.sub div.subject-group {
    width: fit-content;
    margin: 60px auto 0;
}
section.sub div.subject-group > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 2em;
}
section.sub div.subject-group > div + div { margin-top:10px }
section.sub div.subject-group > div .subject {
    display: block;
    padding: 1em 2em;
    min-width: 12em;
    font-size: 1.1em;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    font-weight: 500;
    background-color: #092d4c;
}

/* 카드 그룹 */
section.sub .card-group {
    margin: 60px auto 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    grid-gap: 20px;
    max-width: var(--inner);
}
section.sub .card-group > div {
    width: 16em;
    aspect-ratio: 1 / 1.2;
    border: 2px solid var(--primary);
    padding: 3em 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    border-radius: 10px;
    position: relative;
    background-color: #fff;
}

section.sub .card-group.numbering > div { padding:2em }
section.sub .card-group.trio > div { width:22em; aspect-ratio:1.2 / 1 }

section.sub .card-group > div:nth-child(even) { background-color: transparent; }

section.sub .card-group.step > div .number {
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9em;
    font-weight: 600;
    z-index: 1;
    margin-bottom: 10px;
}
section.sub .card-group.numbering > div .before {
    font-size: 2em;
    color: #cfe0bd;
    font-weight: 500;
}

section.sub .card-group.step > div .number::before {
    content: '';
    display: block;
    width: 2em; aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #cfe0bd;
    position: absolute;
    top: -0.5em;
    right: -1em;
    z-index: -1;
}
section.sub .card-group > div p {
    text-align: center;
    margin-top: 1em;
    font-size: 1em;
    line-height: 1.7;
}

/* 테이블 */
section.sub table.green-gray {
    width: fit-content;
    margin: 60px auto 20px;
    border-collapse: collapse;
    border-left: 0;
    border-top: 0;
}
section.sub table.green-gray tr > * { padding:1em; letter-spacing:0; border:1px solid rgba(0, 0, 0, .1);  padding:1em 3em;}
section.sub table.green-gray.txt-center tr > * { text-align: center; }

section.sub table.green-gray thead td { border:0 }
section.sub table.green-gray thead th { background-color:#cfe0bd; text-align:center; font-weight:500 }
section.sub table.green-gray thead th + th { border-left:1px solid rgba(0, 0, 0, .1); }
section.sub table.green-gray tbody th { background-color:#9e9e9e; text-align:center; font-weight:500; color:#fff;  }

/* 테이블 : 그리드  */
section.sub .table-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 60vw;
    margin: 80px auto 0;
}
section.sub .table-group > div {
    padding: 2em 1em;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items:center ;
    justify-content: center;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 1.1em;
}
section.sub .table-group > div.th {
    background-color: #cfe0bd;
}





/* 체크리스트 2단 감싸기 */
section.sub .ul-wrap.flex {
    width: fit-content;
    margin: 0 auto;
}

/*  단계(사이 화살표)  */
section.sub .course-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    grid-gap: 80px;
    margin: 80px auto 0;
}
section.sub .course-group span.subject {
    display: block;
    padding: 1em 2em;
    font-size: 1.1em;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    font-weight: 500;
    background-color: #092d4c;
}
section.sub .course-group > div {
    position: relative;
    max-width: 19em;
}
section.sub .course-group > div + div::before {
    content: '';
    display: block;
    width: 60px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 5px;
    left: -70px;
    background-image: url('./img/arrow-course.svg');
    background-repeat: no-repeat;
    background-position: left 60% center;
    background-size: 50%;
}
section.sub .course-group > div .p-wrap {
    padding: 1em 2em;
}






/* 수액클리닉 */
section.sub.iv .intro-banner {
    width: 85%;
    margin: 80px auto 0;
    border: 2px solid var(--primary);
    overflow: hidden;
    border-radius: 3em;
    padding: 7em 7em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}
section.sub.iv .intro-banner .p-wrap .page-title-eng {
    display: block;
    letter-spacing: 0.15em;
    text-transform: capitalize;
    font-size: 0.75em;
    font-weight: 500;
    margin-bottom: 2em;
    opacity: 0.5;
}
section.sub.iv .intro-banner .p-wrap h4 {
    font-size: 2.25em;
    letter-spacing: -0.025em;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1em;
}
section.sub.iv .intro-banner .p-wrap h4 b { font-weight:700 }
section.sub.iv .intro-banner .p-wrap p {
    font-size: 1.1em;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.8;
    text-shadow: 1px 1px 2px #EAE9E7,  1px 1px 10px #EAE9E7;
}





/* tab-slide : 수액클리닉 */
section.sub.tab-slide.iv .tabs {
    width: 60%;
    margin: 0 auto 60px;
}
section.sub.tab-slide.iv .tabs .tab-button {
    width: 16em;
    padding: 1em;
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    color: rgba(30, 30, 30, .5);
    background: #F9F8F6;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all ease 0.2s;
}
section.sub.tab-slide.iv .tabs .tab-button.active {
    border-color: rgba(30, 30, 30, .1);
    color: rgba(30, 30, 30, .99);
    font-weight: 700;
    color: var(--txtcolor);
    border-color: var(--txtcolor);
}
section.sub.tab-slide.iv .title-zone .page-title-eng {
    color : rgba(30,30,30,.4);
}

section.sub.tab-slide.iv .swiper-slide article {
    background-image: url('./img/symbol-fff-op60.svg');
    background-repeat: no-repeat;
    background-position: right 10vw top 10vw;
    background-size: 16vw;
}
section.sub.tab-slide.iv .iv-desc-group {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: center;
    grid-gap: 70px;
    width: 1100px;
    margin: 50px auto;
}
section.sub.tab-slide.iv .iv-desc-group img {
    max-width: 400px;
    display: block;
    border-radius: 1em;
    border: 5px solid #fff;
    box-shadow: 1px 5px 15px var(--shadowcolor);
}
section.sub.tab-slide.iv .iv-desc-group div.txt {
    display: grid;
    grid-gap: 50px;
}
section.sub.tab-slide.iv .iv-desc-group div.txt div.circles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
section.sub.tab-slide.iv .iv-desc-group div.txt div.circles > div {
    background: var(--background);
    color: #fff;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    line-height: 1.35;
    font-size: 1.2em;
}
section.sub.tab-slide.iv .label-box {
    margin: 0 auto;
    width: 1200px;
    border-radius: 10em;
    padding: 2em 5em;
    box-shadow: 5px 5px 20px var(--shadowcolor);
}
section.sub.tab-slide.iv .label-box h5 {
    color: var(--txtcolor);
    margin-bottom: 0.5em;
}
section.sub.tab-slide.iv .label-box p {
    font-size: 1em;
}

section.sub.tab-slide.iv .vitamin {
    --txtcolor : #ff915a;
    --shadowcolor : #ffd3bc;
    --background : linear-gradient(60deg, #FE702F 0%, #FEC62F 100%);
}
section.sub.tab-slide.iv .garlic {
    --txtcolor : #846A4F;
    --shadowcolor : #e2c8af;
    --background : #b28f72;
}
section.sub.tab-slide.iv .whiten {
    --txtcolor : #FF96A4;
    --shadowcolor : #ffd4e2;
    --background : #FF95A3;
}
section.sub.tab-slide.iv .amino {
    --txtcolor : #59BADC;
    --shadowcolor : #afe4f6;
    --background : #53B7DA;
}
section.sub.tab-slide.iv .cinder {
    --txtcolor : #F9C557;
    --shadowcolor : #ffe8d3;
    --background : #FEF3AD;
}



/*  버튼스타일링 (공통) */
section.sub.tab-slide.iv .swiper-button-prev,
section.sub.tab-slide.iv .swiper-button-next {
    aspect-ratio: 1 / 1;
    width: 70px; height: unset;
    font-size: 0;
}
/*  버튼 기본 < > 제거    */
section.sub.tab-slide.iv .swiper-button-prev::after,
section.sub.tab-slide.iv .swiper-button-next::after { color:rgba(30,30,30,.5) }

/*  버튼 위치 지정 / 부모(position:relative)를 어디 기준으로 했는지에 따라 다름 */
section.sub.tab-slide.iv .swiper-button-prev { left: 5vw; }
section.sub.tab-slide.iv .swiper-button-next { right: 5vw; }

section.sub.tab-slide.iv .swiper-button-prev::after,
section.sub.tab-slide.iv .swiper-button-next::after { color:var(--txtcolor); }





/* 병원소개의료진소개 */
section.sub.about {}
section.sub.about .about-special-wrap {
    width: 80%;
    margin: 60px auto;
}
section.sub.about .about-special-wrap > div + div {
    margin-top: 70px;
}
section.sub.about .about-special-wrap > div > span {
    font-size: 2.5em;
    display: block;
    font-weight: bold;
}
section.sub.about .about-special-wrap > div > p.subject {
    font-size: 1.1em;
    font-weight: 600;
    padding: 0.5em 2em;
    width: fit-content;
    margin: 0 auto 2em;
    border-radius: 3em 3em 3em 0;
    letter-spacing: -0.035em;
}
section.sub.about .about-special-wrap > div > .special-box {
    background-image: url('./img/sub-about-specialbox2.png');
    background-position: center;
    background-size: cover;
    padding: 120px 50px;
    border-radius: 60px;
    box-shadow: 0 5px 20px rgba(100, 100, 100, .3);
}
section.sub.about .about-special-wrap > div:first-child > .special-box {
    background-image: url('./img/sub-about-specialbox1.png');
}
section.sub.about .about-special-wrap > div > .special-box p.font-g {
    color: var(--primary);
    font-size: 1.75em;
    margin-bottom: 1em;
    line-height: 1.3;
}
section.sub.about .about-special-wrap > div > .special-box .p-wrap p {
    color: #fff;
    font-weight: 300;
    letter-spacing: -0.025em;
}
/* 의료진 */
section.sub.about .doctor-zone {
    margin-top: 50px;
    padding: 80px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
section.sub.about .doctor-zone .grid.half {
    margin: 0 auto;
    width: 70%;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}
section.sub.about .doctor-zone .grid.half > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-gap: 30px;
}
section.sub.about .doctor-zone .grid.half > div:nth-child(1) h3 {
    font-size: 2.5em;
}
section.sub.about .doctor-zone .grid.half > div:nth-child(1) h3 span {
    display: block;
    font-size: 0.8em;
}
section.sub.about .doctor-zone .grid.half > div:nth-child(1) h3 small {
    color: inherit;
    font-weight: 400;
}
section.sub.about .doctor-zone .grid.half > div ul.career + ul.career {
    margin-top: 30px;
}
section.sub.about .doctor-zone .grid.half > div ul.career li {
    padding: 0.25em 0;
    letter-spacing: -0.025em;
}
section.sub.about .doctor-zone .grid.half > div ul.career li::before {
    content: '\00b7';
    margin-right: 0.45em;
}

/*시설 둘러보기 - 인테리어 */
section.sub.about.interior {
    position: relative;
}
/* 전체 스와이퍼 wrapper */
section.sub.about.interior div.preview-swiper-zone {
    max-width: 100vw;
    width: 40%; /* 너비 */
    margin: 60px auto 0;
    overflow: hidden;
}
/* 각 개별 슬라이드(공통) */
section.sub.about.interior .swiper-slide {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 5%;
    background-repeat: no-repeat;
}

/* 썸네일 슬라이드  */
section.sub.about.interior .preview-thumbs { margin-top:30px }
section.sub.about.interior .preview-thumbs .swiper-slide {
    aspect-ratio: 3 / 2;
    cursor: pointer;
    filter: opacity(0.8) brightness(0.5);
    transition: filter ease 0.3s;
}
section.sub.about.interior .preview-thumbs .swiper-slide.swiper-slide-thumb-active {
    filter: opacity(1) brightness(1);
}

/*  버튼스타일링 (공통) */
section.sub.about.interior .swiper-button-prev,
section.sub.about.interior .swiper-button-next {
    aspect-ratio: 1 / 1;
    width: 70px; height: unset;
    background-color: #D0E0BC;
    font-size: 0;
}
/*  버튼 기본 < > 제거    */
section.sub.about.interior .swiper-button-prev::after,
section.sub.about.interior .swiper-button-next::after { color:var(--dark);font-size: 30px; }

/*  버튼 위치 지정 / 부모(position:relative)를 어디 기준으로 했는지에 따라 다름 */
section.sub.about.interior .swiper-button-prev { left: 5vw }
section.sub.about.interior .swiper-button-next { right: 5vw }


/* 시설 둘러보기 - 장비 */
section.main-special.sub {
    background-image: url('./img/sub-about-equip-bg.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
section.main-special.sub .special-swiper .grid.half {}
section.main-special.sub .special-swiper .grid.half .txt {
    align-items: center;
}
section.main-special.sub .special-swiper .grid.half .txt * {
    text-align: center;
}
section.main-special.sub .special-swiper .grid.half .txt span {
    background-color: #163a2c;
    color: #fff100;
    font-weight: 600;
}
section.main-special .special-swiper .grid.half .txt strong {
    font-size: 2em;
}
section.main-special.sub .special-swiper .grid.half .img {
    background-color: #fff;
}
section.main-special.sub .special-swiper .control { left: 16%; }





/* 중점진료 - 알레르기 검사항목 */
section.sub.allergy-item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    --primary : #cfe0bd;
}
section.sub.allergy-item .item-box {
    width: 80%;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    padding: 30px 40px;
    border: 4px solid var(--primary);
    background-color: rgba(255, 255, 255, .25);
    backdrop-filter: blur(3px);
}
section.sub.allergy-item .item-box > div {
    display: grid;
    grid-template-columns: 50px 100px auto;
    grid-gap: 40px;
    align-items: center;
    justify-content: flex-start;
}
section.sub.allergy-item .item-box > div .before {
    background-color: var(--primary);
    color: #fff;
    font-size: 2em;
    font-weight: 600;
    width: 70px;
    aspect-ratio: 1 / 1;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

section.sub.allergy-item .item-box > div p.subject {
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
}
section.sub.allergy-item .item-box > div > .p-wrap {
    padding: 30px 5px;
}

section.sub.allergy-item .item-box > div + div > .p-wrap {
    border-top: 2px dashed var(--primary);
}
section.sub.allergy-item .item-box > div > .p-wrap p {
    text-align:left;
    font-size: 1em;
}

/* 중점진료 - 알레르기 검사방법 MAST */
section.sub.allergy-mast {
    margin-bottom: 200px;
}
section.sub.allergy-mast .whatis {
    margin-top: 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    align-items: center;
}
section.sub.allergy-mast .whatis > div[style] {
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section.sub.allergy-mast .whatis > div[style] p {
    font-size: 1.3em;
    line-height: 1.5;
    letter-spacing: -0.025em;
}
section.sub.allergy-mast .whatis > div[style] p.txt-center {
    font-weight: 700;
    font-size: 2em;
}
section.sub.allergy-mast .whatis div.position-abs {
    width: 500px;
    aspect-ratio: 1 / 1;
    left: calc(50% - 250px);
}

/* 중점진료 - 알레르기 MAST 특징 */
section.sub.allergy-mast-feature {}
section.sub.allergy-mast-feature .img-list {
    width: 90%;
    margin: 60px auto;
    align-items: center;
    justify-content: center;
}
section.sub.allergy-mast-feature .img-list img { border-radius:10px }
section.sub.allergy-mast-feature div.label-group.onlytext > p {
    padding: 0.65em 3em;
    font-size: 1.1em;
    font-weight: 400;
    letter-spacing: -0.025em;
}

/* 중점진료 알레르기 - 항원특이면역치료 방법 */
section.sub.allergy-immune {}
section.sub.allergy-immune .zigzag-wrap {
    margin: 60px auto 0;
    width: 90%;
}
section.sub.allergy-immune .zigzag-wrap > div {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-gap: 60px;
}
section.sub.allergy-immune .zigzag-wrap > div.imgleft { grid-template-columns:1fr 1.2fr }
section.sub.allergy-immune .zigzag-wrap > div.imgright { grid-template-columns:1.2fr 1fr }
section.sub.allergy-immune .zigzag-wrap > div + div { margin-top:70px }
section.sub.allergy-immune .zigzag-wrap > div img {
    border-radius: 10px;
}
section.sub.allergy-immune .zigzag-wrap > div .howto p.subject {
    font-size: 1.75em;
    margin-bottom: 0.5em;
}
section.sub.allergy-immune .zigzag-wrap > div.imgright .howto p.subject { text-align:right; }
section.sub.allergy-immune .zigzag-wrap > div .howto .p-wrap {
    background-color: #fff;
    padding: 40px;
    border: 1px solid var(--primary);
    border-radius: 10px;
}
section.sub.allergy-immune .zigzag-wrap > div .howto .p-wrap p {
    text-align: left;
    font-size: 1.0em;
}
section.sub.allergy-immune .zigzag-wrap > div .howto .p-wrap p.caution {
    display: grid;
    grid-template-columns: 2em auto;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 1em;
}
section.sub.allergy-immune .zigzag-wrap > div .howto .p-wrap p.caution::before {
    content: '!';
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.0;
    font-size: 1.2em;
    width: 1.5em;
    font-weight: bold;
    color: var(--primary);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 3px solid var(--primary);
}
section.sub.allergy-immune .zigzag-wrap > div .howto .p-wrap p.caution span {
    font-size: 0.9em;
    line-height: 1.5;
}

/* 중점 - 난청및이명클리닉 ; 난청의종류 */
section.sub.yeem-type,
section.sub.hear-type {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    --primary: #D9E6CA;
}
section.sub.hear-type .circle-cross-mini {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 60px auto ;
}
section.sub.hear-type .circle-cross-mini > p {
    width: 180px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: -0.025em;
    border-radius: 50%;
    background-color: var(--primary);
}
section.sub.hear-type .circle-cross-mini > p + p {
    margin-left: -20px;
}
section.sub.hear-type .circle-cross-mini > p:nth-child(even) {
    background-color: rgba(255, 255, 255, .8);
}
section.sub.hear-type .card-group > div {
    aspect-ratio: unset;
    width: 20em;
    border-width: 3px;
    background-color: rgba(255, 255, 255, .2);
}
section.sub.hear-type .card-group > div .before {
    background-color: var(--primary);
    color: #fff;
    font-size: 1.5em;
    font-weight: 600;
    width: 70px;
    aspect-ratio: 1 / 1;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 20px;
}

/* 중점 - 난청및이명클리닉 ; 난청 자가진단 */
section.sub.hear-selftest {}
section.sub.hear-selftest .selftest-list {
    width: 80%;
    margin: 60px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 60px;
}
section.sub.hear-selftest .selftest-list div {
    display: grid;
    grid-template-columns: 2em auto;
    justify-content: flex-start;
    border-bottom: 2px dashed #d3d3d3;
    padding: 0.75em 0.2em;
}
section.sub.hear-selftest .selftest-list div p {
    letter-spacing: -0.025em;
}
section.sub.hear-selftest .selftest-list div::before {
    content: '';
    display: block;
    width: 1.75em;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 70%;
    background-image: url('./img/check-selftest.png');
}



/* 중점 - 난청및이명클리닉 ; 이명 원인과종류 */
section.sub.yeem-type .grid.half {
    width: 70%;
    margin: 80px auto 0;
    grid-gap: 80px;
    align-items: center;
    justify-content: center;
}
section.sub.yeem-type .grid.half .subject-label {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.75em;
}
section.sub.yeem-type .grid.half .subject-label > p {
    padding: 0.85em;
    background-color: #fff;
    border-radius: 3em;
    text-align: center;
    border: 1px solid var(--primary);
}
section.sub.yeem-type .grid.half .subject-label > p.subject {
    background-color: var(--primary);
    color: #415c53;
    font-size: 1.1em;
    font-weight: 600;
}



/* 중점 - 난청및이명클리닉 ; 치료 */
section.sub.yeem-care {}
section.sub.yeem-care .yeem-care {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: center;
    grid-gap: 30px;
    width: 80%;
    margin: 60px auto 0;
}
section.sub.yeem-care .yeem-care > div {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    grid-gap: 30px;
    border-radius: 5px;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, .05);
}
section.sub.yeem-care .yeem-care > div p {
    line-height: 1.4;
}


/* 중점 - 어지럼증클리닉 ; 어지럼두통 분류 */
section.sub.dizz-type {}
section.sub.dizz-type .dizz-type.malcha { --point: #CFE0BD; --txt: #426257 }
section.sub.dizz-type .dizz-type.forest { --point: #557F70; --txt: #fff; }
section.sub.dizz-type .dizz-type {
    width: 60%;
    margin: 60px auto 0;
}
section.sub.dizz-type .dizz-type > p.subject {
    width: 8em;
    margin: 0 auto 1.5em;
    background-color: var(--point);
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    color: var(--txt);
    padding: 0.35em 2em;
    border-radius: 3em;
}

section.sub.dizz-type .dizz-type > .grid.half {
    grid-gap: 50px;
}
section.sub.dizz-type .dizz-type > .grid.half .img-card {
    border-radius: 5px;
    overflow: hidden;
}
section.sub.dizz-type .dizz-type > .grid.half .img-card .img-box {
    aspect-ratio: 3 / 2;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
}
section.sub.dizz-type .dizz-type > .grid.half .img-card .txt-box {
    background-color: var(--point);
    padding: 30px;
    font-size: 1.0em;
}
section.sub.dizz-type .dizz-type > .grid.half .img-card .txt-box * {
    color: var(--txt);
}
section.sub.dizz-type .dizz-type > .grid.half .img-card .txt-box p b {
    font-size: 1.2em;
    display: inline-block;
    margin-bottom: 0.5em;
}
section.sub.dizz-type .dizz-type > .grid.half .img-card .txt-box p {
    line-height: 1.5;
    font-weight: 400;
    font-size: 1.0em;
    letter-spacing: -0.025em;
}
/* 중점 - 어지럼증클리닉 ; 어지럼 원인 */
section.sub.dizz.hear-type .card-group {
    width: 80%;
}
section.sub.dizz.hear-type .card-group > div {
    aspect-ratio: 1 / 1;
    border-radius: 2em;
}
section.sub.yeem-care.dizz .yeem-care {
    grid-template-columns: repeat(3, 1fr);
}
section.sub.yeem-care.dizz .yeem-care > div {
    grid-gap: 20px;
}
section.sub.yeem-care.dizz .yeem-care > div img {
    height: 120px;
}
section.sub.yeem-care.dizz .yeem-care > div p.subject {
    font-weight: 600;
    font-size: 1.2em;
}


/* 중점 - 금연클리닉 */
section.sub.smoking.dark {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
section.sub.smoking.dark .inner {
    background-repeat: no-repeat;
    background-position: left 10% bottom 15%;
    background-size: 23%;
}
section.sub.smoking.dark img.page-img {
    margin: 0 auto 50px;
}
section.sub.smoking.dark .title-zone .page-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 1px;
    border-top: 1px solid #fff;
    margin: 40px auto 60px;
}
section.sub.smoking.dark .p-wrap p { font-weight:300 }

/**/
section.sub.smoking .need-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 80px;
    width: 80%;
    margin: 60px auto 0;
}
section.sub.smoking .need-trio > div {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    justify-content: center;
}
section.sub.smoking .need-trio > div img {
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid var(--primary);
}
section.sub.smoking .need-trio > div p.label {
    text-align: center;
    padding: 0.75em;
    border: 3px solid var(--primary);
    border-radius: 3em;
    font-weight: 500;
    letter-spacing: -0.025em;
}

/**/
section.sub.smoking .program-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
    width: 85%;
    margin: 60px auto 0;
}
section.sub.smoking .program-trio > div {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
section.sub.smoking .program-trio > div img {
    border-radius: 20px;
    margin-bottom: 30px;
}
section.sub.smoking .program-trio > div p.subject {
    font-weight:600;
    margin-bottom: 1em;
    font-size: 1.1em;
}
/* 금연 신체변화 */
section.sub.smoking.hand {}
section.sub.smoking.hand .smoke-change-wrap {
    width: fit-content;
    margin: 60px auto 0;
    padding-left: 15%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 120%;
    background-image: url(./img/sub01-smoking-hand.png);
}
section.sub.smoking.hand .smoke-change-wrap > div {
    display: grid;
    grid-template-columns: 10em 100px auto;
    align-items: center;
    padding: 0.75em 0;
}
section.sub.smoking.hand .smoke-change-wrap > div p {
    letter-spacing: -0.025em;
    font-size: 1.2em;
}
section.sub.smoking.hand .smoke-change-wrap > div p.txt-right {}
section.sub.smoking.hand .smoke-change-wrap > div p.txt-right span { background-color: #E2ECD7; padding:0 0.25em }
section.sub.smoking.hand .smoke-change-wrap > div .triangle {
    display: flex;
    width: 40px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./img/triangle-arrow.svg');
}
/* 금연 국민건강보험공단 */
section.sub.smoking.gmgg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
section.sub.smoking.gmgg .gmgg-quater {
    width: 80%;
    margin: 80px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}
section.sub.smoking.gmgg .gmgg-quater > div {
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #CFE0BD;
}
section.sub.smoking.gmgg .gmgg-quater > div > .subject {
    background-color: #CFE0BD;
    color: #3F6556;
    text-align: center;
    padding: 1em;
    font-weight: 600;
}
section.sub.smoking.gmgg .gmgg-quater > div > .p-wrap {
    height: 8em;
    padding: 2em;
}


/* 귀코목 */
/* 귀 */
section.sub.tab-slide.ear {}
/*section.sub.tab-slide.ear .subject-group.manytext {
    width: 70%;
}*/
section.sub.tab-slide.ear .yeem-symptom-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
    align-items: flex-start;
    justify-content: center;
    margin: 60px auto 0;
    width: 60%;
}
section.sub.tab-slide.ear .yeem-symptom-wrap p.subject {
    background-color: #CFE0BD;
    width: 10em;
    border-radius: 0.5em;
    padding: 0.5em;
    font-weight: 500;
    text-align: center;
    font-size: 1.1em;
    margin: 0 auto 30px;
}
section.sub.tab-slide.ear .yeem-symptom-wrap div.label-group {
    width: 100%;
    min-width: 50%;
    margin: 0 auto;
}

/* 라벨그룹 단일 센터 */
section.sub div.label-group.numbering.center > div {
    display: block;
    position: relative;
    padding: 1em;
}
section.sub div.label-group.numbering.center > div .before {
    position: absolute;
    left: 1em;
    line-height: 1.1;
}
section.sub div.label-group.numbering.center > div p { text-align:center; }


section.sub.tab-slide.ear article.midear-zigzag {}
section.sub.tab-slide.ear article.midear-zigzag .zigzag-wrap .imgleft,
section.sub.tab-slide.ear article.midear-zigzag .zigzag-wrap .imgright {
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
}
section.sub.tab-slide.ear article.midear-zigzag .care-list {
    margin-top: 2em;
}
section.sub.tab-slide.ear article.midear-zigzag .care-list > div {
    display: grid;
    grid-template-columns: 2em 6.5em auto;
    align-items: center;
    justify-content: flex-start;
    padding: 0.6em 0;
    grid-gap: 1.5em;
}
section.sub.tab-slide.ear article.midear-zigzag .care-list > div .before {
    color: var(--primary);
    font-size: 1.2em;
}
section.sub.tab-slide.ear article.midear-zigzag .care-list > div p.subject {
    font-size:inherit;
    margin: 0;
    font-weight: 500;
    border-right:1px solid var(--dark);
    line-height: 1.0;
}

/* 청각장애 종류 */
section.sub.tab-slide .subject-group.manytext {
    width: 70%;
}
/* 청각장애 치료방법 */
section.sub.tab-slide.ear article.midear-zigzag.cgja .care-list > div p.subject {
    border: 0;
    font-size: 1.1em;
}
/* 보청기 청각장애 진단절차 */
section.sub.tab-slide article .card-group.step.six {
    max-width: 50%;
}
/* 보청기 사용 적응 */
section.sub.tab-slide.ear article .use {
    width: 80%;
    margin: 60px auto 0;
}
/* 비중격만곡증 합병증 */
section.sub.tab-slide .circle-group.six {
    width: 70%;
}
section.sub.tab-slide .circle-group.six  > div {
    width: 300px;
}
section.sub.tab-slide .circle-group.six p {
    text-align: center;
    line-height: 1.5;
    margin-top: 0.5em;
}
/* 임파선염 원인 */
section.sub.tab-slide .circle-group.six.ipsy {
    width: 80%;
}
section.sub.tab-slide .circle-group.six.ipsy  > div {
    width: 350px;
}
section.sub.tab-slide .circle-group.six.ipsy  > div p + p {
    padding: 0 2em;
}

/* 임파선염 치료 */
section.sub.tab-slide .img-list.ipsy {}
section.sub.tab-slide .img-list.ipsy img {
    border-radius: 2em;
}
section.sub.tab-slide .img-list.ipsy .p-group p {
    display: grid;
    grid-template-columns: 3em auto;
    align-items: center;
}
section.sub.tab-slide .img-list.ipsy .p-group p .before {
    color: var(--primary);
    font-weight: 600;
    font-size: 1.35em;
    letter-spacing: -0.025em;
}
/* 음성장애 원인  */
section.sub.tab-slide .square-group {
    width: 90%;
    margin: 60px auto;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(4, 1fr);
}
section.sub.tab-slide .square-group > div {
    aspect-ratio: 1 / 1;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
    border-radius: 1em;
    border: 2px solid var(--primary);
}
section.sub.tab-slide .square-group > div .before {
    color: var(--primary);
    font-weight: 500;
    letter-spacing: -0.025em;
    font-size: 1.6em;
    text-align: center;
}
section.sub.tab-slide .square-group > div p {
    text-align: center;
    line-height: 1.7;
}
section.sub.tab-slide .square-group > div .subject {
    font-weight: 700;
    font-size: 1.2em;
}
/* 음성장애 진단및치료  */
section.sub.tab-slide .card-group.step.voice > div {
    aspect-ratio: 1.1 / 1;
    width: 18em;
}







/* 소아 부비동염 예방 방법 */
section.sub article.bbdy-prevent {
    padding: 100px 0;
    margin-top: 60px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
section.sub article.bbdy-prevent .opacity-box {
    margin: 0 auto;
    width: calc( var(--inner) * 0.9 );
    border-radius: 3em;
    background-color: rgba(255, 255, 255, .65);
    box-shadow: 0 0 30px rgba(175, 182, 172, .19);
    padding: 60px 30px;
}
section.sub article.bbdy-prevent .opacity-box div.circle-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: fit-content;
    justify-content: center;
    min-width: unset;
    width: 85%;
    margin: 30px auto;
    grid-gap: 30px;
}
section.sub article.bbdy-prevent .opacity-box div.circle-group > div {
    width: 30%;
    justify-content: center;
    padding-top: 0;
    grid-gap: 1em;
    border: 1px solid rgba(255, 255, 255, .9);
    background-color: rgba(255, 255, 255, .65);
    box-shadow: 0 0 30px rgba(175, 182, 172, .19);
}
section.sub article.bbdy-prevent .opacity-box div.circle-group > div span {
    font-weight: 500;
    font-size: 1.2em;
    letter-spacing: 0.05em;
}
section.sub article.bbdy-prevent .opacity-box div.circle-group > div p {
    font-size: 1.0em;
    line-height: 1.5;
}
section.sub article.bbdy-prevent .opacity-box div.circle-group + p.txt-center {
    font-weight: 500;
    margin-top: 3em;
}
/* 소아부비동염 치료방법 */
section.sub .card-group.label-subject {
    display: grid;
    width: 70%;
    margin: 80px auto 0;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
    --primary: #cfe0bd;
}
section.sub .card-group.label-subject > div {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 1em;
    border: 2px solid var(--primary);
    padding: 0;
    align-items: flex-end;
    background-color: #D9E6CA;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 105%;
}
section.sub .card-group.label-subject > div .img {
    aspect-ratio: 1.25 / 1;
}

section.sub .card-group.label-subject > div p.subject {
    width: 70%;
    border-radius: 3em;
    padding: 0.5em 1em;
    background-color: #D9E6CA;
    text-align: center;
    font-weight: 700;
    transform: translateY(-1.5em);
    margin: 0 auto;
    font-size: 1.2em;
}
section.sub .card-group.label-subject > div .p-wrap {
    background-color: #D9E6CA;
    padding: 1.75em 1em;
    border-radius: 1em;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
section.sub .card-group.label-subject > div .p-wrap p {
    font-size: 1.1em;
    margin-top: 0;
    line-height: 1.5;
}
/* 소아알레르기비염 치료 방법 */
section.sub.kid-allergy-care {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}
section.sub.kid-allergy-care .kid-allergy {
    grid-gap: 80px;
    width: 70%;
    margin: 70px auto 0;
}
section.sub.kid-allergy-care .kid-allergy > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 1em;
}
section.sub.kid-allergy-care .kid-allergy > div img {
    border: 1px solid #fff;
    display: block;
    padding: 40px;
    backdrop-filter: blur(3px);
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(175, 182, 172, .35);
}
section.sub.kid-allergy-care .kid-allergy > div p.subject {
    font-weight: 700;
    font-size: 1.2em;
    margin-top: 0.5em;
}
section.sub.kid-allergy-care .kid-allergy > div p.subject + p {
    font-size: 1.0em;
    padding: 0 1em;
}
/* 소아 난청 검사 */
section.sub-intro .intro-zone .circle-duo {
    width: 50%;
    margin: 60px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
section.sub-intro .intro-zone .circle-duo > div > div {
    width: 12em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 3px solid var(--primary);
    background-color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5;
}
section.sub-intro .intro-zone .circle-duo > div > div + span {
    display: block;
    width: 2px;
    height: 80px;
    background-color: var(--primary);
    margin: 0 auto 30px;
}
section.sub-intro .intro-zone .circle-duo div p.txt-center {
    font-weight: 500;
}



/* 예방접종 원인 (독감) */
section.sub div.box.flu {
    width: 70%;
    padding: 30px;
    margin: 60px auto 0;
    border-radius: 2em;
    background-color:#F2F8ED;
}
section.sub div.box.flu .label-group {
    width: 80%;
}
section.sub div.box.flu .label-group div {
    display: block;
    text-align: center;
    border-width: 1px;
}
section.sub div.box.flu .label-group div p {
    text-align: center;
}
/* 예방접종 증상 (독감) */
section.sub div.circle-group.flu {
    width: 70%;
    grid-gap: 0 30px;
}
section.sub div.circle-group.flu > div {
    width: 250px;
    justify-content: center;
    padding-top: 0;
}
/* 예방접종 */
section.sub .wide.bg div.label-group.onlytext > p {
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    border: 2px solid #cfe0bd;
}
/* 예방접종 원인 폐렴 */
section.sub div.box.flu.pr .label-group div {
    border-radius: 1em;
}
section.sub div.box.flu.pr .label-group div p {
    font-weight: 500;
}

/* 예방법 */
section.sub article.vaccine-bg[style] {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* 대상포진 원인 */
section.sub div.box.flu.dspj > .grid.half {
    width: 80%;
    margin: 30px auto 50px;
    justify-content: center;
}
section.sub div.box.flu.dspj > .grid.half > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 1em;
    position: relative;
}
section.sub div.box.flu.dspj > .grid.half > div > img {
    border-radius: 5px;
}

section.sub div.box.flu.dspj > .grid.half > div + div::before {
    content: '';
    display: block;
    width: 2em;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    position: absolute;
    bottom: 0.5em;
    left: -1em;
    background-image: url('./img/triangle-arrow.svg');
}

section.sub div.box.flu.dspj > .grid.half > div p.desc {
    line-height: 1.4;
    font-weight: 500;
}

section.sub div.box.flu.dspj > div[style] {
    border: 1px solid var(--primary);
    width: 80%;
    margin: 0 auto 30px;
    border-radius: 20px;
    padding: 20px;
}
section.sub div.box.flu.dspj > div[style] p.subject {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.25em;
}
section.sub div.box.flu.dspj > div[style] p.subject + .txt-center {
    font-size: 1.0em;
}
section.sub div.box.flu.dspj > div[style] p.subject + .txt-center span { margin:0 5px; opacity:0.6 }












/* 탭컨텐츠 내부임을 표시 (추후삭제)
section.sub.tab-slide .swiper-slide { border: 1px solid magenta; position:relative; }
section.sub.tab-slide .swiper-slide::after { content:'탭 내부 영역'; display:block; background-color:rgba(255,0,255,.15); color:magenta; padding: 1em; position:absolute; z-index:1; top:0; left:5vw; height:100%; border: 1px solid magenta; border-top:0; border-bottom:0 }*/