@charset "utf-8";
@import url("core.css");

/* wrap */
#wrap{  margin: 0;  height: auto;  overflow: hidden;}

/* topBtn */
.topBtn {
  position: fixed;
  width: 36px;
  height: 36px;
  right: 1%;
  bottom: 4%;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  z-index: 999;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  background-color: rgba(102, 102, 102, 0.8);
}
.topBtnI {display: inline-block; width: 35px; height: 35px; margin: 0 auto; background: url(../image/topBtn_icon.png) no-repeat center/57%;}
.topBtn.active{	opacity: 1;	visibility: visible;  transition: all 0.5s;}

/* header */
#header {
  position: fixed;
  display: flex;
  width: 100%;
  margin: 0 auto;
  align-content: center;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 4;
  background-color: #000;
  color: #fff;
  flex-direction: column;
  box-sizing: border-box;
}

.headerTop{
  display: flex;
  width: 100%;
  padding: 17px 0;
  align-items: center;
  justify-content: flex-start;
  background-color: transparent;
  box-sizing: border-box;
}

.gnbArea {
  position: relative;
  display: inline-block;
  height: 70px;
  z-index: 4;
  box-sizing: border-box;
}

.headerTop .logo{display: inline-block; width: 120px; height: 36px;  margin: 0 20px;	background:url(../image/common/logo.png) no-repeat center/100%;}
.headerTop span{font-weight: 600; font-size: 18px;}
#header .side-util {
  position: absolute;	
  top: 0;
  right: 0;
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: center;
  border-collapse:collapse;
  box-sizing: border-box;
}

