@charset "UTF-8";
@import url(basic.css);
p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #717071;
  font-weight: 400;
}
@media (max-width: 767px) {
  p {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* topbanner */
.h_topbanner_box {
  margin: 110px auto 0;
}
@media (max-width: 767px) {
  .h_topbanner_box {
    margin: 100px auto 0;
  }
}

.top_banner {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}

.classical {
  display: none;
  background: #e8e8e8;
  padding: 15px;
}
.classical img {
  max-width: 192px;
  margin: 0 auto;
}

/* KAWAI的原點 */
.about_box h2 {
  font-weight: 400;
  text-align: center;
  letter-spacing: 5px;
  margin: 0 auto 5%;
  line-height: 1.5;
}
.about_box h2 span {
  display: inline-block;
  width: auto;
  font-size: 2.5rem;
  font-weight: 400;
}
@media (max-width: 767px) {
  .about_box h2 span {
    font-size: 1.5rem;
    letter-spacing: 0px;
  }
}
.about_box p {
  margin: 2% 0;
  text-align: center;
}
@media (max-width: 767px) {
  .about_box p {
    text-align: justify;
  }
}

/* KAWAI的理念 */
.concept_box {
  display: flex;
  margin: 0% auto;
  width: calc(100% - 30px);
}
.concept_box .concept_photo {
  padding: 0;
}
.concept_box .concept_info {
  font-size: 1.15rem;
  background: rgba(200, 200, 200, 0.2);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: stretch;
  padding: 2%;
  box-sizing: border-box;
}
.concept_box .concept_info h4 {
  text-align: center;
  margin: 5% auto;
}
.concept_box .concept_info p {
  text-align: center;
  color: #222;
}
.concept_box .concept_info div {
  text-align: center;
  margin: 1% auto;
  color: #222;
}
.concept_box .concept_info div span {
  display: inline;
  font-size: 1.5rem;
  color: #222;
}

.concept_img {
  background: url(../images/concept_photo.jpg) center;
  background-size: cover;
}

/* 鋼琴分類 */
.paino_box {
  margin: 1% auto;
  position: relative;
}
.paino_box div {
  margin: 0% auto;
}
@media (max-width: 767px) {
  .paino_box div {
    margin: 2% auto;
  }
}
.paino_box div .btn_box {
  width: calc(100% - 30px);
  position: absolute;
  bottom: 5%;
  text-align: center;
}

.btn_red {
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 5px;
  width: auto;
  color: #222;
  border: 1px solid #222;
  border-radius: 0;
  margin: 0 auto;
  display: inline-block;
  opacity: 0.9;
}
.btn_red:hover {
  color: #fff;
  border: 0;
  background: #e71a21;
}
@media (max-width: 767px) {
  .btn_red {
    font-size: 1rem;
  }
}

.btn_black_text {
  font-size: 1.15rem;
  color: #222;
  text-align: center;
  letter-spacing: 5px;
  width: auto;
  border-radius: 0;
  margin: 0 auto;
  display: inline-block;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .btn_black_text {
    font-size: 1rem;
  }
}

.title_s {
  font-size: 1.25rem;
  text-align: center;
  margin: 2.5% auto;
}

/* 河合音樂教室 */
.btn_classical {
  width: 90%;
}

.classical_img {
  background: url(../images/music_class_photo.jpg) center;
  background-size: cover;
}

/* 活動新訊 */
.event_info_box {
  position: relative;
}
.event_info_box div {
  position: relative;
  margin: 2% auto;
}
.event_info_box div .btn_box {
  width: calc(100% - 30px);
  position: absolute;
  bottom: 40%;
  text-align: center;
}

.btn_white_text {
  font-size: 1.15rem;
  color: #fff;
  text-align: center;
  letter-spacing: 5px;
  width: auto;
  border-radius: 0;
  margin: 0 auto;
  display: inline-block;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .btn_white_text {
    font-size: 1rem;
  }
}

/* 檢定比賽 */
.check_contest_box {
  width: calc(100% - 30px);
  position: relative;
  background: url(../images/check_contest_pic.jpg) center bottom;
  background-size: cover;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 25%;
}
.check_contest_box h3 {
  text-align: center;
  color: #fff;
  margin: 2.5% auto;
}
@media (max-width: 767px) {
  .check_contest_box h3 {
    font-size: 1.25rem;
    letter-spacing: 0;
  }
}
.check_contest_box p {
  color: #fff;
  margin-bottom: 2.5%;
}

.btn_box_check_contest {
  display: flex;
  height: 100%;
}
.btn_box_check_contest .btn_red {
  width: 100%;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
}
.btn_box_check_contest .btn_red:hover {
  color: #fff;
  border: 0;
}
@media (max-width: 767px) {
  .btn_box_check_contest .btn_red {
    letter-spacing: 2px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

.btn_sales {
  width: 100%;
  font-size: 1.15rem;
  color: #222;
  border: 1px solid #222;
  border-radius: 0;
}
.btn_sales:hover {
  color: #fff;
  background: #e71a21;
  border: 0;
}
@media (max-width: 767px) {
  .btn_sales {
    letter-spacing: 2px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* 東和音樂體驗館 */
.experience_img {
  background: url(../images/experience_photo.jpg) center;
  background-size: cover;
}

.experience_text {
  width: 65%;
  text-align: justify;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .experience_text {
    width: 90%;
  }
}

/* 銷售據點 */
.sale_office_img {
  background: url(../images/Sales_office_photo.jpg) center;
  background-size: cover;
}

/* 自動彈出 */
#ad-win {
  position: fixed;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(100, 100, 100, 0.35);
  padding: 20px;
  z-index: 1500;
  display: none; /* 確保初始是隱藏的 */
}

#ad-win.visible {
  display: block;
}

.ad-w {
  width: 90%;
  height: 100%;
  margin: 0% auto;
  padding: 5% 0;
  position: relative;
  display: flex;
  align-items: center;
}

.ad_box {
  width: 32%;
  position: relative;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .ad_box {
    width: 90%;
  }
}
.ad_box img {
  border-radius: 15px;
}

#close-ad-win {
  display: block;
  font-size: 3vw;
  position: absolute;
  top: -5%;
  right: -10%;
  z-index: 2;
  cursor: pointer;
  background: none;
  color: #e71a21;
  padding: 5px 10px;
  border: none;
}
@media (max-width: 767px) {
  #close-ad-win {
    font-size: 8vw;
  }
}/*# sourceMappingURL=home.css.map */