@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&family=Noto+Sans+TC:wght@500;700;900&family=Roboto:wght@300;500;700;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

a:focus {
  outline: 0;
}
a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: yellow;
  color: black;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
  bottom: -0.25em;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button] {
  -webkit-appearance: button;
  cursor: pointer;
}

input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix {
  zoom: 1;
}
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
  line-height: 1;
}

a {
  text-decoration: none;
  color: black;
}

button,
input,
textarea,
select {
  outline: 0;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

select::-ms-expand {
  display: none;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
}

.search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 0) and (max-width: 480px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 100%;
    padding: 0 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 100%;
    padding: 0 2.4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 100%;
    padding: 0 2.4rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 1080px;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 1440px;
  }
}
@media (min-width: 1920px) and (max-width: 2560px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 1600px;
  }
}
@media (min-width: 2560px) {
  .search__inner, .membership__inner, .contact__inner, .privacy__inner, .policies__inner, .course-detail__inner, .course-list__inner, .pet-related-post__inner, .pet-article-post__inner, .pet-article-list__inner, .tammie-book__inner, .tammie-intro__inner, .tammie-wrap__inner, .tammie-hero__inner, .about-pet-pulse__inner, .latest-video__inner, .latest-courses__inner, .latest-articles__inner, .user-page__inner, .site-header__inner, .site-footer__inner {
    width: 1600px;
  }
}

.nutrition-quiz__btn, .pet-report__btn, .pet-report__btn-back, .pet-profile__btn-delete-file, .pet-profile__btn-download, .pet-profile__btn-new, .pet-profile__btn-add, .pet-profile__btn-update, .pets-item__btn, .pets-item__btn-delete, .user-profile__upgrade, .user-profile__member, .user-profile__btn-update, .course-list__btn-purchasing, .course-list__btn-intro, .course-list__btn-apply, .login-ui__btn-submit {
  box-sizing: content-box;
  background-color: var(--color-main-800);
  border-radius: 0.8rem;
  padding: 1rem 1.6rem;
  font-size: var(--font-size-sm);
  color: var(--color-main-100);
  transition: all 300ms ease;
  border: solid 0.1rem var(--color-main-800);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
.nutrition-quiz__btn:hover, .pet-report__btn:hover, .pet-report__btn-back:hover, .pet-profile__btn-delete-file:hover, .pet-profile__btn-download:hover, .pet-profile__btn-new:hover, .pet-profile__btn-add:hover, .pet-profile__btn-update:hover, .pets-item__btn:hover, .pets-item__btn-delete:hover, .user-profile__upgrade:hover, .user-profile__member:hover, .user-profile__btn-update:hover, .course-list__btn-purchasing:hover, .course-list__btn-intro:hover, .course-list__btn-apply:hover, .login-ui__btn-submit:hover {
  background-color: var(--color-main-900);
  border-color: var(--color-main-900);
}
[disabled].nutrition-quiz__btn, [disabled].pet-report__btn, [disabled].pet-report__btn-back, [disabled].pet-profile__btn-delete-file, [disabled].pet-profile__btn-download, [disabled].pet-profile__btn-new, [disabled].pet-profile__btn-add, [disabled].pet-profile__btn-update, [disabled].pets-item__btn, [disabled].pets-item__btn-delete, [disabled].user-profile__upgrade, [disabled].user-profile__member, [disabled].user-profile__btn-update, [disabled].course-list__btn-purchasing, [disabled].course-list__btn-intro, [disabled].course-list__btn-apply, [disabled].login-ui__btn-submit {
  opacity: 0.5;
  pointer-events: none;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__btn, .pet-report__btn, .pet-report__btn-back, .pet-profile__btn-delete-file, .pet-profile__btn-download, .pet-profile__btn-new, .pet-profile__btn-add, .pet-profile__btn-update, .pets-item__btn, .pets-item__btn-delete, .user-profile__upgrade, .user-profile__member, .user-profile__btn-update, .course-list__btn-purchasing, .course-list__btn-intro, .course-list__btn-apply, .login-ui__btn-submit {
    width: min-content;
    padding: 0.8rem 1rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .nutrition-quiz__btn, .pet-report__btn, .pet-report__btn-back, .pet-profile__btn-delete-file, .pet-profile__btn-download, .pet-profile__btn-new, .pet-profile__btn-add, .pet-profile__btn-update, .pets-item__btn, .pets-item__btn-delete, .user-profile__upgrade, .user-profile__member, .user-profile__btn-update, .course-list__btn-purchasing, .course-list__btn-intro, .course-list__btn-apply, .login-ui__btn-submit {
    padding: 0.8rem 1rem;
  }
}

.my-course__btn-purchasing, .search__btn-submit, .certificate-nav__btn-back, .certificate-nav__btn-download, .certificate__btn-download, .membership__btn, .pet-journal-post__btn-edit, .pet-journal-post__btn-delete, .pet-profile__btn-add-journal, .croppie-overlay__upload-result, .course-detail__btn-cancel, .course-detail__btn-order, .course-detail__btn-back, .course-detail__btn-link, .pet-article-post__btn-collect, .pet-article-post__purchasing a, .article-item__btn-delete, .site-header__btn-search, .site-header__btn-sign-out, .site-header__btn-register, .site-header__btn-login {
  white-space: nowrap;
  box-sizing: border-box;
  background-color: var(--color-main-800);
  border-radius: 0.8rem;
  padding: 0.8rem 1.6rem;
  font-size: var(--font-size-base);
  color: var(--color-main-100);
  transition: all 300ms ease;
  border: solid 0.1rem var(--color-main-800);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.my-course__btn-purchasing:hover, .search__btn-submit:hover, .certificate-nav__btn-back:hover, .certificate-nav__btn-download:hover, .certificate__btn-download:hover, .membership__btn:hover, .pet-journal-post__btn-edit:hover, .pet-journal-post__btn-delete:hover, .pet-profile__btn-add-journal:hover, .croppie-overlay__upload-result:hover, .course-detail__btn-cancel:hover, .course-detail__btn-order:hover, .course-detail__btn-back:hover, .course-detail__btn-link:hover, .pet-article-post__btn-collect:hover, .pet-article-post__purchasing a:hover, .article-item__btn-delete:hover, .site-header__btn-search:hover, .site-header__btn-sign-out:hover, .site-header__btn-register:hover, .site-header__btn-login:hover {
  background-color: var(--color-main-900);
  border-color: var(--color-main-900);
}
@media (min-width: 0) and (max-width: 480px) {
  .my-course__btn-purchasing, .search__btn-submit, .certificate-nav__btn-back, .certificate-nav__btn-download, .certificate__btn-download, .membership__btn, .pet-journal-post__btn-edit, .pet-journal-post__btn-delete, .pet-profile__btn-add-journal, .croppie-overlay__upload-result, .course-detail__btn-cancel, .course-detail__btn-order, .course-detail__btn-back, .course-detail__btn-link, .pet-article-post__btn-collect, .pet-article-post__purchasing a, .article-item__btn-delete, .site-header__btn-search, .site-header__btn-sign-out, .site-header__btn-register, .site-header__btn-login {
    font-size: var(--font-size-sm);
  }
}

.forget-password__btn-submit, .contact__btn-submit, .course-list__btn-more, .login-ui__btn-google, .login-ui__btn-facebook, .latest-video__btn-more, .latest-courses__btn-more {
  box-sizing: border-box;
  background-color: var(--color-main-800);
  border-radius: 0.8rem;
  padding: 1.2rem 2.4rem;
  font-size: var(--font-size-lg);
  color: var(--color-main-100);
  transition: background-color 300ms ease;
  border: 0;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
  width: min-content;
}
.forget-password__btn-submit:hover, .contact__btn-submit:hover, .course-list__btn-more:hover, .login-ui__btn-google:hover, .login-ui__btn-facebook:hover, .latest-video__btn-more:hover, .latest-courses__btn-more:hover {
  background-color: var(--color-main-900);
}

.search__main-title, .forget-password__main-title, .membership__main-title, .contact__main-title, .privacy__main-title, .policies__main-title, .pet-profile__main-title, .user-article__main-title, .user-course__main-title, .user-pets__main-title, .user-profile__main-title, .course-detail__main-title, .course-list__main-title, .pet-related-post__main-title, .pet-article-list__main-title, .tammie-book__main-title, .tammie-intro__main-title, .about-pet-pulse__main-title, .login-ui__main-title, .latest-video__main-title, .latest-courses__main-title, .latest-articles__main-title {
  font-size: clamp(var(--font-size-base), 5vw, var(--font-size-2xl));
  color: var(--color-main-800);
  padding-bottom: 2rem;
  margin-bottom: 4rem;
  border-bottom: 0.1rem solid var(--color-main-300);
  position: relative;
}
.search__main-title::after, .forget-password__main-title::after, .membership__main-title::after, .contact__main-title::after, .privacy__main-title::after, .policies__main-title::after, .pet-profile__main-title::after, .user-article__main-title::after, .user-course__main-title::after, .user-pets__main-title::after, .user-profile__main-title::after, .course-detail__main-title::after, .course-list__main-title::after, .pet-related-post__main-title::after, .pet-article-list__main-title::after, .tammie-book__main-title::after, .tammie-intro__main-title::after, .about-pet-pulse__main-title::after, .login-ui__main-title::after, .latest-video__main-title::after, .latest-courses__main-title::after, .latest-articles__main-title::after {
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 0.1rem solid var(--color-main-600);
  transform: translate3d(0, 0.1rem, 0);
  width: 6rem;
  height: 0;
  content: "";
}
@media (min-width: 0) and (max-width: 480px) {
  .search__main-title, .forget-password__main-title, .membership__main-title, .contact__main-title, .privacy__main-title, .policies__main-title, .pet-profile__main-title, .user-article__main-title, .user-course__main-title, .user-pets__main-title, .user-profile__main-title, .course-detail__main-title, .course-list__main-title, .pet-related-post__main-title, .pet-article-list__main-title, .tammie-book__main-title, .tammie-intro__main-title, .about-pet-pulse__main-title, .login-ui__main-title, .latest-video__main-title, .latest-courses__main-title, .latest-articles__main-title {
    margin-bottom: 2.4rem;
    padding-bottom: 1.2rem;
  }
}

.pet-article-post__tag-list, .latest-video__tag-list, .latest-articles__tag-list, .article-item__tag-list {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 0;
}

.pet-article-post__btn-tag, .latest-video__btn-tag, .latest-articles__btn-tag, .article-item__btn-tag {
  white-space: nowrap;
  background-color: var(--color-main-200);
  color: var(--color-main-800);
  padding: 0.8rem 1.2rem;
  font-size: var(--font-size-sm);
  border-radius: 0.4rem;
  transition: background-color 300ms ease;
  border: solid 0.1rem var(--color-main-300);
}
.pet-article-post__btn-tag:hover, .latest-video__btn-tag:hover, .latest-articles__btn-tag:hover, .article-item__btn-tag:hover {
  background-color: var(--color-main-300);
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .pet-article-post__btn-tag, .latest-video__btn-tag, .latest-articles__btn-tag, .article-item__btn-tag {
    padding: 0.8rem;
  }
}

.certificate__info, .pet-journal-post__info, .course-detail__info, .course-list__info, .pet-article-post__info, .latest-video__info, .latest-courses__info, .latest-articles__info, .article-item__info {
  display: flex;
  gap: 1.6rem;
}
.certificate__info span, .pet-journal-post__info span, .course-detail__info span, .course-list__info span, .pet-article-post__info span, .latest-video__info span, .latest-courses__info span, .latest-articles__info span, .article-item__info span {
  color: var(--color-main-700);
  font-size: var(--font-size-base);
}
.certificate__info span strong, .pet-journal-post__info span strong, .course-detail__info span strong, .course-list__info span strong, .pet-article-post__info span strong, .latest-video__info span strong, .latest-courses__info span strong, .latest-articles__info span strong, .article-item__info span strong {
  color: var(--color-main-800);
  padding-left: 0.8rem;
}

.certificate__label, .membership__row small, .course-detail__item-method, .course-detail__type, .course-detail__label, .course-list__label {
  background-color: var(--color-main-100);
  color: var(--color-main-800);
  font-size: var(--font-size-sm);
  display: flex;
  padding: 0.6rem 1.2rem;
  position: relative;
  line-height: 1.5;
  border-radius: 0.8rem;
  border: solid 0.1rem var(--color-main-300);
  width: max-content;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__label, .membership__row small, .course-detail__item-method, .course-detail__type, .course-detail__label, .course-list__label {
    font-size: var(--font-size-xs);
  }
}

.certificate__course-title a, .course-list__course-title a, .latest-video__main-post-title a, .latest-courses__main-post-title a, .latest-articles__main-post-title a, .article-item__main-post-title a {
  font-weight: 900;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  color: var(--color-main-800);
}
.certificate__course-title a:hover, .course-list__course-title a:hover, .latest-video__main-post-title a:hover, .latest-courses__main-post-title a:hover, .latest-articles__main-post-title a:hover, .article-item__main-post-title a:hover {
  color: var(--color-main-900);
  transition: color 300ms ease;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__course-title a, .course-list__course-title a, .latest-video__main-post-title a, .latest-courses__main-post-title a, .latest-articles__main-post-title a, .article-item__main-post-title a {
    font-size: var(--font-size-lg);
  }
}

.pet-journal-post__content p, .latest-articles__main-post-text, .article-item__main-post-text {
  line-height: 1.6;
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  letter-spacing: 0.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-journal-post__content p, .latest-articles__main-post-text, .article-item__main-post-text {
    font-size: var(--font-size-sm);
  }
}

.latest-video__post, .latest-courses__post, .latest-articles__post, .article-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, min-content);
  gap: 1.6rem;
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-video__post, .latest-courses__post, .latest-articles__post, .article-item {
    grid-template-columns: repeat(2, 1fr);
  }
}

.latest-video__post-detail, .latest-courses__post-detail, .latest-articles__post-detail, .article-item__post-detail {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3.2rem 2rem;
  gap: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-video__post-detail, .latest-courses__post-detail, .latest-articles__post-detail, .article-item__post-detail {
    grid-template-rows: 1fr min-content min-content;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .latest-video__post-detail, .latest-courses__post-detail, .latest-articles__post-detail, .article-item__post-detail {
    grid-template-rows: 1fr min-content 2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .latest-video__post-detail, .latest-courses__post-detail, .latest-articles__post-detail, .article-item__post-detail {
    grid-template-rows: 1fr min-content 2rem;
  }
}

.latest-video__post-content, .latest-courses__post-content, .latest-articles__post-content, .article-item__post-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.certificate__teacher-image, .pet-journal-post__post-img, .pets-item__img, .pet-article-post__post-img, .latest-video__post-img, .latest-courses__post-img, .latest-articles__post-img, .article-item__post-img, .course-list__teacher-image {
  position: relative;
}
.certificate__teacher-image img, .pet-journal-post__post-img img, .pets-item__img img, .pet-article-post__post-img img, .latest-video__post-img img, .latest-courses__post-img img, .latest-articles__post-img img, .article-item__post-img img, .course-list__teacher-image img {
  border-radius: 1.2rem;
  object-fit: contain;
  max-width: 100%;
  display: block;
  margin: 0;
}
.certificate__teacher-image img.lazy, .pet-journal-post__post-img img.lazy, .pets-item__img img.lazy, .pet-article-post__post-img img.lazy, .latest-video__post-img img.lazy, .latest-courses__post-img img.lazy, .latest-articles__post-img img.lazy, .article-item__post-img img.lazy, .course-list__teacher-image img.lazy {
  opacity: 0;
}
.certificate__teacher-image img:not(.initial), .pet-journal-post__post-img img:not(.initial), .pets-item__img img:not(.initial), .pet-article-post__post-img img:not(.initial), .latest-video__post-img img:not(.initial), .latest-courses__post-img img:not(.initial), .latest-articles__post-img img:not(.initial), .article-item__post-img img:not(.initial), .course-list__teacher-image img:not(.initial) {
  transition: opacity 1000ms, transform 300ms ease;
}
.certificate__teacher-image img.initial, .pet-journal-post__post-img img.initial, .pets-item__img img.initial, .pet-article-post__post-img img.initial, .latest-video__post-img img.initial, .latest-courses__post-img img.initial, .latest-articles__post-img img.initial, .article-item__post-img img.initial, .course-list__teacher-image img.initial, .certificate__teacher-image img.loaded, .pet-journal-post__post-img img.loaded, .pets-item__img img.loaded, .pet-article-post__post-img img.loaded, .latest-video__post-img img.loaded, .latest-courses__post-img img.loaded, .latest-articles__post-img img.loaded, .article-item__post-img img.loaded, .course-list__teacher-image img.loaded, .certificate__teacher-image img.error, .pet-journal-post__post-img img.error, .pets-item__img img.error, .pet-article-post__post-img img.error, .latest-video__post-img img.error, .latest-courses__post-img img.error, .latest-articles__post-img img.error, .article-item__post-img img.error, .course-list__teacher-image img.error {
  opacity: 1;
}
.certificate__teacher-image img:not([src]), .pet-journal-post__post-img img:not([src]), .pets-item__img img:not([src]), .pet-article-post__post-img img:not([src]), .latest-video__post-img img:not([src]), .latest-courses__post-img img:not([src]), .latest-articles__post-img img:not([src]), .article-item__post-img img:not([src]), .course-list__teacher-image img:not([src]) {
  visibility: hidden;
}
.certificate__teacher-image a, .pet-journal-post__post-img a, .pets-item__img a, .pet-article-post__post-img a, .latest-video__post-img a, .latest-courses__post-img a, .latest-articles__post-img a, .article-item__post-img a, .course-list__teacher-image a {
  background: var(--color-main-200);
  background: linear-gradient(to right, var(--color-main-200) 0%, var(--color-main-400) 50%, var(--color-main-200) 100%);
  background-size: 1000px 640px;
  border-radius: 1.2rem;
  aspect-ratio: 3/2;
  width: 100%;
  display: block;
  overflow: hidden;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: ease-in-out;
}
.certificate__teacher-image a:hover img, .pet-journal-post__post-img a:hover img, .pets-item__img a:hover img, .pet-article-post__post-img a:hover img, .latest-video__post-img a:hover img, .latest-courses__post-img a:hover img, .latest-articles__post-img a:hover img, .article-item__post-img a:hover img, .course-list__teacher-image a:hover img {
  transform: scale(1.05);
}

.course-detail__teacher-image, .course-detail__kv {
  aspect-ratio: 3/2;
  background: var(--color-main-200);
  background: linear-gradient(to right, var(--color-main-200) 0%, var(--color-main-400) 50%, var(--color-main-200) 100%);
  background-size: 1000px 640px;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  border-radius: 1.2rem;
  overflow: hidden;
}
.course-detail__teacher-image img, .course-detail__kv img {
  object-fit: contain;
  max-width: 100%;
  display: block;
  margin: 0;
  border-radius: 1.2rem;
}
.course-detail__teacher-image img.lazy, .course-detail__kv img.lazy {
  opacity: 0;
}
.course-detail__teacher-image img:not(.initial), .course-detail__kv img:not(.initial) {
  transition: opacity 1000ms, transform 500ms ease;
}
.course-detail__teacher-image img.initial, .course-detail__kv img.initial, .course-detail__teacher-image img.loaded, .course-detail__kv img.loaded, .course-detail__teacher-image img.error, .course-detail__kv img.error {
  opacity: 1;
}
.course-detail__teacher-image img:not([src]), .course-detail__kv img:not([src]) {
  visibility: hidden;
}

.course-list__row, .latest-video__row, .latest-courses__row {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
}

.nutrition-quiz__radio-normal input[type=radio], .pet-profile__radio input[type=radio], .user-profile__radio input[type=radio] {
  position: absolute;
  left: -9999px;
  box-sizing: border-box;
  padding: 0;
}
.nutrition-quiz__radio-normal input[type=radio]:not(:checked) + label, .pet-profile__radio input[type=radio]:not(:checked) + label, .user-profile__radio input[type=radio]:not(:checked) + label,
.nutrition-quiz__radio-normal input[type=radio]:checked + label,
.pet-profile__radio input[type=radio]:checked + label,
.user-profile__radio input[type=radio]:checked + label {
  position: relative;
  padding-left: 2.8rem;
  cursor: pointer;
  height: 2.2rem;
  line-height: 2.2rem;
  display: inline-block;
  color: var(--color-main-800);
  font-size: var(--font-size-base);
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__radio-normal input[type=radio]:not(:checked) + label, .pet-profile__radio input[type=radio]:not(:checked) + label, .user-profile__radio input[type=radio]:not(:checked) + label,
  .nutrition-quiz__radio-normal input[type=radio]:checked + label,
  .pet-profile__radio input[type=radio]:checked + label,
  .user-profile__radio input[type=radio]:checked + label {
    font-size: var(--font-size-sm);
  }
}
.nutrition-quiz__radio-normal input[type=radio]:not(:checked) + label:before, .pet-profile__radio input[type=radio]:not(:checked) + label:before, .user-profile__radio input[type=radio]:not(:checked) + label:before,
.nutrition-quiz__radio-normal input[type=radio]:checked + label:before,
.pet-profile__radio input[type=radio]:checked + label:before,
.user-profile__radio input[type=radio]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border: solid 0.2rem var(--color-main-800);
  top: 0;
  box-sizing: border-box;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__radio-normal input[type=radio]:not(:checked) + label:before, .pet-profile__radio input[type=radio]:not(:checked) + label:before, .user-profile__radio input[type=radio]:not(:checked) + label:before,
  .nutrition-quiz__radio-normal input[type=radio]:checked + label:before,
  .pet-profile__radio input[type=radio]:checked + label:before,
  .user-profile__radio input[type=radio]:checked + label:before {
    transform: translate3d(0, -0.1rem, 0);
  }
}
.nutrition-quiz__radio-normal input[type=radio] + label:after, .pet-profile__radio input[type=radio] + label:after, .user-profile__radio input[type=radio] + label:after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--color-main-800);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0.6rem, -0.5rem, 0);
  transition: all 300ms ease;
  opacity: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__radio-normal input[type=radio] + label:after, .pet-profile__radio input[type=radio] + label:after, .user-profile__radio input[type=radio] + label:after {
    transform: translate3d(0.6rem, -0.6rem, 0);
  }
}
.nutrition-quiz__radio-normal input[type=radio]:checked + label:after, .pet-profile__radio input[type=radio]:checked + label:after, .user-profile__radio input[type=radio]:checked + label:after {
  opacity: 1;
}

