@charset "utf-8";
#detail_con .wrap{padding-top:4%; padding-bottom:4%; max-width:1400px;}
#detail_con div.search select,
#detail_con div.search p.entertxt input[type="text"],
#detail_con div.search input[maxlength="10"],
.btn_forinput{font-size:.8rem;}
#detail_con .btn{font-weight:normal; line-height:43px;}
#detail_con .btn_ok{background-color:#666 !important;}
#detail_con .s_btn{padding-left:10px; padding-right:10px; min-width:auto; height:30px; line-height:32px; color:#fff; font-size:.7rem; font-weight:normal; background-color:#333; box-shadow:none;}

#detail_con .search{display:none;}
#detail_con .tag{margin-left:0;}

.guide #container{border-top:1px solid #eee; background-color:#FDFFFC; border-bottom:1px solid #eee; }
.guide_con.wrap{padding-top:8%; padding-bottom:0;}
.guide_con>div{display:flex; flex-direction:row-reverse; justify-content:space-between;}
.guide_con .tit_box .img{position:relative; max-width:720px; font-size:0; line-height:0; filter:drop-shadow(-12px 12px 48px rgba(0, 0, 0, 0.25));}
.guide_con .tit_box .img:after{content:''; position:absolute; right:30px; top:-60px; width:169px; height:153px; background-image:url(../img/sub/guide_leaf02.png);}
.guide_con .tit_box .img img{width:100%; border:8px solid #fff; box-sizing:border-box;}
.guide_con .tit_box .tit01{padding-top:3%; color:#606D5A; font-size:2.15rem;}
.guide_con .tit_box .tit02{position:relative; color:#68AA15; font-size:5.35rem;}
.guide_con .tit_box .tit02:before{content:''; position:absolute; left:30px; top:22px; width:62px; height:71px; background-image:url(../img/sub/guide_leaf01.png);}
.guide_con .tit_box .txt{color:#606D5A; font-size:1.3rem; word-break:keep-all;}
.guide_con .tit_box .txt span{color:#68AA15; font-size:1.3rem;}
.guide_con .con_box{margin-top:-8%; align-items:flex-end;}
.guide_con .con_box .img{padding-right:8%;}
.guide_con .con_box h4{padding-top:5%; color:#68AA15; font-size:1.55rem; font-weight:normal;}
.guide_con .con_box ol{counter-reset:num; width:72%; padding-bottom:10%; word-break:keep-all;}
.guide_con .con_box ol li{position:relative; list-style:none;}
.guide_con .con_box ol>li{padding-left:34px; margin-top:2%; color:#606D5A; font-size:1rem;}
.guide_con .con_box ol>li:before{content:counter(num); counter-increment:num; position:absolute; top:0; left:0; width:24px; height:24px; color:#fff; font:12px 'GmarketSansBold'; line-height:26px; background:#68AA15; border-radius:100%; text-align:center;}
.guide #notice{display:block;}
.guide .con_box+#notice{padding-top:5%;}

.course_list{background:#F5F5F5;}
.course_list ul{display:flex; flex-wrap:wrap;}
.course_list>ul>li{flex:0 1 31.3%; margin:.5%; text-align:center;}
.course_list ul div,
.course_list ul a{display:block; height:100%; background-color:#fff; border:1px solid #eee; box-sizing:border-box; transition:.5s;}
.course_list ul a:hover{text-decoration:none; transform:translateY(-10px);}
.course_list ul div img,
.course_list ul a img{width:100%;}
.course_list ul dl{padding:5% 0;}
.course_list ul dl dt{margin-top:3%; margin-bottom:3%; color:#68AA15; font-size:1.6rem;}
.course_list ul dl dt span{padding:10px 10px 8px 10px; color:#fff; font:1.3rem 'GmarketSansBold'; border-radius:4px; background-color:#68AA15;}
.course_list ul dl dd.txt01{color:#666; letter-spacing:-.5px;}
.course_list ul dl dd ul{justify-content:center; margin-top:5%;}
.course_list ul dl dd ul li{position:relative; padding:42px 15px 0; color:#666; background-position:center top; background-size:32px;;}
.course_list ul dl dd ul li:before{content:''; position:absolute; left:0; top:calc(50% - 7px); width:1px; height:14px; background-color:#ccc;}
.course_list ul dl dd ul li:first-child:before{display:none;}
.course_list ul dl dd ul li i:before{position:absolute; left:0; right:0; top:0; color:#68AA15; font-size:32px;}

.course_con{text-align:center;}
.course_con>div{padding-top:5%; padding-bottom:5%;}
.course_con>div h4{font-family:'GmarketSansMedium'; font-weight:normal; font-size:2.8rem;}
.course_con .map{position:relative; padding:0;}
.course_con .map img{width:100%;}
.course_con .map p{position:absolute; left:0; right:0; top:calc(50% - 60px); z-index:2;}
.course_con .map a{display:inline-block; padding-top:120px;}
.course_con .map a:before,
.course_con .map a:after{display:block; content:''; position:absolute; left:0; right:0; top:44px; margin:auto; width:88px; height:2px; background:#fff; transition:.3s; z-index:2;}
.course_con .map a:after{transform:rotate(90deg);}
.course_con .map a span{display:inline-block; margin:auto; padding:20px 30px 17px 30px; color:#000; font-size:1.4rem; background-color:#FFF;}
.course_con .map a:hover:before{transform:rotate(360deg);}
.course_con .map a:hover:after{transform:rotate(-90deg);}

.course_con .info h4{color:#68AA15;}
.course_con .info h4 span{color:#68AA15; font:2.8rem 'GmarketSansBold';}
.course_con .info ul{display:flex; justify-content:center;}
.course_con .info .info_txt li{position:relative; padding:10px 0 10px 56px; margin-left:2%; font-size:1.3rem;}
.course_con .info .info_txt li:first-child{margin-left:0;}
.course_con .info .info_txt i:before{position:absolute; left:0; top:3px; color:#333; font-size:40px;}
.course_con .info .course li{position:relative; padding-top:116px; padding-left:4.5%; padding-right:4.5%; margin-top:1.5%; font-size:1.35rem;}
.course_con .info .course li:after{content:''; position:absolute; left:0; right:0; top:85px; margin:auto; width:20px; height:20px; border-radius:100%; border:4px solid #68AA15; background-color:#FFF; box-sizing:border-box;}
.course_con .info .course li:before{content:''; position:absolute; left:0; top:95px; width:100%; height:1px; background-color:#68AA15;}
.course_con .info .course li:nth-child(1):before{right:0; left:auto; width:50%;}
.course_con .info .course li:nth-last-child(1):before{width:50%;}
.course_con .info .course li span{display:block; color:#666;}
.course_con .info .course li i{font-size:0; text-indent:-5000px;}
.course_con .info .course li i:before{content:''; position:absolute; left:0; right:0; top:0; width:80px; height:80px; margin:auto; background-image:url(../img/sub/info_course.svg); background-repeat:no-repeat;}
/*모바일 체크*/
.course_con .info .course .ic01:before{background-position:0 0;}/*녹지,숲*/
.course_con .info .course .ic02:before{background-position:-100px 0;}/*고개*/
.course_con .info .course .ic03:before{background-position:-200px 0;}/*공원*/
.course_con .info .course .ic04:before{background-position:-300px 0;}/*생태통로*/
.course_con .info .course .ic05:before{background-position:-400px 0;}/*기타*/
.course_con .info .course .ic06:before{background-position:0 -153px;}/*약수터*/
.course_con .info .course .ic07:before{background-position:-100px -153px;}/*아파트*/
.course_con .info .course .ic08:before{background-position:-200px -153px;}/*빌딩*/
.course_con .info .course .ic09:before{background-position:-300px -153px;}/*내천*/
.course_con .info .course .ic10:before{background-position:-400px -153px;}/*학교*/
.course_con .info .course .ic11:before{background-position:0 -306px;}/*전철역*/
.course_con .info .course .ic12:before{background-position:-100px -306px;}/*절*/
.course_con .info .course .ic13:before{background-position:-200px -306px;}/*정상*/
.course_con .info .course .ic14:before{background-position:-300px -306px;}/*주유소*/
.course_con .info .course .ic15:before{background-position:-400px -306px;}/*다리*/
.course_con .info .course .ic16:before{background-position:0 -459px;}/*경기장*/
.course_con .info .course .ic17:before{background-position:-100px -459px;}/*서구청*/
.course_con .info .course .ic18:before{background-position:-200px -459px;}/*선착장*/
.course_con .info .course .ic19:before{background-position:-300px -459px;}/*섬*/
.course_con .info .course .ic20:before{background-position:-400px -459px;}/*전망대*/

.course_con .story{background-color:#F5F5F5;}
.course_con .story .wrap{position:relative; max-width:1450px;}
.course_con .story h4{color:#68AA15; font-size:2.65rem;}
.course_con .story .btn_control{position:absolute; top:calc(50% - 12px); left:0; right:0;}
.course_con .story .btn_control li{position:absolute; background-color:#666; z-index:2;}
.course_con .story .btn_control li.btn_prev{left:0;}
.course_con .story .btn_control li.btn_next{right:0;}
.course_con .story .btn_control li a:after,
.course_con .story .btn_control li a:before{background-color:#fff;}
.course_con .story .list{display:flex; max-width:1280px; margin:auto; overflow:hidden;}
.course_con .story .list li{display:flex; flex:1 0 100%; text-align:left; align-content:flex-start;}
.course_con .story .list li div img{width:100%;}
.course_con .story .list li .conBox p{color:#666; font-size:1.2rem;}
.course_con .story .list li .conBox .txt01{margin-top:3%; margin-bottom:4%;}
.course_con .story .list li .conBox .txt02 span{display:inline-block; padding:1% 2% .5% 2%; margin-right:10px; color:#fff; font-size:1.2rem; border-radius:10px; background-color:#68AA15;}

.location{background-color:#68AA15;}
.location h4{color:#fff;}
.location .txt{margin-top:.5%; color:rgba(255, 255, 255, 0.85); font-size:1.3rem;}
.location .photo{margin-top:2%;}
.location .photo img{max-width:100%; border:8px solid #fff; box-sizing:border-box;}
.location ul{display:flex; justify-content:center;}
.location ul li{margin:1% 2% 0 2%;}
.location ul li a{display:block; min-width:100px; padding-top:120px; margin-top:1%; color:#fff; font-size:1.3rem;}
.location ul li.naver a{background:url(../img/sub/course_naver.png) center 0 no-repeat;}
.location ul li.kakao a{background:url(../img/sub/course_kakao.png) center 0 no-repeat;}
.location ul li.gis a{background:url(../img/sub/course_gis.png) center 0 no-repeat;}

.video{background-color:#F5F5F5;}
.video .wrap{max-width:1200px;}
.video .wrap>div{position:relative; line-height:0;}
.video .wrap>div:before{content:''; position:absolute; left:0; right:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.58) url(../img/sub/course_video.png) center no-repeat; z-index:2;}
.video .wrap video{position:relative; width:100%;}
.video .wrap.on>div:before{display:none;}
/* 유튜브 등 동영상 반응형 */
.embed-container{position:relative; padding-bottom:56.2%; height:0; overflow:hidden; max-width:1400px; margin:auto;}
.embed-container iframe, .embed-container object, .embed-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}

#photo .wrap{max-width:1600px;}
#photo .tit_box{top:14%;}
.photo_btn{margin-top:2%;}
.photo_btn a{display:inline-block; padding:18px 40px 15px 40px; color:#fff; font-size:1.6rem; background:#68AA15; border-radius:30px;}

footer{background-color:#F5F5F5;}
.footer_w footer{background-color:#FFF;}

@media screen and (min-width:1400px){
	.embed-container{padding-bottom:41.8%;}
}

@media screen and (max-width:1300px){
	.guide_con .con_box{margin-top:0;}
}

@media screen and (max-width:1100px){
	.guide_con .tit_box{width:94%; padding:0 3%; flex-direction:column; align-items:baseline;}
	.guide_con .con_box{width:94%; padding:5% 3% 0 3%; flex-direction:column; align-items:baseline;}
	.guide_con .con_box .img{width:100%; padding-right:0;}
	.guide_con .con_box .img img{width:100%;}
	.guide_con .con_box ol{width:100%; padding-bottom:0;}
	.course_list>ul>li{flex-basis:48%;}
	.course_list ul dl dd ul{flex-wrap:nowrap;}
	.course_list ul dl dd ul li{flex:1 1 auto;}
}

/*pc*/
@media all and (min-width:801px){
	.btn_forinput{height:40px; font-weight:normal; line-height:40px;}
	div.search select{height:40px;}
	div.search input[type="text"]{height:38px;}
	.board_gallery .photo, .board_gallery .noimage{height:225px;}
	.board_gallery .photo img{min-height:225px;}
	.course_con .story .list li>div{flex:1 1 50%;}
	.course_con .story .list li .conBox{margin-left:3.2%;}
	#photo .wrap{padding-bottom:0;}
	#photo .list li li{overflow:visible; padding-top:20px; padding-bottom:20px;}
	#photo .list li li:nth-child(1){padding-left:20px;}
	#photo .list li li:nth-last-child(1){padding-right:20px;}
	#photo .list ul li a{box-shadow:0 0 17px rgba(0,0,0,.2)}
}

/*tablet~mobile*/
@media screen and (max-width:800px){

	.search+.right,
	.search+.right>.wfont,
	.nowInall,
	.nowInall span,
	.board_view>ul.datalist>li dl dt,
	.board_view>ul.datalist>li dl dd,
	.board_view>ul.datalist>li dl dd a,
	.board_view>ul.datalist>li dl dd span,
	.board_write label,
	.board_write input[type=file],
	.board_write input[type="text"], .board_write input[type=password]{vertical-align:middle; font-size:.8rem !important;}
	
	.board_view .other_con span,
	.board_view .other_con li,
	#detail_con .btn{font-size:.9rem;}

	.guide_con .tit_box .img{padding-bottom:5%; filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));}
	.guide_con .tit_box .img:after{right:30px; top:-15px; background-size:80px; background-position:right top; background-repeat:no-repeat;}
	.guide_con .tit_box .tit01{font-size:1.3rem;}
	.guide_con .tit_box .tit02{font-size:2.5rem;}
	.guide_con .tit_box .tit02:before{left:12px; top:13px; background-size:30px; background-repeat:no-repeat;}
	.guide_con .tit_box .txt{width:100%; font-size:1rem;}
	.guide_con .tit_box .txt span{font-size:1rem;}
	.guide_con .tit_box .txt br{display:none;}

	.course_con .story .btn_control{display:none;}
	.course_list>ul>li{flex-basis:98%;}
	.course_list ul dl dt{font-size:1.4rem;}
	.course_list ul dl dt span{font-size:1rem;}
	.course_list ul dl dd.txt01,
	.course_list ul dl dd ul li{font-size:.9rem;}
	
	.course_con>div h4, .course_con>div h4 span{font-size:1.6rem !important;}
	.course_con .map a{padding-top:0px; margin-top:30px;}
	.course_con .map a:before, .course_con .map a:after{display:none;}
	.course_con .map a span{padding:10px 20px 7px 20px; font-size:1rem;}
	.course_con .info{padding-left:5%; padding-right:5%;}
	.course_con .info .info_txt li{padding-left:30px; font-size:1rem;}
	.course_con .info .info_txt i:before{top:8px; font-size:24px;}
	.course_con .info .course{flex-wrap:wrap; text-align:left; width:94%; margin-left:3%; margin-right:3%;}
	.course_con .info .course li{flex-basis:100%; padding:15px 10px 15px 120px; font-size:1rem;}
	.course_con .info .course li:after{right:auto; top:calc(50% - 12px);}
	.course_con .info .course li:before{left:10px; top:-50%; width:1px; height:100%;}
	.course_con .info .course li:nth-child(1):before{display:none;}
	.course_con .info .course li:nth-last-child(1):before{width:1px;}
	.course_con .info .course li i:before{right:auto; left:30px; width:60px; height:60px; background-size:345px;}
	.course_con .info .course li span{font-size:.8rem;}
	.course_con .info .course .ic01:before{background-position:0 0;}/*녹지,숲*/
	.course_con .info .course .ic02:before{background-position:-71px 0;}/*고개*/
	.course_con .info .course .ic03:before{background-position:-141px 0;}/*공원*/
	.course_con .info .course .ic04:before{background-position:-211px 0;}/*생태통로*/
	.course_con .info .course .ic05:before{background-position:-284px 0;}/*기타*/
	.course_con .info .course .ic06:before{background-position:0 -108px;}/*약수터*/
	.course_con .info .course .ic07:before{background-position:-71px -108px;}/*아파트*/
	.course_con .info .course .ic08:before{background-position:-141px -108px;}/*빌딩*/
	.course_con .info .course .ic09:before{background-position:-211px -108px;}/*내천*/
	.course_con .info .course .ic10:before{background-position:-284px -108px;}/*학교*/
	.course_con .info .course .ic11:before{background-position:0 -218px;}/*전철역*/
	.course_con .info .course .ic12:before{background-position:-71px -218px;}/*절*/
	.course_con .info .course .ic13:before{background-position:-141px -218px;}/*정상*/
	.course_con .info .course .ic14:before{background-position:-211px -218px;}/*주유소*/
	.course_con .info .course .ic15:before{background-position:-284px -218px;}/*다리*/
	.course_con .info .course .ic16:before{background-position:0 -328px;}/*경기장*/
	.course_con .info .course .ic17:before{background-position:-71px -328px;}/*서구청*/
	.course_con .info .course .ic18:before{background-position:-141px -328px;}/*선착장*/
	.course_con .info .course .ic19:before{background-position:-211px -328px;}/*섬*/
	.course_con .info .course .ic20:before{background-position:-284px -328px;}/*전망대*/

	.course_con .story .list{width:97%; padding-left:3%; overflow-x:scroll;}
	.course_con .story .list::-webkit-scrollbar{width:5px; height:3px;}
	.course_con .story .list::-webkit-scrollbar-track-piece{background:rgba(0,0,0,.1);}
	.course_con .story .list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);}
	.course_list ul dl dd ul li{font-size:.9rem;}
	.course_con .story .list li{flex-wrap:wrap; flex-basis:auto; width:85%; margin-right:4%;}
	.course_con .story .list li .conBox{padding:5%;}
	.course_con .story .list li .conBox p{font-size:.9rem;}
	.course_con .story .list li .conBox .txt01{margin-top:2%;}
	.course_con .story .list li .conBox .txt02 span{text-align:center; min-width:30px; font-size:.9rem;}

	.location{width:94%; padding-left:3%; padding-right:3%;}
	.location .photo{width:80%; margin-left:auto; margin-right:auto;}
	.location .txt,
	.location ul li a{font-size:1rem;}
	.location ul li a{padding-top:70px; min-width:60px; background-size:60px !important;}
	
	.video{padding-left:5%; padding-right:5%;}
	
	#photo .wrap{padding:0 0 0 5%;}
	.photo_btn a{padding:10px 20px 8px 20px; font-size:1rem;}
}