.xs-padding {padding: 20px 0;}
body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#logo_top{
    width: 68px;
    height: 68px;
}
#slogan_0{
    line-height: 68px;
    color: #FFF;
    font-size: x-large;
    font-family:"微软雅黑";
    letter-spacing:3px;
    text-align: center;
    margin-left: 10px;
}
#slogan_1{
    color: #FFF;
    font-size: x-large;
    font-family:"微软雅黑";
    letter-spacing:3px;
    margin: 20px 0 10px 0;
}
#slogan_2{
    background-color: #F96C1F;
    color: #FFF;
    line-height: 24px;
    border-radius: 12px;
    padding: 0 12px 0 12px;
    font-size: small;
    font-family:"微软雅黑";
    letter-spacing:3px;
}
#top_ads{
    width: 100%;
    height: 260px;
    margin: 20px 0;
    border-radius: 6px;
    box-shadow:2px 2px 5px #333;
}



.login-nickname{
    height: 40px;
    width: 200px;
    font-size: x-large;
    background: #FF8831;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.login-nickname:hover{
    cursor: pointer;
    color: #EEE;
}
#avatar_img{
	border-radius: 50%;
	width: 36px;
	height: 36px;
    margin: auto 3px auto 0;
}




.block-title{
    color: #FF812D; margin: 0 18px;font-size: x-large;
}

.clr-blue-small{
	height: 15px;
	width: 15px;
	border-radius: 50%;
	margin:0 5px;
}
.clr-orange-big{
	height: 25px;
	width: 25px;
	border-radius: 50%;
	margin:8px;
}

.zhuangqu-box{
	border-radius: 5px;
	padding: 8px;
    box-shadow:2px 2px 5px #888;
}
.zhuangqu-box:hover{
	background-color: #FFE9DA;
}

.zhuangqu-img{
 	border-radius: 5px;
    transition-property: transform;
    transition-duration: 0.5s
}
.zhuangqu-img:hover{
	transform:translate(0px, 10px);
}

.zhuangqu-go{
	text-align: center;
	margin: 15px auto ;
}
.zhuangqu-go:hover{
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.zhuangqu-go a{color:#333;}
.zhuangqu-go a:hover{color:#F72;}

.box-work-course{
    padding: 8px;
    background-color: #FFF;
    box-shadow:2px 2px 5px #888;
}



.ul-bottom li {margin: 10px 0;}
.item-center{display: flex;justify-content: center;}
.small-content{display: flex; margin: 15px 0px;}
.small-circle{color: #F72; margin-right: 3px;}



.white-text{
color: #FFF;
font-size:x-large;
}
/*------------------------------------*\
	保持宽高比：宽
\*------------------------------------*/
.aspectration{
	position: relative;
	height: 0;
	width: 100%;
	padding-top: 75%;
}
.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


body{background-color: #f0f3f8;}
/*顶部导航*/
.header-component {
    position: relative;
    z-index: 1;
    height: 54px;
    background: #fff;
    min-width:1235;
}

.header-component .icon-brand {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    cursor: pointer
}
.header-component .title{
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    font-size: 20px;
    /* letter-spacing: 3px; */
    text-align: center;
    margin-left: 5px;
}
.header-component .page-title {
    display: inline-block;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    color: #4d596d;
    line-height: 40px;
    cursor: pointer;
    padding: 0 24px;
}

.header-component .page-title.actived {
    color: #188bf6;
    pointer-events: none
}

.header-component .page-title:hover {
    background: #edeef0;
    border-radius: 20px;
    text-decoration: none;
}

.header-component .page-title:last-child {
    margin-right: 0
}

.header-component .btn-login {
    margin-right: 66px;
    height: 28px;
    padding: 0 28px;
    border: 1px solid #188bf6;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #188bf6;
    line-height: 26px;
    cursor: pointer;
    margin-left: 10px;
}

.header-component .btn-login:hover {
    background: #188bf6;
    color: #fff
}

.header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: relative
}

.tab-show {
    visibility: visible!important;
    top: 41px!important;
    opacity: 1!important;
}
.free-ide-new-icon {
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    display: inline-block;
    margin-left: 0;
    width: 6px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: 6px 4px;
    background-position: 50%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAALBJREFUKFON0L0OwQAUBeBz2jAaNMIuBhW7SSIxGbwET8Bz8AS8hMEkrHZpDWL2VwYj0SNtVDQRerf7892bXDqe5gAaSBYLOp52AArJ5rGne1RdBmYAUn/QnT6aDIbcszoSRr8Aia5tcRyCIJyTBiB6X5EwrOTYD3pvIMl0L5hAaMUQMbWzaJN8xECQbM7K3IQlgPILrdNErWTxGi15X4gKq4OKhhk+Af4DzWqe28+LTy+WNSvUQwcyAAAAAElFTkSuQmCC)
}

.free-ide-new-btn-con-img {
    font-size: 14px;
    position: relative;
    margin-right: 10px;
    
}

.free-ide-new-btn-con {
    font-size: 14px;
    position: relative;
    margin-right: 2px;
    font-family: PingFang SC
}




.free-ide-new-btn {
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 96px;
    height: 28px;
    line-height: 28px;
    background-color: #4a87f7;
    border-radius: 17px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    position: relative;
    overflow: hidden
}

.free-ide-tab {
    padding: 12px 4px;
    position: absolute;
    right: -4px;
    top: 38px;
    background: #fff;
    border: 1px solid #bad2f5;
    -webkit-box-shadow: 0 1px 5px 0 rgba(110,114,137,.3);
    box-shadow: 0 1px 5px 0 rgba(110,114,137,.3);
    border-radius: 10px;
    min-width: 180px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 0.2;
    visibility: hidden
}

.free-ide-new-menu-btn {
    height: 50px;
    line-height: 55px;
    font-size: 14px;
    font-weight: 400;
    color: #7f8ea5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.free-ide-new-menu-btn:hover {
    color: #2c415e;
    background: #f2f7fc
}

.ide-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 100% 100%;
    margin-top: 14px;
    margin-right: 8px;
    margin-left: 21px
}

 .free-ide-new-gra .ide-icon {
    background-image: url('../../data/images/icon_txh.6219ad5f.svg')
}

.free-ide-new-scr .ide-icon {
    background-image: url('../../data/images/icon_scratch.17d19899.svg')
}

.free-ide-new-py .ide-icon {
    background-image: url('../../data/images/icon_py1.38b9e5f5.svg')
}

.free-ide-new-cpp .ide-icon {
    background-image: url('../../data/images/icon_c++.600c276e.svg')
}

.free-ide-new-py1 .ide-icon {
    background-image: url('../../data/images/icon_py2.bf5d674e.svg')
}

.free-ide-new-scratchjr .ide-icon {
    background-image: url('../../data/images/scratchjr_icon.jpg')
}

.free-ide-new-blockly .ide-icon {
    background-image: url('../../data/images/blockly_icon.jpg')
}
/*轮播图*/
#carousel{
    height:360px !important; 
    width:100%;
}
/*专栏*/
.card-panel {
    width:1200px;
    margin: 0 auto;
    min-height: 45px;
    cursor: pointer
}

.card-panel .title-panel {
    margin-bottom: 30px;
    line-height: 0
}

.card-panel .p-title {
    display: inline-block;
    font-size: 20px;
    font-family: 'PingFang SC';
    font-weight: 600;
    color: #354156;
    line-height: 34px
}

.card-panel .p-subtitle {
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #8e96a4;
    line-height: 34px
}

.card-panel .system-course:hover {
    border-radius: 25px;
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-box-shadow: 0 1px 22px 2px rgba(186,192,201,.52);
    box-shadow: 0 1px 22px 2px rgba(186,192,201,.52)
}
.footer-panel .page-panel .title.active{
    color: #188bf6; 
}
.card-panel .system-course:hover .system-panel .info-system .title {
    color: #188bf6
}

.card-panel .system-panel {
    padding: 13px 45px 13px 15px;
    background: #fff;
    border-radius: 25px
}

.card-panel .system-panel .img-thumb {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 62px;
    height: 32px;
    margin-right: 25px
}

.card-panel .system-panel .info-system {
    height: 32px
}

.card-panel .system-panel .info-system .title {
    font-size: 26px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #354156;
    line-height: 15px;
    margin-bottom: 25px
}

.card-panel .system-panel .info-system .limit-btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 5px;
    padding: 0 18px;
    height: 34px;
    background: #f27160;
    border-radius: 17px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #fff;
    line-height: 34px
}

