﻿/*reset*/
body, div, dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, input:focus, textarea:focus { padding: 0; margin: 0; color: #FFF; }
h1 { font-weight: normal; font-size: 3em; }

a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; }
img { border: 0; }
input, textarea { outline: none; }
    input:focus, textarea:focus { outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify: read-write-plaintext-only; }
ul { list-style: none; margin: 0; padding: 0; }
.hide { display: none; }
/*Header*/
.header { width: 100%; height: 4em; min-height: 4em; z-index: 17; background: none; min-width: 1000px; _width: expression(document.body.clientWidth < 1001? "1000": "auto" ); }
.fixed { position: fixed; top: 1em; left: 0; }
.b_bottom { margin-top: 1em; border-bottom: 1px solid #E7E7E7; }
.header_wrap { position: relative; width: 80%; height: 100%; margin: 0 auto; }
.header1{ margin-top:15px; padding-bottom:10px; border-bottom:1px solid #eee;}
.header a.logo, .header a.logo_grey { position: absolute; top: .3em; left: 3em; text-decoration: none; text-indent: -999em; display: block; width: 200px; height: 62px; }

.header a.logo { background: url(../images/logo1.png) no-repeat; }
.header a.logo.logo-1 { background: url(../images/logo1-1.png) no-repeat; }
.header a.logo.tapslide { background: url(../images/logo1.png) no-repeat; }
.header a.logo.vrecorder { background: url(../images/logo1.png) no-repeat; }
.header a.logo.vidcompact { background: url(../images/logo1.png) no-repeat; }
.header a.logo.filmigo { background: url(../images/logo1.png) no-repeat; }
.header a.logo_grey { background: url(../images/logo4.png) no-repeat; }
.header a.logo_grey.logo_grey-1 { background: url(../images/logo4-1.png) no-repeat; }

.header .nav { position: absolute; top: .6em; right: 1em; display: block; z-index: 18; }
.header .nav._grey a{ color:#80787b; border-right-color:#80787b}
.header .nav._grey a:hover{ color:#fc4c89}
.header .nav ul li{ float:left; position:relative; padding:10px 0;}
.header .nav ul li .drop{ position:absolute; transition:all 0.3s;  width:80px; padding:0 10px; left:50%; background:#fff4f0; border-radius:5px; top:100px; opacity:0; margin-left:-50px; text-align:center}
.header .nav ul li.on .drop{ top:40px; opacity:1;}
.header .nav ul li .drop i{ position:absolute; top:-6px; left:50%; margin-left:-10px; width:16px; height:6px; background:url(../images/icon4.png) no-repeat top center;}
.header .nav ul li .drop a{ border-right:none;color:#333;font-size:0.8em; display:block; line-height:2.5em; border-bottom:1px solid #fff; height:auto; display:block; padding:0; white-space:nowrap; }
.header .nav ul li .drop a:last-child{ border-bottom:none;}
.header .nav ul li:last-child a{ border-right:0;}
    .header .nav a { text-decoration: none; font-size: 1em; color: #fff; padding: 0 1.2em; border-right: 2px solid #fff; line-height: 1em; height: 1em; display: inline-block; }

        .header .nav a img{ margin-left: .2em; }

#navList_bar { border-right: none; }
/*Menu*/
#menu { position: fixed; top: 50%; right: 2.5em; width: 2em; z-index: 70; padding: 0; margin-top: -5em; -webkit-transition: opacity 0.6s 0s; -moz-transition: opacity 0.6s 0s; -ms-transition: opacity 0.6s 0s; -o-transition: opacity 0.6s 0s; transition: opacity 0.6s 0s; }

    #menu li { margin: 1em; background: transparent; border: 1px solid #fff; -webkit-border-radius: .6em; -mos-border-radius: .6em; -o-border-radius: .6em; border-radius: .6em; height: .6em; width: .6em; text-indent: 999em; -webkit-transition: All 0.5s 0s; -moz-transition: All 0.5s 0s; -ms-transition: All 0.5s 0s; -o-transition: All 0.5s 0s; transition: All 0.5s 0s; -webkit-transition: transform 0.5s ease 0s, background-color 0.5s ease 0s; -moz-transition: transform 0.5s ease 0s, background-color 0.5s ease 0s; -ms-transition: transform 0.5s ease 0s, background-color 0.5s ease 0s; -o-transition: transform 0.5s ease 0s, background-color 0.5s ease 0s; transition: transform 0.5s ease 0s, background-color 0.5s ease 0s; }
        #menu li.grey { border: 1px solid #6C6C6C; background: transparent; }
            #menu li.grey.active { border: 1px solid #6C6C6C; background: #6C6C6C; filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8; -webkit-transition: All 0.5s 0s; -moz-transition: All 0.5s 0s; -ms-transition: All 0.5s 0s; -o-transition: All 0.5s 0s; transition: All 0.5s 0s; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
        #menu li.active { border: 1px solid #fff; background: #fff; filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8; -webkit-transition: All 0.5s 0s; -moz-transition: All 0.5s 0s; -ms-transition: All 0.5s 0s; -o-transition: All 0.5s 0s; transition: All 0.5s 0s; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
        #menu li a { text-decoration: none; outline: none; }

        #menu li a, #menu li.active a { display: block; }
/*Section*/
#fullpage { width: 100%; min-width: 1004px; _width: expression(document.body.clientWidth < 1005? "1004px": "auto" ); min-height: 600px; _height: expression(document.body.clientHeight < 601? "600px": "auto" ); }

.section { width: 100%; position: relative; text-align: center; overflow: hidden; }

    .section .logo_title,
    .section .logo_title_cn,
    .section .logo_text,
    .section .logo_text_cn { filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); transition: all 1s; }
    .active .logo_title,
    .section .logo_title_cn,
    .active .logo_text,
    .section .logo_text_cn { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); transition-delay: 0.7s; }
    .section .logo_title { width: 14em; margin: 0 auto 0.7em auto; }

    .section .logo_title_cn { margin: 0 auto 0.7em auto; }
    .section .logo_text { width: 16.5625em; height: 1.9375em; margin: 0 auto 1.25em auto; }
    .section .logo_text_cn { width: 9.625em; height: 2em; margin: 0 auto 1.25em auto; }
    .section p.grey { color: #555; }
.container .row01 { position: absolute; top: 16%; left: 0; width: 100%; z-index: 1000; }
.container .row { position: absolute; top: 12%; left: 0; width: 100%; z-index: 1000; }
#watch-video { display: block; position: absolute; left: 50%; margin-left: -81px; bottom: 120px; }
#section1 { background: url(../images/bg1.jpg) no-repeat center center; background-size: cover; }
#section2 { background: #f2605d; }
#section3 { background: url(../images/bg3.jpg) no-repeat center center; background-size: cover; }
#section4 { background: #fb9066; }
#section5 { background: #fb9066; }

.section .content, .section .content_cn { margin-top: .5em; font-size: 1.8em; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); transition: all 1s; }
.active .content, .active .content_cn { filter: alpha(opacity=1); -moz-opacity: 1; opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); transition-delay: 0.7s; }
div.homebg01, div.homebg02, div.homebg03, div.homebg04, div.homebg05,div.homebg06,div.homebg_tapslide,div.homebg_vrecorder,div.homebg_vidcompact { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 1s; }
div.homebg01 { background: url(../images/holabg01.png) no-repeat; background-position: center 20%; background-size: auto 50%; }

div.homebg02 { background: url(../images/holabg02.png) no-repeat; background-position: center 20%; background-size: 35% auto; }

div.homebg03 { background: url(../images/holabg03.png) no-repeat; background-position: center 20%; background-size: 30% auto; }
div.homebg04 { background: url(../images/holabg04.png) no-repeat; background-position: center 20%; background-size: 40% auto; }
div.homebg05 { background: url(../images/filmigo_holabg04.png) no-repeat; background-position: center 20%; background-size: 40% auto; }
div.homebg06 { background: url(../images/holabg04.png) no-repeat; background-position: center 20%; background-size: 40% auto; }

div.homebg_tapslide { background: url(../images/holabg04.png) no-repeat; background-position: center 20%; background-size: 40% auto; }
div.homebg_vrecorder { background: url(../images/holabg04.png) no-repeat; background-position: center 20%; background-size: 40% auto; }
div.homebg_vidcompact { background: url(../images/holabg04.png) no-repeat; background-position: center 20%; background-size: 40% auto; }

.active div.homebg01, .active div.homebg02, .active div.homebg03{ background-position: center 70%; opacity: 1; transition-delay: 0.7s; }
 .active div.homebg04 { background-position: center 60%; opacity: 1; transition-delay: 0.7s; }
 .active div.homebg05 { background-position: center 60%; opacity: 1; transition-delay: 0.7s; }
 .active div.homebg06 { background-position: center 60%; opacity: 1; transition-delay: 0.7s; }
  .active div.homebg_tapslide { background-position: center 60%; opacity: 1; transition-delay: 0.7s; }
  .active div.homebg_vrecorder { background-position: center 60%; opacity: 1; transition-delay: 0.7s; }
   .active div.homebg_vidcompact { background-position: center 60%; opacity: 1; transition-delay: 0.7s; }
/*Button*/
.download_button { position: absolute; bottom: 0px; left: 0; width: 100%; text-align: center; }

.download_button { z-index: 1004; }
    .download_button a.download { background: url(../images/icon3.png) no-repeat 15px center; padding-left: 40px; }
    .download_button a { display: inline-block; color: #fff; margin: 0 5px; height: 40px; padding: 0 20px; line-height: 40px; font-size: 15px; border: 1px solid #fff; border: 1px solid rgba(255, 255, 255, 0.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
        .download_button a:hover { background: #fff; color: #000; }

    .download_button .span2 { margin-left: 30px; }
    .download_button a.app_icon { padding: 0; width: 44px; height: 44px; margin-left: 7px; vertical-align: middle; border-radius: 44px; position:relative; }
    .download_button a.app_icon label{ display:none;}
    .download_button a.app_icon i{ display:block; position:absolute; bottom:53px; left:50%; width:15px; height:15px; background:#fff; margin-left:-7px; border-radius:2px; transform:rotateZ(45deg);-o-transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);-moz-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg); box-shadow:1px 1px 1px #666;-webkit-box-shadow:1px 1px 1px #666;-moz-box-shadow:1px 1px 1px #666;-ms-box-shadow:1px 1px 1px #666;}
    .span_alt{ position:absolute; bottom:60px; left:50%; height:30px;box-shadow:1px 1px 1px #666;-webkit-box-shadow:1px 1px 1px #666;-moz-box-shadow:1px 1px 1px #666;-ms-box-shadow:1px 1px 1px #666; line-height:30px; background:#fff;}
    .span_alt1{ width:180px; color:#211e1e;font-size:12px; margin-left:-90px; border-radius:5px;}
    .download_button a.download:hover { background: url(../images/icon3-1.png) no-repeat 15px center #fff; }
    .download_button a.app_icon img { vertical-align: middle; }
.icon_sina { background: url(../images/icon1.png) no-repeat center center; }
.icon_5 { background: url(../images/icon5.png) no-repeat center center; }
.download_button a.icon_5:hover { background: url(../images/icon5.png) no-repeat center center rgba(255,255,255,0.5); }

.icon_6 { background: url(../images/icon6.png) no-repeat center center; }
.download_button a.icon_6:hover { background: url(../images/icon6.png) no-repeat center center rgba(255,255,255,0.5); }

.icon_7 { background: url(../images/icon7.png) no-repeat center center; }
.download_button a.icon_7:hover { background: url(../images/icon7.png) no-repeat center center rgba(255,255,255,0.5); }

.download_button a.icon_sina:hover { background: url(../images/icon1.png) no-repeat center center rgba(255,255,255,0.5); }
.icon_weixin { background: url(../images/icon2.png) no-repeat center center; cursor:pointer; }
.download_button a.icon_weixin:hover { background: url(../images/icon2.png) no-repeat center center rgba(255,255,255,0.5); }

.mask { display: none; position: fixed; top: 0; left: 0; z-index: 1005; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); }
.code_box { position: fixed; width: 380px; height: 380px; left: 50%; top: 40%; margin-left: -190px; margin-top: -190px; background: #fff; z-index: 1006; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; transition: all 1s; }
    .code_box.show { top: 50%; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; }
    .code_box.show_hide { top: 60%; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; }
    .code_box .download_code { margin: 40px 40px 0; }
    .code_box p { color: #888; text-align: center; font-size: 14px; line-height: 30px; }
#close-code { position: absolute; right: 8px; top: 8px; }
/*about us*/
.about { width: 900px; margin: .5em auto 0; }
    .about .banner { width: 900px; height: 244px; margin: 0 auto; }
    .about h1 { font-size: 34px; color: #333; margin: .5em 0 .5em .9em; }
    .about p { line-height: 2em; margin: 0 0 0 2em; color: #666; font-size: 1em; }
    .about .mail { margin: 0 0 2em 2.1em; }
        .about .mail a { color: #008BE3; text-decoration: underline; }
    .about p.m20 { margin: 20px .5em 20px 2em; }
/*privacy*/
.privacy { width: 800px; margin: .5em auto 0 auto; }
    .privacy h1 { font-size: 34px; color: #333; margin: .5em 0 .5em .9em; }
    .privacy p { line-height: 2em; margin: 0 0 0 2em; color: #666; font-size: 1em; }
        .privacy p.m20 { margin: 20px .5em 20px 2em; }
        .privacy p.mt0 { margin-bottom: 0; }
    .privacy .mail { margin-bottom: 20px; }
        .privacy .mail a { color: #008BE3; text-decoration: underline; }
        .mainer{ width:80%; margin:0 auto; max-width:800px; min-width:490px; margin-top:50px  }
        .mainer p{ color:#514e4f; font-size:1em; line-height:1.8em;}
        .mainer h3{ color:#333; padding:1em 0;padding-top:1.5em; font-size:1.5em;font-weight:100;}
        .mainer h5{ color:#333; padding:1em 0;padding-top:1.5em; font-size:1.1em; font-weight:100;}
        .mainer span{color:#797878;}
             .mainer label{ color:#000;}
             .mainer label a{ color:#3d64f7; text-decoration:underline;}
             
             
             

/*��ҳ*/
.main {
	position:fixed;
	width:100%;
	left:0;
	top:0;
	bottom:1rem;
	background:url(../images/bg.png) center center no-repeat;
	background-size:100% 100%;
}
.footer {
	background:url(../images/footer_03.png) repeat;
	position:fixed;
	height:1.2rem;
	width:100%;
	left:0;
	bottom:0;
}
.download {
	background:#fc5730;
	padding:0.1rem 0.3rem;
	margin-top:0.3rem;
}