index.scss 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957
  1. @import 'photo-sphere-viewer.min.css';
  2. @import 'reset.scss';
  3. @import './base/mixin.scss';
  4. html, body {
  5. width: 100%;
  6. height: 100%;
  7. overflow: hidden;
  8. margin: 0;
  9. padding: 0;
  10. -webkit-text-size-adjust:100%;
  11. }
  12. .clearfix{
  13. zoom: 1;
  14. &::after{
  15. content: '';
  16. display: block;
  17. visibility: hidden;
  18. clear: both;
  19. height: 0;
  20. }
  21. }
  22. #photosphere {
  23. width: 100%;
  24. height: 100%;
  25. .link{
  26. color: #333333;
  27. text-decoration: none;
  28. }
  29. .btn {
  30. color: #ffffff;
  31. }
  32. .pub-btn{
  33. color: #ffffff;
  34. line-height: px2rem(60);
  35. border-radius: px2rem(35);
  36. background-color: #ff6600;
  37. height: px2rem(60);
  38. padding: 0 px2rem(40);
  39. position: absolute;
  40. font-size: px2rem(24);
  41. cursor: pointer;
  42. transition: .2s all ease-in-out;
  43. &:hover{
  44. background-color: #e45d03;
  45. }
  46. }
  47. .watch-movie-btn{
  48. right: px2rem(15);
  49. bottom: px2rem(15);
  50. }
  51. .wrapper{
  52. top: 0;
  53. bottom: 0;
  54. right: 0;
  55. width: px2rem(200);
  56. }
  57. .wrapper img{
  58. width: 100%;
  59. }
  60. .nav{
  61. position: fixed;
  62. top: px2rem(30);
  63. left: px2rem(30);
  64. z-index: 99;
  65. a{
  66. float: left;
  67. text-decoration: none;
  68. color: #ffffff;
  69. background-color: rgba($color: #000000, $alpha: .6);
  70. line-height: px2rem(70);
  71. font-size: px2rem(18);
  72. font-weight: bold;
  73. width: px2rem(180);
  74. text-align: center;
  75. cursor: pointer;
  76. transition: .2s all ease-in-out;
  77. &.current{
  78. opacity: 1;
  79. background-color: #ff6600;
  80. color: #ffffff;
  81. text-shadow: 0px 0 1px #ffffff;
  82. }
  83. &.disable{
  84. background: url('../img/lock.png') px2rem(10) center no-repeat;
  85. color: #4c4c4c;
  86. background-color: #070c10;
  87. background-size: px2rem(20) px2rem(20);
  88. pointer-events: none;
  89. }
  90. &:hover{
  91. opacity: 1;
  92. }
  93. }
  94. }
  95. .pub-modal{
  96. position: fixed;
  97. z-index: 999;
  98. top: px2rem(120);
  99. left: px2rem(30);
  100. right: px2rem(30);
  101. display: none;
  102. overflow: hidden;
  103. background-color: rgba($color: #000000, $alpha: 0.8);
  104. &.fullscreen-modal{
  105. top: 0;
  106. left: 0;
  107. right: 0;
  108. bottom: 0;
  109. overflow: auto;
  110. }
  111. .top-bar {
  112. padding: 0 px2rem(20);
  113. height: px2rem(60);
  114. line-height: px2rem(60);
  115. font-weight: bold;
  116. color: #ff6600;
  117. border-bottom: 1px solid #ff6600;
  118. font-size: px2rem(24);
  119. }
  120. .container{
  121. position: relative;
  122. padding: px2rem(30);
  123. box-sizing: border-box;
  124. }
  125. .article-title{
  126. font-size: px2rem(28);
  127. color: #ffffff;
  128. font-weight: bold;
  129. margin-bottom: px2rem(12);
  130. text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000;
  131. }
  132. .article-text{
  133. color: #ffffff;
  134. font-size: px2rem(24);
  135. }
  136. }
  137. .close-icon{
  138. float: right;
  139. width: px2rem(32);
  140. height: px2rem(32);
  141. margin-top: px2rem(12);
  142. cursor: pointer;
  143. background: url('../img/close-icon.png');
  144. background-size: 100%;
  145. }
  146. .suggest-modal{
  147. .container{
  148. .line{
  149. position: absolute;
  150. bottom: 0;
  151. left: px2rem(20);
  152. right: px2rem(20);
  153. border-bottom: 1px dotted #808080;
  154. }
  155. .poster{
  156. float: left;
  157. width: px2rem(594);
  158. }
  159. .introduce{
  160. position: relative;
  161. margin-left: px2rem(620);
  162. color: #ffffff;
  163. .article-text{
  164. line-height: px2rem(42);
  165. }
  166. }
  167. }
  168. .tips{
  169. padding: px2rem(20);
  170. img{
  171. float: left;
  172. width: px2rem(120);
  173. height: px2rem(120);
  174. margin-left: px2rem(30);
  175. border-radius: 50%;
  176. }
  177. .tips-wrap{
  178. margin-left: px2rem(190);
  179. h3{
  180. font-size: px2rem(30);
  181. color: #b0e345;
  182. margin-bottom: px2rem(10);
  183. text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000;
  184. font-weight: bold;
  185. }
  186. p{
  187. font-size: px2rem(24);
  188. color: #ffffff;
  189. line-height: 1.6;
  190. }
  191. }
  192. }
  193. }
  194. .big-modal{
  195. .left-side{
  196. float: left;
  197. width: px2rem(590);
  198. img{
  199. width: 100%;
  200. }
  201. p{
  202. margin-top: px2rem(6);
  203. color: #ffffff;
  204. font-size: px2rem(24);
  205. line-height: 1.6;
  206. }
  207. }
  208. .right-side{
  209. margin-left: px2rem(620);
  210. .article-text{
  211. line-height: 1.6;
  212. margin-bottom: px2rem(25);
  213. &:last-of-type{
  214. margin-bottom: 0;
  215. }
  216. }
  217. }
  218. }
  219. .small-modal{
  220. img{
  221. float: left;
  222. width: px2rem(592);
  223. }
  224. .article-text{
  225. margin-left: px2rem(612);
  226. line-height: 1.6;
  227. }
  228. }
  229. .snow-circle{
  230. width: px2rem(24);
  231. opacity: .8;
  232. height: auto;
  233. }
  234. #psv-marker-location-foot{
  235. border-radius: 50%;
  236. animation: jump 1.3s ease-in-out infinite;
  237. }
  238. #psv-marker-location-deer{
  239. border-radius: 50%;
  240. animation: jump 1.3s ease-in-out infinite;
  241. }
  242. #psv-marker-location-rabit{
  243. border-radius: 50%;
  244. animation: jump 1.3s ease-in-out infinite;
  245. }
  246. #psv-marker-location-beer{
  247. border-radius: 50%;
  248. animation: jump 1.3s ease-in-out infinite;
  249. }
  250. #psv-marker-location-lake{
  251. border-radius: 50%;
  252. animation: jump 1.3s ease-in-out infinite;
  253. }
  254. #psv-marker-location-road{
  255. border-radius: 50%;
  256. animation: jump 1.3s ease-in-out infinite;
  257. }
  258. #psv-marker-location-lynx{
  259. border-radius: 50%;
  260. animation: jump 1.3s ease-in-out infinite;
  261. }
  262. #psv-marker-location-bird{
  263. border-radius: 50%;
  264. animation: jump 1.3s ease-in-out infinite;
  265. }
  266. #psv-marker-location-fox{
  267. border-radius: 50%;
  268. animation: jump 1.3s ease-in-out infinite;
  269. }
  270. @keyframes jump {
  271. 0% {
  272. margin-top: 0;
  273. opacity: .8;
  274. width: 35px;
  275. height: 35px;
  276. }
  277. 50% {
  278. margin-top: -15px;
  279. opacity: 1;
  280. width: 40px;
  281. height: 40px;
  282. }
  283. 100% {
  284. margin-top: 0;
  285. opacity: .8;
  286. width: 35px;
  287. height: 35px;
  288. }
  289. }
  290. .psv-tooltip{
  291. cursor: pointer;
  292. }
  293. .hide-video{
  294. opacity: 0;
  295. transform: translate(-3000px);
  296. }
  297. .poster{
  298. cursor: pointer;
  299. }
  300. .video-wrapper{
  301. position: fixed;
  302. z-index: 1999;
  303. top: 0;
  304. left: 0;
  305. right: 0;
  306. bottom: 0;
  307. display: flex;
  308. align-items: center;
  309. justify-content: center;
  310. background-color: rgba($color: #000000, $alpha: .4);
  311. video {
  312. width: px2rem(800);
  313. }
  314. .part-screen{
  315. position: relative;
  316. }
  317. .close-icon{
  318. position: absolute;
  319. z-index: 999;
  320. top: -px2rem(15);
  321. right: -px2rem(15);
  322. margin-top: 0;
  323. }
  324. }
  325. .fullscreen-video{
  326. position: fixed;
  327. z-index: 1999;
  328. top: 0;
  329. left: 0;
  330. right: 0;
  331. bottom: 0;
  332. display: flex;
  333. align-items: center;
  334. justify-content: center;
  335. background-color: rgba($color: #000000, $alpha: .6);
  336. video {
  337. width: px2rem(850);
  338. height: auto;
  339. }
  340. }
  341. .close-full-video{
  342. position: absolute;
  343. z-index: 2000;
  344. top: px2rem(5);
  345. right: px2rem(10);
  346. }
  347. .mod-full-picture{
  348. position: fixed;
  349. z-index: 1000;
  350. top: 0;
  351. left: 0;
  352. right: 0;
  353. bottom: 0;
  354. .go-back{
  355. position: absolute;
  356. top: px2rem(30);
  357. right: px2rem(30);
  358. padding: 0 px2rem(40);
  359. }
  360. .bg-move{
  361. position: absolute;
  362. z-index: -1;
  363. top: -40px;
  364. right: -40px;
  365. left: -40px;
  366. bottom: -40px;
  367. }
  368. }
  369. #lookout-pic{
  370. background: url('../img/lookout-pic.jpg') center center no-repeat;
  371. background-size: cover;
  372. }
  373. #lookout-snow-pic{
  374. background: url('../img/P2-lookout.jpg') center center no-repeat;
  375. background-size: cover;
  376. }
  377. #lookout-hunt-pic{
  378. background: url('../img/P3-lookout.jpg') center center no-repeat;
  379. background-size: cover;
  380. }
  381. #lake-pic{
  382. .bg-move{
  383. background: url('../img/P1-lake.jpg') center center no-repeat;
  384. background-size: cover;
  385. }
  386. }
  387. #road-pic{
  388. .bg-move{
  389. background: url('../img/P2-road.jpg') center center no-repeat;
  390. background-size: cover;
  391. }
  392. }
  393. #p3-road-pic{
  394. .bg-move{
  395. background: url('../img/P3-road.jpg') center center no-repeat;
  396. background-size: cover;
  397. }
  398. }
  399. .e-tips{
  400. position: absolute;
  401. width: px2rem(1000);
  402. top: 50%;
  403. left: 50%;
  404. transform: translate(-50%, -50%);
  405. animation: tips 1.2s ease-in-out infinite;
  406. }
  407. @keyframes tips {
  408. 0%{
  409. margin-top: 0;
  410. }
  411. 50%{
  412. margin-top: px2rem(20);
  413. }
  414. 100%{
  415. margin-top: 0;
  416. }
  417. }
  418. .loading-bg{
  419. position: fixed;
  420. top: 0;
  421. left: 0;
  422. right: 0;
  423. bottom: 0;
  424. z-index: 999;
  425. .loading-gif {
  426. position: absolute;
  427. top: px2rem(15);
  428. left: px2rem(15);
  429. width: px2rem(150);
  430. height: px2rem(150);
  431. }
  432. }
  433. .loading-bg-scene1{
  434. background: url('../img/P1-loading.jpg') center center no-repeat;
  435. background-size: cover;
  436. }
  437. .loading-bg-scene2{
  438. background: url('../img/P2-loading.jpg') center center no-repeat;
  439. background-size: cover;
  440. }
  441. .loading-bg-scene3{
  442. background: url('../img/P3-loading.jpg') center center no-repeat;
  443. background-size: cover;
  444. }
  445. .hunt-btn{
  446. // position: absolute;
  447. // left: px2rem(15);
  448. display: inline-block;
  449. position: static;
  450. margin-top: px2rem(10);
  451. box-shadow: none;
  452. }
  453. .equit-tips{
  454. position: absolute;
  455. top: 50%;
  456. left: 50%;
  457. transform: translate(-50%,-50%);
  458. animation: tips 1.2s ease-in-out infinite;
  459. }
  460. .equit-success {
  461. display: none;
  462. position: absolute;
  463. top: 50%;
  464. left: 50%;
  465. transform: translate(-50%,-50%);
  466. width: px2rem(600);
  467. border-radius: px2rem(6);
  468. background-color: rgba($color: #ffffff, $alpha: .6);
  469. text-align: center;
  470. padding: px2rem(50) 0 px2rem(20);
  471. h3{
  472. text-align: center;
  473. color: #fffefe;
  474. font-size: px2rem(32);
  475. font-weight: bold;
  476. margin-bottom: px2rem(40);
  477. text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000;
  478. }
  479. .close-equit-btn{
  480. position: static;
  481. display: inline-block;
  482. box-shadow: none;
  483. padding: 0 px2rem(60);
  484. // line-height: px2rem(60);
  485. // height: px2rem(60);
  486. }
  487. }
  488. .start-equit-btn {
  489. right: px2rem(15);
  490. bottom: px2rem(15);
  491. box-shadow: none;
  492. }
  493. .equit-modal{
  494. top: 0;
  495. left: 0;
  496. right: 0;
  497. bottom: 0;
  498. .main{
  499. margin-top: px2rem(20);
  500. }
  501. .img-box{
  502. float: left;
  503. width: px2rem(450);
  504. text-align: center;
  505. img{
  506. display: inline-block;
  507. height: auto;
  508. }
  509. .weapon-img{
  510. width: px2rem(359);
  511. }
  512. .fodder-img{
  513. width: px2rem(187);
  514. }
  515. .bag-b-img{
  516. width: px2rem(320);
  517. }
  518. .aim-img{
  519. width: px2rem(364);
  520. }
  521. .bag-b-hunt-img{
  522. width: px2rem(200);
  523. }
  524. }
  525. .info{
  526. margin-left: px2rem(470);
  527. color: #ffffff;
  528. font-size: px2rem(24);
  529. .title{
  530. font-size: px2rem(28);
  531. margin-bottom: px2rem(10);
  532. color: #ffffff;
  533. font-weight: bold;
  534. }
  535. .text{
  536. line-height: 2;
  537. }
  538. }
  539. }
  540. .equit-nav{
  541. display: flex;
  542. .nav-item-wrap{
  543. flex: 1;
  544. height: px2rem(60);
  545. line-height: px2rem(60);
  546. text-align: center;
  547. cursor: pointer;
  548. &.active{
  549. background: url('../img/m/euqit-nav-bg.png') center center no-repeat;
  550. background-size: auto px2rem(60);
  551. }
  552. }
  553. .nav-item{
  554. display: inline-block;
  555. line-height: px2rem(32);
  556. color: #fffefe;
  557. font-size: px2rem(30);
  558. font-weight: bold;
  559. i{
  560. display: inline-block;
  561. width: px2rem(32);
  562. height: px2rem(36);
  563. vertical-align: bottom;
  564. }
  565. .weapon-icon{
  566. background: url('../img/weapon-icon.png') center center no-repeat;
  567. background-size: 100%;
  568. }
  569. .fodder-icon{
  570. background: url('../img/fodder-icon.png') center center no-repeat;
  571. background-size: 100%;
  572. }
  573. .aim-icon{
  574. background: url('../img/glass-icon.png') center center no-repeat;
  575. background-size: 100%;
  576. }
  577. }
  578. }
  579. .book-icon{
  580. position: fixed;
  581. z-index: 10;
  582. width: px2rem(156);
  583. height: px2rem(50);
  584. background: url('../img/book-icon.jpg') center center no-repeat;
  585. background-size: 100%;
  586. color: #ffffff;
  587. right: px2rem(20);
  588. bottom: px2rem(20);
  589. cursor: pointer;
  590. }
  591. .fade-in{
  592. opacity: 0;
  593. }
  594. .delay-200 {
  595. animation-delay: 200ms;
  596. }
  597. .delay-400 {
  598. animation-delay: 400ms;
  599. }
  600. .progress-modal{
  601. position: fixed;
  602. width: px2rem(500);
  603. height: px2rem(240);
  604. box-sizing: border-box;
  605. padding-top: px2rem(40);
  606. top: px2rem(100);
  607. right: px2rem(20);
  608. background-color: rgba($color: #000000, $alpha: .5);
  609. border: 1px solid #ff620c;
  610. .tips{
  611. text-align: center;
  612. color: #ffffff;
  613. font-size: px2rem(24);
  614. margin-bottom: px2rem(24);
  615. }
  616. .progress{
  617. text-align: center;
  618. font-size: px2rem(20);
  619. color: #ffffff;
  620. }
  621. }
  622. .reset-modal{
  623. display: none;
  624. z-index: 99;
  625. top: 50%;
  626. left: 50%;
  627. margin-top: -px2rem(120);
  628. margin-left: -px2rem(250);
  629. .tips{
  630. font-weight: bold;
  631. font-size: px2rem(30);
  632. text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000;
  633. }
  634. .btn-wrap{
  635. width: px2rem(300);
  636. margin: px2rem(60) auto 0 auto;
  637. }
  638. .btn{
  639. display: inline-block;
  640. width: px2rem(100);
  641. height: px2rem(50);
  642. line-height: px2rem(50);
  643. text-align: center;
  644. background-color: #ff6600;
  645. color: #ffffff;
  646. font-size: px2rem(24);
  647. cursor: pointer;
  648. &:hover{
  649. background-color: #e45d03
  650. }
  651. }
  652. .yes-btn{
  653. float: left;
  654. }
  655. .no-btn{
  656. float: right;
  657. }
  658. }
  659. .book-success-modal{
  660. display: block;
  661. background-color: rgba($color: #000000, $alpha: .9);
  662. .btn-wrap{
  663. text-align: center;
  664. }
  665. .tips{
  666. font-size: px2rem(28);
  667. }
  668. }
  669. .complete-modal{
  670. background-color: rgba($color: #000000, $alpha: .6);
  671. width: px2rem(600);
  672. height: auto;
  673. padding: px2rem(30) px2rem(20);
  674. display: none;
  675. z-index: 99;
  676. top: 50%;
  677. left: 50%;
  678. transform: translate(-50%, -50%);
  679. .tips{
  680. font-weight: bold;
  681. text-shadow: 0 2px #000000, 2px 0 #000000, -2px 0 #000000, 0 -2px #000000;
  682. }
  683. .btn-wrap{
  684. width: px2rem(180);
  685. margin: 0 auto;
  686. }
  687. .btn{
  688. display: inline-block;
  689. width: px2rem(120);
  690. height: px2rem(60);
  691. line-height: px2rem(60);
  692. text-align: center;
  693. background-color: #ff6600;
  694. color: #ffffff;
  695. font-size: px2rem(24);
  696. cursor: pointer;
  697. &:hover{
  698. background-color: #e45d03
  699. }
  700. }
  701. }
  702. .toolbar-box{
  703. position: fixed;
  704. z-index: 99;
  705. top: px2rem(30);
  706. right: 0;
  707. width: px2rem(305);
  708. text-align: center;
  709. .toolbar-icon{
  710. display: inline-block;
  711. margin: 0 px2rem(10);
  712. cursor: pointer;
  713. width: px2rem(60);
  714. height: px2rem(60);
  715. position: relative;
  716. background-color: rgba($color: #000000, $alpha: .6);
  717. border-radius: 50%;
  718. }
  719. .snow-icon{
  720. &:after{
  721. content: '';
  722. position: absolute;
  723. width: px2rem(30);
  724. height: px2rem(30);
  725. top: 50%;
  726. left: 50%;
  727. margin-top: -px2rem(15);
  728. margin-left: -px2rem(15);
  729. background: url('../img/snow-icon.png') top center no-repeat;
  730. background-size: 100%;
  731. }
  732. &.close {
  733. opacity: .6;
  734. }
  735. }
  736. .bgm-icon{
  737. &:after{
  738. content: '';
  739. position: absolute;
  740. width: px2rem(30);
  741. height: px2rem(30);
  742. top: 50%;
  743. left: 50%;
  744. margin-top: -px2rem(13);
  745. margin-left: -px2rem(15);
  746. background: url('../img/bgm-icon.png') top center no-repeat;
  747. background-size: 100%;
  748. }
  749. &.pause {
  750. &:after{
  751. background: url('../img/bgm-icon.png') bottom center no-repeat;
  752. background-size: 100%;
  753. }
  754. }
  755. }
  756. .comment-icon{
  757. &:after{
  758. content: '';
  759. position: absolute;
  760. width: px2rem(30);
  761. height: px2rem(30);
  762. top: 50%;
  763. left: 50%;
  764. margin-top: -px2rem(13);
  765. margin-left: -px2rem(15);
  766. background: url('../img/comment-icon.png') center center no-repeat;
  767. background-size: 100%;
  768. }
  769. }
  770. .reset-icon{
  771. &:after{
  772. content: '';
  773. position: absolute;
  774. width: px2rem(30);
  775. height: px2rem(30);
  776. top: 50%;
  777. left: 50%;
  778. margin-top: -px2rem(13);
  779. margin-left: -px2rem(15);
  780. background: url('../img/reset-btn.png') center center no-repeat;
  781. background-size: 100%;
  782. }
  783. }
  784. }
  785. .four-toolbar{
  786. .toolbar-icon{
  787. margin: 0;
  788. }
  789. }
  790. .full-pic-modal{
  791. display: none;
  792. left: px2rem(30);
  793. right: px2rem(30);
  794. top: px2rem(120);
  795. position: fixed;
  796. z-index: 999;
  797. overflow: hidden;
  798. background-color: rgba($color: #000000, $alpha: 0.5);
  799. .top-bar {
  800. padding: 0 px2rem(20);
  801. height: px2rem(60);
  802. line-height: px2rem(60);
  803. font-weight: bold;
  804. color: #ff6600;
  805. border-bottom: 1px solid #ff6600;
  806. font-size: px2rem(24);
  807. }
  808. .container{
  809. position: relative;
  810. padding: px2rem(20);
  811. box-sizing: border-box;
  812. }
  813. p{
  814. color: #ffffff;
  815. font-size: px2rem(24);
  816. margin-bottom: px2rem(10);
  817. line-height: 1.5;
  818. }
  819. .eyes-btn{
  820. margin-left: 0;
  821. margin-top: px2rem(15);
  822. }
  823. }
  824. .eyes-btn{
  825. margin-top: px2rem(30);
  826. margin-left: px2rem(30);
  827. width: px2rem(150);
  828. height: px2rem(60);
  829. background: url('../img/eyes-logo.png') no-repeat;
  830. background-size: 100%;
  831. cursor: pointer;
  832. }
  833. .progress-modal-moblie{
  834. display: none;
  835. position: fixed;
  836. z-index: 99;
  837. top: px2rem(30);
  838. left: px2rem(590);
  839. width: px2rem(440);
  840. line-height: px2rem(70);
  841. height: px2rem(70);
  842. border-radius: px2rem(35);
  843. font-size: px2rem(20);
  844. box-sizing: border-box;
  845. padding: 0 px2rem(20);
  846. color: #ffffff;
  847. background-color: rgba($color: #000000, $alpha: .6);
  848. .progress{
  849. float: right;
  850. }
  851. }
  852. .across-modal{
  853. position: fixed;
  854. z-index: 1000;
  855. display: none;
  856. top: 0;
  857. left: 0;
  858. right: 0;
  859. bottom: 0;
  860. background-color: rgba($color: #000000, $alpha: .8);
  861. }
  862. .across-modal-pop{
  863. position: absolute;
  864. top: 50%;
  865. left: 50%;
  866. z-index: 1000;
  867. width: px2rem(840);
  868. height: px2rem(1000);
  869. border-radius: px2rem(20);
  870. transform: translate(-50%, -50%);
  871. background-color: rgba($color: #000000, $alpha: .6);
  872. text-align: center;
  873. .top-bar{
  874. height: px2rem(120);
  875. background-color: rgba($color: #000000, $alpha: .7);
  876. border-bottom: 1px solid #ff6600;
  877. }
  878. p{
  879. font-size: px2rem(68);
  880. color: #ffffff;
  881. }
  882. .lock-icon{
  883. display: inline-block;
  884. width: px2rem(680);
  885. height: px2rem(680);
  886. background: url('../img/m/orient-lock-pic.png') center center no-repeat;
  887. background-size: 100%;
  888. }
  889. .icon{
  890. text-align: center;
  891. }
  892. }
  893. .equit-full-video{
  894. position: fixed;
  895. z-index: 1000;
  896. top: 0;
  897. left: 0;
  898. right: 0;
  899. bottom: 0;
  900. background-color: #000000;
  901. display: flex;
  902. align-items: center;
  903. justify-content: center;
  904. video{
  905. width: 100%;
  906. height: auto;
  907. }
  908. }
  909. .equit-bag{
  910. position: absolute;
  911. bottom: px2rem(10);
  912. height:px2rem(129);
  913. width: px2rem(90);
  914. }
  915. .bag-a{
  916. left: px2rem(40);
  917. background: url('../img/m/bag-a.png') center center no-repeat;
  918. background-size: 100%;
  919. &.bag-a-active{
  920. background: url('../img/m/bag-a-active.png') center center no-repeat;
  921. background-size: 100%;
  922. }
  923. }
  924. .bag-b{
  925. left: px2rem(360);
  926. background: url('../img/m/bag-b.png') center center no-repeat;
  927. background-size: 100%;
  928. &.bag-b-active{
  929. background: url('../img/m/bag-b-active.png') center center no-repeat;
  930. background-size: 100%;
  931. }
  932. }