@charset "UTF-8";

#blog {
  display: block;
  max-width: 100%;

  text-align: center;
  margin: 0 auto;
  padding: 120px 0;
  background-color: #FFFAE5;
  position: relative;
  background-image: url(/wp-content/themes/RANKUP/assets/images/common/top-rectangle.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 398px;
}

h4 {
  margin-bottom: 16px;
}

.blog-inner {
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 38px 0 78px 0;
}

.category-date {
  font-size: 12px;
  color: #646464;
  margin-top: 16px;
}

.blog-contents {
  margin-top: 40px;
  display: flex;
}

.blog-boxes {
  width: 567px;
  margin-right: 24px;
  margin-left: 78px;
}

.blog-box01 {
  background-image: radial-gradient(circle, #048ce2 1px, transparent 1px), radial-gradient(circle, #048ce2 1px, transparent 1px);
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 4px 2px, 4px 2px;
}

.blog-box02 {
  background-image: radial-gradient(circle, #048ce2 1px, transparent 1px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 4px 2px;
}

.blog-box-inner {
  display: flex;
  padding: 40px 0;
  text-align: left;
  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.blog-box-inner img {
  height: 139px;
  border-radius: 20px;
  margin: auto 16px auto 0;
}


.blog-box-inner img {
  width: 100%;
  display: block;
}

.blog-box-inner:hover {
  opacity: 0.6;
}

.blog-box-inner p {
  font-size: 15px;
}

.pagenation {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  margin-top: 40px;
}

.pagenation01 {
  color: #FFFFFF;
  background-color: #048CE2;
  padding: 5px 17px;
  border-radius: 5px;
  margin: 0 2px;

  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.pagenation01:hover {
  opacity: 0.7;
}

.pagenation02 {
  color: #F6881D;
  background-color: #fff;
  border: 2px solid #F6881D;
  padding: 3px 13px;
  border-radius: 5px;
  margin: 0 2px;

  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.pagenation02:hover {
  opacity: 0.7;
}

.pagenation-next {
  color: #F6881D;
  background-color: #fff;
  border: 2px solid #F6881D;
  padding: 3px 8px;
  border-radius: 5px;
  margin: 0 2px;

  transition-property: all;
  transition-duration: 0.2s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.pagenation-next:hover {
  opacity: 0.7;
}

@media screen and (max-width:1015px){
  #blog {
    display: block;
    padding: 32px 0 64px 0;
    background-color: #FFF;
    position: relative;
    background-image: none;
  }

  .blog-inner {
    max-width: 80%;
    text-align: center;
    padding: 0;
  }

  .blog-contents {
    display: block;
  }

  .blog-boxes {
    width: 80%;
    margin: 0 auto;
  }

  .blog-box-inner {
    display: block;
    padding: 24px 0;
    text-align: left;
  }

  .blog-box-inner img {
    height: auto;
    margin: 0 auto 24px auto;
    width: 324px;
  }

  .blog-box-inner p {
    font-size: 16px;
  }

  .blog-tag {
    width: 80%;
    margin: 64px auto 0 auto;
  }
}