@charset "utf-8";
/* CSS Document */
/* Design For QQ:257654 */
/* Date 2021-07-19*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/
* {padding: 0; margin: 0; box-sizing: border-box; font-family: "Verdana","Tahoma","Microsoft Yahei"; -webkit-tap-highlight-color: transparent} 
*:focus {outline: none}
h1,h2,h3,h4,h5,h6 {font-weight: normal}
ul,li,i,em {list-style-type: none; font-style: normal}
img {border: 0px; padding: 0; margin: 0}
p {margin-bottom: 1em}

html,body {height: 100%; position: relative}
body {font-size: 14px; color: #666; transition: all .3s}
a {font-size: 14px; color: #666; text-decoration: none; vertical-align: baseline; cursor: pointer; transition: all .3s}
a:visited , a:active {color: #666}
a:hover {color: #de2f2f; transition: all .3s}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #b5b5b5}
input:-moz-placeholder, textarea:-moz-placeholder {color: #b5b5b5}
input::-moz-placeholder, textarea::-moz-placeholder {color: #b5b5b5}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #b5b5b5}

::after,::before {-webkit-box-sizing: border-box; box-sizing: border-box}
::-webkit-scrollbar {width: 10px; background: transparent; border-radius: 100px}
::-webkit-scrollbar:hover {background: rgba(0,0,0,.07)}
::-webkit-scrollbar:horizontal {height: 0}
::-webkit-scrollbar-thumb:vertical {background: rgba(0,0,0,.3); border-radius: 100px}
::-webkit-scrollbar-thumb:active {background: rgba(0,0,0,.5); border-radius: 100px}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@font-face {font-family: "Fjalla"; src: url(../fonts/fjallaone.ttf)}
@font-face {font-family: "Roboto Condensed"; src: url(../fonts/RobotoCondensed-Regular.ttf)}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*封装*/
.clear {clear: both}
.fixed {position: fixed}
.relative {position: relative}
.absolute {position: absolute}
.overflow {overflow: hidden}
.full-width {width: 100%}
.full-height {height: 100%}
.fit {width: 100%; height: 100%}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/*字号*/
.size-12 {font-size: 12px!important}
.size-14 {font-size: 14px!important}
.size-16 {font-size: 16px!important}
.size-18 {font-size: 18px!important}
.size-20 {font-size: 20px!important}
.size-22 {font-size: 22px!important}
.size-24 {font-size: 24px!important}
.size-26 {font-size: 26px!important}
.text-bold {font-weight: bold}
.text-normal {font-weight: normal}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*Flex 布局*/
.row, .column, .flex {display: flex; flex-wrap: wrap}
.column {flex-direction: column}
.col, .col-auto {width: auto; min-width: 0; max-width: 100%}
.col-auto {flex: 0 0 auto}/*使单元格只填充需要渲染的空间*/
.col {flex: 10000 1 0%}/*试图填充所有可用的空间，同时如果需要也可以缩小*/
.flex-center {justify-content: center; align-items: center}

/*具体见 https://www.runoob.com/w3cnote/flex-grammar.html */
.justify-start {justify-content: flex-start}
.justify-end {justify-content: flex-end}
.justify-center {justify-content: center}
.justify-between {justify-content: space-between}
.justify-around {justify-content: space-around}/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
.justify-evenly {justify-content: space-evenly}/*每个项目间隔相等*/

.flex-nowrap {flex-wrap: nowrap}/*默认值。规定灵活的项目不拆行或不拆列*/
.flex-wrap {flex-wrap: wrap}/*规定灵活的项目在必要的时候拆行或拆列*/
.flex-reverse {flex-wrap: wrap-reverse}/*规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序*/

.items-start {align-items: flex-start}
.items-end {align-items: flex-end}
.items-center {align-items: center}
.items-baseline {align-items: baseline}/*项目的第一行文字的基线对齐*/
.items-stretch {align-items: stretch}/*（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度*/

.content-start {align-content: flex-start}/*单元格整体从父元素上方对齐*/
.content-end {align-content: flex-end}/*尾部对齐*/
.content-center {align-content: center}/*中间对齐*/
.content-between {align-content: space-between}/*分散对齐*/
.content-around {align-content: space-around}/*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
.content-stretch {align-content: stretch}/*（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*弹出窗口*/
.dialog-wrap {background: rgba(0,0,0,.7); position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 999999}
.dialog-box {width: auto; height: auto; padding: 10px; border-radius: 4px; background: #fff; position: relative;}
.dialog-box video {width: 960px!important}
.dialog-box a {color: #de2f2f; border-bottom: 1px dashed #de2f2f;}
.dialog-close {width: 40px; height: 40px; background: #fff; border-radius: 100%; position: absolute; bottom: -50px; left: 50%; transform: translate(-50%,0); cursor: pointer; z-index: 100;}
.dialog-close i {font-size: 26px; font-weight: bold; color: #333}
.plyr {border-radius: 4px; overflow: hidden;}

@media screen and (max-width: 768px) {
    .dialog-box {width: calc(100% - 30px); padding: 5px;}
    .dialog-box video {width: 100%!important;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*单页重制*/
#pp-nav span, .pp-slidesNav span {width: 3px; height: 3px; background: #ddd; border: 0; top: 50%; left: 50%; transform: translate(-50%,-50%)}
#pp-nav li .active span, .pp-slidesNav .active span {width: 5px; height: 5px; background: #f30}
#pp-nav li, .pp-slidesNav li {margin: 20px;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*返回*/
a.backTop {padding: 10px 15px; position: fixed; left: 30px; bottom: 30px; color: #fff; z-index: 800}
a.backTop span {font-family: "Roboto Condensed"}

@media screen and (max-width: 768px) {
    a.backTop {display: none;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*版权*/
.copyright {font-size: 12px; line-height: 20px; text-align: right; position: fixed; right: 30px; bottom: 30px; color: #fff; z-index: 800}

@media screen and (max-width: 768px) {
    .copyright {position: absolute; left: 0; right: 0; bottom: 15px; text-align: center;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*淡入淡出*/
.fadeIn-top {animation: fadeIn-top .3s}
@keyframes fadeIn-top {
    from {transform: translate3d(0, -20px, 0); opacity: 0}
    to {transform: translateZ(0); opacity: 1}
}

.fadeOut-top {animation: fadeOut-top .3s}
@keyframes fadeOut-top {
    from {transform: translateZ(0); opacity: 1}
    to {transform: translate3d(0, -20px, 0); opacity: 0}
}