/* @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet'); */
@import url('https://fonts.googleapis.com/css2?family=Karla&family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet');

* {
  margin:0;   /* 마진 리셋 */
  padding:0;   /* 패딩 리셋 */
  box-sizing: border-box;   /* 박스 영역은 테두리까지 */ 
}
a {
  text-decoration:none;  /* 텍스트 링크 밑줄 없애기 */ 
  
  
}
ul {
  list-style: none;
}

/* body{background-image: linear-gradient(rgb(0, 0, 0),rgb(53, 53, 53))} */
 body{background-color: #000;} 

 #body2{background-color: #fff;} 
 #title2{background-color: #000;} 

#container {
  margin:0 auto;  /* 화면 중앙에 배치 */
  width:60%;    /* 너비 */
  height: auto;
}

#container2 {
  margin:0 auto;  /* 화면 중앙에 배치 */
  width:100%;    /* 너비 */
  height: auto;
}

/*********************************/
/* 헤더 영역 - 로고와 내비게이션 */
/*********************************/

header{
  width:100%;    /*  너비 */
  height:100px;   /* 높이 */ 
  /* background-color:#fff; */
  border-bottom:2px solid #222;
}

#header2{
  width:100%;    /*  너비 */
  height:100px;   /* 높이 */ 
  /* background-color:#fff; */
  border-bottom:2px solid #222;
}

/* 로고 */
#logo{ 
  float:left;   /* 왼쪽으로 플로팅 */ 
  width:100%;   /*  너비 */ 
  height:100px;   /* 높이 */
  line-height:100px;  /* 세로로 중간에 맞춤 - 줄간격을 높이 값과 같게 */
  padding-left:20px;  /* 왼쪽에 여백 */
}
#logo h1 {
  font-family: 'Karla', sans-serif;
  font-weight:700;
  font-size:40px;   /* 글자 크기 */
  color:#fff;   /* 글자 색*/
  text-shadow:0 -1px 0 #222;  /* 그림자 색 */
  display: inline-block;
}
#logo h2 {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight:400;
  font-size:20px;   /* 글자 크기 */
  color:#fff;   /* 글자 색*/
  text-shadow:0 -1px 0 #222;  /* 그림자 색 */
  display: inline-block;
}

#txt{ 
  float:left;   /* 왼쪽으로 플로팅 */ 
  width:100%;   /*  너비 */ 
  height:60px;   /* 높이 */
  /* line-height:100px;  세로로 중간에 맞춤 - 줄간격을 높이 값과 같게 */
  padding-left:30px;  /* 왼쪽에 여백 */
  margin-bottom : 2%;
}
#txt h3 {
 font-family: 'Noto Sans KR', sans-serif;
  font-weight:500;
  font-size:20px;   /* 글자 크기 */
  color:#fff;   /* 글자 색*/
  text-shadow:0 -1px 0 #222;  /* 그림자 색 */
  display: inline-block;
  margin-top: 1%;
  word-break: keep-all;
}
/* 로고 */
#logo2{ 
  float:left;   /* 왼쪽으로 플로팅 */ 
  width:40%;   /*  너비 */ 
  height:100px;   /* 높이 */
  line-height:100px;  /* 세로로 중간에 맞춤 - 줄간격을 높이 값과 같게 */
  padding-left:20px;  /* 왼쪽에 여백 */
}
#logo2 h1 {
  font-family: 'Karla', sans-serif;
  font-weight:700;
  font-size:40px;   /* 글자 크기 */
  color:#222;   /* 글자 색*/
  text-shadow:0 -1px 0 #fff;  /* 그림자 색 */
  display: inline-block;
}
#logo2 h2 {
  font-family: 'Karla', sans-serif;
  font-weight:400;
  font-size:20px;   /* 글자 크기 */
  color:#222;   /* 글자 색*/
  text-shadow:0 -1px 0 #fff;  /* 그림자 색 */
  display: inline-block;
}
/* 내비게이션 */
nav{  
  float:right;   /* 오른쪽으로 플로팅 */
  width:900px;   /*   너비 */  
  height:100px;   /* 메뉴 영역 높이 */  
  padding-top:40px;  /* 메뉴를 아래로 내리기 위해 */  
}
#topMenu {  
  height:60px; 
}
#topMenu > li {
  float:left;  /* 메뉴 항목을 왼쪽으로 플로팅 */ 
  position: relative;  /* 서브 메뉴를 absolute로 하기 위해, 이 부분을 relative로 */  
}
#topMenu > li > a{
  display:block;  /* 링크 텍스트는 블록으로 */ 
  color:#000;  /* 글자 색 */
  font-weight:600;  /* 글자 굵기 */
  /* text-shadow:0 1px #07c;  그림자 추가 */
  padding:20px 40px;  /* 패딩 */ 
}
#topMenu > li > a > span {
  font-size : 0.5em;   /* 서브 메뉴가 있는 항목에 화살표 표시 */   
}
#topMenu > li > a:hover {
  color:#07c;  /* 마우스 오버하면 색상 바뀜 */ 
  /* text-shadow:0 -1px #07c;  글자가 너무 굵어지지 않도록 */
}

