@charset "utf-8";

/* cs-title */

.cs-title {position:relative; height:42px; background-color:#ffffff; border-bottom:1px solid #cacaca;}
.cs-title:after {display:block; content:''; position:absolute; left:0; bottom:-2px; width:100%; height:0; border-bottom:1px solid #cacaca; opacity:0.3;}
.cs-title .btn-back {display:block; position:absolute; left:0; top:0; width:38px; height:42px; cursor:pointer;}
.cs-title .btn-back:before {display:block; content:''; position:absolute; left:10px; top:calc(50% - 9px); opacity:0.5;}
.cs-title .btn-option {display:block; position:absolute; right:0; top:0; width:38px; height:42px; cursor:pointer;}
.cs-title .btn-option:before {display:block; content:''; position:absolute; left:10px; top:calc(50% - 9px); opacity:0.5;}
.cs-title .title {display:flex; flex-direction:column; justify-content:space-around; margin:0 50px; width:calc(100% - 100px); height:42px;}
.cs-title .title a {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; text-align:center;}
.cs-title .title a {line-height:42px; font-size:16px; color:#000000;}

/* cs-search */

.cs-search {z-index:1; margin:15px 15px 15px 15px; display:none; position:relative; text-align:center; cursor:pointer;}
.cs-search.on {display:block;}
.cs-search .input {position:relative; display:block;}
.cs-search .input:after {display:block; content:''; position:absolute; left:0; bottom:0px; width:100%; height:0; border-bottom:1px solid #000000; opacity:0.4;}
.cs-search .input span {z-index:2; position:relative; display:block; position:absolute; top:0; right:0; width:40px; height:40px; cursor:pointer;}
.cs-search .input span:before {z-index:1; display:block; content:''; position:absolute; left:calc(50% - 9px); top:calc(50% - 9px); opacity:0.4;}
.cs-search .input input {z-index:1; padding:0 10px; width:calc(100% - 20px); height:40px; border:0; background:transparent;}
.cs-search .input input {line-height:40px; font-size:18px;}
.cs-search .input.focus {background-color:#fff25e;}
.cs-search .input.focus:after {width:calc(100% - 2px); height:calc(100% - 2px); border:1px solid #000000; border-radius:3px; opacity:1;}
.cs-search .input.focus input {padding:0 10px; width:calc(100% - 20px); color:#000000;}
.cs-search .input.focus span:before {opacity:1;}

/* cs-ct */

.cs-ct {z-index:1; display:block; position:relative;}
.cs-ct:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#fbfcfc;}
.cs-ct:after {z-index:-1; display:block; content:''; position:absolute; left:-1px; top:-1px; width:calc(100% - 1px); height:calc(100% - 1px); border:1px solid #eff0f0;}
.cs-ct ul {position:relative; margin:1px 0 0 1px;}
.cs-ct li {position:relative; display:inline-block; vertical-align:top; width:100%; cursor:pointer;}
.cs-ct li p {z-index:1; text-decoration:none; position:relative; display:block;}
.cs-ct li p:after {z-index:-1; display:block; content:''; position:absolute; left:0; top:0px; width:100%; height:100%; background-color:#fbfcfc;}
.cs-ct li span {z-index:1; margin:-1px 0 0 -1px; padding:0 10px 0 10px; min-height:15px; position:relative; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; text-align:center;}
.cs-ct li span {line-height:40px; font-size:13px;}
.cs-ct li span:after {z-index:-1; display:block; content:''; position:absolute; left:0px; top:0px; width:calc(100% - 2px); height:calc(100% - 2px); border:1px solid #eff0f0;}
.cs-ct li.on p:after {background-color:#7f7f7f;}
.cs-ct li.on p span {color:#ffffff !important;}

@media screen and (min-width:360px) {

.cs-ct li {width:50%;}

}

@media screen and (min-width:540px) {

.cs-ct li {width:33.333%;}

}

@media screen and (min-width:720px) {

.cs-ct li {width:25%;}

}

/* cs-msg */

.cs-msg {display:none; height:72px; position:relative; padding:0 10px;}
.cs-msg.on {display:block;}
.cs-msg p {line-height:72px; font-size:13px;}
.cs-msg p > span {font-weight:bold;}
.cs-msg div {padding:5px 10px; display:block; position:absolute; top:calc(50% - 19px); right:0; text-align:center; cursor:pointer;}
.cs-msg div >span {padding:0 10px; display:block; border:1px solid #cacaca; border-radius:3px;}
.cs-msg div >span {font-weight:bold; line-height:26px; font-size:11px;}

/* cs-list */

.cs-list {margin-top:10px;}
.cs-list li {position:relative;}
.cs-list li:before {display:block; content:''; position:absolute; left:0; top:0; width:100%; height:0; border-top:1px solid #000000; opacity:0.05;}
.cs-list li:last-child:after {display:block; content:''; position:absolute; left:0; bottom:-1px; width:100%; height:0; border-bottom:1px solid #000000; opacity:0.05;}
.cs-list li:first-child:before {display:none;}
.cs-list .array {z-index:1; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-around; width:100%; height:82px; cursor:pointer;}
.cs-list .array:after {z-index:-1; display:block; content:''; position:absolute; right:17px; top:calc(50% - 3px); cursor:pointer; opacity:0.3;}
.cs-list .array p {margin:-1px 10px 0 10px; position:relative; padding:0 30px 0 28px; display:block;}
.cs-list .array .title {display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; word-wrap:break-word; word-break:break-all;}
.cs-list .array .title {line-height:1.3; font-size:16px; color:#333333;}
.cs-list .array .ct {margin-bottom:5px; display:block;}
.cs-list .array .ct {line-height:15px; font-size:12px; color:#999;}
.cs-list .array .ct > span {margin-left:10px; padding-left:11px; position:relative; display:inline-block; vertical-align:top;}
.cs-list .array .ct > span:before {display:block; content:''; position:absolute; left:0; top:calc(50% - 5px); width:0; height:11px; border-left:1px solid #ededed;}
.cs-list .array .ct > span:first-child {margin-left:0; padding-left:0;}
.cs-list .array .ct > span:first-child:before {display:none;}
.cs-list .array .icon {display:block; position:absolute; left:0; top:-4px;}
.cs-list .array .icon {line-height:24px; font-size:20px; color:#333333;}

.cs-list .array.s-b-arrow-u {background-color:#000;}
.cs-list .array.s-b-arrow-u .icon {color:#ffffff;}
.cs-list .array.s-b-arrow-u .ct {color:#ffffff;}
.cs-list .array.s-b-arrow-u .ct > span {color:#ffffff !important;}
.cs-list .array.s-b-arrow-u .title {color:#ffffff;}

.cs-list .view {display:none; background-color:#fbfcfc;}
.cs-list .wrap-file {padding:10px 0 4px 0;}
.cs-list .wrap-file p {z-index:1; position:relative; display:block; margin:5px 10px 0 10px;}
.cs-list .wrap-file p:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:calc(100% - 2px); height:calc(100% - 2px); background-color:#ffffff; border:1px solid #e0e0e0;}
.cs-list .wrap-file p:after {z-index:-2; display:block; content:''; position:absolute; left:1px; top:1px; width:100%; height:100%; background-color:#efefef;}
.cs-list .wrap-file a {z-index:2; position:relative; display:block; padding:10px 27px 10px 27px;}
.cs-list .wrap-file a:before {z-index:-1; display:block; content:''; position:absolute; left:9px; top:9px;}
.cs-list .wrap-file a:first-child {margin-top:0;}
.cs-list .wrap-file a span {margin-top:-1px; display:inline-block; vertical-align:top; word-break:break-all;}
.cs-list .wrap-file a span {line-height:15px; font-size:12px;}
.cs-list .wrap-file a span:nth-child(2) {margin-left:5px; color:#ef4f4e;}
.cs-list .wrap-file a span:nth-child(3) {z-index:1; display:block; position:absolute; right:9px; top:9px; width:15px; height:15px;}
.cs-list .wrap-file a span:nth-child(3):before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0;  opacity:0.2;}

.cs-list .wrap-content {margin:0 15px; min-height:120px; padding:20px 0;}
.cs-list .wrap-content .img {display:inline-block; position:relative;}
.cs-list .wrap-content .img .icon-viewer {z-index:10; display:block; position:absolute; right:2px; bottom:2px; width:25px; height:25px; cursor:pointer;}
.cs-list .wrap-content .img .icon-viewer:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%;}
.cs-list .wrap-content .image {padding-bottom:20px; overflow:hidden;}
.cs-list .wrap-content .image p {display:flex; align-items:center; justify-content:center;}
.cs-list .wrap-content .image img {margin:auto; max-width:100%; border:0;}
.cs-list .wrap-content .wrap {}
.cs-list .wrap-content .content {vertical-align:top; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
.cs-list .wrap-content .content {line-height:1.625; font-size:17px; color:#000000;}
.cs-list .wrap-content .content a {color:#0000ff;}
.cs-list .wrap-content .content img {max-width:100%; border:0;}

.cs-list li.on .view {display:block;}

.cs-list.textzoom2 .array {height:92px;}
.cs-list.textzoom3 .array {height:102px;}

/* cs-btn */

.cs-btn {z-index:1; display:none; position:relative; margin:20px 15px 0 15px; text-align:center; cursor:pointer;}
.cs-btn.on {display:block;}
.cs-btn:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:calc(100% - 2px); height:calc(100% - 2px); background-color:#ffffff; border:1px solid #e0e0e0;}
.cs-btn:after {z-index:-2; display:block; content:''; position:absolute; left:1px; top:1px; width:100%; height:100%; background-color:#efefef;}
.cs-btn span {display:inline-block; vertical-align:top;}
.cs-btn span:nth-child(1) {line-height:40px; font-size:15px; color:#999999;}
.cs-btn span:nth-child(2) {margin-left:10px;}
.cs-btn span:nth-child(2) {line-height:40px; font-size:11px; color:#333333;}
.cs-btn span:nth-child(3) {margin:0 3px;}
.cs-btn span:nth-child(3) {line-height:40px; font-size:11px; color:#e0e0e0;}
.cs-btn span:nth-child(4) {line-height:40px; font-size:11px; color:#cccccc;}

/* cs-footer */

.cs-footer {height:100px;}

/* cs-not */

.cs-not {display:none; padding:0 0 70px 0;}
.cs-not.on {display:block;}
.cs-not .block {margin-top:45px;}
.cs-not .block .icon-not {position:relative; width:160px; height:160px; margin:0 auto; background-position:0 -100px; opacity:0.5;}
.cs-not .block p {margin-top:30px; text-align:center;}
.cs-not .block p {line-height:15px; font-size:13px;}
.cs-not .btn {padding:20px 60px 0 60px;}
.cs-not .btn p {z-index:1; margin-top:10px; display:block; position:relative; text-align:center; cursor:pointer;}
.cs-not .btn p {line-height:42px; font-size:16px; color:#ffffff;}
.cs-not .btn p:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000000; opacity:0.2; border-radius:42px;}
.cs-not .btn p:first-child {margin-top:0;}

/* option */

.layout-create.lc-option {position:absolute; background-color:#ffffff; border:1px solid #000000; overflow-x:hidden; overflow-y:auto;}
.layout-create.lc-option .header {position:relative; border-bottom:1px solid #cccccc;}
.layout-create.lc-option .header .side .btn {margin-right:0px;}
.layout-create.lc-option .body {padding:30px 15px; background-color:#fcfcfc;}
.layout-create.lc-option .body ul {position:relative; margin-top:-10px;}
.layout-create.lc-option .body li {position:relative; margin-top:10px; width:100px; height:87px; display:inline-block; vertical-align:top; text-align:center; cursor:pointer;}
.layout-create.lc-option .body a {z-index:10; display:block; height:87px;}
.layout-create.lc-option .body select {z-index:10; position:absolute; left:0; top:0; display:block; width:100%; height:87px; opacity:0;}
.layout-create.lc-option .body option {line-height:14px; font-size:12px; color:#333333;}
.layout-create.lc-option .body span {z-index:1; display:block; position:relative; margin:0 auto; width:48px; height:48px;}
.layout-create.lc-option .body span:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%;}
.layout-create.lc-option .body p {display:block; margin-top:10px; text-align:center;}
.layout-create.lc-option .body p {line-height:14px; font-size:12px; color:#333333;}

/* share */

.layout-create.lc-share {position:absolute; background-color:#ffffff; border:1px solid #000000; overflow-x:hidden; overflow-y:auto;}
.layout-create.lc-share .header {position:relative; border-bottom:1px solid #cccccc;}
.layout-create.lc-share .header .side .btn {margin-right:0px;}
.layout-create.lc-share .body {padding:30px 15px; background-color:#fcfcfc;}
.layout-create.lc-share .body ul {position:relative; margin-top:-10px;}
.layout-create.lc-share .body li {position:relative; margin-top:10px; width:100px; height:87px; display:inline-block; vertical-align:top; text-align:center; cursor:pointer;}
.layout-create.lc-share .body li a {z-index:10; display:block; height:87px;}
.layout-create.lc-share .body span {z-index:1; display:block; position:relative; margin:0 auto; width:48px; height:48px;}
.layout-create.lc-share .body span:before {z-index:-1; display:block; content:''; position:absolute; left:0; top:0; width:100%; height:100%;}
.layout-create.lc-share .body p {display:block; margin-top:10px; text-align:center;}
.layout-create.lc-share .body p {line-height:14px; font-size:12px; color:#333333;}
.layout-create.lc-share .body.t-4 li {width:75px;}
.layout-create.lc-share .body .copy {margin-top:10px;}
.layout-create.lc-share .body .copy p {margin-left:2px; text-align:left;}
.layout-create.lc-share .body .copy p {line-height:14px; font-size:12px; color:#333333;}
.layout-create.lc-share .body .copy div {position:relative; margin-top:8px; background-color:#ffffff; border:1px solid #ededed;}
.layout-create.lc-share .body .copy div {padding:0 10px;}
.layout-create.lc-share .body .copy div input {width:100%; border:0;}
.layout-create.lc-share .body .copy div input {line-height:35px; font-size:12px; color:#333333;}
.layout-create.lc-share .body .copy div span {position:absolute; right:0; top:0; width:45px; height:35px; background-color:#666666; text-align:center; cursor:pointer;}
.layout-create.lc-share .body .copy div span {line-height:35px; font-size:12px; color:#ffffff;}

.layout-create.lc-share .reward-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
    -ms-flex-direction: column;

    border-top: 1px solid #f2f2f2;
    margin-top: 20px;
    padding-top: 12px;
}

.layout-create.lc-share .reward-fee {
    word-wrap: break-word;
    word-break: break-all;
    font-weight: bold;
    line-height: 1.4;
    font-size: 14px;
    color: #333;
}

.layout-create.lc-share .reward-fee svg {
    position: relative;
    top: 3px;
    margin-left: 7px;
    width: 17px;
    height: 17px;
}

.layout-create.lc-share .reward-guide {
    margin-top: 6px;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 1.4;
    font-size: 12px;
    color: #333;
}

.layout-create.lc-share .reward-btn {
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #006ff2;
    background-color: #f2f8fe;
    text-align: center;
    line-height: 33px;
    font-size: 14px;
    color: #006ff2;
}