/* # =================================================================
  # event
  # ================================================================= */
@media screen and (max-width: 767px) {
  .event {
    height:100vh;
  }
}
.event__list {
  width: 660px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .event__list {
    width: 100%;
  }
}

.event__item {
  margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
  .event__item {
    width: 100%;
    margin-bottom: 48px;
  }
}

.event__item a {
  display: block;
  width: 325px;
  margin-bottom: 15px;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFF;
  text-decoration: none;
}

.event__item a .event__thumbnail::before {
  content: '';
  z-index:5;
}

.event__item a .event__thumbnail::after {
  position: absolute;
  left:0;
  top:0;
  right:0;
  content: '';
  background-color: #00000085;
  width: 100%;
  height: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.event__item a.event_coming-soon {
  pointer-events: none;
}

.event__item a.event_coming-soon .event__thumbnail:before, .event__item a.event_coming-soon:hover .event__thumbnail::before {
  content: '';
  width: 60px;
  height: 60px;
  background: url(../../assets/img/common/logo_wing.png) no-repeat center center/contain;
  background-size: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.event__thumbnail {
  width:100%;
  height:182px;
  margin-bottom:20px;
  background-position: center center;
  background-size:cover;
  position: relative;
}
.event__thumbnail a::before {
  content: '';
  z-index:5;
}

.event__thumbnail a::after {
  position: absolute;
  left:0;
  top:0;
  right:0;
  content: '';
  background-color: #757623;
  width: 100%;
  height: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}

@media screen and (max-width: 767px) {
  .event__thumbnail {
    width:100%;
    height:380px;
    margin-bottom:20px;
    background-position: center center;
    background-size:cover;
    position: relative;
  }
  .event__item a.event_coming-soon::before, .event__item a.event_coming-soon:hover::before {
    width: 80px;
    height: 80px;
    background-size: 80px;
  }
}

.event__item a.event_coming-soon .event__thumbnail::after {
  content: '';
  background-color: #FFF;
  width: 100%;
  height: 100%;
  -webkit-transition: all .2s;
  transition: all .2s;
}

@media screen and (max-width: 767px) {
  .event__item a {
    width: 100%;
  }
}

.event__titleIn {
}

@media screen and (max-width: 767px) {
}

.event__title {
  position: relative;
  display: block;
  padding: 0 1px 0 4px;
  overflow: hidden;
  text-align: left;
  line-height: 1.85;
  letter-spacing: 0.18em;
}

@media screen and (min-width: 768px) {
  .event__title::before {
    content: '';
    background-color: #757623;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: -4px;
    padding-right: 5px;
    -webkit-transform: translateX(-350px);
            transform: translateX(-350px);
    -webkit-transition: all .2s;
    transition: all .2s;
  }
}

.event__item a:hover > .event__titleIn .event__title::before {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.event__item a:hover .event__thumbnail::before {
  content: 'GO!';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 18px;
  letter-spacing: .25em;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
}

.event__item a:hover .event__thumbnail::after {
  height: 182px;
}

@media screen and (max-width: 767px) {
  .event__item a:hover::after {
    height: 100%;
  }
}

.event__article {
  margin:0 auto;
  padding-top:20px;
  width:660px;
}
.event__article h3 {
  font-size:20px;
  color:#FFF;
  padding:15px 0;
  line-height:1.65;
  border-bottom:1px solid rgba(255,255,255,.4);
  font-weight: 700;
  margin-bottom:25px;
}
.event__article h4 {
  color:#FFF;
  background:#757623;
  line-height:1.5;
  margin-bottom:1.2em;
  font-weight: 700;
  display: inline-block;
  padding:0 5px;
  padding-top:2px;
}
.event__article--text {
  color:#FFF;
  line-height:1.8;
  margin-bottom:1.8em;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-feature-settings: "palt";
}
.event__article--tips {
  color:#000;
  background: #FFF;
  padding:25px 30px 10px;
  margin-bottom:1.8em;
}
.event__article--tips .event__article--text {
  color:#000;
}
.event__article--img {
  max-width: 660px;
  margin:0 auto 1.8em;
}
.event__article--img img {
  max-width: 100%;
  display: block;
  height:auto;
  margin:0 auto;
}
.imgSize75 {
  width:75%  !important;
}
.bg__color{
  color: #fff;
  background: #757623;
  padding: 0 4px;
  display: inline-block;
  margin: 0 0 8px 0;
}
.box{
  border: #000 1px solid;
  padding: 20px;
  box-sizing: border-box;
}
.f__color{
  font-weight: bold;
  color: #757623;
}
.att__txt{
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .event__article h3 {
    font-size:26px;
  }
  .event__article h4,
  .event__article--text {
    font-size:24px;
  }
  .imgSize75 {
    width:100% !important;
  }
  .navPaging {
    padding-bottom:140px;
    margin-top:0;
  }
  .box{
    padding: 24px;
  }
  .att__txt{
    font-size: 20px;
  }
}