#topMenu > li > ul { /* 서브 메뉴 스타일 */
  display: none;  /* 서브 메뉴 처음에는 화면에 안 보이게 */ 
  position:absolute;  /* 서브 메뉴 포지셔닝 */ 
  width:160px;
  background:rgba(255,255,255,0.6);  /* 슬라이드 쇼 비치도록 배경 색 조절 */
  left:20px;     
  margin:0;
}
#topMenu > li > ul > li {    
  padding:10px 10px 10px 30px;   /* 서브 메뉴 항목 */
}
#topMenu > li > ul > li > a { 
  font-size:14px;   
  padding:10px;
  color:#000;  
}
#topMenu > li:hover > ul {
  display: block;  /* 메인 메뉴 항목 위로 오버하면 서브 메뉴 표시 */
  z-index:10;  /* 슬라이드 쇼에 가리지 않게 조절 */ 
}
#topMenu > li > ul > li > a:hover {
  color:#f00;  /* 서브 메뉴 마우스 오버하면 색상 바뀜 */   
} 

/********************************/
/*   이미지 슬라이드 쇼 영역    */
/********************************/

#slideShow {   
  clear:both;   /* 플로팅 해제 */
  width:100%;    /* 너비 */ 
  height:300px;   /* 높이 */ 
  overflow:hidden;   /* 영역 넘치면 감춤 */ 
  position: relative;
  border-bottom:2px solid rgb(230, 228, 228);
  margin-bottom: 3%;
}
#slideShow2 {width:100%;position:relative;overflow:hidden;margin:0 0 10px;}
#slides {
  position: absolute;
}
#slides > img {
  width:100%;  /* 너비 */
  text-align : center;
  /*float:left;  /* 가로로 배치 */
}
/* 
button{
  position: absolute;
  height:100%;   위아래 가득 차게 
  top:0;
  border:none;  테두리 없이  
  padding:20px;
  background-color: transparent;  투명 배경  
  color:#000;  화살표 색은 검정 
  font-weight:800;   굵게 
  font-size: 24px;   화살표 크기 
  opacity: 0.5;   반투명  
}
#prev {
  left:0;   왼쪽으로 붙여서 
}
#next {
  right:0;   오른쪽으로 붙여서 
}
button:hover {
  background-color:#222;   짙은 회색 배경 
  color:#fff;    흰색 화살표  
  opacity:0.6;    불투명도를 조금 높임 
  cursor:pointer;   커서 모양을 포인터로 
}
button:focus {
  outline:0;   아웃트라인 없앰 
} */


/**************************************/
/*   콘텐츠 영역  - 탭 메뉴와 퀵 링크 */
/**************************************/

#contents{  
  width:100%;   /* 너비 */
  height:auto;  /* 높이 */   
  /*margin-top:20px;  /* 마진 추가 */
}

