@charset "UTF-8";
/*===========================================
Overview
===========================================*/

/*-------------------------------------------
Overview
-------------------------------------------*/
.overview{
    margin:0;
}
    .overview dt{
        color:var(--primary-color);
        float:left;
        font-weight:700;
    }
    .overview dd{
        border-bottom:1px solid #e3e3e3;
        font-size:1.125rem;
        min-height:50px;
        margin-left:180px; margin-bottom:20px;
        padding-bottom:20px;
    }
    .overview dd:last-of-type{
        padding-bottom:0;
        margin-bottom:0;
        border:none;
    }
        .overview__title{
            line-height:1.2;
        }
        .overview__title:nth-of-type(n+2){
            margin-top:15px;
        }
    .overview__importantDate h4{
        margin:0 0 10px;
    }
    .overview__importantDate ul{
        list-style:none;
        margin:0;
        padding:0;
        width:50%;
    }
        .overview__importantDate ul > li{
            display:flex;
            justify-content:space-between;
            margin:10px 0;
            position:relative;
        }
            .overview__importantDate ul > li::before{
                content:"";
                display:block;
                border-bottom:1px dotted #ddd;
                position:absolute; top:50%; left:0; right:0;
            }
            .overview__importantDate ul label,
            .overview__importantDate ul strong{
                background-color:#fff;
                line-height:1.2;
                position:relative; z-index:2;
                padding:0 10px;
                margin:0 -10px;
            }
    .sir__info{
        display:flex;
        flex-wrap:wrap;
        list-style:none;
        margin:-10px -10px 0;
        padding:0;
        line-height:1.2;
    }
        .sir__info > li{
            flex:1 1 auto;
            padding:10px 20px;
        }
        .sir__info > li:nth-child(n+2){
            border-left:1px solid rgba(var(--primary-rgb),.1);
        }
            .sir__info label{
                color:var(--primary-color);
            }
            .sir__info .this__name{
                display:block;
                color:#000;
                font-size:1.25rem;
                margin-top:5px;
            }
@media screen and (max-width:1024px){
    .overview__importantDate h4{
        margin-top:10px;
    }
    .overview__importantDate ul{
        width:100%;
    }
}
@media screen and (max-width:768px){
    .sir__info{
        margin:-15px 0 0;
    }
        .sir__info > li{
            flex-basis:100%;
            padding:15px 0;
        }
        .sir__info > li:nth-child(n+2){
            border-left:none;
            border-top:1px solid rgba(var(--primary-rgb),.1);
        }
}
@media screen and (max-width:576px){
    .overview dt{
        float:none;
    }
    .overview dd{
        min-height:40px;
        margin-left:0;
        margin-bottom:15px;
        padding-bottom:15px;
        font-size:1rem;
    }
}
@media screen and (max-width:360px){/* i12 Mini, Xiaomi 2S */
    .overview__importantDate ul label,
    .overview__importantDate ul strong{
        font-size:4.5vw;
    }
}

/*-------------------------------------------
Welcome message
-------------------------------------------*/
.message__item{
    position:relative;
}
    .message__photo{
        margin:0 0 20px 40px;
        float:right;
        width:220px;
    }
        .message__photo img{
            display:block;
            box-shadow:0 15px 20px -15px rgba(0,0,0,.4);
            width:100%;
        }
    .message__item > ol{
        margin:0;
        padding-left:1.2em;
    }
    .message__name{
        padding-top:1em;
    }
        .message__name img{
            display:inline-block;
            width:200px;
        }
        .message__name > ul{
            list-style:none;
            margin:0;
            padding:0;
            line-height:1.2;
        }
            .message__name > ul > li{
                margin-top:8px;
            }
