@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 {
  position: relative;
}

.section h2 {font-size: 25px;font-weight: 800;line-height: 34px;text-align: center;}
.section h3 {font-size:20px;font-weight: 800;line-height:32px;}

/* 상단 intro : 추후 에니메이션 작업예정 */
.intro {height:100vh;background:url(https://og.kakaobank.io/view/c2ec8c3f-2d12-4254-a392-4a09a0d1e694) repeat 0 / 6px;} /* 패턴배경 max-height: 725px; */
/* .intro {height:100vh;background:url(https://og.kakaobank.io/view/955ed194-9f4b-491c-aeb2-dacf1a181536) repeat 0 / 375px} 이미지 전체배경 */
.intro .title {position:absolute;bottom:134px;width: 100%;text-align: center;z-index: 1;}
.intro .title  span {font-size: 24px;font-weight: 800;line-height: 29px;}
.intro .title  h1 {margin-top:9px;font-size: 40px;font-weight: 900;line-height: 48px;}
.intro .title  p {margin-top:15px;color:#4B535A; font-size: 19px;font-weight: 800;line-height: 23px;opacity: 0.6;}
.intro .scroll-down {position: absolute;left: 50%;transform: translateX(-50%); bottom: 0;width: 30px;height: 76px;}
.intro .scroll-down svg {position: absolute;left: 50%;transform: translateX(-50%);}
.intro .scroll-down .ico {position: absolute;left: 50%;bottom: 0;width: 29px;height: 76px;background:transparent url("https://og.kakaobank.io/view/89f0bbbd-0c06-433f-a1b3-7a9d0969e2af") no-repeat top / 100%; -webkit-animation: airplaneloop 1.8s infinite; animation: airplaneloop 1.8s infinite;z-index: 1;}
@keyframes airplaneloop {
  0% {transform: translateY(-15px) translateX(-50%);opacity: 0.25;scale: 0.9;}
  30% {opacity: 1;scale: 1;}
  60%, 100% {transform: translateY(48px) translateX(-50%);opacity: 0;scale: 0.95;}
}
@-webkit-keyframes airplaneloop {
  0% {-webkit-transform: translateY(-15px) translateX(-50%);opacity: 0.25;scale: 0.9;}
  30% {opacity: 1;scale: 1;}
  60%, 100% {-webkit-transform: translateY(48px) translateX(-50%);opacity: 0;scale: 0.95;}
}
.intro {overflow:hidden;}
.visual-box {position:relative;left: 50%;width:700px; animation:box-ani 8s infinite forwards; position:absolute;/*bottom:252px;*/height: 100%; max-height: 476px;}
.visual-box .img-usa {position:absolute;bottom:455px;bottom:199px;left:35px;width:171px; animation: usa-ani 8s infinite forwards}
.visual-box .img-texas {position:absolute;bottom:304px;bottom:48px;left:-20px;width:176px; animation: texas-ani 8s infinite forwards}
.visual-box .img-seat {position:absolute;bottom:320px;bottom:65px;left:160px;width:300px; animation: seat-ani 8s infinite forwards}
.visual-box .img-check {position:absolute;bottom:577px;bottom:321px;left:243px;width:164px; animation: check-ani 8s infinite forwards}
.visual-box .img-in {position:absolute;bottom:513px;bottom:258px;left:269px;width:94px; animation: in-ani 8s infinite forwards}
.visual-box .img-kakaobank {position:absolute;bottom:526px;bottom:270px;left:387px;width:142px; animation: kakaobank-ani 8s infinite forwards}
.visual-box .img-seoul {position:absolute;bottom:513px;bottom:258px;left:567px;width:171px; animation: seoul-ani 8s infinite forwards}
.visual-box .img-korea {position:absolute;bottom:325px;bottom:70px;left:432px;width:283px; animation: korea-ani 8s infinite forwards} 
@keyframes usa-ani {
  0% {opacity: 0;transform: scale(1.01);}
  4% {opacity:.50;}
  12%,100% {opacity:1;transform: scale(1);}
}
@keyframes texas-ani {
  0%, 3% {opacity: 0;transform: scale(1.01);}
  6% {opacity:.50;}
  14%,100% {opacity:1;transform: scale(1);}
}
@keyframes seat-ani {
  0%, 5% {opacity: 0;transform: rotate(-2deg) scale(1.1);}
  8% {opacity:.50;}
  14%,100% {opacity:1;transform: rotate(0) scale(1);}
}
@keyframes check-ani {
  0%, 14% {opacity: 0;scale: 0.95;}
  18%, 100% {opacity: 1;scale: 1;}
}
@keyframes in-ani {
  0%, 16% {opacity: 0;scale: 0.95;}
  20%, 100% {opacity: 1;scale: 1;}
}
@keyframes kakaobank-ani {
  0%, 24% {opacity: 0;scale: 0.95;}
  26%, 100% {opacity: 1;scale: 1;}
}
@keyframes seoul-ani {
  0%, 27% {opacity: 0;}
  30% {opacity:.50;transform: rotate(-2deg) scale(1.05);}
  38%,100% {opacity:1;transform: rotate(0) scale(1);}
}
@keyframes korea-ani {
  0%, 30%{opacity: 0;}
  33% {opacity:.50;transform: rotate(5deg) scale(1.05);}
  40%,100% {opacity:1;transform: rotate(0) scale(1);}
}

.dashed-line {position:absolute;bottom:476px;bottom:230px;left:228px;width:321.5px;}
.dashed-line__path {animation: dashed-line-path 8s ease-in-out infinite forwards;fill: none;stroke: #EC8C43;stroke-dasharray: 1000;stroke-dashoffset: 1000;stroke-width: 5;}
.dashed-line__dash {fill: none;stroke: #FFFFFF; stroke-dasharray: 5,18; stroke-width: 6;}
.dashed-line #ico-arrow {animation: arrow 8s infinite forwards;}
@keyframes dashed-line-path {
  0%, 17% {stroke-dashoffset: 1000;opacity: 1;}
  37%, 45% {stroke-dashoffset: 100; opacity: 1;}
  46%, 55% {stroke-dashoffset: 0; opacity: 1;}
  58%, 73% {stroke-dashoffset: 1000;opacity: 0;}
}
@keyframes arrow {
  0%, 25% {opacity: 0;scale: 0.99;}
  29%,55% {opacity: 1;scale: 1;}
  59%,100% {opacity: 0;scale: 1;}
}
.r-dashed-line__path {animation: r-dashed-line-path 8s ease-in-out infinite forwards; fill: none;stroke: #EC8C43;stroke-dasharray: 1000;stroke-dashoffset: 1000;stroke-width: 5;}
.r-dashed-line__dash {fill: none;stroke: #FFFFFF; stroke-dasharray: 5,18; stroke-width: 6;}
.dashed-line #r-ico-arrow {animation: r-arrow 8s infinite forwards;}
@keyframes r-dashed-line-path {
  0%, 62% {stroke-dashoffset: 1000;opacity: 1;}
  84%, 92% {stroke-dashoffset: 100; opacity: 1;}
  92%, 100% {stroke-dashoffset: 0;opacity: 1;}
}
@keyframes r-arrow {
  0%, 72% {opacity: 0;scale: 0.99;}
  76%,100% {opacity: 1;scale: 1;}
}

.nav-tab-wrapper.is-fade-in {
  animation: fadeIn .7s ease;
}
.nav-tab-wrapper.is-fade-out {
  animation: fadeOut .5s ease forwards;
}
@keyframes fadeIn {
  0% {opacity : 0;}
  100% {opacity: 1;}
}
@keyframes fadeOut {
  0% {opacity : 1;}
  100% {opacity: 0;}
}
.nav-tab-wrapper { height: 74px; z-index: 10; position: relative;}
.nav-tab-wrapper:not(.is-active) {position: relative; height: 0px; }
.nav-tab-wrapper.is-fade-in {position: fixed;left: 0;top: 0;width: 100%;background-color: rgba(255,255,255,0.7);z-index:10;}
.nav-tab-wrapper.is-fade-out {position: fixed;left: 0;top: 0;width: 100%;background-color: rgba(255,255,255,0.7);z-index:10;}

.nav-tab-wrapper.is-active {position:fixed;left: 0;top: 0; width:100%; background-color: rgba(255,255,255,0.7);z-index:30;}
.nav-tab { width: 100%; opacity: 1;padding:14px 0 13px;}
.nav-tab:not(.is-active) {position: absolute;z-index:10;}
.nav-tab.is-active { /* position:sticky;  */z-index:30; position:fixed;left: 0;top: 0; opacity: 1;}
.nav-tab ul {display:flex;justify-content:center;margin:0 auto;width:144px;height:48px;border-radius:24px;background:#EDEDED}
.nav-tab ul li {width:calc(100% / 2);height:100%;text-align: center;}
.nav-tab ul li a {position:relative;display: block;height:100%;}
.nav-tab ul li a span {color:#000;font-size: 15px;font-weight: 800;line-height: 49px;transition: color 600ms;z-index: 1;}
.nav-tab ul li a::after {content:"";position: absolute;top: 0;display: block;height: 100%;width: 77px;_width:72px;color: #fff;border-radius: 24px;background-color: #000;transition: left 400ms cubic-bezier(0.77, 0, 0.175, 1);}
.nav-tab ul li:first-child a::after {left:calc(100% - 5px)}
.nav-tab ul li:first-child.on a::after {left: 0;}
.nav-tab ul li:last-child a::after {left: -100%;}
.nav-tab ul li:last-child.on a::after {left:calc(0% - 5px);right: 0;}
.nav-tab ul li.on a span {position:relative;color:#fff;z-index: 1;transition: color 600ms;}
.bubble-tip {position: absolute;top:100%;left: 50%;transform: translateX(-50%);text-align: center;display: block;width:191px;border-radius: 15px;padding: 8px 0;color: #ffffff;font-size: 13px;font-weight:700;line-height:14px;white-space: nowrap;background: rgba(0,0,0,0.7);animation: bounce-ani 2.4s ease-in-out 0s infinite;z-index: 1; opacity: 1;}
.bubble-tip.off {opacity:0; transition:opacity 0.3s;}
.bubble-tip::after {content: '';position: absolute;left:50%;top:-8px;transform: translateX(-50%);display: block;width: 0;height: 0;border-width:0 6px 8px;border-style:solid;border-color: transparent transparent rgba(0,0,0,0.7) transparent;animation: fade-in 300ms ease;z-index: 1; opacity: 1;}
@keyframes bounce-ani {
  0%, 100% {transform: translateX(-50%) translateY(0);}
  50% {transform: translateX(-50%) translateY(-3px);}
}
@-webkit-keyframes bounce-ani {
  0%, 100% {-webkit-transform: translateX(-50%) translateY(0);}
  50% {-webkit-transform: translateX(-50%) translateY(-3px);}
}
/* 이벤트 영역 */
/* 이벤트 경품 영역 */
#amt-info { display: none;}
#stamp-info { display: none;}

.section-event {padding-top:45px;}
.section-event .event-inner .inner.is-top {padding-top:119px;} /* 이벤트 경품 */
.section-event .event-inner:not(.stamp) .inner:not(.is-top) {padding-top:72px;} /* 경품 영역 + 이벤트 경품 */
.event-inner .inner {padding-right:35px;padding-left:35px;}
.event-list {max-width: 305px;width:100%;margin: 33px auto 0;}
.event-list li + li {margin-top:36px;}
.event-list li:nth-child(2) {margin-top:40px;} 
.event-list .list-item .item-box {position:relative;}
.event-list .list-item:not(.item-num1) .item-box {display: flex;gap:19px;}
.event-list .list-item.item-num1 .item-box .img-info {background-repeat:no-repeat;background-position:center;  background-size:cover;overflow:hidden;}
.event-list .list-item:not(.item-num1) .item-box .img-info {flex:0 0 172px;display:flex;align-items:center;justify-content: center; height:122px;border-radius:15px;background:#F7F7F7;}
.event-list .list-item .item-box .img-info em {position:absolute;top:10px;left:10px;display:block;width:43px;height:43px;color:#fff;font-size: 16px;font-weight: 800;line-height: 43px;text-align:center;border-radius: 43px;}
.event-list .list-item:not(.item-num1) .item-box .txt-info {margin-top:9px;}
.event-list .list-item .item-box .txt-info strong {font-size: 12px;line-height: 14px;color:#B1B1B1;}
.event-list .list-item .item-box .txt-info p {display: inline-flex;align-items: flex-end;width:100%;margin-top:2px;font-size: 17px;font-weight: 800;line-height: 26px;color:#282828;}
.event-list .list-item .item-box .txt-info  span {display:inline-block;width:42px;margin-top:6px;padding:3px 0;font-size:12px;font-weight:700;text-align:center;border-radius:6px;}
.event-list .list-item.item-num1 .item-box {border-radius:15px;background:#F7F7F7;overflow: hidden;}
.event-list .list-item.item-num1 .item-box .txt-info  span {margin-top:0;margin-bottom:1px;margin-left:8px;}
.event-apply .stamp {display: none;}
.event-apply .stamp.on {display: block;}
.event-overseas .event-list .list-item.item-num1 .item-box .img-info {height:133px;background-image: url(https://og.kakaobank.io/view/4bc588be-bb15-4761-b112-5ab1c87960bf);}
.event-overseas .event-list .list-item.item-num1 .item-box .img-info > img {position:absolute;top:11px;right:14px;width:44px;}
.event-overseas .event-list .list-item.item-num1 .item-box .txt-info {padding:27px 14px 28px 25px;background:url(https://og.kakaobank.io/view/c3a7a2aa-c0d6-47e8-9d28-109788e9c1ab) no-repeat 92.5% 20% / 34px}
.event-overseas .event-list .list-item.item-num1 .item-box .txt-info  span {width:33px;color:#2CBDBF;line-height: 21px;background:#DEF6F7}
.event-domestic .event-list .list-item.item-num1 .item-box .img-info {height:120px;background-image: url(https://og.kakaobank.io/view/88f853ba-b150-425c-84ec-fc66929a75d8);}
.event-domestic .event-list .list-item.item-num1 em {background:#4787C0;}
.event-domestic .event-list .list-item.item-num1 .item-box .txt-info {padding:17px 25px;}
.event-domestic .event-list .list-item.item-num1 .item-box .txt-info  span {width:33px;color:#4787C0;line-height: 21px;background:#D9E8F5}
.event-list .list-item.item-num1 .img-info em {background:#47B9C0;}
.event-list .list-item.item-num2 .img-info em {background:#CE7D8F;}
.event-list .list-item.item-num2 .item-box .txt-info  span {color:#CE7D8F;background:#FCEDF0}
.event-list .list-item.item-num3 .img-info em {background:#DF9A2B;}
.event-list .list-item.item-num3 .item-box .txt-info  span {color:#E59D26;background:#F9EFDF}
.event-list .list-item.item-nums .img-info em {font-size:11px;background:#6D9D56;}
.event-list .list-item.item-nums .item-box .txt-info  span {color:#6D9D56;background:#EDF9E8}
/* 스템프 영역 */ 
.event-inner.stamp {position:relative;padding-top:99px;padding-bottom:72px;background:#F7F7F7;}
.event-inner.stamp::before {content: "";position: absolute;top:-45px;right: 0;bottom: 0;width: 100%;height: 45px;background: #F7F7F7;display: block;z-index: 0;}
/* .event-inner.stamp + .event-inner {padding-top:72px;} */
.amount-box {text-align:center;}
.amount-box p {margin-bottom:8px;font-size: 16px;font-weight: 700;line-height: 19px;}
.amount-box p a {vertical-align: middle;}
.amount-box strong {color:#000;font-size: 35px;font-weight: 900;line-height: 42px;}
.giveaway-box {display:flex;align-items:center;justify-content: space-between;max-width: calc(305px - 50px);margin: 40px auto;padding:23px 25px;border-radius:20px;background:#fff;}
.giveaway-box .txt-info span {color:#40B30E;font-size: 12px;font-weight: 700;line-height: 14px;}
.giveaway-box .txt-info p {margin-top:3px;font-size: 18px;font-weight: 800;line-height: 21px;}
.giveaway-box a[role="button"] {padding:10px 13px;color:#fff;font-size: 12px;font-weight: 800;line-height: 14px;border-radius:25px;background:#323232;}
.giveaway-box a[role="button"].giveaway-select {background-color:#40B30E; display: none;}
.giveaway-box a[role="button"].giveaway-end {background-color:#D3D3D3}

.giveaway-box span[role="button"] {padding:10px 13px;color:#fff;font-size: 12px;font-weight: 800;line-height: 14px;border-radius:25px;background:#323232;}
.giveaway-box span[role="button"].giveaway-select {background-color:#40B30E}
.giveaway-box span[role="button"].giveaway-end {background-color:#D3D3D3}
.giveaway-box-end {display: none;}

.mission-list {max-width: 307px;width:100%;margin: 41px auto 0;border-radius:11px;background:#fff;}
.mission-list .list-item {position:relative;padding:26px 14px 26px 29px;}
.mission-list .list-item + .list-item {border-top:1.8px dashed #ECECEC;}
.mission-list .list-item + .list-item::before, 
.mission-list .list-item + .list-item::after {content:"";position:absolute;top:-11px;display:block;width:22px;height:22px;border-radius:22px;background:#F7F7F7}
.mission-list .list-item + .list-item::before {left:-11px;}
.mission-list .list-item + .list-item::after {right:-11px;}
.mission-list .list-item em {display:block;color:#7D7D7D;font-size: 14px;font-weight: 700;line-height: 17px;}
.mission-list .list-item .title {display:block;margin-top:8px;color:#000;font-size: 20px;font-weight: 800;line-height: 24px;}
.mission-list .list-item .desc {display:block;margin-top:8px;color:#b8b8b8;font-size: 13px;font-weight: 700;line-height: 16px;}

.mission-list .list-item {background-repeat:no-repeat; background-position:calc(100% - 15px) center;}
.mission-list .list-item.item-mission1:not(.on) {background-image:url(https://og.kakaobank.io/view/c21b6811-101a-4217-a363-fec7b8803e1e);background-size:113.81px}
.mission-list .list-item.item-mission1:not(.on) em > span::before {content:"1"}
.mission-list .list-item.item-mission1.on {background-image:url(https://og.kakaobank.io/view/0c3d0ea4-6d9e-43c6-9801-fa67877281bd);background-size:114.03px}
.mission-list .list-item.item-mission1.on em {color:#FF9E00;}
.mission-list .list-item.item-mission2:not(.on) {background-image:url(https://og.kakaobank.io/view/ada9307c-a22c-4689-8643-3f5f4942a42f);background-size:115.86px}
.mission-list .list-item.item-mission2:not(.on) em > span::before {content:"2"}
.mission-list .list-item.item-mission2.on {background-image:url(https://og.kakaobank.io/view/2a8abebc-39f8-49bc-b5db-c2031979d050);background-size:115.91px}
.mission-list .list-item.item-mission2.on em {color:#E38A9E;}
.mission-list .list-item.item-mission3:not(.on) {background-image:url(https://og.kakaobank.io/view/a1c41530-f909-4f08-ab84-f0686ace18d6);background-size:101.87px}
.mission-list .list-item.item-mission3:not(.on) em > span::before {content:"3"}
.mission-list .list-item.item-mission3.on {background-image:url(https://og.kakaobank.io/view/2c15b54b-d607-45fd-b100-3756af1ef449);background-size:102.11px}
.mission-list .list-item.item-mission3.on em {color:#30BABA;}
.mission-list .list-item.item-mission4 {background-position:calc(100% - 25px) center;}
.mission-list .list-item.item-mission4:not(.on) {background-image:url(https://og.kakaobank.io/view/4e6e45b6-94c9-4d7e-a9ec-c814ba8578c3);background-size:118.05px}
.mission-list .list-item.item-mission4:not(.on) em > span::before {content:"3"}
.mission-list .list-item.item-mission4.on {background-image:url(https://og.kakaobank.io/view/f8d66be9-110c-4a84-84af-3b7ce090882c);background-size:118.87px}
.mission-list .list-item.item-mission4.on em {color:#4787C0;}
.mission-list .list-item.item-mission1.on em > span::before,
.mission-list .list-item.item-mission2.on em > span::before,
.mission-list .list-item.item-mission3.on em > span::before,
.mission-list .list-item.item-mission4.on em > span::before {content:"완료"}
/* 스템프영역 적립 전-dim */
.event-inner.stamp .dim {position: absolute;top: -45px;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7);z-index: 15; opacity:0; visibility: hidden;}
.event-inner.stamp .dim.on {opacity:1; visibility: visible; transition:opacity 0.3s;}
.event-inner.stamp .dim::before {content: "";position: absolute;width: 100%;height: 45px;background: #f7f7f7;display: block;z-index: 0;top: 0;right: 0;bottom: 0;transition: height 0.2s;}
.event-inner.stamp .dim::after {content: "";position: absolute;width: 100%;height: 45px;background: rgba(0,0,0,0.7);display: block;z-index: 0;top: 0;right: 0;bottom: 0;transition: height 0.2s;}
.event-inner.stamp .dim-mission {position:absolute;left: 50%; bottom:72px;transform: translateX(-50%);max-width:calc(321px - 14px);width: calc(100% - 54px - 14px);padding:0 7px;border-radius:22px;background:#F7F7F7;overflow:hidden;z-index: 16;}
.event-inner.stamp .dim-mission > .mission-list {margin-top:7px;}
.event-inner.stamp .dim-bubble-tip {position:absolute;left: 50%;bottom:482px;transform: translateX(-50%);/* width:calc(255px - 30px); */padding:12px 15px;font-size: 15px;font-weight: 700;line-height: 18px;white-space:nowrap;border-radius:13px;background:#fff;z-index: 16;}
.event-inner.stamp .dim-bubble-tip::after {content: '';position: absolute;left:50%;bottom:-10px;transform: translateX(-50%);display: block;width: 0;height: 0;border-width: 14px 9px 0;border-style:solid;border-color:#fff transparent transparent  transparent;animation: fade-in 300ms ease;z-index: 1;}
/* 참여방법 및 기간 */
.howto  .inner {padding:0 35px;}
.par-box {margin:70px auto 21px;padding:71px 0;border-top:2px dashed #cacaca;border-bottom:2px dashed #cacaca;}
.par-area {max-width: calc(305px - 60px);width:calc(100% - 60px);margin: 20px auto 0;padding:41px 30px;border-radius:30px;background:#F7F7F7;}
.par-list {margin:0 auto;max-width:227px;width:100%;}
.par-list .list-item {position:relative;padding-left:67px;}
.par-list .list-item::before {position:absolute;left:0;display:block;width:46px;height:46px;border-radius:46px;color:#fff;font-size: 18px;font-weight: 700;line-height: 46px;text-align: center;background:#000;z-index: 1;}
.par-list .list-item + .list-item {margin-top:41px;}
.par-list .list-item strong {font-size: 17px;line-height: 20px;}
.par-list .list-item p {margin-top:6px;color:#9A9A9A;font-size: 13px;font-weight: 600;line-height: 20px;}
.par-list .list-item.item-num1::before {content:"01";}
.par-list .list-item.item-num1::after {content:"";position:absolute;top:10px;bottom:-75%;left:22px;width:2px;background:#000;}
.par-list .list-item.item-num2::before {content:"02";}
.par-box .par-date {display:inline-block;max-width:245px;width:100%;margin-top:31px;padding:11px 0 13px;text-align:center;font-size: 13px;font-weight: 600;line-height: 21px;border-radius:10px;background:#fff;}

/* 공통 */
.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 #share {background-color:#fff;}
.theme-default #share .share-btn {color:#fff;background-color:#555;}
.theme-default #share .share-btn svg {stroke: #fff;}

.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: #fff;
  text-align: center;
  background:#000;
  /* 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;
  width:calc(100% - 28px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-sizing: border-box
}

.popups .copy {
  margin: 26px auto 20px;
  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: 20;
  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}

.popup-single .modal-content .modal-image img {width:174px;height:99px;}

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

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

.serial.serial-tline {padding-top:22px;font-size:16px;}

.btn-alarm {color: #3F51B5 !important; font-weight: bold;}

.pop-content-box .pop-content-list + .btn-payment-ok {margin-top:35px;}
.pop-content-box .btn-payment-ok {display:block;padding:20px 0;color:#fff;font-size: 20px;font-weight: 700;line-height: 24px;text-align: center;border-radius:22px;background:#000;}



@media screen and (min-width: 768px) {
  .intro { max-height: 795px;}
  .visual-box {bottom: 278px;}
}
@media screen and (max-width: 767.98px) {
  .intro { height: 100vh;}
  .visual-box {bottom:35vh}
}
@media screen and (min-width: 640px) {
  .visual-box {left: 50%;transform: translateX(-50%);}
}
@media all and (min-width: 563px) and (max-width: 639.98px) {
  @keyframes box-ani {
    0%, 15% {transform:translate(-45%, 0);}
    28%, 65% {transform:translate(-55%, 0);}
    80%, 100% {transform:translate(-48%, 0);}
  }
}
@media screen and (min-width: 460px) and (max-width: 562.98px) {
  @keyframes box-ani {
    0%, 15% {transform:translate(-40%, 0);}
    28%, 65% {transform:translate(-60%, 0);}
    80%, 100% {transform:translate(-40%, 0);}
  }
} 
@media screen and (min-width: 420px) and (max-width: 459.98px) {
  @keyframes box-ani {
    0%, 15% {transform:translate(-35%, 0);}
    28%, 65% {transform:translate(-66%, 0);}
    80%, 100% {transform:translate(-35%, 0);}
  }
} 
@media screen and (min-width: 376px) and (max-width: 419.98px) {
  @keyframes box-ani {
    0%, 15% {transform:translate(-30%, 0);}
    28%, 65% {transform:translate(-70%, 0);}
    80%, 100% {transform:translate(-30%, 0);}
  }
} 
@media screen and (max-width: 375.98px) {
  @keyframes box-ani {
    0%, 15% {transform:translate(-28%, 0);}
    28%, 65% {transform:translate(-72%, 0);}
    80%, 100% {transform:translate(-28%, 0);}
  }
}
@media screen and (max-width: 368.98px) {
  .section-event .event-inner .inner,
  .howto .inner {padding-left:15px;padding-right:15px;}
}
@media screen and (max-width: 330.98px) {
  .event-list .list-item:not(.item-num1) .item-box {gap: 10px;}
}