@charset "UTF-8";
/* 全系統版面的基礎設置 */
/*無障礙設定*/

.odd-accessbility-first-button {
    color: transparent;
    position: absolute;
    top:0;
    left:0;
    cursor:default !important;
}
.odd-accessbility-first-button:focus {
    color:red;
    text-decoration: none;
    cursor: pointer;
    
}

/* 版面控制 Begin */
:root {
    /*全域字體變數，搭配 font-size:var() 使用*/
    --odd-tiny:70%;
    --odd-small:90%;
    --odd-normal:100%;
    --odd-mobile: 110%;
    --odd-large:120%;
    --odd-xlarge:150%;
    --odd-xxlarge:200%;
}
html, body {
    width: 100%;
    height: 100%;
    
}
.odd-tiny {
    font-size: var(--odd-tiny);
}
.odd-small {
    font-size: var(--odd-small);
}
.odd-normal {
    font-size: var(--odd-normal);
}
.odd-large {
    font-size: var(--odd-large);
}
.odd-xlarge {
    font-size: var(--odd-xlarge) !important;
}
.odd-xxlarge {
    font-size: var(--odd-xxlarge);
}
.odd-selflearn-layout {
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    row-gap: 1em;
    align-items: start;
    grid-template-areas: 
    'header'
    'main'
    'footer';
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
.odd-register-layout {
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    row-gap: 1em;
    align-items: start;
    grid-template-areas: 
    'header'
    'main'
    'footer';
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
.odd-basic-layout {
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    row-gap: 1em;
    align-items: start;
    grid-template-areas: 
    'header'
    'main'
    'footer';
    /* font-size: 1.2em; */
    font-family: Arial, Helvetica, sans-serif;
}
.odd-cms-se-layout {
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    row-gap: 1em;
    align-items: start;
    grid-template-areas: 
    'header'
    'main'
    'footer';
    /* font-size: 1.2em; */
    font-family: Arial, Helvetica, sans-serif;
}
.odd-imusic-layout {
    display:grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    row-gap: 1em;
    align-items: start;
    grid-template-areas: 
    'header'
    'main'
    'footer';
    /* font-size: 1.2em; */
    font-family: Arial, Helvetica, sans-serif;
}
.odd-imusic-fontsize {
    font-size: 100%;
}
.odd-basic-font-size {
    font-size: 2em;
}
.odd-basic-header {
    display: grid;
    grid-area: header;
}
.odd-basic-main {
    display: grid;
    grid-template-rows: auto;
    grid-area: main;
}
.odd-basic-footer {
    display: grid;
    max-height: 12.5em;
    grid-area: footer;
    
}
/* 版面控制 End */
/* 前台顏色控制 Begin */

/* 前台顏色控制 End */
/* 後台 header 樣式設定 三欄式 begin*/
.odd-backstage-header-block {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    width: 100%;
    margin: auto;
    gap: 1em;
    padding: 0.5em;
}
.odd-backstage-header-color {
    color: var(--odd-light);
    background-color: var(--odd-header);
}
.odd-basic-main-color {
    color: var(--odd-main);
}
.odd-basic-footer-color {
    color:var(--odd-footer)
}
/* 後台 header 樣式設定 三欄式 End*/
@media only screen and (max-width:601px) { 
    .odd-basic-layout{
        font-size: var(--odd-text-mobile);
    }
    .odd-basic-main {
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
    .odd-hide-s{
        display: none !important;
    }
}
@media screen and (max-width:1024px) and (min-width:602px) { 
    .odd-basic-layout{
        font-size: var(--odd-mobile);
    }
    .odd-basic-main {
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
    .odd-hide-m {
        display: none !important;
    }
}
@media screen and (max-width:1180px) and (min-width:1025px) { 
    .odd-basic-layout{
        font-size: var(--odd-mobile);
    }
    .odd-basic-main {
        margin-left: 2em;
        margin-right: 2em;
    }
    .odd-hide-air {
        display: none !important;
    }
}
@media screen and (max-width:1440px) and (min-width:1181px) { 
    .odd-basic-layout{
        font-size: var(--odd-large);
    }
    .odd-basic-main {
        margin-left: 2em;
        margin-right: 2em;
    }
    .odd-hide-desktop{
        display: none !important;
    }
}
@media screen and (max-width:1920px) and (min-width:1441px) { 
    .odd-basic-layout{
        font-size: var(--odd-large);
    }
    .odd-basic-main {
        margin-left: 10%;
        margin-right: 10%;
    }
    .odd-hide-desktop{
        display: none !important;
    }
}
@media only screen and (min-width:1921px) { 
    .odd-basic-layout{
        font-size: var(--odd-large);
    }
    .odd-basic-main {
        margin-left: 10%;
        margin-right: 10%;
    }
    .odd-hide-xxl{
        display: none !important;
    }
}