/* ================================================
   Shenzhen Yansuan Technology - new global style (1600px main container)
   ================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;font-size:14px;color:#333;background:#f0f3f8;}
a{color:#0a66d1;text-decoration:none;-webkit-transition:color .2s ease;transition:color .2s ease;}
a:hover{color:#e3482a;}
img{border:0;max-width:100%;}
ul,li{list-style:none;}
h1,h2,h3,h4,h5{font-weight:normal;}
.clear{clear:both;}
.wrap{width:1600px;margin:0 auto;}

/* ---------- top bar ---------- */
.topbar{background:linear-gradient(90deg,#101c3a,#1a2f5e 55%,#101c3a);color:#b7c4e0;font-size:12px;line-height:36px;overflow:hidden;}
.topbar .wrap{position:relative;overflow:hidden;}
.topbar .tleft{float:left;}
.topbar .tright{float:right;}
.topbar a{color:#b7c4e0;}
.topbar a:hover{color:#fff;}

/* ---------- header main ---------- */
.head_main{background:#fff;border-bottom:1px solid #e3e9f2;padding:20px 0;box-shadow:0 2px 10px rgba(20,40,90,.05);overflow:hidden;}
.head_main .wrap{overflow:hidden;}
.logo{float:left;margin-right:24px;}
.logo img{height:60px;}
.slogan{float:left;padding-top:9px;}
.slogan h1{font-size:26px;color:#132a5e;letter-spacing:1px;}
.slogan p{font-size:13px;color:#8a94a8;margin-top:5px;letter-spacing:.5px;}
.search{float:right;margin-top:12px;}
.search input[type=text]{width:260px;height:38px;border:1px solid #c7d2e4;padding:0 14px;font-size:13px;border-radius:4px 0 0 4px;outline:none;-webkit-transition:border-color .2s ease;transition:border-color .2s ease;}
.search input[type=text]:focus{border-color:#0a66d1;}
.search input[type=submit]{height:38px;border:0;background:linear-gradient(180deg,#1d7ae8,#0a66d1);color:#fff;padding:0 22px;cursor:pointer;font-size:14px;border-radius:0 4px 4px 0;}
.search input[type=submit]:hover{background:linear-gradient(180deg,#2a88f5,#1560c0);}
.hotline{float:right;margin-right:36px;margin-top:6px;text-align:right;font-size:12px;color:#8a94a8;line-height:20px;}
.hotline strong{font-size:24px;color:#e3482a;letter-spacing:1px;}

/* ---------- main menu ---------- */
.menu{background:linear-gradient(90deg,#0a66d1,#1468c8 50%,#0a58b0);height:50px;line-height:50px;box-shadow:0 3px 8px rgba(10,90,200,.25);}
.menu .wrap>ul>li{float:left;position:relative;}
.menu .wrap>ul>li>a{display:block;padding:0 40px;color:#fff;font-size:16px;background:transparent;-webkit-transition:background .2s ease;transition:background .2s ease;}
.menu .wrap>ul>li.on>a,.menu .wrap>ul>li>a:hover{background:rgba(255,255,255,.16);}
.menu .wrap>ul>li .sub{display:none;position:absolute;top:50px;left:0;background:#114f96;z-index:999;border-radius:0 0 6px 6px;box-shadow:0 8px 20px rgba(10,50,120,.3);min-width:180px;}
.menu .wrap>ul>li.parent:hover .sub{display:block;}
.menu .wrap>ul>li .sub a{display:block;padding:0 28px;color:#d5e4f7;line-height:44px;border-bottom:1px solid rgba(255,255,255,.08);}
.menu .wrap>ul>li .sub a:last-child{border-bottom:0;}
.menu .wrap>ul>li .sub a:hover{background:rgba(255,255,255,.14);color:#fff;}

/* ---------- banner ---------- */
.banner_box{background:#0e1f45;}
.banner{position:relative;width:100%;min-height:440px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.banner .banner_ul{width:100%;}
.banner .banner_ul li{display:none;width:100%;}
.banner .banner_ul li:first-child{display:block;}
.banner .banner_ul li a{display:block;text-align:center;}
.banner .banner_ul img{max-width:100%;height:auto;display:inline-block;vertical-align:middle;}
.banner .banner_nav{position:absolute;bottom:20px;left:0;right:0;text-align:center;}
.banner .banner_nav a{display:inline-block;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);margin:0 6px;-webkit-transition:background .2s ease;transition:background .2s ease;}
.banner .banner_nav a.on{background:#fff;}
.banner .prev,.banner .next{position:absolute;top:50%;margin-top:-30px;width:44px;height:60px;background:rgba(0,0,0,.35);color:#fff;font-size:42px;line-height:56px;text-align:center;display:none;border-radius:4px;-webkit-transition:background .2s ease;transition:background .2s ease;}
.banner:hover .prev,.banner:hover .next{display:block;}
.banner .prev:hover,.banner .next:hover{background:rgba(10,102,209,.75);}
.banner .prev{left:0;}
.banner .next{right:0;}

/* ---------- notice bar ---------- */
.notice_bar{background:#fff;border:1px solid #e3e9f2;margin:18px 0;height:44px;line-height:44px;overflow:hidden;border-radius:6px;box-shadow:0 2px 6px rgba(20,40,90,.04);}
.notice_bar .n_title{float:left;background:linear-gradient(180deg,#1d7ae8,#0a66d1);color:#fff;padding:0 20px;font-size:14px;}
.notice_bar .n_list{float:left;padding-left:18px;width:1400px;white-space:nowrap;overflow:hidden;}
.notice_bar .n_list a{color:#333;margin-right:30px;}
.notice_bar .n_list a:hover{color:#0a66d1;}

/* ---------- block title ---------- */
.block_title{height:44px;line-height:44px;border-bottom:2px solid #e3e9f2;margin-bottom:14px;position:relative;}
.block_title h3{float:left;font-size:19px;color:#132a5e;padding:0 14px;height:44px;border-bottom:3px solid #0a66d1;letter-spacing:1px;}
.block_title .more{float:right;color:#8a94a8;font-size:13px;}
.block_title .more:hover{color:#e3482a;}

/* ---------- homepage products ---------- */
.home_products{background:#fff;border:1px solid #e3e9f2;padding:20px;margin-bottom:20px;border-radius:8px;box-shadow:0 3px 10px rgba(20,40,90,.05);}
.product_grid{overflow:hidden;}
.product_grid .pcell{float:left;width:23%;margin-right:2.66%;text-align:center;padding:22px 0;border:1px solid #edf1f8;background:#fafbfe;border-radius:8px;-webkit-transition:all .25s ease;transition:all .25s ease;}
.product_grid .pcell:last-child{margin-right:0;}
.product_grid .pcell img{height:96px;margin-bottom:12px;}
.product_grid .pcell span{display:block;font-size:16px;color:#132a5e;letter-spacing:1px;}
.product_grid .pcell:hover{border-color:#0a66d1;box-shadow:0 8px 22px rgba(10,102,209,.18);-webkit-transform:translateY(-4px);transform:translateY(-4px);}
.product_grid .pcell:hover span{color:#0a66d1;}

/* ---------- homepage 3 cols ---------- */
.home_cols{overflow:hidden;margin-bottom:20px;}
.home_cols .col{float:left;width:510px;background:#fff;border:1px solid #e3e9f2;padding:20px;border-radius:8px;box-shadow:0 3px 10px rgba(20,40,90,.05);}
.home_cols .col_mid{margin:0 35px;}
.col_list li{line-height:34px;border-bottom:1px dashed #e8edf5;overflow:hidden;padding:0 4px;}
.col_list li:last-child{border-bottom:0;}
.col_list li span{float:right;color:#a0a8b8;font-size:12px;}
.col_list li a{color:#333;font-size:14px;-webkit-transition:color .2s ease;transition:color .2s ease;}
.col_list li a:hover{color:#0a66d1;padding-left:4px;}
.about_box p{line-height:28px;color:#5a6478;font-size:14px;}
.about_box a{color:#0a66d1;}
.contact_box{line-height:28px;color:#5a6478;font-size:14px;}

/* ---------- inner page body ---------- */
.body{margin-top:18px;}
.crumb{background:#fff;border:1px solid #e3e9f2;padding:12px 18px;margin-bottom:16px;color:#8a94a8;font-size:13px;border-radius:6px;}
.crumb a{color:#0a66d1;}
.sidebar{float:left;width:280px;background:#fff;border:1px solid #e3e9f2;padding-bottom:18px;border-radius:8px;box-shadow:0 3px 10px rgba(20,40,90,.05);overflow:hidden;}
.side_title{background:linear-gradient(90deg,#132a5e,#1a3a7a);color:#fff;height:44px;line-height:44px;padding:0 20px;font-size:16px;letter-spacing:1px;}
.side_list li{border-bottom:1px solid #eef1f7;}
.side_list li a{display:block;padding:13px 22px;color:#333;font-size:14px;border-left:3px solid transparent;-webkit-transition:all .2s ease;transition:all .2s ease;}
.side_list li a:hover{border-left-color:#0a66d1;color:#0a66d1;background:#f5f9ff;padding-left:28px;}
.side_contact{padding:14px 18px;line-height:28px;color:#5a6478;font-size:13px;}

.main{float:right;width:1300px;background:#fff;border:1px solid #e3e9f2;border-radius:8px;margin-bottom:20px;box-shadow:0 3px 10px rgba(20,40,90,.05);overflow:hidden;}
.main_title{background:linear-gradient(90deg,#f0f5fd,#fafbfe);border-bottom:1px solid #e3e9f2;height:48px;line-height:48px;padding:0 22px;}
.main_title span{font-size:18px;color:#132a5e;border-left:4px solid #0a66d1;padding-left:12px;letter-spacing:1px;}
.main_content{padding:24px;line-height:1.9;font-size:14px;color:#333;}
.main_content p{margin-bottom:10px;}

/* ---------- list ---------- */
.list li{line-height:40px;border-bottom:1px dashed #e8edf5;overflow:hidden;padding:0 6px;}
.list li span{float:right;color:#a0a8b8;font-size:12px;line-height:40px;}
.list li a{color:#333;font-size:14px;-webkit-transition:color .2s ease;transition:color .2s ease;}
.list li a:hover{color:#0a66d1;padding-left:4px;}

/* ---------- channel list ---------- */
.channel_list .chan_item{margin-bottom:24px;}
.chan_item h2{border-left:4px solid #0a66d1;padding-left:12px;margin-bottom:10px;}
.chan_item h2 a{font-size:18px;color:#132a5e;}
.chan_item ul li{line-height:32px;border-bottom:1px dashed #eef1f7;}
.chan_item ul li span{float:right;color:#a0a8b8;font-size:12px;line-height:32px;margin-left:12px;}
.chan_item ul li a{color:#333;font-size:14px;}
.chan_item ul li a:hover{color:#0a66d1;}

/* ---------- article ---------- */
.news_title{text-align:center;border-bottom:1px solid #eef1f7;padding-bottom:16px;margin-bottom:18px;}
.news_title h1{font-size:23px;color:#132a5e;margin-bottom:12px;line-height:1.5;}
.news_title p{color:#a0a8b8;font-size:12px;line-height:24px;}
.news_body{line-height:32px;font-size:15px;color:#333;word-break:break-word;}
.news_body img{max-width:100%;height:auto;border-radius:6px;}
.news_body a{color:#0a66d1;}
.pre_next{margin-top:24px;padding-top:14px;border-top:1px solid #eef1f7;line-height:30px;color:#8a94a8;font-size:13px;}
.pre_next a{color:#0a66d1;}

/* ---------- pagination ---------- */
.page{width:100%;text-align:center;margin-top:20px;}
.page a,.page span{display:inline-block;border:1px solid #d8e0ec;padding:5px 12px;margin:0 4px;color:#555;font-size:13px;border-radius:4px;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff;}
.page a:hover,.page a.current{background:#0a66d1;color:#fff;border-color:#0a66d1;}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#16244d,#0d1733);color:#9fb0cc;margin-top:30px;padding:34px 0 30px;font-size:13px;border-top:4px solid #0a66d1;}
.footer .f_nav{text-align:center;margin-bottom:18px;color:#5b6b88;}
.footer .f_nav a{color:#c8d4e8;margin:0 8px;-webkit-transition:color .2s ease;transition:color .2s ease;}
.footer .f_nav a:hover{color:#fff;}
.footer .copyright{text-align:center;line-height:26px;}
.footer .copyright p{margin:2px 0;}
.footer a{color:#c8d4e8;}
.footer a:hover{color:#fff;}

/* ---------- 站内搜索 ---------- */
.srch-head{background:linear-gradient(180deg,#f6f9fe,#edf3fd);border:1px solid #e3e9f2;border-radius:8px;padding:18px 20px;margin-bottom:18px;}
.srch-form{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;}
.srch-form .srch-input{-webkit-box-flex:1;-ms-flex:1 1 320px;flex:1 1 320px;min-width:0;height:44px;line-height:44px;border:1px solid #c7d2e4;border-right:0;border-radius:6px 0 0 6px;padding:0 16px;font-size:14px;color:#333;background:#fff;outline:none;-webkit-transition:border-color .2s ease,box-shadow .2s ease;transition:border-color .2s ease,box-shadow .2s ease;}
.srch-form .srch-input:focus{border-color:#0a66d1;box-shadow:inset 0 0 0 1px #0a66d1;}
.srch-form .srch-select{height:44px;border:1px solid #c7d2e4;border-left:0;border-radius:0;padding:0 10px;font-size:14px;color:#556;background:#fff;outline:none;cursor:pointer;}
.srch-form .srch-btn{height:44px;border:0;border-radius:0 6px 6px 0;padding:0 34px;font-size:15px;color:#fff;letter-spacing:2px;cursor:pointer;background:linear-gradient(180deg,#1d7ae8,#0a66d1);-webkit-transition:background .2s ease,box-shadow .2s ease;transition:background .2s ease,box-shadow .2s ease;}
.srch-form .srch-btn:hover{background:linear-gradient(180deg,#2a88f5,#1560c0);box-shadow:0 6px 16px rgba(10,102,209,.28);}
.srch-list .item{border:1px solid #e9eef7;border-radius:8px;padding:16px 20px 12px;margin-bottom:14px;background:#fff;-webkit-transition:border-color .2s ease,box-shadow .2s ease,-webkit-transform .2s ease;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.srch-list .item:hover{border-color:#cfe0f7;box-shadow:0 8px 22px rgba(10,102,209,.1);-webkit-transform:translateY(-2px);transform:translateY(-2px);}
.srch-list .title h2{font-size:17px;line-height:26px;font-weight:bold;margin:0;}
.srch-list .title h2 a{color:#132a5e;-webkit-transition:color .2s ease;transition:color .2s ease;}
.srch-list .title h2 a:hover{color:#0a66d1;}
.srch-list .title font,.srch-list .description font{color:#e03131;font-weight:bold;font-style:normal;background:#fff3f3;border-radius:2px;padding:0 2px;}
.srch-list .description{margin-top:8px;}
.srch-list .description p{margin:0;color:#5b6478;font-size:14px;line-height:24px;word-break:break-all;}
.srch-list .info{margin-top:12px;padding-top:10px;border-top:1px dashed #e8edf5;color:#9aa4b6;font-size:12px;}
.srch-list .info span{color:#6b7789;}
.srch-notice{border:1px dashed #d8e0ec;border-radius:8px;background:#fafcff;padding:36px 20px;text-align:center;color:#8a94a8;font-size:14px;}

@media (max-width:768px){
  .srch-form .srch-input{-ms-flex-preferred-size:100%;flex-basis:100%;border-right:1px solid #c7d2e4;border-radius:6px;margin-bottom:10px;}
  .srch-form .srch-select{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border-left:1px solid #c7d2e4;border-radius:6px;margin-right:10px;}
  .srch-form .srch-btn{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border-radius:6px;}
}

/* ---------- responsive ---------- */
@media (max-width:1680px){
  .wrap{width:100%;padding:0 20px;padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right));}
  .banner{width:100%;min-height:300px;}
  .banner .banner_ul img{max-width:100%;height:auto;}
  .home_cols .col{width:33.0%;}
  .home_cols .col_mid{margin:0 0.4%;}
  .sidebar{width:24%;}
  .main{width:74.4%;}
  .notice_bar .n_list{width:auto;}
}
@media (max-width:1280px){
  .slogan h1{font-size:21px;}
  .search input[type=text]{width:180px;}
  .menu .wrap>ul>li>a{padding:0 26px;}
  .hotline{display:none;}
}
@media (max-width:900px){
  .logo{float:none;margin:0 auto 10px;text-align:center;}
  .logo img{height:50px;}
  .slogan{float:none;text-align:center;padding:0;margin-bottom:12px;}
  .search{float:none;text-align:center;margin:0 0 10px;}
  .hotline{display:none;}
  .topbar .tright{display:none;}
  .topbar .tleft{width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .menu{height:auto;line-height:44px;}
  .menu .wrap>ul>li{float:none;width:100%;text-align:center;}
  .menu .wrap>ul>li .sub{position:static;background:#114f96;border-radius:0;}
  .sidebar{float:none;width:100%;margin-bottom:14px;}
  .main{float:none;width:100%;}
  .home_cols .col{float:none;width:100%;margin:0 0 14px !important;}
  .product_grid .pcell{width:48%;margin:0 1% 10px;}
}

/* ================================================
   Mobile / tablet real-device adaptation
   ================================================ */
@media (max-width:1024px){
  .banner{min-height:240px;}
  .product_grid .pcell{width:48%;margin:0 1% 14px;}
  .main_content{padding:18px;}
  /* 平板触控目标与防 iOS 聚焦缩放 */
  .search input[type=text]{height:44px;font-size:16px;}
  .search input[type=submit]{height:44px;}
  .banner .banner_nav a{width:16px;height:16px;position:relative;}
  .banner .banner_nav a::after{content:"";position:absolute;top:-14px;left:-14px;right:-14px;bottom:-14px;}
  .page a,.page span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;line-height:1;box-sizing:border-box;}
  /* 堆叠触屏导航：不依赖 hover，子栏目常显可达 */
  .menu{height:auto;line-height:1;}
  .menu .wrap>ul>li{float:none;width:100%;text-align:left;border-bottom:1px solid rgba(255,255,255,.10);}
  .menu .wrap>ul>li:last-child{border-bottom:0;}
  .menu .wrap>ul>li>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:48px;padding:0 18px;font-size:16px;}
  .menu .wrap>ul>li .sub{display:none;position:static;top:auto;left:auto;background:#0d4179;border-radius:0;box-shadow:none;min-width:0;}
  .menu .wrap>ul>li.parent:focus-within .sub{display:block;}
  .menu .wrap>ul>li.parent>a::after{content:"\25BE";margin-left:6px;opacity:.7;}
  .menu .wrap>ul>li .sub a{padding:12px 34px;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.06);}
  .menu .wrap>ul>li .sub a:last-child{border-bottom:0;}
}

@media (max-width:768px){
  body{font-size:15px;}
  .wrap{padding:0 14px;padding-left:max(14px, env(safe-area-inset-left));padding-right:max(14px, env(safe-area-inset-right));}

  /* header */
  .head_main{padding:14px 0 12px;}
  .logo img{height:44px;}
  .slogan h1{font-size:20px;letter-spacing:0;}
  .slogan p{font-size:12px;}
  .search{float:none;text-align:center;margin:0 auto 10px;}
  .search form{display:flex;width:100%;max-width:420px;margin:0 auto;}
  .search input[type=text]{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:auto;min-width:0;height:44px;font-size:16px;}
  .search input[type=submit]{height:44px;font-size:15px;padding:0 18px;}
  .hotline{display:block;float:none;margin:8px auto 0;width:-webkit-max-content;width:max-content;max-width:100%;text-align:center;font-size:13px;line-height:22px;}
  .hotline strong{font-size:22px;}

  /* banner */
  .banner{min-height:0;}
  .banner .banner_nav{bottom:8px;}
  .banner .banner_nav a{width:16px;height:16px;margin:0 8px;position:relative;}
  .banner .banner_nav a::after{content:"";position:absolute;top:-14px;left:-14px;right:-14px;bottom:-14px;}
  .banner .prev,.banner .next{display:none;}

  /* notice bar */
  .notice_bar{height:auto;line-height:1.6;padding:8px 10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
  .notice_bar .n_title{float:none;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;white-space:nowrap;padding:0 12px;font-size:13px;line-height:30px;border-radius:4px;}
  .notice_bar .n_list{float:none;width:auto;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;padding-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .notice_bar .n_list a{margin-right:16px;}

  /* homepage blocks */
  .home_products{padding:14px;}
  .product_grid .pcell{width:48%;margin:0 1% 12px;padding:16px 6px;}
  .product_grid .pcell img{height:72px;}
  .product_grid .pcell span{font-size:14px;letter-spacing:0;}
  .block_title h3{font-size:17px;padding:0 10px;}
  .block_title .more{font-size:13px;}
  .home_cols .col{padding:16px;}

  /* body: content before sidebar (touch reachability) */
  .body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}
  .body>*{min-width:0;}
  .main{float:none;width:100%;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;}
  .sidebar{float:none;width:100%;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-bottom:14px;}
  .crumb{padding:10px 12px;font-size:13px;}
  .main_title{height:auto;line-height:1.5;padding:12px 14px;}
  .main_title span{font-size:16px;}
  .main_content{padding:14px;line-height:1.8;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;}
  .main_content img{max-width:100%;height:auto;}
  .main_content table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .main_content iframe,.main_content embed,.main_content video{max-width:100%;}

  /* list rows: title above date, no float squeeze */
  .list li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;line-height:1.5;padding:10px 4px;}
  .list li span{float:none;line-height:1.4;font-size:12px;}
  .chan_item ul li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;line-height:1.5;padding:8px 0;}
  .chan_item ul li span{float:none;line-height:1.4;margin-left:0;}
  .col_list li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;line-height:1.5;padding:8px 4px;}
  .col_list li span{float:none;line-height:1.4;}

  /* article */
  .news_title h1{font-size:19px;}
  .news_body{line-height:1.9;}

  /* pagination: >=44px touch targets */
  .page{margin-top:16px;}
  .page a,.page span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;font-size:14px;margin:0 3px;line-height:1;box-sizing:border-box;}

  /* footer */
  .footer{margin-top:20px;padding:22px 0;padding-bottom:calc(22px + env(safe-area-inset-bottom));}
  .footer .f_nav a{display:inline-block;margin:4px 6px;}
  .footer .copyright{line-height:22px;font-size:12px;}

  /* site search */
  .srch-head{padding:14px;}
  .srch-list .item{padding:14px 14px 10px;}
  .srch-list .title h2{font-size:16px;}
  .srch-notice{padding:26px 16px;}
}

@media (max-width:480px){
  .wrap{padding:0 12px;padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));}
  .slogan h1{font-size:18px;}
  .menu .wrap>ul>li>a{padding:0 14px;font-size:15px;min-height:44px;}
  .menu .wrap>ul>li .sub a{padding:11px 28px;}
  .product_grid .pcell{width:48%;margin:0 1% 10px;}
  .product_grid .pcell img{height:72px;}
  .main_content{padding:12px;font-size:14px;}
  .news_title h1{font-size:18px;}
  .page a,.page span{min-width:44px;min-height:44px;padding:0 8px;margin:0 2px;}
  .srch-form .srch-input{-ms-flex-preferred-size:100%;flex-basis:100%;border-right:1px solid #c7d2e4;border-radius:6px;margin-bottom:10px;}
  .srch-form .srch-select{-webkit-box-flex:1;-ms-flex:1 1 40%;flex:1 1 40%;border-left:1px solid #c7d2e4;border-radius:6px;margin-right:8px;}
  .srch-form .srch-btn{-webkit-box-flex:1;-ms-flex:1 1 40%;flex:1 1 40%;border-radius:6px;}
}

/* 触屏设备：抵消依赖 hover 的交互 */
@media (hover:none){
  .menu .wrap>ul>li.parent:focus-within .sub{display:block;}
  .banner:hover .prev,.banner:hover .next{display:none;}
  .product_grid .pcell:hover{-webkit-transform:none;transform:none;}
  .side_list li a:hover{padding-left:22px;}
}