@charset "UTF-8";
/*! 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:#21303d;
    --footer-bgcolor:#f5f5f5;
    --text-color:#21303d;
    --link-color:#2893ed;
    --hover-color:#2569e5;
    --red:#de1818;
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:85px;
}
body{
    margin:0;
    color:var(--text-color);
    font-size:16px; font-weight:500;
    line-height:1.5;
    font-family:'Roboto', 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', "Helvetica Neue", "Helvetica", Arial, sans-serif;
    text-shadow:0 .5px .3px rgba(0,0,0,.05);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    image-rendering:-webkit-optimize-contrast;
    -webkit-text-size-adjust:100%;
    position:relative;
    padding-top:env(safe-area-inset-top);
    /* padding-bottom:env(safe-area-inset-bottom); */
    min-width:320px;
    overflow-x:hidden;
    background-color:var(--footer-bgcolor);
}
body.toggleMenu--active{
    overflow:hidden;
}
@media screen and (max-width:576px){
    body{
        letter-spacing:0;
    }
}
@media screen and (max-width:360px){/* Xiaomi */
    body{
        font-size:15px;
    }
}

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

hr{
    display:block;
    height:1px;
    border:0; border-top:1px solid #ccc;
    margin:2.5em 0;
    padding:0;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    hr{
        border-top:1px solid rgba(0,0,0,.1);
        border-top-width:8px;
        margin:1.5em -15px;
    }
}

a{
    color:var(--link-color);
    transition:.2s;
    text-decoration:none;
    word-break:break-word;
}
a:hover, a:active, a:focus{
    color:var(--hover-color);
}
/* a:focus{outline:2px dashed DodgerBlue;} */
/* a[href="#"]{pointer-events:none;} */


