@charset "utf-8";

/* 변수 설정 */
:root {
  --m_color: #00704a; /*메인*/
  --txt_color: #333; /*텍스트*/
  --bg_color1: #f6f5ef; /*상단배경*/
  --bg_color2: #2C2A29; /*푸터배경*/
}

/* 공통서식 */
body {font-family: "맑은고딕", Arial, Helvetica, sans-serif; color: var(--txt_color);
  font-size: 0.75rem; /*12px*/ 
  /* https://nekocalc.com/px-to-em-converter (px > em 단위 변환 싸이트) */
}
a {color:var(--txt_color); text-decoration: none;}
input[type='checkbox'] {display: none;}

/* 헤더서식 */
header {height: 70px; background: var(--bg_color1); position: relative;}
header h1 {width: 54px;}
header h1 img {width: 100%; padding: 8px 0 0 10px;}

/* 네비게이션 아이콘 */
.login_btn, .location_btn, .toggle_btn {position: absolute; cursor: pointer;}
.login_btn {top: 15px; right: 128px;}
.location_btn {top: 15px; right:78px;}
.toggle_btn {top:20px; right: 12px;}

.login_btn img {width: 32px;}
.location_btn img {width: 28px;}
.toggle_btn img {width: 42px;}





/* 네비게이션 투명 뒷배경 */
header .gnb {width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);
  position: fixed;
  left: 100%; /* 100%로 빼서 오른쪽 바깥으로 나가게 함 */
  top: 0;
  transition: 0.5s;
  z-index: 99999;
}

/* 토글 체크박스에 체크시, gnb가 날아들어와야 함 */
#toggle:checked + header .gnb {left: 0;}


/* 네비게이션 서식 */
header .gnb ul {background-color: #000; width: 70%; height: 100%; position: absolute; right: 0; top: 0;}
header .gnb > ul > li {line-height: 50px; padding: 0 15px; border-bottom: 1px solid rgb(82,82,82);}
header .gnb > ul > li > a {color: #fff; font-size: 1rem;
  display: block; /*a태그의 display속성을 바꿔서 꼭 끝까지 터치 되게 해주기*/
}
header .gnb > ul > li > a:hover {text-decoration: underline;}


/* 검색창 서식 */
header .gnb input {height: 30px; padding: 0 10px; border-radius: 3px; border: none;}
header .gnb input[type='search'] {width: 55%; margin-right: 10px;}
header .gnb input[type='button'] {width: 70px; background-color: #666; color: #fff; text-transform: capitalize;}
header .gnb > ul > li:first-child {text-align: center; padding: 15px 0;}
header .gnb ul li:first-child, header .gnb ul li:nth-child(2) {background-color: #2d2926;}
header .gnb > ul > li > a > img {
  /*3번*/ float: right; width: 30px; 
  /*1번*/ position: relative; top: 1px;
  /*2번*/ transform: translateY(8px);
  /*
  위치 옮길때 쓰는 다양한 방법
  1. positon: relative = '자기 자신의 위치에서' 몇 픽셀 내린다 ★★★
  2. transform : translate = 약간 이동
  3. float
  */
}

/* 닫기 버튼 */
header .gnb .close_btn {
  position: absolute; top: 15px; left: 110px;
  transition: 0.8s; /* 부드럽게 돌리기 - hover가 아닌 원본에 transition 주기 */
} 
header .gnb .close_btn:hover {
  transform: rotate(180deg); /* 반바퀴 돌리기 */
  cursor: pointer;
}





/* 메인 콘텐츠 영역 */
main {padding: 10px}
.product h2 {font-size: 16px; font-weight: bold;}
.product h2 img {width: 40px; transform: translateY(8px);}
.product h2, .product h2 + p {background-color: #e0dfdf; text-indent: 15px; line-height: 30px;}
.product > ul {margin-top: 25px;
  display: flex;
  flex-wrap: wrap; /* 가로 영역 벗어날 시 다음줄로 이동됨*/
  justify-content: space-between;
}
.product > ul > li {width: 49%; overflow: hidden; text-align: center; position: relative;}
.product > ul > li img {width:100%; transition: 0.3s; overflow: hidden;}
.product > ul > li:hover img {transform: scale(110%);}
.product > ul > li > a {display: flex;}
.product > ul > li > span {display: block; font-size: 14px; background: #fff;
    position: relative; z-index: 99; line-height: 50px;} /* span태그는 높이값은 못가지지만 줄간격은 줄 수 있다! */
.product > ul > li span.new_i {background-color: var(--m_color); color: #fff; border-radius: 50%; width: 50px; height: 50px;  position: absolute; bottom:70px; left:15px;}


/* footer 서식 */
footer {font-style: normal; text-align: center; line-height: 50px; background: var(--txt_color); color: #fff;}