@charset "utf-8";
/* CSS Document */

/**********************
Publishing : Lee Bit-na
Beginning : 2016-01-19
Final : 
***********************/

@media screen and (max-width:1400px) {
	
	.w_wrap {width: auto; margin: 0 50px}
	.header_wrap .menu li {margin: 0 15px}
	
	/*** 메인 ***/
	.main_navi {right: -15px}

}

@media screen and (max-width:1280px) {
	
	/*** 메인 ***/
	.main_navi {width: 400px}
	.main_navi .a_link strong {font-size: 20px}
	.main_navi .emp .a_link strong {font-size: 24px}
	.main_navi .a_link {height:80px}
	.main_navi .a_link .ico {width: 40px; height: 40px}
	.main_navi .msg {font-size: 14px; margin-bottom: 20px}
	
	.visual_wrap {height: 680px}
	.visual_wrap .title h1 {font-size: 50px; padding-left: 75px}
	.visual_wrap .title h1:before {width: 70px; height: 70px; margin-top: -43px;}
	.global_search .search_box strong {font-size: 20px}
	.main_content {padding-top: 130px}
	.main_content.direct {width: auto; margin: 0 40px}
	
	.notice_list .row strong {}
	.notice_list .row a {height: 50px}
	
	.weather_info .temperature {font-size: 50px}
	.weather_info .location p {font-size: 12px; margin-top: 5px}
	.weather_info .icon {width: 70px}
	.dust_info .head strong {font-size: 20px}
	
	.direct_block .txt {font-size: 16px}
	.direct_block .pic {width: 50%; top: -60px;}
	
	.main_notice .head h2,
	.direct_block .head h2 {font-size: 28px}
	
	.main_navi.web {display: block}
	.main_navi.mobile {display: none}
	
}

@media screen and (min-width:1040px) {
	.main_navi.web{display: block}
	.main_navi.mobile {display: none}
	
	/*** 노선검색 ***/
	.result_wrap .btn_map_pop, .result_wrap .btn_info, .result_wrap .list_title .run, .result_route .point {display: none}
	
}

