:root {
    --main-color: #0081cc;
    --title-color: #0081cc;
    --link-color: #0081cc;
    --sidebar-color: #434655;
}

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

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

a,a:hover { 
    text-decoration: none;
}

a:hover .hover-scale { overflow: hidden; transition: all .2s; transform: scale(1.025);  }

ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

.image-position-top { object-position: center top; }
.image-position-bottom { object-position: center bottom; }
.image-position-left { object-position: left center; }
.image-position-right { object-position: right center; }

.position- { bottom:0; left:0; }
.position-lt { top:0; left:0; }
.position-ct { top:0; left:50%; transform: translate(-50%,0); }
.position-rt { top:0; right:0; }
.position-lc { top:50%; left:0; transform: translate(0,-50%); }
.position-cc { top:50%; left:50%; transform: translate(-50%,-50%); }
.position-rc { top:50%; right:0; transform: translate(0,-50%); }
.position-lb { bottom:0; left:0; }
.position-cb { bottom:0; left:50%; transform: translate(-50%,0); }
.position-rb { bottom:0; right:0; }

.bg-position- { background-position: center center; }
.bg-position-lt { background-position: left top; }
.bg-position-ct { background-position: center top; }
.bg-position-rt { background-position: right top; }
.bg-position-lc { background-position: left center; }
.bg-position-cc { background-position: center center; }
.bg-position-rc { background-position: right center; }
.bg-position-lb { background-position: left bottom; }
.bg-position-cb { background-position: center bottom; }
.bg-position-rb { background-position: right bottom; }

.bg-image-fixed { background-attachment: fixed; }
@media screen and (max-width:768px) {
    .bg-image-fixed { background-attachment: scroll; }
}

.iframe-rounded-0 iframe { border-radius: 0; }
.iframe-rounded iframe { border-radius: 0.25rem; }
.iframe-rounded-pill iframe { border-radius: 50rem; }
.iframe-rounded-circle iframe { border-radius: 50%; }

.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%; }

.d-grid { display: grid; }

.grid-columns-100 { grid-template-columns: repeat(1,1fr); }
.grid-columns-50 { grid-template-columns: repeat(2,1fr); }
.grid-columns-33 { grid-template-columns: repeat(3,1fr); }
.grid-columns-25 { grid-template-columns: repeat(4,1fr); }

.grid-ratio- , .grid-ratio-w16h9 { grid-row-end: span 9; }
.grid-ratio-w4h3 { grid-row-end: span 12; }
.grid-ratio-w1h1 { grid-row-end: span 16; }
.grid-ratio-w3h4 { grid-row-end: span 21; }
.grid-ratio-w9h16 { grid-row-end: span 28; }

.line-height-b { line-height:48px; }
.line-height-l { line-height:32px; }
.line-height-n { line-height:24px; }

.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; }

.size-xxl { font-size: 72px; }
.size-xl { font-size: 56px; }
.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; }

.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,
.container-xxxl { width:100%; padding-left: 15px; padding-right: 15px; }

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

.straight_text_rl { writing-mode: vertical-rl; }

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

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

iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 25px;
}

.site__header { height: 100vh; }
.site__header.inpage { height: auto; min-height:77px; }

.site__header .menu { 
    height: 77px;
}

.header__menu { width:100%; }
.header__menu.active { position: fixed; left:0; top:0; z-index:1000; background-color:rgba(255,255,255,0.3); }

.site__header .menu__mask {
    display: none;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:rgba(0,0,0,0.4);
    z-index:6;
}

.header__slogan {
    height:calc(100vh - 120px);
    padding: 0px 1rem 120px;
}

.site__header .slide-btn { display: inline-block; position:relative; bottom:-5px; color:var(--sidebar-color); }
.site__header .slide-btn:hover { cursor: pointer; color:var(--main-color); text-decoration: none; }
.site__header .slide-btn:hover .slidebd .bar { background-color:var(--main-color); }
.site__header .slide-btn .txt { line-height: 50px; }
.site__header .slide-btn .slidebd { position: relative;  height:30px; width:1px; background-color: transparent; margin-left:23px; overflow: hidden; }
.site__header .slide-btn .slidebd .bar { position: absolute; top:0px; height:40px; width:2px; background-color:var(--sidebar-color); animation: jump 2s infinite; }

#navbarPhone { transition:all 0.2s; top:-100vh; opacity:0; z-index:5; }
#navbarPhone.show { top:0; opacity:1; }

@keyframes jump {
    0% { top:-30px; }
    100% { top:100%; }
}

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

.block {
    padding:60px 0px;
}

.element {
    padding: 1rem 2rem;
    align-self: stretch;
}

