/* Chinese */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); */
/* font-family: 'Noto Sans TC', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
/* font-family: 'Noto Serif TC', serif; */

/* 直式螢幕 */
@media (orientation: portrait) {
}

/* 橫式螢幕 */
@media (orientation: landscape) {
}

/* SM */
@media (max-width: 767px) {
    .show_mobile {
        display: block;
    }

    .show_desktop {
        display: none;
    }

    :root {
        --header_height: 60px;
        --h_rwd: 1 / 1;
        --d_lg_flex: block;
        --small_display: inline-block;
        --small_next_display: none;
    }
}

/* MD */
@media (min-width: 768px) {
    .show_mobile {
        display: block;
    }

    .show_desktop {
        display: none;
    }

    :root {
        --header_height: 60px;
        --h_rwd: 4 / 3;
        --d_lg_flex: block;
        --small_display: none;
        --small_next_display: inline-block;
    }
}

/* LG */
@media (min-width: 992px) {
    .show_mobile {
        display: block;
    }

    .show_desktop {
        display: none;
    }

    :root {
        --header_height: 60px;
        --h_rwd: 16 / 9;
        --d_lg_flex: flex;
        --small_display: none;
        --small_next_display: inline-block;
    }
}

/* XL */
@media (min-width: 1200px) {
    .show_mobile {
        display: none;
    }

    .show_desktop {
        display: block;
    }

    :root {
        --header_height: 131px;
        --h_rwd: 16 / 9;
        --d_lg_flex: flex;
        --small_display: none;
        --small_next_display: inline-block;
    }
}

/* 全域變數 */
:root {
    --font_main: 'Noto Serif TC', serif;
    --font_sub: 'GenSenRoundedTW', sans-serif;
    --font_size: clamp(14px, calc(100vw / 27), 16px);
    --button_size: 2rem;
    --block_mx: 3.33vw;
    --max_width: 1030px;
    --max_width_half: calc(var(--max_width) / 2);
    --max_width_slim: 970px;
    --color_font: #323232;
    --color_yellow: #fce289;
    --color_blue: #2865b1;
    --color_sky: #66b1f1;
    --color_sky_ap: rgba(102, 177, 241, 0.25);
    --color_water: #d1eaff;
    --color_light: #d6dadf;
    --color_gray: #c9caca;
    --color_danger: #dc3545;
    --font_size_sm: 0.9rem;
    --font_size_md: 1rem;
    --font_size_lg: 1.1rem;
    --font_size_h5: 1.2rem;
    --font_size_h4: calc(1.2rem + 0.3vw);
    --font_size_h3: calc(1.4rem + 0.6vw);
    --font_size_h2: calc(1.6rem + 0.9vw);
    --font_size_h1: calc(1.8rem + 1.2vw);
    --fill_100vh: 100vh;
    --js100vh: calc(var(--fill_100vh, 1vh) * 100);
    --border_radius: 5vmin;
    --mobile_menu_height: 60px;
    --placeholder_color: #a1a1a1;
    --transition_bg_zoom: transform 30s linear;
    --transition_all: all 0.2s ease-in-out;
    --bg_zoom_transform: scale(1.2);
    --drop_shadow: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.25));
    --backdrop_filter: saturate(250%) blur(10px);
    --padding_header: calc(var(--header_height) * 1.5);
    --aside_right: min(3vw, 20px);
    --overflow_maxh: 66vh;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font_sub);
    color: var(--color_font);
    font-size: var(--font_size);
    letter-spacing: calc(1rem / 9);
    scroll-behavior: smooth;
    font-weight: 300;
}

body {
    padding-top: var(--header_height) !important;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: calc(1rem / 9);
    line-height: 2;
}

