@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(../css/hover.css);
/*------------HAPPY GO 固定CSS Start------------*/
body{ margin: 0; padding: 0;font-family:Arial,\5FAE\8EDF\6B63\9ED1\9AD4,'Noto Sans TC','Microsoft JhengHei','微軟正黑體';}
* {margin: 0; padding: 0;}
a, a:link, a:visited{text-decoration: none;display: inline-block; cursor: pointer;}
a:hover, a:active{text-decoration:none;}
ul{list-style: none;display: inline-block;margin: 0; padding: 0;}
li{display: inline-block;}
.clr {clear: both;}
.fl {float: left;}
.fr {float: right;}
.tc{text-align: center;margin: 0 auto;}
img.image-rwd{ width:100%}
p, li{ font-size:18px; line-height:28px;}
h1{font-family:"Microsoft JhengHei"!important;font-weight:bolder!important;color:#241e7a!important;}
.remark{font-size:14px; color:#D80000}
@media (max-width: 1024px) {
  p, li{ font-size:15px;}
} 

/*header*/
header {text-align: center;padding: 7px 0;position:absolute;z-index:109;left:10px;top:0;}
header .fr a:link, header .fr a:visited{display:inline-block;margin-left:5px;}
header .topnav {/*width:98%;margin:0 auto;line-height:30px;font-size:15px;*/}
header .topnav a:link, header .topnav a:visited{text-decoration: none; color:#241e7a; font-size: 15px; }
header .topnav a:hover, header .topnav a:active{color:#241e7a; text-decoration: none;}
header .topnav .fl{margin-right: 8px; color:#241e7a}
header .topnav .fl a{color:#241e7a; font-weight: bolder;}
header .topnav .fl img{margin-right:3px;margin-left: 10px;margin-top: -3px;}
header .topnav .fr{ float: right; margin-right: 15px;}
header .topnav .fr li .glyphicon{-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%; padding: 8px;}
header .topnav .fr li .fb{ width: 35px; height: 35px; background: url(../images/facebook.png) no-repeat center center;background-size:100%}
header .topnav .fr li .google{ width: 35px; height: 35px; background: url(../images/google.png) no-repeat center center;background-size:100%}
header .topnav .fr li .line{ width: 35px; height: 35px; background: url(../images/line.png) no-repeat center center;background-size:100%}

header .topnav > div.fl:first-child > a > img{margin-left: 0;}

@media screen and (min-width: 650px) and (max-width: 934px) {
  header .topnav {width: 100% ; margin:5px 20px 0 auto;line-height:18px;font-size:12px;}

  }
@media screen and (min-width: 320px) and (max-width: 649px) {
  header .topnav {width: 100% ; margin:0 20px 0 auto;line-height:18px;font-size:12px;}
  header .topnav > div.fl:nth-child(2){ display: none}
}

/*nav*/
.nav-mobile{position:fixed;top:30px; right:40px;z-index:900;}
.nav-mobile-header{width:50px;height:50px;background:url(../images/icon_menu_mobile.png) left 0 #12448f; display:block; cursor:pointer;position:relative;z-index:910;}
.nav-mobile-header.fold{
	background-position: left 0;
}

#main-nav.mobile{ display: none;position:fixed; top:70px; right:0px;z-index:100;}
#main-nav.mobile ul{ margin:0px; padding:40px 10px 5px;list-style-type:none;display: block;}
#main-nav.mobile li{ font-size:12px; color:#666666;background:url(../images/nav_line.png) no-repeat center bottom; text-align:left; padding:0 10px 3px; margin-top:5px; border-bottom: 1px dashed #ccc; display: block; text-align:center}
#main-nav.mobile li span{ font-size: 16px; color: #fff;}
#main-nav.mobile li .glyphicon{-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;width: 36px; height: 36px; padding: 10px; border: 3px solid #ff591f}
#main-nav.mobile li p{ margin: 6px 0 0; padding: 0; font-size: 12px;line-height: 10px}
#main-nav.mobile li a{color:#666666; }
#main-nav.mobile li a:hover{color:#333; text-decoration:none;}

#main-nav.pc{position:fixed; top:50px; right:0px;z-index:100;}
#main-nav.pc ul{ margin:0px; padding:40px 10px 5px;list-style-type:none;display: block;}
#main-nav.pc li{ font-size:12px; color:#666666;background:url(../images/nav_line.png) no-repeat center bottom; text-align:left; padding:0 10px 3px; margin-top:5px; border-bottom: 1px dashed #ccc; display: block; text-align:center}
#main-nav.pc li span{ font-size: 16px; color: #fff;}
#main-nav.pc li .glyphicon{-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;width: 36px; height: 36px; padding: 10px; border: 3px solid #ff591f}
#main-nav.pc li p{ margin: 6px 0 0; padding: 0; font-size: 12px;line-height: 10px}
#main-nav.pc li a{color:#666666; }
#main-nav.pc li a:hover{color:#333; text-decoration:none;}

.apply-for-card{border:1px solid #12448f; background-color:#12448f;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%; width:90px; height:90px;color:#fff;position:fixed; top:280px; right:20px;z-index:100; text-align:center}
.apply-for-card a{color:#fff; font-weight:bolder; font-size:13px;}
.apply-for-card a:hover{ color:#fff; text-decoration:none}
.apply-for-card .card{ padding-top:10px;}
.apply-for-card{
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
@media screen and (max-width: 767px) {
.nav-mobile{top:10px; right:10px;}
.nav-mobile-header{background:url(../images/icon_menu_mobile.png) 50px 0 #12448f;}
.nav-mobile-header.fold{
	background-position: left 0;
}
#main-nav.mobile{top:20px; right:0px;z-index:100; background:url(../images/w-alpha-80.png);border:1px solid #fff;}
#main-nav.mobile li{ font-size:18px;padding:0 10px 10px; margin-top:15px;}
}
/*KV*/
#kv{background:url(../images/bg-kv.jpg) no-repeat center -50px; background-size:100%;height:635px;}
#kv .sign{margin:0 auto; padding:0;background:url(../images/kv.png) no-repeat center top; background-size:contain;height:600px;}
#kv .sign img{ width:100vw; height:100vh;}
@media screen and (min-width:1680px) {
#kv{background:url(../images/bg-kv-lg.jpg) no-repeat center top; background-size:100%;}
}
@media screen and (min-width:2200px) {
#kv{background:url(../images/bg-kv-lg.jpg) no-repeat center -125px; background-size:100%;}
}
@media screen and (max-width: 1024px) {
#kv{background:url(../images/bg-kv-xs.jpg) no-repeat left -325px;}
}
@media screen and (max-width: 767px) {
.apply-for-card{right:5px;}
#kv{background:url(../images/bg-kv-xs.jpg) no-repeat left -100px; background-size:cover;height:430px;}
#kv .sign{background:url(../images/kv.png) no-repeat center top; background-size:120%;height:600px;}
}
@media screen and (max-width: 375px) {
#kv{background:url(../images/bg-kv-xs.jpg) no-repeat left -80px; background-size:cover;height:390px;}
#kv .sign{background:url(../images/kv.png) no-repeat center 20px; background-size:110%;height:600px;}
}
/*section*/
section{}
section .container{padding:45px 100px;}
section.gary{background-color:#f9f8f7;}
section .title{height:45px; line-height:45px;background:url(../images/line-center.png) repeat-x left center; text-align:center}
section h1{height:45px; line-height:27px;background-color:#fff;margin:0px; padding:0 15px;color:#8a1c36!important;font-size:26px; display:inline-block}
section.gary h1{background-color:#f9f8f7;}
section p{ font-size:15px; color:#666;line-height:22px; clear:both; padding-top:15px}
section p span{ color:#134693}
@media screen and (max-width: 1024px) {
section .container{padding:25px 20px;}
}
@media screen and (max-width: 767px) {
section h1{font-size:22px;padding:0 5px;}
section p{padding-top:25px}
section p br{ display:none}
}
/*offer*/
.offer-group{ margin-top:25px;}
.offer-group ul{ margin:0; padding:0;}
.offer-group li{ display:block;margin:0 0 20px; padding:0;}
.offer-group li span, .offer-group li p{display:inline-block; color:#8a1c36;}
.offer-group li span{margin:0 auto; padding:0;width:85px; height:85px; line-height:85px;text-align:center; background-color:#8a1c36;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%; text-align:center;}
.offer-group li p{font-size:24px;margin-left:5px; vertical-align:top; margin-top:25px;}
.offer-group li p small{display:block;font-size:12px;font-variant:100!important;}
.gift.col-sm-4{margin:80px 0 0; padding:0;}
.suitcase.col-sm-6{}
.icon-offer-01 img{margin-top:15px}
.icon-offer-02 img{margin-top:17px}
.icon-offer-03 img{margin-top:23px; padding-right:10px;}
/*map*/
.map-group{ padding:25px 0}
@media screen and (max-width: 1024px) {
.offer-group li span{width:65px; height:65px; line-height:65px;}
.offer-group li p{font-size:18px;margin-top:5px;}
}
@media screen and (max-width: 767px) {
.gift.col-sm-4{margin:0;}
.offer-group li{margin:0 0 10px;}
.offer-group li span{width:95px; height:95px; line-height:95px;}
.offer-group li p{font-size:24px;margin-top:5px;}
.icon-offer-01 img{margin-top:18px}
.icon-offer-02 img{margin-top:20px}
.icon-offer-03 img{margin-top:26px; padding-right:10px;}
}
/*place*/
.place-group{ text-align:center; margin:35px auto}
.place-group a{ color:#666; text-decoration:none!important;}
.place-group a:hover{ color:#333}
.place-group .logo{ background:url(../images/w-alpha.png); border:1px solid #d5d5d5;}
.icon-place{ width:27px; height:27px; background:url(../images/icon-place.png) no-repeat center center; display:inline-block; position:relative; top:5px; margin-right:3px;}
.precautions{ margin-top:20px}
.precautions ol{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; background-color:#fff; clear:both; padding:25px 50px 10px}
.precautions li{ text-align:center}
.precautions li img{ width:150px}
.precautions li:last-child p{ margin-top:30px}
/* rule */
#rule h4{ color:#891c36; font-size:16px;}
#rule  a{color:#891c36; text-decoration:underline;}
#rule p, #rule li, article{color:#666!important;font-size:15px; line-height:24px;}
#rule article li{ display:list-item; list-style-type:square; padding-left:0px; margin-left:20px;}
@media screen and (max-width: 767px) {
.place-group{margin:35px auto 10px}
.place-group p{margin:10px 0 0; padding:0;}
.place-group li{ margin-bottom:15px;}

.precautions{ margin-top:0px}
.precautions ol{padding:15px 10px 10px}
.precautions li p{ margin:5px 0 0; padding:0;}
#rule h4, #rule p, #rule li{margin:10px 0 0; padding:0;}
}
/* footer */
footer{padding:10px 0 0px; clear:both; background-color:#8a1c36;color:#fff;}
footer .container{ padding:0 55px;}
footer p{font-size:12px; line-height:16px; text-align:center}
@media screen and (max-width: 767px) {
footer .container{ padding:0px 15px;}
}
@media screen and (min-width: 480px) {
footer p br{ display:none}	
}

#gotop {display:none;position: fixed;right: 30px;bottom: 60px;cursor: pointer;background:url(../images/icon_arrow.png) no-repeat left top;width:60px;height:60px;z-index:100!important;}
@media only screen and (max-width: 767px) {
#gotop {right: 5px;bottom: 30px;}
}