@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*reset*/
*{font-family: 'Roboto', sans-serif;letter-spacing: -1px;background-repeat:no-repeat;background-position:center;}
html,body {width: 100%; height: auto; border: none;}
body,div,p,span,table,th,td,ul,li,ol,dl,dt,dd,form,fieldset,input,textarea,select {margin: 0; padding: 0;}
body {line-height: 1;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; font-weight: normal;}
span{display:inline-block; width:auto;}
ol,ul,li {list-style: none;}
fieldset {border: 0;}
caption,legend {width: 0;height: 0;display: none;line-height: 0;}
/*hr {display: none;}*/
img {border: 0;font-size: 0;line-height: 0;vertical-align: top;}
ul {list-style: none;}
table{border-collapse:collapse;}
/* 링크 */
a:link {color: #fff; text-decoration: none;}
a:visited {color: #fff; text-decoration: none;}
a:active {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
/*[추가내용] ios용*/
select{
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
}

#Progress_Loading{position: absolute;top: 50%;left: 50%;transform: translateX(-50%);}

/*style*/
body {
	width:100%;
	height:100%;
	background: #1B3359;/* url(../../images/mobile/com/layout-bg.png) no-repeat; */
	background-size:cover;
}
#layout-wrapper {
	position: fixed;/* relative; *//*211103추가*/
	top: 0;/*211103추가*/
	left: 0;/*211103추가*/
	align-items: flex-start;
	width: 100%;
	height: 100%;/*auto;*//*211103추가*/
	overflow-x: hidden;
}

.swiper {/*▶▶▶211013추가*/
	height: auto;
}
.swiper-wrapper{/*▶▶▶211013추가*/
	height:100%;
}
.swiper-slide {/*▶▶▶211013추가*/
	width:100%;
	height: auto;
}
/*★★★[2차]바뀜 - "nav#vnavbar-m,footer.col-12 {	width: 100%;}" 내용 삭제*/

#contents{/*★★★[2차]바뀜 - 기존에  바로 아래 내용이 하나 더 있어서 2개 였던 것  합침 & 내용변경*/
	width: 100%;
	min-width: 100%;
	max-width: 1080px;
	height:auto;/*●●●211010바뀜*/
	max-height:100vh;/*●●●211010바뀜*/
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#cocff03,
#cocff04 {
	margin-top: 15px;
}

/*Common*/
input {
	outline: none;
	border: none;
	background: none;
	color: #FFFFFF;
}
input::placeholder {
	color: #8D99AC;
}
.active > a {
	/*color: rgba(249, 221, 0, 1) !important;
	font-weight: bold;*/
}
.vform-minput {
	border: none;
	background: none;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}
.roundBtn {
	border-radius: 50px;
	background: #1B3359;
	color: #DDDDDD;
	width: auto;
	cursor: pointer;
	text-align:center;
	padding:10px 15px;
}
.roundBtn:hover,
.roundBtn:active{
	background:#ECD355;
	color:#000 !important;
	font-weight:bold;
}
.vorange {
	background: #FF9933 ;
}
.vgreen {
	background: #03B404 ;
}
.vblue {
	background: #1F7AFF ;
}
.vcolor-yellow {
	color: #ECD355;
}
.vfont-weight-bold {
	font-weight: 600 ;
}
/*★★★[2차]바뀜 - vtext & 이미지크기 부분 여기부터*/
.vtext-10 {
	font-size: 10px;
}
.vtext-12 {
	font-size: 12px;
}
.vtext-13 {
	font-size: 13px;
}
.vtext-14 {
	font-size: 14px;
}
.vtext-15,
.vtext-15b {
	font-size: 15px;
}
.vtext-18,
.vtext-18b {
	font-size: 18px;
}
.vtext-20,
.vtext-20b{
	font-size: 20px;
}
.vtext-22,
.vtext-22b{
	font-size: 22px;
}
.vtext-25,
.vtext-25b{
	font-size: 25px;
}
.vtext-28,
.vtext-28b{
	font-size: 28px;
}
.vtext-30,
.vtext-30b{
	font-size: 30px;
}
.vtext-35,
.vtext-35b{
	font-size: 35px;
}
.vtext-40,
.vtext-40b{
	font-size: 40px;
}
.vtext-90,
.vtext-90b{
	font-size: 90px;	
}
.vtext-10,
.vtext-12,
.vtext-13,
.vtext-15,
.vtext-15b,
.vtext-18,
.vtext-18b,
.vtext-20,
.vtext-20b,
.vtext-22,
.vtext-22b,
.vtext-25,
.vtext-25b,
.vtext-28,
.vtext-28b,
.vtext-30,
.vtext-30b,
.vtext-40,
.vtext-40b,
.vtext-35,
.vtext-35b,
.vtext-90,
.vtext-90b{
	line-height:1.5em;
}
.vtext-15b,
.vtext-18b,
.vtext-20b,
.vtext-22b,
.vtext-25b,
.vtext-28b,
.vtext-30b,
.vtext-40b,
.vtext-35b,
.vtext-90b{
	font-weight: bold;
}
.vtext-icon-sm {
	font-size: 1.25rem;
}
.iconImages {
	width: 40px;
	height:40px;	
}
.iconImages-sm {
	width: 20px;
	height: 20px;	
}
/*★★★[2차]바뀜 - vtext & 이미지크기 부분 여기까지*/




/*content*/
	
.vbody {
	margin: 0 auto;
	width:100%;
	height:80vh;/*●●●211010바뀜*/
	max-height:80vh;/*●●●211010추가*/
	color: #FFFFFF;
	position:relative;
}
.vwiTitle{
	display:flex;
	align-items: center;
	flex-basis: auto;
	flex-grow: 1;
	justify-content: space-between;
	padding-top:1.5vh;
	padding-bottom:1.5vh;
	height:8vh;
}
.vwiTitle div.title_box,
.vwiTitle div.title_retext{
	display:flex;
	align-items: center;
}
.vwiBody {
	padding:2.5vh;
	margin:0 auto;
	background: rgba(27, 51, 89, 0.7);
	border-radius: 10px;
}
#fd-container,
#vweather-cont-top,
#vweather-cont-top-HowToBehave,
#MgContBtn,
#MgContCurrentAll,
#MgContCurrentDt,
.vwiContent .vwiTitle{/*★★★[2차]바뀜 - 적용할 객체 추가*/
	width:90%;
	max-width:90%;
	margin:0 auto;
}

/*★★★[2차]바뀜 - ".vwiContent{	padding:30px 0;}" 내용 삭제*/ 

/*★★★[2차]바뀜 - ".vwiTitle div.title_box img,.title_retext .vtext-refresh{	margin-right:15px;}" 내용 삭제*/ 

.vwiTitle div.title_box span,
.title_retext .vtext-refresh{/*★★★[2차]바뀜 - 적용할 객체 추가 & 내용변경*/
	margin-left:10px;
}
.title_retext{
	display:flex;
	
}

.title_retext .refreshBtn {/*★★★[2차]바뀜 - width & height값 변경 */
	background: rgba(27, 51, 89, 0.7);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	width: 40px;
	height:40px;
	cursor:pointer;
}
.title_retext .refreshBtn:hover,
.title_retext .refreshBtn:active{
	background: rgba(27, 51, 89, 1);
}

.title_retext .vtext-refresh {
	width: auto;
	text-align:right;
	margin-right:10px;
	line-height:1em;
}
.title_retext .vtext-refresh div{
	letter-spacing: 0;
}
.vtext-refresh div:first-child{
	margin-bottom:7px;
}
.vbtn-active {
	background: #ECD355;
	color: #000000;
	font-weight: bold;
}
.HowToBehave{
	position:relative;
	width:98%;
	margin-left:35px;
	
	margin-top:10px;
	margin-bottom:10px;
	letter-spacing: -1px;/*●●●211010변경*/
}
.HowToBehave:first-child{
	margin-top:0;
}
.HowToBehave:last-child{
	margin-bottom:0;
}
.HowToBehave::before{
	content:' ';
	display:inline-block;
	width:25px;
	height:25px;
	position:absolute;
	top:0;
	left:-35px;
	margin-right:10px;
	background:url(../../images/mobile/com/find-dust-text-icon.png) left top no-repeat;
	background-size:25px 25px;
}
.ct-pager-box{
	display:flex;
	justify-content: center;
	position:absolute;
	left:0;
	right:0;
	bottom:2.5vh;
	width:83vw;
	height:1vh;
	margin:2vh auto 0;
}
.ct-pager{
	display:inline-block;
	border:1px solid rgba(255,255,255,0.8);
	border-radius:50%;
	width:10px;
	height:10px;
	margin:0 2px;
}
.ct-pager.active{
	background:rgba(255,255,255,0.8);
}
#fd-container > div{
	position:relative;
}



