html, body { overflow-x: auto;}
@font-face { 
    font-family: 'S-CoreDream-9Black';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face { 
    font-family: 'S-CoreDream-5Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face { 
    font-family: 'S-CoreDream-3Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face { 
    font-family: 'S-CoreDream-2ExtraLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.main .body { line-height:1.5; word-break: keep-all;}
.col-group { display:flex;}
.container { height: auto; margin: 0 auto; position: relative;}
body { overflow-y: auto; }

/* ::-webkit-scrollbar { display: none; } */
br.mb-br { display: none;}
.basic-btn { display: flex; justify-content: center; align-items: center; border: solid 1px #fff; width: 230px; height: 56px; letter-spacing: -0.4px; transition: all 0.3s; cursor: pointer; color: #fff;}
.bt-btn { width: 209px; height: 56px; display: inline-block; transition: all 0.3s;}
.pc { display: unset;}
.mb { display: none;}
@media screen and (max-width:1440px) { 
    .container { width: 100%; padding: 0 16px;}
}
@media screen and (max-width:768px) { 
    /* br { display: none;} */
    br.mb-br { display: unset;}
    .pc { display: none;}
    .mb { display: unset;}
}

#main { padding-top: 40px;}
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #fff; box-shadow: 0px 5px 10px #00000029; }
#header .utils { margin-top:30px; display:flex; align-items: center; }
#header .utils .util { font-size:16px; color:#4b4b4b; transition: all .3s;}
#header .utils .util:hover { color:#3552c5;}
#header .utils .deco { margin:0 5px; font-size:16px; color:#707070;}
#admin-header { text-align: center;}
#admin-header .logo { margin:0 auto; padding:20px 0;}
#admin-header .logo img { margin:0 auto;}
#admin-header .boxes { display:flex; height:3.0rem; line-height: 2.0rem; border-radius:36px; overflow:hidden; background-color:#F5F5F5;}
#admin-header .boxes .box { flex:1;}
#admin-header .boxes .box:hover .text { color:#1b1bed;}
#admin-header .boxes .box .text { display:block; padding:14px 0; font-size:20px; align-items: center;}
#admin-header .boxes .box01 { display:flex; align-items: center;}
#admin-header .boxes .box01 .text { flex:1; align-items: center;}
#admin-header .boxes .box01 .text { border-right:4px solid white;}
#admin-header .boxes .box02 { display:flex; justify-content: space-between; align-items: center;}
#admin-header .boxes .box02 > div { flex:1;}
#admin-header .boxes .box02 .left .text { color:#1B1BED;}
#admin-header .boxes .box02 .right { display:flex; align-items: center; justify-content: center;}
#admin-header .boxes .box02 .links { display:flex; align-items: center;}
#admin-header .boxes .box02 .right .deco { margin:0 10px; font-size:12px;}

#user-header { text-align: center;}
#user-header .logo { margin:0 auto; padding:20px 0;}
#user-header .logo img { margin:0 auto;}
#user-header .boxes { display:flex; max-width:1028px; margin:0 auto; border-radius:36px; overflow:hidden; background-color:#F5F5F5;}
#user-header .boxes .box { flex:1;}
#user-header .boxes .box .text { display:block; padding:24px 0; font-size:20px;}
#user-header .boxes .box .text:last-of-type { border-right:none;}
#user-header .boxes .box .text.active { background-color:#1B1BED; color:#fff;}
#user-header .boxes .box01 { display:flex;}
#user-header .boxes .box01 .text { flex:1;}
#user-header .boxes .box01 .text { border-right:4px solid white;}
#user-header .boxes .box02 { display:flex; justify-content: space-between;}
#user-header .boxes .box02 > div { flex:1;}
#user-header .boxes .box02 .left .text { color:#1B1BED;}
#user-header .boxes .box02 .right { display:flex; align-items: center; justify-content: center;}
#user-header .boxes .box02 .links { display:flex; align-items: center;}
#user-header .boxes .box02 .right .deco { margin:0 10px; font-size:12px;}

.gnbs-wrap { margin-top: 120px; }
.gnbs-wrap .wrap > .title { margin-bottom:40px; font-size:32px; font-weight:500; text-align: center;}
.gnbs-wrap .gnb-wrap { padding:15px;}
.gnbs-wrap .gnb-wrap .gnb.active img { opacity:1;}
.gnbs-wrap .gnb-wrap .gnb:hover img { opacity:1;}
.gnbs-wrap .gnb-wrap img { opacity:0.7; transition: all .3s; width:45px; height:45px;}
.gnbs-wrap .gnb { display:block; text-align: center;}
.gnbs-wrap .gnb img { margin:0 auto; margin-bottom:8px;}
.bg-white { background-color:#fff !important;}
.header-wrap { padding:5px 10px; justify-content:space-around; flex-direction:unset; vertical-align:middle;  align-items: center;}
.header-wrap .logo { width:180px; height:auto; }
.header-wrap .gnb { margin-left:auto;}
/* footer */
.footer { padding-top:50px; padding-bottom:80px; background-color: #F5F5F5; text-align: center;}
.footer .links { display:flex; align-items: center; justify-content: center;}
.footer .links .deco { margin:0 7px; font-size:16px;}
.footer .link { font-weight:500;}
.footer .logo { margin:0 auto; margin-bottom:16px;}
.footer .links { margin-bottom:40px;}
.footer .infos { display:flex; justify-content: center; align-items: center; margin-bottom:8px;}
.footer .infos:last-of-type { margin-bottom:0;}
.footer .info { font-size:12px; color:#707070;}
.footer .info:before { content:""; display:inline-block; width:1px; height:8px; margin:0 8px; font-size:6px; background-color:#C1C1C1;}
.footer .info:first-of-type:before { display:none;}
@media screen and (max-width:1440px) { }
@media screen and (max-width:1240px) { 
    #header { max-width:100vw;}
    /* #main { padding-top: 60px; } */
    .header-wrap { padding: 5px 10px 3px;}
    .header-wrap .logo { width: 150px; margin: unset;}
    .header-wrap .logo img { width:100%; }
    .header-wrap .gnb { display: none; }
    .header-wrap .gnb-right li button { height: 56px; width: 56px;}
    .header-wrap .gnb-right li button.login-btn { display: none; }
    .header-wrap .gnb-right li button.sitemap-open { background-color: #fff; border: unset;}
    .header-wrap .gnb-right li button.sitemap-open i { color: #0064a2; }
    .header-wrap .gnb-right .basic-btn.db { display: none;}
    .header-wrap .gnb-right .language-cg { display: none;}

    #admin-header .boxes { flex-wrap:wrap; }
    #admin-header .boxes .box .text { font-size:16px; }
    #admin-header .boxes .box01 { width:100%; flex:auto; }
    #admin-header .boxes .box02 > div { border-right:4px solid #fff; border-top:4px solid #fff; }
    #user-header .boxes { flex-wrap:wrap; }
    #user-header .boxes .box .text { font-size:16px; }
    #user-header .boxes .box01 { width:100%; flex:auto; }
    #user-header .boxes .box02 > div { border-right:4px solid #fff; border-top:4px solid #fff; }
    .gnbs-wrap { margin-top:40px; }
    .gnbs-wrap .wrap > .title { margin-bottom:16px; font-size:20px; }
    .gnbs-wrap .gnbs { flex-wrap:wrap; margin:-10px; }
    .gnbs-wrap .gnb-wrap { padding:10px; }
}

@media screen and (max-width:768px) { 
    .footer .infos { flex-wrap:wrap; }
    .pc { display: none; }
    .mb { display: block; }
    #header .utils .util { font-size:14px; }
}

.m-ratioBox-wrap { width:100%; padding-top:59%; position:relative; border:1px solid #ebebeb; overflow:hidden;}
.m-ratioBox-wrap .m-ratioBox { position:absolute; top:0; left:0; right:0; bottom:0;}
.m-ratioBox-wrap .m-ratioBox:after { content:""; width:64px; height:64px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url("../img/image.png") no-repeat; background-size:100%; opacity:0.4;}
.m-ratioBox-wrap img { width:100%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}
.m-ratioBox-wrap iframe { width:105%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}

/* 팝업 */
.pop-wrap { position: fixed; top: 0; right: 0; left: 0; bottom: 0; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); z-index: 9999; background-color: #000000b3; justify-content: center; align-items: center; display: none;}
.pop-wrap.open { display: flex;}
.pop-wrap .box1 { max-width: 640px; width: 100%; max-height: 748px; height: 100%; border-radius: 30px; border: solid 1px #707070; background-color: #fff; padding:72px; position: relative; overflow: auto; -ms-overflow-style: none;}
/* .pop-wrap .box1::-webkit-scrollbar { display: none;} */
.pop-wrap .close { position: absolute; top: 48px; right: 48px;}
.pop-wrap .close i { font-size: 56px; color: #444c66;}
.pop-wrap .box1 .txt-top { margin-bottom: 24px; max-width: 180px;}

.pop-wrap .box1 .txt-center { color: #444c66; font-size: 17px; line-height: 1.5; opacity: 0.5; margin-bottom: 28px;}
.pop-wrap .box1 .write-wrap { width: 100%; border-radius: 10px; box-shadow: 0 3px 20px 0 #0000001a; margin-bottom: 40px; overflow: hidden;}
.pop-wrap .box1 .write-wrap .write-top { display: flex; height: 72px; align-items: center; padding: 0 24px; justify-content: space-between; border: solid 1px #f5f5f5;}
.pop-wrap .box1 .write-wrap .write-top p { font-size: 18px; font-family: 'S-CoreDream-3'; display: flex; align-items: center; gap: 16px; color: #444c66; letter-spacing: -0.45px;}
.pop-wrap .box1 .write-wrap .write-top p span { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; color: #fff; background-color: #005eff; font-family: 'S-CoreDream-5'; font-size: 20px; border-radius: 3px;}
.pop-wrap .box1 .write-wrap .write-top i { font-size: 32px; color: #d0d5de; transition: all 0.3s;}
.pop-wrap .box1 .write-wrap .write-bottom { padding: 0 24px;}
.pop-wrap .box1 .write-wrap .intx-wrap { display: flex; flex-direction: column;}
.pop-wrap .box1 .write-wrap .intx-wrap li { width: 100%; height: 56px; border-bottom: 1px solid #d0d5de; display: flex; align-items: center; justify-content: space-between;}
.pop-wrap .box1 .write-wrap .intx-wrap li:last-child { border-bottom: 0;}
.pop-wrap .box1 .write-wrap .intx-wrap li label { width: 96px; font-weight: bold; letter-spacing: -0.4px; color: #0f102a;}
.pop-wrap .box1 .write-wrap .intx-wrap li input { width: calc(100% - 96px); letter-spacing: -0.4px; font-weight: 400; padding: 0 16px; border: unset; outline: unset; font-size: 16px;}
.pop-wrap .box1 .write-wrap .intx-wrap li input::placeholder { color: #b7b7bf;}
.pop-wrap .box1 .write-wrap .intx-wrap li.text-wrap { height: auto;}
.pop-wrap .box1 .write-wrap .intx-wrap li textarea { width: calc(100% - 96px); letter-spacing: -0.4px; font-weight: 400; padding: 16px; border: unset; outline: unset; font-size: 16px;}
.pop-wrap .box1 .write-wrap .intx-wrap li textarea::placeholder { color: #b7b7bf;}
.pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap { display: flex; gap: 8px;}
.pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap label { width: auto; font-size: 14px; font-weight: 500; color: #005eff; display: flex; align-items: center;}
.pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap label i { font-size: 16px; margin-left: 8px;}
.pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap label i.xi-check-square { color: #005eff;}
.pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap label i.xi-checkbox-blank { color: #bcbcbc;}
.pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap input { display: none;}
.pop-wrap .box1 .write-wrap .intx-wrap li a { font-size: 14px; font-weight: 500; letter-spacing: -0.35px; color: #bcbcbc; display: flex; gap: 8px;}
.pop-wrap .box1 .write-wrap .intx-wrap li a i { font-size: 14px; color: #bcbcbc;}
.pop-wrap .box1 .request-btn { max-width: 280px; width: 100%; height: 64px; display: flex; justify-content: center; align-items: center; border-radius: 40px; box-shadow: 0 0 20px 0 rgba(110, 163, 255, 0.45); border: solid 2px #ffb000; background-color: #ffb000; color: #fff; font-size: 18px; margin: 0 auto; transition: 0.3s;}
.pop-wrap .box1 .request-btn:hover { background: #fff; color: #ffb000;}
.pop-wrap .box1 .warning { text-align: center; font-size: 14px; font-weight: 500; letter-spacing: -0.35px; color: #e21616; margin-top: 16px;}

.pop-wrap .box2 { max-width: 640px; width: 100%; border-radius: 30px; border: solid 1px #707070; background-color: #fff; padding: 80px; position: relative; flex-direction: column; align-items: center; display: none;}
.pop-wrap .box2.open { display: flex;}
.pop-wrap .box2 > img { width: 48px; height: 48px; margin-bottom: 24px;}
.pop-wrap .box2 h4 { font-size: 32px; font-weight: 400; color: #005eff; width: 100%; text-align: center; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 2px solid #e8e8e8;}
.pop-wrap .box2 p { text-align: center; font-weight: 400; color: #757a89; margin-bottom: 56px;}
.pop-wrap .box2 p span { font-weight: bold; color: #757a89;}
.pop-wrap .box2 .close2 { width: 160px; height: 48px; display: flex; justify-content: center; align-items: center; background-color: #808080; border-radius: 24px; color: #fff; font-size: 18px; letter-spacing: -0.45px;}

@media screen and (max-width:1024px) { 
    .pop-wrap .box1 { padding: 30px 16px; max-width: 400px; max-height: 600px; border-radius: 10px; height: unset; max-height: unset; margin: 0 16px;}
    .pop-wrap .box1 .txt-top { max-width: 140px; margin-bottom: 16px;}
    .pop-wrap .box1 .txt-top span { font-size: 24px;}
    .pop-wrap .box1 .txt-center { font-size: 14px; line-height: 1.43; text-align: center; margin-bottom: 32px;}
    .pop-wrap .box1 .write-wrap { margin-bottom: 40px;}
    .pop-wrap .box1 .write-wrap .write-top { background-color: #005eff; height: 40px;}
    .pop-wrap .box1 .write-wrap .write-top p { font-size: 13px; letter-spacing: -0.33px; color: #fff; font-family: 'S-CoreDream-3';}
    .pop-wrap .box1 .write-wrap .write-top p span { font-size: 13px; color: #005eff; border-radius: 100%; background-color: #fff; width: 24px; height: 24px;}
    .pop-wrap .box1 .write-wrap .write-bottom { padding: 0 16px;}
    .pop-wrap .box1 .write-wrap .intx-wrap li { height: 40px;}
    .pop-wrap .box1 .write-wrap .intx-wrap li label { font-size: 12px; width: 64px;}
    .pop-wrap .box1 .write-wrap .intx-wrap li input { padding: 0 8px; font-size: 12px; width: calc(100% - 64px);}
    .pop-wrap .box1 .write-wrap .intx-wrap li textarea { padding: 8px; font-size: 12px; width: calc(100% - 64px);}
    .pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap label { font-size: 12px;}
    .pop-wrap .box1 .write-wrap .intx-wrap li .ck-wrap label i { margin-left: 4px;}
    .pop-wrap .box1 .write-wrap .intx-wrap li a { font-size: 12px; gap: 4px;}
    .pop-wrap .box1 .write-wrap .intx-wrap li a i { font-size: 12px;}
    .pop-wrap .box1 .request-btn { width: 230px; height: 58px; font-size: 15px; border-radius: 29px; box-shadow: 0 0 10px 0 rgba(110, 163, 255, 0.45); border: solid 2px #ff9900; background-color: #fff; color: #ff9900;}
    .pop-wrap .close { top: 16px; right: 16px;}
    .pop-wrap .close i { font-size: 32px;}
    .pop-wrap .box2 { padding: 30px 16px; max-width: 400px; max-height: 600px; border-radius: 10px; margin: 0 16px;}
}