@charset "utf-8";

/**
 * @Author   zcool
 * @Date     2017-11-20
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ul,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td,
ol { margin: 0; padding: 0; }
*,
::after,
::before { box-sizing: border-box; font-family: "PingFang HK", "Microsoft YaHei", "Arial"; }
body { font: 12px "PingFang HK", "Microsoft YaHei", "Arial"; color: #000; line-height: 1.5; overflow-x: hidden; }
ol,
ul,
li { list-style-type: none; vertical-align: middle; }
img { vertical-align: top; border: 0; }
input,
select,
textarea,
button { vertical-align: middle; }
textarea,
input { text-indent: 10px; }

/*表单元素默认有10像素的缩进*/
input[type='submit'],
input[type='button'],
button { text-indent: 0; text-align: center; cursor: pointer; }
label,
button,
a { cursor: pointer; }
ins,
em,
b,
i { text-decoration: none; font-style: normal; }

/* 去掉浏览器激活样式 */
select:focus,
textarea:focus,
input:focus,
button { outline: none; }

/* 提示文字的初始样式 */
input::-webkit-input-placeholder,
input::-moz-input-placeholder,
textarea::-webkit-textarea-placeholder,
textarea::-moz-textarea-placeholder { color: #999; transition: color .5s; }

/* 提示文字的激活样式 */
input:focus::-webkit-input-placeholder,
input:focus::-moz-input-placeholder,
input:hover::-webkit-input-placeholder,
input:hover::-moz-input-placeholder,
textarea:focus::-webkit-input-placeholder,
textarea:focus::-moz-input-placeholder,
textarea:hover::-webkit-input-placeholder,
textarea:hover::-moz-input-placeholder { color: #c2c2c2; }

/* table */
table { border-collapse: collapse; border-spacing: 0; font: inherit; }

/* a_link */
a { color: inherit; text-decoration: none; }
a[href] { cursor: pointer; }
a:hover { text-decoration: none; cursor: pointer; }
a:focus { background-color: transparent; }
h1,
h2,
h3,
h4,
h5,
h6,
em { font-weight: normal; }
a,
span,
li,
b,
i,
label,
p,
strong,
div,
h1,
h2,
h3,
h4,
h5,
h6,
font,
small,
em,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td { font-size: 14px; }
p { line-height: 2; }
audio,
canvas,
progress,
video { display: inline-block; vertical-align: baseline; }

/*用来解决在安卓上的点击出现篮框问题*/
body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/*解决ios上去除微信点击蓝色边框 */
a:focus,
input:focus,
p:focus,
div:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
font { font-size: inherit; font-weight: inherit; color: inherit; font-family: inherit; font-style: inherit; text-transform: inherit; }
body,
html { height: 100%; }
body::-webkit-scrollbar,
html::-webkit-scrollbar { width: 4px; border-radius: 1.5px; }
body::-webkit-scrollbar-button,
html::-webkit-scrollbar-button { display: none; }
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track { background-color: #eee; }
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb { background-color: #f39800; }

/*滚动动画的样式*/
.disable-hover { pointer-events: none; }
.scroll-animate.animated { visibility: hidden; }
.font-fadeIn font { display: inline-block; }
.scrolly { transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }

/* 浮动与清浮动 */
.fl { float: left; }
.fr { float: right; }
.cl::after { content: '\20'; display: block; height: 0; line-height: 0; font-size: 0; clear: both; visibility: hidden; }
.hide { display: none; }
.show { display: block; }
.text_overflow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ahref] { cursor: pointer; }
h1,
h2,
h3,
h4,
h5 { font-weight: bolder; }
.over-2 { line-height: 24px; height: 48px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.over-3 { line-height: 28px; height: 72px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 17.5px; }
html { font-size: 100px; }
@font-face { font-family: 'word'; src: url('../css/font/GOTHAM-BOOK_0.otf'); }
@font-face { font-family: 'en-m'; src: url('../css/font/Anton-Regular.ttf'); }
.word { font-family: word; }
.en-m { font-family: en-m; }

/* 定义网站色值 */
.mc { color: #f39800; }
.fc { color: #f3f3f3; }
.wc { color: #ffffff; }
.grc { color: #dddddd; }
.d-gc { color: #919191; }
.rc { color: #c6181a; }
.oc { color: #ffb11e; }
.yc { color: #c5ab82; }
.gc { color: #8aff3c; }
.bc { color: #2988cc; }
.ie_on { display: none; }
.transi { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.linear-bg { background: linear-gradient(0deg, #03aedb 0%, #137acc 100%); }
.linear-txt { background: linear-gradient(0deg, #03aedb 0%, #137acc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.line { width: 100%; height: 1px; background-color: #434343; display: inline-block; }
.shadow { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
.sh1 { box-shadow: 0 10px 30px -10px rgba(201, 22, 30, 0.33); }
.sh2 { box-shadow: 0 10px 30px -10px rgba(15, 75, 149, 0.33); }
.txt-shadow { text-shadow: 0 8px 14px rgba(21, 39, 39, 0.14); }
.max-wid { width: 80%; max-width: 1500px; margin: auto; }
.full { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/*图片容器*/
.pic { overflow: hidden; position: relative; width:100%; height:0; padding-bottom: 70%; }
.pic img.w-h { width: 100%; max-width: 100%; }
.pic img.lazy { display: block; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; }

/* 新闻文章列表 */
.layout-articles { border-bottom: 1px solid #eee; }
.layout-articles .layout-top { display: inline-block; }
.layout-articles .layout-top h4.layout-title { text-align: left; font-weight: bold; }
.layout-articles .layout-top > small { display: block; font-weight: 500; margin: 0.15rem 0 0.2rem 0; }
.layout-articles .layout-btm { clear: both; height: 0.45rem; line-height: 0.45rem; padding: 0.3rem 0; position: relative; box-sizing: content-box; }
.layout-articles .layout-btm > .btn { background-color: #f0f4f7; color: #6a6a6a; width: 1.25rem; height: 0.45rem; line-height: 0.45rem; text-align: center; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; }
.layout-articles:not(:last-child) { margin-bottom: 0.7rem; }

/*box:图文结构*/
.layout-box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

/*列表*/
.layout-ul > li { height: 0.32rem; line-height: 0.32rem; position: relative; padding-left: 0.5rem; }
.layout-ul > li > i { position: absolute; top: 0; bottom: 0; margin: auto; left: 0; height: 0.3rem; }

/*页码*/
.layout-page { text-align: center; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; }
.layout-page > a { display: inline-block; margin: 0 10px; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; background-color: #f5f5f5; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.layout-page > a:hover { background-color: #f39800; color: #fff; }
.layout-page > ol li { height: 40px; line-height: 40px; color: #cfced3; margin: 0 12px; cursor: pointer; display: none; }
.layout-page > ol li.sp,
.layout-page > ol li.ep { display: inline-block; }
.layout-page > ol li.on { display: inline-block; }
.layout-page > ol li.cur { color: #f39800; }
.layout-page > ol .gather { pointer-events: none; color: #fff; margin: 0 12px; }

/* 按钮 */
.layout-btn { padding: 10px 30px; background: rgba(0, 0, 0, 0.3); border: 2px solid #fff; display: inline-block; color: #fff; border-radius: 4px; font-size: 16px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.layout-btn:hover { background: rgba(0, 0, 0, 0.6); }
.layout-btn-1 { position: relative; display: inline-block; width: 100%; max-width: 260px; height: 52px; background: #fff; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: 0.05em; transition-delay: 0.6s; overflow: hidden; }
.layout-btn-1:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f39800; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(0.5); transition: all 0.6s ease; }
.layout-btn-1:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border-radius: 0; transform: translateY(0) scaleY(1); transition: all 0.6s ease; }
.layout-btn-1 > div { position: relative; top: 16px; width: 100%; height: 26px; overflow: hidden; }
.layout-btn-1 > div > span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform 0.5s ease; }
.layout-btn-1 > div > span:first-of-type { color: #fff; transform: translateY(24px); }
.layout-btn-1 > div > span:last-of-type { color: #1e0f21; transform: translateY(0); }
.layout-btn-1:hover { background: #f39800; transition: background 0.2s linear; transition-delay: 0.6s; }
.layout-btn-1:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0s; }
.layout-btn-1:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(0.5); transition-delay: 0s; }
.layout-btn-1:hover > div > span:first-of-type { transform: translateY(0); }
.layout-btn-1:hover > div > span:last-of-type { transform: translateY(-24px); }
.layout-btn-2 { width: 200px; height: 60px; cursor: pointer; perspective: 500px; display: inline-block; }
.layout-btn-2 > div { height: 100%; transform-style: preserve-3d; transition: 0.25s; }
.layout-btn-2 > div > span { width: 100%; height: 100%; position: absolute; box-sizing: border-box; border: 5px solid #fff; line-height: 50px; font-size: 17pt; text-align: center; text-transform: uppercase; }
.layout-btn-2 > div > span:first-of-type { color: #fff; transform: translate3d(0, 0, 30px); }
.layout-btn-2 > div > span:last-of-type { color: #737f39; background: #fff; transform: rotateX(90deg) translate3d(0, 0, 30px); }
.layout-btn-2:hover > div { transform: rotateX(-90deg); }
.layout-btn-3 { height: 80px; line-height: 80px; width: 180px; text-align: center; display: inline-block; overflow: hidden; position: relative; padding: 10px 0; }
.layout-btn-3 > span { display: inline-block; font-size: 14px; position: relative; z-index: 3; color: #000; width: 100%; height: 60px; line-height: 60px; vertical-align: top; transition: all 0.3s cubic-bezier(0, 0.25, 0.5, 1); }
.layout-btn-3 .Sline { position: absolute; top: 0; left: 0; z-index: 2; fill: #fff; pointer-events: none; transition: all 0.6s cubic-bezier(0, 0.25, 0.5, 1); }
.layout-btn-3:hover > span { color: #fff; }
.layout-btn-3:hover .Sline { fill: #f39800; transform: translate3d(-66.6%, 0, 0); }
.layout-btn-4 { display: flex; justify-content: center; align-items: center; color: #fff; height: 60px; line-height: 60px; width: 180px; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; position: relative; border: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; text-align: center; }
.layout-btn-4 > span { display: inline-block; color: #fff; font-size: 14px; }
.layout-btn-4:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgba(255, 255, 255, 0.25); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transform: translate(0, -100%); -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.layout-btn-4:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgba(255, 255, 255, 0.25); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transform: translate(0, -100%); -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transition-delay: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); }
.layout-btn-4:hover:after { transform: translate(0, 0); }
.layout-btn-4:hover:before { transform: translate(0, 0); }

/* tab选项 */
.layout-tabBox ul.layout-part { overflow: hidden; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.layout-tabBox ul.layout-part > li { width: calc(100%/4); float: left; height: 0.5rem; line-height: 0.5rem; text-align: center; }
.layout-partList { width: 100%; height: 400px; padding: 6px; }

/*输入框*/
.layout-inputBox { display: inline-block; }
.layout-inputBox > h5 { height: 0.32rem; line-height: 0.32rem; }
.layout-inputBox .input-text { height: 40px; margin-bottom: 20px; position: relative; width: 100%; }
.layout-inputBox .input-text > input { width: 100%; height: 100%; background-color: white; border: solid 1px #d4d4d4; font-weight: 400; padding: 0 10px; position: relative; z-index: 10; }
.layout-inputBox .input-text > input:focus { background-color: transparent; border-color: transparent; }
.layout-inputBox .input-text > input:focus ~ .input-border { background-color: white; }
.layout-inputBox .input-text > input:focus ~ .input-border:first-of-type:before { -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0s; transition-delay: 0s; width: 100%; }
.layout-inputBox .input-text > input:focus ~ .input-border:first-of-type:after { height: 100%; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
.layout-inputBox .input-text > input:focus ~ .input-border:last-of-type { background: transparent; }
.layout-inputBox .input-text > input:focus ~ .input-border:last-of-type:before { -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; width: 100%; }
.layout-inputBox .input-text > input:focus ~ .input-border:last-of-type:after { height: 100%; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.45s; transition-delay: 0.45s; top: 0; }
.layout-inputBox .input-text .input-border { bottom: 0; display: block; left: 0; position: absolute; top: 0; width: 100%; height: 100%; }
.layout-inputBox .input-text .input-border:before,
.layout-inputBox .input-text .input-border:after { bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; background-color: #5b4c5c; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; }
.layout-inputBox .input-text .input-border:first-of-type:before { height: 2px; left: 0; top: 0; width: 0; }
.layout-inputBox .input-text .input-border:first-of-type:after { height: 0; right: 0; top: 0; width: 2px; }
.layout-inputBox .input-text .input-border:last-of-type:before { background-color: #01afd1; height: 2px; top: calc(100% - 2px); right: 0; width: 0; }
.layout-inputBox .input-text .input-border:last-of-type:after { background-color: #01afd1; height: 0; top: calc(100% - 2px); left: 0; width: 2px; }

/*省市区三级联动*/
.layout-adr { display: flex; justify-content: flex-start; align-items: center; }
.layout-adr .parent { display: inline-block; position: relative; font-size: 14px; margin: 0 15px; text-decoration: none; cursor: default; padding-bottom: 10px; }
.layout-adr .parent .con { position: relative; min-width: 120px; padding: 0 26px 0 8px; height: 36px; line-height: 36px; background-color: #fff; border: 1px solid #dedede; border-radius: 3px; }
.layout-adr .parent .con span { display: inline; padding: 5px 12px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.layout-adr .parent .adr-down { position: absolute; display: none; width: 100%; top: 100%; }
.layout-adr .parent .adr-down > ul { line-height: 36px; position: relative; margin: 0; padding: 0; background: #fff; z-index: 999999999; overflow-y: auto; overflow-x: hidden; border: 1px solid #dedede; border-top: 0; max-height: 220px; }
.layout-adr .parent .adr-down > ul > li { padding-left: 8px; background: #ffffff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; margin: 0; list-style: none; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-adr .parent .adr-down > ul > li:hover { background-color: #f39800; color: #fff; }
.layout-adr .parent .adr-down:after { content: "◆"; position: absolute; top: 0px; left: 50%; right: 0px; text-align: center; font-size: 20px; line-height: 8px; margin-top: -5px; color: #ffffff; height: 10px; overflow: hidden; background: rgba(0, 0, 0, 0); }
.layout-adr .parent .adr-down.on { display: block; }
.layout-adr .parent:after { content: ""; pointer-events: none; position: absolute; top: 16px; right: 8px; display: block; border: 6px solid #999; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid transparent; }
.layout-adr.adr-inline .parent .con { padding-left: 4px; }
.layout-adr.adr-inline .parent .con span:hover { background-color: #f39800; color: #fff; }

/*下拉框结构*/
.layout-down { display: inline-block; padding-right: 0.4rem; position: relative; background-color: rgba(0, 0, 0, 0.5); height: 0.4rem; line-height: 0.4rem; cursor: pointer; }
.layout-down span.downTxt { display: inline-block; width: 100px; display: flex; align-items: center; position: relative; color: #fff; border: none; background-color: transparent; box-sizing: border-box; padding: 0.04rem 0.08rem; height: 100%; vertical-align: top; }
.layout-down span.downTxt:after { content: ''; width: 1px; height: 50%; top: 0; bottom: 0; background-color: #ddd; right: 0; position: absolute; margin: auto; }
.layout-down span.downIcon { position: absolute; right: 0; width: 0.4rem; top: 0; height: 100%; text-align: center; box-sizing: border-box; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; color: #fff; height: 0.4rem; line-height: 0.4rem; }
.layout-down ul.down { position: absolute; top: 100%; left: 0%; width: 100%; z-index: 100; display: none; }
.layout-down ul.down > li { display: inline-block; width: 100%; box-sizing: border-box; padding: 0 0.08rem; background-color: rgba(0, 0, 0, 0.5); float: left; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; }
.layout-down ul.down > li > span { color: #bcbcbc; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; }
.layout-down ul.down > li:hover { background-color: #f39800; }
.layout-down ul.down > li:hover > span { color: #fff; }
.layout-down.active span.downIcon { transform: scale(-1); -webkit-transform: scale(-1); -moz-transform: scale(-1); -o-transform: scale(-1); -ms-transform: scale(-1); }
.component { margin: 0 auto; position: relative; margin-bottom: 0.4rem; max-width: 100%; }
.component > ul { width: 100%; max-width: 100%; height: 100%; position: relative; list-style: none; padding: 0; margin: 0 auto; }
.component > ul > li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; z-index: 9; background-position: center; background-repeat: no-repeat; background-size: cover; }
.component > ul > li > img { display: block; max-width: 100%; opacity: 0; max-height: 100%; }
.component > ul .current { opacity: 1; pointer-events: auto; z-index: 10; }
.component nav > a { position: absolute; width: 50px; height: 50px; line-height: 50px; color: #5b4c5c; outline: none; overflow: visible; text-align: center; top: 50%; z-index: 1100; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.component nav .moveNext { right: 0; }
.component .Tcon { position: absolute; width: 80%; height: 90%; top: 0; bottom: 0; margin: auto; left: 0; right: 0; z-index: 11; pointer-events: none; }
.component .Tcon > small { color: #fff; position: absolute; left: 0; right: 0; margin: auto; top: 0; width: max-content; }
.component .Tcon > small > .Tpage { color: #fff; }
.component .Tcon .txtChange { position: relative; pointer-events: auto; height: 100%; width: 100%; }
.component .Tcon .txtChange > [data-txt] { opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 50%; height: max-content; color: #fff; text-align: center; font-size: 0.24rem; pointer-events: none; transition: all 0.4s; -webkit-perspective: 1600px; perspective: 1600px; }
.component .Tcon .txtChange > [data-txt].on { opacity: 1; pointer-events: auto; }
.component .Tcon .txtChange > [data-txt].txtHide { -webkit-animation: scaleUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); }
.component .Tcon .txtChange > [data-txt].txtShow { -webkit-animation: scaleDownUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleDownUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1); }
.component .Tcon .pageChange { position: absolute; pointer-events: auto; width: 100%; bottom: 0; left: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; }
.component .Tcon .pageChange > li { background-color: #fff; opacity: 0.3; display: inline-block; float: left; width: 10px; height: 10px; border-radius: 50%; line-height: 10px; text-align: center; margin: 0.2rem 0.2rem; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.component .Tcon .pageChange > li.on { opacity: 1; }
.component-small { width: 650px; height: 290px; }
.component-small > ul { width: 450px; }
.component-fullwidth { width: 100%; height: 100%; margin-bottom: 0; background: transparent; }
.component-fullwidth > ul { overflow: hidden; }
.component-fullwidth > ul > li { overflow: hidden; }
.component-fullwidth > ul > li > img { min-width: 100%; max-width: none; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.component-transparent { width: 900px; height: 500px; }
.component-transparent > ul { width: 112px; }
.webGL-slider { position: relative; display: flex; align-items: center; width: 100%; height: 100%; margin: 0 auto; z-index: 5; }
.webGL-slider > img { width: 100%; max-width: 100%; position: relative; top: 0; left: 0; z-index: 0; opacity: 0; }
.webGL-slider canvas { position: absolute; top: 0; left: 0; z-index: 2; transform-origin: 50% 0; }
.webGL-slider .pagination { position: absolute; width: 100%; bottom: 5%; left: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; z-index: 6; }
.webGL-slider .pagination > [data-slide] { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 10px; height: 10px; border-radius: 50%; line-height: 10px; text-align: center; margin: 0.2rem 0.2rem; background-color: #FFFFFF; border-radius: 100%; padding: 0; cursor: pointer; position: relative; opacity: 0.2; transition: opacity 0.2s ease-in-out; outline: none; }
.webGL-slider .pagination > [data-slide].on { opacity: 1; }
.webGL-slider a.move-prev { position: absolute; bottom: 100%; width: 36px; height: 36px; line-height: 36px; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0; color: #fff; background-color: transparent; font-size: 24px; opacity: 0.6; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.webGL-slider a.move-prev:hover { opacity: 1; }
.webGL-slider a.move-next { position: absolute; top: 100%; width: 36px; height: 36px; line-height: 36px; text-align: center; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); margin: 0; color: #fff; background-color: transparent; font-size: 24px; opacity: 0.6; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.webGL-slider a.move-next:hover { opacity: 1; }
.webGL-slider .txt-item { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }
.webGL-slider .txt-item > li { position: absolute; top: 50%; left: 10vw; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.webGL-slider .txt-item > li > a { position: absolute; display: inline-block; top: 30vh; left: 0; }
.webGL-slider .txt-item > li > a > i { font-size: 32px; opacity: 0; vertical-align: middle; display: inline-block; animation: fadeInLeftSmall 1.5s ease forwards; animation-delay: 1s; }

/*弹窗*/
.dialog { position: fixed; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; pointer-events: none; visibility: hidden; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; }
.dialog .dialog_mask { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1001; background: rgba(55, 58, 71, 0.6); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; }
.dialog .dialog_content { width: 50%; max-width: 560px; min-width: 290px; background: #fff; padding: 4em; text-align: center; position: relative; z-index: 1005; opacity: 0; }
.dialog.dialog--open,
.dialog.dialog--close { visibility: visible; }
.dialog.dialog--open .dialog_mask,
.dialog.dialog--close .dialog_mask { opacity: 1; pointer-events: auto; }
.dialog.dialog--open .dialog_content,
.dialog.dialog--close .dialog_content { opacity: 1; pointer-events: auto; }
.dialog.dialog--close .dialog_mask { opacity: 0; }

/*animate补充动画*/
@keyframes fadeInLeftSmall {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInLeftSmall { animation-name: fadeInLeftSmall; }
@keyframes fadeInRightSmall {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInRightSmall { animation-name: fadeInRightSmall; }
@keyframes fadeInDownSmall {
  from { opacity: 0; transform: translate3d(0%, -20px, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInDownSmall { animation-name: fadeInDownSmall; }
@keyframes fadeOutDownSmall {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0%, 10%, 0); }
}
.fadeOutDownSmall { animation-name: fadeOutDownSmall; }
@keyframes fadeInUpSmall {
  from { opacity: 0; transform: translate3d(0%, 10px, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInUpSmall { animation-name: fadeInUpSmall; }
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); }
}
.scaleIn { animation-name: scaleIn; }
.f-50 { font-size: 50px; }
.f-48 { font-size: 48px; }
.f-46 { font-size: 46px; }
.f-44 { font-size: 44px; }
.f-42 { font-size: 42px; }
.f-40 { font-size: 40px; }
.f-38 { font-size: 38px; }
.f-36 { font-size: 36px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.f-34 { font-size: 34px; }
.f-32 { font-size: 32px; }
.f-30 { font-size: 30px; }
.f-28 { font-size: 28px; }
.f-26 { font-size: 26px; }
.f-24 { font-size: 24px; }
.f-22 { font-size: 22px; }
.f-20 { font-size: 20px; }
.f-18 { font-size: 21px; color: #4a4a4a; }
.f-16 { font-size: 16px; }
.f-14 { font-size: 14px; }
.f-12 { font-size: 12px; }
.f-light { font-weight: lighter; }
.f-bold { font-weight: bold; }
.f-500 { font-weight: 500; }
.f-left { text-align: left; }
.f-center { text-align: center; }
.f-right { text-align: right; }
.up-word { text-transform: uppercase; }
.v-show { visibility: visible; }
.v-hide { visibility: hidden; }
.pr { position: relative; }
.pa { position: absolute; }
.back-cover { background-size: cover; }
.back-contain { background-size: contain; }
.wid-10 { width: 10%; }
.wid-15 { width: 15%; }
.wid-20 { width: 20%; }
.wid-25 { width: 25%; }
.wid-30 { width: 30%; }
.wid-35 { width: 35%; }
.wid-40 { width: 40%; }
.wid-45 { width: 45%; }
.wid-50 { width: 50%; }
.wid-55 { width: 55%; }
.wid-60 { width: 60%; }
.wid-65 { width: 65%; }
.wid-70 { width: 70%; }
.wid-75 { width: 75%; }
.wid-80 { width: 80%; }
.wid-85 { width: 85%; }
.wid-90 { width: 90%; }
.wid-95 { width: 95%; }
.wid-100 { width: 100%; }
.op-0 { opacity: 0; }
.op-1 { opacity: 0.1; }
.op-2 { opacity: 0.2; }
.op-3 { opacity: 0.3; }
.op-4 { opacity: 0.4; }
.op-5 { opacity: 0.5; }
.op-6 { opacity: 0.6; }
.op-7 { opacity: 0.7; }
.op-8 { opacity: 0.8; }
.op-9 { opacity: 0.9; }
.op-10 { opacity: 1; }
.layout-middle { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.layout-v-middle { position: absolute; top: 0; bottom: 0; margin: auto; }
.layout-h-middle { position: absolute; left: 0; right: 0; margin: auto; }
.pa-v { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.pa-h { position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.pa-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
.layout-tab { display: table; }
.layout-tab > .cell { display: table-cell; vertical-align: middle; }
.mt-1 { margin-top: 1px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mt-4 { margin-top: 4px; }
.mt-5 { margin-top: 5px; }
.mt-6 { margin-top: 6px; }
.mt-7 { margin-top: 7px; }
.mt-8 { margin-top: 8px; }
.mt-9 { margin-top: 9px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-30 { margin-top: 12px; }
.mt-32 { margin-top: 32px; }
.mt-34 { margin-top: 34px; }
.mt-36 { margin-top: 36px; }
.mt-38 { margin-top: 38px; }
.mt-40 { margin-top: 40px; }
.mt-42 { margin-top: 42px; }
.mt-44 { margin-top: 44px; }
.mt-46 { margin-top: 46px; }
.mt-48 { margin-top: 48px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }
.mb-1 { margin-bottom: 1px; }
.mb-3 { margin-bottom: 3px; }
.mb-4 { margin-bottom: 4px; }
.mb-5 { margin-bottom: 5px; }
.mb-6 { margin-bottom: 6px; }
.mb-7 { margin-bottom: 7px; }
.mb-8 { margin-bottom: 8px; }
.mb-9 { margin-bottom: 9px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 21px; }
.mb-32 { margin-bottom: 32px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mb-38 { margin-bottom: 38px; }
.mb-40 { margin-bottom: 40px; }
.mb-42 { margin-bottom: 42px; }
.mb-44 { margin-bottom: 44px; }
.mb-46 { margin-bottom: 46px; }
.mb-48 { margin-bottom: 48px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }
.ml-1 { margin-left: 1px; }
.ml-3 { margin-left: 3px; }
.ml-4 { margin-left: 4px; }
.ml-5 { margin-left: 5px; }
.ml-6 { margin-left: 6px; }
.ml-7 { margin-left: 7px; }
.ml-8 { margin-left: 8px; }
.ml-9 { margin-left: 9px; }
.ml-10 { margin-left: 10px; }
.ml-12 { margin-left: 12px; }
.ml-14 { margin-left: 14px; }
.ml-16 { margin-left: 16px; }
.ml-18 { margin-left: 18px; }
.ml-20 { margin-left: 20px; }
.ml-22 { margin-left: 22px; }
.ml-24 { margin-left: 24px; }
.ml-26 { margin-left: 26px; }
.ml-28 { margin-left: 28px; }
.ml-30 { margin-left: 30px; }
.ml-32 { margin-left: 32px; }
.ml-34 { margin-left: 34px; }
.ml-36 { margin-left: 36px; }
.ml-38 { margin-left: 38px; }
.ml-40 { margin-left: 40px; }
.ml-42 { margin-left: 42px; }
.ml-44 { margin-left: 44px; }
.ml-46 { margin-left: 46px; }
.ml-48 { margin-left: 48px; }
.ml-50 { margin-left: 50px; }
.ml-60 { margin-left: 60px; }
.ml-70 { margin-left: 70px; }
.ml-80 { margin-left: 80px; }
.ml-90 { margin-left: 90px; }
.ml-100 { margin-left: 100px; }
.mr-1 { margin-right: 1px; }
.mr-3 { margin-right: 3px; }
.mr-4 { margin-right: 4px; }
.mr-5 { margin-right: 5px; }
.mr-6 { margin-right: 6px; }
.mr-7 { margin-right: 7px; }
.mr-8 { margin-right: 8px; }
.mr-9 { margin-right: 9px; }
.mr-10 { margin-right: 10px; }
.mr-12 { margin-right: 12px; }
.mr-14 { margin-right: 14px; }
.mr-16 { margin-right: 16px; }
.mr-18 { margin-right: 18px; }
.mr-20 { margin-right: 20px; }
.mr-22 { margin-right: 22px; }
.mr-24 { margin-right: 24px; }
.mr-26 { margin-right: 26px; }
.mr-28 { margin-right: 28px; }
.mr-30 { margin-right: 30px; }
.mr-32 { margin-right: 32px; }
.mr-34 { margin-right: 34px; }
.mr-36 { margin-right: 36px; }
.mr-38 { margin-right: 38px; }
.mr-40 { margin-right: 40px; }
.mr-42 { margin-right: 42px; }
.mr-44 { margin-right: 44px; }
.mr-46 { margin-right: 46px; }
.mr-48 { margin-right: 48px; }
.mr-50 { margin-right: 50px; }
.mr-60 { margin-right: 60px; }
.mr-70 { margin-right: 70px; }
.mr-80 { margin-right: 80px; }
.mr-90 { margin-right: 90px; }
.mr-100 { margin-right: 100px; }
.pt-1 { padding-top: 1px; }
.pt-3 { padding-top: 3px; }
.pt-4 { padding-top: 4px; }
.pt-5 { padding-top: 5px; }
.pt-6 { padding-top: 6px; }
.pt-7 { padding-top: 7px; }
.pt-8 { padding-top: 8px; }
.pt-9 { padding-top: 9px; }
.pt-10 { padding-top: 10px; }
.pt-12 { padding-top: 12px; }
.pt-14 { padding-top: 14px; }
.pt-16 { padding-top: 16px; }
.pt-18 { padding-top: 18px; }
.pt-20 { padding-top: 20px; }
.pt-22 { padding-top: 22px; }
.pt-24 { padding-top: 24px; }
.pt-26 { padding-top: 26px; }
.pt-28 { padding-top: 28px; }
.pt-30 { padding-top: 30px; }
.pt-32 { padding-top: 32px; }
.pt-34 { padding-top: 34px; }
.pt-36 { padding-top: 36px; }
.pt-38 { padding-top: 38px; }
.pt-40 { padding-top: 40px; }
.pt-42 { padding-top: 42px; }
.pt-44 { padding-top: 44px; }
.pt-46 { padding-top: 46px; }
.pt-48 { padding-top: 48px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }
.pb-1 { padding-bottom: 1px; }
.pb-3 { padding-bottom: 3px; }
.pb-4 { padding-bottom: 4px; }
.pb-5 { padding-bottom: 5px; }
.pb-6 { padding-bottom: 6px; }
.pb-7 { padding-bottom: 7px; }
.pb-8 { padding-bottom: 8px; }
.pb-9 { padding-bottom: 9px; }
.pb-10 { padding-bottom: 10px; }
.pb-12 { padding-bottom: 12px; }
.pb-14 { padding-bottom: 14px; }
.pb-16 { padding-bottom: 16px; }
.pb-18 { padding-bottom: 18px; }
.pb-20 { padding-bottom: 20px; }
.pb-22 { padding-bottom: 22px; }
.pb-24 { padding-bottom: 24px; }
.pb-26 { padding-bottom: 26px; }
.pb-28 { padding-bottom: 28px; }
.pb-30 { padding-bottom: 30px; }
.pb-32 { padding-bottom: 32px; }
.pb-34 { padding-bottom: 34px; }
.pb-36 { padding-bottom: 36px; }
.pb-38 { padding-bottom: 38px; }
.pb-40 { padding-bottom: 40px; }
.pb-42 { padding-bottom: 42px; }
.pb-44 { padding-bottom: 44px; }
.pb-46 { padding-bottom: 46px; }
.pb-48 { padding-bottom: 48px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pl-1 { padding-left: 1px; }
.pl-3 { padding-left: 3px; }
.pl-4 { padding-left: 4px; }
.pl-5 { padding-left: 5px; }
.pl-6 { padding-left: 6px; }
.pl-7 { padding-left: 7px; }
.pl-8 { padding-left: 8px; }
.pl-9 { padding-left: 9px; }
.pl-10 { padding-left: 10px; }
.pl-12 { padding-left: 12px; }
.pl-14 { padding-left: 14px; }
.pl-16 { padding-left: 16px; }
.pl-18 { padding-left: 18px; }
.pl-20 { padding-left: 20px; }
.pl-22 { padding-left: 22px; }
.pl-24 { padding-left: 24px; }
.pl-26 { padding-left: 26px; }
.pl-28 { padding-left: 28px; }
.pl-30 { padding-left: 30px; }
.pl-32 { padding-left: 32px; }
.pl-34 { padding-left: 34px; }
.pl-36 { padding-left: 36px; }
.pl-38 { padding-left: 38px; }
.pl-40 { padding-left: 40px; }
.pl-42 { padding-left: 42px; }
.pl-44 { padding-left: 44px; }
.pl-46 { padding-left: 46px; }
.pl-48 { padding-left: 48px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-70 { padding-left: 70px; }
.pl-80 { padding-left: 80px; }
.pl-90 { padding-left: 90px; }
.pl-100 { padding-left: 100px; }
.pr-1 { padding-right: 1px; }
.pr-3 { padding-right: 3px; }
.pr-4 { padding-right: 4px; }
.pr-5 { padding-right: 5px; }
.pr-6 { padding-right: 6px; }
.pr-7 { padding-right: 7px; }
.pr-8 { padding-right: 8px; }
.pr-9 { padding-right: 9px; }
.pr-10 { padding-right: 10px; }
.pr-12 { padding-right: 12px; }
.pr-14 { padding-right: 14px; }
.pr-16 { padding-right: 16px; }
.pr-18 { padding-right: 18px; }
.pr-20 { padding-right: 20px; }
.pr-22 { padding-right: 22px; }
.pr-24 { padding-right: 24px; }
.pr-26 { padding-right: 26px; }
.pr-28 { padding-right: 28px; }
.pr-30 { padding-right: 30px; }
.pr-32 { padding-right: 32px; }
.pr-34 { padding-right: 34px; }
.pr-36 { padding-right: 36px; }
.pr-38 { padding-right: 38px; }
.pr-40 { padding-right: 40px; }
.pr-42 { padding-right: 42px; }
.pr-44 { padding-right: 44px; }
.pr-46 { padding-right: 46px; }
.pr-48 { padding-right: 48px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-70 { padding-right: 70px; }
.pr-80 { padding-right: 80px; }
.pr-90 { padding-right: 90px; }
.pr-100 { padding-right: 100px; }
@media screen and (max-width:1500px) {
  html { font-size: 80px; }
  .f-60 { font-size: 58px; }
  .f-50 { font-size: 42px; }
  .f-48 { font-size: 46px; }
  .f-46 { font-size: 44px; }
  .f-44 { font-size: 42px; }
  .f-42 { font-size: 40px; }
  .f-40 { font-size: 38px; }
  .f-38 { font-size: 36px; }
  .f-36 { font-size: 34px; }
  .f-34 { font-size: 32px; }
  .f-32 { font-size: 30px; }
  .f-30 { font-size: 28px; }
  .f-28 { font-size: 24px; }
  .f-26 { font-size: 24px; }
  .f-24 { font-size: 22px; }
  .f-22 { font-size: 20px; }
  .f-20 { font-size: 18px; }
  .f-18 { font-size: 16px; }
  .f-16 { font-size: 14px; }
  .f-14 { font-size: 12px; }
  .f-12 { font-size: 12px; }
}
@media screen and (max-width:1366px) {
  html { font-size: 80px; }
  a,
  span,
  li,
  b,
  i,
  label,
  p,
  strong,
  div,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  small,
  em,
  li,
  pre,
  form,
  fieldset,
  legend,
  button,
  input,
  textarea,
  th,
  td { font-size: 14px; font-family: word; }
  .f-60 { font-size: 58px; }
  .f-50 { font-size: 48px; }
  .f-48 { font-size: 42px; }
  .f-46 { font-size: 42px; }
  .f-44 { font-size: 42px; }
  .f-42 { font-size: 40px; }
  .f-40 { font-size: 30px; }
  .f-38 { font-size: 36px; }
  .f-36 { font-size: 30px; }
  .f-34 { font-size: 30px; }
  .f-32 { font-size: 30px; }
  .f-30 { font-size: 28px; }
  .f-28 { font-size: 24px; }
  .f-26 { font-size: 24px; }
  .f-24 { font-size: 18px; }
  .f-22 { font-size: 18px; }
  .f-20 { font-size: 18px; }
  .f-18 { font-size: 16px; }
  .f-16 { font-size: 14px; }
  .f-14 { font-size: 12px; }
  .f-12 { font-size: 12px; }
  p { font-size: 14px; line-height: 1.8; }
}
@media screen and (max-width:1280px) {
  html { font-size: 80px; }
  .f-60 { font-size: 40px; }
  .f-50 { font-size: 34px; }
  .f-48 { font-size: 32px; }
  .f-46 { font-size: 30px; }
  .f-44 { font-size: 28px; }
  .f-42 { font-size: 26px; }
  .f-40 { font-size: 24px; }
  .f-38 { font-size: 22px; }
  .f-36 { font-size: 20px; }
  .f-34 { font-size: 20px; }
  .f-32 { font-size: 18px; }
  .f-30 { font-size: 18px; }
  .f-28 { font-size: 16px; }
  .f-26 { font-size: 16px; }
  .f-24 { font-size: 16px; }
  .f-22 { font-size: 14px; }
  .f-20 { font-size: 14px; }
  .f-18 { font-size: 14px; }
  .f-16 { font-size: 12px; }
  .f-14 { font-size: 12px; }
  .f-12 { font-size: 12px; }
  p { font-size: 14px; line-height: 1.8; }
}
@media screen and (max-width:700px) {
  html { font-size: 50px; }
  p { font-size: 12px; line-height: 180%; }
  small,
  span { font-size: 12px; }
  .f-80 { font-size: 28px; }
  .f-72 { font-size: 26px; }
  .f-60 { font-size: 24px; }
  .f-50 { font-size: 24px; }
  .f-48 { font-size: 24px; }
  .f-46 { font-size: 22px; }
  .f-44 { font-size: 22px; }
  .f-42 { font-size: 20px; }
  .f-40 { font-size: 20px; }
  .f-38 { font-size: 18px; }
  .f-36 { font-size: 17px; }
  .f-34 { font-size: 17px; }
  .f-32 { font-size: 16px; }
  .f-30 { font-size: 16px; }
  .f-28 { font-size: 16px; }
  .f-26 { font-size: 16px; }
  .f-24 { font-size: 14px; }
  .f-22 { font-size: 14px; }
  .f-20 { font-size: 14px; }
  .f-18 { font-size: 14px; }
  .f-16 { font-size: 14px; }
  .f-14 { font-size: 12px; }
  .f-12 { font-size: 12px; }
  .mt-1 { margin-top: 1px; }
  .mt-3 { margin-top: 3px; }
  .mt-4 { margin-top: 4px; }
  .mt-5 { margin-top: 4px; }
  .mt-6 { margin-top: 4px; }
  .mt-7 { margin-top: 4px; }
  .mt-8 { margin-top: 4px; }
  .mt-9 { margin-top: 4px; }
  .mt-10 { margin-top: 6px; }
  .mt-12 { margin-top: 6px; }
  .mt-14 { margin-top: 6px; }
  .mt-16 { margin-top: 6px; }
  .mt-18 { margin-top: 6px; }
  .mt-20 { margin-top: 8px; }
  .mt-22 { margin-top: 8px; }
  .mt-24 { margin-top: 8px; }
  .mt-26 { margin-top: 8px; }
  .mt-28 { margin-top: 10px; }
  .mt-30 { margin-top: 10px; }
  .mt-32 { margin-top: 10px; }
  .mt-34 { margin-top: 10px; }
  .mt-36 { margin-top: 12px; }
  .mt-38 { margin-top: 12px; }
  .mt-40 { margin-top: 12px; }
  .mt-42 { margin-top: 14px; }
  .mt-44 { margin-top: 14px; }
  .mt-46 { margin-top: 16px; }
  .mt-48 { margin-top: 16px; }
  .mt-50 { margin-top: 18px; }
  .mt-60 { margin-top: 18px; }
  .mt-70 { margin-top: 20px; }
  .mt-80 { margin-top: 22px; }
  .mt-90 { margin-top: 26px; }
  .mt-100 { margin-top: 30px; }
  .mb-1 { margin-bottom: 1px; }
  .mb-3 { margin-bottom: 3px; }
  .mb-4 { margin-bottom: 4px; }
  .mb-5 { margin-bottom: 4px; }
  .mb-6 { margin-bottom: 4px; }
  .mb-7 { margin-bottom: 4px; }
  .mb-8 { margin-bottom: 4px; }
  .mb-9 { margin-bottom: 4px; }
  .mb-10 { margin-bottom: 6px; }
  .mb-12 { margin-bottom: 6px; }
  .mb-14 { margin-bottom: 6px; }
  .mb-16 { margin-bottom: 6px; }
  .mb-18 { margin-bottom: 6px; }
  .mb-20 { margin-bottom: 8px; }
  .mb-22 { margin-bottom: 8px; }
  .mb-24 { margin-bottom: 8px; }
  .mb-26 { margin-bottom: 8px; }
  .mb-28 { margin-bottom: 10px; }
  .mb-30 { margin-bottom: 10px; }
  .mb-32 { margin-bottom: 10px; }
  .mb-34 { margin-bottom: 10px; }
  .mb-36 { margin-bottom: 12px; }
  .mb-38 { margin-bottom: 12px; }
  .mb-40 { margin-bottom: 12px; }
  .mb-42 { margin-bottom: 14px; }
  .mb-44 { margin-bottom: 14px; }
  .mb-46 { margin-bottom: 16px; }
  .mb-48 { margin-bottom: 16px; }
  .mb-50 { margin-bottom: 18px; }
  .mb-60 { margin-bottom: 18px; }
  .mb-70 { margin-bottom: 20px; }
  .mb-80 { margin-bottom: 22px; }
  .mb-90 { margin-bottom: 26px; }
  .mb-100 { margin-bottom: 30px; }
  .ml-1 { margin-left: 1px; }
  .ml-3 { margin-left: 3px; }
  .ml-4 { margin-left: 4px; }
  .ml-5 { margin-left: 4px; }
  .ml-6 { margin-left: 4px; }
  .ml-7 { margin-left: 4px; }
  .ml-8 { margin-left: 4px; }
  .ml-9 { margin-left: 4px; }
  .ml-10 { margin-left: 6px; }
  .ml-12 { margin-left: 6px; }
  .ml-14 { margin-left: 6px; }
  .ml-16 { margin-left: 6px; }
  .ml-18 { margin-left: 6px; }
  .ml-20 { margin-left: 8px; }
  .ml-22 { margin-left: 8px; }
  .ml-24 { margin-left: 8px; }
  .ml-26 { margin-left: 8px; }
  .ml-28 { margin-left: 10px; }
  .ml-30 { margin-left: 10px; }
  .ml-32 { margin-left: 10px; }
  .ml-34 { margin-left: 10px; }
  .ml-36 { margin-left: 12px; }
  .ml-38 { margin-left: 12px; }
  .ml-40 { margin-left: 12px; }
  .ml-42 { margin-left: 14px; }
  .ml-44 { margin-left: 14px; }
  .ml-46 { margin-left: 16px; }
  .ml-48 { margin-left: 16px; }
  .ml-50 { margin-left: 18px; }
  .ml-60 { margin-left: 18px; }
  .ml-70 { margin-left: 20px; }
  .ml-80 { margin-left: 22px; }
  .ml-90 { margin-left: 26px; }
  .ml-100 { margin-left: 30px; }
  .mr-1 { margin-right: 1px; }
  .mr-3 { margin-right: 3px; }
  .mr-4 { margin-right: 4px; }
  .mr-5 { margin-right: 4px; }
  .mr-6 { margin-right: 4px; }
  .mr-7 { margin-right: 4px; }
  .mr-8 { margin-right: 4px; }
  .mr-9 { margin-right: 4px; }
  .mr-10 { margin-right: 6px; }
  .mr-12 { margin-right: 6px; }
  .mr-14 { margin-right: 6px; }
  .mr-16 { margin-right: 6px; }
  .mr-18 { margin-right: 6px; }
  .mr-20 { margin-right: 8px; }
  .mr-22 { margin-right: 8px; }
  .mr-24 { margin-right: 8px; }
  .mr-26 { margin-right: 8px; }
  .mr-28 { margin-right: 10px; }
  .mr-30 { margin-right: 10px; }
  .mr-32 { margin-right: 10px; }
  .mr-34 { margin-right: 10px; }
  .mr-36 { margin-right: 12px; }
  .mr-38 { margin-right: 12px; }
  .mr-40 { margin-right: 12px; }
  .mr-42 { margin-right: 14px; }
  .mr-44 { margin-right: 14px; }
  .mr-46 { margin-right: 16px; }
  .mr-48 { margin-right: 16px; }
  .mr-50 { margin-right: 18px; }
  .mr-60 { margin-right: 18px; }
  .mr-70 { margin-right: 20px; }
  .mr-80 { margin-right: 22px; }
  .mr-90 { margin-right: 26px; }
  .mr-100 { margin-right: 30px; }
  .pt-1 { padding-top: 1px; }
  .pt-3 { padding-top: 3px; }
  .pt-4 { padding-top: 4px; }
  .pt-5 { padding-top: 4px; }
  .pt-6 { padding-top: 4px; }
  .pt-7 { padding-top: 4px; }
  .pt-8 { padding-top: 4px; }
  .pt-9 { padding-top: 4px; }
  .pt-10 { padding-top: 6px; }
  .pt-12 { padding-top: 6px; }
  .pt-14 { padding-top: 6px; }
  .pt-16 { padding-top: 6px; }
  .pt-18 { padding-top: 6px; }
  .pt-20 { padding-top: 8px; }
  .pt-22 { padding-top: 8px; }
  .pt-24 { padding-top: 8px; }
  .pt-26 { padding-top: 8px; }
  .pt-28 { padding-top: 10px; }
  .pt-30 { padding-top: 10px; }
  .pt-32 { padding-top: 10px; }
  .pt-34 { padding-top: 10px; }
  .pt-36 { padding-top: 12px; }
  .pt-38 { padding-top: 12px; }
  .pt-40 { padding-top: 12px; }
  .pt-42 { padding-top: 14px; }
  .pt-44 { padding-top: 14px; }
  .pt-46 { padding-top: 16px; }
  .pt-48 { padding-top: 16px; }
  .pt-50 { padding-top: 18px; }
  .pt-60 { padding-top: 18px; }
  .pt-70 { padding-top: 20px; }
  .pt-80 { padding-top: 22px; }
  .pt-90 { padding-top: 26px; }
  .pt-100 { padding-top: 30px; }
  .pb-1 { padding-bottom: 1px; }
  .pb-3 { padding-bottom: 3px; }
  .pb-4 { padding-bottom: 4px; }
  .pb-5 { padding-bottom: 4px; }
  .pb-6 { padding-bottom: 4px; }
  .pb-7 { padding-bottom: 4px; }
  .pb-8 { padding-bottom: 4px; }
  .pb-9 { padding-bottom: 4px; }
  .pb-10 { padding-bottom: 6px; }
  .pb-12 { padding-bottom: 6px; }
  .pb-14 { padding-bottom: 6px; }
  .pb-16 { padding-bottom: 6px; }
  .pb-18 { padding-bottom: 6px; }
  .pb-20 { padding-bottom: 8px; }
  .pb-22 { padding-bottom: 8px; }
  .pb-24 { padding-bottom: 8px; }
  .pb-26 { padding-bottom: 8px; }
  .pb-28 { padding-bottom: 10px; }
  .pb-30 { padding-bottom: 10px; }
  .pb-32 { padding-bottom: 10px; }
  .pb-34 { padding-bottom: 10px; }
  .pb-36 { padding-bottom: 12px; }
  .pb-38 { padding-bottom: 12px; }
  .pb-40 { padding-bottom: 12px; }
  .pb-42 { padding-bottom: 14px; }
  .pb-44 { padding-bottom: 14px; }
  .pb-46 { padding-bottom: 16px; }
  .pb-48 { padding-bottom: 16px; }
  .pb-50 { padding-bottom: 18px; }
  .pb-60 { padding-bottom: 18px; }
  .pb-70 { padding-bottom: 20px; }
  .pb-80 { padding-bottom: 22px; }
  .pb-90 { padding-bottom: 26px; }
  .pb-100 { padding-bottom: 30px; }
  .pl-1 { padding-left: 1px; }
  .pl-3 { padding-left: 3px; }
  .pl-4 { padding-left: 4px; }
  .pl-5 { padding-left: 4px; }
  .pl-6 { padding-left: 4px; }
  .pl-7 { padding-left: 4px; }
  .pl-8 { padding-left: 4px; }
  .pl-9 { padding-left: 4px; }
  .pl-10 { padding-left: 6px; }
  .pl-12 { padding-left: 6px; }
  .pl-14 { padding-left: 6px; }
  .pl-16 { padding-left: 6px; }
  .pl-18 { padding-left: 6px; }
  .pl-20 { padding-left: 8px; }
  .pl-22 { padding-left: 8px; }
  .pl-24 { padding-left: 8px; }
  .pl-26 { padding-left: 8px; }
  .pl-28 { padding-left: 10px; }
  .pl-30 { padding-left: 10px; }
  .pl-32 { padding-left: 10px; }
  .pl-34 { padding-left: 10px; }
  .pl-36 { padding-left: 12px; }
  .pl-38 { padding-left: 12px; }
  .pl-40 { padding-left: 12px; }
  .pl-42 { padding-left: 14px; }
  .pl-44 { padding-left: 14px; }
  .pl-46 { padding-left: 16px; }
  .pl-48 { padding-left: 16px; }
  .pl-50 { padding-left: 18px; }
  .pl-60 { padding-left: 18px; }
  .pl-70 { padding-left: 20px; }
  .pl-80 { padding-left: 22px; }
  .pl-90 { padding-left: 26px; }
  .pl-100 { padding-left: 30px; }
  .pr-1 { padding-right: 1px; }
  .pr-3 { padding-right: 3px; }
  .pr-4 { padding-right: 4px; }
  .pr-5 { padding-right: 4px; }
  .pr-6 { padding-right: 4px; }
  .pr-7 { padding-right: 4px; }
  .pr-8 { padding-right: 4px; }
  .pr-9 { padding-right: 4px; }
  .pr-10 { padding-right: 6px; }
  .pr-12 { padding-right: 6px; }
  .pr-14 { padding-right: 6px; }
  .pr-16 { padding-right: 6px; }
  .pr-18 { padding-right: 6px; }
  .pr-20 { padding-right: 8px; }
  .pr-22 { padding-right: 8px; }
  .pr-24 { padding-right: 8px; }
  .pr-26 { padding-right: 8px; }
  .pr-28 { padding-right: 10px; }
  .pr-30 { padding-right: 10px; }
  .pr-32 { padding-right: 10px; }
  .pr-34 { padding-right: 10px; }
  .pr-36 { padding-right: 12px; }
  .pr-38 { padding-right: 12px; }
  .pr-40 { padding-right: 12px; }
  .pr-42 { padding-right: 14px; }
  .pr-44 { padding-right: 14px; }
  .pr-46 { padding-right: 16px; }
  .pr-48 { padding-right: 16px; }
  .pr-50 { padding-right: 18px; }
  .pr-60 { padding-right: 18px; }
  .pr-70 { padding-right: 20px; }
  .pr-80 { padding-right: 22px; }
  .pr-90 { padding-right: 26px; }
  .pr-100 { padding-right: 30px; }
}

/* input:range样式 */
input[type=range] { -webkit-appearance: none; width: 300px; background: -webkit-linear-gradient(#059cfa, #059cfa) no-repeat; background-size: 0% 100%; border-radius: 10px;  /*这个属性设置使填充进度条时的图形为圆角*/ }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 0px;  /*将轨道设为圆角的*/ box-shadow: 0 1px 1px #def3f8, inset 0 12px 12px #0d1112;  /*轨道内置阴影效果*/ }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 25px; width: 25px; margin-top: -12px;  /*使滑块超出轨道部分的偏移量相等*/ background: #69adff; border-radius: 50%;  /*外观设置为圆形*/ border: solid 0.125em rgba(205, 224, 230, 0.5);  /*设置边框*/ box-shadow: 0 .125em .125em #3b4547;  /*添加底部阴影*/ }
input[type=range]::-moz-range-progress { background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); height: 13px; border-radius: 10px; }
input[type=range]::-ms-track { height: 25px; border-radius: 10px; box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; border-color: transparent;  /*去除原有边框*/ color: transparent;  /*去除轨道内的竖线*/ }
input[type=range]::-ms-thumb { border: solid 0.125em rgba(205, 224, 230, 0.5); height: 25px; width: 25px; border-radius: 50%; background: #ffffff; margin-top: -5px; box-shadow: 0 .125em .125em #3b4547; }
input[type=range]::-ms-fill-lower {  /*进度条已填充的部分*/
height: 22px; border-radius: 10px; background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); }
input[type=range]::-ms-fill-upper {  /*进度条未填充的部分*/
height: 22px; border-radius: 10px; background: #ffffff; }
input[type=range]:focus::-ms-fill-lower { background: linear-gradient(to right, #059cfa, #ffffff 100%, #ffffff); }
input[type=range]:focus::-ms-fill-upper { background: #ffffff; }

/*基础结构*/
#bloc { min-height: 100vh; }
header { position: fixed; height: 0.9rem; width: 100%; z-index: 1000; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
header .nav { z-index: 10; width: 100%; height: 100%; padding: 0 4%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; display: flex; justify-content: space-between; align-items: center; }
header .logo-box { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; }
header .logo-box > img { height: 50%; }
header .pc-nav { height: 100%; position: relative; z-index: 5; }
header .pc-nav > ul { height: 100%; display: flex; justify-content: center; align-items: center; }
header .pc-nav > ul > li { text-align: center; height: 100%; display: flex; align-content: center; margin: 0 0.24rem; position: relative; }
header .pc-nav > ul > li > a { text-align: center; line-height: 0.9rem; color: #fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; position: relative; font-weight: bolder; display: inline-block; }
header .pc-nav > ul > li > a:after { content: ""; position: absolute; width: 100%; height: 3px; background-color: #f39800; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; bottom: 0; left: 0; opacity: 0; font-weight: bold; }
header .pc-nav > ul > li .out-nav { position: absolute; left: 0; visibility: hidden; pointer-events: none; top: 99%; opacity: 0; transform: translateY(-5px); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
header .pc-nav > ul > li .out-nav > span { height: 20px; line-height: 20px; position: relative; width: 100%; display: block; }
header .pc-nav > ul > li .out-nav > span:after { content: ""; width: 0; height: 0; position: absolute; border-style: solid; border-width: 8px; border-color: transparent transparent #fff transparent; left: 20px; bottom: 0; }
header .pc-nav > ul > li .out-nav .items { display: flex; justify-content: space-between; align-items: stretch; background-color: #f0f0f0; }
header .pc-nav > ul > li .out-nav .items .left { padding: 16px 24px; }
header .pc-nav > ul > li .out-nav .items .left .list { justify-content: center; align-items: center; height: 100%; display: none; }
header .pc-nav > ul > li .out-nav .items .left .list .pic { width: 1.8rem; }
header .pc-nav > ul > li .out-nav .items .left .list .msg { width: 1.8rem; padding-left: 20px; }
header .pc-nav > ul > li .out-nav .items .left .list .msg h3,
header .pc-nav > ul > li .out-nav .items .left .list .msg p { opacity: 0; }
header .pc-nav > ul > li .out-nav .items .left .list.on { display: flex; }
header .pc-nav > ul > li .out-nav .items .right { padding: 16px 24px; background-color: #fff; min-width: 130px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
header .pc-nav > ul > li .out-nav .items .right > a { display: block; margin: 5px auto; padding: 0 10px; white-space: nowrap; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
header .pc-nav > ul > li .out-nav .items .right > a.on,
header .pc-nav > ul > li .out-nav .items .right > a:hover { color: #f39800; }
header .pc-nav > ul > li:hover { visibility: visible; }
header .pc-nav > ul > li:hover > a { color: #f39800 !important; }
header .pc-nav > ul > li:hover > a:after { opacity: 1; }
header .pc-nav > ul > li.on > a { color: #f39800 !important; }
header .pc-nav > ul > li.on > a:after { opacity: 1; }
header .pc-nav > ul > li.go-down:hover .out-nav { pointer-events: auto; opacity: 1; transform: none; visibility: visible; }
header .go-search { position: relative; z-index: 5; }
header .go-search > a { color: #fff; border-color: #fff; }
header .go-search > a:hover { color: #f39800 !important; border-color: #f39800 !important; }
header #menu { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; height: 20px; position: absolute; top: 0; bottom: 0; margin: auto; right: 24px; z-index: 13; }
header #menu span { background-color: #fff; height: 2px; border-radius: 50px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }
header #menu span:nth-of-type(1) { width: 25px; }
header #menu span:nth-of-type(2) { width: 25px; }
header #menu span:nth-of-type(3) { width: 25px; }
header #menu.on span { transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; }
header #menu.on span:nth-of-type(1) { width: 27px; transform-origin: 100% 50%; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); }
header #menu.on span:nth-of-type(2) { opacity: 0; transform: translateX(-10px); -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); }
header #menu.on span:nth-of-type(3) { width: 27px; transform-origin: 100% 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); }
header .nav-app { position: fixed; right: 0; top: 0; z-index: 10000; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; }
header .nav-app > .mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; background-color: rgba(0, 0, 0, 0.15); }
header .nav-app > .child { position: absolute; height: 100%; width: 60%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); background-color: rgba(0, 0, 0, 0.92); top: 0; right: 0; z-index: 5; }
header .nav-app > .child > ul { padding-top: 36px; }
header .nav-app > .child > ul > li { position: relative; }
header .nav-app > .child > ul > li > i { height: 44px; line-height: 44px; position: absolute; right: 24px; top: 0; font-size: 12px; width: 44px; text-align: center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
header .nav-app > .child > ul > li > a { border-top: 1px rgba(8, 32, 56, 0.3) solid; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); text-shadow: none; display: inline-block; width: 100%; color: #fff; height: 44px; line-height: 44px; font-weight: bold; font-size: 14px; padding: 0 24px; }
header .nav-app > .child > ul > li.go-child.on > i { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); }
header .nav-app > .child > ul > ol { display: none; background-color: #f39800; }
header .nav-app > .child > ul > ol > li > a { width: 100%; display: inline-block; color: #fff; height: 38px; line-height: 38px; padding: 0 24px; text-indent: 10px; opacity: 0.9; }
header .nav-app > .child > div { display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; bottom: 20px; width: 100%; left: 0; }
header .nav-app > .child > div > a { width: 60px; text-align: center; color: #fff; }
header .nav-app.on { opacity: 1; pointer-events: auto; }
header .nav-app.on > .child { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); }
header.on .pc-nav > ul > li > a { color: #000; text-shadow: none !important; }
header.on .go-search > a { color: #000; border-color: #000; }
header.on .search-wrap:after { background-color: #fff; }
header.on #menu span { background-color: #000; }
header.active { background-color: #fff; }
.wrapper { overflow: hidden; position: relative; z-index: 2; }
footer { height: 200px; padding: 0 4%; position: relative; z-index: 5; }
footer .fmain { height: 100%; padding: 34px 0; display: flex; justify-content: space-between; align-items: stretch; }
footer .fmain .left { width: 320px; }
footer .fmain .left a { display: inline-block; min-width: 40px; text-align: center; padding: 0 20px; margin-right: 0.2rem; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; font-size: 14px; font-weight: bolder; margin-bottom: 3px; }
footer .fmain .left a:hover { color: #f39800; }
footer .fmain .left .other { padding-left: 20px; color: #a6a6a6; line-height: 1.6; font-size: 12px; }
footer .fmain .mid { width: calc(100% - 600px); border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; padding: 0 5%; }
footer .fmain .mid > ul { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
footer .fmain .mid > ul > li { margin: 0 10px 10px 0; }
footer .fmain .mid > ul > li h3 { margin-bottom: 3px; color: #333333; }
footer .fmain .mid > ul > li p { color: #a6a6a6; line-height: 1.6; font-size: 12px; }
@media screen and (min-width:800px) {
  footer .fmain .mid > ul > li p { min-height: 38px; }
}
footer .fmain .mid > ul > li:nth-of-type(1) { width: calc(100%/3 - 20px); }
footer .fmain .mid > ul > li:nth-of-type(2) { width: calc(100%/3 - 20px); }
footer .fmain .mid > ul > li:nth-of-type(3) { width: calc(100%/3 - 0px); margin-right: 0; }
footer .fmain .mid > ul > li:nth-of-type(4) { width: calc(100%/3 - 20px); }
footer .fmain .mid > ul > li:nth-of-type(5) { width: calc(200%/3 - 0px); margin-right: 0; }
footer .fmain .right { width: 300px; text-align: right; position: relative; }
footer .fmain .right .inter:nth-of-type(1) > span { color: #fff; background-color: #f39800; }
footer .fmain .right .inter:nth-of-type(2).on .wb { background-color: #f39800; }
footer .fmain .right .inter:nth-of-type(3).on .wx { background-color: #f39800; }
footer .fmain .right .wb { width: 34px; height: 34px; border-radius: 50%; line-height: 34px; text-align: center; background-color: #000; color: #fff; display: inline-block; margin-left: 20px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
@media screen and (min-width:800px) {
  footer .fmain .right .wb:hover { background-color: #f39800; }
}
footer .fmain .right .wx { width: 34px; height: 34px; border-radius: 50%; line-height: 34px; text-align: center; background-color: #000; color: #fff; display: inline-block; margin-left: 20px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
@media screen and (min-width:800px) {
  footer .fmain .right .wx:hover { background-color: #f39800; }
}
footer .fmain .right .other { text-align: right; position: absolute; width: 100%; right: 0; bottom: 0; margin-top: 30px; font-size: 12px; padding-left: 10px; }
#load { position: fixed; z-index: 10000; width: 100%; height: 100%; background-color: #fff; }
#load .lo1 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.after-inner header { background-color: #fff; }
.after-inner header .nav { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
.after-inner header .pc-nav > ul > li > a { color: #000; }
.after-inner header .go-search > a { color: #000; border-color: rgba(0, 0, 0, 0.18); }
.after-inner header .search-wrap:after { background-color: #fff; }
.after-inner header #menu span { background-color: #000; }
.after-inner .wrapper { padding-top: 0.9rem; }
.after-inner .wrapper #top > .msg { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); left: 0; right: 0; margin: auto; overflow: hidden; top: 60%; }
.after-inner .wrapper #top > .msg > .topic p { position: relative; white-space: normal; height: 50px; line-height: 50px; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; }
.after-inner .wrapper #top > .msg > .topic p .line { background-color: rgba(255, 255, 255, 0.6); width: auto; flex-grow: 1; margin-left: 0.5rem; }
.after-inner .wrapper #top > .msg > .topic p .line > span { position: absolute; bottom: 34px; right: 0; }
.after-inner .wrapper #top > .msg > .topic p .line > span > em { font-size: 15px; vertical-align: middle; display: inline-block; }
.after-inner .wrapper #top > .msg > .topic p .line > span > small { width: 18px; display: inline-block; margin-left: 10px; height: 28px; border-radius: 50px; border: 2px solid #fff; position: relative; vertical-align: middle; }
.after-inner .wrapper #top > .msg > .topic p .line > span > small:after { content: ""; position: absolute; width: 2px; height: 7px; left: 6px; top: 7px; background-color: #ffffff; border-radius: 50px; z-index: 5; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; }
.after-inner .wrapper #top > .msg > .items { display: flex; height: 70px; justify-content: flex-start; align-items: center; }
.after-inner .wrapper #top > .msg > .items > li { width: 3rem; background-color: #fff; height: 100%; }
.after-inner .wrapper #top > .msg > .items > li > a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.after-inner .wrapper #top > .msg > .items > li > a > i { width: 0.8rem; height: 0.8rem; line-height: 0.8rem; text-align: center; text-align: left; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.after-inner .wrapper #top > .msg > .items > li > a > span > small,
.after-inner .wrapper #top > .msg > .items > li > a > span > span { display: block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.after-inner .wrapper #top > .msg > .items > li > a:hover,
.after-inner .wrapper #top > .msg > .items > li > a.on { background-color: #f39800; }
.after-inner .wrapper #top > .msg > .items > li > a:hover > i,
.after-inner .wrapper #top > .msg > .items > li > a.on > i { color: #fff; }
.after-inner .wrapper #top > .msg > .items > li > a:hover > span > span,
.after-inner .wrapper #top > .msg > .items > li > a.on > span > span,
.after-inner .wrapper #top > .msg > .items > li > a:hover > span > small,
.after-inner .wrapper #top > .msg > .items > li > a.on > span > small { color: #fff; }
.after-inner .wrapper #top > .msg > .items > li > a:hover > span > span,
.after-inner .wrapper #top > .msg > .items > li > a.on > span > span { font-weight: bolder; }
.f_on footer { background-color: #f5f5f5; }
.index header .pc-nav > ul > li:not(.go-down) > a:after { display: none; }
.index header .pc-nav > ul > li > a { text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); }

/*页面结构*/
#home {  /* position: fixed; */

  /* width: 100%; */

  /* height: 100%; */

  /* overflow: visible; */
transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
#home #main { width: 100%; height: 100%; position: relative; }
#home #main .part { position: absolute; background-color: #fff; width: 100%; height: 100%; z-index: 3; opacity: 0; }
#home #main .part.on { z-index: 4; opacity: 1; }
#home #main .part.navInPrev { pointer-events: none; opacity: 1; -webkit-animation: slideInHalfFromTop 0.7s forwards ease-in-out; animation: slideInHalfFromTop 0.7s forwards ease-in-out; }
#home #main .part.navOutPrev { pointer-events: none; opacity: 1; -webkit-animation: slideOutBottom 0.7s forwards ease-in-out; animation: slideOutBottom 0.7s forwards ease-in-out; }
#home #main .part.navInNext { pointer-events: none; opacity: 1; z-index: 100; -webkit-animation: slideInFromBottom 0.7s forwards ease-in-out; animation: slideInFromBottom 0.7s forwards ease-in-out; }
#home #main .part.navOutNext { pointer-events: none; opacity: 1; -webkit-animation: slideOutHalfTop 0.7s forwards ease-in-out; animation: slideOutHalfTop 0.7s forwards ease-in-out; }
#home #main #r1 #component { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#home #main #r1 #component .itemwrap { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; }
#home #main #r1 #component .itemwrap.on { transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; }
#home #main #r1 #component .itemwrap > li video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
#home #main #r1 #component .itemwrap > li #v2 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#home #main #r1 #component .itemwrap > li > a.play { display: inline-block; color: #fff; width: 60px; height: 60px; border-radius: 50%; line-height: 60px; text-align: center; cursor: pointer; line-height: 58px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
#home #main #r1 #component .itemwrap > li > a.play > i { font-size: 24px; }
@media screen and (max-width:800px) {
  #home #main #r1 #component .itemwrap > li > a.play { top: 80%; height: 40px; width: 40px; line-height: 40px; }
}
#home #main #r1 #component .itemwrap > li > a.play:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/c.png) center no-repeat; background-size: 100%; animation: roll 2s linear infinite; }
@keyframes roll {
  to { transform: rotate(360deg); }
}
#home #main #r1 #component .Tcon .txtChange { pointer-events: none; }
#home #main #r1 #component .Tcon .pageChange { pointer-events: auto; }
#home #main #r1 #component .Tcon .pageChange li { cursor: pointer; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; margin: 0.2rem 0.1rem; position: relative; background-color: transparent; }
#home #main #r1 #component .Tcon .pageChange li:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; line-height: 10px; text-align: center; background-color: #fff; }
#home #main #r2 {  /* padding-top: 1rem; */ }
#home #main #r2 .rowMain { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#home #main #r2 .rowMain .wrap { position: relative; width: 100%; }
#home #main #r2 .rowMain .wrap > .bg { width: 50%; visibility: hidden; opacity: 0; pointer-events: none; }
#home #main #r2 .rowMain .wrap .itemwrap { position: absolute; width: 100%; top: 0; left: 0; height: calc(100% - 1rem); }
#home #main #r2 .rowMain .wrap .itemwrap .box { align-items: stretch; top: 0; left: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; z-index: 999; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col { width: 50%; background-color: #fff; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col:nth-of-type(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 0.6rem; background: url(../images/bg1.png) bottom right no-repeat #ffffff; background-size: 50%; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg { max-width: 100%; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .topic { display: flex; justify-content: space-between; align-items: center; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .topic > a { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .topic > a:hover { color: #f39800; text-decoration: underline; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .mid h2,
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .mid span,
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .mid p { max-width: 100%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .other .go-more { color: #dddddd; position: relative; display: inline-block;  /* padding-left: 30px; */ height: 40px; line-height: 40px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .other .go-more .arrow { position: absolute; width: 0; height: 0; border-color: transparent transparent transparent #dddddd; border-style: solid; border-width: 8px; left: 0; top: 11px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .other .go-more:hover { color: #d82128; }
#home #main #r2 .rowMain .wrap .itemwrap .box .col .msg .other .go-more:hover .arrow { border-color: transparent transparent transparent #f39800; }
#home #main #r2 .rowMain .wrap .itemwrap .box.on { opacity: 1; box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); pointer-events: auto; z-index: 900; }
#home #main #r2 .rowMain .wrap .itemwrap .box:hover h2 { color: #d82128; }
#home #main #r2 .rowMain .wrap .itemwrap .box:hover .col .other .go-more { color: #d82128; }
#home #main #r2 .rowMain .wrap .itemwrap .box:hover .col .other .go-more .arrow { border-color: transparent transparent transparent #f39800; }
#home #main #r2 .rowMain .wrap .pager { position: relative; transform: translateY(3vh); -webkit-transform: translateY(3vh); -moz-transform: translateY(3vh); -o-transform: translateY(3vh); -ms-transform: translateY(3vh); width: 100%; height: 1rem; margin: auto; display: flex; justify-content: center; align-items: center; z-index: 6; margin-top: 30px; }
#home #main #r2 .rowMain .wrap .pager > [data-num] { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 10px; height: 10px; line-height: 10px; border-radius: 100%; padding: 0;  /* opacity: 0.2; */ transition: opacity 0.2s ease-in-out; outline: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; margin: 0.2rem 0.1rem; position: relative; background-color: transparent; }
#home #main #r2 .rowMain .wrap .pager > [data-num]:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; line-height: 10px; text-align: center; background-color: #434343; }
#home #main #r2 .rowMain .wrap .pager > [data-num].on { opacity: 1; }
#home #main #r2 .photo { position: absolute; bottom: 0; left: 0; z-index: 5; width: 100%; height: calc(50% - 0.5rem); opacity: 0.4; }
#home #main #r2 .photo > li { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
#home #main #r2 .photo > li .pic { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; z-index: 3; filter: blur(20px); transform: scale(1.02); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -o-transform: scale(1.02); -ms-transform: scale(1.02); }
#home #main #r2 .photo > li:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 4; opacity: 0.1; pointer-events: none; background: url(../images/z1.png) center; }
#home #main #r2 .photo > li.on .pic { opacity: 1; }
#home #main #r3 .wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#home #main #r3 .wrap .topic { position: absolute; width: 100%; height: 68%; top: 0; left: 0; }
#home #main #r3 .wrap .topic .webGL-slider .txt-item .more { background-color: #fff; display: inline-block; text-align: center; border: none; overflow: hidden; padding: 10px 38px; margin-top: 0.2rem; position: relative; top: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r3 .wrap .topic .webGL-slider .txt-item .more > span { position: relative; z-index: 5; }
#home #main #r3 .wrap .topic .webGL-slider .txt-item .more:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; background-color: #f39800; transform: translateX(100%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r3 .wrap .topic .webGL-slider .txt-item .more:hover { color: #fff; border-color: transparent; }
#home #main #r3 .wrap .topic .webGL-slider .txt-item .more:hover:after { transform: none; }
#home #main #r3 .wrap .topic .webGL-slider .pager { right: 10vw; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 4; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange > li { width: 100%; text-align: left; opacity: 0; visibility: hidden; display: none; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; position: absolute; top: 0; bottom: 0; margin: auto; height: 160px; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange > li.on { opacity: 1; visibility: visible; display: block; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange .more { background-color: #fff; display: inline-block; text-align: center; border: none; overflow: hidden; padding: 10px 38px; margin-top: 0.2rem; position: relative; top: 0; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange .more > span { position: relative; z-index: 5; color: #000; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange .more:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; background-color: #f39800; transform: translateX(100%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange .more:hover { border-color: transparent; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange .more:hover > span { color: #fff; }
#home #main #r3 .wrap .topic .component .Tcon .txtChange .more:hover:after { transform: none; }
#home #main #r3 .wrap .topic .component .Tcon .pageChange li { cursor: pointer; }
#home #main #r3 .wrap .topic .component .Tcon > small { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 4; left: auto; }
#home #main #r3 .wrap .topic .component .Tcon > small b { display: inline-block; }
#home #main #r3 .wrap .topic .component .Tcon > small span { display: inline-block; }
#home #main #r3 .wrap .btm { position: absolute; bottom: 0; height: 32%; left: 0; width: 100%; padding: 0 10%; display: flex; justify-content: space-between; align-items: center; }
#home #main #r3 .wrap .btm .go { width: 21%; }
#home #main #r3 .wrap .btm .go .pic { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r3 .wrap .btm .go > h4 { text-align: center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main #r3 .wrap .btm .go:hover .pic { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
#home #main #r3 .wrap .btm .go:hover > h4 { color: #f39800; }
#home #main .scr { position: absolute; bottom: 0; z-index: 20000; left: 0; right: 0; margin: auto; padding: 4px 0; background-color: rgba(0, 0, 0, 0.7); width: 120px; text-align: center; border-top-left-radius: 8px; cursor: pointer; border-top-right-radius: 8px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#home #main .scr > em { font-size: 12px; letter-spacing: 2px; vertical-align: middle; display: inline-block; }
#home #main .scr > small { width: 14px; display: inline-block; margin-left: 8px; height: 20px; border-radius: 50px; border: 1px solid #fff; position: relative; vertical-align: middle; }
#home #main .scr > small:after { content: ""; position: absolute; width: 2px; height: 3px; left: 5px; top: 12px; background-color: #ffffff; border-radius: 50px; z-index: 5; -webkit-animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; animation: Tmouse 0.5s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate; }
#home #main .scr.active { opacity: 0; }
#home #btm { position: absolute; top: 100%; width: 100%; }
#home.on { transform: translateY(-200px); -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); }
@media screen and (max-width:800px) {
  #home.on { transform: translateY(-391px); -webkit-transform: translateY(-391px); -moz-transform: translateY(-391px); -o-transform: translateY(-391px); -ms-transform: translateY(-391px); }
}
#social #main { position: relative; width: 100%; overflow: hidden; padding-bottom: 0.8rem; padding-top: 40px; }
#social #main > .bg { position: absolute; width: 100%; top: 0; left: 0; z-index: 2; }
#social #main .row { position: relative; z-index: 5; padding: 4vw 0; }
#social #main #r1 { padding-bottom: 2vw; }
#social #main #r1 h3 { width: 50%; margin: auto; }
#social #main .r-left { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#social #main .r-left .left { position: relative; width: 50%; }
#social #main .r-left .left .note { display: flex; justify-content: flex-start; align-items: center; width: 70%; z-index: 5; height: 46px; line-height: 46px; position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: rotate(90deg) translateY(-46px); -webkit-transform: rotate(90deg) translateY(-46px); -moz-transform: rotate(90deg) translateY(-46px); -o-transform: rotate(90deg) translateY(-46px); -ms-transform: rotate(90deg) translateY(-46px); }
#social #main .r-left .left .note > em { white-space: nowrap; display: inline-block; padding-right: 0.4rem; }
#social #main .r-left .left .note .line { max-width: 100%; width: 2rem; }
#social #main .r-left .left .pic { width: 70%; display: inline-block; max-width: 468px; margin-left: 60px; position: relative; z-index: 5; }
#social #main .r-left .left .other { background-size: cover; position: absolute; z-index: 2; bottom: -0.6rem; right: 10%; width: 50vw; height: 1.5rem; }
#social #main .r-left .right { padding: 4% 5%; width: 50%; }
#social #main .r-right { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#social #main .r-right .left { position: relative; width: 50%; text-align: right; }
#social #main .r-right .left .note { display: flex; justify-content: flex-start; align-items: center; width: 70%; z-index: 5; height: 46px; line-height: 46px; position: absolute; top: 0; left: calc(100% - 46px); transform-origin: 0% 0%; transform: rotate(90deg) translateY(-46px); -webkit-transform: rotate(90deg) translateY(-46px); -moz-transform: rotate(90deg) translateY(-46px); -o-transform: rotate(90deg) translateY(-46px); -ms-transform: rotate(90deg) translateY(-46px); }
#social #main .r-right .left .note > em { white-space: nowrap; display: inline-block; padding-right: 0.4rem; }
#social #main .r-right .left .note .line { max-width: 100%; width: 2rem; }
#social #main .r-right .left .pic { width: 70%; display: inline-block; max-width: 468px; margin-right: 60px; position: relative; z-index: 5; }
#social #main .r-right .left .other { background-size: cover; position: absolute; z-index: 2; bottom: -0.6rem; left: 10%; width: 50vw; height: 1.5rem; }
#social #main .r-right .right { padding: 4% 5%; width: 50%; }
#new { background-color: #f5f5f6; }
#new #top .title { z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding-top: 0.9rem; padding-bottom: 0.5rem; }
#new #top .rowMain { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#new #top .rowMain .wrap { max-width: 100%; position: relative; width: 100%; }
#new #top .rowMain .wrap > .bg { width: 50%; visibility: hidden; opacity: 0; pointer-events: none; }
#new #top .rowMain .wrap .itemwrap { position: absolute; width: 100%; top: 0; left: 0; height: calc(100% - 1rem); }
#new #top .rowMain .wrap .itemwrap .box { align-items: stretch; top: 0; left: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; z-index: 999; }
#new #top .rowMain .wrap .itemwrap .box .col { width: 50%; background-color: #fff; }
#new #top .rowMain .wrap .itemwrap .box .col:nth-of-type(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 0.6rem; background: url(../images/bg1.png) bottom right no-repeat #ffffff; background-size: 50%; }
#new #top .rowMain .wrap .itemwrap .box .col .msg { max-width: 100%; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .topic { display: flex; justify-content: space-between; align-items: center; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .topic > a { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .topic > a:hover { color: #f39800; text-decoration: underline; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .mid h2,
#new #top .rowMain .wrap .itemwrap .box .col .msg .mid span,
#new #top .rowMain .wrap .itemwrap .box .col .msg .mid p { max-width: 100%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more { color: #dddddd; position: relative; display: inline-block; padding-left: 30px; height: 40px; line-height: 40px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more .arrow { position: absolute; width: 0; height: 0; border-color: transparent transparent transparent #dddddd; border-style: solid; border-width: 8px; left: 0; top: 11px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more:hover { color: #f39800; }
#new #top .rowMain .wrap .itemwrap .box .col .msg .other .go-more:hover .arrow { border-color: transparent transparent transparent #f39800; }
#new #top .rowMain .wrap .itemwrap .box.on { opacity: 1; box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); pointer-events: auto; z-index: 900; }
#new #top .rowMain .wrap .itemwrap .box:hover h2 { color: #f39800; }
#new #top .rowMain .wrap .itemwrap .box:hover .col .other .go-more { color: #f39800; }
#new #top .rowMain .wrap .itemwrap .box:hover .col .other .go-more .arrow { border-color: transparent transparent transparent #f39800; }
#new #top .rowMain .wrap .pager { position: relative; transform: translateY(3vh); -webkit-transform: translateY(3vh); -moz-transform: translateY(3vh); -o-transform: translateY(3vh); -ms-transform: translateY(3vh); width: 100%; height: 1rem; margin: auto; display: flex; justify-content: center; align-items: center; z-index: 6; }
#new #top .rowMain .wrap .pager > [data-num] { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 10px; height: 10px; line-height: 10px; border-radius: 100%; padding: 0; opacity: 0.2; transition: opacity 0.2s ease-in-out; outline: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; margin: 0.2rem 0.1rem; position: relative; background-color: transparent; }
#new #top .rowMain .wrap .pager > [data-num]:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; line-height: 10px; text-align: center; background-color: #000; }
#new #top .rowMain .wrap .pager > [data-num].on { opacity: 1; }
#new #top .photo { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 28vw; }
#new #top .photo > li { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; }
#new #top .photo > li .pic { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; z-index: 3; filter: blur(20px); transform: scale(1.02); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -o-transform: scale(1.02); -ms-transform: scale(1.02); }
#new #top .photo > li:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 4; opacity: 0.1; pointer-events: none; background: url(../images/z1.png) center; }
#new #top .photo > li.on .pic { opacity: 1; }
#new #main { padding: 5vw 0 1vw 0; }
#new #main .rowMain .wrap { display: flex; justify-content: flex-start; align-items: center; margin-left: -0.6rem; flex-wrap: wrap; }
#new #main .rowMain .wrap .box { width: calc(100%/3 - 0.6rem - 1px); margin-left: 0.6rem; margin-bottom: 0.6rem; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#new #main .rowMain .wrap .box .msg { padding: 5% 6% 12% 6%; background-color: #fff; }
#new #main .rowMain .wrap .box .msg small { display: inline-block; height: 0.46rem; line-height: 0.46rem; position: relative; }
#new #main .rowMain .wrap .box .msg small:after { content: ""; position: absolute; width: 28px; height: 0.04rem; background-color: #000; bottom: 0; left: 0; }
#new #main .rowMain .wrap .box:hover { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); }
#intro #main { margin-top: 40px; margin-bottom: 0.6rem; }
#intro #main .row { display: flex; justify-content: space-between; align-items: center; padding: 5vw 0; }
#intro #main .row.r-left .col { width: 100%; position: relative; }
#intro #main .row.r-left .col:nth-of-type(1) .pic { width: 92%; position: relative; z-index: 4; }
#intro #main .row.r-left .col:nth-of-type(1) .txt { position: absolute; bottom: -1rem; z-index: 3; height: 2rem; line-height: 2rem; right: 30%; font-size: 2rem; color: #f5f5f5; white-space: nowrap; }
#intro #main .row.r-left .col:nth-of-type(2) { padding-left: 5%; }
#intro #main .row.r-left .col:nth-of-type(2) > span { display: flex; align-items: center; }
#intro #main .row.r-left .col:nth-of-type(2) > span .line { width: 50px; margin: 0 12px; background-color: #f39800; }
#intro #main .row.r-left .col:nth-of-type(2) > div p { color: #919191; margin-bottom: 14px; }
#intro #main .row.r-left .col:nth-of-type(2) > div p img { vertical-align: middle; }
#intro #main .row.r-left .col:nth-of-type(2) > div p em { color: #f39800; }
#intro #main .row.r-right .col { width: 100%; position: relative; }
#intro #main .row.r-right .col:nth-of-type(2) .pic { width: 92%; position: relative; z-index: 4; }
#intro #main .row.r-right .col:nth-of-type(2) .txt { position: absolute; bottom: -1rem; z-index: 3; height: 2rem; line-height: 2rem; left: 30%; font-size: 2rem; color: #f5f5f5; white-space: nowrap; }
#intro #main .row.r-right .col:nth-of-type(1) { padding-right: 5%; }
#intro #main .row.r-right .col:nth-of-type(1) > span { display: flex; align-items: center; }
#intro #main .row.r-right .col:nth-of-type(1) > span .line { width: 50px; margin: 0 12px; background-color: #f39800; }
#intro #main .row.r-right .col:nth-of-type(1) > span .alan { display: inline-block; }
#intro #main .row.r-right .col:nth-of-type(1) > div p { color: #919191; margin-bottom: 14px; }
#intro #main .row.r-right .col:nth-of-type(1) > div p img { vertical-align: middle; }
#intro #main .row.r-right .col:nth-of-type(1) > div p em { color: #f39800; }
#history #main .row { padding: 5vw 0; position: relative; padding-bottom: 8vw; overflow: hidden; }
#history #main .row > .bg { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 2; }
#history #main .row .rowMain { z-index: 5; }
#history #main .row .rowMain .time-top { height: 100px; line-height: 100px; position: relative; z-index: 15; width: 80%; margin: auto; overflow: hidden; }
#history #main .row .rowMain .time-top > ol { position: absolute; height: 100%; width: 1000%; z-index: 4; display: flex; justify-content: flex-start; align-items: center; left: 0; }
#history #main .row .rowMain .time-top > ol li { width: calc(10%/9); text-align: center; animation-name: fadeInLeftSmall; }
#history #main .row .rowMain .time-top > ol li > a { background-color: #fff; padding: 0 6px; font-size: 0.2rem; position: relative; font-family: en-m; color: #919191; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#history #main .row .rowMain .time-top > ol li > a:after { content: ""; width: 0; height: 0; position: absolute; left: 0; right: 0; margin: auto; border-width: 6px; border-style: solid; border-color: #f39800 transparent transparent transparent; top: -10px; opacity: 0; transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#history #main .row .rowMain .time-top > ol li.on > a { color: #f39800; font-size: 0.32rem; text-shadow: 0 3px 4px rgba(243, 152, 0, 0.6); }
#history #main .row .rowMain .time-top > ol li.on > a:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; }
#history #main .row .rowMain .time-top > ol li:hover > a { color: #f39800; text-shadow: 0 3px 4px rgba(243, 152, 0, 0.6); }
#history #main .row .rowMain .time-top > ol li:hover > a:after { opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; }
#history #main .row .rowMain .m1 { top: 0; position: absolute; height: 100px; line-height: 100px; width: 50px; z-index: 18; right: 100%; font-size: 36px; color: #919191; text-align: center; cursor: pointer; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#history #main .row .rowMain .m1:hover { color: #f39800; }
#history #main .row .rowMain .m2 { top: 0; position: absolute; height: 100px; line-height: 100px; width: 50px; z-index: 18; left: 100%; font-size: 36px; color: #919191; text-align: center; cursor: pointer; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#history #main .row .rowMain .m2:hover { color: #f39800; }
#history #main .row .rowMain .line { z-index: 2; position: absolute; top: 50px; height: 1px; width: 100%; left: 0; background-color: #eee; }
#history #main .row .rowMain .time-con { padding: 0 12%; position: relative; margin-top: 120px; z-index: 10; }
#history #main .row .rowMain .time-con .box { position: relative; z-index: 10; }
#history #main .row .rowMain .time-con .box > ul { display: none; align-items: stretch; }
#history #main .row .rowMain .time-con .box > ul.on { display: flex; }
#history #main .row .rowMain .time-con .box > ul > div.list { padding: 20px 0.3rem; }
#history #main .row .rowMain .time-con .box > ul > div.list > li { animation: fadeInUpSmall 0.5s ease-in-out; width: 100%; margin-bottom: 12px; }
#history #main .row .rowMain .time-con .box > ul > div.list > li > span { color: #f39800; font-size: 14px; font-weight: bolder; margin-bottom: 6px; height: 24px; line-height: 24px; }
#history #main .row .rowMain .time-con .box > ul > div.list > li > p { font-size: 17px; font-weight: bolder; line-height: 24px; height: 72px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#history #main .row .rowMain .time-con .mask { position: absolute; left: 0; right: 0; margin: auto; z-index: 5; height: 100%; width: 80%; top: 0; }
#history #main .row .rowMain .time-con .mask .year { font-size: 4.5rem; position: absolute; top: -100px; letter-spacing: 20px; text-indent: -20px; pointer-events: none; width: 100%; text-align: center; height: 400px; line-height: 400px; color: #f7f7f7; animation: fadeInDownSmall 0.5s ease-in-out; display: none; }
#history #main .row .rowMain .time-con .mask:after { content: ""; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); box-shadow: 0 100px 60px -2px rgba(77, 81, 84, 0.1); }
#history #main .row .rowMain .time-con:after { content: ""; position: absolute; left: 0; right: 0; margin: auto; z-index: 10; width: 100%; height: 4px; background-color: #f39800; bottom: 0; }
#history #main #app-row { width: 100%; }
#history #main #app-row h3 { font-size: 18px; margin-bottom: 20px; }
#history #main #app-row .items { width: 100%; }
#history #main #app-row .items > li { width: 100%; margin-bottom: 10px; }
#history #main #app-row .items > li > span { height: 24px; line-height: 24px; white-space: nowrap; margin-bottom: 5px; font-size: 15px; width: 50px; position: relative; }
#history #main #app-row .items > li > p { line-height: 24px; width: calc(100% - 50px); }
#detail { padding-top: 0.9rem; background-color: #f5f5f6; }
#detail #main { position: relative; }
#detail #main > .bg { position: absolute; width: 100%; left: 0; top: 0; height: 27.5vw; overflow: hidden; }
#detail #main > .bg .pic { position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: blur(20px); transform: scale(1.02); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -o-transform: scale(1.02); -ms-transform: scale(1.02); }
#detail #main > .bg .pic:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); }
#detail #main .wrap { position: relative; z-index: 5; }
#detail #main .wrap .other { height: 13vw; position: relative; width: 64%; max-width: 860px; margin: auto; }
#detail #main .wrap .other .return { background-color: #fff; padding: 10px 26px; text-align: center; position: absolute; display: inline-block; bottom: 20px; left: 0; }
#detail #main .wrap .con { width: 64%; max-width: 860px; margin: auto; background-color: #fff; padding: 0.5rem 1rem; margin-bottom: 4vw; }
#detail #main .wrap .con .title { position: relative; }
#detail #main .wrap .con .title .date { height: 0.48rem; line-height: 0.48rem; margin-bottom: 0.24rem; display: inline-block; }
#detail #main .wrap .con .title .line { margin-top: 0.5rem; }
#detail #main .wrap .con .title nav { position: absolute; display: flex; justify-content: space-between; align-items: center; top: -0.02rem; right: 0; width: 1.2rem; }
#detail #main .wrap .con .title nav > a { width: 0.5rem; height: 0.5rem; border-radius: 50%; line-height: 0.5rem; text-align: center; background-color: #dddddd; color: #fff; font-size: 24px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#detail #main .wrap .con .title nav > a:hover { background-color: #f39800; color: #fff; }
#detail #main .wrap .con .content { margin: 0.5rem 0 0.5rem 0; }
#detail #main .wrap .con .content img { display: block; margin: 0.3rem auto; max-width: 100%; }
#detail #main .wrap .con .btm { position: relative; text-align: center; margin-bottom: 0.1rem; }
#detail #main .wrap .con .btm .cc { background-color: #fff; display: inline-block; position: relative; z-index: 5; }
#detail #main .wrap .con .btm .cc > img { height: 50px; margin: 0 0.6rem; }
#detail #main .wrap .con .btm .line { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; z-index: 2; }
#shop { background-color: #f5f5f6; }
#shop #main .row { position: relative; background-color: #fff; margin-bottom: 20px; }
#shop #main .row .bg-box { position: relative; height: 31.25vw; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; }
#shop #main .row .bg-box .webGL-slider { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#shop #main .row .bg-box .pic { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#shop #main .row .bg-box .note { position: relative; z-index: 10; }
#shop #main .row .bg-box .note .tab { display: inline-block; overflow: hidden; position: relative; background-color: #fff; }
#shop #main .row .bg-box .note .tab > a { display: inline-block; float: left; width: 120px; text-align: center; position: relative; z-index: 5; padding: 12px 0; border: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#shop #main .row .bg-box .note .tab > a.on { pointer-events: none; }
#shop #main .row .bg-box .note .tab > a.on,
#shop #main .row .bg-box .note .tab > a:hover { color: #fff; background-color: #f39800; }
#shop #main .row .bg-box .note .tab > a:nth-of-type(2) { margin-left: -1px; }
#shop #main .row .tab-list { display: none; }
#shop #main .row .tab-list .wrap { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-left: -0.6rem; padding: 0.8rem 0; padding-bottom: 0.4rem; }
#shop #main .row .tab-list .wrap .box { margin-left: 0.6rem; width: calc(25% - 0.6rem); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#shop #main .row .tab-list .wrap .box .photo { background-color: #f7f7f7; position: relative; }
#shop #main .row .tab-list .wrap .box .photo > .w-h { width: 100%; opacity: 0; }
#shop #main .row .tab-list .wrap .box .photo .pic { background-size: contain; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 90%; width: 80%; transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
#shop #main .row .tab-list .wrap .box .msg { border: 1px solid #f3f3f3; border-top: none; padding: 0.3rem 6% 6% 6%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#shop #main .row .tab-list .wrap .box .msg > small { color: #919191; }
#shop #main .row .tab-list .wrap .box .msg .line { background-color: #f9f9f9; }
@media screen and (min-width:800px) {
  #shop #main .row .tab-list .wrap .box:hover { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
  #shop #main .row .tab-list .wrap .box:hover .photo .pic { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); }
  #shop #main .row .tab-list .wrap .box:hover .msg { border-color: transparent; }
}
#shop #main .row .tab-list .other { padding: 1vw 0 4vw 0; }
#shop #main .row .tab-list .other .go-more { display: inline-block; min-width: 2rem; padding: 10px 26px; text-align: center; border: 1px solid #dddddd; overflow: hidden; border-radius: 5px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; position: relative; }
#shop #main .row .tab-list .other .go-more > span { position: relative; z-index: 5; }
#shop #main .row .tab-list .other .go-more:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; background-color: #f39800; transform: translateX(100%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#shop #main .row .tab-list .other .go-more:hover { color: #fff; border-color: transparent; }
#shop #main .row .tab-list .other .go-more:hover:after { transform: none; }
#shop #main .row .tab-list.on { display: block; }
#shop #main .row:last-of-type { margin-bottom: 0; }
#goods { padding-top: 0.9rem; }
#goods #top { display: flex; justify-content: flex-start; align-items: flex-start; }
#goods #top .note { position: absolute; z-index: 10; left: 5%; }
#goods #top .note .tab { display: inline-block; overflow: hidden; position: relative; background-color: #fff; }
#goods #top .note .tab > a { display: inline-block; float: left; width: 120px; text-align: center; position: relative; z-index: 5; padding: 12px 0; border: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#goods #top .note .tab > a.on { pointer-events: none; }
#goods #top .note .tab > a.on,
#goods #top .note .tab > a:hover { color: #fff; background-color: #f39800; }
#goods #top .note .tab > a:nth-of-type(2) { margin-left: -1px; }
#goods #main { margin-bottom: 7vw; }
#goods #main .rowMain { display: flex; justify-content: space-between; align-items: stretch; }
#goods #main .rowMain .left { width: 23%; border-left: 1px solid #f3f3f3; border-right: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; }
#goods #main .rowMain .left .topic { padding: 0.6rem 10%; display: flex; justify-content: flex-start; align-items: center; }
#goods #main .rowMain .left .topic span { font-weight: bolder; margin-right: 8px; }
#goods #main .rowMain .left .topic span:nth-of-type(1) { color: #dddddd; }
#goods #main .rowMain .left .mid { padding: 0.5rem 10%; border-top: 1px solid #f3f3f3; }
#goods #main .rowMain .left .mid > ul.items > li { position: relative; }
#goods #main .rowMain .left .mid > ul.items > li > i { height: 44px; line-height: 44px; position: absolute; right: 24px; top: 0; font-size: 18px; width: 44px; text-align: center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; cursor: pointer; }
#goods #main .rowMain .left .mid > ul.items > li > a { text-shadow: none; display: inline-block; width: 100%; height: 44px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; line-height: 44px; font-weight: bold; padding: 0 24px 0 0; }
#goods #main .rowMain .left .mid > ul.items > li.go-child.on > a { color: #f39800; }
#goods #main .rowMain .left .mid > ul.items > li.go-child.on > i { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); }
#goods #main .rowMain .left .mid > ul.items > ol { display: none; }
#goods #main .rowMain .left .mid > ul.items > ol > li > a { width: 100%; display: inline-block; height: 38px; line-height: 38px; padding: 0 12px; text-indent: 10px; opacity: 0.9; }
#goods #main .rowMain .left .mid > ul.items > ol > li.on > a { color: #f39800; }
#goods #main .rowMain .left .btm { padding: 0.5rem 10%; border-top: 1px solid #f3f3f3; }
#goods #main .rowMain .left .btm .con .list h4 { height: 0.44rem; line-height: 0.44rem; font-weight: 500; }
#goods #main .rowMain .left .btm .con .list > div { min-height: 0.8rem; }
#goods #main .rowMain .left .btm .con .list .color-box { margin-left: -0.1rem; }
#goods #main .rowMain .left .btm .con .list .color-box .cir { width: 26px; height: 26px; border-radius: 50%; line-height: 26px; text-align: center; display: inline-block; position: relative; margin-left: 0.1rem; background-color: #fff; margin-bottom: 0.2rem; border: 1px solid #dddddd; }
#goods #main .rowMain .left .btm .con .list .color-box .cir > i { opacity: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; display: inline-block; }
#goods #main .rowMain .left .btm .con .list .color-box .cir:after { content: ""; width: 36px; height: 36px; border-radius: 50%; line-height: 36px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); border: 1.5px solid #f39800; opacity: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#goods #main .rowMain .left .btm .con .list .color-box .cir.on:after { opacity: 1; }
#goods #main .rowMain .left#fn3 { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#goods #main .rowMain .left#fn3.on { transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; visibility: visible; opacity: 1; }
#goods #main .rowMain .right { width: 77%; border-bottom: 1px solid #f3f3f3; padding-left: 5%; position: relative; }
#goods #main .rowMain .right .wrap { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-left: -0.4rem; padding: 0.8rem 0; }
#goods #main .rowMain .right .wrap .box { margin-left: 0.4rem; width: calc(100%/3 - 0.4rem); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; margin-bottom: 0.4rem; }
#goods #main .rowMain .right .wrap .box .photo { background-color: #f7f7f7; position: relative; }
#goods #main .rowMain .right .wrap .box .photo > .w-h { width: 100%; opacity: 0; }
#goods #main .rowMain .right .wrap .box .photo .pic { background-size: contain; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 90%; width: 80%; transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
#goods #main .rowMain .right .wrap .box .msg { border: 1px solid #f3f3f3; border-top: none; padding: 0.3rem 6% 6% 6%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#goods #main .rowMain .right .wrap .box .msg > small { color: #919191; }
#goods #main .rowMain .right .wrap .box .msg .line { background-color: #f9f9f9; }
@media screen and (min-width:800px) {
  #goods #main .rowMain .right .wrap .box:hover { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
  #goods #main .rowMain .right .wrap .box:hover .photo .pic { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); }
  #goods #main .rowMain .right .wrap .box:hover .msg { border-color: transparent; }
}
#goods #main .rowMain .right .other { position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; }
#goods #main .rowMain .right .other .layer-page { border-bottom: none; }
#goods #main .rowMain .type { position: fixed; z-index: 99; width: 42px; height: 42px; line-height: 42px; text-align: center; right: 5%; bottom: 30px; background-color: #000; }
#goods #main .rowMain .type > i { display: inline-block; width: 42px; height: 42px; line-height: 42px; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; font-size: 26px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#goods #main .rowMain .type > i:nth-of-type(1) { opacity: 1; color: #f39800; }
#goods #main .rowMain .type > i:nth-of-type(2) { opacity: 0; color: #fff; }
#goods #main .rowMain .type .sure { position: absolute; right: 110%; width: 80px; text-align: center; background-color: #f39800; color: #fff; font-size: 14px; display: none; cursor: pointer; }
#goods #main .rowMain .type.on > i:nth-of-type(1) { opacity: 0; }
#goods #main .rowMain .type.on > i:nth-of-type(2) { opacity: 1; }
#join #main { padding-bottom: 1.5rem; }
#join #main .row { padding: 0.6rem 0; }
#join #main #r1 .rowMain #job-box .job-list { display: flex; justify-content: space-between; padding: 0.4rem 0.8rem; align-items: flex-start; margin: 0.5rem 0 0 0; background-color: #f5f5f6; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#join #main #r1 .rowMain #job-box .job-list .mid { width: 80%; }
#join #main #r1 .rowMain #job-box .job-list .mid h3:after { content: ""; position: absolute; height: 80%; width: 5px; left: -0.4rem; top: 0; background-color: #000; bottom: 0; margin: auto; }
#join #main #r1 .rowMain #job-box .job-list .mid .box { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; position: relative; }
#join #main #r1 .rowMain #job-box .job-list .mid .box > span { margin-right: 0.8rem; margin-bottom: 20px; }
#join #main #r1 .rowMain #job-box .job-list .mid .p-msg { position: relative; padding-top: 0.4rem; }
#join #main #r1 .rowMain #job-box .job-list .mid .p-msg:after { content: ""; position: absolute; top: 0; left: -0.8rem; width: calc(125% + 1.6rem); height: 1px; background-color: #eee; animation: fadeIn 0.5s linear; }
#join #main #r1 .rowMain #job-box .job-list .right .go-down { height: 30px; display: flex; justify-content: flex-start; align-items: center; }
#join #main #r1 .rowMain #job-box .job-list .right .go-down > div { height: 30px; position: relative; width: 40px; overflow: hidden; }
#join #main #r1 .rowMain #job-box .job-list .right .go-down > div > span { position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#join #main #r1 .rowMain #job-box .job-list .right .go-down > div > span em { display: block; line-height: 30px; white-space: nowrap; }
#join #main #r1 .rowMain #job-box .job-list .right .go-down > i { width: 0.3rem; height: 0.3rem; border-radius: 50%; line-height: 0.3rem; text-align: center; background-color: #dddddd; color: #fff; display: inline-block; font-size: 12px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#join #main #r1 .rowMain #job-box .job-list .right .go-down:hover > i { background-color: #f39800; transform: translateX(3px); -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); }
#join #main #r1 .rowMain #job-box .job-list .right .go-down.on > div > span { transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
#join #main #r1 .rowMain #job-box .job-list .right .go-down.on > i { background-color: #f39800; transform: translateX(3px) rotate(90deg); -webkit-transform: translateX(3px) rotate(90deg); -moz-transform: translateX(3px) rotate(90deg); -o-transform: translateX(3px) rotate(90deg); -ms-transform: translateX(3px) rotate(90deg); }
#join #main #r1 .rowMain #job-box .job-list:hover { box-shadow: 0 26px 50px -6px rgba(97, 105, 113, 0.3); transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); border-color: transparent; }
#join #main #r1 .rowMain #job-box .job-list:nth-of-type(2n+1) { background-color: #fff; }
#search #top .search-row input[type='text'] { height: 0.8rem; line-height: 0.8rem; background-color: #fff; padding: 0 10px; border: none; min-width: 6rem; font-size: 16px; }
#search #top .search-row input[type='submit'] { width: 100%; height: 100%; background-color: transparent; border: none; color: #fff; line-height: 0.5rem; }
#search #top .search-row a { height: 0.8rem; line-height: 0.8rem; background-color: #f39800; display: inline-block; min-width: 2rem; text-align: center; color: #fff; font-weight: bold; vertical-align: middle; font-size: 18px; }
#search #main { padding-top: 0.8rem; padding-bottom: 1rem; }
#search #main .tab { display: flex; }
#search #main .tab > li { text-align: center; margin-right: 0.6rem; border-bottom: 2px solid transparent; cursor: pointer; font-weight: bolder; padding: 10px 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#search #main .tab > li > em { vertical-align: bottom; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; display: inline-block; }
#search #main .tab > li.on,
#search #main .tab > li:hover { border-color: #f39800; color: #f39800; }
#search #main .tab > li.on > em,
#search #main .tab > li:hover > em { color: #f39800; }
#search #main .tab-list .wrap { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-left: -0.4rem; padding: 0.8rem 0; padding-top: 0.4rem; }
#search #main .tab-list .wrap .box { margin-left: 0.4rem; width: calc(100%/4 - 0.4rem); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; margin-bottom: 0.4rem; }
#search #main .tab-list .wrap .box .photo { background-color: #f7f7f7; position: relative; }
#search #main .tab-list .wrap .box .photo > .w-h { width: 100%; opacity: 0; }
#search #main .tab-list .wrap .box .photo .pic { background-size: contain; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 90%; width: 80%; transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
#search #main .tab-list .wrap .box .msg { border: 1px solid #f3f3f3; border-top: none; padding: 0.3rem 6% 6% 6%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#search #main .tab-list .wrap .box .msg > small { color: #919191; }
#search #main .tab-list .wrap .box .msg .line { background-color: #f9f9f9; }
@media screen and (min-width:800px) {
  #search #main .tab-list .wrap .box:hover { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
  #search #main .tab-list .wrap .box:hover .photo .pic { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); }
  #search #main .tab-list .wrap .box:hover .msg { border-color: transparent; }
}
#search #main .tab-list .wrap .list { display: flex; justify-content: space-between; align-items: center; margin: 0.3rem 0; position: relative; cursor: pointer; width: 100%; background-color: #fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
#search #main .tab-list .wrap .list .pic { width: 27%; }
#search #main .tab-list .wrap .list .msg { padding: 10px 0; position: relative; margin: 0 4%; width: 70%; }
#search #main .tab-list .wrap .list .msg p { position: relative; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
@media screen and (min-width:800px) {
  #search #main .tab-list .wrap .list:hover { background-color: #fff; transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
  #search #main .tab-list .wrap .list:hover .msg p { opacity: 1; }
}
#search #main .tab-list .other { text-align: center; }
.layer-page { border: 1px solid #f3f3f3; overflow: hidden; display: inline-block; vertical-align: bottom; }
.layer-page > a { float: left; width: 0.6rem; height: 0.6rem; line-height: 0.6rem; text-align: center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; font-weight: bolder; }
.layer-page > a:hover,
.layer-page > a.on { background-color: #f39800; color: #fff; }
.c1 { position: relative; width: 100%; }
.c1 > .bg { width: 50%; visibility: hidden; opacity: 0; pointer-events: none; }
.c1 .itemwrap { position: absolute; width: 100%; top: 0; left: 0; height: calc(100% - 1rem); }
.c1 .itemwrap .box { align-items: stretch; top: 0; left: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; z-index: 999; }
.c1 .itemwrap .box .col { width: 50%; background-color: #fff; }
.c1 .itemwrap .box .col:nth-of-type(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 0.6rem; background: url(../images/bg1.png) bottom right no-repeat #ffffff; background-size: 50%; }
.c1 .itemwrap .box .col .msg { max-width: 100%; }
.c1 .itemwrap .box .col .msg .topic { display: flex; justify-content: space-between; align-items: center; }
.c1 .itemwrap .box .col .msg .topic > a { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.c1 .itemwrap .box .col .msg .topic > a:hover { color: #f39800; text-decoration: underline; }
.c1 .itemwrap .box .col .msg .mid h2,
.c1 .itemwrap .box .col .msg .mid span,
.c1 .itemwrap .box .col .msg .mid p { max-width: 100%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.c1 .itemwrap .box .col .msg .other .go-more { color: #dddddd; position: relative; display: inline-block; padding-left: 30px; height: 40px; line-height: 40px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.c1 .itemwrap .box .col .msg .other .go-more .arrow { position: absolute; width: 0; height: 0; border-color: transparent transparent transparent #dddddd; border-style: solid; border-width: 8px; left: 0; top: 11px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.c1 .itemwrap .box .col .msg .other .go-more:hover { color: #f39800; }
.c1 .itemwrap .box .col .msg .other .go-more:hover .arrow { border-color: transparent transparent transparent #f39800; }
.c1 .itemwrap .box.on { opacity: 1; box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); pointer-events: auto; z-index: 900; }
.c1 .itemwrap .box:hover h2 { color: #f39800; }
.c1 .itemwrap .box:hover .col .other .go-more { color: #f39800; }
.c1 .itemwrap .box:hover .col .other .go-more .arrow { border-color: transparent transparent transparent #f39800; }
.c1 .pager { position: relative; transform: translateY(3vh); -webkit-transform: translateY(3vh); -moz-transform: translateY(3vh); -o-transform: translateY(3vh); -ms-transform: translateY(3vh); width: 100%; height: 1rem; margin: auto; display: flex; justify-content: center; align-items: center; z-index: 6; }
.c1 .pager > [data-num] { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 10px; height: 10px; line-height: 10px; border-radius: 100%; padding: 0; opacity: 0.2; transition: opacity 0.2s ease-in-out; outline: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center; margin: 0.2rem 0.1rem; position: relative; background-color: transparent; }
.c1 .pager > [data-num]:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; line-height: 10px; text-align: center; background-color: #000; }
.c1 .pager > [data-num].on { opacity: 1; }
.c-box .photo { background-color: #f7f7f7; position: relative; }
.c-box .photo > .w-h { width: 100%; opacity: 0; }
.c-box .photo .pic { background-size: contain; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 90%; width: 80%; transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
.c-box .msg { border: 1px solid #f3f3f3; border-top: none; padding: 0.3rem 6% 6% 6%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.c-box .msg > small { color: #919191; }
.c-box .msg .line { background-color: #f9f9f9; }
@media screen and (min-width:800px) {
  .c-box:hover { box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
  .c-box:hover .photo .pic { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); }
  .c-box:hover .msg { border-color: transparent; }
}
.go-search { position: relative; right: 0; width: calc(2.5vw + 30px); top: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.go-search > a { width: 100%; display: inline-block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.4); }
.go-search:hover > a { color: #f39800; border-color: rgba(243, 150, 0, 0.4); }
.search-wrap { position: absolute; top: 0; width: 100%; background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; padding: 0 4%; left: 0; height: 2rem; z-index: 3; padding-top: 1rem; }
.search-wrap .search-box { height: 100%; position: relative; z-index: 5; }
.search-wrap .search-box form { display: flex; height: 100%; align-items: center; }
.search-wrap .search-box form .layout-search { display: inline-block; position: relative; border-bottom: 1px solid #f39800; height: 40px; line-height: 40px; width: 380px; vertical-align: middle; overflow: hidden; }
.search-wrap .search-box form .layout-search input { height: 40px; line-height: 40px; position: relative; z-index: 5; vertical-align: top; border: none; color: #333; display: inline-block; background-color: transparent; width: calc(100% - 50px); transition: all 0.3s ease-out; transition-delay: 0.2s; }
.search-wrap .search-box form .layout-search input:focus { background-color: transparent; border-color: transparent; }
.search-wrap .search-box form .layout-search > a { display: inline-block; height: 40px; line-height: 40px; width: 40px; text-align: center; color: #f39800; }
.search-wrap .close { position: absolute; z-index: 5; right: 4%; color: #a4a4a4; width: calc(2.5vw + 30px); bottom: 0; height: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.search-wrap .close:hover { color: #f39800; }
.search-wrap:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; height: 50%; background-color: #000; }
.inter { position: relative; display: inline-block; }
.inter > span { padding: 6px 20px; background-color: #fff; border-radius: 50px; }
.inter .items { position: absolute; left: 0; visibility: hidden; bottom: 99%; opacity: 0; transform: translateY(5px); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.inter .items > ul { border-radius: 5px; overflow: hidden; box-shadow: 0 30px 60px -2px rgba(77, 81, 84, 0.1); }
.inter .items > ul > li { background-color: #fff; }
.inter .items > ul > li > a { display: inline-block; line-height: 45px; width: 100%; text-align: center; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; white-space: nowrap; padding: 0 0.2rem; }
.inter .items > ul > li > a:hover { color: #f39800; text-decoration: underline; }
.inter .items > span { height: 20px; line-height: 20px; position: relative; width: 100%; display: block; }
.inter .items > span:after { content: ""; width: 0; height: 0; position: absolute; border-style: solid; border-width: 6px; border-color: #fff transparent transparent transparent; left: 32px; top: 0; }
@media screen and (min-width:800px) {
  .inter:hover .items { opacity: 1; transform: none; visibility: visible; }
}
@media screen and (max-width:800px) {
  .inter { cursor: pointer; }
  .inter.on .items { opacity: 1; transform: none; visibility: visible; }
}
.fn_ani .itemwrap { -webkit-perspective: 1500px; perspective: 1500px; }
.fn_ani .navOutPrev,
.fn_ani .navOutNext { opacity: 1; box-shadow: none !important; -webkit-animation: scaleDown 0.6s forwards; animation: scaleDown 0.6s forwards; }
.fn_ani .navInNext,
.fn_ani .navInPrev { opacity: 1 !important; z-index: 9999 !important; box-shadow: none !important; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
#pop_dialog { z-index: 2000; }
#pop_dialog .dialog_content { width: 60vw; padding: 1em; max-width: 60vw; min-height: inherit; }
@media screen and (max-width:800px) {
  #pop_dialog .dialog_content { width: 80vw; }
}
#pop_dialog .dialog_content .box { width: 100%; }
#pop_dialog .dialog_content .box img { width: 100%; }
#pop_dialog .dialog_content [data-dialog-close] { position: absolute; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 26px; left: 100%; top: -60px; color: #fff; }
@media screen and (min-width:800px) {
  .fn_ani .navInNext .col:nth-of-type(2) { -webkit-animation: throwFromRight 0.5s 0.1s forwards ease-out; animation: throwFromRight 0.5s 0.1s forwards ease-out; }
}
@media screen and (max-width:800px) {
  .fn_ani .navInNext .col:nth-of-type(2) { -webkit-animation: throwFromLeft 0.5s 0.1s forwards ease-out; animation: throwFromLeft 0.5s 0.1s forwards ease-out; }
}
.fn_ani .navInNext .col:nth-of-type(1) { -webkit-animation: throwFromLeft 0.5s 0.1s forwards ease-out; animation: throwFromLeft 0.5s 0.1s forwards ease-out; }
.fn_ani .box::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0.1); -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.fn_ani .navOutPrev::after,
.fn_ani .navOutNext::after { opacity: 1; }
@-webkit-keyframes scaleDown {
  to { -webkit-transform: scale(0.9); }
}
@keyframes scaleDown {
  to { transform: scale(0.8); }
}
@-webkit-keyframes throwFromRight {
  from { -webkit-transform: translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px); opacity: 1; }
  to { -webkit-transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0); opacity: 1; }
}
@keyframes throwFromRight {
  from { transform: translateX(100vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes throwFromLeft {
  from { -webkit-transform: translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px); opacity: 1; }
  to { -webkit-transform: translateX(0) rotateZ(0) rotateY(0) translateZ(0); opacity: 1; }
}
@keyframes throwFromLeft {
  from { transform: translateX(-100vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes Tmouse {
  0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-8px); }
}
.tab-box .tab-list { display: none; }
.tab-box .tab-list.on { display: block; }
.q3_body a { cursor: auto; }
.q3_body .banner_box { display: block; }
.q3_body .banner_box img { display: block; width: 100%; }
.q3_body .q3_con_box { background-size: 100%; background-position: center top; background-repeat: no-repeat; background-color: #000101; }
.q3_body .q3_con_box .btn_video { cursor: pointer; width: 100%; }
.q3_body .q3_con_box .btn_video img { width: 100%; display: block; }
.q3_body .q3_con_box .q3_pro_show { margin-top: 7.8125vw; }
.q3_body .q3_con_box .q3_pro_show > img { display: block; width: 100%; margin-bottom: 2.5vw; }
.q3_body .q3_con_box .q3_pro_lb_box { position: relative; margin-bottom: 2.5vw; }
.q3_body .q3_con_box .q3_pro_lb_box .swiper-pagination { text-align: left; padding-left: 3%; }
.q3_body .q3_con_box .q3_pro_lb_box .swiper-pagination-bullet { width: .12rem; height: .1rem; background-color: #04a8d2; border-radius: 0; transform: skewX(45deg); }
.q3_body .q3_con_box .q3_pro_lb_box .swiper-pagination-bullet-active { background-color: #04a8d2; }
.q3_body .q3_con_box .q3_pro_lb_box > img { width: 100%; display: block; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case { width: 58.4%; position: absolute; left: 20.8%; top: 20.5%; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .sha_img { position: absolute; z-index: 6; pointer-events: none; width: 100%; left: 0; top: 0; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .sha_img img { display: block; width: 100%; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb { position: relative; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb a { display: block; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb a img { display: block; width: 100%; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb .swiper-button-next,
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb .swiper-button-prev { width: 7.6%; height: 19%; top: 40.5%; margin: 0; background: none; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb .swiper-button-prev { left: -12%; }
.q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb .swiper-button-next { right: -12%; }
.q3_body .q3_con_box .q3_pro_case { width: 82%; margin: 0 auto; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box { position: relative; margin-top: 6vw; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box > img { display: block; width: 100%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box > a { cursor: pointer; position: absolute; width: 29.5%; height: 36.2%; bottom: 8.48%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box > a.btn_link_box1 { left: 13.95%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box > a.btn_link_box2 { right: 16.2%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box > a.btn_link_boxd { left: 13.9%; bottom: 19.6%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box { width: 42.82%; height: 30.4%; position: absolute; top: 22.55%; right: 7.33%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box.cp_lb_box_d { top: 36.9%; right: 7.7%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box a { display: block; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box img { display: block; width: 100%; }
.q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box > img { position: absolute; top: 0; left: 0; z-index: 5; }
.q3_body .q3_con_box .q3_pro_case .q3_y { margin: 5.729vw auto 0; width: 98%; padding-bottom: 15.26vw; }
.q3_body .q3_con_box .q3_pro_case .q3_y > img { display: block; width: 100%; }
.q3_body .sha_case { position: fixed; width: 100%; height: 100vh; left: 0; top: 0; z-index: 9999; display: none; }
.q3_body .sha_case .sha_box { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); cursor: pointer; }
.q3_body .sha_case .btn_sha_close { position: absolute; right: 10%; top: 10%; color: #fff; font-size: 20px; cursor: pointer; border-radius: 100%; background-color: #0bcabf; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 5; }
.q3_body .sha_case video { display: block; max-width: 80%; max-height: 80%; width: 80%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.img_m { display: none !important; }
@media screen and (max-width:1100px) {
  .img_pc { display: none !important; }
  .img_m { display: block !important; }
  .q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case { width: 87.46%; left: 6.27%; top: 18%; }
  .q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .sha_img img { width: 107.6%; margin-left: -3.8%; }
  .q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb .swiper-button-prev { left: -3.8%; z-index: 10; }
  .q3_body .q3_con_box .q3_pro_lb_box .q3_pro_lb_case .q3_pro_lb .swiper-button-next { right: -3.8%; z-index: 10; }
  .q3_body .q3_con_box .q3_pro_case { width: 91.2%; padding-top: 3vw; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box { width: 73.82%; height: auto; top: 28.8%; right: 12.33%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box > a { width: 73.5%; height: 23%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box > a.btn_link_box1 { left: 13.95%; bottom: 32%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box > a.btn_link_box2 { right: 13.2%; bottom: 7%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box2 .cp_lb_box { top: 27.9%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box2 > a.btn_link_box2 { bottom: 6.6%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box3 .cp_lb_box { top: 23.8%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box3 > a.btn_link_box1 { bottom: 34%; height: 26%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box3 > a.btn_link_box2 { bottom: 6.4%; height: 26%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box .cp_lb_box.cp_lb_box_d { top: 36.2%; right: 12.7%; }
  .q3_body .q3_con_box .q3_pro_case .q3_pro_box4 > a.btn_link_boxd { bottom: 8.3%; height: 33.5%; }
  .q3_body .q3_con_box .q3_pro_show > img { margin-bottom: 5vw; }
  .q3_body .q3_con_box .q3_pro_lb_box { margin-bottom: 5vw; }
}