@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 * Dependency : css/jt-strap.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) HEADER
 * 03) FOOTER
 * 04) SCROLL TOP
 * 06) CONTAINER
 * 07) PAGE
 * 08) SEARCH & TAG
 * 09) PRIVACY
 * 10) 비급여수가안내
 * 11) 404
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
html { font-size: 6.25%; }
html.safari.desktop { font-size: 1px; }

body { overflow-x: hidden; font-family: var(--wp--preset--font-family--pretendard); font-size: 16rem; color: var(--wp--preset--color--gray-800); }
a { color: var(--wp--preset--color--jt-primary); text-decoration: none; }

/* WRAP */
.wrap { max-width: 1200rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 720rem; margin: 0 auto; position: relative; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 94rem; position: fixed; top: 0; left: 0; background: var(--wp--preset--color--white); border-bottom: 1px solid transparent; transition: border .2s; z-index: 500; }
.header__inner { height: 100%; margin: 0 52rem; position: relative; }

/* LOGO */
#logo { width: 165rem; height: 50rem; position: absolute; left: 0; top: 18rem; z-index: 2; }
#logo a { display: block; width: 100%; height: 100%; }
#logo a svg, #logo a img { display: block; width: 100%; height: 100%; }

/* MENU */
.menu-container { display: block; width: 100%; position: relative; font-size: 0; line-height: 1; text-align: center; z-index: 1; }
#menu { display: inline-block; vertical-align: middle; }
#menu a { display: block; transition: color .3s; }
#menu a span { position: relative; }

#menu ul.sub-menu { opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
#menu > li:hover > ul, #menu > li.focusin > ul { opacity: 1; visibility: visible; }

/* 1DEPTH */
#menu > li { display: inline-block; vertical-align: middle; position: relative; height: 94rem; }
#menu > li > a { padding: 31rem 32rem; position: relative; font-size: var(--wp--preset--font-size--jt-07); line-height: var(--jt-font-lineheight-07); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--black); }
html.desktop #menu > li:hover > a, #menu > li.current-menu-item > a, #menu > li.current-menu-ancestor > a { color: var(--wp--preset--color--jt-primary); }

/* 2DEPTH */
#menu > li > ul { width: 200rem; position: absolute; top: 100%; left: 50%; margin-left: -100rem; text-align: left; background: var(--wp--preset--color--black); box-sizing: border-box; }
#menu > li > ul > li > a { padding: 8rem 30rem; font-size: var(--wp--preset--font-size--jt-09); line-height: var(--jt-font-lineheight-09); font-weight: 400; letter-spacing: var(--jt-font-letterspacing-01); color: rgba(255, 255, 255, .8); }
#menu > li > ul > li:first-child > a { padding-top: 24rem; }
#menu > li > ul > li:last-child > a { padding-bottom: 24rem; }
html.desktop #menu > li > ul > li:hover > a, #menu > li > ul > li.current-menu-item > a, #menu > li > ul > li.current-menu-ancestor > a { color: var(--wp--preset--color--white); }

/* SEARCH */
.search-controller { position: absolute; top: 28rem; right: -9rem; z-index: 2; }
.search-controller__btn { display: block; width: 40rem; height: 40rem; position: relative; }
.search-controller__btn .jt-icon { display: block; width: 24rem; position: relative; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); }
.search-controller__btn .jt-icon.search-controller__btn-close { width: 20rem; position: absolute; top: calc(50% - 1rem); opacity: 0; }

html.desktop .search-controller__btn:hover .jt-icon path { fill: var(--wp--preset--color--jt-primary); }

body.open-search-motion .search-controller__btn .jt-icon.search-controller__btn-open { opacity: 0; }
body.open-search-motion .search-controller__btn .jt-icon.search-controller__btn-close { opacity: 1; }

/* MOBILE */
.small-menu-controller, .small-menu-container { display: none; }

/* MINIMIZE */
.minimize#header { border-bottom-color: var(--wp--preset--color--gray-300); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 80rem 0; position: relative; background: var(--wp--preset--color--black); }