*:focus {
    outline: none !important;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

a,
a:hover,
a:visited,
a:link,
a:active {
    text-decoration: none;
    color: inherit;
}

input::-webkit-input-placeholder {
    color: var(--placeholder_color) !important;
}

input:-ms-input-placeholder {
    color: var(--placeholder_color) !important;
}

input::placeholder {
    color: var(--placeholder_color) !important;
}

button {
    color: inherit;
}

small {
    letter-spacing: 0.5px;
}

mark {
    padding: 0;
    font-weight: bold;
    background-color: transparent;
    font-size: 1.2em;
    color: var(--color_blue);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    line-height: 2;
}

h5 {
    font-size: var(--font_size_h5);
}

h4 {
    font-size: var(--font_size_h4);
}

h3 {
    font-size: var(--font_size_h3);
}

h2 {
    font-size: var(--font_size_h2);
}

h1 {
    font-size: var(--font_size_h1);
}

.h5 {
    font-size: var(--font_size_h5) !important;
}

.h4 {
    font-size: var(--font_size_h4) !important;
}

.h3 {
    font-size: var(--font_size_h3) !important;
}

.h2 {
    font-size: var(--font_size_h2) !important;
}

.h1 {
    font-size: var(--font_size_h1) !important;
}

table {
    background: linear-gradient(180deg, rgba(185, 225, 248, 0.8) 40%, rgba(255, 255, 255, 0.8) 75%);
    border-color: #ffffff !important;
}
table > thead > tr:last-child > * {
    border-bottom-color: #ffffff !important;
}
table tr > * {
    padding: 1rem !important;
    border-width: 2px;
    vertical-align: middle;
}

/********* Template *********/
.template_body {
    font-family: var(--font_sub);
    /* padding-bottom: var(--padding_header); */
}

.text_title {
    font-family: var(--font_main);
    color: var(--color_blue);
    font-size: var(--font_size_h3);
    line-height: 1.2;
    padding-bottom: 1rem;
    margin-bottom: 0;
}

.text_title_sub {
    font-family: var(--font_main);
    margin-left: 2px;
    text-transform: capitalize;
}

.hr_line {
    height: 2px !important;
    margin: 1.5rem 0;
    color: var(--color_sky);
    opacity: 1;
}

.max_height {
    height: calc(100vw / 16 * 9);
    max-height: 75vh;
}

.max_width {
    width: 100%;
    max-width: var(--max_width);
    margin-left: auto;
    margin-right: auto;
}

.max_width_half {
    width: 100%;
    max-width: var(--max_width_half);
    margin-left: auto;
    margin-right: auto;
}

.text_shadow {
    text-shadow: 2px 2px 7px rgb(0, 0, 0, 0.6);
}

.drop_shadow {
    -webkit-filter: var(--drop_shadow);
    filter: var(--drop_shadow);
}

.position_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.color_blue {
    color: var(--color_blue) !important;
}

.bg_blue {
    background-color: var(--color_blue);
    color: #ffffff;
}

.bg_sky {
    background-color: var(--color_sky);
    color: #ffffff;
}

.bg_gray {
    background-color: var(--color_gray);
    color: #ffffff;
}

.bg_yellow {
    background-color: var(--color_yellow);
    color: #ffffff;
}

.bg_cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg_cover.bg_top {
    background-position: top;
}

.bg_contain {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.h_rwd {
    aspect-ratio: var(--h_rwd);
}

.h_1x1 {
    aspect-ratio: 1 / 1;
}

.h_2x1 {
    aspect-ratio: 2 / 1;
}

.h_16x9 {
    aspect-ratio: 16 / 9;
}

.h_3x4 {
    aspect-ratio: 3 / 4;
}

.h_stretch {
    height: stretch;
    padding-bottom: calc(100% / 16 * 9);
}

.bg_loading {
    background-image: url(/images/loading.gif);
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: center;
    min-height: 33.3vh;
    width: 100%;
    background-color: #eeeeee;
    position: relative;
}

.bg_loading::after {
    content: '資料加載中...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bg_grid {
    background-image: url(/Other/www.dr-eye/images/bg_grid.svg);
    background-repeat: repeat;
    background-size: 100px;
    background-position: top center;
    border-bottom: rgba(0, 0, 0, 0.05) 1px solid;
}

.bg_filter {
    /* 遮蔽背景濾鏡 */
    -webkit-backdrop-filter: var(--backdrop_filter);
    backdrop-filter: var(--backdrop_filter);
}

.img_max_w {
    width: min(100%, 600px);
}

.img_max_w_half {
    width: min(100%, 300px);
}

.border_blue {
    border-color: var(--color_blue) !important;
}

.border_gray {
    border-color: var(--color_gray) !important;
}

.font_main {
    font-family: var(--font_main);
}

.font_sub {
    font-family: var(--font_sub);
}

.nums_round {
    --size: 1.5em;
    background-color: var(--color_gray);
    color: #ffffff;
    display: inline-flex;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    text-align: center;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 0 0 calc(1rem / 8) calc(1rem / 8);
    margin-right: 0.5rem;
}

.button_plus {
    color: var(--color_blue) !important;
    display: inline-flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: var(--transition_all);
    height: var(--button_size);
    border-radius: 99999px;
    font-weight: bold;
}

.button_plus::before {
    content: url(/Other/www.dr-eye/images/icon_color_plus.svg);
    width: var(--button_size);
    height: var(--button_size);
    margin-right: 0.5rem;
}

.button_plus:hover {
    background-color: var(--color_blue);
    color: #ffffff !important;
    padding: 0 calc(var(--button_size) + 0.5rem) 0 0;
}

.button_float {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    color: var(--color_blue) !important;
    -webkit-filter: var(--drop_shadow);
    filter: var(--drop_shadow);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    transition: var(--transition_all);
    font-weight: bold;
}

.button_float:hover {
    transform: scale(1.1) translate(0.25rem, -0.25rem);
}

.button_float img {
    display: block;
    height: 1rem;
    margin-right: 0.25rem;
}

.scroll_bar {
    border-right: var(--color_sky) 0.5rem solid;
    position: relative;
}

.scroll_bar::after {
    content: '向右滑動檢視更多 ▷';
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color_sky);
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0 0.3rem 0 0.75rem;
    border-radius: 999rem;
    margin: 2px;
    z-index: 10;
}

.scroll_bar.isDragging {
    -webkit-user-select: none;
    user-select: none;
}

.radius_all {
    border-radius: var(--border_radius);
}

.radius_right {
    border-radius: 0px var(--border_radius) var(--border_radius) 0px;
}

.flex-row-reverse .radius_right,
.radius_left {
    border-radius: var(--border_radius) 0px 0px var(--border_radius);
}

/* YouTube 預覽縮圖 轉成 影片 */
.youtube_box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border_radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.youtube_box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.youtube_box:not(.isActive)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background-image: url(/Other/www.dr-eye/images/icon_youtube_play.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 12;
    cursor: pointer;
}

.small_display small {
    display: var(--small_display);
    font-size: 12px !important;
}

.small_display small + * {
    display: var(--small_next_display);
}

.js_scroll_nav {
    position: -webkit-sticky;
    position: sticky;
    z-index: 20;
    top: calc(var(--header_height) - 2px);
    background-color: var(--color_sky);
    transition: var(--transition_all);
    color: #ffffff;
    /* 遮蔽背景濾鏡 */
    -webkit-backdrop-filter: var(--backdrop_filter);
    backdrop-filter: var(--backdrop_filter);
}

body.scroll_down .js_scroll_nav {
    top: -1px;
}

.js_scroll_nav ul {
    margin-bottom: 0;
}

.has_scroll_nav section ~ section {
    padding-top: var(--padding_header);
}

.js_scroll_nav a {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: var(--transition_all);
    padding: 0.75rem 0.25rem;
    height: 100%;
    font-size: 1rem;
}

.js_scroll_nav a:hover {
    background-color: rgba(102, 177, 241, 1);
}

.js_scroll_nav a.isActive {
    background-color: var(--color_blue);
}

.page_style ol {
    padding-left: 1.5rem;
}

.page_style ol li {
    padding-bottom: 1rem;
}

.page_style p {
    margin-bottom: 1.5rem;
}

.page_style .text_title_sub {
    text-transform: uppercase;
}

.page_style .color_blue,
.page_style h5,
.page_style .h5,
.page_style h4,
.page_style .h4,
.page_style h3,
.page_style .h3,
.page_style h2,
.page_style .h2,
.page_style h1,
.page_style .h1 {
    font-weight: bold;
}

.page_style .list_title li::marker {
    color: var(--color_blue);
}

.page_style .list_title li *:first-child {
    color: var(--color_blue);
}

.page_style .list_title p {
    margin-bottom: 1rem;
}

/* .page_style table {
    border-color: var(--color_sky_ap);
}

.page_style .table tr > * {
    padding: 1rem;
}

.page_style .table th {
    color: var(--color_blue);
}

.page_style .table thead > tr:last-child > * {
    border-bottom-color: var(--color_sky_ap);
}

.page_style .table > :not(caption) > * > * {
    border-bottom-width: 2px;
}

.page_style table tr > *.title {
    color: var(--color_blue);
    font-weight: bold;
}

.page_style table tbody tr:last-of-type > * {
    border-bottom: none;
}

.page_style table thead tr > * {
    font-weight: bold;
    font-size: 1.1rem;
} */

body.window_sm .page_style table tr > * {
    font-size: 12px;
    padding: 1rem 0.5rem !important;
}

.page_style span ol {
    list-style: decimal;
    margin-bottom: 0;
}

.page_style span ul {
    list-style: disc;
    margin-bottom: 0;
}

.page_style span li {
    padding-bottom: 0.5rem;
}

.page_style .all_collapsed_show {
    color: var(--color_blue);
    font-size: 0.8rem;
    border: var(--color_blue) 1px solid;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: var(--transition_all);
    font-weight: bold;
}

.page_style .all_collapsed_show:hover {
    background-color: var(--color_blue);
    color: #ffffff;
}

.page_style .accordion .accordion-item {
    margin-bottom: 1rem;
    background-color: transparent;
}

.page_style .accordion .accordion-button {
    background-color: transparent;
}

.table_clinic_time {
    background: #ffffff !important;
}

.table_clinic_time * {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    font-size: 0.9rem;
    border-width: 1px;
}

.table_clinic_time tr > * {
    padding: 1.5rem 1rem !important;
    border-bottom-color: #ffffff;
    border-right: #ffffff 1px solid;
    background-color: var(--color_sky_ap);
    position: relative;
}

.table_clinic_time tbody tr > * {
    white-space: break-spaces;
}

.table_clinic_time tr th {
    background-color: var(--color_blue);
    color: #ffffff;
    font-weight: bold;
}

.table_clinic_time tbody tr > *:first-child {
    position: sticky;
    left: 0;
}

.table_clinic_time .mark {
    color: red !important;
    font-weight: bold;
}

#js_clinic_time_drlan tbody tr:nth-of-type(even) > *:first-child {
    display: none;
}

