@charset "utf-8";

/*common*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

body{background-color:#fff; height: 100%; font-size: 14px; font-weight: 400; color:#090909; font-family: 'Noto Sans KR', sans-serif; letter-spacing:0px; text-align: left; word-break: break-all; }
html {height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p, button, input { margin: 0;padding: 0}
ul, ol, dl {list-style: none}
ul {list-style: none; padding: 0; margin: 0}
img, fieldset, iframe {border: 0}
img {vertical-align:top}
input, select, button {font-family: 'Noto Sans KR', sans-serif; vertical-align: middle;}
input {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0;}
textarea:focus, input:focus{outline: none;}
textarea{font-family: 'Noto Sans KR', sans-serif; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
button, input{position: relative; border:none;}
button{cursor:pointer; outline: none; border:none;}
em, address {font-style: normal}
a {text-decoration: none; color: inherit; display: block; position: relative;}
.clear {clear: both;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; }
*{-webkit-tap-highlight-color:transparent}
img.map, map area{outline: none;}

img, canvas {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
img::-moz-selection { background-color: transparent; color: #000;}
img::selection {background-color: transparent; color: #000;}
.wid10{width:10%; height:auto;}.wid20{width:20%; height:auto;}.wid30{width:30%; height:auto;}.wid40{width:40%; height:auto;}.wid50{width:50%; height:auto;}
.wid60{width:60%; height:auto;}.wid70{width:70%; height:auto;}.wid80{width:80%; height:auto;}.wid90{width:90%; height:auto;}.wid100{width:100%; height:auto;}
.relative{position: relative;}
.blind {font:0/0 a; height: 0; overflow: hidden; position: absolute; width: 0;}
.pc{display: block;} 
.mobile{display: none }
.obj{position: absolute; z-index: 99;}
.trs{-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out;}
.tCenter{text-align: center;}
.tLeft{text-align: left;}
.tRight{text-align: right;}


img{width:100%; height:auto;}
#wrap{width:100%; min-width:320px;  max-width:685px; margin:0px auto; padding-top:80px; word-break: keep-all;}
#wrap.game{max-width:450px;}

#gnb{width:100%; height:60px; border-bottom:1px solid #606060; background-color: rgba(66, 66, 66, 0.95); background-image: url('https://dbins2.speedgabia.com/jjansun/images/gnb_line.png'); background-repeat: repeat-x; background-position-y: 100%; position: fixed; top:0px; left:0px; z-index: 10000; }
#gnb.open{background-color: #f06629; border-bottom:none;}
#gnb h1{width:120px; margin:0px auto;}
#gnb h1 a{padding-top:13px; padding-bottom:7px;}
#gnb ul{top:60px; left:0px; padding:15px 0px; width:100%; text-align: center; display:none; position: absolute; z-index: 1; background-color: #f06629; }
#gnb ul li a{color: #ffffff; font-size:18px; padding:3px; display: block; position: relative;}
#gnb ul li a:before{width:24px; height:24px; top:4px; left:50%; margin-left:-100px; position: absolute;background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; display: block;}
#gnb ul li.menu_mypage a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_user.png'); }
#gnb ul li.menu_accumulate a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_game.png'); }
#gnb ul li.menu_use a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_gift.png'); }
#gnb ul li.menu_more a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_add.png'); }
#gnb ul li.menu_rank a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_trophy.png'); }
#gnb ul li.menu_store a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_shopping.png'); }
#gnb ul li.menu_cs a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_report.png'); }
#gnb ul li.menu_logout a:before{background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_logout.png'); }




#gnb ul li.active a{font-weight: 800;}
#gnb ul li.active a img{top:6px;}
#gnbFade{position: fixed; width:100%; height:100%; top:0px; left:0px; background-image: url('https://dbins2.speedgabia.com/jjansun/images/gnb_fade.png'); z-index: 9999; display: none;}
#gnb button{position: absolute; top:0px; left:0px; margin:0em;border:none;background:none; z-index: 10;}
#gnb button span{display:block;}
#gnb .lines-button{padding:17px 8px; padding-bottom:23px; transition:.3s;cursor:pointer;user-select:none;}
#gnb .lines-button:active{transition:0;}
#gnb .lines{display:inline-block;width:2.2rem;height:0.17143rem;background:#ecf0f1;transition:0.3s;position:relative;}
#gnb .lines:before,#gnb .lines:after{display:inline-block;width:2.2rem;height:0.17143rem;background:#ecf0f1;transition:0.3s;position:absolute;left:0;content:'';-webkit-transform-origin:0.28571rem center;transform-origin:0.28571rem center;}
#gnb .lines:before{top:0.7rem;}
#gnb .lines:after{top:-0.7rem;}
#gnb .lines-button.x.close .lines{background:transparent;}
#gnb .lines-button.x.close .lines:before,#gnb .lines-button.x.close .lines:after{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;width:2.2rem;}
#gnb .lines-button.x.close .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);}
#gnb .lines-button.x.close .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);}
#gnb a.goRank{width:35px; top:17px; left:60px; display: block; position: absolute; }

#gnb #side {font-size:16px; position: absolute; top:0px; right:0px; color:#fff}
#gnb #side a{padding:17px 10px; position: relative;}
#gnb #side .login a{padding:16px 10px;}
#gnb #side.login a{padding:2px 10px; font-weight: 600;}
#gnb #side .login img{width:26px; margin-left:1px; vertical-align: -9px;}
#gnb #side .my{display: none;}
#gnb #side .my img{width:16px; margin-top:5px; margin-right:3px;}
#gnb #side.login .my{display: block;}
#gnb #side.login .login{display: none;}
#gnb #side.login .my span.level{width:40px; height:32px; margin:0px auto; display:block; background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level1.png'); background-size: contain; background-repeat:no-repeat; background-position:center; position: relative;}
#gnb #side.login .my span.level1{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level1.png');}
#gnb #side.login .my span.level2{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level2.png');}
#gnb #side.login .my span.level3{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level3.png');}
#gnb #side.login .my span.level4{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level4.png');}
#gnb #side.login .my span.level5{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level5.png');}
#gnb #side.login .my span.level6{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level6.png');}
#gnb #side.login .my span.level7{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level7.png');}
#gnb #side.login .my span.level8{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level8.png');}
#gnb #side.login .my span.level em{display:none; font-size:13px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; letter-spacing:0px; position: absolute; width:100%; top:6px; left:0px; color:#ffffff; text-align: center;}
#gnb #side.login .my em.salt{font-size:15px; vertical-align: 1px;}

#footer{padding:10px; color:#737373; background-color: #e8ebf0; text-align: center; position: relative;}
#footer p.top{padding:0px;}
#footer p.top span{display: inline-block;}
#footer p.top span a{padding:3px; text-decoration: underline;}
#footer p{padding:5px 0px; font-size:11px;}s
#footer p span{margin-right:5px;}
#footer img{width:70px;}
.banner_footer li{margin:5px;}
.banner_footer li img{border:1px solid #dedede; border-radius: 10px; overflow: hidden; }

#scrollTop{width:37px; height:37px; opacity:0.8; position: fixed; bottom:10px; right:5px; z-index: 10; cursor:pointer;}

/* 개인정보취급방침 */
#policy{padding:20px;}
#policy h1{font-size:18px; margin-bottom:5px;}
#policy dl{margin:20px 0px;}
#policy dt{font-weight: 600;}
#policy dd a{display: inline-block;}

