@charset "utf-8"; /*! * 版本:MYUI Copyright © 2019 * 作者:QQ726662013版权所有 * 官网:https://www.mytheme.cn */ /* body */ body, html { width: 100%; } body { font-size: 14px; line-height: 140%; -webkit-overflow-scrolling: touch; -webkit-transition: .5s; -o-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; transition: .5s; } body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, tr { margin: 0; padding: 0; font-weight: normal } input, select { font-size: 12px; vertical-align: middle; border: none; } ul, li { list-style-type: none; } img { border: 0 none; } p { margin-bottom: 10px; } /* container */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .container { position: relative; margin-right: auto; margin-left: auto; } .row { position: relative; margin: 0; padding: 0; } .container:before, .container:after, .row:before, .row:after, .clearfix:before, .clearfix:after { display: table; content: " "; clear: both; } /* text */ h1 { font-size: 36px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-weight: 400; margin-bottom: 10px } a, button { text-decoration: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } button { border: 0; } button:hover, input.btn { cursor: pointer; } a:focus, a:hover, a:active { text-decoration: none; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-overflow { width: 100%; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .content { font-size: 16px; line-height: 30px; word-wrap: break-word; white-space: normal; word-break: break-all; } /* font */ .font-12 { font-size: 12px; } .font-13 { font-size: 13px; } .font-14 { font-size: 14px; } .font-15 { font-size: 15px; } .font-16 { font-size: 16px; } .font-18 { font-size: 18px; } .font-20 { font-size: 20px; } .font-22 { font-size: 22px; } .font-24 { font-size: 24px; } .font-25 { font-size: 24px; } .font-40 { font-size: 40px; } .font-bold { font-weight: 700; } /* img */ img { border: 0; vertical-align: middle } .img-circle { border-radius: 50%; } .img-rounded { border-radius: 5px; } .img-thumbnail { padding: 5px; border-radius: 5px; } .img-responsive { max-width: 100%; } .img-thumb { width: 220px; } .content img { display: block; max-width: 100%; } /* form */ select { cursor: pointer; border: none; outline: none; } input, textarea { outline: medium none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input.form-control, input.btn { outline: 0px; -webkit-appearance: none; } input[type="checkbox"] { vertical-align: -2px; } .form-control { display: block; width: 100%; height: 35px; padding: 0 10px; font-size: 12px; line-height: 20px; border-radius: 4px; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } textarea.form-control { height: auto; padding: 10px; } .form-control.verify { width: 90px; text-align: center; margin-right: 10px; display: inline-block; } /* padding */ .pb10 { padding-bottom: 10px; } .pt10 { padding-top: 10px; } .pb15 { padding-bottom: 15px; } .pt15 { padding-top: 15px; } .pb20 { padding-bottom: 20px; } .pt20 { padding-top: 20px; } .pb30 { padding-bottom: 30px; } .pt30 { padding-top: 30px; } /* padding */ .mb10 { margin-bottom: 10px; } .mt10 { margin-top: 10px; } .mb15 { margin-bottom: 15px; } .mt15 { margin-top: 15px; } .mb20 { margin-bottom: 20px; } .mt20 { margin-top: 20px; } .mb30 { margin-bottom: 30px; } .mt30 { margin-top: 30px; } /* line */ .spot { display: inline-block; margin-right: 5px; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; border: 2px solid; } .split-line { display: inline-block; margin-left: 12px; margin-right: 12px; width: 1px; height: 14px; vertical-align: -2px; } .top-line, .top-line-dot, .bottom-line, .bottom-line-dot { position: relative; } .top-line:before, .top-line-dot:before { content: " "; position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 1px; } .bottom-line:after, .bottom-line-dot:before { content: " "; position: absolute; left: 0; bottom: 0; right: 0; width: 100%; height: 1px; } .top-line:before { border-top: 1px solid; } .bottom-line:after { border-bottom: 1px solid; } .top-line-dot:before { border-top: 1px dotted; } .bottom-line-dot:before { border-bottom: 1px dotted; } /* border */ .border { border: 1px solid; } .border-2x { border: 2px solid; } .border-3x { border: 3px solid; } .border-4x { border: 4px solid; } .border-5x { border: 5px solid; } /* badge */ .badge { display: inline-block; margin-right: 10px; width: 18px; height: 18px; text-align: center; line-height: 18px; border-radius: 2px; font-size: 12px; } .badge-radius { border-radius: 50%; } /* btn */ .btn { display: inline-block; padding: 8px 30px; font-size: 12px; } .btn.btn-xs { padding: 4px 15px; } .btn.btn-sm { padding: 6px 20px; } .btn.btn-md { padding: 8px 25px; } .btn.btn-lg { padding: 12px 30px; } .btn.btn-block { display: block; width: 100%; padding-left: 5px; padding-right: 5px; text-align: center; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .btn.disabled { cursor: not-allowed; } /* nav */ .nav { position: relative; } .nav > li { float: left; } .nav-head > li, .nav-tabs > li { margin-top: 10px; margin-left: 30px; } .nav-head > li > a { padding-bottom: 8px; font-size: 16px; } .nav-tabs > li > a { padding-bottom: 10px; } .nav-tabs > li.active > a { border-bottom: 2px solid; } .nav-tabs > li .dropdown-box { margin-left: -50px; padding-top: 0; } .nav-tabs > li .dropdown-box .item { width: 100px; text-align: center; } .nav-tabs > li .dropdown-box .item li { padding: 5px; } .nav-tag > li { margin-left: 10px; } .nav-tag > li > a { display: inline-block; padding: 0 10px; height: 25px; line-height: 23px; font-size: 14px; border-radius: 20px; } .nav-text > li { line-height: 30px; } .nav-text > li.active > a { color: #f80; } .nav-page { margin-left: 10px; } .nav-page > li { margin-left: 5px; } .nav-page > li > a { display: inline-block; font-size: 14px; padding: 0 6px; height: 25px; line-height: 23px; } .nav-page > li:first-child { margin-left: 0; } .nav-page > li:first-child > a { border-radius: 4px 0 0 4px; } .nav-page > li:last-child > a { border-radius: 0 4px 4px 0; } .nav-btn > li { margin-right: 15px; margin-bottom: 15px; } .nav-btn > li a { padding: 8px 12px; border-radius: 5px; } /* pic-tag */ .pic-tag { display: block; position: absolute; padding: 2px 0; width: 100%; z-index: 99; } .pic-tag-top { top: 5px; left: 5px; } .pic-tag-left { bottom: 5px; left: 5px; } .pic-tag-bottom { bottom: 5px; right: 5px; text-align: right; } .pic-tag-right { top: 5px; right: 5px; text-align: right; } .pic-tag-h { left: 0; top: 0; padding: 2px 8px; border-radius: 0 0 8px 0; } .pic-tag-lg { padding: 4px 10px; } .pic-tag .tag { display: inline-block; margin: 0 4px; padding: 0 5px; font-size: 12px; border-radius: 2px; } .pic-text { display: block; width: 100%; position: absolute; z-index: 98; bottom: 0; left: 0; padding: 5px 10px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .pic-text-silde { padding-bottom: 20px; font-size: 14px; } .pic-text-lg { padding: 8px 20px; font-size: 14px; } .pic-title-top { display: block; width: 100%; position: absolute; top: 0; left: 0; padding: 5px 10px 10px; font-size: 12px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pic-title-bottom { display: block; width: 100%; position: absolute; bottom: 0; left: 0; padding: 5px 10px; font-size: 12px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* qrcode */ .qrcode-box { display: inline-block; position: relative; margin-bottom: 10px; } .qrcode-box .icon { position: absolute; top: 50%; left: 50%; margin-top: -12.5px; margin-left: -12.5px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } /* dropdown */ .dropdown { position: relative; } .dropdown-box { display: none; position: absolute; z-index: 99; } .dropdown-box.top { bottom: 100%; padding-bottom: 10px; left: 50%; margin-left: -80px; } .dropdown-box.bottom { top: 100%; padding-top: 10px; left: 50%; margin-left: -80px; } .dropdown-box.left { left: 100%; padding-left: 10px; bottom: 0; } .dropdown-box.right { right: 100%; padding-right: 10px; bottom: 0; } .dropdown-box .item { padding: 10px; width: 160px; border-radius: 2px; } .dropdown-hover { position: relative; } .dropdown-hover:hover .dropdown-box { display: block; } .open > .dropdown-box { display: block; } /* layout */ .myui-layout { position: relative; } /* panel */ .myui-panel { position: relative; } .myui-panel-box.active { padding: 0; } /* panel-head */ .myui-panel__head { position: relative; height: 30px; } .myui-panel__head .title { float: left; display: inline-block; margin: 0; padding-right: 10px; line-height: 30px; } .myui-panel__head .title img { display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: -5px; } .myui-panel__head .title, .myui-panel__head .title a { font-size: 24px; } .myui-panel__head .more { line-height: 30px; } .myui-panel__head .operate { position: relative; padding-bottom: 5px; } .myui-panel__head .operate.open .dropdown-menu { display: block; } .myui-panel__head.active { height: 42px; } /* vod-list */ .myui-vodlist__thumb { display: block; position: relative; background-position: 50% 50% !important; background-size: cover !important; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .myui-vodlist__thumb.picture { background: none; overflow: hidden; } .myui-vodlist__thumb.picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .myui-vodlist__thumb .play { opacity: 0; position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2) url(../cover/play.png) center no-repeat; background-color: rgba(0, 0, 0, .2); -webkit-transition: all ease-out .35s; transition: all ease-out .35s; } .myui-vodlist__thumb .play-v { opacity: 0; position: absolute; top: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); -webkit-transition: all ease-out .35s; transition: all ease-out .35s; } .myui-vodlist__thumb .play.active { opacity: 1; } .myui-vodlist__thumb:hover .play, .myui-vodlist__thumb:hover .play-v { opacity: 1; } .myui-vodlist__detail.active { padding: 0 10px 10px; } .myui-vodlist__detail .title { margin: 10px 0 0; font-size: 14px; } .myui-vodlist__detail .title.active { font-size: 16px; margin-bottom: 10px; } .myui-vodlist__detail .text { min-height: 19px; font-size: 12px; margin-bottom: 0; margin-top: 5px; } .myui-vodlist__detail .text-title { font-size: 14px; line-height: 18px; margin: 11px 0 0; height: 36px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* text-list */ .myui-vodlist__text li a { display: block; } .myui-vodlist__text.active li a { padding: 0 0 15px; } .myui-vodlist__text.active li:first-child a { padding-top: 0; } .myui-vodlist__text.striped li { padding: 10px 0 10px; } .myui-vodlist__text.striped li a { display: inline-block; padding: 0; } .myui-vodlist__text.striped .striped-head { padding: 10px; border-radius: 5px; } .myui-vodlist__text .striped-head { font-weight: 700; } .myui-vodlist__text.to-color li { padding: 10px; border-radius: 5px; } .myui-vodlist__text.to-color li a { padding: 0; } .myui-vodlist__text.downlist { padding-top: 0; } .myui-vodlist__text.downlist li { padding: 10px 0; } .myui-vodlist__text.downlist li .text { line-height: 30px; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .myui-vodlist__text.downlist li a { display: inline-block; padding: 0; } .myui-vodlist__text.downlist li a.btn { padding: 4px 12px; margin-left: 10px; } /* media-list */ .myui-vodlist__media li:first-child { padding-top: 0; } .myui-vodlist__media li:last-child { padding-bottom: 0; } .myui-vodlist__media .thumb, .myui-vodlist__media .detail { display: table-cell; vertical-align: top; } .myui-vodlist__media .detail { width: 100%; padding: 0 0 0 20px; } .myui-vodlist__media .detail .desc { height: 40px; } .myui-vodlist__media .detail-side { padding: 0 10px 0; } .myui-vodlist__media .detail-left { padding: 0 20px 0 0; } .myui-vodlist__media .detail h4.title { margin: 10px 0 10px; font-size: 18px; line-height: 25px; } .myui-vodlist__media .detail h5.title { font-size: 15px; height: 38px; line-height: 20px; } /* screen-list */ .myui-vodlist__screen { padding: 10px 0 5px; } .myui-vodlist__screen:first-child { padding-top: 0; } .myui-vodlist__screen:last-child { padding-bottom: 0; } .myui-vodlist__screen li { float: left; width: 25%; margin-bottom: 5px; } /* rank-list */ .myui-vodlist__rank li { margin-bottom: 10px; } .myui-vodlist__rank li:last-child { margin-bottom: 0; } /* link-list */ .myui-link__text li { float: left; margin-right: 15px; margin-bottom: 10px; } /* play-list */ .myui-content__list { position: relative; } .myui-content__list li { float: left; padding: 10px; } .myui-content__list li a { display: block; padding: 8px; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } .myui-play__list li { float: left; } .myui-play__list li a { display: block; padding: 8px 0; text-align: center; } /* down-list */ .myui-down__list li { padding: 10px; } .myui-down__list li:first-child { margin-top: -20px; } .myui-down__list li .text { line-height: 30px; } .myui-down__list li .operate { float: right; } .myui-down__list li .operate .btn { display: inline-block; margin-left: 5px; padding: 5px 10px; } .myui-down__list li .operate .btn:hover { opacity: 0.8; } .myui-down__list li .operate .btn img { vertical-align: -1px; } .myui-down__list li .operate .thunder { background-color: #11a5e8; border-color: #11a5e8; color: #fff; } .myui-down__list li .operate .bendi { background-color: #009966; border-color: #009966; color: #fff; } .myui-down__list li .operate .copy { background-color: #ff9900; border-color: #ff9900; color: #fff; } .myui-down__list li .operate .xiaomi { background-color: #FF5722; border-color: #FF5722; color: #fff; } .myui-down__list li .operate .thunderkk { background-color: #009688; border-color: #009688; color: #fff; } /* article */ .myui-article__title { margin: 0 0 10px; font-size: 24px; line-height: 30px; font-weight: 700; } .myui-article__sub { margin-bottom: 10px; padding-bottom: 10px; } .myui-article__content { line-height: 30px; font-size: 16px; } .myui-article__content img { display: block; max-width: 100%; } /* screen */ .myui-screen__list { position: relative; } .myui-screen__list li { float: left; } .myui-screen__list li a.btn { padding: 5px 12px; font-size: 14px; } /* table */ .myui-table { position: relative; width: 100%; max-width: 100%; border-spacing: 0; border-collapse: collapse; } .myui-table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid; } .myui-table > tbody > tr > td, .myui-table > tbody > tr > th, .myui-table > tfoot > tr > td, .myui-table > tfoot > tr > th, .myui-table > thead > tr > td, .myui-table > thead > tr > th { padding: 8px; line-height: 25px; vertical-align: top; border-bottom: 1px solid; } /* message */ .styu-message__list { position: relative; padding: 20px 0; } .styu-message__list .avatar { float: left; width: 60px; } .styu-message__list .data { margin-left: 60px; } .styu-message__list .data .name { margin: 0; font-size: 16px; } .styu-message__list .data .content { padding: 5px 0; line-height: 20px; word-wrap: break-word; white-space: normal; } .styu-message__list .data .admin, .styu-message__list .data .content { margin: 0; font-size: 14px; } .styu-message__list.child { margin-top: 20px; padding-bottom: 0; } /* msg */ .myui-msg__form { max-width: 320px; margin: 0 auto; padding: 50px; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); } .myui-msg__head { margin-bottom: 20px; } .myui-msg__head .fa { margin-bottom: 20px; font-size: 80px; color: red; } /* page */ .myui-page { margin-bottom: 30px } .myui-page li { display: inline-block; margin-left: 10px } .myui-page li .num, .myui-page li a { padding: 5px 15px; } /* extra */ .myui-extra { position: fixed; z-index: 999; right: 50px; bottom: 50px } .myui-extra li { position: relative; padding: 15px 10px 0 } .myui-extra li a { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 4px; font-size: 18px; cursor: pointer; } /* flickity */ .flickity { position: relative; white-space: nowrap; overflow: hidden; } .flickity [class^="col-"] { float: none !important; display: inline-block !important; } .flickity.dots { padding-bottom: 20px; } .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: 0 } .flickity-viewport { position: relative; overflow: hidden; height: 100% } .flickity-slider { position: absolute; width: 100%; height: 100% } /*.flickity-viewport.is-pointer-down {*/ /* cursor: -webkit-grabbing;*/ /* cursor: grabbing*/ /*}*/ .flickity-prev-next-button { opacity: 0; position: absolute; top: 50%; width: 25px; height: 50px; border: none; background-color: rgba(0, 0, 0, .6); cursor: pointer; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all ease-out .35s; transition: all ease-out .35s; } .flickity-prev-next-button.previous { left: 0; border-radius: 0 6px 6px 0 } .flickity-prev-next-button.next { right: 0; border-radius: 6px 0 0 6px } .flickity-prev-next-button:disabled { opacity: 0; cursor: auto } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #fff } .flickity-prev-next-button.no-svg { color: #fff; font-size: 18px } .flickity-page-dots { position: relative; text-align: center; } .flickity-page-dots .dot { display: inline-block; width: 15px; height: 3px; margin: 0 5px; opacity: .25; cursor: pointer } .flickity-page-dots .dot.is-selected { opacity: 1 } .flickity:hover .flickity-prev-next-button { opacity: 1; } .flickity.active .flickity-prev-next-button { margin-top: -25px; } .flickity.center .flickity-prev-next-button.previous { left: 0; } .flickity.center .flickity-prev-next-button.next { right: 0; } /* slide */ .carousel { position: relative; } .carousel-control { position: absolute; z-index: 99; top: 0; bottom: 0; display: block; width: 50px; height: 100%; } .carousel-control.left { left: 30px; } .carousel-control.right { right: 30px; } .carousel-control .fa { position: absolute; top: 50%; margin-top: -25px; display: block; width: 50px; height: 50px; text-align: center; font-size: 30px; line-height: 50px; background-color: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 50%; opacity: 0.5; } .carousel-control:hover .fa { opacity: 1; } .carousel-indicators { position: absolute; z-index: 101; } .carousel-indicators-dots { width: 100%; bottom: 20px; left: 0; text-align: center; } .carousel-indicators-dots li { display: inline-block; margin: 0 5px; width: 15px; height: 3px; opacity: .25; cursor: pointer } .carousel-indicators-dots li.active { opacity: 1; } .carousel-indicators-text { z-index: 2; top: 0; bottom: 0; right: 150px; width: 260px; padding: 50px 20px; background-color: rgba(32, 32, 32, .6); } .carousel-indicators-text li { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; } .carousel-indicators-text li:last-child { border-bottom: 0; } .carousel-indicators-text li .title { margin: 0; color: #ccc; } .carousel-indicators-text li .text { margin: 0; font-size: 12px; color: #999; } .carousel-indicators-thumb { bottom: 20px; left: 0; width: 100%; text-align: center; } .carousel-indicators-thumb li { display: inline-block; margin: 0 2px; border: 3px solid rgba(255, 255, 255, .6); box-shadow: 0 2px 5px rgba(0, 0, 0, .1); border-radius: 2px; overflow: hidden; } /* popup */ .popup { position: fixed; z-index: 1001; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: .5s; -o-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; transition: .5s; } .popup.left { left: -100%; top: 0; } .popup.right { right: -100%; top: 0; } .popup.top { top: -100%; left: 0; } .popup.bottom { bottom: -100%; right: 0; } .popup-visible.left { left: 0; } .popup-visible.right { right: 0; } .popup-visible.top { top: 0; } .popup-visible.bottom { bottom: 0; } .popup-head { position: relative; padding: 10px 20px; } .popup-body { position: relative; padding: 10px; } /* embed */ .embed-responsive { position: relative; display: block; overflow: hidden; padding: 0; height: 0 } .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0 } .embed-responsive-16by9 { padding-bottom: 56.25% } .embed-responsive-4by3 { padding-bottom: 75% } /* bootstrap*/ .fade { opacity: 0; -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .fade.in { opacity: 1; } .collapse { display: none; } .collapse.in { display: block; } .tab-content > .tab-pane, .carousel-inner > .item { display: none; } .tab-content > .tab-pane.active, .carousel-inner > .item.active { display: block; } /* modal */ .modal-open { overflow: hidden; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.fade.in { opacity: .5; } /* autocomplete */ .autocomplete-suggestions { position: absolute; top: 100%; width: 100%; z-index: 9999; padding: 10px; margin-top: 5px; border-radius: 4px; } .autocomplete-suggestion, .autocomplete-suggestions li { padding: 5px 0; cursor: pointer; } .autocomplete-suggestion:first-child { border-top: 0 } /* mobile-share */ .mobile-share { position: fixed; z-index: 999; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; animation: fade-in; animation-duration: .5s; -webkit-animation: fade-in .5s; } /*.share-weixin {*/ /* background: url(../img/share_weixin.png) rgba(0, 0, 0, .8) no-repeat;*/ /* background-position: right top 10px;*/ /* background-size: 80%;*/ /*}*/ /*.share-other {*/ /* background: url(../img/share_other.png) rgba(0, 0, 0, .8) no-repeat;*/ /* background-position: center bottom 10px;*/ /* background-size: 80%;*/ /*}*/ /* taddar */ .myui-nav__tabbar { display: none; } /* more */ .hidden { overflow: hidden !important; } .relative { position: relative; } .fixed { position: fixed; } .block { display: block !important; } .inline-block { display: inline-block !important; } .top-fixed-up { margin-top: 0 !important; } .top-fixed { -webkit-transition: .5s; -o-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; transition: .5s; } .pull-left { float: left !important; } .pull-right { float: right !important; } .margin-0 { margin: 0 !important; } .padding-0 { padding: 0 !important; } .margin-t0 { margin: 0 !important; } .padding-t0 { padding-top: 0 !important; } .margin-b0 { margin-bottom: 0 !important; } .padding-b0 { padding-top: 0 !important; } .radius-0 { border-radius: 0 !important; } .hide, .visible-lg, .visible-md, .visible-sm, .visible-xs, .visible-mi, .visible-inline-lg, .visible-inline-md, .visible-inline-sm, .visible-inline-xs, .visible-inline-mi { display: none !important; } .mask { position: fixed; top: 0; left: 0; bottom: 0; z-index: 999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); animation: fade-in; animation-duration: .5s; -webkit-animation: fade-in .5s; } .fadeInDown { -webkit-animation: fadeInDown .5s .2s ease both; -moz-animation: fadeInDown .5s .2s ease both; } .scrollbar::-webkit-scrollbar { width: 4px; background-color: #f5f5f5; } .scrollbar::-webkit-scrollbar-thumb { background-color: #ccc; } @keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-10px); } 100% { opacity: 1; -moz-transform: translateY(0); } } /* media */ .col-pd, .col-lg-1, .col-lg-10, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px } .col-xs-1, .col-xs-10, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-wide-1, .col-xs-wide-10, .col-xs-wide-15, .col-xs-wide-2, .col-xs-wide-25, .col-xs-wide-3, .col-xs-wide-35, .col-xs-wide-4, .col-xs-wide-45, .col-xs-wide-5, .col-xs-wide-55, .col-xs-wide-6, .col-xs-wide-65, .col-xs-wide-7, .col-xs-wide-75, .col-xs-wide-8, .col-xs-wide-85, .col-xs-wide-9, .col-xs-wide-95 { float: left } .col-xs-10 { width: 10% } .col-xs-9 { width: 11.1111111% } .col-xs-8 { width: 12.5% } .col-xs-7 { width: 14.2857143% } .col-xs-6 { width: 16.6666667% } .col-xs-5 { width: 20% } .col-xs-4 { width: 25% } .col-xs-3 { width: 33.3333333% } .col-xs-2 { width: 50% } .col-xs-1 { width: 100% } .col-xs-wide-10 { width: 10% } .col-xs-wide-9 { width: 90% } .col-xs-wide-8 { width: 80% } .col-xs-wide-7 { width: 70% } .col-xs-wide-6 { width: 60% } .col-xs-wide-5 { width: 50% } .col-xs-wide-4 { width: 40% } .col-xs-wide-3 { width: 30% } .col-xs-wide-2 { width: 20% } .col-xs-wide-15 { width: 15% } .col-xs-wide-95 { width: 95% } .col-xs-wide-85 { width: 85% } .col-xs-wide-75 { width: 75% } .col-xs-wide-65 { width: 65% } .col-xs-wide-55 { width: 55% } .col-xs-wide-45 { width: 45% } .col-xs-wide-35 { width: 35% } .col-xs-wide-25 { width: 25% } .img-xs-300 { width: 300px; } .img-xs-220 { width: 220px; } .img-xs-190 { width: 190px; } .img-xs-160 { width: 160px; } .img-xs-150 { width: 150px; } .img-xs-140 { width: 140px; } .img-xs-130 { width: 130px; } .img-xs-120 { width: 120px; } .img-xs-110 { width: 110px; } .img-xs-100 { width: 100px; } .img-xs-90 { width: 90px; } .img-xs-80 { width: 80px; } .img-xs-70 { width: 70px; } @media (min-width: 768px) { .col-sm-1, .col-sm-10, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-wide-1, .col-sm-wide-10, .col-sm-wide-15, .col-sm-wide-2, .col-sm-wide-25, .col-sm-wide-3, .col-sm-wide-35, .col-sm-wide-4, .col-sm-wide-45, .col-sm-wide-5, .col-sm-wide-55, .col-sm-wide-6, .col-sm-wide-65, .col-sm-wide-7, .col-sm-wide-75, .col-sm-wide-8, .col-sm-wide-85, .col-sm-wide-9, .col-sm-wide-95 { float: left } .col-sm-10 { width: 10% } .col-sm-9 { width: 11.1111111% } .col-sm-8 { width: 12.5% } .col-sm-7 { width: 14.2857143% } .col-sm-6 { width: 16.6666667% } .col-sm-5 { width: 20% } .col-sm-4 { width: 25% } .col-sm-3 { width: 33.3333333% } .col-sm-2 { width: 50% } .col-sm-1 { width: 100% } .col-sm-wide-10 { width: 10% } .col-sm-wide-9 { width: 90% } .col-sm-wide-8 { width: 80% } .col-sm-wide-7 { width: 70% } .col-sm-wide-6 { width: 60% } .col-sm-wide-5 { width: 50% } .col-sm-wide-4 { width: 40% } .col-sm-wide-3 { width: 30% } .col-sm-wide-2 { width: 20% } .col-sm-wide-15 { width: 15% } .col-sm-wide-95 { width: 95% } .col-sm-wide-85 { width: 85% } .col-sm-wide-75 { width: 75% } .col-sm-wide-65 { width: 65% } .col-sm-wide-55 { width: 55% } .col-sm-wide-45 { width: 45% } .col-sm-wide-35 { width: 35% } .col-sm-wide-25 { width: 25% } .img-sm-300 { width: 300px; } .img-sm-220 { width: 220px; } .img-sm-190 { width: 190px; } .img-sm-160 { width: 160px; } .img-sm-150 { width: 150px; } .img-sm-140 { width: 140px; } .img-sm-130 { width: 130px; } .img-sm-120 { width: 120px; } .img-sm-110 { width: 110px; } .img-sm-100 { width: 100px; } .img-sm-90 { width: 90px; } .img-sm-80 { width: 80px; } .img-sm-70 { width: 70px; } } @media (min-width: 1024px) { .col-md-1, .col-md-10, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-wide-1, .col-md-wide-10, .col-md-wide-15, .col-md-wide-2, .col-md-wide-25, .col-md-wide-3, .col-md-wide-35, .col-md-wide-4, .col-md-wide-45, .col-md-wide-5, .col-md-wide-55, .col-md-wide-6, .col-md-wide-65, .col-md-wide-7, .col-md-wide-75, .col-md-wide-8, .col-md-wide-85, .col-md-wide-9, .col-md-wide-95 { float: left } .col-md-10 { width: 10% } .col-md-9 { width: 11.1111111% } .col-md-8 { width: 12.5% } .col-md-7 { width: 14.2857143% } .col-md-6 { width: 20% } .col-md-5 { width: 20% } .col-md-4 { width: 25% } .col-md-3 { width: 33.3333333% } .col-md-2 { width: 50% } .col-md-1 { width: 100% } .col-md-wide-10 { width: 10% } .col-md-wide-9 { width: 90% } .col-md-wide-8 { width: 80% } .col-md-wide-7 { width: 70% } .col-md-wide-6 { width: 60% } .col-md-wide-5 { width: 50% } .col-md-wide-4 { width: 40% } .col-md-wide-3 { width: 30% } .col-md-wide-2 { width: 20% } .col-md-wide-15 { width: 15% } .col-md-wide-95 { width: 95% } .col-md-wide-85 { width: 85% } .col-md-wide-75 { width: 75% } .col-md-wide-65 { width: 65% } .col-md-wide-55 { width: 55% } .col-md-wide-45 { width: 45% } .col-md-wide-35 { width: 35% } .col-md-wide-25 { width: 25% } .img-md-300 { width: 300px; } .img-md-220 { width: 220px; } .img-md-190 { width: 190px; } .img-md-160 { width: 160px; } .img-md-150 { width: 150px; } .img-md-140 { width: 140px; } .img-md-130 { width: 130px; } .img-md-120 { width: 120px; } .img-md-110 { width: 110px; } .img-md-100 { width: 100px; } .img-md-90 { width: 90px; } .img-md-80 { width: 80px; } .img-md-70 { width: 70px; } } @media (min-width: 1440px) { .col-lg-1, .col-lg-10, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-wide-1, .col-lg-wide-10, .col-lg-wide-15, .col-lg-wide-2, .col-lg-wide-25, .col-lg-wide-3, .col-lg-wide-35, .col-lg-wide-4, .col-lg-wide-45, .col-lg-wide-5, .col-lg-wide-55, .col-lg-wide-6, .col-lg-wide-65, .col-lg-wide-7, .col-lg-wide-75, .col-lg-wide-8, .col-lg-wide-85, .col-lg-wide-9, .col-lg-wide-95 { float: left } .col-lg-10 { width: 10% } .col-lg-9 { width: 11.1111111% } .col-lg-8 { width: 20% } .col-lg-7 { width: 14.2857143% } .col-lg-6 { width: 16.6666667% } .col-lg-5 { width: 20% } .col-lg-4 { width: 25% } .col-lg-3 { width: 33.3333333% } .col-lg-2 { width: 50% } .col-lg-1 { width: 100% } .col-lg-wide-10 { width: 10% } .col-lg-wide-9 { width: 90% } .col-lg-wide-8 { width: 80% } .col-lg-wide-7 { width: 70% } .col-lg-wide-6 { width: 60% } .col-lg-wide-5 { width: 50% } .col-lg-wide-4 { width: 40% } .col-lg-wide-3 { width: 30% } .col-lg-wide-2 { width: 20% } .col-lg-wide-15 { width: 15% } .col-lg-wide-95 { width: 95% } .col-lg-wide-85 { width: 85% } .col-lg-wide-75 { width: 75% } .col-lg-wide-65 { width: 65% } .col-lg-wide-55 { width: 55% } .col-lg-wide-45 { width: 45% } .col-lg-wide-35 { width: 35% } .col-lg-wide-25 { width: 25% } .img-lg-300 { width: 300px; } .img-lg-220 { width: 220px; } .img-lg-190 { width: 190px; } .img-lg-160 { width: 160px; } .img-lg-150 { width: 150px; } .img-lg-140 { width: 140px; } .img-lg-130 { width: 130px; } .img-lg-120 { width: 120px; } .img-lg-110 { width: 110px; } .img-lg-100 { width: 100px; } .img-lg-90 { width: 90px; } .img-lg-80 { width: 80px; } .img-lg-70 { width: 70px; } } @media (min-width: 1600px) { .visible-lg { display: block !important; } .hidden-lg { display: none !important; } .visible-inline-lg { display: inline-block !important; } .visible-text-lg { visibility: visible !important; } .hidden-text-lg { visibility: hidden !important; } } @media (max-width: 1199px) and (min-width: 1023px) { .visible-md { display: block !important; } .hidden-md { display: none !important; } .visible-inline-md { display: inline-block !important; } .visible-text-md { visibility: visible !important; } .hidden-text-md { visibility: hidden !important; } } @media (max-width: 1023px) and (min-width: 767px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } .visible-inline-sm { display: inline-block !important; } .visible-text-sm { visibility: visible !important; } .hidden-text-sm { visibility: hidden !important; } } @media (max-width: 1023px) { .dropdown-hover:hover .dropdown-box { display: none; } /* panel-head */ .myui-panel__head .more { line-height: 35px; } .myui-panel__head.active { height: 35px; } /* nav */ .nav-head > li, .nav-tabs > li { margin-top: 8px; margin-left: 15px; } .nav-tabs.active { height: 35px; white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch } .nav-tabs.active li { float: none; display: inline-block; } .nav-tabs > li .dropdown-box { margin-left: -80px; } /* screen */ .myui-screen__list { white-space: nowrap; overflow-y: hidden; } .myui-screen__list li { float: none; display: inline-block; margin-bottom: 0; } .myui-screen__list li a.btn { font-size: 12px; white-space: nowrap } /* vod-list */ .myui-vodlist__detail .title.active { font-size: 14px; margin-bottom: 0; } /* play-list */ .myui-content__playlist { -webkit-overflow-scrolling: touch; } /* modal */ .myui-modal__dialog { width: 320px; margin: 50px auto; } @media (max-width: 767px) { .visible-xs { display: block !important; } .hidden-xs { display: none !important; } .visible-inline-xs { display: inline-block !important; } .visible-text-xs { visibility: visible !important; } .hidden-text-xs { visibility: hidden !important; } /* all */ body { font-size: 12px; line-height: 20px; } /* text */ h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 12px; } /* tabbar */ .myui-nav__tabbar { position: fixed; bottom: 0; width: 100%; padding: 5px 0 0; z-index: 999; display: -webkit-box; display: -webkit-flex; display: flex; border-top: 1px solid; } .myui-nav__tabbar .item { display: block; text-align: center; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .myui-nav__tabbar .item .icon { display: block; text-align: center; font-size: 20px; line-height: 20px; } .myui-nav__tabbar .item .icon-img { display: inline-block; margin-top: 5px; width: 24px; height: 24px; } .myui-nav__tabbar .item .title { margin: 5px 0; font-size: 12px; } /* line */ .split-line { height: 12px; margin-left: 5px; margin-right: 5px; } .top-line:before, .top-line-dot:before { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .bottom-line:after, .bottom-line-dot:before { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } /* panel-head */ .myui-panel__head .title, .myui-panel__head .title a { font-size: 18px; } /* vod-list */ .myui-vodlist__thumb .tag { padding: 0 5px; } .myui-vodlist__thumb .silde-title { font-size: 12px; } .myui-vodlist__detail .title, .myui-vodlist__detail .title.active { margin-bottom: 0; font-size: 12px; } /* media-list */ .myui-vodlist__media li .detail.active { padding-left: 0; padding-right: 10px; } /* text-list */ .myui-vodlist__text li a { padding: 10px 0; } .myui-vodlist__text.downlist li { padding: 5px 0 0; } /* down-list */ .myui-down__list li { padding: 5px 0 10px; } .myui-down__list li .operate { float: none; display: block; } /* article */ .myui-article__title { font-size: 18px; } /* page */ .myui-page li { float: left; width: 20%; margin: 0; padding: 0 5px 0 5px } .myui-page li a { display: block; padding: 5px 0; text-align: center } /* extra */ .myui-extra li { padding: 8px 0 0 } .myui-extra li a { width: 35px; height: 35px; line-height: 35px; font-size: 16px } /* flickity */ .flickity-prev-next-button { width: 20px; height: 40px; } .flickity-prev-next-button.previous { border-radius: 0 5px 5px 0 } .flickity-prev-next-button.next { border-radius: 5px 0 0 5px } /* slide */ .carousel-control { width: 30px; height: 100%; } .carousel-control .fa { margin-top: -15px; display: block; width: 30px; height: 30px; font-size: 20px; line-height: 30px; } .carousel-control.left { left: 10px; } .carousel-control.right { right: 10px; } /* more */ .m-margin-0 { margin: 0 !important; } .m-padding-0 { padding: 0 !important; } } }