@charset "utf-8";

:root {
    /* Primary Color */
    --color-orange-main: #ff6838;
    --color-orange-sub: #ffbaab;
    --color-red-main: #ca2222;
    --color-red-sub: #eeaaaa;
    
    /* Monotone Color */
    --color-black: #333;
    --color-gray1: #898989;
    --color-gray2: #bfbfbf;
    --color-gray3: #eee;
    --color-gray4: #f6f6f6;
    --color-gray5: #666;
    --color-gray6: #ccc;
    --color-gray7: #999;
    --color-gray8: #d9d9d9;
    --color-gray9: #4c4c4c;
    --color-white: #fff;
    /* --color-blue-main: #2589ca; */
    --color-blue-main: #0383d6;
    --color-blue-sub: #3691CE;
    --color-blue-active: #1f5db6;
    --color-blue-bg: #f2f5f8;

    

    /* Divider Line Color */
    --divider-line: #e0e0e0;
    --divider-dark-line: #d6d6d6;

    /* font-size */
    --fs-36: 36px;
    --fs-32: 32px;
    --fs-30: 30px;
    --fs-28: 28px;
    --fs-26: 26px;
    --fs-24: 24px;
    --fs-22: 22px;
    --fs-20: 20px;
    --fs-18: 18px;
    --fs-16: 16px;
    --fs-14: 14px;
    --fs-12: 12px;
    --fs-10: 10px;

    /* line-height */
    --lh-160: 1.6;
    --lh-145: 1.45;
    --lh-135: 1.35;
    --lh-130: 1.3;
    --lh-120: 1.2;

    --lh-54: 54px;
    --lh-52: 52px;
    --lh-50: 50px;
    --lh-42: 42px;
    --lh-41: 41px;
    --lh-40: 40px;
    --lh-38: 38px;
    --lh-36: 36px;
    --lh-34: 34px;
    --lh-32: 32px;
    --lh-30: 30px;
    --lh-28: 28px;
    --lh-27: 27px;
    --lh-26: 26px;
    --lh-24: 24px;
    --lh-23: 23px;
    --lh-22: 22px;
    --lh-20: 20px;
    --lh-19: 19px;
    --lh-18: 18px;
    --lh-17: 17px;
    --lh-16: 16px;
    --lh-15: 15px;
    --lh-14: 14px;
    --lh-13: 13px;
}
/* *{caret-color: var(--color-blue-main);} */
#body{font-family: "Pretendard Variable", Pretendard, sans-serif;}
#body *{font-family: "Pretendard Variable", Pretendard, sans-serif;}
button{margin: 0;padding: 0;border: 0;cursor: pointer;background-color: unset;overflow: visible;}
input:focus-visible{outline: 0;}
textarea:focus-visible{outline: 0;}

.lazyload,
.lazyloading{opacity: 0;}
.lazyloaded{opacity: 1;transition: opacity .4s;}

.displaynone{display: none !important;}

.sound_only{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;}

.frm_wrap{}
.frm_box{}
.frm_box + .frm_box{margin-top: 16px;}
.frm_box .frm_label_box{}
.frm_box .frm_label_box .frm_label{display: inline-block;}
.frm_box .frm_label_box .frm_label_txt{display: inline-block;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-black);letter-spacing: -0.02em;}
.frm_box .frm_label_box .frm_required{display: inline-block;font-size: var(--fs-16);font-weight: 700;line-height: var(--lh-24);color: var(--color-orange-main);vertical-align: top;}

.frm_box .frm_inp_box{}
.frm_box .frm_label_box + .frm_inp_box{margin-top: 6px;}
.frm_box .frm_inp_box .frm_inp{width: 100%;height: 54px;padding: 0 10px;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-black);letter-spacing: -0.02em;background-color: var(--color-white);border: 1px solid var(--color-gray2);border-radius: 4px;position: relative;box-sizing: border-box;transition: border-color .15s;}
.frm_box .frm_inp_box .frm_inp::placeholder{color: var(--color-gray7);}
.frm_box .frm_inp_box .frm_inp:focus{border-color: var(--color-blue-main);}
.frm_box .frm_inp_box .frm_inp.required{background-image: unset !important;background-repeat: unset !important;background-position: unset !important;}

.frm_box .frm_msg_box{margin-top: 2px;}
.frm_box .frm_tooltip_msg{margin-top: 2px;display: none;}
.frm_box .frm_msg_box .frm_msg_txt{display: inline-block;font-size: var(--fs-14);font-weight: 300;line-height: var(--lh-20);color: var(--color-gray1);letter-spacing: -0.02em;}
.frm_box .frm_tooltip_msg .tooltip_msg{display: inline-block;font-size: var(--fs-14);font-weight: 300;line-height: var(--lh-20);color: var(--color-orange-main);letter-spacing: -0.02em;}

/* 인풋 커스텀 */
.frm_only_inp{}
.frm_only_inp + .frm_only_inp{margin-top: 10px;}
.frm_only_inp .frm_label_box{}
.frm_only_inp .frm_label_box .frm_label{}
.frm_only_inp .frm_label_box .frm_label_txt{}

.frm_only_inp .frm_inp_box{}
.frm_only_inp .frm_label_box + .frm_inp_box{margin-top: 0;}
.frm_only_inp .frm_inp_box .frm_inp{}



