/*! 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 ---*/

/*===========================================
Default
===========================================*/
:root{
    --primary-color:#3f73d3;
    --primary-rgb:63,115,211;
    --dark-primary-color:#134eab;
    --link-color:#2b81eb;
    --hover-color:#005aff;
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:85px;
}
body{
    margin:0;
    background-color:#f6f6f6;
    color:#333;
    font-size:16px;
    line-height:1.5;
    font-family:'Roboto', '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;
}
body.toggleMenu--active{
    overflow:hidden;
}
*, ::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 rgba(var(--primary-rgb),.3);
    margin:2em 0;
    padding:0;
}
a{
    color:var(--link-color);
    transition:.1s;
    text-decoration:none;
    word-break:break-word;
}
a:hover, a:active, a:focus{
    color:var(--hover-color);
    outline-color:var(--primary-color);
}

/*-------------------------------------------
Wrapper & Grid System
-------------------------------------------*/
.wrapper{
    --wrapper-padding:40px;
    width:100%; max-width:1280px;
    padding:0 var(--wrapper-padding);
    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:-10px; margin-right:-10px;
            position:relative;
        }
            .form__col{
                position:relative;
                padding:10px;
                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{width:auto;}
            .col-flex{flex:1;}
            .form__control{
                display:block;
                width:100%;
            }
            .col-buttons{
                align-self:flex-end;
            }
                label.form__control{
                    color:var(--dark-primary-color);
                    /* font-size:.875rem; */
                    /* font-weight:700; */
                    margin-bottom:3px;
                }
@media screen and (max-width:1280px){/* Air Mac */
    .wrapper{
        --wrapper-padding:30px;
    }
}
@media screen and (max-width:992px){ /* Desktop */
    .wrapper{
        --wrapper-padding:25px;
    }
}
@media screen and (max-width:768px){ /* Tablet  */
    .wrapper{
        --wrapper-padding:20px;
    }
        .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{width:auto;}
        .col-m-flex{flex:1;}
}
@media screen and (max-width:576px){
    .wrapper{
        --wrapper-padding:15px;
    }
        .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{width:auto;}
        .col-s-flex{flex:1;}
            label.form__control{
                font-size:.875rem;
            }
}
@media screen and (max-width:360px){
    .wrapper{
        --wrapper-padding:10px;
    }
}

/*-------------------------------------------
Header
-------------------------------------------*/
.header__container{
    background:rgba(63,115,211,1);
    background:-moz-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
    background:-webkit-gradient(left top, right top, color-stop(0%, rgba(63,115,211,1)), color-stop(50%, rgba(83,141,212,1)), color-stop(100%, rgba(157,207,206,1)));
    background:-webkit-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
    background:-o-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
    background:-ms-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
    background:linear-gradient(to right, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f73d3', endColorstr='#9dcfce', GradientType=1 );
    box-shadow:0 5px 10px rgba(var(--primary-rgb),.1);
    color:#fff;
    height:135px;
    position:relative; z-index:10;
    transition:.2s;
}
    .header__inner{
        height:100%;
        position:relative;
    }
        .heading__title{
            display:block;
            margin:0;
            position:absolute; top:20px; left:0;
            z-index:5;
            width:370px;
            overflow:hidden;
            outline:0;
            transition:.2s;
        }
        .heading__title:focus,
        .heading__title:hover{
            transform:scale(1.02);
        }
            .heading__title::before{
                content:"";
                display:block;
                background-image:url(../images/header_heading_white.svg?v=20230731);
                background-position:0 0;
                background-repeat:no-repeat;
                background-size:contain;
                padding-bottom:25.135%;
            }
            .heading__title-tw{
                margin:0;
                color:var(--primary-color);
                font-size:2rem;
                opacity:0;
                position:absolute; z-index:-10;
            }
            .heading__title-en{
                margin:0;
                color:#777;
                font-size:.875rem;
                opacity:0;
                position:absolute; z-index:-10;
            }
@media screen and (max-width:1024px){
    .header__container{
        height:70px;
    }
        .toggleMenu--active .header__inner header{
            position:fixed; top:0; left:0;
            width:100%;
            height:70px;
            background-color:#fff;
            z-index:200;
        }
            .heading__title{
                top:5px;
                width:240px;
            }
            .toggleMenu--active .heading__title{
                position:fixed; left:var(--wrapper-padding);
                z-index:999;
                transition:0s;
            }
                .toggleMenu--active .heading__title::before{
                    background-image:url(../images/header_heading.svg?v=20230731);
                }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .header__inner{
        height:60px;
    }
        .heading__title{
            width:230px;
            top:6px;
        }
}
@media screen and (max-width:320px){/* i5, SE */
    .heading__title{
        width:220px;
        top:12px;
    }
        .heading__link{
            padding-bottom:16.18%;
        }
}

/*-------------------------------------------
Menu icon
-------------------------------------------*/
.toggleMenu__btn{
    display:none;
}
@media screen and (max-width:1024px){
    .toggleMenu__btn{
        display:flex;
        justify-content:center;
        align-items:center;
        background-color:#fff;
        border-radius:50%;
        box-shadow:0 1px 3px rgba(var(--primary-rgb),.1);
        width:50px;
        height:50px;
        position:fixed; top:11px; z-index:200;
        right:env(safe-area-inset-right);
        margin-right:var(--wrapper-padding);
    }
    .scroll .toggleMenu__btn{
        box-shadow:0 5px 10px rgba(var(--primary-rgb),.2);
    }
    .toggleMenu--active .toggleMenu__btn{
        box-shadow:none;
    }
        .toggleMenu__icon{
            width:34px;
            height:34px;
            position:relative; z-index:1;
            white-space:nowrap;
        }
            .toggleMenu__icon i{
                display:block;
                background-color:var(--primary-color);
                border-radius:10px;
                width:100%;
                height:4px;
                position:absolute; top:15%; left:0;
                transform-origin:center;
                transform:rotate(0deg);
                transition:.25s ease-in-out;
            }
            .toggleMenu__icon i:nth-of-type(2){
                top:calc(50% - 3px);
            }
            .toggleMenu__icon span{
                color:var(--primary-color);
                font-size:12px;
                line-height:1;
                letter-spacing:1px;
                position:absolute; bottom:2%;
            }
            .toggleMenu--active .toggleMenu__icon i{
                width:60%;
                top:30%; left:20%;
                transform:rotate(45deg);
            }
            .toggleMenu--active .toggleMenu__icon i:nth-of-type(2){
                transform:rotate(-45deg);
            }
}
@media screen and (max-width:992px){
    .toggleMenu__btn{
        
    }
}
@media screen and (max-width:768px){
    .toggleMenu__btn{
        
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .toggleMenu__btn{
        /* top:13px; */
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .toggleMenu__btn{
        /* top:14px; */
    }
}

/*-------------------------------------------
Menu Container
-------------------------------------------*/
.menu__container{
    line-height:1;
    /* display:none; */
}
@media screen and (max-width:1024px){
    .menu__container{
        position:fixed; top:0; left:0; right:auto;
        z-index:-1;
        width:100%;
        height:0%;
        overflow-x:hidden;
        overflow-y:scroll;
        opacity:0;
        pointer-events:none;
    }
    .toggleMenu--active .menu__container{
        z-index:100;
        height:100%;
        opacity:1;
        pointer-events:auto;
    }
        .menu__container::before{
            content:"";
            display:block;
            background:rgba(63,115,211,1);
            background:-moz-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
            background:-webkit-gradient(left top, right top, color-stop(0%, rgba(63,115,211,1)), color-stop(50%, rgba(83,141,212,1)), color-stop(100%, rgba(157,207,206,1)));
            background:-webkit-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
            background:-o-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
            background:-ms-linear-gradient(left, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
            background:linear-gradient(to right, rgba(63,115,211,1) 0%, rgba(83,141,212,1) 50%, rgba(157,207,206,1) 100%);
            filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f73d3', endColorstr='#9dcfce', GradientType=1 );           
            position:fixed; top:0; left:0; right:0; z-index:0;
            height:100vh;
            pointer-events:none;
            opacity:0;
            transition:.3s;
        }
        .toggleMenu--active .menu__container::before{
            opacity:1;
        }
        .menu__inner{
            position:relative; z-index:2;
            padding:90px var(--wrapper-padding) 60px;
        }
}

/*-------------------------------------------
Menu Top
-------------------------------------------*/
.menuTop{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    position:absolute; top:18px; right:0;
    z-index:1;
    color:#fff;
    line-height:24px;
}
    .menuTop a{
        color:#fff;
        outline:0;
    }
    .menuTop a:focus,
    .menuTop a:hover{
        color:#000;
    }
    .menuTop__item{
        padding:0 20px;
        border-left:1px solid rgba(255,255,255,.3);
    }
    .menuTop__item:first-child{
        padding-left:0;
        border-left:none;
    }
    .menuTop__item:last-child{
        padding-right:0;
        border-right:none;
    }
    .menuTop__item.homepage{
        display:none;
    }
        .menuTop__item .btn{
            margin:0;
        }
        .menuTop__item .btn-login,
        .menuTop__item .btn-logout{
            display:inline-block;
            background-color:transparent;
            background-repeat:no-repeat;
            background-position:10px 50%;
            background-size:20px auto;
            border-color:#fff;
            padding-left:34px; padding-right:10px;
            vertical-align:baseline;
        }
        .menuTop__item .btn-login{
            background-image:url(../images/icon_login_white.svg);
        }
        .menuTop__item .btn-logout{
            background-image:url(../images/icon_logout_primary_white.svg);
            margin-left:5px;
        }
        .menuTop__time{
            font-size:1rem;
        }
@media screen and (max-width:1024px){
    .menuTop{
        border-bottom:1px solid rgba(255,255,255,.2);
        position:relative; top:auto; right:auto;
        padding-bottom:30px;
    }
        .menuTop__item:last-child{
            position:absolute; right:0;
        }
            .menuTop__time{
                font-size:1rem;
            }
}
@media screen and (max-width:576px){
    .menuTop{
        flex-wrap:wrap;
        padding-bottom:15px;
    }
        .menuTop__item{
            flex:1;
            padding:0;
            text-align:center;
        }
        .menuTop__item:first-child{
            flex-basis:100%;
            width:100%;
            padding-bottom:20px;
            /* order:2; */
        }
        .menuTop__item:nth-child(2){
            border-left:none;
        }
        .menuTop__item:last-child{
            position:static;
        }
        .menuTop__item:nth-child(n+2) a{
            font-size:1.125rem;
            font-weight:700;
        }
        .menuTop__item.homepage{
            display:block;
        }
}

/*-------------------------------------------
Menu
-------------------------------------------*/
.menu{
    background-color:#fff;
    border-radius:30px;
    box-shadow:0 5px 10px rgba(var(--primary-rgb),.1);
    list-style:none;
    margin:0;
    padding:0 10px;
    display:flex;
    justify-content:space-around;
    position:absolute; top:70px; right:0;
    z-index:2;
}
    .menu__item{
        flex:1;
        position:relative;
        padding:0;
    }
        .menu__link{
            display:block;
            color:#111;
            font-size:1.125rem; font-weight:700;
            line-height:1;
            position:relative;
            padding:15px 20px;
            white-space:nowrap;
            text-align:center;
        }
        .menu__link[target="_blank"]{
            padding-right:35px;
        }
        .menu__link:focus,
        .menu__link:hover{
            background-color:var(--primary-light-color);
            outline:none;
        }
            .menu__link[target="_blank"]::after{
                content:"";
                display:inline-block;
                background:url(../images/icon_blank.svg) no-repeat 50% 50%;
                background-size:contain;
                width:16px;
                height:16px;
                margin:1px 0 0 2px;
                position:absolute;
            }
@media screen and (max-width:1280px){/* Air Mac */
    .menu__link{
        padding:15px;
    }
    .menu__link[target="_blank"]{
        padding-right:30px;
    }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .menu__link{
        font-size:1rem;
        padding:15px 10px;
    }
}
@media screen and (max-width:1024px){
    .menu{
        background:none;
        box-shadow:none;
        position:static;
        padding:0;
        flex-direction:column;
        transition:transform 0s 0.3s, opacity 0.3s 0s;
    }
    .toggleMenu--active .menu{
        display:flex;
    }
        .menu__item{
            border-bottom:1px solid rgba(0,0,0,.1);
        }
        .menu__item.have-sub{
            padding-bottom:0;
        }
            .menu__link{
                color:#fff;
                font-size:1.25rem;
                padding:15px 0;
                text-align:left;
            }
            .menu__link[target="_blank"]{
                padding-right:0;
            }
            .have-sub .menu__link{
                pointer-events:none;
            }
            .menu__link:focus,
            .menu__link:hover{
                background-color:transparent;
                color:#fff;
            }
                .have-sub .menu__link::after{
                    content:"";
                    display:inline-block;
                    background-image:url(../images/icon_expand_more_white.svg);
                    background-position:50% 50%;
                    background-repeat:no-repeat;
                    background-size:contain;
                    width:28px;
                    height:28px;
                    position:absolute; right:0; top:50%;
                    transform:translateY(-50%);
                    transition:.2s;
                }
                .have-sub .menu__link.menu__link--active::after{
                    transform:translateY(-50%) rotate(-180deg);
                }
                .menu__link[target="_blank"]::after{
                    background-image:url(../images/icon_blank_white.svg);
                    margin-left:5px;
                }
}
@media screen and (max-width:576px){
    .menu__item,
    .menu__item.have-sub{
        padding:0;
    }
        .menu__link{
            font-size:1.25rem;
            padding:2.5vh 0;
        }
        .have-sub .menu__link{
            pointer-events:auto;
        }
}

/*-------------------------------------------
Sub Menu
-------------------------------------------*/
.subMenu{
    list-style:none;
    margin:0;
    padding:0;
    background-color:rgba(255,255,255,1);
    border-radius:5px;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    min-width:100%;
    overflow:hidden;
    position:absolute; top:110%; left:50%;
    transform:translateX(-50%);
    opacity:0;
    pointer-events:none;
    transition:.3s;
}
.menu__link:focus + .subMenu,
.menu__item:hover .subMenu,
.subMenu:focus-within{
    top:100%;
    opacity:1;
    pointer-events:auto;
}
    .subMenu__item{
        position:relative;
        border-bottom:1px solid rgba(0,0,0,.1);
    }
    .subMenu__item:last-child{
        /* border-bottom:none; */
    }
        .subMenu__link{
            display:block;
            color:#111;
            font-size:1rem;
            line-height:1.2;
            padding:12px 15px;
            position:relative;
            transition:.2s;
            white-space:nowrap;
        }
        .subMenu__link:focus,
        .subMenu__link:hover{
            background-color:var(--primary-light-color);
            outline:none;
        }
        .subMenu__link[href="#"],
        .subMenu__link[href*="javascript"]{
            pointer-events:none;
            opacity:.4;
        }
        .subMenu__link[href*=".doc"]::before, .subMenu__link[href*=".DOC"]::before,
        .subMenu__link[href*=".pdf"]::before, .subMenu__link[href*=".PDF"]::before{
            margin-top:-2px;
        }
@media screen and (max-width:1024px){
    .subMenu{
        display:flex;
        flex-wrap:wrap;
        margin:0;
        background:rgba(0,0,0,.06);
        border:none;
        border-radius:0;
        box-shadow:none;
        opacity:1;
        position:static;
        transform:initial;
        transition:initial;
        pointer-events:auto;
    }
        .subMenu__item{
            border-bottom:none;
            width:33.3333%;
            padding:8px;
        }
            .subMenu__link{
                color:#fff;
                padding:8px 0 6px 24px;
                white-space:normal;
            }
            .subMenu__link:focus,
            .subMenu__link:hover{
                border-radius:5px;
            }
                .subMenu__link::before{
                    content:"";
                    display:inline-block;
                    background:url(../images/icon_expand_more_white.svg) no-repeat 50% 50%;
                    background-size:contain;
                    width:24px;
                    height:24px;
                    position:absolute; top:3px; left:0;
                    transform:rotate(-90deg);
                }
                .subMenu__link[href*=".doc"]::before, .subMenu__link[href*=".DOC"]::before,
                .subMenu__link[href*=".pdf"]::before, .subMenu__link[href*=".PDF"]::before{
                    width:16px;
                    height:16px;
                    transform:rotate(0deg);
                    margin-top:4px;
                }
                .subMenu__link br{
                    display:none;
                }
}
@media screen and (max-width:576px){
    .subMenu{
        display:none;
    }
        .subMenu__item{
            width:100%;
        }
            .subMenu__link{
                padding-top:10px; padding-bottom:8px;
            }
                .subMenu__link::before{
                    top:6px;
                }
}

/*-------------------------------------------
Decoration
-------------------------------------------*/
.decoration{
    position:absolute; top:0; left:0; right:0; bottom:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}
    .decoration .circle{
        display:block;
        background-color:#fff;
        background-repeat:no-repeat;
        background-size:contain;
        border-radius:50%;
        position:absolute; top:0;
        width:135px;
        height:135px;
        --img1-size:320px;
        --img2-size:240px;
        --c1-size:100px;
        --c2-size:336px;
        --c3-size:280px;
        --c4-size:75px;
        --c5-size:40px;
        --c6-size:100px;
        --c7-size:180px;
    }
    .decoration .img1{
        /* background-image:url(../images/home_bg_img1.jpg); */
        top:5px; left:70%; z-index:4;
        width:var(--img1-size);
        height:var(--img1-size);
        filter:blur(4px);
        -webkit-filter:blur(4px);
    }
    .decoration .img2{
        background-color:transparent;
        background-image:url(../images/tda_boy.png);
        border-radius:0;
        top:130px; left:65%; z-index:10;
        width:var(--img2-size);
        height:var(--img2-size);
        animation:ani-circle 5s ease-in-out 0s infinite;
    }
    .webp .decoration .img2{
        background-image:url(../images/tda_boy.webp);
    }
        .decoration .sayHi{
            display:none;
        }
    .decoration .c1{
        background-color:#f0ceda;
        top:220px; left:-3%;
        width:var(--c1-size);
        height:var(--c1-size);
    }
    .decoration .c2{
        background-color:#f7f3dd;
        top:-70px; left:10.93%;
        width:var(--c2-size);
        height:var(--c2-size);
        filter:blur(10px);
        -webkit-filter:blur(10px);
    }
    .decoration .c3{
        background-color:#e5ebf3;
        top:308px; left:35.47%;
        width:var(--c3-size);
        height:var(--c3-size);
        filter:blur(7px);
        -webkit-filter:blur(7px);
    }
    .decoration .c4{
        background-color:#e8f0d6;
        top:145px; left:57%; z-index:5;
        width:var(--c4-size);
        height:var(--c4-size);
        animation:ani-circle 2s ease-in-out 0s infinite;
    }
    .decoration .c5{
        background-color:#faea94;
        top:308px; left:82%;
        width:var(--c5-size);
        height:var(--c5-size);
        animation:ani-circle 3s ease-in-out 0s infinite;
        filter:blur(3px);
        -webkit-filter:blur(3px);
    }
    .decoration .c6{
        background-color:#548cda;
        top:68px; left:84%; z-index:6;
        width:var(--c6-size);
        height:var(--c6-size);
        animation:ani-circle 2.5s ease-in-out 0s infinite;
    }
    .decoration .c7{
        background-color:#f3e1f7;
        top:250px; left:92%;
        width:var(--c7-size);
        height:var(--c7-size);
        filter:blur(7px);
        -webkit-filter:blur(7px);
    }
    @keyframes ani-circle{
        0% { transform:translateY(0); }
        50% { transform:translateY(10px); }
        100% { transform:translateY(0); }
    }
@media screen and (max-width:1280px){/* Air Mac */
    .decoration .c1{left:-5%;}
    .decoration .c3{left:33%;}
    .decoration .c5{left:86%;}
    .decoration .c6{left:89%;}
    .decoration .c7{left:95%;}
}
@media screen and (max-width:1024px){
    .decoration{
        top:-70px;
    }
        .decoration .circle{
            --c2-size:250px;
            --c4-size:60px;
        }
        .decoration .img2{top:135px;}
        .decoration .c1{display:none;}
        .decoration .c2{top:-30px;}
        .decoration .c4{top:155px;}
        .decoration .c5{left:88%;}
        .decoration .c6{top:75px; left:95%;}
        .decoration .c7{display:none;}
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .decoration .circle{
        --img1-size:300px;
        --img2-size:200px;
    }
    .decoration .c5{top:280px;}
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .decoration .circle{
        --img1-size:240px;
        --img2-size:180px;
        --c1-size:75px;
        --c2-size:250px;
        --c5-size:40px;
    }
    .decoration .img1{top:50px; left:70%;}
    .decoration .img2{
        background-image:url(../images/tda_boy_sp.png);
        top:136px; left:67%;
    }
    .webp .decoration .img2{
        background-image:url(../images/tda_boy_sp.webp);
    }
    .decoration .c1{left:-7%;}
    .decoration .c2{top:-50px; left:-6%;}
    .decoration .c3{left:24%;}
    .decoration .c5{top:260px;}
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .decoration .circle{
        --img1-size:170px;
        --img2-size:140px;
        --c1-size:75px;
        --c2-size:250px;
        --c4-size:40px;
        --c5-size:30px;
        --c6-size:40px;
    }
    .decoration .img1{top:85px; left:66%;}
    .decoration .img2{top:148px; left:60%;}
    .decoration .c1{left:-14%;}
    .decoration .c2{left:-32%;}
    .decoration .c3{left:46%;}
    .decoration .c4{top:150px; left:58%;}
    .decoration .c5{top:230px;}
    .decoration .c6{top:117px; left:94%;}
}

/*-------------------------------------------
Content Container
-------------------------------------------*/
.main__container{
    min-height:640px;
    position:relative;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .main__container{
        min-height:540px;
    }
}

/*-------------------------------------------
Page Header (breadcrumbs & pageHeader title)
-------------------------------------------*/
.pageHeader{
    position:relative;
    padding:70px 0;
}
    .breadcrumbs{
        list-style:none;
        margin:0 0 15px;
        padding:0;
        display:inline-flex;
        background-color:rgba(255,255,255,.6);
        border-radius:10px;
        font-size:.75rem;
        line-height:1;
        padding:10px;
    }
        .breadcrumbs > li{
            display:inline-block;
        }
            .breadcrumbs > li:nth-child(n+2)::before{
                display:inline-block;
                content:"/";
                color:#aaa;
                font-style:normal;
                margin:0 8px;
            }
                .breadcrumbs a{
                    color:#777;
                }
                .breadcrumbs a:focus,
                .breadcrumbs a:hover{
                    color:#111;
                }
    .pageHeader__title{
        margin:0;
        color:var(--primary-color);
        font-size:3rem;
        line-height:1;
    }
@media screen and (max-width:992px){
    .pageHeader{
        padding:50px 0;
    }
}
@media screen and (max-width:768px){
    .pageHeader__title{
        font-size:2.5rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .pageHeader{
        padding:40px 0;
    }
        .pageHeader__title{
            font-size:8.5vw;
        }
}

/*-------------------------------------------
Article
-------------------------------------------*/
.articleContainer{
    background-color:#fff;
    min-height:410px;
    padding:70px 0;
}
.articleHeader{
    border-bottom:2px solid var(--primary-color);
    position:relative;
    padding-bottom:30px;
    margin-bottom:40px;
}
    .article__title{
        margin:0;
        color:#000;
        font-size:2.125rem;
        line-height:1.2;
    }
article{
    line-height:1.5;
}
@media screen and (max-width:768px){
    .articleContainer{
        padding-top:50px;
    }
        .article__title{
            font-size:1.75rem;
        }
}
@media screen and (max-width:576px){
    .article__title{
        font-size:2.5rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .articleContainer{
        padding:40px 0 60px;
    }
        .article__title{
            font-size:5.75vw;
        }
}
@media screen and (max-width:820px) and (orientation:portrait){/* iPad Air and Portrait */
    .articleContainer{
        min-height:455px;
    }
}

/*-------------------------------------------
Page Tabs
-------------------------------------------*/
.type__tabs{
    --tabs-padding-top-bottom:15px;
    line-height:1;
    margin:calc(0px - var(--tabs-padding-top-bottom)) 0 20px;
    position:relative;
    text-align:center;
}
    .type__tabs__inner{
        display:inline-flex;
        border-bottom:3px solid #e3e3e3;
        white-space:nowrap;
    }
        .type__tabs a{
            display:block;
            border-bottom:3px solid transparent;
            color:#333;
            padding:var(--tabs-padding-top-bottom) 3em;
            margin-bottom:-3px;
            transition:.2s;
        }
        .type__tabs a:focus,
        .type__tabs a:hover{
            background-color:rgba(var(--primary-rgb),.06);
            border-color:var(--hover-color);
            color:var(--hover-color);
        }
        .type__tabs .is-current a{
            border-color:var(--primary-color);
            cursor:default;
            color:#000;
            font-weight:700;
            pointer-events:none;
        }
@media screen and (max-width:1024px){
    .type__tabs__inner{
        display:flex;
    }
        .tabs__item{
            flex:1;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .type__tabs a{
        padding-left:1em; padding-right:1em;
    }
}

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

/*-------------------------------------------
Common
-------------------------------------------*/
.part__title{
    color:#000;
    font-size:1.875rem;
    line-height:1.2;
    position:relative;
    margin-bottom:.75em;
}
    .part__title > span{
        position:relative; z-index:2;
    }
    .part__title::before,
    .part__title::after{
        content:"";
        display:block;
        border-radius:50%;
        position:absolute; z-index:0;
        pointer-events:none;
    }
    .part__title::before{
        background-color:rgba(var(--primary-rgb),.2);
        width:40px;
        height:40px;
        top:-.5em; left:-.5em;
    }
    .part__title::after{
        background-color:#f7e2e3;
        width:15px;
        height:15px;
        top:-.75em; left:3em;
    }
        .part__title > span::after{
            content:"";
            display:block;
            background-color:#e3f0c7;
            border-radius:50%;
            width:10px;
            height:10px;
            position:absolute; top:.7em; right:-.875em; z-index:0;
            pointer-events:none;
        }
    .part__title .explanation{
        font-weight:400;
    }
.group__title{
    border-bottom:1px solid rgba(var(--primary-rgb),.6);
    color:var(--dark-primary-color);
}
.noneData, .none__data, .none-data{
    color:Chocolate;
    margin-top:15px;
    text-align:center;
}
.explanation{
    color:Chocolate;
    font-size:.875rem;
    line-height:1.2;
    padding:3px 0;
}
.required,
.important{
    color:red;
}
.data__form{
    border:1px solid #ccc;
    border-radius:10px;
    padding:20px 30px;
}
    .data__form label + strong{
        color:#000;
        font-size:1.25rem;
    }
        .data__form label .required{
            font-size:.875rem; font-weight:400;
        }
.col-postal_code::after{
    content:"※ 郵遞區號：前三碼 - 後三碼（請分別輸入）";
    color:Chocolate;
    font-size:.875rem;
    line-height:1.2;
    padding:3px 0;
}
[type="text"].date{
    width:120px;
}
[name*="address"]{
    width:100%;
}
[name*="address"] + .explanation{
    display:none;
}
[style*='width:100%'],
[style*='width: 100%']{
    margin-right:0;
}
[name*="receipt_title"]{
    display:inline-block;
    width:calc(100% - 150px);
}
[name="input_code"]{
    width:8em;
}
#validate_image{
    display:inline-block;
    vertical-align:top;
}
@media screen and (max-width:576px){
    .data__form{
        padding:15px 20px;
    }
        .col-postal_code{
            display:block;
            margin-top:5px;
        }
            .col-postal_code::after{
                display:block;
            }
        [name*="receipt_title"]{
            width:100%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .part__title{
        font-size:6.875vw;
    }
        .part__title::before{
            width:34px;
            height:34px;
            left:-0.35em;
        }
    .data__form{
        padding:10px 10px;
    }
        .data__form label + strong{
            font-size:1.125rem;
        }
}

/*-------------------------------------------
Files Format
-------------------------------------------*/
a[href*=".pdf"]::before, a[href*=".PDF"]::before,
a[href*=".doc"]::before, a[href*=".DOC"]::before,
a[href*=".xls"]::before, a[href*=".XLS"]::before,
a[href*=".ppt"]::before, a[href*=".PPT"]::before,
a[href*=".jpg"]::before, a[href*=".JPG"]::before,
a[href*=".png"]::before, a[href*=".PNG"]::before,
a[href*=".gif"]::before, a[href*=".GIF"]::before,
a[href*=".zip"]::before, a[href*=".ZIP"]::before,
a[href*=".rar"]::before, a[href*=".RAR"]::before{
    content:"";
    display:inline-block;
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:contain;
    width:20px;
    height:20px;
    vertical-align:top;
    margin-right:5px;
}
a[href*=".pdf"]::before, a[href*=".PDF"]::before{
    background-image:url(../images/icon_file_pdf.svg);
}
a[href*=".doc"]::before, a[href*=".DOC"]::before{
    background-image:url(../images/icon_file_word.svg);
}
a[href*=".xls"]::before, a[href*=".XLS"]::before{
    background-image:url(../images/icon_file_excel.svg);
}
a[href*=".ppt"]::before, a[href*=".PPT"]::before{
    background-image:url(../images/icon_file_powerpoint.svg);
}
a[href*=".jpg"]::before, a[href*=".JPG"]::before,
a[href*=".png"]::before, a[href*=".PNG"]::before{
    background-image:url(../images/icon_file_img.svg);
}
a[href*=".gif"]::before, a[href*=".GIF"]::before{
    background-image:url(../images/icon_file_gif.svg);
}
a[href*=".zip"]::before, a[href*=".ZIP"]::before{
    background-image:url(../images/icon_file_zip.svg);
}
a[href*=".rar"]::before, a[href*=".RAR"]::before{
    background-image:url(../images/icon_file_rar.svg);
}

/*-------------------------------------------
Radio, Checkbox
-------------------------------------------*/
[type=checkbox],
[type=radio]{
    width:22px;
    height:22px;
    vertical-align:text-bottom;
    margin-right:5px; margin-top:2px;
    display:none;
}
[type=checkbox] + label,
[type=radio] + label{
    position:relative;
    padding-left:30px; padding-right:1em;
}
    [type=checkbox] + label::before,
    [type=radio] + label::before{
        content:"";
        display:inline-block;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:contain;
        width:28px;
        height:28px;
        position:absolute; top:-4px; left:0;
    }
    td [type=checkbox] + label::before,
    td [type=radio] + label::before{
        top:-6px;
    }
    [type=checkbox] + label::before{
        background-image:url(../images/icon_checkbox.svg);
    }
    [type=checkbox]:checked + label::before{
        background-image:url(../images/icon_checkbox_checked.svg);
    }
    [type=radio] + label::before{
        background-image:url(../images/icon_radio.svg);
    }
    [type=radio]:checked + label::before{
        background-image:url(../images/icon_radio_checked.svg);
    }
.items__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
}
    .items__list > li{
        margin:5px 0;
        padding-right:1em;
    }
@media screen and (max-width:576px){
    .items__list > li{
        width:100%;
        padding-right:0;
    }
        .items__list > li [type=checkbox] + label,
        .items__list > li [type=radio] + label{
            padding-right:0;
        }
}
/*-------------------------------------------
Input, Textarea, Select
-------------------------------------------*/
[type="text"], [type="password"], [type="email"], textarea, select{
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    -webkit-appearance:none; appearance:none;
    background-color:#f8f8f8;
    border:1px solid #ccc; 
    border-radius:3px;
    font-size:16px;
    line-height:1;
    height:34px;
    padding:5px 6px;
    margin-bottom:3px;
}
textarea{
    resize:vertical;
    width:100%;
    height:auto;
    min-height:35px;
    margin-left:0; margin-right:0;
    padding:8px 6px;
}
select{
    padding:6px 22px 5px 5px;
    background-image:url(../images/select_arrow.svg);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:24px auto;
    vertical-align:top;
}
select::-ms-expand{
    display:none;
}
[type="text"]:focus, [type="password"]:focus, [type="email"]:focus, textarea:focus, select:focus,
[type="text"]:hover, [type="password"]:hover, [type="email"]:hover, textarea:hover, select:hover{
    outline:0;
    background-color:#fff;
    border:1px solid #24a5ff;
    box-shadow:0 0 6px rgba(36,165,255,.5), inset 0 1px 2px rgba(0,0,0,.1);
}
[type="file"]{
    margin:5px 0;
}
:disabled{
    background-color:rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.2); 
    opacity:.6;
    pointer-events:none;
}
/*-------------------------------------------
Button
-------------------------------------------*/
[type="button"], [type="submit"], [type="reset"], button, .btn{
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    -webkit-appearance:none; appearance:none;
    display:inline-block;
    background-repeat:no-repeat;
    background-position:0 50%;
    background-color:var(--primary-color);
    border:1px solid transparent;
    border-radius:8px;
    box-shadow:0 5px 10px rgba(var(--primary-rgb),.2);
    cursor:pointer;
    color:#fff;
    font-size:16px; font-weight:700;
    line-height:1;
    min-height:34px;
    margin-bottom:3px;
    padding:8px 8px;
    vertical-align:top; text-align:center;
    position:relative;
    transition:.2s;
}
[type="button"]:focus, [type="submit"]:focus, [type="reset"]:focus, button:focus, .btn:focus,
[type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover, button:hover, .btn:hover{
    background-color:var(--hover-color);
    border-color:var(--hover-color);
    box-shadow:0 2px 5px rgba(var(--primary-rgb),.6);
    color:#fff !important;
    outline:none;
}
.btn-secondary, [type="reset"]{
    background-color:#fff;
    border-color:rgba(var(--primary-rgb),.4);
    color:var(--primary-color);
}
.btn-secondary:focus, [type="reset"]:focus,
.btn-secondary:hover, [type="reset"]:hover{
    color:var(--primary-color);
}
[value*="刷卡"]{
    background-image:url(../images/icon_card_white.svg);
    background-size:28px auto;
    background-position:calc(50% - 2.125em) 50%;
    padding-left:2.25em !important;
    padding-right:0.5em !important;
}
[value*="超商繳款單"]{
    background-image:url(../images/icon_barcode_white.svg);
    background-size:24px auto;
    background-position:calc(50% - 2.5em) 50%;
    padding-left:2em !important;
    padding-right:0.5em !important;
}
.buttons{
    text-align:center; 
    margin:20px 0 0;
    padding-bottom:12px;
    position:relative;
}
    .buttons [type="button"], .buttons [type="submit"], .buttons [type="reset"], .buttons button, .buttons .btn{
        padding:.75em 2.5em;
        font-size:1.25rem; font-weight:700;
        margin-left:10px; margin-right:10px; margin-bottom:8px;
    }
@media screen and (max-width:576px){
    [value*="申請資料"]{
        font-size:1.125rem !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
    .buttons{
        margin-left:-10px; margin-right:-10px;
    }
        .buttons [type="button"], .buttons [type="submit"], .buttons [type="reset"], .buttons button, .buttons .btn{
            padding:.75em 1.5em;
            margin-left:5px; margin-right:5px;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .buttons [type="button"], .buttons [type="submit"], .buttons [type="reset"], .buttons button, .buttons .btn{
        padding:.75em 1.25em;
        margin-left:3px; margin-right:3px;
    }
}
@media screen and (max-width:360px){/* i12 Mini, Xiaomi 2S */
    [value*="申請資料"]{
        font-size:1rem !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }
}

/*-------------------------------------------
Search
-------------------------------------------*/
.search__container{
    background-color:rgba(var(--primary-rgb),.07);
    border-radius:10px;
    padding:15px;
}

/*-------------------------------------------
Alert Information
-------------------------------------------*/
.alertInfo{
    background-color:#fffce2; 
    border:2px solid #ffd74e;
    border-radius:10px;
    color:#000;
    font-size:1.125rem;
    line-height:1.3;
    padding:20px;
    margin:10px 0 15px;
    text-align:center;
}
    .alertInfo a{
        color:var(--link-color);
    }
    .alertInfo ul,
    .alertInfo ol{
        padding-left:1.4em;
        text-align:left;
    }
    .alertInfo > h1:first-of-type,
    .alertInfo > h2:first-of-type,
    .alertInfo > h3:first-of-type{
        margin-top:0;
    }
@media screen and (max-width:768px){
    .alertInfo{
        font-size:1rem;
        padding:20px;
        margin:5px 0 10px;
    }
}
@media screen and (max-width:576px){
    .alertInfo{
        padding:15px;
    }
}

/*-------------------------------------------
CKEeditor
-------------------------------------------*/
.ckeditor__content img{
    max-width:100%;
    height:auto !important;
}
.ckeditor__content h1:first-of-type,
.ckeditor__content h2:first-of-type,
.ckeditor__content h3:first-of-type,
.ckeditor__content h4:first-of-type,
.ckeditor__content h5:first-of-type,
.ckeditor__content p:first-of-type{
    margin-top:0;
}

/*-------------------------------------------
Table(list)
-------------------------------------------*/
table th,
table td{
    line-height:1.2;
    padding:8px;
}
.table__list{
    border-collapse:collapse;
}
.form__col .table__list{
    border:1px solid #ccc;
}
    .table__list thead th{
        background-color:rgba(var(--primary-rgb),.06);
        border-bottom:2px solid rgba(var(--primary-rgb),.4);
        border-right:1px solid rgba(0,0,0,.06);
        color:var(--dark-primary-color);
        line-height:1;
    }
    .table__list thead th:last-child{
        border-right:none;
    }
    .table__list tbody td{
        border-bottom:1px solid rgba(0,0,0,.15);
        border-right:1px solid rgba(0,0,0,.06);
    }
    .table__list tbody td:last-child{
        border-right:none;
    }
    .table__list tbody tr:nth-child(even){
        background-color:rgba(0,0,0,.03);
    }
    .table__list tbody td.noneData{
        width:100% !important;
        padding:8px 0 !important;
        position:static !important;
        text-align:center !important;
    }
@media screen and (max-width:768px){
    table th,
    table td{
        padding:5px;
    }
    .table__list thead th{
        font-size:.875rem;
    }
}

/*-------------------------------------------
Table(content)
-------------------------------------------*/
.table__content{
    border-collapse:collapse;
}
.form__col .table__content{
    border:1px solid #ccc;
}
    .table__content tbody th{
        background-color:rgba(var(--primary-rgb),.06);
        border-bottom:1px solid rgba(var(--primary-rgb),.4);
        color:var(--dark-primary-color);
        font-weight:400;
        line-height:1;
    }
    .table__content tbody th:last-child{
        border-right:none;
    }
    .table__content tbody td{
        border-bottom:1px solid rgba(0,0,0,.15);
        font-weight:700;
    }
    .table__content tbody td:last-child{
        border-right:none;
    }
@media screen and (max-width:768px){
    .table__content thead th{
        font-size:.875rem;
    }
}

/*-------------------------------------------
Page
-------------------------------------------*/
.page{
    padding-top:20px;
    text-align:center;
}
    .page span{
        display:inline-block;
        line-height:34px;
        min-width:34px;
    }
    .page span.current{
        font-weight:700;
    }
        .page span a{
            display:block;
            border:1px solid rgba(var(--primary-rgb),.4);
            border-radius:5px;
            margin-bottom:3px;
            padding:0 10px;
        }
        .page span a:focus,
        .page span a:hover{
            outline:none;
            color:#fff;
            background-color:var(--hover-color);
        }
        .page .pageTo{
            
        }

/*-------------------------------------------
URL
-------------------------------------------*/
.url{
    background-color:#edf9ff;
    box-shadow:inset 0 1px 0 rgba(0,0,0,.1);
    color:#111;
    min-height:48px;
    margin-top:-1px;
    padding:15px 10px;
}
    .url label{
        color:var(--dark-primary-color);
    }
    .url a{
        display:inline-block;
        line-height:22px;
    }
@media screen and (max-width:992px){
    .url label{
        display:block;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .url{
        font-size:.875rem;
    }
        .url label{
            display:block;
            font-size:.875rem;
        }
}

/*-------------------------------------------
Data Source, Job Title
-------------------------------------------*/
.dataSource,
.JobTitle{
    background-color:rgba(var(--primary-rgb),.06);
    box-shadow:inset 0 1px 0 rgba(0,0,0,.1);
    color:#111;
    line-height:1.15;
    min-height:42px;
    margin-top:-1px;
    padding:12px 10px;
}
    .dataSource a,
    .JobTitle a{
        display:inline-block;
        line-height:22px;
    }
@media screen and (max-width:992px){
    .dataSource label,
    .JobTitle label{
        display:block;
        margin-bottom:3px;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .dataSource label,
    .JobTitle label{
        font-size:.875rem;
        opacity:.6;
    }
}

/*-------------------------------------------
Attachment
-------------------------------------------*/
.attachment{
    background-color:#f4f4f4;
    box-shadow:inset 0 1px 0 rgba(0,0,0,.06);
    color:#111;
    list-style:none;
    min-height:48px;
    margin-top:-1px;
    padding:15px 10px 10px;
}
    .attachment label{
        color:var(--dark-primary-color);
    }
    .attachment .att__item{
        display:inline-block;
    }
        .attachment a{
            display:block;
            background-color:#fff;
            box-shadow:0 3px 5px rgba(0,0,0,.1);
            border-radius:5px;
            color:#111;
            line-height:22px;
            padding:8px 10px;
            margin:3px 5px 10px 0;
        }
        .attachment a:focus,
        .attachment a:hover{
            box-shadow:0 1px 2px rgba(0,0,0,.2);
            color:var(--hover-color);
        }
@media screen and (max-width:992px){
    .attachment label{
        display:block;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .attachment{
        font-size:.875rem;
    }
}

/*-------------------------------------------
Share 分享
-------------------------------------------*/
.share{
    box-shadow:inset 0 1px 0 rgba(0,0,0,.06);
    list-style:none;
    margin:-1px 0 0;
    padding:15px 0;
    position:relative;
}
    .share__link{
        display:inline-block;
        text-indent:-99999em;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:28px auto;
        margin-right:15px;
        width:28px; height:28px;
        text-align:left;
        transition:.2s;
    }
    .share__link:focus,
    .share__link:hover{
        opacity:.7;
    }
    .btn-twitter{background-image:url(../images/icon-social-x.svg);}
    .btn-fb{background-image:url(../images/icon-social-facebook.svg);}
    .btn-line{background-image:url(../images/icon-social-line.svg);}
@media screen and (max-width:440px){/* i16 Pro Max */
    .share__link{
        margin-right:10px;
    }
}

/*-------------------------------------------
Footer
-------------------------------------------*/
footer{
    background:rgba(117,178,177,1);
    background:-moz-linear-gradient(left, rgba(117,178,177,1) 0%, rgba(83,142,212,1) 35%, rgba(63,115,211,1) 100%);
    background:-webkit-gradient(left top, right top, color-stop(0%, rgba(117,178,177,1)), color-stop(35%, rgba(83,142,212,1)), color-stop(100%, rgba(63,115,211,1)));
    background:-webkit-linear-gradient(left, rgba(117,178,177,1) 0%, rgba(83,142,212,1) 35%, rgba(63,115,211,1) 100%);
    background:-o-linear-gradient(left, rgba(117,178,177,1) 0%, rgba(83,142,212,1) 35%, rgba(63,115,211,1) 100%);
    background:-ms-linear-gradient(left, rgba(117,178,177,1) 0%, rgba(83,142,212,1) 35%, rgba(63,115,211,1) 100%);
    background:linear-gradient(to right, rgba(117,178,177,1) 0%, rgba(83,142,212,1) 35%, rgba(63,115,211,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#75b2b1', endColorstr='#3f73d3', GradientType=1 );
    color:#fff;
    font-size:.875rem;
    padding-top:30px; padding-bottom:calc(env(safe-area-inset-bottom) + 30px);
    position:relative;
}
    .footer__container{
        position:relative;
        padding-left:100px;
    }
        footer a,
        footer a:focus,
        footer a:hover{
            color:#fff;
        }
        .footer__logo{
            margin:0;
            background-image:url(../images/logo_white.svg);
            background-repeat:no-repeat;
            background-position:50% 50%;
            background-size:contain;
            width:80px;
            height:80px;
            overflow:hidden;
            position:absolute; left:0;
        }
            .footer__logo a{
                display:block;
                width:100%;
                height:100%;
                text-indent:-99999em;
            }
        .footer__contact{
            list-style:none;
            margin:0;
            padding:0;
        }
            .footer__contact > li{
                display:inline-block;
                padding-right:2em;
            }
            .footer__contact > li:first-child,
            .footer__contact > li:last-child{
                display:block;
            }
        .footer__social{
            list-style:none;
            margin:0;
            padding:0;
            position:absolute; right:0; top:0;
        }
            .footer__social > li{
                display:inline-block;
            }
            .footer__social > li:nth-child(n+2){
                margin-left:20px;
            }
                .footer__social a{
                    display:block;
                    background-repeat:no-repeat;
                    background-position:50% 50%;
                    background-size:contain;
                    width:34px;
                    height:34px;
                    overflow:hidden;
                    text-indent:-99999em;
                }
                .footer__fb{
                    background-image:url(../images/icon-social-facebook-white.svg);
                }
                .footer__line{
                    background-image:url(../images/icon-social-line-white.svg);
                }
        .footer__copyright{
            opacity:.8;
            margin-top:15px;
        }
        .recommended__browsers{
            color:#000;
            font-size:.75rem;
            opacity:.7;
        }
        .huaweb{
            color:#000;
            font-size:.75rem;
            opacity:.2;
        }
            .huaweb a{
                color:#000;
            }
@media screen and (max-width:1024px){
    .recommended__browsers{
        display:none;
    }
}
@media screen and (max-width:992px){
    .footer__contact > li:nth-child(4){
        width:100%;
    }
    .footer__social > li:nth-child(n+2){
        margin-left:10px;
    }
}
@media screen and (max-width:768px){
    footer{
        text-align:left;
    }
        .footer__contact > li:first-child,
        .footer__contact > li{
            flex-basis:100%;
            text-align:left;
        }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .footer__contact > li{
        width:100%;
    }
    .footer__copyright .en{
        display:block;
    }
}
@media screen and (max-width:568px){/* i5 Landscape */
    .footer__container{
        padding-left:0;
    }
        .footer__logo{
            width:70px;
            height:70px;
            position:static;
            margin-bottom:10px;
        }
        .footer__social{
            top:16px;
        }
        .footer__copyright{
            font-size:.75rem;
        }
}

/*-------------------------------------------
JQuery
------------------------------------------*/
.ui-datepicker-trigger{
    cursor:pointer;
    vertical-align:-5px;
    margin-left:3px;
}
.ui-datepicker{
    box-shadow:0 3px 15px rgba(0,0,0,.2);
}
.ui-datepicker .ui-datepicker-title select{
    background-color:#fff;
    height:26px;
    padding-top:3px; padding-bottom:3px;
    margin:1px 2px !important;
}
#tabs.ui-tabs{
    border:none !important;
}
#tabs .ui-tabs-nav{
    background:none;
    border:none; border-bottom:1px solid #ccc;
    padding:0;
    line-height:1;
}
    #tabs .ui-tabs-nav li{
        border-radius:5px 5px 0 0;
        margin-top:0;
    }
    #tabs .ui-state-active,
    #tabs .ui-widget-content .ui-state-active,
    #tabs .ui-widget-header .ui-state-active{
        background:#fff;
        border-color:var(--primary-color);
    }
        #tabs .ui-tabs-nav .ui-tabs-anchor{
            padding:11px 1em 9px;
        }
        #tabs .ui-tabs-nav li.ui-tabs-active{
            padding-bottom:0;
        }
        #tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{
            color:var(--primary-color);
            font-weight:700;
        }
#tabs .ui-tabs-panel{
    padding:1em 0 0;
}
.blockMsg{
    border-radius:10px;
    padding:20px 30px 30px !important;
    width:auto !important;
    max-width:95%;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%);
}
    .blockUI .buttons{
        margin-top:30px;
    }
        .blockUI .buttons [type="button"],
        .blockUI .buttons [type="submit"],
        .blockUI .buttons [type="reset"],
        .blockUI .buttons button,
        .blockUI .buttons .btn{
            padding:.5em 1.75em;
        }
@media screen and (max-width:820px) {/* iPad Air and Portrait */
    .blockMsg{
        padding:20px 20px 30px !important;
        min-width:80%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .blockMsg{
        font-size:4vw;
        padding:15px 15px 25px !important;
        min-width:calc(100% - 30px);
    }
        .blockUI .buttons [type="button"],
        .blockUI .buttons [type="submit"],
        .blockUI .buttons [type="reset"],
        .blockUI .buttons button,
        .blockUI .buttons .btn{
            font-size:5vw;
            padding:.5em 1.5em;
        }
}