/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
body{
    background-color: #f6f8fb !important;
}
img{
    width:100%;
    border-radius:3px;
}
footer{
    display: block;
}
.Bg-Dark {
    background-color: #2e2e30 !important;
}
.Bg-White{
    background-color: #ffffff !important;
}
.Bg-Grey{
    background-color: #e9e9e9 !important;
}
.Bg-Transparent{
    background-color: transparent !important;
}
.Bg-ToLeftBlue{
    background: repeating-linear-gradient(to right,#00bcd4,#3578fa) !important;
}
.M-top-10{
    margin-top: 10px !important;
}
.M-top-20{
    margin-top: 20px !important;
}
.M-top-30{
    margin-top: 30px !important;
}
.Color-Top{
    background-image: linear-gradient(to left,#00bcd4, #3578fa);
      -webkit-background-clip: text;
      color: transparent;
}
.Color-Hot{
    background-image: linear-gradient(to left,#ffb800, #ff0000);
      -webkit-background-clip: text;
      color: transparent;
}
.Color-Res{
    background-image: linear-gradient(to left,#4caf50, #cddc39);
      -webkit-background-clip: text;
      color: transparent;
}
.padding-1{
    padding: 10px;
}
.padding-2{
    padding: 20px;
}
.padding-3{
    padding: 30px;
}

.BorderRadius-5 {
    border-radius: 5px;
}
.BorderRadius-10 {
    border-radius: 10px;
}

.serach{
    margin: 2.5% auto;
}

.serach .layui-form-item{
    max-width:100%;
    margin: auto;
}
.ShSelect{
    width: 120px!important;
}
.ShInput{
    width:303px!important;
}
.ShButton{
    padding: 0px !important;
    margin-right: 0px !important;
}


.Search-layer{
    max-width: 1200px;
}

.Mshow{display:none}
#headNav{display: block;}

.Search{
    position: relative;
    width:90%;
    margin: 41px auto;
}
.Search select{
    height: 38px;
    line-height: 1.3;
    width: 12%;
    padding-left: 0.3%;
    position: absolute;
    left: 0;
    border-color: #eee;
    color:#757575;
    border-radius:3px;
}
.Search option{
    border-radius:0px;
    line-height: 32px;
    height: 32px;
}
.Search input{
    position: absolute;
    left:13%;
    width: 78%;
    border-radius:3px;
}
.Search button{
    position: absolute;
    right:0;
}

    .layui-carousel div{
        border-radius:8px;
    }
    .layui-carousel img{
        border-radius:8px;
        width: 100%;
    }
    .BannerDiv{
        position: relative;
    }
    .BannerTitle{
        position: absolute;
        bottom: 0px;
        width: 100%;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: #00000080 !important;
    }
    .BannerTitle a{
        width:95%;
        padding: 0 2.5%;
        color: #fff;
        line-height: 50px;
        height: 50px;
        font-size: 16px;        
        white-space: nowrap;/*内容超宽后禁止换行显示*/
        overflow: hidden;/*超出部分隐藏*/
        text-overflow:ellipsis;
    }
    .layui-carousel-ind{
        text-align: right;
        top: -95%;
    }
    .layui-carousel-ind ul{
        background-color: transparent !important;
        margin-right: 10px;
    }
    
    .ArcList{
        position: relative;
    }
    .ArcImg{
        max-width: 20% !important;
    }
    .ArcImg img{
        max-width: 20% !important;
        box-shadow: 5px 5px 8px rgb(0 0 0 / 20%);
        border-radius: 10px;
    }
    .ArcRight{
        position: absolute;
        top:15px;
        left:23%;
        right:3%;
        height: 85%;
    }
    .ArcRight-2{
        position: relative;
        left: 0px;
        height: 100%;
        top: 0px;
    }
    .ListIco{
        position: absolute;
        right: 10px;
    }
    .ListIco i{
        margin-right: 5px;
    }
    .ListTop{
        padding: 2px 5px;
        border-radius: 3px;
        color: #fff;
        margin-left: 5px;
        background: repeating-linear-gradient(to left,#00bcd4,#3578fa);
    }
    .ListHot{
        padding: 2px 5px;
        border-radius: 3px;
        color: #fff;
        margin-left: 5px;
        background: repeating-linear-gradient(to left,#ffb800,#ff0000);
    }
    .ListRec{
        padding: 2px 5px;
        border-radius: 3px;
        color: #fff;
        margin-left: 5px;
        background: repeating-linear-gradient(to left,#4caf50,#cddc39);
    }
    .ListTitle{
        font-size: 18px;
        display: block;
        margin-bottom: 18px;
        
        white-space: nowrap;/*内容超宽后禁止换行显示*/
        overflow: hidden;/*超出部分隐藏*/
        text-overflow:ellipsis;
    }
    .ListDesc{
        font-size: 14px;
        display: block;
        margin-bottom: 35px;
    }
    .ListFoot{
        position: absolute;
        bottom:0;
    }
    
    .ListRank li{
        position: relative;
        line-height: 32px;
        height: 32px;
        margin: 10px 0;
    }
    
    .ListRank span{
        border-radius: 50%;
        background: repeating-linear-gradient(to left,#00bcd4,#3578fa);
        color: #fff;
        font-size: 12px;
        line-height: 22px;
        height: 22px;
        width: 22px;
        display: block;
        text-align: center;
        position: absolute;
        top: 4.5px;
    }
    .ListRank li:nth-child(-n+3) span{ 
        background: repeating-linear-gradient(to left,#ff0000,#ffb800);
    }
    
    .ListRank a{
        position: absolute;
        width:90%;
        display: block;
        white-space: nowrap;/*内容超宽后禁止换行显示*/
        overflow: hidden;/*超出部分隐藏*/
        text-overflow:ellipsis;/*文字超出部分以省略号显示*/
        top: 0;
        left: 32px;
        line-height: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .TagsList li {
        margin: 3px  1.5px!important;
        font-size: 16px;
        color:#377C3E !important;
        border-color:#377C3E !important;
    }
    .TagsList li a{
        margin-left: 5px;
        font-size: 16px;
        color:#377C3E;
    } 
    .ColumnDesc h2{
        margin-bottom: 15px;
    }
    .AccLeftNavs li{
        line-height: 32px;
        height: 32px;
        margin: 15px 0;
    }
    .AccLeftNavs a{
        font-size: 18px;
    }
    .AccLeftNavs i{
        margin-right: 15px;
    }
    .AccLeftNavs li:nth-child(1) i{
        color:#00bcd4;
    }
    .AccLeftNavs li:nth-child(2) i{
        color:#3578fa;
    }
    .AccLeftNavs li:nth-child(3) i{
        color:#ffb800;
    }
    .AccLeftNavs li:nth-child(4) i{
        color:#ff0000;
    }
    .AccLeftNavs li:nth-child(5) i{
        color:#4caf50;
    }
    .AccLeftNavs li:nth-child(6) i{
        color:#cddc39;
    }
    .AccIndex{
        overflow: auto;
    }
    .Accavatar{
        max-width: 120px;
        width:100%
        height:100%;
        border-radius:50%;
        float: left;
        margin-right: 50px;
    }
    .UserInfo{
        float:left;
    }
    .UserInfo h2{
        margin-bottom: 20px;
    }
    
    .UserInfo p{
        line-height: 28px;
        height: 28px;
        font-size: 16px;
        color:#9e9e9e;
        margin: 10px 0;
    }
    .userGroup img{
        width: 40px;
        margin-right: 5px;
    }
    .UserInfo h2>a{
        margin-left: 10px;
        margin-top: -20px;
    }
    .UserInfo h2>a>i{
        margin-right: 5px;
    }
    footer .Navs{
            box-shadow:0px 0px 0px 0px #9e9e9e00!important;
    }
    .padding-1-3{
        padding: 10px 30px;
    }
    .layui-tab-title > .layui-this{
        color:#1E9FFF !important;
    }
    .layui-tab-title > .layui-this::after{
        border-bottom: 2px solid #1E9FFF!important;
    }
    .layui-input-inline p{
        font-size: 16px;
        line-height: 38px;
    }
    .layui-nav-bar, .layui-nav .layui-this:after{
        background-color:#1E9FFF!important;
    }
    .tagLeft{
        text-align: center;
        width: 76px;
        float: left;
        background: repeating-linear-gradient(to left,#00bcd4,#3578fa);
        border-radius:6px;
    }
    .tagLeft i{
        display: inline-block;
        border: none;
        vertical-align: middle;
        font-size: 32px;
        line-height: 76px;
        color:#fff;
    }
    .tagRight{
        float: left;
        width: 60%;
        margin-left: 4%;
    }
    .tagName{
        font-size: 18px;
        margin-bottom: 10px;
        display: block;
    }
    .tagDesc{
        font-size: 14px;
        color:#9e9e9e;
    	text-overflow: -o-ellipsis-lastline;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	line-clamp: 2;					
    	-webkit-box-orient: vertical;
    }
    .ArticleDetails h1{
        font-size: 26px;
        font-weight: 200;
        margin-bottom: 20px;
    }
    .ArticleInfo span{
        margin-right: 10px;
    }
    .ArticleInfo i{
        margin-right: 3px;
    }
    .ArcticleBody{
        margin-top: 20px;
    }
    
    .layui-timeline-title span{
        margin-left: 10px;
        font-size: 14px;
        color: #9e9e9e;
    }
    .comment-control {
        text-align: right;
        color:#e9e9e9 !important;
    }
    .comment-control a{
        color:#9e9e9e !important;
        cursor: pointer;
        text-decoration:none !important;
    }
    
    .comment-control > .vote-comment:hover{
        color:#f44336!important;
    }
    .comment-control > .vote-reply:hover{
        color:#009688!important;
    }
    .comment-control i{
        margin-right: 5px;
    }
    .comment-control .item{
        margin-left: 15px;
    }
    .reply-content{
        line-height: 24px;
    }
    .reply-content span{
        margin: 0 5px;
        padding: 2px 5px;
        background-color: #9e9e9e;
        color: #fff;
        border-radius: 2px;
    }
    .louceng{
        border-radius: 5px;
        background: repeating-linear-gradient(to left,#00bcd4,#3578fa);
        color: #fff !important;
        padding: 3px 8px;
        font-size: 12px;
        line-height: 22px;
        height: 22px;
    }
    .LoadMore{
        text-align: center;
    }
    .hide{display:none;}
    .layui-layer-nobg {
        background: 0 0 !important;
        padding: 0px!important;
        box-shadow: 0px 0px 0px rgb(0 0 0 / 0%)!important;
    }
    .listPages{
        margin-top: 20px;
    }
    .page-item,.page-num{
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
        height: 28px;
        line-height: 28px;
        background-color: #fff;
        color: #9e9e9e;
        font-size: 12px;
        border: 1px solid #eee;border-radius: 3px;
    }
    .page-num{
        margin:0px 2.5px;
    }
    .page-num:hover{
        color:#fff;
        background-color: #1E9FFF;
    }
    .page-num-current{
        color:#fff;
        background-color: #1E9FFF;
        border-radius: 3px;
    }
    .Praise{
        width: 40%;
        overflow: hidden;
        margin: auto;
        text-align: center;
    }
    .Praise i{
        margin-right: 10px;
    }
    .Praise button{
        border-color: #f8f9fa;
        background-color: #f8f9fa;
    }
    .Praise button:hover{
        border-color: #fd0000;
        background-color: #fd0000;
        color:#fff;
    }
    .PraLeft button{
        border-color: #e1f5fe;
        background-color: #e1f5fe;
        color: #03a9f4;
    }
    .PraLeft{
        width: 50%;
        float: left;
    }
    .PraRight{
        width: 50%;
        float: right;
    }
    .Praise{
        margin-top: 20px;
    }
    .ArcticleBody p{
        line-height: 28px;
    }
@media (min-width: 992px) {
    /*电脑端*/
    
    .Index-Body{
        margin: 40px auto !important;
    }
    .Content{
        max-width: 1200px;
        margin: 0 auto ;
        width: 100%;
    }
    .Search-layer{
        max-width: 1200px;
    }
    
    .header,#ShRightFixed{
        transition-property:all;
        transition-duration:.3s;
        transition-timing-function:linear;
    }
    .HeaderTop{
        overflow: auto;
        line-height: 32px;
    }
    .TopLeft{
        float: left;
        color: #fff;
    }
    .TopRight{
        float: right;
    }
    .TopRight a{
        color: #fff;
        margin: 0 2px;
    }
    .Navs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow:0px 15px 15px -15px #9e9e9e;
    }
    .Navs > .Content{
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }
    .Logo{
        max-width: 200px;
    }
    .Mnav{
        display: none;
    }
    .Navs .layui-nav{
        display: flex;
        width: 100%;
    }
    .layui-nav .layui-nav-item a{
        color: #2e2e30 ;
        font-size: 14px !important;
    }
    .layui-nav .layui-nav-item a:hover{
        color: #2e2e30 ;
    }
    .layui-nav-item:hover > .layui-nav-child{
        display: block;
    }
    .NavSearch i{
        color: #2e2e30 ;
    }
    .Logo,.layui-nav,.NavSearch{
        line-height: 60px;
    }
    
    .ArcRight-2 > .ListFoot{
        position: inherit;
    }
    .ListFoot span{
        margin-right: 20px;
    }
    .ListFoot span i{
        margin-right: 5px;
    }
    .RightName{
        padding: 5px 0;
    }
    .RightName i{
        font-size: 12px;
        margin-right: 10px;
        position: relative;
        top:-1.8px;
    }
    
    .RightList li .ArcList .ArcRight {
        top: 10px;
        left: 25%;
        height: 75%;
    }
    .RightList li .ArcList .ArcRight .ListHeader .ListTitle{
        font-size: 16px;
    }
    
    .RightList li .ArcList .ArcRight .ListFoot span {
        margin-right: 10px;
    }
    .AccLeftNavs li{
        padding: 5px 20px;
    }
    .AccLeftNavs .select , 
    .AccLeftNavs li:hover{
        background-color: #e9e9e9 !important;
        border-radius:5px;
    }
    
    footer a{
        color:#e9e9e9 !important;
    }
    
    .F-nav{
        padding: 10px 0;
    }
    .F-Left .layui-nav-bar{
        display: none!important;
    }
    .F-Left ul{
        padding: 0px !important;
    }
    .F-Left ul .layui-nav-item a{
        padding: 0px 20px 0px 0px;
    }
    .F-Copyright{
        color:#9e9e9e;
        height: 32px;
        line-height: 32px;
        border-top: 1px solid #9e9e9e;
        text-align: center;
    }
    .F-Copyright a {
        color:#1e9fff;
    }
    .ArcticleAD {
        margin: 30px 0px;
    }
    .ArcticlePage {
        margin: 20px 0px 0px 0px;
        line-height: 28px;
        
    }
}
.iconChanGPT{
    position: fixed;
    bottom: 200px;
    right: 200px;
}
@media (min-width: 992px) and (max-width: 1399px) {
    .Content{
        max-width: 950px;
        margin: 0 auto ;
        width: 100%;
    }
    .Search-layer{
        max-width: 980px;
    }
    .Logo{
        max-width: 100px;
    }
    .layui-nav .layui-nav-item a{
        padding: 0 17px;
    }
    .layui-nav{
        padding: 0 0px 0 10px !important;
    }
}
@media (min-width: 781px) and (max-width: 991px) {
    /*平板*/
    #headNav{
        display: none;
    }
    .Mshow{display:block}
}
@media screen and (max-width: 781px) {
    #headNav{
        display: none;
    }
    .Mshow{display:block}
    .TopLeft{
        display: none;
    }
    .TopRight{
        width: 100% !important;
    }
    .TopRight a{
        display: inline !important;
    }
    /* 手机端*/
    .header{
        transition-property:all;
        transition-duration:.3s;
        transition-timing-function:linear;
        justify-content: space-between;
        box-shadow:0px 15px 15px -15px #9e9e9e;
    }
    .HeaderTop {
        overflow: auto;
        line-height: 32px;
        width: 95%;
        margin: auto;
    }
    .TopLeft {
        float: left;
        color: #fff;
        width: 75%;
    }
    .TopRight{
        float: right;
        color: #fff;
        width: 25%;
        text-align: right;
    }
    .TopRight a{
        display: none;
        color:#fff;
    }
    .TopRight a:last-child{
        display: block;
    }
    .Navs .Content{
        max-width: 95%;
        margin: 0 auto; 
        padding: 15px 0px;
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }
    .Logo{
        max-width: 35%;
        width: 100%;
    }
    .NavSearch{
        position: absolute;
        right:35px;
    }
    .NavSearch i{
        color:#000;
    }
    .Navs button{
        padding: 0 0px !important;
    }
    .Mnav{
        display: block;
        position: absolute;
        right:10px;
    }
    .Mnav i{
        color:#000;
    }
    .layui-carousel-ind li{
        width: 8px;
        height: 8px;
    }
    .layui-col-space30,.layui-col-space15{
        margin: 0 ;
    }
    .layui-col-space30>*,.layui-col-space15>*{
        padding: 0;
    }
    .Index-Body{
        width: 95%;
        margin: 20px auto;
    }
    .layui-nav-child{
        position:initial !important;
        box-shadow: initial !important;
        border: initial !important;
        min-width: initial !important;
        max-width: 95%;
        margin-left: 4%;
    }
    .BannerTitle a{
        white-space: nowrap;/*内容超宽后禁止换行显示*/
        overflow: hidden;/*超出部分隐藏*/
        text-overflow:ellipsis;
        width: 90%;
        display: block;
        line-height: 32px;
        height: 32px;
        font-size: 14px;  
    }
    #headNav {
        transition-property:all;
        transition-duration:3.3s;
        transition-timing-function:linear;
        justify-content: space-between;
        box-shadow:0px 15px 15px -15px #9e9e9e;
    }
    #headNav li{
        width: 100%;
    }
    #headNav li a{
        color:#000;
    }
    
    .ArcImg{
        max-width: 35% !important;
    }
    .ArcImg img{
        max-width: 35% !important;
    }
    .ArcRight{
        position: absolute;
        top:10px;
        left:38%;
        right:3%;
        height: 86%;
    }
    
    .ListTitle{
        margin-bottom: 5px;
    }
    .ListDesc{
    	text-overflow: -o-ellipsis-lastline;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 3;
    	line-clamp: 3;					
    	-webkit-box-orient: vertical;
    }
    .ArcRight-2 .ListDesc{
    	text-overflow: -o-ellipsis-lastline;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 3;
    	line-clamp: 3;					
    	-webkit-box-orient: vertical;
    	height: 80px;
    	margin-bottom: 0px;
    }
    .ListFoot{
        bottom:0px;
    }
    .ListFoot span{
        margin-right: 10px;
    }
    .ListFoot i{
        margin-right: 5px;
    }
    .ListIco{
        position: inherit;
        font-size: 12px !important;
        margin-bottom: 5px;
        width: 100%;
    }
    .ListTitle{
        width: 100%;
    }
    .ListIco span{
        margin-left: 0;
        margin-right: 5px;
    }
    .NewList{
        margin-bottom: 20px;
    }
    .RightList .ArcImg{
        max-width: 20% !important;
    }
    .RightList .ArcImg img{
        max-width: 20% !important;
    }
    .RightList .ArcRight{
        position: absolute;
        top:8px;
        left:25%;
        right:3%;
        height: 75%;
    }
    .RightList .ListTitle{
        font-size: 18px;
        display: block;
        margin-bottom: 18px;
        
    }
    .TagsList li{
        margin: 3px 1px;
    }
    .TagsList li a{
        margin-left: 2px;
    }
    .F-nav{
        display: none;
    }
    .F-Copyright{
        padding: 20px 15px;
        color:#9e9e9e;
    }
    .F-Copyright p{
        color:#9e9e9e;
    }
    .F-Copyright a{
        color:#9e9e9e;
    }
    .AccLeftNavs{
        
    }
    .layui-nav .layui-this:after{
        height: 0px !important;
    }
    .iconChanGPT{
        position: fixed;
        bottom: 150px;
        right: 80px;
    }
}

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('../fonts/iconfont.ttf?t=1682437846733') format('truetype');
}

.icon {
  font-family: "iconfont" !important;
  font-size: 32px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chatGPT:before {
  content: "\e572";
}

.iconChanGPT button{
    position: absolute;
    border-color: #d2d2d200!important;
}

.ArcticleBody h2{
    margin: 15px 0;
    font-weight:300;
    font-size: 18px;   
    padding: 3px 0 3px 10px;
    border-left: 6px solid #2196F3!important;
    width: max-content;
    border-radius:5px;
    line-height: 26px;
    height: 26px;
}
.ArcticleBody img{
    box-shadow: 0 0 22px rgb(0 0 0 / 20%);
    border-radius: 10px;
    margin:20px 0 ;
}

.ArcticleBody a{
    color: #2196F3;
}

.Bg-Transparent span{
    display: none;
}

/** banner 新样式 */
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/** 自定义样式 */
.SH-Banner{
    margin-bottom: 15px !important;
}
.SH-Banner-item img{
    display: block !important;
}
.slick-arrow{
    position: absolute;
    z-index: 333;
    display: block;
    width: 70px;
    height: 70px;
    text-indent: -9999em;
    border: none;
    background-size: 50% !important;
    bottom: 40%;
    opacity:0;
    transition: opacity 1s ease;
}
.slick-prev{

    background: url(../images/icon-prev-h.png) no-repeat center center;
    left:8px;
    
}
.slick-next{
    background: url(../images/icon-next-h.png) no-repeat center center;
    right:8px;
}
.SH-Banner:hover .slick-arrow{
    opacity:0.5 !important;
}
.SH-Banner .slick-arrow:hover{
    opacity:1 !important;
}
.slick-dots{
    position: absolute;
    top:10px;
    right: 10px;
    list-style: none;
}
.slick-dots li{
    float: left;
    margin: 2px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff!important;
    mix-blend-mode: difference;
    
}
.slick-dots .slick-active{
    width: 18px;
    background-color: #1278c9!important;
}
.slick-dots button{display: none;}

/** 搜索框 */


#search {
  position: absolute;
  top: 15%;
}

#search.on {
  -webkit-animation-name: in-out;
  animation-name: in-out;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.input {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1.5px solid #3578fa;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: Roboto;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.search {
  background: none;
  position: absolute;
  top: 0px;
  left: -28px;
  height: 30px;
  width: 30px;
  padding: 0;
  border-radius: 100%;
  outline: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.search:before {
  content: "";
  position: absolute;
  width: 13px;
  height: 2px;
  background-color: #3578fa;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 15px;
  margin-left: 8px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.close {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -webkit-transform: translate(-5%, 10%);
  -ms-transform: translate(-5%, 10%);
  transform: translate(-5%, 10%);
}

.close:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  margin-top: -1px;
  margin-left: -13px;
  background-color: #3578fa;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.close:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  background-color: #3578fa;
  margin-top: -1px;
  margin-left: -13px;
  cursor: pointer;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.square {
  box-sizing: border-box;
  padding: 0 40px 0 10px;
  width: 180px;
  height:40px;
  position: absolute;
  top:25%;
  border: 2px solid #3578fa;
  border-radius: 5px;
  background: none;
  color: #3578fa;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
    padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
    padding 0.2s;
  -webkit-transition-delay: 0.4s, 0s, 0.4s;
  transition-delay: 0.4s, 0s, 0.4s;
  -webkit-transform: translate(-100%, -5%);
  -ms-transform: translate(-100%, -5%);
  transform: translate(-100%, -5%);

}

@media screen and (max-width: 781px) {
    #search{
        display: none;
    }
    .slick-arrow{
        position: absolute;
        z-index: 333;
        display: block;
        width: 55px;
        height: 55px;
        text-indent: -9999em;
        border: none;
        background-size: 50% !important;
        bottom: 32%;
        opacity:0;
        transition: opacity 1s ease;
    }
    .slick-prev{
        left:4px;
    }
    .slick-next{
        right:4px;
    }
    .slick-dots li{
        float: left;
        margin: 2px;
        width: 7px;
        height: 7px;
        border-radius: 5px;
        background-color: #fff!important;
        mix-blend-mode: difference;
        
    }
    .ArticleDetails h1{
        font-weight: 500;
    }
    .Praise{width:100%}
}



@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot@#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Common styles of menus */
#dl-menu{
    top:35px;
}
.dl-menuwrapper {
	width: 100%;
	/*max-width: 250px;*/
	float: right;
	position: absolute;
	top:0;
	right:0;
	padding-top: 45px;
	z-index: 999;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	-moz-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
	/*margin-right: 100px;*/
	/*top:35px;*/
}

.dl-menuwrapper button {
	/*background: url(../images/header-bg.png) repeat-x bottom left;*/
	border: none;
	width: 50px;
	height: 48px;
	text-indent: -900em;
	overflow: hidden;
	position: absolute;
	top:0;
	right:0;
	cursor: pointer;
	outline: none;
	background: #ffffff url(../images/menu-button-bg.png) no-repeat center center;
	background-size: 50%;
}

.dl-menuwrapper button:hover ,
.dl-menuwrapper button.dl-active {
	/*background: url(../images/header-bg.png) repeat-x bottom left;*/
	background-color: #ffffff;
}

.dl-menuwrapper ul {
	background: #ffffff;
}

/*
.dl-menuwrapper button:after {
	content: '';
	position: absolute;
	width: 60%;
	height: 4px;
	background: #fff;
	top: 12px;
	left: 22%;
	box-shadow: 
		0 10px 0 #fff, 
		0 20px 0 #fff;
}
*/

.dl-menuwrapper ul {
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	color: #2e2e2e;
	border-top: 1px solid #e9e9e9;
	border-bottom:1px solid #e9e9e9;
	outline: none;
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: rgba(0,0,0,0.1);
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'icomoon';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: #808080;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: #808080;
}

.dl-menuwrapper .dl-menu {
	margin: 5px 0 0 0;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
	z-index: 999;
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 50px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	-webkit-animation: MenuAnimOut1 0.4s;
	-moz-animation: MenuAnimOut1 0.4s;
	animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
	-moz-animation: MenuAnimOut2 0.3s ease-in-out;
	animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
	-webkit-animation: MenuAnimOut3 0.4s ease;
	-moz-animation: MenuAnimOut3 0.4s ease;
	animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
	-webkit-animation: MenuAnimOut4 0.4s ease;
	-moz-animation: MenuAnimOut4 0.4s ease;
	animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
	-webkit-animation: MenuAnimOut5 0.4s ease;
	-moz-animation: MenuAnimOut5 0.4s ease;
	animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut2 {
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut3 {
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut4 {
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut5 {
	100% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut1 {
	50% {
		-moz-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-moz-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-moz-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut2 {
	100% {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut3 {
	100% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut4 {
	100% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-moz-keyframes MenuAnimOut5 {
	100% {
		-moz-transform: translateY(40%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut1 {
	50% {
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut3 {
	100% {
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut4 {
	100% {
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	100% {
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	-webkit-animation: MenuAnimIn1 0.3s;
	-moz-animation: MenuAnimIn1 0.3s;
	animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
	-moz-animation: MenuAnimIn2 0.3s ease-in-out;
	animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
	-webkit-animation: MenuAnimIn3 0.4s ease;
	-moz-animation: MenuAnimIn3 0.4s ease;
	animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
	-webkit-animation: MenuAnimIn4 0.4s ease;
	-moz-animation: MenuAnimIn4 0.4s ease;
	animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
	-webkit-animation: MenuAnimIn5 0.4s ease;
	-moz-animation: MenuAnimIn5 0.4s ease;
	animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn1 {
	0% {
		-moz-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-moz-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-moz-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn2 {
	0% {
		-moz-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn3 {
	0% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn4 {
	0% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes MenuAnimIn5 {
	0% {
		-moz-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes MenuAnimIn1 {
	0% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes MenuAnimIn2 {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn3 {
	0% {
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn4 {
	0% {
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
	-webkit-animation: SubMenuAnimIn1 0.4s ease;
	-moz-animation: SubMenuAnimIn1 0.4s ease;
	animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
	-moz-animation: SubMenuAnimIn2 0.3s ease-in-out;
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	-webkit-animation: SubMenuAnimIn3 0.4s ease;
	-moz-animation: SubMenuAnimIn3 0.4s ease;
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
	-webkit-animation: SubMenuAnimIn4 0.4s ease;
	-moz-animation: SubMenuAnimIn4 0.4s ease;
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	-webkit-animation: SubMenuAnimIn5 0.4s ease;
	-moz-animation: SubMenuAnimIn5 0.4s ease;
	animation: SubMenuAnimIn5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn1 {
	0% {
		-moz-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn2 {
	0% {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-moz-transform: translateX(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn3 {
	0% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn4 {
	0% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
}

@-moz-keyframes SubMenuAnimIn5 {
	0% {
		-moz-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateZ(0);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn1 {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn3 {
	0% {
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn4 {
	0% {
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
	-webkit-animation: SubMenuAnimOut1 0.4s ease;
	-moz-animation: SubMenuAnimOut1 0.4s ease;
	animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
	-moz-animation: SubMenuAnimOut2 0.3s ease-in-out;
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	-webkit-animation: SubMenuAnimOut3 0.4s ease;
	-moz-animation: SubMenuAnimOut3 0.4s ease;
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
	-webkit-animation: SubMenuAnimOut4 0.4s ease;
	-moz-animation: SubMenuAnimOut4 0.4s ease;
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	-webkit-animation: SubMenuAnimOut5 0.4s ease;
	-moz-animation: SubMenuAnimOut5 0.4s ease;
	animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut1 {
	0% {
		-moz-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-moz-transform: translateX(50%);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut2 {
	0% {
		-moz-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-moz-transform: translateX(100%);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut3 {
	0% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut4 {
	0% {
		-moz-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(300px);
		opacity: 0;
	}
}

@-moz-keyframes SubMenuAnimOut5 {
	0% {
		-moz-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-moz-transform: translateZ(-200px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut1 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(50%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut3 {
	0% {
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut4 {
	0% {
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}