.btn_gnb_view {
  position: relative;	
  display: flex; 
  width: 70px; 
  height: 100%;	
  margin: 0 auto;  
  padding: 18px 18px;   
  cursor: pointer; 
  text-align: center;	
  overflow: hidden;	
  box-sizing: border-box;	
  align-content: center;  
  justify-content: space-around; 
  flex-direction: column;  
  align-items: flex-start;
}
.btn_gnb_view>span { display: block; width: 100%; height: 2px; border-radius: 2px;	 background: #fff; }
.btn_gnb_view>span:last-child {width: 70%;}
.btn_gnb_close{	
  position: absolute;	
  display: block; 
  width: 70px;	
  height: 70px;
	top:  0px;	
  right: 0px; 
  float: right;	
  cursor: pointer;  
  text-align: center;
  box-sizing: border-box;	
  z-index: -999;	 
  opacity: 0;
}
.btn_gnb_close>span{	
  position: absolute;	
  display: block; 
  width: 40px; 
  height: 1px;
  left: 15px;  
  top: 35px;  
  opacity: 1;	
  background: #222; 	
  box-sizing: border-box;
}
.btn_gnb_close>span:nth-child(1){ transform:rotate(-45deg);	-webkit-transform:rotate(-45deg);}
.btn_gnb_close>span:nth-child(2){	transform:rotate(45deg);	-webkit-transform:rotate(45deg);}
.btn_gnb_close.active{opacity: 1; z-index: 999;}
#header .side-util .side_menu{ font-size: 18px; color: #fff; font-weight: bold; font-family: 'Montserrat', Sans-serif;  width: initial;  padding-right: 0; }

.pdfdown-back-wrap {display: block;width: 1200px;margin: 0 auto;}
.pdfdown-back-wrap .pdfdown-back {float:right;margin-top:15px;}
.pdfdown-back-wrap .pdfdown-back {
  display: inline-block; 
  box-sizing:border-box; 
  margin-left: 35px;
  padding: 3px 5px 3px 15px; 
  width: 140px; 
  height: 26px; 
  font-size: 14px; 
  color: #525252; 
  border:none;
  background:#bfc0c2 url(../image/main/pdfdown-back.jpg) top right no-repeat; -webkit-appearance: none;
}
.menuMbg{  position: fixed; left: 0; width: 100%; height: 100%;  top: 70px;	background-color: rgba(0,0,0,0.7); z-index: 0;}
.gnbArea .gnb {	position: relative;	display: inline-block; width: 100%;	margin: 0 auto;  	box-sizing:border-box;  }
.gnbArea .gnb ul{
  position: relative; 
  display: flex; 
  width: 100%; 
  height: 70px;
  flex-direction: row; 
  align-items: center; 
  align-content: center;
  justify-content: flex-end; 
  box-sizing: border-box;
}
.gnbArea .gnb .wlist {	position: relative;	display: block; margin: 0 15px; vertical-align: middle;	text-align: center;	box-sizing:border-box; }
.gnbArea .gnb .wlist>a{ position: relative; display: inline-block;  font-size: 18px; color: #fff;  line-height: 70px;  padding: 0 8px; box-sizing:border-box; font-family: 'Montserrat', Sans-serif; font-weight: bold;}
.gnbArea .gnb .wlist span{padding: 0 5px;}
.gnbArea .wlist>a:hover .top_br{  background: url(../image/ico/top_br_n2.png) no-repeat center/cover; }
.topIco {  position: relative;  display: inline-block; width: 25px; height: 25px; text-indent: -25px; margin-right: 15px; vertical-align: middle; }
.topIco01{background: url(../image/top_ico01.png) no-repeat center/cover;}
.topIco02{background: url(../image/top_ico02.png) no-repeat center/cover;}
.topIco03{background: url(../image/top_ico03.png) no-repeat center/cover;}

.gnbArea .wlist b{ display: inline-block; width: initial;  padding-left: 3px;}
.gnbArea .wlist>a:hover::after {  width: 100%; z-index: -1;}
.gnbArea .gnb .sub_menuW {	width: 100%;  display: none; }
.gnbArea .gnb ul li ul.sub_menuW li {float: none;}
.gnbArea .gnb ul li ul.sub_menuW li a{	
  display: block;	
  padding:10px 15px;
	font-size: 17px;  
  font-weight: normal;	
  color: #666;  
  line-height: 2;
	text-align: center; 
  height: auto;	
  font-weight: normal; 
  word-break: keep-all;
}
.gnbArea .gnb .gTop {display: none;}

/* menuM */
.menuM #navM {
  display: none;
  width: 0px;
  top: 0;	 
  right: 0;  
  padding: 55px 40px 6%;  
  z-index: -3;
  background-color: #fff; 
  box-sizing: border-box;  
  color: #fff; 
  text-align: center;
  flex-direction: column; 
  align-content: center; 
  justify-content: flex-start;
  vertical-align: middle; 
}
#navM.active{ display: flex;  position: fixed; width: 450px;  height: 100%;  overflow-y: auto;    z-index: 3;  font-family: 'Plus Jakarta Sans', sans-serif;  -ms-overflow-style: none; }
#navM.active::-webkit-scrollbar {  display: none;}

#navM_list{  position: relative;  display: flex; width: 100%; padding: 3% 0;  flex-direction: column;  box-sizing: border-box;}
#navM_list .mlistWr{  
  position: relative;  
  display: flex;  
  width: 100%; 
  height: auto;
  margin: 0 auto; 
  background-color: #fff;  
  flex-direction: column; 
  vertical-align: middle;
  justify-content: center;  
  font-weight: normal;
  box-sizing: border-box;
}
#navM_list .mlistWr span{display: block; border-bottom: 1px solid #000; text-align: left;}
#navM_list .menu00{padding: 0px 0 10px; font-size: 26px; font-weight: bold; color: #000;}
#navM_list .navM_list_Wr{padding: 0px 0 30px;}
.mlist{  
  position: relative;  
  display: block;  
  width: 100%; 
  height: auto;  
  max-height: 100%;
  margin: 10px auto 0; 
  text-align: left;  
  color: #222; 
  font-size: 20px;
  box-sizing: border-box;
  font-weight: normal;
}
.mlistWr a:hover{ color: #37bef0; font-weight: bold;}
.mlist small{display: block;}
#navM_list .navM_list_02 .mlistWr a:hover{color: #ffd60a;}
#navM .gTop {  color: #000; text-align: left;  margin-top: -15px; padding-bottom: 10px; }
#navM .gTop span{	color:#574370;	margin-left: 15px;	}

.gBtom{
  width: 100%;
  height: auto;
  color: #000;
  padding-top: 0px;
  box-sizing: border-box;
}
.gBtom li{text-align: left;}

/* content */
.content {width: 100%; margin-top: 56px; box-sizing: border-box;}
.flex, .flex1, .section .flex{  display: flex;  align-items: center; margin: 0 auto;word-break: keep-all; box-sizing: border-box;}
.flex .img { width: 46%; height: auto;}
.flex .img img {  width: 100%;  height: 100%;}
.boximg{ display: block; width:100%; max-width: 1000px; margin: 0 auto;	margin-bottom: 35px; text-align: center;	-webkit-perspective: 1; image-rendering: -webkit-optimize-contrast;}
.acont{	margin: 0 auto; line-height: 200%;	color: #000; font-size: 18px; margin-top: 20px; margin-bottom: 35px; font-family: 'Noto Sans KR' ,  'sans-serif'; word-break: keep-all;}


/* footer */
#footer{box-sizing: border-box; padding: 1% 5%; background: url(../image/common/fotter_bg.svg) 50% 0/cover no-repeat;}
#footer .container {display: flex; justify-content: center; align-items: center;}
#footer .container a{margin: 0 20px;}

.w_only{display: block;}
.m_only{display: none !important;}


/*  media */

@media all and (max-width:1089px){
  .w_only{display: none !important;}
  .m_only{display: block !important;}

  h3{font-size: 22px;	}
	h4{font-size: 18px;}

  /* topBtn */
  .topBtn, .topBtnI, .topBtn.active{  display: none;  opacity: 0;}

  /* header */
  .headerTop{top: 0;}
  .headerTop .logo{width: 100px;}
  #header .side-util{display: flex;max-width: inherit; margin-right: 10px;}

  /* footer */
  #footer{padding: 10px 20px;}

   /* menuM */
  .gnbArea .gnb{	display:none !important;}
  .gnbBg {display: none;}
  .gnbArea { position: static;width: auto;height: auto;}
  .btn_gnb_view { width: 55px; border-left: 0;  height: 100%; padding: 13px 13px;}
  .btn_gnb_close { width: 55px; height: 55px; box-sizing: border-box;}
  .btn_gnb_close>span { top: 28px; left: 8px;}
  .menuMbg{top: 55px;}
  .gnbArea,.headerArea,#header .side-util, .headerTop{height: 55px;	box-sizing: border-box;}
}

@media all and (max-width:768px){
  .headerTop .logo{width: 80px; margin: 0 10px;}
  #navM .gTop{margin-top: -30px;}
  .menuM #navM{ width: 100%; top: 0px;  padding: 52px 6% 5%;}
  #header .side-util{  position: absolute;  top: 0;  right: 0; margin-right: 5px;}
  #navM_list{height: 80%;padding: 1% 0 1% 0; }
  .mlist{font-size: 20px; line-height: 1.2; }
  .gBtom .sns, .gBtom .sns2{margin: 3px auto;}
  #footer .sns div:nth-child(2) {  margin: 0 5px; }
  .gBtom .sns2 div{margin: 5px;}
  #footer .sns .btn a{padding: 5px 15px; }
  .mlist .top_br{margin-top: 5px;}
}

@media all and (max-width:500px){
  .headerTop span{display: none;}
  #footer .container{flex-direction: column;}
  #footer .container a:last-child{margin-top: 20px;}
}
@media all and (max-width:420px){
  #header .side-util{margin-right: 0;}
  #header .side-util .side_menu{font-size: 13px;}
  .menuM #navM {width: 100%;}
  #navM_list{height: 75%;}
  .mlist{margin:7px auto;}
}

@media all and (max-width:320px){
  #footer .sns .btn a{padding: 5px 10px;}
  .headerTop .logo{ width: 140px;height: 55px; margin-bottom: 5px;}
}