:root {
  --txtBase: #212029;
  --txtGray: #6c6971;
  --gray: #ccc;
  --lightGray: #f2f2f2;
  --purple: #b06bbe;
  --lightPurple: #f8eafa;
  --red: #e28477;
  --lightRed: #fdefed;
  --blue: #4c86c5;
  --lightBlue: #e7f4fa;
  --gold: #9d7900;
  --lightGold: #fcfcdd;
  --green: #5db15b;
  --lightGreen: #edfded;
  --orange: #e5821c;
  --lightOrange: #fcf5e7;
  --productBorderLightPurple: #eccef0;
  --productBgLightPurple: #fefaff;
  --productBlue: #4580C2;
  --productGray: #484848;
  --productLightGray: #fcfcfc;
  --productBorderGray: #d7d7d7;
}

.productContainer {
  padding-bottom: 160px;
}

.productArea {
  display: flex;
  align-items: flex-start;
}

.productArea:not(:last-child) {
  padding-bottom: 100px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 50px;
}

.productMain {
  width: calc(100% - 367px);
}

.productSideMenu {
  max-width: 320px;
  min-width: 320px;
  margin-left: 47px;
  background: #f2f2f2;
  padding: 45px 40px;
  position: sticky;
  top: 200px;
}

.productRentalArea {
  margin-bottom: 35px;
}

.productRentalLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 10px;
  height: 70px;
  border: 1px solid #4581c3;
  clip-path: inset(0 0 round 12px 12px 12px 12px);
  background: #fff;
  margin-bottom: 8px;
}

.productRentalText {
  margin-right: 22px;
  font-size: 18px;
  letter-spacing: 1.15px;
  line-height: 26px;
  color: #4581c3;
}

.productRentalArrow {
  background: #4581c3;
  max-width: 30px;
  min-width: 30px;
  max-height: 30px;
  min-height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.productRentalArrow img {
  width: 10.73px;
}

.productRentalSubText {
  font-size: 13px;
  letter-spacing: 0.65px;
  line-height: 19px;
  text-align: center;
}

.productPDFArea,
.productContactArea {
  margin-bottom: 35px;
}

.productSideMenu h4 {
  font-size: 14px;
  letter-spacing: 0.66px;
  line-height: 20px;
  color: #4581c3;
  position: relative;
  padding-left: 14px;
  margin-bottom: 10px;
}

.productSideMenu h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 2px;
  height: 16.5px;
  background: #4581c3;
}

.productPDFLink,
.productContactLink,
.productIprosLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5px 10px;
  height: 70px;
  border: 1px solid #cccccc;
  clip-path: inset(0 0 round 12px 12px 12px 12px);
  background: #fff;
  font-size: 15px;
  letter-spacing: 0.96px;
  line-height: 22px;
}

.productPDFDownload {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.productPDFDownload img {
  width: 14.48px;
}

.productContactImg {
  display: flex;
  align-items: center;
  margin-right: 9px;
}

.productContactImg img {
  width: 16.6px;
}

.productIprosLink {
  margin-bottom: 8px;
}

.productIprosLink img {
  width: 140px;
}

.productIprosText {
  font-size: 13px;
  letter-spacing: 0.65px;
  line-height: 19px;
  text-align: center;
}

.productWrap {
  padding-bottom: 70px;
}

.productTitleArea {
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 77px;
}

.productTitleArea h1 {
  font-size: 32px;
  letter-spacing: 1.66px;
  line-height: 46px;
  padding-bottom: 10px;
}

.productNumber {
  font-size: 14px;
  letter-spacing: 0.84px;
  line-height: 18px;
  color: #6c6971;
  padding-bottom: 20px;
}

.typeArea {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
}

.catTitle {
  max-width: 18px;
  min-width: 18px;
  margin-right: 6px;
}

.catWrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7.5px 0;
}

.catArea {
  display: flex;
  align-items: center;
}

.catName {
  font-size: 13px;
  letter-spacing: 0.7px;
  line-height: 19px;
  color: #4581c3;
  position: relative;
}

.catSeparator {
  font-size: 13px;
  letter-spacing: 0.7px;
  line-height: 19px;
  color: #4581c3;
  margin: 0 5px;
}

.catName::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 1px;
  background: #4581c3;
}

.tagTitle {
  max-width: 18px;
  min-width: 18px;
  margin-right: 7.5px;
}

.tagWrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7.5px 6.3px;
}

.tagArea {
  display: flex;
  align-items: center;
}

.tagName {
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: #4581c3;
  font-size: 13px;
  letter-spacing: 0.78px;
  line-height: 19px;
  padding: 3px 7px;
}

.tagName:hover {
  background: #e7f4fa;
}

.productImageArea {
  margin-bottom: 77px;
}

.productImageArea {
  display: flex;
}

