/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
*/
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }

/* background-image: linear-gradient(#04befe, #4481eb);*/

/* #CSS RESET
 ===================================================================*/
html, body, div, span, applet, object, iframe, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
:focus {
  outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

html,body{
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { border:0;}

address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}

caption,th { text-align:left;}
q:before,q:after { content:'';}
abbr,acronym { border:0;} 

body {
  border: 0 none;
  font-size: 100%;
  margin: 0;
  outline: 0 none;
  padding: 0;
  vertical-align: baseline;
  font-size: 16px;
  line-height: 25px;
  font-family: 'Open Sans',Arial, Helvetica, sans-serif; 
  font-weight: normal;
  color: #454748;
  background-color: #fff;
  -webkit-font-smoothing: antialiased !important;
  -webkit-text-size-adjust: 100% !important;
}

.bold { font-weight:bold !important;}
.font-light { font-weight:100 !important;}
.font-norm { font-weight:normal !important;}

::selection{
  background-color: #caeeed;
  color:#333;
}

::-moz-selection {
  background-color: #caeeed;
  color:#333;
}

.relative {position: relative;}
.absolute {position:absolute;}

/*===================================================================*/

body {
  color: #6a6a6a;
  background-color: #f6f6f6;

  font-family: 'Poppins', Arial, Helvetica, 'Noto Sans TC', sans-serif; 

  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 32px;
}

a {
  color: #555;
  color: inherit;
  transition: all .2s;
}

a:hover {
  color: #444;
  text-decoration: none;
}

ul {
  padding-left: 12px;
}

li {
  list-style: none;
}

/*==================================
    NAV BOTTOM
==================================*/

	nav.nb {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
	}

	@media screen and (min-width: 992px) {
		nav {
			display: none;
		}
	}

	.nav-bottom {
	  background-color: #fcfcfc;
	  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
/*	  background-image: linear-gradient(#04befe, #4481eb);*/
/*	  background-image: linear-gradient(#4481eb, #104196);*/
	  overflow: hidden;
	  padding: 10px 0;
	  margin: 0;
	  text-align: center;
	  font-size: 13px;
	  box-shadow: 0 -2px 24px 0px rgba(0, 0, 0, .1);
	}

	a.nav-b-hover {
/*		color: rgba(255, 255, 255, .8);*/
/*		opacity: .8;*/
		transition: .3s ease-in;
	}

	a.nav-b-hover:hover {
		color: #4481eb;
		font-weight: 500;
		transition: all;
	}

/*==================================
    TIMELINE
==================================*/

	/*-- Copyright (c) 2017 by Brady Wright --*/

    /*-- GENERAL STYLES
    ------------------------------*/
    .timeline {
        line-height: 1.4em;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .timeline h1, h2, h3, h4, h5, h6 {
        line-height: inherit;
    }

    .timeline-title {
    	font-size: 15px;
    	font-weight: 500;
    	letter-spacing: 1px;
    	margin: 15px 0 7px 0; 
    	transition: color 0.2s ease-in-out;
    	color: #777;
    }

    /*----- TIMELINE ITEM -----*/

    .timeline-item {
        padding-left: 40px;
        position: relative;
    }
    .timeline-item:last-child {
        padding-bottom: 0;
    }

    /*----- TIMELINE INFO -----*/

    .timeline-info {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1.6px;
        margin: 0 0 1.2em 0;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color 0.2s ease-in-out;
    }

    /*----- TIMELINE MARKER -----*/

    .timeline-marker {
        position: absolute;
        top: 0; 
        bottom: 0; 
        left: 0;
        width: 15px;
    }

    .timeline-marker:before {
        background: #4481eb;
        border: 3px solid #4481eb;
        border-radius: 100%;
        content: "";
        display: block;
        height: 15px;
        position: absolute;
        top: 4px;
        left: 0;
        width: 15px;
        transition: background 0.3s ease-in-out,
        border 0.3s ease-in-out;
    }

    .timeline-marker:after {
        content: "";
        width: 3px;
        background: #CCD5DB;
        display: block;
        position: absolute;
        top: 24px;
        bottom: 0;
        left: 6px;
    }

    .timeline-item:last-child .timeline-marker:after {
        content: none;
    }

    .timeline-item:hover .timeline-marker:before {
        background: transparent;
        border: 3px solid #4481eb;
    }

    /*----- SONIA -----*/

    .timeline-item:hover .timeline-info {
        color: #4481eb;
    }

    .timeline-item:hover .timeline-title {
    	color: black;
    }

    /*----- TIMELINE CONTENT -----*/

    .timeline-content {
        padding-bottom: 40px;
    }
    .timeline-content p:last-child {
        margin-bottom: 0;
    }

	/* sonia 2019-06-28 add */
    @media screen and (max-width: 480px) {
    	.timeline-item .timeline-info {
	        color: #4481eb;
	    }

    	.timeline-item .timeline-title {
    		color: black;
    	}
    }


    /*----------------------------------------------
        MOD: TIMELINE SPLIT
    ----------------------------------------------*/


    @media (min-width: 768px) {
        .timeline-split .timeline {
            display: table;
        }
        .timeline-split .timeline-item {
            display: table-row;
            padding: 0;
        }
        .timeline-split .timeline-info,
        .timeline-split .timeline-marker,
        .timeline-split .timeline-content,
        .timeline-split .period .timeline-info {
            display: table-cell;
            vertical-align: top;
        }
        .timeline-split .timeline-marker {
            position: relative;
        }
        .timeline-split .timeline-content {
            padding-left: 30px;
        }
        .timeline-split .timeline-info {
            padding-right: 30px;
        }
    }


    /*----------------------------------------------
        MOD: MARKER OUTLINE
    ----------------------------------------------*/

        .marker-outline .timeline-marker:before {
            background: transparent;
            border-color: #4481eb;
        }
        .marker-outline .timeline-item:hover .timeline-marker:before {
            background: #4481eb;
        }


/*==================================
    Box
==================================*/

	.box {

	  background-color: white;

	  width: 60%;
	  height: auto;
	  border-radius: 24px;
	  margin: 36px auto 10px auto;
	  z-index: 99;
	  box-shadow: 0 6px 15px rgba(36,37,38,0.08);

	  border: 1px #8bb1f3 solid;
	}

	.box-wrapper {
		width: 60%;
		height: auto;
		margin: 0 auto;
	}

	@media screen and (max-width: 768px) {
		.box, .box-wrapper {
			width: 90%;
		}
	}

	.box:hover {
	  box-shadow: 5px 12px 20px rgba(36,37,38,0.13);
	  transition: box-shadow .2s ease-in;
	}

	.box-header {
	  background-color: #e2e2e2;
	  height: auto;
	  width: 100%;
	  border-radius: 24px 24px 0 0;
	  font-size: inherit;
	  letter-spacing: 1.2px;
	  font-weight: 700;
	}

	.box-content {
		padding: 40px 28px 50px 28px;
	}


	.left, .right {
	  display: inline-block;
	  padding: 22px 0 20px 0;
	  width: 50%;
	  text-align: center;
	}

	.left {
	  float:left; 
	  border-radius: 24px 0 0 0;
	}

	.right {
	  float: right;
	  border-radius: 0 24px 0 0;
	}

	.middle {
	  display:block;
	  padding: 22px 0 20px 0;
	  width: 100%;
	  text-align: center;
	  border-radius: 24px 24px 0 0;
	}

	/*box-header 3等分*/
	.lt, .rt, .mid {
	  display: inline-block;
	  padding: 22px 0 20px 0;
	  width: 33.33333333333333%;
	  text-align: center;
	}

	.lt {
	  float:left; 
	  border-radius: 24px 0 0 0;
	  
	}

	.mid {
		float: left;
	}

	.rt {
	  float: right;
	  border-radius: 0 24px 0 0;
	}

	.left:hover,
	.right:hover,
	.middle:hover {
	  background-color: #ccc;
	  color: #444;
	  transition: all .2s ease-in;
	}

	.active{
		background-image: linear-gradient(60deg, #04befe 0%, #4481eb 100%) !important;
		color: white !important;
	}

	.left.active, .lt.active {
		box-shadow: 2px 0 7px #ccc;
	}

	.right.active {
		box-shadow: -2px 0 7px #ccc;
	}

	.clearfix {
	  clear: both;
	}


/*==================================
    SIDEBAR
==================================*/

	#sidebar-stiky {
		margin-bottom:20px;
	}
	#sidebar-stiky.affix-top{
		position:relative;
	}
	#sidebar-stiky.affix-bottom{
		position:absolute; 
	}
	#sidebar-stiky.affix{
		position:fixed;
		top:60px;
	}

	/*2018-04-27 Sonia Fix*/
	#sidebar-stiky.affix ul {
		display: block;
	}

