@charset "UTF-8";

html,
body {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  min-width: initial
}

* {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
}

section, .section {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

body {
  background: #000;
  overflow: hidden;
  height: 100%;
}

body .main {
  height: inherit;
  overflow: hidden;
}

body.on {
  overflow: visible;
}

body .contents {
  opacity: 0;
  visibility: hidden;
  z-index: -9;
  display: none;
}


.page-1 .section-safe {
  opacity: 1;
  visibility: visible;
  z-index: 9;
  height: calc(var(--vh, 1vh) * 100);
  transition: all 0.5s
}

.section-safe {
  opacity: 0;
  visibility: hidden;
  z-index: -9;
  transition: all 0.5s
}

.page-1 .contents {
  visibility: hidden;
  z-index: -9;
}
.on .main-visual{
  opacity: 0;
  transition: all .5s;
}
.page-1.on .contents {
  margin-top: -120px;
  visibility: visible;
  z-index: 1;
}

body.special-scroll {
  overflow: visible;
}

::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera*/
  scrollbar-width: none;
  /* Firefox */
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow: hidden;
}

.fin-out .key-visual {
  overflow: visible;
  transform: translateY(0);
  transition: all .6s;
}

.ani-section {
  opacity: 0;
  transition: all .6s .1s;
}

.on .ani-section {
  transition: all .6s .1s;
  opacity: 1;
  height:880px;
}


body.on .contents {
  opacity: 1;
  z-index: 9;
}

.event-contents {
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  display: none;
}

body.fin-out  .event-contents{

  display: block;
}
body.fin-out  .contents{

  display: block;
}
body.go-on .event-contents {
  opacity: 1;
  z-index: 9;
  visibility: visible;
}

/* 
body .main {
  overflow: hidden;
  height: inherit
}

body.inapp .main {
  height: auto;
} */

body.pc, body.on {
  height: auto !important;
  overflow-y: auto;
}

body.on.no-scroll {
  height: inherit !important;
  overflow-y: hidden;
}

body .transition-wrapper {
  overflow: hidden;  
  height: calc(var(--vh, 1vh) * 100);

}

.main-visual, .section-safe {
  width: 100%;
  background: #000;
  height: calc(var(--vh, 1vh) * 100);
  padding: 0;
}

.section-event {
  background: #fff;
}

.main-visual .bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  background: radial-gradient(1vh 1vh at 50% 50%, rgba(0, 0, 0, 0) 0%, #000000 100%);
  transition: all 1s;
}

.fin-out .main-visual .bg {
  scale: 100;
  opacity: 0;
  transition:scale 1s linear,opacity .1s .9s  ease-out ;
}

.main-visual .title {
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -79px;
  width: 100%;
  font-size: 44px;
  line-height: 53px;
  text-align: center;
  color: #FFFFFF;
  transition: all 0.3s;
}

.fin-out .main-visual .title {
  transition: all 0.3s;
}

.main-visual .title.page-ready {
  opacity: 1;
  transition: all 0.2s
}

.page-1 .key-visual {
  transform: translateY(calc(var(--vh, 1vh) * -100));
  transition: all .6s
}

@keyframes arrow-bounce-ani {
  0%, 100%, 20%, 50%, 80% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  object-fit: cover;
  z-index: -1
}

.video-wrapper video {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  object-fit: cover;
}
.page-2 .ani-section {
  opacity: 1;
}

.on.go-on .ani-section {
  opacity: 0;
}

.ani-section .gs-dim {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  visibility: hidden;
}

 .ani-section.on .gs-dim {
  visibility: visible;
}

.gs-scroll-wrapper {
  height: 100%;
  opacity: 0;
  transition: all .3s
}

.ani-section.on  .gs-scroll-wrapper {
  transform: translateY(-100px);
  opacity: 1;
  transition: all .8s}

@media screen and (max-width: 500px) {
  .gs-scroll-wrapper {
    padding: 10px 0 10px;
  }
}

