@charset "UTF-8";
body {
  font-family: "微軟正黑體", "Malgun Gothic", Dotum, Tahoma, sans-serif;
  background-color: black;
  color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

ul, li, a {
  text-decoration: none;
  list-style: none;
  padding: 0px;
  overflow: unset;
}

button, .btn-info, .btn-info.focus, .btn-info:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show > .btn-info.dropdown-toggle:focus, button:focus {
  outline: unset;
  border: 0px;
  -webkit-box-shadow: unset;
          box-shadow: unset;
}

audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-return-to-realtime-button,
audio::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-panel {
  font-size: 12px;
  font-size-color: #fff;
}

audio::-webkit-media-controls-enclosure {
  background: none;
  border-radius: 10px;
  border-radius-background-color: none;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-fullscreen-volume-min-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-fullscreen-volume-slider,
audio::-webkit-media-controls-volume-slider-container {
  display: -webkit-box;
  display: flex;
  background-color: transparent;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
  color: unset;
  background-color: unset;
}

.dropdown-toggle::after {
  content: unset;
}

@-webkit-keyframes main_spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes main_spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

.c_red {
  color: #a31414;
}

main {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

main .bg_spin {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4000px;
  height: 4000px;
  background: url("../images/main_bg_spin.jpg") no-repeat center center;
  background-size: contain;
  -webkit-animation: main_spin 180s linear 0s infinite;
          animation: main_spin 180s linear 0s infinite;
}

main .bg_char {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1634px;
  height: 1399px;
  background: url("../images/main_bg_char.png") no-repeat center center;
  background-size: contain;
}

main .char_wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

main .char_wrapper .char {
  position: absolute;
  height: 100%;
  width: 100%;
}

main .char_wrapper .char .main_char1 {
  width: 418px;
  height: 570px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 30%;
  top: 70%;
  background: url("../images/main_char1.png") no-repeat center center;
  background-size: contain;
  max-height: 55vh;
}

@media (max-width: 480px) {
  main .char_wrapper .char .main_char1 {
    left: 28%;
    top: 60%;
    -webkit-transform: translate(-50%, -50%) scale(70%);
            transform: translate(-50%, -50%) scale(70%);
  }
}

main .char_wrapper .char .main_char2 {
  width: 385px;
  height: 654px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 38%;
  top: 85%;
  background: url("../images/main_char2.png") no-repeat center center;
  background-size: contain;
  max-height: 87vh;
}

@media (max-width: 480px) {
  main .char_wrapper .char .main_char2 {
    left: 20%;
    -webkit-transform: translate(-50%, -50%) scale(70%);
            transform: translate(-50%, -50%) scale(70%);
  }
}

main .char_wrapper .char .main_char3 {
  width: 838px;
  height: 1034px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 90%;
  background: url("../images/main_char3.png") no-repeat center center;
  background-size: contain;
  max-height: 130vh;
}

@media (max-width: 480px) {
  main .char_wrapper .char .main_char3 {
    top: 85%;
    -webkit-transform: translate(-50%, -50%) scale(70%);
            transform: translate(-50%, -50%) scale(70%);
  }
}

main .char_wrapper .char .main_char4 {
  width: 495px;
  height: 516px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 62%;
  top: 75%;
  background: url("../images/main_char4.png") no-repeat center center;
  background-size: contain;
  max-height: 50vh;
}

@media (max-width: 480px) {
  main .char_wrapper .char .main_char4 {
    top: 58%;
    left: 80%;
    -webkit-transform: translate(-50%, -50%) scale(70%);
            transform: translate(-50%, -50%) scale(70%);
  }
}

main .char_wrapper .char .main_char5 {
  width: 528px;
  height: 695px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 75%;
  top: 70%;
  background: url("../images/main_char5.png") no-repeat center center;
  background-size: contain;
  max-height: 65vh;
}

@media (max-width: 480px) {
  main .char_wrapper .char .main_char5 {
    left: 68%;
    top: 58%;
    -webkit-transform: translate(-50%, -50%) scale(70%);
            transform: translate(-50%, -50%) scale(70%);
  }
}

main .title {
  position: relative;
  width: 612px;
  height: 254px;
  max-width: 100%;
  max-height: 30vh;
  margin-top: 26vh;
  -webkit-transform: translateY(-50%) scale(0.8);
          transform: translateY(-50%) scale(0.8);
  background: url("../images/main_title.png") no-repeat center center;
  background-size: contain;
}

@media (max-width: 480px) {
  main .title {
    margin-top: 23vh;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

main .main_mask {
  position: absolute;
  bottom: 0px;
  height: 200px;
  width: 100%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

main #particles-js {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.arrow {
  position: fixed;
  right: 0px;
  top: calc(50% - 230px);
  width: 120px;
  height: 45px;
  background: url("../images/aside_arrow.png") no-repeat center center;
  background-size: contain;
  z-index: 1060;
  -webkit-transition: .3s all;
  transition: .3s all;
  cursor: pointer;
  -webkit-transition: .3s .2s;
  transition: .3s .2s;
}

.arrow.on {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.arrow:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
  -webkit-transition: .3s all;
  transition: .3s all;
}

@media (max-width: 480px) {
  .arrow {
    width: 50px;
  }
}

aside {
  z-index: 1060;
  position: fixed;
  width: 120px;
  height: 360px;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: .3s all;
  transition: .3s all;
}

aside.on {
  right: -120px;
}

aside .aside_main {
  position: relative;
  overflow: unset;
}

aside .aside_main a li {
  width: 100%;
  height: 50px;
  -webkit-transition: .3s .2s;
  transition: .3s .2s;
}

aside .aside_main a li:hover {
  -webkit-filter: brightness(150%);
          filter: brightness(150%);
  -webkit-transition: .3s all;
  transition: .3s all;
}

aside .aside_main a:nth-of-type(1) li {
  background: url("../images/aside_reg.png") no-repeat center center;
  background-size: contain;
}

aside .aside_main a:nth-of-type(2) li {
  background: url("../images/aside_home.png") no-repeat center center;
  background-size: contain;
}

aside .aside_main a:nth-of-type(3) li {
  background: url("../images/aside_dl.png") no-repeat center center;
  background-size: contain;
}

aside .aside_main::before {
  content: '';
  position: absolute;
  width: 51px;
  height: 55px;
  top: -100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url("../images/aside_before.png") no-repeat center center;
  background-size: contain;
}

aside .aside_main::after {
  content: '';
  position: absolute;
  width: 35px;
  height: 36px;
  bottom: -36px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url("../images/aside_after.png") no-repeat center center;
  background-size: contain;
}

aside .aside_sub {
  position: relative;
  overflow: unset;
  top: 30px;
  display: none;
}

aside .aside_sub a li {
  width: 100%;
  height: 45px;
  -webkit-transition: .3s .2s;
  transition: .3s .2s;
}

aside .aside_sub a li:hover {
  -webkit-filter: brightness(150%);
          filter: brightness(150%);
  -webkit-transition: .3s all;
  transition: .3s all;
}

aside .aside_sub a:nth-of-type(1) li {
  background: url("../images/aside_sub1.png") no-repeat center center;
  background-size: contain;
}

aside .aside_sub a:nth-of-type(2) li {
  background: url("../images/aside_sub2.png") no-repeat center center;
  background-size: contain;
}

aside .aside_sub a:nth-of-type(3) li {
  background: url("../images/aside_sub3.png") no-repeat center center;
  background-size: contain;
}

aside .aside_sub a:nth-of-type(4) li {
  background: url("../images/aside_sub4.png") no-repeat center center;
  background-size: contain;
}

aside .aside_sub::before {
  content: '';
  position: absolute;
  width: 51px;
  height: 55px;
  bottom: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url("../images/aside_before.png") no-repeat center center;
  background-size: contain;
}

#pills-tab {
  position: absolute;
  width: 100%;
  z-index: 1050;
}

#pills-tab.fixed {
  position: fixed;
  top: 0px;
}

#loading {
  pointer-events: none;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1060;
  background: #000;
}

#loading video {
  width: 100%;
  min-height: 100%;
}

@media (max-width: 480px) {
  #loading video {
    position: absolute;
    width: unset;
    min-height: unset;
    height: 100%;
    min-width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.nav-pills {
  height: 120px;
  background-color: #000;
}

@media (max-width: 480px) {
  .nav-pills {
    height: 50px;
  }
}

.nav-pills .nav-item {
  width: 270px;
  max-width: calc(100% / 4 - 2px);
  height: 120px;
}

@media (max-width: 480px) {
  .nav-pills .nav-item {
    height: 50px;
  }
}

@media (max-width: 480px) {
  .nav-pills .nav-item {
    padding-left: 0px;
  }
}

.nav-pills .nav-item:nth-of-type(1) a {
  height: 100%;
  background: url("../images/pill_team1.png") no-repeat center center;
  background-size: contain;
}

.nav-pills .nav-item:nth-of-type(2) a {
  height: 100%;
  background: url("../images/pill_team2.png") no-repeat center center;
  background-size: contain;
}

.nav-pills .nav-item:nth-of-type(3) a {
  height: 100%;
  background: url("../images/pill_team3.png") no-repeat center center;
  background-size: contain;
}

.nav-pills .nav-item:nth-of-type(4) a {
  height: 100%;
  background: url("../images/pill_team4.png") no-repeat center center;
  background-size: contain;
}

.nav-pills .nav-item a {
  opacity: .4;
  -webkit-transition: .2s .3s;
  transition: .2s .3s;
}

.nav-pills .nav-item a:hover, .nav-pills .nav-item .active {
  opacity: 1;
  -webkit-transition: .3s all;
  transition: .3s all;
}

.tab-content .group {
  position: relative;
  min-height: 100vh;
}

.tab-content .group .section1 {
  background: url("../images/section1_bg.jpg") no-repeat center;
  background-size: cover;
  padding-bottom: 100px;
  overflow: hidden;
}

.tab-content .group .section1::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 200px;
  top: 0px;
  left: 0px;
  pointer-events: none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1a120f+0,1a120f+100&0.5+0,0+100 */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(26, 18, 15, 0.7)), to(rgba(26, 18, 15, 0)));
  background: linear-gradient(to bottom, rgba(26, 18, 15, 0.7) 0%, rgba(26, 18, 15, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#801a120f', endColorstr='#001a120f',GradientType=0 );
}

.tab-content .group .section1 .carousel .carousel-control-prev, .tab-content .group .section1 .carousel .carousel-control-next {
  width: 150px;
  height: 269px;
  background: url("../images/char_arrow.png") no-repeat center center;
  background-size: contain;
  top: 50%;
  right: 10%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: .3s all;
  transition: .3s all;
}

@media (max-width: 768px) {
  .tab-content .group .section1 .carousel .carousel-control-prev, .tab-content .group .section1 .carousel .carousel-control-next {
    right: 0%;
    width: 50px;
  }
}

.tab-content .group .section1 .carousel .carousel-control-prev.carousel-control-next, .tab-content .group .section1 .carousel .carousel-control-next.carousel-control-next {
  -webkit-transform: rotate(180deg) translateY(calc(-50% + 269px));
          transform: rotate(180deg) translateY(calc(-50% + 269px));
}

.tab-content .group .section1 .carousel .carousel-control-prev.carousel-control-prev, .tab-content .group .section1 .carousel .carousel-control-next.carousel-control-prev {
  left: 10%;
}

@media (max-width: 768px) {
  .tab-content .group .section1 .carousel .carousel-control-prev.carousel-control-prev, .tab-content .group .section1 .carousel .carousel-control-next.carousel-control-prev {
    left: 0%;
  }
}

.tab-content .group .section1 .carousel-item {
  width: 90%;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .tab-content .group .section1 .carousel-item {
    height: 60vh;
  }
}

@media (max-width: 480px) {
  .tab-content .group .section1 .carousel-item {
    height: 50vh;
  }
}

.tab-content .group .section1 .carousel-item img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 58%;
  max-width: 55%;
  max-height: 100%;
}

