/*
2023-11-29  LEE

모든 페이지에 사용되는 스타일





*/



/* 'Noto Sans KR' 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');



body { padding:0; margin:0; box-sizing:border-box; }
body * { box-sizing:border-box; font-family:'Noto Sans KR'; background-repeat:no-repeat; background-position:center center; letter-spacing:-0.05em; word-spacing:-0.1em; }
input, select, textarea { outline:none; }
a { cursor:pointer; text-decoration:none; }
a:link { color:#585858; }
a:visited { color:#585858; }
a:hover { color:#2b2bff; }
a:active { color:#585858; }



/* 바탕 화면 - 화면을 락하면 바탕이 스크롤 되지 않도록 하는 역활 */
body > div.ground {
    left:0;
    top:0;
    width:100%;
    height:100%;
    position:fixed;
    overflow:auto;
    scroll-behavior:smooth;
}

/* 1100px 중앙 정렬 */
.width-1100 {
    width:1100px;
    height:100%;
    margin:auto;
}

/* 상단 메뉴 영역 START --------------------------------------------------------------------------- */
.flo-top-menu {
    height:99px;
    background-color:var(--main-color);
    border-bottom:1px solid rgba(255, 255, 255, 0.3);
}
.flo-top-menu > .center-line {
    background-color:var(--main-color);
    display:flex;
    align-items:center;
}
.flo-top-menu > .center-line > div {
    text-align:center;
    font-size:17px;
    font-weight:bold;
}
.flo-top-menu > .center-line > div > a {
    color:#ffffff;
}
.flo-top-menu > .center-line > .logo {
    width:200px;
    height:50px;
    flex-shrink:0;
    cursor:pointer;
    background-image:var(--bg-top-logo);
    background-position: left center;
 }
.flo-top-menu > .center-line > .menu {
    flex-grow:1;
    display:flex;
    justify-content:center;
}
.flo-top-menu > .center-line > .menu > a {
    padding:7px 0;
    border-top:2px solid var(--main-color);
    border-bottom:2px solid var(--main-color);
}
.flo-top-menu > .center-line > .menu > a:hover {
    border-bottom:2px solid #a3b6ef;
}
.flo-top-menu > .center-line > .login {
    width:160px;
    flex-shrink:0;
    padding-left:50px;
}
.flo-top-menu > .center-line > .login > a {
    color:#ffffff;
}
.flo-top-menu > .center-line > .membership {
    width:110px;
    height:40px;
    flex-shrink:0;
    background-color:#ffffff;
    color:var(--main-color);
    border-radius:3px;
    cursor:pointer;
    padding-bottom:2px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.flo-top-menu > .center-line > .service {
    background-image:var(--bg-arrow-down);
    background-position:130px center;
}
.flo-top-menu > .center-line > .service:hover {
    background-image:var(--bg-arrow-up);
}
/*
.flo-top-menu > .center-line > .blog {
    background-image:var(--bg-arrow-link);
    background-position:93px center;
}
*/
/* 제공 서비스 drop & down 메뉴 */
#dropdown-service {
    position:relative;
    display:inline-block;
}

#dropdown-service > .dropbtn {
    color:#ffffff;
    font-size:17px;
    padding:12px 0;
    cursor:default;
}

#dropdown-service > .dropdown-content {
    width:160px;
    border-radius:10px;
    display:none;
    position:absolute;
    background-color:#ffffff;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1;
    text-align:left;
    padding:15px;
    transform: translate(-30px, 0);
}

#dropdown-service > .dropdown-content > a {
    color:black;
    display:block;
    font-size:15px;
    padding:5px;
    color:#3c3c3c;
    padding-bottom:10px;
}

#dropdown-service > .dropdown-content > a:hover { color:var(--main-color); }
#dropdown-service:hover > .dropdown-content { display:block; }
/* 상단 메뉴 영역 END ----------------------------------------------------------------------------- */



/* 하단 영역 START -------------------------------------------------------------------------------- */
.flo-bottom {
    height:645px;
    background-color:#333333;
}
.flo-bottom > .center-line {
    background-color:#333333;
}
/* 하단 영역의 중간 회색바 윗쪽 부분 */
.flo-bottom > .center-line > .top {
    display:flex;
    padding:80px 0 48px 0;
    justify-content: space-between;
    border-bottom:1px solid #505050;
}

/* 제공서비스 / 가격 / Q&A / 이용안내 */
.flo-bottom > .center-line > .top > .left {
    width:604px;
    display:flex;
    flex-wrap: wrap;
}
.flo-bottom > .center-line > .top > .left > div {
    width:151px;
    height:30px;
    color:#999999;
    font-size:16px;
    padding:17px 0;
}
.flo-bottom > .center-line > .top > .left > div.title {
    width:151px;
    height:30px;
    color:#ffffff;
    font-size:17.5px;
    font-weight:bold;
    margin-bottom:10px;
}
.flo-bottom > .center-line > .top > .left > div > a {
    color:#999999;
}
.flo-bottom > .center-line > .top > .left > div > a:hover {
    color:#ffffff;
}

/* 전화번호, 근무시간, 계좌번호 */
.flo-bottom > .center-line > .top > .right {
    width:318px;
}
/* CS CENTER */
.flo-bottom > .center-line > .top > .right > .cs-center {
    font-size:18px;
    font-weight:bold;
    color:#999999;
    padding:17px 0 0 20px;
}
/* 전화번호 */
.flo-bottom > .center-line > .top > .right > .phone-number {
    height:50px;
    background-image:var(--phone-number);
    background-position:20px center;
}
/* 근무시간 */
.flo-bottom > .center-line > .top > .right > .working-hours {
    font-size:15px;
    color:#ffffff;
    padding:0 0 14px 20px;
    line-height:1.65;
    border-bottom:1px solid #505050;
}
/* 결제계좌(text) */
.flo-bottom > .center-line > .top > .right > .payment-account {
    font-size:18px;
    color:#999999;
    font-weight:bold;
    padding:18px 0 0 20px;
}
/* 계좌번호 */
.flo-bottom > .center-line > .top > .right > .account-number {
    font-size:15px;
    color:#ffffff;
    padding:4px 0 0 20px;
}



