@charset "gb2312";
/* CSS Document */
@charset "gb2312";
*{ margin:0px; padding:0px; border:0; }
html, body {width:100%; height:100%;  margin:0px; padding:0;  font:16px/1.5 "Microsoft YaHei" , tahoma, arial, \5FAE\8F6F\96C5\9ED1, "Hiragino Sans GB", sans-serif; -webkit-font-smoothing: antialiased; }

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,img,button {border:0;  padding:0; margin:0; font-weight:normal; } 
table,td,tr,th{font-size:12px;}
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
h1,h2,h3,h4,h5,h6,p,em,i,b,span { margin:0; padding:0; font-weight:normal; font-style:normal;}
ol,ul {list-style:none;}
address,cite,code,th {font-weight:normal;font-style:normal;}
img:hover { opacity:1; filter: alpha(opacity=100); }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
.fl { float:left; }
.fr { float:right; }
a { color:#404040; text-decoration:none; }
a:hover{ color:#0a40bc; text-decoration:none;}

div,ul,li,h4,h5,dl,dd,dt { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

body { background: url("../img/top.jpg") no-repeat center top #122b6b; background-size: contain;}
#header { text-indent: -9999px; overflow:hidden; height: 60vh;}

#wrapper,#footer{ width: 100%; margin: 10px auto; overflow: hidden; clear: both;}

.container { width:1200px; margin:0 auto; }
h3 { background: linear-gradient(to right, rgba(0, 45, 132, 0), rgba(175, 54, 111, .7), rgba(0, 45, 132, 0)); padding: 2vh 0; margin:2vh 0 1vh; text-align: center; color:#fff; font-size: 24px; font-weight: 600;}
.grid { max-width:1200px; list-style:none; margin:0 auto; padding:0}
.grid li { display:block; float:left; padding:20px; width:32%; opacity:0; background:#fff; border-radius: 6px; line-height:26px; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; margin:0 10px 10px 0;}
.grid li:nth-child(3n) { margin-right:0; }
.grid li.shown,.no-js .grid li,.no-cssanimations .grid li { opacity:1;}
.grid li:hover { background:#197b8c;}
.grid li img { border-radius: 3px; border:#fff solid 2px; width: 100%; height: auto;}
.grid li h5 { font-size:20px; line-height: 1.4em; font-weight: 600; padding: 10px 0;}
.grid li p { font-size: 16px; list-style: 1.8em; color: #60696f;}
.grid li span { font-size: 14px; color: #aab5bc; padding-top: 2em;}

.grid li:hover { background:linear-gradient(to bottom,#1757b9,#13bed9,#bf2def);}
.grid li:hover h5,.grid li:hover p { color: #fff;}

.grid.effect-2 li.animate { -webkit-transform:translateY(200px); transform:translateY(200px); -webkit-animation:moveUp .65s ease forwards; animation:moveUp .65s ease forwards; }
@-webkit-keyframes moveUp { 0%{}100%{-webkit-transform:translateY(0);opacity:1;} }
@keyframes moveUp { 0%{}100%{-webkit-transform:translateY(0); transform:translateY(0); opacity:1;} }

#footer { padding: 15px 0; background: #092064; text-align: center; font-size: 16px; color: #bed9f7;}

/*تض»ْ×شتتس¦*/
@media screen and (max-width:999px) and (min-width: 160px){
	html, body,.container,.grid { width:100%;}
	body { background-size: 200%;}
	#header { height: 32vh;}
	.grid li { width: 90%; margin: 0 5% 10px 5%;}
}