Home Explore Help
Sign In
caimei365
/
caimei365-www
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: fb5174a9f6
Branches Tags
caimei365-www
/
src
/
main
/
resources
/
static
/
css
/
encyclopedia
/
old
/
contact.css

contact.css 4.2 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940 
  1. @charset "UTF-8";
    2. 

  2. @media screen and (min-width:768px){
    3. 

  3. .page-title{width:100%;height:240px;background:url(/img/encyclopedia/pc-page-title-bg.png) no-repeat center;background-size:auto 240px;overflow:hidden}
    4. 

  4. .page-title .title{margin-top:55px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
    5. 

  5. .page-title .title h2{color:#fff;width:124px;font-size:30px}
    6. 

  6. .page-title .title .line{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-left:7px;height:1px;background:rgba(255,255,255,0.2)}
    7. 

  7. .page-title .title .line::after{content:"";display:inline-block;width:16px;height:2px;background:#ffffff;opacity:0.72}
    8. 

  8. .page-title .subtitle{margin-top:8px;font-size:12px;color:#ffffff;opacity:0.6;text-transform: uppercase;}
    9. 

  9. .page-title .subtitle span{display:inline-block;width:38px;height:1px;background:#ffffff;vertical-align:middle;margin-right:8px}
    10. 

  10. .contact{position:relative;height:590px}
    11. 

  11. .contact .content{height:670px;padding:40px 55px;background:#ffffff;border-radius:2px;-webkit-transform:translateY(-80px);-ms-transform:translateY(-80px);transform:translateY(-80px);-webkit-box-shadow:0 0 16px rgba(0,0,0,0.1);box-shadow:0 0 16px rgba(0,0,0,0.1);-webkit-box-sizing:border-box;box-sizing:border-box}
    12. 

  12. .contact .content h2{font-size:18px;font-weight:bold}
    13. 

  13. .contact .content p{margin-top:24px;font-size:14px;color:#93979f;text-align:justify;line-height:24px}
    14. 

  14. .contact .content .address{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:60px 0 50px}
    15. 

  15. .contact .content .address .line{height:56px;width:1px;background:#e3e6eb}
    16. 

  16. .contact .content .address .col:nth-of-type(3){width:460px}
    17. 

  17. .contact .content .address .col .dt{font-size:14px;color:#93979f}
    18. 

  18. .contact .content .address .col .dd{margin-top:12px;font-size:16px;font-weight:bold}
    19. 

  19. .contact .content .map{height:354px;margin-top:24px;background:#93979f}
    20. 

  20. }
    21. 

  21. @media screen and (max-width:768px){
    22. 

  22. .flex-center,.page-title .container .subtitle,.page-title .container .title .line,.page-title .container,.page-title,.flex-center-between,.page-title .container .title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
    23. 

  23. .flex-center-between,.page-title .container .title{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
    24. 

  24. .page-title{width:100vw;height:28vw;background:url(/img/encyclopedia/h5-page-title-bg.png) no-repeat;background-size:100vw 28vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding:4vw}
    25. 

  25. .page-title .container{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
    26. 

  26. .page-title .container .title{width:100%}
    27. 

  27. .page-title .container .title h2{font-size:5.3vw;color:#ffffff}
    28. 

  28. .page-title .container .title .line{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;width:66vw;height:0.2vw;background:rgba(255,255,255,0.2)}
    29. 

  29. .page-title .container .title .line::after{content:"";display:inline-block;width:3vw;height:0.4vw;background:#ffffff;opacity:0.6}
    30. 

  30. .page-title .container .subtitle{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-top:2vw;font-size:2vw;color:#ffffff;opacity:0.6}
    31. 

  31. .page-title .container .subtitle span{display:block;width:6.8vw;height:0.2vw;margin-right:2vw;background:#ffffff}
    32. 

  32. .contact .content{padding:4vw;background:#fff}
    33. 

  33. .contact .content h2{font-size:3.6vw;font-weight:bold}
    34. 

  34. .contact .content p{margin-top:3.2vw;font-size:3vw;line-height:5.6vw;color:#93979f;text-align: justify;}
    35. 

  35. .contact .content .address .col{margin:4vw 0}
    36. 

  36. .contact .content .address .col .dt{font-size:3vw;color:#93979f}
    37. 

  37. .contact .content .address .col .dd{margin-top:1.6vw;font-size:3.2vw;font-weight:bold;color:#4a4f58}
    38. 

  38. .contact .content .map{width:92vw;height:60vw}
    39. 

  39. .copyright{margin-top:0}
    40. 

  40. }
    41.