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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1280px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1280px){
	.sub-tab-list-style .area{padding:0}
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 2rem; height:6rem; line-height: 5.4rem; font-size: 1.8rem;  background: #fff; border: 3px solid #ff5bea; border-radius: 3rem; box-sizing:border-box; z-index: 12;}
	.sub-drop-open-btn-style span{ font-weight: 700;letter-spacing: -0.04em; color: #ff5bea; }
	.sub-drop-open-btn-style .arrow{color:#ff5bea; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:0; min-height: 6rem; left:0px; right:0px; background-color:#fff;  z-index:11; box-sizing:border-box; border-radius: 3rem; border: 3px solid #ff5bea; padding-top: 6rem; }
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:2rem; border:0;}
	.sub-drop-menu-style ul li a em{font-size:1.4rem;}
	.sub-drop-menu-style ul li.selected{background-color:transparent; border-color: #eee;}
	.sub-drop-menu-style ul li.selected a em{color:#ff5bea; font-weight:600; }

	.sub-line-section:before {        width: 37.8rem;  height: 3.5rem;  margin-left: -18.9rem;  background: url(/images/main/main_section_line_m.png) no-repeat center / 100%;}
	.cm-sub-bottom {padding: 5rem 0 10rem;} 
	.cm-sub-tit{width:100% !important;}
	.cm-sub-tit.long-tit{height: 13rem;}
	.cm-sub-tit.star-box img {height: 3.4rem;}

	.cm-sub-tit .inner span {font-size: 2.6rem;}
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* ******************  탄정보 ********************** */
@media all and (max-width:1280px){
	.part-tab-wrap {padding: 0 5rem;}
	.part-tab-wrap.display-pc {display: block;}
	.part-tab-wrap.display-m {display: none;}
	.part-tab-wrap button.prev {left: 0;}
	.part-tab-wrap button.next {right: 0;}
}
@media all and (max-width:800px){
	.part-tab-wrap.display-pc {display: none;}
	.part-tab-wrap.display-m {display: block; padding: 0;}
	.part-con01-inner {flex-wrap: wrap;}
	.part-con01-inner .img-con {width: 100%; text-align: center;}
	.part-con01-inner .txt-con {width: 100%; padding-left: 0; padding-top: 5rem;}

	.part-card-list {margin: -6.2rem 0;}
	.part-card-list li {width: 100%; margin: 6.2rem 0;}
	.part-card-list li .txt-box {height: auto; padding: 3rem 3rem 7.5rem;}
	.part-card-list li .img-box {position: relative; height: 0; padding-top:87.26%;}

	.part-con03 {padding: 5rem 0 15rem;}
	
	.part-tab-wrap-bottom {padding: 10rem 0 0 0;}
	.part-bottom-tab-list-inner {justify-content: center;}
	.part-bottom-tab-list-inner li {width: calc(33.33% - 1.4rem);}
}
@media all and (max-width:800px){
	.part-bottom-tab-list-inner li {width: calc(50% - 1.4rem);}
}

/* ******************  카드리스트 ********************** */
@media all and (max-width:1280px){
	.card-modal-inner {padding: 0 7rem; }
	.card-list-arrows {width: 100%;}
	.card-modal-content .modal-close-btn {top: -4rem; right: 3rem;}
}
@media all and (max-width:800px){
	.card-info-con .card-list li {  width: calc(33.33% - 1.8rem);}
	
	.card-modal-content{width:auto; margin:50px 15px}
	.card-modal-content .modal-close-btn {top: -2rem; right: 0;}
	.card-pop-list {flex-wrap: wrap; max-width: 30rem; margin: -1rem auto;}
	.card-pop-list li {width: 100%; margin: 1rem 0;}

}

/* ******************  동영상 ********************** */
@media all and (max-width:1280px){
	.video-intro {top: 0;}
	.video-intro a img {max-width: 100%; margin-left: 0;}
}
@media all and (max-width:800px){
	.video-intro {padding-top: 3rem;}
	.video-list {margin: -3rem -1rem;}
	.video-list li {width: calc(50% - 2rem); margin: 3rem 1rem;}
}
@media all and (max-width:480px){
	.video-list li {width: calc(100% - 2rem); }
}

/* ****************** 플레이 방법 ********************** */
@media all and (max-width:1440px){
	.play-method-list {height: 48rem;}
}
@media all and (max-width:1280px){
	.play-method-list {height: 44rem;}
	.play-method-list li {padding: 5.5rem 10rem;}
}
@media all and (max-width:800px){
	.play-sub-tit {font-size: 3.6rem;}
	.play-intro-con .inner-box {flex-wrap: wrap;}
	.play-intro-con .inner-box .img-box {width: 100%;}
	.play-intro-con .inner-box .txt-box {width: 100%; margin-top: 3rem;}
	.play-intro-con .play-intro-box + .play-intro-box {margin-top: 4rem;}

	.play-method-list {height: auto; max-height:85rem;}
	.play-method-list .num {width: 5rem; height: 5rem; font-size: 1.8rem;}
	.play-method-list li {padding: 8rem 3.5rem 5rem;}
	.play-method-list li .inner {max-width: none; flex-wrap: wrap;}
	.play-method-list li .inner .left-con {width: 100%; padding-right: 0;}
	.play-method-list li .inner .right-con {width: 100%; padding-left: 0; margin-top: 3rem;}
	.play-method-list li .inner .left-con img,
	.play-method-list li .inner .right-con img {margin: 0 auto;}
	.play-method-list li .inner .border-txt {padding: 4rem 2rem; max-width: none; width: 100%;}
	.play-method-list li .inner .border-txt .inner-txt01 {font-size: 1.8rem;}
	.play-method-list li .inner .sub-txt02 {margin-top: 1.5rem;}
	.play-method-list li .inner .sub-txt03  {max-width: none; margin-left: 0;}
	.play-method-list li .inner .border-txt .inner-txt02{font-size:2.6rem;}
	.play-method-list li .inner .border-txt .inner-txt03{font-size:1.6rem;}

	.play-method-list li .inner .center-con {flex-wrap: wrap; padding-top: 5rem;}
	.play-method-list li .inner .center-con .img {width: 50%;}
	.play-method-list li .inner .center-con .txt-box {width: 100%; position: relative; top: 0;  left: 0;transform: translate(0, 0); margin-top: 3rem}
	.play-method-list li .inner .center-con .txt-box img {margin: 0 auto;}
	.play-method-list li.last .inner .border-txt {padding: 2rem;}
	.play-method-list li .inner .bottom-txt {padding-left: 0; display: block; margin-top: 1rem !important;}
	.play-method-list li .inner .bottom-txt dt {width: 100%;}
	.play-method-list li .inner .bottom-txt dt img {margin: 0 auto 2rem;}
	.play-method-list li .inner .bottom-txt dd {width: 100%; padding-left: 0; text-align: center;}
	.playmode-method-con .play-method-list li.list04 .inner .right-con {padding-left: 0;}
	
	.play-method-btn {width:13rem;  top: 3rem; transform:translateY(0); padding: 0 3rem;}
	.card-detail-wrap {flex-wrap: wrap;}
	.card-detail-wrap .card-box {width: 100%; padding-right: 0;}
	.card-detail-wrap .card-detail-box {width: 100%; margin-top: 2rem;}

	.save-detail-con {flex-wrap: wrap; padding-bottom: 5rem;}
	.save-detail-con .img-box {width: 100%; padding-right: 0; text-align: center;}
	.save-detail-con .img-box img {margin: 0 auto;}
	.save-detail-con .txt-box {width: 100%; padding-left: 0; margin-top: 3rem; text-align: center;}

	.btn-wrapper {flex-wrap: wrap; margin: -0.5rem;}
	.btn-wrapper .btn {height: 6rem; padding: 0 3rem; margin: 0.5rem auto; }
	.btn-wrapper .btn:last-of-type {margin-right: auto;}

	.play-method-list li .inner.inner-style02 .right-con{padding-left:0;}
}

/* ******************  굿즈 ********************** */
@media all and (max-width:800px){
	.goods-con02 .part-card-list li .img-box {height: 0;   padding-top: 52.55%;}
	.goods-con02 .part-card-list li .txt-box {height: auto; padding: 3rem 3rem 7.5rem;}
}
@media all and (max-width:480px){
.goods-con02 .part-card-list li .img-box {height: 0;   padding-top: 70.55%;}
}

/* ******************  설치장소 ********************** */
@media all and (max-width:1280px){
	.location-modal-content .modal-close-btn {top: -7rem; right: 0;}
}
@media all and (max-width:800px){
	.map-wrapper {height: 32rem;}
	.location-con .bbs-top-list-box.top-search-center {margin-bottom: 0;}
	.location-list-con {margin-top: 6rem;}

	.location-list-tbl, .loca-list-row, .loca-list-row .column, .loca-list-tbody{display:block;}
	.loca-list-col-group,
	.loca-list-head{display:none; position:absolute; top:-1000em; left:-1000em;}
	.loca-list-row{position:relative; width:auto; padding: 1rem; ; border-bottom:1px solid rgba(0,0,0,0.1);}
	.loca-list-row .column{border-bottom:0; text-align:left;}
	.loca-list-row .column {position: relative; height: auto;}
	.loca-list-row .column.bbs-num{width:100%; margin-bottom:1rem;}
	.loca-list-row .bbs-title a { height: auto; padding-left: 0; }
	.loca-list-row .bbs-title:before{position: absolute; top: 1rem; left: 0 ;color:#aaa; content: attr(data-label); z-index: 1; }
	.loca-list-row .bbs-title:not(.bbs-btn) a{position: relative; padding: 1rem 0 1rem 7rem;}
	.loca-list-row .bbs-title.center{text-align:left;}
	.loca-list-row .bbs-title.center a{justify-content:flex-start; }
	.loca-list-row .bbs-title.bbs-btn {padding: 1rem 0;}
	
	/* 팝업 */
	.location-modal-content {width:auto; margin:50px 15px}
	.location-modal-content .modal-close-btn {top: 0; right: 0; width: 4rem; height: 4rem; background: transparent;}
	.location-modal-inner-box {padding: 4rem 3rem 3rem;}
	.location-modal-inner {flex-wrap: wrap;}
	.location-modal-inner .loca-pop-map {width: 100%; height: 30rem;}
	.location-modal-inner .loca-pop-info {width: 100%; padding-left: 0;}
	.loca-pop-info .tit-box .tit {font-size: 2.8rem;}
	.loca-pop-info .txt-box {margin-top: 2rem;}
}


/* ****************** 이벤트/캠페인 ********************** */
@media all and (max-width:800px){
	/* 리스트 페이지 */
	.event-list {flex-wrap: wrap; margin: -1rem 0;}
	.event-list li {width: 100%; margin: 1rem 0;}
	.event-list .tit-box {padding: 2.2rem 2.5rem;}
	.event-list .txt-box {padding: 2.5rem 2.5rem 3rem;}

	/* 뷰페이지 */
	.event-intro-con .inner-box {flex-wrap: wrap;}
	.event-intro-con .inner-box .img-box {margin-right: 0; width: 100%; text-align: center; margin-bottom: 5rem;}
	.event-intro-con .inner-box .txt-box p {margin-top: 1rem;}

	.campaign-container dl {padding: 3rem;}
	.event-campaign {padding: 11.5rem 0 8rem;}
	.event-campaign .card-list {padding: 0;}
	.event-campaign .card-list li {padding: 0 2rem;}

	.event-inquiry-box {display: block;}
	.event-inquiry-box .left-box {width: 100%; margin-bottom: 3rem;}
	.event-inquiry-box .right-box {text-align: center;}
}

/* ****************** 세이브코드 발급받기 ********************** */
@media all and (max-width:1280px){
	.sc-issued-con .txt-box {padding: 0 2rem;}
	.sc-issued-con .txt-box .txt02.display-pc {display: block;}
	.sc-issued-con .txt-box .txt02.display-m {display: none;}
}
@media all and (max-width:800px){
	/* 발급 전 */
	/* .save-code-con:before {display: none;width: 17.1rem; height: 23rem; bottom: -4.5rem; left: -2rem;}
	.save-code-con:after {display: none; width: 18.9rem; height: 21.7rem; bottom: -3.5rem;right: -1.8rem;} */
	.save-code-box {padding: 5rem 3rem ;}
	.save-code-box .txt02 {font-size: 2.8rem;}
	/* 발급 후 */
	.sc-issued-con {height: auto;     background: url(/images/content/save_code_bg_m.jpg) no-repeat top 0 left 50% / cover;}
	.sc-issued-con .txt-box {padding: 2rem 2rem 0 1rem; flex-direction: column; align-items: flex-start;  justify-content: flex-start; }
	.sc-issued-con .txt-box .txt01  {display: none; width:70%; padding-top: 0; padding-left: 5rem;}
	.sc-issued-con .txt-box .txt01 img {margin-top: 0;}
	.sc-issued-con .txt-box .txt02 {display: none; width: 70%; padding-top: 15rem; padding-left: 10rem;}
	.sc-issued-con .txt-box .txt02.display-pc {display: none;}
	.sc-issued-con .txt-box .txt02.display-m {display: none;}
	.sc-issued-box {padding: 50rem 7rem 7rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	.sc-issued-box .qr-box {width: auto; height: auto;}
	.sc-issued-box .qr-box .qr-code {width: 15rem; height: 15rem; padding-top: 0;}

	.caution-item dt strong {font-size: 2.4rem;}
	.caution-item dd {padding: 1rem 2.5rem 3rem;}
}
@media all and (max-width:480px){
	.sc-issued-box { padding: 40rem 4rem 4rem;}
}

/* ****************** 마이페이지 ********************** */
@media all and (max-width:800px){
	.mypage-con {height: auto;  background: url(/images/content/save_code_bg_m.jpg) no-repeat top 0 left 50% / cover;}
	.mypage-con .mypage-box {padding: 23rem 4rem 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
}

/* ******************  마이 캐릭터 파츠 ********************** */
@media all and (max-width:800px){
	.character-tit {width: 31rem; height: 6.4rem;}
	.character-tit .tit {font-size: 2.5rem;}
	.character-list li {width: calc(33.333% - 2rem); }
}
@media all and (max-width:480px){
	.character-list li {width: calc(50% - 2rem); }
}