/* #BLOG 2 #NEW-2
================================================== */
	.blog-categories2 {
		margin:0;
		padding:0;
	}
	.blog-categories2 li{
		list-style: none;
	}
	.blog-categories2 li a{
	  color:#454748;
		height:38px;
		line-height:38px;
		display:inline-block;
		padding:0;
		background: none !important; 
	}
	.blog-categories2 li a:hover {
	  color:#000;
	}
	.blog-categories2 li.current a {
	  color:#000;
		transition: all .3s ease 0s;
	}

/*==================================
    HIDDEN
==================================*/

	@media (max-width: 767px) {
	  .hidden-xs {
	    display: none !important;
	  }
	}

	@media (min-width: 768px) and (max-width: 991px) {
	  .hidden-sm {
	    display: none !important;
	  }
	}

	@media (min-width: 992px) and (max-width: 1199px) {
	  .hidden-md {
	    display: none !important;
	  }
	}

	@media (min-width: 1200px) {
	  .hidden-lg {
	    display: none !important;
	  }
	}

/*==================================
    FOOTER
==================================*/

	.footer-wd {
		width: 60%;
	}

	/*Copyright*/
	.copr {
		text-align: left;
	}

	/*Conditions*/
	.cond {
		text-align: right;
	}

	/*Social Icon*/
	.social {
		text-align: center;
		margin-top: 30px;
	}

	.social li i {
		padding: 0 15px;
	}

	@media screen and (max-width: 1199px) {
		.footer-wd {
			width: 90%;
		}
		.copr ,.cond {
			text-align: center;
		}
	}

	footer ul {
		padding-left: 0;
	}

	footer ul li {
		display: inline-block;
	}

	footer ul.cond li {
		display:inline-block;
		padding: 0 10px;
		letter-spacing: 1.1px;
	}

	footer ul.cond li:after {
		content: "|";
		font-weight: 300;
		position: relative;
		left: 11px;
	}

	footer ul.cond li:nth-last-child(1):after {
		content: " "; 
	}

	footer ul.cond li:nth-last-child(1) {
		padding-right: 0;
	}

	footer ul.cond li:nth-child(1) {
		padding-left: 0;
	}

	footer ul.cond li a:hover {
		color: #4481eb;
		transition: color .3s ease-in;
	}


