* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0;
}

.school {
    color: #03867C;
}
.school:hover {
    color: #03867C;
}
.museum {
    color:#E77D00;
}
.museum:hover {
    color:#E77D00;
}
.theater {
    color: #CC4646
}
.theater:hover {
    color: #CC4646
}



/*電腦*/
@media (min-width:1024px) {

    
    /*主標*/
    h1 {
        color: #000000;
        font-size: 40px;
        font-weight: 700;
        line-height: 54px;
        margin-bottom: 12px;
        

    }

    /*分類標題*/
    h2 {
        font-size: 22px;
        font-weight: 700;
        line-height: 32px;
        margin-bottom: 12px;
    }

    /*小標*/
    h3 {
        width: 540px;
        color: #000000;
        font-size: 22px;
        font-weight: 700;
        line-height: 54px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    h4 {
        color: #000000;
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
        margin-top: 8px;
        margin-bottom: -6px;
    }

    p {
        width: 540px;
        color: #000000;
        font-size: 18px;
        font-weight: 400;
        line-height: 38px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        
    }

    figure {
        width: 100%;    
        padding-top: 60px;
        padding-bottom: 60px;
    }

    img {
        width: 100%;
        object-fit: cover;
    }

    iframe {
        width: 100%;
        height: 418px;
    }

    figcaption {
        width: 540px;
        color: #909090;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
    }





    /*大框架*/
    .box {
        width: 743px;
        margin-bottom: 200px;
    }

    /*資訊區*/
    .box .info {
        width: 540px;
        margin-top: 120px;
        margin-bottom: -20px;
        margin-left: auto;
        margin-right: auto;
    }

    /*中繼資料*/
    .metadata {
        color: #707070;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;    
        margin-bottom: 60px;
    }

    .metadata .tag {
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap

    }
    

    .metadata a {
        
        color: #707070;
        font-size: 14px;
        font-weight: 400;
        background-color: #E5E5E5;
        padding: 3px 8px;
        border-radius: 5px;
        margin: 0 12px 15px 0;

    }

    .metadata a:hover {
        color: #FFFFFF;
        background-color: #707070;
    }

    /*註解*/
    .ref {
        width: 540px;
        font-size: 16px;
        font-weight: 400;
        color: #505050;
        background-color: #FFFFFF;
        margin: auto;
        padding: 15px 20px;
    }

    .note img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        margin-bottom: 2px;
        transform: rotate(-90deg);
        transition: all 250ms ease-in-out;  
    }
    
    .note[aria-expanded="true"] img  {
        transform: rotate(0deg);
        transition: all 250ms ease-in-out;
    }


    /*更多文章*/
    .more {
        max-width: 1120px;
        font-weight: 700;
        font-size: 24px;
        line-height: 38px;
        padding-bottom:50px ;
        border-bottom: 1px solid #d5d5d5;
        
    }
    .more .line {
        width: calc(100vw - 174px - 320px);
        border-bottom: 1px solid #d5d5d5;
        margin-left: 20px;
        
    }

    .more .title {
        white-space: nowrap;
        display: flex;
        align-items: center;
        margin-bottom: 50px;
    }

    .more h2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 38px;
        margin: 0;

    }

    .more span {
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
    }

    
    .more .block {
        max-width:calc(100vw - 320px);
        margin:0px;
        display: flex;
        justify-content: space-between;
        
    }

    .more .block img {
        width: 100%;
        height: 140px;
        object-fit: cover;
    }

    .more .block > div {
        width: calc(250 / 1120 * 100%);
        max-width: 250px;
        
        
    }

}

