.page_about{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color: #e4dfd2;
}

.page-about-banner{
    position: relative;
    width: 82%;
    height: 30vw;
    display: flex;
    flex-direction:row;
    align-items: center;
    margin-top: 16vw;
    margin-left: 9%;
    margin-right: 9%;
}

.about_banner{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.about_banner > .circle{
    position: relative;
    left: 0;
    margin-top: 2.5%;
    right: 0;
    bottom: 0;
    width: 2.65625vw;
    height: 2.65625vw;
    border-radius: 1.465vw;
    box-shadow: 2px 2px 6px 0 rgba(255, 111, 0, 0.6);
    background-color: #2e4565;
}

.video-module {
    width: 16.67vw;
    display: flex;
    flex-direction: column;
}

.banr_left{
    align-items: flex-start;
}

.banr_right{
    align-items: flex-end;
}

.banr_left > img, .banr_right>img{
    width: 16.67vw;
}

/*** video module style ***/

.bk_num{
    font-family: 'TimesNewRoman';
    font-size: 3.02083vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.03;
    letter-spacing: normal;
    text-align: left;
    color: #2e4565;
}

.icon_aboutus_2{
    margin-top: 17%;
}

.video_title{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.302084vw;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.195vw;
    text-align: left;
    color: #2e4565;
    margin-top: 8%;
    margin-bottom: 8%;
}

/*video overlay*/
.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.65);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 10;
    /*overflow-y: hidden;
    overflow-x: hidden;*/
    transition: 0.5s ease-in-out;
}

.overlay_content
{
    display: flex;
    flex-direction: row;
    width: 72%;
    height: 69%;
    margin: 10% 14% 0%;
    
}

.closebtn{
    width: 2.78rem;
    height: 5rem;
    margin-top: -1.2%;
    cursor: pointer;
}

.video_content{
    display: flex;
    width: 100%;
    height: 100%;
    margin-left: 2.6%;
}

.video_content iframe {
    width: 100%;
    height: 100%;
}

.information-block{
    position: relative;
    width: 82%;
    height: auto;
    display: flex;
    flex-direction:column;
    margin-top: 8vw;
    margin-left: 9%;
    margin-right: 9%;
}

.info-title{
    display: flex;
    flex-direction: column;
}

.info-title span{
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.2;
    font-stretch: normal;
    font-style: normal;
    text-align: left;
    color: #2e4565;
}

.ch-title{
    font-size: 3.385vw;
    font-weight: bold;
    letter-spacing: 0.5vw;
}

.en_title{
    font-size: 1.407vw;
    font-weight: 900;
    letter-spacing: 0.07vw
}

.block-deco{
    width: 82vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: solid 2px rgba(46, 69, 101, 0.7);
    margin: 3.32vw 0;
    padding-top: 1.041vw;
}

.deco-dot{
    width: 0.989vw;
    height: 0.989vw;
    border: solid 1.5px #2e4565;
    background-color: #2e4565;
    border-radius: 45%;
}

.deco-arrow{
    width: 0.5vw;
    height: 0.5vw;
    border: solid #2e4565;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.deco-section{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.9375vw;
    font-weight: bold;
    line-height: 0.06;
    letter-spacing: 0.140625vw;
    text-align: center;
    color: #2e4565;
}

.block-content{
    width: 82vw;
    display: flex;
    flex-direction: row;
}

.IPH-introduction .image{
    position: relative;
    border-radius: 2.5vw;
    margin-left: 5vw;
}

.IPH-introduction img{
    width: 34.8vw;
}

.texts, .en_text{
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: space-evenly;
}

.texts p{
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.82;
    text-align: left;
    color: #2e4565;
    font-size: 1.302083333vw; /*22 -> 25*/
    letter-spacing: 0.23vw;
    margin-bottom: 1.5vw;
    overflow-wrap: break-word;
}

.en_text p{
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.82;
    text-align: left;
    color: #2e4565;
    font-size: 1.302083333vw; /*22->25*/
    letter-spacing: 0.15vw;
    margin-bottom: 1.5vw;
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}

.texts-title div{
    font-family: 'Noto Sans TC', sans-serif;
    color: #2e4565;
    font-size: 1.40625vw;
    font-weight: bold;
    line-height: 1.82;
    letter-spacing: 0.28vw;
    margin-bottom: 1vw;
}

.iph-intro > .en_text{
    width: 40vw;
}


/* block 2 */

.IPH-purposeANDgoal .block-content{
    justify-content: space-between;
}

.IPH-purposeANDgoal .image{
    border-radius: 0;
}
.IPH-purposeANDgoal img{
    width: 26.19vw;
    height: 26.19vw;
}

/* block 3 */
.subject-introduction .block-content{
    align-items: flex-end;
}

.subject-introduction .image{
    position: relative;
    margin-left: 7vw;
    border-radius: 0;
}
.subject-introduction .image img{
    width: 29.0vw;
    height: 25.5vw;
}

.subject-intro > .en_text{
    width: 50vw;
}

/**past-supervisor**/

.supervisor{
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 7.8125vw;
}

.supervisor-title{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.supervisor-title span{
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.05;
    text-align: left;
    color: #2e4565;
}

.unit-title{
    font-size: 2.0833vw;
    letter-spacing: 0.3125vw;
}

.super-title{
    position: relative;
    margin-left: 0.5vw;
    font-size: 1.302083vw;
    letter-spacing: 0.195vw;
}

.en-supervisor-title{
    width: 55vw;
    font-size: 1.8vw;
    letter-spacing: 0.1vw;
}

.supervisor .texts{
    width: 14.5vw;
}

.supervisor .en_text{
    margin-left: 7vw;
}

.supervisor .texts p{
    font-size: 1.302083vw;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: 0.26vw;
    text-align: left;
    color: #2e4565;
}

#watchmore-1, #watchmore-2{
    font-size: 1.04167vw;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
}