/* 탭 메뉴 */
#tabMenu{  
  float:left;  /* 왼쪽으로 플로팅 */ 
  width:600px;   /* 너비 */ 
  height:100%;   /* 높이 */
  margin-top:10px;  /* 탭 메뉴 위쪽에 여백 두기 */
}
#tabMenu  input[type="radio"] {
  display:none;  /* 라디오 버튼 감춤 */ 
}
#tabMenu label {  /* 탭 제목 스타일 */ 
  display:inline-block;  /* 탭들을 가로로 배치 */
  margin:0 0;  /* 마진 */ 
  padding:15px 25px;  /* 패딩 */
  font-weight:600;   /* 글자 굵기 */
  text-align: center;   /* 글자 정렬 */
  color: #aaa;  /* 글자 색 */ 
  border:1px solid transparent;  /* 테두리 */ 
}
#tabMenu label:hover {  /* 마우스 오버했을 때 탭 제목 스타일 */
  color:#222;  
  cursor:pointer;
}
#tabMenu input:checked + label {  /* 활성화된 탭 제목 스타일 */ 
  color:#b00;
  border:1px solid #ddd;
  background-color: #eee;
}

.tabContent {  /* 탭 내용 스타일 */
  display:none;
  padding:20px 0 0;
  border-top:1px solid #ddd;
}
.tabContent h2{  
  display:none; 
}

#notice ul {
  list-style: disc;
  margin-left:30px;
}
#notice ul li {
  font-size:16px;
  line-height:2.5;
}
#gallery ul li{
  display:inline;  /* 이미지 가로로 배치 */
}

#tab1:checked ~ #notice, 
#tab2:checked ~ #gallery {
  display:block;
}


/* #item {padding:20px 0px;overflow:hidden;} */
#container .item {width:100%;float:left;}
#item a {display:block;}
#item span {display:block;}
#item .pimg {width:100%;position:relative;overflow:hidden;margin:0 0 10px;}
#item .pimg:before {display:inline-block;vertical-align:middle;content:"";width:0;padding-top:30%;}
#item .pimg img {max-width:100%;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);margin:auto;transition:all .5s ease;border-radius:7%;}
#item .pimg .ltit {position:absolute;font-size:40px;font-weight:400;color:#fff;margin:0 0 0px;white-space:nowrap;overflow:hidden;left:85%;top:10%;line-height:33px;font-family: 'Karla', sans-serif;}
#item .pimg .ltit2 {position:absolute;font-size:40px;font-weight:400;color:#fff;margin:0 0 0px;white-space:nowrap;overflow:hidden;left:90%;top:10px;line-height:33px;font-family: 'Karla', sans-serif;}
#item a:hover .pimg img, #item a:focus .pimg img {transform:translate(-50%, -50%) scale(1.1);-ms-transform:translate(-50%, -50%) scale(1.1);}
#item a:hover .ltit, #item a:focus .ltit {text-decoration:underline;}
#item .pimg button {border-width:1px;border-radius:4px;border-color:#fff;background:0;width:10%;height:15%;position:absolute;margin-right:0px;transition:all .3s ease;left:85%;top:80%;}
#item .pimg button:before, #item button:after {display:block;content:"";position:absolute;top:0;bottom:0;margin:auto;}
#item .pimg button:before {width:40%;height:40%;box-sizing:border-box;border:1px solid transparent;transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
#item .pimg button:after {width:75%;height:1px;background:#fff;left:10%;top:25%;}
#item .pimg .btn-next:before {border-bottom-color:0;border-right-color:#fff;border-top:0;border-left:0;right:8%;top:59%;}
#item .pimg .btn-next:after {right:1px;}
#item a:hover .pimg button, #item a:focus .pimg button {transform:translate(0, -30%) scale(1.1);-ms-transform:translate(0, -30%) scale(1.1);}
#busi ul {display:none;}
#busi li {display:none;}

 /* 직무소개 */
 .job-cont {font-size:0;margin:0 0 0px;}
 .job-cont:before {display:inline-block;vertical-align:top;content:"";width:0;}
 .job-cont .job-tit {font-size:30px;font-weight:500;color:#fff;padding:20px 0 12px 35px;position:relative;margin:30px 0 1%;line-height:1.2;border-top:2px solid #222;}
 .job-cont .job-tit:before {display:block;content:"";width:5px;height:70%;background:#fff;position:absolute;top:22%;left:0;}
 .job-cont .txt {margin:0 0 15px;}
 .job-cont .map {margin:0 0 15px;}
 .job-cont .inwr {position:relative;display:inline-block;vertical-align:top;width:100%;font-size:1rem;box-sizing:border-box;}
 .job-cont .img {position:relative;display:inline-block;vertical-align:top;width:100%;font-size:1rem;box-sizing:border-box;padding-left:0%}

/* 퀵 링크2 */ 
#links2{  
  float:right;   /* 오른쪽으로 플로팅 */
  width:100%;   /* 너비 */
  height:100%;   /* 높이 */
  margin-top:20px;  /* 마진 추가 */
}
#links2 ul{
  padding:0;  /* 패딩 */ 
  overflow: hidden;  /* 넘치는 것은 감춤 */
}
#links2 ul li{
  float:left;  /* 가로로 배치 */
  width: 50%;  /* 1/3 크기만큼씩 */
  text-align:center;  /* 가운데 정렬 */
  margin:10px 0;  /* 마진 */
}

