/*html,body{
    -webkit-overflow-scrolling : touch !important;
    margin:0;
}*/

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  img[src$=".svg"] {    width: 100%;   }}
a, *:hover, *:active{-webkit-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; -moz-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; -ms-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; -o-transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; transition: background 500ms ease-in-out, height 500ms ease-in-out, color 500ms ease-in-out; }

input[type="button"], input[type="submit"], input[type="reset"], input[type="text"], input[type="email"] {-webkit-appearance: none;}
/*select,*/ textarea {  -webkit-appearance: none;}
img{display:block;}

body{margin:0; font-family:'Open Sans', sans-serif,"Noto Sans TC"; font-size:17px; color:#51534a; overflow-x:hidden;}
/*p{ color:#333; line-height:36px;}*/
.clean{clear:both;}
.no_c{display:none;}
.boxsizing{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.flex-column{flex-direction:column;}
.vertical-container {

  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.transition{transition:all 0.5s ease-in-out;}
.textcenter{text-align:center;}
ul.btn{text-align:center; margin:20px auto 30px auto;}
ul.btn li{display:inline-block; margin-right:20px;}
ul.btn li:last-child{margin-right:0;}
ul.btn li a, ul.btn li input{padding:7px 30px; font-size:20px; cursor:pointer; background:#e6000d; color:#fff; border:2px #e6000d solid;}

/* header */
.main_h{width:100%; padding:5px 0; position:fixed; top:0; z-index:9999; background:#fff; overflow:hidden;box-shadow:4px 4px 3px -3px rgba(20%,20%,40%,0.5);}
.main_h .logo{width:170px; margin:15px 40px;}
.main_h .logo img{width:170px; height:24px;}
.main_h .menu{margin:15px 40px 0 0; overflow:hidden; text-align:right; width: -moz-calc(100% - 290px); width: -webkit-calc(100% - 290px); width: calc(100% - 290px);}
.main_h .menu li{font-size:16px; line-height:18px; letter-spacing:0.07em; display:inline-block; vertical-align:middle;}
.main_h .menu li a{color:#333; padding:10px; display:block;}
.main_h .menu li.fb{width:32px;}
.main_h .menu li.fb a{padding:0;}
.main_h .menu li.fb img{width:32px; height:32px;}
.go a:before,
.go a:after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
    transition: opacity 0.2s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
}

.go a:before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translate(20px);
    transform: translate(20px);
}

.go a:after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translate(-20px);
    transform: translate(-20px);
}


.sticky {
  background:rgba(0,0,0,0.3);
  opacity: 1;
  top: 0px;
}
.open-nav {
  max-height: 400px !important;
}
.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 20px;
  top: 10px;
  width: 30px;
  height:30px;
}
.mobile-toggle span {
  width: 30px;
  height: 3px;
  margin: auto;
  border-radius: 1000px;
  background: #333;
  display: block;
  top:0;
  bottom:0;
  position:absolute;
}

.banner{margin-top:64px; position:relative; overflow:hidden;}
.banner .banner-bg{width:100%; position: relative; z-index:0;}
.banner .banner-img>img{width:100%; position:absolute; top:0; left:0; z-index:-1;}
.banner .banner-img>img:nth-of-type(3){z-index:1;}
.banner .banner-img>img:nth-of-type(4){top:90px; z-index:1;}
.banner .banner-title{background:#fffbd2; text-align:center; width:100%; height:110px;}
.banner .banner-title h2{ font-size:40px; line-height:70px; height:70px;}
.banner .banner-title h2 time{font-size:0.5em; -webkit-transform:scale(0.8); color:#fff; background:#433f3f; width:1.8em; height:1.8em; border-radius:0.9em; display:inline-block; vertical-align: baseline; line-height:1.8em; text-align:center;}
.banner .banner-title h2 span{margin:0 10px; width:0; height:0; border-top: 15px solid transparent; border-left: 30px solid #433f3f; border-bottom: 15px solid transparent; display:inline-block;}
.banner .banner-title p{letter-spacing:0.6em; color:#e6000d;}

/*box1*/
section, .box4_info {
    width: 70%;
    max-width: 1000px;
    margin: 0px auto;
    z-index: 999;
    display: block;
    padding: 30px 0;
}
.box1{padding:50px 0;}
.box1 .box1-title{width:45%; display:inline-block;}
.box1 .box1-title>img{width:100%;}
.box1 .box1-product, .box1 .box1-product-moble{margin-top:20px;}
.box1 .box1-product>img, .box1 .box1-product-moble>img{width:50%; margin-right:10px; display:inline-block;}
.box1 .box1-product span, .box1 .box1-product-moble span{ width:-moz-calc(50% - 16px); width: -webkit-calc(50% - 16px); width: calc(50% - 16px); display:inline-block; color:#3a759e; vertical-align: top; margin-top:50px;}
.box1 .box1-product-moble{display:none;}

.box1 .box1-text{ line-height:1.8em; color:#231f20; width:-moz-calc(55% - 26px); width: -webkit-calc(55% - 26px); width: calc(55% - 26px); margin-left:20px; display:inline-block; vertical-align:top;  margin-top:20px;}
.box1 .box1-text>li{margin-bottom:10px;}
.box1 .box1-text>li span{color:#db0032;}
.box1 .box1-button{width:100%; margin-top:20px; text-align:right;}
.box1 .box1-button a{ display:inline-block;}
.box1 .box1-button a img{width:100%;}

.box4{background:#e5edf8;width:100%; max-width:100%;}
.box4 ul li{margin-left : 1.7em; text-indent : -1.7em ; margin-bottom:10px;}
.box4 .box4_url{text-align:center; margin:30px auto 0 auto;}
/*active*/
.top_banner{margin-top:64px;}
.top_banner img{width:100%;}
.form{width:90%; margin:30px auto; max-width:1200px; background:#fff;}
.form .tips{margin:30px auto; width:100%; font-size:2em; line-height:2.5em; color:#e6000d; font-weight:bold;}
.form .row{margin-bottom:20px; color:#000; font-size:18px;}
.form .row label.item{width:150px; padding:10px; text-align:right; float:left;}
.form .row label.l200{width:200px; text-align:left;}

.form .row:nth-last-child(2) img{vertical-align:middle; margin-left:10px;}
.form .text_basic, .form .text_red{background:rgba(0,0,0,0.1); border:none; margin-left:1%; padding:10px; line-height:22px; font-weight:normal; float:left;}
.form .text_red{border:1px #e6000d solid;}
.form .text_red::-webkit-input-placeholder{ color: #e6000d;}
.form .text_red::-moz-placeholder{ color: #e6000d;}
.form .text_red:-ms-input-placeholder{ color: #e6000d;}
.form .text_red:-moz-placeholder{ color: #e6000d;}
.form .pro-img-show{width:50%; display:inline-block; margin-right:30px;}
.form .pro-img-show img{width:100%;}
.form .pro-info-show{ width:-moz-calc(50% - 36px); width: -webkit-calc(50% - 36px); width: calc(50% - 36px); display:inline-block; vertical-align:top;}
.form .pro-info-show li{margin-bottom:10px;}

.w93{width:93%;}
.w84{width:84%;}
.w67{width:67%;}
.w50{width:50%;}
.w20{width:20%;}
.w10{width:10%;}
.form .row label.m30{margin-left:30px; text-align:right;}

.link, .marks{float:left;}
.link a{color:#29abe2; margin-left:10px; float:left; line-height:42px;}
.marks{ margin-left:10px; line-height:42px; color:#333;}
.con-booking{ width:100%; text-align:right; margin-bottom:10px;}
.con-booking a{ padding:7px 30px; font-size:20px; cursor:pointer; background:#8a714a; color:#fff; border:2px #8a714a solid; width:80px; margin-bottom:5px;}
.h120{height:120px;}
.no_underline{border:0 !important;}
.checkbox{padding:10px; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.row .sex{margin:1% 0 0 2%; display:inline-block; font-size:18px;}
/*input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}*/
.custom-file-upload { border: 1px solid #e6000d;  display: inline-block;  padding: 6px 12px;  cursor: pointer;  background: #e6000d;  border-radius: 10px;  color: #fff;}

.marks{color:#51534a;}
.marks-red{color:#e6000d;}
.FB_Share{width:40%; margin:30px auto; text-align:center; max-width:300px;}
.FB_Share img{width:100%;}


/*page*/
.pro_title .right-wrap { float:left; width: calc(80% - 20px); margin-left:20px;}
.pro_title .right-wrap .pro-list{position:relative;}
.pro-list .pro{position:relative; width: -moz-calc((100% / 3 ) - 1px); width: -webkit-calc((100% / 3 ) - 12px); width: calc((100% / 3 ) - 12px); display: inline-block; margin: 0 12px 15px 0; vertical-align: top; overflow:hidden; border-bottom:none; }
.pro-list .pro:nth-child(3n){ margin:0 0 15px 0;}
.pro-list .pro a{position:absolute; top:0; left; 0; width:100%; height:100%; z-index:999;}
.pro-list .pro .pro-img{position:relative; width:100%; overflow:hidden; background:#FFF; padding:10px;}
.pro-list .pro .pro-img img{ width: calc(100% - 20px);}

.pro-list .pro h4{ font-size:1em; padding:5px 0; text-align:center; font-weight:normal;}
.pro-list .pro:hover h4{color:#860d17;}
.pro-list .pro time{font-size:0.8em; text-align:right; color:#888;}

.video-container {position: relative; padding-bottom: 56.25%;  padding-top: 30px;  height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%;  height: 100%;}
/*page */
.page { padding: 30px 0; text-align: center; }
.page span > a, .page span > span { width: 25px; height: 40px; margin: 0 1px; padding: 0 3px 0 0; display: inline-block; line-height: 25px; font-size: 13px; /*text-align: right;*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; line-height:40px; }
.page span > a {background-color: #fff; color: #090914; }
.page span > span, .page span > a:hover { background-color: #860d17; color: #fff; font-weight: bold; }

/*go top*/
.cd-top {display: inline-block;height: 40px;width: 40px;position: fixed; bottom: 20px; right: 30px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border-radius:50%;/* image replacement properties */overflow: hidden;text-indent: 100%;white-space: nowrap; background:url(../images/cd-top-arrow.svg) no-repeat center 50% #555; background-size:25px auto;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {z-index:999999;-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {background-color: #20A2FF;opacity: 1;}

@media only screen and (max-width: 1350px) {
    .banner .banner-title h2{font-size:30px;}
    .banner .banner-title p{letter-spacing:0.4em;}
}


@media only screen and (max-width: 1024px){
body{font-size:15px;}

.banner .banner-title h2{font-size:23px;}
.banner .banner-title p{letter-spacing:0.3em;}

.main_h .menu li.fb:hover img{opacity:0.7;}
.go a:hover:before,
.go a:hover:after,
.go a:focus:before,
.go a:focus:after {
    opacity: 1;
    -webkit-transform: translate(0px);
    transform: translate(0px);
}

.main_h{max-height:45px;}
.main_h .logo{width:140px; margin:10px 40px;}
.main_h .logo img{width:140px; height:auto;}
.main_h .menu{width:100%; margin-top:10px; margin-right:0; padding-bottom:15px; text-align:center;}
.main_h .menu li{display:block; text-align:center;}
.main_h .menu li.fb{width:100%;}
.main_h .menu li.fb img{margin:auto;}
.mobile-toggle{display:block;}
.mobile-toggle span:nth-child(1){ -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); transform:translateY(-10px);}
.mobile-toggle span:nth-child(2){ top:0; bottom:0;}
.mobile-toggle span:nth-child(3){ -webkit-transform:translateY(10px); -moz-transform:translateY(10px); transform:translateY(10px);}
.open-nav .mobile-toggle span:nth-child(1){-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); top:0; bottom:0;}
.open-nav .mobile-toggle span:nth-child(2){opacity:0;}
.open-nav .mobile-toggle span:nth-child(3){-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); top:0; bottom:0;}

.mobile-img{display:inline-block;}

/*active*/
.top_banner{margin-top:55px;}
.form .row label.m30{width:100px;}
}

@media only screen and (max-width: 850px) {
    .banner .banner-img > img{width:120%; margin-left:-10%;}
    .banner .banner-img>img:nth-of-type(4){top:-30px;}
}

@media only screen and (max-width: 768px){
.box1 .box1-title{width:100%;}
.box1 .box1-text{width:100%; margin-left:0px;}

.form .row label.m30{ width: 80px; margin-left:10px;}

.pro-list .pro{width: -moz-calc((100% / 2 ) - 12px); width: -webkit-calc((100% / 2 ) - 12px); width: calc((100% / 2 ) - 12px); }
.pro-list .pro:nth-child(3n){ margin:0 12px 15px 0;}
.pro-list .pro:nth-child(2n){ margin:0 0 15px 0;}

.box1 .box1-button{text-align: center;}
.box1 .box1-button a{width:45%;}
.box1 .box1-product{display:none;}
.box1 .box1-product-moble{display:inline-block; margin-top: 0px;}
}


@media only screen and (max-width: 600px) {
body{font-size:12px;}

.form .row label.item{width:100px;}
.form .row label.l200{width:200px;}
.form .row label.m30{ width: 75px;}
.w10{ width: 15%;}
.top_banner img{width:150%; margin-left:-25%;}
}

@media only screen and (max-width: 510px) {
 
     .fancytable td img{width:15%;}
     img.mobile-img{width:30%;}

    .form .row label.item{width:100%; text-align:left;}
    .w50 {width: 100%;}
    .w20 {width: 70%;}
    .w10{width:50%;} 
}


@media only screen and (max-width: 435px) {

    .fancytable td img{width:100%;}

    .top_banner img{width:200%; margin-left:-50%;}
    .form .tips{margin:10px auto; line-height:1em;}

    .pro-list .pro{width: -moz-calc(100% - 12px); width: -webkit-calc(100% - 12px); width: calc(100% - 12px); }
    .pro-list .pro:nth-child(2n), .pro-list .pro:nth-child(3n){ margin:0 0 15px 0;}
}

@media only screen and (max-width: 375px) {

    img.mobile-img{padding-bottom:15px;}
}

/* footer */