#js_clinic_time_drlan tbody tr:nth-of-type(odd) {
    background-color: var(--color_sky_ap);
}

#js_clinic_time_drlan tbody tr:nth-of-type(odd) > * {
    padding: 0.5rem 1rem !important;
}

.update_time {
    padding: 0.5rem;
    text-align: right;
}

.tag_list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;
}

.tag_list li {
    background-color: var(--color_sky);
    color: #ffffff;
    margin: 0.5rem;
    padding: 0.25rem 1rem !important;
    border-radius: 999rem;
}

/********** 截斷文字 **********/
.textCut_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.textCut_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.textCut {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/********* 主選單 *********/
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    transition: all 0.3s;
    transform: translateY(0);
    background-color: rgba(255, 255, 255, 0.75);
    /* 遮蔽背景濾鏡 */
    -webkit-backdrop-filter: var(--backdrop_filter);
    backdrop-filter: var(--backdrop_filter);
}

body.scroll_down header {
    transform: translateY(-101%);
}

header ul,
header ol {
    list-style: none;
}

#header_nav_desktop ol li {
    margin: 0.25rem 1vw;
}

#header_nav_desktop ol a {
    padding: 0.25rem;
    font-size: 1.1rem;
    white-space: nowrap;
}

#header_nav_desktop .header_nav_main > li {
    display: flex;
    align-items: center;
    align-content: center;
    padding: 0 1vw;
}

