/* 
------------------------------------------------------------
MGAME Web Design Team
first written : Yang Young bok 230526
updated : YYB 230913
------------------------------------------------------------
*/
/* main */
.content{padding:99px 0 0 0}
.section,.quickmenu{display:flex;justify-content:space-between;box-sizing:border-box;margin:0 auto;width:1600px}
.section{overflow:hidden}
.section h2,.screenshot h2{font-weight:500;font-size:26px;color:#2f2f2f}
.section h2 img,.screenshot h2 img{margin:-5px 0 0 10px;vertical-align:middle}
.visual{position:relative;height:649px;background:#e9e9e9}
.visual li{position:relative;height:637px;background-position:center 0;background-repeat:no-repeat}
.visual .text{margin:0 auto;width:1600px}
.visual .text a{display:block;box-sizing:border-box;height:510px;color:#fff;text-indent:-9999px}
.visual .swiper-pagination{box-sizing:border-box;bottom:155px;left:50%;margin-left:-800px;padding:0 0 0 6px;width:1600px;text-align:left;overflow:hidden}
.visual .swiper-pagination-bullet{width:20px;height:20px;background:#4c3e4b;opacity:1}
.visual .swiper-pagination-bullet-active{background:#fff}
.visual .more{position:absolute;bottom:0;left:0;left:50%;margin:0 0 0 -800px;width:1600px;z-index:100}
.visual .more a{position:absolute;bottom:149px;right:0;padding:0 23px 0 0;min-width:100px;height:20px;background:url(../../mgamezzang/games/yulgang_v4/main/bu_event.png) no-repeat right 0;font-size:12px;color:#141414;text-align:right;letter-spacing:-1px}
.notice{position:relative;display:flex;margin:-139px auto 85px auto;width:1600px;height:262px;background:#23262a;color:#a6a6a6;z-index:100}
.notice a{color:#a6a6a6}
.notice a:hover,.news a:hover .detail,.login .button a:hover{color:#eee772}
.news{position:relative;box-sizing:border-box;padding:33px 0 0 31px;width:654px;font-size:13px}
.news h2{margin:-10px 0 20px 0;font-weight:400;font-size:26px;color:#fff}
.news li{margin:0 0 21px 0}
.news .icon{display:inline-block;margin:0 13px 0 0;width:93px;height:23px;border-radius:12px;background:#999;line-height:22px;color:#fff;text-align:center;vertical-align:middle}
.news .icon.i{background:#e13013}
.news .icon.e{background:#1387e1}
.news .icon.n{background:#d7bc08}
.news .icon.u{background:#dc7f07}
.news .detail{display:inline-block;margin:0 30px 0 0;width:370px;font-size:15px;color:#cfcfcf;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;vertical-align:middle}
.news .date{display:inline-block;color:#a5a5a5;vertical-align:middle}
.news .more{position:absolute;top:32px;right:42px;filter:brightness(140%)}
.start{margin:-143px 9px 0 0;width:292px;height:440px;overflow:hidden}
.start a:hover img{margin-top:-440px}
.event{position:relative;box-sizing:border-box;padding:30px 30px 0 0;width:355px}
.event ul{display:flex}
.event li{position:relative;margin:0 0 0 1px;height:247px;overflow:hidden}
.event li:first-child{margin:0}
.event li span{position:absolute;top:4px;left:8px;font-size:13px;color:#fbf4e2}
.event li a:hover img{margin:-250px 0 0 0}
.guide,.schedule,.costume{position:relative;height:318px;border-bottom:2px solid #373737}
.guide h2,.schedule h2,.costume h2{padding:0 0 15px 0;border-bottom:2px solid #c4c4c4}
.guide{width:740px;background:url(../../mgamezzang/games/yulgang_v4/main/bg_guide.png) no-repeat calc(100% - 18px) bottom}
.guide label{display:block;padding:22px 0 0 32px;font-size:16px;color:#c7760c}
.guide label strong{display:block;font-size:20px;color:#1d1d1d}
.guide input{margin:0 0 0 7px;padding:0 40px 0 24px;width:334px;height:39px;border:2px solid #b4751c;border-radius:3px;background:#fff;font-size:16px;vertical-align:middle}
.guide input::placeholder{color:#bdbdbd}
.guide button{margin:-1px 0 0 -39px;background:none;vertical-align:middle}
.guide ul{display:flex;flex-wrap:wrap;margin:18px 260px 0 30px;height:140px; overflow:hidden}
.guide li{margin:0 10px 9px 0}
.guide li a{display:block;padding:8px 22px;border:1px solid #e1e4e5;border-radius:25px;font-weight:500}
.guide li a:hover{background:#feb300}
.schedule{margin:0 0 90px 0;width:500px;background:url(../../mgamezzang/games/yulgang_v4/main/bg_schedule.png) no-repeat calc(100% - 5px) bottom}
.schedule .more,.costume .more,.tip .more,.mov .more{position:absolute;top:10px;right:0}
.schedule .tabs{position:absolute;top:11px;left:145px;display:flex;font-size:16px}
.schedule .tabs a{margin:0 10px;color:#7f7f7f}
.schedule .tabs .on a{color:#373737}
.schedule .tabs li:before,.schedule .tabs li:last-child:after{content:'';display:inline-block;margin:-3px 0 0 0;width:1px;height:16px;background:#ccc;vertical-align:middle}
.schedule .list{margin:21px 0 0 30px;width:334px}
.schedule .list li{margin:0 0 1px 0;padding:0 0 0 20px;height:31px;border:4px solid transparent;font-size:16px;line-height:30px;color:#7f7f7f}
.schedule .list li.on{border-color:#3d8ae1;font-size:20px;color:#3f3f3f}
.schedule .list li span{margin:0 13px 0 0}
.schedule .list li.on span{margin-right:2px}
.costume{width:280px}
.costume ul{padding:44px 0 0 0}
.costume li{font-size:16px;text-align:center}
.costume li img{display:block;margin:0 auto 11px auto}
.costume .swiper-button-prev,.costume .swiper-button-next{width:40px;height:40px}
.costume .swiper-button-next{transform:rotate(-180deg)}
.costume .swiper-button-prev:after,.costume .swiper-button-next:after{content:'';width:40px;height:40px;background:url(../../mgamezzang/games/yulgang_v4/main/btn_costume.png) no-repeat}
.costume .swiper-button-prev:hover:after,.costume .swiper-button-next:hover:after{background-position:0 -40px}


.costume li a{display:block;margin:0 auto;width:180px;overflow:hidden} 
.costume li img{display:block;margin:0 auto 11px auto;max-width:180px;height:158px;object-fit:cover } 


.quickmenu{margin-bottom:62px;height:257px;border:1px solid #d4d4d4;border-radius:20px}
.quickmenu .list{display:flex;flex-wrap:wrap;align-content:flex-start;box-sizing:border-box;padding:55px 0 0 60px;width:694px}
.quickmenu .list li{margin:0 10px 10px 0;width:279px;height:66px;border:1px solid #dceac3;box-shadow:2px 4px 3px #f3f6ec;font-size:16px}
.quickmenu .list a{display:flex;justify-content:center;align-items:center;height:100%}
.quickmenu .list a:before{display:inline-block;content:'';margin:2px 4px 0 0;width:30px;height:30px;background:url(../../mgamezzang/games/yulgang_v4/main/bu_quickmenu.png) no-repeat;vertical-align:middle}
.quickmenu .faq a:before{background-position:0 0}
.quickmenu .testzone a:before{background-position:0 -30px}
.quickmenu .utop a:before{background-position:0 -60px}
.quickmenu .safe a:before{background-position:0 -90px}
.quickmenu .list a:hover,.mov li a:hover,.tip li a:hover,.screenshot li a:hover{background:#eee}
.roar{position:relative;box-sizing:border-box;padding:20px 0 18px 375px;width:904px}
.roar:before{display:inline-block;content:'';position:absolute;top:-1px;left:0;width:345px;height:273px; background:url(../../mgamezzang/games/yulgang_v4/main/bg_roar3.png) no-repeat}
.roar ul{width:514px;height:217px;overflow-y:scroll}
.roar ul::-webkit-scrollbar{width:4px}
.roar ul::-webkit-scrollbar-thumb{height:30%;background:#4cb51d}
.roar ul::-webkit-scrollbar-track{background:rgba(236, 236, 236, 1)}
.roar li{box-sizing:border-box;margin:16px 0 0 0;padding:0 0 16px 53px;width:491px;border-bottom:1px solid #e8eaea;background:url(../../mgamezzang/games/yulgang_v4/main/bu_roar.png) no-repeat 0 2px;font-size:12px;color:#7d7d7d}
.roar li:first-child{margin-top:4px}
.roar li p{font-size:14px;color:#272727}
.mov h2,.tip h2{margin:0 0 16px 0}
.mov{position:relative;margin-bottom:63px;width:793px}
.mov ul,.tip ul{display:flex;justify-content:space-between}
.mov li,.tip li{box-sizing:border-box;width:388px;height:297px;border:1px solid #d4d4d4;text-align:center}
.mov li a,.tip li a{display:block;height:100%}
.mov li{width:390px;font-size:18px}
.mov li img{display:block}
.mov li span{display:block;margin:0 auto;padding:22px 0 26px 0;width:90%;color:#5e5e5e;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden}
.tip{position:relative;width:787px}
.tip li{position:relative;border-top-color:#3f3f37;text-align:left}
.tip h3{box-sizing:border-box;margin:0 -1px;padding:18px 28px;height:65px;background:#3f3f37;font-weight:500;font-size:19px;color:#fff;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden}
.tip .contents_t{padding:26px 32px 0 32px;line-height:26px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:5}
.tip .user{position:absolute;bottom:19px;left:30px;width:100%;font-weight:500;color:#2f2f2f}
.tip .date{position:absolute;right:56px;font-weight:400;color:#a5a5a5}
.screenshot{position:relative;margin:0 auto 70px auto;width:1600px}
.screenshot .more{position:absolute;top:8px;left:180px}
.screenshot ul{display:flex;margin:16px 0 0 0}
.screenshot li{position:relative;width:20%}
.screenshot li a{display:block;box-sizing:border-box;padding:20px 20px 25px 20px;height:100%;border:solid #d4d4d4;border-width:1px 1px 1px 0}
.screenshot li:first-child a{border-width:1px}
.screenshot li div{margin:14px 0 15px 0;font-size:18px;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden}
.screenshot li span{font-size:13px;color:#2f2f2f}
.screenshot .date{position:absolute;bottom:24px;right:20px;color:#a5a5a5}
.job{position:relative;margin:0 0 -94px 0;height:1034px;background:url(../../mgamezzang/games/yulgang_v4/main/bg_job.jpg) no-repeat center 0}
.job.opened{margin-bottom:-358px}
.job h2{position:absolute;padding:33px 0 0 0;width:1600px;font-weight:500;font-size:26px;text-align:center;color:#fff}
.job .detail{position:relative;margin:0 auto;width:1600px}
.job .detail:before{content:'';display:block;position:absolute;top:736px;left:0;width:1600px;height:200px;background:#252525}
.job .tabs{position:absolute;display:flex;top:736px;box-sizing:border-box;margin:24px 87px;width:1426px;height:152px;z-index:10}
.job .tabs li{width:152px;height:152px;cursor:pointer;overflow:hidden}
.job .tabs li.swiper-slide-thumb-active img{margin-top:-152px}
.job .tabs li.swiper-slide-thumb-active span{font-weight:500;color:#252525}
.job .tabs li span{position:absolute; top:15px; left:19px; font-weight:400; font-size:16px; color:#fff}
.job .swiper-button-next,.job .swiper-button-prev{top:832px}
.job .swiper-button-next{right:25px;transform:rotate(-180deg)}
.job .swiper-button-prev{left:25px}
.job .swiper-button-next:after,.job .swiper-button-prev:after{content:'';width:37px;height:85px;background:url(../../mgamezzang/games/yulgang_v4/main/btn_job.png) no-repeat}
.job .swiper-button-next:hover:after,.job .swiper-button-prev:hover:after{background-position:0 -85px}
.job .view{height:936px;color:#fff}
.job .job1{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job1.png) no-repeat}
.job .job2{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job2.png) no-repeat}
.job .job3{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job3.png) no-repeat}
.job .job4{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job4.png) no-repeat}
.job .job5{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job5.png) no-repeat}
.job .job6{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job6.png) no-repeat}
.job .job7{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job7.png) no-repeat}
.job .job8{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job8.png) no-repeat}
.job .job9{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job9.png) no-repeat}
.job .job10{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job10.png) no-repeat}
.job .job11{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job11.png) no-repeat}
.job .job12{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job12.png) no-repeat}
.job .job13{background:url(../../mgamezzang/games/yulgang_v4/main/bg_job13.png) no-repeat}
.job .view h3{margin:198px 0 23px 115px;font-size:30px;color:#c7c4b3}
.job .view h3 strong{font-weight:700;font-size:70px;color:#fff}
.job .view h4{margin:0 0 9px 115px;font-weight:400;font-size:16px;color:#fff6c5}
.job .view p{margin:0 0 38px 115px;width:650px;font-weight:300;font-size:18px}
.job .table{margin:0 0 18px 115px;padding:3px 10px;width:415px;height:65px;border-radius:10px;background:#2a3d3b}
.job table{border-collapse:collapse;width:100%;font-size:13px;text-align:center}
.job th,.job td{padding:7px 0;font-weight:300}
.job th{border-bottom:1px solid #626e69}
.job th:nth-child(-n+4){width:10%}
.job td{color:#eee3bd}
.job .ability{display:flex;flex-wrap:wrap;margin:0 0 13px 115px;width:520px;font-weight:300;font-size:13px}
.job .ability li{margin:0 60px 7px 0}
.job .ability li:nth-child(2){order:2}
.job .ability li:nth-child(3){order:1}
.job .ability li:nth-child(4){order:3}
.job .button{display:block;margin:0 0 0 115px;width:170px;height:45px;background:#f4dd90;font-size:13px;line-height:45px;color:#696969;text-align:center}
.job .button:hover{background:#e8c64f}
.ranking{position:sticky;bottom:0;margin:0 auto;width:1600px;height:94px;z-index:101;transition:all .2s cubic-bezier(0, 0, 0.5, 1)}
.ranking h2{padding:0 22px 0 26px;font-weight:500;font-size:26px;color:#fff}
.ranking button{background:none}
.ranking a{color:#ccc}
.ranking .on a{color:#fa6969}
.ranking .close{display:flex;align-items:center;height:94px;border-radius:10px 10px 0 0;background:#07142a}
.ranking .close .tabs{margin:0 40px 0 0;font-size:15px}
.ranking .close .list{display:flex;justify-content:center;flex-grow:1;font-size:16px;color:#fff;text-align:center}
.ranking .close .list li{margin:0 60px 0 0}
.ranking .close .list span,.ranking tr span{display:inline-block;margin:-6px 0 0 0;width:30px;height:25px;background:url(../../mgamezzang/games/yulgang_v4/main/bu_ranking.png) no-repeat;vertical-align:middle;text-indent:-9999px}
.ranking .close .list li:nth-child(2) span,.ranking tr:nth-child(2) span{background-position:0 -30px}
.ranking .close .list li:nth-child(3) span,.ranking tr:nth-child(3) span{background-position:0 -60px}
.ranking .close .list li:nth-child(4) span,.ranking tr:nth-child(4) span{background-position:0 -90px}
.ranking .close .list li:nth-child(5) span,.ranking tr:nth-child(5) span{background-position:0 -120px}
.ranking .close button{align-self:flex-end;margin:0 30px 0 0}
.ranking .opened{position:relative;box-sizing:border-box;padding:40px 0 0 682px;height:358px;background:url(../../mgamezzang/games/yulgang_v4/main/bg_ranking.png) no-repeat;}
.ranking .opened .bg{position:absolute;top:3px;left:3px;width:100%;height:358px;background-repeat:no-repeat}
.ranking .opened h2{float:left;padding:0}
.ranking .opened .tabs{position:relative;display:flex;margin:10px 0 18px 0;font-size:16px}
.ranking .opened .tabs li:before,.ranking .opened .tabs li:last-child:after{content:'';display:inline-block;margin:-3px 10px 0 10px;width:1px;height:16px;background:#6c6c6c;vertical-align:middle}
.ranking .opened button{position:absolute;top:0;right:28px}
.ranking .table{position:relative;box-sizing:border-box;padding:27px 34px;width:842px;height:240px;background:#251919}
.ranking th{padding:0 0 10px 0;border-bottom:1px solid #4a4a4a;font-weight:300;font-size:15px;color:#a2a2a2}
.ranking td{height:30px;font-weight:300;font-size:16px;color:#f7edd2;text-align:center}
.ranking tbody tr{background:url(../../mgamezzang/games/yulgang_v4/main/bg_table.png) no-repeat center bottom}
.ranking tbody tr:first-child td{padding:10px 0 0 0}
.ranking .more{position:absolute;top:59px;right:77px}
.ranking.opened{height:358px}
.ranking.opened .close{display:none}
.ranking .opened{display:none}



/* login */
.login{position:relative;margin:0 30px;width:230px;height:230px;font-size:13px;text-align:center}
.login h2{margin:26px 0 22px 0;font-weight:normal;font-size:14px}
.login h2 span{display:inline-block;max-width:75%;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;vertical-align:top}
.login h2 img{margin:-3px 0 0 0}
.login button{background:none}
.login button:hover img{opacity:0.9}
.login .find{display:flex;justify-content:space-around;margin:16px 0 18px 0}
.login .find li:last-child{margin:0 0 0 10px}
.login .button{position:absolute;bottom:0;left:0;display:flex;box-sizing:border-box;padding:0 10px;width:100%;height:45px;background:#191616}
.login .button a{flex-grow:1;font-size:15px;line-height:44px;color:#fff}

.logout {position:relative;margin:0 30px;width:230px;height:230px;font-size:13px;text-align:center}
.logout h2{margin:26px 0 22px 0;font-weight:normal;font-size:14px}
.logout h2 span{display:inline-block;max-width:75%;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;vertical-align:top}
.logout h2 img{margin:-3px 0 0 0}
.logout h2{color:#fff}
.logout button{background:none}
.logout button:hover img{opacity:0.9}
.logout .mcash{margin:10px 0 0 0;font-size:13px;color:#b3b3b3;text-align:right;letter-spacing:-0.5px}
.logout .mcash span{float:left;line-height:25px}
.logout .mcash em{font-style:normal;color:#f1ead7}
.logout .mcash a{display:inline-block;margin:0 0 0 2px;width:44px;height:27px;background:url(../../mgamezzang/games/yulgang_v4/main/bg_logout.png) no-repeat 0 -30px;line-height:25px;color:#fff;text-align:center}
.logout .mcash a.charge{background-position:0 0}
.logout .button{position:absolute;bottom:0;left:0;display:flex;box-sizing:border-box;padding:0 10px;width:100%;height:45px;background:#191616}
.logout .button a{flex-grow:1;font-size:15px;line-height:44px;color:#fff}





/* popup */
.popup{position:absolute;}
.popup .detail{position:absolute;display:flex;margin:12px 20px;padding:20px 20px 40px 20px;box-shadow:0 0 25px rgba(35,38,42,.7);background:#fff;z-index:100}
.popup .detail img{border:1px solid #e0e0e0;width:260px;height:340px;object-fit:cover}
.popup .detail a{display:inline-block;}
.popup .detail a:first-child{margin:0}
.popup .detail a:hover img{border-color:#aaa}
.popup button{position:absolute;background:none;font-size:12px}
.popup button:before,.popup button:after{content:'';display:block;position:absolute;top:9px;left:-2px;width:16px;height:1px;background:#474747;transform:rotate(-45deg)}
.popup button:after{transform:rotate(45deg)}
.popup .today{bottom:11px;padding:0 0 0 15px;color:#757575;border:0}
.popup .close{top:-23px;right:0;width:62px;height:23px;background:#23272a;text-indent:-9999px}
.popup .close:before,.popup .close:after{top:11px;left:23px;background:#fff}