:root {
  --primary-color: #2192d0;
  --primary-color-hover:#0f7dba;
  --secondary-color:#2192d0;
  --secondary-color-hover:#0978be;
  --smooth-color:#61c033;
  --slow-color:#ecd971;
  --slow-color2:#e0ad34;
  --jam-color:#f15555;
  --led-red-color:#f54545;
  --led-orange-color:#f78438;
  --led-green-color:#1fc72b;
  --sky-bg:#dae9f4;
  --sky-bg2:#f1f4f9;
  --sky-bg3:#ecf3fa;
  --green-color:#60bb46;
  --gray-color:#909ea5;
}

.header {padding:10px 20px 0; max-width:2000px; margin:0 auto}
.header .logo img{max-width:237px;}
.container { margin: 0 auto; display: flex; align-items:center; justify-content: space-between; padding: 15px 20px; position: relative; }
.nav { position: relative; }
.nav .menu {position:relative; list-style: none; display: flex; gap:0 50px; z-index:30}
.nav .menu li { position: relative; }
.nav .menu > li > a { text-decoration: none; color: #333; padding: 7px 20px 10px; display: block; cursor: pointer; font-size:1.25rem; font-weight:600; text-align:center;}
.submenu-bg { position: absolute; top: 80px; left: 0; width: 100vw; height: 0; background: #f0f0f0; overflow: hidden; transition: height 0.3s ease; z-index: 5; pointer-events: auto; z-index:20}
.submenu { position: absolute; top: 100%; left: 50%; transform:translateX(-50%); width: max-content; padding: 30px 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 10;}
.submenu li { list-style: none; }
.submenu li a{display:block; padding:7px 0; color: #666; white-space: nowrap; text-decoration: none; text-align:center;}
.submenu li a:hover{color:var(--primary-color)}
.auth{display:flex; align-items:center; gap:0 10px}
.auth a { display:flex; align-items:center; gap:0 4px; text-decoration: none; color: #333; font-weight: 500;  font-size:.938rem}
.auth a:hover{color:var(--primary-color)}
.auth a img{max-width:15px;}
.auth .line{display:block; width:1px; height:15px; background-color:#ddd;}
.mobile-only { display: none; }
.hamburger { display: none; font-size: 26px; cursor: pointer; user-select: none; }
@media only screen and (max-width:1600px){
	.nav .menu{gap:0 20px;}
}
@media only screen and (max-width:1440px){
	.nav .menu{gap:0 10px;}
	.nav .menu > li > a{padding:7px 15px 10px; font-size:1.125rem}
}
@media only screen and (max-width:1240px){
	.submenu li a{padding:5px 0; font-size:.875rem}
	.nav .menu{}
	.nav .menu > li > a{font-size:1rem}
	.submenu-bg{top:70px;}

}
@media only screen and (max-width:1024px){
	.submenu-bg{top:65px;}
	.header{padding:10px 10px 0}
	.header .logo img{max-width:180px;}
	.nav .menu{gap:0 15px;}
	.nav .menu > li > a{padding:7px 5px 10px;}
}
@media (max-width: 860px) {
  .container { flex-wrap: wrap; }
  .hamburger { display: block; }
  .hamburger.active::before {
	  content: "✕"; /* 또는 "X" 또는 백슬래시 X (\2715) */
	}

	.hamburger::before {
	  content: "☰";
	  display: inline-block;
	}
  .nav { width: 100%; display: none; background: #f9f9f9;}
  .nav.show { display: block; }
  .nav .menu { flex-direction: column; padding: 10px 0; position:fixed; width:100%; height:100%; left:0; gap:0 5px; background-color:#fff;}
  .nav .menu li { position: relative; }
  .nav .menu > li.auth{display:flex; padding:0;}
  .nav .menu > li.auth a{display:flex;}
  .nav .menu > li > a { padding: 15px 20px; text-align:left; font-size:1.188rem}
  .submenu{ display: none !important; width:100%; top:auto; left:auto; transform:none; padding:12px 0; flex-direction: column; gap:0; background: transparent; opacity: 1 !important; position: relative; pointer-events: auto !important; background-color:#f5f5f5;}
  .submenu li a{padding:10px 20px 10px 30px; text-align:left; font-size:1.063rem}  
  .submenu li a br{display:none;}
  .menu li.open > .submenu { display: flex !important; }
  .submenu-bg { display: none; }
  .desktop-only { display: none; }
  .mobile-only { display: block; padding: 15px 10px; border-top: 1px solid #ddd; font-size: 16px; }

  .menu > li > a{position: relative; padding-right: 30px;}
  .menu > li.has-submenu > a::after{ content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: #333; user-select: none; transition: transform 0.3s ease;}
  .menu > li.has-submenu.open > a::after{content: "-";}
}

@media only screen and (max-width:650px){
	.header{padding:0;}	
	.header .logo a{margin-top:5px;}
}

.main-con-wrap{display:flex; align-items:start; margin:0 auto; padding:0 40px; gap:30px; max-width:2000px; }
.main-con-wrap .visual{position:relative; width:65%; overflow:hidden; height:750px; border-radius:30px;}
.main-con-wrap .visual:before,.main-con-wrap .visual:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; animation-name: fadeZoomCross; animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform-origin: center center; opacity: 1;}
.main-con-wrap .visual:before{background-image:url(/assets/img/visual-01.jpg); z-index: 1;}
.main-con-wrap .visual:after{background-image:url(/assets/img/visual-02.jpg); animation-delay:10s; z-index: 1;}

@keyframes fadeZoomCross {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  25% {
    opacity: 1;
    transform: scale(1.0);
  }
  50% {
    opacity: 1;
    transform: scale(1.0);
  }
  75% {
    opacity: 0;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

.main-con-wrap .visual .txt-wrap{position:relative; padding-top:80px; z-index:10; color:#fff; text-align:center;}
.main-con-wrap .visual .txt-wrap .sub-txt{display:flex; justify-content:center; align-items:center; gap:0 5px; font-size:1.25rem; font-weight:300}
.main-con-wrap .visual .txt-wrap .sub-txt span{display:inline-block; width:20px; height:2px; background-color:#fff;}
.main-con-wrap .visual .txt-wrap h1{padding:17px 0 15px; font-size:3.75rem; font-weight:700}
.main-con-wrap .visual .txt-wrap .txt{font-size:.875rem; font-weight:300; letter-spacing:10px}
.main-con-wrap .visual .flow-wrap{position:absolute;  width:100%; bottom:0; padding:40px 100px; background:linear-gradient(to top, rgba(31,31,31,.8) 70%, transparent); z-index:2; text-align:center;}
.main-con-wrap .visual .flow-wrap .flow{ display:flex; align-items:center; justify-content:space-between; gap:0 20px;}
.main-con-wrap .visual .flow-wrap .flow > img{max-width:114px}
.main-con-wrap .visual .flow-wrap .flow-line{flex-grow:1;}
.main-con-wrap .visual .flow-wrap .flow-line ul{display:flex; align-items:center;}
.main-con-wrap .visual .flow-wrap .flow-line ul li{position:relative; margin:5px -2px 5px 0; text-align:center; color:#fff; font-size:.938rem;}
.main-con-wrap .visual .flow-wrap .flow-line ul li span{position:relative; display:block; height:10px; background-color:var(--smooth-color); clip-path: polygon( 0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%, 5px 50%); color: #fff; font-weight: 700; font-size: 18px;}
/*.main-con-wrap .visual .flow-wrap .flow-line .down ul li:first-child span{clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%);}*/
.main-con-wrap .visual .flow-wrap .flow-line ul{position:relative;}
.main-con-wrap .visual .flow-wrap .flow-line .flow-txt-wrap ul li span{background:none; height:auto; display:inline-block; clip-path:none; font-size:inherit; font-weight:inherit;}
.main-con-wrap .visual .flow-wrap .flow-line :where(.down,.up){position:relative;}

.main-con-wrap .visual .flow-wrap .flow-line .down ul li:last-child span{clip-path: polygon(0 0, calc(100% - 10px) 0, calc(100% - 4px) 50%, calc(100% - 10px) 100%, 0 100%); margin-left:-5px;}
.main-con-wrap .visual .flow-wrap .flow-line .up ul li:first-child span{clip-path: polygon(0 0, calc(100% - 10px) 0, calc(100% - 4px) 50%, calc(100% - 10px) 100%, 0 100%); margin-right:-5px}
.main-con-wrap .visual .flow-wrap .flow-line .down.triangle.slow:before{background-color:var(--slow-color)}
.main-con-wrap .visual .flow-wrap .flow-line .down.triangle.jam:before{background-color:var(--jam-color)}
.main-con-wrap .visual .flow-wrap .flow-line .down:before{content: ''; position: absolute; left: -5px; top: -.5px; width: 16px; height: 21px; background-color: var(--smooth-color); clip-path: polygon(100% 0, 2px 50%, 100% 100%);}
.main-con-wrap .visual .flow-wrap .flow-line .down ul li span{transform:scaleX(-1)}
.main-con-wrap .visual .flow-wrap .flow-line .up:before{content: ''; position: absolute; right: 0; top: -.5px; width: 16px; height: 21px; background-color: var(--smooth-color); clip-path:polygon(0 0, calc(100% - 2px) 50%, 0 100%);}
.main-con-wrap .visual .flow-wrap .flow-line .up.triangle.slow:before{background-color:var(--slow-color)}
.main-con-wrap .visual .flow-wrap .flow-line .up.triangle.jam:before{background-color:var(--jam-color)}
.main-con-wrap .visual .flow-wrap .flow-line ul li:nth-child(1){width:24.14%}
.main-con-wrap .visual .flow-wrap .flow-line ul li:nth-child(2){width:20.69%}
.main-con-wrap .visual .flow-wrap .flow-line ul li:nth-child(3){width:20.69%}
.main-con-wrap .visual .flow-wrap .flow-line ul li:nth-child(4){width:20.69%}
.main-con-wrap .visual .flow-wrap .flow-line ul li:nth-child(5){width:13.79%}
.main-con-wrap .visual .flow-wrap .flow-line ul li span.slow{background-color:var(--slow-color)}
.main-con-wrap .visual .flow-wrap .flow-line ul li span.jam{background-color:var(--jam-color)}
.main-con-wrap .visual .flow-wrap .legend ul{display:inline-flex; padding:5px 15px; align-items:center; justify-content:center; gap:0 30px; border:1px solid rgba(255,255,255,.7);}
.main-con-wrap .visual .flow-wrap .legend ul li{display:flex; align-items:center; gap:0 8px; }
.main-con-wrap .visual .flow-wrap .legend ul li span{display:inline-block; width:13px; height:5px; background-color:var(--smooth-color);}
.main-con-wrap .visual .flow-wrap .legend ul li p{color:#fff;}
.main-con-wrap .visual .flow-wrap .legend ul li.slow span{background-color:var(--slow-color)}
.main-con-wrap .visual .flow-wrap .legend ul li.jam span{background-color:var(--jam-color)}



.main-con-wrap .visual .flow-wrap .flow-line :where(.down,.up) ul:before{content:''; position: absolute; width:100%; height:100%; top:-4px; left:0; background: url('/assets/img/arrow-white.png') repeat-x; background-size: 100px auto; animation: flowMove 2s linear infinite; z-index:9; opacity:.5}
.main-con-wrap .visual .flow-wrap .flow-line .up ul:before{top:4px;}
.main-con-wrap .visual .flow-wrap .flow-line .down ul:before{transform:rotate(-180deg);}

@keyframes flowMove {
    from { background-position: 0 0; }
    to { background-position: 100px 0; }
}

@media only screen and (max-width:1240px){
	.main-con-wrap .visual .flow-wrap .flow-line .down:before,.main-con-wrap .visual .flow-wrap .flow-line .up:before{height:16px; top:0;}
	.main-con-wrap .visual .flow-wrap .flow-line :where(.down,.up) ul:before{background-size:70px;}
	@keyframes flowMove {
		from { background-position: 0 0; }
		to { background-position: 70px 0; }
	}
}
@media only screen and (max-width:650px){
	.main-con-wrap .visual .flow-wrap .flow-line .down:before,.main-con-wrap .visual .flow-wrap .flow-line .up:before{height:16px; top:-2px;}
	.main-con-wrap .visual .flow-wrap .flow-line :where(.down,.up) ul:before{display:none;}

}

.main-con-wrap .con{max-width:35%; width:100%}
.main-con-wrap .con .led{padding:25px; background:url(/assets/img/led-bg.jpg) repeat; border-radius:20px; text-align:center;}
.main-con-wrap .con .led > p span{ font-size:1.5rem; line-height:1.1; font-weight:600}
.main-con-wrap .con .led > p span.red{color:var(--led-red-color)}
.main-con-wrap .con .led > p span.orange{color:var(--led-orange-color)}
.main-con-wrap .con .led > p span.green{color:var(--led-green-color)}

.main-con-wrap .con .main-board{margin-top:25px;}
.main-con-wrap .con .main-board .tit-wrap{display:flex; justify-content:space-between;}
.main-con-wrap .con .main-board .tit-wrap .tit{font-size:1.438rem; font-weight:600}
.main-con-wrap .con .main-board .tit-wrap .short-cut{font-size:1.438rem}
.main-con-wrap .con .main-board ul{margin-top:5px}
.main-con-wrap .con .main-board ul li a{padding:3px 0; display:flex; justify-content:space-between; align-items:center; color:#666; gap:0 20px}
.main-con-wrap .con .main-board ul li a > p{white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.main-con-wrap .con .main-board ul li a:hover{color:var(--primary-color); }
.main-con-wrap .con .main-board ul li a p.date{color:#aaa; font-size:.875rem}

.fee-service{display:flex; gap:0 15px;}
.fee-service .pay-box{position:relative; flex:1; padding:25px; border:1px solid #ddd; border-radius:15px; height:220px}
.fee-service .pay-box.unpaid-search img{max-width:100px}
.fee-service .pay-box .tit-wrap{display:flex; justify-content:space-between;}
.fee-service .pay-box .tit{font-size:1.313rem; font-weight:600; line-height:1.3}
.fee-service .pay-box .tit span{color:var(--primary-color)}
.fee-service .pay-box .bottom-box{position:absolute; width:calc(100% - 50px); bottom:20px; }
.fee-service .pay-box .bottom-box .search{display:flex; align-items:center; background-color:#eff2f4; border-radius:10px}
.fee-service .pay-box .bottom-box .search input{flex-grow:1; background:transparent; border:none; width:100%}
.fee-service .pay-box .bottom-box .search a{display:flex; align-items:center; padding:10px 15px}
.fee-service .pay-box .bottom-box .search a img{max-width:19px;}
.fee-service .pay-box .bottom-box ul{display:flex; }
.fee-service .pay-box .bottom-box ul li{flex:1; text-align:center;}
.fee-service .pay-box .bottom-box ul li a img{max-height:60px;}
.fee-service .pay-box .bottom-box ul li:first-child a p{color:#c97b7b}
.fee-service .pay-box .bottom-box ul li:nth-child(2) a p{color:#c3994e}
.fee-service .pay-box .bottom-box .search input,
.fee-service .pay-box .bottom-box ul li a p{font-size:1.063rem}

.main-pay-card{margin-top:15px; padding:23px 25px; display:flex; justify-content:space-between; align-items:center; border:1px solid #ddd; border-radius:15px;}
.main-pay-card .tit{font-size:1.188rem; font-weight:500; color:#333;}
.main-pay-card ul{display:flex; align-items:center; gap:0 10px;}
.main-pay-card ul li img{max-height:25px;}

.main-call{margin-top:15px; padding:23px 25px; display:flex; justify-content:space-between; align-items:center; border-radius:15px; background-color:var(--sky-bg);}
.main-call .tit{font-size:1.188rem; font-weight:500; color:var(--primary-color)}
.main-call > div{display:flex; gap:0 10px; align-items:center;}
.main-call > div > p{font-size:.938rem; color:#666;}
.main-call > div a{font-size:1.188rem; font-weight:600}

.main-quick{margin-top:20px;}
.main-quick ul{display:flex; align-items:center; justify-content:space-evenly; gap:0 25px;}
.main-quick ul li span{display:flex; justify-content:center; align-items:center; width:85px; height:85px; background-color:#f5f5f5; border-radius:100px}
.main-quick ul li span img{max-height:40px}
.main-quick ul li:last-child span img{max-width:60%}
.main-quick ul li p{padding-top:10px; text-align:center; line-height:1.25; font-size:.938rem; color:#555;}

.city-link{margin:40px 0 30px; overflow:hidden; width:100%;}
.city-link img{max-height:27px;}
.city-link .city-swiper{overflow:hidden;}
.city-link .city-swiper .swiper-wrapper{display:flex; width:max-content;}
.city-link .city-swiper .swiper-slide{text-align:center; width:auto; flex-shrink:0; width:auto}


.footer-con{display:flex; align-items:start; margin-top:35px; padding:30px 60px 20px; background-color:#e9e9e9; gap:0 50px}
.footer-con > img{max-width:240px; filter: grayscale(100%); opacity:.5}
.footer-con .txt-wrap{flex-grow:1; display:flex; justify-content:space-between; }
.footer-con .f-info ul li{display:flex; gap:0 20px; padding:2px 0;}
.footer-con .f-info span{font-size:.875rem; color:#888; white-space:nowrap}
.footer-con .f-terms{}
.footer-con .f-terms a{display:flex; justify-content:space-between; margin:7px 0; padding:10px 20px; width:270px; border-radius:10px; background-color:#fff; color:#666; font-size:.875rem}
.footer-con .f-terms a:first-child{margin-top:0;}
.footer-con .f-terms a span{color:#888;}


@media only screen and (max-width:1920px){
	.main-con-wrap .visual{width:calc(100% - 600px)}
	.main-con-wrap .visual .flow-wrap{padding:35px 50px;}
	.main-con-wrap .con{max-width:600px}
	.fee-service .pay-box .bottom-box .search input,
	.fee-service .pay-box .bottom-box ul li a p{font-size:1rem}
	.main-quick ul{gap:0 17px;}
	.main-quick ul li span{width:80px; height:80px;}
}
@media only screen and (max-width:1600px){
	.main-con-wrap .visual{width:calc(100% - 550px)}
	.main-con-wrap .con{max-width:550px}
	.fee-service .pay-box{padding:20px}
	.fee-service .pay-box .bottom-box{width:calc(100% - 40px)}
	.fee-service .pay-box.unpaid-search img{max-width:70px;}
	.fee-service .pay-box .tit{font-size:1.188rem; line-height:1.25}
	.main-con-wrap .con .led{padding:20px;}
	.main-quick ul li span{width:70px; height:70px;}
	.main-quick ul li span img{max-height:30px;}
}
@media only screen and (max-width:1440px){	
	.main-con-wrap .visual .txt-wrap h1{font-size:3.75rem}
	.main-con-wrap .visual{height:750px}
	.main-con-wrap .visual .flow-wrap{padding:35px 40px;}
	.main-con-wrap .visual .flow-wrap .flow{gap:0 15px}
	.main-con-wrap .visual .flow-wrap .flow > img{max-width:100px}
	.main-con-wrap .visual .flow-wrap .legend ul{padding:3px 15px; gap:0 25px}
	.main-con-wrap .visual .flow-wrap .legend ul li p{font-size:.938rem}
	.main-con-wrap .con .main-board ul li a{padding:4px 0; font-size:.938rem}
	.fee-service .pay-box .bottom-box .search input,.fee-service .pay-box .bottom-box ul li a p{font-size:.938rem}
	.main-pay-card .tit,.main-call .tit{font-size:1.125rem}
	.main-pay-card ul{gap:0 7px;}
	.main-pay-card ul li img{display:block; max-height:22px}
	.city-link img{max-height:30px;}
}
@media only screen and (max-width:1240px){	
	.header .logo img{max-width:200px}
	.header .container{padding:10px 15px;}	
	.auth{gap:0 3px}
	.auth a{font-size:.875rem;}
	.auth a img{max-width:13px}
	.main-con-wrap{padding:0 30px}
	.main-con-wrap .visual{width:calc(100% - 450px); height:730px}
	.main-con-wrap .con{max-width:450px}
	.main-con-wrap .visual .txt-wrap{padding-top:70px}
	.main-con-wrap .visual .txt-wrap .sub-txt{font-size:1.125rem}
	.main-con-wrap .visual .txt-wrap h1{padding:13px 0 10px}
	.main-con-wrap .visual .flow-wrap{padding:30px 35px; background:linear-gradient(to top, rgba(31,31,31,.7) 60%, transparent)}
	.main-con-wrap .visual .flow-wrap .legend ul{margin-top:7px; padding:2px 15px; gap:0 15px}
	.main-con-wrap .visual .flow-wrap .legend ul li p{font-size:.875rem}
	.main-con-wrap .visual .flow-wrap .flow{gap:0 10px}
	.main-con-wrap .visual .flow-wrap .flow > img{max-width:80px}
	.main-con-wrap .visual .flow-wrap .flow-line ul li{margin-top:4px; margin-bottom:4px; font-size:.875rem}
	.main-con-wrap .visual .flow-wrap .flow-line ul li span{height:8px}
	.main-con-wrap .visual .flow-wrap .flow-line .flow-txt-wrap ul li span{display:none;}
	.main-con-wrap .con .led > p span{font-size:1.438rem}
	.fee-service{gap:0 12px}
	.fee-service .pay-box{padding:20px 15px;}
	.fee-service .pay-box .bottom-box{width:calc(100% - 30px)}
	.main-quick ul{gap:0 10px}
	.main-pay-card{margin-top:12px; padding:20px 25px; }
	.main-pay-card ul li img{max-height:20px}
	.main-call{margin-top:12px; padding:15px 25px;}
	.main-call > div{flex-flow:column;}
	.main-call > div > p{font-size:.875rem}
	.city-link img{max-height:22px;}
	.footer-con{padding:40px 60px 20px}
	.footer-con .txt-wrap{flex-flow:column}
	.footer-con .f-terms a{display:inline-flex; padding:10px 15px; width:auto; font-size:.875rem; gap:0 10px; border-radius:7px}
}
@media only screen and (max-width:1024px){	
	.main-con-wrap{padding:0 20px; gap:25px}
	.main-con-wrap .visual{height:710px}
	.main-con-wrap .visual .flow-wrap{padding:30px 25px;}
	.main-con-wrap .visual .flow-wrap .flow{gap:0 3px}
	.main-con-wrap .visual .flow-wrap .flow > img{max-width:70px}
	.main-con-wrap .visual .flow-wrap .legend ul{margin-top:10px}
	.footer-con{padding:30px}
}
@media only screen and (max-width:860px){
	.main-con-wrap{flex-flow:column; gap:15px;}
	.main-con-wrap .visual{width:100%; height:500px; border-radius:20px;}	
	.main-con-wrap .visual .flow-wrap{background:linear-gradient(to top, rgba(31,31,31,.8) 60%, transparent)}
	.main-con-wrap .con{max-width:100%;}
	.main-con-wrap .con .led{border-radius:15px;}
	.main-quick ul{justify-content:space-evenly}
	.footer-con{flex-flow:column; gap:15px 35px}
	.footer-con > img{max-width:205px}
	.footer-con .txt-wrap{gap:5px 0;}
	.footer-con .f-info ul li{padding:1px 0}

	.auth{gap:0}
}
@media only screen and (max-width:650px){
	.header .logo img{max-width:170px}
	.main-con-wrap{padding:0 15px; gap:12px;}
	.main-con-wrap .visual{height:470px;}
	.main-con-wrap .visual .txt-wrap{padding-top:50px;}
	.main-con-wrap .visual .txt-wrap .sub-txt{font-size:1rem}
	.main-con-wrap .visual .txt-wrap .sub-txt span{width:15px; height:1px;}
	.main-con-wrap .visual .txt-wrap h1{padding:7px 0 10px; font-size:2.5rem}
	.main-con-wrap .visual .txt-wrap .txt{font-size:.75rem; letter-spacing:7px;}
	.main-con-wrap .visual .flow-wrap{padding:45px 20px 20px;}
	.main-con-wrap .visual .flow-wrap .legend ul{gap:0 10px;}
	.main-con-wrap .visual .flow-wrap .legend ul li{gap:0 5px;}
	.main-con-wrap .visual .flow-wrap .legend ul li span{width:10px; height:3px;}
	.main-con-wrap .visual .flow-wrap .flow > img{max-width:60px;}
	.main-con-wrap .visual .flow-wrap .flow-line ul li{margin-top:3px; margin-bottom:4px; }
	.main-con-wrap .visual .flow-wrap .flow-line ul li span{height:6px;}
	.main-con-wrap .con .led{padding:17px;}
	.fee-service .pay-box{padding:20px 15px 15px; height:190px;}
	.fee-service .pay-box .bottom-box{bottom:15px;}
	.main-pay-card ul li img{max-height:17px;}
	.main-quick{margin-top:20px;}
	.main-quick ul{gap:0}
	.main-quick ul li span{width:60px; height:60px;}
	.main-quick ul li span img{max-height:30px;}
	.city-link{margin:40px 0 20px;}
	.footer-con{padding:35px 25px 25px}
	.footer-con .f-info ul li{display:inline-flex; flex-wrap:wrap;}
	.footer-con .f-info ul li:last-child span{white-space:inherit}
}


/* 서브메뉴 */

.sub-visual-wrap{padding:0 35px;}
.sub-visual{position:relative; display:flex; padding:0 180px; justify-content:center; flex-flow:column; background:url(/assets/img/sub-visual-01.jpg) no-repeat center / cover; height:300px; border-radius:25px; color:#fff; z-index:2}

.use .sub-visual{background:url(/assets/img/sub-visual-02.jpg) no-repeat center / cover;}
.unpaid .sub-visual{background:url(/assets/img/sub-visual-03.jpg) no-repeat center / cover;}
.board.sub-etc .sub-visual,.sub-etc .sub-visual{background:url(/assets/img/sub-visual-09.jpg) no-repeat center / cover;}
.board .sub-visual{background:url(/assets/img/sub-visual-04.jpg) no-repeat center / cover;}
.company .sub-visual{background:url(/assets/img/sub-visual-05.jpg) no-repeat center / cover;}
.member .sub-visual{background:url(/assets/img/sub-visual-06.jpg) no-repeat center / cover;}
.my .sub-visual{background:url(/assets/img/sub-visual-07.jpg) no-repeat center / cover;}
.etc .sub-visual{background:url(/assets/img/sub-visual-08.jpg) no-repeat center / cover;}


.sub-visual > p,.sub-visual > h2{position:relative; z-index:2}
.sub-visual > p{font-size:1.5rem}
.sub-visual > h2{padding-top:10px; font-size:3rem; font-weight:600}
.sub-visual:before{content:''; position:absolute; top:0; left:0; width:70%; height:100%; background:linear-gradient(to right, rgba(0,0,0,.39), transparent); z-index:1; border-radius:25px;}
.sub-tab-menu{position:relative; margin-left:15%; width:70%; transform:translateY(-50%); background-color:var(--secondary-color); color:#fff; border-radius:15px; z-index:5}
.sub-tab-menu ul{display:flex; justify-content:space-around}
.sub-tab-menu ul li{position:relative; flex:auto; text-align:center;}
.sub-tab-menu ul li:after{content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:18px; background:rgba(255,255,255,.2)}
.sub-tab-menu ul li:last-child:after{display:none;}
.sub-tab-menu ul li a{display:block; padding:23px 0; font-size:1.375rem; font-weight:500; opacity:.5; color:#fff;}
.sub-tab-menu ul li a:hover{opacity:1}
.history{display:flex; align-items:center; gap:0 32px; margin-top:-7px;}
.history > div,.history > p{position:relative;}
.history > div:before,.history > p:before{content:''; position:absolute; top:7px; right:-18px; display:block; width:7px; height:7px; border-top:1px solid #888; border-right:1px solid #777; transform:rotate(45deg)}
.history > p:last-child:before{display:none;}
.history img{max-width:21px;}


.realtime .sub-tab-menu ul li.realtime a{opacity:1}
.traveltime .sub-tab-menu ul li.traveltime a{opacity:1}
.analytics .sub-tab-menu ul li.analytics a{opacity:1}

.fare .sub-tab-menu ul li.fare a{opacity:1}
.restricted .sub-tab-menu ul li.restricted a{opacity:1}
.road-guide .sub-tab-menu ul li.road-guide a{opacity:1}
.ramp .sub-tab-menu ul li.ramp a{opacity:1}

.unpaid-info .sub-tab-menu ul li.unpaid-info a{opacity:1}
.unpaid-check .sub-tab-menu ul li.unpaid-check a{opacity:1}
.unpaid-alarm .sub-tab-menu ul li.unpaid-alarm a{opacity:1}
.auto-pay .sub-tab-menu ul li.auto-pay a{opacity:1}
.receipt .sub-tab-menu ul li.receipt a{opacity:1}
.refund .sub-tab-menu ul li.refund a{opacity:1}

.notice .sub-tab-menu ul li.notice a{opacity:1}
.faq .sub-tab-menu ul li.faq a{opacity:1}
.voc .sub-tab-menu ul li.voc a{opacity:1}
.dispute .sub-tab-menu ul li.dispute a{opacity:1}

.about .sub-tab-menu ul li.about a{opacity:1}
.overview .sub-tab-menu ul li.overview a{opacity:1}
.pr .sub-tab-menu ul li.pr a{opacity:1}
.location .sub-tab-menu ul li.location a{opacity:1}


.login .sub-tab-menu ul li.login a{opacity:1}
.join .sub-tab-menu ul li.join a{opacity:1}
.find-id .sub-tab-menu ul li.find-id a{opacity:1}
.find-pw .sub-tab-menu ul li.find-pw a{opacity:1}

.mypage .sub-tab-menu ul li.mypage a{opacity:1}
.edit .sub-tab-menu ul li.edit a{opacity:1}
.delete-account .sub-tab-menu ul li.delete-account a{opacity:1}

.privacy .sub-tab-menu ul li.privacy a{opacity:1}
.cctv .sub-tab-menu ul li.cctv a{opacity:1}

.rent .sub-tab-menu ul li.rent a{opacity:1}


.sub-con{padding:60px 0;}
.sub-con .sub-con{padding:40px 0 0}
.inner{position:relative; width:1400px; margin:0 auto}
.inner-small{position:relative; width:1200px; margin:0 auto}
.sub-con .sub-tit{font-size:2.5rem; font-weight:600; text-align:center;}
.sub-con .sub-txt{padding-top:15px; font-size:1.125rem; text-align:center; color:#666; line-height:1.7}
.sub-con .sub-txt .br{display:block}
.sub-space{margin-top:60px;}

body:has(.main) .quick-menu{display:none;}
.quick-menu {position: fixed; padding: 25px 11px; right: 0; top: 50%; transform: translateX(100%) translateY(-50%); box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 15px 0 0 15px; z-index: 10; background-color: #fff; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; pointer-events: none; }
.quick-menu.show { transform: translateX(0) translateY(-50%); opacity: 1; pointer-events: auto; }
.quick-menu-btn { position: fixed; top: 50%; right: -35px; transform: translateY(-50%) rotate(90deg); background:#eee; color: #333; border: none; padding: 10px 15px; border-radius: 0 0 10px 10px; z-index: 20; cursor: pointer; transition: right 0.3s ease; display: none; box-shadow: 0 1px 5px rgba(0,0,0,.2);}
.quick-menu-btn.move-left { right: 55px; }

.quick-menu img{max-width:29px;}
.quick-menu ul li a{display:block; padding:9px 0; text-align:center;}
.quick-menu ul li a:hover{color:var(--primary-color)}
.quick-menu ul li p{font-size:.875rem}

.legend{text-align:center;}
.legend ul{display:inline-flex; padding:5px 15px; align-items:center; justify-content:center; gap:0 15px; border:1px solid #ccc;}
.legend ul li{display:flex; align-items:center; gap:0 8px; }
.legend ul li span{display:inline-block; width:13px; height:5px; background-color:var(--smooth-color);}
.legend ul li p{}
.legend ul li.slow span{background-color:var(--slow-color)}
.legend ul li.jam span{background-color:var(--jam-color)}
.legend ul li.cctv span{width:17px; height:20px; background:url(http://t1.daumcdn.net/localimg/localimages/07/2018/pc/img/marker_cctv.png) no-repeat center / 100%;}
.legend ul li.vms span{width:17px; height:20px; background:url(/assets/img/icon-vms.png) no-repeat center / 100%;}
.realtime .legend{margin-top:40px;}
.realtime .map{margin-top:35px; position:relative; background-color:#f5f5f5; border-radius:20px; }
.realtime .map .direction{position:absolute; display:flex; justify-content:space-between; width:calc(100% - 50px); top:25px; left:25px;}
.realtime .map .direction span{display:inline-block; padding:12px 25px; background-color:#547788; color:#fff; font-size:1.25rem; border-radius:7px;}
.realtime .map .vms{position:absolute; top:35%; left:49%; z-index:99}
.realtime .map .vms img{max-width:22px;}

@media only screen and (max-width:1500px){
	.sub-tab-menu{margin-left:auto;}
	.sub-tab-menu ul li a{padding:20px 0; font-size:1.063rem}
}
@media only screen and (max-width:1400px){
	.inner{width:92%}
	.inner-small{width:92%}
	.sub-visual{padding:0 100px; height:250px}
	.sub-visual > p{font-size:1.25rem}
	.sub-visual > h2{font-size:2.25rem}	
	.quick-menu{padding:23px 10px; right:20px;}
	.quick-menu ul li p{font-size:.813rem}
}
@media only screen and (max-width:1024px){
	.sub-visual{padding:0 80px; height:200px}
	.sub-con{padding:60px 0 50px;}
	.sub-con .sub-tit{font-size:2.25rem; line-height:1.4}
	.sub-con .sub-txt{padding-top:20px; font-size:1.25rem;}
}
@media only screen and (max-width:960px){
	.sub-tab-menu{width:70%}
}
@media only screen and (max-width:860px){
	.sub-visual{padding:0 60px}
	.sub-visual-wrap{padding:0 20px}
	.sub-tab-menu{width:90%;}
	.sub-con .sub-txt{padding-top:10px;}
}
@media only screen and (max-width:650px){
	.sub-visual-wrap{padding:0 16px}
}





@media (max-width: 1500px){
	.quick-menu{right:0; padding:20px 10px;}
	body:has(.main) .quick-menu-btn{display:none}
	.quick-menu-btn{ display: block; }
	.quick-menu { transform: translateX(100%) translateY(-50%); opacity: 0; pointer-events: none; }
	.quick-menu.show { transform: translateX(0) translateY(-50%); opacity: 1; pointer-events: auto; }
	.quick-menu,.quick-menu-btn{top:70%}
	.quick-menu img{max-width:20px}
	.quick-menu ul li p{font-size:.75rem}
}
@media (max-width: 1024px){
	.quick-menu-btn.move-left { right: 47px; }
}

/* 769px 이상에서는 버튼 숨기고 퀵메뉴 항상 보여주기 */
@media (min-width: 1501px) {
	.quick-menu-btn { display: none !important; }
	.quick-menu { transform: translateX(0) translateY(-50%); opacity: 1; pointer-events: auto; right: 35px; border-radius: 100px; }
}

@media only screen and (max-width:650px){
	.sub-space{margin-top:25px;}
	.sub-visual{padding:0 45px}
	.sub-visual:before{width:90%;}
	.sub-visual > p{font-size:1rem}
	.sub-visual > h2{padding-top:7px; font-size:1.5rem}
	.history{gap:0 26px;}
	.history img{max-width:18px}
	.history > div:before, .history > p:before{right:-16px}
	.sub-con{padding:40px 0}
	.sub-con .sub-con{padding-top:25px;}
	.sub-con .sub-tit{font-size:1.625rem; line-height:1.4}
	.sub-con .sub-txt{padding-left:20px; padding-right:20px; font-size:1rem; line-height:1.6}
	.sub-con .sub-txt .br{display:inline-block}
	.sub-tab-menu ul{padding:0 10px}
	.sub-tab-menu ul li a{font-size:.875rem}
	.sub-tab-menu ul li:after{height:10px;}
	.sub-tab-menu ul li a{padding:17px 0}
	.legend ul{gap:0 15px}
	.legend ul li{gap:0 5px;}
	.legend ul li p{font-size:.938rem}
	.realtime .map{margin-top:25px;}
	.realtime .map .direction span{padding:7px 15px; font-size:1.063rem}
	.realtime .legend{margin-top:25px;}

}




.traveltime .route{display:flex; gap:15px;}
.traveltime .route :where(.start,.end){position:relative; display:flex; align-items:center; padding:0 50px; border-radius:13px; color:#fff; font-size:1.75rem; font-weight:500; box-shadow:0 0 10px rgba(0,0,0,.2);}
.traveltime .route :where(.start,.end) span{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);}
.traveltime .route .start{background-color:#dfecfb; color:rgba(33,146,208,.85); }
.traveltime .route .end{background-color:var(--green-color)}
.traveltime .route .tunnel{flex-grow:1;}
.traveltime .route .tunnel ul li{display:flex; margin:12px 0; padding:25px 20px; justify-content:space-between; background-color:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.2); font-size:1.125rem; color:#666;}
.traveltime .route .tunnel ul li:first-child{margin-top:0}
.traveltime .route .tunnel ul li:last-child{margin-bottom:0}
.traveltime .route .tunnel ul li p{flex:1; text-align:center;}
.traveltime .route .tunnel ul li p:first-child{padding-left:80px; text-align:left; font-weight:600; background:url(/assets/img/use/icon-pin-02.png) no-repeat left 50px center/ auto 90%;}
.traveltime .route .tunnel ul li .smooth{color:var(--smooth-color)}
.traveltime .route .tunnel ul li .slow{color:var(--slow-color2)}
.traveltime .route .tunnel ul li .jam{color:var(--jam-color)}
.traveltime .legend ul{margin-top:50px}


@media only screen and (max-width:1400px){
	.traveltime .route .tunnel ul li p:first-child{padding-left:50px; background-position:left 20px center}	
}
@media only screen and (max-width:1024px){
	.traveltime .route .tunnel ul li p:first-child{padding-left:45px}
	.traveltime .route :where(.start,.end){padding:0 30px; font-size:1.375rem}
}
@media only screen and (max-width:768px){	
	.traveltime .route .tunnel ul li p{font-size:1rem}
}
@media only screen and (max-width:650px){
	.traveltime .route{flex-flow:column}
	.traveltime .route :where(.start,.end){padding:14px; justify-content:center; font-size:1.25rem}
	.traveltime .route :where(.start,.end) span{bottom:auto; top:50%; left:auto; right:15px; transform:translateY(-50%) rotate(90deg);}
	.traveltime .route .tunnel ul li{padding:17px}
	.traveltime .route .tunnel ul li p{font-size:.875rem}
	.traveltime .legend ul{margin-top:25px}
	.traveltime .route .tunnel ul li p:first-child{padding-left:30px; background-position:left 10px center; }
}



/* 탭메뉴 */
.tab-menu{list-style:none;display:flex;justify-content:center;gap:10px;}
.tab-menu li{padding:15px 25px;font-size:1.25rem;font-weight:500;color:#aaa;background:#f5f6f8;border-radius:100px;cursor:pointer;transition:.25s;}
.tab-menu li:hover,.tab-menu li.active{background:var(--primary-color); color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);}



.tab-container.small{width:100%;}
.tab-container.small .tab-menu{display:flex; padding:0 10px; justify-content:space-evenly;}
.tab-container.small .tab-menu li{padding:4px 10px 3px; margin:0; font-size:1rem;}
.tab-container.small .tab-menu li.active{border:0; background-color:#0a100e; color:#fff; border-radius:10px 10px 0 0}
.tab-container.small .tab-content{margin-top:0;}
.tab-container.small .led-swiper{width:100%;padding:20px;}
.tab-container.small .swiper-slide{display:flex;justify-content:center;align-items:center;}

.inner-tab-menu { list-style: none; padding: 0; display: flex; justify-content:center;}
.inner-tab-menu li { padding:7px 10px; cursor: pointer; margin:0 30px; opacity:.5; font-size:1.313rem; font-weight:600}
.inner-tab-menu li.active { opacity:1; background: var(--secondary-color); color:#fff;}


.tab-content{position:relative; display: none; margin-top:45px;}
.tab-content.active { display: block; }

@media only screen and (max-width:1200px){
	.inner-tab-menu li{margin:0 15px}
}
@media only screen and (max-width:1024px){
	.inner-tab-menu li{margin:0 5px}
}
@media only screen and (max-width:768px){
	.tab-content{margin-top:40px}	
	.inner-tab-menu{width:100%; justify-content:space-evenly}
}
@media only screen and (max-width:650px){
	.tab-content{margin-top:30px}	
	.tab-menu li{padding:12px 20px;  font-size:1.188rem}
}


/* 달력 */
.ui-datepicker{margin-top:20px; padding:15px!important; border-radius:15px!important; left:50%!important; transform:translateX(-50%)!important}
.ui-state-default,.ui-widget-header{border:none!important; background:none!important; text-align:center!important;}
.ui-state-highlight{color:#2192d0!important;  border-radius:50px; border:1px solid #2192d0!important}
.ui-state-active, .ui-widget-content .ui-state-active{background-color:#f78438!important; border-radius:50px;}

.analytics .date-nav{position:relative; display:flex; align-items:center; justify-content:center; text-align:center;}
.analytics .cal-date{display: inline-block; padding:0 10px; width: auto; text-align: center; cursor: pointer; user-select: none; font-weight: 600; font-size: 1.5rem; color:#555;}
.analytics .date-nav > button{position:relative; display:block; width:40px; padding:15px 10px; background:none; border:none; }
.analytics .date-nav > button#prev-day-1,.analytics .date-nav > button#prev-day-2{transform:scaleX(-1)}
.analytics .date-nav > button.disabled:before{border-color:#666; opacity:.3}
.analytics .date-nav > button:hover:before{border-color:#666;}
.analytics .date-nav > button:before{content:''; position:absolute; top:9px; width:14px; height:14px; transform:translateX(-50%) rotate(45deg);border-top:2px solid #aaa; border-right:2px solid #aaa;}
.analytics .date-nav .date-input{position: absolute; left: 30px; top: 0; width: 120px; height: 32px; opacity: 0; cursor: pointer;}

.analytics .graph-tab{display:flex; margin-top:25px; padding:15px; justify-content:center; align-items:center; background-color:var(--sky-bg2); border-radius:15px;}
.analytics .graph-tab > p,.analytics .graph-tab ul li{font-size:1.063rem; color:#888; opacity:1; font-weight:600}
.analytics .graph-tab > p{position:relative; color:rgba(102,102,102,.5)}
.analytics .graph-tab > p:first-child{margin-right:40px;}
.analytics .graph-tab > p:first-child:before{content:'→'; position:absolute; right:-50px}
.analytics .graph-tab > p:last-child{margin-left:40px;}
.analytics .graph-tab > p:last-child:before{content:'→'; position:absolute; left:-50px}
.analytics .graph-tab ul li{padding:10px 15px;}
.analytics .graph-tab ul li.active{background:#75848d; color:#9bedff; border:none; border-radius:10px; text-align:center;}
.analytics .graph-con{margin-top:30px; text-align:center;}
.analytics .graph-con .g-tit{padding-bottom:5px; font-size:1.25rem; font-weight:500; color:#666;}
.analytics .graph-con .data-view{margin-top:40px; padding:11px 18px; color:var(--secondary-color); font-size:1.063rem; font-weight:500; background:none; border:1px solid var(--secondary-color); border-radius:10px;}
.analytics .graph-con .speed-table{display:none;}
.analytics .graph-con .speed-table ul{display:grid; margin-top:20px; padding:15px 30px; border:1px solid #ddd; grid-template-columns:repeat(12,1fr); border-radius:20px}
.analytics .graph-con .speed-table ul li{padding:15px 0;}
.analytics .graph-con .speed-table ul li .time{font-size:1.063rem; color:#777;}
.analytics .graph-con .speed-table ul li .speed{padding-top:3px; font-size:1rem}
.analytics .graph-con .speed-table ul li .smooth{color:var(--smooth-color)}
.analytics .graph-con .speed-table ul li .slow{color:var(--slow-color2)}
.analytics .graph-con .speed-table ul li .jam{color:var(--jam-color)}
.analytics .graph-con .speed-table ul li:nth-child(-n + 12){border-bottom:1px solid #eee; }

.analytics .zone{display:block; margin-top:-2px; font-weight:normal; opacity:.8; font-size:.875rem}



@media only screen and (max-width:1024px){
	.analytics .graph-tab > p:first-child:before{right:-38px}
	.analytics .graph-tab > p:last-child:before{left:-38px}
}
@media only screen and (max-width:768px){
	.analytics .graph-tab{margin-top:20px; padding:10px;}
	.analytics .graph-tab > p, .analytics .graph-tab ul li{font-size:.938rem}
	.analytics .graph-tab > p{display:none}
	.analytics .date-nav > button{width:30px;}
	.analytics .cal-date{font-size:1.5rem}
	.analytics .graph-con .g-tit{padding-bottom:15px; font-size:1.375rem}
	.analytics .graph-con .data-view{margin-top:40px; padding:10px 16px; font-size:1.063rem}
	.analytics .graph-con .speed-table ul{margin-top:20px; padding:10px 20px;}
	.analytics .graph-con .speed-table ul li{padding:13px 0;}
	.analytics .graph-con .speed-table ul li .time,.analytics .graph-con .speed-table ul li .speed{font-size:1rem}
}
@media only screen and (max-width:650px){
	.ui-datepicker{margin-top:7px;}
	.analytics .cal-date{font-size:1.375rem}
	.analytics .date-nav > button{width:20px;}
	.analytics .date-nav > button:before{width:12px; height:12px;}
	.analytics .date-nav .date-input{left:50%; transform:translateX(-50%)}
	.analytics .tab-menu + .tab-content{margin-top:30px;}
	.analytics .graph-tab{margin-top:16px; padding:7px 5px;}
	.analytics .graph-tab ul{align-items:center}
	.analytics .graph-tab ul li{margin:0; padding:10px; text-align:center; line-height:1.3}
	.analytics .graph-tab ul li span{display:none;}
	.analytics .graph-con .g-tit{padding-bottom:3px; font-size:1.063rem; color:#666;}
	.analytics .graph-con .data-view{margin-top:20px; padding:8px 13px; font-size:1rem; border-radius:10px;}
	.analytics .graph-con .speed-table ul{margin-top:15px;}
	.analytics .graph-con .speed-table ul li .time{font-size:.813rem}
	.analytics .graph-con .speed-table ul li .speed{font-size:.75rem}

	.analytics .zone{font-size:.75rem}
}

.div-line{padding:20px 0 40px; text-align:center;}
.div-line img{max-width:20px}
.sub-tit.inner{font-size:2.25rem; width:100%;}
.sub-txt.inner{padding-top:10px; width:100%}
.fare .type-wrap{display:flex; gap:0 20px;}
.fare .type-wrap .type{flex:1; padding:40px 30px 25px; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,.2); border-radius:20px; text-align:center;}
.fare .type-wrap .type .kind{font-size:1.625rem; font-weight:600; color:#666;}
.fare .type-wrap .type .type-fare{padding-bottom:30px; font-size:1.625rem; color:var(--secondary-color); font-weight:600}
.fare .type-wrap .type img{max-height:84px}
.fare .type-wrap .type:nth-of-type(3) img{max-height:95px}
.fare .type-wrap .type:nth-of-type(4) img{max-height:105px}
.fare .type-wrap .type ul{margin-top:40px;}
.fare .type-wrap .type ul li{position:relative; margin:7px 0; padding-left:12px; text-align:left; color:#666;}
.fare .type-wrap .type ul li:before{content:''; position:absolute; top:10px; left:0; width:3px; height:3px; background-color:#aaa; border-radius:100px}

.fare .required{display:flex; align-items:center; margin:40px auto 30px; padding:40px 50px; background-color:var(--sky-bg3); border-radius:20px}
.fare .required .tit{width:30%; font-size:2.125rem; font-weight:600; color:var(--primary-color); text-align:center;}
.fare .required ul{flex-grow:1; display:flex; justify-content:space-evenly}
.fare .required ul li{text-align:center;}
.fare .required ul li span.icon{display:inline-flex; justify-content:center; align-items:center; width:100px; height:100px; background-color:#fff; border-radius:100px}
.fare .required ul li span.icon img{max-height:45px}
.fare .required ul li p{margin-top:15px; font-size:1.125rem; color:#666; line-height:1.35}
.fare .required ul li p span{margin-left:5px;}

.exp-box-wrap{display:flex; gap:0 30px; margin-top:30px;}
.exp-box{position:relative; flex:1; padding:70px 40px; border:1px solid #ddd; border-radius:20px}
.exp-box:before{content:''; position:absolute; top:0; width:23px; height:42px; background-color:var(--primary-color); text-align:center;}
.exp-box .tit{padding-bottom:20px; border-bottom:1px solid #ddd; font-size:2.125rem; color:#666; font-weight:600; text-align:center;}
.exp-box .tit span{color:var(--primary-color)}
.exp-box .d-c-wrap{padding-top:15px;}
.exp-box .sub-tit{padding:25px 0 4px; font-size:1.25rem; text-align:left;}
.exp-box ul li{position:relative; margin:4px 0; padding-left:10px; color:#666;}
.exp-box ul li:before{content:''; position:absolute; top:10px; left:0; width:5px; height:2px; background-color:#aaa;}
.exp-box .condition{margin-top:5px; padding:15px; background-color:#f9f4ee; border-left:3px solid #c9b8a6; color:#a17d66; font-size:.938rem}
.exp-box .condition-txt{margin-top:10px; color:#94765c; }
.exp-box .condition-txt span{color:#e1594f; font-weight:500}

@media only screen and (max-width:1200px){
	.fare .type-wrap .type{padding:45px 30px 30px;}
	.fare .type-wrap .type .kind,.fare .type-wrap .type .type-fare{font-size:1.375rem}
	.fare .type-wrap .type ul li{margin:6px 0; font-size:.938rem;}

	.fare .required .tit{font-size:2rem}
	.fare .required ul li span.icon{width:90px; height:90px;}
	.fare .required ul li p{font-size:1.063rem}
	.exp-box{padding:50px 40px}
	.exp-box .tit{font-size:1.75rem}
	.exp-box .sub-tit{padding:30px 0 0; font-size:1.125rem}
	.exp-box ul li{font-size:.938rem}
	.fare .required,.exp-box-wrap{width:100%;}
}
@media only screen and (max-width:1024px){
	.fare .type-wrap{flex-wrap:wrap; gap:20px;}
	.fare .type-wrap .type{flex:auto; padding:30px 40px; width:calc(50% - 20px);}
	.fare .type-wrap .type ul{display:flex; flex-wrap:wrap; margin-top:20px; padding-top:20px; border-top:1px dotted #ddd;}
	.fare .type-wrap .type ul li{margin:2px 0; width:50%; box-sizing:border-box}
	.exp-box{padding:50px 40px 40px}
	.exp-box .sub-tit{padding:25px 0 0}
}
@media only screen and (max-width:860px){
	.fare .required{margin:35px auto 20px; padding:30px 40px}
	.fare .required .tit{width:25%}
	.fare .required ul li p span{margin-right:0; display:block}
	.fare .required ul li span.icon{width:80px; height:80px;}
	.fare .required ul li span.icon img{max-height:40px}
	.fare .required, .exp-box-wrap{gap:0 20px}
}
@media only screen and (max-width:768px){
	.sub-txt.inner{padding-top:5px}
	.div-line{padding:10px 30px}
	.fare .type-wrap .type ul li{width:100%;}
	.fare .required{gap:0;}
	.fare .required .tit{font-size:1.563rem}
	.exp-box-wrap{margin-top:25px;}
	.exp-box{padding:45px 30px}
	.exp-box:before{width:20px; height:35px}
	.exp-box .tit{font-size:1.375rem}
}
@media only screen and (max-width:650px){
	.exp-box-wrap{flex-flow:column; gap:15px; margin-top:15px; }
	.fare .type-wrap{margin-top:0px; gap:15px;}
	.fare .type-wrap .type{display:flex; padding:20px 25px; width:100%; align-items:start; box-shadow:0 0 10px rgba(0,0,0,.1)} 	
	.fare .type-wrap .type > div{align-self:stretch; padding-right:20px; width:100px; border-right:1px dotted #ddd; flex-shrink:0;}
	.fare .type-wrap .type ul{flex-grow:1; margin-left:30px; padding-top:0; border:0; margin-top:0}
	.fare .type-wrap .type img,.fare .type-wrap .type:nth-of-type(3) img,.fare .type-wrap .type:nth-of-type(4) img{max-height:none; max-width:80%}
	.fare .type-wrap .type .type-fare{padding-bottom:18px; font-size:1.25rem}
	.fare .type-wrap .type .kind{font-size:1.25rem}
	.div-line img{max-width:16px;}
	.sub-tit.inner{font-size:1.75rem;}
	.fare .required{flex-flow:column; margin:25px auto 10px;}
	.fare .required .tit{font-size:1.438rem}
	.fare .required ul{margin-top:10px; width:100%; justify-content:space-around;}
	.fare .required ul li span.icon{width:70px; height:70px;}
	.exp-box{padding:35px 25px;}
	.exp-box .d-c-wrap{padding-top:5px;}
}
@media only screen and (max-width:479px){
	.fare .required ul{justify-content:space-between;}
	.fare .required ul li p{margin-top:12px;}
	.fare .required ul li span.icon img{max-height:37px;}
}


.restricted .truck-box{display:flex; align-items:center; justify-content:center; gap:0 60px; padding:80px 50px; background-color:var(--sky-bg2); border-radius:20px;}
.restricted .truck-box img{max-height:260px}
.restricted .spec{margin-top:50px;}
.restricted .spec ul{display:flex; justify-content:center; align-items:start; gap:0 30px}
.restricted .spec ul li{flex:1; text-align:center;}
.restricted .spec ul li .kind{font-size:1.375rem; color:var(--primary-color); font-weight:500}
.restricted .spec ul li .info{padding-top:8px; font-size:1.5rem; color:#666; font-weight:600}
.restricted .spec ul li .txt{margin-top:20px; padding-top:23px; border-top:1px solid #ddd; color:#666;}

@media only screen and (max-width:1400px){
	.restricted .truck-box{padding:60px 40px;}
	.restricted .truck-box img{max-height:240px}
}
@media only screen and (max-width:1024px){
	.restricted .spec{margin-top:40px}
	.restricted .truck-box img{max-height:190px}
}
@media only screen and (max-width:768px){
	.restricted .truck-box{padding:50px 40px; gap:0 30px}
	.restricted .truck-box img{max-height:150px}
	.restricted .spec{margin-top:30px}
	.restricted .spec ul{gap:0 20px}
	.restricted .spec ul li .kind{font-size:1.25rem}
	.restricted .spec ul li .info{padding-top:3px; font-size:1.375rem}
	.restricted .spec ul li .txt{margin-top:10px; padding-top:15px;}
}
@media only screen and (max-width:650px){
	.restricted .truck-box{margin-top:-30px; padding:40px 20px; gap:0 15px}
	.restricted .truck-box img{max-height:100px}
	.restricted .spec{margin-top:15px}
	.restricted .spec ul{gap:14px; flex-wrap:wrap; justify-content:start}
	.restricted .spec ul li{flex:0 0 auto; width:calc(50% - 7px); padding:20px 15px; border-radius:15px; box-shadow:0 0 10px rgba(0,0,0,.1); }
	.restricted .spec ul li .kind{font-size:1rem}
	.restricted .spec ul li .info{padding-top:0; font-size:1rem}
	.restricted .spec ul li .txt{margin-top:7px; padding-top:10px; border-top:1px dotted #ddd; font-size:.938rem}
	.restricted .spec ul li > div{display:flex; justify-content:center; align-items:center; gap:0 7px}
}


.road-guide .map-wrap img{max-width:100%}
.road-guide .map-wrap iframe {width:100%; max-width:1200px; height:800px; border:1px solid #b4b4b4; box-sizing: border-box;}
.road-guide .guide-box{display:flex; gap:0 50px; align-items:stretch; margin-top:20px;}
.road-guide .guide-box .cate{display:flex; flex-flow:column; justify-content:center; align-items:center; padding:15px 0; width:360px; flex-shrink:0; border-radius:18px; background-color:var(--sky-bg2)}
.road-guide .guide-box .cate .tit{font-size:1.938rem; font-weight:600}
.road-guide .guide-box .cate .txt{font-size:1.063rem; color:#666}
.road-guide .list{flex-grow:1; }
.road-guide .list > li > a{display:flex; justify-content:space-between; padding:15px 0; align-items:center; border-bottom:1px solid #ddd;}
.road-guide .list > li > a:hover ul li:before{border-color:var(--primary-color); transition:all .3s}
.road-guide .list > li > a ul{display:flex; align-items:center; gap:0 38px}
.road-guide .list > li > a ul li{position:relative; font-size:1.188rem; color:#666; transition:all .3s}
.road-guide .list > li > a ul li:before{content:''; position:absolute; top:calc(50% - 1px); right:-19px; transform:translateY(-50%) rotate(45deg); width:9px; height:9px; border-top:2px solid #ddd; border-right:2px solid #ddd;}
.road-guide .list > li > a ul li:last-child:before{display:none}
.road-guide .list > li .map-icon{display:flex; align-items:center; justify-content:center; border-radius:10px; border:none; border:1px solid var(--sky-bg2)}
.road-guide .list > li .map-icon:hover{border:1px solid var(--primary-color); background:#fff;}
.road-guide .list > li .map-icon img{max-width:35px; border-radius:10px;}


@media only screen and (max-width:1024px){
	.road-guide .list > li > a{padding:10px 0}
	.road-guide .inner-small{width:100%}
	.road-guide .guide-box{gap:0 35px}
	.road-guide .guide-box{margin-top:15px;}
	.road-guide .guide-box .cate{width:260px}
	.road-guide .guide-box .cate .tit{font-size:1.75rem}
	.road-guide .map-wrap iframe{height:500px}
}
@media only screen and (max-width:768px){
	.road-guide .list > li > a{padding:6px 0}
	.road-guide .guide-box{gap:0 28px}
	.road-guide .guide-box .cate .tit{font-size:1.5rem}
	.road-guide .guide-box .cate{width:200px}
	.road-guide .list > li > a ul{gap:0 30px}
	.road-guide .list > li > a ul li:before{top:50%; right:-16px; width:7px; height:7px;}
	.road-guide .list > li .map-icon img{max-width:30px; border-radius:5px;}
	.road-guide .list > li .map-icon:hover{border:none;}
}
@media only screen and (max-width:650px){
	.road-guide .inner-small{margin-top:0}
	.road-guide .guide-box{flex-flow:column}
	.road-guide .guide-box .cate{flex-flow:row; justify-content:space-between; padding:11px 20px; border-radius:10px; width:100%}
	.road-guide .guide-box .cate .tit{font-size:1.25rem}
	.road-guide .list > li:last-child > a{border:none;}
	.road-guide .list > li > a{padding:5px 0; margin:0 0 0 20px}
	.road-guide .list > li > a ul{gap:0 22px}
	.road-guide .list > li > a ul li{font-size:1.063rem}
	.road-guide .list > li > a ul li:before{right:-13px;}
}

.ramp .ramp-wrap{text-align:center;}
.ramp .ramp-wrap .con-tit{display:block; padding:13px 15px 10px 70px; margin-bottom:10px; text-align:left; font-size:1.375rem; font-weight:500; background:var(--sky-bg) url(/assets/img/use/icon-ramp.png) no-repeat left 30px center / auto 50%; border-radius:10px; color:var(--primary-color); font-weight:600}
.ramp .ramp-wrap .con-tit.space{margin-top:35px;}
.ramp .ramp-wrap img{width:100%; border-radius:20px}
@media only screen and (max-width:1400px){
	.ramp .inner{width:100%;}
}
@media only screen and (max-width:650px){
	.ramp .ramp-wrap .con-tit{margin-bottom:7px; padding:11px 0 9px 48px; font-size:1.125rem; background-position:left 20px center;}
	.ramp .ramp-wrap .con-tit.space{margin-top:20px;}
	.ramp .ramp-wrap img{border-radius:15px; }
}



.unpaid-info .unpaid-info-wrap{display:flex; align-items:center; gap:0 200px}
.unpaid-info .unpaid-info-wrap:first-of-type{padding-bottom:45px; margin-bottom:45px; border-bottom:1px solid #ddd;}
.unpaid-info .unpaid-info-wrap .con-tit{padding-left:40px; width:200px; flex-shrink:0; font-size:1.625rem; font-weight:500; color:#666;} 
.unpaid-info .unpaid-info-wrap .pay-go{flex-grow:1}
.unpaid-info .unpaid-info-wrap .pay-go ul{display:flex; justify-content:space-between;}
.unpaid-info .unpaid-info-wrap .pay-go ul li{text-align:center;}
.unpaid-info .unpaid-info-wrap .pay-go ul li p{color:#e87b94; font-size:1.375rem; font-weight:600}
.unpaid-info .unpaid-info-wrap .pay-go ul li a{margin-top:20px; padding:10px 40px; color:#e87b94; border:1px solid #e87b94; font-size:1.125rem; border-radius:10px; font-weight:600}
.unpaid-info .unpaid-info-wrap .pay-go ul li a:hover{background-color:#e87b94; color:#fff;}
.unpaid-info .unpaid-info-wrap .pay-go ul li img{max-height:100px}
.unpaid-info .unpaid-info-wrap .pay-go ul li.alarm :where(p,a){color:#3c94d7; border-color:#3c94d7}
.unpaid-info .unpaid-info-wrap .pay-go ul li.alarm a:hover{background-color:#3c94d7; color:#fff;}
.unpaid-info .unpaid-info-wrap .pay-go ul li.auto-pay :where(p,a){color:#e3b560; border-color:#e3b560}
.unpaid-info .unpaid-info-wrap .pay-go ul li.auto-pay a:hover{background-color:#e3b560; color:#fff;}
.unpaid-info .unpaid-info-wrap :where(.pay-go,.pay-place){padding:0 40px}
.unpaid-info .unpaid-info-wrap .pay-place{display:flex; gap:0 40px; align-items:center;}
.unpaid-info .unpaid-info-wrap .pay-place img{max-width:110px}
.unpaid-info .unpaid-info-wrap .pay-place li{padding:2px 0; font-size:1.063rem; color:#8f8b7e}

.unpaid-info .charge{margin-top:100px; padding:70px 50px; background-color:#f9f6eb; border-radius:20px; text-align:center;}
.unpaid-info .charge .mark{max-width:60px}
.unpaid-info .charge .sub-tit{padding-top:10px; font-size:1.125rem; color:#444;}
.unpaid-info .charge .main-txt{margin-top:30px; font-size:1.375rem; line-height:1.7}
.unpaid-info .charge .main-txt span{color:var(--primary-color); font-weight:500}
.unpaid-info .charge .con{display:flex; justify-content:center; gap:0 20px; margin-top:60px;}
.unpaid-info .charge .con > li{width:400px; text-align:left;}
.unpaid-info .charge .con > li .img-wrap{height:230px; background:#cfe1e2 url(/assets/img/unpaid/icon-info-05.png) no-repeat top 60% center/80%; border-radius:20px 20px 0 0}
.unpaid-info .charge .con > li .txt-wrap{display:flex; flex-flow:column; padding:45px 40px; background-color:#fff; border-radius:0 0 20px 20px}
.unpaid-info .charge .con > li .txt-wrap .txt-con{height:230px}
.unpaid-info .charge .con > li .txt-wrap .txt-con .tit{font-size:1.375rem; font-weight:500}
.unpaid-info .charge .con > li .txt-wrap .txt-con ul{padding-top:5px;}
.unpaid-info .charge .con > li .txt-wrap .txt-con ul li{position:relative; margin:5px 0; color:#666; padding-left:12px;}
.unpaid-info .charge .con > li .txt-wrap .txt-con ul li:before{content:''; position:absolute; top:10px; left:0; width:6px; height:2px; background-color:#aaa;}
.unpaid-info .charge .con > li .txt-wrap .time{padding-top:15px; border-top:1px dotted #ddd; font-size:1.25rem; color:var(--primary-color)}
.unpaid-info .charge .con > li:nth-child(2) .img-wrap{background:#ebe5d5 url(/assets/img/unpaid/icon-info-06.png) no-repeat top 60% center/auto 55%;}
.unpaid-info .charge .con > li:nth-child(2) .txt-wrap .time{color:#bd703a}
.unpaid-info .charge .after{padding-top:45px; font-size:1.063rem; color:#666;}
.unpaid-info .charge .after span{color:var(--primary-color); font-weight:500}

.receipt table{margin-top:-10px;}

@media only screen and (max-width:1200px){
	.unpaid-info .unpaid-info-wrap{gap:0 100px}
}
@media only screen and (max-width:1024px){
	.unpaid-info .unpaid-info-wrap{gap:0 70px}
	.unpaid-info .unpaid-info-wrap .con-tit{padding-left:20px}
	.unpaid-info .unpaid-info-wrap :where(.pay-go,.pay-place){padding:0 20px}
	.unpaid-info .unpaid-info-wrap:first-of-type{padding-bottom:35px; margin-bottom:35px}
	.unpaid-info .charge .con > li{width:50%}
}
@media only screen and (max-width:860px){
	.unpaid-info .unpaid-info-wrap{gap:0 40px}
	.unpaid-info .unpaid-info-wrap .pay-go ul li a{padding:8px 40px;margin-top:13px}
	.unpaid-info .unpaid-info-wrap .con-tit{width:180px; font-size:1.5rem}
	.unpaid-info .unpaid-info-wrap .pay-go ul li img{max-height:80px;}
	.unpaid-info .unpaid-info-wrap .pay-place img{max-width:90px}
	.unpaid-info .charge{margin-top:80px; padding:60px 40px;}
	.unpaid-info .charge .mark{max-width:50px;}
	.unpaid-info .charge .sub-tit{color:#666;}
	.unpaid-info .charge .con{margin-top:45px; gap:0 15px}
	.unpaid-info .charge .con > li .txt-wrap{padding:45px 35px 40px;}
}
@media only screen and (max-width:768px){
	.unpaid-info .unpaid-info-wrap{flex-flow:column}
	.unpaid-info .unpaid-info-wrap .pay-go{width:100%;}
	.unpaid-info .unpaid-info-wrap .con-tit{padding-bottom:15px; width:100%; font-size:1.25rem}
	.unpaid-info .unpaid-info-wrap .pay-place{width:100%; padding:0 10px; gap:0 25px; justify-content:start;}
	.unpaid-info .charge .con > li .img-wrap{height:200px;}
	.unpaid-info .charge .con > li .txt-wrap{padding:40px 30px 35px;}
	.unpaid-info .charge .con > li .txt-wrap .txt-con{height:200px}
	.unpaid-info .charge .con > li .txt-wrap .txt-con .tit{font-size:1.25rem}
	.unpaid-info .charge .after{padding-top:40px; line-height:1.6}
	.receipt table{}
}
@media only screen and (max-width:650px){
	.unpaid-info .unpaid-info-wrap :where(.pay-go,.pay-place){padding:0}
	.unpaid-info .unpaid-info-wrap .pay-go ul{justify-content:space-around}
	.unpaid-info .unpaid-info-wrap .pay-go ul li a{padding:9px 27px; font-size:1rem}
	.unpaid-info .unpaid-info-wrap .pay-go ul li p{font-size:1.063rem}
	.unpaid-info .unpaid-info-wrap .pay-go ul li img{max-height:67px}
	.unpaid-info .unpaid-info-wrap .pay-go ul li a{font-size:.938rem; border-radius:8px}
	.unpaid-info .unpaid-info-wrap .con-tit{padding:0 0 10px; font-size:1.125rem}
	.unpaid-info .unpaid-info-wrap:first-of-type{padding-bottom:20px; margin:0 0 20px;}
	.unpaid-info .unpaid-info-wrap:first-of-type .con-tit{display:none;}
	.unpaid-info .unpaid-info-wrap .pay-place{gap:0 20px}
	.unpaid-info .unpaid-info-wrap .pay-place img{max-width:80px;}
	.unpaid-info .unpaid-info-wrap .pay-place li{padding:1px 0; font-size:1rem}

	.unpaid-info .charge{margin-top:60px; padding:50px 20px;}
	.unpaid-info .charge .con{margin-top:40px;}
	.unpaid-info .charge .con{flex-flow:column; gap:15px;}
	.unpaid-info .charge .con > li{width:100%;}
	.unpaid-info .charge .con > li .txt-wrap .txt-con{height:auto}
	.unpaid-info .charge .main-txt{font-size:1.125rem; line-height:1.6; color:#666;}
	.unpaid-info .charge .con > li .img-wrap{height:170px;}
	.unpaid-info .charge .con > li .txt-wrap{padding:30px 25px 30px;}
	.unpaid-info .charge .con > li .txt-wrap .time{margin-top:15px; padding-top:10px; font-weight:500; font-size:1.188rem;}
	.unpaid-info .charge .con > li .txt-wrap .txt-con ul li{padding-left:11px}
	.unpaid-info .charge .con > li .txt-wrap .txt-con ul li:before{top:9px; width:5px; height:1px;}
	.unpaid-info .charge .after{padding-top:25px;}
}


.unpaid-search .search-box{display:flex; align-items:center; justify-content:space-between; margin:-40px auto 0; padding:20px 30px 20px 50px; width:860px; background-color:var(--sky-bg3); border-radius:15px}
.unpaid-search .search-box > p{font-size:1.375rem; color:#666; font-weight:600}
.unpaid-search .search-box .search-wrap{display:flex; gap:0 8px; }
.unpaid-search .search-box .search-wrap input{border:none; border-radius:10px;}
.unpaid-search .search-box .search-wrap input::placeholder{color:#aaa}
.unpaid-search .search-box .search-wrap button{display:flex; align-items:center; gap:0 4px; padding:0 20px; background-color:#758a95; color:#fff; border:none; border-radius:10px; font-size:1.063rem}
.unpaid-search .search-box .search-wrap button img{max-width:16px;}
.unpaid-search table tr:last-child td:last-child{border-bottom:0}
.unpaid-search .total{margin:70px 0 -30px; font-size:1.5rem; font-weight:600; text-align:center;}
.unpaid-search .total span{color:var(--led-orange-color)}

.pay-info-group{margin-top:80px;}
.pay-info-group ul{display:flex; justify-content:center; gap:0 180px}
.pay-info-group ul li{position:relative; display:flex; align-items:start; gap:0 35px; color:#666;}
.pay-info-group ul li:first-child:after{content:''; position:absolute; right:-90px; top:0; width:1px; height:100%; background-color:#ddd;}
.pay-info-group ul li .tit{font-size:1.625rem; font-weight:600}
.pay-info-group ul li .txt{padding-top:15px; width:250px; font-size:1rem; }
.pay-info-group ul li a{margin-top:25px; padding:11px 0; font-size:1.125rem; font-weight:500; width:100%; text-align:center; border-radius:7px;}
.pay-info-group ul li:nth-child(1) img{max-width:62px;}
.pay-info-group ul li:nth-child(1) a{border:1px solid #e68f12; color:#e68f12}
.pay-info-group ul li:nth-child(1) a:hover{background-color:#e68f12; color:#fff;}
.pay-info-group ul li:nth-child(2) img{max-width:125px;}
.pay-info-group ul li:nth-child(2) a{border:1px solid #5774bb; color:#5774bb}
.pay-info-group ul li:nth-child(2) a:hover{background-color:#5774bb; color:#fff;}

@media only screen and (max-width:1024px){
	.pay-info-group ul{gap:0 120px}
	.pay-info-group ul li:first-child:after{right:-60px}

	.unpaid-search .total{margin:60px 0 -15px; font-size:1.5rem;}
}
@media only screen and (max-width:960px){
	.unpaid-search .search-box{width:80%}
	.pay-info-group{margin-top:70px}
	.pay-info-group ul li:nth-child(1) img{max-width:50px;}
	.pay-info-group ul li:nth-child(2) img{max-width:110px;}
	.pay-info-group ul li .txt{width:200px; padding-top:10px}
}
@media only screen and (max-width:768px){
	.unpaid-search .search-box{width:100%}
	.pay-info-group ul li .tit{font-size:1.5rem}
	.pay-info-group ul li .txt{padding-top:5px}
	.pay-info-group ul li{flex-flow:column; text-align:center; align-items:center;}
	.pay-info-group ul li:nth-child(1) img{max-width:50px;}
	.pay-info-group ul li:nth-child(1) .tit{margin-top:18px}
	.pay-info-group ul li:nth-child(2) img{max-width:80px;}

	.unpaid-search .total{margin-top:55px; font-size:1.25rem}
}
@media only screen and (max-width:650px){
	.unpaid-check.unpaid-search .search-box{margin-top:-25px;}
	.unpaid-search .search-box{margin-top:-20px; padding:15px 20px 15px 25px}
	.unpaid-search .search-box > p{font-size:1.125rem}
	.unpaid-search .search-box .search-wrap input{width:150px}
	.unpaid-search .search-box .search-wrap button{padding:9px 15px;}
	.unpaid-search .search-box .search-wrap button img{max-width:13px;}
	.pay-info-group{margin-top:55px;}
	.pay-info-group ul li .txt{width:auto}
	.pay-info-group ul{gap:0 40px}
	.pay-info-group ul li:first-child:after{right:-20px}
	.pay-info-group ul li .tit{font-size:1.25rem}
	.pay-info-group ul li:nth-child(1) img{max-width:40px;}
	.pay-info-group ul li:nth-child(2) img{max-width:70px;}
	.pay-info-group ul li:first-child:after{background-color:#eee;}
	.pay-info-group ul li a{margin-top:17px; padding:9px 0; font-size:1rem}
	.pay-info-group ul li .txt{padding-top:3px; font-size:.938rem}
}

table{margin-top:60px; width:100%; border-top:2px solid #333;}
table thead{background-color:#f5f5f5; }
table thead th{font-size:1.25rem; font-weight:600}
table :where(th,td){padding:20px 10px; text-align:center;}
table td{border-bottom:1px solid #ddd; color:#555;}

.inner-table{max-height:150px; overflow-y:auto}
.inner-table table{margin:0}
.inner-table table :where(th,td){font-size:.875rem; padding:12px 7px;}

.btn-wrap{text-align:center;}
.btn-wrap.space{margin-top:35px;}
.btn-basic{margin:0 2px; padding:16px 60px; background-color:var(--primary-color); border:none; color:#fff; font-size:1.25rem; border-radius:10px}
.btn-basic.small{padding:10px 15px; font-size:1rem}
.btn-basic:hover{background-color:var(--primary-color-hover)}
.btn-basic.line{border:1px solid var(--primary-color); color:var(--primary-color); background:none;}
.btn-basic.line:hover{background:var(--primary-color); color:#fff;}
.btn-basic.long{padding:16px 100px;}

.checkbox-item.all { display: flex; align-items: center; margin-bottom: 12px; cursor: pointer; font-size: 14px; color: #444; }
.checkbox-item.all input[type="checkbox"] { display: none; }
.checkbox-item.all .custom-checkbox { width: 30px; height: 30px; border-radius: 50%; display: inline-block; margin-right: 10px; position: relative; background-color:#ddd;}
.checkbox-item.all input[type="checkbox"]:checked + .custom-checkbox{background:var(--primary-color)}
.checkbox-item.all input[type="checkbox"]:checked + .custom-checkbox::after { content:""; position: absolute; top: 10px; left: 50%; width:12px; height:7px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform: translateX(-50%) rotate(-45deg);}
.checkbox-item.all input[type="checkbox"]:not(:checked) + .custom-checkbox::after { content: ""; width:0; border:0}



.checkbox-item { display: flex; align-items: center; margin-bottom: 17px; cursor: pointer; font-size: 14px; color: #444; }
.checkbox-item input[type="checkbox"] { display: none; }
.custom-checkbox{ width: 25px; height: 25px; border-radius: 50%; display: inline-block; margin-right: 6px; position: relative;}
.checkbox-item input[type="checkbox"]:checked + .custom-checkbox::after { content:""; position: absolute; top: 5px; left: 50%; width:12px; height:7px; border-left:3px solid var(--primary-color); border-bottom:3px solid var(--primary-color); transform: translateX(-50%) rotate(-45deg);}
.checkbox-item input[type="checkbox"]:not(:checked) + .custom-checkbox::after { content: ""; position: absolute; top: 5px; left: 50%; width:12px; height:7px; border-left:3px solid #c5c4c3; border-bottom:3px solid #c5c4c3; transform: translateX(-50%) rotate(-45deg);}


.checkbox-item.in-table{justify-content:center; margin:0}
.checkbox-item.in-table .custom-checkbox{border:1px solid #ddd; border-radius:5px; margin:0}
.checkbox-item.in-table input[type="checkbox"]:checked + .custom-checkbox{border:1px solid var(--primary-color)}
.checkbox-item.in-table input[type="checkbox"]:checked + .custom-checkbox::after{top:7px}


.label-text { flex: 1; font-size:1.063rem}
.label-text .fr{display:block; float:right; font-size:.938rem; cursor:pointer}
.all .label-text{font-size:1.313rem; font-weight:500}


.dim{display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:99}
.layer-pop{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:35px 28px; background-color:#fff; z-index:999; max-height:90vh; overflow-y:auto; border-radius:20px;}
.layer-pop h2{font-size:1.25rem; color:#555; font-weight:600; text-align:center;}
.layer-pop .close{position:absolute; top:25px; right:25px; width:35px; height:35px; cursor:pointer; transition:all .3s}
.layer-pop .close:hover:before,.layer-pop .close:hover:after{background:var(--primary-color); transition:all .3s}
.layer-pop .close:before,.layer-pop .close:after{content:''; position:absolute; left:6px; top:17px; transform:rotate(45deg); width:23px; height:2px; background-color:#333; border-radius:5px;}
.layer-pop .close:after{transform:rotate(-45deg);}
.layer-pop .b-align{position:absolute; bottom:110px; width:calc(100% - 56px)}
.layer-pop .pop-tit{padding:38px 10px 0; font-size:1.688rem; font-weight:600; line-height:1.4}
.layer-pop .pop-tit small{padding-top:5px; display:block; font-size:.938rem; font-weight:400;}
.layer-pop .pop-tit small span{color:var(--primary-color); font-weight:600}
.layer-pop .pop-con{padding:10px;}
.layer-pop .btn-basic{position:absolute; bottom:28px; left:28px; width:calc(100% - 56px)}
.layer-pop .btn-basic.add-b{position:relative; left:0; bottom:0; width:100%;}
.layer-pop .btn-basic.inner-btn{position:relative; width:auto; bottom:auto; left:auto}

.terms{display:none; margin-bottom:10px; padding:10px; border:1px solid #ddd; border-radius:10px; height:100px; overflow-y:auto; background-color:#f9f9f9; }
.terms pre{white-space:pre-wrap; font-size:13px; color:#666;}

@media only screen and (max-width:1024px){
	table{margin-top:40px}	
}
@media only screen and (max-width:768px){
	table thead th{font-size:1.125rem}
	table :where(th,td){padding:17px 5px;}
}
@media only screen and (max-width:650px){
	table{margin-top:30px}
	table thead th{font-size:1rem}	
	table td{font-size:.938rem}
	.btn-basic{padding:13px 50px; font-size:1.125rem}	
	.btn-basic.long{padding:13px 70px}
	.layer-pop .btn-basic{width:calc(100% - 40px); bottom:20px; left:20px}
	.layer-pop .close{top:18px; right:20px;}
	.layer-pop .b-align{bottom:100px}
	.layer-pop .pop-tit{padding-left:0; }
	.layer-pop .pop-con{padding:0}

	.checkbox-item{margin-bottom:13px;}
	.label-text{font-size:1rem}
	.custom-checkbox{margin-right:4px;}
	.service-pop .agree .all-chk{margin-bottom:22px;}
	.checkbox-item input[type="checkbox"]:checked + .custom-checkbox::after,
	.checkbox-item input[type="checkbox"]:not(:checked) + .custom-checkbox::after{top:6px;}

}


.unpaid-service .btn-wrap{margin-top:-15px}
.unpaid-service .info-box{margin-top:50px; padding:60px; background-color:var(--sky-bg3); border-radius:20px}
.unpaid-service .info-box ul{display:flex; justify-content:space-around}
.unpaid-service .info-box ul li{text-align:center;}
.unpaid-service .info-box ul li .icon{display:inline-block; width:135px; height:135px; border-radius:100px; background:#fff url(/assets/img/unpaid/icon-service-01.png) no-repeat center / 55%}
.unpaid-service .info-box ul li:nth-child(2) .icon{background:#fff url(/assets/img/unpaid/icon-service-02.png) no-repeat center / 60%}
.unpaid-service .info-box ul li:nth-child(3) .icon{background:#fff url(/assets/img/unpaid/icon-service-03.png) no-repeat center / 45%}
.unpaid-service .info-box ul li .sub-tit{padding-top:15px; font-size:1.188rem; color:var(--primary-color); font-weight:500}
.unpaid-service .info-box ul li .tit{font-size:1.5rem; font-weight:600; color:#666; line-height:1.6}

.unpaid-service .service-info{display:flex; gap:0 200px; padding:70px 0 60px; border-bottom:1px solid #ddd;}
.unpaid-service .service-info .txt-wrap{padding-left:30px}
.unpaid-service .service-info .txt-wrap .tit{font-size:2.813rem; line-height:1.15; font-weight:600}
.unpaid-service .service-info .txt-wrap .txt{padding-top:25px; font-size:1.375rem; color:#666; font-weight:600}
.unpaid-service .info-wrap{flex-grow:1}
.unpaid-service .info-wrap .in-tit:first-of-type{margin-top:0}
.unpaid-service .info-wrap .in-tit{margin-top:40px; padding-bottom:12px; font-size:1.5rem; font-weight:600; color:var(--primary-color)}
.unpaid-service .info-wrap .txt-list li{position:relative; margin:4.5px 0;  padding-left:10px; font-size:1.125rem; color:#666;}
.unpaid-service .info-wrap .txt-list li:first-child{margin-top:0}
.unpaid-service .info-wrap .txt-list li:before{content:''; position:absolute; top:12px; left:0; width:6px; height:2px; background-color:#aaa;}
.unpaid-service .info-wrap .process{display:flex; flex-wrap:wrap; gap:10px 30px;}
.unpaid-service .info-wrap .process li{position:relative; padding:10px 20px; border:1px solid #666; border-radius:8px;}
.unpaid-service .info-wrap .process li:before{content:''; position:absolute; top:50%; right:-18px; transform:translateY(-50%); width:6px; height:6px; background:url(/assets/img/icon-triangle.png) no-repeat center / cover}
.unpaid-service .info-wrap .process li:last-child:before{display:none}


.faq-item { background-color: #fff; border-radius: 17px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); margin-bottom: 18px; overflow: hidden; transition: all 0.3s ease; }
.faq-question { display: flex; align-items: center; gap:0 5px; padding: 18px 50px; cursor: pointer; font-weight: 500; font-size: 1.125rem; border-bottom: 1px solid #eee; color:#666;}
.faq-question::before { content: "Q"; font-weight: 500; color: #333; margin-right: 12px; font-size: 2.25rem; }
.faq-answer{ padding: 35px; font-size: 1.063rem; line-height: 1.6; color: #666; background-color: #f3f3f3; display: none; }
.faq-answer span{font-weight:500; color:#333;}
.faq-item.active .faq-answer { display: block; }


.service-pop{width:510px; min-height:640px; }
.service-pop .agree .all-chk{padding-bottom:7px; margin-bottom:25px; border-bottom:1px solid #ddd;}
.service-pop .form{margin-top:20px;}
.service-pop.complete{text-align:center;}
.service-pop.complete img{display:inline-block; padding-top:100px; max-width:100px} 
.service-pop.complete .pop-tit{padding:20px 0 0; text-align:center;}
.service-pop.complete .car-info{padding-top:20px; text-align:center; font-size:1.125rem}

.form .form-box.line{padding-top:20px; border-top:1px dashed #333;}
.form .form-box { margin: 0 auto; font-family: sans-serif; }
.form .form-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.form .form-col .form-group{margin-bottom:10px;}
.form :where(.form-row,.form-col) label {display:block; margin-bottom: 7px; font-size: 1rem; color: #333; }
.form .form-group { flex: 1; display: flex; flex-direction: column; position: relative; }
.form .form-group.with-button { flex-direction: row; }
.form .form-group input {border-radius: 6px; width: 100%; box-sizing: border-box; }
.form .form-group .two{display:flex; align-items:center; gap:0 7px;}
.form .form-group.with-button input { flex: 1; margin-right: 8px; }
.form .form-group.with-icon a{display:flex; gap:0 7px; align-items:center;}
.form .form-group.with-icon a:hover img{filter:brightness(2);}
.form .form-group.with-icon img{max-width:17px}
.form .btn { padding: 10px 16px; font-size: 1rem; border-radius: 6px; border: 1px solid var(--primary-color); background: #fff; color: var(--primary-color); cursor: pointer; font-weight:500}
.form .btn.blue:hover { background: var(--primary-color); color: #fff; }

@media only screen and (max-width:1200px){
	.unpaid-service .info-wrap .in-tit{margin-top:30px; padding-bottom:10px; font-size:1.25rem}
	.unpaid-service .info-wrap .txt-list li{font-size:1.063rem}
	.unpaid-service .service-info{gap:0 120px}
	.unpaid-service .service-info{padding:60px 0 50px;}
	.unpaid-service .service-info .txt-wrap .tit{font-size:2.25rem; line-height:1.3}
	.unpaid-service .service-info .txt-wrap .txt{padding-top:15px; font-size:1.125rem}
	.unpaid-service .info-box{padding:50px;}
	.unpaid-service .info-box ul li .icon{width:120px; height:120px}
	.unpaid-service .info-box ul li .sub-tit{font-size:1.125rem}
	.unpaid-service .info-box ul li .tit{font-size:1.375rem}

	.faq-question{padding:16px 45px; font-size:1.063rem}
	.faq-question::before{margin-right:10px; font-size:2.125rem}
}
@media only screen and (max-width:1024px){
	.unpaid-service .info-box{margin-top:45px; padding:45px;}
	.unpaid-service .info-box ul li .icon{width:100px; height:100px}
	.unpaid-service .service-info{padding:50px 0}
}
@media only screen and (max-width:768px){
	.unpaid-service .info-box{margin-top:40px; padding:40px;}
	.unpaid-service .info-box ul li .icon{width:82px; height:82px}
	.unpaid-service .info-box ul li .tit{font-size:1.25rem}
	.unpaid-service .service-info{gap:0 75px;}
	.unpaid-service .info-wrap .process{gap:10px 25px}
	.unpaid-service .info-wrap .process li{padding:9px 17px}
	.unpaid-service .info-wrap .process li:before{right:-16px}

	.faq-item{margin-bottom:15px}
}
@media only screen and (max-width:650px){
	.unpaid-service .info-box{margin-top:35px; padding:45px 10px;}
	.unpaid-service .info-box ul li .icon{width:70px; height:70px}
	.unpaid-service .info-box ul li .sub-tit{padding-top:6px;font-size:.875rem}
	.unpaid-service .info-box ul li .tit{font-size:1rem}
	.unpaid-service .service-info{display:block;}
	.unpaid-service .service-info .txt-wrap{padding:0 0 15px 0}
	.unpaid-service .service-info .txt-wrap .tit{font-size:1.5rem; line-height:1.4}
	.unpaid-service .service-info .txt-wrap .tit br{display:none;}
	.unpaid-service .service-info .txt-wrap .txt{display:none;}
	.unpaid-service .info-wrap{padding-top:5px;}
	.unpaid-service .info-wrap .in-tit{margin-top:25px; padding-bottom:10px; font-size:1.188rem}
	.unpaid-service .info-wrap .txt-list li:before{top:9px; height:1px;}
	.unpaid-service .info-wrap .process{gap:8px 20px;}
	.unpaid-service .info-wrap .process li{padding:8px 15px; font-size:.938rem}
	.unpaid-service .info-wrap .process li:before{right:-13px; width:5px; height:5px;}

	.faq.sub-space{margin-top:40px}
	.faq-item{margin-bottom:13px; border-radius:15px;}
	.faq-question{padding:13px 25px; }
	.faq-question::before{margin-right:6px; font-size:2rem}
	.faq-answer{padding:25px;}

	.service-pop{width:92%; padding:30px 20px; height:670px;}
	.service-pop .agree .all-chk{padding-bottom:2px; margin-bottom:20px;}
	.service-pop .form{margin-top:30px;}
	.service-pop.complete img{padding-top:115px}
	.service-pop.complete .pop-tit{padding:15px 0 0}
	.service-pop.complete .car-info{padding-top:15px;}
}


.board table{margin-top:0px}
.board .badge{display:inline-block; padding:5px 10px; border-radius:5px; background:var(--sky-bg3); color:var(--primary-color); font-size:.938rem; font-weight:500}
.board td a{display:block;}
.board td a:hover{color:var(--primary-color)}
.board .date{font-size:.938rem; color:#666;}

.pagination{margin-top:45px; display:flex; justify-content:center; align-items:center; gap:0 20px}
.pagination :where(.prev,.next){display:flex; align-items:center; gap:0 7px;}
.pagination :where(.prev,.next) a img{max-height:9px;}
.pagination :where(.prev,.next) a{display:flex; align-items:center; justify-content:center; width:50px; height:50px; border:1px solid #ddd; border-radius:5px;}
.pagination :where(.prev,.next) a:hover{background-color:#eee;}
.pagination .prev img{transform:scaleX(-1);}
.pagination ul{display:flex; align-items:center; gap:0 5px}
.pagination ul li a{display:flex; align-items:center; justify-content:center; padding:20px; width:50px; height:50px; font-size:1.063rem; border-radius:50%}
.pagination ul li a:hover{color:var(--primary-color)}
.pagination ul li.active a{background-color:var(--primary-color); color:#fff;}

.board-view .sub-con{margin-top:-20px;}
.board-view .subj{font-size:1.938rem; font-weight:500}
.board-view .date{padding:10px 0 20px; font-size:1.125rem; color:#666;}
.board-view .file{display:flex; align-items:center; gap:0 7px; margin-top:7px; padding:15px 20px; background:var(--sky-bg3); color:var(--primary-color); font-size:1.063rem; font-weight:400; border-radius:7px;}
.board-view .file img{max-width:18px}
.board-view .view-con{margin:20px 0; padding:55px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; font-size:1.063rem; color:#666; line-height:1.8}
.board-view .view-con.answer{margin:-21px 0 0; padding-left:50px; padding-right:50px; background:#f1f1f1;}
.board-view .view-b{display:flex; justify-content:space-between; align-items:center;}
.board-view .view-b .move-post{font-size:1.25rem; font-weight:600; color:#666;}

.status{color:var(--led-orange-color)}

.voc :where(input,textarea){padding:15px 20px; font-size:1.125rem}
.voc label,.receipt label{font-size:1.25rem}
.voc label:not(:first-of-type),.receipt label:not(:first-of-type){margin-top:25px;}



@media only screen and (max-width:768px){
	.board table{margin-top:0}
	.board.notice table th:first-child,.board.notice table tr td:first-child{display:none}
	.pagination{margin-top:50px; gap:0 10px}
	.pagination :where(.prev,.next){gap:0 5px}
	.pagination :where(.prev,.next) a,.pagination ul li a{width:40px; height:40px}
	.pagination :where(.prev,.next) a img{max-height:7px}

	.faq .sub-con .faq{margin-top:0;}
}
@media only screen and (max-width:650px){
	.pagination{margin-top:40px;}
	.board.notice table th:last-child{display:none}
	table.responsive tr{border-bottom:1px solid #ddd;}
	table.responsive td{display:block;}
	table.responsive td{border:none;}
	table.responsive td:nth-child(2){padding:15px 5px 5px; font-size:1.063rem; font-weight:500; word-break:break-all}
	table.responsive td.date{padding:0 5px 13px; text-align:left; color:#888;}

	.board-view .subj{font-size:1.5rem}
	.board-view .date{padding:5px 0 20px; font-size:1rem; color:#888;}
	.board-view .file{padding:14px 19px; font-size:1rem}
	.board-view .file img{max-width:16px;}
	.board-view .view-con{padding:35px 0}
	.board-view .view-b .move-post{font-size:1.063rem}
	.board-view .view-con.answer{padding-left:35px; padding-right:35px;}

	.voc .sub-space{margin-top:50px}
	.voc table th:first-child,.voc table tr td:first-child{display:none}
	.voc.board-view .view-con{margin:0 0 -1px}
	.voc :where(input,textarea){padding:13px 20px; font-size:1.063rem}
	.voc label,.receipt label{font-size:1.125rem}
	.voc label:not(:first-of-type),.receipt label:not(:first-of-type){margin-top:19px;}
}




.unpaid-service.dispute .info-box ul li .icon{background:#fff url(/assets/img/cs/icon-dispute-01.png) no-repeat center / 40%}
.unpaid-service.dispute .info-box ul li:nth-child(2) .icon{background:#fff url(/assets/img/cs/icon-dispute-02.png) no-repeat center / 45%}
.unpaid-service.dispute .info-box ul li:nth-child(3) .icon{background:#fff url(/assets/img/cs/icon-dispute-03.png) no-repeat center / 45%}

.unpaid-search.refund table{margin-top:35px; border-bottom:1px solid #ddd;}
.unpaid-search.refund table tr:last-child td:last-child{border-bottom:1px solid #ddd;}
.refund .search-box{margin-top:-10px;}
.refund .total{margin:50px 0 0}
.refund .btn-wrap{margin:10px 0 0}



.company .company-img{max-width:100%; border-radius:20px;}
.company.about .txt-wrap{display:flex; gap:0 150px}
.company.about .txt-wrap .tit{flex-shrink:0; font-size:2.188rem; font-weight:600; color:var(--primary-color); line-height:1.6}
.company.about .txt-wrap .txt p{color:#666; font-size:1.188rem; line-height:1.8}
.company.about .txt-wrap .txt p:not(:first-child){padding-top:25px}
.company.about .txt-wrap .txt .sign span{padding-left:15px; font-size:1.563rem; color:#333; font-weight:600; letter-spacing:2px}

@media only screen and (max-width:1280px){
	.company.about .txt-wrap{gap:0 80px}
	.company.about .txt-wrap .tit{font-size:2rem}
	.company.about .txt-wrap .txt p{font-size:1.125rem}
	.company.about .txt-wrap .txt p:not(:first-child){padding-top:20px;}
}
@media only screen and (max-width:1024px){
	.company.about .txt-wrap{gap:0 60px}
	.company.about .txt-wrap .tit{width:230px}	
}
@media only screen and (max-width:768px){	
	.company.about .txt-wrap .tit{width:100%;}
	.company.about .txt-wrap{flex-flow:column; gap:25px 0;}
	.company .company-img{margin-top:-30px; display:block; aspect-ratio: 4 / 2.5; width: 100%; height: auto; object-fit: cover;}

	.unpaid-search.refund table{margin-top:25px;}
}
@media only screen and (max-width:650px){	
	.company .company-img{margin-top:0px;}
	.company.about .sub-space{margin-top:45px}
	.company.about .txt-wrap{gap:12px 0}
	.company.about .txt-wrap .tit{font-size:1.438rem; line-height:1.5}
	.company.about .txt-wrap .txt p{line-height:1.7; font-size:1.063rem}
	.company.about .txt-wrap .txt p:not(:first-child){padding-top:14px;}
	.company.about .txt-wrap .txt .sign{margin-top:10px;}

	.refund .total{margin:28px 0 0px;}
	.unpaid-search.refund table{margin-top:20px;}
	.unpaid-search.refund table td{padding:10px 5px;}
}

.overview .con-wrap{display:flex; align-items:center;}
.overview .con-wrap :where(.tit,.txt){flex:1 1 0}
.overview .con-wrap .tit{text-align:center;}
.overview .con-wrap .tit img{max-width:117px}
.overview .con-wrap .tit p{padding-top:15px; font-size:2rem; font-weight:600}
.overview .con-wrap .txt{padding-left:70px; border-left:1px solid #ddd;}
.overview .con-wrap .txt ul{display:flex; gap:0 50px; padding:14px 0;}
.overview .con-wrap .txt ul li:first-child{font-weight:600; color:#333; width:60px;}
.overview .con-wrap .txt ul li{font-size:1.188rem; color:#666;}

@media only screen and (max-width:1024px){
	.overview .con-wrap .tit{padding:0 60px; flex:0 0 auto}
	.overview .con-wrap .tit img{max-width:110px}
	.overview .con-wrap .tit p{font-size:1.75rem}
	.overview .con-wrap .txt ul{padding:12px 0}
}
@media only screen and (max-width:860px){
	.overview .con-wrap .tit p{padding-top:10px; font-size:1.5rem}
	.overview .con-wrap .txt{padding-left:60px}
	.overview .con-wrap .txt ul{gap:0 30px; padding:8px 0;}
	.overview .con-wrap .txt ul li{font-size:1.063rem}
}
@media only screen and (max-width:768px){
	.overview .con-wrap.sub-space{margin-top:50px}
	.overview .con-wrap .tit{padding:0 45px;}
	.overview .con-wrap .txt{padding-left:50px}
	.overview .con-wrap .txt ul{gap:0 20px;}
}
@media only screen and (max-width:650px){
	.overview .con-wrap{flex-flow:column}	
	.overview .con-wrap .txt{width:90%; border:0; border-top:1px solid #ddd; padding:25px 0 0; margin-top:25px;}
	.overview .con-wrap .txt ul{gap:0 15px; padding:7px 0}
}




.pr .swiper-slide{position:relative; }
.pr .swiper-slide .video-tit{position:absolute; width:100%; top:0; left:0; padding:15px 10px 10px 25px; font-size:1.375rem; font-weight:600; color:#fff; background:linear-gradient(to bottom, rgba(0,0,0,.15), transparent)}
.pr .main-swiper { width: 100%; height: 650px; margin-bottom: 15px; }
.pr .main-swiper video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pr .thumb-swiper{ width: 100%; }
.pr .thumb-swiper p{padding-top:10px; opacity:0.5}
.pr .thumb-swiper .swiper-slide-thumb-active p{opacity:1; font-weight:600}
.pr .thumb-swiper .swiper-slide img{cursor: pointer; opacity: 0.5; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: opacity 0.3s;}
.pr .thumb-swiper .swiper-slide-thumb-active img,.thumb-swiper .swiper-slide img:hover { opacity: 1; }
.pr .thumb-swiper img {width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; aspect-ratio: 4 / 2.5;}

@media only screen and (max-width:1024px){
	.pr .main-swiper{height:550px}
}
@media only screen and (max-width:768px){
	.pr .main-swiper{height:450px}
}
@media only screen and (max-width:650px){
	.pr .main-swiper{margin-top:0px; height:270px}
	.pr .swiper-slide .video-tit{font-size:1.25rem}
}



.location .maps{border-bottom:1px solid #ddd;}
.location .maps .root_daum_roughmap{width:100%!important;}
.location .maps .root_daum_roughmap .wrap_map{height:500px!important;}
.location .maps .root_daum_roughmap .wrap_controllers,.location .maps .root_daum_roughmap .cont .section.lst{display:none;}
.location .location-info{display:grid; grid-template-columns:1fr 1fr; gap:50px 0; margin-top:40px; padding-top:50px; border-top:3px solid #333;}
.location .location-info .con:last-of-type{grid-column:1 / span 2; grid-row:2}
.location .location-info .tit{padding-bottom:3px; font-size:1.375rem; font-weight:600}
.location .location-info .txt{color:#666; font-size:1.063rem; line-height:1.7}
.location .location-info .txt span{display:block; margin:2px 0; }

@media only screen and (max-width:860px){
	.location .maps .root_daum_roughmap .wrap_map{height:400px!important;}	
}
@media only screen and (max-width:768px){
	.location .maps{margin-top:0}
	.location .maps .root_daum_roughmap .wrap_map{height:350px!important;}	
	.location .location-info{gap:40px 0; margin-top:30px; padding-top:40px; border-top-width:2px;}
}
@media only screen and (max-width:650px){
	.location .maps .root_daum_roughmap .wrap_map{height:250px!important;}	
	.location .location-info{gap:30px 0; margin-top:15px; padding-top:30px;}
	.location .location-info .tit{font-size:1.25rem}
	.location .location-info .txt{font-size:1rem; line-height:1.6}
}


input[readonly]{background-color:#f1f1f1; color:#aaa;}


.edit-form .form-con{border:1px solid #ddd; margin:0 auto 0; padding:50px; border-radius:20px}
.member.login-form .form-con{max-width:600px}
.member.login-form .form-con .all-chk{margin:15px 0 30px; }
.member.login-form .form-con .all-chk .label-text{font-size:1.063rem;}
.member.login-form .form-con .checkbox-item.all input[type="checkbox"]:checked + .custom-checkbox{background-color:#555}
.member.login-form .form-con input{margin:5px 0; padding:15px 23px; width:100%; border-radius:10px; font-size:1.125rem}
.member.login-form .l-menu{display:flex; align-items:center; justify-content:space-between;}
.member.login-form .l-menu a{position:relative; display:inline-block; margin:13px 10px;}
.member.login-form .l-menu a:hover{text-decoration:underline}
.member.login-form .l-menu a:nth-of-type(2):before{content:''; position:absolute; left:-14px; top:10%; width:1px; height:80%; background-color:#eee;}




.edit-form .form-con{max-width:900px}
.checkbox-item.circle{display:inline-flex; align-items:center; gap:0 7px; margin-right:20px;}
.checkbox-item.circle input{display:none;}
.checkbox-item.circle input:not(:checked) + .custom-checkbox::after{display:none;}
.checkbox-item.circle input:checked + .custom-checkbox::after{display:none;}
.checkbox-item.circle .custom-checkbox{border:1px solid #ddd; margin-right:0}
.checkbox-item.circle input:checked + .custom-checkbox{border:7px solid var(--primary-color)}
.checkbox-item.circle input:checked + .custom-checkbox + .label-text{color:#333;}
.checkbox-item.circle .label-text{color:#aaa}
.edit-form .form :where(.form-row,.form-col) label{margin-bottom:10px; font-size:1.125rem;}
.edit-form .form :where(.form-row,.form-col){margin-bottom:30px;}
.edit-form .agree{padding-top:30px;}
.edit-form .agree .all-chk{padding-bottom:5px; margin-bottom:20px; border-bottom:1px solid #ddd;}
.join-complete{max-width:900px; display:flex; flex-flow:column; align-items:center; justify-content:center; padding:80px; border:1px solid #ddd; border-radius:20px}
.join-complete img{max-width:200px}
.join-complete h2{margin-top:40px; font-size:2.275rem; font-weight:600}
.join-complete .sub-txt{padding-top:20px; line-height:1.6}
.join-complete .btn-wrap{padding-top:15px}

@media only screen and (max-width:768px){
	.edit-form .form-con{padding:40px;}
	.join-complete{padding:70px;}
	.join-complete h2{margin-top:37px; font-size:2.125rem;}
	.join-complete .sub-txt{padding-top:15px}
	.join-complete .btn-wrap{padding-top:5px}
}
@media only screen and (max-width:650px){
	.edit-form .form-con{padding:25px 22px;}
	.member.login-form .form-con .all-chk{margin:8px 0 17px;}
	.edit-form .form :where(.form-row,.form-col) label{margin-bottom:4px; font-size:1.063rem}
	.edit-form .form :where(.form-row,.form-col){margin-bottom:22px;}
	.join-complete{padding:50px 30px;}
	.join-complete img{max-width:150px}
	.join-complete h2{margin-top:30px; font-size:1.75rem;}
	.join-complete .btn-wrap{display:flex; }
	.join-complete .btn-wrap a{flex:1; gap:0 10px}

	.checkbox-item.circle.m-space{margin-right:10px; gap:0 5px;}
	.checkbox-item.circle.m-space input:checked + .custom-checkbox + .label-text{font-weight:600}
}


.mypage-top{display:flex; justify-content:space-between; margin-top:0; padding:65px 100px; background:var(--sky-bg3); border-radius:20px}
.mypage-top .profile{display:flex; align-items:center; gap:0 40px}
.mypage-top .profile .img{display:inline-block; width:160px; height:160px; border-radius:50%; background:#fff url(/assets/img/my/profile-01.png) no-repeat center / 38%;}
.mypage-top .profile .my-info .txt{font-size:1.063rem}
.mypage-top .profile .my-info .tit{padding-top:5px; font-size:1.875rem; line-height:1.1; font-weight:500}
.mypage-top .profile .my-info .tit span{color:var(--primary-color)}
.mypage-top .profile .my-info a{margin-top:25px; padding:5px 15px; border:1px solid #aaa; font-size:.938rem; color:#666; border-radius:5px;}
.mypage-top ul li{display:flex; align-items:center; gap:0 30px; padding:13px 50px 13px 25px; border-bottom:1px solid rgba(85,85,85,.15)}
.mypage-top ul li .tit{color:#666; font-weight:500}
.mypage-top ul li .txt{color:#555; color:1.125rem}

.my-status{margin-top:20px; padding:35px; border:1px solid #ddd; border-radius:20px}
.my-status ul{display:grid; grid-template-columns:repeat(4, 1fr)}
.my-status ul li{text-align:center;}
.my-status ul li .tit{font-size:1.125rem; color:#666;}
.my-status ul li .txt{padding-top:5px; font-size:1.25rem; color:var(--primary-color); font-weight:500}

@media only screen and (max-width:1099px){
	.mypage-top{padding:60px;}
	.mypage-top .profile .img{width:140px; height:140px;}
}
@media only screen and (max-width:860px){
	.mypage-top{padding:50px;}
	.mypage-top .profile{gap:0 35px}
	.mypage-top .profile .img{width:130px; height:130px;}
	.mypage-top ul li{padding:12px 40px 12px 20px}
}
@media only screen and (max-width:768px){
	.mypage-top{padding:40px;}
	.mypage-top .profile{gap:0 30px}
	.mypage-top .profile .img{width:100px; height:100px;}
	.mypage-top .profile .my-info .txt{font-size:1rem}
	.mypage-top .profile .my-info .tit{font-size:1.625rem}
	.mypage-top .profile .my-info a{margin-top:20px;}
	.mypage-top ul li{padding:8px 30px 8px 15px}
	.my-status{margin-top:15px; padding:25px 30px;}
}
@media only screen and (max-width:650px){
	.mypage-top{display:block; padding:30px;}
	.mypage-top .profile{gap:0 20px}
	.mypage-top .profile .img{flex-shrink:0; width:90px; height:90px;}
	.mypage-top .profile .my-info .tit br{display:none;}
	.mypage-top .profile .my-info a{margin-top:15px;}
	.mypage-top ul{margin-top:30px; }
	.mypage-top ul li{padding:8px 30px 8px 15px; gap:0 15px; border:0; border-top:1px solid #ddd;}
	.my-status{padding:25px;}
	.my-status ul{grid-template-columns:repeat(2,1fr); gap:20px 0;}
	.my-status ul li .tit{font-size:1rem}
	.my-status ul li .txt{padding-top:1px; font-size:1.125rem}
	.my .pay-info-group{margin-top:35px;}
}



.delete-con{margin-top:-15px; padding:70px; background:var(--sky-bg3); border-radius:20px; text-align:center;}
.delete-con .txt{font-size:1.063rem;}
.delete-con .tit{padding-top:15px; font-size:1.875rem; font-weight:500}
.delete-con .tit span{color:var(--primary-color)}
.delete-con .txt-02{padding-top:10px; font-size:1.063rem; color:#666;}
.delete-con .box{max-width:600px; margin:45px auto 0; padding:40px; background-color:#fff; border:1px solid #ddd; border-radius:20px; }
.delete-con .box > p{font-size:1.25rem; color:#aaa; font-weight:500}
.delete-con .box > p span{margin-left:5px; color:#333;}
.delete-con .box :where(input,a){margin-top:13px; width:100%;}

@media only screen and (max-width:768px){
	.delete-con{padding:50px;}
}
@media only screen and (max-width:650px){
	.delete-con{padding:40px 20px 25px;}
	.delete-con .tit{padding-top:18px; font-size:1.75rem; line-height:1.3}
	.delete-con .txt-02{padding-top:12px; line-height:1.6}
	.delete-con .box{padding:22px; margin-top:35px}
	.delete-con .box > p{font-size:1.188rem}
	.delete-con .box :where(input,a){margin-top:10px}
	.delete-con .box input{margin-top:13px; padding:12px 15px; font-size:1.063rem}
}


.terms-p .sub-con .tit{margin:40px 0 15px; font-size:1.438rem; font-weight:600; color:var(--primary-color)}
.terms-p .sub-con ul li{position:relative; padding-left:12px; color:#666;}
.terms-p .sub-con ul li:before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; width:3px; height:3px; border-radius:50%; background-color:#aaa;}
.terms-p .sub-con ul li .two{padding-left:20px;}
.terms-p .sub-con ul li.two:before{display:none;}
.terms-p .sub-con table{margin-top:35px;}
.terms-p .sub-con th{font-size:1.063rem}
.terms-p .sub-con th{padding:13px 10px; }
.terms-p .sub-con td{padding:10px; text-align:left; border-right:1px solid #ddd;}
.terms-p .sub-con td:first-child{border-left:1px solid #ddd;}
.terms-p .sub-con .caption{margin-top:35px; font-size:1rem; text-align:left; font-weight:500}
.terms-p .sub-con .caption+div table,.terms-p .d-table+div table{margin-top:10px}
.terms-p .sub-con .responsive-table{overflow-x:auto; width:100%;}

@media only screen and (max-width:650px){
	.terms-p .sub-con .tit{margin:35px 0 7px; font-size:1.375rem}
}


.rent .pass{color:var(--primary-color)}
.rent .form-box:not(:first-of-type){margin-top:30px; }
.rent .form-box:first-of-type .close{display:none;}
.rent .form-box{position:relative; padding:35px 45px; border:1px solid #bbb; border-radius:10px;}
.rent .form-box .status{position:absolute; top:35px; right:35px; font-size:1.25rem; font-weight:500}
.rent .form-box .close{display:block; position:absolute; top:20px; right:20px; width:35px; height:35px; cursor:pointer;}
.rent .form-box .close:before,.rent .form-box .close:after{content:''; position:absolute; left:20%; top:50%; transform:translateY(-50%) rotate(45deg); width:60%; height:2px; background-color:#666;}
.rent .form-box .close:after{top:calc(50% - 1px); transform:rotate(-45deg)}
.rent .form-tit{padding:10px 0; font-size:1.375rem; font-weight:500}
.rent .form .form-row{margin-bottom:0;}
.rent input[readonly]{background-color:#fff;}
.rent .detailArea{display:none; margin-top:10px;}
.rent .half{display:flex; gap:0 20px;}
.rent .half > div{flex:1;}
.rent td a{color:var(--primary-color)}
.rent td a:hover{color:var(--primary-color-hover); text-decoration:underline}
.ui-datepicker-current{display: none !important;}
.rent.rent-view ul li{display:flex; font-size:.938rem; padding:3px 0; font-weight:300}
.rent.rent-view ul li:last-child{border-bottom:0}
.rent.rent-view ul li .cate{flex-shrink:0; width:110px; font-weight:400}
.rent.rent-view ul li .name{color:#777;}

.notice-info{margin-top:15px; padding:20px 25px; background-color:var(--sky-bg2); border-radius:7px;}
.notice-info .inner-tit{display:block; font-size:1.125rem; font-weight:500; color:var(--primary-color)}
.notice-info .inner-txt{padding-left:22px; display:block;color:#666; font-size:.938rem}
.notice-info .inner-txt .point{font-weight:600; color:#333;}

@media only screen and (max-width:1024px){
	.rent .form-box{padding:23px 35px;}
}
@media only screen and (max-width:650px){
	.rent .form-box{padding:15px 20px;}
	.rent .form-tit{padding:10px 0 7px; font-size:1.125rem}
	.rent .half{display:block;}
	.rent .form-box:not(:first-of-type){margin-top:20px; }
	.rent .form-box .close{top:13px; right:20px;}
	.rent .form-box .status{top:17px; right:25px;}
	.rent.rent-view ul li{padding:2px 0;}

	.notice-info{padding:15px 20px;}
	.notice-info .inner-tit{font-size:1.063rem}
	.notice-info .inner-txt{padding-left:18px; font-size:.875rem; line-height:1.4}
}