#header_nav_desktop .dropdown-menu li {
    padding: 0;
}

#header_nav_desktop .nav_sub a {
    font-size: 1rem;
}

header li .dropdown button {
    padding: 0.25rem;
    font-size: var(--font_size_lg);
    border: 0;
    text-align: right;
    background-color: transparent;
    transition: var(--transition_all);
    font-weight: 300;
}

header .accordion .accordion-button {
    border-radius: 0 !important;
}

header .dropdown-toggle::after {
    color: var(--color_blue);
}

header .dropdown-toggle.show::after {
    color: var(--color_sky_ap);
}

header .dropdown-menu {
    border-color: var(--color_sky_ap);
    padding: 0;
    background-color: #ffffff;
    margin: -2px 0 0 !important;
}

header .dropdown-menu li {
    margin: 0;
    padding: 0rem;
    text-align: end;
}

header .dropdown-menu a:focus,
.dropdown-menu a:hover {
    background-color: var(--color_sky_ap);
}

header .dropdown-menu a {
    padding: 0.5rem 0.75rem;
    text-align: left;
    display: block;
    width: 100%;
    clear: both;
    text-decoration: none;
    border: 0;
    white-space: nowrap;
}

/* 滑入 觸發 子選單 */
header .dropdown.hover:hover .dropdown-menu {
    display: block;
    right: 0;
    z-index: 91;
    transform: translate(0, 2px);
}

