/*STORY*/
.system{
  background-size:cover;
  background-position:center;
  overflow:hidden;
/*  background-attachment: fixed;*/
  padding:5% 0;
  overflow:hidden;
  position:relative;
}

.system .stripe_bg{
  background-color:rgba(255,255,255,0.6);
}
.system .content{
  z-index:2;
}
.system_item_body{
  margin-bottom:1%;
  position:relative;
  text-shadow:0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
}
.system h3{
  margin:0;
  padding:0;
  text-align:center;
  position:relative;
  padding:1% 1.5%;
  margin-bottom:1%;
  font-weight:normal;
  font-size:150%;
  overflow:hidden;
  text-align:left;
  color:#FFF;
  width:100%;
  background-color: rgba(0,0,0,0.8);
  overflow:hidden;
  position: relative;
  border-radius:7px 0 7px 0;
  text-shadow:none;
}

.system h3:before,
.system h3:after{
  content:"";
  display:block;
  border:30px #FFF double;
  border-width:0 0 0 30px;
  position:absolute;
  top:0;right:-11%;bottom:0;left:auto;
  transform:skewX(-45deg);
}
.system h3:before{
  width:19.1%;
}
.system h3:after{
  width:15%;
}

.ss{
  padding:0.1%;
  background-color: rgba(255,255,255,0.8);
  border-radius:5px;
}
.ss .ss_caption{
  padding:0.5%;
  margin-top:1%;
}


#system1{background-image:url(../images/system/system1_bg.jpg);}
#system2{background-image:url(../images/system/system2_bg.jpg);}
#system3{background-image:url(../images/system/system3_bg.jpg);}
#system4{background-image:url(../images/system/system4_bg.jpg);}

@media screen and (max-width:767px){
  .system{background:none !important;background-color:#FFF !important;}
  .ss{background-color: rgba(0,0,0,0.1);}
  .system h3{font-size:4.5vw;}
  .system h3:before,
  .system h3:after{
    border-width: 0 0 0 2.8vw;
  }
}