@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');

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: 90%;min-width:280px;height:auto;margin: 0  auto;}


/* 版頭動態 */
.slideshow {
  position: absolute;
  width: 100vw;
  height: 75vh;
  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: #005082;
  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: 52em;z-index: 1;color: white;margin: 0 auto;padding: 0;}
img.title, img.banner002{/* position:absolute; */}
img.title {-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;}

hr {
  padding-bottom: 2%;
  border-top: 1px solid #272343;
  /* background-color: #fff; */
}
.title{
  width: 100%;
  height: 4em;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
h1, h2, h3, h4{
  position: absolute;
  margin: 0 auto;
  text-align: center;
  left: 0;
  right: 0;
}

/*表單區*/
.fill{position:relative;text-align:center;width: 100%;height:auto;padding-top: 4em;padding-bottom: 8%;}
.fill h1, .content1 h3, .content2 h3{
  font-size: 3em;
  color: #272343;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 0;
  bottom: 61%;
}
.fill h2, .content1 h2, .content2 h2{
  font-size: 7em;
  color: #efeff0;
  z-index: 0;
  font-family: 'DM Serif Display', serif;
  bottom: 83%;
  line-height: 0;
}
.fill h4 {
  font-size: 20px;
  color: #272343;
  letter-spacing: 3px;
  margin: 0 auto;
  bottom: -25%;
}

.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: 98%;height: 45px;padding: 6px 12px;font-size: 18px;line-height: 1.42857143;color: #555;border: 0px solid #f7f9fb;border-radius: 5px;-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;background-color: #f3f3f3;}
.list{margin:0 auto;width: 75%;margin-left: 2%;}


/*PIC + 通用*/
img.pic1{max-width: 671px;height:auto;margin: 3em -19%;position: absolute;}
img.gift{width: auto;height: 300px;margin-left: -15%;}


/*  ↓↓↓↓  螢幕尺寸大於1920時頁面顯示效果↓↓↓↓  */
@media screen and (min-width:1920px) { 

  .width1280{max-width: 80%;min-width:280px;height:auto;margin: 0  auto;}

.banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        text-align: center;
        top: 39%;
} 

  img.title{
    width: 730px;
    height: auto;
  }

.content1, .content2{
  position: relative;
  padding-bottom: 6%;
}

.content1 .title01, .content1 .title02{
  font-size: 23px;
  letter-spacing: 3px;
  border-radius: 5px;
  text-align: center;
  padding: 9px;
  margin-bottom: 8%;
  color: #fff;
  width: 94%;
  margin: 0 auto 5%;
}

.content1 .title01{
  background-color: #e24d4d;
}
.content1 .title02{
  background-color: #5facce;
}
.content1 .content-jp, .content1 .content-us{
  padding-bottom: 3%;
}
.content1 p {
    color: #989898;
    letter-spacing: 2px;
    text-align: center;
    line-height: 3.5;
    padding-top: 25%;
}

.table {
    width: 85%;
    max-width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
  }
td {
  text-align: left;
  font-size: 17px;
  letter-spacing: 2px;
}
.jp {
  background-color: #e24d4d;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
.us {
  background-color: #5facce;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
  img.pic{
  height:auto;
  width: 100%;
  padding: 0 3%;
}
 
.content2 .big-box {
    margin-right: 2%;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    letter-spacing: 2px;
    margin-bottom: 1%;
 }
  .content2 img.student{
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: .2s;
  }

.content2 .big-box .box-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    font-size: 25px;
    font-weight: 900;
    line-height: 30px;
    border-bottom: #aaa 1px solid;
}
.box-content {
  padding: 25px;
}
.box-content .title-content {
   font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.box-content p {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
span.tag {
    line-height: 30px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.color_us {
    background: #478EBF;
}
.color_jp {
    background: #E24D4D;
}

}

/*  ↓↓↓↓  螢幕尺寸大於1440時頁面顯示效果↓↓↓↓  */
@media (min-width: 1680px) and (max-width:1919px) {
  .banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        text-align: center;
        top: 39%;
} 

  img.title{
    width: 730px;
    height: auto;
  }

.content1, .content2{
  position: relative;
  padding-bottom: 6%;
}

.content1 .title01, .content1 .title02{
  font-size: 23px;
  letter-spacing: 3px;
  border-radius: 5px;
  text-align: center;
  padding: 9px;
  margin-bottom: 8%;
  color: #fff;
  width: 94%;
  margin: 0 auto 5%;
}

.content1 .title01{
  background-color: #e24d4d;
}
.content1 .title02{
  background-color: #5facce;
}
.content1 .content-jp, .content1 .content-us{
  padding-bottom: 3%;
}
.table {
    width: 85%;
    max-width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
  }
td {
  text-align: left;
  font-size: 17px;
  letter-spacing: 2px;
}
.jp {
  background-color: #e24d4d;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
.us {
  background-color: #5facce;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
  img.pic{
  height:auto;
  width: 100%;
  padding: 0 3%;
}
 
.content2 .big-box {
    margin-right: 2%;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    letter-spacing: 2px;
    margin-bottom: 1%;
 }
  .content2 img.student{
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: .2s;
  }

.content2 .big-box .box-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    font-size: 25px;
    font-weight: 900;
    line-height: 30px;
    border-bottom: #aaa 1px solid;
}
.box-content {
  padding: 25px;
}
.box-content .title-content {
   font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.box-content p {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
span.tag {
    line-height: 30px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.color_us {
    background: #478EBF;
}
.color_jp {
    background: #E24D4D;
}
img.gift {
    width: auto;
    height: 300px;
    margin-left: -31%;
}
  .content1 p {
    color: #989898;
    letter-spacing: 2px;
    text-align: center;
    line-height: 2.5;
}
}

/*  ↓↓↓↓  ipad 橫向 w1024 ↓↓↓↓   */
@media (min-width: 1024px) and (max-width:1679px) {
  .list {
    margin: 0 auto;
    width: 90%;
    margin-left: 2%;
}
  .width1280 {
    max-width: 95%;
    height: auto;
}
  .banner {
    width: 100%;
    height: 38em;
}
  .banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        text-align: center;
        top: 39%;
} 

  img.title{
    width: 37%;
    height: auto;
  }
    img.banner002{
    width: 24%;
    height: auto;
  }

.fill h2, .content1 h2, .content2 h2 {
    font-size: 5.5em;
    bottom: 70%;
    line-height: 0;
}

.content1, .content2{
  position: relative;
  padding-bottom: 4%;
}

.content1 .title01, .content1 .title02{
  font-size: 23px;
  letter-spacing: 3px;
  border-radius: 5px;
  text-align: center;
  padding: 9px;
  margin-bottom: 8%;
  color: #fff;
  width: 94%;
  margin: 0 auto 5%;
}

.content1 .title01{
  background-color: #e24d4d;
}
.content1 .title02{
  background-color: #5facce;
}
.content1 .content-jp, .content1 .content-us{
  padding-bottom: 4%;
}
.table {
    width: 85%;
    max-width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
  }

td {
  text-align: left;
  font-size: 14px;
  letter-spacing: 2px;
}

.jp {
  background-color: #e24d4d;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }

.us {
  background-color: #5facce;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }

  img.pic{
  height:auto;
  width: 100%;
  padding: 0 3%;
}
 
.content2 .big-box {
    margin-right: 1%;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    letter-spacing: 1px;
    margin-bottom: 1%;
 }
  .content2 img.student{
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: .2s;
  }

.content2 .big-box .box-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    font-size: 21px;
    font-weight: 900;
    line-height: 30px;
    border-bottom: #aaa 1px solid;
}

.box-content {
  padding: 25px;
}

.box-content .title-content {
   font-size: 15px;
   font-weight: 900;
   margin-bottom: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}
.box-content p {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
span.tag {
    line-height: 30px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.color_us {
    background: #478EBF;
}
.color_jp {
    background: #E24D4D;
  }
img.gift {
    width: 210%;
    height: auto;
    margin-left: -50%;
  }
.content1 p {
    color: #989898;
    letter-spacing: 2px;
    text-align: center;
    line-height: 2.5;
}
}

/*  ↓↓↓↓  ipad 直向 w768 ↓↓↓↓  */
@media (min-width: 768px) and (max-width:1023px) {  
  .banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        text-align: center;
        top: 54%;
} 

  img.title{
    width: 62%;
    height: auto;
  }
  img.banner002{
    width: 36%;
    height: auto;
  }

.content1, .content2{
  position: relative;
  padding-bottom: 14%;
}

.content1 .title01, .content1 .title02{
  font-size: 23px;
  letter-spacing: 3px;
  border-radius: 5px;
  text-align: center;
  padding: 9px;
  margin-bottom: 8%;
  color: #fff;
  width: 94%;
  margin: 0 auto 5%;
}

.content1 .title01{
  background-color: #e24d4d;
}
.content1 .title02{
  background-color: #5facce;
}
.content1 .content-jp, .content1 .content-us{
  padding-bottom: 3%;
}
.table {
    width: 60%;
    max-width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
  }
td {
  text-align: left;
  font-size: 17px;
  letter-spacing: 2px;
}
.jp {
  background-color: #e24d4d;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
.us {
  background-color: #5facce;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
  img.pic{
  height:auto;
  width: 100%;
  padding: 4% 3%;
}
 
.content2 .big-box {
    margin-right: 10px;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    letter-spacing: 2px;
    margin-bottom: 10px;
 }
  
.content2 .big-box .box-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    font-size: 21px;
    font-weight: 900;
    line-height: 30px;
    border-bottom: #aaa 1px solid;
}
  .content2 img.student{
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: .2s;
  }
.box-content {
  padding: 25px;
}
.box-content .title-content {
   font-size: 15px;
   font-weight: 900;
   margin-bottom: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}
.box-content p {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
span.tag {
    line-height: 30px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.color_us {
    background: #478EBF;
}
.color_jp {
    background: #E24D4D;
}

img.gift {
    width: 158%;
    height: auto;
    margin-left: -36%;
}
.list {
    width: 100%;
    margin: 0;
    padding: 2% 7%;
}
.banner {
    width: 100%;
    height: 45em;
}
.fill {
    padding-top: 4em;
    padding-bottom: 13%;
}
.fill h1, .content1 h3, .content2 h3 {
    font-size: 3em;
    bottom: 113%;
}
.fill h4 {
    font-size: 15px;
    letter-spacing: 1px;
    bottom: -68%;
}
.fill h2, .content1 h2, .content2 h2 {
    font-size: 4em;
    bottom: 190%;
}
.title {
    width: 100%;
    height: 2em;
}
.content1 p {
    color: #989898;
    letter-spacing: 2px;
    text-align: center;
    line-height: 2.5;
}

}

/* ↓↓↓↓ iPhone Plus w414  Pixel 2 w411 手機尺寸,顯示效果 ↓↓↓↓  */
@media (min-width: 360px) and (max-width:767px) {
 .banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        text-align: center;
        top: 47%;
} 

  img.title{
    width: 84%;
    height: auto;
  }
  img.banner002{
    width: 50%;
    height: auto;
  }

.content1, .content2{
  position: relative;
  padding-bottom: 20%;
}

.content1 .title01, .content1 .title02{
  font-size: 23px;
  letter-spacing: 3px;
  border-radius: 5px;
  text-align: center;
  padding: 9px;
  margin-bottom: 8%;
  color: #fff;
  width: 94%;
  margin: 0 auto 5%;
}

.content1 .title01{
  background-color: #e24d4d;
}
.content1 .title02{
  background-color: #5facce;
}
.content1 .content-jp, .content1 .content-us{
  padding-bottom: 3%;
}
.table {
    width: 80%;
    max-width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
  }
td {
  text-align: left;
  font-size: 17px;
  letter-spacing: 2px;
}
.jp {
  background-color: #e24d4d;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
.us {
  background-color: #5facce;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
  img.pic{
  height:auto;
  width: 100%;
  padding: 4% 3%;
}
 
.content2 .big-box {
    margin-right: 0;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    letter-spacing: 2px;
    margin-bottom: 10px;
 }
  
.content2 .big-box .box-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    font-size: 21px;
    font-weight: 900;
    line-height: 30px;
    border-bottom: #aaa 1px solid;
}
  .content2 img.student{
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: .2s;
  }
.box-content {
  padding: 25px;
}
.box-content .title-content {
   font-size: 15px;
   font-weight: 900;
   margin-bottom: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}
.box-content p {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
span.tag {
    line-height: 30px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.color_us {
    background: #478EBF;
}
.color_jp {
    background: #E24D4D;
}

img.gift {
    width: 158%;
    height: auto;
    margin-left: -36%;
}
.list {
    width: 100%;
    margin: 0;
    padding: 2% 7%;
}
.banner {
    width: 100%;
    height: 28em;
}
.fill {
    padding-top: 4em;
    padding-bottom: 22%;
}
.fill h1, .content1 h3, .content2 h3 {
    font-size: 2.6em;
    bottom: 113%;
}
.fill h4 {
    font-size: 15px;
    letter-spacing: 1px;
    bottom: -45%;
}
.fill h2, .content1 h2, .content2 h2 {
    font-size: 2.2em;
    bottom: 215%;
}
.title {
    width: 100%;
    height: 2em;
}
.content1 p {
    color: #989898;
    letter-spacing: 2px;
    text-align: center;
    line-height: 2.5;
}

}


/* ↓↓↓↓ 手機尺寸SE ,顯示效果 ↓↓↓↓  */
@media (min-width: 320px) and (max-width:359px) {
.banner .top-tx {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        text-align: center;
        top: 55%;
} 

  img.title{
    width: 96%;
    height: auto;
  }
  img.banner002{
    width: 50%;
    height: auto;
  }

.content1, .content2{
  position: relative;
  padding-bottom: 25%;
}

.content1 .title01, .content1 .title02{
  font-size: 23px;
  letter-spacing: 3px;
  border-radius: 5px;
  text-align: center;
  padding: 9px;
  margin-bottom: 8%;
  color: #fff;
  width: 94%;
  margin: 0 auto 5%;
}

.content1 .title01{
  background-color: #e24d4d;
}
.content1 .title02{
  background-color: #5facce;
}
.content1 .content-jp, .content1 .content-us{
  padding-bottom: 3%;
}
.table {
    width: 85%;
    max-width: 100%;
    margin-bottom: 20px;
    margin: 0 auto;
  }
td {
  text-align: left;
  font-size: 17px;
  letter-spacing: 2px;
}
.jp {
  background-color: #e24d4d;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
.us {
  background-color: #5facce;
  font-weight: bold;
  color: #fff;
  width: 45px;
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  }
  img.pic{
  height:auto;
  width: 100%;
  padding: 7% 3%;
}
 
.content2 .big-box {
    margin-right: 0;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    background-color: #fff;
    letter-spacing: 2px;
    margin-bottom: 1%;
 }
  
.content2 .big-box .box-name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    font-size: 25px;
    font-weight: 900;
    line-height: 30px;
    border-bottom: #aaa 1px solid;
}
  .content2 img.student{
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: .2s;
  }
.box-content {
  padding: 25px;
}
.box-content .title-content {
   font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.box-content p {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
span.tag {
    line-height: 30px;
    padding: 0 10px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.color_us {
    background: #478EBF;
}
.color_jp {
    background: #E24D4D;
}

img.gift {
    width: auto;
    height: 160px;
    margin-left: -59%;
}
.list {
    width: 100%;
    margin: 0;
    padding: 2% 7%;
}
.banner {
    width: 100%;
    height: 28em;
}
.fill {
    padding-top: 4em;
    padding-bottom: 23%;
}
.fill h1, .content1 h3, .content2 h3 {
    font-size: 2.2em;
    bottom: 61%;
}
.fill h4 {
    font-size: 15px;
    letter-spacing: 1px;
    bottom: -68%;
}
.fill h2, .content1 h2, .content2 h2 {
    font-size: 2em;
    bottom: 160%;
}
.title {
    width: 100%;
    height: 2em;
}
.content1 p {
    color: #989898;
    letter-spacing: 2px;
    text-align: center;
    line-height: 2.5;
}

}