@import url(board.css);

/********** 색상 **********/
:root{
	--main-color:#00a1b9;    /*민트*/
	--main-bg-color:#edeef3;
	--main-color-white:#fff;
	--main-color-black:#111;
	--main-color-darkgray:#252525;
	--main-color-gray:#666;
	--main-color-lightgray:#e0e0e0;
	--main-color-lightergray:#d2d7e4;
	--check-bg-color:#b3b9c6;
	--table-head-color:#3a445e;
	--shadow-color:rgba(12,80,90,0.1);
	--charge-bg-color:#009e38;
	--util-ico-color:#d1d1d1;
	--slider-bd-color:#ccc;
	--detail-bg:#dce1ed;
	--carLst-bd-color:#d7d9e5;
}

/* 포인트컬러 */
.fontWt{color:var(--main-color-white);}
.fontGreen{color:var(--main-color);}
.fontGray{color:var(--main-color-lightgray);}
.fc01{color:var(--main-color);} /* 강조글자 : 민트 */
.fc02{color:var(--charge-bg-color);} /* 강조글자 : 초록 */


/* 버튼 */
.basicbtn{padding:8px 15px; display:flex; justify-content: center; align-items: center; border-radius:5px; white-space: nowrap;}
.basicbtn:hover{/*opacity:0.8;*/ text-decoration: none!important; cursor:pointer;}
.basicbtn.sm{padding:4px;}
.basicbtn.lg{padding:15px 20px;}

/* 버튼종류 */
.btn_type01{background:var(--main-color-darkgray); color:var(--main-color-white);}/* 기본 */ 
.btn_type02{background:var(--main-color); color:var(--main-color-white);}/* 민트배경 */
.btn_type03{border:1px solid var(--main-color); color:var(--main-color);}/* 민트글자 민트선 */
.btn_type04{border:1px solid var(--main-color-gray); color:var(--main-color-gray);}/* 회색 */ 

.paybtn{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);}
.btnBk{background:var(--main-color-white); color:var(--main-color-gray); border:1px solid var(--main-color-gray);} /*흰+검버튼 .btnBk*/ 

/* common */
body{font-size:14px; color:var(--main-color-black); background: var(--main-bg-color);}
#wrap{width: 100%; margin:30px auto; max-width:1200px; display:flex; justify-content: center; flex-direction: column; align-items: center; }
#wrap .layout{padding:50px 0; width: 100%;}
.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:none;}
.mobNone{display:block;}
.fs18{font-size:1.286em; }
.fs24{font-size:1.714em; font-weight:600;}
/* input */
input, select{padding:8px 10px; border:1px solid var(--main-color-lightgray); border-radius: 5px; font-size:1em; font-family:'Noto Sans KR', sans-serif;}
select {border:1px solid var(--main-color-lightgray); 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%!important;}
.termBx{overflow:hidden; border-radius:20px; border-radius: 10px; border:1px solid var(--main-color-gray); }
.termBx .termTop{display:flex; align-items: center; padding:15px; }
.termBx .termBot{background:var(--main-color-lightergray); padding:20px; }
.termBx input[type="checkbox"]{margin-right:5px; width:16px; height:16px; border-radius: 3px; background:var(--main-color-white); border:1px solid var(--main-color-gray);}
.termBx input[type="checkbox"]:before{display:none;}
.termBx input[type="checkbox"]:checked{background:var(--main-color-green); border:none;}
.termBx input[type="checkbox"]:checked:after{color:var(--main-color-white); font-size:1.1em;}
.termBx label{font-weight:500; font-size:1em;}
.termBx .termBot .termUl{display:flex; align-items: center;}
.termBx .termBot .termUl li{position:relative; padding-left:15px; margin-right:25px;}
.termBx .termBot .termUl li:before{position:absolute; left:0; content: "\e903"; font-family: 'icomoon'; color:var(--main-color-green); }
.termBx .termTextBx{height:130px; overflow-y:scroll;}


