@charset "utf-8";

:root {
  --arrow-icon1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.7333 10.102L11.6078 1.19217L2.69802 1.06668M11.6078 1.19217L1.06665 11.7333' stroke='%23000' stroke-width='2.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-icon2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.7333 10.102L11.6078 1.19217L2.69802 1.06668M11.6078 1.19217L1.06665 11.7333' stroke='%230080FB' stroke-width='2.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-icon3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.7333 10.102L11.6078 1.19217L2.69802 1.06668M11.6078 1.19217L1.06665 11.7333' stroke='%23004EA1' stroke-width='2.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-icon_on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M11.7333 10.102L11.6078 1.19217L2.69802 1.06668M11.6078 1.19217L1.06665 11.7333' stroke='%23fff' stroke-width='2.13333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* CSS Document */
@media all and (max-width:960px) {
    html, body { font-size:13px; }
}
@media all and (max-width:640px) {
    html, body { font-size:12px; }
}

/* common */
.inner {width:1200px; margin:0 auto}
.hid {display:none}
@media screen and (max-width:1200px){
    .inner {width:96%; margin:0 auto}
}

/* visual */
#visual { margin:3.44rem 0 6.25rem;padding:0 1.25rem;background:#fff;}
#visual .inner {display:flex; overflow:hidden; width:100%; max-width:75rem; height:37.5rem; border-radius:1.25rem;background:#fff;}
#visual .visual_img {position:relative; flex:0 0 67.75%; min-width:0; overflow:hidden; background:#e1e1e1 url(../images/main_2026/img_mayor.jpg) no-repeat center / cover;}
#visual .visual_img::after {content:""; position:absolute; right:0; bottom:0; left:0; height:47.334%; background:linear-gradient(to bottom,rgba(2,2,74,0),#02024a); pointer-events:none;}
#visual .visualTxt {position:absolute; z-index:1; right:3.125rem; bottom:3rem; left:3.125rem; color:#fff; font-family:'Jeju Myeongjo','Batang','Times New Roman',serif; font-weight:400; letter-spacing:-.03em;}
#visual .visualTxt q {display:block; margin-bottom:1.5rem; font-size:1.875rem; line-height:1.25;}
#visual q::before,
#visual q::after { content:'"'; }
#visual .visualTxt strong {display:block; font-size:3.75rem; font-weight:400; line-height:1.167;}
#visual .quickMenu {display:flex; flex:1 1 auto; min-width:0; flex-direction:column;}
#visual .quickLink {flex:0 0 18.75rem;}
#visual .quickLink li {height:6.25rem;}
#visual .quickLink li:nth-child(1) {background:#ededed; color:#222;}
#visual .quickLink li:nth-child(2) {background:#0080fb; color:#fff;}
#visual .quickLink li:nth-child(3) {background:#004ea1; color:#fff;}
#visual .quickLink a {display:flex; position:relative; height:100%; padding:0 4.375rem 0 1.6875rem; flex-direction:column; justify-content:center; color:inherit; box-sizing:border-box; text-decoration:none;}
#visual .quickLink q {margin-bottom:0.25rem; font-size:0.875rem; line-height:1.2; white-space:nowrap;}
#visual .quickLink strong {font-size:1.5rem; font-weight:700; line-height:1.2;}
#visual .quickLink i {position:absolute; bottom:1.44rem; right:1.25rem; width:2rem; height:2rem; border-radius:50%; background:#fff no-repeat center / .66669rem auto;}
#visual .quickLink li:nth-child(1) i { background-image:var(--arrow-icon1); }
#visual .quickLink li:nth-child(2) i { background-image:var(--arrow-icon2); }
#visual .quickLink li:nth-child(3) i { background-image:var(--arrow-icon3); }
#visual .quickLink a:hover i,
#visual .quickLink a:focus i { background-color:#000; background-image:var(--arrow-icon_on); }
#visual .quickLink li:first-child i::before {background:#fff;}
#visual .calendarArea {position:relative; flex:1 1 auto; min-height:0; padding:2.4375rem 1.3125rem 1.5625rem 1.6875rem; background:#01184a; color:#fff; box-sizing:border-box;}
#visual .calendarArea h3 {margin:0 0 1.75rem; color:#fff0b4; font-size:1rem; font-weight:700; line-height:1.2;}
#visual .list_box {position:relative; height:12.5rem;}
#visual .list_box .slick-list,
#visual .list_box .slick-track,
#visual .list_box .slick-slide,
#visual .list_box .slick-slide>div {height:100%;}
#visual .list_box a {display:block; color:#fff; text-decoration:none;}
#visual .list_box .tit {display:-webkit-box; overflow:hidden; width:17.9375rem; font-size:1.875rem; font-weight:700; line-height:2.125rem; letter-spacing:-.03em; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
#visual .list_box .date {display:block; margin-top:0.875rem; color:rgba(255,255,255,.8); font-size:0.875rem; line-height:1.2; letter-spacing:-.01em;}
#visual .list_box .slick-prev,
#visual .list_box .slick-next {position:absolute; z-index:2; right:0; bottom:1.38rem; width:1rem; height:1.0625rem; padding:0; border:0; background:transparent; color:transparent; font-size:0; cursor:pointer;}
#visual .list_box .slick-prev {right:1rem;}
#visual .list_box .slick-prev::before,
#visual .list_box .slick-next::before {content:""; position:absolute; top:0.3125rem; width:0.375rem; height:0.375rem; border-top:0.0625rem solid #fff; border-right:0.0625rem solid #fff;}
#visual .list_box .slick-prev::before {left:0.375rem; transform:rotate(-135deg);}
#visual .list_box .slick-next::before {right:0.375rem; transform:rotate(45deg);}
#visual .list_box .slick-dots {display:flex; position:absolute; right:3.6875rem; bottom:1.38rem; left:0; align-items:center; gap:0.75rem; height:1.0625rem; margin:0; padding:0; list-style:none;}
#visual .list_box .slick-dots li {display:flex; align-items:center; gap:0.5625rem; margin:0; color:rgba(255,255,255,.5); font-size:0.875rem; line-height:1.0625rem;}
#visual .list_box .slick-dots button {display:block; padding:0; border:0; background:transparent; color:inherit; font:inherit; line-height:inherit; cursor:pointer;}
#visual .list_box .slick-dots .slick-active {color:#fff; font-weight:700;}
#visual .list_box .slick-dots .slick-active:not(:last-child)::after {content:""; display:block; width:1.25rem; height:0.0625rem; background:rgba(255,255,255,.8);}
#visual .list_box .slick-dots .slick-active:last-child::before {content:""; display:block; width:1.25rem; height:0.0625rem; background:rgba(255,255,255,.8);}

@media (max-width:56.25rem) {
  #visual .inner {height:auto; flex-direction:column;}
  #visual .visual_img {flex:none; width:100%; height:37.5rem;}
  #visual .visualContent {flex:none; width:100%;}
  #visual .quickLink {display:grid; flex-basis:auto; grid-template-columns:repeat(3,1fr);}
  #visual .quickLink li {height:7.5rem;}
  #visual .quickLink i {top:2.75rem;}
  #visual .calendarArea {min-height:18.75rem;}
}
@media (max-width:40rem) {
  #visual {padding:0 0.75rem;}
  #visual .inner {border-radius:0.875rem;}
  #visual .visual_img {height:30rem; background-position:58% center;}
  #visual .visualTxt {right:1.5rem; bottom:1.75rem; left:1.5rem;}
  #visual .visualTxt span {margin-bottom:0.875rem; font-size:1.25rem;}
  #visual .visualTxt strong {font-size:2.5rem;}
  #visual .quickLink {display:block;}
  #visual .quickLink li {height:6.25rem;}
  #visual .quickLink i {top:2.125rem;}
  #visual .calendarArea {padding-right:1.25rem; padding-left:1.5rem;}
  #visual .list_box .tit {width:calc(100% - 1.5625rem); font-size:1.5625rem; line-height:1.875rem;}
  #visual .list_box .slick-dots {left:0;}
}

/* photo */
#photo {
  margin: 6.25rem 1.25rem;
  background: #fff;
}

