/*
Theme Name: 코지이비인후과
Author: Jeymedi
Author URI: https://jmedidesign.com
Description: 코지이비인후과 웹사이트 테마
Version: 1.0.0
*/

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LAYOUT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body { overflow-x:hidden; }

.inner {
    width: var(--inner);
    margin: 0 auto;
    position: relative;
/*    border-left: 1px dashed magenta;*/
/*    border-right: 1px dashed magenta;*/
}


/* header */
header.header {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 100vw;
    height: 0;
    transition: all ease 0.5s;
    z-index: 99;

}
header.header .gnb-floor {
    position: relative;
    z-index: 3;
/*    background-color: #fff;*/
    border-bottom: 1px solid rgba(186, 191, 213, .5);
    backdrop-filter: blur(30px);
    background-color: rgba(255, 255, 255, 0);
    transition: background ease 0.5s ;
}
header.header .gnb-floor > .inner,
header.header .sub-floor > .inner {
    width: 100%;
    max-width: 1700px;
/*    max-width: var(--inner);*/
    display: grid;
    grid-template-columns: 250px auto;
    align-items: center;
    justify-content: space-between;
/*    justify-content: flex-start;*/
    border-bottom:1px solid rgba(255, 255, 255, 0);
    transition: all ease 0.3s;
    grid-gap: 0 50px;
}
header.header .gnb-floor > .inner a.logo {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    background-image: url('./img/logo-header-fff.svg');
}
p.text-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    font-family: var(--s);
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.06em;
    gap: 0.25em;
    transition: color ease 0.5s ;
}
p.text-logo::before {
    content: '';
    display: flex;
    width: 1.6em;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url('./img/symbol.svg');
    background-color: #fff;
    border-radius: 50%;
    transition: background linear 0.1s ;
}

header.header .sub-floor ul.menu,
header.header .gnb-floor nav.gnb ul.menu {
    width: 100%;
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: space-between;*/
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    justify-content: flex-end;
    gap: 0;
}

header.header .gnb-floor nav.gnb ul.menu > li {
/*    border: 1px dashed lime;*/
    position: relative;
}

header.header .gnb-floor nav.gnb ul.menu > li a {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 300;
/*    padding: 2em 1.85em;*/
    padding: 2em 1em;
    color: #fff;
    position: relative;
/*    background-color: yellow;*/
}
header.header .gnb-floor nav.gnb ul.sub-menu { display: none; }

/* gnb 메뉴 호버*/
header.header.on .gnb-floor > .inner a.logo {
    background-image: url('./img/logo-header.svg');
}
/*
header.header.on .gnb-floor > .inner a.logo p.text-logo {
    color: var(--primary);
    font-weight: 500;
}
header.header.on .gnb-floor > .inner a.logo p.text-logo::before {
    background-color: transparent;
}*/
header.header.on .gnb-floor nav.gnb ul.menu > li a {
    color: var(--dark);
    color: #424555;
    font-weight: 500;
}
header.header.on .gnb-floor {
    background-color: rgba(255, 255, 255, 1.0);
    border-bottom: 1px solid rgba(186, 191, 213, .5);
/*    box-shadow: 0 0 60px -10px rgba(186, 191, 213, 0.5);*/
}
header.header .gnb-floor nav.gnb ul.menu > li:hover > a,
header.header .gnb-floor nav.gnb ul.menu li.menu-item-has-children.current-menu-parent > a {
    /* 현재 페이지 부모 */
/*    color: var(--primary);*/
    color: var(--secondary);
    font-weight: 600;
}





/* 서브메뉴 */
header.header .sub-floor {
    display: grid;
    visibility: hidden;
/*    background-color: rgba(250, 252, 255, .95);*/
    background-color: rgba(254, 253, 252, .95);

    padding: 20px 0 50px;
    border-bottom:1px solid #ddd;
    transform: translateY(-450px);
    z-index: 1;
    transition: all ease 0.6s;

    background-repeat: no-repeat;
    background-position: left 1% bottom -20px;
    background-size: 20%;
/*    background-image: url('./img/symbol-op10.svg');*/
    background-image: url('./img/symbol-op5.svg');
    background-attachment: fixed;
}
header.header .sub-floor ul.menu li a {
    display: block;
    font-size: 16px;
    color: #444;
    text-align: center;
    font-weight: 300;
    padding: 8px 0;
    line-height: 1.4;
/*    margin: 0 3px;*/
/*    border-radius: 5px;*/
}
header.header .sub-floor ul.menu li a:hover,
header.header .sub-floor ul.menu li.current-menu-item a {
    font-weight: 500;
/*    color: var(--primary);*/
    color: var(--secondary);
/*    background: #ebf5ff;*/
}
/* 서브메뉴 on */
header.header.on .sub-floor.on {
    visibility: visible;
    transform: translateY(0);
}

header.header .sub-floor ul.menu li.menu-item-has-children > a { display:none }




