@charset "euc-kr";
/* 
------------------------------------------------------------
MGAME Web Design Team
first written : Yang Young bok 250520
updated :
------------------------------------------------------------
*/
/* reset */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
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:500;font-size:1.4rem;color:#2f2f2f}
img,button,fieldset{border:0}
img{vertical-align:middle}
ul,ol,li{list-style:none}
a{color:#2f2f2f;text-decoration:none}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
/* Mobile */
.wrap{display:flex;flex-direction:column;position:relative;margin:0 auto;min-width:320px;min-height:100vh;overflow-x:hidden}
.wrap.fixed{position:fixed;width:100%;overflow:hidden}
.wrap.fullscreen .header{border-bottom:1px solid #838383}
.header{display:flex;justify-content:space-between;align-items:center;margin:0 auto;padding:0 10px;width:calc(100% - 20px);max-width:1920px;height:50px}
.header h1{font-family:'Berkshire Swash';font-size:110%;white-space:nowrap}
.header h1 img{margin:0 3px 0 0;width:42px}
address{padding:20px;background:#f2f2f2;font-style:normal;font-size:80%;text-align:center}
.content{flex-grow:1;align-content:center;box-sizing:border-box;margin:0 auto;padding:20px;width:100%}
.visual{display:flex;align-items:center;height:130px;background:#000 url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/bg_visual.jpg) no-repeat center;background-size:auto 170px}
.visual div{flex-grow:1;box-sizing:border-box;margin:0 auto;max-width:1200px;padding:0 0 0 35px;font-family:'Berkshire Swash';font-weight:100;font-size:220%;color:#fff}
.visual strong{display:block;font-weight:700}
.button{display:flex;justify-content:center;gap:10px;margin:20px 0 0 0}
.button>*{display:flex;justify-content:center;align-items:center;flex-grow:1;height:40px;border-radius:5px;background:#9a9a9a;color:#fff;transition:all .2s}
.button:not(.receive .button)>*:hover{filter:brightness(90%)}
.button .confirm{background:#e25a00}
/* gnb */
.menu{position:relative;margin:0 -5px 0 0;padding:6px 5px 4px 5px;width:30px;height:28px;background:none}
.menu span{display:block;width:20px;height:2px;border-top:2px solid #2f2f2f;font:0/0 arial;text-indent:-9999px}
.menu:before,.menu:after{content:'';position:absolute;left:5px;width:20px;height:2px;border-top:2px solid #2f2f2f;overflow:hidden}
.menu:before{top:7px}
.menu:after{bottom:5px}
.gnb{position:absolute;top:0;right:-100%;box-sizing:border-box;padding:50px 20px;width:0;height:100vh;background:#fff;font-size:110%;transition:right .3s ease;z-index:100}
.gnb.open{right:0;width:100%}
.gnb .menu{position:absolute;top:11px;right:10px;padding:5px}
.gnb .menu span{border:none;background:#2f2f2f;transform:rotate(-45deg)}
.gnb .menu:before{top:13px;border:none;background:#2f2f2f;transform:rotate(45deg)}
.gnb .menu:after{display:none}
.gnb .lounge a{display:block;padding:10px;border-radius:5px;background:#9b77db;color:#fff;text-align:center}
.gnb .login a,.gnb .logout a{margin:15px 0;display:block;padding:10px;border-radius:10px;background:#ff7e28;color:#fff;text-align:center;transition:all .3s}
.gnb .login a:hover,.gnb .logout a:hover,.gnb .user a:hover{filter:grayscale(20%)}
.gnb .logout{margin:20px 0 0 0;padding:5px 0 0 0;border-top:1px solid #dbdbdb}
.gnb .user{display:none}
.gnb .server{margin:0 0 20px 0;border-top:1px solid #dbdbdb}
.gnb .server li{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid #dbdbdb;color:515151}
.gnb .server strong{font-weight:500;color:#000}
.gnb .history a,.gnb .character a{display:block;margin:10px 0;padding:10px 12px;border-radius:5px;background:#9a9a9a url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/bu_history.png) no-repeat 20px center;background-size:20px auto;color:#fff;text-align:right}
.gnb .character a{background-image:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/bu_character.png)}
/* login */
.account{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;z-index:20}
.account h2{font-size:180%}
.account button{width:100%;max-width:460px;height:60px;border:1px solid #868686;border-radius:5px;background:#fff;box-shadow:0 0 9px 3px rgba(224,224,224,.9);font-size:120%}
.account button:before{content:'';display:inline-block;margin:0 20px 0 0;width:25px;height:30px;background-repeat:no-repeat;background-position:center;background-size:25px auto;vertical-align:middle}
.account .google:before{background-image:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/logo_google.png)}
.account .apple:before{background-image:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/logo_apple.png)}
.agreement{padding:60px 0;width:calc(100% - 40px);min-width:320px;max-width:800px !important}
.agreement h2{margin:0 0 50px 0;font-size:180%;text-align:center}
.agreement input{margin:-2px 6px 0 0;vertical-align:middle}
.agreement label{cursor:pointer}
.agreement .total{display:block;padding:15px 0;font-size:120%}
.agreement .total input{width:14px;height:14px}
.agreement ul{margin:0 0 40px 0;border-top:1px solid #515151}
.agreement li{position:relative}
.agreement li label{display:block;padding:18px 15px;border-bottom:1px solid #dbdbdb}
.agreement li label:hover{background:#f2f2f2}
.agreement li input{width:12px;height:12px}
.agreement li a{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;width:37px;height:100%}
.agreement li a img{width:8px}
.agreement button{display:block;margin:0 15px;width:calc(100% - 30px);max-width:570px;height:50px;border-radius:5px;background:#9a9a9a;font-size:120%;color:#fff}
.agreement button:hover{background:#e25a00}
/* content */
.tabs{position:relative;margin:0 0 20px 0;font-weight:700;font-size:110%;z-index:10}
.tabs .selected{padding:15px 30px;border:1px solid #000;background:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/bu_select.png) no-repeat calc(100% - 14px) center;background-size:20px 14px;cursor:pointer}
.tabs ul{position:absolute;box-sizing:border-box;width:100%;border:solid #000;border-width:0 1px 1px 1px;background:#fff;display:none}
.tabs a{display:block;padding:15px 30px}
.tabs.open ul{display:block}
.pagination{display:flex;justify-content:center;margin:60px 0}
.pagination>*{display:flex;justify-content:center;align-items:center;margin:0 -1px 0 0;min-width:40px;height:41px;border:1px solid #bcbcbc;background:#fff}
.pagination>strong:not(.direction){background:#4d4940;color:#fff}
.pagination>.direction:last-child{transform:rotate(180deg)}
.pagination img{height:13px}
.top{position:absolute;bottom:30px;right:9px;width:53px}
.top img{width:100%}
.listItem{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px}
.listItem>li>a,.listItem>li>div{display:block;box-sizing:border-box;padding:23px 23px 18px 23px;width:100%;height:100%;border:1px solid #e4e4e4;border-radius:10px}
.listItem .item{position:relative;display:flex;align-items:center;padding:15px;aspect-ratio:1/1;background:#e9e9e9}
.listItem .item img{width:100%}
.listItem .name{margin:20px 0;font-size:120%;color:#474747;word-break:keep-all}
.listItem .count{display:flex;justify-content:space-between;align-items:center;padding:20px 5px;border:solid #dbdbdb;border-width:1px 0;color:#787878}
.listItem .count strong{font-weight:500;color:#d5812f}
.listItem .money{margin:20px 0 0 0;padding:10px 0;font-weight:700;font-size:120%;text-align:center;white-space:nowrap}
.listItem .money:before{content:'';display:inline-block;margin:-1px 12px 0 0;width:21px;height:15px;background:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/bu_money.png) no-repeat center;background-size:cover;vertical-align:middle}
.listItem .price{position:absolute;margin:-20px 0 0 5px;font-weight:normal;font-size:1.4rem;color:#999;text-decoration:line-through}
.listItem>li>div .item:before{content:'    ';display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(50,50,50,.9);font-size:300%;color:#fff}
.btnBack{display:block;margin:0 0 20px 0;padding:14px 16px;border:1px solid #000;font-weight:700;font-size:110%}
.viewItem h2,.viewItem h3{font-size:130%}
.viewItem h2{padding:0 0 10px 0;border-bottom:1px solid #dbdbdb}
.viewItem h3{margin:45px 0 5px 0;padding:0 0 8px 0;border-bottom:1px solid #dbdbdb}
.viewItem p{line-height:180%;color:#787878;word-break:keep-all}
.viewItem .thumb{position:relative;aspect-ratio:1/1;margin:0 0 20px 0;padding:23px;border:1px solid #dcdcdc;border-radius:10px}
.viewItem .thumb>div{display:flex;align-items:center;box-sizing:border-box;padding:20px;height:100%;background:#e9e9e9}
.viewItem .thumb img{width:100%}
.viewItem .list li{display:flex;justify-content:space-between;align-items:center;padding:5px 7px 5px 2px;border-bottom:1px solid #dbdbdb;color:#787878}
.viewItem .list img{margin:0 5px 0 0;width:32px}
.viewItem .count{margin:0 0 15px 0;font-size:110%}
.viewItem .count li{display:flex;justify-content:space-between;align-items:center;margin:12px 0;padding:0 7px 0 2px}
.viewItem .count em{font-style:normal;color:#d5812f}
.viewItem .price{margin-right:10px;font-weight:normal;color:#999;text-decoration:line-through}
.viewItem button{margin:0 0 24px 0;width:100%;height:40px;border-radius:5px;background:#e25a00;font-weight:bold;font-size:120%;color:#fff}
.probability{text-align:right}
.probability a{color:#787878}
.probability a:after{content:'';display:inline-block;margin:-2px 0 0 3px;width:8px;height:16px;background:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/icon_arrow2.png) no-repeat center;background-size:contain;vertical-align:middle}
.probability span{display:inline-block;margin:-4px 3px 0 0;width:13px;height:13px;border:1px solid #dceac3;border-radius:50%;font-size:80%;text-align:center;vertical-align:middle}
section.history{flex-grow:1;align-content:center;padding:20px;min-width:300px;background:#ededed}
.history h2{margin:30px 0;font-size:140%;text-align:center}
.history .calendar{margin:0 0 20px 0;font-weight:bold;font-size:120%;color:#787878;text-align:center}
.history .calendar input{margin:0 5px;padding:0 10px;width:110px;height:30px;border:none;background:#fff url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/icon_calendar.png) no-repeat calc(100% - 10px) center;background-size:14px auto;vertical-align:middle}
.history .calendar input{-webkit-appearance:none;appearance:none}
.history .calendar input::-webkit-date-and-time-value{text-align:left}
.history .calendar input::-webkit-calendar-picker-indicator{background:none;appearance:none;cursor:pointer}
.history .calendar button{display:block;margin:15px 0 0 0;width:100%;height:40px;border-radius:5px;background:#e25a00;color:#fff}
.history .info{margin:0 auto;padding:10px 0;max-width:1200px;border-top:1px solid #b6b6b6;font-size:90%;line-height:160%}
.history .list{margin:0 auto;max-width:1200px;border-top:1px solid #b6b6b6;background:#fff}
.history .list img{width:32px}
.history .list li{display:flex;align-items:center;gap:14px;padding:10px 8px;border-bottom:1px solid #b6b6b6}
.history .list li span{display:block;margin:4px 0 0 0;font-size:90%;color:#787878}
.history .list li div{flex-grow:1}
.history .list .money{white-space:nowrap}
.history .list .none{justify-content:center;padding:25px;font-weight:700;font-size:120%;text-align:center}
.payment{margin:0 auto;max-width:800px}
.payment h2{margin:30px 0 20px 0;font-size:140%;text-align:center}
.payment h3{position:relative;margin:30px 0 0 0;padding:0 0 6px 0;border-bottom:1px solid #dbdbdb;font-size:120%}
.payment h3 a{position:absolute;right:2px;padding:0 11px 0 0;background:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/icon_arrow2.png) no-repeat right center;background-size:7px auto;font-size:70%;color:#787878}
.payment .info li{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid #dbdbdb}
.payment .info em{font-style:normal;color:#000}
.payment .info strong{color:#e25a00}
.payment .email{margin:10px 0 0 0;text-align:center}
.payment .email input{box-sizing:border-box;padding:0 10px;width:100%;max-width:570px;height:40px;border:1px solid #868686;font-size:90%}
.payment .method{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.payment .method li{width:calc(25% - 7.5px)}
.payment .method span{display:block;padding:14px 0;background:#777;font-size:90%;color:#fff;text-align:center;cursor:pointer}
.payment .method input{display:none}
.payment .method input:checked+span{background:#dc7700}
.payment .agree{margin:10px 0}
.payment .agree li{margin:7px 0;font-size:105%;color:#787878}
.payment .agree label{cursor:pointer}
.payment .agree input{margin:-2px 0 0 0;width:12px;height:12px;vertical-align:middle}
.payment .agree a{color:#787878;text-decoration:underline;text-underline-offset:2px}
.payment .money{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #dbdbdb;color:#787878}
.payment .money strong{color:#2f2f2f}
.payment .total{display:flex;justify-content:space-between;margin:15px 10px 0 0;font-size:110%}
.payment .total strong{color:#e25a00}
.payment .attention{margin:6px 0 0 0;font-size:90%;line-height:160%;color:#787878;word-break:keep-all}
.payment .attention li{margin:5px 0 5px 9px;text-indent:-9px}
.payment button{display:block;margin:30px auto 40px auto;width:100%;max-width:570px;height:50px;border-radius:5px;background:#e25a00;font-size:130%;color:#fff}
.table{border-collapse:collapse;width:100%;border-top:1px solid #dbdbdb}
.table th,.table td{padding:5px;border-bottom:1px solid #dbdbdb;text-align:center}
.table th{font-weight:500;background:#e8e8e8}
.complete{display:flex;flex-direction:column;margin-bottom:20px}
.complete h2{margin:30px 0 10px 0;font-size:110%}
.complete .comment{font-weight:bold;font-size:140%;text-align:center}
.complete .comment:before{content:'';display:block;margin:30px auto;width:78px;height:78px;background:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/img_complete.png) no-repeat;background-size:cover}
.complete .comment.fail:before{background-image:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/img_fail.png)}
.complete .comment+p{margin:25px 0;font-size:110%;text-align:center}
.complete .comment+p span{display:block}
.complete .error{flex-grow:1;align-content:center;margin:40px 0;font-weight:bold;line-height:140%;text-align:center;color:#e25a00}
.complete .item{border-top:1px solid #dbdbdb}
.complete .item li{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #dbdbdb}
.complete .item em{font-style:normal;color:#000}
.complete .item strong{color:#e25a00}
.complete .item .total{padding:18px 10px;font-weight:bold;font-size:110%}
.complete .info{margin:30px 0 0 0;font-size:90%;line-height:140%;color:#787878;word-break:keep-all}
.complete .info li{margin:5px 0 5px 9px;text-indent:-9px}
.complete .button>*{max-width:390px}
.receive h2{margin:25px 0;font-size:140%;text-align:center}
.receive>div{box-sizing:border-box;margin:0 30px 40px 30px;padding:25px;max-width:800px;border:2px solid #484848;border-radius:10px;background:#fff}
.receive p{margin:0 0 14px 0;line-height:2rem;text-align:center}
.receive p span{display:block}
.receive ul{border-top:1px solid #e5e5e5}
.receive li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #e5e5e5}
.receive select{padding:0 0 0 3px;width:65%;height:30px;border:1px solid #868686;font-weight:600;color:#000}
.receive .none{align-content:center;min-height:160px;line-height:160%}
.receive .button>*{justify-content:center;max-width:220px}
.receive .button .confirm{background:#505050}
.receive .button .confirm:hover{background:#ff7e28}
.receive .none+.button .confirm{background:#e25a00}
/* modal */
.modal{position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background:rgba(0,0,0,.6);z-index:200}
.modal>div{position:relative;box-sizing:border-box;margin:0 20px;padding:20px 0;min-width:320px;max-width:650px;border:2px solid #484848;border-radius:10px;background:#fff}
.modal h3{margin:0 0 20px 0;font-size:140%;text-align:center}
.modal h4{margin:30px 0 10px 0;font-weight:600;font-size:120%}
.modal h4:first-child{margin-top:0}
.modal h5{margin:5px 0 10px 0;min-height:33px;font-weight:700;font-size:100%;word-break:keep-all}
.modal .scroll{box-sizing:border-box;margin:0 5px 20px 0;padding:5px 15px 5px 20px;height:50.8vh;overflow-y:auto}
.modal .character{border-top:1px solid #dbdbdb}
.modal .character li{padding:6px 10px;border-bottom:1px solid #dbdbdb}
.modal .character span{display:inline-block;min-width:60px;color:#515151}
.modal .character strong{font-weight:500;color:#000}
.modal .item:after{content:'';display:block;clear:both}
.modal .thumb{display:flex;align-items:center;float:left;box-sizing:border-box;margin:0 15px 0 0;padding:5px;width:70px;height:70px;background:#e9e9e9}
.modal .thumb img{width:100%}
.modal .money{display:flex;justify-content:space-between;margin:0 0 0 80px;padding:5px;border:solid #dbdbdb;border-width:1px 0;color:#787878}
.modal .money strong{color:#e25a00}
.modal .info{padding:10px 0 0 0;border-top:1px solid #dbdbdb;font-size:90%;line-height:160%;color:#787878;word-break:keep-all}
.modal .button{margin:20px 20px 0 20px}
.modal .close{position:absolute;top:5px;right:5px;padding:5px;background:none}
.modal .close img{width:15px}
.modal.limit h4{margin:20px 0 5px 0}
.modal.limit h4:first-child{margin-top:0}
.modal.limit .scroll{margin-bottom:0;height:60vh;font-size:80%}
.modal .terms{margin-bottom:0;font-size:90%;line-height:170%;word-break:keep-all}
.modal .terms h4{margin:20px 0 5px 0;font-size:110%}
.modal .terms h4:first-child{margin-top:0}
.modal .terms h5{margin:20px 0 5px 0;padding:0;min-height:inherit;font-size:100%}
.modal .terms p{margin:0 0 20px 0}
.modal .terms p:last-child{margin-bottom:0}
.modal .terms li{margin:0 0 5px 0}
.modal .terms li ol{margin-top:10px}
.modal .terms li li{margin-left:5px;font-size:90%;line-height:150%}
/* Mobile - Landscape */
@media all and (min-width:576px) {
.visual{height:260px;background-size:cover}
.listItem{justify-content: flex-start}
.listItem>li{width:calc(50% - 10px)}
}
/* Tablet */
@media all and (min-width:768px) {
body,input,button,select,textarea{font-size:1.6rem}
.visual{height:360px}
.visual div{padding-left:70px;font-size:4.8rem}
.button>*{height:50px;border-radius:10px;font-size:120%}
.account h2{margin-bottom:30px}
.account button{height:80px;border-radius:10px}
.account button:before{margin-right:25px;width:30px;height:35px;background-size:30px auto}
.agreement{width:calc(100% - 60px)}
.agreement input{margin:-2px 10px 0 0}
.agreement .total{padding:30px 0}
.agreement .total input{width:20px;height:20px}
.agreement ul{margin:0 0 90px 0}
.agreement li label{padding:32px 30px;cursor:pointer}
.agreement li input{width:16px;height:16px}
.agreement li a{width:74px}
.agreement li a img{width:16px}
.agreement button{margin:0 auto;height:80px;border-radius:10px;font-weight:700}
.listItem>li{width:calc(33.333% - 14px)}
.listItem .item{padding:10px}
.listItem .name{min-height:50px;margin-bottom:15px}
.listItem .count{padding:10px}
.viewItem h2{margin-top:5px}
.viewItem h3{margin-bottom:10px;padding-bottom:14px}
.viewItem .item{display:flex;align-items:flex-start;gap:20px}
.viewItem .things{width:60%;max-width:600px}
.viewItem .list img{margin:0 15px 0 0;width:48px}
.viewItem .count{margin:20px 0}
.viewItem .count li{padding:0 10px 0 2px}
.viewItem button{margin-bottom:30px;height:50px}
.probability{color:#666}
.probability span{width:22px;height:22px;line-height:170%}
.history h2{margin-bottom:60px}
.history .calendar{margin:0 0 45px 0}
.history .calendar input{padding-right:20px;width:145px;height:48px;background-position:calc(100% - 20px) center;background-size:auto;text-align:center}
.history .calendar button{display:inline-block;margin:0 0 0 12px;width:128px;height:48px;border-radius:10px;vertical-align:middle}
.history .info{padding:15px 0}
.history .list img{width:64px}
.history .list li{padding:10px 30px}
.history .list li span{margin-top:10px}
.history .list .none{padding:40px}
.payment{margin-bottom:60px}
.payment h3{margin:60px 0 0 0;padding:0 0 18px 0}
.payment h3 a{top:5px;right:0;padding:0 14px 0 0;background-size:8px auto}
.payment .info li{padding:5px 20px;min-height:36px}
.payment .info strong{font-size:120%}
.payment .email{margin:20px 0 0 0}
.payment .email input{padding:0 20px;height:60px}
.payment .method{gap:14px;margin:20px 110px}
.payment .method li{width:calc(25% - 14px)}
.payment .method span{padding:20px 0}
.payment .agree{margin:20px 0}
.payment .agree li{margin:10px 20px}
.payment .agree input{margin:-3px 3px 0 0;width:16px;height:16px}
.payment .money{padding:15px 20px;font-size:120%}
.payment .total{display:flex;justify-content:center;gap:90px;margin:0;padding:30px 0;border-bottom:1px solid #dbdbdb;font-weight:bold;font-size:170%}
.payment .attention{margin:15px 0 0 0}
.payment .attention li{margin:10px 0 10px 12px;text-indent:-12px}
.payment button{height:60px}
.complete{margin-bottom:50px}
.complete h2{margin-bottom:20px}
.complete .comment:before{margin-top:50px;width:156px;height:156px}
.complete .comment+p span{display:inline}
.complete .item li{padding:12px 20px}
.complete .item .total{display:flex;justify-content:center;gap:90px;margin:0;padding:30px 0;border-bottom:1px solid #dbdbdb;font-weight:bold;font-size:170%}
.complete .info{margin-bottom:50px}
.receive>div{margin:40px auto;padding:30px;border-radius:20px}
.receive h2{margin:40px 0}
.receive p span{display:inline}
.receive ul{margin:30px 0}
.receive li{justify-content:center;padding:20px 0}
.receive li span{display:block;width:80px}
.receive select{padding:0 15px;width:65%;max-width:250px;height:40px}
.modal>div{margin:0 40px;padding:40px 0;border-radius:20px}
.modal h3{margin-bottom:25px}
.modal h4{margin:50px 0 20px 0}
.modal h5{margin:0 0 10px 0;padding:5px 0 0 0;min-height:78px;font-size:140%}
.modal .scroll{padding:10px 35px 10px 40px}
.modal .character li{padding:12px 20px}
.modal .character span{min-width:75px}
.modal .thumb{margin-right:30px;padding:16px;width:140px;height:140px;background:#e9e9e9}
.modal .money{padding:12px 10px}
.modal .button{margin:40px 40px 0 40px}
.modal .close{position:absolute;top:15px;right:15px;padding:5px;background:none}
.modal .close img{width:30px}
.modal.limit>div{width:650px}
.modal.limit h4{margin:30px 0 10px 0}
.modal .terms h4,.modal .terms h5{margin-top:40px}
.modal .terms p{margin-bottom:30px}
.modal .terms li{margin-bottom:10px}
}
/* Desktop */
@media all and (min-width:1024px) {
body,input,button,select,textarea{font-size:1.8rem}
.wrap.fixed{position:relative;overflow:auto}
.wrap.fullscreen .header{border-color:#dbdbdb}
.header{height:70px}
.header h1 img{margin:0 6px 0 0;width:84px}
address{padding:40px}
.visual{height:400px;background-size:auto 400px}
.visual div{padding-left:105px;font-size:7.0rem}
.button>*{height:60px}
.menu{display:none}
.gnb{position:relative;top:inherit;left:inherit;right:0;display:flex;align-items:center;flex-direction:row-reverse;padding:0;width:inherit;height:inherit;background:none;font-size:1.4rem}
.gnb .login a,.gnb .logout a,.gnb .user a{display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin:0 20px 0 0;padding:0 20px;min-width:100px;height:30px;border-radius:15px;background:#ff7e28;color:#fff}
.gnb .lounge a{display:block;padding:0;background:none;color:#434343}
.gnb .logout{margin:20px 0 0 0;padding:5px 0 0 0;border-top:1px solid #dbdbdb}
.gnb .history a,.gnb .character a{background-size:auto 20px}
.gnb .user{display:block}
.gnb .info{position:absolute;top:50px;box-sizing:border-box;padding:22px 18px;width:260px;border:2px solid #484848;border-radius:20px;background:#fff;display:none}
.gnb .info .lounge{display:none}
.gnb .info .logout a{margin:15px 15px 0 15px;height:40px;border-radius:20px}
.gnb .info.open{display:block}
.account button{border-color:#dadada;box-shadow:none;transition:all .3s}
.account button:hover{border-color:#868686;box-shadow:0 0 9px 3px rgba(224,224,224,.9)}
.tabs .selected{display:none}
.tabs ul{position:relative;display:flex !important;align-items:center;margin:50px 0 0 0;border:none}
.tabs li{margin-right:10px;font-weight:500;font-size:110%}
.tabs li:before{content:'';display:inline-block;margin:0 10px 0 0;width:1px;height:14px;background:#dbdbdb}
.tabs li:first-child:before{display:none}
.tabs a{display:inline-block;padding:0;color:#787878}
.tabs .on a{font-weight:bold;color:#2f2f2f}
.pagination{margin:80px 0}
.pagination>*{min-width:52px;height:52px}
.pagination img{height:17px}
.top{width:60px}
.listItem>li{width:calc(25% - 15px)}
.listItem .name{min-height:55px}
.listItem>li>a,.listItem>li>div{padding:19px 19px 14px 19px;transition:all .3s}
.listItem>li:not(.soldout) a:hover{border-color:#868686;box-shadow:0 0 9px 3px rgba(224,224,224,.9)}
.listItem>li:not(.soldout) a:hover .money{padding:10px 10px 10px 20px;background:#e25a00;color:#fff;text-align:left}
.listItem>li:not(.soldout) a:hover .money:before{filter:invert(1)}
.listItem>li:not(.soldout) a:hover .price{display:none}
.listItem .price{font-size:1.6rem}
.listItem .money{position:relative;border-radius:3px;transition:background .3s}
.listItem .money:after{content:'';position:absolute;top:calc(50% - 8px);right:10px;width:17px;height:16px;background:url(https://mgameimage.gscdn.com/mgamezzang/ghostm/shop/icon_arrow.png) no-repeat}
.btnBack{display:inline-block;margin:70px 0 20px 0;padding:0;border:none;color:#757575}
.btnBack:hover{color:#2f2f2f}
.viewItem h2{margin-top:15px;padding-bottom:20px}
.viewItem .item{gap:40px}
.viewItem .thumb{flex-grow:1;padding:32px}
.viewItem .thumb>div{padding:60px}
.viewItem .things{width:55%}
.viewItem .list li{padding:11px 10px 11px 2px}
.viewItem .list img{width:64px}
.viewItem .count{margin:20px 0 30px 0}
.viewItem .count li{padding:5px 10px 5px 2px}
.viewItem button{height:60px;border-radius:10px;transition:background .3s}
.viewItem button:hover{background:#c95000}
.probability a:hover{filter:brightness(40%)}
.complete{margin-bottom:100px;width:800px}
.complete h2{margin-top:80px}
.complete .comment:before{margin-top:100px}
.receive>div{margin-bottom:60px}
.receive h2{margin-top:60px}
.modal .scroll{padding:10px 20px 10px 40px}
.modal .terms p{margin-bottom:40px}
}
/* Desktop - wide */
@media all and (min-width:1200px) {
.content{max-width:1200px}
}