@charset "gb2312";
/*reset*/
body,div,li { font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,select { margin:0; padding:0;}
body{ background:#edeae7;}
table { border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal;}
ol,ul,li { list-style:none;}
caption,th { text-align:left;}
h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal;}
q:before,q:after { content:'';}
abbr,acronym { border:0;}
input,textarea{ outline:none;}
a { color: #034c86; text-decoration:none;}
/*globle*/
.hide { overflow:hidden;}
.top,.main { width:80%; position:relative; }
.w780 { width:800px; margin:0 auto;}
.top .w780 { background:none; background-image:url(img/top1.png;vpn_img); background-position: right 10px; background-repeat: no-repeat;  padding:0; min-height: 90px}
.main ul { overflow: hidden;}
.main li { width: 80%; box-shadow: 0 5px 0 0 #e1dcd7; float: right; clear: both; background-color: #f9f8f7; position: relative; padding: 25px 5%; margin:15px 0;}
.main li h3 { font-size: 30px; font-weight: 600; line-height: 2em;}
.main li p { font-size: 16px; color: #5b6a75; line-height: 1.8em; padding: 10px 0;}
.main li span { font-size: 16px; color: #88949d;}
.main li em { position: absolute; width: 10%; height: 50px; font-size: 16px; line-height: 46px; text-align: center; color: #fff; background-color: #0080b5; top: 0; left: -10%; border-radius:8px 0 0 8px;}
.main li{-webkit-transition:-webkit-transform 0.3s ease-out;-moz-transition:-moz-transform 0.3s ease-out;-ms-transition:-ms-transform 0.3s ease-out;-o-transition:-o-transform 0.3s ease-out;transition:transform 0.3s ease-out;}
.main li:hover { -webkit-transform: translateY(-10px);-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px); background-color:#0080b5; }
.main li:hover em { background-color:#09a2e1;}
.main li:hover h3,.main li:hover p { color: #fff;} 
.main li:hover span { color: #c4dae3;}

.hello { position: fixed; width:16%; padding: 90px 2%; height: 100%; background-color: #dfdad5; right: 0; top: 0;}
.hello h2 { font-size: 26px; font-weight: 600; color: #9d8f85;}
.hello p { color:#9d8f85; font-size: 14px; line-height: 1.8em; padding-top: 10px; text-indent: 2em;}

.footer { color:#a19992; text-align: center; font-size:16px; line-height: 2em;}
.footer .w780 { padding:20px 50px; }
.copyright { float:none; width: 100%; text-align: center;}

@media only screen and (min-width: 320px) and (max-width: 767px) {
	.top,.main,.w780 { width: 100%;}
	.top .w780 { background-size:50%; background-position: 90% 50%; min-height: 72px;}
	.main li { width:86%; margin-left: 2%; margin-bottom:2rem; float: none; padding: 1rem 5%;}
	.main li h3 { font-size: 1.6rem;}
	.main li em { left: 0; top: -15px; height: 30px; line-height: 26px; font-size: 1.2rem; width: 80px; border-radius: 8px;}
	.hello { width:86%; margin-left: 2%; float: none; position: relative; top: auto; padding: 5%;}
    .footer .w780 { padding: 0;}
}