/* 响应式设计 - 移动端适配 */

/* 基础响应式设置 */
@charset "utf-8";

/* 视口设置 */
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

/* 媒体查询断点 */
/* 小型设备（手机，768px 以下） */
@media only screen and (max-width: 1108px) {
  /* 隐藏右侧飘窗广告 */
  .div2, #float2 {
    display: none !important;
  }
  
  /* 基础样式调整 */
  body {
    font-size: 14px;
    line-height: 24px;
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* 布局容器调整 */
  .wid1000, .wid1200, .index_banner, .index_content ul, 
  .index_content1, .index_news ul, .zy_content, #menu {
    width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* 头部样式调整 */
  .index_head {
    height: auto;
    padding: 10px 0;
  }

  .index_head ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .index_head ul li {
    float: none;
    width: auto !important;
    height: auto !important;
    margin: 5px;
  }

  /* 搜索框调整 */
  .index_head ul li[style*="float:right; width:230px"] {
    width: 100% !important;
    margin: 10px 0;
  }

  .index_head ul li input[type="text"] {
    width: calc(100% - 80px) !important;
  }

  /* Logo调整 */
  .index_head ul li img[height="111"] {
    height: auto;
    max-height: 80px;
  }


  /* 导航菜单调整 */
  .index_nav {
    height: auto;
  }

  #menu {
    height: auto;
    position: relative;
  }

  #nav {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
  }

  #nav .mainlevel {
    width: 100% !important;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #013d8f;
  }

  #nav .mainlevel a {
    height: 45px;
    line-height: 45px;
  }

  /* 子菜单样式优化 */
  #nav .mainlevel ul {
    position: static !important;
    width: 100% !important;
    display: none;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 100 !important;
  }

  #nav .mainlevel ul.sub_nav_01 {
    position: static !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(102, 163, 244, 0.95) !important;
  }
  
  /* 确保子菜单显示时的样式 */
  #nav .mainlevel ul.sub_nav_01[style*="display: block"] {
    max-height: 500px !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  #nav .mainlevel li {
    width: 100%;
    height: auto !important;
    padding: 0 !important;
    transition: background-color 0.2s ease;
  }

  #nav .mainlevel li a {
    height: auto;
    line-height: 40px;
    padding: 0 20px;
    font-size: 14px !important;
    transition: all 0.2s ease;
  }

  #nav .mainlevel li:hover {
    background-color: rgba(1, 61, 143, 0.9) !important;
  }

  #nav .mainlevel li a:hover {
    background-color: transparent !important;
    padding-left: 25px !important;
  }

  /* 轮播图调整 */
  #full-screen-slider, #slides, #slides li, #slides li a {
    width: 100%;
    height: auto;
  }

  #slides li img {
    width: 100%;
    height: auto;
  }

  #pagination {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 10px;
  }

  /* 新闻区块调整 */
  .index_newsone {
    width: 100% !important;
    float: none;
    margin-bottom: 20px;
  }

  .index_newsone ul {
    width: 100% !important;
  }

  .index_newsone ul li {
    width: 100% !important;
  }

  .index_news1 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .index_news1 ul {
    width: 100% !important;
  }

  .index_news1 ul li {
    width: auto !important;
  }

  .index_news1 ul li:last-child {
    width: calc(100% - 90px) !important;
  }

  .index_news2 {
    width: 100% !important;
  }

  .index_news2 img {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }



  /* 东盟资讯和概况调整 */
  .index_zx, .index_gk {
    width: 100% !important;
    float: none;
    margin-left: 0 !important;
    margin-bottom: 20px;overflow: auto;
  }

  .index_gk {   
    margin-top: 30px !important;
  }

  .index_zx ul, .index_gk ul {
    width: 100% !important;
  }

 .index_gk ul li {
    width: 100% !important;
  }

.index_zx ul li {
    float:left;
  }

  /* 东盟资讯列表项调整 */
  .index_zx ul li div[style*="float:left; margin-left:15px"] {
    width: calc(100% - 70px) !important;
  }

 .index_zx ul li div.index_news3 {
    width: 100% !important;
}

