@charset "utf-8";

@font-face {
	font-family: Pretendard;
	src: url(/Form/fonts/Pretendard-Regular.woff2) format(woff2);
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Pretendard;
	src: url(/Form/fonts/Pretendard-Medium.woff2) format(woff2);
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Pretendard;
	src: url(/Form/fonts/Pretendard-Bold.woff2) format(woff2);
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

* { 
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html, body { 
	position:relative; 
	width: 100%;
	overflow-x:hidden;
}
body { 
	font-family: Pretendard, sans-serif;
	font-weight:400;
	line-height:1.3;
	letter-spacing:-.3px;
	word-break:keep-all;
}
a { 
	text-decoration:none; 
}
li { 
	list-style:none; 
}
button, input, textarea, select { 
	background: transparent; 
	border:none;
	font-family: Pretendard, sans-serif;
	line-height:1.3;
	letter-spacing:-.3px;
	word-break:keep-all;
}
label, button, a {
	cursor:pointer; 
}
input, textarea { 
	display:block; 
	min-width: 0; 
	outline:none; 
}
button { 
	text-align: left; 
}
textarea { 
	resize:none;
}

.wrapper { 
	max-width: 600px;
	margin:0 auto;
	padding:56px 0 0;
}
.inputArea { 
	padding:14px 11px 12px;
	background: #FFF;
	border:1px solid #EDEDED;
	border-radius: 10px;
	font-size: 13px;
	color: #212121;
}
.inputArea::placeholder { 
	color: #999; 
}
select.inputArea { 
	padding-right:35px;
	appearance: none;
	background-image: url(/Form/_guest/basic/images/comSel01.svg);
	background-repeat:no-repeat;
	background-position:right 11px center; 
}
.inputArea.fullWid { 
	width: 100%; 
}
.comNoDataBox {
	padding:24px;
	background: #FFF;
	border:1px solid #F0F0F0;
	border-radius: 15px;
	box-shadow:0 1px 4px 0 rgba(127,132,141,.24);
	text-align: center;
}
.comNoDataBox .imgBox { 
	margin:0 auto 18px;
	font-size: 0;
}
.comNoDataBox .imgBox img { 
	max-width: 100%; 
}
.comNoDataBox .txt { 
	font-size: 14px; 
	color: #797979;
}
@media all and (max-width:599px){
	.inputArea { 
		padding:8px 8px 7px;
		font-size: 13px;
	}
	select.inputArea { 
		padding-right:25px;
		background-size:15px auto;
		background-position:right 8px center; 
	}
	.comNoDataBox { 
		padding:16px;
		border-radius: 8px;
	}
	.comNoDataBox .imgBox { 
		width: 24px;
		margin:0 auto 10px;
	}
	.comNoDataBox .txt { 
		font-size: 13px;
	}
}

/* 헤더 시작
------------------------------------------------------ */
header { 
	position:fixed;
	display:flex;
	align-items:center; 
	width: 600px;
	max-width: 100%;
	height: 56px;
	top: 0;
	left: 50%;
	padding:0 16px;
	transform:translateX(-50%);
	background: #FFF;
	border-bottom:1px solid #EDEDED;
	z-index: 10;
}
header .hLogo a { 
	display:block;
}
header .hLogo a img { 
	max-width: 100%; 
}
/* 헤더 끝
------------------------------------------------------ */
/* 푸터 시작
------------------------------------------------------ */
footer { 
	padding:24px 16px 21px;
	background: #272B36; 
}
footer .fTopBox { 
	display:flex;
	justify-content:space-between;
	margin:0 0 23px;
}
footer .fTopBox .conBox { 
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:20px;
}
footer .fTopBox .fLogo { 
	font-size: 0; 
}
footer .fTopBox .fLogo img { 
	max-width: 100%;
}
footer .fTopBox .fTxt01 { 
	font-size: 12px; 
	color: #ACB3BC;
}
footer .fTopBox .fLnkLst { 
	display:flex;
	justify-content:flex-end;
	gap:8px;
}
footer .fTopBox .fLnkLst li { 
	position:relative;
	padding:0 9px 0 0;
}
footer .fTopBox .fLnkLst li:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 1px;
	height: 8px;
	top: 50%;
	right: 0;
	margin:-5px 0 0;
	background: #999;
}
footer .fTopBox .fLnkLst li:last-child { 
	padding:0;
}
footer .fTopBox .fLnkLst li:last-child:after { 
	display:none; 
}
footer .fTopBox .fLnkLst .lnk { 
	display:block;
	font-weight: 700;
	font-size: 13px;
	color: #999;
	transition:all .3s ease;
}
footer .fTopBox .fLnkLst .lnk:focus,
footer .fTopBox .fLnkLst .lnk:hover { 
	color: #FFF; 
}
footer .fTopBox .fSnsLst { 
	display:flex;
	justify-content:flex-end;
	gap:8px;
}
footer .fTopBox .fSnsLst .lnk { 
	display:block;
	width: 42px;
	height: 42px;
	background-color: #16212D;
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid #16212D;
	border-radius: 50%;
	font-size: 0;
	transition:all .3s ease;
}
footer .fTopBox .fSnsLst .lnk.stInstar { 
	background-image:url(/Form/_guest/basic/images/fInstar01_off.svg);
}
footer .fTopBox .fSnsLst .lnk.stBlog { 
	background-image:url(/Form/_guest/basic/images/fBlog01_off.svg);
}
footer .fTopBox .fSnsLst .lnk:focus,
footer .fTopBox .fSnsLst .lnk:hover { 
	background-color: #344B66; 
}
footer .fTopBox .fSnsLst .lnk.stInstar:focus,
footer .fTopBox .fSnsLst .lnk.stInstar:hover { 
	background-image:url(/Form/_guest/basic/images/fInstar01_on.svg);
}
footer .fTopBox .fSnsLst .lnk.stBlog:focus,
footer .fTopBox .fSnsLst .lnk.stBlog:hover { 
	background-image:url(/Form/_guest/basic/images/fBlog01_on.svg);
}
footer .fInfoBox { 
	padding:23px 0 0;
	border-top:1px solid #424242;
}
footer .fInfoBox .lst01 { 
	display:flex;
	gap:10px;
}
footer .fInfoBox .lst01 li { 
	position:relative; 
	padding:0 12px 0 0;
	font-size: 12px;
	color: #ACB3BC;
}
footer .fInfoBox .lst01 li:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 1px;
	height: 8px;
	top: 50%;
	right: 0;
	margin:-5px 0 0;
	background: #6C7580;
}
footer .fInfoBox .lst01 li span { 
	margin:0 9px 0 0;
	color: #6C7580;
}
footer .fInfoBox .lst01 li:last-child { 
	padding:0;
}
footer .fInfoBox .lst01 li:last-child:after { 
	display:none;
}
footer .fInfoBox .lst01 + .lst01 { 
	margin-top:7px;
}
footer .fInfoBox .copy { 
	margin:21px 0 0;
	font-size: 12px; 
	color: #505964;
}
/* 푸터 끝
------------------------------------------------------ */
/* 네비 시작
------------------------------------------------------ */
nav .navLnkLst { 
	display:flex;
	flex-wrap:wrap;
	border-top:1px solid #F0F0F0;
}
nav .navLnkLst li { 
	width: 33.3333%; 
}
nav .navLnkLst .navLnk { 
	display:block;
	width: 100%;
	padding:6px 0 4px;
	text-align: center;
}
nav .navLnkLst .navLnk:before { 
	content:"";
	box-sizing:border-box;
	display:block;
	width: 24px;
	height: 24px;
	margin:0 auto 3px;
	background-repeat:no-repeat;
	background-size:cover;
	transition:all .3s ease;
}
nav .navLnkLst .navLnk .lnkTxt { 
	display:block; 
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0;
	color: #999;
	transition:all .3s ease;
}
nav .navLnkLst .navLnk:focus .lnkTxt,
nav .navLnkLst .navLnk:hover .lnkTxt,
nav .navLnkLst .navLnk.on .lnkTxt {
	color: #3490FD;
}
nav .navLnkLst .navLnk.stTariff:before { 
	background-image: url(/Form/_guest/basic/images/navIco_tariff_off.svg);
}
nav .navLnkLst .navLnk.stTariff:focus:before,
nav .navLnkLst .navLnk.stTariff:hover:before,
nav .navLnkLst .navLnk.stTariff.on:before { 
	background-image: url(/Form/_guest/basic/images/navIco_tariff_on.svg);
}
nav .navLnkLst .navLnk.stHome:before { 
	background-image: url(/Form/_guest/basic/images/navIco_home_off.svg);
}
nav .navLnkLst .navLnk.stHome:focus:before,
nav .navLnkLst .navLnk.stHome:hover:before,
nav .navLnkLst .navLnk.stHome.on:before { 
	background-image: url(/Form/_guest/basic/images/navIco_home_on.svg);
}
nav .navLnkLst .navLnk.stReward:before { 
	background-image: url(/Form/_guest/basic/images/navIco_reward_off.svg);
}
nav .navLnkLst .navLnk.stReward:focus:before,
nav .navLnkLst .navLnk.stReward:hover:before,
nav .navLnkLst .navLnk.stReward.on:before { 
	background-image: url(/Form/_guest/basic/images/navIco_reward_on.svg);
}
/* 네비 끝
------------------------------------------------------ */
/* 공통 슬라이드 배너 시작
------------------------------------------------------ */
.comBnrWr { 
	margin:0 0 16px;
	font-size: 0;
}
.comBnrWr img { 
	max-width: 100%; 
}
.comBnrBox { 
	overflow: hidden;
	font-size: 0;
}
.comBnrBox a { 
	display:block; 
	font-size: 0;
}
.comBnrLst01 {
	position:relative; 
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	margin:-26px 7.7% 0;
	padding:8px 16px;
	background: #FFF;
	box-shadow:0 1px 3px 0 rgba(82,81,81,.25);
	border-radius: 100px;
	z-index:1;
}
.comBnrLst01 li { 
	width: calc((100% - 10px)/3); 
}
.comBnrLst01 .lnk {
	display:flex;
	align-items:center; 
	justify-content:center; 
	width: 100%;
	height: 100%;
	padding:9px 9px 6px;
	border-radius: 100px;
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	color: #797979;
	transition:all .3s ease;
}
.comBnrLst01 .lnk:focus,
.comBnrLst01 .lnk:hover,
.comBnrLst01 .lnk.on { 
	background: #3490FD;
	color: #FFF;
}
@media all and (max-width:599px){
	.comBnrLst01 { 
		margin:10px 0 0;
	}
	.comBnrLst01 .lnk { 
		padding:7px 7px 5px;
		font-size: 14px;
	}
}
/* 공통 슬라이드 배너 끝
------------------------------------------------------ */