/* FOOTER MENU */
.footer__menu { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 36rem; padding-bottom: 50rem; margin-bottom: 50rem; border-bottom: 1rem solid rgba(255, 255, 255, .1); }
.footer__menu a { display: block; transition: color .3s; }
.footer__menu > li { width: 170rem; }
.footer__menu > li > a { font-size: var(--wp--preset--font-size--jt-07); line-height: var(--jt-font-lineheight-07); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--white); cursor: default; }
.footer__menu .sub-menu { margin-top: 9rem; }
.footer__menu .sub-menu a { padding: 3rem 0; font-size: var(--wp--preset--font-size--jt-09); line-height: var(--jt-font-lineheight-09); font-weight: 400; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--gray-400); }
html.desktop .footer__menu .sub-menu a:hover { color: var(--wp--preset--color--white); }

/* ETC FOOTER MENU + SOCIAL CHANNEL WRAP */
.footer__etc-sns-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32rem; }

/* ETC FOOTER MENU */
.footer__etc-menu { display: flex; flex-wrap: wrap; gap: 8rem; }
.footer__etc-menu > li > a { display: block; padding: 5rem 16rem; font-size: var(--wp--preset--font-size--jt-10); line-height: var(--jt-font-lineheight-10); font-weight: 400; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--white); background: rgba(255, 255, 255, 0.08); border-radius: 4rem; transition: background-color .3s; }
.footer__etc-menu > li.menu-item--private > a { font-weight: 700; }
html.desktop .footer__etc-menu > li > a:hover { background: rgba(255,255,255,0.2); }

/* SOCIAL CHANNEL */
.footer__sns { display: flex; flex-wrap: wrap; gap: 16rem; }
.footer__sns > li { width: 32rem; height: 32rem; }
.footer__sns > li > a { display: block; width: 100%; height: 100%; }
.footer__sns .jt-icon { display: block; width: 26rem; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); }
.footer__sns .jt-icon path { fill: var(--wp--preset--color--gray-400); }
html.desktop .footer__sns > li > a:hover .jt-icon path { fill: var(--wp--preset--color--white); }

/* COMPANY INFO */
.footer__company-info { margin-top: 31rem; font-size: 0; }
.footer__company-info li { display: inline; padding: 1rem 0; position: relative; color: var(--wp--preset--color--gray-600); }
.footer__company-info li:after { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 10rem; margin: 0 10rem; position: relative; top: -1rem; background: var(--wp--preset--color--gray-600); opacity: 0.5; }
.footer__company-info li:last-child { padding-right: 0; }
.footer__company-info li:last-child:after { display: none }
.footer__company-info a { color: inherit; transition: color .3s; }
html.desktop .footer__company-info a:hover { color: var(--wp--preset--color--white); }

/* COPYRIGHT */
.footer__copyright { margin-top: 7rem; color: var(--wp--preset--color--gray-600); }
.footer__copyright a { color: inherit; }



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.go-top { display: block; width: 63rem; height: 63rem; padding: 15rem 0; position: absolute; top: -93rem; right: 58rem; text-align: center; color: var(--wp--preset--color--white); background: var(--wp--preset--color--jt-secondary); border-radius: 50%; transition: opacity .3s; z-index: 999; }
.go-top > span { display: block; }
.go-top .jt-icon { display: block; width: 14rem; margin: 0 auto; }
.go-top .jt-icon path { fill: var(--wp--preset--color--white); }

.go-top.go-top--fix { position: fixed; top: inherit; bottom: 30rem; } 
.go-top.go-top--hide { opacity: 0; z-index: -1; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding-top: 174rem; padding-bottom: 200rem; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* HEADER */
.article__header { margin-bottom: 80rem; }

.article__title-sub { display: block; margin-bottom: 16rem; color: var(--wp--preset--color--jt-primary); }
.article__title-main { display: block; color: var(--wp--preset--color--black); }

.article__excerpt { color: var(--wp--preset--color--gray-700); }
.article__excerpt--primary { margin-top: 20rem; }
.article__excerpt--secondary { margin-top: 28rem; }

/* BODY */
.article__body { position: relative; /* min-height: 360rem; */ }

/* PROFILE */
.article__profile { margin-top: 120rem; padding-top: 64rem; border-top: 1px solid var(--wp--preset--color--gray-300); }
.article__profile-actions { margin-top: 40rem; font-size: 0; text-align: center; }

/* RELATED */
.article__related { margin-bottom: -200rem; margin-top: 120rem; padding: 120rem 0; position: relative; background: var(--wp--preset--color--gray-100); }
.article__related-title { margin-bottom: 48rem; color: var(--wp--preset--color--black); }
.article__related-content { position: relative; }



/* **************************************** *
 * SEARCH & TAG
 * **************************************** */
/* SEARCH POPUP */
.search-modal-overlay { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); z-index: 499; overflow: hidden; }

