@charset "utf-8";
/* CSS Document */

body {
	background-repeat: repeat;
	font-family: "Microsoft YaHei", 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;}
/* wow進場後額外繼續輪播的動畫 */
.myAni {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.myAni.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.myAni.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.myAni.infinite.pulse {
/*animation-delay: 2s;*/
-webkit-animation-name: pulse !important;
animation-name: pulse !important;
}
.wrapper{position:relative;overflow:hidden;}

/*表頭表尾 請勿砍*/
.top, .footer{
    line-height: 0px;
}
.top{
    z-index: 99;
    position: relative;
}
/*很多物件通用*/

.width1280{max-width:1280px;min-width:280px;height:auto;margin: 0  auto;}
.topICON{ text-align:center; padding-top:20px; padding-bottom:20px;}
.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: absolute;
  width: 100vw;
  height: 100vh;
  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);
  }
}

 /* bn */
.hvr-boxbb02-shadow-outset {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  background: #7393ff;
  color: #fff;
  text-align: center;
  font-size: 22px;
  border-radius: 5px;
  width: 100%;
  padding: 10px 0;
}

.hvr-boxbb02-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active {
  box-shadow: 4px 5px 0px rgb(0, 134, 255);
}

/* bn-top */
.hvr-boxbb02-shadow-outset02 {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  background: #0067c6;
  color: #fff;
  font-size: 1em;
  text-align: center;
  padding: 10px 45px;
  margin: 3%;
  font-size: 22px;
  border-radius: 5px;
}

.hvr-boxbb02-shadow-outset02:hover, .hvr-box-shadow-outset02:focus, .hvr-box-shadow-outset:active {
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.6);
}


/*BANNER 進場delay時間、浮動*/
.banner{position:relative;overflow:hidden;width: 100%;height: 65em;z-index: 1;color: white;margin: 0 auto;padding: 0;}
img.banner001, img.banner002, img.banner003,img.banner004,img.banner005{position:absolute;}
img.banner001{-webkit-animation-delay: 1.2s; /* Chrome, Safari, Opera */animation-delay: 0.3s;}
img.banner002{
	-webkit-animation-delay:1s; /* Chrome, Safari, Opera */
	animation-delay:1s;
	-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
	animation-duration: 2s;
	max-width: 478px;
	height:auto;
	margin:0 auto;
}

.banner .top-tx{position: absolute;width: 100%;height: auto;margin: 0 auto;z-index: 99;top: 16%;left: 26%;}
.banner .top-bn{position: absolute;width: 50%;top: 61%;left: 0;right: 0;z-index: 99;margin: 0px 103px;}

