/*------------------------------ index slide -------------------------------------------------------------*/
.slider-height{
    background-image: url('../image/main_banner_back.svg');
    height: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero__caption{
    margin-bottom: 18%;
}



@media (max-width: 1663px){
    .slider-area .hero__caption h1{
            font-size: 70px;
    }
    .slider-height{
        background-image: url('../image/main_banner_1663.svg');
        min-height: 900px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

}




@media (max-width: 1280px){
    .slider-height{
        background-image: url('../image/main_banner_1280.svg');
        min-height: auto;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}


@media (max-width: 1024px){
    .slider-height{
        background-image: url('../image/main_banner_1024.svg');
        min-height: 768px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .single-slider .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 10%;
        margin-right: auto;
        margin-left: auto;
    }

}

@media (max-width: 768px){
    .single-slider .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 61%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 480px){
    .slider-height{
        background-image: url('../image/main_banner_480.svg');
        min-height: 500px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .slider-area .hero__caption h1 {
        font-size: 35px;
    }

    .slider-area .hero__caption {
        padding-top: 33%;
    }


    .single-slider .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 100%;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .btn{
        font-size: 16px;
    }

    .hero-btn {
        padding: 22px 34px;
    }
}

@media (max-width: 375px){
    .slider-height{
        background-image: url('../image/main_banner_375.svg');
        min-height: 670px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .slider-area .hero__caption h1{
        margin-bottom: 20px;
    }

    .slider-area .hero__caption {
        padding-top: 35%;
    }
   
    .single-slider .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 100%;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    .hero-btn {
        padding: 25px 30px;
    }

    .footer-tittle{
        padding-right: 5%;
    }

    .btn{
        font-size: 16px;
    }

    
}

/*------------------------------ about RWD -------------------------------------------------------------*/
.about-caption{
    margin: 0 auto;
    float: none;
}
.about-low-area p{
    margin: 0 auto;
    float: none;
}

.about-img{
    width: 100%;
    margin: 0 auto;
    float: none;
}
@media (max-width: 992px){
    .about-caption {
        text-align: center;
        margin: 5%;
        margin-top: 0;
    }

    /*.about-low-area .about-caption p {
        padding-right: 0px;
        font-size: 20px;
        line-height: 2;
    }
*/
    .about-img{
        width: 80%;
        margin: 0 auto;
        float: none;
    }
}

@media (max-width: 575px){
    h3{
        font-size: 17px;
        line-height: 1.5;
    }
    
    .section-tittle {
        margin-bottom: 50px;
        margin: 5%;
    }

    .about-low-area .about-caption .section-tittle h4{
        line-height: 1.7;
        font-size: 1rem;
    }
    
    
    .slider-area .hero__caption p {
        padding-right: 0px;
        font-size: 18px;
    }
    
    .about-caption {
        text-align: center;
        margin: 0%;
        margin-top: 0;
    }
    
    .about-low-area .about-caption h4 {
        margin-right: 1.33em;
        margin-left: 1.33em;
        font-size: 1rem;
        line-height: 1.7;
    }



    .about-low-area .about-img img {
        width: 100%;
        margin-bottom: 8%;
    }
    
    }



/*------------------------------------- feature -----------------------------------------*/
.our-services .single-services .services-ion .featureicon img{
    width: 50%;
    margin-top: 5%;
}

 .btn :hover{
    background-color: #021261;
}



/*------------------------------ clinet 翻轉 -------------------------------------------------------------*/

#client{
    transform-style: preserve-3d;
    /*background-color:#FFDF00;*/
}

.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    /*.flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }*/

.flip-container, .front, .back {
    width: 100%;
    height: 100%;
}

/* flip speed goes here */
/*.flipper {
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}*/

/* hide back of pane during swap */
/*.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}*/

.flip-container:hover .front{
    z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}

.flip-container:hover .back{
    z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}


/* front pane, placed above back */
.front {
    height: inherit;
	position: absolute;
	top: 0;
	z-index: 900;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		 -o-transition: all .5s ease-in-out;
			transition: all .5s ease-in-out;
}

/* back, initially hidden pane 
    height: inherit;
	position: absolute;
	top: 0;
	z-index: 1000;
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;*/
.back {
    height: inherit;
	position: absolute;
    -webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		 -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
    
}





/*------------------------------ clinet -------------------------------------------------------------*/

.blogs-area .single-blogs .blog-img{
    padding-bottom: 0%;
}


.col-md-1-7 {

    width: 30%;
    
    float: left;
    margin-bottom: 3%;
    }
    
    .col-xs-1-7,.col-sm-1-7,.col-md-1-7,.col-lg-1-7 {
    
    min-height: 1px;
    
    padding-left: 15px;
    
    padding-right: 15px;
    
    position: relative;
    
    }

    

    @media (min-width: 768px) {

        .col-sm-1-7 {
        
        width: 20%;
        
        float: left;
        
        }
        
        }
        
        @media (min-width: 992px) {
        
        .col-md-1-7 {
        
        width: 20%;
        
        float: left;
        
        }
        
        }
        
        @media (min-width: 1200px) {
        
        .col-lg-1-7 {
        
        width: 20%;
        
        float: left;
        
        }
        
        }

        @media (max-width: 575px){
            .our-services .section-tittle h4{
                line-height: 1.7;
                font-size: 1rem;
            }
        }
        


@media (max-width: 480px){
    .blogs-area .single-blogs .blog-img {
        width: 100%;

}

.about-area2 .about-img img {
    width: 100%;
    margin-left: -3%;
}

.col-lg-1-7 {       
    width: 50%;    
    float: left; 

    }

    .download .single-services img{
        width: 85%;
    }
}



/*------------------------------ download banner -------------------------------------------------------------*/
#download{
    /*background-image: url('../k/image/downloadbanner_back.svg');*/
    background-color: #FFDF00;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center left;
    padding-top: 0%;
    padding-bottom: 0%;
}


.download{
    padding-top: 0%;
    padding-bottom: 0%;
}

.download .our-services .single-services{
    border: 0px solid #FFF8CC;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0);
    padding-bottom: 5px;
}

.download .our-services .single-services:hover{
    box-shadow: 1px 10px 30px 0px rgba(133, 66, 189, 0)
}

.download .services-ion{
    padding: 0;
}

.download .mb-70 {
    margin-bottom: -28px;
    margin-top: 6%;
}

@media (min-width: 1024px) and (max-width: 1199px){
    .about-low-area .section-tittle{
        margin-left: 14%;
    }
}


@media (max-width: 1024px){
    #download{
        background-color: #f4d723;
        background-image: url();
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center left;
    }


    .download h3{
        text-align: center;
        margin-left: 0;
    }

    .download h2{
        text-align: center;
        margin-left: 0;
    }

    .download .hero__btn{
        margin-left: 20%;
        width: 68%;
    }

    .pb-170{
        padding-bottom: 64px;
    }

    .pt-180 {
        padding-top: 63px;
    }

}


@media (max-width: 992px){
    .download h3{
        font-size: 30px;
        line-height: 1.5;
        margin-left: 0%;
    }

    .download h2{
        font-size: 44px;
        margin-left: 0%;
    }


    .download .hero__btn img{
        width: 44%;
    }

    .download .hero__btn{
        margin-left: 20%;
    }

}

@media (max-width: 768px){
    #download{
        background-color: #f4d723;
        background-image: url();
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center left;
    }


    .download h3{
        text-align: center;
        margin-left: 0;
    }

    .download h2{
        text-align: center;
        margin-left: 0;
    }

    .download .hero__btn{
        margin-left: 20%;
        width: 68%;
    }
    
}

@media (max-width: 480px){
    
    .download .hero__btn{
        margin-left: 0%;
        width: 100%;
    }

    .download h2 {
        font-size: 31px;
        text-align: center;
    }

    .download .hero__btn img{
        margin-left: 5%;
    }

    .download h3{
        text-align: center;
    }

    
}

/*------------------------------ footer banner -------------------------------------------------------------*/
.footer-area{
    margin: 0 auto;
    float: none; 
}

.footer-area .instagram-gellay{
    margin: 0 auto;
    float: none;     
}

.single-footer-caption .instagram-gellay p{
    color: #fff; 
    font-size: 15px; 
    text-align: center; 
    margin-bottom: 0px;
}


.Privacy{    
    text-align: right;
}

.Privacy p{
    color:#fff;
}

@media (max-width: 480px){
.footer-area .footer-bottom {
    padding-bottom: 5%;
    padding-top: 20px;
    padding: 5%;
    width: 83%;
}

.Privacy{    
    text-align: center;
}

.terms{
    text-align: center;
}


}

@media (max-width: 375px){
    .footer-area .footer-bottom {
        padding-bottom: 5%;
        padding-top: 20px;
        padding: 5%;
        width: 90%;
    }
    }


/*------------------------------ privacy&term -------------------------------------------------------------*/
.container-privacy-term .title{
    text-align: center;   
}

.container-privacy-term h2{
    color: #111;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 10px;
    text-rendering: optimizelegibility;
    font-size: 30px;
}

.container-privacy-term h3{
    color: #111;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 10px;
    text-rendering: optimizelegibility;
    font-size: 20px;
}

.container-privacy-term h4{
    color: #696f6f;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 10px;
    margin-bottom: 1.2%;
    text-rendering: optimizelegibility;
    font-size: 16px;
}

.container-privacy-term li{
    color: #696f6f;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 1.2%;
    font-size: 16px;
}


.container-privacy-term p{
    color: #696f6f;
    line-height: 2;
    font-size: 15px;
}

.container-privacy-term ol{
    margin-top: 1%;
}

.container-privacy-term ol li{
    font-size: 15px;
}

.term, .privacy{
    padding: 8% 15% 5% 15%;
}

.item{
    margin-bottom: 3%;
}


@media (max-width: 480px){
    .term, .privacy{
        padding: 25% 15% 8% 15%;
    }

    .container-privacy-term .title p{
        text-align: left;   
    }

    .item{
        margin-bottom: 5%;
    }

}

/*------------------------------ hr -------------------------------------------------------------*/
hr {
    background-color: #fff;
    padding: 0;
    margin: 80px;
  }

hr.hr-1 {
  border: 0;
  border-bottom: 2px dashed #eee;
  background: #999;
  margin-top: 0;
  margin-bottom: 0;
  }

/*-------------------------------- space ------------------------------------------------*/
.space .single-services img{
    width: 85%;
}

.space .section-tittle h3{
    line-height: 1.7;
    font-size: 1.5rem;
}



@media (min-width: 1024px) and (max-width: 1199px){
    .space .section-tittle{
        padding:0 5% 0 5%;
    }
}


@media (max-width: 575px){

.space .section-tittle h3{
    line-height: 1.7;
    font-size: 1rem;
}
}