/********** 색상 **********/
:root{
	--main-color-blue:#008ccd;
	--main-color-navy:#001737;
	--main-color:#001737;
	--main-color-white:#fff;
	--main-color-black:#111;
	--main-color-gray:#ccc;
	--main-color-lightgray:#555;
	--main-color-lightergray:#ededed;
	--main-color-pink:#c40167;
	--total-color-pink:#ff0090;
	--main-color-lightpink:#ffe9f5;
	--check-bg-color:#b3b9c6;
	--table-head-color:#314764;
}
/* 포인트컬러 */
.fontWt{color:var(--main-color-white);}
.fontPink{color:var(--main-color-pink);}
.fontBl{color:var(--main-color-blue);}
.fontGray{color:var(--main-color-lightgray);}
.fc01{color:var(--main-color-blue);} /* 파랑 */
.fc02{color:var(--main-color-pink);} /* 분홍 */

/* common */
body{font-size:14px; color:var(--main-color-black); background: var(--main-color-lightergray);}
#wrap{width: 100%; margin:0 auto;}
body #wrap{max-width:1600px;}
body.noHeader{display:flex; justify-content: center; flex-direction: column; align-items: center; width:100%; height:100vh; background: var(--main-color-navy);}
body.noHeader #wrap{display:flex; justify-content: center; flex-direction: column; align-items: center; }
.conTit2{position:relative; padding-top:15px; font-size:1.429em;/*40px*/ font-weight:bold; margin-bottom:20px; text-align: center;}
.conTit2:before{position:absolute; content:''; top:0; left:50%; transform: translateX(-50%); width:14px; height:2px; background:var(--main-color-black);}
.conTit3{font-size:1.429em;/*20px*/ font-weight:normal; margin-bottom:20px; text-align: center;}
.hide{display:none;}
.pcNone{display:block;}
.mobNone{display:none;}
form{display:inherit;}

/* input */
input, select{padding:10px; border:1px solid var(--main-color-gray); border-radius: 5px; font-size:1em; font-family:'Noto Sans KR', sans-serif;}
select {padding:10px 30px 10px 10px ;-webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/ appearance:none;  background:var(--main-color-white) url(../img/arrow_close.gif) no-repeat center right 10px; background-size:14px;}
select::-ms-expand{ display:none;/*for IE10,11*/}
.ipW100{width:100%;}
.check_wrap{margin-top:10px; display:flex; align-items: center; }
.check_wrap label{margin-left:4px;}

/* 기본 버튼 */
.basicbtn{margin-top:10px; padding:17px; display:flex; justify-content: center; align-items: center; width:100%; border-radius:5px; color:var(--main-color-white); background:var(--main-color-pink);}
.btnBl{background:var(--main-color-blue);} /*파란버튼 .btnBl*/ 
.btnBk{background:var(--main-color-white); color:var(--main-color-lightgray); border:1px solid var(--main-color-lightgray);} /*흰+검버튼 .btnBk*/ 
.btnGr{background:var(--main-color-lightgray); color:var(--main-color-white); } /*회색버튼 .btnGr*/
.btn_sm{width:auto!important; padding:10px!important; margin:0!important;} /* 작은 사이즈 버튼 */

/* 기본 테이블 - 모바일용 */
table[class*='tbl']{width:100%; border-bottom:1px solid var(--main-color-gray);  background:var(--main-color-white);}
table[class*='tbl'] tr th, 
table[class*='tbl'] tr td{padding:15px 10px;}
table[class*='tbl'] tr td{padding:15px 10px; border-bottom:1px solid var(--main-color-gray); }
.tbl01{border-top:2px solid var(--main-color-pink);}
.tbl01 tr th{text-align: left;}
.totalBg{background:var(--main-color-lightpink);}