.productImage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  border: 1px solid #cccccc;
  padding: 15px;
  margin-right: 30px;
}

.productImage img {
  max-width: 215px;
}

.productImageTextArea {
  width: calc(100% - 310px);
}

.productImageTextTitle {
  font-size: 22px;
  letter-spacing: 1.03px;
  line-height: 34px;
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.productImageTextTitle::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: #4581c3;
}

.productImageText {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.45px;
  line-height: 30px;
}

@media screen and (max-width: 1024px) {
  .productArea {
    flex-direction: column;
  }
  .productMain {
    width: 100%;
  }
  .productSideMenu {
    max-width: none;
    min-width: auto;
    width: 100%;
    margin-left: 0;
    margin-top: 70px;
  }
}
.productSubContentArea > div:not(:last-child) {
  margin-bottom: 70px;
}

h3 {
  background: #e7f4fa;
  padding: 10px 23px;
  position: relative;
  color: #4581c3;
  font-size: 18px;
  letter-spacing: 0.85px;
  line-height: 27px;
  margin-bottom: 25px;
}

h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 2px;
  height: 20px;
  background: #4581c3;
}

.productFeature {
  padding-left: 16px;
  list-style-type: disc;
  list-style-position: outside;
  color: #4581c3;
  margin-left: 13px;
}

.productFeature li {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.43px;
}

.productFeature li:not(:last-child) {
  margin-bottom: 10px;
}

.productScene {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.45px;
  line-height: 30px;
  margin-bottom: 75px;
}

.productSpecArea > div:not(:last-child) {
  margin-bottom: 2px;
}

.productSpec {
  display: flex;
  gap: 2px;
}

.productSpecTitle {
  background: #e0e0e0;
  padding: 12px 10px;
  font-size: 15px;
  letter-spacing: 0.9px;
  line-height: 21px;
  max-width: 130px;
  min-width: 130px;
}

.productSpecText {
  width: calc(100% - 130px);
  background: #f2f2f2;
  padding: 12px 10px;
  font-size: 15px;
  letter-spacing: 0.9px;
  line-height: 21px;
}

.backArchive {
  text-align: center;
}

.backArchive a {
  display: inline-flex;
  border: 1px solid #cccccc;
  clip-path: inset(0 0 round 12px 12px 12px 12px);
  align-items: center;
  justify-content: space-between;
  width: 240px;
  padding: 20px 29px;
}

.backArchiveText {
  font-size: 15px;
  letter-spacing: 0.9px;
  line-height: 21px;
  margin-bottom: -4px;
}

.backArchiveArrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #212029;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backArchiveArrow img {
  width: 10px;
}

.productCaseArea:not(:last-child) {
  padding-bottom: 50px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 50px;
}

.productCommonTitle {
  color: #4581c3;
  margin-bottom: 33px;
}

.productCommonTitle::before {
  border: 4px solid #4581c3;
}

.caseWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 33px;
}

.caseLink {
  display: block;
  width: calc(33.33% - 22px);
}

.caseImg {
  position: relative;
  clip-path: inset(0 0 round 12px 12px 12px 12px);
  border: 1px solid #eccef0;
  margin-bottom: 16px;
  overflow: hidden;
}

.caseImg img {
  aspect-ratio: 337/220;
  object-fit: cover;
  object-position: center;
  width: 100%;
  transition: 0.3s;
}

.caseLink > a:hover .caseImg img {
  transform: scale(1.1);
}

.caseLinkCategory {
  border-radius: 0 12px 0 0;
  border-top: 1px solid #eccef0;
  border-right: 1px solid #eccef0;
  background: #f8eafa;
  position: absolute;
  bottom: -1px;
  left: -1px;
  padding: 4px 14px;
  color: #b06bbe;
  font-size: 14px;
  letter-spacing: 0.76px;
  line-height: 20px;
  max-width: 80%;
}

.caseTitle {
  font-size: 16px;
  letter-spacing: 0.96px;
  line-height: 24px;
  margin-bottom: 6px;
}

.caseClient {
  color: #6c6971;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 19px;
  margin-bottom: 14px;
}

.caseTagArea {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.caseTag {
  font-size: 13px;
  letter-spacing: 0.78px;
  line-height: 19px;
  color: #b06bbe;
  border: 1px solid #cccccc;
  border-radius: 4px;
  transition: 0.3s;
  padding: 3px 7px;
  font-weight: 300;
}

.caseTag:hover {
  background: #f8eafa;
}

.productRelatedArea:not(:last-child) {
  padding-bottom: 50px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 50px;
}

.relatedWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
}

.relatedLink {
  display: block;
  width: calc(33.33% - 29.33px);
}

.relatedImg {
  position: relative;
  clip-path: inset(0 0 round 12px 12px 12px 12px);
  border: 1px solid #c6e7f9;
  margin-bottom: 13px;
  overflow: hidden;
}

