@charset "utf-8";
/* 당근고양이 'ㅅ' */
/* 화성시장애인 체육회의 스타일 이용 + 추가 적용 / 별개의 스타일을 넣을 때에는 클래스를 추가해주세요. */

/* header */
.header.main .logo {background-image:url('../images/logo_w.svg');}
.header.main .logo2 {background-image:url('/pub/images/logo_w.svg');}
.header .gnb .snb:after {background:#fff url('../images/img_hover_snb.png') no-repeat 70px 100%;}
.header .sitemap {background:#fff;}
.header .sitemap .flex {justify-content:center;}
.header .sitemap .gnb1 > a,
.header .sitemap .gnb1 .snb a.on {color:#1E93BA;}
.header .sitemap .gnb2 > a,
.header .sitemap .gnb2 .snb a.on {color:#F58B00;}
.header .sitemap .gnb3 > a,
.header .sitemap .gnb3 .snb a.on {color:#EF6388;}
.header .sitemap .gnb4 > a,
.header .sitemap .gnb4 .snb a.on {color:#1DA770;}
.header .sitemap .gnb1 .snb a:before {background:#1E93BA;}
.header .sitemap .gnb2 .snb a:before {background:#F58B00;}
.header .sitemap .gnb3 .snb a:before {background:#EF6388;}
.header .sitemap .gnb4 .snb a:before {background:#1DA770;}
.header .sitemap .bg {background:linear-gradient(360deg, rgba(255, 248, 236, 0) -2.19%, #FFF8EC 103.1%);}
.header .sitemap .bg .txt {background-image:url('../images/txt_sitemap.svg');}
.header .sitemap .bg .i1 {width:251px; aspect-ratio:251/211; background-image:url('../images/img_sitemap_left.png');}
.header .sitemap .bg .i2 {width:233px; aspect-ratio:233/248; background-image:url('../images/img_sitemap_right.png');}
.header .sitemap .bg .tl,
.header .sitemap .bg .tr {z-index:1; bottom:40px;}
.header .sitemap .bg .tl {left:0; width:230px; aspect-ratio:230/395; background-image:url('../images/img_sitemap_tree_l.svg');}
.header .sitemap .bg .tr {right:0; width:229px; aspect-ratio:229/373; background-image:url('../images/img_sitemap_tree_r.svg');}

/* footer */
.footer:before,
.footer:after {content:""; position:absolute; background:no-repeat 50% 50% / contain;}
.footer:before {bottom:calc(100% - 23px); left:60px; width:111px; aspect-ratio:111/121; background-image:url('../images/img_footer_left.png');}
.footer:after {bottom:calc(100% - 1px); right:0; width:203px; aspect-ratio:203/88; background-image:url('../images/img_footer_right.svg');}
.footer .flogo {position:absolute; top:0; right:20px; width:220px; aspect-ratio:110/23; background:url('../images/logo.svg') no-repeat 50% 50% / contain;}

/* main */
.mc01 a:before {height:78px;}
.mc01 a.i1:before {background-image:url('../images/icon_mc01_01.svg');}
.mc01 a.i2:before {background-image:url('../images/icon_mc01_02.svg');}
.mc01 a.i3:before {background-image:url('../images/icon_mc01_03.svg');}
.mc01 a.i4:before {background-image:url('../images/icon_mc01_04.svg');}
.mc01 a.i5:before {background-image:url('../images/icon_mc01_05.svg');}
.mc02:before {background:linear-gradient(0deg, rgba(236, 245, 255, 0.00) -2.19%, #ECF5FF 103.1%);}
.jq_tab a.on,
.jq_tab li.active button {background:#0054A6; border-color:#0054A6;}
.mc02:after {top:175px; left:50%; margin-left:-797px; width:225px; aspect-ratio:225/272; background-image:url('../images/bg_mc02_left.png');}
.mc02 .wrap-tab-container {position:relative;}
.mc02 .wrap-tab-container:before {content:""; position:absolute; bottom:-71px; right:-93px; width:141px; aspect-ratio:141/197; background:url('../images/bg_mc02_right.png') no-repeat 50% 50% / contain;}
.mc03 {padding-bottom:180px;}

/* sub */
.svisual .location i {background:#F36F21; mask:url('/pub/images/icon_home.svg') no-repeat 50% 50% / contain; -webkit-mask:url('/pub/images/icon_home.svg') no-repeat 50% 50% / contain;}
.svisual.g01 {background-image:url('../images/svisual01.jpg');}
.svisual.g02 {background-image:url('../images/svisual02.jpg');}
.svisual.g03 {background-image:url('../images/svisual03.jpg');}
.svisual.g04 {background-image:url('../images/svisual04.jpg');}
.svisual.g01 .aside a.on {background:#1E93BA;}
.svisual.g02 .aside a.on {background:#F58B00;}
.svisual.g03 .aside a.on {background:#EF6388;}
.svisual.g04 .aside a.on {background:#1DA770;}

.container {padding-bottom:180px;}
.stit {margin-bottom:24px;}
.stit strong {color:#0054A6; font-weight:800;}

/* 시설현황 */
.gym_status1 .imgfit {border-radius:20px; max-width:800px; margin:0 auto;}
.gym_status1 ul {display:flex; gap:20px; margin-top:24px;}
.gym_status1 li {width:calc((100% - 40px)/3); border:#ddd 1px solid; border-radius:20px; padding:40px;}
.gym_status1 .tt {position:relative; font-size:22px; color:#0054A6; font-weight:800; line-height:35px; padding-bottom:20px; border-bottom:#333 1px solid; margin-bottom:30px;}
.gym_status1 .tt:after {content:""; position:absolute; top:0; right:0; width:35px; height:35px; background:no-repeat 50% 50% / contain;}
.gym_status1 dl {display:flex; line-height:1.8;}
.gym_status1 dt {font-weight:700;}
.gym_status1 .i1 .tt:after {background-image:url('../images/icon_gym_status1a.svg');}
.gym_status1 .i2 .tt:after {background-image:url('../images/icon_gym_status1b.svg');}
.gym_status1 .i3 .tt:after {background-image:url('../images/icon_gym_status1c.svg');}
.gym_status1 .i1 dt {width:91px;}
.gym_status1 .i1 dd {width:calc(100% - 91px);}
.gym_status1 .i2 dt {width:75px;}
.gym_status1 .i2 dd {width:calc(100% - 75px);}
.gym_status1 .i3 dt {width:50px;}
.gym_status1 .i3 dd {width:calc(100% - 50px);}
.bg_blue {background:#ECF5FF80; padding:80px 0 180px; margin-top:80px;}
.gym_status2 dl {display:flex;}
.gym_status2 dl + dl {margin-top:40px;}
.gym_status2 dt {width:52.9412%; border-radius:20px;}
.gym_status2 dd {width:47.0588%; padding:50px 0 0 60px;}
.gym_status2 dd:before {content:""; display:block; width:120px; height:120px; background:#fff no-repeat 50% 50%; border-radius:50%;}
.gym_status2 dd .tt {font-size:24px; font-weight:800; margin:24px 0 16px; display:flex; gap:8px;}
.gym_status2 dd .tt span {color:#0054A6;}
.gym_status2 dd p {font-size:20px;}
.gym_status2 .i1 dd:before {background-image:url('../images/icon_gym_status2a.svg');}
.gym_status2 .i2 dd:before {background-image:url('../images/icon_gym_status2b.svg');}
.gym_status2 .i3 dd:before {background-image:url('../images/icon_gym_status2c.svg');}

/* 시설안내 */
.gym_info {display:flex; gap:40px;}
.gym_info .imgfit {width:42.6471%; border-radius:20px;}
.gym_info ul {width:calc(57.3529% - 40px); display:flex; flex-direction:column; gap:16px;}
.gym_info li {position:relative; padding:40px 40px 40px 136px; border:#ddd 1px solid; border-radius:20px;}
.gym_info i {position:absolute; top:50%; left:40px; width:76px; height:76px; line-height:76px; text-align:center; font-size:24px; color:#fff; font-weight:800; border-radius:50%; transform:translateY(-50%);}
.gym_info .tit {margin-bottom:8px; line-height:38px; display:flex; gap:8px;}
.gym_info .tit strong {font-size:24px;}
.gym_info .tit span {color:#666;}
.gym_info p {letter-spacing:-.5px;}
.gym_info .f2 i {background:#F58B00;}
.gym_info .f1 i {background:#EF6388;}
.gym_info .l2 i {background:#1DA770;}
.gym_info .p i {background:#0054A6;}

/* table */
.tbl col.w160 {width:160px;}
.tbl col.w170 {width:170px;}
.tbl col.w200 {width:200px;}
.tbl col.w280 {width:280px;}
.tbl col.w560 {width:41.1765%;}
.tbl thead tr + tr th {border-top:#ddd 1px solid;}

/* 오시는 길 */
.map_area {position:relative; border-radius:20px 20px 0 0; overflow:hidden;}
.map_area:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:#ddd 1px solid; border-bottom:0; z-index:10; pointer-events:none; border-radius:inherit;}
.map_area .roughmap_maker_label a {background-image:url('../images/icon_map_point.svg'); transform:translateY(90px);}
.map_info {display:flex; background:#0054A6; padding:40px 0; border-radius:0 0 20px 20px;}
.map_info .logo {width:480px; background:url('../images/logo_w.svg') no-repeat 50% 50%;}
.map_info .info {position:relative; padding-left:40px;}
.map_info .info:before {content:""; position:absolute; top:50%; left:0; width:1px; height:60px; background:#fff; opacity:.3; transform:translateY(-50%);}
.map_info .info dl {display:flex; gap:24px; color:#fff; line-height:1.65;}
.map_info .info dl + dl {margin-top:16px;}
.map_info .info dt {position:relative; font-weight:700; padding-left:32px; width:100px;}
.map_info .info dt:before {content:""; position:absolute; top:0; left:0; width:24px; height:30px; background:no-repeat 50% 50% / contain;}
.map_info .info dd {width:calc(100% - 100px);}
.map_info .info .i1 dt:before {background-image:url('../images/icon_map_info01.svg');}
.map_info .info .i2 dt:before {background-image:url('../images/icon_map_info02.svg');}
.gbox {background:#F6F6F6; padding:80px 0; margin:80px 0;}
.bus_lines .box {margin-top:80px;}
.bus_lines .tit {position:relative; padding-left:42px; font-size:24px; font-weight:800; margin-bottom:24px;}
.bus_lines .tit:before {content:""; position:absolute; top:0; left:0; width:32px; height:100%; mask:url('../images/icon_bus.svg') no-repeat 50% 50% / contain; -webkit-mask:url('../images/icon_bus.svg') no-repeat 50% 50% / contain;}
.bus_lines dl {padding:30px 24px 30px 66px; background:#fff; border:#ddd 1px solid; border-radius:20px;}
.bus_lines dl + dl {margin-top:16px;}
.bus_lines dt {position:relative; margin-bottom:8px; font-size:20px; font-weight:700;}
.bus_lines dt:before {content:""; position:absolute; top:0; left:-42px; width:32px; height:100%; mask:url('../images/icon_bus_line.svg') no-repeat 50% 50% / contain; -webkit-mask:url('../images/icon_bus_line.svg') no-repeat 50% 50% / contain;}
.bus_lines dd {line-height:1.8;}
.bus_lines .c1 .tit {color:#0054A6;}
.bus_lines .c1 .tit:before,
.bus_lines .c1 dt:before {background:#0054A6;}
.bus_lines .c2 .tit {color:#F36F21;}
.bus_lines .c2 .tit:before,
.bus_lines .c2 dt:before {background:#F36F21;}
.bus_lines .c3 .tit {color:#1DA770;}
.bus_lines .c3 .tit:before,
.bus_lines .c3 dt:before {background:#1DA770;}
.bus_station {display:flex; gap:20px;}
.bus_station dl {width:calc(50% - 10px); border:#ddd 1px solid; border-radius:20px; overflow:hidden;}
.bus_station dt {display:flex; align-items:center; gap:10px; font-size:24px; color:#fff; font-weight:800; line-height:40px; padding:20px 24px;}
.bus_station dt:before {content:""; display:block; width:32px; height:32px; background:url('../images/icon_bus_station.svg') no-repeat 50% 50% / contain;}
.bus_station dd {padding:30px 24px; display:flex; flex-wrap:wrap; gap:15px;}
.bus_station dd span {font-size:16px; font-weight:800; line-height:38px; height:38px; width:calc((100% - 60px)/5); border-radius:20px; text-align:center;}
.bus_station .c1 dt {background:#1E93BA;}
.bus_station .c1 dd span {color:#1E93BA; background:#1E93BA1A;}
.bus_station .c2 dt {background:#0054A6;}
.bus_station .c2 dd span {color:#0054A6; background:#0054A61A;}

/* 이용시간 */
.hours_use .times {display:flex; gap:20px;}
.hours_use .times li {width:calc((100% - 40px)/3); border-radius:20px; border:#ddd 1px solid; overflow:hidden;}
.hours_use .imgfit {position:relative; width:100%; aspect-ratio:2/1;}
.hours_use .imgfit p {position:absolute; bottom:15px; left:24px; font-size:22px; color:#fff; font-weight:800;}
.hours_use .txt {display:flex; padding:24px 0;}
.hours_use .txt dl {position:relative; width:50%; text-align:center;}
.hours_use .txt dl:before {content:""; position:absolute; top:50%; left:0; width:1px; height:60px; background:#ddd; transform:translateY(-50%);}
.hours_use .txt dl:first-child:before {display:none;}
.hours_use .txt dt {font-size:16px; font-weight:800; line-height:38px; height:38px; width:100px; border-radius:20px; margin:0 auto 16px;}
.hours_use .txt dd {font-weight:800;}
.hours_use .txt .c1 dt {color:#F58B00; background:#FEF6E8;}
.hours_use .txt .c2 dt {color:#0054A6; background:#0054A61A;}
.closed_days {margin-top:40px; background:#F6F6F6; border-radius:20px; padding:40px 50px;}
.closed_days .tit {position:relative; font-size:24px; font-weight:800; line-height:38px; padding-left:34px; padding-bottom:16px; margin-bottom:16px; border-bottom:#ddd 1px solid;}
.closed_days .tit:before {content:""; position:absolute; top:7px; left:0; width:24px; height:24px; background:url('../images/icon_ne.svg') no-repeat 50% 50% / contain; border-radius:50%;}

/* 이용안내 */
.registration_period {border:#ddd 1px solid; border-radius:20px; padding:25px 32px; line-height:30px; display:flex; gap:12px; align-items:center;}
.registration_period:before {content:""; display:block; width:24px; height:24px; background:url('../images/icon_registration_period.svg') no-repeat 50% 50% / contain;}
.registration_period strong {padding-right:4px;}
.new_member {display:flex; gap:20px;}
.new_member li {width:calc((100% - 40px)/3);}
.new_member li .box {border:#ddd 1px solid; border-radius:20px; padding:40px; text-align:center;}
.new_member li i {display:block; width:80px; aspect-ratio:1/1; border-radius:50%; margin:0 auto 24px;}
.new_member li i:before {content:""; display:block; width:100%; height:100%; mask:url('../images/icon_chk.svg') no-repeat 50% 50%; -webkit-mask:url('../images/icon_chk.svg') no-repeat 50% 50%;}
.new_member li .tit {position:relative; font-size:22px; font-weight:800; padding-bottom:21px; margin-bottom:20px; text-align:center;}
.new_member li .tit:after {content:""; position:absolute; bottom:0; left:50%; width:20px; height:1px; transform:translateX(-50%);}
.new_member li.c1 i {background:#FFEFF2;}
.new_member li.c1 i:before,
.new_member li.c1 .tit:after {background:#EF6388;}
.new_member li.c2 i {background:#ECF5FF;}
.new_member li.c2 i:before,
.new_member li.c2 .tit:after {background:#0054A6;}
.new_member li.c3 i {background:#F3F8E4;}
.new_member li.c3 i:before,
.new_member li.c3 .tit:after {background:#1DA770;}
.chk_txt {margin-top:16px;}
.chk_txt p {position:relative; padding-left:28px; color:#F36F21; line-height:30px;}
.chk_txt p + p {margin-top:4px;}
.chk_txt p:before {content:""; position:absolute; top:0; left:0; width:20px; height:30px; background:#F36F21; mask:url(../images/icon_bus_line.svg) no-repeat 50% 50% / contain; -webkit-mask:url(../images/icon_bus_line.svg) no-repeat 50% 50% / contain;}
.payment_info {display:flex; gap:120px; padding:40px; border:#ddd 1px solid; border-radius:20px; background:#fff;}
.payment_info .tit {position:relative; padding-left:132px; height:100px; display:flex; flex-direction:column; justify-content:center; gap:8px;}
.payment_info .tit:before,
.payment_info .tit:after {content:""; position:absolute; top:50%; transform:translateY(-50%);}
.payment_info .tit:before {left:0; width:100px; aspect-ratio:1/1; background:#F6F6F6 url('../images/icon_payment_info.svg') no-repeat 50% 50%; border-radius:50%;}
.payment_info .tit:after {right:-60px; width:1px; height:40px; background:#ddd;}
.payment_info .tit strong {font-size:22px; font-weight:800;}
.payment_info .con {display:flex; align-items:center; gap:40px;}
.payment_info .con dl {display:flex; align-items:center; gap:16px; font-weight:800; line-height:38px;}
.payment_info .con dt {font-size:16px; width:84px; text-align:center; border-radius:20px;}
.payment_info .con .c1 dt {color:#F36F21; background:#FEF6E8;}
.payment_info .con .c2 dt {color:#0054A6; background:#0054A61A;}
.personal_locker {display:flex; gap:20px; flex-wrap:wrap;}
.personal_locker > li {position:relative; width:calc(50% - 10px); border:#ddd 1px solid; border-radius:20px; padding:40px 40px 40px 152px; display:flex; flex-direction:column; justify-content:center; gap:10px;}
.personal_locker > li:before {content:""; position:absolute; top:50%; left:40px; width:80px; aspect-ratio:1/1; background:#f6f6f6 no-repeat 50% 50%; transform:translateY(-50%); border-radius:50%;}
.personal_locker li .tt {font-size:22px; font-weight:800;}
.personal_locker .dots_list strong {position:relative; width:90px; display:inline-block; vertical-align:top;}
.personal_locker .dots_list strong:after {content:""; position:absolute; top:50%; right:8px; width:1px; height:14px; background:#ddd; transform:translateY(-50%);}
.personal_locker .i1:before {background-image:url('../images/icon_personal_locker01.svg');}
.personal_locker .i2:before {background-image:url('../images/icon_personal_locker02.svg');}
.personal_locker .i3:before {background-image:url('../images/icon_personal_locker03.svg');}
.personal_locker .i4:before {background-image:url('../images/icon_personal_locker04.svg');}
.personal_locker .i5:before {background-image:url('../images/icon_personal_locker05.svg');}
.personal_locker .i6:before {background-image:url('../images/icon_personal_locker06.svg');}

/* 대관안내 */
.rental_guide_step {display:flex; gap:20px;}
.rental_guide_step li {position:relative; width:calc((100% - 80px)/5); background:#f6f6f6; border-radius:20px;}
.rental_guide_step li + li:before {content:""; position:absolute; top:50%; left:-26px; width:32px; aspect-ratio:1/1; background:#fff url('/pub/images/arrow_step.svg') no-repeat 50% 50%; border-radius:50%; transform:translateY(-50%); box-shadow:rgba(0,0,0,.06) 0 4px 20px;}
.rental_guide_step .imgfit {width:100%; aspect-ratio:256/160; border-radius:20px 20px 0 0;}
.rental_guide_step .txt {padding:20px 20px 24px; text-align:center;}
.rental_guide_step .txt strong {display:block; font-size:20px; margin-bottom:8px;}
.rental_time {display:flex; gap:20px;}
.rental_time .box {width:calc(50% - 20px); background:#fff; border:#ddd 1px solid; border-radius:20px; padding:40px;}
.rental_time .tit {position:relative; font-size:22px; font-weight:800; line-height:35px;}
.rental_time .tit:after {content:""; position:absolute; top:0; right:0; width:35px; aspect-ratio:1/1; background:no-repeat 50% 50% / contain;}
.rental_time .con {border-top:#333 1px solid; padding-top:20px; margin-top:20px;}
.rental_time dl {display:flex; align-items:center; gap:16px; font-weight:800;}
.rental_time dl + dl {margin-top:16px;}
.rental_time dt {width:100px; aspect-ratio:50/19;; line-height:38px; border-radius:20px; font-size:16px; text-align:center;}
.rental_time dd {width:calc(100% - 116px);}
.rental_time .i1 .tit:after {background-image:url('../images/icon_rental_time01.svg');}
.rental_time .i2 .tit:after {background-image:url('../images/icon_rental_time02.svg');}
.rental_time .i3 .tit:after {background-image:url('../images/icon_rental_time03.svg');}
.rental_time .c1 dt {color:#F36F21; background:#FEF6E8;}
.rental_time .c2 dt {color:#0054A6; background:#0054A61A;}

/* 프로그램 안내 */
.program_guide {background:#F6F6F6; border-radius:20px; padding:80px 20px; text-align:center;}
.program_guide + .program_guide {margin-top:20px;}
.program_guide .sample {height:240px; font-size:22px; color:#666; font-weight:700; text-align:center; display:flex; justify-content:center; align-items:center;}

/* 강사현황 */
.instructor_status {display:flex; flex-wrap:wrap; gap:32px;}
.instructor_status > li {width:calc((100% - 64px)/3); border-radius:20px; background:#f6f6f6; padding:40px;}
.instructor_status .cate {display:flex;}
.instructor_status .cate span {font-size:14px; color:#0054A6; font-weight:800; line-height:30px; height:30px; padding:0 16px; min-width:80px; text-align:center; background:#0054A61A; border-radius:15px;}
.instructor_status .name {padding:20px 0; border-bottom:#ddd 1px solid; margin-bottom:32px; display:flex; align-items:center; gap:16px;}
.instructor_status .name strong {font-size:34px; font-weight:800;}
.instructor_status .name span {font-size:22px; color:#0054A6; font-weight:800;}
.instructor_status .con .tt {font-weight:800; margin-bottom:8px;}

/* FAQ */
.faq_top {position:relative; background:#F6F6F6; padding:68px 300px; overflow:hidden; border-radius:20px; margin-bottom:80px; font-size:22px; font-weight:800; text-align:center;}
.faq_top:before,
.faq_top:after {content:""; position:absolute; bottom:0; background:no-repeat 50% 100% / contain;}
.faq_top:before {left:80px; width:204px; aspect-ratio:204/164; background-image:url('../images/img_faq_top01.svg');}
.faq_top:after {right:80px; width:157px; aspect-ratio:157/203; background-image:url('../images/img_faq_top02.png'); mix-blend-mode:darken;}
.faq_list dl {position:relative; border-radius:20px; overflow:hidden; box-shadow:#0000001a 0 4px 20px;}
.faq_list dl:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:#0054A6 2px solid; border-radius:inherit; opacity:0; z-index:1; pointer-events:none; transition:.2s linear;}
.faq_list dl + dl {margin-top:20px;}
.faq_list dt button,
.faq_list dd {position:relative; padding:40px 106px 40px 128px;}
.faq_list dt button {display:block; width:100%; text-align:left; word-break:break-word; white-space:normal;}
.faq_list dd {border-top:#ddd 1px solid; background:#f6f6f6; display:none; padding-right:40px;}
.faq_list dt button:before,
.faq_list dt button i,
.faq_list dd:before {position:absolute; width:56px; aspect-ratio:1/1; border-radius:50%;}
.faq_list dt button:before,
.faq_list dd:before {left:40px; font-size:24px; font-weight:800; display:flex; justify-content:center; align-items:center;}
.faq_list dt button:before {content:"Q"; color:#fff; background:#0054A6; top:50%; transform:translateY(-50%);}
.faq_list dt button i {right:40px; background:#F6F6F6; top:50%; transform:translateY(-50%);}
.faq_list dt button i:before,
.faq_list dt button i:after {content:""; position:absolute; top:50%; left:50%; background:#333; border-radius:2px; transform:translate(-50%,-50%); transition:.2s linear;}
.faq_list dt button i:before {width:18px; height:2px;}
.faq_list dt button i:after {width:2px; height:18px;}
.faq_list dd:before {content:"A"; color:#0054A6; background:#fff; top:26px; border:#ddd 1px solid;}
.faq_list dl.on:before {opacity:1;}
.faq_list .on dt button i:after {width:18px; height:2px;}