@media screen and (max-width:1040px) { 
	.w_wrap {width: auto; margin: 0 50px}
	
	.header_wrap {display: block}
	.header_wrap .logo {position: absolute; left: 50%; top:50%; margin: -29px 0 0 -160px}
	.header_wrap .menu {display: none}
	.header_wrap .btn_login {position: absolute; right: 30px; top:50%;  margin-top: -21px}
	.btn_menu {display: flex}
	.header_wrap .spot {display: none}
	
	/*** 메인 ***/
	.visual_wrap:before {content: ""; background: rgba(0,0,0,.1); position: absolute; left: 0; top:0; bottom: 0; width: 100%}
	.visual_wrap {margin-bottom: 150px}
	.visual_wrap .title {padding-top: 200px; text-align: center}
	.visual_wrap .title h1 {display: inline-block}
	.main_navi {width: auto; position: relative; right: auto; top:auto}
	.main_navi .emp {padding: 0 40px 20px}
	
	.global_search {margin-bottom: 50px}
	.global_search .input_box {justify-content: center}
	.global_search .search_box {width: 100%}
	
	.main_content {padding: 0; margin: 0}
	.main_notice {width: 100%; margin: 0 0 100px}
	.main_weather {display: none}
	
	.direct_block {padding: 60px 30px 0}
	.direct_block .pic {width: 130px; top:-50px}
	.direct_block .txt {font-size: 14px; word-break: keep-all}
	.direct_block .txt br {display: none;}
	
	
	/**/
	.main_navi.web{display: none}
	.main_navi.mobile{display: block}
	
	.main_navi {padding:10px 30px; border-radius: 20px}
	.weather_info {padding: 0; border: 0; width: 40%; flex-direction: column; height: auto}
	.temperature_info {display: flex; align-items: center; justify-content: center; width: 100%}
	.weather_info .temperature {width: auto; font-size: 40px}
	.weather_info .icon {width: 50px; height: 50px}
	.weather_info .location {text-align: center}
	.main_navi .row {display: flex; height: 90px; padding: 20px 0}
	.main_navi .row:first-child {border-bottom: 1px solid #eee;}
	.main_navi .a_link {flex-direction: column; border: 0; width: 30%; height: 90px; padding: 0}
	.main_navi .a_link strong {font-size: 16px}
	.main_navi .a_link .ico {margin: 0 0 5px; width: 60px; height: 60px}
	.main_navi .a_link:before {display: none}
	.dust_info {width:40%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0}
	.dust_step {width: 160px; height: 58px; align-items: flex-end; justify-content: center;}
	.dust_step strong {font-size: 14px;}
	.dust_step.step01 {background: url('../images/etc/dust_step01.png') no-repeat center center; background-size:auto 100%}
	.dust_step.step02 {background: url('../images/etc/dust_step02.png') no-repeat center center; background-size:auto 100%}
	.dust_step.step03 {background: url('../images/etc/dust_step03.png') no-repeat center center; background-size:auto 100%}
	.dust_step.step04 {background: url('../images/etc/dust_step04.png') no-repeat center center; background-size:auto 100%}
	
	.main_notice .head h2, .direct_block .head h2 {font-size: 24px}
	
	.main_content.direct {padding: 50px 0 80px}
	.notice_list .row a {padding-right: 110px}
	.notice_list .row .date {position: absolute; right: 0; top:50%; margin-top: -9px; text-align: right}
	
	/*서브페이지*/
	body, input, textarea, select, button, table {font-size: 16px}
	.sub_content {padding: 80px 0}
	.container {margin-top: 100px}
	.sub_visual .w_wrap {margin: 0}
	.sub_visual .title {height: 160px}
	.sub_visual .title h2 {font-size: 35px}
	#sub_nav > ul > li.sub_nav_home a {height: 55px;}
	#sub_nav > ul > li.sub_nav_dp1.dp1_1 a, #sub_nav > ul > li.sub_nav_dp1.dp1_2 a {width: calc(50vw - 36px); height: 55px; line-height: 55px}
	#sub_nav > ul > li.sub_nav_home a {border-left: none}
	#sub_nav > ul > li.sub_nav_dp1.dp1_2 {border-right: none}
	.tab_style {flex-wrap: wrap; border-bottom: 1px solid #ddd}
	.tab_style {margin-bottom: 70px}
	.tab_style li {flex: 1 1 40%}
	.tab_style li:nth-child(2) {border-right: 1px solid #ddd;}
	.tab_style li a {width : auto; height: 50px; line-height: 50px; font-size: 15px; border-bottom: 0}
	.page_head {margin-bottom: 40px}
	.page_head h3 {font-size: 25px; margin-bottom: 10px}
	.mg_top_100 {margin-top: 70px;}
	.block_title {margin-bottom: 20px;}
	.block_title .title span {font-size: 20px}
	.block_title .title span.bus {padding-left: 30px; background-size: 20px}
	.busterminal_map {height: 330px; margin-bottom: 20px}
	.tbl_hoz th {font-size: 16px; padding: 15px;}
	.tbl_hoz td {font-size: 14px; padding: 15px;}
	.search_box {padding-right: 0; margin-bottom: 100px}
	.search_box .sorting_check {width: 100%; height: 100px; margin: 0 6px 0 0; box-sizing: border-box}
	.search_box .input_box li {padding: 2px 0; flex: 1 1 40%; justify-content: flex-start}
	.search_box.two_row .btn_search {top: 260px; width: 100%; height: 46px}
	.search_box .btn_search {top: 154px; width: 100%; height: 46px}
	.search_box .input_box {flex-wrap: wrap; flex: 1 1 0}
	.sorting_row {height: auto}
	.sorting_row select {height: 45px;}
	.in_select {margin: 0}
	.sorting_row {flex-direction: column}
	.sorting_row.three .in_select {width: 100%; margin-bottom: 6px; box-sizing: border-box;}
	.transit_timeBox .position {flex-direction: column; align-items: flex-start}
	.terminal_time_list .transit_timeBox .position strong, .terminal_time_list .transit_timeBox .position .time, 
	.train_time_list .transit_timeBox .position strong, .train_time_list .transit_timeBox .position .time {font-size: 15px; text-align: left; width: auto}
	.transit_timeBox {padding: 15px 30px}
	.transit_timeBox .position .move {transform: rotate(90deg); margin: 0 20px}
	.train_ico.normal, .train_ico.new, .train_ico.sharon {font-size: 14px;}
	
	.bis_process ul {margin: 0}
	.bis_process .stepBox {margin: 0; padding: 20px 0}
	.bis_process .row {width: 100%}
	.bis_process .stepBox dt {font-size: 18px;}
	.bis_process .stepBox dd {font-size: 14px; color: #555}
	
	.accordion-header h2 {font-size: 1.2rem}
	
	/*노선검색*/
	.side_panel_wrap {position: static; width: 100vw; box-shadow: none}
	.result_route {position: relative; padding: 10px 15px 30px}
	.result_route .point {color: #aaa; font-size: 14px; font-weight: 400; position: absolute; top: 40px;}
	.map_popup .head .btn_refresh, .result_wrap .btn_refresh {width: 45px; height: 45px; background: url('../images/etc/bbs_refresh_wh.svg') no-repeat center center #333; background-size: 21px; border-radius: 30px; position: fixed; right: 15px; bottom: 15px; z-index: 10; border: 1px solid #333}
	.result_wrap .btn_map_pop {width: 45px; height: 45px; background: url('../images/etc/bbs_map_pop.svg') no-repeat center 40% #888; background-size: 30px; border-radius: 40px; position: fixed; right: 15px; bottom: 70px; text-indent: -9999px; z-index: 10; border: 1px solid #888}
	.result_wrap .btn_info {width: 45px; height: 45px; background: url('../images/btn/btn_info.svg') no-repeat center center #fff; background-size: 65px; border-radius: 40px; position: fixed; right: 15px; bottom: 125px; text-indent: -9999px; z-index: 10; border: 1px solid #ddd}
	.result_wrap .list_title .run em {font-weight: 700; color: #ff6000}
	.realtime_list .row {justify-content: flex-start;}
	.realtime_list .row .num {margin-left: 10px}
	.routeList_wrap .route_list.station .row {justify-content: flex-start}
	
	/*팝업*/
	.busmap_wrap {padding-top: 100px; height: calc(100% - 150px)}
	.map_popup .content.map {width: 100vw; height: calc(100vh - 120px); background-color: #f5f5f5; padding: 0}
	.map_popup .content {padding: 5px 15px; height: auto}
	.map_popup {width: 100vw;  height: calc(100vh - 60px); position: static; margin: 0; background-color: #fff; border: 0;}
	.map_popup:before {display: none}
	.map_popup .head {padding: 0 15px; font-size: 17px}
	.map_popup .head .route {padding-left: 30px; background-size: 24px auto; background-position: left center}
	.map_popup .head .station {padding-left: 22px}
	.map_popup .s_title {padding: 0 15px;}
	.map_popup .result_route {padding:25px 15px 30px}
	.map_popup .result_route .point {top: 55px}
	.map_popup .result_wrap .list_title {background: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd}
	.map_popup .head .route .sub {font-size: 12px}
	
	
}

@media screen and (min-width:768px) {
	.display_w {display: block}
	.display_m {display: none}
	.visible_w {opacity: 1}
	.visible_m {opacity: 0}
	
	.main_container.web {display: block}
	.main_container.mobile {display: none}
}

@media screen and (max-width:768px) { 
	.display_w {display: none}
	.display_m {display: block}
	.visible_w {opacity: 1}
	.visible_m {opacity: 0}
	
	.main_container.web {display: none}
	.main_container.mobile {display: block}
	
	.header_wrap {height: 60px}
	.header_wrap .logo {width: 244px; height: 50px; background: url(../images/logo_bk.svg) no-repeat center center; background-size: 100%; margin: -29px 0 0 -122px;}
	
	.main_content.direct {display: block; overflow: hidden; margin: 0 50px}
	.direct_block {width: 100%; height:180px; padding: 40px 20px 0; margin: 0; background: #ff7522; color: #fff; background: linear-gradient(to right, #ff6100, #ffcc00);}
	.direct_block .head {border: 0; position: relative; border-color: #fff}
	.direct_block .head h2 {color: #fff}
	.direct_block .txt {color: #fff}
	.direct_block .btn_more {display: none}
	.direct_block .head:before {content: ""; height: 1px; background: #fff; width: 20px; position: absolute; left: 0; bottom: 0}
	.direct_block .pic {width: 150px; top:-30px; right: -15px;}
	.direct_block .pic img {width: 80%}
	.main_notice .head {height: auto; align-items: center; justify-content: center; border: 0; margin-bottom: 20px}
	.main_notice .btn_more {display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; height: 45px; border-radius: 5px; font-size: 14px; margin-top: 30px; color: #777}
	
	.accordion-header h2 {font-size: 16px;}
	
	.busmap_wrap {padding-top: 60px; font-size: 14px; height: calc(100% - 110px)}

	
}
@media screen and (max-width:500px) {
	body, input, textarea, select, button, table {font-size: 14px}
	.btn_menu {width: 25px; left: 15px}
	.btn_menu i {width: 25px}
	.header_wrap .logo {width: 220px; height: 55px; background: url(../images/logo_bk.svg) no-repeat center center; background-size: 100%; margin: -29px 0 0 -110px;}
	
	.w_wrap {width: auto; margin: 0 15px}
	
	.visual_wrap {margin-bottom: 140px; height: 610px; background: url(../images/visual_m.jpg) no-repeat center center; background-size: cover}
	.visual_wrap:before {display: none}
	.visual_wrap .title {padding-top: 140px; margin-bottom: 40px}
	.visual_wrap .title h1 {padding: 120px 0 0 0; font-size: 38px}
	.visual_wrap .title h1:before {left: 50%; top:0; width: 160px; height: 160px; margin-left: -80px; background: url('../images/main/ico_bus.png') no-repeat center center; background-size: 100% auto;}
	
	.global_search .search_box {height: 60px; border-radius: 5px; padding:0 60px 0 15px; box-shadow: 0 5px 10px 10px rgb(0 0 0 / 10%);}
	.global_search .search_box strong:before {width: 18px}
	.global_search .search_box strong {padding-left: 25px; font-size: 16px; width: 150px}
	.global_search .search_box .btn {width: 60px}
	.global_search .search_box input {padding: 0 10px}
	
	.global_search .input_box label {font-size: 18px}
	.global_search .input_box input[type='radio'],
	.global_search .input_box input[type='radio']:checked  {width: 22px; height: 22px}
	
	.main_navi {padding: 0 20px 10px}
	.main_navi .row {height: 75px}
	.main_navi .a_link .ico {width: 45px; height: 45px}
	.main_navi .a_link strong {font-size: 14px}
	.weather_info .temperature {font-size: 30px;}
	.weather_info .icon {width: 40px; height: 40px}
	.weather_info .location {font-size: 12px}
	.weather_info .location strong {font-size: 14px}
	.main_navi .a_link {height: 91px; padding-top: 9px}
	.dust_info .head span {font-size: 12px}
	
	
	.main_content.direct {margin: 0 15px; padding: 100px 0 70px}
	.main_notice {margin-bottom: 70px}
	.main_notice .head h2 {font-size: 20px; letter-spacing: 0}
	.notice_list .row a {padding-right: 90px; height: 40px}
	.notice_list .row strong {font-size: 14px;}
	.notice_list .row .date {font-size: 14px; margin-top: -8px}
	.notice_list .row a:before {width: 4px; height: 4px; margin-top: -2px; left: 5px}
	.main_notice .btn_more {margin: 30px 60px 0}
	
	
	.relation_wrap {background: #f5f5f5; height: auto}
	.relation_wrap .main_banner {height: auto}
	.relation_wrap .w_wrap {margin: 0}
	.slider_banner .slider li {height: 35px; margin-right: 30px}
	.slider_banner .slider li a img {height: 100%; width: auto}
	.main_banner {display: block; }
	.slider_banner {position: relative; left: auto; right: auto; top:auto; background: #fff; clear:both; padding: 20px 40px 20px}
	.main_banner h2 {margin: 0; text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 20px}
	.play_btn ul {}
	.play_btn ul li {float: none; margin: 0}
	.play_btn ul li.btnAuto {display: none}
	.play_btn ul li.btnPrev {position: absolute; left: 15px; top:50%; z-index: 1; margin-top: 15px}
	.play_btn ul li.btnNext {position: absolute; right: 15px; top:50%; z-index: 1; margin-top: 15px}
	.slider_banner .slider {overflow: hidden}
	
	.footer_top .documentation {display: block}
	.footer_top .documentation a {display: inline-block; font-size: 14px; margin: 0; padding: 5px;  word-break: keep-all; font-weight: 700}
	.footer_top .documentation a:before {display: none}
	footer .address,
	footer .address p {font-size: 12px}
	
	.main_container.mobile .slick-slide {padding: 30px 10px 0}
	.main_notice .head h2, .direct_block .head h2 {font-size: 20px}
	.direct_block .head h2 {padding-bottom: 15px}
	.direct_block .txt {padding-top: 15px}
	
	
	/*서브페이지*/
	.container {margin-top: 60px}
	.sub_content {padding: 70px 0}
	.sub_visual {height: 160px}
	.sub_visual .title {height: 115px}
	.sub_visual .title h2 {font-size: 26px}
	
	#sub_nav > ul > li.sub_nav_home a {width: 50px; height: 50px}
	#sub_nav > ul > li.sub_nav_dp1 > a {background-size: 11px}
	#sub_nav > ul > li.sub_nav_dp1.dp1_1 a, #sub_nav > ul > li.sub_nav_dp1.dp1_2 a {width: calc(50vw - 26px); height: 50px; line-height: 50px;}
	.tab_style {margin-bottom: 60px;}
	.tab_style li a {height: 45px; line-height: 45px}
	.busterminal_map {height: 200px}
	
	.bus_grade {margin-right: 0;}
	.transit_timeBox {padding: 20px; flex-direction: column; align-items: flex-start; height: auto}
	.transit_timeBox .price {text-align: right; top: 28px; right: 20px;}
	.transit_timeBox .etc_data {top: 28px; right: 10px;}
	.transit_timeBox .etc_data li {padding: 0 10px}
	
	.transit_timeBox .bus_number {font-size: 20px}
	.transit_timeBox .btn_wrap {right: 20px; padding-left: 10px; font-size: 14px;}
	.transit_timeBox .btn_wrap .btn_timetable {margin-left: 10px;}
	.transit_timeBox .position .start, .transit_timeBox .position .arrival {width: 100%; font-size: 15px}
	.btn_route_map {height: 20px; line-height: 20px;}
	.btn_timetable {height: 20px; line-height: 20px;}
	.transit_timeBox .position {margin-top: 22px;}
	
	.pop_style {width: 100vw}
	.tbl_price td {padding: 20px 0}
	.tbl_price th {padding: 15px;}
	.in_price {margin: 0 10px;}
	.in_price li {display: block; padding-left: 70px}
	.in_price li p {margin-right: 0; margin-bottom: 5px;}
	.in_price li p span {width: auto}
	.in_price li p em {margin-right: 5px}
	.txt_ref {text-align: center}
	.bullet_list li {line-height: 1.3em}
	
	.page_head p {word-break: keep-all}
	
	.noticeBox {height: 80px}
	.noticeBox .date {width: 80px;}
	.noticeBox .date b {font-size: 23px;}
	.noticeBox .title {font-size: 16px; width: 55vw}
	.view_wrap .head strong {font-size: 23px; line-height: 1.3em}
	
	.in_price.full {justify-content: flex-start}
	
	.tbl_hoz th {width: 35%; word-break: keep-all}
	.tbl_hoz td {line-height: 1.2em}
	.tbl_hoz .dot {width: 0; display: block;}
	
	/*노선검색*/
	.realtime_wrap {height: calc(100% - 300px)}
	.route_title .route {padding-left:25px;}
	.route_title .btn_move {}
	.tabMenu {margin-bottom: 15px}
	.tabMenu ul li a {font-size: 14px;}
	.tabMenu ul li.search_ico01 a span, .tabMenu ul li.search_ico02 a span, .tabMenu ul li.search_ico03 a span {background-size: 18px;}
	.tabMenu ul li.search_ico01.on a span, .tabMenu ul li.search_ico02.on a span, .tabMenu ul li.search_ico03.on a span {background-size: 18px;}
	.side_panel_wrap .inner {padding: 15px}
/* 	.routeList_wrap .row .name {width: 100px} */
	media screen and (max-width: 500px)
	.routeList_wrap .row .name {
	    width: 200px;
	}
	.searchKeyword .s_box input {font-size: 15px}
	.route_title .route span {font-size: 13px}
/*
	.route_time .block_low {padding: 0 12px 0 48px; height: 35px}
	.route_time .block_low:before {height: 35px}
	.route_time .block_low span {font-size: 11px}
	.route_time .block_low .txt_label {padding: 5px 8px}
*/	
	/***팝업***/
	.searchKeyword.station select {font-size: 14px}
	.searchKeyword .s_box input {font-size: 14px}
	
	
	/*********220224 추가*********/
	
	/* 길찾기 */
	.side_panel_wrap.roadsearch .inner {position: relative; background-color: #fff; z-index: 1}
	.side_panel_wrap.roadsearch .frame {margin: -46px 0 0 -2px;}
	
	/* 팝업 수정 */
	.map_popup .st_wrap {padding: 25px 0}
	.map_popup .info_title {margin-left: 15px;}
	.map_popup .station_bus_list li p {flex: 2 1 0}
	.map_popup .st_wrap {height: 459px;}
	
	/* 노선 검색 버튼 */
	.serach_box {width: 100%; height: 45px; margin: -10px 0 40px}
	.serach_box .btn_search {width: 75px; background-size: 23px auto;}

	
	
}