/* section common */
.section .fp-tableCell {padding: 80px 0 0;}
.section .contents {display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; max-width: 1060px; margin: 0 auto;}
.section .section_title {display: block; line-height: 1.35; font-size: 5.2rem; font-weight: 600; color: #111;}
#fp-nav.right {z-index: 1;}
#fp-nav .active span {background: #eaeaea;}


/* section 1 */
.section1 {position: relative; overflow: hidden; height: -webkit-fill-available; height: fill-available;}
.section1 .fp-tableCell {padding: 0; height: -webkit-fill-available; height: fill-available;}
.intro_area {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; z-index: 1;}
.intro_area .contents {flex-direction: column;}
.bnn_active .intro_area .contents {transform: translateY(80px);}
.intro_area .contents {max-width: 1490px; align-items: flex-start;}
.intro_area .contents .txt_area {opacity: 0; transform: translateY(50%);}
.intro_area .contents .txt_area .tit {display: block; line-height: 1.3; font-size: 6.0rem; font-weight: 800; color: #fff;}
.intro_area .contents .txt_area .txt {display: block; margin: 24px 0 0; line-height: 1.45; font-size: 2.4rem; font-weight: 500; color: #fff; letter-spacing: -0.24px;}
.intro_area .contents .app_down_area {opacity: 0; transform: translateY(50%); display: flex; margin-top: 70px; max-width: 100%;}
.intro_area .contents .app_down_area .btn_link {display: block; overflow: hidden; width: 210px; height: 66px; text-indent: -9999px; background-color: rgba(255, 255, 255, 0.20); background-repeat: no-repeat; background-position: center center; border-radius: 38.5px; border: 1px solid rgba(255, 255, 255, 0.50);}
.intro_area .contents .app_down_area .btn_link.btn_google {background-image: url('../images/main/btn_google_play.png'); background-size: 156px;}
.intro_area .contents .app_down_area .btn_link.btn_apple {margin: 0 0 0 20px; background-image: url('../images/main/btn_app_store.png'); background-size: 138px;}

.intro_area .contents.load {transition: 1s ease;}
.intro_area .contents.load .txt_area {opacity: 1; transform: translateY(0); transition: all 1s ease-in-out;}
.intro_area .contents.load .app_down_area {opacity: 1; transform: translateY(0); transition: all 1s 0.5s ease-in-out;}

.section1 .video_wrap {position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100);}
.section1 .video_wrap:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #05091C; opacity: 0.35; content: '';}
.section1 .video_wrap #player {width: 100%; height: 100%; object-fit: cover;}
.section1 .video_wrap .btn_mute {position: absolute; bottom: 200px; right: 70px; width: 56px; height: 56px; background-repeat: no-repeat; background-position: center center; background-size: contain; z-index: 1;}
.section1 .video_wrap .btn_mute.on {background-image: url('../images/main/speaker_icon.png');}
.section1 .video_wrap .btn_mute.off {background-image: url('../images/main/speaker_icon_x.png');}

/* section 2 - mobile_area */
.section2 {background-color: #f7f8fa;}
.mobile_area .m_ver {display: none;}
.mobile_area .contents_L {opacity: 0; transform: translateX(-100%); width: 400px;}
.mobile_area .contents_L.scroll {opacity: 1; transform: translateX(0); transition: 1s ease;}
.mobile_area .box_top {margin: 0 0 30px; width: 100%; padding: 36px 30px; text-align: center; background-color: #fff; border-radius: 10px; box-shadow: 5px 5px 32px rgba(29, 29, 36, 0.07);}
.mobile_area .box_top .title {display: block; line-height: 1; font-size: 1.9rem; font-weight: 400; color: #333;}
.mobile_area .box_top .price {display: block; margin: 20px 0; line-height: 1; font-size: 4.0rem; font-weight: 700; color: #111;}
.mobile_area .box_top .price span {font-size: 2.6rem; font-weight: 400; color: #111;}
.mobile_area .box_top .date {line-height: 1; font-size: 1.6rem; color: #888;}
.mobile_area .box_top .date span {display: inline-block; padding-left: 20px;}
.mobile_area .box_top .gage_bar .hidden_range {position: relative; z-index: 2; border-radius: 5px; border: none;}
.mobile_area .box_top .gage_bar {position: relative; width: 100%; margin: 30px auto;}
.mobile_area .box_top .visible_gage_wrap {position: relative; z-index: 1; top: 20px; left: 0; margin-bottom: 31px; width: 100%; height: 7px; background: #f7f8fa; border-radius: 5px;}
.mobile_area .box_top .visible_gage {position: absolute; width: 0%; height: 100%; left:0; top:0; background: #d1d8e7; border-radius: 5px; transition: 0.9s linear;}
.mobile_area .box_top .gage_bar .d-day_wrap {position: absolute; width: 0%; border-radius: 5px; height: 100%; background: #d1d8e7; top: 20px; left: 5px; transition: 0.9s linear;}
.mobile_area .box_top .gage_bar .d-day_wrap .d-day {position: absolute; left: 0; top: -36px;}
.mobile_area .box_top .gage_bar .d-day_wrap .d-day .txt {position: absolute; top: 1px; width: 39.4px; height: 20px; line-height: 20px; font-weight: 500; font-size: 11px; color: #fff; text-align: center; transform: translate(-38%,0); background: #3c70ff; border-radius: 10px;}
.mobile_area .box_top .gage_bar .d-day_wrap .d-day .day_num {display: inline-block; float: none; line-height: 20px; font-weight: 500; font-size: 11px; color: #fff;}
.mobile_area .box_top .gage_bar .d-day_wrap .tri {position: absolute; width: 0; height: 0; right: -20px; top: -35px; border-top: 20px solid transparent; border-right: 30px solid #3c70ff; border-bottom: 20px solid transparent; transform: scale(0.3) rotate(-90deg);}
.mobile_area .box_top .gage_bar .d-day_wrap .custom_range {position: relative; z-index: 2; top: -13px; left: -5px; margin: 7.3px 0; width: 20px; height: 20px;}
.mobile_area .box_top .gage_bar .gage_tit {display: flex; flex-direction: row; justify-content: space-between; margin: 11px 0 0;}
.mobile_area .box_top .gage_bar .gage_tit span {line-height: 1; font-size: 12px; color: rgba(51,51,51,0.5);}
.mobile_area .box_top .btn_pay {display: block; margin: 0 auto; width: 100%; height: 60px; line-height: 60px; font-size: 2.0rem; background: #3c70ff; color: #fff; border-radius: 10px;}

.mobile_area .box_bottom {width: 100%; padding: 30px 35px; background-color: #fff; border-radius: 10px; box-shadow: 5px 5px 32px rgba(29, 29, 36, 0.07);}
.mobile_area .box_bottom table {width: 100%;}
.mobile_area .box_bottom table caption {width: 100%; margin: 0 0 26px; text-align: center; line-height: 1; font-size: 1.9rem; font-weight: 400; color: #333;}
.mobile_area .box_bottom table tbody tr {overflow: hidden; position: relative; bottom: -15px; opacity: 0; width: 100%;}
.mobile_area .box_bottom table tbody tr.scroll {bottom: 0; opacity: 1; transition: bottom .5s ease, opacity .5s ease; transition-delay: 1s;}
.mobile_area .box_bottom table tbody tr td {position: relative; padding: 10px 0; line-height: 1; font-size: 1.8rem; text-align: left;}
.mobile_area .box_bottom table tbody tr td:nth-child(1) {font-weight: 400;}
.mobile_area .box_bottom table tbody tr td:nth-child(2) {font-weight: 500; color: #222; text-align: right;}
.mobile_area .box_bottom table tbody tr td:nth-child(3) {padding-left: 33px; font-weight: 500;}
.mobile_area .box_bottom table tbody tr td.c_red {color: #ff4c22;}
.mobile_area .box_bottom table tbody tr td.c_blue {color: #3c70ff;}
.mobile_area .box_bottom table tbody tr.scroll:nth-child(2) {transition-delay: 1.5s;}
.mobile_area .box_bottom table tbody tr.scroll:nth-child(3) {transition-delay: 2s;}

.mobile_area .contents_R {transform: translateY(-5.9%); margin: 0 0 0 80px;}
.mobile_area .contents_R .icon_wrap {margin: 96px 0 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: stretch; width: 374px; padding: 0 0 0 24px;}
.mobile_area .contents_R .icon_wrap .list_item {position: relative; width: 150px; text-align: center; width: calc((100% - 50px)/2); margin: 60px 0 0 50px;}
.mobile_area .contents_R .icon_wrap .list_item:nth-child(-n + 2) {margin-top: 0;}
.mobile_area .contents_R .icon_wrap .list_item:nth-child(2n + 1) {margin-left: 0;}
.mobile_area .contents_R .icon_wrap .list_item .txt {margin: 20px 0 0; line-height: 1; font-size: 1.9rem; font-weight: 400; color: #111;}
.mobile_area .contents_R .icon_wrap .list_item img {display: block; margin: 0 auto;}


/* section 3 service_area */
.service_area .m_ver {display: none;}
.service_area .contents {position: relative; justify-content: space-between;}
.service_area .contents_L .icon_wrap {margin: 80px 0 0;}
.service_area .contents_L .icon_wrap:after {display: block; clear: both; *zoom: 1; content: '';}
.service_area .contents_L .icon_wrap li {float: left; width: 64px; margin: 0 0 0 40px; text-align: center;}
.service_area .contents_L .icon_wrap li:first-child {margin: 0;}
.service_area .contents_L .icon_wrap li img {display: block; margin: 0 auto;}
.service_area .contents_L .icon_wrap li p {margin: 20px 0 0; line-height: 1; font-size: 1.8rem; color: #111;}
.service_area .contents_L .app_down_area {display: flex; margin-top: 82px;}
.service_area .contents_L .app_down_area .btn_link {display: block; overflow: hidden; width: 195px; height: 65px; text-indent: -9999px; background-repeat: no-repeat; background-position: 0 0; background-size: contain;}
.service_area .contents_L .app_down_area .btn_link.btn_google {background-image: url('../images/main/btn_google_bk02.png');}
.service_area .contents_L .app_down_area .btn_link.btn_apple {margin: 0 0 0 20px; background-image: url('../images/main/btn_apple_bk02.png');}

.service_area .contents_R {width: 348px; margin: 0 100px 0 0;}
.service_area .contents_R img {opacity: 0; transform: translateY(100px); display: block; width: 100%; transition: 1s ease;}
.service_area .contents_R .scroll {opacity: 1; transform: translateY(0);}


/* section 4 near_area */
.section4 {position: relative; overflow: hidden; background-color: #283351;}
.near_area {width: 100%; height: 100%;}
.near_area .contents {flex-direction: column; justify-content: flex-end; height: 100%; text-align: center;}
.near_area .contents .section_title {position: relative; margin-bottom: 30px; color: #fff;}
.near_area .contents .mockup_img {opacity: 0; position: relative; margin: 0 auto; width: 100%; max-width: 956px; transform: translateY(50px);}
.near_area .contents .mockup_img.m_img {display: none;}
.near_area .contents .on {display: block; opacity: 1; transform: translateY(0); transition: 1s ease;}


/* section 5 event_area */
.section5 {height: 100%;}
.section5 .fp-tableCell {display: flex; flex-direction: column; justify-content: space-between;}
.event_area {overflow: hidden; display: flex; justify-content: center; flex-direction: row; flex: 1; height: 100%;}
.event_area .contents {flex-direction: column; text-align: center;}
.event_area .contents .icon_wrap {display: flex; justify-content: space-around; align-items: center; flex-direction: row; flex-wrap: nowrap; margin: 50px 0 0; width: 100%;}
.event_area .contents .icon_wrap:after {display: block; clear: both; *zoom: 1; content: '';}
.event_area .contents .icon_wrap .list_item {opacity: 0; transform: translateY(100px); position: relative; width: calc((100% - 100px)/3); border-radius: 40px; background-color: #F1F5FF;}
.event_area .contents .icon_wrap .list_item:before {display: block; padding-top: 96.875%; content: '';}
.event_area .contents .icon_wrap .list_item + .list_item {margin-left: 50px;}
.event_area .contents .icon_wrap .list_item:hover a {transform: scale(1.1);}
.event_area .contents .icon_wrap .list_item .txt_area {position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; padding: 0 25px;}
.event_area .contents .icon_wrap .list_item .txt_area .ico {display: block; width: 60px; height: 60px; margin: 0 auto 21px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.event_area .contents .icon_wrap .list_item:nth-child(1) .txt_area .ico {background-image: url('../images/main/ico_event01.png');}
.event_area .contents .icon_wrap .list_item:nth-child(2) .txt_area .ico {background-image: url('../images/main/ico_event02.png');}
.event_area .contents .icon_wrap .list_item:nth-child(3) .txt_area .ico {background-image: url('../images/main/ico_event03.png');}
.event_area .contents .icon_wrap .list_item .txt_area .tit {display: block; line-height: 1; font-size: 2.6rem; font-weight: 600; color: #111;}
.event_area .contents .icon_wrap .list_item .txt_area .txt {margin: 16px 0 0; line-height: 1.5; font-size: 2.0rem; color: #111; word-break: keep-all;}
.event_area .contents .icon_wrap .list_item .txt_area .txt a {color: #111;}
.event_area .contents .icon_wrap .list_item.scroll {opacity: 1; transform: translateY(0); transition: all 1s ease;}
.event_area .contents .icon_wrap .list_item.scroll:nth-child(2) {transition-delay: 0.5s;}
.event_area .contents .icon_wrap .list_item.scroll:nth-child(3) {transition-delay: 1s;}

@media (min-width: 1280px) and (max-width: 1490px) {
	.intro_area .contents {padding: 0 30px;}
	.intro_area .contents .txt_area .tit {font-size: 4.6rem;}
    .intro_area .contents .txt_area .txt {font-size: 1.8rem;}
	.intro_area .contents .app_down_area {margin: 45px 0 0;}
    .intro_area .contents .app_down_area .btn_link {width: 184px; height: 59px;}
	.intro_area .contents .app_down_area .btn_link.btn_google {background-size: 135px;}
    .intro_area .contents .app_down_area .btn_link.btn_apple {margin-left: 12px; background-size: 116px;}
}

@media (min-width: 768px) and (max-width: 1023px) {        
    .section .section_title {font-size: 3.0rem;}
	
	.intro_area .contents {padding: 0 20px;}
    .intro_area .contents .txt_area .tit {font-size: 4.6rem;}
    .intro_area .contents .txt_area .txt {font-size: 1.8rem;}
	.intro_area .contents .app_down_area {margin: 45px 0 0;}
    .intro_area .contents .app_down_area .btn_link {width: 144px; height: 46px;}
	.intro_area .contents .app_down_area .btn_link.btn_google {background-size: 105px;}
    .intro_area .contents .app_down_area .btn_link.btn_apple {margin-left: 12px; background-size: 90px;}

    .mobile_area .contents_L {width: 300px;}
    .mobile_area .box_top {margin: 0 0 20px; padding: 20px 30px;}
    .mobile_area .box_top .title {font-size: 1.5rem;}
    .mobile_area .box_top .price {margin: 10px 0; font-size: 2.6rem;}
    .mobile_area .box_top .price span {font-size: 1.8rem;}
    .mobile_area .box_top .date {font-size: 1.4rem;}
    .mobile_area .box_top .gage_bar {margin: 25px auto 20px;}
    .mobile_area .box_top .btn_pay {height: 45px; line-height: 45px; font-size: 1.5rem; border-radius: 5px;}
    .mobile_area .box_bottom {padding: 20px 30px;}
    .mobile_area .box_bottom table caption {margin: 0 0 15px; font-size: 1.6rem;}
    .mobile_area .box_bottom table tbody tr td {padding: 8px 0; font-size: 1.4rem;}
    .mobile_area .box_bottom table tbody tr td:nth-child(3) {padding-left: 20px;}
    .mobile_area .contents_R {margin: 0 0 0 30px;}
    .mobile_area .contents_R .icon_wrap {margin: 30px 0 0; width: 280px; padding: 0;}
    .mobile_area .contents_R .icon_wrap .list_item {margin: 30px 0 0 10px; width: calc((100% - 10px)/2);}
    .mobile_area .contents_R .icon_wrap .list_item .txt {font-size: 1.6rem;}

    .service_area .contents {justify-content: center;}
    .service_area .contents_L .icon_wrap {margin: 30px 0 0;}
    .service_area .contents_L .icon_wrap li {margin: 0 0 0 15px;}
    .service_area .contents_L .icon_wrap li p {font-size: 1.6rem;}
    .service_area .contents_L .app_down_area {margin: 35px 0 0;}
    .service_area .contents_L .app_down_area .btn_link {width: 145px;}
    .service_area .contents_R {margin: 0 0 0 30px; width: 260px;}

    .near_area .contents .mockup_img {width: 100%;}

    .event_area .contents .icon_wrap {margin: 30px 0 0; padding: 0 40px;}
    .event_area .contents .icon_wrap .list_item {border-radius: 20px;}
    .event_area .contents .icon_wrap .list_item + .list_item {margin: 0 0 0 15px;}
    .event_area .contents .icon_wrap .list_item .txt_area {padding: 0 10px;}
    .event_area .contents .icon_wrap .list_item .txt_area .ico {margin: 0 auto 15px; width: 40px; height: 40px;}
    .event_area .contents .icon_wrap .list_item .txt_area .tit {font-size: 1.8rem;}
    .event_area .contents .icon_wrap .list_item .txt_area .txt {font-size: 1.4rem;}
}

@media screen and (max-width: 767px) {    
    /* common */
    .section {padding: 70px 0;}
    .section .fp-tableCell {padding: 0;}
    .section .contents {flex-direction: column;}
    .section .section_title {font-size: 2.8rem;}

    .section1 {padding: 0;}
	.intro_area .contents {padding: 0 25px;}
	.bnn_active .intro_area .contents {transform: translateY(calc(-15% + 75px));}
    .intro_area .contents {transform: translateY(-15%);}
    .intro_area .contents .txt_area .tit {font-size: 4.0rem;}
    .intro_area .contents .txt_area .txt {margin: 16px 0 0; font-size: 1.6rem;}
    .intro_area .contents .app_down_area {margin: 45px 0 0;}
    .intro_area .contents .app_down_area .btn_link {width: 144px; height: 46px;}
	.intro_area .contents .app_down_area .btn_link.btn_google {background-size: 105px;}
    .intro_area .contents .app_down_area .btn_link.btn_apple {margin-left: 12px; background-size: 90px;}
	.section1 .video_wrap .btn_mute {bottom: 92px; left: 30px; right: auto; width: 48px; height: 48px;}

    /* section 2 */
    .section2 {height: auto !important; padding: 70px 0;}
    .section2 .fp-tableCell {height: auto !important;}
    .mobile_area .pc_ver {display: none;}
    .mobile_area .m_ver {display: block; overflow: hidden; padding: 0 35px;}
    .mobile_area .contents_L {transform: translate(0, 100px); width: 100%; max-width: 300px; margin: 0 auto;}
    .mobile_area .contents_L.scroll {transform: translate(0, 0);}
    .mobile_area .section_title {margin: 0 0 43px; text-align: center;}
    .mobile_area .box_top {margin: 0 0 20px; padding: 30px;}
    .mobile_area .box_top .title {font-size: 1.5rem;}
    .mobile_area .box_top .price {margin: 10px 0; font-size: 2.6rem;}
    .mobile_area .box_top .price span {font-size: 1.8rem;}
    .mobile_area .box_top .date {font-size: 1.4rem;}
    .mobile_area .box_top .gage_bar {margin: 25px auto 20px;}
    .mobile_area .box_top .btn_pay {height: 45px; line-height: 45px; font-size: 1.5rem; border-radius: 5px;}
    .mobile_area .box_bottom {padding: 20px 30px;}
    .mobile_area .box_bottom table caption {margin: 0 0 15px; font-size: 1.6rem;}
    .mobile_area .box_bottom table tbody tr td {padding: 8px 0; font-size: 1.4rem;}
    .mobile_area .box_bottom table tbody tr td:nth-child(3) {padding-left: 20px;}
    .mobile_area .contents_R {transform: none; margin: 0; width: 100%;}
    .mobile_area .contents_R .icon_wrap {margin: 40px auto 0; width: 100%; max-width: 300px; padding: 0;}
    .mobile_area .contents_R .icon_wrap .list_item {margin: 30px 0 0 0; width: 50%;}
    .mobile_area .contents_R .icon_wrap .list_item .txt {font-size: 1.5rem;}

    /* section 3 */
    .section3 {height: auto !important; padding: 70px 0;}
    .section3 .fp-tableCell {height: auto !important;}
    .service_area {padding: 0 20px;}
    .service_area .pc_ver {display: none;}
    .service_area .m_ver {display: block;}
    .service_area .m_ver .section_title {margin: 0 0 20px; text-align: center;}
    .service_area .m_ver .img_area {margin: 0 auto; max-width: 335px; padding: 0 25px;}
    .service_area .m_ver .img_area img {width: 100%;}    
    .service_area .m_ver .icon_wrap {margin: 0 auto; max-width: 335px; padding : 15px 30px 0;}
    .service_area .m_ver .icon_wrap:after {display: block; clear: both; *zoom: 1; content: '';}
    .service_area .m_ver .icon_wrap li {float: left; width: calc((100% - 60px)/4); margin: 0 0 0 20px; text-align: center;}
    .service_area .m_ver .icon_wrap li:first-child {margin: 0;}
    .service_area .m_ver .icon_wrap li img {display: block; margin: 0 auto;}
    .service_area .m_ver .icon_wrap li p {margin: 20px 0 0; line-height: 1; font-size: 1.5rem; color: #111;}
    .service_area .m_ver .app_down_area {margin: 30px auto 0; width: 80%;}
    
    /* section 4 */
    .section4 {height: auto !important; padding: 70px 0 0;}
    .section4 .fp-tableCell {height: auto !important;}
    .near_area .contents .section_title {margin: 0 0 11px;}
    .near_area .contents .mockup_img {max-width: 390px;}
    .near_area .contents .mockup_img.pc_img {display: none;}
    .near_area .contents .mockup_img.m_img {display: block;}


    /* section 5 */
    .section5 {height: auto !important; padding: 70px 0 0;}
    .section5 .fp-tableCell {height: auto !important;}
    .event_area {padding: 0 30px 70px;}
    .event_area .contents .icon_wrap {flex-direction: column; margin: 30px auto 0; padding: 0 42.5px;}
    .event_area .contents .icon_wrap .list_item {width: 100%; max-width: 245px; border-radius: 20px;}
    .event_area .contents .icon_wrap .list_item + .list_item {margin: 30px 0 0;}
    .event_area .contents .icon_wrap .list_item .txt_area {padding: 0 17px;}
    .event_area .contents .icon_wrap .list_item .txt_area .ico {margin: 0 auto 16.5px; width: 50px; height: 50px;}
    .event_area .contents .icon_wrap .list_item .txt_area .tit {font-size: 2.1rem;}
    .event_area .contents .icon_wrap .list_item .txt_area .txt {margin: 15px 0 0; line-height: 1.45; font-size: 1.6rem;}
}

@media screen and (max-width: 320px) {
	.intro_area .contents .txt_area .tit {font-size: 3.2rem;}
	.intro_area .contents .txt_area .txt {margin: 14px 0 0; font-size: 1.4rem;}
    .intro_area .contents .app_down_area {margin: 40px 0 0;}
	.intro_area .contents .app_down_area .btn_link {width: 120px; height: 39px;}
	.intro_area .contents .app_down_area .btn_link.btn_google {background-size: 88px;}
    .intro_area .contents .app_down_area .btn_link.btn_apple {margin-left: 10px; background-size: 75px;}
	.section1 .video_wrap .btn_mute {bottom: 92px; left: 30px; right: auto; width: 48px; height: 48px;}
    .service_area .m_ver .icon_wrap {margin: 10px 0 0; padding: 0 10px;}
    .event_area .contents .icon_wrap {padding: 0 22.5px;}
}