.tab-content .group .section1 .book {
  position: relative;
  -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;
}

.tab-content .group .section1 .book .flipbook {
  position: relative;
  width: 100%;
  max-width: 100%;
  -webkit-filter: drop-shadow(0px 0px 100px #ffd86c59);
          filter: drop-shadow(0px 0px 100px #ffd86c59);
  width: 900px;
  height: 644.7753px;
}

@media (max-width: 480px) {
  .tab-content .group .section1 .book .flipbook {
    height: 540px;
  }
}

@media (max-width: 1200px) {
  .tab-content .group .section1 .book .flipbook {
    width: 800px;
    height: 573.1336px;
  }
}

@media (max-width: 1200px) and (max-width: 480px) {
  .tab-content .group .section1 .book .flipbook {
    height: 480px;
  }
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book .flipbook {
    width: 600px;
    height: 429.8502px;
  }
}

@media (max-width: 768px) and (max-width: 480px) {
  .tab-content .group .section1 .book .flipbook {
    height: 360px;
  }
}

@media (max-width: 480px) {
  .tab-content .group .section1 .book .flipbook {
    width: 380px;
    height: 272.23846px;
    max-width: 90%;
  }
}

@media (max-width: 480px) and (max-width: 480px) {
  .tab-content .group .section1 .book .flipbook {
    height: 228px;
  }
}

.tab-content .group .section1 .book .flipbook::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: url("../images/book_cover.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group .section1 .book .flipbook .page-wrapper {
  color: #523320;
}

.tab-content .group .section1 .book .flipbook .page-wrapper .page {
  background: url("../images/book_bg.png") no-repeat center center;
  background-size: contain;
  background-size: 200%;
}

.tab-content .group .section1 .book .flipbook .page-wrapper .page.even {
  background-position: 0% 0;
}

.tab-content .group .section1 .book .flipbook .page-wrapper .page.odd {
  background-position: 100% 0;
}

.tab-content .group .section1 .book .flipbook .page-wrapper .page .content {
  height: 100%;
  padding: 20% 40px 40px 40px;
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book .flipbook .page-wrapper .page .content {
    overflow: scroll;
  }
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book .flipbook .page-wrapper .page .content {
    padding: 10% 10px 10% 10px;
  }
}

.tab-content .group .section1 .book .flipbook .page-wrapper .page .content p {
  font-size: 16px;
}

@media (max-width: 1200px) {
  .tab-content .group .section1 .book .flipbook .page-wrapper .page .content p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book .flipbook .page-wrapper .page .content p {
    font-size: 12px;
    line-height: 16px;
  }
}

.tab-content .group .section1 .book .flipbook .page-wrapper .page .content span.page_n {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  font-style: italic;
}

@media (max-width: 480px) {
  .tab-content .group .section1 .book .flipbook .page-wrapper .page .content span.page_n {
    font-size: 12px;
  }
}

.tab-content .group .section1 .book button {
  position: absolute;
  z-index: 1050;
  border: none;
  width: 100px;
  height: 100px;
  background: url("../images/book_arrow.png") no-repeat center center;
  background-size: contain;
  top: 52%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: .3s all;
  transition: .3s all;
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book button {
    width: 50px;
  }
}

.tab-content .group .section1 .book button:hover {
  -webkit-filter: brightness(120%) drop-shadow(0px 0px 1px #ffffeb93);
          filter: brightness(120%) drop-shadow(0px 0px 1px #ffffeb93);
}

.tab-content .group .section1 .book button.prev {
  left: 12px;
}

@media (max-width: 1200px) {
  .tab-content .group .section1 .book button.prev {
    left: -20px;
  }
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book button.prev {
    left: -95px;
  }
}

@media (max-width: 480px) {
  .tab-content .group .section1 .book button.prev {
    left: -10px;
  }
}

.tab-content .group .section1 .book button.next {
  right: 12px;
  -webkit-transform: rotate(180deg) translateY(calc(-50% + 100px));
          transform: rotate(180deg) translateY(calc(-50% + 100px));
}

@media (max-width: 1200px) {
  .tab-content .group .section1 .book button.next {
    right: -20px;
  }
}

@media (max-width: 768px) {
  .tab-content .group .section1 .book button.next {
    right: -95px;
  }
}

@media (max-width: 480px) {
  .tab-content .group .section1 .book button.next {
    right: -10px;
  }
}

.tab-content .group .section2 {
  position: relative;
  height: 100vh;
}

.tab-content .group .section2::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #00000060;
}

.tab-content .group .section2 button.s2_play_btn {
  width: 232px;
  height: 232px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 60%;
  background: url("../images/play_btn.png") no-repeat center center;
  background-size: contain;
  -webkit-transition: .3s all;
  transition: .3s all;
}

@media (max-width: 768px) {
  .tab-content .group .section2 button.s2_play_btn {
    width: 100px;
  }
}

.tab-content .group .section2 button.s2_play_btn:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}

.tab-content .group .section2 .modal-dialog {
  margin-top: 150px;
  width: 80%;
  height: 60%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .tab-content .group .section2 .modal-dialog {
    width: unset;
  }
}

.tab-content .group .section2 .modal-dialog .video_wrapper {
  position: relative;
  min-width: unset;
  height: 70vh;
}

.tab-content .group .section2 .modal-dialog .video_wrapper iframe {
  width: 100%;
  height: 100%;
}

.tab-content .group .section2 .modal-dialog .btn {
  position: absolute;
  top: -80px;
  right: 0px;
  width: 80px;
  height: 80px;
  background: #0007;
}

.tab-content .group .section2 .modal-dialog .btn::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 2px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  background: #fff;
  -webkit-transition: 0.6s all;
  transition: 0.6s all;
}

.tab-content .group .section2 .modal-dialog .btn::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 2px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
  background: #fff;
  -webkit-transition: 0.6s all;
  transition: 0.6s all;
}

