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

/*-------------------------------------------
Header Theme
-------------------------------------------*/
.header-theme{
    background-image:url(../images/theme_pic.jpg?v=20230222);
    background-position:50% 65%;
    height:560px;
}
    .header-heading__group{
        margin-top:-40px; /* 減掉news覆蓋部分 */
    }
        .header-theme__logo{
            width:330px;
        }
        .theme-heading,
        .theme-secondary-heading{
            font-size:2.5rem;
        }
            .theme-heading span,
            .theme-secondary-heading span{
                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-height:780px) and (orientation:landscape){
    .header-theme{
        height:500px;
    }
}
@media screen and (max-width:1024px){
    .header-heading__group{
        margin-top:-20px;
    }
        .theme-heading,
        .theme-secondary-heading{
            font-size:3.5vw;
        }
        .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;
    }
}
@media screen and (max-width:576px) and (orientation:landscape){
    .header-theme{
        height:330px;
    }   
}
@media screen and (max-width:576px){
    .header-theme__logo{
        width:210px;
    }
}
@media screen and (max-width:540px){
    .header-theme{
        background-image:url(../images/theme_pic_sp.jpg?v=20230222);
        background-position:50% 100%;
        height:64vh;
    }
        .theme-heading,
        .theme-secondary-heading{
            font-size:4vw;
            padding-right:0;
        }
            .theme-heading span{
                display:inline;
            }
        .header-theme__date{
            font-size:3vw;
        }
        .header-theme__venue{
            font-size:2.5vw;
        }
}
@media screen and (max-width:430px){/* i14 Pro Max */
    .header-heading__group{
        margin-top:-10px;
        transform:translateY(-50%);
    }
        .theme-heading,
        .theme-secondary-heading{
            font-size:6vw;
            line-height:1.1;
        }
            .theme-heading span{
                display:inline;
            }
        .header-theme__date{
            font-size:3.75vw;
        }
        .header-theme__venue{
            font-size:3.25vw;
        }
}
/*-------------------------------------------
Common
-------------------------------------------*/
.home-title{
    margin:0 0 25px;
    color:#111;
    font-size:1.5rem; line-height:1;
}
.btn-more{
    font-size:.875rem;
}
@media screen and (max-width:430px){/* i14 Pro Max */
    .home-title{
        font-size:6.25vw;
    }
}

/*-------------------------------------------
News
-------------------------------------------*/
.news-container{
    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; top:-50px; z-index:2;
    padding:35px 30px;
    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:inline-block;
            vertical-align:top;
            width:49.5%;
            max-height:2.25em;
            overflow:hidden;
            margin-top:25px;
        }
        .news__item:nth-child(odd){
            padding-right:20px;
        }
        .news__item:nth-child(even){
            padding-left:20px;
        }
        .news__item:nth-child(-n+2){
            margin-top:0;
        }
        .news__item:nth-child(n+7){
            display:none;
        }
            .news__link{
                display:inline-block;
                position:relative;
                padding-left:30px;
                line-height:18px;
                color:#fff;
                -webkit-transition:.2s;transition:.2s;
            }
            .news-list:hover .news__link{
                opacity:.65;
            }
            .news-list:hover .news__link:hover{
                color:#fff;
                opacity:1;
            }
                .news__link::before{
                    display:inline-block;
                    vertical-align:top;
                    content:"";
                    width:24px;
                    height:24px;
                    background:url(../images/icon-star.svg?=v20190905) 50% 50% no-repeat;
                    position:absolute; left:0;
                    margin-top:-4px;
                }
    .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:736px){/* i6,i7,i8 Plus Landscape */
    .news__item{
        display:block;
        width:100%;
        max-height:auto;
        overflow:initial;
        margin-bottom:15px;
    }
    .news__item:nth-child(odd),
    .news__item:nth-child(even){
        padding-left:0;
    }
    .news__item:nth-child(n+3){
        margin-bottom:15px;
    }
}

/*-------------------------------------------
Info Container
-------------------------------------------*/
.info-container{
    padding:30px 30px 80px;
}
@media screen and (max-width:992px){
    .info-container{
        padding-left:20px; padding-right:20px;
    }
}
@media screen and (max-width:430px){/* i14 Pro Max */
    .info-container{
        padding-left:15px; padding-right:15px;
    }
}
@media screen and (max-width:320px){/* i5, SE */
    .info-container{
        padding-left:10px; padding-right:10px;
    }
}

