| @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 { |
| 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; |
| } |
|
|
