@charset "utf-8";

/*---------------------------------------------
1 MAIN
2 Main　Swiper Slider
3 Transition
4 BREAKING NEWS
5 NEWS-TAB
6 NOTICE - for join
7 Pickup　Swiper Slider
8 Member List
9 Link List
---------------------------------------------*/

/*---------------------------------------------
1 MAIN
---------------------------------------------*/
/* for Slider of top page */
.home main{padding-top: 135px;overflow: hidden;}
@media only screen and (max-width: 959px) {.home main{padding-top: 129px;}}
@media only screen and (max-width: 767px) {.home main{padding-top: 60px;}}
@media only screen and (max-width: 766px) {.home main{padding-top: 59px;}}
@media only screen and (max-width: 732px) {.home main{padding-top: 58px;}}
@media only screen and (max-width: 699px) {.home main{padding-top: 57px;}}
@media only screen and (max-width: 459px) {.home main{padding-top: 44px;}}

/*---------------------------------------------
2 Main　Swiper Slider
---------------------------------------------*/
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before, .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, [class^=swiper-button-] {
  transition: all 0.3s ease;
}
.swiper-container {
  width: 100%;
  height: 28vw;
  transition: opacity 0.6s ease;
}
.swiper-container.swiper-coverflow {
  padding-top: 0;
}
.swiper-container.loading {
  opacity: 0;
  visibility: hidden;
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.swiper-button-next:after, .swiper-button-prev:after {
    color: #fff;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
}
.swiper-slide .entity-img {
  display: none;
}
.swiper-slide .content {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  padding-left: 5%;
  color: #fff;
}
@media screen and (max-width: 767px) {.swiper-slide .content {top: 40%;}}
@media screen and (max-width: 575px) {.swiper-slide .content {top: 30%;}}
.swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 0;
}
.swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
[class^=swiper-button-] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}
.swiper-button-prev {transform: translateX(10px);}
.swiper-button-next {transform: translateX(-10px);}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 0.4;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}
@media (max-width: 1180px) {
  .swiper-slide .content .title {font-size: 25px;}
  .swiper-slide .content .caption {font-size: 12px;}
}
@media (max-width: 1023px) {
  .swiper-container {height: 40vw;}
  .swiper-container.swiper-coverflow {padding-top: 0;}
}
.home .swiper-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear,right top,left top,from(rgba(255,255,255,.5)),to(rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(right,rgba(255,255,255,.5),rgba(0,0,0,0));
    background-image: -o-linear-gradient(right,rgba(255,255,255,.5),rgba(0,0,0,0));
    background-image: linear-gradient(to left,rgba(255,255,255,.5),rgba(0,0,0,0));
}
.home .swiper-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,.5)),to(rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(left,rgba(255,255,255,.5),rgba(0,0,0,0));
    background-image: -o-linear-gradient(left,rgba(255,255,255,.5),rgba(0,0,0,0));
    background-image: linear-gradient(to right,rgba(255,255,255,.5),rgba(0,0,0,0));
}

/*---------------------------------------------
3 Transition
---------------------------------------------*/
.breaking_news li a p{transition: .2s ease-in-out;}

