@charset "UTF-8";



/* slide 슬라이드 */

.slide-section{height: 500px;}
.slide-bg{width: 100%; height: 100%; background: #222; overflow: hidden;}
.swiper{width: 100%; height: 500px; position: relative; overflow:visible !important;}
.swiper-slide{opacity: 0.5;}
.swiper-slide-active{opacity: 1;}
:root{--swiper-theme-color: #fff !important;}

/* 220321 모바일 추가 */

.swiper .i-pc{width: 1200px;}
.i-mo{display: none;}



/* tab 탭 */

.tab-section{position: relative;}

.tab-list{width: 100%; margin: 20px auto; display: grid; grid-template-columns: repeat(auto-fit, 25%);}
.tab-list>li{float: left; width: 100%; height: 50px; line-height: 50px; margin-right: 5%; text-align: center; cursor: pointer;}
.tab-list>li:last-child{margin-right: 0;}
.tab-list>li::after{content:""; display: block; height: 5px; width: 0%; background: #533ECE; transition: 0.3s;}
.tab-list>li:hover::after{width: 100%; transition: 0.3s;}
.tab-list>li.check::after{content:""; display: block; height: 5px; width: 100%; background: #533ECE;}

.tab-box{width: 100%; height: 300px; position: relative; display: block; margin-top: 50px;}
.tab{width: 100%; position: absolute; top: 0; display: none;}
.tab>.tab-item{box-shadow: 1px 4px 6px 1px #aaa; border-radius: 25px; cursor: pointer; position: relative; overflow: hidden; width: 350px; height: 230px; margin-right: 75px; float: left; background: #eee;}
.tab>.tab-item:last-child{margin-right: 0;}
.tab>.tab-item>img{position: absolute; z-index: 0; transition:0.3s; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.tab>.tab-item:hover>img{transform: translate(-50%, -50%) scale(1.1); transition:0.3s;}
.tab>.tab-item:hover>.t-bg{opacity: 0; transition:0.3s;}
.tab>.tab-item>a{display: block; width: 100%; height: 100%; position: absolute;  z-index: 10;}
.tab1{display: block;}
.t-bg{transition:0.3s; background: linear-gradient(transparent 50%, #000); height: 100%; position: relative; z-index: 1;}


/* 2024-06-11추가 */
.tab2-section{position: relative;}

.tab-list{width: 100%; margin: 20px auto; display: grid; grid-template-columns: repeat(auto-fit, 25%);}
.tab-list>li{float: left; width: 100%; height: 50px; line-height: 50px; margin-right: 5%; text-align: center; cursor: pointer;}
.tab-list>li:last-child{margin-right: 0;}
.tab-list>li::after{content:""; display: block; height: 5px; width: 0%; background: #533ECE; transition: 0.3s;}
.tab-list>li:hover::after{width: 100%; transition: 0.3s;}
.tab-list>li.check::after{content:""; display: block; height: 5px; width: 100%; background: #533ECE;}

.tab-box{width: 100%; height: 100%; position: relative; display: block; margin-top: 50px;}
.tab{width: 100%; position: relative; top: 0; display: none;}
.tab>.tab-dtl{box-shadow: 1px 4px 6px 1px #fff; border-radius: 25px; cursor: pointer; position: relative; overflow: hidden; width: 100%; margin-right: 75px; float: left; background: #fff;}
.tab>.tab-dtl:last-child{margin-right: 0;}
.tab>.tab-dtl>img{position: absolute; z-index: 0; transition:0.3s; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.tab>.tab-dtl:hover>img{transform: translate(-50%, -50%) scale(1.1); transition:0.3s;}
.tab>.tab-dtl:hover>.t-bg{opacity: 0; transition:0.3s;}
.tab>.tab-dtl>a{display: block; width: 100%; height: 100%; position: absolute;  z-index: 10;}
.tab1{display: block;}
/* .tab2{display: block;} */
/* .tab3{display: block;} */
/* .tab4{display: block;} */
.t-bg{transition:0.3s; background: linear-gradient(transparent 50%, #000); height: 100%; position: relative; z-index: 1;}
/* 2024-06-11추가 */

.info-box{position: absolute; bottom: 10px; left: 10px;}
.info-box div{float: left;}
.info-box .icon{width: 75px; height: 75px; background: #fff; border-radius: 50%; position: relative; overflow: hidden;}
.info-box .icon img{height: 100%;}
.info-box .text{margin-left: 20px; color: #fff; margin-top: 10px; font-size: 0.8rem; opacity: 0.9;}
.info-box .text p:first-child{font-size: 1rem; opacity: 1; font-weight: 600;}
.info-box .text p{width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.info-box .text p span{margin-left: 5px;}
.info-box .text p span:first-child{margin-left: 0px;}
.info-box .text p span img{width: 12px; margin-right: 3px; vertical-align: top; margin-top: 2px;}
/* tab banner 탭배너 */

.tab-banner{margin-bottom: 50px; }
.bn-item{position: relative; width: 50%; overflow: hidden; float: left; background: #ddd; padding-top: 20%; }
.bn-item img{position: absolute; top: 0; left: 0; width: 100%; object-fit: cover;}

/* sw 카테고리 목록 */
.cate-section{}
.cate-bg{width: 100%; height: 510px; background: #eee; -webkit-box-sizing: border-box; box-sizing: border-box; }
.cate-wrap{position: relative; padding-top: 30px;}

.more-bt{width: 70px; height: 30px; border-radius: 15px; border: 1px solid #aaa; text-align: center; line-height: 30px; position: absolute; right: 0; top: 10px;}
.more-bt>a{transition: 0.3s; color: #aaa; position: relative; display: block; font-size: 0.9rem;}
.more-bt>a>span{display: inline-block; position: absolute; right: 9px; transition: 0.3s;}
.more-bt:hover>a{margin-left: 5px; transition: 0.3s; color: #666;}
.more-bt:hover>a>span{right: 5px; transition: 0.3s;}

.game-container{margin-top: 45px; margin-bottom: 200px;}
.game-item{cursor: pointer; position: relative; margin-right: 40px; float: left; width: 270px; height: 177px;}
.game-item:last-child{margin-right: 0;}
.game-item .thumb-box{box-shadow: 1px 5px 3px 1px #aaa; border-radius: 25px; overflow: hidden; position: relative; width: 100%; height: 177px;}
.game-item .thumb-box>img{vertical-align: top; height: 101%; transform: scale(1.1); transition: 0.3s; z-index: 1; position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%;}
.game-item .thumb-box>img.play_img{top: -50%; width: 80px; height: 80px;}
.game-item .thumb-box>iframe{width: 270px; height: 177px; position: absolute; top: 0; left: 0;}
.game-item>.info-box{bottom: -90px;}
.game-item>.info-box .icon{}
.game-item>.info-box .text{color: #222;}
.tp{opacity: 0; transition: 0.3s;}

/* 플랫폼아이콘 + 유무료 플래그 추가 220321  */

.free::before{content:""; display: block; position: absolute; top: 0; left: 0; width: 20%; height: 30%; background: url(../images/item-free.png) center/cover no-repeat; z-index: 3;}
.pay::before{content:""; display: block; position: absolute; top: 0; left: 0; width: 20%; height: 30%; background: url(../images/item-pay.png) center/cover no-repeat; z-index: 3;}

.item-iconbx{position: absolute; display: -webkit-flex; display: -ms-flex; display: flex; z-index: 3; right: 3%; top: 2%; width: fit-content;}
.item-iconbx img{display: none;}

.pc .item-iconbx img.item-pc{display: block;}
.mo .item-iconbx img.item-mo{display: block;}
.cs .item-iconbx img.item-cs{display: block;}
.etc .item-iconbx img.item-etc{display: block;}

/* 포인트 획득 */
.point-section{background: #eee;}
.point-wrap{padding-top: 50px; padding-bottom: 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.point-menu{margin-top: 50px; position: relative; margin-bottom: 30px;}
.point-menu>p{font-family: 'Cafe24SsurroundAir'; display: inline-block; line-height: 30px; font-size: 1.1rem;  margin-left: 10px; margin-right: 20px;}
.point-menu>span{font-weight: 600; border: 2px solid #533ECE;  transition:0.3s; -webkit-box-sizing: border-box; box-sizing: border-box;cursor: pointer; width: 60px; height: 30px; display: inline-block; background: #eee; border-radius:5px; color: #533ECE; text-align: center; line-height: 26px; margin-right: 10px; font-size: 1.1rem;}
.point-menu>span:hover{background: #533ECE; color: #eee; transition:0.3s;}
.icon-contaner{margin-top: 50px; padding-bottom: 50px; width: 100%; margin: 0 auto; display: grid; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.icon-contaner.medium{grid-template-columns:repeat(auto-fill, 70px); gap:4px;}
.icon-contaner.big{grid-template-columns:repeat(auto-fill, 95px);}
.icon-contaner.small{grid-template-columns:repeat(auto-fill, 45px); gap:1px;}
.icon-contaner>li{transition: all 0.3s; border: 3px solid transparent; transition:0.3s; float: left; border-radius: 10px; overflow: hidden;}
.icon-contaner>li:hover{transition:0.3s; transform: scale(1.1); border: 5px solid #fff; box-shadow: 1px 1px 2px 2px #ddd;}
.icon-contaner>li>button{height: 100%; border: none;}
.icon-contaner>li>button>img{width: 100%; transition:0.3s;}
.icon-contaner>li>a{height: 100%; border: none;}
.icon-contaner>li>a>img{width: 100%; transition:0.3s;}
.iconrange{display: none; border: 3px solid #533ece; background: #fff; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 10px; margin-bottom: 30px; margin-top: 30px;}
input[type=range] { -webkit-appearance: none; width: 100%; height: 10px; background: #eee; cursor: pointer; border-radius: 10px; transition: 450ms ease-in; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 20px; height: 20px; background: #fff; border: 2px solid #533ece; border-radius:50%; cursor: pointer; }
input[type=range]::-moz-range-thumb{ -webkit-appearance: none; width:20px; height:20px; background: #fff; border: 1px solid #533ece; border-radius:50%; cursor: pointer; }

.size-text{margin-top: 10px; width: 100%; display: grid; grid-template-columns:repeat(3, 1fr); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.size-text li{font-size: 1.1rem; color: #222; font-weight: 500;}
.size-text li:nth-child(1){text-align: left;}
.size-text li:nth-child(2){text-align: center;}
.size-text li:nth-child(3){text-align: right;}

.icon-more-bt{transition: 0.3s; cursor: pointer; width: 50px; height: 80px; margin: 0 auto; border: 2px solid #aaa; border-radius: 25px;}
.icon-more-bt:hover{border: 2px solid #aaa; transition: 0.3s;}
.icon-more-bt:hover>p{margin-top: 3px; color: #666;}
.icon-more-bt>p{width: 100%; text-align: center; transition: 0.3s; color: #aaa; font-weight: 600;}
.icon-more-bt>p>img{width: 30px;}
.icon-more-bt>p:first-child{margin-top: 20px;}
/* 포인트 획득 팝업 */
.popup-bg{display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; z-index: 999;}
.point-popup, .youtube-popup{width: 600px; height: 800px; border-radius: 5px; position: fixed; background: #fff; transform: translate(-50%, -50%); left: 50%; top: 50%; padding: 50px; overflow-y: scroll; -webkit-box-sizing: border-box; box-sizing: border-box;}
.point-popup::-webkit-scrollbar, .youtube-popup::-webkit-scrollbar {
  width: 12px
}
.point-popup::-webkit-scrollbar-thumb, .youtube-popup::-webkit-scrollbar-thumb {
  background-color: #ddd;
  background-clip: padding-box;
  ; border-radius: 10px;
  border: 3px solid transparent;

}
.point-popup::-webkit-scrollbar-track, .youtube-popup::-webkit-scrollbar-track {
  background-color: transparent;
}
.end-bt{cursor: pointer; width: 50px; height: 50px; float: right; margin-top: -40px; margin-right: -40px;}
.end-bt>span{width: 40px; height: 2px; display: block; background: #aaa;}
.end-bt>span:first-child{transform: rotate(45deg); margin-top: 2px;}
.end-bt>span:last-child{transform: rotate(-45deg); margin-top: -2px;}

.coin-icon{margin: 30px auto; width: fit-content;}
.coin-icon>img{-ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  webkit-animation: coinspin 1s ease-in infinite alternate;
  -ms-animation: coinspin 1s ease-in infinite alternate;
  animation: coinspin 1s ease-in infinite alternate;}

@keyframes coinspin {
  0%{
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  0%{  -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100%{
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
.point-get{}
.point-get>h3{text-align: center; font-weight: 700; font-size: 1.5rem; margin-bottom: 5px;}
.point-get>p{text-align: center; font-weight: 600; font-size: 1.1rem;}
.point-get>p>span{color: #aaa;}

.game-info{margin-top: 30px;}
.game-info .pre-info{width: fit-content; margin: 0 auto;}
.game-info .info-icon{width: 100px; height: 100px; border-radius: 20px; position: relative; overflow: hidden;}
.game-info .info-icon>img{width: 100%;}
.game-info .info-title{margin-left: 20px;}
.game-info .info-title>p{font-size: 0.9rem; opacity: 0.9; width: 195px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.game-info .info-title>p.strong{font-size: 1rem; opacity: 1; font-weight: 600; margin-bottom: 3px;}
.left{float: left;}
.youtube-bt{width: 200px; height: 37px; border-radius: 5px; background: #444; text-align: center; line-height: 35px; margin-top: 5px;}
.youtube-bt>a {color: #eee; display: block;}
.game-info .info-bg{width: 100%; height: 100px;}
.game-info .info-img{width: 100%; height: 200px; margin-top: 30px; border-radius: 20px; position: relative; overflow: hidden;}
.game-info .info-text{margin-top: 30px; font-size: 0.8rem;}
.game-info .info-text>p{font-size: 1.1rem; font-weight: 600; margin-bottom: 20px;}



.youtube-bg{}
.youtube-popup{height: 730px;}
.youtube-popup>.end-bt{margin: 0; float: none; position: absolute; right: 0;}
.youtube-popup>p{font-weight: 500; text-align: right; margin-bottom: 5px; margin-top: 40px;}
.youtube-popup>p>span{margin-right: 10px; display: inline-block; width: 20px; height: 20px; border-radius: 10px; background: #222; color: #eee; text-align: center; font-weight: 1000;}
.movie{}
.movie>iframe{width: 500px; height: 280px; border-radius: 15px;}
.movie>span{margin-top: 10px; margin-right: 10px; font-size: 0.9rem; width: 80px; text-align: center; display: inline-block; background: #ddd; height: 22px; line-height: 22px;}
.movie>span>img{width: 12px;}
.movie>span.cview>img{margin-top: -1px;}
.movie>span.pview>img{margin-top: -3px;}
.more-info{width: 500px; height: 50px; border-radius: 5px; background: #444; text-align: center; line-height: 50px; margin-top: 20px;}
.more-info>a{color: #eee; display: block;}



/* swinfo.html */

.title-banner{width: 100%; height: 675px; background: #222; position: relative; z-index: 0;}
.title-banner .title-bg{ margin-top: 135px; width:55%; height: 580px; background: #533ECE; position: absolute; top: 0; left: 0; z-index: -1;}
.info-wrap{position: relative; }
.title-banner h3{padding: 20px; font-size: 2.5rem; color: #eee; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.title-banner span{vertical-align: middle; display: inline-block; background: #eee; text-align: center; padding: 2px 6px; margin-right: 8px; margin-bottom: 10px;}
.title-banner span.wish a>span{transition:0.2s; padding: 0; margin: 0;}
.title-banner span.wish:hover a>span{color: #f00; transition:0.2s;}
.title-banner span.score{}
.score fieldset{
    display: inline-block;
    direction: rtl;
    border: 0;
    vertical-align: middle;
}
.score input[type=radio]{
    display: none;
}
.score label{
    color: #aaa;
    cursor: pointer;
}
.score label:hover{
    color: #da5e72;
}
.score label:hover ~ label{
    color: #da5e72;
}
.score input[type=radio]:checked ~ label{
    color: #bf214e;
}
.title-banner span img{vertical-align: top; margin-right: 5px;}

.title-banner p{width: 410px; margin-top: 10px; height: 400px; font-size: 1.1rem; color: #eee;}
.title-banner .down-bt{position: relative; transition:0.3s; cursor: pointer; width: 350px; height: 70px; text-align: center; line-height: 70px; border: 1px solid #eee; z-index: 999;}
.title-banner .down-bt a{color: #eee; font-size: 1.2rem; font-weight: 600; display: block;}
.title-banner .down-bt:hover a{color: #222; transition:0.3s;}
.title-banner .down-bt::after{top: 0; left: 0; content:""; display: inline-block; width: 0%; height: 100%; background: #eee; position: absolute; transition:0.3s; z-index: -1;}
.title-banner .down-bt:hover::after{width: 100%; transition:0.3s;}
/* .title-banner .down-bt:hover */
.title-banner .img{width: 634px; height: 310px; position: absolute; top: 195px; left: 430px; overflow: hidden; box-shadow: 1px 1px 9px 1px #111; border: 5px solid #000; border-radius: 10px;}
.title-banner .img img{width: 100%;}

.introduce{margin-top: 70px; margin-bottom: 50px;}
.introduce>h2{margin-bottom: 30px;}
.introduce>p{margin-bottom: 30px; margin-top: 30px; word-break: break-all;}
.introduce>span{display: inline-block; padding: 2px 10px; background: #eee; margin-right: 10px; border-radius: 10px; text-align: center;}

/*  swinfo - reply (220303)  */

.review-box{margin-top: 50px; margin-bottom: 100px;}
.review-box>h2{margin-bottom: 10px;}
.review-box>p{margin-bottom: 60px;}

.review-input-box{display: grid; grid-template-columns: 0.5fr 9.5fr; gap:20px; padding: 0 20px;}
.review-input-box dt{}
.review-input-box dt .re-pic{position: relative; width: 80px; height: 80px; border-radius: 80px; overflow: hidden; display: block; margin: 0 auto;}
.review-input-box dt img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}{}
.review-input-box dd{}

.review-input{width: 100%; font-size: 0;}
.review-input textarea{padding: 20px; font-size: 1rem; width: 100%; resize: none; white-space: pre-wrap; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbb;}
.review-input button{margin-left: 5px; width: 120px; height: 40px; border: none; background: #533ece; color: #fff; float: right;}
.review-input button.re-cancel{background: #bf214e;}

.review{margin-bottom: 50px; margin-top: 50px; padding: 0 20px;}
.review li{ margin-top: 30px;}
.review>li{ margin-top: 50px;}
.review li .reply-box{}
.review li .reply-box dl{display: grid; grid-template-columns: 0.5fr 9.5fr; gap:20px;}
.review li .reply-box dl dt{}
.review li .reply-box dl dt .re-pic{position: relative; width: 60px; height: 60px; border-radius: 60px; overflow: hidden; display: block; margin: 0 auto;}
.review li .reply-box dl dt img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.review li .reply-box dl dd{padding: 5px 0; width: 100%;}
.review li .reply-box dl dd p{display: block; line-height: 1.4;}
.review li .reply-box dl dd span.writer{font-weight: bold; display: inline-block; margin-right: 5px;}
.review li .reply-box dl dd span.reply-date{font-size: 0.9rem; font-weight: normal; color: #aaa; margin-right: 5px;}

.review li .reply-box .bt-box{display: block; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 80px;}
.review li .reply-box .bt-box div{float: left; margin-top: 10px;}
.review li .reply-box .bt-box div a{font-size: 0.9rem; color: #aaa;}
.review li .reply-box .bt-box div.re-right{float: right; margin-left: 20px;}

.re-reply-box{padding: 20px;background: #eee; margin-left: 80px; border-left: 2px solid #ddd; padding-left: 20px;}
.re-reply-box dl dt .re-pic{position: relative; width: 60px; height: 60px; border-radius: 60px; overflow: hidden; display: block; margin: 0 auto;}

/* reply score (220308) */
span.re-score{}
.re-score fieldset{
    display: inline-block;
    direction: rtl;
    border: 0;
    vertical-align: bottom;
}
.re-score input[type=radio]{
    display: none;
}
.re-score label{
    color: #aaa;
}
.re-score input[type=radio]:checked ~ label{
    color: #bf214e;
}



/* swinfo - 공유하기 버튼 리스트 */


.share-box{position: absolute; bottom: 80px; background: #eee; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; border-radius: 10px;}
.share-box span{font-family: 'S-CoreDream-3Light'; padding: 5px 10px; display: inline-block; margin: 0; background: #fff; box-shadow: 1px 1px 2px 1px #ddd;  border-radius: 5px;}
.share-contaner{width: fit-content; display: inline-block; vertical-align: middle;}
.share-contaner li{float: left; margin-left: 10px;}
.share-contaner li button{width: 35px; height: 35px; background: #fff; border-radius: 5px; border: none; padding: 5px;}
.share-contaner li button:hover{box-shadow: 1px 1px 3px 1px #aaa; transition: 0.1s;}
.share-contaner li button img{width: 100%;}

/* swinfo - 디테일이미지 슬라이드 */

.detail-box{height: 400px; width: 100%; overflow: hidden !important; margin-top: 100px;}
.detail-box img{height: 100%; border-radius: 20px;}
.swiper-slide{width: fit-content !important;}

.detail-box .swiper-button-next:after, .detail-box .swiper-button-prev:after{color: #533ece; background: #fff; opacity: 0; transition:0.2s; padding: 10px; border-radius: 10px;}
.detail-box:hover .swiper-button-next:after, .detail-box:hover .swiper-button-prev:after{opacity: 1; transition:0.2s;}

/* swinfo - 개발사 SNS 바로가기 링크 */

.game-link{margin-bottom: 50px; border: 1px solid #aaa; border-radius: 10px; padding: 30px; background: #eee;}
.game-link h4{font-family: 'S-CoreDream-3Light'; font-size: 1.1rem; margin-bottom: 20px; width: fit-content; padding: 5px; background: #fff; border-radius: 5px; box-shadow: 1px 1px 1px 1px #ddd;}
.game-link-list li {float: left; margin-right: 10px; margin-bottom: 10px;}
.game-link-list a{height: 32px; line-height: 32px; font-family: 'Cafe24SsurroundAir'; padding: 5px; border-radius: 5px; background: #fff; box-shadow: 1px 1px 1px 1px #bbb;}
.game-link-list a img{width: 32px; height: 32px; border-radius: 5px;}

/* swinfo - 유사한 sw */
.similar-slide{width: 100%; height: 120px; overflow: hidden !important; margin: 50px 0;}
.similar-slide a{}
.similar-slide img{height: 100px;}
.similar-slide p{font-size: 0.9rem; width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.similar-slide .swiper-button-next:after, .similar-slide .swiper-button-prev:after{color: #533ece; background: #fff; opacity: 0; transition:0.2s; padding: 10px; border-radius: 10px;}
.similar-slide:hover .swiper-button-next:after, .similar-slide:hover .swiper-button-prev:after{opacity: 1; transition:0.2s;}

.similar-slide .swiper-slide, .detail-box .swiper-slide{opacity: 1;}

/* swinfo - 별점평균 */

.score-box{margin-bottom: 70px;}
.score-box h2{margin-bottom: 50px;}
.score-box-in{display: grid; grid-template-columns:max-content auto; gap:3%;}
.score-aver{width: 180px; height: 140px;}
.score-aver h3{font-size: 5rem; width: 100%; text-align: center;}
.aver-star-track{background: url(../images/aver-star-track.png); width: 160px; height: 25px; margin: 0 auto;}
.aver-star-bar{background: url(../images/aver-star-bar.png); width: 70%; height: 100%; display: block;}
.aver-star-track_top{background: url(../images/aver-star-track.png); width: 160px; height: 10px; margin: 0 auto;}
.aver-star-bar_top{background: url(../images/aver-star-bar.png); width: 70%; height: 100%; display: block;}


.score-list{height: 140px; display: -webkit-flex; display: -ms-flex; display: flex; flex-direction:column; justify-content:space-between;}
.score-list li{display: grid; grid-template-columns: 1fr 9fr;}
.score-list li span{display: inline-block; width: 5%; text-align: center;}
.score-track{display: inline-block; width: 100%; background: #eee; height: 15px; border-radius: 15px; overflow: hidden;}
.score-bar{width: 50%; height: 100%; background: #533ece; border-radius: 15px; }


/* swinfo - 다운로드 버튼 리스트 */


.down-box{position: absolute; bottom: -10px; background: #eee; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; border-radius: 10px;}
.down-box span{font-family: 'S-CoreDream-3Light'; padding: 5px 10px; display: inline-block; margin: 0; background: #fff; box-shadow: 1px 1px 2px 1px #ddd;  border-radius: 5px;}
.down-contaner{width: fit-content; display: inline-block; vertical-align: middle;}
.down-contaner li{float: left; margin-left: 10px;}
.down-contaner li button{width: 35px; height: 35px; transition: 0.1s; padding: 5px; background: #fff; border-radius: 5px; border: none;}
.down-contaner li button:hover{box-shadow: 1px 1px 3px 1px #aaa; transition: 0.1s;}
.down-contaner li button img{width: 100%;}

/* swinfo - PC/모바일/콘솔/기타 아이콘 220323 */

.plat-box{position: relative; width: 200px; height: 50px; margin-top: 20px;}
.g-info-iconbx {position: static}

/* sub.html */

/* sw 카테고리 목록 */
.cate-section{}
.cate-section .cate-bg{background: #fff;}
.week .cate-section .cate-bg{background: #eee;}

/* .cate-bg{width: 100%; height: 500px; padding-top: 45px; -webkit-box-sizing: border-box; box-sizing: border-box; } */
.cate-wrap{position: relative; padding-top: 50px;}

.more-bt{width: 70px; height: 30px; border-radius: 15px; border: 1px solid #aaa; text-align: center; line-height: 30px; position: absolute; right: 0; top: 10px;}
.more-bt>a{transition: 0.3s; color: #aaa; position: relative; display: block; font-size: 0.9rem;}
.more-bt>a>span{display: inline-block; position: absolute; right: 9px; transition: 0.3s;}
.more-bt:hover>a{margin-left: 5px; transition: 0.3s; color: #666;}
.more-bt:hover>a>span{right: 5px; transition: 0.3s;}

.game-container{margin-bottom: 100px; height: auto;}
.week .game-item{margin-right: 75px; float: left; width: 350px; height: 230px;}
.week .game-item:last-child{margin-right: 0;}
.game-item{margin-right: 40px; width: 270px; height: 177px;}
.game-item .thumb-box{height: 100%;}
.game-item>.info-box>.icon{}
.game-item>.info-box>.text{color: #222;}
.week .game-item .thumb-box iframe{width: 350px; height: 230px;}
.game-item .thumb-box iframe{width: 270px; height: 177px; position: absolute; top: 0; left: 0;}
.week .info-box .text p{width: 230px;}
.week .info-box{bottom: -100px;}

.info-box>div{float: left;}
.info-box>.icon{width: 75px; height: 75px; background: #fff; border-radius: 50%; position: relative; overflow: hidden;}
.info-box>.icon>img{width: 100%;}
.info-box>.text{margin-left: 20px; color: #fff; margin-top: 10px; font-size: 0.8rem; opacity: 0.9;}
.info-box>.text>p:first-child{font-size: 1rem; opacity: 1; font-weight: 600;}

.ad-bn>a{float: left;}
.ad-bn, .ad-bn2{margin-bottom: 100px;}
.ad-bn a{width: 50%; overflow: hidden; position: relative; padding-top: 20%; background: #eee;}
.ad-bn2 a{width: 100%; position: relative; overflow: hidden; padding-top: 20%; bg#eee}
.ad-bn img, .ad-bn2 img{width: 100%; position: absolute; top: 0; left: 0;}


/* login.html */


.login-section{}
.login-section h1{color: #444; font-family: 'Cafe24Ssurround'; text-align: center; margin: 50px auto; display: block; font-size: 2.5rem;}
.login-section h3{text-align: center; margin-bottom: 20px;}
.login-bg{background: #eee; border-radius: 25px; padding: 50px; width: fit-content; margin: 0 auto 100px auto; -webkit-box-sizing: border-box; box-sizing: border-box;}
.login-box{width: 400px; border-radius: 25px; margin: 0 auto; padding-bottom: 50px;}
.login-box li{height: 50px; /* background: #fff; */-webkit-box-sizing: border-box; box-sizing: border-box;}
.login-box li input.id-fm{background: #fff; border-top: 1px solid #aaa; border-right: 1px solid #aaa; border-left: 1px solid #aaa; border-radius: 10px 10px 1px 1px;}
.login-box li input.pw-fm{background: #fff; border: 1px solid #aaa; border-radius: 1px 1px 10px 10px;}
.login-box li input{ font-size: 1.1rem; width: calc(100% - 45px); border: none; height: 100%; padding-left: 30px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.login-box li .save-id{float: left; height: 100%; line-height: 50px; margin: 0 15px;}
.login-box li .save-id input{ width: auto; height: auto;}
.login-box li span{font-size: 0.9rem; color: #666; float: left; display: inline-block; height: 100%; line-height: 50px; margin-top: 2px;}
.login-box li img{margin-left: 5px; margin-right: 5px; border-radius: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; /* border: 1px solid #000;*/}
.login-box li button{width: 50%; height: 80%; border: none; font-size: 0.9rem; background: #fff;}
.login-box li button:nth-child(1){border-right: 1px solid #eee;}
.login-box li button:nth-child(2){border-left: 1px solid #eee;}
.login-box li .login-bt{width: 100%; background: #533ece; color: #fff; font-size: 1.2rem; height: 100%;}
.login-box li:nth-child(5){margin-top: 10px;}

/* 체크박스 라벨 */

/*로그인시 아이디 저장 (login.html)*/
input#chkId{display: none;}
input[id="chkId"] + label{font-size: 0.9rem; color: #666; float: left; display: inline-block; height: 100%; line-height: 50px;}
input[id="chkId"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="chkId"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}
/*SMS동의 (join.html)*/
input#smsChk{display: none;}
input[id="smsChk"] + label{display: inline-block; margin-right: 10px;}
input[id="smsChk"] + label::before{content:""; display: inline-block; margin-right: 10px; vertical-align: top; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="smsChk"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}
/* email동의 (join.html) 220225 09:12 추가 */
input#emailChk{display: none;}
input[id="emailChk"] + label{display: inline-block; margin-right: 10px;}
input[id="emailChk"] + label::before{content:""; display: inline-block; margin-right: 10px; vertical-align: top; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="emailChk"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}

/*약관동의 (join.html)*/
input#agrChk1{display: none;}
input[id="agrChk1"] + label{color: #444;}
input[id="agrChk1"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="agrChk1"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}
input#agrChk2{display: none;}
input[id="agrChk2"] + label{color: #444;}
input[id="agrChk2"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="agrChk2"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}
input#agrChk3{display: none;}
input[id="agrChk3"] + label{color: #444;}
input[id="agrChk3"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="agrChk3"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}
input#agrChk4{display: none;}
input[id="agrChk4"] + label{color: #444;}
input[id="agrChk4"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="agrChk4"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}




.stroke{width: 100%; height: 2px; background: #ccc; display: block; margin-bottom: 50px;}
.login-bg h3{font-family: 'Cafe24Ssurround'; font-size: 1.5rem; color: #444;}

.sns-login-box{}
.sns-login-box li{margin-bottom: 10px; position: relative; width: 100%; height: 50px; text-align: center; border-radius: 12px; line-height: 50px;}
.sns-login-box li.kakao{background: #fee500;}
.sns-login-box li.naver{background: #03c75a;}
.sns-login-box li.facebk{background: #3b5998;}
.sns-login-box li.naver a, .sns-login-box li.facebk a{color: #fff;}
.sns-login-box li.google{background: #fff;}
.sns-login-box li a{display: inline-block; width: 100%; height: 100%;}
.sns-login-box li img{width: 25px; float: left; transform: translate(0%, -50%); position: absolute; top: 50%; left: 12px;}


/* join.html */

.join-section{}
.section-wrap{background: #eee; padding: 50px 300px; -webkit-box-sizing: border-box; box-sizing: border-box;}

.join-tt-box{margin: 50px 0;}
.join-tt-box p{text-align: center; color: #666;}
.join-tt{color: #444; text-align: center; font-size: 2rem; font-family: 'Cafe24Ssurround';}
.join-tt img{margin-right: 20px;}

.join-section h4{color: #444; height: 80px; line-height: 80px; font-size: 1.5rem; width: 1200px; margin: 0 auto; padding-left: 300px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.join-section h4 span{font-size: 1rem; margin-left: 20px; color: #aaa;}

.info-input-box{}
.info-input-box li{height: 100px; position: relative;}
.info-input-box li span{display: inline-block; width: 100px; color: #aaa;}
.info-input-box li span.double{vertical-align: top;}
.info-input-box li span.double span{display: block;}
.info-input-box li input.ip-text{padding-left: 15px; font-size: 1rem; border-bottom: 1px solid #aaa; background: #fff; color: #444; height: 50px; width: 70%; border-top: none; border-left: none; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.info-input-box li input.adr{width: 23%; -webkit-box-sizing: border-box; box-sizing: border-box;}
.info-input-box li input::placeholder{color: #bbb;}
.info-input-box li select{padding-left: 10px; font-size: 1rem; width: 21%; height: 50px; border-bottom: 1px solid #aaa; background: #fff; color: #aaa; border-top: none; border-left: none; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.info-input-box li button{position: absolute; top: 0; font-size: 1rem; width: 80px; height: 50px; background: #aaa; color: #fff; border: none;}

.info-input-box li.must>span:before{content:"*"; display: block; font-size: 0.8rem; color: #d44;}
.info-input-box li p{display: inline-block; color: #d44; font-size: 0.8rem; margin-left: 100px;}

.email-fm{display: inline-block;}

.agree{}
.agree li .agr-tt{margin-top: 20px; height: 60px; width: 100%; border: 2px solid #bbb; line-height: 60px; border-radius: 10px; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.agree li::after{content: ""; clear: both; display: block;}
.agree li button{float: right; transition: 0.3s; border: none; background: transparent; width: 40px; height: 60px;}
.agree li button.opentxt{transform: rotate(180deg); transition: 0.3s;}
.agree li label{margin-right: 10px; margin-top: -4px;}
/* border-top: 20px solid #ddd; border-right: 5px solid #ddd; border-bottom: 20px solid #ddd; border-left: 20px solid #ddd; */
.more-text{padding: 50px; display: none; border-radius: 10px; background: #ddd; color: #555; width: 100%; height: 400px; overflow-y:scroll; line-height: 1.1; -webkit-box-sizing: border-box; box-sizing: border-box;}
.more-text p{margin-bottom: 10px; line-height: 1.5;}
.more-text::-webkit-scrollbar, .youtube-popup::-webkit-scrollbar {width: 15px}
.more-text::-webkit-scrollbar-thumb, .youtube-popup::-webkit-scrollbar-thumb {background-color: #aaa; background-clip: padding-box; ; border-radius: 5px; border: 3px solid transparent;}
.more-text::-webkit-scrollbar-track, .youtube-popup::-webkit-scrollbar-track {background-color: transparent;}

.join{transition: 0.3s; position: relative; width: 250px; height: 60px; margin: 50px auto; display: block; border-radius: 5px; font-size: 1.2rem; background: #eee; color: #666; border: 2px solid #ccc;}
.join::after{transition: 0.3s; width: 0%; height: 100%; content: ''; display: block; position: absolute; left: 0; top: 0; background: #533ece; z-index: -1; }
.join:hover{background: transparent; transition: 0.3s; color: #fff; border: 2px solid #533ece;}
.join:hover::after{width: 100%; transition: 0.3s;}
/* transform: translate(0%, -50%);  */


/* mypage.html */

.my-section{}
.my-tt{font-family: 'Cafe24Ssurround'; font-size: 2rem; color: #222; border-left: 10px solid #8f78d2; padding-left: 50px; margin-top: 60px; margin-bottom: 60px;}

.my-info{margin-top: 50px;}
.my-info img{border-radius: 100px; display: none;}
.my-info p{text-align: center; color: #666; font-size: 1.1rem;}
.my-info p span{color: #222;}

.my-menu{display: grid; grid-template-columns:1fr 1fr; gap:30px; padding: 20px 220px;}
.my-menu li{border: 2px solid #ddd; padding: 60px 0; transition:0.2s;}
.my-menu li:hover{transition:0.2s; border: 2px solid #533ece; box-shadow: 1px 5px 5px 1px #ddd; transform: scale(1.05);}
.my-menu li a{display: block;}
.my-menu li a p{text-align: center; color: #666;}
.my-menu li a p.bold{font-size: 1.1rem; font-weight: 500; margin: 5px 0; color: #222;}
.my-menu li img{margin: 5px auto; display: block;}


/* mypage - point */

.mypt-section h3{margin: 40px 0 20px 0;font-weight: 500; font-size: 1.2rem; height: 50px; line-height: 50px; position: relative; padding-left: 40px;}
.mypt-section h3::before{content: ''; display: inline-block; position: absolute; transform: translate(0, -50%); top: 50%; left: 0; width: 20px; height: 20px; border-radius: 20px; background: #533ece;}
.mypt-section h3.my-back{text-align: center; display: none;}
.mypt-section h3.my-back a{display: inline-block;float: left;}
.mypt-section h3.my-back a img{transform: rotate(90deg);}
.mypt-section h3.my-back::before{display: none;}
.pt-summury{-webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px; background: #eee; display: grid; grid-template-columns:repeat(5, 1fr); gap:3%; width: 100%; margin: 0 auto;}
.pt-summury li{}
.pt-summury li>p{text-align: center; font-weight: 500; margin: 20px 0; color: #666; font-size: 1.1rem;}
.pt-summury li div{width: 100%; border-radius: 100px; position: relative; background: #8f78d2;}
.pt-summury li div p{width: 90%; position: absolute; transform: translate(-50%, -50%); text-align: center; top: 50%; left: 50%;}
.pt-summury li div p span.pt{word-break:break-all; color: #e9e4f6; display: block;font-family: 'Cafe24Ssurround'; font-size: 1.5rem; width: 100%;}

.pt-summury li .pt-all{}
.pt-summury li .pt-Today{}
.pt-summury li .pt-last{}
.pt-summury li .pt-out{}


.p-tab-list{width: fit-content; display: block; margin: 0 auto;}
.p-tab-list li{float: left; margin-right: 50px; width: 200px; cursor: pointer;}
.p-tab-list li:last-child{margin: 0;}
.p-tab-list li h4{width: 100%; text-align: center; height: 32px; margin: 30px 0; font-size: 1.2rem; font-weight: 400; color: #aaa;}
.p-tab-list li.click h4{border-bottom: 3px solid #8f78d2; font-weight: 500; color: #222;}

.point-tab-container{width: 100%;}
.point-tab-container>li{width: 100%; float: left; display: none;}
.point-tab-container>li.pt-tab-on{display: block;}

.pt-date{font-size: 0.8rem; color: #aaa;}

.pt-list{}
.pt-list li, .pt-special li{height: 80px; line-height: 80px; position: relative; padding-left:80px; border-bottom: 1px solid #ddd;}
.pt-list li p, .pt-special li p{display: inline-block; width: 60%;}
.pt-list li p.pt-his, .pt-special li p.pt-sp{display: inline-block; width: 20%; text-align: right; color: #533ece;}
.pt-list li img, .pt-special li img{width: 30px; height: 30px; border-radius: 5px; position: absolute; transform: translate(0, -50%); top: 50%; left: 0;}

.pt-history{}
.pt-history li{position: relative; padding-left:80px; height: 80px; line-height: 80px; border-bottom: 1px solid #ddd;}
.pt-history li::before{content: ''; display: inline-block; position: absolute; transform: translate(0, -50%); top: 50%; left: 0; width: 30px; height: 30px; background: url(../images/pt-none.png) center/contain no-repeat; border-radius: 30px;}
.pt-history li.pt-in::before{background: url(../images/pt-in.png) center/contain no-repeat;}
.pt-history li.pt-out::before{background: url(../images/pt-out.png) center/contain no-repeat;}

.pt-history li p{display: inline-block; width: 70%;}
.pt-history li p.price{width: 15%; text-align: right;}
.pt-history li.pt-in p.price{color: #466189;}
.pt-history li.pt-in p.price::before{content: '입금'; display: inline-block; color: #466189; font-size: 0.7rem; vertical-align: top; margin-right: 3px;}
.pt-history li.pt-out p.price{color: #ba6061;}
.pt-history li.pt-out p.price::before{content: '출금'; display: inline-block; color: #ba6061; font-size: 0.7rem; vertical-align: top; margin-right: 3px;}

.pt-coin .pt-coin-intro{font-size:1.2em; border-bottom:2.5px solid gray; padding:0 10px 20px; margin-bottom:30px;}
.pt-coin .pt-coin-intro span{color:red; font-weight:bold; font-style:italic;}
.pt-coin .pt-coin-apply{margin-bottom:40px;}
.pt-coin .pt-coin-apply img{width:30px; height:30px; margin-left:25px;}
.pt-coin .pt-coin-apply span, button{font-size:1em; border:1px solid #eee; background:#eee; padding:8px 20px;}
.pt-coin .pt-coin-apply input{font-size:1em; border:none; border-bottom:2px solid #8f78d2; padding:5px 5px 8px 5px; margin-right:30px; width:220px;}
.pt-coin .pt-coin-apply input:focus{outline:none; border-bottom:3px solid #8f78d2;}
.pt-coin .pt-coin-apply button:hover{font-weight:bolder;}
.pt-coin .pt-coin-list{width:100%; text-align:center; border-collapse:collapse; margin-bottom:100px;}
.pt-coin .pt-coin-list td, th{width:25%; height:50px;}
.pt-coin .pt-coin-list th{font-size:1.1em; font-weight:600; border-bottom:2px solid orange;}
.pt-coin .pt-coin-list td{font-size:1em; border-bottom:1px solid #aaa; height:60px;}
.pt-coin .pt-coin-list .pt-coin-amount{color:#533ece; font-weight:600;}
.pt-coin .none img{width:30px; height:30px; border-radius:5px; margin:30px 30px 30px 10px;}

.pt-more{display: block; border: none; background: none; color: #aaa; margin: 20px 20px 50px auto;}
.mypt-section li p.pt-date{display: inline-block; width: 15%; text-align: center;}
.mypt-section li p.text-over{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mypt-section li p {vertical-align: top;}

.mypt-section li.none>p{width: 100%;}


/* member.html */
.member-section{}
.member{}
.mem-profile{border-bottom: 3px solid #eee; padding-bottom: 50px;}
.mem-profile .pic-box{position: relative; width: fit-content; margin: 0 auto;}
.mem-profile .pic{width: 150px; height: 150px; border-radius: 100px; overflow: hidden; margin: 30px auto;}
.mem-profile .pic img{width: 100%;}
.mem-profile p{text-align: center; margin-top: 5px; text-transform: uppercase;}
.mem-profile p.name{font-size: 1.2rem; font-weight: 500;}
.pic-up{position: absolute; bottom: 0; right: 0;}
.profile-pic{ cursor: pointer; position: relative; width: 30px; height: 30px; border-radius: 25px; border: 3px solid #aaa;}
.profile-pic::after{content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; background: url(../images/upload.png) no-repeat center/contain;}

.mem-info{display: grid; grid-template-columns:1fr; width: 90%; margin: 30px auto;}
.mem-info li{height: 80px; line-height: 80px;}
.mem-info li dl{display: grid; grid-template-columns:0.5fr 2fr;}
.mem-info li dl dt{display: inline-block; font-size: 1rem; padding-left: 10%;}
.mem-info li dl dd{display: inline-block; position: relative;}
.mem-info li dl dd input{font-size: 1.1rem; width: 79%;  height: 50px; border: none; background: none; border-bottom: 2px solid #eee;}
.mem-info li dl dd label{margin-right: 20px; cursor: pointer; line-height: 80px;}
.mem-info li dl dd input.mem-agree{width: 20px; height: 20px;}
.mem-info li dl dd input.mm-adr{width: 25%;}
.mem-info li dl dd select{font-size: 1.1rem; width: 25%; height: 50px; border: none; background: none; border-bottom: 2px solid #eee;}
.mem-info li dl dd button{transition: 0.1s; width: 20%; border: none; background: #aaa; color: #fff; height: 50px; font-weight: 500;}
.mem-info li dl dd button:hover{background: #533ece; transition: 0.1s;}
.member-tab-bg{background: #eee;}
.member-tab{width: 1200px; margin: 0 auto; display: grid; grid-template-columns:1fr 1fr 1fr;}
.member-tab li{transition: 0.1s; text-align: center; padding: 30px; cursor: pointer;}
.member-tab li:hover{transition: 0.1s; border-bottom: 3px solid #aaa;}
.member-tab li.click{border-bottom: 3px solid #533ece;}
.member-tab li a{}

.sending-info{display: grid; grid-template-columns:1fr; width: 90%; margin: 30px auto;}
.sending-info li{height: 80px; line-height: 80px;}
.sending-info li dl{display: grid; grid-template-columns:0.5fr 2fr;}
.sending-info li dl dt{display: inline-block; font-size: 1rem; padding-left: 10%;}
.sending-info li dl dd{display: inline-block; position: relative;}
.sending-info li dl dd input{font-size: 1.1rem; width: 79%;  height: 50px; border: none; background: none; border-bottom: 2px solid #eee;}
.sending-info li dl dd label{margin-right: 20px; cursor: pointer; line-height: 80px;}
.sending-info li dl dd input.mem-agree{width: 20px; height: 20px;}
.sending-info li dl dd input.mm-adr{width: 25%;}
.sending-info li dl dd select{font-size: 1.1rem; width: 15%; height: 50px; border: none; background: none; border-bottom: 2px solid #eee;}
.sending-info li dl dd button{transition: 0.1s; width: 15%; border: none; background: #aaa; color: #fff; height: 50px; font-weight: 100;}
.sending-info li dl dd button:hover{background: #533ece; transition: 0.1s;}

.member-tab-item{padding: 80px 0;}
.member-tab-item>li{display: none;}
.member-tab-item>li.if-tab-on{display: block;}
.member-tab-item>li h3{padding-left: 20px; font-weight: 500; display: inline-block; height: 34px; line-height: 34px;}

.allchk{margin-top: 50px; padding: 10px;}
.allchk input{margin-right: 20px; cursor: pointer;}
.wish-list{margin-top: 20px; padding: 10px;}
.wish-list li{padding: 20px 0; border-bottom: 2px solid #eee;}
.wish-list li .wish-info{display: inline-block; margin-left: 20px;}
.wish-list li a{display: inline-block; margin-right: 20px;}
.wish-list li a p{display: inline-block;}
.wish-list li p.wish-none{padding-left: 40px;}

.wish-list li img{width: 50px; height: 50px; margin-right: 10px;}
.wish-list li span{font-size: 0.9rem; display: inline-block; padding: 10px; background: #eee; margin-right: 5px;}
.wish-list li input{vertical-align: top;}

.delete{transition: 0.3s; color: #533ece; float: right; border: 2px solid #533ece; background: #fff; padding: 6px 20px; border-radius: 25px; font-weight: 600; font-size: 0.9rem;}
.delete:hover{transition: 0.3s; color: #fff; background: #533ece;}

/* 체크박스 라벨 */

/*email, sms동의 (my_member.html)*/

input#chk_mail{display: none;}
input[id="chk_mail"] + label{font-size: 0.9rem; color: #666; float: left; display: inline-block; height: 100%; line-height: 50px;}
input[id="chk_mail"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:#fff url(../images/check.png) no-repeat center/100%; transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="chk_mail"]:checked + label::before{transition:0.1s; background:#fff url(../images/check_on.png) no-repeat center/100%;}

input#chk_sms{display: none;}
input[id="chk_sms"] + label{font-size: 0.9rem; color: #666; float: left; display: inline-block; height: 100%; line-height: 50px;}
input[id="chk_sms"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:#fff url(../images/check.png) no-repeat center/100%; transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="chk_sms"]:checked + label::before{transition:0.1s; background:#fff url(../images/check_on.png) no-repeat center/100%;}

.allchk input[type=checkbox]{position: relative;}
.allchk input[type=checkbox]+label{cursor: pointer; }
.allchk input[type=checkbox]::after{content: ''; display: block; width: 20px; height: 20px; background:#fff url(../images/check.png)  no-repeat center/100%; transition:0.1s; position: absolute; top:0; left: 0; }
.allchk input[type=checkbox]:checked::after{transition:0.1s; background:#fff url(../images/check_on.png) no-repeat center/100%;}

.wish-list input[type=checkbox]{position: relative;}
.wish-list input[type=checkbox]::after{cursor: pointer; content: ''; display: block; width: 20px; height: 20px; background:#fff url(../images/check.png)  no-repeat center/100%; transition:0.1s; position: absolute; top:0; left: 0; }
.wish-list input[type=checkbox]:checked::after{transition:0.1s; background:#fff url(../images/check_on.png) no-repeat center/100%;}

.pwedit{margin-top: 50px; display: grid; grid-template-columns: repeat(2, 1fr);}
.pwedit dl{margin-bottom: 30px;}
.pwedit dl:nth-child(3){grid-column: 1 / span 2; justify-self:end; width: 50%;}
.pwedit dl dd input{font-size: 1.1rem; width: 70%;  height: 50px; border: none; background: none; border-bottom: 2px solid #eee;}
.pwedit dl dd button{width: 20%; border: none; background: #aaa; color: #fff; height: 50px; font-weight: 500;}
.pwsave{width: 270px; height: 70px; background: #533ece; color: #fff; margin: 50px auto 0 auto; display: block; border:none; font-size: 1.1rem;}

.noti-p{display: none; text-align: right; font-size: 0.9em; color: #aaa; margin-top: 30px; margin-bottom: 10px;}
.tb-box{width: 100%; overflow: auto;}
.tb-box::-webkit-scrollbar{display: none;}
.recommender-tb{margin-top: 50px;}
.recommender-tb h4{font-size: 1.2rem; padding-left: 30px; margin-bottom: 20px;}
.recommender-tb table{width: 100%; margin-bottom: 50px;}
.recommender-tb table tr{}
.recommender-tb table tr th{text-align: center; padding: 30px 20px; background: #ddd; border-bottom: 3px solid #fff; font-size: 1.1rem;}
.recommender-tb table tr td{text-align: center; font-family: 'S-CoreDream-3Light'; padding: 15px 0px; border-bottom: 1px solid #ddd; font-size: 1rem;}
.recommender-tb table tr td a{font-family: 'S-CoreDream-3Light';}
.recommender-tb table tr td button{width: 100%; height: 100%; border: none; background: #533ece; color: #fff; display: block; font-size: 1.1rem; padding: 5px; border-radius: 5px;}

.subtb-box{display: none;}


/* sw_ap.html */

/* 필수사항 */
.ne{}
.ne::before{content:"*"; display: inline-block; color: #bf214e;}

.gameapp-section{}
.gameapp-section .section-wrap{padding: 50px 200px; background: #fff;}
.gameapp-section h4{color: #444; height: 80px; line-height: 80px; font-size: 1.5rem; width: fit-content; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box;}
.gameapp-section h4 span{font-size: 1rem; margin-left: 20px; color: #aaa;}
.gameapp-section .won-input{position: relative;}
.gameapp-section span.won{position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); font-size: 1.1rem;}

.gameapp-tt-box{margin: 50px 0;}
.gameapp-tt{color: #444; text-align: center; font-size: 2rem; font-family: 'Cafe24Ssurround';}
.gameapp-tt img{margin-right: 20px;}

.app-input-box{}
.app-input-box li{}
.app-input-box dl{margin-bottom: 20px; display: grid; grid-template-columns: 2fr 8fr;}
.app-input-box dl dt{padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.app-input-box .more-list dl {display: grid; grid-template-columns: 2.5fr 7.5fr;}

.app-input-box input.input-text{font-size: 1rem; padding: 10px; width: 100%; background: #fff; border: none; border-bottom: 1px solid #aaa; padding-top: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.app-input-box input.input-text::placeholder{color: #bbb;}
.app-input-box label{cursor: pointer; margin-left: 15px;}
.app-input-box textarea{width: 100%; border: none; border-bottom: 1px solid #aaa; resize: none; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff;}
.app-list {display: grid; grid-template-columns:repeat(auto-fill, 25%);}
.app-list2 {display: grid; grid-template-columns:repeat(auto-fill, 50%);}
.app-list li{padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.last-input li:last-child{grid-column: 1/-1;}
.last-input li:last-child input.input-text{width: 80%; margin-left: 10px;}
.launch-list>li{padding: 10px;}
.part-pay li, .launch-ing li, .launch-will li{padding: 0;}
.part-pay {margin-top: 70px;}

.launch-ing, .launch-will{margin-top: 30px;}
.launch-list input[type=radio]+label{margin-right: 70px;}

.pay-list{grid-template-columns:repeat(auto-fill, 50%);}
.pay-list input[type=radio]+label{margin-right: 15px;}

.game-images{display: grid; grid-template-columns: repeat(auto-fill, 50%);}
.game-images li:last-child{grid-column: 1/-1;}
.game-images dl{display: block;}
.game-images img{display: block;}
.game-images a{display: block; padding: 5px; width: 180px; white-space: normal; word-break: break-all; font-size: 0.9rem;}
.ap-tip{font-size: 0.9rem; color: #bbb; margin-top: 5px; padding: 5px 0;}

.game-images .detail-slide{width: 640px; overflow-x:auto; overflow-y: hidden; white-space: nowrap;}
.game-images .ap-container{}
.game-images .detail-slide::-webkit-scrollbar-track {background-color: transparent;}
.game-images .detail-slide::-webkit-scrollbar-thumb{background-color: #ddd; background-clip: padding-box;  border-radius: 10px; border: 3px solid transparent;}
.game-images .detail-slide::-webkit-scrollbar {width:12px;}

.game-images .ap-item{width: fit-content; position: relative; float: left; margin-right: 20px;}
/* 파일명 줄바꿈 */
.game-images .ap-item p{width: 180px; white-space: normal; word-wrap: break-word;}


.game-images input[type=file]{position: relative; height: 40px; max-width: 178px;}
.game-images input[type=file]::after{cursor: pointer; content:"파일 선택"; display: inline-block; position: absolute; top: 0; left: 0; padding: 10px 60px; font-size: 1rem; background: #533ece; color: #fff;}

.app-input-box input[type=checkbox]{position: relative;}
.app-input-box input[type=checkbox]::after{cursor: pointer; content: ''; display: block; width: 20px; height: 20px; background:#fff url(../images/check.png)  no-repeat center/100%; transition:0.1s; position: absolute; top:-3px; left: 0; }
.app-input-box input[type=checkbox]:checked::after{transition:0.1s; background:#fff url(../images/check_on.png) no-repeat center/100%;}

.app-input-box input[type=radio]{position: relative;}
.app-input-box input[type=radio]::after{cursor: pointer; content: ''; display: block; width: 20px; height: 20px; background:#fff url(../images/check.png)  no-repeat center/100%; transition:0.1s; position: absolute; top:-3px; left: 0; }
.app-input-box input[type=radio]:checked::after{transition:0.1s; background:#fff url(../images/check_on.png) no-repeat center/100%;}

.launch-ing li dd{position: relative;}
.link-list{}
.link-list li{margin-bottom: 20px;}
.apbtbox{width: 100%;margin-bottom: 5px;}
.addlinkbt{}
.dellinkbt{position: absolute; right: -40px; }
.market-link select{width: 90%; height: 40px; border: 1px solid #aaa; vertical-align: top; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.app-input-box dl.market-link dt{padding: 0;}
.ap-adbt{width: 30px; height: 30px; background: #533ece; color: #fff; border: none; font-size: 1rem; font-weight: bold; border-radius: 50px;}
.ap-delbt{margin-top: 5px; width: 30px; height: 30px; background: url(../images/delete.png) center/contain; color: #fff; border: none; border-radius: 50px;}

.add-img{margin-bottom: 5px; float: none; display: block;}
.del-item{margin-top: 5px; position: absolute; bottom: 0; right: 50px;}

.game-images dd img{width: 100px; height: 100px; cursor: pointer;}
/* 이미지 클릭시 원본크기이미지 */
.ap-popup{display: none; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999;}
.ap-popup .ap-popup-box{max-width:90%; max-height: 90%; overflow: auto; margin: 3% auto; -ms-overflow-style: none;}
.ap-popup .ap-popup-box::-webkit-scrollbar {display: none;}
.ap-popup .ap-popup-box img{display: block; margin: 100px auto; }
/* datepicker */
.ui-datepicker-title select{font-size: 0.9rem !important; margin-left: 2px !important;}


.app-bt{transition: 0.3s; position: relative; width: 250px; height: 60px; margin-right: 20px; display: inline-block; border-radius: 5px; font-size: 1.2rem; background: #eee; color: #666; border: 2px solid #ccc;}
.app-bt::after{transition: 0.3s; width: 0%; height: 100%; content: ''; display: block; position: absolute; left: 0; top: 0; background: #533ece; z-index: -1; }
.app-bt:hover{background: transparent; transition: 0.3s; color: #fff; border: 2px solid #533ece;}
.app-bt:hover::after{width: 100%; transition: 0.3s;}
.app-cancel{transition: 0.3s; position: relative; width: 250px; height: 60px; margin-right: 20px; display: inline-block; border-radius: 5px; border: none; font-size: 1.2rem; color: #fff; background: #bf214e;}

.app-bt-box{display: block; margin: 50px auto; width: fit-content;}



/* sw_consult.html 게임 등록 신청 리스트 */


.cons-section button {width: 140px; height: 40px; background: #533ece; padding: 3px; border: none; color: #fff; font-size: 1rem; font-family: 'S-CoreDream-3Light'; vertical-align: bottom; margin: 0 auto; display: block;}

.regi-box{margin-bottom: 10px;}
.regi-box button{float: right;}

.cons-top{width: fit-content; margin: 30px auto;}
.cons-top select{width: 130px; height: 40px; border: 1px solid #aaa; padding: 3px;}
.cons-top input{width: 280px; height: 40px; border: 1px solid #aaa; padding: 3px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.cons-top button{width: 120px; height: 40px; background: #533ece; padding: 3px; display: inline-block; border: none; color: #fff; font-size: 1rem; font-family: 'S-CoreDream-3Light'; vertical-align: bottom;}

.cons-box{margin-top: 50px;}
.cons-box h4{font-family: 'S-CoreDream-3Light'; font-size: 1.4rem; padding-left: 30px; margin-bottom: 40px; text-align: center;}
.cons-box table{width: 100%; margin-bottom: 50px; word-break:break-all; table-layout: fixed;}
.cons-box table tr{}
.cons-box table tr th.cons-game-title{width: 50%;}
.cons-box table tr p{font-family: 'S-CoreDream-3Light'; margin: 0 auto; overflow: hidden;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cons-box table tr th{text-align: center; padding: 30px 20px; background: #ddd; border-bottom: 3px solid #fff; font-size: 1.1rem;}
.cons-box table tr td{text-align: center; font-family: 'S-CoreDream-3Light'; padding: 15px 0px; border-bottom: 1px solid #ddd; font-size: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.cons-box table tr td a{width: 100%;}
.cons-box table tr td button{width: 100%; height: 100%; border: none; background: #533ece; color: #fff; display: block; font-size: 1.1rem; padding: 5px; border-radius: 5px;}

.cons-page{width: fit-content; margin: 50px auto;}
.cons-page .page{}
.cons-page .page li{float: left; padding: 5px 10px; border-radius: 5px; background: #eee; margin-right: 10px;}
.cons-page .page li.page-selected{background: #533ece; color: #fff;}
.cons-page .page li.page-selected a{color: #fff;}


/* ads_ap.html */

.ads-section{}
.ads-section .section-wrap{padding: 50px 0px; background: #fff;}
.ads-section h4{color: #444; height: 80px; line-height: 80px; font-size: 1.5rem; width: fit-content; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box;}
.ads-section h4 span{font-size: 1rem; margin-left: 20px; color: #aaa;}
.ads-section .won-input{position: relative;}
.ads-section span.won{position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); font-size: 1.1rem;}


.ads-col-1{display: grid; grid-template-columns: 1fr;}
.ads-col-1 li dl{grid-template-columns:1fr 9fr;}
.ads-col-2{display: grid; grid-template-columns: 1fr 1fr;}

.adsapp-tt-box{margin: 50px 0;}
.adsapp-tt{color: #444; text-align: center; font-size: 2rem; font-family: 'Cafe24Ssurround';}
.adsapp-tt img{margin-right: 20px;}

.ads-section select{width: 100%; height: 40px; border: 1px solid #aaa; vertical-align: top; font-size: 1rem; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box;}


/* ads_ap 이미지업로드+광고링크 추가 220315 */

.file-box{width: 90%; margin: 0 auto; padding: 50px;}
.ads-url{width: 90%; margin: 0 auto; padding: 50px;}
.ads-url input{height: 40px; border: none; border-bottom: 2px solid #ddd; padding: 0 10px; font-size: 1rem;}
.ads-url input::placeholder{color: #bbb; font-size: 1rem;}

.img-review-box{margin-top: 10px;}
.img-review-box img{max-width: 800px;}

.f-grid-box{display: grid; grid-template-columns: 1.5fr 8.5fr;}

.select-img{position: relative;}
input[id="imgUpload"]{width: 150px; height: 30px; }
input[id="imgUpload"] + label{position: absolute; left: 0; width: 150px; height: 30px; background: #533ece; text-align: center; color: #fff; line-height: 30px;}
.ads-file-name{margin-left: 10px;display: inline-block; width: fit-content; height: 30px; border: none; border-bottom: 1px solid #ddd;}

/* ads_consult */
.cons-section .regi-box button {margin-left: 5px;}


/* sw_guide+ads_guide */

.guide-section h3 {font-size: 1.5rem; text-align: center; margin-top: 100px;}
.guide-section button{width: 200px; height: 50px; border-radius: 10px; background: #533ece; color: #fff; border: none; font-size: 1rem; display: block; margin: 50px auto;}

.step-box{margin-top: 50px;}
.step-list{display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; gap:20px;}
.step-list li{position: relative; display: -webkit-flex; display: -ms-flex; display: flex; width: 200px; height: 100px; border-radius: 15px; align-items: center; justify-content: center; flex-direction: column; border: 3px solid #533ece;}
.step-list li::after{content:"▶"; display: inline-block; font-size: 1.5rem; color: #533ece; position: absolute; right: -20px;}
.step-list li:last-child::after{display: none;}
.step-list li p:first-child{font-weight: bold; text-transform: uppercase; margin-bottom: 5px;}

.step-detail-box{}
.step-detail-list{}
.step-detail-list li{width: 70%; margin: 10px auto;}
.step-detail-list li h4{font-size: 1.5rem; margin-top: 50px; margin-bottom: 30px;}
.step-detail-list li h4 span{padding: 10px 15px; background: #533ece; color: #fff; border-radius: 5px; margin-right: 20px;}
.step-detail-list li .step-img-box{border-radius: 20px; border: 2px solid #533ece; overflow: hidden;}
.step-detail-list li .step-img-box p{background: #533ece; color: #fff; text-align: center; padding: 20px 0;}
.step-detail-list li .step-img-box .step-img{}
.step-detail-list li .step-img-box .step-img .stroke{width: 90%; height: 5px; background: #533ece; position: relative; margin: 20px auto;}
.step-detail-list li .step-img-box .step-img .stroke::after{content:"▼"; display: block; position: absolute; transform: translate(-50%, 0); top: 0px; left: 50%; color: #533ece;}
.step-detail-list li .step-img-box .step-img img{width: 100%; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}

.step-detail-list li .m-step-img-box{width: fit-content; margin-top: 30px;}
.step-detail-list li .m-step-img-box p{}
.step-detail-list li .m-step-img-box .step-img{width: fit-content;}
.step-detail-list li .m-step-img-box .step-img .stroke{width: 5px; height: 650px; background: #533ece; position: relative; margin: auto 50px; display: inline-block;}
.step-detail-list li .m-step-img-box .step-img .stroke::after{content:"▶"; display: block; position: absolute; transform: translate(-50%, -50%); top: 50%; right: 0; color: #533ece;}
.step-detail-list li .m-step-img-box .step-img img{vertical-align: top; width: 40%;}
.step-detail-list li .m-step-img-box .img1 img{width: auto;}

.ads-pc{display: block;}
.ads-m{display: none;}

/* mypage.html - 가이드페이지를 위한 버튼 추가 */
/* 220316 삭제 */
/* .guide-ne{position: relative;}
.guide-bt{padding: 10px; transition: 0.2s; border-radius: 10px; border: 2px solid #eee; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); background: #fff;}
.guide-bt:hover{background: #533ece; color: #fff; transition: 0.2s; transform: scale(1.1) translate(-50%, -50%);} */

/* notice.html */
.noti-section{}
.noti-section button{width: 100px; height: 40px; border: none; background: #533ece; border-radius: 5px; color: #fff; font-size: 0.9rem; margin: 0 5px;}
.noti-section button.cancel{background: #bf214e;}

.noti-wrap{margin-bottom: 100px;}

.noti-bt-box{padding-left: 10px;}

.board-tab{width: 690px; margin: 50px auto;}
.board-tab-list{display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; gap:20px;}
.board-tab-list li{padding: 20px 0; width: 100%; transition: 0.2s; border-bottom: 3px solid #eee; text-align: center;}
.board-tab-list li:hover{background: #533ece; transition: 0.2s;}
.board-tab-list li:hover a{color: #fff; transition: 0.2s;}
.board-tab-list li a{display: block;}

.board-tab-list li.selected{background: #533ece; transition: 0.2s; color: #fff;}
.board-tab-list li.selected a{color: #fff; transition: 0.2s;}

.noti-board{}
.noti-board-head{}
.noti-board-head>.noti-board-row{border-bottom: 3px solid #eee;}
.noti-board-body{}
.noti-board-body>.noti-board-row{border-bottom: 1px solid #eee;}
.noti-board-row{text-align: center; padding: 20px 0;}
/* .noti-board-row>div{flex-basis:10%;} */
/* .noti-board-row>div>a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} */
/* .noti-board-row>div.b-title{grid-column:1 / span 2;} */
.b-title{display: inline-block; float: left; font-weight: bold;}
.noti-board-row a{display: block; width: 100%; height: 30px;}
.b-date{display: inline-block; float: left; margin-right: 20px;}
.b-arrow{font-size: 1.5rem; color: #aaa; display: inline-block; float: right;}

.noti-page{width: fit-content; margin: 50px auto;}
.noti-page .page{}
.noti-page .page li{float: left; padding: 5px 10px; border-radius: 5px; background: #eee; margin-right: 10px;}
.noti-page .page li.page-selected{background: #533ece; color: #fff;}
.noti-page .page li.page-selected a{color: #fff;}

.b-file-box{}
.b-file-box>div{display: inline-block;}

/* notice_detail.html */

.noti-detail-title{margin-top: 30px; margin-bottom: 20px; border-bottom: 2px solid #eee;}
.noti-detail-title>div{padding: 10px 20px;}
.noti-detail-title .d-title{display: block; font-size: 1.2rem; font-weight: bold; margin-bottom: 10px;}
.noti-detail-title .d-date, .noti-detail-title .d-writer{display: inline-block; margin-right: 20px; color: #aaa; }

.noti-detail-content{border-bottom: 3px solid #eee; margin-bottom: 20px; padding: 20px;}

.b-file-box{margin-bottom: 50px; padding-left: 20px;}

/* serch_detail.html */

.serch-section{}
.serch-section .cate-bg{height: auto;}
.serch_none{font-size: 1.2rem; margin-top: 50px; margin-bottom: 100px;}
.serch_none p{text-align: center;}
.serch-section .game-item{margin-bottom: 120px;}
.serch-section .game-item:last-child{margin-right: 40px;}
.serch-section .game-item:nth-child(4n){margin-right: 0px;}
/* movie.html */

.movie-list{display: grid; grid-template-columns: repeat(4, 1fr); gap:20px; grid-gap:20px; margin-top: 100px;}
.movie-item{width: 100%; max-width: 100%; overflow: hidden; cursor: pointer;}
.movie-item p{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; margin-top: 10px; padding-left: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.movie-thumb-img{width: 100%; padding-top: 56%; position: relative;transition:0.2s; overflow: hidden; border-radius: 10px;}
.movie-thumb-img:hover img{transform: scale(1.1); transition:0.2s;}
.movie-thumb-img img{transition:0.2s; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* .movie-modal-bg{display: none; width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; z-index: 999999; cursor: pointer;}
.movie-modal{width: 800px; height: 450px; padding: 20px; background: #fff; position:fixed; transform: translate(-50%, -50%); top: 50%; left: 50%;}
.movie-modal p{font-weight: bold; font-size: 1.1rem; margin-top: 10px; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 800px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.ytb-movie, .video-movie{width: 640px; height: 360px;} */

button.close-modal{width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; position: absolute; top: -60px; left: 50%; transform: translate(-50%, 0);}
.movie-ytb-bg{left: 0;}
.movie-ytb-popup{padding: 10px; height: 360px;  padding: 0; overflow: visible;}
.movie-ytb{width: 100%; height: 100%; background: #aaa;}
.movie-ytb>iframe{width: 100%; height: 100%; border-radius: 0;}
.mv-more-box{width: fit-content; margin: 0 auto 70px auto;}


/* sub.html */

/* .sub-section:last-child{margin-bottom: 100px;}
.sub-cate-bg{height: 350px;}
.sub-ad-bn{margin-bottom: 0px; margin-top: 60px;} */


/* pwfind.html */

.pwfind-box{width: 400px; padding: 50px; margin: 100px auto 100px auto;}
.pwfind-box h2{width: fit-content; margin: 30px auto;}
.pwfind-box button{width: 100%; border: none; background: #533ece; color: #fff; height: 50px; font-size: 1.1rem;}
.pwfind-box p{text-align: center; margin: 30px auto;}
.pwfind-box p span{font-weight: bold;}


/* join_sw */

label{cursor: pointer;}

input#all-chk{display: none;}
input[id="all-chk"] + label{color: #444;}
input[id="all-chk"] + label::before{content:""; display: inline-block; margin-top: -4px; margin-right: 10px; vertical-align: middle; background:url(../images/check.png); transition:0.1s; display: inline-block; width: 20px; height: 20px; border-radius: 20px; ;-webkit-box-sizing: border-box; box-sizing: border-box;}
input[id="all-chk"]:checked + label::before{transition:0.1s; background:url(../images/check_on.png);}

.all-chk{padding-left: 22px;}

/* join-menu */

.j-menu-section{ margin-bottom: 150px; margin-top: 150px;}
.j-menu-section h3{margin-bottom: 30px; text-align: center; font-size: 2rem; font-family: 'Cafe24Ssurround';}
.j-menu-section>.wrap>p{color: #aaa; text-align: center; margin-bottom: 3px;}
.join-menu{width:fit-content; margin: 50px auto; gap:100px; display: -webkit-flex; display: -ms-flex; display: flex;}
.j-menu-item{}
.j-menu-item p{width: 100%; text-align: center; font-weight: 500;}
.join-icon-box{margin-bottom: 20px; transition: 0.2s; width: 150px; height: 150px; background: #aaa; border-radius: 50%; padding: 25px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.join-icon-box:hover{background: #533ece; padding: 15px; transition: 0.2s;}
.join-icon-box img{width: 100%;}



/* ------------------ 반응형 rwd  ------------------ */


@media only screen and (max-width:1200px){


/* 메인롤링배너 모바일(220321) */
.slide-section{height: auto;}
.swiper{height: auto; font-size: 0;}
.slide-section .swiper .swiper-slide img{width: 100%; height: auto;}


 .m-cate-bt{background: #533ECE;}
 .m-cate-bt>span{background: #fff;}

 div.head-wrap, div.slide-wrap{width: 100%;}

 .wrap{width: 90%;}
 .game-item{width: 24.2%; height: 15vw; margin-right: 1%;}

 .tab-box{height: 24vw;}
 .tab>.tab-item{width: 32%; margin-right: 2%; height: 19vw;}
 .game-item>.info-box{bottom: -70px; width: 100%;}
 .game-item .thumb-box iframe{width: 100%; height: 100%;}
 .info-box .icon{width: 60px; height: 60px;}
 .info-box .text{margin-top: 5px; margin-left: 10px; width: calc(100% - 70px);}
 .icon-contaner{width: auto;}

 .tab-banner{height: auto;}
 .bn-item{width: 50%; padding-top: 19%; background: #eee; position: relative; overflow: hidden; }
 .bn-item img{position: absolute; top: 0; left: 0;}

/* sub_re */
 .week .game-container{width: 100%; padding-bottom: 70px; -ms-overflow-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap:30px; overflow-x: scroll; overflow-y: visible;}
 .week .game-container::-webkit-scrollbar{ display:none; }
 .week .game-item{margin: 0; width: 28vw;}
 .week .info-box{bottom: -80px;}

/* swinfo */
.title-banner .img{left: 35%; width: 580px; height: 280px; top: 210px;}
.title-banner h3{-webkit-box-sizing: border-box; box-sizing: border-box;}

.down-bt{margin-left: 65%;}

.share-box{bottom: 0px;}
.down-box{bottom: -70px;}


/* join */

.join-section h4{width: 100%; text-align: center; padding: 0;}
.section-wrap{padding: 50px 10%;}

/* mypage */
.my-menu{padding: 20px 65px;}

/* my-member */
.member-tab{width: 100%;}
.mem-info{width: 100%;}

/* sw_ap */
.gameapp-section .section-wrap{padding: 50px 0;}

/* ads_ap */

.app-input-box dl dt{padding: 5px;}

/* serch */

.serch-list>.serch-item{width: 270px; height: 177px;}



}

@media only screen and (max-width:1024px){

    .game-item{width: 47.5%; margin-right: 5%; margin-bottom: 15%; height: 25vw;}
    .game-item:nth-child(2){margin-right: 0;}
    .cate-bg{height: auto; padding-bottom: 50px;}
    .game-container{margin-bottom: 0;}
    .game-item>.info-box{bottom: -80px;}
    .icon-contaner{gap:7px;}

    /* sub_re */
    .week .game-item{width: 350px;}

    /* swinfo */
    .title-banner {padding-top: 50px; height: auto; padding-bottom: 50px;}
    .title-banner .img{position: static; margin: 0 auto;}
    .title-banner .title-bg{display: none;}
    .title-banner h3{padding: 0; margin-top: 50px; margin-bottom: 10px;}
    .title-banner p{height: 65px;}

    /* swinfo 추가수정 220310*/
    .share-box{position: static; width: 100%; border-radius: 5px 5px 0 0;}
    .down-box{position: static; width: 100%; margin-bottom: 30px; border-radius: 0 0 5px 5px;}
    .title-banner .down-bt{width: 100%; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0 0 5px 5px;}

    .share-box span, .share-contaner, .down-box span, .down-contaner {margin: 10px 0;}

    /* join */
    .section-wrap{padding: 50px 5%;}

    /* mypage */
    .my-menu{padding: 20px 0;}
    .my-menu li a p{font-size: 0.9rem;}

    /* mypage point */

    .pt-summury{gap:5%; width: 100%; padding: 20px;}
    .pt-summury li>p{font-size: 1rem; letter-spacing: -2px;}
    .p-tab-list{display: grid; grid-template-columns: repeat(3, 1fr);}

    /* mypage member */

    .mem-info li dl dt{font-size: 0.9rem; letter-spacing: -1px;}
    .mem-info li dl dd select{width: 20%;}
    .mem-info li dl dd input{width: 74%;}
    .mem-info li dl dd button{width: 20%; letter-spacing: -1px;}
    .recommender-tb table{width: 100%;}
    .recommender-tb table tr th{font-size: 0.9rem;}
    .recommender-tb table tr td{font-size: 0.9rem;}

    /* sw_ap */
    .app-list{grid-template-columns: repeat(auto-fill, 33%);}
    .app-input-box dl{grid-template-columns: }

    /* ads_ap */

    .app-input-box dl dt{font-size: 0.9rem; letter-spacing: -2px;}

    /* serch */

    .serch-section .serch-list{grid-template-columns: repeat(auto-fit, 50%);}
    .serch-list>.serch-item{width: 320px; height: 210px;}
    .serch-section .game-item>.info-box a{width: 100%;}
    .serch-section .info-box .text p{width: 90%;}

    /* movie */
    .movie-list{grid-template-columns: repeat(3, 1fr);}

    /* sub */
    .sub-ad-bn{margin: 0 auto;}


}

@media only screen and (max-width:768px){

    .tab{width: 240vw; height: auto;}
    .tab>.tab-item {width: 75vw; height: 40vw;}
    .tab>.tab-item:first-child{margin-left: 1rem;}
    .tab-box{-ms-overflow-style: none;  margin: 50px auto; height: auto; width: 90vw; overflow-x:scroll; overflow-y: hidden; }
    .tab-box::-webkit-scrollbar{ display:none; }
    /* .tab>.tab-item:nth-child(2),.tab>.tab-item:nth-child(3){display: none;} */
    .tab>.tab-item>img{width: 100%;}
    .bn-item{width: 100%; padding-top: 43%;}
    .ad-bn a{padding-top: 43%;}

    .info-box .icon{width: 80px; height: 80px;}
    .info-box .text{width: calc(100% - 90px);}
    .info-box>.text>p:first-child{font-size: 1.5rem;}
    .info-box>.text>p{font-size: 1.1rem; width: 55vw;}
    .info-box .text p span img{width: 17px;}
    .game-item{margin-bottom: 20%;}
    .game-item>.info-box{bottom: -95px;}

    .iconrange{display: block;}
    .point-menu{display: none;}

    /* sub_re */
    .ad-bn>a{width: 100%; margin-bottom: 30px;}
    .ad-bn2>a{}

    /* gameinfo */
    .title-banner .img{width: 100%; height: auto;}
    .title-banner h3{margin-top: 20px; font-size: 2rem;}
    .title-banner .down-bt{width: 100%;}

    /* gameinfo 추가수정 220310*/
    .score-box-in{grid-template-columns: 1fr;}
    .score-aver{margin: 0 auto;}
    .detail-box{height: 300px;}

    /* join */
    div.section-wrap{width: 100%;}
    .info-input-box li input.ip-text{width: 70%;}
    .info-input-box li input.adr{width: 22%;}

    /* mypage */
    .my-tt{text-align: center; padding: 10px 0; border-left: none; border-bottom: 5px solid #aaa; margin-top: 50px;}

    .my-menu{width: 100%; padding: 0; display: block; margin-top: 50px; margin-bottom: 100px;}
    .my-menu li{position: relative; width: 100%; padding: 10px 0; border: none; border-bottom: 2px solid #ddd;}
    .my-menu li a{}
    .my-menu li a p{padding-left: 100px; text-align: left;}
    .my-menu li a img{position: absolute; left: 2%; top: 50%; transform: translate(0, -50%); margin: 0;}

    .my-menu li::after{content: ''; display: inline-block; background: url(../images/dropdown_gray.png); transform:  translate(0, -50%) rotate(-90deg); width: 32px; height: 32px; position: absolute; right: 2%; top: 50%;}

    /* mypage point */
    .mypt-section h1{display: none;}
    .mypt-section h3{display: none;}
    .mypt-section h3.my-back{display: block; padding: 0;}
    .mypt-section h3.my-back a{ float: none; position: absolute; left: 0;}

    .pt-summury{width: 100%; padding: 30px; grid-template-columns:1fr; gap:0; -webkit-box-sizing: border-box; box-sizing: border-box; }
    .pt-summury li{}
    .pt-summury li:last-child{margin: 0;}
    .pt-summury li div{width: 100%; height: 100px !important; display: block; margin: 0 auto; border-radius: 10px;}
    .pt-summury li>p{vertical-align: top; display: block; line-height: 100px; margin: 0; color: #333; letter-spacing: 0; font-size: 1.1rem;}

    .p-tab-list{width: 100%;}
    .p-tab-list li{width: 100%;}
    .p-tab-list li h4{font-size: 1rem;}

    .pt-list li, .pt-history li, .pt-special li{padding-left: 40px;}

    .pt-history li p.price{width: 20%;}
    .pt-history li p{width: 65%;}

    /* .pt-history li p{width: 65%;}

    li p.pt-date{width: 15%;} */

    /* my-member */
    .mem-info{grid-template-columns:1fr;}
    .mem-info li{height: auto;}
    .mem-info li dl{display: grid; grid-template-columns:1fr 2fr; padding: 0 20px;}
    .mem-info li dl dt{display: inline-block; font-size: 1.1rem;}
    .mem-info li dl dd input{width: 90%;}
    .mem-info li dl dd input.myinfo_re{width: 90%;}
    .mem-info li dl dd input.mm-adr{width: 42%;}
    .mem-info li dl dd select{width: 90%; display: block; margin-bottom: 20px;}
    .mem-info li dl dd button{width: 90%; font-size: 0.8rem; display: block;}
    .wish-list li a{display: block; margin-bottom: 20px;}

    .pwedit{grid-template-columns: repeat(1, 1fr);}
    .pwedit dl:nth-child(3){grid-column: 1 / span 1; justify-self:start; width: 100%;}
    .pwedit dl dd input{width: 80%;}

    .noti-p{display: block;}

    .recommender-tb{width: 100%;}
    .recommender-tb table{min-width: 0; width: 100%;}
    .recommender tbody{width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);}
    .recommender thead{display: none;}
    .recommender-tb table tr{margin:20px auto; border: 2px solid #ddd; width: 90%;}
    .recommender-tb table tr td{text-align: left; display: block; font-size: 0.8rem; padding: 15px 5px;}
    .recommender-tb td::before{font-size: 0.8rem; float: left; content: attr(data-title); display: inline-block; width: 35%;}
    .recommender-tb table tr td button{width: 40%; font-size: 0.9rem;}

    .subtb-box table{}
    .subtb-box table thead{display: none;}
    .subtb-box table tbody{width: 100%; grid-template-columns: 1fr;}
    .recommender-tb .subtb-box td::before{width: 20%;}

    /* sw_consult */
    .cons-box{width: 100%;}
    .cons-box table{min-width: 0; width: 100%;}
    .cons-box tbody{width: 100%; display: grid; grid-template-columns: 1fr;}
    .cons-box thead{display: none;}
    .cons-box table tr{margin:20px auto; border: 2px solid #ddd; width: 90%;}
    .cons-box table tr td{text-align: left; display: block; font-size: 0.8rem; padding: 15px 5px;}
    .cons-box td::before{font-size: 0.8rem; float: left; content: attr(data-title); display: inline-block; width: 30%;}
    .cons-box table tr td button{width: 40%; font-size: 0.9rem;}
    .cons-box table tr td a{width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .cons-box table tr td p{white-space: normal;}

    .cons-top{width: 90%; margin: 0 auto; font-size: 0;}
    .cons-top select{width: 20%; height: 40px; border: 1px solid #aaa; padding: 3px;}
    .cons-top input{width: 60%; height: 40px; border: 1px solid #aaa; padding: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; border-left: none;}
    .cons-top button{width: 20%; height: 40px; background: #533ece; padding: 3px; border: none; color: #fff; font-size: 1rem; font-family: 'S-CoreDream-3Light'; vertical-align: bottom;}

    /* ads-app.html */

    .ads-section .section-wrap{padding: 30px;}
    .ads-col-2{display: grid; grid-template-columns: 1fr;}
    .ads-section ul li dl{grid-template-columns: 2fr 8fr;}

    .app-input-box dl dt{padding: 5px; font-size: 1rem; letter-spacing: 0px;}

    .cons-section .regi-box button{margin-right: 5%; margin-top: 20px;}

    .file-box, .ads-url{padding: 0;}
    .f-grid-box{grid-template-columns: 1fr; margin-top: 50px;}
    .img-review-box img{max-width: 100%;}
    .ads-section h4 span{margin: 0;}

    .step-list{display: grid; grid-template-columns: repeat(2, 1fr); gap:30px; width: 80%; margin: 0 auto;}
    .step-list li{margin: 0 auto; width: 100%;}
    .step-list li p{font-size: 0.9rem;}
    .ads-pc{display: none;}
    .ads-m{display: block;}

    .guide-bt{top: 50%; padding: 5px; z-index: 5;}

    /* board */

    .board-tab{width: 100%;}
    .noti-board-row a{position: relative;}
    .b-date, .b-title{width: 90%; display: block; margin: 0 auto;}
    .b-arrow{float: none; position: absolute; right: 0; top: 50%;}

    .noti-section .cons-top input{border-left: 1px solid #aaa; width: 80%;}
    .noti-section .cons-top button{margin: 0;}

    /* serch */
    .serch-section .serch-list{grid-template-columns: 1fr;}
    .serch-list>.serch-item{width: 410px; height: 269px;}

    /* movie */
        .movie-list{grid-template-columns: repeat(2, 1fr);}

    }


@media only screen and (max-width:640px){

    /* 메인롤링배너 모바일(220321) */
    .i-pc{display: none;}
    .i-mo{display: block;}

    /* 메인 유무료 플래그 220321 */
    .thumb-box.free::before{width: 15%; height: 30%;}


    .tab-list{grid-template-columns: repeat(2, 1fr); justify-content: space-between; gap:5px;}
    .tab-list li{background: #eee; margin: 0;}
	.tab>.tab-dtl img{width:100%!important;height: inherit!important;}
    .tab-box{width: 90vw;}
    .tab{width: auto;}
    .tab>.tab-item {width: 70vw;}
    .game-item{width: 100%; margin-right: 0; height: 45vw; margin-bottom: 30%;}
    .info-box .text p{width: 45vw; font-size: 1rem;}
    .info-box .text p:first-child{font-size: 1.3rem;}
    .game-item>.info-box{bottom: -100px;}
    .tab-list{width: 90vw;}
    .game-item .thumb-box{border-radius: 15px;}

    .point-wrap{font-size: 1.2rem;}
    .point-menu>p{display: block; padding: 20px; text-align: center; font-size: 1.5rem; margin: 0;}
    .point-menu>span{width: 30%; margin-right: 0; margin-left: 2%; font-size: 1.5rem; height: auto; padding: 10px 0;}
    .icon-more-bt>p:first-child{font-size: 0.9rem;}

    .icon-contaner{grid-template-columns:repeat(auto-fill, 51px); gap:0.5%;}
    .icon-contaner.medium{grid-template-columns:repeat(auto-fill, 51px);}
    .icon-contaner.big{grid-template-columns:repeat(auto-fill, 62px);}
    .icon-contaner.small{grid-template-columns:repeat(auto-fill, 40px);}


    /* main icon popup */
    .coin-icon>img{width: 80px;}
    .point-get>h3{font-size: 1.3rem;}
    .point-get>p{font-size: 1rem;}
    .point-popup, .youtube-popup{width: 100%; height: 100%; border-radius: 0;}
    .game-info .info-icon{width: 60px; height: 60px;}
    .game-info .info-title{margin-left: 10px;}
    .youtube-bt{width: 65%;}
    .movie{width: 100%;}
    .movie>iframe{width: 100%;}
    .more-info{width: 100%;}

    /* swinfo */
    .title-banner p{width: 100%; margin: 30px 0;}

    /* swinfo-reply */
    .review{padding: 0;}
    .review-input-box{grid-template-columns: 1fr; padding: 0;}
    .review-input-box dt .re-pic{display: none;}
    .re-reply-box{margin-left: 0px;}
    .review-input textarea{height: 80px;}
    .review li .reply-box dl dt .re-pic{width: 30px; height: 30px;}

    /* swinfo 추가수정 */
    .detail-box{height: 200px;}

    /* login */

    .login-section .wrap{width: 100%;}
    .login-bg{width: 100%; border-radius: 0; padding: 5%;}
    .login-box{width: 100%;}

    /* join */
    .info-input-box li{margin-bottom: 50px;}
    .info-input-box li:last-child{margin-bottom: 0px;}
    .info-input-box li span{display: block; width: 100%; margin-bottom: 20px;}
    .info-input-box li span.double span{display: inline-block; width: fit-content; margin: 0; }
    .info-input-box li input.ip-text{width: 100%; font-size: 0.9rem;}
    .info-input-box li input.adr{width: 34%;}
    .info-input-box li select{width: 26%; font-size: 0.9rem;}
    .info-input-box li button{display: block; width: 50%; left: 50%; top: 150px; transform:translate(-50%, -50%);}
    .info-input-box li p{margin-left: 10px;}
    .info-input-box li.must>span:before{display: inline-block;}

    /* mypage */
    .my-menu li a p{font-size: 0.8rem; padding-left: 70px; letter-spacing: -1px; padding-right: 50px;}

    /* mypage point */
    .pt-history li p{width: 45%;}
    .pt-history li p.price{width: 30%;}
    .pt-list li p.pt-his, .pt-special li p.pt-sp{width: 30%;}
    .pt-list li p, .pt-special li p{width: 40%;}
    .mypt-section li p.pt-date{width: 25%;}

    /* my-member */
    .mem-info li{height: auto;}
    .mem-info li dl{padding: 0;}
    .mem-info li dl dt{display: inline-block; font-size: 0.9rem;}

    .member-tab li{padding: 30px 0;}

    .mem-info li dl dd input{width: 90%;}
    .mem-info li dl dd input.myinfo_re{width: 90%;}
    .mem-info li dl dd input.mm-adr{width: 42%;}
    .mem-info li dl dd select{width: 90%; display: block; margin-bottom: 20px;}
    .mem-info li dl dd button{width: 90%; font-size: 0.8rem; display: block;}

    .recommender tbody{grid-template-columns: repeat(2, 1fr);}

    /* ads-app.html */

    .ads-section .section-wrap{padding: 30px; margin-top: 30px;}
    .ads-section ul li dl{grid-template-columns: 1fr;}
    .ads-section h4{display: block; width: 100%; height: 40px; text-align: center; line-height: 40px;}
    .ads-section h4 span{display: block; width: 100%; height: 40px; text-align: center; line-height: 40px;}

    .app-bt-box button{margin: 10px; width: 110px;}
    .app-bt{background: #533ece; border: none; color: #fff;}
    .app-bt:hover{background: #533ece; border: none; color: #fff;}
    .app-bt::after{display: none;}

    .step-detail-list li{width: 100%;}
    .step-detail-list li h4{font-size: 1.2rem; line-height: 40px;}
    .step-detail-list li .m-step-img-box{width: 100%;}
    .step-detail-list li .m-step-img-box .step-img{width: 100%;}
    .step-detail-list li .m-step-img-box .step-img img{width: 100%; max-width: auto;}
    .step-detail-list li .m-step-img-box .step-img .stroke{display: none;}

    /* serch */
    .serch-section .serch-list{grid-template-columns: 1fr;}
    .serch-list>.serch-item{width: 350px; height: 230px;}

    .movie-list{grid-template-columns: 1fr;}
    .movie-ytb-popup{width: 390px; height: 293px;}

    /* join_sw */

    .info-input-box li.inbt{margin-bottom: 150px;}


}

@media only screen and (max-width:390px){
    .tab-box{width: 100%;}
    .tab>.tab-item {width: 16rem; height: 40vw; border-radius:15px;}
    .tab-list{width: 100%;}
    .info-box .icon{width: 50px; height: 50px;}
    .info-box .text p:first-child{font-size: 1.1rem;}
    .info-box .text p{font-size: 0.8rem; width: 40vw;}
    .info-box .text p span img{width: 13px;}
    .game-item{margin-bottom: 35%;}
    .tab-list>li{font-size: 0.8rem;}
    .game-item>.info-box{bottom: -80px;}
    .m-logo{width: 40vw;}

    .size-text li{font-size: 1rem;}

    /* popup */
    .point-popup, .youtube-popup{padding: 20px; overflow: auto;}
    .end-bt{position: absolute; right: 10%; top: 10%;}
    .youtube-popup>.end-bt{top: 4%;}
    .youtube-popup>p{margin-top: 50px;}

    /* swinfo 추가수정 */
    .detail-box{height: 150px;}

    /* join */
    .info-input-box li input.adr{width: 30%;}
    .info-input-box li select{width: 30%;}
    .join-tt img{width: 40%;}
    .join-section h4 span{font-size: 0.9rem;}
    .agree li label{font-size: 0.9rem;}
    .agree li .agr-tt{padding: 0 10px;}
    .join-tt{font-size: 1.5rem;}
    .info-input-box li input.ip-text, .info-input-box li select{font-size: 0.8rem;}

    /*mypage point*/
    .pt-history li p, .pt-list li p, .pt-special li p {font-size: 0.9rem;}
    .pt-summury{padding: 0;}
    .pt-summury li div{border-radius: 0;}

    .p-tab-list li h4{font-size: 0.9rem; letter-spacing: -2px;}

    .mypt-section li p.pt-date{width: 30%;}
    .pt-list li p, .pt-special li p, .pt-history li p{width: 35%;}



    /* my-member */
    .mem-info li dl dt{font-size: 0.8rem;}
    .mem-info li dl dd input{width: 90%;}
    .mem-info li dl dd select{width: 90%; display: block;}
    .mem-info li dl dd input.myinfo_re{width: 90%;}
    .mem-info li dl dd input.mm-adr{width: 40%;}

    .wish-list li a p{font-size: 0.9rem; display: block; margin-top: 20px;}
    .delete{padding: 3px 10px; font-size: 0.8rem;}
    .member-tab-item li h3{height: 26px; line-height: 26px;}
    .member-section .wrap{width: 100%;}

    .pwedit dl dd input{font-size: 1rem;}
    .pwedit{width: 90%; margin: 50px auto;}

    .recommender tbody{grid-template-columns: 1fr;}

    .cons-top{}
    .cons-top select{width: 30%; border: 1px solid #aaa;}
    .cons-top input{width: 70%; border: 1px solid #aaa; border-left: none;}
    .cons-top button{width: 100%; margin-top: 10px; margin-bottom: 20px;}

    .step-list{display: grid; grid-template-columns: 1fr; gap:30px; width: 80%; margin: 0 auto;}
    .step-list li{margin: 0 auto; width: 100%;}
    .step-list li p{font-size: 0.9rem;}

    .noti-section .cons-top input{width: 100%; margin-bottom: 10px;}

    .board-tab-list{display: grid; grid-template-columns: repeat(2, 48%);}
    /* serch */
    .serch-section .serch-list{grid-template-columns: 1fr;}
    .serch-list>.serch-item{width: 270px; height: 177px;}

    .movie-ytb-popup{width: 320px; height: 240px; padding: 0; overflow: visible;}

    /* join_game */

    .all-chk{padding-left: 12px;}

}

@media only screen and (max-width:350px){
    .tab>.tab-item{width: 14rem; height: 37vw;}
    .agree li .agr-tt{padding: 0 10px;}
    .agree li button{width: 30px;}
    .join-section h4 span{font-size: 0.8rem;}
    .info-input-box li input.ip-text, .info-input-box li select{font-size: 0.7rem;}
    .pt-history li p,.pt-list li p, .pt-special li p {font-size: 0.8rem;}
    /* my-member */
    .mem-info li dl dt{letter-spacing: -1px;}
    .pwedit dl dd input{letter-spacing: -1px; margin-top: 90px;}

    /* .mem-info li dl dd input.myinfo_re, .mem-info li dl dd input.mm-adr, .mem-info li dl dd input.ph-numb{} */
}
@media only screen and (max-width:320px){
    .info-box .text p span img{width: 12px;}
}