body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {
    margin: 0;
    padding: 0;
}
dl, ul, ol, menu, li {
    list-style: none;
}
a {
    color: #333;
    text-decoration: none;
}
body{
	background-color:#f5f5f5;
}

#header{
	position:fixed;
	width: 100%;
	height:52px;
	background-color:#fff;
	z-index:99999;
	padding: 5px 0;
    border-bottom: 1px solid #ddd;
	max-width:500px;
	left: 50%;
    transform: translateX(-50%);
}
#select_line{
	margin: 5px 0 0 10px;
}
#select_line2{
	margin: 5px 0 0 5px;
}
.select_box {
	float:left; 
	position: relative;
	width: 120px;
	height: 40px;
	background: url(../img/select_arrow.png) 100px center no-repeat;
	border: 1px solid #E9DDDD;
}
.select_box label {
	position: absolute;
	font-size: 14px;
	color: #a97228;
	top: 13px;
	left: 12px;
	letter-spacing: 1px;
}
.select_box select {
	width: 100%;
	height: 40px;
	min-height: 40px;
	line-height: 40px;
	padding: 0 10px;
	opacity: 0;
	filter: alpha(opacity=0);
}

 .link_refresh {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    background-color: #fff;
}
.link_refresh .ico_traininfo {
    width: 18px;
    height: 18px;
    margin: 12px auto 0;
    background-position: -5px -100px;
}
.link_refresh .ico_traininfo.loading {
    width: 25px;
    height: 25px;
    margin: 8px;
	background: url("../img/loader.gif") no-repeat;
	background-size: 25px 25px;
}

#content{
	padding:62px 0 0 0;
	min-width:320px;
	max-width:500px;
	margin: auto;
}

/* 지하철 노선 시작 */
#subway_route li {
    position: relative;
    min-height: 59px;
	background-color:#fff;
	border-bottom: 1px solid #ddd;
}

#subway_route li .subway_line{
	position: absolute;
	width:30%;
	height:58px;
}
#subway_route li .subway_line.left {
    left: 0px;
}
#subway_route li .subway_line.right {
    right: 0px;
}

#subway_route li .center{
	position: absolute;
	width:40%;
	height:58px;
	margin: 0 30%;
}

#subway_route li .center .transfer_list{
    position: absolute;
    font-size: 0.7em;
    width: 100%;
    top: 3px;
	color: #fff;
}

#subway_route li .center .transfer_list .transfer_num{
	padding: 0px 4px;
	border-radius: 50%;
}
#subway_route li .center .transfer_list .transfer_txt{
	padding: 1px 3px;
	border-radius: 5px;
}

#subway_route li .center .transfer_list .subway_1001 {
    background-color: #263c96;
}
#subway_route li .center .transfer_list .subway_1002 {
    background-color: #3cb44a;
}
#subway_route li .center .transfer_list .subway_1003 {
    background-color: #ff7300;
}
#subway_route li .center .transfer_list .subway_1004 {
    background-color: #2c9ede;
}
#subway_route li .center .transfer_list .subway_1005 {
    background-color: #8936e0;
}
#subway_route li .center .transfer_list .subway_1006 {
    background-color: #b5500b;
}
#subway_route li .center .transfer_list .subway_1007 {
    background-color: #697215;
}
#subway_route li .center .transfer_list .subway_1008 {
    background-color: #e51e6e;
}
#subway_route li .center .transfer_list .subway_1009 {
    background-color: #cea43a;
}
#subway_route li .center .transfer_list .subway_1075 {
    background-color: #ffce33;
}
#subway_route li .center .transfer_list .subway_1069 {
    background-color: #6f99d0;
}
#subway_route li .center .transfer_list .subway_1077 {
    background-color: #a71e31;
}
#subway_route li .center .transfer_list .subway_1063 {
    background-color: #9cd2bb;
}
#subway_route li .center .transfer_list .subway_1067 {
    background-color: #45c39c;
}
#subway_route li .center .transfer_list .subway_1065 {
    background-color: #73b6e4;
}
#subway_route li .center .transfer_list .subway_1081 {
    background-color: #ff9d27;
}
#subway_route li .center .transfer_list .subway_1071 {
    background-color: #ffce33;
}
#subway_route li .center .transfer_list .subway_1079 {
    background-color: #77c371;
}




#subway_route li .center .tit_route {
    display: block;
    overflow: hidden;
    font-weight: normal;
    font-size: 1.07em;
    line-height: 1.21;
    color: #000;
    letter-spacing: -1px;
    white-space: nowrap;
    text-overflow: ellipsis;
	margin-top: 18px;
}

