#lineagemDb { width: 710px; padding-bottom: 16px; font-size:12px; }
#lineagemDb .hidden { display: none !important; }
#lineagemDb .text { color: #fff; text-shadow: 0 -1px black, 1px 0 black, 0 1px black, -1px 0 black; }
#lineagemDb,
#lineagemDbGacha,
#lineagemDbGachaResult { display: block; overflow: hidden; float: none; clear: both; margin-left: auto; margin-right: auto; }
#lineagemDbGacha,
#lineagemDbGachaResult { font-family: 'Malgun Gothic', 'Noto Sans', 'gulim'; }
#lineagemDbGacha { position: relative; width: 708px; _width: 710px; height: 450px; _height: 452px; border: 1px solid #000; background: #000 url('./images/bg_708x708.jpg') center top no-repeat; }

#lineagemDbGacha div.title { position: absolute; top: 8px; left: 0px; width: 100%; height: 72px; background: url('./images/bg_title_708x72.png') center top no-repeat; }
#lineagemDbGacha div.title .text { display: block; float: none; clear: both; height: 72px; overflow: hidden; background-position: center center; background-repeat: no-repeat; margin: 0 auto; }
#lineagemDbGacha div.title dl.text { position: relative; box-sizing: content-box; padding: 0 30px; }
#lineagemDbGacha div.title dl.text dt,
#lineagemDbGacha div.title dl.text dd { display: block; margin: 0; padding: 0; position: absolute; top: 32px; width: 11px; height: 11px; background: url('./images/text_bullet_11x11.png') 0px 0px no-repeat; }
#lineagemDbGacha div.title dl.text dt { left: 0px; }
#lineagemDbGacha div.title dl.text dd { right: 0px; }
#lineagemDbGacha div.title .text-gacha-result { width: 100px; background-image: url('./images/text_gacha_result_100x28.png'); }
#lineagemDbGacha div.title .text-gacha-polymorph { width: 96px; background-image: url('./images/text_gacha_polymorph_96x28.png'); }
#lineagemDbGacha div.title .text-gacha-magicdoll { width: 146px; background-image: url('./images/text_gacha_magicdoll_146x30.png'); }

#lineagemDbGacha div.footer { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 66px; background: url('./images/bg_footer_708x66.png') center top no-repeat; }
#lineagemDbGacha div.footer div.info { display: block; float: none; clear: both; text-align: right; font-weight: bold; color: #dfdbcb; font-size: 15px; line-height: 76px; padding-right: 160px; }
#lineagemDbGacha div.footer div.info span { display: inline-block; padding: 0 0 0 38px; color: #c39750; background: url('./images/icon_gem_24x18.png') 12px 30px no-repeat; }

#lineagemDbGacha div.footer div.button { position: absolute; top: 23px; right: 32px; width: 92px; height: 30px; color: #dee6ef; font-size: 15px; font-weight: bold; line-height: 33px; background: url('./images/btn_blue_92x31.png') 0px 0px no-repeat; cursor: pointer; text-align: center; overflow: hidden; }

#lineagemDbGacha table.loading { table-layout: fixed; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
#lineagemDbGacha table.loading td { width: 100%; height: 100%; text-align: center; font-family: 'Malgun Gothic', 'Noto Sans', 'gulim'; font-size: 18px; font-weight: bold; padding: 0; color: #dfdbcb; }

#lineagemDbGacha div.board { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

#lineagemDbGacha .card { position: relative; width: 180px; height: 180px; }
#lineagemDbGacha .card .aura { position: absolute; left: 0; top: 0; width: 180px; height: 180px; overflow: hidden; }
#lineagemDbGacha .card .slot { position: relative; width: 82px; height: 100px; overflow: hidden; background: url('./images/card_slot_82x100.png') 0px 0px no-repeat; }
#lineagemDbGacha .card-rarity1 div.result div.slot,
#lineagemDbGacha .card .slot-rarity1 { background-position: -82px 0px; }
#lineagemDbGacha .card-rarity2 div.result div.slot,
#lineagemDbGacha .card .slot-rarity2 { background-position: -164px 0px; }
#lineagemDbGacha .card-rarity3 div.result div.slot,
#lineagemDbGacha .card .slot-rarity3 { background-position: -246px 0px; }
#lineagemDbGacha .card-rarity4 div.result div.slot,
#lineagemDbGacha .card .slot-rarity4 { background-position: -328px 0px; }
#lineagemDbGacha .card .slot img { position: absolute; top: 0px; left: 2px; width: 77px; height: 98px; border: none; }

