#section {
  margin:35px 0;
}

#section > div:not(:last-child) {
  margin-bottom:35px;
}

#section .section1 .sec-list {
  margin:0 -20px;
}

#section .section1 .sec-list > div {
  padding:0 20px;
}

#section .section1 .sec-list > div .box {
  height:350px;
  position:relative;
  cursor:pointer;
}

#section .section1 .sec-list > div:nth-child(1) .box {
  background-image:url('/images/main/sec1-1.png');
}

#section .section1 .sec-list > div:nth-child(2) .box {
  background-image:url('/images/main/sec1-2.png');
}

#section .section1 .sec-list > div:nth-child(3) .box {
  background-image:url('/images/main/sec1-3.png');
}

#section .section1 .sec-list > div .box .sec-info {
  position:absolute;
  left:0;
  bottom:0;
  padding:25px 0;
  text-align:center;
  width:100%;
  background-color:rgba(0, 0, 0, 0.5);
}

#section .section1 .sec-list > div .box.active:before {
  background-color:var(--main-color-1);
  opacity:0.5;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

#section .section1 .sec-list > div .box .sec-info > p {
  font-size:1.4rem;
  color:#fff;
  margin-bottom:0;
}

#section .section1 .sec-list > div .box .sec-info > h3 {
  font-size:3.4rem;
  color:#fff;
}





/* 섹션2 */
#section .section2 .sec-list > div .box {
  padding:30px;
}
#section .section2 .sec-list > div .box .board-name {
  padding:6px 0;
  margin-bottom:8px;
}

#section .section2 .sec-list > div .box .board-name h4 {
  font-size:2rem;
  font-weight:500;
}

#section .section2 .sec-list > div .box .board-list > ul > li {
  font-size:1.5rem;
  margin:4px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#section .section2 .sec-list > div:nth-child(1) .board-name {
  border-bottom:1px solid #222;
}


#section .section2 .sec-list > div:nth-child(2) .board-name {
  border-bottom:1px solid #fff;
}

#section .section2 .sec-list > div:nth-child(2) .board-list > ul > li {
  color:#fff;
}


#section .section2 .sec-list > div:nth-child(2) .box {
  background-color:var(--main-color-2); 
}


#section .section2 .box {
  border:5px solid var(--main-color-2); 
}

@media (max-width:767px) {
  #main-banner .banner-image {
    background-image:url('/images/banner/mobile-banner.png');
  }

  #main-banner .banner-image .banner-position {
    width:calc(100% - 20px);
    display:none;
  }

  #main-banner .banner-image .banner-position img {
    width:100%;
  }

  #section .section1 .sec-list > div {
    margin-bottom:10px;
  }

  #section .section2 .sec-list > div {
    margin-bottom:10px;
  }
}