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

/*

font-family: 'Monoton', cursive;
font-family: 'Bungee Inline', cursive;
font-family: 'Kumar One Outline', cursive;

*/


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;}
/* 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;background-color: #000037;}

/*表頭表尾 請勿砍*/
.top, .footer{
    line-height: 0px;
}
.top{
    z-index: 99;
    position: relative;
}
/*很多物件通用*/
.BRR{height: 1px;}
.width1280{max-width:1200px;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;
}



/*BANNER 進場delay時間、浮動*/
.banner{position:relative;overflow: hidden;}

img.banner001,img.banner002,img.banner003,img.banner004,img.banner005 {
    position:absolute;
}


img.banner001,img.banner003,img.banner005{
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
	-webkit-animation-duration: 1s;
    animation-duration: 1s;
}

img.banner002{
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
	-webkit-animation-duration: 1s;
    animation-duration: 1s;
}

img.banner004{
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
	-webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.logo{position: absolute;top: 4px;left: 16px;width: 50%;height: auto;}

.top-word{position: absolute;display: block;left: 21%;top: 75%;z-index: 99;background-image: url(../images/banner005.png);width: 618px;height: 90px;margin: 0 auto;text-align: center;}
.top-word h1{font-size: 31px;font-weight: bold;color: #fff;letter-spacing: 0.05em;padding: 11px 0;text-shadow: 0.1em 0.1em 0.05em black}
.top-word h4{font-size: 22px;color: #fff;letter-spacing: 0.3em;padding: 6px 0;text-shadow: 0em 0em 0.2em black;}
.top-word h4{font-size: 22px;padding: 11px 0;}
.top-2box {position: relative;margin: 0 auto;background-image: url(../images/bg01.jpg);background-repeat: no-repeat;background-size: 100%;padding-bottom: 4%;z-index: 9;text-align: center;}
.top-2box .box {position: absolute;z-index: 9;text-align: right;top: 23%;width: 29.5%;margin: 0 auto;}
.top-2box .box2 {position: absolute;z-index: 8;text-align: right;top: 23%;width: 54%;}
.top-2box h2 {font-size: 20px;font-weight: bold; color: #fff;}


/*表單區*/
.fill{position: relative;width: 100%;margin: 0 auto;}
.fill:before {content: "";position: absolute;width: 100%;height: 100%;top: 0px;left: 0;right: 0;z-index: 0;background-image: url(../images/bg01.jpg);background-size: 100%;-webkit-transform: rotate(180deg);transform: rotate(180deg);}

.fill .list{width: 95%;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;}
.fill .contene{width: 100%;}
.fill h2{    
  position: absolute;
    font-size: 44px;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 4.5% 14.5%;}
.fill h3{font-size: 2.2em;color: #849fe0;text-align: left;font-weight: bold;letter-spacing: 0.06em;line-height: 1.5em;padding-top: 15%;width: 100%;}
.fill h4{font-size: 1.8em;color: #949393;text-align:left;font-weight: bold;letter-spacing: 0.06em;margin: 0% auto;line-height: 1.3em;}
.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 .go_button{-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */animation-duration: 2s;max-width: 255px;height:auto;margin:0 auto;}
.fill .statement{color: #8c8c8c;line-height:40px;font-size: 17px;letter-spacing: 0.1em;}
.fill .statement a{color: #5f80d6;}
.fill .statement a:hover{color: #5f80d6;}
.fill .form-control{
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 18px;
    line-height: 1.42857143;
    color: #555;
    margin: 1% auto;
    background-color: #def0f4;
    background-image: none;
    border: 0px solid #ccc;
    border-radius: 0px;
    -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;
    }
.fill .title {
  width: 566px;
  height: auto;
  background-image: url(../images/bar06.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 13.5%;
  }
.fill .fill-block{position: relative;width: 1287px;padding-top: 3em;padding-bottom: 8em;margin: 0 auto;}


/*  content1  */
.content1{position: relative;margin: 0 auto;}
.content1 h2{
  position: absolute;
  font-size: 44px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 5.8% auto auto 14%;
}
.content1 .pic {top:0; right: 0; left: 0;}
.content1 .title {width: 566px;height: auto;background-image: url(../images/bar01.png);background-repeat: no-repeat;margin: 0 auto;text-align: center;margin-top: -7%;padding-bottom: 13.5%;}

/*  content2  */
.content2{position: relative;margin:0 auto;background-image: url(../images/bg02.jpg);background-repeat: repeat;background-size: 100%;padding-top: 6em;padding-bottom: 5em;}
.content2 h2{position: absolute;font-size: 44px;color: #ffffff;font-weight: bold;letter-spacing: 0.06em;text-align: center;padding: 4.5% 14.5%;}
.content2 h3{font-size: 30px;color: #000;font-weight: bold;letter-spacing: 0.05em;text-align: center;padding: 3% 10%;border-bottom: solid 5px #0f2fa2;}
.content2 p{font-size: 23px;color: #787878;font-weight: bold;letter-spacing: 0.05em;text-align: center;padding: 3% 10%;}
.content2 .pic {top:0; right: 0; left: 0;}
.content2 .title {
  width: 566px;
  height: auto;
  background-image: url(../images/bar02.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 13.5%;
  }

.content2 .title02 {
  width: 566px;
  height: auto;
  background-image: url(../images/bar03.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 14.5%;
  }

.content2 .title03 {
  width: 566px;
  height: auto;
  background-image: url(../images/bar04.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 14.5%;
  }

.content2 .title04 {
  width: 566px;
  height: auto;
  background-image: url(../images/bar05.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 14.5%;
  }

.content2 .title05 {
  width: 566px;
  height: auto;
  background-image: url(../images/bar07.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 14.5%;
  }

.content2 .title06 {
  width: 566px;
  height: auto;
  background-image: url(../images/bar08.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 14.5%;
  }

.content2 .textBox{
  text-align: center;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(253,186,50,0.4);
  box-shadow: 3px 3px 2px rgba(0,0,0,0.8);
  width: 98%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  padding: 13px 22px;
  border: 2px solid #000;
  }

.st-block{position: relative;width: 1287px;padding-top: 3em;padding-bottom: 0px;margin: 0 auto;margin-bottom: -6%;}
.us-block{position: relative;width: 1287px;height: auto;padding-top: 4em;padding-bottom: 2em;margin: 0 auto;}
.jp-block{position: relative;width: 1287px;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width: 1287px;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width: 1287px;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fc-block{position: relative;width: 1287px;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}


/*  區塊底色  */
.block-bu{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-bu.png);background-repeat: no-repeat;background-size: 100%;padding-bottom: 6em;}
.block-bu2{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-bu.png);background-repeat: no-repeat;background-size: 100%;padding-bottom: 4em;}
.block-gr{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-gr.png);background-repeat: no-repeat;background-size: 100%;padding-bottom: 6em; }
.block-og{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-og.png);background-repeat: no-repeat;background-size: 100%;padding-bottom: 6em;}
.block-rd{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-rd.png);background-repeat: no-repeat;background-size: 100%;padding-bottom: 6em;}
.block-pp{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-pp.png);background-repeat: no-repeat;background-size: 100%;padding-bottom: 6em;}

/*PIC通用*/
img.two-box{max-width:1333px;height:auto;margin:0 auto;}
img.pic-logo{width: 23%;height:auto;margin: 0 auto;}
img.pic-bn{width: 100%;height:auto;margin: 0 auto;}
img.pic-gift{width: 197%;height:auto;margin: -21px -11em;}
img.pic-cn{width:300px;height:auto;margin:0 auto;}

/*  GO-bn  Float */
.GO-bn {
  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: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  background-color: #c922ea;
  padding: 13px 9px;
  border-radius: 50px;
  color: #fff;
    animation:TestMove3 0.7s infinite alternate; /*IE*/
    -moz-animation:TestMove3 0.7s infinite alternate; /*FireFox*/
    -webkit-animation:TestMove3 0.7s infinite alternate; /*Chrome, Safari*/
}
@keyframes TestMove3{
    from {background-color:#00B8FF;}
    to {background-color:#6500ff;}
}
@-moz-keyframes TestMove3{
    from {background-color:#00B8FF;}
    to {background-color:#6500ff;}
}
@-webkit-keyframes TestMove3{
    from {background-color:#00B8FF;}
    to {background-color:#6500ff;}
}


.GO-bn:hover, .GO-bn:focus, .GO-bn:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  text-decoration: none;
  color: #fff;
}

/*  bn-bu  Float */
.bn-bu {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.bn-bu:hover, .bn-bu:focus, .bn-bu:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
}


/* 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: 4px 4px 0px rgba(0, 0, 0, 0.27);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  background: #0223c5;
  width: 100%;
  text-align: center;
  padding: 7px;
}
.hvr-bounce-to-right02:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #88a9eb;
  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);
}


.demo-2 {
  color-text: #ff53ff;
  color-link: #3c48fa;
  color-link-hover: #fff;
  color-title: #fff;
}

/*  ↓↓↓↓  螢幕尺寸大於2560時頁面顯示效果↓↓↓↓  */
@media (min-width: 2560px) {
/*BANNER*/
img.banner_big{width: 100%;height: auto; display:block;}
img.banner_min{display:none;}
img.banner001{top: 14.5%;left: 22.5%;z-index: 5;max-width: 672px;height:auto;}
img.banner003{top: 42%;left: 25.5%;z-index: 5;max-width: 518px;height:auto;}  
img.banner002{top: 10%;left: 47.5%;z-index: 6;max-width: 727px;height:auto;}
img.banner004{top: 42%;left: 25.5%;z-index: 7;max-width: 518px;height:auto;}
img.banner005{top: 13.5%;left: 22.5%;z-index: 2;max-width: 672px;height:auto;}

/*PIC通用*/
img.two-box{max-width: 1333px;height:auto;margin: 0 auto;margin-top: -27%;z-index: 99;}
	
.top-2box .box {
    position: absolute;
    z-index: 9;
    text-align: right;
    top: 30%;
    width: 22.5%;
    margin: 0 auto;
}	
.top-2box .box2 {
    position: absolute;
    z-index: 8;
    text-align: right;
    top: 30%;
    width: 40.5%;
}
.st-block {
    position: relative;
    width: 1287px;
    padding-top: 2%;
    margin-bottom: 0%;
}
.top-2box {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0%;
}
.top-word {
    position: absolute;
    display: block;
    left: 23.5%;
    top: 64%;
    z-index: 99;
    background-image: url(../images/banner005.png);
    width: 618px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}	
	
}

/*  ↓↓↓↓  螢幕尺寸大於1920時頁面顯示效果↓↓↓↓  */
@media (min-width: 1920px) and (max-width:2559px){
/*BANNER*/
img.banner_big{width: 100%;height: auto; display:block;}
img.banner_min{display:none;}
img.banner001{top: 11.5%;left: 19.5%;z-index: 5;max-width: 672px;height:auto;}
img.banner003{top: 47%;left: 23.5%;z-index: 5;max-width: 518px;height:auto;}  
img.banner002{top: 5%;left: 52.5%;z-index: 6;max-width: 727px;height:auto;}

img.banner004{
  top: 22vw;
  left: 23.7vw;
  z-index: 7;
  width: 500px;
  height: auto;
}
img.banner005{top: 10.5%;left: 19.5%;z-index: 2;max-width: 672px;height:auto;}

/*PIC通用*/
img.two-box{max-width: 1333px;height:auto;margin: 0 auto;margin-top: -27%;z-index: 99;}

}


/*  ↓↓↓↓  螢幕尺寸大於1680時頁面顯示效果↓↓↓↓  */
@media (min-width: 1680px) and (max-width:1919px) {
/*BANNER*/
img.banner_big{width: 100%;height: auto; display:block;}
img.banner_min{display:none;}
img.banner001{top: 7.5%;left: 16.5%;z-index: 5;width: 39%;height:auto;}
img.banner003{top: 46%;left: 20%;z-index: 5;width: 32%;height:auto;}  
img.banner002{top: 2%;left: 51.5%;z-index: 8;width: 43%;height:auto;}
img.banner004{top: 46%;left: 20%;z-index: 7;width: 32%;height:auto;}
img.banner005{top: 7.5%;left: 17.5%;z-index: 2;width: 39%;height:auto;}
	
	
.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}
.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 
  
.st-block{position: relative;width: 1287px;padding-top: 0;padding-bottom: 0;margin: 0 auto;margin-top: 3%;}
.us-block{position: relative;width: 1287px;height: auto;padding-top: 4em;padding-bottom: 2em;margin: 0 auto;}
.jp-block{position: relative;width: 1287px;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width: 1287px;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width: 1287px;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}

.top-word{position: absolute;display: block;left: 17.5%;top: 78%;z-index: 99;background-image: url(../images/banner005.png);width: 618px;height: 90px;margin: 0 auto;text-align: center;}
.top-word h1{font-size: 31px;font-weight: bold;color: #fff;letter-spacing: 0.05em;padding: 11px 0;text-shadow: 0.1em 0.1em 0.05em black}
.top-2box {padding-bottom: 0;}
.top-2box .box {position: absolute;left: 18.5%;top: 28%;z-index: 10;}
.top-2box .box2 {position: absolute;z-index: 9;left: 22.5%;top: 28%;}
.top-2box h2 {font-size: 20px;font-weight: bold; color: #fff;}

.content1 h2{
  position: absolute;
  font-size: 44px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 5.8% auto auto 14%;
}

/*PIC通用*/
img.pic-gift{width: 197%;height:auto;margin: -21px -11em;}

}

/*  ↓↓↓↓  螢幕尺寸大於1680時頁面顯示效果↓↓↓↓  */
@media (min-width: 1440px) and (max-width:1679px) {
/*BANNER*/
img.banner_big{width: 100%;height: auto; display:block;}
img.banner_min{display:none;}
img.banner001{top: 7.5%;left: 16.5%;z-index: 5;width: 39%;height:auto;}
img.banner003{top: 46%;left: 20%;z-index: 5;width: 32%;height:auto;}  
img.banner002{top: 2%;left: 51.5%;z-index: 8;width: 43%;height:auto;}
img.banner004{top: 46%;left: 20%;z-index: 7;width: 32%;height:auto;}
img.banner005{top: 7.5%;left: 17.5%;z-index: 2;width: 39%;height:auto;}
	

.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}
.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 
  
.st-block{position: relative;width: 1287px;padding-top: 0;padding-bottom: 0;margin: 0 auto;margin-top: 3%;}
.us-block{position: relative;width: 1287px;height: auto;padding-top: 4em;padding-bottom: 2em;margin: 0 auto;}
.jp-block{position: relative;width: 1287px;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width: 1287px;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width: 1287px;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}

.top-word{position: absolute;display: block;left: 14.5%;top: 78%;z-index: 99;background-image: url(../images/banner005.png);width: 618px;height: 90px;margin: 0 auto;text-align: center;}
.top-word h1{font-size: 31px;font-weight: bold;color: #fff;letter-spacing: 0.05em;padding: 11px 0;text-shadow: 0.1em 0.1em 0.05em black}
.top-2box {padding-top: 31px;padding-bottom: 0;margin-top: 0%;}
.top-2box .box {position: absolute;left: 18.5%;top: 29%;z-index: 10;}
.top-2box .box2 {position: absolute;z-index: 9;left: 27%;top: 29%;}
.top-2box h2 {font-size: 20px;font-weight: bold; color: #fff;}

.content1 h2{
  position: absolute;
  font-size: 44px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 5.8% auto auto 14%;
}

/*PIC通用*/
img.pic-gift{width: 197%;height:auto;margin: -21px -11em;}

}

/*  ↓↓↓↓  ipad 橫向 w1024 ↓↓↓↓   */
@media (min-width: 1024px) and (max-width:1439px) {
/*BANNER*/
img.banner_big{width: 100%;height: auto; display:block;}
img.banner_min{display:none;}
img.banner001{top: 7.5%;left: 16.5%;z-index: 5;width: 39%;height:auto;}
img.banner003{top: 44%;left: 20%;z-index: 5;width: 32%;height:auto;}  
img.banner002{top: 2%;left: 51.5%;z-index: 8;width: 43%;height:auto;}
img.banner004{top: 44%;left: 20.1%;z-index: 7;width: 32%;height:auto;}
img.banner005{top: 7.5%;left: 17.5%;z-index: 2;width: 39%;height:auto;}
	
.banner {padding-bottom: 3%;}
.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}
.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 
  
/*PIC通用*/
img.pic1{width: 96%;height:auto;}
  
.st-block{position: relative;width:100%;padding-top: 4%;padding-bottom: 0;margin: 0 auto;}
.us-block{position: relative;width:100%;height: auto;padding-top: 4em;padding-bottom: 2em;margin: 0 auto;}
.jp-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fc-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fill .fill-block{position: relative;width: 100%;padding-top: 1em;padding-bottom: 8em;margin: 0 auto;}

.top-word{left: 14.5%;top: 74%;background-image: url(../images/banner005.png);background-size: 100%;width: 31em;height: 63px;}
.top-word h1{font-size: 22px;font-weight: bold;color: #fff;letter-spacing: 0.05em;padding: 1px 0;text-shadow: 0.1em 0.1em 0.05em black;}
.top-word h4{font-size: 16px;}	
.top-2box {padding-top: 0;padding-bottom: 0;margin-top: -3%;}
.top-2box .box {position: absolute;left: 18%;top: 24.5%;z-index: 9;}
.top-2box .box2 {position: absolute;z-index: 8;left: 28.7%;top: 24.5%;}
.top-2box h2 {font-size: 20px;font-weight: bold; color: #fff;}

/*  區塊底色  */
.block-bu{width: 100%;height: auto;margin: 0 auto;padding: 76px 30px 36px 30px;}
.block-bu2{width: 100%;height: auto;margin: 0 auto;padding: 30px;}
.block-gr{width: 100%;height: auto;margin: 0 auto;padding: 30px;}
.block-og{width: 100%;height: auto;margin: 0 auto;padding: 30px;}
.block-rd{width: 100%;height: auto;margin: 0 auto;padding: 30px;}
.block-pp{width: 100%;height: auto;margin: 0 auto;padding: 30px;}
	
/*  content1  */
.content1{position: relative;margin:0 auto;}
.content1 h2{
  font-size: 3.5vw;
  margin: 6.5vw auto auto 15vw;
}
.content1 .pic {top:0; right: 0; left: 0;}
.content1 .title {width: 48%;height: auto;background-size: 100%;padding-bottom: 13.5%;}

/*  content2  */
.content2{position: relative;margin:0 auto;background-image: url(../images/bg02.jpg);background-repeat: repeat;background-size: 100%;padding-top: 6em;padding-bottom: 5em;}
.content2 h2{
  font-size: 3.5vw;
  margin: 2vw auto auto 1vw;
}
.content2 h3{font-size: 26px;padding: 4% 0%;border-bottom: solid 5px #0f2fa2;}
.content2 p{font-size: 20px;padding: 3% 5%;}
.content2 .pic {top:0; right: 0; left: 0;}
.content2 .title {
  width: 48%;
  height: auto;
  background-image: url(../images/bar02.png);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 13.5%;
  }


.content2 .title02, .content2 .title03, .content2 .title04, .content2 .title05, .content2 .title06 {
  width: 48%;
  background-size: 100%;
  }
  
.fill .title {
  width: 48%;
  background-size: 100%;
  margin-top: -7%;
  padding-bottom: 13.5%;
  }

.content2 .textBox{
  text-align: center;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(253,186,50,0.4);
  box-shadow: 3px 3px 2px rgba(0,0,0,0.8);
  width: 98%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  padding: 8px 17px;
  border: 2px solid #000;
  }

.fill .list{width: 93%;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;}
.fill .form-control{

    height: 40px;
    font-size: 16px;
    }

  .fill h2{    
    font-size: 39px;
    padding: 4.5% 14.5%;
    bottom: -25px;
  }

/* Bounce To Right 02*/
.hvr-bounce-to-right02 {
  padding: 0px;
}

/*PIC通用*/
img.two-box{width: 100%;height:auto;margin:0 auto;}
img.pic-logo{width: 23%;height:auto;margin: 0 auto;}
img.pic-bn{width: 82%;height:auto;margin: 0 auto;}
img.pic-gift{width: 208%;height:auto;margin: -21px -11em;}
img.pic-cn{width: 103%;height:auto;margin:0 auto;}

}

/*  ↓↓↓↓  ipad 直向 w768 ↓↓↓↓  */
@media (min-width: 768px) and (max-width:1023px) {  
/*BANNER*/
img.banner_big{width: 100%;height: auto; display:block;}
img.banner_min{display:none;}
img.banner001{top: 7.5%;left: 16.5%;z-index: 5;width: 39%;height:auto;}
img.banner003{top: 46%;left: 20%;z-index: 5;width: 32%;height:auto;}  
img.banner002{top: 2%;left: 51.5%;z-index: 8;width: 43%;height:auto;}
img.banner004{top: 46%;left: 20%;z-index: 7;width: 32%;height:auto;}
img.banner005{top: 7.5%;left: 17.5%;z-index: 2;width: 39%;height:auto;}

.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}
.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 
  
/*PIC通用*/
img.pic1{width: 96%;height:auto;}
  
.st-block{position: relative;width:100%;padding-top: 0;padding-bottom: 0;margin: 0 auto;}
.us-block{position: relative;width:100%;height: auto;padding-top: 4em;padding-bottom: 2em;margin: 0 auto;}
.jp-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fc-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fill .fill-block{position: relative;width: 100%;padding-top: 1em;padding-bottom: 8em;margin: 0 auto;}

.top-word{left: 14.5%;top: 79%;background-image: url(../images/banner005.png);background-size: 100%;width: 24em;height: 55px;}
.top-word h1{font-size: 17px;font-weight: bold;color: #fff;letter-spacing: 0.05em;padding: 0px 0;text-shadow: 0.1em 0.1em 0.05em black;line-height: 15px;}
.top-word h4{font-size: 16px;}
.top-2box {padding-top: 5%;padding-bottom: 0;background-image: none;background-color: #000037;margin-top: 3%;}
.top-2box .box {position: absolute;left: 17%;top: 14%;z-index: 9;}
.top-2box .box2 {position: absolute;z-index: 8;left: 38.7%;top: 14%;}
.top-2box h2 {font-size: 20px;font-weight: bold; color: #fff;}

/*  區塊底色  */
.block-bu{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 11% 30px 11% 30px;}
.block-bu2{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 11% 30px 11% 30px;}
.block-gr{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-gr2.png);padding: 11% 30px 11% 30px;}
.block-og{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-og2.png);padding: 11% 30px 11% 30px;}
.block-rd{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-rd2.png);padding: 11% 30px 11% 30px;}
.block-pp{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-pp2.png);padding: 11% 30px 11% 30px;}
	
/*  content1  */
.content1{position: relative;margin:0 auto;}
.content1 h2{
  font-size: 4vw;
  margin: 7.5vw auto auto 17vw;
}
.content1 .pic {top:0; right: 0; left: 0;}
.content1 .title {width: 55%;height: auto;background-size: 100%;padding-bottom: 15.5%;}

/*  content2  */
.content2{position: relative;margin:0 auto;background-image: none;background-color: #000037;padding-top: 6em;padding-bottom: 5em;}
.content2 h2{
  font-size: 4vw;
  margin: 3vw auto auto 3vw;
}
.content2 h3{font-size: 35px;padding: 4% 0%;border-bottom: solid 5px #0f2fa2;}
.content2 p{font-size: 25px;padding: 3% 5%;}
.content2 .pic {top:0; right: 0; left: 0;}
.content2 .title {
  width: 55%;
  height: auto;
  background-image: url(../images/bar02.png);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: -7%;
  padding-bottom: 15.5%;
  }

.content2 .title02, .content2 .title03, .content2 .title04, .content2 .title05, .content2 .title06 {
  width: 55%;
  background-size: 100%;
  }

  
.fill .title {
  width: 55%;
  background-size: 100%;
  margin-top: -7%;
  padding-bottom: 15.5%;
  }

.content2 .textBox{
  text-align: center;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(253,186,50,0.4);
  box-shadow: 3px 3px 2px rgba(0,0,0,0.8);
  width: 98%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  padding: 9px 30px;
  border: 2px solid #000;
  }

.fill .list{width: 100%;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;}
.fill:before {background-image:none;background-color: #000037;}
.fill .form-control{
    height: 40px;
    font-size: 16px;
    }

  .fill h2{    
    font-size: 4vw;
    margin: 3vw auto auto 4vw;
  }

/* Bounce To Right 02*/
.hvr-bounce-to-right02 {
  padding: 7px;
}

/*PIC通用*/
img.two-box{width: 95%;height:auto;margin:0 auto;}
img.pic-logo{width: 23%;height:auto;margin: 0 auto;}
img.pic-bn{width: 82%;height:auto;margin: 0 auto;}
img.pic-gift{width: 156%;height:auto;margin: -19px 4em;}
img.pic-cn{width: 84%;height:auto;margin:0 auto;}

}


/* ↓↓↓↓ iPhone Plus w414  Pixel 2 w411 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 411px) and (max-width:767px) {
/*BANNER*/
img.banner_big{display:none;}
img.banner_min{width: 100%;height: auto; display:block;}
img.banner001{top: 8.5%;left: 8.5%;z-index: 5;width: 81%;height:auto;}
img.banner003{top: 46%;left: 13%;z-index: 5;width: 74%;height:auto;}  
img.banner002{display:none;}
img.banner004{top: 46%;left: 12.5%;z-index: 7;width: 75%;height:auto;}
img.banner005{top: 8.5%;left: 10.5%;z-index: 2;width: 79%;height:auto;}

.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}

.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 

.logo{right: 0;top: 0.5em;left: 0px;width: 100%;height: auto;padding: 0 26%;}

/*PIC通用*/
img.pic1{width: 96%;height:auto;}
  
.st-block{position: relative;width:100%;padding-top: 5em;padding-bottom: 0;margin: 0 auto;}
.us-block{position: relative;width:100%;height: auto;padding-top: 0em;padding-bottom: 0em;margin: 0 auto;}
.jp-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fc-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}	
.fill .fill-block{position: relative;width: 100%;padding-top: 1em;padding-bottom: 7em;margin: 0 auto;}

.top-word{left: 1.2%;top: 81%;background-image: url(../images/banner005.png);background-size: 100%;width: 29em;height: 63px;}
.top-word h1{font-size: 21px;font-weight: bold;color: #fff;letter-spacing: 0.05em;padding: 1px 0;text-shadow: 0.1em 0.1em 0.05em black;}
.top-word h4{font-size: 18px;}
.top-2box {padding-top: 0;padding-bottom: 0;margin-top: 5%;background-image: none;background-color: #000037;}
.top-2box .box {position: absolute;left: 10%;top: 17.5%;z-index: 9;}
.top-2box .box2 {position: absolute;z-index: 8;left: 37.7%;top: 17.5%;}
.top-2box h2 {font-size: 27px;font-weight: bold;color: #fff;}

/*  區塊底色  */
.block-bu{width: 100%;height: auto;margin: 0 auto;padding: 15px 15px 20px 15px;background-image: url(../images/block-all.png);}
.block-bu2{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 70px 30px 59px 30px;}
.block-gr{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-gr2.png);padding: 0px 15px 20px 15px;}
.block-og{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-og2.png);padding: 0px 15px 20px 15px;}
.block-rd{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-rd2.png);padding: 0px 15px 20px 15px;}
.block-pp{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-pp2.png);padding: 0px 15px 20px 15px;}
	
/*  content1  */
.content1{position: relative;margin:0 auto;}
.content1 h2{
  font-size: 5.5vw;
  margin: 10.5vw auto auto 23vw;
}
.content1 .pic {top:0; right: 0; left: 0;}
.content1 .title {width: 77%;height: auto;background-size: 100%;padding-bottom: 21.5%;margin-top: -18%;}

/*  content2  */
.content2{position: relative;margin:0 auto;background-image: none;background-color: #000037;padding-top: 6em;padding-bottom: 5em;}
.content2 h2{
  font-size: 5.5vw;
  margin: 5.8vw auto auto 11vw;
}
.content2 h3{font-size: 22px;padding: 3% 0%;border-bottom: solid 5px #0f2fa2;margin-top: 0px;}
.content2 p{font-size: 16px;padding: 0% 5%;}
.content2 .pic {top:0; right: 0; left: 0;}
.content2 .title {
  width: 77%;
  height: auto;
  background-size: 100%;
  margin-top: -15.5%;
  padding-bottom: 21.5%;
  }

.content2 .title02, .content2 .title03, .content2 .title04, .content2 .title05, .content2 .title06 {
  width: 77%;
  height: auto;
  background-size: 100%;
  margin-top: -15.5%;
  padding-bottom: 21.5%;
  }
  
.fill .title {
  width: 77%;
  height: auto;
  background-size: 100%;
  margin-top: -15.5%;
  padding-bottom: 21.5%;
  }

.content2 .textBox{
  text-align: center;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(253,186,50,0.4);
  box-shadow: 3px 3px 2px rgba(0,0,0,0.8);
  width: 98%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  padding: 9px 11px;
  border: 2px solid #000;
  }

.fill .list{width: 100%;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;margin-top: -4%;}
.fill:before {background-image:none;background-color: #000037;}

.fill .form-control{
    height: 40px;
    font-size: 16px;
    margin: 2.2% auto;
    }

  .fill h2{
    font-size: 6vw;
    margin: 5.5vw auto auto 9vw;
  }

.bottom-bn {position: fixed;background-color: #efefef;width: 100%;height: 4em;margin: 0 auto;z-index: 999;bottom: 0;}
.bottom-bn h2{font-size: 17px;letter-spacing: 2px;text-align: center;color: #af07c3;}
.bottom-bn a{color: #ffffff;}
.bottom-bn a:hover{color: #ffffff; text-decoration: none;}
	
/* Bounce To Right 02*/
.hvr-bounce-to-right02 {
  padding: 4px;
}

/*  GO-bn  Float */
.GO-bn {
  padding: 2px 43px;
  border: 4px solid #ffd400;
}
/*PIC通用*/
img.two-box{width: 97%;height:auto;margin:0 auto;}
img.pic-logo{width: 100%;height:auto;margin: 0 auto;}
img.pic-bn{width: 82%;height:auto;margin: 0 auto;}
img.pic-gift{display: none;}
img.pic-cn{width: 101%;height:auto;margin:0 auto;}

}

/* ↓↓↓↓ iPhone X   iPhone6/7/8 w375 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 321px) and (max-width:410px) {
/*BANNER*/
img.banner_big{display:none;}
img.banner_min{width: 100%;height: auto; display:block;}
img.banner001{top: 8.5%;left: 8.5%;z-index: 5;width: 81%;height:auto;}
img.banner003{top: 46%;left: 13%;z-index: 5;width: 74%;height:auto;}  
img.banner002{display:none;}
img.banner004{top: 46%;left: 13%;z-index: 7;width: 75%;height:auto;}
img.banner005{top: 8.5%;left: 10.5%;z-index: 2;width: 79%;height:auto;}

.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}
.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 

.logo{right: 0;top: 0.5em;left: 0px;width: 100%;height: auto;padding: 0 26%;}

/*PIC通用*/
img.pic1{width: 96%;height:auto;}

.st-block{position: relative;width:100%;padding-top: 6em;padding-bottom: 0;margin: 0 auto;}
.us-block{position: relative;width:100%;height: auto;padding-top: 2em;padding-bottom: 0em;margin: 0 auto;}
.jp-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width:100%;padding-top: 6em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fc-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}	
.fill .fill-block{position: relative;width: 100%;padding-top: 0em;padding-bottom: 7em;margin: 0 auto;}

.top-word{left: 4.5%;top: 81%;background-image: url(../images/banner005.png);background-size: 100%;width: 24.5em;height: 52px;}
.top-word h1{font-size: 19px;letter-spacing: 0em;padding: 0px 0;margin-top: 5%;}
.top-2box {padding-top: 0;padding-bottom: 0;margin-top: 4%;background-image: none;background-color: #000037;}
.top-word h4{font-size: 16px;padding: 6px 0;}
.top-2box .box {position: absolute;left: 8%;top: 16%;z-index: 9;}
.top-2box .box2 {position: absolute;z-index: 8;left: 38.7%;top: 16%;}
.top-2box h2 {font-size: 25px;font-weight: bold;color: #fff;}

/*  區塊底色  */
.block-bu{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 18px 15px 25px 15px;}
.block-bu2{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 47px 20px 45px 20px;}
.block-gr{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-gr2.png);padding: 19px 15px 25px 15px;}
.block-og{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-og2.png);padding: 19px 15px 25px 15px;}
.block-rd{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-rd2.png);padding: 18px 15px 25px 15px;}
.block-pp{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-pp2.png);padding: 18px 15px 25px 15px;}
	
/*  content1  */
.content1{position: relative;margin:0 auto;}
.content1 h2{
  font-size: 6vw;
  margin: 11.5vw auto auto 26vw;
}
.content1 .pic {top:0; right: 0; left: 0;}
.content1 .title {width: 87%;height: auto;background-size: 100%;margin-top: -24.5%;padding-bottom: 24.5%;}

/*  content2  */
.content2{position: relative;margin:0 auto;background-image: none;background-color: #000037;padding-top: 6em;padding-bottom: 5em;}
.content2 h2{
  font-size: 6vw;
  margin: 7vw auto auto 14vw;
}
.content2 h3{font-size: 18px;padding: 3% 0%;border-bottom: solid 5px #0f2fa2;margin-top: 7px;}
.content2 p{font-size: 15px;padding: 0% 0%;letter-spacing: 0em;margin: 2px;}
.content2 .pic {top:0; right: 0; left: 0;}
.content2 .title {
  width: 87%;
  height: auto;
  background-size: 100%;
  margin-top: -24.5%;
  padding-bottom: 24.5%;
  }

.content2 .title02, .content2 .title03, .content2 .title04, .content2 .title05, .content2 .title06 {
  width: 87%;
  height: auto;
  background-size: 100%;
  margin-top: -24.5%;
  padding-bottom: 24.5%;
  }
  
.fill .title {
  width: 87%;
  height: auto;
  background-size: 100%;
  margin-top: -17.5%;
  padding-bottom: 26.5%;
  }

.content2 .textBox{
  text-align: center;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(253,186,50,0.4);
  box-shadow: 3px 3px 2px rgba(0,0,0,0.8);
  width: 98%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  padding: 5px 5px;
  border: 2px solid #000;
  }

.fill .list{width: 100%;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;margin-top: -4%;}
.fill:before {background-image:none;background-color: #000037;}

.fill .form-control{
    height: 37px;
    font-size: 16px;
    margin: 3.2% auto;
    }

  .fill h2{
    font-size: 7vw;
    margin: 7vw auto auto 12vw;
  }

/* Bounce To Right 02*/
.hvr-bounce-to-right02 {
  padding: 2px;
}

/*  GO-bn  Float */
.GO-bn {
  padding: 2px 43px;
  border: 4px solid #ffd400;
}

.bottom-bn {position: fixed;background-color: #efefef;width: 100%;height: 4em;margin: 0 auto;z-index: 999;bottom: 0;}
.bottom-bn h2{font-size: 17px;letter-spacing: 1px;text-align: center;color: #af07c3;}
.bottom-bn a{color: #ffffff;}
.bottom-bn a:hover{color: #ffffff; text-decoration: none;}
	
/*PIC通用*/
img.two-box{width: 100%;height:auto;margin:0 auto;}
img.pic-logo{width: 100%;height:auto;margin: 0 auto;}
img.pic-bn{width: 82%;height:auto;margin: 0 auto;}
img.pic-gift{display: none;}
img.pic-cn{width: 101%;height:auto;margin:0 auto;}


}

/* ↓↓↓↓ iPhone X   iPhone6/7/8 w375 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) and (max-width:320px) {
/*BANNER*/
img.banner_big{display:none;}
img.banner_min{width: 100%;height: auto; display:block;}
img.banner001{top: 8.5%;left: 8.5%;z-index: 5;width: 81%;height:auto;}
img.banner003{top: 46%;left: 13%;z-index: 5;width: 74%;height:auto;}  
img.banner002{display:none;}
img.banner004{top: 46%;left: 13%;z-index: 7;width: 75%;height:auto;}
img.banner005{top: 8.5%;left: 10.5%;z-index: 2;width: 79%;height:auto;}

.top-word{position: absolute;display: block;left: 15%;top: 83%;z-index: 99;}  
.top-word h3{font-size: 2.3em;line-height: 1.5em;color: #2f2f2f;letter-spacing: 0.07em;}
.banner01{left: 15.5%;top: 60%;text-align:center;z-index: 99;position: absolute;} 

.logo{right: 0;top: 0.5em;left: 0px;width: 100%;height: auto;padding: 0 26%;}

/*PIC通用*/
img.pic1{width: 96%;height:auto;}
  
.st-block{position: relative;width:100%;padding-top: 4em;padding-bottom: 0;margin: 0 auto;}
.us-block{position: relative;width:100%;height: auto;padding-top: 2em;padding-bottom: 0em;margin: 0 auto;}
.jp-block{position: relative;width:100%;padding-top: 8em;padding-bottom: 2em;margin: 0 auto;}
.kr-block{position: relative;width:100%;padding-top: 6em;padding-bottom: 2em;margin: 0 auto;}
.sp-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fc-block{position: relative;width:100%;padding-top: 7em;padding-bottom: 2em;margin: 0 auto;}
.fill .fill-block{position: relative;width: 100%;padding-top: 0em;padding-bottom: 7em;margin: 0 auto;}

.top-word{left: 0.5%;top: 80%;background-image: url(../images/banner005.png);background-size: 100%;width: 22.5em;height: 52px;}
.top-word h1{font-size: 17px;letter-spacing: 0em;padding: 0px 0;margin-top: 5%;}
.top-2box {padding-top: 0;padding-bottom: 0;margin-top: 9%;background-image: none;background-color: #000037;}
.top-word h4{font-size: 15px;padding: 5px 0;}
.top-2box .box {position: absolute;left: 8%;top: 16.5%;z-index: 9;}
.top-2box .box2 {position: absolute;z-index: 8;left: 39.7%;top: 16.5%;}
.top-2box h2 {font-size: 22px;font-weight: bold;color: #fff;}

/*  區塊底色  */
.block-bu{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 10px 15px 20px 15px;}
.block-bu2{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-all.png);padding: 32px 20px 20px 20px;}
.block-gr{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-gr2.png);padding: 10px 10px 10px 15px;}
.block-og{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-og2.png);padding: 10px 15px 20px 15px;}
.block-rd{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-rd2.png);padding: 10px 15px 20px 15px;}
.block-pp{width: 100%;height: auto;margin: 0 auto;background-image: url(../images/block-pp2.png);padding: 10px 15px 20px 15px;}
	
/*  content1  */
.content1{position: relative;margin:0 auto;}
.content1 h2{
  font-size: 6vw;
  margin: 11.5vw auto auto 26vw;
}
.content1 .pic {top:0; right: 0; left: 0;}
.content1 .title {width: 87%;height: auto;background-size: 100%;margin-top: -24.5%;padding-bottom: 24.5%;}

/*  content2  */
.content2{position: relative;margin:0 auto;background-image: none;background-color: #000037;padding-top: 6em;padding-bottom: 5em;}
.content2 h2{
  font-size: 6vw;
  margin: 7.5vw auto auto 13vw;
}
.content2 h3{font-size: 18px;padding: 3% 0%;border-bottom: solid 5px #0f2fa2;margin-top: 0px;}
.content2 p{font-size: 15px;padding: 0% 0%;letter-spacing: 0em;margin: 2px;}
.content2 .pic {top:0; right: 0; left: 0;}
.content2 .title {
  width: 87%;
  height: auto;
  background-size: 100%;
  margin-top: -24.5%;
  padding-bottom: 24.5%;

  }

.content2 .title02, .content2 .title03, .content2 .title04, .content2 .title05, .content2 .title06 {
  width: 87%;
  height: auto;
  background-size: 100%;
  margin-top: -24.5%;
  padding-bottom: 24.5%;
  }

  
.fill .title {
  width: 87%;
  height: auto;
  background-size: 100%;
  margin-top: -17.5%;
  padding-bottom: 26.5%;
  }

.content2 .textBox{
  text-align: center;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px rgba(253,186,50,0.4);

  box-shadow: 3px 3px 2px rgba(0,0,0,0.8);
  width: 98%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  padding: 5px 5px;
  border: 2px solid #000;
  }

.fill .list{width: 100%;font: inherit;font-size: 100%;vertical-align: baseline;text-align: left;margin-top: -4%;}
.fill:before {background-image:none;background-color: #000037;}

.fill .form-control{
    height: 37px;
    font-size: 16px;
    margin: 2.2% auto;
    }

  .fill h2{
    font-size: 7vw;
    margin: 7vw auto auto 12vw;
  }

.bottom-bn{ background-color: #E0E0E0;width: 100%; height: 4em; margin: 0 auto;}
.bottom-bn h2{ font-size: 22px; text-align: center; color: #fff;}
	
/* Bounce To Right 02*/
.hvr-bounce-to-right02 {
  padding: 2px;
}

/*  GO-bn  Float */
.GO-bn {
  padding: 2px 35px;
  border: 4px solid #ffd400;
}
	
.bottom-bn {position: fixed;background-color: #efefef;width: 100%;height: 4em;margin: 0 auto;z-index: 999;bottom: 0;}
.bottom-bn h2{font-size: 16px;letter-spacing: 1px;text-align: center;color: #af07c3;}
.bottom-bn a{color: #ffffff;}
.bottom-bn a:hover{color: #ffffff; text-decoration: none;}
	
/*PIC通用*/
img.two-box{width: 100%;height:auto;margin:0 auto;}
img.pic-logo{width: 100%;height:auto;margin: 0 auto;}
img.pic-bn{width: 82%;height:auto;margin: 0 auto;}
img.pic-gift{display: none;}
img.pic-cn{width: 101%;height:auto;margin:0 auto;}

}





/* add swiper */
#section3minusTop {
  position: relative;
  top: -4.5rem;
}
.block-swiper {
  background-image: url(../images/block-bu.png);
  background-size: 100% 100%;
  height: 427px;
}

.container-swiper{
  max-width:1200px;
  min-width:280px;
  margin: 0  auto;
}

.swiper {
  width: 96%;
}

.swiper img {
  width: 100%;
}

@media screen and (max-width:992px) {
  .block-swiper {
    height: 380px;
  }
}
@media screen and (max-width:840px) {
  .block-swiper {
    height: 340px;
  }
}
@media screen and (max-width:768px) {
  .swiper {
    width: 92%;
  }
  .block-swiper {
    margin-top: -5rem;
    height: 427px;
  }
}
@media screen and (max-width:700px) {
  .block-swiper {
    height: 380px;
  }
}
@media screen and (max-width:580px) {
  .block-swiper {
    height: 320px;
  }
}
@media screen and (max-width:490px) {
  .block-swiper {
    height: 280px;
  }
}
@media screen and (max-width:415px) {
  .block-swiper {
    height: 240px;
  }
}