@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 300;
    src: url("./public/googlefont/MaterialIcons-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url("./public/googlefont/MaterialIcons-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 300;
    src: url("./public/googlefont/MaterialIconsOutlined-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url("./public/googlefont/MaterialIconsOutlined-Regular.otf") format('truetype');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 300;
    src: url("./public/googlefont/material-symbols-outlined.woff2") format('woff2');
}

@font-face {
    font-family: Huninn;
    src: url("./public/font/jf-openhuninn-2.0.ttf");
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    /* line-height: 1; */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* vertical-align: baseline; */
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons.outlined {
    font-family: 'Material Icons Outlined';
}

.material-icons.symbols-outlined {
    font-family: 'Material Symbols Outlined';
}

.material-icons.symbols-outlined.sm {
    font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 48;
}

.material-icons.font-sm { font-size:20px; line-height:20px; }

/**********************************************************************************************************************************/

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", "微軟正黑體","Microsoft JhengHei", "Arial", serif;
}

img {
    width: 100%;
}
img.cover {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
}

.img__logo { max-height:60px; max-width:250px; }

label { color:#7a7d84; }

button {
    border: none;
    background-color: transparent;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.check { display: inline-block; position: relative; padding-left: 30px; margin-bottom: 0px; cursor: pointer; font-size: 1.125rem; color:#434655; overflow:hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; display:none; }/* Hide the browser's default checkbox */
.checkmark { position: absolute; top: 4px; left: 4px; height: 20px; width: 20px; background-color: #fff; border:2px solid #434655; border-radius:2px; }/* Create a custom checkbox */
.check:hover input ~ .checkmark { background-color: #fff; }/* On mouse-over, add a grey background color */
.check input:checked ~ .checkmark { background-color: #434655; }/* When the checkbox is checked, add a blue background */
.checkmark:after { content: ""; position: absolute; display: none; }/* Create the checkmark/indicator (hidden when not checked) */
.check input:checked ~ .checkmark:after { display: block; }/* Show the checkmark when checked */
.check .checkmark:after { left: 5px; top: 1px; width: 7px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }/* Style the checkmark/indicator */

input { width:100%; border:none; background-color:#f9f9f9; padding:1rem; outline: none; }
input[type="color"] { width:80px; padding:3px 5px; }

input.search { border:1px solid #a1a2aa; background: url("../images/search.png")no-repeat left center; background-size:24px; background-position: 10px; padding-left:40px; }
select.search { border:1px solid #a1a2aa; padding:0.375rem 2rem 0.375rem 0.75rem; background-color:#ecedee; color:#434655; }

select { background: url("./images/arrow.png") no-repeat center center; background-size:20px; background-position:calc(100% - 5px) 50%; -webkit-appearance: none; -moz-appearance: none; } /* select 改變按鈕圖示 */
select::-ms-expand { display: none; } /* ie remove arrow */

select.w_auto { width:auto; padding-right:40px; }

.form-control,
.btn:focus { box-shadow: none !important; }

.bb-solid-1 { border-bottom: 1px solid #e2e2e2; }
.bb-dotted-1 { border-bottom:1px dotted #ababab; }

.wd-auto { width:auto; }
.wd-100 { width:100%; }
.wd-80 { width:80%; }
.wd-75 { width:75%; }
.wd-66 { width:66%; }
.wd-60 { width:60%; }
.wd-50 { width:50%; }
.wd-40 { width:40%; }
.wd-33 { width:33.33333%; }
.wd-25 { width:25%; }
.wd-20 { width:20%; }

.size-xxl { font-size: 72px; }
.size-xl { font-size: 56px; }
.size-psn { font-size: 50px; }
.size-nn { font-size: 48px; }
.size-nns { font-size: 46px; }
.size-nnss { font-size: 44px; }
.size-b { font-size: 36px; }
.size-l { font-size: 32px; }
.size-ls { font-size: 30px; }
.size-p { font-size: 28px; }
.size-ps { font-size: 26px; }
.size-n { font-size: 24px; }
.size-ns { font-size: 22px; }
.size-m { font-size: 20px; }
.size-ms { font-size: 18px; }
.size-s { font-size: 16px; }
.size-xs { font-size: 14px; }
.size-xxs { font-size: 12px; }

.line-height-x16 { line-height:1.6; }
.line-height-x145 { line-height:1.45; }
.line-height-x14 { line-height:1.4; }
.line-height-x12 { line-height:1.2; }
.line-height-x1 { line-height:1; }

.letter-spacing-2 { letter-spacing: 2px; }
.letter-spacing-1 { letter-spacing: 1px; }

.font-num { font-family: 'arial'; }

.ratio-w16h9 { aspect-ratio: 16 / 9; }
.ratio-w4h3 { aspect-ratio: 4 / 3; }
.ratio-w1h1 { aspect-ratio: 1 / 1; }
.ratio-w3h4 { aspect-ratio: 3 / 4; }
.ratio-w9h16 { aspect-ratio: 9 / 16; }

.container-xxl { width:100%; padding-left: 15px; padding-right: 15px; }

.row.smp { margin-left:-5px; margin-right:-5px; }
.row.smp .col-6 { padding-left:5px; padding-right:5px; }

.noscroll::-webkit-scrollbar { display: none; }
.noscroll { -ms-overflow-style: none; scrollbar-width:none; }

.page__button {
    width: 40px;
    height: 40px;
}

.page__select {
    width: 85px;
    padding: 8px 15px;
    border: 1px solid #ababab;
}

.hover__opacity { transition:opacity 0.2s ease-in-out; }
.hover__opacity:hover { opacity: 0.8; }
.form__container { width:675px; max-width:100%; border-radius:20px; }
.form__title { font-size:32px; font-weight: bold; text-align: center; margin-bottom:36px; }
.form__button { width:100%; background-color:#5da6e2; color:#fff; border-radius:4px; padding:1rem; }
.form__button.inactive { background-color:#fff; border:#5da6e2 1px solid; color:#5da6e2; }
.form__input__captcha { text-align: center; width:48px; height:48px; padding:0; color:#393a3c; border-radius:4px; }

.tab__link { display: block; padding:8px 12px; color:#212529; border:1px solid transparent; border-radius:20px; margin:0.25rem 0.25rem; }
.tab__link.active { border:1px solid #5da6e2; color:#5da6e2; background-color:#5da6e2; color:#fff; }
.tab__link:hover { border:1px solid #5da6e2; color:#5da6e2; background-color:#fff; color:#5da6e2; }

.main__imagearea { width:250px; }
.main__button { color:#5da6e2; padding:0.5rem 1rem; border:1px solid #5da6e2; border-radius:0.25rem; }
.main__button:hover { background-color:#5da6e2; color:#fff; }

.admin-bg-color-1 { background-color:#3e9cda; }

.editor__content { font-size:18px; }
.editor__content img { max-width:100%; }

.site__info { max-width:75%; }

.sidebar { position: fixed; right:0; top:40%; width:80px; transition:all 0.3s; border-top-left-radius: 8px; border-bottom-left-radius: 8px; overflow: hidden; }
.sidebar__line { background-color:#00b500; font-size:13px; text-align:center; padding:15px 0; }

@media (max-width:991.98px) {

}

@media (max-width:767.98px) {
    .wd-md-100 { width:100%; }
    .wd-md-80 { width:80%; }
    .wd-md-75 { width:75%; }
    .wd-md-66 { width:66%; }
    .wd-md-60 { width:60%; }
    .wd-md-50 { width:50%; }
    .wd-md-40 { width:40%; }
    .wd-md-33 { width:33.33333%; }
    .wd-md-25 { width:25%; }

    .size-md-xxl { font-size: 72px; }
    .size-md-xl { font-size: 56px; }
    .size-md-psn { font-size: 50px; }
    .size-md-nn { font-size: 48px; }
    .size-md-nns { font-size: 46px; }
    .size-md-nnss { font-size: 44px; }
    .size-md-b { font-size: 36px; }
    .size-md-l { font-size: 32px; }
    .size-md-ls { font-size: 30px; }
    .size-md-p { font-size: 28px; }
    .size-md-ps { font-size: 26px; }
    .size-md-n { font-size: 24px; }
    .size-md-ns { font-size: 22px; }
    .size-md-m { font-size: 20px; }
    .size-md-ms { font-size: 18px; }
    .size-md-s { font-size: 16px; }
    .size-md-xs { font-size: 14px; }
    .size-md-xxs { font-size: 12px; }

    .main__imagearea { width:100%; }

    .site__info { max-width:100%; }

    .sidebar { bottom:0; left:0; right:0; top:auto; width:100%; border-radius: 0; }
}

@media (max-width:575.98px) {

}


@media (min-width:1400px) {
    .container-xxl { max-width:1320px; margin-left:auto; margin-right:auto; }
}