@charset "UTF-8";
/*===========================================
Events
===========================================*/
.buttons{
    border-top:1px solid rgba(0,0,0,.1);
    margin-top:20px;
}
@media screen and (max-width:576px){
    .search__container .formCol:first-of-type{
        flex-basis:35%;
    }
    .search__container .formCol:nth-of-type(2){
        flex-basis:45%;
    }
    .search__container .formCol:last-of-type{
        flex-basis:15%;
    }
        .search__container .formCol select,
        .search__container .formCol [type='text']{
            width:100%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .search__container .formCol:first-of-type{
        flex-basis:100%;
    }
    .search__container .formCol:nth-of-type(2){
        flex-basis:70%;
    }
    .search__container .formCol:last-of-type{
        flex-basis:20%;
    }
}

/*-------------------------------------------
清單
-------------------------------------------*/
.events__list{
    letter-spacing:0;
}
    .events__list > .explanation{
        width:100%;
        padding-bottom:30px;
    }
    .event__item{
        position:relative;
        border-bottom:1px solid rgba(0, 0, 0, .15);
        display:flex;
        margin-bottom:25px;
        padding:0 0 25px;
    }
    .event__item.is-past{
        opacity:.6;
    }
        .event__cover{
            width:300px;
        }
            .event__figure{
                margin:0;
                background-color:var(--dark-blue-light-color);
                background-image:url(../images/default.png);
                background-repeat:no-repeat;
                background-position:50% 50%;
                background-size:contain;
                border-radius:10px;
                position:relative;
                padding-bottom:56.25%;
                overflow:hidden;
            }
            .event__figure--have-img{
                background-image:none;
            }
            .is-past .event__figure{
                filter:grayscale(1);
            }
             .is-past .event__cover__link:focus .event__figure,
             .is-past .event__cover__link:hover .event__figure{
                filter:grayscale(0);
            }
                .event__figure img{
                    display:block;
                    object-fit:cover;
                    position:absolute; top:0; left:0;
                    width:100%;
                    height:100%;
                    transition:.3s;
                }
                .event__cover__link:focus .event__figure img,
                .event__cover__link:hover .event__figure img{
                    transform:scale(1.05);
                }
        .event__info__content{
            flex:1;
            padding-left:40px; padding-right:40px;
        }
            .event__type{
                background-color:rgba(var(--primary-rgb),.1);
                border-radius:30px;
                color:var(--primary-color);
                font-size:.875rem;
                line-height:1;
                letter-spacing:0;
                padding:5px 10px;
            }
            .is-past .event__type{
                filter:grayscale(1);
            }
            .event__title{
                margin:8px 0 0;
                padding-bottom:10px;
                font-size:1.25rem;
                line-height:1.3;
            }
                .event__title a{
                    color:#000;
                }
                .event__title a:focus,
                .event__title a:hover{
                    color:var(--hover-color);
                }
            .event__info{
                line-height:1.2;
                margin-top:8px;
                position:relative;
                padding-left:100px;
            }
            .is-past .event__info{
                filter:grayscale(1);
            }
                .event__info label{
                    display:inline-block;
                    background-position:0 -2px;
                    background-repeat:no-repeat;
                    background-size:24px auto;
                    font-size:.875rem;
                    line-height:24px;
                    position:absolute; top:-2px; left:0;
                    padding-left:28px;
                }
                .event__date label{
                    background-image:url(../images/icon_date_primary.svg);
                }
                .event__place label{
                    background-image:url(../images/icon_place_primary.svg);
                }
                .event__place a{
                    color:var(--primary-text);
                }
                .event__place a:focus,
                .event__place a:hover{
                    color:var(--hover-color);
                }
                    .event__place__addr{
                        margin-top:5px;
                    }
                        .have-addr .event__place__addr::after{
                            content:"";
                            display:inline-block;
                            background:url(../images/icon-google_map.svg) no-repeat 50% 50%;
                            background-size:contain;
                            width:18px;
                            height:18px;
                            vertical-align:-3px;
                        }
                .event__organizer label{
                    background-image:url(../images/icon_work_primary.svg);
                }
                .event__speaker label{
                    background-image:url(../images/icon_speaker_primary.svg);
                }
                .event__score label{
                    background-image:url(../images/icon_score_primary.svg);
                }
                .event__apply label{
                    background-image:url(../images/icon_reg_primary.svg);
                }
        .event__qr{
            position:relative;
        }
            .event__qr__link{
                display:block;
                width:140px;
                box-shadow:0 0 0 1px #e3e3e3;
            }
                .event__qr figure{
                    margin:0;
                    background-size:cover;
                    padding-bottom:100%;
                }
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .event__cover{
        width:240px;
    }
    .event__info__content{
        padding-left:30px; padding-right:30px;
    }
        .event__info{
            padding-left:30px;
        }
            .event__info label{
                width:24px;
                height:24px;
                text-indent:-99999em;
                overflow:hidden;
                padding-left:0;
            }
    .event__qr__link{
        width:100px;
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .event__item{
        flex-wrap:wrap;
    }
        .event__info__content{
            flex-basis:100%;
            padding:30px 0;
        }
        .event__qr{
            position:absolute; top:0; right:0;
        }
            .event__qr__link{
                width:140px;
            }
}
@media screen and (max-width:576px){
    .event__cover{
        width:100%;
    }
    .event__info__content{
        padding:20px 0;
    }
    .event__qr{
        position:static;
        width:100%;
    }
        .event__qr__link{
            margin:0 auto;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .event__info{
        font-size:.875rem;
    }
    .event__date{
        font-size:4.25vw;
    }
    .event__qr__link{
        width:35vw;
    }
}

/*-------------------------------------------
內頁
-------------------------------------------*/
.event__header{
    border-bottom:2px solid var(--primary-color);
    padding-bottom:20px;
}
    .event__header .event__cover{
        display:none;
    }
    .event__header .event__title{
        font-size:2rem;
        line-height:1.2;
        margin:5px 0;
        padding:5px 0;
    }
    .event__header .event__info{
        letter-spacing:0;
    }
    .event__seen{
        color:#999;
        font-size:.875rem;
    }
        .event__seen label{
            background-image:url(../images/icon_view.svg?v=2024);
            top:-4px;
        }
    .event__buttons{
        background-color:var(--primary-light-color);
        border-radius:8px;
        letter-spacing:0;
        padding:20px 5px 15px;
        margin:10px 0;
        text-align:center;
    }
        .event__buttons .btn{
            border:1px solid var(--primary-color);
            font-size:1.125rem;
            line-height:1;
            margin-left:10px; margin-right:10px;
            padding:.75em 2em;
            position:relative;
        }
        .event__buttons .btnSecondary{
            border:1px solid rgba(var(--primary-rgb),.6);
            color:var(--primary-text);
            background-color:#fff;
            padding:.75em 1em;
        }
        .event__buttons .btnSearch{
            padding-left:calc(1em + 28px) !important;
            padding-right:1em !important;
        }
            .event__buttons .btnSearch::before{
                content:"";
                display:inline-block;
                background-image:url(../images/icon_search_rosters_primary.svg);
                background-position:50% 50%;
                background-size:contain;
                width:28px;
                height:28px;
                position:absolute;
                margin-top:-6px; margin-left:-30px;
            }
            .event__buttons .btnSearch:hover::before{
                background-image:url(../images/icon_search_rosters.svg);
            }
        .event__buttons .btnGcal{
            padding-left:calc(1em + 28px) !important;
            padding-right:1em !important;
        }
            .btnGcal span{
                display:inline-block;
                background:url(../images/icon-google_cal.svg) no-repeat 50% 50%;
                background-size:contain;
                color:#222;
                font-size:12px;
                width:28px;
                height:28px;
                line-height:28px;
                position:absolute;
                margin-top:-6px; margin-left:-30px;
                transform:scale(.8);
            }
        .event__buttons a:focus,
        .event__buttons a:hover{
            border-color:rgba(var(--blue-rgb),.8);
            color:#fff;
        }
    .share{
        /* background-color:var(--primary-light-color); */
    }
    .apply__date{
        font-size:1.125rem;
    }
    .event__apply__num{
        font-size:1.125rem;
    }
        .event__apply__num strong{
            display:inline-block;
            vertical-align:middle;
            font-size:2rem;
        }
        .event__apply__num strong:last-of-type{
            font-size:inherit;
        }
    .feeTable thead th{
        font-size:1rem;
    }
    .feeTable thead th:first-child{
        width:150px;
    }
    .feeTable tbody th:first-child{
        text-align:left;
    }
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .event__buttons .btn{
        margin:5px;
        padding:.75em 1em;
        width:45%;
    }
        .event__buttons .apply__buttons{
            display:block;
            margin-bottom:8px;
        }
}
@media screen and (max-width:576px){
    .event__header .event__title{
        font-size:5vw;
    }
    .event__buttons .btn{
        width:95%;
    }
    .feeTable thead th{
        padding:8px 5px;
    }
    .feeTable thead th:first-child{
        width:auto;
    }
        .feeTable thead th .explanation{
            font-size:.875rem;
        }
    .feeTable tbody th{
        padding:8px 5px;
    }
        .feeTable th label{
            display:block;
            font-size:1rem;
            line-height:1.15;
            margin:0 auto;
            text-align:center;
            width:1em;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .event__header .event__title{
        font-size:5.5vw;
    }
    .apply__date{
        font-size:5vw;
    }
    .feeTable tbody th label{
        font-size:1rem;
    }
    .feeTable tbody td span{
        font-size:4.5vw;
    }
}

/*-------------------------------------------
照片錦集
-------------------------------------------*/
.event__album{
    position:relative;
}
    .event__photo{
        --photo-padding:15px;
        list-style:none;
        margin:calc(0px - var(--photo-padding)) calc(0px - var(--photo-padding)) 0;
        padding:0;
        display:flex;
        flex-wrap:wrap;
    }
        .event__photo > li{
            width:25%;
            align-self:center;
            padding:var(--photo-padding);
        }
            .photo__link{
                display:block;
                border:15px solid #fff;
                border-radius:5px;
                box-shadow:0 3px 10px rgba(0,0,0,.15);
                overflow:hidden;
            }
            .photo__link:focus,
            .photo__link:hover{
                box-shadow:0 8px 20px rgba(0,0,0,.1);
                transform:rotate(-2deg) scale(1.05);
                outline:none;
            }
                .photo__cover{
                    margin:0;
                    position:relative;
                    overflow:hidden;
                }
                    .photo__cover img{
                        display:block;
                        width:100%;
                        object-fit:contain;
                    }
                .photo__desc{
                    color:#333;
                    font-size:.875rem;
                    line-height:1.2;
                    padding:10px 0 10px;
                }
                .photo__link:focus .photo__desc,
                .photo__link:hover .photo__desc{
                    color:var(--hover-color);
                }
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .event__photo{
        --photo-padding:10px;
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .event__photo > li{
        width:25%;
        align-self:flex-start;
    }
        .photo__link{
            border-width:0;
            box-shadow:0 3px 8px rgba(0,0,0,.15);
        }
            .photo__cover{
                height:0;
                padding-bottom:100%;
            }
                .photo__cover img{
                    object-fit:cover;
                    position:absolute; top:0; left:0;
                    width:100%;
                    height:100%;
                }
            .photo__desc{
                font-size:.75rem;
                padding:5px;
            }
}
@media screen and (max-width:576px){
    .event__photo{
        --photo-padding:8px;
    }
        .event__photo > li{
            width:33.3333%;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .event__photo{
        --photo-padding:6px;
    }
}

/*-------------------------------------------
報名
-------------------------------------------*/
.data__form .colLabel{
    font-size:1rem;
}
.data__form [name*=last_name],
.data__form [name*=first_name]{
    width:48%;
}
.data__form [name*=first_name]{
    float:right;
}
.data__form [name*=postal_code_name] {
    width:115px;
}
.data__form [name*=address] {
    width:calc(100% - 380px);
    float:right;
}
.data__form .radio__list{
    display:flex;
    flex-wrap:wrap;
}
    .data__form .radio__list > span{
        margin:0 1.5em 5px 0;
    }
@media screen and (max-width:768px){/* iPad and Portrait */
    .data__form [name*=address]{
        width:100%;
        float:none;
        margin-left:0; margin-right:0;
    }
    .data__form .radio__list > span{
        flex-basis:100%;
        margin-right:0;
    }
}
@media screen and (max-width:576px){
    .data__form [name*=last_name],
    .data__form [name*=first_name]{
        width:100%;
        float:none;
        margin-left:0; margin-right:0;
    }
    .data__form [name*=postal_code_city]{
        width:48%;
    }
    .data__form [name*=postal_code_name]{
        width:48%;
        float:right;
    }
    .data__form [name*=address]{
        margin-top:30px;
    }
    .data__form [name*=address] + .explanation{
        position:absolute;
        margin-top:-72px;
    }
    .data__form [name*=experience]{
        height:8em;
    }
    .regFee{
        border:none;
    }
        .regFee > thead{
            display:none;
        }
        .regFee > tbody > tr{
            display:flex;
            flex-direction:column;
        }
            .regFee > tbody > tr > td{
                border:none;
                color:#111;
                padding:0;
                text-align:left;
            }
            .regFee > tbody > tr > td:first-child{
                width:100%;
            }
                .regFee tbody td::before{
                    display:inline-block;
                    content:attr(aria-label)"：";
                    background-color:rgba(var(--primary-rgb),.07);
                    border-bottom:1px solid rgba(var(--primary-rgb),.2);
                    color:#111;
                    font-size:.875rem; font-weight:700;
                    margin-right:5px;
                    padding:5px;
                }
}
@media screen and (max-width:320px){/* i5, SE */
    .data__form [name*='address'] + .explanation{
        font-size:.75rem;
    }
}

/*-------------------------------------------
報名資料查詢
-------------------------------------------*/
.search__form .formCol{
    padding-top:0;
}
    .search__form .colLabel{
        font-size:1rem;
    }
    .search__form .formCol::after{
        display:none;
    }
    [name="input_code"]{
        width:120px;
    }
    [name="validate_image"]{
        display:inline-block;
        height:36px;
        vertical-align:middle;
    }
.search__view .formCol strong{
    color:#000;
    font-size:1.125rem;
}