@charset "UTF-8";

@import url('/common_2020/css/default.css');
@import url('/common_2020/css/program.css');
@import url('/common_2020/css/board.css');

/* 초기화 */
a:link{color:#555; text-decoration:none;}
a:visited{color:#555; text-decoration:none;}
a:hover{color:#555; text-decoration:none;}
a:focus{text-decoration:underline;}
a:active{color:#555; text-decoration:none;}

html,body,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,blockquote,pre,button,fieldset,form,legend,table,caption,tbody,tfoot,thead,tr,th,td,iframe,article,aside,canvas,details,embed,figure,figcaption,header,footer,menu,nav,section,summary,audio,video{box-sizing:border-box;}
a,em,span{display:inline-block; margin:0; padding:0; box-sizing:border-box;}
video, audio{display:block; width:100%;}
iframe, textarea{width:100%; max-height:100%;}
textarea{max-width:100%;}
mark{background-color:transparent; color:inherit;}
[type='checkbox'], [type='radio'], select{cursor:pointer;}
[disabled], [readonly]{cursor:default;}
button, input, optgroup, select, textarea{border-width:0; font-weight:200;}
input[type=search],input[type=text]{-webkit-appearance:none; -webkit-border-radius:4px;}
select{overflow:visible; background-color:transparent;}
:after,:before{display:none; content:'';}
@media screen and (max-width:768px){
    .skip, caption, legend{overflow:hidden; font-size:0 !important;}
}

#wrapper{position:relative; width:100%;}
body{font-weight:300; font-family:'NotoKr', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', sans-serif; line-height:24px; overflow-x:hidden; letter-spacing:-0.025em; word-wrap:break-word; -webkit-text-size-adjust:none;}


/* 헤더 */
#header{position:absolute; top:0; left:0; z-index:10; padding-top:69px; padding-left:55px; text-align:center;}
#header .logo:before{position:absolute; display:block; top:0; left:13px; width:290px; height:288px; background:url('/site/www/images/bicycle/logo_bg.png') no-repeat;}
#header .logo_anchor{display:block; position:relative; width:157px; height:62px; margin:0 auto; background:url('/site/www/images/bicycle/logo.png') no-repeat; font-size:0; line-height:0; cursor:pointer;}
#header .logo_text{display:inline-block; margin-top:10px; color:#fff; font-size:22px; line-height:24px; letter-spacing:-0.02em; font-family:'DWImpactamin'; font-weight:normal;}
@media all and (max-width:1000px){
    #header{position:relative; top:0; left:0; height:70px; overflow:hidden; background-color:#4a506b;}
    #header .logo:before{left:auto; top:auto; bottom:-55px; right:31px; width:144px; height:196px; background:url('/site/www/images/bicycle/m_logo_bg.png') no-repeat;}
    #header .logo_anchor{position:absolute; top:15px; left:20px; z-index:10; width:91px; height:35px; background-size:cover;}
    #header .logo_text{position:absolute; top:15px; left:120px; font-size:17px; line-height:19px;}
}

/* 카테고리 목록 */
.category{float:left; width:285px; height:100vh; padding-top:200px; padding-bottom:100px; background:url('/site/www/images/bicycle/category_bg.png') #4a506b left bottom no-repeat;}
.category .category_open,
.category .category_close{display:none;}
.category .category_content{position:relative; z-index:10;}
.category .category_list{padding:20px 41px 20px 42px;}
.category .category_item{position:relative; margin-bottom:9px; border-radius:3px; border:1px dotted rgba(255, 255, 255, 0.4);}
.category .category_btn{display:block; position:relative; width:100%; height:40px; padding-left:20px; color:#fff; font-size:16px; letter-spacing:-0.035em; text-align:left;}
.category .category_btn:before{display:block; position:absolute; top:0; right:15px; bottom:0; width:8px; height:11px; margin:auto 0; background:url('/site/www/images/bicycle/category_sprite.png') no-repeat left 100% / 250% 918.18%;}
.category .category_item .layer{display:none; position:absolute; top:17px; right:-100px; z-index:30; width:126px; padding:25px 20px; border-radius:7px; box-shadow:3px 4px 15px 0 rgba(0, 0, 0, 0.35); background-color:#fff;}
.category .category_item:nth-child(n+2) .layer{display:none!important;}
.category .category_item .layer .depth_item{position:relative;}
.category .category_item .layer .depth_item label{position:relative;width:100%;padding-left:29px;color:#636363;font-size:16px;line-height:30px;letter-spacing:-0.02em;text-align:left;box-sizing: border-box;}
.category .category_item .layer .depth_item label:before{display:block; position:absolute; top:6px; left:0; width:20px; height:20px; background:url('/site/www/images/bicycle/category_sprite.png') no-repeat left 37.03% / 100% 505%;}
.category .category_item .layer .depth_item input{position:absolute;top: 9px;left: 3px;}
.category .category_item .layer .depth_item input:checked + label:before{ background-position:left 74.07%;}

/* 활성화 */
.category .category_item.active:before{display:block; position:absolute; top:-3px; left:-3px; width:calc(100% + 6px); height:calc(100% + 6px); border-radius:3px; background:linear-gradient(to right, rgba(67,125,234,1) 8%,rgba(0,163,160,1) 98%);}
.category .category_item.active .category_btn{padding-left:39px; background-color:#fff; color:#437dea; font-weight:600;}
.category .category_item.active .category_btn:after{display:block; position:absolute; top:0; left:10px; bottom:0; width:20px; height:20px; margin:auto 0; background:url('/site/www/images/bicycle/category_sprite.png') no-repeat left 0 / 100% 505%;}
@media all and (max-width:1000px){
    .category{position:static; float:none; width:auto; height:auto; padding:0;}
    .category .category_open,.category .category_close{display:block; position:absolute; background:url('/site/www/images/bicycle/menu_sprite.png') no-repeat;}
    .category .category_open{top:26px; right:20px; z-index:11; width:22px; height:17px; background-size:100% 270.58%;}
    .category .category_close{top:25px; right:22px; z-index:10; width:20px; height:19px; background-position:left 100%; background-size:110% 242.1%;}
    .category .category_content{display:none; overflow-y:visible; position:absolute; top:0; right:-294px; z-index:12; width:222px; height:100%; padding:70px 0 0; transition:right .25s linear;}
    .category .category_content:before{display:block; position:absolute; top:70px; right:0; width:222px; height:100%; box-shadow:3px 4px 20px 0 rgba(0, 0, 0, 0.4); background-color:#363c5a;}
    .category .category_content:after{display:block; position:absolute; top:0; right:0; width:236px; height:70px; background:url('/site/www/images/bicycle/menu_bg.png') no-repeat;}
    .category .category_list{position:relative; z-index:10; width:236px; padding:16px 0 20px 0;}
    .category .category_item{margin-bottom:0; border-top:none; border-right:none; border-left:none; border-bottom:1px dotted rgba(255, 255, 255, 0.3);}
    .category .category_btn{height:44px; padding-left:30px; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.25);}
    .category .category_btn:before {display:none;}

    /* 활성화 */
    .category .category_content.active{right:0;}
    .category .category_item.active{border-bottom:1px solid #437dea;}
    .category .category_item.active:before{display:none;}
    .category .category_item.active .category_btn{padding-left:30px; background-color:#437dea; color:#fff; font-weight:300;}
    .category .category_item.active .category_btn:after{display:none;}
    .category .category_item .layer{top:10px;right:calc(100% - 19px);width:100px;padding: 15px 10px 15px 15px;}
    .category .category_item .layer .depth_item .depth_text{font-size:14px;}
}

/* 노선 */
.category .route{ opacity:0; visibility:hidden; margin-top:20px;padding:0 33px 0 32px;/*transition-property:opacity,visibility;transition-duration:0.25s;transition-timing-function:ease-in-out;*/}
.category .route_inner{position:relative; overflow:hidden; border-radius:3px; background-color:#fff;}
.category .route_title{height:45px; color:#363c5a; font-size:16px; line-height:45px; letter-spacing:-0.035em; text-align:center; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAYAAAAW/mTzAAAAAXNSR0IArs4c6QAAAB5JREFUGFdj/PLly/+Pn/8z7Nu3j8HJyYmBn5eRAQCQ+Qnd0dQs0gAAAABJRU5ErkJggg==') repeat-x left 100%;}
.category .route_list{max-height:252px; overflow-y:scroll}

.category .route.active{opacity:1; visibility:visible;}
::-webkit-scrollbar {
    width:5px;
}
::-webkit-scrollbar-track {
    background-color:#c5c9d6;
    -webkit-border-radius:0;
    border-radius:0;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius:0;
    border-radius:0;
    background:#7a7d96;
}
.category .route_item{position:relative; padding-left:10px; border-top:1px solid #e0e1e3;}
.category .route_item:first-child{border-top:none;}
.category .route_button{display:table;width:100%;font-size:14px;line-height: 20px;text-align:left;padding-top: 8px;padding-bottom: 8px;word-break: keep-all;}
.category .route_load{display:table-cell;width: 90px;color:#363c5a;font-weight:300;}
.category .route_text{display:table-cell;width: calc(100% - 100px);color:#636363;padding-left: 10px;padding-right: 5px;}
.category .linepath{display:none;}

.category .route_item.active{background-color:#f4f5f9;}
@media all and (min-width:1001px){
    .category .category_content{display:block !important; opacity:1 !important;}
}
@media all and (max-width:1000px){
    .category .route{padding:0 10px 0 12px;}
    .category .route_button{font-size:13px;}
    .category .route_load{width:85px;}
    .category .route_text{width:calc(100% - 85px);}
}

/* 푸터 */
#footer{position:absolute; left:0; bottom:27px; width:285px;}
#footer .footer_info{color:#fff; letter-spacing:-0.035em; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.25); text-align:center;}
#footer address{margin-bottom:6px; font-size:14px; line-height:25px;}
#footer .copyright{font-size:12px; line-height:14px;}
@media all and (max-width:1000px){
    #footer{position:fixed; bottom:0; z-index:15; width:100%; padding:21px 3% 16px; background-color:#535975;}
}

/* 지도영역 */
#map{float:right; position:relative; width:calc(100% - 285px); height:100vh;}
@media all and (max-width:1000px){
    #map{float:none; width:auto; height:calc(100vh - 166px);}
}

/* 지도 컨트롤 */
.map_control .drag_switch{position:absolute; top:71px; right:41px; z-index:10; height:50px; padding:13px 15px 12px 19px; border-radius:35px; box-shadow:2px 2px 5px 0 rgba(0, 0, 0, 0.2); background-color:#fff;}
.map_control .switch_box{position:relative; padding-right:71px;}
.map_control .switcher{position:absolute; top:6px; right:6px;}
.map_control #switcher_label{color:#666; font-size:14px; line-height:25px;}
.map_control #switcher_label:before{display:block; position:absolute; top:0; right:0; width:38px; height:23px; padding:0 10px; border-radius:35px; border:1px solid #91949e; background-color:#e0e1e3; color:#5f6a89; font-size:12px; line-height:22px; text-align:right; content:'OFF'; transition:0.2s;}
.map_control #switcher_label:after{display:block; position:absolute; top:0; right:35px; width:23px; height:23px; border:1px solid #91949e; border-radius:50%; background-color:#fff; transition:0.2s;}
.map_control .switcher:checked + #switcher_label:before{border-color:#111d68; background-color:#111d68; color:#fff; text-align:left; content:'ON';}
.map_control .switcher:checked + #switcher_label:after{right:0; border-color:#91949e;}

.map_control .zoom_box{position:absolute; top:140px; right:41px; z-index:10; padding-right:5px;}
.map_control .zoom_box button{display:block; position:relative; width:36px; height:36px; margin-left:auto; margin-bottom:9px; border-radius:50%; box-shadow:2px 2px 5px 0 rgba(0, 0, 0, 0.2); background-color:#fff; font-size:0;}
.map_control .zoom_box button:before{display:block; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:url('/site/www/images/bicycle/mapzoom_sprite.png') no-repeat;}
.map_control .zoom_box button.zoom_in:before{width:12px; height:11px; background-size:150% 463.63%; background-position:left 0;}
.map_control .zoom_box button.zoom_out:before{width:12px; height:3px; background-position:left 43.75%; background-size:150% 1700%;}
.map_control .zoom_box button.location:before{left:1px; width:18px; height:17px; background-position:left 100%; background-size:100% 300%;}
@media all and (max-width:1000px){
    .map_control .drag_switch{top:33px; right:20px; width:60px; height:25px; padding:0; background-color:transparent; box-shadow:none;}
    .map_control .switch_box{padding-right:0;}
    .map_control #switcher_label{display:block; color:transparent; font-size:0;}
    .map_control .zoom_box{top:76px; right:20px; padding-right:2px;}
    .map_control .zoom_box button{width:30px; height:30px; margin-bottom:6px;}
}

/* 팝업 */
.overlay{position: absolute;bottom: 65px;left: calc(50% - 200px);z-index:9;width: 400px;border-radius:5px;background-color:#fff;box-shadow:4px 3px 10px 0 rgba(0, 0, 0, 0.2);}
.overlay.n2{top:50%; left:calc(50% + 142px);}
.overlay:before{display:block; position:absolute; z-index:-1; top:calc(100% - 7px); left:50%; width:14px; height:14px; margin-left:-7px; box-shadow:4px 3px 10px 0 rgba(0, 0, 0, 0.2); background-color:#fff; transform:rotate(45deg);}
.overlay .overlay_title{padding: 13px 32px 11px;border-radius:5px 5px 0 0;background-color:#535975;color:#fff;font-size:18px;font-weight:500;line-height:26px;text-align:center; word-break: keep-all;}
.overlay .overlay_content{position:relative; padding:20px; border-radius:0 0 5px 5px; background-color:#fff;}
.overlay .overlay_inner{padding:12px 15px 12px 30px; background-color:#f4f5f9;}
.overlay .overlay_inner .bu{margin:0;}
.overlay .overlay_inner .dl > li .title{width:80px;}
.overlay .overlay_inner .bu > li{position:relative;padding-left: 18px;}
.overlay .overlay_inner .bu > li:before{content:'';display:block;position:absolute;left:0;top: 7px;width:6px;height:6px;border-radius:50%;border-width:3px;border-style:solid;border-color:#7a7d96;}
.overlay .overlay_btn_wrap{margin-top:20px; text-align:center; font-size:0;}
.overlay .overlay_btn_wrap .btn{width:80px; padding:5px; border-radius:5px; color:#363c5a;}
.overlay .overlay_btn_wrap .btn +.btn{margin-left:10px;}
.overlay .overlay_btn_wrap .btn:hover{border-color:#7a7d96; background-color:#7a7d96; color:#fff; box-shadow:none;}
.overlay .overlay_close{position:absolute; top:13px; right:15px; width:23px; height:23px; background:url('/site/www/images/bicycle/overlay_close.png') no-repeat center center; font-size:0;}

/* 노선정보 팝업 */
.overlay.n2:before{display:none;}
.overlay.n2 .overlay_inner{background-color:#fff;}

.overlay.active{opacity:1; visibility:inherit;}
@media all and (max-width:1000px){
    .overlay{left: calc(50% - 160px) !important;width:320px;}
    .overlay .overlay_title{font-size:16px;}
    .overlay .overlay_inner .dl > li .title{display:table-cell;width: 70px;}
    .overlay.n2 .overlay_inner .dl > li .title{width:80px;}
    .overlay .overlay_inner .dl > li .text{display:table-cell;}
}