html {
    scroll-behavior: smooth; /* 实现平滑滚动 页面中元素id*/
}
.gua {
    float: left;
    margin-right: 16px;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: gray;
    cursor: pointer;
}

.yao {
    font-size: 0px;
    margin-bottom: 6px;
}

.line {
    width: 36px;
    height: 9px;
    background: #000;
    display: inline-block;
}

.yin .change {
    width: 10px;
    height: 9px;
    background: #fff;
    display: inline-block;
}

.yang .change {
    width: 10px;
    height: 9px;
    background: #000;
    display: inline-block;
}

.south {
    position: absolute;
    top: 50px;
    left: 200px;
}

.north {
    position: absolute;
    top: 350px;
    left: 200px;
    transform: rotate(180deg)
}

.west {
    position: absolute;
    top: 200px;
    left: 350px;
    transform: rotate(90deg)
}

.east {
    position: absolute;
    top: 200px;
    left: 50px;
    transform: rotate(-90deg)
}

.southeast {
    position: absolute;
    top: 100px;
    left: 100px;
    transform: rotate(-45deg);
}

.northwest {
    position: absolute;
    top: 300px;
    left: 300px;
    transform: rotate(135deg)
}

.southwest {
    position: absolute;
    top: 100px;
    left: 300px;
    transform: rotate(45deg)
}

.northeast {
    position: absolute;
    top: 300px;
    left: 100px;
    transform: rotate(-135deg);
}

.position {
    font-size: 16px;
    color: darkgray;
}

/* 乾 */
.south2northwest {
    animation: south2northwest 1s forwards ease;
}
@keyframes south2northwest {
    from {position: absolute;
    top: 50px;
    left: 200px;}
    to {position: absolute;
    top: 300px;
    left: 300px;
    transform: rotate(135deg)}
}
.northwest2south {
    animation: northwest2south 1s forwards ease;
}
@keyframes northwest2south {
    to {position: absolute;
    top: 50px;
    left: 200px;}
    from {position: absolute;
    top: 300px;
    left: 300px;
    transform: rotate(135deg)}
}

/* 坤 */
.north2southwest {
    animation: north2southwest 1s forwards ease;
}
@keyframes north2southwest {
    from {position: absolute;
    top: 350px;
    left: 200px;
    transform: rotate(180deg)}
    to {position: absolute;
    top: 100px;
    left: 300px;
    transform: rotate(45deg)}
}
.southwest2north {
    animation: southwest2north 1s forwards ease;
}
@keyframes southwest2north {
    to {position: absolute;
    top: 350px;
    left: 200px;
    transform: rotate(180deg)}
    from {position: absolute;
    top: 100px;
    left: 300px;
    transform: rotate(45deg)}
}

/* 兑 */
.southeast2west {
    animation: southeast2west 1s forwards ease;
}
@keyframes southeast2west {
    from {position: absolute;
    top: 100px;
    left: 100px;
    transform: rotate(-45deg);}
    to {position: absolute;
    top: 200px;
    left: 350px;
    transform: rotate(90deg)}
}
.west2southeast {
    animation: west2southeast 1s forwards ease;
}
@keyframes west2southeast {
    to {position: absolute;
    top: 100px;
    left: 100px;
    transform: rotate(-45deg);}
    from {position: absolute;
    top: 200px;
    left: 350px;
    transform: rotate(90deg)}
}

/* 艮 */
.northwest2northeast {
    animation: northwest2northeast 1s forwards ease;
}
@keyframes northwest2northeast {
    from {position: absolute;
    top: 300px;
    left: 300px;
    transform: rotate(135deg)}
    to {position: absolute;
    top: 300px;
    left: 100px;
    transform: rotate(-135deg);}
}
.northeast2northwest {
    animation: northeast2northwest 1s forwards ease;
}
@keyframes northeast2northwest {
    to {position: absolute;
    top: 300px;
    left: 300px;
    transform: rotate(135deg)}
    from {position: absolute;
    top: 300px;
    left: 100px;
    transform: rotate(-135deg);}
}

/* 巺 */
.southwest2southeast {
    animation: southwest2southeast 1s forwards ease;
}
@keyframes southwest2southeast {
    from {position: absolute;
    top: 100px;
    left: 300px;
    transform: rotate(45deg)}
    to {position: absolute;
    top: 100px;
    left: 100px;
    transform: rotate(-45deg);}
}
.southeast2southwest {
    animation: southeast2southwest 1s forwards ease;
}
@keyframes southeast2southwest {
    to {position: absolute;
    top: 100px;
    left: 300px;
    transform: rotate(45deg)}
    from {position: absolute;
    top: 100px;
    left: 100px;
    transform: rotate(-45deg);}
}

/* 震 */
.northeast2east {
    animation: northeast2east 1s forwards ease;
}
@keyframes northeast2east {
    from {position: absolute;
    top: 300px;
    left: 100px;
    transform: rotate(-135deg);}
    to {position: absolute;
    top: 200px;
    left: 50px;
    transform: rotate(-90deg)}
}
.east2northeast {
    animation: east2northeast 1s forwards ease;
}
@keyframes east2northeast {
    to {position: absolute;
    top: 300px;
    left: 100px;
    transform: rotate(-135deg);}
    from {position: absolute;
    top: 200px;
    left: 50px;
    transform: rotate(-90deg)}
}

