@charset "utf-8";

/* 공통서식 
  글꼴, 글자색, 글자크기, 링크서식
  버튼, 배경색
*/

body{
  font-family: "Nanum Gothic", serif;
  font-weight: 400;
  font-style: normal;
  color:#333333;
  font-size:0.75em; /* 가변단위 */
  background: rgb(55,169,193);
  background: linear-gradient(180deg, rgba(55,169,193,1) 33%, rgba(230,230,230,1) 33%);
}
a{color:#333333;text-decoration: none;}

/* 헤더서식 */
header{height:68px;position:relative;}
header > h1{text-align:center;}
header > h1 img{height:28px;padding-top:20px;}

#t_btn, #login_btn{
  position:absolute;top:10px;
  cursor:pointer;
}
#t_btn{left:10px;}
#login_btn{right:10px;}

/* 내비게이션 서식 */

/* 메인메뉴를 클리기 .sub에 적용되는 서식 */
.act{display:block !important;}

/* 서브가 보일때 아이콘의 방향을 반대로 회전 */
.rotate{
  transform: rotate(180deg) translate(-15px, -6px) !important;}

/* 내비게이션 서식 */
#navi{
  width:100%;height:100%;
  position:fixed;
  top:0px;left:-100%; /* 보이게 하는 값 : 0px */
  background-color:rgba(0,0,0,.8);
  z-index:1000;
  transition: 0.5s;
}
.gnb{
  width:70%;height:100%;
  background-color:#ffffff;
  padding-top:70px;
  box-sizing: border-box;/* 패딩, 마진을 영역에 포함하여 계산 */
}
.gnb li{
  line-height:50px;
  border-bottom:1px solid #cccccc;
  text-indent:14px;
}
.gnb a{display:block;}
.gnb > li > a{font-size:1.05rem;}
.sub a{font-size:0.9rem;}
.gnb .fa-angle-down{
  float:right;font-size:1.4rem;
  padding:10px;
  transform: translateY(5px);
}
.sub{background:#f0efef;display:none;}
.sub li{line-height:40px;}

.fa-times{ /* 닫기 버튼 서식 */
  position:absolute;right:5%;top:5%;
  color:#fff;font-size:36px;
}

/* 푸터서식  */
footer{
  background:#c2c2c2;
  padding:20px 0px 0px 10px;
}
footer nav{}
footer ul{
  display:flex;
  justify-content: space-around;
  width:70%;
  margin:0 auto;
}
footer ul li{text-align:center;}
footer ul li a{
  font-size:0.85rem;
  line-height:30px;
}
footer ul li:first-child a{
  font-weight:bold;
}
footer ul li a::after{
  position:relative;
  left:19px;
  content:"";
  border-right:1px solid #ffffff;
}
footer ul li:last-child a::after{
  display:none;
}
footer p, footer address{
  line-height:28px;
  text-align:center;
}