/* =========================================================
   PEAP / About page
   File: /peapacademy/assets/css/about.css
   ========================================================= */

/* 기본 레이아웃 */
.subpage .inr_box{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------------------------------------------------------
   Hero (배경 이미지: /peapacademy/assets/img/about/menu.jpg)
   --------------------------------------------------------- */
.about-hero{
  position: relative;
  padding: 80px 0 56px;
  color: #fff;

  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('/peapacademy/assets/img/about/menu.jpg') center / cover no-repeat;
}

.about-hero h1{
  margin: 0 0 12px;
  line-height: 1.25;
  font-size: 32px;
  font-weight: 800;
}

.about-hero p{
  margin: 0;
  line-height: 1.85;
  opacity: .95;
  font-size: 15px;
}

/* ---------------------------------------------------------
   Sections / Cards
   --------------------------------------------------------- */
.about-sec{
  padding: 26px 0;
}

.about-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px 18px 16px;
}

.about-kicker{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .7;
  margin: 0 0 6px;
}

.about-title{
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.3;
}

.about-body{
  margin: 0;
  line-height: 1.85;
}

.about-body + .about-body{
  margin-top: 10px;
}

/* ---------------------------------------------------------
   Campus image
   --------------------------------------------------------- */
.about-visual{
  padding: 8px 0 0;
}

.about-visual figure{
  margin: 0;
}

.about-visual img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}

.about-caption{
  margin: 10px 0 0;
  font-size: 13px;
  opacity: .75;
  line-height: 1.6;
}

.campus-list{
  margin: 12px 0 0;
  padding-left: 18px;
  line-height: 1.85;
}

.campus-list li{
  margin: 4px 0;
}

/* ---------------------------------------------------------
   Closing
   --------------------------------------------------------- */
.closing{
  padding: 22px 0 64px;
  opacity: .95;
}

.closing .about-card{
  background: #0b1f2a;
  color: #fff;
  border-color: rgba(255,255,255,.12);
}

.closing .about-title{
  color: #fff;
}

.closing .about-kicker{
  opacity: .85;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 768px){
  .about-hero{
    padding: 64px 0 44px;
  }

  .about-hero h1{
    font-size: 26px;
  }

  .about-hero p{
    font-size: 14px;
  }

  .about-title{
    font-size: 18px;
  }
}