/* 
	sub.css 리뉴얼 작업 중
*/


/* =================== 섹션 공통 =================== */
.subComWrap{max-width: 1200px; width: 95%; min-height: 80vh; margin: 0 auto;}
body:has(.sub_content):has(.pagination) .sub_content{margin: 0  auto 50px;}


/* ================== 섹션 타이틀 ================== */
.secComTitBox{
  color: var(--clr_black_mn); width: fit-content;
  margin-bottom: 20px; 
}
.secComTitBox--flex{display: flex; align-items: flex-end; justify-content: space-between; width: 100%; margin-bottom: 20px;} 
.secComTitBox--flex .secComTitBox{margin-bottom: unset;}
.secComTit__mn{ width: fit-content; font-size: 28px; font-weight: 700; line-height: 33px;}
.secComTit__sub{font-size: 24px; font-weight: 700; color: var(--clr_black_mn); margin-bottom: 20px; margin-top: 60px;}
.secComTxt__sub{
  font-size: 16px; font-weight: 700; line-height: 19px; margin-bottom: 7px;
	color: var(--clr_blue);
}

/* =================== 서브 배너 =================== */
.subComBnr{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.subComBnr__mnTit{font-weight: 700; margin-bottom: 20px;}
.subComBnr__mnTxt{font-weight: 400; margin-bottom: 30px;}
.subComBnr__sbTxt{font-weight: 400; opacity: 0.7;}
.subComBnr__exTxt{
  font-size:18px; font-weight: 700; line-height: 21px;
  display: flex; align-items: center; justify-content: center; gap: 21px;
  margin-bottom: 12px;
}
.subComBnr__exTxt:last-child{margin-bottom: unset; margin-left: 12px;}
.subComBnr__exTxt p:first-child{position: relative;}
.subComBnr__exTxt p:first-child::after{
  content: ""; width: 1px; height: 15px;
  position: absolute; top: 50%; right: -11px; transform: translateY(-50%);
  background-color: #fff;
}


/* ===================== 서브 탭 ===================== */
/* -------- subComTab -------- */
.subComTab{
	display: flex; align-content: center; justify-content: flex-start; gap: 20px;
	border-bottom: var(--mix_brdr_btrDkr); 
	margin-bottom: 20px; padding-right: 10px;
	position: relative;
	overflow-x: auto;
	-ms-overflow-style: none;  /* IE, Edge */
	scrollbar-width: none;  /* Firefox */
}
.subComTab::-webkit-scrollbar {display: none; /* Chrome, Safari */}
.subComTab__lst{
	padding-bottom: 12px; box-sizing: border-box;
	font-size: 16px; font-weight: 400; line-height: 19px; color: var(--clr_black_ex);
	white-space: nowrap; cursor: pointer;
}
.lst--amt a:hover,
.lst--amt button:hover{font-weight: 700; color:var(--clr_black_mn);}
.subComTab__lst a:hover,
.subComTab__lst button:hover{font-weight: 700; color:var(--clr_black_mn);}
.lst--am{position: relative;}
.lst--amt a, .lst--amt button{display: inline-block; position: relative;}

.subComTabOn .lst--amtClick{font-weight: 700; color:var(--clr_black_mn);}

.lst--indi {
	display:none;
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: black;
  transition: left 0.07s ease, width 0.07s ease;
}
/* --------------------------------------------- */

/* -------- sub_tab01 -------- */
.sub_tab01Wrap{
	width: 100%; overflow: auto; margin-bottom: 40px; 	
	-ms-overflow-style: none;  /* IE, Edge */
	scrollbar-width: none;  /* Firefox */
}
.sub_tab01Wrap::-webkit-scrollbar {display: none; /* Chrome, Safari */}
section:has(.sub_tab01):has(.secComTitBox) .secComTitBox{margin-bottom: 40px;}
.sub_tab01{width: auto; min-width: 100%; display: table; table-layout: fixed; background-color: var(--clr_smWhite); border-radius: 9px; height: 100%;}
.sub_tab01 li{
	display: table-cell; vertical-align: middle; position: relative; text-align: center; cursor: pointer;
	white-space: nowrap;
	min-width: 110px;
}
.sub_tab01 li a,
.sub_tab01 li button{
	padding: 10px; display: block; font-weight: 700; word-break: keep-all; color: var(--clr_black_mn);
	width: 100%;
}
.sub_tab01 li.on{position: relative;}
.sub_tab01 li.on:after{
	content: "";
	position: absolute; bottom: 0; left: 0;
	width: 100%;
	border-bottom: 1px solid var(--clr_black_mn);
}
/* --------------------------------------------- */


/* ============ 파일업로드/ 파일선택 버튼 ============ */
label.upload-file {cursor: pointer; display:flex; align-items:center; gap: 10px; position: relative; width: 100%; max-width:390px;}
label.upload-file p {
	width: calc(100% - 75px); 
	height: 38px; line-height: 38px;
  border: var(--mix_brdr_btrDkr); border-radius: 7px; background: #fff;
	color: var(--clr_black_mn);
	text-overflow: ellipsis; white-space: nowrap;
  overflow: hidden; box-sizing: border-box;
	position: absolute; top: 0; left: 0;
}
label.upload-file input[type="file"] {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
  opacity: 0; cursor: pointer;
}
label.upload-file .btn_type05{margin-left: auto;}
/* --------------------------------------------- */

/* ============ 라디오 버튼 ============ */
/* .hasInpInfoM:has(.hasRadioBox){padding-top: 1px;}
.hasRadioBox{display: flex; align-items: center; gap: 15px;}
.radioBox{display: inline-flex; align-items: normal; gap: 3px;} */
/* --------------------------------------------- */

/* ============ input 메세지 ============ */
.hasInpCheckM{
	flex-wrap: wrap; display: flex; align-items: flex-start !important; column-gap: 10px; row-gap: 5px; 
	width:100%; max-width: 300px;
} 
.msgType{font-weight: 400; word-break: keep-all;}
.msgType_invalid{color: var(--clr_soft_red);}
.msgType_success{color: var(--clr_blue);}
.inpInfoM{
  position: relative;
  font-weight: 400; color: var(--clr_blue); word-break: keep-all;
  padding-left: 11px;
}
.inpInfoM:before{
  content: "*";
  position: absolute; top:8px; left: 0;
  font-size: 15px; line-height: 7px;
}
/* --------------------------------------------- */


/* ============ 첨부 가능 파일형식 안내 ============ */
/* 평가, 제휴제안, 문의 포함 */
.fileExpBox{
	display: block; word-break: break-word; color: var(--clr_black_ex);
	font-weight: 400; line-height: 1.3; margin-top: 8px;
}
/* --------------------------------------------- */

/* =============== ~ 정보 없음 =============== */
.noneDataInfo{
  background-color: #fdfdfdd4; border-radius: 7px;
  box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 25%), 1px 1px 6px -1px rgb(0 0 0 / 20%);
  width: fit-content; text-align: center;
  font-weight: 500; font-size: 14px; word-break: keep-all;
  margin: 0 auto; margin-top: 150px; margin-bottom: 50px; padding: 15px 35px;
}
/* 신규 */
.infoNone__img{margin-bottom: 20px; width: 150px; height: 150px;}
.infoNone__img img{width: 100%; height: 100%; object-fit: cover;}
.infoNone__txt{
	margin-bottom: 40px;
	font-size: 24px; font-weight: 400; color: var(--clr_black_ex);
	line-height: 27px;
}
.infoNone__togo{
	font-size: 14px; font-weight: 400; color: #fff;
	width: 150px; height: 30px; display: flex; align-items: center; justify-content: center;
	background-color: #000; border-radius: 20px;
}
/* --------------------------------------------- */

