/*
Theme Name: 제이장내과
Author: Jeymedi
Author URI: http://jeymedidesign.dothome.co.kr
Description: 제이장내과 웹사이트 테마
Version: 1.0.0
*/

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

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

/* 상단 메시지 */
#slogan {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100vw;
    z-index: 9;
}
#slogan p {
    color:#fff;
    text-align:center;
    font-size: 16px;
}
/*header.subpage #slogan { display:none; }*/


/* 헤더 공통*/
header.header {
    position: fixed;
    top: 0;
    width: 100vw;
    transition: top ease 0.5s;
    z-index: 999;
}
header.header .inner {
    display: grid;
    grid-template-columns: 480px auto;
    align-items: center;
    justify-content: space-between;
}
/* 메인 초기화면 */
header.header.main.init {
    top: 54px;
}
/*header.header .inner > * { border: 1px dashed lime }*/

header.header .inner nav.gnb ul.menu {
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
header.header .inner nav.gnb ul.menu a {
    display: block;
    text-align: center;
}
/* 각자 영역에서 메뉴 숨기기 */
header.header.upside ul.sub-menu { display:none; }
header.header.downside ul.menu > li.menu-item-has-children > a { display:none; }

/* 메인메뉴 영역 */
header.header.upside {
    background-color: #fff;
    border-bottom: 1px solid #E7E6E5;
}


header.header.upside .inner a.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-repeat: no-repeat;
    background-position: left center;
    aspect-ratio: 294 / 50;
    background-size: auto 60%;
}
header.header.upside.init .inner a.logo {
    aspect-ratio: 294 / 60;
    background-size: auto 50%;
}
header.header.upside.main .inner a.logo { background-image: url(./img/logo-header.svg); }
header.header.upside.subpage .inner a.logo { background-image: url(./img/logo-header-fff.svg); }
header.header.upside .inner a.logo img {
/*    display: block;*/
    display: none;
}


/* 메인메뉴 */
header.header.upside ul.menu > li.menu-item-has-children > a {
    font-weight: 500;
    letter-spacing: -0.04em;
}
header.header.upside ul.menu > li.menu-item-has-children.current-menu-parent > a {
    color: var(--primary);
    font-weight: 600;
}

/* 서브메뉴 영역 */
header.header.downside {
    background-color: #FFFDFB;
    top: 82px;
    height: 0;
    max-height: 380px;
    overflow: hidden;
    transition: all ease 0.5s;
}
header.header.downside.on {
    top: 82px;
    height: 380px;
    border-bottom: 1px solid #E7E6E5;
}

header.header.downside.init.on {
    top: 153px;
}
header.header.downside .header-info-zone {
    border-right: 2px solid #F9F6F2;
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 25px;
    padding: 0 15px;
}
header.header.downside .header-info-zone * {
    font-size: 15px;
    color: #4E4E4E;
    letter-spacing: -0.04em;
}
header.header.downside .header-info-zone .withicon {
    display: grid;
    grid-template-columns: 2.2em auto;
    align-items: center;
    grid-gap: 0.5em;
}
header.header.downside .header-info-zone p.callnumber * {
    font-weight: 600;
    color: var(--secondary);
    font-size: 26px;
    line-height: 1.0;
}
header.header.downside .header-info-zone .timetable {
    width: 80%;
    background-color:#F9F6F2;
    padding: 15px;
    border-radius: 10px;
}
header.header.downside .header-info-zone .timetable table {
    width: fit-content;
    margin: 0 auto;
}

header.header.downside .header-info-zone .timetable th,
header.header.downside .header-info-zone .timetable td {
    text-align: justify;
    line-height: 0.5;
    font-size: 17px;
}

header.header.downside .header-info-zone .timetable tr td::before,
header.header.downside .header-info-zone .timetable tr td::after,
header.header.downside .header-info-zone .timetable tr th::before,
header.header.downside .header-info-zone .timetable tr th::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
    font-size: 0;
}
header.header.downside .header-info-zone .timetable table th {
    font-weight: 500;
    padding-right: 2em;
}
header.header.downside .header-info-zone .timetable table td {
    letter-spacing: 0.07em;
}

header.header.downside .header-info-zone div p.txt-red {
    margin-top: 0.75em;
    color: #E12C06;
}
header.header.downside .header-info-zone .flex.row {
    grid-gap: 3em;
}
header.header.downside .header-info-zone .flex.row a {
    font-weight: 500;
}