#links2 ul li a span{
  display:block;  /* 블록 레벨로 */ 
  margin:0 auto;  /* 가운데 배치 */ 
  width:50%;  /* 가로 크기 */ 
  height:150px;  /* 세로 크기 */
  border-radius:100%;  /* 테두리 둥글게. border-radius: 150px로 해도 됨 */ 
  border:1px solid #ddd;  /* 테두리 스타일 */
  line-height:150px;  /* 수직으로 중간에 오게 */ 
}

#quick2-icon1 {
  background-image:url('../images/quick-icon/violin2.png'); 
}
#quick2-icon2 {
  background-image:url('../images/quick-icon/violin3.png'); 
}
#quick2-icon3 {
  background-image:url('../images/quick-icon/violin4.png'); 
}
#quick2-icon4 {
  background-image:url('../images/quick-icon/violin5.png'); 
}
#quick2-icon5 {
  background-image:url('../images/quick-icon/violin6.png'); 
}
#quick2-icon6 {
  background-image:url('../images/quick-icon/violin7.png'); 
}

#links2 ul li a p {
  margin-top:15px;  /* 위쪽 마진 */
  font-weight:600;  /* 글자 굵기 */
  color:#666;  /* 글자 색 */
}

/* 퀵 링크 */ 
#links{  
  float:right;   /* 오른쪽으로 플로팅 */
  width:1200px;   /* 너비 */
  height:100%;   /* 높이 */
  margin-top:20px;  /* 마진 추가 */
}
#links ul{
  padding:0;  /* 패딩 */ 
  overflow: hidden;  /* 넘치는 것은 감춤 */
}
#links ul li{
  float:left;  /* 가로로 배치 */
  width: 16%;  /* 1/3 크기만큼씩 */
  text-align:center;  /* 가운데 정렬 */
  margin:10px 0;  /* 마진 */
}

#links ul li a span{
  display:block;  /* 블록 레벨로 */ 
  margin:0 auto;  /* 가운데 배치 */ 
  width:150px;  /* 가로 크기 */ 
  height:150px;  /* 세로 크기 */
  border-radius:100%;  /* 테두리 둥글게. border-radius: 150px로 해도 됨 */ 
  border:1px solid #ddd;  /* 테두리 스타일 */
  line-height:150px;  /* 수직으로 중간에 오게 */ 
}

