/*
	DESTOON Copyright (C)2008-2099 www.destoon.com
	This is NOT a freeware,Use is subject to license.txt
*/
/* article && quote*/
.top-l {width:440px;float:left;margin-right:10px;}
.top-r {width:440px;float:right;}
.headline h2 {text-align:center;font-size:22px;margin:10px 16px 0 16px;height:48px;line-height:48px;overflow:hidden;}
.subline {padding:0 24px;}
.subline li {height:32px;line-height:32px;overflow:hidden;font-size:14px;}
.subline .f_r {font-size:12px;color:#999999;padding-left:16px;font-style:normal;float:right;}
.keytags {font-size:14px;padding:16px 24px;}
/* catlist */
.childlist {padding:10px;line-height:24px;}
.childlist li {font-size:14px;height:28px;line-height:28px;background:url('li_dot.gif') no-repeat 4px 12px;padding:0 10px 0 12px;overflow:hidden;}

.catlist {padding:24px;}
.catlist li {font-size:16px;height:36px;line-height:36px;background:url('li_dot.gif') no-repeat 6px center;padding:0 16px;overflow:hidden;}
.catlist i {font-style:normal;float:right;font-size:12px;color:#666666;}
.catlist .sp {background:#FFFFFF url('dot.gif') repeat-x 0 center;}

.subtitle {padding:10px 16px;margin:20px 0;line-height:32px;font-size:14px;border:#EEEEEE 1px solid;background:#FAFAFA;overflow:hidden;}
.subtitle li {width:50%;height:32px;overflow:hidden;float:left;}

.cate-list {background:#F6F6F6;overflow:hidden;width:900px;z-index:3;position:relative;}
.cate-box {width:440px;background:#FFFFFF;margin:10px 10px 0 0;float:left;border-radius:10px;}

/* Responsive layout for Destoon article/news pages. Desktop remains unchanged. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {background:#F6F6F6;}
  .m,
  .head_m {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .m0 {min-width:0;}
  .head {position:static;height:36px;}
  .head_s,
  .head_l,
  .head_r {display:none;}
  .head_m {height:36px;padding:0 8px;position:relative;}
  .head_service_phone {
    left: 50% !important;
    top: 2px !important;
    max-width: calc(100% - 24px);
  }
  .head_service_phone a {max-width:100%;font-size:17px !important;}
  #destoon-fixon > .m {min-height:68px;}
  .logo {float:none;width:100%;height:68px;text-align:center;}
  .logo img {
    display: block;
    width: auto;
    max-width: calc(100% - 32px);
    height: 56px;
    margin: 6px auto;
    object-fit: contain;
  }
  #destoon-search {display:none;}
  .menu {
    height: auto;
    line-height: 40px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .menu ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  .menu li {float:none;min-width:0;text-align:center;}
  .menu li:nth-child(n + 9) {display:none;}
  .menu .menuon {margin-left:0;}
  .menu a:link,
  .menu a:visited,
  .menu a:active {
    display: block;
    height: 40px;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nav {
    height: auto;
    min-height: 24px;
    padding: 9px 10px 9px 30px;
    background-position: 9px 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nav i {padding:0 3px;}
  .m3 {background:#FFFFFF;}
  .m3l {float:none;width:100%;}
  .m3r {display:none;}
  .top-l,
  .top-r {
    float: none;
    width: 100%;
    margin: 0;
  }
  .top-r {padding-top:12px;}
  .slide {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 86 / 65;
    contain: layout paint;
  }
  .slide > div {width:100% !important;max-width:100%;box-sizing:border-box;}
  .slide > ul {
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .slide > ul > li {
    display: none !important;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
  }
  .slide > ul > li:first-child {display:block !important;}
  .slide > ul > li > a,
  .slide > ul > li img {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  .slide > ul > li img {object-fit:cover;}
  .top-r .headline h2 {
    height: auto;
    min-height: 48px;
    margin: 0 14px;
    line-height: 1.5;
  }
  .top-r .subline {padding:0 14px 10px;}
  .m3l > table,
  .m3l > table > tbody {
    display: block;
    width: 100% !important;
  }
  .m3l > table > tbody > tr {
    display: flex;
    width: 100%;
    gap: 10px;
  }
  .m3l > table > tbody > tr > td {
    display: block;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }
  .m3l > table > tbody > tr > td:nth-child(2) {display:none;}
  .title {
    padding: 18px 14px 12px;
    font-size: 21px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .info {margin:0 12px;padding:10px 12px;line-height:22px;}
  .info .f_r {display:none;}
  .info i {display:inline-block;margin-right:10px;}
  .introduce {
    margin: 12px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }
  .content {
    padding: 14px;
    font-size: 16px;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  .content p {margin:0 0 1em;}
  .content h1,
  .content h2,
  .content h3,
  .content h4 {margin:22px 0 10px;overflow-wrap:anywhere;}
  .content h1,
  .content h2 {font-size:20px;}
  .content h3 {font-size:18px;}
  .content h4 {font-size:16px;}
  .content img,
  .content video,
  .content iframe {max-width:100% !important;height:auto !important;}
  .content table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }
  .content table td,
  .content table th {
    width: auto !important;
    padding: 6px;
    overflow-wrap: anywhere;
  }
  .property {margin:0 12px;}
  .property li {float:none;width:100%;height:auto;}
  .subtitle {margin:14px 12px;padding:10px 12px;}
  .subtitle li {float:none;width:100%;height:auto;}
  .keytags {padding:12px 14px;line-height:2;}
  .keytags a {display:inline-block;margin-right:6px;}
  .tool {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 4px;
    padding: 20px 12px;
  }
  .tool i {
    display: block;
    height: 26px;
    padding: 0;
    line-height: 26px;
    background-position: 4px center;
    background-size: 18px 18px;
  }
  .head-txt {margin:0 12px;}
  .related {padding:8px 14px 18px;}
  .related table,
  .related tbody,
  .related tr,
  .related td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .related td {
    min-height: 0;
    padding: 6px 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
  .related a {
    display: block;
    line-height: 1.7;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    text-overflow: clip;
  }
  .foot_page {
    height: auto;
    padding: 18px 14px 0;
    line-height: 2;
    overflow: visible;
  }
  .foot {padding-bottom:0;}
  #copyright {padding:14px;line-height:1.8;overflow-wrap:anywhere;}
}

@media (max-width: 360px) {
  .menu ul {grid-template-columns:repeat(3, minmax(0, 1fr));}
  .m3l > table > tbody > tr {display:block;}
  .m3l > table > tbody > tr > td {width:100% !important;}
}