.relatedImg img {
  aspect-ratio: 330/314;
  object-fit: cover;
  object-position: center;
  width: 100%;
  transition: 0.3s;
}

.relatedLink > a:hover .relatedImg img {
  transform: scale(1.1);
}

.relatedLinkCategory {
  border-radius: 0 12px 0 0;
  border-top: 1px solid #c6e7f9;
  border-right: 1px solid #c6e7f9;
  background: #e7f4fa;
  position: absolute;
  bottom: -1px;
  left: -1px;
  padding: 4px 14px;
  color: #4581c3;
  font-size: 14px;
  letter-spacing: 0.76px;
  line-height: 20px;
  max-width: 80%;
}

.relatedTitle {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.96px;
  line-height: 24px;
  margin-bottom: 6px;
}

.relatedProductNumber {
  color: #6c6971;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 19px;
  margin-bottom: 14px;
}

.relatedTagArea {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.relatedTag {
  font-size: 13px;
  letter-spacing: 0.78px;
  line-height: 19px;
  color: #4581c3;
  border: 1px solid #cccccc;
  border-radius: 4px;
  transition: 0.3s;
  padding: 3px 7px;
  font-weight: 300;
}

.relatedTag:hover {
  background: #e7f4fa;
}

@media screen and (max-width: 1024px) {
  .caseWrap,
  .relatedWrap {
    gap: 40px 35px;
  }
  .caseLink,
  .relatedLink {
    display: block;
    width: calc(50% - 18.5px);
  }
}
@media screen and (max-width: 768px) {
  .productContainer {
    padding-bottom: 120px;
  }
  .productArea {
    flex-direction: column;
  }
  .productArea:not(:last-child) {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 48px;
  }
  .productMain {
    width: 100%;
    margin-bottom: 63px;
  }
  .productSideMenu {
    max-width: none;
    min-width: auto;
    margin-top: 0px;
    margin-left: 0;
    padding: 44px 40px 40px;
    position: initial;
    top: 0;
    width: 100%;
  }
  .productImageArea {
    flex-direction: column;
  }
  .productImage {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .productImage img {
    max-width: 100%;
  }
  .productImageTextArea {
    width: 100%;
  }
  .caseWrap {
    gap: 30px;
  }
  .caseLink {
    width: 100%;
  }
  .relatedWrap {
    gap: 30px;
  }
  .relatedLink {
    width: 100%;
  }
  .productTitleArea {
    margin-bottom: 30px;
  }
  .productTitleArea h1 {
    font-size: 24px;
    letter-spacing: 1.25px;
    line-height: 34px;
    padding-bottom: 5px;
  }
  .typeArea {
    gap: 10px;
  }
  .productImageTextTitle {
    font-size: 18px;
    letter-spacing: 0.85px;
    line-height: 34px;
    padding-bottom: 16px;
    margin-bottom: 16.5px;
  }
  .productImageText {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
  }
  .productImageArea {
    margin-bottom: 65px;
  }
  h3 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.85px;
    padding: 8px 10px 8px 13px;
    margin-bottom: 40px;
  }
  h3::before {
    height: 73%;
  }
  .productFeature {
    padding-left: 10px;
  }
  .productFeature li {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
  }
  .productScene {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
    margin-bottom: 35px;
  }
  .productSpecTitle {
    font-size: 12px;
    letter-spacing: 0.36px;
    line-height: 26px;
    padding: 7px 11px 8px 11px;
  }
  .productSpecText {
    font-size: 12px;
    letter-spacing: 0.36px;
    line-height: 26px;
    padding: 7px 11px 8px 11px;
    word-wrap: break-word;
  }
  .productRentalSubText {
    line-height: 26px;
  }
  .productIprosText {
    line-height: 26px;
  }
  .productRentalArea {
    margin-bottom: 32px;
  }
  .productPDFArea, .productContactArea {
    margin-bottom: 36px;
  }
  .productCommonTitle {
    letter-spacing: 1.25px;
    margin-bottom: 30px;
  }
  .caseLinkCategory {
    font-size: 12px;
    letter-spacing: 0.65px;
  }
  .relatedLinkCategory {
    font-size: 12px;
    letter-spacing: 0.65px;
  }
  .tagName {
    padding: 2px 5px;
  }
  .caseTag {
    padding: 2px 5px;
  }
  .relatedTag {
    padding: 2px 5px;
  }
  .productRentalLink {
    margin-bottom: 6px;
  }
  .productRentalText {
    margin-right: 40px;
  }
  .productIprosLink {
    margin-bottom: 6px;
  }
  .productWrap {
    padding-bottom: 0px;
  }
  .backArchive {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 80px;
  }
  .productCaseArea:not(:last-child) {
    padding-top: 54px;
  }
}