:root {
  --min-height: 768px;
  --min-width: 1366px;
  --max-width: 1366px;
  --html-font-size: 60px;
  --body-font-family: "Microsoft JhengHei", "微軟正黑體", "微軟正黑", Microsoft YaHei, FangSong, KaiTi, Arial, Helvetica, sans-serif;
  --mobile-navi-offset: 0px;
  --news-container-height: 3.38rem;
}

[v-cloak] {
  display: none !important;
}

html {
  font-size: var(--html-font-size);
}

body {
  /* min-width: var(--min-width);
  min-height: var(--min-height); */
  font-size: 0.3rem;
  font-family: var(--body-font-family) !important;
  color: #444444;
  background-color: #eee3c7;
  overflow: hidden;
}

.my-footer {
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 0.5%;
}

.my-footer .copyright {
  color: #308143;
  font-size: 0.2rem;
  text-align: right;
  font-weight: bold;
}

.my-footer .footer-select {
  width: 2.5rem;
  border-radius: 0.08rem;
  font-size: 0.2rem;
  font-weight: bold;
  color: #000000;
  /* margin-left: 0.26rem; */
  padding: 0.02rem 0rem;
  min-height: 0.28rem;
}

.my-footer>.container,
.my-footer .container-fluid {
  padding-top: 0.1rem;
  /* padding-bottom: 0.1rem; */
  /*     &>.row {
        height: var(--footer-height);
      } */
}

.my-footer .eph {
  max-height: 0.43rem;
  margin-right: 0.26rem;
}

.my-footer .popular {
  max-height: 0.37rem;
}

.my-footer .ai {
  max-height: 0.4rem;
  margin-right: 0.26rem;
}

.footer-breadcrumb {
  margin-bottom: 0;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.footer-breadcrumb .breadcrumb-item,
.footer-breadcrumb .breadcrumb-item.active {
  margin-bottom: 0;
  font-size: 0.2rem;
  font-weight: bold;
}

.footer-breadcrumb .breadcrumb-item a,
.footer-breadcrumb .breadcrumb-item.active a {
  color: #308143;
  text-decoration: none;
}

.footer-breadcrumb .breadcrumb-item a:hover,
.footer-breadcrumb .breadcrumb-item.active a:hover {
  text-decoration: underline;
}

.footer-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: "|";
  color: #308143;
}

.ich_container {
  min-height: 768px;
  min-width: 1024px;
  max-width: 1024px;
  background-image: url("../../assets/images/ich/bg2.jpg");
  background-size: 100% 100%;
}

/* 遮罩层 */
.ich_container_overlay {
  min-height: 768px;
  min-width: 1024px;
  max-width: 1024px;
  position: absolute;
  background-color: rgb(255 255 255 / 48%);
  z-index: 9998;
  display: none;
}

/* 顶部 */
.ich_header {
  height: 8.5%;
  display: flex;
  flex-direction: row;
}

.ich_header .left {
  height: 100%;
  width: 70%;
  display: flex;
  flex-direction: row;
}

.ich_header .left .logo1 {
  height: 100%;
  width: 15%;
  margin-left: 1%;
  padding-top: 2%;
}

.ich_header .left .logo2 {
  height: 100%;
  width: 25%;
  margin-left: 1.5%;
  padding-top: 0.5%;
}

.ich_header .right {
  height: 100%;
  width: 30%;
  display: flex;
  flex-direction: row;
  padding-left: 2%;
  justify-content: flex-end;
}

.ich_header .right .account {
  height: 100%;
  width: 53%;
  padding-top: 5%;
  position: relative;
}

.ich_header .right .account_name {
  position: absolute;
  top: 45.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "微軟正黑", sans-serif;
  font-weight: bold;
  font-size: 0.21rem;
  color: #000000;
  width: 100%;
  text-align: center;
}

.ich_header .right .home {
  height: 100%;
  width: 31%;
  padding: 2.5% 0 0 11%;
}