.index_zx ul li div.index_news3 ul li.riqi{float:left; width:12%; height:12px;text-align:center;border-bottom:0px;line-height:12px;}
.index_zx ul li div.index_news3 ul li.textc{float:left; width:78%;height:12px;margin-left:15px;padding-left:15px;border-bottom:0px;border-left:#e6e6e6 1px solid; line-height:12px;}




  /* 东盟概况轮播调整 */
  #playBox1 {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: hidden !important;
    margin-bottom: 20px;
    position: relative !important;
  }

  #playBox1 .pre, #playBox1 .next {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background-color: rgba(0,0,0,0.5) !important;
    color: white !important;
    text-align: center !important;
    line-height: 30px !important;
    border-radius: 50% !important;
    z-index: 10 !important;
    cursor: pointer !important;
  }
  
  #playBox1 .pre {
    left: 10px !important;
  }
  
  #playBox1 .next {
    right: 10px !important;
  }

  #playBox1 .pre:after {
    content: "<" !important;
  }
  
  #playBox1 .next:after {
    content: ">" !important;
  }

  #playBox1 .smalltitle1 {
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    position: absolute !important;
    z-index: 10 !important;
  }
  
  #playBox1 .smalltitle1 ul {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #playBox1 .smalltitle1 li {
    width: 10px !important;
    height: 10px !important;
    background-color: rgba(255,255,255,0.5) !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    cursor: pointer !important;
  }
  
  #playBox1 .smalltitle1 li.thistitle {
    background-color: #fff !important;
    width: 12px !important;
    height: 12px !important;
  }

  #playBox1 .oUlplay1 {
    width: 1100% !important; /* 11个项目 * 100% */
    height: auto !important;
    position: relative !important;
    display: flex !important;
    transition: transform 0.3s ease !important;
  }

  #playBox1 .oUlplay1 li {
    width: 100% !important;
    flex: 0 0 calc(100% / 11) !important; /* 11个项目 */
    height: auto !important;
    position: relative !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  #playBox1 .oUlplay1 li div {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }

  #playBox1 .oUlplay1 li div a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    text-indent: 0 !important;
    line-height: 1.6 !important;
    overflow: visible !important;
  }

  #playBox1 .oUlplay1 li div img {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 10px 0 !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* 友情链接调整 */
  .flinkList {
    width: 100% !important;
  }

  .flinkList ul {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .flinkList ul li {
    margin: 5px 10px !important;
  }

  /* 页脚调整 */
  .index_content.white12 {
    height: auto !important;
    padding: 15px 0;
  }

  .index_content.white12 p {
    margin: 10px 0;
    line-height: 1.5;
  }
}

/* 超小型设备（小型手机，480px 以下） */
@media only screen and (max-width: 480px) {
  body {
    font-size: 13px;
    line-height: 22px;
  }

  /* 头部进一步调整 */
  .index_head ul li img[height="111"] {
    max-height: 60px;
  }

  /* 新闻标题字体调整 */
  .blue16-B {
    font-size: 14px !important;
  }

  /* 新闻日期块调整 */
  .index_news1 ul li:first-child {
    width: 70px !important;
    height: 40px !important;
  }

  .index_news1 ul li:first-child p.white18 {
    font-size: 16px !important;
    margin-top: 2px !important;
  }

  .index_news1 ul li:first-child p.white14 {
    font-size: 12px !important;
  }

  /* 东盟资讯进一步调整 */
  .index_zx ul li div[style*="float:left; width:50px"] {
    width: 40px !important;
  }

  .index_zx ul li div[style*="float:left; margin-left:15px"] {
    width: calc(100% - 60px) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
  }

  /* 页脚文字调整 */
  .index_content.white12 p {
    font-size: 10px !important;
  }
}

/* 横屏模式优化 */
@media only screen and (max-width: 768px) and (orientation: landscape) {
  /* 导航菜单横屏优化 */
  #nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #nav .mainlevel {
    width: 50% !important;
  }
}

/* 移动导航菜单额外样式 */
@media only screen and (max-width: 1108px) {
  /* 汉堡菜单按钮 */
  .mobile-menu-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 100;
  }

  /* 子菜单动画效果 */
  #nav .mainlevel ul.sub_nav_01 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }

  #nav .mainlevel ul.sub_nav_01.active {
    max-height: 500px;
    opacity: 1;
	width:90%;
  }

  /* 子菜单项样式增强 */
  #nav .mainlevel li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  #nav .mainlevel li:last-child {
    border-bottom: none;
  }

  #nav .mainlevel li a {
    position: relative;
    padding-left: 20px;
	width:90%;
  }
    #nav .mainlevel li a:hover {
    position: relative;
    padding-left: 20px;
	width:90%;
  }

  #nav .mainlevel li a:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
  }

  #nav .mainlevel li a:hover:before {
    background: #fff;
    width: 6px;
    height: 6px;
  }

  /* 切换按钮样式增强 */
  .mobile-toggle {
    transition: all 0.3s ease;
  }

  .mobile-toggle:hover {
    background: rgba(0,0,0,0.2) !important;
  }
}