@charset "UTF-8";
/*===========================================
Welcome
===========================================*/
:root{

}
main{
    background-color:#fff;
}
/*-------------------------------------------
hero
-------------------------------------------*/
.hero{
    background-color:#d89ba0;
    background-image:url(../images/hero_pic.jpg);
    background-position:center top;
    background-repeat:repeat-x;
    color:#fff;
    font-family:var(--hero-font-family);
    min-height:100vh;
    min-height:100dvh;
    max-height:970px;
    height:max(100dvh, 600px);
    position:relative; z-index:0;
    overflow:hidden;
}
    .hero__title{
        aspect-ratio:120 / 16;
        margin:0;
        background-color:#F3C0C4;
        width:49%;
        position:absolute; top:17%; left:0; z-index:5;
    }
        .hero__title span{
            opacity:0;
            pointer-events:none;
        }
        .hero__title::before{
            content:"";
            display:block;
            aspect-ratio:116 / 20;
            background:url(../images/ASCI_TRC2027.svg) no-repeat center bottom;
            background-size:contain;
            width:94%;
            position:absolute; left:50%; bottom:10%;
            transform:translateX(-50%);
        }
    .hero__date{
        aspect-ratio:20 / 16;
        background:url(../images/hero_date.svg?v=20260506) no-repeat;
        background-size:contain;
        width:18%;
        position:absolute; top:52%; left:12%; z-index:4;
        transform:translateY(-50%);
    }
        .hero__date span{
            opacity:0;
            pointer-events:none;
        }
        .hero__date .exhibits{
            font-size:1.5rem;
            line-height:1.2;
            position:absolute; top:calc(100% + 20px); left:50%;
            transform:translateX(-50%);
            white-space:nowrap;
            text-align:center;
        }
            .hero__date .exhibits span{
                opacity:1;
            }
    .hero__main{
        aspect-ratio:50 / 47;
        width:50%;
        background:url(../images/hero_heart_compressed.png) no-repeat left top;
        background-size:contain;
        position:absolute; top:8%; left:45%; z-index:3;
        pointer-events:none;
    }
    .hero__text{
        position:absolute; bottom:3%; left:2%; z-index:4;
    }
        .hero__text h3{
            margin:0;
            font-size:1.4vw;
            font-weight:400;
            line-height:1.2;
        }
            .hero__text .trc2027{
                margin-top:5px;
            }
    .hero__bg__yellow{
        aspect-ratio:1;
        width:22%;
        background:url(../images/hero_bg_yellow_compressed.png) no-repeat center;
        background-size:contain;
        position:absolute; bottom:-7%; left:3.15%; z-index:1;
        opacity:.4;
        pointer-events:none;
    }
    .hero__bg__white{
        aspect-ratio:50 / 47;
        width:39.5%;
        background:url(../images/hero_bg_white_compressed.png) repeat left top;
        background-size:contain;
        position:absolute; top:0; right:0; z-index:0;
        height:100%;
        opacity:.4;
        pointer-events:none;
    }
    .hero__copyright{
        color:#000;
        font-size:.75rem;
        position:absolute; bottom:10px; right:10px; z-index:6;
        opacity:.4;
    }
