/* img */
.logo img,
.cyimg img,
.x15 img,
.hbt img,
.ctm div img,
.slogn img,
.rbt img,
.rbpo img,
.pinma div img,
.st1bx div img,
.rbt2 img,
.smrbt img,
.nbbox div img,
.sttl img,
.s3box div img,
.swiper-slide img,
.s4box div img,
.s5box div img,
.lgbox div img,
.rbtappbx div img,
.s4t img,
.s3f img,
.s6bt img,
.s6tl img,
.s6app img,
.s6cm div img,
.s6img img,
.nbbox2 img,
.s2askl img,
.s2askr img,
.s2gf1 img,
.s2gf2 img,
.s2gf3 img {
  display: block;
  width: 100%;
}

/* head */
#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  /* z-index: 2; */
}
.particle {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: -38%;
  margin-left: -50%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 6;
  -webkit-filter: brightness(0.5);
}
video {
  width: 100%;
  height: 100%;
}
.webbox {
  width: 100%;
  position: relative;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  overflow: hidden;
}
.logo {
  position: absolute;
  left: 2%;
  top: 1%;
  width: 195px;
}
.head {
  position: relative;
  background: url("../images/index_01.gif");
  padding-bottom: 47%;
  background-size: 100% auto;
}
.tfbox {
  width: 110px;
  position: absolute;
  right: 1%;
  top: 1%;
}
.hfbbox {
  position: absolute;
  top: 1%;
  right: 1%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.hbt {
  width: 30%;
  margin: 0 1%;
}
.bt:hover {
  transform: scale(0.95);
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  filter: brightness(1.1);
  cursor: pointer;
}
.btn:hover {
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  filter: brightness(1.2);
  cursor: pointer;
}
.s6lr {
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ctbox {
  position: absolute;
  width: 30%;
  padding-bottom: 5.5%;
  left: 50%;
  margin-left: -15%;
  bottom: -13%;
}
.ctm {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 9%;
}

.ctax {
  width: 55%;
  margin: 0 2%;
}

.ctbx {
  width: 100%;
  margin: 0%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.ctbx div {
  margin: 5% 1%;
}
.slogn {
  position: absolute;
  width: 30%;
  top: 50%;
  left: 50%;
  margin-left: -5%;
  animation: enterIn 1s ease-in-out infinite;
}
.s1join {
  width: 70%;
  position: relative;
  overflow: hidden;
  margin: 5% auto;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  border-radius: 30%;
}
.s1join::before {
  content: "";
  position: absolute;

  display: block;
  width: 1000px;
  height: 100px; /**白光的宽度，可根据实际调整**/
  background-image: linear-gradient(
    to bottom,
    transparent,
    rgba(253, 255, 210, 0.6),
    transparent
  );
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: searchLights 3s ease-in 1s infinite;
  -o-animation: searchLights 3s ease-in 1s infinite;
  animation: searchLights 1.5s ease-in 1s infinite;
}

.slr {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin: 5% auto;
}
.s1apbx {
  width: 80%;
  /* display: flex;
  align-items: center;
  align-content: center;
  justify-content: center; */
}
.s1gfx {
  width: 100%;
}
.s1ap {
  width: 90%;
  margin: 2%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.s1fbx {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
/* rbt */
.rbtbox {
  position: fixed;
  background: url("../images/rbtbg.png") no-repeat;
  background-size: 100% auto;
  width: 13.5%;
  height: 760px;
  right: 0;
  top: 10%;
  z-index: 20;
}
.rbtboxmb {
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 28vw;
  background: url("../images/mbbu.png") no-repeat;
  background-size: 100% auto;
  z-index: 5;
  display: none;
}
.rbtx {
  position: absolute;
  z-index: 1;
  width: 60%;
  margin: 220% 0 0 27%;
}
.rbt {
  margin: 5% auto;
}
.rbpo {
  position: absolute;
  width: 100%;
  top: 2%;
  animation: float 1.5s ease-in-out infinite;
}
.rbt2 {
  position: absolute;
  z-index: 1;
}
.pinma {
  position: absolute;
  width: 12.5%;
  padding-bottom: 15%;
  bottom: 5%;
  left: 5%;
}
.pima {
  position: relative;
  width: 100%;
  animation: expand-contract 2s ease-in-out infinite;
}
.pinb {
  position: absolute;
  width: 100%;
  top: -40%;
  left: 14%;
  animation: swing 0.5s ease-in-out infinite;
}
/* content */
.stg1 {
  position: relative;
  width: 100%;
  background: url("../images/indexm_02.jpg");
  background-size: 100% 100%;
}
.stg2 {
  position: relative;
  width: 100%;
  background: url("../images/indexm_03.jpg");
  background-size: 100% 100%;
}
.stg3 {
  position: relative;
  width: 100%;
  background: url("../images/indexm_05.jpg");
  background-size: 100% 100%;
}
.stg4 {
  position: relative;
  width: 100%;
  background: url("../images/indexm_06.jpg");
  background-size: 100% 100%;
}
.stg5 {
  position: relative;
  width: 100%;
  background: url("../images/indexm_07.jpg");
  background-size: 100% 100%;
}
.stg6 {
  position: relative;
  width: 100%;
  background: url("../images/indexm_04.jpg");
  background-size: 100% 100%;
}

.s3c {
  width: 100%;
  position: relative;
  background: url("../images/s3indexbg_02.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 72%;
}
.s6c {
  width: 100%;
  position: relative;
  background: url("../images/stg5_02.png") no-repeat;
  background-size: 100% 100%;
  /* padding-bottom: 72%; */
}
.s3f {
  display: block;
  width: 100%;
  margin-top: -1px;
}
.s6cx {
  width: 40%;
  margin: 0.5%;
  /* border: 1px solid #000; */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
}
.s6cx2 {
  width: 58%;
  margin: 0.5%;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
}
.s6cx3 {
  width: 100%;
  margin: 0.5%;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
}
.s6ct {
  width: 100%;
  height: 70px;
  background: url("../images/s5tbg.png");
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.s6cm {
  width: 100%;
  height: 8vw;
  background: url("../images/s5mbg.png");
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.s6cm2 {
  width: 100%;
  padding: 10px;
  background: url("../images/s5mbg.png");
  background-size: 100% 100%;
  /* display: flex;
  align-items: center;
  align-content: center;
  justify-content: center; */
  position: relative;
}
.s6jp {
  padding: 4px;
  border: 4px double #8b846d;
}
.s6img {
  position: relative;
  width: 80%;
  margin: 1% auto;

  background-color: #3f3c31;
  font-weight: 600;
}
.s6tc {
  color: #fcffe1;
  text-align: center;
  font-size: 1.2em;
  padding: 10px;
}
.s6tl {
  width: 284px;
}
.s6co {
  width: 100%;
  /* padding: 20px; */

  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  background-size: 100% 100%;
}
.s6gg {
  width: 70%;
  margin: 0 auto;
}
.s6po {
  position: absolute;
  left: 1%;
  bottom: 0;
}
.s6app {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.s6app div {
  margin: 0 1%;
}
.s3-item {
  width: 100%;
}
.s4t {
  display: block;
}
.s4c {
  width: 100%;
  background: url("../images/stg4_02.png") no-repeat;
  background-size: 100% 100%;
}
.s31:hover,
.s32:hover,
.s33:hover {
  transform: scale(1.05);
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  filter: brightness(1.1);
  cursor: pointer;
}
.run1 {
  width: 10%;
  position: absolute;
  right: 38%;
  top: 20%;
}
.run3 {
  width: 10%;
  position: absolute;
  right: 37%;
  top: 81%;
}
.run2 {
  width: 10%;
  position: absolute;
  left: 12%;
  top: 52%;
}
.s3-item > .run1,
.s3-item > .run2,
.s3-item > .run3 {
  display: none;
  position: absolute;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.s3-item:hover .run1,
.s3-item:hover .run2,
.s3-item:hover .run3 {
  display: block; /* 懸停時顯示 */
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.runs {
  width: 10%;
  position: absolute;
  right: 38%;
  top: 20%;
}
.s3-item:hover .runs,
.s3-item:hover .runss,
.s3-item:hover .runsss {
  opacity: 0; /* 變成透明（消失） */
  /* 如果您想徹底讓它不佔空間，可以改用 display: none; 但這樣就沒有過渡動畫了 */
}
.s31 {
  width: 30%;
  position: absolute;
  right: 14%;
  top: 0%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.runss {
  width: 10%;
  position: absolute;
  left: 12%;
  top: 52%;
}
.s32 {
  width: 30%;
  position: absolute;
  left: 14%;
  top: 27%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.runsss {
  width: 10%;
  position: absolute;
  right: 37%;
  top: 81%;
}
.s33 {
  width: 30%;
  position: absolute;
  right: 14%;
  top: 60%;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.st1bx,
.st2bx {
  width: 69.5%;
  position: relative;
  margin: 0 auto;
}
.s3box {
  width: 69.5%;
  position: relative;
  margin: 0 auto;
  padding-top: 5%;
}
.s6box {
  width: 69.5%;
  position: relative;
  margin: 0 auto;
  /* padding-top: 5%; */
}
.s4box {
  width: 69.5%;
  position: relative;
  margin: 0 auto;
  padding-top: 5%;
}
.s5box {
  width: 69.5%;
  position: relative;
  margin: 0 auto;
  padding: 5% 0;
}
.s5tl {
  width: 60%;
  margin: 0 auto;
}
.s5cx {
  width: 90%;
  margin: 5% auto 0 auto;
}
.s5c {
  width: 100%;
  background: url("../images/s5cx_02.png");
  background-size: 100% auto;
}
.s5ct {
  width: 70%;
  margin: 0 auto;
}
.ulibx {
  width: 100%;
  font-size: 1.2em;
}
.ulibx ul li {
  padding-bottom: 2%;
}
.swbox {
  width: 70%;
  margin: 0 auto;
  padding: 5% 0;
}
.content {
  position: relative;
  width: 100%;
}
.sttl,
.stfd {
  width: 100%;
}
.stcm {
  width: 100%;
  background: url("../images/sgu.png") no-repeat, url("../images/sgubg_02.png");
  background-position: 90% bottom, 0;
  background-size: 45% auto, 100% 100%;
}
.st2c {
  width: 100%;
  background: url("../images/s2mbg_02.png") no-repeat;
  background-size: 100% auto;
}
.s6btx {
  position: relative;
  /* width: 80%; */
  margin: 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.s6cont {
  width: 80%;
  margin: 0 auto;
}
.s2nbox {
  width: 80%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 100%;
}
.nbbox {
  position: absolute;
  width: 84.5%;

  background: url("../images/nbg.png") no-repeat;
  background-size: 100% 100%;
  left: 50%;
  margin-left: -42.25%;
  /* padding-bottom: 10%; */
}
.nbbox2 {
  position: absolute;
  width: 90%;
  top: 22%;
  background: url("../images/nbg2.png") no-repeat;
  background-size: 100% 100%;
  left: 50%;
  margin-left: -45%;
  /* padding-bottom: 10%; */
}
/* .nbbox2::before {
  content: "";
  position: absolute;
  width: 11%;
  padding-bottom: 8.5%;
  top: 43%;
  left: -11%;
  background: url("../images/nt.png") no-repeat;
  background-size: 100% 100%;
  animation: lightMove 3s linear infinite;
} */
.nb {
  margin: 0 2%;
  width: 11.6667%;
}
.nb2 {
  margin: 0 2%;
  width: 10%;
}
.nbbb {
  margin: 7% auto 3% auto;
  width: 90%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.nbbb2 {
  margin: 7% auto 3% auto;
  width: 90%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.s2askl {
  width: 30.5%;
  position: absolute;
  left: 20%;
  top: 43%;
  animation: enterIn 1s ease-in-out infinite;
}
.s2askr {
  width: 30.5%;
  position: absolute;
  right: 16%;
  top: 42%;
  animation: enterIn 0.5s ease-in-out infinite;
}
.s2gf1 {
  position: absolute;
  bottom: 28%;
  left: 43%;
  width: 20%;
  animation: float 2s ease-in-out infinite;
}
.s2gf2 {
  position: absolute;
  bottom: 25%;
  left: 64%;
  width: 21%;
  animation: float 1.5s ease-in-out infinite;
}
.s2gf3 {
  position: absolute;
  bottom: 25%;
  left: 21%;
  width: 22%;
  animation: float 1.7s ease-in-out infinite;
}
.st1l {
  width: 100%;
}
.poma {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.poma div {
  margin: 0 1%;
}
.pol,
.porr {
  width: 29%;
}
.por,
.poll {
  width: 77%;
  position: relative;
}
.snd {
  /* width: 100%; */
  height: 40px;
  background-color: #ff006a;
  color: #fff;
  padding: 5px;
  text-align: center;
  line-height: 2.2rem;
  border-radius: 10px;
  font-size: 1rem;
}
.smc {
  width: 64%;
  margin: 0 auto;
  position: relative;
}
.sml {
  width: 65%;
}
.smr {
  position: absolute;
  right: -35%;
  top: -3%;
  width: 70%;
  padding-bottom: 102%;
  background: url("../images/s1rmg.png") no-repeat;
  background-size: 100% auto;
}
.smrbt {
  position: absolute;
  width: 25.6%;
  right: 15%;
  top: 10vw;
  animation: swing 0.2s ease-in-out infinite;
}
.smrr {
  width: 100%;
  position: relative;
  height: auto;
}
.s1stl {
  padding: 1.5% 0;
}
/* topbt */
.dtt {
  position: fixed;
  width: 100%;
  max-width: 2000px;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
}
.topbt {
  position: absolute;
  width: 70px;
  padding-bottom: 69px;
  display: none;
  cursor: pointer;
  background-attachment: scroll;
  background-image: url(../images/top.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: 100% auto, 100% auto;
  bottom: -154px;
  right: 60px;
  z-index: 11;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
}

/* cy */
.copybox {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 230px;
  background-color: rgb(23, 22, 16);
  transition: transform 0.6s ease;
  /* transform: translateY(70%); */
  overflow: hidden;
}
.copycont {
  width: 50%;
  margin: 0 auto;
  padding: 20px 0;
}
.cytx {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cyfx {
  width: 70%;
  margin: 0 auto;
  color: #8b846d;
  font-size: 0.8rem;
  position: relative;
  line-height: 1.2rem;
}
.cyimg {
  margin: 0 10px;
}
.x15 {
  position: absolute;
  width: 40px;
  bottom: 10%;
  right: 0%;
}
/* lightbox */
#mvlight,
#mvlight2 {
  position: fixed;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2001;
  overflow: hidden;
  display: none;
}
.mvbox,
.mvbox2,
#video,
#video2 {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 讓影片本身填滿整個空間 */
#myVideo,
#myVideo2 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例並填滿空間 */
  position: absolute;
  top: 0;
  left: 0;
}
.mvclose {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0%;
  top: 1%;
  z-index: 5;
}
#light_bx {
  position: fixed;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2001;
  overflow: auto;
  display: none;
}
#light_bx {
  position: fixed;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2001;
  overflow: auto;
  display: none;
}
#light_bx > .infobx_1 {
  position: relative;
  width: 800px;
  min-height: 500px;
  display: block;
  margin: 0 auto;
  display: none;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.65));
  filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.65));
  font-size: 1.2rem;
  line-height: 2rem;
}
.bx_a_clos {
  position: absolute;
  width: 50px;
  padding-bottom: 50px;
  display: block;
  cursor: pointer;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-image: url(../images/close.png);
  background-position: 100% 0%;
  background-size: 100% auto;
  top: -7%;
  right: -2%;
  z-index: 2;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
}
.gfimg {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.popxx {
  width: 90%;
  margin: 0 auto;
  /* max-height: 45vh; */

  /* overflow-y: auto; */
  color: #fff;
}
.popxxc {
  width: 90%;
  margin: 0 auto;
  /* max-height: 45vh; */
  padding: 10px;

  /* overflow-y: auto; */
  color: #fff;
  text-align: center;
  font-size: 1.2em;
}
.lgbox {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.pom2 {
  background: url("../images/ligbg_02.png");
  background-size: 100% auto;
  /* min-height: 100px; */
}
#systm > .lgbox > .pom2 {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.poctx {
  color: #fff;
  text-align: center;
  margin: 1% auto;
}
.acx {
  padding-bottom: 3%;
}
.potl {
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: #92b4ff;
}
.potll {
  font-weight: 600;
  color: #4bdbff;
  font-size: 1.6em;
  width: 80%;
  padding: 10px;
  margin: 0 auto 3% auto;
  text-align: center;
  background-color: #254749;
  border-radius: 30px;
  border: 4px double #1ec2ea;
}
.pcimg {
  display: block;
}
.mbimg {
  display: none;
}
.rbtappbx {
  width: 32%;
  position: absolute;
  right: 2%;
  bottom: 5%;
}
.rbtappbx div {
  margin: 3% auto;
}
.sok {
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
}
.smct {
  width: 100%;
  font-size: 2vw;
  text-align: center;
  padding-bottom: 2%;
  font-weight: 600;
  color: #ff4000;
  text-shadow: 0px 1px 5px rgb(255, 255, 255);
}
@media only screen and (max-width: 560px) {
  .s6cx {
    width: 40%;
    margin: 0.5%;
    /* border: 1px solid #000; */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
  }
  .s6cx2 {
    width: 58%;
    margin: 0.5%;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
  }
  .s6cx3 {
    width: 100%;
    margin: 0.5%;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
  }
  .s2askl {
    width: 31.5%;
    position: absolute;
    left: 20%;
    top: 43%;
    animation: enterIn 1s ease-in-out infinite;
  }
  .s2askr {
    width: 29.5%;
    position: absolute;
    right: 15%;
    top: 42%;
    animation: enterIn 0.5s ease-in-out infinite;
  }
  .s2gf2 {
    position: absolute;
    bottom: 17%;
    left: 68%;
    width: 30%;
    animation: float 1.5s ease-in-out infinite;
  }
  .s2gf1 {
    position: absolute;
    bottom: 21%;
    left: 39%;
    width: 30%;
    animation: float 2s ease-in-out infinite;
  }
  .s2gf3 {
    position: absolute;
    bottom: 20%;
    left: 13%;
    width: 30%;
    animation: float 1.7s ease-in-out infinite;
  }
  .s6po {
    width: 32%;
  }
  .s6img {
    position: relative;
    width: 100%;
    margin: 1% auto;
    background-color: #3f3c31;
    font-weight: 600;
  }
  .s6app {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .s6cx2 {
    width: 100%;
    margin: 5% auto;
  }
  .s6co {
    width: 100%;
    padding: 20px;
  }
  .s6cm {
    height: auto;
  }
  .s6cx {
    width: 100%;
    margin: 0 auto;
  }
  .s6bt {
    width: 49%;
  }
  .s6btx {
    flex-wrap: wrap;
  }
  .s6box {
    width: 98%;
    position: relative;
    margin: 0 auto;
    padding-top: 5%;
  }
  .smct {
    width: 100%;
    font-size: 3.6vw;
    text-align: center;
    padding-bottom: 2%;
    font-weight: 600;
    color: #ff4000;
    text-shadow: 0px 1px 5px rgb(255, 255, 255);
  }
  .topbt {
    position: absolute;
    width: 50px;
    padding-bottom: 180px;
    display: none;
    cursor: pointer;
    background-attachment: scroll;
    background-image: url(../images/top.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 50%, 50% 50%;
    background-size: 100% auto, 100% auto;
    bottom: -90px;
    right: 9px;
    z-index: 11;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
  .ctm {
    display: block;
  }
  .ctax {
    position: absolute;
    width: 50%;
    margin-top: -1%;
    left: 50%;
    margin-left: -25%;
  }
  .ctbx {
    position: absolute;
    bottom: -140px;
  }
  .gfimg {
    flex-wrap: wrap;
  }
  .gfimg div {
    width: 33%;
  }
  .potll {
    font-weight: 600;
    color: #4bdbff;
    font-size: 1.2em;
    width: 80%;
    padding: 10px;
    margin: 0 auto 3% auto;
    text-align: center;
    background-color: #254749;
    border-radius: 30px;
    border: 4px double #1ec2ea;
  }
  .ctbox {
    position: absolute;
    background-image: none;
    width: 100%;
    padding-bottom: 34.4%;
    left: 50%;
    margin-left: -50%;
    bottom: 0%;
  }
  .s5ct {
    width: 90%;
    margin: 0 0 0 41px;
  }
  .mvclose {
    width: 100px;
    height: 100px;
    position: absolute;
    right: -7%;
    top: 1%;
    z-index: 5;
  }
  .stg1 {
    position: relative;
    width: 100%;
    background: url("../images/inmb_02.jpg");
    background-size: 100% 100%;
  }
  .stg2 {
    position: relative;
    width: 100%;
    background: url("../images/inmb_03.jpg");
    background-size: 100% 100%;
  }
  .stg3 {
    position: relative;
    width: 100%;
    background: url("../images/inmb_04.jpg");
    background-size: 100% 100%;
  }
  .stg4 {
    position: relative;
    width: 100%;
    background: url("../images/inmb_05.jpg");
    background-size: 100% 100%;
  }
  .stg5 {
    position: relative;
    width: 100%;
    background: url("../images/inmb_06.jpg");
    background-size: 100% 100%;
  }
  .pinb {
    position: absolute;
    width: 100%;
    top: -52%;
    left: 14%;
    animation: swing 0.5s ease-in-out infinite;
  }
  .pinma {
    position: absolute;
    width: 25.5%;
    padding-bottom: 25%;
    bottom: 17%;
    left: -3%;
    z-index: 1;
  }
  .slogn {
    position: absolute;
    width: 60%;
    top: 66%;
    left: 50%;
    margin-left: -30%;
    animation: enterIn 1s ease-in-out infinite;
  }
  .hfbbox {
    position: absolute;
    top: 1%;
    right: 0%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .ctbx div {
    margin: 5% 0.2%;
  }
  /* .ctbox {
    display: none;
  } */
  .logo {
    position: absolute;
    left: 2%;
    top: -1%;
    width: 120px;
  }
  .head {
    position: relative;
    background: url("../images/mbindex1_01.gif");
    padding-bottom: 176%;
    background-size: 100% auto;
  }
  .smrbt {
    position: absolute;
    width: 33.6%;
    right: 11%;
    top: 25vw;
    animation: swing 0.2s ease-in-out infinite;
  }
  .s1fpo {
    display: none;
  }
  .s1fb {
    width: 90%;
    margin: 2% auto;
    overflow: hidden;
  }
  .stcm {
    width: 100%;
    background: url("../images/sgu.png") no-repeat,
      url("../images/sgubg_02.png");
    background-position: 90% bottom, 0;
    background-size: 45%, 100% 100%;
  }
  .s1stl {
    padding: 0;
  }
  .s1ap {
    width: 99.5%;
    margin: 3% auto;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
  }
  .pol,
  .porr {
    width: 50%;
  }
  .sml {
    width: 95%;
    margin: 0 auto;
  }
  .smc {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  .smr {
    position: relative;
    width: 95%;
    margin: 2% auto 0 auto;
    left: 0;
    padding-bottom: 138%;
  }
  .swbox {
    width: 85%;
    margin: 0 auto;
    padding: 5% 0;
  }
  .s4box,
  .s3box,
  .st2bx,
  .st1bx {
    width: 98.5%;
    position: relative;
    margin: 0 auto;
    padding-top: 5%;
  }
  .s5tl {
    width: 58%;
    margin: 0 auto;
  }
  .s5box {
    width: 98%;
    position: relative;
    margin: 0 auto;
    padding: 5% 0;
  }
  .copybox {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 380px;
    background-color: rgb(23, 22, 16);
    transition: transform 0.6s ease;
    /* transform: translateY(70%); */
    overflow: hidden;
  }
  .cytx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .copycont {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
  }
  .rbtbox {
    display: none;
  }
  .pcimg {
    display: none;
  }
  .mbimg {
    display: block;
  }
  .bx_a_clos {
    position: absolute;
    width: 50px;
    padding-bottom: 50px;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url(../images/close.png);
    background-position: 100% 0%;
    background-size: 100% auto;
    top: -10%;
    right: -1%;
    z-index: 2;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
  }
  #light_bx > .infobx_1 {
    position: relative;
    width: 96vw;
    display: block;
    margin: 0 auto;
    display: none;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.65));
    filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.65));
    font-size: 1.3rem;
    line-height: 2rem;
    color: #ffeccc;
    font-weight: 300;
  }
  .cyimg {
    width: 10%;
  }
  .cz {
    width: 35%;
  }

  .x15 {
    position: absolute;
    width: 25px;
    bottom: 10%;
    right: -10%;
  }
  .cyfx {
    width: 90%;
    margin: 0 auto;
    color: #8b846d;
    font-size: 0.8rem;
    position: relative;
    line-height: 1.2rem;
  }
  .hbt {
    width: 27%;
    margin: 0 1%;
  }
}
@media only screen and (max-width: 410px) {
  .ctbx {
    position: absolute;
    bottom: -125px;
  }
  .hbt {
    width: 20%;
    margin: 0 1%;
  }
  .s5ct {
    width: 85%;
    margin: 0 0 0 41px;
  }
  .snd {
    /* width: 100%; */

    font-size: 0.8em;
  }
}