/* 게시판 페이지 */
.pagination{display:flex; justify-content: center; margin-top:30px;}
.pagination a[class*='page']{display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background:var(--main-color-white); border:1px solid var(--main-color-lightgray);}
.pagination .pageFirst{margin-right:-1px;}
.pagination .pageFirst i{width: 14px;	 height: 14px; background:url(../img/arrow_first.gif) no-repeat center / cover!important;}
.pagination .pageLast{margin-left:-1px;}
.pagination .pageLast i{width: 14px;	 height: 14px; background:url(../img/arrow_last.gif) no-repeat center / cover!important;}
.pagination a i{color:var(--main-color-lightgray);}
.pagination .pages{display:flex; margin:0 5px;}
.pagination .pages a{margin:0 0 0 -1px; color:var(--main-color-lightgray);}
.pagination .pages a.on{background:var(--main-color-lightgray); color:var(--main-color-white); font-weight:500;}

/* 헤더수정전 
#header{padding:25px 0 0; background: var(--main-color-navy);}
#header .layout{display:flex; flex-direction: column; align-items: center; width:100%;}
#header .layout h1{margin-bottom:25px;}
#header .layout #nav{background:rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.2);width: 100%; padding:10px 0;}
#header .layout #nav ul{display:flex; }
#header .layout #nav ul li{position:relative; width:33.3333%; display:flex; justify-content: center; align-items: center;}
#header .layout #nav ul li:after{position:absolute; content:''; top:50%; right:0; transform: translateY(-50%); width:1px; height:10px; background:var(--main-color-white);}
#header .layout #nav ul li:last-child:after{display:none;}
#header .layout #nav ul li a{display:inline-block; padding:5px 0; color:var(--main-color-white); font-size:1em;}
#header .layout #nav ul li a .icon-exit{display:inline-block; margin:0 0 0 5px;}
#header .layout #nav ul li.on a{color:var(--main-color-blue); font-weight:bold; border-bottom:2px solid var(--main-color-blue);}
.conTit{padding-left:50px; position:relative; display:inline-block; font-weight:bold; letter-spacing: -0.1em; font-size:1.786em;}
.conTit:before{content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width: 44px; height: 33px; background:url(../img/title.png) no-repeat left center; background-size:contain;}
*/

/* header */
#header{padding:0; background: var(--main-color);}
#header .layout{width:100%; max-width:calc(100% - 20px); margin:0 auto; display:flex; align-items: center; flex-direction: column; justify-content: space-between;}
.h_left{margin:20px 0; display:flex; justify-content: space-between; align-items: center;}
.conTit{position:relative; padding-left:40px; font-size:1.5em;}
.conTit:before{position:absolute; content: ''; top:50%; left:0; transform:translateY(-50%); width: 40px; height: 27px; background:url(../img/title.png) no-repeat left center; background-size:contain;}
#header .layout #nav,
#header .layout #nav ul{display:flex; width:100%;}
#header .layout #nav ul{justify-content: center;}
#header .layout #nav ul li{width:50%; margin-right:5px;}
#header .layout #nav ul li:last-child{margin-right:0;}
#header .layout #nav ul li a{display:flex; border-radius:10px 10px 0 0; border:1px solid rgba(255,255,255,0.3); transition:all 0.3s;  padding:15px 5px; justify-content: center; font-size:1em; color:var(--main-color-white);}
#header .layout #nav ul li.on a,
#header .layout #nav ul li:hover a{background:var(--main-color-lightergray); color:var(--main-color); font-weight:bold; border:1px solid var(--main-color-lightergray);}

/* 로그인,로그아웃 추가 */
.h_left .logBtn{position:relative; font-size:0.9em; padding:8px 10px 8px 30px; color:var(--main-color-white); border:1px solid rgba(255,255,255,0.3); border-radius: 5px;}
.h_left .logBtn:before{content:''; position:absolute; top:50%; left:10px; transform: translateY(-50%); background:url(../img/login.png) no-repeat; width:15px; height:15px;}
.h_left .logoutBox span{color:var(--main-color-white); margin-right:5px;}
.h_left .logoutBox span strong{text-decoration: underline; font-weight:normal; margin-right:3px;}
.h_left .logoutBox .logBtn:before{background:url(../img/logout.png) no-repeat; width:18px;}

/* 홈버튼 추가 */
.h_left .homeBtn{margin-left:8px; font-size:0.9em; padding:8px 10px; color:var(--main-color-white); border:1px solid rgba(255,255,255,0.3); border-radius: 5px;}

