@charset "euc-kr";
/* 
------------------------------------------------------------
MGAME Web Design Team
first written : Yang Young bok 240510
updated : 
------------------------------------------------------------
*/
/* main */
.vod{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_vod_m.jpg)}
.intro{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_intro_m.jpg)}
.sns{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_sns_m.jpg)}
.info{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_info_m.jpg)}
.community{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_community_m.jpg)}
.video{position:absolute;top:0;left:0;display:flex;justify-content:center;width:100%;height:100vh}
.video video{min-width:100%;margin:0 auto;object-fit:cover}
.video .pc{display:none}
.video2{position:absolute;top:0;width:100%;min-width:320px;height:100vh;left:0;bottom:0}
section{background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}
@supports(-webkit-overflow-scrolling:touch){section{background-attachment:scroll;}}
.content{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;box-sizing:border-box;margin:0 auto;min-height:100vh;color:#fff;text-align:center;z-index:1}
.content h2{flex-basis:100%;font-weight:normal;font-size:2.2rem;line-height:4rem}
.content h2 strong{display:block;margin:13px 0 0 0;font-family:'Jalnan2';font-weight:normal;font-size:4rem}
.content h2 strong span{line-height:5.2rem}
.content h2 span{display:block;line-height:1.2rem}
.content p{flex-basis:100%;margin:8px 0 0 0;line-height:2.5rem}
.content p span{display:block}
.intro .content{padding-top:60px;align-content:flex-start}
.intro button,.sns button{margin:30px 0 0 0;padding:0 20px;height:36px;border-radius:18px;background:#3f205c;font-size:1.8rem;color:#fff}
.intro button:hover{background:#5b268c}
.intro button span,.sns button span{position:relative;margin:-2px 0 0 10px;vertical-align:middle}
.intro button span,.intro button span:after,.sns button span,.sns button span:after{display:inline-block;width:11px;height:1px;background:#fff}
.intro button span:after,.sns button span:after{content:'';position:absolute;top:-5px;left:5px;width:1px;height:11px}
.sns .content,.info .content,.community .content{align-content:space-around;padding:60px 0 20px 0}
.sns .content>div{max-width:480px}
.sns ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin:0 auto 40px auto;padding:0 20px}
.sns li{flex:1 1 40%;max-width:233px;border:2px solid #fff;border-radius:5px;overflow:hidden}
.sns li img{width:100%;border-radius:5px}
.sns li:nth-child(n+5){display:none}
.sns button{position:relative;margin:0 auto;background:#3a3a3a}
.sns button:hover{background:#1d1d1d}
.sns button:before{display:inline-block;content:'';margin:-2px 10px 0 0;width:21px;height:21px;background:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/icon_instagram.png) no-repeat;background-size:cover;vertical-align:middle}
.operate,.notice{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:0 20px}
.operate>div,.notice>div{position:relative;flex:1 1 50%;max-width:606px;border-radius:20px 20px 10px 10px;background:#fff}
.info h3,.community h3{padding:8px 30px;border-radius:10px 10px 0 0;background:#7a4325;font-weight:normal;font-size:1.8rem;text-align:left}
.info ul{margin:4px 20px 10px 20px}
.info li{padding:10px 4px;background:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/line_dot.png) repeat-x 0 bottom;background-size:auto 1px;color:#b0832c;text-align:center;overflow:hidden}
.info li:last-child{background:none}
.info li strong{float:left;width:22%;font-weight:normal;color:#3f3f3f;text-align:center}
.info .time h3{background:#675231}
.info .time li{text-align:right}
.info .time strong{width:38%}
.info .more,.community .more{position:absolute;top:0;right:5px;padding:20px 10px;font-family:dotum;font-size:2rem;line-height:0;color:#fff}
.community h2{color:#127db3;text-align:center}
.community h3{background:#255b5c}
.community .notice>div:last-child h3{background:#3e72a9}
.community ul{margin:22px 30px}
.community li{position:relative;margin:19px 0;text-align:left;overflow:hidden}
.community li a{display:block;padding:0 0 1px 0;max-width:260px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.community a:hover .detail{border-bottom:1px solid #4f565d}
.community .date{display:none}
/* Mobile - Landscape */
@media all and (min-width:576px) {
.vod{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_vod_t.jpg)}
.intro{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_intro_t.jpg)}
.sns{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_sns_t.jpg)}
.info{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_info_t.jpg)}
.community{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_community_t.jpg)}
.video .mobile{display:none}
.video .pc{display:block}
.content{max-width:480px}
.content p span,.content h2 span{display:inline}
}
/* Tablet */
@media all and (min-width:768px) {
.content{max-width:1600px}
.content h2{font-size:4rem;line-height:6rem}
.content h2 strong{margin:23px 0 10px 0;font-size:8rem}
.content p{margin:20px 0 0 0;line-height:3.5rem}
.vod .content{padding:0 0 0 110px;text-align:left}
.intro .content{align-content:space-around;padding:0 75px 0 0;text-align:right}
.intro .content>div{flex-basis:100%}
.intro button{margin:0 0 0 auto}
.intro button,.sns button{padding:0 30px;height:52px;border-radius:26px;font-size:2.3rem;line-height:52px}
.intro button span,.sns button span{margin-left:20px}
.intro button span,.intro button span:after,.sns button span,.sns button span:after{width:15px;height:1px}
.intro button span:after,.sns button span:after{top:-7px;left:7px;width:1px;height:15px}
.sns .content,.info .content,.community .content{padding:100px 0 40px 0}
.sns .content>div{display:flex;flex-wrap:wrap-reverse;max-width:1024px}
.sns ul{gap:40px;margin:0 auto;padding:0 40px}
.sns li{flex:1 1 25%;max-width:300px;border-width:3px;border-radius:15px}
.sns li img{border-radius:15px}
.sns li:nth-child(n+5){display:block}
.sns button{margin-bottom:50px}
.sns button:before{width:31px;height:31px}
.operate,.notice{flex-basis:100%}
.info h3,.community h3{font-size:2.5rem}
.info .more,.community .more{top:2px;right:6px}
.community li a{max-width:500px}
}
/* Desktop */
@media all and (min-width:1024px) {
.vod{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_vod.jpg)}
.intro{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_intro.jpg)}
.sns{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_sns.jpg)}
.info{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_info.jpg)}
.community{background-image:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/main/bg_community.jpg)}
.content h2{font-size:4.8rem;line-height:8rem}
.content h2 strong{margin:23px 0 10px 0;font-size:9.6rem}
.content p{margin:30px 0 0 0;line-height:3rem}
.vod .content{padding:0 0 0 16px}
.vod p{padding:0 0 70px 0}
.intro .content{align-content:center;padding:0 20px 0 0}
.intro button,.sns button{margin-top:70px}
.operate,.notice{flex-wrap:nowrap}
.operate>div,.notice>div{margin:58px 0 0 0;width:50%;border-radius:40px 40px 20px 20px}
.info h3,.community h3{padding:17px 40px;border-radius:20px 20px 0 0;font-size:3.2rem}
.info ul{margin:25px 35px 28px 35px}
.info li{padding:12px 4px;background-size:auto}
.info .more,.community .more{top:16px;right:19px;font-size:3.2rem}
.community ul{margin:33px 40px 36px 40px}
.community li{margin:26px 0}
.community .date{float:left;width:110px;font-size:1.6rem;line-height:2.4rem;display:block}
}
/* Desktop - wide */
@media all and (min-width:1440px) {
.sns .content,.info .content,.community .content{align-content:center;padding:120px 0 20px 0}
.intro button,.sns button{margin:70px auto 100px auto;padding:0 40px;height:46px;border-radius:23px;line-height:46px}
.sns .content>div{flex-wrap:wrap; max-width:1600px}
.sns ul{gap:19px;margin-top:70px;padding:0 20px;max-width:1600px}
.sns li{flex:1 1 10%;border-width:5px;border-radius:10px}
.sns button{margin-bottom:0}
.sns button:before{width:29px;height:29px}
}