/*==================================
    ACCORDION
==================================*/

	.accordion > dt {
		margin-bottom: 10px;
		font-weight: normal;
		letter-spacing: 0;
		font-family: 'Poppins', Arial, Helvetica, 'Noto Sans TC', sans-serif; 
	}
	.accordion > dt > a{
		display: block;
		position: relative;
		
		color: #323336;

		line-height: 26px !important;
		text-decoration: none;
		text-align: justify;
		
		padding: 10px 36px 8px 20px;
		border: 1px solid #e5e5e5;

		background-color: #eee;

		font-size: 18px;

		-webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
		   -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
		     -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
		    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
				transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	}

	.accordion > dt > a:hover{
		text-decoration: none;
		border-color: #ddd;
		background-color: #fcfcfc;
		color: #444;
	}

	.accordion > dt > a.active{
		color: #000;
		border-color: #ddd;
		background-color: #fcfcfc;
		cursor: default;
		font-weight: 700;
/*		text-shadow: 1px 1px 4px rgba(72, 180, 175, .5);*/
	}

	.accordion > dt > a:after{
		content: "\f107";
		width: 15px;
		height: 15px;
		margin-top: -8px;
		position: absolute;
		top: 50%;
		right: 10px;
		font-family: 'FontAwesome';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		font-size: 20px;
		line-height: 15px;
		text-align: center;
		color: #999;
		-webkit-font-smoothing: antialiased;
		-webkit-transition: all 0.25s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
		-moz-transition: all 0.25s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
		  -o-transition: all 0.25s cubic-bezier(0.000, 0.000, 0.580, 1.000);
		 -ms-transition: all 0.25s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
			 transition: all 0.25s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	}

	.accordion > dt > a.active:after,
	.accordion > dt > a.active:hover:after{
		content: "\f106";
		color: white;
		font-size: 20px;
	}

	.accordion > dt > a:hover:after{
		color: #444;
	}

	.accordion > dd{
		margin-bottom: 10px;
		padding: 0px 20px 20px 20px;
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 0;
		color: #454748;
		text-align: justify;
	}


	.feature {

		text-shadow: 2px 2px 15px rgba(72, 180, 175, .5);

		-webkit-transform: translateZ(0);
				transform: translateZ(0);

		-webkit-transition-duration: 0.25s;
				transition-duration: 0.25s;

		-webkit-transition-property: transform;
				transition-property: transform;

	}

	.feature:hover {
		-webkit-transform: scale(1.1) translateZ(0);
				transform: scale(1.1) translateZ(0);
	}

	.add-address {
		border: 1px #aaa dotted;
		background-color: #f1f1f1; 
		display: flex; 
		justify-content:center; 
		align-items:center;
	}

	.fw-7 { font-weight: 700 !important; }
	.fw-5 { font-weight: 500 !important; }
	.fw-4 { font-weight: 400 !important; }
	.fw-3 { font-weight: 300 !important; }
	.fw-1 { font-weight: 100 !important; }

	.main-bg-color {
		background-image: linear-gradient(60deg, #04befe 0%, #4481eb 100%) !important;
	}

	.main-color {
		color: #4481eb;
	}

	ol li {
		list-style : decimal;
	}

	ol li ol li {
		list-style: upper-latin;
	}

	p {
		text-align: justify;
	}

	.white {
		color: white !important;
	}

	.contact-item-1 {
		border-top:1px #aaa dotted;
		border-bottom: 1px #aaa dotted; padding: 25px 0;
	}

	.contact-item {
		border-bottom: 1px #aaa dotted; padding: 25px 0;
	}

	.contact-link:hover {
		color: #4481eb;
	}

	.contact-hover {
		color: #888;
		transition: all .3s ease-in;
	}

	.contact-hover:hover {
		color: #4481eb;
	}

/*==================*/

	.white {
		color: white !important;
	}

	.navbar-light .navbar-toggler {
		color: black;
		border: none;
	}

	button:focus {
		outline: none;
	}

	.ptm-12 {
		padding: 12px 0;
	}

	.nav-link {
		font-weight: 500;
		letter-spacing: 1px;
		transition: all .25s ease-in;
	}

	.navbar-light .navbar-nav .nav-link:hover {
		color: #4481eb;
	}

	@media screen and (min-width: 1025px) {
		.w-lg-100 {
			width: 100%
		}

		/* 2019-05-09 sonia add */
		.w-lg-50 {
			width: 50%
		}
		/* 2019-05-09 end */

		.jc-end {
			justify-content: flex-end;
		}

		.nav-item {
			margin: 0 10px;
		}
	}

/*==================================
	CUSTOM DATETIME PICKER
==================================*/

	/*2018-05-02 Sonia Add*/

	.bootstrap-datetimepicker-widget table td.today:before {
	  content: '';
	  display: inline-block;
	  border: solid transparent;
	  border-width: 0 0 7px 7px;
	  border-bottom-color: #4481eb;
	  border-top-color: rgba(0, 0, 0, 0.2);
	  position: absolute;
	  bottom: 4px;
	  right: 4px;
	}

	.bootstrap-datetimepicker-widget table th {
	    height: 20px;
	    line-height: 34px;
	    width: 20px;
	    color: #4481eb;
	    font-weight: 700;
	}

	.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
	     background-color: #4481eb; 
	     color: #ffffff; 
	     text-shadow: none;
	     font-weight: 700; 
	}

	.bootstrap-datetimepicker-widget table td.day {
	    height: 20px;
	    line-height: 40px;
	    width: 20px;

	}

	.bootstrap-datetimepicker-widget table td span {
	  display: inline-block;
	  width: 54px;
	  height: 34px;
	  line-height: 34px;
	  margin: 2px 1.5px;
	  cursor: pointer;
	  border-radius: 4px;
	}

	.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
	    color: #bbb;
	}

	/*END*/


