@charset "utf-8";

/* 폰트 - pretendard */
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../fonts/Pretendard-Regular.woff) format('woff2'), url(../fonts/Pretendard-Regular.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../fonts/Pretendard-Medium.woff2) format('woff2'), url(../fonts/Pretendard-Medium.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../fonts/Pretendard-SemiBold.woff2) format('woff2'), url(../fonts/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../fonts/Pretendard-Bold.woff2) format('woff2'), url(../fonts/Pretendard-Bold.woff) format('woff');
}

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,button {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: 'Pretendard', sans-serif;letter-spacing: -0.03em;}
body {-webkit-text-size-adjust: none;}
a {background-color: transparent;color: inherit;text-decoration: none;}
a:active, a:hover {outline: 0;}
p {outline: none;}
address, cite, code, dfn, em, var, th, strong {font-style: normal;}
img {border: 0;display: block;}
button {cursor: pointer;background: none;}
select {font: inherit;}
select:hover {cursor: pointer;}
textarea {padding: 0;resize: none;font: inherit;}
textarea::-webkit-input-placeholder {color: #999;}
textarea:-ms-input-placeholder {color: #999;}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;outline: none;}
input::-ms-clear {display: none;}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input::-webkit-input-placeholder {color: #333;line-height: inherit;}
input:-ms-input-placeholder {color: #333;line-height: inherit;}
input::-ms-clear, input::-ms-reveal {display: none;width: 0;height: 0;}
input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration {display: none;}
fieldset {border: 0;padding: 0;margin: 0;min-width: 0;}
input[type='button'] {background-color: transparent;}
input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator {display: none;-webkit-appearance: none;}
input[type='checkbox'] {display: none;}
input[type='radio'] {display: none;display: flex;position: inherit;}

/* 약속어 */
.blind{position: absolute;width: 1px;height: 1px;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);}

.mt_20{margin-top: 20px !important;}
.mt_40{margin-top: 40px !important;}

.c_red{color: #ea5145 !important;}
.c_222{color: #222 !important;}

.wrap{position: relative;max-width: 750px;}
.container{position: relative;z-index: 1;}

/* header */
.header{position: fixed;top: 0;left: 0;display: block;width: 100%;max-width: 750px;z-index: 5;background: #fff;}
.header_inner{display: flex;align-items: center;justify-content: space-between;height: 60px;padding: 0 20px;}
.header .logo{display: block;width: 140px;height: 18px;background: url(../images/logo/logo.png) no-repeat center / 100% 100%;}
.header_util {display: flex;gap: 16px;margin-left: auto;}
.header .lang{width: 24px;height: 24px;background: url(../images/ico/ico_lang.png) no-repeat center / 100% 100%;}
.header .logout{width: 24px;height: 24px;background: url(../images/ico/ico_logout.png) no-repeat center / 100% 100%;}
.header .close{width: 24px;height: 24px;background: url(../images/ico/ico_close.png) no-repeat center / 100% 100%;}
.header .page_tit{font-size: 20px;line-height: 32px;font-weight: 600;color: #222;}

/* footer */
.footer{padding: 40px 20px;}
.footer .call{display: flex;align-items: center;gap: 4px;font-size: 18px;line-height: 24px;font-weight: 700;color: #555;}
.footer .call span{font-size: 15px;font-weight: 600;color: #EA5145;}
.footer .address{font-size: 14px;line-height: 24px;color: #555;padding-top: 14px;}
.footer dl{display: flex;flex-direction: column;gap: 6px;padding-top: 16px;}
.footer dl > div{display: flex;gap: 8px;font-size: 14px;line-height: 17px;color: #555;}
.footer dt{font-weight: 500;color: #999;}
.footer .terms_area{padding-top: 20px;font-size: 0;}
.footer .terms_area a{position: relative;display: inline-block;font-size: 14px;line-height: 17px;font-weight: 500;color: #555;}
.footer .terms_area a + a{margin-left: 17px;}
.footer .terms_area a + a::before{content: '';position: absolute;top: 4px;left: -8px;;display: inline-block;width: 1px;height: 8px;background: #D9D9D9;}
.footer .copy{font-size: 12px;line-height: 14px;color: #999;padding-top: 20px;}

/* 퀵메뉴 */
.quick{position: fixed;right: 8px;bottom: 36px;z-index: 10;display: flex;flex-direction: column;align-items: end;gap: 8px;box-sizing: border-box;}
@media (min-width: 750px) {
    .quick {right: calc(100% - 750px + 8px);}
}
.quick_toggle{position: relative;width: 52px;height: 52px;border-radius: 99px;box-shadow: 0px 3px 5px 0px #00000026;background: #fff;}
.quick_toggle::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background:  url(../images/ico/ico_plus.png) no-repeat center center / 24px auto;}
.quick.on .quick_toggle::before{transform: rotate(45deg);}
.btn_top{width: 52px;height: 52px;border-radius: 99px;box-shadow: 0px 3px 5px 0px #00000026;background: #DAAA88 url(../images/ico/ico_arrow.png) no-repeat center center / 26px auto;}

.quick_list{display: none;flex-direction: column;align-items: flex-end;gap: 8px;}
.quick.on .quick_list {display: flex;animation: slideInUp 0.3s ease-out;}
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.quick_btn{font-size: 14px;line-height: 20px;color: #222;font-weight: 500;background: #fff;padding: 16px 22px 16px 44px;border-radius: 99px;box-shadow: 0px 2px 4px 0px #00000040;background-repeat: no-repeat;background-size: 20px 20px;background-position: 20px 16px;}
.quick_btn.kakao{background-image: url(../images/ico/ico_kakao.png);}
.quick_btn.consult{background-image: url(../images/ico/ico_consult.png);}
.quick_btn.naver{background-image: url(../images/ico/ico_naver.png);}
.quick_btn.claim{background-image: url(../images/ico/ico_claim.png);}

/* 탭 */
.tab{display: flex;width: fit-content;margin: 0 auto;padding: 4px;border-radius: 99px;background: #F4F4F4;}
.tab_item{font-size: 14px;color: #555555;padding: 9px 12px;min-width: 86px;text-align: center;box-sizing: border-box;}
.tab_item.on{font-weight: 500;background: #333333;border-radius: 99px;color: #fff;}

/* form */
.form{display: flex;flex-direction: column;gap: 32px;}
.form_item{display: flex;flex-direction: column;gap: 8px;}  
.form_label{font-size: 16px;line-height: 30px;font-weight: 500;color: #222;}
.form_label.required::after{content: '*';color: #EA5145;margin-left: 2px;}
.inp{position: relative;}
.inp input{display: block;width: 100%;border: 1px solid #DDDDDD;border-radius: 12px;padding: 11px 16px;box-sizing: border-box;font-size: 16px;line-height: 28px;color: #222;}
.inp input::placeholder{color: #BBBBBB;}
.inp.date input{padding-right: 44px;}
.inp.date button{position: absolute;top: 15px;right: 16px;;width: 20px;height: 20px;background: url(../images/ico/ico_calendar.png) no-repeat;background-size: 100% 100%;}
.inp.address input{padding-right: 84px;}
.inp.address button{position: absolute;top: 9px;right: 10px;font-size: 13px;font-weight: 500;color: #777;background: #eee;border-radius: 6px;padding: 10px;}
textarea{border: 1px solid #DDDDDD;border-radius: 8px;padding: 12px;box-sizing: border-box;font-size: 14px;line-height: 24px;color: #222;}

.checkbox{font-size: 0;}
.checkbox label{display: inline-block;width: 20px;height: 20px;background: url(../images/ico/ico_checkbox.png) no-repeat 0 0 / 100% 100%;}
.checkbox input:checked + label{background-image: url(../images/ico/ico_checkbox_on.png);}

.radio_group{display: flex;flex-wrap: wrap;gap: 8px 30px;}
.radio_group input + label{display: block;background: url(../images/ico/ico_radio.png) no-repeat 0 3px / 20px 20px;padding-left: 26px;font-size: 16px;line-height: 26px;font-weight: 500;color: #222;}
.radio_group input:checked + label{background-image: url(../images/ico/ico_radio_on.png);}


/* 버튼 */
.btn_wrap{display: flex;gap: 8px;}
.btn_wrap.vertical{flex-direction: column;}
.button{flex: 1;font-size: 18px;line-height: 28px;color: #fff;font-weight: 500;background: #EA5145;border-radius: 12px;padding: 14px;}
.button.secondary{color: #777777;background: #F4F4F4;width: 100px;flex: none;}
.button.tertiary{color: #222;background: #F4F4F4;}
.button.point{color: #fff;background: #333333;}
.button.disabled{color: #BBBBBB;background: #F4F4F4;}
.button.line{background: #fff;border: 1px solid #333;color: #333;line-height: 26px;}

/* 툴팁 */
.tooltip_wrap{flex: 1;}
.tooltip{display: block;font-size: 0;}
.tooltip img{display: block;width: 100%;}
.tooltip_btn{position: relative;display: inline-block;width: 18px;height: 18px;background: url(../images/ico/ico_tooltip.png) no-repeat 0 0 / 100% 100%;}
.tooltip_box{display: none;position: absolute;bottom: calc(100% - 7px);left: 8px;width: calc(100vw - 95px);max-width: calc(750px - 95px);background: #333333;border-radius: 5px;padding: 8px 32px 8px 12px;box-sizing: border-box;font-size: 14px;line-height: 20px;color: #fff;}
.tooltip_close{position: absolute;top: 8px;right: 8px;width: 20px;height: 20px;background: url(../images/ico/ico_tooltip_close.png) no-repeat center / 12px 12px;}
.tooltip_wrap.on .tooltip_btn::before{content: '';position: absolute;bottom: 20px;left: 3px;width: 12px;height: 8px;background: url(../images/ico/tooltip_arr.png) no-repeat;background-size: 12px auto;}
.tooltip_wrap.on .tooltip_box{display: block;}

/* table */
.tbl{width: 100%;border-radius: 11px;border-collapse: collapse;border-style: hidden;overflow: hidden;box-shadow: 0 0 0 1px #EEEEEE;}
.tbl tr + tr{border-top: 1px solid #EEEEEE;}
.tbl th{background: #F4F4F4;padding: 14px 14px 14px 16px;font-size: 12px;line-height: 20px;font-weight: 600;color: #777;text-align: left;vertical-align: middle;}
.tbl td{font-size: 14px;line-height: 20px;font-weight: 500;color: #222;padding: 14px 16px;}
.tbl_tit{font-size: 14px;line-height: 24px;font-weight: 600;color: #222;text-align: left;margin-bottom: 8px;}
.tbl .radio_group input + label{font-size: 14px;line-height: 20px;background-position: 0 0;}

/* popup */
.layer_wrap{position: fixed;inset: 0;max-width: 750px;background-color: rgba(0, 0, 0, .4);z-index: 100;}
.layer_popup{position: absolute;top: 50%;left: 50%;width: calc(100% - 40px);max-width: 500px;max-height: calc(100vh - 40px);background: #fff;border-radius: 16px;transform: translate(-50%, -50%);overflow: hidden;}
.layer_header{padding: 18px;border-bottom: 1px solid #ddd;}
.layer_tit{font-size: 18px;font-weight: 500;line-height: 24px;color: #222;text-align: center;}
.layer_body{padding: 16px 20px;}
.layer_footer{display: flex;}
.layer_footer .button{flex: 1;border-radius: 0;}

.lang_select .radio_item input + label{display: block;text-align: center;font-size: 18px;line-height: 24px;color: #777;padding: 10px;border-radius: 8px;}
.lang_select .radio_item input:checked + label{font-weight: 500;color: #222;background: #F4F4F4;}