/* 검색 */
.searchBx{display:flex; align-items: center;}
.searchBx input{margin-right:5px; border:0;}
.searchBx .searchbtn{padding:9px 20px;}
.searchBx .searchbtn span{margin-right:5px;}

/* 1-로그인  */
body.loginWrap{width:100%; height:100vh; display:flex; justify-content: center;  align-items: center; background: var(--main-bg-color);}
body.loginWrap .loginBx{ border-radius: 20px; overflow:hidden; min-width:460px; box-shadow:10px 10px 40px var(--shadow-color);}
body.loginWrap .loginBx .loginTop{padding:55px 40px; background:var(--main-color) url(../img/login_tit_bg.png) no-repeat; background-position: 96% 100%;}
body.loginWrap .loginBx .loginTop span,
body.loginWrap .loginBx .loginTop p{color:var(--main-color-white);}
body.loginWrap .loginBx .loginTop span{font-size:1.125em;}
body.loginWrap .loginBx .loginTop p{font-size:2.286em; font-weight:bold; margin-top:15px;}
body.loginWrap .loginBx .loginBot{padding:40px 40px 30px; background:var(--main-color-white);}
body.loginWrap .loginBx .loginBot .inputBx{width:100%; margin-bottom:15px; display:flex; align-items: center; justify-content: space-between;}
body.loginWrap .loginBx .loginBot .inputBx label{width:110px; font-size:1.071em;}
body.loginWrap .loginBx .loginBot .inputBx input{width:calc(100% - 110px); height:50px; }
body.loginWrap .loginBx .loginBot .btnBx{/*margin-top:30px;*/ display:flex; flex-direction: column;}
/*body.loginWrap .loginBx .loginBot .btnBx a{width:calc(50% - 5px);}*/
body.loginWrap .loginBx .loginBot .btnBx a{width:100%; margin-bottom:10px;}

body.loginWrap .cont_store{min-width:500px;}
body.loginWrap .cont_store .loginTop p{font-size:2em;}
body.loginWrap .cont_store .input_right{display:flex; width:calc(100% - 110px);}
body.loginWrap .cont_store .input_right input{margin-right:6px;}
.parkBx{margin-top:20px;}
.parkBx .park_select{display:flex; flex-wrap:wrap; margin:10px 0 20px; padding: 15px; border: 1px solid var(--main-color-lightgray); border-radius: 5px;max-width:500px; max-height: 300px; overflow-y: auto;}
.parkBx .park_select li{width:50%; margin-bottom:15px; display:flex; align-items: center;}
.parkBx .park_select li:last-child{margin-bottom:0;}
.parkBx .park_select li .basicbtn{display:inline-block;}
.parkBx .park_select li label{margin-left:5px;}

/* 헤더 */
#header{display:flex; justify-content: space-between; width: 100%; margin-bottom:30px; background:var(--main-color-white); border-radius: 15px; box-shadow:10px 10px 30px var(--shadow-color);}
#header .h_left{padding:15px 20px;}
#header #nav{display:flex;}
#header #nav .utilBx{display:flex; align-items: center; position:relative; margin-right: 20px;}
#header #nav .utilBx .memBx{display:flex; align-items: center; position:relative; padding-left:25px; }
#header #nav .utilBx .memBx:before{position:absolute; top:50%; left:0; transform:translateY(-50%); color:var(--util-ico-color); content: '\e902'; font-family: 'icomoon';}
#header #nav .utilBx .memBx .utilBtn{display:inline-block; margin-left:20px; width: 9px; height: 6px; background:url(../img/utilBtn.gif) no-repeat; transition:all 0.3s;}
#header #nav .utilBx .memBx .utilBtn.on{transform: rotate(180deg);}
#header #nav .utilBx .util{display:none; position:absolute; z-index:100; padding:20px 20px 15px; top:calc(100% - 15px); background:var(--main-color-white); border:1px solid var(--util-ico-color); border-radius: 5px; right:0; top:60px;}
#header #nav .utilBx .util.on{display:block;}
#header #nav .utilBx .util li{padding-bottom:5px; margin-bottom:10px;}
#header #nav .utilBx .util li:last-child{margin-bottom:0;}
#header #nav .utilBx .util li a{white-space: nowrap;}
#header #nav .utilBx .util li a:hover{border-bottom:1px solid var(--main-color-gray);}
#header #nav .utilBx .util li.logout a{position:relative;}
#header #nav .utilBx .util li.logout a:after{position:absolute; content:''; right:-20px; top:3px; width: 18px; height: 16px; background:url(../img/logout.gif) no-repeat;}
#header #nav .chargeBtn{padding:25px; display:flex; align-items: center; border-radius:0 15px 15px 0; background:var(--charge-bg-color);}
#header #nav .chargeBtn span{padding-left:18px; color:var(--main-color-white); background:url(../img/charge.gif) no-repeat center left; }

