/* 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;}
.pbc_dl_btn:hover{ text-decoration:none; background-color:#2ac625;}

.wrap{overflow:hidden;}
.mcc_banner{ background:url(../jpg/banner_ov-3.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:22px; line-height:58px;}
.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(../jpg/pro_funs2_bg-3.jpg) center no-repeat; background-size:cover;}
.pro_funs4{ width:100%; height:600px; background:url(../jpg/pro_funs4_bg-3.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:30px auto 130px auto;}
.wrap .pro_funs6{ width:100%; height:685px; background-color:#f2f2f2; margin-top:-10px;}
.pro_funs6 .pro_funs_text{ width:550px; margin-top:130px;}
.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(../png/mac_pc-3.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_virus{ 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_virus 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_virus{animation:bug_find_virus 4s linear forwards infinite; -webkit-animation:bug_find_virus 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_virus{
0%,12%{height:100%; opacity:0;}
13%,30%{ height:100%; opacity:1;}
50%,100%{ height:0px; opacity:1;}
}
@-webkit-keyframes bug_find_virus{
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(../png/screenshot3_bg-3.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;}
}

/*macclean home add buy btn 2017-10-26*/
.banner_cont .macidx_btn{ width:612px; margin:30px auto 60px auto;}
.macidx_btn a{ width:280px; line-height:58px; font-size:20px; color:#fff; border-radius:5px; text-decoration:none;}
.mcidx_dl_btn{ background-color:#1eac1a;}
.mcidx_buy_btn{ margin-left:50px; background-color:#f09510; }
.mcidx_dl_btn:hover{text-decoration:none; background-color:#2ac625;}
.mcidx_buy_btn:hover{text-decoration:none; background-color:#f2a028;}

@media screen and (max-width: 736px){
	.banner_cont .macidx_btn{ width:90%;}
	.macidx_btn a{ float:none; margin:0 auto 20px auto;}
}

/* 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(../jpg/pro_funs2_bg%402x-3.jpg) center no-repeat; background-size:1920px 625px;}
.clear_bug_bg{background:url(../png/mac_pc%402x-3.png) no-repeat; background-size:566px 323px;}
}