.search-modal { display: none; width: 100%; position: fixed; top: 0; left: 0; background: var(--wp--preset--color--white); z-index: 499; overflow: hidden; }
.search-modal__inner { width: 100%; padding: 167rem 0 131rem; position: relative; }

.search-modal__form { display: block; position: relative; }
.search-modal__field { display: block; width: 100%; height: 71rem; margin: 0; padding: 0 95rem 0 0; font-size: var(--wp--preset--font-size--jt-02); line-height: var(--jt-font-lineheight-02); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-02); color: var(--wp--preset--color--black); text-overflow: ellipsis; background: transparent; outline: none; border: none; border-bottom: 4rem solid var(--wp--preset--color--black); border-radius: 0; }

.search-modal__label { position: absolute; left: 0; top: 7rem; color: var(--wp--preset--color--gray-400); transition: .26s; user-select: none; }

.search-modal__submit { width: 36rem; height: 100%; margin: 0; padding: 0; position: absolute; right: 0; top: 0; background: none; border: none; cursor: pointer; }
.search-modal__submit .jt-icon { display: block; width: 100%; margin: 0 auto; position: absolute; top: calc(50% - 4rem); transform: translateY(-50%); }
html.desktop .search-modal__submit:hover .jt-icon path { fill: var(--wp--preset--color--jt-primary); }

.search-modal__reset { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; right: 45rem; top: calc(50% - 4rem); background: none; border: none; cursor: pointer; transform: translate3d(0, -50%, 0); opacity: 0; transition: opacity .15s; }
.search-modal__reset .jt-icon { display: block; width: 28rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transition: background-color .3s; }
.search-modal__reset .jt-icon:before { content: ''; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; left: 1px; top: 1px; background: var(--wp--preset--color--white); border-radius: 50%; }
.search-modal__reset .jt-icon svg { position: relative; }
.search-modal__reset .jt-icon path { fill: var(--wp--preset--color--gray-500); }
html.desktop .search-modal__reset:hover .jt-icon path { fill: var(--wp--preset--color--black); }

.search-modal__close { display: none; }

.search-modal__form.jt-search--active .search-modal__label { opacity: 0; visibility: hidden; }
.search-modal__form.jt-search--active .search-modal__reset { opacity: 1; visibility: visible; }

/* SEARCH RESULT PAGE - LAYOUT */
body.search .main-container { padding-top: 94rem; }

.search-result__header { padding: 80rem 0; background: var(--wp--preset--color--gray-100); }
.search-result__content { margin-top: 80rem; }

.search-result__form { display: block; position: relative; }
.search-result__field { display: block; width: 100%; height: 71rem; margin: 0; padding: 0 95rem 0 0; font-size: var(--wp--preset--font-size--jt-02); line-height: var(--jt-font-lineheight-02); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-02); color: var(--wp--preset--color--black); text-overflow: ellipsis; background: transparent; outline: none; border: none; border-bottom: 4rem solid var(--wp--preset--color--black); border-radius: 0; }
.search-result__label { position: absolute; left: 0; top: 7rem; color: var(--wp--preset--color--gray-400); transition: .26s; user-select: none; }

.search-result__submit { width: 36rem; height: 100%; margin: 0; padding: 0; position: absolute; right: 0; top: 0; background: none; border: none; cursor: pointer; }
.search-result__submit .jt-icon { display: block; width: 100%; margin: 0 auto; position: absolute; top: calc(50% - 4rem); transform: translateY(-50%); }
html.desktop .search-result__submit:hover .jt-icon path { fill: var(--wp--preset--color--jt-primary); }

.search-result__reset { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; right: 45rem; top: calc(50% - 4rem); background: none; border: none; cursor: pointer; transform: translate3d(0, -50%, 0); opacity: 0; transition: opacity .15s; }
.search-result__reset .jt-icon { display: block; width: 28rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transition: background-color .3s; }
.search-result__reset .jt-icon:before { content: ''; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; left: 1px; top: 1px; background: var(--wp--preset--color--white); border-radius: 50%; }
.search-result__reset .jt-icon svg { position: relative; }
.search-result__reset .jt-icon path { fill: var(--wp--preset--color--gray-500); }
html.desktop .search-result__reset:hover .jt-icon path { fill: var(--wp--preset--color--black); }

.search-result__form.jt-search--active .search-result__label { opacity: 0; visibility: hidden; }
.search-result__form.jt-search--active .search-result__reset { opacity: 1; visibility: visible; }