/*表單區*/
.fill{position:relative;text-align:center;width: 100%;height:auto;background-color: #f8f5eb;padding-top: 4em;padding-bottom: 6em;}
.fill h2{font-size: 3em;color: #954b55;font-weight: 700;letter-spacing: 0.1em;}
.fill #sBut{display:block;max-width:527px;height:auto;min-width:280px;margin: 32px auto;width:100%;}
.fill .go_button{-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */animation-duration: 2s;max-width: 255px;height:auto;margin:0 auto;}
.fill .statement{color: #00000;line-height:40px;font-size: 18px;letter-spacing: 0.1em;}
.fill .statement a{color: #333;}
.fill .statement a:hover{ color:#333;}
.fill .form-control{display: block;width: 100%;height: 45px;padding: 6px 12px;font-size: 18px;line-height: 1.42857143;color: #555;background-image: none;border: 1px solid #ccc;border-left: 13px solid #7393ff;border-radius: 1px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);box-shadow: inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-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;margin-bottom: 15px;}
.list{margin:0 auto;margin-top: 5%;}
img.gift{max-width: 478px;margin: 0 auto;}



/*內文*/

.content1{
	position: relative;
	background-color: #ffb140;
	margin: 0 auto;
	text-align: center;
	height: 81em;
	margin-bottom: 14%;
}
.content1 .section-a{
	margin-top: 21em;
	margin-bottom: 18em;
}
.content1 .bg-top{
	position: absolute;
	background-image: url(../images/map.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48%;
	background-color: #fff;
	width: 53%;
	height: 82em;
}


.content1 .title{
	position: absolute;
	top: -23%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.content1 .tc-text{
	padding-top: 2.7em;
}

.content1 .left{
	width: 29em;
	padding: 6em 0 6em 7em;
}
.content1 .right{
	width: 29em;
	padding: 6em 0 8em 6em;
}

.left-01, .left-02, .left-03, .left-04, .left-05{
	text-align:left;
	height: 15em;
}

.right-01, .right-02, .right-03, .right-04 {
	text-align:left;
	height: 15em;
}

.tc-hover {position:relative;}

.tc-hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.tc-hover img:nth-of-type(2):hover{
  opacity:0; 
}

.content1 h1{font-size: 3em;letter-spacing: 0.1em;color: #fff;font-weight: 700;}
.content1 h3{font-size: 1.7em;letter-spacing: 0.1em;color: #000;font-weight: 600;}
.content1 p{font-size: 17px;color: #000;letter-spacing: 0.05em;}
.content1 .name{font-size: 34px;font-style:italic;font-weight: 600;color: #000;letter-spacing: 0;}

.content2 .box-all{margin:0 auto;padding: 10px;text-align: center;}
.content2 .box-top{border-top-left-radius:10px;border-top-right-radius:10px;}
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 23em;padding: 8px;}
.content2 .bg{width: 100vw;height: 59em;background-color: #f8f8f8;padding-top: 11%;margin-top: 13%;}

.content2{position: relative;padding-top: 7em;text-align: center;}
.content2 h2 {color: #1e1e1e;font-size: 3em;letter-spacing: 0.1em;font-weight: 700;}
.content2 h3 {color: #fff;font-size: 2em;letter-spacing: 0.15em;font-weight: 700;}
.content2 p{font-size: 1.2em;line-height: 1.2em;color: #666666;letter-spacing: 0.05em;}

.content3{position: relative;padding-top: 4em;padding-bottom: 7em;text-align: center;}
.content3 h2 {color: #1e1e1e;font-size: 3em;letter-spacing: 0.1em;font-weight: 700;}
.content3 p{font-size: 18px;color: #000;letter-spacing: 0.05em;line-height: 1.5em;padding: 0 11%;}
.pic2{width: 393px;height:auto;overflow:hidden;margin: 5% auto;}
.pic2 img{transform:scale(1,1);transition: all 0.5s ease-out;}
.pic2 img:hover{transform:scale(1.1,1.1);}
.icon{width: 5em;height:auto;margin: 10% auto;}
.icon img{transform:scale(1,1);transition: all 0.5s ease-out;}
.icon img:hover{transform:scale(1.1,1.1);}

/*PIC + 通用*/

h4 {font-size: 5em;line-height: 2em;color: #000;font-family: 'Satisfy', cursive;-moz-transform: rotate(-15deg);-webkit-transform:rotate(-15deg);-o-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform: rotate(-15deg);}
img.pic1{max-width: 671px;height:auto;margin: 3em -19%;position: absolute;}
img.gift{max-width: 798px;width: 100%;height:auto;margin: 0 auto;}
img.map{max-width: 713px;width: 100%;height:auto;margin: 0 auto;}
img.flag{width: 4em;height:auto;padding-top: -0.5em;}


@media screen and (min-width:2561px) { 
	
.section-a, .section-b, .section-c {
	width: 125em;
	margin: 0 auto;
}	
	
}


/*	↓↓↓↓	螢幕尺寸大於1920時頁面顯示效果↓↓↓↓	 */
@media (min-width: 1920px) and (max-width:2560px) {	
.banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 99;
        top: 16%;
        left: 39%;
}	
.section-a, .section-b, .section-c {
	width: 1350px;
	margin: 0 auto;
}
	
.content1 .section-a {
        margin-top: 21em;
        margin-bottom: -6em;
}	
.content1 .right{
	width: 30em;
	padding: 6em 5em 6em 0em;
	margin-left: -3em;
}	
.content1 .bg-top {
        position: absolute;
        background-image: url(../images/map.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 48%;
        background-color: #fff;
        width: 1350px;
        height: 81em;
}	
.content2 .bg{width: 100vw;height: 55em;background-color: #f8f8f8;padding-top: 20em;margin-top: 22em;}	
	
img.pic1{max-width: 671px;height:auto;margin: 1em -25%;position: absolute;}
	
	
	
}

/*	↓↓↓↓	螢幕尺寸大於1440時頁面顯示效果↓↓↓↓	 */
@media (min-width: 1440px) and (max-width:1919px) {
.banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 99;
        top: 24%;
        left: 34%;
}
.banner{width: 100vw;height: 63em;}	
	
.section-a, .section-b, .section-c {
	width: 1280px;
	margin: 0 auto;
}
.left-01, .left-02, .left-03, .left-04, .left-05 {
        text-align: left;
        height: 15em;
}
.right-01, .right-02, .right-03, .right-04 {
        text-align: left;
        height: 15em;
}	
.content1 {
        margin-bottom: 20%;
}
.content1 .bg-top {
        width: 1280px;
        height: 73em;
}	
.content1 .right{
	width: 30em;
	padding: 6em 5em 6em 0em;
	margin-left: -3em;
}	
.content1 .left{
	width: 29em;
	padding: 6em 0 6em 2em;
}	
.content2 p{font-size: 1em;line-height: 1.2em;color: #666666;letter-spacing: 0.05em;}	
.content2 .bg{width: 100vw;height: 45em;background-color: #f8f8f8;padding-top: 15%;margin-top: 17%;}	
	
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 19em;padding: 8px;}
	
img.pic1{width: 43%;height:auto;margin: 1em -21.5%;position: absolute;}
	
}

/*	↓↓↓↓	ipad 橫向 w1024 ↓↓↓↓	 */
@media (min-width: 1024px) and (max-width:1439px) {
.banner .top-bn {
        width: 50%;
        top: 61%;
        left: 0;
        right: 0;
        margin: 0px 103px;
}	
.banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0 auto;
        z-index: 99;
        top: 16%;
        left: 26%;
}	
.banner{width: 100vw;height: 58em;}	
	
.left-01, .left-02, .left-03, .left-04, .left-05 {
        text-align: left;
        height: 15em;
}
.right-01, .right-02, .right-03, .right-04 {
        text-align: left;
        height: 15em;
}
	
.content1 .bg-top {
        background: none;
        width: 915px;
        height: 75em;
}	
.section-a, .section-b, .section-c {
	width: 915px;
	margin: 0 auto;
}
.content1 {
    margin-bottom: 23%;
}	
.content1 .section-a{
	background-image: none;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 21em;
}	
.content1 .right{
	width: 32em;
	padding: 6em 5em 6em 0em;
	margin-left: -13em;
}	
.content1 .left{
	width: 29em;
	padding: 6em 0 3em 5em;
}	
.content2 p{font-size: 1.2em;line-height: 1.2em;color: #666666;letter-spacing: 0.05em;}	
.content2 .bg{width: 100vw;height: 75em;background-color: #f8f8f8;padding-top: 21%;margin-top: 18%;}		
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 23em;padding: 8px;}
	
.content3 p{font-size: 15px;color: #000;letter-spacing: 0.05em;line-height: 1.5em;padding: 0 6%;}
.pic2{width: 96%;height:auto;overflow:hidden;margin: 5% auto;}	
img.pic1{width: 52%;height:auto;margin: 1em -26.5%;position: absolute;}	
	
}

/*	↓↓↓↓	ipad 直向 w768 ↓↓↓↓	 */
@media (min-width: 768px) and (max-width:1023px) {	
.banner{width: 100vw;height: 58em;}	
.banner .top-bn {
        width: 61%;
        top: 78%;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 2em;
        letter-spacing: 0.2em;
}
.banner .top-tx {
        top: 12%;
        left: 19%;
}
.section-a, .section-b, .section-c {
	width: 700px;
	margin: 0 auto;
}
.left-01, .left-02, .left-03, .left-04, .left-05 {
        text-align: left;
        height: 20em;
}
.right-01, .right-02, .right-03, .right-04 {
        text-align: left;
        height: 20em;
}	
	
.content1 .bg-top {
        background: none;
        width: 700px;
        height: 75em;
}		
.content1 {
    height: 107em;
    padding-bottom: 5em;
    margin-bottom: 40%;
}
.content1 .section-a{
	background-image: none;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 21em;
}	
.content1 .right{
	width: 18em;
	height: auto;
}	
.content1 .left{
	width: 18em;
	height: auto;
}	
.content1 .tc-text {
        text-align: center;
        bottom: 0;
        top: 9em;
}	
.content1 .name{font-size: 30px;}

.content2 p{font-size: 1.4em;line-height: 1.4em;color: #666666;letter-spacing: 0.05em;}	
.content2 .bg{width: 100vw;height: 128em;background-color: #f8f8f8;padding-top: 27%;margin-top: 28%;}		
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 29em;padding: 8px;}
	
.content3 p{font-size: 22px;color: #000;letter-spacing: 0.05em;line-height: 1.5em;padding: 0 6%;}
.pic2{width: 85%;height:auto;overflow:hidden;margin: 5% auto;}	
img.pic1{width: 71%;height:auto;margin: 1em -35.5%;position: absolute;}	
.icon{width: 8em;height:auto;margin: 10% auto;}
	
}

/* ↓↓↓↓ iPhone Plus w414  Pixel 2 w411 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 411px) and (max-width:767px) {
.banner{width: 100vw;height: 51em;}	
img.banner002{
	position: relative;
	bottom: -21em;
	left: -3%;
	width: 92%;
}	
.banner .top-bn {
        width: 70%;
        top: 80%;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 2em;
        letter-spacing: 0.2em;
}
.banner .top-tx {
        top: 12%;
        left: 6%;
}
.section-a, .section-b, .section-c {
	width: 380px;
	margin: 0 auto;
}
.left-01, .left-02, .left-03, .left-04, .left-05 {
        text-align: left;
        height: 20em;
}	
.right-01, .right-02, .right-03, .right-04 {
        text-align: left;
        height: 20em;
}	
.content1 .bg-top {
        background: none;
        width: 380px;
        height: 90em;
}		
.content1 {
    padding-bottom: 5em;
    height: 119em;
    margin-bottom: 36%;
}
.content1 .section-a{
	background-image: none;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 24em;
}	
.content1 .right{
	width: 30em;
	padding: 7em 15px;
}	
.content1 .left{
	width: 30em;
	padding: 7em 15px;
}	
.content1 .tc-text{
	text-align: center;
	margin: 0 auto;
	width: 45%;
	bottom: -9em;
}	
.content1 .name{font-size: 30px;}

.content2 p{font-size: 1em;line-height: 1.4em;color: #666666;letter-spacing: 0.01em;}	
.content2 .box-all{padding: 5px;}
.content2 .bg{width: 100vw;height: 101em;background-color: #f8f8f8;padding-top: 35%;margin-top: 34%;}		
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 23em;padding: 5px;}
	
.content3 p{font-size: 20px;color: #000;letter-spacing: 0.05em;line-height: 1.5em;padding: 0 6%;}
.pic2{width: 99%;height:auto;overflow:hidden;margin: 5% auto;}	
img.pic1{width: 89%;height:auto;margin: 0em -44.5%;position: absolute;}	
img.title{width: 87%;height:auto;position: absolute;}	
img.gift{width: 100%;height:auto;margin: 0 auto;}	
.icon{width: 8em;height:auto;margin: 10% auto;}


}


/* ↓↓↓↓ iPhone X   iPhone6/7/8 w375 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 360px) and (max-width:410px) {
.banner{width: 100vw;height: 45em;}	
img.banner002{
	position: relative;
	bottom: -16em;
	left: -3%;
	width: 89%;
}	
.banner .top-bn {
        width: 70%;
        top: 72%;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 2em;
        letter-spacing: 0.2em;
}
.banner .top-tx {
        top: 17%;
        left: 8%;
}
.section-a, .section-b, .section-c {
	width: 350px;
	margin: 0 auto;
}
.left-01, .left-02, .left-03, .left-04, .left-05 {
        text-align: left;
        height: 20em;
}	
.right-01, .right-02, .right-03, .right-04 {
        text-align: left;
        height: 20em;
}	
.content1 .bg-top {
        background: none;
        width: 350px;
        height: 91em;
}		
.content1 {
    padding-bottom: 5em;
    height: 121em;
    margin-bottom: 33%;
}
.content1 .section-a{
	background-image: none;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 24em;
}	
.content1 .right{
	width: 30em;
	padding: 7em 2px;
}	
.content1 .left{
	width: 30em;
	padding: 7em 0px;
}	
.content1 .tc-text{
	text-align: center;
	width: 45%;
	bottom: -9em;
}	
.content1 .name{font-size: 27px;}

.content2 p{font-size: 1em;line-height: 1.4em;color: #666666;letter-spacing: 0.01em;}	
.content2 .box-all{padding: 5px;}
.content2 .bg{width: 100vw;height: 96em;background-color: #f8f8f8;padding-top: 40%;margin-top: 36%;}		
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 21em;padding: 2px;}
	
.content3 p{font-size: 18px;color: #000;letter-spacing: 0.05em;line-height: 1.5em;padding: 0 6%;}
.pic2{width: 99%;height:auto;overflow:hidden;margin: 5% auto;}	
img.pic1{width: 96%;height:auto;margin: 0em -48.5%;position: absolute;}	
img.title{width: 84%;height:auto;position: absolute;}	
img.gift{width: 100%;height:auto;margin: 0 auto;}	
.icon{width: 6em;height:auto;margin: 10% auto;}

	
}


/* ↓↓↓↓ 手機尺寸SE ,顯示效果 ↓↓↓↓  */
@media (min-width: 320px) and (max-width:359px) {
.banner{width: 100vw;height: 36em;}	
img.banner002{
	position: relative;
	bottom: -14em;
	left: -3%;
	width: 89%;
}	
.banner .top-bn {
        width: 74%;
        top: 65%;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 1.8em;
        letter-spacing: 0.2em;
}
.banner .top-tx {
        top: 17%;
        left: 8%;
}
.section-a, .section-b, .section-c {
	width: 300px;
	margin: 0 auto;
}
.content1 .bg-top {
        background: none;
        width: 300px;
        height: 78em;
}		
.content1 {
    padding-bottom: 3em;
    height: 97em;
    margin-bottom: 41%;
}
.content1 .section-a{
	background-image: none;
	background-color: #fff;
	margin: 0 auto;
	margin-top: 20em;
}	
.content1 .right{
	width: 30em;
	padding: 4em 0px;
	margin-left: 11px;
}	
.content1 .left{
	width: 30em;
	padding: 4em 0px;
	margin-left: 11px;
}	
.content1 .tc-text{
	text-align: center;
	width: 33%;
	bottom: -6.3em;
}	
.content1 .name{font-size: 25px;}
.content1 h1 {
        font-size: 2.5em;
}
.content2 h2 {
        font-size: 2.5em;
}	
h4 {
        font-size: 4em;
}
.left-01, .left-02, .left-03, .left-04, .left-05 {
        text-align: left;
        height: 17em;
}	
.right-01, .right-02, .right-03, .right-04 {
        text-align: left;
        height: 17em;
}
.content1 p {font-size: 1em;}
.content2 p{font-size: 1em;line-height: 1.4em;color: #666666;letter-spacing: 0;}	
.content2 .box-all{padding: 3px;}
.content2 .bg{width: 100vw;height: 90em;background-color: #f8f8f8;padding-top: 40%;margin-top: 36%;}		
.content2 .box-bottom{border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top: 1em;background-color: #fff;height: 21em;padding: 2px;}
	
.content3 p{font-size: 16px;color: #000;letter-spacing: 0.05em;line-height: 1.5em;padding: 0 4%;}
.pic2{width: 99%;height:auto;overflow:hidden;margin: 5% auto;}	
img.pic1{width: 96%;height:auto;margin: 0em -48.5%;position: absolute;}	
img.title{width: 84%;height:auto;position: absolute;}	
img.gift{width: 100%;height:auto;margin: 0 auto;}	
.icon{width: 6em;height:auto;margin: 10% auto;}
.tc-hover img {
  position:absolute;
  width: 30%;
  height: auto;
}
	
}