/* footer */
footer.footer {
    max-width: 100vw;
    overflow: hidden;
    background-color: #2C333D;

    font-size: 16px;
}
footer.footer * { color:rgba(255, 255, 255, .9); }
footer.footer > .inner {
    padding: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-gap: 50px;
}
footer.footer > .inner > div {
    display: grid;
    grid-gap: 2em;
}

/* 푸터로고 */
footer.footer img.logo { width:250px; margin-top:30px }

/* 푸터인포 */
footer.footer ul.info {
    width: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 0.4em 1.5em;
    flex-wrap: wrap;
}
footer.footer ul.info li {
    font-weight: 300;
    display: flex;
    flex-direction: row;
    grid-gap: 0.5em;
}

/* 푸터메뉴 */
footer.footer ul.menu {
}
footer.footer ul.menu * {
/*    line-height: 1.0;*/
}

footer.footer ul.menu li.menu-item a { /*  푸터메뉴 단일  */ }
/*footer.footer ul.menu li.menu-item a:hover { opacity: 0.75; }*/
/*footer.footer ul.menu li.menu-item + li { border-top:1px solid rgba(255, 255, 255, .5); padding:1em }*/

footer.footer div.footer-menu {
    width: 230px;
}
footer.footer div.footer-menu li.menu-item a {
    display: block;
    color: var(--ivory);
    width: 100%;
    padding: 12px 15px;
    font-size: 0.98em;
    letter-spacing: -0.07em;
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 1em;
    background-image: url('./img/footermenu-arrow.svg');
    transition: all ease 0.5s;
}
footer.footer div.footer-menu li.menu-item + li.menu-item {
    border-top: 1px solid rgba(255,255,255,.3);
}
footer.footer div.footer-menu li.menu-item:hover a {
    text-indent: 10px;
    background-position: right -30px center;
}

/* copyright */
footer.footer .copyright {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8b939e;
}





/* quickmenu */
#quickmenu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    position: fixed;
    right: 30px;
    top: 55%;
    transform: translateY(-50%);
    z-index: 999;
}
#quickmenu a.bar,
#quickmenu a.circle {
    width: 60px;
    border-radius: 60px;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-color: var(--primary);
    transition: all ease 0.4s;
}
#quickmenu a.circle {
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 60px;
    background-position: left center;
    background-size: auto 100%;
    cursor: pointer;
}
#quickmenu a.circle span {
    display: flex;
    width: 6em;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: all ease 0.4s;
    font-size: 0.9em;
}

#quickmenu a.circle.open:hover {
    width: 150px;
}
#quickmenu a.circle.open:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#quickmenu a.bar {
    width: 60px;
    display: flex;
    justify-content: center;
    padding-top: 70px;
    background-image: url('./img/quick-call.svg');
    background-size: 100% auto;
    background-position: top center;
}
#quickmenu a.bar span.number {
    writing-mode: vertical-rl;
    margin-bottom: 25px;
}

#quickmenu a:hover{
    background-color: #323f4f;
}
/*#quickmenu a.circle.blog { background-image:url('./img/icon-blog-fff.svg') }*/
#quickmenu a.circle.blog { background-image:url('./img/icon-blogframe-fff.svg') }
#quickmenu a.circle.book { background-image:url('./img/icon-naverbook-fff.svg') }
#quickmenu a.circle.locate { background-image:url('./img/icon-location-fff.svg') }
#quickmenu a.circle.topbtn { background-image:url('./img/icon-top-fff.svg') }



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    MAINPAGE : 메인페이지
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - main01. 메인비주얼 (main-visual)  */
section.main-visual {
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}
section.main-visual .mv-box {
    width: 100vw;
    height: 100vh;
/*    aspect-ratio: 1920 / 1080;*/
    overflow: hidden;
    background-color: var(--primary);
}
/* 임시 메인비주얼 효과 */
section.main-visual .mv-box div.temp {
    width: inherit;
    height: inherit;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 20vh 10vw;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
}
section.main-visual .mv-box div.temp img {
    mix-blend-mode: overlay;
    position:absolute;
    left:50%; top: 50%; transform:translate(-50%, -50%);
    filter: opacity(0) blur(15px);
    transition-property: all;
    transition-timing-function: ease;
}
section.main-visual .mv-box div.temp img:nth-child(1){
    transition-delay: 1.5s;
    transition-duration: 2s;
    opacity:0.3;
    width:70%;
}
section.main-visual .mv-box div.temp img:nth-child(2){
    transition-delay: 2.0s;
    transition-duration: 1.5s;
    mix-blend-mode: screen;
    opacity: 0.7;
    width: 30em;
    top: 52%;
}
section.main-visual .mv-box div.temp img:nth-child(3){
    transition-delay: 2.5s;
    transition-duration: 1s;
    top: 80%;
}
section.main-visual .mv-box div.temp.active img {
    filter: opacity(1) blur(0);
    transform:translate(-50%, -50%);
}
section.main-visual .mv-box div.temp > .screen {
    background-color: #111;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    transform: scaleY(1.0);
    transition-property: all;
    transition-delay: 0.5s;
    transition-timing-function: ease;
    transition-duration: 2s;
    z-index: 9;
}
section.main-visual .mv-box div.temp.active > .screen { transform:scaleY(0); }