#header_nav_desktop .nav_sub {
    list-style: none;
    display: flex;
    justify-content: end;
    align-items: center;
    align-content: center;
}

.header_nav_main {
    list-style: none;
    display: flex;
    justify-content: end;
    align-items: center;
    align-content: center;
    margin-bottom: 0;
}

/* 搜尋框 */
#search_desktop_content {
    position: absolute;
}

.search_keyword_list {
    overflow: auto;
    max-height: calc(var(--overflow_maxh) - 50px);
}

.search_keyword_list.noMatch::after {
    content: '找不到符合項目！';
    display: block;
    color: inherit;
    padding: 0.5rem;
}

#mobile_keyword_content .search_keyword_list.noMatch::after {
    content: '找不到符合項目！';
    display: block;
    color: inherit;
    padding: 0.5rem;
    font-size: 1.1rem;
}

.search_keyword_list li {
    display: none;
}

.search_keyword_list li.isShow {
    display: block;
}

.search_keyword_list a {
    width: 100%;
    display: block;
    padding: 0.5rem;
    white-space: pre-wrap !important;
}

body.scroll_down .search_keyword_list {
    display: none;
}

#header_nav_desktop input {
    border: var(--color_gray) 1px solid !important;
    padding: 0 0.5rem;
    letter-spacing: 0;
    border-radius: 0 !important;
    max-width: 200px;
}

#header_nav_desktop input + .dropdown-menu {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border: var(--color_gray) 1px solid;
    overflow: hidden;
    transform: translate(0, 2px) !important;
}

#header_nav_desktop .search_keyword_list a {
    text-align: left;
    letter-spacing: 0;
    padding: 0.5rem;
}

/****** 手機選單 內容 ******/
#header_nav_mobile * {
    transition: all 0.3s ease-in-out;
}