/*-------------------------------------------
Welcome Message
-------------------------------------------*/
.welcome-container{
    float:left;
    width:60%;
    padding-right:40px;
}
@media screen and (max-width:736px){/* i6,i7,i8 Plus Landscape */
    .welcome-container{
        float:none;
        width:100%;
        padding-right:0;
    }
}

/*-------------------------------------------
Important Date
-------------------------------------------*/
.date-container{
    float:left;
    width:40%;
    padding-left:40px;
    /* display:none; */
}
    .important-date{
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        flex-direction:column;
    }
        .important-date__item{
            color:#fff;
            padding:30px 10px;
            text-align:center;
        }
        .important-date__item:nth-child(1){
            background-color:#e22d76;
        }
        .important-date__item:nth-child(2){
            background-color:#eb8a2a;
        }
            .important-date__item time{
                display:block;
                font-size:1.75rem;
                line-height:1;
                margin-bottom:10px;
            }
@media screen and (max-width:736px){/* i6,i7,i8 Plus Landscape */
    .date-container{
        float:none;
        width:100%;
        padding-left:0;
        margin-top:60px;
    }
        .important-date{
            flex-direction:row;
            margin:0 -15px;
        }
            .important-date__item{
                flex-basis:50%;
            }
                .important-date__item time{
                    font-size:1.5rem;
                }
}
@media screen and (max-width:568px){/* i5 Landscape */
    .important-date{
        flex-direction:column;
    }
        .important-date__item{
            flex-basis:100%;
        }
}
@media screen and (max-width:320px){/* i5, SE */
    .important-date{
        margin:0 -10px;
    }
}

/*-------------------------------------------
Download
-------------------------------------------*/
.download-container{
    float:left;
    width:40%;
    padding-left:40px;
}
    .download-list{
        list-style:none;
        margin:0;
        padding:0;
    }
        .download__item{
            text-align:center;
            color:#fff;
            font-size:1.75rem; line-height:1.2;
            position:relative;
        }
        .download__item:nth-child(1){
            background-color:#e22d76;
        }
        .download__item:nth-child(2){
            background-color:#eb8a2a;
        }
            .download__item::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:hover::after{
                opacity:.15;
            }
            .download__item a{
                display:block;
                color:#fff;
                padding:30px 15px;
                position:relative; z-index:2;
            }
@media screen and (max-width:736px){/* i6,i7,i8 Plus Landscape */
    .download-container{
        float:none;
        width:100%;
        padding-left:0;
        margin-top:60px;
    }
        .download__item{
            float:left;
            width:50%;
        }
}
@media screen and (max-width:430px){/* i14 Pro Max */
    .download__item{
        width:100%;
    }
}

/*-------------------------------------------
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-list{
        list-style:none;
        margin:0;
        padding:0;
    }
        .shortcut__item{
            float:left;
            width:25%;
            padding-left:30px;
            text-align:center;
        }
        .shortcut__item:first-child{
            padding-left:0;
        }
            .shortcut__link{
                display:block;
                margin:0 auto;
                border-radius:5px;
                background-color:#fff;
                padding:30px;
                color:#111;
                font-size:1.25rem;
                font-weight:700;
                line-height:48px;
                white-space:nowrap;
                transition:.2s;
            }
            .shortcut-list:hover .shortcut__link{
                opacity:.65;
            }
            .shortcut-list:hover .shortcut__link:hover{
                opacity:1;
            }
                .shortcut__link::before{
                    display:inline-block;
                    vertical-align:top;
                    content:"";
                    width:48px;
                    height:48px;
                    background-position:50% 50%;
                    background-repeat:no-repeat;
                    background-size:48px 48px;
                    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:992px){
    .shortcut-buttons{
        padding:60px 0;
    }
        .shortcut__item{
            padding-left:0;
        }
            .shortcut__link{
                line-height:1.2;
                padding:20px 10px;
                width:90%;
            }
                .shortcut__link::before{
                    display:block;
                    margin:0 auto 5px;
                }
}
@media screen and (max-width:568px){/* i5 Landscape */
    .shortcut__link{
        font-size:1rem;
    }
}
@media screen and (max-width:430px){/* i14 Pro Max */
    .shortcut-buttons{
        padding:40px 0;
    }
        .shortcut__item{
            width:50%;
            padding:12px 0;
        }
        .shortcut__item:nth-child(odd){
            padding-right:12px;
        }
        .shortcut__item:nth-child(even){
            padding-left:12px;
        }
            .shortcut__link{
                font-size:5vw;
                width:100%;
            }
}

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

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