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

/*-------------------------------------------
Header Theme
-------------------------------------------*/
.header-theme{
    background-image:url(../images/theme_pic.jpg);
    height:640px;
}
    .header-theme__inner::before{
        height:85%;
        transform:translateY(-55%);
    }
    .header-theme__inner::after{
        background-position:left 50px top 30px, left 50px bottom 80px;
        background-size:auto 12px;
    }
    .header-heading__group{
        margin-top:-40px; /* 減掉news覆蓋部分 */
    }
        .theme-heading strong{
            font-size:3rem;
        }
        .theme-heading span{
            font-size:6rem;
        }
        .theme-heading span:last-of-type{
            display:block;
        }
        .header-theme__date{
            font-size:1.75rem;
        }
        .header-theme__venue{
            font-size:1.5rem;
        }
        .scroll-icon{
            width:32px;
            position:absolute; left:50%; bottom:100px;
            transform:translateX(-50%);
            margin-top:-10px;
            color:#fff;
            font-size:.875rem;
            opacity:0;
            -webkit-animation:scroll-icon 2.5s infinite;
            animation:scroll-icon 2.5s infinite;
            display:none;
        }
        @-webkit-keyframes scroll-icon{
            0% {}
            30% {opacity:1;}
            80% {opacity:1;}
            100% {bottom:0; opacity:0;}
        }
        @keyframes example scroll-icon{
            0% {}
            30% {opacity:1;}
            80% {opacity:1;}
            100% {bottom:0; opacity:0;}
        }
            .scroll-icon::before,
            .scroll-icon::after{
                content:"";
                display:inline-block;
                width:32px;
                height:1px;
                background-color:#fff;
                position:absolute; left:50%; bottom:-5px;
            }
            .scroll-icon::before{
                transform:translateX(-50%) rotate(42deg);
                margin-left:-12px;
            }
            .scroll-icon::after{
                transform:translateX(-50%) rotate(-42deg);
                margin-left:12px;
            }
