@charset "UTF-8";
@import "reset.css";
@import "layout.css";

.roboto {
    font-family: 'Roboto' !important;
    letter-spacing: 0 !important;
}

/* color */
.fc_orange {
    color: #ed503c !important;
}

/* align */
.agl {
    text-align: left !important
}

.agr {
    text-align: right !important
}

.agc {
    text-align: center !important
}

/* sticky-btm-wrap */
.sticky-btm-wrap [data-sticky-btm].non-fixed {
    position: relative;
}

.sticky-btm-wrap [data-sticky-btm] {
    z-index: 1000000;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.app-down {
    display: block;
    padding: 0 30px;
    line-height: 60px;
    text-align: center;
    background-image: linear-gradient(to right, #e53649, #ed503c);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

/* section1 */
.section1 {
    position: relative;
    padding-top: 84px;
}

.section1 .main-text {
    text-align: center;
    font-size: 27px;
    line-height: 32px;
    color: #222;
}

.section1 .phone-visual {
    position: relative;
    height: 120vh;
    overflow: hidden;
}

.section1 .phone {
    z-index: 21900;
    position: absolute;
    top: -10vh;
    left: 50%;
    height: auto;
    width: 68vw;
    margin-left: -34vw;
}

.section1 .phone .inner {
    width: 68vw;
    height: calc(100vh - 60px - 55px);
    overflow: hidden;
}

.section1 .phone .inner img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

.section1 .sq-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px - 55px);
    overflow: hidden;
}

.section1 .sq {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100vh;
    margin: -50vh 0 0 -100vw;
    overflow: hidden;
    width: 200vw;
}

.section1 .sq:after {
    content: '';
    display: block;
    clear: both;
}

.section1 .sq .sq-inner {
    height: 100vh;
    width: 200vh
}

.section1 .sq ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: center;
    align-content: center;
    overflow: hidden;
    height: 200vh;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    width: 200vw;
}

.section1 .sq img {
    width: 100%;
}

.section1 .sq li {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: calc(197vw / 4);
    height: auto;
    overflow: hidden;
    margin-left: 1vw;
    opacity: 0;
}

.section1 .sq li:nth-child(4n+1) {
    margin-left: 0;
}

.section1 .sq li:nth-child(n+5) {
    margin-top: 1vw;
}

.section1 .sq li img {
    vertical-align: top;
}

.sq-sticky {
    margin-top: -20vh;
}

.section-text {
    text-align: center;
    font-size: 27px;
    color: #222;
    line-height: 31px;
    word-break: keep-all;
}

.section-text2 {
    text-align: center;
    font-size: 24px;
    color: #222;
    line-height: 29px;
    word-break: keep-all;
}

.section-text2+.section-text2 {
    margin-top: 7px;
}

.section-text2+.sub-text {
    margin-top: 16px;
}

.num-cout {
    text-align: center;
    font-size: 18px;
    color: #222;
    word-break: keep-all;
}

.num-cout strong {
    display: inline-block;
    font-size: 40px;
    line-height: 40px;
}

.sub-text {
    margin-top: 5px;
    text-align: center;
    word-break: keep-all;
}

.sub-text2 {
    font-size: 18px;
    text-align: center;
    word-break: keep-all;
    color: #222;
}

.img-box {
    text-align: center;
}

.txt-cell {
    padding: 65px 15px;
}

.link-txt {
    display: block;
    font-size: 18px;
    padding: 12px 0 0;
    color: #ed503c;
}

.link-txt+.link-txt {
    padding-top: 4px;
}

/* swiper */
.swiper-slide {
    padding-bottom: 50px;
    text-align: center;
}

.swiper-slide a {
    display: block;
    text-align: center;
}

.swiper-slide img {
    position: relative;
    z-index: 2;
    vertical-align: top;
    margin: 0 1px;
}

.swiper-button-group {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 5;
}

.swiper-button-group [class^=swiper-button-] {
    left: 5%;
    width: 15px;
    height: 28px;
    background: url(../images/arrow_gray.png) no-repeat 0 / 30px;
    background-position: 0 100%;
}

[class^=swiper-button-].swiper-button-disabled {
    background-position: 0 0;
}

[class^=swiper-button-].swiper-button-next {
    left: auto;
    right: 5%;
    background-position: 100% 100%;
}

.swiper-pagination-fraction {
    bottom: 40px;
    font-size: 12px;
    color: #444;
}

.swiper-pagination-fraction .swiper-pagination-current {
    font-weight: bold;
}

/* video */
.video-title {
    display: block;
    text-align: center;
    font-size: 16px;
    color: #ed503c;
    font-weight: bold;
}

.video-txt {
    margin-top: 10px;
    text-align: center;
    line-height: 1.6;
}