/*2018-06-10 sonia add for line icon*/
a img.line-hover {
	display: none;
}

a:hover img.line {
	display: none;
}

a:hover img.line-hover {
	display: block;
}
/*END*/


/*2019-05-09 sonia add for mobile nav 2 column*/
@media screen and (max-width: 1024px) {

	.navbar-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}

	li.nav-item {
		width: 50%;
	}

	li.nav-item:first-child,
	li.nav-item:nth-child(2) {
		padding-top: 20px;
	}
}
/* 2019-05-09 end*/

/* 2019-08-02 start */
@media screen and (max-width: 480px) {

	.row.service-wrapper {
		padding-right: 7.5px;
		padding-left: 7.5px;
	}

	.row > .col-4.service-btn {
		padding: 6px;
	}

	.service-item {
		padding-left: 10px;
		padding-right: 10px;
		text-align: center;
	}

	.service-item > .service {
		margin-bottom: 10px;
	}

	.fz-xs-16 {
		font-size: 16px;
	}
}

/* 2019-08-02 end */

.bg-facebook {
	background-color:	#3b5998;
	color: #fff;
}
.bg-line {
	background-color:	#00b900;
	color: #fff;
}

.lh-0 { line-height: 0;}
.lh-1 { line-height: 1;}
.lh-12 { line-height: 1.2;}
.lh-15 { line-height: 1.5;}
.lh-18 { line-height: 1.8;}

