@charset "utf-8";



.wrapper { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

/* skip navi */
#skip { width:100%; margin:0 auto; position:relative;}
#skip ul {position:absolute; z-index:999;}
#skip ul a {float:left; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center; white-space:nowrap; font-size:0.688em; display: block;}
#skip ul a:focus, #accessibility a:active {top:10px; height:auto; width:1080px; padding:10px 0; margin:0 auto; font-weight:bold; background:#000; color:#fff;}


#header { width: 100%; display: flex; justify-content: space-between; box-sizing: border-box;   left: 0; top: 0; z-index: 9999; border-bottom: 1px solid #6ccff6;  }
#header h1#logo { width: 300px; padding: 10px 0; }
#header h1#logo a { display: block; margin: 0 auto; overflow: hidden; width: 100%; }
#header h1#logo a img { display: block; width: 100%; margin: 0 auto; }


#header > .wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}

/* nav#gnb { width: calc(100% - 400px); } */
nav#gnb { width: calc(100% - 320px); } 
nav#gnb ul.wrapper { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; align-items: center; } 
nav#gnb ul.wrapper > li { width: 100%; position: relative; box-sizing: border-box;display: flex; align-items: center; justify-content: center; } 
/* nav#gnb ul.wrapper > li:hover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 5px; background: #7f3c8c; } */
nav#gnb ul.wrapper > li > a {  word-break: keep-all; display: block; text-align: center; padding: 30px 10px; box-sizing: border-box; width: 100%; font-size: 1.2em;
line-height: 1.4; color: #0f1257; } 

nav#gnb .subGnb {
  display: none;
  padding: 20px 0;
  box-sizing: border-box;
  position: absolute;
  top: 87px;
  left: 0;
  width: 100%;
  z-index: 9998;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(15, 18, 87, 0.15);
}
nav#gnb .subGnb li { text-align: center; line-height: 2.2;  }
nav#gnb .subGnb li a { display: block; }




#header .gnb_m_open { position:absolute; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0px; color:transparent; line-height:0; right:9999px; top:-9999px; overflow:hidden; }

#all_menu { display:none; }

.container { padding: 00px 0 40px; }
.container .wrapper { width: 100%; max-width: 1400px; margin: 0 auto; position: relative; }


#footer {  background: #0f1257;  }
#footer #btmGnb { padding: 12px 0; text-align: center;  }
#footer #btmGnb .wrapper > ul li { display: inline-block; }
#footer #btmGnb .wrapper > ul li a { font-size: 0.875em; color: #fff; }
#footer #btmGnb .wrapper > ul li:last-child::after { display: none; }
#footer #btmGnb .wrapper > ul li::after { content: '|'; font-size: 0.875em; margin: 0 19px; vertical-align: baseline; }

#footer .addBox { color: #bbe5f3; }
#footer .addBox .wrapper { padding: 15px 0; font-size: 0.875em; line-height: 1.9; text-align: center;  }
#footer address span { padding-left: 15px;}










/* 메인 */
.mainCon { background: url('../img/mainBg.png') no-repeat center top; 
  background-size: cover; padding: 40px 0 40px; }
  
.mainCon .wrapper { max-width: 1200px; }


.mainTop { display: flex; justify-content: space-between; flex-wrap: wrap; }
.mainTop .mainTxt { width: 100%; text-align: center; margin: 0 auto 40px; }
.mainTop .mainTxt img { width: 100%; max-width: 700px; display: block; margin: 0 auto; }

.mainTop .mainInfo { width: 100%; max-width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.mainTop .mainInfo dl { width: 100%; display: flex; padding: 10px 25px; box-sizing: border-box; border: 1px solid #fff; border-radius: 100px; font-size: 1.125em; color: #fff;  margin: 0 auto 10px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,1); box-shadow:0 8px 24px rgba(15,18,87,0.15);  }
.mainTop .mainInfo dt { width: 100px; }
.mainTop .mainInfo dd { width: calc( 100% - 120px); }
.mainTop .mainInfo dd span { font-size: 0.9em; }

.mainTop .mainInfo ul { display: flex; gap: 15px; margin-top: 20px; width: 100%; }
.mainTop .mainInfo ul li { box-sizing: border-box; width: 25%; padding: 10px 25px; text-align: center; background:rgba(255,255,255,0.25); border-radius:12px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.8); box-shadow:0 8px 24px rgba(15,18,87,0.15); word-break: keep-all; color: #fff; }

.mainTop .mainInfo ul li::before { content: ''; background: url('../img/mainIcon.png') no-repeat center top; width: 40px; display: block; height: 45px; background-size: cover; margin: 0 auto;  }
.mainTop .mainInfo ul li:nth-child(2)::before { background-position: center top -68px; }
.mainTop .mainInfo ul li:nth-child(3)::before { background-position: center top -133px; }
.mainTop .mainInfo ul li:nth-child(4)::before { background-position: center top -204px; }

/* .mainTop .banners { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; width: 100%; margin: 40px auto 0; }
.mainTop .banners a { display: block; background-color: rgba(255,255,255,0.8); border: 1px solid #ccc; border-radius: 8px; padding: 20px; box-sizing: border-box; }
.mainTop .banners h3 { font-size: 1.35em; margin-bottom: 10px;   }
.mainTop .banners span { font-weight: 300;}

.mainTop .banners a:first-child h3 { color: #f39200;}
.mainTop .banners a:nth-child(2) h3 { color: #87bd15;}
.mainTop .banners a:nth-child(3) h3 { color: #009fe3;}
.mainTop .banners a:last-child h3 { color: #953f95;}*/






/* 팝업 */
.lpDim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}

.lpWrap {
  position: absolute;
  width: 500px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  transition: all .3s ease;
}

.popup1 { transform: rotate(0deg) translateX(60px) translateY(10px); z-index: 10006; }
.popup2 { transform: rotate(0deg) translateX(-60px) translateY(10px); z-index: 10003; }
.popup3 { transform: rotate(0deg); z-index: 10004; }

.lpBody { padding: 15px; }
.lpFigure img { width: 100%; display: block; border-radius: 8px; }

.lpFooter {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: #faf7fb; border-top: 1px solid #eee;
}
.lpBtnClose {
  padding: 8px 16px; border: 0; border-radius: 999px;
  background: #005bab; color: #fff; font-weight: 700; cursor: pointer;
}
.lpBtnClose:hover { filter: brightness(1.1); }