body{background: #f5f5f5;}
header{ background: #FBFAF8}
.codesbigpic{background:#FBFBFB url(/skin/yzksp2022/img/studioschbg.jpg) top center no-repeat;background-size:cover;height:366px}
.codesbigpic .in{text-align:center;margin:0 auto;width:70%;clear:both;max-width:800px;padding:100px 0 0;position: relative;}
.codesbigpic .in h2{font-size:40px;color:#fff;font-weight:700;margin-bottom:20px}
.codesbigpic span {
color: #fff;
font-size: 24px;
display: block;
margin-top: 8px;
}
.codesbigpic span.related {
font-size: 18px;
}
.codesbigpic span.related a {
color: #fff;
margin-right: 15px;
display: inline-block;
}
.codesbigpic form {
width: 100%;
margin: 20px auto 0;
background: #fff;
text-align: left;
position: relative;
border-radius: 100px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1)
}
.codesbigpic .pankey {
height: 50px;
line-height: 50px;
text-indent: 2em;
width: 100%;
font-size: 16px;
background: none;
color: #ccc
}
.codesbigpic .pankey:-webkit-autofill {
border-radius:100px
}
.codesbigpic form button {
position: absolute;
right: -3px;
top: 0;
height: 52px;
width: 100px;
text-align: center;
border-radius: 100px
}
.codesbigpic form button i {
font-size: 30px;
color: #fff
}
.codesbigpic p{font-size:18px;color:#fff;line-height:32px}
.autocomplete-suggestions {
padding: 0 10px;
margin-top: 5px;
border-radius: 10px;
}
.autocomplete-suggestions {
background-color: #FFFFFF;
border: 1px solid #EEEEEE;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.autocomplete-suggestions.active {
position: absolute;
z-index: 9999;
top: 100%;
width: 100%;
}
.autocomplete-suggestion {
padding: 10px 0;
cursor: pointer;
text-align:left;
}
.autocomplete-suggestion {
border-top: 1px solid #EEEEEE;
}
.autocomplete-suggestion:first-child {
border-top: 0;
}
.crumbs{line-height:18px;color:#aaa;font-size:14px;padding:40px 0 0 0}
.crumbs a{color:#666}
.crumbs em{font-family:SimSun;margin:0 4px}
.content {
margin: 0 auto;
zoom: 1;
}
.smenu{width:100%;margin:30px auto 0}
.smenu li{float:left}
.smenu li a{display:block;height:32px;line-height:32px;font-size:12px;text-align:center;padding:0 13.9px}
.smenu .fl li a{color:#fff;border-radius:2px;background:#f90;margin:4px 12px 4px 0}
.smenu .fl li a:hover{transform:translateY(-6px);-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);box-shadow:0 12px 22px -10px rgba(0,36,100,.5);-webkit-box-shadow:0 12px 22px -10px rgba(0,36,100,.5);-moz-box-shadow:0 12px 22px -10px rgba(0,36,100,.5)}
.smenu .fr li a{border-radius:100px;box-shadow:none;margin:4px 0 4px 12px;transition-duration:0s}
.smenu .fr li a:hover{border:1px solid transparent}
.smenu .fr li a i{font-size:14px;margin:0 6px 0 0}
.smenu li .act {
background: #45b6f7!important;
}
.smenu li .dh {
background: #aaa!important;
}
.codeslist .list {
overflow: hidden;
margin-top: 20px; margin:0 auto;
}
.codeslist .list{margin: 20px -0.5% 0px -0.5% ;}
.codeslist .list li{float: left;
width: 19%;
margin:0px 0.5% 20px 0.5%;
position: relative;
overflow: hidden;background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.06);
border-radius: 3px;
overflow: hidden;
-webkit-transition: transform .15s ease-in-out,box-shadow .15s ease-in-out;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.04),0 4px 8px rgba(0,0,0,.06);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.06);
-webkit-backface-visibility: hidden;border-radius: 5px;
}
.codeslist .list li:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -2px, 0);
}
.codeslist .list li .stag {
padding: 0px 10px;
}
.codeslist .list li .stag a {
color: #9D9D9D;
display: inline-block;
padding: 0 0 5px 0;
white-space: nowrap;
font-size: 13px;margin-right: 10px;
}
.codeslist .list li .other {
font-size: 12px;
background: #f6f6f6;
border-top: 1px solid #e7e7e7;
box-shadow: 0 1px 0 0 #fff inset;
padding: 0px 10px;
color: #8B8B8C;
height: 36px;
overflow: hidden;
}
.codeslist .list li .other span{
display: inline-block;
line-height: 36px;
}
.codeslist .list li .other .m-right {
margin-right: 10px;
}
.codeslist .list li .other .left {
float: left !important;
}
.codeslist .list li a img{width:100%;height:auto}
/**.codeslist .list li:hover img{opacity:0.68}**/
.codeslist .list li h2{
/* line-height: 38px;*/
padding: 0px 10px;
height: 38px;
/* overflow: hidden;*/
}
.codeslist .list li h2 a{font-size:14px;margin:10px 0 2px;color: #666;overflow:hidden;}
.codeslist .list li p{font-size:12px;color:#999;}
.codeslist .list li p span,.codesslide .list li p span{ margin: 0px 10px;}
.codeslist .list li p span i,.codesslide .list li p span i{ margin-right:5px;}
.codeslist .list li .pic {
position: relative;
max-height: 480px;
overflow: hidden;
text-align: center;
}
.codeslist .list li .demo-btn {
width:85px;
background: #F4543C;
position: absolute;
right: 18px;
top: 0px;
display: inline-block;
height: 32px;
margin: 5px;
text-align: center;
line-height: 32px;
color: #fff;
opacity: 0;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.06);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.04),0 4px 8px rgba(0,0,0,.06);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.06);
}
.codeslist .list li:hover .demo-btn{transition: all .25s;-webkit-transition: transform .25s ease-in-out,box-shadow .25s ease-in-out;top: 10px;opacity: 1;}
.fl {float: left;}
.fr {float: right;}
.codesinfo{width:100%;margin:26px -360px 0 0;z-index:1;position:relative}
.codesinfo-in{margin-right:420px;line-height:2;color:#444;font-size:16px}
.codesslide{width:360px;z-index:2;margin-top:26px;position:relative}
.codesslide .tit{border-bottom:1px dashed #E0DAD5}
.codesslide .tit h1{font-size:26px;font-weight:500}
.codesslide .tit span{color:#aaa;font-weight:500;font-size:14px;line-height:30px;display:block}
.codesslide .tit span em{font-size:12px;margin-left:8px;color:#bbb}
.codesslide .tit p{color:#6a6a6a;font-size:13px;line-height:24px;margin:30px 0}
.codesslide .list{overflow:hidden;margin-top:40px}
.codesslide .list h4{display:inline-block;font-size:13px;color:#aaa;padding:5px 10px;background:#eee;margin-right:5px;font-weight:500;margin-bottom:20px}
.codes_other .list ul{overflow:hidden}
.codesslide .list li{width:165px;height:auto;float:left;margin:0 10px 20px 0}
.codesslide .list li img{width:100%;border-radius:2px;height:auto}
.codesslide .list li strong{display:block;margin:10px 0 0 0;color:#333;font-weight:500;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.codesslide .list li p{color:#bbb;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; text-align:center}
.codesinfo p:first-child{margin-top:0}
.codesinfo p:first-child img{max-width:100%;height:auto!important}
.tinfo{font-size:16px;line-height:2;color:#444;letter-spacing:0.5px;text-align:justify;font-weight:500!important}
.tinfo p{margin:26px 0}
.tinfo p em{background:url(//file.hecang.net/images/bolang.png) 100% 100% repeat-x;padding-bottom:4px}
.tinfo .zhushi{width:19px;height:19px;margin-left:4px;margin-right:4px;cursor:pointer;z-index:1;background:url(//file.hecang.net/images/zhushi.png) 0 0 no-repeat;display:inline-block;padding:0;vertical-align:-2px;position:relative}
.tinfo .zhushi strong{display:none;position:absolute;min-width:180px;max-width:200px;bottom:28px;border:1px solid #9fa5aa;background:#f5f4ed;padding:15px;border-radius:4px;box-shadow:0 0 10px -2px rgba(102,102,102,.6);font-family:'æ–¹æ£æ¥·ä½“',"楷体","楷体_GB2312",SimKai,KaiTi;font-size:16px;color:#333;line-height:1.4;overflow:auto;word-break:break-all;font-weight:500;margin-left:-60px;text-indent:0}
.tinfo .zhushi i{position:absolute;height:7px;width:11px;overflow:hidden;background:url(//file.hecang.net/images/zhushi.png) 0 0 no-repeat;bottom:22px;background-position:-24px -9px;margin-left:2px;display:none}
.tinfo .zhushi:hover strong,.tinfo .zhushi:hover i{display:block}
.tinfo p a,.textinfo .down a{color:#2D8AC5}
.tinfo p a:hover,.textinfo .down a:hover{color:#f90;text-decoration:underline}
.tinfo img{max-width:100%;display:block;margin:0 auto;border-radius:2px;height:auto!important;border:1px solid #e6e6e6}
.tinfo h3{border-bottom: 1px solid #eff3f5;
height: 42px;
line-height: 42px;
font-size: 22px;
font-weight: 400;
padding: 20px 0 10px 0;}
.tinfo ul{margin:26px 0 26px 3em}
.tinfo blockquote ul{margin:0 0 0 1em}
.tinfo ul li{display:list-item;list-style:circle}
.tinfo li p,.tinfo blockquote p{line-height:2.2;margin:12px 0}
.tinfo blockquote,.tinfo pre{background:#f3f3f3;border-radius:0 5px 0 0;padding:14px 30px;margin:26px 0;line-height:2.2}
.tinfo h4{height: 26px;
line-height: 26px;
font-size: 16px;
font-weight: 400;
padding: 30px 0 0 22px;}
.tinfo ol{list-style:decimal-leading-zero;margin-left:3em}
.tinfo blockquote ol{margin-left:1em}
.tinfo ol li{list-style-type:decimal}
.tinfo strong{font-family:Microsoft Yahei}
.tinfo table,.table{width:100%;border:1px solid #ddd;background:#fff}
.tinfo thead,.table thead{background-color:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}
.tinfo td,.tinfo th,.table td,.table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:0.8em 1em}
.tinfo td:first-child,.tinfo th:first-child,.table td:first-child,.table th:first-child{border-left-width:0}
.tinfo td,.table td{border-bottom:1px solid #cbcbcb}
.tinfo table p,.table table p{margin:0}
.tinfo hr{border-style:dashed;border-color:#ddd;margin:26px 0}
.digbtn{padding:10px 0 60px;text-align:center;width:100%}
.digbtn a{color:white;display:inline-block;padding:8px 50px;border-radius:100px;text-align:center}
.digbtn a em{font-size:20px;margin:0px 10px 0 0}
.digbtn a i{font-size:18px;font-weight:700}
.pins-btn {
width: 100%;
text-align:center
}
.pins-btn .btn-views,.pins-btn .btn-download{margin:0 20px; display:inline-block
}
.pins-btn a {
text-align: center;
color: #FFF;
text-decoration: none;
overflow: hidden;
padding: 5px 15px;
font-size: 18px;
display: block;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
order-radius: 3px;
}
.pins-btn a i {
font-size: 20px;
margin: 0 5px 0 0;
color: #fff;
}
.pins-btn .btn-views a {
background: #3498db;
}
.pins-btn .btn-download a {
background: #3dbb2b;
}
.tag-box {
border-top: 1px solid #f0f0f0;
display: inline-block;
margin-top: 10px;
padding-top: 20px;
width: 100%;
}
.tag-box span{ border: none;
background-color: #E2523A;
color: #fff;
display: inline-block;
margin-bottom: 10px;
margin-right: 10px;
padding: 0 16px;
border-radius: 2px;font-size: 14px;}
.tag-box a {
border: none;
background-color: #666;
color: #fff;
display: inline-block;
margin-bottom: 10px;
margin-right: 10px;
padding: 0 16px;
border-radius: 2px;font-size: 14px;
}
.tag-box a:hover {
background-color: #E2523A;
color: #fff
}
.entry-page {
margin: 30px 0;
overflow: hidden
}
.entry-page-next, .entry-page-prev {
position: relative;
float: left;
width: 45%;
padding: 60px 15px 10px;
color: #fff;
background-size: cover;
background-position: 50%;
border-radius: 3px;
overflow: hidden
}
@media (max-width:767px) {
.entry-page-next, .entry-page-prev {
width: 100%;
margin-bottom: 10px;
float: none; padding: 60px 0px 10px 0px;
}
.entry-page-next .entry-page-info, .entry-page-prev .entry-page-info {
padding: 0px 15px;
}
}
.entry-page-next:before, .entry-page-prev:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
content: ""
}
.entry-page-next:hover:before, .entry-page-prev:hover:before {
background: rgba(0,0,0,.7)
}
.entry-page-next a, .entry-page-prev a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
color: #fff;
font-size: 15px;
}
.entry-page-next a span, .entry-page-prev a span {
display: block;
padding: 10px 15px 0;
height: 50px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2
}
.entry-page-next a:hover, .entry-page-prev a:hover {
color: #fff;
text-decoration: none
}
.entry-page-next .entry-page-info, .entry-page-prev .entry-page-info {
position: relative;
font-size: 14px;
line-height: 16px;
overflow: hidden
}
.entry-page-next {
float: right
}
@media (max-width:1400px){
.wrapper{ width:95%}
}
@media (max-width:1280px){
.codeslist .list li{ width:24%;}
}
@media (max-width:1140px){
.pages .crumbs{padding-bottom:60px}
.content.pages{position:relative}
.codesslide{width:320px}
.codesinfo-in{margin-right:360px;font-size:14px}
.codesslide .list li{width:148px}
}
@media (max-width:1000px){
.codeslist .list li{ width:32.3333%;}
}
@media (max-width:960px){
.smenu .fr{display:none}
.codesslide .list{display:none}
.codesslide{float:none;width:100%;margin-top:30px}
.codesinfo{margin:20px 0 0 0}
.codesslide .tit p{margin:10px 0 20px}
}
@media (max-width:820px){
.crumbs{padding:22px 0 0}
.codeslist .list li{ width:48%;}
}
@media (max-width:730px){
.tinfo{padding:0}
}
@media (max-width:690px){
.codesbigpic form button i {
font-size: 24px
}
.codesbigpic .pankey {
height: 44px;
}
.codesbigpic form button {
height: 44px;
width: 60px
}
.crumbs{font-size:12px}
.smenu li a{padding:0 12px;height:30px;line-height:30px}
.codesinfo-in{margin-right:0}
.codesslide{float:none;width:100%;margin-top:30px}
.codesinfo{margin:20px 0 0 0}
}
@media (max-width:600px){
.wrapper{ width:100%}
.content{padding:16px;background:#EBEBEB;margin:0 auto;box-shadow:none;margin-top:0px;border-radius:0}
.crumbs {padding: 0;}
.smenu{margin:16px auto 0}
.smenu li a{border-radius:100px;height:24px;line-height:24px;margin:2px 8px 4px 0}
.codeslist .list li {
width:49%;
}
.codeslist .list li a p{ display:none !important}
.codeslist .list li a h2{font-size:12px;margin:6px 0 0}
.codeslist .list li a img{box-shadow:0 0 8px rgba(0,0,0,.06);border:none;border-radius:2px}
.zpslide .tit span{color:#bbb}
.codesslide .tit span,.digbtn a,.about_hecang .info{font-size:12px}
.codesslide .tit{border-bottom:none}
.codesslide .tit h3{font-size:20px}
.codesinfo{margin:0}
.tinfo ol{margin-left:2em}
.tinfo img{box-shadow:0 0 8px rgba(0,0,0,.06);border:none}
.tinfo{font-size:15px}
.tinfo h3{font-size:18px;margin:26px 0;padding:0}
.tinfo blockquote{background:#F6F6F6;border-left:10px solid #e0e0df;padding:2px 20px}
.codesslide .tit span,.digbtn a{font-size:12px}
.digbtn a{width:50%;padding:8px 0}
.codesbigpic {height: auto;padding: 20px 0px;}
.codesbigpic .in{padding:0px;width: 90%;}
.codesbigpic .in h2 {font-size: 20px;}
.codesbigpic span.related {font-size: 16px;}
}
@media (max-width:425px){
.codeslist .list li {
width:100%;float:none;margin:0px 0px 10px 0px;
}
}
@media (max-width:375px){
.pins-btn .btn-views, .pins-btn .btn-download {
margin: 10px 0px;
display: block;
}
}
/*åŠ è½½æ›´å¤š*/
.get-mod-more{color:#bbb;cursor:pointer;font-size:16px;height:60px;line-height:60px;text-align:center;width:100%}
.get-mod-more{border:1px solid #f0f0f0;display:inline-block;margin-bottom:60px;margin-top:-1px}
.get-mod-more:hover{background-color:transparent;border-color:transparent;color:#999;border:1px solid #f0f0f0}