@charset "utf-8";

/* main-color與submain-color 吃bootstrap-airport的root */
.navbar{ height:90px; border-top-width: 8px;
	border-top-style: solid;
	border-top-color: var(--main-color);
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
	background-color: rgba(255,255,255,0.8);
	padding-left: 40px!important;
	padding-right: 40px!important}
.navbar-default {background-color: #fff; }
@media screen and (min-width: 992px) {
.navbar-fixed-top .container-fluid {}
}	
.navbar-default .navbar-brand .dark{display:none}
.navbar-default.navbar-shrink .navbar-brand .dark{display:block!important}
.navbar-default .navbar-brand .light{display:block}
.navbar-default.navbar-shrink .navbar-brand .light{display:none!important}
.sys a{ color: #666!important}
.sys a:hover{ color: var(--main-color)!important}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus, 
.navbar-default .navbar-toggle:active
{ border-color: transparent!important;background-color: transparent!important}

.navbar-default .navbar-toggle .icon-bar {background-color: #fff}
.navbar-default .nav li a {
	font-size:18px;
	font-weight: 400;
	color: #fff;
	padding: 25px 20px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
	letter-spacing: 2px;
	
}
.navbar-default .nav li > a, .navbar-default .nav li a:hover, .navbar-default .nav li a:focus {
    color: #fff;
}
.navbar-default ul{margin-top:8px}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: var(--main-color)
}
.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    /**background-color: transparent;**/
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}
.navbar-default.navbar-shrink .nav li.active>a {
    border-radius: 0;
    color: #fff;
    background-color: var(--main-color);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}
/**shrink**/
.navbar-default.navbar-shrink .nav li > a,
.navbar-default.navbar-shrink .navbar-brand { color: #666;}
.navbar-default.navbar-shrink .nav li > a:hover{color: var(--main-color);}
.navbar-default .nav li > a:hover{color: var(--submain-color);}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {color: var(--main-color);background-color: #333}

@media (max-width: 540px) {
.navbar{
	padding-left:10px!important;
	padding-right: 0px!important}
}
@media (max-width: 768px) {
.navbar-default {height:75px}
.mobile-nav{
box-shadow: 0 -3px 3px -0px rgba(0,0,0,0.15);
	width:100%;
	height:70px;
	position: fixed;
	bottom: 0px;
	background-color: #FFF;z-index:999}
.mobile-nav ul{margin:0px;padding:0px}
.mobile-nav ul li{display:block;padding:15px;width:20%;text-align:center;float:left;display:block}
.mobile-nav .act li {background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);}
.mobile-nav .act i,.mobile-nav .act label {color:#fff}
.mobile-nav i {
	font-size:20px!important;
	display:block;
	color: #000;}
.mobile-nav label{	font-size:12px;font-weight: 400;color: #000;margin-top:5px;}
.navbar-default .navbar-brand img{height:40px!important}
.navbar-default .navbar-toggle{margin-top:0px;!important}
.navbar-default label{font-size: 12px;color: #666;}
.navbar-default .navbar-toggle img{height:27px!important;}
}


@media (max-width: 926px) {
.navbar-default .nav li a {padding: 25px 7px;}
}   
@media(min-width:767px) {
.animated-navigation #main-navigation .navbar-nav li {
        opacity: 0;
        top: -50px;
        position: relative;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        pointer-events: none;
        cursor: pointer;
    }
    .animated-navigation #main-navigation.menu-active .navbar-nav li {
        opacity: 1;
        top: 0px;
        position: relative;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        pointer-events: auto;
        cursor: auto;
    }

}
header{border-top-width: 8px;
	border-top-style: solid;
	border-top-color: var(--main-color);    }	

@media(min-width:768px) {
    .navbar-default {		
        padding: 0px 0;
        background-color: transparent;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        margin-bottom: 0;
    }
    .navbar-default .navbar-brand {
      
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
        font-weight: 900;
    }
    .navbar-default.navbar-shrink {
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        background-color: #fff;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }
}
.navbar-default .navbar-brand img{height:50px}


/*--------------------------------------------------------------
 header
--------------------------------------------------------------*/
.navbar-default{border-bottom: 0px solid rgba(255,255,255,.4);}

.modal-body .today li a img{width: 100%;}
.modal-body .today>li>a {padding: 0;position: relative;width: 50%;transition: all .5s;float:left;width:50%;}
.modal-body .today .go a:before,
.modal-body .today .promo a:before,
.modal-body .today .info a:before,
.modal-body .today .order a:before{
  position: absolute;
  left: 09;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  content: "";
  z-index: 99;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  opacity: 0;
  transition: all .5s;
}
.modal-body .today .go a:after,
.modal-body .today .promo a:after,
.modal-body .today .info a:after,
.modal-body .today .order a:after{
	position: absolute;
	left: 09;
	top: 0;
	width: 100%;
	height: 100%;
	content: "立即預約";
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size: 35px;
	color: #fff;
	z-index: 999;
	opacity: 0;
    transition: all .5s;
	font-weight: 800;
}
.modal-body .today .promo a:after{ content: "優惠內容"; }  
.modal-body .today .info a:after{ content: "訊息公告"; }
.modal-body .today .order a:after{ content: "訂單查詢"; }
.modal-body .today li a:hover:after{ opacity: 1; }
/* .modal-body .today .go a:hover:after,
.modal-body .today .promo a:hover:after,
.modal-body .today .info a:hover:after,
.modal-body .today .order a:hover:after{  opacity: 1;} */
.modal-body .today li a:hover:before{ opacity: .9; }
/* .modal-body .today .go a:hover:before,
.modal-body .today .promo a:hover:before,
.modal-body .today .info a:hover:before,
.modal-body .today .order a:hover:before
{opacity: .9;} */
/* .modal-body .nav>li>a {padding:0;float:left;width:50%;}  */