@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,700&display=swap);

:root {
  --color-primary: #1f242e;
  --color-secondary: #F2F4F7;
  --color-third: #247FF2;
}

/* ==========================================
   1. 元素重置 (Element Reset)
   ========================================== */
body { font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "PingFang TC", "Helvetica Neue", Helvetica, Arial, sans-serif; width: 100%; max-width: 1920px; margin-inline: auto; font-size: 1.125rem; line-height: normal; letter-spacing: 0.75px; color: #696c6f; }
body:not(.index) main { background-color: var(--color-secondary); }

a { color: inherit; transition: all .25s linear; word-break: break-word; }
a:focus, a:hover, a:active, a:visited { text-decoration: none; color: inherit; }

ul, li { padding-left: 0; margin-bottom: 0; }
dl, ol, ul { padding-inline-start: 20px; }

button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }


/* ==========================================
   2. 工具類 (Utility Classes)
   ========================================== */

/* 文字工具類 */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { margin-bottom: 0; }
h1, .h1 { font-size: 2rem; line-height: normal; font-weight: bold; }
h2, .h2 { font-size: 1.5rem; line-height: 1.5; font-weight: bold; }
h3, .h3 { font-size: .9375rem; letter-spacing: 1px; } /* Subtitle */
h4, .h4 { font-size: 1.125rem; line-height: 2rem; letter-spacing: 0.75px; } /* Body */
h5, .h5 { font-size: 1.125rem; letter-spacing: 1px; } /* Button */
h6, .h6 { font-size: .9375rem; line-height: 1.5rem; } /* Caption */

