@charset "UTF-8";
/*! mobile 버전 - css */
.preview-popup-wrap{image-rendering:-moz-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;-ms-interpolation-mode:nearest-neighbor}
@media (max-width: 1023px){
    .txt-area .txt{line-height:1.65}
    .video-container{margin-bottom:2rem;-webkit-filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.16));filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.16))}
    .concept-type{margin:4rem auto 5rem auto}
    .concept-type .step-sub-title{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto}
    .concept-type .step-sub-title.desc{padding-left:3rem}
    .concept-type .step-sub-title.desc::before{content:"";position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:2.5rem;height:2.4rem;background:url(../images/introduce/doremi_concept_ico.png) no-repeat center center/cover}
    .concept-type .step-sub-desc{color:#222;line-height:1.8;padding:2rem 0 3rem 0}
    .step-tag{display:block;text-align:center;font-size:1.5rem;line-height:1.66;font-weight:500;background:#42c2cc;color:#fff;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:0.2rem 1rem;margin:5rem auto 1rem auto;white-space:nowrap;border-radius:100px}
    .step-title{font-size:2.8rem;line-height:1.35}
    .step-type .song{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;gap:0.7rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:1.3rem;line-height:1.76;margin-top:0.6rem;padding:0.3rem 0.7rem;background:rgba(150, 105, 209, 0.5);border-radius:8px}
    .step-type .song .object{font-weight:700;color:#222}
    .step-type .song .name{display:block;line-height:1.4}
    .step-1::before{height:-webkit-calc(100% - 100px);height:calc(100% - 100px);height:-webkit-calc(100% - 32.5rem);height:calc(100% - 32.5rem)}
    .step-1 .txt-area{margin-bottom:2rem}
    .step-1 .img-box{position:relative;width:26.8rem;margin:0 auto;margin-top:3.4rem}
    .step-2::before{height:-webkit-calc(100% - 74.5rem);height:calc(100% - 74.5rem)}
    .step-2 .img-box{position:relative;width:100%;padding:0 6rem;margin:2.5rem 0 0 2.5rem;z-index:2}
    .step-2 .txt-area .txt .mo_block{display:block!important}
    .step-2 .txt-area .txt .mo_none{display:none!important}
    .step-3::before{height:-webkit-calc(100% - 35rem);height:calc(100% - 35rem)}
    .step-3 .step-container{width:100%;margin:3.5rem auto 0;padding:0 2rem;z-index:2}
    .step-3 .step-container li{margin-top:4rem}
    .step-3 .step-container li:first-child{margin-top:0}
    .step-4{padding-bottom:6rem}
    .step-4::before{height:100%}
    .step-4 .img-box{margin-top:1.1rem;position:relative}
    .step-4 .preview-btn{position:absolute;right:4.1rem;top:50%;margin-top:-0.5rem;border-radius:3.5rem;-webkit-box-shadow:0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.16);box-shadow:0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.16)}
    [data-chapter="1"] .round-type .round-type-sub-desc{padding:0 2rem}
    [data-chapter="2"] .content-box:nth-child(2) .use-tips-swiper .swiper-pagination{bottom:-10px}
    .preview-popup-wrap.has-only-music .preview-popup-dialog{opacity:1}
    .preview-popup-wrap.has-only-music .preview-controler-area{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
    .preview-popup-wrap.has-only-music .preview-controler-area .drop-down-container{margin-left:15px}
    .preview-popup-wrap.has-only-music .preview-controler-area .drop-down-btn{min-width:150px}
    .step-4-swiper-popup04 .ui-play-pause-btn,.step-4-swiper-popup05 .ui-play-pause-btn,.step-4-swiper-popup06 .ui-play-pause-btn{display:block!important}
}
/*! pc & tablet 버전 - css */
@media (min-width: 1024px){
    .book-view-container .video-container{width:60rem;margin-bottom:2rem;-webkit-filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.16));filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.16))}
    .book-view-container .concept-type{margin:7.2rem auto 10rem auto}
    .book-view-container .concept-type .step-sub-title{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto}
    .book-view-container .concept-type .step-sub-title.desc{padding-left:5.4rem}
    .book-view-container .concept-type .step-sub-title.desc::before{content:"";position:absolute;top:0;left:0;width:4.6rem;height:4.4rem;background:url(../images/introduce/doremi_concept_ico.png) no-repeat center center/cover}
    .book-view-container .concept-type .step-sub-desc{color:#222;line-height:2;padding:5.6rem 0 7rem 0}
    .book-view-container .concept-type .img-box{width:64.8rem;margin:0 auto}
    .book-view-container .step-tag{display:block;text-align:center;font-size:2.6rem;line-height:1.38;font-weight:500;background:#42c2cc;color:#fff;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:1rem 1.6rem;margin:11rem auto 2rem auto;white-space:nowrap;border-radius:100px}
    .book-view-container .step-type .song{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;gap:1.4rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:1.8rem;line-height:1.55;margin-top:1.5rem;padding:0.7rem 1.4rem;background:rgba(150, 105, 209, 0.5);border-radius:1.4rem}
    .book-view-container .step-type .song .object{font-weight:700;color:#222}
    .book-view-container .step-type .song .name{display:block;line-height:1.4}
    .book-view-container .step-1::before{height:-webkit-calc(100% - 28rem);height:calc(100% - 28rem)}
    .book-view-container .step-1 [class*="swiper-btn-round"]{top:43%}
    .book-view-container .step-2::before{height:-webkit-calc(100% - 88rem);height:calc(100% - 88rem)}
    .book-view-container .step-2 .round-type-tag{margin-bottom:3rem}
    .book-view-container .step-2 .img-box{position:relative;max-width:132rem;width:100%;margin:5rem auto 0;z-index:2}
    .book-view-container .step-2 .txt-area .txt .mo_block{display:none!important}
    .book-view-container .step-3::before{height:-webkit-calc(100% - 29.5rem);height:calc(100% - 29.5rem);z-index:-1}
    .book-view-container .step-3 .step-container{max-width:60rem;width:100%;margin:5.6rem auto 0}
    .book-view-container .step-3 .step-container li{margin-top:10rem}
    .book-view-container .step-3 .step-container li:first-child{margin-top:0}
    .book-view-container .step-4{padding-bottom:10rem}
    .book-view-container .step-4::before{height:100%}
    .book-view-container .step-4 .img-box{margin-top:3.8rem;position:relative}
    .book-view-container .step-4 .preview-btn{position:absolute;right:6.5rem;top:50%;margin-top:-1.2rem;border-radius:3.5rem;-webkit-box-shadow:0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.16);box-shadow:0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.16)}
    .book-view-container .step-4 .swiper-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .book-view-container .step-4 .public-swiper-container [class*="swiper-btn-round"]{margin-top:-1.6rem}
    .book-view-container [data-chapter="1"] .round-type .round-type-sub-desc{padding:0 2rem}
    .book-view-container [data-chapter="2"] .use-tips-swiper .swiper-pagination{bottom:0;margin-top:4rem}
    .preview-popup-wrap.has-only-music .preview-popup-dialog{opacity:1}
    .preview-popup-wrap.has-only-music .preview-controler-area{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
    .preview-popup-wrap.has-only-music .preview-controler-area .drop-down-container{margin-left:15px}
    .preview-popup-wrap.has-only-music .preview-controler-area .drop-down-btn{min-width:150px}
    .step-4-swiper-popup04 .ui-play-pause-btn,.step-4-swiper-popup05 .ui-play-pause-btn,.step-4-swiper-popup06 .ui-play-pause-btn{display:block!important}
}