@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
/* CSS Document */
*{padding:0;margin:0; }
body{font-family: 'Noto Sans TC', sans-serif;font-weight: 400;-webkit-overflow-scrolling: touch;background: url(../images/bg.jpg) fixed;}
:root{
    --purple:#329A9D;
    --side1:#FFF1DC;
    --side2:#FFECE9;
    --side3:#F3F9FF;
}
.wrap {
    font-size: 12pt;
    color: #333;
}

/*nav*/
nav{position: fixed;top:0;width: 100%;padding:10px 5px;display: flex;justify-content: center;z-index: 10000;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}
nav a{font-size: 0.8em !important;margin:0 4px;padding: 5px !important;line-height: 1.2;}

img{max-width: 100%;}
ul{list-style: none;}
.btn-outline-light{
    color: var(--purple);
    border-color: var(--purple);
}
.btn-outline-light:hover{
    background: var(--purple);
    color: #fff;
}
.btn-outline-light.disabled, .btn-outline-light:disabled{
    color: var(--purple);
}
/*header*/
header{margin-top: 150px;}
header h1{
    text-align: center;
    margin-top: -70px;
    color:var(--purple);
    z-index: 0;
    font-weight: 900 !important;
}
.stroke {position: relative;z-index: 10; padding: 5px; display: inline-block;}
.stroke:before {position: absolute; z-index: -1; -webkit-text-stroke: 6px #fff; content: attr(data-stroke); }
header p {
    font-size: 1.3em;
    text-align: center;
}
header ul {
    text-align: center;
}
header li {
    display: inline-block;
    margin: 5px 3px;
}
/*section*/
section{overflow: hidden;}
article {
    margin-bottom: 40px;
}
article > div {
    border-radius: 20px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 30px 30px 15px;
    margin-top: 15px;
}
.number {
    position: absolute;
    top:-35px;
    font-size: 3em;
    font-style: italic;
    text-shadow: 2px 2px 0 #fff;
    color: var(--purple);
}
.art1 > div,.art4 > div,.art7 > div {
    background: var(--side1);
}
.art2 > div,.art5 > div,.art8 > div {
    background: var(--side2);
}
.art3 > div,.art6 > div {
    background: var(--side3);
}
article h2{
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0 #fff;
}
article h2 small{
    font-size: 0.65em;
    color:var(--purple);
    text-shadow: none;
    display: inline-block;
}
/*art1*/
.art1 table{

}
.table-odd{
    background:rgba(0,0,0,.05);
}
/*art6*/
.table_purple th{
    background: var(--purple);
    color: #fff;
}


.line_link ul{text-align: center;column-count: 2;}
.line_link li{margin-bottom: 15px;}
.line_link a{background: #329A9D;color: #fff;padding: 5px 15px;border-radius: 25px;display: block;transition-duration: .3s;}
.line_link a:hover{background: #c13f2a;text-decoration: none;}







.modin{ position: relative; visibility: hidden; top:-80px;display: block;height: 1px; width: 1px;}


@media (min-width: 576px){ /*sm*/
    nav a{font-size: 1em !important;margin:0 5px;padding: 5px 10px !important;}
    article h2{font-size:2.2em;}
}
@media (min-width: 768px) {/*md*/
    header h1{margin-top: -50px;}
    /*art2*/
    .art2{margin-top: 60px;}
    /*art3*/
    .art3{margin-top: -80px;}
    /*art4*/
    .art4{margin-top: 50px;}
    /*art5*/
    .art5{margin-top: 20px;}
    /*art6*/
    .art6{margin-top: 60px;}
    /*art7*/
    .art7{margin-top: -200px;}
    /*art8*/
    .art8{margin-top: 80px;}
    .line_link ul{column-count: 3;}
    nav a{font-size: 1em !important;margin:0 10px;padding: 5px 20px !important;}
    article h2{font-size:2.4em;}
   
    .modin{ position: relative; visibility: hidden; top:-100px;}
}



@media (min-width: 992px) { /*lg*/
    .wrap{font-size: 14pt;}
    header {margin-top: 100px;}
    header h1{margin-top: 10px;}
    header p{font-size: 1.05em;}
    header li{width: 30%;}
    header li a.btn{display: block;}
    .number {top:-45px}
    .art1{position: relative;right: -20px;}
    .art2{margin-top: 100px;}
    .art3{margin-top: 25px;}
    .art4{margin-top: 120px;}
    .art6{margin-top: 40px;}
    .art7{margin-top: 40px;}
    .art8{position: relative;right: -40px;margin-top: 140px;}
    .line_link ul{column-count: 6;}

}

@media (min-width: 1200px){ /*xl*/
    header h1{font-size: 5rem !important;}
    .art1{position: relative;right: 0;}
    .art2{margin-top: 100px;}
    .art3{margin-top:0px;position: relative;right:0;}
    .art4{margin-top: 80px;position: relative;}
    .art5{position: relative;left: 80px;top:40px;}
    .art6{margin-top: 100px;position: relative;left: -30px;}
    .art7{margin-top: -150px;position: relative;left: 50px;}
    .art8{margin-top: 60px; position: relative;}

}