section{max-width:1280px;}
header{position: fixed; z-index:900; left:0; top:0; width:100%; box-shadow:0 0 7px rgba(0,0,0,0.1); background:rgba(255,255,255,0.9);}
header .tools a, header .tools a *{font-size:0.8rem;}
header .tools a{margin-left:0.5rem; padding:5px 10px; border-radius:0 0 5px 5px;}
header .tools a i{color:var(--ci2);}
header .tools{position: absolute; right: 0; top:0.2rem;}
nav{position:absolute; right:0; bottom:0rem;}
nav ul{margin:0 -0.5rem 0 0;}
nav ul li{list-style: none; display: inline-block;}
nav ul li a{font-size:1.2rem; display: inline-block; padding:0 0.5rem; font-weight:400; color:#333; text-shadow:0.5px 0.5px 1px rgba(0,0,0,0.2); line-height:1;}
nav ul li a span{display: block; font-size:0.7rem; color:#663434; line-height:1; text-align: right;}
nav ul li:hover a, nav ul li:hover a span, nav ul li.active > a, nav ul li.active a *{background:var(--ci2); color:var(--white);}
#logo{width:30%; max-width:300px; display: inline-block; padding:1rem 0 0.5rem 0;}
#logo img{width:100%;}
main{margin-top:105px;}
body#home main{margin-top:85px;}
footer{background:var(--ci1);}
footer section{padding:1rem;}
footer, footer *{color:var(--white); font-size:0.9rem; line-height:1.4;}
footer .tools{position: absolute; right: 0; top:1rem;}
#footer_contactUs{background:url('../tw/images/bg_contactUs.jpg') no-repeat center; background-size: cover; text-align: center; padding:5rem 1rem;}
#footer_contactUs, #footer_contactUs *{font-size:1.2rem;}
#footer_contactUs strong{font-size:1.6rem;}
#footer_contactUs .btn1{font-size:0.9rem; margin-top:1rem;}
#indexAd{width:100%; height:100vh; position: relative; overflow: hidden;}
#indexAd .img{width:100%; height: 100vh; background: no-repeat center; background-size: cover; opacity: 0; position: absolute; left:0; top:0; background-attachment: fixed;}
#indexAd .img.active{opacity: 1;}
#indexAd .tools{position: absolute; z-index:10; bottom:0; left:0; width:100%; background:rgba(0,0,0,0.4);}
#indexAd .tools a, #indexAd .tools a span{line-height:1.2; color:var(--white);}
#indexAd .tools a{width:50%; text-align: center; display: inline-block; float: left; padding:1rem 0; font-weight: 600;}
#indexAd .tools a span{display: block; font-size:0.7rem;}
#indexAd .tools a.active, #indexAd .tools a:hover{background:rgba(0,0,0,0.6);}
#countUpBox{position: absolute; width:calc(100% - 100px); max-width:980px; left:50%; bottom:20%; transform: translateX(-50%); padding:32px; border-radius: 16px; background: rgba(255,255,255,0.8); box-shadow: 1px 1px 5px rgba(0,0,0,0.2);}
#countUpBox .item{width:calc(33% - 1px); text-align: center; color: #000; font-weight: 700; font-size: 1.3rem;}
#countUpBox .item .num{font-size: 3rem; font-weight: 900; max-width: none;  color: var(--ci2); display: block;}
#countUpBox .item .num:after{content: '+';  color: var(--ci2);}
.area_title{position: relative; margin-bottom:2rem;}
.area_title .sub{font-size:0.7rem; color:var(--ci2); position: absolute; left:0; bottom:-0.7rem;}
.area_title a{float: right; color:var(--ci2); margin-top:0.5rem;}
.area_title a, .area_title a *{font-size:0.9rem; line-height: 1;}
.o li div{font-size:0.9rem;}
.o li .price{position: absolute; right:5px; margin-top:-5px; color:var(--ci3);}
.o li .price:before, .o li .price:after{font-size:0.6rem;}
.o li .price:before{content:'NT$';}
.o li .price:after{content:'/月';}
.row{width:80%; margin:2rem auto;}
.row li{list-style: none; margin-bottom:5rem;}
.row li .info{width:50%; float: left; background: #eee; padding:1rem;}
.row li .title{position: relative; margin-bottom:2rem; line-height: 1;}
.row li .title .sub{color:var(--ci2); position: absolute; left:0; bottom:-1rem; font-size:0.7rem; line-height: 1;}
.row li .img{width:34%; height:248px; float: right; border:10px var(--ci2) solid; position: relative;}
.row li .img img{transform:translate(-2rem, 0.5rem);}
.row li:nth-child(even) .img img{transform:translate(2rem, 0.5rem);}
.row li .btnBox{margin-top:2rem; text-align: right;}
.row li:nth-child(even) .info{float: right;}
.row li:nth-child(even) .img{float: left;}
.news_list{margin:1rem auto; max-width:1000px;}
.news_list li{width:calc(50% - 2rem - 12px); margin:0 1rem 1.5rem 1rem; float: left; padding:5px; list-style: none;}
.news_list li .d{display: block; font-size:0.9rem; border-bottom:1px var(--gray1) solid;}
.news_list li .title{font-size:1.2rem; display: block;}
#contactUsInfo{float:left; width:calc(100% - 650px);}
body#contactUs .boxshadow{float: right;}
.btns{text-align: center; margin-bottom:1.5rem;}
.btns a{margin:0 1rem;}
.qa_list{width:90%; max-width:800px; margin:0 auto 2rem auto;}
.qa_list li{list-style: none; margin-bottom:2rem; position: relative;}
.qa_list li .q{color:var(--ci1); font-size:1.1rem; font-weight:600; border-bottom:1px var(--ci1) solid; padding-bottom:5px; margin-bottom:1rem; display: block; cursor: pointer;}
.qa_list li .q:before, .qa_list li .a:before{display: inline-block; line-height: 1; position: absolute; left:-2.3rem; top:6px; border-radius: 5px; padding:4px 3px 2px 5px; color:var(--white);}
.qa_list li .q:before{content:'Q.'; background: var(--ci1);}
.qa_list li .a{position: relative; display: none;}
.qa_list li .a:before{content:'A.'; background:#666; top:0; font-weight:600; font-size:1.1rem;}
.links{margin:1rem 0 1rem -1rem;}
.links li{list-style: none; float: left; margin:0 0 1rem 1rem; padding:10px; width:calc(10% - 1rem - 22px); display: inline-block; border:1px var(--gray1) solid;}
.links li .img{display: block; padding-bottom:38%; background: no-repeat center; background-size: contain;}
.page_title{font-size:1.2rem; color:var(--ci1); line-height:1.2; margin-bottom:0.5rem;}

@media screen and (max-width:766px) {
    #logo{width:40%;}
    header .tools{top:1rem; right:30px;}
    header .tools a{margin-left:0.2rem;}
    header .tools a i{font-size:1rem;}
    header .tools a span{display: none;}
    header .nav{position: absolute; right:0px; top:18px; color:}
    header .nav a{margin-left:0.5rem; color:var(--ci1);}
    nav{width:100px; padding:5px 10px; position: fixed; right:0; top:50px; background:var(--white);}
    nav ul li{display:block; margin:15px 0;}
    #countUpBox > .d-flex{gap:30px;}
    #countUpBox .item{width:100%; line-height: 1; display: flex; flex-direction: column-reverse; text-align: left;}
    #countUpBox .item .num{text-align: center; line-height: 1;}
    .row li .info, .row li .img{width:100%;}
    #contactUsInfo{float:none; width:100%;}
    body#contactUs .boxshadow{float: none;}
    .links li{width:calc(33.3333% - 1rem - 22px);}
    footer .tools{top:-1.8rem;}
    footer .tools a{background:var(--ci1); display: inline-block; border-radius: 8px 8px 0 0; padding:5px 10px; margin-right:10px;}
    .qa_list li{margin-left:1rem;}
    .o li .price{position: static;}
}