@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');
body {
	font-family:"Noto Sans TC","Microsoft JhengHei", "Noto Sans CJK TC", PingFang, STHeiti, sans-serif, serif;
  /* background: url('../img/bg00.jpg'); */
  background-color: #F4EFE9;
}
h1{
	font-size: 2vw;
}
h2{
	text-align:center;
	font-size: 1vw;
	font-weight:bold;
}
dl, ol, ul {
    font-size: 1.2rem;
}
/* Loading轉圈圈 */
.loadingPage{
    display: flex;
    align-items: center;
    padding-top: 10vw;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(../img/bg00.jpg);
}
.articlelist .loadingPage{
    padding-top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(244, 239, 233, 0.95) , rgba(244, 239, 233, 0.95) );
}
.spinner
{
	position: fixed;
	z-index: 4;
	width: 100%;
	min-height:100%;
}
.articlelist .spinner {
    position: unset;
}
.spMsg{
	text-align: center;
    margin-top: 180px;
	font-size:20px;
	font-weight:bold;
	line-height:40px;
	color:#eee;
}

/* LOADING CYCLE START */
.lds-roller {
  /* change color here */
  color: #eee;
  background:url("../img/star.png") no-repeat;
  background-size: 80px;
  background-position: 50%;
  animation: lds-roller 5s infinite linear ;
}
.articlelist .lds-roller,.articlelist .spMsg {
    color: #000;
}
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 160px;
  height: 160px;
}
.lds-roller div {
  animation: lds-roller 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 80px 80px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  margin: -5px 0 0 -5px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
  opacity: 0.3;
}
.lds-roller div:nth-child(1):after {
  top: 125.25484px;
  left: 125.25484px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
  opacity: 0.4;
}
.lds-roller div:nth-child(2):after {
  top: 135.42562px;
  left: 112px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
  opacity: 0.5;
}
.lds-roller div:nth-child(3):after {
  top: 141.81926px;
  left: 96.56442px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
  opacity: 0.6;
}
.lds-roller div:nth-child(4):after {
  top: 144px;
  left: 80px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
  opacity: 0.7;
}
.lds-roller div:nth-child(5):after {
  top: 141.81926px;
  left: 63.43558px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
  opacity: 0.8;
}
.lds-roller div:nth-child(6):after {
  top: 135.42562px;
  left: 48px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
  opacity: 0.9;
}
.lds-roller div:nth-child(7):after {
  top: 125.25484px;
  left: 34.74516px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
  opacity: 1;
}
.lds-roller div:nth-child(8):after {
  top: 112px;
  left: 24.57438px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* LOADING CYCLE END */


.g_header .nav_area .nav_hamberger{
	display:none;
}
.fix_aside {
  position: fixed;
  z-index: 99;
  right: 1rem;
  bottom: 0.5rem;
  -webkit-transform: translateX(150%);
          transform: translateX(150%);
  -webkit-transition: -webkit-transform 600ms;
  transition: -webkit-transform 600ms;
  transition: transform 600ms;
  transition: transform 600ms, -webkit-transform 600ms;
}

.fix_aside.is_active {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.fix_aside .fx_item {
  position: relative;
  display: block;
  border-radius: 0.5em;
  margin: 0.5em 0;
  width: 4em;
  height: 4em;
  background-color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: -webkit-transform 240ms, -webkit-box-shadow 240ms;
  transition: -webkit-transform 240ms, -webkit-box-shadow 240ms;
  transition: transform 240ms, box-shadow 240ms;
  transition: transform 240ms, box-shadow 240ms, -webkit-transform 240ms, -webkit-box-shadow 240ms;
}

.fix_aside .fx_item.is_primary {
  background: linear-gradient(94.17deg, #01FFFF 8.85%, #FEE92E 103.15%);
  color: #0F236C;
  line-height: 1.3;
}

.fix_aside .fx_item:hover {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.19);
}

.fix_aside .fx_item .in_wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.fix_aside .fx_item .in_wrap.ic {
  width: 100%;
  height: 100%;
  padding: 0.6em;
}

.fix_aside .fx_item .in_wrap.ic .ic_top {
  width: 100%;
  padding-top: 100%;
  background: url("../img/arrow_top.png") center/contain no-repeat;
}

.g_header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 98;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.g_header.is_active .nav_area .nav_link {
  color: #fff;
}

.g_header.is_active .nav_area .nav_link:hover {
  color: #008296;
}

.g_header .header_cnt {
  background-color: #F4EFE9;
  position: relative;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: #000 1px solid;
}
.mainlogo img{
  height: 3vw;
}
.g_header .menu_btn {
  position: relative;
  width: 48px;
  height: 48px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #fff;
}

.g_header .nav_area {
  position: relative;
  z-index: 3;
}

.g_header .nav_area .nav_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.g_header .nav_area .nav_cnt ul {
  list-style: none;
  display: flex;
  margin: 0;
}
.g_header .nav_area .nav_cnt li a{
    font-size: 18px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    letter-spacing: 5px;
    padding: 0 10px;
}
.g_header .nav_area .nav_cnt.menubtn li img{
  height: 50px;
  margin: 0 15px;
}
.g_header .nav_area .nav_cnt li a:hover img{
  margin: -5px 15px;
  -webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
  animation: menubtnmove 1s infinite ease-in-out;
}
@keyframes menubtnmove {
  0% {
    margin: 0px 15px;
  }
  50% {
    margin: -5px 15px;
  }
  100% {
    margin: 0px 15px;
  }
}

.g_kv {
  position: relative;
  overflow: hidden;
  border-bottom: #000 1px solid;
}
.gamepage .g_kv ,.workshop .g_kv {
  border-bottom: 0;
  text-align: center;
  padding-top: 120px;
}

.kv_ms{display:none;}

.g_kv .desktop {
  position: relative;
  height: 48vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.g_kv .kv_area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.g_kv .kv_area-bg {
  position: absolute;
  top: 6vw;
  left: 50%;
  width: 97%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.g_kv .tit,.g_kv .kv_main,.g_kv .kv_item,.g_kv .kv_bottom {
    position: absolute;
    display: flex;
    width: 100vw;
    height: 100vw;
    align-items: center;
    justify-content: center;
}
.tit img,.tit span,.kv_item img,.kv_bottom img{
  position: absolute;
}
.kv_main img{
  width: 53%;
  transform: translate(18vw, -24vw);
}
.tittitle{
  width: 40%;
  transform: translate(-26vw, -36vw);
}
.titaetf{
  position: relative;
}
.aetfplace{
  transform: translate(-44vw, -39.5vw);
}
.titaetfzh{
  width: 21vw;
}
.titpetfzh{
  width: 28vw;
}
.titaetf .titetfe{
  transform: translateX(22vw) translateY(0);
  margin-top: 0.4vw;
  animation: jump 1.2s infinite ease-in-out;
  height: 7vw;
}
.titaetf .titetft{
  transform: translateX(26vw) rotate(0deg);
  margin-top: 0.4vw;
  animation: etftswing 1.2s infinite ease-in-out;
  height: 7vw;
}
.titaetf .titetff{
  transform: translateX(31vw);
  margin-top: 0.4vw;
  animation: hueShift 3s infinite;
  height: 7vw;
}


@keyframes jump {
  0%, 100% { transform: translateX(22vw) translateY(0); }
  50% { transform: translateX(22vw) translateY(-8px); }
}
@keyframes etftswing {
  0%, 100% { transform: translateX(26vw) rotate(0deg); }
  50% { transform: translateX(26vw) rotate(10deg); }
}
@keyframes hueShift {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(90deg); }
  100% { filter: hue-rotate(0deg); }
}

.titpetf{
  position: relative;
}
.petfplace{
  transform: translate(-44vw, -29.5vw);
}
.titpetf .titetfe {
  height: 4vw;
  margin-top: 0.2vw;
  animation: breathe-e 4s infinite ease-in-out;
}
.titpetf .titetft {
  height: 4vw;
  margin-top: 0.2vw;
  animation: breathe-t 4s infinite ease-in-out;
}
.titpetf .titetff {
  height: 4vw;
  margin-top: 0.2vw;
  animation: breathe-f 4s infinite ease-in-out;
}
@keyframes breathe-e {
  0%, 100% { transform: translateX(28.5vw) scale(0.9); }
  50%      { transform: translateX(28.5vw) scale(1.05); }
}
@keyframes breathe-t {
  0%, 100% { transform: translateX(31vw) scale(0.9); }
  50%      { transform: translateX(31vw) scale(1.05); }
}
@keyframes breathe-f {
  0%, 100% { transform: translateX(34vw) scale(0.9); }
  50%      { transform: translateX(34vw) scale(1.05); }
}


.tit .t1{
    font-size: 2vw;
    transform: translate(-25vw, -20vw);
    letter-spacing: 5px;
}
.tit .tititem01{
    width: 4%;
    transform: translate(-38vw, -20vw);
}
.tit .tititem02{
    width: 4%;
    transform: translate(-42.5vw, -20vw);
}
.tit .tititem03{
    width: 2%;
    transform: translate(-13vw, -19vw);
}
.kv_item .o01{
  width: 1%;
  transform: translate(15vw, -37vw)
}
.kv_item .o02{
  width: 1%;
  transform: translate(17vw, -36vw)
}
.kv_item .o03{
  width: 1%;
  transform: translate(19vw, -35vw)
}
.kv_item .o04{
  width: 1%;
  transform: translate(21vw, -34vw)
}
.kv_item .o05{
  width: 1%;
  transform: translate(17vw, -12vw)
}
.kv_item .b01{
  width: 1%;
  transform: translate(20vw, -11vw);
}
.kv_item .b02{
  width: 1%;
  transform: translate(18vw, -10vw);
}
.kv_item .b03{
  width: 1%;
  transform: translate(16vw, -9vw);
}
.kv_item .b04{
  width: 1%;
  transform: translate(22vw, -10vw);
}
.kv_item .b05{
  width: 1%;
  transform: translate(20vw, -9vw);
}
.kv_item .b06{
  width: 1%;
  transform: translate(18vw, -8vw)
}
.kvman{
  width: 4.5%;
  transform: translate(9.7vw, -35vw);
}
.kvmanhand{
  width: 8%;
  transform: translate(7.3vw, -33.3vw);
  animation: swing 5s infinite ease-in-out;
	transform-origin: 100% 40%;
}
@keyframes swing {
  0% {
    transform: translate(7.3vw, -33.3vw) rotate(-15deg); /* 初始角度 */
  }
  50% {
    transform: translate(7.3vw, -33.3vw) rotate(15deg); /* 回到初始角度 */
  }
  100% {
    transform: translate(7.3vw, -33.3vw) rotate(-15deg); /* 回到初始角度 */
  }
}
.kv_item .kvpig{
  width: 7%;
  transform: translate(26vw, -16vw);
}
.kv_item .etfbar{
  width: 1.03vw;
  transform: translate(28.32vw, -35.5vw);
  animation: blink 0.5s infinite;
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
    visibility: visible;
  }
  50% {
    opacity: 0;
    visibility: hidden;
  }
}
.kv_item .pigcoin{
  width: 2.5%;
  transform: translate(25.4vw, -19vw);
  opacity: 1;
  animation: pigcooin 1.5s infinite linear;
  animation-delay: 1s;
}
@keyframes pigcooin {
  0% {
    transform: translate(25.4vw, -19vw);
    opacity: 1;
  }
  40% {
    transform: translate(25vw, -18vw);
    opacity: 1;
  }
  80% {
    transform: translate(25vw, -16vw);
    opacity: 0;
  }
  100% {
    transform: translate(25vw, -16vw);
    opacity: 0;
  }
}
.kv_bottom .kvmenubtn{
  width: 6%;
  animation: btnfolt 1s infinite ease-in-out;
  margin-top: 0;
  cursor: pointer;
}
@keyframes btnfolt {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: -10px;
  }
  100% {
    margin-top: 0;
  }
}
.kv_bottom .kvmenubtn:hover{
  width: 6.5%;
}
.kv_bottom .btn01{
  transform: translate(37vw, -43vw);
  animation-duration: 0.8s;
}
.kv_bottom .btn02{
  transform: translate(7.5vw, -44.5vw);
  animation-duration: 1.3s;
}
.kv_bottom .btn03{
  transform: translate(10vw, -28vw);
  animation-duration: 1.4s;
}
.kv_bottom .btn04{
  transform: translate(23vw, -24.5vw);
}
/* 以上主視覺 */
.g_main {
  overflow: hidden;
}

.main_sc {
	/* margin:30px 0; */
	padding: 30px 0;
}

.sc_title {
  text-align: center;
  font-size: 27px;
  margin-bottom: 30px;
  color:#000;
}

.sc_title .tit {
  font-weight: 700;
  line-height: 1.5;
}

.sc_intro {
  position: relative;
}

.sc_intro .container {
  max-width: 50vw;
}

.intro_cnt {
  position: relative;
}

.intro_cnt p {
  position: relative;
  color: #000;
  padding: 15px 0;
  font-size: 1.2rem;
  line-height: 2vw;
  letter-spacing: 0.2vw;
  text-align: justify;
}

.intro_cnt p span {
  color: #DBF0F3;
}

.footerCopy {
  position: relative;
  padding: 15px 0;
  color: #fff;
  background: linear-gradient(85.87deg, #005095 4.14%, #00398E 25.4%, #00317A 43.81%, #001E54 65.46%, #000D35 97.4%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12.3px;
}


.modal-title {
  font-size: 28px;
  line-height: 1;
}

.modal-title span {
  font-size: 16px;
}

.modal-title .web {
  position: relative;
  display: inline-block;
  margin: 0 0 0 15px;
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.modal-title .web a {
  position: relative;
  display: inline-block;
  color: #fff;
  background-color: #005277;
  border: 1px solid #005277;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px 15px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.modal-title .web a:hover {
  color: #005277;
  background-color: #fff;
}

.modal-body ul {
  padding: 0 20px;
}

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width:50%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

/* PAGE01  主動式ETF */
.aetf_box .tit,.petf_box .tit{
  height: 5vw;
  display: flex;
  justify-content: center;
  width: 50vw;
  background: #fff;
  border: #000 2px solid;
  border-radius: 0.2vw 0.2vw 0 0;
  box-shadow: 3px 5px 10px #888;
}
.aetf_box .tit::before,.petf_box .tit::before{
    content: "—";
    font-size: 1vw;
    position: absolute;
    right: 1vw;
    width: 1.5vw;
    height: 1.5vw;
    background: #BCBCBC;
    border: 1px solid #000;
    border-radius: 50%;
    top: 0.5vw;
    display: flex;
    line-height: 1.2vw;
    align-items: flex-start;
    justify-content: center;
}
.aetf_box .titaetf,.petf_box .titpetf {
  width: 35vw;
  display: flex;
  transform: scale(0.4);
}
.petf_box .titpetf {
  transform: scale(0.6);
  margin-top: 10px;
}
.aetf_box .titaetf img,.petf_box .titpetf img{
  margin: 0 5px;
}
.aetf_box .sc_title,.petf_box .sc_title{
  display: flex;
  justify-content: center;
  margin: 0;
}
.aetf_box .container,.petf_box .container{
  width: 50vw;
  max-width:unset;
  background: #fff;
  border: #000 2px solid;
  border-top: 0;
  padding: 30px 50px;
  box-shadow: 3px 5px 10px #888;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

h5{
  width: fit-content;
  padding: 5px 15px 5px 10px;
  color: #fff;
  letter-spacing: 2px;
  height: 1.8vw;
  position: relative;
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
h5::before{
  content: "";
  height: calc(1.8vw / 1.4142);
  transform: rotate(45deg);
  display: block;
  position: absolute;
  right: -0.67vw;
  width: calc(1.8vw / 1.4142);
}
.h5blue,.h5blue::before{
  background-color: #48B3EF;
}
.h5pink,.h5pink::before{
  background-color: #FF9C9C;
}
.h5green,.h5green::before{
  background-color: #18D1AE;
}

.aetfcard{
  margin: 15px 0;
}
.picbox{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #48B3EF 0.5vw solid;
  border-radius: 1.5vw;
  overflow: hidden;
  height: 10vw;
  cursor: pointer;
  width: 14vw;
}
.petfcard .picbox{
  border: #18D1AE 0.5vw solid;
}
.picbox::after{
    content: "";
    display: block;
    width: 150%;
    height: 100%;
    position: absolute;
    background: #B5D6E2;
    transform: rotate(-30deg);
    left: -20%;
    z-index: -1;
    top: 60%;
}
.petfcard .picbox::after{
  background: #B6E0D9;
}
.picbox:hover::after{
  animation: picboxbgrun 0.3s ease 1;
  left: -20%;
  top: 60%;
  opacity: 1;
}
@keyframes picboxbgrun {
  0% {
    opacity: 0;
    left: -100%;  top: 150%;
  }
  100% {
    opacity: 1;
    left: -20%;  top: 60%;
  }
}
.picbox img{
  position: absolute;
}
.acd01{
  width: 3vw;
  transform: translate(-1vw, -1.5vw)
}
.picbox:hover .acd01{
    animation: acd01run 1s ease 1;
}
@keyframes acd01run {
  0%,33% {
    opacity: 0;
    transform: translate(-1vw, 12vw);
  }
  66%,100% {
    opacity: 1;
    transform: translate(-1vw, -1.5vw);
  }
}
.acd02{
  width: 10vw;
  transform: translate(1vw, 2vw);
}
.picbox:hover .acd02{
    animation: acd02run 1s ease 1;
}
@keyframes acd02run {
  0%,66% {
    opacity: 0;
    transform: translate(18vw, -5vw);
  }
  100% {
    opacity: 1;
    transform: translate(1vw, 2vw);
  }
}
.bcd01{
    transform: translate(0, 0);
    width: 9vw;
}
.picbox:hover .bcd01{
    animation: bcd01run 30s ease 1;
}
@keyframes bcd01run {
  0% {
    opacity: 0;
    transform:  translate(-15vw, 0vw);
  }
  1% {
    opacity: 0;
    transform: translate(-15vw, 0vw);
  }
  2% {
    opacity: 1;
    transform:  translate(0, 0);
  }
  100% {
    opacity: 1;
    transform:  translate(0, 0);
  }
}
.ccd01{
  transform: translate(0vw, -2vw);
  width: 6vw;
}
.picbox:hover .ccd01{
    animation: ccd01run 30s ease 1;
}
@keyframes ccd01run {
  0% {
    opacity: 0;
    transform:  translate(15vw, -10vw);
  }
  1% {
    opacity: 0;
    transform:  translate(15vw, -10vw);
  }
  2% {
    opacity: 1;
    transform:  translate(0vw, -2vw);
  }
  100% {
    opacity: 1;
    transform:  translate(0vw, -2vw);
  }
}
.ccd02{
    transform: translate(1vw, 1.5vw);
    width: 4vw;
}
.picbox:hover .ccd02{
    animation: ccd02run 30s ease 1;
}
@keyframes ccd02run {
  0% {
    opacity: 0;
    transform: translate(14vw, -6vw);
  }
  2% {
    opacity: 0;
    transform: translate(14vw, -6vw);
  }
  3% {
    opacity: 1;
    transform: translate(1vw, 1.5vw);
  }
  100% {
    opacity: 1;
    transform: translate(1vw, 1.5vw);
  }
}
.ccd03{
    transform: translate(-3vw, 2vw);
    width: 3vw;
}
.picbox:hover .ccd03{
    animation: ccd03run 30s ease 1;
}
@keyframes ccd03run {
  0%,3% {
    opacity: 0;
    transform:  translate(-3vw, 11vw);
  }
  4%,100% {
    opacity: 1;
    transform:  translate(-3vw, 2vw);
  }
}
.ccd04{
    transform: translate(4vw, 1.3vw);
    width: 6vw;
}
.picbox:hover .ccd04{
    animation: ccd04run 30s ease 1;
}
@keyframes ccd04run {
  0%,4% {
    opacity: 0;
    transform:  translate(10vw, 9vw);
  }
  5% {
    opacity: 1;
    transform:  translate(4vw, 1.3vw);
  }
  7% {
    opacity: 1;
    transform:  translate(-4vw, 4vw);
  }
  9%,100% {
    opacity: 1;
    transform:  translate(4vw, 1.3vw);
  }
}

.dcd01{
    transform: translate(2vw, 0vw);
    width: 8vw;
}
.picbox:hover .dcd01{
    animation: dcd01run 30s ease 1;
}
@keyframes dcd01run {
  0%,1% {
    opacity: 0;
    transform:  translate(2vw, -15vw);
  }
  2%,100% {
    opacity: 1;
    transform:  translate(2vw, 0vw);
  }
}
.dcd02{
  width: 3vw;
  transform: translate(-4vw, -2vw);
}
.picbox:hover .dcd02{
    animation: dcd02run 30s ease 1;
}
@keyframes dcd02run {
  0%,2%  {
    opacity: 0;
    transform: scale(0.3) translate(0vw, -3vw);  
  }
  3%,100% {
    opacity: 1;
    transform: translate(-4vw, -2vw);
  }
}
.dcd03{
    width: 3vw;
    transform: translate(-4vw, 2vw);
}
.picbox:hover .dcd03{
    animation: dcd03run 30s ease 1;
}
@keyframes dcd03run {
  0%,2%  {
    opacity: 0;
    transform: scale(0.3) translate(-1vw, 1vw);
  }
  3%,100% {
    opacity: 1;
    transform: scale(1) translate(-4vw, 2vw);
  }
}
.dcd04{
    width: 3vw;
    transform: translate(0vw, 4vw);
}
.picbox:hover .dcd04{
    animation: dcd04run 30s ease 1;
}
@keyframes dcd04run {
  0%,2% {
    opacity: 0;
    transform: scale(0.3) translate(7vw, 2vw);
  }
  3%,100%  {
    opacity: 1;
    transform: scale(1) translate(0vw, 4vw);
  }
}
.picbox .line{
  width: 3vw;
  height: 1px;
  border-bottom: #000 2px solid;
  position: absolute;

}
.dcd02line{
  transform:rotate(18deg) translate(-2vw,-0.8vw);
}
.dcd03line{
  width: 4vw;
  transform:rotate(-28deg) translate(-2.2vw, 0vw);
}
.dcd04line{
  transform:rotate(-55deg) translate(-0.8vw,2vw);
}
.picbox:hover .line{
  animation: dcdline 30s ease 1;
}
@keyframes dcdline {
  0%,2% {
    opacity: 0;
  }
  3%,100%  {
    opacity: 1;
  }
}

.aetf_box h6,.petf_box h6{
  color: #48B3EF;
  font-size: 1.3vw;
  border-bottom: 2px #000 solid;
  width: fit-content;
  padding-bottom: 10px;
}
.petf_box h6{
  color: #18D1AE;
}
.aetfcard .textbox{
  padding-left: 30px;
  width: 30vw;
}
.aetfcard .textbox p{
  line-height: 1.4vw;
  letter-spacing: 1px;
}

.aetfcard .textbox ul li:nth-child(3){
  line-height: 35px;
}
.aetfcard .textbox ul li:nth-child(3) span{
  background: #48B3EF;
  padding: 0 15px;
  color: #fff;
  border-radius: 50px;
  margin-right: 5px;
  font-size: 1rem;
}
.aeftextul{
  padding: 0;
  margin: 0;
  list-style: none;
  /* font-size: 1vw; */
  padding-left: 2vw;
  line-height: 1.9vw;
  margin-bottom: 20px;
}
.aeftextul li{
  position: relative;
}
.aeftextul li::before{
  content: "▲";
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50px;
  border: 1px solid #000;
  background: #BCBCBC;
  position: absolute;
  display: flex;
  justify-content: center;
  left: -1.9vw;
  top: 0.2vw;
  align-items: center;
  transform: rotate(90deg);
  font-size: 0.6vw;
}
.riskcd{
  margin: 20px 0;
}
.riskcd:hover{
  margin: 10px 0;
  animation: riskcdup 50s ease-in-out 1;
}
@keyframes riskcdup {
  0% {
    margin: 20px 0;
  }
  1%,100%  {
    margin: 10px 0;
  }
}

.riskcd div{
  height: 10vw;
  background: #48B3EF;
  border: 0.5vw solid #48B3EF;
  border-radius: 1.5vw;
  color: #fff;
  text-align: justify;
  font-size: 0.8vw;
}
.petfriskcard .riskcd div{
  background: #18D1AE;
  border: 0.5vw solid #18D1AE;
  height: 10.5vw;
}
.riskcd h4{
  text-align: center;
  background: #fff;
  border-radius:1.3vw 1.3vw 0 0;
  color: #48B3EF;
  padding: 10px 0;
  font-size: 1vw;
  position: relative;
  margin-bottom: 10px;
  font-weight: bold;
}
.petfriskcard .riskcd h4{
  color: #18D1AE;
}
.riskcd:last-child h4{
  font-size: 0.8vw;
}
.riskcd h4::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -5px;
}

.petf_box .picbox .acd01{
    width: 8vw;
}

.petf_box .picbox:hover .acd01{
  animation: petfacd01run 30s ease 1;
}
@keyframes petfacd01run {
  0%,2%  {
    opacity: 0;
    transform: translate(-20vw, 12vw);
  }
  3%,100% {
    opacity: 1;
    transform: translate(-1vw, -1.5vw)
  }
}

.petf_box .bcd01{
  transform: translate(-0.5vw, -4.3vw);
  width: 0.6vw;
}
.petf_box .bcd02{
  transform: translate(-1.3vw, -2.5vw) rotate(-15deg);
  width: 0.6vw;
}
.petf_box .bcd03{
  transform: translate(0vw, -1.9vw) rotate(8deg) scaleX(-1);
  width: 0.5vw;
}
.petf_box .bcd04{
    transform: translate(-1.8vw, -2vw);
    transform-origin: center bottom;
    width: 3vw;
}
.petf_box .picbox:hover .bcd01{
    animation: petfbcd01run 30s ease 1;
}
.petf_box .picbox:hover .bcd02{
    animation: petfbcd02run 30s ease 1;
}
.petf_box .picbox:hover .bcd03{
    animation: petfbcd03run 30s ease 1;
}
.petf_box .picbox:hover .bcd04{
    animation: petfbcd04run 30s ease 1;
}
@keyframes petfbcd01run {
  0% {
    opacity: 0;
    transform: translate(-0.5vw, -7.3vw);
  }
  1%, 100% {
    opacity: 1;
    transform: translate(-0.5vw, -4.3vw);
  }
}
@keyframes petfbcd02run {
  0%,1% {
    opacity: 0;
    transform: translate(-1.3vw, -5.5vw) rotate(-15deg);;
  }
  2%,100% {
    opacity: 1;
    transform: translate(-1.3vw, -2.5vw) rotate(-15deg);;
  }
}
@keyframes petfbcd03run {
  0%,2% {
    opacity: 0;
    transform: translate(0vw, -5.9vw) rotate(8deg) scaleX(-1);
  }
  3%,100% {
    opacity: 1;
    transform: translate(0vw, -1.9vw) rotate(8deg) scaleX(-1);
  }
}
@keyframes petfbcd04run {
  0%,1% {
    opacity: 0;
    transform: scale(0.1) translate(-16vw, -15vw);
    transform-origin: center bottom;
  }
  5%,100% {
    opacity: 1;
    transform: translate(-1.8vw, -2vw);
    transform-origin: center bottom;
  }
}
.sf02{
  transform: translateX(-4vw);
}
.sf03{
  transform: translateX(4vw);
}

.petf_box .ccd01{
  transform: translate(0vw, 3vw);
  width: 5vw;
}
.petf_box .ccd02{
    transform: translate(0vw, -0.5vw);
    transform-origin: center bottom;
    width: 8vw;
}
.petf_box .picbox:hover .ccd01{
    animation: petfccd01run 30s ease 1;
}
@keyframes petfccd01run {
  0% {
    opacity: 0;
    transform: translate(0vw, -8vw);
  }
  1%, 100% {
    opacity: 1;
    transform: translate(0vw, 3vw);
  }
}
.petf_box .picbox:hover .ccd02{
    animation: petfccd02run 30s ease 1;
}
@keyframes petfccd02run {
  0%,1% {
    opacity: 0;
    transform: scale(0.1) translate(0vw, -2.8vw);
    transform-origin: center bottom;
  }
  3%, 100% {
    opacity: 1;
    transform: scale(1) translate(0vw, -0.5vw);
    transform-origin: center bottom;
  }
}

.petf_box .ecd02 {
    width: 7vw;
    transform: translate(2vw, 1vw);
}
.petf_box .picbox:hover .ecd02{
    animation: petfecd02run 30s ease 1;
}
@keyframes petfecd02run {
  0%,1%  {
    opacity: 0;
    transform: translate(11vw, -2vw)
  }
  2%,100% {
    opacity: 1;
    transform: translate(2vw, 1vw);
  }
}
.petf_box .picbox .acd01.ecd01{
    width: 5vw;
    transform: translate(-3vw, -1vw);
}
.petf_box .picbox:hover .ecd01{
    animation: petfecd01run 30s ease 1;
}

@keyframes petfecd01run {
  0%,2%  {
    opacity: 0;
    transform: translate(7vw, -12vw);
  }
  3%,100% {
    opacity: 1;
    transform: translate(-3vw, -1vw);
  }
}
.link_box{
  background: rgba(0, 0, 0, 0.3);
}
.link_box .container {
  width: 50vw;
  max-width: unset;
}
.link_box .tit {
    background: #fff;
    width: fit-content;
    padding: 5px 20px;
    letter-spacing: 3px;
    margin-top: 50px;
    margin-bottom: 10px;
}
.link_box .sc_title {
    text-align: center;
    font-size: 27px;
    margin-bottom: 30px;
    color: #000;
    display: flex;
    justify-content: center;
}
.linkbox{
  justify-content: center;
}
.linkboxin{
  background: #fff;
  height: 100%;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
  padding: 20px 30px;
}
.linkboxin.row{
  margin: 0;
}
.linkboxtd {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 0.9vw;
}

.linkboxtd:nth-child(1),.linkboxtd:nth-child(4) {
  border-right: #FFF 1px solid;
}
.linkboxtd:nth-child(2),.linkboxtd:nth-child(5) {
  border-left: #FFF 1px solid;
}
.linkboxtd:nth-child(3) {
  border-top: #FFF 2px solid;
  border-bottom: #FFF 2px solid;
}
.linkboxtd:nth-child(6),.linkboxtd:nth-child(7) {
  border-top: #FFF 2px solid;
}


.link_box h4{
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
  padding-left: 1.5vw;
  margin-bottom: 1vw;
}
.link_box h4::before{
  content: "";
  background: url('../img/p1c04.png') no-repeat;
  background-size: contain;
  width: 1vw;
  height: 2vw;
  left: 0;
}
.link_box h4::after{
  content: "→";
  font-size: 3vw;
  line-height: 1.3vw;
  padding-left: 1vw;
  color: #CC4E2B;
  font-family: monospace;
  animation: link_boxarr 1s infinite ease-in-out;
}
@keyframes link_boxarr {
  0%,100%  {
    padding-left: 1vw;
  }
  50% {
    padding-left: 2vw;
  }
}
.link_box h4::after,.link_box h4::before{
  position: absolute;
}
.linkadiv{
  margin: 0.8vw 0;
}
.linkboxtd a{
  background: #FBE57A;
  border: #000 2px solid;
  text-decoration: none;
  color: #000;
  padding: 0 10px;
  margin: 10px 0;
}
.linkboxtd a:hover{
  font-size: 0.95vw;
}
.linkboxtd ul{
  list-style: none;
}

.linkboxtd li{
  transform: translateY(0);
}

.linkboxtd ul:hover li{
  transform: translateY(10px);
  opacity: 0;
  animation: link_boxli 100s ease 1;
}
@keyframes link_boxli {
  0%  {
    transform: translateY(10px);
    opacity: 0;
  }
  1%,100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.linkboxtd ul:hover li:nth-child(1) { animation-delay: 0s; }
.linkboxtd ul:hover li:nth-child(2) { animation-delay: 0.5s; }
.linkboxtd ul:hover li:nth-child(3) { animation-delay: 1s; }
.linkboxtd ul:hover li:nth-child(4) { animation-delay: 1.5s; }
.linkboxtd ul:hover li:nth-child(5) { animation-delay: 2s; }
.linkboxtd ul:hover li:nth-child(6) { animation-delay: 2.5s; }

/* GAMEPAGE */
.gametit{
  height: 15vw;
}
.gamepage .container {
  width: 60vw;
  max-width: unset;
}
.gametit img{
  width: 13vw;
}

.gamepage .titilekvman{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: translate(0, 8vw);
}

.titilekvman .kvman{
  width: 4.5%;
  transform: translate(1vw, -5vw);
  position: absolute;
}
.titilekvman .kvmanhand{
  width: 8%;
  transform: translate(-1.3vw, -3vw) rotate(15deg);
  animation: gpswing 5s infinite ease-in-out;
  transform-origin: 95% 40%;
  position: absolute;
}
@keyframes gpswing {
  0% {
    transform: translate(-1.3vw, -3vw) rotate(30deg); /* 初始角度 */
  }
  50% {
    transform: translate(-1.3vw, -3vw) rotate(0deg); /* 回到初始角度 */
  }
  100% {
    transform: translate(-1.3vw, -3vw) rotate(30deg); /* 回到初始角度 */
  }
}


.gamebox{
  display: flex;
  height: 34vw;
  cursor: pointer;
}
.gamepic{
  width: 60%;
  position: relative;
}
.gamedesc{
  width: 30%;
  position: relative;
  border-top: #000 1px solid;
  display: flex;
  justify-content: flex-end;
}
.gamedesc div{
  position: absolute;
  right: 2vw;
}
.gamepic img{
  position: absolute;
  width: 120%;
  top: 2vw;
  border: 10px solid #4DA9E0;
  border-radius: 20px;
}
.gametitle{
  width: 75%;
  background: #fff;
  border: #000 2px solid;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 28px;
  top: 12vw;
  padding: 5px 20px;
  font-weight: bold;
}
.gametext{
  width: 120%;
  background: #fff;
  border: #000 2px solid;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 19px;
  top: 18vw;
  padding: 15px 33px;
  font-weight: bold;
  line-height: 36px;
}
.gametext span{
  display: block;
  text-align: right;
}
.gamebox:first-child .gametitleicon img{
  transform: scaleX(-1);
}
.gametitleicon img{
    width: 4vw;
}
.gametitleicon{
    top: 9vw;
    transform: translateX(-2.5vw);
}
.gamedesc::before {
    content: "";
    width: 7vw;
    height: 7vw;
    display: block;
    position: absolute;
    background: #48B3EF;
    border-radius: 50%;
    border: #000 1px solid;
    top: 7.5vw;
    left: 7.7vw;
}
.gamebox:nth-child(2) .gamepic img{
    border: 10px solid #18D1AE;
}
.gamebox:nth-child(2) .gamedesc::before {
    background: #18D1AE;
    transform: translateX(-8vw);
}
.gamebox:nth-child(2){
    flex-direction: row-reverse;
}
.gamebox:nth-child(2) .gamepic{
    display: flex;
    justify-content: flex-end;
}
.gamebox:nth-child(2) .gametitle{
    transform: translateX(-8vw);
}
.gamebox:nth-child(2) .gametitleicon{
    transform: translateX(-10.5vw);
}

/* workshop page */
.titilekvbulid img{
  width: 50vw;
}
.workshop .gametit {
  height: 20vw;
}

.animlist .container {
  width: 50vw;
  max-width: unset;
}
.animitem,.animitem a{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.animtitle{
  text-align: center;
  padding: 10px;
  color: #000;
  font-size: 1vw;
  font-weight: bold;
  position: relative;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.animtitle img{
  width: 100%;
  position: absolute;
  z-index: 0;
}
.animtitle span{
    display: block;
    color: #f9eb3e;
    font-size: 1.5vw;
    line-height: 3vw;
    margin-top: -10px;
    text-shadow: -2px -2px 0 black, 0 -2px 0 black, 2px -2px 0 black, -2px 0 0 black, 2px 0 0 black, -2px 2px 0 black, 0 2px 0 black, 2px 2px 0 black;
}
.animtitle h2{
  margin: 0;
  padding: 10px 20px;
  position: absolute;
  z-index: 1;
  width: 100%;
  font-size: 1vw;
}
.animpic{
  background: #fff;
  border: #000 2px solid;
  box-shadow: inset -15px -10px 10px rgba(0, 0, 0, 0.1);
  margin-top: 4vw;
  z-index: -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1000;
}

/* 左上到右下的對角線 */
.animpic::before,
.animpic::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  background-image: linear-gradient(to top left,
          rgba(255,255,255,0) 49.8%,
          black,
          rgba(255,255,255,0) 50.2%);
  z-index: -1;
}

.animpic::after{
  height: 50%;
  width: 50%;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to top right,
          rgba(255,255,255,0) 49.6%,
          black,
          rgba(255,255,255,0) 50.4%);
}


.animpic img,.animpic iframe{
  transform: scale(0.93);
  border: #000 2px solid;
  width: 60vw;
  height: calc(60vw * 315 / 560);
}

/* sllider */
.bx-wrapper{
  background: unset;
  border: 0;
  box-shadow: none;
}
.bx-viewport{
  height: unset !important;
}
.bx-wrapper .bx-prev,.bx-wrapper .bx-next {
    background: url(../img/pager.png) no-repeat;
    background-size: contain;
}
.bx-wrapper .bx-prev {
    transform: rotate(180deg);
    left: -10px;
}
.bx-wrapper .bx-next
{
    right: -10px;
}
.bx-wrapper .bx-controls-direction a {
  top: 55%;
  width: 2.5vw;
  height: 2.5vw;
}
.bx-wrapper .bx-next:hover, 
.bx-wrapper .bx-next:focus{
  background-position: unset;
  transform: scale(1.1);
}
.bx-wrapper .bx-prev:hover, 
.bx-wrapper .bx-prev:focus{
  background-position: unset;
  transform: rotate(180deg) scale(1.1);
}

.faq .container {
  max-width: 50vw;
}
.faq h2{
  display: none;
}
.fqtab{
  display: flex;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.fqtab .tabl1{
  padding: 5px;
  background: #FFD26E;
  border-radius: 30px 18px 0 0;
  border: #000 2px solid;
  border-right: 0;
  margin-right: 10px;
  position: relative;
}

.taba:hover .tabl2,.tabb:hover .tabl2 {
  padding: 5px 40px;
}
.taba:hover .tabl2,.tabb:hover .tabl2,
.fqtab .taba:hover .tabl2::after, 
.fqtab .taba:hover .tabl1::after,
.fqtab .tabb:hover .tabl2::after, 
.fqtab .tabb:hover .tabl1::after {
  background: #eee;
}
.fqtab .tabl2{
  font-size: 24px;
  font-weight: bold;
  background: #fff;
  border-radius: 30px 20px 0 0;
  padding: 5px 30px;
  border: #000 2px solid;
  border-right: 0;
  position: relative;
}
.fqtab .tabl2::after,.fqtab .tabl1::after{
    content: "";
    display: block;
    width: 10%;
    background: #fff;
    position: absolute;
    right: -10px;
    top: -2px;
    z-index: 1;
    border: 2px #000 solid;
    border-left: 0;
    transform: skewX(20deg);
    border-radius: 0 20px 0 0;
}
.fqtab .tabl1::after{
  background: #FFD26E;
  z-index: 0;
  right: -13px;
}
.fqtab .tabl1:last-child{
  z-index: -1;
  margin-left: -50px;
}
.fqtab .tabl1:last-child .tabl2{
  padding-left: 60px;
}
.fqtab .tabl2 span{
  color: #2FA3F2;
  padding-left: 10px ;
}
.faqp2 .fqtab .tabl2 span{
  color: #21D6B3;
}


.fqtab .tabl1.active{
  border-bottom: rgba(0, 0, 0, 0) 2px solid;
  z-index: 10;
}



.faqp1 .fqtab .tabl1::after{
  height: 64px;
}
.faqp2 .fqtab .tabl1::after{
  height: 64px;
}
.faqp1 .fqtab .tabl2::after,
.faqp1 .fqtab .tabl1.active .tabl2::after {
  height: 50px;
}

.faqp2 .fqtab .tabl2::after,
.faqp2 .fqtab .tabl1.active .tabl2::after{
  height: 50px;
}
.faqp1 .fqtab .tabl1.active::after,
.faqp2 .fqtab .tabl1.active::after{
  height: 65px;
  border-bottom:0;
}

.fqboard{
  padding: 30px 20px;
  background: #FFD26E;
  border-radius: 0 20px 20px 20px;
  border: 2px #000 solid;
  margin-top: -2px;
}
.fqboard.hidden{
  display: none;
}
.fqboard.visible{
  display: block;
}
.faqpage{
  position: relative;
  margin-bottom: 50px;
}
.fqtab{
  position: relative;
  z-index: 1;
}
.qustion{
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 23px;
  padding-left: 0;
  margin-bottom: 20px;
  font-weight: bold;
}
.qustion img{
  height: 2vw;
  margin-right: 10px;
}
.qustion:hover{
  color: #000;
  border-bottom: 2px #000 solid;
}
.qustion:hover img{
  filter: invert(1);
}
.answerborad{
  width: 80%;
  margin: 0 auto;
}
.answerborad h4{
  border: #000 2px solid;
  background: #fff;
  margin: 0;
  padding: 20px;
}
.answerborad div{
  color: #fff;
  background: #17ACE0;
  border: #000 2px solid;
  border-top: 0;
  padding: 20px 50px;
  letter-spacing: 1px;
  margin-bottom: 1vw;
}
.answerborad p,.answerborad ul{
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.7vw;
  letter-spacing: 0.1vw;
  text-align: justify;
  margin: 0;
}
.answerborad li{
  padding-bottom: 20px;
}
.answerborad table {
  table-layout: fixed;   /* 表格固定欄寬 */
  width: 100%;           /* 總寬度100%，每欄自動平均 */
  border: #000 2px solid;
}
.answerborad td {
  border: #000 2px solid;
  background: #fff;
  color: #000;
  padding: 5px ;
}
.answerborad thead td {
  background: #FFD869;
  font-weight: bolder;
}
.answerborad td.maincol {
  text-align: center;
  font-weight: bolder;
  text-decoration: underline;
}




.articlelist .container {
  max-width: 50vw;
}
.listbox{
  margin-bottom: 2vw;
  background: #fff;
  border: #000 2px solid;
}
.listbox h4{
  padding: 10px;
  font-size: 18px;
  margin: 20px;
  font-weight: bold;
  color: #636363;
}
.listbox h4 span{
  padding: 10px 30px 10px 20px;
  background: #A8E239;
  border-left: 30px #93c738 solid;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.column.listbox h4 span{
  background: #FC8456;
  border-left: 30px #dc7454 solid;
}
.listbox ul{
  list-style-type: square;
  padding: 20px 80px;
  background: linear-gradient(to bottom, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0));
}
.listbox ul li {
    font-size: 1.2rem;
    line-height: 2rem;
}
.listbox ul a{
  text-decoration: none;
  color: #000;
}
.listbox ul a:hover{
  font-size: 1.25rem;
  text-decoration: underline;
}

/* aritcle page */
.aritcle{
  margin-top: 5vw;
}
.aritcle .container {
  max-width: 50vw;
}
.aritcle .notepage{
  background: #F2F2F0;
  width: 100%;
  height: fit-content;
  margin-top: -5px;
  z-index: -1;
}
.aritcle .intro_cnt{

}
.aritcle .intro_cnt div{
  position: relative;
  top:0
}
.pagetop{
  z-index: 10;
}
.pagetop img{
  width: 100%;
}
.aritcle .listbox{
  border: #000 3px solid;
  padding: 50px;
  padding-top: 0;
}
.aritcle .listbox h4{
  margin-left: -4.5vw;
}
.datetext{
  padding: 0;
  color: #000;
  border-bottom: #000 2px solid;
  width: 100%;
  margin-top: 1.5vw;
}
article{
  padding-top: 20px;
}
article h3 {
  font-size: 23px;
  background: rgba(100,100,100,0.2);
  padding: 5px 10px;
}
article p{
  letter-spacing: 1px !important;
  margin: 0;
}
article img{
  width: 80%;
  display: block;
  margin: 0 auto;
  border: 5px #ddd solid;
  border-radius: 20px;
}

.morearticle{
  position: fixed;
  bottom: 5vw;
  right: 1vw;
  z-index: 999;
    width: 230px;
}
.morearticle .container{
  padding: 0;
}
.morearticle .sc_title{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.morearticle .tit:hover,.morearticle .tit.open{
  background: url(../img/article_moreo.png) no-repeat;
  background-size: contain;
  background-position: right top;
}
.morearticle .tit{
  width: 100%;
  height: 6vw;
  background: url(../img/article_morec.png) no-repeat;
  background-size: contain;
  background-position: right top;
  margin: 0;
  cursor: pointer;
}
.morearticle .sidelistbox{
  background: #D1D1D1;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border: 2px #000 solid;
}
.morearticle .sidelistbox.close{
  transform: translateX(15vw) ;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.morearticle .sidelistbox.open{
  transform: translateX(0) ;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.morearticle .sidelistbox ul{
  padding: 1vw 0;
  list-style-type: square;
  width: 90%;
  margin: auto;
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 15vw;
  overflow-y: scroll;
  overflow-x: hidden;
}
.morearticle .sidelistbox li {
  width: 200px;            /* 設定一個寬度，約能容納10個字 */
  white-space: nowrap;     /* 不換行 */
  overflow: hidden;        /* 超出部分隱藏 */
  text-overflow: ellipsis; /* 超過文字顯示 "..." */
  padding: 5px 20px;
}
.morearticle .sidelistbox li a{
  text-decoration: none;
  font-weight: 600;
  color: #000;
}
.morearticle .sidelistbox li a:hover{
  text-decoration: underline;
  font-weight: bolder;
}
.linkbook .g_kv .xtit{
  height: 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.linkbook .g_kv{
  padding-top: 120px;
  border-bottom: 0;
}
.linkbook .titilekvpig{
  position: relative;
  transform: translate(-4vw, 1vw);
}
.linkbook .titilekvpig img{
  position: absolute;
}
.titilekvpig .pigcoin{
  width: 3vw;
  transform: translate(1.8vw, -1vw);
  opacity: 1;
  animation: linkpigcooin 1.5s infinite linear;
  animation-delay: 1s;
}
@keyframes linkpigcooin {
  0% {
    transform: translate(1.8vw, -1vw);
    opacity: 1;
  }
  40% {
    transform: translate(0.8vw, 1vw);
    opacity: 1;
  }
  80%,100% {
    transform: translate(0.8vw, 2vw);
    opacity: 0;
  }
}

.linkitem{
  position: relative;
}


.linkitem,.linkitem h3,.linkitem span{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    font-size: 1vw;
    color: #000;
    text-decoration: none;
    padding: 10px 0;
    margin: 0;
}
.linkitem h3{
  padding-top: 50px;
}
.linkitem a{
    color: #000;
    text-decoration: none;  
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.linkitem a:hover h3{
  transform: scale(1.1);
}
.linkitem a::after{
  content: "";
  display: block;
  width: 10vw;
  height: 4vw;
  background-color: #FFF2D2;
  border: #000 2px solid;
  border-radius: 50%;
  position: absolute;
  transform: rotate(5deg);
  top: 35%;
  z-index: -1;
}

.linkitem a:hover::after{
  background-color: #f4e347;
}
.linkitem a:hover::before{
  content: "";
  position: absolute;
  background: url(../img/linkhover.png);
  background-size: contain;
  width: 4vw;
  height: 4vw;
  left: 2vw;
  opacity: 1;
  transform: scale(1);
  animation: breathe-go 1s infinite ease-in-out;
}
@keyframes breathe-go {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.linkitem img{
  height: 8vw;
}
.linkitem a span{
  padding-left: 1vw;
}
.linkitem a:hover span{
  padding-left: 1vw;
  animation: link_boxarr 1s infinite ease-in-out;
}
.footerbox{
    display: flex;
    justify-content: center;
    padding: 15px;
    border: 1px #999 solid;
    margin: 15px;
}
.footerbox img{
  height: 50px;
  margin: 0 15px;
}
.footerbox .flogo02{
  padding: 8px 0;
}
.notopen{
  position: relative;
  overflow: hidden;
}
.notopen::after{
    content: "7月1日開放\a敬請期待";
    white-space: pre;
    text-align: center;
    position: absolute;
    z-index: 10;
    width: 150%;
    height: 150%;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 7vw;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
    transform: rotate(-10deg);
    letter-spacing: 3vw;
    left: -25%;
    top: -25%;
}


@media (max-width: 1750px) {

  .sc_intro .container,.faq .container,.articlelist .container ,.aritcle .container,
  .aetf_box .container,.petf_box .container,.link_box .container,.gamepage .container,
  .animlist .container ,.faq .container,.articlelist .container,
  .aritcle .container,.aetf_box .tit, .petf_box .tit {
    width: 60vw;
    max-width: 60vw;
  }
  .aetfcard .textbox {
      width: 38vw;
  }
  .g_kv .desktop {
    height: 50vw;
  }
  .g_kv .tit, .g_kv .kv_main, .g_kv .kv_item, .g_kv .kv_bottom {
    margin-top: 1vw;
  }
  .tit .t1 {
    font-size: 2vw;
  }
  /* gamepage */
  .gametitle {
    width: 80%;
    font-size: 1.5vw;
  }
  .gametext {
    width: 165%;
    font-size: 18px;
    padding: 10px 18px;
    line-height: 30px;
  }
  .gamebox:nth-child(2) .gametitle {
    transform: translateX(0vw);
  }
  .gamebox:nth-child(2) .gamedesc::before {
    background: #18D1AE;
    transform: translateX(-5vw);  
  }
  .gamebox:nth-child(2) .gametitleicon {
      transform: translateX(-7.5vw);
  }

  .linkbook .titilekvpig {
    transform: scale(0.8) translate(-5vw, 0vw);
  }
  .titilekvpig .pigcoin{
    width: 4vw;
    transform: translate(2.5vw, -1vw);
  }
  @keyframes linkpigcooin {
    0% {
      transform: translate(2.5vw, -1vw);
      opacity: 1;
    }
    40% {
      transform: translate(1.8vw, 1vw);
      opacity: 1;
    }
    80%,100% {
      transform: translate(1.8vw, 2vw);
      opacity: 0;
    }
  }
  .linkbox {
    margin-top: 50px;
  }
  .linkitem img {
    height: 10vw;
  }
  .linkitem h3 {
    padding-top: 30px;
    font-size: 1.5vw;
  }
  .linkitem a::after {
      width: 12vw;
      height: 5vw;
      top: 36%;
  }
  .linkitem a:hover::before{
    width: 5vw;
    height: 5vw;
    left: 5vw;
  }
  .animtitle h2{
    font-size: 1.2vw;
  }
  .animtitle span{
    font-size: 1.7vw;
  }
}
@media (max-width: 1360px) {
  .sc_intro .container,.faq .container,.articlelist .container ,.aritcle .container,
  .aetf_box .container,.petf_box .container,.link_box .container,.gamepage .container,
  .animlist .container ,.faq .container,.articlelist .container,
  .aritcle .container,.aetf_box .tit, .petf_box .tit {
    width: 70vw;
    max-width: 70vw;
  }
  .aetf_box .container, .petf_box .container{
    padding: 1.8vw 2vw;
  }
  .aetfcard .textbox {
      width: 50vw;
      padding-left: 4vw;
  }
  .aetfcard{
    height: 12vw;
  }
  .lastcard {
    height: fit-content;
  }
  .picbox {
    transform: scale(1.2);
    transform-origin: left top;
  }
  h5 {
    height: 2.9vw;
    font-size: 1.5vw;
  }
  h5::before {
    height: 2.01vw;
    right: -1vw;
    width: 2.01vw;
  }
  .aetfcard .textbox p {
    line-height: 2vw;
  }
  .aeftextul{
    /* font-size: 2vw; */
    line-height: 2.9vw;
    padding-left: 3vw;
  }
  .aeftextul li::before {
    width: 2.5vw;
    height: 2.5vw;
    font-size: 1.5vw;
    left: -3vw;
  }
  .g_kv .desktop {
    height: 47vw;
  }
  .g_kv .tit, .g_kv .kv_main, .g_kv .kv_item, .g_kv .kv_bottom {
    margin-top: 5px;
  }
  .riskcd h4 {
    font-size: 1.5vw;
  }
  .riskcd div {
    height: 11vw;
    font-size: 1vw;
  }
  .petfriskcard .riskcd div {
    height: 12vw;
  }
  .linkboxtd {
    font-size: 1.2vw;
  }
  .linkboxtd a{
    line-height: 2.5vw;
  }
  .aetfcard .textbox p {
    padding: 5px 0;
  }
  .riskcd div {
    height: 15vw;
    font-size: 1.3vw;
  }
  .riskcd h4 {
    font-size: 1.4vw;
  }
  .riskcd:last-child h4 {
    font-size: 1.3vw;
  }
  .petf_box .riskcd div {
    height: 16vw;
  }

/* gamepage */
  .gametitle {
    width: 70%;
  }
  .gametext {
    margin-top: 15px;
  }
  .gametitleicon {
    top: 9vw;
    transform: translateX(-5.1vw);
  }
  .gamebox:nth-child(2) .gametitleicon {
    transform: translateX(-10vw);
  }
  .aritcle .listbox h4{
    margin-left: -6.5vw;
  }
}
@media (max-width: 1280px) {
  .intro_cnt p {
    line-height: 3vw;
  }
  .aetf_box h6, .petf_box h6 {
    font-size: 2vw;
  }
  .aetfcard .textbox {
    width: 51.6vw;
  }
  .riskcd div {
    height: 18vw;
    font-size: 1.5vw;
  }
  .riskcd h4 {
    font-size: 1.6vw;
  }
  .riskcd:last-child h4 {
    font-size: 1.5vw;
  }
  .lastcard {
    height: fit-content;
  }
  .g_kv .desktop {
    margin-top: 20px;
  }
  .answerborad p, .answerborad ul {
    line-height: 2.7vw;
  }
  .morearticle{
    bottom: 10vw;
  }
  .morearticle .tit{
    height: 8vw;
  }
  .linkbook .g_kv .xtit {
    height: 20vw;
  }
  .titilekvpig .pigcoin {
    width: 5.5vw;
  }
  .linkbook .titilekvpig {
    transform: scale(0.8) translate(-7vw, 0vw);
  }
  .animtitle h2 {
    font-size: 1.5vw;
  }
  .animpic{
    margin-top: 5vw;
  }
}
@media (max-width: 1080px) {
  .sc_intro .container,.faq .container,.articlelist .container ,.aritcle .container,
  .aetf_box .container,.petf_box .container,.link_box .container,
  .animlist .container ,.faq .container,.articlelist .container,
  .aritcle .container,.aetf_box .tit, .petf_box .tit {
    width: 90vw;
    max-width: 90vw;
  }

  .aetf_box .titaetf{
    transform: scale(0.8);
    transform-origin: bottom;
  }
  .petf_box .titpetf{
    transform: scale(1.1);
    transform-origin: bottom;
  }
  .petf_box .titpetf{
    margin-top: 2.3vw;
  }
  .aetf_box .tit, .petf_box .tit {
    height: 9vw;
  }
  .picbox {
    transform: scale(2);
  }
  .aetfcard {
    height: 20vw;
  }
  .aetfcard .textbox {
    width: 59vw;
    right: 0;
    position: absolute;
  }
  .lastcard {
    height: 28vw;
  }
  .aetfcard .textbox ul li:nth-child(3) {
    line-height: 25px;
  }
  .g_header .nav_area .nav_cnt ul {
    padding: 0;
  }
  .g_header .nav_area .nav_cnt li a{
    font-size: 15px;
  }
  .tit .t1 {
    font-size: 1.8vw;
  }
  .intro_cnt p {
      line-height: 4vw;
  }
  .aetfcard .textbox p {
      line-height: 3.3vw;
  }
  .aetf_box h6, .petf_box h6 {
      font-size: 3vw;
  }
  .linkboxtd {
    font-size: 1.8vw;
  }
  /* gamepage */
  .gamepage .container{
    width: 70vw;
    max-width: 70vw;
  }
  .gametitle {
      width: 67%;
      font-size: 1.3vw;
  }
  .gametext {
      font-size: 17px;
      line-height: 25px;
  }
  .workshop h1 {
    font-size: 4vw;
  }
  .listbox ul li {
    font-size: 1.7vw;
    line-height: 3.5vw;
  }
  .listbox ul a:hover {
    font-size: 1.8vw;
  }
  .qustion img {
    height: 3vw;
  }
  .morearticle .tit{
    height: 10vw;
  }
  .animtitle span{
    font-size: 2vw;
    line-height: 4vw;
  }
  .animtitle h2{
    font-size: 1.8vw;
  }
  .animpic {
      margin-top: 7vw;
  }
  .animpic img, .animpic iframe {
      width: 75vw;
      height: calc(75vw * 315 / 560);
  }
}
@media (max-width: 992px) {
  .lastcard {
    height: 40vw;
  }
  .gametit {
    height: 25vw;
  }
  /* gamepage */
  .gametit img{
    transform: scale(2);
  }
  .gamepage .titilekvman{
    transform: translate(0, 19vw) scale(2);
  }
  .gamepage .container{
    width: 90vw;
    max-width: 90vw;
  }
  .gamebox {
    height: 45vw;
  }
  .gametitle {
      width: 85%;
      font-size: 2.3vw;
  }
  .gametext {
      font-size: 17px;
      line-height: 25px;
      margin-top: 35px;
  }
  .gamedesc::before{
    left: 13.5vw;
  }
  .gamebox:nth-child(2) .gamedesc div{
    right: -10vw;
  }
  .gamebox:nth-child(2) .gametitleicon {
    transform: translate(-23vw,1vw);
  }
  .gamebox:nth-child(2) .gamedesc::before {
    transform: translate(-6vw, 1vw);
  }
  .workshop .gametit {
    height: 30vw;
  }
  .workshop .titilekvbulid img {
    width: 29vw;
    margin-top: 7vw;
  }
  .workshop .bx-wrapper .bx-controls-direction a{
    width: 5vw;
    height: 5vw;
  }
  .answerborad {
    width: 90%;
  }
  .answerborad div{
    padding: 20px;
  }
  .answerborad p, .answerborad ul {
    line-height: 3.7vw;
  }
  .qustion img {
      height: 4vw;
  }
  .listbox ul li {
      font-size: 2vw;
      line-height: 4vw;
  }
  .listbox ul a:hover {
    font-size: 2.1vw;
  }
  .listbox ul {
    padding: 20px 70px;
  }
  .aritcle .listbox h4 {
    margin-left: -10.5vw;
  }
  .animtitle{
    width: 40vw;
  }
}
@media (max-width: 965px) {
  .g_header .nav_area .nav_cnt.menubtn li img {
    height: 45px;
    margin: 0 10px;
  }
  .fqtab .tabl2 {
    font-size: 22px;
  }
  .faqp1 .fqtab .tabl1::after{
    height: 61px;
  }
  .faqp2 .fqtab .tabl1::after{
    height: 61px;
  }
  .faqp1 .fqtab .tabl2::after,
  .faqp1 .fqtab .tabl1.active .tabl2::after {
    height: 47px;
  }

  .faqp2 .fqtab .tabl2::after,
  .faqp2 .fqtab .tabl1.active .tabl2::after{
    height: 47px;
  }
  .faqp1 .fqtab .tabl1.active::after,
  .faqp2 .fqtab .tabl1.active::after{
    height: 61px;
    border-bottom:0;
  }
  .linkbook .g_kv .xtit {
    height: 30vw;
  }
  .linkbook .titilekvpig {
    transform: scale(0.8) translate(-10vw, 0vw);
  }
  .titilekvpig .pigcoin {
    width: 7vw;
    transform: translate(4.3vw, -3vw);
  }
  @keyframes linkpigcooin {
  0% {
    transform: translate(4.3vw, -3vw);
    opacity: 1;
  }
  40% {
    transform: translate(3.3vw, 1vw);
    opacity: 1;
  }
  80%,100% {
    transform: translate(3.3vw, 3vw);
    opacity: 0;
  }
  }
  .linkitem h3 {
      font-size: 2vw;
  }
  .linkitem a::after {
      width: 14vw;
      height: 6vw;
      top: 30%;
  }
}
/* 手機板 */
@media (max-width: 768px) {
  /*選單開始*/
  .g_header .nav_area .nav_content{
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .mainlogo img {
      height: unset;
      width: 60%;
  }
  .g_header .nav_area .nav_cnt ul {
    list-style: none;
    display: flex;
    margin: 0;
    flex-direction: column;
  }
  .g_header .nav_area .nav_cnt li {
      text-align: center;
      margin-top: 10vw;
  }
  .g_header .nav_area .nav_cnt.menubtn li img {
      height: 8vw;
      margin-right: 2vw;
  }
  .g_header .nav_area .nav_cnt li a {
      font-size: 4vw;
  }
  .g_header .header_cnt .nav_content{
    width: 100vw;
    height: 100vh;
    display: none;
  }
  .g_header .nav_area .nav_cnt li {
      margin-top: 3vw;
      height: 15vw;
  }
  .g_header .nav_area .nav_cnt .menubtn {
      margin-top: 3vw;
  }
  .nav_hamberger {
    display: block;
		width: 60px;
		height: 53px;
		cursor: pointer;
		position: absolute;
		display: inline-block;
		background: rgb(255, 255, 255, 0);
		margin-left:20px;
		margin-top:10px;
        top: -5px;
        left: -10px;
        z-index: 200;
	}
	.nav_hamberger div {
		position: absolute;
        width: 70%;
        height: 5px;
        background-color: #000;
        transition: 0.3s;
        margin: auto;
        left: 15%;
	}
	.nav_hamberger .bar1 {
		top: 12px;
	}
	.nav_hamberger .bar2 {
		top: 24px;
	}
	.nav_hamberger .bar3 {
		top: 36px;
	}
	/* 漢堡圖標轉為關閉按鈕 */
	.nav_hamberger.active .bar1 {
		transform: rotate(45deg);
		top: 24px;
	}
	.nav_hamberger.active .bar2 {
		opacity: 0;
	}
	.nav_hamberger.active .bar3 {
		transform: rotate(-45deg);
		top: 24px;
	}
  /*選單結束*/
  /*主視覺*/
  .g_kv .desktop {
    height: 140vw;
  }
  .kv_ms{display:unset;}
  .kv_pc{display:none;}
  .g_kv .tit {
    transform: scale(2.2) translate(-2vw, -4vw);
    transform-origin: left top;
  }
  .g_kv .kv_main, .g_kv .kv_item, .g_kv .kv_bottom {
      transform: scale(1.8) translate(-41vw, 32vw);
      transform-origin: left top;
  }
  .kv_bottom .kvmenubtn {
    width: 8%;
  }
  /*主視覺結束*/
  h1 {
      font-size: 3.5vw;
  }

  .aetf_box .tit::before, .petf_box .tit::before {
    font-size: 3vw;
    width: 3.5vw;
    height: 3.5vw;
    line-height: 2.6vw;
  }
  h5 {
    height: 4.9vw;
    font-size: 2.5vw;
  }
  h5::before {
    height: calc( 4.9vw / 1.4142);
    right: -1.67vw;
    width: calc( 4.9vw / 1.4142);
  }
  .aeftextul {
      /* font-size: 3vw; */
      line-height: 5vw;
      padding-left: 6vw;
  }
  .aeftextul li::before {
    width: 4vw;
    height: 4vw;
    font-size: 2vw;
    left: -5vw;
    top: 0.5vw;
  }
  .riskcd h4 {
    font-size: 5vw;
  }
  .riskcd h4 br{
    display: none;
  } 
  .riskcd div {
    height: 25vw;
    font-size: 3vw;
    border: 1vw solid #48B3EF;
  }
  .petf_box .riskcd div {
      height: 25vw;
      border: 1vw solid #18D1AE;
  }
  .etf_box .bx-wrapper .bx-controls-direction a {
    top: 35%;
    width: 5vw;
    height: 5vw;
  }
  .linkboxtd:nth-child(1), .linkboxtd:nth-child(2), 
  .linkboxtd:nth-child(3), .linkboxtd:nth-child(4),
  .linkboxtd:nth-child(5), .linkboxtd:nth-child(6){
    border: 0;
  }
  .link_box h4::before{
    width: 4vw;
    height: 8vw;
  }
  .link_box h4 {
    padding-left: 5vw;
    margin-bottom: 4vw;
    font-size: 5vw;
  }
  .link_box h4::after {
    font-size: 10vw;
    line-height: 4vw;
    margin-left: 2vw;
  }
  .linkboxtd {
      font-size: 3vw;
  }
  .linkadiv {
    margin: 2vw 0;
  }
  .link_box .sc_title{
    font-size: 6vw;
  }
  /* gamepage */
  .gamebox {
    height: 80vw ;/* fit-content; */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .gamepic,.gamepic img {
    width: 100%;
    position:unset;
  }
  .gamebox:nth-child(2) {
    flex-direction: column;
  }
  .gamedesc div {
    position: unset;
    right: unset;
  }
  .gamedesc {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    border-top:0;
    margin-top: 40px;
  }
  .gamedesc::before{
    left: unset;
    top:unset;
    width: 10vw;
    height: 10vw;
    transform: translate(39.5vw, -3.8vw);
    z-index: -1;
  }
  .gametitle {
    width: 50%;
    font-size: 3vw;
  }
  .gametitleicon,.gamebox:nth-child(2) .gametitleicon {
    transform: translate(1vw, -8vw);
    margin: 0 auto;
  }
  .gametitleicon img {
    width: 7vw;
  }
  .gametext {
    width: 80%;
    margin-top: -20px;
  }
  .gamebox:nth-child(2) .gamedesc{
    align-items: flex-end;
  }
  .gamebox:nth-child(2) .gamedesc::before{
    transform: translate(-37.4vw, -4vw);
  }
  /* workshop */
  .workshop .gametit img {
    transform: scale(3);
  }      
  .workshop .titilekvbulid img {
    width: 27vw;
    margin-top: 12vw;
  }     
  .workshop .gametit {
    height: 35vw;
  }
  .workshop .bx-wrapper .bx-controls-direction a {
    width: 8vw;
    height: 8vw;
    top: 65%;
  }
  .workshop h1 {
    font-size: 10vw;
  }
  .faq h2{
    display: block;
    font-size: 5vw;
    text-align: left;
  }
  .fqtab .tabl2 span{
    display: block;
    padding-left: 0;
    text-align: center;
    padding-right: 10px;
    font-size: 18px;
  }
  .fqtab .tabl2,.taba:hover .tabl2, .tabb:hover .tabl2{
    font-size: 0;
    padding: 5px 10px;
    width: 120px;
  }
  .fqtab .tabl1:last-child .tabl2 {
    padding-left: 40px;
  }
  .faqp2 .fqtab .tabl2::after, 
  .faqp2 .fqtab .tabl1.active .tabl2::after {
    height: 41px;
    right: -4px;
  }
  .fqtab .tabl2::after, 
  .fqtab .tabl1::after{
    width: 20%;
  }
  .faqp1 .fqtab .tabl1.active::after, .faqp2 .fqtab .tabl1.active::after {
    height: 56px;
  }
  .faqp2 .fqtab .tabl1::after {
    height: 55px;
  }
  .faqp1 .fqtab .tabl2::after, .faqp1 .fqtab .tabl1.active .tabl2::after {
      height: 41px;
      right: -4px;
  }
  .faqp1 .fqtab .tabl1::after {
      height: 55px;
  }
  .fqtab .tabl1{
    border-radius: 30px 30px 0 0;
  }
  .fqtab .tabl1::after{
    right: -8px;
  }
  .qustion{
    font-size: 20px;
  }
  .qustion img {
    height: 8vw;
  }
  .answerborad {
    width: 100%;
    margin-bottom: 20px;
  }
  .answerborad h4{
    padding: 15px;
    font-size: 16px;
  }
  .answerborad p, .answerborad ul{
    padding: 0;
    font-size: 15px;
    line-height: 5.7vw;
  }
  .answerborad ul{
    padding-left: 10px;
  }
  .answerborad div {
      overflow: scroll;
  }
  .answerborad table{
    width: 230%;
    font-size: 13px;
  }
  .answerborad td{
    padding: 3px;
  }
  .listbox ul {
    padding: 20px 20px 0 40px;
  }
  .listbox ul li {
    font-size: 4.5vw;
    line-height: 9vw;
  }
  .listbox ul a:hover {
    font-size: 4.6vw;
  }
  .morearticle {
    bottom: 150px;
  }
  .morearticle .sidelistbox ul{
    height: 200px;
  }
  .morearticle .tit {
    height: 80px;
  }
  .linkbook .g_kv {
    padding-top: 50px;
  }
  .linkbook .g_kv .xtit {
      height: 40vw;
  }
  .linkbook .titilekvpig {
      transform: scale(0.8) translate(-15vw, 0vw);
  }
  .titilekvpig .pigcoin {
    width: 10vw;
    transform: translate(6.3vw, -3vw);
  }
  @keyframes linkpigcooin {
    0% {
      transform: translate(6.3vw, -3vw);
      opacity: 1;
    }
    40% {
      transform: translate(4.3vw, 2vw);
      opacity: 1;
    }
    80%,100% {
      transform: translate(4.3vw, 4vw);
      opacity: 0;
    }
  }
  .linkitem img {
      height: 25vw;
  }
  .linkitem h3 {
      font-size: 5vw;
  }
  .linkitem a span {
      font-size: 3vw;
  }
  .linkitem a::after {
      width: 40vw;
      height: 15vw;
      top: 30%;
  }
  .linkitem a:hover::before {
      width: 10vw;
      height: 10vw;
      left: 25vw;
  }
  .footerbox{
    flex-direction: column;
    align-items: center;
  }
  .animtitle {
    width: 50vw;
  }
  .animtitle h2 {
      font-size: 2.5vw;
  }
  .animtitle span {
      font-size: 3vw;
      line-height: 5.5vw;
  }
  .animpic {
    margin-top: 8vw;
  }
  .animpic img, .animpic iframe {
    width: 85vw;
    height: calc(85vw * 315 / 560);
  }
  .kv_bottom .btn03 {
    animation-duration: 1.5s;
  }
  .kv_bottom .btn02 {
    animation-duration: 2s;
  }
  .aetf_box .cardgroupmd .bx-viewport {
    height: 205vw !important;
  }
  .petf_box .cardgroupmd .bx-viewport {
    height: 160vw !important;
  }
}
/* 手機板 500以下螢幕 */
@media (max-width: 500px) {
  .desktop .tit .t1 {
    font-size: 3vw;
    width: 18vw;
    line-height: 3.5vw;
    font-weight: bold;
  }
  .g_kv .desktop {
    margin-top: 40px;
  }
  h1 {
    font-size: 6vw;
    padding: 0 6vw;
    line-height: 9vw;
  }
  .intro_cnt p {
    line-height: 7vw;
  }
  .aetf_box .tit, .petf_box .tit {
    height: 20vw;
  }
  .aetf_box .titaetf {
    transform: scale(1.8);
    transform-origin: bottom;
    margin-top: 47px;
    margin-right: 5vw;
  }
  .petf_box .titpetf {
    margin-top: 13.3vw;
    margin-right: 7vw;
    transform: scale(2.1);
  }
  .aetf_box .tit::before, .petf_box .tit::before {
      font-size: 4vw;
      width: 6vw;
      height: 6vw;
      line-height: 4vw;
      top: 2vw;
      right: 2vw;
  }
  h5 {
      height: 10vw;
      font-size: 6vw;
  }
  h5::before {
    height: calc(10vw / 1.4142);
    right: -3.67vw;
    width: calc(10vw / 1.4142);
  }
  .aetf_box .container, .petf_box .container {
    padding: 1.8vw 4vw;
  }
  .picbox {
    transform: scale(5.8);
  }
  .aetfcard .textbox {
    width: 80vw;
  }
  .aetfcard {
    height: 100vw;
  }
  .aetfcard .textbox {
    margin-top: 62vw;
  }
  .aetf_box h6, .petf_box h6 {
    font-size: 6vw;
  }
  .aetfcard .textbox p {
    line-height: 5.3vw;
  }
  .lastcard {
    height: 145vw;
  }
  .petfcard.lastcard {
    height: 120vw;
  }
  .etf_box .bx-wrapper .bx-controls-direction a {
      top: 40%;
      width: 8vw;
      height: 8vw;
  }
  .aeftextul {
      /* font-size: 4.5vw; */
      line-height: 8vw;
      padding-left: 6vw;
  }
  .aeftextul li::before {
      top: 2vw;
  }
  .riskcd div ,.petf_box .riskcd div {
    height: 40vw;
    font-size: 5vw;
    border: 2vw solid #48B3EF;
    border-radius: 4vw;
  }
  .petf_box .riskcd div {
    border: 2vw solid #18D1AE;
  }
  .riskcd h4 {
    border-radius: 3vw 3vw 0 0;
  }
  .petf_box .riskcd div {
    height: 50vw;
  }
  .link_box h4 {
      font-size: 6vw;
  }
  .linkboxtd {
    font-size: 4vw;
  }
  .gamepage .g_kv, .workshop .g_kv {
    padding-top: 50px;
  }
  .gamepage .g_main, .workshop .g_main {
    padding-top: 30px;
  }
  .gamepic{
    border-top: 1px #000 solid;
    padding-top: 10px;
  }
  .gamepic img {
    border: 5px solid #4DA9E0;
  }
  .gametitle {
      width: 80%;
      font-size: 5vw;
      padding: 5px 10px;
  }
  .gamebox {
    height: 110vw;
  }
  .gametext {
    width: 100%;
    margin-top: -10px;
  }
  .gametext {
    width: 100%;
    margin-top: -20px;
    padding: 8px 10px;
  }
  .gamedesc{
    margin-top: 20px;
  }
  .gamelist .intro_cnt{
    margin-bottom: 50px;
  }
  .gametitleicon img {
    width: 10vw;
  }
  .gametitleicon, .gamebox:nth-child(2) .gametitleicon {
      transform: translate(25vw, -14vw);
  }
  .gamedesc::before {
    width: 15vw;
    height: 15vw;
    transform: translate(59vw, -5.8vw);
  }
  .gamebox:nth-child(2) .gametitleicon {
      transform: translate(-26vw, -14vw);
  }
  .gamebox:nth-child(2) .gamedesc::before {
      transform: translate(-60.4vw, -6vw);
  }
  .morearticle {
    bottom: 100px;
  }
  .aritcle .listbox h4 {
      margin-left: -22.5vw;
  }
  .aritcle .listbox {
    border: #000 1px solid;
  }
  .aritcle .container{
    width: 100%;
    max-width:100%
  }
  .aritcle .listbox{
    padding: 25px;
    padding-top: 0;
  }
  .datetext{
    font-size: 4vw;
  }
  .linkbook .g_kv .xtit {
      height: 50vw;
      transform: scale(0.8);
  }
  .linkbook .titilekvpig {
      transform: scale(0.8) translate(-20vw, 0vw);
  }
  .titilekvpig .pigcoin {
      width: 14vw;
      transform: translate(8.3vw, -4vw);
  }
  @keyframes linkpigcooin {
    0% {
      transform: translate(8.3vw, -4vw);
      opacity: 1;
    }
    40% {
      transform: translate(5.3vw, 2vw);
      opacity: 1;
    }
    80%,100% {
      transform: translate(5.3vw, 4vw);
      opacity: 0;
    }
  }
  .animtitle {
    width: 65vw;
  }
  .animtitle h2 {
    font-size: 3vw;
  }
  .animtitle span {
    font-size: 4vw;
    line-height: 9vw;
  }
  .animpic {
      margin-top: 10vw;
  }
}