#photo h2 { margin-bottom:3.13rem; text-align:center; font-size: 3.125rem; line-height:normal; }
#photo .inner {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
}

#photo .tab_btn {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 2rem;
}

#photo .tab_btn li {
  margin: 0;
}

#photo .tab_btn .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.125rem;
  padding: 0 1.8125rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.4);
  border-radius: 1.5625rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
}

#photo .tab_btn .tab.on {
  border-color: #01184a;
  background: #01184a;
  color: #fff;
  font-weight: 700;
}

#photo .tab_con > ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 13.125rem 13.125rem;
  gap: 1.25rem;
  width: 100%;
  height: 27.5rem;
}
#photo .tab_con > ul.blockLayout { display:flex; justify-content:center; align-items:center;}

#photo .tab_con > ul > li {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 1.25rem;
  background: #c3c3c3;
}

#photo .tab_con > ul > li:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

#photo .tab_con > ul > li:nth-child(2) {
  grid-column: 3 / span 2;
  grid-row: 1;
}

#photo .tab_con > ul > li:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
}

#photo .tab_con > ul > li:nth-child(4) {
  grid-column: 4;
  grid-row: 2;
}

#photo .tab_con > ul > li:nth-child(5) {
  grid-column: 5 / span 2;
  grid-row: 1 / span 2;
}