.ls-0 {letter-spacing: 0;}
.ls-1 {letter-spacing: 1;}

/* 2025-07-23 */

.bg-curve {
	position: absolute;

	top: 20vh;

/*	height: 160px;*/
	height: 130px;
	width: 100%;
	
	background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
	
	mask: radial-gradient(80% 100% at 50% -78%,#0000 calc(100% - 2px),#000);
	clip-path: ellipse(80% 100% at top);
	
	transform: rotate(180deg);
}

.bg-curve.gr {
	background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.bg-curve.bl {
	background-image: linear-gradient(to left, #04befe 0%, #4481eb 100%);
}

.bg-curve.or {
	background-image: linear-gradient(to left, #f9d423 0%, #ff4e50 100%);
}

.bg-img-user {
	position: absolute;
	right: 6%;
	bottom: -24px;
}

.bg-img-user img {
	height: 20vh;
	width: auto;
}

.nav-b-hover i.font-21 {
	line-height: 1.2 !important;
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
	.bg-curve {top: 14vh;}
	.bg-img-user {right: 16%;}
}

/* ==============================================
	Map, leaflet.js 的 Custom CSS @2025-07-22
================================================= */

#map { height: calc(100vh - 70px); }

.leaflet-tooltip-own {

	position: absolute;
	margin-top: 23px;

/*				padding: 4px;*/
/*				background-color: gray;*/

	border: 0px solid #000;
	color: white;
	white-space: nowrap;

	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;

	pointer-events: none;
/*				box-shadow: 0 1px 3px rgba(0,0,0,0.4);*/

	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;

	background-color: rgba(0, 0, 0, .6);
	
	-webkit-backdrop-filter: blur(10px);
	   -moz-backdrop-filter: blur(10px);
	    -ms-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);

	border-radius: 4px;
	box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.4);

	padding: 6px 12px 8px 12px;
}

.leaflet-popup-own {
	margin-bottom: 40px;
}

.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: rgba(0, 0, 0, .5);
}

.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: rgba(0, 0, 0, .5);
}

