* { -webkit-font-smoothing: antialiased; box-sizing: border-box; } 
html,
body { margin: 0px; height: 100%; font-family: "Pretendard", Helvetica; background-color: #333333; } 
a { text-decoration: none; } 
p { margin:0px; } 
ul,li { padding:0; margin:0; list-style: none; } 
.scrollLock { overflow: hidden; } 

/* 공통 */
body>div { background-color: #fff; margin: 0 auto; max-width: 430px; min-width: 320px; } 

/* 헤더영역 */
#header { position:fixed; max-width: 430px; min-width: 320px; padding: 31px 21px 20px; width: 100%; background-color: #fff; z-index: 2; } 
#header .icon-back { width: 22px; position: absolute; top: 33px; left:21px; } 
#header .title { font-weight: 700; color: #333333; font-size: 20px; text-align: center; letter-spacing: 0; line-height: 29px; margin-top: -1.00px; white-space: nowrap; } 
#header .btn_coupon { visibility: hidden; position:absolute; top:30px; right:21px; width:22px; } 
#header .btn_coupon.on { visibility: visible; width:fit-content; } 
#header .btn_coupon .text { position: relative; font-weight: 500; color: #333333; font-size: 16px; text-align: center; letter-spacing: -0.64px; line-height: 29px; white-space: nowrap; cursor: pointer; } 
#header .btn_coupon .text a { color:#333333; } 
#header .btn_coupon .text .ellipse { position: absolute; width: 4px; height: 4px; top: 4px; right: -6px; background-color: #ed2024; border-radius: 4px; } 

/* 푸터 영역 */
#footer { padding: 30px 20px 54px; width: 100%; background-color: #2e2d3c; font-size: 14px; line-height: 20px; letter-spacing: -0.05px; font-weight: 300; } 
#footer footer { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; align-self: stretch; flex: 0 0 auto; } 
#footer .ftwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } 
#footer .ft-term { display: inline-flex; align-items: center; gap: 16px; position: relative; flex: 0 0 auto; } 
#footer .term { font-weight: 400; color: #ffffff; cursor: pointer; } 
.main .ft-text { color: #ffffff80; } 
.main .ftwrap { display: flex; flex-direction: column; align-items: flex-start; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } 
.main .logo-wrapper { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0px 0px 12px; flex: 0 0 auto; } 
.main .logo { width: 124px; } 

/* 팝업 영역 */
.modalBox { position: fixed; z-index: 99999; left: 0; top: 0; visibility: hidden; transition: .2s; background-color: #00000060; width: 100%; height: 100%; opacity: 0; } 
.modalBox.show { visibility: visible; opacity: 1; } 
.popupCon { position: fixed; max-width: 390px; width: calc(100% - 40px); padding:24px 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 15px; transition: .3s; } 
.popupCon .popuptit { display: flex; justify-content: space-between; align-items: flex-start; } 
.popupCon .popuptit p { font-size: 20px; line-height:24px; letter-spacing: -0.1px; font-weight: 700; word-break: keep-all; } 
.popupCon .popuptit button { all: unset; display: flex; width: 24px; height: 24px; align-items: flex-start; justify-content: flex-end; } 
.popupCon .popuptit button > img { display: block; } 
.popupCon .popupbody { margin-top: 16px; } 
.popupCon .popupbody.woscrl { padding-right: 0; } 
.popupCon .popupbody .termtxt { padding-right: 10px; padding-bottom: 40px; height: 550px; overflow-y: scroll; font-size: 14px; line-height: 1.65; letter-spacing: -0.14px; } 
.popupCon .popupbody .termtxt::-webkit-scrollbar { width: 4px; } 
.popupCon .popupbody .termtxt::-webkit-scrollbar-thumb { height: 1%; background: #DCDFE7; border-radius: 4px; } 
.popupCon .popupbody .termtxt::-webkit-scrollbar-track { background: #fff; } 
.popupCon .popupbody .termtxt .bold { font-weight: 700; } 
.popupCon .popupbody .termtxt .big { font-size: 16px; } 
.popupCon .popupbody .termtxt .line { text-decoration: underline; } 
.popupCon .popupbody .termtxt table { margin: 20px 0; } 
.popupCon .popupbody .termtxt table th { background-color: #f3f3f3; border: 1px solid #555; font-weight: 600; border-collapse: collapse; } 
.popupCon .popupbody .termtxt table td { border: 1px solid #555; border-collapse: collapse; } 

/* 얼럿 */
.modalBox .alertCon { position: fixed; padding: 20px; left: 50%; width: 260px; top: 50%; text-align: center; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; transition: .3s; } 
.modalBox .alertCon .alrterr { width: 60px; height: 60px; border-radius: 50%; background-color: #EDF1FA; font-size: 38px; line-height: 60px; font-weight: 700; color: #BFC6D3; margin: 0 auto; margin-top: 8px; } 
.modalBox .alertCon p.sub { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.18px; padding-top: 16px; } 
.modalBox .alertCon p.sub1 { font-size: 14px; line-height: 1.7; font-weight: 500; color: #999; margin-top: 8px; letter-spacing: -0.14px; } 
.modalBox .alertCon p.alrtmsg { padding: 10px 4px 4px 4px; font-size: 16px; line-height: 1.5; word-break: keep-all; } 
.modalBox .alertCon button { display: block; width: 100%; font-size: 15px; height: 44px; background-color: #484B54; border-radius: 5px; color: #fff; margin-top: 20px; } 



/* input css */
/* 라디오버튼 */
input[type='radio'] { 
 -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
 -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거 */
 appearance: none; /* 기본 브라우저에서 기본 스타일 제거*/
 width: 20px; height: 20px; border: 2px solid #DFDDDF; /* 체크되지 않았을 때의 테두리 색상*/
 border-radius: 50%; outline: none; /* focus 시에 나타나는 기본 스타일 제거*/
 cursor: pointer; vertical-align: middle; 
} 

/* 라디오버튼 체크 시 버튼 모양 스타일*/
input[type='radio']:checked { background-color: #fff; /* 체크 시 내부 원 색상*/ border: 6px solid #44217A; /* 라인이 아닌, 라인과 원 사이 색상*/}

input { font-size: 15px; font-family: "Pretendard", Helvetica; background-color: #ffffff; border-radius: 5px; border: 1px solid; border-color: #e6e6e6; outline: none; /* focus 시에 나타나는 기본 스타일 제거*/}

/* input number counter 핸들러 커스텀 */
.handle-counter { display: flex; justify-content: space-between; width: 107px; height: 42px; overflow: hidden; border:1px solid #e6e6e6; border-radius: 5px; vertical-align: middle; } 
.handle-counter .counter-minus, .handle-counter .counter-plus, .handle-counter input { float: left; text-align: center; } 
.handle-counter .counter-minus, .handle-counter .counter-plus { text-align: center; } 
.handle-counter input { border: none; width: 30px; } 
.handle-counter .spinner { font-size: 16px; font-weight: 300; padding: 6px 12px; border: 1px solid transparent; color: #333; } 
.handle-counter .spinner:disabled, .handle-counter .spinner:disabled:hover { color:#9c9c9c; cursor: not-allowed; } 
.handle-counter .spinner { background-color: #fff; } 
.handle-counter .spinner:hover, .handle-counter .spinner:focus { background-color: #fff; } 
.select { display: inline-block; width:90px; z-index: 1;}
.select .selected { display: flex; justify-content: flex-end; } 
.select .selected .selected-value { max-width: 90px; font-size: 14px; cursor: pointer; } 
.select .selected .arrow { width: 24px; background: url("../img/icon_more_down.svg") no-repeat 70% 50%; background-size: 50% 50%; background-position: center; } 
.select.active .selected .arrow { transform: rotate(180deg); } 
.select ul { display: none; width:90px; position: absolute; background: #fff; border-top: none; margin: 8px 0 0 0px; border:1px solid #e6e6e6; border-radius: 8px; overflow: none; box-shadow: -2px 3px 5px rgba(206, 206, 206,0.5); } 
.select.active ul { display: initial; } 
.select ul li { padding: 5px 8px; font-size: 14px; cursor: pointer; } 
.select ul li,.select .selected .selected-value { white-space: nowrap; /* 줄바꿈 안함 */
 overflow: hidden; text-overflow: ellipsis; /* 말줄임 적용 */}