@charset "utf-8";


/* 공통 */
.container{margin-bottom: 90px;}
.container .krds-form-select{background-position: right 8px center; line-height: normal;}
.container .page-navi{font-size: 16px;}
.krds-pagination .page-navi.disabled::before{margin-bottom: 3px;}
.krds-pagination .page-navi.next::after{margin-bottom: 3px;}
.select{width: 100%; height: 45px; padding: 0 21px 0 15px; border: 1px solid #999; border-radius: 7px; font-size: 15px; background-image: url(../img/main/select_arrow.png); background-repeat: no-repeat; background-position: center right 8px; background-size: 13px 8px;}
.hidden-text{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

.t-red{color: #e71111;}
.t-blue{color: #0c7adb;}

.btn-wrap{display: flex; gap: 5px;}
.btn-wrap.center{justify-content: center;}
.btn-wrap.right{justify-content: flex-end;}
.btn{display: block; width: 150px; height: 50px; padding: 0 10px; line-height: 50px; text-align: center; font-size: 17px; border-radius: 5px; box-sizing: border-box;}
.btn.w-auto{width: auto; min-width: 150px;}
.btn.type1{background-color: #0e9bbe; color: #fff;}
.btn.type1:hover{background-color: #14778f;}
.btn.type2{background-color: #fff; color: #111; border: 1px solid #999999;}
.btn.type2:hover{border: 1px solid #000;}
.btn.type3{background-color: #4c4c4c; color: #fff;}
.btn.type3:hover{background-color: #333;}
.btn.type4{background-color: #d35353; color: #fff;}
.btn.type4:hover{background-color: #c14242;}
.btn.type5{background-color: #ecf2fe; color: #0b50d0; border: 1px solid #256ef4;}
.btn.type5:hover{background-color: #d8e5fd;}
.btn.type6{background-color: #256ef4; color: #fff; border: 1px solid #256ef4;}
.btn.type6:hover{background-color: #0b50d0;}

.alert {width: 100%;margin: 15px 0;padding: 12px 15px;display: flex;align-items: center;justify-content: flex-start;}
.alert.alert-danger {background-color: #ffe0e0;border-radius: 10px;color: #ad0000;}


/* 테이블 */
.tbl-wrap.type1 table{width:100%; margin:10px 0 5px; border-top:2px solid #4f4e4e; word-break:keep-all; word-wrap:break-word;}
.tbl-wrap.type1 table th,
.tbl-wrap.type1 table td{border:1px solid #ccc; font-size:15px;}
.tbl-wrap.type1 table th{padding:14px 5px; background:#f9fafb; font-weight:500; text-align:center;}
.tbl-wrap.type1 table thead + .tbl-wrap.type1 tbody th{background:#fcfcfc;}
.tbl-wrap.type1 table td{padding:13px 12px; text-align: center;}
.tbl-wrap.type1 table th.left{text-align: left;}
.tbl-wrap.type1 table td.left{text-align: left;}

/* 테이블2 */
.table-wrap{margin:0 0 2rem;overflow:hidden;}
:is(.table, .b-table){position:relative;margin-right:-1px;width:calc(100% + 1px);border-top:1px solid var(--color17);border-spacing:0;border-collapse:separate;text-align:center;table-layout:fixed;}
:is(.table, .b-table):before{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--color17);}
:is(.table, .b-table) thead{position:relative;}
:is(.table, .b-table) th{padding:1.4rem 1rem 1.3rem;border-right:1px solid var(--color10);border-bottom:1px solid var(--color17);font-size:1.6rem;line-height:2.2rem;color:var(--black100);font-weight:var(--font-weight-medium);word-wrap:break-word;text-align:center;text-indent:0;}
:is(.table, .b-table).th-right thead th{border-right:1px solid var(--color10);}
:is(.table, .b-table) th.th-right{border-right:1px solid var(--color10);}
:is(.table, .b-table) thead th,
:is(.table, .b-table) tbody th{background-color:var(--color11);}
:is(.table, .b-table) tbody th{border-right:1px solid var(--color10);border-bottom:1px solid var(--color10);}
:is(.table, .b-table) td{padding:1.4rem 1rem 1.3rem;border-right:1px solid var(--color10);border-bottom:1px solid var(--color10);background-color:#fff;font-size:1.6rem;line-height:2.3rem;color:var(--black02); word-wrap:break-word;text-align:center;text-indent:0;}
:is(.table, .b-table) td .con-p{margin:0 0 1rem;}
:is(.table, .b-table) .td-big{font-size:2rem;line-height:2.6rem;font-weight:var(--font-weight-bold);}
:is(.table, .b-table) .td-left{text-align:left !important;}
:is(.table, .b-table) .td-bg{background-color:var(--color22); }
:is(.table, .b-table) .td-bg02{background-color:var(--color11); }
:is(.table, .b-table) .td-bg-yellow{background-color:var(--color60); }
:is(.table, .b-table) .td-bg-lightgray{background-color:var(--color22); }
:is(.table, .b-table) th.no-bg{background-color:#fff;}
:is(.table, .b-table) .no-bottom{border-bottom:none !important;}
:is(.table, .b-table) .no-right{border-right:none !important;}
:is(.table, .b-table) .bo-bottom th,
:is(.table, .b-table) .bo-bottom td,
:is(.table, .b-table) th.bo-bottom,
:is(.table, .b-table) td.bo-bottom{border-bottom:1px solid var(--color17) !important;}
:is(.table, .b-table) tfoot td{background:var(--color10);color:var(--black05);}

:is(.table, .b-table) td :is(.ul-type-dot, .ul-type-bar, .ol-type-circle){margin:0;}
:is(.table, .b-table) td .ul-type-dot > li{margin:0 0 7px;padding:0 0 0 1rem;font-weight:var(--font-weight-medium);color:var(--black05);line-height:2.4rem;}
:is(.table, .b-table) td .ul-type-dot > li:last-of-type{margin-bottom:0;}
:is(.table, .b-table) td .ul-type-dot > li::before{top:1rem;width:3px;height:3px;}
:is(.table, .b-table) td .ul-type-bar{margin:5px 0 0}
:is(.table, .b-table) td .ul-type-bar > li{margin:0 0 5px;color:var(--black07);}
:is(.table, .b-table) td .ul-type-bar > li:last-of-type{margin:0;}

/* scrollbox */
.scrollbox :is(.table, .b-table):after{content:'';display:block;position:absolute;top:1px;right:0;width:1px;height:calc(100% + 1px);background:#fff;}

.msg-touch-help{position:absolute;top:min(5rem, 12%);left:50%;z-index:10;margin:0 0 0 -3.5rem;width:7rem;height:7rem;opacity:0.7;}
.table-wrap .msg-touch-help{display:none;}
.msg-touch-help img {width:100%;}
.msg-touch-help p{margin:5px 0 0 0;font-size:1.6rem;line-height:2.4rem;color:#fff;font-weight:var(--font-weight-bold);text-align:center;}



/* 예약페이지 - 리스트페이지 */
.sch-box{margin-bottom: 30px; padding: 25px 20px; border-radius: 10px; background-color: #f6f6f6;}
.sch-box .form-conts{display: flex; flex-direction: row; justify-content: center; gap: 10px;}
.sch-box .krds-form-select{max-width: 150px; height: 45px; padding-right: 20px; color: #000;}
.sch-box .krds-input{max-width: 450px; height: 45px; font-size: 16px;}
.sch-box .krds-btn{min-width: 100px; height: 45px; font-size: 16px; font-weight: 600; border: 1px solid #f60000; color: #fff; background-color: #f60000;}
.sch-box .krds-btn:hover{border: 1px solid #e51010; background-color: #e51010;}

.icon-info{display: flex; align-items: center; padding: 20px 50px; margin-bottom: 40px; border: 2px solid #ddd; border-radius: 10px;}
.icon-info .icon-list{display: flex; gap: 30px; margin-right: 30px;}
.icon-info .icon-list li{display: flex; align-items: center; gap: 7px;}
.icon-info .icon-list li span{line-height: normal;}

.board-top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.board-top .total{padding-left: 20px; line-height: normal; background: url(../img/sub/i_total.png) left center no-repeat;}
.board-top .right-box{display: flex; gap: 5px;}
.board-top .right-box select{width: 170px; height: 45px; color: #000;}
.board-top .right-box .btn-bd{height: 45px; padding: 0 15px; border: 1px solid #58616a; border-radius: 5px;}
.board-top .right-box .btn-bd.active{color: #db0032; border: 1px solid #db0032;}
.board-top .right-box .btn-bd span{display: block; padding-left: 24px; line-height: normal; background-repeat: no-repeat; background-position: left center;}
.board-top .right-box .btn-bd .img{background-image: url(../img/sub/i_img.png);}
.board-top .right-box .btn-bd.active .img{background-image: url(../img/sub/i_img_on.png);}
.board-top .right-box .btn-bd .list{background-image: url(../img/sub/i_list.png);}
.board-top .right-box .btn-bd.active .list{background-image: url(../img/sub/i_list_on.png);}
.board-top .right-box .different{padding: 10px 13px; background-color: #f60000; text-align: center; color: #fff; border-radius: 5px; font-size: 16px; font-weight: 500;}
.board-top .right-box .different:hover{background-color: #e51010;}


/* 예약페이지 - 이미지형 리스트페이지 */
.img-board{display: flex; flex-wrap: wrap;}
.img-board > li{width: 32%; margin-right: 2%; margin-bottom: 2.5%; border: 1px solid #cbcbcb; border-radius: 10px; transition: all 0.3s;}
.img-board > li:nth-child(3n){margin-right: 0;}
.img-board > li a{display: block; width: 100%; height: 100%;}
.img-board .thumb{position: relative; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden;}
.img-board .thumb .top{position: absolute; top: 15px; left: 15px;}
.img-board .thumb .top .bd-label{display: inline-block; padding: 3px 10px; color: #fff; font-size: 16px; border-radius: 5px; background-color: #000000;}
.img-board .thumb .top .bd-label.type1{background-color: #e74411;}
.img-board .thumb .top .bd-label.type2{background-color: #464646;}
.img-board .thumb .top .bd-label.type3{background-color: #0078dd;}
.img-board .thumb .top .bd-label.type4{background-color: #e82284;}

.img-board .thumb .ico-wrap{position: absolute; bottom: 15px; left: 15px; display: flex; gap: 4px;}
.img-board .thumb .ico{display: block; width: 30px; height: 30px; text-indent: -999999px; background-repeat: no-repeat; background-size: contain;}
.img-board .thumb .ico.online{background-image: url(../img/sub/i_online.png);}
.img-board .thumb .ico.scene{background-image: url(../img/sub/i_scene.png);}
.img-board .thumb .ico.call{background-image: url(../img/sub/i_call.png);}
.img-board .thumb .ico.link{background-image: url(../img/sub/i_link.png);}
.img-board .thumb .img-wrap{width: 100%; height: 230px;}
.img-board .thumb .img-wrap img{width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
.img-board > li:hover .thumb .img-wrap img{transform: scale(1.2);}

.img-board .con-box{height: calc(100% - 230px); display: flex; flex-direction: column; padding: 20px 25px;}
.img-board .con-box .place{margin-bottom: 3px; font-size: 15px; color: #0079a5; font-weight: 500;}
.img-board .con-box .tit{margin-bottom: 7px; font-size: 22px;}
.img-board .con-box .info{margin-bottom: 20px;}
.img-board .con-box .info li{position: relative; padding-left: 15px; font-size: 15px; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.img-board .con-box .info li:before{position: absolute; top: 11px; left: 0; content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #37465f;}
.img-board .con-box .btn-view{margin-top: auto; padding: 5px 5px 7px 5px; text-align: center; font-size: 16px; color: #fff; border-radius: 5px; background-color: #37465f; transition: all 0.3s;}
.img-board > li:hover .con-box .btn-view{background-color: #141c2b;}

/* 예약페이지 - 목록형 리스트페이지 */
.list-board li{display: flex; justify-content: space-between; align-items: center; height: 75px; padding: 22px 0; margin-bottom: 25px; font-size: 16px; border-radius: 10px;}
.list-board .table-header{border: 1px solid #b1b8be; background-color: #eef2f7;}
.list-board .table-header > div{position: relative; text-align: center;}
.list-board .table-header > div:before{position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ""; display: block; width: 1px; height: 20px; background-color: #b1b8be;}
.list-board .table-header > div:last-child:before{display: none;}
.list-board .table-row{background-color: #ffffff; border: 1px solid #b1b8be;}
.list-board .table-row:hover{border: 2px solid #256ef4;}
.list-board .table-row a{transition: all 0.1s;}
.list-board .table-row:hover a{color: #0f56d9; text-decoration: underline;}
.list-board .table-row > div{position: relative; text-align: center; padding: 0 10px; overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}
.list-board .table-row > div.left{text-align: left;}
.list-board .table-row > div::before{ content: attr(data-label); font-weight: 500; display: none;}
.list-board .table-row > div:after{position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ""; display: block; width: 1px; height: 20px; background-color: #b1b8be;}
.list-board .table-row > div:last-child:after{display: none;}

.col-1 {flex-basis: 10%;}
.col-2 {flex-basis: 20%;}
.col-3 {flex-basis: 30%;}
.col-4 {flex-basis: 40%;}
.col-5 {flex-basis: 50%;}
.col-6 {flex-basis: 60%;}
.col-7 {flex-basis: 70%;}
.col-8 {flex-basis: 80%;}
.col-9 {flex-basis: 90%;}
.col-10 {flex-basis: 100%;}

.list-board .table-row > div .free{color: #1a73bf;}
.list-board .table-row > div .paid{color: #e82284;}
.list-board .table-row > div .ico-wrap{display: flex; gap: 4px; justify-content: center;}
.list-board .table-row > div .ico{display: inline-block; width: 26px; height: 26px; text-indent: -999999px; background-repeat: no-repeat; background-size: contain;}
.list-board .table-row > div .ico.online{background-image: url(../img/sub/i_online.png);}
.list-board .table-row > div .ico.scene{background-image: url(../img/sub/i_scene.png);}
.list-board .ico.call{background-image: url(../img/sub/i_call.png);}
.list-board .table-row > div .ico.link{background-image: url(../img/sub/i_link.png);}

.badge{display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 15px;}
.badge.bg-indigo{background-color: #063a74; color: #ffffff;}
.badge.bg-primary{background-color: #256ef4; color: #ffffff;}
.badge.bg-gray{background-color: #5e6469; color: #ffffff;}
.badge.bg-pink{background-color: #d63d4a; color: #ffffff;}
.badge.bg-black{background-color: #222222; color: #ffffff;}
.badge.bg-green{background-color: #228738; color: #ffffff;}



/* 로그인페이지 */
.login-wrap{width: 100%; max-width: 650px; margin: 0 auto; padding-top: 50px;}
.login-wrap .title{margin-bottom: 30px;}
.login-wrap .title p{font-size: 20px;}
.login-wrap .title h3{font-size: 30px; font-weight: 500;}
.login-wrap .title h3 strong{font-weight: 700;}
.login-wrap .login{border: 1px solid #ddd; border-radius: 10px;}
.login-wrap .tab{display: flex; widtH:100%;}
.login-wrap .tab li{width: 50%;}
.login-wrap .tab li a{display: block; width: 100%; padding: 13px; font-size: 19px; text-align: center; background-color: #ebebeb; color: #555;}
.login-wrap .tab li:nth-child(1) a{border-radius: 10px 0 0 0;}
.login-wrap .tab li:nth-child(2) a{border-radius: 0 10px 0 0;}
.login-wrap .tab li a:focus{z-index: 1;}
.login-wrap .tab li a.active{color: #fff; font-weight: 700; background-color: #d60815;}
.login-wrap .tab-cont{padding: 30px;}
.login-wrap .tab-cont .top-txt{margin-bottom: 20px; font-size: 20px; text-align: center;}

.member{max-width: 450px; margin: 0 auto;}
.member .krds-input{font-size: 16px;}
.member .btn-login{display: flex; justify-content: center; align-items: center; width: 100%; height: 55px; background-color: #444; color: #fff; font-size: 19px; border-radius: 10px;}
.member .btn-login:hover{background-color: #d60815;}
.member .btn-login span{line-height: normal;}
.member .link-group{display: flex; justify-content: center; align-items: center;}
.member .link-group li{position: relative; padding: 0 15px;}
.member .link-group li:before{position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ""; display: block; width: 1px; height: 15px; background-color: #c9c9c9;}
.member .link-group li:last-child:before{display: none;}

.non-member{width: 100%; max-width: 920px; margin: 0 auto;}
.non-member .certify{display: flex; flex-wrap: wrap; gap: 20px;}
.non-member .certify li{display: flex; flex-direction: column; gap: 13px; width: calc(50% - 10px); padding: 25px; text-align: center; border: 1px solid #d7d7d7; border-radius: 10px;}
.non-member .certify li .img-wrap{padding-top: 20px;}
.non-member .certify li .img-wrap img{max-width: 60px;}
.non-member .certify li h4{font-size: 19px; font-weight: 500;}
.non-member .certify li p{font-size: 15px; line-height: 1.3em; color: #555;}
.non-member .certify li .btn{display: flex; justify-content: center; align-items: center; width: 100%; max-width: 250px; height: 40px; margin: auto auto 0 auto; background-color: #333; color: #fff; font-size: 16px; border-radius: 5px;}
.non-member .certify li .btn:hover{background-color: #111;}

.non-member .certify li.sns{width: 100%;}
.non-member .certify li.sns .btn-wrap{display: flex; gap: 20px; max-width: 600px; margin: 0 auto;}
.non-member .certify li.sns .btn-wrap .btn-sns{flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 55px;}
.non-member .certify li.sns .btn-wrap .btn-sns .icon{display: block; width: 40px; height: 40px;}
.non-member .certify li.sns .btn-wrap .btn-sns span{display: block; line-height: normal;font-size: 18px;}
.non-member .certify li.sns .btn-wrap .naver{background-color: #08a746; color: #fff;}
.non-member .certify li.sns .btn-wrap .naver .icon{background: url(../img/sub/i_naver.png) no-repeat;}
.non-member .certify li.sns .btn-wrap .kakao{background-color: #ffec43;}
.non-member .certify li.sns .btn-wrap .kakao .icon{background: url(../img/sub/i_kakao.png) no-repeat;}

/* 체육시설 뷰페이지 */
.view-info{display: flex; align-items: center; justify-content: space-between; padding: 45px; border: 1px solid #d7d7d7; border-radius: 10px;}
.view-info .img-wrap{width: 42%; max-height: 320px; border-radius: 10px; overflow: hidden;}
.view-info .img-wrap img{object-fit: cover; width: 100%; height: 100%;}
.view-info .info-box{width: 53%;}
.view-info .info-box .top{padding: 0 10px 20px; margin-bottom: 25px; border-bottom: 1px solid #d7d7d7;}
.view-info .info-box .top .tit{display: flex; align-items: center; gap: 15px;}
.view-info .info-box .top .tit p{font-size: 28px; font-weight: 600;}
.view-info .info-box .top .tit .bd-label{height: 27px; padding: 0 10px; font-weight: 400; border-radius: 5px; font-size: 16px; color: #fff; background-color: #ddd;}
.view-info .info-box .top .tit .bd-label.type1{background-color: #e74411;}
.view-info .info-box .cont{padding: 0 10px;}
.view-info .info-box .cont li{display: flex; margin-bottom: 17px; font-size: 17px;}
.view-info .info-box .cont li:last-child{margin-bottom: 0;}
.view-info .info-box .cont li .tit{position: relative; width: 125px; padding-left: 25px; color: #008bad; font-weight: 700;}
.view-info .info-box .cont li .tit:before{position: absolute; top: 11px; left: 0; content:""; display: block; width: 5px; height: 5px; background-color: #008bad; border-radius: 50%;}
.view-info .info-box .cont li .tit:after{position: absolute; top: 5px; right: 0; content:""; display: block; width: 1px; height: 15px; background-color: #c1c1c1;}
.view-info .info-box .cont li p{width: calc(100% - 125px); padding-left: 25px;}

.reserve-schedule{display: flex; justify-content: space-between; margin-top: 50px;}
.calendar-wrap{width: 42%;}
.calendar-head{display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px;}
.calendar-head .month{display: flex; align-items: center; gap: 15px;}
.calendar-head .month .btn{min-width: auto; width: 17px; height: 17px; background-size: contain;}
.calendar-head .month .btn.prev{background: url(../img/main/i_prev.png) no-repeat center;}
.calendar-head .month .btn.next{background: url(../img/main/i_next.png) no-repeat center;}
.calendar-head .month p{padding-top: 2px; font-size: 20px; font-weight: 700; line-height: normal;}
.calendar-head .detail{display: flex; align-items: center; gap: 15px;}
.calendar-head .detail li{position: relative; padding-left: 21px; font-size: 15px;}
.calendar-head .detail li:before{position: absolute; top: 2px; left: 0; content:""; display: block; width: 15px; height: 15px;}
.calendar-head .detail li.remon:before{background-color: #f6ff6c; border-radius: 50%;}
.calendar-head .detail li.blue:before{background-color: #00a8ff; border-radius: 50%;}
.calendar-head .detail li.orange:before{border: 3px solid #ea6e2a;}
.calendar-body{font-size: 17px;}
.calendar-body .sun{color: #dd1515;}
.calendar-body .sat{color: #0639ab;}
.calendar-body .weekdays{display: flex; border-top: 1px solid #4c4c4c; border-bottom: 1px solid #4c4c4c;}
.calendar-body .weekdays li{flex: 1; line-height: 37px; text-align: center;}
.calendar-body .days{display: flex; flex-wrap: wrap; border-left: 1px solid #bdbdbd;}
.calendar-body .days li{width: calc(100% / 7); border-right: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd;}
.calendar-body .days li button{position: relative; width: 100%; height: 100%; padding: 23px 10px;}
.calendar-body .days li button:focus{z-index: 1;}
.calendar-body .days li.day-off button{background-color: #e4e4e4;}
.calendar-body .days li.day-ing button{background-color: #fff;}
.calendar-body .days li.day-ing button span{position: relative; display: inline-block;}
.calendar-body .days li.day-ing button span:before{position: absolute; top: -7px; right: -11px; content:""; display: block; width: 9px; height: 9px; background-color: #00a8ff; border-radius: 50%;}
.calendar-body .days li.today button{background-color: #f6ff6c;}
.calendar-body .days li.selected button{border: 3px solid #ea6e2a;}
.calendar-body .days li.day-ing-off button {
    background-color: #e4e4e4; /* day-off처럼 회색 */
}

.calendar-body .days li.day-ing-off button span {
    position: relative;
    display: inline-block;
}

.calendar-body .days li.day-ing-off button span:before {
    position: absolute;
    top: -7px;
    right: -11px;
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    background-color: #00a8ff; /* day-ing의 파란 점 */
    border-radius: 50%;
}


.time-wrap{width: 54%;}
.time-wrap .empty-box{display: flex; align-items: center; justify-content: center; height: 100%; border: 1px solid #d7d7d7; background-color: #EDF1F5; border-radius: 10px;}
.time-wrap .empty-box span{display: inline-block;}
.time-wrap .empty-box span:before{content: "!"; display: block; width: 30px; height: 30px; margin: 0 auto 10px; background-color: #256ef4; color: #fff; text-align: center; line-height: 32px; border-radius: 50%;}

.time-wrap .cal-box .Mobile{display: none;}

.time-wrap .cal-box .tit{margin-bottom: 10px; font-size: 22px; font-weight: 500;}
.time-wrap .cal-box .tit2{margin-top: 30px; margin-bottom: 10px; font-size: 20px;}
.time-wrap .cal-box .tit2.first{margin-top: 0;}
.time-wrap .cal-box .time-txt{font-size: 16px; color: #444;}
.time-wrap .cal-box .time-list{display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 15px; max-height: 225px; overflow-y: auto; padding: 20px; border: 1px solid #d7d7d7; border-radius: 10px;}
.time-wrap .cal-box .time-list li{width: calc(33.333% - 10px);}
.time-wrap .cal-box .time-list li.w100{width: 100%;}
.time-wrap .cal-box .time-list li .time{display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; padding: 10px 0; border: 2px solid #ccc; border-radius: 5px;}
.time-wrap .cal-box .time-list li .time p{position: relative; padding-left: 25px; font-size: 15px;}
.time-wrap .cal-box .time-list li .time p:before{content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; display: block; background-image: url(../img/sub/i_time.png);}
.time-wrap .cal-box .time-list li .time span{font-size: 15px; color: #256ef4;}
.time-wrap .cal-box .time-list li.done .time{background: #efefef;}
.time-wrap .cal-box .time-list li.done .time p{color: #888;}
.time-wrap .cal-box .time-list li.done .time span{color: #888;}
.time-wrap .cal-box .time-list li.on .time{border: 3px solid #ea6e2a;}
.time-wrap .cal-box .krds-check-area{flex-wrap: wrap; column-gap: 15px; row-gap: 5px;}
.time-wrap .cal-box .krds-form-check input[type=checkbox] ~ label{gap: 5px; line-height: 27px; font-size: 15px;}
.time-wrap .cal-box .btn-wrap li:nth-child(2){margin-left: auto;}

/* 체육시설 뷰페이지-하단 탭내용 */
.reserve-view .view-tab{margin-top: 60px;}
.tabs .tab-menu{display: flex; gap: 5px;}
.tabs .tab-menu .tab-btn{min-width: 160px; padding: 13px; font-size: 18px; color: #555; background-color: #ededed; border-radius: 5px 5px 0 0;}
.tabs .tab-menu .tab-btn.active{color: #fff; background-color: #0077b5;}
.tabs .tab-cont-wrap{padding: 50px 70px; border: 1px solid #cdcdcd; border-radius: 0 10px 10px 10px;}
.tabs .tab-cont h4{margin-top: 30px; margin-bottom: 10px; font-size: 23px;}
.tabs .tab-cont h4:first-child{margin-top: 0;}
.tabs .tab-cont p{font-size: 16px; color: #333;}

/* 뷰페이지-팝업 */
.notice-popup{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.8); z-index: 500;}
.notice-popup .box{overflow: inherit; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 800px; padding: 90px 30px 30px 30px; background-color: #fff; border-radius: 10px;}
.notice-popup .box h4{position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 30px 15px 30px; background-color: #258aa3; color: #fff; font-weight: 400; font-size: 20px; border-radius: 10px 10px 0 0;}
.notice-popup .box h4 span{line-height: normal}
.notice-popup .box h4 .btn-close i{background-color: #fff;}
.notice-popup .box .cont-wrap{}
.notice-popup .box .cont{min-height: 300px; max-height: 380px; overflow-y: auto; padding: 30px; background-color: #f7f7f7;}
.notice-popup .navi{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.notice-popup .swiper-button{width: 55px; height: 55px; background-repeat: no-repeat; background-position: center; background-size: 44px;}
.notice-popup .swiper-button-prev{left: -70px !important; background-image: url(../img/sub/i_prev.png);}
.notice-popup .swiper-button-next{right: -70px !important; background-image: url(../img/sub/i_next.png);}
.notice-popup .swiper-navigation-icon{display: none;}
.notice-popup .swiper-button-prev::after{display: none;}
.notice-popup .swiper-button-next::after{display: none;}
.notice-popup .control{display: flex; justify-content: center; padding-bottom: 15px; background-color: #f7f7f7;}
.notice-popup .control .swiper-pagination{position: static; width: auto; height: auto; margin-right: 10px;}
.notice-popup .control .swiper-pagination .swiper-pagination-bullet-active{width: 40px; background-color: #1496b1;}
.notice-popup .control button{width: 20px; height: 20px; text-indent: -999999px; background-position: center; background-repeat: no-repeat;}
.notice-popup .control .btn-pause{background-image: url(../img/main/i_stop.png);}
.notice-popup .control .btn-play{background-image: url(../img/main/i_start.png);}

/* 예약하기 */
.reserve-check{width: 100%; max-width: 1200px; margin: 0 auto;}
.reserve-check .tit{margin-bottom: 30px; font-size: 25px; text-align: center; background-color: #f5f5f5; padding: 15px 10px; border-top: 2px solid #222; border-bottom: 1px solid #ddd; font-weight: 500;}
.reserve-check .tit p{font-size: 20px;}
.required{font-size: 16px;}
.req{color: #ff2a2a;}
.bundle{margin-bottom: 60px;/*font-family: 'Pretendard GOV'; padding: 40px; border: 1px solid #b1b8be; border-radius: 15px;*/}
/*.bundle.last{margin-bottom: 30px;}*/
.bundle .top{display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; margin-bottom: 25px; padding-bottom: 10px;}
.bundle h4{display: flex; align-items: center; gap: 12px; font-size: 25px; font-weight: 500;}
.bundle .krds-form-check input[type=radio] ~ label, 
.bundle .krds-form-check input[type=checkbox] ~ label{line-height: 27px; font-size: 16px;}
.bundle .form-group-row{display:flex; gap:0.5rem;}
.krds-form-check{display: inline-block;}
.bundle .krds-input{max-width: 350px; height: 45px; font-size: 15px; border: 1px solid #ababab;}
.bundle .krds-input.w100{max-width: 100%;}
.bundle textarea.krds-input{height: 300px;}
.bundle .krds-btn{height: 45px; font-size: 16px;}
.bundle .form-group .form-conts{gap: 7px;}
.bundle .input-group{gap: 7px;}

.privacy-use{ position:relative; background: #f1f1f1; border-radius:4px; padding:40px; font-size: 16px; margin-top: 30px; margin-bottom: 30px; padding-bottom: 60px; }
.privacy-use .cont{position: relative; height: 200px; padding-bottom: 30px; overflow: hidden; font-family: 'Pretendard GOV';}
.privacy-use .cont:after{content: ''; width: 100%; height: 60px; background-image: linear-gradient(0deg, #f1f1f1, transparent); position: absolute; left: 0; bottom: 0;}
.privacy-use .cont h4{margin: 20px 0 5px 0; font-size: 20px;}
.privacy-use .cont h4:first-child{margin-top: 0;}
.privacy-use .cont .krds-info-list > li > .krds-info-list{margin-top: 5px;}
.privacy-use .more{display:inline-flex; align-items:center; justify-content:center; gap:10px; width: calc(100% - 80px); text-align: center; height:60px; font-size: 16px; position:absolute; left:40px; bottom:0; border-top:1px solid #ddd; background: #f1f1f1; }
.privacy-use .more span{position: relative; padding-right: 30px;}
.privacy-use .more span:after{position: absolute; right: 0; top: 5px; display: block; content:""; width: 16px; height: 10px; background: url(../img/sub/arrow-down.svg) no-repeat; transition:all ease .35s; }
.privacy-use.active .cont{height:auto;}
.privacy-use.active .cont:after{display: none;}
.privacy-use.active .more span:after{ transform:rotate(180deg); }
.agree-box{display: flex; align-items: center; justify-content: center; padding: 15px; background-color: #f0f0f0; border-radius: 10px;}

.reserve-btn{padding: 25px 30px; background-color: #eff5ff; border-radius: 10px;}
.reserve-btn .btn-wrap{flex-wrap: wrap; max-width: 620px; margin: 0 auto;}
.reserve-btn .info-txt{margin-bottom: 15px; text-align: center; font-size: 15px;}

.success-txt{display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 30px; padding: 30px 10px; background-color: #f9fafb; border: 1px solid #ddd; border-radius: 10px;}
.success-txt strong{font-size: 21px;}
.success-txt p{color: #444; text-align: center;}
.success-txt a{display: flex; padding: 5px 15px; align-items: center; gap: 10px; font-size: 16px; color: #fff; background-color: #22324c; border-radius: 10px;}
.success-txt a:after{content: ""; display: block; width: 10px; height: 17px; background: url(../img/sub/i_go.png) no-repeat;}



/* 나의 예약현황 */
.my-page .Tab{position: relative; display: flex; margin-bottom: 30px;}
.my-page .Tab:before{position: absolute; bottom: 8px; left: 0; content: ""; display: block; width: 100%; height: 2px; background-color: #b9b9b9;}
.my-page .Tab li{flex: 1; position: relative; padding-bottom: 8px;}
.my-page .Tab li a{position: relative; display: block; width: 100%; text-align: center; line-height: 55px; font-size: 19px;}
.my-page .Tab li a:before{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s; content: ""; display: block; width: 0; height: 4px; background-color: #f60000;}
.my-page .Tab li a:focus{z-index: 10;}
.my-page .Tab li.active a{font-weight: 700; color: #f60000;}
.my-page .Tab li.active a:before{width: 100%;}
.my-page .Tab li.active:before{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #f60000;}
.my-page .top-box{padding: 40px 50px; margin-bottom: 30px; border-radius: 10px; border: 1px solid #d1d1d1;}
.my-page .top-box h4{margin-bottom: 20px; font-size: 23px; font-weight: 500;}
.my-page .top-box .list li{position: relative; margin-bottom: 5px; padding-left: 18px; font-size: 16px;}
.my-page .top-box .list li:last-child{margin-bottom: 0;}
.my-page .top-box .list li:after{position: absolute; top: 10px; left: 0; content: ""; display: block; width: 5px; height: 5px; background-color: #666; border-radius: 50%;}

.my-page .tabs .tab-list{display: flex; gap: 7px; margin-bottom: 30px;}
.my-page .tabs .tab-list button{width: 140px; line-height: 40px; color: #222; font-size: 16px; border-radius: 40px; background-color: #ebebeb;}
.my-page .tabs .tab-list button.active{color: #fff; background-color: #f60000;}

.list-board2{font-size: 15px;}
.list-board2 .table-header{display: flex; justify-content: space-between; align-items: center; background-color: #f9fafb; border-top: 2px solid #000;}
.list-board2 .table-header li{position: relative; text-align: center; padding: 15px 0;;}
.list-board2 .table-board{border-top: 1px solid #b3b3b3;}
.list-board2 .table-row{display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; border-bottom: 1px solid #b3b3b3;}
.list-board2 .table-row > div{position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 15px 5px;}
.list-board2 .table-row > div.left{text-align: left;}
.list-board2 .table-row > div::before{content: attr(data-label); font-weight: bold; display: none;}
.list-board2 .table-row > div .receipt{display: block; width: 18px; height: 17px; background: url(../img/sub/i_receipt.png) no-repeat;}
.list-board2 .table-row > div .btn-cancel{height: 33px; padding: 0 5px; line-height: normal; color: #fff; background-color: #df4646;}
.list-board2 .table-row > div .btn-cancel:hover{background-color: #df2828;}
.list-board2 .table-row > div .btn-payment{width: 60px; height: 33px; line-height: normal; color: #fff; background-color: #1a73bf;}
.list-board2 .table-row > div .btn-payment:hover{background-color: #0f56d9;}

/* 커뮤니티 */
.sch-box2{margin-bottom: 30px; padding: 30px; background-color: #fff; border: 2px solid #ddd; border-radius: 10px;}
.sch-box2 .form-tit{width: 130px; color: #222;}
.sch-box2 .form-conts{display: flex; flex-direction: row; justify-content: center; gap: 10px; align-items: center;}
.sch-box2 .krds-form-select{max-width: 150px; height: 45px; padding-right: 20px; color: #000;}
.sch-box2 .krds-input{max-width: 350px; height: 45px; font-size: 17px;}
.sch-box2 .date{position: relative;}
.sch-box2 .date .krds-input{max-width: 200px;}
.sch-box2 .date .btn-calendar{position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: flex;}
.sch-box2 .sch-btn{min-width: 100px; height: 45px; font-size: 17px; font-weight: 600; border: 1px solid #29567c; color: #fff; background-color: #29567c;}
.sch-box2 .sch-btn:hover{border: 1px solid #1a73bf; background-color: #1a73bf;}

.board_area.type1 .board_table{border-spacing: 0;}
.board_area.type1 .board_table thead th{padding: 16px 10px 14px 10px; border-bottom: 1px solid #ddd; background-color: #f9fafb;}
.board_area.type1 .board_table thead th::after{display: none;}
.board_area.type1 .board_table tbody td{padding: 15px 10px;}
.board_area.type1 .board_table tbody td a{transition: all 0.1s;}
.board_area.type1 .board_table tbody td a:hover{color: #0f56d9; text-decoration: underline;}

.krds-file-upload .file-upload{padding: 40px 10px; gap: 15px;}
.krds-file-upload .file-upload .txt{font-size: 16px;}

/* 보건 */
.health-center{display: flex; justify-content: space-between; padding: 40px 50px; margin-bottom: 30px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px;}
.health-center .img-wrap{width: 342px; border-radius: 10px; overflow: hidden;}
.health-center .img-wrap img{object-fit: cover; width: 100%; height: 100%;}
.health-center .info{display: flex; flex-direction: column; gap: 20px; width: calc(100% - 392px);}
.health-center .info h3{font-size: 24px;}
.health-center .info ul{display: flex; flex-direction: column; gap: 10px;}
.health-center .info li{display: flex; align-items: start; gap: 20px; padding: 14px 20px; background-color: #f6f6f6; border-radius: 10px;}
.health-center .info li span{display: flex; align-items: center; gap: 13px; font-weight: 500;}
.health-center .info li span:before{content: ""; display: block; width: 19px; height: 19px;}
.health-center .info li.adress span:before{background: url(../img/sub/i_map.png) no-repeat;}
.health-center .info li.call span:before{background: url(../img/sub/i_call_02.png) no-repeat;}
.health-center .info li p{color: #666;}
.health-center .info a{display: flex; align-items: center; justify-content: center; gap: 10px; width: 150px; height: 45px; color: #fff; font-size: 16px; background-color: #22324c; border-radius: 10px;}
.health-center .info a:after{content: ""; display: block; width: 10px; height: 17px; background: url(../img/sub/i_go.png) no-repeat;}
.health-center .info a:hover{background-color: #1e417b;}

/* 울산의 스포츠 둘러보기 */
.other-service .btn-back{display: inline-block; padding: 5px 15px; border: 1px solid #444; border-radius: 5px; }
.other-service .btn-back:hover{background-color: #444; color: #fff;}
.img-list:after{content: ""; display: block; clear: both; }
.img-list{border-top: 2px solid #000; margin-top: 20px; display: flex; flex-wrap: wrap;}
.img-list li{width: calc(100% / 5); position: relative;}
.img-list li:before{content: ''; width: 40px; height: 40px; background-color: #fff; display: block; position: absolute; left: -20px; bottom: 185px; z-index: 1;}
.img-list li:after{content: ''; width: calc(100% - 40px); height: 1px; background-color: #000; display: block; position: absolute; left: 20px; bottom: -1px;}
.img-list li > a{position: relative; height: 100%; display: flex; flex-direction: column; padding: 20px; gap: 20px;}
.img-list li > a:before, .img-list li > a:after{content: ''; width: 1px; height: calc(100% - 50px); background-color: #000; display: block; position: absolute; left: 0; top: 30px;}
.img-list li > a:after{left: auto; right: -1px;}
.img-list li:nth-child(5n + 1) > a:before{display: none;}
.img-list li:nth-child(5n) > a:after{display: none;}
.img-list li > a > div{position: relative;}
.img-list li > a > .txt-wrap:before {content: ''; width: 100%; height: 1px; background-color: #000; display: block; position: absolute; left: 0; top: 0;}
.img-list li > a > .txt-wrap{display: flex; flex-direction: column; padding-top: 15px;}
.img-list li > a > .txt-wrap span{font-size: 13px;}
.img-list li > a > .txt-wrap h4{}
.img-list li > a > .txt-wrap p{position: relative; margin-top: 5px; padding-left: 20px; font-size: 14px; color: #444;}
.img-list li > a > .txt-wrap p:before{position: absolute; top: 4px; left: 0; content: ""; display: block; background-repeat: no-repeat; background-size: contain;}
.img-list li > a > .txt-wrap p.adress:before{width: 12px; height: 15px; background-image: url(../img/sub/i_map.png);}
.img-list li > a > .txt-wrap p.call:before{width: 12px; height: 15px; background-image: url(../img/sub/i_call_02.png);}
.img-list li > a > .btn-go{margin-top: auto; padding: 5px; text-align: center; font-size: 15px; color: #fff; border-radius: 5px; background-color: #37465f; transition: all 0.3s;}
.img-list li > a:hover > .btn-go{background-color: #141c2b;}

/* 컨텐츠 스타일 */
.h4-tit01{position: relative; margin-bottom: 15px; font-size: 26px; font-weight: 600; color: #000;}
.h5-tit01{margin-bottom: 15px; font-size: 22px; font-weight: 600; color: #111;}
.con-p{margin-bottom: 20px; font-size: 17px; color: #444;}
.con-p2{font-size: 16px;}
.bd-top{padding-top: 25px; border-top: 2px solid #b8c2c9;}
.box{padding: 25px 40px; border-radius: 5px;}
.box.gray{background-color: #f4f7f9;}
.box.bd{border: 1px solid #ddd;}
.Btn{display: inline-block; padding: 10px 17px; font-size: 16px; border-radius: 5px;}
.Btn.blank{display: inline-flex; align-items: center;}
.Btn.blank:after{content:""; display: block; width: 20px; height: 20px; margin-left: 7px; mask-image: url(../img/sub/ico_more.svg); background-color: #fff; mask-size: contain;}
.Btn.type1{color: #fff; background-color: #26475f;}
.Btn.type1:hover{background-color: #192e3e;}
.check-list>li{position: relative; margin-bottom: 10px; padding-left: 30px; line-height: 1.7em; font-size: 16px;}
.check-list>li:last-child{margin-bottom: 0;}
.check-list>li:before{position: absolute; top: 6px; left: 0; content: ""; display: block; width: 14px; height: 13px; background: url(../img/sub/i_check_02.png) no-repeat; background-size: contain;}
.dot-list>li{position: relative; margin-bottom: 10px; padding-left: 25px; line-height: 1.7em; font-size: 16px;}
.dot-list>li:last-child{margin-bottom: 0;}
.dot-list>li:before{position: absolute; top: 10px; left: 0; content: ""; display: block; width: 5px; height: 5px; background-color: #515151; border-radius: 50%;}
.num-list>li{position: relative; margin-bottom: 5px; padding-left: 28px; line-height: 1.7em; font-size: 16px;}
.num-list>li:last-child{margin-bottom: 0;}
.num-list>li span{position: absolute; top: 0; left: 0;}
.dash-list>li{position: relative; margin-bottom: 5px; padding-left: 25px; line-height: 1.7em; font-size: 16px;}
.dash-list>li:last-child{margin-bottom: 0;}
.dash-list>li:before{position: absolute; top: 13px; left: 0; content: ""; display: block; width: 8px; height: 2px; background-color: #919191; border-radius: 50%;}

/* 접수중인 강좌 */
.link-list{display: flex; flex-wrap: wrap; gap: 10px; column-gap: 20px;}
.link-list li{width: calc(50% - 10px);}
.link-list li a{display: flex; align-items: center; justify-content: space-between; transition: all 0.4s; width: 100%; height: 100%; padding: 10px 20px 10px 30px; background-color: #f4f7f9; border-radius: 5px;}
.link-list li a:after{flex: none; transition: all 0.4s; content: ""; display: block; width: 40px; height: 40px; background-image: url(../img/sub/i_more.png); background-repeat: no-repeat; background-size: contain;}
.link-list li a:hover{background-color: #fff; box-shadow: 0 0 0 1px #db000f inset; color: #db000f;}
.link-list li a:hover:after{background-image: url(../img/sub/i_more_02.png);}

.img-link-list{display: flex; flex-wrap: wrap;}
.img-link-list li{width: calc(100% / 3 - 40px / 3); padding: 20px; margin-right: 20px;  margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px;}
.img-link-list li:nth-child(3n){margin-right: 0;}
.img-link-list li a{display: flex; width: 100%; height: 100%; flex-direction: column;}
.img-link-list li a .img-wrap{width: 100%; height: 190px; border-radius: 8px; overflow: hidden;}
.img-link-list li a .img-wrap img{width: 100%; height: 100%; object-fit: cover;}
.img-link-list li a p{margin: 15px 0; text-align: center; color: #000;}
.img-link-list li a .btn-view{display: block; margin-top: auto; padding: 5px; text-align: center; transition: all 0.4s; background: #37465f; color: #fff; border-radius: 4px; font-size: 15px;}
.img-link-list li a:hover .btn-view,
.img-link-list li a:focus .btn-view{color: #fff; background-color: #141c2b;}


/* 중복로그인 안내 */
.login-notice{padding: 12px 20px; font-size: 15px; background-color: #f7f7f7; border-left: 5px solid #d91717;}
.login-notice strong{color: #d91717; font-weight: 500;}
.login-notice i{margin-right: 5px; width: 21px; height: 21px; mask-size: 21px; vertical-align: sub; content: ""; mask-image: url(../img/sub/ico_information.svg); background-color: #d91717; }
.login-notice span{margin-left: 5px;}

/* 예약변경안내 */
.tabs2 .tab-menu{display: flex; padding-bottom: 10px;}
.tabs2 .tab-menu .tab-btn{position: relative; flex: 1; height: 55px; font-size: 20px; font-weight: 500; color: #464c53; border-bottom: 2px solid #b8c2c9;}
.tabs2 .tab-menu .tab-btn.active{color: #f60000; font-weight: 600; border-bottom: 4px solid #f60000;}
.tabs2 .tab-menu .tab-btn.active:before{position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); display: block; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #f60000;}

.procedure{display: flex;}
.procedure li{position: relative; width: calc((100% / 7) - (210px / 7)); margin-right: 35px; padding: 0 10px; text-align: center;}
.procedure.item-5 li{width: calc((100% / 5) - (140px / 5));}
.procedure li:last-child{margin-right: 0;}
.procedure li p{margin-top: 12px; font-size: 16px;}
.procedure li.next:after{position: absolute; top: 50%; right: -35px; transform: translateY(-50%); content: ""; display: block; width: 26px; height: 20px; background: url(../img/sub/i_arrow.png) no-repeat; background-size: contain;}

/* 공공시설안내 */
.org-list-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px;}
.org-item{border: 1px solid #eee; padding: 15px; border-radius: 8px; background: #fff; text-align: center;}
.org-item .thumb img{width: 100%; height: 170px; object-fit: cover; border-radius: 6px;}
.org-title{font-size: 18px; font-weight: bold; margin: 12px 0 4px;}
.org-addr{font-size: 14px; color: #666;}
.org-detail-btn{display: block; margin-top: 15px; padding: 5px; background: #37465f; color: #fff; border-radius: 4px; font-size: 15px;}
.org-detail-btn:hover,
.org-detail-btn:focus{color: #fff; background-color: #141c2b}
.org-thumb img {width: 100%; height: 430px; object-fit: cover; border-radius: 10px;}

/* 결제하기-감면할인 */
.info-txt{display: flex; align-items: center; font-size: 16px;}
.info-txt i{margin-right: 7px;}
.info-txt span{line-height: 24px; font-weight: 500;}
.radio-box{display: flex; flex-wrap: wrap; gap: 10px;}
.radio-box .krds-form-check{width: 100%;}
.radio-box .krds-form-check label{flex-wrap: wrap; width: 100%; padding: 13px; border: 1px solid #b1b8be; border-radius: 10px;}
.radio-box .krds-form-check input[type=radio] ~ label:after{top: 21px; left: 18px;}
.radio-box .krds-form-check label .krds-badge{margin-top: 2px;}
.radio-box .krds-form-check input[type=radio]:checked ~ label{background-color: #ecf2fe; border: 1px solid #256ef4;}
.radio-box .krds-form-check input[type=radio]:disabled ~ label{background-color: #d4d9dd; color: #6c7681;}
.radio-box .krds-form-check input[type=radio]:disabled ~ label .krds-badge{background-color: #9da4a9;}

.infoBox{padding: 20px 15px; background-color: #f2f2f2; border-radius: 10px;}
.dot{position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 16px;}
.dot:before{disaply: block; content:""; position: absolute; top: 10px; left: 10px; width: 4px; height: 4px; background-color: #464c53; border-radius: 50%;}
.dot:last-child{margin-bottom: 0;}
.warning-txt{position: relative; padding-left: 23px;}
.warning-txt:before{display: block; content:"";  position: absolute; top: 4px; left: 0px; width: 18px; height: 18px; background-image: url(../img/sub/ico_warning_fill.svg); background-size: contain; background-repeat: no-repeat;}

.payment{width: 100%; max-width: 550px; margin: 40px auto 0 auto;}
.payment .item-list{width: 100%; padding: 40px 50px; border: 1px solid #ccc; border-radius: 10px;}
.payment .item-list li{display: flex; justify-content: space-between; margin-bottom: 20px; padding: 0 20px;}
.payment .item-list li p{font-weight: 500;}

.payment .item-list li.final{margin-bottom: 0; padding-top: 20px; border-top: 1px solid #b1b8be; font-size: 22px; font-weight: 600;}
.payment .item-list li.final p{font-weight: 600; color: #0035f9;}
.payment .btn-wrap {gap: 10px;}
.payment .btn-wrap li{flex: 1;}
.payment .btn-wrap li .btn{width: 100%; border-radius: 10px;}

/* 사이트맵 */
.sitemap .area{position: relative; width: 100%; margin-bottom: 70px; padding: 0px 0px 20px 17%; box-sizing: border-box; border-top: 1px dotted #d5d5d5;}
.sitemap .area .tit{position:absolute; top:0; left:0; width: 17.5%; padding:35px 0%; font-size:22px; font-weight: 500;}
.sitemap .area .tit:before{content: ''; display: block; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background-color: #2c2a27; transition:0.2s;}
.sitemap .area .tit:hover{color: #f60000;}
.sitemap .area .tit:hover:before{background-color: #f60000;}
.sitemap .area .site_list{display: flex; flex-wrap: wrap; visibility: visible; opacity: 1; transition: all 0.5s; width:100%; padding-top: 40px;}
.sitemap .area .site_list li{width: calc(100% / 4); margin-bottom: 15px; padding: 0 10px;}
.sitemap .area .site_list li a{display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border: 1px solid #e4e8eb; border-radius: 5px; font-size: 16px; color: #222; transition: all 0.3s;}
.sitemap .area .site_list li .img-wrap{display: flex;}
.sitemap .area .site_list li a:hover{border: 1px solid #f60000; color: #f60000;}
.sitemap .area .site_list li a:hover .img-wrap img{filter: invert(11%) sepia(88%) saturate(7155%) hue-rotate(1deg) brightness(95%) contrast(108%);}




/***********************************************/
/* 화면 1450px 이하 */
@media screen and (max-width: 1450px) {
	/* 체육시설 뷰페이지 */
	.time-wrap .cal-box .time-list{gap: 10px;}
	.time-wrap .cal-box .time-list li{width: calc(50% - 7.5px);}
	
	
	
	
	
}


/***********************************************/
/* 화면 1080px 이하 */
@media screen and (max-width: 1080px) {
	/* 예약페이지 - 리스트 */
	.icon-info .icon-list{gap: 15px; margin-right: 20px;}
	
	/* 예약페이지 - 이미지형 리스트페이지 */
	.img-board > li:nth-child(3n){margin-right: 3%;}
	.img-board > li{width: 48.5%; margin-right: 3%;}
	.img-board > li:nth-child(2n){margin-right: 0;}
	
	/* 예약페이지 - 목록형 리스트페이지 */
	.list-board li{height: auto; padding: 22px;}
	.list-board .table-header{display: none;}
	.list-board .table-row{flex-direction: column; align-items: flex-start;}
	.list-board .table-row > div{width: 100%; text-align: left;}
	.list-board .table-row > div::before{display: inline-block; margin-right: 10px;}
	.list-board .table-row > div.service-name::before{display: none;}
	.list-board .table-row > div.service-name{display: block; padding-bottom: 10px; margin-bottom: 12px; font-size: 20px; border-bottom: 1px solid #b1b8be;}
	.list-board .table-row > div:after{display: none;}
	.list-board .table-row > div .ico-wrap{display: inline-block;}
	.list-board .table-row > div .ico{margin-right: 4px;}
	/*.list-board .table-row > div .ico{width: auto; height: auto; text-indent: 0; background-image: none !important;}*/
	
	/* 체육시설 뷰페이지 */
	.view-info{flex-direction: column; align-items: center; gap: 20px;}
	.view-info .img-wrap{width: 100%; max-width: 570px;}
	.view-info .info-box{width: 100%;}
	.view-info .info-box .top{padding: 0 10px 10px; text-align: center;}
	.view-info .info-box .top .tit{justify-content: center;}
	.reserve-schedule{gap: 30px; flex-direction: column;}
	.calendar-wrap{width: 100%;}
	.calendar-body .days li button{padding: 15px 10px;}
	.time-wrap{width: 100%;}
	
	.tabs .tab-cont-wrap{padding: 40px;}
	
	/* 나의 예약현황 */
	.my-page .Tab li a{font-size: 18px;}
	.list-board2 .table-header{display: none;}
	.list-board2 .table-board{border-top: 0;}
	.list-board2 .table-row{flex-direction: column; align-items: flex-start; padding: 25px 30px; margin-bottom: 20px; border: 1px solid #b3b3b3; border-radius: 10px;}
	.list-board2 .table-row > div{justify-content: flex-start; width: 100%; padding: 0; margin-bottom: 5px; text-align: left;}
	.list-board2 .table-row > div::before{display: inline-block; width: 80px; margin-right: 10px;}
	.list-board2 .table-row > div.service-name{padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #b3b3b3; font-size: 18px;}
	.list-board2 .table-row > div.service-name::before{display: none;}
	.list-board2 .table-row > div .btn-cancel{height: 25px; font-size: 14px;}
	
	/* 커뮤니티 */
	.sch-box2 .form-conts{flex-wrap: wrap;}
	.sch-box2 .krds-input{max-width: none; width: calc(100% - 270px);}
	.sch-box2 .date{width: calc(50% - 14px);}
	.sch-box2 .date .krds-input{max-width: none; width: 100%;}
	
	/* 보건 */
	.health-center .info li{padding: 0; background-color: #fff; font-size: 16px;}
	
	/* 울산의 스포츠 둘러보기 */
	.img-list li{width: calc(100% / 3);}
	.img-list li:nth-child(5n + 1) > a:before{display: block;}
	.img-list li:nth-child(5n) > a:after{display: block;}
	.img-list li:nth-child(3n + 1) > a:before{display: none;}
	.img-list li:nth-child(3n) > a:after{display: none;}
	
	/* 사이트맵 */
	.sitemap .area .site_list li{width: calc(100% / 3);
	
	
	
	
	
}

/***********************************************/
/* 화면 1023px 이하 */
@media screen and (max-width: 1023px) {
	/* 커뮤니티 */
	.board_table tbody tr{position: relative; padding-left: 70px;}
	.board_area.type1 .board_table tbody td{padding: 0; color: #888;}
	.board_area.type1 .board_table tbody td.num{position: absolute; top: 16px; left: 10px;}
	.board_area.type1 .board_table tbody td.subject a{font-weight: 500; color: #000;}
	
	/* 테이블2 */
	:is(.table, .b-table) th{padding:1rem 1rem 9px;font-size:1.4rem;line-height:2rem;}
	:is(.table, .b-table) td{padding:1rem 1rem 9px;font-size:1.4rem;line-height:2rem;}
	:is(.table, .b-table) .td-big{font-size:1.6rem;line-height:1.8rem;}
	:is(.table, .b-table) .td-left{padding-left:1rem;}
	:is(.table, .b-table) td .ul-type-dot > li{margin:0;padding:0 0 0 8px;line-height:2.4rem;}
	:is(.table, .b-table) td .ul-type-dot > li::before{top:1.2rem;}

	.table-wrap{margin:0 0 1rem;}
	.b-sj-table tbody th{padding:7px 1rem;}

	/* scrollbox */
	.scrollbox{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;}
	.scrollbox > :is(.table, .b-table){width:110rem;}
	.scrollbox  .table-width700{min-width:70rem;width:100%;}
	.scrollbox  .table-width700 th{word-break:keep-all;}
	.table-wrap .msg-touch-help{display:block;}
	
	/* 예약변경안내 */
	.procedure{flex-wrap: wrap;}
	.procedure li{width: calc((100% / 3) - (105px / 3)); padding: 10px 0;}
	.procedure.item-5 li{width: calc((100% / 3) - (105px / 3));}
	
}

/***********************************************/
/* 화면 991px 이하 */
@media screen and (max-width: 991px) {
	/* 예약페이지 - 리스트 */
	.sch-box .form-conts{flex-wrap: wrap; justify-content: space-between; gap: initial; row-gap: 5px;}
	.sch-box .krds-form-select{max-width: none; width: calc(50% - 2.5px); padding-left: 10px;}
	.sch-box .krds-input{width: calc(100% - 105px); max-width: inherit;}
	
	.icon-info{display: none; padding: 0; border: none;}
	.icon-info .icon-list li p{width: 25px;}
	.icon-info>p{display: none;}
	
	/* 로그인페이지 */
	.login-wrap{padding-top: 50px;}
	.login-wrap .title{margin-bottom: 25px;}
	.login-wrap .title p{font-size: 20px;}
	.login-wrap .title h3{font-size: 30px;}
	.login-wrap .tab li a{font-size: 18px;}
	.login-wrap .tab-cont .top-txt{font-size: 20px;}
	
	/* 보건 */
	.health-center{padding: 20px; margin-bottom: 20px; align-items: center;}
	.health-center .img-wrap{width: 260px;}
	.health-center .info{gap: 14px; width: calc(100% - 300px);}
	.health-center .info h3{font-size: 22px;}
	.health-center .info a{width: 130px; height: 38px; font-size: 15px;}
	
	/* 접수중인 강좌 */
	.img-link-list li{width: calc(100% / 2 - 20px / 2);}
	.img-link-list li:nth-child(3n){margin-right: 20px;}
	.img-link-list li:nth-child(2n){margin-right: 0;}
	
	/* 사이트맵 */
	.sitemap .area{padding: 25px 0 0 0; margin-bottom: 50px;}
	.sitemap .area .tit{position: static; padding: 0 10px;}
	.sitemap .area .tit:before{width: 30%;}
	.sitemap .area .site_list{padding-top: 20px;}
	
	
	
	
	
}

/***********************************************/
/* 화면 820px 이하 */
@media screen and (max-width: 820px) {
	/* 예약페이지 - 리스트 */
	.board-top .right-box .different {padding: 8px 10px; font-size: 15px;}
	.board-top .right-box select{height: 40px; font-size: 15px;}
	.board-top .right-box .btn-bd{height: 40px; padding: 0 11px;}
	.board-top .right-box .btn-bd span{width: 17px; padding-left: 0; text-indent: -9999px; background-position: center;}
	
	/* 예약하기 */
	.reserve-check .tit{font-size: 22px;}
	.bundle .top{padding-bottom: 5px;}
	.bundle h4{font-size: 20px;}
	.reserve-btn .btn-wrap li{width: calc(25% - 3.75px);}
	.reserve-btn .btn-wrap li .btn{width: 100%;}
	
	/* 보건 */
	.health-center{flex-direction: column; gap: 10px;}
	.health-center .img-wrap{width: 100%; max-width: 350px;}
	.health-center .info{width: 100%; align-items: center;}
	.health-center .info h3{font-size: 19px;}
	.health-center .info li{font-size: 14px;}
	.health-center .info a{width: 100%;}
	
	/* 울산의 스포츠 둘러보기 */
	.other-service .btn-back{font-size: 15px;}
	.img-list li{width: calc(100% / 2);}
	.img-list li:nth-child(3n + 1) > a:before{display: block;}
	.img-list li:nth-child(3n) > a:after{display: block;}
	.img-list li:nth-child(2n + 1) > a:before{display: none;}
	.img-list li:nth-child(2n) > a:after{display: none;}
	
	/* 컨텐츠 스타일 */
	.h4-tit01{margin-bottom: 10px; font-size: 23px;}
	.h5-tit01{margin-bottom: 10px; font-size: 20px;}
	.con-p{margin-bottom: 15px; font-size: 16px;}
	.bd-top{padding-top: 20px;}
	
	/* 접수중인 강좌 */
	.link-list li{width: 100%;}
	.link-list li a{padding: 8px 20px 8px 30px; font-size: 16px;}
	.link-list li a:after{width: 30px; height: 30px;}
	
	/* 중복로그인 안내 */
	.login-notice{padding: 10px 10px; font-size: 14px; border: 1px solid #d91717; border-radius: 5px; margin-top: 20px; text-align: center; }
	
	/* 예약변경안내 */
	.tabs2 .tab-menu .tab-btn{height: 50px; font-size: 17px;}
	
	/* 공공시설안내 */
	.org-thumb img{height: 300px;}
	
	
}

/***********************************************/
/* 화면 640px 이하 */
@media screen and (max-width: 640px) {
	.btn{width: 110px; height: 40px; line-height: 40px; font-size: 14px;}
	.btn.w-auto{min-width: 110px;}
	.select{padding: 0 21px 0 10px;}
	
	/* 테이블 */
	.tbl-wrap.type1 table td{padding: 8px;}
	
	/* 예약페이지 - 리스트 */
	.sch-box{padding: 20px  15px;}
	.sch-box .krds-form-select{height: 40px; font-size: 15px;}
	.sch-box .krds-input{width: calc(100% - 95px); height: 40px; font-size: 15px;}
	.sch-box .krds-btn{min-width: auto; width: 90px; height: 40px; font-size: 15px;}
	
	.board-top{flex-wrap: wrap;}
	.board-top .total{margin-bottom: 10px;}
	.board-top .right-box{width: 100%;}
	
	
	/* 예약페이지 - 이미지형 리스트페이지 */
	.img-board > li:nth-child(3n){margin-right: 0;}
	.img-board > li{width: 100%; margin-right: 0; margin-bottom: 20px;}
	
	/* 예약페이지 - 목록형 리스트페이지 */
	.list-board li{padding: 20px 15px;}
	.list-board .table-row > div{font-size: 15px; color: #444;}
	.list-board .table-row > div.service-name{font-size: 18px; font-weight: 600; color: #111;}
	.badge{font-size: 14px;}
	
	/* 로그인페이지 */
	.login-wrap{padding-top: 40px;}
	.login-wrap .title{margin-bottom: 20px;}
	.login-wrap .title p{font-size: 17px;}
	.login-wrap .title h3{font-size: 23px;}
	.login-wrap .tab li a{font-size: 16px;}
	.login-wrap .tab-cont{padding: 30px 20px;}
	.login-wrap .tab-cont .top-txt{margin-bottom: 15px; font-size: 17px;}
	
	.member .fieldset{gap: 20px;}
	.member .form-group{gap: 3px;}
	.member .form-group .form-tit{font-size: 15px;}
	.member .form-group .form-conts input{font-size: 15px;}
	.member .krds-form-check label{font-size: 15px !important;}
	.member .btn-login{height: 45px; font-size: 17px;}
	.member .link-group li{padding: 0 9px; font-size: 15px;}
	
	.non-member .certify li{width: 100%; gap: 10px; padding: 15px;}
	.non-member .certify li .img-wrap{padding-top: 10px;}
	.non-member .certify li h4{font-size: 18px;}
	.non-member .certify li .btn{height: 37px;}
	.non-member .certify li.sns .btn-wrap{display: block;}
	.non-member .certify li.sns .btn-wrap .btn-sns{height: 45px;}
	.non-member .certify li.sns .btn-wrap .naver{margin-bottom: 10px;}
	.non-member .certify li.sns .btn-wrap .btn-sns .icon{width: 30px; height: 30px; background-size: contain;}
	.non-member .certify li.sns .btn-wrap .btn-sns span{font-size: 17px;}
	
	/* 체육시설 뷰페이지 */
	.view-info{padding: 25px;}
	.view-info .info-box .top .place{font-size: 16px;}
	.view-info .info-box .top .tit p{padding-top: 2px; font-size: 22px;}
	.view-info .info-box .top .tit .bd-label{height: 22px; font-size: 14px;}
	.view-info .info-box .cont{padding: 0;}
	.view-info .info-box .cont li{margin-bottom: 10px; font-size: 15px;}
	.view-info .info-box .cont li .tit{width: 80px; padding-left: 0;}
	.view-info .info-box .cont li .tit:before{display: none;}
	.view-info .info-box .cont li p{width: calc(100% - 80px); padding-left: 15px;}
	.reserve-schedule{margin-top: 30px;}
	.calendar-head{flex-direction: column; align-items: center; gap: 8px;}
	.calendar-body{font-size: 15px;}
	.calendar-body .days li button{padding: 9px 0;}
	.time-wrap .cal-box .PC{display: none;}
	.time-wrap .cal-box .Mobile{display: block;}
	.time-wrap .cal-box .tit{font-size: 20px;}
	.time-wrap .cal-box .time-list li{width: 100%;}
	.time-wrap .cal-box .time-list li .time{padding: 7px 0;}
	.time-wrap .cal-box .krds-check-area{column-gap: 10px; row-gap: 0px;}
	.time-wrap .cal-box .krds-form-check input[type=checkbox] ~ label{font-size: 14px;}
	.time-wrap .cal-box .btn-wrap li{flex: 1;}
	.time-wrap .cal-box .btn-wrap li .btn{width: 100%;}
	
	.reserve-view .view-tab{margin-top: 40px;}
	.tabs .tab-menu .tab-btn{min-width: auto; padding: 10px 13px; font-size: 15px;}
	.tabs .tab-cont-wrap{padding: 20px;}
	.tabs .tab-cont h4{margin-bottom: 5px; font-size: 20px;}
	.tabs .tab-cont p{font-size: 15px;}
	
	/* 뷰페이지-팝업 */
	.notice-popup .box{padding: 80px 20px 20px 20px;}
	.notice-popup .box h4{font-size: 18px;}
	.notice-popup .box .cont{padding: 20px;}
	.notice-popup .navi{z-index: 1;}
	
	/* 예약하기 */
	.reserve-check .tit{font-size: 20px;}
	.reserve-check .tit p{font-size: 18px;}
	.bundle{margin-bottom: 40px;}
	.bundle .top{flex-direction: column; align-items: flex-start; margin-bottom: 20px;}
	.bundle .tbl-wrap.type1 table th, .bundle .tbl-wrap.type1 table td{font-size: 14px;}
	.bundle .krds-input{height: 40px; font-size: 14px;}
	.bundle .krds-btn{height: 40px; font-size: 14px;}
	.privacy-use{padding: 20px; padding-bottom: 60px;}
	.privacy-use .more{left: 20px; width: calc(100% - 40px);}
	.privacy-use .cont h4{font-size: 18px;}
	.privacy-use .krds-info-list > li{font-size: 14px;}
	.privacy-use .krds-info-list > li > .krds-info-list > li{font-size: 14px;}
	.privacy-use .more{font-size: 15px;}
	.bundle .krds-form-check input[type=radio] ~ label, .bundle .krds-form-check input[type=checkbox] ~ label{font-size: 15px;}
	.agree-box{justify-content: flex-start;}
	.reserve-btn .btn-wrap li{width: calc(50% - 2.5px);}
	.reserve-btn .info-txt{font-size: 14px;}
	
	/* 나의 예약현황 */
	.my-page .Tab{margin-bottom: 25px;}
	.my-page .Tab:before{bottom: 7px;}
	.my-page .Tab li{padding-bottom: 7px;}
	.my-page .Tab li a{height: 48px; line-height: 48px; font-size: 15px;}
	.my-page .Tab li.active:before{border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #f60000;}
	.my-page .top-box{padding: 25px;}
	.my-page .top-box h4{margin-bottom: 10px; font-size: 18px;}
	.my-page .top-box .list li{font-size: 15px;}
	.my-page .tabs .tab-list{flex-wrap: wrap; gap: 5px; margin-bottom: 15px;}
	.my-page .tabs .tab-list button{width: auto; padding: 0 15px; line-height: 32px; font-size: 14px;}
	.my-page .board-top{margin-bottom: 0;}
	.list-board2 .table-row{padding: 25px;}
	.list-board2 .table-row > div.service-name{font-size: 17px;}
	.list-board2 .table-row > div::before{width: 60px;}
	
	/* 커뮤니티 */
	.sch-box2{padding: 20px 15px;}
	.sch-box2 .form-conts{gap: 5px; justify-content: space-between;}
	.sch-box2 .krds-input{width: calc(100% - 95px); height: 40px; font-size: 15px;}
	.sch-box2 .date .krds-input{padding: 0 10px; font-size: 15px;}
	.sch-box2 .date .btn-calendar{right: 8px;}
	.sch-box2 .krds-form-select{width: 100%; max-width: none; height: 40px; padding: 0 10px; font-size: 15px;}
	.sch-box2 .sch-btn{min-width: auto; width: 90px; height: 40px; font-size: 15px;}
	.board_wrap .board-top{margin-bottom: 0;}
	.board_table tbody tr{padding-left: 10px;}
	.board_area.type1 .board_table tbody td{font-size: 15px; color: #888;}
	.board_area.type1 .board_table tbody td.num{display: none;}
	.board_area.type1 .board_table tbody td.subject a{font-weight: 500; font-size: 17px; color: #000;}
	
	/* 컨텐츠 스타일 */
	.h5-tit01{font-size: 19px;}
	.con-p{font-size: 15px;}
	.con-p2{font-size: 15px;}
	.box{padding: 17px 25px;}
	.Btn{font-size: 14px;}
	.check-list>li{line-height: 1.6em; font-size: 15px;}
	.check-list>li:before{top: 5px; width: 12px; height: 11px;}
	.dot-list>li{padding-left: 20px; line-height: 1.6em; font-size: 15px;}
	.dot-list>li:before{top: 8px;}
	.num-list>li{line-height: 1.6em; font-size: 15px;}
	
	/* 접수중인 강좌 */
	.link-list li a{padding: 8px 10px 8px 20px; font-size: 15px;}
	.img-link-list li:nth-child(3n){margin-right: 0;}
	.img-link-list li{width: 100%; margin-right: 0;}
	
	/* 예약변경안내 */
	.tabs2 .tab-menu{flex-wrap: wrap;}
	.tabs2 .tab-menu .tab-btn{width: 50%; flex: auto; height: 45px; font-size: 16px;}
	.tabs2 .tab-menu .tab-btn.active:before{display: none;}
	.tabs2 .tab-menu .tab-btn{border-bottom: 1px solid #b8c2c9;}
	
	.procedure li{width: calc((100% / 2) - (40px / 2)); margin-right: 20px;}
	.procedure.item-5 li{width: calc((100% / 2) - (40px / 2)); margin-right: 20px;}
	.procedure li.next:after{right: -20px; width: 17px; height: 13px;}
	.procedure li p{font-size: 14px;}
	
	/* 결제하기-감면할인 */
	.radio-box .krds-form-check label .krds-badge{font-size: 14px;}
	.dot{font-size: 15px;}
	.payment .item-list{padding: 30px;}
	.payment .item-list li{padding: 0;}
	.payment .item-list li.final{font-size: 20px;}
	.payment .btn-wrap li .btn{font-size: 16px; height: 45px;}
	
	/* 사이트맵 */
	.sitemap .area .site_list li{width: calc(100% / 2); padding: 0 6px; margin-bottom: 12px;}
	.sitemap .area .tit{font-size: 20px;}
	.sitemap .area .tit:before{width: 45%;}
	
	
}
/***********************************************/
/* 화면 460px 이하 */
@media screen and (max-width: 460px) {
	/* 예약페이지 - 리스트 */
	.board-top .right-box .different{padding: 8px 5px; font-size: 14px;}
    .board-top .right-box select{width: 100px; height: 38px; font-size: 14px; padding-left: 10px; padding-right: 20px;}
    .board-top .right-box .btn-bd{height: 38px; padding: 0 10px;}
    
    /* 울산의 스포츠 둘러보기 */
	.img-list li{width: 100%; border-bottom: 1px solid #000;}
	.img-list li:nth-child(2n + 1) > a:before{display: block;}
	.img-list li:nth-child(2n) > a:after{display: block;}
	.img-list li:after {content: ''; width: 40px; height: 40px; background-color: #fff; display: block; position: absolute; left: auto; right: -20px; bottom: 185px; z-index: 1;}
	
	
}