|
@@ -1,301 +0,0 @@
|
|
|
-html, body {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
-}
|
|
|
-
|
|
|
-html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* ::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
-} */
|
|
|
-
|
|
|
-iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-#ui {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- /* color: #494949; */
|
|
|
- letter-spacing: 3px;
|
|
|
-}
|
|
|
-
|
|
|
-#logoText {
|
|
|
- z-index: 1;
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 100;
|
|
|
- letter-spacing: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.switch-btn-Wrap {
|
|
|
- z-index: 1;
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.switch-btn-Wrap img {
|
|
|
- width: 75px;
|
|
|
- ;
|
|
|
-}
|
|
|
-
|
|
|
-#objName {
|
|
|
- z-index: 1;
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 32px;
|
|
|
- font-size: 22px;
|
|
|
- font-weight: 100;
|
|
|
- letter-spacing: 4px;
|
|
|
- color: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-#iconWrap {
|
|
|
- position: absolute;
|
|
|
- bottom: 30px;
|
|
|
- width: 200px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.mar-right {
|
|
|
- margin-right: 120px;
|
|
|
-}
|
|
|
-
|
|
|
-#iconLeft {
|
|
|
- cursor: not-allowed;
|
|
|
-}
|
|
|
-
|
|
|
-#iconRight {
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-#introductionWrap{
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- left: 20px;
|
|
|
- text-align: left;
|
|
|
- top: 20px;
|
|
|
- font-size: 16px;
|
|
|
- color: #ffffff;
|
|
|
- font-weight: 100;
|
|
|
- line-height: 30px;
|
|
|
- letter-spacing: 2px;
|
|
|
- width: 500px;
|
|
|
- display:none;
|
|
|
-}
|
|
|
-#companyText{
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- font-size: 16px;
|
|
|
- color:rgb(153, 153, 153);
|
|
|
- font-weight: 100;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 20px;
|
|
|
- letter-spacing: 1px;
|
|
|
- text-shadow:rgb(51, 51, 51) 0px 1px 1px;
|
|
|
-}
|
|
|
-.bg-audio {
|
|
|
- display:block;
|
|
|
- position:absolute;
|
|
|
- bottom:30px;
|
|
|
- right:10px;
|
|
|
- width:30px;
|
|
|
- height:30px;
|
|
|
- background:url(../images/bgmusic-play-icon.png)center/100% no-repeat;
|
|
|
- z-index:99;
|
|
|
-}
|
|
|
-.iconHome{
|
|
|
- top:30px;
|
|
|
-}
|
|
|
-.iconMenu {
|
|
|
- position:absolute;
|
|
|
- z-index:2;
|
|
|
- right:52px;
|
|
|
- display:flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.iconInfo {
|
|
|
- top:150px;
|
|
|
-}
|
|
|
-.iconMenu span {
|
|
|
- color:#fff;
|
|
|
-}
|
|
|
-#time, #size, #content,#excavated_time{
|
|
|
- margin-top: 8px;
|
|
|
-}
|
|
|
-#content p {
|
|
|
- text-indent:2em;
|
|
|
-}
|
|
|
-@media screen and (max-width: 600px) {
|
|
|
- #introductionWrap {
|
|
|
- width:70%;
|
|
|
- height:60%;
|
|
|
- overflow-y:scroll;
|
|
|
- position:absolute;
|
|
|
- margin:0 auto;
|
|
|
- top:10%;
|
|
|
- font-size:14px;
|
|
|
- line-height: 20px;
|
|
|
- display:none;
|
|
|
- }
|
|
|
- #time, #size, #content,#excavated_time {
|
|
|
- margin-top:4px;
|
|
|
- }
|
|
|
- #content {
|
|
|
-
|
|
|
- }
|
|
|
- #name {
|
|
|
- font-weight:bold;
|
|
|
- }
|
|
|
- #iconAction {
|
|
|
- position:absolute;
|
|
|
- z-index:99;
|
|
|
- }
|
|
|
- .iconMenu {
|
|
|
- width:60px;
|
|
|
- right:10px;
|
|
|
- }
|
|
|
- .iconMenu img {
|
|
|
- width:50%;
|
|
|
- }
|
|
|
- .iconHome {
|
|
|
-
|
|
|
- }
|
|
|
- .iconInfo {
|
|
|
- top:90px;
|
|
|
- }
|
|
|
- .iconMenu span {
|
|
|
- font-size:10px;
|
|
|
- }
|
|
|
- #iconWrap {
|
|
|
- width:50%;
|
|
|
- z-index:2;
|
|
|
-
|
|
|
- }
|
|
|
- #iconLeft,#iconRight {
|
|
|
- width:30px;
|
|
|
- height:30px;
|
|
|
- }
|
|
|
- #companyText{
|
|
|
- font-size:13px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media only screen and (max-height:480px) {
|
|
|
- .center img, .center-first img {
|
|
|
- width: 52vw;
|
|
|
- max-width: 250px;
|
|
|
- max-height: 110px;
|
|
|
- }
|
|
|
- .center:nth-child(8) img {
|
|
|
- width: 30vw;
|
|
|
- max-width: 153px;
|
|
|
- max-height: 127px;
|
|
|
- }
|
|
|
- .center:nth-child(17) img {
|
|
|
- width: 30vw;
|
|
|
- max-width: 165px;
|
|
|
- max-height: 176px;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-.animated {
|
|
|
- -webkit-animation-duration:1s;
|
|
|
- animation-duration:1s;
|
|
|
- -webkit-animation-fill-mode:both;
|
|
|
- animation-fill-mode:both
|
|
|
-}
|
|
|
-@-webkit-keyframes fadeInRight {
|
|
|
- 0% {
|
|
|
- opacity:0;
|
|
|
- -webkit-transform:translate3d(100%, 0, 0);
|
|
|
- transform:translate3d(100%, 0, 0)
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity:1;
|
|
|
- -webkit-transform:translateZ(0);
|
|
|
- transform:translateZ(0)
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes fadeInRight {
|
|
|
- 0% {
|
|
|
- opacity:0;
|
|
|
- -webkit-transform:translate3d(100%, 0, 0);
|
|
|
- transform:translate3d(100%, 0, 0)
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity:1;
|
|
|
- -webkit-transform:translateZ(0);
|
|
|
- transform:translateZ(0)
|
|
|
- }
|
|
|
-}
|
|
|
-.fadeInRight {
|
|
|
- -webkit-animation-name:fadeInRight;
|
|
|
- animation-name:fadeInRight
|
|
|
-}
|
|
|
-
|
|
|
-@-webkit-keyframes fadeOutRight {
|
|
|
- 0% {
|
|
|
- opacity:1
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity:0;
|
|
|
- -webkit-transform:translate3d(100%, 0, 0);
|
|
|
- transform:translate3d(100%, 0, 0)
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes fadeOutRight {
|
|
|
- 0% {
|
|
|
- opacity:1
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity:0;
|
|
|
- -webkit-transform:translate3d(100%, 0, 0);
|
|
|
- transform:translate3d(100%, 0, 0)
|
|
|
- }
|
|
|
-}
|
|
|
-.fadeOutRight {
|
|
|
- -webkit-animation-name:fadeOutRight;
|
|
|
- animation-name:fadeOutRight
|
|
|
-}
|
|
|
-
|
|
|
-@-webkit-keyframes fadeOut {
|
|
|
- 0% {
|
|
|
- opacity:1
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity:0
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes fadeOut {
|
|
|
- 0% {
|
|
|
- opacity:1
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity:0
|
|
|
- }
|
|
|
-}
|
|
|
-.fadeOut {
|
|
|
- -webkit-animation-name:fadeOut;
|
|
|
- animation-name:fadeOut;
|
|
|
- -webkit-animation-duration:2s;
|
|
|
- animation-duration: 2s;
|
|
|
-}
|