.cityrail-model{width:60px; height: 60px}
.cityrail-box{height: 120px; width: calc(50.0% - 12.5px) !important;margin: 5px; display:inline-block}
.cityrail-bg-icon{height: 160px; position: absolute;width: 160px; bottom: -20px; left: -20px; opacity: 0.1; z-index: -1; background-position: center !important;background-repeat: no-repeat !important}

@media (min-width: 480px) {.cityrail-bg-icon{height: 160px;width: 160px;} .cityrail-box{height: 120px; width: calc(50.0% - 12.5px) !important;}}
@media (min-width: 640px) {.cityrail-bg-icon{height: 160px;width: 160px;} .cityrail-box{height: 120px; width: calc(33.333333333% - 13px) !important;}}
@media (min-width: 720px) {.cityrail-bg-icon{height: 160px;width: 160px;} .cityrail-box{height: 120px; width: calc(25% - 13px) !important;}}
@media (min-width: 1280px) {.cityrail-bg-icon{height: 160px;width: 160px;} .cityrail-box{height: 120px; width: calc(20% - 14px) !important;}}
@media (min-width: 1440px) {.cityrail-bg-icon{height: 160px;width: 160px;} .cityrail-box{height: 120px; width: calc(16.6666666667% - 14px) !important;}}
@media (min-width: 1920px) {.cityrail-bg-icon{height: 180px;width: 180px;} .cityrail-box{height: 140px; width: calc(14.2857142857% - 14px) !important;}}
@media (min-width: 2560px) {.cityrail-bg-icon{height: 200px;width: 200px;} .cityrail-box{height: 160px; width: calc(12.5% - 14px) !important;}}
@media (min-width: 3440px) {.cityrail-bg-icon{height: 220px;width: 220px;} .cityrail-box{height: 180px; width: calc(10% - 14px) !important;}}

.cityrail-box-nm{font-weight: 600; position: absolute; left: 5px;top: 0; font-size: 50px; opacity: 0.1}
.cityrail-box-sm{font-weight: 900;position: absolute;bottom: 5px; right: 5px; opacity: 0.6}


.cityrail-type-box{position: absolute;left: 8px;top: 12px;height: 100%;opacity: 0.8}
.cityrail-type{display: inline-block;overflow: hidden;width: 24px;height: 24px; padding: 0px; margin: 0.5px; border:1px solid; border-radius: 4px; background: url(/img/bg-lighter.png); text-align: center; table-layout: fixed}
.cityrail-type img{overflow: hidden;width: 100%; padding: 0px; margin: 0px}


.cityrail-sm-icon{height: 50px; position: absolute;width: 50px; bottom: -5px; left: 0px; opacity: 0.12; z-index: -1; background-position: center !important;background-repeat: no-repeat !important}
.cityrail-font1{font-size: 22px; font-weight: 600;position: absolute;bottom: 5px;left: 5px;}
.cityrail-font2{font-size: 16px;  text-transform:Uppercase; padding-top: 12px;font-weight: 900; z-index:0;opacity: 0.3; width: 160px; overflow: hidden;text-align: left;position: absolute;bottom: 0;left: 5px;}