/*Navigation*/
#vnavbar-m {
	background: rgba(0, 0, 0, 0.2) !important;
	max-height:6vh;
	height: 100px;
}
/*★★★[2차]바뀜 - 네비게이션 바뀐것 -여기부터*/
#vnavbar-m *{
	line-height:normal;
}
#vnavbar-m div{
	width:100%;
	margin:0 auto;
	justify-content: center;
	align-items: center;
}

#vnavbar-m ul{
	width: 100%;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
#vnavbar-m li{
	width:auto;
}
#vnavbar-m a {
	width: auto !important;
	padding:0;
	margin:0;
	color: rgba(255,255,255,0.5);
}
#vnavbar-m a.active {
	color: rgba(255,255,255,1);
}
/*
a.nav-link {
	display: -webkit-box; display: -ms-flexbox; display: box; margin-top:1px; max-height:80px; overflow:hidden; vertical-align:top;
}
*/



#vnavbar-m a span{
	/*
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;*/
}
/*★★★[2차]바뀜 -네비게이션 바뀐것 -여기까지*/
#vnavbar-m .areaToggle {
	display: flex;
	flex-direction: column;
	position: absolute;
	background: #FFFFFF ;
	padding: 0;
	margin-top:5px;
	width: auto;/* 200px; */
	height: auto;/* 120px; */
	
	color: #000000 ;
	z-index: 10;
}
.areaToggle li {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;/* 0 30px; *//*211014 추가*/
	width: 100%;
	height: 100%;
	line-height: 100px;
	font-weight: bold;/*211014 추가*/
}
.areaToggle li:first-child {
	box-sizing: border-box;
	border-bottom: 2px dashed rgba(200,200,200,0.5);
}
.areaToggle li > img {
	width: 20px;
	height: 20px;
	margin-right: 8px;/*211014 추가*/ 
}
.areaToggle li > div {
	height: auto;
}
ul#areaToggle4 {/*211014 추가*/ 
	right: 10%;
}
ul#areaToggle5 {/*211014 추가*/ 
	right: 0;
}


/*[빈화면]정보가 없거나 설정하지 않았을 경우*/
.vcircle-exclamation-mark {
	display: flex;
	flex-direction: column;
	width: 100%;
	height:95%;
	max-height:100%;
	text-align: center;
	align-items: center;
	justify-content: center;
}
.vcircle-exclamation-mark img{
	margin-bottom:15px;
}
.vcircle-exclamation-mark div{
	color: #fff;
}