.card-panel .system-panel .info-system .subtitle {
    font-size: 18px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #8e96a4;
    line-height: 34px
}

.card-panel .system-panel .info-system .footer-data {
    height: 33px;
    padding: 0 16px;
    background: #dde1e8;
    border-radius: 2px 2px 2px 0;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #597098;
    line-height: 33px;
    display: inline-block
}

.card-panel .system-panel .info-system .info-footer {
    margin-bottom: 14px
}

.card-panel .system-panel .info-system .footer-person {
    font-size: 16px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #a3b6d9;
    line-height: 33px
}

.card-panel .card-item {
    background: #fff;
    width: 38px;
    padding-bottom: 3px;
    border-radius: 25px;
    border-top-right-radius: 8px;
    -webkit-box-shadow: 0 2px 22px 2px rgba(216,227,245,.31);
    box-shadow: 0 2px 22px 2px rgba(216,227,245,.31)
}

.card-panel .card-item .img-tip {
    width: 100%;
    height: 36px
}

.card-panel .card-item .img-tip img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px
}

.card-panel .card-item .img-tip .tag {
    width: 113px;
    height: 43px;
    text-align: center;
    line-height: 43px;
    position: absolute;
    right: 10px;
    top: 0;
    color: #354156;
    font-size: 18px
}

.card-panel .card-item .desc {
    padding: 22px 0 0 22px
}

.card-panel .card-item .desc .des-title {
    font-size: 22px;
    font-family: 'PingFang SC';
    font-weight: 500;
    color: #354156;
    line-height: 15px;
    margin-bottom: 14px
}

.card-panel .card-item .desc .des-subtitle {
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #8e96a4;
    line-height: 15px
}

.card-panel .card-item:hover {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-box-shadow: 0 1px 22px 2px rgba(186,192,201,.52);
    box-shadow: 0 1px 22px 2px rgba(186,192,201,.52)
}

.card-panel .card-item:hover .des-title {
    color: #188bf6
}

.card-panel .fun-card-item {
    height: 5px;
    padding: 14px 14px 0
}

.card-panel .fun-card-item:hover {
    background: #fff;
    -webkit-box-shadow: 0 2px 22px 2px rgba(216,227,245,.31);
    box-shadow: 0 2px 22px 2px rgba(216,227,245,.31);
    border-radius: 25px
}

.card-panel .fun-card-item.show-more {
    height: 386px
}

.card-panel .fun-card-item .img {
    display: block;
    border-radius: 25px;
    height: 386px;
    margin-bottom: 22px
}

.card-panel .fun-card-item .desc-panel {
    margin-left: 24px
}

.card-panel .fun-card-item .func-title {
    font-size: 20px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #354156;
    line-height: 20px;
    margin-bottom: 14px
}

.card-panel .fun-card-item .func-subtitle {
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #8e96a4;
    line-height: 14px
}

.card-panel .fun-card-item .tag-tips {
    height: 33px;
    padding: 0 20px 0 16px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    background: #dde1e8;
    color: #597098;
    line-height: 33px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px
}
.game-card {
    width: 282px;
    height: 264px;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 24px
}

.game-thumbnail-con {
    position: relative;
    width: 100%;
    height: 190px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%;
    -webkit-transition: .3s;
    transition: .3s
}

.game-thumbnail-con:hover {
    background-size: auto 105%
}
.myicon{
    color:#5FB878;
    display: inline-block;
    margin-left:12px;
    margin-top: 10px;
}

.game-card-title-con {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
     margin-top: 10px;
    margin-left: 15px;
    margin-right: 11px
}

.game-card-title {
    font-family: 'PingFangSC-Medium';
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
    color: #354156;
    text-overflow: ellipsis
}

.game-card-status {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    border-radius: 12.5px;
    background: #eff0f3;
    color: #8d9096
}

.game-card-des,.game-card-status {
    font-family: 'PingFangSC-Regular';
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0
}

