/* -----------------------------------------------------
 MV
------------------------------------------------------- */
/* clearfix */
.cf:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}
.mv {
  position: relative;
  line-height: 0;
	overflow: hidden;
	/*max-height: 670px;*/
}
.mv img {
  width: 100%;
  height: auto;
}
.mv__slider{
	/*width: 100%;
	display: inline-block;*/
	margin: 0;
	padding: 0;
}
.mv__slider ul, .mv__slider li {
    margin: 0;
	padding: 0;
	list-style:none;
}
.mv__slider li figure {
  position: relative;
}
.mv__slider li figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0 0 3.125% 2.5%;
  font-size: 10px;
  font-size: 3.125vw;
  line-height: 1.6;
  color: #fff;
}
.mv .slick-dots {
  position:relative;
	width: 100%;
  margin-top: -1px;
  /*margin-top: -9.3125vw;*/
  margin-top: -7.03125vw;
  padding: 7px 0;
  padding: 2.8vw 0 2.2vw;
  text-align: center;
  line-height: 0;
	z-index: 100;
}
.mv .slick-dots li {
  width: 20px;
  display: inline-block;
  line-height: 0;
}
.mv .slick-dots li + li {
  margin-left: 5px;
}
.mv .slick-dots li button {
  width: 20px;
  height: 3px;
  padding: 0;
  display: block;
  background-color:rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  box-sizing: content-box;
  transition: .15s;
	border: none;
}
.mv .slick-dots li.slick-active button {
  height: 5px;
  background-color: #fff;
}

.mv .slick-slide img
{
	transform:scale(1.1,1.1);
	transition-duration:0.1s;
	transition-timing-function:linear;
}
.mv .slick-slide.slick-active img
{
	/*animation-name:zoomFnc;*/
  animation-name:slidein;
	animation-duration:5.2s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-timing-function:linear;
	animation-fill-mode:forwards;
}
.mv .caption
{
	position:absolute;
	display:block;
	width:52.34375vw;
	top:7.8125vw;
	left:7.8125vw;

    position:absolute;
  display:block;
  width:100%;
  top:15vw;
  left:0;
  text-align: center;

}
.mv .caption.caption1
{
	
}
.mv .caption.caption2
{
	top:calc(7.8125vw + 8.59375vw);
}
.mv .slogan {
	position:absolute;
	display:block;
	width:100%;
	top:25vw;
	left:10vw;
	text-align: left;
}
.mv .slogan p:nth-child(1) { 
  font-size: 48px;
  font-weight: bold;
  line-height: 1.5em; 
  color: #f5f5f5;
  display: block; 
  margin: 0;
  padding:2px 0 2px 0; 
  text-shadow: 0px 0px 6px rgba(0,0,0,0.5); 
}
.mv .slogan p:nth-child(2) { 
  font-family: 'Noto Sans TC', \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4, "Arial Black", sans-serif;
  font-size: 2.0em;
  font-weight: normal;
  line-height: 1.5em; 
  color: #fff;
  display: block; 
  margin: 0;
  padding: 2px 0; 
  text-shadow: 0px 0px 6px rgba(0,0,0,0.5); }

@keyframes zoomFnc {
     0% {
         transform:scale(1.0, 1.0);
     }
     100% {
         transform:scale(1.1, 1.1);
     }
}

