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.

1315 lines
28 KiB

2 years ago
  1. @charset "utf-8";
  2. @import url("reset.css");
  3. @import url(https://fonts.googleapis.com/css?family=Roboto);
  4. /* CSS Document */
  5. a {
  6. color: #003A70;
  7. -webkit-tap-highlight-color: rgba(0,0,0,0);
  8. outline: none;
  9. }
  10. a:hover {
  11. color: #EC681E;
  12. }
  13. /*-------font effect-----------*/
  14. .clear {
  15. clear: both;
  16. height: 0px;
  17. line-height: 0px;
  18. }
  19. .bold {
  20. font-weight: bold;
  21. }
  22. .red {
  23. color: #F00;
  24. }
  25. .orange {
  26. color: #EC681E;
  27. }
  28. .blue {
  29. color: #003A70
  30. }
  31. .align_r {
  32. text-align: right;
  33. }
  34. .align_c {
  35. text-align: center;
  36. }
  37. .italic {
  38. font-style: italic;
  39. opacity: 0.7;
  40. font-weight: normal;
  41. }
  42. .nowrap {
  43. width: auto;
  44. white-space: nowrap;
  45. text-overflow: ellipsis;
  46. overflow: hidden;
  47. }
  48. .lightLine {
  49. height: 1px;
  50. line-height: 1px;
  51. border-bottom: 1px solid #e0e0e0;
  52. margin: 20px auto;
  53. }
  54. .divider {
  55. height: 10px;
  56. line-height: 10px;
  57. }
  58. ol.number {
  59. list-style: decimal;
  60. margin-left: 20px;
  61. display: inline-block;
  62. }
  63. ol.dot {
  64. list-style: disc;
  65. margin-left: 20px;
  66. display: inline-block;
  67. font-size: 13px;
  68. }
  69. ol.number li {
  70. padding-bottom: 5px;
  71. }
  72. ol.number li:last-child, ol.dot li:last-child {
  73. padding-bottom: 0;
  74. }
  75. .smallFont {
  76. font-size: 13px;
  77. }
  78. /*-------a:visited-------*/
  79. ul.listNews li a:visited, .rightnewsList li a:visited {
  80. color: #999;
  81. }
  82. /*-------img effect-----------*/
  83. .addShadow {
  84. border: 1px solid #f5f5f5;
  85. box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
  86. }
  87. .squareThumb {
  88. width: 100%;
  89. height: 0;
  90. padding-bottom: 100%;
  91. }
  92. .rectThumb {
  93. width: 100%;
  94. height: 0;
  95. padding-bottom: 66%;
  96. }
  97. /*-------btn effect-----------*/
  98. .btn {
  99. -webkit-appearance: none; /*取消手機預設樣式*/
  100. }
  101. .btnStyle {
  102. text-decoration: none;
  103. cursor: pointer;
  104. display: inline-block;
  105. border: 0;
  106. border-radius: 30px;
  107. color: #fff;
  108. background: #EC681E;
  109. }
  110. .btnStyle:hover {
  111. color: #FFF;
  112. background: #003A70;
  113. }
  114. /*------------------form effect-------------------*/
  115. input, textarea, body select {
  116. font-family: "微軟正黑體", "Roboto", sans-serif;
  117. font-size: 15px;
  118. padding: 0;
  119. color: #333;
  120. /*避免select長度不一*/
  121. box-sizing: border-box;
  122. display: inline-block;
  123. outline: none;
  124. }
  125. input:focus {
  126. outline: none;
  127. }
  128. ::-webkit-input-placeholder { /* WebKit browsers */
  129. color: #999;
  130. }
  131. :-ms-input-placeholder { /* WebKit browsers */
  132. color: #999;
  133. }
  134. .textStyle {
  135. border: 1px solid #ddd;
  136. border-radius: 5px;
  137. width: inherit;
  138. }
  139. .textStyle:focus {
  140. border: 1px solid #A6C1CE;
  141. background: #F6FBFE;
  142. }
  143. .formTitle {
  144. margin-bottom: 5px;
  145. font-weight: bold;
  146. }
  147. .largeItem {
  148. width: 1.2em;
  149. height: 1.2em;
  150. vertical-align: text-bottom;
  151. }
  152. .refresh {
  153. display: inline-block;
  154. width: 25px;
  155. height: 25px;
  156. text-indent: -9999px;
  157. background-image: url(../images/refresh.svg);
  158. background-repeat: no-repeat;
  159. background-size: 100% 100%;
  160. }
  161. .refreshO {
  162. background-image: url(../images/refreshOrange.svg);
  163. }
  164. /*-------------table Display--------------------*/
  165. .tableDisplay {
  166. border-collapse: collapse;
  167. }
  168. .tableDisplay th {
  169. padding: 6px 10px;
  170. word-break: break-all;
  171. background: #EC681E;
  172. color: #fff;
  173. }
  174. .tableDisplay td {
  175. word-break: break-all;
  176. border-bottom: 1px solid #E0E0E0;
  177. padding: 6px 10px;
  178. }
  179. .tableDisplay tr:nth-child(even) td {
  180. background: #f9f9f9;
  181. }
  182. /*------------page--------------*/
  183. #page {
  184. color: #666;
  185. overflow: auto;
  186. margin-top: 20px;
  187. text-align: center;
  188. }
  189. #page li {
  190. display: inline-block;
  191. margin: 0 6px 6px 0;
  192. }
  193. #page li a {
  194. color: #333;
  195. display: block;
  196. text-decoration: none;
  197. padding: 3px 10px;
  198. border: solid 1px #e0e0e0;
  199. background: #f5f5f5;
  200. border-radius: 3px;
  201. }
  202. #page li a:hover {
  203. background: #FFF;
  204. box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
  205. }
  206. #page li.current a, #page li.current a:hover {
  207. background: none;
  208. color: #666;
  209. border: none;
  210. box-shadow: none;
  211. }
  212. /*---------------------- toTop ------------------------*/
  213. #toTop {
  214. position: fixed;
  215. right: 30px;
  216. bottom: 50px;
  217. width: 40px;
  218. height: 40px;
  219. background: url(../images/icon_top.svg) no-repeat rgba(0,0,0,0.3) center center;
  220. cursor: pointer;
  221. display: none;
  222. z-index: 123;
  223. text-indent: -9999px;
  224. -webkit-border-radius: 20px;
  225. border-radius: 20px;
  226. }
  227. #toTop:hover {
  228. background: url(../images/icon_top.svg) no-repeat #F26529 center center;
  229. }
  230. .error {
  231. color: red;
  232. }
  233. /*-----------------------innerTitle-----------------------*/
  234. #innerTitle.BG1 {
  235. background-image: url(../images/inner/1.jpg);
  236. }
  237. #innerTitle.BG2 {
  238. background-image: url(../images/inner/1.jpg);
  239. }
  240. #innerTitle.BG3 {
  241. background-image: url(../images/inner/3.jpg);
  242. }
  243. /*-----------------------footer-----------------------*/
  244. footer a, footer a:hover {
  245. color: #fff;
  246. }
  247. footer ul li {
  248. background-image: url(../images/map.svg);
  249. background-position: left center;
  250. background-repeat: no-repeat;
  251. background-size: 16px 16px;
  252. padding-left: 22px;
  253. }
  254. footer ul li:nth-child(2) {
  255. background-image: url(../images/tel.svg);
  256. }
  257. footer ul li:nth-child(3) {
  258. background-image: url(../images/mail.svg);
  259. }
  260. footer p a {
  261. background-image: url(../images/facebook.png);
  262. background-repeat: no-repeat;
  263. background-size: 45px 45px;
  264. background-position: center center;
  265. }
  266. footer p a:nth-child(2) {
  267. background-image: url(../images/line.png);
  268. }
  269. /*-----------------------for PC-----------------------*/
  270. @media screen and (min-width:801px) {
  271. /*-----------------------body-----------------------*/
  272. html, body {
  273. margin: 0;
  274. padding: 0;
  275. color: #333;
  276. font-size: 15px;
  277. line-height: 160%;
  278. font-family: "微軟正黑體", "Roboto", sans-serif;
  279. overflow-x: hidden;
  280. }
  281. .NoShowInPC {
  282. display: none;
  283. }
  284. p {
  285. line-height: 160%;
  286. }
  287. h1, h2, h3, h4 {
  288. line-height: 120%;
  289. }
  290. .btn {
  291. padding: 6px 25px;
  292. line-height: 160%;
  293. font-size: 19px;
  294. }
  295. .btnSmall {
  296. padding: 8px 15px;
  297. line-height: 100%;
  298. font-size: 15px;
  299. }
  300. .textStyle {
  301. padding: 10px;
  302. }
  303. .largeFont {
  304. font-size: 17px;
  305. }
  306. .googleMap {
  307. width: 100%;
  308. height: 500px;
  309. }
  310. /*-----------------header---------------*/
  311. #headerWrapper {
  312. position: fixed;
  313. left: 0;
  314. top: 0;
  315. width: 100%;
  316. height: 80px;
  317. z-index: 9999;
  318. background: #fff;
  319. }
  320. header {
  321. position: relative;
  322. margin: 0 auto;
  323. height: 80px;
  324. min-width: 1024px;
  325. max-width: 1440px;
  326. z-index: 10;
  327. width: 80%;
  328. }
  329. header h1 a {
  330. width: 250px;
  331. height: 50px;
  332. text-indent: -9999px;
  333. position: absolute;
  334. left: 0;
  335. background-image: url(../images/logo.png);
  336. background-repeat: no-repeat;
  337. background-size: cover;
  338. top: 15px;
  339. }
  340. /*----------------language------------------*/
  341. #language {
  342. position: absolute;
  343. right: 0;
  344. top: 20px;
  345. }
  346. #language li {
  347. float: left;
  348. margin-left: 20px;
  349. }
  350. #language li a {
  351. color: #666;
  352. display: block;
  353. text-decoration: none;
  354. }
  355. #language li a span {
  356. display: inline-block;
  357. height: 40px;
  358. width: 40px;
  359. line-height: 40px;
  360. text-align: center;
  361. background: #d5d5d5;
  362. border-radius: 40px;
  363. }
  364. #language li a:hover {
  365. color: #EC681E;
  366. }
  367. #language li a:hover span {
  368. color: #fff;
  369. background: #EC681E;
  370. }
  371. #language li.CherryBuy a span {
  372. background: none;
  373. border-radius: 0;
  374. background-image: url(../images/cherry.svg);
  375. height: 33px;
  376. width: 35px;
  377. }
  378. /*------------------menu------------------------*/
  379. #menuWrapper {
  380. width: 100%;
  381. height: 50px;
  382. background: #EC681E;
  383. min-width: 1024px;
  384. z-index: 9998;
  385. box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
  386. position: fixed;
  387. left: 0;
  388. top: 80px;
  389. }
  390. h4.openMenu {
  391. display: none;
  392. }
  393. #menu {
  394. width: 80%;
  395. margin: 0 auto;
  396. min-width: 1024px;
  397. max-width: 1440px;
  398. height: 50px;
  399. }
  400. #menu li {
  401. float: left;
  402. width: 12.5%;
  403. position: relative;
  404. }
  405. #menu li a {
  406. display: block;
  407. text-align: center;
  408. line-height: 50px;
  409. font-size: 17px;
  410. text-decoration: none;
  411. color: #FFF;
  412. cursor: pointer;
  413. text-align: center;
  414. }
  415. #menu li.selected {
  416. background: #333F48;
  417. }
  418. #menu li a:hover {
  419. background: #333F48;
  420. }
  421. #menu li ul {
  422. position: absolute;
  423. display: none;
  424. width: 100%;
  425. }
  426. #menu li ul li {
  427. border: 0;
  428. position: relative;
  429. z-index: 995;
  430. float: none;
  431. width: 100%;
  432. }
  433. #menu li ul li a {
  434. display: block;
  435. background: #46545B;
  436. line-height: 40px;
  437. color: #fff;
  438. font-weight: normal;
  439. font-size: 15px;
  440. border-bottom: 1px solid #333F48;
  441. }
  442. #menu li ul li:last-child a {
  443. border-bottom: 0;
  444. }
  445. #menu li ul li a:hover {
  446. background: #333F48;
  447. }
  448. #menu li ul li.selected a {
  449. background: #333F48;
  450. }
  451. /*-------------content--------------------*/
  452. article {
  453. width: 80%;
  454. margin: 0 auto;
  455. min-width: 1024px;
  456. max-width: 1440px;
  457. /*min-height: 600px;*/
  458. padding: 30px 0;
  459. }
  460. #left {
  461. float: left;
  462. width: 280px;
  463. }
  464. #right {
  465. width: auto;
  466. margin-left: 320px;
  467. }
  468. /*-----------------h1----------------*/
  469. h1.indexTitle {
  470. color: #fff;
  471. font-size: 25px;
  472. height: 50px;
  473. }
  474. h1.indexTitle em {
  475. border-bottom: 1px solid #fff;
  476. text-transform: uppercase;
  477. font-style: italic;
  478. line-height: 100%;
  479. padding-bottom: 10px;
  480. display: inline-block;
  481. vertical-align: top;
  482. }
  483. h1.indexTitle span {
  484. line-height: 75px;
  485. display: inline-block;
  486. font-style: italic;
  487. vertical-align: text-bottom;
  488. }
  489. h1.orange {
  490. color: #EC681E;
  491. }
  492. h1.orange em {
  493. border-color: #EC681E;
  494. }
  495. h2 {
  496. font-size: 25px;
  497. font-weight: normal;
  498. }
  499. h3 {
  500. font-size: 17px;
  501. font-weight: normal;
  502. }
  503. /*---------left----------*/
  504. #left h4 {
  505. display: none;
  506. }
  507. #left ul {
  508. border-left: 1px solid #EC681E;
  509. border-right: 1px solid #EC681E;
  510. padding: 0 20px;
  511. background-image: url(../images/airplain.svg);
  512. background-repeat: no-repeat;
  513. background-size: 50px 50px;
  514. background-position: right 15px top;
  515. }
  516. #left ul li a {
  517. display: block;
  518. padding: 10px 0;
  519. font-size: 17px;
  520. color: #666;
  521. text-decoration: none
  522. }
  523. #left ul li:last-child a {
  524. margin-bottom: 0;
  525. }
  526. #left ul li.selected a, #left ul li a:hover {
  527. color: #EC681E;
  528. }
  529. #sidebar.sticky {
  530. float: none;
  531. position: fixed;
  532. top: 0;
  533. z-index: 6;
  534. left: auto;
  535. width: 280px;
  536. }
  537. /*---------------innerTitle-----------------*/
  538. #innerTitle {
  539. width: auto;
  540. padding: 70px 10% 70px 10%;
  541. background-position: center bottom;
  542. background-size: cover;
  543. background-repeat: no-repeat;
  544. margin-top: 130px;
  545. }
  546. /*------------------ newsList ----------------------*/
  547. #newsList li {
  548. border-bottom: 1px solid #e0e0e0;
  549. padding: 15px;
  550. overflow: auto;
  551. }
  552. #newsList li:last-child {
  553. margin: 0;
  554. }
  555. #newsList li div.newsListLeft {
  556. width: 20%;
  557. float: left;
  558. position: relative;
  559. }
  560. #newsList li div.newsListRight {
  561. float: right;
  562. width: 78%;
  563. }
  564. #newsList li h4 {
  565. margin-bottom: 10px;
  566. }
  567. #newsList li a {
  568. color: #333;
  569. display: block;
  570. }
  571. #newsList li:hover {
  572. background: #f5f5f5;
  573. }
  574. /*-------------download--------------------*/
  575. #download li {
  576. width: 32%;
  577. margin: 0 2% 2% 0;
  578. padding: 20px;
  579. text-align: center;
  580. float: left;
  581. border: 1px solid #f1f1f1;
  582. box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
  583. }
  584. #download li p {
  585. min-height: 50px;
  586. margin-bottom: 10px;
  587. }
  588. #download li:nth-child(3n) {
  589. margin-right: 0;
  590. }
  591. #download .btn {
  592. width: 100%;
  593. background: #ffa300;
  594. }
  595. /*----gallery-----*/
  596. .gallery li {
  597. float: left;
  598. width: 32%;
  599. margin: 0 2% 2% 0;
  600. position: relative;
  601. }
  602. .gallery li:nth-child(3n) {
  603. margin-right: 0;
  604. }
  605. .gallery li a p {
  606. width: 100%;
  607. position: absolute;
  608. left: 0;
  609. bottom: 0;
  610. padding: 10px;
  611. background: rgba(0,0,0,0.5);
  612. color: #FFF;
  613. }
  614. .gallery li a p span {
  615. display: block;
  616. color: #FFF;
  617. }
  618. .gallery li div.hoverDesc {
  619. color: rgba(255,255,255,0);
  620. background-color: rgba(0, 0, 0,0);
  621. background-image: url(../images/zoom-in.svg);
  622. background-repeat: no-repeat;
  623. background-size: 40% auto;
  624. background-position: center center;
  625. opacity: 0;
  626. position: absolute;
  627. left: 0;
  628. top: 0;
  629. overflow: hidden;
  630. transition: all 0.3s ease-out;
  631. width: 100%;
  632. height: 0;
  633. padding-bottom: 66%;
  634. }
  635. .gallery li:hover div.hoverDesc {
  636. color: rgba(255,255,255,1);
  637. background-color: rgba(0, 0, 0, 0.5);
  638. opacity: 1;
  639. }
  640. /*-----------------gallery detail--------------------*/
  641. .galleryInner li {
  642. width: 18.4%;
  643. }
  644. .galleryInner li:nth-child(3n) {
  645. margin-right: 2%;
  646. }
  647. .galleryInner li:nth-child(5n) {
  648. margin-right: 0;
  649. }
  650. /*-----------------contact--------------------*/
  651. #conLeft {
  652. float: left;
  653. width: 49%;
  654. }
  655. #conRight {
  656. float: right;
  657. width: 48%;
  658. }
  659. #conLeft ul {
  660. vertical-align: text-top;
  661. }
  662. #conLeft ul li {
  663. width: 49%;
  664. float: left;
  665. margin-bottom: 20px;
  666. }
  667. #conLeft ul li:nth-child(3), #conLeft ul li:nth-child(4) {
  668. margin-bottom: 0;
  669. }
  670. /*-------------table form--------------------*/
  671. .maxText {
  672. width: 100%;
  673. }
  674. .largeText {
  675. width: 80%;
  676. }
  677. .midText {
  678. width: 50%;
  679. }
  680. .smallText {
  681. width: 120px;
  682. }
  683. .validcode {
  684. margin: 0 5px;
  685. }
  686. /*-------------footer--------------------*/
  687. footer {
  688. background: #EC681E;
  689. color: #fff;
  690. font-size: 13px;
  691. }
  692. #footer {
  693. margin: 0 auto;
  694. padding: 40px 0;
  695. position: relative;
  696. width: 80%;
  697. }
  698. #footer p {
  699. position: absolute;
  700. right: 0;
  701. top: 30px;
  702. }
  703. #footer img {
  704. /*width: 450px;*/
  705. }
  706. #footer p a {
  707. display: block;
  708. width: 60px;
  709. height:60px;
  710. margin-bottom: 10px;
  711. float:left;
  712. }
  713. #footer ul {
  714. position: absolute;
  715. right: 150px;
  716. top: 25px;
  717. }
  718. #copyright {
  719. background: #003A70;
  720. line-height: 40px;
  721. text-align: center;
  722. font-style: italic;
  723. }
  724. /*-----------tab btn-----------*/
  725. #lineapp a, #track a, #money a {
  726. width: 48px;
  727. height: 168px;
  728. position: fixed;
  729. right: 0;
  730. background-repeat: no-repeat;
  731. background-position: top left;
  732. background-size: cover;
  733. z-index:15;
  734. }
  735. #track a {
  736. top: 200px;
  737. background-image: url(../images/btnTrack.png);
  738. z-index:18;
  739. }
  740. #money a {
  741. top: 350px;
  742. background-image: url(../images/btnMoney.png);
  743. z-index:17;
  744. }
  745. #lineapp a{
  746. top: 500px;
  747. background-image: url(../images/btnLineApp.png);
  748. z-index:16;
  749. }
  750. #track a:hover, #money a:hover, #lineapp a:hover {
  751. width: 60px;
  752. }
  753. }
  754. /*------------------for mobile------------------------*/
  755. @media screen and (max-width:800px) {
  756. /*-----------------------body-----------------------*/
  757. html {
  758. width: 100%;
  759. min-height: 100%;
  760. margin: 0;
  761. padding: 0;
  762. -moz-text-size-adjust: none;
  763. -ms-text-size-adjust: none;
  764. -webkit-text-size-adjust: none;
  765. text-size-adjust: none;
  766. font-family: "微軟正黑體", "Roboto", sans-serif;
  767. }
  768. body {
  769. color: #333;
  770. line-height: 150%;
  771. font-size: 15px;
  772. font-family: "微軟正黑體", "Roboto", sans-serif;
  773. width: 100%;
  774. min-height: 100%;
  775. }
  776. p {
  777. line-height: 150%;
  778. }
  779. h1, h2, h3, h4 {
  780. line-height: 120%;
  781. }
  782. .btn {
  783. font-size: 17px;
  784. padding: 8px 15px;
  785. -webkit-appearance: none; /*取消手機預設樣式*/
  786. -webkit-box-sizing: border-box;
  787. -moz-box-sizing: border-box;
  788. box-sizing: border-box;
  789. }
  790. .textStyle {
  791. padding: 8px;
  792. }
  793. .alignCenterMobile {
  794. text-align: center
  795. }
  796. input, textarea, select {
  797. font-size: 15px;
  798. line-height: 150%;
  799. }
  800. .btnSmall {
  801. padding: 8px 15px;
  802. line-height: 100%;
  803. font-size: 16px;
  804. }
  805. .picForMobile {
  806. width: 100%;
  807. height: auto;
  808. }
  809. .NoShowInMobile {
  810. display: none;
  811. }
  812. .googleMap {
  813. width: 100%;
  814. height: 400px;
  815. }
  816. /*-------------table Display--------------------*/
  817. .tableDisplay td {
  818. font-size: 14px;
  819. padding: 5px;
  820. }
  821. /*------------------menu------------------------*/
  822. h4.openMenu {
  823. display: block;
  824. position: fixed;
  825. width: 70px;
  826. height: 70px;
  827. top: 0;
  828. right: 0;
  829. background-image: url(../images/bars.svg);
  830. background-size: auto 50%;
  831. background-repeat: no-repeat;
  832. background-position: center center;
  833. text-indent: -9999px;
  834. z-index: 200;
  835. }
  836. h4.changColor {
  837. background-color: #eee;
  838. background-image: url(../images/close.svg);
  839. }
  840. #menu {
  841. width: 100%;
  842. background: #eee;
  843. position: fixed;
  844. top: 70px;
  845. right: 0;
  846. display: none;
  847. box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
  848. z-index: 9999;
  849. height: 100%;
  850. overflow: auto;
  851. padding-bottom: 100px; /**重要!!*/
  852. }
  853. #menu li {
  854. border-bottom: 1px solid #ddd;
  855. }
  856. #menu li:last-child {
  857. border-bottom: none;
  858. }
  859. #menu li a {
  860. color: #333;
  861. display: block;
  862. text-decoration: none;
  863. padding: 10px 0 10px 20px;
  864. }
  865. #menu li ul {
  866. display: none;
  867. }
  868. #menu li ul li {
  869. border-bottom: 0;
  870. border-top: 1px solid #ccc;
  871. }
  872. #menu li ul li a {
  873. background: #ddd;
  874. padding-left: 40px;
  875. }
  876. #menu li ul li a:hover {
  877. background: #EC681E;
  878. color: #fff;
  879. }
  880. #menu li.selected {
  881. background: #ccc;
  882. }
  883. /*-----------------header---------------*/
  884. header {
  885. box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
  886. position: fixed;
  887. left: 0;
  888. top: 0;
  889. width: 100%;
  890. background: #fff;
  891. z-index: 99;
  892. height: 70px;
  893. }
  894. header h1 a {
  895. width: 200px;
  896. height: 40px;
  897. text-indent: -9999px;
  898. background-image: url(../images/logo.png);
  899. background-repeat: no-repeat;
  900. background-size: cover;
  901. display: block;
  902. margin: 15px 0 0 15px;
  903. }
  904. /*----------------language------------------*/
  905. #language {
  906. position: absolute;
  907. right: 80px;
  908. top: 20px;
  909. }
  910. #language li {
  911. float: left;
  912. margin-left: 5px;
  913. }
  914. #language li a {
  915. display: block;
  916. height: 30px;
  917. width: 30px;
  918. line-height: 30px;
  919. text-align: center;
  920. background: #d5d5d5;
  921. border-radius: 30px;
  922. color: #333;
  923. text-decoration: none;
  924. font-size: 14px;
  925. }
  926. #language li a:hover {
  927. color: #fff;
  928. background: #EC681E;
  929. }
  930. #language li em {
  931. display: none;
  932. }
  933. #language li.CherryBuy a {
  934. background: none;
  935. border-radius: 0;
  936. background-image: url(../images/cherry.svg);
  937. height: 30px;
  938. width: 30px;
  939. }
  940. /*-------------content--------------------*/
  941. article {
  942. padding: 20px 15px;
  943. }
  944. /*---------------innerTitle-----------------*/
  945. #innerTitle {
  946. width: auto;
  947. padding: 40px 15px;
  948. background-position: left -100px bottom;
  949. background-size: cover;
  950. background-repeat: no-repeat;
  951. margin-top: 60px;
  952. }
  953. /*-----------------h1----------------*/
  954. h1.indexTitle {
  955. color: #fff;
  956. font-size: 22px;
  957. height: 40px;
  958. }
  959. h1.indexTitle em {
  960. border-bottom: 1px solid #fff;
  961. text-transform: uppercase;
  962. font-style: italic;
  963. line-height: 100%;
  964. padding-bottom: 8px;
  965. display: inline-block;
  966. vertical-align: top;
  967. font-size: 18px;
  968. }
  969. h1.indexTitle span {
  970. line-height: 60px;
  971. display: inline-block;
  972. font-style: italic;
  973. vertical-align: text-bottom;
  974. }
  975. h1.orange {
  976. color: #EC681E;
  977. }
  978. h1.orange em {
  979. border-color: #EC681E
  980. }
  981. article h2 {
  982. font-size: 21px;
  983. font-weight: normal;
  984. }
  985. h3 {
  986. font-size: 17px;
  987. font-weight: normal;
  988. }
  989. /*-------------left menu--------------------*/
  990. #left h4 {
  991. position: fixed;
  992. right: 15px;
  993. top: 195px;
  994. text-indent: -9999px;
  995. display: block;
  996. width: 35px;
  997. height: 35px;
  998. background-color: rgba(99,99,99,0.1);
  999. background-image: url(../images/more.svg);
  1000. background-size: auto 70%;
  1001. background-repeat: no-repeat;
  1002. background-position: center center;
  1003. border-radius: 50px;
  1004. z-index: 1999;
  1005. }
  1006. #left h4.gray {
  1007. background-color: #ddd;
  1008. }
  1009. #left ul {
  1010. display: none;
  1011. position: fixed;
  1012. right: 15px;
  1013. top: 235px;
  1014. border: 1px solid #e0e0e0;
  1015. box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
  1016. background: #fff;
  1017. z-index: 993;
  1018. }
  1019. #left ul li a {
  1020. display: block;
  1021. color: #333;
  1022. text-decoration: none;
  1023. background-position: left 10px center;
  1024. background-repeat: no-repeat;
  1025. background-size: 20px 20px;
  1026. border-bottom: 1px solid #e0e0e0;
  1027. padding: 8px 15px;
  1028. }
  1029. #left ul li:last-child a {
  1030. border: none;
  1031. }
  1032. #left ul li.selected a {
  1033. background: #f1f1f1;
  1034. }
  1035. #left ul li a:hover {
  1036. background: #EC681E;
  1037. color: #fff;
  1038. }
  1039. /*-------------download--------------------*/
  1040. #download li {
  1041. margin-bottom: 15px;
  1042. padding: 15px;
  1043. text-align: center;
  1044. border: 1px solid #f1f1f1;
  1045. box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 1px 5px 0px rgba(0,0,0,0.12);
  1046. }
  1047. #download li p {
  1048. min-height: 35px;
  1049. margin-bottom: 10px;
  1050. }
  1051. #download .btn {
  1052. width: 100%;
  1053. background: #ffa300;
  1054. }
  1055. /*----gallery-----*/
  1056. .gallery li {
  1057. float: left;
  1058. width: 49%;
  1059. margin: 0 2% 2% 0;
  1060. }
  1061. .gallery li:nth-child(2n) {
  1062. margin-right: 0;
  1063. }
  1064. .gallery li a {
  1065. display: block;
  1066. position: relative;
  1067. }
  1068. .gallery li a p {
  1069. width: 100%;
  1070. font-size: 13px;
  1071. line-height: 120%;
  1072. padding: 7px 10px;
  1073. position: absolute;
  1074. left: 0;
  1075. bottom: 0;
  1076. background: rgba(0,0,0,0.6);
  1077. color: #FFF;
  1078. }
  1079. /*-----------------contact--------------------*/
  1080. #conLeft ul li {
  1081. margin-bottom: 20px;
  1082. }
  1083. #conLeft ul li:nth-child(4) {
  1084. margin-bottom: 0;
  1085. }
  1086. /*-------------table form--------------------*/
  1087. .contentBox, .maxText, .largeText, .midText, .btnMax {
  1088. width: 100%;
  1089. }
  1090. .smallText {
  1091. width: 100px;
  1092. }
  1093. .tinyText {
  1094. width: 70px;
  1095. }
  1096. .validcode {
  1097. margin: 0 4px;
  1098. }
  1099. /*-------------footer--------------------*/
  1100. footer {
  1101. background: #EC681E;
  1102. color: #fff;
  1103. font-size: 13px;
  1104. }
  1105. #footer {
  1106. padding: 20px 10px;
  1107. }
  1108. #footer img {
  1109. height: 30px;
  1110. }
  1111. #Content img {
  1112. width: 100%;
  1113. }
  1114. #footer ul {
  1115. margin: 20px 0;
  1116. opacity: 0.9;
  1117. }
  1118. footer p a {
  1119. display: inline-block;
  1120. width: 50px;
  1121. height: 50px;
  1122. line-height: 25px;
  1123. margin-right: 10px;
  1124. }
  1125. footer p a:hover {
  1126. opacity: 1;
  1127. }
  1128. #copyright {
  1129. background: #00397B;
  1130. line-height: 40px;
  1131. text-align: center;
  1132. opacity: 0.8;
  1133. font-style: italic;
  1134. }
  1135. /*------------------toTop------------------------*/
  1136. #toTop {
  1137. right: 10px;
  1138. bottom: 60px;
  1139. }
  1140. }