@font-face { font-family: 'RixXladywatermelonR'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-4@1.0/RixXladywatermelonR.woff2') format('woff2');}
.is-mobile {display: none;}
.is-desktop {display: block;}


.txtPurple {color: #9383EF;}

.txtW700 {font-weight: 700;}
.txtLine {border-bottom: 1px solid #2A303c; padding-bottom: 2px;}
.txt14 {font-size: 14px;font-weight: 400; line-height: 52px;}

.mgTop80 {margin-top: 80px !important;}

.main {width: 100%;}
.text-wrap {text-align: center; margin: 100px auto 68px; }
.sub-ttl {color: #9383EF; font-weight: 700; font-size: 16px;line-height: 18px;}
h2 {font-size: 26px; font-weight: 700;  line-height: 52px;}
.txt {text-align: center; font-size: 18px; line-height: 32px; font-weight: 400; margin-bottom: 20px;}
.bd-bt {max-width: 1000px; margin: 0 auto 62px; border-bottom: 1px solid #EAECF0; padding-bottom: 60px;}

.img02 {width: 542px; height: auto; margin: 0 auto 60px;}

#blissAlbum {margin-bottom: 100px;}
#blissAlbum .swiper-slide img {width: 100%;transition: transform 0.3s ease-in-out;transition-timing-function: linear !important; /* 선형 이동 */}
#blissAlbum .swiper-button-next {right: 32.5%;}
#blissAlbum .swiper-button-prev {left: 32.5%;}
#blissAlbum .swiper-scrollbar {background: #EAECF0;}
#blissAlbum .swiper-horizontal>.swiper-scrollbar, #blissAlbum .swiper-scrollbar.swiper-scrollbar-horizontal {width: 288px; height: 5px; left: 50%; transform: translateX(-50%); bottom: 0; }
#blissAlbum .swiper-scrollbar-drag {background: #431F88;}

.character {max-width: 661px; margin: 0 auto 110px;}

.epBg {background: #F6F7F8; padding: 100px 0 80px 0; margin-bottom: 60px; position:relative; }
.epBg:before { content:""; width:850px; max-width: 85%; height:5px; background:#fff; position:absolute; left:50%; top:0; transform: translateX(-50%); }
.epBg .slide-title {margin-bottom: 16px; text-align: center; font-size: 20px; font-weight: 700; line-height: 32px;}
.epBg .slide-text {margin-bottom: 40px; font-family: "RixXladywatermelonR" !important; text-align: center; font-size: 25px; font-weight: 400; line-height: 18px;}
.epBg > p { margin-top: 40px; }

.epBg .slide-title, .epBg .slide-text {transition: opacity 0.3s ease-in-out; opacity: 1;}
#epWrap {max-width: 1600px; padding-bottom: 60px;}
#epWrap .swiper-wrapper { align-items: center;}
#epWrap .swiper-slide {transform: scale(0.85); transition: all 0.3s ease-in;}
#epWrap .swiper-slide img {width: 100%;}
#epWrap .swiper-slide-active {transform: scale(1)}
#epWrap .swiper-slide-next,
#epWrap .swiper-slide-prev {transform: scale(0.85);}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.swiper-button-next, .swiper-button-prev {width: 36px; height: 36px;}
.swiper-button-next img, .swiper-button-prev img {width: 100%;}
#epWrap .swiper-button-next, #epWrap .swiper-button-prev {top: auto; bottom: 0;}
#epWrap .swiper-button-next {right: 46%;}
#epWrap .swiper-button-prev {left: 46%;}
#epWrap .pagination {display: flex; align-items: center; gap: 6px;}
#epWrap .pagination .pagination-bullet {width: 9px; height: 9px; background-color: #D1D4DA; border-radius: 100px; display: block;transition: all 0.3s ease-in;}
#epWrap .pagination .pagination-bullet.on {background: #431F88; width: 48px;}
.moveBtn {margin: -30px auto 0;font-size: 22px; font-weight: 700; display: flex; width: 246px; height: 62px; padding: 14px 0; justify-content: center; align-items: center;border-radius: 100px; background: #9383EE; color: #fff;}

/* 팝업 */
.popupBg { width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(31, 34, 45, 0.4); z-index: 9999; display: flex; align-items: center; justify-content: center;}
.popupBg .popupInner { width:782px; height:auto;}
.popupBg .popupInner .popupClose {margin: 0 0 13px auto; width: 34px; height: 34px; padding: 0; display: block; background: transparent;}
.popupBg .popupInner .popupClose img {width: 100%;}
.popupBg .popupInner > img {width: 100%;}

/* 메인 팝업 */
.bliss_pop_bg {background: rgba(0, 0, 0, 0.8);display: none;z-index: 999999}
.bliss_pop {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.bliss_pop .bliss_logo_wrap {margin-bottom: 28px; position: relative;}
.bliss_pop .bliss_logo_wrap img:not(.bliss_logo) {position: absolute;}
.bliss_pop .bliss_logo_wrap img.glitter1 {top: 2px; right: 27px;
    -webkit-animation: gglitter-grow1 1.7s ease-in-out 1s infinite both running;
    animation: glitter-grow1 1.7s ease-in-out 1s infinite both running;}
.bliss_pop .bliss_logo_wrap img.glitter2 {top: 23px; right: 13px;
    -webkit-animation: glitter-grow2 1.7s ease-in infinite both running;
    animation: glitter-grow2 1.7s ease-in infinite both running; animation-delay:0.5s;}
.bliss_pop .bliss_logo_wrap img.glitter3 {bottom: 32px; left: -4px;
    -webkit-animation: glitter-grow3 1.9s linear infinite both running;
    animation: glitter-grow3 1.9s linear infinite both running; animation-delay:0.7s;}

.bliss-btn-box{width: 100%;  text-align: center; display: flex; align-items: center; justify-content: center}
.bliss-btn-box > a{ height: 84px; display: flex; align-items: center; justify-content: start; color: #fff; font-size: 18px; font-size: 25px; border-radius: 8px;  padding-left: 44px; box-sizing: border-box}
.bliss-btn-box > a:first-of-type{margin-right: 60px; width: 100%; max-width: 388px; background: url("../img/bliss_arrow.png") no-repeat right  50px center #4A515F; background-size: 15.25px;}
.bliss-btn-box > a:last-of-type{margin-right: 60px; width: 100%; max-width: 424px;  background: url("../img/bliss_arrow.png") no-repeat right  50px center #4A515F; background-size: 15.25px;}
.epBg > p.new-txt{font-size: 30px; line-height: 45px; color: #2A303C; margin-bottom: 60px; margin-top: 100px}
.bk-list-detail-box{width: 100%;  max-width: 1320px;}
.bk-list-detail-box p.bk-list-title01{color: #2A303C; font-size: 20px; font-weight: 400; line-height: 29px; margin-bottom: 5px}
.bk-list-detail-box > h1.bk-list-title02{color: #2A303C; font-size: 27px; font-weight: 700; line-height: 43px; margin-bottom: 80px;}
.bliss_detail-ul{display: flex; align-items: center; justify-content: center}
/*.bliss_detail-ul > li:first-of-type{width: 100%; max-width: 732px;}*/
/*.bliss_detail-ul > li:nth-of-type(2){width: 100%; max-width: 191px; margin-left: 85px}*/

.bliss_detail-ul > li:first-of-type {width: 100%; max-width: 732px;}
.bliss_detail-ul > li:nth-of-type(2) {width: 100%; max-width: 191px; margin-left: 85px;}
.bliss_detail-ul > li > strong{display: flex; font-size: 20px; line-height: 43px; font-weight: 700; margin-bottom: 15px;}
.bliss_detail-ul > li > strong > div{width: 40px; height: 40px; background-color: #D1D4DA; border-radius: 16px; margin-right: 16px; display: flex; align-items: center; justify-content: center}
.bliss_detail-ul > li > strong > div > img{width: 30px; height: 30px; }
.bliss_detail-ul > li > img{margin-bottom: 16px; width: 100%;}
.bliss_detail-ul > li:first-of-type > img{max-width: 732px;}
.bliss_detail-ul > li:last-of-type > img{max-width: 191px; margin: 0 auto 16px}
#bliss_img_down{border: none; background: url("../img/bliss_bk_down.png") no-repeat right center; font-size: 16px; line-height: 20px; font-weight: 700; background-size: contain ; padding-right: 30px}
.back_detail{display: flex; align-items: center; justify-content: center; margin: 95px auto 0;}
.back_detail > a{ font-size: 20px; line-height: 26px; border: 1px solid #D1D4DA; border-radius: 16px; width: 168px; height: 60px; display: flex; align-items: center; justify-content: center}
.bl-pc-img{position: relative; max-width: 732px; max-height: 420px; height: 420px; margin-bottom: 16px; overflow: hidden}
.bl-pc-img > img{position: absolute; left: 0; bottom: 0; max-width: 732px}
@keyframes glitter-grow1 {
    0% {-webkit-transform: scale(0.5); transform: scale(0.5);}
    50% {-webkit-transform: scale(1); transform: scale(1);}
    60% {-webkit-transform: scale(1); transform: scale(1);}
    100% {-webkit-transform: scale(0.5); transform: scale(0.5);}
}
@keyframes glitter-grow2 {
    0% {-webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0.5;}
    30% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
    50% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
    100% {-webkit-transform: scale(0.57); transform: scale(0.7); opacity: 0.5;}
}

@keyframes glitter-grow3 {
    0% {-webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0;}
    40% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
    60% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;}
    100% {-webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0;}
}
.bliss_pop p {margin-bottom: 60px; text-align: center; color: #fff; font-size: 23px; font-weight: 700; line-height: 34px;}
.bliss_pop .bliss_btn_wrap {display: flex; align-items: center; justify-content: center; gap: 24px;}
.bliss_pop .bliss_btn_wrap > * {height: 43px; text-align: center; padding: 0 43px; background: transparent; border: 1px solid #fff; border-radius: 100px; color: #fff; font-size: 18px; font-weight: 400; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-in;}
.bliss_pop .bliss_btn_wrap > *:hover {background: #fff; color: #2A303c;}


/*수정*/
.text-wrap > h2 { font-size: 40px; font-weight: 700; margin: 16px 0 40px 0; }
.text-wrap > h3 { font-size: 20px; font-weight: 400; }
.text-wrap > p { font-size: 18px; font-weight: 400; line-height: 32px; }
.blissService {background: #ffffff; display: flex; flex-direction: column; padding: 100px 0 96px;}
.blissService .text-wrap {margin: 0;}
.blissService > .txt2 {margin: 60px 0 20px; }
.blissService > .txt3 {margin-bottom: 20px; }
.text-wrap > p > strong { font-weight: 700; }
.blissService > img {width: 1320px; text-align: center; margin: 40px auto; }
.blissService .btn_submit { display:flex; justify-content: center; align-items: center; width: 420px; height: 100px; text-align: center; border-radius: 8px; color:#fff; font-size: 30px; font-weight: 700;
    background:#431F88; line-height: 100px; margin:0 auto;
}
.blissService .btn_submit > img { width:20px; height:17px; margin-left:12px; }

.friends-wrap { width:100%; max-width: 880px; margin:0 auto 0 auto; display:flex; flex-direction: column; justify-content: flex-start; }
.friends-wrap > li { width:100%; display:flex; }
.friends-wrap > li:first-child { margin-bottom: 63px; }
.friends-wrap > li:nth-child(2) { margin-bottom: 50px; }
.friends-wrap > li > ul { width:100%; display:flex; align-items: flex-end; justify-content: space-between; }
.friends-wrap > li > ul > li { text-align: left; }
.friends-wrap > li > ul > li > p { font-size: 16px; font-weight: 400; line-height: 28px; }
.friends-wrap > li:nth-child(2) > ul > li { text-align: right; }

.friends-wrap .img-title { height:83px; }
.friends-wrap .img-charactor { height:298px; }

#friend-wrap { background: #F6F7F8; padding: 90px 0 100px 0; margin-bottom:0 !important; }
.pc-none{display: none;}

@media screen and (max-width:767px) {
    .is-mobile {display: block;}
    .is-desktop {display: none;}

    .mgBt30 {margin-bottom: 30px !important;}
    .mgBt21 {margin-bottom: 21px !important;}

    .swiper-button-next, .swiper-button-prev {display: block !important; width: 26px; height: 26px;}
    #blissAlbum.swiper {padding-bottom: 20px; margin-bottom: 78px;}
    #blissAlbum .swiper-horizontal>.swiper-scrollbar, #blissAlbum .swiper-scrollbar.swiper-scrollbar-horizontal {width: 45%; height: 4px;}
    #blissAlbum .swiper-button-next {right: 8.5%;}
    #blissAlbum .swiper-button-prev {left: 8.5%;}
    .text-wrap { margin: 60px auto 50px; }
    .text-wrap > h3 {font-size: 18px; line-height: 24px;}
    .text-wrap > h2 {font-size: 26px; font-weight: 700; line-height: 30px; margin-bottom: 20px;}
    .text-wrap > p {font-size: 15px; line-height: 24px; font-weight: 400;}
    .img02 {width: 90%; height: auto;}

    .character.is-mobile {width: 85%; margin-bottom: 40px; display: flex; flex-direction: column; gap: 40px; justify-content: center;}

    .epBg {padding: 60px 0 60px; margin-bottom: 44.5px;}
    .epBg .slide-title{margin-bottom: 0; font-size: 15px; line-height: 32px;}
    .epBg .slide-text {margin-bottom: 19px; font-size: 18px; line-height: 25px;}
    #epWrap {padding-bottom: 45px;}
    #epWrap .swiper-button-next, #epWrap .swiper-button-prev {width: 30px; height: 30px;}
    #epWrap .swiper-button-next {right: 40%;}
    #epWrap .swiper-button-prev {left: 40%;}
    #epWrap .pagination {margin-top: 18px;}
    #epWrap .pagination .pagination-bullet {width: 7px; height: 7px;}
    #epWrap .pagination .pagination-bullet.on {width: 36px;}
    .txt14 {line-height: 14px;}
    .bd-bt {padding-bottom: 44px; margin-bottom: 44px; width: 87%;}
    span.null {height: 12px;}

    .moveBtn {margin-top: -16px;width: 200px; height: 46px;font-size: 18px;}

    .popupBg .popupInner { width:90%; height:auto;}
    .popupBg .popupInner .popupClose {margin: 0 0 13px auto; width: 28px; height: 28px; padding: 0;}

    .blissService {padding: 60px 10px;}
    .blissService .txt2 {margin: 40px 0 12px; }
    .blissService .txt3 {margin-bottom: 16px; word-break: keep-all;}
    .blissService .letter {width: 294px; margin: 23px auto 32px;}
    .blissService > .btn_submit {width: 220px; height: 46px; font-size: 16px; border-radius: 2px;}
    .blissService > .btn_submit > img {height: 20px;}
    /* 메인 팝업 */
    .bliss_pop .bliss_logo_wrap .bliss_logo {width: 163px;}
    .bliss_pop .bliss_logo_wrap img.glitter1 {width: 14px; top: 0; right: 20px;}
    .bliss_pop .bliss_logo_wrap img.glitter2 {width: 6.38px; top: 17px; right: 9px;}
    .bliss_pop .bliss_logo_wrap img.glitter3 {width: 3.57px; bottom: 24px; left: -1px;}
    .bliss_pop p {margin-bottom: 40px; font-size: 17.5px; line-height: 28px;}
    .bliss_pop .bliss_btn_wrap {flex-direction: column; gap: 20px;}
    .bliss_pop .bliss_btn_wrap > * {padding: 0; width: 151px; font-size: 14px; }
    /*수정*/
    .mgTop100 {margin-top: 100px;}

    .blissService {padding: 60px 10px;}
    .blissService .txt2 {margin: 40px 0 12px; }
    .blissService .txt3 {margin-bottom: 16px; word-break: keep-all;}
    .blissService .letter {width: 294px; margin: 23px auto 32px;}
    .blissService > .btn_submit {width: 220px; height: 46px; font-size: 16px; border-radius: 2px;}
    .blissService > .btn_submit > img {height: 20px;}

    .friends-wrap {margin-bottom: 0;}
    .friends-wrap > li {margin: 40px 0 0!important;}
    .friends-wrap > li:nth-child(2) > ul > li {text-align: center;}
    .friends-wrap > li > ul {flex-direction: column-reverse;}
    .friends-wrap > li > ul.col {flex-direction: column;}
    .friends-wrap > li > ul > li, .friends-wrap > li > ul > li.img {text-align: center;}
    .friends-wrap > li > ul > li > p {margin-top: 8px; text-align: center; font-size: 15px; line-height: 24px; }
    .friends-wrap .img-charactor {width: 60%; height: auto;}
    .friends-wrap .img-title {width: 60%; height: auto;}
    .mtxt {font-size: 15px; line-height: 26px; margin-bottom: 0;}

    #friend-wrap {   }
.text-wrap {text-align: center; margin: 100px auto 68px; }
.txt {text-align: center; font-size: 18px; line-height: 32px; font-weight: 400; margin-bottom: 20px;}
#blissAlbum {margin-bottom: 100px;}
.epBg {background: #F6F7F8; padding: 100px 0 80px 0; margin-bottom: 60px; position:relative; }
.epBg:before { content:""; width:850px; max-width: 85%; height:5px; background:#fff; position:absolute; left:50%; top:0; transform: translateX(-50%); }
.epBg > p { margin-top: 40px; }
/*수정*/
.text-wrap > h2 { font-size: 40px; font-weight: 700; margin: 16px 0 40px 0; }
.text-wrap > h3 { font-size: 20px; font-weight: 400; }
.text-wrap > p { font-size: 18px; font-weight: 400; line-height: 32px; }
.blissService {background: #ffffff; display: flex; flex-direction: column; padding: 100px 0 96px;}
.blissService .text-wrap {margin: 0;}
.blissService > .txt2 {margin: 60px 0 20px; }
.blissService > .txt3 {margin-bottom: 20px; }
.text-wrap > p > strong { font-weight: 700; }
.blissService > img {width: 1320px; text-align: center; margin: 40px auto; }
.blissService .btn_submit { display:flex; justify-content: center; align-items: center; width: 420px; height: 100px; text-align: center; border-radius: 8px; color:#fff; font-size: 30px; font-weight: 700;
    background:#431F88; line-height: 100px; margin:0 auto;
}
.blissService .btn_submit > img { width:20px; height:17px; margin-left:12px; }

.friends-wrap { width:100%; max-width: 880px; margin:0 auto 0 auto; display:flex; flex-direction: column; justify-content: flex-start; }
.friends-wrap > li { width:100%; display:flex; }
.friends-wrap > li:first-child { margin-bottom: 63px; }
.friends-wrap > li:nth-child(2) { margin-bottom: 50px; }
.friends-wrap > li > ul { width:100%; display:flex; align-items: flex-end; justify-content: space-between; }
.friends-wrap > li > ul > li { text-align: left; }
.friends-wrap > li > ul > li > p { font-size: 16px; font-weight: 400; line-height: 28px; }
.friends-wrap > li:nth-child(2) > ul > li { text-align: right; }

.friends-wrap .img-title { height:83px; }
.friends-wrap .img-charactor { height:298px; }

#friend-wrap { background: #F6F7F8; padding: 90px 0 100px 0; margin-bottom:0 !important; }


    .text-wrap { margin: 60px auto 50px; }
    .text-wrap > h3 {font-size: 18px; line-height: 24px;}
    .text-wrap > h2 {font-size: 26px; font-weight: 700; line-height: 30px; margin-bottom: 20px;}
    .text-wrap > p {font-size: 15px; line-height: 24px; font-weight: 400;}
    .epBg {padding: 60px 0 60px; margin-bottom: 44.5px;}
    /*수정*/
    .mgTop100 {margin-top: 100px;}
    .blissService {padding: 60px 10px;}
    .blissService .txt2 {margin: 40px 0 12px; }
    .blissService .txt3 {margin-bottom: 16px; word-break: keep-all;}
    .blissService .letter {width: 294px; margin: 23px auto 32px;}
    .blissService > .btn_submit {width: 220px; height: 46px; font-size: 16px; border-radius: 2px;}
    .blissService > .btn_submit > img {height: 20px;}
    .friends-wrap {margin-bottom: 0;}
    .friends-wrap > li {margin: 40px 0 0!important;}
    .friends-wrap > li:nth-child(2) > ul > li {text-align: center;}
    .friends-wrap > li > ul {flex-direction: column-reverse;}
    .friends-wrap > li > ul.col {flex-direction: column;}
    .friends-wrap > li > ul > li, .friends-wrap > li > ul > li.img {text-align: center;}
    .friends-wrap > li > ul > li > p {margin-top: 8px; text-align: center; font-size: 15px; line-height: 24px; }
    .friends-wrap .img-charactor {width: 60%; height: auto;}
    .friends-wrap .img-title {width: 60%; height: auto;}
    .mtxt {font-size: 15px; line-height: 26px; margin-bottom: 0;}
    #friend-wrap {   }


    .bliss-btn-box{width: 100%;  text-align: center; display: flex; flex-direction: column; align-items: center }
    .bliss-btn-box > a{white-space: nowrap; padding: 0 63px 0 39px;  height: 47px; display: flex; align-items: center; justify-content: start; color: #fff;  border-radius: 8px; max-width: 270px; width: 100% ; font-size: 16px;}
    .bliss-btn-box > a:first-of-type{margin-right: 0px; margin-bottom: 26px; padding-left: 39px; max-width: 270px; background: url(../img/bliss_arrow.png) no-repeat right 41.5px center #4A515F; background-size: 13.5px;}
    .bliss-btn-box > a:last-of-type{margin-right: 0px; margin-bottom: 26px; padding-left: 27px; max-width: 270px; background: url(../img/bliss_arrow.png) no-repeat right 29.5px center #4A515F; background-size: 13.5px;}
    .epBg > p.new-txt{font-size: 18px; line-height: 30px; color: #2A303C; margin-bottom: 32px; margin-top: 80px}
    .bk-list-detail-box p.bk-list-title01{font-size: 12.5px; line-height: 17px; font-weight: 400; border: 1px solid #D1D4DA; border-radius: 20px; width: 144px; height: 31px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;}
    .bk-list-detail-box > div:first-of-type{display: flex; align-items: center; justify-content: center}
    .pc-none{display: block}
    .bk-list-detail-box > h1.bk-list-title02{font-size: 25px; line-height: 35px; margin-bottom: 60px }
    .bliss_detail-ul{display: block}
    .bliss_detail-ul > li > strong > div{width: 30px; height: 30px; margin-right: 12px; border-radius: 12px;}
    .bliss_detail-ul > li > strong > div > img{width: 22.5px; height: 22.5px}
    .bliss_detail-ul > li > strong{font-size: 20px; line-height: 32px; justify-content: center}
    .bliss_detail-ul > li:nth-of-type(2),
    .bliss_detail-ul > li:first-of-type{max-width: 100%; margin-left: 0}
    .bliss_detail-ul > li:first-of-type{margin-bottom: 80px;}
    .bk-list-detail-box{padding-left: 24px; padding-right: 24px; margin-top: 40px}
    .bliss_detail-ul > li:last-of-type > img{max-width: 191px; margin: 0 auto; margin-left: auto; display: block; margin-bottom: 16px;}
    .bl-pc-img{position: relative; max-width: 732px; max-height: 100%; height: 100%}
    .bl-pc-img > img{position: static; left: 0; bottom: 0; display: block; width: 100%}
}