#lineagemDbGacha .card .slot .aura-small { position: absolute; top: -14px; left: -23px; width: 128px; height: 128px; overflow: hidden; background-position: 0px 0px; background-repeat: no-repeat; opacity: 0.5; }
#lineagemDbGacha .card-rarity1 .slot .aura-small { background-image: url('./images/card_aura_gray_128x128.png'); }
#lineagemDbGacha .card-rarity2 .slot .aura-small { background-image: url('./images/card_aura_green_128x128.png'); }
#lineagemDbGacha .card-rarity3 .slot .aura-small { background-image: url('./images/card_aura_blue_128x128.png'); }
#lineagemDbGacha .card-rarity4 .slot .aura-small { background-image: url('./images/card_aura_red_128x128.png'); }

#lineagemDbGacha .card dl.back { display: none; margin: 0; padding: 0; background: url('./images/card_aura_gray_180x180.png') 0px 0px no-repeat; }
#lineagemDbGacha .card dl.back dt { display: block; position: absolute; left: 50%; top: 50%; width: 82px; height: 100px; margin: -50px 0 0 -41px; padding: 0; overflow: hidden; background: url('./images/card_back_82x100.png') 0px 0px no-repeat; }
#lineagemDbGacha .card dl.back dd { cursor: pointer; display: block; position: absolute; left: 50%; top: 50%; width: 94px; height: 112px; margin: -56px 0 0 -47px; padding: 0; overflow: hidden; background: url('./images/card_slot_line_94x112.png') 0px 0px no-repeat; opacity: 0.5; }

#lineagemDbGacha .card div.roll { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -41px; }
#lineagemDbGacha .card div.roll div.items { width: 80px; height: 98px; margin: 1px; overflow: hidden; }
#lineagemDbGacha .card div.roll div.items ul { display: block; height: 100px; overflow: hidden; float: none; clear: both; margin-top: -1px; }
#lineagemDbGacha .card div.roll div.items ul li.slot { display: block; float: left; }
#lineagemDbGacha .card div.roll div.effect { display: none; position: absolute; left: 0; top: 0; width: 82px; height: 100px; }
#lineagemDbGacha .card div.roll div.effect div { width: 3280px; height: 100px; background-position: 0px 0px; background-repeat: no-repeat; }
#lineagemDbGacha .card div.roll div.effect div.lightning1 { display: none; background-image: url('./images/effect_lightning_blue_82x100.png'); }
#lineagemDbGacha .card div.roll div.effect div.lightning2 { display: none; background-image: url('./images/effect_lightning_red_82x100.png'); }
#lineagemDbGacha .card div.roll-effect1 div.effect,
#lineagemDbGacha .card div.roll-effect2 div.effect,
#lineagemDbGacha .card div.roll-effect1 div.effect div.lightning1,
#lineagemDbGacha .card div.roll-effect2 div.effect div.lightning2 { display: block; }

#lineagemDbGacha .card div.result { display: none; position: relative; width: 180px; height: 180px; overflow: hidden; }
#lineagemDbGacha .card div.result div.slot { position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -41px; }
#lineagemDbGacha .card div.result div.effect { position: absolute; left: 0px; top: -1px; width: 180px; height: 180px; overflow: hidden; opacity: 0.75; }
#lineagemDbGacha .card div.result div.effect div { display: none; width: 2880px; height: 180px; overflow: hidden; }
#lineagemDbGacha .card div.result div.effect div.blue { background: url('./images/card_slot_aura_blue_180x180.png') 0px 0px no-repeat; }
#lineagemDbGacha .card div.result div.effect div.red { background: url('./images/card_slot_aura_red_180x180.png') 0px 0px no-repeat; }
#lineagemDbGacha .card-rarity3 div.result div.effect div.blue { display: block; }
#lineagemDbGacha .card-rarity4 div.result div.effect div.red { display: block; }
#lineagemDbGacha .card div.result div.outline { display: none; position: absolute; left: 50%; top: 50%; width: 94px; height: 112px; margin: -56px 0 0 -47px; overflow: hidden; background: url('./images/card_slot_line_94x112.png') 0px 0px no-repeat; opacity: 0.75; }
#lineagemDbGacha .card-rarity3 div.result div.outline { display: block; background-position: -282px 0px; }
#lineagemDbGacha .card-rarity4 div.result div.outline { display: block; background-position: -376px 0px; }

