/* myplan.css */
.cmp-container[data-name="myplan"] {
  background-color: #eeeef1;
}

.cmp-container[data-name="myplan"] .page-tab-group > li::before{
  background:rgba(0,0,0,.2)
}
.cmp-container[data-name="myplan"] .page-tab-btn > span{
  color:#5eb531
}
.cmp-container[data-name="myplan"] .page-tab-btn[data-active="true"] > span{
  color:#121c72
}

/* main */
.cmp-container[data-name="myplan"] .sec-main {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.cmp-container[data-name="myplan"] .sec-main::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #00b700;
  z-index: 3
}

.cmp-container[data-name="myplan"] .sec-main .main-title>p {
  display: block;
  width: 100%;
  white-space: nowrap
}

.cmp-container[data-name="myplan"] .sec-main .main-title>p>span {
  display: inline-block;
  vertical-align: top
}

.desk-top .cmp-container[data-name="myplan"] .sec-main {
  background-image: url(img/main-bg_pc.jpg)
}

.desk-top .cmp-container[data-name="myplan"] .sec-main::after {
  height: 36rem
}

.desk-top .cmp-container[data-name="myplan"] .ci {
  width: 85rem;
  left: 47rem;
  top: 28rem
}
.desk-top .cmp-container[data-name="myplan"] .page-tab-container .ci{
  margin-top:50rem
}


.desk-top .cmp-container[data-name="myplan"] .sec-main .kv {
  position: absolute;
  width: 1049rem;
  bottom: 0;
  left: 777rem;
  min-width: 75vh
}

.desk-top.min .cmp-container[data-name="myplan"] .sec-main .kv {
  min-width: 56.25vh
}

.desk-top .cmp-container[data-name="myplan"] .sec-main .wrap {
  padding-top: 328rem;
  padding-bottom: 328rem;
}
.desk-top .cmp-container[data-name="myplan"] .page-tab-container .sec-main .wrap{
  padding-top:378rem;
  padding-bottom: 278rem;
}

