@charset "euc-kr";
/* 
------------------------------------------------------------
MGAME Web Design Team
first written : Yang Young bok 240510
updated : YYB 240628
------------------------------------------------------------
*/
/* reset */
@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;src:url('font/PretendardVariable.woff2') format('woff2-variations')}
@font-face{font-family:'Jalnan2';src:url('font/Jalnan2.otf')}
html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;font-size:62.5%}
body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,p,th,td,caption,fieldset,legend,input,button,textarea{margin:0;padding:0}
body,input,button,select,textarea{font-family:'Pretendard Variable',Pretendard,arial;font-weight:400;font-size:1.4rem;color:#3f3f3f}
img,button,fieldset{border:0}
img{vertical-align:middle}
ul,ol,li{list-style:none}
a{color:#3f3f3f;text-decoration:none}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
/* scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#262626}
::-webkit-scrollbar-thumb{background:#696969;border-radius:3px}
/* Mobile */
.footer .btnTop,.sitemap{display:none}
.wrap{position:relative;margin:0 auto;min-width:320px}
.header{position:fixed;top:0;left:0;width:100%;min-width:320px;background:rgba(0,0,0,.7);transition:all .5s;z-index:100}
.header h1{position:relative;display:flex;align-items:center;margin:0 20px;height:50px}
.header h1 img{width:169px;height:23px}
.header .open{position:absolute;top:20px;right:20px}
.header.bg{background:#fff}
.header.bg h1 img{filter:invert(60%) brightness(0.6)}
.header .open{position:absolute;top:14px;right:20px;width:26px;height:23px;background:none;font:0/0 arial}
.header .open span,.header .open span:before,.header .open span:after,.header .close span,.header .close span:before{display:block;content:'';width:100%;height:3px;background:#fff}
.header.bg .open span,.header.bg .open span:before,.header.bg .open span:after,.header.bg .close span,.header.bg .close span:before{background:#1b1b1b}
.header .open span,.header .open span:before,.header .open span:after{border-radius:2px}
.header .open span:before{position:absolute;top:0}
.header .open span:after{position:absolute;bottom:0}
.header .close span,.header .close span:before{height:4px;background:#1b1b1b}
.header .close{position:absolute;top:18px;right:17px;width:36px;height:36px;background:none;font:0/0 arial;display:none;z-index:100}
.header .close span{transform:rotate(45deg)}
.header .close span:before{position:absolute;top:calc(50% - 2px);left:0;transform:rotate(90deg)}
.footer{background:#1e1e1e;text-align:center}
.footer section{position:relative;box-sizing:border-box;margin:0 auto;color:#fff;text-align:center;z-index:1}
.footer section h3{padding:50px 0 35px 0}
.footer section h3 img{width:259px}
.footer a{color:#acacac}
.footer a:hover{text-decoration:underline}
.terms{display:flex;justify-content:center;font-size:1.2rem}
.terms li:before{display:inline-block;content:'';margin:0 33px;width:1px;height:9px;background:#acacac}
.terms li:first-child:before{display:none}
address{margin:40px 5px 0 5px;max-width:1600px;padding:17px 15px;border-radius:25px 25px 0 0;background:#0b524c;font-style:normal;font-size:1.2rem;line-height:1.8rem;color:#bfbfbf;text-align:center}
address h3{margin:0 auto 10px auto;padding:0 0 10px 0;max-width:1032px;border-bottom:1px solid #6f6f6f;font-weight:normal;font-size:1.8rem;color:#fff}
/* login */
.login{display:flex;flex-wrap:wrap;align-content:center;gap:60px;box-sizing:border-box;padding:125px 0 75px 0;min-height:calc(100vh - 277px);background:#27333f;color:#fff;text-align:center}
.login h2{width:100%;font-family:'Jalnan2';font-weight:normal;font-size:3rem}
.login .input{display:flex;justify-content:center;gap:10px;margin:0 auto;padding:0 20px}
.login label{display:flex;align-items:center}
.login label strong{width:40px;font-weight:normal}
.login label:first-child{margin:0 0 5px 0}
.login input{box-sizing:border-box;padding:0 10px;width:100%;max-width:360px;height:30px;border:1px solid #737b83}
.login button{padding:0 20px;background:#1561a7;font-size:1.6rem;color:#fff;white-space:nowrap}
.login button:hover{background:#1b558a}
/* Mobile - Landscape */
@media all and (min-width:576px) {
}
/* Tablet */
@media all and (min-width:768px) {
body,input,button,select,textarea{font-size:2rem}
.header h1{margin:0 30px;height:90px}
.header h1 img{width:260px;height:auto}
.header .open{top:28px;right:30px;width:41px;height:34px}
.header .open span,.header .open span:before,.header .open span:after,.header .close span,.header .close span:before{height:4px}
.footer section h3{padding:75px 0 40px 0}
.footer .btnTop{position:absolute;top:17px;right:30px;z-index:1;display:block}
.terms{font-size:1.6rem}
.terms li:before{margin:0 50px;height:12px}
.sitemap{display:flex;justify-content:space-between;gap:40px;margin:86px 75px 0 75px}
.sitemap>li{flex:0 0 21%}
.sitemap h4{padding:0 0 16px 0;border-bottom:1px solid #6f6f6f;font-weight:normal;font-size:2.4rem}
.sitemap ul{margin:20px 0 40px 0;font-size:1.6rem}
.sitemap ul li{margin:20px 0}
address{margin:0 30px;padding:20px 90px}
.login{gap:120px;padding:200px 0 150px 0;font-size:4.5rem}
.login h2{font-size:6.2rem}
.login label:first-child{margin-bottom:10px}
.login label strong{margin-right:10px;width:100px}
.login input{height:60px;font-size:4.2rem}
.login button{padding:0 35px;font-size:4.5rem}
}
/* Desktop */
@media all and (min-width:1024px) {
.header .open,.header .close{display:none}
.header h1{margin:0;height:100px}
.header h1 img{width:auto}
.header:hover{background:#fff}
.header:hover .menu>li>a{color:#000}
.header.bg,.header:hover{background:#fff}
.header.bg h1 img,.header:hover h1 img{filter:invert(60%) brightness(0.6)}
.header.bg .menu>li>a{color:#000}
.gnb{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;margin:0 auto;padding:0 25px 0 20px;max-width:1600px;height:100px;font-size:1.8rem}
.gnb>div{width:52%}
.menu{display:flex;justify-content:space-between;align-items:center;height:100px}
.menu>li>a{display:block;padding:20px;color:#fff;white-space:nowrap}
.menu>li:hover>a{font-weight:500}
.menu>li{position:relative}
.menu ul{position:absolute;box-sizing:border-box;padding:30px 0 0 0;width:100%;height:0;text-align:center;transition:all .25s ease-out;overflow:hidden}
.menu ul:before{content:'';display:block;position:fixed;top:100px;left:0;width:100%;height:0;background:#fff;transition:all .25s ease-out;z-index:-1}
.menu ul li{margin:19px 0}
.menu ul a{display:block}
.menu ul a:hover{font-weight:500;text-decoration:underline}
.menu:hover ul,.menu:hover ul:before{height:214px}
.menu:hover ul:before{border-top:1px solid #eee}
.footer section h3{padding:135px 0 70px 0}
.footer section h3 img{width:auto}
.footer .btnTop{top:30px;right:10px}
.sitemap{margin:86px auto 0 auto;padding:0 80px;max-width:1280px}
.sitemap>li{max-width:243px}
.sitemap ul{margin:40px 0 30px 0;font-size:1.8rem}
address{margin:20px auto 0 auto;padding:43px 100px;border-radius:50px 50px 0 0;font-size:1.4rem;line-height:2.4rem}
address h3{margin-bottom:22px;padding-bottom:22px;font-size:2.4rem}
address .copyright{font-size:1.6rem}
}
/* Gnb Fold */
@media all and (max-width:1023px) {
body.fold{overflow:hidden}
body.fold:before{display:block;content:'';position:fixed;width:100%;height:100vh;background:#000;overflow:hidden;opacity:0.7;z-index:10}
body.fold .header{background:rgba(0,0,0,.7)}
body.fold .header h1{z-index:-1}
.gnb>div{position:fixed;top:0;right:0;box-sizing:border-box;width:0;height:100%;opacity:0;transition:all .25s ease-out;overflow:hidden}
.menu{margin:70px 0 0 0;padding:0 22px 0 20px;height:calc(100% - 70px);opacity:0;overflow-y:auto}
.menu a{display:block;padding:10px;white-space:nowrap}
.menu>li{position:relative;margin:30px 0}
.menu>li:after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:56px}
.menu>li>a{position:relative;padding-left:18px;font-size:2.6rem;white-space:nowrap}
.menu>li>a:after{display:block;content:'';position:absolute;top:calc(50% - 6px);right:0;width:20px;height:13px;background:url(https://mgameimage.gscdn.com/mgamezzang/mplaypark/common/bu_gnb.png) no-repeat;background-size:contain}
.menu>li.on>a:after{transform:rotate(180deg)}
.menu>li.on>a+ul{max-height:500px;transition:all .5s ease-in}
.menu ul{max-height:0;overflow:hidden;transition:all .5s ease}
.menu ul li{margin:10px 43px}
.menu ul a{font-size:2rem}
.gnb.fold>div{width:300px;background:#fff;opacity:100%;z-index:100}
.gnb.fold .menu{opacity:1}
.gnb.fold .close{display:block}
}
@media all and (min-width:768px) and (max-width:1023px) { 
.header .close{width:50px;height:50px}
.menu{margin:120px 0 0 20px;height:calc(100% - 120px)}
.menu>li{margin-right:20px}
.menu>li:after{height:70px}
.menu>li>a{font-size:3.6rem}
.menu>li>a:after{width:24px;height:17px}
.menu ul a{font-size:2.8rem}
.gnb.fold>div{width:50%}
}