/*기상정보/미세먼지*/
#vweather-cont1.swiper-slide,
#vweather-cont2.swiper-slide{/*▶▶▶211013추가*/
	padding: 0 2.5vw;
}
/*온습도 */
/*★★★[2차]바뀜  -여기부터*/
#vweather-cont-top{
	display:flex;
	flex-direction:row;
	justify-content: space-around;
	align-items: center;/*★★★211008바뀜*/
	width:90%;
	max-width:90%;
	height:16vh;
	margin:0 auto 2vh;
}
#vthermometer{
	display: flex;
	justify-content: center;
	/*width:50%;*/
}
#vthermometer .vw-cont-icontext div{
	color:#ECD355;
}
#vhumidity-meter {
	display: flex;
	flex-direction:column;
	justify-content: space-around;
	/*width:50%;*/
	height: auto;
}
#vhumidity-meter > div{/*★★★211008바뀜*/
	margin:8px 0;
}
#vhumidity-meter-c1,
#vhumidity-meter-c2{
	display: flex;
	
    justify-content: center;
    align-items: center;
}
#vhumidity-meter-c1 img,
#vhumidity-meter-c2 img{
	margin-right:7px;
}
.vhumidity-meter-conttext div{
	line-height:1.2em;
}
/*★★★[2차]바뀜  -여기까지*/
.vw-cont-icontext *{
	display:inline-block;
}
.vw-cont-ht {
	width:100%;
	margin:0 auto;
	letter-spacing: -1.5px;
}

/*온습도별 행동요령*/
#vweather-cont-top-HowToBehave{
	display:flex;
	 justify-content: center;
	align-items: center;
	line-height:0;/*★★★211008추가*/
	border-radius:30px;
	padding:0;
	height:4vh;
	margin-bottom:1vh;
}
#vweather-cont-top-HowToBehave #cocff03{
		margin:0;
}
/* #vweather-cont-top-HowToBehave span{
	height:20px;
	line-height:bottom;
} */
/*//온습도*/


/*미세먼지 content*/
#fd-container {
	position:relative;
}
#fd-container > div {
	position:relative;
}
#fd-container .vwiBody{
	padding:2vh 0;/*▶▶▶211013추가 */
	height: 49vh;
	position:relative;
	overflow:auto;
}

#vweather-cont1-top{
	display:flex;
	justify-content: space-between;
	height:16vh;
	margin-bottom: 2vh;
}
#vweather-cont1-top .fd-dust{
	width:30%;
	margin-right:3vw;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* background:#FF9933; */
	border-radius:10px;
	box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
#vweather-cont1-top .fd-dust img{
	width:50px;
	height:60px;
}
#vweather-cont1-top .fd-dust span{
	margin-top:10px;
}
#fd-progressbar {
	width: 100%;
	justify-content: center;
	position:relative;/*●●●211008추가(20:00)*/
	height: auto;
}
.pg-cont{
	height:8vh;
	margin-bottom:10px;/*●●●211008변경(20:00)*/
}
/*
.pg-cont:first-child{●●●211008삭제(20:00)
	margin-top:10px;
}
*/
.pg-cont-title{
	display:flex;
	justify-content: space-between;
	margin-bottom:5px;
}
.pg-cont-title .pg-c-num{
	display:flex;
}
.vprogress {
	background: #5F5F5F ;
	width: 100%;
	height: 25px;
	line-height:0;
}
.vverticality {
	box-sizing: border-box;
	border-right: 1px solid rgb(0,0,0);
	position: absolute;
	width: 1px;
	height: 25px;
}
.vverticality > span {
	position: absolute;
	margin:0;
	bottom:-10px;
	left: -8px;/*●●●211008변경(20:00)*/
}
.vr25 {
	left: 75%;/*●●●211008변경(20:00)*/
}
.vr50 {
	left: 50%;
}
.vr75 {
	left: 25%;/*●●●211008변경(20:00)*/
}
/*★★★[2차]바뀜 - ".vpmcion {	border-radius:50%;	width: 20px;	height: 20px;margin-right:3px;}" 내용 삭제*/


/* (앞페이지 아랫쪽)미세먼행동요령*/
#vweather-cont1-bottom{
	margin: 0;
	height:23vh;
}
#fd-std {
	width: 100%;
	height:100%;
	display:flex;
	background:#405B83;
	border-radius:10px;
	box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
#cocff01 {
	padding: 2vh;
	width:100%;/*★★★21008바뀜*/
	max-width:100%;
	align-items: center;
	position:relative;/*★★★21008추가*/
}
#HowToBehaveBasis {/*★★★21008추가*/
	position:absolute;
	right:20px;
	bottom:2vh;
	color:rgba(255,255,255,0.5);
	text-align: right;
}

/*(뒷페이지) 시간대별정보*/
#vweather-cont2{
	height:41vh;
	overflow:auto;
}
#vweather-cont2 div{
	width:100%;
	height:auto;
}
#vweather-cont2 div ul{
	height:7vh;
	width:100%;
	display:flex;
	justify-content: space-around;
	padding:10px 0;
	margin-bottom:10px;
}
#vweather-cont2 #vwc2-title-box ul{
	height:5vh;
}
#vweather-cont2 div li{
	display:flex;
	align-items: center;
	justify-content: center;
	width:25%;
}
#vwc2-title-box li img{
	width:25px;
	height:25px;
	margin-right:3px;
}
#vwc2-content-box{
	overflow:auto;
}
#vwc2-content-box ul{
	background:#405B83;
	border-radius: 10px;
	box-shadow:0 3px 8px rgba(0,0,0,0.3);
}
#vwc2-content-box .vwc2-content-hr{/*★★★211018변경&추가*/
	margin-top:3px;
	margin-bottom:10px;
	text-align:center;
}
#vwc2-content-box .vwc2-content-hr span{/*★★★211018추가*/
	display:inline-block;
	padding:5px 13px;
	border-radius:20px;
	background:rgba(0,0,0,0.2);
}
/*//기상정보/미세먼지*/



/*버스 출발지/도착지 정보*/
.vbus-search {
	background: rgba(0, 0, 0, 0.2) ;
	display:flex;
	justify-content: center;
	margin:0 auto;
}
.vbus-search .vbus-search-box{
	width:90%;
	display:flex;
	justify-content: center;
	align-items: center;
	text-align:center;
	padding:2vh 0;
}
.vbus-search .vbus-search-cont{
	width:50%;
	height:8vh;
	display:flex;
	
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
.vbus-search .vbus-search-kind {
	color: #9BB5DE;
	margin-bottom:5px;/*★★★211008바뀜*/
}
.vbus-search .vbus-search-btn {
	display:inline-block;
	width:90%;
	height:auto;
	box-sizing: border-box;
	border: 3px solid #FFFFFF;
	background: #1B3359;
	padding:0 5%;/*★★★211008바뀜*/
}
.vbus-search .vbus-search-btn:hover,
.vbus-search .vbus-search-btn :active{
	background: #0F2547;
}
.vbus-search .vbus-search-btn input {
	display:inline-block;
	width:96%;
	height:auto;
	/* color: #FFFFFF; *//*211104 삭제*/
	cursor: pointer;
	padding:5px 0;
	text-align:center;
	letter-spacing: -1px;
}

.vbus-search .vbus-search-btn input#search-s {/*211104 추가*/
	color: rgba(255,255,255,1);
}

