/* 通用样式 */
*{margin:0;padding:0;box-sizing:border-box;}
body{  margin: 0;
  padding: 0; font-family:sans-serif;line-height:1.6;}



/* 通栏背景色 */
.gray { width: 100%;  background: #f4f4f8;   padding: 60px 20px; }
.blue { width: 100%;  background: #DDE6EB;   padding: 60px 20px; }


.container{max-width:1500px;margin:0 auto;padding: 20px 20px; }
.section{max-width:1200px;margin:0 auto;}


h1 { font-size: 2em;  margin: 30px 0 20px 0;  text-align: center; }
h2 { font-size: 1.9em; margin: 30px 0 20px 0; text-align: center; }
h3 { font-size: 1.5em; margin: 5px 0 5px 0; text-align: left; }


.link { color: blue; text-decoration: underline; text-underline-offset: 4px; transition: all 0.2s ease; }
.link:hover { color: darkblue; }
.link:active { color: black; }



.text{padding:40px 0;}
.text h1{margin-bottom:20px;color:#333;}
.text p{margin-bottom:15px;}
.text blockquote{font-style:italic;padding:15px 20px;background:#f9f9f9;border-left:4px solid #0066cc;margin:20px 0;}






/* 导航栏样式 */
nav{background-color:#f0f5f1;width:100%}
.nav-container{max-width:1200px;width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:10px 16px;position:relative;z-index:100;font-family:sans-serif;gap:12px;box-sizing:border-box}
.logo{display:flex;align-items:center;color:#2a4d2a;font-weight:700;font-size:1.25rem;margin-left:0;padding-left:0}
.logo img{height:40px;width:auto;margin:0 8px 0 0;display:block;float:left;filter:drop-shadow(0 0 1px #255225)}
.hamburger{display:none;background:none;border:none;font-size:28px;cursor:pointer;padding:5px;color:#2a6a2a;transition:transform 0.3s ease;user-select:none}
.hamburger.active::before{content:"×";font-size:32px;line-height:1;display:inline-block;color:#2a6a2a}
.hamburger.active{font-size:0}
.nav-menu{display:flex;list-style:none;gap:30px;margin:0;padding:0;flex:1 1 auto;justify-content:center}
.nav-menu>li{position:relative}
.nav-menu>li>a{text-decoration:none;color:#2a4d2a;font-weight:700;padding:10px 15px;display:block;white-space:nowrap;position:relative;transition:color 0.3s ease}
.nav-menu>li>a:hover,.nav-menu>li.active>a{color:#3b7d3b}
.nav-menu li ul{position:absolute;left:50%;top:100%;transform:translate(-50%,0);background:#e8f0e8;display:grid;list-style:none;min-width:480px;box-shadow:0 3px 10px rgba(0,90,0,0.15);z-index:100;color:#2a4d2a;margin:0;padding:10px;grid-template-columns:repeat(3,1fr);gap:8px;opacity:0;visibility:hidden;transition:all 0.3s ease;border-radius:8px}
.nav-menu li.active>ul{opacity:1;visibility:visible;transform:translate(-50%,10px)}
.nav-menu li ul li a{padding:10px;display:block;color:#2a4d2a;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:6px;transition:background-color 0.3s ease,color 0.3s ease}
.nav-menu li ul li a:hover{background:#c8e6c9;color:#145214}
.lang-switcher{position:relative;cursor:pointer;color:#4a6a4a;font-size:18px;user-select:none;transition:color 0.3s ease}
.lang-switcher:hover{color:#2f5d2f}
.lang-switcher .globe-icon{font-size:20px;color:#4a6a4a}
.lang-switcher .lang-menu{position:absolute;top:100%;right:0;list-style:none;padding:6px 0;margin:6px 0 0 0;display:none;background:#f0f5f0;border-radius:8px;box-shadow:0 4px 12px rgba(0,90,0,0.15);z-index:999}
.lang-switcher .lang-menu li a{display:block;padding:6px 12px;color:#3b7d3b;text-decoration:none;font-size:14px;border-radius:4px;transition:background-color 0.25s ease}
.lang-switcher .lang-menu li a:hover{background:#c8e6c9;color:#145214}
.lang-switcher .lang-menu.show{display:block}
.lang-modal{position:fixed;top:80px;right:60px;background:#e8f0e8;padding:30px 40px;border-radius:10px;box-shadow:0 12px 40px rgba(20,90,20,0.3);z-index:9999;display:block;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity 0.4s ease,transform 0.4s ease}
.lang-modal.show{opacity:1;transform:translateY(0);pointer-events:auto}
.lang-modal .lang-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lang-modal .lang-options button{padding:12px 10px;border:none;background:#d7e9d7;color:#1e3b1e;border-radius:6px;cursor:pointer;font-size:15px;transition:all 0.2s ease;box-shadow:inset 0 0 6px rgba(30,59,30,0.2)}
.lang-modal .lang-options button:hover{background:#8cb88c}
.lang-modal .close-modal{position:absolute;top:2px;right:3px;font-size:15px;background:none;border:none;color:#4a6a4a;cursor:pointer;transition:color 0.25s ease}
.lang-modal .close-modal:hover{color:#1e3b1e}
.lang-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(30,60,30,0.25);z-index:9998;display:block;opacity:0;pointer-events:none;transition:opacity 0.4s ease}
.lang-overlay.show{opacity:1;pointer-events:auto}



@media (max-width:768px){
nav{background:#e8f0e8}
.nav-container{width:100%;padding:10px 5%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.logo{padding-left:0;margin-right:auto}
.hamburger{display:block;color:#2a6a2a;font-size:24px;background:none;border:none;cursor:pointer;order:1}
.nav-menu{position:fixed;top:100px;left:0;right:0;background:#d7e9d7;flex-direction:column;gap:0;overflow:hidden;max-height:0;transition:max-height 1.2s ease;width:100%;z-index:999}
.nav-menu.show{max-height:80vh;overflow-y:auto}
.nav-menu>li:not(:first-child){border-top:1px solid #a1c6a1}
.nav-menu>li{width:100%;position:relative}
.nav-menu>li>a{padding:10px 20px;color:#2a4d2a;display:flex;justify-content:space-between;align-items:center;text-decoration:none;transition:color 0.3s ease}
.nav-menu>li>a:hover{color:#3b7d3b}
.nav-menu li .toggle-icon{font-size:18px;margin-left:10px}
.nav-menu li ul{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;padding:10px;background:#f0f7f0;max-height:0;overflow:hidden;transition:max-height 0.9s ease;width:100%;box-shadow:none;border-radius:0 0 8px 8px}
.nav-menu li ul li{width:calc(50% - 10px);box-sizing:border-box}
.nav-menu li ul li a{display:block;color:#3b6699;padding:8px;text-decoration:none;white-space:normal;word-break:break-word;font-size:14px;background:#d7e6e7;border-radius:4px;text-align:center;transition:background-color 0.3s ease}
.nav-menu li ul li a:hover{background:#b9d6b9;color:#145214}
.lang-switcher{display:none}
.mobile-lang{padding:10px 20px 20px 20px;font-size:17px;text-align:left;color:#2a4d2a;cursor:pointer;border-top:1px solid #a1c6a1;user-select:none;background:#d7e9d7;transition:background-color 0.3s ease}
.mobile-lang:hover{background:#b9d6b9}
}













/* 底部样式 */

.footer-menu { background-color: #eaf1f7; width: 100%; padding: 30px 15px; font-family: sans-serif; font-size: 14px; box-sizing: border-box; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.footer-menu .menu-block { width: 33.3333%; text-align: left; padding: 0 15px; box-sizing: border-box; }
.footer-menu .menu-block h4 { font-size: 16px; margin-bottom: 10px; }
.footer-menu .menu-block ul { list-style: none; padding: 0; margin: 0; }
.footer-menu .menu-block ul li { margin-bottom: 6px; }
.footer-menu .menu-block ul li a { text-decoration: none; color: #333; }
.footer-menu .menu-block ul li a:hover { text-decoration: underline; }

/* 响应式：在小屏幕下每行两列 */
@media (max-width: 767px) {
  .footer-container { flex-wrap: wrap; justify-content: center; }
  .footer-menu .menu-block { width: 50%; max-width: 100%; padding: 10px; margin-bottom: 20px; box-sizing: border-box; text-align: left; }
}









/* FAQ 问答 */

.faq {max-width: 800px; margin: auto;  padding-top: 5vh;  padding-bottom: 5vh;}
.faq-item {background: #fff; border-radius: 10px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.3s;}

.faq-question {padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; background: #f0f0f0; transition: background-color 0.3s;}
.faq-question:hover {background: #e0e0e0;}
.faq-item.active .faq-question {background: #d0d0d0;}
.icon::before {content: '+'; font-weight: bold; transition: transform 0.3s;}
.faq-item.active .icon::before {content: '−';}
.faq-answer {max-height: 0; overflow: hidden; background: #f9f9f9; font-size: 1rem; color: #006400; line-height: 2; padding: 0 20px; transition: max-height 1.5s ease, padding 0.5s ease;}
.faq-item.active .faq-answer {padding: 12px 20px 16px; max-height: 700px;}









/* 左图右文排列 */
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0px;gap:90px;}
.image img{width:100%;max-width:600px;height:auto;}
.text{flex:1;}
.text h2{margin:0 0 8px;font-size:22px;}
.text p{margin:0;font-size:16px;line-height:2;color:#333;}

@media (max-width: 768px) {
  .row { flex-direction: column; align-items: flex-start; padding-left: 16px; padding-right: 16px;margin-bottom: 15px; }
  .image, .image img { order: 0; max-width: 100%; }
  .text { order: 1; }
}






/* 虚线 */
.dashed-line { width: 100%; border-top: 1px dashed #3399ff; margin: 10px 0; }




/* 联系表单一行两列 */

.container { max-width: 1200px; margin: 0 auto; padding: 20px; background: #fff; font-family: Arial, sans-serif; }

.contact-box { margin-top: 30px; }

.contact-box-msn { display: flex; flex-wrap: wrap; gap: 5%; }

.contact-box-left, .contact-box-right { box-sizing: border-box; }

.contact-box-left img { max-width: 100%; height: auto; }

.contact-box-left span { display: block; font-size: 16px; line-height: 28px; color: #222; margin-bottom: 10px; }

.contact-box-right { width: 35%; padding: 2%; border-left: 1px solid #f99005; }

.contact-box-left { width: 60%; }

form .row { display: flex; gap: 20px; margin-bottom: 15px; }

form .field { flex: 1; display: flex; flex-direction: column; }

form .field label { font-size: 14px; margin-bottom: 5px; }

form .field input, form .field textarea { border: none; border-bottom: 0.5px solid #666; padding: 6px; font-size: 14px; background: transparent; }

form .field textarea { resize: vertical; }

.sub-gestbook1 { padding: 10px 25px; background: #026dc0; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; transition: background 0.3s; }

.sub-gestbook1:hover { background: #014c8c; }



/* 响应式 */
@media screen and (max-width: 768px) {
  .contact-box-msn { flex-direction: column; }
  .contact-box-left, .contact-box-right { width: 100%; }
  form .row { flex-direction: column; }
  form .field { width: 100%; }
  form .field input, form .field textarea { width: 100%; }
}
















/* 外贸资源下载 */


/* 区块和行布局 */
.section-app { margin-top: 25px; }

.row-center { display: flex; justify-content: center; gap: 100px; flex-wrap: wrap; }

.wrap { flex-wrap: wrap; gap: 90px; }

/* 列 */
.col { flex: 1; min-width: 500px; max-width: 640px; }

/* 二大列的安卓区和Windows区各自内部分成多行 */
.apps-col { display: flex; flex-wrap: wrap; gap: 20px 15px; }

/* Windows列背景色和文字颜色 */
.windows-col { background-color: #f4f4f4f4; color: #ffffcc; padding: 10px 10px; border-radius: 5px; }

.windows-col .section-title { color: #069; padding: 6px 0; margin-bottom: 10px; font-weight: bold; font-size: 15px; text-align: center; }

/* 版块标题 */
.section-title { font-size: 16px; font-weight: bold; color: #0f947e; margin-bottom: 10px; text-align: center; }

/* App 下载条目 */
.app-item { display: flex; align-items: center; gap: 30px; font-size: 15px; flex-basis: 45%; min-width: 170px; }

/* App 图片统一大小 */
.app-item img { width: 50px; height: 50px; object-fit: contain; }

/* 链接样式 */
.app-link { color: #0f947e; font-weight: 600; text-decoration: none; line-height: 1.2; }

.app-link:hover { text-decoration: underline; color: #066a5e; }









/* 小程序模块 */
#modules-container{max-width:2000px;width:100%;display:flex;flex-wrap:wrap;gap:40px;padding:24px;box-sizing:border-box;}
.module-title{font-size:22px;font-weight:700;margin-bottom:12px;color:#222;}
.module{position:relative;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.1);flex:0 1 100%;min-width:280px;max-width:500px;display:flex;flex-direction:column;padding:16px 24px 24px;box-sizing:border-box;transition:box-shadow 0.3s ease;margin:0 auto;}
.module.dragging{opacity:0.6;box-shadow:0 0 0 6px #3498db inset;}
.module::before{content:"";height:15px;width:100%;background:#ccc;border-radius:12px 12px 0 0;position:absolute;top:0;left:0;cursor:grab;z-index:2;}
input[type="text"],input[type="datetime-local"]{display:block;width:100%;margin-bottom:12px;padding:12px;border:2px solid #ccc;border-radius:8px;font-size:16px;box-sizing:border-box;}
button{padding:10px 24px;background-color:#add8e6;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;width:auto;max-width:180px;display:block;margin:0 auto;}
button:hover{background-color:#87ccea;}
pre{background:#f3f3f3;padding:16px;border-radius:8px;white-space:pre-wrap;font-size:14px;margin-top:12px;}

@media (max-width:768px){
  #modules-container{justify-content:center;}
  .module{flex:0 1 90%;max-width:90%;margin:0 auto;}
}







/* 汇率换算 */
.exchange-module {display: flex; flex-direction: column; gap: 16px;}
.exchange-content {display: flex; flex-direction: column; gap: 16px;}
.currency-box {display: flex; flex-direction: column; gap: 8px;}
.currency-box select, .currency-box input {padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 6px;}
.converted-amount {font-size: 18px; padding: 10px 12px; background: #f3f3f3; border-radius: 6px; min-height: 42px;}
.exchange-icon {font-size: 24px; text-align: center; color: #888;}
.rate-info {font-size: 14px; color: #666; text-align: center;}
.update-time {font-size: 13px; color: #999; text-align: right;}
button {padding: 10px 24px; background-color: #3498db; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; width: auto; max-width: 180px; display: block; margin: 0 auto;}



/* 倒计时 */

.event { padding:16px 20px; margin:8px 0 0 0; border-radius:10px; background: linear-gradient(135deg, #e0f2ff, #cde8ff); font-weight:700; color:#004a99; box-shadow:0 2px 8px rgba(0,74,153,0.15); font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:1.3em; line-height:1.4; }

.event .highlight { background:#004a99; color:#fff; padding:2px 8px; border-radius:6px; box-shadow:0 4px 6px rgba(0,74,153,0.3); display:inline-block; margin-left:6px; font-weight:900; }

.buttons { display:flex; justify-content:flex-end; gap:20px; margin:16px 0 20px 0; padding:0; background:transparent; border-radius:0; }

button { padding:6px 16px; cursor:pointer; border:2px solid #004a99; background-color:transparent; border-radius:6px; color:#004a99; font-weight:600; font-size:0.9em; transition: all 0.25s ease; font-family: inherit; }

button:hover { background-color:#004a99; color:#fff; box-shadow:0 0 8px rgba(0,74,153,0.4); }

button:focus { outline:none; box-shadow:0 0 0 3px rgba(0,74,153,0.6); }




/* 收音机 */






.audio-player {width: 100%; margin-bottom: 15px;}

.grid, .station-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.grid button, .station-list button {
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.grid button:hover, .station-list button:hover {
  background-color: #45a049;
}

.more-btn {
  display: inline-block;
  padding: 10px 16px;
  background: #006400; /* 深绿色 */
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}

.more-btn.selected {
  background: #004d00; /* 深绿色选中态 */
}

.hidden {
  display: none;
}

.timer-section {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#timerSelect {
  padding: 6px;
  font-size: 16px;
  width: 120px;
}






/* 录音 */

#controls { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }

button { padding:6px 20px; font-size:1em; cursor:pointer; border-radius:6px; border:1px solid #666; background-color:#f0f0f0; transition: all 0.2s ease; }

button:disabled { opacity:0.5; cursor:not-allowed; }

button:hover:enabled { background-color:#e0e0e0; }




/* 计算器 */




#display { width: 100%; height: 40px; font-size: 24px; margin-bottom: 12px; text-align: right; padding: 8px; border: 1px solid #ccc; border-radius: 8px; }

.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

button { padding: 16px; font-size: 18px; border: none; background: #e0e0e0; border-radius: 8px; cursor: pointer; transition: background 0.2s; }

button:hover { background: #d0d0d0; }

button:active { background: #b0b0b0; }




/* 节日假 */


/* 节日假期模块样式 */
.holiday-title {font-size: 24px; color: #333; margin-bottom: 20px;}
.holiday-selector {padding: 10px; font-size: 16px; margin-bottom: 20px; width: 80%; max-width: 300px;}
.holiday-list {list-style: none; padding: 0; text-align: left;}
.holiday-item {background: #eaf6ff; margin: 10px 0; padding: 12px; border-radius: 6px; line-height: 1.5;}
@media (max-width: 600px) {
  body {padding: 20px;}
  .holiday-selector {width: 100%;}
}




/* 便签 */

.note-container {background: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); width: 400px; max-width: 90%;}
h2 {margin-bottom: 10px; color: #333; text-align: center;}
textarea {width: 100%; height: 200px; padding: 10px; font-size: 16px; resize: vertical; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box;}
.actions {margin-top:10px; display:flex; justify-content:center; gap:10px;}

button {padding: 8px 16px; margin: 5px; font-size: 14px; border: none; border-radius: 8px; cursor: pointer; background-color: #4CAF50; color: white;}
button:hover {background-color: #45a049;}
.status {font-size: 12px; color: #888; margin-top: 8px; text-align: center;}





/* 手机端Tab菜单样式 */
#mobile-tabs{display:none;}

@media (max-width:768px){
  #mobile-tabs{display:block;position:fixed;bottom:0;left:0;width:100%;background:#f4f4f4;border-top:1px solid #ccc;z-index:999;}
  .mobile-tab-bar{display:flex;flex-wrap:wrap;}
  .mobile-tab{flex:1 1 33.33%;text-align:center;padding:10px 0;font-size:14px;border-right:1px solid #ddd;background:#fff;color:#333;cursor:pointer;}
  .mobile-tab.active{background:#3399ff;color:#fff;font-weight:bold;}

  /* 优化模块切换避免跳回顶部 */
  .module{visibility:hidden;position:absolute;top:0;left:0;width:100%;z-index:0;opacity:0;height:0;overflow:hidden;transition:none;}
  .module.active{visibility:visible;position:relative;opacity:1;height:auto;overflow:visible;z-index:1;margin-bottom:60px;}
}