.search-result__info { margin-top: 21rem; color: var(--wp--preset--color--gray-600); }
.search-result__info b { word-break: break-all; color: var(--wp--preset--color--jt-primary); }

/* SEARCH RESULT PAGE - LIST */
body.search .jt-category-outer { padding-top: 0; border-top: none; }

/* SEARCH RESULT PAGE - NO RESULT */
.search-result__support { display: flex; flex-wrap: nowrap; gap: 36rem; }
.search-result__support-item { width: 50%; padding: 45rem 48rem; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-300); border-radius: 8rem; }
.search-result__support-type { color: var(--wp--preset--color--jt-primary); }
.search-result__support-desc { color: var(--wp--preset--color--black); }
.search-result__support-info { margin-top: 12rem; }
.search-result__support-info a { color: var(--wp--preset--color--jt-primary); box-shadow: 0 1px 0 0 currentColor; transition: box-shadow .3s; -webkit-box-decoration-break: clone; }
html.desktop .search-result__support-info a:hover { box-shadow: 0 2px 0 0 currentColor; }

ul.search-result__support-info li { padding-left: 18rem; position: relative; }
ul.search-result__support-info li:before { content: ''; display: block; width: 6px; height: 6px; position: absolute; top: 13rem; left: 0; background: var(--wp--preset--color--black); border-radius: 50%; }
ul.search-result__support-info li + li { margin-top: 6rem; }

/* TAG SEARCH PAGE - LAYOUT */
.tag-result__info { margin-bottom: 36rem; color: var(--wp--preset--color--gray-600); }
.tag-result__info b { color: var(--wp--preset--color--jt-primary); }

/* SEARCH & TAG RESULT LIST */
.keyword-result-list { border-top: 1px solid var(--wp--preset--color--black); }
.keyword-result-list__item { padding: 36rem 0; border-bottom: 1px solid var(--wp--preset--color--gray-300); }

.keyword-result-list__content { color: inherit; }
.keyword-result-list__title { text-overflow: ellipsis; overflow: hidden; color: var(--wp--preset--color--black); }
.keyword-result-list__title span { border-bottom: 1px solid transparent; transition: border .3s; }
.keyword-result-list__desc { margin-top: 8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.keyword-result-list__date { display: block; margin-top: 4rem; color: var(--wp--preset--color--gray-700); }
.keyword-result-list__tag { margin-top: 20rem; }
html.desktop .keyword-result-list__content:hover .keyword-result-list__title > span { border-bottom-color: var(--wp--preset--color--black); }



/* **************************************** *
 * PRIVACY
 * **************************************** */
.privacy-version { margin-bottom: 48rem; }



/* **************************************** *
 * 비급여수가안내
 * **************************************** */
.nonbenefit-table { width: 100%; overflow: hidden; border-top: 1px solid var(--wp--preset--color--gray-300); }
.nonbenefit-table caption { position: absolute; text-indent: -99999rem; line-height: 0; left: -99999rem; }
.nonbenefit-table th, .nonbenefit-table td { vertical-align: middle; text-align: center; }

.nonbenefit-table thead th { padding: 12rem 20rem; color: var(--wp--preset--color--black); background-color: var(--wp--preset--color--gray-100); border-bottom: 1px solid var(--wp--preset--color--gray-300); }

.nonbenefit-table tbody td { padding: 20rem 20rem; border-bottom: 1px solid var(--wp--preset--color--gray-300); border-right: 1px solid var(--wp--preset--color--gray-300); }
.nonbenefit-table tbody td:last-child { text-align: right; border-right: none; }

.nonbenefit-table thead th:nth-child(1) { width: 200rem; }
.nonbenefit-table thead th:nth-child(2) { width: 360rem; }
.nonbenefit-table thead th:nth-child(3) { width: auto; }
.nonbenefit-table thead th:nth-child(4) { width: 150rem; }



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container { padding-top: 0; padding-bottom: 0; }
body.error404 .go-top { display: none; }

.error-404 { display: flex; align-items: center; justify-content: center; height: 100vh; }
.error-404__inner { padding-top: 94rem; text-align: center; }
.error-404__inner h1 { color: var(--wp--preset--color--black); }
.error-404__inner p { margin-top: 20rem; color: var(--wp--preset--color--gray-700); }
.error-404__controller { margin-top: 48rem; }

html.ios .error-404 { max-height: -webkit-fill-available; }