/* 기본적으로 모든 포커스에 outline 적용 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: unset;
  outline-offset: unset;
}


/* focus-visible일 경우(탭으로만 접근했을 때) outline 적용 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: unset;
  outline-offset: unset;
}



.scrolled #ttHeader {background: #fff; 
    transform-origin: top;
    height:60px!important;
    transition: all 0.3s ease;
    top:0;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
}
    
.scrolled #ttHeader .header-inner h1{background:url('../images/Logo-scroll.png') no-repeat center center;}
.scrolled #ttHeader .header-inner h1 img{width:90%; transition: all 0.3s ease;}
.scrolled #ttHeader .navicon{background:#333;}
.scrolled #ttHeader .navicon::before, .scrolled #ttHeader .navicon::after{background:#333;}
.scrolled #ttHeader h2{background-size:80%;}


.taxiToday .scroll-icon:after{content: '자세히 보기'; font-size:16px; left:0; bottom: -8%; margin-left:0; color:#fff; width: max-content; transform: translateX(-50%); display:none;}
.taxiToday .scroll-icon {
    position: fixed;
    border: none;        
    width: auto;
    height: auto;
    margin:0 auto;
}

.taxiToday .scroll-icon:before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin:0 auto;
    background: url("../bridge/img/arrow-bottom.svg") no-repeat center;
    border: none;
    transform: none;
    top: 0;
    left: 0;
    margin-left:0;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
    transform: translateX(-50%);
    background-size:contain;
}

#m-nav{display:none;}

#chatbot{position:fixed; bottom:8%; right:4%; z-index:9999; text-align: center;}
#chatbot a{display:inline-block; background:#FEE500; width:64px; height:64px; border-radius:100%; box-shadow: 2px 4px 12px rgba(17, 17, 17, 0.2);}
.chatbot-bubble {position: relative; background: #222; color: #fff; font-size: 14px; padding: 5px 10px; border-radius: 12px; white-space: nowrap;}
  
  /* 말풍선 아래 꼬리 */
