/*
         __
   _____/ /_  ____ _      ______ _      __  __
  / ___/ __ \/ __ \ | /| / / __ `/_____/ / / /
 (__  ) / / / /_/ / |/ |/ / /_/ /_____/ /_/ /
/____/_/ /_/\____/|__/|__/\__,_/      \__,_/

SUHY/
HOME.CSS
*/


/*==========================================================
*
*  switch
*
==========================================================*/

html,
body {
  height: 100%;
  margin: 0;
}

main#main {
  padding-top: 65px;
  min-height: 510px;
  height: calc(100% - 95px);
}

section.switch {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  height: 100%;
}

section.switch section.flex {
  height: 100%;
}

section.switch section a {
  position: relative;
  height: 100%;
  padding: 0;
  border: 1px solid #999;
  background-repeat: no-repeat;
  text-align: center;
  box-sizing: border-box;
}

section.switch section a#resident {
  border-right: 0;
  background-size: 315px 265px;
  background-position: center center;
  background-image: url(../img/p1.png);
}

section.switch section a#hospital {
  background-size: 285px 240px;
  background-position: center 47%;
  background-image: url(../img/p2.png);
}

section.switch section a h1 {
  font-weight: 500;
  position: absolute;
  width: 100%;
  top: 5%;
}

section.switch section a p {
  color: #333;
  position: absolute;
  bottom: 7%;
  width: 100%;
}

section.switch section a:hover {
  text-decoration: none;
  color: #fff;
  background-color: #0070c9;
}

section.switch section a:hover * {
  color: #fff;
}


/*==========================================================
*
*  tablet
*
==========================================================*/

@media (max-width:899px) {
  main#main {
    height: auto;
  }

  section.switch section a {
    height: 480px;
  }
}

/*==========================================================
*
*  mobile
*
==========================================================*/

@media (max-width:414px) {
  section.switch section a {
    padding: 0 15px;
    height: 490px;
  }

  section.switch section a#resident {
    background-position: 50% 45%;
  }

  section.switch section a#hospital {
    background-position: 50% 47%;
  }

  section.switch section a h1 {
    font-size: 1.4em;
    width: calc(100% - 40px);
  }

  section.switch section a p {
    font-size: 0.9375em !important;
    width: calc(100% - 40px);
    line-height: inherit;
  }

  section.switch section a p br {
    display: none;
  }

}