* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,body{height: 100%;}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
overflow: hidden;
background: url(../images/bg.jpg);
background-size:100% 100%;
color: #333;
}
a{text-decoration: none;color: #333;}
ul,li,p,form{ margin:0; padding:0; list-style-type:none;}
/* 全屏Swiper容器 */
.swiper-container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}

/* 幻灯片样式 */
.swiper-slide {
width:89vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333;
margin-left:10vw;
}


/* 左右箭头样式 */
.swiper-button-prev,
.swiper-button-next {
width:3vw;
height:3vw;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}

/* 自定义箭头图标 */
.swiper-button-prev::after,
.swiper-button-next::after {
font-size:1.8vw!important;
color: white;
}

/* 底部自定义分页器 */
.swiper-pagination {height: 100vh;width:12.5vw;background:url(../images/nav-bg.png) no-repeat top left;background-size:100% 100%;left: 0;right: auto;top:0;padding-top: 2vw;
}

/* 基础分页按钮样式 */
.swiper-pagination-bullet {
width: 11vw;
height:6vw;
margin:1vw 0!important;
transition: all 0.3s ease;
border-radius: 0 !important;
opacity:0.7;
}

/* 激活状态样式 */
.swiper-pagination-bullet-active {
width: 12.5vw;
height:8vw;
opacity: 1;
}

/* 为每个分页按钮设置不同的背景 */
.swiper-pagination-bullet:nth-child(1) {
background: url(../images/nav01-o.png) no-repeat center center;background-size: 100% auto;
}

.swiper-pagination-bullet:nth-child(2) {
background: url(../images/nav02-o.png) no-repeat center center;background-size: 100% auto;
}

.swiper-pagination-bullet:nth-child(3) {
background: url(../images/nav03-o.png) no-repeat center center;background-size: 100% auto;
}

.swiper-pagination-bullet:nth-child(4) {
background: url(../images/nav04-o.png) no-repeat center center;background-size: 100% auto;
}

.swiper-pagination-bullet:nth-child(5) {
background: url(../images/nav05-o.png) no-repeat center center;background-size: 100% auto;
}

.swiper-pagination-bullet:nth-child(6) {
background: url(../images/nav06-o.png) no-repeat center center;background-size: 100% auto;
}

.slide1 img{width:67vw;}
.slide2{position: relative;}
.m2-jt{width:3vw;height:2vw;position: absolute;bottom:2vw;cursor: pointer;}
.m2-jt img{width:100%;height: 100%;}
.m2-jt-b{width:3vw;height:2vw;position: absolute;bottom:2vw;cursor: pointer;display: none;}
.m2-jt-b img{width:100%;height: 100%;transform: rotate(180deg);}
.m2-1{width:81vw;overflow: hidden;}
.m2-1 li{width:25vw;float: left;margin: 0 1vw;text-align: center;}
.m2-1 li img{width:20vw;height:26vw;border: 0.3vw double #703515;}
.m2-1 li p:nth-child(2){font-size: 1.3vw;font-weight: bold;line-height:1.8vw;padding: 0.5vw 0;}
.m2-1 li p:nth-child(3){font-size: 0.9vw;line-height: 1.5vw;text-align: left;}
.m2-2 {width:70vw;height:46vw;position: relative;display: none;}
/* m2-2内部swiper样式 */
.m2-2-swiper {
    width: 100%;
    height:44vw;
    overflow: hidden;
    position: relative;
}
.m2-2-swiper .m2-2-wrapper {
    display: flex;
    width: 100%;
    height: 40vw;
    flex-shrink: 0;
}
.m2-2-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background:url(../images/m2-2-bg.png);
    background-size: 100% 100%;
    padding: 2vw;
    font-size: 1.2vw;
    line-height: 1.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* m2-2内部分页器样式 */
.m2-2-pagination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap:2vw;
    z-index: 10;
    justify-content: center;
    padding: 1vw;
}
.m2-2-pagination .m2-2-bullet {
    width: 10vw;
    height: 4vw;
    background: #6a4c3251;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:1.4vw;
    transition: all 0.3s;
    border-radius: 0.5vw;
    font-weight: bold;
    color: #703515;
}
.m2-2-pagination .m2-2-bullet.active {
    background: #6e3a0b97;
    color: #fff;
    font-size:1.8vw;
}

