@font-face {
    font-family: 'paybooc-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{margin:0;}
div{margin:0;}
p{margin: 0;}
h2{margin: 0;}
h1{margin: 0;}
a{
    text-decoration: none;
    color:#000;
}
ul{margin:0; padding:0;}
li{list-style: none;}
.middle_title{background:url(/home/img/b2b_member_02.png)no-repeat;width: 100%;height: 428px; margin:0 auto;}
.top_title{text-align: left;color: #fff;background:url(/home/img/jeheu_banner.png) no-repeat;width: 100%;height: 450px;margin:0 auto; max-width:1920px;}
.top_title h2{padding: 120px 0px 20px 320px;font-size: 30px;font-family: 'paybooc-Bold';}
.top_title h1{padding: 0px 0px 20px 320px;font-size: 45px;font-weight: 500;font-family: 'paybooc-Bold';}
.top_title h1 b{font-weight: 600;}
.top_title .number {margin: 0px 0px 0px 320px;font-size: 26px;border: 1px solid #fff;width: 200px;text-align: center;padding: 20px 10px;line-height: 11px;border-radius: 26px;}
.top_title .time{padding: 10px 0px 20px 320px;}
.fourstep{max-width: 1600px;margin:0 auto;width: 1400px;position: relative;top: 50px;}
.fourstep ul li p.btn{
    color: #fff;
    background: dimgrey;
    width: 150px;
    padding: 7px 0px;
    border-radius: 10px;
    margin: 10px auto;
}
.fourstep ul li h2{font-family: 'paybooc-Bold';}
.fourstep ul li:hover p.btn{background: #2196f3;}
.fourstep ul li:hover h2{color: #2196f3;}
.fourstep ul{display:flex;flex-wrap:nowrap;position: relative;top: 25px;}
.fourstep ul li{flex:1;text-align: center;background: #fff;margin: 6px;height: 231px;box-shadow: 2px 3px 5px #000000;border-radius: 24px;border: 2px solid #eee;}
.main_wrap{max-width: 1600px;width:100%;padding: 10px;margin: 40px auto;}
.main_wrap a{display: block;text-align: center;background:#2196f3;width: 500px;padding: 10px;margin: 0 auto;color: #fff;border-radius: 4px;font-size: 22px;}
.top_header ul{display:flex;flex-wrap:nowrap;width: 1000px;margin: 0 auto;text-align: right;padding: 10px;float: right;}
.top_header ul li{flex:1;text-align: left;}
.top_header ul li a{color:#fff;padding: 7px 0px;font-size: 18px;line-height: 33px;}
.fourstep ul li:hover{border:2px solid #2196f3}
.top_header ul li a.on{color:yellow; border-bottom: 2px solid yellow;}
.top_header ul li a:hover{color:yellow; border-bottom: 2px solid yellow;}
.top_header ul li:nth-child(2){flex:0 0 25%}
.top_header ul li:nth-child(3){flex:0 0 15%}
.top_header{background:#000;padding:10px;height: 45px;}
.member_btn{margin: 5px auto 0px !important;}
.x_banner{background:#000;padding: 0px;width: 100%;}
.x_banner ul{display:flex;flex-wrap:nowrap;width: 1050px;margin:0 auto;}
.x_banner ul li:nth-child(1){flex: 0 0  30%;color:#fff;}
.x_banner ul li:nth-child(1) img{width:60px;position:relative;top: 15px;}
.x_banner ul li:nth-child(1) span{font-size: 38px;position: relative;top: -2px;}
.x_banner ul li:nth-child(2){flex: 0 0  37%;color:#fff;padding: 22px 0px;}
.x_banner ul li:nth-child(3){flex: 0 0  34%;color:#fff;padding: 22px 0px;}
.mobile_btn{display: none;}
.ttbanner {
    font-size: 20px;
}
.fbanner{width:100%; max-width:1200px;  margin:0 auto; text-align: center;}
.fbanner ul{display:flex;flex-wrap:wrap;justify-content: center;}
.fbanner ul li{flex:1;text-align: center;width: 16.6%;padding: 0px;margin: 0px;}

.last_tt{display: none;}
.fbanner_step{width:100%; max-width:1200px;  margin:0 auto;}
.fbanner_step ul{display:flex; flex-wrap:wrap}
.fbanner_step ul li{flex:1;text-align: center;border: 2px solid;margin: 5px;padding: 0px 10px 10px;border-radius: 10px;border-color: #2196f3;font-weight: 600;font-size: 20px;background: #ffffff;color: #2196f3;}
.fbanner_step ul li .step{
    position: relative;
    background: #ffffff;
    padding: 3px 12px;
    color: #2196f3;
    border-radius: 50%;
    font-size: 25px;
    font-weight: 600;
    top: -16px;
    border: 3px solid #fff;
}
.fbanner_step ul li:hover{border-color: red; color:red;}
.fbanner_step ul li:hover .step{color:red;}
.fbanner_step ul li img{width:100px; height:100px; padding: 10px 0px;}
.fbanner_step h1{text-align: center; padding:60px 0px 30px;}
.fbanner h1{text-align: center;padding: 57px 0px 30px;}
.fbanner p{text-align: center;}
.fbanner .pageing{width:100%; max-width:1050px;}
.fbanner.longbanner{background: #f3f4f9; max-width: 1920px;}
.fbanner.longbanner::after{width: 50%; background: red}
.mobile_img{display: none;}
/* ì±—ë´‡ */
.chatbot_wrap{position:fixed; z-index:11; left:10px; bottom:10px;}
.chatbot_xmark{display:none}
.chatbot_iframe_wrap{display:none;position:absolute;width:min(500px, 50vw);height:min(600px, 80dvh);bottom:0;left:0}
.chatbot_wrap.active > .chatbot_iframe_wrap{display:block}
/* 챗봇 이미지 */
.chatbot_icon_btn{position:fixed;left:1%;bottom:6px;background-image:url(/home/img/chatbot_icon_pc.png);width:150px;height:150px;background-size:cover;cursor:pointer;}
.chatbot_icon_btn.active{bottom:20px;background-image:url(/home/img/chabot_mini.png);width:50px;height:50px;}
.chatbot_iframe_wrap .chatbot_icon_xmark{width:18px; position:absolute; display:flex; margin-top:7px; right:11px; opacity:0; cursor:pointer;}
@media screen and (max-width:1764px) {
    .imgicon{display:none}
    .top_title h2{padding: 120px 0px 20px 0px;font-size: 30px;font-family: 'paybooc-Bold'; text-align: center;}
    .top_title h1{padding: 0px 0px 20px 0px;font-size: 4vw;font-weight: 500;font-family: 'paybooc-Bold';text-align: center;}
    .top_title h1 b{font-weight: 600;}
    .top_title .number {
        margin: 0 auto;
        font-size: 26px;
        border: 1px solid #fff;
        width: 200px;
        text-align: center;
        padding: 20px 10px;
        line-height: 11px;
        border-radius: 26px;
    }
    .top_title .time{padding: 10px; text-align: center;}
    .top_title{width:100% !important; max-width:100%;}
    .ttbanner{width:80% !important;}
    .middle_title{width:100% !important;height: 429px;}
    .fourstep{max-width: 1764px;margin:0 auto;width: 100%;position: relative;top: 50px;}
    .fourstep ul li h2{font-family: 'paybooc-Bold';}
    .fourstep ul li:hover p.btn{background: #2196f3;}
    .fourstep ul li:hover h2{color: #2196f3;}
    .fourstep ul{display:flex;flex-wrap:wrap;position: relative;top: 25px;}
    .fourstep ul li{flex: 0 0 23%;text-align: center;background: #fff;margin: 6px;height: 231px;box-shadow: 2px 3px 5px #000000;border-radius: 24px;border: 2px solid #eee;}
    .fbanner{width:100%; max-width:100%;  margin:0 auto;}
    .fbanner .pageing{width:90%; max-width:100%; padding:5px}
    .fbanner.longbanner{background: #e0f7ff; max-width: 100%;}

}
@media screen and (max-width:964px) {
    .chatbot_iframe_wrap{display:none;position:absolute;width:min(500px, 95vw);height:min(600px, 80dvh);bottom:0;left:0}
    /* 챗봇 이미지 */
    .chatbot_icon_btn{position:fixed;left:3%;bottom:55px;background-image:url(/home/img/chatbot_icon_pc.png);width:100px;height:100px;background-size:cover;cursor:pointer;}
    .chatbot_icon_btn.active{left:6%;bottom:55px;background-image:url(/home/img/chabot_mini.png);width:50px;height:50px;}
    .chatbot_iframe_wrap .chatbot_icon_xmark{width:18px; position:absolute; display:flex; margin-top:7px; right:11px; opacity:0; cursor:pointer;}
    .top_header ul{display:flex;flex-wrap:nowrap;width:100%;margin: 0 auto;text-align: center;padding: 10px;}
    .top_header ul li:nth-child(1){display: none;}
    .top_header ul li a.on{color:yellow; border-bottom: 2px solid yellow;}
    .top_header ul li a:hover{color:yellow; border-bottom: 2px solid yellow;}
    .top_header ul li:nth-child(2){flex:1}
    .top_header ul li:nth-child(3){flex:1}
    .top_header ul li{flex:1;text-align: center;}
    .top_header{background:#000;padding:10px;height: 45px;}
    .ttbanner{font-size:2vw}
}


@media screen and (max-width:1340px) {
    .fbanner ul li {
        flex: 0 0 33.33%;
        text-align: center;
        width: 33.33%;
        padding: 0px;
        margin: 0px;
    }
    .middle_title{width:100% !important;height: 100%;}
    .mobile_img{display: block;}
    .member_btn{display: none;}
    .mobile_btn{display: block;}
    .mobile_btn a {
        display: block;
        text-align: center;
        background: #2196f3;
        width: 190px;
        padding: 11px;
        margin: 0 auto;
        position: relative;
        top: 19px;
        color: #fff;
        border-radius: 5px;
        font-size: 20px;
    }
    .fourstep{max-width: 100%;margin:0 auto;width: 100%;position: relative;top: 50px;}
    .fourstep ul li{flex: 0 0 46%;text-align: center;background: #fff;margin: 6px;height: 231px;box-shadow: 2px 3px 5px #d6d4d4;border-radius: 24px;border: 2px solid #eee;}
    .top_title h1 {
        padding: 0px 0px 20px 0px;
        font-size: 5vw;
        font-weight: 500;
        font-family: 'paybooc-Bold';
        text-align: center;
    }
}
@media screen and (max-width:730px) {
    body {
        background: #ffffff;
    }
    .fbanner_step_{}
    .fbanner ul li {
        flex: 0 0 27%;
        text-align: center;
    }
    .fbanner_step ul li{font-size:3vw;}
    .fbanner ul li img{width:100%;}
    .fbanner h1{font-size:7vw;}
    .fbanner_step h1{font-size:7vw;}
    .top_title h2 {
        padding: 55px 0px 20px 0px;
        font-size: 5vw;
        font-family: 'paybooc-Bold';
        text-align: center;
    }
    .top_header ul li a.on {
        color: yellow;
        border-bottom:none;
    }
    .top_header {
        background: #000;
        padding: 10px;
        height: 42px;
    }
    .ttbanner {
        font-size: 12px;
        top: 39px !important;
        width:100% !important;
    }
    .top_title p{font-size: 3vw;}
    .top_header ul li a {
        color: #fff;
        padding: 18px 0px;
        font-size: 3.4vw;
    }
    .fourstep ul {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        top: 25px;
        margin: 10px;
        padding: 0;
    }
    .top_title{color: #fff; background:url(/home/img/jeheu_banner.png) no-repeat;width: 100%; height: auto; margin:0 auto; background-size: cover;}
    .middle_title{background:url(/home/img/m_b2b_member_02.png)no-repeat; width:100%; height: auto; margin:0 auto; background-size: cover;}
    .fourstep{max-width: 100%;margin:0 auto;width: 100%;position: relative;top: 50px;}
    .fourstep ul li {
        flex: 0 0 100%;
        text-align: center;
        background: #fff;
        margin: -2px -2px 16px;
        height: 231px;
        box-shadow: 2px 3px 5px #d6d4d4;
        border-radius: 24px;
        border: 2px solid #eee;
    }

    .x_banner{display: none;}
    .last_tt{display: block;}
}