@charset "UTF-8";
/*===========================================
Common
===========================================*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*--- (e)normalize.css v8.0.1 ---*/

:root{
    --primary-color:#0F83FA;
    --primary-rgb:15,131,250;
    --secondary-color:#38CEFF;
    --secondary-rgb:56,206,255;
    --theme-text-color:#fff;
    --part-title-color:var(--primary-color);
    --linear-gradient:linear-gradient(135deg, rgba(56,206,255,1) 0%,rgba(76,191,254,1) 25%,rgba(51,174,252,1) 25%,rgba(40,159,253,1) 61%,rgba(54,165,255,1) 61%,rgba(54,165,255,1) 61%,rgba(15,131,250,1) 100%);
    --link-color:#127dd7;
    --hover-color:#2569e5;
}

body{
    margin:0;
    font-size:16px;
    line-height:1.5;
    color:#333;
    font-family:'Plus Jakarta Sans', "Helvetica Neue", "Helvetica", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
    font-optical-sizing:auto;
    text-shadow:0 .3px .3px rgba(0,0,0,.08);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    image-rendering: -webkit-optimize-contrast;
    background-color:#111;
    overflow-x:hidden;
}
@media screen and (max-width:992px){
    body.is-fixed{
        overflow:hidden;
    }
}

*, ::after, ::before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

a{
    color:var(--link-color);
    text-decoration:none;
    word-break:break-word;
}
a:hover, a:active, a:focus{
    color:var(--hover-color);
}

/*-------------------------------------------
Wrapper & Grid System
-------------------------------------------*/
.wrapper{
    max-width:1400px; 
    height:100%;
    margin:0 auto; 
    position:relative;
    /* box-shadow:inset 0 0 1px rgba(0,0,0,.9); */
}
    .form__container{
        position:relative;
        margin:0 auto;
    }
        .form__row{
            display:flex;
            flex-wrap:wrap;
            margin-left:-8px; margin-right:-8px;
            position:relative;
        }
        .form__container > .form__row:first-of-type{
            margin-top:-8px;
        }
            .form__col{
                position:relative;
                padding:8px;
                line-height:1.3;
            }
            .col-1{width:8.33%;}
            .col-2{width:16.66%;}
            .col-3{width:25%;}
            .col-4{width:33.33%;}
            .col-5{width:41.66%;}
            .col-6{width:50%;}
            .col-7{width:58.33%;}
            .col-8{width:66.66%;}
            .col-9{width:75%;}
            .col-10{width:83.33%;}
            .col-11{width:91.66%;}
            .col-12{width:100%;}
            .col-auto{
                flex:0 0 auto; width:auto;
            }
            .form__control{
                display:block;
                width:100%;
            }
                .col__label{
                    display:block;
                    color:var(--primary-color);
                    font-size:.875rem; font-weight:700;
                    line-height:1;
                    margin-bottom:.35em;
                }
@media screen and (max-width:1440px){
    .wrapper{
        padding:0 30px;
    }
}
@media screen and (max-width:1024px){
    .wrapper{
        padding:0 20px;
    }
}
@media screen and (max-width:992px){
    .wrapper{
        padding:0 15px;
    }
}
@media screen and (max-width:768px){
    .col-m-1{width:8.33%;}
    .col-m-2{width:16.66%;}
    .col-m-3{width:25%;}
    .col-m-4{width:33.33%;}
    .col-m-5{width:41.66%;}
    .col-m-6{width:50%;}
    .col-m-7{width:58.33%;}
    .col-m-8{width:66.66%;}
    .col-m-9{width:75%;}
    .col-m-10{width:83.33%;}
    .col-m-11{width:91.66%;}
    .col-m-12{width:100%;}
    .col-m-auto{
        flex:0 0 auto; width:auto;
    }
}
@media screen and (max-width:576px){
    .form__col{
        padding-top:10px; padding-bottom:10px;
    }
    .col-s-1{width:8.33%;}
    .col-s-2{width:16.66%;}
    .col-s-3{width:25%;}
    .col-s-4{width:33.33%;}
    .col-s-5{width:41.66%;}
    .col-s-6{width:50%;}
    .col-s-7{width:58.33%;}
    .col-s-8{width:66.66%;}
    .col-s-9{width:75%;}
    .col-s-10{width:83.33%;}
    .col-s-11{width:91.66%;}
    .col-s-12{width:100%;}
    .col-s-auto{
        flex:0 0 auto; width:auto;
    }
    .col__label{
        margin-bottom:.35em;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .wrapper{
        padding:0 10px;
    }
}

/*-------------------------------------------
Clearfix: contain floats
-------------------------------------------*/
.clearfix::after{content:""; display:table; clear:both;}
/* For IE 6/7 only */
.clearfix{*zoom: 1;}

/*-------------------------------------------
Header
-------------------------------------------*/
#header__container{
    position:relative;
    background-color:var(--primary-color);
}
    .header-links{
        list-style:none;
        margin:0;
        padding:8px 30px;
        text-align:right;
        color:#fff;
        font-size:.875rem; font-weight:700;
        line-height:1;
    }
        .header-links__item{
            display:inline-block;
            /* vertical-align:top; */
            margin-left:30px;
        }
        .header-item-home{
            
        }
            .header-links__link{
                display:inline-block;
                color:#fff;
                transition:.2s;
            }
            .header-links__link[href*="login"],
            .header-links__link[href*="logout"]{
                background-color:rgba(0,0,0,.2);
                border-radius:5px;
                padding:5px 15px;
            }
            .header-links__link:focus,
            .header-links__link:hover{
                color:#fff;
                opacity:.6;
            }
                .header__member-name{
                    color:#fff;
                    opacity:.7;
                }
                .header__member-name a{
                    display:inline-block;
                    border-bottom:1px solid #fff;
                    padding-bottom:1px;
                }
