/* read-together.css */
.cmp-container[data-name="readtogether"] {
  background-color: #fff;
}

.cmp-container[data-name="readtogether"] .page-tab-group>li::before {
  background: rgba(255, 255, 255, .2)
}

.cmp-container[data-name="readtogether"] .page-tab-btn>span {
  color: #5eb531
}

.cmp-container[data-name="readtogether"] .page-tab-btn[data-active="true"]>span {
  color: #fff
}

.cmp-container[data-name="readtogether"] .has-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: url("./img/pattern.svg");
  mask-image: url("./img/pattern.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.desk-top .cmp-container[data-name="readtogether"] .has-pattern::before {
  -webkit-mask-size: 1548rem auto;
  mask-size: 1548rem auto;
}
.mobile .cmp-container[data-name="readtogether"] .has-pattern::before {
  -webkit-mask-size: 1505rem auto;
  mask-size: 1505rem auto;
}

/* common */
.cmp-container[data-name="readtogether"] .word-balloon {
  background: #fff;
  position: relative;
  margin: 0 auto;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cmp-container[data-name="readtogether"] .word-balloon{
  opacity:0;
}
.cmp-container[data-name="readtogether"] .word-balloon.shown{
  animation: fadeInScaleUp .65s var(--bounce) forwards;
}

.cmp-container[data-name="readtogether"] .word-balloon>span {
  display: block;
  width: 100%;
  position: relative;
  text-align: center;
  color: #121c72;
  letter-spacing: -.105em;
  font-weight: 400
}

.cmp-container[data-name="readtogether"] .word-balloon p {
  display: block;
  width: 100%;
  position: relative;
  text-align: center;
  color: #121c72;
}


.cmp-container[data-name="readtogether"] .word-balloon p>span {
  display: inline-block;
  width: fit-content;
  position: relative;
  padding: 0 .5em
}

.cmp-container[data-name="readtogether"] .word-balloon p>span::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.05em;
  height: .8em;
  left: 0;
  width: 100%;
}

.cmp-container[data-name="readtogether"] .word-balloon p>span strong {
  font-weight: 900;
  position: relative;
  z-index: 1;
}

.cmp-container[data-name="readtogether"] .word-balloon .hash-tag>span,
.cmp-container[data-name="readtogether"] .word-balloon .hash-tag>span strong {
  letter-spacing: -.065em;
}

.cmp-container[data-name="readtogether"] .word-balloon .subject span,
.cmp-container[data-name="readtogether"] .word-balloon .subject span strong {
  letter-spacing: -.085em;
}

.cmp-container[data-name="readtogether"] .word-balloon .subject>span {
  padding-left: .1em;
  padding-right: .1em;
}

.cmp-container[data-name="readtogether"] .word-balloon .has-lt {
  position: relative;
}

.cmp-container[data-name="readtogether"] .word-balloon .has-lt::before,
.cmp-container[data-name="readtogether"] .word-balloon .has-lt::after {
  content: "";
  display: block;
  position: absolute;
  background: url(./img/challenge-lt-mark.png) no-repeat center / contain;
  bottom: .15em;
}

.cmp-container[data-name="readtogether"] .word-balloon .has-lt::before {
  left: 0
}

.cmp-container[data-name="readtogether"] .word-balloon .has-lt::after {
  right: 0;
  transform-origin: center;
  transform: rotateY(180deg);
}