/* 푸터 */
#footer{margin-top:25px; padding-top:25px; border-top:1px solid var(--main-color-gray);}
/*#footer p{color: var(--main-color-lightgray); text-align: center; font-size:0.929em;}*/
#footer p{color:white; text-align: center; font-size:0.929em; line-height:120%;} /* 차량조회, 본인인증 */
.footer #footer p {color: var(--main-color-lightgray); text-align: center; font-size:0.929em;} /* 미납내역, 결제내역 */


/* 박스 */
.content{margin-top:30px; padding:75px 0; position:relative; display:flex; justify-content: flex-start; flex-direction: column; align-items: center;  width:calc(100% - 40px); max-width:980px; background:var(--main-color-lightergray);  box-shadow: 0 10px 24px rgba(0,0,0,0.08);}
.content .conBx{width:100%; padding:0 15px;}
.content .conBx .searchBx{margin-bottom:20px;}
.tbl01 .noResult{padding:100px 10px; color:var(--main-color-lightgray);}
.container{padding:40px 10px;}


/********** 체크박스 **********/
input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--check-bg-color); border-radius: 5px; border-style: none; cursor: pointer; height: 20px; width: 20px;
  outline: 0; position: relative; padding:0;}
input[type="checkbox"]::before,
input[type="checkbox"]::after {border:0; content: "\e903"; font-family: 'icomoon'; display: none; font-size:1.2em; position: absolute; top: 0; left: 0; height:100%; width: 100%; color:var(--main-color-white);}
input[type="checkbox"]:before,
input[type="checkbox"]:checked::after{display: block;}
input[type="checkbox"]:checked {background: var(--main-color-pink);}
.termCheck{display:flex; align-items: center;}

/********** 본인인증 **********/
.cerBx{display:flex; flex-direction:column; align-items: center; justify-content:center;}
.cerBx .basicbtn{position:relative;padding:115px 17px 60px; width:100%; text-align: center; margin:5px;}
.cerBx .basicbtn:before{position:absolute; content:''; top:60px; left:50%; transform: translateX(-50%);}
.cerBx .basicbtn:first-child:before{width:42px; height:43px; background:url(../img/certi_icon1.png) no-repeat; background-size:contain;}
.cerBx .basicbtn:last-child:before{width:42px; height:45px; background:url(../img/certi_icon2.png) no-repeat; background-size:contain;}

/********** 미납내역 **********/
.nonpayTit{margin:30px 0;}
.nonpayTit p{text-align: center;}
.nonpayTit .totalTxt{display:flex; flex-direction: column; margin-bottom:20px; font-size:1.25em;}
.nonpayTit .totalTxt span:first-child{margin-bottom:10px;}
.nonpayTit .totalTxt strong{position:relative; display:inline-block; font-size:1.6em; letter-spacing: -0.05em; z-index: 10; margin:0 5px;}
.nonpayTit .totalTxt strong:after{position:absolute; content:''; bottom:-6px; left:50%; transform: translateX(-50%); width:calc(100% + 5px); height:15px; z-index: -1;opacity:0.1;}
.nonpayTit .totalTxt strong.fc01:after{background: var(--main-color-blue);}
.nonpayTit .totalTxt strong.fc02:after{background: var(--main-color-pink);}
.nonpayTit p.fc02{line-height:1.571em;}
.nonpayInfo{margin-left:10px;}
.nonpayInfo li{display:flex; margin-bottom:10px;}
.nonpayInfo li:last-child{margin-bottom:0;}
.nonpayInfo li strong{position:relative; padding-left:10px;  text-align: left; width: 120px;}
.nonpayInfo li strong:after{position:absolute; content:''; top:6px; left:0;  width:3px; height:3px; background: var(--main-color-black)}
.nonpayInfo li span{ text-align: left;}
.totalBg td{display:flex; justify-content: space-between; align-items: center;}
.totalBg td p{font-size:1.071em;}
.totalBg td p strong.fc02{font-size:1.214em; color:var(--total-color-pink);}

