.about-item {
  background-repeat: no-repeat;
  background-position: center; }
  .about-item .flex {
    align-items: center;
    justify-content: center;
    height: 450px; }
    .about-item .flex .item-left {
      order: 1; }
    .about-item .flex .item-right {
      order: 2; }
  .about-item .item-img {
    padding: 0 70px; }
  .about-item img {
    width: 100%; }

.about-03 {
  background-image: url("/images/about-3-2.png"); }

.about-04 {
  background-image: url("/images/about-04-02.png"); }

.about-05 {
  background-image: url("/images/about-5-1.png"); }

.about02-container {
  background-color: #F3F4F6; }
  .about02-container .container {
    width: 100%; }
  .about02-container .about02-item {
    display: flex;
    align-items: flex-end;
    min-height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
    .about02-container .about02-item .text {
      min-height: 210px;
      padding: 20px; }
  .about02-container .about02-01 {
    background-image: url("/images/about02-01.png"); }
  .about02-container .about02-02 {
    background-image: url("/images/about02-02.png"); }
  .about02-container .about02-03 {
    background-image: url("/images/about02-03.png"); }

@media (max-width: 768px) {
  .about-item {
    text-align: center; }
    .about-item .flex {
      display: block;
      height: auto; }
    .about-item .item-img {
      padding: 40% 0; }
    .about-item .item-text {
      padding: 10% 5%; }

  .about02-container .about02-item .text {
    min-height: 0; }

  .about-03 {
    background: #E1F5FF url("/images/m-about-3-2.png") no-repeat center top;
    background-size: 100%; }

  .about-04 {
    background: #C6E9C9 url("/images/m-about-04-02.png") no-repeat center top;
    background-size: 100%; }

  .about-05 {
    background: #FFDAC1 url("/images/m-about-5-1.png") no-repeat center top;
    background-size: 100%; } }




.thumb-info-water {
    display: block;
    position: relative;
    text-decoration: none;
    max-width: 100%;
    /*background-color: #FFF;*/
    background: linear-gradient( 360deg, rgba(126, 208, 243, 0.15), #fff 40%);
    border-radius: 4px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
.thumb-info-purify {
    display: block;
    position: relative;
    text-decoration: none;
    max-width: 100%;
    /*background-color: #FFF;*/
    background: linear-gradient( 360deg, rgba(137, 201, 143, 0.4), #fff 40%);
    border-radius: 4px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.thumb-info-other {
    display: block;
    position: relative;
    text-decoration: none;
    max-width: 100%;
    /*background-color: #FFF;*/
    background: linear-gradient( 360deg, #ffe9ee, #fff 40%);
    border-radius: 4px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
.thumb-info-massage {
    display: block;
    position: relative;
    text-decoration: none;
    max-width: 100%;
    /*background-color: #FFF;*/
    background: linear-gradient( 360deg, rgba(255, 218, 193, 0.5), #fff 40%);
    border-radius: 4px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.watercare-back {
    background-color: rgba(126, 208, 243, 0.2);
}
.aircare-back {
    background-color: rgba(137, 201, 143, 0.4);
}
.other-back {
    background-color: rgba(360deg, #ffe9ee, #fff 40%);
}
.massage-back {
    background-color: rgba(255, 218, 193, 0.5);
}


/* Add here all your CSS customizations */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* VARS */
/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */

fieldset {
margin: 0;
padding: 2rem;
box-sizing: border-box;
display: block;
border: none;
border: solid 1px #ccc;
min-width: 0;
background-color: #fff;
}
fieldset legend {
margin: 0 0 1.5rem;
padding: 0;
width: 100%;
float: left;
display: table;
font-size: 1.5rem;
line-height: 140%;
font-weight: 600;
color: #333;
}
fieldset legend + * {
clear: both;
}
body:not(:-moz-handler-blocked) fieldset {
display: table-cell;
}
/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.status {
margin: 0;
font-size: 1rem;
font-weight: 400;
}
.status span {
font-weight: 600;
color: #b6985a;
}
.status span:first-of-type {
display: inline;
}
.status span:last-of-type {
display: none;
}
@media (max-width: 800px) {
.status span:first-of-type {
display: none;
}
.status span:last-of-type {
display: inline;
}
}