.about-box{

    width: 100%;

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    position: relative;

    margin-top: 100px;

    min-height: calc(100vh - 100px);

    overflow: hidden;

}

.about-box .accesskey{

    position: absolute;

    top: 0;

    left: 0;

    color: transparent;

}

.about-menu-box{

    width: 320px;

    display: block;

    box-sizing: border-box;

    overflow: hidden;

    background-color: #fafafa;

    box-sizing: border-box;

    padding: 55px 0;

}

.about-menu {

    box-sizing: border-box;

    padding-left: 60px;

    position: relative;

    margin-bottom: 20px;

}

.about-menu::before{

    content: '';

    width: 100%;

    height: 80px;

    position: absolute;

    top: -15px;

    left: -20px;

    background-color: #ffea00;

    opacity: 0;

    transition: all .3s linear;

}

.about-menu::after{

    content: '';

    width: 0%;

    height: 4px;

    position: absolute;

    top: 45px;

    left: -10px;

    background-color: #000;

    opacity: 0;

    transition: opacity .3s linear, width .3s linear, top .0s 1s linear;

}

.about-menu-title span{

    font-family: 'Noto Sans TC';

    font-weight: 500;

    font-size: 1.125em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 30px;

    margin-bottom: 10px;

    display: inline-block;

    position: relative;

    z-index: 1;

}

.about-menu-title span::after{

    content: '';

    position: absolute;

    top: calc(50% - 4px);

    left: -20px;

    width: 8px;

    height: 8px;

    background-color: #000;

}

.about-menu ul{

    display: block;

}

.about-menu ul li a{

    position: relative;

    display: inline-block;

}

.about-menu ul li a>span{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    font-size: 1em;

    letter-spacing: 0.06em;

    color: #666;

    line-height: 36px;

    position: relative;

    z-index: 1;

    transition: all .3s linear;

}

.about-menu ul li a::after{

    content: '';

    width: 0%;

    height: 6px;

    background-color: #ffea00;

    position: absolute;

    bottom: 7px;

    left: 0;

    opacity: 0;

    transition: all .3s linear;

}



.about-right-box{

    width: calc(100% - 320px);

}





/* present */

.present-box{

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 55px 0;

}

.present-title-box{

    display: inline-block;

    position: relative;

}

.present-title-box::after{

    content: '';

    width: 100%;

    height: 8px;

    background-color: #ffea00;

    position: absolute;

    bottom: -2px;

    left: 0;

    -webkit-print-color-adjust: exact;

}

.present-title-box span{

    font-family: 'Noto Sans TC';

    font-weight: 700;

    font-size: 1.5em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 36px;

    position: relative;

    z-index: 1;

}

.present-info-box{

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    margin-top: 50px;

}

.present-img-box{

    width: 200px;

    height: calc((600 / 460) * 200px);

}

.present-text-box{

    width: calc(100% - 200px);

    box-sizing: border-box;

    padding-left: 120px;

}

.present-info-name-box{

    margin-bottom: 40px;

}

.present-info-name-box p{

    font-family: 'Noto Sans TC';

    font-weight: 700;

    font-size: 2em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 36px;

}

.present-info-name-box span{

    font-family: 'roboto';

    font-weight: 300;

    font-size: 1.125em;

    letter-spacing: 0.06em;

    color: #666;

    line-height: 36px;

    margin-top: 5px;

    display: block;

}

.present-info{

    box-sizing: border-box;

    padding: 10px 0;

}

.present-text-name{

    position: relative;

    box-sizing: border-box;

    padding: 0 30px;

    padding-bottom: 15px;

    border-bottom: 6px solid #000;

}

.present-text-name p{

    font-family: 'Noto Sans TC';

    font-weight: 500;

    font-size: 1.5em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 36px;

}

.present-text-name::after{

    content: '';

    width: 15px;

    height: 15px;

    background-color: #ffea00;

    position: absolute;

    top: 10px;

    left: 2px;

    transform: rotate(15deg);

}

.present-text{

    box-sizing: border-box;

    padding: 15px 0;

}

.present-text p{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    font-size: 1em;

    letter-spacing: 0.06em;

    color: #666;

    line-height: 36px;

}





/* previous */

.previous-other-box{

    margin-top: 80px;

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    flex-wrap: wrap;

}

