.mainContainer
  display: flex
  justify-content: center
  align-items: center
  font-family: "Montserrat"
  margin-top: 15rem

  img
    width: 20rem
    height: 25rem

  &:hover
    cursor: pointer

    &:hover
      h1
        color: #792c9b

    .goodsCardHover
      visibility: visible
      opacity: 1

    //.goodsCardContent
    //  z-index: 1


.goodsCardHover
  display: flex
  justify-content: center
  align-items: flex-end
  content: ''
  width: 25rem
  height: 50rem
  position: absolute
  visibility: hidden
  padding-bottom: 1rem
  opacity: 0
  background-color: #fff
  transition: all .5s
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15)
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15)
  box-shadow: 0 0 10px rgba(0,0,0,0.15)

.goodsCardContent
  display: flex
  text-decoration: none
  flex-direction: column
  align-items: center
  z-index: 1

  h1
    font-weight: 600
    text-transform: uppercase
    letter-spacing: 0.6px
    padding: 0 32px
    line-height: 1.5
    color: #333
    font-size: 1.3rem
    margin-top: 0.5rem

  p
    color: #999999
    line-height: 1.3
    padding: 0 32px
    font-size: 1.3rem

    &:last-child
      font-weight: 600
      color: #333
      margin-top: 1rem
      margin-bottom: 2rem

.hiddenPart
  display: flex
  flex-direction: column
  align-items: center
  width: 100%

  select
    border: 1px solid silver
    width: 60%
    height: 3rem
    cursor: pointer
    margin-top: 1rem
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    text-shadow: 0 0 0 #000
    padding-left: 5rem
    font-size: 1.5rem
    color: #999999
    outline: none
    font-weight: 400
    background: url("../../images/goodsCard/arrowDown.png") 96% / 10% no-repeat #fff

    option
      &:hover
        box-shadow: 0 0 10px 100px #FED20F inset
        transition: all .2s ease-in-out