/* 离 */
.east2south {
    animation: east2south 1s forwards ease;
}
@keyframes east2south {
    from {position: absolute;
    top: 200px;
    left: 50px;
    transform: rotate(-90deg)}
    to {position: absolute;
    top: 50px;
    left: 200px;
    transform: rotate(0deg)}
}
.south2east {
    animation: south2east 1s forwards ease;
}
@keyframes south2east {
    to {position: absolute;
    top: 200px;
    left: 50px;
    transform: rotate(-90deg)}
    from {position: absolute;
    top: 50px;
    left: 200px;
    transform: rotate(0deg)}
}

/* 坎 */
.west2north {
    animation: west2north 1s forwards ease;
}
@keyframes west2north {
    from {position: absolute;
    top: 200px;
    left: 350px;
    transform: rotate(90deg)}
    to {position: absolute;
    top: 350px;
    left: 200px;
    transform: rotate(180deg)}
}
.north2west {
    animation: north2west 1s forwards ease;
}
@keyframes north2west {
    to {position: absolute;
    top: 200px;
    left: 350px;
    transform: rotate(90deg)}
    from {position: absolute;
    top: 350px;
    left: 200px;
    transform: rotate(180deg)}
}

.yanbtn {
    position: absolute;
    left: 471px;
    top: 320px;
    text-decoration: none;
    background: #000;
    color: #fff;
    padding: 0px 6px 2px 6px;
    box-shadow:-2px 0px 8px #f00,0px -2px 8px #000,0px 2px 8px #9e038a,2px 0px 8px #0f0;
    border-radius: 20%;
}

#yantitle {
    /* writing-mode: tb-rl; */
    /* position: absolute; */
    left: 70%;
    /* top: 200px; */
    /* font-size: 20px; */
    /* font-weight: 800; */
    /* letter-spacing: 6px; */
    /* padding: 6px 4px 0px 4px; */
    /* background: #e7e7e7; */
    /* color: #000; */
}
#zy64gua {
    float: left;
    /* margin-left: 630px; */
    /* margin-top: 10px; */
    width: 100%;
    /* padding-left: 560px; */
    /* height: 700px; */
    /* overflow-y: auto; */
}
.gua64 {
    float: left;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: gray;
    cursor: pointer;
    width: 100px;
    margin-bottom: 20px;
}
.gua64js {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: gray;
    cursor: pointer;
    width: 100px;
    margin-bottom: 20px;
    margin:0 auto;
}
.yao64 {
    font-size: 0px;
    /* margin-bottom: 5px;
    margin-top: 5px; */
    margin-right:2px;
    width: 100px;
}

.yao64py {
    font-size: 0px;
    /* margin-bottom: 5px;
    margin-top: 5px; */
    margin-right:2px;
    /* width: 100px; */
}
.yin64{
    /* font-size: 0px; */
    /* margin-bottom: 5px;
    margin-top: 5px; */
    /* margin-right:2px; */
    /* width: 100px; */
}
.gua64 :hover {
    /* margin-left: 20px; */
    /* margin-left: 1px; */
}
.line64 {
    margin-top: 8px;
    width: 46px;
    height: 9px;
    /* background:#5999da; */
    background: #e4736b;
    display: inline-block;
    border: 0px solid #fff !important;
}

.yangline64 {
    width: 46px;
    height: 9px;
    background: #e4736b;
    display: inline-block;
    border: 0px solid #fff !important;
}
.yangline64new {
    margin-top: 8px;
    width: 100px;
    height: 9px;
    background: #e4736b;
    display: inline-block;
    border: 0px solid #fff !important;
}
.yinline64 {
    width: 46px;
    height: 9px;
    background:#e4736b;/* #5999da; */
    display: inline-block;
    border: 0px solid #fff !important;
}

.yin64 .change {
    width: 8px;
    height: 10px;
    background:#faf8f7;
    display: inline-block;
    border: 0px solid #fff !important;
}

.yang64 .change {
    width: 8px;
    height: 9px;
    background: #e4736b;
    display: inline-block;
    border: 0px solid #fff !important;
}

.name64 {
    color: #fff;
    background: #696969;
    font-siz10: 14px;
    padding: 2px 8px 2px 8px;
    border-radius: 15%;
}
/* bulma tabs switch */
.tabs {
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    white-space: normal;
}
#tab-content .content {
	display: none;
    padding: 1em;
}
#tab-content .content.is-active {
	display: block;
    padding: 1em;
}
/* .tab-content { */
  /* padding:1em; */