/* 체크박스 커스텀 */
.frm_chk_box{}
.frm_chk_box .frm_label_box{}
.frm_chk_box .frm_chk_label{display: inline-flex;align-items: center;justify-content: center;flex-wrap: nowrap;column-gap: 12px;position: relative;cursor: pointer;}
.frm_chk_box .frm_chk_inp{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;appearance: none !important;-webkit-appearance: none !important;}
.frm_chk_box .frm_chk_label .icon_frm_chk{flex: 0 0 auto;width: 16px;height: 16px;pointer-events: none;}
.frm_chk_box .frm_chk_label .icon_frm_chk svg{width: 100%;height: 100%;pointer-events: none;}
.frm_chk_box .frm_chk_label .icon_frm_chk svg path{fill: var(--color-gray6);transition: fill .2s;}
.frm_chk_box .frm_chk_inp:checked ~ .icon_frm_chk svg path{fill: var(--color-blue-main);}
.frm_chk_box .frm_chk_label .frm_label_txt{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);cursor: pointer;}
.frm_chk_box .frm_chk_label .frm_label_txt.bold{font-weight: 700;}

.frm_chk_box.type_box .frm_chk_label{column-gap: 8px;}
.frm_chk_box.type_box .frm_chkbox{flex: 0 0 auto;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;border-radius: 4px;border: 1px solid var(--color-gray6);background-color: var(--color-white);transition: background-color .2s, border-color .2s;}
.frm_chk_box.type_box .frm_chk_label .icon_frm_chk{width: 14px;height: 14px;}
.frm_chk_box.type_box .frm_chk_inp:checked ~ .frm_chkbox{background-color: var(--color-blue-main);border-color: var(--color-blue-main);}
.frm_chk_box.type_box .frm_chk_inp:checked ~ .frm_chkbox .icon_frm_chk svg path{fill: var(--color-white);}



.frm_radio_box{}
.frm_radio_box .frm_label_box{}
.frm_radio_box .frm_radio_label{display: inline-flex;align-items: center;justify-content: center;flex-wrap: nowrap;column-gap: 12px;position: relative;cursor: pointer;}
.frm_radio_box .frm_radio_inp{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;}
.frm_radio_box .frm_radio_label .icon_frm_radio{flex: 0 0 auto;width: 16px;height: 16px;pointer-events: none;}
.frm_radio_box .frm_radio_label .icon_frm_radio svg{width: 100%;height: 100%;pointer-events: none;}
.frm_radio_box .frm_radio_label .icon_frm_radio svg path{fill: var(--color-gray6);transition: fill .2s;}
.frm_radio_box .frm_radio_inp:checked ~ .icon_frm_radio svg path{fill: var(--color-blue-main);}
.frm_radio_box .frm_radio_label .frm_label_txt{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);cursor: pointer;}
.frm_radio_box .frm_radio_label .frm_label_txt.bold{font-weight: 700;}

.frm_radio_box.type_box .frm_radio_label{column-gap: 8px;}
.frm_radio_box.type_box .frm_radiobox{flex: 0 0 auto;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;border-radius: 4px;border: 1px solid var(--color-gray6);background-color: var(--color-white);transition: background-color .2s, border-color .2s;}
.frm_radio_box.type_box .frm_radio_label .icon_frm_radio{width: 14px;height: 14px;}
.frm_radio_box.type_box .frm_radio_inp:checked ~ .frm_radiobox{background-color: var(--color-blue-main);border-color: var(--color-blue-main);}
.frm_radio_box.type_box .frm_radio_inp:checked ~ .frm_radiobox .icon_frm_radio svg path{fill: var(--color-white);}

.frm_chk_box .frm_msg_box{padding-left: 28px;}
.frm_box .frm_inp_box input[readonly].frm_inp,
input[readonly] {background-color: #f9f9f9;color: #666;border: 1px solid #ddd;cursor: default;}

.frm_box .frm_inp_box.frm_textarea_box{position: relative;}
.frm_box .frm_inp_box.frm_textarea_box .char_count_box{position: absolute;right: 20px;bottom: 8px;display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-16);letter-spacing: -0.02em;}
.frm_box .frm_inp_box.frm_textarea_box .char_count_box #char_count{display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-14);letter-spacing: -0.02em;}
.frm_box .frm_inp_box.frm_textarea_box .frm_textarea{width: 100%;height: 150px;padding: 16px;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-black);letter-spacing: -0.02em;background-color: var(--color-white);border: 1px solid var(--color-gray2);border-radius: 4px;position: relative;box-sizing: border-box;transition: border-color .15s;resize: none;}
.frm_box .frm_inp_box.frm_textarea_box .frm_textarea:focus{border-color: var(--color-blue-main);}

@media (max-width: 600px){
  .frm_box .frm_inp_box .frm_inp{font-size: var(--fs-14);line-height: var(--lh-20);}
}

.pc_only{display: block;}
.mo_only{display: none;}
#mobile_on_btn{
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 999;
    display: none;
    width: 70px;
    text-align: center;
    text-decoration: none;
}

/* 이미지 래퍼 */
#mobile_on_btn .btn_img{
    display: block;
    border-radius: 100px;
    overflow: hidden;
    box-shadow:
        rgba(255,255,255,.2) 0 0 0 1px inset,
        rgba(0,0,0,.1) 0 4px 6px,
        rgba(0,0,0,.15) 0 8px 30px;
}

/* 이미지 */
#mobile_on_btn img{
    width: 100%;
    display: block;
}

/* 텍스트 */
#mobile_on_btn .btn_text{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

@media (max-width: 768px){
    .main_inner .pc_only{display: block;}
    .pc_only{display: none;}
    .mo_only{display: block;}
    .mobile_btn {display: none;}
    #mobile_on_btn{display: block;}
}