/* France Charter — CSS */
:root {
  --blue: #2c6faa;
  --blue-dark: #1e4f7a;
  --blue-light: #4a8fc9;
  --cream: #faf6f0;
  --gold: #c4944a;
  --text: #333;
  --text-light: #666;
  --white: #fff;
  --border: #e8e8e8;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#fff; color:var(--text); }
a { color:var(--text); text-decoration:none; }
a:hover { color:var(--blue); }
.fl { float:left !important; }
.fr { float:right !important; }
.clear { clear:both; }
.w1200 { width:1200px; margin:0 auto; }
.h20 { height:20px; }
.bor { border:1px solid var(--border); }

.top { height:32px; line-height:32px; background:var(--blue-dark); color:rgba(255,255,255,0.8); font-size:12px; }
.top .fl { padding-left:20px; }
.top .fr a { color:rgba(255,255,255,0.7); padding:0 15px; display:inline-block; }

.header-b { padding:20px 0; overflow:hidden; }
.header-c { float:left; width:280px; }
.header-c .logo { font-size:24px; font-weight:bold; color:var(--blue); padding:10px 0; white-space:nowrap; }
.search { float:left; margin:15px 0 0 20px; border:2px solid var(--blue); border-radius:4px; overflow:hidden; }
.search .inp_srh { float:left; width:300px; height:38px; line-height:38px; border:0; padding:0 10px; font-size:14px; color:#999; outline:0; }
.search .btn_srh { float:left; width:100px; height:38px; background:var(--blue); border:0; color:#fff; font-size:14px; cursor:pointer; }
.search .btn_srh:hover { background:var(--blue-dark); }

.site_nav { padding:0 0 10px 0; overflow:hidden; }
.site_nav ul { list-style:none; }
.site_nav li { float:left; margin-right:4px; }
.site_nav li a { display:block; padding:4px 16px; border:1px solid var(--border); border-radius:4px; font-size:13px; color:var(--text-light); }
.site_nav li a:hover { border-color:var(--blue); color:var(--blue); }

.nav-wrap { background:var(--blue); }
.nav { height:42px; }
.nav-a ul { list-style:none; }
.nav-a li { float:left; }
.nav-a li a { display:block; padding:0 20px; height:42px; line-height:42px; color:rgba(255,255,255,0.9); font-size:14px; }
.nav-a li a:hover, .nav-a li.cur a { background:rgba(255,255,255,0.15); color:#fff; }

.box1 { overflow:hidden; }
.subpage { width:230px; float:left; }
.boxc { width:708px; float:left; margin:0 12px; }
.box1txt { width:230px; float:right; }

.pros { }
.pros li { height:40px; line-height:40px; border-bottom:1px dashed var(--border); list-style:none; display:flex; align-items:center; padding:0 4px; }
.pros li i { color:var(--gold); margin-right:8px; font-style:normal; font-weight:bold; }
.pros li a { font-size:14px; }
.pros li .hot { color:var(--gold); font-size:12px; margin-left:8px; }
.pros_last { padding:12px 0; }
.pros_last h2 { font-size:15px; color:var(--blue); margin-bottom:10px; border-left:3px solid var(--blue); padding-left:10px; }
.pros_last a { display:block; padding:4px 0 4px 10px; color:var(--text-light); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.banner { width:708px; }
.bannerBox { position:relative; overflow:hidden; width:708px; height:280px; }
.bannerBox .hd { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:10; }
.bannerBox .hd ul { list-style:none; }
.bannerBox .hd li { float:left; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); margin:0 4px; cursor:pointer; }
.bannerBox .hd li.on { background:var(--gold); }
.bannerBox .bd { width:708px; height:280px; overflow:hidden; position:relative; }
.bannerBox .bd ul { margin:0; padding:0; list-style:none; transition:transform 0.5s ease; }
.bannerBox .bd li { height:280px; width:708px; }
.bannerBox .bd li a { display:block; width:100%; height:100%; }
.bannerBox .bd li img { width:708px; height:280px; object-fit:cover; display:block; border-radius:4px; }

.box1tj { margin-top:12px; overflow:hidden; }
.box1tj a { display:block; margin-bottom:6px; overflow:hidden; }
.box1tj dl { padding:8px 0; border-bottom:1px dashed var(--border); overflow:hidden; }
.box1tj dd { float:left; width:380px; padding:6px 0 0 0; }
.box1tj dd h2 { font-size:15px; line-height:1.5; font-weight:600; color:var(--text); margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.box1tj dd .p_look { color:var(--gold); font-size:12px; }
.box1tj dt { float:right; width:90px; height:68px; }
.box1tj dt img { width:90px; height:68px; object-fit:cover; border-radius:4px; display:block; }
.box1tj .p2 { display:block; padding:4px 0; color:var(--text-light); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.box1txt a h3 { font-size:16px; color:var(--blue); padding:8px 0; margin-bottom:8px; border-bottom:2px solid var(--blue); }
.box1t_li ul { list-style:none; }
.box1t_li li { height:32px; line-height:32px; overflow:hidden; }
.box1t_li li i { display:inline-block; width:20px; height:20px; line-height:20px; text-align:center; background:var(--border); color:var(--text-light); border-radius:3px; margin-right:6px; font-style:normal; font-size:12px; float:left; margin-top:6px; }
.box1t_li li:nth-child(-n+3) i { background:var(--gold); color:#fff; }
.box1t_li li a { font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.main-wrap { padding:0 0 20px 0; background:#fff; }
.wrap-tit { height:42px; line-height:42px; border-bottom:2px solid var(--blue); margin-bottom:15px; }
.wrap-tit h2 { font-size:18px; color:var(--blue); font-weight:600; }
.wrap-tit h2 span { color:var(--gold); }

.box-wrap { overflow:hidden; padding:0 8px; }
.box1li { width:25%; float:left; margin-bottom:15px; padding:0 4px; }
.box1li .box1-img { width:100%; height:140px; overflow:hidden; border-radius:4px; position:relative; background:var(--cream); }
.box1li .box1-img img { width:100%; height:100%; object-fit:cover; display:block; }
.box1li .box1-img span { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.65)); padding:8px; font-size:12px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.box1li .box1-img span a { color:#fff; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.box1-txt { width:100%; height:30px; line-height:30px; overflow:hidden; padding-left:6px; }
.box1-txt li { list-style:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.box1-txt li a { font-size:13px; }
.box1-txt li::before { content:'▸'; color:var(--gold); margin-right:4px; }

.guide-wrap { overflow:hidden; }
.guide-col { width:372px; float:left; margin-right:24px; }
.guide-col:last-child { margin-right:0; }
.guide-col .tit { font-size:15px; color:var(--blue); padding:8px 0; border-bottom:2px solid var(--blue); margin-bottom:10px; font-weight:600; }
.guide-col ul { list-style:none; }
.guide-col li { height:34px; line-height:34px; overflow:hidden; border-bottom:1px dashed var(--border); padding:0 4px; }
.guide-col li i { display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:3px; margin-right:6px; font-style:normal; font-size:11px; float:left; margin-top:8px; background:var(--border); color:var(--text-light); }
.guide-col li:nth-child(-n+3) i { background:var(--gold); color:#fff; }
.guide-col li a { font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.article-wrap { max-width:800px; margin:20px auto; padding:30px; background:#fff; border:1px solid var(--border); border-radius:4px; }
.article-wrap .bread { font-size:13px; color:#999; margin-bottom:20px; }
.article-wrap .bread a { color:#999; }
.article-wrap .bread a:hover { color:var(--blue); }
.article-wrap h1 { font-size:24px; line-height:1.4; margin-bottom:16px; color:var(--text); }
.article-wrap .cat-tag { display:inline-block; background:var(--gold); color:#fff; padding:2px 12px; border-radius:3px; font-size:12px; margin-right:10px; vertical-align:middle; }
.article-wrap .content { font-size:15px; line-height:1.8; color:#444; }
.article-wrap .content p { margin-bottom:16px; }
.article-wrap .related { margin-top:30px; padding-top:20px; border-top:1px solid var(--border); }
.article-wrap .related h3 { font-size:16px; color:var(--blue); margin-bottom:12px; }
.article-wrap .related a { display:block; padding:4px 0; font-size:14px; color:var(--text-light); }
.article-wrap .related a:hover { color:var(--blue); }
.article-wrap .article-img { width:100%; height:300px; overflow:hidden; border-radius:8px; margin-bottom:20px; }
.article-wrap .article-img img { width:100%; height:100%; object-fit:cover; display:block; }

.footer { background:var(--blue-dark); color:rgba(255,255,255,0.7); padding:30px 0; text-align:center; margin-top:30px; }
.footer .brand { font-size:18px; color:var(--gold); margin-bottom:8px; }
.footer .contact { font-size:13px; margin-bottom:6px; }
.footer .contact a { color:var(--gold); }
.footer .copy { font-size:12px; opacity:0.6; }

.loading { text-align:center; padding:60px; color:#999; }