/* } */
/* bulma module_jiegua  */
/* .zy-best {
    height: calc(186px + 3rem);
    padding: 1.5rem 0;
    overflow: hidden;
    position: relative
}
.zy-best-list {
align-items: stretch;
-webkit-animation-duration: 93.6s;
animation-duration: 93.6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
display: flex;
left: 0;
position: absolute;
top: 1.5rem;
-webkit-animation-name: bdBestCarousel;
animation-name: bdBestCarousel
}
.zy-best-list:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused
} */
.bd-tw{
background-color: #FDFDF8;
border-radius: 6px;
flex-shrink: 0;
font-size: 1em;
padding: 1.25em;
text-align: left;
}
.zy-best-item {
flex-grow: 0;
flex-shrink: 0;
margin-right: 16px;
transition-duration: 172ms;
transition-property: box-shadow, transform;
width: 268px;
}
.zy-best-item.bd-is-medium {
font-size: 1.125em
}
.zy-best-item.bd-is-large {
font-size: 1.25em
}
/* @-webkit-keyframes bdBestCarousel { */
/* 100% { */
    /* transform: translateX(calc(-100% + 1286px)) */
/* } */
/* } */
/* @keyframes bdBestCarousel { */
/* 100% { */
    /* transform: translateX(calc(-100% + 1286px)) */
/* } */
/* } */
.autocomplete {
    background: #FFFFFF;
    z-index: 1000;
/*    font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(50, 50, 50, 0.6);
}

.autocomplete * {
    font: inherit;
}

.autocomplete > div {
	color: #7a7a7a;
    padding: 0 4px;
}

.autocomplete .group {
    background: #eee;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
    background: #f2f0f0;
    cursor: pointer;
/*	color: #e4736b;*/
}
/* backtotop button css */
.to-top {
    background: white;
    position: fixed;
    bottom: 16px;
    right: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #1f1f1f;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all .4s;
}
.to-top.active {
    bottom: 120px;
    pointer-events: auto;
    opacity: 1;
    z-index: 1000;
}
.scrolling-text {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.scrolling-text span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 30s linear infinite; /* 调整动画时长和效果 */
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* Custom Styles for Carousel */
.carousel {
    position: relative;
    overflow: hidden;
}
.carousel .carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}
.carousel .carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}
.carousel-controls .button {
    background-color: #fffff;
    border: none;
    color: #e4736b;
    padding: 12px;
}
.colored-svg {
    filter:brightness(0) saturate(100%) invert(50%) sepia(49%) saturate(533%) hue-rotate(315deg) brightness(99%) contrast(93%);
}
.navbar-center{
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
}

/* body {
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, #2a399c, rgba(54, 53, 156, 3.89), rgba(177, 79, 157, 2.98), rgba(239, 195, 175, 0.95), rgba(255, 253, 252, 0.27));
  margin: 0;
  padding: 0;
}
.container {
  padding: 16px;
  color: white;
} */
.search-bar {
  width: 100%;
  padding: 10px;
  /* border-radius: 20px;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: white; */
  font-size: 16px;
}
.search-bar::placeholder {
  color: #e4736b;
}
.categories {
  display: flex;
  overflow-x: scroll;
  margin: 16px 0;
}
.categories button {
  padding: 10px;
  margin: 0 5px;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  /* font-weight: bold; */
  background-color: rgba(248, 210, 175, 0.7);
  color: #414C6B;
}
.categories button.active {
  background-color: #f8d2af;
  color: #e4736b;
}
.results {
  display: flex;
  flex-direction: column;
}
.result {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  margin: 8px 0;
  padding: 16px;
}
.swiper-container {
    width: 100%; /* 设置为适合屏幕的宽度 */
    /* height: 400px; /* 根据需求设置高度 */ */
    overflow: hidden; /* 隐藏超出容器可视区域的部分 */
    position: relative;
    -webkit-overflow-scrolling: touch; /* 优化 Safari 滚动处理 */
    overflow-x: hidden; /* 强制水平滚动条被隐藏 */
}

.swiper-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.swiper-slide {
    /* width: 100%;  根据你的需求调整每个 slide 的宽度 */
    /* height: 100%;  设置 slide 高度匹配容器 */
    box-sizing: border-box;
    flex-shrink: 0; /* 保证 slide 不会缩小 */
}

/* 设置左右导航按钮的大小 */
.swiper-button-next, .swiper-button-prev {
    width: 32px; /* 控制按钮的宽度 */
    height: 32px; /* 控制按钮的高度 */
    background-color: rgba(228, 115, 107, 1); /* 设置按钮背景色 (半透明黑色) */
    color: #fff; /* 设置箭头颜色 */
    border-radius: 50%; /* 将按钮设为圆形 */
}

/* 修改箭头的形状和颜色 */
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 12px; /* 控制箭头图标的大小 */
    color: white; /* 设置箭头颜色 */
}

/* 当鼠标悬停时改变按钮的颜色 */
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(228, 115, 107, 0.8); /* 鼠标悬停时按钮变为金黄色 */
}

/* 滚动条容器的样式 */
.swiper-scrollbar {
  background-color: #f6f6f6; /* 滚动条的背景颜色 */
  border-radius: 10px; /* 圆角 */
  height: 8px; /* 滚动条高度 */
}

/* 滚动条的滑块样式 */
.swiper-scrollbar-drag {
  background-color: #e4736b; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
  height: 100%; /* 确保滑块的高度填充滚动条 */
}

#apptab-content .content {
    display: none;
}

#apptab-content .content.is-active {
    display: block;
}