/*平板*/
@media (max-width:1023px) and (min-width:767px) {


    /*主標*/
    h1 {
        color: #000000;
        font-size: 32px;
        font-weight: 700;
        line-height: 46px;
        margin-bottom: 10px;

    }

    /*分類標題*/
    h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        margin-bottom: 10px;
    }

    /*小標*/
    h3 {
        max-width: 514px;
        width: calc(514 / 834 * 100%);
        color: #000000;
        font-size: 24px;
        font-weight: 700;
        line-height: 38px;
        margin-top: 50px;
        margin-bottom:20px;
        margin-left:auto;
        margin-right:auto;
    }

    h4 {
        color: #000000;
        font-weight: 700;
        font-size: 16px;
        line-height: 32px;
    }

    p {
        max-width: 514px;
        width: calc(514 / 834 * 100%);
        color: #000000;
        font-size: 18px;
        font-weight: 400;
        line-height: 38px;
        margin-bottom: 20px;
        margin-left:auto;
        margin-right:auto;
    }

    figure {
        margin-bottom: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
        margin-left:auto;
        margin-right:auto;
    }

    img {
        width: 100%;
        object-fit: cover;
    }
    iframe {
        width: 100%;
        height: 504px;
    }

    figcaption {
        max-width: 514px;
        width: calc(514 / 834 * 100%);
        color: #909090;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin-top:15px;
  
        margin-left:auto;
        margin-right:auto;
    }


    /*大框架*/
    .box {
        width: 100%;
        margin-bottom:80px;
    }

    /*資訊區*/
    .box .info {
        max-width: 514px;
        width: calc(514 / 834 * 100%);
        margin-top: 120px;
        margin-bottom: -40px;
        margin-left:auto;
        margin-right:auto;
    }

    /*中繼資料*/
    .metadata {
        color: #707070;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;    
        margin-bottom: 68px;

    }

    .metadata .tag {
        margin-top: 24px; 
        display: flex;
        flex-wrap: wrap
    }       

    .metadata a {
        
        color: #707070;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;  

        background-color: #E5E5E5;
        margin: 0 12px 15px 0;
        padding: 3px 8px;
        border-radius: 5px;
    }

    .metadata a:hover { 
        color: #FFFFFF;
        background-color: #707070;
    }

    /*註解*/
    .ref {
        max-width: 514px;
        width: calc(514 / 834 * 100%);
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
        color: #505050;
        background-color: #FFFFFF;
        margin: auto;
        padding: 15px 20px;
    }


    .note img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        margin-bottom: 2px;
        transform: rotate(-90deg);
        transition: all 250ms ease-in-out;  
    }
    
    .note[aria-expanded="true"] img  {
        transform: rotate(0deg);
        transition: all 250ms ease-in-out;
    }


    /*更多文章*/
    .more {
        max-width: 514px;
        width: calc(514 / 834 * 100%);
        font-size: 20px;
        font-weight: 700;
        line-height: 29px;
        margin-left: auto;
        margin-right: auto;
        
    }
    .more .line {
        width: calc(100vw - 131px - 64px);
        border-bottom: 1px solid #d5d5d5;
        margin-left: 20px;
    }

    .more .title {
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .more h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 29px;
        margin-top: 12px;

    }

    .more h4 {
        font-weight: 700;
        font-size: 20px;
        line-height: 29px;
        margin-bottom: 5px;
    }

    .more span {
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
    }
    .more .block {
        max-width: 514px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }

    .more .block a {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;

        

    }

    .more .block a div {

        width: calc(329 / 514 * 100%);
        display: flex;
        flex-direction: column;

    }
    .more .block img {
        width: 145px;
        height: 106px;
        object-fit: cover;
        margin-left: 24px;
    }

    .more .block > div {
        max-width: 514px;
        width: calc(514 / 100vw * 100%);
        border-bottom: 1px solid #d5d5d5;
        padding-top: 24px;
        padding-bottom: 24px;
        
    }
    
}

/*手機*/
@media (max-width:766px) {


    /*主標*/
    h1 {
        color: #000000;
        font-size: 32px;
        font-weight: 700;
        line-height: 46px;
        margin-bottom: 10px;

    }

    /*分類標題*/
    h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        margin-bottom: 10px;
    }

    /*小標*/
    h3 {
        width: calc(364 / 428 * 100%);
        color: #000000;
        font-size: 22px;
        font-weight: 700;
        line-height: 36px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    h4 {
        color: #000000;
        font-weight: 700;
        font-size: 16px;
        line-height: 32px;
    }

    p {
        width: calc(364 / 428 * 100%);  
        color: #000000;
        font-size: 18px;
        font-weight: 400;
        line-height: 36px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    figure {
        margin-bottom: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    img {
        width: 100%;
        object-fit: cover;
    }
    iframe {
        width: 100%;
        height: 320px;
    }

    figcaption {
        width: calc(364 / 428 * 100%); 
        color: #909090;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin-top: 12px;
        margin-bottom: 20px ;
        margin-left: auto;
        margin-right: auto;
    }


    /*大框架*/
    .box {
        width: 100%;

    }

    /*資訊區*/
    .box .info {
        width: calc(364 / 428 * 100%);
        margin-top: 80px;
        margin-bottom: -20px;
        margin-left: auto;
        margin-right: auto;
    }

    /*中繼資料*/
    .metadata {
        color: #707070;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;    
        margin-bottom: 68px;

    }

    .metadata .tag {
        margin-top: 24px; 
        display: flex;
        flex-wrap: wrap
    }       

    .metadata a {
        
        color: #707070;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;  

        background-color: #E5E5E5;
        margin: 0 12px 15px 0;
        padding: 3px 8px;
        border-radius: 5px;
    }

    .metadata a:hover { 
        color: #FFFFFF;
        background-color: #707070;
    }

    /*註解*/
    .ref {
        width: 364px;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
        color: #505050;
        background-color: #FFFFFF;
        margin: auto;
        padding: 15px 20px;
    }


    .note img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        margin-bottom: 2px;
        transform: rotate(-90deg);
        transition: all 250ms ease-in-out;  
    }
    
    .note[aria-expanded="true"] img  {
        transform: rotate(0deg);
        transition: all 250ms ease-in-out;
    }


    /*更多文章*/
    .more {
        max-width: calc(100vw - 64px);
        width: calc(364 / 428 * 100%);
        margin-left: auto;
        margin-right: auto;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        
    }
    .more .line {
        width: calc(100vw - 131px - 64px);
        border-bottom: 1px solid #d5d5d5;
        margin-left: 20px;
    }

    .more .title {
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .more h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        margin: 0;

    }

    .more h4 {
        width: calc(100% - 24px);
        font-weight: 700;
        font-size: 16px;
        line-height: 23px;      
        margin-bottom: 10px;

    }

    .more span {
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
    }
    .more .block {

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }

    .more .block a {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between

    }

    .more .block a div {

        width: calc(235 / 364 * 100%);
        display: flex;
        flex-direction: column;

    }
    .more .block > div > a > img {
        width: 105px;
        height:78px;
        object-fit: cover;
;
    }

    .more .block > div {
        
        border-bottom: 1px solid #d5d5d5;
        padding-top: 24px;
        padding-bottom: 24px;
        
    }
    
}

@media (max-width:535px) {
    iframe {
        width: 100%;
        height: 230px;
    }
    
}