@charset "utf-8";

/* 메인 페이지 CSS - main.css 
    - 변수셋팅 + 미디어쿼리 포함
*/

/* 외부공통파일 불러오기 */
@import url(./reset.css);
@import url(./core.css);

/* 공통변수 셋팅 */
:root {
  /* 색상변수 : --이름-color */
  --main-gray-color: #222;
  --character-area-color: #fefefe;
  --company-area-color: #f4f4f4;
  --contact-area-color: #4a679d;

  /* 사이즈변수 : --이름-size */
  --top-area-padding-size: 2rem 5rem;
  --bottom-area-padding-size: 5rem;
  --contents-box-padding-size: 8.5rem 0 0;
  --cat-title-padding-size: 1.5rem 1rem;
}

/* 전체글자 크기기준값 설정하기 : rem단위 */
html {
  /* 계산 편의상 10px로 설정! */
  font-size: 10px;
}

/* 전체 공통 */
body {
  /* fixed 상단영역만큼 상단패딩셋팅 */
  padding-top: 10rem;
  /* 모바일 모드시 가로스크롤 안생기게 셋팅 */
  overflow-x: hidden;
}
/* body.on일때 상단영역 */
body.on {
  overflow: hidden;
}

/* 1. 상단영역 */
/* 겉박스 */
#top-area {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
}
/* 속박스 */
.top-area {
  padding: var(--top-area-padding-size);
}
/* 상단영역 플렉스 */
.top-area > ul {
  display: flex;
  /* 양쪽끝에 배치함 */
  justify-content: space-between;
}
/* 로고 */
h1.logo img {
  height: min(4rem, 4vw);
  /* 최대사이즈 지정:4rem이 최대크기 */
}

/* GNB메뉴 */
.gnb {
  height: 100%;
}
.gnb > ul {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8rem;

  font-size: 1.6rem;
  font-weight: 500;

  /* 대문자 출력 */
  text-transform: uppercase;
}

/* 모바일 GNB 햄버거버튼 */
.gnb-mob {
  position: absolute;
  top: 2rem;
  right: 5rem;
  width: 34px;
  height: 34px;
  /* 처음에 안보임! */
  display: none;
}
.gnb-mob span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: 0.3s ease-out;
}
/* 2번째,3번째 span */
.gnb-mob span + span {
  margin-top: 11px;
}

/* x버튼으로 변경은 body에 .on넣기 */
body.on .gnb-mob span:nth-child(1) {
  translate: 0 15px;
  rotate: 45deg;
}
body.on .gnb-mob span:nth-child(2) {
  translate: 17px 0;
  width: 0;
}
body.on .gnb-mob span:nth-child(3) {
  translate: 0 -15px;
  rotate: -45deg;
}

/************* 2. 메인영역 *************/
/* 메인영역 개별박스 공통 */
#main-area > div {
  padding: var(--contents-box-padding-size);
}
/************* 2-1. 배너영역 *************/
.banner {
  /* 부모자격 */
  position: relative;
  /* 넘치는 자식 숨기기 */
  overflow: hidden;
  background: url(../images/main_visual_bg.jpg) 0/50px;
  text-align: center;
  padding-bottom: 10rem !important;
}
/* 배너 이미지 */
.banner img {
  height: 60vmin;
}
/* 데스크탑 박스 */
.dt-box {
  transition: 0.4s ease-in-out;
}
/* 모바일용 박스 */
.mob-box {
  position: absolute;
  top: -100%;
  opacity: 0;
  width: 100%;
  padding-top: 8.5rem;
  transition: 0.4s ease-in-out;
}

/************* 2-2. 캐릭터 영역 *************/
.character {
  background-color: var(--character-area-color);
}
/* 캐릭터 리스트 */
.cat-list ul {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10rem;
}
.cat-list ul li {
  flex-basis: 25%;
  padding: 1rem;
  box-sizing: border-box;
  /* 글자 줄바꿈방지 */
  white-space: nowrap;
  /* 글자 줄바꿈방지시 옆의 li에 영향차단!
  -> 안주면 같은 라인의 마지막 li가 아래줄로
  떨어지는 경우가 생길 수 있다! */
  overflow: hidden;
}
/* 이미지 파트박스 */
.img-part {
  position: relative;
}
/* 두개의 이미지 공통 */
.cat-list img {
  width: 100%;
}
/* 마지막 이미지 숨기기 */
.cat-list img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.4s;
}
/* 오버시 이미지 보이기 */
.cat-list li:hover img:last-child {
  opacity: 1;
}

