@charset "utf-8";
:where(.ic_soccer, .ic_badminton, .ic_dodgeball, .ic_gateball, .ic_taekwondo, .ic_tennis, .ic_gymnastic, .ic_bowling, .ic_baseball, .ic_basketball, .ic_unicycle, .ic_golf, .ic_tabletennis, .ic_groundgolf, .ic_esports, .ic_billiard, .ic_walk, .ic_rope, .ic_parkgolf):before{display: block; content: ''; background-repeat: no-repeat; background-size:cover; width: 3.2rem; height: 3.2rem;}
.ic_soccer:before{background-image: url(/img/sub/ic_soccer.png) }
.ic_badminton:before{background-image: url(/img/sub/ic_badminton.png) }
.ic_dodgeball:before{background-image: url(/img/sub/ic_dodgeball.png) }
.ic_gateball:before{background-image: url(/img/sub/ic_gateball.png) }
.ic_taekwondo:before{background-image: url(/img/sub/ic_taekwondo.png) }
.ic_tennis:before{background-image: url(/img/sub/ic_tennis.png) }
.ic_gymnastic:before{background-image: url(/img/sub/ic_gymnastic.png) }
.ic_bowling:before{background-image: url(/img/sub/ic_bowling.png) }
.ic_baseball:before{background-image: url(/img/sub/ic_baseball.png) }
.ic_basketball:before{background-image: url(/img/sub/ic_basketball.png) }
.ic_unicycle:before{background-image: url(/img/sub/ic_unicycle.png) }
.ic_golf:before{background-image: url(/img/sub/ic_golf.png) }
.ic_tabletennis:before{background-image: url(/img/sub/ic_tabletennis.png) }
.ic_groundgolf:before{background-image: url(/img/sub/ic_groundgolf.png) }
.ic_esports:before{background-image: url(/img/sub/ic_esports.png);  }
.ic_billiard:before{background-image: url(/img/sub/ic_billiard.png);  }
.ic_walk:before{background-image: url(/img/sub/ic_walk.png);  }
.ic_rope:before{background-image: url(/img/sub/ic_rope.png);  }
.ic_parkgolf:before{background-image: url(/img/sub/ic_parkgolf.png);  }


