@charset "UTF-8";

/* **************************************** *
 * 도로이용정보
 * **************************************** */
/* 실시간 교통정보 */
.traffic-live{position:relative; padding:12rem 8rem 4rem; background:#00664f url("../img/contents/traffic-live-bg.png") no-repeat 50% 50%; border-radius:2.2rem; box-sizing:border-box}
.traffic-live .traffic-flow{display:flex; align-items:center; gap:1rem}
.traffic-live .traffic-flow .flow-turn{flex:none; display:flex; position:relative; justify-content:center}
.traffic-live .traffic-flow .flow-turn .turn-circle{position:relative; width:3.6rem; height:3.6rem; background-color:#00664f; border:0.8rem solid #003b2e; border-radius:50%; box-sizing:border-box}
.traffic-live .traffic-flow .flow-turn .turn-label{display:flex; align-items:center; position:absolute; top:-8.8rem; min-height:3.6rem; padding:0 1.4rem; background-color:var(--ply-color-light-alpha-white10); border:1px solid var(--ply-color-light-alpha-white25); border-radius:20rem; box-sizing:border-box}

.traffic-live .traffic-flow .flow-turn .turn-label:before{content:''; position:absolute; left:50%; bottom:-8.8rem; width:1px; height:8.8rem; background-color:var(--ply-color-light-alpha-white50)}
.traffic-live .traffic-flow .flow-turn .turn-label span{line-height:1.4em; font-size:1.5rem; font-weight:normal; color:var(--ply-color-light-alpha-white100); letter-spacing:-0.02rem; white-space:nowrap}
.traffic-live .traffic-flow .flow-turn .turn-direction{display:flex; align-items:center; gap:0.5rem; position:absolute; bottom:-4.6rem; min-height:3.4rem; box-sizing:border-box}
.traffic-live .traffic-flow .flow-turn .turn-direction span{line-height:1.4em; font-size:1.5rem; font-weight:normal; color:var(--ply-color-light-alpha-white100); letter-spacing:-0.02rem; white-space:nowrap}
.traffic-live .traffic-flow .flow-turn .turn-direction i{position:relative; top:-0.1rem; color:var(--ply-color-light-alpha-white100); font-size:2.2rem}
.traffic-live .traffic-flow .flow-turn .turn-direction.direction-l{left:0}
.traffic-live .traffic-flow .flow-turn .turn-direction.direction-r{right:0}

.traffic-live .traffic-flow .flow-road.road-section01{flex:7.5}
.traffic-live .traffic-flow .flow-road.road-section02{flex:2.5}
.traffic-live .traffic-flow .flow-road .road-container{display:flex; flex-direction:column; justify-content:space-between; align-items:center; position:relative; height:2.8rem}

.traffic-live .traffic-flow .flow-road .road-container .road-bound{display:flex; align-items:center; position:absolute; min-height:3rem; padding:0 0.6rem; background-color:var(--ply-color-light-alpha-white10); border-radius:20rem; box-sizing:border-box}
.traffic-live .traffic-flow .flow-road .road-container .road-bound i{margin:0 -1.4rem; font-size:2.4rem}
.traffic-live .traffic-flow .flow-road .road-container .road-bound:before,
.traffic-live .traffic-flow .flow-road .road-container .road-bound:after{margin:0; padding:0; font-family:remixicon; font-size:2.4rem}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l{top:-8.6rem; margin-left:0}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l i{color:rgba(255,255,255,.6);}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l:before,
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l:after{content:'\ea64'}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l:before{color:rgba(255,255,255,1)}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l:after{color:rgba(255,255,255,.3)}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l{animation:bound-l 2s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards}
@keyframes bound-l{0%{margin-left:0; opacity:1} 50%{margin-left:-4rem; opacity:1} 100%{margin-left:0; opacity:1}}

.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r{bottom:-8.6rem;}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r i{color:rgba(255,255,255,.6)}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r:before,
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r:after{content:'\ea6e'}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r:before{color:rgba(255,255,255,.3)}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r:after{color:rgba(255,255,255,1)}
.traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r{animation:bound-r 2s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards}
@keyframes bound-r{0%{margin-right:0; opacity:1} 50%{margin-right:-4rem; opacity:1} 100%{margin-right:0; opacity:1}}

.traffic-live .traffic-flow .flow-road .road-container .road-signal{width:100%; height:0.8rem; background-color:#202020; border-radius:20rem; box-sizing:border-box}
.traffic-live .traffic-flow .flow-road .road-container .road-signal.color-good{background-color:#39ba75}
.traffic-live .traffic-flow .flow-road .road-container .road-signal.color-slow{background-color:#f57d20}
.traffic-live .traffic-flow .flow-road .road-container .road-signal.color-bad{background-color:#e13838}
.traffic-live .traffic-flow .flow-road .road-container .road-signal.color-none{background-color:#909090}

.traffic-live .road-cctv{display:inline-flex; align-items:center; justify-content:center; position:absolute; width:3.6rem; height:3.6rem; background-color:#003b2e; background-size:1.5rem 1.4rem; background-repeat:no-repeat; background-position:50% 50%; border-radius:50%}
.traffic-live .road-cctv:hover{background-color:#002920; border:2px solid var(--ply-color-light-alpha-white100)}
.traffic-live .road-cctv.cctv01{top:-4.4rem; background-image:url("../img/contents/traffic-cctv-r.png")}
.traffic-live .road-cctv.cctv02{top:-4.4rem; background-image:url("../img/contents/traffic-cctv-l.png")}
.traffic-live .road-cctv.cctv03{top:-4.4rem; background-image:url("../img/contents/traffic-cctv-l.png")}
.traffic-live .road-cctv.cctv04{bottom:-4.4rem; margin-left:-12rem; background-image:url("../img/contents/traffic-cctv-r.png")}

.traffic-live .traffic-guide{display:flex; justify-content:space-between; margin-top:9.4rem}
.traffic-live .traffic-guide .guide-info{display:inline-flex; align-items:center; position:relative; min-height:3.6rem; padding:0 2rem; line-height:1.2em; font-size:1.4rem; font-weight:normal; color:var(--ply-color-light-gray-0); letter-spacing:-0.02rem; background-color:var(--ply-color-light-alpha-white10); border-radius:20rem; word-break:keep-all; box-sizing:border-box}
.traffic-live .traffic-guide .guide-info:before{content:'\ee59'; margin-right:0.5rem; color:var(--ply-color-light-gray-0); font-family:remixicon; font-size:1.6rem}
.traffic-live .traffic-guide .guide-legend{display:flex; border-radius:0.6rem; overflow:hidden}
.traffic-live .traffic-guide .guide-legend .legend-item{display:flex; align-items:center; justify-content:center; min-width:16rem; height:3.6rem; padding:0 2rem; box-sizing:border-box}
.traffic-live .traffic-guide .guide-legend .legend-item span{display:inline-flex; align-items:center; gap:0.2rem; line-height:1.2em; font-size:1.4rem; font-weight:normal; color:var(--ply-color-light-gray-0); text-align:center; letter-spacing:-0.02rem; white-space:nowrap}
.traffic-live .traffic-guide .guide-legend .legend-item span i{position:relative; font-size:2rem; font-weight:normal}
.traffic-live .traffic-guide .guide-legend .legend-item.color-good{background-color:#39ba75}
.traffic-live .traffic-guide .guide-legend .legend-item.color-slow{background-color:#f57d20}
.traffic-live .traffic-guide .guide-legend .legend-item.color-bad{background-color:#e13838}
.traffic-live .traffic-guide .guide-legend .legend-item.color-none{min-width:auto; background-color:#909090}

/* CCTV */
.cctv-container iframe{display:block; width:100%; aspect-ratio:16 / 9; margin:0; padding:0}
.cctv-container .badge-cmm{position:absolute; right:1rem; bottom:1rem}


/* **************************************** *
 * 통행료 조회 납부
 * **************************************** */
/* 미납통행료 조회/납부 */
.paytolls-search{display:flex; justify-content:center; margin:6rem 0; padding:4rem; background-color:#71b2a2; border-radius:2.2rem; overflow:hidden; box-sizing:border-box}
.paytolls-search .search-container{display:flex; flex-direction:column; position:relative; gap:2rem; width:50rem; box-sizing:border-box}
.paytolls-search .search-container:before,
.paytolls-search .search-container:after{content:''; position:absolute; border-radius:1000rem; filter:blur(9.4rem)}
.paytolls-search .search-container:before{left:-20rem; top:-40rem; width:62rem; height:62rem; background-color:#00664f; opacity:.9}
.paytolls-search .search-container:after{right:-20rem; bottom:-20rem; width:42rem; height:42rem; background-color:#b76541; opacity:.9}

.paytolls-search .search-top{display:flex; justify-content:space-between; position:relative; z-index:1}
.paytolls-search .search-top .top-tit .tit{line-height:1.4em; color:var(--ply-color-light-gray-0); font-size:1.8rem; font-weight:300; letter-spacing:-0.05rem}
.paytolls-search .search-top .top-tip{display:inline-flex; align-items:center; gap:0.4rem}
.paytolls-search .search-top .top-tip span{line-height:1.4em; font-size:1.6rem; font-weight:normal; color:var(--ply-color-light-alpha-white75); letter-spacing:-0.02rem}
.paytolls-search .search-top .top-tip i{position:relative; top:-0.1rem; color:var(--ply-color-light-gray-0); font-size:2rem; font-weight:normal}

.paytolls-search .search-form{position:relative; z-index:1}
.paytolls-search .search-form fieldset{display:flex; flex-direction:column; align-items:center; gap:2.4rem}
.paytolls-search .search-form .form-input{position:relative; width:100%; height:7rem; background-color:var(--ply-color-light-alpha-white25); border:1px solid var(--ply-color-light-alpha-white25); border-radius:1.2rem; box-sizing:border-box}
.paytolls-search .search-form .form-input input{width:100%; height:7rem; margin:0; padding:0 2rem; background:none; color:var(--ply-color-light-gray-0); font-family:'FlightSans','PretendardGOV'; font-size:2.9rem; font-weight:300; text-align:center; letter-spacing:-0.02rem; border:0; border-radius:0; cursor:pointer; box-sizing:border-box}
.paytolls-search .search-form .form-input input::-webkit-input-placeholder{color:var(--ply-color-light-gray-0); font-size:2.9rem; font-weight:300; letter-spacing:-0.05rem}
.paytolls-search .search-form .form-confirm .confirm-search{display:flex; align-items:center; justify-content:center; gap:0.6rem; height:5.4rem; margin:0; padding:0 4rem; color:#fff; background:var(--ply-color-light-gray-90); border:0; border-radius:30rem; cursor:pointer; transition:all .35s ease}
.paytolls-search .search-form .form-confirm .confirm-search span{line-height:1.2em; color:var(--ply-color-light-gray-0); font-size:1.8rem; font-weight:300; letter-spacing:-0.02rem}
.paytolls-search .search-form .form-confirm .confirm-search i{color:var(--ply-color-light-gray-0); font-size:2rem}

.paytolls-checkout{display:flex; align-items:center; justify-content:flex-end; margin:2rem 0; padding:2.5rem 2rem; background-color:var(--ply-color-light-gray-5); border-radius:1.6rem}
.paytolls-checkout .checkout-item{display:inline-flex; align-items:center; position:relative; min-height:4.8rem; padding:0 3rem; border-left:1px solid var(--ply-color-light-gray-20); box-sizing:border-box}
.paytolls-checkout .checkout-item:first-child{border-left:none}
.paytolls-checkout .checkout-item .item-tit{margin-right:2rem}
.paytolls-checkout .checkout-item .item-num{min-width:12rem; text-align:right}
.paytolls-checkout .checkout-item .item-uni{margin-left:0.4rem}
.paytolls-checkout .checkout-item .item-fnl{width:12rem}
.paytolls-checkout .checkout-item .item-fnl input{padding:0; text-align:right; font-size:2.5rem; font-weight:300; letter-spacing:-0.05rem}
.paytolls-checkout .checkout-item .item-fnl input[readonly]{color:var(--ply-color-light-success-60); background-color:transparent; border:0.1rem solid transparent}

.paytolls-checkout .checkout-item .item-tit span,
.paytolls-checkout .checkout-item .item-num span,
.paytolls-checkout .checkout-item .item-uni span{line-height:1.4em; letter-spacing:-0.02rem}
.paytolls-checkout .checkout-item .item-tit span{font-size:1.6rem; font-weight:normal; color:var(--ply-color-light-gray-60)}
.paytolls-checkout .checkout-item .item-num span{font-size:2.5rem; font-weight:300; color:var(--ply-color-light-gray-95)}
.paytolls-checkout .checkout-item .item-uni span{font-size:1.6rem; font-weight:normal; color:var(--ply-color-light-gray-60)}

.paytolls-checkout .checkout-item .item-confirm{margin-left:2rem}


/* **************************************** *
 * 회사소개
 * **************************************** */
/* 조직도 */
.organization-map{position:relative; border:1px solid #ebebeb; border-radius:1.2rem}
.organization-map .map-area{position:relative; padding:5rem 0; box-sizing:border-box}
.organization-map .map-inner{position:relative; width:52rem; margin:0 auto}
.organization-map .map-inner:before{content:''; position:absolute; left:50%; top:0; width:1px; height:13.8rem; background-color:#dadada}

.organization-map .level1-box{display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; width:22rem; height:8rem; margin:0 auto 10rem; background-color:#00664f; border-radius:30rem; overflow:hidden; z-index:1; box-sizing:border-box}
.organization-map .level1-box strong{position:relative; color:#fff; font-family:FlightSans; font-size:1.9rem; font-weight:300; letter-spacing:-0.05rem; z-index:1}

.organization-map .level2-group{display:flex; justify-content:center; position:relative; margin-bottom:2rem; margin-left:-2rem}
.organization-map .level2-group:before{content:''; position:absolute; left:14.5rem; right:12.4rem; top:-4.1rem; height:1px; background-color:#dadada}
.organization-map .level2-align{width:50%}
.organization-map .level2-box{display:flex; flex-direction:column; gap:1rem; position:relative; margin-left:2rem}
.organization-map .level2-box:after{content:''; position:absolute; left:50%; top:-4rem; width:1px; height:4rem; background-color:#dadada}
.organization-map .level2-box .box-inner{display:flex; align-items:center; justify-content:center; height:6rem; background-color:var(--ply-color-light-gray-50); border-radius:20rem; box-sizing:border-box; box-sizing:border-box; z-index:1}
.organization-map .level2-box strong{color:#fff; font-family:FlightSans; font-size:1.7rem; font-weight:normal; letter-spacing:-0.05rem}

.organization-map.uline .level2-group:before{left:30.6rem; right:28.5rem}
.organization-map.uline .level2-align{width:33.333333%}

.organization-map .level3-group{display:flex; justify-content:center; position:relative; margin-left:-2rem}
.organization-map .level3-align{width:50%}
.organization-map .level3-box{display:flex; flex-direction:column; gap:1rem; position:relative; margin-left:2rem}
.organization-map .level3-box:after{content:''; position:absolute; left:50%; top:-2rem; width:1px; height:2rem; background-color:#dadada}
.organization-map .level3-box .box-inner{display:flex; align-items:center; justify-content:center; height:6rem; background-color:#f2f7f6; border-radius:0.6rem; box-sizing:border-box; z-index:1}
.organization-map .level3-box strong{color:#202020; font-size:1.6rem; font-weight:normal; letter-spacing:-0.08rem}


/* 찾아오시는길 */
.ply-location{display:flex; gap:4rem; position:relative}
.ply-location .location-l{flex:4.5; border-bottom:0.2rem solid #202020}

.ply-location .location-tit{display:flex; flex-direction:column}
.ply-location .location-tit:before{content:'\ebc2'; display:flex; align-items:center; justify-content:center; min-width:7rem; min-height:7rem; max-width:7rem; max-height:7rem; margin-bottom:2rem; background:#eef2f7; color:#101010; font-family:remixicon; font-size:3.4rem; border-radius:50%; box-sizing:border-box}
.ply-location .location-tit .tit{line-height:2.4rem; color:#202020; font-family:FlightSans; font-size:2.4rem; font-weight:300; letter-spacing:-0.05rem}

.ply-location .location-basic{display:flex; flex-direction:column; margin-top:2rem; border-top:0.2rem solid #101010}
.ply-location .location-basic .basic-info{display:flex; flex-direction:column; padding:3rem 0 3rem; border-bottom:1px solid #ebebeb}
.ply-location .location-basic .basic-info dt,
.ply-location .location-basic .basic-info dd{line-height:2.2rem; font-weight:normal; letter-spacing:-0.05rem}
.ply-location .location-basic .basic-info dt{margin-bottom:0.8rem; color:#808080; font-size:1.6rem}
.ply-location .location-basic .basic-info dd{margin-bottom:2rem; color:#202020; font-size:1.6rem}
.ply-location .location-basic .basic-info dd:last-child{margin-bottom:0}

.location-transport{display:flex; flex-direction:column}
.location-transport .transport-case{display:flex; padding:3rem 0; border-bottom:1px solid #ebebeb}
.location-transport .transport-case:last-child{border-bottom:none}
.location-transport .transport-case:before{content:''; flex:none; position:relative; top:-0.2rem; min-width:6rem; max-width:6rem; color:#202020; font-family:"remixicon"; font-size:3.7rem}
.location-transport .transport-case.transport-bus:before{content:'\eb11'}
.location-transport .transport-case.transport-car:before{content:'\eb39'}
.location-transport .transport-case .case-info{display:flex; flex-direction:column}
.location-transport .transport-case .case-info .case-group{display:flex; flex-direction:column}
.location-transport .transport-case .case-info .case-tit{margin-bottom:1.5rem; line-height:1.8rem; color:#202020; font-size:1.8rem; font-weight:300; letter-spacing:-0.05rem}
.location-transport .transport-case .case-info .case-detail li{position:relative; margin-bottom:0.4rem; padding-left:1.8rem; line-height:2.4rem; color:#505050; letter-spacing:-0.05rem; font-size:1.6rem; font-weight:normal}
.location-transport .transport-case .case-info .case-detail li:before{content:''; position:absolute; left:0; top:0.9rem; width:0.3rem; height:0.3rem; background:var(--ply-color-light-gray-40)}
.location-transport .transport-case .case-info .case-detail li:last-child{margin-bottom:0}
.location-transport .transport-case .case-info .case-detail li ul{margin-top:0.5rem}
.location-transport .transport-case .case-info .case-detail li li{padding-left:0}
.location-transport .transport-case .case-info .case-detail li li:before{display:none}
.location-transport .transport-case .case-info .case-link{display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap}
.location-transport .transport-case .case-info .case-link .btn{flex:1}

.location-transport .transport-case .case-info .case-group .case-tit{color:#505050; font-size:1.6rem}
.location-transport .transport-case .case-info .case-group + .case-group{margin-top:2rem} 


.ply-location .location-r{flex:5.5; background:var(--ply-color-light-secondary-5)}
.ply-location .location-r .map-view{height:100%}
.ply-location .location-r .map-view > div{width:100%; height:100%; box-sizing:border-box}
.ply-location .location-r .map-view > div .cont{display:none}
.ply-location .location-r .map-view .wrap_map{height:100% !important; background:#f8f8f8}