/* 이미지 박스 */
.cat-list figure {
  border: 1px solid #ccc;
  border-radius: 20px;
  /* 이미지 나감 숨기기 */
  overflow: hidden;
}
/* 이미지 설명 */
.cat-list figcaption {
  text-align: center;
  padding: var(--cat-title-padding-size);
}
/* 캐릭터 타이틀 */
.cat-list figcaption h3 {
  font-size: 2.2rem;
  font-weight: normal;
}
/* 캐릭터 영문 */
.cat-list figcaption p {
  font-size: 1.2rem;
}
/* 2-3. 컴퍼니영역 */
.company {
  background-color: var(--company-area-color);
}
/* 2-4. 리쿠르트영역 */
.recruit {
  background: var(--character-area-color) url(../images/bg_recruit.png)
    no-repeat center 10vh/90%;
}
/* 컴퍼니 영역 & 리쿠르트 영역 
공통 리스트 디자인 */
.com-type-list {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  padding-bottom: 10rem;
}
/* 공통 타이틀 */
.com-type-list h3 {
  font-size: 2.2rem;
  padding: 2rem 0;
  font-weight: normal;
}
/* 공통 내용 */
.com-type-list p {
  font-size: 1.6rem;
}
.com-type-list p:last-of-type {
  margin-bottom: 3rem;
}
/* 2-5. 플레이스영역 */
#main-area .place {
  /* 공통 패딩 덮어쓰기 상위 부모넣어줌! */
  padding-bottom: 30vh;
  background: url(../images/bg_shop.jpg) no-repeat center/cover;
}
/* 2-6. 컨텍어스영역 */
.contact-us {
  background-color: var(--contact-area-color);
}

/* 3. 컨텍어스 영역 */
/* 3-1.컨텍어스 내용박스 부모 */
.map-info {
  display: flex;
  padding: 5vh 3vh 10vh;
}
/* 컨텍어스 자식 파티션 박스 등분할 */
.map-info > div {
  /* 정확히 등분할 설정함! */
  flex-basis: 50%;
}
/* 3-2. 지도박스 */
.map-box {
  /* 박스 높이값 없이 비율설정 */
  aspect-ratio: 1.4;
  /* 왼쪽 위아래만 둥근모서리 */
  border-radius: 20px 0 0 20px;
  /* 지도 아이프레임 숨기기 */
  overflow: hidden;
}
.map-box iframe {
  border: none;
  width: 100%;
  height: 100%;
}

/* 3-3. 정보박스 */
.info-box {
  /* 부모자격 - 이미지의 부모 */
  position: relative;
  background-color: #fff;
  /* 오른쪽 위아래만 둥근모서리 */
  border-radius: 0 20px 20px 0;
  padding: 5rem;
  box-sizing: border-box;
}
/* 키티 이미지 앱솔루트! */
.info-box img {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 부모는? .info-box */
  translate: -10% 22%;
}
/* 한글주소 : h3 */
.info-box h3 {
  font-size: 2.5rem;
  line-height: 1.5;
}
/* 영문주소 : address */
.info-box address {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  font-style: normal;
  line-height: 2;
  color: #aaa;
}
/* 전화번호 : p */
.info-box p {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.7;
  color: var(--main-gray-color);
}

/* 4. 하단영역 */
.bottom-area {
  display: flex;
  /* 진행방향 정렬 양쪽끝 */
  justify-content: space-between;
  /* 진행방향 수직 정렬 중앙 */
  align-items: center;
  background-color: #222;
  padding: 5rem;
}
/* 4-1. 카피라잇박스 */
.copy-right img{
  width: 197px;
}
/* 4-2. 버튼박스 */
.btn-box .com-btn:hover{
  background-color: #222;
  color: #fff;
  border-color: #fff;
}

/* 5. sns버튼 박스 */
.q-btn {
  position: fixed;
  width: max(min(60px,5vw),40px);
  top: 10vh;
  right: 1vh;
  z-index: 998;
}
.q-btn img{
  width: 100%;
}
/* 6. 탑이동버튼 */
 .top-btn {
  position: fixed;
  bottom: 30px;
  right: 10px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
}

.top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.top-btn span {
  display: table-cell;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  text-transform: uppercase;
  text-align: center;
  background-color: #4a679e;
  font-size: 1.6rem;
  color: #fff;
  cursor: pointer;
}
.top-btn span:before {
  display: block;
  content: url(../images/top_arr.png);
}