#header_nav_mobile .search_input,
#header_nav_mobile .close_search {
    display: none;
}

body.open_search_mode:not(.window_xl, .window_lg),
body.open_menu_content:not(.window_xl, .window_lg) {
    overflow: hidden !important;
}

body.open_search_mode header {
    background-color: #ffffff;
}

body.open_search_mode #header_nav_mobile .search_input {
    display: block;
    width: 100%;
    font-size: 1.2rem;
}

body.open_search_mode #header_nav_mobile .close_search {
    display: block;
}

body.open_search_mode #header_nav_mobile .logo,
body.open_search_mode #header_nav_mobile .open_menu {
    display: none;
}

body.open_search_mode #header_nav_mobile .logo {
    padding: 0 !important;
}

#mobile_keyword_content {
    position: fixed;
    z-index: 20;
    top: var(--mobile_menu_height);
    left: 0;
    width: 100vw;
    height: calc(var(--js100vh) - var(--mobile_menu_height));
    /* (解決手機版瀏覽器下方選單阻擋) */
    overflow: hidden;
    transform: translateY(calc(-101% - var(--mobile_menu_height)));
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0.75);
    /* 遮蔽背景濾鏡 */
    -webkit-backdrop-filter: var(--backdrop_filter);
    backdrop-filter: var(--backdrop_filter);
}

body.window_xl #mobile_keyword_content {
    display: none;
}

body.open_search_mode #mobile_keyword_content {
    transform: translateY(0%);
}

#mobile_keyword_content ul {
    list-style: none;
    padding: 1rem;
    margin: 0;
    background-color: #ffffff;
    max-height: 90%;
    overflow: auto;
    border-top: var(--color_gray) 1px solid;
}

#mobile_keyword_content ul li {
    font-size: 1.1rem;
    padding-bottom: 1rem;
}

#header_nav_mobile button {
    background-color: transparent;
    border: 0;
    padding: 0;
    position: relative;
    width: var(--mobile_menu_height);
    height: var(--mobile_menu_height);
    display: block;
}

#header_nav_mobile button.open_search,
#header_nav_mobile button.close_search {
    width: calc(var(--mobile_menu_height) * 0.5);
    margin: 0 1rem;
}

#header_nav_mobile button img {
    height: 50%;
}

#header_nav_mobile .open_menu hr {
    display: block;
    width: 25%;
    height: 2px;
    background-color: var(--color_blue);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s;
    margin: 0;
    opacity: 1;
    padding: 0;
}

#header_nav_mobile .open_menu hr:nth-of-type(1) {
    top: calc(50% - 12%);
}

#header_nav_mobile .open_menu hr:nth-of-type(2) {
    width: 40%;
}

#header_nav_mobile .open_menu hr:nth-of-type(3) {
    top: calc(50% + 12%);
}

body.open_menu_content:not(.window_xl) #header_nav_mobile .open_menu hr {
    top: 50%;
    width: 38%;
}

body.open_menu_content:not(.window_xl) #header_nav_mobile .open_menu hr:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

body.open_menu_content:not(.window_xl) #header_nav_mobile .open_menu hr:nth-of-type(2) {
    opacity: 0;
}

body.open_menu_content:not(.window_xl) #header_nav_mobile .open_menu hr:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#nav_mobile_content {
    position: fixed;
    z-index: 50;
    top: var(--mobile_menu_height);
    left: 0;
    width: 100vw;
    height: calc(var(--js100vh) - var(--mobile_menu_height));
    /* (解決手機版瀏覽器下方選單阻擋) */
    overflow: auto;
    transform: translateX(-101%);
    transition: all 0.3s;
    background-color: rgba(255, 255, 255, 1);
    padding-bottom: 60px;
}

#nav_mobile_content h4 {
    margin-bottom: 0;
}

body.open_menu_content:not(.window_xl) #nav_mobile_content {
    transform: translateX(0);
}

#nav_mobile_content .accordion-item {
    margin: 0;
}

