:root {
  /* Color */
  --white: #f5f5f7;
  --black: #1d1d1f;
  --red: #d11719;
  --gray: #86868b;
  --blue-100: #2997ff;
  --blue-200: #0077ed;
  --blue-300: #0071e3;
  --blue-400: #006edb;

  /* Box Size */
  /* 500px의 크기가 부족할 경우 임의대로 수정 가능 */
  --size: 31.25rem; /* 500px - 카드 높이 고정 값 */

  /* Text Size */
  --xx-small-text: 0.75rem; /* 12px - Small Screen 버튼(링크) 글자 크기 */
  --x-small-text: 0.875rem; /* 14px - Large Screen 버튼(링크) 글자 크기 */
  --small-text: 1.0625rem; /* 17px - 출시일 추후 공개 글자 크기 (공통) */
  --base-text: 1.1875rem; /* 19px - Small Screen 부제목 글자 크기 */
  --medium-text: 1.3125rem; /* 21px - Large Screen 부제목 글자 크기 */
  --large-text: 2rem; /* 32px - Small Screen 제목 글자 크기 */
  --extra-large-text: 2.5rem; /* 40px - Large Screen 제목 글자 크기 */

  /* Spacing */
  --x-small-spacing: 0.5rem; /* 8px - 버튼(링크) 상,하단 안쪽 여백, 부제목 하단 여백 */
  --small-spacing: 0.75rem; /* 12px - 카드 제목, 부제목, 버튼(링크)간 여백(gap), 버튼(링크) 좌,우 안쪽 여백 */
  --base-spacing: 1rem; /* 16px - 2개의 버튼(링크) 사이 여백 (공통) */
  --large-spacing: 2.5rem; /* 40px - Small Screen 상단 여백 */
  --extra-large-spacing: 3.75rem; /* 60px - Large Screen 상단 여백 */

  --line-normal: 1.5; /* 부제목 줄간격 */
}

/* body {
  background-repeat: no-repeat;
  background-image: url('../apple_image/ipad_pro.jpeg');
  background-position: center 0;
} */