#photo .tab_con > ul > li:nth-child(n + 6) {
  display: none;
}

#photo .tab_con > ul > li > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}

#photo .tab_con > ul > li > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0) 45%
  );
}

#photo .tab_con .thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#photo .tab_con .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.4s;
}

#photo .tab_con a:hover .thumb img,
#photo .tab_con a:focus-visible .thumb img {
  transform: scale(1.04);
}

#photo .tab_con .txt {
  position: absolute;
  z-index: 1;
  right: 1.875rem;
  bottom: 1.5625rem;
  left: 1.875rem;
  padding: 0;
  background: none;
  text-align: left;
}

#photo .tab_con .txt {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#photo .tab_con > ul > li:nth-child(3) .txt,
#photo .tab_con > ul > li:nth-child(4) .txt,
#photo .tab_con > ul > li:nth-child(3) a::after,
#photo .tab_con > ul > li:nth-child(4) a::after {
  display: none;
}

@media (max-width: 47.9375rem) {
  #photo {
    padding: 3.75rem 1rem;
  }

  #photo .tab_btn {
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 -1rem 1.5rem;
    padding: 0 1rem 0.25rem;
  }

  #photo .tab_btn .tab {
    height: 2.75rem;
    padding: 0 1.375rem;
    border-radius: 1.375rem;
    font-size: 1rem;
    white-space: nowrap;
  }

  #photo .tab_con > ul {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 17.5rem;
    gap: 0.75rem;
    height: auto;
  }

  #photo .tab_con > ul > li:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #photo .tab_con > ul > li:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #photo .tab_con > ul > li:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  #photo .tab_con > ul > li:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  #photo .tab_con > ul > li:nth-child(-n + 5) {
    display: block;
    grid-column: 1;
    grid-row: auto;
  }

  #photo .tab_con > ul > li:nth-child(3) .txt,
  #photo .tab_con > ul > li:nth-child(4) .txt {
    display: -webkit-box;
  }

  #photo .tab_con > ul > li:nth-child(3) > a::after,
  #photo .tab_con > ul > li:nth-child(4) > a::after {
    display: block;
  }
}