#lineagemDbGacha .card div.result div.text { display: none; width: 120px; height: 20px; overflow: hidden; line-height: 20px; text-align: center; position: absolute; left: 30px; bottom: 16px; font-weight: bold;  letter-spacing: -1px; color: #848484; font-size: 12px; }
#lineagemDbGacha .card-rarity2 div.result div.text { color: #268a14; }
#lineagemDbGacha .card-rarity3 div.result div.text { color: #1b76a8; }
#lineagemDbGacha .card-rarity4 div.result div.text { color: #c2212b; }

#lineagemDbGacha .card div.card-shine { width: 106px; height: 123px; position: absolute; left: 50%; top: 50%; margin: -62px 0 0 -52px; overflow: hidden; background: url('./images/card_shine2_106x123.png') 0px 0px no-repeat; }

#lineagemDbGacha .card-turnover * { display: none !important; }
#lineagemDbGacha .card-turnover dl.back,
#lineagemDbGacha .card-turnover dl.back * { display: block !important; }

#lineagemDbGacha .card-result div.result,
#lineagemDbGacha .card-result div.result div.text,
#lineagemDbGacha .card-result div.result div.effect,
#lineagemDbGacha .card-result div.result div.effect div.holder,
#lineagemDbGacha .card-result div.result div.outline { display: block; }
#lineagemDbGacha .card-result div.roll { display: none; }

#lineagemDbGacha ul.cards { position: relative; display: block; width: auto; height: 300px; margin: 82px auto 0 auto; padding: 0 134px 0 14px; float: none; clear: both; box-sizing: border-box; }
#lineagemDbGacha ul.cards li.card { display: block; margin: -20px -34px; padding: 0; float: left; }
#lineagemDbGacha div.card-bonus { position: absolute; left: 50%; top: 50%; margin: -95px 0 0 189px; }
#lineagemDbGacha div.card-bonus-text,
#lineagemDbGacha div.card-bonus-text-vertical { position: absolute; top: 50%; left: 50%; background-position: 0px 0px; background-repeat: no-repeat; }
#lineagemDbGacha div.card-bonus-text { width: 124px; height: 36px; margin: -95px 0 0 217px; background-image: url('./images/text_bonus_124x36.png'); }
#lineagemDbGacha div.card-bonus-text-vertical { display: none; width: 36px; height: 124px; background-image: url('./images/text_bonus_36x124.png'); }

#lineagemDbGachaResult { position: relative; width: 708px; _width: 710px; height: 310px; _height: 452px; border: 1px solid #000; background: #000 url('./images/bg_708x708.jpg') center top no-repeat; margin-top: 16px; }
#lineagemDbGachaResult div.header { position: absolute; top: 0px; left: 0px; width: 100%; height: 60px; padding-top: 6px; background: url('./images/bg_header_708x66.png?v=2') center bottom no-repeat; text-align: center; color: #dfdbcb; font-size: 14px; font-weight: bold; line-height: 1.5; }
#lineagemDbGachaResult div.header span.dia { color: #c39750; }

#lineagemDbGachaResult ul.buttons { position: absolute; left: 0px; top: 64px; width: 130px; height: 238px; overflow: hidden; display: block; margin: 0; padding: 0; float: none; clear: both; }
#lineagemDbGachaResult ul.buttons li,
#lineagemDbGachaResult ul.buttons li div { display: block; clear: both; float: none; overflow: hidden; width: 130px; height: 47px; margin: 0; padding: 0; }
#lineagemDbGachaResult ul.buttons li div { position: relative; background: url('./images/btn_rarity_120x47.png') 0px 0px no-repeat; text-align: center; line-height: 47px; cursor: pointer; font-weight: bold; font-size: 14px; color: #848484; }
#lineagemDbGachaResult ul.buttons li.selected div { background-position: 0 -46px; color: #fff7c3; }
#lineagemDbGachaResult ul.buttons li.selected div.rarity1 { background-position: 0 -93px; color: #e1e1e1; }
#lineagemDbGachaResult ul.buttons li.selected div.rarity2 { background-position: 0 -140px; color: #268a14; }
#lineagemDbGachaResult ul.buttons li.selected div.rarity3 { background-position: 0 -187px; color: #1b76a8; }
#lineagemDbGachaResult ul.buttons li.selected div.rarity4 { background-position: 0 -234px; color: #c2212b; }

