@charset "UTF-8";
html, body{width:100%;}
img{max-width:100%;}
html{overflow-x: hidden;}
body{background: #EFF3F6;}
section{width: calc(100% - 20px); max-width: 1400px; margin:0 auto;}
header{background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); position: fixed; left:0; top:0; z-index: 99; width:100%;}
header .logo{height: 60px; margin:10px 0; font-family: "Noto Sans TC", sans-serif;}
main{margin-top:88px; padding: 20px 0;}
footer{padding:10px; background: #ebebeb; border-top:3px #fff solid;}
footer .logo{height: 45px; margin:10px;}
footer .col-12{font-size: 13px;}
footer .qrcode{height: 85px;}
#banner{background: url('../img/banner.jpg') no-repeat center; background-size: cover; margin-top:-25px; height: 380px; display: flex;}
#banner h1, #banner h2{color:#363232; font-weight: 700; text-shadow: 1px 1px 5px #fff;}
#banner h2{font-weight: 600;}
#banner .info{padding:30px 0 0px 50px; max-width:527px;}
#contactUs{background:url('../img/contactUsBg.jpg') no-repeat center rgba(255,255,255,0.8); background-attachment: fixed; background-blend-mode: multiply; background-size:cover; padding:50px 0;}
#contactUs div{font-size: 36px; font-weight: 700; line-height: 2; color:#fff; text-shadow: 1px 1px 3px #000;}
#contactUs a{background: #11e451; color:#fff; border-radius: 8px; line-height: 1; padding:8px 15px; text-decoration: none; font-size: 20px; font-weight: 600; border:1px #fff solid; box-shadow: 0px 0px 20px rgba(255,255,255,0.6); margin-top:20px; text-shadow: none; transition: all .3s ease;}
#contactUs a:hover{background: #fff; color:#11e451;}
.notice{font-size: 13px; color:#7e7a7a;}
.swiperbox{position: relative;}
.swiperbox > div{overflow: hidden;}
.swiperbox .arrow{position: absolute; z-index: 2; top:50%; transform: translateY(-50%); left:5px;}
.swiperbox .arrow.swiper-next{right:5px; left:auto;}
.swiperbox .arrow.swiper-button-disabled{opacity: 0.4;}
.swiperbox .arrow img{max-width:40px;}
.swiperbox .swiper-slide img{max-width:100%;}
.swiper1 .swiper-pagination{position: relative;}
.swiper1 .swiper-pagination span{width:auto; height: auto; border-radius: 15px; padding:5px 15px; color:#fff; font-weight: 600; font-style: italic; margin: 0 10px !important;}
.swiper3{margin:0 50px;}
.swiper3 .swiper-wrapper{width:90%;}
.swiper3 .swiper-slide{background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.1); width:calc(33% - 0px);}
.swiper3 .info{margin:20px 15px;}
.swiper3 .title{font-size: 18px; font-weight: 600; color:#b513a3; margin-bottom:15px;}
.swiper3 .swiper-pagination{position: relative;}
.swiper3 .swiper-pagination span{width:auto; height: auto; border-radius: 15px; padding:5px 15px; color:#fff; font-weight: 600; font-style: italic; margin: 10px 10px !important;}
.area_title{text-align: center; margin:40px 0 30px 0; font-size: 24px; color:#f8af38; font-weight: 600;}
.area_title div{font-size:16px; color:#c7c7c7;}
table.list{width:100%; margin:20px 0;}
table.list td{border-bottom: 1px #6b4a4a  solid; padding:10px;}
.title1{color:#F15A24; font-weight: 700;}
.btn{color:#fff; border-width:1px; border-style: solid; border-radius: 8px; font-weight: 700; line-height: 1; padding:8px 12px;}
.btn1{background:#ee87b4; border-color:#ee87b4;}
.btn2{background: #fac109; border-color:#fac109;}
.btn3{background:#F15A24; border-color:#F15A24;}
.btn4{background: #1d3f7e; border-color:#1d3f7e;}
.btn5{background: #f8af38; border-color:#f8af38;}
.btn:hover{background: #fff;}
.btn1:hover{color:#ee87b4; border-color:#ee87b4;}
.btn2:hover{color:#fac109; border-color:#fac109;}
.btn3:hover{color:#F15A24 !important; border-color:#F15A24;}
.btn4:hover{color:#1d3f7e; border-color:#1d3f7e;}
.btn5:hover{color:#f8af38; border-color:#f8af38;}
.gallery_btns a{margin-left:10px;}

@media screen and (max-width: 730px) {
    header .logo{width:100%; height: auto;}
    header .btn{width:66px;}
    #banner .info{padding:30px 0 0 0;}
    #contactUs{background-attachment: unset;}
    #contactUs div{font-size: 26px;}
    table.price_list th{font-size: 14px;}
    table.price_list td{font-size: 13px;}
    footer *{font-size: 13px;}
    .rt_tools{width:50%;}
    .swiper3{margin:0;}
    .swiper3 .swiper-prev, .swiper3 .swiper-next{display: none;}
    #swiper3-nav span{display: block; margin:5px 0;}
    .gallery_btns a{font-size: 13px;}
}
@media screen and (max-width: 480px) {
}