.ich_header .right .home .home_img {
  max-width: 45px;
  max-height: 45px;
  height: 100%;
  cursor: pointer;
  background-image: url('../../assets/images/ich/btn_home.png');
  background-size: cover;
}

.ich_header .right .home .home_img_gray {
  max-width: 45px;
  max-height: 45px;
  height: 100%;
  cursor: not-allowed;
  /* 改变鼠标样式为不可点击 */
  background-image: url('../../assets/images/ich/btn_home.png');
  background-size: cover;
  filter: grayscale(100%);
  /* 置灰效果 */
}

.ich_header .right .home .home_img:hover {
  background-image: url('../../assets/images/ich/btn_home_h.png');
  /* 切换图片 */
}

.ich_header .right .logout {
  height: 100%;
  width: 21%;
  padding: 2.5% 0 0 2%;
  cursor: pointer;
}

.ich_header .right .logout .logout_img {
  max-width: 62px;
  max-height: 62px;
  height: 100%;
  cursor: pointer;
  background-image: url('../../assets/images/ich/btn_logout.png');
  background-size: cover;
  /* 确保图片覆盖整个容器 */
}

.ich_header .right .logout .logout_img:hover {
  background-image: url('../../assets/images/ich/btn_logout_h.png');
}

/* 頁面主體 */
.ich_main {
  height: 84.8%;
  position: relative;
}

.ich_main div {
  position: absolute;
  height: 40.3%;
  width: 26%;
  cursor: pointer;
  background-size: cover;
}

.ich_main span {
  position: absolute;
  display: block;
  height: 44.3%;
  width: 46%;
  background-size: cover;
}

/* 灯笼 */
.dl-left {
  width: 70px !important;
  height: 220px !important;
  cursor: auto !important;
  background-image: url('../../assets/images/ich/SVG/dl.svg');
  margin-left: -10px;
  z-index: 200;
  cursor: none;
}

.dl-right {
  width: 70px !important;
  height: 220px !important;
  cursor: auto !important;
  background-image: url('../../assets/images/ich/SVG/dl.svg');
  right: 0%;
  margin-top: 0.3%;
  margin-right: -0.5%;
}

/* 云朵 */
.cloud1 {
  width: 180px !important;
  height: 100px !important;
  cursor: auto !important;
  background-image: url('../../assets/images/ich/SVG/yun1.svg');
  left: 50%;
  top: -2%;
}

.cloud2 {
  width: 140px !important;
  height: 90px !important;
  cursor: auto !important;
  background-image: url('../../assets/images/ich/SVG/yun2.svg');
  top: 42%;
  left: 26.5%;
}

.cloud3 {
  width: 180px !important;
  height: 90px !important;
  cursor: auto !important;
  background-image: url('../../assets/images/ich/SVG/yun3.svg');
  top: 9%;
  left: 2%;
  z-index: 199;
}

.cloud4 {
  width: 240px !important;
  height: 90px !important;
  cursor: auto !important;
  background-image: url('../../assets/images/ich/SVG/yun4.svg');
  right: 2%;
  top: 42%;
}


/* tab1 相关 */
.ich_main .tab1 {
  top: 33.5%;
  left: 5.5%;
  background-image: url('../../assets/images/ich/tab1_pic.png');
  z-index: 1;
}

.ich_main .tab1_active {
  background-image: url('../../assets/images/ich/tab1_pic_h.png');
}

.ich_main .tab1 .icon1 {
  top: -39.5%;
  left: -9.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_icon3.png');
}

.ich_main .tab1 .icon1:hover {
  background-image: url('../../assets/images/ich/tab1_icon3_h.png');
}

.ich_main .tab1 .icon2 {
  top: -48%;
  left: 42%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_icon6.png');
}

.ich_main .tab1 .icon2:hover {
  background-image: url('../../assets/images/ich/tab1_icon6_h.png');
}

.ich_main .tab1 .icon3 {
  top: -24%;
  left: 90%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_icon1.png');
}