.about-card {
    display: none;
}

.img-teachers{
    width: 10.6vw;
}

.img-teachers img {
    width: 10.6vw;
    height: auto;
}

@media (max-width: 1024px){
    .page-about-banner {
        margin-top: 15vw;
    }
    .supervisor .texts{
        width: 15.5vw;
    }
}

@media (max-width: 960px) {
    .bk_num {
        font-size: 29px;
    }

    .video_title {
        font-size: 12.5px;
        letter-spacing: 1.872px;
    }

    .about_banner > .circle {
        width: 25.5px;
        height: 25.5px;
        border-radius: 12.75px;
    }

    .info-title .ch-title {
        font-size: 32.5px;
    }
    
    .info-title .en_title {
        font-size: 13.504px;
        letter-spacing: .675px;
    }

    .texts p {
        font-size: 12.5px;
        letter-spacing: 2.208px;
        margin-bottom: 14.4px;
    }

    .IPH-introduction img {
        width: 251.424px;
    }

    .texts-title div {
        font-size: 13.5px;
        letter-spacing: 2.688px;
        margin-bottom: 9.6px;
    }

    .IPH-purposeANDgoal img {
        width: 251.424px;
        height: 251.424px;
    }

    .subject-introduction .image img {
        width: 278.4px;
        height: 244.8px;
    }

    .unit-title {
        font-size: 20px;
        letter-spacing: 3px;
    }

    .super-title {
        font-size: 12.5px;
        letter-spacing: 1.872px;
    }

    .supervisor .texts p {
        font-size: 12.5px;
        letter-spacing: 2.5px;
    }
    
    .deco-section {
        font-size: 9px;
        letter-spacing: 1.35px;
    }

    .en_text p{
        font-size: 12.5px;
    }
}



@media (max-width: 768px) {
    .page-about-banner {
        margin-top: 20vw;
    }
    
    .supervisor{
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .supervisor .texts{
        width: auto;
    }

    .supervisor > .en_text{
        margin-left: 0;
        margin-top: 3vw;
        width: auto;
    }
    
    .en-supervisor-title{
        width: auto;
        font-size: 2vw;
    }

    .block-content{
        width: auto;
        flex-direction: column;
    }

    .texts, .en_text, .iph-intro > .en_text, .subject-intro > .en_text{
        width: auto;
    }

    .texts p{
        margin-top: 2vw;
    }

    .IPH-introduction .image{
        margin-left: 0;
    }
}

@media (max-width: 480px){
    .page-about-banner {
        margin-top: 30vw;
    }
    
    .information-block{
        margin-top: 80px;
        width: 89.33vw;
    }

    .supervisor .texts{
        width: 32.5vw;
    }

    .overlay_content{
        flex-direction: column;
    }

    .bk_num{
        font-size: 5vw;
    }

    .supervisor > .en_text{
        margin-top: 3vw;
        margin-left: 0;
    }

    .en-supervisor-title{
        font-size: 2.5vw;
    }

    .supervisor > .texts{
        width: auto;
    }

    .video-module-container {
        display: none;
    }

    .about_banner > .circle {
        width: 8vw;
        height: 8vw;
        border-radius: 8vw;
        margin-top: 20px;
    }

    .info-title .ch-title {
        font-size: 6.6688vw;
    }

    .info-title .en_title {
        font-size: 3.733vw;
    }

    .block-deco {
        margin-top: 40px;
        margin-bottom: 40px;
        padding-top: 20px;
        width: 89.33vw;
    }

    .deco-dot {
        width: 4vw;
        height: 4vw;
        border-radius: 4vw;
    }

    .deco-arrow {
        width: 1.6vw;
        height: 1.6vw;
    }

    .deco-section {
        font-size: 3.733vw;
    }

    .block-content {
        width: 89.33vw;
    }

    .block-content.iph-intro {
        flex-direction: column-reverse;
    }

    .IPH-introduction .image {
        width: 89.33vw;
        height: 60vw;
    }

    .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
    }

    .IPH-introduction .texts {
        margin-top: 40px;
    }

    .texts p {
        font-size: 3.733vw;
    }

    .texts-title div {
        font-size: 4.535vw;
    }

    .supervisor .texts p {
        font-size: 3.733vw;
    }

    .unit-title {
        font-size: 4.535vw;
    }

    .super-title {
        font-size: 3.733vw;
    }

    .supervisor-title {
        margin-bottom: 40px;
    }

    .IPH-purposeANDgoal .bt-watchmore img {
        width: 7.2vw;
        height: 5.33vw;
    }

    .subject-introduction .bt-watchmore img {
        width: 7.2vw;
        height: 5.33vw;
    }

    .about-card {
        display: block;
        width: 89.333vw;
        box-shadow: 15px 15px 40px 0 rgb(255 111 0 / 30%);
        border-radius: 25px;
    }

    .about-card .card-title {
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 4.535vw;
        font-weight: bold;
        line-height: 1.47;
        letter-spacing: 2.55px;
        text-align: left;
        color: #2e4565;
        margin: 40px 30px;
    }

    .about-card .card-img {
        width: 73.07vw;
        margin-left: auto;
        margin-right: auto;
    }

    .about-card .card-img img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .about-card .card-readmore {
        margin: 30px auto;
        width:fit-content;
    }

    .subject-introduction .about-card {
        margin-top: 40px;
    }

    .subject-introduction .image img {
        width: 89.333vw;
        height: auto;
    }

    .img-teachers {
        margin-left: auto;
        margin-right: auto;
        width: 51.87vw;
        height: auto;
    }

    .img-teachers img {
        width: 51.87vw;
        height: auto;
    }
}