@media screen and (max-width:992px){
    .header-links{
        display:none;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    #header__container{
        background-color:#fff;
    }
}

/*-------------------------------------------
Menu icon
-------------------------------------------*/
@media screen and (max-width:992px){
    .toggle-menu{
        display:inline-block;
        width:50px;
        height:50px;
        line-height:50px;
        text-align:center;
        padding:0;
        background-color:var(--secondary-color);
        border-radius:50%;
        position:fixed; right:10px; top:10px; z-index:701;
        transition:.4s ease;
        box-shadow:0 8px 20px rgba(0,0,0,.3);
    }
    .toggle-menu.toggle-menu--active{
        background-color:#fff;
        box-shadow:none;
    }
        .icon-menu{
            display:inline-block;
            width:24px;
            height:24px;
            margin-top:12px;
            position:relative;
            transform:rotate(0deg);
            transition:.4s ease;
            cursor:pointer;
        }
            .icon-menu span{
                display:block;
                position:absolute; left:0;
                height:3px;
                width:100%;
                background-color:#fff;
                border-radius:3px;
                opacity:1;
                transform:rotate(0deg);
                transition:.25s ease-in-out;
            }
            .icon-menu span:nth-child(1){top:15%;}
            .icon-menu span:nth-child(2){top:50%;}
            .icon-menu span:nth-child(3){top:85%;}

        .toggle-menu--active .icon-menu span{
            transition-delay:0s;-webkit-transition-delay:0s;
            background-color:var(--primary-color);
        }
        .toggle-menu--active .icon-menu span:nth-child(1){
            top:48%;
            transform:rotate(-45deg);
        }
        .toggle-menu--active .icon-menu span:nth-child(2){
            opacity:0;
        }
        .toggle-menu--active .icon-menu span:nth-child(3){
            top:48%;
            transform:rotate(45deg);
        }
}

/*-------------------------------------------
Nav
-------------------------------------------*/
.menu-container{
    position:relative; z-index:10;
    background-color:#fff;
    box-shadow:0 0 12px rgba(0,0,0,.1);
}
    .sp-menu{
        display:none;
    }
    .menu{
        list-style:none;
        margin:0 auto;
        padding:0;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        height:60px;
    }
        .menu__item{
            flex:1 0 auto;
            position:relative;
            text-align:center;
        }
            .menu__link{
                display:block;
                position:relative;
                color:#000;
                font-size:1rem; font-weight:700;
                line-height:60px;
                transition:.2s;
            }
            .menu__link:hover,
            .menu__link:focus{
                color:var(--primary-color);
            }
                .menu__link::before{
                    display:block;
                    content:"";
                    border-bottom:3px solid var(--secondary-color);
                    width:40px;
                    position:absolute; left:50%; bottom:0;
                    margin-left:-20px;
                    opacity:0;
                    transition:.2s;
                }
                .menu__link:hover::before{
                    opacity:1;
                }
                .have-sub-menu .menu__link::after{
                    display:inline-block;
                    content:"";
                    width:14px;
                    height:14px;
                    line-height:14px;
                    background-image:url(../images/icon-menu-arrow.svg);
                    background-repeat:no-repeat;
                    background-position:50% 50%;
                    background-size:contain;
                    position:absolute; bottom:5px; left:50%;
                    transform:translateX(-50%);
                }