@media screen and (max-width:1680px){
    .hero__title{
        width:42%;
        top:21%;
    }
    .hero__date{
        width:16%;
        top:52%;
    }
    .hero__main{
        width:45%;
        top:12%; left:38.4%;
    }
    .hero__text h3{
        font-size:1.25vw;
    }
}
@media screen and (min-width:1440px) and (max-height:640px){
    .hero__title{
        width:45%;
        top:13%;
    }
    .hero__date{
        top:50%;
    }
    .hero__main{
        width:48%;
        top:2%; left:41%;
    }
}
@media screen and (max-width:1440px){
    .hero__title{
        width:50%;
        top:16%;
    }
    .hero__date{
        width:22%;
        top:50%;
    }
    .hero__main{
        width:52%;
        top:9%; left:46%;
    }
    .hero__text{
        bottom:5%;
    }
        .hero__text h3{
            font-size:1.5vw;
        }
}
@media screen and (max-width:1024px){
    .hero__title{
        aspect-ratio:30 / 16;
        width:40%;
        top:5.8%;
    }
        .hero__title::before{
            aspect-ratio:110 / 65;
            background-image:url(../images/ASCI_TRC2027_p.svg);
        }
    .hero__date{
        top:52%; left:7%;
    }
        .hero__date .exhibits strong{
            display:block;
        }
    .hero__main{
        width:62%;
        top:16%; left:35%;
    }
    .hero__bg__yellow{
        width:28%;
        left:-6%;
        opacity:.7;
    }
    .hero__bg__white{
        opacity:.7;
    }
    .hero__text h3{
        font-size:2vw;
        text-shadow:0 2px 8px rgba(0,0,0,.3);
    }
}
@media screen and (max-width:820px) and (min-height:640px){
    .hero__title{
        top:10%;
    }
    .hero__date{
        width:24%;
        top:50%;
    }
    .hero__main{
        width:62%;
        top:18.5%;
    }
    .hero__text{
        bottom:10%;
    }
        .hero__text h3{
            font-size:2.25vw;
        }
    .hero__copyright{
        font-size:.7rem;
        left:10px; right:auto;
    }
}
@media screen and (max-width:820px) and (orientation:portrait){/* iPad Air and Portrait */
    .hero{
        background-image:url(../images/hero_pic_sp.jpg);
    }
        .hero__title{
            background:none;
            aspect-ratio:130 / 16;
            width:85%;
            top:auto; bottom:40px; left:auto; right:20px;
        }
            .hero__title::before{
                background-image:url(../images/ASCI_TRC2027.svg);
                width:100%;
                bottom:0;
            }
        .hero__date{
            width:30%;
            top:30px; left:20px;
            transform:none;
        }
        .hero__main{
            width:100%;
            top:46%; left:0%;
            transform:translateY(-50%);
            aspect-ratio:15 / 17;
            background-size:84% auto;
            background-position:center;
        }
        .hero__text{
            top:20px; bottom:auto; right:20px; left:auto;
        }
            .hero__text{
                transform:rotate(90deg) translateX(100%);
                transform-origin:right top;
            }
        .hero__bg__yellow{
            width:40%;
            bottom:8%;
        }
        .hero__bg__white{
            /* aspect-ratio:10 / 14; */
            width:48%;
            /* background-image:url(../images/hero_bg_white_text_compressed.png); */
            /* background-position-x:right; */
            background-repeat:no-repeat;
            right:70px;
        }
        .hero__copyright{
            left:auto; right:10px;
            opacity:.2;
        }
}
@media screen and (max-width:768px){
    .hero__date{
        width:26%;
        left:60px;
    }
        .hero__date .exhibits{
            font-size:1.25rem;
        }
    .hero__main{
        background-size:75% auto;
        background-position-x:62%;
        top:50%;
    }
    .hero__text h3{
        font-size:2vh;
    }
    .hero__bg__white{
        width:48%;
        right:80px;
    }
}
@media screen and (max-width:667px) and (orientation:landscape){/* i6, i7, i8 Landscape */
    .hero{
        height:100svh;
        height:calc(var(--vh, 1vh) * 100);
        transition:height 0s !important;
    }
        .hero__title{
            aspect-ratio:120 / 16;
            width:52%;
            top:12%;
        }
            .hero__title::before{
                background-image:url(../images/ASCI_TRC2027.svg);
            }
        .hero__date{
            width:18%;
            top:44%; left:12%;
        }
            .hero__date .exhibits{
                font-size:1.125rem;
                top:calc(100% + 10px);
            }
        .hero__main{
            width:64%;
            top:5%; left:38%;
            background-size:contain;
        }
        .hero__text h3{
            font-size:1rem;
        }
}
@media screen and (max-width:667px) and (orientation:landscape){/* i6, i7, i8 Landscape */
    .hero__bg__white{
        right:0;
    }
}
@media screen and (max-width:576px){
    .hero__title{
        top:8%;
    }
    .hero__date{
        top:38%;
    }
    .hero__main{
        top:10%;
    }
    .hero__text{
        font-size:2.5vw;
        top:auto; bottom:50px;
    }
}
@media screen and (max-width:440px){/* i16-17 Pro Max */
    .hero{
        height:100svh;
        height:calc(var(--vh, 1vh) * 100);
        transition:height 0s !important;
    }
        .hero__title{
            background:none;
            width:60%;
            top:auto; bottom:40px; left:auto; right:20px;
        }
            .hero__title::before{
                background-image:url(../images/ASCI_TRC2027_p.svg);
                width:100%;
                bottom:0;
            }
        .hero__date{
            width:30%;
            top:30px; left:20px;
            transform:none;
        }
            .hero__date .exhibits{
                font-size:4vw;
            }
                .hero__date .exhibits span{
                    display:block;
                    font-size:1.5rem;
                }
        .hero__main{
            width:100%;
            top:46%; left:0%;
            transform:translateY(-50%);
            aspect-ratio:15 / 17;
            background-size:110% auto;
            background-position:left 15px center;
        }
        .hero__text{
            background-color:rgba(var(--primary-light-rgb),.5);
            padding:3px 5px;
            bottom:auto; top:15px; right:7px;
        }
            .hero__text h3{
                text-shadow:0px 0px 8px rgba(0,0,0,.4);
                white-space:nowrap;
            }
                .hero__text .trc2027{
                    margin-top:2px;
                }
        .hero__bg__yellow{
            width:54%;
            bottom:16%;
            opacity:.7;
        }
        .hero__bg__white{
            aspect-ratio:10 / 18;
            width:45%;
            background-image:url(../images/hero_bg_white_text_compressed.png);
            background-position-x:left;
            background-repeat:no-repeat;
            background-size:64vw auto;
            right:7vh;
        }
        .hero__copyright{
            transform:scale(.85);
            transform-origin:right;
        }
}
@media screen and (max-width:375px) and (max-height:667px){/* i6, i7, i8, SE, iX, XS, i11 Pro, i12-i13 Mini */
    .hero__main{
        background-size:95% auto;
        background-position:center;
    }
    .hero__bg__yellow{
        width:46%;
        bottom:15%;
    }
}
@media screen and (max-height:600px) and (orientation:portrait){
    .hero{
        min-height:600px; /* 防禦性設計：當視窗被拉得太扁時，強制設定一個最小高度，避免內容重疊 */
        height:auto;
    }
        .hero__title{
            top:auto; bottom:60px;
        }
}
@media screen and (max-height:360px){
    .hero{
        min-height:360px; /* 防禦性設計：當視窗被拉得太扁時，強制設定一個最小高度，避免內容重疊 */
    }
        .hero__bg__yellow{
            bottom:15%;
        }
}