/* 푸터 */
#footer{margin-top:25px; padding:25px 0; border-top:1px solid var(--main-color-gray); width:100%;}
#footer p{text-align: center; line-height:120%;}


/* 2-메인 레이아웃 */
.container{display:flex; justify-content: space-between; width: 100%;}
/* 차량 검색 */
.main_left{width:515px; }
.main_left .m_top{padding:65px 30px; border-radius: 10px; margin-bottom:40px; background:var(--main-color) url(../img/search_bg.gif) no-repeat bottom right; }
.main_left .m_top .fs24{color:var(--main-color-white); margin-bottom:20px;}
.main_right{width:calc(100% - 535px);}
.main_right select,
.main_right input{border:0;}

/* 할인권 목록 */
.main_left .m_bot{}
.main_left .m_bot .tit{display:flex; justify-content: space-between; align-items: center; margin-bottom:25px;}
.main_left .m_bot .tit .sliderBtn{}
.main_left .m_bot .tit .sliderBtn a{padding:10px; color:var(--main-color-gray); border:1px solid var(--slider-bd-color); border-radius:50%; }
.main_left .m_bot .tit .sliderBtn a.next{margin-left:5px; }
.main_left .m_bot .tit .sliderBtn a.next span{transform: rotate(90deg);}
.main_left .m_bot .saleLst{display:flex; justify-content: space-between; flex-wrap: wrap;}
.main_left .m_bot .saleLst li{margin:0 10px 15px 0; padding:25px 15px; width:calc(50% - 5px)!important; border-radius: 10px; background:var(--main-color-white);}
.main_left .m_bot .saleLst li:nth-of-type(2n){margin:0 0 15px 0;}
.main_left .m_bot .saleLst li p{margin-bottom: 15px; font-size:1.286em; font-weight:600;}
.main_left .m_bot .saleLst li table{width:100%;}
.main_left .m_bot .saleLst li table th{font-weight: normal;}
.main_left .m_bot .saleLst li table th,
.main_left .m_bot .saleLst li table td{padding:5px 0;}
.main_left .m_bot .saleLst li table td{text-align: right;}
.main_left .m_bot .saleLst li table td .basicbtn{display:inline-block; margin-left:10px;}
.main_left .m_bot .saleLst li table span{font-weight:600;}
/* 할인내역  */
.detailBx{background:var(--detail-bg); padding:20px; border-radius: 10px;}
.detailBx .detail_tit{position:relative; margin-bottom:20px; display:flex;    justify-content: center;}
.detailBx .detail_tit .prePage{position:absolute; left:0; top:50%; transform: translateY(-50%); color: var(--main-color-gray);}
.detailBx .detail_tit .prePage span{margin-right:5px;}
.detailBx .detail_cont{}
.detailBx .detail_cont .filterBx{display:flex; justify-content: space-between; flex-wrap: wrap; margin-bottom:20px;}
.detailBx .detail_cont .filterBx .filterItem{margin-bottom:10px; display:flex; align-items: center;}
.detailBx .detail_cont .filterBx .filterItem > span{margin-right:10px; font-size:1.071em;}
.detailBx .detail_cont .tableBx{height:500px; border-radius:10px; overflow:auto;}
.detailBx .detail_cont .tableBx .th_sticky thead th{position:sticky; top:0; font-size:1.071em;}
.detailBx .detail_cont .tableBx .tbl01 tr:last-child td{border-bottom:0;}
.detailBx .detail_cont .tableBx .th_sticky tbody .basicbtn{margin-left:5px;}
.detailBx .detail_cont .tableBot{position:relative; margin-top:20px; display:flex; justify-content: center; align-items: center;}
.detailBx .detail_cont .tableBot .total{position:absolute; top:50%; right:0; transform: translateY(-50%);}