.mv .mv-shield
{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	background-color:#FFFFFF;
}
.mv.loaded .mv-shield
{
	animation-name:mvOpen;
	animation-duration:0.3s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:0.0s;
	animation-fill-mode:forwards;
}
.mv.loaded .caption.caption1
{
	opacity:0;
	transform:translateY(30%);
	
	animation-name:mvOpen2;
	animation-duration:0.15s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:0.3s;
	animation-fill-mode:forwards;
}
.mv.loaded .caption.caption2
{
	opacity:0;
	transform:translateY(30%);
	
	animation-name:mvOpen2;
	animation-duration:0.15s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-delay:0.45s;
	animation-fill-mode:forwards;
}
@keyframes mvOpen {
	0% {
		transform:translateX(0%);
		opacity:1;
	}
	50% {
		transform:translateX(50%);
		opacity:1;
	}
	100% {
		transform:translateX(100%);
		opacity:0;
	}
}
@keyframes mvOpen2 {
	0% {
		transform:translateY(30%);
		opacity:0;
	}
	100% {
		transform:translateY(0%);
		opacity:1;
	}
}
@media (min-width: 992px) and (max-width: 1299px) {
.mv .slogan {top:20vw;}
.mv .slogan p:nth-child(1) { font-size: 44px; }
.mv .slogan p:nth-child(2) { font-size: 1.5em;}
}
@media screen and (max-width: 991px) {
.mv .slogan {top:20vw;}
.mv .slogan p:nth-child(1) { font-size: 40px; }
.mv .slogan p:nth-child(2) { font-size: 1.2em;}
}
@media screen and (max-width: 768px) {
  .mv
  {
    height:auto !important;
  }
  .mv img
  {
	  /*height: 230px;
	  width: auto;*/
  }
  .mv__slider li figure img {

  }
  .mv .slick-list {
/*
    min-height: 290px;
    min-height: 90.625vw;
*/
  }
  .mv .slick-dots {
  }
  .to-contents
  {
  	display:none;
  }
  .mv .slogan {top:20vw;}
  .mv .slogan p:nth-child(1) { font-size: 32px; }
  .mv .slogan p:nth-child(2) { font-size: 1em;}
}
@media screen and (max-width: 480px) {
.mv .slogan {top:20vw;}
.mv .slogan p:nth-child(1) { font-size: 20px;line-height: 1.1em; }
.mv .slogan p:nth-child(2) { font-size: 0.7em;line-height: 1em;}
}
@media screen and (min-width: 769px) {
  .mv__slider li figure figcaption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    margin: 0;
    font-size: 14px;
  }
  .mv .slick-list {
  }
  .mv .slick-track
  {
  }
  .mv .slick-slide figure
  {
  }
  .mv .slick-slide img
  {
    object-fit: cover;
  }
  .object-fit-img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
  }
  .mv .slick-dots {
    position: absolute;
    bottom: 15px;
    /*left: 30px;*/
    padding: 0;
    margin: 0;
  }
  .mv .slick-dots li {
    width: 25px;
  }
  .mv .slick-dots li button {
	width: 25px;
    border-width: 2px;
  }
  .mv .slick-dots li + li {
    margin-left: 5px;
  }
  .to-contents
  {
  	position:absolute;
  	display:block;
  	height:45px;
  	bottom:0;
  	left:50%;
  	color:#FFFFFF;
  	font-size:14px;
  }
  .to-contents:after
  {
  	content:"";
  	position:absolute;
  	display:block;
  	width:0px;
  	height:30px;
  	border-left:1px solid #FFFFFF;
  	
  	top:14px;
  	left:50%;
  	
  	animation-name:scaleFnc1;
  	animation-duration:1.5s;
  	animation-iteration-count:infinite;
  	animation-direction:normal;
  	animation-timing-function:linear;
  }
  .mv .caption
  {
  	position:absolute;
  	display:block;
  	width:auto;
  	top:90px;
  	left:11%;
  }
	.mv .caption.caption2
	{
		top:calc(90px + 58px);
	}
}


/*i-banner*/
.ibanner{
  margin: 63px 0px 0px 0px;
  display: inline-block;
  width: 100%;
  overflow: hidden;
}


.carousel { position: relative; }

.carousel-inner { position: relative; overflow: hidden; width: 100%; }
.carousel-inner .emask { position: absolute; width:100%; height:76px; bottom:0; left:0; background-repeat:no-repeat; background-position:center center; z-index:50;}
.carousel-inner > .item { display: none; position: relative; transition: 0.6s ease-in-out left; }
.carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; line-height: 1; }
@media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner > .item { transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; }
  .carousel-inner > .item.next, .carousel-inner > .item.active.right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); left: 0; }
  .carousel-inner > .item.prev, .carousel-inner > .item.active.left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); left: 0; }
  .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } }
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; }
.carousel-inner > .active { left: 0; }
.carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; }
.carousel-inner > .next { left: 100%; }
.carousel-inner > .prev { left: -100%; }
.carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; }
.carousel-inner > .active.left { left: -100%; }
.carousel-inner > .active.right { left: 100%; }