/* 메인 */
#main .wrap{padding:10px;}
#main .section{margin-bottom:40px;}
#main #notice{margin-bottom:0px;}
#main h2{font-size:18px; margin-bottom:10px; text-align: center;}
#main h2 img{width:24px; margin-top:1px; margin-right:5px; margin-left:-10px;}
#main h2 a{font-size:13px; margin-left:10px; font-weight: 600;  display: inline-block; text-decoration: underline;}

#main h2 span{font-size:13px; display: block; font-weight: 300;}
#main #banner{margin-bottom:30px;}
#main #banner .swiperWrap{margin:0px 0px; margin-top:-20px; }
#main .swiperWrap{margin:0px 20px; position: relative;}
#main .swiperWrap .swiper-slide{border-radius: 10px; overflow: hidden; background-color: #d5d5d5;}
#main .swiperWrap .swiper-slide em{padding:1px 0px; color:#fff; background-color: rgba(66, 66, 66, 0.8); position: absolute; width:100%; bottom:0px; left:0px; text-align: center; }
#main .swiperWrap .swiper-slide p.x2{animation: blink-effect 0.5s step-end 3; width:30px; height:30px; top:3px; left:3px; border-radius:8px; border:1px solid #747474; background-color:#ffffff; display:block; background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_x2.png'); background-size: contain; background-repeat:no-repeat; background-position:center; position: absolute;}
#main .swiperWrap .swiper-button-next, #main .swiperWrap .swiper-button-prev{width:20px; background:none;}
#main .swiperWrap .swiper-button-prev{top:55%; left:-25px;}
#main .swiperWrap .swiper-button-next{top:55%; right:-25px;}
#main .swiperWrap .swiper-pagination{width:100%; bottom:-20px; text-align: center;}
#main .swiperWrap .swiper-pagination-bullet{width:8px; height:8px; margin:0px 2px; border-radius:50%; background:#f5c0a8; opacity:1;}
#main .swiperWrap .swiper-pagination-bullet-active{background:#f06629; }
#main #notice ul{padding:5px; background-color: #e5e5e5; border-radius: 5px;}
#main #notice li a{font-size:12px; padding:2px 5px; padding-right:85px; font-weight: 300; overflow:hidden;text-overflow:ellipsis; white-space:nowrap; position: relative;}
#main #notice li a span{position: absolute; top:0px; right:5px;}

#main #banner_mid {margin-bottom:30px; margin-top:-20px; border:1px solid #dedede; border-radius: 10px; overflow: hidden; }