.cmp-container[data-name="readtogether"] .word-balloon strong {
  font-weight: 700
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon {
  width: 720rem;
  padding: 15rem 50rem 12rem;
  border-radius: 14rem;
  box-shadow: 5rem 5rem 15rem rgba(0, 0, 0, .25);
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon>span {
  font-size: 42rem;
  line-height: 57rem;
  padding-bottom: 2rem;
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon>span+span {
  border-top-width: 2rem;
  border-top-style: solid;
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon .hash-tag {
  padding: 20rem 0 18rem;
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon .hash-tag>span {
  font-size: 46rem;
  line-height: 56rem;
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon .subject {
  padding-top: 15rem;
  margin-bottom: 15rem
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon .subject>span {
  font-size: 68rem;
  line-height: 80rem;
  padding-bottom: 5rem
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon .subject strong {
  font-weight: 900;
  padding: 0 40rem;
}

.desk-top .cmp-container[data-name="readtogether"] .word-balloon .subject strong::before,
.desk-top .cmp-container[data-name="readtogether"] .word-balloon .subject strong::after {
  width: 29rem;
  height: 72rem;
}


.mobile .cmp-container[data-name="readtogether"] .word-balloon {
  width: 588rem;
  padding: 12rem 30rem 16rem;
  border-radius: 20rem;
  box-shadow: 6rem 6rem 20rem rgba(0, 0, 0, .25);
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon>span {
  font-size: 36rem;
  line-height: 50rem;
  padding-bottom: 3rem;
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon>span+span {
  border-top-width: 3rem;
  border-top-style: solid;
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon .hash-tag {
  padding: 14rem 0 16rem;
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon .hash-tag>span {
  font-size: 39rem;
  line-height: 48rem;
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon .subject {
  padding-top: 30rem;
  margin-bottom: 15rem
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon .subject>span {
  font-size: 59rem;
  line-height: 65rem;
  padding-bottom: 5rem
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon .subject strong {
  font-weight: 900;
  padding: 0 28rem;
}

.mobile .cmp-container[data-name="readtogether"] .word-balloon .subject strong::before,
.mobile .cmp-container[data-name="readtogether"] .word-balloon .subject strong::after {
  width: 24rem;
  height: 60rem;
}


.cmp-container[data-name="readtogether"] .cmp-title-group {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cmp-container[data-name="readtogether"] .cmp-title-group>h2,
.cmp-container[data-name="readtogether"] .cmp-title-group>h3,
.cmp-container[data-name="readtogether"] .cmp-title-group>p {
  display: block;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  flex: none
}

.cmp-container[data-name="readtogether"] .cmp-title-group>p {
  color: #646462;
  font-weight: 400
}


.cmp-container[data-name="readtogether"] .cmp-title-group>p>span {
  display: block;
  position: relative;
  letter-spacing: -.105em;
  font: inherit
}

.cmp-container[data-name="readtogether"] .cmp-title-group>p>span::before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  transition: width .8s var(--ease)
}

.cmp-container[data-name="readtogether"] .cmp-title-group.shown>p>span::before {
  width: 100%;
  transition-delay: .8s
}

.desk-top .cmp-container[data-name="readtogether"] .cmp-title-group>p {
  font-size: 43.5rem;
  line-height: 52rem;
}

.desk-top .cmp-container[data-name="readtogether"] .cmp-title-group>p>span {
  padding: 6rem 0 9rem
}
.desk-top .cmp-container[data-name="readtogether"] .cmp-title-group>p>span::before{
  height: 2rem;
}

.mobile .cmp-container[data-name="readtogether"] .cmp-title-group>p {
  font-size: 35rem;
  line-height: 45rem;
}

.mobile .cmp-container[data-name="readtogether"] .cmp-title-group>p>span {
  padding: 4rem 0 6rem
}
.mobile .cmp-container[data-name="readtogether"] .cmp-title-group>p>span::before{
  height: 3rem;
}

.cmp-container[data-name="readtogether"] .kv-area.reveal .kv > img{
  opacity:0;
}
.cmp-container[data-name="readtogether"] .kv-area.reveal.shown .kv > img{
  animation: fadeInMoveUp .75s .3s var(--ease) forwards;
}

.cmp-container[data-name="readtogether"] .sec-sentence .kv-area,
.cmp-container[data-name="readtogether"] .sec-motivate .kv-area,
.cmp-container[data-name="readtogether"] .sec-kyobo .kv-area {
  position: relative;
  overflow-y: clip
}

.cmp-container[data-name="readtogether"] .sec-sentence .kv-circle,
.cmp-container[data-name="readtogether"] .sec-motivate .kv-circle,
.cmp-container[data-name="readtogether"] .sec-kyobo .kv-circle {
  position: absolute;
  left: 50%;
  border-radius: 100%;
  overflow: hidden;
  bottom: 0;
}

.cmp-container[data-name="readtogether"] .sec-sentence .kv-circle {
  background: #6fbc4c;
}

.cmp-container[data-name="readtogether"] .sec-sentence .has-pattern::before {
  background: #76cb53
}

.cmp-container[data-name="readtogether"] .sec-motivate .kv-circle {
  background: linear-gradient(to bottom, #87aef3 8.5%, #3563d9 30%);
}

.cmp-container[data-name="readtogether"] .sec-kyobo .kv-circle {
  background: #5dae38
}

.cmp-container[data-name="readtogether"] .sec-sentence .kv-area .kv {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.desk-top .cmp-container[data-name="readtogether"] .kv-area .kv-circle {
  width: 2754rem;
  height: 2000rem;
}

.mobile .cmp-container[data-name="readtogether"] .kv-area .kv-circle {
  width:105%;
  min-width: 1400rem;
  height: 1700rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .kv-circle {
  transform: translate3d(-50%, 50%, 0);
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .kv-circle {
  transform: translate3d(-50%, 54.5%, 0);
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .kv-circle {
  transform: translate3d(-50%, 65%, 0)
}
.mobile .cmp-container[data-name="readtogether"] .sec-motivate .kv-circle {
  top:0;bottom:auto;
  transform: translate3d(-50%, 0, 0)
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .kv-circle {
  transform: translate3d(-50%, 70%, 0)
}
.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .kv-circle {
  transform: translate3d(-50%, 72.5%, 0)
}

@keyframes fadeInClip {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
/* main */
.cmp-container[data-name="readtogether"] .sec-main {
  background: #80c856;
}

.cmp-container[data-name="readtogether"] .sec-main .wrap {
  height: auto
}

.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group {
  display: block;
  position: relative;
  z-index: 0;
}

.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>p {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.045em;
}

.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>p>span {
  display: block;
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group.shown>p>span{
  animation: fadeInMoveUp .6s var(--ease) forwards;
}
.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group.shown>p>span:nth-child(1){
  animation-delay: .3s;
}
.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group.shown>p>span:nth-child(2){
  animation-delay: .45s;
}
.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group.shown>p>span:nth-child(3){
  animation-delay: .6s;
}
.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group h2{
  clip-path: inset(0 100% 0 100%);
  opacity:0
}
.cmp-container[data-name="readtogether"] .sec-main .cmp-title-group.shown h2{
  animation: fadeInClip .8s .3s var(--ease) forwards;
}

.cmp-container[data-name="readtogether"] .sec-main .kv-area {
  position: relative;
  z-index: 1
}

.cmp-container[data-name="readtogether"] .sec-main .kv {
  pointer-events: none;
  display: block;
}


.desk-top .cmp-container[data-name="readtogether"] .ci {
  width: 85rem;
  left: 47rem;
  top: 28rem
}

.desk-top .cmp-container[data-name="readtogether"] .page-tab-container .ci {
  margin-top: 50rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group {
  flex: .44;
  height:1107rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}


.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group::before,
.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group::after{
  content:"";display:block;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group::before{
  flex:.6
}
.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group::after{
  flex:1;max-height:350rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>h2 {
  flex:none;
  width: 105.688%;
  margin-left: -2.844%;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>p {
  flex:none;
  font-size: 41rem;
  line-height: 53rem;
  padding-bottom: 46rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>p span {
  padding: 8rem 0
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .kv-area {
  flex: .56;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-main .kv {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  top: min(70.8%, 783rem);
  left: 55.25%;
  width: 145.12%
}



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

.mobile .cmp-container[data-name="readtogether"] .page-tab-container .ci {
  top: 84rem
}

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

.mobile .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group {
  padding: 130rem 0 52rem;
  width: 720rem;
  margin: 0 auto;
}

.mobile .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>h2 {
  width: 109.26%;
  margin-left: -4.63%;
}

.mobile .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>p {
  font-size: 38rem;
  line-height: 44rem;
  padding-bottom: 30rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-main .cmp-title-group>p span {
  padding: 8rem 0
}

.mobile .cmp-container[data-name="readtogether"] .sec-main .kv {
  margin-left: -21.3%;
  width: 142.6%;
}

.mobile .cmp-container[data-name="readtogether"] .page-tab-container .sec-main::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rem;
  background: url(./img/main-kv-bg.gif) repeat center / 250rem auto;
}


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

.cmp-container[data-name="readtogether"] .video-player::before,
.cmp-container[data-name="readtogether"] .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="readtogether"] .video-player::before {
  background: #000;
  opacity: 1;
}

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


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

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

.cmp-container[data-name="readtogether"] .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="readtogether"] .video-btn>img {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

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

.cmp-container[data-name="readtogether"] .sec-video {
  background: #fff;
}

.cmp-container[data-name="readtogether"] .sec-video .wrap {
  padding: 20rem 0
}

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

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

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

.mobile .cmp-container[data-name="readtogether"] .sec-video .video-btn {
  /*width: 120rem;*/
  width: 110rem
}


/* .sec-sentence */
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .kv-circle.has-pattern::before{
  display:none
}

.cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group>p>span::before {
  background: #d3e0ce
}

.cmp-container[data-name="readtogether"] .sec-sentence .cnt-area {
  position: relative;
  z-index: 1;
}

.cmp-container[data-name="readtogether"] .sec-sentence .cnt-area .has-pattern {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: clip;
  background: #6fbc4c;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  contain: paint;
  isolation: isolate;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 175rem,
      black 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 175rem,
      black 100%);
}

.cmp-container[data-name="readtogether"] .sec-sentence .content {
  width: 100%;
  position: relative;
  z-index: 1;
}

.cmp-container[data-name="readtogether"] .sec-sentence .word-balloon>span {
  border-top-color: #d0f2cd;
}

.cmp-container[data-name="readtogether"] .sec-sentence .word-balloon .hash-tag>span::before {
  background: #d4ebc9
}

.cmp-container[data-name="readtogether"] .sec-sentence .word-balloon.shown{
  animation-delay:.2s
}
.cmp-container[data-name="readtogether"] .sec-sentence .wrap {
  width: 100%;
}

.cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group>p>span {
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown>p>span{
  animation: fadeInMoveUp .6s var(--ease) forwards;
}
.cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown>p>span:nth-child(1){
  animation-delay: .3s;
}
.cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown>p>span:nth-child(2){
  animation-delay: .45s;
}
.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group h3{
  clip-path: inset(0 100% 0 100%);
  opacity:0;
}
.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown h3{
  animation: fadeInClip .7s .35s var(--ease) forwards;
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group h3 > span{
  opacity:0;
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown h3 > span{
  animation: fadeInMoveUp .6s var(--ease) forwards;
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown h3 > span:nth-child(1){
  animation-delay: .5s;
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown h3 > span:nth-child(2){
  animation-delay: .6s;
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group.shown h3 > span:nth-child(3){
  animation-delay: .7s;
}

.cmp-container[data-name="readtogether"] .sec-sentence .list{
  clip-path: inset(0 0 100% 0);
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-sentence .list > li > img{
  opacity:0
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list.shown{
  animation: fadeInClip 1.3s .3s var(--ease) forwards;
}
.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list.shown{
  animation: fadeInClip .6s .3s var(--ease) forwards;
}
.cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li > img{
  animation: fadeInScaleUp .5s var(--bounce) forwards;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="1"] > img,
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="2"] > img{
  animation-delay: .5s;
}
.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="2"] > img,
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="3"] > img{
  animation-delay: .7s;
}
.cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="4"] > img{
  animation-delay: .9s;
}
.cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="5"] > img{
  animation-delay: 1.05s;
}
.cmp-container[data-name="readtogether"] .sec-sentence .word-balloon.end.shown {
  animation-delay:0s;
}


@keyframes jumpUpAni {
  0%, 15%, 100% {
    transform: scale3d(1,1,1);
  }
  4%, 10% {
    transform: scale3d(1.15,1.15,1.15);
    z-index:2;
  }
}
.cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li{
  animation: jumpUpAni 10s var(--ease) infinite;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="1"],
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="2"]{
  animation-delay: 2s;
}
.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="2"],
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="3"]{
  animation-delay: 3.5s;
}
.cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="4"]{
  animation-delay: 5s;
}
.cmp-container[data-name="readtogether"] .sec-sentence .list.shown > li[data-idx="5"]{
  animation-delay: 6.5s;
}



.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .kv-area {
  height: 1150rem;
  margin-bottom: -175rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .kv-area .kv {
  width: 2160rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group {
  height: 380rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group>h3>span {
  display: inline-block;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group .t1 {
  width: 266rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group .t2 {
  width: 280rem;
  margin-left: 21rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group .t3 {
  margin-left: 6rem;
  width: 286rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group>p {
  width: 494rem;
  margin-top: 21rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .content {
  padding-top: 52rem;
  padding-bottom: 75rem;
  border-bottom: 20rem solid #2c6c0e;
}


.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  flex-wrap: wrap;
  height: 459rem;
  background: url(./img/sentence-line-pc.png) no-repeat center top / auto 100%;
  gap: 14rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-sentence .list>li {
  flex: 1;
  max-width: 404rem
}






.mobile .cmp-container[data-name="readtogether"] .sec-sentence .kv-area {
  height: 890rem;
  margin-bottom: -175rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .kv-area .kv {
  width: 1540rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group {
  height: 536rem;
  flex-direction:column-reverse;
  gap:33rem
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group >h3>span {
  display: block;
  margin:0 auto
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group .t1 {
  width: 238rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group .t2 {
  width: 251rem;
  margin-top: 25rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group .t3 {
  margin-top: 20rem;
  width: 256rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .cmp-title-group>p {
  padding-top:36rem;
  width:395rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .content {
  padding-bottom: 90rem;
  border-bottom: 20rem solid #2c6c0e;
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list {
  width: 100%;
  padding:40rem 0;
  background: url(./img/sentence-line-mo.png) no-repeat center top / auto 100%;
}

.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list>li {
  width: 358rem;
  margin:0 auto;
}
.mobile .cmp-container[data-name="readtogether"] .sec-sentence .list>li + li{
  margin-top:40rem
}




/* .sec-motivate */
.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group>p>span::before {
  background: #d9e9f8
}

.cmp-container[data-name="readtogether"] .sec-motivate .cnt-area {
  position: relative;
  z-index: 1;
}

.cmp-container[data-name="readtogether"] .sec-motivate .cnt-area .has-pattern {
  position: absolute;
  z-index: 0;
  height: auto;
  width: 100%;
  top: -1px;
  bottom: -1px;
  left: 0;
  overflow: clip;
  background: #3563d9;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  contain: paint;
  isolation: isolate;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cmp-container[data-name="readtogether"] .sec-motivate .cnt-area .has-pattern::before {
  background: #2251c9
}

.cmp-container[data-name="readtogether"] .sec-motivate .kv-area .kv {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-51%, 0, 0);
}

.cmp-container[data-name="readtogether"] .sec-motivate .content {
  width: 100%;
  position: relative;
  z-index: 1
}

.cmp-container[data-name="readtogether"] .sec-motivate .word-balloon>span {
  border-bottom-color: #deecf9;
  border-bottom-width: 2rem;
  border-bottom-style: solid;
  border-top: 0 none;
}

.cmp-container[data-name="readtogether"] .sec-motivate .word-balloon .hash-tag>span::before {
  background: #e3effa
}

.cmp-container[data-name="readtogether"] .sec-motivate .word-balloon {
  padding-bottom: 32rem
}

.cmp-container[data-name="readtogether"] .sec-motivate .app-screen-view {
  display: block;
  position: relative;
  margin: 0 auto;
}

.cmp-container[data-name="readtogether"] .sec-motivate .line {
  position: absolute;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
.cmp-container[data-name="readtogether"] .sec-motivate .line.shown{
  animation: fadeInClip .8s .25s var(--ease) forwards
}

.cmp-container[data-name="readtogether"] .sec-motivate .app-screen {
  position: absolute;
  bottom: 0;
  left: 50%
}

.cmp-container[data-name="readtogether"] .sec-motivate .stamp {
  position: absolute;
  opacity: 0;
  transform: scale3d(1.15, 1.15, 1.15);
}

.cmp-container[data-name="readtogether"] .sec-motivate .stamp.shown {
  animation: fadeInScaleDown .75s .3s var(--bounce) forwards
}

.cmp-container[data-name="readtogether"] .sec-motivate .wrap {
  width: 100%;
}

.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group>p>span {
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group.shown>p>span{
  animation: fadeInMoveUp .6s var(--ease) forwards;
}
.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group.shown>p>span:nth-child(1){
  animation-delay: .3s;
}
.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group.shown>p>span:nth-child(2){
  animation-delay: .45s;
}
.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group h3{
  clip-path: inset(0 100% 0 100%);
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group.shown h3{
  animation: fadeInClip .7s .35s var(--ease) forwards;
}


.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group {
  height: 512rem;
  padding-top: 50rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group>h3 {
  width: 700rem;
  margin-top: 36rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group> p{
  width:400rem
}


.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .kv-area {
  height: 780rem;
  margin-bottom: -150rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .cnt-area .has-pattern {
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 150rem,
      black 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 150rem,
      black 100%);
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .kv-area .kv {
  width: 1442rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-1 {
  width: 164rem;
  top: 6.55%;
  left: 11%;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-2 {
  width: 148rem;
  top: 15%;
  left: 78%;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-3 {
  width: 148rem;
  top: 38.8%;
  left: -4.5%;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .description {
  position: absolute;
  left: 544rem;
  top: 59.35%;
  text-align: left;
  width: 396rem;
  opacity:0;
  transform: translate3d(-20%, 0, 0);
}
.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .app-screen.shown .description{
  opacity:1;
  transform: translate3d(0, 0, 0);
  transition:all .75s .8s var(--ease);
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .description>span {
  display: block;
  width: 100%;
  text-indent: 7rem;
  font-size: 38rem;
  line-height: 44rem;
  padding: 6rem 0;
  letter-spacing: -.125em;
  font-weight: 400;
  color: #fff;
  border-bottom: 2rem solid rgba(255, 255, 255, .4)
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .description>span strong {
  font-weight: 700;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .app-screen-view {
  height: 992rem;
  width: 720rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .line {
  width: 85rem;
  top: 0;
  left: 24.72%
}

.desk-top .cmp-container[data-name="readtogether"] .sec-motivate .app-screen {
  width: 503rem;
  margin-left: -266rem;
}
.cmp-container[data-name="readtogether"] .sec-motivate .app-screen{  
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-motivate .app-screen.shown{
  animation: fadeInMoveUp .75s .5s var(--ease) forwards;
}


.mobile .cmp-container[data-name="readtogether"] .sec-motivate .has-pattern {
  background: #3563d9 url(./img/motivate-bg.gif) repeat center / 150rem auto;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group {
  height: 606rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group>h3 {
  width: 552rem;
  margin-top: 50rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .cmp-title-group p{
  width: 440rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .kv-area {
  height: 645rem;
  margin-bottom: -160rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .cnt-area .has-pattern {
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 160rem,
      black 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 160rem,
      black 100%);
}
.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp > img{
  transform-origin: 50% 50%;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .kv-area .kv {
  width: 766rem;
  top:66rem;
  left:52.08%
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-1 {
  width: 164rem;
  top: 3.8%;
  left: 8.55%;
}
.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-1 > img{
  transform: rotate3d(0,0,1,-40deg);
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-4 {
  width: 166rem;
  top: 22.3%;
  left: 81%;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-2 {
  width: 188rem;
  top: 46.48%;
  right: 88.8%;
}
.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-2 > img{
  transform: rotate3d(0,0,1,45deg);
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .stamp.item-3 {
  width: 188rem;
  top: 74.12%;
  left: 91.38%;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .app-screen-view {
  height: 1592rem;
  width: 580rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .line {
  width: 80rem;
  top: 0;
  left: 21.38%
}

.mobile .cmp-container[data-name="readtogether"] .sec-motivate .app-screen {
  width: 100%;
  left:0
}



/* .sec-challenge */
.desk-top .cmp-container[data-name="readtogether"] .sec-challenge {
  background: url(./img/challenge-bg-pc.jpg) no-repeat center / cover
}
.mobile .cmp-container[data-name="readtogether"] .sec-challenge {
  background: url(./img/challenge-bg-mo.jpg) no-repeat center top / cover
}

.cmp-container[data-name="readtogether"] .sec-challenge .content {
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cmp-container[data-name="readtogether"] .sec-challenge .line {
  position: absolute;
  top: 0;
  opacity:0;
  clip-path: inset(0 0 100% 0);
}

.cmp-container[data-name="readtogether"] .sec-challenge .line.shown{
  animation: fadeInClip 2s .25s var(--ease) forwards
}

.cmp-container[data-name="readtogether"] .sec-challenge .challenge-vid-content {
  position: relative;
  z-index: 1;
  margin: 0 auto;opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-challenge .challenge-vid-content.shown{
  animation: fadeInMoveUp .5s .5s var(--ease) forwards;
}

.cmp-container[data-name="readtogether"] .sec-challenge .video-link {
  display: block;
  width: 100%;
  background: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cmp-container[data-name="readtogether"] .sec-challenge .book,
.cmp-container[data-name="readtogether"] .sec-challenge .vouchers {
  position: absolute;
  z-index: 1;
}
.cmp-container[data-name="readtogether"] .sec-challenge .book,
.cmp-container[data-name="readtogether"] .sec-challenge .vouchers,
.cmp-container[data-name="readtogether"] .sec-challenge .words,
.cmp-container[data-name="readtogether"] .sec-challenge .event-btn{
  opacity:0;
}
.cmp-container[data-name="readtogether"] .sec-challenge .challenge-vid-content.shown .book{
  animation: fadeInScaleUp .55s .75s var(--bounce) forwards;
}
.cmp-container[data-name="readtogether"] .sec-challenge .vouchers.shown,
.cmp-container[data-name="readtogether"] .sec-challenge .words.shown,
.cmp-container[data-name="readtogether"] .sec-challenge .event-btn.shown{
  animation: fadeInMoveUp .6s .85s var(--bounce) forwards;
}

.cmp-container[data-name="readtogether"] .sec-challenge .vouchers>span {
  display: block;
}

.cmp-container[data-name="readtogether"] .sec-challenge .event-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cmp-container[data-name="readtogether"] .sec-challenge .event-btn::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #78d117;
  z-index: -1;
}

.cmp-container[data-name="readtogether"] .sec-challenge .event-btn>span {
  z-index: 1;
  position: relative;
  flex: none;
  display: block;
  width: fit-content;
  font-weight: 900;
  color: #0c1a82;
  letter-spacing: -.085em
}

.cmp-container[data-name="readtogether"] .sec-challenge .event-btn:active::before {
  transform: scale(.98);
}

.cmp-container[data-name="readtogether"] .sec-challenge .word-balloon p>span::before {
  bottom: -.04em;
  height: .6em;
}

.cmp-container[data-name="readtogether"] .sec-challenge .word-balloon .subject>span::before {
  background: #e3effa
}
.cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span {
  border-color: #ebf4fb;
  border-style: solid;
  letter-spacing: -.085em;
  line-height: 0
}

.cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span+span {
  border-top: 0 none;
}

.cmp-container[data-name="readtogether"] .sec-challenge .video-link {
  border-radius: 3rem;
  padding: 3rem;
}

.cmp-container[data-name="readtogether"] .sec-challenge .has-shadow,
.cmp-container[data-name="readtogether"] .sec-challenge .event-btn::before {
  box-shadow: 0 0 50rem rgba(34, 41, 169, 1);
}


.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .content {
  width: 720rem;
  height: 1000rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .content>* {
  flex: none;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon {
  padding-bottom: 20rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span {
  border-bottom-width: 2rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span strong {
  font-size: 40rem;
  line-height: 55rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span small {
  font-size: 30.5rem;
  line-height: 47.5rem;
  font-weight: 500;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .line {
  width: 196rem;
  left: 197rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .challenge-vid-content {
  padding-top: 80rem;
  padding-bottom: 94rem;
  width: 526rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .words {
  position:absolute;z-index:1;
  right: 660rem;
  top: 457rem;
  width: 228rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .vouchers {
  left: 684rem;
  top: 447rem;
  width: 214rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .vouchers>span {
  width: 100%
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .vouchers>span+span {
  margin-top: 28rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .book {
  left: 440rem;
  top: 287rem;
  width: 154rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .event-btn {
  height: 74rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .event-btn::before {
  border-radius: 10rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-challenge .event-btn>span {
  font-size: 34rem;
  line-height: 40rem;
  padding-bottom: .15em
}



.mobile .cmp-container[data-name="readtogether"] .sec-challenge::before{
  content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:18rem;background:#230d00;z-index:0;
}
.mobile .cmp-container[data-name="readtogether"] .sec-challenge .line {
  width: 260rem;
  left: 167rem;
  height:100%;top:0;
}
.mobile .cmp-container[data-name="readtogether"] .sec-challenge .line > span{
  position:absolute;
}
.mobile .cmp-container[data-name="readtogether"] .sec-challenge .line .top{
  top:0;width:100rem;left:97rem
}
.mobile .cmp-container[data-name="readtogether"] .sec-challenge .line .btm{
  bottom:0;width:188rem;left:0
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .content {
  width: 592rem;
  height: 1376rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .content>* {
  flex: none;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon {
  padding-bottom: 30rem;margin-top:12rem
}
.mobile .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span {
  border-bottom-width: 3rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span strong {
  font-size: 35rem;
  line-height: 48rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .word-balloon>span small {
  font-size: 26.5rem;
  line-height: 39rem;
  font-weight: 500;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .challenge-vid-content {
  padding-top: 42rem;
  padding-bottom: 266rem;
  width: 586rem
}


.mobile .cmp-container[data-name="readtogether"] .sec-challenge .words {
  margin:40rem auto 0;position:relative;z-index:1;
  width: 480rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .vouchers {
  width: 511rem;
  bottom:154rem;left:50%;margin-left:-255rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .book {
  left: 466rem;
  top: 272rem;
  width: 160rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .event-btn {
  height: 100rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .event-btn::before {
  border-radius: 14rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-challenge .event-btn>span {
  font-size: 47rem;
  line-height: 55rem;
  padding-bottom:.15em
}



/* .sec-kyobo */
.cmp-container[data-name="readtogether"] .sec-kyobo {
  background: #6fbc4c
}

.cmp-container[data-name="readtogether"] .sec-kyobo .content {
  display: block;
  margin: 0 auto;
  position: relative;
}

.cmp-container[data-name="readtogether"] .sec-kyobo .line {
  position: absolute;
  top: 0;
  opacity:0;
  clip-path: inset(0 0 100% 0);
}

.cmp-container[data-name="readtogether"] .sec-kyobo .line.shown{
  animation: fadeInClip 2.2s .25s var(--ease) forwards
}

.cmp-container[data-name="readtogether"] .sec-kyobo .list {
  margin: 0 auto;
  position: relative
}
.cmp-container[data-name="readtogether"] .sec-kyobo .list > li{
  opacity:0
}
.cmp-container[data-name="readtogether"] .sec-kyobo .list.shown > li{
  animation: fadeInScaleUp .45s var(--bounce) forwards;
}
.cmp-container[data-name="readtogether"] .sec-kyobo .list.shown > li:nth-child(1){
  animation-delay: .5s;
}
.cmp-container[data-name="readtogether"] .sec-kyobo .list.shown > li:nth-child(2){
  animation-delay: .65s;
}
.cmp-container[data-name="readtogether"] .sec-kyobo .list.shown > li:nth-child(3){
  animation-delay: .8s;
}

.cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon span {
  margin: 0 auto;
  width: fit-content;
  font-weight: 700;
  letter-spacing: -.085em;
  padding: 0;
  border:0 none
}

.cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon span + span{
  border-top:0 none
}

.cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon em,
.cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon strong {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon strong::before {
  content: "";
  display: block;
  position: absolute;
  left: -.2em;
  right: -.2em;
  height: .8em;
  bottom: -.08em;
  z-index: -1;
  background: #d4ebc9
}

.cmp-container[data-name="readtogether"] .sec-kyobo .app-icon {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.cmp-container[data-name="readtogether"] .sec-kyobo .kyobo-title {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;opacity:0;
}


.cmp-container[data-name="readtogether"] .sec-kyobo .kyobo-title.shown{
  animation: fadeInMoveUp .5s .25s var(--ease) forwards;
}

.cmp-container[data-name="readtogether"] .sec-kyobo .kv {
  position: absolute;
  left: 50%;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .kv-area {
  height: 844rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .kv {
  width: 777rem;
  bottom: -108rem;
  margin-left: -388.5rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .content {
  width: 720rem;
  height: 1118rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .line {
  width: 181rem;
  left: 194rem;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .list {
  width: 562rem;
  padding-top: 82rem;
  padding-bottom: 56rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .list li {
  box-shadow: 0 0 30rem rgba(111, 188, 76, 1);
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .list li+li {
  margin-top: 30rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon {
  padding: 55rem 0;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon span {
  font-size: 42rem;
  line-height: 58rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .app-icon {
  width: 177rem;
  border-radius: 30rem;
  overflow: clip;
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .kyobo-title {
  padding-top: 107rem;
  width: 605rem
}




.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .kv-area {
  height: 728rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .kv {
  width: 602rem;
  bottom: -6rem;
  margin-left: -301rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .content {
  width: 600rem;
  height: 1176rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .line {
  width: 193rem;
  left: 140rem;
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .list {
  width: 100%;
  padding-top: 94rem;
  padding-bottom: 76rem
}

.desk-top .cmp-container[data-name="readtogether"] .sec-kyobo .list li {
  box-shadow: 0 0 30rem rgba(111, 188, 76, 1);
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .list li+li {
  margin-top: 32rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon {
  padding: 42rem 0;
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .word-balloon span {
  font-size: 36rem;
  line-height: 50rem
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .app-icon {
  width: 137rem;
  border-radius: 20rem;
  overflow: clip;
}

.mobile .cmp-container[data-name="readtogether"] .sec-kyobo .kyobo-title {
  padding-top: 97rem;
  width: 442rem
}


/* coming soon */
.cmp-container[data-name="readtogether"] .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="readtogether"] .cs-title>strong {
  display: block;
  margin: 0 auto
}

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

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

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

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

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

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

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

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

.desk-top .cmp-container[data-name="readtogether"] .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="readtogether"] .cs-title strong {
  width: 414rem;
  padding-top: 12rem
}


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

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

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

.mobile .cmp-container[data-name="readtogether"] .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="readtogether"] .cs-title strong {
  width: 405rem;
  padding-top: 150rem
}


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


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

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

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

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

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

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


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

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

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


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

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

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

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

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

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


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

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

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

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

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

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