.previous-other{

    width: 398px;

    display: inline-block;

    vertical-align: top;

    background-color: #f5f5f5;

    margin-right: 3px;

}

.previous-other:nth-child(3n){

    margin-right: 0;

}

.previous-other:nth-child(n + 4){

    margin-top: 3px;

}

.previous-other-img{

    width: 100%;

    height: 400px;

    display: block;

    overflow: hidden;

}

.previous-other-name-box{

    width: 100%;

    height: 100px;

    display:         flex;

    display: -webkit-flex;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: column;

    box-sizing: border-box;

    padding: 0 55px;

}

.previous-other-ch{

    position: relative;

}

.previous-other-ch p{

    font-family: 'Noto Sans TC';

    font-weight: 500;

    font-size: 1.5em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 26px;

}

.previous-other-ch::after {

    content: '';

    width: 15px;

    height: 15px;

    background-color: #ffea00;

    position: absolute;

    top: 6px;

    left: -32px;

    transform: rotate(15deg);

}

.previous-other-en{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    font-size: 1em;

    letter-spacing: 0.06em;

    color: #666;

    line-height: 26px;

}



/* introduction */

.introduction-box{

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 55px 0;

}

.introduction-text-box{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    font-size: 1.125em;

    letter-spacing: 0.06em;

    color: #333;

    line-height: 36px;
    margin-top: 30px;

}
.introduction-text-box p{
    margin-top: 10px;
}
.introduction-text-box img{

    margin: 50px 0;

}

.introduction-fixed-box{

    position: absolute;

    right: 5vw;

    top: 55px;

}

.introduction-fixed{

    width: 43px;

    height: 43px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: column;

    border-radius: 50%;

}

.introduction-fixed:nth-child(n + 2){

    margin-top: 20px;

}

.introduction-fixed:nth-child(2){

    background-color: #dddddd;

}



/* research */

.research-box{

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 55px 0;

}

.research-tag-all-box{

    width: 100%;

    position: relative;

    padding-right: 120px;

    margin-top: 80px;

    box-sizing: border-box;

    border-bottom: 1px solid #d1d1d1;

}

.research-tag-box{

    width: 100%;

    height: 60px;

    overflow: hidden;

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    flex-wrap: wrap;

}

.research-tag{

    font-family: 'roboto';

    font-weight: 300;

    font-size: 1.125em;

    color: #000;

    letter-spacing: 0.06em;

    line-height: 60px;

    width: 120px;

    position: relative;

    text-align: center;

}

#public_service-volunteer .research-tag{

    font-family: 'Noto Sans TC';

}

.research-tag::after{

    content: '';

    width: 0%;

    height: 6px;

    display: block;

    position: absolute;

    bottom: 0;

    left: 0;

    background-color: #ffea00;

    -webkit-print-color-adjust: exact;

    transition: all .3s linear;

}

.research-tag-select-box{

    width: 120px;

    height: 60px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: column;

    position: absolute;

    right: 0;

    top: 0;

    cursor: pointer;

}

.research-tag-select-box::after{

    content: '';

    width: 0;

    height: 0;

    display: block;

    border-top: 12px solid #000;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

}

.rwd-research-tag-box{

    display: none;

}

.research-info-box{

    display: block;

}

.research-info{

    width: 100%;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: row;

    margin-top: 50px;

    border-top: 1px solid #d1d1d1;

    border-right: 1px solid #d1d1d1;

}

.research-info-left,

.research-info-right{

    width: 50%;

}

.research-info-list{

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

}

.research-info-list-title{

    width: 120px;

    min-height: 60px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: row;

    font-size: 0.875em;

    letter-spacing: 0.06em;

    line-height: 26px;

    color: #000;

    box-sizing: border-box;

    border: 1px solid #d1d1d1;

    border-top: none;

    font-family: 'Noto Sans TC';

    font-weight: 500;

    background-color: #f5f5f5;

}

.research-info-list-title.title-year{

    font-family: 'roboto';

    font-weight: 700;

}

.research-info-list-text-box{

    width: calc(100% - 120px);

}