/*-------------------------------------------
Please Scroll
-------------------------------------------*/
.please__scroll{
    display:block;
    position:absolute; left:50%; z-index:2;
    pointer-events:none;
}
    .please__scroll::before{
        content:"";
        display:inline-block;
        background-color:var(--secondary-color);
        /* background-color:#fff; */
        width:1px;
        height:100px;
        position:absolute; bottom:-50px;
        opacity:.2;
    }
    .please__scroll::after{
        content:"";
        display:inline-block;
        background-color:var(--secondary-color);
        /* background-color:#fff; */
        border-radius:10px;
        width:7px;
        height:15px;
        position:absolute; bottom:50px;
        transform:translateX(-50%);
        margin-left:1px;
        animation:scrollAni 2s 0s infinite;
    }
    .please__scroll span{
        color:var(--secondary-color);
        /* color:#fff; */
        font-size:.75rem;
        line-height:1;
        position:absolute; bottom:50px;
        margin-left:2px;
        transform:rotate(90deg);
        opacity:0;
        animation:scrollAni 2s 0s infinite;
    }
    @keyframes scrollAni{
        0% { opacity:0; bottom:50px;}
        20% { opacity:1; }
        80% { opacity:1; }
        100% { opacity:0; bottom:-50px; }
    }
@media screen and (max-width:1024px){
    .please__scroll{
        left:auto; right:40px;
    }
}
@media screen and (max-width:820px) and (orientation:portrait){/* iPad Air and Portrait */
    .please__scroll{
        left:15px;
        margin-top:-20px;
    }
        .please__scroll span{
            font-size:.75rem;
        }
}