.tw01{font-size: 1vw;line-height: 1.6vw;padding: 1vw;}
.tw01 img{width:30vw;height: 20vw;float: left;margin-right: 2vw;}
.tw01 p{font-size: 1.4vw;line-height: 1.8vw;height:3vw;font-weight: bold;}
.jj{font-size:1.1vw;line-height:2vw;padding: 1vw;border-radius: 0.4vw;background: #c3b8a433;color:#284259;width:80vw;}
.m3-li-box{width:80vw;overflow: hidden;padding-top:1vw;}
.m3-li{width:38vw;height:15vw;float: left;margin:1vw;font-size: 0.8vw;background: url(../images/m2-2-bg.png) no-repeat center center;background-size: 100% 100%;padding-right:2vw;}
.m3-li img{width:20vw;height:15vw;float: left;margin-right:1.5vw;box-shadow: 0.2vw 0.4vw 0.5vw #491a0048;}
.m3-li p{font-size: 1.1vw;line-height: 1.5vw;font-weight: bold;padding:1vw 0;}

#demo{width:160vh;height:70vh;padding-top:2vw;margin: 0 auto;}
#demo img{width:72vh; height:62vh;}
#demo li{float:left;position:relative;width:9.2vh;height:62vh;overflow:hidden;transition:0.5s; transform-origin:bottom;}
#demo li img{transition:1.2s;}
#demo li.active{ z-index:3;width:130vh;filter:alpha(opacity=100);opacity:1;background: #402c1821;}
#demo li.active img{transform:translate(0px);}
#demo li:nth-of-type(1){transform-origin:bottom left;}
#demo li:nth-of-type(5){transform-origin:bottom right;}
#demo li .demo-bt{width:9vh;height:62vh;background:linear-gradient(0deg,#133d4fcf,#a36917e2);color: #fff;font-weight: bold;writing-mode: vertical-rl;text-align: center;font-size:1.7vw;line-height:9vh;font-family: "宋体",sans-serif;float: left;}
#demo li .demo-tw{width:120vh;float: left;font-size:0.8vw;line-height: 1.4vw;padding:2vw;}
#demo li .demo-tw img{width:30vw;height:20vw;float: left;margin-right:2vw;}
#demo li .demo-tw p{font-size: 1.2vw;line-height:2vw;height:3vw;font-weight: bold;}
.mtlink{width:60vw;height: 3vw;}
.mtlink a{display: block;width:10vw;height:3vw;float: left;text-align: center;line-height: 3vw;font-size: 1.2vw;color: #703515;background:linear-gradient(80deg,#28729181,#133d4fa8);margin:0 2vw;border-radius: 0.5vw;color: #fff;}
.m5-tw{width:80vw;overflow: hidden;}
.m5-l{width:38vw;overflow: hidden;float: left;}
.m5-l img{width:38vw;height:27vw;}
.m5-l p{font-size:0.9vw;line-height:1.5vw;padding: 0.5vw 0;text-align:center;}
.m5-r{width:40vw;overflow: hidden;float:right;}
.m5-r li{width:40vw;height: 10vw;font-size:0.9vw;line-height:1.5vw;margin-bottom: 1vw;}
.m5-r li img{width:15vw;height:10vw;float: left;margin-right: 1vw;}
.m6{width:75vw;height:80vh;overflow: hidden;}
.m6-l{width:48vw;height:78vh;overflow: hidden;float: left;background: #ffffff90;box-shadow: 0.2vw 0.4vw 0.5vw #491a0024;padding: 2vw;overflow-y: auto;}
.m6-l li{font-size: 0.8vw;line-height:1.2vw;padding:0 0 0 0.5vw;border-left: 0.3vw solid #133d4fa8;margin-bottom: 1vw;}
.m6-l li p{font-weight: bold;font-size:1vw;color:#72320d;line-height:1vw;padding-bottom:0.4vw;}

/* 手写识别功能样式 */
.m6-r{width:25vw;height:78vh;overflow-y:auto;overflow-x:visible;float:right;background:#ffffff90;box-shadow:0.2vw 0.4vw 0.5vw #491a0024;padding:2vw;}
.handwriting-container{display:flex;flex-direction:column;align-items:center;gap:1vw;position:relative;z-index:10;}
.canvas-wrapper{position:relative;width:80%;aspect-ratio:1/1;border:0.2vw solid #ccc;border-radius:0.5vw;background:#fff;overflow:hidden;-webkit-user-select:none;user-select:none;}
#handwritingCanvas{width:100%;height:100%;cursor:crosshair;display:block;position:relative;z-index:20;outline:none;display:block;}
.canvas-hint{text-align:center;font-size:0.9vw;color:#666;padding:0.3vw 0;margin:0;pointer-events:none;position:relative;z-index:5;}
.char-actions{display:flex;gap:0.8vw;width:100%;justify-content:center;}
.btn-char{padding:0.6vw 1.8vw;font-size:0.95vw;border:none;border-radius:0.4vw;cursor:pointer;transition:all 0.2s ease;font-family:'Microsoft YaHei',Arial,sans-serif;font-weight:bold;}
.btn-confirm-char{color:#fff;background:linear-gradient(135deg,#2e7d32,#43a047);box-shadow:0.1vw 0.3vw 0.5vw rgba(46,125,50,0.3);}
.btn-confirm-char:hover{transform:translateY(-0.1vw);box-shadow:0.2vw 0.5vw 0.8vw rgba(46,125,50,0.5);}
.btn-rewrite-char{color:#fff;background:linear-gradient(135deg,#c62828,#e53935);box-shadow:0.1vw 0.3vw 0.5vw rgba(198,40,40,0.3);}
.btn-rewrite-char:hover{transform:translateY(-0.1vw);box-shadow:0.2vw 0.5vw 0.8vw rgba(198,40,40,0.5);}
.btn-char:active{transform:translateY(0);}
.nickname-area{width:100%;display:flex;align-items:center;gap:1vw;}
.nickname-label{font-size:0.9vw;color:#333;white-space:nowrap;margin:0;font-weight:bold;}
#nicknameInput{flex:1;padding:0.4vw 0.8vw;border:0.15vw solid #ddd;border-radius:0.3vw;font-size:0.9vw;background:#f9f9f9;color:#333;font-family:'Microsoft YaHei',Arial,sans-serif;outline:none;transition:border-color 0.2s ease;}
#nicknameInput:focus{border-color:#d4af37;}
#nicknameInput::placeholder{color:#aaa;}
#recognitionResult{flex:1;padding:0.4vw 0.8vw;border:0.15vw solid #ddd;border-radius:0.3vw;font-size:0.9vw;background:#f9f9f9;color:#333;font-family:'Microsoft YaHei',Arial,sans-serif;outline:none;transition:border-color 0.2s ease;resize:none;line-height:1.5;height:6vh;}
#recognitionResult:focus{border-color:#d4af37;}
#recognitionResult::placeholder{color:#aaa;}
.btn-delete-char{padding:0.6vw 1.8vw;font-size:0.95vw;border:none;border-radius:0.4vw;cursor:pointer;color:#fff;background:linear-gradient(135deg,#e65100,#f57c00);box-shadow:0.1vw 0.3vw 0.5vw rgba(230,81,0,0.3);transition:all 0.2s ease;font-family:'Microsoft YaHei',Arial,sans-serif;font-weight:bold;white-space:nowrap;}
.btn-delete-char:hover{transform:translateY(-0.1vw);box-shadow:0.2vw 0.5vw 0.8vw rgba(230,81,0,0.5);}
.btn-delete-char:active{transform:translateY(0);}
.btn-delete-char:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.btn-recognize{padding:0.8vw 2.5vw;font-size:1vw;color:#fff;background:linear-gradient(135deg,#8b6914,#d4af37);border:none;border-radius:0.5vw;cursor:pointer;transition:all 0.3s ease;box-shadow:0.2vw 0.4vw 0.8vw rgba(139,105,20,0.3);font-family:'Microsoft YaHei',Arial,sans-serif;font-weight:bold;margin-top:0.5vw;}
.btn-recognize:hover{transform:translateY(-0.2vw);box-shadow:0.3vw 0.6vw 1.2vw rgba(139,105,20,0.5);}
.btn-recognize:active{transform:translateY(0);}