.research-info-list-text{

    width: 100%;

    min-height: 60px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    flex-direction: row;

    font-size: 0.875em;

    letter-spacing: 0.06em;

    line-height: 26px;

    color: #666;

    box-sizing: border-box;

    padding-left: 23px;

    padding-right: 10px;

    border-bottom: 1px solid #d1d1d1;

    font-family: 'Noto Sans TC';

    background-color: #f9f9f9;

}

.research-info-list-text-form span{

    color: #d1d1d1;

    margin: 0 20px;

}

.research-info-left .research-info-list:nth-child(1)  .research-info-list-title,

.research-info-right .research-info-list:nth-child(1)  .research-info-list-title,

.research-info-left .research-info-list:nth-child(1)  .research-info-list-text{

    min-height: 120px;

}

#about_researchers .research-info{

    margin-top: 30px;

}

.research-info-plan{

    width: 33.33%;

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

}

.research-info-plan-title{

    width: 120px;

    min-height: 60px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    justify-content: center;

    -webkit-justify-content: center;

    flex-direction: row;

    font-size: 0.875em;

    letter-spacing: 0.06em;

    line-height: 26px;

    color: #000;

    box-sizing: border-box;

    border: 1px solid #d1d1d1;

    border-top: none;

    font-family: 'Noto Sans TC';

    font-weight: 500;

    background-color: #f5f5f5;

}

.research-info-plan-text{

    width: calc(100% - 120px);

    min-height: 60px;

    display:         flex;

    display: -webkit-flex;

    align-items: center;

    -webkit-align-items: center;

    flex-direction: row;

    font-size: 0.875em;

    letter-spacing: 0.06em;

    line-height: 26px;

    color: #666;

    box-sizing: border-box;

    padding-left: 23px;

    padding-right: 10px;

    border-bottom: 1px solid #d1d1d1;

    font-family: 'Noto Sans TC';

    background-color: #f9f9f9;

}





/* organization */

.organization-box{

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 55px 0;

}

.organization-info-img{

    width: 100%;

    height: 600px;

    display: block;

    margin: 50px 0;

}

#about_organization .present-text p{

    font-size: 1.125em;

}





/* century */

.century-info-box{

    width: 100%;

    margin-top: 80px;

}

.century-info{

    width: 100%;

    display: block;

    position: relative;

}

.century-info-year{

    width: 100%;

    position: relative;

    box-sizing: border-box;

    padding: 0 40px;

}

.century-info-year span{

    font-family: 'roboto';

    font-weight: 700;

    font-size: 1.5em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 36px;

    display: inline-block;

    box-sizing: border-box;

    padding: 0 20px;

    background-color: #fff;

    position: relative;

    z-index: 1;

}

.century-info-year::after{

    content: '';

    width: 100%;

    height: 4px;

    position: absolute;

    top: calc(50% - 2px);

    left: 0;

    background-color: #000;

}

.century-info-list{

    position: relative;

    box-sizing: border-box;

    padding: 60px 0;

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    overflow: hidden;

}

.century-info-list::after{

    content: '';

    width: 100%;

    height: 0;

    border-bottom: 5px dashed #000;

    position: absolute;

    bottom: -4px;

    left: 0;

    pointer-events: none;

}

.century-info:not(:last-child) .century-info-list:last-child::after{

    display: none;

}

.century-info-list-month{

    width: 180px;

    text-align: center;

    margin-top: 15px;

}

.century-info-list-month span{

    width: 40px;

    line-height: 40px;

    display: inline-block;

    font-family: 'roboto';

    font-weight: 700;

    font-size: 1.125em;

    letter-spacing: 0.06em;

    color: #000;

    background-color: #ffea00;

    box-sizing: border-box;

    padding-left: 0.06em;

}

.century-info-list-text-box{

    width: calc(100% - 180px);

    font-family: 'Noto Sans TC';

    font-weight: 300;

    font-size: 1em;

    letter-spacing: 0.05em;

    color: #666;

    line-height: 36px;

}





/* about_news */

.about_news-box{

    width: 1200px;

    max-width: 100%;

    display: block;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 55px 0;

}



.about_news-info-box{

    margin-top: 80px;

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    flex-wrap: wrap;

}

.about_news-info{

    width: 360px;

    max-width: 100%;

    margin-right: 60px;

}

.about_news-info:nth-child(3n){

    margin-right: 0;

}

.about_news-info:nth-child(n + 4){

    margin-top: 60px;

}