p, .p { margin-bottom: 0; font-size: 1.125rem; line-height: 2rem; letter-spacing: 0.75px; } /* Body */
p:not(:last-child), .p:not(:last-child) { margin-bottom: ; }
span.require { color: #ff0000; }

/* 容器佈局 */
.layout { max-width: 1230px; width: 100%; margin: auto; }

/* Flexbox 工具類 */
.frss { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; }
.frcs { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.frcc { display: flex; flex-direction: row; align-items: center; justify-content: center; }
.frsc { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; }
.fcss { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.fccs { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.fccc { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fcsc { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

/* Spacing 工具類 */
.mb_60 { margin-bottom: 3.75rem; }

/* 顏色工具類 */
.text-lightGray { color: #DDDDDD!important; }
.bg-lightGray { background-color: #DDDDDD!important; }
.border-lightGray { border-color: #DDDDDD!important; }
.text-gray { color: #696c6f!important; }
.bg-gray { background-color: #696c6f!important; }

/* 狀態類 */
.disabled { display: none; }
label.error { color: red; }

/* 其他工具類 */
.limitLine { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -moz-line-clamp: 1; }
.bg-wrapper { background-size: cover; background-position: center; background-repeat: no-repeat; }
.c-primary { color: var(--color-primary); }

/* 圖標相關 */
.icon, .icon_b::before, .icon_a::after { content: ''; display: inline-block; vertical-align: middle; }
.icon_b::before { width: ; height: ; background-image: url(../images/icon/); background-size: 100%; background-repeat: no-repeat; }

/* 展開箭頭 */
.open::after { border-width: 8.7px 5px 0 5px; border-color: #fff transparent transparent transparent; margin-left: .25rem; transition: all .35s; }
.open[aria-expanded="true"]::after { transform: rotate(180deg); }

/* SVG 相關 */
svg path { fill: var(--color-primary); }


/* ==========================================
   3. 第三方插件 (Third-party Plugins)
   ========================================== */
/* bootstrap */
@media screen and (max-width: 991.98px) {
   .table-responsive > table { width: max-content !important; max-width: 1156px; }
}

/* Slick 輪播 */
.slick-dots { bottom: -45px; }
.slick-dots li { width: 15px; height: 15px; margin: 0 5px; }
.slick-dots li button:before { display: none; }
.slick-dots li.slick-active button { background-color: #676767; }
.slick-dots li button { width: 15px; height: 15px; padding: 0; border-radius: 100%; border: 0; background-color: #a8a8a8; }
.slick-dots li.slick-active button:before { display: none; }
.slick-dotted.slick-slider { margin-bottom: 0; }
.slick-arrow { height: 24px; width: 24px; font-size: 0; content: ''; display: block; }
.slick-prev { left: 0; }
.slick-next { right: 0; }
.slick-prev::before, .slick-next::before { display: none; }
.index-hero .slick-prev::before, .index-hero .slick-next::before { display: block; }

.center-slider .slick-slide a { display: block; }
.center-slider .slick-center .slider-info, .center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] .slider-info, .center-slider .slick-current.slick-active .slider-info { -webkit-line-clamp: 2; -moz-line-clamp: 2; }

/* SweetAlert2 */
.swal2-title{font-size:1.25em;}
.swal2-styled.swal2-confirm{font-size:1em;}
.swal2-styled.swal2-cancel{font-size: 1em;}


/* ==========================================
   4. UI 組件 (UI Components)
   ========================================== */

/* Modal 模態框 */
.modal-content { border: 0; border-radius: 0; }
.modal-header { border-bottom: 0; }
.modal-header .close { position: relative; min-width: 56px; min-height: 56px; opacity: 1; }
.modal-header .close::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/icon/icon-close.png) center center no-repeat; filter: var(--color-primary); }
.modal-body { padding: 0 1rem 1rem 1rem; }

/* Pagination 分頁 */
.pagination { margin: 5rem 0; align-items: center; }
.page-item + .page-item { margin-left: 4px; }
.page-item.disabled .page-link { background-color: transparent; border: 0; }
.page-link { border: 0; color: #313942; padding: 11px 15px; line-height:1; background-color: transparent; }
.page-item.active .page-link { color: #fff; background-color: var(--color-primary); }
.page-link:hover { color: var(--color-primary); background-color: #DDDDDD; }
.page-item:first-child .page-link, .page-item.active .page-link { border: 0; border-radius: 0; }

/* Button 按鈕系統 */
.btn { padding: 1rem 2rem; border-color: var(--color-primary); border-radius: 0; }
.btn-filled { color: #fff!important; background-color: var(--color-primary); }
.btn-filled:focus,
.btn-filled:hover { color: var(--color-primary)!important; background-color: #fff; border-color: var(--color-primary); }
.btn-outline { color: var(--color-primary)!important; background-color: transparent; border: 1px solid; }
.btn-outline:focus,
.btn-outline:hover { color: #fff!important; background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-arrow { position: relative; display: inline-flex!important; align-items: center; border: 0; }
.btn-arrow::before { content: ''; display: inline-flex; width: 20px; height: 20px; margin-right: 1rem; background: no-repeat center url(../images/icon/arrow-left.svg); }

/* 社群分享按鈕 */
.btn-with-svg { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.btn-with-svg svg path { fill: var(--color); }
.btn-share-FB { --color: white; padding: 8px 16px; color: var(--color); border: 1px solid #2470EB; background-color: #2470EB; }
.btn-share-FB:hover, .btn-share-FB:active { --color: #2470EB; color: var(--color); background-color: #fff; }
.btn-share-LINE { --color: white; padding: 8px 16px; color: var(--color); border: 1px solid #008A05; background-color: #008A05; }
.btn-share-LINE:hover, .btn-share-LINE:active { --color: #008A05; color: var(--color); background-color: #fff; }
.btn-share-url { --color: white; padding: 8px 16px; color: var(--color); border: 1px solid #696c6f; background-color: #696c6f; }
.btn-share-url:hover, .btn-share-url:active { --color: #696c6f; color: var(--color); background-color: #fff; }
.btn-share-print { --color: white; padding: 8px 16px; color: var(--color); border: 1px solid #3E5E7B; background-color: #3E5E7B; }
.btn-share-print:hover, .btn-share-print:active { --color: #3E5E7B; color: var(--color); background-color: #fff; }

.btn-top { background: url(../images/icon/); background-size: 60px; position: fixed; height: 60px; width: 60px; bottom: 15px; right: 20px; display: none; cursor: pointer; transition: all 0.3s ease-in-out; z-index: 999; }

/* 表單系統 */
.form-group { margin-bottom: 40px; }
.form-group label { color: var(--color-primary); }
.form-group .form-control, .form-group .form-control:focus, .form-group select { font-size: 1rem; line-height: 1.5; padding-left: 15px; padding-right: 15px; color: var(--color-primary); background-color: #fff; border: 1px solid #DDDDDD; }
.form-group .form-control:not(textarea), .form-group .form-control:not(textarea):focus, .form-group select, .form-control { height: calc(3.375rem + 2px); }
.form-control::placeholder, .form-control::-webkit-input-placeholder, input::-webkit-input-placeholder, ::-webkit-input-placeholder { color: #bfbfbf; }
.form-control, .form-control:focus { border: 1px solid #DDDDDD; background: #fff; border-radius: 0; }
.form-group input[type="submit"] { border: 0; padding: 0; }
input[type="date" i]::-webkit-calendar-picker-indicator { height: 24px; width: 24px; background: no-repeat center center / 100% url(../images/icon/date.svg); }

.form-check .form-check-input ~ input.form-control { display: none; }
.form-check .form-check-input:checked ~ input.form-control { display: block; }
.validationMsg { margin-top: -2.25rem; }
.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; }
.upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; }


/* ==========================================
   5. 頁首 (Header) & 導航 (Navigation)
   ========================================== */
.navbar { padding: 0; z-index: 99; background-color: #fff; transition: all .25s; }
body:not(.typeB) .navbar { position: sticky; top: 0; left: 0; right: 0; width: 100%; }

.search-panel { position: fixed; top: 0; left: 0; right: 0; width: 100%; display: none; padding: 5rem 0 2.5rem; background-color: var(--color-secondary); z-index: 1000; }
#closeSearchPanel { position: absolute; right: 0; top: -48px; cursor: pointer; }

nav.navbar .layout { width: 100%; position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; }
.navbar-brand { padding: 0; }
.navbar .nav-link { font-size: 18px; line-height: 26px; overflow: hidden; position: relative; transition: all .35s ease-out; }
.navbar .nav-link > ._en,
.navbar .dropdown-item > ._en { font-size: 0.9em; margin-left: 0.5rem; }
@media screen and (min-width: 1200px) {
   .navbar .nav-link > ._en { margin-left: 0; }
}
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { /* color: #fff; */ }

.navbar-nav .dropdown-toggle { display: flex; align-items: center; }
.navbar-nav .dropdown-toggle::after { position: relative; bottom: unset; right: -4px; margin-left: auto; }
.navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item:active { color: initial; background-color: #DDD; }
.navbar-nav .dropdown .dropdown-item { color: #505356; font-size: 18px; padding: 6px 24px; }

.navbar-toggler-icon { width: 24px; height: 24px; }
[aria-expanded="true"] .navbar-toggler-icon { }
.typeC ul.navbar-nav.ml-auto { margin-left: 0!important; }


/* ==========================================
   6. 頁腳 (Footer)
   ========================================== */
footer { padding: 40px 0; }
.footer-logos img { height: 40px; width: auto; max-width: 100%; }
.typeA .footer-contact { border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.typeA .footer-info { padding-top: 2.5rem; }


/* ==========================================
   7. 頁面特定樣式 (Page-specific Styles)
   ========================================== */

/* 首頁樣式 */
.index-hero .layout { max-width: 698px; }
.index-hero h1 { color: #fff; }
.index-hero .slick-dots { bottom: 12px; }
.index-hero-slide > .frcc { position: relative; min-height: 25.41667vw; }
.typeA .index-hero-slide { position: relative; }
.typeA .index-hero-slide > .frcc { position: absolute; inset: 0; min-height: unset; }
.index-hero-slide .layout { z-index: 1; }

.index-newsLine, .index-news { background-color: var(--color-primary); }
.index-news { padding: 3.75rem 0; }
.index-news .position-head { color: #fff; }
.index-news .position-head .subtitle::before { border-color: #fff; }
.index-position { padding-top: 5rem; padding-bottom: 5rem; background-color: var(--color-secondary); }
.position-head { color: var(--color-primary); }
.position-head .subtitle { position: relative; }
.position-head .subtitle::before { content: ''; display: inline-flex; width: 20px; margin-right: .5rem; border-top: 2px solid var(--color-primary); }
.index-numbers .col { color: var(--color-primary); }
.index-numbers .col .h1, .index-numbers .col h4 { font-weight: bold; }
.index-slider { padding-top: 5rem; padding-bottom: 5rem; }

#indexSlider { padding: 0 12px; }
#indexSlider .slider-item { padding-left: 12px; padding-right: 12px; }
#indexSlider .slider-cover .bg-wrapper { padding-bottom: 100%; }
#indexSlider .slider-info { color: var(--color-primary); }

.index-news-slider, .index-people, .index-news-slider2 { padding-top: 5rem; padding-bottom: 5rem; }
#index-newsSlider1 .slider-item { margin: 0 12px; }
#index-newsSlider1 .slider-info { color: var(--color-primary); }
#index-newsSlider1 .slider-cover .bg-wrapper { padding-bottom: 66.441%; }

.index-people { background-color: var(--color-secondary); }
.people-item { display: block; }
.people-item > [class^="people-item-"], #index-newsSlider2 .slider-info { color: var(--color-primary); }
.people-item-cover { width: 68.376%; }
.people-item-cover .bg-wrapper { padding-bottom: 100%; }
.people-item-des, #index-newsSlider2 .slider-info p.limitLine { -webkit-line-clamp: 2; -moz-line-clamp: 2; height: 64px; max-height: 64px; }
#index-newsSlider2 .slider-cover .bg-wrapper { padding-bottom: 66.666%; }

/* 通用頁面樣式 */
.page-head { padding: 7.5rem 0; }
.result-main { background-color: var(--color-secondary); }
.result-main .news-title { color: var(--color-primary); flex-grow: 1; }
.result-main .news-img-left { width: 300px; flex-shrink: 0; max-width: 100%; }
#subscribe-form > .text-center { color: var(--color-primary); }

/* 網站導覽  */
.guide {}
.guide .nav-link,
.guide .dropdown-item { padding: 4px 0; color: #039; display: inline-block; width: auto; }
.guide .nav-link > ._en,
.guide .dropdown-item > ._en { font-size: 0.9em; margin-left: 0.5rem; }
.guide .dropdown-menu { display: block; position: static; }
.guide .dropdown-toggle { color: #777; }
.guide .dropdown-toggle::after { content: ''; border: none; vertical-align: baseline; margin-left: 0; }

/* 詳情頁樣式 */
.detail-main { padding-bottom: 7.5rem; }
.detail-board { padding: 3.75rem; background-color: #ffffff; }
.detail-board-title { font-size: 1.6rem; line-height: 1.5; font-weight: 700; color: var(--color-primary); }
.detail-board img { max-width: 100%; }

/* 登入頁樣式 */
.form-main { padding-top: 5rem; padding-bottom: 5rem; }
.formBoard-head { color: var(--color-primary); margin-bottom: 3.75rem; }

/* 文章頁樣式 */
.postPage .news-title { color: var(--color-third); }

/* FAQ 頁樣式 */
.tab-panel > a { display: block; padding: 1rem; }
.tab-panel.active { background-color: #ffffff; color: var(--color-primary); }
.subPage .result-main { padding-bottom: 7.5rem; }

/* ==========================================
   8. 響應式設計 (Responsive Design)
   ========================================== */

@media screen and (min-width: 1200px) {
  .container-xl { max-width: 1026px; }
  .navbar { padding-left: 0; padding-right: 0; }
  nav.navbar .layout { -ms-flex-align: flex-start; align-items: center; }
  .typeB main .navbar.fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
  .typeB .navbar-brand { padding: 1rem 0; }
  .typeC .navbar-brand { padding: 0 1.25rem; margin-right: 0; }
  .navbar-brand img { height: 54px; width: auto; }
  .navbar-expand-xl .navbar-nav .nav-item { transition: all .35s; }
  .navbar-expand-xl .navbar-nav .nav-link { padding: 0.875rem 0.875rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; }
  .navbar .nav-link[aria-expanded="true"]::after { transform: rotate(180deg); }
  .navbar-nav .nav-link.dropdown-toggle::after { position: absolute; bottom: 6px; right: unset; margin-inline: .26em; }
  main { min-height: calc(100vh - 295px); }
}

@media screen and (min-width: 768px) {
  .container-md { max-width: 810px; }
  .my-md-4_5 { margin-top: 2.5rem!important; margin-bottom: 2.5rem!important; }
  
  .index-position .row { justify-content: space-between; align-items: center; }
  .index-slider .slick-prev, .center-slider .slick-prev { left: 4px; }
  .index-slider .slick-next, .center-slider .slick-next { right: 4px; }
  .typeA .footer-logos img, 
  .typeC .footer-logos img { height: 24px; width: 200px; }
  
  .modal-md { max-width: 580px; }
  .modal-body { padding: 0 2.5rem 2.5rem 2.5rem; }
  
  .center-slider .slick-slide { transform: scale(0.73); transition: all 0.4s ease-in-out; }
  .center-slider .slick-slide, .center-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] { transform: scale(0.73, 0.73); transition: all 0.4s ease-in-out; }
  .center-slider .slick-center, .center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"], .center-slider .slick-current.slick-active { transform: scale(1.2); }
  .center-slider .slick-center .slider-info, .center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] .slider-info, .center-slider .slick-current.slick-active .slider-info { font-size: 15px; line-height: 26.6px; max-height: 53.2px; }
  
  #index-newsSlider2 .slider-item { margin: 0 12px; }
  .result-main .news-title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -moz-line-clamp: 1; height: 32px; max-height: 32px; }
  .faq-tab { margin-bottom: 3.5rem; }
}

@media screen and (min-width: 576px) {
  .container-sm { max-width: 618px; }
}

@media screen and (max-width: 1199px) {
  .navbar { box-shadow: 0 0 2px #f5f5f5; max-height: 100dvh; overflow: auto; }
  .typeB .navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
  .typeB main { margin-top: 61.5px; }
  .navbar-nav { width: 100%; }
  .navbar-collapse { padding: 6px 0 32px; }
  .navbar-brand { padding: 14px 0; }
  .navbar-brand img { height: 2rem; }
  .navbar-toggler { border: 0; padding: 0; z-index: 2; }
  .navbar-expand-xl .navbar-nav .nav-link { font-size: 18px; padding: 10px 9px; }
  .navbar-nav .dropdown > .dropdown-menu { border: 0; padding-block: 0; padding-left: 16px; margin-block: 0 4px; }
  .navbar-nav .dropdown .dropdown-item { padding: 9px 12px; white-space: normal; }
  button[aria-expanded="true"] .navbar-toggler-icon #menu, button:not([aria-expanded="true"]) .navbar-toggler-icon #close { display: none; }
}

@media screen and (max-width: 767px) {
  /* 排版響應式調整 */
  body { font-size: 1rem; letter-spacing: normal; }
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.375rem; line-height: 2.125rem; }
  h4, .h4 { font-size: 1rem; }
  p, .p { font-size: 1rem; }
  p:not(:last-child), .p:not(:last-child) { margin-bottom: ; }
  
  /* 按鈕響應式調整 */
  .btn { width: 100%; display: block; }
  
  /* 搜尋面板 */
  .search-panel { padding: 4.125rem 0 1.125rem; }
  
  /* 頁腳響應式調整 */
  footer { padding: 1.125rem 0 1rem; }
  footer .col-xl-6 > .fccc img { max-width: 280px; width: 100%; height: auto; }
  
  /* 首頁響應式調整 */
  .index-hero-slide > .frcc { min-height: 130.133vw; }
  .index-position, .index-slider { padding-top: 1.125rem; padding-bottom: 1.125rem; }
  .position-poster { order: -1; text-align: center; }
  .index-numbers .col + .col { margin-top: 3rem; }
  #indexSlider { padding: 0 45px; }
  .index-slider .slick-prev, .newsSlider1 .slick-prev { left: 24px; }
  .index-slider .slick-next, .newsSlider1 .slick-next { right: 24px; }
  #index-newsSlider1 { padding: 0 48px; }
  .center-slider .slick-center .slider-info, .center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] .slider-info, .center-slider .slick-current.slick-active .slider-info { max-height: 64px; }
  .typeA .footer-info { padding-top: 1.5rem; }
  
  /* 通用頁面響應式調整 */
  .page-head { padding: 2.5rem 0; }
  .pagination { margin: 2.5rem 0; }
  .people-item { width: 81.74%; margin-left: auto; margin-right: auto; }
  
  /* 詳情頁響應式調整 */
  .detail-main { padding-bottom: 2.5rem; }
  .detail-board { padding: 1.125rem; }
  .page-action .btn-arrow { padding-left: 0; display: flex; }
  .upload-btn-wrapper { display: block; }
  
  /* 登入頁響應式調整 */
  .form-main { padding-top: 2.125rem; padding-bottom: 2.5rem; }
  
  /* 文章頁響應式調整 */
  .postPage li a.fcss > * { width: 100%!important; padding-left: 104px; position: relative; }
  .postPage li a.fcss > *::before { content: attr(tHead); width: 80px; font-size: .9375rem; color: #696c6f; position: absolute; left: 0; }
}


/* ==========================================
   9. 無障礙功能 (Accessibility)
   ========================================== */

/* 焦點樣式 */
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: -webkit-focus-ring-color auto 1px; }
button:focus { outline: none; }
button:focus-visible, .btn:focus-visible { outline: -webkit-focus-ring-color auto 1px; }

/* 跳轉按鈕 */
.skip-link { position: fixed; top: 0px; left: 12px; transform: translateY(-100%); background: #000 !important; color: #fff !important; padding: 8px 16px !important; text-decoration: none !important; border-radius: 4px; font-size: 14px; white-space: nowrap; z-index: 1001; transition: top 0.2s ease; }
.skip-link:focus { transform: translateY(0%); outline: 2px solid #fff; outline-offset: 2px; }
#main { scroll-margin-top: 80px; }
#main:focus { outline: -webkit-focus-ring-color auto 1px; }