@charset "UTF-8";

/* button */
.large-btn {
  padding: 20px 50px;
  font-size: 1.25rem;
  border-radius: 5px;
  box-shadow: 1px 1px 6px #bcbcbc;
  cursor: pointer;
}
.small-btn {
    display: inline-block;
  padding: 15px 30px;
  border-radius: 5px;
  box-shadow: 1px 1px 6px #bcbcbc;
  cursor: pointer;
}
.white-btn {
  color: #009fc7;
  background: #fff;
  position: relative;
  border: solid 1px #009FC7;
}
.white-btn:hover {
  opacity: 0.8;
}
.blue-btn {
  color: #fff;
  background: #01627a;
  position: relative;
}
.blue-btn:hover {
  color: #fff;
  background: #5995a4;
}
.orange-btn {
  color: #fff;
  background: #FF925C;
}
.orange-btn:hover {
  color: #fff;
  background: #ffb491;
}
.inquiry-btn {
  color: #fff;
  background: #019FC7;
  position: relative;
}
.inquiry-btn:hover {
  color: #fff;
  background: #2baecf;
}
.vcube-btn {
  color: #fff;
  background: #ed8626;
}
.vcube-btn:hover {
  color: #fff;
  background: #f5a738;
}
.skyblue-btn {
  color: #fff;
  background: #1cd2ff;
}
.skyblue-btn:hover {
  color: #fff;
  background: #69e0ff;
}
.gray-btn {
  color: #fff;
  background: #8b8b8b;
}
.gray-btn:hover {
  color: #fff;
  background: #afafaf;
}
.scroll-btn {
  color: #fff;
  background: #01627a;
  padding: 15px 0 !important;
  text-align: center;
}
.scroll-btn:hover {
  color: #fff !important;
  background: #5995a4 !important;
}
.right-btn {
  width: 45%;
  display: inline-block;
  right: 3%;
  position: absolute;
  bottom: 9%;
}
.left-btn {
  width: 45%;
  display: inline-block;
  left: 3%;
  position: absolute;
  bottom: 9%;
}
.btn-arrow-bottom {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 15px;
  bottom: 23px;
}
.btn-arrow-right {
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #019FC7;
  border-right: 1px solid #019FC7;
  -webkit-transform: rotate(90deg);
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  bottom: 23px;
}

/* arrow */
.arrow {
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #019FC7;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
  padding-right: 10px;
}
.arrow::before,
.arrow::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.defalt-arrow::before {
  right: 3px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #019FC7;
  border-right: 1px solid #019FC7;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.icon_search {
  width: 19px !important;
  height: 19px !important;
  vertical-align: middle;
}

/* circle */
.circle-large {
  width: 13.75rem;
  height: 13.75rem;
  margin: 0 auto;
  border-radius: 50%;
}
.circle-small {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
}
.circle-small-more {
  width: 8.75rem;
  height: 8.75rem;
  margin: 0 auto;
  border-radius: 50%;
}

/* margin */
.mtop5 {
  margin-top: 0.3125rem !important;
}
.mtop10 {
  margin-top: 0.625rem !important;
}
.mtop15 {
  margin-top: 0.9375rem !important;
}
.mtop20 {
  margin-top: 1.25rem !important;
}
.mtop30 {
  margin-top: 1.875rem !important;
}
.mtop40 {
  margin-top: 2.5rem !important;
}
.mtop50 {
  margin-top: 3.125rem !important;
}
.mbtm5 {
  margin-bottom: 0.3125rem !important;
}
.mbtm10 {
  margin-bottom: 0.625rem !important;
}
.mbtm15 {
  margin-bottom: 0.9375rem !important;
}
.mbtm20 {
  margin-bottom: 1.25rem !important;
}
.mbtm30 {
  margin-bottom: 1.875rem !important;
}
.mbtm40 {
  margin-bottom: 2.5rem !important;
}
.mbtm50 {
  margin-bottom: 3.125rem !important;
}
.mtop_mbtm5 {
  margin-top: 0.3125rem !important;
  margin-bottom: 0.3125rem !important;
}
.mtop_mbtm10 {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important;
}
.mtop_mbtm15 {
  margin-top: 0.9375rem !important;
  margin-bottom: 0.9375rem !important;
}
.mtop_mbtm20 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}
.mtop_mbtm25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}
.mtop_mbtm30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
.mtop_mbtm40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.mtop_mbtm50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}
.mtop_mbtm60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.cl {display: inline-block;}
.cl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .cl {height: 1%;}
.cl {display: block;}