.about_news-info-img-box{

    width: 100%;

    height: 320px;

    display: block;

    overflow: hidden;

    position: relative;

}

.about_news-info-date-box{

    display:         flex;

    display: -webkit-flex;

    flex-direction: row;

    margin-top: 5px;

}

.about_news-info-date{

    font-family: 'roboto';

    font-weight: 700;

    font-size: 0.875em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 36px;

}

.about_news-info-tag{

    position: relative;

    margin-left: 15px;

}

.about_news-info-tag span {

    font-family: 'Noto Sans TC';

    font-weight: 700;

    font-size: 0.875em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 32px;

    display: block;

    position: relative;

    z-index: 1;

}

.about_news-info-tag::after {

    content: '';

    width: 100%;

    height: 4px;

    background-color: #ffea00;

    position: absolute;

    bottom: 11px;

    left: 0;

    -webkit-print-color-adjust: exact;

}

.about_news-info-text-box{

    font-family: 'Noto Sans TC';

    font-weight: 300;

    font-size: 1em;

    letter-spacing: 0.06em;

    color: #666;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* about_news-pages */

.about_news-pages-info-box{

    margin-top: 40px;

}

.about_news-pages-info-name{

    font-family: 'Noto Sans TC';

    font-weight: 700;

    font-size: 1.5em;

    letter-spacing: 0.06em;

    color: #000;

    line-height: 26px;

}

.about_news-pages-info-edit{

    margin-top: 20px;

    line-height: 2;

    font-family: 'Noto Sans TC';

    font-size: 1.125em;

    letter-spacing: 0.06em;

    color: #666;

}







@media only screen and (max-width: 1720px){

    .introduction-fixed-box{

        right: 2vw;

    }

}

@media only screen and (max-width: 1600px){

    .introduction-fixed-box{

        right: 2vw;

    }

    .introduction-box,

    .about_news-box{

        width: 1000px;

    }

    .about_news-info {

        width: 300px;

        margin-right: 50px;

    }

    .about_news-info-img-box{

        height: calc((320 / 360) * 300px);

    }

}

@media only screen and (max-width: 1520px){

    .present-box{

        width: 1000px;

    }

    .previous-other {

        width: 331px;

    }

    .previous-other-img {

        height: 333px;

    }

    .introduction-box{

        width: 750px;

    }



    .research-box,

    .about_news-box{

        width: 1000px;

    }



    .organization-box{

        width: 1000px;

    }

    .organization-info-img{

        height: 500px;

    }

    

}

@media only screen and (max-width: 1320px){

    .present-box{

        width: 880px;

    }

    .present-img-box {

        width: 360px;

        height: calc((600 / 460) * 360px);

    }

    .present-text-box {

        width: calc(100% - 360px);

        padding-left: 60px;

    }

    .previous-other {

        width: 291px;

    }

    .previous-other-img {

        height: 293px;

    }

    .previous-other-name-box{

        padding: 0 30px;

    }

    .previous-other-ch::after{

        left: -23px;

    }

    

    .research-box{

        width: 880px;

    }



    .organization-box{

        width: 880px;

    }

    .organization-info-img{

        height: 440px;

    }



    

    .about_news-box{

        width: 880px;

    }

    .about_news-info {

        width: 260px;

    }

    .about_news-info-img-box{

        height: calc((320 / 360) * 260px);

    }

}

@media only screen and (max-width: 1200px){

    .about-box{

        margin-top: 90px;

    }

    .about-menu-box {

        width: 250px;

    }

    .about-menu {

        padding-left: 40px;

    }

    .about-right-box {

        width: calc(100% - 250px);

    }

    .present-box{

        width: 750px;

    }

    .present-img-box {

        width: 300px;

        height: calc((600 / 460) * 300px);

    }

    .present-text-box {

        width: calc(100% - 300px);

        padding-left: 40px;

    }

    .previous-other {

        width: 248px;

    }

    .previous-other-img {

        height: 250px;

    }

    .previous-other-name-box{

        height: 80px;

    }

    .previous-other-ch::after{

        left: -23px;

    }

    

    .introduction-box{

        width: 550px;

    }

    

    .research-box{

        width: 750px;

    }

    .research-info-list-text{

        padding-left: 13px;

        padding-right: 5px;

    }



    .organization-box{

        width: 750px;

    }

    .organization-info-img{

        height: 375px;

    }



    

    .about_news-box{

        width: 750px;

    }

    .about_news-info {

        width: 230px;

        margin-right: 30px;

    }

    .about_news-info-img-box{

        height: calc((320 / 360) * 230px);

    }

    .about_news-info:nth-child(n + 4){

        margin-top: 30px;

    }

}

@media only screen and (max-width: 1000px){

    .about-menu-box {

        display: none;

    }

    .about-right-box {

        width: 100%;

    }

    .about-box{

        margin-top: 79px;

    }

    .introduction-box{

        width: 95%;

    }

    .introduction-fixed-box{

        width: 150px;

        display:         flex;

        display: -webkit-flex;

        justify-content: space-between;

        -webkit-justify-content: space-between;

        flex-direction: row;

        right: calc((100% - 750px) / 2);

    }

    #about_introduction .introduction-fixed-box,

    #news-pages .introduction-fixed-box{

        right: 2.5vw;

    }

    .introduction-fixed:nth-child(n + 2) {

        margin-top: 0;

    }

}

