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.
 
 
 
 
 
 

627 lines
11 KiB

  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4. overflow-x: hidden;
  5. padding-bottom: 50px;
  6. }
  7. html,body{
  8. min-height: 100%;
  9. background-size:100%;
  10. -moz-background-size:100%;
  11. -webkit-background-size:100%;
  12. -o-background-size:100%;
  13. }
  14. .clear{
  15. clear:both;
  16. }
  17. .index_box{
  18. width: 94%;
  19. margin:0 auto;
  20. }
  21. /*crumbs*/
  22. .crumbs{
  23. float: right;
  24. width: 40px;
  25. cursor: pointer;
  26. margin-top: 11px;
  27. }
  28. .crumbs div{
  29. height: 3px;
  30. border-radius: 1px;
  31. background: #9c9b9b;
  32. margin-bottom: 5px;
  33. transition:all 0.5s;
  34. -moz-transition:all 0.5s;
  35. -ms-transition:all 0.5s;
  36. -o-transition:all 0.5s;
  37. -webkit-transition:all 0.5s;
  38. }
  39. .crumbs.color div{
  40. background: #6dafff;
  41. }
  42. .indSec1T.active .crumbsList2{
  43. filter:alpha(opacity=0);
  44. -moz-opacity:0;
  45. -khtml-opacity:0;
  46. opacity:0;
  47. }
  48. .indSec1T.active .crumbsList1{
  49. transform:rotate(45deg) translate(21%,200%);
  50. -webkit-transform:rotate(45deg) translate(21%,200%);
  51. -moz-transform:rotate(45deg) translate(21%,200%);
  52. -o-transform:rotate(45deg) translate(21%,200%);
  53. -ms-transform:rotate(45deg) translate(21%,200%);
  54. }
  55. .indSec1T.active .crumbsList3{
  56. transform:rotate(-45deg) translate(13%,-90%);
  57. -webkit-transform:rotate(-45deg) translate(13%,-90%);
  58. -moz-transform:rotate(-45deg) translate(13%,-90%);
  59. -o-transform:rotate(-45deg) translate(13%,-90%);
  60. -ms-transform:rotate(-45deg) translate(13%,-90%);
  61. }
  62. .index_sec1{
  63. padding: 1px 0;
  64. }
  65. .indSec1T{
  66. margin-top: 30px;
  67. font-size: 20px;
  68. color: #313131;
  69. line-height: 40px;
  70. }
  71. .indSec1T > a{
  72. display: inline-block;
  73. margin-left: 15px;
  74. width: 80px;
  75. height: 40px;
  76. line-height: 38px;
  77. border: 1px solid #fff;
  78. border-radius: 2px;
  79. font-size: 16px;
  80. text-align: center;
  81. transition:all 0.5s;
  82. -moz-transition:all 0.5s;
  83. -ms-transition:all 0.5s;
  84. -o-transition:all 0.5s;
  85. -webkit-transition:all 0.5s;
  86. }
  87. .indSec1T.active > a{
  88. filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;
  89. }
  90. .indSec1List{
  91. overflow: hidden;
  92. text-align: right;
  93. float: right;
  94. white-space: nowrap;
  95. }
  96. .indSec1T.active .indSec1List{
  97. width: 930px;
  98. }
  99. .indSec1List li{
  100. display: inline-block;
  101. background: #fff;
  102. width: 170px;
  103. height: 44px;
  104. text-align: center;
  105. line-height: 42px;
  106. border: 1px solid #CDCDCD;
  107. border-radius: 3px;
  108. cursor: pointer;
  109. margin-left: 14px;
  110. }
  111. .indSec1List li:first-child{
  112. margin-left: 0;
  113. }
  114. .indSec1List a{
  115. color: #313131;
  116. font-size: 14px;
  117. display: block;
  118. }
  119. .indSec1List img{
  120. width: 32px;
  121. position: relative;
  122. top: -1px;
  123. margin-right: 5px;
  124. }
  125. /*crumbs*/
  126. /*layer*/
  127. .layui-layer-title{
  128. display: none;
  129. }
  130. .layerBox{
  131. background: #fff;
  132. position: relative;
  133. overflow: hidden;
  134. }
  135. .layerImg{
  136. position: absolute;
  137. z-index: 99;
  138. }
  139. .layer_sec{
  140. padding: 0 20px 0 120px;
  141. border-top: 1px dashed #E2E2E2;
  142. padding-top: 25px;
  143. }
  144. .layer_sec:first-child{
  145. border-top: 0;
  146. }
  147. .layer_sec1{
  148. overflow: hidden;
  149. padding-top: 60px;
  150. }
  151. .laySec1L{
  152. width: 40%;
  153. float: left;
  154. padding-right: 40px;
  155. }
  156. .laySec1ConT{
  157. font-size: 28px;
  158. color: #5768D9;
  159. line-height: 30px;
  160. }
  161. .laySec1ConT span{
  162. font-size: 58px;
  163. font-weight: bold;
  164. }
  165. .laySec1Sex{
  166. font-size: 15px;
  167. color: #fff;
  168. background: #ED94A5;
  169. height: 30px;
  170. width: 106px;
  171. text-align: center;
  172. border-radius: 2px;
  173. margin-top: 12px;
  174. }
  175. .laySec1Sex img{
  176. width: 20px;
  177. position: relative;
  178. top: -1px;
  179. margin-right: 4px;
  180. }
  181. .laySec1R{
  182. float: left;
  183. width: 60%;
  184. margin-top: -10px;
  185. }
  186. .laySec1R div:first-child{
  187. overflow: hidden;
  188. }
  189. .laySec1R div .laySec1Txt{
  190. width: 50%;
  191. float: left;
  192. margin-top: 0;
  193. }
  194. .laySec1Txt{
  195. font-size: 14px;
  196. color: #313131;
  197. margin-top: 25px;
  198. }
  199. .laySec1Txt span,.laySec2List span{
  200. width: 80px;
  201. text-align: right;
  202. color: #8F8F8F;
  203. display: inline-block;
  204. }
  205. .laySec1Txt span{
  206. margin-right: 12px;
  207. }
  208. .layer_sec2{
  209. margin-top: 50px;
  210. padding-top: 0;
  211. }
  212. .laySec2List{
  213. overflow: hidden;
  214. }
  215. .laySec2List li{
  216. float: left;
  217. width: 50%;
  218. margin-top: 40px;
  219. font-size: 14px;
  220. color: #313131;
  221. }
  222. .laySec2List span{
  223. margin-right: 50px;
  224. }
  225. .laySec2List i{
  226. font-style: normal;
  227. color: #8F8F8F;
  228. margin-left: 10px;
  229. }
  230. .laySec2Btn{
  231. text-align: right;
  232. margin: 40px 0 20px;
  233. }
  234. .laySec2Btn img{
  235. margin-left: 6px;
  236. width: 43px;
  237. }
  238. .layer_sec3{
  239. overflow: hidden;
  240. }
  241. .layerSec3Box{
  242. width: 50%;
  243. float: left;
  244. }
  245. .layer_sec4{
  246. padding-bottom: 40px;
  247. margin-top: 0;
  248. }
  249. /*layer*/
  250. /*floor.html*/
  251. .inSec1Row{
  252. margin: 0 -30px;
  253. overflow: hidden;
  254. padding-bottom: 50px;
  255. }
  256. .inSec1Col3{
  257. width: 25%;
  258. float: left;
  259. padding: 0 30px;
  260. margin-top: 30px;
  261. }
  262. .inSec1Top > span{
  263. float: left;
  264. font-size: 20px;
  265. color: #5768D9;
  266. margin-right: 5px;
  267. margin-left: 20%;
  268. }
  269. .inSec1Top > span span{
  270. font-size: 40px;
  271. font-weight: bold;
  272. font-family: Arial, Helvetica, sans-serif!important;
  273. }
  274. .inSec1TopList{
  275. float: left;
  276. margin-top: 22px;
  277. }
  278. .inSec1TopList li{
  279. float: left;
  280. margin-left: 5px;
  281. position: relative;
  282. }
  283. .inSec1TopList a,.inSec1TopList a > img{
  284. display: block;
  285. }
  286. .inSec1TopList a > img{
  287. width: 43px;
  288. }
  289. .inSec1Img{
  290. margin-top:20px;
  291. position: relative;
  292. }
  293. .inSec1Img img{
  294. display: block;
  295. width: 100%;
  296. }
  297. .inSec1Con{
  298. position: absolute;
  299. padding-top: 7px;
  300. z-index: -1;
  301. top: 40px;
  302. width: 320px;
  303. filter:alpha(opacity=0);
  304. -moz-opacity:0;
  305. -khtml-opacity:0;
  306. opacity:0;
  307. transition:all 0.5s;
  308. -moz-transition:all 0.5s;
  309. -ms-transition:all 0.5s;
  310. -o-transition:all 0.5s;
  311. -webkit-transition:all 0.5s;
  312. }
  313. .inSec1TopList li:hover .inSec1Con{
  314. top: 21px;
  315. z-index: 2;
  316. filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;
  317. }
  318. .inSec1Con1{
  319. left: -10px;
  320. }
  321. .inSec1Con3{
  322. right: -10px;
  323. }
  324. .inSec1Horn{
  325. display: block;
  326. width: 10px;
  327. position: relative;
  328. }
  329. .inSec1Con1 > img{
  330. margin-left: 27px;
  331. }
  332. .inSec1Con3 > img{
  333. margin-left: 284px;
  334. }
  335. .inSec1Con2{
  336. border: 1px solid #A4C2FF;
  337. border-radius: 8px;
  338. background: #fff;
  339. padding: 15px;
  340. margin-top: -1px;
  341. }
  342. .inSec1ConT{
  343. font-size: 20px;
  344. color: #313131;
  345. line-height: 30px;
  346. }
  347. .inSec1ConT span{
  348. font-size: 24px;
  349. color: #5768D9;
  350. font-weight: bold;
  351. }
  352. .inSec1Sex{
  353. float: right;
  354. font-size: 15px;
  355. color: #fff;
  356. background: #ED94A5;
  357. height: 30px;
  358. width: 106px;
  359. text-align: center;
  360. border-radius: 2px;
  361. }
  362. .inSec1Sex img{
  363. width: 20px;
  364. position: relative;
  365. top: -1px;
  366. margin-right: 4px;
  367. }
  368. .inSec1ConTxt{
  369. margin: 20px 0;
  370. font-size: 15px;
  371. color: #313131;
  372. line-height: 30px;
  373. }
  374. .inSec1ConTxt span{
  375. display: inline-block;
  376. height: 30px;
  377. padding: 0 10px;
  378. background: #F2F2F2;
  379. border-radius: 2px;
  380. margin: 0 5px 0 15px;
  381. }
  382. .inSec1ConTxt span:first-child{
  383. margin-left: 0;
  384. }
  385. .inSec1Btn{
  386. cursor: pointer;
  387. text-align: center;
  388. color: #029DFE;
  389. font-size: 15px;
  390. }
  391. .inSec1Btn i{
  392. margin-left: 10px;
  393. font-size: 16px;
  394. }
  395. .floor_warpper .laySec1Sex{
  396. float: right;
  397. }
  398. /*floor.html*/
  399. /*unit.html*/
  400. .unit_warpper .indSec1T,.unit_warpper .inSec1Top > span,.unit_warpper .indSec1T > a,.unit_warpper .inSec1ConT,.unit_warpper .inSec1ConTxt,.unit_warpper .inSec1ConT span{
  401. color: #fff;
  402. }
  403. .unit_warpper .crumbs div{
  404. background: #fff;
  405. }
  406. .unit_warpper .inSec1Con2{
  407. background: #6776EC;
  408. }
  409. .unit_warpper .inSec1ConTxt span{
  410. background: #5666E0;
  411. }
  412. .unit_warpper .inSec1Btn{
  413. color: #B7CFFF
  414. }
  415. .unitLayer .laySec1L{
  416. padding-left: 80px;
  417. }
  418. .laySec1ConTitle{
  419. font-size: 14px;
  420. color: #939FEE;
  421. margin-bottom: 30px;
  422. }
  423. .laySec1ConTitle span{
  424. font-weight: bold;
  425. }
  426. .unitLayer .laySec1R{
  427. margin-top: 20px;
  428. }
  429. /*unit.html*/
  430. /*corridor.html*/
  431. .corridor_warpper .inSec1Top > span,.corridor_warpper .inSec1ConT span,.corridor_warpper .inSec1Btn{
  432. color: #66C668;
  433. }
  434. .inSec1Imgs{
  435. text-align: center;
  436. width: 74px;
  437. height: 30px;
  438. text-align: center;
  439. line-height: 30px;
  440. margin: 12px auto;
  441. font-size: 20px;
  442. color: #fff;
  443. text-transform: uppercase;;
  444. background-size:100%;
  445. -moz-background-size:100%;
  446. -webkit-background-size:100%;
  447. -o-background-size:100%;
  448. }
  449. .corridor_warpper .inSec1Imgs, .corridorLayer .inSec1Imgs {
  450. background-image: url('../../../Content/images/guide/corr1.jpg');
  451. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../../Content/images/guide/corr1.jpg', sizingMethod='scale');
  452. }
  453. .corridorLayer .laySec1ConT{
  454. color: #54BE55;
  455. }
  456. .layerBox .inSec1Imgs{
  457. position: absolute;
  458. top: 0;
  459. left: 15px;
  460. z-index: 99;
  461. margin: 0;
  462. }
  463. .corridor_warpper .indSec1T a{
  464. background: #fff;
  465. border-color: #CDCDCD;
  466. }
  467. .corridor_warpper .inSec1Con2{
  468. border-color: #66C668;
  469. }
  470. /*corridor.html*/
  471. /*dormitory.html*/
  472. .dormitory_warpper .inSec1Top > span,.dormitory_warpper .inSec1ConT span,.dormitory_warpper .inSec1Btn{
  473. color: #EA9C48;
  474. }
  475. .dormitory_warpper .indSec1T a{
  476. background: #fff;
  477. border-color: #CDCDCD;
  478. }
  479. .dormitory_warpper .inSec1Imgs,.dormitoryLayer .inSec1Imgs{
  480. background-image:url('../../../Content/images/guide/dorm1.jpg');
  481. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../../Content/images/guide/corr1.jpg', sizingMethod='scale');
  482. }
  483. .dormitory_warpper .inSec1Imgs{
  484. margin-left:32%;
  485. }
  486. .laySec2List i.fa{
  487. color: #F3CD47;
  488. margin-left: 0;
  489. margin-right: 5px;
  490. }
  491. .laySec2List i.fa:last-child{
  492. margin-right: 0;
  493. }
  494. .dormitoryLayer .laySec1ConT {
  495. color: #EA9C48;
  496. }
  497. .inSec1ImgCon{
  498. position: absolute;
  499. top: 0;
  500. right: 10px;
  501. }
  502. .inSec1ImgCon > div{
  503. background: #fff;
  504. width: 56px;
  505. height: 34px;
  506. text-align: center;
  507. line-height: 32px;
  508. border-radius: 2px;
  509. border: 1px solid #D2D2D2;
  510. margin-top: 10px;
  511. }
  512. .inSec1ImgCon > div:first-child{
  513. margin-top: 0;
  514. }
  515. .inSec1ImgCon1 i{
  516. color: #F3CD47;
  517. line-height: 32px;
  518. margin-left: 3px;
  519. }
  520. .inSec1ImgCon1 i:first-child{
  521. margin-left: 0;
  522. }
  523. .inSec1ImgCon2 img{
  524. width: 12px;
  525. position: relative;
  526. display: inline-block;
  527. margin-right: 1px;
  528. top: -1px;
  529. }
  530. .inSec1ImgCon2{
  531. font-size: 12px;
  532. color: #76A1F7;
  533. }
  534. .inSec1ImgCon3{
  535. font-size: 14px;
  536. color: #FA7C7C;
  537. }
  538. .dormitory_warpper .inSec1Con2{
  539. border-color: #D28531;
  540. }
  541. /*dormitory.html*/
  542. /*room.html*/
  543. .room_warpper .inSec1Top > span,.room_warpper .inSec1ConT span,.room_warpper .inSec1Btn{
  544. color: #BC8BFF;
  545. }
  546. .room_warpper .indSec1T a{
  547. background: #fff;
  548. border-color: #CDCDCD;
  549. }
  550. .room_warpper .inSec1ImgCon{
  551. right: -30px;
  552. }
  553. .roomLayer .laySec1ConT{
  554. color: #BC8BFF;
  555. }
  556. .laySec1RImg{
  557. float: left;
  558. width: 120px;
  559. }
  560. .laySec1RImg img{
  561. display: block;
  562. width: 100%
  563. }
  564. .laySec1RImg div{
  565. overflow: hidden;
  566. padding-bottom: 140.833333%;
  567. height: 0;
  568. }
  569. .laySec1RCon{
  570. margin-left: 140px;
  571. }
  572. .laySec1Txts{
  573. font-size: 14px;
  574. color: #313131;
  575. margin-top: 28px;
  576. }
  577. .laySec1Txts:first-child{
  578. margin-top: 0;
  579. }
  580. .laySec1Txts span {
  581. margin-right: 12px;
  582. width: 80px;
  583. text-align: right;
  584. color: #8F8F8F;
  585. display: inline-block;
  586. }
  587. .roomLayer .laySec1R {
  588. margin-top: 5px;
  589. }
  590. .room_warpper .inSec1Con2{
  591. border-color: #B279FF;
  592. }
  593. .room_warpper .inSec1ConTxt span{
  594. overflow:hidden;
  595. white-space:nowrap;
  596. text-overflow:ellipsis;
  597. }
  598. .inSec1ConSpan1{
  599. width: 65px;
  600. }
  601. .inSec1ConSpan2{
  602. width: 125px;
  603. }
  604. /*room.html*/
  605. @media(max-width:1500px) {
  606. .inSec1Col3{
  607. width: 33.333333%
  608. }
  609. }
  610. @media(max-width:1400px) {
  611. .inSec1Col3{
  612. width: 33.333333%
  613. }
  614. }
  615. @media(max-width:768px) {
  616. }