#lineagemDbGachaResult div.items { display: block; box-sizing: border-box; width: auto; height: 243px; margin: 61px 7px 0 130px; overflow: hidden; overflow-y: scroll; float: none; clear: both; background-color: rgba(0, 0, 0, 0.25); border-radius: 5px; }
#lineagemDbGachaResult div.items div { position: relative; width: 60px; height: 73px; float: left; overflow: hidden; background: url('./images/card_slot_60x73.png') -60px 0px no-repeat; text-align: center; margin: 4px; }
#lineagemDbGachaResult div.items div.rarity2 { background-position: -120px 0px; }
#lineagemDbGachaResult div.items div.rarity3 { background-position: -180px 0px; }
#lineagemDbGachaResult div.items div.rarity4 { background-position: -240px 0px; }
#lineagemDbGachaResult div.items div img { width: 59px; height: 72px; border: none; }
#lineagemDbGachaResult div.items div span { position: absolute; right: 3px; bottom: 2px; color: #dfdbcb; font-weight: bold; font-size: 12px; }
#lineagemDbGachaResult.rarity-filter1 div.items div.rarity2,
#lineagemDbGachaResult.rarity-filter1 div.items div.rarity3,
#lineagemDbGachaResult.rarity-filter1 div.items div.rarity4,
#lineagemDbGachaResult.rarity-filter2 div.items div.rarity1,
#lineagemDbGachaResult.rarity-filter2 div.items div.rarity3,
#lineagemDbGachaResult.rarity-filter2 div.items div.rarity4,
#lineagemDbGachaResult.rarity-filter3 div.items div.rarity1,
#lineagemDbGachaResult.rarity-filter3 div.items div.rarity2,
#lineagemDbGachaResult.rarity-filter3 div.items div.rarity4,
#lineagemDbGachaResult.rarity-filter4 div.items div.rarity1,
#lineagemDbGachaResult.rarity-filter4 div.items div.rarity2,
#lineagemDbGachaResult.rarity-filter4 div.items div.rarity3 { display: none !important; }

#lineagemDb.mobile { width: auto; padding: 0px; margin: 10px 10px; }
#lineagemDb.mobile h3.dbTitle { display: none !important; }
#lineagemDb.mobile #lineagemDbGacha,
#lineagemDb.mobile #lineagemDbGachaResult { width: auto; max-width: 708px; margin: 0 auto; }
#lineagemDb.mobile #lineagemDbGachaResult { margin-top: 10px; }

@media screen and (min-width: 640px) and (max-width: 729px) {
	#lineagemDb.mobile #lineagemDbGacha { height: 420px; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards { width: 615px; height: 280px; padding: 0 105px 0 0px; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards li.card { margin-top: -26px; margin-left: -39px; margin-right: -39px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus { margin: -87px 0 0 164px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text { margin: -87px 0 0 192px; }
}
@media screen and (min-width: 454px) and (max-width: 639px) {
	#lineagemDb.mobile #lineagemDbGacha { height: 560px; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards { width: 432px; height: 420px; padding: 0; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards li.card { margin-top: -26px; margin-left: -36px; margin-right: -36px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus { margin: 43px 0 0 72px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text { display: none; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text-vertical { display: block; margin: 69px 0 0 82px; }
}
@media screen and (min-width: 360px) and (max-width: 454px) {
	#lineagemDb.mobile #lineagemDbGacha { height: 695px; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards { width: 338px; height: 546px; padding: 0 0 0 7px; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards li.card { margin-top: -26px; margin-left: -36px; margin-right: -36px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus { margin: 110px 0 0 18px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text { display: none; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text-vertical { display: block; margin: 136px 0 0 28px; }
}
@media screen and (max-width: 359px) {
	#lineagemDb.mobile { margin: 10px 0; }
	#lineagemDb.mobile #lineagemDbGacha { height: 695px; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards { width: 300px; height: 546px; padding: 0; }
	#lineagemDb.mobile #lineagemDbGacha ul.cards li.card { margin-top: -26px; margin-left: -40px; margin-right: -40px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus { margin: 110px 0 0 11px; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text { display: none; }
	#lineagemDb.mobile #lineagemDbGacha div.card-bonus-text-vertical { display: block; margin: 136px 0 0 21px; }
}
@media screen and (max-width: 400px) {
	#lineagemDb.mobile #lineagemDbGacha div.footer div.info { display: none; }
	#lineagemDb.mobile #lineagemDbGacha div.footer div.button { position: static; left: auto; right: auto; margin: 24px auto 0 auto; }
	#lineagemDb.mobile #lineagemDbGachaResult div.items { margin: 61px 5px 0 127px; }
}