@media screen and (max-width:576px){
    .message__item{
        margin:0 -15px;
        padding:30px 15px;
    }
        .message__photo{
            margin:0 auto 1em;
            float:none;
            width:180px;
        }
}
@media screen and (max-width:430px){/* i14 Pro Max */
    .message__photo{
        width:54%;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .message__item{
        margin:0 -10px;
    }
}

/*-------------------------------------------
Organizing Committee
-------------------------------------------*/
.committee__rosters{
    margin:0;
    --committee-dt-width:160px;
}
.committee__rosters:nth-of-type(odd){
    background-color:#fff;
}
    .committee__rosters .part__title{
        margin-top:0;
    }
    .committee__rosters dt{
        color:var(--primary-color);
        font-weight:700;
        line-height:1.2;
        float:left;
        width:var(--committee-dt-width);
    }
    .committee__rosters dd{
        display:flex;
        flex-wrap:wrap;
        border-bottom:1px dotted rgba(var(--primary-rgb),.2);
        color:#000;
        margin-left:calc(var(--committee-dt-width) + 15px);
        margin-bottom:15px;
        padding-bottom:15px;
    }
    .committee__rosters dd:last-of-type{
        border-bottom:none;
        padding-bottom:0;
    }
        .committee__rosters dd span{
            line-height:1.2;
            padding-bottom:1em; padding-right:8px;
            width:25%;
        }
            .committee__rosters dd i{
                opacity:0;
            }
@media screen and (max-width:1024px){
    .committee__rosters dd span{
        width:33.3333%;
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .committee__rosters dd span{
        width:50%;
    }
}
@media screen and (max-width:576px){
    .committee__rosters dt{
        float:none;
        margin-bottom:.75em;
        width:auto;
    }
    .committee__rosters dd{
        font-size:1rem;
        margin-left:0;
    }
}
@media screen and (max-width:360px){/* i12 Mini, Xiaomi 2S */
    .committee__rosters dd{
        font-size:4vw;
    }
}

/*-------------------------------------------
News List
-------------------------------------------*/
.news-list{
    list-style:none;
    margin:-20px 0 0;
    padding:0;
}
    .news__item{
        display:flex;
        padding:20px;
    }
    .news__item:nth-child(even){
        background-color:#f5f5f5;
    }
        .news__date{
            width:150px;
            color:#333;
            line-height:18px;
            opacity:.7;
            padding-right:20px;
            white-space:nowrap;
        }
        .news__link{
            display:inline-block;
            color:#000;
            font-size:1.125rem;
            line-height:18px;
            position:relative;
            padding-left:30px;
            transition:.2s;
        }
        .news__link:focus,
        .news__link:hover{
            color:var(--primary-color);
            opacity:.65;
        }
        .sticky .news__link{
            font-weight:700;
        }
            .sticky .news__link::before{
                display:inline-block;
                vertical-align:top;
                content:"";
                width:24px;
                height:24px;
                background:url(../images/icon-star.svg) 50% 50% no-repeat;
                position:absolute; left:0;
                margin-top:-4px;
            }
@media screen and (max-width:768px){
    .news__item{
        flex-wrap:wrap;
    }
        .news__date{
            width:100%;
            font-size:.875rem;
            padding:0 0 5px;
        }
        .news__link{
            line-height:1.3;
        }
            .sticky .news__link::before{
                margin:0;
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .news__link{
        font-size:1rem;
        padding-left:25px;
    }
        .sticky .news__link::before{
            margin:-3px;
        }
}

/*-------------------------------------------
News Detail
-------------------------------------------*/
.news-detail__header{
    border-bottom:2px solid rgba(var(--primary-rgb),.7);
    padding:0 0 15px;
}
    .news-detail__title{
        margin:0;
        color:#111;
        font-size:1.875rem; line-height:1.2;
    }
    .news-detail__date{
        color:#777;
        font-size:.875rem;
    }
.news-detail__content{
    padding:30px 0;
}
    .news-detail__content > h1:first-of-type,
    .news-detail__content > h2:first-of-type,
    .news-detail__content > h3:first-of-type,
    .news-detail__content > h4:first-of-type,
    .news-detail__content > p:first-of-type{
        margin-top:0;
    }
    .news-detail__content img{
        max-width:100%;
        height:auto !important;
        margin:1.8rem 0;
        box-shadow:0 3px 8px rgba(0,0,0,.1);
    }
    .news-detail__content table{
        border-collapse:collapse;
        border:1px solid #aaa;
        width:100% !important;
        box-shadow:0 0 5px rgba(0,0,0,.1);
    }
        .news-detail__content table th,
        .news-detail__content table td{
            padding:.25rem .5rem;
            word-break:keep-all;
            border:1px solid #ccc;
        }
.url{
    position:relative;
    border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;
    padding:15px 0;
    line-height:1.2;
    word-break:break-all;
}
    .url__label{
        display:block;
        padding-bottom:5px;
        font-size:.875rem; font-weight:700;
        letter-spacing:1.25px;
    }
    .url__link{
        
    }
.attachment{
    position:relative;
    border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;
    padding:15px 0;
    line-height:1.2;
    margin-top:-1px;
}
    .attachment__label{
        display:block;
        padding-bottom:5px;
        font-size:.875rem; font-weight:700;
        letter-spacing:1.25px;
    }
    .attachment ul{
        list-style:none; margin:0; padding:0;
    }
        .attachment ul li{
            float:left;
            padding:0 5px 5px 0;
        }
            .attachment a{
                display:inline-block;
                background-image:url(../images/icon_file.svg);
                background-repeat:no-repeat;
                background-position:15px 50%;
                background-size:16px 16px;
                background-color:#fff;
                padding:9px 15px 9px 38px;
                border:1px solid #ccc;
                border-radius:5px;
                color:#333;
                font-size:13px; line-height:18px;
                transition:.2s;
            }
            .attachment a:hover{
                color:#000;
                background-color:#f4f4f4;
                box-shadow:0 1px 3px rgba(0,0,0,.2);
            }
            .attachment a[href *='.pdf']{background-image:url(../images/icon_file_pdf.svg);}
            .attachment a[href *='.doc'], .attachment a[href *='.docx']{background-image:url(../images/icon_file_word.svg);}
            .attachment a[href *='.xls'], .attachment a[href *='.xlsx']{background-image:url(../images/icon_file_excel.svg);}
            .attachment a[href *='.ppt'], .attachment a[href *='.pptx']{background-image:url(../images/icon_file_powerpoint.svg);}
            .attachment a[href *='.jpg'], .attachment a[href *='.JPG'], 
            .attachment a[href *='.png'], .attachment a[href *='.PNG']{background-image:url(../images/icon_file_img.svg);}
            .attachment a[href *='.rar']{background-image:url(../images/icon_file_rar.svg);}
            .attachment a[href *='.zip']{background-image:url(../images/icon_file_zip.svg);}
.buttons{
    margin-top:-1px;
    border-top:1px solid #ddd;
}
@media screen and (max-width:992px){
    .table-wrap{
        position:relative;
        overflow-x:auto;
        overflow-y:hidden;
        width:100%;
    }
        .table-wrap::before,
        .table-wrap::after{
            display:block;
            padding:5px 0;
            content:"* you can left or right swipe programme.";
            color:brown;
            font-size:.75rem;
        }
}
@media screen and (max-width:576px){
    .news-detail__title{
        font-size:1.5rem;
    }
        .table-wrap > table{
            width:640px !important
        }
}

/*-------------------------------------------
Gallery
-------------------------------------------*/
.album__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
    .album__item{
        padding:0 10px 20px;
        aspect-ratio:16 / 9;
        width:400px;
    }
        .album__item a{
            display:flex;
            flex-direction:column;
            justify-content:center;
            background-color:rgba(var(--primary-rgb),.1);
            background-repeat:no-repeat;
            background-position:50% 50%;
            background-size:cover;
            border:8px solid #fff;
            box-shadow:0 8px 15px 0px rgba(0,0,0,.1);
            height:100%;
            position:relative;
            text-align:center;
            transition:.2s;
        }
        .album__item a:focus,
        .album__item a:hover{
            box-shadow:0 3px 8px 0px rgba(0,0,0,.2);
        }
        .album__item a[href*="javascript"]{
            box-shadow:none;
            cursor:default;
            opacity:.4;
            pointer-events:none;
        }
            .album__item strong{
                color:var(--primary-color);
                font-size:1.875rem;
                position:relative; z-index:2;
                transition:.2s;
            }
            .album__item a:focus strong,
            .album__item a:hover strong{
                color:var(--hover-color);
            }
            .album__item span{
                display:block;
                color:#777;
                font-size:1rem;
                position:relative; z-index:2;
            }
            .album__item a::before{
                content:"";
                display:block;
                background-color:rgba(255,255,255,.8);
                position:absolute; top:0; left:0; z-index:1;
                width:100%;
                height:100%;
                backdrop-filter:blur(4px);
                -webkit-backdrop-filter:blur(4px);
            }
            .album__item a::after{
                content:"";
                display:block;
                background:url(../images/icon-open-new.svg) no-repeat 50% 50%;
                background-size:contain;
                width:18px;
                height:18px;
                position:absolute; top:10px; right:10px; z-index:3;
                pointer-events:none;
            }
            .album__item a[href*="javascript"]::after{
                display:none;
            }
@media screen and (max-width:992px){
    .album__item{
        width:50%;
    }
}
@media screen and (max-width:576px){
    .album__item{
        width:100%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .album__item a{
        font-size:1.875rem;
    }
        .album__item span{
            font-size:1rem;
        }
        .album__item a::after{
            width:16px;
            height:16px;
        }
}