.tab-content .group .section2 .modal-dialog .btn:hover::before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transition: 0.6s all;
  transition: 0.6s all;
  background: #bd0707;
}

.tab-content .group .section2 .modal-dialog .btn:hover::after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transition: 0.6s all;
  transition: 0.6s all;
  background: #bd0707;
}

.tab-content .group .section3 {
  position: relative;
  min-height: 100vh;
  background: url("../images/section3_bg.jpg") no-repeat center center;
  background-size: contain;
  overflow: hidden;
  background-size: cover;
}

.tab-content .group .section3 .container::before, .tab-content .group .section3 .container::after {
  content: '';
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 35vw;
  z-index: 0;
}

@media (max-width: 1200px) {
  .tab-content .group .section3 .container::before, .tab-content .group .section3 .container::after {
    display: none;
  }
}

.tab-content .group1 .section2 {
  background: url("../images/section2_g1.png") no-repeat center center;
  background-size: contain;
  background-size: cover;
}

.tab-content .group1 .section3 .container::before {
  width: 715px;
  height: 798px;
  left: 20%;
  top: 28%;
  background: url("../images/team1_s3_char1.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group1 .section3 .container::after {
  width: 709px;
  height: 865px;
  right: -30%;
  top: 50%;
  background: url("../images/team1_s3_char2.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group2 .section2 {
  background: url("../images/section2_g2.png") no-repeat center center;
  background-size: contain;
  background-size: cover;
}

.tab-content .group2 .section3 .container::before {
  width: 599px;
  height: 901px;
  left: 16%;
  top: 28%;
  background: url("../images/team2_s3_char1.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group2 .section3 .container::after {
  width: 668px;
  height: 1073px;
  right: -18%;
  top: 50%;
  background: url("../images/team2_s3_char2.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group3 .section2 {
  background: url("../images/section2_g3.png") no-repeat center center;
  background-size: contain;
  background-size: cover;
}

.tab-content .group3 .section3 .container::before {
  width: 986px;
  height: 773px;
  left: 18%;
  top: 28%;
  background: url("../images/team3_s3_char1.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group3 .section3 .container::after {
  width: 730px;
  height: 976px;
  right: -20%;
  top: 50%;
  background: url("../images/team3_s3_char2.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group4 .section2 {
  background: url("../images/section2_g4.png") no-repeat center center;
  background-size: contain;
  background-size: cover;
}

.tab-content .group4 .section3 .container::before {
  width: 875px;
  height: 822px;
  left: 3%;
  top: 28%;
  background: url("../images/team4_s3_char1.png") no-repeat center center;
  background-size: contain;
}

.tab-content .group4 .section3 .container::after {
  width: 1070px;
  height: 733px;
  right: -43%;
  top: 50%;
  min-width: 50vw;
  background: url("../images/team4_s3_char2.png") no-repeat center center;
  background-size: contain;
}
/*# sourceMappingURL=main.css.map */