.pet-profile__row, .user-profile__row {
  gap: 0.8rem;
  display: grid;
  grid-template-columns: 1fr;
}

.forget-password__label, .pet-profile__row label, .user-profile__row label, .login-ui__label {
  font-size: var(--font-size-base);
  color: var(--color-main-700);
  line-height: 1.5;
  font-weight: 900;
}
@media (min-width: 0) and (max-width: 480px) {
  .forget-password__label, .pet-profile__row label, .user-profile__row label, .login-ui__label {
    font-size: var(--font-size-sm);
  }
}

.nutrition-quiz__input input, .search__input, .forget-password__input, .contact__textarea, .contact__input, .pet-profile__row input, .user-profile__row input, .login-ui__input, .site-header__search-input {
  box-sizing: border-box;
  background-color: var(--color-main-200);
  padding: 0.8rem 1.2rem;
  font-size: var(--font-size-base);
  border-radius: 0.8rem;
  color: var(--color-main-800);
  transition: background-color 300ms ease;
  line-height: 1.5;
  border: solid 0.1rem var(--color-main-300);
  font-weight: 700;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__input input, .search__input, .forget-password__input, .contact__textarea, .contact__input, .pet-profile__row input, .user-profile__row input, .login-ui__input, .site-header__search-input {
    font-size: var(--font-size-sm);
  }
}
.nutrition-quiz__input input::-ms-reveal, .search__input::-ms-reveal, .forget-password__input::-ms-reveal, .contact__textarea::-ms-reveal, .contact__input::-ms-reveal, .pet-profile__row input::-ms-reveal, .user-profile__row input::-ms-reveal, .login-ui__input::-ms-reveal, .site-header__search-input::-ms-reveal, .nutrition-quiz__input input::-ms-clear, .search__input::-ms-clear, .forget-password__input::-ms-clear, .contact__textarea::-ms-clear, .contact__input::-ms-clear, .pet-profile__row input::-ms-clear, .user-profile__row input::-ms-clear, .login-ui__input::-ms-clear, .site-header__search-input::-ms-clear {
  display: none;
}
.nutrition-quiz__input input::placeholder, .search__input::placeholder, .forget-password__input::placeholder, .contact__textarea::placeholder, .contact__input::placeholder, .pet-profile__row input::placeholder, .user-profile__row input::placeholder, .login-ui__input::placeholder, .site-header__search-input::placeholder {
  color: var(--color-main-600);
}
.nutrition-quiz__input input:focus, .search__input:focus, .forget-password__input:focus, .contact__textarea:focus, .contact__input:focus, .pet-profile__row input:focus, .user-profile__row input:focus, .login-ui__input:focus, .site-header__search-input:focus {
  background-color: var(--color-main-300);
  border-color: var(--color-main-300);
}
.nutrition-quiz__input input.sm, .sm.search__input, .sm.forget-password__input, .sm.contact__textarea, .sm.contact__input, .pet-profile__row input.sm, .user-profile__row input.sm, .sm.login-ui__input, .sm.site-header__search-input {
  padding: 0.8rem 1.2rem;
  font-size: var(--font-size-base);
  margin-left: 1.2rem;
}
.nutrition-quiz__input input.full-width, .full-width.search__input, .full-width.forget-password__input, .full-width.contact__textarea, .full-width.contact__input, .pet-profile__row input.full-width, .user-profile__row input.full-width, .full-width.login-ui__input, .full-width.site-header__search-input {
  width: 100%;
  margin-top: 0.8rem;
  margin-left: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__input input::-webkit-date-and-time-value, .search__input::-webkit-date-and-time-value, .forget-password__input::-webkit-date-and-time-value, .contact__textarea::-webkit-date-and-time-value, .contact__input::-webkit-date-and-time-value, .pet-profile__row input::-webkit-date-and-time-value, .user-profile__row input::-webkit-date-and-time-value, .login-ui__input::-webkit-date-and-time-value, .site-header__search-input::-webkit-date-and-time-value {
    text-align: left;
  }
}

.pet-profile__headshot, .user-profile__headshot {
  width: 20rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0 auto 2.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__headshot, .user-profile__headshot {
    width: 16rem;
    margin-bottom: 0;
  }
}
.pet-profile__headshot img, .user-profile__headshot img {
  max-width: 100%;
  display: block;
  margin: 0;
  position: relative;
  z-index: 0;
  border-radius: 50%;
}

.pet-profile__profile, .user-profile__profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__profile, .user-profile__profile {
    gap: 2.4rem;
  }
}

.pet-profile__btn-upload, .user-profile__btn-upload {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  right: 2rem;
  top: 16rem;
  background: transparent url("../images/btn-upload.svg") no-repeat 0 0;
  background-size: cover;
  border: 0;
  font-size: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__btn-upload, .user-profile__btn-upload {
    top: 13rem;
    right: 1rem;
  }
}
.pet-profile__btn-upload input[type=file], .user-profile__btn-upload input[type=file] {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.pet-article-post__inner-content h6, .pet-article-post__inner-content h5, .pet-article-post__inner-content h4, .pet-article-post__inner-content h3, .pet-article-post__inner-content h1,
.pet-article-post__inner-content h2 {
  font-size: var(--font-size-xl);
  color: var(--color-main-800);
  line-height: 1.6;
  letter-spacing: 0.2rem;
  font-weight: 700;
}

.search__result, .pet-article-post__inner-content p, .tammie-intro__wrap p, .about-pet-pulse__content p {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--color-main-800);
  letter-spacing: 0.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .search__result, .pet-article-post__inner-content p, .tammie-intro__wrap p, .about-pet-pulse__content p {
    font-size: var(--font-size-base);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .search__result, .pet-article-post__inner-content p, .tammie-intro__wrap p, .about-pet-pulse__content p {
    font-size: var(--font-size-base);
  }
}

.forget-password__text, .course-detail__teacher-intro, .tammie-book__book-description {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-main-800);
  letter-spacing: 0.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .forget-password__text, .course-detail__teacher-intro, .tammie-book__book-description {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .forget-password__text, .course-detail__teacher-intro, .tammie-book__book-description {
    font-size: var(--font-size-sm);
  }
}
.forget-password__text a, .course-detail__teacher-intro a, .tammie-book__book-description a {
  color: var(--color-main-800);
  transition: color 300ms ease;
  border-bottom: 0.1rem solid var(--color-main-800);
}
.forget-password__text a:hover, .course-detail__teacher-intro a:hover, .tammie-book__book-description a:hover {
  color: var(--color-main-900);
  border-bottom-color: var(--color-main-800);
}

.pet-profile__select-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 4.8rem;
  position: relative;
  overflow: hidden;
}
.pet-profile__select-wrap::before {
  width: 0.8rem;
  height: 0.8rem;
  pointer-events: none;
  z-index: 10;
  content: "";
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transform: translate3d(0, -60%, 0) rotate(45deg);
  border-right: solid 0.2rem var(--color-main-800);
  border-bottom: solid 0.2rem var(--color-main-800);
}
.pet-profile__select-wrap select {
  background-color: var(--color-main-200);
  border-radius: 0.8rem;
  border: solid 0.1rem var(--color-main-300);
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 4.8rem;
  font-size: var(--font-size-base);
  padding: 0 1.6rem;
  color: var(--color-main-900);
  transition: all 300ms ease;
}
.pet-profile__select-wrap select:focus {
  background-color: var(--color-main-300);
}
.pet-profile__select-wrap select option {
  color: var(--color-grey-500);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__select-wrap select {
    font-size: var(--font-size-sm);
  }
}

.pet-profile__checkbox, .user-profile__checkbox, .login-ui__checkbox {
  width: 100%;
}
.pet-profile__checkbox input[type=checkbox], .user-profile__checkbox input[type=checkbox], .login-ui__checkbox input[type=checkbox] {
  position: absolute;
  left: -9999px;
  box-sizing: border-box;
  padding: 0;
}
.pet-profile__checkbox input[type=checkbox]:not(:checked) + label, .user-profile__checkbox input[type=checkbox]:not(:checked) + label, .login-ui__checkbox input[type=checkbox]:not(:checked) + label,
.pet-profile__checkbox input[type=checkbox]:checked + label,
.user-profile__checkbox input[type=checkbox]:checked + label,
.login-ui__checkbox input[type=checkbox]:checked + label {
  position: relative;
  padding-left: 2.8rem;
  cursor: pointer;
  height: 2.3rem;
  line-height: 2.3rem;
  display: inline-block;
  color: var(--color-main-700);
  font-size: var(--font-size-base);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__checkbox input[type=checkbox]:not(:checked) + label, .user-profile__checkbox input[type=checkbox]:not(:checked) + label, .login-ui__checkbox input[type=checkbox]:not(:checked) + label,
  .pet-profile__checkbox input[type=checkbox]:checked + label,
  .user-profile__checkbox input[type=checkbox]:checked + label,
  .login-ui__checkbox input[type=checkbox]:checked + label {
    font-size: var(--font-size-sm);
  }
}
.pet-profile__checkbox input[type=checkbox]:not(:checked) + label:before, .user-profile__checkbox input[type=checkbox]:not(:checked) + label:before, .login-ui__checkbox input[type=checkbox]:not(:checked) + label:before,
.pet-profile__checkbox input[type=checkbox]:checked + label:before,
.user-profile__checkbox input[type=checkbox]:checked + label:before,
.login-ui__checkbox input[type=checkbox]:checked + label:before {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 0.6rem;
  width: 2.2rem;
  height: 2.2rem;
  border: solid 0.2rem var(--color-main-800);
  border-radius: 0.6rem;
  top: 0;
  box-sizing: border-box;
}
.pet-profile__checkbox input[type=checkbox] + label:after, .user-profile__checkbox input[type=checkbox] + label:after, .login-ui__checkbox input[type=checkbox] + label:after {
  content: "";
  width: 0.8rem;
  height: 0.6rem;
  border-top: solid 0.2rem var(--color-main-800);
  border-right: solid 0.2rem var(--color-main-800);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0.6rem, -0.6rem, 0) rotate(135deg);
  transition: all 300ms ease;
  opacity: 0;
}
.pet-profile__checkbox input[type=checkbox]:checked + label:after, .user-profile__checkbox input[type=checkbox]:checked + label:after, .login-ui__checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

