@charset "utf-8";

/* CSS Document */
body {
	background-repeat: repeat;
	/*font-family: "Microsoft YaHei", sans-serif; */
	font-family: Arial,"Microsoft YaHei","Microsoft JhengHei",sans-serif;
}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.tra{-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;}

.wrapper{position:relative;overflow:hidden;}

/*表頭表尾 請勿砍*/
.top, .footer{
    line-height: 0px;
}
.top{
    z-index: 99;
    position: relative;
}
.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
}
/*很多物件通用*/
.BRR{height: 1px;}
.BRR02{display: none;}
.width1280{max-width:1280px;min-width:280px;height:auto;margin: 0  auto;}
.myButton {
  -moz-border-radius:28px;
  -webkit-border-radius:28px;
  border-radius:28px;
  display:inline-block;
  cursor:pointer;
  font-family:Arial;
  font-size:17px;
  padding:9px 33px;
  text-decoration:none;
}
.myButton:hover {
  background-color:#5cbf2a;
}
.myButton:active {
  position:relative;
  top:1px;
}

/* 版頭動態 */
.slideshow {
  position: relative;
  width: 66vw;
  height: 56em;
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
          animation-name: kenburns;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
          animation-name: kenburns-1;
  z-index: 3;
}
.slideshow-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
          animation-name: kenburns-2;
  z-index: 2;
}
.slideshow-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
          animation-name: kenburns-3;
  z-index: 1;
}
.slideshow-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
          animation-name: kenburns-4;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
            transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
            transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


::selection {
    background: #1182c1;
    color: #fff;
}