@media screen and (max-width: 800px) {
  .shell-padpro {
    /* border: yellow solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/ipad_pro.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-padpro header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-padpro strong {
    display: block;
    width: 160px;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;

    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
  }

  .shell-padpro p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-padpro .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padpro .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-padpro .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-padpro {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/ipad_pro.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;

    /* border: red solid; */
  }

  .shell-padpro header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-padpro strong {
    width: 160px;
    margin: 0 auto;
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-padpro p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-padpro .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padpro .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-padpro .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-padpro {
    /* border: yellow solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/ipad_pro_wide.jpeg');
    background-position: center;
    background-size: cover;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;
    /* border: yellow solid; */
  }

  .shell-padpro header {
    margin-top: var(--large-spacing);
    font-size: var(--extra-large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-padpro strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-padpro p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-padpro .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padpro .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-padpro .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

/* 일단 여기까지가 하나의 카드 완성 */

/* 아이패드 에어 */
@media screen and (max-width: 800px) {
  .shell-padair {
    /* border: red solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/ipad_air.jpeg');
    background-position: 0 0;
    background-size: 100% 110%;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-padair header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-padair strong {
    width: 220px;
    margin: 0 auto;
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-padair p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-padair .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padair .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-padair .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-padair {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/ipad_air.jpeg');
    background-position: 0 10px;
    background-size: cover;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-padair header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--black);
    font-weight: 500;
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padair strong {
    width: 220px;
    margin: 0 auto;
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-padair p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-padair .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padair .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-padair .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-padair {
    /* border: yellow solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/ipad_air_wide.jpeg');
    background-position: center;
    background-size: cover;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;

    /* border: red solid; */
  }

  .shell-padair header {
    margin-top: var(--large-spacing);
    font-size: var(--extra-large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-padair strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-padair p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-padair .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-padair .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-padair .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

/* 아이폰 15 프로 */
@media screen and (max-width: 800px) {
  .shell-15pro {
    /* border: red solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/iphone15_pro.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    font-weight: 500;
    /* border: red solid; */
  }

  .shell-15pro header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 400;
  }

  .shell-15pro strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-15pro .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-15pro .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-15pro .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-15pro {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/iphone15_pro.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;

    background-size: cover;
    /* border: red solid; */
  }

  .shell-15pro header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-15pro strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-15pro .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-15pro .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300);
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-15pro .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-15pro {
    /* border: yellow solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/iphone15_pro_wide.jpeg');
    background-position: center;
    background-size: cover;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;
    /* border: blue solid; */
  }

  .shell-15pro header {
    margin-top: var(--extra-large-spacing);
    font-size: var(--extra-large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-15pro strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-15pro p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-15pro .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-15pro .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-15pro .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

/* 기본 아이폰 15 */
@media screen and (max-width: 800px) {
  .shell-15 {
    /* border: red solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/iphone15.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-15 header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-15 strong {
    width: 130px;
    margin: 0 auto;
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-15 .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-15 .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--black);
    border-radius: 20px;
    border: var(--black) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-15 .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--black);
    border: var(--black) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-15 {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/iphone15.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;

    background-size: cover;
    /* border: red solid; */
  }

  .shell-15 header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-15 strong {
    width: 130px;
    margin: 0 auto;
    font-weight: 400;
    font-size: var(--base-text);
    color: var(--black);
    display: block;
    text-align: center;
  }

  .shell-15 .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
    overflow: hidden;
  }

  .shell-15 .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--black);
    border-radius: 20px;
    border: var(--black);
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-15 .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--black);
    border: var(--black) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-15 {
    /* border: yellow solid; */
    width: 50vw;
    display: block;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/iphone15_2x.jpeg');
    /* background-position: 0 0; */
    background-size: cover;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;
    /* border: blue solid; */
  }

  .shell-15 header {
    margin-top: var(--extra-large-spacing);
    font-size: var(--extra-large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-15 strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-15 p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-15 .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-15 .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-15 .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

/* 애플 와치 */
@media screen and (max-width: 800px) {
  .shell-wch {
    /* border: red solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/apple_watch.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-wch header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-wch strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-wch .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-wch .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-wch .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-wch {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/apple_watch.jpeg');
    background-position: center;
    overflow: hidden;
    background-size: cover;
    /* border: red solid; */
  }

  .shell-wch header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-wch strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-wch .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-wch .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300);
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-wch .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-wch {
    width: 50vw;
    /* border: yellow solid; */
    display: block;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/apple_watch_2x.jpeg');
    /* background-position: 0 50; */
    background-size: cover;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;
    /* border: blue solid; */
  }

  .shell-wch header {
    margin-top: var(--extra-large-spacing);
    font-size: var(--extra-large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-wch strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-wch p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-wch .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-wch .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-wch .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

/* 맥북 에어 */
@media screen and (max-width: 800px) {
  .shell-mac {
    /* border: red solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/macbook_air.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-mac header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-mac strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-mac .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-mac .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--black);
    border-radius: 20px;
    border: var(--black) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-mac .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--black);
    border: var(--black) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-mac {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/macbook_air.jpeg');
    background-position: 0 5px;
    background-size: cover;
    overflow: hidden;

    background-size: cover;
    /* border: red solid; */
  }

  .shell-mac header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-mac strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-mac .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-mac .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--black);
    border-radius: 20px;
    border: var(--black);
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-mac .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--black);
    border: var(--black) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-mac {
    /* display: flex; */
    /* border: yellow solid; */
    width: 50vw;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/macbook_air_2x.jpeg');
    background-position: center;
    background-size: cover;
    display: block;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;
    /* border: pink solid; */
  }

  .shell-mac header {
    margin-top: var(--extra-large-spacing);
    font-size: var(--extra-large-text);
    color: var(--black);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
    /* background-color: red; */
  }

  .shell-mac strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--black);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-mac p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-mac .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-mac .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-mac .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

/* 에어팟 */
@media screen and (max-width: 800px) {
  .shell-pds {
    /* border: red solid; */
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/airpods_pro.jpeg');
    background-position: center;
    background-size: cover;
    overflow: hidden;
    /* border: red solid; */
  }

  .shell-pds header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-pds strong {
    width: 170px;
    margin: 0 auto;
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-pds .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-pds .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-pds .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 800px) and (max-width: 1023px) {
  .shell-pds {
    width: 100%;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/airpods_pro.jpeg');
    background-position: center;
    overflow: hidden;

    background-size: cover;
    /* border: red solid; */
  }

  .shell-pds header {
    margin-top: var(--large-spacing);
    font-size: var(--large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-pds strong {
    width: 170px;
    margin: 0 auto;
    margin-bottom: var(--x-small-spacing);
    font-size: var(--base-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-pds .a-layout {
    text-align: center;
    margin-top: var(--small-spacing);
  }

  .shell-pds .more-btn {
    font-size: var(--xx-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300);
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-pds .prc-btn {
    font-size: var(--xx-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .shell-pds {
    /* border: yellow solid; */
    width: 50vw;
    height: var(--size);
    background-repeat: no-repeat;
    background-image: url('../apple_image/airpods_pro_2x.jpeg');
    background-position: center;
    background-size: cover;
    display: block;
    /* aspect-ratio: 3/ 1; */

    overflow: hidden;
    margin-bottom: 10px;
    /* border: blue solid; */
  }

  .shell-pds header {
    margin-top: var(--extra-large-spacing);
    font-size: var(--extra-large-text);
    color: var(--white);
    text-align: center;
    margin-bottom: var(--small-spacing);
    font-weight: 500;
  }

  .shell-pds strong {
    margin-bottom: var(--x-small-spacing);
    font-size: var(--medium-text);
    color: var(--white);
    display: block;
    text-align: center;
    font-weight: 400;
  }

  .shell-pds p {
    font-size: var(--small-text);
    color: var(--gray);
    text-align: center;
    font-weight: 400;
  }

  .shell-pds .a-layout {
    text-align: center;
    margin-bottom: var(--small-spacing);
  }

  .shell-pds .more-btn {
    font-size: var(--x-small-text);
    color: var(--white);
    background-color: var(--blue-300);
    border-radius: 20px;
    border: var(--blue-300) solid;
    margin-right: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
  .shell-pds .prc-btn {
    font-size: var(--x-small-text);
    color: var(--blue-300);
    border: var(--blue-300) solid;
    border-radius: 20px;
    margin-left: calc(var(--base-spacing) / 2);
    text-decoration: none;
    padding: var(--x-small-spacing);
  }
}

@media screen and (min-width: 1024px) {
  .wide-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
  }
  .shell-15,
  .shell-wch,
  .shell-mac,
  .shell-pds {
    width: 50vw;
    height: var(--size);
    box-sizing: border-box;
    display: block;
  }
}

/* 픽셀에 따른 1배 또는 2배 이미지 */
.shell-padpro {
  background-image: -webkit-image-set(url('../apple_image/ipad_pro.jpeg') 1x, url('../apple_image/ipad_pro_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/ipad_pro.jpeg') 1x, url('../apple_image/ipad_pro_2x.jpeg') 2x);
}
.shell-padair {
  background-image: -webkit-image-set(url('../apple_image/ipad_air.jpeg') 1x, url('../apple_image/ipad_air_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/ipad_air.jpeg') 1x, url('../apple_image/ipad_air_2x.jpeg') 2x);
}
.shell-15pro {
  background-image: -webkit-image-set(url('../apple_image/iphone15_pro.jpeg') 1x, url('../apple_image/iphone15_pro_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/iphone15_pro.jpeg') 1x, url('../apple_image/iphone15_pro_2x.jpeg') 2x);
}
.shell-15 {
  background-image: -webkit-image-set(url('../apple_image/iphone15.jpeg') 1x, url('../apple_image/iphone15_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/iphone15.jpeg') 1x, url('../apple_image/iphone15_2x.jpeg') 2x);
}
.shell-wch {
  background-image: -webkit-image-set(url('../apple_image/apple_watch.jpeg') 1x, url('../apple_image/apple_watch_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/apple_watch.jpeg') 1x, url('../apple_image/apple_watch_2x.jpeg') 2x);
}
.shell-mac {
  background-image: -webkit-image-set(url('../apple_image/macbook_air.jpeg') 1x, url('../apple_image/macbook_air_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/macbook_air.jpeg') 1x, url('../apple_image/macbook_air_2x.jpeg') 2x);
}
.shell-pds {
  background-image: -webkit-image-set(url('../apple_image/airpods_pro.jpeg') 1x, url('../apple_image/airpods_pro_2x.jpeg') 2x);
  background-image: image-set(url('../apple_image/airpods_pro.jpeg') 1x, url('../apple_image/airpods_pro_2x.jpeg') 2x);
}