/* ============================================================
   样式重置 
   ============================================================ */
* { box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; outline: none; }
body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
ul, dl, ol { list-style: none; }
img, fieldset, input[type="submit"] { border: 0 none; }
img { display: inline-block; overflow: hidden; vertical-align: top; width: 100%; }
em { font-style: normal; }
strong { font-weight: bolder; }
table { border-collapse: collapse; border-spacing: 0; }
button, input { cursor: pointer; border: 0 none; -webkit-appearance: none; appearance: none; border-radius: 0; }
textarea { word-wrap: break-word; resize: none; }
/* word-wrap for opera, resize for webkit */
menu { margin: 0; padding: 0; }
body { margin: 0 auto; -webkit-user-select: none; -webkit-text-size-adjust: none !important; font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Arial", sans-serif, Droidsansfallback; font-size: 0.26rem; font-weight: 400; background: #fff; color: #333; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
input, textarea { font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Arial", sans-serif, Droidsansfallback; font-weight: 400; }
input[type="number"] { -webkit-user-select: text; }
a, button, input { -webkit-touch-callout: none; }
/* 1.ios 长按时不触发系统的菜单 2.禁止长按时下载图片 */
input, select, textarea { outline: none; background: none; font-weight: 400; }
/* input { -webkit-appearance: none; } */
/* 去除android4.0以下 a/button/input标签被点击时产生的边框 因为边框引起了不少bug */
a, button, input, select, li { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* Android4.0下不识别选择器-webkit-transform-3d 使用它可做Android4.0下版本兼容 */
@media all and (-webkit-transform-3d) {
/* android4.0+ ios4+ 恢复按钮被点击时产生的效果 */
    /*a,button,input{-webkit-tap-highlight-color:rgba(130,130,130,.52);}*/
a,  button,  input,  select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; outline: none; }
}
a { text-decoration: none; }
.fl { float: left; }
.fr { float: right; }
/*弹性盒子*/
.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.flex-v { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.flex-align-top { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: center; align-items: flex-start; }
.flex-align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.flex-pack-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.flex-pack-justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.flex-space-around { -webkit-justify-content: space-around; justify-content: space-around; }
.flex-space-between { -webkit-justify-content: space-between; justify-content: space-between; }
.hor-view { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row }
.ver-view { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column }
.hor-gap { width: 1px; height: 100%; line-height: 0 }
.ver-gap { height: 1px; width: 100%; line-height: 0 }
/*弹性盒子*/
.between { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between }
.center { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center }
.start { display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start }
.end { display: flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: flex-end }
.middle { display: flex; display: -webkit-flex; -webkit-align-items: center; align-items: center; }
.v-bottom { display: flex; display: -webkit-flex; -webkit-align-items: flex-end; align-items: flex-end; }
.v-baseline { display: flex; display: -webkit-flex; -webkit-align-items: baseline; align-items: baseline; }
.col { display: flex; display: -webkit-flex; -webkit-flex-direction: column; flex-direction: column; }
.row { display: flex; display: -webkit-flex; -webkit-flex-direction: row; flex-direction: row; }
.nowrap { -webkit-flex-wrap: nowrap; -webkit-box-lines: single; -moz-flex-wrap: nowrap; flex-wrap: nowrap; }
.wrap { -webkit-flex-wrap: wrap; -webkit-box-lines: single; -moz-flex-wrap: wrap; flex-wrap: wrap; }
.fn-hide { display: none }
.clearfix:after, .clearfix:before { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
.clearfix {  *zoom: 1;
}

::-moz-placeholder {
 color: #777;
 font-size: 0.3rem;
}

::-webkit-input-placeholder {
 color: #777;
 font-size: 0.3rem;
}

:-ms-input-placeholder {
 color: #777;
 font-size: 0.3rem;
}
.text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide-text-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.midcenter { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
html { overflow-y: auto; overflow-x: hidden; height: 100%; max-width: 750px; margin: 0 auto; }
body { max-width: 750px; min-height: 100%; box-sizing: border-box; margin: 0 auto; overflow: hidden; -webkit-overflow-scrolling: touch; position: relative; }
.page { background:RGBA(60, 162, 237, 1); position: relative; }
@font-face {font-family: 'hsuhei';src: url(https://image.360eol.com/Qiniu_Files/Files/2026/10/nanhua/AlimamaShuHeiTi-Bold.ttf)}
.top{ position: absolute; top:0;left:0;right:0; z-index: 2;}
.bottom{ position: absolute; bottom:0;left:0;right:0;z-index: 2;}
.main {position: absolute;top:8.9rem; bottom:3.6rem;left:0;right:0; background: url('https://image.360eol.com/Qiniu_Files/Files/2026/10/nanhua/bg.png') top no-repeat; background-size: cover;z-index: 1;}   
.content { position: relative; z-index: 10;padding: 1.08rem 0.3rem 0.2rem;}

.logo{ margin: 0 auto; display: block; width: 3.18rem;}
.zt{ margin: 0 auto; display: block; width: 5.26rem; margin-top: 0.3rem;}



.foot{margin-top: 1.6rem;}
.copyright { position: relative; padding: 0.2rem 0.24rem; font-size: 0.26rem; font-weight: 400; color:#fff; line-height: 0.28rem; letter-spacing: 1px; text-align: center }
.copyright a {font-size: 0.18rem; color: rgba(255, 255, 255, 0.7); }


.works-list { margin-top: 5.28rem;display: flex; flex-wrap: wrap; justify-content: space-between; min-height:6rem; }
.works-list .item,.works-list .item_link {margin-top: .18rem;width: 3.38rem; position: relative;  text-align: center; display: block;}
.works-list img{ display: block;}
.works-list .tit{position: absolute;top:0.12rem; width: 100%;padding:0 0.32rem; bottom:0.12rem;left:0;right:0;display: flex; justify-content: center; align-items: center;font-size: 0.3rem;color: #00479D;
line-height: 0.34rem; font-family: 'hsuhei'; text-align: center;flex-direction: column;}
.works-list .tit span{  display: block; text-align: center; width: 100%;}
.tit-sub{ font-size: 0.22rem; margin-top: 0.08rem;}


/* 视频弹框 */
.video-mask { position: fixed; z-index: 100; background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; bottom:0;right:0; display: none; }
.video-mask .video-box { position: absolute;top:50%;left:0;right:0; margin: 0 auto; max-width: 750px;  transform: translateY(-50%);}
.video-mask .video-box .video-play { width: 100%; height: 4.12rem; border-radius: 0; }
.video-mask .video-box .video-title { font-size: 0.28rem; color: #fff; padding: 0.15rem 0; text-align: center; }
.video-mask .video-close { position: absolute; top: 50%; transform: translateY(-50%); right: -0.8rem; width: 0.56rem; cursor: pointer; }



/* 视频 */
.item-box2 { position: relative; z-index:2; padding-top:6rem; }
.zb_list { box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1); border-radius: 0.12rem; padding: 0.2rem; background:#fff }
.zb_list .viewbox1 { width: 100%; height: 4.12rem; position: relative; overflow: hidden }
.zb_list .viewbox1 img { width: 100%; height: 4.12rem; }
.zb_list .viewbox1 .bot { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; height: 0.6rem; background: rgba(0, 0, 0, 0.5); line-height: 0.6rem; padding: 0 0.24rem; font-size: 0.34rem; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb_list .viewbox1 .tag { position: absolute; z-index: 3; top: 0.14rem; left: 0.18rem; height: 0.45rem; line-height: 0.45rem; padding-left: 0.4rem; padding-right: 0.12rem; font-size: 0.24rem; color: #fff; background: #E02020 url(http://gkbimg.360eol.com/classrohttps://image.360eol.com/Qiniu_Files/Files/2026/05/pxc/zb3.png) 0.13rem center no-repeat; background-size: 0.18rem 0.17rem; border-radius: 0.08rem; }
.zb_list .viewbox1 .play { position: absolute; z-index: 2; background: url('https://image.360eol.com/Qiniu_Files/Files/2026/05/pxc/play.png') center center no-repeat; background-size:cover;width: 0.6rem; height:0.6rem; left:0.3rem; bottom:0.35rem }
.viewbox1 .video-play { width: 100%; height: 100%;}
.video-title { font-size: 0.28rem; padding: 0.1rem 0.2rem; }
.zb_list iframe { width: 100%; height: 100%; border-width: 0 }

/**适配**/
@media screen and (min-width:320px) {
html { font-size: 42.66px }
}
 @media screen and (min-width:360px) {
html { font-size: 48px }
}
 @media screen and (min-width:375px) {
html { font-size: 50px }
}
 @media screen and (min-width:384px) {
html { font-size: 51.2px }
}
 @media screen and (min-width:400px) {
html { font-size: 54px }
}
 @media screen and (min-width:414px) {
html { font-size: 54px }
}
 @media screen and (min-width:424px) {
html { font-size: 56.54px }
}
 @media screen and (min-width:480px) {
html { font-size: 64px }
}
 @media screen and (min-width:540px) {
html { font-size: 72px }
}
 @media screen and (min-width:640px) {
html { font-size: 85.32px }
}
 @media screen and (min-width:720px) {
html { font-size: 96px }
}
 @media screen and (min-width:750px) {
html { font-size: 100px }
}
 @media only screen and (device-width: 375px) and (device-height: 667px) {
}

/* x/xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}

/* xs max/xr/11 */
@media only screen and (device-width: 414px) and (device-height: 896px) {
}
 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
}
 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
}

/* 屏幕宽度在690到720之间的适配 */
@media screen and (min-width: 690px) and (max-width: 720px) {
    .item-box {
        padding-top: 6rem;
    }
}
@media screen and (min-width: 640px) and (max-width: 660px) {
    .item-box {
        padding-top: 5.6rem;
    }
}
@media screen and (min-width: 620px) and (max-width: 639px) {
    .item-box {
        padding-top: 6.3rem;
    }
}
@media screen and (min-width: 600px) and (max-width: 619px) {
    .item-box {
        padding-top: 6.2rem;
    }
}
@media screen and (min-width: 580px) and (max-width: 600px) {
    .item-box {
        padding-top: 6rem;
    }
}

@media screen and (min-width: 560px) and (max-width: 580px) {
    .item-box {
        padding-top: 5.8rem;
    }
}
@media screen and (min-width: 520px) and (max-width: 540px) {
    .item-box {
        padding-top: 6rem;
    }
}
@media screen and (min-width: 450px) and (max-width: 478px) {
    .item-box {
        padding-top: 6rem;
    }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
    .item-box {
        padding-top: 5.5rem;
    }
}