@media only screen and (max-width: 768px){

    .present-box{

        width: 550px;

        padding: 40px 0;

    }

    .present-info-box{

        flex-direction: column;

    }

    .present-img-box {

        width: 100%;

        height: calc((600 / 460) * 550px);

    }

    .present-text-box{

        width: 100%;

        display: block;

        padding-left: 0;

        margin-top: 20px;

    }

    .present-info-name-box{

        margin-bottom: 20px;

    }



    .previous-other-box{

        margin-top: 40px;

    }

    .previous-other:nth-child(n){

        width: calc(50% - 1px);

        margin-right: 2px;

    }

    .previous-other:nth-child(2n){

        margin-right: 0;

    }

    .previous-other:nth-child(n + 3){

        margin-top: 2px;

    }

    .previous-other-img {

        height: 275px;

    }



    .introduction-box{

        padding: 40px 0;

    }

    .introduction-fixed-box {

        top: 40px;

        right: calc((100% - 550px) / 2);

    }



    .research-box{

        width: 550px;

        padding: 40px 0;

    }

    .research-tag{

        width: 100%;

        display: block;

    }

    .research-tag-all-box{

        padding-right: 0;

        margin-top: 40px;

    }

    .research-tag-select-box{

        width: 100%;

        height: 60px;

        bottom: 0;

        display: block;

    }

    .research-tag-select-box::after{

        position: absolute;

        right: 20px;

        bottom: calc(50% - 6px);

    }

    .rwd-research-tag-box{

        width: 100%;

        height: 100%;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 99;

    }

    .rwd-research-tag-box.active{

        display: flex;

        display:         flex;

        display: -webkit-flex;

        align-items: center;

        -webkit-align-items: center;

        justify-content: center;

        -webkit-justify-content: center;

        flex-direction:column;

    }

    .rwd-research-tag-box>span{

        content: '';

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.35);

        position: absolute;

        top: 0;

        left: 0;

        z-index: 0;

    }

    .rwd-research-tag-all-box{

        width: 80vw;

        box-sizing: border-box;

        padding: 20px 0;

        background-color: #fff;

        box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

        border-radius: 5px;

        position: relative;

        z-index: 2;

    }

    .rwd-research-tag-list-box{

        max-height: calc(80vh - 40px);

        overflow-y: auto;

    }

    .rwd-research-tag-all-box .research-tag{

        border-top: 2px solid #d1d1d1;

    }

    .rwd-research-tag-all-box .research-tag:last-child{

        border-bottom: 2px solid #d1d1d1;

    }

    .rwd-research-tag-all-box .research-tag.active{

        background-color: #f5f5f5;

    }

    .research-info-left, 

    .research-info-right{

        width: 100%;

    }

    .research-info{

        flex-direction: column;

    }

    .research-info-plan{

        width: 100%;

    }

    

    .organization-box{

        width: 550px;

        padding: 40px 0;

    }

    .organization-info-img{

        height: 275px;

    }

    

    .about_news-box{

        width: 550px;

        padding: 40px 0;

    }

    .about_news-info-box{

        margin-top: 40px;

    }

    .about_news-info:nth-child(n){

        width: 260px;

        margin-right: 30px;

    }

    .about_news-info:nth-child(2n){

        margin-right: 0;

    }

    .about_news-info:nth-child(n + 3){

        margin-top: 30px;

    }

    .about_news-info-img-box{

        height: calc((320 / 360) * 260px);

    }

}