/* 3-차량 리스트 */
.prePage:hover,
.carLst li:hover{cursor: pointer;}
.carLst{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr ; gap:10px;}
.carLst li{padding:15px 10px; text-align: center; border-radius: 10px; background:var(--main-color-white); border:1px solid var(--carLst-bd-color); transition: background 0.3s;}
.carLst li:hover{background:var(--main-color); color:var(--main-color-white);}
.carLst li:nth-of-type(4n){margin-right:0;}

/* 4-상세보기 */
.detail_view{margin-top:40px; display:flex; flex-direction: column; align-items: center;}
.detail_view .detail_car_pic{margin-bottom:30px; }
.detail_view .detail_car_pic img{width:100%; border-radius: 10px; }
.detail_view .detail_input{margin-bottom:10px; display:flex; flex-wrap: wrap; justify-content: flex-start;}
.detail_view .detail_input li{width:calc(50% - 10px); padding-right:0; margin:0 10px 20px 0;}
.detail_view .detail_input li:nth-of-type(2n){padding-right:0;}
.detail_view .detail_input li.wideBx{width:100%; padding-right:0;}
.detail_view .detail_input li input{width:100%;}
.detail_view .detail_input li textarea{width:100%; padding: 8px 10px; border:0; border-radius: 5px; font-family: 'Noto Sans KR', sans-serif; resize: none;}
.detail_view .detail_input li label{display:block; margin-bottom:5px; font-size:1.071em;}
.detail_view .detail_btn{display:flex; flex-wrap:wrap; justify-content: flex-start; width:100%;}
.detail_view .detail_btn a{    margin: 0 10px 10px 0; width: calc(25% - 10px);}
.detail_view .detail_btn a:last-child{margin-right:0;}

/* 팝업 */
.popBg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:100;}
.popBox{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); min-width:400px; max-width:calc(100% - 20px); background: var(--main-color-white); border-radius:15px;} 
.popBox .popTit{width: 100%; font-size:1.5em; padding:20px 0; text-align: center; border-bottom:1px solid var(--main-color-lightgray);}
.popBox .popTxt{padding:30px; max-height:calc(100vh - 200px); overflow-y:auto;}
.btnWrap{width:100%;}
.twoBtn{display:flex; justify-content: space-between;}
.twoBtn a{width:50%; padding:20px 10px;}
.twoBtn a:first-child{border-radius: 0 0 0 15px;}
.twoBtn a:last-child{border-radius: 0 0 15px 0;}
.popBox .mileBx{border:1px dashed var(--main-color-lightgray); border-radius: 5px; padding:15px;  margin-bottom:15px;}
.popBox .mileBx ul{width:100%; display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; margin-bottom:15px;}
.popBox .mileBx ul:last-child{margin-bottom:0;}
.popBox .mileBx li{font-size:1.125em;}
.popBox .mileBx li:last-child strong{font-size:1.3em;}
.popBox input,
.popBox select,
.popBox textarea{border: 1px solid var(--main-color-lightgray);}
.popBox .inputBx{margin-bottom:15px;}
.popBox .inputBx label{margin-bottom:5px; font-size: 1.025em; display:block;}
.popBox .inputBx select{background-size:15px;}


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


