/*2021-08-10*/
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

 body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background-color: beige;
} 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.2em;
}
.shadow {
    -webkit-box-shadow: 3px 3px 3px 3px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 3px 3px #ccc;  /* Firefox 3.5 - 3.6 */
    /*box-shadow:         3px 3px 3px 3px #ccc;   Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.width1200-adj {
    margin: 0 auto;
    width: 1200px;
    background-color: rgb(256, 256, 256); 
    font-size: 0;
}

@media (min-width: 1041px) and (max-width: 1199px) {
    .width1200-adj {
        /* width: 1024px; */
        width: 100%;
    }
}

@media (min-width:717px) and (max-width: 1040px) {
    .width1200-adj {
        width: 100%;
    }
}

@media screen and (max-width: 716px) {
    .width1200-adj {
        width: 100%;
    }
}
.img {
    width: 100%;
}

/*show & hide in screen width 1218px*/
.showbox800 {
    display: block;
}

.hidebox800 {
    display: none;
}

@media screen and (max-width: 800px) {
    .showbox800 {
        display: none;
    }

    .hidebox800 {
        display: block;
    }
}









.TopPic{
    width: 100vw;
    max-width: 1200px;
}
.secondPic{
    background-image: url('https://www.epochtimes.com.tw/event/OverseaChineseStudy/secondBackground.svg');
    background-size: cover;
    width: 100%;
    height: 0px;
    position: relative;
}
.gridline{
    background: darkblue;
    margin: 0em auto;
    width: 212px;
    height: 6px;
}
.subtitlegroup{
    /* background-color: aliceblue; */
    padding-top: 60px;
    margin: 0 auto;
    /* width: 600px; */
    /* height: 600px; */
}
.subtitle{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
    line-height: 2em;
    margin: 1em auto;
}
.subtitlegroup1{
    text-align: center;
    /* position: absolute; */
    /* width: 1200px;
    top:0px;
    left:0px; */
    padding-left: 28px;
}
#fourCourse{
    max-width: 900px;
    margin: auto;
    width:900px;
}
.subtitlegroup2{
    /* position: absolute; */
    width: 1200px;
    /* bottom: 0px; */
    /* height: 100px; */
    /* left:0px; */
    /* background-color: rgba(255, 255, 128,0.5); */
}
.subtitle1{
    font-family: 'Noto Sans TC', sans-serif;
    color: #444;
    font-size: 58px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2.25px;
    margin: 0.75em auto 0 auto;
}
.subtitle2{
    font-family: 'Noto Sans TC', sans-serif;
    color: #2d89c9;
    font-size: 66px;
    font-weight: 700;
    text-align: center;
    /* line-height: 2em; */
    margin: 0.75em auto 0 auto;
}
.subtitle3{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 33px;
    font-weight: 500;
    text-align: center;
    /* line-height: 2em; */
    margin: 0.5em auto 2em auto;
}
.subtitlegroup5{
    /* position: absolute; */
    /* width: 1200px; */
    /* bottom: 0px; */
    /* height: 100px; */
    /* left:0px; */
    /* background-color: rgba(255, 255, 128,0.5); */
    padding: 100px 0 100px 0;
    text-align: center;
}

.subtitle52{
    font-family: 'Noto Sans TC', sans-serif;
    color: #2d89c9;
    font-size: 66px;
    font-weight: 700;
    text-align: center;
    /* line-height: 2em; */
    margin: 0em auto 0 auto;
}
.subtitle53{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 25px;
    font-weight: 500;
    color:#333;
    text-align: center;
    /* line-height: 2em; */
    margin: 0em auto 0em auto;
}
#EpochtimesLogoI{
    margin: 20px auto;
    max-width: 250px;
    width:25%;
}
a.button3{
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
    font-size: 0.6em;
    display: inline-block;
    padding: 0.3em 1.6em;
    margin: 0 0em 0.6em 0;
    border-radius: 0.1em;
    box-sizing: border-box;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #80c0fe;
    text-align: center;
    transition: all 0.2s;
}
a.button3:hover{
    background-color:#4095c6;
}
@media all and (max-width:30em){
    a.button3{
    /* display:block; */
    margin:0.2em auto;
    }
} 





