/* 로그인 */
.login-page {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 25%;
  padding: 40px;
  border: 1px solid #eee;
  border-radius: 30px;
}


.logo h1 {
  font-family: 'Pretendard-Regular';
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 30px;
}

.id-zone,
.pw-zone {
  margin-bottom: 10px;
}

.login-box .red-btn {
  width: 100%;
}

.join-button-wrap {
  padding: 1rem 0;
}

.join-button {
  margin: 0 auto;
}

/* chart 페이지 */

.banner{
  width: 100%;
  padding: 120px;
  background-image: url(../img/banner1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.banner2{
  width: 100%;
  padding: 120px;
  background-image: url(../img/banner2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.banner > div,
.banner2 > div{
  position: absolute;
  top: 40%;
  left: 22%;
  transform: translateY(-50%);
}

.banner > div > p,
.banner2 > div > p{
  color: #fff;
  font-family: 'SBAggroM';
  font-size: 2.5rem;
}


.banner > div > p:nth-of-type(2),
.banner2 > div > p:nth-of-type(2){
  font-size: 3.5rem;
}

.chart-zone{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 30px;
}

.content-box{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #eee;
  padding: 30px;
}

#chartdiv{
  width: 100%;
  height: 300px;
}