@media only screen and (max-width: 550px){

    .about-box {

        margin-top: 56px;

    }

    .present-title-box span{

        font-size: 1em;

        line-height: 26px;

    }

    .present-title-box::after{

        height: 6px;

        bottom: 0;

    }

    .present-box{

        width: 400px;

        padding: 20px 0;

    }

    .present-info-box{

        margin-top: 20px;

    }

    .present-img-box {

        height: calc((600 / 460) * 400px);

    }

    .present-text-box{

        width: 100%;

        display: block;

        padding-left: 0;

        margin-top: 20px;

    }

    .present-info-name-box{

        margin-bottom: 10px;

    }

    .present-info-name-box p{

        font-size: 1.25em;

        line-height: 26px;

    }

    .present-info-name-box span{

        font-size: 1em;

        line-height: 26px;

        margin-top: 0;

    }

    .present-text-name p{

        font-size: 1em;

        line-height: 26px;

    }

    .present-text-name::after{

        top: 8px;

        width: 10px;

        height: 10px;

    }

    .present-info{

        padding: 5px 0;

    }

    .present-text-name{

        padding: 0 20px;

        padding-bottom: 10px;

        border-bottom-width: 4px;

    }

    .present-text{

        padding: 10px 0;

    }

    .present-text p{

        font-size: 0.875em;

        line-height: 26px;

    }

    .previous-other-box{

        margin-top: 20px;

    }

    .previous-other-img {

        height: 200px;

    }

    .previous-other-name-box{

        height: 60px;

        padding: 0 20px;

    }

    .previous-other-ch p{

        font-size: 1.125em;

        line-height: 24px;

    }

    .previous-other-ch::after {

        width: 10px;

        height: 10px;

        left: -15px;

        top: 7px;

    }

    .previous-other-en{

        font-size: 0.875em;

        line-height: 20px;

    }



    .introduction-box {

        padding: 20px 0;

    }

    .introduction-fixed-box{

        width: 120px;

        right: calc((100% - 400px) / 2);

        top: 20px;

    }

    .introduction-fixed{

        width: 30px;

        height: 30px;

    }

    .introduction-text-box p{

        font-size: 0.875em;

        line-height: 2;

        margin-top: 10px;

    }



    .research-box{

        width: 400px;

        padding: 20px 0;

    }

    .research-tag-box{

        margin-top: 20px;

        height: 40px;

    }

    .research-tag{

        line-height: 40px;

        font-size: 1em;

    }

    .research-tag-select-box{

        height: 40px;

    }

    .research-tag-select-box::after{

        right: 10px;

    }

    .research-info{

        margin-top: 20px;

    }

    .research-info-list{

        flex-direction: column;

    }

    .research-info-list-title{

        width: 100%;

        min-height: 40px;

        line-height: initial;

        border-right: none;

    }

    .research-info-left .research-info-list:nth-child(1) .research-info-list-title, 

    .research-info-right .research-info-list:nth-child(1) .research-info-list-title{

        min-height: 40px;

    }

    .research-info-list-text-box {

        width: 100%

    }

    .research-info-list-text{

        width: 100%;

        border-left: 1px solid #d1d1d1;

        min-height: inherit;

        padding: 10px;

    }

    .research-info-left .research-info-list:nth-child(1) .research-info-list-text{

        min-height: inherit;

    }



    

    .organization-box{

        width: 400px;

        padding: 20px 0;

    }

    .organization-info-img{

        height: 200px;

        margin: 20px 0;

    }

    #about_organization .present-text p {

        font-size: 0.875em;

    }

    .century-info-year{

        padding: 0 20px;

    }

    .century-info-year span{

        line-height: 30px;

        font-size: 1.125em;

        padding: 0 10px;

    }

    .century-info-year::after{

        height: 2px;

        top: calc(50% - 1px);

    }

    .century-info-list{

        padding: 20px 0;

    }

    .century-info-list-month{

        width: 60px;

        margin-top: 5px;

    }

    .century-info-list-month span{

        width: 30px;

        line-height: 30px;

        font-size: 1em;

    }

    .century-info-list-text-box{

        width: calc(100% - 60px);

        font-size: 0.875em;

        line-height: 30px;

    }



    .about_news-box{

        width: 400px;

        padding: 20px 0;

    }

    .about_news-info-box{

        margin-top: 20px;

    }

    .about_news-info:nth-child(n){

        width: 195px;

        margin-right: 10px;

    }

    .about_news-info:nth-child(2n){

        margin-right: 0;

    }

    .about_news-info:nth-child(n + 3){

        margin-top: 20px;

    }

    .about_news-info-img-box{

        height: calc((320 / 360) * 195px);

    }

    .about_news-info-date-box{

        margin-top: 0;

    }

    .about_news-info-date{

        font-size: 0.75em;

        line-height: 30px;

    }

    .about_news-info-tag span{

        font-size: 0.75em;

        line-height: 28px;

    }

    .about_news-info-tag::after{

        bottom: 8px;

    }

    .about_news-info-text-box{

        font-size: 0.875em;

    }

    .about_news-pages-info-box{

        margin-top: 20px;

    }

    .about_news-pages-info-name{

        font-size: 1.125em;

    }

    .about_news-pages-info-edit{

        margin-top: 5px;

        font-size: 0.875em;

    }

    .research-tag-all-box{

        margin-top: 0;

    }

}