.vbus-search .vbus-search-btn input#search-e {/*211104 추가*/
	color: rgba(255,255,255,1);
}

/*content - 버스노선 + 기상정보*/
#busInfoSimple,
#busInfoDetail,
#bustWeatherInfoBox{
	width:90%;
	height:62vh;
	display:flex;
	flex-direction: column;
	overflow:auto;
}
#busInfoDetail{
	height:62vh;
	overflow:hidden;/*★★★211018추가*/
}
#vbus-cont1 .vwiTitle,
#vbus-cont2 .vwiTitle{
	padding-top:1vh;
	padding-bottom:1vh;
	height:6vh
}
#vbus-cont1 .vwiTitle div.title_box span,
#vbus-cont2 .vwiTitle div.title_box span{
	margin-left:0;
}
/*버스노선 - 공통*/
.vbus-round {
	display:inline-block;
	text-align:center;
	border-radius: 50%;
	background: #1B3359;
	width: 50px;
	height: 50px;
	line-height: 50px;
}
.vdotted-spaced {
	width:100%;
	height:1px;
	border-top: 1px dashed rgba(200,200,200,0.5);
}
/*버스노선 - 간략&상세정보*/
.vbusInfoC-sp{
	display:flex;
	flex-direction: column;
	width:100%;
	justify-content: space-between;
}
.vbusInfoC-sp > div{
	width:100%;
}
div.bus-route-title{
	display:flex;
	justify-content: space-between;
	margin-bottom:20px;
}
div.bus-route-title > div:nth-child(1){
	display:flex;
	align-items: center;
}
div.bus-route-title > div:nth-child(1) > div.vbus-round{
	margin-right:20px;
}
div.bus-route-title > div:nth-child(2) > a{
	position:relative;
	top:10px;
}
div.bus-route-info-box{
	position:relative;
}
/*★★★211018여기부터*//*14일 추가한 내용 그룹웨어 내용에 없어서 1018내용추가*/
/*★★★211018삭제(여기 내용 삭제해주세요.)
div.bus-route-info-box::before{
	content:'';
	position:absolute;
	top:2px;
	left:25px;
	border-left:2px solid #fff;
	height:98%;
}
*/
div.bus-route-info{/*★★★211018추가*/
	height:auto;
}
/*★★★211018삭제(여기 내용 삭제해주세요.)
div.bus-route-info > div{
	padding-bottom:20px;
}
div.bus-route-info > div:last-child{
	padding-bottom:0;
}
*/
div.bus-route-info > div span,
div.bus-route-info > div p{
	display:block;
	width:60vw;
	max-width:70vw;
	min-height:20px;
	position:relative;
	left:70px;
}
div.bus-route-info > div span::before,
div.bus-route-info > div p::before{/*★★★211018추가*/
	content:'';
	position:absolute;
	top:2px;
	left:-45px;
	border-left:2px solid #fff;
	height:100%;
	z-index:0;
}

div.bus-route-info > div.bus-arrive span::before{/*★★★211018추가*/
	max-height:25px;
}


div.bus-route-info > div span::after{/*★★★211018가상요소변경*/
	content:'';
	display:flex;
	justify-content: center;
	align-items: center;
	border-radius:10px;
	font-size:15px;
	width:50px;
	height:30px;
	position:absolute;
	top:0;/*★★★211018추가*/
	left:-70px;
	z-index:1;
}

div.bus-route-info > div.bus-num span{
	line-height:1.5em;
	padding-bottom:5px;/*211018변경*/
}

div.bus-route-info > div.bus-start span::after{/*★★★211018가상요소변경*/
	content:'출발';
	background-color:#00B050;
	color:#fff;
}
div.bus-route-info > div.bus-transfer-getoff span::after{/*★★★211018가상요소변경*/
	content:'하차';
	background-color:#ffffff;
	color:#000;
}
div.bus-route-info > div.bus-transfer-geton span::after{/*★★★211018가상요소변경*/
	content:'환승';
	background-color:#ffffff;
	color:#000;
}
div.bus-route-info > div.bus-arrive span::after{/*★★★211018가상요소변경*/
	content:'도착';
	background-color:#C00000;
	color:#fff;
}
div.bus-route-info > div.bus-station span::after{/*★★★211018가상요소변경*/
	content:'●';
	font-size:13px;
	height:auto;/*★★★211018추가*/
	top:2.5px;/*★★★211018추가*/
}
div.bus-route-info > div.bus-start > p.bus-direction,
div.bus-route-info > div.bus-transfer-geton > p.bus-direction,
div.bus-route-info > div.bus-arrive > p.bus-direction{
	color:rgba(255,255,255,0.5);
}


#busInfoSimple div.bus-route-info > div span{
	padding-bottom:35px;
}

#busInfoDetail div.bus-route-info-box{/*★★★211018클래스명변경*/
	height:48vh;
	overflow-x:hidden;
}
#busInfoDetail div.bus-route-info > div span{/*★★★211018변경*/
	padding-top:2.5px;
	padding-bottom:2.5px;
}
#busInfoDetail div.bus-route-info > div.bus-station span:last-child,
#busInfoDetail div.bus-route-info > div p{/*★★★211018적용할 객체변경*/
	padding-bottom:35px;
}
div.bus-route-info > div.bus-arrive span{/*★★★211018추가*/
	padding-bottom:8px !important;
}
/*★★★211018삭제
#busInfoDetail div.bus-route-info > div:last-child{
	padding-bottom:0;
}

#busInfoDetail div.bus-route-info > div.bus-station span{
	min-height:25px;
}
*/
/*★★★211018여기까지*/




