@charset "utf-8";
/* CSS SkyVPN (2016-10-14) */

/* 全局css */
body{background:#FFF;}
body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form,a {
	margin:0 auto;
	padding:0;
}
body {
	font-family: 'PingFang SC', 'Microsoft YaHei', 'lato', 'CeraPro', 'Arial', 'Roboto', 'HelveticaNeue', 'sans-serif';
	font-size: 12px;
	color: #000;
}
.clear {
	clear: both;
	font-size: 0px;
}
ul,li {
	list-style: none;
}
img {
	border: none;
}
/* 一般链接 */
a {
	text-decoration: none;
	color: #000;
}
a:hover {
	color: #1887e7;
}

/* index css */
#content{width:100%;background-color:#1887e7;margin:0 auto;position:fixed;top:0;left:0;z-index:900;border-bottom: #3ea0f4 solid 1px;}
#content1{ width:100%; background-color:#1887e7; margin:0 auto;}
.content1{ width:100%; background-color:#1887e7; margin:0 auto;}
#content2{ width:100%; background-color:#fff; margin:0 auto;}
.content2{ width:100%; background-color:#fff; margin:0 auto;}
#content3{ width:100%; background-color:#fff; margin:0 auto;}
#content4{ width:100%; background-color:#fff; margin:0 auto;}
.page404_con{min-height:468px;margin-top:300px;text-align:center;}
.page404_con p{margin-bottom:2em;color:#666;}
.page404_con a{padding:1em 3em;background-color:#2DBB73;color:#fff;border-radius:5px;}
.main{ width: auto;max-width:1200px; margin:0 auto;}

/* 第一屏 css */
.first{ height:900px; margin:0 auto; position:relative;}
.top{ height:122px;}
.logo{ height:90px; float:left; margin-left:16px; margin-top:15px; background:url(../img/Vpn_Icon.png) top left no-repeat; line-height:90px; font-size: 30px;
	color: #E7F4FF; padding-left:96px; }
.menu{ float:right; margin-right:16px;}

/* 社交菜单 css */
.social{ margin-top:50px;}
.social ul li, .social ul li a{ float:right; font-size: 18px; opacity: 0.69; color: #E7F4FF; line-height: 24px; margin-right:20px;}
.social ul li img{ float:left; margin-right:8px;}

/* 主菜单 css */
.main_menu{ margin-top:20px;}
.main_menu ul li{ margin-right:30px; }
.main_menu ul li, .main_menu ul li a{ float:right; font-size:18px; color:#E7F4FF; line-height:18px;}
.main_menu ul li a:hover{ color:#fff;}
.main_menu ul li.curren{ border-bottom:2px #E7F4FF solid; padding-bottom:8px;}

/* 标语 css */
.sloganbg{ margin:320px 68px 0 0; float:left; width:570px;font-size:65px; color:#F7FBFF; line-height:90px; }
.sloganbnt{ width:160px; height:52px; border-radius:4px; margin-top:60px; background: #F7FBFF url(../img/getskyvpn.png) 39px center no-repeat; font-size:20px; color:#2B303B; line-height:52px; padding-left:68px; display:block;}
.r_mob{ float:left; position:absolute; bottom:0; right:58px;}
.r_mob_step{ float:left; position:absolute; bottom:0; left:50px;}
.usevpn a{color: #ffffff;text-decoration:underline; }
.usevpn a:hover{color: #ffffff;text-decoration:underline; }


/* 第二屏 css */
.second{height:900px; margin:0 auto;}
.second ul{padding-top:265px; }
.second ul li{ width:320px; float:left; text-align:center; font-size: 20px;color: #7B8087; line-height: 28px; margin-right:110px;}
.second ul li img{ margin-bottom: 40px}
.second ul li h5{font-size:28px; color: #2B303B; margin-bottom:35px;}
.second ul li.nomargin{ margin-right:0;}


/* 第三屏 css */
.third{ background-color:#1887e7; height:900px; margin:0 auto;}
.right{ float:left; margin-top:182px; margin-left:100px; width:600px;}
.right ul li{opacity: 0.69; font-size:22px; color: #F7FBFF; line-height: 30px; margin-bottom:84px;}
.right ul li h4{font-size:40px; color: #F7FBFF; margin-bottom:12px;}
.left{ float: left; margin-top:88px;}

/* 第四屏 css */
.fourth{height:900px; margin:0 auto;}
.ftop{ padding-top:200px; margin-left:100px;}
.ftop ul li{ float:left; margin-bottom:115px; clear:both;}
.ftop ul li img{float:left; margin-right:155px;}
.ftop ul li h3{font-size:36px; color:#232527; margin-bottom:10px; margin-top:10px;}
.ftop ul li p{ font-size:22px; color:#64686D; line-height:28px;}
.ads_txt{text-align:center; opacity: 0.5; font-size: 18px; color: #6D7178; line-height:28px; margin-top:82px;}

/* 内页 css */
.topmenu{height:180px; margin:0 auto;}
.social1{ margin-top:30px;}

.need{ padding:100px 0 150px 0; margin:0 auto;}
.need ul{ margin-top:60px;}
.need ul li{ margin-bottom:40px; clear:both;}
.need ul li img{ float:left; margin-right:30px;}
.need ul li h5{ float:left;font-size: 20px; color: #232527; line-height: 40px;}
.need ul li h6{ float:left;font-size: 20px; color: #232527; line-height: 80px;}
.need ul li p{font-size: 16px; color: #64686D; line-height: 30px; margin-bottom:60px; clear:both; margin-top:16px;}

.need h3{ text-align:center; font-size: 36px; color: #232527; line-height: 36px; margin-bottom:50px;}
.need p{font-size: 16px; color: #64686D; line-height: 30px; margin-bottom:60px;}
.need h4 { margin-top:60px; margin-bottom:15px; font-size: 20px;color: #232527; line-height: 30px;}
.needimg{ text-align:center;}
.needimg img{ margin:0 80px}
.need span{font-size: 14px; color: #64686D; line-height: 20px; font-weight:normal;}
.need strong{ color:#1E86E2;}
.faqbanner{ width:1200px; height:440px; margin-bottom:100px; margin-top:-40px;}
.need a{ color:#1E86E2; text-decoration:underline;}

/* steps css */
.code_pop{background:rgba(0,0,0,0.5); border-radius:8px; width:220px; height:210px; float:left; margin-left:730px;  margin-top:340px; color:#FFF; text-align:center; padding:58px 60px; font-size:16px; line-height:24px;}
.code_pop ul li{ text-align:left; margin:35px auto; line-height:22px;}
.code_pop ul li img{ margin-right:16px; vertical-align: bottom;}
.code_pop input{ width:210px; height:35px; line-height:35px; border: 1px solid #FFFFFF; border-radius:4px; background:none; margin-top:30px; color:#FFF; padding:0 5px;}
.code_popbnt{background:#F7FBFF; border-radius:4px; width:220px; height:35px;color:#000; line-height:35px; margin-top:50px;margin-bottom:10px;}


.code_pop_1{border-radius:8px; width:344px; height:20px; float:left; margin-left:730px;  margin-top:20px; color:#FFF; text-align:center;font-size:16px; line-height:24px;}
.code_pop_2{border-radius:8px; width:344px; height:20px; float:left; margin-left:730px;  margin-top:100px; color:#FFF; text-align:center;font-size:16px; line-height:24px;position: relative;
	-webkit-animation-name: godown;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	animation-name: godown;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.step{ padding:160px 100px 200px;}
.step h3{font-size:28px; color:#232527; text-align:center;}
.step ul{}
.step ul li{font-size:16px; line-height:24px; color:#232527; clear:both; padding-top:120px;}
.step ul li h6{font-size:18px; color: #232527; line-height:18px; background:url(../img/triangle_blue.png) left center no-repeat; padding-left:30px; margin-bottom:10px;}
/*.step ul li p{ float:left; text-align:center; }*/
.step ul li img{ margin:80px auto 20px;}
.mid{margin:0; text-align:center;}
.location{ height:270px; padding-top:130px; padding-bottom:200px; color:#1887e7; text-align:center; font-size:28px;}
.location ul{ margin-top:122px;}
.location ul li{font-size:14px; margin:0 40px; float:left;}
.location ul li a{color:#1887e7;}
.location ul li a:hover {color:#fff; }
.location ul li p{border: 1px solid #1887e7; height:30px; width:110px;  border-radius: 4px;  margin-top:30px; line-height:30px;}
.location ul li p:hover {height:30px; width:110px;  border-radius: 4px;  margin-top:30px; line-height:30px;background: #1887e7; color: #FFFFFF}



/* foot css */
.foot{ width:100%; min-height:380px; background-color:#2B303B; padding-bottom: 20px; }
.fmenu{ padding-top:120px; padding-left:100px;}
.fmenu_l{ float:left; border-left:#89929D 1px solid;}
.fmenu_l ul li,.fmenu_l ul li a{ float:left; text-align:center; font-size: 16px; color: #89929D; margin-left:20px;cursor:pointer;}
.fmenu_l ul li img{ margin-bottom:20px;}

.fmenu_r{float:left;}
.down_title{ text-align:center; margin-bottom:32px; font-size:18px; color: #818A94; line-height: 18px; background:url(../img/line1.png) center center no-repeat;}
.fsocial{float:left;}
.fsocial ul li, .fsocial ul li a{
 font-size:18px; color:#818A94; line-height:18px; margin-bottom:36px;}
.fsocial ul li img{ float:left; margin-right:12px;}
.fsub{ float:left;}

.fsub ul{ margin:0 50px 0 50px; }
.fsub ul li,.fsub ul li a{ margin-bottom:24px; color:#89929D; font-size:18px; line-height:18px;cursor:pointer;}

.copyright{opacity: 0.5; font-size: 13px; color: #F7FBFF;
letter-spacing:1px; line-height: 13px; text-align:center; margin-top:30px;}

/* 下载弹出框 css */
.mask{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:999;}

.mess{display:none; width:760px; height:360px; background:#FFFFFF;
border-radius:8px; position:fixed; z-index:1001; top:50%; left:50%; margin-top:-180px; margin-left:-380px;}
.messtitle{ background:url(../img/line2.png) center center no-repeat; text-align:center; font-size:20px; color:#028CFD; line-height:20px; margin-top:64px;}

.download ul {margin-top:50px; margin-left:35px;}
.download ul li,.download ul li a{ float:left; text-align:center; font-size:14px; color: #89929D; margin:0 25px;cursor:pointer;}
.download ul li img{ margin-bottom:20px;}

.messtxt{font-size:14px; color: #89929D; margin-top:78px; text-align:center;}

.mess_close{position:absolute; top:20px; right:20px;}

.mess-safari{display:none; width:490px; height:272px;
	border-radius:8px; position:fixed; z-index:1001; top:20%; left:80%; margin-top:-180px; margin-left:-380px;}

.mess-chrome{display:none; width:490px; height:272px;
	border-radius:8px; position:fixed; z-index:1001; top:80%; left:20%; margin-top:-180px; margin-left:-380px;}


/* Standard syntax */
@keyframes godown {
	0%   {top:0px;}
	50%  { top:12px;}
	100% {top:0px;}
}
.affiliate{
	margin: 0 !important;
	padding: 0 !important;
}
.affiliate p{
	margin: 0;
	padding: 0;
}
.affiliate .first{
	height: 497px;
	padding-top: 123px;
}

.affiliate .header-title{
	padding-top: 100px;
	text-align: center;
}
.affiliate .header-title p{
	font-size:48px;
	/*font-family:PingFangSC-Semibold;*/
	font-weight:500;
	color:rgba(255,255,255,1);
	line-height:67px;
	margin-bottom: 40px;
}
.affiliate .header-btn{
	display: flex;
	flex-direction: row;
	width: 700px;
	justify-content: space-between;
	margin: auto;
	border: 0;
}
.affiliate .header-btn button{
	width:300px;
	height:66px;
	background:rgba(255,255,255,1);
	border-radius:33px;
	font-size:24px;
	/*font-family:PingFangSC-Semibold;*/
	font-weight:500;
	color:rgba(57,66,102,1);
	line-height: 66px;
	border: 0;
	cursor: pointer;
	outline: 0;
}
.affiliate .header-btn button:active{
	color:rgba(57,66,102,0.5);
}
.affiliate .header-btn button.border-btn{
	width:300px;
	height:66px;
	border-radius:33px;
	border:2px solid rgba(255,255,255,1);
	font-size:24px;
	/*font-family:PingFangSC-Semibold;*/
	font-weight:600;
	color:rgba(255,255,255,1);
	line-height: 62px;
	background: transparent;
}
.affiliate .header-btn button.border-btn:active{
	color:rgba(255,255,255,0.5);
}

.affiliate .container-content{
	margin: auto;
}
.affiliate .container-content.step-area-back{
	background: #FAFBFE;
	text-align: center;
	display: flex;
	justify-content: center;
}
.affiliate .step-area{
	width: 1064px;
	padding-top: 80px;
	background: #FAFBFE;
}

.affiliate .step-info{
	text-align: center;
}
.affiliate .step-info .title{
	font-size:48px;
	/*font-family:PingFangSC-Semibold;*/
	font-weight:600;
	color:rgba(57,66,102,1);
	line-height:67px;
	margin-bottom: 10px;
}
.affiliate .step-info .tips{

}
.affiliate .step-info .tips span{
	width:260px;
	height:38px;
	background:rgba(235,235,235,1);
	border-radius:7px;
	display: inline-block;
	font-size:18px;
	font-weight:400;
	color:rgba(57,66,102,1);
	line-height:38px;
}
.affiliate .step-line{
	position: relative;
}
.affiliate .step-line .bg-line{
	width: 313px;
	border: 5px solid rgba(216,216,216,1);
	margin: auto;
	border-radius: 3px;
}
.affiliate .step-line .step-icon-line{
	width: 804px;
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 60px;
	/* border-bottom: 4px solid #000; */
}
.step-icon-line .ball{
	width:50px;
	height:50px;
	background:rgba(115,122,148,1);
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	text-align: center;
	font-size:24px;
	font-weight:600;
	color:rgba(255,255,255,1);
	line-height:50px;
}

.affiliate .step-item-area{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 60px;
}
.affiliate .step-item-area .step-item{
 	width: 315px;
	text-align: center;
}
.step-item-area .step-item .title{
	font-size:24px;
	font-weight:600;
	color:rgba(57,66,102,1);
	line-height:33px;
}
.step-item-area .step-item .step-content{
	font-size:18px;
	font-weight:400;
	color:rgba(57,66,102,1);
	line-height:25px;
}
.step-line .btn-line{
	text-align: center;
	padding: 40px 0 78px;
}
.step-line .btn-line button{
	width:230px;
	height:48px;
	background:rgba(12,115,209,1);
	border-radius:24px;
	font-size:18px;
	font-weight:600;
	color:rgba(255,255,255,1);
	line-height:48px;
	border: 0;
}
.step-line .btn-line button:active{
	background:rgba(12,115,209,0.5);
}
.why-area p{
	margin: 0;
	padding: 0;
}
.why-area{
	width: 988px;

}
.why-area .why-title{
	margin-bottom: 93px;
}
.why-area .why-title p{
	text-align: center;
	font-size:48px;
	font-weight:600;
	color:rgba(57,66,102,1);
	line-height:67px;
}

.why-area .info-area{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bttom: 73px;
}
.why-area .info-area.right-area{
	display: flex;
	flex-direction: row-reverse;
}
.why-area .info-area .icon{

}
.why-area .info-area .icon img{
 	height: 180px;
}
.why-area .info-area .text-area{
 	width: 750px;
	margin: 38px 0 73px;
}
.info-area .text-area .title{
	font-size:24px;
	font-weight:600;
	color:rgba(57,66,102,1);
	line-height: 36px;
}
.info-area .text-area .content{
	font-size:18px;
	font-weight:400;
	color:rgba(57,66,102,1);
	line-height:25px;
}
.why-area .btn-area{
	margin-top: 27px;
	margin-bottom: 94px;
	text-align: center;
}
.why-area .btn-area button{
	width:230px;
	height:48px;
	background:rgba(12,115,209,1);
	border-radius:24px;
	font-size:18px;
	font-weight:600;
	color:rgba(255,255,255,1);
	line-height:48px;
	border: 0;
	cursor: pointer;
}
.why-area .btn-area button:active{
	background:rgba(12,115,209,0.5);
}