_modal.scss 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. @charset "UTF-8";
  2. .modal-research {
  3. &::before {
  4. content: "";
  5. width: 300%;
  6. height: 300%;
  7. position: fixed;
  8. left: 50%;
  9. top: 50%;
  10. background: url(../../images/modal-bg.png) $blue-d repeat;
  11. transform: translate(-50%, -50%) rotate(-45deg);
  12. background-size: 20em auto;
  13. }
  14. .btn-close {
  15. position: absolute;
  16. right: 1em;
  17. top: 1em;
  18. opacity: 0.3;
  19. z-index: 1;
  20. }
  21. .modal {
  22. &-dialog {
  23. max-width: 40em;
  24. }
  25. &-content {
  26. box-shadow: 0.8em 0.8em 1em rgba(#000, 0.3);
  27. }
  28. &-body {
  29. transition: 0.3s;
  30. padding: 2.5em 3em 2.3em;
  31. h2 {
  32. color: $blue-d;
  33. font-size: 1.4em;
  34. margin: 0;
  35. }
  36. h3 {
  37. color: $blue;
  38. font-size: 1em;
  39. margin: 0;
  40. }
  41. h4 {
  42. margin: 0;
  43. font-size: 0.9em;
  44. }
  45. p {
  46. color: $gray;
  47. font-size: 0.8em;
  48. margin: 0;
  49. font-weight: 300;
  50. span {
  51. font-size: 0.8em;
  52. }
  53. }
  54. }
  55. }
  56. }
  57. .modal-proud {
  58. .modal {
  59. &__title {
  60. margin-bottom: 0.7em;
  61. }
  62. &__preface {
  63. margin-bottom: 0.5em;
  64. h3 {
  65. margin-bottom: 0.1em;
  66. }
  67. }
  68. &__list {
  69. }
  70. &__item {
  71. display: flex;
  72. align-items: flex-start;
  73. justify-content: flex-start;
  74. }
  75. &__pic {
  76. flex: 0 0 4em;
  77. margin-right: 0.7em;
  78. margin-top: 0.8em;
  79. img {
  80. width: 100%;
  81. height: auto;
  82. }
  83. }
  84. &__text {
  85. flex: 1;
  86. padding: 0.9em 0;
  87. border-bottom: 0.1em solid rgba($gray, 0.3);
  88. h4 {
  89. color: $blue;
  90. font-size: 0.9em;
  91. margin-bottom: 0.2em;
  92. }
  93. p {
  94. font-size: 0.8em;
  95. }
  96. }
  97. &__additional {
  98. display: flex;
  99. align-items: flex-start;
  100. justify-content: flex-start;
  101. border: 0.1em solid rgba($gray, 0.3);
  102. border-radius: 0.5em;
  103. padding: 0.3em 0.7em 0.7em;
  104. margin-top: 0.7em;
  105. &__icon {
  106. width: 3em;
  107. margin-right: 0.7em;
  108. img {
  109. width: 100%;
  110. height: auto;
  111. }
  112. }
  113. p {
  114. font-size: 0.8em;
  115. }
  116. }
  117. }
  118. }
  119. .modal-feature {
  120. .modal {
  121. &-body {
  122. padding: 1.5em 3em 1.3em;
  123. }
  124. &__title {
  125. margin-bottom: 1em;
  126. }
  127. &__principle {
  128. position: relative;
  129. display: flex;
  130. justify-content: space-around;
  131. align-items: center;
  132. margin-bottom: 1.8em;
  133. &__item {
  134. position: relative;
  135. width: 15em;
  136. height: 15em;
  137. border-radius: 100%;
  138. &-blue {
  139. background-color: $blue;
  140. padding: 3.5em 1.8em 2.5em 2em;
  141. &::before {
  142. content: "";
  143. display: block;
  144. width: 7.5em;
  145. height: 1px;
  146. background-color: rgba($gray, 0.3);
  147. position: absolute;
  148. top: 50%;
  149. transform: translateY(-50%);
  150. right: -7.5em;
  151. }
  152. }
  153. &-red {
  154. background-color: $red;
  155. padding: 3.5em 0.9em 2.5em 1.3em;
  156. }
  157. }
  158. &__title {
  159. margin-bottom: 0.5em;
  160. h3 {
  161. font-size: 1.2em;
  162. text-align: center;
  163. color: $white;
  164. }
  165. }
  166. &__text {
  167. p {
  168. color: $white;
  169. line-height: 1.4;
  170. font-size: 0.8em;
  171. }
  172. &-pc {
  173. display: block;
  174. }
  175. &-mb {
  176. display: none;
  177. }
  178. }
  179. }
  180. &__list {
  181. margin-top: 1em;
  182. display: flex;
  183. flex-wrap: wrap;
  184. }
  185. &__item {
  186. width: 33%;
  187. border-left: 0.1em solid $blue;
  188. padding: 0 1em 0 0.5em;
  189. margin-bottom: 1.5em;
  190. h4 {
  191. color: $blue-d;
  192. }
  193. p {
  194. font-size: 0.7em;
  195. line-height: 1.3;
  196. }
  197. }
  198. }
  199. }
  200. .modal-unlimit {
  201. .modal {
  202. &__title {
  203. margin-bottom: 0.7em;
  204. }
  205. &__preface {
  206. margin-bottom: 1.3em;
  207. h3 {
  208. font-size: 0.9em;
  209. font-weight: 300;
  210. margin-bottom: 0.3em;
  211. }
  212. p {
  213. font-size: 0.8em;
  214. line-height: 1.4;
  215. }
  216. }
  217. &__intro {
  218. margin-top: 1.8em;
  219. display: flex;
  220. justify-content: space-between;
  221. &__pic{
  222. width: 45%;
  223. img {
  224. width: 100%;
  225. height: auto;
  226. }
  227. }
  228. p {
  229. font-size: 0.8em;
  230. line-height: 1.4;
  231. }
  232. ul {
  233. width: 54%;
  234. list-style: none;
  235. li {
  236. position: relative;
  237. display: flex;
  238. &::before {
  239. content: "";
  240. display: block;
  241. position: absolute;
  242. width: 0.15em;
  243. height: 0.15em;
  244. background-color: $gray;
  245. border-radius: 100%;
  246. left: -0.7em;
  247. top: 0.5em;
  248. }
  249. }
  250. }
  251. }
  252. }
  253. }
  254. .modal-show {
  255. h3 {
  256. font-weight: 400;
  257. }
  258. .modal {
  259. &-body {
  260. padding: 2.5em 2.3em 2.3em;
  261. }
  262. &__title {
  263. margin-bottom: 0.5em;
  264. }
  265. &__preface {
  266. margin-bottom: 1.5em;
  267. }
  268. &__operation {
  269. margin-top: 0.8em;
  270. margin-bottom: 1.5em;
  271. &__item {
  272. display: flex;
  273. align-items: flex-start;
  274. margin-bottom: 0.5em;
  275. p {
  276. font-size: 0.7em;
  277. }
  278. }
  279. &__step {
  280. background-color: $blue;
  281. padding: 0.2em 0.5em;
  282. border-radius: 1em;
  283. margin-right: 0.7em;
  284. p {
  285. color: $white;
  286. white-space: nowrap;
  287. line-height: 1;
  288. }
  289. }
  290. &__text {
  291. flex: 1;
  292. padding-bottom: 0.5em;
  293. border-bottom: 0.1em solid rgba($gray, 0.3);
  294. }
  295. }
  296. &__feature {
  297. display: flex;
  298. justify-content: space-between;
  299. align-items: flex-start;
  300. height: 7em;
  301. margin-top: 0.8em;
  302. &__item {
  303. width: 19%;
  304. height: 100%;
  305. border-radius: 0.5em;
  306. border: 0.1em solid rgba($gray, 0.3);
  307. display: flex;
  308. justify-content: center;
  309. align-items: center;
  310. p {
  311. text-align: center;
  312. font-size: 0.7em;
  313. .red {
  314. font-size: 1.3em;
  315. color: $red;
  316. }
  317. }
  318. }
  319. }
  320. }
  321. }
  322. .modal-test {
  323. .modal {
  324. &-body {
  325. padding: 2.5em 2.6em 2.3em;
  326. }
  327. &__title {
  328. margin-bottom: 0.4em;
  329. }
  330. &__preface {
  331. p {
  332. color: $blue;
  333. }
  334. }
  335. &__game {
  336. margin-top: 1.5em;
  337. &__item {
  338. border-radius: 0.4em;
  339. border: 0.1em solid $blue;
  340. overflow: hidden;
  341. margin-bottom: 0.8em;
  342. &.active {
  343. .modal__game__ques {
  344. padding: 0.5em 0.6em 0.6em;
  345. }
  346. .modal__game__btns {
  347. display: none;
  348. }
  349. }
  350. }
  351. &__ques {
  352. position: relative;
  353. background-color: $blue;
  354. padding: 1em 0.6em 1.1em;
  355. p {
  356. color: $white;
  357. line-height: 1;
  358. .num {
  359. font-size: 1.2em;
  360. font-weight: 400;
  361. margin-right: 0.7em;
  362. }
  363. }
  364. }
  365. &__btns {
  366. position: absolute;
  367. top: 50%;
  368. transform: translateY(-50%);
  369. right: 0.4em;
  370. display: flex;
  371. &__btn {
  372. width: 2em;
  373. height: 2em;
  374. display: flex;
  375. justify-content: center;
  376. align-items: center;
  377. border-radius: 0.3em;
  378. transition: 0.3s;
  379. cursor: pointer;
  380. img {
  381. width: 65%;
  382. height: auto;
  383. }
  384. &:hover {
  385. background-color: rgba($white, 0.3);
  386. }
  387. }
  388. }
  389. &__ans {
  390. justify-content: flex-start;
  391. align-items: center;
  392. padding: 0.2em 0.6em 0.6em;
  393. display: none;
  394. &__icon {
  395. width: 1.2em;
  396. margin-right: 0.7em;
  397. img {
  398. width: 100%;
  399. height: auto;
  400. }
  401. &-circle {
  402. width: 2em;
  403. }
  404. }
  405. p {
  406. margin-top: 0.3em;
  407. }
  408. }
  409. }
  410. }
  411. }
  412. @media screen and (max-width: 992px) {
  413. .modal-research {
  414. .modal {
  415. &-dialog {
  416. margin: 1.5em 0.7em;
  417. }
  418. &-body {
  419. padding: 2.5em 1em 1em;
  420. h2 {
  421. font-size: 1.2em;
  422. font-weight: 600;
  423. }
  424. h3 {
  425. font-size: 0.9em;
  426. font-weight: 600;
  427. }
  428. h4 {
  429. font-size: 0.8em;
  430. }
  431. p {
  432. font-size: 0.7em;
  433. }
  434. }
  435. }
  436. }
  437. .modal-proud {
  438. flex: 0 0 3.5em;
  439. .modal {
  440. &-body {
  441. padding: 2.5em 1.5em 2em;
  442. }
  443. &__text {
  444. h4 {
  445. font-size: 0.8em;
  446. }
  447. p {
  448. font-size: 0.7em;
  449. word-break: break-all;
  450. }
  451. }
  452. &__pic {
  453. flex: 0 0 3.5em;
  454. }
  455. &__additional {
  456. &__icon {
  457. flex: 0 0 1.5em;
  458. width: 1.5em;
  459. }
  460. }
  461. }
  462. }
  463. .modal-feature {
  464. .modal {
  465. &-body {
  466. padding: 2.5em 1.3em 1em;
  467. }
  468. &__principle {
  469. flex-wrap: wrap;
  470. h3 {
  471. font-size: 1em;
  472. font-weight: 300;
  473. }
  474. &__item {
  475. width: 6.5em;
  476. height: 6.5em;
  477. &-blue {
  478. &::before {
  479. display: none;
  480. }
  481. }
  482. }
  483. &__item {
  484. padding: 0;
  485. display: flex;
  486. justify-content: center;
  487. align-items: center;
  488. margin-bottom: 0.6em;
  489. &-blue {
  490. padding: 0;
  491. }
  492. }
  493. &__title {
  494. margin-bottom: 0;
  495. }
  496. &__text {
  497. p {
  498. color: $gray;
  499. }
  500. &-pc {
  501. display: none;
  502. }
  503. &-mb {
  504. width: 8.5em;
  505. display: block;
  506. }
  507. }
  508. }
  509. &__item {
  510. width: 50%;
  511. margin-bottom: 1em;
  512. }
  513. }
  514. }
  515. .modal-unlimit {
  516. .modal {
  517. &-body {
  518. padding: 2.5em 1em 1.3em;
  519. }
  520. &__preface {
  521. margin-bottom: 1em;
  522. }
  523. &__intro {
  524. display: block;
  525. margin-top: 0;
  526. &__pic {
  527. width: 65%;
  528. margin-bottom: 2.2em;
  529. }
  530. ul {
  531. width: 79%;
  532. list-style: none;
  533. padding-left: 1em;
  534. margin-bottom: 0;
  535. }
  536. }
  537. }
  538. }
  539. .modal-show {
  540. .modal {
  541. &__preface {
  542. margin-bottom: 1em;
  543. }
  544. &__operation {
  545. margin-bottom: 1em;
  546. }
  547. &__feature {
  548. flex-wrap: wrap;
  549. height: auto;
  550. &__item {
  551. height: 5.5em;
  552. margin-bottom: 0.5em;
  553. &:nth-child(1), &:nth-child(2), &:nth-child(3) {
  554. width: 32%;
  555. }
  556. &:nth-child(4), &:nth-child(5) {
  557. width: 49%;
  558. }
  559. p {
  560. width: 100%;
  561. .red {
  562. font-size: 1.2em;
  563. font-weight: 400;
  564. }
  565. }
  566. }
  567. }
  568. }
  569. }
  570. .modal-test {
  571. .modal {
  572. &-body {
  573. padding: 2.5em 1em 0.7em;
  574. }
  575. &__title {
  576. margin-bottom: 0.2em;
  577. }
  578. &__game {
  579. margin-bottom: 0.6em;
  580. &__item {
  581. &.active {
  582. .modal__game__ques {
  583. padding: 0.3em 4.5em 0.5em 0.6em;
  584. }
  585. }
  586. }
  587. &__ques {
  588. padding: 0.3em 4.5em 0.5em 0.6em;
  589. p {
  590. line-height: 1.3;
  591. display: flex;
  592. justify-content: flex-start;
  593. align-items: center;
  594. }
  595. }
  596. &__btns {
  597. &__btn {
  598. width: 1.8em;
  599. height: 1.78em;
  600. }
  601. }
  602. &__ans {
  603. &__icon {
  604. flex: 0 0 1em;
  605. width: 1em;
  606. }
  607. }
  608. }
  609. }
  610. }
  611. }