@charset "utf-8"; @import "../initial"; .layout-content { min-height: 37.5em; .container { @extend .response-container; } } .lighttext{ @media(min-width: 1024px){ width: 70%!important; } } .more{ &:hover{ background: #ffe26f; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; color: #000; } } .w-annc__more{ border: 1px solid #fff; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); height: 50px; width: 50px; display: -moz-box; display: flex; -moz-box-pack: center; justify-content: center; -moz-box-align: center; align-items: center; right: 0; color: #fff; font-weight: 300; font-size: .85rem; cursor: pointer; background: none; &:hover{ background: #ffe26f; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; color: #000; } } // .ball{ -webkit-animation: ballAnimate 2s; animation: ballAnimate 2s; bottom: -210px; position: fixed; width: 350px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); z-index: 5; &:hover{ -webkit-filter: drop-shadow(0 0 40px #ffe26f) brightness(1.3); filter: drop-shadow(0 0 40px #ffe26f) brightness(1.3); -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; } } @keyframes ballAnimate { from {bottom: -400px;} to {bottom: -210px;} } @media(max-width:$screen-xs){ .zones{ display: flex; padding-bottom: 1em; padding-right: 0; padding-left: 0; } .zonesreverse{ display: flex; flex-direction: row-reverse; padding-bottom: 1em; } .zonesimg{ width: 50%; padding-right: 0.5em; padding-left: 0.5em; } .zonestext{ width: 50%; padding-right: 0.5em; padding-left: 0.5em; } .more{ height: 40px!important; width: 40px!important; font-size: 0.6rem!important; } .single-column{ padding: 0; } .bluelight{ width: 100%!important; } } @media(min-width: 768px){ .kenrow{ display: flex; } .col-sm-3{ width: 25%!important; } } .introductionwrap{ background: linear-gradient(180deg,#ffbd1933 0,#ffbd194d 51%,#ffbd1957 70%,#7a51131a); -pie-background: linear-gradient(180deg,#ffbd1933 0,#ffbd194d 51%,#ffbd1957 70%,#7a51131a); behavior: url("/assets/ie_support/PIE2/PIE.htc"); padding: 40px 60px; color: #eee; font-weight: 300; line-height: 35px; font-size: 1.2rem; text-align: justify; } .introduction{ display: flex; .subtitle{ width: 30%; font-weight: 300; font-size: 1.5rem; letter-spacing: 8px; } .subimg{ width: 70%; } } @media(max-width:992px){ .introduction{ display: none; } .introductionwrap{ background: none; padding: 10px; font-size: 1rem; line-height: 30px; } .moontext{ width: 100%!important; flex-wrap: wrap; .mooonimg{ width: 100%!important; padding-left:0!important; } .mooonimgtwo{ width: 60%!important; padding-left:0!important; } } } .moontext{ display: flex; align-items: flex-end; } .introduction_activity{ border-bottom: 1px solid #ffbd194d; padding-bottom: 10px; margin-bottom: 50px; } .introbanner{ padding-bottom: 55px; border-bottom: 1px solid #ffbd194d; margin-bottom: 45px; } .Show_timeWrapper__367Gw{ display: flex; } .Show_dayWrapper__1FEbo{ font-size: 3.75rem; margin-right: 25px; font-weight: 300; span{ font-size: 1.2rem; margin-bottom: -107px; display: block; font-weight: 400; } } .Exhibition_content__2ApBj{ display: flex; margin-bottom: 35px; margin-top: 10px; } .Exhibition_join__2q7Dt{ border: 1px solid #fff; line-height: 30px; padding: 10px; height: 83px; color: #fff; font-size: 1.3rem; letter-spacing: 4px; width: 75px; text-align: center; margin-right: 4%; } .text-white{ font-size: .875em; } //introtext .intro,.intro2{ .introtext{ opacity: 0; -webkit-transform: translateY(15%) translateZ(0); -moz-transform: translateY(15%) translateZ(0); -o-transform: translateY(15%) translateZ(0); -ms-transform: translateY(15%) translateZ(0); transform: translateY(15%) translateZ(0); -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease; -moz-transition: transform 0.8s ease-out, opacity 0.4s ease; -o-transition: transform 0.8s ease-out, opacity 0.4s ease; -ms-transition: transform 0.8s ease-out, opacity 0.4s ease; transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02); @media(min-width:1024px){ } @media (min-width: 768px) and (max-width: 1023px){ } } .animationtext{ opacity: 1; -webkit-transform: translateY(0) translateZ(0); -moz-transform: translateY(0) translateZ(0); -o-transform: translateY(0) translateZ(0); -ms-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); } } //// .wrap { text-align: center; padding-top: 20%; } .btn { background-color: #FFB80C; text-decoration: none; color: #1e1e1e; padding: 16px; border-radius: 5px; behavior: url("/assets/ie_support/PIE2/PIE.htc"); } .popup-wrap { width: 100%; height: 100%; display: block; position: fixed; top: 0px; left: 0px; content: ''; background: rgba(0, 0, 0, 0.85); z-index: 10; } .popup-box { width:80%; padding: 50px 75px; transform: translate(-50%, -50%) scale(0.5); position: absolute; top: 50%; left: 50%; box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5); border-radius: 3px; behavior: url("/assets/ie_support/PIE2/PIE.htc"); background: #fff; text-align: center; } h3 { font-size: 2em; color: #333; font-weight: bold; letter-spacing: 3px; text-align: initial; line-height: 1.5em; } .close-btn { width: 50px; height: 50px; display: inline-block; position: absolute; top: 10px; right: 10px; border-radius: 100%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); background: #d75f70; font-weight: bold; text-decoration: none; color: #fff; line-height: 40px; font-size: 32px; } .transform-in, .transform-out { display: block; -webkit-transition: all ease 0.5s; transition: all ease 0.5s; } .transform-in { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .transform-out { -webkit-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); }