#nav_mobile_content .accordion-button,
#nav_mobile_content .accordion-item a {
    border-top: var(--color_sky_ap) 1px solid;
    padding: 1rem 1.5rem;
}

#nav_mobile_content .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: var(--color_blue);
}

#nav_mobile_content .accordion-body {
    padding: 0;
}

#nav_mobile_content .accordion-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav_mobile_content .accordion-button::before {
    --line_width: 14px;
    --line_height: 2px;
    content: '';
    background-color: var(--color_blue);
    position: absolute;
    top: calc(50% - var(--line_height) / 2);
    right: calc(30px - var(--line_width) / 2);
    width: var(--line_width);
    height: var(--line_height);
}

#nav_mobile_content .accordion-button::after {
    --line_width: 2px;
    --line_height: 14px;
    content: '';
    background-image: none;
    background-color: var(--color_blue);
    position: absolute;
    top: calc(50% - var(--line_height) / 2);
    right: calc(30px - var(--line_width) / 2);
    height: var(--line_height);
    width: var(--line_width);
    transition: var(--transition_all);
}

#nav_mobile_content .accordion-button:not(.collapsed)::before {
    content: '';
    background-color: #ffffff;
}

#nav_mobile_content .accordion-button:not(.collapsed)::after {
    content: '';
    background-image: none;
    transform: rotate(0) scale(1, 0);
}

#nav_mobile_content .nav_sub {
    padding: 0;
    margin: 0;
    position: relative;
    color: var(--color_blue);
}

#nav_mobile_content a,
#nav_mobile_content button {
    font-size: var(--font_size_lg);
    color: var(--color_blue);
}

#nav_mobile_content a {
    width: 100%;
    display: block;
    padding: 1rem 1.5rem;
    text-align: left;
    position: relative;
}

#nav_mobile_content a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1.5rem;
    display: block;
    background-image: url(/Other/www.dr-eye/images/icon_arrow_right_bu.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    transform: translate(0, -50%);
}

#nav_mobile_content a.text-white::after {
    content: '';
    background-image: url(/Other/www.dr-eye/images/icon_arrow_right_wh.svg);
}

#nav_mobile_content .accordion-body {
    background-color: var(--color_sky_ap);
}

/****** 頁尾 ******/
footer {
    border-top: 5px solid var(--color_sky_ap);
    font-family: var(--font_sub);
    font-size: 0.95rem;
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0 0 1rem;
}

footer li {
    padding: 0.75rem 0.5rem;
    color: var(--color_blue);
}

footer li a {
    display: inline-flex;
    align-items: center;
    align-content: center;
    border-bottom: var(--color_sky_ap) 2px solid;
    line-height: 1.5;
    font-weight: bold;
}

footer li a:hover {
    border-color: var(--color_yellow);
}

footer .closer li {
    display: inline-block;
}

footer .end {
    padding: 3rem 1rem 6rem;
    text-align: center;
    font-weight: bold;
}