.video {
    position: relative;
    width: 191px;
    height: 401px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 9px 6px 13px 5px;
}

.video:after {
    content: "";
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/mockup_video.png) no-repeat 0 / cover;
}

.video:before {
    content: "";
    z-index: 2;
    position: absolute;
    top: -33px;
    left: -18px;
    display: block;
    width: 281px;
    height: 454px;
    background: url(../images/mockup_video_shadow.png) no-repeat 0 / cover;
}

.video video {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 8px;
    z-index: 10;
}

.video2 {
    position: relative;
    width: 268px;
    height: 405px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 14px 16px 0px 16px;
}

.video2:after {
    content: "";
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/mockup_tablet_video.png) no-repeat 0 / cover;
}

.video2:before {
    content: "";
    z-index: 2;
    position: absolute;
    top: -49px;
    left: -49px;
    display: block;
    width: 381px;
    height: 507px;
    background: url(../images/mockup_tablet_video_shadow.png) no-repeat 0 / cover;
}

.video2 video {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 8px;
    z-index: 10;
}

.video3 {
    top: 123px;
    position: relative;
    width: 191px;
    height: 401px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 9px 6px 13px 5px;
}

.video3:after {
    content: "";
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/mockup_video.png) no-repeat 0 / cover;
    background-size: 191px 382px;
    background-position-y: 1px;
}

.video3:before {
    content: "";
    z-index: 2;
    position: absolute;
    top: -33px;
    left: -18px;
    display: block;
    width: 281px;
    height: 454px;
    background: url(../images/mockup_video_shadow.png) no-repeat 0 / cover;
}

.video3 video {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 8px;
    z-index: 10;
}

/* section2 */
.section2 {
    padding: 0 15px 91px;
}

.section2 .section-text:after {
    content: "";
    display: block;
    width: 1px;
    height: 180px;
    margin: 48px auto 44px;
    background: #222;
}

.section2 .sub-text {
    font-size: 26px;
}

/* section3 */
.section3 .sub-text {
    margin-top: 22px;
}

.section3 .sub-text+.sub-text {
    margin-top: 12px;
}

/* section4 section5 */
.section4 {
    /* padding-top:75px; */
}

.section5 .img-box,
.section4 .img-box {
    padding: 0 20px;
}

.section5 .txt-cell,
.section4 .txt-cell {
    padding: 22px 15px 46px;
}

/* section6 */
.section6,
.partner {
    padding: 72px 0 60px;
    background: url(../images/section06_bg.jpg) repeat-x top center;
}

.section6 {
    /* margin-top:25px; */
}

.section6 .video-title,
.partner .video-title {
    margin-top: 35px;
}

.section6 .video-txt,
.section6 .video-txt {
    margin-top: 7px;
}

.section6 .video,
.partner .video {
    margin-top: 27px;
}

.section6 .swiper-container,
.partner .swiper-container {
    margin-top: 20px;
    padding-top: 45px;
}

.section6 .swiper-pagination,
.partner .swiper-pagination {
    bottom: 0%;
    /* bottom:auto; */
}

.section6 .swiper-pagination-bullet,
.partner .swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 17px !important;
    background: #fff;
    border: 2px solid #ed503c;
    box-sizing: border-box;
    opacity: 1;
}

.section6 .swiper-pagination-bullet-active,
.partner .swiper-pagination-bullet-active {
    background: #ed503c;
}

.section6 .swiper-pagination-bullet+.swiper-pagination-bullet:before,
.partner .swiper-pagination-bullet+.swiper-pagination-bullet:before {
    content: "";
    position: absolute;
    left: -32px;
    top: 3px;
    display: block;
    width: 25px;
    height: 1px;
    background: #ed503c;
}

/* section7 */
.section7 {
    position: relative;
}

.section7:before {
    z-index: 2;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 100vw;
    max-width: 100%;
    height: 100vw;
    max-height: 375px;
    background: url(../images/section07_bg.jpg) no-repeat top center / contain;
    transform: translateX(-50%);
}

.section7:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 100vw;
    max-width: 100%;
    height: 100vw;
    max-height: 375px;
    background: url(../images/section07_bg_after.jpg) repeat-x top center / contain;
    transform: translateX(-50%);
}

.section7 .swiper-container {
    z-index: 5;
}

.section7 .swiper-slide {
    padding: 75px 0 105px;
}

.section7 .swiper-pagination {
    bottom: 60px;
}

.section7 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 10px;
    background: #ddd;
    opacity: 1;
}

.section7 .swiper-pagination-bullet-active {
    background: #e74e3a;
}

.section7 .section-text2 {
    margin-top: 33px;
}

/* section8 */
.section8 {
    padding: 73px 0 0;
    background: #fbfbfb;
}

.section9 .swiper-container,
.section8 .swiper-container {
    /* margin-top:10px; */
}