.search, .membership, .contact, .privacy, .policies, .course-detail, .course-list, .pet-article-post, .pet-article-list, .about-pet-pulse, .latest-articles, .user-page {
  padding-top: 8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .search, .membership, .contact, .privacy, .policies, .course-detail, .course-list, .pet-article-post, .pet-article-list, .about-pet-pulse, .latest-articles, .user-page {
    padding-top: 2.4rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .search, .membership, .contact, .privacy, .policies, .course-detail, .course-list, .pet-article-post, .pet-article-list, .about-pet-pulse, .latest-articles, .user-page {
    padding-top: 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .search, .membership, .contact, .privacy, .policies, .course-detail, .course-list, .pet-article-post, .pet-article-list, .about-pet-pulse, .latest-articles, .user-page {
    padding-top: 3.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .search, .membership, .contact, .privacy, .policies, .course-detail, .course-list, .pet-article-post, .pet-article-list, .about-pet-pulse, .latest-articles, .user-page {
    padding-top: 3.2rem;
  }
}

.course-list__date {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
}
.course-list__date strong {
  padding-left: 0.4rem;
}

.course-list__course-price {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
}
.course-list__course-price strong {
  color: var(--color-danger-500);
  padding-left: 0.4rem;
  font-size: var(--font-size-lg);
}

.course-list__teacher-image {
  background-color: var(--color-main-200);
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  overflow: hidden;
  border: solid 0.2rem var(--color-main-200);
}

:root {
  font-size: 10px;
  --color-main-900: #2d2d41;
  --color-main-800: #585773;
  --color-main-700: #797694;
  --color-main-600: #aaa6c1;
  --color-main-500: #c5c0d9;
  --color-main-400: #d0cee2;
  --color-main-300: #dcdbea;
  --color-main-200: #e9e9f2;
  --color-main-150: #f1f1f8;
  --color-main-100: #f7f8fb;
  --color-grey-900: #040404;
  --color-grey-800: #242425;
  --color-grey-700: #464446;
  --color-grey-600: #676465;
  --color-grey-500: #878584;
  --color-grey-400: #a29f9f;
  --color-grey-300: #bcbabb;
  --color-grey-200: #d6d5d6;
  --color-grey-100: #f1f0f1;
  --color-danger-500: #db585f;
  --color-danger-700: #bc4248;
  --color-vip-0: #4bac5e;
  --color-vip-1: #8e583d;
  --color-vip-2: #717171;
  --color-vip-3: #5e8cac;
  --color-level-1: #dae9c1;
  --color-level-2: #f0edd3;
  --color-level-3: #d3efe1;
  --color-level-4: #ede2f3;
  --font-size-9xl: 5.2rem;
  --font-size-8xl: 4.6rem;
  --font-size-7xl: 4rem;
  --font-size-6xl: 3.6rem;
  --font-size-5xl: 3.2rem;
  --font-size-4xl: 2.8rem;
  --font-size-3xl: 2.4rem;
  --font-size-2xl: 2.2rem;
  --font-size-xl: 2rem;
  --font-size-lg: 1.8rem;
  --font-size-base: 1.6rem;
  --font-size-sm: 1.4rem;
  --font-size-xs: 1.2rem;
}

*::selection {
  background-color: var(--color-main-700);
  color: #fff;
}

html {
  font-family: "Roboto", "Noto Sans TC", "Nanum Myeongjo", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.fixed {
  overflow: hidden;
}

* {
  scrollbar-width: none;
  scrollbar-color: var(--color-main-600) var(--color-main-300);
}

*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: var(--color-main-300);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-main-600);
  border-radius: 6px;
  border: 3px none var(--color-main-300);
}

body {
  background-color: var(--color-main-150);
}
body.fixed {
  overflow: hidden;
}

.wrap {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 7.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .wrap {
    padding-top: 6.4rem;
  }
}

.site-footer__content {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: var(--color-main-800);
}
.site-footer__content .site-footer__inner {
  align-items: flex-end;
}
.site-footer__copyright {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: var(--color-main-900);
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
.site-footer__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__block {
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__block {
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__block {
    width: 100%;
  }
}
.site-footer__sns {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__sns {
    justify-content: center;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__sns {
    justify-content: center;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__sns {
    justify-content: center;
  }
}
.site-footer__sns a {
  width: 2.4rem;
}
.site-footer__sns a img {
  max-width: 100%;
  display: block;
  margin: 0;
}
.site-footer__policy {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__policy {
    justify-content: center;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__policy {
    justify-content: center;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__policy {
    justify-content: center;
  }
}
.site-footer__policy a {
  font-size: clamp(var(--font-size-sm), -0.875rem + 8.333vw, var(--font-size-sm));
  color: var(--color-main-100);
  transition: color 300ms ease;
}
.site-footer__policy a:hover {
  color: var(--color-main-300);
}
.site-footer__info {
  width: 44rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__info {
    width: 100%;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__info {
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__info {
    width: 100%;
  }
}
.site-footer__info h2 {
  font-size: clamp(var(--font-size-base), -0.875rem + 8.333vw, var(--font-size-2xl));
  color: var(--color-main-100);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__info h2 {
    font-size: var(--font-size-xl);
    text-align: center;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__info h2 {
    text-align: center;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__info h2 {
    text-align: center;
  }
}
.site-footer__info p {
  font-size: var(--font-size-sm);
  color: var(--color-main-100);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__info p {
    text-align: center;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-footer__info p {
    text-align: center;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-footer__info p {
    text-align: center;
  }
}
.site-footer__copyright-text {
  color: var(--color-main-100);
  font-size: var(--font-size-sm);
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__copyright-text {
    text-align: center;
  }
}
.site-footer__copyright .site-footer__inner {
  align-items: center;
}
.site-footer__btn-gotop {
  overflow: hidden;
  position: relative;
  font-size: 0;
  border-radius: 50%;
  background-color: transparent;
  width: 3.2rem;
  height: 3.2rem;
  border: solid 0.2rem var(--color-main-100);
}
.site-footer__btn-gotop::before, .site-footer__btn-gotop::after {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  border-top: solid 0.2rem var(--color-main-100);
  border-right: solid 0.2rem var(--color-main-100);
  content: "";
  left: 50%;
  top: 50%;
  transition: transform 300ms ease;
}
.site-footer__btn-gotop::before {
  transform: translate3d(-50%, -30%, 0) rotate(-45deg);
}
.site-footer__btn-gotop::after {
  transform: translate3d(-50%, 200%, 0) rotate(-45deg);
}
.site-footer__btn-gotop:hover::before {
  transform: translate3d(-50%, -250%, 0) rotate(-45deg);
}
.site-footer__btn-gotop:hover::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
@media (min-width: 0) and (max-width: 480px) {
  .site-footer__btn-gotop {
    margin: 0 auto;
  }
}

.site-header {
  background-color: var(--color-main-100);
  padding: 1.6rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  box-shadow: 0 0 0.4rem var(--color-main-500);
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header__logo {
  width: 16.6rem;
  height: 4.2rem;
  background: transparent url("../images/logo-petpulse.png") no-repeat 0 0;
  background-size: cover;
  font-size: 0;
}
.site-header__logo a {
  width: 100%;
  height: 100%;
  font-size: 0;
  display: block;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__logo {
    width: 13.28rem;
    height: 3.36rem;
    background-size: cover;
  }
}
.site-header__btn-toggle {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  background-color: transparent;
  right: 2rem;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 50;
  border-radius: 1.2rem;
  border: 0;
  display: none;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__btn-toggle {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-header__btn-toggle {
    display: block;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-header__btn-toggle {
    display: block;
  }
}
.site-header__btn-toggle::before, .site-header__btn-toggle::after {
  width: 2rem;
  height: 0.2rem;
  background-color: var(--color-main-700);
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  border-radius: 1.2rem;
  transform-origin: 50% 50%;
  transition: transform 300ms ease-in-out;
}
.site-header__btn-toggle::before {
  transform: translate3d(-50%, -0.5rem, 0);
}
.site-header__btn-toggle::after {
  transform: translate3d(-50%, 0.3rem, 0);
}
.site-header__btn-toggle.active::before {
  transform: translate3d(-50%, 0, 0) rotate(45deg);
}
.site-header__btn-toggle.active::after {
  transform: translate3d(-50%, 0, 0) rotate(-45deg);
}
.site-header__overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 7.2rem;
  width: 100%;
  height: calc(100vh - 7.2rem);
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.75);
  transition: opacity 300ms ease;
  pointer-events: none;
}
.site-header__overlay.active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__overlay {
    top: 6.4rem;
    height: calc(100vh - 6.4rem);
  }
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__nav {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, min-content);
    gap: 1.2rem;
    width: 26rem;
    position: absolute;
    background-color: var(--color-main-100);
    z-index: 25;
    top: 6.4rem;
    right: 0;
    height: calc(100vh - 6.4rem);
    padding: 2.4rem;
    box-sizing: border-box;
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms ease-in-out;
    box-shadow: inset 0 0.1rem 0.2rem var(--color-main-300);
  }
  .site-header__nav.active {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-header__nav {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, min-content);
    gap: 1.2rem;
    width: 26rem;
    position: absolute;
    background-color: var(--color-main-100);
    z-index: 25;
    top: 7.2rem;
    right: 0;
    height: calc(100vh - 7.2rem);
    padding: 2.4rem;
    box-sizing: border-box;
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms ease-in-out;
    box-shadow: inset 0 0.1rem 0.2rem var(--color-main-300);
  }
  .site-header__nav.active {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-header__nav {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, min-content);
    width: 22rem;
    position: absolute;
    background-color: #fff;
    z-index: 25;
    top: 7.2rem;
    right: 0;
    height: calc(100vh - 7.2rem);
    overflow-y: scroll;
    padding: 2.4rem 2.4rem 8rem 2.4rem;
    box-sizing: border-box;
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms ease-in-out;
  }
  .site-header__nav.active {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .site-header__nav {
    gap: 0.8rem;
  }
}
.site-header__main-nav {
  display: flex;
  gap: 2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__main-nav {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-header__main-nav {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-header__main-nav {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}
.site-header__btn-link {
  font-size: var(--font-size-base);
  color: var(--color-main-700);
  transition: color 300ms ease;
  padding: 0.4rem 0;
  flex: 1;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  font-weight: 900;
  width: min-content;
}
.site-header__btn-link:hover {
  color: var(--color-main-800);
}
.site-header__btn-link.active {
  color: var(--color-main-800);
  border-bottom-color: var(--color-main-800);
}
.site-header__user {
  width: 100%;
  display: flex;
  gap: 0.8rem;
}
.site-header__btn-login {
  flex: 1;
}
.site-header__btn-register {
  flex: 1;
}
.site-header__btn-sign-out {
  flex: 1;
}
.site-header__search {
  position: relative;
}
.site-header__search form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr min-content;
  gap: 0.8rem;
  align-items: center;
}
.site-header__search-icon {
  width: 2rem;
  height: 2rem;
  background: transparent url("../images/icon-search.svg") no-repeat 0 0;
  background-size: 2rem;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  right: 1.2rem;
}
.site-header__search-input {
  width: 12rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__search-input {
    width: 100%;
    flex: 1 0 0;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-header__search-input {
    width: 100%;
    flex: 1 0 0;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-header__search-input {
    width: 100%;
    flex: 1 0 0;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__btn-search {
    width: max-content;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-header__btn-search {
    width: max-content;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-header__btn-search {
    width: 100%;
  }
}
.site-header__user-login {
  background-color: var(--color-main-100);
  padding: 0.8rem 0;
  line-height: 1.5;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: solid 0.1rem transparent;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-header__user-login {
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .site-header__user-login {
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .site-header__user-login {
    width: 100%;
  }
}
.site-header__user-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: solid 0.3rem transparent;
  position: relative;
  background-clip: padding-box;
  border: solid 0.3rem transparent;
}
.site-header__user-avatar img {
  max-width: 100%;
  display: block;
  border-radius: 50%;
}
.site-header__user-level {
  width: 2.4rem;
  height: 2.4rem;
}
.site-header__user-level.level-1 {
  background: transparent url("../images/icon-level-1.svg");
  background-size: cover;
}
.site-header__user-level.level-2 {
  background: transparent url("../images/icon-level-2.svg");
  background-size: cover;
}
.site-header__user-level.level-3 {
  background: transparent url("../images/icon-level-3.svg");
  background-size: cover;
}
.site-header__user-level.level-4 {
  background: transparent url("../images/icon-level-4.svg");
  background-size: cover;
}
.site-header__user-name {
  white-space: nowrap;
  font-size: var(--font-size-base);
  line-height: 1.5;
  font-weight: 900;
}
.site-header__user-name a {
  color: var(--color-main-800);
}

.site-main {
  padding-bottom: 12rem;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-main {
    gap: 8rem;
  }
}

.page-tab {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .page-tab {
    width: 100%;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: flex-start;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .page-tab {
    width: 100%;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: flex-start;
  }
}
.page-tab__btn-tab {
  box-sizing: border-box;
  background-color: var(--color-main-300);
  padding: 1.2rem 2rem;
  color: var(--color-main-700);
  font-weight: 700;
  transition: background-color 300ms ease;
  font-size: var(--font-size-base);
}
.page-tab__btn-tab:hover {
  background-color: var(--color-main-400);
}
.page-tab__btn-tab.active {
  background-color: var(--color-main-800);
  color: var(--color-main-100);
  pointer-events: none;
}
.page-tab__btn-tab:nth-child(1) {
  border-radius: 0.8rem 0 0 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .page-tab__btn-tab:nth-child(1) {
    border-radius: 0.8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .page-tab__btn-tab:nth-child(1) {
    border-radius: 0.8rem;
  }
}
.page-tab__btn-tab:last-child {
  border-radius: 0 0.8rem 0.8rem 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .page-tab__btn-tab:last-child {
    border-radius: 0.8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .page-tab__btn-tab:last-child {
    border-radius: 0.8rem;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .page-tab__btn-tab {
    border-radius: 0.8rem;
    flex-basis: calc(50% - 0.8rem);
    text-align: center;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .page-tab__btn-tab {
    border-radius: 0.8rem;
    flex-basis: calc(25% - 0.8rem);
    text-align: center;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .page-tab__btn-tab {
    padding-left: 0.8rem;
    padding-right: 1.6rem;
  }
}

.article-item {
  position: relative;
}
.article-item__btn-delete {
  background-color: var(--color-danger-500);
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  z-index: 10;
}
.article-item__btn-delete:hover {
  background-color: var(--color-danger-700);
}
.article-item.type-1 .article-item__post-img::after, .article-item.type-2 .article-item__post-img::after, .article-item.type-3 .article-item__post-img::after, .article-item.type-4 .article-item__post-img::after, .article-item.type-5 .article-item__post-img::after, .article-item.type-6 .article-item__post-img::after, .article-item.type-7 .article-item__post-img::after {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 7.2rem;
  aspect-ratio: 1/1;
  content: "";
}
@media (min-width: 0) and (max-width: 480px) {
  .article-item.type-1 .article-item__post-img::after, .article-item.type-2 .article-item__post-img::after, .article-item.type-3 .article-item__post-img::after, .article-item.type-4 .article-item__post-img::after, .article-item.type-5 .article-item__post-img::after, .article-item.type-6 .article-item__post-img::after, .article-item.type-7 .article-item__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .article-item.type-1 .article-item__post-img::after, .article-item.type-2 .article-item__post-img::after, .article-item.type-3 .article-item__post-img::after, .article-item.type-4 .article-item__post-img::after, .article-item.type-5 .article-item__post-img::after, .article-item.type-6 .article-item__post-img::after, .article-item.type-7 .article-item__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .article-item.type-1 .article-item__post-img::after, .article-item.type-2 .article-item__post-img::after, .article-item.type-3 .article-item__post-img::after, .article-item.type-4 .article-item__post-img::after, .article-item.type-5 .article-item__post-img::after, .article-item.type-6 .article-item__post-img::after, .article-item.type-7 .article-item__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .article-item.type-1 .article-item__post-img::after, .article-item.type-2 .article-item__post-img::after, .article-item.type-3 .article-item__post-img::after, .article-item.type-4 .article-item__post-img::after, .article-item.type-5 .article-item__post-img::after, .article-item.type-6 .article-item__post-img::after, .article-item.type-7 .article-item__post-img::after {
    width: 4.8rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .article-item.type-1 .article-item__post-img::after, .article-item.type-2 .article-item__post-img::after, .article-item.type-3 .article-item__post-img::after, .article-item.type-4 .article-item__post-img::after, .article-item.type-5 .article-item__post-img::after, .article-item.type-6 .article-item__post-img::after, .article-item.type-7 .article-item__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
.article-item.type-1 .article-item__post-img::after {
  background: transparent url("../images/post-label-1@2x.png") no-repeat 0 0;
  background-size: cover;
}
.article-item.type-2 .article-item__post-img::after {
  background: transparent url("../images/post-label-2@2x.png") no-repeat 0 0;
  background-size: cover;
}
.article-item.type-3 .article-item__post-img::after {
  background: transparent url("../images/post-label-3@2x.png") no-repeat 0 0;
  background-size: cover;
}
.article-item.type-4 .article-item__post-img::after {
  background: transparent url("../images/post-label-4@2x.png") no-repeat 0 0;
  background-size: cover;
}
.article-item.type-5 .article-item__post-img::after {
  background: transparent url("../images/post-label-5@2x.png") no-repeat 0 0;
  background-size: cover;
}
.article-item.type-6 .article-item__post-img::after {
  background: transparent url("../images/post-label-6@2x.png") no-repeat 0 0;
  background-size: cover;
}
.article-item.type-7 .article-item__post-img::after {
  background: transparent url("../images/post-label-7@2x.png") no-repeat 0 0;
  background-size: cover;
}

.site-pagination {
  padding-top: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-pagination {
    flex-wrap: wrap;
  }
}
.site-pagination__page {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.site-pagination__btn-page {
  font-size: var(--font-size-sm);
  color: var(--color-main-700);
  border: solid 0.1rem var(--color-main-700);
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  background-color: #fff;
  display: block;
  transition: all 300ms ease;
  font-weight: 700;
}
.site-pagination__btn-page:hover {
  background-color: var(--color-main-700);
  color: #fff;
}
.site-pagination__btn-page.active {
  background-color: var(--color-main-700);
  color: #fff;
  pointer-events: none;
}
@media (min-width: 0) and (max-width: 480px) {
  .site-pagination__btn-page {
    padding: 0.8rem 1rem;
  }
}
.site-pagination__status {
  font-size: var(--font-size-sm);
  color: var(--color-main-700);
}

.error-tips {
  background-color: var(--color-danger-500);
  font-size: var(--font-size-sm);
  color: #fff;
  padding: 0.8rem;
  position: absolute;
  border-radius: 0.4rem;
  right: 0;
  top: 0;
  animation: up-down 400ms ease infinite;
}
.error-tips::before {
  content: "";
  position: absolute;
  left: 2rem;
  bottom: -0.4rem;
  width: 0;
  height: 0;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.4rem solid var(--color-danger-500);
}

@keyframes up-down {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.user-page__inner {
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .user-page__inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .user-page__inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .user-page__inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .user-page__inner {
    grid-template-columns: 18rem 1fr;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .user-page__inner {
    grid-template-columns: 18rem 1fr;
  }
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  position: sticky;
  top: 12rem;
  left: 0;
  height: min-content;
}
@media (min-width: 0) and (max-width: 480px) {
  .side-nav {
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.6rem;
    position: relative;
    left: inherit;
    top: inherit;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .side-nav {
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.6rem;
    position: relative;
    left: inherit;
    top: inherit;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .side-nav {
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.6rem;
    position: relative;
    left: inherit;
    top: inherit;
  }
}
.side-nav__btn {
  font-size: var(--font-size-base);
  color: var(--color-main-600);
  line-height: 1.6;
  transition: all 300ms ease;
  font-weight: 700;
}
.side-nav__btn:hover {
  color: var(--color-main-800);
}
.side-nav__btn.active {
  color: var(--color-main-800);
}
@media (min-width: 0) and (max-width: 480px) {
  .side-nav__btn {
    display: inline-block;
  }
  .side-nav__btn:not(:last-child) {
    margin-right: 1.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .side-nav__btn {
    display: inline-block;
  }
  .side-nav__btn:not(:last-child) {
    margin-right: 1.6rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .side-nav__btn {
    display: inline-block;
  }
  .side-nav__btn:not(:last-child) {
    margin-right: 1.6rem;
  }
}

.latest-articles__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, max-content);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-articles__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .latest-articles__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-articles__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .latest-articles__wrap {
    grid-template-columns: repeat(3, 1fr);
  }
}
.latest-articles__post:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/4;
}
.latest-articles__post:nth-child(1) .latest-articles__post-detail {
  height: 100%;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-articles__post:nth-child(1) {
    grid-template-columns: 1fr;
  }
  .latest-articles__post:nth-child(1) .latest-articles__main-post-text {
    display: none;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .latest-articles__post:nth-child(1) {
    grid-column: 1/4;
  }
}
.latest-articles__post:nth-child(2), .latest-articles__post:nth-child(3), .latest-articles__post:nth-child(4) {
  grid-template-columns: repeat(2, 1fr);
}
.latest-articles__post:nth-child(2) .latest-articles__post-img, .latest-articles__post:nth-child(3) .latest-articles__post-img, .latest-articles__post:nth-child(4) .latest-articles__post-img {
  flex: 1;
}
.latest-articles__post:nth-child(2) .latest-articles__post-detail, .latest-articles__post:nth-child(3) .latest-articles__post-detail, .latest-articles__post:nth-child(4) .latest-articles__post-detail {
  flex: 1;
}
.latest-articles__post:nth-child(2) .latest-articles__main-post-text, .latest-articles__post:nth-child(3) .latest-articles__main-post-text, .latest-articles__post:nth-child(4) .latest-articles__main-post-text {
  display: none;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-articles__post:nth-child(2), .latest-articles__post:nth-child(3), .latest-articles__post:nth-child(4) {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .latest-articles__post:nth-child(2), .latest-articles__post:nth-child(3), .latest-articles__post:nth-child(4) {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-articles__post:nth-child(2) .latest-articles__main-post-text, .latest-articles__post:nth-child(3) .latest-articles__main-post-text, .latest-articles__post:nth-child(4) .latest-articles__main-post-text {
    display: block;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .latest-articles__post:nth-child(2), .latest-articles__post:nth-child(3), .latest-articles__post:nth-child(4) {
    grid-template-columns: 1fr;
  }
}
.latest-articles__post.type-1 .latest-articles__post-img::after, .latest-articles__post.type-2 .latest-articles__post-img::after, .latest-articles__post.type-3 .latest-articles__post-img::after, .latest-articles__post.type-4 .latest-articles__post-img::after, .latest-articles__post.type-5 .latest-articles__post-img::after, .latest-articles__post.type-6 .latest-articles__post-img::after, .latest-articles__post.type-7 .latest-articles__post-img::after {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 7.2rem;
  aspect-ratio: 1/1;
  content: "";
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-articles__post.type-1 .latest-articles__post-img::after, .latest-articles__post.type-2 .latest-articles__post-img::after, .latest-articles__post.type-3 .latest-articles__post-img::after, .latest-articles__post.type-4 .latest-articles__post-img::after, .latest-articles__post.type-5 .latest-articles__post-img::after, .latest-articles__post.type-6 .latest-articles__post-img::after, .latest-articles__post.type-7 .latest-articles__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-articles__post.type-1 .latest-articles__post-img::after, .latest-articles__post.type-2 .latest-articles__post-img::after, .latest-articles__post.type-3 .latest-articles__post-img::after, .latest-articles__post.type-4 .latest-articles__post-img::after, .latest-articles__post.type-5 .latest-articles__post-img::after, .latest-articles__post.type-6 .latest-articles__post-img::after, .latest-articles__post.type-7 .latest-articles__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .latest-articles__post.type-1 .latest-articles__post-img::after, .latest-articles__post.type-2 .latest-articles__post-img::after, .latest-articles__post.type-3 .latest-articles__post-img::after, .latest-articles__post.type-4 .latest-articles__post-img::after, .latest-articles__post.type-5 .latest-articles__post-img::after, .latest-articles__post.type-6 .latest-articles__post-img::after, .latest-articles__post.type-7 .latest-articles__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .latest-articles__post.type-1 .latest-articles__post-img::after, .latest-articles__post.type-2 .latest-articles__post-img::after, .latest-articles__post.type-3 .latest-articles__post-img::after, .latest-articles__post.type-4 .latest-articles__post-img::after, .latest-articles__post.type-5 .latest-articles__post-img::after, .latest-articles__post.type-6 .latest-articles__post-img::after, .latest-articles__post.type-7 .latest-articles__post-img::after {
    width: 4.8rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .latest-articles__post.type-1 .latest-articles__post-img::after, .latest-articles__post.type-2 .latest-articles__post-img::after, .latest-articles__post.type-3 .latest-articles__post-img::after, .latest-articles__post.type-4 .latest-articles__post-img::after, .latest-articles__post.type-5 .latest-articles__post-img::after, .latest-articles__post.type-6 .latest-articles__post-img::after, .latest-articles__post.type-7 .latest-articles__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
.latest-articles__post.type-1 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-1@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-articles__post.type-2 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-2@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-articles__post.type-3 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-3@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-articles__post.type-4 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-4@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-articles__post.type-5 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-5@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-articles__post.type-6 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-6@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-articles__post.type-7 .latest-articles__post-img::after {
  background: transparent url("../images/post-label-7@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-courses {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
.latest-courses__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-courses__wrap {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .latest-courses__wrap {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-courses__wrap {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-video {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
.latest-video__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-video__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .latest-video__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-video__wrap {
    grid-template-columns: 1fr;
  }
}
.latest-video__post-img {
  border-radius: 0;
}
.latest-video__post.type-1 .latest-video__post-img::after, .latest-video__post.type-2 .latest-video__post-img::after, .latest-video__post.type-3 .latest-video__post-img::after, .latest-video__post.type-4 .latest-video__post-img::after, .latest-video__post.type-5 .latest-video__post-img::after, .latest-video__post.type-6 .latest-video__post-img::after, .latest-video__post.type-7 .latest-video__post-img::after {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 7.2rem;
  aspect-ratio: 1/1;
  content: "";
}
@media (min-width: 0) and (max-width: 480px) {
  .latest-video__post.type-1 .latest-video__post-img::after, .latest-video__post.type-2 .latest-video__post-img::after, .latest-video__post.type-3 .latest-video__post-img::after, .latest-video__post.type-4 .latest-video__post-img::after, .latest-video__post.type-5 .latest-video__post-img::after, .latest-video__post.type-6 .latest-video__post-img::after, .latest-video__post.type-7 .latest-video__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .latest-video__post.type-1 .latest-video__post-img::after, .latest-video__post.type-2 .latest-video__post-img::after, .latest-video__post.type-3 .latest-video__post-img::after, .latest-video__post.type-4 .latest-video__post-img::after, .latest-video__post.type-5 .latest-video__post-img::after, .latest-video__post.type-6 .latest-video__post-img::after, .latest-video__post.type-7 .latest-video__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .latest-video__post.type-1 .latest-video__post-img::after, .latest-video__post.type-2 .latest-video__post-img::after, .latest-video__post.type-3 .latest-video__post-img::after, .latest-video__post.type-4 .latest-video__post-img::after, .latest-video__post.type-5 .latest-video__post-img::after, .latest-video__post.type-6 .latest-video__post-img::after, .latest-video__post.type-7 .latest-video__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .latest-video__post.type-1 .latest-video__post-img::after, .latest-video__post.type-2 .latest-video__post-img::after, .latest-video__post.type-3 .latest-video__post-img::after, .latest-video__post.type-4 .latest-video__post-img::after, .latest-video__post.type-5 .latest-video__post-img::after, .latest-video__post.type-6 .latest-video__post-img::after, .latest-video__post.type-7 .latest-video__post-img::after {
    width: 4.8rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .latest-video__post.type-1 .latest-video__post-img::after, .latest-video__post.type-2 .latest-video__post-img::after, .latest-video__post.type-3 .latest-video__post-img::after, .latest-video__post.type-4 .latest-video__post-img::after, .latest-video__post.type-5 .latest-video__post-img::after, .latest-video__post.type-6 .latest-video__post-img::after, .latest-video__post.type-7 .latest-video__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
.latest-video__post.type-1 .latest-video__post-img::after {
  background: transparent url("../images/post-label-1@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-video__post.type-2 .latest-video__post-img::after {
  background: transparent url("../images/post-label-2@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-video__post.type-3 .latest-video__post-img::after {
  background: transparent url("../images/post-label-3@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-video__post.type-4 .latest-video__post-img::after {
  background: transparent url("../images/post-label-4@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-video__post.type-5 .latest-video__post-img::after {
  background: transparent url("../images/post-label-5@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-video__post.type-6 .latest-video__post-img::after {
  background: transparent url("../images/post-label-6@2x.png") no-repeat 0 0;
  background-size: cover;
}
.latest-video__post.type-7 .latest-video__post-img::after {
  background: transparent url("../images/post-label-7@2x.png") no-repeat 0 0;
  background-size: cover;
}
.login-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
  background-color: var(--color-main-300);
}
@media (min-width: 0) and (max-width: 480px) {
  .login-page {
    padding: 2.4rem;
    grid-template-rows: repeat(6, 1fr);
    height: 80rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .login-page {
    grid-template-rows: repeat(6, 1fr);
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .login-page {
    grid-template-rows: repeat(6, 1fr);
  }
}
.login-page__kv {
  width: 79.3rem;
  height: 76.7rem;
  position: absolute;
  z-index: 0;
  background: transparent url("../images/pet-bg.png") no-repeat 0 0;
  background-size: cover;
  left: 0;
  bottom: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .login-page__kv {
    width: 26.962rem;
    height: 26.078rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .login-page__kv {
    width: 35.685rem;
    height: 34.515rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .login-page__kv {
    width: 31.72rem;
    height: 30.68rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .login-page__kv {
    width: 43.615rem;
    height: 42.185rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .login-page__kv {
    width: 55.51rem;
    height: 53.69rem;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .login-page__kv {
    width: 63.44rem;
    height: 61.36rem;
  }
}
.login-page__content {
  border-radius: 1.2rem;
  padding: 4rem;
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 10/12;
  grid-row: 2/4;
  background-color: var(--color-main-100);
}
@media (min-width: 0) and (max-width: 480px) {
  .login-page__content {
    grid-column: 1/13;
    grid-row: 1/5;
    padding: 3.2rem 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .login-page__content {
    grid-column: 3/11;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .login-page__content {
    grid-column: 4/10;
    grid-row: 1/6;
  }
}
@media (min-width: 720px) and (max-width: 960px) and (orientation: landscape) {
  .login-page__content {
    grid-column: 6/12;
    grid-row: 2/6;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .login-page__content {
    grid-column: 8/12;
    grid-row: 1/5;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .login-page__content {
    grid-column: 8/12;
    grid-row: 1/6;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .login-page__content {
    grid-column: 9/12;
  }
}

.login-ui {
  width: 100%;
  margin: 0 auto;
}
.login-ui__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.login-ui__row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
}
.login-ui__row--row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.login-ui__forgot {
  display: flex;
  gap: 1.2rem;
}
.login-ui__btn {
  font-size: var(--font-size-base);
  color: var(--color-main-700);
  transition: color 300ms ease;
  white-space: nowrap;
}
.login-ui__btn:hover {
  color: var(--color-main-900);
}
@media (min-width: 0) and (max-width: 480px) {
  .login-ui__btn {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .login-ui__btn {
    font-size: var(--font-size-sm);
  }
}
.login-ui__btn-submit {
  padding-left: 2rem;
  padding-right: 2rem;
}
.login-ui__three-party {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}
.login-ui__btn-facebook {
  text-align: center;
}
.login-ui__btn-google {
  text-align: center;
}
.login-ui__toggle-password {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.login-ui__toggle-password::before, .login-ui__toggle-password::after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  transition: opacity 300ms ease;
}
.login-ui__toggle-password::before {
  background: transparent url("../images/icon-hide.svg") no-repeat 0 0;
  background-size: cover;
}
.login-ui__toggle-password::after {
  background: transparent url("../images/icon-show.svg") no-repeat 0 0;
  background-size: cover;
  opacity: 0;
}
.login-ui__toggle-password.active::before {
  opacity: 0;
}
.login-ui__toggle-password.active::after {
  opacity: 1;
}
.login-ui__or {
  font-size: var(--font-size-sm);
  color: var(--color-main-500);
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
  align-items: center;
  text-align: center;
  grid-gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}
.login-ui__or::before, .login-ui__or::after {
  content: "";
  border-top: 0.2rem solid var(--color-main-300);
}

.about-pet-pulse__content {
  max-width: 96rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
.about-pet-pulse__content p strong {
  display: block;
  padding: 0.8rem 0;
}

.tammie-hero {
  background-color: var(--color-main-800);
  background-size: 72rem auto;
  height: 86rem;
  position: relative;
}
.tammie-hero::after {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 0;
  content: "";
  top: 0;
  background: transparent url("../images/slogan-kr.png") no-repeat center center;
  background-size: 90% auto;
  opacity: 0.1;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero::after {
    width: 100%;
    background-position: 90% 5%;
    background-size: 50% auto;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero::after {
    width: 100%;
    background-position: 90% 5%;
    background-size: 50% auto;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero {
    height: 72rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero {
    height: 80rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .tammie-hero {
    height: 56rem;
  }
}
.tammie-hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__inner {
    align-items: flex-start;
    padding: 0 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__inner {
    align-items: flex-start;
    padding: 0 2.4rem;
  }
}
.tammie-hero__name {
  font-size: var(--font-size-6xl);
  color: var(--color-main-200);
  line-height: 1.2;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__name {
    font-size: var(--font-size-3xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__name {
    font-size: var(--font-size-3xl);
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .tammie-hero__name {
    font-size: var(--font-size-4xl);
  }
}
.tammie-hero__name-en {
  font-size: var(--font-size-6xl);
  color: var(--color-main-200);
  line-height: 1.2;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__name-en {
    font-size: var(--font-size-3xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__name-en {
    font-size: var(--font-size-3xl);
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .tammie-hero__name-en {
    font-size: var(--font-size-4xl);
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__profile {
    padding: 4rem 0 0;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__profile {
    padding: 4rem 0 0;
  }
}
.tammie-hero__img {
  width: 54rem;
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__img {
    width: 90vw;
    right: inherit;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    padding-top: 4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__img {
    width: 90vw;
    background-color: var(--color-main-800);
    right: inherit;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    padding-top: 4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .tammie-hero__img {
    width: 36rem;
  }
}
.tammie-hero__img img {
  max-width: 100%;
  display: block;
  margin: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__img img {
    width: 28rem;
    margin: 0 auto;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__img img {
    width: 32rem;
    margin: 0 auto;
  }
}
.tammie-hero__experience {
  padding-top: 2.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__experience {
    padding-top: 1.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__experience {
    padding-top: 1.6rem;
  }
}
.tammie-hero__experience li {
  font-size: var(--font-size-base);
  color: var(--color-main-200);
  line-height: 1.6;
}
.tammie-hero__experience li:not(:last-child) {
  margin-bottom: 0.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-hero__experience li {
    font-size: var(--font-size-xs);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-hero__experience li {
    font-size: var(--font-size-sm);
  }
}

.tammie-wrap__inner {
  display: grid;
  grid-template-columns: 1fr 40rem;
  gap: 8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-wrap__inner {
    grid-template-columns: 1fr;
    gap: 5.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-wrap__inner {
    grid-template-columns: 1fr;
    gap: 5.6rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .tammie-wrap__inner {
    grid-template-columns: 1fr;
    background-color: blue;
    gap: 5.6rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .tammie-wrap__inner {
    grid-template-columns: 1fr 28rem;
    background-color: blue;
    gap: 5.6rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .tammie-wrap__inner {
    grid-template-columns: 1fr 28rem;
  }
}

@media (min-width: 0) and (max-width: 480px) {
  .tammie-intro {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
.tammie-intro__inner-block {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.tammie-intro__wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-intro__wrap {
    gap: 2rem;
  }
}
.tammie-intro__wrap ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}
.tammie-intro__wrap ul li {
  font-size: var(--font-size-base);
  color: var(--color-main-700);
  line-height: 1.6;
}
.tammie-intro__wrap ul li:not(:last-child) {
  margin-bottom: 0.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-intro__wrap ul li {
    font-size: var(--font-size-xs);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-intro__wrap ul li {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 0) and (max-width: 480px) {
  .tammie-book {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}
.tammie-book__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-book__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .tammie-book__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .tammie-book__wrap {
    gap: 2.4rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .tammie-book__wrap {
    gap: 3.2rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .tammie-book__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tammie-book__item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content;
  gap: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-book__item {
    grid-template-columns: 1fr;
  }
}
.tammie-book__book {
  margin: 0 auto;
  height: min-content;
}
@media (min-width: 0) and (max-width: 480px) {
  .tammie-book__book {
    width: 24rem;
  }
}
.tammie-book__book a {
  display: block;
  margin: 0;
}
.tammie-book__book img {
  max-width: 100%;
  display: block;
  margin: 0;
}
.tammie-book__content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.tammie-book__book-title a {
  font-size: var(--font-size-lg);
  color: var(--color-main-800);
  line-height: 1.6;
}
.tammie-book__detail {
  display: grid;
  grid-template-columns: 1fr;
}
.tammie-book__specification {
  padding: 0.8rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.tammie-book__specification:not(:last-child) {
  border-bottom: solid 0.1rem var(--color-main-300);
}
.tammie-book__specification span:nth-child(1) {
  font-size: var(--font-size-sm);
  color: var(--color-main-600);
  display: block;
  line-height: 1.6;
}
.tammie-book__specification span:nth-child(2) {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
}

.pet-article-list__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-list__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-list__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-article-list__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pet-article-post__inner-content ol, .pet-article-post__inner-content ul {
  padding-left: 4rem;
}
.pet-article-post__inner-content ol:not(:last-child), .pet-article-post__inner-content ul:not(:last-child) {
  margin-bottom: 2.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content ol:not(:last-child), .pet-article-post__inner-content ul:not(:last-child) {
    padding-left: 2.4rem;
  }
}
.pet-article-post__inner-content ol li, .pet-article-post__inner-content ul li {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-main-800);
  letter-spacing: 0.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content ol li, .pet-article-post__inner-content ul li {
    font-size: var(--font-size-base);
  }
}
.pet-article-post__inner-content ol li:not(:last-child), .pet-article-post__inner-content ul li:not(:last-child) {
  margin-bottom: 1.6rem;
}

.pet-article-post__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding-bottom: 4rem;
}
.pet-article-post__title {
  font-size: clamp(var(--font-size-5xl), -0.875rem + 8.333vw, var(--font-size-6xl));
  color: var(--color-main-800);
  text-align: center;
  line-height: 1.4;
  font-weight: 900;
}
.pet-article-post__post-img {
  border-radius: 1.2rem;
  overflow: hidden;
}
.pet-article-post__post-video {
  aspect-ratio: 16/9;
  position: relative;
}
.pet-article-post__post-video iframe {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pet-article-post__purchasing {
  box-sizing: border-box;
  width: clamp(28rem, 100% - 2.4rem, 32rem);
  position: absolute;
  padding: 2.4rem;
  border-radius: 1.2rem;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  left: 50%;
  top: 30%;
  transform: translate3d(-50%, 0, 0);
  background-color: #fff;
  gap: 2rem;
  display: none;
  pointer-events: none;
  box-shadow: 0 0 2rem var(--color-main-500);
}
.pet-article-post__purchasing p {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  text-align: center;
}
.pet-article-post__wrap {
  width: 88rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5.6rem;
  margin-bottom: 6.4rem;
  position: relative;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__wrap {
    width: 100%;
    gap: 3.2rem;
    margin-bottom: 3.2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__wrap {
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-article-post__wrap {
    width: 100%;
  }
}
.pet-article-post__wrap.lock {
  height: 96rem;
  overflow: hidden;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__wrap.lock {
    height: 72rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__wrap.lock {
    height: 72rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-article-post__wrap.lock {
    height: 72rem;
  }
}
.pet-article-post__wrap.lock::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--color-main-150) 5%, rgba(255, 255, 255, 0) 100%);
}
.pet-article-post__wrap.lock .pet-article-post__purchasing {
  display: flex;
  pointer-events: auto;
}
.pet-article-post__article-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6.4rem;
  position: relative;
}
.pet-article-post__article-content.type-1 .pet-article-post__post-img::after, .pet-article-post__article-content.type-2 .pet-article-post__post-img::after, .pet-article-post__article-content.type-3 .pet-article-post__post-img::after, .pet-article-post__article-content.type-4 .pet-article-post__post-img::after, .pet-article-post__article-content.type-5 .pet-article-post__post-img::after, .pet-article-post__article-content.type-6 .pet-article-post__post-img::after, .pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 7.2rem;
  aspect-ratio: 1/1;
  content: "";
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__article-content.type-1 .pet-article-post__post-img::after, .pet-article-post__article-content.type-2 .pet-article-post__post-img::after, .pet-article-post__article-content.type-3 .pet-article-post__post-img::after, .pet-article-post__article-content.type-4 .pet-article-post__post-img::after, .pet-article-post__article-content.type-5 .pet-article-post__post-img::after, .pet-article-post__article-content.type-6 .pet-article-post__post-img::after, .pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-article-post__article-content.type-1 .pet-article-post__post-img::after, .pet-article-post__article-content.type-2 .pet-article-post__post-img::after, .pet-article-post__article-content.type-3 .pet-article-post__post-img::after, .pet-article-post__article-content.type-4 .pet-article-post__post-img::after, .pet-article-post__article-content.type-5 .pet-article-post__post-img::after, .pet-article-post__article-content.type-6 .pet-article-post__post-img::after, .pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-article-post__article-content.type-1 .pet-article-post__post-img::after, .pet-article-post__article-content.type-2 .pet-article-post__post-img::after, .pet-article-post__article-content.type-3 .pet-article-post__post-img::after, .pet-article-post__article-content.type-4 .pet-article-post__post-img::after, .pet-article-post__article-content.type-5 .pet-article-post__post-img::after, .pet-article-post__article-content.type-6 .pet-article-post__post-img::after, .pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .pet-article-post__article-content.type-1 .pet-article-post__post-img::after, .pet-article-post__article-content.type-2 .pet-article-post__post-img::after, .pet-article-post__article-content.type-3 .pet-article-post__post-img::after, .pet-article-post__article-content.type-4 .pet-article-post__post-img::after, .pet-article-post__article-content.type-5 .pet-article-post__post-img::after, .pet-article-post__article-content.type-6 .pet-article-post__post-img::after, .pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
    width: 4.8rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .pet-article-post__article-content.type-1 .pet-article-post__post-img::after, .pet-article-post__article-content.type-2 .pet-article-post__post-img::after, .pet-article-post__article-content.type-3 .pet-article-post__post-img::after, .pet-article-post__article-content.type-4 .pet-article-post__post-img::after, .pet-article-post__article-content.type-5 .pet-article-post__post-img::after, .pet-article-post__article-content.type-6 .pet-article-post__post-img::after, .pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
    width: 5.6rem;
    right: 1.2rem;
    top: 1.2rem;
  }
}
.pet-article-post__article-content.type-1 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-1@2x.png") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__article-content.type-2 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-2@2x.png") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__article-content.type-3 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-3@2x.png") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__article-content.type-4 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-4@2x.png") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__article-content.type-5 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-5@2x.png") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__article-content.type-6 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-6@2x.png") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__article-content.type-7 .pet-article-post__post-img::after {
  background: transparent url("../images/post-label-7@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__article-content {
    gap: 3.2rem;
  }
}
.pet-article-post__inner-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.pet-article-post__inner-content h1,
.pet-article-post__inner-content h2 {
  font-size: var(--font-size-4xl);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content h1,
  .pet-article-post__inner-content h2 {
    font-size: var(--font-size-3xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__inner-content h1,
  .pet-article-post__inner-content h2 {
    font-size: var(--font-size-3xl);
  }
}
.pet-article-post__inner-content h1:first-child,
.pet-article-post__inner-content h2:first-child {
  margin-bottom: 1.2rem;
}
.pet-article-post__inner-content h3 {
  font-size: var(--font-size-3xl);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content h3 {
    font-size: var(--font-size-2xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__inner-content h3 {
    font-size: var(--font-size-2xl);
  }
}
.pet-article-post__inner-content h4 {
  font-size: var(--font-size-2xl);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content h4 {
    font-size: var(--font-size-xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__inner-content h4 {
    font-size: var(--font-size-xl);
  }
}
.pet-article-post__inner-content h5 {
  font-size: var(--font-size-xl);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content h5 {
    font-size: var(--font-size-lg);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__inner-content h5 {
    font-size: var(--font-size-lg);
  }
}
.pet-article-post__inner-content h6 {
  font-size: var(--font-size-xl);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__inner-content h6 {
    font-size: var(--font-size-lg);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__inner-content h6 {
    font-size: var(--font-size-lg);
  }
}
.pet-article-post__inner-content p a {
  color: var(--color-main-800);
  border-bottom: 0.1rem solid var(--color-main-800);
}
.pet-article-post__inner-content p ~ h1, .pet-article-post__inner-content p ~ h2, .pet-article-post__inner-content p ~ h3, .pet-article-post__inner-content p ~ h4, .pet-article-post__inner-content p ~ h5, .pet-article-post__inner-content p ~ h6 {
  margin-top: 4.8rem;
  margin-bottom: 1.2rem;
}
.pet-article-post__inner-content p:not(:last-child) {
  margin-bottom: 2.4rem;
}
.pet-article-post__inner-content img {
  max-width: 100%;
  display: block;
  margin: 0;
  border-radius: 1.2rem;
}
.pet-article-post__inner-content iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
  display: block;
  margin: 0 auto 2.4rem;
}
.pet-article-post__inner-content ul {
  list-style: disc;
}
.pet-article-post__inner-content ol {
  list-style: decimal;
}
.pet-article-post__more {
  width: 96rem;
  margin: 0 auto;
  font-size: var(--font-size-2xl);
  color: var(--color-main-600);
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__more {
    width: 100%;
    font-size: var(--font-size-xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__more {
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-article-post__more {
    width: 100%;
  }
}
.pet-article-post__more a {
  color: var(--color-main-800);
  transition: color 300ms ease;
  padding-left: 1.6rem;
  margin-left: 1.6rem;
  border-left: solid 0.1rem var(--color-main-800);
}
.pet-article-post__more a:hover {
  color: var(--color-main-900);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__more a {
    display: block;
    padding-left: 0;
    padding-top: 1.6rem;
    margin-left: 0;
    margin-top: 1.6rem;
    border-top: solid 0.1rem var(--color-main-300);
    border-left: 0;
  }
}
.pet-article-post__control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pet-article-post__share {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--color-main-800);
}
.pet-article-post__btn-facebook {
  width: 3.2rem;
  height: 3.2rem;
  background: transparent url("../images/icon-facebook-color.svg") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__btn-line {
  width: 3.2rem;
  height: 3.2rem;
  background: transparent url("../images/icon-line-color.svg") no-repeat 0 0;
  background-size: cover;
}
.pet-article-post__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__nav {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.pet-article-post__btn-article {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.4rem 8.8rem;
  border: solid 0.1rem var(--color-main-200);
  border-radius: 1.2rem;
  position: relative;
  line-height: 1.4;
  background-color: var(--color-main-100);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__btn-article {
    padding: 2rem 5.6rem;
  }
}
.pet-article-post__btn-article::before {
  transform-origin: 50%;
  position: absolute;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-top: solid 0.2rem var(--color-main-600);
  border-right: solid 0.2rem var(--color-main-600);
  content: "";
}
.pet-article-post__btn-article span:nth-child(1) {
  font-size: var(--font-size-lg);
  color: var(--color-main-600);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__btn-article span:nth-child(1) {
    font-size: var(--font-size-base);
  }
}
.pet-article-post__btn-article span:nth-child(2) {
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--color-main-800);
  transition: color 300ms ease;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__btn-article span:nth-child(2) {
    font-size: var(--font-size-lg);
  }
}
.pet-article-post__btn-article:hover span:nth-child(2) {
  color: var(--color-main-900);
}
.pet-article-post__btn-article:nth-child(1)::before {
  left: 4rem;
  transform: translate3d(0, -50%, 0) rotate(-135deg);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__btn-article:nth-child(1) {
    padding-right: 2rem;
  }
  .pet-article-post__btn-article:nth-child(1)::before {
    left: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__btn-article:nth-child(1) {
    padding-right: 4rem;
  }
}
.pet-article-post__btn-article:nth-child(2) {
  align-items: flex-end;
}
.pet-article-post__btn-article:nth-child(2)::before {
  right: 4rem;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-article-post__btn-article:nth-child(2) {
    align-items: flex-start;
    padding-left: 2rem;
  }
  .pet-article-post__btn-article:nth-child(2)::before {
    right: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-article-post__btn-article:nth-child(2) {
    padding-left: 4rem;
  }
}

@media (min-width: 0) and (max-width: 480px) {
  .pet-related-post {
    padding: 0 2.4rem;
  }
}
.pet-related-post__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-related-post__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-related-post__wrap {
    grid-template-columns: 1fr;
  }
}

.course-list__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.course-list__course {
  display: grid;
  grid-template-columns: 4.8rem 1fr min-content max-content max-content max-content;
  align-items: center;
  gap: 2rem;
  background-color: var(--color-main-200);
  padding: 2rem;
  border-radius: 1.2rem;
  position: relative;
}
.course-list__course.expired {
  opacity: 0.75;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__course {
    gap: 1.2rem;
    grid-template: "a b b b b b" min-content "c c c c c c" min-content "e e e e e e" min-content "f f f f f f" min-content "g g g g g g" min-content/4.8rem 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__course {
    gap: 1.2rem;
    grid-template: "a b b b b b" min-content "c c c c c c" min-content "e e e f f f" min-content "g g g g g g" min-content/4.8rem 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__course {
    gap: 1.2rem;
    grid-template: "a b b b b b c" min-content "d e e f f g g" min-content/4.8rem 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__course {
    gap: 1.2rem;
    grid-template: "a b b b b b c" min-content "d e e f f g g" min-content/4.8rem 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__course {
    grid-template: "a b b c" min-content "d e f g" min-content/4.8rem 1fr 1fr;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__course-title {
    grid-area: c;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__course-title {
    grid-area: c;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__course-title {
    grid-area: b;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__course-title {
    grid-area: b;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__course-title {
    grid-area: b;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__label {
    grid-area: b;
    margin-left: auto;
    margin-right: 0;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__label {
    grid-area: b;
    margin-left: auto;
    margin-right: 0;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__label {
    position: absolute;
    right: 2rem;
    top: 2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__label {
    position: absolute;
    right: 2rem;
    top: 2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__label {
    grid-area: c;
    margin-right: 0;
    margin-left: auto;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__date {
    grid-area: e;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__date {
    grid-area: e;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__date {
    grid-area: e;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__date {
    grid-area: e;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__date {
    grid-area: e;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__course-price {
    grid-area: f;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__course-price {
    grid-area: f;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__course-price {
    grid-area: f;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__course-price {
    grid-area: f;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__course-price {
    grid-area: f;
  }
}
.course-list__control {
  display: flex;
  gap: 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__control {
    grid-area: g;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-list__control {
    grid-area: g;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-list__control {
    grid-area: g;
    justify-content: flex-end;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .course-list__control {
    grid-area: g;
    justify-content: flex-end;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .course-list__control {
    grid-area: g;
    justify-content: flex-end;
  }
}
.course-list__course-all {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__course-all {
    gap: 3.2rem;
  }
}
.course-list__block.purchasing {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  border: dashed 0.1rem var(--color-main-500);
  padding: 2rem;
  border-radius: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__block.purchasing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.course-list__block > h3 {
  font-size: var(--font-size-xl);
  color: var(--color-main-700);
  margin-bottom: 2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__block > h3 {
    font-size: var(--font-size-lg);
  }
}
.course-list__btn-apply.active {
  background-color: var(--color-danger-500);
  border-color: var(--color-danger-500);
}
.course-list__pending, .course-list__price {
  color: var(--color-main-800);
  font-size: var(--font-size-base);
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__pending, .course-list__price {
    text-align: right;
    font-size: var(--font-size-sm);
  }
}
.course-list__pending strong, .course-list__price strong {
  padding: 0 0.2rem;
  color: var(--color-danger-500);
  font-size: var(--font-size-2xl);
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__pending strong, .course-list__price strong {
    text-align: right;
    font-size: var(--font-size-xl);
  }
}
.course-list__btn-purchasing {
  width: min-content;
  display: block;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-list__btn-purchasing {
    grid-column: 1/3;
    grid-row: 2/3;
    margin-right: 0;
    margin-left: auto;
  }
}

.course-detail__wrap {
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-detail__wrap {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-detail__wrap {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-detail__wrap {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
.course-detail__kv {
  position: sticky;
  top: 12rem;
  left: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-detail__kv {
    position: relative;
    top: inherit;
    left: inherit;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .course-detail__kv {
    position: relative;
    top: inherit;
    left: inherit;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .course-detail__kv {
    position: relative;
    top: inherit;
    left: inherit;
  }
}
.course-detail__intro {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.course-detail__intro h3 {
  font-size: var(--font-size-3xl);
  color: var(--color-main-800);
  line-height: 1.6;
  font-weight: 900;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-detail__intro h3 {
    font-size: var(--font-size-xl);
  }
}
.course-detail__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5.6rem;
}
.course-detail__info {
  flex-direction: column;
}
.course-detail__block {
  display: flex;
  flex-direction: column;
}
.course-detail__content-inner {
  padding-top: 2rem;
}
.course-detail__content-inner p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-main-700);
  letter-spacing: 0.2rem;
  margin-bottom: 2.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-detail__content-inner p {
    font-size: var(--font-size-sm);
  }
}
.course-detail__content-inner h1,
.course-detail__content-inner h2 {
  font-size: var(--font-size-lg);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.course-detail__content-inner h3 {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.course-detail__content-inner ul {
  padding-left: 4rem;
  list-style: disc;
}
.course-detail__content-inner ul:not(:last-child) {
  margin-bottom: 3.2rem;
}
.course-detail__content-inner ul li {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-main-700);
  letter-spacing: 0.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-detail__content-inner ul li {
    font-size: var(--font-size-sm);
  }
}
.course-detail__content-inner ul li:not(:last-child) {
  margin-bottom: 0.8rem;
}
.course-detail__nav {
  display: flex;
  gap: 1.6rem;
  width: 100%;
}
@media (min-width: 0) and (max-width: 480px) {
  .course-detail__nav {
    justify-content: center;
  }
}
.course-detail__btn-cancel {
  background-color: var(--color-danger-500);
}
.course-detail__btn-cancel:hover {
  background-color: var(--color-danger-700);
}
.course-detail__teacher {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 1.6rem;
  border-radius: 1.2rem;
  border: solid 0.1rem var(--color-main-200);
  background-color: var(--color-main-100);
}
.course-detail__teacher-profile {
  display: grid;
  gap: 0 1.6rem;
  align-items: center;
  grid-template-columns: 5.6rem 1fr;
  grid-template-rows: repeat(2, 1fr);
}
.course-detail__teacher-image {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  overflow: hidden;
  grid-column: 1/2;
  grid-row: 1/3;
}
.course-detail__teacher-name {
  font-size: var(--font-size-xl);
  color: var(--color-main-800);
  font-weight: 900;
}
.course-detail__teacher-aka {
  font-size: var(--font-size-base);
  color: var(--color-main-600);
}
.course-detail__item {
  display: flex;
  gap: 0.8rem;
  flex-direction: column;
}
.course-detail__item:not(:last-child) {
  border-bottom: 0.1rem solid var(--color-main-300);
  padding-bottom: 1.6rem;
}
.course-detail__item h4 {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  font-weight: 900;
}
.course-detail__item-wrap {
  gap: 1.2rem;
  display: flex;
}
.course-detail__date {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  font-weight: 500;
}
.course-detail__item-text-price {
  font-size: var(--font-size-4xl);
  color: var(--color-danger-700);
  font-weight: 900;
}
.course-detail__course-content h4 {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  font-weight: 900;
}
.course-detail__text {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}

.croppie-overlay {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 300ms ease;
}
.croppie-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.croppie-overlay__inner {
  border-radius: 1.6rem;
  width: 48rem;
  height: 56rem;
  position: relative;
  padding: 2.4rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
.croppie-overlay__headshot {
  padding-bottom: 2.4rem;
}
.croppie-overlay__upload-result {
  width: 20rem;
  margin: 0 auto;
}

.user-profile__row {
  position: relative;
}
.user-profile__btn-update {
  display: block;
  width: min-content;
  margin-left: 0;
  margin-right: auto;
}
.user-profile__member-info {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.user-profile__text {
  font-size: var(--font-size-base);
  font-weight: 900;
  color: var(--color-main-800);
  border: dotted 0.2rem transparent;
  border-radius: 1.2rem;
}
.user-profile__wrap {
  margin: 0 auto;
  width: 80rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5.6rem;
}
.user-profile__wrap.password, .user-profile__wrap.profile {
  width: 48rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .user-profile__wrap.password, .user-profile__wrap.profile {
    width: 100%;
  }
}
.user-profile__wrap.certificate {
  width: 100%;
  grid-template-columns: 1fr;
}
@media (min-width: 0) and (max-width: 480px) {
  .user-profile__wrap {
    gap: 2.4rem;
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .user-profile__wrap {
    width: 100%;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .user-profile__wrap {
    width: 100%;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .user-profile__wrap {
    width: 100%;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .user-profile__wrap {
    width: 100%;
  }
}
.user-profile__icon {
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  background-color: transparent;
}
.user-profile__icon.level-1 {
  background-image: url("../images/icon-level-1.svg");
  background-size: cover;
}
.user-profile__icon.level-2 {
  background-image: url("../images/icon-level-2.svg");
  background-size: cover;
}
.user-profile__icon.level-3 {
  background-image: url("../images/icon-level-3.svg");
  background-size: cover;
}
.user-profile__icon.level-4 {
  background-image: url("../images/icon-level-4.svg");
  background-size: cover;
}
.user-profile__pet-type-wrap {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.user-profile__pet-type-wrap.flex-wrap {
  flex-wrap: wrap;
}
.user-profile__pet-type-wrap.flex-column {
  flex-direction: column;
  align-items: flex-start;
}
.user-profile__checkbox {
  width: 100%;
}
.user-profile__radio-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}
.user-profile__radio-wrap.flex-column {
  flex-direction: column;
  align-items: flex-start;
}
.user-profile__radio {
  width: 100%;
}

.user-pets__wrap {
  margin: 0 auto;
}
.user-pets__list {
  grid-template-columns: repeat(6, 1fr);
  display: grid;
  gap: 3.2rem;
  margin: 0 auto;
}
@media (min-width: 0) and (max-width: 480px) {
  .user-pets__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 1.6rem;
    max-width: 48rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .user-pets__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 1.6rem;
    max-width: 48rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .user-pets__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 56rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .user-pets__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .user-pets__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
  }
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .user-pets__list {
    grid-template-columns: repeat(5, 1fr);
    gap: 2.4rem;
  }
}
@media (min-width: 1920px) and (max-width: 2560px) {
  .user-pets__list {
    grid-template-columns: repeat(6, 1fr);
    gap: 3.2rem;
  }
}

.pets-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
.pets-item__img {
  aspect-ratio: 1/1;
}
@media (min-width: 0) and (max-width: 480px) {
  .pets-item__img {
    width: 12rem;
    margin: 0 auto;
  }
}
.pets-item__img a {
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.pets-item__img img {
  border-radius: 50%;
}
.pets-item__name {
  text-align: center;
  font-size: var(--font-size-xl);
}
.pets-item__name a {
  color: var(--color-main-800);
  font-weight: 900;
}
.pets-item__info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.pets-item__gender {
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
}
.pets-item__gender.male {
  background-image: url("../images/icon-male.svg");
}
.pets-item__gender.female {
  background-image: url("../images/icon-female.svg");
}
.pets-item__gender.die.male {
  background-image: url("../images/icon-male-die.svg");
}
.pets-item__gender.die.female {
  background-image: url("../images/icon-female-die.svg");
}
.pets-item__animal, .pets-item__age {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
}
.pets-item__btn-add {
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--color-main-900);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: var(--font-size-lg);
  color: var(--color-main-200);
}
@media (min-width: 0) and (max-width: 480px) {
  .pets-item__btn-add {
    width: 12rem;
    margin: 0 auto;
    font-size: var(--font-size-sm);
  }
}
.pets-item__btn-delete {
  background-color: var(--color-danger-500);
  border-color: var(--color-danger-500);
  width: max-content;
  margin: 0 auto;
}
.pets-item__btn-delete:hover {
  background-color: var(--color-danger-700);
  border-color: var(--color-danger-700);
}
.pets-item__nav {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

.user-course__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  padding-top: 3.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .user-course__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .user-course__list {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .user-course__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .user-course__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.user-article__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .user-article__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

.pet-profile__wrap {
  margin: 0 auto;
  max-width: 64rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
}
.pet-profile__wrap.password {
  grid-template-columns: 1fr;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__wrap {
    gap: 2.4rem;
    max-width: 32rem;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-profile__wrap {
    gap: 2.4rem;
    max-width: 40rem;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-profile__wrap {
    gap: 2.4rem;
    max-width: 60rem;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-profile__headshot {
    position: relative;
    top: inherit;
    left: inherit;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-profile__headshot {
    position: relative;
    top: inherit;
    left: inherit;
  }
}
.pet-profile__btn-update {
  margin-left: 0;
  margin-right: auto;
}
.pet-profile__text {
  font-size: var(--font-size-base);
  font-weight: 900;
  color: var(--color-main-900);
  border: dotted 0.2rem transparent;
  border-radius: 1.2rem;
}
.pet-profile__chronic-wrap, .pet-profile__radio-wrap, .pet-profile__checkbox-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}
.pet-profile__chronic-wrap.flex-column, .pet-profile__radio-wrap.flex-column, .pet-profile__checkbox-wrap.flex-column {
  flex-direction: column;
  align-items: flex-start;
}
.pet-profile__radio {
  width: 100%;
}
.pet-profile__btn-add {
  margin-left: 0;
  margin-right: auto;
}
.pet-profile__btn-new {
  margin-left: 0;
  margin-right: auto;
}
.pet-profile__btn-delete {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-main-800) url("../images/icon-delete.svg") no-repeat center center;
  background-size: 0.8rem;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0;
  border: 0;
  transform: translate3d(40%, -40%, 0);
}
.pet-profile__drug-input-wrap {
  display: flex;
  gap: 1.6rem;
}
.pet-profile__drug-input-wrap input {
  flex: 1;
}
.pet-profile__drug-wrap {
  padding-top: 0.8rem;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.pet-profile__drug-item {
  position: relative;
}
.pet-profile__drug-item span {
  border: solid 0.2rem var(--color-main-300);
  color: var(--color-main-800);
  padding: 1.2rem 1.6rem;
  border-radius: 1.2rem;
  display: block;
  font-size: var(--font-size-base);
}
.pet-profile__name {
  padding-top: 2rem;
  text-align: center;
  font-size: var(--font-size-xl);
  color: var(--color-main-700);
}
.pet-profile__info {
  padding-top: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.pet-profile__gender {
  width: 2.4rem;
  height: 2.4rem;
  background-size: 2.4rem;
}
.pet-profile__gender.male {
  background-image: url("../images/icon-male.svg");
}
.pet-profile__gender.female {
  background-image: url("../images/icon-female.svg");
}
.pet-profile__gender.die.male {
  background-image: url("../images/icon-male-die.svg");
}
.pet-profile__gender.die.female {
  background-image: url("../images/icon-female-die.svg");
}
.pet-profile__animal, .pet-profile__age {
  font-size: var(--font-size-base);
  color: var(--color-main-700);
}
.pet-profile__journal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
}
.pet-profile__btn-add-journal {
  width: 12rem;
  text-align: center;
  margin: 0 auto;
}
.pet-profile__btn-delete-file {
  background-color: var(--color-danger-500);
  border-color: var(--color-danger-500);
  width: max-content;
  margin-left: auto;
  margin-right: 0;
}
.pet-profile__btn-delete-file:hover {
  background-color: var(--color-danger-700);
  border-color: var(--color-danger-700);
}

.pet-journal-post {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.pet-journal-post__main-title {
  color: var(--color-main-800);
  text-align: center;
  font-size: var(--font-size-4xl);
}
.pet-journal-post__info {
  justify-content: center;
}
.pet-journal-post__post-img {
  border-radius: 1.2rem;
  overflow: hidden;
}
.pet-journal-post__content p {
  text-indent: 3.6rem;
}
.pet-journal-post__control {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
}
.pet-journal-post__btn-delete {
  background-color: var(--color-danger-500);
}
.pet-journal-post__btn-delete:hover {
  background-color: var(--color-danger-700);
}

.policies__wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__wrap {
    gap: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .policies__wrap {
    gap: 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .policies__wrap {
    padding: 0 2.4rem;
    gap: 2.4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .policies__wrap {
    padding: 0 2.4rem;
    gap: 2.4rem;
  }
}
.policies__text {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__text {
    font-size: var(--font-size-sm);
  }
}
.policies__ol-list {
  padding-left: 5.6rem;
  list-style-type: cjk-ideographic;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list {
    padding-left: 4.8rem;
  }
}
.policies__ol-list > li::marker {
  font-size: var(--font-size-lg);
  color: var(--color-main-900);
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list > li::marker {
    font-size: var(--font-size-base);
  }
}
.policies__ol-list > li > h3 {
  font-size: var(--font-size-lg);
  color: var(--color-main-900);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list > li > h3 {
    font-size: var(--font-size-base);
  }
}
.policies__ol-list > li > p {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list > li > p {
    font-size: var(--font-size-sm);
  }
}
.policies__ol-list > li:not(:last-child) {
  margin-bottom: 5.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list > li:not(:last-child) {
    margin-bottom: 4rem;
  }
}
.policies__ol-list-level-1 {
  list-style: decimal;
  padding-left: 2rem;
}
.policies__ol-list-level-1 > li {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list-level-1 > li {
    font-size: var(--font-size-sm);
  }
}
.policies__ol-list-level-1 > li:not(:last-child) {
  margin-bottom: 1.2rem;
}
.policies__ol-list-level-1 > li > h4 {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .policies__ol-list-level-1 > li > h4 {
    font-size: var(--font-size-sm);
  }
}
.policies__ol-list-level-2 {
  list-style-type: lower-alpha;
  padding-left: 2.4rem;
}
.policies__ol-list-level-2 > li {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.policies__ol-list-level-2 > li:not(:last-child) {
  margin-bottom: 1.2rem;
}
.policies__ol-list-level-2 > li > h5 {
  font-size: var(--font-size-sm);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.policies__ol-list-level-3 {
  list-style-type: lower-roman;
  padding-left: 1.6rem;
}
.policies__ol-list-level-3 > li {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.policies__ol-list-level-3 > li:not(:last-child) {
  margin-bottom: 1.2rem;
}

.privacy__wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__wrap {
    gap: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .privacy__wrap {
    gap: 2.4rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .privacy__wrap {
    padding: 0 2.4rem;
    gap: 2.4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .privacy__wrap {
    padding: 0 2.4rem;
    gap: 2.4rem;
  }
}
.privacy__text {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__text {
    font-size: var(--font-size-sm);
  }
}
.privacy__ol-list {
  padding-left: 5.6rem;
  list-style-type: cjk-ideographic;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list {
    padding-left: 4.8rem;
  }
}
.privacy__ol-list > li::marker {
  font-size: var(--font-size-lg);
  color: var(--color-main-900);
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list > li::marker {
    font-size: var(--font-size-base);
  }
}
.privacy__ol-list > li > h3 {
  font-size: var(--font-size-lg);
  color: var(--color-main-900);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list > li > h3 {
    font-size: var(--font-size-base);
  }
}
.privacy__ol-list > li > p {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list > li > p {
    font-size: var(--font-size-sm);
  }
}
.privacy__ol-list > li:not(:last-child) {
  margin-bottom: 5.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list > li:not(:last-child) {
    margin-bottom: 4rem;
  }
}
.privacy__ol-list-level-1 {
  list-style: decimal;
  padding-left: 2rem;
}
.privacy__ol-list-level-1 > li {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list-level-1 > li {
    font-size: var(--font-size-sm);
  }
}
.privacy__ol-list-level-1 > li:not(:last-child) {
  margin-bottom: 1.2rem;
}
.privacy__ol-list-level-1 > li > h4 {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .privacy__ol-list-level-1 > li > h4 {
    font-size: var(--font-size-sm);
  }
}
.privacy__ol-list-level-2 {
  list-style-type: lower-alpha;
  padding-left: 2.4rem;
}
.privacy__ol-list-level-2 > li {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.privacy__ol-list-level-2 > li:not(:last-child) {
  margin-bottom: 1.2rem;
}
.privacy__ol-list-level-2 > li > h5 {
  font-size: var(--font-size-sm);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.privacy__ol-list-level-3 {
  list-style-type: lower-roman;
  padding-left: 1.6rem;
}
.privacy__ol-list-level-3 > li {
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.privacy__ol-list-level-3 > li:not(:last-child) {
  margin-bottom: 1.2rem;
}

.contact__wrap {
  margin: 0 auto;
  width: 64rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .contact__wrap {
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .contact__wrap {
    width: 100%;
  }
}
.contact__label {
  color: var(--color-grey-600);
  font-size: var(--font-size-base);
  display: block;
}
.contact__textarea {
  height: 20rem;
  line-height: 1.6;
}
.contact__form {
  display: grid;
  gap: 2rem;
}
.contact__row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
}
.contact__input-file {
  margin: 0;
  box-sizing: border-box;
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: var(--font-size-sm);
  color: var(--color-main-800);
  border: 0.1rem solid var(--color-main-200);
  padding: 0.8rem;
  background-color: var(--color-main-200);
  border-radius: 0.8rem;
  border: solid 0.1rem var(--color-main-300);
}
.contact__input-file::file-selector-button {
  font-weight: bold;
  color: var(--color-main-800);
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.1px;
  padding: 0.8rem 1.2rem;
  font-size: var(--font-size-sm);
  background-color: var(--color-main-200);
  border-right: solid 0.1rem var(--color-main-300);
  transform: translate3d(-0.6rem, 0, 0);
}
.membership__level-list {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 0) and (max-width: 480px) {
  .membership__level-list {
    gap: 5.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .membership__level-list {
    gap: 4rem;
  }
}
.membership__level {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.membership__level:not(:last-child) {
  border-bottom: solid 0.1rem var(--color-main-300);
}
@media (min-width: 0) and (max-width: 480px) {
  .membership__level {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .membership__level {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .membership__level {
    grid-template-columns: 16rem repeat(4, 1fr);
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .membership__level {
    grid-template-columns: 16rem repeat(4, 1fr);
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .membership__level {
    grid-template-columns: 16rem repeat(4, 1fr);
  }
}
.membership__title {
  font-size: var(--font-size-base);
  text-align: center;
  color: var(--color-main-800);
  line-height: 1.6;
  width: 100%;
  font-weight: 900;
}
@media (min-width: 720px) and (max-width: 960px) {
  .membership__title {
    font-size: var(--font-size-sm);
  }
}
.membership__btn {
  display: block;
  align-self: center;
}
.membership__level-image {
  width: 5.6rem;
  margin: 0 auto;
}
.membership__level-image img {
  max-width: 100%;
}
@media (min-width: 0) and (max-width: 480px) {
  .membership__level-image {
    width: 7.2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .membership__level-image {
    width: 7.2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .membership__level-image {
    width: 4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .membership__level-image {
    width: 4rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .membership__level-image {
    width: 4rem;
  }
}
.membership__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 5.6rem 2.4rem;
}
.membership__row:not(:last-child) {
  border-right: solid 0.1rem var(--color-main-200);
}
@media (min-width: 0) and (max-width: 480px) {
  .membership__row:not(:last-child) {
    border-right: 0;
    border-bottom: solid 0.1rem var(--color-main-300);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .membership__row:not(:last-child) {
    border-right: 0;
    border-bottom: solid 0.1rem var(--color-main-300);
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .membership__row {
    padding: 2rem 0;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .membership__row {
    padding: 2rem 0;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .membership__row {
    padding: 2.4rem 1.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .membership__row {
    padding: 2.4rem 1.2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .membership__row {
    padding: 2.4rem 1.2rem;
  }
}
.membership__text {
  font-size: var(--font-size-sm);
  text-align: center;
  line-height: 1.6;
  color: var(--color-main-800);
}
.membership__remind-text {
  width: 100%;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-danger-700);
}
.membership__ul-lsit {
  list-style: disc;
  padding-left: 1.6rem;
  width: 100%;
}
.membership__ul-lsit > li {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-main-800);
  font-weight: 700;
}
@media (min-width: 720px) and (max-width: 960px) {
  .membership__ul-lsit > li {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .membership__ul-lsit > li {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .membership__ul-lsit > li {
    font-size: var(--font-size-sm);
  }
}
.membership__ul-lsit > li:not(:last-child) {
  margin-bottom: 0.4rem;
}
.membership__ol-lsit {
  padding-top: 0.4rem;
}
.membership__ol-lsit > li {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-main-800);
  position: relative;
  padding-left: 1.6rem;
  font-weight: normal;
}
@media (min-width: 720px) and (max-width: 960px) {
  .membership__ol-lsit > li {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .membership__ol-lsit > li {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .membership__ol-lsit > li {
    font-size: var(--font-size-sm);
  }
}
.membership__ol-lsit > li::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-main-800);
  border-radius: 50%;
  top: 0;
  transform: translate3d(0, 50%, 0);
}
.membership__ol-lsit > li::after {
  content: "";
  left: 0;
  position: absolute;
  width: 0.3rem;
  height: 0.4rem;
  border-right: solid 0.1rem #fff;
  border-bottom: solid 0.1rem #fff;
  top: 0;
  transform: translate3d(100%, 170%, 0) rotate(45deg);
}
.membership__ol-lsit > li:not(:last-child) {
  margin-bottom: 0.4rem;
}

.certificate__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.certificate__item {
  display: grid;
  grid-template-columns: 4.8rem 1fr min-content max-content max-content;
  align-items: center;
  gap: 2rem;
  background-color: var(--color-main-200);
  padding: 2rem;
  border-radius: 1.2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__item {
    gap: 1.2rem;
    grid-template: "a b b b b b" min-content "c c c c c c" min-content "e e e e e e" min-content "f f f f f f" min-content/4.8rem 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate__item {
    gap: 1.2rem;
    grid-template: "a b b b b b" min-content "c c c c c c" min-content "e e e e e e" min-content "f f f f f f" min-content/4.8rem 1fr 1fr 1fr 1fr 1fr;
  }
}
.certificate__info {
  grid-column: 1/4;
  grid-row: 2/3;
}
.certificate__btn-download {
  display: block;
  width: max-content;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__course-title {
    grid-area: c;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate__course-title {
    grid-area: c;
  }
}
.certificate__date {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  text-align: right;
}
.certificate__date strong {
  padding-left: 0.4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__date {
    grid-area: e;
    text-align: left;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate__date {
    grid-area: e;
    text-align: left;
  }
}
.certificate__teacher-image {
  background-color: var(--color-main-200);
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  overflow: hidden;
  border: solid 0.2rem var(--color-main-200);
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate__teacher-image {
    grid-area: a;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__label {
    grid-area: b;
    margin-left: auto;
    margin-right: 0;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate__label {
    grid-area: b;
    margin-left: auto;
    margin-right: 0;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate__contorl {
    grid-area: f;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate__contorl {
    grid-area: f;
  }
}

.certificate-nav {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
.certificate-detail {
  width: 80rem;
  margin: 0 auto;
  background: var(--color-main-100) url("../images/certificate-detail-pattern.png") repeat center center;
  background-size: 7.5rem 5.8rem;
  border: double 1rem var(--color-main-700);
  aspect-ratio: 9/13;
  position: relative;
  box-sizing: border-box;
  padding: 5.6rem 4rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.6rem;
  justify-content: space-between;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail {
    border-radius: 1.2rem;
    width: 100%;
    gap: 2rem;
    padding: 1.2rem;
    border-width: 0.5rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail {
    border-radius: 1.2rem;
    width: 100%;
    gap: 2rem;
    padding: 2.4rem;
    border-width: 0.5rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .certificate-detail {
    width: 100%;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .certificate-detail {
    width: 100%;
  }
}
.certificate-detail__pet-pulse {
  width: 12rem;
  margin: 0 auto;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__pet-pulse {
    width: 8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__pet-pulse {
    width: 8rem;
  }
}
.certificate-detail__pet-pulse img {
  max-width: 100%;
  display: block;
  margin: 0;
}
.certificate-detail__title, .certificate-detail__name, .certificate-detail__description {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.certificate-detail__title h4 {
  font-size: var(--font-size-2xl);
  color: var(--color-main-800);
  text-align: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__title h4 {
    font-size: var(--font-size-xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__title h4 {
    font-size: var(--font-size-xl);
  }
}
.certificate-detail__title h3 {
  text-align: center;
  font-size: var(--font-size-5xl);
  color: var(--color-main-800);
  font-weight: 900;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__title h3 {
    font-size: var(--font-size-2xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__title h3 {
    font-size: var(--font-size-2xl);
  }
}
.certificate-detail__name h4 {
  font-size: var(--font-size-2xl);
  color: var(--color-main-800);
  text-align: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__name h4 {
    font-size: var(--font-size-xl);
  }
}
.certificate-detail__name h3 {
  text-align: center;
  font-size: var(--font-size-6xl);
  color: var(--color-main-800);
  font-weight: 900;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__name h3 {
    font-size: var(--font-size-3xl);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__name h3 {
    font-size: var(--font-size-3xl);
  }
}
.certificate-detail__name h3 span {
  border-bottom: 0.4rem solid var(--color-main-800);
  padding-bottom: 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__name h3 span {
    padding-bottom: 0.4rem;
    border-width: 0.2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__name h3 span {
    padding-bottom: 0.4rem;
    border-width: 0.2rem;
  }
}
.certificate-detail__description p {
  font-size: var(--font-size-2xl);
  line-height: 1.6;
  color: var(--color-main-800);
  text-align: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__description p {
    font-size: var(--font-size-base);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__description p {
    font-size: var(--font-size-base);
  }
}
.certificate-detail__common {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: flex-start;
}
.certificate-detail__date {
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__date {
    padding-top: 1.2rem;
    gap: 0.8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__date {
    padding-top: 2rem;
  }
}
.certificate-detail__date p {
  text-align: center;
}
.certificate-detail__date p:nth-child(1) {
  color: var(--color-main-600);
  font-size: var(--font-size-base);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__date p:nth-child(1) {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__date p:nth-child(1) {
    font-size: var(--font-size-sm);
  }
}
.certificate-detail__date p:nth-child(2) {
  color: var(--color-main-800);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__date p:nth-child(2) {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__date p:nth-child(2) {
    font-size: var(--font-size-sm);
  }
}
.certificate-detail__icon-certificate {
  width: 16rem;
  margin: 0 auto;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__icon-certificate {
    width: 6.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__icon-certificate {
    width: 8rem;
  }
}
.certificate-detail__icon-certificate img {
  max-width: 100%;
  display: block;
  margin: 0;
}
.certificate-detail__teacher {
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__teacher {
    padding-top: 1.2rem;
    gap: 0.8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__teacher {
    padding-top: 2rem;
  }
}
.certificate-detail__teacher p {
  text-align: center;
  color: var(--color-main-600);
  font-size: var(--font-size-base);
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__teacher p {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__teacher p {
    font-size: var(--font-size-sm);
  }
}
.certificate-detail__signature {
  width: 18rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__signature {
    width: 8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__signature {
    width: 8rem;
  }
}
.certificate-detail__signature img {
  max-width: 100%;
  display: block;
  margin: 0;
}
.certificate-detail__serial-number p {
  color: var(--color-main-800);
  font-size: var(--font-size-2xl);
  line-height: 1.6;
  text-align: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .certificate-detail__serial-number p {
    font-size: var(--font-size-base);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .certificate-detail__serial-number p {
    font-size: var(--font-size-base);
  }
}

.forget-password {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-main-300);
  gap: 2rem;
}
.forget-password__content {
  margin: 0 auto;
  width: min(100% - 4rem, 40rem);
  border-radius: 1.2rem;
  padding: 4rem;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--color-main-100);
}
@media (min-width: 0) and (max-width: 480px) {
  .forget-password__content {
    padding: 3.2rem 2.4rem;
  }
}
.forget-password__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.forget-password__row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
}
.forget-password__btn-submit {
  text-align: center;
}
.forget-password__text {
  text-align: center;
}

.search__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .search__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .search__wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .search__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.search__content {
  padding: 2rem 0 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .search__content {
    padding-top: 0.8rem;
    padding-bottom: 2rem;
  }
}
.search__row {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .search__row {
    gap: 0.8rem;
  }
}
.search__input {
  flex: 0 0 40rem;
}
.search__input::placeholder {
  color: var(--color-main-600);
}
@media (min-width: 0) and (max-width: 480px) {
  .search__input::placeholder {
    transform: translate3d(0, -10%, 0);
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .search__input {
    flex: 1;
  }
}
@media (min-width: 0) and (max-width: 480px) {
  .search__btn-submit {
    width: max-content;
  }
}
.search__result {
  text-align: center;
}
.search__result strong {
  padding: 0 0.8rem;
}

.my-course {
  box-sizing: border-box;
  padding: 2rem;
  width: 20rem;
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  background-color: #fff;
  z-index: 200;
  border-radius: 1.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  transition: transform 300ms ease;
  transform: translate3d(200%, 0, 0);
}
.my-course.active {
  transform: translate3d(0, 0, 0);
}
.my-course__pending, .my-course__price {
  color: var(--color-main-800);
  font-size: var(--font-size-base);
}
.my-course__pending strong, .my-course__price strong {
  padding: 0 0.2rem;
  color: var(--color-danger-500);
}
.my-course__btn-purchasing {
  width: 100%;
  display: block;
}
.my-course__btn-hide {
  border-radius: 50%;
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  right: 2rem;
  top: 2rem;
  background-color: var(--color-main-800);
  padding: 0;
  border: 0;
  font-size: 0;
}
.my-course__btn-hide::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-75%, -50%, 0) rotate(45deg);
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-top: solid 0.1rem #fff;
  border-right: solid 0.1rem #fff;
}

.pet-report {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr min-content;
  background-color: var(--color-main-300);
  height: 100vh;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report {
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report {
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report {
    grid-template-columns: 1fr;
    grid-template-rows: min-content 1fr min-content;
  }
}
.pet-report__left {
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  padding: 8rem;
  box-sizing: border-box;
  position: relative;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__left {
    padding: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__left {
    padding: 2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__left {
    padding: 4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__left {
    padding: 4rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .pet-report__left {
    padding: 4rem;
  }
}
.pet-report__logo {
  width: 24rem;
}
.pet-report__logo img {
  max-width: 100%;
  display: block;
  margin: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__logo {
    width: 13.2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__logo {
    width: 13.2rem;
  }
}
.pet-report__pet-bg {
  width: 56rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
.pet-report__pet-bg img {
  max-width: 100%;
  display: block;
  margin: 0;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__pet-bg {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__pet-bg {
    display: none;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__pet-bg {
    display: none;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__pet-bg {
    width: 100%;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .pet-report__pet-bg {
    width: 80%;
  }
}
.pet-report__right {
  grid-column: 2/3;
  grid-row: 1/2;
  padding: 8rem;
  overflow-y: scroll;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__right {
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 0 2rem 2rem 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__right {
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 0 2rem 2rem 2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__right {
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 0 4rem 4rem 4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__right {
    padding: 4rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .pet-report__right {
    padding: 4rem;
  }
}
.pet-report__content {
  background-color: var(--color-main-150);
  padding: 5.6rem;
  border-radius: 2.4rem;
  display: grid;
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__content {
    border-radius: 1.6rem;
    padding: 2rem;
    gap: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__content {
    border-radius: 1.6rem;
    padding: 2rem;
    gap: 2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__content {
    border-radius: 1.6rem;
    padding: 2.4rem;
    gap: 4rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__content {
    padding: 2.4rem;
    border-radius: 1.6rem;
    gap: 2.4rem;
  }
}
@media (min-width: 1200px) and (max-width: 1600px) {
  .pet-report__content {
    padding: 4rem;
    border-radius: 1.6rem;
  }
}
.pet-report__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4rem;
  border-bottom: 0.1rem solid var(--color-main-300);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__info {
    flex-direction: column;
    padding-bottom: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__info {
    flex-direction: column;
    padding-bottom: 2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__info {
    flex-direction: column;
    padding-bottom: 2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__info {
    flex-direction: column;
    padding-bottom: 2.4rem;
  }
}
.pet-report__pet {
  width: 6.4rem;
  height: 6.4rem;
}
.pet-report__pet img {
  max-width: 100%;
  display: block;
  margin: 0;
  border-radius: 50%;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__pet {
    margin-bottom: 1.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__pet {
    margin-bottom: 1.6rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__pet {
    margin-bottom: 1.6rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__pet {
    margin-bottom: 1.6rem;
  }
}
.pet-report__pet.cat {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23dcdbea%3B%7D.cls-2%7Bfill:%235c5c75%3B%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M32 0h0c17.67 0 32 14.33 32 32h0c0 17.67-14.33 32-32 32h0C14.33 64 0 49.67 0 32H0C0 14.33 14.33 0 32 0Z'/%3E%3Cpath class='cls-2' d='M44.6 48.38c-.41 0-.81-.2-1.06-.56-1.86-2.75-2.33-8.43-2.45-16.1-.01-.71 .55-1.29 1.26-1.3h.02c.7 0 1.27 .56 1.28 1.26 .06 3.9 .2 12.02 2.01 14.71 .4 .58 .24 1.38-.34 1.78-.22 .15-.47 .22-.72 .22h0Z'/%3E%3Cpath class='cls-2' d='M45.94 51.97h-3.03c-4.17 0-6.29-6.83-6.29-20.29 0-.71 .57-1.28 1.28-1.28s1.28 .57 1.28 1.28c0 12.19 1.93 17.74 3.72 17.74h3.03c.71 0 1.28 .57 1.28 1.28s-.57 1.28-1.28 1.28h0Z'/%3E%3Cpath class='cls-2' d='M35.05 48.38s-.04 0-.06 0c-.71-.03-1.25-.63-1.22-1.34 0-.09 .2-5.89-3.58-7.83-.63-.32-.88-1.09-.55-1.72 .32-.63 1.09-.88 1.72-.55 5.26 2.71 4.98 9.92 4.97 10.23-.03 .68-.6 1.22-1.28 1.22Z'/%3E%3Cpath class='cls-2' d='M37.3 51.97H16.79c-2.15 0-3.9-1.75-3.9-3.9s1.75-3.9 3.9-3.9h11.85c1.69 0 3.18 1.08 3.71 2.69 .22 .67-.14 1.39-.82 1.61-.67 .22-1.4-.14-1.62-.82-.18-.55-.7-.93-1.27-.93h-11.85c-.74 0-1.34 .6-1.34 1.34s.6 1.34 1.34 1.34h20.51c.71 0 1.28 .57 1.28 1.28s-.57 1.28-1.28 1.28Z'/%3E%3Cpath class='cls-2' d='M18.21 46.73c-.71 0-1.28-.57-1.28-1.28 0-10.83 6.63-15.01 11.47-18.06 .77-.48 1.49-.94 2.12-1.38 1.04-.73 2.04-2.41 3.1-4.19 .61-1.02 1.23-2.07 1.94-3.09 .19-.27 4.72-6.73 7.35-6.73 1.22 0 1.84 1.14 2 3.76 .88 .42 2.24 1.25 3.18 2.68 .91 1.39 2.3 2.04 2.31 2.05 .43 .2 .72 .62 .75 1.09 .12 2.05-.59 5.74-4.01 6.57-1.42 .35-2.48 .75-3.33 1.28-.6 .37-1.39 .19-1.76-.41-.37-.6-.19-1.39 .41-1.76 1.09-.67 2.38-1.18 4.08-1.59 1.59-.39 1.96-2.25 2.04-3.27-.72-.46-1.8-1.28-2.63-2.55-.94-1.44-2.64-1.98-2.65-1.99-.53-.16-.89-.64-.91-1.19-.01-.56-.06-1.16-.13-1.65-1.03 .8-2.79 2.59-4.59 5.18-.66 .95-1.26 1.96-1.85 2.94-1.2 2.02-2.34 3.93-3.83 4.97-.68 .48-1.43 .95-2.23 1.45-4.58 2.89-10.28 6.48-10.28 15.9 0 .71-.57 1.28-1.28 1.28h0Z'/%3E%3Cpath class='cls-2' d='M43.25 22.57c-.46 0-.91-.19-1.23-.51-.33-.33-.51-.77-.51-1.23s.18-.9 .51-1.23c.64-.64 1.81-.64 2.45 0 .33 .33 .51 .77 .51 1.23s-.19 .9-.51 1.23c-.32 .32-.77 .51-1.22 .51h0Z'/%3E%3Cpath class='cls-2' d='M44.54 48.41c-.41 0-.81-.2-1.06-.56-1.86-2.75-2.33-8.43-2.45-16.1-.01-.71 .55-1.29 1.26-1.3h.02c.7 0 1.27 .56 1.28 1.26 .06 3.9 .2 12.02 2.01 14.71 .4 .58 .24 1.38-.34 1.78-.22 .15-.47 .22-.72 .22h0Z'/%3E%3Cpath class='cls-2' d='M45.89 52h-3.03c-4.17 0-6.29-6.83-6.29-20.29 0-.71 .57-1.28 1.28-1.28s1.28 .57 1.28 1.28c0 12.19 1.93 17.74 3.72 17.74h3.03c.71 0 1.28 .57 1.28 1.28s-.57 1.28-1.28 1.28h0Z'/%3E%3Cpath class='cls-2' d='M34.99 48.41s-.04 0-.06 0c-.71-.03-1.25-.63-1.22-1.34 0-.09 .2-5.89-3.58-7.83-.63-.32-.88-1.09-.55-1.72 .32-.63 1.09-.88 1.72-.55 5.26 2.71 4.98 9.92 4.97 10.23-.03 .68-.6 1.22-1.28 1.22h0Z'/%3E%3Cpath class='cls-2' d='M37.25 52H16.74c-2.15 0-3.9-1.75-3.9-3.9s1.75-3.9 3.9-3.9h11.85c1.69 0 3.18 1.08 3.71 2.69 .22 .67-.14 1.39-.82 1.61-.67 .22-1.4-.14-1.62-.82-.18-.55-.7-.93-1.27-.93h-11.85c-.74 0-1.34 .6-1.34 1.34s.6 1.34 1.34 1.34h20.51c.71 0 1.28 .57 1.28 1.28s-.57 1.28-1.28 1.28Z'/%3E%3Cpath class='cls-2' d='M18.15 46.76c-.71 0-1.28-.57-1.28-1.28 0-10.83 6.63-15.01 11.47-18.06 .77-.48 1.49-.94 2.12-1.38 1.04-.73 2.04-2.41 3.1-4.19 .61-1.02 1.23-2.07 1.94-3.09 .19-.27 4.72-6.73 7.35-6.73 1.22 0 1.84 1.14 2 3.76 .88 .42 2.24 1.25 3.18 2.68 .91 1.39 2.3 2.04 2.31 2.05 .43 .2 .72 .62 .75 1.09 .12 2.05-.59 5.74-4.01 6.57-1.43 .35-2.48 .75-3.33 1.28-.6 .37-1.39 .19-1.76-.41-.37-.6-.19-1.39 .41-1.76 1.09-.67 2.38-1.18 4.08-1.59 1.59-.39 1.96-2.25 2.04-3.27-.72-.46-1.8-1.28-2.63-2.55-.94-1.44-2.64-1.98-2.65-1.99-.53-.16-.89-.64-.91-1.19-.01-.56-.06-1.16-.13-1.65-1.03 .8-2.79 2.59-4.59 5.18-.66 .95-1.26 1.96-1.85 2.94-1.2 2.02-2.34 3.93-3.83 4.97-.68 .48-1.43 .95-2.23 1.45-4.58 2.89-10.28 6.48-10.28 15.9 0 .71-.57 1.28-1.28 1.28h0Z'/%3E%3Cpath class='cls-2' d='M43.2 22.6c-.46 0-.91-.19-1.23-.51-.33-.33-.51-.77-.51-1.23s.18-.9 .51-1.23c.64-.64 1.81-.64 2.45 0 .33 .33 .51 .77 .51 1.23s-.19 .9-.51 1.23c-.32 .32-.77 .51-1.22 .51h0Z'/%3E%3C/svg%3E");
  background-size: cover;
}
.pet-report__pet.dog {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23dcdbea%3B%7D.cls-2%7Bfill:%235c5c75%3B%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M32 0h0c17.67 0 32 14.33 32 32h0c0 17.67-14.33 32-32 32h0C14.33 64 0 49.67 0 32H0C0 14.33 14.33 0 32 0Z'/%3E%3Cpath class='cls-2' d='M41.44 48.41c-.54 0-1.05-.35-1.22-.9-2.62-8.32-1.33-11.53-.19-14.36 .61-1.51 1.13-2.82 1.1-4.9-.01-.71 .55-1.29 1.26-1.3h.02c.7 0 1.27 .56 1.28 1.26 .04 2.6-.63 4.28-1.29 5.89-1.08 2.67-2.09 5.19 .25 12.64 .21 .67-.16 1.39-.84 1.61-.13 .04-.26 .06-.38 .06h0Z'/%3E%3Cpath class='cls-2' d='M42.69 52h-2.81c-3.92 0-5.91-6.83-5.91-20.31 0-.71 .57-1.28 1.28-1.28s1.28 .57 1.28 1.28c0 13.02 2.01 17.75 3.36 17.75h2.81c.71 0 1.28 .57 1.28 1.28s-.57 1.28-1.28 1.28Z'/%3E%3Cpath class='cls-2' d='M22.34 52c-.71 0-1.28-.57-1.28-1.28 0-11.59 2.62-14.18 5.4-16.92 1.68-1.66 3.42-3.37 4.86-7.54 .23-.67 .96-1.02 1.63-.79 .67 .23 1.02 .96 .79 1.63-1.64 4.73-3.68 6.74-5.48 8.52-2.59 2.56-4.64 4.58-4.64 15.1 0 .71-.58 1.28-1.28 1.28h0Z'/%3E%3Cpath class='cls-2' d='M34.68 52h-12.34c-3.92 0-7.46-2.72-9.25-7.11-1.77-4.33-1.87-11.32 3.68-16.76 1.9-1.86 4.18-1.56 5.45-.3 1.19 1.18 1.59 3.34-.02 5.03-2.2 2.29-3.35 4.7-3.24 6.77 .06 1.25 .6 2.33 1.55 3.14 .54 .46 .6 1.27 .15 1.8-.46 .54-1.27 .6-1.8 .15-1.5-1.27-2.34-2.99-2.44-4.96-.14-2.79 1.26-5.87 3.95-8.67 .55-.57 .38-1.13 .07-1.43-.37-.37-1.05-.48-1.85 .31-4.63 4.54-4.64 10.19-3.1 13.96 1.39 3.4 4.03 5.52 6.88 5.52h12.34c.71 0 1.28 .57 1.28 1.28s-.57 1.28-1.28 1.28h0Z'/%3E%3Cpath class='cls-2' d='M32.24 48.4s-.07 0-.1 0c-.7-.06-1.23-.67-1.17-1.37 0-.05 .36-5.38-3.11-7.31-.62-.34-.84-1.12-.5-1.74 .34-.62 1.12-.84 1.74-.5 4.92 2.73 4.44 9.46 4.42 9.75-.05 .67-.61 1.18-1.28 1.18h0Z'/%3E%3Cpath class='cls-2' d='M40.56 26.29c-.71 0-1.28-.57-1.28-1.28s.57-1.28 1.28-1.28c8.87 0 8.87-1.54 8.87-4.62 0-.89 0-1.73-3.95-1.73-.38 0-.74-.17-.99-.46-1.12-1.35-3.89-2.61-6.23-2.32-1.47 .18-2.54 .94-3.17 2.25-1.76 3.65-1.41 5.4-1.16 5.57 0 0 .02 .01 .09 .01h1.83c.74 0 .99 0 .99-4.07 0-.71 .57-1.28 1.28-1.28s1.28 .57 1.28 1.28c0 3.56 0 6.63-3.55 6.63h-1.83c-.97 0-1.78-.45-2.29-1.26-1.02-1.62-.64-4.46 1.05-7.99 1-2.09 2.84-3.39 5.17-3.68 3.05-.37 6.35 1.06 8.09 2.77 2.24 .03 5.95 .35 5.95 4.28 0 5.57-2.56 7.18-11.43 7.18h0Z'/%3E%3Cpath class='cls-2' d='M42.1 20.2c-.46 0-.91-.18-1.23-.51-.33-.33-.51-.77-.51-1.23s.19-.9 .51-1.22c.64-.64 1.8-.65 2.45 0 .33 .32 .51 .76 .51 1.22s-.19 .91-.51 1.23c-.32 .33-.77 .51-1.22 .51h0Z'/%3E%3C/svg%3E");
  background-size: cover;
}
.pet-report__profile span {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
}
.pet-report__profile span:not(:last-child) {
  margin-right: 1.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__profile span {
    font-size: var(--font-size-sm);
  }
  .pet-report__profile span:not(:last-child) {
    margin-right: 0.8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__profile span {
    font-size: var(--font-size-sm);
  }
  .pet-report__profile span:not(:last-child) {
    margin-right: 0.8rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__profile span {
    font-size: var(--font-size-sm);
  }
  .pet-report__profile span:not(:last-child) {
    margin-right: 0.8rem;
  }
}
.pet-report__profile span strong {
  margin-left: 0.4rem;
  font-size: var(--font-size-base);
  border-bottom: 0.1rem solid var(--color-main-800);
  font-weight: 800;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__profile span strong {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__profile span strong {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__profile span strong {
    font-size: var(--font-size-sm);
  }
}
.pet-report__report-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__report-wrap {
    gap: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__report-wrap {
    gap: 2.4rem;
  }
}
.pet-report__report-wrap > div {
  border-bottom: 0.1rem solid var(--color-main-300);
  padding-bottom: 2rem;
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__report-wrap {
    gap: 2.4rem;
  }
  .pet-report__report-wrap > div {
    padding-bottom: 2.4rem;
  }
}
.pet-report__physique h2, .pet-report__special-recommendation h2, .pet-report__nutrition h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-main-800);
  margin-bottom: 2.4rem;
  font-weight: 800;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__physique h2, .pet-report__special-recommendation h2, .pet-report__nutrition h2 {
    font-size: var(--font-size-xl);
    margin-bottom: 1.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__physique h2, .pet-report__special-recommendation h2, .pet-report__nutrition h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1.6rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__physique h2, .pet-report__special-recommendation h2, .pet-report__nutrition h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1.6rem;
  }
}
.pet-report__physique-wrap {
  display: grid;
  gap: 4rem;
  counter-reset: counter-analyze;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__physique-wrap {
    gap: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__physique-wrap {
    gap: 2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__physique-wrap {
    gap: 2rem;
  }
}
.pet-report__nutrition-wrap h3 {
  font-size: var(--font-size-xl);
  color: var(--color-main-800);
  margin-bottom: 1.6rem;
}
.pet-report__physique-analyze {
  padding-left: 12rem;
  counter-increment: counter-analyze;
  position: relative;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__physique-analyze {
    padding-left: 8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__physique-analyze {
    padding-left: 8rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__physique-analyze {
    padding-left: 8rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__physique-analyze {
    padding-left: 8rem;
  }
}
.pet-report__physique-analyze::before {
  font-size: var(--font-size-5xl);
  content: counter(counter-analyze);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-main-400);
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: solid 0.2rem var(--color-main-400);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__physique-analyze::before {
    font-size: var(--font-size-3xl);
    width: 5.6rem;
    height: 5.6rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__physique-analyze::before {
    font-size: var(--font-size-3xl);
    width: 5.6rem;
    height: 5.6rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__physique-analyze::before {
    font-size: var(--font-size-3xl);
    width: 5.6rem;
    height: 5.6rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__physique-analyze::before {
    font-size: var(--font-size-3xl);
    width: 5.6rem;
    height: 5.6rem;
  }
}
.pet-report__physique-analyze p {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
.pet-report__physique-analyze p:not(:last-child) {
  margin-bottom: 1.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__physique-analyze p {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__physique-analyze p {
    font-size: var(--font-size-sm);
  }
}
.pet-report__recommendation:not(:last-child) {
  margin-bottom: 3.2rem;
}
.pet-report__recommendation h3 {
  font-size: var(--font-size-xl);
  color: var(--color-main-800);
  margin-bottom: 1.6rem;
}
.pet-report__recommendation p {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
.pet-report__recommendation p:not(:last-child) {
  margin-bottom: 1.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__recommendation p {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__recommendation p {
    font-size: var(--font-size-sm);
  }
}
.pet-report__nutrition-advice p {
  font-size: var(--font-size-base);
  color: var(--color-main-800);
  line-height: 1.6;
}
.pet-report__nutrition-advice p:not(:last-child) {
  margin-bottom: 1.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__nutrition-advice p {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__nutrition-advice p {
    font-size: var(--font-size-sm);
  }
}
.pet-report__nav {
  display: flex;
  justify-content: flex-start;
  gap: 1.6rem;
}
.pet-report__btn, .pet-report__btn-back {
  display: block;
  width: min-content;
}
.pet-report__footer {
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: var(--color-main-800);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.4rem 0;
  color: #fff;
  font-size: var(--font-size-sm);
}
@media (min-width: 0) and (max-width: 480px) {
  .pet-report__footer {
    grid-column: 1/2;
    grid-row: 3/4;
    padding: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .pet-report__footer {
    grid-column: 1/2;
    grid-row: 3/4;
    padding: 2rem;
  }
}
@media (min-width: 720px) and (max-width: 960px) {
  .pet-report__footer {
    grid-column: 1/2;
    grid-row: 3/4;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .pet-report__footer {
    padding: 2.4rem;
  }
}

.body-fat__status {
  display: flex;
  gap: 2rem;
  margin-bottom: 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .body-fat__status {
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .body-fat__status {
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
  }
}
@media (min-width: 960px) and (max-width: 1200px) {
  .body-fat__status {
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
  }
}
.body-fat__fat-mass, .body-fat__actual, .body-fat__risk {
  display: flex;
  align-items: center;
  color: var(--color-main-800);
  line-height: 1.6;
  font-size: var(--font-size-base);
  gap: 0.8rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .body-fat__fat-mass, .body-fat__actual, .body-fat__risk {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .body-fat__fat-mass, .body-fat__actual, .body-fat__risk {
    font-size: var(--font-size-sm);
  }
}
.body-fat__risk strong {
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body-fat__risk.status-1 strong {
  background-color: #009a44;
}
.body-fat__risk.status-2 strong {
  background-color: #fec601;
}
.body-fat__risk.status-3 strong {
  background-color: #f69400;
}
.body-fat__risk.status-4 strong {
  background-color: #ee7701;
}
.body-fat__risk.status-5 strong {
  background-color: #ee2c01;
}
.body-fat__risk.status-6 strong {
  background-color: #c6000a;
}
.body-fat__text {
  color: var(--color-main-800);
  line-height: 1.6;
  font-size: var(--font-size-base);
}
@media (min-width: 0) and (max-width: 480px) {
  .body-fat__text {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .body-fat__text {
    font-size: var(--font-size-sm);
  }
}

.calories__number,
.bfi-val__number,
.weight__number {
  color: var(--color-main-800);
  line-height: 1.6;
  font-size: var(--font-size-base);
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.calories__number strong,
.bfi-val__number strong,
.weight__number strong {
  font-size: var(--font-size-lg);
}

.nutrition-quiz {
  position: relative;
  height: 100%;
  max-width: 52rem;
  margin: 0 auto;
}
.nutrition-quiz__quiz {
  width: 100%;
  height: 100%;
  flex-direction: column;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 300ms ease;
  display: none;
}
.nutrition-quiz__quiz.active {
  display: flex;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}
.nutrition-quiz__title {
  font-size: var(--font-size-lg);
  color: var(--color-main-800);
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__title {
    font-size: var(--font-size-base);
    margin-bottom: 0.8rem;
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .nutrition-quiz__title {
    font-size: var(--font-size-base);
    margin-bottom: 0.8rem;
  }
}
.nutrition-quiz__text {
  font-size: var(--font-size-sm);
  color: var(--color-main-800);
  line-height: 1.6;
}
.nutrition-quiz__text.text-center {
  text-align: center;
}
.nutrition-quiz__img img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 1.6rem;
}
.nutrition-quiz__control {
  padding-top: 2rem;
  display: flex;
  justify-content: flex-end;
}
.nutrition-quiz__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}
.nutrition-quiz__quiz-radio {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.nutrition-quiz__radio input[type=radio] {
  position: absolute;
  left: -9999px;
  box-sizing: border-box;
  padding: 0;
}
.nutrition-quiz__radio input[type=radio]:not(:checked) + label,
.nutrition-quiz__radio input[type=radio]:checked + label {
  position: relative;
  padding-top: 2.4rem;
  cursor: pointer;
  display: block;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__radio input[type=radio]:not(:checked) + label,
  .nutrition-quiz__radio input[type=radio]:checked + label {
    font-size: var(--font-size-sm);
  }
}
.nutrition-quiz__radio input[type=radio]:not(:checked) + label p,
.nutrition-quiz__radio input[type=radio]:checked + label p {
  color: var(--color-main-800);
  font-size: var(--font-size-base);
  text-align: center;
  line-height: 1.6;
}
@media (min-width: 0) and (max-width: 480px) {
  .nutrition-quiz__radio input[type=radio]:not(:checked) + label p,
  .nutrition-quiz__radio input[type=radio]:checked + label p {
    font-size: var(--font-size-sm);
  }
}
@media (min-width: 480px) and (max-width: 720px) {
  .nutrition-quiz__radio input[type=radio]:not(:checked) + label p,
  .nutrition-quiz__radio input[type=radio]:checked + label p {
    font-size: var(--font-size-sm);
  }
}
.nutrition-quiz__radio input[type=radio]:not(:checked) + label:before,
.nutrition-quiz__radio input[type=radio]:checked + label:before {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border: solid 0.2rem var(--color-main-800);
  top: 0;
  box-sizing: border-box;
  transform: translate3d(-50%, 0, 0);
}
.nutrition-quiz__radio input[type=radio] + label:after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--color-main-800);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 60%, 0);
  transition: all 300ms ease;
  opacity: 0;
}
.nutrition-quiz__radio input[type=radio]:checked + label:after {
  opacity: 1;
}
.nutrition-quiz__input input {
  width: 100%;
}
.nutrition-quiz__radio-wrap-normal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.6rem;
}
.nutrition-quiz__radio-wrap-normal.flex-column {
  flex-direction: column;
  align-items: flex-start;
}
/*# sourceMappingURL=app.css.map */