/* 하단 영역의 중간 회색바 아랫쪽 부분 */
.flo-bottom > .center-line > .bottom {
    display:flex;
    justify-content: space-between;
}
/* 회사소개 / 개인정보취급방침 / 스팸메일정책 / 이용약관 / 소개자료 / 서비스문의 */
.flo-bottom > .center-line > .bottom > .left {
    width:780px;
}
.flo-bottom > .center-line > .bottom > .left > .link {
    display:flex;
    padding-top:45px;
}
.flo-bottom > .center-line > .bottom > .left > .link > div {
    font-size:15px;
    color:#999999;
    padding-right:33px;
}
.flo-bottom > .center-line > .bottom > .left > .link > .introduction-material {
    background-image:var(--bg-link-gray);
    background-position:59px center;
    padding-right:54px;
}
.flo-bottom > .center-line > .bottom > .left > .link > div > a {
    color:#999999;
}
.flo-bottom > .center-line > .bottom > .left > .link > div > a:hover {
    color:#ffffff;
}

/* 주소, 카피라이트 */
.flo-bottom > .center-line > .bottom > .left > .bottom-text {
    padding-top:15px;
    color:#999999;
    font-size:14px;
    line-height:2;
}
/* SNS */
.flo-bottom > .center-line > .bottom > .left > .sns {
    width:100px;
    height:28px;
    background-image:var(--sns);
    background-position: left center;
    display:flex;
    justify-content: space-between;
    margin-top:10px;
}
.flo-bottom > .center-line > .bottom > .left > .sns > a {
    width:28px;
    height:28px;
    display:block;
    cursor:pointer;
}

/* 인증서 */
.flo-bottom > .center-line > .bottom > .right {
    width:305px;
    padding:42px 0 0 3px;
}
.flo-bottom > .center-line > .bottom > .right > .certification {
    width:258px;
    height:50px;
    background-position: center center;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.flo-bottom > .center-line > .bottom > .right > .certification > .certification-nice {
    width:50px;
    height:50px;
    background-image:var(--background-image);
    cursor:pointer;
}
.flo-bottom > .center-line > .bottom > .right > .certification > .certification-cleanspam {
    width:50px;
    height:50px;
    background-image:var(--background-image);
    cursor:pointer;
}
.flo-bottom > .center-line > .bottom > .right > .certification > .certification-sectigo {
    width:128px;
    height:50px;
    background-image:var(--background-image);
    cursor:pointer;
}
/* 하단 영역 END ---------------------------------------------------------------------------------- */



/* alert 창 START --------------------------------------------------------------------------------- */
#BNESA-alert {
    width:590px;
    height:400px;
    position:fixed;
    top:50%;
    left:50%;
    background-color:#5c5c5c;
    transform: translate(-50%, -50%);
    display:block;
    z-index:15;
}
#BNESA-esc {
    width:65px;
    height:45px;
    background-color:#2e2e2e;
    background-image:var(--x-button-24);
    margin-left:calc(100% - 65px);
    font-weight:bold;
    color:#ffffff;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}
#BNESA-message {
    width:100%;
    height:calc(100% - 45px - 80px);
    background-color:#ffffff;
    background-position:center 60px;
    padding-top:160px;
    text-align:center;
    line-height:1.8;
    font-size:14px;
}
#BNESA-message > a {
    color:#3939ff;
    font-size:16px;
    font-weight:bold;
}
#BNESA-message > b, #BNESA-message > strong {
    font-size:16px;
}
#BNESA-button {
    height:80px;
    background-color:#ffffff;
    display:flex;
    justify-content: center;
    align-items: flex-start;
}
#BNESA-button > div {
    width:150px;
    height:40px;
    margin:0 5px;
    border-radius:10px;
    color:#ffffff;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}
#BNESA-button > #BNESA-act {
    display:flex;
    background-color:#1d61e2;
}
#BNESA-button > #BNESA-close {
    background-color:#474c5c;
}
/* alert 창 END ----------------------------------------------------------------------------------- */



/* 팝업 - 서비스취지, 이용약관, 안내메일 수신, 개인정보취급방침, 등 START ......................... */
#GNNBB-popup-800 {
    top:50%;
    left:50%;
    width:800px;
    position:fixed;
    background-color:#156fbb;
    transform: translate(-50%, -50%);
    padding:1px;
    z-index:15;
    display:none;
}
#GNNBB-popup-800 > .top {
    width:100%;
    height:70px;
    display:flex;
}
#GNNBB-popup-800 > .top > .title {
    font-size:30px;
    font-weight:bold;
    color:#ffffff;
    padding-left:70px;
    flex-grow: 1;
    display:flex;
    justify-content: center;
    align-items: center;
}
#GNNBB-popup-800 > .top > .button {
    width:70px;
    height:70px;
    background-image:var(--x-button-24);
    cursor:pointer;
    flex-shrink: 0;
}
#GNNBB-popup-800 > .body {
    padding:40px;
    background-color:#ffffff;
}
#GNNBB-popup-800 > .body > iframe {
    width:100%;
    height:650px;
}
/* 팝업 - 서비스취지, 이용약관, 안내메일 수신, 개인정보취급방침, 등 END ........................... */