.activitypicinside background-color: $color-graybg padding-top: 80px padding-bottom: 80px @media (max-width:767px) padding-top: 60px padding-bottom: 70px &-head display: inline-flex width: 100% @media (max-width:767px) display: flex flex-wrap: wrap flex-direction: column &__date min-width: 115px font-weight: $fontweight-bold text-align: center border-right: 1px solid #c1c1c1 padding-right: 10px div display: inline-block line-height: 1.2 font-size: $fontsize-x2s &:nth-child(1) font-size: $fontsize-x4l display: block color: $color-green font-style: italic font-family: Arial &:nth-child(2) &::after content: "," font-size: $fontsize-x2s color: $color-gray margin-left: 5px @media (max-width:767px) min-width: 100% display: inline-flex align-items: flex-end border-right: none div &:nth-child(1) font-size: $fontsize-x2s font-family: $fontfamily-normal font-style: normal color: $color-gray &::after content: "," font-size: $fontsize-x2s font-family: $fontfamily-normal color: $color-gray margin-left: 2px margin-right: 2px &:nth-child(2) &::after margin-left: 2px margin-right: 2px &__titlebox padding-left: 20px width: calc(100% - 115px) @media (max-width:767px) padding-left: 0px padding-top: 8px width: 100% &__title font-weight: $fontweight-bold font-size: $fontsize-x2l color: $color-black line-height: 1 letter-spacing: 0.01em &__text font-weight: $fontweight-bold line-height: 1.6 margin-top: 10px &__tags font-size: $fontsize-x2s color: $color-green font-weight: $fontweight-bold padding-top: 8px img width: 16px margin-right: 10px span margin-left: 28px display: inline-flex align-items: center &:first-child margin-left: 0 @media (max-width:479px) display: flex margin-left: 0 margin-top: 5px &:first-child margin-top: 0 &-slider padding-top: 35px &__item text-align: center padding-bottom: 10px img max-width: 100% max-height: 430px box-shadow: 0 10px 10px -5px $color-graydate margin-left: auto margin-right: auto @media (max-width:767px) box-shadow: 0 7px 10px -5px $color-graydate @media (max-width:575px) max-height: 300px .slick-track display: flex align-items: center &-nav margin-top: 30px padding-left: 35px padding-right: 35px margin-left: auto margin-right: auto @media (max-width:479px) margin-top: 20px &__item display: inline-flex position: relative opacity: 0.5 cursor: pointer &-img background-position: center center background-repeat: no-repeat background-size: cover width: 124px height: 70px margin-left: auto margin-right: auto @media (max-width:1399px) width: 150px @media (max-width:1199px) width: 124px @media (max-width:767px) width: 90% @media (max-width:479px) height: 60px @media (max-width:374px) height: 40px .slick-prev left: 0 .slick-next right: 0 .slick-next, .slick-prev background-color: $color-green width: 24px height: 33px z-index: 1 .slick-next:hover, .slick-prev:hover background-color: rgba($color-green,0.9) .slick-prev:before +icon($p: 0px -207px) width: 8px height: 15px margin-right: auto margin-left: auto opacity: 1 .slick-next:before +icon($p: -8px -207px) width: 8px height: 15px margin-left: auto margin-right: auto opacity: 1 .slick-current.activitypicinside-nav__item opacity: 1 .slick-track margin-left: auto margin-right: auto