:root {
  /* color */
  --bodyBackground: #fff;
  --sectionBackground: #fff;
  --mainColor1: #22a4db;
  --mainColor2: #45b8e9;
  --mainColor3: #6cc7ee;
  --textColor: #333;
  --textColor2: #555;
  --beforeBackground: rgba(255, 255, 255, 0.6);
  --headBackground: rgba(255, 255, 255, 0.6);
  --headScrollBackground: rgba(255, 255, 255, 0.85);
  --borderColor: #ebebeb;
  --borderFormat: 1px solid #ebebeb;
  --dialogBackground: #f9f9f9;
  --dialogColor: var(--textColor);
  --buttonColor: var(--sectionBackground);
  --swalBackground: var(--sectionBackground);
  --swalSuccessborder: 0.25em solid rgba(27, 150, 27, 0.3);
  --buttonBorderRadius: 0.8rem;
  /* index */
  --indexBeforeBackground: rgba(255, 255, 255, 0.5);
  --indexSecondTitleColor: #333;
  --indexProductImage: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 20%,
    rgba(255, 255, 255, 0) 100%
  );
  --indexProductImageMobile: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 5%,
    rgba(255, 255, 255, 0) 100%
  );

  /* title */
  --titleFontSize: 0.875rem;
  --titleFontWeight: 500;
  --titlePadding: 0;
  --titleMargin: 0 0 5px 0;
  --titleLineHeight: 1px;
  --titleLetterSpacing: 2px;
  --titleTextTransform: uppercase;
  /* SecondTitle */
  --secondTitleMargin: 0;
  --secondTitleFontSize: 2.25rem;
  --secondTitleFontWeight: 700;
  --secondTitleFontSizeMobile: 1.2rem;
  /* ProductImage */
  --productImageBackgroundColor: var(--bodyBackground);
  --productImageHeight: 8rem;
  --productImageWidth: 8rem;
  --productImageMargin: 1rem 0;
  /* --productImageBorder: 0.4rem solid #4fd675; */
  --productImageBorder: 5px solid transparent;
  --productImageBoxShadow: 0 0 0 2px var(--mainColor1);
  --inquiryImageBorder: 1px solid transparent;
  --inquiryImageBoxShadow: 0 0 0 2px var(--mainColor1);
  --productImageBorderRadius: 50%;
  --productImageFloat: left;
  --productImageTextAlign: center;
  --productItemBackground: rgba(79, 214, 117, 0.2);
  /* image  */
  --imageBorder: 4px solid rgba(255, 255, 255, 0.2);
  /* image :before */
  --imgaeBeforeBackground: var(--dialogBackground);
  --imageBeforePosition: absolute;
  --imageBeforeWidth: 100%;
  --imageBeforeHeight: 100%;
  --imageBeforeTop: -10px;
  --imageBeforeLeft: -10px;
  /* --imageBeforeBorderTop: 2px solid var(--bodyBackground); */
  /* --imageBeforeBorderLeft: 2px solid var(--bodyBackground); */
  --imageBeforeBorderRadius: inherit;
  --imageBeforeZIndex: -1;
  /* image :after */
  --imageAfterPosition: absolute;
  --imageAfterWidth: 100%;
  --imageAfterHeight: 100%;
  --imageAfterRight: -10px;
  --imageAfterBottom: -10px;
  --imageAfterBorderTop: 1px solid var(--mainColor2);
  --imageAfterBorderRight: 1px solid var(--mainColor2);
  --imageAfterBorderLeft: 1px solid var(--mainColor2);
  --imageAfterBorderBottom: 1px solid var(--mainColor2);
  --imageAfterBorderRadius: inherit;
  --imageAfterZIndex: 2;
  /* badge */
  --badgeBackgroudColor: var(--mainColor1);
  --badgeTextColor: var(--bodyBackground);
  /* dataview */
  --dataviewBackground: var(--dialogBackground);
  --dataviewBorder: var(--borderFormat);
}