@charset "utf-8";
.mt40 {
  margin-top: 40px;
}
.shiny-label {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}
.shiny-label span {
  display: inline-block;
  padding: 0 15px;
  background: url(../images/myspace/line1.png) no-repeat left top,
    url(../images/myspace/line2.png) no-repeat right top;
}
.shiny-btn {
  width: 100%;
  height: 50px;
  background: url(../images/myspace/myspace_icon02.png) no-repeat right 13px
    center #e50000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  transition: 0.3s;
  overflow: hidden;
  font-size: 14px;
}
.shiny-btn::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.5) 100%,
    rgba(255, 255, 255, 0) 0%
  );
  animation-name: shiny;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@media only screen and (min-width: 769px) {
  .shiny-btn {
    width: 388px;
    font-size: 18px;
    font-weight: bold;
  }
  .shiny-btn:hover {
    opacity: 0.7;
  }
}
@media only screen and (min-width: 1200px) {
  .issuse_heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
}

/* css 20230522 */
/* @media only screen and (min-width: 1200px) {
  #myspace01 #issues .issuse_consult{
    flex: 1;
    padding-right: 15px;
  }
} */
.bnr {
  display: flex;
  justify-content: center;
  clear: both;
}
.bnr a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 288px;
  height: 60px;
  position: relative;
  background-image: url(../images/myspace/myspace_icon02.png);
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
  padding-top: 2px;
}
.bnr a span {
  display: inline-block;
}
.bnr1 {
  border: 2px solid #cc9901;
  background-color: #cc9901;
  margin-right: 18px;
}
.bnr2 {
  border: 2px solid #165aa6;
  background-color: #165aa6;
}
.bnr-note {
  position: absolute;
  left: 50%;
  top: -31px;
  transform: translateX(-50%);
}
.bnr-text {
  font-size: 22px;
}
.bnr-text small {
  font-size: 16px;
}
.bnr1 .bnr-text {
  background: url(../images/myspace/ico1.png) no-repeat left center;
  padding: 5px 18px 5px 37px;
}
.bnr2 .bnr-text {
  background: url(../images/myspace/ico2.png) no-repeat left center;
  padding: 5px 21px 5px 42px;
}
.bnr a span.bnr-note{
  width: 218px;
  height: 38px;
  border-radius: 19px;
  position: absolute;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background-color: #fff;
  padding-top: 2px;
  transition: 0.3s;
}
.bnr a span.bnr-note::after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 8px 0 8px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -9px;
  transition: 0.3s;
}
.bnr1 .bnr-note {
  color: #cc9901;
  border: 2px solid #cc9901;
}
.bnr2 .bnr-note {
  color: #165aa6;
  border: 2px solid #165aa6;
}
@media only screen and (max-width: 1400px) {
  .bnr {
    margin: 0 auto;
    flex-wrap: wrap;
  }
  .bnr a{
    margin: 50px 10px 0;
  }
}
@media only screen and (max-width: 767px) {
  .bnr a{
    margin: 50px 0 0;
  }
}
/* bnr a:hover */
@media only screen and (min-width: 1200px) {
  .bnr a:hover{
    background-color: #fff;
  }
  .bnr a.bnr1:hover{
    color: #cc9901;
    background-image: url(../images/myspace/myspace_icon03.png);
    background-repeat: no-repeat;
    background-position: right 13px center;
  }
  .bnr a.bnr2:hover{
    color: #165aa6;
    background-image: url(../images/myspace/myspace_icon04.png);
    background-repeat: no-repeat;
    background-position: right 13px center;
  }
  .bnr1:hover .bnr-text {
    background: url(../images/myspace/ico1_on.png) no-repeat left center;
  }
  .bnr2:hover .bnr-text {
    background: url(../images/myspace/ico2_on.png) no-repeat left center;
  }
  .bnr1:hover .bnr-note {
    background-color: #cc9901;
    color: #fff;
  }
  .bnr2:hover .bnr-note {
    background-color: #165aa6;
    color: #fff;
  }
  .bnr1:hover .bnr-note::after {
    border-color: #cc9901 transparent transparent transparent;
  }
  .bnr2:hover .bnr-note::after {
    border-color: #165aa6 transparent transparent transparent;
  }
}