Server : Apache System : Linux server1.cgrithy.com 3.10.0-1160.95.1.el7.x86_64 #1 SMP Mon Jul 24 13:59:37 UTC 2023 x86_64 User : nobody ( 99) PHP Version : 8.1.23 Disable Function : NONE Directory : /home/dnlcambodia/www/assets/scss/ |
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: inherit; } } body{ margin: 0; padding: 0; overflow-x: hidden; font-size: 16px; line-height: 1.5;; color: $body-color; font-family: $body-font; -moz-osx-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } .ul-li ul { margin: 0; padding: 0; li{ list-style: none; display: inline-block; } } .ul-li-block ul { margin:0; padding: 0; li{ display: block; list-style: none; } } #preloader { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; overflow: visible; background: #ffff url('../img/loader.svg') no-repeat center center; } %nav-style { .sl-left_arrow, .sl-right_arrow { top: 50%; width: 65px; height: 65px; border: none; font-size: 18px; position: absolute; border-radius: 100%; background-color: #fff; transform: translateY(-50%); transition: 400ms all ease; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.18); &:after { top: 6px; left: 7px; width: 52px; content: ''; height: 52px; position: absolute; border-radius: 100%; border: 2px solid $base-color; } &:hover { color: #fff; background-color: $base-color; } } .sl-left_arrow { left: -100px; } .sl-right_arrow { right: -100px; } } [data-background] { background-size: cover; background-repeat: no-repeat; background-position: center center; } a { color: inherit; text-decoration:none; transition: 500ms all ease; &:hover, &:focus{ text-decoration: none; } } img { max-width: 100%; height: auto; } button { cursor: pointer; } .form-control:focus, button:visited, button.active, button:hover, button:focus, input:visited, input.active, input:hover, input:focus, textarea:hover, textarea:focus, a:hover, a:focus, a:visited, a.active, select, select:hover, select:focus, select:visited { outline: none; box-shadow: none; text-decoration: none; color: inherit; } .form-control { box-shadow: none; } .relative-position { position: relative; } .pera-content { p { margin-bottom: 0; } } .headline h1, .headline h2, .headline h3, .headline h4, .headline h5, .headline h6 { margin: 0; font-weight: normal; font-family: $heading; } .container { max-width: 1200px; } .float-left { float: left; } .float-right { float: right; } .text-right { text-align: right; } .background_overlay { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .background_position { background-size: cover; background-repeat: no-repeat; background-position: center center; } .slick-dotted.slick-slider { margin-bottom: 0; } .ft-item-innerbox { padding: 0px 15px; } .ft-section-title { .sub-title { font-size: 20px; font-weight: 700; color: $base-color; padding: 0px 82px; position: relative; &:before, &:after { top: 15px; content: ''; height: 3px; width: 75px; position: absolute; background-color: $base-color; } &:before { left: 0; } &:after { right: 0; display: none; } } &.text-center { .sub-title { &:after { display: block; } } } h2 { color: $color-2; font-size: 36px; font-weight: 700; line-height: 1.333; padding: 10px 0px 20px; } } .ft-section-title-2 { margin: 0 auto; max-width: 580px; .sub-title { font-size: 20px; font-weight: 700; color: $base-color; } h2 { color: #003440; font-size: 36px; font-weight: 700; padding-top: 15px; padding-bottom: 25px; span { color: $base-color; } } } .ft-section-title-3 { span { color: #fa3b0e; font-size: 18px; font-weight: 500; } h2 { color: #141415; font-size: 48px; font-weight: 700; padding-top: 12px; } } .ft-sb-button { color: #fff; height: 55px; width: 170px; border: none; font-weight: 600; border-radius: 6px; font-family: $heading; background-color: $base-color; } .scrollup { width: 55px; right: 20px; z-index: 5; height: 55px; bottom: 20px; display: none; position: fixed; border-radius: 100%; line-height: 55px; background-color: $base-color; i { color: #fff; } } @-webkit-keyframes btn_shine { 100% { left: 200% } } @keyframes btn_shine { 100% { left: 200% } } .ft-btn { a { color: #fff; height: 55px; z-index: 1; width: 170px; font-weight: 600; overflow: hidden; border-radius: 6px; position: relative; font-family: $heading; background-color: $base-color; &:after { content: ''; position: absolute; top: 0; left: -200%; width: 200%; height: 100%; -webkit-transform: skewX(-20deg); -khtml-transform: skewX(-20deg); -moz-transform: skewX(-20deg); -ms-transform: skewX(-20deg); -o-transform: skewX(-20deg); transform: skewX(-20deg); background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,.4)),to(transparent)); background-image: linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent); z-index: -1; } &:hover { background-color: $base-color; &:after { -webkit-animation: btn_shine 1.2s ease; animation: btn_shine 1.2s ease; -webkit-animation-delay: .1s; animation-delay: .1s; } } } } .ft-btn-2 { a { z-index: 1; width: 60px; height: 45px; color: #002a34; overflow: hidden; line-height: 48px; text-align: center; position: relative; display: inline-block; transition: 500ms all ease; span { opacity: 0; color: #002a34; font-size: 15px; font-weight: 600; margin-right: 8px; font-family: $heading; transition: 500ms all ease; } i { top: 2px; right: 0; left: 0; position: absolute; transition: 500ms all ease; } &:before { top: 0; left: 0; content: ''; z-index: -1; width: 60px; height: 45px; position: absolute; border-radius: 30px; transition: 500ms all ease; border: 2px solid #002a34; } &:hover { width: 150px; span { opacity: 1; } i { left: auto; right: 15px; } &:before { width: 150px; background-color: #fff; border: 2px solid #fff; } } } } .ft-btn-3 { a { color: #fff; height: 55px; width: 180px; font-weight: 600; border-radius: 30px; font-family: $heading; background-color: $base-color; i { top: 2px; margin-left: 5px; position: relative; transition: .3s all ease-in-out; } &:hover { background-color: $color-2; i { margin-left: 10px; } } } } .ft-sb-button { z-index: 1; overflow: hidden; position: relative; &:after { content: ''; position: absolute; top: 0; left: -200%; width: 200%; height: 100%; -webkit-transform: skewX(-20deg); -khtml-transform: skewX(-20deg); -moz-transform: skewX(-20deg); -ms-transform: skewX(-20deg); -o-transform: skewX(-20deg); transform: skewX(-20deg); background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,.4)),to(transparent)); background-image: linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent); z-index: -1; } &:hover { color: #fff; background-color: $base-color; &:after { -webkit-animation: btn_shine 1.2s ease; animation: btn_shine 1.2s ease; -webkit-animation-delay: .1s; animation-delay: .1s; } } } .ft-pagination-item { margin-top: 20px; li { a { color: #fff; width: 50px; height: 50px; display: flex; font-size: 18px; font-weight: 500; margin-right: 15px; align-items: center; justify-content: center; background-color: #003440; &:hover { background-color: $base-color; } } } &.text-center { li { a { margin: 0px 8px; } } } } .top-stikcy { top: 80px; position: sticky; } .pr-cor-section-title { &.middle-align { margin: 0 auto; max-width: 580px; .pr-cor-title-tag { &:before { display: block; } &:after { width: 35px; right: -40px; } } } .pr-cor-title-tag { font-size: 20px; font-weight: 700; color: #ff484e; position: relative; &:before, &:after { top: 18px; content: ''; width: 35px; position: absolute; border-top: 2px dashed #ff484e; } &:before { left: -40px; display: none; } &:after { width: 50px; right: -55px; } } h2 { font-size: 36px; font-weight: 700; color: $base-color-2; padding: 20px 0px 24px; } } .pr-sx-secion-title { margin: 0 auto; max-width: 620px; .pr-sx-title-tag { font-size: 18px; font-weight: 700; color: $base-color-2; &:after { top: 15px; height: 2px; width: 35px; content: ''; right: -40px; position: absolute; background-color: $base-color-2; } } h2 { font-size: 48px; font-weight: 700; color: #ff484e; padding: 20px 0px; span { color: $base-color-2; } } } .ft-thx-btn { a { z-index: 1; width: 150px; height: 60px; font-weight: 600; border-radius: 5px; color: $base-color-2; position: relative; border: 2px solid #ff484e; &:before { left: 0; top: 0; content: ''; width: 5px; height: 100%; z-index: -1; overflow: hidden; position: absolute; transition: 500ms all ease; background-color: #ff484e; } &:hover { color: #fff; &:before { width: 100%; } } } } .ft-thx-section-title-3 { span { font-weight: 600; font-family: $heading; color: $base-color-3; text-transform: uppercase; } h2 { color: #050505; font-size: 48px; font-weight: 700; padding: 10px 0px 20px; } } .ft-thx-btn-2 { a { z-index: 1; color: #fff; width: 170px; height: 60px; overflow: hidden; font-weight: 500; position: relative; border-radius: 5px; font-family: $heading; background-color: $base-color-3; &:after { content: ''; position: absolute; top: 0; left: -200%; width: 200%; height: 100%; -webkit-transform: skewX(-20deg); -khtml-transform: skewX(-20deg); -moz-transform: skewX(-20deg); -ms-transform: skewX(-20deg); -o-transform: skewX(-20deg); transform: skewX(-20deg); background-image: -webkit-gradient(linear,left top,right top,from(transparent),color-stop(rgba(255,255,255,.4)),to(transparent)); background-image: linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent); z-index: -1; } &:hover { &:after { -webkit-animation: btn_shine 1.2s ease; animation: btn_shine 1.2s ease; -webkit-animation-delay: .1s; animation-delay: .1s; } } } }