/*기상정보*/
#bustWeatherInfoBox {
	display:flex;
	flex-direction: column;
	align-content: space-between;
}
.bustWeatherInfo{
	width:100%;
	height:45%;
}
#bustWeatherInfo-Go{
	
}
#bustWeatherInfo-Arrive{
	
}
.bwi-title{
	height:auto;
}
.bwi-content-info{
	margin:1vh 0 1.5vh;
	height:17vh;
	display:flex;
	justify-content: space-between;
}
.bwi-content-info > div{
	width:24.5%;
	height:17vh;
	padding:2vh 0;
	display:flex;
	flex-direction: column;
	justify-content:space-between;
	align-items: center;
	text-align:center;
	border-radius: 10px;
	box-shadow:0 3px 8px rgba(0,0,0,0.3);
	background:#405B83;
}
.bwi-content-info > div > .c-dustinfo{
	display:flex;
	flex-direction: column;
}
.bwi-content-info > div > .c-dustinfo > span{
	line-height: 1.2em;
}
.bwi-content-info > div > b{
	height:20px;
	color:rgba(255,255,255,0.5);
}
.bwi-content-text span{
	max-width:75vw;
}



/*도보마일리지-로그인페이지*/
/*Title - 로그인 문구 + 로그아웃*/
.vtext-login span:first-child {
	line-height:1em;
	border-bottom:2px solid #fff;
}
/*login*/
#mlogout {
	text-decoration: none;
	cursor: pointer;	
}
#vsnsLoginform {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height:100%;
	text-align: center;
}
.vmlogin {
	display: flex;
	flex-direction: column;
}
.vmlogin-title {
	color: #ECD355;
	margin-bottom: 20px;
}
.vmlogin-desc {
	margin-bottom: 30px;
}
.snsForm {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 80%;
    max-width: 80%;
	height: auto;
}
.vkakao,
.vnaver,
.vgoogle,
.vapple {
	margin: 10px auto;
    width: 100%;
	height: auto;
}
.vkakao a,
.vkakao img,
.vnaver a,
.vnaver img,
.vgoogle a,
.vgoogle img,
.vapple a,
.vapple img{
	width: 350px;
	height: 70px;
	cursor: pointer;
}
.vapple > .vtext-35,
.vkakao > .vtext-35,
.vnaver > .vtext-35,
.vgoogle > .vtext-35 {
	margin-top: 25px;
}

/*도보마일리지-사용자페이지*/
/*전체구조용*/
#MgContBtn{
	height:17vh;
	margin-bottom:1vh;
	display:flex;/*★★★211008추가*/
	flex-direction: column;/*★★★211008추가*/
	justify-content: space-between;/*★★★211008추가*/
}
/*출발/도착버튼*/
#mg-TopText{
	display:flex;
	align-items: center;
	justify-content: center;
	margin-bottom:10px;/*★★★211008바뀜*/
}
#mg-TopText img{
	width:150px;
	margin-right:3%;
}
#mg-TopText div{
	width:auto;
	text-align:left;
}
#mg-TopBtn{
	display:flex;
	justify-content:center;
}
#mg-TopBtn div.vdm-btn{
	width:100%;
	display:flex;
	justify-content:center;
}
.vdm-btn div.btnRunApp{
	display:flex;
	align-items:center;
	justify-content: center;
	border-radius: 50px;
	min-width:30%;
	width:40%;
	max-width:50%;
	padding:5px 0;/*★★★211008바뀜*/
}
.vdm-btn div#btnRunAppStart{
	background: #00B050;
}
.vdm-btn div#btnRunAppStart:hover,
.vdm-btn div#btnRunAppStart:active{
	background: #008101;
}
.vdm-btn div#btnRunAppStop{
	background: #C00000;
}
.vdm-btn div#btnRunAppStop:hover,
.vdm-btn div#btnRunAppStop:active{
	background: #840000;
}
#vdm-result{
	display:flex;
	justify-content: center;
	align-items: center;
}
#vdm-result span{ 	
	padding-left:10px;
}
/* #vdm-result span > #vdmMileage{width: 100%;} *//*211014 추가*/
/*전체적립현황*/

#MgContCurrentAll{
	border-radius: 10px;
	margin-bottom:1vh;
}
#MgContCurrentAll div.vdm-mileage-bg {
	background: #1B3359;
	height:7vh;
	padding:1vh 2vh;
	display:flex;/*★★★211008추가*/
	align-items: center;/*★★★211008추가*/
}
#MgContCurrentAll div.vdm-mileage-bg > div {
	display:flex;
	height:auto;
	justify-content: space-between;
	width:100%;
}
#MgContCurrentAll div.vdm-mileage-bg > div > div:nth-child(1) {
	display:flex;
	align-items: center;
	width:100%;
	max-width:100%;
	flex-basis: 50%;
}
#MgContCurrentAll div.vdm-mileage-bg > div > div:nth-child(1) span{
	width:100%;
	margin-left:5px;
}
#MgContCurrentAll div.vdm-mileage-bg > div > div:nth-child(2) {
	width:auto;
	max-width:50%;
	flex-basis: 50%;
	text-align:right;
}
#MgContCurrentAll div.vdm-mileage-bg > div > div:nth-child(2) input{
	width:100%;/*●●●211019수정*/
	max-width:100%;
	text-align:right;
	padding:0;
	margin:0;
}
/*적립현황내역*/
#MgContCurrentDt{
	height:46vh;
}
#MgContCurrentDt .vcircle-exclamation-mark{
	height:36vh;
}
#mg-BottomTitle{
	display:flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom:15px;
}
#mg-BottomTitle .vdm-mileage-select {
	width:100px;         /*속성값 변경 : auto → 100px*/
	max-width:100%;
	/* background: #1B3359;  기존내용 */ 
	/*[추가내용] select 효과 수정관련 , 아래화살표 디자인 변경 관련(ios용) */
	background: url('../../img/arrow.png') no-repeat 92% 50% #1B3359;
	color: #DDDDDD;
	border:0;
	padding:7px;
}
#mg-BottomCont{
	width:100%;
	max-height:37vh;
	overflow:auto;/* hidden; */
}
.vdm-mileage-ul {
	width:100%;
	/* max-height: 45vh; 211014
	overflow: auto;	 */
}
.vdm-mileage-li {
	border-bottom:2px dashed rgba(200,200,200,0.3);
}
.vdm-mileage-li:last-child {
	border-bottom:0;
}
.vdm-mileage-li div{
	width:100%;
	max-width:100%;
	justify-content: space-between;
	padding:10px 0;
}
.vdm-mileage-li:first-child div{
	padding-top:15px;
}
.vdm-mileage-li:last-child div{
	padding-bottom:0;
}
.vdm-mileage-li div span:nth-child(1).vdm-mileage-div{
	background: #1B3359;
	border-radius: 8px;
	text-align:center;
	width:22%;
	padding:10px 0;
}
.vdm-mileage-li div span:nth-child(2){
	width:50%;
	padding-left:3%;
}
.vdm-mileage-li div span:nth-child(3){
	width:23%;
	text-align:right;
}