/*  지도 */
.map{position: relative; height: 30rem; overflow:hidden; background: #f0f0f0;}
.map_info{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 3rem;}
.map_info>li{flex:0 0 20%; --bgSize:50px}
.map_info>li p.tit{color: var(--color_sub01); font-size: 1.7rem;}
.map_info>li p.tit:before{display: inline-block; content: ''; vertical-align: middle; margin-bottom: 1rem; margin-right: .5rem; margin-top: -.3rem; width: var(--bgSize); height: var(--bgSize); background: url(/img/sub/map_ic.png) no-repeat left top / cover}
.map_info>li p.ic_address:before{background-position-x: 0px}
.map_info>li p.ic_mail:before{background-position-x: calc(0px - var(--bgSize))}
.map_info>li p.ic_tel:before{background-position-x: calc(0px - var(--bgSize)*2)}
.map_info>li p.ic_fax:before{background-position-x: calc(0px - var(--bgSize)*3); }
/* 인사말 */
.greeting{display: flex; gap:6%; padding:0px 1vw}
.greeting .conL{flex-basis:47%; min-width: 100px; max-width:185px}
.greeting .conL .name{text-align: right; font-size: 1.4rem; font-weight: 400;}
.greeting .conL .name span{display: block; font-size: 1.5rem; font-weight: bold;}
.greeting .conR .txt1 img{width:527px}
.greeting .conR .txt2{margin:1rem 0px 3rem; font-size: 2rem;}
.greeting .conR .txt3{margin-top: 1.5rem; margin-left: .2rem; font-size: 1.6rem; font-weight: 300; line-height: 1.6;}
/* 연혁 */
.history dl{display: flex; gap:5%; justify-content: flex-end; position: relative; padding: 2rem 0px 1rem; border-bottom:1px dashed #ddd}
.history dl dt{position: relative; text-align: center; width: 9rem; font-size: 3rem; font-weight: 300;}
.history dl dt:after{display: block; content:''; position: absolute; top: 2.5rem; margin-top: -8px; right: -30%; width: 12px; height: 10px; background: url(/img/sub/history_arr.svg) no-repeat center center;}
.history dl dd{padding:.7rem 0px 1.2rem; flex-basis: calc(45% - 4.5rem)}
.history dl:nth-child(2n){justify-content: flex-start}
.history dl:nth-child(2n) dt{order:1; }
.history dl:nth-child(2n) dt:after{right: 120%; transform: rotate(-180deg)}
.history dl:nth-child(2n) dd{text-align: right;}
.history dl dd ul li{padding: .5rem 0px;}
.history dl dd ul li .date{display: inline-block; margin-right: 2rem; color: var(--color_sub01); font-weight: bold;}
.history dl:first-child:before,
.history dl:last-child:after{position: absolute; bottom: -3.5rem; font-weight: bold; color: #aaa; opacity: .1; letter-spacing: -1px;}
.history dl:first-child:before{content: 'HISTORY'; font-size: 8.2rem; left: 0px;}
.history dl:last-child:after{content: 'IDGSPORTS'; font-size: 4rem; bottom: -1.7rem; right: 0px; text-align: center; width: calc(45% - 4.5rem)}
.history dl:nth-child(2n-1):last-child:after{right: auto; left: 0px;}
/* 조직도 */
.organize{display: flex; flex-wrap:Wrap; justify-content: space-between; gap:2rem}
.organize>div{position: relative; flex:0 1 25%; order:3; }
.organize>div.part1:AFter,
.organize :where(.part2, .part3) dl:nth-child(2):AFter{display: block; content: ''; position: absolute; left: calc(50% - 1px); top: 0px; bottom: -4rem; width: 1px; background: #000; z-index: -1; opacity: .1;}
.organize :where(.part2, .part3) dl:nth-child(2):AFter{top: -3rem; bottom: -3rem;}
.organize .part1{flex-basis:18%; order:2}
.organize .part1>div{display: flex; flex-direction: column; margin-bottom:8rem; border:1px solid var(--color_sub01); color: var(--color_sub01); background: #fff;}
.organize .part1>div>p{text-align: center}
.organize .part1>div p.pos{margin: -1px; padding: 8% 5% 7%; background: var(--color_sub01); color: #fff;}
.organize .part1>div p.name{flex-grow: 1; padding: 10% 5% 9%}
.organize .part1>div.org2{border: 0px; justify-content: center}
.organize .part1>div.org2>p.pos{display: flex; align-items:center; justify-content: center; margin: auto; width: 10rem; height: 10rem; border-radius:20rem; background: var(--color);}
.organize .part1>div.org3{border-color:#ddd; color: #333;}
.organize .part1>div.org3>p.pos{background: #eee; color: #333;}
.organize .part2{order: 1;}
.organize :where(.part2, .part3) dl{position: relative; display: flex; flex-direction: column; margin-top: 2rem; border:1px solid #eee; background: #fff;}
.organize :where(.part2) dl{margin-top: 1.5rem;}
.organize :where(.part2, .part3) dl dt{text-align: center; padding: 1rem; background-color:#f5f5f5; color: #222; font-size: 1.025em;}
.organize :where(.part2, .part3) dl dd{text-align: center; flex-grow: 1; padding: 2rem 3rem; }
.organize :where(.part2) dl dd{padding: 1rem 3rem; }
.organize :where(.part2, .part3) dl dd ul{text-align: left;}
.organize :where(.part2, .part3) dl dd ul li{margin:5px 0px; font-size: 1.4rem; font-weight: 300; letter-spacing: .5px;}
.organize .stit{padding:5px 0px 10px; color: #222; font-weight: 500; border-bottom:1px dashed #ddd}
.organize .stit+ul{margin-top: 5px;}
.organize .stit+ul li{margin:0px 0px}
.organize ul+.stit{margin-top: 15px; }
.organize .part2 ul{text-align: center;}
.organize .part2 ul li{padding: 3px 0px;}
.organize .part4{flex:0 0 100%;}
.organize .part4 dl{margin-top: 2rem; display: flex; border:1px solid #eee; }
.organize .part4 dl dt{flex:0 0 13rem; text-align: center; padding-top: 3rem; background-color:#f5f5f5; color: #222; font-size: 1.025em;}
.organize .part4 dl dd {flex-grow: 1; padding: 3rem; }
.organize .part4 dl dd ul .img{display: none;}
.organize .part4 dl dd ul{display: flex; flex-wrap: wrap; gap:5px 2.5rem}
.organize .part4 dl dd ul li .name{min-width: 4rem; font-size: 1.4rem; font-weight: 300;}
.organize_executive{display: flex; gap:2rem 2%; justify-content: center; margin-top: 3rem;}
.organize_executive dl{flex:0 1 38%; border:1px solid #eee; }
.organize_executive dl dt{text-align: center; margin: -1px; padding: 1.4rem 2rem 1.2rem; border:1px solid #888; background-color:#f5f5f5; color: #222; font-size: 1.025em;}
.organize_executive dl dd {padding: 3rem 2rem 2rem; border-top:0px}
.organize_executive dl dd ul{display: flex; flex-wrap: wrap; justify-content:center; gap:3.5rem 1rem}
.organize_executive dl dd ul li p.img{overflow:hidden; width: 9.5rem; height: 9.5rem; border-radius:10rem;}
.organize_executive dl dd ul li p.img img{width: 100%; height: 100%; object-fit:cover}
.organize_executive dl dd ul li p.name{text-align: center; margin-top: .5rem; font-size: 1.4rem; font-weight: 300;}
.organize_executive.type02 dl{display: flex; flex-basis:100%}
.organize_executive.type02 dl dt{flex:0 0 13rem; padding-top: 3rem; border: 0px;}
.organize_executive.type02 dl dd{padding: 5rem 2rem 4rem; }
.organize_executive:first-child dl{flex-basis:25%; border-color:var(--color_sub01)}
.organize_executive:first-child dl dt{background: var(--color_sub01); color: #fff; border:0px; box-shadow: 0px 1px 3px rgba(0,0,0,.2)}
.organize_group{display: flex; gap:2rem 2%; flex-wrap:wrap}
.organize_group dl{flex:0 0 32%; border:1px solid #eee;}
.organize_group dl dt{position: relative; margin: -1px; padding: 1.4rem 2rem 1.2rem; border:1px solid #888; background-color:#f5f5f5; color: #222; font-size: 1.025em; overflow:hidden; }
.organize_group dl dt:before{position: absolute; right: 1rem; top: .5rem; width: 4rem; height: 4rem}
.organize_group dl dd {padding: 3rem .5rem 2rem;  border-top:0px}
.organize_group dl dd ul{display: flex; justify-content:center; gap:10%}
.organize_group dl dd ul li p.name{text-align: center; margin-top: .5rem; font-size: 1.4rem; font-weight: 300;}
.organize_group dl dd ul li span{font-weight: normal;}

/* 시설예약 */
#userguide{opacity: 0; position: absolute; left: 0px; top: 0px; width: 100%; height: 0px; z-index: -1; overflow: hidden; transition: opacity .2s ease}
/* #userguide{opacity: 1; z-index:999; height: unset; min-height: 100vw;} */
#userguide.show{opacity: 1; z-index:999; height: unset; min-height: 100vh}
#userguide:After{display: block; content: ''; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,.6); }
#userguide .wrapper{position: relative; margin:2% auto; padding: max(2%, 2rem); padding-bottom: 10rem; background: #fff; border-radius:2rem; border:1px solid #333; box-shadow: 0px 1px 10px rgba(0,0,0,.6); z-index: 1;}
#userguide .wrapper>h4:first-child{margin-top: 0px;}
#userguide .map{border:1px solid #ddd}
#userguide .imgmap img{border:1px solid #ddd}
#userguide .pingpong_infoBox{padding: min(50px, 5%); text-align: center; border:2px solid #2F6050; border-radius:5px}
#vzone{width:95%; overflow: hidden; position:relative; max-width:80rem; height:min(40rem, 40vw); margin:2rem auto}
#vzone .list, #vzone .list *{position:relative; height:100%}
#vzone .list{width: 200%; right: 0px;  position: relative;}
#vzone .list li{float: left; background: #000; width:50%;}
#vzone .list li img{object-fit:cover; height:100%; width:100%;}
#vzone .control{ overflow:hidden; position:absolute; left:2%; bottom:1rem;  }
#vzone .control li{float: left; margin-left: 1px;}
.view_facility .view_program{display: none;}
.view_program .view_facility{display: none;}
.close_userguideT{position: absolute; right: 2vw; top: 2vw}
.close_userguideT a{display: block;  width: 5rem; height: 5rem; font-size: 0px;}
.close_userguideT a:before,
.close_userguideT a:after{display: block; content: ''; position: absolute; left: 0px; top: 50%; width: 100%; height: 1px; background: #333; transform: rotate(45deg);}
.close_userguideT a:after{transform: rotate(-45deg);}
.close_userguideB{text-align: center; margin-top: 5rem; padding-top: 5rem; border-top:1px solid #ddd}
.close_userguideB a{display: inline-block; background: #333; width: 100%; max-width: 30rem; padding: 1.5rem 1rem; color: #fff; border-radius:2px}
.layer_pop{position: absolute; max-width: 500px; width: 90%; margin: auto; padding: 4rem; right: 0px; left: 0px; top: 30rem; z-index: 1; border:3px solid var(--color_sub01); background: #fff; box-shadow:0px 1px 10px rgba(0,0,0,.5)}
.layer_pop .pop_tit{margin-bottom: 1rem; font-size: 2.2rem; color: var(--color_sub02)}
.layer_pop .pop_realname{padding: .7rem 3rem .5rem; background: var(--color_sub02); color: #fff; text-shadow: 0px 0px 2px #000;}
.layer_pop .pop_close{position: absolute; right: 0rem; top: 0rem; }
.layer_pop .pop_close a{display: block; padding: .5rem 2rem; background: var(--color_sub01); color: #fff; font-size: .9em;}


/***************************************************************************************************************************/


@media screen and (max-width:800px){
	.map{height: 18rem}
	.map_info>li{flex:0 0 47%; margin-bottom: 2rem; --bgSize:4rem; font-size: min(3vw, 1.4rem)}
	.map_info>li p.tit:before{margin-top: 0px;}
	.greeting{flex-direction: column; align-items: center;}
	.greeting .conL{margin-bottom: 2rem;}
	.greeting .conL .name{text-align: center;}
	.greeting .conR .txt2{margin-top: .5rem; font-size: 1.7rem;}
	.greeting .conR .txt3{font-size: 1.5rem}
	.history dl{justify-content: flex-start}
	.history dl dt{font-size: 2rem; font-weight: bold; width: 7rem;}
	.history dl dt:after{display: none;}
	.history dl dd {flex-grow:1; padding-top: 0px;}
	.history dl dd ul li .date{display: block; margin-right: 0px}
	.history dl:nth-child(2n) dt{order: 0;}
	.history dl:nth-child(2n) dd{text-align: left;}
	.organize{gap:1rem}
	.organize .part1{flex-basis:100%}
	.organize .part1>div{margin:2rem auto; width: 50%; max-width: 170px;}
	.organize .part2, .organize .part3{flex:0 0 48%; order:2}
	.organize>div.part1:AFter{top: 2rem; height: calc(100% - 4rem)}
	.organize .part4 dl dt{flex-basis: 9rem;}
	.organize_executive dl dd ul{gap:2rem 0px}
	.organize_executive dl dd ul li p.img{width: 8rem; height: 8rem;}
	.organize_executive.type02 dl{flex-direction: column;}
	.organize_executive.type02 dl dt{flex-basis: auto; padding: 2rem;}
	.organize_executive.type02 dl dd ul{gap:3rem 1%}
	.organize_executive.type02 dl dd ul li{width: 24%;}
	.organize_executive.type02 dl dd ul li p.img{margin: auto; width: 100%; max-width: 7rem; height: 7rem;}
	.organize_group dl{flex:0 0 100%; display: flex; flex-direction: row;}
	.organize_group dl dt{flex: 0 0 10rem; text-align: center; padding: 2rem 1rem;}
	.organize_group dl dt:before{position: absolute; margin: auto; top: calc(100% - 5rem); left: 1rem;}
	.organize_group dl dd{flex-grow: 1;}
	#userguide .wrapper{margin:0px; width: 100%; padding-top: 4rem; border-radius: 0px; border:0px}
}