.game-card-des {
    line-height: 17px;
    color: #8e96a4;
    padding-left:15px;
    text-align: left;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card {
    display: inline-block;
    margin-right:10px;
    width: 282px;
    /* height: 190px; */
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0;
    color: #8e96a4;
    background-size: 60px 45px;
    background-repeat: no-repeat;
    background-position: center 57.8px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAABYCAMAAAATKiNYAAAAolBMVEUAAADW3u7W4O7f6P/Z4fDW4O7W4O7X4fDZ4O/W4O7X4O/X4e/X4O7W4PDW4O7X4O/Y4e3X4evb2/PW4O7W4e/X4e/X4e/W4O/W4O7X4O3Z3+zW4O7X4O/W4O/Z4e3Y4e7h5OT////W4O/Z4O/X4ezX4O/X4O/W4O/W4O/U4e3Z4O3W4e7W4O/W4e/X4O/W4O3Y4O7X4PDW4O/c3O7b4vHW4O62Vy7gAAAANXRSTlMAHfoDIfPWdxX3s5+KZ+vbQwwH78i6mm9aTifflYMyLQkB6T0ZraSOgFI45M/AqV9IhHsOEQxE/usAAAOxSURBVGje3dnpctowFAXgg/FugzH7GvYlLCFLz/u/WjuhTm2wJbkRdKbfz/zgRJrre2UZRcz+Lpz0Xl2UVm2EnYNH6zhuVFFCs2fzt7azQhmVcMEvUX8OVcuIKUZQgSp36zHD/4CansEsL5xBSb/Oa1EFKia8ZT9B7seGOSIXcjXmMSbSxQ4OzHWSl9PUY76RuChMn0Ucab0fWajdKN7Z0GMhYyjdXJH2IHerYqdFkTWEZgeKjZybunB3LUqIy/CdUoZ//kjXQNejVFtUS0OPKrz1+bLeZr9DJTUU61CVFe7NRrigopaLIs+8my4KNEfUTf7Y9HhHL8gV16mb/LFxeFf+gxYqX2qPd7bBjWrEOzMquDbg3YUFzUiberAb29d/myFrSK0+D1Xzs8WMPrK21GmHi4bBtNNVGdWZK5ya5lOXJUVfkyxghom0gfA/HrOcNyQazHhH2gtzufg0ZTlnJExmREj58JgLFxWWU0NiKuhKfWoNfSk8573hj7VSaPnhOYuYZaemt6U3lPbq8ru3pTJM1a7mUC56K8TPR9FpvysPLc9gng4SI2moNt5M2nf1h/I1qetHhob57WhcQZG5GfCb2rg4MC2AkM/vMZp5m7eH0DML1Tt+RKll3s9MIbRkgdFzFcDTiRJOMr81hB5dfKp2SYU35LaO7fXMr55qU2j0WZEWyxTSWvpW1qdYfJmzGh6ZAb78oNg+6fblm4NgOlvyEe9oCW2kBiXFxgA2WkLfkHcYKxw0bS2hizjVs+Tl29ISys0cF2eFRviDekLpr/DLbEIpE1NdobTWTq+7oNwSA6VQrfqoPT60J74NXCXndK0m2Co8fV1q1UVAke2Tae4D6rWGz4c7oc2HO8Lmw40w4sMt0OLDtf5FqAWDjwfK/RehBiw+XPSXzSHyxxPHccLgVGdpLxizrEPQX+GPYa1jsBQHNZbiveR8Xa9MDixhCZMltHZu0Zf7OlVZVWCkHunEKBRvqcgvMaGNsQuhfUQlPfUPbMcnyHysqaICYGZRzthVITffKt90bCi1WEJNzVC8l11SxjahqtGiWCu+bIpNMT+GOvNIoVDtlWdSRRnxhgJW0syqNovVByjrbLHQTuWT16mC8oY2Cxxi+d2bkWxtSbOtUXwHmlgtmMfe42/t7fy3mLSGwRvGWxN/r/lu8Vp3joznm9TOEN+zCgxmjKu40qgzrf2K7xsGHr/U+7jlblKrfIUebq9jXcrD+UAu8/20MCx7U6tAo+r0dbB0kfYThWnIfxBSUTgAAAAASUVORK5CYII=');
    text-align: center;
    margin-bottom: 32px
}
.card-con {
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; */
    margin-bottom: 24px
}
/*底部*/
.footer-panel {
     height:170px;
     background:#fff; 
     -webkit-box-shadow:0 -6px 2px 1px rgba(51,54,58,.1); 
    box-shadow: 0 -6px 2px 1px rgba(51,54,58,.1);
}

.footer-panel .w-50 {
    width: 50%
}

.footer-panel .icon-brand {
    width: 189px;
    height:100%;
    margin-left: 10px;
    margin-top: 57px;
    cursor: pointer;
    text-align: center;
}
.footer-panel .icon-brand  img{
    height:80px;
    line-height: 100%;
    width: 80px;
    display: inline-block;
}
.footer-panel .page-panel {
    margin-top: 37px;
    line-height: 0
}

.footer-panel .page-panel .title {
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #777c85;
    line-height: 20px;
    border: none;
    
}
.footer-panel .page-panel .title:hover{
   text-decoration: none; 
}
.footer-panel .page-panel .title:first-child {
    width: 65px;
    border-right: 1px solid #c8d0de
}

.footer-panel .page-panel .title.second {
    width: 111px
}
.text-free-ide {
    margin-left: 20px;
    padding-left: 30px;
    border-left: 1px solid #c8d0de!important;
}
.footer-panel .page-panel .aq {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #c3c9d2;
    line-height: 27px;
    margin-top: 18px;
    cursor: pointer
}

.footer-panel .page-panel .icp {
    margin-top: 8px
}

.footer-panel .page-panel .icp-margin {
    margin-top: 27px
}

/*发现*/
.free-works {
    position: relative;
    font-size: 16px;
    width: 1200px;
    margin: 0 auto;
}

.filter-bar {
    margin-top: 34px;
    padding: 5px 0;
    position: relative
}

.filter {
    display: inline-block
}

.filter-type {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.filter-item {
    display: inline-block;
    cursor: pointer;
    white-space: nowrap
}

.filter-order {
    height: 30px;
    line-height: 30px;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 30px;
    background-image: url(data:image/png;base64,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)
}

.filter-order .filter-item {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    padding: 0 11px;
    border-left: 1px solid #ced1d4;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: rgba(101,104,110,.85)
}

.filter-order .active {
    color: #414347
}

.filter-order .filter-item-order-1 {
    border-left: none
}

.filter-type .filter-item {
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    background: #f6f9fc;
    border-radius: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #5a5c5e;
    border: 1px solid #d6d6d7;
    margin: 0 8px
}

.filter-type .active {
    color: #fff;
    background: #4a87f7
}

.search-active {
    border: 1px solid #70baff;
    background: #fff!important
}

.filter-search {
    top: 0;
    width: 284px;
    height: 36px;
    position: absolute;
    right: 0;
    background: #eaecee;
    border-radius: 6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.filter-search input {
    width: 212px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    color: #aaa;
    background: inherit;
    border: none;
    outline: none;
    margin-left: 14px
}

.filter-search img {
    width: 16px;
    margin-left: 29px
}

.work-list {
    width: 1200px;
    position: relative;
    /* left: -24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; */
    margin-top: 18px;
    margin-bottom: 10px;
}

.work-list .work-card {
    margin-left: 12px
}

.empty-card {
    display: inline-block;
    width: 220px;
    height: 0;
    visibility: hidden
}

.paging {
    position: absolute;
    bottom: 30px;
    width: 100%;
    height: 42px
}
.type-txt {
    position: absolute;
    right: 8px;
    top: 8px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    font-family: "PingFang SC-常规体", "PingFang SC";
    font-weight: 400;
    color: rgb(255, 255, 255);
    padding: 0 9px;
    background: rgba(43, 48, 76, 0.5);
    border-radius: 12px;
}
.work-card {
    display: inline-block;
    position: relative;
    width: 222px;
    height: 268px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #dadee3;
    -webkit-box-shadow: 2px 0 19px 2px hsla(0,0%,90.2%,.302);
    box-shadow: 2px 0 19px 2px hsla(0,0%,90.2%,0.302);
    border-radius: 10px;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; */
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 24px
}

.thumbnail-con {
    width: 100%;
    height: 158px;
    border-radius: 10px 10px 0 0;
    overflow: hidden
}

.work-thumbnail {
    height: 100%;
    -webkit-transition: .3s;
    transition: .3s;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.work-name {
    text-overflow: ellipsis;
    font-size: 14px;
    height: 18px;
    line-height: 18px;
    font-family: PingFang SC-中黑体,PingFang SC;
    font-weight: 400;
    color: #4d596d;
    white-space: nowrap
}

.user-con,.work-name {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    padding: 0 12px
}

.user-con {
    display: inline-block
}

.user-head {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #d8d8d8;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle
}

.user-name {
    margin-left: 6px;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap
}
/*下载中心*/
.download-center {
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 20px;
    padding-bottom: 148px
}

.head-bg-con {
    height: 0
}

.img-head-bg {
    width: 100%
}

.card-1-0 {
    margin-bottom: 84px
}

.card-1-1 {
    margin-top: 84px
}

.title-2 {
    margin-top: 138px;
    margin-bottom: 95px
}
.img-title-left,.img-title-right {
    width: 46px;
    display: inline-block;
    vertical-align: middle
}
.title-1 {
    margin-top: 132px;
    margin-bottom: 128px
}

.dot-line-con {
    font-size: 0
}

.dot-line {
    width: 1120px;
    display: inline-block;
    height: 1px;
    background-image: -webkit-gradient(linear,left top,right top,from(#cfe0f2),color-stop(57%,#cfe0f2),color-stop(50%,transparent));
    background-image: linear-gradient(90deg,#cfe0f2 0,#cfe0f2 57%,transparent 0);
    background-size: 14px;
    background-repeat: repeat-x
}
.app-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.download-card-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.card-big-img {
    width: 673px;
    margin-right: 96px;
    margin-left: -140px
}

.card-text-content {
    text-align: left;
    margin-top: 24px
}

.card-text-icon {
    width: 51px;
    display: inline-block;
    vertical-align: top
}

.card-text-con {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px
}
.btn-con{
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    margin-top: 68px;
    margin-left: -4px
}

.btn-1,.btn-con{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.btn-1{
    position: relative;
    overflow: hidden;
    width: 209px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-gradient(linear,left top,left bottom,from(#0079ff),to(#50a3ff));
    background: linear-gradient(180deg,#0079ff,#50a3ff);
    -webkit-box-shadow: 0 21px 25px 0 #b5d9ff;
    box-shadow: 0 21px 25px 0 #b5d9ff
}

.btn-a{
    text-decoration: none
}

.icon-1{
    width: 24px
}
.download-text {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: #fff;
    text-align: center;
    margin-left: 15px
}

.btn-2 {
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: -webkit-gradient(linear,left top,left bottom,from(#7d94ae),to(#a0b7d1));
    background: linear-gradient(180deg,#7d94ae,#a0b7d1);
    -webkit-box-shadow: 0 21px 25px 0 #d4dde8;
    box-shadow: 0 21px 25px 0 #d4dde8;
    margin-left: 33px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.icon-2 {
    width: 24px
}

.btn-2:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(#0079ff),to(#50a3ff));
    background: linear-gradient(180deg,#0079ff,#50a3ff);
    -webkit-box-shadow: 0 21px 25px 0 #b5d9ff;
    box-shadow: 0 21px 25px 0 #b5d9ff
}
.card-text1 {
    font-size: 18px;
    line-height: 36px;
    color: #5a6878
}

.card-text1,.card-text2 {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    letter-spacing: 0
}

.card-text2 {
    width: 319px;
    font-size: 16px;
    line-height: 24px;
    color: #838d9c;
    margin-top: 18px
}
.title-text {
    font-family: PingFangSC-Medium;
    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0;
    color: #223851;
    vertical-align: middle;
    margin: 0 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ele-a {
    display: inline-block;
    text-decoration: none;
    margin: 0 53px
}
.ele-a:hover{text-decoration: none;}
.download-card-2 {
    width: 545px;
    height: 192px;
    border-radius: 8px;
    padding: 42px 47px;
    gap: 36px;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .1s;
    transition: all .1s
}

.download-card-2:hover {
    -webkit-box-shadow: 0 18px 22px 0 #e7ecf2;
    box-shadow: 0 18px 22px 0 #e7ecf2;
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
}

.card-icon {
    width: 100px;
    height: 100px
}

.card-text-con {
    text-align: left
}

.card-name {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 34px;
    color: #3d3d3d
}

.card-text {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
    color: #5d6f81;
    margin-top: 14px
}
/*登录*/
.shade {
    top: 0;
    background: rgba(0,4,10,.8);
    z-index: 999!important
}
.shade.shadenone{
    display: none;
}
.pc-login {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: PingFang SC
}

.pc-login .login,.pc-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.pc-login .login {
    background: #fff;
    position: relative;
    z-index: 2;
    width: 454px;
    border-radius: 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.pc-login .login .close-img {
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url(../../data/images/com_icon_close_dark.svg);
    background-size: 100% 100%
}

.pc-login .login .close-img:hover {
    background-image: url(../../data/images//com_icon_close_dark_on.svg)
}

.pc-login .login-all {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.pc-login .login-all .head-img {
    width: 454px;
    height: 110.21px;
    border-radius: 8px 8px 0 0
}

.pc-login .login-all .login-tab {
    height: 81px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.pc-login .login-all .login-tab .tab-common {
    margin-top: 8px;
    /* width: 87px; */
    width:100%;
    height: 73px;
    line-height: 73px;
    font-size: 18px;
    font-family: PingFangSC-Regular;
    text-align: center;
    color: #bdc4d1;
    cursor: pointer
}

.pc-login .login-all .login-tab .tab-message {
    margin-left: 112.5px
}

/* .pc-login .login-all .login-tab .tab-password {
    margin-left: 60px
} */

.pc-login .login-all .login-tab .active {
    border-bottom: 1px solid #3d3d3d;
    color: #3d3d3d
}

.pc-login .login-all .login-message {
    margin-top: 28px
}
.button-all {
    height: 42px;
    border-radius: 8px;
    line-height: 42px;
    margin-top: 48px;
    font-size: 16px;
    text-align: center;
    color: #fff
}

.pointer {
    cursor: pointer
}
.text {
    width: 338px;
    margin-top: 12px;
    color: #8c95a6;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    margin-bottom: 46px
}

.text span {
    display: inline-block
}

.text>span:nth-child(3) {
    position: absolute;
    right: 0
}

.alt-text {
    cursor: pointer;
    color: #747a87
}

.alt-text:hover,.text-blue {
    color: #0084ff
}
.input-warp {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid #d2d8e0;
    border-radius: 8px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.input-icon {
    width: 16px;
    margin-left: 14px;
    position: relative
}
.input-margin {
    margin-left: 6px!important
}

.c-input {
    font-family: PingFang SC;
    margin-left: 14px;
    font-size: 14px;
    border: none;
    outline: none;
    width: 80%;
    height: 28px;
    position: relative
}

input::-webkit-input-placeholder {
    color: #8c95a6
}
.pass-icon {
    width: 14px;
    right: 14px;
    position: absolute
}

.input-margin {
    margin-left: 6px!important
}
.disable-button {
    background: #d1d5da;
}
.able-button {
    background: #0084ff;
}.xs-padding {padding: 20px 0;}
body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
#logo_top{
    width: 68px;
    height: 68px;
}
#slogan_0{
    line-height: 68px;
    color: #FFF;
    font-size: x-large;
    font-family:"微软雅黑";
    letter-spacing:3px;
    text-align: center;
    margin-left: 10px;
}
#slogan_1{
    color: #FFF;
    font-size: x-large;
    font-family:"微软雅黑";
    letter-spacing:3px;
    margin: 20px 0 10px 0;
}
#slogan_2{
    background-color: #F96C1F;
    color: #FFF;
    line-height: 24px;
    border-radius: 12px;
    padding: 0 12px 0 12px;
    font-size: small;
    font-family:"微软雅黑";
    letter-spacing:3px;
}
#top_ads{
    width: 100%;
    height: 260px;
    margin: 20px 0;
    border-radius: 6px;
    box-shadow:2px 2px 5px #333;
}



.login-nickname{
    height: 40px;
    width: 200px;
    font-size: x-large;
    background: #FF8831;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.login-nickname:hover{
    cursor: pointer;
    color: #EEE;
}
#avatar_img{
	border-radius: 50%;
	width: 36px;
	height: 36px;
    margin: auto 3px auto 0;
}




.block-title{
    color: #FF812D; margin: 0 18px;font-size: x-large;
}

.clr-blue-small{
	height: 15px;
	width: 15px;
	border-radius: 50%;
	margin:0 5px;
}
.clr-orange-big{
	height: 25px;
	width: 25px;
	border-radius: 50%;
	margin:8px;
}

.zhuangqu-box{
	border-radius: 5px;
	padding: 8px;
    box-shadow:2px 2px 5px #888;
}
.zhuangqu-box:hover{
	background-color: #FFE9DA;
}

.zhuangqu-img{
 	border-radius: 5px;
    transition-property: transform;
    transition-duration: 0.5s
}
.zhuangqu-img:hover{
	transform:translate(0px, 10px);
}

.zhuangqu-go{
	text-align: center;
	margin: 15px auto ;
}
.zhuangqu-go:hover{
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.zhuangqu-go a{color:#333;}
.zhuangqu-go a:hover{color:#F72;}

.box-work-course{
    padding: 8px;
    background-color: #FFF;
    box-shadow:2px 2px 5px #888;
}



.ul-bottom li {margin: 10px 0;}
.item-center{display: flex;justify-content: center;}
.small-content{display: flex; margin: 15px 0px;}
.small-circle{color: #F72; margin-right: 3px;}



.white-text{
color: #FFF;
font-size:x-large;
}
/*------------------------------------*\
	保持宽高比：宽
\*------------------------------------*/
.aspectration{
	position: relative;
	height: 0;
	width: 100%;
	padding-top: 75%;
}
.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


body{background-color: #f0f3f8;}
/*顶部导航*/
.header-component {
    position: relative;
    z-index: 1;
    height: 54px;
    background: #fff
}

.header-component .icon-brand {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    cursor: pointer
}
.header-component .title{
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    font-size: 20px;
    /* letter-spacing: 3px; */
    text-align: center;
    margin-left: 5px;
}
.header-component .page-title {
    display: inline-block;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    color: #4d596d;
    line-height: 40px;
    cursor: pointer;
    padding: 0 24px;
}

.header-component .page-title.actived {
    color: #188bf6;
    pointer-events: none
}

.header-component .page-title:hover {
    background: #edeef0;
    border-radius: 20px;
    text-decoration: none;
}

.header-component .page-title:last-child {
    margin-right: 0
}

.header-component .btn-login {
    margin-right: 66px;
    height: 28px;
    padding: 0 28px;
    border: 1px solid #188bf6;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #188bf6;
    line-height: 26px;
    cursor: pointer;
    margin-left: 10px;
}

.header-component .btn-login:hover {
    background: #188bf6;
    color: #fff
}

.header-component .btn-manage {
    margin-right: 5px;
    height: 28px;
    padding: 0 28px;
    border: 1px solid #188bf6;
    border-radius: 18px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #188bf6;
    line-height: 26px;
    cursor: pointer;
    margin-left: 10px;
}

.header-component .btn-manage:hover {
    background: #188bf6;
    color: #fff
}

.header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    position: relative
}

.tab-show {
    visibility: visible!important;
    top: 41px!important;
    opacity: 1!important;
}
.free-ide-new-icon {
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    display: inline-block;
    margin-left: 0;
    width: 6px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: 6px 4px;
    background-position: 50%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAALBJREFUKFON0L0OwQAUBeBz2jAaNMIuBhW7SSIxGbwET8Bz8AS8hMEkrHZpDWL2VwYj0SNtVDQRerf7892bXDqe5gAaSBYLOp52AArJ5rGne1RdBmYAUn/QnT6aDIbcszoSRr8Aia5tcRyCIJyTBiB6X5EwrOTYD3pvIMl0L5hAaMUQMbWzaJN8xECQbM7K3IQlgPILrdNErWTxGi15X4gKq4OKhhk+Af4DzWqe28+LTy+WNSvUQwcyAAAAAElFTkSuQmCC)
}

.free-ide-new-btn-con {
    font-size: 14px;
    position: relative;
    margin-right: 2px;
    font-family: PingFang SC
}

.free-ide-new-btn {
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 96px;
    height: 28px;
    line-height: 28px;
    background-color: #4a87f7;
    border-radius: 17px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    position: relative;
    overflow: hidden
}

.free-ide-tab {
    padding: 12px 4px;
    position: absolute;
    right: -4px;
    top: 38px;
    background: #fff;
    border: 1px solid #bad2f5;
    -webkit-box-shadow: 0 1px 5px 0 rgba(110,114,137,.3);
    box-shadow: 0 1px 5px 0 rgba(110,114,137,.3);
    border-radius: 10px;
    min-width: 180px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    opacity: 0.2;
    visibility: hidden
}

.free-ide-new-menu-btn {
    height: 50px;
    line-height: 55px;
    font-size: 14px;
    font-weight: 400;
    color: #7f8ea5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

.free-ide-new-menu-btn:hover {
    color: #2c415e;
    background: #f2f7fc
}

.ide-icon {
    width: 26px;
    height: 26px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 100% 100%;
    margin-top: 14px;
    margin-right: 8px;
    margin-left: 21px
}

 .free-ide-new-gra .ide-icon {
    background-image: url('../../data/images/icon_txh.6219ad5f.svg')
}

.free-ide-new-scr .ide-icon {
    background-image: url('../../data/images/icon_scratch.17d19899.svg')
}

.free-ide-new-py .ide-icon {
    background-image: url('../../data/images/icon_py1.38b9e5f5.svg')
}

.free-ide-new-cpp .ide-icon {
    background-image: url('../../data/images/icon_c++.600c276e.svg')
}

.free-ide-new-py1 .ide-icon {
    background-image: url('../../data/images/icon_py2.bf5d674e.svg')
} 

/*专栏*/
.card-panel {
    width:1200px;
    margin: 0 auto;
    min-height: 45px;
    cursor: pointer
}

.card-panel .title-panel {
    margin-bottom: 30px;
    line-height: 0
}

.card-panel .p-title {
    display: inline-block;
    font-size: 20px;
    font-family: 'PingFang SC';
    font-weight: 600;
    color: #354156;
    line-height: 34px
}

.card-panel .p-subtitle {
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #8e96a4;
    line-height: 34px
}

.card-panel .system-course:hover {
    border-radius: 25px;
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-box-shadow: 0 1px 22px 2px rgba(186,192,201,.52);
    box-shadow: 0 1px 22px 2px rgba(186,192,201,.52)
}
.footer-panel .page-panel .title.active{
    color: #188bf6; 
}
.card-panel .system-course:hover .system-panel .info-system .title {
    color: #188bf6
}

.card-panel .system-panel {
    padding: 13px 45px 13px 15px;
    background: #fff;
    border-radius: 25px
}

.card-panel .system-panel .img-thumb {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 62px;
    height: 32px;
    margin-right: 25px
}

.card-panel .system-panel .info-system {
    height: 32px
}

.card-panel .system-panel .info-system .title {
    font-size: 26px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #354156;
    line-height: 15px;
    margin-bottom: 25px
}

.card-panel .system-panel .info-system .limit-btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 5px;
    padding: 0 18px;
    height: 34px;
    background: #f27160;
    border-radius: 17px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #fff;
    line-height: 34px
}

.card-panel .system-panel .info-system .subtitle {
    font-size: 18px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #8e96a4;
    line-height: 34px
}

.card-panel .system-panel .info-system .footer-data {
    height: 33px;
    padding: 0 16px;
    background: #dde1e8;
    border-radius: 2px 2px 2px 0;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #597098;
    line-height: 33px;
    display: inline-block
}

.card-panel .system-panel .info-system .info-footer {
    margin-bottom: 14px
}

.card-panel .system-panel .info-system .footer-person {
    font-size: 16px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #a3b6d9;
    line-height: 33px
}

.card-panel .card-item {
    background: #fff;
    width: 38px;
    padding-bottom: 3px;
    border-radius: 25px;
    border-top-right-radius: 8px;
    -webkit-box-shadow: 0 2px 22px 2px rgba(216,227,245,.31);
    box-shadow: 0 2px 22px 2px rgba(216,227,245,.31)
}

.card-panel .card-item .img-tip {
    width: 100%;
    height: 36px
}

.card-panel .card-item .img-tip img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px
}

.card-panel .card-item .img-tip .tag {
    width: 113px;
    height: 43px;
    text-align: center;
    line-height: 43px;
    position: absolute;
    right: 10px;
    top: 0;
    color: #354156;
    font-size: 18px
}

.card-panel .card-item .desc {
    padding: 22px 0 0 22px
}

.card-panel .card-item .desc .des-title {
    font-size: 22px;
    font-family: 'PingFang SC';
    font-weight: 500;
    color: #354156;
    line-height: 15px;
    margin-bottom: 14px
}

.card-panel .card-item .desc .des-subtitle {
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 300;
    color: #8e96a4;
    line-height: 15px
}

.card-panel .card-item:hover {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    -webkit-box-shadow: 0 1px 22px 2px rgba(186,192,201,.52);
    box-shadow: 0 1px 22px 2px rgba(186,192,201,.52)
}

.card-panel .card-item:hover .des-title {
    color: #188bf6
}

.card-panel .fun-card-item {
    height: 5px;
    padding: 14px 14px 0
}

.card-panel .fun-card-item:hover {
    background: #fff;
    -webkit-box-shadow: 0 2px 22px 2px rgba(216,227,245,.31);
    box-shadow: 0 2px 22px 2px rgba(216,227,245,.31);
    border-radius: 25px
}

.card-panel .fun-card-item.show-more {
    height: 386px
}

.card-panel .fun-card-item .img {
    display: block;
    border-radius: 25px;
    height: 386px;
    margin-bottom: 22px
}

.card-panel .fun-card-item .desc-panel {
    margin-left: 24px
}

.card-panel .fun-card-item .func-title {
    font-size: 20px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #354156;
    line-height: 20px;
    margin-bottom: 14px
}

.card-panel .fun-card-item .func-subtitle {
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: #8e96a4;
    line-height: 14px
}

.card-panel .fun-card-item .tag-tips {
    height: 33px;
    padding: 0 20px 0 16px;
    font-size: 14px;
    font-family: 'PingFang SC';
    font-weight: 400;
    background: #dde1e8;
    color: #597098;
    line-height: 33px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px
}
.game-card {
    width: 282px;
    height: 264px;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 24px
}

.game-thumbnail-con {
    position: relative;
    width: 100%;
    height: 190px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%;
    -webkit-transition: .3s;
    transition: .3s
}

.game-thumbnail-con:hover {
    background-size: auto 105%
}
.myicon{
    color:#5FB878;
    display: inline-block;
    margin-left:12px;
    margin-top: 10px;
}

.game-card-title-con {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
     margin-top: 10px;
    margin-left: 15px;
    margin-right: 11px
}

.game-card-title {
    font-family: 'PingFangSC-Medium';
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
    color: #354156;
    text-overflow: ellipsis
}

.game-card-status {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    border-radius: 12.5px;
    background: #eff0f3;
    color: #8d9096
}

.game-card-des,.game-card-status {
    font-family: 'PingFangSC-Regular';
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0
}

.game-card-des {
    line-height: 17px;
    color: #8e96a4;
    padding-left:15px;
    text-align: left;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card {
    display: inline-block;
    margin-right:10px;
    width: 282px;
    /* height: 190px; */
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0;
    color: #8e96a4;
    background-size: 60px 45px;
    background-repeat: no-repeat;
    background-position: center 57.8px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAABYCAMAAAATKiNYAAAAolBMVEUAAADW3u7W4O7f6P/Z4fDW4O7W4O7X4fDZ4O/W4O7X4O/X4e/X4O7W4PDW4O7X4O/Y4e3X4evb2/PW4O7W4e/X4e/X4e/W4O/W4O7X4O3Z3+zW4O7X4O/W4O/Z4e3Y4e7h5OT////W4O/Z4O/X4ezX4O/X4O/W4O/W4O/U4e3Z4O3W4e7W4O/W4e/X4O/W4O3Y4O7X4PDW4O/c3O7b4vHW4O62Vy7gAAAANXRSTlMAHfoDIfPWdxX3s5+KZ+vbQwwH78i6mm9aTifflYMyLQkB6T0ZraSOgFI45M/AqV9IhHsOEQxE/usAAAOxSURBVGje3dnpctowFAXgg/FugzH7GvYlLCFLz/u/WjuhTm2wJbkRdKbfz/zgRJrre2UZRcz+Lpz0Xl2UVm2EnYNH6zhuVFFCs2fzt7azQhmVcMEvUX8OVcuIKUZQgSp36zHD/4CansEsL5xBSb/Oa1EFKia8ZT9B7seGOSIXcjXmMSbSxQ4OzHWSl9PUY76RuChMn0Ucab0fWajdKN7Z0GMhYyjdXJH2IHerYqdFkTWEZgeKjZybunB3LUqIy/CdUoZ//kjXQNejVFtUS0OPKrz1+bLeZr9DJTUU61CVFe7NRrigopaLIs+8my4KNEfUTf7Y9HhHL8gV16mb/LFxeFf+gxYqX2qPd7bBjWrEOzMquDbg3YUFzUiberAb29d/myFrSK0+D1Xzs8WMPrK21GmHi4bBtNNVGdWZK5ya5lOXJUVfkyxghom0gfA/HrOcNyQazHhH2gtzufg0ZTlnJExmREj58JgLFxWWU0NiKuhKfWoNfSk8573hj7VSaPnhOYuYZaemt6U3lPbq8ru3pTJM1a7mUC56K8TPR9FpvysPLc9gng4SI2moNt5M2nf1h/I1qetHhob57WhcQZG5GfCb2rg4MC2AkM/vMZp5m7eH0DML1Tt+RKll3s9MIbRkgdFzFcDTiRJOMr81hB5dfKp2SYU35LaO7fXMr55qU2j0WZEWyxTSWvpW1qdYfJmzGh6ZAb78oNg+6fblm4NgOlvyEe9oCW2kBiXFxgA2WkLfkHcYKxw0bS2hizjVs+Tl29ISys0cF2eFRviDekLpr/DLbEIpE1NdobTWTq+7oNwSA6VQrfqoPT60J74NXCXndK0m2Co8fV1q1UVAke2Tae4D6rWGz4c7oc2HO8Lmw40w4sMt0OLDtf5FqAWDjwfK/RehBiw+XPSXzSHyxxPHccLgVGdpLxizrEPQX+GPYa1jsBQHNZbiveR8Xa9MDixhCZMltHZu0Zf7OlVZVWCkHunEKBRvqcgvMaGNsQuhfUQlPfUPbMcnyHysqaICYGZRzthVITffKt90bCi1WEJNzVC8l11SxjahqtGiWCu+bIpNMT+GOvNIoVDtlWdSRRnxhgJW0syqNovVByjrbLHQTuWT16mC8oY2Cxxi+d2bkWxtSbOtUXwHmlgtmMfe42/t7fy3mLSGwRvGWxN/r/lu8Vp3joznm9TOEN+zCgxmjKu40qgzrf2K7xsGHr/U+7jlblKrfIUebq9jXcrD+UAu8/20MCx7U6tAo+r0dbB0kfYThWnIfxBSUTgAAAAASUVORK5CYII=');
    text-align: center;
    margin-bottom: 32px
}
.card-con {
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; */
    margin-bottom: 24px
}
/*底部*/
.footer-panel {
     height:170px;
     background:#fff; 
     -webkit-box-shadow:0 -6px 2px 1px rgba(51,54,58,.1); 
    box-shadow: 0 -6px 2px 1px rgba(51,54,58,.1);
}

.footer-panel .w-50 {
    width: 50%
}

.footer-panel .icon-brand {
    width: 189px;
    height:100%;
    margin-left: 10px;
    margin-top: 57px;
    cursor: pointer;
    text-align: center;
}
.footer-panel .icon-brand  img{
    height:80px;
    line-height: 100%;
    width: 80px;
    display: inline-block;
}
.footer-panel .page-panel {
    margin-top: 37px;
    line-height: 0
}

.footer-panel .page-panel .title {
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #777c85;
    line-height: 20px;
    border: none;
    
}
.footer-panel .page-panel .title:hover{
   text-decoration: none; 
}
.footer-panel .page-panel .title:first-child {
    width: 65px;
    border-right: 1px solid #c8d0de
}

.footer-panel .page-panel .title.second {
    width: 111px
}
.text-free-ide {
    margin-left: 20px;
    padding-left: 30px;
    border-left: 1px solid #c8d0de!important;
}
.footer-panel .page-panel .aq {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #c3c9d2;
    line-height: 27px;
    margin-top: 18px;
    cursor: pointer
}

.footer-panel .page-panel .icp {
    margin-top: 8px
}

.footer-panel .page-panel .icp-margin {
    margin-top: 27px
}

/*发现*/
.free-works {
    position: relative;
    font-size: 16px;
    width: 1200px;
    margin: 0 auto;
}

.filter-bar {
    margin-top: 34px;
    padding: 5px 0;
    position: relative
}

.filter {
    display: inline-block
}

.filter-type {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.filter-item {
    display: inline-block;
    cursor: pointer;
    white-space: nowrap
}

.filter-order {
    height: 30px;
    line-height: 30px;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 30px;
    background-image: url(data:image/png;base64,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)
}

.filter-order .filter-item {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    padding: 0 11px;
    border-left: 1px solid #ced1d4;
    font-family: 'PingFang SC';
    font-weight: 400;
    color: rgba(101,104,110,.85)
}

.filter-order .active {
    color: #414347
}

.filter-order .filter-item-order-1 {
    border-left: none
}

.filter-type .filter-item {
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    background: #f6f9fc;
    border-radius: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #5a5c5e;
    border: 1px solid #d6d6d7;
    margin: 0 8px
}

.filter-type .active {
    color: #fff;
    background: #4a87f7
}

.search-active {
    border: 1px solid #70baff;
    background: #fff!important
}

.filter-search {
    top: 0;
    width: 284px;
    height: 36px;
    position: absolute;
    right: 0;
    background: #eaecee;
    border-radius: 6px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.filter-search input {
    width: 212px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    color: #aaa;
    background: inherit;
    border: none;
    outline: none;
    margin-left: 14px
}

.filter-search img {
    width: 16px;
    margin-left: 29px
}

.work-list {
    width: 1200px;
    position: relative;
    /* left: -24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; */
    margin-top: 18px;
    margin-bottom: 10px;
}

.work-list .work-card {
    margin-left: 12px
}

.empty-card {
    display: inline-block;
    width: 220px;
    height: 0;
    visibility: hidden
}

.paging {
    position: absolute;
    bottom: 30px;
    width: 100%;
    height: 42px
}
.type-txt {
    position: absolute;
    right: 8px;
    top: 8px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    font-family: "PingFang SC-常规体", "PingFang SC";
    font-weight: 400;
    color: rgb(255, 255, 255);
    padding: 0 9px;
    background: rgba(43, 48, 76, 0.5);
    border-radius: 12px;
}
.work-card {
    display: inline-block;
    position: relative;
    width: 222px;
    height: 268px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #dadee3;
    -webkit-box-shadow: 2px 0 19px 2px hsla(0,0%,90.2%,.302);
    box-shadow: 2px 0 19px 2px hsla(0,0%,90.2%,0.302);
    border-radius: 10px;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; */
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 24px
}

.thumbnail-con {
    width: 100%;
    height: 158px;
    border-radius: 10px 10px 0 0;
    overflow: hidden
}

.work-thumbnail {
    height: 100%;
    -webkit-transition: .3s;
    transition: .3s;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.work-name {
    text-overflow: ellipsis;
    font-size: 14px;
    height: 18px;
    line-height: 18px;
    font-family: PingFang SC-中黑体,PingFang SC;
    font-weight: 400;
    color: #4d596d;
    white-space: nowrap
}

.user-con,.work-name {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    padding: 0 12px
}

.user-con {
    display: inline-block
}

.user-head {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #d8d8d8;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle
}

.user-name {
    margin-left: 6px;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap
}
/*下载中心*/
.download-center {
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 20px;
    padding-bottom: 148px
}

.head-bg-con {
    height: 0
}

.img-head-bg {
    width: 100%
}

.card-1-0 {
    margin-bottom: 84px
}

.card-1-1 {
    margin-top: 84px
}

.title-2 {
    margin-top: 138px;
    margin-bottom: 95px
}
.img-title-left,.img-title-right {
    width: 46px;
    display: inline-block;
    vertical-align: middle
}
.title-1 {
    margin-top: 132px;
    margin-bottom: 128px
}

.dot-line-con {
    font-size: 0
}

.dot-line {
    width: 1120px;
    display: inline-block;
    height: 1px;
    background-image: -webkit-gradient(linear,left top,right top,from(#cfe0f2),color-stop(57%,#cfe0f2),color-stop(50%,transparent));
    background-image: linear-gradient(90deg,#cfe0f2 0,#cfe0f2 57%,transparent 0);
    background-size: 14px;
    background-repeat: repeat-x
}
.app-content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.download-card-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.card-big-img {
    width: 673px;
    margin-right: 96px;
    margin-left: -140px
}

.card-text-content {
    text-align: left;
    margin-top: 24px
}

.card-text-icon {
    width: 51px;
    display: inline-block;
    vertical-align: top
}

.card-text-con {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px
}
.btn-con{
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    margin-top: 68px;
    margin-left: -4px
}

.btn-1,.btn-con{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.btn-1{
    position: relative;
    overflow: hidden;
    width: 209px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-gradient(linear,left top,left bottom,from(#0079ff),to(#50a3ff));
    background: linear-gradient(180deg,#0079ff,#50a3ff);
    -webkit-box-shadow: 0 21px 25px 0 #b5d9ff;
    box-shadow: 0 21px 25px 0 #b5d9ff
}

.btn-a{
    text-decoration: none
}

.icon-1{
    width: 24px
}
.download-text {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: #fff;
    text-align: center;
    margin-left: 15px
}

.btn-2 {
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: -webkit-gradient(linear,left top,left bottom,from(#7d94ae),to(#a0b7d1));
    background: linear-gradient(180deg,#7d94ae,#a0b7d1);
    -webkit-box-shadow: 0 21px 25px 0 #d4dde8;
    box-shadow: 0 21px 25px 0 #d4dde8;
    margin-left: 33px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.icon-2 {
    width: 24px
}

.btn-2:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(#0079ff),to(#50a3ff));
    background: linear-gradient(180deg,#0079ff,#50a3ff);
    -webkit-box-shadow: 0 21px 25px 0 #b5d9ff;
    box-shadow: 0 21px 25px 0 #b5d9ff
}
.card-text1 {
    font-size: 18px;
    line-height: 36px;
    color: #5a6878
}

.card-text1,.card-text2 {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    letter-spacing: 0
}

.card-text2 {
    width: 319px;
    font-size: 16px;
    line-height: 24px;
    color: #838d9c;
    margin-top: 18px
}
.title-text {
    font-family: PingFangSC-Medium;
    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0;
    color: #223851;
    vertical-align: middle;
    margin: 0 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ele-a {
    display: inline-block;
    text-decoration: none;
    margin: 0 53px
}
.ele-a:hover{text-decoration: none;}
.download-card-2 {
    width: 545px;
    height: 192px;
    border-radius: 8px;
    padding: 42px 47px;
    gap: 36px;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .1s;
    transition: all .1s
}

.download-card-2:hover {
    -webkit-box-shadow: 0 18px 22px 0 #e7ecf2;
    box-shadow: 0 18px 22px 0 #e7ecf2;
    -webkit-transform: scale(1.02);
    transform: scale(1.02)
}

.card-icon {
    width: 100px;
    height: 100px
}

.card-text-con {
    text-align: left
}

.card-name {
    font-family: PingFangSC-Medium;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 34px;
    color: #3d3d3d
}

.card-text {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
    color: #5d6f81;
    margin-top: 14px
}
/*登录*/
.shade {
    top: 0;
    background: rgba(0,4,10,.8);
    z-index: 999!important
}
.shade.shadenone{
    display: none;
}
.pc-login {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: PingFang SC
}

.pc-login .login,.pc-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.pc-login .login {
    background: #fff;
    position: relative;
    z-index: 2;
    width: 454px;
    border-radius: 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.pc-login .login .close-img {
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url(../../data/images/com_icon_close_dark.svg);
    background-size: 100% 100%
}

.pc-login .login .close-img:hover {
    background-image: url(../../data/images//com_icon_close_dark_on.svg)
}

.pc-login .login-all {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.pc-login .login-all .head-img {
    width: 454px;
    height: 110.21px;
    border-radius: 8px 8px 0 0
}

.pc-login .login-all .login-tab {
    height: 81px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.pc-login .login-all .login-tab .tab-common {
    margin-top: 8px;
    /* width: 87px; */
    width:100%;
    height: 73px;
    line-height: 73px;
    font-size: 18px;
    font-family: PingFangSC-Regular;
    text-align: center;
    color: #bdc4d1;
    cursor: pointer
}

.pc-login .login-all .login-tab .tab-message {
    margin-left: 112.5px
}

/* .pc-login .login-all .login-tab .tab-password {
    margin-left: 60px
} */

.pc-login .login-all .login-tab .active {
    border-bottom: 1px solid #3d3d3d;
    color: #3d3d3d
}

.pc-login .login-all .login-message {
    margin-top: 28px
}
.button-all {
    height: 42px;
    border-radius: 8px;
    line-height: 42px;
    margin-top: 48px;
    font-size: 16px;
    text-align: center;
    color: #fff
}

.pointer {
    cursor: pointer
}
.text {
    width: 338px;
    margin-top: 12px;
    color: #8c95a6;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    margin-bottom: 46px
}

.text span {
    display: inline-block
}

.text>span:nth-child(3) {
    position: absolute;
    right: 0
}

.alt-text {
    cursor: pointer;
    color: #747a87
}

.alt-text:hover,.text-blue {
    color: #0084ff
}
.input-warp {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid #d2d8e0;
    border-radius: 8px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.input-icon {
    width: 16px;
    margin-left: 14px;
    position: relative
}
.input-margin {
    margin-left: 6px!important
}

.c-input {
    font-family: PingFang SC;
    margin-left: 14px;
    font-size: 14px;
    border: none;
    outline: none;
    width: 80%;
    height: 28px;
    position: relative
}

input::-webkit-input-placeholder {
    color: #8c95a6
}
.pass-icon {
    width: 14px;
    right: 14px;
    position: absolute
}

.input-margin {
    margin-left: 6px!important
}
.disable-button {
    background: #d1d5da;
}
.able-button {
    background: #0084ff;
}
/* .layui-carousel-ind{display: none;} */
/*用户菜单*/
.user-info-con {
    margin-left: 5px;
    margin-right: 56px;
    position: relative
}

.user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}
.nick-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 7px
}

.nick-name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #354156;
    line-height: 18px
}

.tab-show {
    visibility: visible!important;
    top: 41px!important;
    opacity: 1!important
}
.logout-panel-show {
    visibility: visible!important;
    opacity: 1!important;
}
.logout-panel {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
     opacity: .2;
    visibility: hidden;
    border-radius: 8px;
    cursor: pointer;
    min-width: 133px;
    position: absolute;
    background: #fff;
    top: 38px;
    left: 10px;
    padding: 12px 4px;
    border: 1px solid #bad2f5;
    -webkit-box-shadow: 0 1px 5px 0 rgba(110,114,137,.3);
    box-shadow: 0 1px 5px 0 rgba(110,114,137,.3);
    z-index: 100
}

.img {
    width: 15px;
    height: 15px
}

.logout-title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    margin-left: 11px
}

.logout-item {
    width: 125px;
    height: 48px;
    color: #7f8ea5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.logout-item:hover {
    background: #f2f7fc;
    color: #2c415e
}