.carousel-control { position: absolute; top: 0; left: 0; bottom: 0; width: 15%; opacity: 0.5; filter: alpha(opacity=50); font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.carousel-control.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); }
.carousel-control.right { left: auto; right: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); }
.carousel-control:hover, .carousel-control:focus { outline: 0; color: #fff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); }
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; }
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -10px; }
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -10px; }
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; margin-top: -10px; line-height: 1; font-family: serif; }
.carousel-control .icon-prev:before { content: '\2039'; }
.carousel-control .icon-next:before { content: '\203a'; }
.carousel-caption > h3 {color: #ffffff;}

.carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 99; width: 60%; margin-left: -30%; padding-left: 0; list-style: none; text-align: center; z-index:100; }
.carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; border: 1px solid #fff; border-radius: 10px; cursor: pointer; background-color: #000 \9; background-color: transparent; }
.carousel-indicators .active { margin: 0; width: 12px; height: 12px; background-color: #fff; }

.carousel-caption { position: absolute; left: 15%; right: 15%; bottom: 20px; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #ffffff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background: rgba(0,0,0,0.40);}
.carousel-caption .btn { text-shadow: none; }

@media screen and (min-width: 768px) { .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; font-size: 30px; }
  .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { margin-left: -15px; }
  .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { margin-right: -15px; }
  .carousel-caption { left: 0%; right: 50%; padding-bottom: 60px; }
  .carousel-indicators { bottom: 0px; } }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

.center-block { display: block; margin-left: auto; margin-right: auto; }

.pull-right { float: right !important; }

.pull-left { float: left !important; }

.hide { display: none !important; }

.show { display: block !important; }

.invisible { visibility: hidden; }

.text-hide { font-size:0px; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.hidden { display: none !important; visibility: hidden !important; }

.affix { position: fixed; }




/* Slider Indicators */
.carousel-control.left, .carousel-control.right { background-image: none; opacity: 1; text-shadow: none; width: 45px; height: 45px; font-size: 50px; line-height: 46px; text-align: center; border-radius: 2px; color: #ffffff; top: 20px; }
@media (min-width: 480px) { .carousel-control.left, .carousel-control.right { top: 50%; } }
@media (min-width: 768px) { .carousel-control.left, .carousel-control.right { top: 50%; } }
@media (min-width: 992px) { .carousel-control.left, .carousel-control.right { top: calc( 50% - 22px); } }
.carousel-control.left:hover, .carousel-control.right:hover { color: #eeeeee; }

.carousel-control.left { left: 5%; }
.carousel-control.left .fa-angle-left { padding-right: 2px; }

.carousel-control.right { right: 5%; }
.carousel-control.right .fa-angle-right { padding-left: 2px; }

/* Slider Content */
.carousel-content { position: relative; max-height: 100%; z-index: 0; color:#FFFFFF; }
@media (min-width: 992px) { .carousel-content {
  position: absolute;
  text-align:center;
  padding: 50px 20px 20px;
  box-sizing:border-box;
  width: 760px;
  height:260px;
  top: 18%;
  left: calc( 50% - 380px );
  background-image: url(../demo/slider/heart.png);
  background-repeat: no-repeat;
  background-position: center center;
} }
@media (min-width: 1200px) { .carousel-content { top: 20%; width: 760px; left: calc( 50% - 380px ); } }
@media (min-width: 1450px) { .carousel-content { width: 760px; margin-left: 0; padding: 30px; /*left: inherit;*/ } }
@media (min-width: 1700px) { .carousel-content { top: 25%; } }

.carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100%; }

.jumbotron__category { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(250, 250, 250, 0.2); margin-top: 20px; }
@media (min-width: 480px) { .jumbotron__category { margin-top: 30px; margin-bottom: 15px; padding-bottom: 15px; } }
@media (min-width: 992px) { .jumbotron__category { margin-top: 0; } }
.jumbotron__category h6 { margin: 0; color: #f7c51e; }

.jumbotron__title h1 { font-size: 20px; color: #ffffff; text-shadow: 0px 0px 4px rgba(0,0,0,0.6); }
.jumbotron__title h1.dark { color: #333333; }
@media (min-width: 480px) { .jumbotron__title h1 { font-size: 2.2em; font-weight:lighter; } }
@media (min-width: 992px) { .jumbotron__title h1 { margin: 10px 0 16px 0; } }
@media (min-width: 1200px) { .jumbotron__title h1 { font-size: 2.8em; } }
@media (min-width: 1450px) { .jumbotron__title h1 { margin: 26px 0 19px 0; } }

.jumbotron__content p { font-size: 14px; font-weight: normal; }
.jumbotron__content p.dark { color: #333333; }
@media (min-width: 992px) { .jumbotron__content p { margin: 0 0 18px 0; } }
@media (min-width: 1450px) { .jumbotron__content p { margin: 0 0 24px 0; } }

@media (min-width: 1450px) { body.boxed .carousel-content { left: calc( 50% - 250px ); padding: 20px; } }
@media (min-width: 1700px) { body.boxed .carousel-content { top: 20%; } }
@media (min-width: 1200px) { body.boxed .jumbotron__title h1 { font-size: 25px; } }
@media (min-width: 1450px) { body.boxed .jumbotron__title h1 { margin: 26px 0 19px 0; } }
@media (min-width: 1450px) { body.boxed .jumbotron__content p { margin: 0 0 18px 0; } }