/* 미납내역화면 팝업  */
.popBg{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100;}
.popBg .payPop{max-height:calc(100% - 40px); overflow-y: auto; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); padding:30px 15px; width:calc(100% - 20px); max-width:680px; background: var(--main-color-lightergray);} 
.popBg .payPop .conBx{margin-bottom:20px;}
.popBg .payPop .conBx .inputBx label{margin-bottom:10px; display:block; font-size:17px; font-weight:500;}
.popBg .payPop .conBxs,
.popBg .payPop .btnBx{display:flex; justify-content: space-between;}
.popBg .payPop .conBxs .inputBx,
.popBg .payPop .btnBx a{width:calc(50% - 10px);}

/* 결제내역화면  */
.cont_pay2 .searchBx{padding:20px 15px; margin-bottom:30px; background:var(--main-color-white);}
.cont_pay2 .searchBx .searchTop{display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom:10px; border-bottom:1px solid var(--main-color-gray); margin-bottom:10px;} 
.cont_pay2 .searchBx .searchTop label{display:flex; align-items: center;}
.cont_pay2 .searchBx .searchTop label input[type=radio]{margin-right:5px; width:15px; height:15px; font-size:1em; accent-color: var(--main-color-black);}
.cont_pay2 .searchBx .searchTop label,
.cont_pay2 .searchBx .searchTop .periodBx input{width:calc(50% - 10px);}
.cont_pay2 .searchBx .searchTop .periodBx{display: flex; justify-content: space-between; align-items: center;}
.cont_pay2 .searchBx .searchTop .periodBx{margin-top:10px; width:100%;}
.cont_pay2 .nonpayInfo{margin-left:0;}

/* 결제완료 화면 */
.cont_complete{width:calc(100% - 20px); padding:100px 0; display:flex; flex-direction: column; align-items: center; margin:0 auto;}
.cont_complete .top{display:flex; flex-direction: column; align-items: center; margin-bottom:20px;}
.cont_complete .top .ico{display:flex; align-items: center; justify-content: center; width:120px; height:120px; border-radius: 50%; margin-bottom:20px;overflow: hidden; background:rgba(0,0,0,0.1);}
.cont_complete .top .ico img{width:60%; }
.cont_complete .top span{font-weight:600; font-size:1.6em;}

