0byt3m1n1-V2
Path:
/
home
/
xncercjb
/
domains
/
quickspace.co.th
/
public_html
/
css
/
[
Home
]
File: style.css
html{font-size:18px;} @font-face { font-family: 'Maledpan-Regular'; src: url('fonts/Maledpan-Regular.eot'); src: url('fonts/Maledpan-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Maledpan-Regular.woff') format('woff'), url('fonts/Maledpan-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } body{ font-family: 'Maledpan-Regular'; cursor: default; position: relative; line-height:normal; font-size: 1rem; color: #000; } img{ border:0; margin:auto;} a{ text-decoration:none; color:inherit; } a:hover{ color:inherit; text-decoration: none; } ul{ padding-left: 0;margin-bottom: 0;} h1, h2, h3{line-height: normal;} #back-to-top { width: 50px; height: 25px; position: fixed; z-index: 9999; bottom: 0; left: calc(50% - 10px); text-align: center; display: flex; justify-content: center; align-items: center; padding:5px 0; background:#F00; border-radius: 50px 50px 0 0; font-size: .9rem; transform: translate(-50%,0); } #back-to-top:hover{ opacity: 1; } #back-to-top a { color: #FFF; } button:focus { outline: none; } #nav-icon3{ z-index: 88; width: 35px; height: 30px; position: absolute; top: 30%; right: 5%; margin:0px 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span{ display: block; position: absolute; height: 3px; width: 100%; background: #013e7f; border-radius: 4px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 10px; } #nav-icon3 span:nth-child(4) { top: 20px; } #nav-icon3.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } /*head--//////////////////////////////////////////////////////////////////////////*/ .headbar-main{ width: 100%; padding: 2rem 0; transition: all 0.5s; } .slim .headbar-main{ background: #FFF; box-shadow: 0 3px 8px rgba(0,0,0,.2); } .hamburgers-box{ width: 100%; position: relative; transition: all 0.5s; } .navbar-brand { width:100%; padding: 0; text-align: left; margin: 0 auto; transition: all 0.5s; } .navbar-brand img{ width:200px; margin: 0; transition: all 0.5s; } .navbar-collapse ul li{ padding: 0; transition: all 0.5s; } .navbar-collapse ul li a { width: 100%; margin: auto; padding:10px 15px ; position: relative; display: block; color: #000; } .navbar-collapse ul li.active, .navbar-collapse ul li:hover{background:none; } .navbar-collapse ul li.active a, .navbar-collapse ul li a:hover, .menu-top ul li.active a, .menu-top ul li a:hover{ color: #83dbff; } .social-header{ text-align: center; margin-top: 2rem; } .social-header img{transition: all 0.5s;} .social-header img:hover{transform: scale(.95);} .menu-language{ position: absolute; top: 0rem; right: 4rem; } .menu-language .dropdown .dropdown-menu{ padding: 0; width: 100%; min-width: inherit; } .menu-language .dropdown .dropdown-menu a{ display: block; padding: 10px 0; text-align: center; color: #013e7f; } .menu-language .dropdown-menu a:hover{background: #f5f5f5;} .contact-header a:hover{color: #f00;} .contact-header ul{list-style: none;} .contact-header ul li{ display: flex; align-items: center; padding: 8px 15px; } .contact-header p{ margin-bottom: 0; color: #013e7f; } .contact-header ul li img{ width: 2em; margin: 0; margin-right: 15px; transition: all 0.5s; } .contact-header ul li:hover img{transform: translateY(-5px);} .navbar-collapse .contact-header ul li a{ padding: 0; display: inherit; } .opentime-main{ display: none; padding: 15px 0; background: #d9d9d9; } .opentime-main ul{ list-style: none; display: flex; align-items: center; justify-content: flex-end; } .opentime-main ul li{font-size: 17px;} .language-choose{display: none;} .language-choose img{transition: all 0.5s;} .dropdown-menu{ border-radius: 0; border: none; background: #f5f5f5; } .navbar-collapse ul li .dropdown-submenu .dropdown-menu{ background: #F9F9F9; } .dropdown-submenu:hover > .dropdown-menu{display: block;} .navbar-collapse ul li.dropdown .dropdown-menu a{ border-bottom:1px solid #FFF; } /*slide-banner--//////////////////////////////////////////////////////////////////////////*/ #slide-zone{position: relative;} #slide-zone .banner-slide{ width: 100%; } #slide-zone .banner-slide img{ width: 100%; } /*content--//////////////////////////////////////////////////////////////////////////*/ .content-service{padding: 10% 0;} .service-box{ text-align: center; margin-bottom: 2rem; background: #FFF; color: #1a1a1a; padding:2rem 1rem; box-shadow: 0px 12px 20px 0px rgba(34, 50, 67, 0.3); } .service-box h1{ font-size: 1.4rem; margin: 1rem auto 0; color: #013e7f; } .service-box p{ color: #afbcc2; margin-bottom: 0; text-transform: uppercase; } .line-service{ width: 80px; height: 5px; border-radius: 5px; background: #013e7f; margin: 1rem auto 2rem; } .detail-service{ margin-bottom: 2rem; } .detail-service img{ max-width: 100%; transition: all 0.5s; } .service-box:hover img{filter: brightness(0) invert(1);} .service-box:hover{background: #013e7f;} .service-box:hover, .service-box:hover p, .service-box:hover h1{color: #FFF;} .service-box:hover .line-service{background: #FFF;} /*footer--//////////////////////////////////////////////////////////////////////////*/ .footer { color: #FFF; padding:10% 0; background: #013e7f; } .footer a:hover{ color: #F00;} .footer h1{ font-size: 1.2rem; margin-bottom: .5rem; } .footer p{margin-bottom: 0;} .title-footer{ text-align: center; margin-bottom: 2rem; font-size: 1.2rem; } .address-footer{ margin-bottom: 1rem; padding-right: 15%; } .contact-footer ul{list-style: none;} .contact-footer{margin: 1rem auto;} .copyright-box{ color: #FFF; padding:2% 10% 10%; text-align: center; background: #013368; } .social-footer{ text-align: center; margin: 1rem auto 0; } .social-footer img{ transition: all 0.5s; width: auto; } .social-footer img:hover{transform: scale(.9);} /************************2023***********************************/ .cate-news-img img{ max-width: 100%; max-height: 100%; transition: all 0.5s; } .all-cate-news{ text-align: center; transition: all 0.5s; font-size: 1.5rem; } .all-cate-news:hover img{transform: scale(1.05);} .all-cate-news:hover .cate-news{color: #013e7f; } .boxnew-img{ margin: 15px 5px; } .boxnew-img-2{ margin: 15px 5px; height: 240px; overflow: hidden; } .boxnew-img-2 img{ transition: all 0.5s; width: 100%; height: 100%; object-fit: cover; } .allsub-cate{ /*display: flex; align-items: center; justify-content: center;*/ margin-bottom: 20px; } .sub-cate{ display: inline-block; background: #013e7f; color: #fff; margin: 5px auto; padding: 5px 15px; } /**************/ .alllist-news{ margin: 15px auto; margin-top: 15px; } .listimg-box{ height: 250px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 8px rgba(0,0,0,0.3); margin-bottom: 5px; } .listimg-box img{ transition: all 0.5s; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .listimg-box:hover img{transform: scale(1.05);} .listname-box{ font-size: 1.1rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; height: calc(1.1rem * 1.2 * 2); margin-top: 15px; } .listname-box:hover { color: #013e7f; } .listtitle-box{ font-size: 1rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; height: calc(1rem * 1.3 * 3); color: #4b4b4b; } .detail-news img, .detail-news table , .detail-news table tr td, .detail-news table tr th{ max-width: 100%; } .detail-news ul { margin-left: 3rem; } /*///////////////////////////////////////////////////////////////////////////media///////////////////////////////////////////////////////////////////////////*/ @media (max-width: 812px ) { body{ max-width: 100% !important; } .navbar-collapse{ position: fixed; width: 250px; background: #FFF; height: 100% !important; max-height: none !important; top: 0; display: block; left: -250px; margin: 0 !important; z-index: 55; overflow-y: scroll; box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.1); } .navbar-collapse.in{ left: 0 !important; } .navbar-collapse.show{ display:block; left: 0 !important; } .all-container{ width: 100%; } .all-container.-collapse{ /*margin-left: 250px;*/ } .headbar-main, .navbar-collapse, .navbar-collapse.collapsing, .all-container.all-container.all-container { transition: all 0.5s !important; } .headbar-main.-collapse { /*margin-left: 250px;*/ width:100%; } } .content-pageother{padding: 10% 0;} .contentgray-pageother{ padding: 10% 0; background: #f5f5f5; } .title-otherpage{ color: #013e7f; text-align: center; margin-bottom: 2rem; } .title-otherpage h1{ font-size: 1.6rem; margin-bottom: 0; font-weight: bold; line-height: 1; } .title-otherpage p{ letter-spacing: 4px; font-size: 1.1rem; text-transform: uppercase; } .subtitle-otherpage{ text-align: center; font-size: 1.1rem; margin-bottom: 1rem; color: #013e7f; } .subtitle-otherpage h1{ font-size: 1.6rem; margin-bottom: 0; line-height: 1; font-weight: bold; } .timeline-aboutus{padding: 7% 0;} .aboutus-box{ color: #6e6e6e; text-align: center; margin-bottom: 2rem; padding: 0 3%; } .aboutus-box p{ font-size: 1.2rem; color: #141414; margin-bottom: 0; font-weight: bold; } .aboutus-box h1{ font-size: 2rem; font-weight: bold; margin: 5px auto 15px; color: #013e7f; line-height: 1; } .aboutus-box .img-box{ padding: 1rem 0; text-align: center; box-shadow: none; } .aboutus-box .img-box img{ max-width: 100%; margin: 0; } .vission-box{ text-align: center; margin-bottom: 2rem; } .vission-box h1{ font-size: 1.4rem; font-weight: bold; margin-bottom: 0; font-style: italic; color: #013e7f; } .vission-box ul{list-style: none;} .vission-box ul li{ padding-bottom: 15px; text-align: left; display: flex; } .vission-box .fa-angle-double-right{ margin-right: 15px; font-size: 20px; margin-top: 15px; } .img-cus{ overflow: hidden; margin-bottom: 2rem; transition: all 0.5s; cursor: pointer; text-align: center; border-radius: 50%; } .img-cus:hover img{ box-shadow: 0 0 15px rgba(0,0,0,0.2); transform: scale(.9); } .img-cus img{ max-width: 100%; transition: all 0.5s; border-radius: 50%; } .customers-box{margin-top: 2rem;} .customers-box .card-header{ text-align: center; background: none; padding: 8px; border-radius: 0; transition: all 0.5s; color: #013e7f; border: none; margin: 1rem auto; cursor: pointer; } .customers-box .card{border: none;padding: 0;} .customers-box .fa-chevron-up{ font-size: 2rem; transition: all 0.5s; } .customers-box .card-header[aria-expanded="false"] .fa-chevron-up{transform: rotate(180deg);} .portfolio-box{margin-top: 3rem;} .portfolio-box .subtitle-otherpage{margin-bottom: 3rem;} .port-box{ width: 100%; overflow: hidden; position: relative; margin-bottom: 2rem; transition: all 0.5s; } .port-box:hover{box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.46);} .port-box img{ width: 100%; transition: all 0.5s; } .port-box:hover img{transform: scale(1.05);} .port-box-img{ height: 370px; width: 100%; } .port-box-img img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .detail-port{ color: #FFF; display: flex; align-items: flex-end; position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; padding: 10px; font-size: 1.2rem; opacity: 0; z-index: 5; transition: all 0.5s; background: rgba(0,0,0,0.7); } .detail-port p{margin-bottom: 0;} .port-box:hover .detail-port{bottom: 0;opacity: 1;} .line-port{ width: 80px; height: 5px; border-radius: 5px; background: #FFF; margin: 10px 0 ; } .product-box{ display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; margin-bottom: 2rem; border: 2px solid #d7d7d7; color: #013e7f; font-size: 1.2rem; } .product-box:hover{ color: #FFF; background: #013e7f; border-color: #013e7f; transition: all 0.5s; box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.46); } .product-box p{margin:15px 0 0;} .product-box a{ display: block; width: 100%; } .product-box img{transition: all 0.5s;} .product-box:hover img{ transform: translateY(-10px); } .product-box.product1:hover img{filter: brightness(0) invert(1);} .service-boxfull .subtitle-otherpage{ text-align: left; margin: 1.5rem auto; } .service-ic{ color: #013e7f; text-align: center; margin-bottom: 2rem; } .service-ic p{ font-weight: bold; margin: 15px 0 0; line-height: 1; } .service-ic b{ color: #F00; font-size: .85rem; font-weight: normal; display: block; } .service-ic img{transition: all 0.5s;} .service-ic:hover img{transform: scale(.95);} .faqaccord-box .card{ padding: 0; border: none; border-radius: 0; } .faqaccord-box .card-header{ padding: .75rem; background: #f5f5f5; border: none; border-radius: 0; color: #013e7f; margin-bottom: 1rem; } .faqaccord-box .card-header[aria-expanded="true"]{ color: #FFF; background: #013e7f; } .faqaccord-box .card-header[aria-expanded="false"]{ color: #013e7f; background: #f5f5f5; } .faqaccord-box .card-header:hover{ color: #FFF; background: #013e7f; } .faqaccord-box .card-body{ background: #f5f5f5; padding: 1rem; margin-bottom: 1rem; } .detail-faq ul{ margin-left:40px;} /*.detail-faq h1{ font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; } .detail-faq p{ color: #7C7C7C; padding-left: .75rem; } */ .detail-composit ul{ /*list-style: none;*/ margin-left:40px; } .detail-composit ul li{ padding-bottom: 15px; color: #5c5c5c; } .detail-composit h1{ font-size: 1.4rem; font-weight: bold; margin-bottom: 15px; color: #013e7f; } .detail-composit span{ font-weight: bold; color: #013e7f; } .icon-pro{ width: 100%; overflow: hidden; border-radius: 10px; position: relative; margin-bottom: 2rem; background: #d1d2d4; transition: all 0.5s; text-align: center; } .icon-pro:hover{ box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.46); } .icon-pro img{ max-width: 100%; transition: all .5s; } .detail-ic{ text-align: center; color: #FFF; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #013e7f; position: absolute; bottom: -100%; left: 0; opacity: 0; transition: all 0.5s; padding: 10px; } .detail-ic a{ width: 100%; display: block; } .detail-ic p{ margin-bottom: 0; font-weight: bold; } .detail-ic .line-port{margin: 15px auto;} .icon-pro:hover .detail-ic{ bottom: 0; opacity: 1; } /*.detail-composit.detail-product ul li{display: flex;} .detail-composit.detail-product ul li .fa-angle-double-right{ font-size: 24px; margin: 10px 15px 0 0; color: #013e7f; }*/ .download-btn{ width: 220px; padding: 5px; text-align: center; border-radius: 10px; background: #FFF; color: #013e7f; transition: all 0.5s; border: 2px solid #013e7f; } .download-btn:hover{ background: #013e7f; color: #FFF; } .download-btn a{display: block;width: 100%;} .slide-product ul{justify-content: space-between;} .slide-product ul li{width: 49%;} .slide-product ul li a{ padding: 8px 15px; border-radius: 10px; background: #ebebeb; text-align: center; color: #000; margin: auto; width: 100%; display: block; } .slide-product ul li a.active, .slide-product ul li a:hover{ background: #013e7f; color: #FFF; } .slide-product .tab-content{ background: #f5f5f5; padding: 1rem; } .slide-product .owl-carousel{display: block;} .slide-product .item{ background:#CCC; text-align:center; } #big{ height:270px; overflow:hidden; margin-bottom:20px; } #big .item{ height:270px;} #big .item iframe{width: 100%;height: 100%;} #big .item img{width: 100%;height: 100%;object-fit: cover;} #thumbs .item{ height:85px; overflow:hidden; opacity: .5; } #thumbs .item img{ height:100%; object-fit: cover; } #thumbs .owl-item.active.current .item{opacity: 1;} .slide-product .owl-carousel .owl-nav{ position: absolute; top: 50%; left: 0; width: 100%; transform: translate(0,-50%); } .slide-product .owl-carousel .owl-nav button.owl-prev{ position: absolute; top: 50%; left: 0; transform: translate(0,-50%); color: #013e7f; background: #fff; } .slide-product .owl-carousel .owl-nav button.owl-next{ position: absolute; top: 50%; right: 0; transform: translate(0,-50%); color: #013e7f; background: #fff; } .slide-product .owl-carousel .owl-nav button:focus{box-shadow: none;border: none;outline: none;} .color-product{margin-top: 2rem;} .color-product h1{ font-size: 1.2rem; color: #013e7f ; font-weight: bold; margin-bottom: 10px; } .color-product table{width: 100%;} .color-product table td{ padding: 5px; vertical-align: top; } .color-product table td:first-child{width: 20%;} .color-product ul{list-style: none;} .color-product ul li{ display: inline-block; margin-right: 10px; margin-bottom: 10px; position: relative; cursor: pointer; border: 1px solid transparent; transition: all 0.5s; } .color-product ul li p { position: absolute; bottom: -15%; left: 30%; z-index: 1; text-align: center; margin-bottom: 0; background: #f5f5f5; color: #013e7f; padding: 5px; width: 100px; box-shadow: 0 0 9px rgb(0 0 0 / 34%); border-radius: 10px; opacity: 0; transition: all 0.5s; } .color-product ul li .fa-caret-left{ position: absolute; font-size: 35px; color: #f5f5f5; left: -13%; top: 50%; transform: translate(0,-50%); } .color-product ul li:hover p{ opacity: 1; left: 40%; } .color-product ul li:hover{ border-color: #013e7f; } .color-product ul li img{transition: all 0.5s;} .color-product ul li:hover img{transform: scale(.9);} .color-product ul li:last-child{margin-right: 0;} .quickspace-otherproduct{margin-top: 2rem;} .quickspace-otherproduct h1{ font-size: 1.4rem; margin-bottom: 2rem; font-weight: bold; color: #013e7f; } .quickspace-otherproduct .product-box p{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; height: calc(1rem * 1.2 * 2.3); } .quickspace-otherproduct .product-box{margin: 10px;} .owl-product .owl-nav{ display: block !important; height: 40px; } .owl-carousel.owl-product .owl-item img{ max-width: 100%; width: auto; } .owl-carousel.owl-product .owl-stage { display: flex; align-items: center; } .owl-product .owl-prev.disabled, .owl-product .owl-next.disabled{ pointer-events: none; } .owl-product .owl-nav .owl-prev{ background: url( "../productandservice/images/arrow-prev.png") no-repeat center center !important; left: 15px; position: absolute; width: 36px; height: 36px; top: 40%; transform: translate(0,-50%); } .owl-product .owl-nav .owl-next{ background: url( "../productandservice/images/arrow-next.png") no-repeat center center !important; right: 15px; position: absolute; width: 36px; height: 36px; top: 40%; transform: translate(0,-50%); } .owl-product .prev-slide:hover{background-position: 0px 0px;} .owl-product .next-slide:hover{background-position: 0px 0px;} .sendbox-footer{margin-top: 2rem;} .form-contact{ width: 100%; border: 1px solid #cbcbcb; background: #FFF; padding: 10px 15px; color: #000; } .form-contact::placeholder{color:#4F4F4F;} .form-contact:focus{outline: none;} .send-contactus{ width: 100%; padding: 10px; text-align: center; background:#013e7f; color: #FFF; border: 1px solid #013e7f; cursor: pointer; } .send-contactus:hover{ background: #FFF; color: #013e7f; } .detail-sendbox{margin-bottom: .75rem;} .sendbox-footer h1{ font-size: 1.2rem; color: #013e7f; text-align: center; margin-bottom: 1rem; font-weight: bold; } .codeseve-send .fa-redo-alt{cursor: pointer;color: #013e7f;} .mapbox{ width: 100%; height: 315px; } .mapbox iframe{ width: 100%; height: 100%; } .address-box {margin-bottom: 1.5rem;} .address-box h1{ font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; } .address-box a:hover{color: #f00;} .address-box table td{ padding:0 8px; vertical-align: top; } .detail-careers{ font-size: 1.1rem; text-align: center; margin-bottom: 2rem; } .detail-careers h1{ font-size: 1.2rem; margin-bottom: 0; color: #013e7f; } .detail-careers p{ font-size: .9; color: #787878; margin-bottom: 0; } .detail-careers a:hover{color: #f00;} .img-map h1{ font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; color: #013e7f; } .img-box{ width: 100%; overflow: hidden; box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.46); } .img-box img{ max-width: 100%; transition: all 0.5s; } .fancybox-bg{background: #FFF;} /*Small devices (landscape phones, 576px and up)*/ .img-portfolio .img-box{ height: 180px; width: 100%; } .img-portfolio .img-box img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } #thumbs .item{ height:100px; overflow:hidden; border: 1px solid #eee; } .slide-productview .owl-carousel .owl-nav{ position: absolute; top: 40%; left: 0; width: 100%; transform: translate(0,-50%); } .slide-productview .owl-carousel .owl-nav button.owl-prev{ position: absolute; top: 40%; left: 0; transform: translate(0,-50%); color: #ce9774; background: #fff; } .slide-productview .owl-carousel .owl-nav button.owl-next{ position: absolute; top: 40%; right: 0; transform: translate(0,-50%); color: #ce9774; background: #fff; } .slide-productview .owl-carousel .owl-nav button:focus{box-shadow: none;border: none;outline: none;} .product-box img{ width:100%; } @media (min-width: 568px) { }
©
2018.