<div id="fast-inquiry-form">
    <div class="wrap">
    <form action="#">
        <fieldset class="inr">
            <legend>창업문의</legend>
            <div class="tit">
                <img src="<?=DIR?>/images/main/fast-inquiry-logo.png" alt="">
                <p>가맹문의</p>
                <a href="tel:<?=$config_tel[0]?>"><?=$config_tel[0]?></a>
            </div>
            <div class="boxs">
                <input type="text" class="inp" placeholder="성함">
                <input type="text" class="inp" placeholder="연락처(’-’ 제외)">
                <select class="sel">
                    <option value="">창업희망지역 선택</option>
                </select>
            </div>
            <div class="agree">
                <input type="checkbox" id="_agree" name="_agree">
                <label for="_agree">개인정보수집 동의</label>
                <a href="#" data-pop-href="<?=SUBPAGE?>/popup/private" data-pop-chain="pop1" data-pop-size="500,650">[확인]</a>
            </div>
            <input type="submit" value="문의하기" class="sbm">
        </fieldset>
    </form>
    </div>
</div>

#fast-inquiry-form {height: 100px;position: relative;z-index: 77;}
#fast-inquiry-form legend {display: none;}
#fast-inquiry-form .wrap {position: absolute;bottom: 0;left: 0;right: 0;height: 100px;background: var(--color);}
#fast-inquiry-form .wrap .inr {height: 100px;display: flex;align-items: center;justify-content: space-between;max-width: 1400px;margin: 0 auto;}
#fast-inquiry-form .tit {position: relative;padding-left: 75px;}
#fast-inquiry-form .tit > img {position: absolute;bottom: 0;left: 0;}
#fast-inquiry-form .tit > * {display: block;}
#fast-inquiry-form .tit > p {font-size: 20px;color: #111111;font-weight: 800;line-height: 23px;}
#fast-inquiry-form .tit > a {font-size: 32px;color: #111111;font-weight: 700;font-family: 'WAGURI';line-height: 35px;}
#fast-inquiry-form .boxs {display: flex;align-items: center;}
#fast-inquiry-form .boxs .inp,
#fast-inquiry-form .boxs .sel {background: #fff;border: 0px;margin-right: 5px;padding: 0 20px;width: 220px;height: 55px;font-size: 18px;color: #777;box-sizing: border-box;}
#fast-inquiry-form .boxs .sel option {color: #777;}
#fast-inquiry-form .boxs .inp {padding-left: 20px;color: #111;}
#fast-inquiry-form .boxs .inp::-webkit-input-placeholder{color: #777;}
#fast-inquiry-form .boxs .inp:-moz-placeholder{color: #777;}
#fast-inquiry-form .boxs .inp::-moz-placeholder{color: #777;}
#fast-inquiry-form .boxs .inp:-ms-input-placeholder{color: #777;}
#fast-inquiry-form .agree {display: flex;align-items: center;position: relative;z-index: 0;}
#fast-inquiry-form .agree input {position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;overflow: hidden;}
#fast-inquiry-form .agree a {font-weight: normal;font-size: 18px;color: #111;letter-spacing: -1px;line-height: 22px;font-weight: 500;text-decoration: none !important;}
#fast-inquiry-form .agree label {font-weight: normal;font-size: 18px;color: #111;letter-spacing: -1px;line-height: 22px;font-weight: 700;margin-right: 5px;}
#fast-inquiry-form .agree input + label {padding-left: 30px;position: relative;z-index: 0;}
#fast-inquiry-form .agree input + label:after {display: block;content: '';position: absolute;top: -1px;left: 0;width: 24px;height: 24px;border-radius: 50%;border: 2px solid #111;box-sizing: border-box;}
#fast-inquiry-form .agree input:checked + label:after {content: '\e116';font-family: 'axicon';font-size: 14px;color: #fff;background-color: #111;line-height: 20px;text-align: center;}
#fast-inquiry-form .sbm {border: 0px;background: var(--color-red);width: 160px;height: 55px;font-weight: normal;font-size: 21px;color: #fff;font-weight: 700;}
#fast-inquiry-form.fix .wrap {position: fixed;z-index: 55;}

//Bottom Fixed
const botFix = {
    init(){
        this.action();
    },
    action(){
        const $wrap = document.querySelector('#fast-inquiry-form');
        if (!$wrap) return;

        const classFix = () => {
            let wt = window.scrollY;
            let wh = window.innerHeight;
            let tt = document.querySelector('#footer').getBoundingClientRect().top + window.scrollY;
            if(wt < tt - wh){
                $wrap.classList.add('fix');
            }else{
                $wrap.classList.remove('fix');
            }
        }
        window.addEventListener('load', classFix)
        window.addEventListener('scroll', classFix);
    }
}
document.addEventListener('DOMContentLoaded', function () {
    botFix.init();
});