.chatbot-bubble::after {content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #222;}

.taxiToday-logo{position: absolute; z-index: 9998; top: 16%; left: 50%; transform: translate(-50%, 0); text-align:center; width:100%;}
.taxiToday-logo .intro-txt{margin-top:16px; color:#fff;}
.taxiToday-logo .intro-txt h1{font-size:48px; font-weight: bold; font-family: "TmoneyRound", "Noto Sans KR", "AppleGothic",sans-serif; letter-spacing: -0.5px; text-shadow: 2px 2px 5px rgba(0,0,0,0.4);}
.taxiToday-logo .intro-txt p{font-size:24px; text-shadow: 2px 2px 5px rgba(0,0,0,0.4);}




.part-txt{color:#222; text-align:center; position: relative; z-index:1;}
.part-txt h2{font-size:48px; font-weight: bold; }
.part-txt p{font-size:24px;}

.part-txt.white{color:#fff;}

.line2{line-height:1.3;}

.service-txt{text-align:left; border-radius:32px; padding-top:24px; color:#fff; }
.service-txt .service-tit{display:flex; gap:8px; align-items: center; margin-bottom:40px; }
.service-txt .service-tit p{font-size:32px; font-weight: bold; font-family: "TmoneyRound", "Noto Sans KR", "AppleGothic",sans-serif; letter-spacing: -0.5px;}
.service-txt .service-tit svg path{fill:#fff;}

.service-txt .service-list{display:inline-block;}
.service-txt .service-list ul li{text-align:left; position:relative; font-size:18px; font-weight: 300; margin-bottom:12px; display:flex; gap:8px;}
.service-txt .service-list ul li:last-child{margin-bottom:0;}
.service-txt .service-list ul li span{background:#fff; border-radius:100%; width:32px; height:32px; display:flex; align-items: center; justify-content: center; font-size:16px;}

.sub{margin:180px auto 0;}


.sub .taxiToday-logo{position: relative;}
.sub.introduce-content{position:relative; z-index:1;}

.inner-sub{padding:180px 0;}
.inner-sub .cont-area{max-width:1200px; margin:0 auto;}

/* 기본 리셋 설정 (기존에 있다면 생략 가능) */
#ttHeader ul { list-style: none; padding: 0; margin: 0; }
#ttHeader a { text-decoration: none; color: #333; }
#ttHeader h1 {background:url('../images/Logo.png') no-repeat center center; width:218px; height:30px;}
#ttHeader h2 {background:url('../images/ko/sub/transport/playstore-btn.png') no-repeat center center; background-size:contain; width:180px; height:54px;}

#ttHeader {position: fixed; top: 2%; left: 0; width: 100%; z-index: 9999;}

#ttHeader .header-inner {display: flex; justify-content: space-between; align-items: center; height: 60px; max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 100; }
#ttHeader .header-inner .left-area{display:flex; align-items: center; gap:32px;}


#ttHeader .menu-btn {display: none;}
#ttHeader .menu-icon {cursor: pointer; padding: 20px 10px; position: relative; user-select: none;}

#ttHeader .navicon {background: #fff; display: block; height: 2px; width: 24px; position: relative; transition: background 0.2s ease-out; z-index:9999;}

#ttHeader .navicon::before, 
#ttHeader .navicon::after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    transition: all 0.2s ease-out;
}
#ttHeader .navicon::before { top: -8px; }
#ttHeader .navicon::after { top: 8px; }


#ttHeader .menu-btn:checked ~ .menu-icon .navicon { background: transparent; }
#ttHeader .menu-btn:checked ~ .menu-icon .navicon::before { transform: rotate(-45deg); top: 0; background:#333;}
#ttHeader .menu-btn:checked ~ .menu-icon .navicon::after { transform: rotate(45deg); top: 0; background:#333;}


#ttEvent #ttHeader .navicon,
#ttEvent #ttHeader .navicon::before, 
#ttEvent #ttHeader .navicon::after {
    background: #333;
}

#ttEvent #ttHeader .menu-btn:checked ~ .menu-icon .navicon { background: transparent; }

#ttHeader .header-nav {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;  
    position: fixed;  
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    background: #fff;  
    z-index: 90; 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(-20px); 
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
}

#ttHeader .header-nav.active {opacity: 1; visibility: visible; transform: translateY(0); }

#ttHeader .header-nav li {width: 100%;}
#ttHeader .header-nav li:last-child{margin:0;}
#ttHeader .header-nav li a {display: block; padding: 24px 0; font-size: 24px;  font-weight: 700; text-align: center; transition: color 0.2s;}
#ttHeader .header-nav li a:hover {color: #7630F0; }

#ttFooter footer{border-top:0;}
#ttFooter footer .footer-wrap{max-width:1200px; width:100%;}
#ttFooter footer .footer-wrap .bt-logo{display:inline-block;}
#ttFooter footer .footer-wrap .top-align{display:flex; align-items: center; justify-content: space-between; margin-bottom:24px;}

#ttFooter footer .footer-info{border-top:0; margin:0; padding:0;}
#ttFooter footer .footer-info .tmoney-info{justify-content: center; margin-bottom:0;}
#ttFooter footer .footer-info .tmoney-info .etc-info{gap:16px; margin-top:0;}
#ttFooter footer .footer-info .tmoney-info .etc-info .sns-list{margin-right:0;}


html .taxiToday {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    background-color: #12151e; 
  
    --black: #1a1c20;
    --white: #fff;
    --gray3: #333;
    --n-road: -4em;
    --p-road: 7em;
}
  
.taxiToday *, .taxiToday *::before, .taxiToday *::after {box-sizing: inherit;}

.taxiToday::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 10%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none; 
    z-index: 2; 
}
  
.taxiToday .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; 
    z-index: 0; 
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
  
  
  
.taxiToday-intro {
    margin: 0;
    height: 100vh;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    z-index: 1; 
    
    /* 차가 차선을 넘나드는 전체 애니메이션 */
    animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite;
  
    background-image: 
      radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%),
      radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%),
      radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%),
      radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%),
      linear-gradient(var(--black) 100%, transparent 0),
      radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%),
      radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%),
      radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%),
      radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%),
      linear-gradient(var(--black) 100%, transparent 0),
      linear-gradient(#151515 100%, transparent 0);
  
    background-size: 
      2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em, 1.95em 3.9em, 
      2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em, 1.95em 3.9em,
      13em 0.8em; 
  
    /* 💡 기존 Y축 값에 모두 +15em을 적용하고 기호 정리를 마친 포지션 값 */
    background-position: 
      calc(50% - 6.5em) calc(50% + 13.3em), 
      calc(50% - 5.3em) calc(50% + 18.4em), 
      calc(50% - 6.5em) calc(50% + 18.8em), 
      calc(50% - 4.3em) calc(50% + 18.2em), 
      calc(50% - 6.6em) calc(50% + 16.5em), 
      calc(50% + 6.5em) calc(50% + 13.3em),
      calc(50% + 5.3em) calc(50% + 18.4em), 
      calc(50% + 6.5em) calc(50% + 18.8em), 
      calc(50% + 4.3em) calc(50% + 18.2em), 
      calc(50% + 6.6em) calc(50% + 16.5em),
      center calc(50% + 18.8em);
}
  

  
.taxiToday-intro .taxi-body-img {
    position: relative;
    width: 16.5em; 
    height: auto;
    z-index: 3; 
    margin-top: 20.3em; 
    transform-origin: center bottom;
    animation: shake 3.5s linear infinite;
}
  
@keyframes line {100% { background-position: center 100%; }}
  
@keyframes car {
    15%, 23% { transform: translate3d(-2.3em, 0, 0); }
    36%, 42% { transform: translate3d(-0.8em, 0, 0); }
    61%, 71.5% { transform: translate3d(2.8em, 0, 0); }
    81%, 88% { transform: translate3d(1.5em, 0, 0); }
}
  
