/*reset*/
*,
*::before,
*::after {  box-sizing: border-box;}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0;}
html, body { height: 100%; font-family: 'Pretendard' !important;  letter-spacing:-0.5px; color:#23232A;}
body { line-height: 1.5;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;}
img { border-style: none;}
input, button, textarea, select { font: inherit;  color: inherit;}
button {  border: none; background: none;  cursor: pointer;}
a { display:block; text-decoration: none; color: inherit;}
a:hover {font-weight:inherit;}
ul, ol { list-style: none;  padding: 0;  margin: 0;}
table {  border-collapse: collapse;  border-spacing: 0;}
textarea { resize: vertical;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0;}
input[type="number"] { -moz-appearance: textfield;}
[hidden] {  display: none !important;}


/*common*/
.img-responsive {width:100%; }
.img-maxponsive {max-width:100%;}
.img-contain {width:100%; height:100%;  object-fit:cover; object-position:center;}
.relative {position:relative;}
.text-center {text-align:center;}

.pc {display:none;}
.mobile {display:block;}
.mbr {display:block; width:100%; height:1px; }
.br {display:none;}

.container {margin:0 auto; padding:0 15px; width:100%; max-width:420px;}

.bold {font-weight:800;}
.fc-b {color:#2D52DE;}
.fc-p {color:#4B4BEA;}
.fc-n {color:#2E459D;}
.fc-sub {color:#7E8298;}
.swiper-scrollbar {background:#E0E4EB !important;}
.swiper-scrollbar-drag {background:#4E5674 !important;}

/*head*/
#hTop {position:relative; width:101%; top:0; left:50%; transform:translate(-50%,0);}
#hTop.scroll {position:fixed;   background:rgba(255 255 255 / 100%); /*backdrop-filter:blur(12px);*/ z-index:99;}
#hTop .container {height:56px;}
#hTop .logo {position:relative; top:10px; width:100px; margin:0 auto; }
#hTop .menu {position:absolute; top:50%; left:15px; transform:translate(0,-50%); width:26px; height:26px; z-index:9;}
#hTop .btn {position:absolute; top:50%; right:15px; transform:translate(0,-50%); width:22px; height:22px; z-index:9;}
#hTop .btn.search {right:48px;}


/*main*/
.mTit {display:flex; flex-direction:column; gap:4px; margin-bottom:16px; padding:0 15px;}
.mTit h2 {font-size:22px; font-weight:700; letter-spacing:-1px;}
.mTit p { font-size:13px; line-height:1.3; font-weight:400; color:#7E8298; }
.mTit.dark h2 {color:#fff;}
.mTit.dark p {color:#D6D8E3}

#mVisual {padding:30px 15px 15px 15px; background:#F2F7FF;}
#mVisual .swiper {max-width:420px; margin:0 auto; }
.mVisualSwiper {border-radius:0 25px 0 25px; overflow:hidden;}
.mVisualSwiper .container {padding:0;}
.mVisualSwiperCon  {height:180px;}
.mVisualSwiper .swiper-pagination {width:60px !important; left:inherit !important; right:0; bottom:0 !important; padding:7px 0 4px 6px; background:rgba(0 0 0 /50%); backdrop-filter:blur(6px); color:#fff !important; font-size:12px; border-radius:30px 0 0 0;}

#mEvent {background:#F2F7FF; padding:10px 0 40px 0;}
#mEvent .container {padding:0;}
#mEvent .mTit {padding:0 15px 0 30px;}
#mEvent .mTit .swiperNavi {position:absolute; top:18px; right:15px; display:flex; align-items:center; gap:5px;}
#mEvent .mTit .swiperNavi .navi {width:32px; height:32px; display:flex; align-items:center; justify-content:center;  background:#C9D3E4; border-radius:8px;}
#mEvent .mTit .swiperNavi .navi img {width:15px;}
#mEvent .mTit .swiperNavi .navi.prev img {transform:scaleX(-1);}
#mEvent .mEventSwiper  {padding:0 15px;}
#mEvent .mEventSwiper .list a {display:flex; align-items:center; justify-content:center; height:140px; overflow:hidden; border-radius:0 25px 0 25px;}

#mBest {padding:40px 0; background:#02060c;}
#mBest .container {z-index:9;}
#mBest .mBestCover {position:absolute; top:0; left:50%; transform:translate(-50% , 0); width: 100%;  height: 600px;  overflow: hidden;  z-index:1; }
#mBest .mBestCover video {  width: 100%;  height: 100%;  object-fit: cover;}

.mBestList {display:flex; flex-wrap:wrap; gap:12px; }
.mBestList .list {width:calc(50% - 6px);}
.mBestList a {position:relative; background:#fff; padding:0 15px 20px 15px; border-radius:20px; overflow:hidden; box-shadow:3px 5px 5px rgba(0 0 0 / 30%);}
.mBestList a .rank {position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; background:#8896AC; width:35px; height:35px; border-radius:0 0 15px 0; 
color:#fff; font-size:13px; font-weight:600;} 
.mBestList a .onair {position:absolute; top:10px; right:10px; display:flex; align-items:center; background:#fff; padding:5px 10px 5px 13px; border-radius:30px; color:#8896AC; font-size:11px; font-weight:400;
box-shadow:3px 3px 5px rgba(0 0 0 / 10%);}
.mBestList a .onair .dot {display:block; margin-right:5px; width:5px; height:5px; border-radius:100%; background:#001C55;}
.mBestList a .onair .big {padding:0 0 0 5px; color:#001C55; font-size:13px; }
.mBestList a .con {padding:145px 0 0 0; text-align:center;}
.mBestList a .con h3 {font-size:16px; font-weight:700;}
.mBestList a .con .won {margin:0 0 12px 0; display:flex; align-items:center; justify-content:center; gap:3px; font-size:13px; font-weight:500;}
.mBestList a .con .won .num {position:relative; top:-1px; margin-left:3px; font-size:20px; font-weight:800;}
.mBestList a .con .btn {padding:7px 20px; border-radius:30px; background:#2D52DE; color:#fff; font-size:15px; font-weight:600;}
.mBestList a .img {position:absolute; top:55px; left:50%; transform:translate(-50% , 0); width:90%; }
.mBestList a .standard {margin-top:10px; display:flex; justify-content:center;  gap:10px; font-size:10px; letter-spacing:-1px; color:#8896AC; line-height:1.2;}
.mBestList a .standard h4 {position:relative; top:1px; color:#505360; font-weight:600;}


#mBn {padding:40px 0;}
#mBn .mTit {text-align:center;}
.mBnList ul {display:flex; flex-direction:column; gap:12px;}
.mBnList li:nth-child(1) a {background:url('/dsn/_img/mbn_1_m.png') no-repeat center / cover; border-radius:30px 0 0 0;}
.mBnList li:nth-child(2) a {background:url('/dsn/_img/mbn_2_m.png') no-repeat center / cover;}
.mBnList li:nth-child(3) a {background:url('/dsn/_img/mbn_3_m.png') no-repeat center / cover; border-radius:0 0 30px 0;}
.mBnList a {position:relative; display:flex; align-items:center; justify-content:space-between; padding:25px; color:#fff;}
.mBnList a h3 {font-size:18px;}
.mBnList a p {font-size:14px;}
.mBnList a .btn {display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:100%; background:rgba(255 255 255 / 30%); backdrop-filter:blur(12px);}
.mBnList a .btn img {width:20px;}


#mReview {background:#F2F7FF; padding:40px 0;}
#mReview .mTit {text-align:center;}
#mReview .mReviewSwiper {background:#fff; padding:20px 20px 25px 20px; border-radius:0 20px 0 20px;}
#mReview .swiper-scrollbar {bottom:25px !important; width:calc(100% - 40px) !important; left:50%; transform:translate(-50%, 0);}

.mRvList .thumb {width:100%; height:120px; border-radius:0 20px 0 20px; overflow:hidden;}
.mRvList .con {padding:20px 15px;}
.mRvList .con h3 {font-size:18px; font-weight:700;}
.mRvList .con p {margin:10px 0 15px 0; font-size:14px; font-weight:500; color:#636363; line-height:1.5; height:61px; overflow: hidden; text-overflow: ellipsis;word-break: break-word;
   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.mRvList .con .bottom {display:flex; flex-direction:column;}
.mRvList .con .bottom .user {display:flex; align-items:center; gap:8px; font-size:12px; color:#7E8298;}
.mRvList .con .bottom .user .ico {display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:100%; background:#E1E5F9;}
.mRvList .con .bottom .user .ico img {width:18px; }
.mRvList .con .bottom .user .name {position:relative; top:-3px; }
.mRvList .con .bottom .star {display:flex; align-items:center; position:relative; top:-8px; left:35px; }
.mRvList .con .bottom .star span {width:18px; height:18px; }


#mVip {padding:40px 0;}
#mVip .mVipSwiper  {padding:0 0 30px 0;}
#mVip .swiper-scrollbar { width:calc(100% - 40px) !important; left:50%; transform:translate(-50%, 0);}
#mVip .mVipSwiper .swiper-slide {opacity:0.5;}
#mVip .mVipSwiper .swiper-slide.swiper-slide-active {opacity:1;}

.mVipList .thumb {position:relative; margin:0 auto; width:110px; height:110px; border-radius:100%; overflow:hidden; z-index:9;}
.mVipList .con {position:relative; top:-20px; margin-bottom:-20px; padding:30px 15px 15px 15px; background:#F5F6F8; border-radius:0 20px 0 0; z-index:1;}
.mVipList .con .conName {margin-bottom:15px; display:flex; align-items:center; justify-content:space-between;}
.mVipList .con .conName .logo {width:55px;}
.mVipList .con .conName h3 {display:flex; align-items:center; gap:3px; font-size:14px; font-weight:400; font-weight:400;}
.mVipList .con .conName h3 .name {font-size:16px; font-weight:700;}
.mVipList .con p {font-size:13px; color:#636363; line-height:1.3;  height:33px; overflow: hidden; text-overflow: ellipsis;word-break: break-word;
   display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.mVipList .btn {padding:12px; text-align:center; color:#fff; font-size:15px; font-weight:700; background:#2E459D; border-radius:0 0 0 20px;}

@media (min-width:590px) {
#mBest .mBestCover {height: 1100px; }

}


@media (min-width: 1280px) {
.pc {display:block;}
.mobile {display:none;}
.mbr {display:none;}
.br {display:block; width:100%; height:1px;}

.container {width:1280px; }
}