@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');

/* 主色红：#E00000
主色黑
深灰：#666666 */

*{
    font-family: 'Golos Text',sans-serif;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    text-decoration: none;
}


.header{

    .upper{
        background-image: url("images/header.png");
        background-size: cover;
        background-repeat: no-repeat;
        width:100%;
        aspect-ratio: 18/1;
 
    }

    .lower{
        display: flex;
        background: white;
        align-items: center;
        justify-content: space-between;
        padding: 0 7%;
        border-bottom: 1px solid #999999;

        .logo{
            display: flex;
            padding-top: 2px;

            img{
            width: 42px;
            height: 42px;
        }
        }
        
        
        p{
        font-size: 34px;
        font-weight: 800;
        color:#222;
        display: flex;
        letter-spacing: -2px;
        font-style: italic;
        white-space: nowrap;
        padding-right: 20px;
        }
        
        .navbar{
        white-space: nowrap;

        a{
            font-size: 18px;
            font-weight: 700;
            color:black;
            padding: 9px 2px;
            margin: 0 2px ;


            &:hover{
                border-bottom: 5px solid #E00000;
            }
        }
        }
    }
        #menu-btn{
            display: none;

            @media (max-width: 1100px) {
                display: inline-block; /* 媒体查询内嵌 */
                font-size: 24px;}
        }

}


section{
    margin: 20px 10% 0 10%;


    h1{
        font-size: 30px;
        font-weight: 600;
        margin: 5px 0;
    }

    p{
        font-size: 18px;
        line-height: 28px;
        text-align: justify;
    }
    
    h2{
            color:#E00000;
            font-weight: 600;
            margin-bottom:5px;
            margin-top:5px ;
        }
    h3{
        margin: 3px 0;
    }

    .research-img{
        text-align: center;
    }

    .paragraph{
        text-indent: 36px;
    }

    /* box with border-top */
    .upborder-box{
        border-top: solid #666666 1.5px;
        margin-top: 20px;
        padding-top: 5px;

        ul{
            padding-left: 30px;        
        } 
        
        a{
            text-decoration: underline;
            font-size: 18px;
            line-height: 30px;
            }
        
    }

    .gallery{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 40px;
        /* overflow: auto;
		text-align: center;
         */
        
        div{
                /* display: inline-block; */
				/* margin:20px;
				width:400px; */
                width: 100%;
                }

        img{
            width: 100%;
            height: 280px;
            object-fit: cover;
            max-width: 400px;
        }

    }

    .people{
        display: grid;
        gap: 50px;
        margin-top: 10px;

        .people-box{
            width: 100%;
        }

        img{
            width: 100%;
            height: 300px;
            object-fit: cover;
            max-width: 230px;
        }
    }





    /* box with border-bottom */
    .bottomborder-box{
        border-bottom: solid #666666 1.5px;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-bottom: 20px;

        }
    }

    
.map{
        text-align: center;
    }




/* Home page carousel */
.shell{
    margin:0 auto;
    width: 100%;
    aspect-ratio: 2/1;
    position: relative;
    overflow-x: hidden;

    .images{
        width: 500%;
        height: 100%;
        display: flex;
        position: absolute;
        left: 0;
        transition: 0.2s;
        list-style: none;

        .img{
            width: 100%;
            aspect-ratio: 2/1;
            background-size: cover;
            object-fit: cover;

            &:nth-child(1){
                background-image: url("images/Home1.png");
            }

            &:nth-child(2){
                background-image: url("images/Home2.png");
            }

            &:nth-child(3){
                background-image: url("images/Home3.jpg");
            }

            &:nth-child(4){
                background-image: url("images/Home4.jpg");
            }

            &:nth-child(5){
                background-image: url("images/Home5.jpg");
            }
        }
    }

    .button{
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        user-select: none;

        .button-left, .button-right{
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            padding: 0 10px;
            font-size: 40px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;

        }
    }
}



.footer {
    margin-top: 30px;
    background-color:black;
    color: white;
    font-size: 15px;
    padding: 20px 0;
    text-align: center;

    a{
        text-decoration: underline;
        color: white;
    }
}



/* media query for simple Responsive design */
@media (max-width: 1100px) {
    .upper ul > :nth-child(1) {display:none;}
    .upper ul > :nth-child(2) {display:none;}

    .header{
        .lower{
            .navbar {
            position: absolute;
            right:90px;
            top: -400%;
            z-index: 100;
            width: 120px;
            background-color: black;
            align-items: center;
            padding: 5px;


            &.active{
                top: 110px;
                right:7%;
            }

            a{
                font-size: 18px;
                font-weight: 700;
                display: block;
                color: white;
            }
            }}

        .logo{
            display: none;
        }
    }
}



@media screen and (min-width: 2000px) {
  .people {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media screen and (max-width: 2000px) and (min-width: 1600px) {
  .people {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 1600px) and (min-width: 1200px) {
  .people {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 1200px) and (min-width: 900px) {
  .people {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) and (min-width: 550px) {
  .people {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 549px) {
  .people {
    grid-template-columns: repeat(1, 1fr);
  }
}