@charset "UTF-8";
@import url("font.css");

*{margin:0; padding:0}
html, body { font-size:15px; font-family:"Noto Sans KR", sans-serif; overflow-x: hidden; background-color:#f9f9f9; }
button, input, select, textarea {  font-family:"Noto Sans KR", sans-serif; font-size:1em; }
form { position:relative; }

#wrap { width:100%; overflow: hidden; }
#header, #mainVisual, #subVisual, #container, #foot{ width:100%; position:relative; }
#prestep-wrap { width:100%; overflow: hidden; height:100%; }
.inner { position:relative; max-width:1280px; height:100%; margin:0 auto }

#header { height:104px; background-image:url(../images/header_bg.png);}
#header .inner { display:flex; align-items: center; justify-content: space-between; white-space: nowrap;}
#header .header-left { display:flex; align-content: center; align-items:center; height:100%;}
#header .header-left #header-logo { }
#header .header-left #header-logo a { display:block; max-width:173px; /*width:173px; height:68px; background-image:url(../images/h_logo_chang.png); background-position:center; background-repeat:no-repeat;*/ }
#header .header-left .head-info { margin-left:15px; }
#header .header-left .head-info em { display:block; font-size:1em; font-weight:600; color:#fff; letter-spacing: -0.05em; line-height:1.4; }
#header .header-left .head-info p { margin-top:5px; color:rgba(255,255,255,0.6); font-size:0.9em;}

#prestep-wrap #header { background-image:url(../images/pre_header_bg.png); } 

#gnb { height:100%;}
#gnb ul.depth1 { display:flex; align-items: center; align-content: center;}
#gnb ul.depth1 li.depth1-item { display:flex; align-items: center; height:104px; box-sizing: border-box; }
#gnb ul.depth1 li.depth1-item .depth-wrap { position:relative; height:104px; white-space: nowrap;}
#gnb ul.depth1 li.depth1-item .depth-wrap a.d1 { display:block; color:#fff; font-size:1.2em; letter-spacing:-0.025em; line-height:104px; padding:0 40px; }
#gnb ul.depth1 li.depth1-item.on .depth-wrap a.d1 { font-weight:600; }
#gnb ul.depth1 li.depth1-item .depth-wrap .depth2 { display:none; position:absolute; left:0; background-color:#004796; z-index:9999; width:100%; box-sizing: border-box; padding:15px 0; }
#gnb ul.depth1 li.depth1-item .depth-wrap .depth2.on { display:block; }
#gnb ul.depth1 li.depth1-item .depth-wrap .depth2 ul {  }
#gnb ul.depth1 li.depth1-item .depth-wrap .depth2 ul li.active a { color:#fff; }
#gnb ul.depth1 li.depth1-item .depth-wrap .depth2 ul li a { display:block; color:rgba(255,255,255,0.5); font-size:0.9em; padding:8px 0; text-align: center; }
#gnb ul.depth1 li.depth1-item .depth-wrap .depth2 ul li a:hover { color:#fff; }

#prestep-wrap #gnb ul.depth1 li.depth1-item .depth-wrap a.d1 { color:#a1a9af; }
#prestep-wrap #gnb ul.depth1 li.depth1-item.on .depth-wrap a.d1 { color:#fff; }


#h-utils { display:flex; align-items: center;  }
#h-utils .login-box { position:relative; z-index:3; }
#h-utils button.login-util { position:relative; background-color:#fff; z-index:2; height:40px; border-radius:40px; border:none; padding:0 35px; box-sizing: border-box; font-weight:500; cursor:pointer; line-height:1; font-size:0.95em; }
#h-utils button.login-util.on { box-shadow:0 3px #ddd; }
#h-utils button.login-util:hover { background-color:#f2f2f2; }
#h-utils button.login-util::before { content:""; display:block; width:21px; height:20px; background-image:url(../images/i_login.png); background-repeat:no-repeat; background-position:center; position:absolute; left:12px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50); -moz-transform: translateY(-50%); }
#h-utils button.login-util::after { content:""; display:block; width:8px; height:5px; background-image:url(../images/i_droparrow.png); background-repeat:no-repeat; background-position:center; position:absolute; right:15px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50); -moz-transform: translateY(-50%); }
#h-utils .login-menu { background-color:#ffffff; position:absolute; z-index: 1; left:0; top:0; border-radius:20px; box-sizing: border-box; box-sizing: border-box; height:40px; transition: all 0.5s; }
#h-utils .login-menu.on {  height:120px; padding:50px 10px 25px 10px; transition: all 0.5s; box-shadow:0 0 2px #ddd; }
#h-utils .login-menu ul li { margin-bottom:5px; }
#h-utils .login-menu ul li:last-child { margin-bottom:0; }
#h-utils .login-menu ul li a { display:block; opacity: 0; transition: opacity 0.5s; font-size:0.95em; color:#000; text-align: center; letter-spacing: -0.025em; padding:5px 0; }
#h-utils .login-menu.on ul li a { opacity: 1; transition: opacity 0.5s; }

#h-utils a.ac-notice { position:relative; display:block; width:21px; height:24px; background-image:url(../images/i_bell.png); background-repeat:no-repeat; margin-left:20px; }
#h-utils a.ac-notice span { position:absolute; right:-10px; top:-10px; display:block; width:20px; height:20px; line-height:20px; text-align: center; font-size:0.8em; background-color:#005fc8; color:#fff; border-radius:50%; }
#h-utils a.ac-notice:hover { animation: ring 4s ease-in-out; transform-origin: 50% 4px; }

#s-footer { display:flex; justify-content: center; align-items: center; width:100%; height:70px; background-color:#1a252d; }
#s-footer p { color:rgba(255,255,255,0.3); }

#s-footer1 { display:flex; justify-content: center; align-items: center; width:100%; height:70px; background-color:#353942; }
#s-footer1 p { color:rgba(255,255,255,0.5); }

@keyframes ring {
    0% { transform: rotate(0); }
    1% { transform: rotate(30deg); }
    3% { transform: rotate(-28deg); }
    5% { transform: rotate(34deg); }
    7% { transform: rotate(-32deg); }
    9% { transform: rotate(30deg); }
    11% { transform: rotate(-28deg); }
    13% { transform: rotate(26deg); }
    15% { transform: rotate(-24deg); }
    17% { transform: rotate(22deg); }
    19% { transform: rotate(-20deg); }
    21% { transform: rotate(18deg); }
    23% { transform: rotate(-16deg); }
    25% { transform: rotate(14deg); }
    27% { transform: rotate(-12deg); }
    29% { transform: rotate(10deg); }
    31% { transform: rotate(-8deg); }
    33% { transform: rotate(6deg); }
    35% { transform: rotate(-4deg); }
    37% { transform: rotate(2deg); }
    39% { transform: rotate(-1deg); }
    41% { transform: rotate(1deg); }
    43% { transform: rotate(0); }
    100% { transform: rotate(0); }
}


/* Layer Popup */
.layer_popup_wrap { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:10000; }
.layer_popup_wrap.show { display:block; }
.layer_popup_wrap .layer_popup { height:100%; padding:10px; }
.layer_popup_wrap .layer_popup .layer_popup_window { display:none; width:100%; max-width:800px; height:100%; max-height:700px; margin:0px auto; background:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; overflow:hidden;}
.layer_popup_wrap .layer_popup .layer_popup_window.short { max-height:600px; }
.layer_popup_wrap .layer_popup .layer_popup_window.show { display:block; }


/* Layer Popup Simple */
.layer_popup_wrap .layer_popup .layer_popup_simple { display:none; width:100%; max-width:1280px; height:100%; margin:0px auto; }
.layer_popup_wrap .layer_popup .layer_popup_simple.show { display:table; table-layout:fixed; }
.layer_popup_wrap .layer_popup .layer_popup_simple .popup_box_wrap { display:table-cell; width:100%; max-width:1280px; vertical-align:middle;  }
.layer_popup_wrap .layer_popup .layer_popup_simple .popup_box_wrap .popup_box { position:relative; width:100%; max-height:100%; margin:0 auto;  }

.layer_popup_wrap .layer_popup .layer_popup_simple .popup_box_wrap .popup_box .popup_top { background-color:#00234b; padding:20px; color:#fff; font-size:1.3em; line-height:1; text-align:center; height:60px; box-sizing: border-box; }
.layer_popup_wrap .layer_popup .layer_popup_simple .popup_box_wrap .popup_box .popup_content { background-color:#fff; padding:25px; box-sizing: border-box;}

.layer_popup_simple .popup_box_wrap .popup_box .title_popup_box { padding-bottom:12px; border-bottom:1px solid #ddd; font-family:"NanumSquare", "NanumGothic", sans-serif; font-weight:700; font-size:20px; color:#00a6ff; word-break:keep-all; }
.layer_popup_simple .popup_box_wrap .popup_box .poup_box_content { padding-top:15px; }
.layer_popup_simple .popup_box_wrap .popup_box .poup_box_content * { word-break:keep-all; }
.layer_popup_simple .popup_box_wrap .popup_box .popup_1day_close { margin-top:20px; text-align:center; }
.layer_popup_simple .popup_box_wrap .popup_box .close_popup { position:absolute; right:25px; top:18px; display:block; width:25px; height:25px; overflow:hidden; text-indent:-9999px; }
.layer_popup_simple .popup_box_wrap .popup_box .close_popup:before { content:""; position:absolute; left:0px; right:0px; top:12px; height:1px; background-color:#ebeef1; transform:translate3D(0,0px,0) rotate(-45deg); }
.layer_popup_simple .popup_box_wrap .popup_box .close_popup:after { content:""; position:absolute; left:0px; right:0px; bottom:12px; height:1px; background-color:#ebeef1; transform:translate3D(0,0px,0) rotate(45deg); }
.layer_popup_simple .popup_box_wrap .popup_box .close_popup:hover:before, .layer_popup_wrap .layer_popup .layer_popup_window .lp_top .close_popup:hover:after { background:#ebeef1; }

#find-id.layer_popup_simple .popup_box_wrap .popup_box .close_popup:before, #find-pw.layer_popup_simple .popup_box_wrap .popup_box .close_popup:before  { background-color:#141414; }
#find-id.layer_popup_simple .popup_box_wrap .popup_box .close_popup:after, #find-pw.layer_popup_simple .popup_box_wrap .popup_box .close_popup:after { background-color:#141414;  }
#find-id.layer_popup_simple .popup_box_wrap .popup_box .close_popup:hover:before, #find-id.layer_popup_wrap .layer_popup .layer_popup_window .lp_top .close_popup:hover:after, #find-pw .layer_popup_simple .popup_box_wrap .popup_box .close_popup:hover:before, #find-pw.layer_popup_wrap .layer_popup .layer_popup_window .lp_top .close_popup:hover:after { background:#141414; }

#login-wrap { width:100%; height:100vh; background-image:url(../images/login_bg.jpg); background-size:cover; background-position:center bottom 25% }
#login-wrap .login-con { position:absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); }
#login-wrap .login-con .login-box { display:flex; width:1280px; height:640px; background-color:#fff; }
#login-wrap .login-con .login-box .login-left { position:relative; width:710px; height:100%; background-color:#e9f4ff; background-repeat:no-repeat; background-image:url(../images/login_left_bg.png); background-position: center bottom -10px; }
#login-wrap .login-con .login-box .login-left .logo { position:absolute; left:50px; top:50px;  }
#login-wrap .login-con .login-box .login-left .tit { width:100%;  padding-top:180px; }
#login-wrap .login-con .login-box .login-left .tit em { display:block; text-align: center; letter-spacing: -0.075em; font-size:2.4em; font-weight:600; }
#login-wrap .login-con .login-box .login-left .tit em span { color:#014b95; }
#login-wrap .login-con .login-box .login-left .tit p { text-align: center; letter-spacing: -0.025em; color:#444444; font-size:1.3em; font-weight:400; margin-top:20px; }
#login-wrap .login-con .login-box .login-right { width:570px; display:flex; align-items: center; padding:0 80px; box-sizing: border-box; }
#login-wrap .login-con .login-box .login-right .login-form { width:100%; }
#login-wrap .login-con .login-box .login-right .login-form .tit { text-align: center; font-size:2.2em; font-weight:600; letter-spacing: -0.05em; margin-bottom:40px; }
#login-wrap .login-con .login-box .login-right .login-form .input-box { position:relative; width:100%; height:55px;  border:1px solid #dadada; box-sizing: border-box; margin-bottom:10px; }
#login-wrap .login-con .login-box .login-right .login-form .input-box i { position:absolute; left:0; top:0; display:block; width:55px; height:55px; border-right:1px solid #dadada;  box-sizing: border-box; background-position:center; background-repeat:no-repeat; }
#login-wrap .login-con .login-box .login-right .login-form .input-box i.ico-id { background-image:url(../images/ico_id.png); }
#login-wrap .login-con .login-box .login-right .login-form .input-box i.ico-pw { background-image:url(../images/ico_pw.png); }
#login-wrap .login-con .login-box .login-right .login-form .input-box input { border:none; width:calc(100% - 55px); height:53px; line-height:53px; margin-left:55px; padding:8px 10px; box-sizing: border-box;}
#login-wrap .login-con .login-box .login-right .login-form .save-id { margin-bottom:50px; }
#login-wrap .login-con .login-box .login-right .login-form .save-id input[type="checkbox"] { width:20px; height:20px; margin:0; vertical-align: middle;}
#login-wrap .login-con .login-box .login-right .login-form .save-id label { display:inline-block; vertical-align: middle; line-height:1; margin-left:5px; color:#444; }
#login-wrap .login-con .login-box .login-right .login-form button.login { width:100%; background-color:#001c54; color:#fff; font-weight:600; border:none; line-height:1; padding:20px 0; font-size:1.1em; cursor:pointer }
#login-wrap .login-con .login-box .login-right .login-form .find-btns { text-align:center; margin-top:25px; }
#login-wrap .login-con .login-box .login-right .login-form .find-btns a { position:relative; display:inline-block; padding-right:15px; line-height:1; color:#444; }
#login-wrap .login-con .login-box .login-right .login-form .find-btns a:last-of-type { border-left:1px solid #ddd; padding-left:15px; padding-right:0; }
#login-wrap p.copy { text-align:center; color:#fff;  margin-top:40px; font-weight:300; }

#find-id, #find-pw { max-width:490px }
.find-pop { padding:45px; }
.find-pop i { width:58px; height:51px; display:block; margin:0 auto 20px auto; background-repeat:no-repeat; background-position:center; }
.find-pop i.i-findpw { background-image:url(../images/i_findpw.png); }
.find-pop i.i-findid { background-image:url(../images/i_findid.png); }
.find-pop em { display:block; font-size:1.4em; letter-spacing:-0.05em; font-weight:500; text-align: center; }
.find-pop p { letter-spacing: -0.025em; color:#666; text-align: center; line-height:1.3; margin:10px 0 30px 0; }
.find-pop input[type="text"] { display:block; width:100%; padding:10px 20px; height:55px; box-sizing: border-box; border:1px solid #ddd; margin:10px 0; }
.find-pop .find-btn { width:100%; background-color:#001c54; color:#fff; font-weight:400; border:none; line-height:1; padding:20px 0; font-size:1em; cursor:pointer}
.find-pop .find-result .result { border:1px solid #ddd; padding:20px 0; margin-bottom:10px; }
.find-pop .find-result .result p { margin:0; }
.find-pop .find-result .result p strong { font-weight:500; color:#000; }
.find-pop .find-result .result p span { font-weight:500; color:#00a6ff; font-size:17px; }
.find-pop .find-result .close-change { display:block; width:100%; background-color:#001c54; color:#fff; font-weight:400; border:none; line-height:1; padding:20px 0; font-size:1em; cursor:pointer; text-align: center;}

.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt25 { margin-top:25px; }
.mt30 { margin-top:30px; }
.mt35 { margin-top:35px; }
.mt40 { margin-top:40px; }
.mt45 { margin-top:45px; }
.mt50 { margin-top:50px; }
.mt55 { margin-top:55px; }
.mt60 { margin-top:60px; }
.mt65 { margin-top:65px; }
.mt70 { margin-top:70px; }
.mt75 { margin-top:75px; }
.mt80 { margin-top:80px; }
.mt85 { margin-top:85px; }
.mt90 { margin-top:90px; }
.mt95 { margin-top:95px; }
.mt100 { margin-top:100px; }

.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb25 { margin-bottom:25px; }
.mb30 { margin-bottom:30px; }
.mb35 { margin-bottom:35px; }
.mb40 { margin-bottom:40px; }
.mb45 { margin-bottom:45px; }
.mb50 { margin-bottom:50px; }
.mb55 { margin-bottom:55px; }
.mb60 { margin-bottom:60px; }
.mb65 { margin-bottom:65px; }
.mb70 { margin-bottom:70px; }
.mb75 { margin-bottom:75px; }
.mb80 { margin-bottom:80px; }
.mb85 { margin-bottom:85px; }
.mb90 { margin-bottom:90px; }
.mb95 { margin-bottom:95px; }
.mb100 { margin-bottom:100px; }

.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml25 { margin-left:25px; }
.ml30 { margin-left:30px; }
.ml35 { margin-left:35px; }
.ml40 { margin-left:40px; }
.ml45 { margin-left:45px; }
.ml50 { margin-left:50px; }
.ml55 { margin-left:55px; }
.ml60 { margin-left:60px; }
.ml65 { margin-left:65px; }
.ml70 { margin-left:70px; }
.ml75 { margin-left:75px; }
.ml80 { margin-left:80px; }
.ml85 { margin-left:85px; }
.ml90 { margin-left:90px; }
.ml95 { margin-left:95px; }
.ml100 { margin-left:100px; }

.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }
.mr25 { margin-right:25px; }
.mr30 { margin-right:30px; }
.mr35 { margin-right:35px; }
.mr40 { margin-right:40px; }
.mr45 { margin-right:45px; }
.mr50 { margin-right:50px; }
.mr55 { margin-right:55px; }
.mr60 { margin-right:60px; }
.mr65 { margin-right:65px; }
.mr70 { margin-right:70px; }
.mr75 { margin-right:75px; }
.mr80 { margin-right:80px; }
.mr85 { margin-right:85px; }
.mr90 { margin-right:90px; }
.mr95 { margin-right:95px; }
.mr100 { margin-right:100px; }

.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt25 { padding-top:25px; }
.pt30 { padding-top:30px; }
.pt35 { padding-top:35px; }
.pt40 { padding-top:40px; }
.pt45 { padding-top:45px; }
.pt50 { padding-top:50px; }
.pt55 { padding-top:55px; }
.pt60 { padding-top:60px; }
.pt65 { padding-top:65px; }
.pt70 { padding-top:70px; }
.pt75 { padding-top:75px; }
.pt80 { padding-top:80px; }
.pt85 { padding-top:85px; }
.pt90 { padding-top:90px; }
.pt95 { padding-top:95px; }
.pt100 { padding-top:100px; }