@charset "UTF-8";
/* 
고칠 점 ... 
1. 전체적으로 svg 아이콘 크기 조정 -> 오른쪽 상단 검색 아이콘 색도 바꿔야됨
2. 로고 png로 바꾸던가해서 배경 검정 없애기
3. 상단 광고 배너 어케 좀 하기
4. responsive.scss로 줄이면 flex-flow:column nowrap되도록 만들기
5. 제일 왼쪽 작은 사진 thumnail들 높이 조정
6. 작은 사진 화살표... background 조정 + border-radius 조정해서 원 만들기
7. 작은 사진 아래는 gradient 줘서 좀 가려져야됨 // 게다가 이거 눌러서 이동 가능하게 만들
8. 7(위) 자바스크립트랑 같은 맥락으로 카드부분도 눌러서 이동 가능하도록 만들어야 함
9. 수량 변경 시 가격 이상하게 나오는거 고치기!!! 그리고 옆에 (1개) 이것도 바뀌도록 html에서 em이라던가 뭐든 태그 추가해서 js 삽입
10. 좋아요 버튼 바꾸기. 하트 빈걸로 .. 그리고 누르면 채워진걸로 나오도록 -> 반복 가능하게
11. 장바구니 버튼이랑 바로구매 버튼 // 로그인 시 누르면 각 페이지로 이동 // 로그아웃 시 누르면 로그인 페이지로 이동하도록 js 추가
12. 큰 사진도 붙잡고 좌우로 움직일 수 있도록 -> 왼쪽 썸네일 애니메이션도 함께 움직여야됨. 
13. responsive 할거면 메뉴도 없애고 머 등등 해보자잇
14. 작은 이미지에 hover 추가. 약간 흐려지게 만듦, 클릭하면 border 생김 
    움직임은 자연스럽 ... 그리고 transition있는 것 가틈
    밑에 원도 있음 원이 선택된 건 큰 원 검정색이 되고 비활성화는 회색 작아짐 근데 눌리진 않음
*/
body header .top_bar_banner {
  background-color: #000;
  height: 40px;
}
body header .top_bar_banner img {
  width: 100%;
  height: 100%;
}
body header .header_menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  justify-content: space-between;
  margin: 0 100px;
  height: 90px;
}
body header .header_menu h1 img {
  width: 157px;
}
body header .header_menu .header_menu_list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 60px;
}
body header .header_menu .header_menu_list li {
  line-height: 90px;
}
body header .header_menu .header_menu_list li a {
  height: 100%;
  font-size: 1.125rem;
  font-weight: 500;
}
body header .header_menu .header_icons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
body #wrap {
  margin: 0 auto;
  width: 1400px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 40px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
body #wrap .nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
body #wrap .nav li {
  font-size: 0.875rem;
}
body #wrap .nav li a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}
body #wrap .nav {
  /* ">" ============================================================================after로 어디에 어떻게 넣지???????????????????????????????????????? */
}
body #wrap .main_contents {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
body #wrap .main_contents .left_contents {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  justify-content: center;
}
body #wrap .main_contents .left_contents .left_preview {
  height: 678px;
}
body #wrap .main_contents .left_contents .left_preview { /* 개별 선택자 top_arrow, bottom_arrow */ /* ================아래 화살표 위치 설정 어떻게? */
}
body #wrap .main_contents .left_contents .left_preview .smallphoto_list {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
}
body #wrap .main_contents .left_contents .left_preview .smallphoto_list .preview {
  width: 84px;
  height: 84px;
  overflow: hidden; /* =-===========================사진 가운데로 오게 어케하지???????? */
}
body #wrap .main_contents .left_contents .left_preview .smallphoto_list .preview img {
  width: 100%;
  size: cover;
}
body #wrap .main_contents .left_contents .left_preview {
  /* 개별 선택자 small1~10 */
}
body #wrap .main_contents .big_view {
  width: 508px;
  height: 678px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