@keyframes move-road {
    5.5% { transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road), -11.975em, 0); }
    27%, 51% { transform: perspective(311px) rotateX(83deg) translate3d(var(--p-road), -11.975em, 0); }
    73%, 100% { transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road), -11.975em, 0); }
}
  
@keyframes shake {
    5%, 26% { transform: rotate(-2deg); }
    33%, 41% { transform: rotate(-0.5deg); }
    48%, 69% { transform: rotate(2deg); }
    80%, 95% { transform: rotate(0.5deg); }
}
  
@media screen and (max-width: 36em) {
    .taxiToday { font-size: 10px; }
    .taxiToday-intro::before { 
      width: 11em; 
      --n-road: -4em; 
      --p-road: 4em; 
    }
}



.taxiToday-introduce{
    display: grid;
    place-items: center;
    width: 100%;
    overflow:hidden;
    background: var(--bg);
    perspective: 10000px; 
    perspective-origin: 50% 50%;
    --radius: 25px;
    --bg: #7630F0;
}

#taxiToday-introduce-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; gap: 100px; justify-content: center; align-items: center; z-index: 0;}
#taxiToday-introduce-bg,.col {display: flex; gap: 100px;}

.col {display: flex; flex-direction: column; gap: 240px; opacity: 0.1;}

  
#taxiToday-introduce-bg .bg-img {border-radius: var(--radius); box-shadow: 4px 4px 5px 10px hsla(0, 0%, 100%, 30%); opacity: 0.5;}
#taxiToday-introduce-bg .bg-img .img-detail {width: 240px; height: auto; aspect-ratio: 9/19.5; overflow: hidden; border-radius: var(--radius);}
#taxiToday-introduce-bg .bg-img .img-detail img{
    height: 100%; width: calc(100% + 1px);
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

@keyframes scrollDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

@keyframes scrollUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}


#taxiToday-introduce-bg .col:nth-child(odd) {animation: scrollDown 30s linear infinite; }
#taxiToday-introduce-bg .col:nth-child(even) {animation: scrollUp 30s linear infinite; }





.review-container {max-width: 1600px; width: 100%; margin: auto; padding: 0 15px;}


.testimonial-area {position: relative;	z-index: 2; padding: 50px 0;}
.testimonial-area .owl-carousel {overflow: hidden; padding: 0 20px; margin: 0px -40px; padding-right: 40px;}
.testimonial-area .owl-stage-outer {
	padding: 30px 50px;
	margin-left: -34px;
	width: calc(100% + 100px);
}