/*Footer*/
#footer-m {
	/*background: #1B3359;*/
	position: fixed;
	bottom: 0;
	width:100%;
	height:100%;
	max-height:14vh;
	overflow:hidden;
}
.footer-menu-box {
	margin: 0 auto;
	width: 100%;
	/*max-width: 1080px;*/
	display:flex;
	 justify-content: space-between;
}
.footer-menu{
	margin: 0 auto;
	padding: 2vh 0;
	height:14vh;
	display: flex;
    justify-content: space-between;
	width: 90%;
}
.footer-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding:1vh;
	border-radius: 10px;
	width: 30%;
	max-width:33%;/*★★★211008바뀜*/
	height: auto;
	text-align: center;
	color: #FFFFFF;
}
.footer-btn > span {
	display: inline-block;
	width:auto;
	max-width: 30%; 
}
.vfooter-img {
	margin-bottom: 7px;
	width: 40px;
	height: 40px;
	max-width:100%;
}
.vfooter-text{
	letter-spacing: -2px;
}
.footer-btn.vweather,
.footer-btn.vbus,
.footer-btn.vwalking {
	background: rgba(27, 51, 89, 0.7);
}
.footer-btn.vweather:hover,
.footer-btn.vbus:hover,
.footer-btn.vwalking:hover {
	background: rgba(27, 51, 89, 1);
}
.footer-btn.vweather.active,
.footer-btn.vbus.active,
.footer-btn.vwalking.active {
	background: rgba(155, 170, 195, 0.7);
}
.footer-btn.vweather.active:hover,
.footer-btn.vbus.active:hover,
.footer-btn.vwalking.active:hover {
	background: rgba(155, 170, 195, 1);
}
#footer-copyright{
	display:none;
	height:0;
	opacity:0;
	visibility: hidden;
}


/*popup*/
.popup-contents{
	height: 100vh !important;
    max-height: 100vh !important;
}
.searchBody {
	background: #1B3359;
	margin:0;
	display:flex;
	justify-content: center;
	align-items: top;/*●●●211010바뀜*/
	width:100vw;
	height:100vh;
	max-height:100vh;/*●●●211010추가*/
}
.searchBody #vsearch-container,
.searchBody #bussearch-container{
	height:100vh;
	width:90vw;
	margin:0 5vw;
}
.vsearch-title {
	color: #FFFFFF;
	height:3vh;
	margin-top:4vh;
	margin-bottom:2vh;
	line-height: 3vh;
}
#displayInfo,
.weather-displayInfo,
.bus-displayInfo {/*검색 결과가 없습니다. id에서 class 변경 20211108 수정*/
	margin-top: 30px;
	opacity: 0.3;
}
/*측정망 선택 탭*/
#vsearch-tab-box{
	display:flex;
	height:10vh;
	justify-content: space-between;
}
.vsearch-tab {
	border-radius: 10px;
    padding: 1vh 0;
	background: #375687;
	width: 48%;
	max-width: 48%;
	height:8vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.vsearch-tab span {
	color: #9BAAC3;
	margin-left:10px;
}
.vsearch-tab:hover,
.vsearch-tab:active{
	background: #2E5087;
	color: #9BAAC3;
}
.vsearch-active{
	background: #ECD355;
	font-weight:bold;
}
.vsearch-active span{
	color: #000000;
}
.vsearch-active:hover,
.vsearch-active:active{
	background: #D8B920;
	color: #000000;
}
.vsearch-content {
	background: inherit;
	border-radius: 10px;
	border: 2px solid white;
	height: 70vh;
	overflow: hidden;
}


/*search*/
/*검색 - 미세먼지/기상정보, 출발/도착 정류장 검색 공통*/
.vweather-content,
.vnode-content {
	width: 100%;
	height: 100%;/*▶▶▶211013변경 - 검색시 내용 덜나오는것 관련*/
	overflow: auto;
}

.vweather-content.vwcBox {height: 59vh;}/*61vh 작은화면 핸드폰 스크롤 잘림*/

#bussearch-container .vsearch-content{
	height:73vh;
}
#vweatherList{
	height:100%;
}
.pop-search-cont{
	display:flex;
	justify-content: space-between;
}
#vsearchBar,
#vbusBar{
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	max-width: 100%;
	margin:0 auto;
	align-items: center;
}
#vsearchBar{
	background: #375687;
	padding:2vh;
}
#vbusBar{
	padding:0 0 2vh;
}
#pagemove{
	width:10vw;
	min-width:60px;/*●●●211019수정*/
	max-width:20vw;
	display:flex;
	/*justify-content: center;*/
	/*min-width:80px;
	max-width:80px;*/
}
#pagemove a img{/*★★★211008바뀜*/
	width:50px;
	height:50px;
}
#pagemove a.back{
	background:#1B3359;
	border-radius:10px;
}
#vsearchbox{
	width:80vw;
	display:flex;
	justify-content: flex-end;
}
.vsearch-input,
.vbus-input {
	background: #ffffff;
	color: #000000;
	border-radius: 10px 0 0 10px;
	width: 95%;
	padding:0 2.5%;
	height: 5vh;
	line-height:0;
	
}
.vsearch-input::placeholder,
.vbus-input::placeholder {
	width:100%;/*●●●211019추가*/
	color: #CCCCCC;
	/* position:relative;
	letter-spacing: -1px;
	margin-left:40px; */
}
.vwi-btn,
.vbus-btn {/*검색버튼*/
	background: #ECD355;
	border:0;
	border-radius: 0 10px 10px 0;
	width: 20%;/*★★★211008바뀜*/
	min-width:80px;/*★★★211008바뀜*/
	height: 5vh;
	line-height:0;
}
.vwi-btn:hover,
.vwi-btn:active
.vbus-btn:hover,
.vbus-btn:active{/*검색버튼*/
	background:#D6B305;
}
.vwi-search-btn {
	background: #ECD355;
	border-radius: 50px;
	width: 150px;
	height: 70px;
	padding: 0.5rem;
	font-weight: bold;
}
.vsearch-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.vsearch-item .vbus-btn {
	display:flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border-radius: 0;
	color:#fff;
	width: 100%;  
	height:6vh;
	text-align:left;
	border-bottom:1px solid rgba(255,255,255,0.2);
}
.vsearch-item .vbus-btn:hover,
.vsearch-item .vbus-btn:active{
	background:rgba(0,0,0,0.1);
}
.vsearch-item .vbus-btn span{
	margin-left:2vw;
}
.vsearch-item .vbus-btn img{
	margin-right:2vw;
}
/*출발도착 검색결과*/
#vnodeList .vsearch-item .vbus-btn{
	height:10vh;
}
#vnodeList .vsearch-item .vbus-btn div{
	display:flex;
	flex-direction: column;
}
#vnodeList .vsearch-item .vbus-btn div span{
	line-height:25px;
}
#vnodeList .vsearch-item .vbus-btn div span:first-child{
	margin-bottom:5px;
}
/*취소버튼*/
.vsearch-btn {
	border: none;
	border-radius: 50px;
	background: #375687;
	width: 100%;
	height:6vh;
	margin-top:2vh;
	color: #9BAAC3;
	text-align: center;
}
/*vweather-cont
.vsearch-btn:hover,
.vsearch-btn:active{
	background:#2E5087;
}*/

