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


/*win*/
.total_title{width:1000px;margin:0 auto;font-size:36px;height:96px;line-height:96px;}
.arrived_banner{background:url(banner_bg.jpg) no-repeat;background-size:cover;padding:80px 0 60px;}
.arrived_banner .container{text-align:center;color:#FFF;}
.arrived_banner .sub{font-size:30px;margin-bottom:30px;position:relative;}
.arrived_banner .sub span{background:#d74d37;color:#FFF;border-radius:4px;position:absolute;right:50%;top:0;display:block;font-size:20px;padding:0 4px;margin-right:-200px;margin-top:-20px;}
.arrived_banner .sub span:after{content:'';display:block;position:absolute;left:-16px;top:10px;width: 0;height: 0;border-style: solid;border-width: 0 0 15px 20px;border-color: transparent transparent #d74d37 transparent;}
.arrived_banner .title{font-size:48px;margin-bottom:30px;line-height:48px;font-weight:200;}

@media (max-width:479px){
	.arrived_banner .sub span{right:65%;top:-15px;}
	.arrived_banner .title{font-size:36px;line-height:36px;}	
}

.arrived_banner .cont_one{margin-top:60px;}
.arrived_banner .cont_one p{background:url(editing_icon.png) no-repeat center top;padding-top:80px;line-height:18px;font-size:14px;margin-bottom:50px;}
.arrived_banner .cont_one p.interface{background-position:center -245px;}
.arrived_banner .cont_one p.scrolling{background-position:center -122px;}
.arrived_banner .cont_one p.fourk{background-position:center -370px;}
.arrived_banner .cont_one .lft,.arrived_banner .cont_one .mid,.arrived_banner .cont_one .rgt{display:inline-block;vertical-align:top;}
.arrived_banner .cont_one .mid{margin:0 30px;}
.arrived_banner .cont_one .mid a{display:block;width:450px;height:250px;border:4px solid #FFF;position:relative;}
.arrived_banner .cont_one .mid span{background:url(play_btn.png) no-repeat;width:88px;height:87px;display:block;position:absolute;top:50%;left:50%;margin-left:-44px;margin-top:-44px;opacity:0.8;}
.arrived_banner .cont_one .mid span:hover{opacity:1;}

@media (max-width:479px){
	.arrived_banner .cont_one .mid a{width:380px;height:214px;}
	.arrived_banner .cont_one .mid{margin:0;}
}
@media (max-width:380px){
	.arrived_banner .cont_one .mid a{width:300px;height:168px;}
	.arrived_banner .cont_one .mid{margin:0;}
}

.arrived_banner .download_btns{margin-top:20px;text-align:center;}
.arrived_banner .download_btns a.free_btn{background:#d94e37;color:#FFF;border-radius:50px;padding:10px 50px;font-size:18px;text-decoration:none;}
.arrived_banner .download_btns a.free_btn:hover{background:#c84e37;}
.arrived_banner .download_btns a.upgrade_btn{color:#FFF;margin-left:30px;text-decoration:underline;}
@media (max-width:479px){
	.arrived_banner .download_btns a.free_btn{font-size:18px;padding:10px 30px;}
	.arrived_banner .download_btns a.upgrade_btn{font-size:14px;}
}

/*mac*/
.update_banner{background:url(banner_bg_mac.jpg) no-repeat;height:561px;padding:80px 0 20px;}
.update_banner .container{text-align:center;color:#FFF;}
.update_banner .container .sub{font-size:30px;margin-bottom:30px;position:relative;}
.update_banner .container .sub span{background:#d74d37;color:#FFF;border-radius:4px;position:absolute;right:50%;top:0;display:block;font-size:20px;padding:0 4px;margin-right:-200px;margin-top:-20px;}
.update_banner .sub span:after{content:'';display:block;position:absolute;left:-16px;top:10px;width: 0;height: 0;border-style: solid;border-width: 0 0 15px 20px;border-color: transparent transparent #d74d37 transparent;}
.update_banner .title{font-size:48px;margin-bottom:30px;line-height:48px;font-weight:200;}
.update_banner .cont_one{margin-top:120px;}
.update_banner .cont_one p{background:url(editing_icon_mac.png) no-repeat;display:inline-block;vertical-align:top;padding-top:80px;}
.update_banner .cont_one p.scrolling{background-position:center 0;}
.update_banner .cont_one p.screen{background-position:center -153px;margin-left:80px;}
.update_banner .cont_one p.message{background-position:center -305px;margin-left:50px;}

.update_banner .download_btns{margin-top:80px;text-align:center;}
.update_banner .download_btns a.free_btn{background:#d94e37;color:#FFF;border-radius:50px;padding:10px 50px;font-size:18px;text-decoration:none;}
.update_banner .download_btns a.free_btn:hover{background:#c84e37;}
.update_banner .download_btns a.upgrade_btn{color:#FFF;margin-left:30px;text-decoration:underline;}
@media (max-width:479px){
	.update_banner .download_btns a.free_btn{font-size:18px;}
	.update_banner .download_btns a.upgrade_btn{font-size:14px;}
}


.features_silder h2.title{font-size:36px;letter-spacing:5px;text-align:center;color:#2b97a1;margin-bottom:20px;}
.features_silder p.tip{color:#2b97a1;text-align:center;margin-bottom:50px;}
@media (max-width:479px){
	.features_silder h2.title{font-size:24px;}		
}
.features_silder{background:#eef8f9;padding:60px 0;overflow:hidden;}
@media (max-width:479px){
	.features_silder{padding:30px 0;}
}
.features_silder .download_pack{margin-top:40px;}
.features_silder .download_pack a{background:#d94e37;color:#FFF;text-align:center;display:inline-block;border-radius:50px;padding:10px 20px;text-decoration:none;}
.features_silder .download_pack a:hover{background:#c84e37;}

.features_silder .flexslider{position:relative;text-align:center;}
.features_silder .flexslider .play_w .video-demo {height:430px;position:relative;}
.features_silder .flexslider .play_w{width:764px;margin:0 auto;height:430px;position:relative;}
@media (max-width:769px){
		.features_silder .flexslider .play_w{width:480px;height:270px;}
		.features_silder .flexslider .play_w .video-demo{height:270px;}
}
@media (max-width:479px){
		.features_silder .flexslider .play_w{width:380px;height:214px;}
		.features_silder .flexslider .play_w .video-demo{height:214px;}	
}
@media (max-width:380px){
		.features_silder .flexslider .play_w{width:310px;height:174px;}	
		.features_silder .flexslider .play_w .video-demo{height:174px;}
}
.features_silder .flexslider .play_btn{display:block;width:88px;height:87px;background:url(play_btn.png) no-repeat 0 -87px;position:absolute;left:50%;top:50%;margin-left:-44px;margin-top:-44px;z-index:9;}
.features_silder .flexslider .play_btn:hover{background-position:0 0;}
.features_silder .flexslider img{width:100%;}
.features_silder .flex-control-nav,.features_silder .flex-direction-nav{display:none;}


.upgrade_tips{background:#FFF;padding:85px 0;}
.upgrade_tips h2{font-size:36px;letter-spacing:5px;text-align:center;color:#259fab;margin-bottom:100px;}
@media (max-width:479px){
	.upgrade_tips h2{font-size:24px;margin-bottom:30px;}	
}
.upgrade_tips table td{padding-bottom:10px;}
.upgrade_tips table td a{display:block;padding-left:15px;padding-right:30px;color:#333;position:relative;height:30px;}
.upgrade_tips table td a:after{content:'';width:6px;height:6px;border-radius:50%;background:#259fab;display:block;position:absolute;left:0;top:10px;}

.version_history{background:#f5f5f5;padding:85px 0;}
.version_history h2{font-size:36px;letter-spacing:5px;text-align:center;color:#333;margin-bottom:100px;}
@media (max-width:479px){
	.version_history h2{font-size:24px;margin-bottom:30px;}	
	.upgrade_tips table td{display:block;padding-bottom:30px;}
}
.version_history table td{vertical-align:top;padding-bottom:40px;}
.version_history table td.version{font-weight:700;padding-right:100px;font-size:24px;}
@media (max-width:479px){
	.version_history table td{padding-bottom:20px;}
	.version_history table td.version{padding-right:30px;}
}
.version_history .more_btn{text-align:right;}
.version_history .more_btn a{color:#259fab;}

/*spring effects*/
.spring_effect{background:#72b09d url(spring_ld.png) no-repeat top center;text-align:center;padding:560px 0 80px;}
.spring_effect h2{font-size:56px;color:#FFF;font-weight:bold;margin-bottom:40px;line-height:60px;}
.spring_effect .spring_share a{color:#FFF;background:#da4e37;display:inline-block;border-radius:50px;padding:10px 30px;}



/****************************************************
*  project: filmora 7.5 version updates             *
*  description: with responsive layout redesign     *
*  author: mazq@wondershare.cn                      *
*  update: 160719                                   *
****************************************************/

/** common **/
.new { display: inline-block; width: 45px; height: 18px; background-image: url("icon-new.png"); }
section.standard { background-repeat: no-repeat; background-position: center; background-size: cover; color: #fff; text-align: center; }
section.standard .action a:not(.unload) { display: inline-block; width: 290px; height: 45px; line-height: 45px; border-radius: 45px; font-size: 18px; text-decoration: none; color: #fff; background-color: #d94e37; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }
section.standard .action a:hover { background-color: #c84e37; box-shadow: 1px 1px 1px transparent; }

/** banner **/
.banner { height: 550px; background-image: url("banner_bg.jpg"); }
.banner .title { font-size: 42px; font-weight: 300; line-height: 50px; padding: 60px 0 30px; }
.banner .new { vertical-align: 10px; }
.banner .feats li { padding: 10px 60px; text-align: center; }
.banner .icon { position: relative; width: 80px; height: 80px; display: inline-block; background-image: url("feats-75.png"); background-repeat: no-repeat; }
.banner .icon::before { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 70px; border: solid 5px rgba(255, 255, 255, 0.5); top: 0; left: 0; right: 0; margin: 0 auto; -webkit-transition: border-color 0.5s linear; -moz-transition: border-color 0.5s linear; -ms-transition: border-color 0.5s linear; -o-transition: border-color 0.5s linear; transition: border-color 0.5s linear; }
.banner .feats li:hover .icon::before { border-color: rgba(255, 255, 255, 1); }
.banner .feat-1 { background-position: 0 0; }
.banner .feat-2 { background-position: 0 -80px; }
.banner .feat-3 { background-position: 0 -160px; }
.banner .feat-4 { background-position: 0 -240px; }
.banner .text { font-size: 16px; line-height: 20px; height: 40px; margin-top: 10px; overflow: hidden; }
.banner .play_btn { display: block; width: 450px; height: 250px; border: 4px solid #FFF; position: relative; margin: 25px 1px; }
.banner .play_btn span { background: url("play_btn.png") no-repeat; width: 88px; height: 87px; display: block; position: absolute; top: 50%; left: 50%; margin-left: -44px; margin-top: -44px; opacity: 0.8; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; }
.banner .play_btn:hover span { opacity: 1; }
.banner .action { padding-top: 10px; }
@media (min-width: 1000px) {
.banner .grid { display: inline-block; float: left; }
.banner .mid { width: 460px; }
.banner .feats { width: 270px; }
.banner .rgt { float: right; }
}

/** effects store **/
.effects { height: 530px; background-image: url("effects-bg.jpg"); }
.effects .action { padding-top: 390px; }



/****************************************************
*  project: site optimization for mobile device     *
*  description: break point 768px/1000px            *
*  author: mazq@wondershare.cn                      *
*  update: 160719                                   *
*****************************************************/

/* [container]/{break point} */
/* [308] -> {480} <- [460] -> {768} <- [750] --> {1000} <-- [1000] */

@media (max-width: 767px) {

/** banner **/
.banner { height: auto; }
.banner .feats li { display: inline-block; padding: 10px 20px; width: 110px; }
.banner .mid { padding-top: 20px; }
.banner .play_btn { width: 300px; height: 167px; margin: 0; }
.banner .play_btn span { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
.banner .action { padding: 30px 0; }

/** effects **/
.effects { height: 250px; }
.effects .action { padding-top: 180px; }

/** tips **/
.upgrade_tips { padding: 40px 0; }
.upgrade_tips table td { padding-bottom: 0; }
.upgrade_tips table td a { padding: 0; height: auto; }
.upgrade_tips table td a::after { left: -15px; }

.version_history { padding: 40px 0; }
.version_history td { display: block; }
.version_history td:not(.version) { padding-bottom: 20px; }
.version_history table td.version { padding: 0 0 10px; }
}