.topTitle{
    font-family: 'Noto Serif TC', serif;
}

.imageTitle{
    font-family: 'Noto Sans TC', sans-serif;
}

.flexPicGrid{
width: 100%;
display: flex; /* or inline-flex */
flex-direction: row;
flex-wrap:  wrap;
justify-content: center;
align-items: flex-start;

}

.onePicGrid{
    flex:0 0 33.33%;
}
.onePicGrid:hover {
    opacity: 0.68;
}
.onePicGrid>a>img, .onePicGrid>img {
    width:100%;
}
@media (min-width:220px) and (max-width: 800px) {
    .onePicGrid{
        flex:0 0 50%;
    }
}












@media (min-width:717px) and (max-width: 1040px) {
    .subtitlegroup {
        padding-top: 43px;
    }
    .subtitle {
        font-size: 18px;
        line-height: 1.6em;
        margin: 0.5em auto;
    }
    .subtitle1 {
        font-size: 42px;
    }
    .subtitle2 {
        font-size: 42px;
        margin: 1em auto 0 auto;
    }
    .subtitle3 {
        font-size: 23px;
    }
    .subtitle52 {
        font-size: 42px;
    }
    .subtitle53 {
        font-size: 23px;
    }
}
@media (min-width:576px) and (max-width: 716px) {
    .subtitlegroup {
        padding-top: 30px;
    }
    .subtitlegroup1 {
        padding-left: 18px;
    }
    .gridline {
        width: 200px;
        height: 3px;
    }
    .subtitle {
        font-size: 16px;
        line-height: 1.5em;
        margin: 0.5em auto;
    }
    .subtitle1 {
        font-size: 32px;
    }
    .subtitle2 {
        font-size: 32px;
        margin: 1.75em auto 0 auto;
    }
    .subtitle3 {
        font-size: 18px;
    }
    .subtitle52 {
        font-size: 32px;
    }
    .subtitle53 {
        font-size: 18px;
    }
    .onePicGridText {
        font-size: 38px;
        padding-top: 72px;
    }
    a.button3 {
        font-size: 1.0em;
    }
}

@media (min-width:400px) and (max-width: 575px) {
    .subtitlegroup {
        padding-top: 16px;
    }
    .subtitlegroup1 {
        padding-left: 10px;
    }
    .gridline {
        width: 200px;
        height: 2px;
    }
    .subtitle {
        font-size: 12px;
        line-height: 1.5em;
        margin: 0.5em auto;
    }
    .subtitle1 {
        font-size: 20px;
    }
    .subtitle2 {
        font-size: 20px;
        margin: 1.75em auto 0 auto;
    }
    .subtitle3 {
        font-size: 15px;
    }
    .subtitle52 {
        font-size: 20px;
    }
    .subtitle53 {
        font-size: 15px;
    }
    a.button3 {
        font-size: 1.0em;
    }
    .subtitlegroup5 {
        padding: 50px 0 50px 0;
    }
}
@media screen and (max-width: 399px) {
    .subtitlegroup {
        padding-top: 16px;
    }
    .subtitlegroup1 {
        padding-left: 10px;
    }
    .gridline {
        width: 200px;
        height: 2px;
    }
    .subtitle {
        font-size: 12px;
        line-height: 1.5em;
        margin: 0.5em auto;
    }
    .subtitle1 {
        font-size: 20px;
    }
    .subtitle2 {
        font-size: 20px;
        margin: 1.75em auto 0 auto;
    }
    .subtitle3 {
        font-size: 12px;
    }
    .subtitle52 {
        font-size: 20px;
    }
    .subtitle53 {
        font-size: 12px;
    }
    a.button3 {
        font-size: 1.0em;
    }
    .subtitlegroup5 {
        padding: 50px 0 50px 0;
    }
}