@charset "utf-8";

#main-wrap {position: relative; padding: 50px 0; width: 100%}
:root {
	--main-gap: 4.375em;
	--hover-border: rgba(94, 107, 126, 0.5);
	--hover-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	--hover-lift: -3px;
}

/* 메인 구조 */
.main-content {display: flex;flex-direction: column; width: 100%;margin: 0 auto}
.main-content > * + * {margin-top: var(--main-gap)}
.main-top{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--main-gap)}
.main-top .m-top-left {grid-column: span 2; overflow: hidden}
.main-top .m-top-right { grid-column: span 1}
.main-mid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--main-gap); margin-top: 3em}
.main-bottom {display: flex}
.main-bottom > * + * {margin-left: var(--main-gap)}
.main-bottom > div {flex: 1;min-width: 0}

/* 공통 */
.main-content h3{font-size: 1.385em; color: #1B234C}
.m-mid-left a:focus-visible,
.m-a-link:focus-visible,
.m-check-lst:focus-visible,
.car-total a:focus-visible > i,
.service-cont li a:focus-visible,
.notice-more:focus-visible{outline: 3px dashed rgba(8, 9, 81, 0.7); outline-offset: 3px}

.service-cont li a,
.service-cont li a span,
.service-cont li a span small,
.service-cont li a i,
.m-a-link,
.m-a-link span,
.m-a-link i,
.notice-more,
.notice-more i{-webkit-transition: all .5s;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease; transition: all .5s ease}

.ic-mask{display:inline-block;width: 24px;height: 24px;background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center;-webkit-mask-size: contain;mask-size: contain}
.ic-plus{-webkit-mask-image: url(../images/main/ic_plus.svg); mask-image: url(../images/main/ic_plus.svg)}
.ic-arr-right{-webkit-mask-image: url(../images/common/icon/ic_arr_r.svg); mask-image: url(../images/common/icon/ic_arr_r.svg)}
.ic-download{-webkit-mask-image: url(../images/common/icon/ic_download.svg); mask-image: url(../images/common/icon/ic_download.svg)}
.ic-phone{-webkit-mask-image: url(../images/main/ic_phone.svg); mask-image: url(../images/main/ic_phone.svg)}
.ic-fax{-webkit-mask-image: url(../images/main/ic_fax.svg); mask-image: url(../images/main/ic_fax.svg)}
.ic-mail{-webkit-mask-image: url(../images/main/ic_mail.svg); mask-image: url(../images/main/ic_mail.svg)}

/* 배너 */
.banner-area{position: relative; width: 100%}
.banner-area .banner-zone{padding: 0; margin-bottom: 0;position: relative;width: 100%;height: auto;overflow: hidden;border-radius: 30px;background-color: #f5f5f5}
.banner-area .banner-zone .banner-item{height: 660px; overflow: hidden}
.banner-area .banner-zone .banner-item:focus{outline-offset: -6px!important; border-radius: 28px}
.banner-area .banner-zone .banner-item img{width: 100%;height: 100%;object-fit: cover;object-position: center;-webkit-transition: all .8s;-moz-transition: all .8s ease; -o-transition: all .8s ease; -ms-transition: all .8s ease; transition: all .8s ease; z-index: -1; position: relative}
.banner-area .banner-zone .banner-item:focus img,
.banner-area .banner-zone .banner-item:hover img,
.banner-area .banner-zone .banner-item:active img{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05)}
.banner-area .banner-zone .banner-item.no-img {width: 100%;min-height: 410px; background-image: url(../images/contents/logo_incheon.svg); background-repeat: no-repeat; background-size: 50%; background-position: center;-webkit-filter: grayscale(100%) brightness(0.2) opacity(0.2); filter: grayscale(100%) brightness(0.2) opacity(0.2)}
.banner-area .buttons{display: flex; justify-content: flex-end; position: absolute; right: 0; bottom: 0; height: 60px; background-color: #fff}
.banner-area .buttons::before{content: ''; display: inline-block; margin-top: 20px; margin-right: 10px; width: 1px; height: 20px; background-color: #e0e0e0; z-index: 1}
.banner-area .buttons .btn-banner-prev,
.banner-area .buttons .btn-banner-next,
.banner-area .buttons .btn-banner-play,
.banner-area .buttons .btn-banner-stop,
.banner-area .buttons .slick-pause {display: block;float: left;margin-left: 1px;font-size: 0;line-height: 0; width: 60px;height: 60px;padding: 0;color: transparent;border: none;outline: none;background-size: 24px;z-index: 1;background-repeat: no-repeat;background-position: center; background-color: transparent; text-indent: -9999px; -webkit-transition: all .8s;-moz-transition: all .8s ease; -o-transition: all .8s ease; -ms-transition: all .8s ease; transition: all .8s ease}
.banner-area .buttons .btn-banner-prev:hover:before,
.banner-area .buttons .btn-banner-prev:focus:before,
.banner-area .buttons .btn-banner-next:hover:before,
.banner-area .buttons .btn-banner-next:focus:before,
.banner-area .buttons .slick-pause:hover:before,
.banner-area .buttons .slick-pause:focus:before,
.banner-area .buttons .btn-banner-play:hover:before,
.banner-area .buttons .btn-banner-play:focus:before {opacity: 1}
.banner-area .buttons .btn-banner-prev.slick-disabled:before,
.banner-area .buttons .btn-banner-next.slick-disabled:before,
.banner-area .buttons .btn-banner-play.slick-disabled:before {opacity: .25}
.banner-area .buttons .btn-banner-prev {background-image: url(/assets/images/main/ic_prev_w.svg)}
.banner-area .buttons .btn-banner-next {background-image: url(/assets/images/main/ic_next_w.svg)}
.banner-area .buttons .btn-banner-play {background-image: url(/assets/images/main/ic_puase_w.svg)}
.banner-area .buttons .btn-banner-stop {background-image: url(/assets/images/main/ic_stop_w.svg)}
.banner-area .buttons .btn-banner-next:hover,
.banner-area .buttons .btn-banner-next:focus,
.banner-area .buttons .btn-banner-play:hover,
.banner-area .buttons .btn-banner-play:focus,
.banner-area .buttons .btn-banner-stop:hover,
.banner-area .buttons .btn-banner-stop:focus,
.banner-area .buttons .btn-banner-prev:hover,
.banner-area .buttons .btn-banner-prev:focus {outline: none;opacity: .5;-ms-filter: alpha(opacity=50)}

/* 접수 버튼영역 */
.m-call-box{display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px}
.m-call-box .m-wait{padding-left: 30px; background: url(../images/main/ic_wait_user.svg) no-repeat left center; background-size: 24px}
.m-call-box .m-wait span{color: #1B234C}
.m-call-box .m-wait strong{display: inline-block; margin-left: 10px; font-size: 1.875em; font-weight: 900; color: #BA4F01}
.m-call-box .m-wait-txt{color: #5E6B7E; letter-spacing: -0.05em}
.m-call-box li a{display: flex; flex-direction: column; justify-content: flex-start; padding: 45px 40px; border-radius: 24px; border-width: 1px; border-style: solid; border-color: rgba(94, 107, 126, 0.08); background-repeat: no-repeat; background-position: right 30px bottom 30px}
.m-call-box li a.m-call-01{background-size: auto 80px; background-color: #F3F2FF; background-image: url(../images/main/i_m_call01.png)}
.m-call-box li a.m-call-02{background-size: auto 80px; background-color: #FFEEE9; background-image: url(../images/main/i_m_call02.png)}
.m-call-box li a.m-call-03{background-size: auto 98px; background-color: #E8F6E2; background-image: url(../images/main/i_m_call03.png)}
.m-call-box li a:hover,
.m-call-box li a:active,
.m-call-box li a:focus{border-color: var(--hover-border);box-shadow: var(--hover-shadow);-webkit-transform: translateY(var(--hover-lift));-moz-transform: translateY(var(--hover-lift));transform: translateY(var(--hover-lift))}
.m-call-box li a em{font-size: 1.5em; letter-spacing: -0.05em; font-style: normal; font-weight: bold; color: #191919}
.m-call-box li a span{display: inline-block; color: #5E6B7E}
.m-call-box li a span::after{content: ''; display: inline-block; width: 18px; height: 20px; vertical-align: middle; background: url(../images/main/ic_small_right.svg) no-repeat; background-size: 18px}
.m-call-box li a span b{color: #111; font-weight: bold}
.m-call-box li a br{display: none}

/* 이용시간 안내 */
.main-time{display: flex; margin-top: 3em; position: relative; justify-content: center; align-items: center; flex-wrap: wrap; gap: 36px}
.main-time .m-time-tit{position: relative; margin-bottom: 11px}
.main-time .m-time-tit::before{content: '';display: inline-block; width: 41px; height: 36px; background: url(../images/main/ic_emblem.svg) no-repeat}
.main-time .m-time-tit h3{display: inline-block; font-size: 1.25em}
.main-time .m-time-cont{display: flex; gap: 16px; flex-wrap: wrap}
.main-time .m-time-cont p{position: relative; padding-left: 16px; color: #1B234C; font-size: 1.05em; font-weight: bold}
.main-time .m-time-cont p:first-child{padding-left: 0}
.main-time .m-time-cont p::before{content: ''; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 17px; background-color: #AEB5BE}
.main-time .m-time-cont p:first-child::before{display: none}
.main-time .m-time-cont p span{display: inline-block; padding-left: 30px; padding-right: 10px; background-repeat: no-repeat; background-size: 24px; background-position: left center}
.main-time .m-time-cont p.time01 span{background-image: url(../images/main/ic_time01.svg)}
.main-time .m-time-cont p.time02 span{background-image: url(../images/main/ic_time02.svg)}
.main-time .m-time-cont p.time03 span{background-image: url(../images/main/ic_time03.svg)}
.main-time .m-time-cont p.time04 span{background-image: url(../images/main/ic_time04.svg)}

.m-a-link{display: flex; align-items: center; justify-content: center; padding: 0 12px 0 16px; height: 40px; line-height: 1.5; border: 1px solid #DFE1E5; border-radius: 24px}
.m-a-link span{display: inline-block; color: #1B234C; font-size: 0.95em}
.m-a-link i{background-color: #191919}
.m-a-link:hover,
.m-a-link:active,
.m-a-link:focus{background-color: #1B234C; border-color: #1B234C}
.m-a-link:hover span,
.m-a-link:active span,
.m-a-link:focus span{color: #fff}
.m-a-link:hover i,
.m-a-link:active i,
.m-a-link:focus i{background-color: #fff}

/* 접수현황/이용내역 */
.m-mid-left{display: flex; flex-direction: column; justify-content: space-between; gap: 24px}
.m-mid-left a{display: block; flex: 1; padding: 40px 30px 40px 40px; position: relative; overflow: hidden; border-radius: 24px}
.mlst-cont{display: block; color: #5E6B7E; letter-spacing: -0.05em}
.mlst-skip{display: inline-block; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background-color: #fff; border-radius: 0 0 0 28px}
.mlst-skip::before,
.mlst-skip::after{content: ""; position: absolute; overflow: hidden;border-radius: 50%; width: 60px;height: 60px; box-shadow: 30px -30px 0 0 #fff}
.mlst-skip::before{left: -60px; top: 0}
.mlst-skip::after{right: 0;top: 60px}
.mlst-skip > i{display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 50px;height: 50px; border-radius: 50%; z-index: 1}
.mlst-skip > i > i{background-color: #1F1F1F}
.m-mid-left a:hover h3,
.m-mid-left a:active h3,
.m-mid-left a:focus h3,
.m-mid-left a:hover .mlst-cont,
.m-mid-left a:active .mlst-cont,
.m-mid-left a:focus .mlst-cont{color: #fff}
.mlst-item01,
.mlst-item01 .mlst-skip > i{background-color: #EDF1F7}
.mlst-item01:hover,
.mlst-item01:active,
.mlst-item01:focus,
.mlst-item01:hover .mlst-skip > i,
.mlst-item01:active .mlst-skip > i,
.mlst-item01:focus .mlst-skip > i{background-color: #363C5A}
.mlst-item02,
.mlst-item02 .mlst-skip > i{background-color: #FEF1E7}
.mlst-item02:hover,
.mlst-item02:active,
.mlst-item02:focus,
.mlst-item02:hover .mlst-skip > i,
.mlst-item02:active .mlst-skip > i,
.mlst-item02:focus .mlst-skip > i{background-color: #A7632F}
.m-mid-left a:hover .mlst-skip > i > i,
.m-mid-left a:active .mlst-skip > i > i,
.m-mid-left a:focus .mlst-skip > i > i{background-color: #fff}

/* 서비스 바로가기 / 고객센터 */
.m-mid-center{padding: 40px; background-color: #F5F5F5; border-radius: 24px}
.service-tit{position: relative}
.service-tit h3{position: relative; z-index: 1}
.service-tit::after,
.service-tit::before{display: inline-block; position: absolute; right: 0}
.service-tit::after{content: ''; bottom: 0; width: 100%; background-repeat: no-repeat; background-position: right center}
.service-tit::before{top: 0; font-size: 2.5em; color: #fff; line-height: 1; font-weight: 900}
.ser-box .service-tit::after{height: 72px; background-image: url(../images/main/i_service.png); background-size: auto 72px}
.cnt-box .service-tit::after{height: 80px; background-image: url(../images/main/i_center.png); background-size: auto 80px}
.ser-box .service-tit::before{content: 'Quick'}
.cnt-box .service-tit::before{content: 'Service Center'}

.cnt-box .service-tit > p{width: 84%}
.service-tit > p{position: relative; color: #5E6B7E; z-index: 1}
.service-cont{display: flex; margin-top: 16px; flex-direction: column; flex-wrap: wrap; gap: 15px}
.service-cont li a span small{display: inline-block; margin-right: 10px; font-size: 0.95em; color: #546176}
.service-cont li a{display: flex; justify-content: space-between; align-items: center; padding: 11px 24px 10px 30px; font-size: 1.05em; color: #191919; border: 1px solid #fff; background-color: #fff; border-radius: 28px}
.service-cont li a i{padding: 0;margin: -1px;overflow: hidden;border: 0;clip: rect(0 0 0 0)}
.service-cont li a:hover,
.service-cont li a:active,
.service-cont li a:focus{background-color: #363C5A; color: #fff}
.service-cont li a:hover span small,
.service-cont li a:active span small,
.service-cont li a:focus span small{color: #fff}
.service-cont li a:hover i,
.service-cont li a:active i,
.service-cont li a:focus i{background-color: #fff}

/* 보유차량현황 */
.m-mid-right{display: flex;flex-direction: column;justify-content: space-between; gap: 24px}
.car-total{padding: 40px 40px 30px 40px;position: relative; overflow: hidden; background-color: #F2EDF7; background-image: url(../images/main/car-bg.svg); background-repeat: no-repeat; background-position: left bottom; background-size: 64%; border-radius: 24px}
.car-total a{display: inline-block; position: absolute; top: 0; right: 0; width: 60px; height: 60px; background-color: #fff; border-radius: 0 0 0 28px}
.car-total a:hover > i,
.car-total a:active > i,
.car-total a:focus > i{background-color: #363C5A}
.car-total a:hover > i > i,
.car-total a:active > i > i,
.car-total a:focus > i > i{background-color: #fff}
.car-total a:focus-visible{outline: none}
.car-total a::before,
.car-total a::after{content: ""; position: absolute; overflow: hidden;border-radius: 50%; width: 60px;height: 60px; box-shadow: 30px -30px 0 0 #fff}
.car-total a::before{left: -60px; top: 0}
.car-total a::after{right: 0;top: 60px}
.car-total a > i{display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 50px;height: 50px; background-color: #F2EDF7; border-radius: 50%; z-index: 1}
.car-total a > i > i{background-color: #1F1F1F}
.car-total > p{color: #5E6B7E; letter-spacing: -0.05em}
.car-total ul{display: flex; position: relative; margin-top: 30px}
.car-total ul::before{content: ''; display: inline-block; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1px; height: 60px; border-right: 1px dashed rgba(8, 9, 81, 0.7)}
.car-total ul li{flex: 1; text-align: center}
.car-total ul li strong{display: block; color: #080951; font-size: 2.4em; font-weight: bold; line-height: 1.4}

.m-check-lst{display: flex; padding: 24px 40px; justify-content: space-between; align-items: center; gap: 24px; border-radius: 24px; background-color: #F0FBFB; border: 1px solid rgba(94, 107, 126, 0.08); color: #191919}
.m-check-lst .ic-mask{background-color: #191919}
.m-check-lst span{color: #191919}
.m-check-lst:hover,
.m-check-lst:active,
.m-check-lst:focus{background-color: #363C5A; border: 1px solid rgba(94, 107, 126, 0.99)}
.m-check-lst:hover span,
.m-check-lst:active span,
.m-check-lst:focus span{color: #fff}
.m-check-lst:hover .ic-mask,
.m-check-lst:active .ic-mask,
.m-check-lst:focus .ic-mask{background-color: #fff}

.m-bottom-left{padding: 40px;background-color: #F5F5F5;border-radius: 24px}

/* 공지사항 */
.m-bottom-right{position: relative; padding: 40px; border: 1px solid #E2E5EB; border-radius: 24px}
.m-bottom-right .no-data{display: flex; margin-top: 10px; height: 80%; justify-content: center; align-items: center; background-color: #f5f5f5; border-radius: 10px}
.notice-new{display: flex; margin-top: 20px; gap: 30px; width: 100%}
.notice-new .new-date{display: block; position: relative; padding-top: 24px; min-width: 100px; min-height: 100px; flex-shrink: 0; text-align: center; background-color: #292970; border-radius: 16px; color: #fff}
.notice-new .new-date b{position: absolute;left: 50%;bottom: 14px; transform: translateX(-50%); font-size: .9em; font-weight: normal}
.notice-new .new-date em{display: inline-block; font-size: 1.8em; line-height: 1;font-weight: 900;font-style: normal}
.notice-new .new-date .i-new{position: absolute; top: -10px; right: -10px}
.notice-new .new-cont {display: block;flex: 1;min-width: 0}
.notice-new .new-cont > strong {display: block; margin-bottom: 10px; width: 100%; font-size: 1.125em; font-weight:bold; color: #191919; overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.notice-new .new-cont > span {display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis;width: 100%; font-size: 0.95em; color: #707070}
.notice-new .new-cont > .i-new{margin-right: 5px}
.notice-last{display: flex; flex-direction: column; padding-top: 30px; margin-top: 30px; gap: 5px; border-top: 1px dashed #CED0D6}
.notice-last em{font-size: 0.95em; color: #707070; font-style: normal}
.notice-last strong{display: block; width: 100%; color: #191919; font-weight: normal; overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.notice-new:hover .new-cont > strong,
.notice-new:active .new-cont > strong,
.notice-new:focus .new-cont > strong,
.notice-new:hover .new-cont > span,
.notice-new:active .new-cont > span,
.notice-new:focus .new-cont > span,
.notice-last:hover strong,
.notice-last:active strong,
.notice-last:focus strong{text-decoration: underline; text-underline-offset: 6px}
.notice-more{position: absolute; top: 40px; right: 40px; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 50%}
.notice-more span{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(50%);border: 0;clip: rect(0 0 0 0)}
.notice-more i{background-color: #191919}
.notice-more:hover,
.notice-more:active,
.notice-more:focus{background-color: #1B234C; border-color: #1B234C}
.notice-more:hover i,
.notice-more:active i,
.notice-more:focus i{background-color: #fff}

/* 게시물 'N'아이콘 */
.i-new {display: inline-block;vertical-align: middle;position: relative; width: 24px; height: 24px; font-size: 0;overflow: hidden}
.i-new::before,
.i-new::after {display: inline-block;position: absolute;left: 0;top: 0}
.i-new::after {content: 'N';color: #292970;font-size: 12px;text-align: center;width: 24px; line-height: 25px; font-weight: 900; font-style: normal}
.i-new::before {content: ''; width: 24px;height: 24px;background-color: #FFA755;border-radius: 50%}