.resource { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 4px; padding-bottom: 85px; max-width: 80%; }

.resource-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.resource-side { width: calc(340 / 1200 * 100%); margin-left: 20px; }

.resource-detail { background-color: #ffffff; padding: 27px 20px 32px; }

.resource-detail .title { font-size: 18px; color: #242424; font-weight: bold; }

.resource-detail .carousel { margin-top: 27px; }

.resource-detail .carousel-item { width: 100%; }

.resource-detail .carousel-item .media { padding-top: calc(440 / 800 * 100%); position: relative; background-color: #f7f7f7; }

.resource-detail .carousel-item .media img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; }

.resource-detail .pdf { margin-top: 30px; position: relative; }

.resource-detail .pdf-view { aspect-ratio: 800 / 1300; overflow-y: auto; }

.resource-detail .pdf-view img { max-width: 100%; }

.resource-detail .pdf-view::-webkit-scrollbar { width: 8px; }

.resource-detail .pdf-view::-webkit-scrollbar-thumb { border-radius: 4px; background: #ccc; }

@media (max-width: 500px) { .resource-detail .pdf-view::-webkit-scrollbar { width: 4px; } }

.resource-detail .pdf iframe { display: block; width: 100%; height: 1000px; }

.resource-detail .pdf .btn-zoom { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.2) url(./images/i-zoom.png) no-repeat center; cursor: pointer; }

.resource-detail .pdf .btn-zoom:hover { background-color: #000; }

@media (max-width: 500px) { .resource-detail .pdf .btn-zoom { right: 0; top: 0; } }

.resource-detail .msg { display: -webkit-box; display: -ms-flexbox; display: flex; color: #7985a0; font-size: 14px; margin-top: 31px; }

.resource-detail .msg .item { margin-right: 44px; }

.resource-detail .msg .item:last-of-type { margin-right: 0; }

.resource-cost { padding: 30px; position: relative; background-color: #fff; background-color: #ffffff; -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); text-align: center; }

.resource-cost::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 55px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 114, 0, 0.08)), to(transparent)); background: -o-linear-gradient(top, rgba(255, 114, 0, 0.08), transparent); background: linear-gradient(to bottom, rgba(255, 114, 0, 0.08), transparent); }

.resource-cost .row-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 24px; color: #242424; }

.resource-cost .row-1 img { width: 40px; margin-right: 20px; }

.resource-cost .row-2 { text-align: center; }

.resource-cost .btn { margin-top: 31px; border: none; width: 160px; height: 44px; font-size: 14px; max-width: 100%; }

.resource-msg { background-color: #ffffff; -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); margin-top: 20px; padding: 10px 20px; }

.resource-msg .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 14px; border-bottom: 1px solid #eee; padding-top: 16px; padding-bottom: 16px; }

.resource-msg .item:last-of-type { border: none; }

.resource-msg .t1 { color: #999; }

.resource-msg .t2 { color: #333; }

.resource-level { background-color: #ffffff; -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); margin-top: 20px; margin-bottom: 20px; }

.resource-level-hd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 20px 14px; border-bottom: 1px solid #eeeeee; }

.resource-level-hd .t1 { font-size: 15px; color: #242424; font-weight: bold; }

.resource-level-hd .t2 { border-radius: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 7px; font-size: 12px; color: #7985a0; padding: 0 4px; }

.resource-level-hd .t2 img { width: 10px; margin-right: 2px; }

.resource-level-bd { padding: 27px 20px 29px; }

.resource-level-bd .t1 { font-size: 14px; color: #333; margin-bottom: 21px; }

.resource-level-bd .t1 span { color: #006bd3; font-weight: bold; }

.resource-level-bd .t2 { font-size: 12px; line-height: 21px; color: #666666; }

.resource-course { background-color: #ffffff; -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.02); margin-top: 20px; }

.resource-course-hd { border-bottom: 1px solid #eee; font-size: 15px; color: #242424; font-weight: bold; padding: 20px; min-height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.resource-course-bd { padding: 20px; padding-bottom: 30px; }

.resource-course-bd .list .li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; }

.resource-course-bd .list .li:last-of-type { margin-bottom: 0; }

.resource-course-bd .list .li:hover .tit { color: #006bd3; }

.resource-course-bd .list .li:hover .img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.resource-course-bd .list .pic { height: auto; border-radius: 6px; overflow: hidden; width: calc(150 / 300 * 100%); margin-right: 16px; max-width: 150px; }

.resource-course-bd .list .img { padding-top: calc(94 / 150 * 100%); background-size: cover; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.resource-course-bd .list .img img { display: none; }

.resource-course-bd .list .text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 6px; padding-bottom: 7px; }

.resource-course-bd .list .tit { color: #333; font-size: 14px; line-height: 19px; }

.resource-course-bd .list .num { font-size: 12px; color: #999; }

.resource-share { position: fixed; left: 257px; top: 320px; z-index: 10; }

.resource-share .item { display: block; margin-bottom: 17px; width: 96px; cursor: pointer; }

.resource-share .item:last-of-type { margin-bottom: 0; }

.resource-share .item.active .icon-3 { background-color: #51cf5b; }

.resource-share .icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; margin-right: auto; width: 46px; height: 46px; -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.04); border-radius: 5px; }

.resource-share .icon-1 { background-color: #006bd3; }

.resource-share .icon-2 { background-color: #ffcf00; }

.resource-share .icon-3 { background-color: #aaa; }

.resource-share .icon img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; }

.resource-share .tit { text-align: center; font-size: 12px; color: #7985a0; width: 100%; white-space: nowrap; margin-top: 8px; }

.resource-comment { margin-top: 20px; background-color: #ffffff; }

.resource-comment-hd { font-size: 18px; font-weight: bold; color: #242424; padding: 25px 20px; border-bottom: 1px solid #eee; }

.resource-comment-publish { position: relative; padding: 20px; border-bottom: 1px solid #eee; }

.resource-comment-publish .row-1 .textarea { display: block; width: 100%; height: 140px; background-color: #ffffff; border-radius: 2px; border: solid 1px #eeeeee; padding: 16px 8px; font-size: 15px; color: #333; }

.resource-comment-publish .row-1 .textarea::-webkit-input-placeholder { color: #999; }

.resource-comment-publish .row-1 .textarea:-ms-input-placeholder { color: #999; }

.resource-comment-publish .row-1 .textarea::-ms-input-placeholder { color: #999; }

.resource-comment-publish .row-1 .textarea::placeholder { color: #999; }

.resource-comment-publish .row-1 .textarea:focus { border-color: #006bd3; }

.resource-comment-publish .row-2 { margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.resource-comment-publish .row-2 .btn { margin-left: auto; border: none; width: 69px; height: 34px; font-size: 15px; border-radius: 5px; padding: 0 5px; }

.resource-comment-publish .send-emoji { margin-right: 20px; position: relative; }

.resource-comment-publish .send-emoji .icon { cursor: pointer; }

.resource-comment-publish .upload-img { position: relative; font-size: 0; }

.resource-comment-publish .upload-img input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; }

.resource-comment-publish .row-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.resource-comment-publish .u-img { position: relative; width: 100px; height: 100px; background: #f9f9f9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: 10px; margin-top: 10px; }

.resource-comment-publish .u-img img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; }

.resource-comment-publish .u-img .b2font { position: absolute; right: 0; top: 0; cursor: pointer; }

.resource-comment-list .u-comment { padding: 30px 20px; border-bottom: 1px solid #eee; }

.resource-comment-list .u-comment .row-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.resource-comment-list .u-comment .row-1 .avatar { width: 40px; height: 40px; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 9px; }

.resource-comment-list .u-comment .row-1 .avatar img { width: 100%; height: 100%; border-radius: 5px; display: block; -o-object-fit: cover; object-fit: cover; }

.resource-comment-list .u-comment .row-1 .tx-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.resource-comment-list .u-comment .row-1 .name { font-size: 16px; color: #7985a0; }

.resource-comment-list .u-comment .row-1 .time { margin-left: auto; font-size: 14px; color: #999; }

.resource-comment-list .u-comment .row-1 .level { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.resource-comment-list .u-comment .row-1 .level-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.resource-comment-list .u-comment .row-1 .level-icon img { width: 12px; margin-right: 3px; }

.resource-comment-list .u-comment .row-1 .level-icon img:last-of-type { margin-right: 0; }

.resource-comment-list .u-comment .row-1 .level-name { margin-left: 5px; background-color: #f3f3f3; border-radius: 2px; font-size: 12px; line-height: 14px; color: #7985a0; padding: 0 5px; }

.resource-comment-list .u-comment .row-1 .level .top { font-size: 12px; padding: 0 5px; border-radius: 2px; color: #e50328; background-color: #fce5e9; margin-left: 10px; }

.resource-comment-list .u-comment .row-2 { font-size: 15px; color: #424242; line-height: 1.5; margin-top: 19px; }

.resource-comment-list .u-comment .row-4 { margin-top: 24px; }

.resource-comment-list .u-comment .like { color: #006bd3; background-color: rgba(0, 107, 211, 0.1); font-size: 14px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 30px; border-radius: 5px; padding: 0 10px; cursor: pointer; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }

.resource-comment-list .u-comment .like i { margin-right: 10px; }

.resource-comment-list .u-comment .like:hover { background-color: #006bd3; color: #fff; }

.resource-comment-list .u-comment .imgs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.resource-comment-list .u-comment .imgs .img { width: 100px; height: 100px; margin-right: 10px; margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f9f9f9; }

.resource-comment-list .u-comment .imgs .img img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; }

.resource-comment-footer { border-top: 1px solid #eee; }

.resource-comment-footer .more-btn { cursor: pointer; height: 77px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 15px; color: #7985a0; }

.resource-comment-footer .more-btn i { font-size: 18px; }

.resource-comment-footer .more-btn:hover { color: #006bd3; }

@media (max-width: 900px) { .resource { max-width: 98%; }
  .resource-detail { padding: 20px; }
  .resource-detail .msg { margin-top: 20px; }
  .resource-share { position: static; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .resource-share .item { margin-top: 20px; margin-bottom: 0; }
  .resource-comment-hd { padding: 20px; }
  .resource-comment-publish .u-img { width: 80px; height: 80px; }
  .resource-comment-list .u-comment .imgs .img { width: 80px; height: 80px; } }

@media (max-width: 768px) { .resource { display: block; }
  .resource-side { width: 100%; margin-left: 0; margin-top: 20px; }
  .resource-detail .carousel .flickity-page-dots { display: block; } }