#subway_route li .subway_line .line {
    position: absolute;
    height: 100%;
    top: 0;
    width: 7px;
}

#subway_route li:first-child .subway_line .line {
    height: 50%;
    top: 50%;
}
#subway_route li:last-child .subway_line .line {
    height: 50%;
    top: 0;
}
#subway_route li .subway_line.left .line {
    right: 22px;
}
#subway_route li .subway_line.right .line {
    left: 22px;
}
.subway_1001 li .subway_line .line {
    background-color: #263c96;
}
.subway_1002 li .subway_line .line {
    background-color: #3cb44a;
}
.subway_1003 li .subway_line .line {
    background-color: #ff7300;
}
.subway_1004 li .subway_line .line {
    background-color: #2c9ede;
}
.subway_1005 li .subway_line .line {
    background-color: #8936e0;
}
.subway_1006 li .subway_line .line {
    background-color: #b5500b;
}
.subway_1007 li .subway_line .line {
    background-color: #697215;
}
.subway_1008 li .subway_line .line {
    background-color: #e51e6e;
}
.subway_1009 li .subway_line .line {
    background-color: #cea43a;
}
.subway_1075 li .subway_line .line {
    background-color: #ffce33;
}
.subway_1069 li .subway_line .line {
    background-color: #6f99d0;
}
.subway_1077 li .subway_line .line {
    background-color: #a71e31;
}
.subway_1063 li .subway_line .line {
    background-color: #9cd2bb;
}
.subway_1067 li .subway_line .line {
    background-color: #45c39c;
}
.subway_1065 li .subway_line .line {
    background-color: #73b6e4;
}
.subway_1081 li .subway_line .line {
    background-color: #ff9d27;
}
.subway_1071 li .subway_line .line {
    background-color: #ffce33;
}
.subway_1079 li .subway_line .line {
    background-color: #77c371;
}



#subway_route li .subway_line .center_direction {
    width: 19px;
    height: 19px;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -10px;
    background: url("../img/ico_station.png") 0 0 no-repeat;
	background-size: 19px 19px;
}
#subway_route li .subway_line.right .center_direction {
    left: 16px;
	transform: rotate(180deg);
}
/* 지하철 노선 끝 */

/* 지하철 위치, 상태 시작 */
.subway_line .train_loc {
    position: absolute;
	z-index:9999;
}
.subway_line.left .train_loc {
    top: -10px;
}
.subway_line.right .train_loc {
    top: 30px;
}

.subway_line.left .train_loc.dep {
    top: 12px;
}
.subway_line.right .train_loc.dep {
    top: 12px;
}
.subway_line.left .train_loc.arr {
    top: 30px;
}
.subway_line.right .train_loc.arr {
    top: -10px;
}

.subway_line.left .train_loc {
    right: 6px;
}
.subway_line.right .train_loc {
    left: 1px;
}


.ico_traininfo {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    background: url("../img/ico_traininfo.png") no-repeat;
    text-indent: -9999px;
    vertical-align: top;
	background-size: 120px 119px;
}

.subway_line .train_loc .ico_traininfo {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40px;
    height: 48px;
}

.subway_line.right .train_loc .ico_traininfo {
    left: 0px;
	background-position: -36px 0;
}

.subway_line .train_loc.direct .ico_traininfo {
	background-position: 0 -48px;
}
.subway_line.right .train_loc.direct .ico_traininfo {
    left: 0px;
	background-position: -36px -48px;
}


.subway_line .train_loc .ico_traininfo.target {
	background-position: -80px 0;
}

.subway_line.right .train_loc .ico_traininfo.target {
    left: 0px;
	background-position: -76px 0;
}

.subway_line .train_loc.direct .ico_traininfo.target {
	background-position: -80px -48px;
}
.subway_line.right .train_loc.direct .ico_traininfo.target {
    left: 0px;
	background-position: -76px -48px;
}




.subway_line.right .train_loc.target .ico_traininfo {
    left: 0px;
	background-position: -36px -48px;
}

/*background-position: 0 -50px;*/
.subway_line .train_loc .train_info_txt {
    display: block;
	position: absolute;
    margin-top: 10px;
	border: 1px solid #dcdde5;
    padding: 3px;
	background: #fafbfb;
    font-size: 11px;
    line-height: 11px;
    color: #6b7283;
    white-space: nowrap;
}

.subway_line.left .train_loc .train_info_txt {
	right: 38px;
}
.subway_line.right .train_loc .train_info_txt {
	left: 42px;
}

.subway_01 li .subway_line .train_loc {
    background-position: 0 0;
}

/* 지하철 위치, 상태 끝 */