/* 서브메뉴 */
header.header.downside nav {
/*    border-left: 2px solid #F9F6F2;*/
    padding: 15px 0;
}
header.header.downside ul.sub-menu {
    padding-bottom: 1em;
}
header.header.downside ul.sub-menu a {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.04em;
    padding: 0.35em;
    color: #4E4E4E;
    border-radius: 5px;
}
header.header.downside ul.sub-menu li.current-menu-item a {
    color: var(--secondary);
    font-weight: 500;
}
header.header.downside ul.sub-menu a:hover {
    background-color: #F9F6F2;
    color: #7A736B;
}



/*--------- header sub */
header.header.subpage {
    background-color: var(--primary);
    background-color: #ff7b32;
    border-bottom: 0;
}
header.header.upside.subpage { background-color: }
header.header.subpage .inner nav.gnb ul.menu a {
    color: #fff;
}
/*--------- header sub : 메인메뉴 */
header.header.subpage ul.menu > li.menu-item-has-children > a {
    font-weight: 400;
}
header.header.subpage ul.menu > li.menu-item-has-children.current-menu-parent > a {
    font-weight: 600;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
header.header.subpage ul.menu > li.menu-item-has-children.current-menu-parent > a::after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #fff;
    margin: 0 auto;
}



/* 퀵메뉴 */
#quickmenu {
    display: flex;
    flex-direction: column;
    z-index: 9;
    position: fixed;
    right: 50px;
    height: 260px;
    justify-content: space-around;
    top: calc(60% - 150px);
}
#quickmenu > a {
    display: block;
    width: 50px;
    aspect-ratio: 1 / 1;
    background-color: var(--secondary);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    cursor: pointer;

}
#quickmenu > a.quick-call { background-image:url(./img/quick-call.svg) }
#quickmenu > a.quick-locate { background-image:url(./img/quick-locate.svg) }
#quickmenu > a.quick-blog { background-image:url(./img/quick-blog.svg) }
#quickmenu > a.quick-top { background-image:url(./img/quick-top.svg) }



/* footer */
footer.footer {
    background-color: #F5F5F5;
    border-top: 1px solid #eee;
}
footer.footer * {
    font-size: 16px;
    color: #555;
}
footer.footer .inner {
    padding: 60px 0;
    display: grid;
    grid-template-columns: 220px auto;
    justify-content: center;
    align-items: center;
    grid-gap: 200px;
}
footer.footer .inner > div {
    display: grid;
    grid-gap: 30px;
}
footer.footer .inner > div .info-p-wrap {
    display: grid;
    grid-gap: 10px;
}
footer.footer .inner > div .info-p-wrap br.m + b {
    font-weight: 500;
    margin-left: 2em;
}

footer.footer .inner > div .footer-menu ul.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
}
footer.footer .inner > div .footer-menu ul.menu li + li {
    border-left: 2px solid #ddd;
    line-height: 1.0;
}
footer.footer .inner > div .footer-menu ul.menu li a {
    padding: 0 1em;
    line-height: 1.0;
}
footer.footer .inner > div .footer-menu ul.menu li:nth-child(1) a {
    padding-left: 0;
}

footer.footer .copyright {
/*    background-color: #EAE4DC;*/
    background-color: #eaeaea;
}
footer.footer .copyright p {
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1.5em;
    color: #777;
    font-size: 12px;
    font-weight: 500;
}








/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : mainvisual
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section.main-visual {
    width: 100vw;
    height: 100vh;
    background-color: #f9f6f2;
    position: relative;
/*    aspect-ratio: 16 / 9;*/
}
section.main-visual div.scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    font-size: 12px;
    color: #959595;
    mix-blend-mode: multiply;
}
section.main-visual div.scroll img {
    width: 50%;
     animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translatey(-5px); }
    50% { transform: translatey(-15px); }
    100% { transform: translatey(-5px); }
}

