/****** reset ******/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{
margin:0;padding:0;}
fieldset,img{border:0;height:auto;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0 0 1em 0;}
header, section, article, footer, article, aside, time ,nav { display: block; }
figure{ line-height:0;}


/****** base ******/
* { box-sizing: border-box; }
html { overflow-y: scroll; }
body {
	color: #fff;
	font-family: 'Noto Sans JP',"MS PGothic","Osaka",Arial,sans-serif;
    font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
    font-feature-settings : "palt";
}

a { color:#1878d4; text-decoration: none; outline: none; transition: 0.3s; }
a.line { text-decoration: underline; }
a:hover { color: #238ce0;}
a.active { color: #1878d4; }
a:hover img { opacity: 0.9; }
.pc_only { display: block !important; }
.sp_only { display: none !important; }
#container { position: relative;}
.sp-nav { display: none; }
@media only screen and (max-width: 1050px) {
  .pc_only2 { display: none !important; }
  .sp_only2 { display: block !important; }
}
@media only screen and (max-width: 768px) {
  body { background-image: none; }
  body::before { content: ""; position: fixed; top: 0px; left: 0px; background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1; }
  .pc_only { display: none !important; }
  .sp_only { display: block !important; }

  #container{ background-image: none;}
}

/****** common ******/
main { display: block; padding-top:3.5vw;  }

.section-wrap { width: 90%; margin: 0px auto 180px; }
.content-wrap { width: 100%; margin: 0px auto; }

.flex-box { display: flex; }
.tit { font-size: 60px; font-family: Poppins, 'Noto Sans JP',"MS PGothic","Osaka",Arial,sans-serif; line-height: 1em; color: rgb(118, 137, 166); position: relative; }
.tit::before { content: ""; position: absolute; font-size: 14px; font-weight: bold; bottom: -60px; }

#news .tit, #release .tit { margin-right: 40px;  }
#about .tit, #use .tit, #system .tit { text-align: center; margin-bottom: 80px; }
#about .tit::before, #use .tit::before, #system .tit::before { left: 50%; transform: translateX(-50%); }
#news .tit::before {content: "お知らせ";top: 38px;}
#release .tit::before { content: "リリース"; top: 50px; }
#about .tit::before { content: "WANNAGOの仕組み"; }
#use .tit::before { content: "WANNAGOの使い方"; }
#system .tit::before { content: "旅日記 還元システム"; }

.start-button a, .member-button a { display: block;  background: linear-gradient(90deg, rgb(37, 144, 227) 0%, rgb(2, 79, 188) 100%); color: rgb(255, 255, 255); text-decoration: none; }

.app .app-button a:hover{opacity: 0.8;}
.btn:hover{transform: scale(1.05);}

@media only screen and (max-width: 768px) {
  .section-wrap {width: 92%;margin: 0px auto 100px;}
  .flex-box { display: block; }
  .tit { font-size: 40px;  }
  .tit::before { font-size: 14px; bottom: -43px; }
  #news .tit, #release .tit{ margin-right: 0px; text-align: center; margin-bottom: 50px; }
  #about .tit, #use .tit, #system .tit { margin-bottom: 70px; }
  #news .tit::before, #release .tit::before { left: 50%; transform: translateX(-50%); }
}

/****** header ******/
header.top_head { display: flex; justify-content: space-between; background: rgb(255, 255, 255); width: 100%; position: fixed; top: 0; left: 0; z-index: 10; }

.head_logo{ margin-left: 1%;}
.head_logo a { display: flex;height: 100%; align-items: center; justify-content: center;}
.head_logo img { width: 3.4vw; }
.head_text { font-size: 1.2vw; line-height: 1em; font-family: Poppins, sans-serif; display: flex; align-items: center; margin: 0 0 0 0.5em;}

.button-wrap #toggle{ display: none;}
.button-wrap #menu ul { display: flex; align-items: center;}
.button-wrap #menu ul li a { color: rgb(118, 137, 166); font-size: 14px;  display: block; font-weight: bold;}
.button-wrap #menu ul li { margin-right: 2em; }

.button-wrap #menu ul li.login{ margin-right: 1.5vw;}
.button-wrap #menu ul li.login a { background: rgb(255, 255, 255); color:rgb(35, 140, 224); display: flex; padding: 0.5em 3em;  border-radius: 5px; letter-spacing: 0.1em; font-size: 14px;  align-items: center;border:1px solid rgb(35, 140, 224);}
.button-wrap #menu ul li.login a::before {content: ""; background: url(../images/icon_login_blue.svg) 0% 0% / contain no-repeat; width: 1em; height: 1em; display: block; }
.button-wrap #menu ul li.login a:hover{ background: rgb(35, 140, 224); color:#fff; }
.button-wrap #menu ul li.login a:hover::before{content: ""; background: url(../images/icon_login_white.svg) 0% 0% / contain no-repeat;width: 1em; height: 1em; display: block; }

.button-wrap #menu ul li.start-button { margin-right: 0; position:relative;}
.button-wrap #menu ul li.start-button a { color: rgb(255, 255, 255); font-size: 1vw; padding: 1em 3em; display: flex; align-items: center; line-height: 1.5em;}
.button-wrap #menu ul li.start-button a::after { display: inline-block;content: ""; background: url("../images/btn_arrow_white_short.svg"); width: 1em; height: 1em; background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: 0.5em;}
.button-wrap #menu ul li.start-button a:hover{transform: scale(0.9);}

@media only screen and (max-width: 1440px) {
.head_logo img { width: 42px; }
.head_text { font-size: 18px;}
.button-wrap #menu ul li.start-button a { font-size: 16px; justify-content: center;}

main{ padding-top: 56px;}
}

@media only screen and (max-width: 768px) {
.button-wrap #toggle{ display: block;}
.button-wrap #menu ul { display: none;}

  #toggle { background: rgb(255, 255, 255); position: fixed; top: 0px; right: 0px; height: 50px; width: 50px; transition: all 0.2s ease 0s; z-index: 11; }
  #toggle .button { background: rgb(24, 120, 212); height: 3px; position: absolute; top: 25%; left: 20%; transition: all 0.3s ease 0s; width: 60%; border-radius: 20px; }
  #toggle .button::before, #toggle .button::after { background: rgb(24, 120, 212); content: ""; display: block; height: 3px; position: absolute; top: 50%; right: 0px; transition: all 0.3s ease 0s; border-radius: 20px; }
  #toggle .button::before { margin-top: 10px; width: 80%; }
  #toggle .button::after { margin-top: 22px; width: 60%; }
  #toggle .close { background: transparent; top: calc(50% - 4px); }
  #toggle .close::before, #toggle .close::after { margin-top: 0px; }
  #toggle .close::before { transform: rotate(-45deg); width: 100%; }
  #toggle .close::after { transform: rotate(-135deg); width: 100%; }

  #menu { opacity: 0;}
  #menu.open { opacity: 1; transition: all 0.5s ease 0s; background: rgba(0, 0, 0, 0.2); height: 100vh; position: fixed; top: 0px; left:0; width: 100%; z-index: 0; display: block !important; }

  .nav-menu { display: none; }
  #menu.open .nav-menu { display: block; padding-top: 70px; }
  .nav-menu { background: rgb(255, 255, 255); padding: 40px 4%; position: relative; }
  .nav-menu::before {    content: "";position: absolute;width: 100%;height: 14vw;bottom: -13.5vw;left: 0px;background-image: url(../images/sp_menu_bottom.svg); background-size: cover; background-repeat:no-repeat;}
  .nav-menu li:not(:last-of-type) { margin-bottom: 10px; }

  header.top_head { height: 50px;}
  header.top_head .head_logo{ margin-left: 3%; position: relative; z-index: 10;}
  header.top_head .head_logo img{ width: 36px;}
  header.top_head .head_text{ font-size: 14px;}

  .button-wrap { }
  .button-wrap #menu ul li{ margin-right: 0;}
  .button-wrap #menu ul li a{ padding: 0.5em 0; text-align: center;}
  .button-wrap #menu ul li.login{ margin-right: 0;}
  .button-wrap #menu ul li.login a{ justify-content: center; padding: 1em 0; background: none; color:rgb(35, 140, 224); }
  .button-wrap #menu ul li.login a::before{background: url(../images/icon_login_blue.svg); background-size: contain; background-repeat: no-repeat; height: 1.5em; width: 1.5em; margin-right: 0.5em;}

main{ padding-top: 50px; width: 100%; overflow: hidden;}
}

/****** main-visual ******/
#main-visual { position: relative;background: url("../images/main_bg.svg") center top / 100% no-repeat; width: 100%; margin-bottom: 5vw; min-height: 48vw;}
#main-visual:before{ content: ""; display: block; background-image: url("../images/main_circle_blue.svg"); background-size: contain; background-repeat: no-repeat;width: 30vw; height: 30vw; position: absolute; top: 0; left: -5vw;}

#main-visual .top-wrap { position: relative; width: 100%;margin: 0px auto;  padding-bottom: 50px; display: flex; align-items: center;}
#main-visual .top-wrap .title-box { position: relative; left: 5vw; z-index: 2; color: rgb(24, 120, 212); width: 40vw; }
#main-visual .top-wrap .title-box .sub-title { font-size: 1.5vw; font-family: "Noto Sans JP", sans-serif; line-height: 1.4em; }
#main-visual .top-wrap .title-box .title { font-size: 4.2vw; line-height: 1em; position: relative; font-family: Poppins, 'Noto Sans JP',"MS PGothic","Osaka",Arial,sans-serif; margin-bottom: 4vw;}
#main-visual .top-wrap .title-box .title::before { content: "ワナゴージャパン"; position: absolute; font-size: 0.2em; line-height: 1em; font-weight: bold; bottom: -1.8em; left: 0; }
#main-visual .top-wrap .title-box .member-button a { border: 1px solid rgb(24, 120, 212); background: rgb(255, 255, 255); color: rgb(24, 120, 212); border-radius: 5px; }

#main-visual a.btn {  border-radius: 5px; text-align: center; font-size: 1.1vw; line-height: 2.4em; position: relative; width: 70%; padding: 1em 0; }
#main-visual a.btn::before { position: absolute; content: ""; background: url("../images/btn_arrow_white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center;width: 3em; height:1em; top: 50%; right: 5%; transform: translate3d(0px, -50%, 0px); }
#main-visual .top-wrap .title-box .member-button a::before { background-image: url("../images/btn_arrow_blue.svg"); }

#main-visual .top-wrap .title-box .start-button{ margin-bottom: 1vw; }
#main-visual .top-wrap .title-box .member-button{ margin-bottom: 2vw; }
#main-visual .top-wrap .title-box .app, #bottom-button .flex-box .title-box .app { display: flex; }
#main-visual .top-wrap .title-box .app .app-button{ margin-right: 0.7vw; }
#main-visual .top-wrap .title-box .app .app-button img{ width: 100%;}

#main-visual .top-wrap .image-box{ width: 54vw; height: 47vw; margin-left:0; border-radius:34% 43% 60% 44% / 51% 55% 41% 47%; transform: translateY(-3vw); overflow: hidden; position: relative;}
#main-visual .top-wrap .image-box img{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;object-fit: cover;animation: 24s linear 0s infinite normal none running imageAnimation;color: transparent; background: 50% 50% no-repeat; opacity: 0; z-index: 0; }
#main-visual .top-wrap .image-box img:nth-child(1) {}
#main-visual .top-wrap .image-box img:nth-child(2) { animation-delay: 8s;}
#main-visual .top-wrap .image-box img:nth-child(3) { animation-delay: 16s;}
#main-visual .top-wrap .phone { position: absolute;  z-index: 2; right: 6vw; width: 15vw; bottom: -3vw; }
#main-visual .top-wrap .phone img{ width: 100%;}

.parallax .ball { position: absolute; z-index: 9; }
.parallax .ball img { width: 100%; }
.parallax .ball.ball01 { bottom: 8%; left: 8%; width: 3vw; }
.parallax .ball.ball02 { bottom: 15%; left:50%; width: 6.5vw; transform: translate(-50%,0)}
.parallax .ball.ball03 { top: 3%; right: 9.5%; width: 4vw; }

@media only screen and (max-width: 768px) {
  #main-visual {background: rgb(236, 241, 250);margin-bottom: 30vw; }
  #main-visual::before{ width: 70vw; height: 70vw; top: 53vw; left: inherit; right: -10vw;}
  #main-visual .top-wrap{ display: inherit; padding-bottom: 5vw}
  #main-visual .top-wrap .image-box{ position: absolute; top: 0; left: -8vw; width: 96%; height: 77vw;border-radius:10% 24% 60% 44% / 53% 59% 41% 47%;}
  #main-visual .top-wrap .image-box .side-show li span { width: 100%; height: 80vw; position: absolute; top: 0px; left: 0px; color: transparent; background: 50% 50% no-repeat; opacity: 0; z-index: 0; animation: 24s linear 0s infinite normal none running imageAnimation;}
  #main-visual .top-wrap .title-box{ width: 90%; left: 0; padding-top: 80vw; margin: 0 auto;}
  #main-visual .top-wrap .title-box .sub-title{ font-size: 4.2vw; font-weight: bold; line-height: 1.7em;}
  #main-visual .top-wrap .title-box .title{ font-size:9.5vw; margin-bottom: 1.4em;}
  #main-visual .top-wrap .title-box .title::before{ bottom: -2.5em;    font-size: 0.3em;}
  #main-visual a.btn{ width: 100%; font-size: 4.2vw; padding: 1.2em 0; line-height: 1.6em;}
  #main-visual .top-wrap .title-box .start-button{ margin-bottom: 4vw;}
  #main-visual .top-wrap .title-box .member-button{ margin-bottom: 10vw;}
  #main-visual .top-wrap .title-box .app{ padding: 0 5%;}
  #main-visual .top-wrap .title-box .app .app-button{ margin: 0 2.5%;}
  #main-visual .top-wrap .phone{ width: 30vw; bottom: inherit; top: 31vw;}
  #main-visual:after{position: absolute;content: ""; background: url(../images/main_bg_bottom_sp.svg) center top / cover no-repeat; width: 100%; height: 14vw; bottom: -13.8vw; left: 0px;}

  .parallax .ball.ball01 { width: 0px; }
  .parallax .ball.ball02 { width: 0px; }
  .parallax .ball.ball03 { width: 0px; }
}


/****** concept ******/
#concept { font-family: "Noto Sans JP", sans-serif; }
#concept .content-wrap { text-align: center;font-size: 16px; line-height: 2em; color: rgb(118, 137, 166); }
#concept .content-wrap p{ margin-bottom: 2em;}
#concept .content-wrap .main-concept { font-size: 36px; font-weight: 500; line-height: 1em; color: rgb(24, 120, 212); margin-bottom: 1em }
#concept .content-wrap .main-concept .small { font-size: 0.8em; }
#concept .content-wrap .sub-concept { font-size: 18px; font-weight: 500; line-height: 1.8em; color: rgb(24, 120, 212); margin-bottom: 2em; }

#concept .img-block { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;  }
#concept .img-block img{ width: 100%;}
#concept .img-block .concept_img { flex-basis: 31.3%;  margin-bottom: 36px; }
#concept .img-block .concept_img p { color: rgb(118, 137, 166); font-size: 14px; line-height: 1.5em; margin-top: 4px; margin-bottom: 0;}
#concept .img-block .concept_img:nth-child(3n+2) {  position: relative; top: 150px;}


@media only screen and (max-width: 768px) {
  #concept .content-wrap {margin-bottom: 40px; }
  #concept .content-wrap .main-concept {font-size: 22px;}
  #concept .content-wrap .sub-concept {font-size: 16px;margin-bottom: 30px;}
  #concept .content-wrap .catch-content { font-size: 16px; line-height: 2em;  }

  #concept .img-block .concept_img{flex-basis:49%; margin-bottom: 20px;}
  #concept .img-block .concept_img:nth-child(3n+2){ top: 0;}
  #concept .img-block .concept_img:nth-child(2n){ position: relative; top: 25vw;}
  #concept .img-block .concept_img p{ font-size: 12px;}

}

/****** news ******/
.news-wrap { display: flex; max-width: 928px; }
.news-wrap .content-wrap .news-list { color: rgb(118, 137, 166); }
.news-wrap .content-wrap .news-list dl { border-top: 1px solid rgb(192, 205, 226); display: flex; width: 100%; padding: 20px 0px; }
.news-wrap .content-wrap .news-list dl:last-of-type { border-bottom: 1px solid rgb(192, 205, 226); }
.news-wrap .content-wrap .news-list dl dt { margin-right: 5%; }
.news-wrap .content-wrap .news-list { }

@media only screen and (max-width: 768px) {
  .news-wrap.section-wrap {display: block;}
  .news-wrap .content-wrap .news-list dl { display: block; font-size: 16px; }
  .news-wrap .content-wrap .news-list dl dt { margin-right: 0px; margin-bottom: 10px; }
}

/****** about ******/
#about.section-wrap{max-width: 1200px; }
#about .content-wrap { color: rgb(255, 255, 255); font-family: "Noto Sans JP", sans-serif; width: 100%; }
#about .content-wrap .flex-box .box03 { padding: 30px 0px 28px 10px; box-sizing: border-box;  overflow: inherit!important; width: 25%;}
#about .content-wrap .flex-box .box03:first-of-type{padding: 30px 5px 28px 30px;}
#about .content-wrap .flex-box .box03 .stit { font-size:42px; font-weight:500; line-height:1em;text-align: center; margin-bottom: 23px; }
#about .content-wrap .flex-box .box03 .main-text { font-size: 18px; line-height: 1.6em; margin-bottom: 8px; text-align: center;}
#about .content-wrap .flex-box .box03 .sub-text { font-size: 14px; line-height: 1.6em; margin-bottom: 0px; letter-spacing: 0.84px; }
#about .content-wrap .flex-box .box03 .icon { margin-bottom: 10px; text-align: center;}
#about .content-wrap .flex-box .box03 .icon img { height: 58px; }
#about .content-wrap .flex-box .box03.plan01 { background: rgb(66, 165, 244); position: relative; }
#about .content-wrap .flex-box .box03.plan02 { background: rgb(35, 140, 224); position: relative; }
#about .content-wrap .flex-box .box03.plan03 { background: rgb(24, 120, 212); position: relative; }
#about .content-wrap .flex-box .box03::before { content: ""; position: absolute; width: 45px; height: 294px; right: -44px; top: 50%; transform: translateY(-50%); }
#about .content-wrap .flex-box .box03::after { content: ""; position: absolute; width: 45px; height: 294px; left: -43px; top: 50%; transform: translateY(-50%); }
#about .content-wrap .flex-box .arrow-back{width: 5%;z-index: -1;}
#about .content-wrap .flex-box .arrow-front{ margin-right: -2%; z-index: -1; width: 5%;}
#about .content-wrap .flex-box .arrow img{height: 100%;width: 100%;}


@media only screen and (max-width: 768px) {
  #about .content-wrap .flex-box .box03 { flex-basis: 100%; max-width: inherit; width: 100%; margin-right: 0px; margin-bottom: 16vw;position: relative;padding: 30px 20px 28px;margin-bottom: 16vw; }
  #about .content-wrap .flex-box .box03:first-of-type{padding: 30px 20px 28px;}
  #about .content-wrap .flex-box .box03 .stit { font-size:36px;}
  #about .content-wrap .flex-box .arrow-front{ display: none;}
  #about .content-wrap .flex-box .arrow-back{ display: none;}
  #about .content-wrap .flex-box .box03::before { content: ""; position: absolute;width: 100%; height: 13vw; left: 0; top:inherit;bottom: -19.1vw;  background-size: 100%!important; }
  #about .content-wrap .flex-box .box03::after { content: ""; position: absolute; width: 100%; height: 13vw; left: 0; top: -6.2vw;  background-size: 100%!important; }
  #about .content-wrap .flex-box .box03.plan01::before { background: url("../images/about_flow01_front_sp.png") center top no-repeat; }
  #about .content-wrap .flex-box .box03.plan02::before { background: url("../images/about_flow02_front_sp.png") center top no-repeat; }
  #about .content-wrap .flex-box .box03.plan02::after { background: url("../images/about_flow02_back_sp.png") center top no-repeat; }
  #about .content-wrap .flex-box .box03.plan03::before { background: url("../images/about_flow03_front_sp.png") center top no-repeat; }
  #about .content-wrap .flex-box .box03.plan03::after { background: url("../images/about_flow03_back_sp.png") center top no-repeat; }
  #about .content-wrap .flex-box .box03 .main-text { font-size: 18px; line-height: 1.6em;  }
  #about .content-wrap .flex-box .box03 .sub-text { font-size: 14px; line-height: 1.6em;  }
}

/****** use ******/
.youtube{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}

#use.section-wrap{max-width: 1200px;}
#use .content-wrap { width: 100%; max-width: 928px; margin: 0px auto; }
#use .content-wrap .video-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 70px;}
#use .content-wrap .img-box { max-width: 126px; width: 100%; margin: 0px auto 18px; position: relative; margin-top: -100px;  }
#use .content-wrap .img-box::before { content: ""; position: absolute; width: 220px; height: 220px; background: rgb(236, 241, 250); border-radius: 50%; z-index: -1; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); }
#use .content-wrap .img-box:not(:last-of-type)::after{}

#use .content-wrap .box03 { flex-basis: 31%; max-width: 31%; }
#use .content-wrap .box03 img{ width: 100%;}
#use .content-wrap .box03:not(:last-of-type) { margin-right: 3.5%; position: relative; }
#use .content-wrap .box03:not(:last-of-type)::before { content: ""; position: absolute; background: url("../images/icon_arrow_blue.svg"); width: 12px; height: 18px; top: 32%; right: -20px; }
#use .content-wrap .number { font-size: 40px; line-height: 1.6em; font-family: Poppins, sans-serif; color: rgb(24, 120, 212); position: relative; letter-spacing: 2px; }
#use .content-wrap .number::before { position: absolute; content: ""; height: 2px; background: rgb(24, 120, 212); width: 50px; bottom: 3px; }
#use .content-wrap .main-text { color: rgb(118, 137, 166); font-size: 17px; font-weight: 600; margin-bottom: 12px; text-align: center;}
#use .content-wrap .sub-text { color: rgb(118, 137, 166); font-size: 14px; line-height: 1.7em; }

@media only screen and (max-width: 768px) {
  #use .content-wrap .video-wrap { margin-bottom: 40px;}
  #use .content-wrap .flex-box { width: 85%; margin: 0px auto; }
  #use .content-wrap .img-box {width: 45%; max-width: inherit;}
  #use .content-wrap .box03 { flex-basis: 100%; max-width: 100%;  margin-right: 0%!important; margin-bottom: 35px;}
  #use .content-wrap .box03::before { display: none;}
  #use .content-wrap .number {  }
  #use .content-wrap .number::before { position: absolute; content: ""; height: 2px; background: rgb(24, 120, 212); width: 50px; bottom: 3px; }
  #use .content-wrap .number.text-right { text-align: right; }
  #use .content-wrap .main-text {font-size: 18px;margin-bottom: 8px;}
  #use .content-wrap .sub-text{font-size: 16px; line-height: 1.5em;}
}

/****** system ******/
#system.section-wrap{max-width: 1200px;}
#system .content-wrap { width: 100%; }
#system img{ width: 100%;}
#system .pop-up { width: 47%; margin: 0px auto 50px; justify-content: space-between; }
#system .pop-up .img-text { transform: translate3d(12px, 24px, 0px); }
#system .content-wrap .box03 { flex-basis: 31%; max-width: 31%; position: relative; }
#system .content-wrap .box03::before { content: ""; position: absolute; width: 70px; height: 70px; left: 50%; top: -11%; transform: translate3d(-50%, 0px, 0px); }
#system .content-wrap .box03.box03:not(:last-of-type) { margin-right: 3.5%; }
#system .content-wrap .box03.system01::before { background: url("../images/icon_system_flow01.svg") center top no-repeat; }
#system .content-wrap .box03.system02::before { background: url("../images/icon_system_flow02.svg") center top no-repeat; }
#system .content-wrap .box03.system03::before { background: url("../images/icon_system_flow03.svg") center top no-repeat; }
#system .content-wrap .box03 .img-box { margin-bottom: 17px; border-radius: 10px; overflow: hidden; line-height: 0;}

#system .content-wrap .box03 .text-box { width: 85%; margin: 0px auto; color: rgb(118, 137, 166); background-color: rgb(255, 255, 255); }
#system .content-wrap .box03 .main-text { font-size: 17px; font-weight: bold; margin-bottom: 12px; letter-spacing: 1.08px; text-align: center;}
#system .content-wrap .box03 .sub-text { font-size: 14px; line-height: 1.7em; }


@media only screen and (max-width: 768px) {
  #system .content-wrap { width: 100%; }
  #system .pop-up { display: flex; width: 100%;  justify-content: center; margin-bottom: 40px; }
  #system .pop-up .img-text { transform: translate3d(0, 0, 0); max-width: inherit; width: 10%; }
  #system .pop-up .img-box { max-width: inherit; width: 60%; margin-right: 5%; }
  #system .content-wrap .box03 { flex-basis: 100%; max-width: 100%; color: rgb(118, 137, 166); }
  #system .content-wrap .box03.box03:not(:last-of-type) { margin-right: 0%; margin-bottom: 60px; }
  #system .content-wrap .box03 .main-text {font-size: 18px;margin-bottom: 8px;}
  #system .content-wrap .box03 .sub-text {letter-spacing: 0.84px;line-height: 1.5em;font-size: 14px;}
}


/****** catch ******/
#catch.catch-wrap { padding-bottom: 60vw; width: 80%; position: relative; margin: 0px auto 350px; }
#catch.catch-wrap img{ width: 100%;}
#catch.catch-wrap .main-text { position: absolute; font-size: 1.5vw; line-height: 1.5em; font-weight: 800; color: rgb(24, 120, 212); left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0px); text-align: center; }
#catch .content-wrap { position: relative; }
#catch .content-wrap .p01 { position: absolute; left: 9vw; top: 4vw; width: 11.5vw; }
#catch .content-wrap .p02 { position: absolute; right: 21vw; top: -2vw; width: 11.5vw; }
#catch .content-wrap .p03 { position: absolute; left: 23vw; top: 6vw; width: 17.8vw; }
#catch .content-wrap .p04 { position: absolute; right: 4vw; top: 5vw; width: 11.5vw; }
#catch .content-wrap .p05 { position: absolute; right: 17vw; top: 14vw; width: 11.5vw; }
#catch .content-wrap .p06 { position: absolute; left: 2vw; top: 18vw; width: 17.8vw; }
#catch .content-wrap .p07 { position: absolute; right: 0vw; top: 24vw; width: 17.8vw; }
#catch .content-wrap .p08 { position: absolute; left: 17vw; top: 34vw; width: 11.5vw; }
#catch .content-wrap .p09 { position: absolute; left: 5vw; top: 40vw; width: 11.5vw; }
#catch .content-wrap .p010 { position: absolute; right: 20vw; top: 36vw; width: 11.5vw; }
#catch .content-wrap .p011 { position: absolute; left: 23vw; top: 47vw; width: 17.8vw; }
#catch .content-wrap .p012 { position: absolute; right: 9vw; top: 47vw; width: 11.5vw; }
#catch .content-wrap figure .img-box { animation: 3s linear 0s infinite alternate none running big; overflow: hidden; margin-bottom: 20px; }
#catch .content-wrap figure img { }
#catch .content-wrap figure figcaption { text-align: center; color: rgb(118, 137, 166); font-size: 1vw; }

@media only screen and (max-width: 768px) {
  #catch.catch-wrap { width: 100%; padding-bottom: 0vw; height: 223vw; margin: 0px auto 50vw; }
  #catch.catch-wrap .main-text { font-size: 18px; width: 100%; }
  #catch .content-wrap .p01 { left: 8vw; top: 0vw; width: 29.3vw; }
  #catch .content-wrap .p02 { right: 6vw;top: -12vw;width: 33vw;}
  #catch .content-wrap .p03 { left: 36vw; top: 16vw; width: 39.2vw; }
  #catch .content-wrap .p04 { right: 3vw; top: 43vw; width: 24.5vw; }
  #catch .content-wrap .p05 { right: 25vw; top: 66vw; width: 33vw; }
  #catch .content-wrap .p06 { left: 3vw; top: 45vw; width: 42.8vw; }
  #catch .content-wrap .p07 { right: 5vw; top: 140vw; width: 45.8vw; }
  #catch .content-wrap .p08 { left: 6vw; top: 162vw; width: 31vw; }
  #catch .content-wrap .p09 { left: 16vw; top: 130vw; width: 30vw; }
  #catch .content-wrap .p010 { right: 34vw; top: 183vw; width: 30vw; }
  #catch .content-wrap .p011 { left: 9vw; top: 209vw; width: 32vw; }
  #catch .content-wrap .p012 { right: 7vw; top: 216vw; width: 40.5vw; }
  #catch .content-wrap figure .img-box { margin-bottom: 12px; }
  #catch .content-wrap figure img { }
  #catch .content-wrap figure figcaption { text-align: center; color: rgb(118, 137, 166);font-size: 11px; }
}


/****** bottom-button ******/
#bottom-button { background: rgb(224, 233, 250); width: 100%; position: relative; margin: 250px auto }
#bottom-button img{ width: 100%;}
#bottom-button::before { position: absolute; content: ""; background: url("../images/bg_curve_catch.svg") center top / cover no-repeat; width: 100%; height: 161px; top: -44%; }
#bottom-button.section-wrap.pc_only {  width: 100%; height: 311px; }
#bottom-button.section-wrap .content-wrap { width: 100%; }
#bottom-button .flex-box { justify-content: space-around; width: 100%; transform: translateY(-27%); margin: 0px auto; max-width: 810px; }
#bottom-button .flex-box .img-box { margin-right: 60px; position: relative; max-width: 272px; }
#bottom-button .flex-box .img-box::before { content: ""; position: absolute; background: rgb(252, 225, 18); width: 622px; height: 311px; border-radius: 311px 311px 0px 0px; z-index: -1; left: 50%; transform: translate3d(-50%, 48%, 0px); }
#bottom-button .title-box { font-size: 30px; color: rgb(24, 120, 212); line-height: 1.8em; margin: auto 0px; width: 40%;}
#bottom-button .start-button{margin-bottom: 20px;}

#bottom-button a.btn {  border-radius: 5px; text-align: center; font-size: 18px; line-height: 1.4em; position: relative; width: 100%; padding: 1em 0; }
#bottom-button a.btn::before { position: absolute; content: ""; background: url("../images/btn_arrow_white.svg"); background-size: contain; background-repeat: no-repeat; background-position: center;width: 3em; height:1em; top: 50%; right: 5%; transform: translate3d(0px, -50%, 0px); }
#bottom-button .flex-box .title-box .app .app-button:first-of-type { margin-right: 10px; }
#bottom-button .sub-title {font-size: 24px;font-weight: bold;line-height: 1.7em;}

@media only screen and (max-width: 1200px) {
  #bottom-button a.btn { font-size: 1.2vw; }
}


@media only screen and (max-width: 768px) {
  #bottom-button { margin: 0; }
  #bottom-button::before { height: 8vw; top: -8vw; }
  #bottom-button.section-wrap { width: 100%; padding-top: 10vw; margin-bottom: 45vw; }
  #bottom-button.section-wrap .content-wrap { width: 92%; margin:0 auto 0px; }
  #bottom-button .flex-box { transform: translateY(0); }
  #bottom-button .flex-box .img-box { margin: 0px auto; max-width: inherit; width: 45%; padding-top: 10vw; }
  #bottom-button .flex-box .img-box::before {  width: 90vw; height: 45vw; border-radius: 50vw 50vw 0px 0px; transform: translate3d(-50%, 0, 0px); bottom: 0; }
  #bottom-button .flex-box .img-box img{margin-bottom: -20vw;}
  #bottom-button .title-box { font-size: 24px; transform: translateY(0); text-align: center;width: 100%; }
  #bottom-button .start-button{ margin-bottom: 6vw;}
  #bottom-button .start-button a {  font-size: 4.2vw; padding: 1.5em 0; line-height: 1.4em; border-radius: 5px; text-align: center; position: relative;}
  #bottom-button .start-button a::before { position: absolute; content: ""; background: url(../images/btn_arrow_white.svg); background-size: contain; background-repeat: no-repeat; background-position: center; width: 3em; height: 1em; top: 50%; right: 5%; transform: translate3d(0px, -50%, 0px);
}
  #bottom-button .content-wrap .title-box .app { margin: 0px auto; width: 80%; max-width: 300px; line-height: 0; }
}

/****** service ******/
#service {    max-width: 928px;}
#service .tit { font-size: 24px; font-weight: 900; text-align: center; color: rgb(118, 137, 166); margin-bottom: 47px; }
#service .tit:before{display: none;}
#service .flex-box { flex-wrap: wrap; width: 100%; justify-content: space-between; }
#service .flex-box img{ width: 100%;}
#service .flex-box .box04 { flex-basis: 24%; margin-bottom: 2%;line-height: 0;  }

@media only screen and (max-width: 768px) {
  #service .tit { margin-bottom: 20px; font-size: 20px; line-height: 1em; }
  #service .flex-box { display: flex; }
  #service .flex-box .box04 { flex-basis: 48%;  margin-bottom: 3%;  }
}


/****** bg-parallax ******/
.parallax-balls{position: fixed;height: 100%;width: 100%;left: 0px;top: 0px;z-index: -2;opacity: 0.8;}
.parallax-balls .ball{position: absolute;}
.parallax-balls .ball.b1{top: 310px;right: 6%;}
.parallax-balls .ball.b2{top: 364px;right: 22%;}
.parallax-balls .ball.b3{top: 397px;left: 10%;}
.parallax-balls .ball.b4{top: 620px;right: 3.5%;}
.parallax-balls .ball.b5{top: 760px;left: 13%;}
.parallax-balls .ball.b6{top: 820px;right: 13%;}
.parallax-balls .ball.b7{top: 1010px;left: 16%;}
.parallax-balls .ball.b8{top: 1170px;left: 9%;}
.parallax-balls .ball.b9{top: 1170px;right: 6%;}
.parallax-balls .ball.b10{top: 1320px;right: 11%;}
.parallax-balls .ball.b11{top: 1420px;left: 13%;}
.parallax-balls .ball.b12{top: 1600px;right: 4%;}
.parallax-balls .ball.b13{top: 1720px;left: 9%;}
.parallax-balls .ball.b14{top: 2020px;right: 14%;}
.parallax-balls .ball.b15{top: 2100px;left: 16%;}

/****** footer ******/
footer { background: rgb(236, 241, 250); width: 100%; padding: 50px 0px 90px; color: rgb(118, 137, 166); position: relative; }
footer::before { content: ""; position: absolute; background: url("../images/bg_cueve_footer.svg") center top / cover no-repeat; height: 92px; width: 100%; top: -90px; }

footer.top_foot .footer-box { margin: 0px auto 20px; width: 100%; text-align: center; }
footer.top_foot .footer-box a{ color: rgb(118, 137, 166);}
footer.top_foot .footer-box .footer-list { display: inline-block; font-size: 14px; letter-spacing: 0.84px; position: relative; text-align: center; }
footer.top_foot .footer-box .footer-list:not(:last-of-type) { margin-right: 30px; }
footer.top_foot .footer-box .footer-list:not(:last-of-type)::before { position: absolute; content: "/"; right: -20px; }
footer.top_foot .foot-copy { font-size: 12px; text-align: center; }
.font-en { font-family: Poppins, sans-serif; }
.page_top { margin: 0px; position: fixed; right: 60px; bottom: 30px; text-align: center; width: 84px; z-index: 10; }


@media only screen and (max-width: 768px) {
  footer {  }
  footer::before { height: 7vw; width: 100%; top: -7vw; background-size: 120%; background-position: bottom;}
  footer.top_foot .footer-box { margin: 0px auto 20px; width: 100%; max-width: 400px; text-align: center; }
  footer.top_foot .footer-box .footer-list {font-size: 14px; letter-spacing: 0px; }
  footer.top_foot .footer-box .footer-list:not(:last-of-type) { margin-right: 1.4em; }
  footer.top_foot .footer-box .footer-list:not(:last-of-type)::before { position: absolute; content: "/"; right: -0.95em; }
  footer.top_foot .foot-copy { font-size: 12px; text-align: center; }
  .font-en { font-family: Poppins, sans-serif; }
  .page_top { margin: 0px; position: fixed; right: 20px; bottom: 30px; text-align: center; width: 84px; z-index: 10; }
}


/************* ANIMATIONS ***************/

@keyframes imageAnimation {
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(101%);
  }
}

.anime{ position:relative; overflow:hidden; opacity:0;}

.blkin.isPlay {
  animation-name: play;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
}

.blkin.isPlay:before {
  animation-name: maskOut;
  animation-duration: .4s;
  animation-delay: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #238ce0;
}

.scroll1.isPlay {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  overflow: inherit!important;
}
.scroll2.isPlay {
  animation-name: play;
  animation-duration: .7s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  overflow: inherit!important;
}
.scroll3.isPlay {
  animation-name: play;
  animation-duration: .7s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  overflow: inherit!important;
}

@keyframes play2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media only screen and (max-width: 768px) {


.scroll1.isPlay {
  animation-name: play2;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  overflow: inherit!important;
}
.scroll2.isPlay {
  animation-name: play2;
  animation-duration: .5s;
  animation-delay:0s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  overflow: inherit!important;
}
.scroll3.isPlay {
  animation-name: play2;
  animation-duration: .5s;
  animation-delay:0s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  overflow: inherit!important;
}
}


@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.8, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.8, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0!important;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounce.isPlay {
  animation-duration: 1.5s;
  animation-name: bounceIn;
  opacity: 1;
  overflow: inherit!important;
}


@keyframes fade {
  from {
    transform: translateY(50%);opacity: 0;
  }

  to {
    transform: translateY(0);opacity: 1;
  }
}

.fadeUp.isPlay {
  animation-duration: 1s;
  animation-name: fade;
  opacity: 1;
  overflow: inherit!important;
}