.ich_main .tab1 .icon3:hover {
  background-image: url('../../assets/images/ich/tab1_icon1_h.png');
}

.ich_main .tab1 .icon5 {
  top: 66%;
  left: 103%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_icon2.png');
}

.ich_main .tab1 .icon5:hover {
  background-image: url('../../assets/images/ich/tab1_icon2_h.png');
}

.ich_main .tab1 .icon4 {
  top: 23%;
  left: 110.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_icon4.png');
}

.ich_main .tab1 .icon4:hover {
  background-image: url('../../assets/images/ich/tab1_icon4_h.png');
}

.ich_main .tab1 .icon6 {
  top: 98%;
  left: 61.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_icon5.png');
}

.ich_main .tab1 .icon6:hover {
  background-image: url('../../assets/images/ich/tab1_icon5_h.png');
}

.ich_main .tab1 .back1 {
  width: 22%;
  height: 24%;
  top: 109%;
  left: 26.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab1_back1.png');
}

.ich_main .tab1 .back1:hover {
  background-image: url('../../assets/images/ich/tab1_back1_h.png');
}

/* tab2 相关 */
.ich_main .tab2 {
  top: 58%;
  left: 37.5%;
  background-image: url('../../assets/images/ich/tab2_pic.png');
  z-index: 1;
}

.ich_main .tab2_active {
  background-image: url('../../assets/images/ich/tab2_pic_h.png');
}

.ich_main .tab2 .icon1 {
  top: 31%;
  left: -48.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab2_icon1.png');
}

.ich_main .tab2 .icon1:hover {
  background-image: url('../../assets/images/ich/tab2_icon1_h.png');
}

.ich_main .tab2 .icon2 {
  top: -21%;
  left: -30.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab2_icon2.png');
}

.ich_main .tab2 .icon2:hover {
  background-image: url('../../assets/images/ich/tab2_icon2_h.png');
}

.ich_main .tab2 .icon3 {
  top: -46%;
  left: 17.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab2_icon3_.png');
}

.ich_main .tab2 .icon3:hover {
  background-image: url('../../assets/images/ich/tab2_icon3_h.png');
}

.ich_main .tab2 .icon4 {
  top: -32%;
  left: 74.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab2_icon4.png');
}

.ich_main .tab2 .icon4:hover {
  background-image: url('../../assets/images/ich/tab2_icon4_h.png');
}

.ich_main .tab2 .icon5 {
  top: 14%;
  left: 101.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab2_icon5.png');
}

.ich_main .tab2 .icon5:hover {
  background-image: url('../../assets/images/ich/tab2_icon5_h.png');
}

.ich_main .tab2 .back1 {
  width: 22%;
  height: 24%;
  top: 57%;
  left: 102.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab2_back1.png');
}

.ich_main .tab2 .back1:hover {
  background-image: url('../../assets/images/ich/tab2_back1_h.png');
}

/* tab3 相关 */
.ich_main .tab3 {
  top: 9%;
  left: 36.5%;
  background-image: url('../../assets/images/ich/tab3_pic.png');
  z-index: 1;
}

.ich_main .tab3_active {
  background-image: url('../../assets/images/ich/tab3_pic_h.png');
}

.ich_main .tab3 .icon1 {
  top: 48%;
  left: -44.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_icon1.png');
}

.ich_main .tab3 .icon1:hover {
  background-image: url('../../assets/images/ich/tab3_icon1_h.png');
}

.ich_main .tab3 .icon2 {
  top: -1%;
  left: -43.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_icon2.png');
}

.ich_main .tab3 .icon2:hover {
  background-image: url('../../assets/images/ich/tab3_icon2_h.png');
}

.ich_main .tab3 .icon3 {
  top: -38%;
  left: -8.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_icon3.png');
}

.ich_main .tab3 .icon3:hover {
  background-image: url('../../assets/images/ich/tab3_icon3_h.png');
}

.ich_main .tab3 .icon4 {
  top: -44%;
  left: 49.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_icon4.png');
}

