@charset "UTF-8";

/* =======================================================
    keyframes
======================================================= */
@keyframes rotate_bg {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes wobble {
    0%   { transform: rotate(-18deg) translateY(0); }
    50%  { transform: rotate(-22deg) translateY(-4px); }
    100% { transform: rotate(-18deg) translateY(0); }
}

@keyframes wobble2 {
    0%   { transform: rotate(30deg) translateY(0); }
    50%  { transform: rotate(26deg) translateY(3px); }
    100% { transform: rotate(30deg) translateY(0); }
}


/* =======================================================
    Desktop / Wide (3~4 columns)
======================================================= */
@media screen and (max-width: 1520px) {

}
@media screen and (max-width: 1400px) {
    .wrapper { font-size: 1.15vw; }
    .container { width: 94%; }
    .hd_logo img { height: 2.5em; }
    .hd_gnb { margin-right: 0; }
    .hd_cta { display: none; }
    .floating_cta { display: inline-flex; }
    .ft_logo img { height: 2.5em; }

    .treatment .round li::before { height: 90%; top: 5%; }
    .treatment .round .txt { max-width: 55%; }
    .treatment .round .txt p br { display: none; }
    .treatment .round .txt p::before { width: 90%; }
    .treatment .round .txt p { padding-bottom: 0; }
    .treatment .list .txt p br { display: none; }
    .treatment .list .txt { max-width: 50%; }
    .treatment .circle_list p { font-size: 1.125em; }
    .location_txt { font-size: 1.125em; }

    .idx .promise .list { justify-content: space-between; }
    .idx .promise .txt { padding: 0 2.5em 2.5em; }
}

/* =======================================================
    Laptops / Standard (2~3 columns)
======================================================= */
@media screen and (max-width: 1240px) {
    .wrapper { font-size: 1.25vw; }

    .idx .doctor .is-active .box { padding-top: 3em; }
    .idx .doctor .is-active .more { margin-top: 2em; }
}
@media screen and (max-width: 1140px) {
    .wrapper { font-size: 1.3vw; }

    .promise_box .promise_bg { width: 50%; }
    .promise_box .promise_img { width: 45%; }
    .doctor_img { width: 40%; }
    .location_list { gap: 1em; grid-template-columns: repeat(2,1fr); }
    .location_list li:nth-child(3) { grid-column: -1/1; }
    .location_method { grid-template-columns: repeat(1,1fr); }
    .location_method p { font-size: 1em; }

    .idx .promise .item br { display: none; }
    .idx .disinfect .list li { width: 20%; }
}

/* =======================================================
    Tablet / Medium (2 columns)
======================================================= */
@media screen and (max-width: 992px) {
    .wrapper { font-size: 1.5vw; }
    .hd_gnb, .hd_login, .hd_cta { display: none; }
    .hd_anb_btn, .hd_anb { display: block; }
    .hd_anb .anb_inner { color: #111; text-align: left; }
    .hd_anb_btn.is-close .bar { background-color: #111; }
    .ft { text-align: center; }
    .ft_con { flex-direction: column; gap: 2em; }
    .floating_cta { display: inline-flex; }
    .post-basic .post_item.is-head { display: none; }
    .post-basic .post_item { flex-wrap: wrap; padding: 1em; gap: 0.375em; }
    .post-basic .post_subject { width: 100%; font-size: 1.125em; font-weight: 500; }
    .post-basic .post_meta { color: var(--gray-700); }
    .post-basic .post_num,
    .post-basic .post_meta-name,
    .post-basic .post_meta-hit,
    .post-basic .post_meta-date,
    .post-basic .post_meta-status { width: auto; }
    .post-basic .post_chk { left: auto; right: 1em; top: 1em; transform: translate(0); }
    .post-gallery .post_list { grid-template-columns: repeat(3,1fr); }

    .disinfect_box { flex-direction: column; }
    .disinfect_img { z-index: 9; }
    .disinfect_img img { z-index: 9; border-radius: 1.5em; }
    .disinfect_img,
    .disinfect_img img,
    .disinfect_txt { width: 100%; margin: auto; }
    .disinfect_txt { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .disinfect_txt li { width: 48%; }
    .doctor_item { gap: 3em; }
    .doctor_box { padding: 0; }
    .doctor_img { width: 45%; }
    .treatment .round ul { flex-direction: column; }
    .treatment .round .txt { max-width: none; }
    .treatment .round .txt p::before { width: 90%; }
    .treatment .round .txt p br { display: block; }
    .treatment .list li { flex-direction: column; gap: 2.5em; }
    .treatment .list .img,
    .treatment .list .txt { width: 80%; max-width:none; }
    .treatment .list .img img { width: 100%; }
    .treatment .tbl br { display: none; }

    .idx section { padding: 6.5em 0; }

    .idx .promise { min-height: calc(var(--vh)*100); background: url(../img/idx/promise_bg.png) no-repeat center bottom/auto calc(var(--vh)*40); }
    .idx .promise .title { margin-top: 5em; }
    .idx .promise .list { position: relative; }
    .idx .promise .item { width: 100%; display: flex; box-shadow: var(--shadow-sm); position: absolute; }
    .idx .promise .item:nth-child(1) { position: static; }
    .idx .promise .thumb { width: 50%; }
    .idx .promise .txt { width: 50%; padding: 2.5em; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .idx .promise .txt p br { display: block; }
    .idx .promise .txt b { top: 60%; }
    .idx .promise .icon { margin-top: 0; }

    .idx .doctor .list { flex-direction: column; }
    .idx .doctor .is-active  { width: 100%; display: flex; }
    .idx .doctor .is-active .box { width: 100%; }
    .idx .doctor .item:nth-child(2) .box { flex-direction: row-reverse; }
    .idx .doctor .item:nth-child(2) .txt { padding: 0 1.5em; }
    .idx .since .img1 { width: 40%; left: 10%; }
    .idx .since .img2 { width: 20%; right: 10%; }
    .idx .product .box { margin-bottom: 6em; }
    .idx .interior .box { display: flex; flex-direction: column; }
    .idx .interior .big { aspect-ratio: 1/0.5; }
    .idx .location .box { flex-direction: column; gap: 2em; }
    .idx .location .map { width: 100%; aspect-ratio: 1/0.5; }
}
@media screen and (max-width: 900px) {
    .main .container { width: 90%; }

    .treatment .circle_list ul { flex-wrap: wrap; }
    .treatment .circle_list li { width: 50%; }
    .treatment .circle_list li:nth-child(3),
    .treatment .circle_list li:nth-child(4) { margin-top: -2em; }
    .treatment .txt_box p br { display: none; }

    .idx .doctor { background: linear-gradient(to bottom, var(--primary-500) 40%, rgba(255,255,255,0) 40%), url(../img/idx/doctor_bg.png) no-repeat center top/100%; margin-top: -2px; }
    .idx .doctor .is-active .more { margin: 2em 0 4em; }
    .idx .disinfect .list { flex-wrap: wrap; gap: 2em 0; }
    .idx .disinfect .list li { width: 48%; }
    .idx .disinfect .list .img { width: 45%; margin: auto; padding: 8%; }
}
/* =======================================================
    Mobile / Small (1 column)
======================================================= */
@media screen and (max-width: 760px) {
    .wrapper { font-size: 2vw; word-break: keep-all; }
    .half_input, .frm_item.half  { width: 100%; }
    .tooltip { display: flex; }
    .tooltip_icon { color: var(--info-500); }
    .tooltip_txt { opacity: 1; background-color: transparent; box-shadow: none; padding: 0.2em 0; position: static; color: var(--info-500); }
    .tab { overflow-x: scroll; }
    .tab_list { white-space: nowrap; gap: 1em; justify-content: flex-start; }
    .popup_wrap .popup { width: 90%; max-height: 80vh !important; left: 50% !important; top: 40% !important; transform: translate(-50%, -50%); position: fixed; }
    .post_box { flex-wrap: wrap; gap: 0.5em; }
    .post_search { width: 100%; }
    .post_search .search_bar,
    .post_search .search_input { flex-grow: 1; }
    .post-gallery .post_list { grid-template-columns: repeat(2,1fr); }

    .doctor_item { flex-direction: column; }
    .doctor_img { width: 65%; }
    .doctor_box { width: 80%; }
    .location_list { grid-template-columns: repeat(1,1fr); }
    .promise_txt p br { display: none; }
    .promise_con { padding: 12em 0 8em; }
    .promise_list { display: block; }
    .promise_item { width: 44%; }
    .promise_item2 { margin: auto; }
    .promise_item1,
    .promise_item3 { position: absolute; bottom: 0; }
    .promise_item1 .promise_line,
    .promise_item3 .promise_line { width: 25%; }
    .promise_item1 .promise_line { margin-left: 53%; }
    .promise_item3 .promise_line { margin-left: 22%; }
    .promise_item1 { left: 0; }
    .promise_item1 .promise_plus { right: 20%; }
    .promise_item3 { right: 0; }
    .promise_item3 .promise_plus { left: 20%; }
    .promise_box .promise_bg { width: 45%; }
    .promise_box .promise_img { width: 40%; }
    .disinfect_img { width: 80%; margin: auto; }
    .disinfect_txt { font-size: 0.9em; justify-content: center; }
    .disinfect_txt li { width: 80%; }
    .treatment .step ul { grid-template-columns: repeat(1,1fr) }
    .location_method p { flex-wrap:wrap; gap: 0.25em 0.5em; margin-top: 1em; }
    .location_method p::before { content:"·"; font-weight: 900; font-size: 1.25em; }
    .location_method li:nth-child(2) p:nth-child(2)::before { display: none; }

    .idx .doctor .is-active .box { align-items: center; padding: 2.5em 2em; }
    .idx .doctor .item:nth-child(2) .box { flex-direction: row; }
    .idx .doctor .item:nth-child(2) .txt { padding: 0; }
    .idx .doctor .is-active .more { margin-bottom: 0; }
    .idx .doctor .is-active .img img { width: 100%; height: auto; position: static; transform:none;}
    .idx .product .swiper-slide-active .circle { background-color: var(--primary-500); transform: scale(0.95); }
    .idx .since { height: calc(var(--vh) * 65); }
    .idx .since .year { line-height: 1.2; font-size: 5.5em; }
}
@media screen and (max-width: 580px) {
    .wrapper { font-size: 2.25vw; }

    .idx .visual .swiper-slide { height: calc(var(--vh) * 85); }
    .idx .visual p br { display: none; }
    .idx .promise { padding-top: 7em; }
    .idx .promise .list { justify-content: flex-start; align-items: flex-start; }
    .idx .promise .item { flex-direction: column; }
    .idx .promise .thumb,
    .idx .promise .txt { width: 100%; }
    .idx .promise .thumb { aspect-ratio: 1/0.5; }
    .idx .promise .txt { padding-top: 0; }
    .idx .promise .txt p { height: 4.5em; }
    .idx .promise .txt .icon { margin-top: -2.5em; }
}
@media screen and (max-width: 520px) {
    .wrapper { font-size: 2.5vw; }
}