@charset "UTF-8";

/*-------------------------------------------------
Create date : 2020-4
-------------------------------------------------*/
#wrap { overflow: hidden; }

.container { width: 68.75rem;  max-width: 100%; margin: 0 auto; padding: 0 1rem; } 

#header { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 4rem; padding: 0 12.5rem; background-color:rgba(255,255,255,.85); text-align: center; line-height: 4rem; }

#header .logo a { position: absolute; left: 2.5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#header .util { position: absolute; right: 0; top: 0;  }

#header .util .menu { float: right; }

#header .util .menu li { display: inline; vertical-align: top; }

#header .util .menu .sitemap { display: inline-block; overflow: hidden; position: relative; z-index: 2; width: 4rem; height: 4rem; vertical-align: top;  background: #131f5a;}

#header .util .menu .sitemap::before { display: block; width: 100%; height: 100%; font-size: 2rem; color: #fff; content: '\2261'; }

#gnb { position: relative; z-index: 0; display: table; margin: 0 auto; }

#gnb::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: calc(4rem - 1px); height: 1px; border-top: 1px solid transparent; background-color:rgba(0,0,0,.35) ; -webkit-transition: all 0.3s; transition: all 0.3s; }

#gnb > li { display: table-cell; overflow: hidden; width: 10rem; text-align: center; vertical-align: top; } /* 8ren -> 9rem  ->10rem */

#gnb > li > a { display: block; font-size: 1rem; font-weight: 700; color: #000; }

#gnb > li:nth-child(1) .depth2::after { position: absolute; left: 0; top: 0; width: 1px; height: 100rem; background-color:rgba(109,109,109,.85); content: ''; } /* background: #e8e8e8 > rgba(109,109,109,.57) */

#gnb > li.active .depth2::before { background-color: rgba(255,255,255,.85); } /*  sub-2depth  background */

#gnb .depth3 { display: none; }

#gnb .depth2 { visibility: hidden; overflow: hidden; position: relative; height: 0; margin-top: 1px; opacity: 0; }

#gnb .depth2::before { position: absolute; right: 0; top: 0; width: 100%; height: 100rem; border-right: 1px solid rgba(109,109,109,.57); content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; } /* sub menu 2depth */

#gnb .depth2 ul { padding: 0.25rem 0; }

#gnb .depth2 li { line-height: 1.25rem; word-break: keep-all; }

#gnb .depth2 li + li { margin-top: 0.5rem; }

#gnb .depth2 a { display: block; position: relative; z-index: 0; color: #999; -webkit-transition: all 0.2s; transition: all 0.2s;  font-weight: bold; }

#gnb .depth2 a::after { position: absolute; left: 0; top: 50%; z-index: -1; width: 0; height: 2rem; margin-top: -1rem; background-color: #141f5a; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

#gnb .depth2 a:hover, #gnb .depth2 a:focus, #gnb .depth2 a:active { color: #fff; }

#gnb .depth2 a:hover::after, #gnb .depth2 a:focus::after, #gnb .depth2 a:active::after { width: 100%; }

#gnb.active::before { height: calc(100% - 4rem + 1px); opacity: 1; }

#gnb.active .depth2 { visibility: visible; overflow: visible; height: auto; padding: 0.125rem 0; opacity: 1; -webkit-transition: all 0.3s 0.3s; transition: all 0.3s 0.3s; }

#header.active { z-index: 104; }

#header.active .util .menu .sitemap::before { color: #fff; content: '\00d7'; -webkit-transition: all 0.2s; transition: all 0.2s; }

#header.active .util .menu .sitemap:hover::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.2s; transition: all 0.2s; }

#header.active > nav { position: fixed; left: 0; top: 0; z-index: 1;background:#141f5a url("../images/allmenu_bg.png") no-repeat center 0; background-size: auto 100% !important;  width: 100%; height: 100%;  padding-top:5rem; }

#header.active #gnb { top: 50%; width: 68.75rem; max-width: 100%; margin: 0 auto; table-layout: fixed; -webkit-transform: translateY(-50%); transform: translateY(-50%); counter-reset: section; }

#header.active #gnb::before { display: none; }


#header.active #gnb > li { overflow: visible; padding: 0 2rem; text-align: left; line-height: 1.2; }

#header.active #gnb > li > a { font-size: 1.75rem; font-weight: 400; color: #fff; }

#header.active #gnb > li > a::before { display: block; font-size: 0.9rem; color: #ff730c; counter-increment: section; content: "0" counter(section); } /* 숫자 나오는부분. */ 



#header.active #gnb > li:last-child .depth2::before { display: none; }

#header.active #gnb .depth2 { visibility: visible; overflow: visible; height: auto; margin-top: 0; padding: 2rem 0 !important; opacity: 1; }

#header.active #gnb .depth2::before { top: -1.5rem; right: -2rem; height: 28.5rem !important; border-color: #5e6771; background: none !important; }

#header.active #gnb .depth2::after { display: none; }

#header.active #gnb .depth2 a { font-size: 0.9rem; color: #fff; line-height: 2.5rem; }

#header.active #gnb .depth2 a::after { display: none; }

#header.active #gnb .depth2 a:hover, #header.active #gnb .depth2 a:focus, #header.active #gnb .depth2 a:active { text-decoration: underline; }

#header.active #gnb .depth2 > ul > .active > a { text-decoration: underline; }

/*

#header.active #gnb .depth3 { display: block; margin: 0 0 0.25rem; padding-left: 0.75rem; border-left: 2px solid #ff730c; }

#header.active #gnb .depth3 li + li { margin-top: 0.75rem; }

#header.active #gnb .depth3 a { font-size: 0.8rem; color: #c1cbd2; line-height: 1rem; } */



.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  background:#141f5a url("../images/allmenu_bg.png") no-repeat center 0; background-size: auto 100% !important; 
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
}

.overlay a {
  padding: 4px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.solution {width:80%; margin: 0 auto;}
.solution h3 { font-size: 20px; border-bottom: 1px solid #f9f9f9; padding-bottom:10px; padding-left:20px; color: #f9f9f9; text-align:left;}
.solution ul { width:11%; font-size:18px;float:left; }
.solution ul h5 { height:80px;  font-size:16px; padding:10px 14px; background: #0c1546;  color: #f9f9f9; margin:10px 4px; text-align: center;  }
.solution ul li {font-size:16px; color:#f4f4f4; padding: 4px;}


.etc {width: 80%; margin:0 auto; margin-top: 100px; }
.etc ul { width: 18%; float:left; margin:1%;}
.etc ul h3 { font-size: 20px; border-bottom: 1px solid #f9f9f9;  color: #f9f9f9; padding-bottom:10px;}
.etc ul li {font-size:18px; color:#f4f4f4; padding: 4px;}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.clear {clear:both; }



/*#main { padding-top: 4rem; }

#contents { width: 60rem; max-width: calc(100% - 2rem); margin: 4rem auto; }

#snb { position: relative; background: url("../images/spot1.jpg") no-repeat center 0; background-size: auto 100% !important; text-align: center; }

#snb .snb-title { height: 17rem; font-size: 2.5rem; color: #fff; line-height: 17rem; } */