@media only screen and (max-width: 400px){

    .present-box{

        width: 300px;

    }

    .present-img-box {

        height: calc((600 / 460) * 300px);

    }

    .previous-other:nth-child(n){

        width: 100%;

        margin-right: 0px;

        margin-top: 2px;

    }

    .previous-other-img {

        height: 300px;

    }



    .introduction-fixed-box{

        width: 120px;

        right: calc((100% - 300px) / 2);

        top: 20px;

    }



    .research-box{

        width: 300px;

    }



    

    .organization-box{

        width: 300px;

    }

    .organization-info-img{

        height: 150px;

    }



    .about_news-box{

        width: 300px;

        padding: 20px 0;

    }

    .about_news-info:nth-child(n) {

        width: 100%;

        margin-right: 0px;

        margin-top: 10px;

    }

    .about_news-info:first-child {

        margin-top: 0;

    }

}









@media only screen and (min-width: 1001px) and (prefers-reduced-motion: no-preference){

    .about-menu-box{

        animation: fadeInLeft 1s ease 0s 1 both;

    }

    .about-right-box{

        animation: fadeInRight 1s ease 0s 1 both;

    }

    .introduction-fixed-box{

        animation: fade 1s ease .5s 1 both;

    }

    .about_news-info:nth-child(n + 7).anima{

        animation: fadeInUp 1s ease .0s 1 both;

    }

}

@media only screen and (min-width: 1001px){

    /* hover */

    

    .about-menu.active::before{

        opacity: 1;

    }

    .about-menu.active::after{

        opacity: 1;

        width: 100%;

    }

    .about-menu:not(.active):hover::after{

        opacity: 1;

        width: 100%;

        top: 30px;

        transition: opacity .3s linear, width .3s linear, top .0s 0s linear;

    }

    .about-menu.active .about-menu-title span{

        margin-bottom: 40px;

    }

    .about-menu.active>ul>li.active a>span{

        color: #000;

        font-weight: inherit;

    }

    .about-menu.active>ul>li.active a::after{

        opacity: 1;

        width: 100%;

    }

    .about-menu ul li a:hover>span{

        color: #000;

    }

    .about-menu ul li a:hover::after{

        width: 100%;

        opacity: 1;

    }

}

@media only screen and (min-width: 769px){

    .research-tag-select-box.active,

    .research-tag-select-box:hover{

        background-color: #f5f5f5;

    }

    .research-tag:hover,

    .research-tag.active{

        font-weight: 500;

    }

    .research-tag:hover:after,

    .research-tag.active:after{

        width: 100%;

    }

    .research-tag-box.active{

        height: inherit;

        overflow: initial;

    }

    .research-tag-select-box.active::after{

        transform: rotateZ(180deg);

    }

    .research-tag-box:hover{

        height: inherit;

        overflow: initial;

    }

    .research-tag-box:hover + .research-tag-select-box::after{

        transform: rotateZ(180deg);

    }

}