/*---------------------------------------------
4 BREAKING NEWS
---------------------------------------------*/
.breaking_news div > div > div:nth-child(1) {color:#fff;background-color:#842029}
.breaking_news li:not(:last-child) {margin-bottom: 0.75em;}
.breaking_news li time{font-size: 0.78rem; color: #6c757d;}
.breaking_news li a p {line-height: 1.2;padding-top:0.25em;}
.breaking_news li a p:hover {text-decoration: underline;}


/*---------------------------------------------
6 NOTICE - for join
---------------------------------------------*/
.news-tab .notice div:nth-child(1) > div > div {background-color: #ee970e;}
.news-tab .notice div:nth-child(2) > div > div {background-color: #004b9e;}
.news-tab .notice img {width: 2em;vertical-align: -11px}
.news-tab .notice ul li {line-height: 2.2;}
.news-tab .notice ul li a:hover {text-decoration: underline;}
.news-tab .notice ul li::before {margin-right: -.2em;font-size: 1em;content: '●';vertical-align: .03em;}
.news-tab .notice div:nth-child(1) > div ul li::before {color: #e48800;}
.news-tab .notice div:nth-child(2) > div ul li::before {color: #036ea9;}

/*---------------------------------------------
7 Pickup　Swiper Slider
---------------------------------------------*/
/* fadeUp */
.swiper{
  opacity: 0;
  transition: opacity .3s linear;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* contents shape */
.pickup_content .pickup_content-item {
  margin-bottom: 30px;
}
.pickup_content #pickup_content-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}
.pickup_content #pickup_content-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 16px 10px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 50px;
}
.pickup_content #pickup_content-flters li:hover, .pickup_content #pickup_content-flters li.filter-active {
  color: #fff;
  background: #1B9B64;
}
.pickup_content #pickup_content-flters li:last-child {
  margin-right: 0;
}
.pickup_content .pickup_content-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(34, 34, 34, 0.8);
}
.pickup_content .pickup_content-wrap::before {
  content: "";
  background: rgba(34, 34, 34, 0.9);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}
.pickup_content .pickup_content-wrap img {
  transition: all ease-in-out 0.3s;
}
.pickup_content .pickup_content-wrap .pickup_content-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding: 20px;
}
.pickup_content .pickup_content-wrap .pickup_content-info h4 {
  margin: 0 auto;
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
}
.pickup_content .pickup_content-wrap .pickup_content-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-style: italic;
}
.pickup_content .pickup_content-wrap .pickup_content-links {
  text-align: center;
  z-index: 4;
}
.pickup_content .pickup_content-wrap .pickup_content-links a {
  color: #fff;
  margin: 0 5px 0 0;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}
.pickup_content .pickup_content-wrap .pickup_content-links a:hover {
  color: #78d9cd;
}
.pickup_content .pickup_content-wrap:hover::before {
  opacity: 1;
}
.pickup_content .pickup_content-wrap:hover img {
  transform: scale(1.2);
}
.pickup_content .pickup_content-wrap:hover .pickup_content-info {
  opacity: 1;
}

/* Swiper Slider turn page */
#pickup .swiper-wrap {position: relative;}
#pickup .pickup-button-prev, #pickup .pickup-button-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    border-radius: 3em;
    background: #2770c1;
    margin-top: -1.5em;
}
#pickup .pickup-button-prev {left: -1.5em;}
#pickup .pickup-button-next {right: -1.5em;}
#pickup .pickup-button-prev:hover, #pickup .pickup-button-next:hover {background:#5a94d5;transition: 0.5s;}
#pickup .pickup-button-prev::before,#pickup .pickup-button-next::before{font-family: "FontAwesome";font-size: 1.25rem;color: #fff;}
#pickup .pickup-button-prev::before {content: '\f060';}
#pickup .pickup-button-next::before {content: '\f061';}
@media (max-width: 1213px) {
#pickup .pickup-button-prev, #pickup .pickup-button-next {width: 4em;height: 4em;border-radius: 4em;margin-top: -2em;}
#pickup .pickup-button-prev::before,#pickup .pickup-button-next::before{font-family: "FontAwesome";font-size: 1.25rem;color: #fff;}
#pickup .pickup-button-prev {left: -0.9em;}
#pickup .pickup-button-next {right: -0.9em;}
}

/*---------------------------------------------
8 Member List
---------------------------------------------*/
section.members {background: #f5f5f5;}

.members i {float: right;}
.members ul li a {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 4.5em;
    padding: 0 0.75em;
    border: 1px solid #dee2e6;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    transition: all 200ms;
}
.members ul li a span.arrow {
  width: 1.5em;
  margin-left: 0.5em;
  border-bottom: #6c757d 1px solid;
  position: relative;
}
.members ul li a span.arrow::before {
  content: "";
  height: 8px;
  border-right: #6c757d 1px solid;
  position: absolute;
  bottom: 0;
  right: 0;
  transform-origin: bottom right;
  transform: rotate(-45deg);
}
.members ul li a span.arrow { transition: all 200ms;}
.members ul li a:not(.off):hover { background: #004b9e; color: #fff; opacity:1;}
.members ul li a:not(.off):hover span.arrow { border-bottom: #ffffff 1px solid;}
.members ul li a:not(.off):hover span.arrow::before { border-right: #ffffff 1px solid;}

.members small {display: contents;}
/*---------------------------------------------
9 Link List
---------------------------------------------*/
.links i {float: right;}
.links ul li a {
    display: flex;
    width: 100%;
    align-items: center;
    height: 80px;
    padding: 0.25em;
    border: 1px solid #dee2e6;
    background-color: #e6f4f9;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.2;
    color: #484848;
    transition: all 200ms;
}
.links ul li a img { margin-right: 0.25em;}
.links ul li a:not(.off):hover { background: #84bed5; color: #fff; opacity:1;}
.links ul li a span {display:none;}
@media screen and (min-width:399px) and (max-width:991px) {.links ul li a span {display:block;}}