body { margin: 0; padding: 0; letter-spacing: 0.5px; font: 14px/1.231 "proxima-nova-condensed", sans-serif; font-weight: 300; padding: 0; }
html, body { height: 100%; }

img { vertical-align: top; border: 0; max-width: 100%; }

#mainbg { min-height: 100vh; min-width: 100%; background: url(bg_body.svg) 50% 0 no-repeat, #fff url(bg_body.png) 100% 100% no-repeat; background-size: auto, auto 100%; overflow: hidden; }
#mainwrap { position: relative; max-width: 1006px; margin: 0 auto; min-height: 640px; padding: 0; }
#mainheader { text-align: center; padding-top: 125px; }
  #mainheaderlogo { position: absolute; top: 125px; left: 0; z-index: 1; }
  #mainheadertitle { margin: 0 auto; width: 395px; position: relative; z-index: 2; text-transform: uppercase; font-weight: 300; font-size: 22px; color: #fff; white-space: nowrap; }
    #mainheadertitle_part01 { position: relative; left: 106px; z-index: 5; display: block; padding: 5px 0; background-color: #8C8C8C; margin: 0 auto; width: 157px; text-indent: -17px; overflow: visible hidden; }
    /* nose */
    #mainheadertitle_part01:before { content: ""; width: 0; height: 0; position: absolute; bottom: 0; border-style: solid; border-color: transparent #8C8C8C transparent transparent; left: -17px; border-width: 37px 17px 0 0; }
    #mainheadertitle_part02 { position: relative; left: 49px; z-index: 4; display: block; padding: 5px 0; width: 233px; background-color: #E20521; margin: -2px 0 0; }
    #mainheadertitle_part03 { position: relative; left: 89px; z-index: 5; display: block; padding: 5px 0; width: 360px; background-color: #8C8C8C; margin: -2px auto 0; }
    #mainheadertitle_part04 { position: relative; left: 82px; z-index: 4; display: block; padding: 5px 0; width: 202px; background-color: #E20521; margin: -2px auto 0; text-indent: -17px; overflow: visible hidden; }
    /* nose */
    #mainheadertitle_part04:before { content: ""; width: 0; height: 0; position: absolute; bottom: 0; border-style: solid; border-color: transparent #E20521 transparent transparent; left: -17px; border-width: 37px 17px 0 0; }

#maincontent { padding-top: 156px; }
  #maincontenttitle { 
    margin: 0; padding: 5px 0 5px 120px; box-sizing: border-box; position: relative; left: -80px; z-index: 2; width: 477px; text-transform: uppercase; font-weight: 300; font-size: 22px; color: #333; white-space: nowrap; 
    background: #8C8C8C; 
    background: -moz-linear-gradient(0deg, rgba(140,140,140,0) 0%, rgba(140,140,140,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(140,140,140,0)), color-stop(100%, rgba(140,140,140,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(0deg, rgba(140,140,140,0) 0%, rgba(140,140,140,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(0deg, rgba(140,140,140,0) 0%, rgba(140,140,140,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(0deg, rgba(140,140,140,0) 0%, rgba(140,140,140,1) 100%); /* ie10+ */
    background: linear-gradient(90deg, rgba(140,140,140,0) 0%, rgba(140,140,140,1) 100%); /* w3c */
  }
  /* mask */
  #maincontenttitle:after { content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; border-style: solid; border-color: transparent #e5e5e5 transparent transparent; border-width: 37px 17px 0 0; }
  
  .list1 { list-style: none; padding: 0; margin: 0 0 0 40px; }
    .list1_item { margin: 17px 0 0; font-size: 14px; }
      .list1_itemimg { width: 112px; }
      .list1_itemlink { text-decoration: none !important; color: #000; }
      .list1_itemlink:hover, .list1_itemlink:focus, .list1_itemlink:active { color: #E20521; }
      .list1_itemlink > b { font-weight: 500; }
      
  #maincontentimg { position: absolute; z-index: 4; top: 482px; right: 50%; margin-right: 82px; }
    
#mainfooter { position: fixed; z-index: 3; bottom: 0; right: 0; width: 257px; height: 240px; }
#mainfooter:before { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-color: transparent #fff transparent transparent; border-style: solid; border-width: 240px 257px 0 0; }
  #mainfooterlogo { position: absolute; z-index: 2; bottom: 43px; right: 47px; }
  
@media screen and (max-width: 1006px) {
    /* remove picture from background */
    #mainbg { background: #E1E1E1 url(bg_body.svg) 50% 0 no-repeat; }
    /* move logo upper */
    #mainheaderlogo { top: 35px; left: 20px; }
    /* move content upper */
    #maincontent { padding-top: 76px; }
    /* remove this mask */
    #maincontenttitle:after { display: none; }
}


@media screen and (max-width: 700px) {
    
    /* remove background */
    #mainbg { background: transparent; position: relative; }
    /* restore background and center it */
    #mainbg:before { 
        content: ""; z-index: 1; position: absolute; top: -206px; left: -100%; right: -100%; bottom: 0; background: #E1E1E1 url(bg_body.svg) 50% 0 no-repeat; 
        -webkit-transform: translateX(173px); -ms-transform: translateX(173px); transform: translateX(173px); 
    }
    /* yeap */
    #mainwrap { z-index: 2; min-height: 0; }
    /* reduce image and align */
    #maincontentimg { width: 100px; height: 100px; margin-right: -50px; top: 77px; }
      
    /* reduce footer */
    #mainfooter { width: 150px; height: 140px; }
    #mainfooter:before { border-width: 140px 150px 0 0; }
      #mainfooterlogo { bottom: 15px; right: 18px; transform: scale(0.65); transform-origin: 100% 100%; }
      
    /* logo on center */
    #mainheader { padding-top: 35px; }
      #mainheaderlogo { position: static; margin: 0 auto; width: 194px; display: inline-block; }
      #mainheadertitle { font-size: 18px; margin: 35px auto 0; width: 320px; }
      
      /* review title part */
      #mainheadertitle_part01 { left: -15px; padding: 2px 0 1px; width: 110px; text-indent: 0; }
      /* nose */
      #mainheadertitle_part01:before { display: none; }
      #mainheadertitle_part02 { left: 0; padding: 2px 0 1px; width: 151px; text-indent: 45px; }
      #mainheadertitle_part03 { left: -9px; padding: 2px 0 1px; width: 179px; text-indent: -12px; }
      /* mask */
      #mainheadertitle_part03:after { content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; border-style: solid; border-color: transparent #ebebeb transparent transparent; border-width: 26px 12px 0 0; }
      #mainheadertitle_part04 { left: -15px; padding: 2px 0 1px; width: 110px; text-indent: 0; }
      /* nose */
      #mainheadertitle_part04:before { display: none; }

    /* move content upper */
    #maincontent { padding-top: 38px; position: relative; z-index: 10; }
    /* review content title */
    #maincontenttitle { font-size: 18px; width: 100%; left: 0; text-align: center; padding: 3px 0 2px; }
    /* review content list */
    .list1 { margin: 125px 0 0; text-align: center; }
      .list1_item { margin: 0 10px; display: inline-block; vertical-align: top; }
      .list1_item:last-child { display: block; margin: 9px auto 0; width: 90px; }
}