/* ============ 우편번호 찾기 관련 ============ */
#postLayer:has(iframe){
	width: 100vw;	height: 100vh; background-color: rgba(0 0 0 / 50%);
	position: fixed; top: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
}
#postLayer #__daum__layer_1{
	max-width: 500px !important; width: 95% !important;
	border-radius: 2px !important;
}
#postLayer .pLCloseBox{	width: 95%; max-width: 500px; min-width: 300px; height: 500px;position: absolute;}

#postLayer .postLayerClose {
	background-image: url(/assets/img/com/popClose.svg);
	background-color: rgb(0 0 0 / 80%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	width: 30px; height: 32px;
	border-radius: 9px;
	position: absolute; top: -44px; right: 0;
}
#postLayer .tf_keyword{font-size: 14px !important;}
#postLayer .info_body{font-size:14px; word-break: keep-all;}
/* --------------------------------------------- */

/* ========== list 번호 붙이기 ========== */
.addItemN{counter-reset: itemNum 0}
.addItemN li{position: relative; letter-spacing: -0.5px}
.addItemN>li:before{content: counter(itemNum)'.'; counter-increment: itemNum 1; position: absolute; left: 0}
.addItemN>li>ul{counter-reset: itemNum 0}
.addItemN>li>ul>li:before{content: counter(itemNum)')'; counter-increment: itemNum 1; position: absolute; left: 0}
/* --------------------------------------------- */

