@charset "UTF-8";

/* 플로팅 메뉴 */
.quickMenu {position:fixed; top:240px; right:40px; z-index:1; width:80px; background:#fff; border:1px solid #ddd; border-radius:12px}
.quickMenu ul li + li {border-top:1px solid #ddd}
.quickMenu ul li a {display:flex; align-items:center; justify-content:center; height:80px; font-size:13px; color:#2D2D2D; text-align:center}
.quickMenu ul li a span {padding-top:35px; background-repeat:no-repeat; background-position:center top; background-size:32px auto; line-height:1}
.quickMenu ul li.themeMap a span {background-image:url("/images/common-new/icon_float01.png")}
.quickMenu ul li.kkuleomi a span {background-image:url("/images/common-new/icon_float02.png")}
.quickMenu ul li.sharedMap a span {background-image:url("/images/common-new/icon_float03.png")}
.quickMenu ul li.fiesta a span {background-image:url("/images/common-new/icon_float04.png")}
.quickMenu ul li.custom a span {background-image:url("/images/common-new/icon_float05.png")}
.quickMenu ul li.chatbot a span {background-image:url("/images/common-new/icon_float06.png")}
.quickMenu ul li.scrollTop a span {background-image:url("/images/common-new/icon_arrow_up.png")}
.quickMenu ul li.scrollTop a {height:40px}
.quickMenu ul li.scrollTop a span {padding-top:12px; background-size:12px auto}
@media (max-width:1500px) {
    .quickMenu {left:50%; margin-left:653px}
}

/*>>>>>>>>>> 메인 <<<<<<<<<<*/
.mainVisual {display:flex; background:url("/images/main-new/bg_main.png") no-repeat center / cover; min-height: calc(100vh - 350px)}
.mainVisual .inner {display:flex; align-items:center; justify-content:space-between}
/*.mainVisual .itemButtons {display:inline-block; position:relative; width:802px; height:450px; background:url("/images/main-new/bg_visual_pc2.png") no-repeat top center / 100% auto}*/
.mainVisual .itemButtons {display:inline-block; position:relative; width:100%; max-width:802px; aspect-ratio:802 / 450; background:url("/images/main-new/bg_visual_pc2.png") no-repeat top center / 100% auto}
.mainVisual .itemButtons > p {position:absolute; top:28%; left:40%; width:20%; height:24%; text-align:center; word-break:keep-all;}
.mainVisual .itemButtons > p strong {display:block; margin-bottom:5%; min-height:13.33%; font-weight:700; font-size:24px}
.mainVisual .itemButtons > p button {width:56.7%; line-height:2.4; background:#2D2D2D; border-radius:999px; border:none; text-align:center;}
.mainVisual .itemButtons > p button span {display:inline-block; padding-right:18px; background:url("/images/main-new/btn_arrow_right.png") no-repeat center right -4px  / 18px auto; font-weight:700; font-size:17px; color:#fff}
.mainVisual .itemButtons > button {position:absolute; padding-top:11%; background-color:transparent; border:none; word-break:keep-all;}
.mainVisual .itemButtons > button:before {position:absolute; content:""; top:0; left:50%; transform:translateX(-50%); width:8.48%; height:15.11%; border:0.25vw solid; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:auto}
.mainVisual .itemButtons > button > span {display:block; padding-bottom:3%; font-weight:700; font-size:19px}
.mainVisual .itemButtons > button > span + span {font-weight:400; font-size:14px; color:#555555}
.mainVisual .itemButtons > button.space {top:41%; left:-1.5%; width:18%; height:35.5%; text-align:right}
.mainVisual .itemButtons > button.performance {left:28%; bottom:0; width:18.7%; height:32%}
.mainVisual .itemButtons > button.education {right:28%; bottom:0; width:15.6%; height:32%}
.mainVisual .itemButtons > button.article {top:40%; right:3%; width:12.6%; height:35%; text-align:left}
.mainVisual .itemButtons > button.space:before {left:auto; right:0; width:47.2%; height:42.6%; transform:translateX(0); border-color:#01B200; background-image:url("/images/main-new/icon_visual01.png")}
.mainVisual .itemButtons > button.performance:before {width:45.6%; height:47.4%; border-color:#0F91DD; background-image:url("/images/main-new/icon_visual02.png")}
.mainVisual .itemButtons > button.education:before {width:54.4%; height:47.4%; border-color:#F7625C; background-image:url("/images/main-new/icon_visual03.png")}
.mainVisual .itemButtons > button.article:before {width:67.3%; height:43.2%;left:0; transform:translateX(0); margin-left:0; border-color:#F5A52F; background-image:url("/images/main-new/icon_visual04.png")}
.mainVisual .itemButtons > button:hover:before,
.mainVisual .itemButtons > button.on:before {border-color:#fff; box-shadow:0px 5px 10px 0px rgba(0,0,0,0.2)}
.mainVisual .itemButtons > button.space:hover:before,
.mainVisual .itemButtons > button.space.on:before {background-color:#01B200; background-image:url("/images/main-new/icon_visual01_on.png")}
.mainVisual .itemButtons > button.performance:hover:before,
.mainVisual .itemButtons > button.performance.on:before {background-color:#0F91DD; background-image:url("/images/main-new/icon_visual02_on.png")}
.mainVisual .itemButtons > button.education:hover:before,
.mainVisual .itemButtons > button.education.on:before {background-color:#F7625C; background-image:url("/images/main-new/icon_visual03_on.png")}
.mainVisual .itemButtons > button.article:hover:before,
.mainVisual .itemButtons > button.article.on:before {background-color:#F5A52F; background-image:url("/images/main-new/icon_visual04_on.png")}

.mainVisual .itemIcons {position:relative; width:32.1%; min-width:260px; max-width:100%; border-radius:10px; box-shadow:0px 3px 15px 3px rgba(0,0,0,0.1); text-align:center}
.mainVisual .itemIcons > strong {position:absolute; top:-12%; left:50%; transform:translateX(-50%); display:inline-block; margin-bottom:-60px; width:78%; line-height:3.36; background-repeat:no-repeat; background-position:center; background-size:100% auto; border-radius:7%; font-weight:500; font-size:28px; color:#fff}
.mainVisual .itemIcons > strong.spaceCate {background-image:url("/images/main-new/bg_main_con01.png")}
.mainVisual .itemIcons > strong.performanceCate {background-image:url("/images/main-new/bg_main_con02.png")}
.mainVisual .itemIcons > strong.educationCate {background-image:url("/images/main-new/bg_main_con03.png")}
.mainVisual .itemIcons > strong.articleCate {background-image:url("/images/main-new/bg_main_con04.png"); color:#000}

/* .mainVisual .itemIcons > div {display:grid; grid-template-columns:repeat(3,1fr); gap:26px 0; padding:85px 24px 30px; background:#fff; border-radius:12px; border:1px solid #D6D6D6} */
/* .mainVisual .itemIcons > div a {display:block; padding-top:72px; background-repeat:no-repeat; background-size:64px auto; background-position:center top; font-size:17px; color:#2D2D2D; text-align:center} */

.mainVisual .itemIcons > div {/*display:grid; grid-template-columns:repeat(4,1fr);*/display:flex; flex-wrap:wrap; align-items:center; justify-content:space-evenly; gap:15px 0; padding:85px 24px 30px; min-height:330px; background:#fff; border-radius:12px; border:1px solid #D6D6D6}
.mainVisual .itemIcons > div.con8 a {max-width:25%; min-width:25%}
.mainVisual .itemIcons > div.con6 a {max-width:33%; min-width:33%}
.mainVisual .itemIcons > div.con4 a {max-width:50%; min-width:50%}
.mainVisual .itemIcons > div.con3 {gap:0}
.mainVisual .itemIcons > div.con3 a:first-child {max-width:100%; min-width:100%}
.mainVisual .itemIcons > div.con3 a {max-width:50%; min-width:50%}
.mainVisual .itemIcons > div a {display:block; padding-top:72px; height:40px; background-repeat:no-repeat; background-size:64px auto; background-position:center top; font-size:17px; color:#2D2D2D; text-align:center; box-sizing:content-box}


@media (min-width:1800px) {
/* 	.mainVisual {min-height: 580px; max-height: 580px;} */
}
@media (max-width:1160px) {
    .mainVisual .itemButtons > p button {width:70%}
    .mainVisual .itemButtons > button:before {background-size:38%}
    .mainVisual .itemButtons > button > span + span br {display:none}
    .mainVisual .itemButtons > button.space {left:-1.5%; width:19%}
    .mainVisual .itemButtons > button.space:before {width:43.9%; height:41.8%}
    .mainVisual .itemButtons > button.performance {left:26%; bottom:3%; width:23%}
    .mainVisual .itemButtons > button.performance:before {width:36%; height:46%}
    .mainVisual .itemButtons > button.education {bottom:3%; width:15.6%}
    .mainVisual .itemButtons > button.education:before {width:53.4%; height:46.4%}
    .mainVisual .itemButtons > button.article {top:41%; right:4%; width:13.6%}
    .mainVisual .itemButtons > button.article:before {width:61%; height:42%}
/*     .mainVisual .itemIcons > strong {font-size:20px} */
/*     .mainVisual .itemIcons > div {padding:60px 20px 25px} */
/*     .mainVisual .itemIcons > div a {padding-top:57px; background-size:50px auto; font-size:14px} */
    .mainVisual .itemIcons {width:45%}
    .mainVisual .itemIcons > strong {font-size:20px}
    .mainVisual .itemIcons > div {padding:60px 10px 25px; min-height:250px}
    .mainVisual .itemIcons > div a {padding-top:57px; height:30px; background-size:50px auto; font-size:14px}
}
@media (max-width:940px) {
    .mainVisual {background:url("/images/main-new/bg_main_m.png") no-repeat top center / 100% auto;}
    .mainVisual .itemButtons {justify-content:center; max-width:562px; aspect-ratio:562 / 314}
    .mainVisual .itemButtons > p {height:18%;}
    .mainVisual .itemButtons > p button {width:90%; line-height:2}
    .mainVisual .itemButtons > p strong {font-size:17px}
    .mainVisual .itemButtons > p button span {font-size:13px}
    .mainVisual .itemButtons > button:before {background-size:45%}
    .mainVisual .itemButtons > button > span {font-size:17px}
    .mainVisual .itemButtons > button > span + span {font-size:12px}
    .mainVisual .itemIcons > strong {font-size:20px}
}
@media (max-width:768px) {
    .mainVisual .inner {display:block; text-align:center}
    .mainVisual .itemButtons {width:450px; max-width:100%; aspect-ratio:2 / 1.25; margin:30px 0 50px 10px; background:url("/images/main-new/bg_visual_m.png") no-repeat center / 100% auto}
    .mainVisual .itemButtons > p {top:32%; left:36%; width:26.68%}
    .mainVisual .itemButtons > p strong {font-size:15px}
    .mainVisual .itemButtons > button {padding-top:0; }
    .mainVisual .itemButtons > p button span {padding-right:10px; background:url("/images/main-new/btn_arrow_right.png") no-repeat top 5px right -3px  / 14px auto; font-weight:500}
    .mainVisual .itemButtons > button:before {display:none}
    .mainVisual .itemButtons > button > span {font-size:15px;}
    .mainVisual .itemButtons > button > span + span {display:none}
    .mainVisual .itemButtons > button.space {top:46%; left:-6%; width:19%; height:21%; text-align:center}
    .mainVisual .itemButtons > button.performance {left:19%; bottom:1%; width:32%; height:20%}
    .mainVisual .itemButtons > button.education {right:25%; bottom:3%; width:20.6%; height:18%}
    .mainVisual .itemButtons > button.article {top:42%; right:0; width:12.6%; height:21%}
    .mainVisual .itemIcons {margin:10px auto 32px; width:50%}
}
@media (max-width:600px) {
    .mainVisual .itemIcons {width:100%}
}

/* 시설·공간 대관 */
.mainVisual .itemIcons > div a.meetingRoom {background-image:url("/images/main-new/img-meetingRoom.png")}
.mainVisual .itemIcons > div a.concertHall {background-image:url("/images/main-new/img-concertHall.png")}
.mainVisual .itemIcons > div a.weddingHall {background-image:url("/images/main-new/img-weddingHall.png")}
.mainVisual .itemIcons > div a.sportCom {background-image:url("/images/main-new/img-sportCom.png")}
.mainVisual .itemIcons > div a.trainingCen {background-image:url("/images/main-new/img-trainingCen.png")}
.mainVisual .itemIcons > div a.camping {background-image:url("/images/main-new/img-camping.png")}
.mainVisual .itemIcons > div a.auditorium {background-image:url("/images/main-new/img-auditorium.png")}
.mainVisual .itemIcons > div a.classroom {background-image:url("/images/main-new/img-classroom.png")}
.mainVisual .itemIcons > div a.lodgment {background-image:url("/images/main-new/img-lodgment.png")}
/* 공연·전시·행사 참여 */
.mainVisual .itemIcons > div a.theater {background-image:url("/images/main-new/img-concertHall.png")}
.mainVisual .itemIcons > div a.exhibition {background-image:url("/images/main-new/img-exhibition.png")}
.mainVisual .itemIcons > div a.practice {background-image:url("/images/main-new/img-practice.png")}
.mainVisual .itemIcons > div a.creative {background-image:url("/images/main-new/img-creative.png")}
.mainVisual .itemIcons > div a.sharedKch {background-image:url("/images/main-new/img-sharedKch.png")}
.mainVisual .itemIcons > div a.studio {background-image:url("/images/main-new/img-studio.png")}
.mainVisual .itemIcons > div a.experience {background-image:url("/images/main-new/img-experience.png")}
/* 교육·강좌 수강 */
.mainVisual .itemIcons > div a.health {background-image:url("/images/main-new/img-health.png")}
.mainVisual .itemIcons > div a.liberal {background-image:url("/images/main-new/img-liberal.png")}
.mainVisual .itemIcons > div a.learning {background-image:url("/images/main-new/img-learning.png")}
.mainVisual .itemIcons > div a.technology {background-image:url("/images/main-new/img-technology.png")}
.mainVisual .itemIcons > div a.culture {background-image:url("/images/main-new/img-culture.png")}
.mainVisual .itemIcons > div a.career {background-image:url("/images/main-new/img-career.png")}
/* 물품 대여 */
.mainVisual .itemIcons > div a.tools {background-image:url("/images/main-new/img-tools.png")}
.mainVisual .itemIcons > div a.mobility {background-image:url("/images/main-new/img-mobility.png")}
.mainVisual .itemIcons > div a.daily {background-image:url("/images/main-new/img-daily.png")}
.mainVisual .itemIcons > div a.leisure {background-image:url("/images/main-new/img-leisure.png")}
.mainVisual .itemIcons > div a.baby {background-image:url("/images/main-new/img-baby.png")}
.mainVisual .itemIcons > div a.eventGoods {background-image:url("/images/main-new/img-eventGoods.png")}