@CHARSET "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, fieldset, form, label, input, button, select, textarea, img, table, th, td, article, aside, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video, p{padding:0;margin:0;border: 0 none;color: #383838;list-style:none;}
input, textarea, a{outline: none;resize: none;}
a{text-decoration: none;
  -moz-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out, margin 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out, margin 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
  -o-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out, margin 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
  -ms-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out, margin 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out，box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out, margin 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;}
.clr{clear: both;}
*{margin: 0; padding: 0;}
a{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
html, body{background: linear-gradient(#EEEEEE,#D7D6DB) no-repeat;margin: auto;background-size: cover;font-size: 32px;}

.logo{width: 9em;padding: 3em 3.5em;}
.logo img{display: block;width: 9em;}
.download{width: 75em;height: 36em;background: url(../images/line.svg) center center repeat-y;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.download .and{float: left;}
.download .win{float: right;}
.download h4{width: 8em;font-size: 120px;text-align: center;font-weight: 500;margin: 0 0 1em;}
.download a{display: block;width: 30em;height: 20em;border: 1px solid #A8A8A8;border-radius: 1.5em;background: linear-gradient(#F8F8F8,#EBEBEB);box-shadow: 0 1em 1.5em rgba(0,0,0,0.05);}
.download a .con{width: 18em;height: 9em;margin: 6em auto 0;}
.download a .l{float: left;width: 3em;}
.download a .l img{width: 3em;display: block;}
.download a .l img.w{padding: 0.5em 0 0;}
.download a .r{float: right;width: 12.5em;}
.download a .r span{font-weight: 300;}
.download a .r span.d{font-size: 96px;}
.download a .r span.t{font-size: 64px;line-height: 2em;}
.download a:hover{box-shadow: 0 0 1em rgba(0,0,0,0.25) inset;}

@media screen and (max-width: 2560px){
   html, body{font-size: 24px;}
   .download h4{font-size: 90px;}
   .download a .r span.d{font-size: 72px;}
   .download a .r span.t{font-size: 48px;}  }

@media screen and (max-width: 1920px){
   html, body{font-size: 16px;}
   .download h4{font-size: 60px;}
   .download a .r span.d{font-size: 48px;}
   .download a .r span.t{font-size: 32px;}  }

@media screen and (max-width: 1366px){
   html, body{font-size: 12px;}
   .download h4{width: 12em;font-size: 30px;}
   .download a .r span.d{font-size: 24px;}
   .download a .r span.t{font-size: 16px;}  }