/* Sub 콘텐츠 관련 CSS 작성 */

/* 공원안내 > 공원소개 { */
#introduce {background: url('../img/intro-page-bg.png') no-repeat bottom right -29px;}
.intro-text01 {font-weight: 400; font-size: 40px; color: var(--black-color); line-height: 1.375; text-align: center; margin-bottom: 50px;}
.intro-text01 b {color: #127F58;}
.intro-img01 {font-size: 0; border-radius: 30px 0 30px 0; overflow: hidden; height: 0; padding-bottom: 40.625%; position: relative;}
.intro-img01 img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
.intro-text02 {font-weight: 400; font-size: 24px; margin-top: 50px; line-height: 1.458; text-align: center; padding-bottom: 70px;}
.intro-text02 b {}

.intro-history {}
.intro-history-title {font-weight: 600; font-size: 32px; color: var(--black-color); line-height: 1.09; position: relative; display: inline-block; margin-bottom: 50px;}
.intro-history-title::before {content: ''; width: 21px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--main-color); position: absolute; top: -10px; right: -10px; z-index: -1;}
.intro-history-content {position: relative;}
.intro-history-content::before {content: ''; width: 1px; height: 98%; background-color: var(--color-ddd); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.intro-history-item {display: flex; align-items: flex-start; position: relative;}
.intro-history-item::before {content: ''; width: 32px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--white-color); border: 1px solid var(--main-color); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.intro-history-item::after {content: ''; width: 18px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--main-color); position: absolute; top: 8px; left: 50%; transform: translateX(-50%);}
.intro-history-item ~ .intro-history-item {margin-top: 50px;}
.intro-history-item > * {width: 50%; padding: 0 86px;}
.intro-history-item .date {text-align: right; font-weight: 700; font-size: 24px; color: var(--black-color);}
.intro-history-item .content {font-weight: 400; font-size: 24px; color: var(--black-color);}
/* } 공원안내 > 공원소개 */

/* 공원안내 > 오시는 길 / 주차안내 { */
.map-box {border-radius: 30px 0 30px 0; overflow: hidden; position: relative; width: 100%;}
.root_daum_roughmap {padding-bottom: 37.5%; width: 100%;}
.root_daum_roughmap .wrap_map {position: absolute!important; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%!important; z-index: 1;}
.root_daum_roughmap .wrap_controllers {display: none!important;}
.root_daum_roughmap .cont {display: none!important;}
.root_daum_roughmap .map_border {display: none!important;}
/* } 공원안내 > 오시는 길 / 주차안내 */