.color-main { color: var(--main-color); }
.color-subject { color: #1b1b1b; }
.color-header { color: #434655; }
.color-desc { color: #474747; }
.color-white { color:#fff; }
.color-form-info { color:#666666; }
.color-footer-title { color:#777777; }

.bg-color-white { background-color:#fff; }
.bg-color-line { background-color:#d9ecf7; }
.bg-color-main { background-color:var(--main-color); }
.bg-color-qa { background-color: #e5f4fb; }

.element__title { color:var(--title-color); }

.element__link {
    text-decoration: none;
}

.element__link:hover {
    text-decoration: none;
}

.element__link.Type1 {
    color: var(--main-color);
    background-color:transparent;
    padding: .5rem 3.5rem;
    border: 1px solid var(--main-color);
}

.element__link.Type1:hover {
    background-color:var(--main-color);
    color:#fff;
}

.element__link.Type2 {
    color: #fff;
    background-color:var(--main-color);
    padding: .5rem 3.5rem;
    border: 1px solid var(--main-color);
}

.element__link.Type2:hover {
    color:var(--main-color);
    background-color:#fff;
}

.album__mask {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding: 0.875rem;
    background-color:rgba(0,0,0,0.4);
}

.news__imgarea {
    width:295px;
}

.cls__item {
    color: #5e5e5e;
    border-bottom: 1px solid #5e5e5e;
}

.cls__item:hover,
.cls__item.active {
    color: var(--main-color);
    border-bottom: 2px solid var(--main-color);
}

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

.page__button {
    width: 40px;
    height: 40px;
    background-color: #ababab;
}

.page__button.active {
    background-color: var(--main-color);
}

/* .weblink { border-bottom:3px solid #e2e2e2; } */
.weblink:hover { background-color: var(--main-color); color:#fff; /* border-bottom:3px solid var(--main-color); */ }
.weblink__desc { color:#5e5e5e; }
.weblink:hover .weblink__title,
.weblink:hover .weblink__desc { color:#fff; }

.site__form textarea,
.site__form select,
.site__form input { width:100%; margin:0; padding:0; border:none; border-bottom:1px solid #ababab; background-color:transparent; color:#666666; }

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

textarea { resize:none; }

.sidebar { position: fixed; right:0; bottom:50%; transform: translate(0,+50%); transition: right 0.3s; opacity:0.8; }
.sidebar__block { width:80px; height:80px; display: flex; flex-direction: column; align-items:center; justify-content: center; }
.sidebar__block:hover { color:#fff; background-color:#434655; }
.sidebar__block.totop { background-color:#434655; }
.sidebar__block.totop:hover { background-color:var(--main-color); }

.hidden-text { position: absolute; width:1px; height:1px; overflow:hidden; white-space: nowrap; }

@media (max-width:991.98px) {
    .site__header nav.navbar { position: absolute; left:0; right:0; top:0; height:100vh; z-index:10; transform: translate(-110%,0); transition: transform .3s ease-in-out; }
    .site__header .navbar__bg { background-color:#fff; }
    /* .site__header .menu { 
        padding: 20px 0rem; 
        height: 80px;
    } */

    nav.navbar.active { transform: translate(0,0); }
    .menu_bar:not(:first-child) { padding:20px; border-bottom: 1px solid #434655; }

    .sidebar { bottom:0; transform:none; display: flex; width:100%; }
    .sidebar__block { flex-grow:1; height:48px; }
}

@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%; }
    .wd-md-20 { width:20%; }

    .size-md-xxl { font-size: 72px; }
    .size-md-xl { font-size: 56px; }
    .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; }

    .grid-columns-md-100 { grid-template-columns: repeat(1,1fr); }
    .grid-columns-md-50 { grid-template-columns: repeat(2,1fr); }
    .grid-columns-md-33 { grid-template-columns: repeat(3,1fr); }
    .grid-columns-md-25 { grid-template-columns: repeat(4,1fr); }

    .bg-position-md- { background-position: center center; }
    .bg-position-md-lt { background-position: left top; }
    .bg-position-md-ct { background-position: center top; }
    .bg-position-md-rt { background-position: right top; }
    .bg-position-md-lc { background-position: left center; }
    .bg-position-md-cc { background-position: center center; }
    .bg-position-md-rc { background-position: right center; }
    .bg-position-md-lb { background-position: left bottom; }
    .bg-position-md-cb { background-position: center bottom; }
    .bg-position-md-rb { background-position: right bottom; }

    .element { padding: 1rem; }

    .news__imgarea { width:100%; }
    
    .img__logo { max-width:250px; }
}

@media (min-width:992px) {
    
}

@media (min-width:1200px) {
    .container-xl { max-width:1140px; }
}

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

@media (min-width:1600px) {
    .container-xxxl { max-width:1570px; }
}