/*-------------------------------------------
Wrapper
-------------------------------------------*/
.wrapper{
    width:1460px; min-width:1460px;
    padding:0 40px;
    height:100%; 
    margin:0 auto;
    position:relative;
    /* box-shadow:inset 0 0 1px rgba(0,0,0,.9); */
}
@media screen and (max-width:1460px){
    .wrapper{
        width:100%; min-width:100%;
    }
}
@media screen and (max-width:1280px){
    .wrapper{
        padding:0 30px;
    }
}
@media screen and (max-width:992px){
    .wrapper{
        padding:0 20px;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .wrapper{
        padding:0 15px;
    }
}

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

/*-------------------------------------------
Header
-------------------------------------------*/
.header{
    background-color:#fff;
    position:absolute; top:0; left:0; right:0; z-index:10;
    height:125px;
    padding:0 40px;
    transition:.2s;
    box-shadow:0 0 20px rgba(0,0,0,.1);
}
    .header__content{
        position:relative;
    }
        .heading__title{
            margin:0;
            display:inline-block;
            position:relative; top:15px; left:0; z-index:99;
            line-height:1;
            transition:.2s;
        }
            .heading__link{
                display:block;
                position:relative;
            }
                .heading__link::before{
                    content:"";
                    display:inline-block;
                    width:200px;
                    height:93px;
                    background:url(../images/heading_logo.png) no-repeat 0 50%;
                    background-size:contain;
                }
                .heading__en,
                .heading__text{
                    position:absolute; z-index:-1;
                    opacity:0;
                    width:0;
                    overflow:hidden;
                }
                .heading__link::after{
                    content:"";
                    display:inline-block;
                    width:590px;
                    height:100%;
                    background:url(../images/heading_title.svg?v=20250922) no-repeat 0 50%;
                    background-size:100% auto;
                    position:absolute;
                    margin-left:10px;
                }
@media screen and (max-width:1280px){
    .header{
        height:100px;
        padding:0 30px;
    }
        .heading__title{
            top:12px;
        }
            .heading__link::before{
                width:160px;
                height:75px;
            }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .header{
        height:80px;
        padding:0 20px;
    }
        .heading__title{
            top:10px;
        }
            .heading__link::before{
                width:130px;
                height:60px;
            }
            .heading__link::after{
                width:490px;
            }
}
@media screen and (max-width:1024px){
    .header{
        height:70px;
        padding:0 20px;
    }
        .heading__link::before{
            width:112px;
            height:52px;
        }
        .heading__link::after{
            width:440px;
        }
}
@media screen and (max-width:992px){
    .header{
        height:60px;
        padding:0 15px;
    }
        .heading__title{
            top:5px;
        }
            .heading__link::before{
                width:103px;
                height:48px;
            }
            .heading__link::after{
                width:420px;
            }
}
@media screen and (max-width:576px){
    .header{
        height:auto;
        padding:10px 15px;
        position:static;
    }
        .heading__title{
            display:block;
            position:static;
            transform:initial;
        }
            .heading__link::before{
                display:block;
                margin:0 auto;
            }
            .heading__link::after{
                display:block;
                background-position:50% 100%;
                width:98%;
                height:0;
                padding-bottom:8%;
                position:static;
                margin:5px auto 0;
            }
}

/*-------------------------------------------
Nav
-------------------------------------------*/
.menu__container{
    position:absolute; top:20px; right:0; z-index:9;
    letter-spacing:0;
    line-height:1;
}
    .menu{
        --menu-item-margin:25px;
        list-style:none;
        margin:0 calc(0px - var(--menu-item-margin));
        padding:0;
        display:flex;
        justify-content:center;
    }
        .menu__item{
            position:relative;
            margin:0 var(--menu-item-margin);
            transition:.2s;
        }
            .menu__link{
                display:inline-block;
                color:var(--text-color);
                font-size:1.125rem;
                padding:10px 5px;
                transition:.2s;
                white-space:nowrap;
            }
            .menu__link:hover,
            .menu__link:focus{
                color:var(--hover-color);
            }
                .menu__link::before{
                    content:"";
                    display:block;
                    height:42px;
                    background-position:50% 50%;
                    background-repeat:no-repeat;
                    background-size:contain;
                    margin-bottom:5px;
                }
                .menu__info::before{
                    background-image:url(../images/icons/learn.svg);
                }
                .menu__links::before{
                    background-image:url(../images/icons/links.svg);
                }
                .menu__video::before{
                    background-image:url(../images/icons/video.svg);
                }
                .menu__contact::before{
                    background-image:url(../images/icons/mail.svg);
                }
@media screen and (max-width:1600px){
    .menu{
        --menu-item-margin:20px;
    }
}
@media screen and (max-width:1460px){
    .menu{
        --menu-item-margin:15px;
    }
        .menu__link{
            font-size:1rem;
        }
}
@media screen and (max-width:1366px){
    .menu{
        --menu-item-margin:10px;
    }
}
@media screen and (max-width:1280px){/* Air Mac */
    .menu__container{
        top:5px;
    }
        .menu{
            --menu-item-margin:5px;
        }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .menu__container{
        top:1px;
    }
        .menu__link::before{
            height:34px;
        }
}
@media screen and (max-width:1024px){
    .menu__container{
        top:0px;
    }
        .menu__link{
            height:70px;
            padding-top:6px; padding-bottom:0;
        }
}
@media screen and (max-width:992px){
    .menu__container{
        position:fixed; top:0; bottom:0; left:0; right:0; z-index:-1;
        background-color:#fff;
        height:100%;
        opacity:0;
        overflow-x:hidden;
        overflow-y:scroll;
        pointer-events:none;
        transition:transform 0s 0.3s, opacity 0.3s 0s;
    }
    .toggleMenu--active .menu__container{
        z-index:100;
        opacity:1;
        pointer-events:auto;
    }
        .menu__inner{
            padding:10px 20px 60px;
        }
            .menu__inner::before{
                content:"";
                display:block;
                width:103px;
                height:48px;
                background:url(../images/heading_logo.png) no-repeat 0 50%;
                background-size:contain;
                margin:0 auto;
            }
            .menu{
                --menu-item-margin:0px;
                flex-wrap:wrap;
                padding-top:15px;
            }
                .menu__item{
                    box-shadow:0 -1px 0 rgba(0,0,0,.1);
                    flex:1;
                    flex-basis:100%;
                    padding:15px 0;
                }
                .menu__item:nth-child(n+2){
                }
                    .menu__link{
                        font-size:3vw;
                        height:auto;
                        line-height:42px;
                        padding:5px 0;
                    }
                        .menu__link::before{
                            height:42px;
                            width:42px;
                            float:left;
                            margin-right:10px; margin-top:-2px;
                        }
}
@media screen and (max-width:736px){/* i6, i7, i8 Plus Landscape */
    .menu__item{
        padding:15px 0;
    }
        .menu__link{
            font-size:4vw;
        }
}
@media screen and (max-width:576px){
    .menu__link{
        font-size:1.5rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .menu__link{
        line-height:34px;
    }
        .menu__link::before{
            height:34px;
            width:34px;
            margin-right:8px;
        }
}

/*-------------------------------------------
Sub Menu
-------------------------------------------*/
.submenu{
    list-style:none;
    margin:0;
    padding:0;
    white-space:nowrap;
    background-color:rgba(255,255,255,.9);
    position:absolute; top:95%; left:50%; z-index:-1;
    transform:translateX(-50%);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
    pointer-events:none;
    opacity:0;
    transition:.3s;
}
.menu__item:hover .submenu{
    top:100%; z-index:1;
    pointer-events:auto;
    opacity:1;
}
    .submenu__item{
        position:relative;
    }
    .submenu__item:nth-child(n+2){
        box-shadow:0 -1px 0 rgba(0,0,0,.1);
    }
        .submenu__item a{
            display:block;
            color:var(--text-color);
            padding:20px 15px;
            transition:.2s;
        }
        .submenu__item a:hover{
            background-color:rgba(0,0,0,.1);
        }
@media screen and (max-width:992px){
   .submenu{
        background-color:transparent;
        position:static; z-index:1;
        transform:initial;
        box-shadow:none;
        pointer-events:auto;
        opacity:1;
        padding-left:52px;
        white-space:initial;
    }
    .menu__item:hover .submenu{
        top:auto; z-index:1;
    }
        .submenu__item:nth-child(n+2){
            box-shadow:none;
        }
            .submenu__item::before{
                content:"";
                display:inline-block;
                background-color:#ccc;
                width:10px;
                height:2px;
                position:absolute; top:28px; left:0;
            }
            .submenu__item a{
                display:inline-block;
                font-size:2.125vw;
                padding:20px 10px 20px 20px;
            }
}
@media screen and (max-width:736px){/* i6, i7, i8 Plus Landscape */
    .submenu__item a{
        font-size:3vw;
    }
}
@media screen and (max-width:576px){
    .submenu__item a{
        font-size:1rem;
        padding:15px 0 15px 20px;
    }
        .submenu__item::before{
            top:21px;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .submenu{
        padding-left:24px;
    }
}

/*-------------------------------------------
Menu icon
-------------------------------------------*/
.toggleMenu__btn{
    display:none;
}
@media screen and (max-width:992px){
    .toggleMenu__btn{
        display:block;
        position:fixed; top:auto; bottom:15px; z-index:200;
        right:env(safe-area-inset-right);
        margin-right:20px;
    }
        .toggleMenu__icon{
            width:60px;
            height:60px;
            position:relative; z-index:1;
            white-space:nowrap;
        }
        .toggleMenu--active .toggleMenu__icon{
            transform:scale(.8);
        }
            .toggleMenu__icon i{
                display:block;
                background-color:#238ce7;
                border-radius:15px;
                width:60%;
                height:4px;
                position:absolute; top:28%; left:20%;
                transform-origin:center;
                transform:rotate(0deg);
                transition:.25s ease-in-out;
            }
            .toggleMenu__icon i:nth-of-type(2){
                top:calc(50% - 2px);
            }
            .toggleMenu__icon i:nth-of-type(3){
                top:calc(72% - 4px);
            }
            .toggleMenu--active .toggleMenu__icon i{
                top:50%; left:20%;
                transform:rotate(45deg);
            }
            .toggleMenu--active .toggleMenu__icon i:nth-of-type(2){
                width:0;
                opacity:0;
                transform:rotate(0deg);
            }
            .toggleMenu--active .toggleMenu__icon i:nth-of-type(3){
                transform:rotate(-45deg);
            }
        .toggleMenu__btn::after{
            content:"";
            display:block;
            background-color:rgba(255,255,255,1);
            border-radius:50%;
            box-shadow:0 8px 20px rgba(0,0,0,.2);
            position:absolute; top:0; z-index:0;
            width:100%;
            height:100%;
        }
}
@media screen and (max-width:992px){
    .toggleMenu__btn{
        margin-right:20px;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .toggleMenu__btn{
        margin-right:15px;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .toggleMenu__btn{
        transform:scale(.9);
    }
}

/*-------------------------------------------
Main Container
-------------------------------------------*/
.mainContent{
    min-height:900px;
    padding-top:125px;
    position:relative; z-index:2;
    padding-right:env(safe-area-inset-right);
    padding-left:env(safe-area-inset-left);
    overflow-x:hidden;
}
@media screen and (min-width:1920px){
    .contentWrapper{
        max-width:1920px;
        margin:0 auto;
    }
}
@media screen and (max-width:1280px){
    .mainContent{
        padding-top:100px;
    }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .mainContent{
        padding-top:70px;
    }
}
@media screen and (max-width:992px){
    .mainContent{
        padding-top:60px;
    }
}
@media screen and (max-width:576px){
    .mainContent{
        padding-top:0;
    }
}

/*-------------------------------------------
Common
-------------------------------------------*/
.explanation{
    color:#C60 !important;
    font-size:.875rem; font-weight:400;
    line-height:1.3;
    padding:2px 0;
    letter-spacing:0;
}
    .explanation ul{
        margin-top:0;
        padding-left:1.4em;
    }
.required{
    color:#f00 !important;
    font-weight:400;
    letter-spacing:0;
}
.important{
    color:#f00 !important;
}
.noneData{
    background-color:transparent;
    color:#C60 !important;
    font-size:1rem !important;
    text-align:center !important;
    padding:15px 0 !important;
    width:100%;
}
.homepage__container .noneData{
    background-color:transparent;
}
.file__icon a[href *='.pdf'], .file__icon a[href *='.PDF'],
.file__icon a[href *='.doc'], .file__icon a[href *='.DOC'],
.file__icon a[href *='.xls'], .file__icon a[href *='.XLS'],
.file__icon a[href *='.ppt'], .file__icon a[href *='.PPT'],
.file__icon a[href *='.jpg'], .file__icon a[href *='.JPG'], 
.file__icon a[href *='.jpeg'], .file__icon a[href *='.JPEG'], 
.file__icon a[href *='.png'], .file__icon a[href *='.PNG'],
.file__icon a[href *='.gif'], .file__icon a[href *='.GIF']{
    display:inline-block;
    background-position:5px .2rem;
    background-repeat:no-repeat;
    background-size:20px auto;
    padding-left:30px;
    text-indent:0;
}
.file__icon a[href *='.jpg'], .file__icon a[href *='.JPG'], 
.file__icon a[href *='.jpeg'], .file__icon a[href *='.JPEG'], 
.file__icon a[href *='.png'], .file__icon a[href *='.PNG']{background-image:url(../images/icon_file_img.svg) !important;}
.file__icon a[href *='.gif'], .file__icon a[href *='.GIF']{background-image:url(../images/icon_file_gif.png) !important;}
.file__icon a[href *='.doc'], .file__icon a[href *='.DOC']{background-image:url(../images/icon_file_word.svg) !important;}
.file__icon a[href *='.xls'], .file__icon a[href *='.XLS']{background-image:url(../images/icon_file_excel.svg) !important;}
.file__icon a[href *='.ppt'], .file__icon a[href *='.PPT']{background-image:url(../images/icon_file_powerpoint.svg) !important;}
.file__icon a[href *='.pdf'], .file__icon a[href *='.PDF']{background-image:url(../images/icon_file_pdf.svg) !important;}


/*-------------------------------------------
Grid System
-------------------------------------------*/
.formContainer{
    position:relative;
    width:100%;
    margin:0 auto;
}
    .formRow{
        display:flex;
        flex-wrap:wrap;
        margin-left:-10px; margin-right:-10px;
        position:relative;
    }
    .formContainer > .formRow:first-of-type{
        margin-top:-10px;
    }
        .formCol{
            flex-basis:0;
            flex-grow:1;
            flex:0 0 100%;
            max-width:100%;
            position:relative;
            padding:10px;
            line-height:1.3;
            letter-spacing:0;
        }
            .formCol::after{
                content:"";
                display:block;
                border-bottom:1px solid rgba(0,0,0,.1);
                position:absolute; bottom:0; left:10px; right:10px;
            }
        .formCol__1{
            -ms-flex:0 0 8.333333%; flex:0 0 8.333333%;    max-width:8.333333%;
        }
        .formCol__2{
            -ms-flex:0 0 16.666667%; flex:0 0 16.666667%; max-width:16.666667%;
        }
        .formCol__3{
            -ms-flex:0 0 25%; flex:0 0 25%; max-width:25%;
        }
        .formCol__4{
            -ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%;
        }
        .formCol__5{
            -ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%;
        }
        .formCol__6{
            -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;
        }
        .formCol__7{
            -ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%;
        }
        .formCol__8{
            -ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%;
        }
        .formCol__9{
            -ms-flex:0 0 75%; flex:0 0 75%; max-width:75%;
        }
        .formCol__10{
            -ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%;
        }
        .formCol__11{
            -ms-flex:0 0 91.666667%; flex:0 0 91.666667%; max-width:91.666667%;
        }
        .formCol__12{
            -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;
        }    
        .formCol__auto{
            -ms-flex:0 0 auto; flex:0 0 auto; max-width:none;
        }
            .colLabel{
                display:block;
                color:#111;
                font-size:.875rem; font-weight:700;
                line-height:16px;
                letter-spacing:.035rem;
                margin-bottom:5px;
                text-align:left;
            }
                .colLabel .required{
                    font-size:.75rem;
                    margin-left:3px;
                }
            .form__control{
                display:block;
                width:100%;
            }
@media screen and (max-width:768px){
    .formContainer{
        
    }
        .formCol__1, .formCol__2, .formCol__3, .formCol__4, .formCol__5, .formCol__6{
            -ms-flex:0 0 49.58888%;
            flex:0 0 49.58888%;
            max-width:49.58888%;
        }
        .formCol__7, .formCol__8, .formCol__9, .formCol__10, .formCol__11, .formCol__12{
            -ms-flex:0 0 100%;
            flex:0 0 100%;
            max-width:100%;
        }
}
@media screen and (max-width:576px){
    .formContainer{
        
    }
        .formCol__1, .formCol__2, .formCol__3, .formCol__4, .formCol__5, .formCol__6{
            -ms-flex:0 0 100%;
            flex:0 0 100%;
            max-width:100%;
        }
}

/*-------------------------------------------
Alert Information
-------------------------------------------*/
.alertInfo{
    background:#fffae3; 
    border:1px solid #fde200;
    color:#111;
    text-align:center;
    border-radius:5px;
    padding:20px 10px;
    margin:10px 0;
}
    .alertInfo [type='submit'],
    .alertInfo [type='button'],
    .alertInfo .btn{
        margin:0 3px;
        vertical-align:middle;
    }
    
@media screen and (max-width:440px){/* i16 Pro Max */
    .alertInfo{
        border-radius:0;
        font-size:.875rem;
        padding:15px 8px;
        text-align:left;
    }
}

/*-------------------------------------------
Input, Select, Textarea
-------------------------------------------*/
[type=text], [type=password], [type=email], [type=tel], [type=date],
textarea, select{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color:#f8f8f8;
    border:1px solid #aab7c2; 
    border-radius:0;
    font-size:16px;
    line-height:1;
    min-height:36px;
    max-width:100%;
    margin:0 2px 5px 0; 
    padding:5px 8px;
    transition:.1s;
}
select{
    padding:5px 22px 5px 5px;
    background-image:url(../images/select_arrow.svg);
    background-repeat:no-repeat;
    background-position:right -2px center;
    background-size:auto 26px;
}
select::-ms-expand{
    display:none;
}
textarea{
    resize:vertical;
    line-height:1.5;
    width:100%;
    margin-right:0;
    min-height:auto;
    padding:5px;
}
[type=text]:focus, [type=password]:focus, [type=email]:focus, [type=date]:focus,
textarea:focus, select:focus{
    outline:0;
    background-color:#fff;
    border-color:var(--hover-color);
    box-shadow:0 0 0 3px rgba(36,165,255,.2);
}
input.datepicker,
input.bir,
input.hasDatepicker{
    width:122px !important;
    padding-left:5px; padding-right:5px;
}
input.zipcode{
    width:85px;
}
[type="file"]{
    margin:0 0 5px 0;
}
[type="file"]::file-selector-button {
    border:1px solid #666;
    border-radius:5px;
    font-size:16px; font-weight:700;
    line-height:1;
    min-height:36px;
    padding:9px 1em 9px;
}
[type="file"]::file-selector-button:hover {
    background-color:var(--primary-light-color);
    border-color:var(--primary-color);
    color:var(--hover-color);
}
[style*='width:100%'],
[style*='width: 100%']{
    margin-right:0;
}
/*-------------------------------------------
radio, checkbox
-------------------------------------------*/
[type='radio'],
[type='checkbox']{
    opacity:0;
    position:absolute; z-index:2;
    width:32px; height:32px;
    cursor:pointer;
}
    [type='radio'] + label,
    [type='checkbox'] + label{
        /* line-height:1.3; */
        display:inline-block;
        position:relative;
        padding-top:5px; padding-left:34px;
        margin-bottom:5px;
        min-width:24px;
        min-height:36px;
    }
        [type='radio'] + label::before,
        [type='radio'] + label::after,
        [type='checkbox'] + label::before,
        [type='checkbox'] + label::after{
            content:"";
            display:inline-block;
            width:32px; height:32px;
            background-repeat:no-repeat;
            background-position:50% 50%;
            background-size:cover;
            position:absolute; top:0; left:0;
            pointer-events:none;
            transition:.1s;
        }
        [type='radio'] + label::after,
        [type='checkbox'] + label::after{
            opacity:0;
        }
        [type='radio'] + label::before{
            background-image:url(../images/icon_radio.svg);
        }
        [type='radio']:checked + label::after{
            background-image:url(../images/icon_radio_checked.svg);
            opacity:1;
        }
        [type='checkbox'] + label::before{
            background-image:url(../images/icon_checkbox.svg);
        }
        [type='checkbox']:checked + label::after{
            background-image:url(../images/icon_checkbox_checked.svg);
            opacity:1;
        }
        [type='radio']:disabled + label,
        [type='checkbox']:disabled + label{
            opacity:.4;
        }


/*-------------------------------------------
Buttons
-------------------------------------------*/
[type=submit], [type=button], [type=reset], button, .btn, .field-file{
    display:inline-block;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    vertical-align:top; text-align:center;
    text-decoration:none;
    font-family:inherit;
    color:#000;
    font-size:16px; font-weight:700;
    line-height:1;
    border:none;
    background-color:var(--primary-color);
    background-repeat:no-repeat;
    background-position:1em 50%;
    background-size:24px auto;
    border-radius:5px;
    min-height:36px;
    margin:0 0 5px 0; 
    padding:9px 1em 9px;
    transition:.2s;
    cursor:pointer; 
    outline:none;
}
.btnSecondary, [type="reset"]{
    color:var(--text-color);
    background-color:#fff;
    box-shadow:inset 0 0 0 1px var(--primary-color);
}
[type=submit]:hover, [type=button]:hover, [type=reset]:hover, button:hover, .btn:hover, .field-file:hover,
[type=submit]:focus, [type=button]:focus, [type=reset]:focus, button:focus, .btn:focus, .field-file:focus{
    background-color:var(--primary-light-color);
    box-shadow:inset 0 0 0 1px var(--primary-color);
    color:var(--hover-color);
}
.btnDel, [value*='刪']{
    background-color:#de1818;
    padding-left:10px; padding-right:10px;
}
.btnDel:hover, [value*='刪']:hover{
    box-shadow:inset 0 0 0 1px #de1818;
    color:#de1818;
}
.formContainer + .buttons{
    border-top:1px solid #ddd;
}
.buttons{
    text-align:center; 
    padding:20px 0 0; 
    position:relative;
}
    .buttons [type=submit], .buttons [type=button], .buttons [type=reset], .buttons button, .buttons .btn{
        padding:1em 2.5em; 
        font-size:1.125rem; line-height:1;
        margin-left:10px; margin-right:10px;
    }
@media screen and (max-width:992px){
    [type=submit]:hover, [type=button]:hover, [type=reset]:hover, button:hover, .btn:hover, .field-file:hover,
    [type=submit]:focus, [type=button]:focus, [type=reset]:focus, button:focus, .btn:focus, .field-file:focus{
        opacity:1;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .buttons{
        padding-top:15px;
    }
        .buttons [type=submit], .buttons [type=button], .buttons [type=reset], .buttons button, .buttons .btn{
            font-size:1.125rem;
            margin-top:8px; margin-left:3px; margin-right:3px; margin-bottom:0;
            padding-left:1.5em; padding-right:1.5em;
        }
}

/*-------------------------------------------
Search
-------------------------------------------*/
.search__container{
    background-color:var(--secondary-color);
    display:flex;
    flex-wrap:wrap;
    /* justify-content:space-between; */
    align-items:flex-end;
    position:relative;
    width:100%;
    margin:0 auto 15px;
    padding:15px;
    letter-spacing:0;
    line-height:1.3;
}
    .search__container .formRow{
        align-items:flex-end;
    }
        .search__container .formCol{
            flex:0 0 auto;
            position:relative;
        }
        .search__container .formCol:last-of-type{
            flex:1;
            text-align:right;
        }
        .search__container .formCol:first-of-type{
            text-align:left;
        }
        .search__container .formCol::after{
            display:none;
        }
            .search__container select,
            .search__container input{
                margin:0;
            }
@media screen and (max-width:576px){
    .search__container{
        padding:10px 10px 5px;
        margin-left:calc(0px - var(--article-content-padding));
        margin-right:calc(0px - var(--article-content-padding));
        width:calc(100% + calc(2 * var(--article-content-padding)));
    }
        .search__container form{
            width:100%;
        }
        input.datepicker,
        input.bir,
        input.hasDatepicker{
            width:calc(50% - 38px) !important;
            padding-left:5px; padding-right:5px;
        }
}

/*-------------------------------------------
Table (list)
-------------------------------------------*/
.tableList{
    margin:0 auto;
    border-collapse:collapse;
    border-bottom:1px solid #ddd;
    letter-spacing:0;
}
    .tableList caption{
        text-align:left;
        font-size:1.25rem; font-weight:700;
        padding:5px 0;
    }
    .tableList thead th{
        color:#111;
        font-size:.875rem; font-weight:400;
        line-height:1.2;
        border-bottom:2px solid var(--primary-color);
        padding:5px 8px;
        text-align:left;
        vertical-align:bottom;
    }
    .tableList thead th[align='center']{
        text-align:center;
    }
    .tableList thead th[align='right']{
        text-align:right;
    }
    .tableList tbody tr:nth-child(odd){
        background-color:rgba(0,0,0,.06);
    }
    .tableList tbody tr:nth-child(even){
        
    }
        .tableList thead th .explanation{
            font-size:inherit;
        }
        .tableList tbody td{
            border-left:1px solid rgba(0,0,0,.1);
            position:relative;
            line-height:1.3;
            padding:15px 8px;
        }
        .tableList tbody td:first-child{
            border-left:none;
        }
            table a[href *='.pdf'], table a[href *='.PDF'],
            table a[href *='.doc'], table a[href *='.DOC'],
            table a[href *='.xls'], table a[href *='.XLS'],
            table a[href *='.ppt'], table a[href *='.PPT'],
            table a[href *='.jpg'], table a[href *='.JPG'], 
            table a[href *='.jpeg'], table a[href *='.JPEG'], 
            table a[href *='.png'], table a[href *='.PNG'],
            table a[href *='.gif'], table a[href *='.GIF']{
                background-position:0 1px;
                padding-left:25px;
            }
            
    .tableList tfoot tr{
        background-color:#fdf8ea;
    }
        .tableList tfoot td{
            background-color:#fdf8ea;
            border-top:1px solid #aaa;
            font-size:1.25rem;
            color:#000;
            /* padding-bottom:15px; */
        }
    .tableList .btn{
        background-image:none;
        padding-left:15px; padding-right:15px;
    }
/*--- table ---*/
.table__wrap{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:15px;
}
@media screen and (max-width:992px){
    .table__wrap table{
        min-width:100% !important;
    }
        .tableList thead th{
            padding:5px 5px;
        }
        .table__wrap .tableList thead th{
            white-space:nowrap;
        }
        .tableList tbody td{
            padding:10px 5px;
        }
}
@media screen and (max-width:576px){
    .tableList thead th,
    .table__wrap .tableList thead th{
        font-size:.75rem;
    }
}

/*-------------------------------------------
Table (content)
-------------------------------------------*/
.tableContent{
    margin:0 auto;
    border-collapse:collapse;
    letter-spacing:0;
}
    .tableContent caption{
        text-align:left;
        font-size:1.25rem; font-weight:700;
        padding:5px 0;
    }
    .tableContent th, .tableContent td{
        padding:10px 8px;
    }
    .tableContent tbody th{
        background-color:var(--th-bgcolor);
        border-bottom:1px solid rgba(0,0,0,.1);
        color:#111;
        font-size:.875rem; font-weight:700;
        line-height:1.2;
        padding-left:5px;
        text-align:left;
    }
    .tableContent tbody tr:first-child th{
        
    }
        .tableContent tbody th .explanation{
            font-size:inherit;
        }
    .tableContent tbody td{
        border-bottom:1px solid var(--secondary-color);
        height:36px;
        position:relative;
        word-break:break-all;
    }
    .tableContent tbody tr:first-child td{
        
    }
    .tableContent tbody tr td:first-child{
        border-left:none;
    }
@media screen and (max-width:576px){
    .tableContent{
        
    }
        .tableContent tr{
            display:block;
        }
            .tableContent tbody th{
                border:none;
                padding:0;
                display:block;
                letter-spacing:.035rem;
                margin-bottom:.125rem;
                width:100%;
            }
            .tableContent tbody td{
                display:block;
                border:none;
                border-bottom:1px solid rgba(0,0,0,.1);
                padding:10px 5px;
                height:auto;
                text-align:left;
                width:100%;
            }
                .tableContent .explanation{
                    display:block;
                    margin-top:5px;
                }
}

/*-------------------------------------------
Footer Contact
-------------------------------------------*/
.footer__contact{
    background-color:#fff;
    padding:60px 0;
}
    .footer__contact__title{
        margin:0;
        color:#00aeef;
        font-size:3.75rem; font-weight:400;
        line-height:1;
        text-align:center;
    }
    .footer__info{
        list-style:none;
        margin:30px -15px 0;
        padding:0;
        display:flex;
        justify-content:center;
    }
        .footer__info li{
            padding:5px 15px 0;
        }
            .footer__info a{
                color:var(--text-color);
            }
            .footer__info a:hover{
                color:var(--hover-color);
            }
            .footer__info label{
                display:inline-block;
                vertical-align:-6px;
                background-position:50% 50%;
                background-repeat:no-repeat;
                background-size:contain;
                width:24px;
                height:24px;
                margin-right:3px;
                text-indent:-9999em;
                overflow:hidden;
            }
            .footer__info__address label{
                background-image:url(../images/icons/place.svg);
            }
            .footer__info__tel label{
                background-image:url(../images/icons/tel.svg);
            }
            .footer__info__fax label{
                background-image:url(../images/icons/fax.svg);
            }
            .footer__info__email label{
                background-image:url(../images/icons/mail.svg);
            }
@media screen and (max-width:1600px){
    .footer__contact__title{
        font-size:3.5vw;
    }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .footer__contact__title{
        font-size:4.5vw;
    }
    .footer__info{
        flex-wrap:wrap;
        text-align:center;
    }
        .footer__info__address{
            flex-basis:100%;
        }
}
@media screen and (max-width:576px){
    .footer__contact__title{
        font-size:8vw;
    }
}

/*-------------------------------------------
Footer
-------------------------------------------*/
footer{
    font-size:.75rem; font-weight:400;
    letter-spacing:0;
    padding:25px 0;
    text-align:center;
}
    footer a{
        color:var(--primary-color);
    }
    footer a:hover,
    footer a:focus{
        color:var(--hover-color);
    }
    .footer__recommended{
        margin:3px 0;
        opacity:.6;
    }
    .huaweb{
        opacity:.2;
    }
    .huaweb:hover{
        opacity:1;
    }
@media screen and (max-width:1280px){/* Air Mac */
    .footer__recommended{
        display:none;
    }
}
@media screen and (max-width:576px){
    .footer__copyright .en{
        display:block;
    }
}

/*-------------------------------------------
JQuery UI
-------------------------------------------*/
.ui-widget{
    font-family:inherit;
    box-shadow:0 3px 12px rgba(0,0,0,.2);
}
    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget button{
        font-family:inherit;
        padding:5px;
        min-height:auto;
    }
    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next{
        top:4px !important;
    }
    .ui-datepicker-calendar thead th:first-child,
    .ui-datepicker-calendar thead th:last-child{
        color:#c00;
    }
    .ui-datepicker th{
        padding:.3em;
    }
    img.ui-datepicker-trigger{
        display:inline-block;
        vertical-align:-5px;
        height:24px;
        position:relative; left:2px;
        cursor:pointer;
    }