@charset "utf-8";

@font-face {
    font-family:'Gong';
    font-weight: 300;
    src: url('GongGothicLight.woff') format('woff');
}
@font-face {
    font-family:'Gong';
    font-weight: normal;
    src: url('GongGothicMedium.woff') format('woff');
}
@font-face {
    font-family:'Gong';
    font-weight: 500;
    src: url('GongGothicBold.woff') format('woff');
}

*{box-sizing:border-box}
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,canvas,details,figcaption,summary,time,mark,audio,video, select, textarea, input, button {font-size:18px; font-family:'Gong'; color: #333;}
body{/* background-color: #ebf9f5;  */overflow-x:hidden; word-break:keep-all}
a{font:inherit}
img{max-width: 100%;}
.wrap{max-width: 1440px; margin: auto;}

.goSeogu{position: absolute; right: 3rem; top: 2rem;}
.intro{padding-bottom: 40px; background:#ebf9f5 url(/open_content/main/walk/img/bgMap1.png) no-repeat center bottom }
h1{text-align: center; margin: auto;  padding-top: min(17vw, 310px); background: url(/open_content/main/walk/img/img.png) no-repeat center top -1.1rem / contain; width: 90%; max-width: 950px;}
.tab{display: flex; gap:.5%; justify-content: center; margin: min(3.4%, 67px) auto 0px; width: 80%;}
.tab li{width: 40%; max-width: 200px;}
.tab a{display: block; position: relative; text-align: center; padding: 1.25rem 1rem 1.2rem; border:2px dashed #222; opacity: .6; transition:all ease .1s; border-radius:10px; font-size: 1.8rem; font-weight:300; color: #000; background: rgba(0,0,0,.05); text-decoration: none;}
.tab a:hover{opacity: 1}
.tab .on a{opacity: 1; border-style:solid; background: #fff; box-shadow:0px 3px 0px #000}
.tab a:before{opacity: 0; display: block; content: ''; position: absolute; top: -2.5rem; width: 37px; height: 45px; background:url(/open_content/main/walk/img/ic_pin.png) no-repeat center center/contain; transition:top ease .1s}
.tab :first-child a:before{left: -1rem; }
.tab :last-child a:before{right: -1rem; transform:rotate(45deg)}
.tab .on a:before{opacity:1; top: -35px}
.tabcon{display: none; margin-top: 2.5rem; ;max-width:1300px}
.tabcon#introduce{display: block;}
.tabcon h2{display: none;}
.tabcon p{font-weight: 300; color: #333; font-size: 1.27rem; text-align: center; line-height: 170%;}

.walkroad{background-image:url(/open_content/main/walk/img/bgMap2.png), url(/open_content/main/walk/img/bg.png); background-repeat:no-repeat, repeat-y; background-position:center top, center top;}
.walkroad .wrap:after{display: block; content: ''; clear: both;}
#roadinfo{min-height: 1290px; }
#roadinfo h3, .info_tit{position: relative; padding: 3.5rem 0px 1rem; font-size: 2rem; font-weight: normal; color: #222; overflow:hidden}
#roadinfo  .info_tit{width: 40%; float:right}
.roadlist{padding-top: 6rem}
.roadlist ul{position: relative; }
/*검단구 가리기 ㅋㅋ*/
.roadlist ul li .imgmap{position:relative}
.roadlist ul li .imgmap::after {position:absolute; left:51px; top:0; width:calc(100% - 51px); max-width:712px; height:50.59%; background:no-repeat url(/open_content/main/walk/img/map_hide.png); background-size:100% auto; content:"";}
/*end*/
.roadlist ul li .imgmap{opacity: 0; position: absolute; left: 0px; top:0px; width: 54%; padding-left: 51px;}
.roadlist ul li.on .imgmap{opacity: 1; z-index: 1;}
.roadlist ul li a{display: flex; margin-left: 60%; justify-content: space-between; padding: .5rem 1rem .4rem; border-top:1px solid #222}
.roadlist ul li:first-child a{border-top-width:2px}
.roadlist ul li:last-child a{border-bottom:1px solid #222}
.roadlist ul li p{font-size: .9em;}
.roadlist ul li .viewdetail{display: inline-block; font-size: .85em; padding-right: 10px; opacity: .5; position: relative; font-weight: normal;}
.roadlist ul li .viewdetail:After{display: block; content: ''; position: absolute; right: 0px; top: 50%; transform: rotate(45deg) translateY(-7px); width: 7px; height: 7px; border:2px solid currentColor; border-width:2px 2px 0px 0px; opacity: .8;}
.roadlist .on a{outline:3px solid #c20202 !important; border-color:transparent !important; border-radius:5px}
.roadlist .on p{color: #c20202; opacity: 1 !important;}
.roadspot{padding-top: 3rem; margin-left: 60%; overflow-x:hidden}
.roadspot>div{position: relative; white-space: nowrap; max-height: 1000px; overflow-y:hidden}
.roadspot>div>div{display: block; width: 100%; max-width: 575px; vertical-align: top; padding-bottom: 5px}
.roadspot .golist{position: absolute; top: calc(3.2rem + 8px); right: 0px; vertical-align: middle; width: 35px; height: 35px; background: url(/open_content/main/walk/img/icset.png) no-repeat -105px 0px / cover; text-indent: -5000px; overflow:hidden; opacity: 0.6; transition:all linear .3s}
.roadspot .golist:hover{transform:rotate(-360deg); }
.roadspot .img{border-radius: 10px; overflow:hidden; box-shadow: 0px 2px 5px rgba(0,0,0,.2); font-size: 0px;}
.roadspot .addr{padding-left: 30px; margin-bottom: .7rem; font-weight: 300; font-size: 1.1rem; background: url(/open_content/main/walk/img/ic_addr.png) no-repeat left .2rem / 21px}
.roadspot .length{display: flex; position: relative; margin:auto; max-width: 490px; padding: 1.38rem 0px; transform: translateY(-50%); background: #864cf0; z-index: 1; box-shadow: 0px 2px 5px rgba(0,0,0,.2); border-radius:8px}
.roadspot .length>li{flex:0 1 50%; text-align: center; padding: 2px 5px 0px; font-weight: 300; color: #fff; text-shadow:-1px 1px 0px rgba(0,0,0,.2), 1px -1px 0px rgba(0,0,0,.2), 1px 1px 0px rgba(0,0,0,.2), -1px -1px 0px rgba(0,0,0,.2); font-size: 1.1rem;}
.roadspot .length>li+li{border-left:1px solid rgba(0,0,0,.1)}
.roadspot .length>li:before{display: inline-block; content: ''; position: relative; vertical-align: middle; top: -2px; width: 1.945rem; height: 1.945rem; margin-right: 5px; background-image: url(/open_content/main/walk/img/icset.png);  background-size: cover}
.roadspot .length>li:nth-child(1):before{background-position: 0px 0px}
.roadspot .length>li:nth-child(2):before{background-position: -1.945rem 0px }
.roadspot .litable{display: table; width: 100%; margin-top: 1rem; border-top:2px solid #333}
.roadspot .litable>li{display: table-row; }
.roadspot .litable>li>*{display: table-cell; width: 50%; text-align: center; margin:0px 5px; padding: .6rem 5px;  font-weight: 300; border-bottom:1px solid #333}
.roadspot .litable>li:nth-child(3) p:last-child, .roadspot .litable>li:nth-child(4) p:last-child{font-family: Helvetica;}
.roadspot .direction{text-align: center; margin-top: 2rem; padding-bottom: .5rem;}
.roadspot .btn_direction{display: inline-block; padding: 8px 2rem 7px 2.5rem; ;background: #d21313; color: #fff; border-radius:60px; font-weight: 300; box-shadow:0px 5px 0px rgba(0,0,0,.1)}
.roadspot .btn_direction:after{display: inline-block; content: ''; position: relative; top: -1px; vertical-align: middle; width: 35px; height: 35px; background: url(/open_content/main/walk/img/icset.png) no-repeat -70px 0px / cover; }
.roadspot [class*=btn_direction]{display: inline-block; padding: 13px 2rem 10px 3rem; ;background: #d21313 url(/open_content/main/walk/img/ic_map.png) no-repeat 1.5rem center / 1.11rem; color: #fff; border-radius:60px; font-weight: 300; box-shadow:0px 5px 0px rgba(0,0,0,.1); text-shadow:0px 0px 2px rgba(0,0,0,.5); transition:all ease .5s}
.roadspot .btn_directionN{background-color: #4cc50a}
.roadspot .btn_directionK{background-color: #ffb400}
.roadspot [class*=btn_direction]:hover{background-color:#d21313 }
footer{display: flex; align-items: center;  }
footer .copy{flex:0 0 calc(50% - 525px); display: flex; justify-content: flex-end; padding: 1.2rem; padding-right: 3%; font-size: .9rem; opacity: .5; font-weight: 300; color: #000;}
footer .btm{flex:0 0 calc(50% + 525px);  background: rgba(11,55,42,.08);}
footer .btm>div{display: flex; justify-content: space-between; align-items: center;  padding: 2rem 7%; padding-right: 0px; max-width:1255px;}
footer .btm ul{display: flex;}
footer .btm ul li{min-width: 50%;}
footer .btm ul li a{color: rgba(11,55,42,.5); font-size: 1.16rem; }
footer .btm .goTop a{display: inline-block; padding: .5rem 2rem; border-radius:50px; background: #8dcab8; font-size: 1.16rem; color: #546d66; font-weight: 300;}


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


@media screen and (min-width:801px) {
	.dp_mb{display: none !important}
}

@media screen and (max-width:1440px) {
	html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,canvas,details,figcaption,summary,time,mark,audio,video, select, textarea, input, button {font-size:16px}
	.wrap{padding: 0px max(5%, 15px)}
	.intro{padding-bottom: 4rem; background: #fff;}
	.walkroad{background:#ebf9f5}
	.walkroad #roadinfo{min-height: unset; padding-bottom: 6rem;}
	#roadinfo .info_tit{padding-top: 0px;}
	footer{padding: 0rem 0px; background: #fff;}
	footer .copy{flex:1 1 30%}
	footer .btm{flex:1 1 70%; }
	footer .btm>div{padding: 2rem 7%}
	
	.roadlist ul li .imgmap::after {background-image:url(/open_content/main/walk/img/map_hide_m.png); max-width:none;}

}


@media screen and (max-width:800px) {
	html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,canvas,details,figcaption,summary,time,mark,audio,video, select, textarea, input, button {font-size:clamp(16px, 2vw, 14px)}
	.dp_pc{display: none;}
	.goSeogu {right: 0rem; top: 0rem; transform: scale(60%);}

	h1{margin:15% auto 10%;  padding-top: min(25vw, 140px); background-size: 90%; background-position-y: 0px;}
	.tab a{font-size: 1.4rem; padding:1.1rem 1rem 1rem;}
	.tab a:before{width: 25px}
	.tab .on a:before{top: -30px;}
	.tabcon p{text-align: left; font-size: 1.15rem; line-height: 150%;}
	.walkroad h2{text-align: center; font-size: min(3rem, 7vw); padding-top: 3rem; font-weight:300; color: #222;}
	.roadlist{padding-top: 3rem; }
	.roadlist ul li a{margin-left: 50%; border:0px !important; padding: 0px .5rem;}
	.roadlist ul li a>:not(.name){display: none;}
	.roadlist ul li .imgmap{width: 51%; padding-left: 0px; left: -5px; top: 0px;}
	.roadlist ul li .imgmap img{max-height:320px}
	.roadlist ul li a p{font-size: .85rem; letter-spacing: -.5px; font-weight: 300; padding: 2px; line-height: 130%;}
	.roadlist .on a{outline:none !important}
	#roadinfo h3{padding-top: 3rem; padding-bottom: 1rem; font-size: 1.5rem}
	.roadspot{clear: both; padding-top: 0px; margin-left: 0px;  }
	.roadspot .golist{display: none;}
	.roadspot>div{overflow-y:visible}
	.roadspot>div>div{display: inline-block; padding: 0px 15px;}
	.roadspot .length{transform:translateY(0px); padding: 1rem 0px; margin-top: .5rem; margin-bottom: 2rem;}
	footer .copy{justify-content: center; text-align: center;}
	footer .btm{display: none;}
	
	.roadlist ul li .imgmap::after {left:0; width:210px;}
}