/* 결제 에러 */	
.cont_complete{display: flex; flex-direction: column; align-items: center;padding:100px; width:100%; border-radius: 10px; background: var(--main-color-white);}
.cont_complete .top{display:flex; flex-direction: column; align-items: center; margin-bottom:20px;}
.cont_complete .top .ico{width:160px; height:160px;display:flex; align-items: center; justify-content: center; 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-size:2em;}
.failBx{margin:20px auto; padding:20px; border-radius:10px; width:50%; border:1px solid var(--main-color-lightgray)}
.failBx li{position:relative; text-align:left; margin-bottom:15px;}
.failBx li:last-child{margin-bottom:0;}


/* chargeInfo - 마일리지 충전내역 */
.mob_tbl{display:none;}


/* 마일리지 */
.mileCont{background:var(--main-color-white); padding: 30px; border-radius: 10px;}
.mileCont ul{display:flex; flex-direction: column;}
.mileCont ul li{display: flex; justify-content: space-between; margin-bottom:20px;}
.mileCont ul li:last-child{margin-bottom:0;}
.mileCont ul li strong{font-size:1.125em; font-weight:normal;}
.mileCont ul li.myMile span{font-size:1.4em; font-weight:bold;}
.mileCont ul li.myMile span i{font-size:1rem; font-style:normal; font-weight:normal;}
.mileCont .chargeBtn{padding: 15px 20px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--charge-bg-color);}
.mileCont .chargeBtn span{padding-left: 18px; color: var(--main-color-white); background: url(../img/charge.gif) no-repeat center left;}


.dateBx2{margin-right:10px;}

@media screen and (max-width: 1440px){
	/* 4-상세보기 */
	.detail_view .detail_btn a{padding:15px; width:calc(33.333% - 10px);}
}


@media screen and (max-width: 1024px){
	#wrap{max-width:100%; width:calc(100% - 30px); margin:15px auto;}
	.fs24{font-size:1.5em;}

	/* 헤더 */
	#header{margin-bottom:15px;}	
	#header .h_left{padding:10px 15px;}
	/* 2-메인 레이아웃 */
	.main_left{width:45%;}
	.main_left .m_bot .saleLst li{width:100%!important; margin:0 0 10px 0; padding:15px 10px;}
	.main_left .m_bot .saleLst li:nth-of-type(2n){margin:0 0 10px 0;}
	.main_right{width:calc(55% - 20px);}
	.detailBx .detail_cont .filterBx .filterItem > span{font-size:1em;}

	/* 4-상세보기 */
	.detail_view .detail_input{justify-content: space-between; margin-bottom:0;}
	.detail_view .detail_btn{flex-wrap: wrap;}
	.detail_view .detail_btn a{padding:10px; margin:0 10px 10px 0;}

	/* 에러페이지 - 공통으로 쓰는 거*/
	.errorBx{max-width:calc(100% - 40px);}
	
	.detailBx .detail_cont .filterBx .filterItem:first-child{flex-direction:column;}
	.dateBx{width:100%;}
	.dateBx input{width:calc(50% - 10px);}
	.dateBx span{width:20px;}
	.dateBx2{width:100%; display:flex; flex-wrap:wrap; margin-bottom:10px; margin-right:0;}
	.dateBx2 span{display:flex; align-items: center; width:50%;}
	.dateBx2 span input{width:auto!important;}

}