@media screen and (max-width:992px){
    .menu-container{
        display:block;
        position:fixed; top:0; left:0;
        z-index:0;
        opacity:0;
        width:0%;
        height:100%;
        overflow:visible;
        background-color:var(--secondary-color);
        pointer-events:none;
        transform-origin:left top;
        transform:skewX(-10deg);
        transition:.5s ease;
    }
    .menu-container.menu--active{
        opacity:1;
        z-index:100;
        width:100%;
        pointer-events:auto;
        transform:skewX(0deg);
    }
        .menu-inner{
            position:relative; left:0; top:0;
            width:100%;
            height:100%;
            overflow-x:hidden;
            overflow-y:auto;
            padding:30px 30px 40px;
        }
            /*--- Smart Phone Menu ---*/
            .sp-menu{
                display:flex;
                flex-wrap:wrap;
                list-style:none;
                margin:0;
                padding:0 0 20px;
                box-shadow:0 1px 0 rgb(255,255,255,.2);
                color:#fff;
                opacity:0;
                transition:.3s;
                transition-delay:.5s;
            }
            .menu--active .sp-menu{
                opacity:1;
            }
                .sp-menu__item{
                    vertical-align:top;
                    padding:5px 0;
                    margin-right:40px;
                }
                .sp-menu__item:nth-child(2){
                    order:4;
                    flex-basis:100%;
                    margin-right:0;
                    padding:10px 0 0;
                }
                    .sp-menu__link{
                        display:inline-block;
                        color:#fff;
                    }
                    .sp-menu__link[href*="login"],
                    .sp-menu__link[href*="logout"]{
                        background-color:rgba(255,255,255,.2);
                        border-radius:5px;
                        padding:2px 15px;
                    }
                    .sp-menu__link:hover,
                    .sp-menu__link:focus{
                        color:#fff;
                        opacity:.65;
                    }
                        .sp-menu__member-name{
                            color:#fff;
                            opacity:.7;
                        }
                            .sp-menu__member-name a{
                                display:inline-block;
                                color:#fff;
                                padding-bottom:3px;
                                border-bottom:1px solid rgba(255,255,255,.7);
                            }
            /*--- Main Menu ---*/
            .menu{
                height:auto;
                color:#fff;
                opacity:0;
                padding-top:15px; padding-bottom:15px;
                transition:.3s;
                transition-delay:.5s;
            }
            .menu--active .menu{
                opacity:1;
            }
                .menu__item{
                    flex:1 0 100%;
                    padding-left:160px;
                    min-height:45px;
                    text-align:left;
                }
                    .menu__link{
                        color:#fff;
                        font-size:1.125rem;
                        line-height:1.4;
                        padding:10px 0;
                        position:absolute; left:0;
                    }
                    .menu__link:hover,
                    .menu__link:focus{
                        color:#fff;
                        opacity:.65;
                    }
                        .menu__link::before{
                            display:none;
                        }
                        .have-sub-menu .menu__link::after{
                            width:24px;
                            height:24px;
                            line-height:24px;
                            background-size:auto 24px;
                            position:absolute; top:50%; left:auto; right:0;
                            transform:translateY(-50%);
                            margin-left:5px;
                            opacity:0;
                            transition:.2s;
                        }
                        .have-sub-menu .menu__link.menu__link--active::after{
                            transform:translateY(-50%) rotate(-180deg);
                        }
}
@media screen and (max-width:576px){
    .sp-menu__item{
        display:block;
    }
    .menu__item{
        padding-left:0;
        min-height:auto;
    }
        .menu__link{
            position:relative; left:auto;
        }
            .have-sub-menu .menu__link::after{
                background-image:url(../images/icon-menu-white.svg);
                opacity:1;
                right:0;
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .menu-inner{
        padding:25px 25px 60px;
    }
        .sp-menu{
            font-size:4vw;
        }
            .sp-menu__item{
                margin-right:10vw;
            }
            .sp-menu__item:nth-child(2){
                padding-top:15px;
            }
                .sp-menu__link:focus,
                .sp-menu__link:hover{
                    opacity:1;
                }
                .menu__link{
                    font-size:5vw;
                }
                .menu__link:focus,
                .menu__link:hover{
                    opacity:1;
                }
}

/*-------------------------------------------
Sub Menu
-------------------------------------------*/
.sub-menu{
    list-style:none;
    margin:0;
    padding:0;
    position:absolute; top:60px; left:50%;
    transform:translateX(-50%);
    box-shadow:0 10px 15px rgba(0,0,0,.2);
    opacity:0;
    pointer-events:none;
    transition:.2s;
}
.menu__link:focus + .sub-menu,
.menu__link:hover + .sub-menu,
.sub-menu:focus-within,
.menu__item:hover .sub-menu{
    opacity:1;
    pointer-events:auto;
}
    .sub-menu__item{
        background-color:rgba(255,255,255,.95);
        text-align:left;
    }
        .sub-menu__link{
            display:block;
            box-shadow:inset 0 1px 0 rgb(0,0,0,.1);
            color:#000;
            line-height:1.2;
            white-space:nowrap;
            padding:15px;
            transition:.1s;
        }
        .sub-menu__link:hover,
        .sub-menu__link:focus{
            background-color:#fff;
            color:var(--primary-color);
        }
@media screen and (max-width:1024px){
    .menu .menu__item:first-of-type .sub-menu{
        left:0; right:auto;
        transform:translateX(0);
    }
    .menu .menu__item:last-of-type .sub-menu{
        left:auto; right:0;
        transform:translateX(0);
    }
}
@media screen and (max-width:992px){
    .sub-menu{
        display:block;
        background-color:transparent;
        box-shadow:none;
        opacity:1;
        pointer-events:auto;
        padding-bottom:5px;
        position:static;
        transform:translateX(0%);
        transition:none;
    }
        .sub-menu__item{
            background-color:rgba(0,0,0,.15);
        }
        .sub-menu__link{
            color:#fff;
            white-space:normal;
            padding:12px 15px;
        }
        .sub-menu__link:hover,
        .sub-menu__link:focus{
            background-color:rgba(0,0,0,.3);
            color:#fff;
        }
}
@media screen and (max-width:576px){
    .sub-menu{
        display:none;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .sub-menu__link{
        font-size:4.25vw;
        padding:15px 10px 15px 25px;
    }
}

/*-------------------------------------------
Header Theme
-------------------------------------------*/
.header-theme{
    position:relative;
    height:300px;
    background-color:var(--primary-color);
    background-image:url(../images/theme_pic_page.jpg);
    background-position:right top;
    background-repeat:no-repeat;
    background-size:cover;
}
    .header-theme__inner{
        height:100%;
    }
        /*
        .header-theme__inner::before,
        .header-theme__inner::after{
            content:"";
            display:block;
            position:absolute;
            pointer-events:none;
        }
        .header-theme__inner::before{
            aspect-ratio:1 / 1;
            background-image:url(../images/theme_pic.svg), url(../images/theme_bg_light.png);
            background-position:50% 50%;
            background-repeat:no-repeat;
            background-size:contain;
            height:90%;
            top:50%; right:2%;
            transform:translateY(-50%);
        }
        .header-theme__inner::after{
            background-image:url(../images/theme_dot_top.svg),
                             url(../images/theme_dot_bottom.svg);
            background-position:left 30px top 15px, left 30px bottom 15px;
            background-repeat:no-repeat, no-repeat;
            background-size:auto 8px;
            width:100%;
            height:100%;
            top:0; left:0;
        }
        */
        .header-heading__group{
            position:absolute; top:50%; left:0; right:0; z-index:3;
            transform:translateY(-50%);
            padding:0 30px;
            line-height:1;
            text-shadow:1px 1px 3px rgba(0,0,0,.15), 0 5px 10px rgba(0,0,0,.2);
        }
            .header-theme__heading{
                margin:0;
            }
            .theme-heading{
                color:#fff;
                font-weight:800;
                font-style:italic;
                line-height:1;
            }
                .theme-heading strong{
                    display:block;
                    font-size:1.875rem;
                }
                .theme-heading span{
                    color:var(--theme-text-color);
                    font-size:4rem;
                }
            .header-theme__date{
                display:inline-block;
                border-top:1px solid rgba(255,255,255,.7);
                color:#fff;
                font-size:1.25rem; font-weight:700;
                margin-top:20px;
                padding-top:10px;
            }
            .header-theme__venue{
                color:#fff;
                font-size:1.125rem;
                margin-top:8px;
            }
        .scroll-icon{
            display:none;
        }
@media screen and (max-width:1280px){/* Air Mac */
    .header-theme{
        height:260px;
    }
        .theme-heading strong{
            font-size:1.875rem;
        }
        .theme-heading span{
            font-size:3.75rem;
        }
}
@media screen and (max-width:1024px){
    .theme-heading strong{
        font-size:1.5rem;
    }
    .theme-heading span{
        font-size:3rem;
    }
}
@media screen and (max-width:992px){
    .header-theme__inner{
        overflow:hidden;
    }
        .header-theme__inner::after{
            background-position:left 30px top 15px, left 30px bottom 15px;
        }
        .header-heading__group{
            padding:0 20px;
        }
            .theme-heading span:last-of-type{
                display:block;
            }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .theme-heading span{
        font-size:2.5rem;
    }
    .header-theme__venue{
        font-size:1rem;
    }
}
@media screen and (max-width:576px){
    .header-theme{
        height:240px;
    }
        .theme-heading strong{
            font-size:3.75vw;
        }
        .theme-heading span{
            font-size:5.5vw;
        }
        .header-theme__date{
            font-size:3vw;
        }
        .header-theme__venue{
            font-size:2.25vw;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .header-theme{
        height:200px;
    }
        .header-theme__inner::before{
            height:75%;
            opacity:.8;
        }
        .header-theme__inner::after{
            background-position:left 10px top 10px, left 10px bottom 10px;
            background-size:auto 4px;
        }
        .header-heading__group{
            padding:0 20px;
        }
            .theme-heading strong{
                font-size:3.5vw;
            }
            .theme-heading span{
                font-size:7.5vw;
            }
            .theme-heading{
                padding-right:50px;
            }
            .header-theme__date,
            .header-theme__venue{
                font-size:3.5vw;
                line-height:1.2;
            }
                .header-theme__city{
                    display:block;
                }
}
@media screen and (max-width:320px){/* i5 */
    .header-heading__group{
        padding:0 15px;
    }
}

/*-------------------------------------------
Container
-------------------------------------------*/
#content-container{
    height:auto!important;min-height:460px;height:460px;
    position:relative;
    background-color:#fff;
    /* background-image:url(../images/bg.png); */
    background-position:right bottom;
    background-repeat:no-repeat;
    background-size:380px auto;
    line-height:1.5;
}
    .page-header{
        position:relative; top:-1px;
        background:var(--primary-color);
        background:var(--linear-gradient);
        padding:30px;
        box-shadow:0 -5px 12px rgba(0,0,0,.1);
    }
        .page-header__title{
            margin:0 auto;
            color:#fff;
            font-size:2.25rem;
            font-style:italic;
            line-height:1.2;
            text-align:center;
        }
        .crumbs{
            background-color:#f7f7f7;
        }
            .crumbs ul{
                list-style:none;
                margin:0 auto;
                padding:15px 30px;
                color:#999;
                font-size:.75rem;
                white-space:nowrap;
            }
                .crumbs ul li{
                    display:inline-block;
                    vertical-align:top;
                    position:relative;
                }
                    .crumbs ul li::before{
                        display:inline-block;
                        content:"/";
                        margin-left:-1.2px;
                        padding:0 5px;
                        opacity:.5;
                    }
                    .crumbs ul li:first-child::before{
                        display:none;
                    }
                    .crumbs ul li a{
                        color:#999;
                    }
                    .crumbs ul li a:hover{
                        color:#127dd7;
                    }
        .article-container{
            padding:60px 0 80px;
        }
            .part__title{
                color:var(--part-title-color);
                font-size:1.75rem;
                font-style:italic;
                line-height:1.2;
            }
            :is(.part__title):first-of-type{
                margin-top:0;
            }
            .small__title{
                color:#000;
                font-size:1.35rem;
                line-height:1.2;
                margin-bottom:.7em;
            }
            :is(.small__title):first-of-type{
                margin-top:0;
            }
@media screen and (max-width:1024px){
    .page-header{
        padding:20px;
    }
}
@media screen and (max-width:992px){
    .page-header{
        padding:20px 15px;
    }
}
@media screen and (max-width:576px){
    .page-header__title{
        font-size:2rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .page-header{
        padding:15px;
    }
        .page-header__title{
            font-size:6.5vw; font-weight:700;
            text-align:left;
        }
    .crumbs{
        overflow-x:auto;
        overflow-y:hidden;
    }
        .crumbs ul{
            padding:12px 24px;
        }
    .article-container{
        padding:40px 0 60px;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .page-header{
        padding:15px 10px;
    }
}

/*-------------------------------------------
Search
-------------------------------------------*/
.search__container{
    position:relative;
    padding-bottom:20px;
    margin:0 -10px 20px;
}
    .search__container::before{
        display:block;
        content:"";
        border-bottom:2px solid #ccc;
        position:absolute; left:10px; bottom:0; right:10px;
    }
    .search__container::after{
        clear:both;
        content:"";
        display:block;
    }
    .search__col{
        float:left;
        padding:0 10px 10px;
        position:relative;
    }
        .search__label{
            display:block;
            font-size:.875rem;
            letter-spacing:1.25px;
            min-height:24px;
        }
        .search__buttons{
            padding-top:24px;
        }
@media screen and (max-width:440px){/* i16 Pro Max */
    .search__container select{
        width:100%;
    }
    .search__buttons{
        padding-top:10px;
    }
}

/*-------------------------------------------
Alert Information
-------------------------------------------*/
.alert{
    background:#fffae7; 
    border:1px solid #fad993;
    color:#000;
    text-align:center;
    padding:20px 20px;
    margin:5px 0;
}
    .alert a{color:#09F;}

/*-------------------------------------------
Common
-------------------------------------------*/
.explanation{color:#C60; font-weight:400; font-size:.875rem; padding:3px 0;}
.required{color:#f00 !important; font-weight:normal;}
.paddingNone{padding:0 !important;}
.important{color:#f00 !important;}
.noneData{
    clear:both;
    flex-basis:100%;
    background-color:#fef6de;
    color:#000;
    padding:30px 10px;
    margin-bottom:10px;
    text-align:center;
}
hr{
    display:block;
    border:none; border-top:1px solid #e3e3e3;
    height:1px;
    margin:3em 0;
    padding:0;
}
@media screen and (max-width:576px){
    hr{
        border-top-width:8px;
        margin:2em -15px;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    hr{
        margin-left:-10px; margin-right:-10px;
    }
}

/*-------------------------------------------
Input, Select, Textarea
-------------------------------------------*/
[type=checkbox], [type=radio]{
    width:22px;
    height:22px;
    margin-right:5px;
    vertical-align:-5px;
}
[type=checkbox] + label,
[type=radio] + label{
    padding-right:1em;
}
[type=text], [type=password], [type=email], [type=tel], [type=date], textarea, select{
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    -webkit-appearance:none; appearance:none;
    background-color:#fff;
    border:1px solid #bbb; 
    font-size:16px;
    line-height:1;
    padding:7px 10px; 
    margin:0 3px 3px 0; 
    min-height:38px;
    transition:.1s;
}
select{
    background-image:url(../images/select_arrow.svg);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:24px 24px;
    border-radius:5px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
    padding:9px 22px 9px 5px;
}
select::-ms-expand{
    display:none;
}
textarea{
    resize:vertical;
    line-height:1.5;
    width:100%;
    margin-left:0; margin-right:0;
}
[type=text]:focus, [type=password]:focus, [type=email]:focus, [type=date]:focus,
textarea:focus, select:focus{
    outline:0;
    background-color:#fff;
    border:1px solid #24a5ff !important;
    box-shadow:0 0 0 2px rgba(36,165,255,.4);
}
[style*='width: 100%'],
[style*='width:100%']{
    width:calc(100% - 3px);
    margin-left:0; margin-right:0;
}
input.bir, input.date, input.time{
    padding-left:5px; padding-right:5px;
    width:120px;
}
[name="input_code"]{
    width:150px;
}
.validate{
    display:inline-block;
    background:url(../images/code_mask.png);
    font-size:1.5rem;
    font-style:italic;
    line-height:38px;
    min-height:38px;
    padding:0 10px;
    vertical-align:-3px;
}

/*-------------------------------------------
Buttons
-------------------------------------------*/
[type=submit], [type=button], [type=reset], .btn, .field-file{
    display:inline-block;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    -webkit-appearance:none; appearance:none;
    vertical-align:top; text-align:center;
    text-decoration:none;
    border:1px solid transparent;
    background-color:var(--primary-color);
    box-shadow:0 3px 8px rgba(0,0,0,.15);
    border-radius:5px;
    color:#fff;
    cursor:pointer; 
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    line-height:1;
    min-height:38px;
    padding:8px 15px;
    transition:.2s;
    outline:none;
}
input.btn-secondary, .btn.btn-secondary, [type="reset"]{
    color:var(--primary-color);
    background-color:rgba(var(--primary-rgb),.15);
}
[type=submit]:focus, [type=button]:focus, [type=reset]:focus, .btn:focus, .field-file:focus,
[type=submit]:hover, [type=button]:hover, [type=reset]:hover, .btn:hover, .field-file:hover{
    text-decoration:none;
    color:#fff;
    background-color:var(--primary-color);
    border-color:var(--primary-color);
    box-shadow:inset 0 0 0 30px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.2);
}

.buttons{
    text-align:center; 
    padding:30px 0 0; 
    position:relative;
}
    .buttons [type=submit], .buttons [type=button], .buttons [type=reset], .buttons .btn{
        font-size:1.25rem;
        margin-left:10px; margin-right:10px;
        padding:12px 20px; 
    }
@media screen and (max-width:576px){
    .buttons [type=submit], .buttons [type=button], .buttons [type=reset], .buttons .btn{
        margin-left:5px; margin-right:5px;
        padding-left:15px; padding-right:15px;
    }
}

/*-------------------------------------------
Table (list)
-------------------------------------------*/
.table__list{
    background-color:#fff;
    border-collapse:separate;
    border-spacing:0;
    margin:0 auto;
}
    .table__list caption{
        color:var(--primary-color);
        font-size:1.25rem; font-weight:700;
        border:1px solid rgba(var(--primary-rgb),.2);
        border-bottom:2px solid var(--primary-color);
        padding:8px 5px;
        text-align:center;
    }
    .table__list th,
    .table__list td{
        padding:5px;
        position:relative;
    }
    .table__list > thead > tr > th{
        background-color:rgba(var(--primary-rgb),.06);
        border:1px solid rgba(var(--primary-rgb),.4);
        border-right:none;
        border-bottom:2px solid rgba(var(--primary-rgb),.3);
        color:var(--primary-color);
        font-size:.875rem;
        line-height:1.2;
        padding:5px;
    }
    .table__list > thead > tr > th:nth-child(n+2){
        border-left:1px solid rgba(var(--primary-rgb),.2);
    }
    .table__list > thead > tr > th:last-child{
        border-right:1px solid rgba(var(--primary-rgb),.2);
    }
    .table__list > tbody > tr > th{
        color:#000;
        font-size:.875rem;
        border-left:1px solid rgba(var(--primary-rgb),.2);
        border-top:none;
        border-bottom:1px solid rgba(var(--primary-rgb),.2);
        background-color:#f7f7f7; 
        text-align:left;
        padding:10px 5px;
    }
    .table__list > tbody > tr > td{
        border:1px solid #ccc; border-top:none; border-right:none;
        font-size:.875rem;
        line-height:1.2;
        position:relative;
        padding:10px 5px;
        word-break:keep-all;
        /* word-break:break-all; */
    }
    .table__list > tbody > tr > td:nth-child(n+2){
        border-left:1px solid rgba(0,0,0,.1);
    }
    .table__list > tbody > tr > td:last-child{
        border-right:1px solid #ccc;
    }
        .table__list [type=checkbox],
        .table__list [type=radio]{
            margin-top:-0.125rem;
        }

/*-------------------------------------------
Table (content)
-------------------------------------------*/
.table__content{
    background-color:#fff;
    border-collapse:collapse;
    margin:0 auto;
}
    .table__content caption{
        text-align:left;
        font-size:1.25rem; font-weight:700;
        color:var(--primary-color);
        border:1px solid rgba(var(--primary-rgb),.2);
        border-bottom:2px solid var(--primary-color);
        padding:8px 5px;
        text-align:center;
    }
    .table__content th,
    .table__content td{
        padding:5px;
        position:relative;
    }
    .table__content > tbody > tr > th{
        background-color:rgba(var(--primary-rgb),.06);
        border:1px solid rgba(var(--primary-rgb),.4);
        border-right:none;
        font-size:.875rem;
        color:var(--primary-color);
        text-align:left;
    }
    .table__content > tbody > tr > td{
        border:1px solid #ccc;
        height:40px;
        position:relative;
        word-break:keep-all;
        /* word-break: break-all; */
    }
    .table__content > tbody > tr > td:nth-child(n+2){
        border-left:none;
    }
        .table__content [type=checkbox],
        .table__content [type=radio]{
            
        }
@media screen and (max-width:576px){
    .table__content{
        border-bottom:1px solid rgba(var(--primary-rgb),.2);
    }
    .table__content tr,
    .table__content > tbody > tr > th,
    .table__content > tbody > tr > td{
        display:block;
        width:100%;
        text-align:left;
        height:auto;
    }
    .table__content > tbody > tr > th{
        border-right:1px solid rgba(var(--primary-rgb),.2);
        border-bottom:none;
    }
    .table__content > tbody > tr > td{
        border-top:none;
        border-bottom:none;
        min-height:32px;
        padding-bottom:.75em;
    }
    .table__content > tbody > tr > td:nth-child(n+2){
       border-left:1px solid #ccc;
    }
        .table__content .explanation{
            display:block;
            margin-top:5px;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .table__content th,
    .table__content td{
        padding:3px 8px;
    }
}

/*-------------------------------------------
Page 分頁
-------------------------------------------*/
.page{
    font-size:13px; 
    margin:15px auto;
    text-align:center; 
    clear:both;
}
    .page span a, .page span a:hover, .page .current, .page .disabled{
        display:inline-block;
        vertical-align:top;
        padding:3px 3px;
        margin:2px 0;
        border-radius:5px;
    }
    .page a{
        color:#333; 
        background-color:#fff;
        border:1px solid #ccc;
        text-decoration:none;
    }
    .page a:hover{
        color:#fff;
        background:#008735;
        border:1px solid #008735;
    }
    .page .current{
        color:#111;
        background:none;
        border:1px solid transparent;
        font-weight:bold;
    }
    .page .disabled{
        color:#ddd;
        border:1px solid #ddd;
    }
    .page .pageTo{
        padding:3px 3px;
        margin:2px;
        width:50px;
    }

/*-------------------------------------------
Organized by
-------------------------------------------*/
.organized-by-container{
    padding:50px 0;
    background-color:#f5f5f5;
}
.menu-container .organized-by-container{
    display:none;
}
    .organized-by-inner{
        position:relative;
        display:flex;
        text-align:center;
    }
        .organized-by,
        .co-organized-by,
        .supported-by{
            flex:1;
        }
            .organized-by-container .home-title{
                margin:0 0 20px 0;
                color:#111;
                font-size:1.5rem;
                white-space:nowrap;
            }
                .organized__link{
                    display:inline-block;
                    vertical-align:top;
                    width:70px;
                    height:70px;
                    transition:.2s;
                }
                .organized__link:nth-of-type(n+2){
                    margin-left:20px;
                }
                .organized__link:hover{
                    opacity:.65;
                }
                    .organized__link img{
                        width:100%;
                    }
@media screen and (max-width:992px){
    .menu-container .organized-by-container{
        display:block;
        box-shadow:0 -1px 0 rgb(255,255,255,.2);
        background-color:transparent;
        opacity:0;
        padding:30px 0 0;
        transition:.3s;
        transition-delay:.5s;
        white-space:nowrap;
    }
    .menu--active .organized-by-container{
        opacity:1;
    }
        .menu-container .organized-by-container .wrapper{
            padding:0;
        }
            .organized-by-container .organized-by-inner{
                text-align:left;
            }
                .menu-container .organized-by[data-aos],
                .menu-container .co-organized-by[data-aos],
                .menu-container .supported-by[data-aos]{
                    opacity:1 !important;
                    transform:initial !important;
                }
                    .menu-container .organized-by-container .home-title{
                        display:block;
                        margin:0 0 10px;
                        color:#fff;
                        font-size:.875rem; font-weight:400;
                        opacity:.8;
                        text-align:left;
                    }
                        .organized__link:nth-of-type(n+2){
                            margin-left:15px;
                        }
}
@media screen and (max-width:576px){
    .organized-by-container{
        padding:50px 0;
    }
        .organized-by-inner{
            flex-wrap:wrap;
        }
            .supported-by{
                flex-basis:100%;
                margin-top:20px;
            }
            .menu-container .co-organized-by{
                
            }
            .menu-container .supported-by{
                flex:1;
                margin-top:0;
            }
                .organized-by-container .home-title{
                    margin:0 0 15px;
                }
                .menu-container .organized-by-container .home-title{
                    font-size:.875rem;
                }
                .menu-container .organized__link{
                    width:50px;
                    height:50px;
                }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .organized-by-inner{
        text-align:center;
    }
    .organized-by,
    .co-organized-by{
        flex-basis:50%;
    }
    .supported-by{
        margin-top:25px;
    }
    .menu-container .supported-by{
        margin-top:25px;
    }
        .organized-by-container .home-title{
            font-size:4.25vw;
            margin-bottom:10px;
        }
        .organized__link{
            width:60px;
            height:60px;
        }
        .organized__link:nth-of-type(n+2){
            margin-left:8px;
        }
}
@media screen and (max-width:320px){/* i5, SE */
    .organized__link{
        width:50px;
        height:50px;
    }
}

/*-------------------------------------------
Banners
-------------------------------------------*/
#banners{
    background-color:#fff;
    padding:35px 0;
    display:none;
}
    #banners ul{
        list-style:none; margin:0; padding:0;
    }
        #banners ul li{
            float:left;
            width:20%;
            position:relative;
            text-align:center;
            padding:10px 0;
            transition:.3s;
        }
            #banners ul li a{
                display:inline-block;
                width:170px;
            }
                #banners ul li img{
                    max-width:100%;
                    transition:.2s;
                }
                #banners ul li a:hover img{
                    opacity:.65;
                }
@media screen and (max-width:992px){
    #banners ul li{
        width:25%;
        padding:10px 0;
    }
        #banners ul li a{
            width:170px;
        }
}
@media screen and (max-width:736px){/* i6+, i7+, i8+ Landscape */
    #banners ul li a{
        width:150px;
    }
}
@media screen and (max-width:667px){/* i6, i7, i8, iX Landscape */
    #banners ul li a{
        width:130px;
    }
}
@media screen and (max-width:640px){/* Xiaomi 2S Landscape */
    #banners ul li{
        width:33.33333%;
    }
        #banners ul li a{
            width:170px;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    #banners ul li{
        width:50%;
    }
}
@media screen and (max-width:375px){/* i6, i7, i8, iX */
    #banners ul li a{
        width:150px;
    }
}
@media screen and (max-width:320px){/* i5 */
    #banners ul li a{
        width:130px;
    }
}

