@charset "utf-8";
/* CSS Document */

/****************************************************
*  project: filmora website 2016 main pages         *
*  description: breakpoint/container 1016px/1000px  *
*  author: mazq@wondershare.cn                      *
*  update: 171108                                   *
****************************************************/

/********** common **********/
/** banner **/
.banner { text-align: center; }
.banner h2.heading { font-size: 36px; font-size: 3.6vh; line-height: 45px; line-height: 4.5vh; margin: 0; }
.banner h3.desc { font-size: 24px; font-size: 2.4vh; line-height: 30px; line-height: 3vh; font-weight: normal; }
@media (min-width:1016px){
.banner-left { text-align: left; }
}

/** banner top **/
.banner-top { height: 800px; }
.banner-top > .front { display: inline-block; }
.banner-top .media-list { position: absolute; width: 1920px; height: 800px; left: 50%; top: 0; margin-bottom: 0; overflow: hidden; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); transform: translate(-50%,0); }
.banner-top .media-list .shape { position: absolute; width: 100%; height: 800px; overflow: hidden; }
/*.banner-top .media-list .shape-left { z-index: 1; -webkit-clip-path: polygon(0% 0%, 32.64% 0, 55.56% 55%, 36.81% 100%, 0% 100%); clip-path: polygon(0% 0%, 32.64% 0, 55.56% 55%, 36.81% 100%, 0% 100%); }*/
.banner-top .media-list .shape-left { z-index: 1; -webkit-clip-path: polygon(0% 0%, 32.64% 0, 74.31% 100%, 0% 100%); clip-path: polygon(0% 0%, 32.64% 0, 74.31% 100%, 0% 100%); }
.banner-top .media-list .shape-right { z-index: 2; -webkit-clip-path: polygon(32.64% 0, 100% 0, 100% 100%, 74.31% 100%); clip-path: polygon(32.64% 0, 100% 0, 100% 100%, 74.31% 100%); }
.banner-top .media-list .shape-bottom { z-index: 3; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%);  width: 37.5%; height: 45% !important; bottom: 0; left: 36.81%; }
.banner-top .media-list .shape .image { height: 100%; background-size: cover; background-repeat: no-repeat; }
.banner-top .media-list .shape .image:hover { transform: scale(1.05); }
.banner-top .text { text-shadow: 1px 1px 2px #333; }
@media (max-width:1015px){
.banner-top { height: 650px; height: calc(100vh - 45px); }
.banner-top > .back:before { height: 650px; height: calc(100vh - 45px); }
.banner-top > .front { display: block; }
.banner-top .media-list { position: absolute; width: 1300px; width: 200vh; height: 650px; height: calc(100vh - 45px); }
.banner-top .media-list .shape { height: 650px; height: calc(100vh - 45px); }
}

/** features slides **/
.feats-slides { height: 330px; padding: 1px 0; }
.feats-slides .feats-control { position: relative; }
.feats-slides .feats-ctrl { position: absolute; left: 0; right: 0; margin: 0 auto; border-radius: 25px; width: 25px; height: 25px; font-size: 24px; line-height: 23px; opacity: .0; pointer-events: none; z-index: 3; }
.feats-slides .feats-ctrl.active { opacity: 1; cursor: pointer; pointer-events: initial; }
.feats-slides .feats-ctrl.prev { top: -35px; }
.feats-slides .feats-ctrl.next { bottom: -35px; }
.feats-slides .feats-box { height: 328px; overflow: hidden; padding-right: 40px; text-align: left; }
.feats-slides .feats-list li { margin-bottom: 56px; opacity: .3; cursor: pointer; }
.feats-slides .feats-list li.active, .feats-slides .feats-list li:hover { opacity: 1; }
.feats-slides .feats-list li > div { display: inline-block; vertical-align: top; height: 72px; }
.feats-slides .feats-icon { width: 85px; padding: 3.5px 0; background-image: url("../images/product/feat-sprites-feats.png"); background-repeat: no-repeat; background-origin: content-box; }
.feats-slides .feats-icon-app { background-image: url("../images/product/app-sprites-tools.png"); }
.feats-slides .feats-text { width: 270px; width: calc(100% - 90px); padding-left: 15px; }
.feats-slides .feats-title { font-size: 18px; line-height: 25px; height: 25px; overflow: hidden; letter-spacing: 0.5px; font-weight: bold; }
.feats-slides .feats-desc { font-size: 14px; line-height: 20px; height: 40px; overflow: hidden; margin-top: 7px; }
.feats-slides .feats-video { width: 584px; padding-bottom: 56.1644%; }
.feats-slides .feats-video .yt-cover { padding-bottom: 56.1644%; }
.feats-slides .feats-icon-01 { background-position: -302px 0; }
.feats-slides .feats-icon-02 { background-position: -396px 0; }
.feats-slides .feats-icon-03 { background-position: 0 0; }
.feats-slides .feats-icon-04 { background-position: -203px 0; }
.feats-slides .feats-icon-05 { background-position: -104px 0; }
.feats-slides .feats-icon-app-01 { background-position: 7px -442px; }
.feats-slides .feats-icon-app-02 { background-position: 10px -339px; }
.feats-slides .feats-icon-app-03 { background-position: 9px -537px; }
.feats-slides .feats-icon-app-04 { background-position: 14px -863px; }
.feats-slides .feats-icon-app-05 { background-position: 12px -709px; }
.feats-slides .feats-icon-app-06 { background-position: 10px 8px; }
.feats-slides .feats-icon-app-07 { background-position: 10px -163px; }
@media (max-width:1015px){
.feats-slides { height: auto; padding: 0; }
.feats-slides .feats-list li { margin-bottom: 28px; }
.feats-slides .feats-ctrl { transform: rotate(-90deg); left: auto; right: auto; top: auto !important; bottom: 8.5px !important; opacity: .5; }
.feats-slides .feats-ctrl.prev { left: 5px; }
.feats-slides .feats-ctrl.next { right: 5px; }
.feats-slides .feats-video { margin-bottom: 25px; }
.feats-slides .feats-box { height: 72px; padding-right: 0; }
.feats-slides .feats-icon { display: none !important; }
.feats-slides .feats-text { width: 100%; padding-left: 40px; padding-right: 40px; text-align: center; }
}


/********** home **********/
/** banner top **/
.banner-top-home .media-list .shape-left .image { background-image: url("../images/product/home-banner-top-01.jpg"); background-position: left center; background-size: auto 120%;  }
.banner-top-home .media-list .shape-right .image { background-image: url("../images/product/home-banner-top-02.jpg"); background-position: right bottom; background-size: auto 110%;  }
.banner-top-home .media-list .shape-bottom .image { background-image: url("../images/product/home-banner-top-03.jpg"); background-position: center; }
.banner-top-home .text { margin: 240px 0 155px; }
.banner-top-home h1 { font-size: 78px; line-height: 100px; }
.banner-top-home h2 { font-size: 32px; line-height: 40px; font-weight: normal; }
.banner-top-home .product { background-color: #303d47; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.33); margin-bottom: 9px; }
.banner-top-home .product-main { padding: 20px 30px; }
.banner-top-home .product-main .logos { padding: 15px 20px 10px; }
.banner-top-home .product-main .logo { height: 60px; margin-bottom: 20px; }
.banner-top-home .product-main .desc { font-size: 18px; line-height: 25px; height: 50px; }
.banner-top-home .product-app { padding: 30px; }
.banner-top-home .product-app .logo { height: 40px; margin-bottom: 15px; }
.banner-top-home .product-app .desc { padding: 0 40px 20px; font-size: 14px; line-height: 20px; }
.banner-top-home .product-app .action { font-size: 14px; line-height: 20px; }
.banner-top-home .product-app .action a:hover { color: #61ded0; }
@media (max-width:1015px){
.banner-top-home .media-list .shape-left .image { background-position: 35% 100%; background-size: auto 150%; }
.banner-top-home .media-list .shape-right .image { background-position: -30% 120%; background-size: auto 120%; }
.banner-top-home .text { margin: 120px 0 50px; margin: 20vh 0 10vh; }
.banner-top-home h1 { font-size: 40px; font-size: 10vw; line-height: 45px; line-height: 12vw; }
.banner-top-home h2 { font-size: 18px; font-size: 4.5vw; line-height: 25px; line-height: 6.5vw; }
.banner-top-home .products { position: absolute; left: 8px; width: calc(100% - 16px); bottom: 20px; }
.banner-top-home .product .logo { margin-bottom: 0;  }
.banner-top-home .product-main { padding: 20px 15px; }
.banner-top-home .product-main .logos { padding: 0; }
.banner-top-home .product-main .logo { height: 50px; }
.banner-top-home .product-main .desc { font-size: 14px; line-height: 20px; padding-top: 10px; vertical-align: top; }
.banner-top-home .product-main .button { width: 200px; margin: 25px 0; }
.banner-top-home .product-app { padding: 15px; }
.banner-top-home .product-app .logo { height: 40px; background-size: auto 25px; margin: 0 -8px; }
.banner-top-home .product-app .desc { font-size: 12px; line-height: 15px; padding-bottom: 0; vertical-align: top; }
.banner-top-home .product-app .action { line-height: 40px; }
}
@media (max-width:767px){
.banner-top-home .product-main .button { height: 35px; font-size: 12px; line-height: 31px; width: 100%; max-width: 120px; font-weight: normal; margin: 7.5px 0; padding: 0; }
}
@media (min-width:1016px){
.banner-top-home .product-main .button { margin: 12.5px 10px !important; }
}
@media screen and (min-width:0\0) {	/** ie fix **/
.banner-top-home .back .media-list .shape-bottom { z-index: 1; }
.banner-top-home .back .media-list .shape .image { background-image: url("../images/product/home-banner-top-00.jpg"); background-position: center; background-size: cover; }
}
@-moz-document url-prefix(){		/** firefox fix **/
.banner-top-home .back .media-list .shape-bottom { z-index: 1; }
.banner-top-home .back .media-list .shape .image { background-image: url("../images/product/home-banner-top-00.jpg"); background-position: center; background-size: cover; }
}

/** banner recommend/recent **/
.banner-rec { padding: 120px 0; padding: 12vh 0; }
.banner-rec .image { overflow: visible; height: 450px; height: 45vh; }
.banner-rec .image img { position: absolute; }
.banner-rec .logo { margin: 0 0 15px; margin: 0 0 1.5vh; height: 45px; height: 4.5vh; }
.banner-rec .feats { margin: 20px 0; margin: 2vh 0; }
.banner-rec .feats li { font-size: 20px; font-size: 2vh; line-height: 45px; line-height: 4.5vh; }
.banner-rec .feats-item { padding: 20px; padding: 2vh; text-align: center; }
.banner-rec .feats-item.thin { padding: 10px 0; padding: 1vh 0; text-align: left; }
.banner-rec .feats-icon { display: inline-block; width: 40px; height: 40px; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important; }
.banner-rec .feats-title { line-height: 20px; font-weight: bold; }
.banner-rec .feats-title.inline-block { font-weight: normal; margin: 0 0 0 5px; }
@media (max-width:1015px){
.banner-rec .image { margin: 0 0 5vh; }
.banner-rec .image img { max-width: 60%; left: 0; right: 0; margin: 0 auto; }
}

/** press and review **/
.banner-press .part { padding: 70px 0; }
.banner-press .press-quote { display: inline-block; width: 380px; max-width: 100%; font-size: 30px; line-height: 34px; padding: 0 2px; margin: 0; }
.banner-press .press-logo { height: 140px; background-image: url("../images/product/press-cnet.png"); background-position: 10% 50%; background-repeat: no-repeat; }
.banner-press .ratings { font-size: 20px; line-height: 25px; margin-top: 5px; }
.banner-press .desc { font-size: 20px; line-height: 25px; margin: 10px 0 25px; }
.banner-press .button { font-weight: normal; margin: 0; }
@media (max-width:1015px){
.banner-press .part { padding: 40px 0; }
.banner-press .container { padding: 0; }
.banner-press .press-logo { height: 90px; background-position: 50% 50%; margin-top: 20px; }
}

/** banner effects store **/
.banner-store .front { padding: 230px 0; }
.banner-store .desc { margin: 20px 0 30px; }
@media (max-width:1015px){
.banner-store video { display: none; }
.banner-store .front { padding: 60px 0; }
}

/** banner community **/
.banner-community { padding: 150px 0; text-align: center; background-image: url("../images/product/banner-filmora.io-bg.jpg"); }
.banner-community .logo { height: 45px; -webkit-filter: drop-shadow(1px 1px 2px #666); filter: drop-shadow(1px 1px 2px #666); }
.banner-community .desc { margin: 25px 0 15px; text-shadow: 1px 1px 2px #666; }
@media (max-width:1015px){
.banner-community { padding: 90px 0; }
}


/********** feature **********/
/** banner top **/
.banner-top-feat .media-list .shape-left .image { background-image: url("../images/product/feat-banner-top-01.jpg"); background-position: left center; background-size: auto 120%;  }
.banner-top-feat .media-list .shape-right .image { background-image: url("../images/product/feat-banner-top-02.jpg"); background-position: 250% 0%; background-size: auto 140%; }
.banner-top-feat .text { margin: 200px 0 30px; }
.banner-top-feat h1 { font-size: 48px; line-height: 60px; margin-bottom: 15px; }
.banner-top-feat h4 { font-size: 20px; line-height: 25px; font-weight: normal; }
.banner-top-feat .platform li { display: inline-block; font-size: 20px; line-height: 30px; margin: 0 10px; cursor: pointer; }
.banner-top-feat .platform li.active { color: #61ded0; }
@media (max-width:1015px){
.banner-top-feat .media-list .shape-left .image { background-position: 230% -20%; background-size: auto 120%; }
.banner-top-feat .media-list .shape-right .image { background-position: 50% 0; background-size: auto 100%; }
.banner-top-feat .text { margin: 80px 25px 30px; margin: 15vh 5vh 5vh; }
.banner-top-feat h1 { font-size: 40px; font-size: 10vw; line-height: 45px; line-height: 12vw; }
.banner-top-feat h2 { font-size: 18px; font-size: 4.5vw; line-height: 25px; line-height: 6.5vw; }
}
@media (min-width:1016px){
.banner-top-feat { height: 650px; }
.banner-top-feat .text, .banner-top-feat .action { text-align: left; }
.banner-top-feat .system { margin-left: 10px; }
}
@media screen and (min-width:0\0) {	/** ie fix **/
.banner-top-feat .back .media-list .shape-bottom { z-index: 1; }
.banner-top-feat .back .media-list .shape .image { background-image: url("../images/product/feat-banner-top-00.jpg"); background-position: center; background-size: cover; }
}
@-moz-document url-prefix(){		/** firefox fix **/
.banner-top-feat .back .media-list .shape-bottom { z-index: 1; }
.banner-top-feat .back .media-list .shape .image { background-image: url("../images/product/feat-banner-top-00.jpg"); background-position: center; background-size: cover; }
}

/** banner modern ui **/
.banner-ui .text { padding: 120px 0 80px; }
.banner-ui .image-set { position: relative; text-align: left; }
.banner-ui .image-set > li:last-of-type { position: absolute; top: 110px; right: 0; }
@media (max-width:1015px){
.banner-ui .text { padding: 60px 0 40px; }
.banner-ui .image-set > li:last-of-type { top: 60px; right: auto; }
.banner-ui .image-set img { max-width: 100%; }
}

/** banner feature slides **/
.banner-feats { padding: 80px 0 180px; }
.banner-feats .desc { margin: 10px 0 80px; }
@media (max-width:1015px){
.banner-feats { padding: 60px 0; }
}

/** banner tools **/
.banner-tools { padding: 90px 0; }
.banner-tools h2.heading { margin: 60px 0; }
.banner-tools .tools-list > .row > div:nth-of-type(odd) .anime-item.unload { transform: translate(-15%,0); }
.banner-tools .tools-list > .row > div:nth-of-type(even) .anime-item.unload { transform: translate(15%,0); }
.banner-tools .tools-item { background-color: #313c48; color: #fff; border-top: solid 5px #61ded0; padding: 25px 30px; margin-bottom: 16px; }
.banner-tools.bg-pattern-teal .tools-item { border-color: #f7f7f7;}
.banner-tools .tools-item > div { display: inline-block; vertical-align: top; height: 70px; }
.banner-tools .tools-icon { width: 70px; margin-right: 30px; background-image: url("../images/product/feat-sprites-tools.png"); background-repeat: no-repeat; background-size: 1200px auto; }
.banner-tools .tools-text { width: 325px; width: calc(100% - 105px); }
.banner-tools .tools-title { font-size: 20px; line-height: 25px; font-weight: bold; color: #61ded0; }
.banner-tools .tools-desc { font-size: 14px; line-height: 20px; height: 40px; overflow: hidden; margin-top: 5px; }
.banner-tools .tools-icon-01 { background-position: -226px -6px; }
.banner-tools .tools-icon-02 { background-position: -705px 1px; }
.banner-tools .tools-icon-03 { background-position: -830px -9px; }
.banner-tools .tools-icon-04 { background-position: -351px -125px; }
.banner-tools .tools-icon-05 { background-position: -937px -132px; }
.banner-tools .tools-icon-06 { background-position: -581px -2px; }
.banner-tools .tools-icon-07 { background-position: -1042px -136px; }
.banner-tools .tools-icon-08 { background-position: -460px -128px; }
.banner-tools .tools-icon-09 { background-position: -1131px -128px; }
.banner-tools .tools-icon-10 { background-position: 20px -5px; }
.banner-tools .tools-icon-11 { background-position: -112px -4px; }
.banner-tools .tools-icon-12 { background-position: -455px -7px; }
.banner-tools .tools-icon-13 { background-position: -343px -6px; }
.banner-tools .tools-icon-14 { background-position: -688px -140px; }
.banner-tools .tools-icon-15 { background-position: -815px -134px; }
.banner-tools .tools-icon-16 { background-position: -222px -126px; }
.banner-tools .tools-icon-17 { background-position: -1039px -8px; }
.banner-tools .tools-icon-18 { background-position: -932px -6px; }
.banner-tools .tools-icon-19 { background-position: -111px -134px; }
.banner-tools .tools-icon-20 { background-position: -578px -134px; }
.banner-tools .tools-icon-21 { background-position: 4px -135px; }
@media (max-width:1015px){
.banner-tools { padding: 0; }
.banner-tools .tools-item { padding: 15px;  }
}

/** banner stories **/
.banner-stories .parallax-bg { background-image: url("../images/product/banner-mid-stories-bg.jpg"); }
.banner-stories .promo-line { font-size: 56px; line-height: 60px; font-weight: normal; margin: 0; padding: 130px 0; text-shadow: 1px 1px 2px #333; }
@media (max-width:1015px){
.banner-stories .parallax-bg { background-position: 30% 50%; }
}

/** banner downloads **/
.banner-downloads { padding: 60px 0; padding: 6vh 0; text-align: center; }
.banner-downloads .logos .logo { height: 60px; height: 6vh }
.banner-downloads .desc { margin: 30px 0 0; margin: 3vh 0 0; }
.banner-downloads .action { margin: 25px 0 0; margin: 2.5vh 0 0; }


/** banner controls **/
.banner-controls .back { background-color: #313c48; }
.banner-controls .nav-tabs > li > a { font-size: 24px; line-height: 200px; height: 200px; background-color: #313c48; position: relative; color: #fff; }
.banner-controls .nav-tabs > li > a:before { content: ""; position: absolute; width: 300%; height: 100%; background-color: #313c48; right: 0; top: 0; z-index: 0; opacity: 0.07; }
.banner-controls .nav-tabs > li > a:after { content: "\e906"; font-family: "filmora"; color: transparent; position: absolute; display: inline-block; right: -30px; top: 0; }
.banner-controls .nav-tabs > li.active a:after { color: #fff; }
.banner-controls .nav-tabs > li:not(.active) a:before { background-color: #fff; }
.banner-controls .tab-content { text-align: left; padding: 80px 0 56px 50px; }
.banner-controls .control-item { font-size: 24px; line-height: 42px; margin-bottom: 24px; }
.banner-controls .control-item > div { display: inline-block; vertical-align: top; height: 42px; }
.banner-controls .control-item .control-icon { width: 42px; margin-right: 10px; background-repeat: no-repeat; }
.banner-controls .control-item .control-title { width: 160px; width: calc(100% - 59px); }
.banner-controls .control-item .control-icon-video { background-image: url("../images/product/feat-sprites-controls-video.png"); }
.banner-controls .control-item .control-icon-audio { background-image: url("../images/product/feat-sprites-controls-audio.png"); }
.banner-controls .control-item .control-icon-video-01 { background-position: 5px 6px; }
.banner-controls .control-item .control-icon-video-02 { background-position: 5px -48px; }
.banner-controls .control-item .control-icon-video-03 { background-position: 5px -101px; }
.banner-controls .control-item .control-icon-video-04 { background-position: 5px -153px; }
.banner-controls .control-item .control-icon-video-05 { background-position: -216px 3px; }
.banner-controls .control-item .control-icon-video-06 { background-position: -216px -48px; }
.banner-controls .control-item .control-icon-video-07 { background-position: -216px -101px; }
.banner-controls .control-item .control-icon-video-08 { background-position: -216px -153px; }
.banner-controls .control-item .control-icon-video-09 { background-position: -458px 4px; }
.banner-controls .control-item .control-icon-video-10 { background-position: -458px -48px; }
.banner-controls .control-item .control-icon-audio-01 { background-position: 5px 6px; }
.banner-controls .control-item .control-icon-audio-02 { background-position: 5px -48px; }
.banner-controls .control-item .control-icon-audio-03 { background-position: 4px -100px; }
.banner-controls .control-item .control-icon-audio-04 { background-position: 5px -153px; }
.banner-controls .control-item .control-icon-audio-05 { background-position: -216px 3px; }
.banner-controls .control-item .control-icon-audio-06 { background-position: -216px -48px; }
.banner-controls .control-item .control-icon-audio-07 { background-position: -216px -101px; }
.banner-controls .control-item .control-icon-audio-08 { background-position: -216px -153px; }
@media (max-width:1015px){
.banner-controls .nav-tabs { display: flexbox; display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.banner-controls .nav-tabs > li { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.banner-controls .nav-tabs > li > a { font-size: 18px; line-height: 50px; height: 50px; }
.banner-controls .nav-tabs > li > a:before { right: -8px; width: 8px; }
.banner-controls .nav-tabs > li > a:after { right: 0; left: 0; top: auto; bottom: -35px; }
.banner-controls .tab-content { padding: 40px 7px 26px 7px; }
.banner-controls .control-item { font-size: 16px; margin-bottom: 18px; }
}
@media (min-width:1016px){
.banner-controls .nav-tabs > li a:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
}

/** banner links **/
.banner-links .nav-tabs h3 { margin: 0; font-size: 24px; line-height: 100px; }
.banner-links .nav-tabs > li { width: 33.3333%; float: left; }
.banner-links .nav-tabs > li a { position: relative; }
.banner-links .nav-tabs > li a:after { content: "\e906"; font-family: "filmora"; color: transparent; position: absolute; display: inline-block; line-height: 25px; right: 0; left: 0; bottom: 0; }
.banner-links .nav-tabs > li a:hover { color: #313c48; }
.banner-links .nav-tabs > li.active a { color: #fff; background-color: #313c48; }
.banner-links .nav-tabs > li.active a:after { color: #fff; }
.banner-links .tab-content { line-height: 30px; padding: 30px 0; text-align: left; }
.banner-links .tab-content h4 { font-size: 16px; margin: 0; line-height: 30px; }
@media (max-width:1015px){
.banner-links .nav-tabs h3 { font-size: 20px; line-height: 50px; }
.banner-links .nav-tabs > li a:after { bottom: -25px; }
.banner-links .tab-content { text-align: center; font-size: 14px; line-height: 20px; }
}


/********** app **********/
/** banner top **/
.banner-top-app .media-list .shape-left .image { background-image: url("../images/product/app-banner-top-01.jpg"); background-position: 0% 20%; background-size: auto 250%;  }
.banner-top-app .media-list .shape-right .image { background-image: url("../images/product/app-banner-top-03.jpg"); background-position: 160% 100%; background-size: auto 130%;  }
.banner-top-app .media-list .shape-bottom .image { background-image: url("../images/product/app-banner-top-02.jpg"); background-position: center;  }
.banner-top-app .logos { margin-top: 220px; }
.banner-top-app .logos .logo { height: 70px; background-size: auto 100%; -webkit-filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, .5)); filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, .5)); }
.banner-top-app .text { margin: 20px 0 30px; }
.banner-top-app h1 { font-size: 24px; line-height: 25px; font-weight: normal; margin: 0; }
.banner-top-app h4 { font-size: 24px; line-height: 25px; margin: 50px 0 30px; }
.banner-top-app .phone { position: relative; margin-top: 40px; width: 548px; max-width: 100%; display: inline-block; }
.banner-top-app .phone-mockup { width: 548px; max-width: 100%; height: 0; padding-bottom: 48.54%; position: absolute; left: 0; right: 0; margin: 0 auto; background-image: url("../images/product/app-phone-mockup.png"); background-image: url("../images/product/app-phone-mockup.svg"), none; background-size: contain; -webkit-filter: drop-shadow(1px 27px 14px rgba(0, 0, 0, .2)); filter: drop-shadow(1px 27px 14px rgba(0, 0, 0, .2)); }
.banner-top-app .phone-screen { position: absolute; width: 80.66%; height: 0; padding-bottom: 44.71%; left: 8.47%; top: 10.7px; }
.banner-top-app .phone-screen .yt-cover { padding-bottom: 55.43%; background-image: url("../images/product/app-phone-cover.jpg"); }
.banner-top-app .phone-screen .yt-cover i { font-size: 66px; }
@media (max-width:1015px){
.banner-top-app { height: 550px; height: 80vh; }
.banner-top-app .media-list .shape-left .image { background-position: 55% 0%; background-size: auto 200%; }
.banner-top-app .media-list .shape-right .image { background-position: 90% 120%; background-size: auto 120%; }
.banner-top-app .logos { margin-top: 220px; margin-top: 30vh; }
.banner-top-app .logos .logo { height: 60px; height: 8vh; }
.banner-top-app .text { margin: 20px 0; }
.banner-top-app h4 { display: none; }
.banner-top-app .action .logo-store { width: 100px; width: 40vw; height: 30px; height: 12vw; background-size: auto 80%; }
.banner-top-app .phone { margin-top: 40px; margin-top: 6vh; }
.banner-top-app .phone-screen { top: 1vh; }
}
@media screen and (min-width:0\0) {	/** ie fix **/
.banner-top-app .back .media-list .shape-bottom { z-index: 1; }
.banner-top-app .back .media-list .shape .image { background-image: url("../images/product/feat-banner-top-00.jpg"); background-position: center; background-size: cover; }
}
@-moz-document url-prefix(){		/** firefox fix **/
.banner-top-app .back .media-list .shape-bottom { z-index: 1; }
.banner-top-app .back .media-list .shape .image { background-image: url("../images/product/feat-banner-top-00.jpg"); background-position: center; background-size: cover; }
}

/** app features slides **/
.app-feats-slides { padding: 250px 0 100px; }
.app-feats-slides .swiper-index { font-size: 18px; line-height: 20px; font-weight: bold; }
.app-feats-slides .swiper-index li { display: inline-block; margin: 0 35px; cursor: pointer; }
.app-feats-slides .swiper-index li:hover { color: #ff5349; }
.app-feats-slides .swiper-control { position: absolute; left: 0; bottom: 0; width: 100%; line-height: 55px; height: 55px; }
.app-feats-slides .swiper-ctrl-prev { left: 5%; }
.app-feats-slides .swiper-ctrl-next { right: 5%; }
.app-feats-slides .swiper-container { width: 100%; padding: 80px 0; }
.app-feats-slides .swiper-slide { width: 100%; max-width: 667px; position: relative; }
.app-feats-slides .swiper-slide img { max-width: 100%; }
.app-feats-slides .swiper-slide .title { position: absolute; margin: 0 auto; left: 0; right: 0; bottom: -80px; text-align: center; font-size: 20px; line-height: 55px; font-weight: bold; color: #ff5349; width: 220px; height: 55px; z-index: 3; opacity: 0; }
.app-feats-slides .swiper-slide.swiper-slide-active .title { opacity: 1; transition: opacity .5s ease; }
@media (max-width:1015px){
.app-feats-slides { padding: 120px 0 50px; }
.app-feats-slides .swiper-index { text-align: center; }
.app-feats-slides .swiper-index li { margin: 5px 10px; }
.app-feats-slides .swiper-container { padding: 40px 0 80px; }
}
@media (min-width:1016px){
.app-feats-slides .swiper-slide { -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; }
.app-feats-slides .swiper-slide-prev .image, .app-feats-slides .swiper-slide-next .image { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
.app-feats-slides .swiper-slide-prev .image { -webkit-transform: matrix3d(0.5, 0, -0.9, 0, 0, 1, 0, 0, 0.9, 0, 0.5, 0, 250, 0, -200, 1); -moz-transform: matrix3d(0.5, 0, -0.9, 0, 0, 1, 0, 0, 0.9, 0, 0.5, 0, 250, 0, -200, 1); -ms-transform: matrix3d(0.5, 0, -0.9, 0, 0, 1, 0, 0, 0.9, 0, 0.5, 0, 250, 0, -200, 1); -o-transform: matrix3d(0.5, 0, -0.9, 0, 0, 1, 0, 0, 0.9, 0, 0.5, 0, 250, 0, -200, 1); transform: matrix3d(0.5, 0, -0.9, 0, 0, 1, 0, 0, 0.9, 0, 0.5, 0, 250, 0, -200, 1); }
.app-feats-slides .swiper-slide-next .image { -webkit-transform: matrix3d(0.5, 0, 0.9, 0, 0, 1, 0, 0, -0.9, 0, 0.5, 0, -250, 0, -200, 1); -moz-transform: matrix3d(0.5, 0, 0.9, 0, 0, 1, 0, 0, -0.9, 0, 0.5, 0, -250, 0, -200, 1); -ms-transform: matrix3d(0.5, 0, 0.9, 0, 0, 1, 0, 0, -0.9, 0, 0.5, 0, -250, 0, -200, 1); -o-transform: matrix3d(0.5, 0, 0.9, 0, 0, 1, 0, 0, -0.9, 0, 0.5, 0, -250, 0, -200, 1); transform: matrix3d(0.5, 0, 0.9, 0, 0, 1, 0, 0, -0.9, 0, 0.5, 0, -250, 0, -200, 1); }
.app-feats-slides .swiper-slide .image:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 1; }
.app-feats-slides .swiper-slide-prev .image:before { background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); background: -o-linear-gradient(90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); background: linear-gradient(90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); }
.app-feats-slides .swiper-slide-next .image:before { background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); background: linear-gradient(-90deg, rgba(255, 255, 255, 1)30%, rgba(255, 255, 255, 0)100%); }
}

/** banner app effects **/
.banner-app-effects { padding: 100px 0 150px; }
.banner-app-effects .text .desc { letter-spacing: 0.9px; margin: 40px 0 60px; }
.banner-app-effects .effects-item { height: 250px; box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); }
.banner-app-effects .effects-item .image { position: relative; height: 100%; overflow: hidden; }
.banner-app-effects .effects-item img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; bottom: 0; border: 0; }
.banner-app-effects .effects-item .title { position: absolute; left: 40px; bottom: 30px; width: 220px; font-size: 30px; line-height: 40px; font-weight: bold; letter-spacing: 0.9px; text-align: left; z-index: 2; text-shadow: 1px 1px 2px #666; }
@media (max-width:1015px){
.banner-app-effects { padding: 50px 0; }
.banner-app-effects .effects-item { height: 150px; }
}


/********** screen **********/
/** icons **/
.screen-icon-01 { background: url("../images/product/screen/icon-01.png") center no-repeat; background-image: url("../images/product/screen/icon-01.svg"), none; }
.screen-icon-02 { background: url("../images/product/screen/icon-02.png") center no-repeat; background-image: url("../images/product/screen/icon-02.svg"), none; }
.screen-icon-03 { background: url("../images/product/screen/icon-03.png") center no-repeat; background-image: url("../images/product/screen/icon-03.svg"), none; }
.screen-icon-04 { background: url("../images/product/screen/icon-04.png") center no-repeat; background-image: url("../images/product/screen/icon-04.svg"), none; }
.screen-icon-05 { background: url("../images/product/screen/icon-05.png") center no-repeat; background-image: url("../images/product/screen/icon-05.svg"), none; }
.screen-icon-06 { background: url("../images/product/screen/icon-06.png") center no-repeat; background-image: url("../images/product/screen/icon-06.svg"), none; }
.screen-icon-07 { background: url("../images/product/screen/icon-07.png") center no-repeat; background-image: url("../images/product/screen/icon-07.svg"), none; }
.screen-icon-08 { background: url("../images/product/screen/icon-08.png") center no-repeat; background-image: url("../images/product/screen/icon-08.svg"), none; }
.screen-icon-09 { background: url("../images/product/screen/icon-09.png") center no-repeat; background-image: url("../images/product/screen/icon-09.svg"), none; }
.screen-icon-10 { background: url("../images/product/screen/icon-10.png") center no-repeat; background-image: url("../images/product/screen/icon-10.svg"), none; }
.screen-icon-11 { background: url("../images/product/screen/icon-11.png") center no-repeat; background-image: url("../images/product/screen/icon-11.svg"), none; }
.screen-icon-12 { background: url("../images/product/screen/icon-12.png") center no-repeat; background-image: url("../images/product/screen/icon-12.svg"), none; }

/** top banner **/
.banner-top-screen { background-color: #000; background-image: url("../images/product/screen-banner-top.jpg"); padding: 240px 0; padding: 24vh 0; }
.banner-top-screen .logo { height: 60px; height: 6vh; }
.banner-top-screen .heading { font-size: 36px; font-size: 3.6vh; line-height: 45px; line-height: 4.5vh; font-weight: normal; margin: 35px 0; margin: 3.5vh 0; }
.banner-top-screen .platform i { font-size: 20px; color: #888; opacity: 0.8; }
.banner-top-screen .platform .active i { color: #fff; opacity: 1; }
.banner-top-screen .platform-desc { width: 200px; text-align: left; }
.banner-top-screen .video { margin: 30px 0 0; margin: 3vh 0 0; }

/** introduction **/
.intro-screen { padding: 90px 0; padding: 9vh 0; }
.intro-screen .heading { font-size: 32px; font-size: 3.2vh; line-height: 40px; line-height: 4vh; margin: 0 0 60px; margin: 0 0 6vh; }
.intro-screen .intro-item { background-color: #fff; padding: 8px; margin: 0 0 10px; }
.intro-screen .intro-item:hover { box-shadow: 0 10px 15px rgba(0,0,0,0.5); -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-8px); }
.intro-screen .intro-image { height: 0; padding: 0 0 65%; }
.intro-screen .intro-image-01 { background-image: url("../images/product/screen-intro-01.jpg"); }
.intro-screen .intro-image-02 { background-image: url("../images/product/screen-intro-02.jpg"); }
.intro-screen .intro-image-03 { background-image: url("../images/product/screen-intro-03.jpg"); }
.intro-screen .intro-image-04 { background-image: url("../images/product/screen-intro-04.jpg"); }
.intro-screen .intro-btm { margin: 10px 0 0; }
.intro-screen .intro-icon { width: 75px; height: 75px; margin: 0 auto; }
.intro-screen .intro-desc { font-size: 12px; line-height: 15px; height: 45px; margin: 5px 0 0; overflow: hidden; }

/** modern ui **/
.modern-screen { padding: 90px 0; padding: 9vh 0; }
.modern-screen .heading { font-size: 32px; font-size: 3.2vh; line-height: 40px; line-height: 4vh; margin: 0 0 60px; margin: 0 0 6vh; }
.modern-screen .monitor-box { width: 100%; max-width: 1023px; margin: 0 auto; }
.modern-screen .monitor { background-image: url(../images/product/screen-modern-monitor.png); height: 0; padding: 0 0 71.75%; position: relative; }
.modern-screen .monitor-border { height: 0; padding: 0 0 52.884%; margin: 3.226% 3.03% 15.64%; }
.modern-screen .swiper-container { padding: 0; }
.modern-screen .modern-image { height: 0; padding: 0 0 56.296%; }
.modern-screen .modern-image-01 { background-image: url("../images/product/screen-modern-slide-01.jpg");  }
.modern-screen .modern-image-02 { background-image: url("../images/product/screen-modern-slide-02.jpg");  }

/** features **/
.feats-screen { padding: 90px 0; padding: 9vh 0; }
.feats-screen .heading { font-size: 36px; font-size: 3.6vh; line-height: 45px; line-height: 4.5vh; margin: 0; }
.feats-screen .feats-item { margin: 50px 30px 0; margin: 5vh 2vw 0; }
.feats-screen .feats-icon { width: 80px; height: 80px; margin: 0 auto; }
.feats-screen .feats-desc { margin: 15px 0 0; height: 40px; overflow: hidden; }

/** community **/
.community-screen { padding: 60px 0 90px; padding: 6vh 0 9vh; }
.community-screen .community-icon { height: 60px; }
.community-screen .heading { font-size: 32px; font-size: 3.2vh; line-height: 35px; line-height: 3.5vh; margin: 20px 0 40px; margin: 2vh 0 4vh; }
.community-screen .community-item { margin: 20px 0 0; margin: 2vh 0 0; padding: 35px 25px; padding: 3.5vh 2.5vh; background-color: #fff; }
.community-screen .community-avatar-box { height: 100px; }
.community-screen .community-avatar {  position: absolute; top: 0; border-radius: 50%; border: 3px solid; width: 100px; height: 100px; margin: 0 auto; }
.community-screen .community-avatar-01 { background-image: url("../images/product/screen-community-avatar-01.jpg"); }
.community-screen .community-avatar-02 { background-image: url("../images/product/screen-community-avatar-02.jpg"); }
.community-screen .community-avatar-03 { background-image: url("../images/product/screen-community-avatar-03.jpg"); }
.community-screen .community-comment { margin: 20px 0 0; margin: 2vh 0 0; height: 125px; }
.community-screen .community-comment:before { content: open-quote; }
.community-screen .community-comment:after { content: close-quote; }
.community-screen .community-item:hover { background-color: #ef3062; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.community-screen .community-item:hover .community-avatar { border-width: 0; width: 241%; border-radius: 0; }
.community-screen .community-item:hover .community-name { opacity: 0; }
.community-screen .community-item:hover .community-title { opacity: 0; }
@media (max-width:1215px){
.community-screen .community-comment { height: auto; }
}



@supports (-ms-ime-align:auto) {	/** edge fix **/
.banner-top-home .back .media-list .shape-bottom { z-index: 1; }
.banner-top-home .back .media-list .shape .image { background-image: url("../images/product/home-banner-top-00.jpg"); background-position: center; background-size: cover;}
.banner-top-app .back .media-list .shape-bottom { z-index: 1; }
.banner-top-app .back .media-list .shape .image { background-image: url("../images/product/feat-banner-top-00.jpg"); background-position: center; background-size: cover; }
.banner-top-feat .back .media-list .shape-bottom { z-index: 1; }
.banner-top-feat .back .media-list .shape .image { background-image: url("../images/product/feat-banner-top-00.jpg"); background-position: center; background-size: cover; }
}