body{background-color: #eee;}
@media screen and (min-width: 1900px) {
    .layui-container {width: 1230px;}
}
.layui-btn:hover {border-color: #1E9FFF;}
.cms-btn{background-color:#1E9FFF;color:#fff}
.cms-text-disabled{color:#FF5722;text-decoration:line-through}
.nav{background-color: #2F4056;}
.nav .logo i{color:#fff;font-size:22px;line-height:50px}
.nav .logo a{color:#fff;font-size:22px;line-height:50px}
.nav .nav_icon_button{display:none}
.nav .layui-nav {text-align:right}
.nav .layui-nav .layui-nav-item{line-height:48px}
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{background-color: #1E9FFF;}

.layui-form-radio>i:hover, .layui-form-radioed>i{color: #1E9FFF;}

.footer{background-color: #2F4056;margin-top:100px;line-height:25px;border-top: 1px solid #c2c2c2;padding:15px 0;text-align:center;color:#fff;}
.footer a{color:#fff}

.indexinfo{background-color: #1E9FFF;height:450px;text-align:center}
.indexinfo .content{position:absolute;top:12%;color:#fff;width:100%;}
.indexinfo .content .logo,.indexinfo .content .action{margin:15px 0}
.indexinfo .content .logo img{width:64px}
.indexinfo .content .about{font-size:16px;padding:0 10px}
.indexinfo .content .action a{display: inline-block;vertical-align: middle;height: 28px;line-height: 28px;margin: 0 6px;padding: 0 10px;border-radius: 2px;color: #fff;border: 1px solid #c2c2c2;border-color: rgba(255,255,255,.2);font-size: 14px;}
.indexinfo .content .action a:hover{border-color: #fff;}

.advantage{margin-top:40px}
.advantage .item{width:32%;float:left;margin-right:1%;margin-top:15px;}

.friend{
    padding:30px 0;
    margin-top: 0;
}
.friend .item{
    float: unset;
    margin-right: 0;
    width: 98%!important;
}
.friend li{
    display: inline-block;
    margin-right: 10px;;
}
.friend + .footer{
    margin-top: 0;
}

.classlist{margin:30px 0}
.classlist .searchinput{position: relative;}
.classlist .searchinput input{height:30px;}
.classlist .searchinput i{position:absolute;right:3px;top:4px;font-size:16px;font-weight:bold}
.classlist .pagelist{text-align:right;margin-top:10px}

.classlist .classselect{background-color: #fff;padding:15px 0}

.classdetail{margin:30px 0}


.classdetail h1{font-size:20px;padding-bottom:10px}
.classdetail .desc{color:#aaa}
.classdetail .pics{margin-bottom:20px;background-color: #fff;}
.classdetail .pics img{width:100%}
.classdetail .pics{position: relative;height:auto}
.classdetail .pics .items div{display:none;height:auto}
.classdetail .pics .items div:first-child{display:block;}
.classdetail .pics .layui-carousel-arrow{top:300px}

.classdetail .content{background-color: #fff;max-width:100%;padding:12px;line-height:1.6;font-size: 14px;}
.classdetail .content img{max-width:100%}
.classdetail .content h2{color:#1E9FFF;font-size: 1.6em;font-weight: 600;line-height: 1.225;padding-bottom: .3em;margin-top: 3em;margin-bottom: 16px;border-bottom: 1px solid #eee;}
.classdetail .content h3{color:#1E9FFF;font-size: 1.2em;font-weight: 600;line-height: 1.2;margin-top: 2em;margin-bottom: 16px;}
.classdetail .content a{color:#1E9FFF;}

.classdetail .content table{border-collapse: collapse;border-spacing: 0;display: block;width: 100%;overflow: auto;word-break: normal;word-break: keep-all;}
.classdetail .content table thead tr{background-color: #F8F8F8;border-top: 1px solid #ccc;}
.classdetail .content table thead th{padding: 6px 13px;border: 1px solid #ddd;font-weight: 550;}
.classdetail .content table tr{background-color: #fff;border-top: 1px solid #ccc;}
.classdetail .content table td{padding: 6px 13px;border: 1px solid #ddd;}
.classdetail .content ul,.classdetail .content ol{padding-left: 2em;}

.classdetail .content  ol li{list-style:decimal;margin-bottom:10px}
.classdetail .content  ul li{list-style:disc;margin-bottom:10px}

.classdetail .content blockquote, .classdetail .content dl, .classdetail .content ol, .classdetail .content p, .classdetail .content pre, .classdetail .content table, .classdetail .content ul{margin-top: 0;margin-bottom: 16px;}
.classdetail .content blockquote{color: #666;border-left: 4px solid #ddd;margin-left: 0;font-size: 14px;font-style: italic;padding: 5px 15px;}
.classdetail .content blockquote p{margin-bottom: 0;}


.classdetail .classright .box{background-color: #fff;padding:10px;margin-bottom:20px}
.classdetail .classright .box table{margin:0;}
.classdetail .classright .box table thead th{color:#1E9FFF;font-size:14px}
.classdetail .classright .price{font-size:16px}

@media screen and (max-width: 1079px) {
    .advantage .item{width:48%;margin:10px 1%;min-height:160px}
}
@media screen and (max-width: 1079px) {
    .layui-container{padding: 0 2px;}
    .layui-card-body{padding: 10px 5px;}
    .advantage .item{width:98%;margin:10px 1%;min-height:60px}
    .layui-nav .layui-nav-item a{padding:0 12px}
    .nav{padding:0 10px;}
    .nav .navlist{display: none;margin-left:-15px;width:100%;position:absolute;z-index:99;top:50px;}
    .nav .layui-nav{padding:0 12px}
    .nav .layui-nav li{text-align:center;width:100%;}
    .nav .nav_icon_button{display: block;color: #FFF;font-size: 30px;float: right;margin-top: 15px;}

}
@media screen and (max-width: 1080px) {.layui-show-lg-td{display:none!important}.layui-show-md-td{display:none!important}.layui-show-sm-td{display:none!important}.layui-show-xs-td{display:none!important}.layui-show-xss-td{display:table-cell!important}.layui-hide-xss{display:none!important}}
@media screen and (min-width: 1080px) {.layui-show-lg-td{display:none!important}.layui-show-md-td{display:none!important}.layui-show-sm-td{display:none!important}.layui-show-xss-td{display:table-cell!important}.layui-show-xs-td{display:table-cell!important}}
@media screen and (min-width: 1080px) {.layui-show-lg-td{display:table-cell!important}.layui-show-md-td{display:table-cell!important}.layui-show-sm-td{display:table-cell!important}.layui-show-xss-td{display:table-cell!important}.layui-show-xs-td{display:table-cell!important}}

.hljs {  display: block;  overflow-x: auto;  padding: 0.5em;  color: #383a42;  background: #fafafa;  line-height:1.5}
.hljs-comment,.hljs-quote {  color: #a0a1a7;  font-style: italic;}
.hljs-doctag,.hljs-keyword,.hljs-formula {  color: #a626a4;}
.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst {  color: #e45649;}
.hljs-literal {  color: #0184bb;}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string {  color: #50a14f;}
.hljs-built_in,.hljs-class .hljs-title {  color: #c18401;}
.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number {  color: #986801;}
.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title {  color: #4078f2;}
.hljs-emphasis {  font-style: italic;}
.hljs-strong {  font-weight: bold;}
.hljs-link {  text-decoration: underline;}

.helper{margin:40px 0;}
.helper .layui-elem-field legend{font-size:14px;color:#1E9FFF;}
.helper .layui-btn:hover{border-color:#1E9FFF;color:#1E9FFF;}
.helper .layui-btn-clicked{border-color:#1E9FFF;background-color:#1E9FFF;color:#fff}
.helper .layui-btn-clicked:hover{color:#fff}
#copy{border-color:#1E9FFF;background-color:#1E9FFF;color:#fff}
.helper .layui-tab-brief>.layui-tab-title .layui-this{color:#1E9FFF}
.helper .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 2px solid #1E9FFF;}
.helper div.code{margin:30px 10px 0 10px;text-align:right;}
.helper textarea.code{display:none}
#code{resize:none;border: 1px solid #ccc;width:100%;height:200px;border-radius: 3px;font-size: 14px;line-height: 22px;padding: 5px;margin-bottom: 5px;letter-spacing: 1px;font-family: "Microsoft YaHei", "Microsoft JhengHei", "SF UI Display", ".PingFang SC", "PingFang SC", "Neue Haas Grotesk Text Pro", "Arial Nova", "Segoe UI", "Helvetica Neue", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "Hiragino Sans GB";}


.demo{margin:40px 0;}