.ich_main .tab3 .icon4:hover {
  background-image: url('../../assets/images/ich/tab3_icon4_h.png');
}

.ich_main .tab3 .icon5 {
  top: -10%;
  left: 100.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_icon5.png');
}

.ich_main .tab3 .icon5:hover {
  background-image: url('../../assets/images/ich/tab3_icon5_h.png');
}

.ich_main .tab3 .icon6 {
  top: 37%;
  left: 102.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_icon6.png');
}

.ich_main .tab3 .icon6:hover {
  background-image: url('../../assets/images/ich/tab3_icon6_h.png');
}

.ich_main .tab3 .back1 {
  width: 22%;
  height: 24%;
  top: 83%;
  left: 99.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab3_back1.png');
}

.ich_main .tab3 .back1:hover {
  background-image: url('../../assets/images/ich/tab3_back1_h.png');
}


/* tab4 相关 */
.ich_main .tab4 {
  top: 31%;
  left: 70.1%;
  background-image: url('../../assets/images/ich/tab4_pic.png');
  z-index: 999;
}

.ich_main .tab4_active {
  background-image: url('../../assets/images/ich/tab4_pic_h.png');
}

.ich_main .tab4 .icon1 {
  top: -28%;
  left: -25.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab4_icon1.png');
}

.ich_main .tab4 .icon1:hover {
  background-image: url('../../assets/images/ich/tab4_icon1_h.png');
}

.ich_main .tab4 .icon2 {
  top: 15%;
  left: -49.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab4_icon2.png');
}

.ich_main .tab4 .icon2:hover {
  background-image: url('../../assets/images/ich/tab4_icon2_h.png');
}

.ich_main .tab4 .icon3 {
  top: 63%;
  left: -43.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab4_icon3.png');
}

.ich_main .tab4 .icon3:hover {
  background-image: url('../../assets/images/ich/tab4_icon3_h.png');
}

.ich_main .tab4 .back1 {
  width: 22%;
  height: 24%;
  top: 103%;
  left: -3.5%;
  display: none;
  background-image: url('../../assets/images/ich/tab4_back1.png');
}

.ich_main .tab4 .back1:hover {
  background-image: url('../../assets/images/ich/tab4_back1_h.png');
}


/* 内页 -- 视频播放页 */
.ich_inner_main {
  height: 84.8%;
  display: flex;
  flex-direction: row;
}

/* 内容 -- 左侧 */
.ich_inner_main .inner_left {
  width: 23%;
  height: 100%;
  padding: 0% 0 2% 0%;
}

.ich_inner_main .inner_left .img_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  padding-top: 24%;
}

.ich_inner_main .inner_left .img_box .img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.ich_inner_main .inner_left .back {
  width: 100%;
  height: 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ich_inner_main .inner_right {
  width: 74%;
  height: 100%;
  margin-left: 2%;
}

.ich_inner_main .inner_right .top {
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3%;
}

.ich_inner_main .inner_right .video {
  width: 100%;
  margin-top: 3%;
}



.icon-animate {
  animation: icon-animation 0.5s ease-in-out 0.2s;
}

@keyframes icon-animation {

  0% {
    transform: scale(0);
    /* 从无到有 */
    opacity: 0;
    /* 完全透明 */
  }

  50% {
    transform: scale(1.1);
    /* 轻微放大 */
  }

  100% {
    transform: scale(1);
    /* 回到原始大小 */
    opacity: 1;
    /* 完全不透明 */
  }
}




/* test測試樣式 */
/* .container-main{
  width: 100%;
  height: 100vh;
  background-color: #eee3c7;
}


.test_container{
  margin: 0 auto;
  height: 100%;
  aspect-ratio: 4 / 3;
  background-image: url("../images/svg/bg1.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.test_container .text_box{
  width: 10%;
  height: 10%;
  position: absolute;
  top: 24%;
  left: 26%;
  background-color: #308143;
} */

.pc-hide {
  display: none !important;
}