/*-------------------------------------------
Footer
-------------------------------------------*/
footer{
    position:relative;
    margin:0 auto;
    color:#fff;
    font-size:.875rem; line-height:1.5;
    text-align:center;
    padding:20px 15px;
}
    footer .copyright{
        
    }
    footer .recommend{
        font-size:.75rem;
        opacity:.5;
    }
    footer .huaweb a{
        color:#fff;
        font-size:.75rem;
        opacity:.2;
    }
    footer .huaweb a:hover{
        opacity:.7;
    }
.scrollTop{
    display:inline-block;
    aspect-ratio:1 / 1;
    background-color:var(--primary-color);
    background-image:url(../images/icon-scroll-up-white.svg);
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:70% auto;
    border-radius:50%;
    box-shadow:0 3px 8px rgba(0, 0, 0, .15);
    overflow:hidden;
    width:50px;
    text-indent:-99999em;
    position:fixed; right:3%; bottom:25px; z-index:20;
    transition:.3s;
    opacity:0;
    pointer-events:none;
}
.scrollTop.active{
    opacity:1;
    pointer-events:auto;
}
@media screen and (max-width:992px){
    footer .recommend{
        display:none;
    }
    .scrollTop{
        width:40px;
        right:10px; bottom:calc(20px + env(safe-area-inset-bottom));
    }
}

/*-------------------------------------------
JQuery UI
-------------------------------------------*/
.ui-datepicker-trigger{
    cursor:pointer;
    vertical-align:-5px;
}
.ui-datepicker{
    box-shadow:0 5px 12px rgba(0,0,0,.2);
}
.ui-datepicker .ui-datepicker-prev-hover{
    top:2px !important; left:2px !important;
}
.ui-datepicker .ui-datepicker-next-hover{
    top:2px !important; right:2px !important;
}
.ui-datepicker .ui-datepicker-title select{
    font-size:1rem;
    margin:0 1px !important;
    min-height:auto;
    padding:4px 5px;
}
.ui-datepicker th{
    padding:.7em .2em !important;
    font-size:.75rem !important;
}