style.css 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. body, div, p { margin: 0; padding: 0;}
  2. ul { list-style:none;}
  3. html { overflow: hidden;}
  4. body { width: 100%; *cursor: default;overflow: hidden; font-family: "黑体";}
  5. iframe{background: rgba(0,0,0,0);border-image-source: none;border-image-slice: none;border-image-width: none; border-image-outset: none;border-image-repeat: none; border-width: 0px;border-style: none;border-color: none;}
  6. img { vertical-align: top;}
  7. a,button,svg { outline:0 none !important;}
  8. a:active,button:active,svg:active {outline:0 none !important;}
  9. .undisplay{display:none;}
  10. #start_loading{width: 100%;height: 100%;background:rgba(31,31,31,1);z-index: 158;position:fixed;*position:absolute;top:0;left:0;}
  11. #start_loading img{width:241px; height:238px;position:absolute;top:50%;left:50%;margin: -119px auto auto -120px;}
  12. #ascrail2017 ,#ascrail2018,#ascrail2016,#ascrail2015{display: none;}
  13. .font-btn{width: 108px;height: 40px;position: absolute;top: 10px;right: 52px;z-index:7;}
  14. .font-btn span{ display:block; float:left; margin-right:10px; padding:4px 0px; cursor:pointer;}
  15. .font-btn span img{width: 40px;}
  16. #vip{z-index: 8;}
  17. #pageContain { overflow: hidden;}
  18. .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0;}
  19. .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0;}
  20. .current .contain, .slide .contain { display: block;}
  21. .current { display: block; z-index: 1;}
  22. .slide { display: block; z-index: 2;}
  23. .swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important;}
  24. .page1,.page2,.page3,.page4,.page5,.page6,.page7,.page8,.page9,.page10,.page11,.page12,.page13,.page14,.page15{ background: #111;}
  25. .page16 { background: #000;z-index: 6;}
  26. .ftr{float: right;padding:5px 0px 5px 10px;}
  27. .ftl{float: left;padding:5px 10px 5px 0px;}
  28. .landing_arrow,.share_box ul li .facebook,.share_box ul li .gplus,.share_box ul li .mail,.share_box ul li .twitter,.share_icon,.share_kink {
  29. background-image:url(../images/delhi_sprite.png)}
  30. #navBar { z-index: 6; position: fixed; top: -20px; left:-78px;width: 0px;}
  31. #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%;text-align: center; width: 40px; height: 40px;}
  32. .txt { margin-top: 20%; font-size: 50px; color: #fff; text-align: center;}
  33. .frontpage_hero {width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 157;}
  34. .frontpage_hero video {position: absolute;top: 50%;left: 50%;width:1920px;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);z-index: 2;}
  35. .frontpage_hero iframe{width: 100%;height: 100%;z-index: 999;}
  36. .frontpage_hero p {font-size: 1.8em;padding: 0.4em 0 0.4em 0;font-weight: 500;font-family: "楷体";}
  37. audio, video {display: inline-block;*display: inline;*zoom: 1;}
  38. .frontpage_hero .cta.fw {top:0;}
  39. .frontpage_hero .cta { position: absolute;top: 0px;left: 0;width: 100%;height:100%;z-index: 232;color: #FFF;}
  40. .frontpage_hero .cta .container{width: 100%;margin:20% auto; text-align: center;}
  41. .frontpage_hero .overlay { position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 4;background-color: rgba(110,110,110,0);}
  42. .frontpage_hero .cta .container h1{font-weight:bold;letter-spacing: 2px;font-family:"黑体";font-size: 80px;}
  43. .frontpage_hero .cta .container p{letter-spacing: 2px;}
  44. .frontpage_hero iframe {width: 100%;height: 100%;z-index: 999;}
  45. /*********************************问题页面**********************************/
  46. .font{font-size: 16px;}
  47. .model_container .font{font-size: 14px;}
  48. .font19{font-size: 19px;line-height: 30px;}
  49. .forgein-circle .font19{font-size: 21px;}
  50. .circle {-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;-webkit-transform: translateZ(0);transform: translateZ(0);transition: all 0.3s ease-in-out 0s;}
  51. .circle:hover, .circle:focus, .circle:active {background:rgba(172,43,43,0.4);}
  52. #nav{width:1200px;height:900px;overflow:hidden; position: absolute;margin: -450px auto auto -600px;top: 50%;left: 50%;}
  53. #menu{float: right;}
  54. .a0 div,.a1 div,.a2 div,.a3 div,.a4 div,.a5 div,.a6 div,.a7 div,.a8 div{background:#1e1d1d;width:240px;line-height:240px;display:block;margin:5px 15px;text-align:center;font-size:24px;font-family:"黑体";float:left;opacity:0.3;border-radius:120px;cursor:pointer;color:#bbb;}
  55. .a0{position:absolute;top:95px;left:0px;background: url(../images/a0.png) no-repeat center center; }
  56. .a1{position:absolute;top:95px;left:300px;background: url(../images/a1.png) no-repeat center center; }
  57. .a2{position:absolute;top:95px;left:600px;background: url(../images/a2.png) no-repeat center center; }
  58. .a3{position:absolute;top:360px;left:150px;background: url(../images/a3.png) no-repeat center center; }
  59. .a4{position:absolute;top:360px;left:450px;background: url(../images/a4.png) no-repeat center center; }
  60. .a5{position:absolute;top:360px;left:760px;background: url(../images/a5.png) no-repeat center center; }
  61. .a6{position:absolute;top:600px;left:300px;background: url(../images/a6.png) no-repeat center center; }
  62. .a7{position:absolute;top:600px;left:600px;background: url(../images/a7.png) no-repeat center center; }
  63. .a8{position:absolute;top:95px;left:900px;background: url(../images/a8.png) no-repeat center center; }
  64. #name{position:relative;}
  65. .nr{position:absolute;left:365px;color:#858585;font-size:30px;top:-1300px;padding: 10px;line-height: 30px;background: #111;}
  66. .ys{padding-top: 10px;width:700px;line-height: 24px;letter-spacing: 1px;height: 840px;overflow:hidden;}
  67. .ys p{font-family: "黑体";text-indent: 2em;}
  68. .img-circle{border-radius: 500px;}
  69. .aaays{width:200px;height:40px;background:#000;color:#FFF;font-size:25px;text-align:center;opacity:0.1;position:absolute;top:200px;line-height:40px;display:none;}
  70. #dang{position:absolute;left:0px;top:0px;width:0%;height:1%;}
  71. .item{position: relative;height:800px;overflow: hidden;overflow-y: hidden;outline: none; padding-right: 20px;}
  72. .close{width:16px;height:16px;background:url(../images/close16.png) no-repeat center center;float: right;cursor:pointer;}
  73. #red{ background:rgba(172,43,43,1);color:rgba(255,255,255,1);pointer-events: none; }
  74. .HowToSound img{width: 500px;}
  75. .HowToMake img{width:220px;}
  76. .HowToMake p{width: 680px;}
  77. .how-maker-1{margin: 20px 50px 20px 90px}
  78. .how-maker-2{margin: 20px 50px}
  79. .how-maker-3{margin: 10px 255px;}
  80. .forgein-circle{width:500px;height: 500px;border-radius: 500px;background: #1b1b1b;margin: 50px 0px;padding: 100px;font-size: 19px;}
  81. .margin160{margin-top: 105px;}
  82. .WhatIsJew{width: 660px;height: 800px;background: url(../images/q5-1.png) no-repeat center center;}
  83. .WhatIsJew p {margin: 300px 70px;font-size:19px;}
  84. #modal-1 .md-content > div {padding:0px;}
  85. #modal-2 .md-content,#modal-4 .md-content{text-align: center;}
  86. #modal-2 .md-content img{margin: 60px auto;width: 600px;}
  87. #modal-3 .md-content > div {width: 100%;height: 100%;}
  88. #modal-4 .md-content > div.md-content-map img{width:65%;}
  89. #modal-4 .md-content > div.md-content-map a{text-decoration: none;color:#fff;cursor: pointer;margin: 2% 0;display: block;}
  90. #modal-5 .md-content > div {padding:0px;}
  91. #modal-6 .md-content > div {padding:0px;}
  92. /***********************************视频***************************************/
  93. .htmleaf-container{width:1500px;height:700px;margin:-350px auto auto -750px;text-align: center;position: absolute;top: 50%;left: 50%;}
  94. .htmleaf-container .item{height:390px;overflow-y: hidden;outline: none;line-height:24px;}
  95. .htmleaf-container ul{-webkit-padding-start: 0px;}
  96. .background {position: absolute;font-family: Courier;background:#111;top:100px;}
  97. .background video{width:750px;}
  98. .cloud ,.cloud_1,.cloud_2,.cloud_3,.cloud_4,.cloud_5,.cloud_6,.cloud_7,.cloud_8{margin-top:-20px;margin-left: 220px;width:550px; height: auto;z-index: 2;opacity: 1;}
  99. .cloud_1,.cloud_5{right: 200px;top: 240px;width: 300px;color: #999999;text-align: left;position: absolute;text-align:justify;}
  100. .cloud_8{right: 120px;top: 240px;width: 350px;color: #999999;text-align: left;position: absolute;}
  101. .cloud_2{margin-left:160px;margin-top: 0px;width: 300px;}
  102. .cloud_3,.cloud_3_1{left: 580px;top: 350px;width: 300px;color: #999;position: absolute;text-align: left;}
  103. .cloud_3_1{width: 420px;left: 800px;top: 320px;}
  104. .cloud_4{margin-left: 150px;margin-top: -90px;}
  105. .cloud_6{width: 500px;margin-top: -70px;margin-left: 300px;}
  106. .cloud_7{margin-top: -50px;margin-left: 300px;width: 650px;}
  107. .cloud_1,.cloud_3,.cloud_5,.cloud_8,.cloud_3_1{height:380px;overflow: hidden;}
  108. .tabs {position: relative;overflow: hidden;margin: 0 auto;width: 100%;}
  109. .tabs nav ul {position: relative;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: -ms-flex;
  110. display: flex;max-width: 166px;height:18px;margin:5px;list-style: none;-ms-box-orient: horizontal;-ms-box-pack: center;-webkit-flex-flow: row wrap;-moz-flex-flow: row wrap;
  111. -ms-flex-flow: row wrap;flex-flow: row wrap;-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;}
  112. .tabs nav ul li {position: relative;z-index: 1;display: block;margin: 0px 0px 0px -5px;text-align: center;-webkit-flex: 1;-moz-flex: 1;-ms-flex: 1;flex: 1;}
  113. .tabs nav a {position: relative;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 2.5;width: 14px;}
  114. .tabs nav a span {display: block;width: 10px;height: 10px;border: 2px solid #510404;}
  115. .tabs nav li.tab-current a {color: #74777b;}
  116. .tabs nav li.tab-current span{background:rgba(172,43,43,1);}
  117. .tabs nav a:focus {outline: none;}
  118. .content-wrap {position: relative;border: 2px solid #510404;}
  119. .content-wrap section {display: none;margin: 0 auto;height:atuo;text-align: center;}
  120. .content-wrap section.content-current {display: block;}
  121. span.font{font-size: 18px;display: block;margin-bottom: 10px;}
  122. /*************************************侧边导航条******************************************/
  123. .card-holder {width: 0px;position: fixed;top: 50px; z-index: 4; }
  124. .card-wrapper {display: inline-block;float: right;clear: both;}
  125. .card {position: relative;left: 6px;padding: 16px 18px 16px 18px;margin: 0px;background: #fff;
  126. x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
  127. transition: all 0.3s ease-in-out 0.1s;}
  128. .card:hover {position: relative;left: 100%;margin-left: -6px;box-shadow:
  129. 0 -8px 8px -8px rgba(0, 0, 0, 0.5),0 8px 8px -8px rgba(0, 0, 0, 0.5);transition: all 0.3s ease-in-out;}
  130. .card-content {display: inline-block;color: #fff;font-size: 16px;white-space: nowrap;}
  131. .bg-01 { background: #ac2b2b; }
  132. .bg-02 { background: #9d1617; }
  133. .bg-03 { background: #88090a; }
  134. .bg-04 { background: #700707; }
  135. .bg-05 { background: #5a0506; }
  136. .bg-06 { background: #4a0405; }
  137. .bg-07 { background: #360303; }
  138. .bg-08 { background: #582204; }
  139. .bg-09 { background: #883a05; }
  140. .bg-10 { background: #aa4908; }
  141. .bg-11 { background: #ce5605; }
  142. .bg-12 { background: #c0820a; }
  143. .bg-13 { background: #cb8c12; }
  144. .bg-14 { background: #db9611; }
  145. .bg-15 { background: #f2a30b; }
  146. /***************************地球*****************************************/
  147. .ball{width:200px;height:200px;position:absolute;/*top:50%;left:50%;*/margin:-100px 0 0 -100px;}
  148. .ball1, .ball2, .ball3, .center{position:absolute;left:50%;top:50%;margin:-25px 0 0 -25px;width:50px;height:50px;border-radius:25px;border: 1px solid #ccc;}
  149. .center-ball{position:absolute;left:50%;top:50%;margin:-40px 0 0 -40px;width:80px;height:80px;border-radius:40px;background:#ccc;text-align:center;line-height:80px;color:#EAEAEA;font-size:16px;font-family:'';cursor:pointer;}
  150. .ball1{-webkit-animation:ball 2s linear infinite;animation:ball 2s linear infinite;}
  151. .ball2{-webkit-animation:ball 2s linear 0.8s infinite;animation:ball 2s linear 0.8s infinite;}
  152. .ball3{-webkit-animation:ball 2s linear 1.6s infinite;/* Safari and Chrome */animation:ball 2s linear 1.6s infinite;}
  153. @-webkit-keyframes ball{ /* Safari and Chrome */
  154. from{opacity:1;-webkit-transform:scale(0);}
  155. to{opacity:0;-webkit-transform:scale(3);}
  156. }
  157. @keyframes loop {
  158. 0% { background-position: 0 0; }
  159. 100%{ background-position: 500px 0;}
  160. }
  161. @-webkit-keyframes loop {
  162. 0% { background-position: 0 0; }
  163. 100%{ background-position: 500px 0;}
  164. }
  165. .earth{background: url(../images/terra.jpg) repeat-x 0 0;border: 1px solid rgba(26,18,101,0.3);
  166. border-radius: 80px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
  167. height: 80px; width: 80px;animation: loop 20s linear infinite;-webkit-animation: loop 20s linear infinite;}
  168. .earth::after{background: url(../images/terra.jpg) repeat-x 0 0;border: 1px solid rgba(26,18,101,0.3);
  169. border-radius: 80px; box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
  170. height: 80px; width: 80px;animation: loop 20s linear infinite;-webkit-animation: loop 20s linear infinite;}
  171. .maker-container{width: 100%;height: 100%; z-index: 4; }
  172. .video-bg{width: 100%;height: 100%;position: absolute;}
  173. .maker1{background:url(../images/maker1.jpg) no-repeat center right;background-size: cover;}
  174. .maker2{background:url(../images/maker2.jpg) no-repeat center right;background-size: cover;}
  175. .maker3{background:url(../images/maker3.jpg) no-repeat center right;background-size: cover;}
  176. .maker-box{width: 350px;min-height: 500px;margin:150px auto auto 50px; position: absolute;}
  177. .maker-img img{width: 300px;}
  178. .maker-txt{width: 320px;margin: 0 auto;color: #999;height: 400px;overflow: hidden;line-height: 24px;}
  179. .maker-txt h2{font-size: 16px;font-family: "黑体"}
  180. #m1,#m2,#m3{width: 75px;height: 75px;display: block;border-radius: 5px;cursor: pointer;}
  181. #modal-7 .maker-box,#modal-8 .maker-box,#modal-9 .maker-box{margin: 0px;top: 80px;left: 50px;}
  182. .model_container{width:80%;margin: 7% 10%;position: absolute;}
  183. .title_bg{width: 60%;height:290px;background: url(../images/endbg.png) no-repeat center left #363636;}
  184. .title_bg ul {width:110px;margin-left: 42%;padding:0px 10px;position: absolute;float: left;z-index: 89;}
  185. .title_bg ul li{width: 72px;height:79px;margin:8px 20px;}
  186. .title_bg ul li img{width: 75px;}
  187. .title-txt{float: left;width: 550px;margin-left:53%;margin-top:-80px;color: #858585;font-family: "黑体";font-size: 18px;line-height: 28px;}
  188. .title-txt h2{font-size: 24px;width: 80px;height: 30px;}
  189. .title-txt p{text-indent: 2em;}
  190. #mymodel{position: absolute;top: -8px;left:-100px;width:860px;height:760px;z-index: 88;background:rgba(0,0,0,0);}
  191. .model1_txt,.model2_txt,.model3_txt{float: left;width: 500px;margin-left:52%;margin-top:50px;color: #858585;height:620px;font-size: 14px;line-height: 24px;font-family: "黑体";}
  192. .model2_txt{margin-top:140px;}
  193. .model3_txt{margin-top:210px;}
  194. .model1_txt h2,.model2_txt h2,.model3_txt h2{font-size: 14px;font-weight: normal;}
  195. .model1_txt img,.model2_txt img,.model3_txt img {float: left;width: 60px;margin-right: 10px;}
  196. .txt_title{margin-bottom: 20px;}
  197. .last_txt{width: 420px;float: left;}
  198. #return-btn{width:75px;height:75px;position: absolute;border: 2px solid rgb(172, 43, 43);cursor: pointer;}
  199. #return-btn img{width: 75px;}
  200. /******************分辨率1600***********************/
  201. @media screen and (max-width: 1600px) {
  202. .font{font-size: 14px;}
  203. .ys .font{font-size: 14px;}
  204. .font19{font-size: 14px;line-height: 24px;}
  205. .forgein-circle .font19{font-size: 16px;color: #fff;}
  206. .model_container .font { font-size: 14px;}
  207. .frontpage_hero .cta .container{margin:10% auto; }
  208. .frontpage_hero p img{width:300px;margin-top:50px;}
  209. #nav{width:860px;height:620px;margin:-310px auto auto -430px;}
  210. .a0 div,.a1 div,.a2 div,.a3 div,.a4 div,.a5 div,.a6 div,.a7 div,.a8 div{width:180px;height:180px;line-height:180px;font-size:20px;border-radius:90px;}
  211. .a0{top:35px;left:20px;background: url(../images/a0_16.png) no-repeat center center; }
  212. .a1{top:35px;left:220px;background: url(../images/a1_16.png) no-repeat center center; }
  213. .a2{top:35px;left:420px;background: url(../images/a2_16.png) no-repeat center center; }
  214. .a3{top:225px;left:120px;background: url(../images/a3_16.png) no-repeat center center; }
  215. .a4{top:225px;left:320px;background: url(../images/a4_16.png) no-repeat center center; }
  216. .a5{top:225px;left:520px;background: url(../images/a5_16.png) no-repeat center center; }
  217. .a6{top:415px;left:220px;background: url(../images/a6_16.png) no-repeat center center; }
  218. .a7{top:415px;left:420px;background: url(../images/a7_16.png) no-repeat center center; }
  219. .a8{top:35px;left:620px;background: url(../images/a8_16.png) no-repeat center center; }
  220. .nr{position:absolute;left:215px;color:#858585;font-size:25px;top:-1000px;padding: 15px;line-height: 28px;}
  221. .ys{padding-top: 10px;width:520px;line-height: 20px;height: 550px;overflow: hidden;letter-spacing: 0px;}
  222. .ys p{text-indent: 2em;}
  223. .font-btn {height: 30px;}
  224. .Legend img{width: 150px;}
  225. .HowToSound img{width: 300px;margin: 0 150px;}
  226. .HowToMake img{width:150px;}
  227. .HowToMake p{width: 800px;}
  228. .how-maker-1{margin: 20px 50px 20px 40px}
  229. .how-maker-2{margin: 20px 50px}
  230. .how-maker-3{margin: 10px 160px;}
  231. .forgein-circle{width:350px;height: 350px;border-radius: 350px;background: #1b1b1b;margin: 0px;padding: 85px;}
  232. .margin160{margin-top: 70px;}
  233. .forgein-circle img{width: 40px;}
  234. .WhatIsJew{width:500px;height: 550px;background: url(../images/q5-1.png) no-repeat top center;background-size: contain;}
  235. .WhatIsJew p {margin: 200px 10px;font-size: 14px;}
  236. .HowToUse img{width: 140px;}
  237. .WhatIsLike img{width: 125px;}
  238. #modal-1 .md-content > div {padding:0px;}
  239. #modal-2 .md-content,#modal-4 .md-content{text-align: center;}
  240. #modal-2 .md-content img{margin: 30px auto;width: 420px;}
  241. #modal-4 .md-content > div.md-content-map img {width: 60%;}
  242. #modal-5 .md-content > div {padding:0px;}
  243. .aaays{width:200px;height:40px;background:#000;color:#FFF;font-size:25px;text-align:center;opacity:0.1;position:absolute;top:200px;line-height:40px;display:none;}
  244. .font{font-size:13px;}
  245. .htmleaf-container{width: 1200px;height: 560px;margin: -280px auto auto -600px;}
  246. .item{position: relative;height:580px;overflow: hidden;overflow-y: hidden;outline: none; line-height:21px;padding-right: 20px;}
  247. .htmleaf-container .item{height:350px;overflow-y: hidden;outline: none; }
  248. .maker-container .item{height:350px;overflow-y: hidden;outline: none; }
  249. .background {top: 70px;}
  250. .content-wrap section {width:650px;height:400px;}
  251. .cloud ,.cloud_1,.cloud_2,.cloud_3,.cloud_4,.cloud_5,.cloud_6,.cloud_7,.cloud_8{margin-top:0px;margin-left:200px;width:420px;}
  252. .cloud_1{right:160px;top:180px;width: 240px;font-size: 13px;position: absolute;}
  253. .cloud_2{margin-left: 210px;margin-top: 0px;width: 220px;}
  254. .cloud_3,.cloud_3_1{left: 480px;top: 240px;width: 255px;color: #999;position: absolute;text-align: left;}
  255. .cloud_3_1{width: 300px;left: 680px;top: 240px;}
  256. .cloud_4{margin-left: 160px;margin-top: -20px;width: 420px;}
  257. .cloud_5{top: 160px;width: 240px;right: 160px;position: absolute;}
  258. .cloud_6{width: 400px;margin-top: -20px;margin-left:260px;}
  259. .cloud_7{margin-top: -10px;margin-left: 300px;width: 520px;}
  260. .cloud_8{top: 160px;width: 240px;right: 100px;position: absolute;}
  261. .cloud_1,.cloud_3,.cloud_5,.cloud_8,.cloud_3_1{height:300px;overflow-y:auto;}
  262. .background video{width:650px;}
  263. .card {padding: 8px 18px 8px 9px;}
  264. .maker-box{margin:20px auto auto 50px;}
  265. .maker-img img{width: 200px;}
  266. #navBar { top: -25px;}
  267. #navBar li { height: 3px;}
  268. #m1,#m2,#m3{width: 55px;height: 55px;display: block;}
  269. .model_container{margin: 3% 10%;}
  270. .title_bg{width: 60%;height:192px;background: url(../images/endbg.png) no-repeat center left #363636;}
  271. #mymodel{position: absolute;top:-6px;left:-50px;width:568px;height:550px;}
  272. .title_bg ul {width:110px;margin-left:42%;padding: 10px;position: absolute;float: left;z-index: 89;}
  273. .title_bg ul li{width: 65px;height:65px;margin: 5px 20px;}
  274. .title_bg ul li img{width: 55px;}
  275. .title-txt{float: left;width: 500px;margin-left:52%;margin-top:-50px;color: #858585;height:540px;overflow-y: scroll;font-size: 15px;}
  276. .title-txt h2{font-size: 22px;width: 80px;height: 20px;}
  277. .title-txt p{text-indent: 2em;}
  278. .model1_txt,.model2_txt,.model3_txt{float: left;width: 500px;margin-left:52%;margin-top:30px;color: #858585;height:540px;}
  279. .model1_txt img,.model2_txt img,.model3_txt img{width:40px;}
  280. span.font{font-size: 16px;display: block;margin-bottom: 8px;}
  281. #return-btn{width:55px;height: 55px;position: absolute;}
  282. #return-btn img{width: 55px;}
  283. }
  284. /******************分辨率1280***********************/
  285. @media screen and (max-width:1285px) {
  286. .font{font-size: 13px;}
  287. .ys .font{font-size: 13px;}
  288. .font19{font-size: 13px;line-height: 21px;}
  289. .forgein-circle .font19{font-size: 15px;color: #fff;}
  290. .model_container .font {font-size: 13px;}
  291. #navBar {top: -30px;}
  292. #navBar li { margin-bottom:0px;height: 30px;}
  293. .frontpage_hero .cta .container {margin: 8% auto;}
  294. #nav{width:800px;height:600px;margin: -300px auto auto -400px;}
  295. .a0 div,.a1 div,.a2 div,.a3 div,.a4 div,.a5 div,.a6 div,.a7 div,.a8 div{width:160px;height:160px;line-height:160px;font-size:17px;border-radius:85px;}
  296. .a0{top:35px;left:0px;background: url(../images/a0_12.png) no-repeat center center; }
  297. .a1{top:35px;left:200px;background: url(../images/a1_12.png) no-repeat center center; }
  298. .a2{top:35px;left:400px;background: url(../images/a2_12.png) no-repeat center center; }
  299. .a3{top:205px;left:100px;background: url(../images/a3_12.png) no-repeat center center; }
  300. .a4{top:205px;left:300px;background: url(../images/a4_12.png) no-repeat center center; }
  301. .a5{top:205px;left:500px;background: url(../images/a5_12.png) no-repeat center center; }
  302. .a6{top:380px;left:200px;background: url(../images/a6_12.png) no-repeat center center; }
  303. .a7{top:380px;left:400px;background: url(../images/a7_12.png) no-repeat center center; }
  304. .a8{top:35px;left:600px;background: url(../images/a8_12.png) no-repeat center center; }
  305. .nr{position:absolute;left:195px;color:#858585;font-size:24px;top:-1000px;padding: 15px;line-height: 28px;}
  306. .ys{padding-top: 8px;width:530px;line-height: 20px;}
  307. .font-btn {height: 30px;}
  308. .HowToSound img{width: 240px;margin: 0 150px;}
  309. .HowToMake img{width:150px;}
  310. .HowToMake p{width: 500px;}
  311. .how-maker-1{margin: 20px 50px 20px 60px}
  312. .how-maker-2{margin: 20px 50px}
  313. .how-maker-3{margin: 10px 180px;}
  314. .forgein-circle{width:300px;height: 300px;border-radius: 300px;background: #1b1b1b;margin: 0px 20px;padding: 85px;}
  315. .margin160{margin-top: 30px;}
  316. .forgein-circle img{width: 40px;}
  317. .WhatIsJew{width: 500px;height: 500px;background: url(../images/q5-1.png) no-repeat top center;background-size: contain;}
  318. .WhatIsJew p {margin: 180px 20px;font-size: 13px;}
  319. .HowToUse img{width: 140px;}
  320. .WhatIsLike img{width: 125px;}
  321. #modal-1 .md-content > div {padding:0px;}
  322. #modal-2 .md-content,#modal-4 .md-content{text-align: center;}
  323. #modal-2 .md-content img{margin: 20px auto;width: 400px;}
  324. #modal-5 .md-content > div {padding:0px;}
  325. .font{font-size:13px;}
  326. .htmleaf-container{width: 960px;height: 480px;margin: -240px auto auto -480px;}
  327. .item {position: relative;height:520px;overflow: hidden;overflow-y: hidden;outline: none;line-height: 20px;padding-right: 20px;}
  328. .htmleaf-container .item{height:350px;overflow-y: hidden;outline: none; }
  329. .maker-container .item{height:350px;overflow-y: hidden;outline: none; }
  330. .background{top:20px;}
  331. .cloud ,.cloud_1,.cloud_2,.cloud_3,.cloud_4,.cloud_5,.cloud_6,.cloud_7,.cloud_8{margin-top:-20px;margin-left:380px;width:380px;}
  332. .cloud_1{right:0px;top:180px;width: 230px;position: absolute;}
  333. .cloud_2{margin-left: 350px;margin-top: -50px;width: 170px;}
  334. .cloud_3,.cloud_3_1{left: 300px;top: 180px;width: 255px;color: #999;position: absolute;text-align: left;font-size: 13px;}
  335. .cloud_3_1 {width: 275px;left: 670px;top: 140px;}
  336. .cloud_4{margin-left: 295px;margin-top: -20px;width: 370px;}
  337. .cloud_5{top: 100px;width: 230px;right: 0px;position: absolute;font-size: 13px;}
  338. .cloud_6{width: 330px;margin-top: -20px;margin-left: 370px;}
  339. .cloud_7{margin-top: -20px;margin-left: 380px;width: 470px;}
  340. .cloud_8{top: 128px;width: 230px;right: 0px;position: absolute;font-size: 13px;}
  341. .cloud_1,.cloud_3,.cloud_5,.cloud_8,.cloud_3_1{height:300px;overflow-y:auto;}
  342. .background video{width:580px;}
  343. .card-holder {top:20px;}
  344. .card {padding: 6px 15px 6px 15px;}
  345. .maker-box{margin:20px auto auto 50px;}
  346. .maker-img img{width: 200px;}
  347. .maker-txt {width:300px;font-size: 12px;height:380px;overflow-y: auto;}
  348. #m1,#m2,#m3{width: 50px;height: 50px;display: block;}
  349. .title_bg ul {width:110px;margin-left:45%;padding: 10px;position: absolute;float: left;z-index: 89;}
  350. .title_bg ul li{width: 55px;height:55px;margin: 5px 20px;}
  351. .title_bg ul li img{width: 50px;}
  352. .title_bg{width: 60%;height:174px;background: url(../images/endbg.png) no-repeat center left #363636;}
  353. #mymodel{position: absolute;top: -5px;left:0px;width:548px;height:500px;}
  354. .title-txt{float: left;width: 440px;margin-left:55%;margin-top:-40px;color: #858585;font-family: "黑体";font-size: 14px;}
  355. .title-txt h2{font-size: 20px;width: 80px;height: 10px;}
  356. .title-txt p{text-indent: 2em;}
  357. .model1_txt,.model2_txt,.model3_txt{float: left;width: 500px;margin-left:56%;margin-top:90px;color: #858585;height:540px;}
  358. .model2_txt{margin-top: 80px;}
  359. .model1_txt img,.model2_txt img,.model3_txt img{width:38px;}
  360. span.font{font-size: 15px;display: block;margin-bottom: 7px;}
  361. #return-btn{width:50px;height: 50px;position: absolute;}
  362. #return-btn img{width: 50px;}
  363. }
  364. .landing_arrow {
  365. width:22px;
  366. height:26px;
  367. margin:auto;
  368. position:absolute;
  369. bottom:20px;
  370. left:50%;
  371. margin-left:-22px;
  372. z-index: 6;
  373. -webkit-animation:landing_arrow_anim 1s infinite;
  374. -moz-animation:landing_arrow_anim 1s infinite;
  375. -o-animation:landing_arrow_anim 1s infinite;
  376. animation:landing_arrow_anim 1s infinite;
  377. cursor:pointer
  378. }
  379. @-webkit-keyframes landing_arrow_anim {
  380. 0%,100% {
  381. bottom:12px
  382. }
  383. 50% {
  384. bottom:23px
  385. }
  386. }
  387. @-moz-keyframes landing_arrow_anim {
  388. 0%,100% {
  389. bottom:12px
  390. }
  391. 50% {
  392. bottom:23px
  393. }
  394. }
  395. @-o-keyframes landing_arrow_anim {
  396. 0%,100% {
  397. bottom:12px
  398. }
  399. 50% {
  400. bottom:23px
  401. }
  402. }
  403. @keyframes landing_arrow_anim {
  404. 0%,100% {
  405. bottom:12px
  406. }
  407. 50% {
  408. bottom:23px
  409. }}
  410. /***************************音频********************************/
  411. #audio-6{width: 100%;height: 100%;position: absolute;}