.ani-section .gs-dim:before, .ani-section .gs-dim:after {
  content: '';
  position: absolute;
  width: 375px;
  height: 305px;
  left: 50%;
  margin-left: -187.5px;
  top: initial;
  bottom: 0;
  z-index: 99;
  transform: rotate(0);
  background: linear-gradient(0deg, #000000 22.13%, rgba(0, 0, 0, 0) 70.49%);
}

.ani-section .gs-dim::after {
  top: 0;
  bottom: initial;
  transform: rotate(-180deg);
}

.gs-scroll-wrapper li {
  height: 80px;
  font-weight: 700;
  font-size: 35px;
  line-height: 71px;
  text-align: center;
  color: #2F2F2F;

}

.gs-scroll-wrapper li.active {
  background: linear-gradient(90.72deg, #81B3D3 4.73%, #98D2D6 99.39%);
  color: transparent;
  -webkit-background-clip: text;
}

body.hide {
  overflow: hidden;
  height: calc(var(--vh, 1vh) * 100);
}

.ico_safe {
  display: inline-block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  background: url(https://og.kakaobank.io/view/6c53ed92-dd54-4bfa-ba4d-4f65b87b2018)no-repeat 0 0/80px 70px;
  vertical-align: top
}

.tit_g {
  display: block;
  color: #fff;
  font-weight: 700;
  text-align: center
}

.txt_sub {
  display: block;
  font-size: 20px;
  line-height: 38px;
  font-weight: 700;
  color: #676767;
  text-align: center
}

.emph_sub {
  font-weight: bold;
  color: transparent;
  will-change: auto;
  background: linear-gradient(96deg, #81B3D3 0%, #98D2D6 100%);
  background-clip: text;
  -webkit-background-clip: text
}

.video_g {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.inner_section {
  max-width: 375px;
  margin: 0 auto;
  box-sizing: border-box
}

.main-visual {
  position: relative;
    opacity: 1;
    transition: all .5s;
  height: calc(var(--vh, 1vh) * 100);
}

.main-visual .dimmed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, .8) 14%, rgba(0, 0, 0, .9) 85%);
  transition: all .3s
}

.main-visual .dimmed.hide {
  opacity: 0
}

.main-visual .tit_g {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 44px;
  line-height: 53px;
  transform: translateY(-50%)
}

.main-visual .btn_down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  padding: 10px 0;
  transform: translateX(-50%)
}

.ico_safe.ico_down {
  width: 34px;
  height: 13px;
  background-position: 0 0;
  animation: arrow-bounce-ani 2s infinite;
}

.section-safe, .section_asset, .section-keep, .ani-section {
  background-color: #000
}

.section-safe {
  display: none;
}
.fin-out .section-safe {
  display: block;
}
.section-safe.disable{
  opacity: 0;
  transition: all .3s;

}
.section-safe .inner_section {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  width: 305px;
  height: 400px;
  margin: -220px -152.5px
}

.section-safe .title-group {
  opacity: 0;
}

.page-1 .section-safe .title-group {
  opacity: 1;
  transition: all .6s .6s;
}

.page-1 .section-safe .wrap_video {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s 1.3s,scale .7s;
  scale: 1;
}
.page-1 .section-safe.on .wrap_video {
  scale: 1.5;
  opacity: 0.3;
  transition: all .7s, opacity .2s .2s;
}

.section-safe .tit_g {
  margin-top: 11px;
  font-size: 29px;
  line-height: 40px
}

.section-safe .wrap_video {
  opacity: 0;
  transform: translateY(40px);
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 184px;
  margin-top: 65px;
  border-radius: 10px
}

.section-safe .wrap_video .iframe-wrap {
  min-height: 184px;
  opacity: 1;
  transition: opacity 0.5s;
}

.section-safe .wrap_video .iframe-wrap.hidden {
  opacity: 0;
}

.section-safe .wrap_video .video {
  width: 100%;
  height: 100%
}

.section-safe .btn_video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  scale: 1;
  transition: all .7s .2s;
  text-align: center
}
#player {
  width: 100%;
  height: 100%;
}
.section-safe.on #player {
  opacity: 1;
  transition: all 0.2s 0.1s;
}


.section-safe .btn_video::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://og.kakaobank.io/view/f46e2fdb-ae09-4663-a03a-8fbaf4f18e4d) no-repeat;
  background-size:contain;
  width: 100%;
  height: 100%;
  content: ''
}

.section-safe .btn_video .ico_safe {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  background-position: -40px 0
}

.section-safe #buttonVideo {
  opacity: 0;
}

.section-safe #buttonVideo.on {
  opacity: 1;
}

.link_make {
  position: fixed;
  left: 50%;
  bottom: 45px;
  z-index: -1;
  width: 206px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 34px;
  font-weight: 600;
  color: #c8c8c8;
  text-align: center;
  transform: translateX(-50%);
  opacity: 0;
  transition: all .2s .2s;
}
.link_make svg{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.page-1 .link_make.on {
  z-index: 9;
  transition: all .2s 1.8s;
  opacity: 1;
}

.link_make .ico_safe {
  width: 13px;
  height: 8px;
  margin: 13px 0 0 4px;
  background-position: 0 -20px
}

.section_asset {
  position: relative
}

.section_asset .inner_section {
  position: relative;
  padding: 74px 35px 70px
}

.section_asset::before, .section_asset::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 305px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 100%);
  content: ''
}