.desk-top .cmp-container[data-name="myplan"] .sec-main .main-title {
  width: 722rem;
  padding: 0 0 110rem 40rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-main .title-2 {
  height: 100rem;
  padding: 14rem 0 4rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-main .post {
  width: 221rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-main .post+.post {
  margin-left: 12.5rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-main .post[data-index="3"] {
  width: 252.5rem
}

.mobile .cmp-container[data-name="myplan"] .ci {
  width: 60rem;
  right: 20rem;
  top: 17rem
}
.mobile .cmp-container[data-name="myplan"] .page-tab-container .ci {
  top: 84rem
}


.mobile .cmp-container[data-name="myplan"] .sec-main {
  background-image: url(img/main-bg_mo.jpg)
}

.mobile .cmp-container[data-name="myplan"] .sec-main::after {
  height: 20rem
}

.mobile .cmp-container[data-name="myplan"] .sec-main .wrap {
  padding-top: 118rem;
}
.mobile .cmp-container[data-name="myplan"] .page-tab-container .sec-main .wrap{
  padding-top:185rem;
}

.mobile .cmp-container[data-name="myplan"] .sec-main .kv {
  height: 912rem;
  flex: none
}

.mobile .cmp-container[data-name="myplan"] .sec-main .kv>img {
  width: 1066rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.mobile .cmp-container[data-name="myplan"] .sec-main .main-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 482rem;
  margin: 0 auto 90rem;
}

.mobile .cmp-container[data-name="myplan"] .sec-main .main-title::before,
.mobile .cmp-container[data-name="myplan"] .sec-main .main-title::after {
  content: "";
  display: block;
}

.mobile .cmp-container[data-name="myplan"] .sec-main .main-title::before {
  flex: 0.4
}

.mobile .cmp-container[data-name="myplan"] .sec-main .main-title::after {
  flex: 0.3
}

.mobile .cmp-container[data-name="myplan"] .sec-main .title-2 {
  height: 66rem;
  padding: 6rem 0 3rem
}

.mobile .cmp-container[data-name="myplan"] .sec-main .post {
  width: 147rem
}

.mobile .cmp-container[data-name="myplan"] .sec-main .post+.post {
  margin-left: 8rem
}

.mobile .cmp-container[data-name="myplan"] .sec-main .post[data-index="3"] {
  width: 168rem
}



.cmp-container:not(.no-js)[data-name="myplan"] .main-title.reveal>p {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.reveal .post {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown>p {
  animation: fadeInMoveUp .4s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown .title-1 {
  animation: fadeInMoveUp .4s .1s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown .title-3 {
  animation-delay: .35s
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown .post {
  animation: fadeInScaleDown .4s var(--bounce) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown .post[data-index="1"] {
  animation-delay: .5s
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown .post[data-index="2"] {
  animation-delay: .75s
}

.cmp-container:not(.no-js)[data-name="myplan"] .main-title.shown .post[data-index="3"] {
  animation-delay: 1s
}

/* video */
.cmp-container[data-name="myplan"] .video-content {
  background: #021815
}

.cmp-container[data-name="myplan"] .video-player::before,
.cmp-container[data-name="myplan"] .video-player::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: opacity .3s
}

.cmp-container[data-name="myplan"] .video-player::before {
  background: #000;
  opacity: 1;
}

.cmp-container[data-name="myplan"] .video-player::after {
  background: url(https://i.ytimg.com/vi/exH4nGA-3N0/maxresdefault.jpg) no-repeat center / cover;
  opacity: .6;
}


.cmp-container[data-name="myplan"] .video-player.playing::before,
.cmp-container[data-name="myplan"] .video-player.playing::after {
  opacity: 0;
  pointer-events: none
}

.cmp-container[data-name="myplan"] .video-player.playing+.video-btn {
  display: none
}

.cmp-container[data-name="myplan"] .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  opacity: .75;
  cursor: pointer;
  pointer-events: none;
  border-radius: 100%;
  z-index: 1
}

.cmp-container[data-name="myplan"] .video-btn>img {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.cmp-container[data-name="myplan"] .video-btn:active>img {
  transform: scale(.97)
}

.desk-top .cmp-container[data-name="myplan"] .sec-video {
  background: url(img/video-bg-x.jpg) repeat-x center;
  background-size: auto 100%
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .bg {
  background: url(img/video-bg.png) no-repeat center;
  background-size: auto 100%
}

.cmp-container[data-name="myplan"] .sec-video .bg::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .7) 100%)
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .video-content {
  width: 1195rem;
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .video-btn {
  width: 183rem;
}

.mobile .cmp-container[data-name="myplan"] .sec-video .wrap {
  width: 100%
}

.mobile .cmp-container[data-name="myplan"] .sec-video .video-btn {
  width: 110rem
}

/* myplan-title */
.cmp-container[data-name="myplan"] .myplan-title .txt {
  display: block;
  letter-spacing: -.085em;
  font-weight: bold;
  color: #161616;
  text-align: center
}

.cmp-container[data-name="myplan"] .myplan-title>strong {
  display: block;
  margin: 0 auto
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .myplan-title {
  height: 412rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .myplan-title::before {
  content: "";
  display: block;
  flex: 0.45
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .myplan-title::after {
  content: "";
  display: block;
  flex: 1
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .myplan-title .txt {
  font-size: 48.56rem;
  line-height: 59rem;
  padding-bottom: 15rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-video .myplan-title strong {
  width: 695rem
}


.mobile .cmp-container[data-name="myplan"] .myplan-title {
  width: 436rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding-top: 125rem;
  padding-bottom: 90rem
}


.mobile .cmp-container[data-name="myplan"] .myplan-title .txt {
  font-size: 48.8rem;
  line-height: 63rem;
  padding-bottom: 40rem
}

.mobile .cmp-container[data-name="myplan"] .myplan-title strong {
  display: block;
  width: 100%
}


.cmp-container:not(.no-js)[data-name="myplan"] .wrap.reveal .myplan-title {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .wrap.reveal .myplan-title>strong {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .wrap.shown .myplan-title {
  animation: fadeInMoveUp .45s .1s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .wrap.shown .myplan-title>strong {
  animation: fadeInMoveUp .35s .4s var(--ease) forwards
}

/* myplan */
.cmp-container[data-name="myplan"] .sec-myplan {
  z-index: 10;
  background: #e5f9a9;
  overflow-x: clip
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area {
  position: relative;
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area .kv,
.cmp-container[data-name="myplan"] .sec-myplan .kv-area .content {
  z-index: 1
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: radial-gradient(rgba(212, 251, 96, 1) 0%, rgba(212, 251, 96, 0) 80%)
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area .desc {
  letter-spacing: -.085em;
  color: #202020;
  font-weight: 600
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area .name {
  letter-spacing: -.065em;
  font-weight: 800
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span {
  letter-spacing: -.085em;
  color: #181818;
  font-weight: 400;
  display: block;
  width: 100%;
  position: relative
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%
}

.cmp-container[data-name="myplan"] .sec-myplan .kv-area .note strong {
  font-weight: 600
}


.desk-top .cmp-container[data-name="myplan"] .sec-myplan .wrap {
  width: 100%;
  overflow: clip
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area {
  display: flex;
  width: 1440rem;
  margin: 0 auto;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  flex: 1;
  flex-direction: row-reverse;
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .kv {
  flex: 1;
  position: relative;
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .kv>img {
  position: absolute;
  bottom: 0;
  width: 634rem;
  left: 0;
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .content {
  width: 760rem;
  /*padding: 326rem 0 260rem 126rem;*/
  padding: 293rem 0 293rem 126rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area::before {
  width: 1440rem;
  height: 1080rem;
  left: 23.6%
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .desc {
  padding-left: 10rem;
  font-size: 38rem;
  line-height: 50rem;
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .name {
  padding-left: 10rem;
  font-size: 56.4rem;
  line-height: 70.5rem;
  color: #007500;
  padding-top: 35rem;
  padding-bottom: 56rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note {
  width: 526rem;
  font-size: 37.8rem;
  line-height: 53.6rem;
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span {
  padding-left: 10rem;
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span+span {
  margin-top: 4rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span::before {
  background: rgba(255, 255, 255, .6);
  height: 4rem
}



.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area {
  position: relative;
  width: 100%;
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area::before {
  width: 640rem;
  height: 960rem;
  left: 50%;
  top: 15%;
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .kv {
  width: 720rem;
  margin: 0 auto
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .content {
  position: absolute;
  left: 0;
  width: 100%;
  top: 38.43%;
  text-align: center;
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .desc {
  font-size: 36.9rem;
  line-height: 44rem;
  padding-bottom: 38rem;
  position: relative;
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .desc::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  bottom: 19rem;
  width: 58rem;
  height: 6rem;
  background: #85d00d
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .name {
  font-size: 57.8rem;
  line-height: 66rem;
  color: #fff;
  padding-bottom: 440rem
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note {
  margin: 0 auto;
  width: 460rem;
  font-size: 33rem;
  line-height: 38rem;
  color: #181818
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span {
  padding-bottom: 6rem;
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span+span {
  padding-top: 5rem
}

.mobile .cmp-container[data-name="myplan"] .sec-myplan .kv-area .note>span::before {
  background: #ceed9d;
  height: 2rem
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-myplan .kv-area.reveal .desc,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-myplan .kv-area.reveal .name,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-myplan .kv-area.reveal .note {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-myplan .kv-area.shown .desc {
  animation: fadeInMoveUp .4s .2s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-myplan .kv-area.shown .name {
  animation: fadeInMoveUp .4s .3s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-myplan .kv-area.shown .note {
  animation: fadeInMoveUp .4s .4s var(--ease) forwards
}



/* blocks */
.cmp-container[data-name="myplan"] .blocks {
  display: block;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 0;
  height: 100%;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0)
}

.cmp-container[data-name="myplan"] .blocks>span {
  position: absolute;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0)
}

.desk-top .cmp-container[data-name="myplan"] .blocks {
  width: 1000rem;
}

.desk-top .cmp-container[data-name="myplan"] .blocks .type-g {
  left: -11.8%;
  top: 2.6%;
  width: 225rem
}

.desk-top .cmp-container[data-name="myplan"] .blocks .type-b {
  left: 134.3%;
  top: 34.82%;
  width: 167rem
}

.desk-top .cmp-container[data-name="myplan"] .blocks .type-y {
  left: -43.7%;
  top: 60%;
  width: 318rem
}

.desk-top .cmp-container[data-name="myplan"] .blocks .type-r {
  left: 142.4%;
  top: 97.8%;
  width: 226rem
}

.mobile .cmp-container[data-name="myplan"] .blocks {
  width: 500rem;
}

.mobile .cmp-container[data-name="myplan"] .blocks .type-g {
  left: -18%;
  top: 4.08%;
  width: 203rem
}

.mobile .cmp-container[data-name="myplan"] .blocks .type-b {
  left: 114.6%;
  top: 25%;
  width: 150rem
}

.mobile .cmp-container[data-name="myplan"] .blocks .type-y {
  left: -31.8%;
  top: 35.43%;
  width: 287rem
}

.mobile .cmp-container[data-name="myplan"] .blocks .type-r {
  left: 122%;
  top: 98.56%;
  width: 250rem
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.reveal>span {
  opacity: 0;
  transform: translate3d(-50%, 0%, 0) scale3d(1.3, 1.3, 1.3)
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown>span {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
  transition: opacity .7s var(--ease), transform 1.5s var(--ease)
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-g {
  transition-delay: .25s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-b {
  transition-delay: .4s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-y {
  transition-delay: .55s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-r {
  transition-delay: .7s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown>span>img {
  animation: upDownFloating 4s ease-in-out infinite
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-g>img {
  animation-delay: .3s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-b>img {
  animation-delay: .7s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-y>img {
  animation-delay: 1.1s
}

.cmp-container:not(.no-js)[data-name="myplan"] .blocks.shown .type-r>img {
  animation-delay: 1.5s
}



/* event-btn */
.cmp-container[data-name="myplan"] .event-btn {
  display: block;
  position: relative;
  margin: 0 auto
}

.cmp-container[data-name="myplan"] .event-btn::before {
  content: "";
  display: block;
  position: relative;
}

.cmp-container[data-name="myplan"] .event-btn>span {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.cmp-container[data-name="myplan"] .event-btn:active::before {
  transform: scale3d(.99, .98, 1);
}

.desk-top .cmp-container[data-name="myplan"] .event-btn {
  width: 890rem
}

.desk-top .cmp-container[data-name="myplan"] .event-btn::before {
  padding-top: 9.8425%;
  border-radius: 10rem
}

.mobile .cmp-container[data-name="myplan"] .event-btn {
  width: 665rem
}

.mobile .cmp-container[data-name="myplan"] .event-btn::before {
  padding-top: 14.737%;
  border-radius: 13.3rem
}



/* point */
.cmp-container[data-name="myplan"] .sec-point {
  background: #7dbe2c
}

.cmp-container[data-name="myplan"] .sec-point .kv {
  display: block;
  position: relative;
  margin: 0 auto
}

.cmp-container[data-name="myplan"] .sec-point .event-btn::before {
  background-color: #181818
}

.cmp-container[data-name="myplan"] .point-title {
  display: block;
  margin: 0 auto
}

.cmp-container[data-name="myplan"] .point-list {
  margin: 0 auto;
}

.cmp-container[data-name="myplan"] .point-list li {
  background: #fff;
  border: 2rem solid #badc76;
  text-align: center;
  letter-spacing: -.1em;
  font-weight: 600;
  color: #47800a
}

.cmp-container[data-name="myplan"] .point-list li small {
  display: block;
  font-weight: 400
}

.desk-top .cmp-container[data-name="myplan"] .sec-point .wrap {
  padding: 85rem 0;
}

.desk-top .cmp-container[data-name="myplan"] .point-list {
  width: 890rem;
  padding: 28rem 0
}

.desk-top .cmp-container[data-name="myplan"] .point-list li {
  padding: 16rem 0;
  border-radius: 10rem;
  font-size: 37.38rem;
  line-height: 44rem;
}

.desk-top .cmp-container[data-name="myplan"] .point-list li:nth-child(3) {
  padding-top: 16rem;
  padding-bottom: 16rem
}

.desk-top .cmp-container[data-name="myplan"] .point-list li small {
  font-size: 22.92rem;
  line-height: 28rem
}

.desk-top .cmp-container[data-name="myplan"] .point-list li+li {
  margin-top: 18rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-point .kv {
  width: 493rem;
  left: 46rem;
  margin-bottom: -2rem
}

.desk-top .cmp-container[data-name="myplan"] .point-title {
  width: 414rem
}

.desk-top .cmp-container[data-name="myplan"] .event-btn>span {
  width: 640rem
}


.mobile .cmp-container[data-name="myplan"] .sec-point {
  padding: 128rem 0 112rem
}

.mobile .cmp-container[data-name="myplan"] .point-title {
  width: 347rem
}

.mobile .cmp-container[data-name="myplan"] .point-list {
  width: 588rem;
  padding: 36rem 0 40rem
}

.mobile .cmp-container[data-name="myplan"] .point-list li {
  padding: 21rem 0 23rem;
  border-radius: 10rem;
  font-size: 35.87rem;
  line-height: 42rem;
}

.mobile .cmp-container[data-name="myplan"] .point-list li:nth-child(3) {
  padding-bottom: 16rem
}

.mobile .cmp-container[data-name="myplan"] .point-list li small {
  font-size: 26.7rem;
  line-height: 33rem
}

.mobile .cmp-container[data-name="myplan"] .point-list li+li {
  margin-top: 22rem
}

.mobile .cmp-container[data-name="myplan"] .sec-point .kv {
  width: 564rem;
  left: 12rem;
}

.mobile .cmp-container[data-name="myplan"] .sec-point .event-btn>span {
  width: 604rem
}


.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-title.reveal,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-list.reveal>li,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .btn-group.reveal .kv,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .btn-group.reveal .event-btn {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-title.shown {
  animation: fadeInMoveUp .55s .15s var(--bounce) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-list.shown>li,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .btn-group.shown .kv,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .btn-group.shown .event-btn {
  animation: fadeInMoveUp .35s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-list.shown>li:nth-child(1) {
  animation-delay: .25s
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-list.shown>li:nth-child(2) {
  animation-delay: .4s
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .point-list.shown>li:nth-child(3) {
  animation-delay: .55s
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .btn-group.shown .kv {
  animation-delay: .65s
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-point .wrap .btn-group.shown .event-btn {
  animation-delay: .6s
}


/* event */
.cmp-container[data-name="myplan"] .sec-event {
  background: url(img/event-bg.jpg) repeat center;
}

.cmp-container[data-name="myplan"] .sec-event .bg .light {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.cmp-container[data-name="myplan"] .event-title {
  display: block;
  margin: 0 auto
}

.cmp-container[data-name="myplan"] .event-desc {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
}

.cmp-container[data-name="myplan"] .event-desc>strong {
  display: block;
  margin: 0 auto
}

.cmp-container[data-name="myplan"] .sec-event .event-btn::before {
  background-color: #78d117
}

.desk-top .cmp-container[data-name="myplan"] .sec-event {
  padding: 94rem 0
}

.desk-top .cmp-container[data-name="myplan"] .sec-event .bg .light {
  bottom: 0;
  width: 1345rem
}

.desk-top .cmp-container[data-name="myplan"] .event-title {
  width: 414rem
}

.desk-top .cmp-container[data-name="myplan"] .event-desc {
  padding: 100rem 0 86rem;
  font-size: 45.13rem;
  line-height: 55rem;
  margin-bottom: -21rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-event .event-btn>span {
  width: 269rem
}

.desk-top .cmp-container[data-name="myplan"] .event-desc>strong {
  width: 796rem
}


.mobile .cmp-container[data-name="myplan"] .sec-event {
  padding: 128rem 0 144rem
}

.mobile .cmp-container[data-name="myplan"] .event-title {
  width: 347rem
}

.mobile .cmp-container[data-name="myplan"] .sec-event .bg .light {
  width: 1143rem;
  bottom: 122rem
}

.mobile .cmp-container[data-name="myplan"] .event-desc {
  width: 473rem;
  padding: 92rem 0 52rem;
  margin: 0 auto;
  font-size: 33.8rem;
  line-height: 38rem
}

.mobile .cmp-container[data-name="myplan"] .event-desc>strong {
  margin-top: -38rem
}

.mobile .cmp-container[data-name="myplan"] .sec-event .event-btn>span {
  width: 330rem
}


.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .bg.reveal .light>img,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .wrap.reveal .event-title,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .wrap.reveal .event-desc,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .wrap.reveal .event-btn {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .bg.shown .light>img {
  animation: fadeInScaleUp .7s .15s var(--bounce) forwards;
  transform-origin: center bottom;
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .wrap.shown .event-title {
  animation: fadeInMoveUp .55s .25s var(--bounce) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .wrap.shown .event-desc {
  animation: fadeInScaleUp .55s .4s var(--bounce) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-event .wrap.shown .event-btn {
  animation: fadeInMoveUp .4s .5s var(--ease) forwards
}


/* kyobo */

.cmp-container[data-name="myplan"] .sec-kyobo .bg {
  overflow: clip
}

.cmp-container[data-name="myplan"] .sec-kyobo .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

.cmp-container[data-name="myplan"] .sec-kyobo .bg::after {
  content: "";
  display: block;
  background: #b18a63 url(img/kyobo-desk.jpg) repeat-x 35% / auto 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.cmp-container[data-name="myplan"] .sec-kyobo .kv-area {
  position: relative;
}

.cmp-container[data-name="myplan"] .sec-kyobo .kv-area .kv,
.cmp-container[data-name="myplan"] .sec-kyobo .kv-area .content {
  z-index: 1
}

.cmp-container[data-name="myplan"] .kyobo-title>span {
  display: block
}

.cmp-container[data-name="myplan"] .app-icon {
  display: block;
  overflow: clip
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .bg::after {
  height: 160rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .content {
  padding-top: 310rem;
  padding-bottom: 400rem;
}

.desk-top .cmp-container[data-name="myplan"] .kyobo-title .title-1 {
  width: 507.5rem;
  padding-bottom: 14rem
}

.desk-top .cmp-container[data-name="myplan"] .kyobo-title .title-2 {
  width: 505rem;
  padding-bottom: 40rem
}

.desk-top .cmp-container[data-name="myplan"] .app-icon {
  width: 124rem;
  border-radius: 24rem;
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .bg-img {
  background-image: url(img/main-bg_pc.jpg);
  left: 56%;
  top: 50%;
  transform: scale(1.125) translate(-50%, -50%)
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .kv-area {
  width: 1172rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  flex: 1;
  flex-direction: row;
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .kv-area .kv {
  flex: 1;
  position: relative;
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .kv-area .kv>img {
  position: absolute;
  bottom: 0;
  width: 964rem;
  left: 57.34%;
  transform: translate3d(-50%, 0, 0);
}

.desk-top .cmp-container[data-name="myplan"] .sec-kyobo .kv-area .content {
  flex: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo .bg::after {
  height: 148rem
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo .content {
  padding-bottom: 50rem
}

.mobile .cmp-container[data-name="myplan"] .kyobo-title>span {
  margin: 0 auto
}

.mobile .cmp-container[data-name="myplan"] .kyobo-title .title-1 {
  width: 415rem;
  padding-bottom: 20rem
}

.mobile .cmp-container[data-name="myplan"] .kyobo-title .title-2 {
  width: 294rem;
  padding-bottom: 35rem
}

.mobile .cmp-container[data-name="myplan"] .app-icon {
  width: 93rem;
  border-radius: 15rem;
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo {
  padding: 118rem 0 14rem
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo .bg::after {
  background-position-x: 65%;
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo .bg-img {
  background-image: url(img/main-bg_mo.jpg);
  left: 47%;
  width: 180%;
  height: 200%;
  top: 65%;
  transform: translate(-50%, -50%)
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo .kv-area .kv {
  width: 100%;
  height: 796rem;
  position: relative;
}

.mobile .cmp-container[data-name="myplan"] .sec-kyobo .kv-area .kv>img {
  position: absolute;
  bottom: 0;
  width: 819rem;
  left: 56.5278%;
  transform: translate3d(-50%, 0, 0);
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.reveal .title-1,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.reveal .title-2,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.reveal .app-icon {
  opacity: 0
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.shown .title-1,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.shown .title-2,
.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.shown .app-icon {
  animation: fadeInMoveUp .4s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.shown .title-1 {
  animation-delay: .2s
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.shown .title-2 {
  animation-delay: .4s
}

.cmp-container:not(.no-js)[data-name="myplan"] .sec-kyobo .kyobo-title.shown .app-icon {
  animation-delay: .6s
}


/* coming soon */
.cmp-container[data-name="myplan"] .cs-title {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  letter-spacing: -.105em;
  font-weight: 600;
}

.cmp-container[data-name="myplan"] .cs-title>strong {
  display: block;
  margin: 0 auto
}

.cmp-container[data-name="myplan"] .comingsoon {
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%
}

.cmp-container[data-name="myplan"] .comingsoon .wrap {
  position: relative
}

.cmp-container[data-name="myplan"] .comingsoon .wrap::before {
  content: "";
  display: block
}

.cmp-container[data-name="myplan"] .comingsoon .kv {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: clip;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0
}

.cmp-container[data-name="myplan"] .comingsoon .kv>img {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0
}

.desk-top .cmp-container[data-name="myplan"] .comingsoon {
  background-image: url(img/comingsoon-bg_pc.jpg);
}

.desk-top .cmp-container[data-name="myplan"] .comingsoon .wrap::before {
  padding-top: 35.5694%
}

.desk-top .cmp-container[data-name="myplan"] .comingsoon .kv {
  width: 1193rem
}

.desk-top .cmp-container[data-name="myplan"] .cs-title {
  font-size: 26.89rem;
  line-height: 33rem;
  padding-top: 30rem;
  top: 50%;
  transform: translate3d(0, -50%, 0)
}

.desk-top .cmp-container[data-name="myplan"] .cs-title strong {
  width: 414rem;
  padding-top: 12rem
}


.mobile .cmp-container[data-name="myplan"] .comingsoon {
  background-image: url(img/comingsoon-bg_mo.jpg);
}

.mobile .cmp-container[data-name="myplan"] .comingsoon .wrap::before {
  padding-top: 86%
}

.mobile .cmp-container[data-name="myplan"] .comingsoon .kv {
  width: 960rem
}

.mobile .cmp-container[data-name="myplan"] .cs-title {
  font-size: 30.3rem;
  line-height: 37.54rem;
  padding-bottom: 122rem;
  top: 50%;
  transform: translate3d(0, -50%, 0)
}

.mobile .cmp-container[data-name="myplan"] .cs-title strong {
  width: 405rem;
  padding-top: 150rem
}


.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.reveal .kv>img,
.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.reveal .cs-title,
.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.reveal .cs-title>strong {
  opacity: 0
}


.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.shown .kv>img {
  animation: fadeInScaleDown .55s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.shown .cs-title {
  animation: fadeInMoveUpMargin .35s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.shown .cs-title>strong {
  animation: fadeInMoveUp .35s var(--ease) forwards
}

.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.shown .kv>img {
  animation-delay: .4s
}

.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.shown .cs-title {
  animation-delay: .25s
}

.cmp-container:not(.no-js)[data-name="myplan"] .comingsoon .wrap.shown .cs-title>strong {
  animation-delay: .4s
}


/* notice */
.cmp-container[data-name="myplan"] .sec-notice {
  background: #f1f8d7
}

.cmp-container[data-name="myplan"] .sec-notice .content {
  color: #113e01;
  font-weight: 500;
  border-style: solid;
  border-color: #c5d4ad
}

.cmp-container[data-name="myplan"] .sec-notice .content dt,
.cmp-container[data-name="myplan"] .sec-notice .content dd,
.cmp-container[data-name="myplan"] .sec-notice .content p {
  letter-spacing: -.065em
}


.desk-top .cmp-container[data-name="myplan"] .sec-notice .wrap {
  padding: 48rem 120rem
}

.desk-top .cmp-container[data-name="myplan"] .notice-title {
  width: 218rem;
  padding: 24rem 18rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-notice .content {
  padding: 35rem 18rem 0;
  border-top-width: 2rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-notice .content dt,
.desk-top .cmp-container[data-name="myplan"] .sec-notice .content dd {
  font-size: 19.4rem;
  line-height: 29.34rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-notice .content dd {
  padding-bottom: 30rem
}

.desk-top .cmp-container[data-name="myplan"] .sec-notice .doc-no {
  font-size: 18.75rem;
  line-height: 28rem
}


.mobile .cmp-container[data-name="myplan"] .sec-notice .wrap {
  padding: 50rem 55rem 108rem
}

.mobile .cmp-container[data-name="myplan"] .notice-title {
  width: 172rem;
  padding: 18rem 12rem
}

.mobile .cmp-container[data-name="myplan"] .sec-notice .content {
  padding: 28rem 12rem 0;
  border-top-width: 2rem
}

.mobile .cmp-container[data-name="myplan"] .sec-notice .content dt,
.mobile .cmp-container[data-name="myplan"] .sec-notice .content dd,
.mobile .cmp-container[data-name="myplan"] .sec-notice .doc-no {
  font-size: 19.4rem;
  line-height: 27.8rem
}

.mobile .cmp-container[data-name="myplan"] .sec-notice .content dd {
  padding-bottom: 30rem;
  padding-left: .6em;
  text-indent: -.6em
}

.mobile .cmp-container[data-name="myplan"] .sec-notice .doc-no {
  padding-top: 30rem;
}