@charset "euc-kr";
/* 
------------------------------------------------------------
MGAME Web Design Team
first written : Yang Young bok 241212
updated : YYB 250605 / YYB 250716
------------------------------------------------------------
*/
/* reset */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
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,-apple-system,BlinkMacSystemFont,system-ui,Roboto,sans-serif;font-weight:500;font-size:1.4rem;color:#3f3f3f}
img,button,fieldset{border:0}
img{max-width:100%;vertical-align:middle}
ul,ol,li{list-style:none}
a{color:#222;text-decoration:none}
button{cursor:pointer}
button:disabled{border-color:#b7b7b7;background:#b7b7b7;color:#fff;cursor:auto}
table{border-collapse:collapse;width:100%}
input[type=text],input[type=password],input[type=email],input[type=number]{box-sizing:border-box;padding:0 18px;width:100%;height:50px;border:1px solid #bfc1c5;border-radius:4px;color:#222}
input[type=number]::-webkit-inner-spin-button{appearance:none}
input[type=radio]{width:13px;height:13px;vertical-align:middle}
input[type=checkbox]{margin:-2px 5px 0 0;width:17px;height:17px;border:1px solid #777;vertical-align:middle}
input::placeholder{color:#bbb}
input:focus{border-color:#222;outline:none}
input:disabled{background:#f7f8fa}
select{width:100%;height:50px;border:1px solid #bfc1c5;border-radius:4px;color:#222}
/* login */
.wrap{position:relative;margin:0 auto;padding:0 20px 20px 20px;min-width:320px;max-width:420px}
.login{font-size:1.3rem}
.login h1,.member h1{margin:0 auto;padding:30px 0;width:115px}
.login input[type=text]{margin-bottom:13px}
.login ul{display:flex;justify-content:center;margin:30px 0 45px 0}
.login li:before{display:inline-block;content:'';margin:-1px 22px 0 22px;width:1px;height:13px;background:#bfc1c5;vertical-align:middle}
.login li:first-child:before{display:none}
.warning{display:flex;box-sizing:border-box;margin:20px 0 0 0;padding:20px 20px 20px 25px;min-height:75px;border-radius:4px;background:#ffe9e9;line-height:2rem;color:#555;word-break:keep-all}
.warning .icon{display:flex;align-items:center;gap:14px}
.warning .icon:before,.captcha .icon:before{flex-shrink:0;display:block;content:'';width:38px;height:36px;background:url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/icon_warning.png) no-repeat center;background-size:contain}
.warning .icon.age19:before{width:48px;height:48px;background-image:url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/icon_age19.png)}
.captcha{margin:20px 0 10px 0}
.captcha .info{margin:0 0 20px 0;padding:20px 20px 20px 25px;min-height:75px;border-radius:4px;background:#ffe9e9;line-height:2rem;color:#777;word-break:keep-all}
.captcha .info a{display:inline-block;margin:12px 0 0 0;text-decoration:underline;text-underline-position:under}
.captcha .icon{display:flex;align-items:center;gap:14px;margin:0 0 10px 0;font-size:1.4rem;color:#222}
.captcha .icon strong{display:block;font-weight:500;color:#f00c0c}
.captcha .input{display:flex;align-items:center;gap:18px;margin:0 10px}
.captcha .input input[type=text]{margin:0;font-size:1.4rem}
.btnLogin{margin:20px 0 0 0;width:100%;height:60px;border-radius:4px;background:#3893f1;font-weight:600;font-size:1.6rem;color:#fff}
/* button */
.button{display:flex;justify-content:center;gap:15px;margin:48px 0 0 0}
.button>*{display:flex;flex-grow:1;justify-content:center;align-items:center;box-sizing:border-box;padding:0 30px;min-width:calc(50% - 7.5px);height:60px;border:1px solid #808184;border-radius:4px;background:#fff;font-size:1.6rem;color:#222;white-space:nowrap}
.button .gray{border-color:#b7b7b7;background:#b7b7b7;color:#fff}
.button .confirm{border-color:#3893f1;background:#3893f1;color:#fff}
.button+p{margin:20px 0 0 0;font-size:1.2rem;text-align:center}
/* member */
.member h2{margin:-4px 0 8px 0;font-weight:700;font-size:1.8rem;line-height:2.6rem;text-align:center}
.member h2 strong{color:#1678de}
.member h2 .wait{color:#ec381a}
.member h2+p{margin:0 0 45px 0;font-size:1.2rem;line-height:1.8rem;text-align:center;color:#777}
.agreement{margin:45px 0 0 0}
.agreement label{cursor:pointer}
.agreement>label{margin:0 0 0 10px;font-size:1.6rem;color:#222}
.agreement ul{margin:16px 0 0 0;border-top:1px solid #777}
.agreement li{position:relative;padding:16px 10px;border-bottom:1px solid #e8eaec;color:#777}
.agreement li button{position:absolute;top:calc(50% - 20px);right:0;width:40px;height:40px;background:url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/bu_arrow.png) no-repeat center;background-size:8px auto;text-indent:-9999px}
.agreement li button:hover{filter:brightness(0)}
.authenticate li{margin:20px 0}
.authenticate a{display:flex;align-items:center;box-sizing:border-box;padding:5px;border:1px solid #d1d4d9;border-radius:4px;background:#fff url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/bu_arrow.png) no-repeat calc(100% - 33px) center;background-size:7px 12px;line-height:1.7rem}
.authenticate a:hover{padding:4px;border:2px solid #3893f1;background-position:calc(100% - 32px) center}
.authenticate a:before{display:block;content:'';margin:0 4px 0 15px;width:50px;height:50px;background:url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/icon_authenticate.png) no-repeat center 0;background-size:50px 200px;scale:1.15}
.authenticate strong{display:block;font-weight:600;color:#222}
.authenticate .email a:before{background-position:center -50px}
.authenticate .creditcard a:before{background-position:center -100px}
.authenticate .phone a:before{background-position:center -150px}
.authenticate.horizontal{display:flex;gap:10px;margin:25px 0 0 0}
.authenticate.horizontal li{flex-grow:1;margin:0 !important;min-width:calc(50% - 5px);text-align:center}
.authenticate.horizontal a{display:block;padding:1px 0 10px 0;border-color:#a3a4a6}
.authenticate.horizontal a:hover{padding:0 0 9px 0}
.authenticate.horizontal a:before{margin:0 auto !important}
.mgameId{margin:0 0 20px 0;border:1px solid #d1d4d9;border-radius:3px}
.mgameId li{padding:18px 33px;border-top:1px solid #e7e9eb;color:#222}
.mgameId li:first-child{border:none}
.mgameId+p{font-size:1.2rem;color:#777;text-align:center}
.information{margin:50px 0 0 0}
.information div{display:flex;gap:8px;margin:13px 0}
.information p{margin:10px 0 20px 0;font-size:1.2rem;line-height:1.8rem;color:#777}
.information p strong{color:#ec381a}
.information p em{font-style:normal;color:#1678de}
.information button{padding:0 25px;border-radius:4px;background:#b7b7b7;color:#fff;white-space:nowrap}
.information button:hover{background:#555}
.verification{margin:0 20px;font-size:1.2rem;line-height:1.8rem;text-align:center;color:#555;word-break:keep-all}
.verification:before{display:block;content:'';margin:40px auto 30px auto;width:135px;height:135px;border-radius:50%;background:#f7f8fa url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/icon_email.png) no-repeat center;background-size:80px auto}
.verification strong{font-weight:500;font-size:1.8rem;line-height:3.6rem;color:#222}
.withdrawal{margin:33px 0;text-align:center;color:#222}
.box{padding:10px 20px;border-radius:4px;background:#f7f8fa;font-size:1.2rem;line-height:2rem;word-break:keep-all}
.box li{margin:10px 0 10px 6px;text-indent:-6px}
.protect{word-break:keep-all}
.protect h2{margin:0 0 18px 0;text-align:left}
.protect h2+p{margin:0 0 16px 0;text-align:left}
.protect h2+p strong{color:#ec381a}
.protect h3{margin:40px 0 7px 0;font-weight:500;font-size:1.6rem;color:#222}
.protect h3+p{font-size:1.2rem;line-height:2rem;color:#555}
.protect h4{margin:10px 0 0 0;font-size:1.4rem}
.protect .password{margin:20px 0 0 0;padding:27px 15px 1px 15px;border-radius:4px;background:#f7f8fa}
.protect .password label{display:block;margin:0 0 27px 0;color:#222}
.protect .password input{margin:12px 0 0 0}
.protect .complete{margin:20px 0 0 0;padding:23px;border:1px solid #d1d4d9;border-radius:4px;font-size:1.4rem;color:#222;text-align:center}
.protect .complete:before{display:inline-block;content:'';margin:0 14px 0 0;width:47px;height:45px;background:url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/icon_complete.png) no-repeat;background-size:contain;vertical-align:middle}
/* modal */
.modal{position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:rgba(0,0,0,.7);word-break:keep-all;z-index:100}
.modalContent{position:relative;box-sizing:border-box;margin:0 36px;padding:30px 20px 18px 20px;width:100%;max-width:416px;min-width:288px;border-radius:10px;background:#fff;font-size:1.1rem;color:#555}
.modal h3{margin:0 0 6px 0;font-size:1.8rem;color:#222}
.modal h3 em{font-style:normal;font-size:1.6rem}
.modal h3+p{margin:0 0 18px 0}
.modal h3+.guide{margin-top:20px}
.modal h4{margin:20px 0 5px 0;font-size:1.3rem;color:#222}
.modal h4 em{font-weight:600;font-style:normal;font-size:1.2rem}
.modal h5,.modal h6{margin:20px 0 5px 0;font-weight:500;font-size:1.1rem;color:#222}
.modal input[type=text],.modal input[type=password],.modal input[type=email],.modal input[type=number],.modal select{margin:0 0 13px 0;padding:0 10px;height:40px;font-size:1.2rem}
.modal select{padding:0 6px}
.modal .number{position:relative}
.modal .number input[type=number]{margin:0}
.modal .number span{position:absolute;top:calc(50% - 6px);right:14px;color:#f00c0c}
.modal .close{position:absolute;top:5px;right:5px;padding:5px;width:21px;background:none;font:0/0 arial}
.modal .button{margin:25px -20px 0 -20px;padding:18px 0 0 0;border-top:1px solid #e0e2e6}
.modal .button>*{display:inline-flex;flex-grow:0;min-width:85px;height:36px;font-size:1.2rem}
.modal .guide li{margin:0 0 6px 6px;line-height:1.6rem;word-break:keep-all;text-indent:-6px}
.modal .note li{margin:0 0 8px 8px;line-height:1.6rem;word-break:keep-all;text-indent:-8px}
.modal .authenticate{padding:4px 14px;border-radius:4px;background:#f7f8fa}
.modal .authenticate li{margin:10px 0}
.modal .authenticate a{border-radius:2px;background-image:none;color:#777}
.modal .authenticate a:before{margin-top:-5px;margin-bottom:-5px;margin-left:5px;scale:1}
.modal .authenticate strong{font-size:1.2rem}
.modal .authenticate.horizontal{padding:13px 12px}
.modal .box{margin:25px 0 0 0;padding:2px 10px;font-size:1.1rem;line-height:1.6rem}
.birth{display:flex;gap:7px}
div.email{display:flex;align-items:center;gap:11px;font-size:1.2rem}
div.email input[type=email]{margin:0;width:52%}
div.email select{margin:0;width:48%}
div.phone{display:flex;gap:7px}
div.phone input[type=number]{padding:0;text-align:center}
div.phone button{padding:0 7px;height:40px;border-radius:4px;background:#555;font-size:1.2rem;color:#fff;white-space:nowrap}
.other{margin:20px 0;text-align:center}
.other a{display:inline-block;padding:10px;text-decoration:underline;text-underline-position:under}
.userId{padding:6px 16px;border-radius:3px;background:#f7f8fa;color:#222}
.userId li{border-bottom:1px solid #e4e6ea}
.userId li:last-child{border:none}
.userId label{display:flex;justify-content:space-between;padding:13px 6px 13px 5px;cursor:pointer}
.list{margin:0 0 25px 0;line-height:1.6rem}
.list strong{color:#222}
.list li{margin:3px 0 3px 35px;text-indent:-35px}
.list+p{margin:0 0 0 8px;line-height:1.6rem;word-break:keep-all;text-indent:-8px;color:#222}
.list+p a{text-decoration:underline;text-underline-position:under}
.scroll{box-sizing:border-box;margin:16px 0 0 0;padding:6px;height:310px;border:1px solid #d1d4d9;line-height:1.6rem;color:#777;overflow-y:auto}
.scroll strong{font-weight:normal;color:#222}
.scroll table{border-collapse:collapse;margin-bottom:20px;width:100%;border-top:1px solid #afafaf;font-size:1rem;line-height:1.4rem}
.scroll table.center td:last-child{text-align:center}
.scroll th,.scroll td{padding:2px;border-bottom:1px solid #eaeaeb;text-align:center}
.scroll th{background:#f8f8ff;color:#222}
.scroll td:last-child,.scroll td.left{text-align:left}
.scroll h5:first-child{margin-top:0}
.scroll>ul,.scroll>ol,.scroll p{margin-bottom:10px}
.scroll li li{margin-left:8px}
.scroll a{text-decoration:underline;text-underline-position:under}
.scroll .stress{color:#f00}
.scroll::-webkit-scrollbar{width:3px}
.scroll::-webkit-scrollbar-track{background:#fff}
.scroll::-webkit-scrollbar-thumb{border-radius:3px;background:#bbb}
.btnReset{box-sizing:border-box;margin:23px 0 14px 0;width:100%;height:38px;border:1px solid #808184;border-radius:3px;background:none;color:#222}
/* Pc */
@media all and (min-width:768px) {
input[type=text],input[type=password],input[type=email],input[type=number]{padding:0 25px;height:55px;font-size:1.6rem}
input[type=radio]{width:20px;height:20px}
input[type=checkbox]{margin:-3px 10px 0 0;width:22px;height:22px}
/* login */
.login{font-size:1.4rem}
.login h1,.member h1{padding:70px 0 42px 0;width:145px}
.login input[type=text]{margin-bottom:15px}
.login ul{margin:35px 0 60px 0}
.login li:before{margin:-1px 36px 0 36px;height:15px}
.warning{gap:20px;margin-top:25px;padding:20px 30px;min-height:85px;border-radius:5px;line-height:2.4rem}
.warning .icon:before{margin-left:20px;width:40px;height:38px}
.warning .icon.age19{gap:20px}
.warning .icon.age19:before{margin:0;width:62px;height:62px;}
.captcha .info{line-height:2.4rem}
.captcha .icon{font-size:1.6rem}
.btnLogin{margin-top:25px;height:66px;border-radius:5px;font-size:1.8rem}
/* button */
.button{margin-top:55px}
.button>*{height:66px;border-radius:5px;font-size:1.8rem}
.button+p{font-size:1.3rem}
/* member */
.member h2{margin:4px 0 8px 0;font-size:2.4rem;line-height:3.4rem}
.member h2 span{font-weight:500;font-size:1.8rem}
.member h2 strong{font-weight:500}
.member h2+p{margin-bottom:68px;font-size:1.6rem;line-height:2.4rem}
.agreement{margin:68px 0 0 0}
.agreement>label{margin-left:13px;font-size:1.8rem}
.agreement ul{margin-top:19px}
.agreement li{padding:19px 13px;font-size:1.6rem}
.authenticate a{padding:10px;border-radius:5px;background-position:calc(100% - 40px) center;background-size:10px 16px;line-height:1.7rem}
.authenticate a:hover{padding:8px;border:3px solid #3893f1;background-position:calc(100% - 38px) center}
.authenticate a:before{margin:0 20px 0 30px;scale:1.3}
.authenticate strong{font-size:1.8rem}
.authenticate.horizontal a{display:block;padding:15px}
.authenticate.horizontal a:hover{padding:13px}
.mgameId{border-radius:5px}
.mgameId li{padding:24px 45px;font-size:1.8rem}
.mgameId+p{font-size:1.4rem}
.information{margin-top:40px}
.information div{gap:10px;margin:15px 0}
.information p{margin-bottom:40px;font-size:1.4rem}
.information button{padding:0 35px;border-radius:6px}
.verification{margin:0;font-size:1.4rem;line-height:2.4rem;letter-spacing:-0.5px;white-space:nowrap}
.verification:before{width:166px;height:166px;background-size:98px auto}
.again{margin:70px 0 100px 0}
.withdrawal{margin:50px 0;font-size:1.6rem}
.box{padding:10px 30px;border-radius:10px;font-size:1.3rem;line-height:2.6rem}
.box li{margin:10px 0 10px 7px;text-indent:-7px}
.protect h2{margin:0 0 22px 0;color:#1678de;text-align:center}
.protect h2:before{display:block;content:'';margin:0 auto 20px auto;width:63px;height:63px;background:url(https://mgameimage.gscdn.com/mgamezzang/contents/portal_v6/login/icon_protect.png) no-repeat;background-size:contain}
.protect h2+p{margin:0 0 40px 0;letter-spacing:-1px;text-align:center}
.protect h3{margin:60px 0 15px 0;font-size:1.8rem}
.protect h3+p{font-size:1.4rem;line-height:2rem}
.protect h4{margin:10px 0 10px -7px;font-size:1.8rem}
.protect .box.line{padding-bottom:20px;border:1px solid #cdced0;border-radius:10px;background:none;font-size:1.4rem}
.protect .box.line li{margin:5px 0}
.protect .authenticate{display:flex;gap:20px;margin:20px 0 0 0;padding:5px 15px;border-radius:10px;background:#f7f8fa}
.protect .authenticate li{width:50%}
.protect .authenticate a{justify-content:center;background-image:none}
.protect .authenticate a:before{margin:0 0 0 -10px}
.protect .authenticate strong{font-size:1.6rem}
.protect .password{padding-top:25px;padding-bottom:10px}
.protect .password label{display:flex;align-items:center;margin:0 0 15px 0;white-space:nowrap}
.protect .password span{width:45%}
.protect .password span:before{display:inline-block;content:'กค';margin:0 5px 0 0}
.protect .password input{margin:0;padding:0 16px;font-size:1.4rem}
.protect .complete{padding:40px;border-radius:10px;font-size:1.8rem}
.protect .complete:before{width:43px;height:41px}
/* modal */
.modalContent{padding:45px 30px 20px 30px;border-radius:20px;font-size:1.3rem}
.modal h3{margin:0 0 10px 0;font-size:2.4rem}
.modal h3 em{font-size:2.4rem;letter-spacing:-1px}
.modal h3+p{margin:0 0 28px 0;font-size:1.4rem}
.modal h4{margin:30px 0 10px 0;font-size:1.6rem}
.modal h4 em{font-size:1.4rem}
.modal h5,.modal h6{font-size:1.2rem}
.modal input[type=text],.modal input[type=password],.modal input[type=email],.modal input[type=number],.modal select{margin-bottom:15px;padding:0 20px;height:50px;font-size:1.4rem}
.modal select{padding:0 16px}
.modal .number span{top:calc(50% - 8px)}
.modal .close{top:10px;right:10px;width:26px}
.modal .button{margin:35px -30px 0 -30px;padding-top:20px}
.modal .button>*{min-width:108px;height:40px;font-size:1.4rem}
.modal .note li{font-size:1.3rem;line-height:2.4rem}
.modal .authenticate{padding:5px 20px;border-radius:6px}
.modal .authenticate li{margin:15px 0;font-size:1.3rem}
.modal .authenticate a{border-radius:4px;line-height:2.2rem}
.modal .authenticate a:before{margin-top:0;margin-bottom:0;margin-left:15px;scale:1.25}
.modal .authenticate strong{font-size:1.6rem}
.modal .authenticate.horizontal a{border-radius:6px}
.modal .authenticate.horizontal a:before{margin-bottom:8px !important;scale:1.5}
.modal .authenticate.horizontal strong{font-size:1.5rem}
.modal .box{padding:2px 16px;font-size:1.3rem;line-height:2rem}
div.email{font-size:1.4rem}
div.phone button{padding:0 20px;height:50px;border-radius:6px;font-size:1.4rem}
.other{margin:30px 0;font-size:1.4rem}
.userId{padding:5px 25px;border-radius:6px}
.userId label{padding:15px 6px}
.list{line-height:2.4rem}
.list strong{color:#777}
.list li{margin-left:41px;text-indent:-41px}
.list+p{margin:0 0 0 9px;line-height:2rem;text-indent:-9px}
.scroll{margin-top:25px;padding:10px;height:325px;font-size:1.2rem;line-height:2rem}
.scroll table{font-size:1.1rem;line-height:1.6rem}
.scroll th,.scroll td{padding:5px 2px}
.scroll>ul,.scroll>ol,.scroll p{margin-bottom:20px}
.scroll li li{margin-left:10px}
.btnReset{height:50px;border-radius:6px;font-size:1.6rem}
}