@charset "utf-8";
/****************************************************
*  project: filmora effects store 2.0               *
*  description: css document                        *
*  author: mazq@wondershare.cn                      *
*  update: 171212                                   *
****************************************************/

/********** common **********/
main { min-height: 960px; min-height: calc(100vh - 55px); position: relative; }
main:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4); }
main:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; background-color: #fff; opacity: 0; z-index: 99; }
main.unload { opacity: 1; }
main.unload:after { opacity: 1; }
main.loaded:after { z-index: -1; }
.button:not(.button-justify):not(.button-compact) { width: 180px; }
.section-common { padding: 40px 0 0; }
.section-bottom { padding: 40px 0; }
.section-common h2.heading { font-size: 30px; line-height: 40px; margin: 0; }
.section-common h5.desc { font-size: 16px; line-height: 20px; font-weight: normal; margin: 20px 0 0; }
.bg-16x9 { position: relative; height: 0; }
.bg-3x1 { position: relative; height: 0; }
.with-upper { text-transform: uppercase; }
.card { background-color: #fff; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.07); }
.deleted { text-decoration: line-through; }
.bottom-seasonal ~ #footer .goto-top { bottom: 148px; }
@media(min-width: 956px) and (max-width: 1215px){
.container-store { width: 956px; }
}
@media(max-width: 1015px){
main { min-height: 600px; min-height: calc(100vh - 45px); }
.section-common { padding: 30px 0 0; }
.section-bottom { padding: 30px 0; }
.section-common h2.heading { font-size: 24px; line-height: 30px; }
.section-common .see-more { margin: 0; }
}

/** animation **/
/* https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
@-webkit-keyframes shake {
  40%, 60% { -webkit-transform: translate3d(-0.5px, 0, 0); } 42.5%, 57.5% { -webkit-transform: translate3d(0.8px, 0, 0); } 45%, 50%, 55% { -webkit-transform: translate3d(-1.5px, 0, 0); } 47.5%, 52.5% { -webkit-transform: translate3d(1.5px, 0, 0); }
}
@-moz-keyframes shake {
  40%, 60% { -moz-transform: translate3d(-0.5px, 0, 0); } 42.5%, 57.5% { -moz-transform: translate3d(0.8px, 0, 0); } 45%, 50%, 55% { -moz-transform: translate3d(-1.5px, 0, 0); } 47.5%, 52.5% { -moz-transform: translate3d(1.5px, 0, 0); }
}
@-o-keyframes shake {
  40%, 60% { -o-transform: translate3d(-0.5px, 0, 0); } 42.5%, 57.5% { -o-transform: translate3d(0.8px, 0, 0); } 45%, 50%, 55% { -o-transform: translate3d(-1.5px, 0, 0); } 47.5%, 52.5% { -o-transform: translate3d(1.5px, 0, 0); }
}
@keyframes shake {
  40%, 60% { transform: translate3d(-0.5px, 0, 0); } 42.5%, 57.5% { transform: translate3d(0.8px, 0, 0); } 45%, 50%, 55% { transform: translate3d(-1.5px, 0, 0); } 47.5%, 52.5% { transform: translate3d(1.5px, 0, 0); }
}

/********** shared **********/
/** recommend banner **/
.top-banner-rec .swiper-container { padding: 0; }
.top-banner-rec .swiper-slide { padding: 20px 0; padding: 2vh 0; height: 450px; height: 45vh; background-color: #fff; }
.top-banner-rec .video i { font-size: 120px; font-size: 12vh; line-height: 1; margin: 150px 130px 60px; margin: 15vh 13vh 6vh; }
.top-banner-rec .video i:first-of-type { margin-left: 0; }
.top-banner-rec .video i:last-of-type { margin-right: 0; }
.top-banner-rec .video .ph { height: 120px; height: 12vh; margin: 150px 130px 60px; margin: 15vh 13vh 6vh; }
.top-banner-rec .text { height: 75px; }
.top-banner-rec .box { height: 100%; }
.top-banner-rec .box .half { width: 50%; height: 100%; float: left; }

/** state **/
.state-icon { margin-bottom: 15px; text-align: center; }
.state-icon .icon-bg { display: inline-block; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 4px 0 #bebebe; }
.state-icon i { font-size: 50px; line-height: 1; margin: 15px; }

/** set list **/
.set-list { margin: 30px 0 0; }
.set-list .set-item { padding: 30px; }
.set-list .set-title { font-size: 24px; font-weight: bold; height: 50px; overflow: hidden; }
.set-list .set-desc { font-size: 18px; line-height: 20px; height: 80px; margin: 5px 0 10px; overflow: hidden; }
.set-list .set-action { margin-left: 10px; }
.set-list .set-price { margin: 20px 0 20px 10px; }
.set-list .set-price-full { font-size: 12px; line-height: 15px; text-decoration: line-through; }
.set-list .set-price-real { font-size: 18px; line-height: 20px; }
.set-list .set-cover { position: relative; float: right; width: 140px; height: 220px; padding-top: 10px; }
.set-list .set-cover img { position: absolute; width: 100%; max-width: 140px; height: auto; }
@media(max-width: 1015px){
.set-list .set-item { padding: 15px; margin: 0 0 15px; }
.set-list .set-title { font-size: 20px; font-weight: bold; height: auto; overflow: auto; }
.set-list .set-desc { height: auto; font-size: 14px; line-height: 15px; overflow: auto; }
.set-list .set-action { margin-left: 0; position: relative; }
.set-list .set-price { position: absolute; left: 200px; top: 0; width: 200px; }
.set-list .set-cover { width: 100%; }
}

/** pack list **/
.pack-list { margin: 30px 0 0; line-height: 20px; }
.pack-list .pack-item { margin-bottom: 20px; padding: 15px; position: relative; }
.pack-list .pack-cover { margin-bottom: 5px; }
.pack-list .pack-title { font-size: 24px; line-height: 30px; height: 30px; overflow: hidden; }
.pack-list .pack-desc { font-size: 14px; }
.pack-list .pack-action { font-size: 22px; line-height: 20px; margin: 15px 0 0; }
.pack-list .pack-action a { width: 25px; }
.pack-list .pack-action span { width: 25px; cursor: pointer; text-align: center; }
.pack-list .pack-price { font-size: 20px; line-height: 35px; }
.pack-list .pack-price-full { text-decoration: line-through; line-height: 20px; margin: 15px 5px 0 0; }
.pack-list .pack-price-real { font-size: 32px; font-weight: bold; }
.pack-list .swiper-container { padding: 0; }
.pack-tag { position: absolute; font-size: 12px; font-weight: bold; width: 50px; height: 25px !important; line-height: 25px; text-align: center; top: -8px; right: 16px; text-transform: uppercase; }
.pack-tag:after { content: ""; position: absolute; border-bottom: 8px solid #2da78b; border-right: 8px solid transparent; top: 0; right: -8px; }
.pack-tag-free { background-color: #61ded0; color: #313c48; }
@media(max-width: 1015px){
.pack-list .pack-title { height: auto; overflow: auto; font-size: 20px; line-height: 25px; }
.pack-list .pack-action { font-size: 18px; line-height: 20px; margin: 10px 0 0; }
.pack-list .pack-price { line-height: 30px; }
.pack-list .pack-price-full { display: none; }
.pack-list .pack-price-real { font-size: 26px; }
}
@media(min-width: 1016px){
.pack-list .col-md-3 .pack-item, .content-list .pack-list .col-md-4 .pack-item { padding: 7.5px; }
.pack-list .col-md-3 .pack-title, .content-list .pack-list .col-md-4 .pack-title { font-size: 14px; line-height: 20px; height: 20px; }
.pack-list .col-md-3 .pack-action, .content-list .pack-list .col-md-4 .pack-action { font-size: 16px; line-height: 15px; margin: 10px 0 0; }
.pack-list .col-md-3 .pack-action span, .content-list .pack-list .col-md-4 .pack-action span { width: 15px; }
.pack-list .col-md-3 .pack-price, .content-list .pack-list .col-md-4 .pack-price { font-size: 12px; line-height: 15px; }
.pack-list .col-md-3 .pack-price-full, .content-list .pack-list .col-md-4 .pack-price-full { margin: 10px 5px 0 0; line-height: 15px; }
.pack-list .col-md-3 .pack-price-real, .content-list .pack-list .col-md-4 .pack-price-real { font-size: 20px; line-height: 25px; }
.pack-list .col-md-4 .pack-item, .content-list .pack-list .col-md-6 .pack-item { padding: 12.5px; }
.pack-list .col-md-4 .pack-title, .content-list .pack-list .col-md-6 .pack-title { font-size: 20px; line-height: 25px; height: 25px; } 
.pack-list .col-md-4 .pack-action, .content-list .pack-list .col-md-6 .pack-action { font-size: 20px; margin: 10px 0 0; }
.pack-list .col-md-4 .pack-action span, .content-list .pack-list .col-md-6 .pack-action span { width: 20px; }
.pack-list .col-md-4 .pack-price, .content-list .pack-list .col-md-6 .pack-price { font-size: 16px; line-height: 20px; }
.pack-list .col-md-4 .pack-price-full, .content-list .pack-list .col-md-6 .pack-price-full { margin: 10px 5px 0 0; }
.pack-list .col-md-4 .pack-price-real, .content-list .pack-list .col-md-6 .pack-price-real { font-size: 26px; line-height: 30px; }
}

/** bundle list **/
.bundle-list { margin: 30px 0 0; }
.bundle-list .bundle-item { padding: 15px; margin: 0 0 20px; }
.bundle-list .bundle-title { font-size: 18px; font-weight: bold; margin: 0 0 5px; }
.bundle-list .bundle-desc { font-size: 14px; line-height: 20px; height: 60px; overflow: hidden; }
.bundle-list .bundle-cover { width: 75px; max-width: 140px; position: relative; height: 100px; }
.bundle-list .bundle-cover img { width: 100%; height: auto; }
.bundle-list .bundle-sign { width: 30px; height: 100px; line-height: 100px; font-size: 20px; text-align: center; font-weight: bold; }
.bundle-list .bundle-sub { line-height: 20px; font-size: 14px; }
.bundle-list .bundle-sub a { height: 20px; overflow: hidden; }
.bundle-list .bundle-action { margin: 10px 0 0; position: relative; }
.bundle-list .bundle-price { line-height: 75px; }
.bundle-list .bundle-price-full { font-size: 14px; margin: 0 10px; text-decoration: line-through; }
@media(min-width: 940px) and (max-width: 1215px){
.bundle-list .bundle-cover { width: 55px; }
.bundle-list .bundle-sign { width: 20px; }
}
@media(max-width: 1015px){
.bundle-list .bundle-cover { width: 40%; }
.bundle-list .bundle-sign { width: 15%; }
.bundle-list .bundle-price { position: absolute; left: 200px; top: 0; width: 200px; }
}

/** bundle recommend **/
.bundle-slide { margin: 30px 0 0; padding: 15px; position: relative; }
.bundle-tag { position: absolute; top: 28px; right: -14px; text-transform: uppercase; background-color: #61ded0; color: #313c48; font-size: 20px; font-weight: bold; width: 150px; line-height: 50px; text-align: center; z-index: 2; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.bundle-tag .tail { position: absolute; top: 0; border-top: 50px solid transparent; }
.bundle-tag .tail:before { content: ""; position: absolute; border-top: 12px solid #2da78b; border-left: 12px solid transparent; border-right: 12px solid transparent; }
.bundle-tag .tail-start { left: -49px; border-right: 50px solid #61ded0; }
.bundle-tag .tail-end { right: -49px; border-left: 50px solid #61ded0; }
.bundle-tag .tail-end:before { right: 0; }
.bundle-slides .bundle-tag { top: 58px; right: -22px; }
.bundle-slides .swiper-container { padding: 0 0 20px; }
.bundle-slides .swiper-pagination { bottom: 50px; }
.bundle-slides .swiper-pagination-bullet { width: 10px; height: 10px; border: 2px solid #313c48; background-color: transparent; opacity: 1; }
.bundle-slides .swiper-pagination-bullet-active { background-color: #313c48; }

@media(max-width: 1015px){
.bundle-item-rec { margin: 30px 0 15px; }
.bundle-tag { font-size: 12px; line-height: 30px; width: 80px; top: 6px; right: -11px; }
.bundle-tag .tail { position: absolute; top: 0; border-top: 30px solid transparent; }
.bundle-tag .tail-start { left: -29px; border-right: 30px solid #61ded0; }
.bundle-tag .tail-end { right: -29px; border-left: 30px solid #61ded0; }
.bundle-slides .bundle-tag { top: 36px; right: -19px; }
}

/********** top bar **********/
.top-bar { line-height: 34px; box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.13); background-color: #fff; z-index: 1; }
.top-bar .link-home { padding: 13px 0 13px 110px; font-size: 20px; width: 230px; height: 60px; }
.top-bar .link-home .logo, .top-bar .link-home i { width: 30px; text-align: center; }
.top-bar .link-home:hover { color: inherit; }
.top-bar .menu { cursor: pointer; }
.top-bar .panel { position: absolute; right: 8px; top: 50px; width: 100%; width: calc(100% - 16px); box-shadow: 0 2px 4px 0 #bebebe; z-index: 2; }
.top-bar .menu-list { float: right; line-height: 60px; width: 680px; width: calc(100% - 230px); padding: 0 0 0 30px; position: relative; }
.top-bar .menu-list:before, .top-bar .menu-list:after { content: ""; position: absolute; left: 0; border-right: 24px solid transparent; }
.top-bar .menu-list:before { top: 0; border-bottom: 30px solid #fff; }
.top-bar .menu-list:after { bottom: 0; border-top: 30px solid #fff; }
.top-bar .menu-list a:hover { color: #61ded0; }
.top-bar .menu-list li { display: inline-block; vertical-align: top; padding: 0 12px; font-size: 18px; font-weight: bold; }
.top-bar .menu-drop { position: relative; }
.top-bar .menu-drop-down li { line-height: 39px; border-bottom: 1px solid rgba(155, 155, 155, .3); font-size: 14px; display: block; font-weight: normal; }
.top-bar .menu-drop-down li:last-of-type { line-height: 40px; border-bottom: none; }
.top-bar .right { padding: 13px 0; }
.top-bar .right i { font-size: 22px; }
.top-bar .bar-item { display: inline-block; vertical-align: top; }
.top-bar .logo { width: 180px; height: 34px; background-size: auto 28px; }
.top-bar .panel-full { box-shadow: none; right: auto; top: auto; opacity: 1; max-height: 100px; overflow: visible; }
.top-bar .panel-follow { width: 120px; right: auto; left: 0; }
.top-bar .panel-right { width: auto; }
.top-bar .icon { width: 30px; text-align: center; }
.top-bar .menu-mobile { display: none; }
.top-bar .toggle { display: inline-block; vertical-align: top; padding-right: 25px; z-index: 2; position: relative; }
.top-bar .toggle + i { width: 20px; margin-left: -20px; text-align: center; }
.top-bar .search-bar { background-color: #fff; }
.top-bar .search-bar select { padding: 0 25px 0 10px; height: 34px; }
.top-bar .search-bar input { padding: 0 10px; width: 160px; height: 34px; }
.top-bar .divider { padding: 0 7px; }
.top-bar .panel-main .nav-tabs { line-height: 100px; width: 200px; text-align: center; border-right: 1px solid; font-weight: bold; }
.top-bar .panel-main .nav-tabs a { color: inherit; }
.top-bar .panel-main .nav-tabs .active a { background-color: #61ded0; color: inherit; }
.top-bar .featured-list { padding: 50px 100px; line-height: 50px; font-size: 14px; }
.top-bar .featured-list li { width: 50%; float: left; }
.top-bar .featured-bg { height: 200px; }
.top-bar .effects-item { padding: 20px; }
.top-bar .effects-heading { font-weight: bold; line-height: 20px; }
.top-bar .effects-desc { margin: 20px 0 10px; height: 60px; overflow: hidden; }
.top-bar .effects-link { text-align: right; line-height: 30px; padding: 0 20px 20px; }
.top-bar .user-name { line-height: 40px; cursor: default; }
.top-bar .user-name div { max-width: 140px; display: inline-block; }
.top-bar .user-action { font-size: 14px; line-height: 40px; }
.top-bar .user-action li:not(:last-of-type) { line-height: 39px; border-bottom: 1px solid rgba(155, 155, 155, .3); }
.top-bar .user-action a { padding: 0 20px; }
.top-bar .user-action a:hover { background-color: #61ded0; color: #313c48; }
.top-bar .user-action i { width: 20px; text-align: center; margin-right: 5px; font-size: 16px; }
.top-bar .cart-empty { padding: 40px; text-align: center; }
.top-bar .cart-box { width: 300px; }
.top-bar .cart-list { max-height: 327.5px; overflow-y: scroll; }
.top-bar .cart-list li { padding: 10px 10px 9px; border-bottom: solid 1px; }
.top-bar .cart-list li:last-of-type { padding: 10px; border-bottom: none; }
.top-bar .cart-list .text { font-size: 14px; line-height: 15px; }
.top-bar .cart-list .title { font-weight: bold; height: 30px; overflow: hidden; }
.top-bar .cart-list .action-remove { float: right; cursor: pointer; width: 20px; text-align: right; }
.top-bar .cart-action { padding: 5px 10px 10px; }
.top-bar .cart-action:hover, .top-bar .cart-action:focus { color: currentColor; }
.top-bar .cart-action .total-full { font-size: 12px; line-height: 15px;text-decoration: line-through; }
.top-bar .cart-action .total-text { line-height: 20px; }
.top-bar .cart-action .total-real { line-height: 20px; }
.top-bar .cart-action i { float: right; font-size: 20px; }
.top-bar + .section-common { padding: 50px 0 0; }
.top-bar.bar-client .menu-user { display: none; }
.top-bar.login-3p .user-action li:first-of-type { display: none; }
.top-bar:not(.bar-client) .menu-main { margin-left: 90px; }
.top-bar:not(.bar-client) .logo { display: none; }
.top-bar.bar-client .fm-shop { display: none; }
@media(max-width: 1215px){
.top-bar .hide-client { display: none !important; }
.top-bar .link-home { padding: 13px 0 13px 65px; }
.top-bar .panel-main .nav-tabs { width: 100%; }
.top-bar .search-bar input { width: 100px; }
}
@media(max-width: 1015px){
.top-bar .hide-client { display: block !important; }
.top-bar .link-home { width: 100%; padding: 3px 0 3px 8px; height: 40px; background-color: #313c48; margin: 0 0 0 -8px; text-align: center; }
.top-bar .link-home:before, .top-bar .right:before { content: ""; position: absolute; width: 38px; height: 100%; background-color: inherit; right: -38px; top: 0; }
.top-bar .link-home:before { left: -38px; right: auto; width: calc(100% + 38px); }
.top-bar .store { position: absolute; z-index: 2; color: #fff; left: 70px; font-weight: normal; font-size: 16px; }
.top-bar .panel-full { position: absolute; opacity: 0; max-height: 0; top: 50px; box-shadow: 0 2px 4px 0 #bebebe; left: 100%; overflow: hidden; }
.top-bar .panel-full.active { opacity: 1; max-height: 200px; }
.top-bar .menu-list { padding: 0; width: 100%; background-color: #f7f7f7; }
.top-bar .menu-list:before, .top-bar .menu-list:after { border-width: 0px; }
.top-bar .menu-list li { display: block; font-size: 14px; font-weight: normal; text-align: right; line-height: 40px; padding: 0; }
.top-bar .menu-list li:not(:last-of-type) { line-height: 40px; border-bottom: 1px solid rgba(155, 155, 155, .3); }
.top-bar .menu-list a { color: #313c48; padding: 0 20px; }
.top-bar .menu-drop { display: none; }
.top-bar .right { background-color: #313c48; padding: 3px 0; }
.top-bar .menu-mobile { display: inline-block; }
.top-bar .panel-main .nav-tabs { line-height: 40px; width: 100%; border-right: none; border-bottom: 1px solid; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.top-bar .panel-main .nav-tabs li { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.top-bar .featured-list { padding: 0 20px; }
.top-bar .featured-bg { display: none; }
.top-bar .effects-item { padding:  20px 20px 0; }
.top-bar .effects-desc { height: auto; margin: 10px 0 0; }
.top-bar .effects-link { padding: 0 20px; }
.top-bar .search-bar { display: none; }
.top-bar + .section-common { padding: 30px 0 0; }
.top-bar:not(.bar-client) .menu-main { margin-left: 70px; }
.rec-banner + .top-bar .store { left: 6px; }
}


/********** home **********/
main[data-nav="home"] .section-common { padding: 10px 0 0; }
main[data-nav="home"] .section-bottom { padding: 10px 0 40px; }
main[data-nav="home"] .top-bar + .section-common { padding: 50px 0 0; }
@media(max-width: 1015px){
main[data-nav="home"] .top-bar + .section-common { padding: 30px 0 0; }
main[data-nav="home"] .section-bottom { padding: 10px 0 30px; }
}


/********** list **********/
.content-list { padding: 40px 0; }
.content-list h2.heading { font-size: 30px; line-height: 40px; margin: 0 0 30px; }
.search-box { padding: 20px; margin: 0 0 30px; }
.search-box .sign { display: block; line-height: 40px; }
.search-box input[type="number"] + span { position: absolute; left: 8px; top: 0; }
.search-box .action { margin: 20px 0 0; }
.search-box hr { border-color: transparent; margin: 7px; }
.param-box { padding: 15px; background-color: #f7f7f7; }
.param-title { font-size: 18px; line-height: 25px; margin: 0; }
.param-list .input-label { padding: 0 30px 0 0; }
.param-list .pull-right { position: absolute; right: 0; top: 0; }
.search-result { padding-left: 40px; }
.search-result h3.heading { font-size: 24px; line-height: 30px; margin: 0; }
.result-empty { padding: 30px 60px; font-size: 18px; font-weight: bold; margin: 0 0 30px; }
.result-empty .icon { font-size: 50px; line-height: 50px; width: 50px; text-align: center; margin-right: 20px; }
.result-empty .text { width: 665px; width: calc(100% - 75px); }
.result-box { padding: 0 0 20px; }
.action-more { font-size: 20px; font-weight: bold; line-height: 20px; padding: 10px; cursor: pointer; }
.action-more:hover { background-color: #f7f7f7; }
@media(max-width: 1015px){
.content-list { padding: 30px 0 0; }
.content-list h2.heading { font-size: 24px; line-height: 30px; }
.search-result { padding-left: 0; }
}


/********** detail **********/
/** title **/
.detail-title .heading { font-size: 30px; line-height: 40px; margin: 0; }
.detail-title .subhead { font-size: 24px; line-height: 40px; margin: 0; font-weight: normal; }

/** info **/
.detail-info { margin: 30px 0 0; }
.detail-media { padding: 20px; }
.detail-media .count { line-height: 20px; margin: 0 0 15px; }
.detail-media-show { position: relative; margin: 0 0 16px; }
.detail-cover { position: relative; opacity: 0; }
.detail-video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; }
.detail-media-item { cursor: pointer; }
.with-image .detail-cover { opacity: 1; z-index: 2; }
.with-image .detail-video { opacity: 0; }
.info-box { margin: 0 0 0 10px; padding: 25px; }
.info-top { margin: 0 0 25px; }
.info-top .right { float: right; }
.info-title { font-size: 20px; font-weight: bold; line-height: 25px; height: 50px; overflow: hidden; }
.info-price { line-height: 20px; height: 35px; text-align: right; margin: 0 0 10px; }
.info-price-full { text-decoration: line-through; margin: 15px 5px 0 0; }
.info-price-real { font-size: 26px; line-height: 35px; }
.info-heading { font-size: 16px; line-height: 20px; margin: 0 0 10px; }
.info-overview .desc { min-height: 100px; margin: 0 0 10px; }
.info-divider { margin: 10px 0 9px; }
.info-list { font-size: 14px; height: 75px; -webkit-column-count: 2; -webkit-column-gap: 30px; -moz-column-count: 2; -moz-column-gap: 30px; column-count: 2; column-gap: 30px; }
.info-list span { display: inline-block; vertical-align: top; }
.info-list .icon { width: 25px; height: 25px; background-image: url(../images/store/sprites-res-inc.png); }
.info-list .icon-Element { background-position: 0 0; }
.info-list .icon-Filter { background-position: -25px 0; }
.info-list .icon-Music { background-position: -50px 0; }
.info-list .icon-Overlay { background-position: -75px 0; }
.info-list .icon-Title { background-position: -100px 0; }
.info-list .icon-Transition { background-position: -125px 0; }
.info-inc { margin: 0 -25px 0; height: 45px; position: relative; }
.info-inc-title { line-height: 45px; height: 45px; font-size: 20px; padding: 0 25px; }
.info-inc-title:hover, .info-inc-title:focus { color: currentColor; }
.info-inc-title i { font-size: 26px; margin: 0 5px 0 0; }
.info-inc-content { background-color: #efefef; position: absolute; width: 100%; padding: 0 25px; z-index: 2; left: 0; height: 0; overflow: hidden; bottom: 45px; }
.info-inc-content li i { width: 25px; text-align: center; font-size: 18px; }
.info-inc:hover .info-inc-title { background-color: #e5e5e5; color: #313c48; }
.info-inc:hover .info-inc-content { height: 105px; padding: 15px 25px; }
.info-ph { height: 45px; }
.info-action .button { display: block; margin: 15px 0 0; }
.info-action .action-download { margin: 80px 0 0; }
@media(max-width: 1215px){
.detail-media { padding: 83px 20px 30px; }
.info-top { margin: 0 0 5px; }
.info-title { height: 75px; }
.info-overview .desc { min-height: 60px; }
}
@media(max-width: 1015px){
.detail-title .heading { font-size: 24px; line-height: 30px; }
.detail-title .subhead { font-size: 18px; line-height: 25px; }
.detail-info { margin: 20px 0 0; }
.detail-media { margin: 0 0 20px; padding: 20px; }
.detail-media-show { margin: 0; }
.detail-image-list > .row { margin: 0; }
.detail-image-list > .row > .col { padding: 0; }
.info-box { margin: 0; }
.info-top { margin: 0 0 15px; }
.info-title { height: auto; }
.info-overview .desc { min-height: 0; }
.info-overview.no-pack { height: auto; }
.info-overview.no-pack .desc { min-height: 0; }
.info-list { height: auto; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
.info-inc:hover .info-inc-content { height: 210px; }
.info-action { text-align: center; }
}

/** middle banner **/
.middle-banner-detail .banner-box { padding: 10px; }
.middle-banner-detail .texts { padding: 50px; }
.middle-banner-detail .line-1 { font-size: 34px; line-height: 40px; }
.middle-banner-detail .line-2 { font-size: 56px; line-height: 60px; }
.middle-banner-detail .images { padding: 30px 60px; }
.middle-banner-detail .image { width: 100px; height: 140px; overflow: visible; }
.middle-banner-detail img { width: 100%; }
.middle-banner-detail .sign { font-size: 40px; font-weight: bold; line-height: 40px; height: 40px; padding: 30px 25px 70px; }
.middle-banner-detail .price { height: 30px; margin: 35px 0 0 10px; }
.middle-banner-detail .price > div { display: inline-block; }
.middle-banner-detail .only { font-size: 18px; line-height: 20px; vertical-align: bottom; }
.middle-banner-detail .dollar { line-height: 20px; vertical-align: top; }
.middle-banner-detail .real { font-size: 30px; line-height: 30px; vertical-align: bottom; }
.middle-banner-detail .button { width: 180px; }
@media(max-width: 1215px){
.middle-banner-detail .line-1 { font-size: 28px; }
.middle-banner-detail .line-2 { font-size: 48px; }
.middle-banner-detail .images { padding: 30px 10px; }
.middle-banner-detail .sign { padding: 30px 10px 70px; }
}
@media(max-width: 1015px){
.middle-banner-detail .texts { padding: 30px; }
.middle-banner-detail .line-1 { font-size: 6vw; line-height: 6vw; }
.middle-banner-detail .line-2 { font-size: 12vw; line-height: 12vw; }
.middle-banner-detail .images { padding: 30px 10px; text-align: center; }
}


/********** user **********/
.content-user { padding: 50px 0 0; }
.content-user .acc h2 { font-size: 30px; margin-bottom: 30px; }
.content-user form { padding: 15px; }
@media(max-width: 1015px){
.content-user { padding: 30px 0 0; }
}

/** library **/
.lib-item { padding: 10px; margin: 0 0 20px; }
.lib-item .progress { margin: 10px 0 0; }
.lib-item .progress-bar { -webkit-transition: none; -o-transition: none; transition: none; }
.lib-title { font-size: 22px; line-height: 30px; height: 30px; font-weight: bold; overflow: hidden; }
.lib-desc { height: 40px; overflow: hidden; margin: 5px 0 0; line-height: 20px; font-size: 14px; }
.lib-status { line-height: 40px; height: 40px; }
@media(max-width: 1215px){
.lib-desc { height: 20px; }
.lib-item .progress { margin: 6px 0 0; }
.lib-action .button { margin: 5px 0 9px; }
.lib-status { line-height: 25px; height: 25px; }
}
@media(max-width: 1015px){
.lib-cover, .lib-desc { display: none !important; margin: 0; }
.lib-title { height: auto; overflow: visible; text-align: center; }
.lib-item .progress { position: absolute; bottom: -83px; width: calc(100% - 16px); }
.lib-item .right { float: right; }
.lib-action { margin: 20px 0; }
.lib-action .button { margin: 0; width: 100%; }
.lib-status { line-height: 40px; height: 40px; }
}

/** weizc@wondershare.cn **/
.store-table {margin-top: 30px;/*border: 1px solid #efefef;*/}
.store-table th {font-size: 20px;color: #FFF;background: #303d46;height: 46px;line-height: 46px;}
.store-table td .button {height: 50px;width: 150px;display: block;}
.store-table td.price {font-size: 20px;font-weight: bold;padding-top: 60px;padding-bottom: 60px;}
.store-table td.del-btn {font-size: 24px;padding-top: 60px;padding-bottom: 60px;}
.store-table td .pho {width: 160px;display: inline-block;vertical-align: top;padding-top: 15px;}
.store-table td .txt {width: 320px;display: inline-block;padding-left: 10px;}
.store-table td .txt .time {margin-bottom: 10px;}
.store-table td .pho img {max-width: 100%;}
.store-table td .lft{float: left;}
.store-table td .rgt{float: right;padding-top: 20px;}
.store-table .empty { text-align: center; }
.store-table .empty .button { display: inline-block; }
@media(max-width: 760px) and (max-width: 1215px){
.store-table td .txt{width: 100%;}
.store-table tr th:nth-child(3) {display: none;}
.store-table tr td:nth-child(3) {display: none;}
.store-table td .pho {display: none;}
.store-table td .des {display: none;}
}
/** end **/
@media(max-width: 1015px){
.store-table td .lft { float: none; }
.store-table td .rgt { float: none; padding: 0; text-align: center; }
.store-table td .button { display: inline-block; }
}

/********** modal **********/
/** coupon **/
.modal-coupon .modal-body { padding: 0; }
.modal-coupon .show-coupon .input-title { font-size: 16px; }
.modal-coupon .show-notice i { font-size: 36px; line-height: 40px; }
.modal-coupon .show-notice p { font-size: 16px; line-height: 20px; margin: 0; }

/** gift **/
.modal-gift .modal-content { background-image: url(../images/store/modal/bg-gift.jpg); padding: 10px; }
.modal-gift .modal-header .close { top: 10px; right: 10px; z-index: 2; }
.modal-gift .dash-box { border: dashed 4px; padding: 0 0 20px; padding: 0 0 2vh; }
.modal-gift .gift-head { font-size: 60px; font-size: 6vh; line-height: 1; margin: 20px 0; margin: 2vh 0; }
.modal-gift .gift-desc { font-size: 20px; }
.icon-gift { width: 40px; height: 40px; left: 40px; bottom: 40px !important; border: solid 2px; font-size: 30px; line-height: 36px; -webkit-animation: shake 3s cubic-bezier(.36,.07,.19,.97) both infinite; -moz-animation: shake 3s cubic-bezier(.36,.07,.19,.97) both infinite; -o-animation: shake 3s cubic-bezier(.36,.07,.19,.97) both infinite; animation: shake 3s cubic-bezier(.36,.07,.19,.97) both infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; }
body.modal-open .icon-gift, .icon-gift.has-gift, .icon-gift:hover { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; }