/* =============== 페이저 =============== */
/* version1 */
.pagination--ver1{width: fit-content; margin: 0 auto; margin-bottom: 150px;}
.pagination--ver1 ul{margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.pagination--ver1 ul li{
	width: 30px; height: 30px; line-height: 27px; margin: 0 4px; border: 1px solid #dae8f9; display: inline-flex; justify-content: center; align-items: center;
}
.pagination--ver1 ul li:has(a) a{width: 100%; height: 100%; border: unset;}
.pagination--ver1 ul a{
	display: block; color: #4c4c4c; width: 100%; height: 100%; text-align: center;
	width: 30px; height: 30px; border: 1px solid #dae8f9;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pagination--ver1 ul li:hover,
.pagination--ver1 ul a:hover{border-color: #a7cdfa; font-weight: 700}
.pagination--ver1 ul li.on{border-color: #1C7DEC; background: #1C7DEC; color: white; font-weight: 700; font-size: 14px;}
.pagination--ver1 ul li.on:hover{border-color: #1C7DEC;}

/* kdc랑 구조가 달라서 css도 차이남 */
.pagination--ver1 .pagination_click_a--prev,
.pagination--ver1 .pagination_click_a--next{width: 13px; height: 14px; display: flex; align-items: center; justify-content: center;}
.pagination--ver1 .pagination_click_a--prevFir,
.pagination--ver1 .pagination_click_a--nextLst{width: 14px; height: 15px; display: flex; align-items: center; justify-content: center;}
.pagination--ver1 .pagination_click_a--prev,
.pagination--ver1 .pagination_click_a--prevFir{margin-right: 1px;}
.pagination--ver1 .pagination_click_a--next,
.pagination--ver1 .pagination_click_a--nextLst{transform: scaleX(-1); margin-left: 2px;}


/* version2 */
.pagination--ver2{width: fit-content; margin: 0 auto; }
.pagination--ver2 ul{display: flex; align-items: center; justify-content: center; gap: 10px;}
.pagination--ver2 ul:not(:has(.pagination_click_a--prevFir)):not(:has(.pagination_click_a--prev)) {padding-left: 80px;}
.pagination--ver2 ul:not(:has(.pagination_click_a--prevFir)){padding-left:40px;}
.pagination--ver2 ul:not(:has(.pagination_click_a--nextLst)):not(:has(.pagination_click_a--next)) {padding-right: 80px;}
.pagination--ver2 ul:not(:has(.pagination_click_a--nextLst)){padding-right:40px;}

.pagination--ver2 li{
	width: 30px; height: 32px; border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	position: relative;
}
.pagination--ver2 li:has(img){background-color: rgb(0 0 0 / 30%);}
.pagination--ver2 li:has(span){
	background-color: var(--clr_smWhite);
	border: 1px solid #d9d9d9;
	font-size: 18px; font-weight: 700; line-height: 21px; color: var(--clr_black_mn);
}
.pagination--ver2 li.on,
.pagination--ver2 li:has(span):hover{
	background-color: var(--clr_blue); color: #fff; border: var(--brdr_blue) ;
}
.pagination--ver2 ul a{
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
}
.pagination--ver2 .pagination_click_a--prev,
.pagination--ver2 .pagination_click_a--next{width: 7px; height: 12px; display: flex;}
.pagination--ver2 .pagination_click_a--prev img,
.pagination--ver2 .pagination_click_a--next img{
	width: 100%; height: 100%; object-fit: cover;
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(51deg) brightness(113%) contrast(101%);
}
.pagination--ver2 .pagination_click_a--prevFir,
.pagination--ver2 .pagination_click_a--nextLst{width: 13px; height: 12px; display: flex;}
.pagination--ver2 .pagination_click_a--prevFir img,
.pagination--ver2 .pagination_click_a--nextLst img{
	width: 100%; height: 100%; object-fit: cover;
}
.pagination--ver2 .pagination_click_a--nextLst img{transform: rotate(180deg);}
/* --------------------------------------------- */

/* ======= 상세내용 팝업 (결제/회원가입 -> 개인정보 동의 등) ======= */
.blocker:has(.detail_pop){z-index: 1000; background-color:rgba(0 0 0 / 50%); padding:unset;}
.detail_pop{width:92.1%; max-width:1200px; height:fit-content; padding:25px 12px 25px 24px; top:0; margin:60px 0; border-radius:12px; box-shadow:unset; word-break:keep-all;}
.detail_pop_wrap{overflow-Y:auto; height:auto; max-height:70vh;}
@-moz-document url-prefix() {
	/* firefox 브라우져 css 별도 적용 */
	.detail_pop_wrap{scrollbar-color: rgba(0, 0, 0, 0.5) transparent; scrollbar-width: thin;}
}
.detail_pop_wrap::-webkit-scrollbar{width: 2px;}
.detail_pop_wrap::-webkit-scrollbar-track {background: var(--mix_clr_dkr);}
.detail_pop_wrap::-webkit-scrollbar-thumb {background-color: var(--clr_black_ex);}
.detail_pop_mnTit{line-height:21px; color:var(--clr_black_mn); font-weight: 700; margin-bottom:15px; padding-right: 12px;}
.detail_pop_sbTxt{line-height:21px; color:var(--clr_black_mn); font-weight: 400; font-size: 14px; padding-right: 12px;}
.detail_pop a.close-modal{
	background-image: url(/assets/img/com/popClose.svg);
	background-color: rgb(0 0 0 / 80%);
	background-position: center center;
	background-size: 10px 10px;
	width: 30px; height: 32px; border-radius: 9px;
	top: -44px; right: 0;
}
/* --------------------------------------------- */


@media all and (max-width:767px) {
	/* -------- 섹션 공통 -------- */
	.sec--comPd{padding: 20px 0 60px;}
	.subComWrap{width: 91.5%;}
	/* --------------------------------------------- */

	/* -------- 섹션 타이틀 공통 -------- */
	section:has(.sub_tab01):has(.secComTitBox) .secComTitBox{margin-bottom: 20px;}
	section:has(.sub_tab01):has(.secComTitBox) .subComTab,
	section:has(.subComTab):has(.secComTitBox) .subComTab{margin-top: 20px;}
	.secComTitBox{margin-bottom: 12px;}
	.secComTitBox--flex{margin-bottom: 12px;}
	.secComTxt__sub{font-size: 12px; line-height: 12px; margin-bottom: 6px;}
	.secComTit__mn{font-size: 17px; line-height: 20px;}
	.secComTit__sub{font-size: 15px; line-height: 16px; margin-top: 40px; margin-bottom: 15px;}
	/* --------------------------------------------- */

	/* -------- 배너 공통 -------- */
	.subComBnr {margin-top: 20px;}
	.subComBnr__mnTit{font-size:20px; line-height: 32px; margin-bottom: 15px;}
	.subComBnr__mnTxt{font-size:14px; line-height: 22px; margin-bottom: 20px;}
	.subComBnr__sbTxt{font-size:14px; line-height: 22px;}
	.subComBnr__exTxt{font-size:14px; gap: 14px; margin-bottom: 10px;}
	.subComBnr__exTxt:last-child{margin-left: 9px;}
	.subComBnr__exTxt p:first-child::after{right: -7.5px;}
	/* --------------------------------------------- */

	/* -------- 서브 텝 -------- */
	.sub_tab01Wrap{margin-bottom: 30px; height: 39px;}
	.sub_tab01 li a,
	.sub_tab01 li button{font-size: 14px}

	.subComTab{margin-bottom: 30px; margin-top: 40px;}
	.subComTab__lst{font-size: 14px; line-height: 16px;}
	/* --------------------------------------------- */

	label.upload-file{max-width:345px;}
	label.upload-file p{width: calc(100% - 75px); padding: 0 12px;}
	/* label.upload-file .btn_type05{margin-left: calc(100% - 60px);} */

	/* ---------- input 메세지 ---------- */
	.msgType ,.msgType *,
	.inpInfoM{font-size: 11px;}
	.msgType_success{width: 12px; right: 12px;}
	/* --------------------------------------------- */
	
	/* -------- ~ 정보 없음 -------- */
	.noneDataInfo{font-size: 15px; padding: 22px 45px;}
	/* --------------------------------------------- */

	/* -------- 첨부 가능 파일형식 안내 -------- */
	.fileExpBox{font-size: 11px;}
	/* --------------------------------------------- */

	/* -------- ~ 정보 없음 -------- */
	/* 신규 */
	.infoNone__img{width: 100px; height: 100px;}
	.infoNone__txt{font-size: 18px; line-height: 22px; margin-bottom: 30px;}
	/* --------------------------------------------- */

	/* -------- list 번호 붙이기 -------- */
	.addItemN li{padding-left: 13px;}
	/* --------------------------------------------- */

	/* -------- 상세내용 팝업 (결제/회원가입 -> 개인정보 동의 등) -------- */
	.detail_pop{padding:20px 7.5px 20px 15px; word-break:break-all; border-radius: 9px;}
	.detail_pop_mnTit{font-size: 15px; padding-right: 7.5px;}
	.detail_pop_sbTxt{padding-right: 7.5px;}
	/* --------------------------------------------- */
}

@media (min-width: 768px) and (max-width: 1023px) { 
	/* -------- 섹션 공통 -------- */
	.sec--comPd{padding: 60px 0;}
	/* --------------------------------------------- */

	/* -------- 섹션 타이틀 공통 -------- */
	section:has(.sub_tab01):has(.secComTitBox) .secComTitBox{margin-bottom: 30px;}
	section:has(.sub_tab01):has(.secComTitBox) .subComTab,
	section:has(.subComTab):has(.secComTitBox) .subComTab{margin-top: 30px;}
	.secComTxt__sub{font-size: 14px; line-height: 18px;}
	.secComTit__mn{font-size: 22px; line-height: 26px;}
	.secComTit__sub{font-size: 18px; line-height: 22px;}

	/* -------- 배너 공통 -------- */
	.subComBnr__mnTit{font-size:30px; line-height: 32px; margin-bottom: 20px;}
	.subComBnr__mnTxt{font-size:17px; line-height: 28px; margin-bottom: 25px;}
	.subComBnr__sbTxt{font-size:17px; line-height: 21px;}
	/* --------------------------------------------- */

	.sub_tab01 li a,
	.sub_tab01 li button{font-size: 16px}
	.subComTab{margin-top: 60px;}
	/* --------------------------------------------- */

	/* ------ 파일업로드/ 파일선택 버튼 ------ */
	label.upload-file p{padding: 0 15px;}
	/* --------------------------------------------- */

	/* ---------- input 메세지 ---------- */
	.msgType, .msgType *,
	.inpInfoM{font-size: 13px; line-height: 16px;}
	.msgType_success{width: 15px;}
	/* --------------------------------------------- */

	/* -------- 첨부 가능 파일형식 안내 -------- */
	.fileExpBox{font-size: 12px;}
	/* --------------------------------------------- */

	/* -------- ~ 정보 없음 -------- */
	/* 신규 */
	.infoNone__img{width: 120px; height: 120px;}
	.infoNone__txt{font-size: 20px; line-height: 24px;}
	/* --------------------------------------------- */

	/* -------- list 번호 붙이기 -------- */
	.addItemN li{padding-left: 16px;}
	/* --------------------------------------------- */

	/* -------- 상세내용 팝업 (결제/회원가입 -> 개인정보 동의 등) -------- */
	.detail_pop_mnTit{font-size: 16px;}
	/* --------------------------------------------- */
}


@media all and (min-width:1024px){
	.sec--comPd{padding: 80px 0;}
	section:has(.sub_tab01):has(.secComTitBox) .secComTitBox{margin-bottom: 40px;}
	section:has(.sub_tab01):has(.secComTitBox) .subComTab,
	section:has(.subComTab):has(.secComTitBox) .subComTab{margin-top: 40px;}
	.sub_tab01Wrap{height: 60px; overflow: unset;}

	/* -------- 배너 공통 -------- */
	.subComBnr{height: 340px;}
	.subComBnr__mnTit{font-size:38px; line-height: 48px; margin-bottom: 20px;}
	.subComBnr__mnTxt{font-size:18px; line-height: 28px; margin-bottom: 30px;}
	.subComBnr__sbTxt{font-size:18px; line-height: 28px;}
	/* --------------------------------------------- */

	.sub_tab01 li a,
	.sub_tab01 li button{padding: 20px; font-size: 18px}
	.subComTab{ margin-bottom: 40px; margin-top: 80px; column-gap: 30px;}

	/* ------ 파일업로드/ 파일선택 버튼 ------ */
	label.upload-file p{width: calc(100% - 100px); height:40px; line-height: 40px; padding: 0 20px; border-radius: 9px;}

	/* ---------- input 메세지 ---------- */
	.msgType, .msgType *{font-size: 16px; line-height: 25px;}
	.msgType_success{width: auto; right: 20px;}
	.inpInfoM{font-size: 14px; line-height: 18px;}
	/* --------------------------------------------- */

	/* -------- 첨부 가능 파일형식 안내 -------- */
	.fileExpBox{font-size: 14px;}
	/* --------------------------------------------- */

	/* -------- ~ 정보 없음 -------- */
	/* 신규 */
	.infoNone__img{width: 150px; height: 150px;}
	.infoNone__txt{font-size: 24px; line-height: 27px;}
	.infoNone__togo{font-size: 16px;}
	/* --------------------------------------------- */

	/* -------- list 번호 붙이기 -------- */
	.addItemN li{padding-left: 18px;}
	/* --------------------------------------------- */

	/* -------- 상세내용 팝업 (결제/회원가입 -> 개인정보 동의 등) -------- */
	.detail_pop_mnTit{font-size: 18px; line-height: 25px; margin-bottom: 20px;}
	.detail_pop_sbTxt{font-size: 15px; line-height: 23px;}
	/* --------------------------------------------- */
}