/*검색 - 미세먼지/기상정보, 출발/도착 정류장 검색 공통*/
/*출발/도착 정류장 검색*/
/*출발/도착 정류장 검색*/



/*★★★211008바뀜*/
/*반응형*/
@media(max-width:1024px){
	
	.bus-route-info{font-size:15px;}/*●●●211010폰트*/
}

@media(max-width:768px){
	
	/*●●●211010폰트 - 여기부터*/
	.vtext-10 {	font-size: 8px;}
	.vtext-12 {	font-size: 11px;}
	.vtext-13 {	font-size: 12px;}
	.vtext-14 {	font-size: 13px;}
	.vtext-15,.vtext-15b {font-size: 15px;}
	.vtext-18,.vtext-18b {font-size: 16px;}
	.vtext-20,.vtext-20b{	font-size: 18px;}
	.vtext-22,.vtext-22b{	font-size: 19px;}
	.vtext-25,.vtext-25b{	font-size: 20px;}
	.vtext-28,.vtext-28b{	font-size: 23px;}
	.vtext-30,.vtext-30b{	font-size: 25px;}
	.vtext-35,.vtext-35b{	font-size: 30px;}
	.vtext-40,.vtext-40b{	font-size: 35px;}
	.vtext-90,.vtext-90b{	font-size: 75px;}
	/*●●●211010폰트 - 여기까지*/
	
	.vtext-icon-sm {	font-size: 1.25rem;}
	.iconImages {	width: 35px;	height:35px;	}
	.iconImages-sm {	width: 15px;	height: 15px;	}
	.title_retext .refreshBtn {    width: 35px;    height: 35px;}
	
	.roundBtn {padding:8px 12px;}
	
/*기상정보/미세먼지*/
#vweather-cont1.swiper-slide,/*▶▶▶211013추가*/
#vweather-cont2.swiper-slide{
	padding: 0 4vw;
	}

	#vweather-cont1-top .fd-dust{width:40%; margin-right:5vw;}
	#vweather-cont1-top .fd-dust img {width:35px; height:auto;}
	.vprogress {height:20px;}
	.vverticality {height:20px;}/*●●●211008추가(20:00)*/
	.pg-cont:first-child {    margin-top: 0;}
	.pg-cont {margin-bottom: 10px;}
	
	.HowToBehave {margin-left: 30px;width: 90%;margin-top:5px;margin-bottom:5px;}/*▶▶▶211013추가 */
	.HowToBehave::before {width: 20px;height: 20px;left: -30px;margin-right: 10px;background-size: 20px 20px;}/*▶▶▶211013추가 */
	
	.vbus-search .vbus-search-btn {border: 2px solid #FFFFFF;}/*▶▶▶211013추가 */
	/*★★★211018추가-여기부터*/
	.vbus-round {
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	#busInfoSimple div.bus-route-info > div span {
		padding-bottom: 25px;
	}
	#busInfoDetail div.bus-route-info > div.bus-station span:last-child,
	#busInfoDetail div.bus-route-info > div p{
		padding-bottom:25px;
	}
	div.bus-route-info > div span::after {
		width:40px;
		height:25px;
	}
	div.bus-route-title > div:nth-child(2) > a {
		top:0;
	}
	div.bus-route-info > div span, div.bus-route-info > div p {
		left:60px;
	}
	div.bus-route-info > div span::before,
	div.bus-route-info > div p::before {
		left:-40px;
		border-left: 1px solid #fff;
	}
	div.bus-route-info > div.bus-arrive span::before{
		max-height:20px;
	}
	div.bus-route-info > div span::after {
		font-size:13px;
		width:40px;
		height:25px;
		line-height:25px;
		left:-60px;
	}
	/*★★★211018추가-여기까지*/
	.snsForm {width:60%;}
	.vkakao img,.vnaver img,.vgoogle img,.vapple img{	width: 100%;	height: auto;}
	
	#mg-TopText img {width: 30vw;}
	
	.vdm-mileage-li {border-width:1px;}
	.vdm-mileage-li div {padding:8px 0;}
	.vdm-mileage-li div span:nth-child(1).vdm-mileage-div {width:30%; border-radius: 5px; padding: 7px 0;}
	.vdm-mileage-li div span:nth-child(2){width:35%;}
	.vdm-mileage-li div span:nth-child(3){width:30%;}
	
	.ct-pager {    width: 8px;    height: 8px;}
	
	.footer-btn {width:32%;}
	.vfooter-img {width:35px; height:35px;}
	
	
	#pagemove a img{	width:45px;		height:45px;}
}