#quick-icon1 {
  background-image:url('../images/quick-icon/violin2.png'); 
}
#quick-icon2 {
  background-image:url('../images/quick-icon/violin3.png'); 
}
#quick-icon3 {
  background-image:url('../images/quick-icon/violin4.png'); 
}
#quick-icon4 {
  background-image:url('../images/quick-icon/violin5.png'); 
}
#quick-icon5 {
  background-image:url('../images/quick-icon/violin6.png'); 
}
#quick-icon6 {
  background-image:url('../images/quick-icon/violin7.png'); 
}

#links ul li a p {
  margin-top:15px;  /* 위쪽 마진 */
  font-weight:600;  /* 글자 굵기 */
  color:#666;  /* 글자 색 */
}

/******************/
/*   푸터 영역    */
/******************/

footer{   
  width:100%;   /* 너비 */
  height:100px;  /* 높이 */
  border-top:2px solid #222;
}
#bottomMenu{
  width:100%;
  height:20px;
  position:relative;  
}
#bottomMenu ul {
  margin-top:15px;  
}
#bottomMenu ul li{
  float:left;  /* 가로로 배치 */ 
  padding:5px 20px;
  border-right:1px solid #ddd;   /* 항목 오른쪽에 테두리 */ 
}
#bottomMenu ul li:last-child{
  border:none;  /* 마지막 항목에는 오른쪽 테두리 없음 */  
}
#bottomMenu ul li a, #bottomMenu ul li a:visited {  
  font-size:15px;  /* 글자 크기 */ 
  color:#666;   /* 글자 색 */ 
}
#sns {
  position:absolute;  
  right:0;  /* 오른쪽 끝에 배치 */ 
}
#sns ul li{
  border:none;  /* 테두리 없이 */
  padding:5px;   
} 
#company{
  clear:left;  /* 플로팅 해제. clear:both도 가능 */
  width : 80%;
  margin-top:20px;  /* 위쪽 마진 */
  margin-left:20%;  /* 왼쪽 마진 */ 
}
p {
  font-size:14px;  /* 글자 크기 */
  color:#fff;    /* 글자 색*/ 
}

p1 {
  font-size:14px;  /* 글자 크기 */
  color:#aaa;    /* 글자 색*/ 
  font-family: 'Noto Sans KR', sans-serif;
}



@media screen and (max-width: 1200px) {
  /* 타블렛 */
  #item .pimg .ltit {position:absolute;font-size:30px;}
  
p1 {
  font-size:12px;  /* 글자 크기 */
  color:#aaa;    /* 글자 색*/ 
  
}
#txt h3 {
  font-family: 'Karla', sans-serif;
  font-weight:500;
  font-size:17px;   /* 글자 크기 */
  color:#fff;   /* 글자 색*/
  text-shadow:0 -1px 0 #222;  /* 그림자 색 */
  display: inline-block;
  margin-top: 1%;
}
  }

  @media screen and (max-width: 900px) {
    /* 타블렛 */
    #item .pimg .ltit {position:absolute;font-size:30px;}

    p1 {
      font: size 30px;  /* 글자 크기 */
      color:#aaa;    /* 글자 색*/ 
    }
    #txt h3 {
      font-family: 'Karla', sans-serif;
      font-weight:500;
      font-size:17px;   /* 글자 크기 */
      color:#fff;   /* 글자 색*/
      text-shadow:0 -1px 0 #222;  /* 그림자 색 */
      display: inline-block;
      margin-top: 1%;
    }
    #container {
      margin:0 0;  /* 화면 중앙에 배치 */
      width:100%;    /* 너비 */
      height: auto;
    }
    }

    @media screen and (max-width: 666px) {
      /* 타블렛 */
      #item .pimg .ltit {position:absolute;font-size:20px;}
      p1 {
        font-size:8px;  /* 글자 크기 */
        color:#aaa;    /* 글자 색*/ 
      }
      #txt h3 {
        font-family: 'Karla', sans-serif;
        font-weight:500;
        font-size:13px;   /* 글자 크기 */
        color:#fff;   /* 글자 색*/
        text-shadow:0 -1px 0 #222;  /* 그림자 색 */
        display: inline-block;
        margin-top: 1%;
      }
      }