footer .end * {
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer .end a {
    display: inline-flex;
    align-items: center;
    margin: 0 0.5rem;
    color: var(--color_blue);
}

footer .end img {
    height: 30px;
    margin: auto 0.5rem;
}

footer .copyright {
    font-size: 0.9rem;
}

.note_contact {
    background-color: var(--color_sky_ap);
    padding: 2rem;
    text-align: center;
}

.note_contact * {
    font-weight: bold;
}

.note_contact p {
    font-weight: normal;
    font-size: 1rem;
}

.note_contact button {
    background-color: transparent;
    border: none;
    padding: 1rem;
}

.note_contact a {
    background-color: #ffffff;
    border-radius: 999rem;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0.5rem 1rem;
}

.note_contact button:last-of-type a {
    background-color: var(--color_sky);
    color: #ffffff;
}

.note_contact button h4 {
    margin: 0;
}

.note_contact button img {
    height: 1.2rem;
    margin: 0 0 0.25rem 0.5rem;
}

/********* 側邊導航 *********/
aside {
    position: fixed;
    z-index: 90;
    bottom: 90px;
    right: 0;
    transform: translateX(101%);
    transition: var(--transition_all);
    display: flex;
    flex-direction: column;
}

body.scroll_down aside {
    right: var(--aside_right);
    transform: translateX(0);
}

aside a {
    background-color: #ffffff;
    border-radius: 999rem;
    padding: 1rem 0.5rem 0.75rem;
    text-align: center;
    -webkit-filter: var(--drop_shadow);
    filter: var(--drop_shadow);
    margin-top: 1rem;
    font-weight: bold;
}

aside a:last-of-type {
    background-color: var(--color_sky);
    color: #ffffff;
}

aside a span {
    width: 1rem;
    white-space: break-spaces;
    display: block;
    line-height: 1.4;
}

aside a img {
    width: 80%;
}

.fixed_btn_text {
    position: fixed;
    z-index: 90;
    background: linear-gradient(-135deg, var(--color_blue), var(--color_sky));
    /* background: var(--color_blue); */
    color: #ffffff !important;
    font-weight: bold;
    bottom: 15px;
    right: 15px;
    border-radius: 999rem;
    -webkit-filter: var(--drop_shadow);
    filter: var(--drop_shadow);
    white-space: nowrap;
    padding: 0.5rem 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed_btn_text img {
    height: 1.1rem;
    padding-left: 0.25rem;
}

#btn_page_gotop {
    --size: min(12vw, 60px);
    --position: min(3vw, 20px);
    position: fixed;
    z-index: 50;
    bottom: var(--position);
    right: var(--position);
    width: var(--size);
    height: var(--size);
    background-image: url(/Other/www.dr-eye/images/icon_arrow_right_wh.svg);
    background-color: var(--color_sky);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: 55% 50%;
    border-radius: 50%;
    transform: rotate(-90deg);
    cursor: pointer;
    -webkit-filter: var(--drop_shadow);
    filter: var(--drop_shadow);
}

/* Facebook Messenger */
.fixed_btn_messenger {
    position: fixed;
    z-index: 90;
    background: linear-gradient(30deg, #188aff, #6658ff, #d444b9, #f95088);
    bottom: 15px;
    right: 15px;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-filter: var(--drop_shadow);
    filter: var(--drop_shadow);
}

.fixed_btn_messenger svg {
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/********* Bootstrap *********/
.accordion .accordion-button:not(.collapsed) {
    background-color: var(--color_blue);
    color: #ffffff;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

.accordion .accordion-button {
    transition: var(--transition_all);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px !important;
    color: var(--color_blue);
    font-weight: bold;
}

.accordion .accordion-item {
    border: none;
}

.accordion .accordion-button:not(.collapsed)::after {
    width: 0;
    height: 0;
    background-image: url(/Other/www.dr-eye/images/icon_color_plus.svg);
    transform: rotate(0deg);
    display: none;
}

.accordion .accordion-button::after {
    width: calc(var(--button_size) + 1rem);
    height: var(--button_size);
    background-position: right;
    background-size: contain;
    background-image: url(/Other/www.dr-eye/images/icon_color_plus.svg);
    transition: var(--transition_all);
}

.accordion .accordion-body {
    padding: 1rem 1.5rem;
}

.table {
    margin-bottom: 0;
}

.table.border tr > * {
    border: var(--color_sky) 1px solid !important;
}

.dropdown-menu {
    max-height: var(--overflow_maxh);
    overflow: auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e') !important;
}

.nav-item .nav-link {
    background-color: var(--color_water);
    color: var(--color_blue);
    width: 100%;
    border-radius: 9999px;
    white-space: nowrap;
    transition: all 0.1s linear;
    font-weight: bold;
}

.nav-item .nav-link.active {
    background-color: var(--color_blue);
    color: #ffffff;
}