.section_asset::after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%)
}

.section_asset .txt_asset {
  display: block;
  font-size: 35px;
  font-weight: bold;
  line-height: 72px;
  text-align: center;
  color: #2f2f2f
}

.section_asset .txt_asset.on {
  color: transparent;
  background: linear-gradient(96deg, #81B3D3 0%, #98D2D6 100%);
  background-clip: text;
  -webkit-background-clip: text
}

.go-on .main {
  /* transform: translateY(-6%);
  transition: all 1.6s; */

}

.go-on .section-keep {
  opacity: 1;
  transition: all .6s;
}

.section-keep {
  /* overflow: hidden;
  opacity: 0; */
}

.section-keep .inner_section {
  padding: 91px 0 100px
}

.section-keep .group_asset {
  padding: 0 15px 75px
}

.section-keep .tit_g {
  margin-top: 7px;
  font-size: 36px;
  line-height: 40px
}

.section-keep .txt_flow {
  display: inline-block;
  overflow: hidden;
  height: 37px;
  width: 125px;
  vertical-align: bottom;
}
.section-keep .txt-saf {
  background: url(https://og.kakaobank.io/view/8cdc3ecd-f483-4a45-a05a-613afb559183) no-repeat;
  background-size: contain;
  background-clip:none;
  color:none;
  text-indent: -999;
  font-size:0;
}
.section-keep .txt-con {
  background: url(https://og.kakaobank.io/view/b30d4d6b-e09c-49ce-90b5-e391867efb3d) no-repeat;
  background-size: contain;
  background-clip:none;
  color:none;
  text-indent: -999;
  font-size:0;
}

.section-keep .emph_sub {
  display: block;
  position: relative;
  animation: rollingUp 2.6s infinite linear normal forwards;
  -webkit-animation: rollingUp 2.6s infinite linear normal forwards
}

.section-keep .group_asset .wrap_img {
  position: relative;
  height: 0;
  margin: 60px auto 0;
  padding-bottom: 100%;
  width: 275px;
}

.section-keep .wrap_img {
  padding-bottom: 28px;
  margin:0 auto;
}

.section-keep .wrap_img .img_keep{
  width:100%;
}
.section-keep .keep_box{
  max-width: 305px;
  width: 100%;
  min-height: 232px;
  margin:0 auto;
  background: url(https://og.kakaobank.io/view/990b96bc-529b-42e8-b218-f05c8eb15ce7) no-repeat;
  background-size: contain;
  opacity: 0;
  transform: translateY(30px);
}
.section-keep .keep_box + .keep_box{
 margin-top: 20px;
 min-height: 250px;
  background: url(https://og.kakaobank.io/view/27666bad-75bd-43e5-878f-dabbe5f219e9) no-repeat;
  background-size: contain;
}
@keyframes rollingUp {
  0% {
    transform: translateY(0)
  }

  8% {
    transform: translateY(-40px)
  }

  50% {
    transform: translateY(-40px)
  }

  58% {
    transform: translateY(-80px)
  }

  100% {
    transform: translateY(-80px)
  }
}

@-webkit-keyframes rollingUp {
  0% {
    transform: translateY(0)
  }

  8% {
    transform: translateY(-40px)
  }

  50% {
    transform: translateY(-40px)
  }

  58% {
    transform: translateY(-80px)
  }

  100% {
    transform: translateY(-80px)
  }
}

.section-keep .group_keep .bundle_tab {
  font-size: 0;
  text-align: center;
  margin-bottom: 26px;
}

.section-keep .group_keep .swiper {
  max-width:305px;
  height:359px;
  padding-top:50px;
  overflow: hidden;
}
.section-keep .group_keep .swiper-slide  {
  overflow: visible;
}
.section-keep .group_keep .btn_tab {
  display: inline-block;
  width: auto !important;
  margin: 0 5px;
  padding: 0 15px;
  border-radius: 21px;
  font-size: 17px;
  font-weight: bold;
  line-height: 41px;
  color: #7A7A7A;
  transition: all .5s;
  background-color: #262626
}

.swiper-slide-prev,.swiper-slide-next{
  scale: 0.9;
  transform: translate3d(0, -50px, 0px) !important;
  transition: all .3s;
}
.swiper-slide-next{
  scale: 0.9;
  opacity:1 !important;
  z-index:-1;
  transform: translate3d(-340px, -50px, 0px) !important;
}
.swiper-slide-prev+.swiper-slide-active{
  scale: 1;
  transform: translate3d(-305px, 0,0px) !important;
  transition: none;
}
.swiper-slide-active{
  position: relative;
  scale: 1;
  transform: translate3d(0, 0,0px) !important;
}
.swiper-slide-prev::before,.swiper-slide-next::before{
  content:'';
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 60px;
  top: 0;
  background: linear-gradient(0, #000 0%, rgba(0, 0, 0, 0.00) 100%);
}
.section-keep .group_keep .btn_tab:first-child {
  margin-left: 0
}

.section-keep .group_keep .btn_tab:last-child {
  margin-right: 0
}

.section-keep .group_keep .btn_tab.on {
  color: #000;
  background: linear-gradient(to right, #81B3D3, #98D2D6);
  transition: all .5s;
}

.section-keep .group_keep .bundle_keep {
  position: relative;
  height: 391px;
  left: 50%;
  margin-left: -166px;
  margin-top: 26px;
}

.slick-list {
  overflow: visible !important
}

.section-keep .group_keep .panel_keep {
  padding: 0 9px
}
.section-keep .group_keep .img_g {
  display: block;
  margin: 0 auto;
}

.section-keep .group_keep .wrap_info {
  text-align: center
}

.section-keep .group_keep .tit_info {
  display: block;
  font-size: 22px;
  line-height: 27px;
  color: #fff
}

.section-keep .group_keep .txt_info {
  display: block;
  margin-top: 13px;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  color: #999;
  letter-spacing: -0.14px;
}

.section-event .inner_section {
  padding: 76px 35px
}

.section-event .group_event:last-of-type {
  margin-top: 73px
}

.section-event .txt_date {
  display: block;
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
  color: #a5a5a5
}

.section-event .txt_date .bar_date {
  display: inline-block;
  width: 31px;
  height: 1px;
  margin: 0 10px;
  background-color: #d4d4d4;
  vertical-align: middle
}

.section-event .tit_eventbig {
  display: block;
  padding-bottom: 63px;
  font-size: 31px;
  font-weight: 800;
  line-height: 41px;
  color: #000
}

.section-event .group_event .txt_event {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 35px;
  color: #7dc1ee
}

.section-event .group_event .tit_event {
  display: block;
  margin-top: 3px;
  font-size: 25px;
  font-weight: bold;
  line-height: 34px;
  color: #000
}

.section-event .group_event .wrap_img {
  overflow: hidden;
  position: relative;
  margin-top: 27px;
  width: 100%;
  height: 0;
  border-radius: 14px;
  padding-bottom: 63.607%
}

.section-event .group_event .wrap_img .img_event {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.section-event .group_event .txt_apply {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  line-height: 20px;
  color: #95b1c1
}

.section-event .group_event .bundle_select {
  padding-top: 28px;
  font-size: 0
}

.section-event .bundle_select .wrap_inp {
  display: inline-block;
  position: relative
}

.section-event .bundle_select .inp_check {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: none;
  opacity: 0
}

.section-event .bundle_select .lab_g {
  display: block;
  margin: 7px 2px;
  padding: 0 10px;
  border: 1px solid #dbdbdb;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 36px;
  color: #989898;
  box-sizing: border-box
}

.section-event .bundle_select .inp_check:checked+.lab_g {
  border-color: #62BEF2;
  color: #fff;
  background-color: #62BEF2;
}

.section-event .img_info {
  width:100%;
  max-width: 305px;
  height:94px;
  background: url(https://og.kakaobank.io/view/561afc22-a062-435c-b6a7-d378e8f0b808) no-repeat;
  background-size: contain;
  margin-top:28px;
}
.section-event .btn_event {
  display: block;
  width: 100%;
  margin-top: 34px;
  border-radius: 24px;
  font-size: 18px;
  line-height: 50px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #62BEF2;
}

.section-event .btn_event:disabled {
  background-color: #8A8A8A
}

.section-event .btn_event .ico_check {
  width: 13px;
  height: 9px;
  margin: 20px 6px 0 0;
  background-position: -20px -20px
}

.section_security {
  background-color: #393939
}

.section_security .inner_section {
  padding: 75px 35px 0
}

.section_security .tit_security {
  display: block;
  margin-bottom: 16px;
  font-size: 31px;
  font-weight: bold;
  line-height: 41px;
  color: #fff
}

.section_security .wrap_security {
  padding: 30px 0
}

.section_security .wrap_security+.wrap_security {
  border-top: 1px solid #555
}

.section_security .txt_num {
  display: inline-block;
  margin-right: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #999;
  vertical-align: top
}

.section_security .desc_security {
  display: inline-block;
  font-size: 14px;
  line-height: 23px;
  color: #999
}

.section_security .desc_security .emph_sub {
  display: block;
  color: #fff
}

.section_security .box_security {
  margin-top: 17px;
  padding: 30px 42px 30px 37px;
  border-radius: 18px;
  font-size: 0;
  background-color: #303030
}

.section_security .box_security .ico_safe {
  width: 37px;
  height: 37px;
  margin: 11px 23px 0 0;
  background-position: -10px -30px
}

.section_security .box_security .desc_security {
  width: calc(100% - 60px);
  font-size: 12px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.5)
}

/* 공통 */

.section_share {
  width: 100%;
  padding: 60px 0;
  text-align: center;
  box-sizing: border-box
}

.section_share .share-btn {
  display: inline-block;
  padding: 25px 40px;
  border-radius: 40px;
  font-size: 21px;
  font-weight: 700;
  color: #000;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle
}

.section_share .share-btn svg {
  margin-right: 5px;
  vertical-align: sub;
  stroke: #000
}

.theme-default #eventInfo {
  background-color: #444
}

.theme-default #eventInfo * {
  color: #fff;
}

.theme-default .accordion-block {
  border-color: #fff;
}

.theme-default .accordion-block .accordion-btn .icon-plus svg {
  stroke: #fff;
}

.theme-default #share {
  background-color: #393939;
}

.popups .okay-btn .btn-ok {
  background-color: #000000;
  color: #fff
}

/* 플로팅 버튼 */
.wrap_apply {
  position: fixed;
  bottom: 23px;
  z-index: -1;
  width: 100%;
  padding: 0 25px;
  box-sizing: border-box;
  opacity: 0;
  transition: all .3s 1s
}

.wrap_apply.on {
  z-index: 9999;
  opacity: 1
}

.wrap_apply .link_apply {
  display: block;
  width: 100%;
  max-width: 325px;
  height: 66px;
  margin: 0 auto;
  border-radius: 25px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 66px;
  color: #000;
  text-align: center;
  background: linear-gradient(to right, #81B3D3, #98D2D6)
}

.wrap_apply .link_apply .ico_arrow {
  width: 7px;
  height: 13px;
  margin: 27px 0 0 4px;
  background-position: 0 -30px
}

/* popup */
.popups {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  transition: all 0.4s
}

.popups.on {
  visibility: visible;
  opacity: 1
}

.popups .dimmed {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6
}

.popups .modal_layer {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed
}

.popups .inner_layer {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center
}

.popups .layer_body {
  position: relative;
  max-width: 330px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-sizing: border-box
}

.popups .copy {
  margin: 26px auto 35px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  text-align: center
}

.popups .area_apply {
  width: 100%
}

.popups .area_apply .link_g {
  display: inline-block;
  width: 100%;
  padding: 18px 0 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  background: #000;
  box-sizing: border-box
}

.popups .sub {
  display: block;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -1px;
  margin: 20px auto 35px;
  color: #333333
}

#btnApply {
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}

#btnApply.on {
  z-index: 9;
  opacity: 1;
  visibility: visible;
  display: block;
  transition: all .5s;
}

.popup-youtube {position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;padding:20px 0;background:rgba(0, 0, 0, .8);z-index:1; opacity: 0; visibility: hidden;}
.popup-youtube.on {opacity: 1; transition: all .5s .8s;visibility: visible;
  z-index: 99;}
.popup-youtube .modal-table {display:table;width:100%;height:100%;table-layout:fixed;}
.popup-youtube .modal-cell {display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center;}
.popup-youtube .iframe-wrap{display:inline-block;width:100%;height:80%;}
.popup-youtube .modal-open{display:block;z-index:1000;}
.popup-youtube .btn-close-modal{position:fixed;top:22px;right:17px;color:transparent;font-size:0;width:36px;height:36px; padding:11px}

.inmotion-section{
  opacity: 0;
  transform: translateY(30px);
  transition: all .3s ;

}
.inmotion-section.play{
  transform: translateY(0);
  opacity: 1;
  transition: all .3s ;

}
#eventInfo .info-list li::before{
  background-color: #fff;
}