@charset "utf-8";

#main {width: 100%; overflow: hidden;}
/* main visual */
.visual {overflow: hidden; height: 600px; padding: 0 40px; background: #020a29 url('../images/main/main_bg.png') no-repeat 50% 0;}
.visual .contwrap {display: flex; justify-content: space-between; height: 100%;}
.visual .contwrap::after {display: none;}
.visual-contents {display: flex; flex-direction: column; justify-content: center; width: 720px; padding-top: 100px;}
.visual-contents__title {color: #fff; font-size: 30px;line-height: normal;}
.visual-contents__text {display: block; margin-top: 10px; margin-bottom: 20px; color: #fff; font-size: 20px;line-height: normal;}
.visual-imgs {display: flex; flex-direction: column; justify-content: center;}
.visual-imgs__bg {position: relative; display: inline-block; width: 496px; height: 544px; margin-right: -60px; background: url('../images/main/main_visual_01.png') no-repeat 50% 0; animation-duration: 2s; animation-name: logoAnimation; animation-iteration-count: infinite;}
.visual-imgs__icon {position: absolute; top: 276px; left: 96px; display: inline-block; width: 260px; height: 119px; background: url('../images/main/main_visual_02.png') no-repeat 50% 0; animation-duration: 4s; animation-name: flipAnimation; animation-iteration-count: infinite;}
@keyframes logoAnimation {
  0% {margin-top: 20px;}
  50% {margin-top: 0;}
  100% {margin-top: 20px;}
}
@keyframes flipAnimation {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  50% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  75% {
    transform: perspective(400px) rotateY(180deg);
    opacity: 0;
  }
  100% {
    transform: perspective(400px) rotateY(360deg);
    opacity: 1;
  }
}

@media screen and (max-width:1020px) {
  .visual-contents {width: 364px;}
  .visual-contents__title {font-size: 30px;}
  .visual-contents__text {margin-top: 5px; margin-bottom: 10px;font-size: 18px;}
  .visual-imgs__bg {margin-right: -150px;}
}

@media screen and (max-width:760px) {
  .visual {height: 270px; padding: 0 20px;}
  .visual-contents {padding-top: 80px;}
  .visual-contents__title {font-size: 16px;}
  .visual-contents__text {margin-top: 5px; margin-bottom: 10px; font-size: 12px;}
  .visual-imgs {padding-top: 80px;}
  .visual-imgs__bg {width: 135px; height: 150px; margin-right: -40px; background-size: 100%;}
  .visual-imgs__icon {top: 60px; left: 6px; width: 98px; height: 43px; background-size: 100%;}
}

/* quick menu */
.quick-menu-wrap {padding: 40px;}
.quick-menu {display: flex; justify-content: space-between;}
.quick-menu-item {width: calc(25% - 40px);}
.quick-menu-item__img {display: block; margin-bottom: 40px;}
.quick-menu-item__img img {max-width: 100%;}
.quick-menu-item__title {display: block; color: #333; font-size: 24px;}
.quick-menu-item__text {display: block; margin-top: 20px; color: #666; font-size: 14px;line-height: normal;}

@media screen and (max-width:1480px) {
  .quick-menu-wrap {padding: 40px 20px;}
  .quick-menu-item {width: calc(25% - 20px);}
  .quick-menu-item__img {margin-bottom: 20px;}
  .quick-menu-item__text {font-size: 12px;}
}

@media screen and (max-width:1020px) {
  .quick-menu-wrap {padding: 20px;}
  .quick-menu {flex-wrap: wrap;}
  .quick-menu-item {width: calc(50% - 40px); margin: 20px;}
}

@media screen and (max-width:760px) {
  .quick-menu-wrap {padding: 10px;}
  .quick-menu-item {width: calc(50% - 20px); margin: 10px;}
  .quick-menu-item__img {margin-bottom: 10px; width: 100px;}
  .quick-menu-item__title {font-size: 14px;}
  .quick-menu-item__text {margin-top: 5px; font-size: 10px;}
}


/* layout */
.black {padding: 80px 40px; background: #242424 url('../images/main/main_online_bg.png') no-repeat 100% 0; }
.black .contwrap,
.black--img .bxslider__item {display: flex; justify-content: space-between;}
.black .contwrap::after {display: none;}

.black-video {width: 600px;}
.black-video__iframe {width: 100%; height: 300px;}
.black-img {width: 632px;}
.black-img img {max-width: 100%;}
.black-contents {width: calc(100% - 640px); color: #fff;}
.black--img .black-contents {width: calc(100% - 672px);}
.black-contents__title {font-size: 24px;line-height: normal;}
.black-contents__text {display: block; margin-top: 20px; font-size: 16px;line-height: normal;}
.black-contents__sub_title {display: block; margin-top: 20px; font-size: 20px;line-height: normal;}
.black--img .black-contents__text {margin-top: 0;line-height: normal;}
.white {padding: 50px 40px; background: #fff url('../images/main/main_offline_bg.png') no-repeat 0% 0; }
.white--matching,
.white--webinars {padding: 40px;}
.white--matching {background: linear-gradient( 45deg, #a8e9f6 40%, #d8eff7 50%) !important; }
.white .contwrap {display: flex; justify-content: space-between;}
.white .contwrap::after {display: none;}
.white--matching .white-contents,
.white--webinars .white-contents {width: 700px; display: flex; flex-direction: column; justify-content: center;}
.white-contents__title {font-size: 24px;line-height: normal;}
.white-contents__sub_title {display: block; margin-top: 20px; font-size: 20px;line-height: normal;}
.white--matching .white-contents__sub_title,
.white--webinars .white-contents__sub_title {font-size: 16px;line-height: normal;}
.white-contents__text{display: block; color: #777; font-size: 16px; line-height: normal;}
.main-button {display: inline-block; margin-top: 30px; width: 200px; height: 40px; background: #e91385; border-radius: 20px; font-size: 14px; color: #fff !important; text-align: center; line-height: 40px; }
.main-button--white {background: #fff; color: #666 !important;}
.white-imgs {font-size: 0;}
.white-imgs img {max-width: 100%;}
.white-img__item {display: inline-block; margin-left: 80px;}
.vrbooth-slider {position: relative;}
.vrbooth-slider .bx-pager {position: absolute; top: -30px; right: 0;}
.vrbooth-slider .bx-pager-item {display: inline-block; margin: 0 3px;}
.vrbooth-slider .bx-pager-link {display: inline-block; width: 14px; height: 14px; background: #ddd; border-radius: 50%; font-size: 0; vertical-align: middle;}
.vrbooth-slider .bx-pager-link.active {background: #e91385;}

@media screen and (max-width:1480px) {
  .black-video {width: 40%;}
  .black-video__iframe {height: 240px;}
  .black-contents {width: calc(60% - 40px);}
  .black--img .black-contents {width: calc(70% - 40px);}
  .black-img {width: 30%;}
  .white-img__item {margin-left: 20px;}
  .white--matching .white-imgs,
  .white--webinars .white-imgs {width: calc(40% - 40px); text-align: right;}
  .white--matching .white-contents,
  .white--webinars .white-contents {width: 60%;}
}

@media screen and (max-width:1020px) {
  .black {padding: 40px; background-image: none;}
  .black .contwrap {display: block;}
  .black-video {width: 100%;}
  .black-video__iframe {height: 400px;}
  .black-contents {width: 100%; margin-top: 20px;}
  .black--img .black-contents {width: 100%;}
  .black-img {width: 100%; margin-top: 40px;}
  .black-img img {width: 100%;}
  .white {padding: 40px;}
  .white-img__item--none {display: none;}
  .white--matching .white-imgs,
  .white--webinars .white-imgs {width: 100%;}
  .white--matching .white-contents,
  .white--webinars .white-contents {width: 100%;}
}

@media screen and (max-width:760px) {
  .black {padding: 20px;}
  .black-video__iframe {height: 200px;}
  .black-contents {margin-top: 10px;}
  .black-contents__title {font-size: 16px;}
  .black-contents__text {margin-top: 10px; font-size: 10px;}
  .black-contents__sub_title {margin-top: 10px; font-size: 13px;}
  .black-img {margin-top: 30px;}
  .white {padding: 20px; background-image: none;}
  .white .contwrap {display: block;}
  .white-contents__title {font-size: 16px;}
  .white-contents__sub_title {margin-top: 10px; font-size: 14px;}
  .white--matching .white-contents__sub_title,
  .white--webinars .white-contents__sub_title {font-size: 12px;}
  .white-contents__text {font-size: 12px; }
  .main-button {margin-top: 10px; width: 150px; height: 30px; border-radius: 20px; font-size: 12px; text-align: center; line-height: 30px; }
  .white-imgs {margin-top: 10px;}
  .white--matching .white-imgs,
  .white--webinars .white-imgs {text-align: left;}
  .white-img__item {margin: 0;}
  .vrbooth-slider .bx-pager {top: -25px;}
  .vrbooth-slider .bx-pager-item {margin: 0 2px;}
  .vrbooth-slider .bx-pager-link {width: 6px; height: 6px;}
}


/* board */
.main-board-wrap {padding: 80px 40px;}
.main-board-wrap--1 {padding-top: 0 !important;}
.main-board-head {display: flex; justify-content: space-between; margin-bottom: 30px;}
.main-board-head::after {display: none;}
.main-board-title { color: #000; font-size: 24px;}
.main-board-selector .bx-pager-item {display: inline-block; margin: 0 3px;}
.main-board-selector .bx-pager-link {display: inline-block; width: 14px; height: 14px; background: #ddd; border-radius: 50%; font-size: 0; vertical-align: middle;}
.main-board-selector .bx-pager-link.active {background: #e91385;}
.main-board-slide-item a {display: inline;}
.main-board-slide-item__img {display: flex; justify-content: center; align-items: center; overflow: hidden; height: 180px; margin-bottom: 10px; border: 1px solid #ededed; background: #fff; box-sizing: border-box;}
.main-board-slide-item__img img {width: 100%; max-width: 100%;}
.main-board-slide-item__title {display: block; color: #000; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-board-slide-item__cate {display: block; color: #e91385; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;line-height: normal;}
.main-board-slide-item__cont {margin-top: 10px; display: block; color: #666; font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden;line-height: normal;}

@media screen and (max-width:1440px) {
  .main-board-slide-item__img {height: 160px;}
}

@media screen and (max-width:760px) {
  .main-board-wrap {padding: 20px;}
  .main-board-head {margin-bottom: 20px;}
  .main-board-title {font-size: 16px;}
  .main-board-selector .bx-pager-item {margin: 0 2px;}
  .main-board-selector .bx-pager-link {width: 6px; height: 6px;}
  .main-board-slide-item__img {height: 140px;}
  .main-board-slide-item__title {font-size: 14px;}
  .main-board-slide-item__cont {font-size: 12px;}
}


/* follow */
.follow {padding: 40px; background: #deebf2;}
.follow .contwrap {display: flex; justify-content: space-between;}
.follow-item {width: 40%;}
.follow-item--news {width: 60%;}
.follow-item--news .main-button {margin-top: 20px;}
.follow-title {color: #000; font-size: 24px;}
.follow-sub-title {margin-left: 20px; color: #484848; font-size: 14px; font-weight: normal;}
.follow-list {margin-top: 20px;}
.follow-list-item {display: inline-block; margin-left: 20px;}
.follow-list-item:first-child {margin:0;}

@media screen and (max-width:760px) {
  .follow {padding: 20px;}
  .follow .contwrap {display: block;}
  .follow-item {width: 100%;}
  .follow-item--news {width: 100%; margin-bottom: 20px;}
  .follow-item--news .main-button {margin-top: 10px;}
  .follow-title {font-size: 16px;}
  .follow-sub-title {display: block; margin: 0; font-size: 12px;}
  .follow-list {margin-top: 10px;}
  .follow-list-item {margin-left: 12px;}
}