/* COMMON */ /* HIDE PC LAYOUT */ #qurareDb .qurareDbCommonTitle, #qurareDb .qurareDbCommonTop, #qurareDb .qurareDbCommonSearch { display: none; } /* RIGHT MENU */ #rightSlidingMenu ul.mainBttns li span, #rightSlidingMenu ul.bttns li span { border-radius: 0px; box-shadow: none; } #rightSlidingMenu ul li.title { color: #000000; border-top: 1px solid #fdd901; border-bottom: 1px solid #fdd901; background: #fdd901; background: -moz-linear-gradient(left, #fdd901 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdd901), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: -o-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: -ms-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: linear-gradient(to right, #fdd901 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdd901', endColorstr='#ffffff',GradientType=1 ); } /* BOTTOM MENU */ .bottomMenu { width: 30px; height: 30px; background-color: #3e3e3e; color: white; text-align: center; position: fixed; right: 10px; bottom: 60px; border: 1px solid #939393; } .bottomMenu ul { float: none; text-align: center; } .bottomMenu ul li { display: inline; font-size: 0.7em; } .bottomMenu ul li.last { border-right: none; } .bottomMenu ul li a { color: #e2e2e2; padding: 10px 7px; } /* CARD */ /* LIST */ #qurareDb #qurareDbCardEvolveFilter, #qurareDb .qurareDbCardList { display: none; } #qurareDb .qurareDbCardList .cardStarRarity { display: inline-block; } #qurareDb .qurareDbCardList table { width: 100%; } #qurareDb .qurareDbCardList table col.icon { width: 48px; } #qurareDb .qurareDbCardList table col.name { width: auto; } #qurareDb .qurareDbCardList table col.cost { width: 28px; } #qurareDb .qurareDbCardList table col.role { width: 40px; } #qurareDb .qurareDbCardList table col.fonticon { width: 52px; } #qurareDb .qurareDbCardList table col.level { width: 5%; min-width: 20px; } #qurareDb .qurareDbCardList table col.stat { width: 7%; min-width: 50px; } #qurareDb .qurareDbCardList table th, #qurareDb .qurareDbCardList table td { border-top: 1px solid #a1a2a5; font-size: 14px; } #qurareDb .qurareDbCardList table th { border-right: 1px solid #a1a2a5; background-color: #f1f1f1; padding: 1px 0; } #qurareDb .qurareDbCardList table th.first { border-left: 1px solid #a1a2a5; } #qurareDb .qurareDbCardList table tr.th2 th, #qurareDb .qurareDbCardList table tr th.th2 { background-color: #e9e9e9; } #qurareDb .qurareDbCardList table td { text-align: center; height: 55px; } #qurareDb .qurareDbCardList table td.name { text-align: left; line-height: 1.2em; padding-left: 4px; } #qurareDb .qurareDbCardList table td.name .cardStarRarity { background-position: left bottom; height: 19px; } #qurareDb .qurareDbCardList table td img { margin-top: 6px; } #qurareDb .qurareDbCardList table td img.icon { width: 44px; height: 44px; } #qurareDb .qurareDbCardList table td img.evole1, #qurareDb .qurareDbCardList table td img.evole2 { display: none; } #qurareDb .qurareDbCardList table td img.role { width: 22px; height: 22px; } #qurareDb .qurareDbCardList table td img.faction, #qurareDb .qurareDbCardList table td img.skilltype { width: 43px; height: 15px; } #qurareDb .qurareDbCardList table .wide-view, #qurareDb .qurareDbCardList table .mid-view { display: none; } #qurareDb .qurareDbCardList table tr.wide-view-hidden { display: table-row !important; } @media screen and (min-width:400px) { #qurareDb .qurareDbCardList table col.cost { width: 48px; } #qurareDb .qurareDbCardList tr.mid-view { display: table-row; } #qurareDb .qurareDbCardList th.mid-view, #qurareDb .qurareDbCardList td.mid-view { display: table-cell; } #qurareDb .qurareDbCardList span.mid-view { display: inline; } } @media screen and (min-width:615px) { #qurareDb .qurareDbCardList tr.wide-view { display: table-row; } #qurareDb .qurareDbCardList th.wide-view, #qurareDb .qurareDbCardList td.wide-view { display: table-cell; } #qurareDb .qurareDbCardList span.wide-view { display: inline; } #qurareDb .qurareDbCardList th.wide-view { height: auto; } #qurareDb .qurareDbCardList table tr.wide-view-hidden { display: none !important; } } /* DETAIL */ #qurareDb .qurareDbCommonDetail { width: 100%; } #qurareDb .qurareDbCommonDetail .infoLeft { background-color: #fff; border: 1px solid #a1a2a5; padding: 5px 5px; background-color: #e5e6e7; clear: both; } #qurareDb .qurareDbCommonDetail .infoLeft ul { width: 100%; clear: both; background-color: #e5e6e7; } #qurareDb .qurareDbCommonDetail .infoLeft ul li { width: 33%; float: left; cursor: pointer; text-align: center; } #qurareDb .qurareDbCommonDetail .infoLeft ul li.tab1 { width: 34%; padding: 0; } #qurareDb .qurareDbCommonDetail .infoLeft ul li span { display: block; font-weight: bold; text-align: center; padding: 5px 0; background-color: #e5e6e7; border-bottom: 1px solid #a1a2a5; } #qurareDb .qurareDbCommonDetail .infoLeft ul li.selected span { background-color: #fff; border: 1px solid #a1a2a5; border-bottom: 0px none; } #qurareDb .qurareDbCommonDetail .infoLeft ul li.disabled { cursor: default; } #qurareDb .qurareDbCommonDetail .infoLeft ul li.disabled span { color: #888; } #qurareDb .qurareDbCommonDetail .infoLeft .containerWrap { text-align: center; background-color: #fff; border: 1px solid #a1a2a5; } #qurareDb .qurareDbCommonDetail .infoLeft .container { margin: 0 auto; clear: both; padding: 5px 5px 0 5px; } #qurareDb .qurareDbCommonDetail .infoRight { width: 100%; clear: both; } #qurareDb .qurareDbCommonDetail .infoRight .subtitle { font-size: 14px; color: #000000; border: 1px solid #fdd901; padding: 2px 6px; background: #fdd901; background: -moz-linear-gradient(left, #fdd901 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdd901), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: -o-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: -ms-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: linear-gradient(to right, #fdd901 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdd901', endColorstr='#ffffff',GradientType=1 ); } #qurareDb .qurareDbCommonDetail .infoRight .subtitle div, #qurareDb .qurareDbCommonDetail .infoRight .subtitle div span { height: 30px; overflow: hidden; background-image: url('//static.inven.co.kr/image_2011/qurare/dataninfo/card/subtitle_mobile.png'); background-repeat: no-repeat; } #qurareDb .qurareDbCommonDetail .infoRight .subtitle { margin-top: 10px; background-position: left top; background-repeat: repeat-x; } #qurareDb .qurareDbCommonDetail .infoRight .subtitle div { background-position: right -60px; } #qurareDb .qurareDbCommonDetail .infoRight .subtitle span { background-position: left -30px; display: block; height: 30px; padding-left: 10px; font-size: 15px; color: #fffefe; font-weight: bold; line-height: 30px; } #qurareDb .qurareDbCommonDetail .infoRight .wrap { border: 1px solid #a1a2a5; padding: 5px 5px; clear: both; } #qurareDb .qurareDbCommonDetail .infoRight table { width: 100%; border: 1px solid #a1a2a5; border-bottom: 0px none; } #qurareDb .qurareDbCommonDetail .infoRight table th { background-color: #e5e6e7; font-weight: bold; letter-spacing: -1px; } #qurareDb .qurareDbCommonDetail .infoRight table th, #qurareDb .qurareDbCommonDetail .infoRight table td { padding: 5px 4px; border-bottom: 1px solid #a1a2a5; } #qurareDb .qurareDbCommonDetail .infoRight table.borderall { border-top: 0px none; border-right: 0px none; } #qurareDb .qurareDbCommonDetail .infoRight table.borderall th, #qurareDb .qurareDbCommonDetail .infoRight table.borderall td { border-right: 1px solid #a1a2a5; border-bottom: 1px solid #a1a2a5; } #qurareDb .qurareDbCommonDetail .infoRight table col.th { width: 22%; } #qurareDb .qurareDbCommonDetail .infoRight table col.td { width: 28%; } #qurareDb .qurareDbCommonDetail .infoRight table.borderall col { width: 20% !important; } #qurareDb .qurareDbCommonDetail .infoRight table.borderall td { text-align: center; } #qurareDb .qurareDbCommonDetail .infoRight table .stat { display: none; } #qurareDb .qurareDbCommonDetail .title600BU1 { font-size: 14px; color: #000000; border: 1px solid #fdd901; padding: 2px 6px; background: #fdd901; background: -moz-linear-gradient(left, #fdd901 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdd901), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: -o-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: -ms-linear-gradient(left, #fdd901 0%,#ffffff 100%); background: linear-gradient(to right, #fdd901 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdd901', endColorstr='#ffffff',GradientType=1 ); margin-top: 10px; background-position: left top; background-repeat: repeat-x; } #qurareDb .qurareDbCommonDetail .viewBody { border: 1px solid #a1a2a5; padding: 5px 5px; clear: both; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant { width: 100%; height: 30px; clear: both; overflow: hidden; margin-bottom: 1px; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar { width: 235px; height: 30px; overflow: hidden; background: url('//static.inven.co.kr/image_2011/qurare/dataninfo/card/enchant_bar.png?v=2') left top no-repeat; float: left; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .overenchantBar { width: 274px; height: 30px; overflow: hidden; background: url('//static.inven.co.kr/image_2011/qurare/dataninfo/card/overenchant_bar.png') left top no-repeat; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar ul { width: 180px; height: 26px; margin: 2px 0 0 46px; overflow: hidden; padding-left: 2px; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .overenchantBar ul { width: 219px; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar ul li { width: 27px; height: 26px; cursor: pointer; overflow: hidden; margin-left: -2px; float: left; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar ul li.enchantBttn0 { width: 47px; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar ul li div { width: 27px; height: 52px; cursor: pointer; overflow: hidden; background: url('//static.inven.co.kr/image_2011/qurare/dataninfo/card/enchant_button.gif') left top no-repeat; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar ul li.hover div { margin-top: -26px; visibility: visible !important; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantBar ul li.enchantBttn6 { margin-left: 10px; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 .enchantBar ul li.enchantBttn1 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 .enchantBar ul li.enchantBttn2 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 .enchantBar ul li.enchantBttn3 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 .enchantBar ul li.enchantBttn4 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 .enchantBar ul li.enchantBttn5 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 .enchantBar ul li.enchantBttn6 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 .enchantBar ul li.enchantBttn2 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 .enchantBar ul li.enchantBttn3 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 .enchantBar ul li.enchantBttn4 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 .enchantBar ul li.enchantBttn5 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 .enchantBar ul li.enchantBttn6 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant2 .enchantBar ul li.enchantBttn3 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant2 .enchantBar ul li.enchantBttn4 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant2 .enchantBar ul li.enchantBttn5 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant2 .enchantBar ul li.enchantBttn6 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant3 .enchantBar ul li.enchantBttn4 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant3 .enchantBar ul li.enchantBttn5 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant3 .enchantBar ul li.enchantBttn6 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant4 .enchantBar ul li.enchantBttn5 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant4 .enchantBar ul li.enchantBttn6 div, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant5 .enchantBar ul li.enchantBttn6 div { visibility: hidden; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .enchantStep { width: 45px; height: 24px; overflow: hidden; margin: 3px 0 0 0; background: url('//static.inven.co.kr/image_2011/qurare/dataninfo/card/divide5.png') right 4px no-repeat; float: right; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchant .number { width: 20px; height: 24px; overflow: hidden; background: url('//static.inven.co.kr/image_2011/qurare/dataninfo/card/number_0to6.png') 4px top no-repeat; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 .number { background-position: -22px 0; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant2 .number { background-position: -50px 0; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant3 .number { background-position: -77px 0; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant4 .number { background-position: -104px 0; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant5 .number { background-position: -130px 0; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant6 .number { background-position: -156px 0; } #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant0 td .enchant0, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant1 td .enchant1, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant2 td .enchant2, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant3 td .enchant3, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant4 td .enchant4, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant5 td .enchant5, #qurareDb .qurareDbCommonDetail #qurareDbCardEnchantWrap.enchant6 td .enchant6 { display: inline; } /* SKILL */ /* LIST */ /* SEARCH FROM */ #qurareDb .qurareDbSkillSearch { width: 100%; } /* LIST */ #qurareDb .qurareDbSkillList { width: 100%; } #qurareDb .qurareDbSkillList div.filter > div { width: 40%; margin: 10px 5%; float: left; } #qurareDb .qurareDbSkillList ul.tabs a, #qurareDb .qurareDbSkillList ul.skillTypes a, #qurareDb .qurareDbSkillList a.filterSelector { display: block; width: 100%; float: left; border: 1px solid #a5afb5; border-radius: 3px; text-align: center; cursor: pointer; padding: 3px 0 4px; font-weight: bold; letter-spacing: -1px; background-color: #f0f0f0; background-image: -webkit-gradient(linear,left top,left bottom,from(#f7f7f7),to(#cecece)); background-image: -moz-linear-gradient(top,#f7f7f7,#cecece); background-image: -o-linear-gradient(top,#f7f7f7,#cecece); background-image: linear-gradient(to bottom,#f7f7f7,#cecece); } #qurareDb .qurareDbSkillList ul.tabs, #qurareDb .qurareDbSkillList ul.skillTypes { display: none; margin-top: 5px; } #qurareDb .qurareDbSkillList ul.tabs li a.active, #qurareDb .qurareDbSkillList ul.skillTypes li a.active { color: #4C4CE7; } #qurareDb .qurareDbSkillList ul.skillGrades { width: 90%; margin: 0 auto; clear: both; } #qurareDb .qurareDbSkillList ul.skillGrades:after { content: " "; display: block; height: 0; clear: both; } #qurareDb .qurareDbSkillList ul.skillGrades li { float: left; width: 15%; margin-right: 2%; text-align: center; font-weight: bold; } #qurareDb .qurareDbSkillList ul.skillGrades li.all { display: none; } #qurareDb .qurareDbSkillList ul.skillGrades li:last-child { margin-right: 0; } #qurareDb .qurareDbSkillList ul.skillGrades li input { display: none; } #qurareDb .qurareDbSkillList ul.skillGrades li label { display: block; padding: 4px 0; cursor: pointer; border: 1px solid #dcdcdc; text-align: center; font-weight: bold; } #qurareDb .qurareDbSkillList ul.skillGrades li input:checked + label { background-color: #dcdcdc; border: 2px solid #666; } /*#qurareDb .qurareDbSkillList ul.skillGrades li label.*/ #qurareDb .qurareDbSkillList ul.bonusFilter { display: none; clear: both; } #qurareDb .qurareDbSkillList ul.bonusFilter li { float: left; } #qurareDb .qurareDbSkillList div.searchBttn, #qurareDb .qurareDbSkillList div.reset { width: 40%; margin: 10px 5%; float: left; } #qurareDb .qurareDbSkillList div.searchBttn a, #qurareDb .qurareDbSkillList div.reset a { display: block; border: 1px solid #000; font-weight: bold; padding: 5px 0; background-color: #ffc000; text-align: center; } #qurareDb .qurareDbSkillList div.table { clear: both; margin-top: 10px; padding: 10px; } #qurareDb .qurareDbSkillList div.table col.name { width: 90px; } #qurareDb .qurareDbSkillList div.table col.type { width: 0; } #qurareDb .qurareDbSkillList div.table col.desc { width: auto; } #qurareDb .qurareDbSkillList div.table col.cooltime, #qurareDb .qurareDbSkillList div.table col.casting, #qurareDb .qurareDbSkillList div.table col.stack, #qurareDb .qurareDbSkillList div.table col.viewCards { width: 0;} #qurareDb .qurareDbSkillList div.table table { border-collapse: collapse; width: 100%; } #qurareDb .qurareDbSkillList div.table table th, #qurareDb .qurareDbSkillList div.table table td { border: 1px solid #dcdcdc; padding: 5px 4px; } #qurareDb .qurareDbSkillList div.table table th { background-color: #f1f1f1; font-weight: bold; text-align: center; } #qurareDb .qurareDbSkillList div.table table td.name { text-align: center; font-weight: bold; } #qurareDb .qurareDbSkillList div.table td.name span { display: block; width: 43px; height: 15px; margin: 0 auto; background: transparent url('//static.inven.co.kr/image_2011/qurare/dataninfo/skill/icon_skill_type.png') left top no-repeat; text-indent: -99px; overflow: hidden; } #qurareDb .qurareDbSkillList div.table table td.name span.active { background-position: 0 -15px; } #qurareDb .qurareDbSkillList div.table table th.type, #qurareDb .qurareDbSkillList div.table table td.type { display: none; } #qurareDb .qurareDbSkillList div.table table td.desc span.leader { display: none; } #qurareDb .qurareDbSkillList div.table table th.desc ~ th { display: none; } #qurareDb .qurareDbSkillList div.table table td.desc ~ td { display: none; } #qurareDb .qurareDbSkillList div.table table tbody tr { display: none; } #qurareDb .qurareDbSkillList div.table table.lv1 tr.lv1, #qurareDb .qurareDbSkillList div.table table.lv2 tr.lv2, #qurareDb .qurareDbSkillList div.table table.lv3 tr.lv3, #qurareDb .qurareDbSkillList div.table table.lv4 tr.lv4, #qurareDb .qurareDbSkillList div.table table.lv5 tr.lv5, #qurareDb .qurareDbSkillList div.table table.lv6 tr.lv6, #qurareDb .qurareDbSkillList div.table table.lv7 tr.lv7, #qurareDb .qurareDbSkillList div.table table.lv8 tr.lv8, #qurareDb .qurareDbSkillList div.table table.lv9 tr.lv9 { display: table-row; } #qurareDb .qurareDbSkillList div.table table.active tr.passive, #qurareDb .qurareDbSkillList div.table table.passive tr.active { display: none; } #qurareDb .qurareDbSkillList div.table table.atk tr.def, #qurareDb .qurareDbSkillList div.table table.atk tr.heal { display: none; } #qurareDb .qurareDbSkillList div.table table.def tr.atk, #qurareDb .qurareDbSkillList div.table table.def tr.heal { display: none; } #qurareDb .qurareDbSkillList div.table table.heal tr.def, #qurareDb .qurareDbSkillList div.table table.heal tr.atk { display: none; } #qurareDb .qurareDbSkillList div.table table tfoot { display: none; } #qurareDb .qurareDbSkillList div.table table tfoot td { text-align: center; } #qurareDb .qurareDbSkillList div.table table tbody tr { cursor: pointer; } /* DETAIL */ #qurareDb .qurareDbSkillDetail table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } #qurareDb .qurareDbSkillDetail table th, #qurareDb .qurareDbSkillDetail table td { padding: 5px 4px; border: 1px solid #dcdcdc; } #qurareDb .qurareDbSkillDetail table th { font-weight: bold; background-color: #f1f1f1; text-align: center; padding-left: 0; padding-right: 0; } #qurareDb .qurareDbSkillDetail table th.span { background-color: #fdd901; text-align: left; text-indent: 10px; } #qurareDb .qurareDbSkillDetail table#skillDesc col.head { width: 60px; } #qurareDb .qurareDbSkillDetail table#skillDesc th span { display: block; } @media screen and (min-width:400px) { #qurareDb .qurareDbSkillDetail table#skillDesc col.head { width: 90px; } #qurareDb .qurareDbSkillDetail table#skillDesc th span { display: inline; } } #qurareDb .qurareDbSkillDetail table#skillCard { margin-bottom: 0; } #qurareDb .qurareDbSkillDetail table#skillInfo col { width: 20%; } #qurareDb .qurareDbSkillDetail table#skillInfo td { text-align: center; } #qurareDb .qurareDbSkillDetail table#skillInfo th span { display: block; } @media screen and (min-width:400px) { #qurareDb .qurareDbSkillDetail table#skillInfo th span { display: inline; } } #qurareDb .qurareDbSkillDetail table#skillCard td { padding: 11px 0; } #qurareDb .qurareDbSkillDetail table#skillCard td ul { width: 100%; } #qurareDb .qurareDbSkillDetail table#skillCard td ul li { float: left; width: 50px; height: 50px; margin-left: 11px; border: 1px solid #656565; } #qurareDb .qurareDbSkillDetail table#skillCard td ul li a {} #qurareDb .qurareDbSkillDetail table#skillCard td ul li a img {}