@import url("public.css");

.bbk{background-color: var(--color-toolbar);border-radius: 6px;box-shadow: var(--shadow-slight);}
.main .sec{margin-bottom: 16px;}
.main .bbk>.head{padding: 10px;border-bottom: 1px solid var(--color-line-light);}
.main .bbk>.con{padding: 16px;}
.pagehead{padding: 16px 0}
#hotside {padding: 16px 32px;display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 16px;}
#hotside .wsitem{display: inline-block;padding: 20px;min-height: 54px;border-radius: 4px;min-width: 0;cursor: pointer;}
#hotside .wsitem img{display: inline-block;vertical-align: top;border-radius: 4px;object-fit: contain;}
#hotside .wsitem .info{display: inline-block;vertical-align: top;margin-left: 6px;width: calc(100% - 36px);}
#hotside .wsitem .name{display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-family: "IBM Plex Sans SC";line-height: 22px;}
#hotside .wsitem .des{color: var(--color-slight);font-size: 14px;font-weight: 200;margin-top: 2px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow : hidden;}
.pagecon{padding: 16px 32px}
.pagecon .main{display: inline-block;vertical-align: top;width: calc(100% - 300px);}
.pagecon .sidebar{display: inline-block;vertical-align: top;width: 284px;position: sticky;top: 0;margin-left: 16px;}
.top .essayblk{display: grid;grid-template-columns: 300px 1fr 1fr;grid-gap: 16px;}
.top .essayblk>div{padding: 12px;min-width: 0;}
.top .essayblk a{color: var(--color-card1-txt)}
.top .ad_img{display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 10px;}
.top .ad_img a{display: inline-block;}
.top .ad_img img{width: 100%;border-radius: 3px;overflow: hidden;}
.topblk .tagnav{padding: 10px;border-bottom: 1px solid var(--color-line-light);user-select: none;}
.topblk .tagnav a{position: relative;display: inline-block;font-family: "IBM Plex Sans SC";line-height: 21px;padding: 10px 12px;cursor: pointer;color:var(--color-slight)}
.topblk .tagnav a.curt{color: var(--color-normal)}
.topblk .tagnav a.curt::after{position: absolute;content: "";width: 24px;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;height: 3px;bottom: 2px;left: 50%;transform: translate(-50%);background: #458dea;}
#multsearch {max-width: 800px;padding: 16px;margin: 0 auto;text-align: center;}
#multsearch img{vertical-align: top;max-width: 200px;height: 80px;}
#multsearch .con{display: inline-block;width: calc(100% - 280px);max-width: 650px;text-align: left;margin-left: 16px;}
#multsearch nav{margin-bottom: 16px;}
#multsearch nav span{position: relative;display: inline-block;vertical-align: top;color: var(--color-slight);margin-left: 0.5rem;padding: 0 6px;border-radius: 3px;cursor: pointer;}
#multsearch nav span:hover{color: var(--color-normal);}
#multsearch nav .curt{color: var(--color-normal);}
#multsearch nav .curt::after{position: absolute;content: "";width: 10px;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;height: 4px;bottom: -6px;left: 50%;transform: translate(-50%);background: var(--color-normal);}
#multsearch .box{background-color: var(--color-toolbar);border-radius: 8px;overflow: hidden;box-shadow: 0 0 5px #0001;}
#multsearch .kw_in{width: calc(100% - 44px);height: 44px;font-size: 15px;padding-left: 1rem;border: 0;outline: 0;color:var(--color-normal);background-color: var(--color-toolbar);}
#multsearch .su_btn{display: inline-block;vertical-align: top;width: 44px;height: 44px;line-height: 44px;padding: 4px;color: var(--color-pale);text-align: center;font-weight: bold;cursor: pointer;}
#multsearch .su_btn svg{width: 20px;height: 20px;color: #999}
#urldlg{width: 90%;;max-width: 450px;color: var(--color-pale);}
#urldlg .con{width: 100%;min-height: 165px;max-height: 265px;padding: 32px;background-color: var(--color-toolbar);overflow-y: auto}
#urldlg .title{display: flex;align-items: center;}
#urldlg .name{margin-left: 8px;}
#urldlg .link{display: block;padding: 8px;background-color: var(--color-hoverbg);margin: 16px 0;}
#urldlg .opt{display: flex;align-items: center;padding: 14px 16px;}
#urldlg .opt a.btn{margin-left: auto;padding: 6px;font-size: 14px;background-color: var(--color-card2-bg);color: var(--color-card2-txt);border-radius: 5px;padding: 8px 16px;}
#urldlg::backdrop{background-color: var(--backdrop-color)}
.hotlink_A{display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 10px;}
.hotlink_A .wsitem{padding: 8px 12px;background-color: var(--color-card1-bg);border: 1px solid var(--color-card1-border);border-radius: 6px;min-width: 0;}
.hotlink_A .wsitem a{display: flex;align-items: center;}
.hotlink_A .wsitem .des{display: none;}
.hotlink_A .wsitem .name{font-size: 14px;line-height: 24px;margin-left: 8px;color: var(--color-card1-txt);display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.hotlink_A .wsitem:hover{background-color: var(--color-hoverbg);}
.classblkA .container{display: grid;grid-template-columns: repeat(10, 1fr);grid-gap: 10px;padding: 12px;padding-bottom: 16px;}
.classblkA .csitem{text-align: center;}
.classblkA .csitem img{display: block;width: 64px;height: 64px;margin: 0 auto;margin-bottom: 4px;object-fit: contain;}
.classblkB {display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 10px;}
.classblkB .csitem {display: flex;align-items: center;border-radius:8px;cursor: pointer;background-color: var(--color-toolbar);box-shadow: var(--shadow-slight);height: 84px;min-width: 0;}
.classblkB .csitem img{width: 43px;height: 43px;margin: auto 16px;border-radius: 4px;object-fit: contain;}
.classblkB .csitem .info{width: calc(100% - 80px);}
.classblkB .csitem .name{color: var(--color-normal)}
.classblkB .csitem .des{color: var(--color-slight);font-size: 14px;font-weight: 300;margin-top: 4px;}
.classblkB .csitem span{display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.classblkC {display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 10px;}
.classblkC .csitem {display: flex;align-items: center;border-radius:8px;cursor: pointer;background-color: var(--color-toolbar);box-shadow: var(--shadow-slight);height: 82px;padding: 20px;min-width: 0;}
.classblkC .csitem img{width: 36px;height: 36px;margin-left: auto;border-radius: 4px;object-fit: contain;}
.classblkC .csitem .info{width: calc(100% - 36px);}
.classblkC .csitem .name{color: var(--color-normal);font-family: "IBM Plex Sans SC";line-height: 21px;}
.classblkC .csitem .des{color: var(--color-slight);font-size: 14px;font-weight: 300;margin-top: 4px;}
.classblkC .csitem span{display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.wsblk .head .more{float: right;font-size: 12px;margin-right: 4px;color: #888}
.wsblk .head .more:hover{color: #06a}
.wsblk .head .more span{font-size: 16px;}
.wsblk .con{padding: 10px}
.wsblk .wsitem{display: inline-block;width: 20%;padding: 12px;min-height: 54px;border-radius: 4px;cursor: pointer;-webkit-transition: 0s;-o-transition: 0s;transition: 0s;}
.wsblk .wsitem img{display: inline-block;vertical-align: top;border-radius: 4px;object-fit: contain;}
.wsblk .wsitem .info{display: inline-block;vertical-align: top;margin-left: 6px;width: calc(100% - 36px);}
.wsblk .wsitem .name{display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-family: "未来圆SC";}
.wsblk .wsitem .des{color: var(--color-slight);font-size: 14px;font-weight: 200;margin-top: 2px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow : hidden;}
.wsblk .wsitem:hover{background-color: var(--color-hoverbg);-webkit-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s;}
.sidebar .sec{margin-bottom: 16px;}
.sidebar .bbk{padding: 12px;}
.sidebar .imgAd{width: 100%;}
.sidebar .imgAd img{width: 100%;border-radius: 3px;margin-bottom: 4px;}


@media only screen and (max-width: 1200px) {
    .pagecon .main{width: 100%;}
    .pagecon .sidebar{display: none;}
}

@media only screen and (max-width: 900px) {
    #hotside {grid-template-columns: repeat(4, 1fr);}
    .hotlink_A {grid-template-columns: repeat(4, 1fr);}
    .classblkA .container{grid-template-columns: repeat(5, 1fr);}
    .classblkB, .classblkC{grid-template-columns: repeat(4, 1fr);}
    .wsblk .wsitem {width: 25%;}
}

@media only screen and (max-width: 768px) {
    #multsearch{padding-top: 0}
    #multsearch img{display: none;}
    #multsearch .con{width: 100%;margin-left: 0;}
    #hotside {grid-template-columns: repeat(2, 1fr);padding: 0 16px;}
    #hotside .wsitem{padding: 16px 14px;}
    .hotlink_A {grid-template-columns: repeat(2, 1fr);}
    .classblkA .csitem img{width: 50px;height: 50px}
    .classblkA .csitem span{font-size: 14px;}
    .classblkB, .classblkC{grid-template-columns: repeat(2, 1fr);}
    .wsblk .wsitem {width: 50%;}
    .pagecon{padding: 8px}
}