.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: rgba(0, 0, 0, .5);
}

.speedtime {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.map-passenger {
	border-top: 1px #fff solid;
	margin-top: 6px;
	padding-top: 6px;
}

.map-passenger span:nth-of-type(1) {
	margin-left: 0px !important;
}

.map-passenger span {
	margin-left: 12px;
}



/* ===== End. Map, leaflet.js 的 Custom CSS ===== */


table.table.table-striped {
	font-size: 16px;
	color: #1e1f1f;
	letter-spacing: 0;
}

.table thead th {
	border: none;
	text-align: center;
	font-weight: 700;
	background-image: linear-gradient(#04befe, #4481eb);
}

.table td {
	padding-left: 4px;
	padding-right: 4px;
	text-align: center;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #e3ecfc
}


/* ==============================================
	學生車票 & QRCOde 之 Bus Ticket @2025-07-25
================================================= */


.ticket-wrap {
	width: 100%;
}

.ticket {
	background: linear-gradient(to bottom, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .82) 32%, #fff 26%, #fff 100%);
	height: 182px;
	float: left;
	position: relative;
	padding: 1em;
}

.ticket-left {
	border-radius: 8px;
}

.ticket-right {

	border-left: .18em dashed #245ba5;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	
	&:before,
	&:after {
		content:"";
		position: absolute;
		display: block;
		width: .9em;
		height: .9em;
		background: #245ba5;
		border-radius: 50%;
		left: -.5em;
	}

	&:before {
		top: -.4em;
	}

	&:after {
		bottom: -.4em;
	}
}

.bus-ticket-info-qrcode {
	height: calc(100% - 32px - 24px - 12px);
}

@media screen and (max-width: 767px) {
	
	.ticket {
		height: auto;
		background: linear-gradient(to bottom, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .82) 27%, #fff 26%, #fff 100%);
	}

	.ticket.ticket-right {

		height: 220px;

		border-top: .18em dashed #245ba5;
		border-left: none;

		border-bottom-left-radius: 8px;
		border-top-right-radius: 0px;

		border-bottom-right-radius: 8px;
		
		&:before,
		&:after {
			content:"";
			position: absolute;
			display: block;
			width: .9em;
			height: .9em;
			background: #245ba5;
			border-radius: 50%;
			left: -.5em;
		}

		&:before {
			top: -.4em;
		}

		&:after {
/*			bottom: -.4em;*/
			left: unset;

			top: -.4em;
			right: -.5em;
			
		}

	}

	.ticket.ticket-left {
		letter-spacing: 0;
		font-size: 15.6px;
	}

	.bus-ticket-info-qrcode {
		width: auto;
		height: 120px;
	}
}

/* ===== */

.owl-page.active {
	background-image: none !important;
}