.numbering {text-align: center; margin:15px 0px; }
.numbering li{margin:1px; display: inline-block; border:1px solid #e8e8e8; position: relative; background-color: #ffffff; }
.numbering li a{padding:5px 8px; font-size:12px; line-height:12px; color:#4a4a4a;}
.numbering li a.current{color:#ffffff; background-color: #4d4d4d; font-weight: bold;}
#sub.rank .numbering li{background-color: #2e42a8;}
#sub.rank .numbering li a{color: #ffffff;}
#sub.rank .numbering li a.current{color:#4d4d4d; background-color: #ffffff;}


/* 서브 */
#sub{margin-top:-20px; min-height:420px;}
#sub .wrap{padding:10px; position: relative;}
#sub .wrap  a.prev{width:40px; position: fixed; top:65px; left:7px; opacity: 0.8; z-index: 3;}
#sub h2{font-size:20px; margin:20px 0px; text-align: center;}
#sub h2 img{width: 25px; margin-top: 4px; margin-left:-10px; margin-right: 5px;}
#sub h2 span{font-size:13px; display: block; font-weight: 300;}

/* 로그인 */
#sub.login a.kakao{margin:40px 30px; line-height:60px; font-weight: 600; border-radius: 5px; background-color: #fee500; text-align: center;}
#sub.login a.kakao span{padding-left:15px; position: relative;}
#sub.login a.kakao span:before{width:30px; height:30px; top:-2px; left:-15px; background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_kakao.png'); background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; display: block; position: absolute;}
#sub.login p.txt1{margin:40px 20px; margin-top:-10px; font-size:12px; color:#606060; text-align: center;}

/* 마이페이지 */
#sub.mypage .top{padding:10px; color:#040404; }
#sub.mypage .top .profileImg{width:60px; top:10px; left:10px; position: absolute;}
#sub.mypage .top .profileImg span{display: inline-block; width:60px; height:60px; border-radius: 50%; border: 1px solid #c0c0c0;overflow: hidden; background-color: #ffffff;}
#sub.mypage .top .profileImg img{border-radius: 50%; max-height:60px; overflow: hidden; height:100%;}
#sub.mypage .top .profileImg .input-file-button{width:22px; height:22px; bottom:0px; right:0px; background-image: url('https://dbins2.speedgabia.com/jjansun/images/profile_modify.png'); background-repeat: no-repeat; background-size: contain; position: absolute; cursor:pointer;}
#sub.mypage .top ul.info{margin-left:90px; min-height:70px;}
#sub.mypage .top li{margin-bottom:3px; padding-left:64px; position: relative;}
#sub.mypage.detail .top li{margin-bottom:10px; padding-left:75px; }
#sub.mypage .top li:before{width:4px; height:4px; top:9px; left:0px; border-radius: 50%;background-color: #e9af32; content: ""; display: block; position: absolute;}
#sub.mypage .top li span{padding-left:10px; position: absolute; top:0px; left:0px;}
#sub.mypage .top li.nickName{position: relative; padding-right:35px;}
#sub.mypage .top li.nickName input{font-size:14px; width:100%; height:22px; border:1px solid #000; background-color: transparent; }
#sub.mypage .top li.nickName.sexarea{text-align: center;}
#sub.mypage .top li.nickName.sexarea input{width:18px; height:18px; margin-right:5px; border:1px solid #000; background-color: #ffffff; }
#sub.mypage .top li.nickName.sexarea label{margin-right:20px; display: inline-block;}
#sub.mypage.detail .top li.nickName input{height:27px; background-color: #ffffff;}
#sub.mypage .top li.nickName a{position: absolute; top:1px; right:0px; text-decoration: underline;}
#sub.mypage .top li.nickName input{border-radius: 3px; padding:2px 5px; text-align: center;}
#sub.mypage .top li.nickName input:read-only{color:#040404; border:none; text-align: left; padding:0px; vertical-align: top;}
#sub.mypage.detail .top li.nickName input:read-only{text-align: center; padding:2px 5px;}
#sub.mypage.detail .top li.nickName input:read-only{}
#sub.mypage .top ul.withdraw{margin-top:10px; background-color: #e1e1e1; padding:10px; border-radius: 10px; }
#sub.mypage .top li.withdraw button{font-size:13px; border-radius:5px; padding:2px 10px; background-color: #808080; color:#ffffff; }
#sub.mypage .top button.characterSelect{margin-right:5px; font-size:13px; padding:2px 10px;}
#sub.mypage .top button.myDetail{font-size:13px; padding:2px 10px;}
#sub.mypage .top .box{overflow:hidden; margin-bottom:10px; background-color: #e1e1e1; padding:10px; border-radius: 10px; position: relative;}
#sub.mypage .top .salt{ background-color: #040404; padding:10px; border-radius: 10px; color:#ffffff;}
#sub.mypage .top .salt li{font-size:15px; padding-left:85px;}
#sub.mypage .top .salt li:before{top:10px;}
#sub.mypage .top .salt li.current:before{top:12px;}
#sub.mypage .top .salt li b{padding-left:22px; font-weight: 400; position: relative;}
#sub.mypage .top .salt li.current span{line-height:28px;}
#sub.mypage .top .salt li.current b{font-size:18px; font-weight: 800; }
#sub.mypage .top .salt li b::before{width:16px; height:18px; top:3px; left:0px; background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_salt.png'); background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; display: block; position: absolute;}
#sub.mypage .top .salt li.current b::before{top:5px;}
#sub.mypage .top li.member_type b{color:#ff0000}
#sub.mypage .top li.member_type a{margin-left:15px; font-size:13px; text-decoration: underline; display: inline-block; }

#sub.mypage .top #characterBox{padding:10px; margin-bottom:10px; border-radius: 10px; position: relative;  text-align: center; background-color: #f7ebce; display: none;}
#sub.mypage .top #characterBox ul{height:205px; overflow: hidden; overflow-y: auto;}
#sub.mypage .top #characterBox li{width:25%; margin-bottom:10px; padding-left:0px;float:left;}
#sub.mypage .top #characterBox li:before{display: none;}
#sub.mypage .top #characterBox li img{width:60px; margin:0px auto; border-radius: 50%; display: block; border:1px solid #e1e0e0;}
#sub.mypage .top #characterBox .btnArea{margin-top:10px;}
#sub.mypage .top #characterBox .btnArea button{ font-size:13px; width:130px; margin:0px 5px; }

#sub.mypage .bottom{padding:10px; color:#040404; }
#sub.mypage .bottom li{margin-bottom:3px; padding-left:64px; position: relative;}
#sub.mypage .bottom li:before{width:4px; height:4px; top:9px; left:0px; border-radius: 50%;background-color: #e9af32; content: ""; display: block; position: absolute;}
#sub.mypage .bottom li span{padding-left:10px; position: absolute; top:0px; left:0px;}
#sub.mypage .bottom ul.withdraw{margin-top:10px; background-color: #e1e1e1; padding:10px; border-radius: 10px; }
#sub.mypage .bottom ul.withdraw li.withdraw button{font-size:13px; padding:2px 10px; background-color: #808080; color:#ffffff; display: inline-block;}
#sub.mypage .bottom ul.withdraw li.withdraw em{font-size:12px; margin-left:10px; color:#ff0000;}
#sub.mypage .bottom ul.withdraw button.myDetail{clear:both; font-size:13px; border-radius:5px; padding:2px 10px; background-color: #000000; color:#ffffff; }

#sub.mypage .detail{margin:20px 10px; color:#606060; }
#sub.mypage .detail p{font-size:16px; text-align: center;}
#sub.mypage .detail p a{font-size:14px; margin-left:15px; font-weight: 600;  display: inline-block; text-decoration: underline;}
#sub.mypage table{font-size:13px; letter-spacing: -1px; width:100%; border-bottom:1px solid #b2b2b2; margin:5px 0px; text-align: center; border-spacing:0; border-collapse:collapse; padding:0px; }
#sub.mypage table th{padding:4px; color:#fff; font-weight: 400;}
#sub.mypage table td{padding:3px; border-bottom:1px solid #e5e5e5;}
#sub.mypage table thead tr{background-color: #333;;}
#sub.mypage p.txt1{margin-left:95px; margin-top:5px; font-size:11px; line-height:15px; color:#ff0000;}

#sub.mypage.level table td{padding:10px 3px;}
#sub.mypage.level span.level{width:40px; height:32px; margin:0px auto; display:block; background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level1.png'); background-size: contain; background-repeat:no-repeat; background-position:center; position: relative;}
#sub.mypage.level span.level1{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level1.png');}
#sub.mypage.level span.level2{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level2.png');}
#sub.mypage.level span.level3{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level3.png');}
#sub.mypage.level span.level4{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level4.png');}
#sub.mypage.level span.level5{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level5.png');}
#sub.mypage.level span.level6{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level6.png');}
#sub.mypage.level span.level7{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level7.png');}
#sub.mypage.level span.level8{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level8.png');}
#sub.mypage.level span.level em{display:none; font-size:13px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; letter-spacing:0px; position: absolute; width:100%; top:5px; left:0px; color:#ffffff; text-align: center;}

/* 솔트적립 */
#sub.accumulate .game ul{overflow: hidden;}
#sub.accumulate .game li{float:left; position:relative; width:31.3%; margin:1%; border-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden;}
#sub.accumulate .game li a{height:23vw; position: relative;}
#sub.accumulate .game li a:after{content: ""; display: block; width:34px; height:17px; top:2px; right:2px; z-index: 2; background-size: contain; background-repeat: no-repeat; position: absolute;}
#sub.accumulate .game li.new a:after{ background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_new.png'); }
#sub.accumulate .game li.hit a:after{ background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_hit.png'); }
#sub.accumulate .game li a span{color:#ffffff; background-color: #000; display: block; width:100%; bottom:0%; left:0%; position: absolute; text-align: center;}
#sub.accumulate .game li.complete a:before{content: ""; display: block; width:60px; height:48px; top:12%; left:50%; margin-left:-30px; z-index: 3; background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_complete.png'); background-size: contain; background-repeat: no-repeat; position: absolute;}
#sub.accumulate .game li a p.x2{ animation: blink-effect 0.5s step-end 3; width:26px; height:26px; top:3px; left:3px; border-radius:6px; border:1px solid #747474; background-color:#ffffff; display:block; background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_x2.png'); background-size: contain; background-repeat:no-repeat; background-position:center; position: absolute;}
@keyframes blink-effect { 0% {opacity: 0;} 30% {opacity: 1;}}

/* 즉석당첨 */
#sub.use h2{margin-top:40px;}
#sub.use .game ul{overflow: hidden;}
#sub.use .game li{float:left; width:48%; margin:1%; border-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden;}
#sub.use .game li a{height:30vw; position: relative;}
#sub.use .game li a span{color:#ffffff; background-color: #000; display: block; width:100%; bottom:0%; left:0%; position: absolute; text-align: center;}
#sub.use .game li.complete a:before{content: ""; display: block; width:40px; height:32px; top:5px; left:3px; z-index: 2; background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_complete.png'); background-size: contain; background-repeat: no-repeat; position: absolute;}

/* 추가적립 */
#sub.more .banner li{margin:15px 0px; }
#sub.more .banner li p.title{margin-bottom:5px;}
#sub.more .banner li p.title b{font-size:15px; color:#2e42a8;}
#sub.more .banner li p.title img{width:18px; margin-right:2px; margin-top:3px;}
#sub.more .banner li .box{height:80px; border:1px solid #000;}
#sub.more .banner_new ul{overflow: hidden;}
#sub.more .banner_new li{float:left; margin-bottom:10px;}
#sub.more .banner_new li a{display: block; width:100%;}
#sub.more .banner_new li.small{width:25%;}
#sub.more .banner_new li.big{width:100%; display: none;}
#sub.more .banner_new li p.txt {text-align: center;}
#sub.more .banner_new li p.txt b{font-size:15px; color:#2e42a8;}
#sub.more .banner_new li p.txt img{width:18px; margin-right:2px; margin-top:3px;}


/* 랭킹 */
#sub.rank{background-color: #2e42a8;}
#sub.rank h2 img{width:60px; margin:0px; margin-right:0px;}
#sub.rank .tabContainer{color:#ffffff; text-align: center;}
#sub.rank .tabContainer .tabHead li{margin:0px 3px; border:1px solid #fff; border-radius: 20px; display: inline-block; position: relative;}
#sub.rank .tabContainer .tabHead li.active{color:#2e42a8; font-weight: 600; border:1px solid #9ef7fd; background-color: #9ef7fd;}
#sub.rank .tabContainer .tabHead li a{line-height:25px; padding:0px 22px;}
/*#sub.rank .tabContainer .tabHead li:first-child:before{width:68px; height:55px; top:-56px; left:-17px; background-image:url('https://dbins2.speedgabia.com/jjansun/images/rank_bubble.png'); position: absolute;background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; display: block;}*/
#sub.rank .period{text-align: center; color:#ffffff; margin:10px 0px;}
#sub.rank .period em{display: inline-block; margin:0px 5px;}
#sub.rank .rank{padding-bottom:15px;}
#sub.rank .rank table{margin:10px 0px; font-size:12px; width:100%; border-bottom:1px solid #71afdb; text-align: center; border-spacing:0; border-collapse:collapse; padding:0px; word-break: break-all;}
#sub.rank .rank table.my{background-color: #1f318b;}
#sub.rank .rank table th{font-size:13px; padding:5px; color:#9ef7fd; font-weight: 500; border-bottom:1px solid #71afdb;}
#sub.rank .rank table td{padding:5px 4px; color:#ffffff; border-bottom:1px dashed #4d5eb5;}
#sub.rank .rank table tr:hover td,#sub.rank .rank table tr:active td{background: #10248a;}
#sub.rank .rank table tr:nth-child(10) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(20) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(30) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(40) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(50) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(60) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(70) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(80) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table tr:nth-child(90) td{border-bottom:1px dashed #7585da;}
#sub.rank .rank table td img{width:23px; height:23px; margin-top:-2px; border-radius:50%; margin-right:5px; background-color: white;  -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out;}
#sub.rank .rank table tr:hover td img{width:43px; height:43px; margin-top:-11px; }
#sub.rank .rank table tr:hover td.id{padding-top:17px;}
#sub.rank .rank table td span{width:28px; height:22px; margin-left:5px; display: inline-block; vertical-align: -8px; background-size: contain; background-repeat: no-repeat;}
#sub.rank .rank table td span.lev1{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level1.png');}
#sub.rank .rank table td span.lev2{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level2.png');}
#sub.rank .rank table td span.lev3{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level3.png');}
#sub.rank .rank table td span.lev4{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level4.png');}
#sub.rank .rank table td span.lev5{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level5.png');}
#sub.rank .rank table td span.lev6{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level6.png');}
#sub.rank .rank table td span.lev7{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level7.png');}
#sub.rank .rank table td span.lev8{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level8.png');}
#sub.rank .rank table td.salt{color:#f6644c; font-weight: 600;}
#sub.rank .rank p.update{font-size:11px; text-align: right; color:#ffff00; margin-bottom:10px;}
#sub.rank .rank p.notice{font-size:11px; text-align: left; color:#ffffff;}

/* 고객센터 */
#sub.cs .tabContainer{text-align: center;}
#sub.cs .tabContainer .tabHead{border-bottom:2px solid #f6644c;}
#sub.cs .tabContainer .tabHead ul{overflow: hidden;}
#sub.cs .tabContainer .tabHead li{margin:0px; display: block; float:left; width:50%; float:left; background-color: #dfdede;}
#sub.cs .tabContainer .tabHead li.active{color:#ffffff; font-weight: 600; background-color: #f6644c;}
#sub.cs .tabContainer .tabHead li a{min-width:70px; line-height:25px; padding:0px 30px;}
#sub.cs .tabContainer .tabHead li.active{text-decoration: underline;}
#sub.cs .detail{margin:20px 0px; color:#606060; }
#sub.cs .faq table{font-size:12px; width:100%; border-bottom:1px solid #b2b2b2; margin:10px 0px; text-align: center; border-spacing:0; border-collapse:collapse; padding:0px; }
#sub.cs .faq table th{padding:7px 2px; color:#fff; font-weight: 400;}
#sub.cs .faq table td{padding:7px 2px; border-bottom:1px solid #e5e5e5;}
#sub.cs .faq table thead tr{background-color: #333;}
#sub.cs .faq table tr.answer{display: none;}
#sub.cs .faq table tr.answer td{font-size:13px; padding:10px; padding-top:5px; padding-left:90px; font-weight: 600; color:#f6644c;}
#sub.cs .faq table tr.question.active td{padding-top:10px; font-weight: 600; color:#2e42a8; border-bottom:none;}







/* 게임 인트로 */
#gameWrap{position: relative; margin-top:-20px; text-align: center; overflow: hidden;}
#intro{background-color: rgba(0, 0, 0, 0.85); width:100%; height:100%; position: absolute; left:0; top:0; z-index: 500;}
#intro .wrap{max-width:500px; margin:0px auto;}
#intro .content{width:330px; height:419px; background-image: url('https://dbins2.speedgabia.com/jjansun/images/intro_box.png'); margin:0px auto; margin-top:50px; color:#7f2908; background-size: contain; background-repeat: no-repeat; background-position: center;}
#intro .content .start{width: 220px; margin:0px auto;}
/*.game.type2 #intro .content .start{display: block;}*/
#intro .content .test{width: 220px; margin:0px auto; margin-top:5px; display: none;}
#intro .content .title{font-size: 25px;font-weight: 800; line-height:60px; letter-spacing: 2px; padding-right:20px; position: relative;}
#intro .content .title .closeIntro{position: absolute;z-index: 2; cursor:pointer;right: 0%;top: 0%;width: 17%;height: 100%; font-size:0px;}
#intro .content .title em{width:35px; height:38px; display: inline-block; vertical-align: -12px; margin-right:5px;}
#intro .content .icon{width: 45px; margin:0 auto;margin-bottom: 5px;}
#intro .content .txt{margin: 15px 20px; height:180px; text-align: left;}
#intro .content .txt p{font-size:13px; margin:5px 0px; letter-spacing: -1px;}
#intro .content .txt b{font-weight: 600; color:#e51625}
#intro .count{top: calc(50% - 100px); left: calc(50% - 100px); position: absolute;}
#intro .count span{width:200px; display:none;}

/* 실시간당첨자 */
#wrap #winnerContainer{text-align: center; position: fixed; top:60px; left:0px; width:100%; color: #ffffff; background-color: #1f318b; padding:5px 0px; z-index: 9999;}
#wrap #winnerContainer #winner ul{width:100%;}
#wrap #winnerContainer  #winner li{font-size:12px; font-weight: 600;}
#wrap #winnerContainer  #winner li span{font-weight: 400;}

#wrap.game  a.prev{width:40px; position: fixed; top:90px; left:7px; opacity: 0.8; z-index: 3;}


/* 팝업 */
.popup {display:none; position: fixed;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;overflow: auto;z-index: 900;box-sizing: border-box;background-color:#0000008c;text-align: center; }
.popup:before{content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em;}
.popup .wrap {padding: 60px 0 40px; background-color:#fff; width:80%; max-width:500px; margin:0 auto;vertical-align: middle;position: relative;z-index: 99999;box-sizing: border-box;display: inline-block;text-align: center;overflow: hidden;border-radius: 10px;}
.popup .close{position: absolute;z-index: 2; cursor:pointer;right: 5%;top: 5%;width: 9%;height: 24px;}
.popup .content{position: relative; color:#000; font-size:20px;}
.popup button{margin:0 1%; font-size: 15px; background-color:#F6674C;width: 42%;height: 40px; max-width:150px; line-height: 40px;text-align: center; font-weight:600;border-radius: 25px; color:#fff;margin-top: 30px;}
.popup .reload{display: none;}
.popup .share{background: #fff; border: 2px solid #F6674C; color: #F6674C;  line-height: 36px;}
.popup .share span{ background-image: url(https://dbins2.speedgabia.com/jjansun/images/ico_kakao2.png); display: inline-block;  width: 25px; height: 24px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-left: 5px;}

#popup_score .content p{font-size:20px; font-weight:600;}
#popup_score .content p em{color:#F6674C;}

.popup.gift .wrap{padding:0; border-radius: 0; width:85%; max-width:320px;}
.popup.gift .wrap .giftImg{position: absolute;width: 80%;left: 10%;top: 8%;}


.modal {padding:25px 30px}
.modal a.close-modal{background-image: url('https://dbins2.speedgabia.com/jjansun/images/popup_close.png');}
.modal .main_txt{display: none;}

#remainGift{background-color: #ded9ef; border-radius: 10px; position: absolute; width:96%; left:2%; bottom:10px;}
#remainGift p b{color:#4a25a9;}
#remainGift ul{overflow: hidden;}
#remainGift li{width:15.5%; margin:0.5%; float:left;}
#remainGift li img{width:50px; height:50px; border-radius: 25px;}

/*친구초대 이벤트*/
#sub.event_invite{padding-bottom:0px;}
#sub.event_invite .wrap{padding:0px; background-color: #144ae0; color:#ffffff; padding-bottom:20px;}
#sub.event_invite .wrap .btn{font-size:0px; width:50%; height:4%; left:25%;}
#sub.event_invite .wrap .copy.btn{top:29.4%;}
#sub.event_invite .wrap .rank.btn{top:33.9%;}
#sub.event_invite .wrap #txt{position: absolute; top:0; left:0; width:1px; height:1px; margin:0; padding:0; border:0;}
#sub.event_invite .winWrap{margin:10px 20px; margin-bottom:20px;}
#sub.event_invite .winWrap .win{margin:10px 0px;}
#sub.event_invite .winWrap .win p{font-size:16px; font-weight:600;}
#sub.event_invite .winWrap .win p b{font-size:15px; margin:0px 3px; width:24px; height:24px; line-height:24px; border-radius: 12px; display: inline-block; background-color: #000000; text-align: center;}
#sub.event_invite .winWrap .win ul{margin:10px 0px;}
#sub.event_invite .winWrap .win li{font-size:13px;}
#sub.event_invite .winWrap .win li span{margin-left:10px; font-weight: 600;}
#sub.event_invite .winWrap .win .player{margin:10px 0px;}
#sub.event_invite .winWrap p{font-size:13px;}
#sub.event_invite table.invite{margin-top:5px; margin-bottom:20px; font-size:13px; letter-spacing: 0px; width:100%; border-bottom:1px solid #b2b2b2; text-align: center; border-spacing:0; border-collapse:collapse; padding:0px; }
#sub.event_invite table.invite th{padding:4px; color:#000000; font-weight: 600;}
#sub.event_invite table.invite td{padding:3px; border-bottom:1px solid #e5e5e5;}
#sub.event_invite table.invite td b{color:#000000; font-size:14px; }
#sub.event_invite table.invite thead tr{background-color: #ffffff;}


#wrap.game #naverPay{text-align: center; margin-top:15px;}
#wrap.game #naverPay .ico img{width:80px;}
#wrap.game #naverPay p.current{font-size:18px; font-weight: 600; letter-spacing: 0px; color:#000000;}
#wrap.game #naverPay p.end{font-size:18px; font-weight: 600; letter-spacing: 0px; color:#000000;}
#wrap.game #naverPay p.current b{font-size:20px;}




/*스토어*/
#sub.store{padding-bottom:0px; background-color: #8ee1ff;}
#sub.store .list{margin-bottom:20px;}
#sub.store .list ul{overflow: hidden;}
#sub.store .list li{width:31%; margin:2% 1.1%; float:left; text-align: center; }
#sub.store .list li .box{background-color: #ffffff; padding:5px; border-radius: 10px; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .2); overflow: hidden;}
#sub.store .list li .box .inner{padding:5px; border:1px solid #e0e0e0; border-radius: 10px; position: relative; overflow: hidden;}
#sub.store .list li .box span.remit{font-size:12px; font-weight:600; border-radius:15px; position: absolute; width:100%; top:0px; left:0px; z-index: 5; background-color: #ff0000; color:#ffffff; text-align: center;}
#sub.store .list li .box p{font-size:12px; position: relative;}
#sub.store .list li .box p.img img{width:85%; max-width:100px;}
#sub.store .list li .box p.title{height:33px; line-height:15px; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break:keep-all; overflow:hidden;}
#sub.store .list li .box p.price{font-size:13px; padding-left:8px; font-weight: 600;}
#sub.store .list li .box p.price:before{width:18px; height:18px; top:2px; left:0%; background-image: url('https://dbins2.speedgabia.com/jjansun/images/ico_salt.png'); position: absolute;background-size: contain; background-repeat: no-repeat; background-position: center; content: ""; display: block;}
#sub.store .list li button{font-size:14px; line-height:28px; margin-top:7px; margin-bottom:2px; border-radius:5px; width:100%; background-color: #5083f1; color:#ffffff;}
#sub.store .list li .bar{height:5px; border-radius:2px; background-color: #ffffff; position: relative; overflow: hidden;}
#sub.store .list li .bar span{position: absolute; width:100%; height:100%; top:0px; left:0px; border-radius:2px; background-color: #fd7bfd;}
#sub.store .list li p.remain{font-size:13px; letter-spacing: -1px;}
#sub.store .list li p.remain b{}
#sub.store .notice{background-color: #f4f4f4; color:#1a1a1a; padding:20px 10px;}
#sub.store .notice p{font-size:12px; margin:5px 0px;}


/*애드센스*/
.adsense{}
#banner1{position: fixed; bottom:0px; left:50%; margin-left:345px;} /*공통(PC)_우측배너*/
#wrap.game #banner1{margin-left:230px;} /*공통(PC)_우측배너(게임)*/
#banner2{width:100%; max-height:60px; margin-bottom:20px; border-radius: 0px; text-align:center; overflow: hidden; } /*메인_상단배너*/
#banner3{width:100%; max-height:60px; margin-bottom:10px; border-radius: 0px; text-align:center; overflow: hidden; } /*메인_하단배너*/
#banner4{} /*로그인_배너*/



/*운수대통 이벤트*/
@font-face { font-family: 'DungGeunMo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff'); font-weight: normal; font-style: normal; }
#sub.event_lucky{background-color: #ecead9;}
#sub.event_lucky .wrap{padding:0px;}
#sub.event_lucky .top{position: relative;}
#sub.event_lucky .top .btn{font-size:0px; width:8%; height:11%; top:4%; right:0%; position: absolute; z-index: 2;}
#sub.event_lucky .top .shareKakao.btn{right:9.5%;}
#sub.event_lucky .top .shareFacebook.btn{right:1.5%;}
#sub.event_lucky .box{margin:20px 0px;}
#sub.event_lucky .box p{font-size:14px; font-weight:600; text-align: center;}
#sub.event_lucky .box .score{font-size:45px; width:160px; border-radius:10px; margin:0px auto; margin-bottom:5px; font-family: 'DungGeunMo'; text-align: center; background-color: #000000; color:#ffffff;}
#sub.event_lucky .box .btn{width:160px; font-size:18px !important; padding: 0.5em 1em; border-radius:10px; margin:0px auto; display: block; font-weight: bold;}
#sub.event_lucky .rankWrap{font-size:12px; padding-bottom:20px; width:90%; margin:0px auto; }
#sub.event_lucky table.rank{border-radius:7px; width:100%; overflow:hidden; border-bottom:1px solid #2a2a2a; background-color:#ffffff; text-align: center; border-spacing:0; border-collapse:collapse; padding:0px; word-break: break-all;}
#sub.event_lucky table.rank th{font-size:13px; padding:5px; color:#ffffff; font-weight: 500; background-color: #6c79e0;}
#sub.event_lucky table.rank td{padding:5px 4px; color:#2a2a2a; border-bottom:1px dashed #cdcdcd;}
#sub.event_lucky table.rank tr:nth-child(even) td{background-color: #f0f0f0;}
#sub.event_lucky table.rank td.score{font-weight: 600;}
#sub.event_lucky table tr:nth-child(10) td{border-bottom:1px dashed #555555;}
#sub.event_lucky table tr:nth-child(20) td{border-bottom:1px dashed #555555;}
#sub.event_lucky table.rank td img{width:23px; height:23px; margin-top:-2px; border-radius:50%; margin-right:5px; background-color: white;}
#sub.event_lucky table.rank td span{width:28px; height:22px; margin-left:5px; display: inline-block; vertical-align: -8px; background-size: contain; background-repeat: no-repeat;}
#sub.event_lucky table.rank td span.lev1{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level1.png');}
#sub.event_lucky table.rank td span.lev2{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level2.png');}
#sub.event_lucky table.rank td span.lev3{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level3.png');}
#sub.event_lucky table.rank td span.lev4{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level4.png');}
#sub.event_lucky table.rank td span.lev5{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level5.png');}
#sub.event_lucky table.rank td span.lev6{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level6.png');}
#sub.event_lucky table.rank td span.lev7{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level7.png');}
#sub.event_lucky table.rank td span.lev8{background-image:url('https://dbins2.speedgabia.com/jjansun/images/ico_level8.png');}
#sub.event_lucky .notice{margin:10px 0px; padding:20px; background-color: #f1f1f1;}
#sub.event_lucky .notice p{font-size:12px; margin:3px 0px;}
#sub.event_lucky .notice p.strong{font-size:14px; font-weight: 600;}






/*PC*/
@media (min-width: 700px){
	#footer{text-align: center;}
	#footer p.top span a{padding:3px 7px;}
	#scrollTop{left:50%; margin-left:290px;}
	
	#sub h2{font-size:24px;}
	#sub h2 img{margin-top:6px;}
	#sub h2 span{font-size:16px;}
	
    #sub.accumulate .game li a{height:130px;}
    #sub.accumulate .game li.complete a:before{width:90px; height:70px; margin-left:-40px;}
    #sub.accumulate .game li a p.x2{width:30px; height:30px; border: 2px solid #747474;}
    
    #sub.use .game li a{height:190px;}
    
    #sub.cs .tabContainer .tabHead li a{font-size:16px; line-height:33px;}
    #sub.cs .faq table{font-size:13px;}
    #sub.cs .faq table tr.answer td{font-size:14px;}
    
    #sub.store .list li{width:23%; margin:2% 1%;}

}