@charset "UTF-8";

main.container{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto; 
  position: relative;
  padding: 122px 0 50px;
}

@media (max-width:992px) {
  main.container {
    padding: 80px 0 50px;
  }
}


/* section1 css  */

.section1 {
  position: relative;
  max-width: 1200px;
  width: 100%;
  padding: 30px 0 0;
  display: flex;
  align-items: flex-start;
}

.main_map_wrap {
  position: relative;
  width: 61%;
  margin-right: 60px;
}

.main_map_wrap > div {
  position: relative;
  z-index: 1;
  border: 1px solid #e7e7e7;
  border-radius: 20px;
  overflow: hidden;
  opacity: 1;
/*  animation-name: mapBox;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;*/
}

@keyframes mapBox { 
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

.main_map_bg img {
  width: 100%;
  height: auto;      
  display: block;
}

.main_map_line1 {
  position: absolute;
  width: 22.8%;
  display: block;
  right: 20%;
  opacity: 1;
  top: 11.5%;
/*  animation-name: line1;
  animation-duration: 1s;
  animation-delay: 2.3s;
  animation-fill-mode: forwards;*/
}

@keyframes line1 { 
  from {
    top: -11.5%;
    opacity: 0;
  }
  to { 
    top: 11.5%;
    opacity: 1;
  }
}

.main_map_line2 {
  position: absolute;
  width: 22.3%;
  display: block;
  left: 30%;
  opacity: 1;
  top: 53%;
/*  animation-name: line2;
  animation-duration: 1s;
  animation-delay: 2.9s;
  animation-fill-mode: forwards;*/
}

@keyframes line2 { 
  from {
    top: 53%;
    opacity: 0;
  }
  to { 
    top: 33%;
    opacity: 1;
  }
}

.main_map_line3 {
  position: absolute;
  width: 24.9%;
  display: block;
  left: 24%;
  opacity: 1;
  top: 48%;
/*  animation-name: line3;
  animation-duration: 1s;
  animation-delay: 3.2s;
  animation-fill-mode: forwards;*/
}

@keyframes line3 { 
  from {
    top: 68%;
    opacity: 0;
  }
  to { 
    top: 48%;
    opacity: 1;
  }
}

.main_map_line4 {
  position: absolute;
  width: 22.8%;
  display: block;
  left: 30%;
  opacity: 1;
  top: 12%;
/*  animation-name: line4;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;*/
}

@keyframes line4 { 
  from {
    top: -12%;
    opacity: 0;
  }
  to { 
    top: 12%;
    opacity: 1;
  }
}

.main_map_line5 {
  position: absolute;
  width: 18.7%;
  display: block;
  right: 20%;
  opacity: 1;
  top: 20.5%;
/*  animation-name: line5;
  animation-duration: 1s;
  animation-delay: 2.6s;
  animation-fill-mode: forwards;*/
}

@keyframes line5 { 
  from {
    top: 0.5%;
    opacity: 0;
  }
  to { 
    top: 20.5%;
    opacity: 1;
  }
}

.main_map_line6 {
  position: absolute;
  width: 6.5%;
  display: block;
  left: 5.5%;
  opacity: 1;
  bottom: 29%;
/*  animation-name: line6;
  animation-duration: 1s;
  animation-delay: 3.5s;
  animation-fill-mode: forwards;*/
}

@keyframes line6 { 
  from {
    bottom: 49%;
    opacity: 0;
  }
  to { 
    bottom: 29%;
    opacity: 1;
  }
}

.main_map_object {
  position: absolute;
  width: 33%;
  display: block;
  right: 0;
  opacity: 1;
  bottom: 2%;
/*  animation-name: object;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;*/
}

@keyframes object { 
  from {
    bottom: -22%;
    opacity: 0;
  }
  to { 
    bottom: 2%;
    opacity: 1;
  }
}

.main_map_text {
  position: absolute;
  width: 38.5%;
  display: block;
  bottom: 2%;
  left: 5%;
}

.main_quick_gallery_wrap {
  position: relative;
  width: 39%;
}

.quick_link_box {
  position: relative;
  z-index: 1;
  opacity: 1;
/*  animation-name: quickBox;
  animation-duration: 1.5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;*/
}

@keyframes quickBox { 
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

.quick_link_box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
}

.quick_link_box ul li {
  width: calc(25% - 10px);
  margin-bottom: 10px;
  border-radius: 20px;
}

.quick_link_box ul li:nth-child(1) {
  background-color: #e9f7f2 !important;
}

.quick_link_box ul li:nth-child(1) a {
  color: #2e6f62 !important;
}

.quick_link_box ul li:nth-child(2) {
  background-color: #fff8e2 !important;
}

.quick_link_box ul li:nth-child(2) a {
  color: #8f742e !important;
}

.quick_link_box ul li:nth-child(3) {
  background-color: #ffe9ec !important;
}

.quick_link_box ul li:nth-child(3) a {
  color: #a04b57 !important;
}

.quick_link_box ul li:nth-child(4) {
  background-color: #f1ecff !important;
}

.quick_link_box ul li:nth-child(4) a {
  color: #5d4fa3 !important;
}

.quick_link_box ul li:nth-child(5) {
  background-color: #f2fce9 !important;
}

.quick_link_box ul li:nth-child(5) a {
  color: #557337 !important;
}

.quick_link_box ul li:nth-child(6) {
  background-color: #e7f3ff !important;
}

.quick_link_box ul li:nth-child(6) a {
  color: #33547f !important;
}

.quick_link_box ul li:nth-child(7) {
  background-color: #fff1e8 !important;
}

.quick_link_box ul li:nth-child(7) a {
  color: #ad5b2b !important;
}

.quick_link_box ul li:nth-child(8) {
  background-color: #eaf4f5 !important;
}

.quick_link_box ul li:nth-child(8) a {
  color: #2d5963 !important;
}

.quick_link_box ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  transition: 1s;
}