@media screen and (max-width: 768px){
	.pcNone{display:block;}
	.mobNone{display:none;}
	.basicbtn{padding:12px 10px;}

	/* 1-로그인  */
	body.loginWrap .loginBx{border-radius: 15px; min-width:auto; width:90%;}
	body.loginWrap .loginBx .loginTop{padding:30px 20px; background-size: contain;}
	body.loginWrap .loginBx .loginTop span{font-size:1em;}
	body.loginWrap .loginBx .loginTop p{font-size:1.75em;}
	body.loginWrap .cont_store .loginTop p{font-size:1.4em;}
	body.loginWrap .loginBx .loginBot{padding:20px;}
	body.loginWrap .loginBx .loginBot .inputBx{margin-bottom:10px;}
	body.loginWrap .loginBx .loginBot .inputBx input{height:40px;}
	body.loginWrap .loginBx .loginBot .inputBx label{font-size:1em;}

	body.loginWrap .cont_store .input_right a{height:40px; padding:15px 10px;}


	/* 헤더 */
	#header .h_left{max-width:130px;}
	#header .h_left a,
	#header .h_left a img{width:100%;}
	#header #nav .chargeBtn{padding:10px;}
	#header #nav .utilBx .memBx .utilBtn{margin-left:10px;}
	#header #nav .utilBx .util{padding:15px 10px;}

	/* 2-메인 레이아웃 */
	.container{flex-direction: column;}
	.main_left,
	.main_right{width:100%;}
	.main_left .m_top{padding:45px 20px; margin-bottom:30px; background-size: contain;}
	.main_left .m_top .fs24{margin-bottom:10px;}
	.main_left .m_bot .tit{margin-bottom:15px;}
	.main_left .m_bot .saleLst li{width:calc(50% - 5px)!important; margin:0 10px 10px 0;}
	.main_left .m_bot .saleLst li:nth-of-type(2n){margin:0 0 10px 0;}
	.main_left .m_bot .saleLst li table th, .main_left .m_bot .saleLst li table td{padding:3px;}
	.detailBx{margin-top:30px;}

	/* 3-차량 리스트 */
	.carLst{ grid-template-columns: 1fr 1fr 1fr;}

	/* 4-상세보기 */
	.detail_view{margin-top:0;}
	.detail_view .detail_car_pic{width:100%; margin-bottom:20px;}


	/* 팝업 */
	.popBox{min-width:auto; width:100%; }
	.popBox .popTit{font-size:1.3em; padding:15px 0; }
	.popBox .popTxt{padding:20px 20px 5px;}
	.twoBtn a{padding:15px 10px;}

	/* 에러페이지 - 공통으로 쓰는 거*/
	.errorBx{padding:60px 20px;flex-direction: column;}
	.errorBx img{width:30%; margin-right:0; margin-bottom:20px;}
	.errorTxt{width:100%;}
	.errorTxt div,
	.errorTxt div p{text-align: center;}
	.errorBx .errorTxt .bot{justify-content: center;}
	.errorBx .errorTxt .top .errorNumb{font-size:5em;}
	.errorBx .errorTxt .top .errorTit{font-size:1.4em;}
	.errorBx .errorTxt, .errorBx .errorTxt .top, .errorBx .errorTxt .mid{margin-bottom:20px;}

	/* 결제 에러 */	
	.cont_complete{padding:60px 20px;}
	.cont_complete .top .ico{width:140px; height:140px;}
	.cont_complete .top span{font-size:1.7em;}
	.failBx{margin:10px auto 20px; width:80%;}

	/* chargeInfo - 마일리지 충전내역 */
	.mob_tbl{display:block; }
	.mob_tbl tbody{display:table; width:100%;}
	.chargeInfo{padding:5px;}
	.chargeInfo li{display:flex; margin-bottom:10px;}
	.chargeInfo li:last-child{margin-bottom:0;}
	.chargeInfo li strong{position:relative; padding-left:10px;  text-align: left; width: 35%; }
	.chargeInfo li strong:after{position:absolute; content:''; top:8px; left:0;  width:3px; height:3px; background: var(--main-color);}
	.chargeInfo li span{width:65%; text-align: left;}
	.chargeInfo li .basicbtn{width:auto;}
	.pc_tbl{display:none;}


	/* 마일리지 */
	.mileCont{padding: 30px 20px;}
	.mileCont ul li{margin-bottom:15px;}
	.mileCont ul li strong{font-size:1em;}

	.parkBx .park_select li{width:100%;}
	

}