.section8 .swiper-slide .swiper-inner {
    position: relative;
    max-width: 750px;
    max-height: 772px;
    margin: 0 auto;
}

.section8 .swiper-slide .swiper-inner .swiper-img {
    width: 100%;
}

.section8 .swiper-slide .swiper-inner .swiper-inner-text {
    position: absolute;
    top: 3.4%;
    left: 13.25%;
    width: 58.74%;
    height: 70%;
    text-align: left;
    z-index: 3;
}

.section8 .swiper-slide .swiper-inner .swiper-inner-text .inner-title {
    width: 80%;
    padding-top: 14%;
    margin: 0 auto;
    font-size: 3.5vw;
    font-weight: bold;
    line-height: 1.4;
    max-height: 14.75vw;
    overflow: hidden;
}

.section8 .swiper-slide .swiper-inner .swiper-inner-text .inner-subtitle {
    width: 80%;
    margin: 0 auto;
    padding-top: 4%;
    font-size: 3vw;
    line-height: 1.75;
    max-height: 25.5vw;
    overflow: hidden;
}

.section8 .swiper-slide .swiper-inner .swiper-inner-text .inner-name {
    position: absolute;
    bottom: 10.5%;
    left: 11%;
    width: 50%;
    font-size: 3vw;
    font-weight: bold;
}

.swiper-dosa-img {
    position: absolute !important;
    top: 57.9%;
    left: 51%;
    width: 36.4%;
    height: auto;
    max-width: 270px;
}

.text-overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* section9 */
.section9 {
    padding: 73px 0 0;
    background-image: linear-gradient(to bottom, #e53649, #ed503c);
}

.section9 .section-text {
    color: #fff;
}

.section9 .section-text strong {
    color: #fcff14;
}

.section9 .sub-text {
    color: #fff;
}

.section9 .swiper-button-group [class^=swiper-button-] {
    background-image: url(../images/arrow_white.png);
}

.section9 .swiper-pagination-fraction {
    color: #fff;
}

/* section10 */
.section10 {
    padding: 50px 49px 79px;
}

/* section11 */
.section11 {
    padding: 0 15px 91px;
}

.section11 .section-text:after {
    content: "";
    display: block;
    width: 1px;
    height: 180px;
    margin: 48px auto 44px;
    background: #222;
}

.section11 .sub-text {
    font-size: 26px;
}

/* section12 */
.section12 {
    padding: 0 15px 15px;
}

.section12 .section-text:after {
    content: "";
    display: block;
    width: 1px;
    height: 110px;
    margin: 48px auto 44px;
    background: #222;
}

.section12 .sub-text {
    font-size: 26px;
}

.partnership-list dt {
    padding-top: 35px;
    font-size: 24px;
    line-height: 31px;
    text-align: left;
}

.partnership-list dd {
    margin-top: 16px;
    padding-bottom: 35px;
}

.partnership-list dd+dt {
    border-top: 1px solid #ddd;
}

.partnership-list .link-txt {
    font-size: 14px;
}

/* partner */
.partner {
    background: url(../images/partner01_bg.jpg) repeat-x;
}

/* partner2 */
.partner2 {
    padding: 60px 0;
}

/* terms */
.terms-wrap {
    overflow: hidden;
    padding: 0 20px 92px;
    counter-reset: num;
}

.terms-title {
    margin-top: 54px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    font-size: 24px;
    font-weight: 400;
    color: #222;
    position: relative;
}

.terms-title>div {
    display: inline-block;
    font-size: 0;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-60%);
}

.terms-select {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    color: #aaaaaa;
    margin-top: 17px;
    border-radius: 2px;
}

.terms-select .select-title {
    position: relative;
    padding: 10px 0px;
    text-indent: 10px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    color: #aaa;
    font-weight: 400;
    background-image: url(../images/arrow_down2.png);
    background-size: 16px 10px;
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-color: #ffffff;
}

.terms-select .select-option {
    position: absolute;
    width: calc(100% - 2px);
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding: 13px 0px;
    max-height: 155px;
    overflow-y: scroll;
    background-color: #ffffff;
    z-index: 1;
    border-radius: 3px;
}

ul.select-option {}

.terms-select .select-option li {
    margin-bottom: 15px;
    text-indent: 10px;
}

.terms-select .select-option li:last-child {
    margin-bottom: 0px;
}

.terms-num-title {
    margin-top: 41px;
    font-size: 14px;
    color: #222;
}

.terms-num-title:before {
    counter-increment: num;
    content: "제 "counter(num)"조";
    display: inline-block;
}

.terms-txt {
    margin-top: 6px;
    font-size: 12px;
    color: #444;
    line-height: 19px;
}