.quick_link_box ul li a > span {
  display: block;
  transition: 1s;
}

.quick_link_box ul li a p {
  font-family: 'paperlogy';
  text-align: center;
  margin-bottom: 0;
  margin-top: 5px;
  font-size: 0.89rem;
  line-height: 100%;
  font-weight: 600;
  letter-spacing: -1px;
  transition: 1s;
}

.quick_link_box ul li:nth-child(4) a p {
  margin-top: -5px;
}

.gallery_box {
  position: relative;
  margin-top: 20px;
  z-index: 1;
  opacity: 1;
/*  animation-name: galleryBox;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;*/
}

@keyframes galleryBox { 
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

.gallery_box h3 {
  font-family: 'paperlogy';
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 120%;
  color: #333;
  letter-spacing: -1px;
  margin: 0;
}

.gallery_box h3 span {
  color: #0c856a;
}

.gallery_box ul {
  position: relative;
  display: flex;
  margin-bottom: 0;
  margin-top: 20px;
  margin-right: -15px;
}

.gallery_box ul li {
  position: relative;
  width: calc(50% - 15px);
  margin-right: 15px;
}

.gallery_box ul li a span {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 6px;
  border-radius: 20px;
  box-shadow: 1px 1px 10px 2px #eee;
  padding-top: 68%;
}

.gallery_box ul li a span:before {
  position: absolute;
  display: block;
  content: ' ';
  width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 6px solid #fff;
  top: 0;
  left: 0;
  z-index: 1;
}

.gallery_box ul li a span img {
  display: block;
  border-radius: 25px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery_box ul li a p {
  font-family: 'paperlogy';
  font-weight: 600;
  font-size: 1rem;
  line-height: 150%;
  color: #333;
  margin-bottom: 0;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery_box > p {
  position: absolute;
  width: 34px;
  height: 34px;
  top: -5px;
  right: 0;
  margin-bottom: 0;
}

@media (max-width:1280px) {
  .section1 {
    padding: 15px;
  }

  .main_map_wrap {
    margin-right: 30px;
  }
}

@media (max-width:992px) {
  .section1 {
    flex-direction: column;
    padding: 15px 30px;
  }

  .main_map_wrap {
    width: 100%;
    margin-right: 0;
    max-height: 100%;
  }

  .main_quick_gallery_wrap {
    width: 100%;
    margin-top: 20px;
  }

  .quick_link_box ul li a p {
    font-size: 1.25rem;
  }

  .gallery_box {
    margin-top: 2rem;
  }

  .gallery_box ul {
    margin-right: -30px;
  }

  .gallery_box ul li {
    position: relative;
    width: calc(50% - 30px);
    margin-right: 30px;
  }

  .gallery_box ul li a p {
    font-size: 1.2rem;
  }
}

@media (max-width:600px) {

  .section1 {
    padding: 15px 10px;
  }

  .quick_link_box ul li a p {
    font-size: 1.05rem;
  }

  .gallery_box ul {
    margin-right: -15px;
  }

  .gallery_box ul li {
    position: relative;
    width: calc(50% - 15px);
    margin-right: 15px;
  }
}

@media (max-width:370px) {

  .quick_link_box ul li {
    border-radius: 13px;
  }

  .quick_link_box ul li a {
    min-height: 90px;
  }

  .quick_link_box ul li a > span {
    width: 40px;
  }

  .quick_link_box ul li a p {
    font-size: .95rem;
  }

  .quick_link_box ul li a p span {
    display: inline-block;
  }
}




/* section1 css 끝  */


/*  메인 공지사항 css  */

.main_board_section {
  max-width: 1420px;
  width: 100%;
  display: flex; 
  margin: 0 auto;
  margin-top: 1.5rem;
}

.notice_wrap { 
  width: 61%;
  position: relative;
  margin-right: 60px;
}

.notice_wrap > div { 
  position: relative;
  z-index: 1;
  opacity: 1;
/*  animation-name: noticeBox;
  animation-duration: 1.5s;
  animation-delay: 2s;
  animation-fill-mode: forwards;*/
}

@keyframes noticeBox { 
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

.notice_wrap div > div { 
  position:absolute; 
  display:inline-block; 
  font-size:14px; 
  vertical-align:top; 
  box-sizing:border-box; 
  z-index:0;     
  width: 100%;
  top: 0;
  left: 0;
  margin-top: 55px;
}
.notice_wrap div > div > ul { 
  display:none; 
}
.notice_wrap div > div.on { 
  z-index:2;
  position: relative;
}
.notice_wrap div > div.on > ul { 
  display:flex; 
} 

.notice_wrap .notice_atc h3 {
  position: absolute;
  top: -55px;
  cursor: pointer;
  font-family: 'paperlogy';
  font-size: 1.1rem;
  font-weight: 700;
  padding: 11px 18px;
  color: #333;
  line-height: 100%;
  margin: 0;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
}

.notice_wrap div > div.news h3 {
  left: 110px;
}

.notice_atc h3 span{
  font-weight:600; 
  color:#493722;
}

.notice_wrap .notice_atc > p {
  position: absolute;
  width: 34px;
  height: 34px;
  top: -50px;
  right: 0;
  display: none;
  margin: 0;
}

.notice_wrap .notice_atc > p a {
  display: flex;
  align-items: center;
  height: 26px;
}

.notice_wrap .notice_atc > p span {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  color: #000;
  margin-right: 10px;
}

.notice_wrap .notice_atc.on h3 {
  background-color: #0c856a;
  color: #fff;
  border-color: #0c856a;
}

.notice_wrap .notice_atc.on > p {
  display: block;
}

.notice_wrap .notice_atc > ul {
  flex-wrap: wrap;
  margin: 0;
  margin-right: -10px;
}

.notice_wrap .notice_atc > ul li {
  width: calc(50% - 10px);
  list-style: none; 
  position: relative; 
  font-weight: 400;
  margin-right: 10px;
}

.notice_wrap .notice_atc > ul li:nth-child(1),
.notice_wrap .notice_atc > ul li:nth-child(2) {
  margin-bottom: 10px;
}

.notice_wrap .notice_atc > ul li a {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid #d4d5d5;
  border-radius: 10px;
  background-color: #f2f4f8;
}

.notice_wrap .notice_atc > ul li a p {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 130%;
  word-break: break-all;
}

.notice_wrap .notice_atc > ul li a p.notice_title {
  font-family: 'paperlogy';
  font-size: 0.94rem;
  color: #333;
  font-weight: 700;
  height: 2.5rem;
  margin-bottom: 0;
}

.notice_wrap .notice_atc > ul li a span {
  display: block;
  font-family: 'paperlogy';
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 130%;
  color: #777;
  letter-spacing: -1px;
}

.main_banner_art > div { 
  position: relative;
  z-index: 1;
  opacity: 1;
/*  animation-name: bannerBox;
  animation-duration: 1.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;*/
}

@keyframes bannerBox { 
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

.main_banner_art h3 {
  font-family: 'paperlogy';
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 120%;
  color: #333;
  letter-spacing: -1px;
  margin: 0;
  text-shadow: 0px 0px 10px rgb(102 102 102 / 0.2);
}

.main_banner_art h3 span {
  color: #0c856a;
}

.main_banner_ul {
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;
  padding: 0;
  margin: 0;
  margin-top: 15px;
  box-shadow: 1px 1px 10px 2px #eee;
  border-radius: 20px;
}

.main_banner_ul:before {
  content: ' ';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 20px;
  border: 7px solid #fff;
  z-index: 2;
  pointer-events: none;
}

.main_banner_ul.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.main_banner{
  width: 39%; 
}


.main_banner li{
  list-style: none; 
  height: 100%; 
}

.main_banner li a{
  display: block; 
  width: 100%; 
  height: 100%;
}

.main_banner_art{ 
  position: relative; 
}

.main_banner_ul div{
  padding: 0; 
  margin: 0;
  border-radius: 25px;
}

.popup-btn {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 5px;
  right: 5px;
  background: #fff;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 10px;
  padding: 0 15px;
  min-width: 180px;
  height: 40px;
  font-size: 1rem;
  color: #fff;
  z-index: 3;
}

.slick-control2{
  cursor:pointer;
  border:0;
  display:block;
  width: 13px;
  height: 17px;
  z-index:10;
  overflow:hidden;
  background: transparent;
  float: left;
  vertical-align: top;
  margin: 0 12px;
}


.slick-control2:before {
  content: "";
  display: block;
  width: 13px;
  height: 17px;
  background: url('/cmmn/download.do?idx=112799') no-repeat;
}

.slick-control2.paused:before {
  content: "";
  display: block;
  width: 13px;
  height: 17px;
  background: url('/cmmn/download.do?idx=112797') no-repeat;
}

.slick-arrow2 {
  display: inline-block;
  vertical-align: top;
  border:0;
  background:transparent;
}

.slick-arrow2.fb-prev2:before {
  content: "";
  display: block;
  width: 12px;
  height: 16px;
  background: url('/cmmn/download.do?idx=112796') no-repeat;
}

.slick-arrow2.fb-next2:before {
  content: "";
  display: block;
  width: 12px;
  height: 16px;
  background: url('/cmmn/download.do?idx=112798') no-repeat;
}

#slick-log2 {
  color: #035c48;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -1px;
  margin-right: 20px;
  line-height: 100%;
}

#slick-log2 span {
  display: inline-block;
  width: 25px;
}

#slick-log2 span:first-child {
  text-align: right;
}

.slick-slide img {
  width:100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 20px;
  padding: 6px;
}

.slick-track{
  line-height: 0;
}


@media (max-width: 1280px) {
  .main_board_section {
    padding: 0 15px;
  }

  .notice_wrap {
    margin-right: 30px;
  }
}

@media (max-width: 992px) {
  .main_board_section {
    flex-direction: column;
    padding: 0 30px;
    margin-top: 2rem;
  }

  .notice_wrap { 
    width: 100%;
  }

  .notice_wrap .notice_atc{
    width:100%; 
    margin-right: 0px;
  }

  .notice_wrap div > div.news h3 {
    left: 100px;
  }

  .notice_wrap .notice_atc > ul li:last-child{
    margin-bottom: 0px;
  }

  .main_banner{
    width: 100%; 
    margin-top: 2rem;
  }

  .slick-slide img {
    max-height: 100%;
  }
}

@media (max-width: 600px) {

  .main_board_section {
    padding: 0 10px;
  }

  .notice_wrap .notice_atc h3 {
    padding: 12px 15px;
    font-size: 1rem;
  }

  .notice_wrap div > div.news h3 {
    left: 90px;
  }

  .notice_wrap div > div > ul {
    flex-direction: column;
  }

  .notice_wrap .notice_atc > ul {
    margin-right: 0;
  }

  .notice_wrap .notice_atc > ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .notice_wrap .notice_atc > ul li:last-child {
    margin-bottom: 0;
  }

  .notice_wrap .notice_atc > p span {
    display: none;
  }

}


/*  메인 공지사항 css 끝  */