@media(max-width:481px){
	
	/*●●●211010폰트 - 여기부터*/
	.vtext-10 {	font-size: 7px;}
	.vtext-12 {	font-size: 10px;}
	.vtext-13 {	font-size: 11px;}
	.vtext-14 {	font-size: 12px;}
	.vtext-15,.vtext-15b {font-size: 13px;}
	.vtext-18,.vtext-18b {font-size: 14px;}
	.vtext-20,.vtext-20b{	font-size: 16px;}
	.vtext-22,.vtext-22b{	font-size: 18px;}
	.vtext-25,.vtext-25b{	font-size: 20px;}
	.vtext-28,.vtext-28b{	font-size: 23px;}
	.vtext-30,.vtext-30b{	font-size: 25px;}
	.vtext-35,.vtext-35b{	font-size: 30px;}
	.vtext-40,.vtext-40b{	font-size: 35px;}
	.vtext-90,.vtext-90b{	font-size: 60px;}
    /*●●●211010폰트 - 여기까지*/

	.vtext-icon-sm {	font-size: 1.25rem;}
	.iconImages {	width: 30px;	height:30px;	}
	.iconImages-sm {	width: 12px;	height: 12px;	}
	.title_retext .refreshBtn {    width: 30px;    height: 30px;}
	
	.roundBtn {padding:5px 8px;}
	
	.vprogress {height:15px;}/*●●●211008추가(20:00)*/
	.vverticality {height:15px;}/*●●●211008추가(20:00)*/

	
	.HowToBehave {margin-left: 20px;margin-top:3px;margin-bottom:3px;}/*▶▶▶211013추가 */
	.HowToBehave::before {width: 15px;height: 15px;top: 2px;left: -20px;margin-right: 10px;background-size: 15px 15px;}/*▶▶▶211013추가*/
	
	.vbus-search .vbus-search-kind {margin-bottom: 3px;}
	.vbus-search .vbus-search-btn input {padding: 3px 0;}	
	/*★★★211018추가-여기부터*/
	.vbus-round {
		width: 32px;
		height: 32px;
		line-height: 32px;
	}
	div.bus-route-info > div span,
	div.bus-route-info > div p {
		left:50px;
	}
	div.bus-route-info > div span::before,
	div.bus-route-info > div p::before {
		left:-30px;
	}
	.bus-route-info{
		font-size:13px;
	}
	div.bus-route-info > div span::after {
		left:-50px;
	}
	/*★★★211018추가-여기까지*/
	.bus-route-info{font-size:12px;}
	/*도보이동/마일리지*/
	#mg-TopText img {width: 28vw;}/*●●●211019추가*/
	#mg-TopText div {font-size: 13px;}/*●●●211019추가*/
	#mg-BottomTitle {margin-bottom:8px;}
	.vdm-mileage-li div {padding:6px 0;}
	.vdm-mileage-li:first-child div {padding-top: 10px;}
	.vdm-mileage-li div span:nth-child(1).vdm-mileage-div {padding: 5px 0;}
	
	.ct-pager {    width: 6px;    height: 6px;}

	/* #mg-TopText {margin-bottom: 0px;} *//*20211014 추가*/
	/* #mg-TopText div {font-size: 12px;} *//*20211014 추가*/
	#mg-BottomCont {/*211014 추가*/
		max-height: 35vh;
	}
	/*footer*/
	.vfooter-text {font-size:12px;}/*●●●211019수정*/
	.vfooter-img {width:25px; height:25px;   margin-bottom: 5px;}
	.vfooter-text {font-size:11px;}
}
@media(max-width:361px){
	.vtext-10 {	font-size: 7px;}
	.vtext-12 {	font-size: 9px;}
	.vtext-13 {	font-size: 10px;}
	.vtext-14 {	font-size: 11px;}
	.vtext-15,.vtext-15b {	font-size: 12px;}
	.vtext-18,.vtext-18b {	font-size: 13px;}
	.vtext-20,.vtext-20b{	font-size: 15px;}
	.vtext-22,.vtext-22b{	font-size: 17px;}
	.vtext-25,.vtext-25b{	font-size: 18px;}/*●●●211019수정*/
	.vtext-28,.vtext-28b{	font-size: 20px;}/*●●●211019수정*/
	.vtext-30,.vtext-30b{	font-size: 22px;}/*●●●211019수정*/
	.vtext-35,.vtext-35b{	font-size: 26px;}/*●●●211019수정*/
	.vtext-40,.vtext-40b{	font-size: 28px;}/*●●●211019수정*/
	.vtext-90,.vtext-90b{	font-size: 50px;}

	/*도보이동/마일리지*/
	#mg-TopText div {	font-size: 12px;}/*●●●211019추가*/
	.vdm-btn div.btnRunApp {padding:3px 0;}/*●●●211019추가*/

	/*footer*/
	.vfooter-text {font-size:11.5px;}/*●●●211019수정*/
}