@charset "utf-8";
/* CSS Document */

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    font-family:微软雅黑;
}
ul,li,ol,a { text-decoration: none; list-style:none; }
/* 根元素默认字体（适配中等屏幕） */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* 小屏幕（手机）：缩小根元素字体，所有rem字体同步缩小 */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px; /* 1rem = 14px */
  }
}

/* 大屏幕（电脑）：放大根元素字体，所有rem字体同步放大 */
@media screen and (min-width: 1200px) {
  html {
    font-size: 18px; /* 1rem = 18px */
  }
}


a { text-decoration: none; list-style: none; text-decoration: none;  }
.dbjbox { width: 100%; height: 100vh;  background: url(../images/ydy_dbj.png) no-repeat center bottom; background-size:cover; display: flex; flex-flow: column nowrap; align-items: center; position: relative;}
header { width: 100%;  }
.head { width: 100%; max-width: 70%; margin: 0 auto; display: flex; align-items: center;  justify-content:space-between; position: relative;}
.logo { width:28%; margin-top:30px;  max-width: 268px; max-height: 202px; min-width: 100px; }
.logo img { width: 100%;}
.dh { width:50%;  display: flex; flex-flow: row nowrap; justify-content: space-between;  margin-top: 60px; }
.ydy_xtb { width: 10%; min-width:60px; margin: 0 2%; }
.ydy_xtb a {  display: flex; flex-flow: column; justify-content: center; align-items: center;}
.ydy_xtb a span  {width:100%; max-width: 62px;  height: 100%; min-height: 62px; margin-bottom: 5px;}
.ydy_xtb a span img { width: 100%; }
.ydy_xtb a p { color: #ffffff; font-size: 1.125rem; line-height: 45px; font-family: "微软雅黑"; letter-spacing: 1px; font-weight: bold; }
.ydy_ewm { max-height: 120px; max-width:120px; align-items: center; margin-top:30px;   }
.ydy_ewm img { width: 100%; }


/*4张图片*/

.ydy_tbnav { width: 100%; max-width: 60%;  display: flex; justify-content: space-between; margin-top:145px;}
.ydy_tbnav_li { width: 100%; height: auto; margin: 2% 2%; max-width: 193px;  max-height:397px; position: relative;  }
.ydy_tbnav_li img { width: 100%; height: 100% ;  max-width: 193px;  max-height:397px;   }

.ydy_tbnav_li_img { width: 85%; max-width:102px; 
             /* 开启3D空间，让旋转更有立体感 */
            perspective: 1000px; height: auto; display: flex; justify-content: center; align-items: center; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
.ydy_tbnav_li_img a {display: flex; justify-content: center; align-items: center;}
.ydy_tbnav_li_img a img { 
           width: 100%;  
           transform-style: preserve-3d;
            /* 应用旋转动画：动画名 时长 匀速 无限循环 */
            animation: verticalRotate 8s linear infinite;}
 /* 定义垂直旋转动画关键帧 */
        @keyframes verticalRotate {
            0% {
                /* 初始状态：旋转0度 */
                transform: rotateY(0deg);
            }
            100% {
                /* 结束状态：旋转360度（一圈） */
                transform: rotateY(360deg);
            }
        }

        /* 可选：hover暂停动画，提升交互体验 */
        .img-container:hover .rotate-img {
            animation-play-state: paused;
        }
.ydy_tbnav_li:nth-child(even) { margin-top: 9%;}



@media screen and (max-width: 1200px) {
.dh { width: 100%;  display: flex; justify-content: space-between; flex-flow: row wrap; position: absolute;  top:180px;  left: 50%;  transform: translateX(-50%);}
}




@media screen and (max-width: 1024px) {
.ydy_ewm img { max-width: 100px;}
.dh {   top:150px; position: absolute;}
}

@media screen and (max-width:920px) {
.dh { width: 100%; position: absolute;  top:100px;}
.ydy_tbnav_li_title { font-size:1.25rem;}
.ydy_xtb a p { font-size: 1.125rem; min-width:75px;}
.ydy_ewm img { max-width: 80px;}
}

@media screen and (max-width:768px) {
.ydy_tbnav { margin-top: 241px; width: 85%;}
}
@media screen and (max-width:576px) {
.ydy_tbnav { margin-top: 300px;}
}