$smallThreeColor:hsl(344, 81%, 65%);
$footerNav:rgb(230, 227, 227);
$hover-color:#999;
$iconhover-color:#272626;
$footer-content-length:10px;

body {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  border-bottom: 1px solid rgb(223, 223, 223);
}

.header-top {
  width: 100%;
  top: 0;
  .top-menu {
    display: flex;
    margin: 0;
    justify-content: space-around;
    background: #272626;
    padding: 10px;
    li {
      list-style-type: none;
      a {
        color: rgb(219, 226, 226);
        padding: 10px;
        font-size: 18px;
        text-decoration: none;
        &:hover {
          color: $hover-color;
          text-decoration: underline;
        }
      }
    }
  }
}

.page-nav {
  padding: 20px 0;
  width: 100%;
  text-align: center;

  a {
    color: #ee5d84;
    padding: 0 10px;

  }
}

.head {
  margin-top: 10px;
  .awoo-headlogo {
    width:150px;
    padding-left: 10px;
  }
  .logo-font {
    position: absolute;
    top: 0px;
    left: 100px;
    font-family:cursive;
    font-size: 35px;
    font-style: oblique;
    margin-top: 100px;
    color: $smallThreeColor;
    user-select:none;
  }
  .icon {
    a:nth-of-type(1) {
      display: block;
      width: 50px;
      margin-right: 50px;
    }
    a {
      float: right;
      margin-top: 30px;
      margin-right: 20px;
      color: #999;
      font-size:35px;
      margin-left: 10px;
      i {
        color:#ee5d84;
        &:hover {
          color: $iconhover-color;
        }
      }   
    }
  }
}

.search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5%;
    margin-top: 50px;
    .search-input {
      padding-left: 5px;
      border:1.3px solid $smallThreeColor; 
      cursor:pointer;
      width: 300px;
      border-radius: 5px 0 0 5px;
      height: 30px;
      outline: none;
      cursor: text;
    }
    .sure-button {
      padding-left: 5px;
      height: 30px;
      border:1px solid $smallThreeColor;
      background-color: $smallThreeColor;
      color: #fff;
      width: 70px;
      font-size: 13px;
      margin-left: -6px;
      border-radius: 0 5px 5px 0;
      outline: none;
      opacity: 0.8;
      cursor: pointer; 
      &:hover {
        opacity: 1;
      }
    }
}

main {
  width: 100%;
  height: auto;
 }

.footer {
  background-color:rgb(53, 52, 52); 
  width: 100%;
  position: relative ;
  bottom:0;
  .footer-nav {
      padding: $footer-content-length;
      line-height: 24px;
        a {
          text-decoration: none;
          color:$footerNav;
          font-size: 18px;
          &:hover {
            color:$hover-color;
            text-decoration: underline;
          }
        }
        span {
          color:$footerNav;
        }
    }
  .footer-info {
    margin-left: $footer-content-length;
    font-size: 16px;
    line-height: 24px;
    color:$footerNav;
  }
  .footer-service {
    padding: $footer-content-length;
    font-size: 18px;
    line-height: 24px;
    color:$footerNav;
    a {
      text-decoration: none;
      color:$footerNav;
      &:hover {
        color:$hover-color;
        text-decoration: underline;
      }
    }  
  }
  .footer-company {
    margin-left: $footer-content-length;
    span {
      font-size: 16px;
      line-height: 24px;
      color:$footerNav;
    }
  }
  .footer-address {
    margin-left: $footer-content-length;
    span {
      font-size: 16px;
      line-height: 24px;
      color:$footerNav;
    }
  }
    .awoo-foottext1 {
      font-size: 15px;
      line-height: 24px;
      color: $hover-color;
      float:right; 
      margin-right: 15vw;
       
    } 
    .awoo-foottext2 {
      color: $hover-color;
      font-weight: bold;
      font-size: 26px;  
      line-height: 24px;
      position: relative;
      float:right;
      margin-right: 15vw;
    }
  }

.spec-info {
  padding: 0 50px;

  ul {
    margin: 50px auto;
    width: 70%;
  }

  li {
    border: 1px solid #ccc;
    display: flex;

    &:not(:last-child) {
      border-bottom: 0;

    }

    > div {
      padding: 20px;
    }

    .title {
      border-right: 1px solid #ccc;
      width: 120px;
    }

    .detail {
      width: 100%;
    }
  }
}
.section-padding {
  padding: 20px 25px;
}

#cupid-product-tag {
  display: flex;
  flex-wrap: wrap;

  a {
    display: block;
    text-decoration: none;
  }

  .cupid-tag {
    background: #f47f9d;
    border: 1px solid #ee5d84;
    border-radius: 8px;
    color: #fff;
    margin-bottom: 10px;
    margin-right: 8px;
    padding: 5px 10px;

    :hover {
      cursor: pointer;
    }
  }
}