@media screen and (max-width: 425px){
	.fs24{font-size:1.3em;}
	#wrap{width:calc(100% - 15px);}
	/* 헤더 */
	#header{align-items: center; }
	#header .h_left{padding:10px; max-width:110px;}
	#header #nav .utilBx{margin-right:20px;}
	#header #nav .utilBx .memBx{padding-left:0;}
	#header #nav .utilBx .memBx:before{display:none;}
	#header #nav .utilBx .util{padding:10px; top: calc(100% - 5px);}
	#header #nav .chargeBtn{width:90px;}
	#header #nav .chargeBtn span{background:none; padding:0px;}
	
	/* 1-로그인  */
	body.loginWrap .cont_store .loginBot .inputBx{align-items: flex-start; flex-direction: column;}
	body.loginWrap .cont_store .loginBot .inputBx label{width:100%; margin-bottom:5px;}
	body.loginWrap .cont_store .input_right{width:100%;}
	body.loginWrap .loginBx .loginBot .inputBx input{width:100%;}
	
	/* 2-메인 레이아웃 */
	.searchBx .searchbtn{padding:10px;}
	.main_left .m_top{padding:30px 15px;}
	.main_left .m_bot .tit{margin-bottom:20px;}
	.main_left .m_bot .tit .sliderBtn a{padding:8px;}
	.main_left .m_bot .saleLst li{width:100%!important; margin:0 0 10px 0; padding:15px 10px;}
	.main_left .m_bot .saleLst li:nth-of-type(2n){margin:0 0 10px 0;}
	.main_left .m_bot .saleLst li p{margin-bottom:5px; font-size:1.125em;}
	.detailBx .detail_cont .filterBx .filterItem > span{width:100%; white-space: nowrap; margin-bottom:4px;}
	.detailBx .detail_cont .filterBx .filterItem{flex-wrap: wrap; margin-bottom:6px;}
	.detailBx{margin-top:20px; padding:20px 10px;}

	/* 에러페이지 - 공통으로 쓰는 거*/
	.errorBx{width:calc(100% - 10px); padding:40px 10px;flex-direction: column;}
	.errorBx img{width:40%; margin-bottom:15px;}
	.errorBx .errorTxt .top .errorNumb{font-size:3em;}
	.errorBx .errorTxt .top .errorTit{font-size:1.2em;}
	.errorBx .errorTxt, .errorBx .errorTxt .top, .errorBx .errorTxt .mid{margin-bottom:15px;}

	/* 결제 에러 */	
	.cont_complete{padding:30px 15px;}
	.cont_complete .top .ico{width:120px; height:120px; margin-bottom:10px;}
	.cont_complete .top span{font-size:1.5em;}
	.failBx{width:100%;}


	.detail_view .detail_btn a{width:calc(50% - 10px);}
	.detailBx .detail_cont .filterBx .filterItem > span{margin-right:0;}
	.detailBx .detail_cont .filterBx .filterItem,
	.detailBx .detail_cont .filterBx .filterItem input,
	.detailBx .detail_cont .filterBx .filterItem textarea,
	.detailBx .detail_cont .filterBx .filterItem select{width:100%;}
	.dateBx{width:100%;}
	.dateBx input{width:calc(50% - 10px)!important;}
	.dateBx input + span{width:10px; display:inline-block;}

	.searchBx{width:100%;}
	.searchBx .basicbtn{width:100%}

	/* 마일리지 */
	.mileCont{padding: 20px 15px;}
	.mileCont .chargeBtn{padding:10px; border-radius:10px;}
	.main_left .m_bot .tit{display:none;}

}

@media screen and (max-width: 360px){
	/* 1-로그인  */
	body.loginWrap .loginBx .loginTop{background-size: 50%;}
	body.loginWrap .loginBx .loginBot .inputBx label{width:40%;}
	body.loginWrap .loginBx .loginBot .inputBx input{width:60%;}
	body.loginWrap .cont_store .loginBot .inputBx input{width:100%;}

	.searchBx{align-items: flex-start; flex-direction: column;}
	.searchBx input{width:100%;}
	.searchBx .searchbtn{margin-top:10px; width:100%;}

	.detail_view .detail_input li{width:100%; margin: 0 0 10px 0;}
}