@charset "UTF-8";
/* CSS Document */
body {
	background: url(../images/bg.jpg) top center no-repeat;
	font-family: "微軟正黑體", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
img {
	height: auto;
	flex: none;
}
.top_bar {
	position: fixed;
	width: 100%;
	background: #fff;
	z-index: 9999;
}
.top_menu {
	position: relatives;	
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}
.navbar-brand {
	width: 10%;
	padding-bottom: 10px;
	max-width: 140px;
	min-width: 100px;
}
button:focus {
    outline: 1px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}
.navbar-toggler {
    padding: .20rem 0rem;
    background-color: transparent;
    border: 0px solid transparent;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: #005aa9;
	font-weight: bold;
}
#nav-icon{
  width: 40px;
  height: 30px;
  position: relative;
  margin: 10px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 6px;
  width: 50%;
  background: #005ba6;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}

#nav-icon span:nth-child(odd) {
  left:0px;
  border-radius: 9px 0 0 9px;
}

#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {
  top: 0px;
}

#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
  top: 12px;
}

#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
  top: 24px;
}

#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(1) {
  left: 5px;
  top: 7px;
}

#nav-icon.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}

#nav-icon.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon.open span:nth-child(5) {
  left: 5px;
  top: 17px;
}

#nav-icon.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 17px;
}
.collapse.show {
    border-top: 1px dotted #ccc;
}
.sub_bar {
	position: relative;
    padding: 5px 0;
    background: #005aa9;
}
.sub_menu {
	position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}
.sub_menu a {
	color: #efefef;
}
.sub_menu .nav-item .active {
	color: #FFFF00;
}
.top_banner {
	margin: 0 auto 20px auto;
	padding-top: 145px;
	position: relative;
	width: 100%;
	max-width: 1600px;
}
.carousel-inner {
    max-height: 750px;
}
.wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0 10px;
	width: 100%;
	max-width: 1200px;
}
.card-group, .card-deck {
	margin: 0 0 20px 0;
}
.carousel {
	z-index: 2;
}
.carousel-caption {
	top: 0%;
    width: 100%;
    left: 0;
    right: 0;
	padding: 0;
}
.carousel-caption div:first-child {
	position: absolute;
    top: 9%;
    left: 0;
    right: 0;
    animation-delay: 0s;
    margin: 0 auto;
    width: 43%;
    max-width: 685px;
    z-index: 9;
}
.carousel-caption div:nth-child(2) {
	position: absolute;
    top: 34.5%;
    left: 0%;
    right: 0;
    margin: 0 auto;
    width: 60%;
    max-width: 935px;
    animation-delay: 0.1s;
}
.carousel-caption div:nth-child(3) {
	position: absolute;
    animation-delay: 0.5s;
    width: 13%;
    max-width: 196px;
	top: 42.5%;
    left: 26%;
    right: 0;
    margin: 0 auto;
    z-index: 5;
}
.carousel-caption div:nth-child(4) {
	position: absolute;
    animation-delay: 0.2s;
    width: 7%;
    max-width: 99px;
	top: 7%;
    left: 45.5%;
    z-index: 1;
}
.carousel-caption div:nth-child(5) {
	position: absolute;
    animation-delay: 0.2s;
    width: 7%;
    max-width: 107px;
    top: 4%;
    left: 51.2%;
    z-index: 1;
}
.carousel-caption div:nth-child(6) {
	position: absolute;
    animation-delay: 0.3s;
    width: 22%;
    max-width: 349px;
	top: 15%;
    left: 53.3%;
    z-index: 1;
}
.carousel-caption div:nth-child(7) {
	position: absolute;
    animation-delay: 0.4s;
    width: 14%;
    max-width: 216px;
	top: 32.9%;
    left: 63.1%;
    z-index: 2;
}
.carousel-caption div:nth-child(8) {
	position: absolute;
    animation-delay: 0.6s;
    width: 10%;
    max-width: 157px;
	top: 48%;
    left: 67.4%;
    z-index: 6;
}
.carousel-caption div:nth-child(9) {
	position: absolute;
    animation-delay: 0.3s;
    width: 20%;
	max-width: 317px;
    top: 9%;
    left: 23%;
    z-index: 1;
}
.carousel-caption div:nth-child(10) {
	position: absolute;
    animation-delay: 0.4s;
    width: 12%;
	max-width: 185px;
    top: 31.6%;
    left: 20.6%;
    z-index: 4;
}
.carousel-caption div:nth-child(11) {
	position: absolute;
    animation-delay: 0.5s;
    width: 19%;
    max-width: 292px;
	top: 40%;
    left: 23%;
    z-index: 6;
}
.carousel-caption div:nth-child(12) {
	position: absolute;
    animation-delay: 0.6s;
    width: 10%;
    max-width: 151px;
	top: 43.5%;
    left: 28%;
    z-index: 8;
}
.carousel-caption div:nth-child(13) {
	position: absolute;
    animation-delay: 0.6s;
    width: 6%;
    max-width: 87px;
    top: 4%;
    left: 65%;
    z-index: 1;
}
.mask {
	width: 100%;
	max-width: 1600px;
}
.plane {
	position: absolute;
    top: 47%;
	left: -6%;
    width: 9%;
    max-width: 132px;
	z-index: 1;
	animation: plane-animate linear 20s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	-webkit-animation: plane-animate linear 20s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: plane-animate linear 20s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 50% 50%;
	-o-animation: plane-animate linear 20s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 50% 50%;
	-ms-animation: plane-animate linear 20s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 50% 50%;
}
@keyframes plane-animate{
	0% {
	transform:  translate(-1000px,0px)  ;
	}
	100% {
	transform:  translate(3000px,0px)  ;
	}
}

