0byt3m1n1-V2

Path: /home/xncercjb/domains/quickspace.co.th/public_html/css/ [ Home ]
File: style-sm.cs1
@media (min-width: 768px) { 
    html{font-size:20px;}
    .navbar-brand img{width: 250px;}
    .opentime-main{
        display: block;
        padding: 10px 0;
    }
    .opentime-main ul li {
        font-size: 1rem;
        margin:  0 15px;
    }
	.navbar-collapse{
        width: 400px;
        left: -400px;
    }    
    .detail-service{  
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: normal;
        height: calc(1rem * 1.2 * 7.5);
    }
    .address-footer {
        margin-bottom: 0;
        padding-right: 18%;
    }    
    .footer {padding: 5% 0 3%;}
    .copyright-box {padding: 2% 0 5%;}
    
    .content-pageother, .contentgray-pageother{padding: 5% 0;}    
    .sendbox-footer{margin-top: 0;}
    
    
    .timeline-aboutus{position: relative;}
    .timeline-aboutus::after{
        content: '';
        width: 3px;
        height: 100%;
        border-left: 3px dashed #013e7f;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0%);
    }
    
    .aboutus-box{
        margin-bottom: 4rem;
        position: relative;
    }    
	.aboutus-leftbox::after {
		content: '';
		width: 100px;
		height: 3px;
		position: absolute;
		right: 0%;
		top: 0;
		border-bottom: 3px dashed #013e7f;
		z-index: 5;
	}
    .aboutus-rightbox::after{
        content: '';
		width: 100px;
		height: 3px;
        position: absolute;
        left: 0%;
        top:0;
		border-bottom: 3px dashed #013e7f;
        z-index: 5;        
    }
    
    .aboutus-rightbox{
		margin-top: -15rem;
		text-align: left;
	}
    .aboutus-leftbox{
		margin-top: -4rem;
		text-align: right;
	}
    .detail-port{padding: 1rem;}
    
    .product-box{
        height: 100%;
        margin: 0 auto;
    }
    .category-products {margin-top: 2rem;}
    .category-products .col-md-4, .category-products .col-6{margin-bottom: 2rem;}
    .faqaccord-box{margin-top: 2rem;}
    .faqaccord-box .nav-pills {display: block;}
    .faqaccord-box .nav-pills li a{
        display: block;
        width: 100%;
        padding: .75rem 1rem;
        background: #f5f5f5;
        color: #013e7f;
        margin-bottom: 1rem;        
    }
    .faqaccord-box .nav-pills li a:hover, .faqaccord-box .nav-pills li a.active{
        color: #FFF;
        background: #013e7f;
    }
    
    .faq-box .faqaccord-box .card-body{min-height: 826px;}
    .slide-product ul{justify-content: flex-start;}
    .slide-product ul li {width: auto;margin-right: 15px;}
    .slide-product ul li a{
        width: 180px;
        border-radius: 10px 10px 0 0;
    }
    .owl-product .owl-nav .owl-next{right: -1.8rem;}
    .owl-product .owl-nav .owl-prev{left: -1.8rem;}
}
@media (min-width: 812px){
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 992px){
    .navbar-expand-lg .navbar-collapse{width: 100%;}
    .navbar-expand-lg .navbar-nav{width: 85%;        }
    .menu-main{ background: #013e7f;}
    .navbar-collapse ul{list-style: none;}
    .navbar-collapse ul li {
        width: auto;
        margin: auto;
        text-align: center;
        position: relative;
    }
    .navbar-collapse ul li a{
        padding:8px 0;
        position: relative;
        transition: all 0.5s;
        color: #FFF;
    }  
    .address-footer {padding-right: 0;}
    .contact-footer{margin: 0;}
    .copyright-box {padding: 1% 0 2%;}
    .language-choose{
        display:block;
        width: 15%;
        border-left: 1px solid #d9d9d9;
        padding-left: 10px;
    }
    .language-choose a{
        display: inline-block;
        margin: 0 5px;
    }
    .language-choose img:hover {transform: scale(.95);}
    .contact-header ul{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .contact-header ul li{
        padding: 0;
        margin: 0 10px;
    }
    .contact-header ul li p{line-height: 1;}
    .content-service{padding: 7% 0;}
    .service-box{margin-bottom: 0;}
    
    .slim .opentime-main{display: none;}
    .slim .headbar-main{padding: .5rem 0;}
    
    
    .mapbox{height: 351px;}
    .address-box{padding-right: 5%;}
    .aboutus-box{padding: 0%;}
    .aboutus-leftbox::after {
		right: -24%;
		top: 10%;
		width: 70px;
	}
    .aboutus-rightbox::after {
		left: -23%;
		top: 20%;
		width: 70px;
	}
	.aboutus-rightbox {
		margin-top: -9rem;
		margin-bottom: 0;
	}
    .faqaccord-box .card-body{min-height: 754px;}
    
    
    
    .dropdown-submenu:hover>.dropdown-menu{display: block;}
    .navbar-collapse ul li{font-size: 23px;}
    .navbar-collapse ul li .dropdown-menu{        
        border: none;
        top: 95%;
        padding: 0;
        min-width: 14rem;
        background: #5babd8;
    }
    .navbar-collapse ul li .dropdown-menu a{
        border: none;
        border-bottom: 1px solid #FFF;
        text-align: left;
        padding: .75rem;
    }
    .navbar-collapse ul li .dropdown-submenu a:last-child{border-bottom: none;}
    .navbar-collapse ul li .dropdown-menu a::before{background: #2e2fa0;}
    .navbar-collapse ul li .dropdown-submenu .dropdown-menu a::before{background: #3a3bc1;}
    .navbar-collapse ul li.dropdown .dropdown-menu a{color: #FFF;}
    .navbar-collapse ul li.dropdown .dropdown-menu a:hover{color: #fbe51e;} 
    .dropdown:hover > .dropdown-menu{display: block;}
    .navbar-collapse ul li .dropdown-submenu .dropdown-menu{
        position: absolute;
        top: 0px;
        left: 100%;
        margin: 0 !important;
        background: #519ec9;
        border-left: 1px solid #FFF;
    }        
    .navbar-collapse ul li .dropdown-submenu ul li{position: relative;}
    .dropdown-submenu ul li a{font-size: 23px;}
    
    .service-boxfull{margin-top: 2rem;}
    
    
    #big{height:380px;}
    #big .item{	height:380px;}
    #thumbs .item{height:135px;}
    .vdo-presents{height: 480px;}
    .language-choose img{width: 1.2em;}
    
    
}
/*//./////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1200px) {
    html{font-size: 18px;}
    .navbar-brand img{width: 300px;}
    .navbar-collapse ul li a{padding: 7px 0;}
    .headbar-main {padding: 7px 0;}
    .address-footer {padding-right: 5%;}
    .detail-service {height: calc(1rem * 1.2 * 9);}
    .service-box{padding: 2rem 1.5rem;}
    .opentime-main {padding: 4px 0;}
    .language-choose a {margin: 0 3px;}
    .contact-header ul li img{width: 40px;} 
    .language-choose img{width: 25px;}
    .social-header img{width: 25px;}
    #slide-zone .banner-slide {
        height: 469px;
    }
    #slide-zone .banner-slide img{
        height: 100%;
        object-fit: cover;
    }
    .aboutus-leftbox::after {
		right: -23%;
		width: 80px;
        top: 25%;
	}
    .aboutus-rightbox::after{
		left: -23%;
		width: 80px;
	}
    .aboutus-rightbox {margin-top: -22rem;}
    .aboutus-leftbox {margin-top: 0rem;}
    .faqaccord-box .card-body{min-height: 684px;}
    .owl-product .owl-nav .owl-next{right: -2.2rem;}
    .owl-product .owl-nav .owl-prev{left: -2.2rem;}
    .aboutus-leftbox.timeline57-box {margin-top: -4rem;}
    .language-choose img{width: auto;}
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1440px) {
    .container{ max-width: 1366px; }
    .contact-header ul li {
        width: auto;
        margin: auto;
    }
    .navbar-collapse ul li a{padding: 10px 0;}
    #slide-zone .banner-slide {
        height: 587px;
    }
    
    
    /*.aboutus-leftbox::after{right: -27.5%;}
    .aboutus-rightbox::after{left: -27.5%;}*/
    .aboutus-rightbox {margin-top: -14rem;}
	.mapbox {height: 400px;}
    .aboutus-rightbox.timeline62-box {margin-top: -10rem;}
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1600px){
    html{font-size: 20px;}
    .container{ max-width: 1440px; }
    .address-footer {
        padding-right: 10%;
    }
    .language-choose{width: 10%;}
    .navbar-expand-lg .navbar-nav{width: 90%;}
    
    
    
    .faq-box .faqaccord-box .card-body{min-height:754px;}
    .aboutus-leftbox::after {
		right: -21%;
		width: 100px;
	}
    .aboutus-rightbox::after {
		left: -21%;
		width: 100px;
	}
}
/*///////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1800px) {
    .container{ max-width: 1600px; } 
    .navbar-brand img{width: 368px;}
    .navbar-collapse ul li a{
        font-size: 23px;
    }
    .language-choose img{width: auto;}
    .contact-header ul li img {width: auto;}
    .headbar-main {padding: 15px 0;}
    .social-header img{width: auto;}
    .opentime-main{padding: 10px 0;}
    .address-footer {
        padding-right: 20%;
    }
    #slide-zone .banner-slide {
        height: 717px;
    }
}