@charset "utf-8";

/*---- 通用样式 ----*/

html,body {width:100%; height:100%}
* {margin:0; padding:0; box-sizing:border-box; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; list-style-type:none; font-family:"Microsoft Yahei","微软雅黑",arial,helvetica,sans-serif}
a {color:#888; font-size:16px; text-decoration:none}
img {border:0 none; vertical-align:top}
i,em,cite {font-style: normal}
button {cursor:pointer}
table,table td {border-collapse:collapse; border-spacing:0}
body {position:relative; display:flex; flex-direction:column}

/*----页顶菜单----*/

.head {flex: 0 0 64px; background-color:black; display:flex; align-items:center}
.head .logo {position:relative; flex:0 0 25%; height:100%}
.head .logo img {position:absolute; height:125%; left:20px; top:0; z-index:999}
.head .menu {flex:1 1 50%; display:flex; justify-content:space-evenly; padding:0 10px}
.head .menu a {flex:0 1 auto; color:white; font-size:16px; font-family:tahoma; padding:0 20px}
.head .menu a:hover {color:#02a0ca}
.head .icon {flex:1 0 auto; display:flex; justify-content:center; align-items:center}
.head .icon i {color:white; font-size:24px; margin-left:5px}
.head .lang {flex:1 0 20%; display:flex; padding:0 15px}
.head .lang a {flex:0 0 auto; color:white; font-size:14px; text-decoration:none; font-family:tahoma; padding:0 10px}
.head .lang a:hover {color:#02a0ca}
.mmenu {display:none}

.mb .head {flex:0 0 48px}
.mb .head .logo img {left:10px}
.mb .head .menu {display:none}
.mb .head .icon {flex:1 0 50%; justify-content:flex-end; padding-right:10px}
.mb .head .lang {display:none}
.mb .mmenu {display:flex; flex-direction:column; position:fixed; left:100vw; top:0; width:40vw; height:100vh; background-color:#444; padding:20px; z-index:9999}
.mb .mmenu a {display:block; color:#fff; height:40px; line-height:40px; border-bottom:1px dotted #ddd}

/*----主体----*/

.body {flex:1 1 auto; overflow:auto}
.body .lbt {position:relative; width:100%; height:100%; overflow:hidden}
.lbt .pics {position:absolute; display:flex; width:200%; height:100%} 
.pics .pic {flex:1 0 50%; height:100%; overflow:hidden; background:no-repeat center / cover; cursor:pointer}
.body #details {width:100%}
#details img {width:60%; margin:0 20%}
#details div.spxq {position:fixed; bottom:5vh; right:1vw; font-size:96px; text-align:right; color:#fff; text-shadow:0 0 20px #000}
.body .cpbox {display:flex; flex-wrap:wrap; justify-content:space-evenly; width:100%; padding-bottom:30px;}
.cpbox .item {display:block; position:relative; width:22vw; height:28vw; border:1px solid #aaa; margin:2.4vw 0 0; border-radius:4%; overflow:hidden}
.cpbox .item img {display:block; width:100%}
.cpbox .item div {position:absolute; width:100%; bottom:0; text-align:center; line-height:1.5; padding-bottom:16px; font-size:1.2vw}
.cpbox .item:hover {border:none; box-shadow:0 0 16px rgba(0,0,0,0.6); background-color:#888; color:#fff}
.body .banner {height:400px; background:no-repeat center / cover}
.body .content {margin:auto; width:1000px; padding-bottom:100px}
.content .tbbox {display:flex; justify-content:center; flex-wrap:wrap; margin:80px 0 100px}
.tbbox .tb {flex:1 0 240px}
.tb .img {text-align:center}
.tb .txt {margin-top:20px}
.txt .t1, .txt .t2, .txt .t3 {text-align:center; margin:8px 0}
.txt .t1 {font-size:20px; color:#888}
.txt .t2 {font-size:16px; color:#444}
.txt .t3 {font-size:36px; color:#000}
.content .nrbox {font-size:18px; line-height:1.8; text-indent:2em}

.mb #details img {width:100%; margin:0}
.mb #details div.spxq {bottom:6vh; right:5vw; font-size:36px; text-shadow:0 0 10px #000}
.mb .cpbox .item {width:46vw; height:58vw; font-size:14px}
.mb .cpbox .item div {padding-bottom:10px; font-size:2vw}
.mb .body .banner {height:25vh}
.mb .body .content {width:98vw; padding-bottom:10vh}
.mb .content .tbbox {justify-content:center; margin:30px 0}
.mb .tbbox .tb {flex:1 0 45vw; margin-bottom:20px}
.mb .tb img {width:25vw}
.mb .tb .txt {margin-top:10px}
.mb .txt .t1, .mb .txt .t2, .mb .txt .t3 {margin:5px 0}
.mb .txt .t1 {font-size:16px}
.mb .txt .t2 {font-size:12px}
.mb .txt .t3 {font-size:28px}
.mb .content .nrbox {margin:auto; width:90vw}


/*----页脚----*/

.foot {flex:0 0 40px; background-color:black; display:flex; align-items:center}
.foot .copy {flex:1 1 100%; font-size:16px; color:white; text-align:center}

.mb .foot {flex:0 0 28px}
.mb .foot .copy {font-size:12px}

i.mi {display:none}
.mb i.mi {display:inline}