@charset"utf-8";
/*common*/
.ver_web{display:none !important;}
.ver_mobile{display:block !important;}
body {background:#e1e1e1;}
#mainwrap {margin:0; padding:0;}
#mainContwrap {position:relative; width:96%; margin:-30px auto 0 auto; z-index:10}
.backBg {width: 100%;height: 100%;min-height:1024px;position: absolute;top: 0;z-index: 5;	background-color: rgba(0, 0, 0, 0.2);}
/*section01*/
.conGroup1 {display:flex; flex-wrap:wrap;  max-width:1200px; margin:0 auto; z-index:90}
/*.conGroup2 {width:100%;  max-width:1200px; margin:5px auto }*/
.conGroup1 > div {width:50%;}
.conGroup1 div:nth-child(2) {width:100%;order:3}
.conGroup2 {display:-webkit-flex; display:flex; flex-flow:column nowrap; width:100%}
.station{width:50%; min-height:160px; text-align:center; padding:10px 0 10px 0}
.station h3 {color:#fff; /*font-size:1.500em;*/ font-size:1.2em; font-weight:400; letter-spacing:-1px; line-height:1.143em; letter-spacing:-1px; margin-bottom:10px}
.station h3 span {display:block; font-weight:700;}
.station .waitNum {color:#ffe42b !important; font-size:1.429em; font-weight:700;}
.station .time {color:#fff; font-size:13px; font-weight:400; padding:0 0 .0286em 0; letter-spacing:-1px}
.station .time span {color:#ffe42b; font-weight:800;}
.station .stxt {font-size:0.750em; color:#fff; padding:0.333em 0.333em 0.875em 0.333em; letter-spacing:-0.08em}
.station .stxt span.Tyellow{font-size:1.0em; color:#ffd926 !important; font-weight:700}
.preticket {font-size:14px; color:#f5f5f5; line-height:1.3em; display:inline-block; padding:20px; letter-spacing:0; font-weight:400}
.preticket span {color:#fff; font-weight:800; text-decoration:underline}
.gungchon .ticktingNum {background:#c41c00;}
.yonghwa .ticktingNum {background:#01a9f2;}
.ticktingNum {font-size:13px; font-weight:400;  letter-spacing:-1px; border-radius:20px; color:#fff !important; display:inline-block; padding:4px 10px; margin:2px 0 1px 0}
.ticktingNum i {width:23px; height:22px; font-size:13px; letter-spacing:-1px;  vertical-align:middle; margin-right:5px; background:url(../images/main/bullet1.png) no-repeat left top; display:inline-block; border-radius:12px}
.ticktingNum a {display:block; color:#fff;}
.gungchon{background:#e63b1f; border-radius:10px 0 0 10px}
.yonghwa {background:#1468d0 url(../images/main/yonghwa_bg.png) right bottom no-repeat; border-radius:0 10px 10px 0}

.timeBox {width:100%; background:#313c57 url(http://railbike2020.cdn3.cafe24.com/timetable_bg.png) no-repeat left top; background-size:cover; min-height:120px;text-align:center; padding:15px 0 10px 0; border-radius:10px 10px}
.timeBox .newmsg {color:#ffe42b;}
.timeBox .newmsg2 {color:#fff; margin-bottom:5px}
.bold {font-weight:800}
.timeBox .today {font-size:0.75em; margin-bottom:0.3em; color:#FFF}
.timeBox .status {color:#fff; font-size:16px; font-weight:400; padding:0 0 10px 0;}
.timeBox .status em {font-size:1.5em; font-weight:700;}
.timeBox .todaymsg {font-size:13px; color:#fff;}
.timeBox .todaymsg em {display:block; font-weight:400; margin-bottom:5px}
.timeBox .todaymsg em:after {content: ""; display:block; margin:6px auto 0 auto; width:4px; height:4px; border-radius:8px; background:#ccc}
.timetable {margin:10px auto 0 auto; width:100% !important; text-align:center}
.timetable ul {margin:0 auto;}
.timetable ul li {display:inline-block}
.closeday {display:flex; flex-flow:row wrap; justify-content:center; margin-top:10px}
.closeday li {font-size:1.250em; color:#fff; display:inline-block; letter-spacing:-0.1em}
.closeday li:first-child:after {/*content: "/";*/ display:inline-block; margin:0 8px}
.closeday li span {font-weight:800; color:#00ccff}
.closeday li span:nth-of-type(1) {margin-right:5px}
.baro_btn {background:#ffe42b; border-radius:20px; color:#2f3a52; display:inline-block; padding:4px 10px;font-weight:400;}
.monthplan i {width:23px; height:22px; vertical-align:middle; margin-right:5px; background:url(../images/main/bullet1.png) no-repeat left top; display:inline-block; border-radius:12px}
.lunchtime {display:block; font-size:0.857em; color:#CCC}
.f12 {font-size:12px !important;}

/*공지사항*/

.mBoard{position:relative; background: #f2f1f1; width:100%; margin: 0 auto; padding:15px  10px }
.mBoard h3{ display:inline-block; font-size:1.143em; line-height:1.5em; padding-bottom:10px; font-weight:700; position:relative}
.mBoard h3:after {background:#e83c1f;content: "";position: absolute;bottom:0;left:0; width:100%;height: 3px; z-index: 6;}
.mBoard div .more {position:absolute;right:15px;top:15px; text-align:center;}
.mBoard div .more a{ color:#868686; display:block;}
.mBoard dl{padding:15px 0;}
.mBoard dl dt{font-weight:700;}
.mBoard dl dt a{font-size:1em; color:#333; display:block; position:relative; line-height:1.6em}
.mBoard dl dt a span.date {color:#666; display:inline-block; float:right}
.mBoard dl dt a:hover {color:#333;}
.mBoard dl dd {font-size:13px;}


/*고객센터*/
.mService {width:100%; margin: 0.5em auto; color:#FFF }
.mService > div.tel1 {position:relative; background:#1468d0; padding:15px 10px 10px 25%;}
.mService > div.tel2 {position:relative; background:#e63b1f; padding:15px 10px 10px 25%;}
.mService h3 {width:20%; position:absolute; left:15px; top:15px; display:block;font-size:1.125em; font-weight:400; font-size:12px; line-height:1.3em}
.mService h3:after {display:none; background:#fff url(../images/main/tel_icon.png) no-repeat center center; background-size:80%; content: ""; width:18px; height:18px; border-radius:50px; padding:4px; margin:10px auto}
.mService .telnumber {font-size:1.429em; font-weight:700; margin-bottom:10px}
.mService .bikenumber {font-size:14px; font-weight:700; margin-top:10px}
.mService p {font-size:0.875em; line-height:1.2em}
.mService p.time {margin:5px 0}
.mService p.msg {font-size:12px; letter-spacing:-1px; line-height:1.4em}
.mService p.msg span {display:inline-block;}


/*팝업존*/
.popZone {position:relative;}
.popZone .customNavigation{position:absolute; bottom:5px; text-align:center; z-index:5; left:5%;}
.popZone .customNavigation a.btn{position:relative;/*text-indent:-999999px;*/ width:20px; height:20px; display:inline-block; padding:5px 10px; cursor:pointer;}
.popZone .customNavigation .prev{background:#1468d0 url() no-repeat center center;}
.popZone .customNavigation .next{background:#1468d0 url() no-repeat center center;}
.popZone .customNavigation .play{background:#1468d0 url() no-repeat center center;}
.popZone .customNavigation .stop{background:#1468d0 url() no-repeat center center;}
.popZone .customNavigation a.btn:after {display:block; width: 20px; height: 100%; font-family: 'FontAwesome';color: #ffffff; font-size:12px; text-align:center; position: absolute;top: 0; left: 0;}
.popZone .customNavigation a.btn.play:after {content: '\f04b'; }
.popZone .customNavigation a.btn.stop:after {content: '\f04d'; }
.popZone .customNavigation a.btn.next:after {content: '\f054'; }
.popZone .customNavigation a.btn.prev:after {content: '\f053'; }
.popZone .owl-controls {display:none !important;}
.popZone >item img {max-width:100%; height:100%}


/*section02*/

#section2 { position:relative; width:100%; padding-bottom:20px; background:#1567cb url(http://railbike2020.cdn3.cafe24.com/section2_bg.jpg) no-repeat center bottom; background-size:auto 633px}
#section2 h2 {text-align:center; color:#fff; font-size:1.429em; line-height:1.3em; padding:25px 0 20px 0 }
.inner {width: 100%;max-width: 1200px;min-width: 320px;position: relative;margin: 0 auto;}
.scrollDown {text-align:center; position:absolute; width:50%; left:25%; bottom:250px; z-index:99;-webkit-animation: bounce 3000ms infinite;animation: bounce 3000ms infinite;}
.scrollDown a {display:inline-block;}


#tour{margin: 0 auto;}
#tour .item{max-width:280px; margin: 0 auto;}
#tour .item div.frame {overflow:hidden;}
#tour .item a {display:block;}
#tour .item a img { -webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear; transition: all 0.5s linear;border-radius: 3px; position: relative;}
#tour .item a:hover img {-webkit-transform: scale(1.1, 1.1);-moz-transform: scale(1.1, 1.1);-ms-transform: scale(1.1, 1.1);-o-transform: scale(1.1, 1.1);transform: scale(1.1, 1.1);}
#tour div.owl-item dl {background:#01a9f2; color:#fff}
#tour div.owl-item:first-child  dl {background:#01a9f2;}
#tour div.owl-item:nth-child(odd) dl  {background:#e93c20;}
#tour div.owl-item:nth-child(even) dl  {background:#01a9f2;}
/*#tour div.owl-item:nth-child(4) dl  {background:#e93c20;}*/
#tour .item dl {padding:25px;}
#tour .item dl dt{font-size:1.429em;display:block; padding:8px 0; font-weight:700}
#tour .owl-pagination .page span{background:#c8c8c8;}
#tour .owl-pagination .active span{background:#ffcb08;}
#tour .owl-dot.active span, #sketch .owl-dots .owl-dot:hover span{background:#ffcb08;}
#tour .owl-buttons{display:none;}
#section2 .owl-prev {display:none;}
#section2 .owl-next {display:none;}
#tour .owl-dots {display:none;}








/*타블렛용 css*/
@media all and (min-width:768px) {
	
	.conGroup1 {position:relative; display:table; width:100%}
	/*.conGroup2 {overflow:hidden; margin-top:2.143em}
	.conGroup2 > div {min-height:200px;}*/
	.conGroup1 > div {width:24%; display:table-cell}
	.conGroup1 div:nth-child(2) {width:52%;order:0}
	.conGroup1 div.timeBox {width:52%;order:0}
	.station{padding:40px 0 30px 0; min-height:200px}
	.station h3 {font-size:1.500em; margin-bottom:15px}
	.station .waitNum {font-size:2.125em;}
	.station .time {font-size:1em; padding:0 0 0.875em 0}
	
	.ticktingNum {font-size:1em; letter-spacing:0px; padding:4px 15px; }
	
	.gungchon{border-radius:0 40px 40px 0 }
	.yonghwa {border-radius:40px 0 0 40px}
	.timeBox {min-height:200px;padding:40px 0 30px 0; border-radius:40px 40px}
	.timeBox .today {font-size:1.0em; margin-bottom:0.5em}
	.timeBox .status { font-size:1.571em; line-height:1.2em; padding:0 0 12px 0;}
	.timeBox .todaymsg {font-size:1.0em; margin-top:0.357em; font-weight:400}

	.baro_btn {padding:4px 15px; font-weight:700}
	.timetable {margin:15px auto 0 auto; }
	
	.mBoard {/*width:50%; float:left;*/background: #fff; padding:30px 1.0em 20px 1.0em;}
	.mBoard div .more {right:15px;top:40px;}
	.mBoard dl dt a span.date {color:#666; display:block; clear:both}
	.mBoard dl dd {font-size:14px;}
	.mService {/*width:50%; float:left;*/ margin:0; text-align:center}
	.mService > div.tel1,.mService > div.tel2 {padding:20px 1.0em 10px 1.0em; }
	.mService h3 {position:relative; width:100%; display:inline-block; left:0; top:-10px; text-align:left; padding-bottom:2px; font-size:1em}
    .mService h3:after {display:block;margin:0px auto; position:absolute; right:0; top:-5px;}
	.mService .telnumber {font-size:	1.714em; margin-bottom:15px; letter-spacing:-1px}
	.mService p span {font-weight:400; margin-top:5px}
	.mService p.msg {font-size:13px; letter-spacing:0px; line-height:1.3em; margin-top:10px}
	.mService p.msg span {display:block;}
	.popZone {/*max-width:590px; float:left*/ background:#f5f5f5 }
	
	#section2 {min-height:500px; padding-bottom:50px;}
	#section2 h2 {font-size:3.214em; padding:75px 0 40px 0 }
	#section2 .owl-prev {display:block;width:50px; height:90px; text-indent: -999999px; background:url(../images/main/prev1.png) no-repeat left top; position:absolute; top:30%; left:-10%;}
 	#section2 .owl-next {display:block;width:50px; height:90px; text-indent: -999999px; background:url(../images/main/next1.png) no-repeat left top; position:absolute; top:30%; right:-10%;}
	

	

}




/* PC용 CSS */
@media all and (min-width:1024px) {
/*common*/

.ver_web{display:block !important;}
.ver_mobile{display:none !important;}
.conGroup2 {flex-flow: row nowrap; justify-content: space-between; padding-bottom:50px;width:100%;  max-width:1200px; margin:1em auto }
/*.conGroup2 > div {min-height:275px;}*/
.mBoard {width:24%; padding:40px 2.0em 40px 2.0em;}
.mService {width:24%; margin:0 0.5%;}
.mService > div.tel1,.mService > div.tel2 {height:100%; padding:30px 1.286em 20px 1.286em;}
.mService .telnumber {font-size:1.5em; margin-bottom:0px;}
.mService p.time {margin:1em 0}
.mService p.msg {margin-top:20px}
.popZone {width:51%;}
#mainContwrap {width:100%;}


}


/* 와이드용 CSS */
@media all and (min-width:1280px) {
  .popZone {/*max-width:600px;*/}
 .mBoard {padding:40px 2.143em 40px 2.143em;}
 #mainContwrap {margin:-100px auto 0 auto;}
	
}

/*pc main visual*/
	
    .videoWrap {position: relative;width: 100%;padding-bottom: 56.25%;}/*16:9는 56.25% (=9/16 * 100), 4:3은 75%입니다.*/
	.videoWrap .myVideo {position: absolute; left: 50%; transform:translateX(-50%); top: 0; z-index: 5; width: 100%;}
	
	.visualText {position:absolute; width:100%;  left:50%; top:15%; transform:translateX(-50%); z-index:90; text-align:center; color:#fff}
	.visualText .btxt {font-family: 'NanumSquare';font-size: 2.0em;text-shadow: 0 0 10px #000;line-height: 1.0em;font-weight: 700; margin-bottom: 10px;}
	.visualText .btxt span {display:block}
	.visualText .stxt {display:none; font-size: 16px;text-shadow: 0 0 10px #000;line-height: 1.2em;font-weight: 400;}
	
	@media all and (min-width:768px) {
		.visualText .stxt {display:block}
		}
	
	
	@media all and (min-width:1024px) {
		.main_visual {max-height:820px; overflow:hidden}
		.visualText {top:50%; transform:translate(-50%,-50%); margin-top:-50px}
		.visualText .btxt {font-size: 4.286em; margin-bottom:30px}
		.visualText .stxt {font-size: 24px;}
	}


	@media all and (min-width:1600px) {
	.main_visual {max-height:none;}
	.visualText {top:45%;}

	}




/*비메오*/
/*.vimeoWrap {position: relative; width: 100%;padding-bottom: 56.25%; overflow:hidden; background:url(../images/main/railbikeMmovie.png)} 트래픽때문에 CDN으로 이전*/
.vimeoWrap {position: relative; width: 100%;padding-bottom: 56.25%; overflow:hidden; background:url(http://railbike2020.cdn3.cafe24.com/railbikeMmovie.png); background-size:cover}/*16:9는 56.25% (=9/16 * 100), 4:3은 75%입니다.*/

.vimeoWrap iframe {position: absolute; left:0; width: 100%; height: 100%;}


@media only screen and (min-width:1200px){
	.vimeoWrap iframe {/*bottom:-100px; top:-9em*/width: 105%; height: 105%;}
}