@media only screen and (min-width: 768px) { .w-default-max-width-custom { max-width: 1000px; width: 100%; } .m-default-max-width-custom { margin-left: calc((100vw - 1000px) / -2); } .fz-35-custom { font-size: 35px; } .comic-relation-custom { width: calc(100% / 6); height: auto; margin: 2.1%; } .comic-relation-custom:first-child { margin-left: 0; } .comic-relation-custom:last-child { margin-right: 0; } } .fz-35-custom { font-size: 27px; } #preloader { height: 100%; width: 100vw; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999999999; background: #fff; } /*#preloader .loader {*/ /* !*border: 7px solid #f3f3f3;*!*/ /* !*border-radius: 50%;*!*/ /* !*border-top: 7px solid #000;*!*/ /* !*border-bottom: 7px solid #000;*!*/ /* width: 250px;*/ /* height: 250px;*/ /* !*-webkit-animation: spin 2s linear infinite; !* Safari *!*!*/ /* !*animation: spin 2s linear infinite;*!*/ /* position: absolute;*/ /* top: 50%;*/ /* left: 50%;*/ /* transform: translate(-50%, -50%);*/ /*}*/ /*!* Safari *!*/ /*@-webkit-keyframes spin {*/ /* 0% {*/ /* -webkit-transform: rotate(0deg);*/ /* }*/ /* 100% {*/ /* -webkit-transform: rotate(360deg);*/ /* }*/ /*}*/ /*@keyframes spin {*/ /* 0% {*/ /* transform: rotate(0deg);*/ /* }*/ /* 100% {*/ /* transform: rotate(360deg);*/ /* }*/ /*}*/ .preloader { background-color: #ffffff; width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; margin: 0 auto; display:flex; justify-content:center; align-items: center; } .preloader .preloader-circle { width: 125px; height: 125px; position: relative; border-style: solid; border-width: 3px; border-top-color: #000; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; z-index: 10; border-radius: 50%; -webkit-box-shadow: 0 1px 5px 0 rgba(35,181,185,0.15); box-shadow: 0 1px 5px 0 rgba(35,181,185,0.15); background-color: #ffffff; -webkit-animation: zoom 2000ms infinite ease; animation: zoom 2000ms infinite ease; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } @-webkit-keyframes zoom { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } } @keyframes zoom { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } } .preloader .preloader-img { position: absolute; top: 50%; z-index: 200; left: 0; right: 0; margin: 0 auto; text-align: center; display: inline-block; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding-top: 6px; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } #tabList { overflow-x: scroll; } .nav-container { height: 44px; line-height: 44px; } .prefix-hidden { width: 25px; height: 44px; } @media screen and (max-width: 550px) { .prefix-hidden { width: 25px; height: 60px !important; } } .show-sl { position: absolute; top: 50%; left: 50%; width: 150px; height: 40px; margin-top: -20px; margin-left: -75px; background: #e74c3c; color: #fff; border-radius: 5px; border: 0; border-bottom: 2px solid #c0392b; cursor: pointer; &:hover { background: #c0392b; } &:active { transform: scale(0.9); } } .close-sl { position: absolute; top: 0; right: 0; width: 35px; height: 30px; background: #000; color: #fff; cursor: pointer; border: 0; } .mask-sl { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(90, 90, 90, 0.74); z-index: 9999; visibility: hidden; opacity: 0; transition: 0.7s; } .modal-sl { position: fixed; top: 50%; left: 50%; width: 530px; height: auto; background: #fff; z-index: 10000; visibility: hidden; transform: translate(-50%, -50%) !important; opacity: 0; transition: 0.5s ease-out; } @media screen and (max-width: 550px) { .modal-sl { width: 90%; transform: translate(-50%, -50%) !important; margin: 0; } } .active-sl { visibility: visible; opacity: 1; } .active-sl + .modal-sl { visibility: visible; opacity: 1; transform: translateY(0); } .btn-click-sl { background: #000000; border: #000000 solid 1px; border-radius: 3px; color: #fff; display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative; transition: color .1s ease; } #button-contact-vr { position: fixed; z-index: 99999; right: 3%; bottom: 5%; } #gom-all-in-one .button-contact { transition: 1.6s all; -moz-transition: 1.6s all; -webkit-transition: 1.6s all; position: relative; margin-top: -5px; } #button-contact-vr .button-contact .phone-vr { position: relative; visibility: visible; background-color: transparent; width: 90px; height: 90px; cursor: pointer; z-index: 11; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transition: visibility .5s; left: 0; bottom: 0; display: block; } .phone-vr-circle-fill { width: 65px; height: 65px; top: 12px; left: 12px; position: absolute; box-shadow: 0 0 0 0 #c31d1d; background-color: rgba(230,8,8,.7); border-radius: 50%; border: 2px solid transparent; -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out; animation: phone-vr-circle-fill 2.3s infinite ease-in-out; transition: all .5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animuiion: live_chat 1.3s infinite; animation: live_chat 1.3s infinite; } #fanpage-vr .phone-vr-circle-fill { box-shadow: 0 0 0 0 rgb(24 119 242/65%); background-color: rgb(24 119 242/70%); } .phone-vr-img-circle { background-color: #1877f2; width: 40px; height: 40px; line-height: 40px; top: 25px; left: 25px; position: absolute; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; animation: phone-vr-circle-fill 1s infinite ease-in-out; } .phone-vr-img-circle a { display: block; line-height: 37px; } #fanpage-vr img { max-width: 30px; max-height: 30px; } .phone-vr-img-circle img { max-height: 25px; max-width: 27px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } @keyframes live_chat { 0% { transform: scale(.9); } 70% { transform: scale(1); box-shadow: 0 0 0 15px transparent; } 100% { transform: scale(.9); box-shadow: 0 0 0 0 transparent; } } @keyframes phone-vr-circle-fill { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); } 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg); } } #navBottomDetail { transition: 0.5s; } #headerComicDetail { transition: 0.5s; position: absolute; z-index: 10000; }