You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1614 lines
33 KiB

2 years ago
  1. @charset "utf-8";
  2. html *, html :before, html :after {
  3. box-sizing: border-box;
  4. }
  5. :before, :after {
  6. z-index: -1;
  7. }
  8. body {
  9. overflow-x: hidden;
  10. font-family: sans-serif,Helvetica,Arial,'Noto Sans TC','cwTeXHei','微軟正黑體','華康細黑體';
  11. height: 100% !important;
  12. color: #222;
  13. background: #FFF;
  14. font-weight: 300;
  15. padding-right: 0 !important;
  16. cursor: default;
  17. font-weight: normal;
  18. }
  19. ::selection {
  20. background: #fff;
  21. color: #ee7624;
  22. }
  23. ::-moz-selection {
  24. background: #fff;
  25. color: #ee7624;
  26. }
  27. body::-webkit-scrollbar, .ekko-lightbox::-webkit-scrollbar {
  28. width: 6px;
  29. height: 8px;
  30. }
  31. body::-webkit-scrollbar-thumb, .ekko-lightbox::-webkit-scrollbar-thumb {
  32. background-color: #00387b;
  33. border-radius: 2px;
  34. }
  35. body::-webkit-scrollbar-track-piece, .ekko-lightbox::-webkit-scrollbar-track-piece {
  36. background-color: #e4e4e4;
  37. }
  38. * {
  39. -webkit-box-sizing: border-box;
  40. -moz-box-sizing: border-box;
  41. box-sizing: border-box;
  42. }
  43. .logo {
  44. max-height: 36px;
  45. }
  46. .navbar-default {
  47. background-color: #FFF;
  48. border: none;
  49. position: relative;
  50. margin-bottom: 0;
  51. }
  52. .navbar-brand {
  53. height: 63px;
  54. padding: 17px 0 10px;
  55. }
  56. .navbar-right {
  57. padding-top: 30px;
  58. margin: 0;
  59. }
  60. .navbar-right li {
  61. display: inline-block;
  62. padding-right: 12px;
  63. border-right: 1px dotted rgba(9,57,114,0.5);
  64. margin-right: 12px;
  65. height: 20px;
  66. vertical-align: text-top;
  67. }
  68. .navbar-right a {
  69. color: #093972;
  70. font-size: 13px;
  71. font-weight: 400;
  72. vertical-align: middle;
  73. line-height: 20px;
  74. height: 20px;
  75. }
  76. .navbar-right a:hover, .navbar-right a:focus, .navbar-right a:active {
  77. background: rgba(192,197,204,.2);
  78. color: #093972;
  79. border-radius: 5px;
  80. }
  81. .navbar-right a img {
  82. height: 18px;
  83. margin-right: 5px;
  84. margin-top: -1px;
  85. }
  86. .navbar-right .facebook img, .navbar-right .wechat img {
  87. margin-top: -3px;
  88. }
  89. .nav > .nav-hidden, header .navtop-m, .navbar-brand-m {
  90. display: none;
  91. }
  92. .main-nav {
  93. background-color: #ee7624;
  94. }
  95. .navbar-nav {
  96. width: 100%;
  97. border-left: 1px solid #f58b4f;
  98. border-right: 1px solid #d05c1b;
  99. }
  100. .navbar-nav > li {
  101. width: 25%;
  102. text-align: center;
  103. border-left: 1px solid #d05c1b;
  104. border-right: 1px solid #f58b4f;
  105. }
  106. .navbar-default .navbar-nav > li > a {
  107. font-weight: 400;
  108. font-size: 15px;
  109. font-family: '微軟正黑體';
  110. color: #FFF;
  111. }
  112. .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  113. color: #fff;
  114. background-color: #ec681e;
  115. }
  116. .nav-shadow {
  117. background: url(../img/shadow01.png) center top no-repeat;
  118. width: 100%;
  119. height: 3px;
  120. position: absolute;
  121. bottom: -3px;
  122. clear: both;
  123. z-index: 1;
  124. }
  125. .gotop {
  126. bottom: 76px;
  127. right: -20px !important;
  128. position: fixed;
  129. -ms-transform: translateY(-50%) rotate(90deg);
  130. -webkit-transform: translateY(-50%) rotate(90deg);
  131. transform: translateY(-50%) rotate(90deg);
  132. backface-visibility: hidden;
  133. z-index: 3;
  134. mix-blend-mode: multiply;
  135. }
  136. .gotop span {
  137. display: inline-block;
  138. color: #103a71;
  139. font-size: 15px;
  140. padding: 10px 15px 8px 0;
  141. border-right: 1px solid #103a71;
  142. }
  143. .gotop span::before {
  144. display: block;
  145. position: absolute;
  146. height: 1px;
  147. background: currentColor;
  148. left: -50px;
  149. width: 40px;
  150. top: 50%;
  151. margin-top: -1px;
  152. -ms-transform-origin: left;
  153. -webkit-transform-origin: left;
  154. transform-origin: left;
  155. content: '';
  156. }
  157. .gotop span::after {
  158. display: block;
  159. position: absolute;
  160. height: 1px;
  161. left: -50px;
  162. top: 29%;
  163. color: #103a71;
  164. margin-top: -1px;
  165. -ms-transform-origin: left;
  166. -webkit-transform-origin: left;
  167. transform-origin: left;
  168. content: url(../img/seemore_arrow.png);
  169. }
  170. .gotop span, .gotop span:before, .gotop span:after {
  171. transition: transform .3s ease-in-out;
  172. }
  173. .gotop:hover span:before {
  174. left: -75px;
  175. width: 65px;
  176. -webkit-transition: .1s;
  177. transition: .1s;
  178. }
  179. .gotop:hover span::after {
  180. left: -75px;
  181. -webkit-transition: .1s;
  182. transition: .1s;
  183. }
  184. #main-wrapper {
  185. margin: 0 auto 20px;
  186. }
  187. .project-stats {
  188. overflow: inherit;
  189. }
  190. .page-inner {
  191. background: transparent;
  192. }
  193. .panel-info {
  194. border: none;
  195. padding: 10px 15px 0; /*margin-top:50px*/
  196. }
  197. .footertop {
  198. background: #ee7624;
  199. text-align: right;
  200. font-weight: 700;
  201. font-style: italic;
  202. padding: 10px 0;
  203. }
  204. .footertop i {
  205. margin-left: 10px;
  206. }
  207. footer {
  208. background: #ec681e;
  209. padding: 27px 0 30px;
  210. }
  211. .footer-logo {
  212. width: 200px;
  213. margin-top: 3px;
  214. }
  215. .footer-logo img {
  216. width: 100%;
  217. }
  218. .footer-icon {
  219. display: inline-block;
  220. color: #FFF;
  221. margin-right: 15px;
  222. margin-top: 6px;
  223. vertical-align: bottom;
  224. line-height: 1;
  225. }
  226. .footer-icon img {
  227. max-height: 17px;
  228. margin-right: 3px;
  229. vertical-align: text-bottom;
  230. }
  231. footer .lag {
  232. display: inline-block;
  233. background-image: url(../img/lag-bg.png);
  234. height: 31px;
  235. background-size: cover;
  236. background-repeat: no-repeat;
  237. width: 112px;
  238. text-align: center;
  239. line-height: 32px;
  240. margin-left: 5px;
  241. margin-bottom: 7px;
  242. font-size: 13px;
  243. }
  244. footer .lag:hover {
  245. box-shadow: -10px 4px 10px rgba(0,0,0,0.1),-7px 6px 10px rgba(0,0,0,0.13);
  246. -webkit-transition: all .7s;
  247. -moz-transition: all .7s;
  248. transition: all .7s;
  249. }
  250. footer .lag img {
  251. margin-left: 7px;
  252. vertical-align: text-top;
  253. margin-top: 1px;
  254. }
  255. .copyright {
  256. color: #FFF;
  257. font-size: 13px;
  258. font-style: italic;
  259. }
  260. p {
  261. line-height: 1.7;
  262. font-size: 14px;
  263. color: #555;
  264. font-weight: 400;
  265. }
  266. a, a:hover, a:focus, a:active, a.active, input:focus {
  267. outline: 0;
  268. outline: none;
  269. color: #FFF;
  270. text-decoration: none;
  271. -webkit-transition: .3s ease-in-out;
  272. transition: .3s ease-in-out;
  273. cursor: pointer;
  274. }
  275. section {
  276. padding: 30px 0;
  277. min-height: 50vh;
  278. background: url(../img/footerbg.png) #fFF no-repeat bottom;
  279. background-size: 100%;
  280. }
  281. .banner {
  282. position: relative;
  283. overflow: hidden;
  284. background: url(../img/banner-news.jpg) no-repeat center center;
  285. background-size: cover;
  286. height: 300px;
  287. height: 33vh;
  288. }
  289. .banner-text-detail {
  290. bottom: 30px;
  291. height: 25%;
  292. position: absolute;
  293. left: 50%;
  294. transform: translateX(-50%);
  295. -webkit-transform: translateX(-50%);
  296. -moz-transform: translateX(-50%);
  297. }
  298. .banner-text-detail img {
  299. position: relative;
  300. right: 0;
  301. height: 100%;
  302. max-height: 79px;
  303. }
  304. .social-nav {
  305. padding: 0;
  306. list-style: none;
  307. display: inline-block;
  308. margin: 10px auto;
  309. position: fixed;
  310. -moz-transition: .5s ease-in-out;
  311. -o-transition: .5s ease-in-out;
  312. -webkit-transition: .5s ease-in-out;
  313. transition: .5s;
  314. right: 0;
  315. top: 150px;
  316. z-index: 3;
  317. }
  318. .social-nav li {
  319. float: none;
  320. display: block;
  321. margin-bottom: 2px;
  322. }
  323. .sidebar-1, .sidebar-2 {
  324. display: inline-block;
  325. }
  326. .title {
  327. margin-bottom: 30px;
  328. }
  329. .title h2 {
  330. font-size: 32px;
  331. color: #ec681e;
  332. font-weight: 700;
  333. line-height: 1;
  334. margin-bottom: 1px;
  335. margin-top: 0;
  336. }
  337. .title h5 {
  338. color: #bdbdbd;
  339. font-size: 14px;
  340. padding-left: 63px;
  341. position: relative;
  342. margin-top: 0;
  343. font-weight: 400;
  344. }
  345. .title h5:before {
  346. display: block;
  347. position: absolute;
  348. height: 1px;
  349. background: currentColor;
  350. width: 60px;
  351. top: 50%;
  352. -ms-transform-origin: left;
  353. content: '';
  354. z-index: 1;
  355. left: 0;
  356. }
  357. .goodsinfo .title h2 {
  358. font-size: 30px;
  359. margin-bottom: 3px;
  360. display: inline-block;
  361. }
  362. .goodsinfo .title h5 {
  363. display: inline-block;
  364. font-size: 16px;
  365. padding-left: 33px;
  366. color: #999;
  367. font-weight: 700;
  368. }
  369. .goodsinfo .title h5:before {
  370. width: 30px;
  371. }
  372. .detail-title {
  373. background: url(../img/detail-title-bg.png);
  374. width: 115px;
  375. height: 40px;
  376. text-align: center;
  377. background-repeat: no-repeat;
  378. margin-bottom: 50px;
  379. margin-top: 10px;
  380. }
  381. .detail-title p {
  382. line-height: 40px;
  383. margin: 0 0 0 -10px;
  384. font-size: 15px;
  385. color: #FFF;
  386. font-weight: 400;
  387. }
  388. .shadow {
  389. box-shadow: 0 2px 4px -1px rgba(0,0,0,0.3);
  390. }
  391. #changeImg {
  392. width: auto;
  393. margin-top: 15px;
  394. margin-bottom: 20px;
  395. }
  396. .change, .change:hover, .change:focus, .change:active {
  397. color: #8d8d8d;
  398. font-size: 13px;
  399. margin-left: 5px;
  400. top: -2px;
  401. position: relative;
  402. }
  403. .change i {
  404. margin-right: 3px;
  405. }
  406. .m-panel {
  407. border: 0;
  408. background: #fdfdfd;
  409. border-top: 6px solid #00387b;
  410. padding: 5px 15px 0;
  411. }
  412. .form-group-material {
  413. position: relative;
  414. margin: 12px 0;
  415. display: inline-block;
  416. width: 100%;
  417. }
  418. .form-group-material:after {
  419. height: 1px;
  420. background: #e6e6e6;
  421. width: 100%;
  422. }
  423. .form-group-material:before {
  424. height: 2px;
  425. background: #00387b;
  426. z-index: 1;
  427. width: 0;
  428. -webkit-transition: width .3s;
  429. transition: width .3s;
  430. }
  431. .form-group-material:after, .form-group-material:before {
  432. display: block;
  433. content: "";
  434. position: absolute;
  435. bottom: 0;
  436. z-index: 2;
  437. }
  438. .form-group-material.focused:before {
  439. width: 100%;
  440. }
  441. .form-header {
  442. font-weight: 700;
  443. font-size: 20px;
  444. margin-bottom: 20px;
  445. }
  446. .form-header i {
  447. font-size: 16px;
  448. margin-right: 5px;
  449. margin-bottom: 2px;
  450. color: #5c5c5c;
  451. }
  452. .material-label {
  453. display: block;
  454. position: absolute;
  455. top: 50%;
  456. -webkit-transform: translateY(-50%);
  457. -ms-transform: translateY(-50%);
  458. transform: translateY(-50%);
  459. line-height: 1;
  460. cursor: text;
  461. color: #8d8d8d;
  462. font-weight: 400;
  463. font-size: 15px;
  464. -webkit-transition: -webkit-transform ease 0.3s,color ease .3s;
  465. transition: transform ease 0.3s,color ease .3s;
  466. -webkit-transform-origin: 0 0;
  467. -ms-transform-origin: 0 0;
  468. transform-origin: 0 0;
  469. margin-left: 10px;
  470. background: #fdfdfd;
  471. }
  472. .has-value .material-label {
  473. -webkit-transform: translateY(-186%) scale(0.82);
  474. -ms-transform: translateY(-186%) scale(0.82);
  475. transform: translateY(-186%) scale(0.82);
  476. color: #00387b;
  477. }
  478. .focused .material-label {
  479. -webkit-transform: translateY(-186%) scale(0.82);
  480. -ms-transform: translateY(-186%) scale(0.82);
  481. transform: translateY(-186%) scale(0.82);
  482. color: #F44336;
  483. }
  484. input.material-field, textarea.material-field {
  485. border-width: 0;
  486. box-shadow: none;
  487. margin: 0;
  488. background: transparent;
  489. width: 100%;
  490. padding: 11px;
  491. border: 1px solid #e6e6e6;
  492. }
  493. input.material-field:focus, textarea.material-field:focus {
  494. box-shadow: none;
  495. background: none;
  496. color: #555;
  497. }
  498. button {
  499. border-radius: 3px;
  500. padding: 8px 18px;
  501. font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  502. background: #E91E63;
  503. }
  504. button:hover {
  505. background: #f27ba3;
  506. }
  507. .btn {
  508. display: inline-block;
  509. margin: 15px;
  510. background-color: rgba(238,118,36,0.95);
  511. color: #FFF;
  512. -webkit-transition: .1s linear;
  513. transition: .1s linear;
  514. border: solid 1px #ee7624;
  515. width: 200px;
  516. height: 45px;
  517. line-height: 34px;
  518. font-size: 15px;
  519. border-radius: 3px;
  520. box-shadow: 0 1px 2px rgba(0,0,0,.2);
  521. font-weight: 400;
  522. letter-spacing: 1px;
  523. overflow: hidden;
  524. position: relative;
  525. -webkit-transition: .3s linear;
  526. transition: .3s linear;
  527. }
  528. .btn img {
  529. width: 15px;
  530. margin-top: -3px;
  531. margin-left: 5px;
  532. }
  533. .btn:before {
  534. content: ' ';
  535. position: absolute;
  536. background-color: rgba(238,118,36,0.9);
  537. width: 25px;
  538. height: 50px;
  539. top: 0;
  540. left: -40px;
  541. opacity: .25;
  542. -webkit-transition: .35s ease-in-out;
  543. transition: .35s ease-in-out;
  544. -webkit-transform: skewX(-25deg);
  545. transform: skewX(-25deg);
  546. z-index: 2;
  547. border-color: #ee7624;
  548. outline: 0;
  549. -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,.075),2px 2px 8px rgba(238,118,36,0.6);
  550. box-shadow: inset 2px 2px 2px rgba(0,0,0,.075),2px 2px 8px rgba(238,118,36,0.6);
  551. }
  552. .btn:hover, .btn:focus, .btn.focus {
  553. background-color: rgba(238,118,36,0.95);
  554. color: #FFF;
  555. -webkit-transition: .1s linear;
  556. transition: .1s linear;
  557. }
  558. .btn:hover .fa {
  559. color: #FFF;
  560. -webkit-transition: .1s linear;
  561. transition: .1s linear;
  562. }
  563. .form-group {
  564. border-right: solid 1px #f3f3f3;
  565. }
  566. .form-group:last-child {
  567. border: none;
  568. }
  569. .goodsinfo {
  570. display: inline-block;
  571. width: 100%;
  572. margin-bottom: 0;
  573. }
  574. .text-label {
  575. padding-top: 0;
  576. color: #1a1a1a;
  577. line-height: 1;
  578. font-size: 16px;
  579. }
  580. .goodsinfo .control-label {
  581. color: #999;
  582. }
  583. .steps {
  584. width: 100%;
  585. margin: 0 0 20px;
  586. padding: 0;
  587. list-style: none;
  588. text-align: center;
  589. display: inline-block;
  590. }
  591. .step {
  592. display: -webkit-box;
  593. display: -ms-flexbox;
  594. display: flex;
  595. -webkit-box-align: center;
  596. -ms-flex-align: center;
  597. align-items: center;
  598. -webkit-box-pack: center;
  599. -ms-flex-pack: center;
  600. justify-content: center;
  601. -webkit-box-orient: vertical;
  602. -webkit-box-direction: normal;
  603. -ms-flex-direction: column;
  604. flex-direction: column;
  605. -webkit-box-flex: 1;
  606. -ms-flex: 1;
  607. flex: 1;
  608. position: relative;
  609. pointer-events: none;
  610. margin-bottom: 5px;
  611. display: inline-block;
  612. position: relative;
  613. }
  614. .step a {
  615. display: inline-block;
  616. position: relative;
  617. line-height: 2.5;
  618. padding: 0 20px;
  619. color: #fff;
  620. text-decoration: none;
  621. }
  622. .step::before {
  623. content: '';
  624. position: absolute;
  625. left: 0;
  626. height: 50%;
  627. width: 100%;
  628. background: #ff661a;
  629. top: 0;
  630. -webkit-transform: skew(20deg);
  631. transform: skew(20deg);
  632. z-index: 1;
  633. }
  634. .step::after {
  635. bottom: 0;
  636. -webkit-transform: skew(-20deg);
  637. transform: skew(-20deg);
  638. content: '';
  639. position: absolute;
  640. left: 0;
  641. height: 50%;
  642. width: 100%;
  643. background: #ff661a;
  644. z-index: 1;
  645. }
  646. .step {
  647. display: inline-block;
  648. position: relative;
  649. margin-right: 3px;
  650. }
  651. .step:last-child a {
  652. cursor: default;
  653. }
  654. .step-incomplete::before, .step-incomplete::after {
  655. background: #e1e1e1;
  656. }
  657. .step a {
  658. display: inline-block;
  659. position: relative;
  660. line-height: 3;
  661. padding: 0 13px;
  662. color: #fff;
  663. text-decoration: none;
  664. z-index: 2;
  665. font-size: 13px;
  666. }
  667. .step.step-incomplete a {
  668. color: #999;
  669. }
  670. .step.step-active a {
  671. color: #FFF;
  672. }
  673. .step-active::before, .step-active::after {
  674. background: #103a71;
  675. }
  676. .btn-success.disabled, .btn-success.disabled.active, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled], .btn-success[disabled].active, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success.active, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
  677. color: #a0a5aa !important;
  678. border-color: #ddd !important;
  679. background: #f7f7f7 !important;
  680. text-shadow: 0 1px 0 #fff !important;
  681. -moz-box-shadow: inset 1px 1px 5px rgba(154,147,140,0.5),1px 1px 5px rgba(255,255,255,1);
  682. -webkit-box-shadow: inset 1px 1px 5px rgba(154,147,140,0.5),1px 1px 5px rgba(255,255,255,1);
  683. box-shadow: inset 1px 1px 5px rgba(154,147,140,0.5),1px 1px 5px rgba(255,255,255,1);
  684. cursor: not-allowed;
  685. }
  686. .table-responsive .table-striped {
  687. position: relative;
  688. box-shadow: none;
  689. border: 1px solid #f3f3f3;
  690. color: #555;
  691. color: #1a1a1a;
  692. margin-bottom: 0px;
  693. }
  694. .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th, .table-bordered {
  695. border: none;
  696. padding: 10px;
  697. text-align: left !important;
  698. }
  699. .table-striped > tbody > tr:nth-of-type(even) {
  700. background-color: #f3f3f3;
  701. }
  702. .table-striped > tbody > tr:nth-of-type(odd) {
  703. background-color: #FFF;
  704. }
  705. .table > thead:first-child > tr:first-child {
  706. background-color: #e1e1e1;
  707. }
  708. .table-striped > tbody > tr:first-child {
  709. color: #00387b;
  710. font-weight: 700;
  711. }
  712. .table-striped > tbody {
  713. position: relative;
  714. }
  715. .table-striped > tbody:before {
  716. top: 0;
  717. left: 0;
  718. width: 100%;
  719. height: 100%;
  720. box-shadow: 0 15px 10px -10px rgba(31,31,31,0.5);
  721. }
  722. hr {
  723. margin-bottom: 30px;
  724. height: 5px;
  725. background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
  726. border: 0;
  727. opacity: .6;
  728. }
  729. .step-all-complete a:after {
  730. content: url(../img/flag.png);
  731. position: absolute;
  732. top: -8px;
  733. display: inline-block;
  734. height: 16px;
  735. right: -5px;
  736. -webkit-filter: drop-shadow(2px 3px 2px #222);
  737. filter: drop-shadow(2px 3px 2px #222);
  738. }
  739. .ng-scope {
  740. width: 100%;
  741. margin: .2em 0;
  742. padding: 5px 15px;
  743. list-style: none;
  744. background-color: #ffebdd;
  745. cursor: pointer;
  746. color: #4a4a4a;
  747. position: relative;
  748. z-index: 2;
  749. font-size: 15px;
  750. text-align: left;
  751. border-radius: 0 5px 5px 0;
  752. line-height: 1.7;
  753. margin-bottom: 30px;
  754. }
  755. .ng-scope h4 {
  756. font-weight: 700;
  757. text-align: center;
  758. font-size: 16px;
  759. display: inline-block;
  760. margin: 0;
  761. line-height: 2.2;
  762. }
  763. .ng-scope h4 label {
  764. margin-bottom: 0;
  765. }
  766. .ng-scope h4 span {
  767. font-weight: 400;
  768. color: #777;
  769. margin-left: 10px;
  770. border-left: 2px solid #ff9b64;
  771. padding-left: 10px;
  772. }
  773. .goodsinfo .tab-pane.col-xs-12.text-center:nth-child(2) {
  774. margin-bottom: 30px;
  775. border-bottom: 1px solid #b7b6b3;
  776. }
  777. @media (min-width: 997px) {
  778. .container2 {
  779. width: 920px;
  780. }
  781. }
  782. @media (max-width: 997px) {
  783. nav .container {
  784. width: 850px;
  785. }
  786. .steps {
  787. text-align: left;
  788. padding-left: 15px;
  789. }
  790. #changeImg {
  791. text-align: center;
  792. }
  793. .send.text-right {
  794. text-align: center;
  795. }
  796. .btn {
  797. margin-top: 10px;
  798. }
  799. .goodsinfo .title h2 {
  800. font-size: 26px;
  801. }
  802. .title h2 {
  803. font-size: 28px;
  804. }
  805. .table-bordered > tbody > tr > td:nth-child(2), .table-bordered > tbody > tr > td:nth-child(1), .table-bordered > thead > tr > th:nth-child(2), .table-bordered > thead > tr > th:nth-child(1) {
  806. width: 30% !important;
  807. }
  808. .table-bordered > tbody > tr > td:nth-child(3), .table-bordered > thead > tr > th:nth-child(3) {
  809. width: 40% !important;
  810. }
  811. .table-bordered > tbody > tr > td:nth-child(4), .table-bordered > thead > tr > th:nth-child(4) {
  812. display: none;
  813. }
  814. .table-responsive > .table > tbody > tr > td {
  815. white-space: inherit;
  816. }
  817. .table-responsive .table-striped {
  818. border: none;
  819. }
  820. footer .col-xs-12 {
  821. width: 50%;
  822. }
  823. }
  824. @media (max-width: 860px) {
  825. .banner {
  826. background-position: left;
  827. }
  828. }
  829. @media (max-width: 767px) {
  830. .container, .container2, nav .container {
  831. width: 100%;
  832. padding-right: 15px;
  833. padding-left: 15px;
  834. }
  835. .navbar-right {
  836. text-align: right;
  837. }
  838. header {
  839. position: fixed;
  840. top: 0;
  841. width: 100%;
  842. z-index: 999;
  843. }
  844. .nav > .nav-hidden {
  845. display: block;
  846. }
  847. .nav > .social-nav-m {
  848. width: 50%;
  849. float: left;
  850. text-align: center;
  851. border-bottom: none;
  852. }
  853. .nav > .social-nav-m:nth-child(1) {
  854. border-color: #3b579d;
  855. }
  856. .nav > .social-nav-m:nth-child(2) {
  857. border-color: #42ad48;
  858. }
  859. .social-nav-m .color-facebook, .navbar-nav .social-nav-m .color-facebook:hover {
  860. background: #3B579D;
  861. }
  862. .social-nav-m .color-wechat, .navbar-nav .social-nav-m .color-wechat:hover {
  863. background: #42ad48;
  864. }
  865. .nav > .social-nav-m img {
  866. height: 22px;
  867. }
  868. .container, .container2, .detail-page .container2 {
  869. width: 100%;
  870. padding-right: 15px;
  871. padding-left: 15px;
  872. }
  873. .navbar-nav > li {
  874. width: 100%;
  875. text-align: left;
  876. border-left: none;
  877. border-right: none;
  878. border-bottom: 1px solid #d05c1b;
  879. border-top: 1px solid #f58b4f;
  880. }
  881. .navbar-nav > li > a {
  882. padding: 13px;
  883. }
  884. .navbar-brand-m {
  885. display: block;
  886. padding: 10px 15px;
  887. height: 48px;
  888. }
  889. .navbar-brand > img {
  890. max-height: 30px;
  891. }
  892. .navbar-nav {
  893. width: 100%;
  894. border-left: none;
  895. border-right: none;
  896. margin: 0;
  897. }
  898. .main-nav {
  899. background-color: #FFF;
  900. }
  901. .navbar-default .navbar-collapse {
  902. border: none;
  903. max-height: 500px;
  904. background: #ee7624;
  905. padding: 0;
  906. }
  907. .navtop, .social-nav {
  908. display: none;
  909. }
  910. .banner {
  911. margin-top: 80px;
  912. }
  913. .banner-cover {
  914. display: none;
  915. }
  916. header .navtop-m {
  917. display: block;
  918. background: #00387b;
  919. background: -moz-linear-gradient(left,#00387b 0%,#004696 30%,#005596 50%,#004696 70%,#004696 100%,#00387b 100%);
  920. background: -webkit-linear-gradient(left,#00387b 0%,#004696 30%,#005596 50%,#004696 70%,#004696 100%,#00387b 100%);
  921. background: linear-gradient(to right,#00387b 0%,#004696 30%,#005596 50%,#004696 70%,#004696 100%,#00387b 100%);
  922. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00387b',endColorstr='#00387b',GradientType=1);
  923. background: #ed6d17;
  924. background: -moz-linear-gradient(left,#ed6d17 0%,#ee7624 10%,#e89625 50%,#ee7624 90%,#ed6d17 100%);
  925. background: -webkit-linear-gradient(left,#ed6d17 0%,#ee7624 10%,#e89625 50%,#ee7624 90%,#ed6d17 100%);
  926. background: linear-gradient(to right,#ed6d17 0%,#ee7624 10%,#e89625 50%,#ee7624 90%,#ed6d17 100%);
  927. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6d17',endColorstr='#ed6d17',GradientType=1);
  928. }
  929. .navtop-m {
  930. padding: 7px 0;
  931. }
  932. .navtop-m .navbar-right {
  933. padding: 0;
  934. }
  935. .navtop-m .navbar-right a {
  936. color: #fff;
  937. font-size: 12px;
  938. line-height: 16px;
  939. height: 16px;
  940. }
  941. .navtop-m .navbar-right a:hover {
  942. background: none;
  943. }
  944. .navtop-m .navbar-right li {
  945. border-right: 1px dotted rgba(255,255,255,0.5);
  946. height: 16px;
  947. }
  948. .navbar-toggle, .navbar-default, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  949. background-color: #103a71;
  950. border-radius: 0;
  951. }
  952. .navbar-default .navbar-toggle {
  953. border: none;
  954. }
  955. .navbar-default .navbar-toggle .icon-bar {
  956. background-color: #fff;
  957. }
  958. .navtop-m .navbar-right li:last-child {
  959. margin-right: 0;
  960. border: none;
  961. padding: 0;
  962. }
  963. .banner .banner-text {
  964. width: 80%;
  965. right: 5%;
  966. top: auto;
  967. bottom: 16%;
  968. max-width: 512px;
  969. transform: translateY(0%);
  970. -webkit-transform: translateY(0%);
  971. }
  972. div[role="tabpanel"] {
  973. padding: 0;
  974. }
  975. .form-group {
  976. width: 50% !important;
  977. float: left;
  978. border: none;
  979. font-weight: bold;
  980. }
  981. .form-group .text-label {
  982. font-size: 15px;
  983. font-weight: normal;
  984. }
  985. .form-group.w18p {
  986. width: 100% !important;
  987. min-height: 60px;
  988. border-right: none;
  989. border-bottom: solid 1px #f3f3f3;
  990. }
  991. .form-group.w18p .text-label {
  992. font-size: 18px;
  993. color: #103a71;
  994. font-weight: bold;
  995. }
  996. .table-responsive {
  997. padding: 0;
  998. overflow: hidden;
  999. }
  1000. }
  1001. @media (max-width: 640px) {
  1002. .form-group {
  1003. width: 100%;
  1004. min-height: 60px;
  1005. border: none;
  1006. margin-bottom: 10px;
  1007. padding-bottom: 10px;
  1008. border-bottom: solid 1px #f3f3f3;
  1009. }
  1010. .form-group:last-child {
  1011. border-bottom: solid 1px #f3f3f3;
  1012. }
  1013. #main-wrapper {
  1014. padding: 0;
  1015. }
  1016. #main-wrapper > .col-xs-12 {
  1017. padding: 0;
  1018. }
  1019. #gotop {
  1020. display: none !important;
  1021. }
  1022. .steps {
  1023. text-align: left;
  1024. padding-left: 0;
  1025. margin-bottom: 10px;
  1026. }
  1027. .step a {
  1028. font-size: 12px;
  1029. padding: 0 8px;
  1030. }
  1031. .panel-info {
  1032. margin-top: 0px;
  1033. }
  1034. .form-horizontal > .col-xs-12 {
  1035. padding: 0;
  1036. }
  1037. .goodsinfo {
  1038. margin-bottom: 0;
  1039. }
  1040. .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th, .table-bordered {
  1041. text-align: center !important;
  1042. }
  1043. .ng-scope {
  1044. text-align: center;
  1045. }
  1046. .ng-scope h4 {
  1047. line-height: 1.5;
  1048. padding: 5px 0;
  1049. }
  1050. .ng-scope h4 span {
  1051. margin-left: 0;
  1052. border-left: none;
  1053. padding-left: 0;
  1054. display: block;
  1055. font-size: 14px;
  1056. }
  1057. }
  1058. @media (max-width: 520px) {
  1059. .table-bordered > tbody > tr > td:nth-child(2), .table-bordered > tbody > tr > td:nth-child(1), .table-bordered > thead > tr > th:nth-child(2), .table-bordered > thead > tr > th:nth-child(1) {
  1060. width: 50% !important;
  1061. text-align: center;
  1062. }
  1063. .table-bordered > tbody > tr > td:nth-child(3), .table-bordered > thead > tr > th:nth-child(3) {
  1064. display: none;
  1065. }
  1066. .title {
  1067. margin-bottom: 30px;
  1068. }
  1069. footer .col-xs-12 {
  1070. width: 100%;
  1071. text-align: center;
  1072. }
  1073. .footer-logo {
  1074. width: 150px;
  1075. margin: 0 auto;
  1076. }
  1077. footer .lag {
  1078. font-size: 12px;
  1079. width: 96px;
  1080. height: 27px;
  1081. line-height: 27px;
  1082. }
  1083. .footer-icon {
  1084. margin-bottom: 20px;
  1085. margin-right: 8px;
  1086. }
  1087. .copyright {
  1088. font-size: 12px;
  1089. }
  1090. }
  1091. @media (max-width: 480px) {
  1092. .form-group {
  1093. width: 100% !important;
  1094. }
  1095. }
  1096. @media print {
  1097. .step-complete {
  1098. border: 1px solid #ee7624;
  1099. }
  1100. .step-incomplete {
  1101. border: 1px solid #d0d0d0;
  1102. }
  1103. .div-complete {
  1104. position: relative;
  1105. left: -2px;
  1106. display: block;
  1107. margin-left: -1px;
  1108. border-top: 19px solid transparent;
  1109. border-bottom: 19px solid transparent;
  1110. border-left: 19px solid #ee7624;
  1111. width: 0;
  1112. height: 0;
  1113. float: left;
  1114. }
  1115. .div-incomplete {
  1116. position: relative;
  1117. left: -2px;
  1118. display: block;
  1119. margin-left: -1px;
  1120. border-top: 19px solid transparent;
  1121. border-bottom: 19px solid transparent;
  1122. border-left: 19px solid #d0d0d0;
  1123. width: 0;
  1124. height: 0;
  1125. float: left;
  1126. }
  1127. .steps li {
  1128. float: left;
  1129. }
  1130. .step-complete a:after, .step-incomplete a:after {
  1131. content: '';
  1132. position: absolute;
  1133. top: -8px;
  1134. display: inline-block;
  1135. height: 16px;
  1136. right: -5px;
  1137. filter: drop-shadow(2px 3px 2px #222);
  1138. }
  1139. .step-all-complete a:after {
  1140. content: url(../img/flag.png);
  1141. position: absolute;
  1142. top: -8px;
  1143. display: inline-block;
  1144. height: 16px;
  1145. right: -5px;
  1146. filter: drop-shadow(2px 3px 2px #222);
  1147. }
  1148. .flowtitle {
  1149. display:none;
  1150. }
  1151. .print-title{
  1152. display:none;
  1153. }
  1154. .w100p {
  1155. width: 100% !important;
  1156. }
  1157. .w95p {
  1158. width: 95% !important;
  1159. }
  1160. .w90p {
  1161. width: 90% !important;
  1162. }
  1163. .w85p {
  1164. width: 85% !important;
  1165. }
  1166. .w67p {
  1167. width: 67% !important;
  1168. }
  1169. .w80p {
  1170. width: 80% !important;
  1171. }
  1172. .w75p {
  1173. width: 75% !important;
  1174. }
  1175. .w70p {
  1176. width: 70% !important;
  1177. }
  1178. .w65p {
  1179. width: 65% !important;
  1180. }
  1181. .w60p {
  1182. width: 60% !important;
  1183. }
  1184. .w58p {
  1185. width: 58% !important;
  1186. }
  1187. .w57p {
  1188. width: 57% !important;
  1189. }
  1190. .w56p {
  1191. width: 56% !important;
  1192. }
  1193. .w55p {
  1194. width: 55% !important;
  1195. }
  1196. .w50p {
  1197. width: 50% !important;
  1198. }
  1199. .w49p {
  1200. width: 49% !important;
  1201. }
  1202. .w48p {
  1203. width: 48% !important;
  1204. }
  1205. .w47p {
  1206. width: 47% !important;
  1207. }
  1208. .w46p {
  1209. width: 46% !important;
  1210. }
  1211. .w45p {
  1212. width: 45% !important;
  1213. }
  1214. .w44p {
  1215. width: 44% !important;
  1216. }
  1217. .w43p {
  1218. width: 43% !important;
  1219. }
  1220. .w42p {
  1221. width: 42% !important;
  1222. }
  1223. .w41p {
  1224. width: 41% !important;
  1225. }
  1226. .w40p {
  1227. width: 40% !important;
  1228. }
  1229. .w39p {
  1230. width: 39% !important;
  1231. }
  1232. .w38p {
  1233. width: 38% !important;
  1234. }
  1235. .w37p {
  1236. width: 37% !important;
  1237. }
  1238. .w36p {
  1239. width: 36% !important;
  1240. }
  1241. .w35p {
  1242. width: 35% !important;
  1243. }
  1244. .w34p {
  1245. width: 34% !important;
  1246. }
  1247. .w33p {
  1248. width: 33% !important;
  1249. }
  1250. .w32p {
  1251. width: 32% !important;
  1252. }
  1253. .w31p {
  1254. width: 31% !important;
  1255. }
  1256. .w30p {
  1257. width: 30% !important;
  1258. }
  1259. .w29p {
  1260. width: 29% !important;
  1261. }
  1262. .w28p {
  1263. width: 28% !important;
  1264. }
  1265. .w27p {
  1266. width: 27% !important;
  1267. }
  1268. .w26p {
  1269. width: 26% !important;
  1270. }
  1271. .w25p {
  1272. width: 25% !important;
  1273. }
  1274. .w24p {
  1275. width: 24% !important;
  1276. }
  1277. .w23p {
  1278. width: 23% !important;
  1279. }
  1280. .w22p {
  1281. width: 22% !important;
  1282. }
  1283. .w21p {
  1284. width: 21% !important;
  1285. }
  1286. .w20p {
  1287. width: 20% !important;
  1288. }
  1289. .w19p {
  1290. width: 19% !important;
  1291. }
  1292. .w18p {
  1293. width: 18% !important;
  1294. }
  1295. .w17p {
  1296. width: 17% !important;
  1297. }
  1298. .w16p {
  1299. width: 16% !important;
  1300. }
  1301. .w15p {
  1302. width: 15% !important;
  1303. }
  1304. .w14p {
  1305. width: 14% !important;
  1306. }
  1307. .w13p {
  1308. width: 13% !important;
  1309. }
  1310. .w12p {
  1311. width: 12% !important;
  1312. }
  1313. .w11p {
  1314. width: 11% !important;
  1315. }
  1316. .w10p {
  1317. width: 10% !important;
  1318. }
  1319. .w9p {
  1320. width: 9% !important;
  1321. }
  1322. .w8p {
  1323. width: 8% !important;
  1324. }
  1325. .w7p {
  1326. width: 7% !important;
  1327. }
  1328. .w6p {
  1329. width: 6% !important;
  1330. }
  1331. .w5p {
  1332. width: 5% !important;
  1333. }
  1334. .w4p {
  1335. width: 4% !important;
  1336. }
  1337. .w3p {
  1338. width: 3% !important;
  1339. }
  1340. .w2p {
  1341. width: 2% !important;
  1342. }
  1343. .w1p {
  1344. width: 1% !important;
  1345. }
  1346. }
  1347. .logo-item{margin-top:10px !important}