/* 촬영명소 10선 > 전체보기 { */
.filming-btn-list {display: flex; align-items: flex-start; gap: 28px 10px; flex-wrap: wrap;}
.filming-btn {display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; width: calc((100% - (10px * 4)) / 5); aspect-ratio: 1 / 1; border-radius: 20px 0 20px 0; overflow: hidden; color: var(--white-color); background-color: var(--main-color); transition: .3s;}
@media screen and (min-width:1025px) {
  .filming-btn:hover {animation: jelly 0.5s; box-shadow: 0 5px 4px rgba(0,0,0,0.15);}
}
.filming-btn.btn-01 {background: url('../img/filming-btn-bg01.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-02 {background: url('../img/filming-btn-bg02.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-03 {background: url('../img/filming-btn-bg03.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-04 {background: url('../img/filming-btn-bg04.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-05 {background: url('../img/filming-btn-bg05.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-06 {background: url('../img/filming-btn-bg06.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-07 {background: url('../img/filming-btn-bg07.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-08 {background: url('../img/filming-btn-bg08.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-09 {background: url('../img/filming-btn-bg09.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn.btn-10 {background: url('../img/filming-btn-bg10.png') no-repeat bottom 9px right 15px var(--main-color);}
.filming-btn .num {font-weight: 500; font-size: 20px; line-height: 1.75;}
.filming-btn .text-kor {font-weight: 600; font-size: 32px; line-height: 1.093; margin: 17px 0 5px;}
.filming-btn .text-eng {font-weight: 400; font-size: 16px;}
@keyframes jelly {
  25% {transform: scale(0.9,1.1);}
  50% {transform: scale(1.1,0.9);}
  75% {transform: scale(0.95,1.05);}
}

.filming-slide-layout {display: flex; align-items: flex-start; align-items: stretch; border-radius: 30px 0 30px 0; overflow: hidden;}
.filming-slide-layout > * {width: 50%;}
.filming-slide-left {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: var(--main-color); color: var(--white-color); position: relative;}
.filming-slide-left .num {font-weight: 500; font-size: 32px; line-height: 1.093;}
.filming-slide-left .text-kor {font-weight: 600; font-size: 50px; line-height: 1; margin: 20px 0 10px;}
.filming-slide-left .text-eng {font-weight: 400; font-size: 16px;}
.filming-slide-left .icon {position: absolute; bottom: 15px; right: 10px; transform: scale(1.7);}
.filming-slide-right {overflow: hidden;}
.filming-slider {position: relative; width: 100%;}
.filming-slide {}
.filming-slide .thumb {font-size: 0; position: relative; height: 0; padding-bottom: 56.25%;}
.filming-slide .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}

.filming-ctr {display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; top: 20px; right: 20px; z-index: 1; border-radius: 20px; height: 36px; background-color: var(--white-color); width: 150px; box-shadow: 0 4px 4px rgba(0,0,0,0.1);}
.filming-ctr .paging {display: flex; align-items: center; gap: 6px;}
.filming-ctr .paging p {font-weight: 600; font-size: 14px; color: var(--color-333); letter-spacing: -0.5px; position: relative;}
.filming-ctr .paging p::before {content: ''; width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-333); position: absolute; top: 50%; left: -5px; transform: translateY(-50%);}
.filming-ctr .paging p:first-child::before {display: none;}
.filming-ctr .paging .cur {color: var(--main-color);}
.filming-ctr .btns {display: flex; align-items: center; gap: 3px;}
.filming-ctr .btns button {border: none; background-color: transparent; font-size: 0;}
.filming-ctr .btns button i {font-size: 17px;}
.filming-ctr .btns .pause {display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 20px; aspect-ratio: 1 / 1; background-color: var(--main-color); color: var(--white-color); font-weight: 500; font-size: 14px;}
.filming-ctr .btns .pause i {font-size: 14px;}

.filming-details {padding-top: 40px;}
.filming-img-list {display: flex; align-items: flex-start; gap: 15px; flex-wrap: wrap;}
.filming-img {font-size: 0; width: calc((100% - (15px * 3)) / 4); position: relative; height: 0; padding-bottom: 14.813%; overflow: hidden;}
.filming-img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
/* } 촬영명소 10선 > 전체보기 */

/* ====================  반응형 ==================== */
@media screen and (max-width:1440px) {
  /* 공원안내 > 공원소개 { */
  #introduce {background-size: 30%;}
  .intro-text01 {font-size: 36px; margin-bottom: 30px;}
  .intro-text02 {font-size: 22px; margin-top: 30px;}

  .intro-history-title {font-size: 28px; margin-bottom: 30px;}
  .intro-history-item > * {padding: 0 60px;}
  .intro-history-item .date {font-size: 22px;}
  .intro-history-item .content {font-size: 22px;}
  /* } 공원안내 > 공원소개 */

  /* 촬영명소 10선 { */
  .filming-btn {padding: 0 10px; aspect-ratio: 1 / 1.2;}
  .filming-btn .num {font-size: 18px;}
  .filming-btn .text-kor {font-size: 26px; margin-top: 10px;}

  .filming-slide-left .num {font-size: 28px;}
  .filming-slide-left .text-kor {font-size: 44px;}

  .filming-details {padding-top: 20px;}
  /* } 촬영명소 10선 */
}
@media screen and (max-width:1024px) {
  /* 공원안내 > 공원소개 { */
  .intro-text01 {font-size: 32px;}
  .intro-text02 {font-size: 18px;}

  .intro-history-title {font-size: 24px;}
  .intro-history-item::before {width: 26px;}
  .intro-history-item::after {width: 14px; top: 7px;}
  .intro-history-item > * {padding: 0 40px;}
  .intro-history-item .date {font-size: 18px;}
  .intro-history-item .content {font-size: 18px;}
  /* } 공원안내 > 공원소개 */

  /* 촬영명소 10선 { */
  .filming-btn-list {justify-content: center; gap: 20px 10px;}
  .filming-btn {width: calc((100% - (10px * 3)) / 4);}
  .filming-btn .text-kor {font-size: 22px;}
  .filming-btn .text-eng {font-size: 14px;}

  .filming-ctr {border-radius: 10px; top: 10px; right: 10px; width: 134px;}

  .filming-slide-left .num {font-size: 24px;}
  .filming-slide-left .text-kor {font-size: 34px; margin-top: 10px;}
  .filming-slide-left .icon {bottom: 0; right: -2px; transform: scale(1.2);}

  .filming-img-list {gap: 10px;}
  .filming-img {width: calc((100% - (10px * 3)) / 4);}
  /* } 촬영명소 10선 */
}
@media screen and (max-width:768px) {
  /* 공원안내 > 공원소개 { */
  .intro-text01 {font-size: 24px; margin-bottom: 20px;}
  .intro-img01 {border-radius: 10px 0 10px 0;}
  .intro-text02 {font-size: 16px; padding-bottom: 30px; margin-top: 20px;}

  .intro-history-title {font-size: 20px; margin-bottom: 20px;}
  .intro-history-title::before {width: 16px;}
  .intro-history-content::before {left: 11px; transform: none; height: 94%;}
  .intro-history-item {flex-direction: column; padding-left: 30px;}
  .intro-history-item ~ .intro-history-item {margin-top: 30px;}
  .intro-history-item::before {width: 20px; left: 0; transform: none;}
  .intro-history-item::after {width: 12px; left: 5px; top: 5px; transform: none;}
  .intro-history-item > * {padding: 0; width: 100%;}
  .intro-history-item .date {font-size: 16px; text-align: left;}
  .intro-history-item .content {font-size: 16px; margin-top: 4px;}
  /* } 공원안내 > 공원소개 */

  /* 공원안내 > 오시는 길 / 주차안내 { */
  .map-box {border-radius: 10px 0 10px 0;}
  /* } 공원안내 > 오시는 길 / 주차안내 */

  /* 촬영명소 10선 { */
  .filming-btn-list {gap: 5px;}
  .filming-btn {width: calc((100% - (5px * 2)) / 3); border-radius: 10px 0 10px 0; background-size: 32%!important;}
  .filming-btn .num {font-size: 15px;}
  .filming-btn .text-kor {font-size: 18px;}
  .filming-btn .text-eng {font-size: 12px;}

  .filming-ctr {gap: 4px; height: 30px; width: 120px; border-radius: 5px;}
  .filming-ctr .paging p {font-size: 12px;}

  .filming-slide-layout {border-radius: 10px 0 10px 0; flex-direction: column;}
  .filming-slide-layout > * {width: 100%;}
  .filming-slide-left {padding: 30px 0;}
  .filming-slide-left .num {font-size: 20px;}
  .filming-slide-left .text-kor {font-size: 24px;}
  .filming-slide-left .text-eng {font-size: 14px;}
  .filming-slide-left .icon {bottom: -5px; transform: scale(1);}

  .filming-img-list {gap: 5px;}
  .filming-img {width: calc((100% - (5px * 1)) / 2); padding-bottom: 30%;}
  /* } 촬영명소 10선 */
}
@media screen and (max-width:425px) {
  /* 공원안내 > 공원소개 { */
  .intro-text01 {font-size: 20px;}
  .intro-text01 br {display: none;}
  .intro-text02 {font-size: 15px;}
  .intro-text02 br {display: none;}

  .intro-history-title {font-size: 18px;}
  .intro-history-item ~ .intro-history-item {margin-top: 20px;}
  .intro-history-item .date {font-size: 15px;}
  .intro-history-item .content {font-size: 14px;}
  /* } 공원안내 > 공원소개 */

  /* 촬영명소 10선 { */
  .filming-btn {width: calc((100% - (5px * 1)) / 2); aspect-ratio: 1 / 1;}
  .filming-btn .num {font-size: 14px;}
  .filming-btn .text-kor {font-size: 16px;}
  .filming-btn .text-eng {font-size: 10px;}

  .filming-slide-left {padding: 22px 0;}
  .filming-slide-left .num {font-size: 18px;}
  .filming-slide-left .text-kor {font-size: 20px;}
  .filming-slide-left .text-eng {font-size: 12px;}
  .filming-slide-left .icon {transform: scale(0.9);}
  /* } 촬영명소 10선 */
}