@charset "UTF-8";           /* 언어세트 선언 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/xpressengine/XEIcon@2.3.3/xeicon.min.css');

*  { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 1rem; color: #333; }
li { list-style: none; }
a { text-decoration: none; color: #333; }
img { vertical-align: middle; }
.clearfix:after { content: ""; display: block; clear: both; }
.inner { width: 1200px; margin: 0 auto; }
html { scroll-behavior: smooth; }

/* -----header----- */
header { position: fixed; width: 100%; height: 80px; left: 0; top:0; background: #fff; border-bottom: 1px solid #ececec; z-index: 99; }
#header { position: relative; }
#m_header { display: none; }
.logo { display: inline-block; line-height: 74px; }
.logo img { height: 70px; }

/* mainmenu */
nav { display: inline-block; width: 83%; margin: 0 auto; }
.gnb { line-height: 80px; text-align: center; font-size: 16px; font-weight: bold; }
.gnb>li { display: inline-block; width: 150px; height: 80px; position: relative; }
.gnb>li:hover a { color: #244c70; }

/* submenu */
.sub { position: absolute; left: 0; top: 78px; width: 150px; font-size: 14px; background: rgba(255,255,255,.8); opacity: 0; transition: all .2s ease-in; }
/* nav:hover .bg { position: absolute; left: 0; top: 80px; width: 100%; height: 160px; background: rgba(255,255,255,0.8); animation: bg 0.5s forwards; } */
.gnb>li:hover .sub { opacity: 1; }
.sub li { line-height: 30px; font-size: 14px; font-weight: normal; }
.sub li:nth-child(2) { margin-top: 10px; }
.sub li:last-child { margin-bottom: 10px; }
.gnb .sub>li>a { color: #333; }
.sub li:hover { font-weight: bold; }
.sub li:hover a { color: #244c70; }
@keyframes bar {
    0% { width: 0%; }
    100% { width: 100%; }
}
@keyframes bg {
    0% { top: 0%; }
    100% { top: 100%; }
}
.under { width: 0; height: 2px; background: #244c70; }
.gnb>li:hover .under { animation: bar 0.5s forwards; }

/* login */
#login h5 { position: absolute; right: 0; top: 20px; font-size: 16px; padding: 8px 34px; border-radius: 5px; background: #333; color: #fff; cursor: pointer; }
#login:hover h5 { background: #244c70; }
.close { position: absolute; right: 20px; top: 16px; font-weight: 200; cursor: pointer; color: #fff; }

.modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); text-align: center; }
.modal .log { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 20%; background: #fff; }
.log h1 { font-size: 38px; font-weight: 500; background: #244c70; line-height: 60px; color: #fff; }
form { padding: 30px 20px; }
p.tt1 { display: block; margin-bottom: 6px; font-size: 16px; text-align: left; }
p.tt1 i { margin-right: 10px; }
input.type { width: 100%; margin-bottom: 16px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background: #f9f9f9; }
input.t2 { margin-bottom: 10px; }
p.tt2 { text-align: left; color: #999; }
input.check { margin-right: 10px; }

.lbtn { display: inline-block; padding: 5px 30px; border-radius: 5px; background: #333; }
.lbtn:hover { background: #244c70; }
.lbtn a { font-size: 18px; font-weight: 300; color:#fff; }

.lo_left { float: left; width: 50%; margin-top: 40px; text-align: center; background: #333; }
.lo_left a { line-height: 46px; color: #fff; }
.lo_left:hover { background: #244c70; }
.lo_right { float: left; width: 50%; margin-top: 40px; text-align: center; background: #333; }
.lo_right a { line-height: 46px; color: #fff; }
.lo_right:hover { background: #244c70; }

/* -----footer----- */
#footer { width: 100%; margin: 0 auto; background: #333; padding: 50px 0; }
.sns img { height: 70px; } 
.sns ul { float: right; margin-top: 22px; }
.sns li { display: inline-block; margin-left: 10px; width: 30px; height: 30px; background: #909090; border-radius: 50%; text-align: center; }
.sns li:hover { background: #244c70; }
.sns li:hover i { color: #fff }
.sns i { margin-top: 5px; font-size: 20px; color: #333; }
.fline { margin: 30px 0; width: 100%; height: 1px; background: #909090; }
.info li { display: inline-block; margin: 0 20px 20px 0; }
.info a { font-size: 14px; color: #fff; }
.info p { line-height: 1.6; font-size: 12px; color: #909090; }

/* -----up botton----- */
.upbtn { position: fixed; right: 3%; bottom: 4%; width: 50px; height: 50px; background: #fff; border-radius: 50%; box-shadow: 0 3px 5px rgba(0,0,0,0.2); text-align: center; }
.upbtn i { line-height: 50px; font-size: 24px; color: #333; }
.upbtn:hover { background: #244c70; }
.upbtn:hover i { color: #fff; }


/* ＊＊＊＊＊＊＊＊＊＊ 반응형 ＊＊＊＊＊＊＊＊＊＊ */
/* Tablet */
@media all and (max-width:1024px) {
    .upbtn { display: none; }
    /* --header-- */
    header { height: 60px; }
    #header { display: none; }
    #m_header { display: inline-block; position: fixed; width: 100%; height: 60px; left: 0; top:0; background: #fff; border-bottom: 1px solid #ececec; z-index: 999; }
    .inner { width: 95%; margin: 0 auto; }
    .logo { line-height: 56px; }
    .logo img { height: 56px; }
    /* --toggle-- */
    #toggle { position: absolute; top: 20px; right: 26px; width: 30px; height: 21px; cursor: pointer; z-index: 1000; }
    #toggle .bar, #toggle .bar:before, #toggle .bar:after { width: 100%; height: 3px; background: #333; }
    #toggle div.bar { position: relative; transform: translateY(9px); transition: all 0.3s 0.3s ease; }
    #toggle div.bar:before { content: " "; position: absolute; bottom: 9px; transition: bottom 0.3s 0.3s ease, transform 0.3s ease; }
    #toggle div.bar:after { content: " "; position: absolute; top: 9px; transition: top 0.3s 0.3s ease, transform 0.3s ease; }
    /* Animation */
    #toggle div.bar.animate { background: rgba(255,255,255, 0); }
    #toggle div.bar.animate:after { top: 0; transform: rotate(45deg); transition: top 0.3s ease, transform 0.3s 0.3s ease; }
    #toggle div.bar.animate:before { bottom: 0; transform: rotate(-45deg); transition: bottom 0.3s ease, transform 0.3s 0.3s ease; }
    /* main_menu */
    #menu.overlay #overlay { position: fixed; top: 60px; right: 0; left: 0; bottom: 0; width: 100%; z-index: 100; transition: all 0.3s ease; }
    #overlay { position: fixed; top: 60px; right: 0; left: 0; bottom: 0; width: 0; overflow: hidden; transition: all 0.3s ease; z-index: 100; background: #fff; }
    nav { position: absolute; top: 40px; right: 40px; text-align: right; }
    .mgnb, .mgnb ul li { margin: 0; padding: 0; display: block; }
    .mgnb { padding: 30px; }
    .mgnb li { opacity: 0; transition: all 0.9s 0s ease; margin-right: 60px; line-height: 2; font-size: 24px; font-weight: 500; }
    .overlay .mgnb li { margin-right: 0; opacity: 1; }
    .mgnb li a { position: relative; display: inline-block; color: #333; transition: all 0.6s 0s ease; }
    .mgnb li a:hover:after { width: 100%; opacity: 1; }
    .mgnb li:nth-child(1) { transition: all 0.9s 0.6s ease; }
    .mgnb li:nth-child(2) { transition: all 0.9s 0.8s ease; }
    .mgnb li:nth-child(3) { transition: all 0.9s 1.0s ease; }
    .mgnb li:nth-child(4) { transition: all 0.9s 1.2s ease; }
    .mgnb li:nth-child(5) { transition: all 0.9s 1.4s ease; }
    /* sub_menu */
    .msub { display: none; }
    .msub li { line-height: 0; }
    .msub li a { line-height: 1.8; font-size: 18px; font-weight: normal; color: #555; }
    .mgnb li.on { color: #244c70; }
    /* login */
    .last { margin-top: 60px; }
    .last h5 { font-size: 18px; color: #999; }
    .modal .log { width: 40%; }
    .close { top: 12px; right: 12px; }
    .close i { font-size: 34px; }
    .lbtn { display: inline-block; padding: 5px 30px; border-radius: 5px; background: #333; }
    .lbtn:hover { background: #244c70; }
    .mgnb li .lbtn a { font-size: 18px; font-weight: 300; color:#fff; }
    p.tt1 { margin-bottom: 0; }
    p.tt2 { font-size: 16px; }
    .lbtn { padding: 0 30px; }
    .last .log .lo_left a { font-size: 16px; font-weight: normal; color: #fff; }
    .last .log .lo_right a { font-size: 16px; font-weight: normal; color: #fff; }
    
}

/* Mobile1 */
@media all and (max-width:780px) {
    .modal .log { width: 50%; }
    .log h1 { font-size: 32px; }
    .lo_left a { font-size: 15px; }
    .lo_right a { font-size: 15px; }
    
}

/* Mobile2 */
@media all and (max-width:430px) {
    .modal .log { width: 80%; }
}

/* Mobile3 */
@media all and (max-width:320px) {
    .modal .log { width: 95%; }
}