section.main-visual .frame {
    /*  아치 프레임  */
    display: block;
    width: 60vw;
    height: 22vw;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 47%;
    z-index: 10;

/*    border: 1px dashed lime;*/
    background-image: url(./img/mv-circle-frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;

}
/* 배경 & 텍스트 */
section.main-visual div.mvA {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
section.main-visual div.mvA div.txt {
    position: absolute;
    width: 50vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18%;
/*    border: 1px solid magenta;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.main-visual div.mvA div.txt span.name {
    font-size: 1.5vh;
    margin-bottom: 0.5em;
    color: var(--secondary);
    letter-spacing: 0.1em;
}
section.main-visual div.mvA div.txt p.mv-msg {
    font-size: 4.2vh;
    color: #4E4E4E;
    mix-blend-mode: multiply;
    letter-spacing: -0.045em;
    font-weight: 700;
}

section.main-visual div.mvA .swiper-slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}
section.main-visual div.mvA .swiper-slide,
section.main-visual div.mvA .swiper-slide .txt {
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.6s;
}
section.main-visual div.mvA .swiper-slide.swiper-slide-active,
section.main-visual div.mvA .swiper-slide.swiper-slide-active .txt {
    opacity: 1;
    visibility: visible;
}

section.main-visual div.mvA .swiper-slide.swiper-slide-active .txt p.mv-msg {
     transform: translateY(10px); opacity:0;
     animation: mvText 0.5s ease-in-out 0.5s both;
 }
@keyframes mvText {
    0% { transform: translateY(10px); opacity:0 }
    100% { transform: translateY(0); opacity:1 }
}

/* 써클이미지 */
section.main-visual div.mvB {
    position: absolute;
    width: 20vw;
    aspect-ratio: 1 / 1;
/*    border: 1px solid red;*/
    left: 50%;
    top: 47%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 99;
}
section.main-visual div.mvB .swiper-slide {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    border: 1px solid var(--secondary);
    position: relative;
    transition: opacity ease 0.5s;
}
section.main-visual div.mvB .swiper-slide.swiper-slide-active {
}

section.main-visual div.mvB .swiper-slide .circle {
    overflow: hidden;
    position: relative;
    top: 100%;
    height: 0;
    transition: all ease 1s;
    transition-delay: 0.5s;
}
section.main-visual div.mvB .swiper-slide.swiper-slide-active .circle {
    height: 100%;
    top: 0;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Common Elemnts
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section .inner {
    padding: 160px 0;
}
section .title-zone p { text-align:center; }
section .title-zone p.name {
    font-size: 0.75em;
    margin-bottom: 0.5em;
    color: var(--secondary);
    letter-spacing: 0.1em;
}
section .title-zone p.section-title {
    font-size: 2em;
    font-weight: 700;
    color: #4E4E4E;
    letter-spacing: -0.045em;
    font-family: var(--p);
}
section .title-zone .p-wrap { margin: 1.5em auto; }
section .title-zone p.section-desc {
    font-size: 1em;
    color: #4E4E4E;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.7;
}

section .unit {
    margin: 60px auto 0;
}
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 a.btn-moreview {
    color: var(--primary);
    font-size: 15px;
    letter-spacing: 0.01em;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 15em;
    position: relative;
    padding: 1.2em 1em;
    border-radius: 5em;
    background-color: #fff;
    border: 2px solid #fff;

    transition: all ease 0.3s;
}
section a.btn-moreview.solid { box-shadow: 0 3px 15px rgba(0, 0, 0, .1); }
section a.btn-moreview::before {
    content: '';
    display: block;
    width: 2em;
    border: 2px solid var(--primary);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    position: absolute;
}
section a.btn-moreview span {
    color:var(--primary);
    position: relative;
    z-index: 1;
    margin-left: 1em;
    line-height: 1.2;
    background-color: #fff;
    transition: all ease 0.1s;
}
section a.btn-moreview::after {
    content: url(./img/arrow-btn-moreview.svg);
    line-height: 1.0;
    transition: all ease 0.3s;
}
section a.btn-moreview.solid:hover {
    color: #fff;
    background-color: transparent;
    border-color: #fff
}
section a.btn-moreview.solid:hover::before {
    opacity: 0;
}
section a.btn-moreview.solid:hover span {
    color: #fff;
    background-color: transparent;
}
section a.btn-moreview.solid:hover::after {
    transform: translateX(-1em);
    filter: brightness(3) grayscale(1) contrast(3);
}


/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 메인클리닉
- - - - - - - - - - - - - - - - - - - - - -  */
section.main-clinic {}
section.main-clinic .bentogrid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-gap: 12px;
}
section.main-clinic .bentogrid > div {
/*    border: 1px solid red;*/
    background-color: #EAE4DC;
    border: 2px solid #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 5px 40px -10px rgba(255, 100, 7, 0.0);
    transition: all ease 0.4s;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
section.main-clinic .bentogrid > div a {
    display: flex;
    width: inherit;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 30px;
    background-color: rgba(0, 0, 0, .0);
    transition: all ease 0.4s;
}
section.main-clinic .bentogrid > div:hover a {
    background-color: rgba(0, 0, 0, .2);
}
section.main-clinic .bentogrid > div a p {
    color: #fff;
    text-align: center;
    font-size: 1.25em;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,.0);
    transition: all ease 0.4s;
}
section.main-clinic .bentogrid > div:hover a p {
    transform: translateY(-1em);
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
section.main-clinic .bentogrid > div a p span {
    font-size: 0.8em;
    font-weight: 400;
}
section.main-clinic .bentogrid > div:hover {
    border-color: var(--primary);
    box-shadow: 0 3px 40px rgba(255, 100, 7, 0.38);
}
section.main-clinic .bentogrid > div:nth-child(1) {
    background-image: url('./img/main-clinic-grid01.png');
    aspect-ratio: unset;
    /*  시작번호 / 몇 칸 늘릴지 : column이 가로  */
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
}
section.main-clinic .bentogrid > div:nth-child(2) {
    background-image: url('./img/main-clinic-grid02.png');
    grid-column: 4 / span 3;
}
section.main-clinic .bentogrid > div:nth-child(3) {
    background-image: url('./img/main-clinic-grid03.png');
    grid-column: 7 / span 3;
}
section.main-clinic .bentogrid > div:nth-child(4) {
    background-image: url('./img/main-clinic-grid04.png');
    grid-column: 4 / span 2;
}
section.main-clinic .bentogrid > div:nth-child(5) {
    background-image: url('./img/main-clinic-grid05.png');
    grid-column: 6 / span 2;
}
section.main-clinic .bentogrid > div:nth-child(6) {
    background-image: url('./img/main-clinic-grid06.png');
    grid-column: 8 / span 2;
}
section.main-clinic .bentogrid > div:nth-child(4),
section.main-clinic .bentogrid > div:nth-child(5),
section.main-clinic .bentogrid > div:nth-child(6) { aspect-ratio: 3 / 2.5; }


/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 메인 암검진
- - - - - - - - - - - - - - - - - - - - - -  */
section.main-cancer {}
section.main-cancer .img-txt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 80px;
}
section .img-txt > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 10px;
}
section .img-txt > div * { text-align:center; }

section.main-cancer .img-txt > div div.img {
    aspect-ratio: 1 / 1;
    width: 300px;
    padding: 20%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('./img/main-cancer-tornado.png');
}
section.main-cancer .img-txt > div p.txt-secondary {
    font-size: 1.4em;
    font-weight: 600;
}



/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 메인 치료 건수
- - - - - - - - - - - - - - - - - - - - - -  */
section.main-counter {
    position: relative;
    overflow: hidden;
/*    border: 1px solid red;*/
}
section.main-counter .inner.wide {
    padding: 50px 0 0;
}

section.main-counter div.case-wrap {
    position: relative;
    --height: 500px;
    height: var(--height);
}
section.main-counter div.case-wrap .case {
    background-color: #333;
    width: 55.25vw;
    height: var(--height);
    position: absolute;
    transform: skewX(-20deg);
    overflow: hidden;
    transition: all ease-in-out 1.0s, opacity linear 2s;
}
section.main-counter div.case-wrap .case > div[style] {
    position: absolute;
    top: 0;
    width: 120%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: right;
    transform: skewX(20deg);

    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    transition: background ease-in-out 2.5s;
}

section.main-counter div.case-wrap .case .txt {
    width: 50%;
    opacity: 0;
    transition: opacity linear 1.5s;
    transition-delay: 0.5s;
}
section.main-counter div.case-wrap .case.on .txt {
    opacity: 1;
}

section.main-counter div.case-wrap .case .txt p {
    color: #fff;
    text-align: center;
    line-height: 1.0;
}
section.main-counter div.case-wrap .case .txt p.subject {
    letter-spacing: -0.035em;
    font-weight: 700;
    font-size: 2.5em;
}
section.main-counter div.case-wrap .case .txt p .num_action {
    height: 2em;
    line-height: 1.5em;
    font-size: 3em;
    color: #FFF787;
    display: block;
    font-family: "Playfair Display", serif;
}
section.main-counter div.case-wrap .case .txt p small {
    color: inherit;
    font-size: 1rem;
}
/* 내시경  */
section.main-counter div.case-wrap .case.endoscope {
    transform: skewX(-20deg) translate(-7vw, -150px);
/*    transition-delay: 0.25s;*/
}
section.main-counter div.case-wrap .case.endoscope.on {
    transform: skewX(-20deg) translate(-7vw, -50px);
}
section.main-counter div.case-wrap .case.endoscope > div[style] {
    background-position: right bottom;
    background-size: 108%;
}
section.main-counter div.case-wrap .case.endoscope.on > div[style] {
    background-position: right -80% bottom;
}

section.main-counter div.case-wrap .case.endoscope .txt {
    margin-left: 20%;
}
/* 절제술  */
section.main-counter div.case-wrap .case.surgery {
    transform: skewX(-20deg) translate(49vw, 100px);
}
section.main-counter div.case-wrap .case.surgery.on {
    transform: skewX(-20deg) translate(49vw, 0);
}
section.main-counter div.case-wrap .case.surgery > div[style] {
    right: 0;
    background-position: center;
    background-size: 100%;
}
section.main-counter div.case-wrap .case.surgery.on > div[style] {
    background-position: top;
}
section.main-counter div.case-wrap .case.surgery .txt {
    margin-left: 30%;
}

section.main-counter div.counter-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('./img/main-counter-circle-bg.png');
    z-index: 5;
    box-shadow: 0 5px 30px rgba(255, 255, 255, .8);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 10px;

    transition: all linear 0.8s;
}


section.main-counter div.counter-circle * { text-align:center; }
section.main-counter div.counter-circle .img {
    display: flex;
    flex-direction: column;
    color: #EE751C;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.5em;
}
section.main-counter div.counter-circle .img img { width:60%; margin: 0 auto; }
section.main-counter div.counter-circle p {
    font-size: 0.75em;
    line-height: 1.5;
}



/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 메인 진료철학
- - - - - - - - - - - - - - - - - - - - - -  */
section.main-think {
    margin-top: 100px;
    max-width: 100vw;
    overflow: hidden;
}
section.main-think .unit.think-thm {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-gap: 100px;
}
section.main-think .unit.think-thm::after {
    content: '';
    display: block;
    width: 60%;
    height: 2px;
    background-color: var(--primary);
    position: absolute;
    top: calc( 50% - 1px );
    left: 20%;
    z-index: -1;
}
section.main-think .unit.think-thm > button {
    outline: 0;
    border: 2px solid var(--primary);
    width: 140px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 25px rgba(255, 186, 174, .4);
}
section.main-think .unit.think-thm > button img { width:60%; }
section.main-think .unit.think-thm > button.active {
    background-color: var(--primary);
}
section.main-think .unit.think-thm > button.active img {
    filter: brightness(2) grayscale(1) contrast(2);
}
/*  */
section.main-think .think-swiper {
    position: relative;
    margin: 60px auto 0;
}
section.main-think .think-swiper .control {
    position: absolute;
    z-index: 5;
    width: 200px;
    grid-gap: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 18px 30px;
    border-radius: 100px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, .2);
    bottom: 30px;
    left: calc( 50% - 100px );
    transform: translateX( 23vw );
}
section.main-think .think-swiper .control > div {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #8F6851;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
section.main-think .think-swiper .control > div.button-prev { background-image: url(./img/arrow-button-prev.svg); }
section.main-think .think-swiper .control > div.button-next { background-image: url(./img/arrow-button-next.svg); }
/**/
section.main-think .think-swiper .swiper-slide {
    background-color: #444;
    padding: 50px 60px;
    border-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    aspect-ratio: 2 / 0.85;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
section.main-think .think-swiper .swiper-slide .txt p {
    color: #fff;
    font-size: 16px;
}
section.main-think .think-swiper .swiper-slide .txt p.subject {
    font-size: 1.4em;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5em;
}


/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 메인 의료진
- - - - - - - - - - - - - - - - - - - - - -  */
section.main-doctor {
    --inner : 1400px
}
section.main-doctor .title-wrap {
    display: grid;
    grid-template-columns: 120px auto;
    align-items: center;
    grid-gap: 30px;
}
section.main-doctor .title-wrap > img { width:100% }
section.main-doctor .title-wrap > div .flex {
    grid-gap: 1.5em;
    align-items: flex-start;
}
section.main-doctor .title-wrap > div .flex img { height: 3em }
section.main-doctor .title-wrap > div .flex p.label {
    background-color: var(--primary);
    color: #fff;
    font-size: 1.7em;
    font-weight: 600;
    border-radius: 3em;
    line-height: 0.6;
    padding: 0.55em 1em;
    transform: translateY(-0.15em);
}
section.main-doctor .title-wrap > div p.txt-left {
    padding-top: 1em;
}
/**/
section.main-doctor .orange-zone {
    position: relative;
    margin-top: 0;

    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    justify-content: space-between;

    background-repeat: no-repeat;
    background-position: center right 45%;
    background-image: url('./img/symbol-fff-op20.svg');
}
section.main-doctor .orange-zone::after {
    content: '';
    display: block;
    width: 100vw;
    height: 80%;
    background-color: #DB6702;
    background-image: url('./img/orange-zone-bg.jpg');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
section.main-doctor .orange-zone > div.img {
    background-color: #f7f7f7;
    aspect-ratio: 3 / 4;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /*  추후삭제  */
    color: rgba(20, 20, 20, .1);
    font-weight: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}
section.main-doctor .orange-zone > div.txt p { color:#fff }

section.main-doctor .orange-zone > div.txt div.deco p.deco {
    font-size: 2.25em;
    font-weight: 300;
    width: 55%;
    opacity: 0.3;
    line-height: 1.0;
    mix-blend-mode: screen;
    font-family: var(--p);
    text-transform: capitalize;
    margin-bottom: 0.75em;
}
section.main-doctor .orange-zone > div.txt div.deco p.deco span {
    margin-left: 6em;
}
section.main-doctor .orange-zone > div.txt div.content {
    padding-left: 10px;
}
section.main-doctor .orange-zone > div.txt div.content p.doctor-name {
    font-size: 26px;
}
section.main-doctor .orange-zone > div.txt div.content p.doctor-name b {
    font-size: 1.8em;
    margin-right: 0.5em;
}
section.main-doctor .orange-zone > div.txt div.content p.doctor-name span {
    font-weight: 300;
}
section.main-doctor .orange-zone > div.txt div.content p.doctor-name-sub {}
section.main-doctor .orange-zone > div.txt div.content div.p-wrap {
    margin: 2em 0;
    font-size: 1.1em;
}



/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 둘러보기 (공통요소)
- - - - - - - - - - - - - - - - - - - - - -  */
section.interior {
    max-width: 100vw;
    overflow: hidden;
}
section.interior .slide-box {
    margin: 60px auto 0;
    position: relative;
    padding-bottom: 40px;
}

section.interior .slide-box .swiper-space {
}
section.interior .swiper-slide {
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #E2DACF;
    opacity: 0.6;
    overflow: hidden;
    border-radius: 5px;
    transition: all ease 0.6s;
    transform-origin: top center;
    box-shadow: 0 15px 40px -10px rgba(100, 100, 100, 0.5);
}
section.interior .swiper-slide.swiper-slide-active {
    transform: scale(0.8);
    opacity: 1;
}
section.interior .slide-box div.control {
    width: 40vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
section.interior .slide-box div.control > div {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
}
section.interior .slide-box div.control > div .swiper-pagination {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    grid-gap: 1em;
}
section.interior .slide-box div.control > div .swiper-pagination i {
    opacity: 0.3;
}
section.interior .slide-box div.control > div > a {
    display: block;
    cursor: pointer;
    aspect-ratio: 2 / 1;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
}
section.interior .slide-box div.control > div > a.button-prev { background-image: url(./img/arrow-button-prev-preview.svg); }
section.interior .slide-box div.control > div > a.button-next { background-image: url(./img/arrow-button-next-preview.svg); }

section.interior .slide-box div.control a.btn-moreview {
    margin: 0 auto;
}


/* - - - - - - - - - - - - - - - - - - - - - -
    MAIN PAGE : 오시는길 (공통요소)
- - - - - - - - - - - - - - - - - - - - - -  */
section.locate {}
section.locate .unit {
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    justify-content: center;
}
section.locate .unit > #map {
    aspect-ratio: 1 / 0.8;
    background-color: #F9F6F2;
}
section.locate .unit > .info-zone {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    padding-left: 12vw;
}
section.locate .unit > .info-zone > p.subject {
    font-size: 2.75em;
}
section.locate .unit > .info-zone > div > p.unit-title {
    font-size: 1.6em;
    font-weight: 700;
    font-family: var(--p);
    letter-spacing: -0.035em;
}
section.locate .unit > .info-zone > div > p.unit-title .number {
    letter-spacing: 0;
    margin-left: 1em;
}
section.locate .timetable {
    padding: 10px 5px;
}
section.locate .timetable th,
section.locate .timetable td {
    text-align: justify;
    line-height: 0.5;
    font-size: 20px;
}
section.locate .timetable tr td::before,
section.locate .timetable tr td::after,
section.locate .timetable tr th::before,
section.locate .timetable tr th::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
    font-size: 0;
}
section.locate .timetable table th {
    font-weight: 500;
    padding-right: 2em;
}
section.locate .timetable table td {
    letter-spacing: 0.07em;
}
section.locate .unit > .info-zone > div > .info-time-wrap p.txt-red {
    margin-top: 0.75em;
    color: #E12C06;
    font-size: 16px;
}

section.locate .unit > .info-zone > div.links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: 20px ;
    margin-top: 20px;
}
section.locate .unit > .info-zone > div.links a {
    border: 2px solid #03CF5D;
    border-radius: 3em;
    width: 15em;
    font-weight: 500;
    font-size: 1em;
    padding: 0.75em 1.5em;
    text-indent: 2.5em;
    letter-spacing: -0.04em;
    background-repeat: no-repeat;
    background-position: left 1em center;
    background-size: auto 70%;


    box-shadow: 0 0 15px -5px rgba(168, 168, 168, .0);
    transition: all ease 0.4s;
}
section.locate .unit > .info-zone > div.links a:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 15px 0 rgba(168, 168, 168, .2);
}

section.locate .unit > .info-zone > div.links a.map-naver { background-image:url('./img/icon-btn-map-naver.png'); }
section.locate .unit > .info-zone > div.links a.blog { background-image:url('./img/icon-btn-blog.svg'); }
section.locate .unit > .info-zone > div.links a::after {
    content: '';
    display: inline-block;
    aspect-ratio: 2.5 / 1;
    height: 1em;
    transform: translateY(0.2em) translateX(1em);
    line-height: 1.0;
    background-repeat: no-repeat;
    background-size: auto 60%;
    background-position: center right;
    background-image: url('./img/arrow-btn-link.svg');
    transition: all ease 0.4s;
}
/*section.locate .unit > .info-zone > div.links a:hover::after {
    background-position: center right 3em;
}*/










/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB TEMPLATE LAYOUT
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 서브 헤더 */
section.sub-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #F9F6F2;
}
section.sub-header > .inner {
    padding: 130px 0;
}
section.sub-header .page-title-eng {
    display: block;
    text-align: center;
    font-size: 0.75em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    letter-spacing: 0.15em;
    opacity: 0;
    animation-fill-mode: both;
}
section.sub-header .page-title {
    color: #fff;
    text-align: center;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: -0.045em;
    font-family: var(--p);
    opacity: 0;
    animation-fill-mode: both;
}

/* 서브페이지 타이틀 (공통) */
section.sub .title-zone p.title {
    font-size: 2.25em;
    color: #4E4E4E;
    letter-spacing: -0.045em;
    font-family: var(--p);
    margin: 1em 0;
    line-height: 1.3;
    font-weight: 700;
}
section.sub .title-zone p.title * {
    letter-spacing: inherit;
    line-height: inherit;
}

section.sub .title-zone p.title i {
    font-weight: 300;
}
section.sub .title-zone p.title b {
    font-weight: 700;
}
section.sub .title-zone .p-wrap { margin: 0; }
section.sub .title-zone .p-wrap p {
    font-size: 0.9em;
    color: #666;
    letter-spacing: 0;
    line-height: 1.7;
}




/* 서브페이지 인트로 */
section.sub.intro > .inner {
    padding: 70px 0;
}
section.sub div.sub-intro {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-gap: 80px;
}
section.sub div.sub-intro div.img {
    background-color: #F9F6F2;
    border-radius: 40px;
    aspect-ratio: 5 / 2.7;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 10px 30px -10px rgba(100, 100, 100, 0.5);
}
section.sub div.sub-intro div.txt {}
section.sub div.sub-intro .title-zone p { text-align:left; }



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SUB PAGE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */