@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

#middleArea {background: url(/images/main/main_bg.jpg) no-repeat top 0 left 50% / cover;}
.cm-sub-bottom {padding: 10rem 0 15rem;}
.cm-sub-tit {text-align: center; width: 40rem; height: 8.5rem; border-radius: 4.25rem; padding: 0.7rem; background: linear-gradient(136deg, #ff8bef 20%, #4cd2fe 80% ); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto;}
.cm-sub-tit.long-tit {width: 60rem;}
.cm-sub-tit .inner {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;  background: #fff; border-radius: 4.25rem; }
.cm-sub-tit .inner span {position: relative; font-size: 3.2rem; letter-spacing: -0.055em; z-index: 1; line-height: 1.5;}

.cm-sub-tit img {max-width: 100%;}

.con-title {position: relative; text-align:center; margin-bottom: 3.5rem; padding-top: 8rem;}
.con-title:before {position: absolute; content: ''; top: 0; left: 50%; margin-left: -3.9rem; width: 7.8rem; height: 7rem; background: url(/images/content/cm_tit_point.png)no-repeat center/cover;  animation: infinitePoint 5s infinite}

@keyframes infinitePoint {
    0% {
        transform: rotateY(0)
    }

    50% {
        transform: rotateY(180deg)
    }

    100% {
        transform: rotateY(0)
    }
}

.sub-line-section {position: relative;}
.sub-line-section:before {position: absolute; content: ''; width: 113.7rem; height: 6.2rem; top: 0; left: 50%;/*  transform:translateX(-50%); */ margin-left: -56.85rem; background: url(/images/main/main_section_line.png)no-repeat center/100%;}

/* -------- 공통 :: 텍스트 -------- */
.cm-effect-txt {position: relative; color: #fff;}
.cm-effect-txt::before { content: attr(data-text);
  position: absolute;
  top: 0; left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  z-index: -1;
  -webkit-text-stroke: 4px transparent; 
  background: linear-gradient(45deg, #e832ca, #e566ea, #7f90ea, #02afff);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 3px rgba(255,255,255,1));} 

.cm-effect-txt.style02::before {
	position: absolute;
	 top: 0; left: -7px;
	 width: calc(100% + 14px);
	 height: calc(100% + 14px);
	 z-index: -1;
	  -webkit-text-stroke: 7px transparent; 
	 background: linear-gradient(136deg, #ff8bef, #4cd2fe);
	  -webkit-background-clip: text;
	  color: transparent;
	  filter: drop-shadow(0 0 7px rgba(255,255,255,1));} 

/* ******************  탄정보 ********************** */
.part-tab-wrap {position: relative;}
.part-tab-wrap.display-m {display: none;}
.part-tab-list-inner li a {display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; color: #ff5bea; border-radius: 3rem; border: 3px solid #ffeefd; background:#ffeefd; height: 6rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; transition:all 0.4s;}
.part-tab-list-inner li.selected a {background: #fff; border-color: #ff5bea;}
.part-tab-wrap button {position: absolute; top: 50%; margin-top: -1.8rem; width: 3.6rem; height: 3.6rem; color: #ff5bea;}
.part-tab-wrap button.prev {left: -5rem; transform: rotate(-180deg)}
.part-tab-wrap button.next {right: -5rem;}
.part-tab-wrap button.swiper-button-disabled {opacity: 0.3;}
.part-tab-wrap button i {font-size: 3.6rem; line-height: 3.6rem;}
.part-tab-content-style {margin-top: 10rem;}

.part-con01 {padding: 11rem 0 10rem;}
.part-con01-inner {width: 100%; display: flex; align-items: center;}
.part-con01-inner .img-con {width: 50%;}
.part-con01-inner .img-con img {max-width: 100%;}
.part-con01-inner .txt-con {width: 50%; padding-left: 3.7rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.part-con01-inner .txt-con .txt01 {margin-bottom: 4.5rem;}
.part-con01-inner .txt-con .txt01 img{max-width: 100%;}
.part-con01-inner .txt-con .txt02 {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; color: #656565; line-height: 1.5;}

.part-con02 {padding: 11rem 0 15.5rem;}
.part-con02-tit {text-align: center; margin-bottom: 6rem;}
.part-con02-tit img {max-width: 100%;}
.part-card-list { display: flex; flex-wrap: wrap; margin:-6.2rem -4.5rem;}
.part-card-list li {position: relative; width: calc(50% - 9rem); margin: 6.2rem 4.5rem; border: 2.5px dotted var(--main-color); border-radius: 4.6rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; background: #fff;}
.part-card-list li .inner {display: block; width: 100%; height: 100%;}
.part-card-list li .img-box {position: relative; width: 100%; height: 53rem;}
.part-card-list li .img-box span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 2rem; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.part-card-list li .img-box img {max-width: 100%; max-height: 100%;}
.part-card-list li .txt-box {border-radius: 0 0 4.6rem 4.6rem; background: #fff7fb; padding: 4.5rem 5rem 7.5rem; height: calc(100% - 53rem); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.part-card-list li .txt-box .topics-tit {display: inline-block; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.44; background-image: linear-gradient(to right, #f048c2, #00ace3); background-clip: text; -webkit-background-clip: text;color: transparent;}
.part-card-list li .txt-box .topics-txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; color: #656565; line-height: 1.5; padding-top: 2rem;}
.part-card-list li .more-btn {position: absolute; display: flex; align-items: center; justify-content: center; bottom: -5.3rem; left: 50%; margin-left: -6.4rem; width: 12.8rem; height: 10.6rem; text-align: center; background: url(/images/main/main_con03_btn.png)no-repeat center/100%;} 
.part-card-list li .more-btn strong {display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; color: #fff; margin-top: -0.5rem}
.part-con03 {padding: 11.5rem 0 15rem;}
.part-con04 {padding: 13.5rem 0 7.5rem;}
.part-con04 .part-download-btn {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 50rem; height: 7rem; border-radius:3.5rem ; background: linear-gradient(to right, #e938cd, #1badfe); padding:0 4rem; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto 1.5rem;}
.part-con04 .part-download-btn i {font-size: 2.5rem;}
.part-con04 span {display: block; text-align: center; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; color: #656565; line-height: 1.5;}
.part-con05 {padding-top: 12.5rem;}

.part-tab-wrap-bottom {padding-top: 11.5rem;}
.part-bottom-tab-list-inner {display: flex; flex-wrap: wrap; margin: -0.75rem -0.7rem;}
.part-bottom-tab-list-inner li {width: calc(25% - 1.4rem); margin: 0.75rem 0.7rem;}
.part-bottom-tab-list-inner li a {}

/* ******************  카드리스트 ********************** */
.card-container {margin-top: 6rem;}
.star-box {margin-bottom: 4rem; text-align:center;}
.card-info-con {padding: 11.5rem 0 10rem;}
.card-info-box + .card-info-box {padding-top: 14rem;}
.card-name {font-size:1.6rem; letter-spacing:-0.04em; color: #ff5bea; font-weight: 400; line-height:1.2;}
.card-txt {font-size:1.4rem; letter-spacing:-0.04em; color: #656565; line-height:1.2; margin-top: 0.9rem;}
.card-info-con .card-list {margin: -5.8rem -0.9rem 0; display: flex; flex-wrap: wrap;}
.card-info-con .card-list li {margin:5.8rem 0.9rem 0; width: calc(20% - 1.8rem);}
.card-info-con .card-list .info-box {text-align:center; margin-top: 2.3rem;}
.card-info-con .card-list li a {position: relative;}
.card-info-con .card-list .new {position:absolute; top:-1.1rem; left: 50%; transform:translateX(-50%); font-size:1.2rem; letter-spacing:-0.04em; color: #ffff00; font-weight: 400; background: linear-gradient(180deg, rgba(255, 74, 245, 1) 0%, rgba(255, 116, 242, 1) 40%, rgba(124, 1, 177, 1) 100%); height: 2.2rem; text-align: center; line-height: 2.2rem; border-radius: 5px; padding: 0 1.021rem;}
.card-info-con .card-img-box img {border-radius:10px; max-width: 100%;}

/* 팝업 */
.card-modal-content {position: relative; width: 96%; max-width: 770px; margin: 20px auto;}
.card-pop-list {display: flex; justify-content: center; margin: 0 -1rem;}
.card-pop-list li {width: calc(50% - 2rem); margin: 0 1rem;}
.card-pop-list li .img-box {position: relative; width: 100%; height: 0; padding-top: 146.667%; border-radius:1.5rem; overflow: hidden; }
.card-pop-list li .img-box img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.card-modal-content .modal-close-btn {width: 3.8rem; height: 3.8rem;top: -3rem; right: -5rem; display: flex; justify-content: center; align-items: center; background: #fff; border-radius:100%;}
.card-modal-content	.modal-close-btn span {display:flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius:100%; background: #DD81D1;background: linear-gradient(90deg, rgba(221, 129, 209, 1) 0%, rgba(40, 202, 253, 1) 100%);}
.card-list-arrows {position: absolute;top: 50%; left: 50%; width: 117.663%;  height: 4.8rem; transform: translateY(-50%) translateX(-50%);}
.card-list-arrows .arrow-prev span { display:inline-block;width: 0px;height: 0px;  border-top: 11px solid transparent; border-right: 16px solid #fff; border-bottom: 11px solid transparent; margin-left: -0.5rem;}
.card-list-arrows .arrow-next span {display:inline-block;width: 0px;  height: 0px;  border-top: 11px solid transparent;border-left: 16px solid #fff; border-bottom: 11px solid transparent; margin-right: -0.5rem;}
.card-list-arrows button {position: absolute; top: 0; display: flex; justify-content: center; width: 4.8rem;  height: 4.8rem; border-radius: 100%; background: linear-gradient(90deg, rgba(255, 92, 234, 1) 0%, rgba(241, 180, 233, 1) 100%); border: 5px solid #fff;align-items: center;}
.card-list-arrows .arrow-prev {left: 0;} 
.card-list-arrows .arrow-next {right: 0; background: #8BDEFD; background: linear-gradient(90deg, rgba(139, 222, 253, 1) 0%, rgba(40, 202, 253, 1) 100%);}

/* ******************  동영상 ********************** */
.video-intro-con {padding: 11.5rem 0 8rem;}
.video-title {text-align:center; }
.video-intro {position: relative; top: -1rem;}
.video-intro a {display: block; position: relative; text-align: center;}
.video-intro a img {position: relative; }
.intro-video {position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.video-list-con {padding: 11.5rem 0 2rem;}
.video-list-con .video-title {margin-bottom: 6rem;}
.video-list {display:flex; flex-wrap:wrap; margin: -3rem -1.7rem;}
.video-list li {width: calc(33.3333% - 3.4rem); margin: 3rem 1.7rem; /* overflow:hidden; */}
.video-list li .video-box {}
.video-list li .video-box a {position: relative; display: block; width: 100%; border-radius: 3rem; padding: 0.5rem; box-sizing: border-box; background: linear-gradient(to right, #ff8bef, #4cd2fe);}
.video-list li .video-box a:before {position: absolute; content: ''; top: 50%; left: 50%; margin-top: -2.9rem; margin-left: -2.9rem; width: 5.8rem; height: 5.8rem; border-radius: 50%; background: url(/images/content/video_list_btn.png)no-repeat center/100%; z-index: 1; box-shadow: 0.7rem 0.7rem 2.7rem rgba(41,0,7,0.5);}
.video-list li .video-box a .inner {position: relative; width: 100%; border: 2px solid #fff; border-radius: 2.8rem; height: 0; padding-top: 57.05%; overflow: hidden; box-sizing: border-box; }
.video-list li .video-box a .inner img {position: absolute; }
.video-list .video-tit {font-size:1.5rem; letter-spacing:-0.04em; color: #656565; font-weight: 500; line-height:1.6em; margin-top: 1.5rem; text-align: center;}

/* ****************** 플레이 방법 ********************** */
.play-sub-tit{display: inline-block; font-size:4rem; letter-spacing:-0.055em; color:#fff; font-weight:700; line-height: 1.3;}
.cm-effect-txt.style02.play-sub-tit::before{background: linear-gradient(136deg, #e832ca, #02afff); -webkit-background-clip: text; -webkit-text-stroke: 6px transparent;}
.play-sub-tit02{display: block; text-align:center; }
.play-sub-tit02 p{font-size:3.2rem; line-height:1.15; letter-spacing:-0.04em; color:var(--main-color); font-weight:700; margin-top:1.5rem;}

.play-title {text-align:center; margin-bottom: 5.3rem;}
.play-intro-con {padding: 11.5rem 0;}
.play-intro-con .inner-box {display: block; text-align:center;}
.play-intro-con .inner-box .img-box {width: 100%;}
.play-intro-con .inner-box .img-box img {max-width: 100%;}
.play-intro-con .inner-box .txt-box {display: inline-block; margin:auto; text-align:center; margin-top:6rem;}
.play-intro-box .play-intro-tit {font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; background-image: linear-gradient(90deg, #f048c2 0%, #00ace3 100%);background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.6; margin-bottom: 2rem;}
.play-intro-box .play-intro-txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; color: #656565; line-height: 1.5; }
.play-intro-sub-tit {position: relative; display: flex; align-items: center; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.3; margin-bottom: 1rem;} 
.play-intro-sub-tit span {display: inline-block; width: 2.2rem; margin-right: 1rem;position: relative; top: -0.1rem;}
.play-intro-card {display:flex; margin: 0 -1.25rem; padding-top: 3.5rem;}
.play-intro-card li {width: calc(33.3333% - 2.5rem); margin: 0 1.25rem;}
.play-intro-card li img {max-width: 100%;}

.play-intro-txt-box{margin-top:2.5rem;}


.play-method-con {padding: 11.5rem 0;}
.play-method-list-box {position: relative;}
.play-method-list {height: 42rem; background: #fff7fb; border-radius:3rem; border:0.5rem solid var(--main-color); }
.play-method-list  .slick-list,
.play-method-list .slick-track {height: 100%;}
.play-method-list li {position: relative; padding: 5.5rem; width: 100%; height: 100%; box-sizing: border-box;}
.play-method-list .num {position: absolute; top: 2.5rem; right: 2.5rem; display:flex; justify-content:center; align-items:center; background: #fff; width: 6rem; height: 6rem; border-radius:100%; font-size:2rem; letter-spacing:-0.04em; color: var(--main-color); font-weight: 800; }
.play-method-list li .inner {max-width: 77rem; width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: center; box-sizing: border-box;}
.play-method-list li .inner.alilgn-s { align-items: start; } 
.play-method-list li .inner.fl-wrap { flex-wrap:wrap; } 
.play-method-list li .inner img {max-width: 100%;}
.play-method-list li.wide .inner {max-width: none;}
.play-method-list li .inner .left-con {width: 50%; text-align: right; padding-right: 3rem; box-sizing: border-box;}
.play-method-list li.center .inner .left-con{padding-right:0;}
.play-method-list li .inner .left-con img {margin: auto;}
.play-method-list li .inner .right-con {width: 50%; text-align: left; padding-left: 3rem; box-sizing: border-box;}
.play-method-list li.center .inner .right-con{padding-left:0;}
.play-method-list li .inner .right-con img {margin: auto;}
.play-method-list li .inner .slide-icon{text-align:center; margin-bottom:2rem; max-width: 345px; width:100%;}
.play-method-list li .inner .slide-icon img{margin:auto;}
.play-method-list li .inner .border-txt {padding: 3.5rem 3rem; border-radius: 2rem; border:3px dotted  var(--main-color); background-color: #fff;  text-align: center; box-sizing: border-box; max-width: 345px;}
.play-method-list li .inner .border-txt .inner-txt01 {font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.6;}
.play-method-list li .inner .border-txt .inner-txt02 {font-size: 4rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.3;}
.play-method-list li .inner .border-txt .inner-txt03 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.5; margin-top: 1rem;}

.play-method-list li.last .inner .border-txt  {padding: 5rem 4rem; max-width:42rem;}

.play-method-list li .inner .txt01 {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; color: #656565; line-height: 1.5;}
.play-method-list li .inner .txt01 + .txt01 {margin-top: 1.5rem;}
.play-method-list li .inner .txt01 .highlight{color:var(--main-color);}
.play-method-list li .inner .right-con .play-intro-sub-tit {margin-top: 3.5rem;}
.play-method-list li .inner .right-con .txt02 {position: relative; padding-left: 1rem; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.04em; color: #656565; line-height: 1.7;}
.play-method-list li .inner .right-con .txt02:before {position: absolute; content: ''; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: var(--main-color); top: 0.8rem; left: 0;}
.play-method-list li .inner .right-con .txt02 + .txt02 {margin-top: 1rem;}
.play-method-list li .inner .sub-txt {text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.	6; color: #656565; margin-top: 1.5rem;}
.play-method-list li .inner .sub-txt02 {text-align: center; font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.6;}
.play-method-list li .inner .sub-txt03 {position: relative; background-color: #fff; border: 2px solid var(--main-color); border-radius: 3rem; box-sizing: border-box; width: 100%; max-width: 33.6rem; height: 6rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.42; margin-top: 2rem; margin-left:8rem;}
.play-method-list li .inner .sub-txt03:before {position: absolute; content: ''; width: 0.2rem; height: 4rem; background-color: var(--main-color); top: -4rem; right: 10.5rem;}
.play-method-list li .inner .sub-txt03:after {position: absolute; content: ''; width: 1rem; height: 1rem; background-color: var(--main-color); border-radius: 1rem; top: -4.8rem; right: 10.1rem;}
.play-method-list li .inner .sub-txt04 { text-align: center; margin-top: 2.7rem;}
.play-method-list li .inner .sub-txt04 span {display: inline-block; background-image: linear-gradient(90deg, #f048c2 0%, #00ace3 100%);background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.2;}

.play-method-list li .inner .txt06 {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.5;}
.play-method-list li .inner .txt07 {font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; line-height:1.8; color: var(--main-color);}
.play-method-list li .inner .txt08 {font-size: 1.4rem; font-weight: 500; letter-spacing: -0.04em; color: #656565; line-height: 1.7; margin-top:0.5rem;}

.save-code-btn{display: inline-flex; align-items:center; justify-content:space-between; padding:1rem 3rem; box-sizing:border-box; width:30rem; height:7rem; border-radius:7rem; background: linear-gradient(-75deg,  rgba(27,173,254,1) 0%,rgba(233,56,205,1) 100%); margin-top:3rem; max-width: 100%;}
.save-code-btn .txt{font-size:1.9rem; letter-spacing:-0.05em; color:#fff; font-weight:700;}
.save-code-btn i{font-size:2.5rem; color:#fff;}

.play-method-list li .inner .center-con {position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between;} 
.play-method-list li .inner .center-con .img {max-width: 34rem;}
.play-method-list li .inner .center-con .img img {max-width: 100%;}
.play-method-list li .inner .center-con .txt-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1;}
.play-method-list li .inner .center-con .txt-box img {max-width: 100%;}
.play-method-list li .inner .center-con .txt-box .sub-txt05 {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.428; margin-top: 2.5rem;}

.play-method-btn {position:absolute; top: 50%; transform:translateY(-50%); width: 100%; padding: 0 2.5rem; display: flex; justify-content: space-between; box-sizing: border-box;}
.play-method-btn button {font-size:3rem; color: var(--main-color);}
.play-method-btn .slick-prev {transform:rotate(-90deg);}
.play-method-btn .slick-next {color: #1badfe; transform:rotate(-90deg);}

.playmode-method-con {padding: 11.5rem 0 2rem;}
.playmode-method-con .play-method-list li .inner {flex-wrap: wrap; max-width: 86.5rem;}
.playmode-method-con .play-method-list li.wide .inner {max-width: none;}
.playmode-method-con .play-method-list li.list02 .inner .left-con {padding-right: 0;}
.playmode-method-con .play-method-list li.list02 .inner .right-con {padding-left: 0;}
.playmode-method-con .play-method-list li .inner .sub-txt02 {margin-top: 0;}
.playmode-method-con .play-method-list li.list04 .inner .right-con {padding-left: 6rem;}
.play-method-list li .inner .right-con .playmode-txt {font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.6;}
.play-method-list li .inner .right-con .playmode-txt + .txt01 {margin-top: 2.5rem;}
.play-method-list li .inner .tit {width: 100%; margin-bottom: 1rem;}
.play-method-list li .inner .tit img {margin: 0 auto; max-width: 100%;}
.play-method-list li .inner .bottom-txt {width: 100%; display: flex; align-items: center; margin-top: 0rem; text-align:center;}
.play-method-list li .inner .bottom-txt dd{width:100%; text-align:center;}
.play-method-list li .inner .bottom-txt dd img{margin:auto;}
.card-detail-con {padding: 11.5rem 0 10rem;}
.card-detail-wrap {display:flex; align-items: center;}
.card-detail-wrap .card-box { width: calc(100% - 28rem); padding-right: 2rem; box-sizing: border-box;}
.card-detail-wrap .card-box img {max-width: 100%;}

.card-detail-box { border-radius: 1rem; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(130deg, #ff8bef 0%, #4cd2fe 100%);
background-origin: border-box;background-clip: content-box, border-box;  width: 28rem; box-sizing: border-box; }
.card-detail-list {padding: 2.5rem 1.2rem 2.5rem 2.3rem;}
.card-detail-list .num {display:flex; align-items:center; justify-content:center; width: 2.5rem; height: 2.5rem; background: var(--main-color); border-radius:100%; color: #fff; font-size:1.2rem; font-weight:700; margin-right: 1rem;}
.card-detail-list li {display:flex; margin-top: 1.5rem;}
.card-detail-list li:first-of-type {margin-top: 0;}
.card-detail-list li em {font-size:1.5rem; color: var(--main-color); letter-spacing:-0.04em; line-height:1.7em; font-weight: 700;}
.card-detail-list li p {font-size:1.3rem; color: #868686; font-weight: 400; letter-spacing:-0.04em;  line-height:1.846em;}
.card-detail-list li:nth-of-type(3),.card-detail-list li:nth-of-type(5) {margin-top: 0.9rem;}
.card-detail-list li:nth-of-type(10) .num, .card-detail-list li:nth-of-type(11) .num {background: #1badfe;}
.card-detail-list li:nth-of-type(10) em, .card-detail-list li:nth-of-type(11) em {color: #1badfe;}

.btn-wrapper {display:flex; justify-content: center; margin-top: 5.5rem;}
.btn-wrapper .btn {display:flex; justify-content:space-between; align-items:center; width: 100%; max-width: 34.5rem; height: 7rem; border-radius: 3.5rem; background: linear-gradient(to right, #e938cd, #1badfe); padding: 0 4rem; box-sizing:border-box; margin-right: 2rem;}
.btn-wrapper .btn:last-of-type {margin-right: 0;}
.btn-wrapper .btn em {color: #fff; font-size:1.9rem; letter-spacing:-0.05em; font-weight: 700; line-height:1.25;}
.btn-wrapper .btn i {font-size:2.5rem; color: #fff; }

.save-con {padding: 11.5rem 0 ;}
.save-detail-con {display:flex; align-items:center; margin-bottom:7.5rem;}
.save-detail-con .img-box {width: 50%; padding-right: 2rem; box-sizing: border-box;}
.save-detail-con .img-box img {max-width: 100%;}
.save-detail-con .txt-box {width: 50%; padding-left: 4rem; box-sizing:border-box;}
.save-detail-con .txt-box .save-tit {display: inline-block; font-size:2rem; letter-spacing:-0.04em; font-weight: 800; line-height:1.6em; background-image: linear-gradient(to right, #f048c2, #00ace3); background-clip: text;-webkit-background-clip: text; color: transparent; margin-bottom: 2rem;}
.save-detail-con .txt-box .save-txt {display: block; font-size:1.6rem; letter-spacing:-0.04em; color: #656565; font-weight: 500; line-height:1.5em; }


/* .play-method-list li .inner.inner-style02 .right-con{padding-left:5rem; box-sizing:border-box;} */
.play-method-list li .inner.inner-style02 .right-con .sub-txt02{margin-bottom:3rem;}

@media all and (min-width:801px){
	.play-method-list li.pd-block-3{padding-block:1.5rem;}
}

.play-mode-img img{margin-left:-20px !important;}

.play-mode-last-box{display: flex; align-items:center; justify-content:center; }
.play-mode-last-box dt{margin-right:2rem;}
.play-mode-last-box dd{text-align:left !important; width:auto !important;}
.play-mode-last-box .last-txt01{font-size:1.6rem; line-height:1.5; letter-spacing:-0.04em; color:#656565; font-weight:500;}
.play-mode-last-box .last-txt02{font-size:2rem; line-height:1.6; letter-spacing:-0.04em; color:var(--main-color); font-weight:700;}

/* ******************  굿즈 ********************** */
.goods-con01 {padding: 11.5rem 0; text-align: center;}
.goods-banner {margin-bottom: 4rem;}
.goods-banner a {display: block;}
.goods-banner a img {max-width: 100%;}
.goods-con01-txt img {max-width: 100%;}
.goods-con02 {padding: 11.5rem 0 10rem;}
.goods-con02 .goods-tit {text-align: center; margin-bottom: 6rem;}
.goods-con02 .part-card-list li .img-box {height: 32rem;}
.goods-con02 .part-card-list li .img-box span {padding: 2rem;}
.goods-con02 .part-card-list li .txt-box {height: calc(100% - 32rem);}
.part-card-list li .txt-box .price-txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.5; margin-top: 1rem;}

/* ******************  설치장소 ********************** */
/* .location-con {max-width: 77rem; margin: 0 auto;} */
.location-ps {text-align: center; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; color: #656565; line-height: 1.5; margin-bottom: 5.5rem; margin-top: 2.5rem;}
.location-ps2 {text-align: center; font-size: 1.4rem; letter-spacing: -0.04em; color: #999; line-height:1.7em; }
.map-wrapper {width: 100%; height: 40rem; border-radius:2.5rem; overflow:hidden; margin-bottom: 4rem;}
.map-wrapper .map-script-con {width: 100%; height: 100%;}
.map-wrapper iframe {border-radius:inherit;}
/* .loca-search-box {display:flex; height: 5rem; max-width: 77rem; margin: 4rem auto 0;}
.loca-search-box input , .loca-search-box select {border: 2px solid #ff5bea; box-sizing:border-box; border-radius:25px;}
input[type="text"].loca-search {width: 64.935%; margin-right: 1rem; text-indent: 2rem; font-size: 1.4rem; letter-spacing: -0.04em;}
.loca-select {width: calc(100% - (64.935% + 1rem)); text-indent: 2rem; font-size: 1.4rem; letter-spacing: -0.04em; background:url(/images/content/loca_select_ico.png) no-repeat; background-position: 90% 50%;} */
/* .loca-search-btn {display:flex; justify-content:space-between; border-radius:35px; height: 7rem; background: #E938CD;
background: linear-gradient(90deg, rgba(233, 56, 205, 1) 0%, rgba(27, 173, 254, 1) 100%); color: #fff;     padding: 0 3rem 0 4rem;
align-items: center; margin: 7rem auto 0;}
.loca-search-btn em {font-size:1.9rem; letter-spacing:-0.05em; font-weight: 800; padding-right:8.311rem;}
.loca-search-btn i {font-size:2.5rem;} */

.location-list-con {margin-top: 8rem;}
.location-list-tbl{display:table; width:100%; table-layout:fixed; border-top:1px solid #000;}
.loca-list-col-group{display:table-column-group; }
.loca-list-col-group .loca-col-group-item{display:table-column;}
.loca-list-head{display:table-header-group; }
.loca-list-head .loca-head-item{display:table-cell; vertical-align:middle; height:60px; text-align:center; background: rgba(255,91,234,0.1); color:#000; font-weight:500; font-size:1.6rem; letter-spacing:-0.04em; border-bottom:1px solid #ddd;}
.loca-list-tbody{display:table-row-group; }
.loca-list-row{display:table-row; width:100%; transition:background-color 0.3s; background-color: #fff;}
.loca-list-row .column{display:table-cell; vertical-align:middle; height:60px; color:#656565; font-size:1.6rem; line-height: 1.3; letter-spacing:-0.04em; text-align:center; border-bottom:1px solid rgba(0,0,0,0.1);}
.loca-list-row .bbs-title{text-align:left;}
.loca-list-row .bbs-title a{display:flex; font-weight: 400; align-items:center; position:relative; height:60px; padding:0 1rem; }
.loca-list-row .bbs-title.center{text-align:center;}
.loca-list-row .bbs-title.center a{justify-content:center; }
.loca-list-row .bbs-title a i {color: #ff5bea; font-size: 2.4rem;}
@media all and (min-width:801px),(hover:hover) {
	.loca-list-row:hover{background-color:rgba(0,0,0,0.03)}
}
/* 팝업 */
.location-modal-content {position:relative; width:96%; max-width:1080px; margin:20px auto; }
.location-modal-content .modal-close-btn {position: absolute; right: -6rem; top:-6rem ; width: 6rem; height: 6rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.location-modal-content .modal-close-btn i {font-size: 3.2rem; color: #000;}
.location-modal-inner-box {padding: 3rem; background: #fff; border-radius: 2rem; box-sizing: border-box;}
.location-modal-inner {display: flex;}
.location-modal-inner .loca-pop-map {width:49rem;}

.loca-pop-map .map-inner { width: 100%; height: 100%; border-radius: 2rem; overflow: hidden;}
.loca-pop-map .map-inner iframe {}

.location-modal-inner .loca-pop-info {width: calc(100% - 49rem); padding-left: 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }
.loca-pop-info .tit-box {padding-top: 2.5rem;}
.loca-pop-info .tit-box .tit {font-size: 3.2rem; font-weight: 400; letter-spacing: -0.04em; color: #000; line-height: 1.1;}
.loca-pop-info .tit-box .address-txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; color: #656565; line-height: 1.5; padding-top: 2rem;}
.loca-pop-info .txt-box {margin-top: 3.2rem;}
.loca-pop-info .txt-box dl {position: relative; display: flex; padding-left: 1rem; box-sizing: border-box; margin-bottom: 0.5rem;}
.loca-pop-info .txt-box dl:before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 4px; background: #ff5bea; left: 0; top: 0.9rem;}
.loca-pop-info .txt-box dl dt {width: 7rem; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; color: #000; line-height: 1.5; }
.loca-pop-info .txt-box dl dd {width: calc(100% - 7rem); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; color: #656565; line-height: 1.5;}
.loca-pop-info .img-box {padding-top: 2.6rem; width: 28rem;}
.loca-pop-info .img-box span {display: block; position: relative; width: 100%; height: 0; padding-top: 71.42%; border-radius: 2rem; overflow: hidden;}
.loca-pop-info .img-box span img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.root_daum_roughmap,
.root_daum_roughmap_landing{width: 100% !important; height: 100% !important;}
.root_daum_roughmap .wrap_map {height: 100% !important;}
.root_daum_roughmap .cont {display: none;}

/* ****************** 이벤트/캠페인 ********************** */
.event-container {padding-top: 11.5rem;}
.con-deco {text-align:center; margin-bottom: 6rem;}
.event-tit {display: flex; justify-content: center; margin-bottom: 4rem;}
.event-list {display:flex; margin: 0 -1.5rem;}
.event-list li {width: calc(33.3333% - 1.5rem); margin:0 1.5rem; border-radius:30px; border:4px solid transparent; overflow:hidden; background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #ff8bef 0%, #4cd2fe 100%);
background-origin: border-box; background-clip: content-box, border-box;}
.event-list .tit-box {display:flex; justify-content:space-between; background-color: #fff7fb; padding: 2.2rem 2.5rem 2.2rem 3.5rem;}
.event-list .tit-box .tit {display:flex; align-items:center;}
.event-list .tit-box i {font-size:3.2rem; color: #ee4eac;}
.event-list .tit-box .tit span {font-size:2rem; letter-spacing:-0.04em; color: #ee4eac; line-height:1.8em; font-weight: 700;  padding-left: 1rem;}
.event-list .txt-box {padding: 2.5rem 3.5rem;}

/* 예정된 이벤트 */
.event-list.future li {border:3px dotted var(--main-color); background-clip: initial;}
.event-list.future .tit-box .tit span {/* background-image:none; */ -webkit-text-fill-color:initial;}

/* 종료된 이벤트 */
.event-list.end li {border:3px solid #e2e2e2; background-clip: initial;}
.event-list.end .tit-box {background-color:#f5f5f5;}
.event-list.end .tit-box i {color: #868686;}
.event-list.end .tit-box .tit span {color: #868686; -webkit-text-fill-color: initial;}

.event-con {margin-bottom: 10rem;}
.event-con .event-end-tit {background: #e2e2e2;}
.event-con .event-end-tit .cm-effect-txt {color: #868686;}
.event-con .event-end-tit .cm-effect-txt.style02::before {display: none;}
.event-txt {font-size:1.8rem; letter-spacing:-0.04em; color: #000; font-weight: 400; line-height:1.667em; margin-bottom: 2.9rem;}
.event-date {font-size:1.4rem; letter-spacing:-0.04em; color: #656565; font-weight: 400; line-height:1.714em;}

/* 뷰페이지 */
.event-intro-con {padding: 11.5rem 0 10rem;}
.event-intro-con .inner-box {display:flex; align-items:center; justify-content: center;}
.event-intro-con .inner-box .img-box {margin-right: 7.5rem;}
.event-intro-con .inner-box .img-box img {max-width: 100%;}
.event-intro-con .inner-box .txt-box img {margin-bottom: 5rem; max-width: 100%;}
.event-intro-con .inner-box .txt-box p {font-size:1.6rem; letter-spacing:-0.04em; color: #656565; line-height:1.5em; font-weight: 500; margin-top: 2.4rem;}	
.event-intro-con .inner-box .txt-box p:first-of-type {margin-top: 0;}
.event-campaign {padding: 11.5rem 0 10rem;}
.event-campaign .event-title {margin-bottom: 4rem;}
.campaign-container dl {width: 100%; border-top:2px solid; border-image:linear-gradient(to left, #4cd2fe, #ff8bef) 1 0; max-width:77rem;
margin: 0 auto; padding: 3rem 2rem; box-sizing: border-box;}
.campaign-container dl dt {display: inline-block; font-size:2rem; letter-spacing:-0.04em; color: #ee4eac; font-weight: 800; line-height:1.8em; background-image: linear-gradient(86deg, #f048c2 0%, #00ace3 100%);background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem;}
.campaign-container dl dd .txt {font-size:1.6rem; letter-spacing:-0.04em; color: #656565; font-weight: 500; line-height:1.5em; margin-top: 1.1rem;}
.campaign-container dl dd .txt:first-of-type {margin-top: 0;}
.campaign-container .ps-txt {font-size:1.4rem; letter-spacing:-0.04em; color: #656565; font-weight: 500; line-height:1.714em; margin-top: 1rem;}

.event-campaign .card-list {display:flex; padding: 0 2rem; box-sizing: border-box;}
.event-campaign .card-list li {width: 50%; text-align: center; padding: 0 4rem; box-sizing: border-box;}
.event-campaign .card-list li .card-img img {max-width: 100%;}
.event-campaign .card-list .card-tit {font-size:2rem; letter-spacing:-0.04em; color: var(--main-color); line-height:1.2em; font-weight: 800; margin-top: 2.7rem;}
.event-campaign .card-txt01 {font-size:1.6rem; letter-spacing:-0.04em; line-height:1.5em; font-weight: 500; color: #656565; margin-top: 1.1rem; margin-bottom: 1.2rem;}
.event-campaign .card-txt02 {font-size:1.4rem; letter-spacing:-0.04em; line-height:1.5em; font-weight: 500; color: rgba(101,101,101,0.5);}
.event-campaign .card-list .ps-txt {color: rgba(101,101,101,0.5); margin-top: 0;}

.event-inquiry {padding: 11.5rem 0 2rem;}
.event-inquiry-box {background:#fff7fb; border-radius:30px; display:flex; align-items: center; padding: 4rem;}
.event-inquiry-box .left-box {border:2px solid var(--main-color); border-radius:25px; background: #fff; margin-right: 4rem; width: 47.6%; display: flex;
flex-direction: column; justify-content: center; align-items: center; padding: 3.2rem 0;}
.event-inquiry-box .left-box p {font-size:1.6rem; letter-spacing:-0.04em; color: #656565; font-weight: 500; line-height:1.5em;}
.event-inquiry-box .left-box span.tel {font-size:4rem; letter-spacing:-0.04em; color: var(--main-color); line-height:1.2; font-weight: 700;}
.event-inquiry-box .right-box p {font-size:1.4rem; letter-spacing:-0.04em; color: #656565; line-height:1.714em; margin-top: 1.8rem;}
.event-inquiry-box .right-box p:first-of-type {margin-top: 0;}
.event-inquiry .event-title {margin-bottom: 5.5rem;}
.event-inquiry .txt {text-align:center; font-size:1.6rem; letter-spacing:-0.04em; font-weight: 500; line-height: 1.5em; margin-bottom: 2.6rem;}

.inquiry-privacy {text-align: center; margin-top: 5.6rem;}
.inquiry-privacy .tit {display: inline-block; font-size:2rem; font-weight: 800; letter-spacing:-0.04em; line-height: 1.3; background-image: linear-gradient(to right, #f048c2, #00ace3); background-clip: text; -webkit-background-clip: text; color: transparent; margin-bottom: 2rem;}
.inquiry-privacy p {font-size:1.6rem; letter-spacing:-0.04em; color: #656565; font-weight: 500; line-height: 1.875em; text-align:center;}
.inquiry-privacy .url {display: block; font-size:1.4rem; letter-spacing:-0.04em; color: var(--main-color); font-weight: 500; margin-top: 2.5rem;}

/* ****************** 세이브코드 발급받기 ********************** */
/* 발급 전 */
.save-code-con {position: relative;  border-radius: 2.5rem; border: 5px solid transparent;  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #ff8bef 0%, #4cd2fe 100%); background-origin: border-box; background-clip: content-box, border-box; margin-bottom: 2rem; }
/* .save-code-con:before {position: absolute; content: ''; bottom: -5.8rem; left: -3.7rem;width: 27.1rem; height:34rem; background: url(/images/content/save_code_img01.png)no-repeat center/100%;}
.save-code-con:after {position: absolute; content: ''; bottom: -4.3rem; right: -5rem;width: 31.9rem; height: 32.7rem; background: url(/images/content/save_code_img02.png)no-repeat center/100%;} */
.save-code-box {padding: 6.5rem 23rem 4.5rem; box-sizing: border-box; text-align: center; position: relative; z-index: 1;}
.save-code-box .btn-wrapper .btn {max-width: 30rem; padding: 0 3rem;}
.save-code-box .txt01 {font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); line-height: 1.6;}
.save-code-box .txt02 {display: inline-block; font-size: 3.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; background-image: linear-gradient(to right, #f048c2, #00ace3);  background-clip: text; -webkit-background-clip: text; color: transparent; margin-top: 2.5rem;}
.save-code-box .btn-wrapper {margin-top: 4rem;}

.caution-con {margin-top: 8rem;}
.caution-item{overflow:hidden; border-radius:2rem; background-color:#fff7fb; transition:all 0.3s }
.caution-item dt {padding:2.5rem 4rem;}
.caution-item dd{display:none; position:relative;  padding:1rem 4rem 3rem; }
.caution-item dt{position:relative; cursor:pointer; }
.caution-item dt strong {display:block; color:#ef4eac; font-size:2.8rem; font-weight:800; line-height:1.14;  text-align: center;}
.caution-item dt .arrow{position:absolute; top: 50%; margin-top: -1.4rem; right: 3rem; }
.caution-item dt i{color:#ef4eac; font-size:2.8rem;}
.caution-inner .txt {position: relative; padding-left: 1.7rem; font-size: 1.7rem; font-weight: 400; letter-spacing: -0.04em; color: #656565; line-height: 1.8;}
.caution-inner .txt:before {position: absolute; top: 0; left: 0; content: '※';}

/* 발급 후 */
.sc-issued-con {position: relative;  border-radius: 2.5rem; height: 40rem; background: url(/images/content/save_code_bg.png)no-repeat center/cover;}
.sc-issued-con .txt-box {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: space-between; padding: 0 0.5rem; box-sizing: border-box;}
.sc-issued-con .txt-box img {max-width: 100%;}
.sc-issued-con .txt-box .txt01 {width:36%; display: flex; align-items: flex-start;}
.sc-issued-con .txt-box .txt01 img {margin-top: 4rem;}
.sc-issued-con .txt-box .txt02 {text-align: right; width: 33%; padding-top: 4rem;}
.sc-issued-box {position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 1;}
.sc-issued-box .qr-box {text-align: center; min-width: 21rem; /* height: 24rem; */ padding: 2.5rem 2rem 3rem; background-color: #fff; border-radius: 2rem; box-sizing: border-box; box-shadow: 0 0 4rem rgba(255,255,255,0.6);}
.sc-issued-box .qr-box .qr-code {position: relative; width: 14rem; margin: 0 auto;  } 
.sc-issued-box .qr-box .qr-code img {max-width: 100%;}
.sc-issued-box .qr-box .qr-tit {display: block;  font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; color: #000; line-height: 1.2; margin-top: 2.5rem;}
.sc-issued-wrap .btn-wrapper {margin-top: 4rem;}
.sc-issued-wrap .btn-wrapper .btn {width: 24rem; padding: 0 3rem;}

/* ****************** 마이페이지 ********************** */
.mypage-con {position: relative;  border-radius: 2.5rem; height: 40rem; background: url(/images/content/mypage_bg.png)no-repeat center/cover;}
.mypage-con .mypage-box {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.mypage-qr-box {padding: 2.5rem 2rem 2rem; min-width: 26rem; text-align: center; background-color: #fff; border-radius: 2rem; box-sizing: border-box; box-shadow: 0 0 4rem rgba(255,255,255,0.6);}
.mypage-qr-box .txt {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; color: #000; line-height: 1.3; margin-bottom: 1rem;}
.mypage-qr-box .qr-code {width: 14rem; margin: 0 auto;}
.mypage-qr-box .qr-code span {position: relative; display: block; width: 100%; height: 0; padding-top: 100%;}
.mypage-qr-box .qr-code iframe,
.mypage-qr-box .qr-code img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.mypage-qr-box .qr-tit {width: 100%; height: 4rem; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 2rem; border: 3px solid transparent;
background-image: linear-gradient(#fff, #fff), linear-gradient(130deg, #ff8bef 0%, #4cd2fe 100%);background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; font-size: 1.5rem; font-weight:700; letter-spacing: -0.04em; color: #000; line-height: 1.2; margin-top: 1.5rem;}

/* ******************  마이 캐릭터 파츠 ********************** */
.character-tit{width: 40rem; height: 8.5rem; margin: 0 auto; border-radius: 4.25rem;  border: 7px solid transparent; overflow: hidden; background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #ff8bef 0%, #4cd2fe 100%); background-origin: border-box; background-clip: content-box, border-box; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;}
.character-tit .tit {font-size: 3.2rem; font-weight: 700; letter-spacing: -0.04em;
    color: #ee4eac;
    line-height: 1.8em;
    font-weight: 800;
    background-image: linear-gradient(86deg, #f048c2 0%, #00ace3 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.character-sub-txt {text-align: center; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em;  line-height: 1.8; color: #514f4f;margin-top: 2rem;}
.character-info-con {padding: 11.5rem 0 10rem;}
.character-info-box + .character-info-box {padding-top: 14rem;}
.character-info-box {max-width: 77rem; margin: 0 auto;}
.character-list {display: flex; flex-wrap: wrap; margin: -2rem -1rem; padding-top: 4rem;}
.character-list li {position: relative; width: calc(25% - 2rem); margin: 2rem 1rem;}
.character-list li.new:before {position: absolute; top: 0;  left: 50%;  margin-left: -2.5rem; content: '';  display: block; width: 5rem; height: 2.2rem; 
    background: url(../images/content/new_icon.svg)no-repeat center/100%;  pointer-events: none; z-index: 1;}
.character-list li .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.character-list li .img-box img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.character-list li .txt { text-align: center;   font-size: 1.4rem; letter-spacing: -0.04em;  color: #656565; line-height: 1.4; margin-top: 1.5rem;}