/* .refund-main-title {margin-top: 15px;padding-bottom: 8px;border-bottom: 1px solid #ddd;font-size: 24px;font-weight: 400;color: #222;position: relative;} */
.refund-title {
    margin-top: 41px;
    font-size: 14px;
    color: #222;
}

.round-num-list {
    margin-top: 8px;
    counter-reset: roundNum 0;
}

.round-num-list>li {
    position: relative;
    padding-left: 17px;
    font-size: 12px;
    line-height: 19px;
    color: #444;
}

.round-num-list>li:before {
    position: absolute;
    top: 4px;
    left: 0;
    /* counter-increment:roundNum; */
    content: counter(roundNum);
    /* display:inline-block; */
    /* width: 12px; */
    /* height: 12px; */
    font-size: 12px;
    box-sizing: border-box;
    /* border:1px solid #444; */
    border-radius: 100%;
    /* text-align:center; */
    line-height: 11px;
}

.round-num-list>li:nth-child(1):before {
    content: '①';
}

.round-num-list>li:nth-child(2):before {
    content: '②';
}

.round-num-list>li:nth-child(3):before {
    content: '③';
}

.round-num-list>li:nth-child(4):before {
    content: '④';
}

.round-num-list>li:nth-child(5):before {
    content: '⑤';
}

.round-num-list>li:nth-child(6):before {
    content: '⑥';
}

.round-num-list>li:nth-child(7):before {
    content: '⑦';
}

.round-num-list>li:nth-child(8):before {
    content: '⑧';
}

.round-num-list>li:nth-child(9):before {
    content: '⑨';
}

.round-num-list>li:nth-child(10):before {
    content: '⑩';
}

.round-num-list>li:nth-child(11):before {
    content: '⑪';
}

.round-num-list>li:nth-child(12):before {
    content: '⑫';
}

.round-num-list>li:nth-child(13):before {
    content: '⑬';
}

.round-num-list>li:nth-child(14):before {
    content: '⑭';
}

.round-num-list>li:nth-child(15):before {
    content: '⑮';
}

.round-num-list>li:nth-child(16):before {
    content: '⑯';
}

.round-num-list>li:nth-child(17):before {
    content: '⑰';
}

.round-num-list>li:nth-child(18):before {
    content: '⑱';
}

.round-num-list>li:nth-child(19):before {
    content: '⑲';
}

.round-num-list>li:nth-child(20):before {
    content: '⑳';
}

/*  */

.num-list {
    counter-reset: num2 0;
    margin-top: 7px;
}

.num-list>li {
    position: relative;
    padding-left: 17px;
    font-size: 12px;
    line-height: 19px;
    color: #444;
}

.num-list>li:before {
    position: absolute;
    top: 0;
    left: 0;
    counter-increment: num2;
    content: counter(num2)".";
    display: inline-block;
}

.bullet-list>li,
.line-list>li {
    position: relative;
    padding-left: 8px;
    font-size: 12px;
    line-height: 19px;
    color: #444;
}

.bullet-list>li+li,
.line-list>li+li {
    margin-top: 2px;
}

.bullet-list>li:before {
    position: absolute;
    top: 10px;
    left: 0;
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background: #444;
    border-radius: 100%;
}

.line-list>li:before {
    position: absolute;
    top: 12px;
    left: 0;
    content: "";
    display: block;
    width: 3px;
    height: 1px;
    background: #444;
}

/* error */
.error {
    position: relative;
    padding: 45px 0 42px 0;
    border: 1px solid #ddd;
    margin: 62px 20px;
}

.error:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: url(../images/error.png) no-repeat 0 / cover;
}

.error .title {
    display: block;
    margin-top: 15px;
    text-align: center;
    color: #222;
}

.error .txt {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #444;
}

.link-box {
    margin-top: 23px;
}

.link-box a {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #888;
}

.btn-top {
    z-index: 1000;
    position: fixed;
    bottom: 65px;
    right: 15px;
    display: block;
    width: 15%;
}

/* device height > 750px */
@media (min-width: 750px) {
    .section8 .swiper-slide .swiper-inner .swiper-inner-text .inner-title {
        width: 80%;
        padding-top: 14%;
        margin: 0 auto;
        font-size: 26px;
        font-weight: bold;
        line-height: 1.5;
        max-height: 115px;
        overflow: hidden;
    }

    .section8 .swiper-slide .swiper-inner .swiper-inner-text .inner-subtitle {
        width: 80%;
        margin: 0 auto;
        padding-top: 4%;
        font-size: 23px;
        line-height: 1.6;
        max-height: 185px;
        overflow: hidden;
    }

    .section8 .swiper-slide .swiper-inner .swiper-inner-text .inner-name {
        position: absolute;
        bottom: 10.5%;
        left: 11%;
        width: 50%;
        font-size: 24px;
        font-weight: bold;
    }
}