.button{padding-top: 3%;}
.button a{color: #fff;font-size: 18px;letter-spacing: 0.1em;}
.button a:hover{ color:#6ebfcb; text-decoration: none;}

/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #6ebfcb;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}



/*BANNER 進場delay時間、浮動*/
.banner{
	position:relative;
	overflow: hidden;
	width: 102vw;
	height: 56em;
	padding: 0;
}

.banner .top-title {
    position: absolute;
    width: 100vw;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6% 20.5%;
    z-index: 99;
}
.banner .bg-big {
    padding: 0;
}
.banner .bg-g{background-color: #215b9b;background-position: bottom;width: 100vw;height: 50em;z-index: 0;margin-top: 33%;}
.banner .time{position: absolute;background-color: #8a949d;background-position: bottom;width: 14.1%;height: 71px;bottom: 0;z-index: 99;left: 20.5%;}


.banner h3,h2,h4{color: #fff;letter-spacing: 0.1em;/* line-height: 14px; */text-align:left;}
.banner h3{font-size: 30px;font-weight: 500;line-height: 11px;letter-spacing: 0.25em;}
.banner h2{font-size: 67px;font-weight: bold;line-height: 71px;}
.banner h4{font-size: 22px;line-height: 22px;font-weight: 400;width: 22%;}
.banner p{font-size: 17px;font-weight: 200;color: #DCDCDC;letter-spacing: 0.1em;padding: 13px;}

.banner .tx{color: #1a1a1a;}

/*表單區*/
.fill{
	position: relative;
	padding-bottom: 2%;
}
.fill .box{margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;text-align: center;padding-top: 13%;}
.fill .list{width: 100%;margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;}
.fill .contene{width: 100%;}
.fill h1{font-size: 42px;color: #1a1a1a;text-align:center;font-weight: bold;letter-spacing: 0.06em;margin: 0% auto;line-height: 36px;padding-top: 1em;}
.fill h2{font-size: 28px;line-height: 55px;color: #a5a9ae;text-align:center;font-weight: 400;letter-spacing: 0.1em;margin: 0% auto;}
.fill p{color: #1a1a1a;text-align: left;margin: 0% auto;font-size: 16px;letter-spacing: 0.1em;}
.fill #sBut{height:auto;margin: 0px auto;width: 100%;border: none;text-align: center;padding: 7px 0;margin-right: auto;margin-left: auto;margin-top: 10px;letter-spacing: 1px;clear: both;overflow: hidden;border-radius: 2px;user-select: none;}
.fill .statement{color: #1a1a1a;font-size: 16px;letter-spacing: 0.1em;}
.fill .statement a{color: #75adca;}
.fill .statement a:hover{ color:#000;}
.fill .top-word{animation: GOB 1s 0.5s infinite;color: #ffe000;}
.fill .form-control{
    display: block;
    width: 100%;
    height: 51px;
    padding: 6px 12px;
    font-size: 18px;
    line-height: 1.42857143;
    color: #555;
    margin: 2% auto;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #e0e0e0;
    box-shadow: inset 0 0px 0px rgba(0,0,0,.075);
    border-radius: 0px;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }


/*內文*/

.top-line{border-bottom: 1px solid #d6d6d6;width: 100vw;}

.content1{
	position: relative;
	margin:0 auto;
	padding-bottom: 2%;
	padding-top: 4em;
}

.content1 .tex-box1,.content1 .tex-box2, .content1 .tex-box3, .content1 .tex-box4, .content1 .tex-box5, .content1 .tex-box6{
	margin: 0 auto;
	text-align: center;
	width: 100%;
	height: 31em;
}

.content1 .tex-box1{
	background-image: url(../images/box01.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.content1 .tex-box2{
	background-image: url(../images/box02.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.content1 .tex-box3{
	background-image: url(../images/box03.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.content1 .tex-box4{
	background-image: url(../images/box04.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.content1 .tex-box5{
	background-image: url(../images/box05.png);
	background-repeat: no-repeat;
	background-size: 100%;
}

.content1 .tex-box6{
	background-image: url(../images/box06.png);
	background-repeat: no-repeat;
	background-size: 100%;
}

.content1 h2{
	font-size: 40px;
	line-height: 65px;
	text-align: center;
	font-weight: bold;
	color: #1a1a1a;
}
.content1 h3 {
    font-size: 25px;
    line-height: 31px;
    font-weight: bold;
    letter-spacing: 0.06em;
    width: 100%;
}
.content1 .hvr-tex{
    position: absolute;
    width: 93%;
    height: auto;
    padding: 0;
    margin: 0;
}

.content2{position: relative;margin:0 auto;padding-bottom: 3%;}

.content2 .texbox{
	position: relative;
	padding: 10% 8%;
	text-align:left;
	letter-spacing: 0.06em;
	color: #1a1a1a;
	margin-bottom: 25%;
}
.content2 .texbox02{
	position: relative;
	padding: 20% 8%;
	text-align:left;
	letter-spacing: 0.06em;
	color: #1a1a1a;
}
.content2 h2{
	font-size: 40px;
	line-height: 65px;
	text-align:center;
	font-weight: bold;
	color: #1a1a1a;
}
.content2 h3{
	font-size: 42px;
	line-height: 1.5em;
	font-weight: bold;
}
.content2 h4{
	font-size: 22px;
	margin-top: -3%;
}
.content2 p{
	font-size: 16px;
	line-height: 25px;
	padding: 6% 0;
	border-bottom: 0.5px solid #d6d6d6;
}

.content3{position: relative;margin:0 auto;padding-bottom: 3%;padding-top: 4em;}
.content3 h2{
	font-size: 40px;
	line-height: 65px;
	color: #1a1a1a;
	text-align:center;
	font-weight: bold;
	letter-spacing: 0.06em;
	margin: 0% auto;
}
.content3 h3{
	font-size: 1.2em;line-height: 1.7em;color: #333333;text-align: left;letter-spacing: 0.06em;
}

.content3 ul {
    margin-top: 20px;
}
.content3 li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    margin-bottom: 28px;
    text-align: left;
}


.content3 li span {
    display: inline;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 64px;
    font-weight: 100;
    background-color: #6ebfcb;
    float: left;
    position: relative;
    z-index: 500;
    font-family: sans-serif;
    font-weight: 100;
    top: 0;
    left: 0;
    color: #fff;
}

.content3 li:nth-child(1) h4 {
    border-bottom: 2px solid #383845;
    cursor: pointer;
}
.content3 li:nth-child(2) h4 {
    border-bottom: 2px solid #6ebfcb;
}
.content3 li:nth-child(3) h4 {
    border-bottom: 2px solid #6ebfcb;
}


.content3 li h4 {
    height: 60px;
    line-height: 60px;
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    padding-left: 15px;
    padding-right: 5%;
    overflow: hidden;
    color: #383845;
}

.content3 li h4 a{color: #383845;}

.content3 li h4  a:hover{ color:#1182c1;text-decoration: none;}



.content3 li:nth-child(1) h4 {
    border-bottom: 2px solid #6ebfcb;
    cursor: pointer;
}
.content3 li h4 {

height: 50px;

line-height: 60px;

display: inline-block;

font-size: 24px;

font-weight: 500;

padding-left: 15px;

padding-right: 5%;

overflow: hidden;

color: #383845;
}

.content3 li:nth-child(3) h4 {
    border-bottom: 2px solid #6ebfcb;
}

/*PIC通用*/
img.gift{max-width:511px;height:auto;}
img.model01{margin:0 auto;box-shadow: 20px 20px 0px rgb(242, 245, 249);}
img.model02{margin:0 auto;box-shadow: 20px 20px 0px rgb(242, 245, 249);margin: 0px 23%;}
img.logo{width: 48%;}
img.logo02{
	width: 35%;
	height: auto;
	text-align: center;
	margin-bottom: -3%;
	}
img.box{width: 315px;height: auto;}


/* Bounce To Right */
.hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 42% 0;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #009bb369;
  box-shadow: none;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Bounce To Right 02*/
.hvr-bounce-to-right02 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 5px 5px 0px rgb(242, 245, 249);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  background: #6ebfcb;
  width: 99%;
  text-align: center;
  padding: 7px;
  margin-top: 3%;
}
.hvr-bounce-to-right02:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a1a1a;
  box-shadow: none;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;

  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right02:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right02:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


/*	↓↓↓↓	螢幕尺寸大於2560時頁面顯示效果↓↓↓↓	 */

@media (min-width: 2560px)  {
.banner .bg-g {
    background-color: #215b9b;
    background-position: bottom;
    width: 100vw;
    height: 53em;
    z-index: 0;
    margin-top: 24%;
}
	
}

@media (min-width: 1920px) and (max-width:2559px) {
.banner .top-title {
    position: absolute;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    padding: 9% 16.5%;
    z-index: 99;
}
	
.banner .bg-g {
    background-color:#215b9b;
    background-position: bottom;
    width: 100vw;
    height: 50em;
    z-index: 0;
    margin-top: 44%;
}	

.banner .time {
    position: absolute;
    background-color: #8a949d;
    background-position: bottom;
    width: 17.8%;
    height: 71px;
    bottom: 0%;
    z-index: 99;
    left: 16%;
}
.banner h4 {
    width: 25%;
}
.hvr-bounce-to-right {
}
}

@media (min-width: 1680px) and (max-width:1919px) {
.banner .top-title {
    position: absolute;
    padding: 6% 14%;
}
.banner h4 {
    width: 27%;
}
.banner .time {
    width: 20.9%;
    height: 71px;
    bottom: 0;
    left: 14%;
}
.banner .bg-g {;
    margin-top: 51%;
}
	
	
	
}


@media (min-width: 1440px) and (max-width:1679px) {
	.banner .bg-big{
		padding: 0;	
	}
.banner .bg-g {
    /* bottom: 0; */
    margin-top: 55%;
}
	
.banner .top-title {
    position: absolute;
    padding: 12% 11%;
}
.banner .time {
    width: 24%;
    left: 11%;
}
.banner h4 {
    width: 29%;
}
.hvr-bounce-to-right {
}	
	img.logo {
    width: 80%;
}
	
}


/*	↓↓↓↓	ipad 橫向 w1024 ↓↓↓↓	 */
@media (min-width: 1024px) and (max-width:1439px) {
	
	.BRR{display: none;}
	
	img.logo {
    width: 40%;
}
	img.logo02 {
    padding: 2% 35%;
    margin-bottom: 1.5%;
}

	.banner .bg-big{
		padding: 0;	
	}
    .banner .bg-g {
        position: absolute;
        background-color: #64c6d5c4;
        margin-top: 42%;
        z-index: 12;
    }
	
	.banner .tx{
		color: #fff;
	}

	.slideshow {
    position: absolute;
    width: 100%;
    height: 53em;
    overflow: hidden;
    margin-top: 0;
    z-index: 10;
    top: 0;
}
	.banner {
    height: 58em;
}
	.banner .top-title {
    position: absolute;
    height: auto;
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
    top: 57%;
    bottom: 0;
    padding: 0px 10%;
}
	.banner h3, h2, h4 {
    text-align: center;
}

	.banner h4 {
    font-size: 22px;
    letter-spacing: 5px;
    width: 100%;
    line-height: 0.2;
}
	.banner p {
    font-size: 22px;
}
.button a {
    font-size: 22px;
}	
.banner .time {
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    padding: 8px 0;
    margin: 0 auto;
}
.fill .box {
    width: 95%;
}	
	
img.gift {
    width: 107%;
    height: auto;
    padding: 0 4%;
}	
.hvr-bounce-to-right {
    padding: 39.7% 0;
    width: 99%;
}	
.content1 .tex-box1, .content1 .tex-box2, .content1 .tex-box3, .content1 .tex-box4, .content1 .tex-box5, .content1 .tex-box6 {
    height: 25em;
}
.content1 .hvr-tex {
    position: absolute;
}
.content2 .texbox {
    margin-bottom: 9%;
}
.content2 .texbox02 {
    padding: 30% 8%;
}	
img.model01 {
    width: 92%;
    height: auto;
    margin: 6%;
}
img.model02 {
    width: 80%;
    height: auto;
    margin: 6%;
}
	
	
}

/*	↓↓↓↓	ipad 直向 w768 ↓↓↓↓	 */
@media (min-width: 768px) and (max-width:1023px) {	
	.BRR{display: none;}
	.BRR02{height: 1px;}
	
	img.logo {
    width: 40%;
}
	img.logo02 {
    margin-bottom: -1.5%;

    width: 52%;
}
.banner .bg-g {
    width: 100vw;
    position: absolute;
    background-color: #64c6d5c4;
    margin-top: 49%;
    z-index: 12;
}
	.banner .tx {
    color: #fff;
}	
	.slideshow {
    position: relative;
    width: 100%;
    height: 53em;
    overflow: hidden;
    margin-top: -6%;
}
	.banner {
    width: 105vw;
    height: 54em;
}
	.banner .top-title {
    bottom: 0%;
    text-align: center;
    width: 100%;
    left: 0;
    top: 56%;
    padding: 0% 2%;
}
	.banner h3, h2, h4 {
    text-align: center;
}


	.banner h4 {
    font-size: 20px;
    width: 100%;
    line-height: 0;
    letter-spacing: 7px;
}
	.banner p {
    font-size: 22px;
}
.button a {
    font-size: 22px;
}	
.banner .time {
    bottom: 0;
    width: 100%;
    padding: 8px 0;
    left: 0;
}
.fill .box {
    width: 100%;
    padding-top: 6%;
}	
	
img.gift {
    width: 100%;
    height: auto;
    /* padding: 0 4%; */
}	
.hvr-bounce-to-right {
    margin: 0% auto;
    padding: 37% 0;
}
.content1 .tex-box1, .content1 .tex-box2, .content1 .tex-box3, .content1 .tex-box4, .content1 .tex-box5, .content1 .tex-box6 {
    height: 19em;
}
.content1 .hvr-tex {
    position: absolute;
    width: 88%;
    height: auto;
    padding: 0;
    margin: 0;
}
.content2 .texbox {
    padding: 0% 8%;
    margin-bottom: 16%;
}
.content2 .texbox02 {
    padding: 2% 6%;
}	
.content2 h3 {
    font-size: 42px;
    line-height: 0.9em;
}	
.content2 h4 {
    font-size: 22px;
    margin-top: -3%;
    text-align: left;
}
img.model01 {
    width: 91%;
    height: auto;
    margin: 6%;
}
img.model02 {
    width: 80%;
    height: auto;
    margin: 6%;
}

}

/* ↓↓↓↓ iPhone Plus w414  Pixel 2 w411 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 411px) and (max-width:767px) {

.BRR{display: none;}
.BRR02{display: block;height: 1px;}
.banner .bg-g {
    top: 0%;
    width: 100vw;
    position: absolute;
    background-color: #64c6d5c4;
    margin-top: 91%;
    z-index: 12;
}
		
	img.logo {
    width: 75%;
}
	img.logo02 {
    margin-bottom: -0.5%;
    width: 50%;
}
	
	.slideshow {
    position: relative;
    width: 100%;
    height: 45em;
    overflow: hidden;
    margin-top: -6%;
}
	.banner {
    width: 108vw;
    height: 46em;
}
	.banner .tx {
    color: #fff;
}
	.banner .top-title {
    position: absolute;
    height: auto;
    bottom: 11%;
    text-align: center;
    width: 100%;
    left: 0;
    padding: 0;
}
	.banner h3, h2, h4 {
    text-align: center;
}

	.banner h4 {
    font-size: 19px;
    width: 100%;
    padding: 0 8%;
    line-height: 0;
    letter-spacing: 3px;
}
	.banner p {
    font-size: 19px;
}
.button a {
    font-size: 22px;
}	
.banner .time {
    bottom: -50%;
    width: 100%;
    padding: 8px 0;
    left: 0;
}
.fill .box {
    width: 94%;
    padding-top: 6%;
    margin: 0 3%;
}	
	
img.gift {
    width: 100%;
    height: auto;
}	
.hvr-bounce-to-right {
    margin: 0 auto;
    padding: 40% 0;
}
	
.fill h2 {
    font-size: 22px;
    line-height: 28px;
    padding: 13px 0;
    letter-spacing: 0.15em;
}
.fill .statement {
    font-size: 15px;
}	
.content1 .tex-box1, .content1 .tex-box2, .content1 .tex-box3, .content1 .tex-box4, .content1 .tex-box5, .content1 .tex-box6 {
    width: 85%;
    height: 28em;
}
.content1 .hvr-tex {
    position: absolute;
    width: 325px;
}
.content1 h3 {
    font-size: 28px;
    line-height: 36px;
}
.content2 .texbox {
    padding: 5% 8%;
    margin-bottom: 16%;
}
.content2 .texbox02 {
    padding: 5% 6%;
}	
.content2 h3 {
    font-size: 42px;
    line-height: 0.9em;
}	
.content2 h4 {
    font-size: 22px;
    margin-top: -3%;
    text-align: left;
}
.content3 li h4 {
	font-size: 20px;
	}
.content3 h2 {
    font-size: 40px;
    line-height: 46px;
    padding-bottom: 6%;
}
.banner h3 {
    font-size: 28px;
    line-height: 11px;
}
.banner h2 {
    font-size: 45px;
    letter-spacing: 2px;
    line-height: 37px;
}	
	
img.model01 {
    width: 91%;
    height: auto;
    margin: 4%;
}
img.model02 {
    width: 80%;
    height: auto;
    margin: 6%;
}
	
}

/* ↓↓↓↓ iPhone X   iPhone6/7/8 w375 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 360px) and (max-width:410px) {

.BRR{display: none;}
.BRR02{display: block;height: 1px;}
	
	img.logo {
    width: 75%;
}
	img.logo02 {
    margin-bottom: -0.5%;
    width: 54%;
}

.banner .bg-g {
    width: 100vw;
    position: absolute;
    background-color: #64c6d5c4;
    margin-top: 93%;
    z-index: 12;
}
		
	.slideshow {

position: relative;

width: 100%;

height: 42em;

overflow: hidden;

margin-top: -6%;
}
	.banner {
    width: 109vw;
    height: 44em;
}
    .banner .tx {
    color: #fff;
}
	.banner .top-title {
    position: absolute;
    height: auto;
    bottom: 12%;
    text-align: center;
    width: 100%;
    left: 0;
    padding: 0;
}
	.banner h3, h2, h4 {
    text-align: center;
}

	.banner h4 {
    font-size: 17px;
    width: 100%;
    padding: 0 8%;
    line-height: 0;
    letter-spacing: 3px;
}
	.banner p {
    font-size: 17px;
}
.button a {
    font-size: 22px;
}	
.banner .time {
    width: 100%;
    padding: 8px 0;
    height: 61px;
    bottom: -54%;
    left: 0;
}
.fill .box {
    width: 94%;
    padding-top: 6%;
    margin: 0 3%;
}	
	
img.gift {
    width: 100%;
    height: auto;
}	
.hvr-bounce-to-right {
    margin: 0 auto;
    padding: 39% 0;
}
	
.fill h2 {
    font-size: 21px;
    line-height: 27px;
    padding: 13px 0;
    letter-spacing: 0.15em;
}
.fill .statement {
    font-size: 15px;
}	
.content1 .tex-box1, .content1 .tex-box2, .content1 .tex-box3, .content1 .tex-box4, .content1 .tex-box5, .content1 .tex-box6 {
    width: 85%;
    height: 28em;
}
.content1 .hvr-tex {
    position: absolute;
    width: 78%;
}
.content1 h3 {
    font-size: 28px;
    line-height: 36px;
}
.content2 .texbox {
    padding: 5% 8%;
    margin-bottom: 16%;
}
.content2 .texbox02 {
    padding: 5% 6%;
}	
.content2 h3 {
    font-size: 42px;
    line-height: 0.9em;
}	
.content2 h4 {
    font-size: 22px;
    margin-top: -3%;
    text-align: left;
}
.content3 li h4 {
	font-size: 17px;
	}
.content3 h2 {
    font-size: 40px;
    line-height: 46px;
    padding-bottom: 6%;
}
.banner h3 {
    font-size: 28px;
    line-height: 11px;
}
.banner h2 {
    font-size: 41px;
    line-height: 35px;
    letter-spacing: 0.05em;
    margin: 0;
}	
	
img.model01 {
    width: 91%;
    height: auto;
    margin: 4%;
}
img.model02 {
    width: 80%;
    height: auto;
    margin: 6%;
}
}

/* ↓↓↓↓ 手機尺寸SE ,顯示效果 ↓↓↓↓  */
@media (min-width: 320px) and (max-width:359px) {

.BRR{display: none;}
.BRR02{display: block;height: 1px;}
	
	img.logo {
    width: 100%;
}
	img.logo02 {
    width: 60%;
    margin-bottom: -1.5%;
}
.banner .bg-g {
    width: 100vw;
    position: absolute;
    background-color: #64c6d5c4;
    margin-top: 98%;
    z-index: 12;
}
		
	.slideshow {
    position: relative;
    width: 100%;
    height: 39em;
    overflow: hidden;
    margin-top: -6%;
}
	.banner {
    height: 39em;
    width: 110vw;
}
	.banner .tx {
    color: #fff;
}
	.banner .top-title {
    position: absolute;
    height: auto;
    bottom: 10%;
    text-align: center;
    width: 100%;
    left: 0;
    padding: 0;
}
	.banner h3, h2, h4 {
    text-align: center;
}

	.banner h4 {
    font-size: 16px;
    line-height: 0;
    width: 100%;
    letter-spacing: 4px;
    padding: 0 4%;
}
	.banner p {
    font-size: 16px;
    letter-spacing: 0.05em;
}
.button a {
    font-size: 20px;
}	
.banner .time {
    width: 100%;
    padding: 0px 0;
    height: 47px;
    bottom: -39%;
    left: 0;
}

.fill .box {
    width: 94%;
    padding-top: 6%;
    margin: 0 3%;
}	
	
img.gift {
    width: 100%;
    height: auto;
}	
.hvr-bounce-to-right {
    padding: 37.5% 0;
}
	
.fill h2 {
    font-size: 19px;
    line-height: 23px;

    padding: 13px 0;
}
.fill .statement {
    font-size: 15px;
}	
.content1 .tex-box1, .content1 .tex-box2, .content1 .tex-box3, .content1 .tex-box4, .content1 .tex-box5, .content1 .tex-box6 {
    width: 85%;
    height: 21em;
}
.content1 .hvr-tex {
    position: absolute;
    width: 77%;
}
.content1 h3 {
    font-size: 23px;
    line-height: 32px;
}
.content2 .texbox {
    padding: 5% 8%;
    margin-bottom: 16%;
}
.content2 .texbox02 {
    padding: 5% 6%;
}	
.content2 h3 {
    font-size: 42px;
    line-height: 0.9em;
}	
.content2 h4 {
    font-size: 22px;
    margin-top: -3%;
    text-align: left;
}
.content3 li h4 {
	font-size: 15px;
	padding-left: 10px;
	}
.content3 h2 {
    font-size: 40px;
    line-height: 46px;
    padding-bottom: 6%;
}
.banner h3 {
    font-size: 24px;
    line-height: 11px;
}
.banner h2 {
    font-size: 37px;
    line-height: 29px;
    letter-spacing: 0.05em;
}	
	
img.model01 {
    width: 91%;
    height: auto;
    margin: 4%;
}
img.model02 {
    width: 80%;
    height: auto;
    margin: 6%;
}
}