.single-testimonial {border: 7px solid #fff; text-align: center; border-radius: 45px; position: relative; z-index: 2;}
.single-testimonial p {color: #fff; font-size: 18px; padding: 50px 32px; padding-bottom: 30px; position: relative; z-index: 3;}
.single-testimonial::before {
	content: "";
	position: absolute;
	left: -35px;
	top: -35px;
	background: url('../bridge/img/quotes.png') no-repeat var(--bg);
	background-size: 60%;
	width: 126px;
	height: 100px;
	transform: rotate(180deg);
	background-position: 34px 15px;
}
.single-testimonial::after {
	content: "";
	position: absolute;
	right: -35px;
	bottom: -34px;
	background: url('../bridge/img/quotes.png') no-repeat var(--bg);
	background-size: 60%;
	width: 126px;
	height: 100px;
	background-position: 34px 19px;
}
.round {width: 100%; height: 100%; position: absolute; z-index: 1;}
.round-1::before {
	content: "";
	position: absolute;
	left: 88px;
	top: -7px;
	width: 50px;
	height: 7px;
	background: #fff;
	border-radius: 30px;
}
.round-1::after {
	content: "";
	position: absolute;
	left: -7px;
	top: 62px;
	width: 7px;
	height: 50px;
	background: #fff;
	border-radius: 30px;
}
.round-2::before {
	content: "";
	position: absolute;
	right: 87px;
	bottom: -7px;
	width: 50px;
	height: 7px;
	background: #fff;
	border-radius: 30px;
	z-index: 1;
}
.round-2::after {
	content: "";
	position: absolute;
	right: -7px;
	bottom: 62px;
	width: 7px;
	height: 50px;
	background: #fff;
	border-radius: 30px;
	z-index: 1;
}
.client-taxi {
    background:#fff;
    width:80px;
    height:80px;
    border-radius:100%;
    overflow: hidden;
    display:flex;
    align-items:flex-end; 
    justify-content:center;
}
.client-taxi img{width:auto!important; max-width:100%;}

.client-info {position: relative; z-index: 3;}
.client-info a {
	width: 40px;
	height: 40px;
	border-radius: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
	font-size: 22px;
}
.client-info {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: left;
	padding-bottom: 50px;
    gap:14px;
}
.client-info h6 {
	color: #000;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}
.client-info span {
	display: inline-block;
	color: #fff;
	font-size: 14px;
}
.owl-dots button {
	background: #fff !important;
	width: 10px;
	height: 10px;
	border-radius: 26px;
	margin: 0 5px;
	transition: 0.3s;
}
.owl-dots {text-align: center; margin-top: 50px; z-index:10;}
.owl-dots button.active {width: 30px;}









.circles{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    z-index:3;
    
}

.circles li:nth-child(1){left: 25%; width: 80px; height: 80px; animation-delay: 0s;}
.circles li:nth-child(2){left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s;}
.circles li:nth-child(3){left: 70%; width: 20px; height: 20px; animation-delay: 4s;}
.circles li:nth-child(4){left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s;}
.circles li:nth-child(5){left: 65%; width: 20px; height: 20px; animation-delay: 0s;}
.circles li:nth-child(6){left: 75%; width: 110px; height: 110px; animation-delay: 3s;}
.circles li:nth-child(7){left: 35%; width: 150px; height: 150px; animation-delay: 7s;}
.circles li:nth-child(8){left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s;}
.circles li:nth-child(9){left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s;}
.circles li:nth-child(10){left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s;}



@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}






#slideMenu-wrap {position: relative; margin: 64px 0 0;}
#slideMenu-wrap .slider-holder {position: relative; width: 100%;}
#slideMenu-wrap .slider {position: relative; width: 100%; height: 80vh; margin-top:88px; overflow:hidden;}

.slider-item {position: absolute; width: 650px; height: 100%;}




.slider-nav {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: rgba(0, 0, 0, 0.8);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding: 7px 30px;
}
.go-prev,
.go-next {
    position: absolute;
    top: 46%;
    transform:translateY(-50%);
    height: 40px;
    width: 40px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 100%;
    z-index: 15;
}

.go-prev{left:28%;}
.go-next{right:28%;}

.go-prev i,
.go-next i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: white;
}

.go-prev:hover,
.go-next:hover,
.showSlider:hover {
    background-color: rgba(50, 50, 50, 1);
}





.slider-menu {
    position: relative;
    text-align: center;
    margin: 15px 0 0;
    overflow: hidden;
    background:#fff;
    padding:16px;
    border-radius:56px;
    box-shadow: 2px 4px 12px rgba(17, 17, 17, 0.2);
}

.slider-menu ul {position: relative; margin: 0; padding: 0; display:flex;}
.slider-menu ul li {width:100%; box-sizing: border-box;}

.slider-menu-item {
    transition: color 0.2s ease-in-out;
    display: flex;
    font-weight: bold;
    position: relative;
    padding:8px 0;
    justify-content: center;
    align-items: center;
    gap:8px;
    background-color:transparent;
    background:transparent;
    border-radius:48px;
    font-size:18px;
}



.slider-menu-item:hover {color: #7630F0; background:#f5f5f5;}


.colo-bg{display:flex; justify-content: space-between; max-width:800px; margin:0 auto; padding:48px; border-radius:32px; }
#slider-item-1 .colo-bg{background:#4F46E5;}
#slider-item-2 .colo-bg{background:#0EA5A4;}
#slider-item-3 .colo-bg{background:#F59E0B;}
#slider-item-4 .colo-bg{background:#8B5CF6;}
#slider-item-5 .colo-bg{background:#EC4899;}


#slider-item-4 .screen-slide{padding-bottom:0;}
#slider-item-4 .phone.android .screen:after{display:none;}

.current{color:#fff;}

.first.current {background:#4F46E5;}
.second.current {background:#0EA5A4;}
.third.current {background:#F59E0B;}
.four.current {background:#8B5CF6;}
.five.current {background:#EC4899;}

.current svg path{fill:#fff;}



.phone-wrap {width: 320px;}

.phone {
    background: #000;
    border-radius: 2rem;
    padding: 12px;
    width: 240px;
    min-height: 500px;
    position: relative;
    margin: 0 auto;
    zoom: 1.1;
    color: #000;
    box-shadow: 2px 4px 12px rgba(17, 17, 17, 0.5);
}

.phone .screen .status-bar{position:absolute; width:100%;}

.phone .screen .screen-top {position: relative; z-index: 99; display:flex; justify-content: space-between;}
.phone .screen .screen-menu {left: 1rem; min-height: 40px; position: absolute; width: calc(100% - 2rem); bottom: 1rem; display: flex;}
  
.phone.android .phone-top {
    background: transparent;
    position: absolute;
    width: calc(100% - 40px);
    top: 20px;
    height: 30px;
    left: 20px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    z-index: 1;
}
.phone.android .phone-top .camera {
    content: "";
    position: absolute;
    left: 50%;
    background: #131313;
    box-shadow: none;
    z-index: 999;
    top: 0px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
}
.phone.android .phone-top .camera:before {content: ""; position: absolute; left: 2px; background: #303861; box-shadow: none; z-index: 999; top: 2px; width: 10px; height: 10px; border-radius: 50%;}
.phone.android .phone-top .camera:after {content: ""; position: absolute; left: 4px; background: #68a1b3; box-shadow: none; z-index: 999; top: 4px; width: 2px; height: 2px; border-radius: 50%; opacity: 0.5;}
.phone.android .screen {
    background: #fff;
    min-height: 500px;
    border-radius: 18px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.phone.android .screen:after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    width: 100%;
    height: 40px;
    background: url('../bridge/img/android-lower-menu.svg');
    background-size: 70%;
    background-position: center center;
    background-repeat: no-repeat;
}
.phone.android .screen .screen-top .time {font-size: 12px; font-weight: 400; width: 50px; text-align: center; padding-top: 0.5rem; padding-left: 0.75rem;}
.phone.android .screen .screen-top .phone-status {
    width: 65px;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    background: url('../bridge/img/android-phone-status.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 15px;
}
  
.phone.android:before {content: " "; position: absolute; z-index: 1; top: 0px; left: 0px; right: 0px; bottom: 0px; border: 3px solid #4c4b4b; border-radius: 2rem; z-index: 0;}







.screen-wrapper {height: 100%; display: flex; justify-content: center; align-items: center;}
  
.slick-slider {min-width: 0;}
.slick-list {overflow: hidden;}
.slick-track {display: flex; align-items: flex-start;}
  
.screen-slide {position: relative;  padding:32px 0 48px;}

  
.screen-slide .slick-slide{margin:0;}
.slider__item img {max-width: 100%;}
  

.appmirror-wrap{text-align:center;}
.appmirror-wrap .mirror-video{display:flex; flex-direction: column; margin-bottom:32px; border-radius:16px; overflow:hidden;}
.appmirror-wrap .mirror-video:last-child{margin-bottom:0;}
.appmirror-wrap .mirror-video p{background:#fff; padding:8px 0; font-size:14px; color:#666;}



.timeline {margin: 4em auto; position: relative; max-width: 46em; color:#fff;}
.timeline:before {background-color: #fff; content: ''; margin-left: -1px; position: absolute; top: 0; left: 2em;width: 2px; height: 100%;}
  
.timeline-event {position: relative;}
.timeline-event:hover .timeline-event-icon {background-color: #a83279;}
.timeline-event:hover .timeline-event-thumbnail {
    -moz-box-shadow: inset 40em 0 0 0 #a83279;
    -webkit-box-shadow: inset 40em 0 0 0 #a83279;
    box-shadow: inset 40em 0 0 0 #a83279;
}
  
.timeline-event-copy {padding: 2em; position: relative; top: -1.875em; left: 4em; width: 80%;}
.timeline-event-copy h3 {font-size: 1.75em;  margin-bottom:16px; line-height: 1.3;}
.timeline-event-copy p:not(.timeline-event-thumbnail) {padding-bottom: 1.2em; font-weight: 300;}
.timeline-event-copy img{border-radius:16px; margin-bottom: 1.2em;}
  
.timeline-event-icon {
    background-color: black;
    outline: 4px solid white;
    display: block;
    margin: -0em 0.5em 0.5em -1.5em;
    position: absolute;
    top: 0;
    left: 2em;
    width: 3em;
    height: 3em;
    border-radius: 100%;
}
.timeline-event-icon::after{content: ''; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width:32px; height:32px;}
.timeline-event-icon.first::after{background:url('../bridge/img/timeline-icon01.png') no-repeat center center;}
.timeline-event-icon.second::after{background:url('../bridge/img/timeline-icon02.png') no-repeat center center;}
.timeline-event-icon.third::after{background:url('../bridge/img/timeline-icon03.png') no-repeat center center;}
.timeline-event-icon.four::after{background:url('../bridge/img/timeline-icon04.png') no-repeat center center;}
.timeline-event-icon.five::after{background:url('../bridge/img/timeline-icon05.png') no-repeat center center;}
.timeline-event-icon.six::after{background:url('../bridge/img/timeline-icon06.png') no-repeat center center;}
  
.timeline-event-thumbnail {
    -moz-transition: box-shadow 0.5s ease-in 0.1s;
    -o-transition: box-shadow 0.5s ease-in 0.1s;
    -webkit-transition: box-shadow 0.5s ease-in;
    -webkit-transition-delay: 0.1s;
    transition: box-shadow 0.5s ease-in 0.1s;
    color: white;
    font-size: 0.75em;
    background-color: black;
    -moz-box-shadow: inset 0 0 0 0em #ef795a;
    -webkit-box-shadow: inset 0 0 0 0em #ef795a;
    box-shadow: inset 0 0 0 0em #ef795a;
    display: inline-block;
    margin-bottom: 1.2em;
    padding: 0.25em 1em 0.2em 1em;
}


.platform-wrap{
    margin-top:88px; 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    justify-items: center;
    align-items: stretch;
}

.platform-wrap .plat-list{width:100%; border-radius:32px; overflow: hidden; box-shadow: 0px 2px 8px rgba(17, 17, 17, 0.1);}
.platform-wrap .plat-list:last-child{margin-bottom:0;}
.platform-wrap .plat-list .plat-tit{text-align:center; padding:24px 0;}
.platform-wrap .plat-list .plat-tit p{font-size:20px; font-weight: 600;}
.platform-wrap .plat-list .plat-btns ul{display:flex; padding:32px 16px; justify-content: flex-start; gap:16px;}
.platform-wrap .plat-list .plat-btns ul li{width:33.3%; text-align:center;}
.platform-wrap .plat-list .plat-btns ul li p{font-size:16px; line-height: 1.2;}
.platform-wrap .plat-list .plat-btns ul li a:hover{opacity: 0.5; transition: all 0.3s ease;}


.platform-wrap .plat-list.first{border:1px solid #e3e1ff;}
.platform-wrap .plat-list.first .plat-tit{background:#e3e1ff; color:#4F46E5;}
.platform-wrap .plat-list.second{border:1px solid #b7e1e1;}
.platform-wrap .plat-list.second .plat-tit{background:#b7e1e1; color:#0a8686;}
.platform-wrap .plat-list.third{border:1px solid #ffeed1;}
.platform-wrap .plat-list.third .plat-tit{background:#ffeed1; color:#F59E0B;}
.platform-wrap .plat-list.four{border:1px solid #e0d7f3;}
.platform-wrap .plat-list.four .plat-tit{background:#e0d7f3; color:#8B5CF6;}
.platform-wrap .plat-list.five{border:1px solid #f9cae1;}
.platform-wrap .plat-list.five .plat-tit{background:#f9cae1; color:#EC4899;}


.platform-wrap .plat-list .plat-icon{width:48px; height:48px; border-radius:100%; display:flex; justify-content: center; align-items: center; margin:0 auto; margin-bottom:4px;}
.platform-wrap .plat-list.first .plat-icon{background:#4F46E5;}
.platform-wrap .plat-list.second .plat-icon{background:#0a8686;}
.platform-wrap .plat-list.third .plat-icon{background:#F59E0B;}
.platform-wrap .plat-list.four .plat-icon{background:#8B5CF6;}
.platform-wrap .plat-list.five .plat-icon{background:#EC4899;}




/* Tablet */
@media only screen and (max-width: 1366px) {

    #ttHeader .header-inner{max-width:1024px;}
    #ttFooter footer .footer-wrap {max-width: 1024px;}
    .inner-sub .cont-area{max-width:1024px;}

    .review-container {max-width: 1200px;}

    .go-prev{left:19%;}
    .go-next{right: 19%;}
    .go-prev,.go-next {top: 43%;}

}

/* Tablet 아이패드 에어 - 가로형 */
@media only screen and (max-width: 1180px) {

    .taxiToday-logo img{max-width:10%;}
    .review-container{max-width:1024px;}

    .sub{margin: 120px auto 0;}
    .inner-sub{padding:120px 0;}


    .taxiToday-logo .intro-txt h1{font-size:40px;}
    .taxiToday-logo .intro-txt p{font-size:20px;}

    .part-txt h2{font-size:40px;}
    .part-txt p{font-size:20px;}

    .service-txt .service-tit p{font-size:26px;}
    .service-txt .service-list ul li{font-size:16px;}

    .slider-menu-item{font-size:16px;}
    .slider-menu-item svg{width:32px; height:32px;}

    .timeline-event-copy h3{font-size: 1.5em;}

    .platform-wrap .plat-list .plat-tit{padding:16px 0;}
    .platform-wrap .plat-list .plat-btns ul li p{font-size:14px;}

    .colo-bg{max-width:640px; padding:40px;}
    .phone-wrap{width:230px;}
    .phone{width:200px; min-height: 440px;}
    .phone.android .screen {min-height: 420px;}
    .phone.android .screen .screen-top .time{font-size:10px;}
    .phone.android .screen .screen-top .phone-status{width:50px;}

    .appmirror-wrap{max-width:230px;}
    .appmirror-wrap iframe{width:100%; max-height: 200px;}

    .single-testimonial p{font-size:16px;}

}


/* Tablet 아이패드 미니 - 가로형 */
@media only screen and (max-width: 1024px) {

    #ttHeader .header-inner{max-width:820px;}
    #ttHeader h1{max-width:200px; height:30px; background-size:contain;}
    #ttHeader h2{max-width:140px; height:40px;}
    .scrolled #ttHeader .header-inner h1{background-size:contain;}

    #ttFooter footer .footer-wrap{max-width:820px;}

    #slideMenu-wrap{margin: 48px 0;}

    .slider-menu{padding:8px;}
    .slider-menu-item{gap:4px;}
    .slider-menu-item svg{width:24px; height:24px;}


    .timeline-event-copy img{max-width:88%;}

    .platform-wrap{max-width: 820px; margin: 64px auto 0;}


    .review-container{max-width:820px;}


    .img-container {height: 100%;}
    .img-container img:hover {transform: none;}
    .img-container:hover .img-content-hover {display: none;}
    .img-content {display: block; padding: 1rem 0;}
}


/* Tablet 아이패드 에어 - 세로형 */
@media only screen and (max-width: 820px) {
    #ttFooter footer{padding:48px 0 120px;}
    #ttFooter footer .familysite{margin-top:0;}

    .review-container{max-width:720px;}

    .blobCont{display:none;}
}


@media screen and (max-width: 480px) {
    #ttHeader .header-inner{padding:0 32px;}
    /* #ttHeader h1 {display:none;} */
    #ttHeader h1 {max-width: 170px;}
    #ttHeader h2 {max-width: 125px; height: 50px; background: url('../images/ko/sub/transport/playstore-btn.png') no-repeat center right; background-size: contain;}
    
 

    #ttFooter footer .footer-wrap{max-width:auto; width:100%; text-align:center;}
    #ttFooter footer .footer-wrap .top-align{flex-direction: column; gap:24px;}

    #ttFooter footer .footer-info .tmoney-info{width:100%;}
    #ttFooter footer .footer-info .tmoney-info .etc-info{flex-direction: column;}

    .taxiToday .scroll-icon{display:block; bottom:22%; z-index:5;}

    #m-nav{position: fixed; bottom:0; display:block; background:#fff; z-index:9000; padding:8px 0; width:100%; border-top:1px solid #ccc;}
    #m-nav ul{display:flex; justify-content: space-between; align-items: flex-start;}
    #m-nav ul li{width:20%; text-align:center; display:flex; flex-direction: column; justify-content: center; align-items: center;}
    #m-nav ul li p{font-size:12px; line-height:1.1; color:#bbb; transition: color 0.3s;}
    #m-nav li svg path {fill: #aaa; transition: fill 0.3s;}

    #m-nav li.active svg path {fill: #7630F0;}
    #m-nav li.active p {color: #7630F0;}


    #chatbot a{width:48px; height:48px;}
    #chatbot a svg{max-width:100%; max-height:100%;}
    
    .taxiToday-logo{top:16%;}
    .taxiToday-logo img{max-width: 24%;}
    .taxiToday-logo .intro-txt{padding:0 32px;}
    .taxiToday-logo .intro-txt h1{font-size:32px; line-height:1.3; margin-bottom:8px;}
    .taxiToday-logo .intro-txt p{font-size:20px;}
    

    .part-txt h2{font-size:32px;}
    .part-txt p{font-size:18px;}

    .sub{margin:80px auto 0;}
    .sub .taxiToday-logo img{width:20%;}
    .sub .taxiToday-logo .intro-txt h1{font-size:32px;}
    .sub .taxiToday-logo .intro-txt p{font-size:18px;}

    .inner-sub{padding: 80px 0;}
    .inner-sub#sec-service{padding:80px 0 0;}

    .taxiToday-intro{
        background-size: 2.5em 3.5em, 0.7em 1.6em, 2.5em 1.9em, 2.5em 1.9em, 2.95em 4.9em, 3.5em 3.5em, 0.7em 1.6em, 3.5em 1.9em, 3.5em 1.9em, 2.95em 4.9em, 16em 1.9em;
        background-position: calc(50% - 7.5em) calc(50% + 15.3em), calc(50% - 6.3em) calc(50% + 20.4em), calc(50% - 8em) calc(50% + 21.8em), calc(50% - 5.3em) calc(50% + 20.2em), calc(50% - 7.6em) calc(50% + 18.5em), calc(50% + 7.5em) calc(50% + 15.3em), calc(50% + 6.3em) calc(50% + 20.4em), calc(50% + 8em) calc(50% + 21.8em), calc(50% + 5.3em) calc(50% + 20.2em), calc(50% + 7.6em) calc(50% + 18.5em), center calc(50% + 20.9em);
    }
    .taxiToday-intro .taxi-body-img{width:20.5em;}

    .testimonial-area .owl-carousel{margin:0; padding:0;}
    .testimonial-area .owl-stage-outer{padding:30px 0; margin-left:0;}
    .single-testimonial::after{right:-24px;}
    .single-testimonial::before{left:-24px;}


    #slideMenu-wrap{margin: 24px 0;}
    #slideMenu-wrap .slider{margin-top:48px; height: 84vh;}

    .slider-menu{padding:16px; border-radius:24px;}
    .slider-menu ul{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0px;
        justify-items: center;
        align-items: stretch;
    }

    .slider-menu-item{flex-direction: column; gap: 2px; border-radius:16px; font-weight: 400;}
    .slider-menu-item svg{width:32px; height:32px;}

    .colo-bg{max-width: 340px; flex-direction: column; gap:20px; padding:24px;}
    .service-txt{padding-top:0;}
    .service-txt .service-tit{margin-bottom:20px;}
    .service-txt .service-tit p{font-size:24px;}
    .service-txt .service-list ul li{margin-bottom:10px;}
    
    .phone-wrap{width:100%;}
    .screen-slide{padding:32px 0 0;}

    .phone{min-height: 400px;}
    .phone.android .screen{min-height: 400px;}
    .phone.android .screen:after{display:none;}
    .phone-top{display:none;}

    .go-prev{left:2%;}
    .go-next{right: 2%;}
    .go-prev,.go-next {background:unset;}
    .go-prev:hover, .go-next:hover, .showSlider:hover{background:unset;}
    .fa-chevron-left:before,.fa-chevron-right:before{color:#ccc; font-size:32px;}

    .appmirror-wrap{max-width:100%;}
    .appmirror-wrap .mirror-video{margin-bottom:16px;}
    .appmirror-wrap iframe{max-height:145px;}

    
    #taxiToday-introduce-bg{display:none;}
    .timeline{max-width: 24em;}
    .timeline-event-copy{padding:1em;}
    .timeline-event-copy h3{font-size: 1.3em;}
    .timeline-event-icon{margin: -1em 0.5em 0.5em -1em; outline: 2px solid white; width:2em; height:2em;}
    .timeline-event-icon::after{width:24px; height:24px;}
    .timeline-event-icon.first::after,.timeline-event-icon.second::after,.timeline-event-icon.third::after,.timeline-event-icon.four::after,.timeline-event-icon.five::after,.timeline-event-icon.six::after{background-size:contain;}


    .platform-wrap {max-width: 320px; gap:32px; margin: 48px auto 0;}

    .review-container{max-width:360px;}
    .testimonial-area {padding: 40px 0;}
}


@media only screen and (max-width: 414px) {

    .service-txt .service-list ul li{margin-bottom:8px;}

    .platform-wrap{margin: 48px auto 0;}
    .platform-wrap .plat-list .plat-tit p{font-size:18px;}

    #slideMenu-wrap .slider{height:84vh;}

    .taxiToday-intro .taxi-body-img {width: 16.5em;}
    .taxiToday-intro{
        background-size: 2.5em 3.5em, 0.7em 1.6em, 2.5em 1.9em, 2.5em 1.9em, 2.95em 4.9em, 3.5em 3.5em, 0.7em 1.6em, 3.5em 1.9em, 3.5em 1.9em, 2.95em 4.9em, 12em 1.9em;
        background-position: calc(50% - 5.5em) calc(50% + 13.3em), calc(50% - 4.3em) calc(50% + 18.4em), calc(50% - 6em) calc(50% + 19.8em), calc(50% - 3.3em) calc(50% + 18.2em), calc(50% - 5.6em) calc(50% + 16.5em), calc(50% + 5.5em) calc(50% + 13.3em), calc(50% + 4.3em) calc(50% + 18.4em), calc(50% + 6em) calc(50% + 19.8em), calc(50% + 3.3em) calc(50% + 18.2em), calc(50% + 5.6em) calc(50% + 16.5em), center calc(50% + 18.9em);
    }

}
  
  
  
@media only screen and (max-width: 390px) {
    .slider-menu ul{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}

    .colo-bg{max-width: 300px;}
    .service-txt .service-tit p{font-size:22px;}
    .service-txt .service-tit svg{width:32px; height:32px;}
    .service-txt .service-list ul li span{width:24px; height:24px; font-size:14px;}

    .platform-wrap .plat-list .plat-btns ul{gap:8px;}
}
  
  
  
@media only screen and (max-width: 375px) {
    #ttHeader .navicon{width:20px;}
    #ttHeader .navicon::before{top:-6px;}
    #ttHeader .navicon::after{top:6px;}
    #ttHeader h2{height:30px;}

    #chatbot a{width:40px; height:40px;}
    .chatbot-bubble{font-size:12px;}

    .taxiToday-logo {top: 14%;}
    .taxiToday-logo img{width:18%;}
    .taxiToday-logo .intro-txt h1{font-size:24px;}
    .taxiToday-logo .intro-txt p{font-size:18px;}

    .part-txt h2{font-size:24px;}
    .part-txt p{font-size:16px;}
    

    #slideMenu-wrap .slider {height: 104vh;}

    .slider-menu-item {font-size: 14px; font-weight: 400;}
    .service-txt .service-tit p {font-size: 20px;}
    .service-txt .service-list ul li {font-size: 14px;}
    .service-txt .service-tit svg {width: 28px; height: 28px;}

    .go-prev{left: 1%;}
    .go-next{right: 1%;}

    #m-nav ul li p{font-size:11px; display:none;}
    #m-nav ul li svg{width:24px; height:24px;}

    .taxiToday .scroll-icon{bottom:18%;}
    .taxiToday .scroll-icon:after{font-size:12px;}
    .taxiToday .scroll-icon:before{width:48px; height:48px;}

    .colo-bg{max-width:300px;}
}


@media only screen and (max-width: 320px) {
    #ttHeader h1 {max-width: 130px;}
    #ttHeader h2 {height: 28px;}

    #ttHeader .header-inner {padding: 0 24px;}

    .slider-menu ul {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
}