@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* common */
.sub h1{}
.sub h2{margin-bottom:30px; text-align:center; font-size:32px; color:#111;}
.sub h3{}
.sub h4{}
.sub h5{}
.sub h6{}

div[class^="area_"] p
section[class^="area_"] p,
article[class^="area_"] p,
div[class^="area_"] li,
article[class^="area_"] li{line-height:1.7; }

#content .mob_info{padding:5px 0; background:#f1f1f1; font-weight:600; font-size:13px; color:#444;}

.box{overflow: hidden; margin-top:60px;}

/* board */
ul.bbsList{border-top-color:#152f53;}
ul.bbsList li .more.active,
ul.bbsList li .more:hover,
ul.bbsList li .more:focus{border-color:#152f53;}
ul.bbsList li .more em,
ul.bbsList li .subject:hover,
ul.bbsList li .subject:focus{color:#152f53;}
ul.bbsList li .notice{background:#152f53;}

.pagination span{color:#152f53; border-color:#152f53;}
.pagination a:not([class^="btn_"]):hover,
.pagination a:not([class^="btn_"]):focus{background:#f9f1f2; border-color:#f9f1f2;}

.faqList dt.on:before{background:#152f53;}

.bbsTitle_cont > i{color:#c6a582; border-bottom-color:#c6a582;}

.inr_pagination > a:hover > em{color: #c6a582;}

#content.sub {padding:100px 0;}
.sub_title{}
h3.sub_tit_point{position:relative; margin-bottom:16px; padding-left:20px; font-weight:500; font-size:25px; color:#222; text-align:left; letter-spacing:-0.05rem;}
h3.sub_tit_point::before,
h3.sub_tit_point::after{content:""; display:inline-block; position:absolute; width: 9px; height:15px;}
h3.sub_tit_point::before{top: 7px; left:0; background:#b7030c;height: 11px;}
h3.sub_tit_point::after{position:absolute; top: 18px; left:0; height: 11px; background:#181878;}

.list02 > li{position:relative; line-height:1.7; padding-left:13px; margin-bottom:7px;}
.list02 > li:before{content:""; position:absolute; left:0; top:12px; width:5px; height:1px; margin-right:5px; background:#555;}
.list01 > li{overflow: hidden; position:relative; line-height:1.7; padding-left:13px; margin-bottom:7px; text-align: left;}
.list01 > li:before{content:""; position:absolute; left:0; top:11px; width:4px; height:4px; margin-right:5px; background:#777; border-radius:50%;}
.list01 > li:last-child{margin-bottom:0}

.dot{overflow: hidden; position:relative; line-height:1.7; padding-left:13px; text-align: left;}
.dot:before{content:""; position:absolute; left:0; top:11px; width:4px; height:4px; margin-right:5px; background:#777; border-radius:50%;}

/* page navigation */
.area_navigation{margin-bottom:20px; text-align:center;}
.area_navigation ul{display:inline-block; overflow:hidden;}
.area_navigation ul li{position:relative; float:left; line-height:1; padding:0 12px; font-size:15px; color:#fff;}
.area_navigation ul li img{display:inline-block; position:relative; top:1px; height:12px; vertical-align:top;}
.area_navigation ul li i{display:none;}
.area_navigation ul li:nth-child(2):after{content:""; position:absolute; top:3px; right:-3px; width:6px; height:8px; background:url(../images/content/icon_navigation02.svg) no-repeat 50% 50%;}
.area_navigation ul li:first-child:after{content:""; position:absolute; top:3px; right:-3px; width:6px; height:8px; background:url(../images/content/icon_navigation02.svg) no-repeat 50% 50%;}

/* lnb */
.lnb { position:absolute; left:0; right:0; bottom:-35px; z-index:2; }
.lnb ul {display:flex;width:1200px; height:100%; margin:0 auto; background:#fff; border:1px solid #ddd;}
.lnb ul li {flex:1;}
.lnb ul li  + li { border-left:solid 1px #ddd; }
.lnb a { position:relative; display:block; height:70px; text-align:center; font-size:16px; color:#555; font-weight:500; line-height:70px; }
.lnb a.on{background:#b7030c; color:#fff;}

/* sub visual */
.area_subVisual{position:relative; height:400px; background-size:cover; background-repeat:no-repeat; background-position:50% 50%; text-align:center;}
.area_subVisual > .wrap{position:relative; top:50%; transform:translateY(-50%);}
.area_subVisual > .wrap h2{font-size:35px; color:#fff;}

/* map default */
.area_map .map_style{padding:0; border:none; border-bottom:1px solid #ccc;}
.area_map .map_style .wrap_controllers{display:none;}

/* 이용약관 */
.area_policy{padding-top:0;}
.area_policy h2{padding:30px 0;font-size:40px;color:#222;text-align:center;font-weight: 700;}
.area_policy h3{margin-bottom:20px;font-weight: 700;font-size:17px;color:#222;}
.area_policy ul li,
.area_policy p{line-height:1.6; font-weight:300; font-size:15px; color:#666;}
.area_policy p{line-height:1.6; font-size:14px;}
.area_policy ul li{margin-bottom:8px;}
.area_policy ul li:last-child{margin:0;}
.area_policy ul li ul{margin-top:5px; margin-bottom:20px;}
.area_policy ul li ul li{margin-bottom:2px; font-size:15px;}
.area_policy .inr_policy{padding:40px 0; border-bottom:1px solid #ddd;}
.area_policy .inr_policy:last-child{border:none;}

/* 코트소개 */
.area_court > div{display:flex;  align-items: center; justify-content: space-between;}
.area_court > div > div{box-sizing:border-box; width:50%;}
.area_court > div > div img{width:100%}
.area_court .box02{flex-direction: row-reverse; margin-top:80px;}
.area_court > div > .text{padding:40px;}
.area_court .box01 > .text{padding-left:0;}
.area_court > div > .text h3{margin-bottom:15px; font-size:25px; font-weight:400; color:#111;}
.area_court > div > .text p{line-height:1.8; color:#555}

/* 편의시설 */
.area_amenities{}
/* .area_amenities .list_img{display:flex; justify-content: space-between; } */
/* .area_amenities .list_img li{width:31.5%;} */
/* .area_amenities .list_img2{display:flex; justify-content: space-between; } */
/* .area_amenities .list_img2 li{width:48%;} */
.area_amenities .list_img{ display: grid; gap: 12px; }
.area_amenities img{ display: block; width:100%;}
.area_amenities .list01{margin-bottom:20px;}
@media(min-width:768px){
	.area_amenities .list_img{ grid-template-columns: repeat(6, 1fr); }
	.area_amenities li{ grid-column-end: span 2; }
	.area_amenities .list_img2 li{ grid-column-end: span 3; }
}
/* @media screen and (max-width:490px){
	.area_amenities .list_img{flex-direction: column;}
	.area_amenities .list_img li{width:100%; margin-bottom:10px;}
} */

/* 오시는 길 */
.area_location{overflow:hidden;}
.area_location .map_wrap{float:left; width:65%;}
.area_location .text_wrap{float:left; width:35%;}
.area_location .text_wrap .top{box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; height:210px;  text-align:center; background: #f6f6f6;}
.area_location .text_wrap .top h3{font-size:18px;}
.area_location .text_wrap .top a{color:#b7030c; font-size:35px; font-weight:600;}
.area_location .text_wrap .bottom{box-sizing:border-box; overflow: hidden; padding:45px; background:#fff;}
.area_location .text_wrap .bottom .list_text li{overflow: hidden; clear:both; margin-bottom:20px;}
.area_location .text_wrap .bottom .list_text li b{display:block; float:left; width:115px; color:#111}
.area_location .text_wrap .bottom .list_text li span{float:left;}
.area_location .text_wrap .bottom .list_text li .point{color:#a60c14; font-weight:600}

.area_location .text_wrap .bottom .list_btn{overflow:hidden; border:1px solid #ddd;}
.area_location .text_wrap .bottom .list_btn li{position:relative; box-sizing:border-box; float:left; width:50%; padding:14px 20px;}
.area_location .text_wrap .bottom .list_btn li:first-child{border-right:1px solid #ddd;}
.area_location .text_wrap .bottom .list_btn li a{display:block; width:100%; height:100%;color:#111; transition:0.3s}
.area_location .text_wrap .bottom .list_btn li a:hover{color:#b7030c; transition:0.3s}

.area_location .text_wrap .bottom .list_btn li:before,
.area_location .text_wrap .bottom .list_btn li:after{content:''; display:block; position:absolute; width:6px; height:1px; background:#666; transition:all 0.3s ease 0s;}
.area_location .text_wrap .bottom .list_btn li:before{top:24px; right:20px; transform:rotate(45deg);}
.area_location .text_wrap .bottom .list_btn li:after{top:28px; right:20px; transform:rotate(-45deg);} 
.area_location .root_daum_roughmap .wrap_controllers{display:none;}

/* 테니스장 운영현황 */
.area_status .cont{position:relative; margin-bottom:60px;}

.area_fare .box{}
.point_box{margin-top:30px; padding:30px; border:1px solid #ddd; text-align:center;}
.point_box b{display:block; margin-bottom:7px;  font-size:18px;}
.point_box p i{color:#b7030c; font-weight:500}

.area_refund .point_box{margin-bottom:40px;}
.area_refund .point_box p{font-size:18px;}

.text_wrap{overflow:hidden;}
.text_wrap .sub_tit_bar {position:relative; float:left; width:200px; padding-left:22px; font-size:20px; font-weight:400; color:#333;}
.text_wrap .sub_tit_bar:before {content:''; display:block; position:absolute; top:12px; left:3px; width:9px; height:1px; background-color:#666; }
.text_wrap .con {float:left; width:100%; width:-webkit-calc(100% - 222px); width:-moz-calc(100% - 222px); width:calc(100% - 222px); margin-bottom:35px;}
.text_wrap .list01 {display:block;}
.text_wrap .list01 li i{color:#b7030c}
.text_wrap .list01 a{text-decoration:underline}

.txt_gray{color:#666}

/* 코트예약 */
.area_application ol{display:flex; justify-content: center; overflow:hidden; position:relative; padding: 10px; margin-bottom: 40px;}
.area_application ol li{ position:relative; width:255px; height:60px; line-height:60px; margin-right:40px; padding-left:20px; background-color:#ededed; font-size:18px; font-weight:500; text-align:center; border-radius:30px; color:#686868;}
.area_application ol li:last-child{margin-right:0;}
.area_application ol li span{position:absolute; top:0; left:-3px; width:58px; height:58px; line-height:58px; font-size:22px; text-align:center; border:1px solid #999; border-radius:50%; background-color:#fff; color:#999;}
.area_application ol li.on{background:#cb1919;color:#fff;}
.area_application ol li.on span{border:1px solid #cb1919; color:#cb1919}

.area_application .title{border-bottom:1px solid #cdcdcd; padding:15px;  text-align:center;}
.area_application .title h3{font-size:22px; color:#111;}
.area_application .cont{padding:30px; background:#f8f8f8}
.area_application .cont.white{background:#fff}
.week {margin: 10px auto 20px auto;text-align: center;font-weight: bold; color: #111; font-size: 20px;}

.area_application .area_calendar .calendar table td button{display:block; width:100%; background:#fff; padding:6px; margin-top:7px; border-radius:5px;}
button.label1{border:1px solid #cb1919; color:#cb1919}
button.label2{border:1px solid #181878; color:#181878}
button.label3{border:1px solid #aaa; color:#aaa}

.area_application .cont_box{border:1px solid #cdcdcd; margin-top:60px;}
.area_application .cont_box:nth-of-type(1){margin-top:0}

.area_application .court_wrap{position:relative;}
.area_application .court_wrap img{display:block; max-width:100%; margin:0 auto;}
.area_application .court_wrap .court_list{position:absolute; top:0; left:0}
.court_wrap ul li{position:absolute; width:200px; height: 60px;}
.court_wrap ul li :where(a, button){display:block; width:100%; height:100%; background: 0; }
.court_wrap ul li :where(b, .number){position:absolute;  display:flex; align-items: center; justify-content: center;  left:-15px; top:50%;width:30px; height:30px; margin-top:-14px; background:#fff; color:#333; border-radius:50%;}
.court_wrap ul li i{opacity:1; position:absolute; left:30px; top:14px; background:#fff; padding:3px 10px; color:#111; font-size:13px; font-weight:bold; transition:0.5s}
.court_wrap ul li i:before{content: ''; display: block; position: absolute;top: 10px;left: -9px;border-top: 5px solid transparent;border-right: 10px solid #fff;border-bottom: 5px solid transparent;}
.court_wrap ul li :where(a, button):hover i{opacity:1; transition:0.5s}
.court_wrap ul li :where(a, button).active{border:3px solid #cb1919}
.court_wrap ul li :where(a, button).active b{background:#cb1919; color:#fff;}

.court_wrap .court1{top: 189px; left: 110px;}
.court_wrap .court2{top: 185px; left: 476px;}
.court_wrap .court3{top: 196px; left: 825px;}
.court_wrap .court4{top: 307px; left: 110px;}
.court_wrap .court5{top: 306px; left: 476px;}
.court_wrap .court6{top: 307px; left: 825px;}
.court_wrap .court7{top: 435px; left: 110px;}
.court_wrap .court8{top: 433px; left: 476px;}
.court_wrap .court9{top: 422px; left: 825px;}

.court-group{ position: relative;
	.img{ display: block; width: 100%; height: auto; }
	.li{ position: absolute; translate: -50% -50%; }
	.li1{ top: 69%; left: 68%; }
	.li2{ top: 72%; left: 58%; }
	.li3{ top: 69%; left: 41%; }
	.li4{ top: 52%; left: 48%; }
	.li5{ top: 54%; left: 38%; }
	.li6{ top: 58%; left: 27%; }
	.li6{ top: 58%; left: 27%; }
	.li7{ top: 38%; left: 44%; }
	.li8{ top: 39%; left: 35%; }
	.li9{ top: 44%; left: 27%; }
	.li12{ top: 49%; left: 68%; }
	.btn{ display: inline-block; background: 0; font-size: clamp(13px, 0.83333333vw, 16px); line-height: 1; }
	button.btn{ cursor: pointer; }
	.number{ display: grid; place-items: center; width: clamp(25px, 1.5625vw, 30px); aspect-ratio: 1; background: #fff; border-radius: 50%; color: #333; }
	.btn.active .number{ background: #cb1919; color: #fff; }
	.li12 .number{ font-size: .75em; }
	@media(min-width:768px){
		.btn{ padding: clamp(10px, 0.52083333vw, 20px); }
	}
}

.cont_box.time{text-align:center;}
ul.time_list{display: inline-block;}
ul.time_list li{margin-bottom:7px; font-size:16px;text-align: left;}
ul.time_list li label{width:110px; margin-left:7px; font-family:Noto Sans KR; font-weight:500}
ul.time_list li span{display:inline-block; padding:5px 10px; font-size:14px;}
ul.time_list li span.value1{background:#aaa; color:#fff;}
ul.time_list li span.value2{background:#cb1919; color:#fff; }
ul.time_list li input[type=checkbox]{width:16px; height:16px}

.sum i{font-weight:bold; font-size:20px; color:#cb1919}

#content .area_application table.table thead th{background:#111; color:#fff;}

.pay_text {margin-top:10px; background: #fff; border: 1px solid #ebebeb; padding: 20px;}
.pay_text p{margin-bottom:7px; font-weight:bold; color:#111}
.pay_text h4{font-weight:500; color:#111;}
.pay_text h4 i{padding-left:10px; color:#555}
.agree_wrap{margin-top:20px;}

/* 안내 */
.area_reservation_guide .reservation_tab{ position: sticky; top: 0; z-index: 5; background: #fff; }
.area_reservation_guide .tab.fixed{z-index: 2; position:fixed; top:0; box-sizing:border-box; width:1200px;}
.area_reservation_guide .tab .inr{background:#fff;}

.area_reservation_guide .tab{display:flex; justify-content: center; overflow:hidden; position:relative; padding: 10px; margin-bottom: 40px; background:#fff;}
.area_reservation_guide .tab:before{content:''; position:absolute; top:50%; width:50%; height:1px; background-image:linear-gradient(to right, #fff, #adadad);background-position:bottom; background-size:6px 4px;	background-repeat:repeat-x; z-index: 1;}
.area_reservation_guide .tab li{ position:relative; width:200px; margin:0 20px; background:#fff; font-size:18px; font-weight:500; text-align:center; color:#686868;z-index: 1;}
.area_reservation_guide .tab li:last-child{}
.area_reservation_guide .tab li span{display:inline-block; width:80px; height:66px; transition:0.3s}
.area_reservation_guide .tab li a span.icon01{background:url(../../images/content/icon_step01.svg) no-repeat 50%; }
.area_reservation_guide .tab li a span.icon02{background:url(../../images/content/icon_step02.svg) no-repeat 50%; }
.area_reservation_guide .tab li a span.icon03{background:url(../../images/content/icon_step03.svg) no-repeat 50%; }
.area_reservation_guide .tab li a span.icon04{background:url(../../images/content/icon_step04.svg) no-repeat 50%; }

.area_reservation_guide .tab li a.active span.icon01{background:url(../../images/content/icon_step01_on.svg) no-repeat 50%; }
.area_reservation_guide .tab li a.active span.icon02{background:url(../../images/content/icon_step02_on.svg) no-repeat 50%; }
.area_reservation_guide .tab li a.active span.icon03{background:url(../../images/content/icon_step03_on.svg) no-repeat 50%; }
.area_reservation_guide .tab li a.active span.icon04{background:url(../../images/content/icon_step04_on.svg) no-repeat 50%; }

.area_reservation_guide .tab li a.active{color:#cb1919;}
.area_reservation_guide .tab li a{display:block; width:100%; height:100%; }
.area_reservation_guide img{width:100%;}
.area_reservation_guide .guide_wrap .text{margin-bottom:30px;}
.area_reservation_guide .guide_wrap .text h3{display: flex; align-items: center; margin-bottom:14px; font-size:22px; color:#111}
.area_reservation_guide .guide_wrap .text b{display:inline-block; margin-right:10px; padding:5px 15px; background:#111; border-radius:15px; color:#fff; font-size:14px;}

@media screen and (max-width:1919px){
 
}

@media screen and (max-width:1679px){

}

@media screen and (max-width:1535px){

}

@media screen and (max-width:1365px){
	
}

@media screen and (max-width:1279px){
	.lnb ul{width:98%;}

	.area_location .text_wrap .bottom{padding:35px;}

	.area_reservation_guide .tab.fixed{width:100%;}
}

@media screen and (max-width:1023px){
	.area_court > div > .text h3{font-size:20px;}

	.area_location .map_wrap{width:60%;}
	.area_location .text_wrap{width:40%;}
	.area_location .text_wrap .top a{font-size:30px;}

}

@media all and (max-width:767px){
	#content.sub{padding:50px 0}
	.sub h2{margin-bottom:15px; font-size:20px;}
	h3.sub_tit_point{padding-left:15px; margin-bottom:7px; font-size:18px; font-weight:600}
	h3.sub_tit_point::before{height:7px;  width:6px;}
	h3.sub_tit_point::after{top:14px; height:7px; width:6px;}
	.box{margin-top:40px;}
	
	.list01 > li:before{top:9px;}
	.list01 > li{margin-bottom:3px;}
	
	.lnb{overflow-x:auto; overflow-y:hidden; width:100%; margin-top:0;}
	.lnb > div{margin:0; padding:0; overflow-x:scroll; overflow-y:hidden;}
	.lnb ul{display:table; margin:0 auto; margin-top:0;}
	.lnb ul li{display:table-cell; white-space:nowrap; float:none;}
	.lnb a{line-height:50px; height:50px; padding:0 5px; font-size:14px;}
	
	.area_navigation ul li{font-size:13px;}

	.area_subVisual{height:200px;}
	.area_subVisual > .wrap h2{font-size:20px;}
	
	.area_policy{margin-top:20px !important;}
	.area_policy h2{padding:0px 0; font-weight:600; font-size:20px;}
	.area_policy h3{margin-bottom:10px; font-weight:600; font-size:14px;}
	.area_policy ul li{margin-bottom:5px;}
	.area_policy ul li ul{padding-left:10px;}
	.area_policy ul li ul li{font-size:13px;}
	.area_policy ul li,
	.area_policy p{line-height:1.7; font-size:13px;}
	.area_policy .inr_policy{padding:25px 0;}
	.area_court .box02,
	.area_court > div{flex-direction: column;}
	.area_court > div > .text{padding:0; margin-bottom:20px;}
	.area_court > div > .text h3{font-size:16px; font-weight:600}
	.area_court > div > .text p br{display:none;}
	.area_court > div > div{width:100%;}
	.area_court .box02{margin-top:40px;}
	
	.area_location .map_wrap{overflow:hidden; width:100%; height:400px;}
	.area_location .text_wrap{display:flex; width:100%;}
	.area_location .text_wrap > div{width:50%}
	.area_location .text_wrap .bottom{border-bottom:1px solid #eee;}
	.area_location .text_wrap .top{height:auto;}
	.area_location .text_wrap .top h3{font-size:14px; font-weight:bold;}
	.area_location .text_wrap .top a{font-size:20px;}
	
	.area_application .cont_box{margin-top:30px;}
	.area_application ol{padding:0; padding-top:20px; }
	.area_application ol li{line-height:45px; width:30%; height:45px; padding-left:0; margin-right:15px; font-size:14px; border-radius:0}
	.area_application ol li span{left:50%; top:-20px;  line-height: 30px; width: 30px; height: 30px; margin-left:-15px; font-size:13px;}
	
	.area_application .title{padding:10px;}
	.area_application .title h3{font-size:16px;}
	.area_application .cont{padding:10px;}
	.area_application .area_calendar .calendar table td button{padding:2px; font-size:12px;}
	.area_calendar.type02 .calendar table td > div{padding:28px 5px 5px}

	
	.week{font-size:16px;}
	ul.time_list li{font-size:14px;}
	ul.time_list li label{width:90px;}
	ul.time_list li span{font-size:12px}
	
	#content table.table td,
	#content table.table thead th{font-size:13px}
	#content table.table th, #content table.table td{word-break: break-all; padding:10px 5px;}
	.sum i{font-size:18px;}

	.pay_text{padding:10px;}
	.pay_text h4{font-size:14px;}

	.area_reservation_guide .tab li{width:25%; margin:0 10px;}
	.area_reservation_guide .tab li span{width:50px; height:40px;}
	.area_reservation_guide .guide_wrap .text h3{font-size:17px;}
	.area_reservation_guide .guide_wrap .text b{font-size:12px;}

	.area_status .cont{margin-bottom:30px;}
	.area_refund .point_box{padding:15px;}
	.area_refund .point_box p{font-weight:bold; font-size:15px;}
	.text_wrap .sub_tit_bar{overflow: hidden; float:none; width:100%; font-size:17px; font-weight:bold; margin-bottom:14px;}

	.text_wrap .con{width:100%;}
	
	.court_wrap ul li :where(a, button).active{border:5px solid #cb1919}
	.court_wrap ul li i{opacity:1; display:block; left:48px; top:14px; font-size:20px;}
	.court_wrap ul li :where(b, .number){width:50px; height:50px; margin-top:-22px; font-size:20px;}
}

@media screen and (max-width:600px){

	.area_visual .list li, .area_visual .bx-viewport{height:400px;}
	.area_visual .list li .text span{display:none;}
	.area_location .text_wrap{flex-direction: column;}
	.area_location .text_wrap > div{width:100%;}
	.area_location .text_wrap .top{padding:20px 10px;}
	.area_location .text_wrap .bottom{padding:15px; border-bottom:0}
}

@media all and (max-width:360px){
	body,
	p,
	li,
	a{font-size:13px;}
}

@media all and (max-width:359px){

}