@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&display=swap');
*{-webkit-box-sizing:border-box;box-sizing:border-box;margin: 0;padding: 0;}
html{font-size:16px;}
body{
    display:flex;
    flex-direction: column;
    min-height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    margin:0 auto;
    padding:0;
    font-size:100%;
    font-weight:400;
    font-family: "Noto Serif", serif;
    line-height:1.8;letter-spacing:1px;
    background:url(../img/PC-BG-light.jpg);
    background-size: 100%;
    background-repeat: on repeat;
    background-attachment:fixed;
}
h1{font-size:2rem;font-weight:600;padding-bottom:1rem;}
@media (max-width:64rem){
    h1{font-size:1.375rem;}
}
@media (max-width:50rem){
    h1{font-size:2rem;}
}
@media (max-width:40rem){
    h1{font-size:1.375rem;}
}
@media (max-width:20rem){
    h1{font-size:1.25rem;}
}
p{font-size:1.125rem; color: #393834;font-family: "Noto Serif TC"; font-weight: 400;}
p span{display:inline-block;vertical-align:middle;}
@media (max-width:37.5rem){
    p{font-size:1rem;}
}
@media (max-width:20rem){
    p{font-size:.875rem;}
}
a{color:#fff;text-decoration:none;}
a:hover{opacity:.9;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
img{max-width:100%;height:auto;display:-webkit-box;display:-ms-flexbox;display:flex;}
header {position: relative;clear: both;zoom: 1; }
header{display: grid;grid-template-columns: auto 160px auto;grid-template-rows: auto;align-items: center;}
.container{
    max-width: 1200px;width: 100%;margin: 0 auto;padding: 40px 30px;
    display: flex;justify-content: space-between;align-items: center;
}
.z-header{z-index: 99;}
.cna>a>svg{vertical-align: top;}

/**分享**/
.footer-share{
    position: fixed;right: 40px;bottom: 100px;
    display: flex;flex-direction: column;align-items: center;
    opacity: 1;z-index: 999;transition: opacity 0.5s ease;
}
.footer-share.hide {opacity: 0;}
.footer-share>*+* {margin: 20px 0 0;}
.footer-share>:last-child {margin:20px 0 0;}
.footer-share>svg{cursor: pointer;}
.footer-share>svg:hover{opacity:.9;}

@media screen and (max-width: 768px) {.footer-share{right:30px;bottom: 70px;}}
@media screen and (max-width: 576px) {
    .footer-share{right:20px;bottom: 70px;}
    .footer-share>*+* {margin:16px 0 0;}
    .footer-share>:last-child {margin:16px 0 0;}
}
.cd-top{cursor: pointer;display: none;position: fixed;right: 28px;bottom: 70px;}

@media screen and (max-width: 768px) {.cd-top{ right: 17px;}}
@media screen and (max-width: 576px) {
    .cd-top{ right: 15px;}
    .cd-top img{width:35px;}
}

footer {margin-top: auto;background-color: #5E5751;padding: 15px 0;text-align: center;}
footer p{color: #fff;font-size: 14px;font-family: "Noto Sans TC", sans-serif;}
@media screen and (max-width: 576px) {
    header{grid-template-columns: auto 109px auto;}
    .logo-svg{height: 32px;}
    .cna>a>svg{width: 40px;}
    .container {
    width: 100%;
    margin: 0 auto;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.80);
    }
    footer {font-size:12px;padding: 20px 0;}
}

.wrapper{max-width: 1200px;margin: 0 auto;clear:both;}

@media (max-width:64rem){.wrapper{width:95%;}}

.text-warp{max-width: 1000px;margin: 0 auto;text-align: center;}
.text-warp .h1{color: #1C1C1C;text-align: center;font-size: 36px;font-style: normal;font-family: 'Noto Serif TC';font-weight:700;padding: 24px;}
.text-warp p{font-family: "Noto Serif TC";padding-bottom: 50px;text-align: justify;font-size: 22px;}
.item-order{display: flex;flex-direction: column;}
.section{display: flex;justify-content: space-between;order: 1;margin-bottom: 90px;}
.item-order .p{
    text-align: center;
/*    margin: 60px;*/
    font-weight: 600; 
    font-size: 18px;
/*    order: 2;*/
margin-bottom: 30px;
}
@media (max-width:75rem){.section img{width: 95%;}}
@media (max-width:62rem){
.text-warp p{width: 60%; margin: 0 auto;font-size: 20px;}
.text-warp .h1{font-size: 32px;}
.section {display: flex;flex-direction: column;align-items: center;margin-bottom: 100px;}
.section div{margin: 20px;}
.item-order .p{order: inherit;font-size: 16px;margin:10px;}
}

@media (max-width:36rem){
.text-warp .h1{font-size: 28px;}
.text-warp p{width: 90%; margin: 0 auto;font-size: 18px;padding-bottom: 40px;}
}

.hover-img1:hover {
  content: url('../img/btn1-2.png');
}
.hover-img2:hover {
  content: url('../img/btn2-2.png');
}
.hover-img3:hover {
  content: url('../img/btn3-2.png');
}