@-moz-keyframes plane-animate{
	0% {
	-moz-transform:  translate(-1000px,0px)  ;
	}
	100% {
	-moz-transform:  translate(3000px,0px)  ;
	}
}

@-webkit-keyframes plane-animate {
	0% {
	-webkit-transform:  translate(-1000px,0px)  ;
	}
	100% {
	-webkit-transform:  translate(3000px,0px)  ;
	}
}

@-o-keyframes plane-animate {
	0% {
	-o-transform:  translate(-1000px,0px)  ;
	}
	100% {
	-o-transform:  translate(3000px,0px)  ;
	}
}

@-ms-keyframes plane-animate {
	0% {
	-ms-transform:  translate(-1000px,0px)  ;
	}
	100% {
	-ms-transform:  translate(3000px,0px)  ;
	}
}
.vo01_img {
	width: 100%;
}
.vo01 {
	position: relative;
	margin: 10px auto 0 auto;
	width: 100%;
	max-width: 980px;
}
.vo02 {
	position: absolute;
    top: 13%;
    left: -2%;
    width: 39%;
}
.vo03 {
	position: absolute;
	top: 4.6%;
    right: 12.4%;
    width: 59%;
    border-radius: 12px;
    overflow: hidden;
}
.index_element {
	position: relative;
    margin: 0 auto;
    width: 58%;
    max-width: 680px;
}
.ele {
	position: absolute;
	z-index: 2;
	width: 23%;
    max-width: 153px;
	-webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.ele_d_title {
	display: block;
}
.ele_m_title {
	display: none;
}
.ele:hover {
	-webkit-transform: scale(1.15) rotate(-5deg);
	-moz-transform:    scale(1.15) rotate(-5deg);
	-ms-transform:     scale(1.15) rotate(-5deg);
	-o-transform:      scale(1.15) rotate(-5deg);
	transform: scale(1.15) rotate(-5deg);
}
.elements_slide {
	display: none;
}
.e01 {
	top: 0;
    left: 35%;
}
.e02 {
	top: 5%;
    left: 63%;
}
.e03 {
	top: 39%;
    left: 79%;
}
.e04 {
	top: 62%;
    left: 57%;
}
.e05 {
	top: 67%;
    left: 28%;
}
.e06 {
	top: 47%;
    left: 3%;
}
.e07 {
	top: 11%;
    left: 8%;
}
.btn_ele {
	position: absolute;
    top: 49%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40%;
	-webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.btn_ele:hover {
	opacity: 0.7;
}
.products {
	position: relative;
	margin-top: 30px;
    width: 100%;
}
.title_feature {
    position: relative;
    margin: 0 auto 20px auto;
    width: 37%;
}
.card-deck .card {
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 20px;
}
.card {
	min-width: 31.3333%;
	padding-left: 0;
	padding-right: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.card-body {
	padding: 10px 20px;
}
.card-title {
	color: #059edb;
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 5px;
}
.card-title span {
	color: #333;
    font-size: 20px;
}
.card-text {
	line-height: 18px;
    font-size: 16px;
    margin-bottom: 5px;
}
.card-date {
	color: #eb1e1e;
}
.sub_content {
	padding-bottom: 85px;
}
.sub_content ul {
	padding-left: 20px;margin-bottom: 5px;
    font-size: 15px;
    line-height: 18px;
    color: #666;
    font-weight: 300;
}
.btn_p_more_detail {
    position: absolute;
    width: 86%;
    left: 7%;
    right: 7%;
    bottom: 2%;
    margin: 0 auto;
	-webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.btn_p_more_detail:hover {
	-webkit-transform: scale(1.1);
	-moz-transform:    scale(1.1);
	-ms-transform:     scale(1.1);
	-o-transform:      scale(1.1);
	transform: scale(1.1);
}
.btn-block {
    display: block;
    width: 94%;
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 1.5%;
}
.btn_pop {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.btn_close {
	 position: absolute;
	 top: 5px;
   right: 5px;
   z-index: 1;
}
.slide_banner {
	margin: 0 auto 20px auto;
    padding-top: 160px;
    position: relative;
    width: 100%;
    max-width: 1050px;
}
.cat_title {
	position: absolute;
    top: 22%;
    left: 0%;
    width: 100%;
    max-height: 56px;
	z-index: 5;
}
.cat_title img {
	width: auto;
    height: 100%;
}
.title_smt {
	max-height: 72px;
    top: 24%;
}
.slide_img {
	width: 100%;
	max-width: 1050px;
}
.slide_img_m {
	display: none !important;
}
.one_price {
	position: relative;
    margin-bottom: 10px;
    padding: 10px 15px;
    background: #dd0000;
    color: #fff;
    line-height: 20px;
    border-radius: 8px;
}
.tour_icon {
	position: absolute;
    top: 28.5%;
    left: 0%;
    width: 45%;
}
.carousel-control-prev {
    left: -10%;
}
.carousel-control-prev img {
    width: 50%;
    margin-top: 40px;
}
.carousel-control-next {
    right: -10%;
}
.carousel-control-next img {
    width: 50%;
    margin-top: 40px;
}
.tnc ul li {
	font-size: 12px;
	color: #999;
}
.carousel-fade .carousel-inner .carousel-item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
} 
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .carousel-item.next,
    .carousel-fade .carousel-inner > .carousel-item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .carousel-item.prev,
    .carousel-fade .carousel-inner > .carousel-item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .carousel-item.next.left,
    .carousel-fade .carousel-inner > .carousel-item.prev.right,
    .carousel-fade .carousel-inner > .carousel-item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
} 

footer {
	position: relative;
    margin: 25px auto 0 auto;
    padding: 10px;
    width: 100%;
    max-width: 1200px;
    background: #fff;
    font-size: 11px;
    text-align: center;
    /* color: #666; */
    border-top: 1px solid #ccc;
}
footer span {
	white-space: nowrap;
}
.footer01 {
	position: relative;
    float: left;
	margin-right: 3%;
    width: 12%;
    max-width: 141px;
}
.footer02 {
	position: relative;
    float: left;
    padding-top: 12px;
    width: 25%;
    text-align: left;
    font-size: 12px;
    color: #666;
    line-height: 14px;
    font-weight: 300;
}
.footer03 {
	position: relative;
    float: right;
    width: 50%;
    max-width: 590px;
}
@media (max-width: 1024px) {
	.top_banner {
		padding-top: 127px;
	}
	.footer02 {
		position: relative;
		float: left;
		padding-top: 5px;
		width: 25%;
		text-align: left;
		font-size: 10px;
		color: #666;
		line-height: 12px;
		font-weight: 300;
	}
	
}
@media (max-width: 768px) {
	.card {
		min-width: 48%;
	}
	.mask {
		height: 46%;
	}
	.carousel-caption div:first-child {
		top: 5%;
		width: 61%;
	}
	.carousel-caption div:nth-child(2) {
		top: 32%;
		width: 85%;
	}
	.carousel-caption div:nth-child(3) {
		width: 20%;
		top: 40.5%;
		left: 37%;
	}
	.carousel-caption div:nth-child(4) {
		width: 8%;
		top: 5%;
		left: 44%;
	}
	.carousel-caption div:nth-child(5) {
		width: 9%;
		top: 1%;
		left: 52.3%;
	}
	.carousel-caption div:nth-child(6) {
		width: 34%;
		top: 13%;
		left: 54%;
	}
	.carousel-caption div:nth-child(7) {
		width: 19%;
		top: 34.3%;
		left: 69.8%;
	}
	.carousel-caption div:nth-child(8) {
		width: 13%;
		top: 50%;
		left: 76%;
	}
	.carousel-caption div:nth-child(9) {
		width: 27%;
		top: 7%;
		left: 13.4%;
	}
	.carousel-caption div:nth-child(10) {
		width: 16%;
		top: 29.6%;
		left: 9.6%;
	}
	.carousel-caption div:nth-child(11) {
		width: 24%;
		top: 38.5%;
		left: 14%;
	}
	.carousel-caption div:nth-child(12) {
		width: 13.5%;
		top: 41.5%;
		left: 20%;
	}
	.carousel-caption div:nth-child(13) {
		width: 7%;
		top: 3%;
		left: 73%;
	}
	.plane {
		top: 50%;
	}
	.index_element {
		width: 85%;
	}
	.sub_bar {
		overflow: scroll;
	}
	.nav {
		display: -webkit-inline-box;
	}
	.sub_menu {
		text-align: center;
	}
	.title_feature {
		margin: 0 auto 10px auto;
		width: 70%;
	}
	.footer01 {
		display: none;
	}
	.footer02 {
		position: relative;
		float: none;
		padding-top: 12px;
		width: 100%;
		text-align: left;
		font-size: 12px;
		color: #666;
		line-height: 14px;
		font-weight: 300;
		text-align: center;
	}
	.footer03 {
		position: relative;
		float: none;
		width: 100%;
		margin: 0 auto;
		max-width: 590px;
	}
}
@media (max-width: 576px) {
	.card {
		width: 98%;
	}
	.mask {
		height: 38%;
	}
	.carousel-caption div:first-child {
		top: 19%;
		width: 70%;
	}
	.carousel-caption div:nth-child(2) {
		top: 40%;
		width: 98%;
	}
	.carousel-caption div:nth-child(3) {
		width: 22%;
		top: 47.5%;
		left: 42%;
	}
	.carousel-caption div:nth-child(4) {
		width: 9%;
		top: 19%;
		left: 43%;
	}
	.carousel-caption div:nth-child(5) {
		width: 10%;
		top: 15%;
		left: 52.3%;
	}
	.carousel-caption div:nth-child(6) {
	    width: 37%;
		top: 25%;
		left: 55%;
	}
	.carousel-caption div:nth-child(7) {
		width: 23%;
		top: 41.3%;
		left: 71.8%;
	}
	.carousel-caption div:nth-child(8) {
		width: 15%;
		top: 55%;
		left: 80%;
	}
	.carousel-caption div:nth-child(9) {
		width: 32%;
		top: 19%;
		left: 7%;
	}
	.carousel-caption div:nth-child(10) {
		width: 19%;
		top: 36.6%;
		left: 2.6%;
	}
	.carousel-caption div:nth-child(11) {
		width: 30%;
		top: 44.5%;
		left: 8%;
	}
	.carousel-caption div:nth-child(12) {
		width: 15.5%;
		top: 47.5%;
		left: 16%;
	}
	.carousel-caption div:nth-child(13) {
		width: 10%;
		top: 10%;
		left: 74%;
	}
	.top_banner {
		margin-bottom: 0;
	}
	.vo01 {
		overflow: hidden;
	}
	.vo01_img {
		width: 157%;
		margin-left: -42%;
	}
	.vo02 {
		position: absolute;
		top: 51%;
		left: -2%;
		width: 30%;
		display: none;
	}
	.vo03 {
		top: 4.6%;
		right: 4.4%;
		width: 93%;
		border-radius: 8px;
	}
	.title_feature {
		margin: 0 auto 0px auto;
		width: 85%;
	}
	.index_element {
		width: 100%;
	}
	.ele {
		display: none;
	}
	.ele_d_title {
		display: none;
	}
	.ele_m_title {
		display: block;
		width: 56%;
		margin: 20px auto 0 auto;
	}
	.elements_slide {
		display: block;
		width: 250px;
		margin: 0 auto;
	}
	.btn_ele {
		position: relative;
		margin: 0 auto;
		width: 75%;
	}
	.slide_img {
		display: none !important;
	}
	.slide_img_m {
		display: block !important;
		margin: 7% auto 0 auto;
		width: 90% !important;
	}
	.cat_title {
		position: absolute;
		top: 27%;
		left: 0%;
		right: 0;
		margin: 0 auto;
		width: 100%;
		max-height: 40px;
		text-align: center;
	}
	.title_smt {
		max-width: 450px;
		top: 29%;
	}
}