/*-------------------------------------------
Conference Info.
-------------------------------------------*/
.conference__info{
    --section-py:100px;
    /* background-color:var(--primary-color); */
    background-color:rgba(var(--primary-rgb),.1);
}
    .home__title{
        margin-top:0;
        background:var(--gradient-color);
        font-size:3rem;
        font-family:var(--title-font-family);
        font-weight:700;
        line-height:1;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
        .home__title::after{
            content:"";
            display:block;
            background:var(--gradient-color2);
            height:2px;
            width:30%;
            margin:10px auto 0;
            
        }
@media screen and (max-width:1024px){
    .home__title::after{
        width:45%;
    }
}
@media screen and (max-width:768px){
    .home__title{
        font-size:2.5rem;
    }
        .home__title::after{
            width:50%;
        }
}
@media screen and (max-width:440px){/* i16-17 Pro Max */
    .home__title{
        font-size:9vw;
    }
        .home__title::after{
            width:80%;
        }
}

/*-------------------------------------------
Place
-------------------------------------------*/
.place{
    background-color:var(--primary-color);
    padding:var(--section-py) 0;
    position:relative;
    color:#fff;
}
    .place::before{
        content:"";
        display:block;
        background:url(../images/congress_venue.jpg) center/cover no-repeat;
        opacity:.2;
        position:absolute; top:0; left:0; z-index:0;
        height:100%;
        width:100%;
        pointer-events:none;
    }
    .place::after{
        content:"";
        display:block;
        background:url(../images/hero_bg_texture.png) center/contain;
        opacity:.3;
        position:absolute; top:0; left:0; z-index:1;
        height:100%;
        width:100%;
        pointer-events:none;
    }
    .place__inner{
        position:relative; z-index:2;
    }
        .place .home__title{
            color:#fff;
            -webkit-text-fill-color:#fff;
            text-align:center;
        }
        .place p{
            font-size:1.5rem;
            text-align:center;
        }
            .place a{
                display:inline-block;
                color:#fff;
                outline:0;
            }
            .place a:focus,
            .place a:hover{
                opacity:.65;
            }
                .place a::before{
                    display:inline-block;
                    aspect-ratio:1;
                    content:"";
                    background:url(../images/icon_gmap.png) no-repeat center / contain;
                    width:32px;
                    margin-right:3px;
                    vertical-align:-.15em;
                }
@media screen and (max-width:768px){
    .place p span{
        display:block;
    }
        .place a::before{
            display:block;
            margin:0 auto 3px;
            vertical-align:middle;
        }
}
@media screen and (max-width:440px){/* i16-17 Pro Max */
    .place p{
        font-size:5vw;
    }
}

/*-------------------------------------------
Important Dates
-------------------------------------------*/
.important__dates{
    font-size:1.125rem;
    padding:var(--section-py) 0;
}
    .important__dates .home__title{
        text-align:center;
    }
    .important__dates__inner{
        display:flex;
        flex-wrap:wrap;
        /* justify-content:space-between; */
        justify-content:space-around;
    }
        .dates__item{
            flex:0 0 35%;
        }
            .dates__item h4{
                margin:0;
                font-family:var(--default-font-family);
                font-size:2rem;
                text-align:center;
            }
            .dates__item ul{
                list-style:none;
                margin:0;
                padding:0;
                font-size:1.5rem;
            }
                .dates__item ul li{
                    position:relative;
                    padding:15px 0;
                    border-bottom:1px solid rgba(var(--secondary-rgb),.2);
                }
                .registration ul li{
                    /* border-bottom:1px solid rgba(var(--blue-rgb),.4); */
                }
                .abstracts ul li{
                    /* border-bottom:1px solid rgba(var(--red-rgb),.4); */
                }
                    .dates__item .date{
                        position:absolute; right:0;
                    }
                    .registration .date{
                        /* color:var(--light-blue); */
                    }
                    .abstracts .date{
                        /* color:var(--light-red); */
                    }
@media screen and (max-width:1024px){
    .dates__item{
        flex-basis:40%;
    }
        .dates__item .date{
            display:block;
            position:static;
            line-height:1;
            text-align:left;
        }
}
@media screen and (max-width:768px){
    .important__dates__inner {
        justify-content:space-between;
    }
        .dates__item{
            flex-basis:45%;
        }
}
@media screen and (max-width:576px){
    .dates__item{
        flex-basis:100%;
    }
    .dates__item.abstracts{
        margin-top:40px;
    }
        .dates__item ul li{
            padding:10px 0;
        }
}
@media screen and (max-width:440px){/* i16-17 Pro Max */
    .dates__item h4{
        font-size:6.5vw;
    }
        .dates__item ul{
            font-size:5vw;
        }
            .dates__item ul li{
                padding:8px 0;
            }
                .dates__item .date{
                    font-size:5.5vw;
                }
}

/*-------------------------------------------
Organizing Rosters
-------------------------------------------*/
.organizing__rosters{
    margin-top:100px;
    display:none;
}
    .organizing__rosters__inner{
        border:2px solid rgba(var(--yellow-rgb),.6);
        border-color:rgba(255,255,255,.8);
        list-style:none;
        margin:0;
        padding:5px;
        display:flex;
        flex-wrap:wrap;
    }
        .rosters__item{
            border:1px solid rgba(var(--yellow-rgb),.6);
            flex:1;
            padding:40px 30px;
        }
        .rosters__item:nth-child(n+2){
            border-left-color:transparent;
        }
            .rosters__item .home__title{
                color:var(--yellow);
                font-size:1.5rem;
                margin-bottom:.75em;
            }
            .rosters__item ul{
                list-style:none;
                margin:0;
                padding:0;
                font-size:1.125rem;
                line-height:1.2;
            }
                .rosters__item ul li{
                    margin-top:15px;
                }
@media screen and (max-width:1024px){
    .organizing__rosters{
        margin-top:70px;
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .rosters__item{
        flex-basis:100%;
        padding:30px;
    }
    .rosters__item:nth-child(n+2){
        border-left-color:rgba(var(--yellow-rgb),.6);
        border-top-color:transparent;
    }
}
@media screen and (max-width:440px){/* i16-17 Pro Max */
    .organizing__rosters{
        margin-top:50px;
    }
        .rosters__item{
            font-size:1.125rem;
            padding:30px 20px;
        }
            .rosters__item .home__title{
                font-size:1.5rem;
            }
            .rosters__item ul{
                font-size:1rem;
            }
}

/*-------------------------------------------
Participate
-------------------------------------------*/
.participate{
    background-color:#fff;
    padding:var(--section-py) 0;
    position:relative;
}
    .participate__bg{
        position:absolute; top:0; left:0;
        width:100%;
        height:100%;
        overflow:hidden;
    }
        .participate__bg::before,
        .participate__bg::after{
            content:"";
            display:block;
            background-color:var(--primary-color);
            -webkit-mask-repeat:no-repeat;
            -webkit-mask-position:center center;
            -webkit-mask-size:contain;
                    mask-repeat:no-repeat;
                    mask-position:center center;
                    mask-size:contain;
            aspect-ratio:1 / 1;
            width:400px;
            position:absolute; z-index:0;
            transform:rotate(-10deg);
            opacity:.08;
            pointer-events:none;
        }
        .participate__bg::before{
            -webkit-mask-image:url(../images/icon-mail_white.svg);
                    mask-image:url(../images/icon-mail_white.svg);
            bottom:-30%;
        }
        .participate__bg::after{
            -webkit-mask-image:url(../images/icon-at_white.svg);
                    mask-image:url(../images/icon-at_white.svg);
            top:-30%; right:0;
        }
    .participate__inner{
        position:relative; z-index:3;
        text-align:center;
        transform:none;
    }
        .participate__desc{
            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__bg::before{
        left:-5%;
    }
    .participate__bg::after{
        right:-4%;
    }
}
@media screen and (max-width:1024px){
    .participate__bg::before,
    .participate__bg::after{
        width:300px;
    }
    .participate__bg::before{
        bottom:-13%;
    }
    .participate__bg::after{
        top:-13%;
    }
}
@media screen and (max-width:768px){
    .participate__bg::before,
    .participate__bg::after{
        width:200px;
    }
    .participate__bg::before{
        left:-8%; bottom:-20%;
    }
    .participate__bg::after{
        right:-8%; top:-20%;
    }
}
@media screen and (max-width:440px){/* i16-17 Pro Max */
    .participate{
        padding:60px 0;
    }
        .participate__desc{
            font-size:5.5vw;
            text-align:left;
        }
        .participate__inner form{
            width:100%;
        }
}