@media screen and (max-width:1680px){
    .header-theme{
        height:550px;
    }
        .theme-heading strong{
            font-size:2.75rem;
        }
        .theme-heading span{
            font-size:4.75rem;
        }
}
@media screen and (max-width:1280px){/* Air Mac */
    .theme-heading strong{
        font-size:2.5rem;
    }
    .theme-heading span{
        font-size:4.5rem;
    }
}
@media screen and (max-width:1024px){
    .header-heading__group{
        margin-top:-20px;
    }
        .theme-heading strong{
            font-size:2rem;
        }
        .theme-heading span{
            display:block;
            font-size:3.75rem;
        }
        .header-theme__date{
            font-size:2.25vw;
        }
        .header-theme__venue{
            font-size:2.125vw;
        }
            .header-theme__city{
                
            }
}
@media screen and (max-width:992px){
    .header-theme{
        height:450px;
    }
        .header-theme__inner::after {
            background-position:left 30px top 20px, left 30px bottom 45px;
            background-size:auto 12px;
        }
        .header-heading__group{
            padding-left:5%;
        }
}
@media screen and (max-width:768px){
    .header-theme__inner::before{
        height:75%;
    }
    .header-theme__inner::after{
        background-size:auto 10px;
    }
    .theme-heading strong{
        font-size:4vw;
    }
    .theme-heading span{
        font-size:7vw;
    }
    .header-theme__date{
        font-size:3vw;
    }
    .header-theme__venue{
        font-size:2.5vw;
    }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .header-heading__group{
        padding-left:20px;
    }
}
@media screen and (max-width:576px){
    .header-theme{
        background-image:url(../images/theme_pic_sp.jpg);
        height:340px;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .header-theme{
        height:420px;
    }
        .header-theme__inner::before{
            background-position:center right -30px;
            right:0;
            opacity:.7;
        }
        .header-theme__inner::after{
            background-position:left 10px top 15px, left 10px bottom 45px;
            background-size:auto 6px;
        }
        .header-heading__group{
            margin-top:-10px;
            transform:translateY(-50%);
        }
            .theme-heading strong{
                font-size:5vw;
            }
            .theme-heading span{
                font-size:11vw;
            }
            .header-theme__date{
                font-size:4vw;
            }
            .header-theme__venue{
                font-size:3.5vw;
            }
}
/*-------------------------------------------
Common
-------------------------------------------*/
.home-title{
    margin:0 0 25px;
    color:#111;
    font-size:1.875rem;
    line-height:1;
}
.btn-more{
    font-size:.875rem;
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .home-title{
        font-size:6.25vw;
    }
}

/*-------------------------------------------
News
-------------------------------------------*/
.news-container{
    background:var(--primary-color);
    background:var(--linear-gradient);
    position:relative; top:-50px; z-index:2;
    padding:35px 30px 40px;
    box-shadow:0 -5px 12px rgba(0,0,0,.1);
}
    .news-container .home-title{
        color:#fff;
    }
    .news-list{
        list-style:none;
        margin:0;
        padding:0;
    }
        .news__item{
            display:flex;
            margin-bottom:20px;
        }
        .news__item:nth-of-type(n+6){
            display:none;
        }
        .news__item:last-of-type{
            margin-bottom:0;
        }
            .news__date{
                width:150px;
                color:#fff;
                line-height:18px;
                opacity:.7;
                padding-right:20px;
                white-space:nowrap;
            }
            .news__title{
                flex:1;
                font-size:1.125rem;
                line-height:18px;
                position:relative;
                padding-left:26px;
            }
                .news__link{
                    display:inline-block;
                    color:#fff;
                    transition:.2s;
                }
                .news__link:focus,
                .news__link:hover{
                    color:#fff;
                    opacity:.65;
                }
                .sticky .news__link{
                    font-weight:700;
                }
                    .sticky .news__link::before{
                        display:inline-block;
                        content:"";
                        aspect-ratio:1 / 1;
                        background:url(../images/icon-star.svg) 50% 50% no-repeat;
                        background-size:contain;
                        width:20px;
                        position:absolute; left:0;
                        margin-top:-2px;
                    }
    .news-container .btn-more{
        position:absolute; top:30px; right:30px;
        color:var(--primary-color);
        background-color:#fff;
    }
@media screen and (max-width:992px){
    .news-container{
        top:-30px;
        margin:0 auto;
    }
}
@media screen and (max-width:768px){
    .news__item{
        flex-wrap:wrap;
    }
    .news__item:last-of-type{
        margin-bottom:15px;
    }
        .news__date{
            width:100%;
            font-size:.875rem;
            padding:0 0 5px;
        }
        .news__title{
            padding-left:0;
        }
            .news__link{
                line-height:1.3;
            }
                .sticky .news__link::before{
                    margin:1px 0 0 -22px;
                }
    .news-container .btn-more{
        position:static;
        margin-top:10px;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .news-container{
        padding:35px 30px 40px;
    }
        .news__link{
            font-size:1rem;
        }
            .sticky .news__link::before{
                margin-top:-1px;
            }
}

/*-------------------------------------------
Info Container
-------------------------------------------*/
.info-container{
    padding:30px 30px 80px;
    display:flex;
    flex-wrap:wrap;
}
    .aside-container{
        width:40%;
        padding-left:5%;
    }
@media screen and (max-width:992px){
    .info-container{
        padding-left:20px; padding-right:20px;
    }
        .aside-container{
            width:100%;
            margin-bottom:80px;
            padding-left:0;
        }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .info-container{
        padding-left:0; padding-right:0;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .info-container{
        padding-left:10px; padding-right:10px;
    }
}

/*-------------------------------------------
Welcome Message
-------------------------------------------*/
.welcome-container{
    width:60%;
    min-height:200px;
    padding-right:40px;
}
    .welcome-container p{
        line-height:1.7;
    }
    .welcome-container .btn-more{
        margin-top:10px;
    }
@media screen and (max-width:992px){
    .welcome-container{
        order:1;
        width:100%;
        padding-right:0;
    }
}
@media screen and (max-width:768px){
    .welcome-container{
        
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .welcome-container p{
        
    }
}

/*-------------------------------------------
Important Date
-------------------------------------------*/
.date-container{
    position:relative;
}
    .important-date{
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        flex-wrap:wrap;
    }
        .important-date__item{
            width:100%;
            background-color:var(--secondary-color);
            color:#fff;
            font-size:1.25rem;
            line-height:1.2;
            padding:30px 10px;
            position:relative;
            overflow:hidden;
            text-align:center;
        }
        .important-date__item:nth-child(2){
            background-color:#eb8a2a;
        }
        .important-date__item:nth-child(3){
            background-color:#e22d76;
        }
            .important-date__item::before{
                content:"";
                display:block;
                background:url(../images/icon-date-white.svg) no-repeat 0 0;
                background-size:contain;
                aspect-ratio:1 / 1;
                height:70%;
                position:absolute; top:15%; left:-18px;
                opacity:.2;
                pointer-events:none;
            }
            .important-date__item time{
                display:block;
                font-size:1.75rem;
                line-height:1;
                margin-bottom:10px;
            }
@media screen and (max-width:1280px){/* Air Mac */
    .important-date__item{
        font-size:1.125rem;
    }
}
@media screen and (max-width:992px){
     .important-date__item{
        width:33.3333%;
    }
}
@media screen and (max-width:768px){
    .important-date__item{
        flex-basis:50%;
    }
    .important-date__item:first-of-type{
        flex-basis:100%;
    }
        .important-date__item time{
            font-size:1.5rem;
        }
}
@media screen and (max-width:576px){
    .important-date__item,
    .important-date__item:first-of-type{
        flex-basis:100%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .important-date__item{
        font-size:5vw;
    }
        .important-date__item time{
            font-size:7vw;
        }
}

/*-------------------------------------------
Download
-------------------------------------------*/
.download-container{
    position:relative;
}
    .download-list{
        list-style:none;
        margin:0;
        padding:0;
        font-size:1.75rem;
        line-height:1.2;
    }
        .download__item{
            color:#fff;
            position:relative;
            text-align:center;
            margin-bottom:10px;
        }
            .download__item a{
                display:block;
                border-radius:5px;
                color:#fff;
                padding:50px 15px;
                position:relative; z-index:2;
                outline:none;
            }
            .download__item:nth-child(1) a{
                background-color:#e22d76;
            }
            .download__item:nth-child(2) a{
                background-color:#eb8a2a;
            }
            .download__item a[href="#"]{
                background-color:#e3e3e3 !Important;
                pointer-events:none;
            }
                .download__item a strong{
                    position:relative; z-index:2;
                }
                .download__item a::before{
                    content:"";
                    display:block;
                    background:url(../images/icon-download-white.svg) no-repeat 0 0;
                    background-size:contain;
                    aspect-ratio:1 / 1;
                    height:70%;
                    position:absolute; top:15%; left:-18px;
                    opacity:.3;
                    pointer-events:none;
                }
                .download__item a::after{
                    content:"";
                    display:block;
                    background-color:#000;
                    position:absolute; top:0; left:0; z-index:0;
                    width:100%;
                    height:100%;
                    opacity:0;
                    transition:.3s;
                }
                .download__item a:focus::after,
                .download__item a:hover::after{
                    opacity:.15;
                }
@media screen and (max-width:992px){
    .download-list{
        display:flex;
        margin:-10px;
    }
        .download__item{
            flex:1;
            padding:10px;
        }
}
@media screen and (max-width:768px){
    .download-list{
        margin:-5px;
        font-size:1.5rem;
    }
        .download__item{
            padding:5px;
        }
            .download__item a{
                padding:40px 10px;
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .download-list{
        flex-wrap:wrap;
    }
        .download__item{
            flex-basis:100%;
        }
            .download__item a{
                padding:30px 10px;
            }
}

/*-------------------------------------------
Shortcut Buttons
-------------------------------------------*/
.shortcut-buttons{
    background:var(--primary-color);
    background:-moz-linear-gradient(left, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
    background:-webkit-gradient(left top, right top, color-stop(0%, var(--gradient-start-color)), color-stop(100%, var(--gradient-end-color)));
    background:-webkit-linear-gradient(left, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
    background:-o-linear-gradient(left, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
    background:-ms-linear-gradient(left, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
    background:linear-gradient(to right, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--gradient-start-color)', endColorstr='var(--gradient-end-color)', GradientType=1 );
    position:relative;
    padding:80px 0;
}
    .shortcut-buttons::before{
        content:"";
        display:block;
        background:url(../images/theme_pic.jpg) no-repeat right center;
        background-size:cover;
        position:absolute; top:0; left:0;
        width:100%;
        height:100%;
        opacity:.4;
        pointer-events:none;
    }
    .shortcut-list{
        list-style:none;
        margin:0 -15px;
        padding:0;
        display:flex;
        flex-wrap:wrap;
    }
        .shortcut__item{
            width:25%;
            padding:15px;
            text-align:center;
        }
            .shortcut__link{
                display:block;
                margin:0 auto;
                border-radius:5px;
                background-color:#fff;
                padding:30px;
                color:#111;
                font-size:1.5rem;
                font-weight:700;
                line-height:64px;
                white-space:nowrap;
                transition:.2s;
            }
            .shortcut-list:hover .shortcut__link,
            .shortcut-list:focus-within .shortcut__link{
                opacity:.65;
            }
            .shortcut-list:hover .shortcut__link:focus,
            .shortcut-list .shortcut__link:focus,
            .shortcut-list:hover .shortcut__link:hover{
                opacity:1;
            }
                .shortcut__link::before{
                    display:inline-block;
                    vertical-align:top;
                    content:"";
                    aspect-ratio:1 / 1;
                    width:64px;
                    background-position:50% 50%;
                    background-repeat:no-repeat;
                    background-size:contain;
                    margin-right:5px;
                }
                .shortcut__item:nth-child(1) .shortcut__link::before{
                    background-image:url(../images/icon-speakers.svg);
                }
                .shortcut__item:nth-child(2) .shortcut__link::before{
                    background-image:url(../images/icon-program.svg);
                }
                .shortcut__item:nth-child(3) .shortcut__link::before{
                    background-image:url(../images/icon-eposter.svg);
                }
                .shortcut__item:nth-child(4) .shortcut__link::before{
                    background-image:url(../images/icon-submission.svg);
                }
@media screen and (max-width:1280px){/* Air Mac */
    .shortcut__link{
        font-size:1.25rem;
        line-height:48px;
    }
        .shortcut__link::before{
            width:48px;
        }
}
@media screen and (max-width:1024px){
    .shortcut-list{
        margin:0 -10px;
    }
        .shortcut__item{
            padding:0 10px;
        }
}
@media screen and (max-width:992px){
    .shortcut-buttons{
        padding:60px 0;
    }
        .shortcut-list{
            margin:0 -10px;
        }
            .shortcut__item{
                padding:0 10px;
            }
                .shortcut__link{
                    line-height:1.2;
                    padding:20px 10px;
                }
                    .shortcut__link::before{
                        display:block;
                        margin:0 auto 5px;
                    }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .shortcut__item{
        width:50%;
        padding:10px;
    }
}
@media screen and (max-width:576px){
    .shortcut__link{
        
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .shortcut-buttons{
        padding:50px 0;
    }
        .shortcut__link{
            font-size:4.5vw;
        }
            .shortcut__link::before{
                width:14vw;
            }
}

/*-------------------------------------------
Organized by
-------------------------------------------*/
.organized-by-container{
    background-color:#fff;
}

/*-------------------------------------------
Banners
-------------------------------------------*/
#banners{
    background-color:#f1f1f1;
}

/*-------------------------------------------
Participate
-------------------------------------------*/
.participate{
    background-color:rgba(var(--primary-rgb),.04);
    padding:80px 0;
    position:relative;
    overflow:hidden;
}
    .participate::before,
    .participate::after{
        content:"";
        display:block;
        background-repeat:no-repeat;
        background-position:50% 50%;
        background-size:contain;
        aspect-ratio:1 / 1;
        width:400px;
        position:absolute; z-index:0;
        transform:rotate(-10deg);
        filter:grayscale(1);
        opacity:.07;
        pointer-events:none;
    }
    .participate::before{
        background-image:url(../images/icon-mail.svg);
        bottom:-30%;
    }
    .participate::after{
        background-image:url(../images/icon-at.svg);
        top:-30%; right:0;
    }
    .participate__inner{
        position:relative; z-index:3;
        text-align:center;
    }
        .participate__desc{
            color:#111;
            font-size:1.25rem; font-weight:700;
            line-height:1.3;
            padding-bottom:15px;
        }
        .participate__inner form{
            position:relative;
            width:400px;
            margin:0 auto;
            text-align:left;
        }
            .participate__inner .form__row{
                margin-bottom:8px;
                position:relative;
            }
                .participate__inner [type="text"]{
                    margin:0;
                }
                .participate__inner [type="submit"]{
                    font-size: 1.125rem;
                    margin:0;
                    padding: 12px 10px;
                }
@media screen and (max-width:1440px){
    .participate::before{
        left:-5%;
    }
    .participate::after{
        right:-4%;
    }
}
@media screen and (max-width:1024px){
    .participate::before,
    .participate::after{
        width:300px;
    }
    .participate::before{
        bottom:-13%;
    }
    .participate::after{
        top:-13%;
    }
}
@media screen and (max-width:768px){
    .participate::before,
    .participate::after{
        width:200px;
    }
    .participate::before{
        left:-8%; bottom:-20%;
    }
    .participate::after{
        right:-8%; top:-20%;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .participate{
        padding:50px 0;
    }
        .participate__desc{
            font-size:5.5vw;
            text-align:left;
        }
        .participate__inner form{
            width:100%;
        }
}