/* 에러페이지 - 공통으로 쓰는 거*/
.errorWrap{width:100%;height:100vh; display:flex; justify-content: center; align-items: center;}
.errorBx{max-width:calc(100% - 40px); width:100%; padding:40px; background:#fff; box-shadow: 10px 10px 30px rgba(0,0,0,0.1);}
.errorBx img{width:30%; margin-bottom:20px;}
.errorBx .errorTxt,
.errorBx .errorTxt .top,
.errorBx .errorTxt .mid{margin-bottom:30px;}
.errorBx .errorTxt .top .errorNumb{font-size:6em; font-weight:bold;}
.errorBx .errorTxt .top .errorTit{margin-top:10px; font-size:1.8em;}
.errorBx .errorTxt .mid{color:var(--main-color-lightgray);font-size:1em; line-height:1.5em;}

/* 결제 실패 화면 */
.failBx{background:rgba(255,255,255,0.6); margin-top:10px; padding:20px; border-radius:10px; width:96%;}
.failBx li{position:relative; text-align:left; margin-bottom:15px;}
.failBx li:last-child{margin-bottom:0;}

@media screen and (min-width: 361px){

	/********** 미납내역 **********/
	.nonpayTit{margin-bottom:47px;}
	.nonpayTit .totalTxt{margin-bottom:30px; font-size:1.571em;}
	.nonpayTit .totalTxt strong{font-size:1.714em;}
	.nonpayInfo{margin-left:20px;}
	.nonpayInfo li{margin-bottom:12px;}

	.conTit{ margin-right:20px;}

	.cerBx{flex-direction:row;}
	.cerBx .basicbtn{width:calc(50% - 5px);}
}


@media screen and (min-width: 769px){
	/* common */
	#wrap{max-width:750px; margin:0 auto;}
	body{font-size:15px;}	


	/******************20230329 추가***********************/
	/* 에러페이지 - 공통으로 쓰는 거*/
	.errorBx img{width:20%;}
	.errorBx .errorTxt .bot {display:flex; justify-content: flex-start;}
	.errorBx .errorTxt .bot a{width:30%; margin-right:10px;}
	/******************20230329 추가***********************/

	/* 결제 실패 화면 */
	.failBx{padding:30px; min-width:350px; width:auto;}





}

@media screen and (min-width: 1024px){

	/* input */
	input, select{padding:15px 10px;}
	select {padding:15px 30px 15px 10px ;}

	/* common */
	.pcNone{display:none;}
	.mobNone{display:block;}
	.container{width: calc(100% - 20px); margin:0 auto; padding:100px 0 75px; text-align: center;}
	input, select{padding:10px;}

	/* 기본 버튼 */
	.container .basicbtn{margin-top:50px; padding:20px 110px; width:auto; display:inline-block; }
	.btn_sm{display:inline-block;}

	/* 헤더 수정전
	#header .layout{width:calc(100% - 20px); max-width:1600px; margin:0 auto;}
	#header .layout h1{margin-bottom:0;}
	#header .conTit{font-size:2.250em;}
	#header .layout{flex-direction: row; justify-content: space-between;}
	#header .layout #nav{background:none; border-top:0; width: auto;}
	#header .layout #nav ul li{width:auto; padding:0 80px; }
	#header .layout #nav ul li:last-child{padding:0 0 0 80px;}
	#header .layout #nav ul li a{font-size:1.250em;} */

	/* 헤더 */
	#header .layout{width:1600px; max-width: calc(100% - 20px); align-items: flex-end;  flex-direction: row;}
	.h_left{width:100%; justify-content: flex-start;}
	.h_left .logoutBox{margin-left:20px;}
	#header .layout #nav{justify-content: flex-end;}
	#header .layout #nav ul{width:auto;}
	#header .layout #nav ul li{width:auto;}
	#header .layout #nav ul li a{padding:18px 60px; font-size:1em; }
	body.noHeader .h_left{margin:0; max-width: 980px; justify-content: space-between;} 

	.conTit{padding-left:80px; font-size:1.786em;}
	.conTit:before{width: 74px; height: 50px; background-size:contain;}


	/* pc용 테이블 */
	.tbl02 .termCheck input[type=checkbox] + label{justify-content: center;}
	.tbl02 thead tr th{background:var(--table-head-color); color:var(--main-color-white);}
	.tbl02 tr th{font-weight:500;}
	.tbl02 tr th, 
	.tbl02 tr td{padding:20px 10px!important;}
	.tbl02 tr td{font-size:1em}
	.tbl02 + .totalBg{display:flex; padding:20px 10px; justify-content: center; align-items: center; border-bottom: 1px solid var(--main-color-gray);}
	.tbl02 + .totalBg p{font-size:1em;}
	.tbl02 + .totalBg p strong.fc02{margin-left:60px; font-size:1.250em; color:var(--total-color-pink);}
	.termCheck{justify-content: center;}


	/********** 미납내역 **********/
	.nonpayTit .totalTxt{flex-direction: row; justify-content: center;}
	.nonpayTit .totalTxt span:first-child{margin-right:13px;}

	/********** 결제내역화면 **********/
	.cont_pay2 .searchBx{padding:20px; display:flex; justify-content: center; }
	.cont_pay2 .searchBx .searchTop{flex-wrap: nowrap; padding-bottom:0; margin-bottom:0; border-bottom:0;}
	.cont_pay2 .searchBx .searchTop .periodBx{margin-top:0; width:auto;}
	.cont_pay2 .searchBx .searchTop label{width:120px;}
	.cont_pay2 .searchTop + .basicbtn{margin:0 0 0 10px; padding:10px 60px; display:flex; }	


	/******************20230329 추가***********************/
	/* 결제완료 화면 */
	.cont_complete{padding:50px 0 0;}
	.cont_complete .top .ico{width:160px; height:160px;}
	.cont_complete .top span{font-size:2em;}

	/* 에러페이지 - 공통으로 쓰는 거*/
	.errorWrap{}
	.errorBx{padding:100px 60px; max-width:1000px; display:flex; justify-content: center; align-items: center;}
	.errorBx img{width:auto; margin-right:70px;}
	.errorBx .errorTxt .bot a{width:50%;}

	/******************20230329 추가***********************/


}