/* CSS Document */
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div{font:400 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial";color:#333;}
html{font:400 100% "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial"; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; line-height:1.2; color:#333;}

.wrap .pbc_dl_btn{ display:block; text-align:center; color:#FFF; background-color:#1eac1a; border-radius:5px;}
.wrap .pbc_dl_btnn{ display:block; text-align:center; color:#FFF; background-color:#ff8501; border-radius:5px;}
.pbc_dl_btn:hover{ text-decoration:none; background-color:#2ac625;}

.wrap{overflow:hidden;}
.mcc_banner{ background:url(../img/banner_ov.jpg) top center no-repeat; background-size: cover; overflow:hidden; position:relative;}
.mcc_banner_img{ display:block; position:absolute; top:0; left:50%; margin-left:-720px; z-index:1;}


.banner_cont h1{ margin:280px auto 20px auto;}
.banner_cont>p{ width:713px; margin:0 auto; line-height:1.556; color:#303133;}
.banner_cont>a{ width:250px; height:58px; margin:25px auto 60px auto; font-size:24px; line-height:58px; box-shadow:4px 4px 20px 0 rgba(3,71,1,0.5);}
.pro_funs{
	position:relative;
	margin-top:100px;
}
.pro_funs h2{ font-size:42px; font-weight:300;}
.pro_funs_text{ width:500px;}
.pro_funs_text p{ font-size:18px; line-height:1.875; font-weight:300; color:#666; margin-top:30px;}
.pro_funs1 figure,.pro_funs3 figure{ position:absolute; left:540px; top:0;}
.pro_funs2{ width:100%; height:625px; margin-top:100px; background:url(../img/pro_funs2_bg.jpg) center no-repeat; background-size:cover;}
.pro_funs2 h2{ margin-top:110px;}
.pro_funs4{ width:100%; height:600px; background:url(../img/pro_funs4_bg.jpg) center no-repeat; background-size:cover; overflow:hidden;}
.pro_funs4 .pro_funs_text{ width:840px; margin:110px auto 0 auto;}
.pro_funs5 figure{position:absolute; top:-30px; left:0; margin-left:-150px;}
.pro_funs5 .pro_funs_text{ margin:0 auto 150px auto;}
.wrap .pro_funs6{ width:100%; height:685px; background-color:#f2f2f2; margin-top:-65px;}
.pro_funs6 .pro_funs_text{ width:550px;}
.wrap .pro_funs6 figure{ position:absolute; top:120px; left:600px;}
.pro_details{ margin:60px auto;}
.pro_details_cont{ width:580px; padding-right:30px; border-right:1px solid #dcdcdc;}
.pro_details_text{ width:450px;}
.pro_details_text h3{ font-size:40px; font-weight:300; margin-top:10px;} 
.pro_details_dl{ width:200px; margin-left:50px;}
.pro_details_dl>a{ height:50px; margin:10px auto; font-size:18px; line-height:50px;}
.pro_details_dl>p{ color:#808080;}

.pro_funs_img{ opacity:0; transform: translateX(60%); -webkit-transform: translateX(60%); transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;}
.pro_funs_an .pro_funs_img{ opacity:1; transform:translateX(0); -webkit-transform:translateX(0);}
.clear_bug{width:566px; height:400px; position:relative;}
.clear_bug_bg{ width:566px; height:323px; background:url(../img/surface-pad.png) no-repeat;}
.bug_find{ width:155px; height:155px; border-radius:155px; border:8px solid #303030; position:absolute; left:0; top:0; background-color:#fff; box-shadow:0 0 22px 0 #5583cb; overflow:hidden; transform:translate(0); -webkit-transform:translate(0);}
.mac_book_imgs{ position:absolute; top:10px; left:63px;}

.pro_funs_an .bug_find{ animation:bug_find 12s linear infinite; -webkit-animation:bug_find 12s linear infinite;}
.pro_funs_an .mac_book_imgs{ animation:bug_find_imgs 12s linear infinite; -webkit-animation:bug_find_imgs 12s linear infinite;}

@keyframes bug_find{
	0%{transform:translate(50px,0);}
	10%,20%{transform:translate(170px,0);}
	30%{transform:translate(340px,0);}
	40%,50%{transform:translate(340px,65px);}
	60%{transform:translate(340px,130px);}
	70%,80%{transform:translate(170px,130px);}
	90%{transform:translate(50px,130px);}
	100%{transform:translate(50px,65px);}
}
@-webkit-keyframes bug_find{
	0%{-webkit-transform:translate(50px,0);}
	10%,20%{-webkit-transform:translate(170px,0);}
	30%{-webkit-transform:translate(340px,0);}
	40%,50%{-webkit-transform:translate(340px,65px);}
	60%{-webkit-transform:translate(340px,130px);}
	70%,80%{-webkit-transform:translate(170px,130px);}
	90%{-webkit-transform:translate(50px,130px);}
	100%{-webkit-transform:translate(50px,65px);}
}

@keyframes bug_find_imgs{
	0%{transform:translate(-50px,0);}
	10%,20%{transform:translate(-170px,0);}
	30%{transform:translate(-340px,0);}
	40%,50%{transform:translate(-340px,-65px);}
	60%{transform:translate(-340px,-130px);}
	70%,80%{transform:translate(-170px,-130px);}
	90%{transform:translate(-50px,-130px);}
	100%{transform:translate(-50px,-65px);}
}

@-webkit-keyframes bug_find_imgs{
	0%{-webkit-transform:translate(-50px,0);}
	10%,20%{-webkit-transform:translate(-170px,0);}
	30%{-webkit-transform:translate(-340px,0);}
	40%,50%{-webkit-transform:translate(-340px,-65px);}
	60%{-webkit-transform:translate(-340px,-130px);}
	70%,80%{-webkit-transform:translate(-170px,-130px);}
	90%{-webkit-transform:translate(-50px,-130px);}
	100%{-webkit-transform:translate(-50px,-65px);}
}

.bug_find_line{ width:160px; position:absolute; top:0; left:0; display:block; z-index:9; border-top:5px solid #5583cb; transform:translateY(155px); -webkit-transform:translateY(155px);}
.bug_find_extender{ width:100%; height:0; position:absolute; display:block; z-index:99; overflow:hidden;}
.bug_debris{ position:absolute; top:50px; left:50px; opacity:0;}
.bug_find_extender img{position:absolute; top:42px; left:50px;}

.pro_funs_an .bug_find_line{animation:bug_find_line 4s linear infinite forwards; -webkit-animation:bug_find_line 4s linear infinite forwards;}
.pro_funs_an .bug_find_extender{animation:bug_find_extender 4s linear forwards infinite; -webkit-animation:bug_find_extender 4s linear forwards infinite;}
.pro_funs_an .bug_debris{animation:bug_debris 4s linear infinite forwards; -webkit-animation:bug_debris 4s linear infinite forwards;}

@keyframes bug_find_line{
0%,30%{ transform:translateY(155px);}
50%,100%{transform:translateY(-10px);}	
}
@-webkit-keyframes bug_find_line{
0%,30%{-webkit-transform:translateY(155px);}
50%,100%{-webkit-transform:translateY(-10px);}	
}
@keyframes bug_find_extender{
0%,12%{height:100%; opacity:0;}
13%,30%{ height:100%; opacity:1;}
50%,100%{ height:0px; opacity:1;}
}
@-webkit-keyframes bug_find_extender{
0%,12%{height:100%; opacity:0;}
13%,30%{ height:100%; opacity:1;}
50%,100%{ height:0px; opacity:1;}
}
@keyframes bug_debris{
	0%,10%{opacity:0;}
	30%,50%{opacity:1;}
	55%,100%{ opacity:0;}
}

@-webkit-keyframes bug_debris{
	0%,10%{opacity:0;}
	30%,50%{opacity:1;}
	55%,100%{ opacity:0;}
}

.pro_funs_img2 img{ position:absolute; left:0; top:0; opacity:0; transform:translateX(20%); -webkit-transform:translateX(20%); transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;}
.pro_funs_an .pro_funs6_imgs{opacity:1; transform:translateX(0); -webkit-transform:translateX(0);}
.security_imgs{ width:529px; height:583px; display:block; background:url(../img/screenshot3_bg.png) no-repeat;}
.security_imgs{ position:absolute; top:0; left:0; opacity:0; transform:scale(0); -webkit-transform:scale(0);}
.macc_security img{ position:absolute; top:80px; left:-10px;}
.security_imgs{ animation:macc_security 4s ease infinite; -webkit-animation:macc_security 4s ease infinite;}
@keyframes macc_security{
	0%{ transform:scale(0); opacity:0;}
	50%{ transform:scale(1); opacity:1;}
	100%{ transform:scale(1.2); opacity:0;}
}
@-webkit-keyframes macc_security{
	0%{ -webkit-transform:scale(0); opacity:0;}
	50%{ -webkit-transform:scale(1); opacity:1;}
	100%{ -webkit-transform:scale(1.2); opacity:0;}
}

/*resource**/
.resource_banner_text>p{ line-height:1.714;}
.resource_banner_text>a{ width:280px; height:52px; display:block; border-radius:5px; text-align:center; color:#1b6ac7; border:1px solid #1b6ac7; font-size:14px; line-height:52px; margin:30px auto 0 auto;}
.resource_banner_text>a img, .resource_fun_btn img{ vertical-align:middle; margin-right:10px;}
.resource_banner_text>a:hover{ text-decoration:none; background-color:#e5f1fe;}
.resource_fun{ width:100%; height:1050px; background:#f6f6f6 url(../img/resource_bg.png) top right no-repeat; margin:110px auto 90px auto; position:relative;}
.resource_fun:before,.resource_fun:after{ content:""; display:block; width:57px; height:23px; position:absolute; left:50%; margin-left:-28px;}
.resource_fun:before{background:url(../img/arrow.png) no-repeat;  top:0;}
.resource_fun:after{ background:url(../img/arrow2.png) no-repeat; bottom:-23px;}
 
.resource_fun_text h3{ font-size:20px;}
.resource_fun_text p,.resource_fun_text li{ font-size:14px; line-height:1.714;}
.resource_fun_text p{ margin-top:20px;}
.resource_fun_text ul li{ margin-top:30px; margin-left:20px; list-style: disc;}
.resource_fun_text b{ font-weight: bold;}

.resource_fun_btn{ margin-top:35px;}
.resource_fun_btn>a{ width:222px; height:64px; display:block; border-radius:5px; background-color:#5584d5; line-height:64px; text-align:center; font-size:18px; color:#fff;}
.resource_fun_btn>a:hover{ text-decoration:none; background-color:#6594e3;}
.resource_fun_btn span{ width:222px; float:left; margin:25px 0 0 12px;}

.resource_fun_effect{ width:440px; height:520px; margin:40px 0 0 30px; position:relative;}
.resource_fun_effect a{display:block; position: absolute; text-align:center; color:#000;}
.resource_fun_effect a span{ display:block; font-size:14px;}
.resource_fun_effect a img{ margin-top:35px;}
.resource_fun_effect p{ transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}
.resource_fun_effect1{width:184px; height:184px; border-radius:184px; background-color:#f8c5c5; left:40px; top:0; animation:cont_block1 10s linear infinite alternate; -webkit-animation:cont_block1 10s linear infinite alternate;}
.resource_fun_effect2{width:196px; height:196px; border-radius:196px; background-color:#c6ebe7; left:210px; top:130px; animation:cont_block2 10s linear infinite alternate; -webkit-animation:cont_block2 10s linear infinite alternate;}
.resource_fun_effect3{width:200px; height:200px; border-radius:200px; background-color:#cadaed; left:0; top:200px; animation:cont_block3 10s linear infinite alternate; -webkit-animation:cont_block3 10s linear infinite alternate;}
.resource_fun_effect4{width:176px; height:176px; border-radius:176px; background-color:#f6e7d0; left:170px; top:330px; animation:cont_block4 10s linear infinite alternate; -webkit-animation:cont_block4 10s linear infinite alternate;}
.resource_fun_effect p:hover{ transform:scale(0.9); -webkit-transform:scale(0.9);}
.resource_fun_effect a:hover{ text-decoration:none;}

@keyframes cont_block1{
	0%{ transform:translate(0);}
	25%{ transform: translate(20px,20px);}
	50%{ transform:translate(10px,20px);}
	75%{ transform:translate(-20px,20px);}
	100%{transform:translate(20px,-20px);}
}
@-webkit-keyframes cont_block1{
	0%{-webkit-transform:translate(0);}
	25%{ -webkit-transform: translate(20px,20px);}
	50%{ -webkit-transform:translate(10px,20px);}
	75%{ -webkit-transform:translate(-20px,20px);}
	100%{-webkit-transform:translate(20px,-20px);}
}

@keyframes cont_block2{
	0%{ transform:translate(0);}
	25%{ transform: translate(-20px,-20px);}
	50%{ transform:translate(-10px,-20px);}
	75%{ transform:translate(20px,-20px);}
	100%{transform:translate(20px,20px);}
}
@-webkit-keyframes cont_block2{
	0%{ -webkit-transform:translate(0);}
	25%{ -webkit-transform: translate(-20px,-20px);}
	50%{ -webkit-transform:translate(-10px,-20px);}
	75%{ -webkit-transform:translate(20px,-20px);}
	100%{-webkit-transform:translate(20px,20px);}
}
@keyframes cont_block3{
	0%{ transform:translate(0);}
	25%{ transform: translate(-20px,20px);}
	50%{ transform:translate(10px,-20px);}
	75%{ transform:translate(-20px,-20px);}
	100%{transform:translate(-20px,20px);}
}
@-webkit-keyframes cont_block3{
	0%{ -webkit-transform:translate(0);}
	25%{ -webkit-transform: translate(-20px,20px);}
	50%{ -webkit-transform:translate(10px,-20px);}
	75%{ -webkit-transform:translate(-20px,-20px);}
	100%{-webkit-transform:translate(-20px,20px);}
}

@keyframes cont_block4{
	0%{ transform:translate(0);}
	25%{ transform: translate(30px,-30px);}
	50%{ transform:translate(20px,-30px);}
	75%{ transform:translate(-30px,20px);}
	100%{transform:translate(10px,30px);}
}
@-webkit-keyframes cont_block4{
	0%{ -webkit-transform:translate(0);}
	25%{ -webkit-transform: translate(30px,-30px);}
	50%{ -webkit-transform:translate(20px,-30px);}
	75%{ -webkit-transform:translate(-30px,20px);}
	100%{-webkit-transform:translate(10px,30px);}
}
.resource_pro>a{ color:#1b6ac7;}
.resource_pro p a{ font-weight:bold;}
.resource_pro>img{ margin:50px auto 20px auto;}
.resource_pro li{ width:380px; float:left; margin:20px 54px;}
.resource_pro li h3{ font-size:20px; margin:25px 0;}
.resource_pro li>a{ display:block; margin:10px auto;}
.resource_dl_pdf:before{ content:""; width:10px; height:12px; display:inline-block; background:url(../img/resource_dl_icon.png) no-repeat; padding-right:3px;}
.resource_screenshot{text-align:left; overflow:hidden; margin:60px auto;} 
.resource_screenshot_cont a{ margin:0 11px;}
.resource_screenshot_block { width:400%; transition:all 1s ease-in-out;}

.screenshot_dir:after{ content:"\e802"; font-family:"iconfont"; font-size:50px; color:#c2c2c2;} 
.screenshot_dir:hover{ text-decoration:none;}
.screenshot_dir{position:absolute; top:120px; } 
.screenshot_dir_left{left:-50px; transform:rotate(-180deg)}
.screenshot_dir_right{right:-50px;}
 
 

/* Backgroud 2*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5) {
.pro_funs2{background:url(../img/pro_funs2_bg.jpg) center no-repeat; background-size:1920px 625px;}
.clear_bug_bg{background:url(../img/mac_pc.png) no-repeat; background-size:566px 323px;}
.resource_pro_link:before{background:no-repeat; background-size:9px 12px;}
.resource_dl_pdf:before{background:no-repeat; background-size:10px 12px}
}