portal-common/src/main/webapp/common/css/style-ict.css

   1 /**\r
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *         http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 @font-face {\r
  17   font-family: 'Lato';\r
  18   font-style: normal;\r
  19   font-weight: 400;\r
  20   src: local('Lato Regular'), local('Lato-Regular'), url(9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');\r
  21 }\r
  22 html, body, div, span, applet, object, blockquote, pre,\r
  23 a, abbr, acronym, address, big, cite, code,\r
  24 del, dfn, em, img, ins, kbd, q, s, samp,\r
  25 small, strike, strong, sub, sup, tt, var,\r
  26 b, u, i, center,\r
  27 dl, dt, dd, ol, ul, li,\r
  28 fieldset, form, label, legend,\r
  29 table, caption, tbody, tfoot, thead, tr, th, td,\r
  30 article, aside, canvas, details, embed, \r
  31 figure, figcaption, footer, header, hgroup, \r
  32 menu, nav, output, ruby, section, summary,\r
  33 time, mark, audio, video {\r
  34         margin: 0;\r
  35         padding: 0;\r
  36         border: 0;\r
  37         font-size: 1em;\r
  38         vertical-align: baseline;\r
  39 }\r
  40 /* HTML5 display-role reset for older browsers */\r
  41 article, aside, details, figcaption, figure, \r
  42 footer, header, hgroup, menu, nav, section {\r
  43         display: block;\r
  44 }\r
  45 body {\r
  46         background: rgba(231, 231, 231, 0.43);\r
  47         line-height: 1.125em;\r
  48         color: white;\r
  49         max-width: 1920px;\r
  50         margin: 0 auto;\r
  51         position: relative;\r
  52         font-family: 'Lato', Helvetica, Arial, Tahoma;\r
  53         text-shadow: 1px 1px 0 rgba(0,0,0,0.3);\r
  54 }\r
  55 ol, ul {\r
  56         padding: 0 10px;\r
  57         margin: 0 10px;\r
  58         line-height: 1.5em;\r
  59 }\r
  60 h1, h2, h3, h4, h5, h6 {\r
  61         text-shadow: 1px 1px 0 rgba(0,0,0,0.5);\r
  62         font-family: 'Lato', Georgia, Helvetica, Tahoma;\r
  63         margin: 10px 0;\r
  64         font-weight: normal;\r
  65 }\r
  66 h1 {\r
  67         font-size: 1.875em;\r
  68 }\r
  69 h2 {\r
  70         font-size: 1.6em;\r
  71         line-height: 1em;\r
  72 }\r
  73 h3 {\r
  74         font-size: 1.25em;\r
  75 }\r
  76 h4 {\r
  77         font-size: 1.125em;\r
  78 }\r
  79 h5 {\r
  80         font-size: 1em;\r
  81 }\r
  82 h6 {\r
  83         font-size: 0.875em;\r
  84 }\r
  85 a {\r
  86         text-decoration: none;\r
  87         color: white;\r
  88 }\r
  89 a:hover {\r
  90         color: white;\r
  91         opacity: 0.9;\r
  92 }\r
  93 a:visited {\r
  94         color: white;\r
  95 }\r
  96 h2 {\r
  97         cursor: pointer;\r
  98 }\r
  99 code, pre {\r
 100         font-family: Monaco, Menlo, Consolas;\r
 101         font-size: 1em;\r
 102         color: #FFFFDE;\r
 103         padding: 0 3px 2px;\r
 104 }\r
 105 \r
 106 table {\r
 107         border-collapse: collapse;\r
 108         border-spacing: 0;\r
 109 }\r
 110 \r
 111 .header {\r
 112         /*padding: 14px 0;\r
 113         background-color: rgb(19, 17, 17);\r
 114         background-color: #006a3f;\r
 115         background-image:       \r
 116                                         radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 117                                         radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 118                                         radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), \r
 119                                         radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);\r
 120         background-image:       \r
 121                                         -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 122                                         -webkit-radial-gradient(rgba(0,0,0,0.1) 15%, transparent 16%), \r
 123                                         -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), \r
 124                                         -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);\r
 125     background-position: 0 0px, 4px 4px, 0 1px, 4px 5px;\r
 126     background-size: 8px 8px;\r
 127         border-bottom: 1px solid rgb(41, 41, 41);*/\r
 128         margin-top: 3%;\r
 129         /* margin-left: 10%; */\r
 130         margin-left: 75px;\r
 131 }\r
 132 @media (min-width: 1600px){\r
 133         .header {\r
 134                 margin-top: 3%;\r
 135                 margin-left: 95px;\r
 136         }\r
 137 }\r
 138 \r
 139 .header div.float-left {\r
 140         /*padding-left: 2%;*/\r
 141 }\r
 142 \r
 143 @media (min-width: 769px) and (max-width: 1024px) { \r
 144         .header div.float-left {\r
 145                 /*padding-left: 5%;*/\r
 146         }\r
 147 }\r
 148 \r
 149 .header a {\r
 150         font-size: 35px;\r
 151         color: white;\r
 152         display: block;\r
 153         opacity: 0.8;\r
 154 }\r
 155 .header a:first-letter {\r
 156         font-size: 60px;\r
 157         line-height: 40px;\r
 158         font-weight: bold;\r
 159 }\r
 160 .header .target {\r
 161         margin-left: 5px;\r
 162         margin-bottom: 20px;\r
 163 }\r
 164 \r
 165 .header .reponsive-block {\r
 166         list-style: none;\r
 167         margin: 0px;\r
 168         padding: 50px 2% 0 0;\r
 169 }\r
 170 \r
 171 .header .reponsive-block li {\r
 172         display: inline-block;\r
 173         float:left;\r
 174 }\r
 175 \r
 176 .header .reponsive-block a {\r
 177         display: inline-block;\r
 178         margin: 0 5px;\r
 179         cursor: pointer;\r
 180         background: url(../i/reponsive.png) no-repeat;\r
 181 }       \r
 182 \r
 183 .header .reponsive-block a.desktop {\r
 184         background-position: 3px 0;\r
 185         width: 34px; height: 26px;\r
 186 }       \r
 187 \r
 188 .header .reponsive-block a.tablet-landscape {\r
 189         background-position: -49px 0;\r
 190         width: 22px;\r
 191         height: 22px;\r
 192 }       \r
 193 \r
 194 .header .reponsive-block a.tablet-portrait {\r
 195         background-position: -90px 0;\r
 196         width: 18px;\r
 197         height: 24px;\r
 198 }       \r
 199 \r
 200 .header .reponsive-block a.iphone-landscape {\r
 201         background-position: -129px 0;\r
 202         width: 20px;\r
 203         height: 20px;\r
 204 }       \r
 205 \r
 206 .header .reponsive-block a.iphone-portrait {\r
 207         background-position: -166px 0;\r
 208         width: 16px;\r
 209         height: 26px;\r
 210 }       \r
 211 \r
 212 .header .reponsive-block a.desktop:hover,\r
 213 .header .reponsive-block a.desktop.active {\r
 214         background-position: 3px -34px;\r
 215 }       \r
 216 \r
 217 .header .reponsive-block a.tablet-landscape:hover,\r
 218 .header .reponsive-block a.tablet-landscape.active {\r
 219         background-position: -49px -34px;\r
 220 }       \r
 221 \r
 222 .header .reponsive-block a.tablet-portrait:hover,\r
 223 .header .reponsive-block a.tablet-portrait.active {\r
 224         background-position: -91px -33px;\r
 225 }       \r
 226 \r
 227 .header .reponsive-block a.iphone-landscape:hover,\r
 228 .header .reponsive-block a.iphone-landscape.active {\r
 229         background-position: -128px -33px;\r
 230 }       \r
 231 \r
 232 .header .reponsive-block a.iphone-portrait:hover,\r
 233 .header .reponsive-block a.iphone-portrait.active {\r
 234         background-position: -166px -33px;\r
 235 }       \r
 236 .free-wall {\r
 237         margin: auto;\r
 238 }\r
 239 \r
 240 .free-wall-logo {\r
 241         margin: auto;\r
 242         height: 420px;\r
 243 }\r
 244 .size2-2 {\r
 245         width: 80px;\r
 246         height: 80px;\r
 247 }\r
 248 \r
 249 .size11 {\r
 250         height: 160px;\r
 251         width: 160px;\r
 252 }\r
 253 \r
 254 .size12 {\r
 255         width: 160px;\r
 256         height: 320px;\r
 257 }\r
 258 \r
 259 .size21 {\r
 260         width: 320px;\r
 261         height: 160px;\r
 262 }\r
 263 \r
 264 .size22 {\r
 265         height: 320px;\r
 266         width: 320px;\r
 267 }\r
 268 \r
 269 .size13 {\r
 270         width: 160px;\r
 271         height: 480px;\r
 272 }\r
 273 \r
 274 .size31 {\r
 275         width: 480px;\r
 276         height: 160px;\r
 277 }\r
 278 \r
 279 .size23 {\r
 280         width: 320px;\r
 281         height: 480px;\r
 282 }\r
 283 \r
 284 .size24 {\r
 285         width: 320px;\r
 286         height: 640px;\r
 287 }\r
 288 \r
 289 .size32 {\r
 290         width: 480px;\r
 291         height: 320px;\r
 292 }\r
 293 \r
 294 .size33 {\r
 295         width: 480px;\r
 296         height: 480px;\r
 297 }\r
 298 \r
 299 .size34 {\r
 300         width: 480px;\r
 301         height: 640px;\r
 302 }\r
 303 \r
 304 .size43 {\r
 305         width: 640px;\r
 306         height: 480px;\r
 307 }\r
 308 \r
 309 .size35 {\r
 310         width: 480px;\r
 311         height: 800px;\r
 312 }\r
 313 \r
 314 .size53 {\r
 315         width: 800px;\r
 316         height: 480px;\r
 317 }\r
 318 \r
 319 .size36 {\r
 320         width: 480px;\r
 321         height: 960px;\r
 322 }\r
 323 \r
 324 .size41 {\r
 325         width: 270px;\r
 326         height: 160px;\r
 327 }\r
 328 .size42 {\r
 329         width: 270px;\r
 330         height: 320px;\r
 331 }\r
 332 .size41-1024 {\r
 333         width: 213px;\r
 334         height: 133px;\r
 335 }\r
 336 .size42-1024 {\r
 337         width: 213px;\r
 338         height: 275px;\r
 339 }\r
 340 .size41-1366 {\r
 341         width: 278px;\r
 342         height: 156px;\r
 343 }\r
 344 .size42-1366 {\r
 345         width: 278px;\r
 346         height: 332px;\r
 347 }\r
 348 .size41-1440 {\r
 349         width: 310px;\r
 350         height: 168px;\r
 351 }\r
 352 .size42-1440 {\r
 353         width: 310px;\r
 354         height: 340px;\r
 355 }\r
 356 .size41-1600 {\r
 357         width: 330px;\r
 358         height: 173px;\r
 359 }\r
 360 .size42-1600 {\r
 361         width: 330px;\r
 362         height: 354px;\r
 363 }\r
 364 \r
 365 .donate form {\r
 366         height: 100%;\r
 367         width: 100%;\r
 368         background: rgb(44, 62, 80);\r
 369 }\r
 370 \r
 371 .donate form .paypal {\r
 372         display: block;\r
 373         margin: auto;\r
 374         padding: 20px 0px 0px 0px;\r
 375         outline: 0;\r
 376 }\r
 377 \r
 378 .img-demo {\r
 379         vertical-align: bottom;\r
 380         list-style: none;\r
 381         margin:0;\r
 382         padding: 0;\r
 383 }\r
 384 \r
 385 .img-demo li {\r
 386         float: left;\r
 387         width: 25%;\r
 388         text-align: center;\r
 389 }       \r
 390 \r
 391 .img-demo li img {\r
 392         border: 2px solid white;\r
 393         width: 98px;\r
 394         height: 98px;\r
 395 }\r
 396 \r
 397 .float-left {\r
 398         float: left;\r
 399 }\r
 400 \r
 401 .float-right {\r
 402         float: right;\r
 403 }\r
 404 \r
 405 .clearfix:before,\r
 406 .clearfix:after {\r
 407     content: "";\r
 408     display: table;\r
 409 }\r
 410 \r
 411 .clearfix:after {\r
 412     clear: both;\r
 413 }\r
 414 \r
 415 .clearfix {\r
 416     zoom: 1; /* For IE 6/7 (trigger hasLayout) */\r
 417 }\r
 418 \r
 419 .rest-left {\r
 420         margin-left: 244px;\r
 421 }\r
 422 \r
 423 .desc h1,\r
 424 .desc h2,\r
 425 .desc h3,\r
 426 .desc h4,\r
 427 .desc h5,\r
 428 .desc h6 {\r
 429         font-weight: bold;\r
 430 }\r
 431 \r
 432 .desc h2 {\r
 433         border-bottom: 1px solid rgba(0,0,0,0.1);\r
 434         margin-top: 0px;\r
 435         margin-bottom: 0px;\r
 436         padding-bottom: 50px;\r
 437 }\r
 438 \r
 439 .desc h2 span {\r
 440         float: left;\r
 441         display: block;\r
 442         line-height: 50px;\r
 443 }\r
 444 \r
 445 .brick {\r
 446         background-color: white;\r
 447         float: left;\r
 448         cursor: default;\r
 449         overflow: hidden;\r
 450         background-repeat: no-repeat;\r
 451         background-size: cover;\r
 452         background-position: center;\r
 453 }\r
 454 \r
 455 .brick .cover {\r
 456         overflow: hidden;\r
 457         margin: 20px;\r
 458 /* margin-left: 60%; */\r
 459         margin-top: 25%;\r
 460 /*      width: 120px; */\r
 461         height: 30px;\r
 462         font-size: 30px;\r
 463         padding: 7px;\r
 464         float: right;\r
 465         text-align: right;\r
 466 }\r
 467 \r
 468 .brick .read-more {\r
 469         position: absolute;\r
 470         display: none;\r
 471         bottom: 0px;\r
 472         left: 0px;\r
 473         right: 0px;\r
 474         padding: 12px;\r
 475         background: rgb(0, 0, 0);\r
 476         background: rgba(0, 0, 0, 0.45);\r
 477 }\r
 478 \r
 479 .brick:hover .read-more {\r
 480         display: block;\r
 481         cursor: pointer;\r
 482 }\r
 483 \r
 484 .brick .desc {\r
 485         display: none;\r
 486 }\r
 487 \r
 488 .full-width .float-left {\r
 489         display: none;\r
 490 }\r
 491 \r
 492 .full-width .desc {\r
 493         display: block;\r
 494 }\r
 495 \r
 496 .full-width.brick {\r
 497         box-shadow: none;\r
 498         overflow: visible;\r
 499         border: none !important;\r
 500         background: none !important;\r
 501 }\r
 502 \r
 503 .full-width.brick .cover { \r
 504         margin: 0px 20px;\r
 505         color: #333;\r
 506 }\r
 507 \r
 508 .full-width.brick .cover * {\r
 509         text-shadow: none;\r
 510 }\r
 511 \r
 512 .full-width.brick .cover code {\r
 513         color: #666;\r
 514 }\r
 515 \r
 516 .open .float-left {\r
 517         display: none;\r
 518 }\r
 519 \r
 520 .open .desc {\r
 521         display: block;\r
 522 }\r
 523 \r
 524 .example {\r
 525         width: 0px;\r
 526         height: 0px;\r
 527         overflow: visible !important; /* for ie7 */\r
 528 }\r
 529 \r
 530 .example-draggable {\r
 531         cursor: move;\r
 532 }\r
 533 \r
 534 .example-draggable * {\r
 535         cursor: move;\r
 536 }\r
 537 \r
 538 .example-draggable a {\r
 539         cursor: pointer;\r
 540 }\r
 541 \r
 542 .cell {\r
 543         background-position: center center;\r
 544         background-repeat: no-repeat;\r
 545         background-size: cover;\r
 546         position: absolute;\r
 547         background-color: #222;\r
 548 }\r
 549 \r
 550 [class*="-share"] {\r
 551         cursor: pointer;\r
 552         margin: 20px 0;\r
 553         line-height: 30px;\r
 554         padding-left: 30px;\r
 555 }\r
 556 \r
 557 .facebook-share {\r
 558         background: url(../i/fb.png) no-repeat left center;\r
 559 }\r
 560 \r
 561 .twitter-share {\r
 562         background: url(../i/tw.png) no-repeat left center;\r
 563 }\r
 564 \r
 565 .google-share {\r
 566         background: url(../i/gp.png) no-repeat left center;\r
 567 }\r
 568 \r
 569 .download-icon {\r
 570         background: url(../i/download.png) no-repeat left center;\r
 571         display: block;\r
 572         margin: 0 0 10px 0;\r
 573         line-height: 30px;\r
 574         padding-left: 30px;\r
 575 }\r
 576 \r
 577 .js-icon {\r
 578         background: url(../i/js.png) no-repeat left center;\r
 579         display: block;\r
 580         line-height: 30px;\r
 581         padding-left: 30px;\r
 582 }\r
 583 \r
 584 .fork {\r
 585         float: right;\r
 586         width: 100%;\r
 587         height: 100%;\r
 588         display: block;\r
 589         background: url(../i/forkme.png) no-repeat top right;\r
 590 }\r
 591 \r
 592 .back-button {\r
 593         position: fixed;\r
 594         z-index: 9999;\r
 595         padding: 1%;\r
 596         bottom: 2%;\r
 597         right: 2%;\r
 598         display: none;\r
 599         background: black;\r
 600 }\r
 601 \r
 602 .back-button .back-icon {\r
 603         background: url(../i/back.png) no-repeat top center;\r
 604         width: 45px;\r
 605         height: 27px;\r
 606         display: block;\r
 607 }\r
 608 \r
 609 .back-button .back-icon:hover {\r
 610         background: url(../i/back.png) no-repeat bottom center;\r
 611 }\r
 612 \r
 613 @media (min-width: 1600px) {  \r
 614         .main-content-wrapper{\r
 615                 width:100%;\r
 616                 margin-left:95px;\r
 617                 margin-right: 1%;       \r
 618         }\r
 619 }\r
 620 \r
 621 @media (min-width: 1441px) and (max-width: 1599px) {  \r
 622         .main-content-wrapper{\r
 623                 width:100%;\r
 624                 /*margin-left: 0%;      */\r
 625                 margin-left:75px;\r
 626                 margin-right: 1%;       \r
 627         }\r
 628 }\r
 629 \r
 630 @media (min-width: 1367px) and (max-width: 1440px) {  \r
 631         .main-content-wrapper{\r
 632                 width:100%;\r
 633                 margin-left: 75px;      \r
 634                 margin-right: 1%;       \r
 635         }\r
 636 }\r
 637 \r
 638 @media (min-width: 1281px) and (max-width: 1366px) {  \r
 639         .main-content-wrapper{\r
 640                 width:100%;\r
 641                 /*margin-left: 2%;      */\r
 642                 margin-left:75px;\r
 643                 margin-right: 2%;       \r
 644         }\r
 645 }\r
 646 \r
 647 @media (min-width: 1025px) and (max-width: 1280px) { \r
 648         .main-content-wrapper{\r
 649                 width:100%;\r
 650                 /*margin-left: 4%;*/\r
 651                 margin-left:75px;       \r
 652                 margin-right: 1%;       \r
 653         }\r
 654 }\r
 655 \r
 656 @media (min-width: 769px) and (max-width: 1024px) { \r
 657         .main-content-wrapper{\r
 658                 width:100%;\r
 659                 /*margin-left: 6%;*/\r
 660                 margin-left:75px;       \r
 661                 margin-right: 1%;       \r
 662         }\r
 663 }\r
 664 \r
 665 @media (min-width: 641px) and (max-width: 768px) { \r
 666         .main-content-wrapper{\r
 667                 width:100%;\r
 668                 margin-left: 10%;       \r
 669                 margin-right: 1%;       \r
 670         }\r
 671 }\r
 672 \r
 673 @media (min-width: 481px) and (max-width: 640px) { \r
 674         .main-content-wrapper{\r
 675                 width:100%;\r
 676                 margin-left: 0%;        \r
 677                 margin-right: 1%;       \r
 678         }\r
 679 }\r
 680 \r
 681 @media (max-width: 480px) { \r
 682         .main-content-wrapper{\r
 683                 width:100%;\r
 684                 margin-left: 9%;        \r
 685                 margin-right: 1%;       \r
 686         }\r
 687 }\r
 688 \r
 689 body{\r
 690         font-family: microsoft yahei;\r
 691         background: #484747;\r
 692 }\r
 693 \r
 694 .skyBlue-mainpage{\r
 695         background: -moz-linear-gradient(left top, #1cadd9, #20c0f0);\r
 696         background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #1cadd9), color-stop(1, #20c0f0));\r
 697         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cadd9', endColorstr='#20c0f0', GradientType='0');\r
 698         background: linear-gradient(to bottom right,#1cadd9, #20c0f0);\r
 699 }\r
 700 .golden-mainpage{\r
 701         background-image: -moz-linear-gradient(left top, #bca374, #d9cf7a);\r
 702         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #bca374), color-stop(1, #d9cf7a));\r
 703         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bca374, endColorstr=#d9cf7a, GradientType=0);\r
 704         background: linear-gradient(to bottom right,#bca374, #d9cf7a);\r
 705 }\r
 706 .manLieONCloud-image{\r
 707         background-image: url('../image/mainpage/pic/1.png');\r
 708 }\r
 709 .orange-mainpage{\r
 710         background-image: -moz-linear-gradient(left top, #f09c0a, #f4be35);\r
 711         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f09c0a), color-stop(1, #f4be35));\r
 712         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f09c0a, endColorstr=#f4be35, GradientType=0);\r
 713         background: linear-gradient(to bottom right,#f09c0a, #f4be35);\r
 714 }\r
 715 .pinkishRed-mainpage{\r
 716         background-image: -moz-linear-gradient(left top, #e03655, #ef3a5b);\r
 717         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #e03655), color-stop(1, #ef3a5b));\r
 718         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e03655, endColorstr=#ef3a5b, GradientType=0);\r
 719         background: linear-gradient(to bottom right,#e03655, #ef3a5b);\r
 720 }\r
 721 .magicCube-image{\r
 722         background-image: url('../image/mainpage/pic/4.png');\r
 723 }\r
 724 .grassGreen-mainpage{\r
 725         background-image: -moz-linear-gradient(left top, #008b04, #03a501);\r
 726         background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #008b04), color-stop(1, #03a501));\r
 727         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#008b04, endColorstr=#03a501, GradientType=0);\r
 728         background: linear-gradient(to bottom right,#008b04, #03a501);\r
 729 }\r
 730 .meeting-image{\r
 731         background-image: url('../image/mainpage/pic/3.png');   \r
 732 }\r
 733 .earth-image{\r
 734         background-image: url('../image/mainpage/pic/2.png');\r
 735 }\r
 736 .toolsImageBrokenLine{\r
 737         background-image: url('../image/mainpage/icon/1.png');\r
 738         height: 150px;\r
 739         width: 120px;\r
 740         top: 30px;\r
 741         position: absolute;\r
 742 }\r
 743 .toolsImageHierachy{\r
 744         background-image: url('../image/mainpage/icon/2.png');\r
 745         height: 150px;\r
 746         width: 120px;\r
 747         top: 30px;\r
 748         position: absolute;\r
 749 }\r
 750 .toolsImageGear{\r
 751         background-image: url('../image/mainpage/icon/3.png');\r
 752         height: 150px;\r
 753         width: 120px;\r
 754         top: 30px;\r
 755         position: absolute;\r
 756 }\r
 757 .toolsImagePresent{\r
 758         background-image: url('../image/mainpage/icon/4.png');\r
 759         height: 150px;\r
 760         width: 120px;\r
 761         top: 30px;\r
 762         position: absolute;\r
 763 }\r
 764 .toolsImageFile{\r
 765         background-image: url('../image/mainpage/icon/5.png');\r
 766         height: 150px;\r
 767         width: 120px;\r
 768         top: 30px;\r
 769         position: absolute;\r
 770 }\r
 771 .toolsImageBriefcase{\r
 772         background-image: url('../image/mainpage/icon/6.png');\r
 773         height: 150px;\r
 774         width: 120px;\r
 775         top: 30px;\r
 776         position: absolute;\r
 777 }\r
 778 .contentTip{\r
 779         opacity:0;\r
 780         display:block;\r
 781         padding: 20px;\r
 782         text-align: left;\r
 783         line-height: inherit;\r
 784         text-indent: 2em;\r
 785         position: absolute;\r
 786 }\r
 787 .contentTipShow{\r
 788         display:block;\r
 789         padding: 20px;\r
 790         text-align: left;\r
 791         line-height: inherit;\r
 792         text-indent: 2em;\r
 793         position: absolute;\r
 794 }\r
 795 .coverHidden{\r
 796         display:none;\r
 797 }\r
 798 .coverShrink{\r
 799         width:0px !important;\r
 800         height:0px !important;\r
 801 }\r
 802 /*\r
 803 .brick  .contentToggle{\r
 804   -webkit-transition: opacity 1s ease-in-out;\r
 805   -moz-transition: opacity 1s ease-in-out;\r
 806   -o-transition: opacity 1s ease-in-out;\r
 807   transition: opacity 1s ease-in-out;\r
 808 }\r
 809 .brick  .cover :hover{\r
 810         opacity:0;\r
 811 }\r
 812 */\r
 813 .hideSideMenuForMainPage {\r
 814   display: none! important;\r
 815 }\r
 816 .fullFillDiv {\r
 817    width:100%;\r
 818    height:100%;\r
 819 }\r
 820 \r