section.main-visual .mv-box div.temp > .screen.top { top: 0; transform-origin: top; }
section.main-visual .mv-box div.temp > .screen.bottom { bottom: 0; transform-origin: bottom; }




/* 메인비주얼 외 공통 */
section > .inner {
    --inner : 1500px;
    max-width: 80vw;
    padding: 200px 0;
}
section.dark { background-color:var(--dark) }
section.bg-attached {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
/* 섹션 제목영역 */
section .title-zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
section .title-zone.center { align-items:center; }
section .title-zone.center * { text-align:center; }

section .title-zone.right { align-items:flex-end; }
section .title-zone.right * { text-align:right; }


section .title-zone.dark  * { color:#fff }
/*section.dark.checkup.intro p.intro-desc { color:#fff }*/
/*section.dark.checkup.intro p.intro-desc span { color:#FFDEC4 }*/

/* 섹션 부제목  */
section .title-zone p.kozy {
    font-family: var(--paperrozi);
    font-size: 0.8em;
    color: #BDAA90;
    margin-bottom: 1em;
    letter-spacing: 0.15em;
}
section .title-zone p.kozy span { color:var(--primary); font-size:inherit; }
section .title-zone.dark p.kozy,
section .title-zone.dark p.kozy span { color: rgba(255, 255, 255, .45) ; }

/* 섹션 제목  */
section .title-zone .section-title {
    font-size: 2.25em;
    line-height: 1.4;
    letter-spacing: -0.065em;
    color: var(--primary);
}
section .title-zone .section-title span { color: #C1AA8A; }
section .title-zone.dark .section-title { color: #fff}
section .title-zone.dark .section-title span { color: #ECD6B8; }
section .title-zone .section-title u {
    background-image: linear-gradient(120deg, #ECD6B8, #ECD6B8);
    background-repeat: no-repeat;
    background-size: 100% 0.3em;
    background-position: 0 95%;
    text-decoration: none;
}


section .title-zone .p-wrap {
    margin-top: 1em;
}
section .title-zone .p-wrap p {
    color: #767E8A;
    font-size: 1.1em;
    font-weight: 500;
    letter-spacing: -0.03em;
}
.p-wrap p + p {
    margin-top: 1.5em;
}
section .title-zone.dark .p-wrap p { font-weight:300; color:#fff }
section .title-zone.dark .p-wrap p b { color:#ECD6B8 }


/* 유닛 */
section .unit { margin: 80px auto 0; }
section .unit.ml { margin: 40px auto; }
section .unit.nomargin { margin: 0 auto; }
section .unit.img { margin: 60px auto; }
section .unit.unit90 { width: 90%; }
section .unit.unit80 { width: 80%; }
section .unit.unit70 { width: 70%; }
section .unit.unit60 { width: 60%; }
section .unit.unit50 { width: 50%; }

/* 유닛 이미지 정렬 */
section .unit.img { text-align: center; }
section .unit.img.duo { display:flex; flex-direction: row; align-items:center; justify-content:center; gap:30px }
section .unit.img img { max-width:100% }

/* 효과 스크롤텍스트(서브페이지) */
@keyframes scrollTextBg {
    from { background-position:right -99vw bottom; }
    to { background-position:left -99vw bottom; }
}
section > div.scrollText {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    background-repeat: repeat-x;
    animation: scrollTextBg 60s linear infinite;
    background-size: auto 90%;
    height: 10em;
/*    border: 1px dashed red;*/
    opacity: 0.8;
    background-image: url(./img/scrolltext-kozy.png);
    position: relative;
    z-index: -1;
}
/*section > div.scrollText.primary {
    background-image: url(./img/scrolltext-primary.png);
}*/










/* - - - - - main02-1. 철학 (main-think)  */
section.main-think {
    background-image: url(./img/bg-gradient-yellow.png), url('./img/bg-gradient-sky.png');
    background-position: left top, right center;
    background-repeat: no-repeat, no-repeat;
/*    background-size: contain, contain;*/
/*    background-attachment: scroll, fixed;*/
}
section.main-think .inner {
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

section.main-think .scrollText {
    transform: translateY(-100%);
    z-index: 5;
}
section.main-think h5.section-title {
    margin-top: 1em;
    font-weight: 600;
    font-size: 1.5em;
    letter-spacing: -0.035em;
}
section.main-think h2.section-title {
    margin: 0.35em auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    letter-spacing: -0.055em;
    font-size: 2.8em;

}

section.main-think .type-cursor {
    position: relative;
    white-space: nowrap;
    padding: 0 0.3em;
    max-width: 8em;
    background-color: rgba(200, 196, 173, .18);
}
section.main-think .typing {
    width: 0;
    max-width: 6.8em;
    color: #C1AA8A;
    overflow: hidden;
    letter-spacing: -0.055em;
}
section.main-think.active .typing {
    animation: typing 2.0s steps(10, end) forwards;
}
section.main-think.active .type-cursor {
    animation: typing 2.0s steps(18, start) forwards;
}


section.main-think .type-cursor::after {
    content: '';
    display: block;
    width: 0.4em;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(50%);
    background-size: 100% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-image: url('./img/type-cursor.svg');
    transition: opacity ease 0.4s;
}
section.main-think.active .type-cursor::after {
    animation: blink-caret 0.8s step-end 3.5;
}

@keyframes typing {
  from { width: 0 }
  to { width: 7.5em; }
}
@keyframes blink-caret {
  from, to { opacity:0 }
  50% { opacity:1 }
}

section.main-think div.bracket {
    position: relative;
    width: 800px;
    margin: 100px auto 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
section.main-think div.bracket::before,
section.main-think div.bracket::after {
    content: '';
    display: block;
    width: 1em;
    height: 6em;
    position: absolute;
    top: 0;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}
section.main-think div.bracket::before { left:0; background-image:url(./img/bracket-left.svg); background-position:left; }
section.main-think div.bracket::after { right:0; background-image:url(./img/bracket-right.svg); background-position:right; }

section.main-think div.bracket img {
    width: ;
}
section.main-think div.bracket p {
    text-align: left;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #767E8A;
    font-size: 1.15em;
    line-height: 1.5;
    letter-spacing: ;
}


/* - - - - - main02-2. 3인의판단 (doctor-box)  */
section.main-think div.doctor-box {
    border-radius: 60px;
    width: 1200px;
    margin: -6em auto 0;
    overflow: hidden;
    background-image: url(./img/main-doctorbox-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
div.doctor-box > div.txt-area {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    padding: 0 5% 0 10%;

    background-image: url(./img/symbol-fff-op76.svg);
    background-size: 28%;
    background-position: right 3em top 3em;
    background-repeat: no-repeat;
}
div.doctor-box > div.txt-area .title-zone {
    padding: 5em 0 4em;
}
div.doctor-box > div.txt-area .title-zone .p-wrap { margin-top:2em }
div.doctor-box > div.txt-area .title-zone .p-wrap p { font-size:1em; }

div.doctor-box > div.txt-area .img-zone {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;

    transition: transform 0.5s ease 0.1s;
    transform-origin: bottom center;
}
div.doctor-box:hover > div.txt-area .img-zone {
/*    transform: scale(1.05);*/
}
div.doctor-box > div.btn-area {
    background-color: #C1AA8A;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.8em 10%;
}
div.doctor-box > div.btn-area p {
    color: #fff;
    font-weight: 600;
    font-size: 1.5em;
    letter-spacing: -0.055em;
}
a.btn-line {
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
    line-height: 1.3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.75em 1.5em;
    border-radius: 3em;
    border: 2px solid #fff;
    cursor: pointer;
    transition: all ease 0.4s;
    box-shadow: 6px 4px 19px rgba(0, 0, 0, 0);
}
a.btn-line::after {
    content: '';
    display: block;
    width: 0.9em;
    height: 0.9em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('./img/arrow-btn-fff.svg');
    transition: all ease 0.5s;
}

div.doctor-box:hover a.btn-line,
a.btn-line:hover {
    background-color: #fff;
    color: #B29770;
    box-shadow: 6px 4px 19px rgba(0, 0, 0, .16);
}
div.doctor-box:hover a.btn-line:after,
a.btn-line:hover::after {
    background-image: url('./img/arrow-btn-sand.svg');
}

/* - - - - - main03. 토탈케어시스템 (main-totalcare)  */
section.main-totalcare {}
section.main-totalcare .unit.totalcare {
    position: relative;
}
section.main-totalcare .unit.totalcare .line {
    position: absolute;
    display: block;
    width: 90%;
    height: 3px;
    left: 5%;
    top: 222px;
    background-color: #C0C6CF;
    opacity: 0.6;
}

section.main-totalcare .unit.totalcare .grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}
section.main-totalcare .unit.totalcare .grid > div {
    width: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
section.main-totalcare .unit.totalcare .grid > div * { text-align:center; margin:0 auto; }
section.main-totalcare .unit.totalcare .grid > div img {
    width: 90%;
    transition: all ease 0.5s;
}
section.main-totalcare .unit.totalcare .grid > div:hover img {
    transform: translateY(-20px);
}
section.main-totalcare .unit.totalcare .grid > div:active img {
    transform: translateY(-15px);
}

section.main-totalcare .unit.totalcare .grid > div h5 {
    color: #5E6A7A;
    font-weight: 700;
    margin: 0.6em auto 0.4em;
    font-size: 1.35em;
}
section.main-totalcare .unit.totalcare .grid > div h5::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto 0.5em;
    border-radius: 50%;
    background-color: #fff;
    border: 6px solid #C1AA8A;
    transition: all ease 0.5s;
}
section.main-totalcare .unit.totalcare .grid > div:hover h5::before {
    border-color:var(--primary);
}
section.main-totalcare .unit.totalcare .grid > div p {
    line-height: 1.4;
    font-size: 1em;
    font-weight: 500;
    color: rgba(94,106,122,0.7);
}

/* - - - - - main04. 특별한이유 (main-special)  */
section.main-special {
    background-image: url(./img/bg-feather-left.png), url('./img/bg-feather-right.png');
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
/*    background-attachment: fixed, fixed;*/
}
section.main-special > .inner {
    padding-top: 100px;
    display: grid;
    grid-template-columns: 460px 450px;
/*    grid-template-rows: 1fr 2fr;*/
    gap: 0 150px;
    justify-content: center;
    align-items: center;
/*    border: 1px solid red;*/
    overflow: hidden;
}
section.main-special > .inner > * {
/*    border: 1px dashed cyan;*/
    max-width: 100%;
}
section.main-special .label-zone {
/*    width: 450px;*/
    display: flex;
    flex-direction: column;
    gap: 1em;
}
section.main-special .label-zone > a {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
    background-color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 24px 36px rgba(166, 180, 198, .28);
    padding: 0.6em 2em;
    border-radius: 3em;
    transition: all ease 0.4s;
    cursor: pointer;
}
section.main-special .label-zone > a.active {
    background-color: #FDF9F5;
    border-color: #C1AA8A;
    box-shadow: 0 24px 36px rgba(166, 180, 198, .0);
}
section.main-special .swiper-slide span,
section.main-special .label-zone > a span {
    font-family: var(--paperrozi);
    font-size: 0.6em;
    letter-spacing: 0.1em;
    color: #C1AA8A;
    text-transform: uppercase;
}
section.main-special .label-zone > a p {
    color: rgba(76, 83, 93, .7);
    font-weight: 600;
    font-size: 1.1em;
    letter-spacing: -0.04em;
}
section.main-special .label-zone > a.active p {
    color: #5E6A7A;
}

section.main-special  .window-wrapper {
    grid-column: 2;
    grid-row: 1 / span 2;
}
section.main-special  .window-wrapper .swiper-wrapper {
}
section.main-special .swiper-slide {
    border: 1px solid rgba(94, 106, 122, .2);
    background-color: #fff;
    max-width: inherit;

    display: flex;
    aspect-ratio: 1 / 1.5;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 3em;
    border-radius: 15em;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
/*    box-shadow: 15px 70px 100px rgba(153, 176, 191, .28);*/
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}
section.main-special .swiper-slide.swiper-slide-active {
}
section.main-special .swiper-slide span {}
section.main-special .swiper-slide h5 {
    color: #5E6A7A;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    font-size: 1.4em;
    letter-spacing: -0.04em;
    margin: 0.75em auto;
}
section.main-special .swiper-slide p {
    color: #5E6A7A;
    line-height: 1.6;
    text-align: center;
    font-size: 1.0em;
    letter-spacing: -0.02em;
}

section.main-special .swiper-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; margin-top:2em;
    gap: 1em;
}
section.main-special .swiper-controls * {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    color: #5E728D;
    text-transform: uppercase;
}
section.main-special .swiper-controls .fraction { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:15px;}
section.main-special .swiper-controls span {
    font-family: var(--paperrozi);
    opacity:0.5;
}
section.main-special .swiper-controls span.bar {
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: rgba(0, 0, 0, .5);
}
section.main-special .swiper-controls span.current { font-weight:700; opacity:1 }
section.main-special .swiper-controls button {
    all : unset;
    width: 1em;
    height: 1em;
    display: flex;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    cursor: pointer;
}
section.main-special .swiper-controls button.btn-prev { background-image: url(./img/btn-prev.svg);}
section.main-special .swiper-controls button.btn-next { background-image: url(./img/btn-next.svg);}



/* - - - - - main05. 준비된환경 (main-system)  */
section.main-system {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-image: url('./img/main-system-bg.jpg');
}
section.main-system .inner {
    max-width: 100vw;
}
section.main-system .system-slider {
    margin-top: 50px;
}

section.main-system .swiper-slide {
    cursor: pointer;
    background-color: #fff;
    border-radius: 2em;
    padding: 3em;
    background-size: 5em;
    background-position: right 1em top 1em;
    background-repeat: no-repeat;
    border: 3px solid #fff;
    transition: all ease 0.3s ;
/*    box-shadow: 0 38px 70px rgba(166, 180, 198, .28);*/
}
section.main-system .swiper-slide.swiper-slide-active {
    background-color: #FDF9F5;
    border-color: #C1AA8A;
}
section.main-system .swiper-slide span {
    font-family: var(--paperrozi);
    font-size: 0.6em;
    letter-spacing: 0.1em;
    color: #C1AA8A;
    text-transform: uppercase;
}
section.main-system .swiper-slide h5 {
    color: #5E6A7A;
    font-weight: 600;
    line-height: 1.4;
    font-size: 1.4em;
    letter-spacing: -0.04em;
    margin: 0.5em 0;
}
section.main-system .swiper-slide p {
    color: #5E6A7A;
    line-height: 1.6;
    font-size: 1.0em;
    letter-spacing: -0.02em;
}

section.main-system .control {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-top: 2em
}
section.main-system .control * {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    color: #FDF9F5;
    text-transform: uppercase;
}
section.main-system .control .swiper-pagination { all:unset; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:15px; font-size: 0.8em;}
section.main-system .control span {
    font-family: var(--paperrozi);
    opacity:0.5;
}
section.main-system .control span.bar {
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: rgba(255, 255, 255, .5);
}
section.main-system .control span.current { font-weight:700; opacity:1; color:#ECD6B8 }
section.main-system .control .btn-prev,
section.main-system .control .btn-next {
    all : unset;
    width: 1em;
    height: 1em;
    display: flex;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    cursor: pointer;
}
section.main-system .control .btn-prev { background-image: url(./img/btn-prev-dark.svg);}
section.main-system .control .btn-next { background-image: url(./img/btn-next-dark.svg);}


/* - - - - - main06. 전문의3인 (main-doctor)  */
section.main-doctor {}
section.main-doctor .unit.doctor {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 80px;
    align-items: flex-start;
}
section.main-doctor .unit.doctor > a {
    width: 350px;
    display: block;
    cursor: pointer;
    transition: all ease 0.5s;
}
section.main-doctor .unit.doctor > a:hover {
    transform: translateY(-20px);
}

section.main-doctor .unit.doctor > a .img {
    aspect-ratio: 4 / 5;
    border: 3px solid #fff;
    border-radius: 40px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    background-image: url(./img/main-doctor-bg-default.jpg);
    transition: all ease 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
section.main-doctor .unit.doctor > a:hover .img {
    border-color: #C1AA8A;
    background-image: url(./img/main-doctor-bg-active.jpg);
}
section.main-doctor .unit.doctor > a .img img {
    position: relative;
}

section.main-doctor .unit.doctor > a .txt {
    padding: 1em 2em;
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 15%;
    background-image: url('./img/main-doctor-arrow.svg');
    transition: all ease 0.5s;
}
section.main-doctor .unit.doctor > a .txt h4.name {
    color: #4C535D;
    font-size: 1.8em;
}
section.main-doctor .unit.doctor > a .txt h4.name small {
    font-size: 0.6em;
    color: inherit;
    font-weight: 600;
    margin-left: 0.5em;
}
section.main-doctor .unit.doctor > a .txt p {
    color: #C1AA8A;
    font-size: 0.9em;
    font-weight: 600;
}








/* - - - - - main07. 클리닉그리드 (main-clinic)  */
section.main-clinic .inner {
    max-width: 100vw;
    width: 100%;
}
section.main-clinic .unit.clinic-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 20px 50px rgba(242, 246, 248, 1);
}
section.main-clinic .unit.clinic-grid > a {
    display: block;
    overflow: hidden;
    filter: grayscale(1.0);
    box-shadow: 0 0 80px -30px rgba(235, 240, 242, 0);
    transition: all ease 1s;
}
section.main-clinic .unit.clinic-grid > a:hover {
    filter: grayscale(0);
    box-shadow: 0 30px 50px -30px rgba(166, 180, 198, 1.0);
}
section.main-clinic .unit.clinic-grid > a + a {
    border-left: 1px solid rgba(50, 50, 50, .1);
}
section.main-clinic .unit.clinic-grid > a h4 {
    font-weight: 600;
    text-align: center;
    font-size: 1.25em;
    color: #C1AA8A;
    padding: 1em;
    transition: all ease 0.3s;
}
section.main-clinic .unit.clinic-grid > a .img {
    aspect-ratio: 5 / 3;
    background-color: #f4f4f4;
    position: relative;
    max-width: inherit;
    overflow: hidden;
}
section.main-clinic .unit.clinic-grid > a .img .zoom {
    width: 100%;
    height: 100%;
    transform: scale(1.0);
    background-size: cover;
    background-position: center;
    transition: all ease 0.5s;
}
section.main-clinic .unit.clinic-grid > a .txt {
    position: relative;
    background-color: #fff;
}
section.main-clinic .unit.clinic-grid > a .txt span.plus {
    display: block;
    width: 4em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 0 auto;
    transform: translateY(-45%);
    background-color: #fff;

    background-image: url('./img/main-clinic-plus.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;

    transition: all ease 0.6s;
}
section.main-clinic .unit.clinic-grid > a .txt p.txt-center {
    margin: -1.5em 0 2em;
    line-height: 1.6;
    font-size: 1rem;
}
section.main-clinic .unit.clinic-grid > a:hover h4 { ; }
section.main-clinic .unit.clinic-grid > a:hover .img .zoom { transform: scale(1.08); }
section.main-clinic .unit.clinic-grid > a:hover .txt span.plus {
    transform: translateY(-45%) rotate(90deg);
}

/* - - - - - main10. 둘러보기 (main-interior)  */
section.main-interior {
    position: relative;
    background-size: ;
}
section.main-interior > .inner {
    max-width: 100vw;
    width: 100%;
    overflow: hidden;
    padding-bottom: 0;
}
section.main-interior .slide-box {
    width: 100vw;
    margin: 60px auto 0;
    overflow: hidden;
}
section.main-interior .swiper-slide {
    border-radius: 40px;
    aspect-ratio: 16 / 9;
    background-color: #eee;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center;
    opacity: 0.45;
    scale: 0.8;
    transition: all ease 0.8s;
}
section.main-interior .swiper-slide.swiper-slide-active {
    scale: 1.0;
    opacity: 1;
}
section.main-interior .control {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 64vw;
    height: 3vw;
    z-index: 1;
    position: absolute;
    left: 50vw;
    bottom: 50%;
    transform: translate(-50%, 100%);
/*    border: 1px dashed magenta;*/

}
section.main-interior .control .button-prev,
section.main-interior .control .button-next {
    display: block;
    height: 100%; aspect-ratio: 1/1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    cursor: pointer;
    overflow: hidden;
}

section.main-interior .control .button-prev:hover,
section.main-interior .control .button-next:hover {
}

section.main-interior .control .button-prev { background-image:url('./img/interior-prev.svg') }
section.main-interior .control .button-next { background-image:url('./img/interior-next.svg') }



/* - - - - - main11. 오시는길 (main-locate)  */
section.location {
    background-size: 1px 500px;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-image: url('./img/bg-gradient-cloud.png');
}
section.location .inner { padding-bottom:0 }
section.location .scrollText { z-index:1; mix-blend-mode:multiply; }

section.location .grid {
    max-width: 1350px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    justify-content: center;
    gap: 50px;
    align-items: center;
}
section.location .grid .zone-info {}
section.location .grid .zone-info > div + div { margin-top:50px }
section.location .grid .zone-info > div.title-zone h4 {
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 1em;
}

section.location .grid .zone-info > div.info-grid {
    display: grid;
    grid-template-columns: 6em auto;
}
section.location .grid .zone-info > div.info-grid h5 {
    font-size: 1.1em;
}
section.location .grid .zone-info ul.time li {
    font-size: 1.1em
}
section.location .grid .zone-info ul.time li strong {
    color: var(--primary);
    font-weight: 500;
}
section.location .grid .zone-info ul.time li p {
    margin-bottom: 0.5em;
    letter-spacing: 0.01em;
}


section.location .grid .zone-info a.number {
    display: inline-block;
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.0;
}



section.location .grid > div.zone-map {}
section.location .grid > div.zone-map {
    border: 1px solid rgba(0, 0, 0, .05);
    padding: 40px 40px 15px;
    border-radius: 40px;
    box-shadow: 0 35px 40px -20px rgba(165, 170, 174, 0.4);
    background-color: #fff;
}
section.location .grid > div.zone-map #map {
    border: 1px solid rgba(0, 0, 0, .05);
    aspect-ratio: 1 / 1;
    background-color: #f4f4f4;
    border-radius: 5px;
}
section.location .grid > div.zone-map .findroad {
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: #fff;
    align-items: center;
}
section.location .grid > div.zone-map .findroad > p {
    font-size: 1.2em;
    line-height: -0.05em;
    font-weight: 500;
}
section.location .grid > div.zone-map .findroad > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin: 1.5em 0 1.5em -2em;
}
section.location .grid > div.zone-map .findroad > ul li {
}
section.location .grid > div.zone-map .findroad > ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 6px;
    font-size: 14px;
    color: #666;
}

section.location .grid > div.zone-map .findroad > ul li + li {
    border-left: 2px solid #eee;
}
section.location .grid > div.zone-map .findroad > ul li img {
    max-width: 37px;
    transition: transform ease 0.3s;
}
section.location .grid > div.zone-map .findroad > ul li:hover a { color:#111 }
section.location .grid > div.zone-map .findroad > ul li:hover img {
    transform: translateY(-5px);
}



















/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUBPAGE : 레이아웃 / 공통요소
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 서브 */
section.sub {
    --inner : 1280px;
}
/*  */
section.sub.sub-info { overflow:visible; }
section.sub.sub-info > .inner {
    padding-bottom: 0;
}
/* 서브 임시 */
section.sub.temp {
/*    border: 1px dashed #ddd;*/
}

/* 서브 브레드크럼 */
div.sub-breadcrumb {
    width: var(--inner);
}
div.sub-breadcrumb nav.breadcrumb > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
}
div.sub-breadcrumb nav.breadcrumb > ul > li {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 0;
    gap: 1em;
}
div.sub-breadcrumb nav.breadcrumb > ul > li.has-children::after {
    content: '';
    display: block;
    height: 0.5em;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-image: url(./img/breadcrumb-chevron.svg);
}
div.sub-breadcrumb nav.breadcrumb > ul li.home {
    width: 2em;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('./img/breadcrumb-home.svg');
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: center;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children {
    position: relative;
    font-size: 16px;
    padding: 0;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 0.8;
    cursor: pointer;
    padding: 1em 0;

    font-weight: 600;
}

div.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu {
    display: none;
    position: absolute;
    max-width: inherit;

    width: auto;
    top: 99%;
    left: 0;
    z-index: 2;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ddd;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children > a.on + ul.sub-breadcrumb-menu {
    display: block;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li {
    white-space: nowrap;
    font-size: 0.9em;
    transition: padding ease 0.3s;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li a {
    display: block;
    color: #323f4f;
    padding: 0.75em 1.5em;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children a.current,
div.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li:hover a,
div.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li.current a {
    color: var(--secondary);
    background-color:#f9f9f9;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children a.current,
div.sub-breadcrumb nav.breadcrumb ul li.has-children ul.sub-breadcrumb-menu li.current a {
    font-weight:600;
}
div.sub-breadcrumb nav.breadcrumb ul li.has-children.current > a { color:var(--primary); }

div.sub-breadcrumb nav.breadcrumb ul li.has-children:hover > ul.sub-breadcrumb-menu { display: block; }

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



div.sub-headerbox {
    border-radius: 60px;
    width: 77%;
    margin: 50px auto 0;
    overflow: hidden;
    background-image: url(./img/sub-headerbox-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 80px 100px;
    position: relative;
}

div.sub-headerbox .title-zone p.kozy { font-size:0.65em }
div.sub-headerbox .title-zone .p-wrap p { font-size:1em }
div.sub-headerbox .title-zone .section-title::after {
    content: '';
    display: block;
    width: 120%;
    height: 1px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin: 40px auto 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUBPAGE : 00 코지이비인후과
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - 서브페이지 : 병원소개 (sub0-1.php) */
/* - - - - - 서브페이지 : 의료진소개 (sub0-2.php) */
section.sub-doctor {}
section.sub-doctor .inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 80px 80px;
    padding-top: 0;
    --secondary : #A29481;
}
/**/
section.sub-doctor figure {
    display: flex;
    flex-direction: column;
    width: 35%;
    background-color: #f4f4f4;
    border-radius: 40px;
    align-items: center;
    justify-content: flex-end;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-image: url(./img/sub-doctor-profile-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
section.sub-doctor figure img { max-width:96% }
/**/
section.sub-doctor article.profile {
    width: 45%;
}
section.sub-doctor article.profile > span {
    background-color: var(--primary);
    color: #fff;
    display: block;
    padding: 0.2em 2.5em;
    border-radius: 3em;
    text-align: center;
    width: fit-content;
}
section.sub-doctor article.profile > div.name {
    display: flex;
    flex-direction: row;
    gap: 1em;
    padding: 0 1em;
    align-items: center;
    margin: 1.25em 0 1.5em;
    background: linear-gradient(90deg, #fef1da, #fff);
}
section.sub-doctor article.profile > div.name::before {
    content: '';
    display: block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    background-image: url('./img/symbol.svg');
}

section.sub-doctor article.profile > div.name h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
section.sub-doctor article.profile > div.name h3 small {
    font-weight: 600;
    font-size: 0.5em;
    margin-left: 0.5em;
}
section.sub-doctor article.profile > div.name h3 span.eng {
    color: #EBDCC3;
    font-weight: 300;
    font-size: 0.7em;
    display: inline-block;
    margin-left: 3em;
}



/**/
section.sub-doctor article.career {
    width: 85%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}
section.sub-doctor article.career > div {
    background-color: #f6f6f6;
    padding: 40px;
    border-radius: 40px;
}
section.sub-doctor article.career > div h5 {
    font-size: 1.2em;
    color: var(--dark);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
}
section.sub-doctor article.career > div h5::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
    background-image: url('./img/career-after.svg');
}


section.sub-doctor article.career > div div.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

section.sub-doctor#kdj article.career > div div.duo{
    grid-template-columns: 1fr 1.5fr;
}

section.sub-doctor article.career ul li {
    display: grid;
    grid-template-columns: 1em auto;
}
section.sub-doctor article.career ul li + li { margin-top:0.25em }

section.sub-doctor article.career ul li::before {
    content: '-';
}
section.sub-doctor article.career ul li p {
    line-height: 1.4;
    color: #555;
    font-size: 0.9em;
}
section.sub-doctor article.career ul li p small {
    opacity: 0.7;
    font-size: 0.86em;
    display: inline-block;
}


/* - - - - - 서브페이지 : 시설 둘러보기 (sub0-3.php) */
/* - - - - - 서브페이지 : 진료안내 (sub0-4.php) */