body #wrap .main_contents .big_view .photo { /* 개별 선택자 big1~10 */ }
body #wrap .main_contents .big_view .photo img {
  width: 508px;
}
body #wrap .right_contents {
  width: 706px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
}
body #wrap .right_contents .product_info .line1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;
}
body #wrap .right_contents .product_info .line1 h2 {
  line-height: 120%;
  font-size: 1.875rem;
  font-weight: 600;
}
body #wrap .right_contents .product_info .line1 a {
  width: 24px;
  height: 24px;
}
body #wrap .right_contents .product_info .line1 a img {
  width: 100%;
}
body #wrap .right_contents .product_info {
  /* ========================================================================================svg============================= */
}
body #wrap .right_contents .product_info p {
  margin-top: 20px;
  font-size: 1rem;
}
body #wrap .right_contents .price_info {
  position: relative;
  width: 100%;
}
body #wrap .right_contents .price_info p {
  font-size: 1.25rem;
}
body #wrap .right_contents .price_info p em {
  font-size: 0.875rem;
  color: #999;
}
body #wrap .right_contents .price_info p strong {
  color: #FF4519;
  font-weight: 600;
}
body #wrap .right_contents .price_info p:nth-child(2) {
  margin-top: 5px;
  font-size: 1.5rem;
  font-weight: 600;
}
body #wrap .right_contents .price_info .hidden_price_info {
  display: none;
  font-size: 0.875rem;
  padding: 10px;
  border-radius: 10px;
  background-color: #999;
  position: absolute;
  left: 250px;
  color: #fff;
}
body #wrap .right_contents #all {
  width: 706px;
  overflow: hidden;
  background-color: aqua;
  padding: 5px;
}
body #wrap .right_contents #all .info_card {
  display: flex;
  flex-flow: row nowrap;
  gap: 14px;
  width: clac(896px);
  transition: transform 0.3s ease-out;
}
body #wrap .right_contents #all .info_card .card { /* 개별 선택자 card1~4 */
  flex-shrink: 0;
  min-width: 280px;
  width: 448px;
  height: 96px;
  border-radius: 10px;
  background-color: #f6f6f6;
  padding: 20px 30px;
  /* flex? float? dt를 왼쪽에 dd를 오른쪽에 어떻게 배치할지 고민 필요 */
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  align-items: center;
}
body #wrap .right_contents #all .info_card .card dt {
  font-size: 0.875rem;
  width: 60px;
}
body #wrap .right_contents #all .info_card .card dd {
  line-height: 120%;
  font-size: 0.813rem;
  width: 100%;
}
body #wrap .right_contents #all .info_card .card1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
body #wrap .right_contents #all .info_card .card1 dt {
  width: 35px;
  height: 35px;
}
body #wrap .right_contents #all .info_card .card1 dt img {
  width: 100%;
}
body #wrap .right_contents #all .info_card .card1 dd .card1dt {
  font-size: 0.75rem;
  line-height: 120%;
}
body #wrap .right_contents #all .info_card .card1 dd {
  font-size: 0.813rem;
}
body #wrap .right_contents #all .info_card {
  /* ========================================================================== 얘 혼자 디자인 다름!!!!!!!!!!!!! */
}
body #wrap .right_contents .shippay_info {
  width: 100%;
  padding: 30px 0;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}
body #wrap .right_contents .shippay_info dt {
  font-size: 0.75rem;
}
body #wrap .right_contents .shippay_info dd {
  font-size: 0.75rem;
}
body #wrap .right_contents .order_box {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #E5E5E5;
  padding: 24px;
}
body #wrap .right_contents .order_box .order_product_name {
  margin-bottom: 30px;
  font-weight: 600;
}
body #wrap .right_contents .order_box .order_num_view {
  float: left;
  border: 1px solid #E5E5E5;
  width: max-content;
}
body #wrap .right_contents .order_box .order_num_view #minus_btn {
  width: 30px;
  height: 30px;
}
body #wrap .right_contents .order_box .order_num_view #order_num {
  text-align: center;
  width: 45px;
  height: 30px;
}
body #wrap .right_contents .order_box .order_num_view { /* input */ }
body #wrap .right_contents .order_box .order_num_view #plus_btn {
  width: 30px;
  height: 30px;
}
body #wrap .right_contents .order_box .order_price {
  float: right;
  font-weight: 600;
  font-size: 1.25rem;
}
body #wrap .right_contents .order_result {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
body #wrap .right_contents .order_result p {
  font-size: 1rem;
  font-weight: 600;
}
body #wrap .right_contents .order_result p em {
  font-size: 1.875rem;
  font-weight: 600;
}
body #wrap .right_contents .order_result p span {
  font-size: 0.875rem;
}
body #wrap .right_contents .right_btm_btn {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
body #wrap .right_contents .right_btm_btn #like_btn {
  height: 60px;
  background-color: #999;
  width: 58px;
  margin-right: 5px;
  border-radius: 10px;
  border: 1px solid #000;
}
body #wrap .right_contents .right_btm_btn .last_btn { /* 공통 */
  height: 60px;
  border: 1px solid #000;
  border-radius: 10px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
body #wrap .right_contents .right_btm_btn .last_btn .last_btn_cart {
  line-height: 60px;
  width: 100%;
  text-align: center;
}
body #wrap .right_contents .right_btm_btn .last_btn {
  /* 개별 */
}
body #wrap .right_contents .right_btm_btn .last_btn .last_btn_buy {
  line-height: 60px;
  width: 100%;
  background-color: #000;
  text-align: center;
  color: #fff;
}
body #wrap .right_contents .right_btm_btn .last_btn {
  /* 개별 */
}
body #wrap .right_contents .sub_detail p {
  font-size: 0.875rem;
}
body #wrap .right_contents .sub_detail p em {
  font-weight: 600;
}

/*# sourceMappingURL=main.css.map */