/* 폰트 */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Bold.otf') format('otf');
  font-weight: 700;
  font-style: bold;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Medium.otf') format('otf');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Light.otf') format('otf');
  font-weight: 300;
  font-style: lighter;
}




/*header*/
body {background: #FCFDFE;  z-index: 999;}
body.gwangju {border-top: 8px solid #00a143;}
body.busan {border-top: 8px solid #0042D0;}
body.daejeon {border-top: 8px solid #ff6600;}
#contents, .footer-inner {max-width: 1280px; margin: 0 auto;}

#header {box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;  position: sticky;
top: 0; z-index: 99; background: #fff;}
.header_wrap {display: flex; justify-content: space-between; align-items: center; width: 1280px; margin: 0 auto;}
.header-util {display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.menu-btn {display: flex; flex-direction: column; justify-content: space-evenly; width:32px; height: 32px; align-items: center;}
.menu-btn span {display: block; background: #1A1A1A; width: 24px; height: 2px; border-radius: 10px;}
.gnb .depth1 {display: flex; gap: 60px;}
.gnb .depth1 > li {position: relative;}
.gnb .depth1 > li > a {display: flex; align-items: center; height: 100px; font-weight: 600; font-size: 20px;}
.gnb .depth2 {position: absolute; top: 80%; left: 50%; transform: translateX(-50%); min-width: 180px; padding: 16px; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.08); opacity: 0; visibility: hidden; transition: .25s; line-height: 2rem; font-size: 16px; text-align: center;}
.gnb .depth1 > li:hover .depth2, .gnb .depth1 > li:focus-within .depth2 {opacity: 1; visibility: visible;}

.all-depth1 {display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px;}
.all-depth1 > li > strong {display: block; margin-bottom: 20px; font-size: 22px; font-weight: 700;}
.all-depth2 {display: flex; flex-direction: column; gap: 12px;}

.m-menu {position: fixed; top: 0; left: -100%; z-index: 9999; width: 100%; height: 100vh; transition: left .3s;}
.m-menu.open {left: 0;}
.m-menu-list {width: 320px; max-width: 85%; height: 100%; overflow-y: auto; background: #fff;}

/*footer*/
#footer {background: #23283C;}
.footer-inner {display: flex; color: #ddd; gap: 100px; line-height: 1.6rem; font-size: 17px;}
.footer-info ul {display: flex; gap:30px; margin-bottom: 30px;}
.footer-info ul li:first-child {font-weight: bold;}
#footer a:hover {color: #fff !important;}


/*main*/
#contents {padding: 40px 0; display: flex; flex-direction: column; gap: 30px;}

.main-visual {display: grid; grid-template-columns: 3fr 1fr; gap: 20px;}
.info-banner-wrap {display: grid; grid-template-columns: 1fr 2fr; gap: 28px; }

/*법놀이터체험연수*/
.program-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.program-list li {border-radius: 30px; border: 1px solid #EFF1F5; text-align: center; padding: 30px 24px;}
.program-list li img {width: 120px;}
.program-list li strong {display: block; font-size: 28px; margin-top: 20px;}
.program-list li > span {color: #1A1A1A; font-weight: bold; font-size: 18px; display: block; margin: 16px 0 16px; }
.program-list li p {color: #555555;line-height: 1.4rem; font-size: 16px;}
.program-list li.type-orange {border-top: 10px solid #FD7D35; background: #FEFAF2; color: #FD7D35;}
.program-list li.type-blue {border-top: 10px solid #1E60D4; background: #EFF1F5; color: #1E60D4;}
.program-list li.type-green {border-top: 10px solid #44A068; background: #F6FBF5; color: #44A068;}
.maincard_arrow {font-size: 16px; font-weight: bold; margin-top: 20px;}
.maincard_arrow a {display: inline-block; padding: 14px 20px; border-radius: 999px; font-size: 16px; background: #fff;}
.maincard_arrow a {position: relative; isolation: isolate; overflow: hidden; color: inherit; transition: box-shadow .25s, transform .25s;}
.maincard_arrow a::before {content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: inherit; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s;}
.maincard_arrow a:hover {transform: translateY(-2px);}
.maincard_arrow a:hover::before {opacity: 1; transform: scale(1);}
.program-list li.type-orange .maincard_arrow a:hover {box-shadow: 0 10px 10px rgba(252, 133, 54, 0.08);}
.program-list li.type-blue .maincard_arrow a:hover {box-shadow: 0 10px 10px rgba(54, 84, 252, 0.08);}
.program-list li.type-green .maincard_arrow a:hover {box-shadow: 0 10px 10px rgba(54, 252, 153, 0.08);}


.program-list li.type-orange .maincard_arrow a {border: 1px solid #FD7D35;}
.program-list li.type-orange .maincard_arrow a:last-child {background: #FD7D35; color: #fff;}
.program-list li.type-blue .maincard_arrow a {border: 1px solid #1E60D4;}
.program-list li.type-blue .maincard_arrow a:last-child {background: #1E60D4; color: #fff;}
.program-list li.type-green .maincard_arrow a {border: 1px solid #44A068;}
.program-list li.type-green .maincard_arrow a:last-child {background: #44A068; color: #fff;}
.program-list li.type-green a {padding: 14px 10px;}
.daejeon .program-list li.type-green .maincard_arrow {display: grid; grid-template-columns: repeat(3, 1fr);} 
.daejeon .program-list li.type-green .maincard_arrow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4px;
    row-gap: 6px;
}

.daejeon .program-list li.type-green .maincard_arrow > :first-child {grid-column: 1 / -1;}
.gwangju .program-list li.type-green a {padding: 14px 18px;}

.icon-arrow{display:inline-block; width:8px; height:10px; margin-left:6px; background-color:#FD7D35; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath fill='black' d='M1.05857 0.000206632C0.852216 -0.00369422 0.649579 0.0477192 0.478826 0.147378C0.308074 0.247037 0.177691 0.390016 0.105804 0.556308C0.0339176 0.722601 0.0240998 0.903987 0.0777152 1.0753C0.131331 1.24661 0.245715 1.39923 0.404966 1.51209L6.4813 5.9862L0.404966 10.4587C0.294805 10.5283 0.202546 10.6167 0.13397 10.7183C0.0653934 10.82 0.0219761 10.9327 0.00643628 11.0495C-0.00910353 11.1662 0.00356934 11.2845 0.0436611 11.3968C0.0837529 11.5091 0.1504 11.6132 0.239428 11.7024C0.328457 11.7915 0.437949 11.8639 0.561048 11.915C0.684147 11.9661 0.818202 11.9948 0.954816 11.9994C1.09143 12.0039 1.22766 11.9842 1.35498 11.9414C1.48229 11.8986 1.59795 11.8336 1.69471 11.7506L8.65156 6.63464C8.76081 6.55451 8.84854 6.45505 8.90869 6.34296C8.96885 6.23086 9 6.10886 9 5.98541C9 5.86197 8.96885 5.73996 8.90869 5.62787C8.84854 5.51578 8.76081 5.41622 8.65156 5.33609L1.69471 0.215205C1.51897 0.0810394 1.29356 0.00495992 1.05857 0.000206632Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.icon-arrow.orange{background-color:#FD7D35;}
.icon-arrow.blue{background-color:#1E60D4;}
.icon-arrow.green{background-color:#44A068;}
.icon-arrow.white{background-color:#fff;}


/*공통*/
.section-title {display: flex; justify-content: space-between; color: #1A3070; font-size: 50px; margin-bottom: 20px; align-items: center;}
.section-title h2 {font-size: 30px;}
.contbox {padding: 36px 32px; background: #fff; border: 1px solid #EFF1F5; border-radius: 30px; box-shadow: 0 5px 20px rgba(167, 167, 167, 0.08); display: flex; flex-direction: column; justify-content: space-between;}
.icon_left li { padding:20px 0 20px 58px;}
.icon_left li span {color: #555;}
.icon_left strong {display: block; margin-bottom: 10px; font-size: 18px;}

/*공지사항*/
.notice-box p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #1A1A1A; max-width: 230px;}
.notice-box time {color: #555555; }
.notice-box li {border-bottom: 1px dashed #ddd; }
.notice-box li:last-child {border-bottom:0;}
.notice-box .icon_left li {background: url('../images/notice.svg')no-repeat 0%;  background-size: 46px;}

/*관람안내*/

.guide-box .icon_left li {padding: 16px 0 16px 60px;}
.guide-box .icon_left li:first-child {background: url('../images/clock.svg')no-repeat 0%; background-size: 50px;}
.guide-box .icon_left li:last-child {background: url('../images/calendar.svg')no-repeat 0%; background-size: 50px;}
.reserve-btn {background: #1A3070; border-radius: 999px; color: #fff; padding: 18px; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 6px;}
.reserve-btn:hover {color: #fff;}

/*슬라이드배너*/
.mainBannerSwiper {width: 100%; max-width: 100%; overflow: hidden; border-radius: 30px;}
.mainBannerSwiper .swiper-wrapper {width: 100%;}
.mainBannerSwiper .swiper-slide {flex-shrink: 0; width: 100%; overflow: hidden;}
.mainBannerSwiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.main-banner-control {position: absolute; left: 32px; bottom: 40px; z-index: 10;  display: flex; align-items: center; gap: 18px; padding: 19px 28px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); color: #999;}
.main-banner-fraction {display: flex; align-items: center; font-size: 18px; font-weight: 500; color: #1A3070; gap:8px}
.main-banner-fraction .swiper-pagination-current {color: #1A3070; font-weight: 700;}
.swiper-pagination-fraction {width: 50px !important;}

.main-banner-prev, .main-banner-next, .main-banner-play {width: 17px; height: 17px; border: 0; background-color: transparent; cursor: pointer; transition: .25s;}
.main-banner-prev:hover, .main-banner-next:hover, .main-banner-play:hover { opacity: .65;}
.main-banner-prev {background: url('../images/bn_arrow.svg') no-repeat center / contain; transform: rotate(180deg);}
.main-banner-next {background: url('../images/bn_arrow.svg') no-repeat center / contain;}
.main-banner-play {background: url('../images/bn_stop.svg') no-repeat center / contain;}
.main-banner-play.paused {background: url('../images/bn_play.svg') no-repeat center / contain;}


/*시설둘러보기*/
.facility-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}
.facility-section section {position:relative;}
.facility-swiper .swiper-slide {border-radius: 20px; border: 1px solid #EFF1F5;}
.facility-swiper .swiper-slide img {border-radius: 20px 20px 0 0;}
.facility-swiper .swiper-slide span {overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; display: block;}
.facility-swiper .swiper-slide .icon_left li {padding-right: 20px; padding-left: 72px; background-size: 50px; background-position: 16px;}
.facility-swiper li.playground {background: url('../images/facility_playground.svg') no-repeat;}
.facility-swiper li.library {background: url('../images/facility_library.svg') no-repeat;}
.facility-swiper li.theater {background: url('../images/facility_theater.svg') no-repeat }
.facility-swiper li.guestbook {background: url('../images/facility_guestbook.svg') no-repeat;}
.facility-swiper li.experience {background: url('../images/facility_experience.svg') no-repeat;}
.facility-swiper li.mascot {background: url('../images/facility_mascot.svg') no-repeat;}
.facility-swiper li.plaza {background: url('../images/facility_plaza.svg') no-repeat;}

.facility_btn {border: 1px solid #DDDDDD; box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px; border-radius: 999px; width: 50px; height: 50px; display: flex;align-items: center; justify-content: center; position: absolute; top: 90px; z-index: 99; background: #fff;}
.facility-prev {transform: rotate(180deg); left: -20px;}
.facility-next {right: -20px;}


/*퀵메뉴*/
.quick-menu ul {display: flex; justify-content: space-around;}
.quick-menu a {display: flex; align-items: center; gap: 14px; color: #555;}
.quick-menu a strong {display: block; font-size: 18px; color: #1a1a1a;; margin-bottom: 8px;}

.quick-menu a img {width: 40px;}


@media (max-width: 1400px) {
  .header_wrap {margin: 0 20px; width: initial;}
  .gnb .depth1 {gap: 34px;}
  .gnb .depth1 > li > a {font-size: 18px;}

  #contents, .footer-inner {width: initial; padding: 40px 20px;}
  .main-visual, .info-banner-wrap {display: flex; flex-direction: column;}
  .notice-box p { max-width: initial;}
  .quick-menu ul {flex-wrap: wrap; gap: 20px; justify-content: flex-start;}
  .quick-menu ul li {width: 30%;}
}  

@media (max-width: 1200px) {
  body {min-width: initial;}
}
@media (max-width: 1080px) {
  
  #header {padding: 25px 0;}
  nav.gnb {display: none;}
  .solomon-main .gnb {display: none;}
  .solomon-main .menu-btn {display: flex;}
  .solomon-main .m-menu.mobile {display: block; }
  .program-list li .maincard_arrow a {width: 100%; margin-bottom: 5px;}
  .daejeon .program-list li.type-green .maincard_arrow { display: block;}
  .daejeon .program-list li.type-green .maincard_arrow a {width: 100%;}


  .footer-inner {flex-direction: column; gap: 30px;}

  #top-nav {top: -100px; position: fixed; height: 70px; background: #fff; z-index: 200;}
  #top-nav .m-open-btn {position: absolute; top: 50%; left: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; z-index: 100;}
  #top-nav .box.sns-area {width: 170px; float: right; z-index: 100;}
  #top-nav .sns-wrap {padding: 16px 10px;}
  #top-nav .sns-wrap li {padding: 0 2px;}
  #top-nav .sns-wrap li a img {border-radius: 100%;}
  #top-nav .sns-wrap li a img.facebook-link-icon {border: 1px solid #07428f;}
  #top-nav .sns-wrap li a img.twitter-link-icon {border: 1px solid #1982ab;}
  #top-nav .sns-wrap .sitemap-link {display: none;}
  #top-nav .nav-list-wrap {position: absolute; top: 0; background: none; width: 100%; display: inherit; min-width: 100%; z-index: 90;}
  #top-nav .top-nav-list-wrap {display: none;}
  #top-nav .nav-list-wrap .box {height: 70px;}
  #top-nav .nav-list-wrap .top-nav-logo {display: inherit; top: 20px; left: 50%; z-index: 50; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
  /*좌측 슬라이드메뉴*/
  #top-nav .m-menu {position: fixed; top: 0; left: -100%; height: 100%; width: 100%; font-size: 16px; font-weight: 500; letter-spacing: -0.8px; color: #333333; z-index: 210;}
  #top-nav .m-menu .m-menu-list {width: 75%; height: 100%; background: #f8f8f8;}
  #top-nav .m-menu-logo-area {height: 60px; padding: 20px 15px 10px; background: #fff;}
  #top-nav .main-logo-btn {float: left; vertical-align: middle;}
  #top-nav .m-close-btn {float: right; vertical-align: middle; cursor: pointer;}
  #top-nav .main-logo-btn img {width: 140px;}
  #top-nav .accordion {height: 100%; overflow-y: hidden; padding-bottom: 70px;}
  #top-nav .accordion li {margin-top: -1px; list-style-type: none; cursor: pointer; background: #fff;}
  #top-nav .accordion li .link {position: relative; padding-left: 20px; height: 55px; line-height: 55px; font-size: 20px; background: #f8f8f8; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
  #top-nav .accordion li .link .arrow-img {position: absolute; top: 50%; right: 20px; margin-top: -4px; width: 12px; height: 12px; background: url("https://solomon.lawnorder.go.kr/static/images/m-menu-plus.png") no-repeat;}
  #top-nav .accordion li.no-sub .link {background: none;}
  #top-nav .submenu {display: none; margin-top: 1px;}
  #top-nav .submenu li:last-child {border-bottom: none;}
  #top-nav .submenu li a {position: relative; display: inline-block; padding-left: 30px; height: 50px; width: 100%; background: #fff; line-height: 50px; color: #333; font-size: 18px;}
  #top-nav .submenu > li > a:before {position: absolute; content: ""; top: 50%; left: 19px; margin-top: -1px; width: 3px; height: 3px; background: #333; border-radius: 100%;}
  #top-nav .thirdmenu {display: block !important;}
  #top-nav .thirdmenu li a {padding-left: 50px; height: 40px; line-height: 40px;}

  .quick-menu ul li {width: 45%;}
}



@media (max-width: 768px) {
  #top-nav .accordion {height: initial; overflow-y: initial; padding-bottom: initial;}
  .program-list {display: flex; flex-direction: column;}
  .program-list li .maincard_arrow a {width: 48%;}
  .main-banner-control {position: relative; left: 0; bottom: 26px; justify-content: center; background: none;}
  .footer-info ul {flex-wrap: wrap; gap: 20px; justify-content: flex-start;}
}



@media (max-width: 460px) {
  .header_wrap .logo img{width: 150px;}
  .quick-menu ul {gap: 40px;}
  .quick-menu ul li {width: 100%;}
}