@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');


html {
    scroll-behavior: smooth;
  }

body {
    background-color: rgb(55, 55, 55);
    margin: 0;
    padding: 0;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,ul,li,p{
    padding:0;
    margin:0;
    line-height: 1;
    list-style: none;

}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:1em 2em;
}

header .socialmedia{
    padding-right:5em;
    display: flex;
    justify-content: flex-end;
}

header .socialmedia .smit{
    margin:0 .5em;
}

header img{
    width:12vw;
    padding-bottom: 2em;
    opacity: .7;
}

.page{
    min-width:650px;
    max-width:80%;
    margin:0 auto;
    background-color: #fff;
}
section{
    padding-bottom:2em;
}
.topic{
    margin-bottom: 2rem;
    padding:1em 3em;
}

h1{
    font-size:2.4rem;
    line-height: 1.3em;
    color:#222;
    font-family: "Noto Serif TC", "Songti TC", "Noto Serif CJK TC", "Microsoft JhengHei", "Pingfang TC", serif;
}



.note{
    font-size:.85rem;
    color:#424242;
    margin-bottom: 1.5em;
}

.cover{
    padding: 0 3em;
    margin-bottom: 3em;
}

.cover img{
    width:100%;
}

.content {
    padding:1em 5em;
}

.content h3{
    font-size:1.6rem;
    font-weight: bold;
    color:rgb(18, 81, 140);
    padding-top:1em;
    margin-bottom: .5em;
}

.content p{
    font-size:1.3rem;
    font-family: open sans,sans-serif;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 2em;
    color: #444;
    text-align: justify;
    font-weight: 400;
}

.qut{
    margin-top:4em;
    margin-left:2em;
    margin-bottom:4em;
}

.qut p{
    font-size:1.5em;
    font-weight: 700;
    margin-bottom: .5em;
}
.fs_highlight{
    font-weight: 900;
    background-color: rgb(255, 251, 0);
}
.fs_strong{
    font-weight: 900;
}
.imgbox{
    margin-bottom:3em;
}

.imgbox img{
    width: 100%;
}
.imgtxt{
    font-size:1em;
    color:#c54a15;
    line-height: 1.3;
    padding:.5em 0;
}

.extracontent{

}

.extracontent h4{
    font-size:1.3rem;
    font-weight: 700;
    margin-bottom: 1em;
    margin-bottom: 1.5em;
    padding: 0 0 0 4em;
}


.sliderbox{
    display: flex;
    overflow-x: auto;
    padding-bottom:.5em;
}
.slider{
    display: flex;
    width: calc((100vw / 3.5) * 3 + (2 * 2em));
    padding-left:5em;
    padding-right:5em;
}
.slider li{
    margin-right: 2em;
}

.slider li .thumbnail img {
    width: calc(100vw / 3.5);
    height: calc(100vw / 3.5 * 0.65);
    object-fit: cover;
    object-position: center;
}
.slider li a{
    color:#222;
    text-decoration: none;
    
}

.slider li a img{
    display: block;
    opacity: 1;
    transition: all .3s;
    
}

.slider li a:hover img{
    opacity: .7;
}

.slider li .title{
    font-size:1.1rem;
    line-height: 1.3;
    padding:.3em 0;
}

@media (max-width:420px) {
    header{
        padding:1em;
        border:.7px solid #ccc;
        margin-bottom:1em;
    }
    header img {
        width: 20vw;
        padding-bottom: 0;
        opacity: .7;
    }
    header .socialmedia {
        padding-right: .5em;
    }

    .topic {
        margin-bottom: .5rem;
        padding: 1em .5em;
    }

    .cover {
        padding: 0 .5em;
        margin-bottom: 1em;
    }
    .page {
        width: 100%;
        min-width: initial;
        max-width: initial;
        margin: 0 auto;
        background-color: #fff;
        padding: 0;
    }
    section {
        width: 100%;
        padding:0 0 2em 0;
        margin:0 auto;
    }


h1 {
    font-size: 1.8rem;
    line-height: 1.2;
    color: #222;
}
.content{
    padding: 1em 1em 3em;
}

.content p {
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 1em;
    color: #424242;
    text-align: justify;
}

.content h3 {
    font-size: 1.4rem;
}
.qut{
    margin-top:4em;
    margin-left:1em;
    margin-right:1em;
    margin-bottom:4em;
}
.imgbox{
    margin-top:1em;
    margin-bottom:1em;
}
.extracontent h4 {
    padding: 0 0 0 1em;
    margin-bottom: 1em;
}
.slider {
    display: flex;
    width: calc((100vw / 2.6) * 3 + (2 * 2em));
    padding-left: 1em;
    padding-right: 0;
}
.slider li {
    margin-right: .7em;
}

.slider li .thumbnail img {
    width: calc(100vw / 2.6);
    height: calc(100vw / 2.6 * 0.65);
    object-fit: cover;
    object-position: center;
}
.slider li .title {
    font-size: .9rem;
    line-height: 1.2;
}
}

@media (max-width:360px) {
    header {
        padding: 1em .1em 1em 1em;
    }
    h1 {
        font-size: 1.6rem;
    }
    .content p {
        font-size: 1.1rem;
    }

    
    .slider li .title {
        font-size: .85rem;
    }
}