.cityrail-logo-box{position: absolute;right: 5px;top: 5px; opacity: 0.8}
.cityrail-icon{ width: 20px;height: 20px;border: 0px solid #CCC;background: url(/img/bg-lighter.png);border-radius: 4px;margin: 0px; display: inline-block}

.cityrail-city2{position: absolute;bottom: 35px;left: 6px}

.cityrail-line-box{width:  calc(11.11111111111% - 14px) !important; display:inline-block;position: relative; /*background-image: linear-gradient(to bottom,rgba(248,248,250,0.5),rgba(255,255,255,0.8));*/ overflow: hidden;margin: 5px;height: 165px;}

@media (max-width: 3840px) {.cityrail-line-box{width: calc(10% - 14px) !important;height: 155px;}}
@media (max-width: 3400px) {.cityrail-line-box{width: calc(11.11111111111% - 14px) !important;height: 155px;}}
@media (max-width: 2560px) {.cityrail-line-box{width: calc(12.5% - 14px) !important;height: 155px;}}
@media (max-width: 2200px) {.cityrail-line-box{width: calc(14.2857142857% - 13.7px) !important;height: 155px;}}
@media (max-width: 1920px) {.cityrail-line-box{width: calc(16.6666666667% - 13.6px) !important;height: 155px;}}
@media (max-width: 1440px) {.cityrail-line-box{width: calc(20% - 13.5px) !important;height: 155px;}}
@media (max-width: 1280px) {.cityrail-line-box{width: calc(25% - 13px) !important;height: 152px;}}
@media (max-width: 1024px) {.cityrail-line-box{width: calc(25% - 13px) !important;height: 132px;}}
@media (max-width: 800px) {.cityrail-line-box{width: calc(33.333333333% - 13px) !important;}}
@media (max-width: 768px) {.cityrail-line-box{width: calc(33.333333333% - 12.9px) !important;}}
@media (max-width: 640px) {.cityrail-line-box{width: calc(50.0% - 12px) !important;}}
@media (max-width: 544px) {.cityrail-line-box{width: calc(50.0% - 12px) !important;height: 112px;}}
.big-number{position: absolute; right: 0px;bottom: -28px; font-size: 60px; opacity: 0.1; font-weight: 600}



.circle-line-box{height: 850px; width: 40px; display: inline-block; overflow: hidden; position: relative; z-index: -1}
.circle-line{width: 40px; height: 146px; margin-top: 291px; border-top: 10px solid #<?php echo $linecolor ?>;border-bottom: 10px solid #<?php echo $linecolor ?>; }
.circle-line-left{right: 0; border-left: 10px solid #<?php echo $linecolor ?>;border-radius:20px 0 0 20px; z-index: -1 }
.circle-line-right{left: 0; border-right: 10px solid #<?php echo $linecolor ?>;border-radius:0 20px 20px 0; z-index: -1}
.top-box{overflow: hidden; height: 60px; width: 40px; background: #<?php echo $linecolor ?>}
.btm-box{position: absolute; bottom: 0; overflow: hidden; height: 60px; width: 40px; background: #<?php echo $linecolor ?>}
@media screen and (max-width: 768px) { 
	.circle-line-box{height: 650px;}
	.circle-line{margin-top: 192px;}
}


.sh{ line-height: 10px;position: absolute; width: 100%; z-index: 998; font-size: 6px; margin-top: 10px }
.line-name-box-outer .line-name-box-a .transfer-points .sh .lf{left: 0; position: absolute; width: 8px; height: 10px; background:#FFFFFF; z-index: 9; border-right: 2px solid #FFFFFF}
.line-name-box-outer .line-name-box-a .transfer-points .sh .rf{right: 0; position: absolute; width: 8px; height: 10px; background:#FFFFFF; z-index: 10; border-left: 2px solid #FFFFFF}

*{transition: opacity 1.2s ease, background 1.2s ease, color 0.8s ease, border-radius 1s ease, box-shadow 0.8s ease, font-weight 0.8s ease !important;}

.line{height: 10px; width: 100%; position: absolute;margin-top: 10px; }
.line-name-box-a{min-width: 62px; height: 345px !important; overflow: hidden; text-align: center; align-content: center; position: relative;}			
.line-name{width: 1em !important; height: 230px; margin-left: calc(50% - 11px); line-height: 1.1em; font-weight: 500; word-break: break-all; text-align: center; white-space: normal; overflow: hidden; text-shadow: 0 0 1px #AAAAAA;margin-top: 10px; font-size: 22px; position: relative}

.line-name-b{width: 1em !important; height: 230px !important; margin-left: calc(50% - 11px); line-height: 1.1em; font-weight: 500; word-break: break-all; text-align: center; white-space: normal; overflow: hidden !important; text-shadow: 0 0 1px #AAAAAA;margin-bottom: 10px; font-size: 22px; display: table-cell; vertical-align: bottom; }

.line-name-box-a:hover .line-name{color: white !important; font-weight: 900}
.line-name-box-a:hover .line-name-b{color: white !important; font-weight: 900}
.line-name-box-a:hover .line{background: white !important; }

.line-name-transfer{font-weight: 600;color: #555555 !important}

.transfer-box{height: 30px;padding-top: 8px;} 
.transfer-box-b{height: 30px;padding-bottom: 8px;}

.transfer-sub{height: 22px;display: inline-block; border-radius: 4px; font-weight: 700; border: 1px solid #FFFFFF; overflow: hidden; font-size: 0px;max-width: 62px; vertical-align: top}
.transfer-line{display: inline-block; vertical-align: top; color: #FFFFFF; white-space: nowrap; word-break: keep-all; font-size: 12px; width: 20px; height: 20px; line-height: 20px;}			
.transfer-points{height: 30px; position: relative;font-size: 0px}
.transfer-sticks{border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; display: inline-block; vertical-align: bottom; width: 6px; height: 30px;}
.transfer-out{border-bottom: 3px double}
.transfer-circle{position: absolute; margin-left: calc(50% - 12px); margin-top: -27px; z-index: 99; width: 24px; height: 24px; overflow: hidden; border-radius: 50%; border: 2px solid #FFFFFF}
.transfer-pie {width: 20px;height: 20px; background: #CCC; border-radius: 50%;transform: rotate(45deg); position: relative}
.transfer-cover{ position: absolute;width: 14px;height: 14px; background: #FFFFFF; border-radius: 50%; top: 3px; left: 3px;}

.station-normal{position: absolute; margin-left: calc(50% - 09px); margin-top: 6px;z-index: 99; width: 18px; height: 18px; background: #FFFFFF; border-radius: 50%; padding: 2px}
.station-normal div{width: 14px; height: 14px; background: #FFFFFF; border-radius: 50%; }

.not-open{width: 10px; font-size: 10px; line-height: 10px; position: absolute;left: 5px; bottom: 0; font-weight: 100}		
.not-open-b{width: 10px; font-size: 10px; line-height: 10px; position: absolute;left: calc(50% - 5px); top: 0; font-weight: 100}

.aaa:last-child{width: calc(100% - 15px)}

.transfer-box-lg{position: absolute; top: 0px; left: 0px; opacity: 0}
.transfer-lg{display: inline-block; width: 170px; vertical-align: bottom; position: relative; padding: 0; height: 40px; line-height: 34px;  border: 3px solid white; box-shadow: 2px 2px 6px #555; }

.transfer-lg:first-child{border-radius: 6px 0 0 6px;}
.transfer-lg:last-child{ border-radius: 0 6px 6px 0;}

.transfer-exit{position: absolute;bottom: 0; left: 0; line-height: 16px}

.cross-line-S{width: 72px !important; border-right: 5px solid white;}
.cross-line-E{width: 72px !important; border-left: 5px solid white;}

.cross-line-box{height: 283px; overflow: visible}
.cross-line-name{ writing-mode: vertical-rl; text-orientation: sideways; vertical-align: middle; position: absolute; width: 30px; line-height: 30px;left: calc(50% - 15px); text-align: center}

@media screen and (max-width: 960px) { .transfer-lg{width: 150px}}
@media screen and (max-width: 822px) { .transfer-lg{width: 135px}}
@media screen and (max-width: 768px) { .transfer-lg{width: 100px;height: 30px; line-height: 26px;  border: 2px solid white;}.transfer-exit{line-height: 12px}}
@media screen and (max-width: 576px) { .transfer-lg{width: 80px;height: 24px; line-height: 20px;}.transfer-exit{line-height: 10px}}

.CR{position: absolute; margin-top: -55px; margin-left: calc(50% - 15px);  width: 30px; height: 60px; background-size:contain; background: url(/UrbanRails/assets/imgs/0CR.svg); background-repeat: no-repeat; background-position: center bottom; pointer-events: none}
.CR-name{width:90%; margin: 5%; position: absolute;margin-top: 25px; height: 30px;line-height: 32px}
.CR-angle{left: calc(50% - 20px); position: absolute; width: 40px; border-top: 15px solid #FFFFFF; border-left: 20px solid; border-right: 20px solid}

.line-name-box-outer{display: table-cell; position: relative; }
.line-name-box-outer:hover .CR{opacity: 1; margin-top: -55px; margin-left: calc(50% - 15px); width: 30px; height: 60px; background: url(/UrbanRails/assets/CR.svg) !important; background-repeat: no-repeat !important; background-position: center top; }
.line-name-box-outer:hover .CR-name{ font-weight: 900; }

.CR-b{position: absolute; margin-top: 55px; margin-left: calc(50% - 15px);  width: 30px; height: 60px; background-size:contain; background: url(/UrbanRails/assets/imgs/0CR.svg); background-repeat: no-repeat; background-position: center top; pointer-events: none; z-index: 99}
.CR-name-b{width:90%; margin: 5%; position: absolute;margin-top: 5px; height: 30px;line-height: 32px}
.CR-angle-b{left: calc(50% - 20px); position: absolute; width: 40px; top: 45px; border-bottom: 15px solid #FFFFFF; border-left: 20px solid; border-right: 20px solid}

.line-name-box-outer:hover .CR-b{opacity: 1; margin-top: 55px; margin-left: calc(50% - 15px); width: 30px; height: 60px; background: url(/UrbanRails/assets/CR.svg) !important; background-repeat: no-repeat !important; background-position: center bottom !important; }
.line-name-box-outer:hover .CR-name-b{ font-weight: 900; }

@media screen and (max-width: 768px) { 
	.line-name-box-a{height: 245px !important}
	.line-name{height: 130px !important;font-size: 16px; margin-left: calc(50% - 8px)!important;}

	.line-name-b{height: 130px !important;font-size: 16px; margin-left: calc(50% - 15px)!important;}
	.cross-line-box{height: 133px; overflow: visible}
}