app.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. @charset "utf-8";
  2. /********** Global **********/
  3. html, body {
  4. width:100%;
  5. height:100%;
  6. min-height:635px;
  7. background-color:#0f1c30;
  8. background-repeat:no-repeat;
  9. background-position:center;
  10. background-size:100% 100%;
  11. overflow-x:hidden;
  12. overflow-y:auto;
  13. }
  14. body {margin:0 auto;min-width:375px;max-width:1920px;}
  15. body.bg01 {background-image:url("../img/bg01.png");}
  16. body.bg02 {background-image:url("../img/bg02.png");}
  17. body.bg03 {background-image:url("../img/bg03.png");}
  18. body.bg04 {background-image:url("../img/bg04.png");}
  19. .header {margin:0 auto;position:relative;width:100%;
  20. height:65px;max-width:1920px;
  21. background:url("../img/header.png") center no-repeat;box-sizing:border-box;}
  22. .header-title {
  23. margin:0;
  24. padding:0;
  25. line-height:50px;
  26. text-align:center;
  27. font-size:22px;
  28. color:#5dc2fe;
  29. }
  30. .wrapper {position:absolute;top:68px;bottom:0;left:0;right:0;min-height:555px;}
  31. /* PC */
  32. @media (max-width:1919px) {
  33. .header {height:65px;}
  34. .header-title {line-height:50px;font-size:22px;}
  35. .wrapper {top:68px;}
  36. }
  37. /* Mobile */
  38. @media (max-width:1279px) {
  39. .header-title {max-width:96%;}
  40. .wrapper {background:none;}
  41. }
  42. /********** Content **********/
  43. .content {
  44. display:-webkit-flex;
  45. display:-ms-flexbox;
  46. display:flex;
  47. height:100%;
  48. width:100%;
  49. min-height:100%;
  50. box-sizing:border-box;
  51. }
  52. .col {margin:0px 5px 0px;;height:100%;min-width:320px;}
  53. .col-l {-webkit-flex:1.5;-ms-flex:1.5;flex:1.5;}
  54. .col-c {-webkit-flex:4;-ms-flex:4;flex:4;}
  55. .col-r {-webkit-flex:1.5;-ms-flex:1.5;flex:1.5;}
  56. /* PC */
  57. @media (max-width:1919px) {
  58. .content {padding:10px 0;}
  59. }
  60. /* Mobile */
  61. @media (max-width:1279px) {
  62. .content {padding:10px 0;}
  63. .content {
  64. -webkit-flex-direction:column;
  65. -ms-flex-direction:column;
  66. flex-direction:column;
  67. }
  68. .col-l,
  69. .col-c,
  70. .col-r {-webkit-flex:none;-ms-flex:none;flex:none;}
  71. }
  72. .xpanel-wrapper {padding-bottom:5px;box-sizing:border-box;}
  73. .xpanel-wrapper {height:100%;width:100%}
  74. .xpanel-wrapper-25 {height:27.5%;}
  75. .xpanel-wrapper-30 {height:30%;}
  76. .xpanel-wrapper-40 {height:40%;}
  77. .xpanel-wrapper-45 {height:45%;}
  78. .xpanel-wrapper-60 {height:60%;}
  79. .xpanel-wrapper-75 {height:60%;}
  80. .xpanel-wrapper-55 {height:55%;}
  81. .xpanel {
  82. height:100%;
  83. min-height:100px;
  84. background-repeat:no-repeat;
  85. background-size:100% 100%;
  86. box-sizing:border-box;
  87. }
  88. .xpanel-m-c {background-image:url("../img/panel.png");}
  89. .xpanel-l-t {background-image:url("../img/panel.png");}
  90. .xpanel-l-b {background-image:url("../img/panel.png");}
  91. .xpanel-c-b {background-image:url("../img/panel.png");}
  92. .xpanel-r-t {background-image:url("../img/panel.png");}
  93. .xpanel-r-m {background-image:url("../img/panel.png");}
  94. .xpanel-r-b {background-image:url("../img/panel.png");}
  95. .xpanel .title {
  96. font-weight:normal;
  97. color:#fff;
  98. background-image:url("../img/title-bg.png");
  99. background-repeat:no-repeat;
  100. background-size:100% 100%;
  101. }
  102. .xpanel .bcontent {
  103. line-height:1;
  104. font-size:15px;
  105. text-align:left;
  106. height:95%;
  107. width:98%;
  108. color:#5dc2fe;
  109. }
  110. .xpanel .tcontent {
  111. line-height:1;
  112. font-size:15px;
  113. text-align:left;
  114. height:90%;
  115. width:98%;
  116. color:#5dc2fe;
  117. }
  118. .xpanel .no-bg {
  119. margin:15px;
  120. }
  121. .xpanel .bcontent ul,li{list-style:none;padding:0; margin:1px;}
  122. .xpanel .bcontent ul {
  123. margin-top:10px;
  124. clear: both;
  125. overflow: hidden;
  126. height:98%;
  127. }
  128. .xpanel .bcontent ul li {
  129. height: 20px;
  130. margin-bottom: 5px;
  131. float: left;
  132. font-size:12px;
  133. }
  134. .xpanel .bcontent ul li:nth-child(even) {
  135. margin-left: 4%;
  136. }
  137. .leftrt{
  138. width: 32%;
  139. text-align:right;
  140. color: #f1ebe5;
  141. font-weight: bold;
  142. }
  143. .rightrt{
  144. width: 63%;
  145. font-weight: bold;
  146. color: #f1ebe5;
  147. }
  148. .xpanel .title-long { padding-left:24px;background-image:url("../img/title-bg-long.png");}
  149. /* PC */
  150. @media (max-width:1919px) {
  151. .xpanel .title {padding-left:20px;height:36px;line-height:36px;font-size:16px;}
  152. .xpanel .bcontent{padding:5px 10px;}
  153. }
  154. /* tool */
  155. .fill-h {height:100% !important;min-height:100% !important;}
  156. .no-margin {margin:0 !important;}
  157. .no-padding {padding:0 !important;}
  158. .no-bg {background:none !important;}
  159. .no-border {border:0 !important;}
  160. /* scrollbar */
  161. ::-webkit-scrollbar {width:0;height:0;}
  162. ::-webkit-scrollbar-track {background-color:transparent;}
  163. ::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);}