/* Add here all your CSS customizations */
body{
    /*font-family: "微軟正黑體","Arial" !important;*/
    letter-spacing:0.05em !important;
    font-size:16px !important;
    color:#333;
}

html .heading-dark, html .lnk-dark, html .text-color-dark{
    /*font-family: "微軟正黑體","Arial" !important;*/
    color: !important;
}
.main {
    overflow: hidden;
}




a,a:active,a:hover{
    color:#f08300;
}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #f08300;
}

::selection {
    color: #fff; 
    background: #f08300;
}


/* font */
.font-ora{
    color:#f08300 !important;
}

.font-whi{
    color:#fff !important;
}

.font-red{
    color:#d2322d !important;
}

.font-grey{
    color:#999999 !important;
}

.font-ora-light{
    color:#ffaf4d !important;
}

.font-blue-light{
    color:#2c64a0 !important;
}

.font-dark-red{
    color:#990000 !important;
}

.font-dark-green{
	/* [disabled]color:#19692A !important; */
}



.post-meta> span{
    color:#999999 !important;  
}


.bold{
    font-weight: 700;
}

.text-left{
    text-align: left !important;
}

.thumb-info-title> span{
    color:white !important;
}

/*Mobile NAV*/
.mlogo{
    position: relative;
    top:20px;
    left: -14%;
    width: 35px;
    height: auto;
}


.memail,
.memail a,
.memail a:active,
.memail a:hover,
.memail a:visited {
    font-size:10px;
    position: relative;
    top:20px;
    color:#f08300 !important;
    text-decoration: none !important;     
}

.close-btn {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 1;
}

.close-btn:hover {
    opacity: 1;
}

.close-btn:before, .close-btn:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 1px;
    background-color: ;
}

.close-btn:before {
    transform: rotate(45deg);
}
.close-btn:after {
    transform: rotate(-45deg);
}


.plus-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 10px;
}

.plus-btn:before {
    content: "";
    position: absolute;
    background-color:  !important;
    transition: transform 0.25s ease-out;
}
.plus-btn:after {
    content: "";
    position: absolute;
    background-color:  !important;
    transition: transform 0.25s ease-out;

}
.plus-btn:before {
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    margin-left: -2px;
}

.plus-btn:after {
    top: 50%;
    left: -19px;
    width: 35px;
    height: 1px;
    margin-top: -2px;
}

.plus-btn:hover {
    cursor: pointer;
}

.open .plus-btn:before {
    display: none;
}

.start-test-btn{
    border-radius: 0 4px 4px 0!important;
}

.start-test2-btn{
	border-radius: 4px !important;
	width: 200px;
	font-size: 18px;
}

.start-test-input{
    border-radius: 4px 0 0 4px !important;  
}


.menu_open{
	position: fixed;
	z-index: 20000;
	background-color: rgba(255,255,255,1);
	width: 100%;
	height: 100%;
}

.menu_open_close{
    font-size:35px ;
    color:;
    float:right;
    position:relative;
    top:20px;
    right:20px;  
}

.menu_in-page{
    font-size: 28px;
    color:;
    position: relative;
    top:90px;
    left:300px; 
}

.mcopyright{
    font-size: 14px;
    text-align: center;
    color:;
}

.menu-nav-style,.menu-nav-style a, .menu-nav-style a:active{
	padding: 15px 0;
	text-decoration: none;
	font-size: 16px;
}

.menu-nav-style a:hover{
    color:#FFF;
}

.menu-nav-style02, .menu-nav-style02 a{
    font-size: 18px !important;
    padding:10px 0 0 0;
    color:rgba(255, 255, 255,0.7);
    text-decoration: none;
}

@media(max-width: 768px){
.menu_in-page{
    font-size:21px;
    text-align:center;
    color:;
    position: relative;
    top:20px;
    left:0px; 
}
    
.mcopyright{
    font-size: 12px;
    margin-top: 4%;
}
.mlogo{
    left: -33%;
}

}



@media(max-width: 414px){
.menu_in-page{
    font-size:21px;
    text-align:center;
    color:;
    position: relative;
    top:20px;
    left:0px; 
}
    
.mcopyright{
    font-size: 12px;
    margin-top: 7%;
}
.mlogo{
    left: -19%;
}

}
    
@media(max-width: 412px){
.menu_in-page{
    font-size:21px;
    text-align:center;
    color:;
    position: relative;
    top:20px;
    left:0px; 
}

.mcopyright{
    font-size: 12px;
}
    
.mlogo{
    left: -18%;
} 
    
}

@media(max-width: 375px){   
.mcopyright{
    font-size: 12px;
    margin-top: 8%;
}
    
.mlogo{
    left: -19%;
}   
    
}

@media(max-width: 360px){
.mcopyright{
    font-size: 12px;
}

.mlogo{
    left: -15%;
}   
    
    
}

@media(max-width: 320px){ 
.menu_in-page{
    font-size:21px;
    text-align:center;
    color:;
    position: relative;
    top:0px;
    left:0px; 
}
    
.mlogo{
    left: -11%;
}   
 
.mcopyright{
    font-size: 12px;
    margin-top: 0%;}   
}

/*scroll*/
html .scroll-to-top{
	background:#f08300;
	color:white;
}

html .scroll-to-topa,html .scroll-to-top a:active,html .scroll-to-top a:hover{
	color:white;
}


/* hr*/ 
.hr-01{
    margin: 10px 0;
}

.hr-02{
    margin: 20px 0;
}

.hr-m01{
    margin:30px 0 0 0;
    background:rgba(255, 163, 51, 0.5);
}

/*types hover*/
ul.nav-list li a:hover{
    background-color:#fff4e6 !important;
    text-decoration:none;
}


/*font icon*/
.list.list-icons.list-icons-style-3 li > .fa:first-child, .list.list-icons.list-icons-style-3 li > .icons:first-child, .list.list-icons.list-icons-style-3 li a:first-child > .fa:first-child, .list.list-icons.list-icons-style-3 li a:first-child > .icons:first-child{
    padding:7px 0  0 3px !important;
}

/*slider*/
.slider-container{
    background:;
}


/*speed bar*/
.speedBar-text{
	text-align: center;
	color: #f08300 !important;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: 24px !important;
}


/*breadcrumb*/
.custom-page-header{
    background: !important;
    border-color:!important;
    padding:130px 0 10px 0 !important;
    border-color: !important;
}

.custom-page-header h1{
    letter-spacing: 0.05em;
}

.custom-page-header h1{
    font-size: 28px !important;
}


@media (min-width: 992px){
.page-header-more-padding .breadcrumb-valign-mid, .page-header-custom-background .breadcrumb-valign-mid, .page-header-float-breadcrumb .breadcrumb-valign-mid{
    width:45%;
}  
   
}

/*knowledge typs*/
ul.nav-list li.active > a{
    color:#f08300;
}



/*btn*/
html .btn-primary{
    color:white;
    background:transparent ;
    border:solid 4px #f08300;
    border-radius: 4px;
    outline: none;
}

html .btn-primary:hover{
    border-color:#f08300;
    background:#f08300;
    outline: none; 
}

.btn-ora{
    color:;
    background:#f08300 ;
    border-radius: 4px;
    outline: none;
}

.btn-ora:hover, .btn-ora:focus, .btn-ora:active{
    color:white;
    background:#f08300 ;
    border-radius: 4px;
    outline: none;
}

.btn-search{
    color:;
    background:#f08300 ;
    border-radius: 0 4px 4px 0 !important;
    outline: none;
}

.btn-search:hover, .btn-search:focus, .btn-search:active{
    color:white;
    background:#f08300 ;
    border-radius: 0 4px 4px 0 !important;
    outline: none;
}



.btn-blu01{
    color:#fff;
    background: ;
    border-radius:4px !important;
    outline: none;
    padding: 5px;
}

.btn-blu01:hover, .btn-blu01:focus, .btn-blu01:active{
    color:white;
    background:#f08300 ;
    border-radius:4px !important;
    outline: none;
    padding: 5px;
}




.thumb-info .thumb-info-action-icon{
    background:#f08300;
}


/*section*/
.custom-section-padding-2{
    padding-top: 30px;
    padding-bottom: 30px;
}

section.section{
    padding: 30px 0;
}


/*date*/
.recent-posts .date .month, article.post .post-date .month{
    background:#f08300;
}

.recent-posts .date .day, article.post .post-date .day{
    color:#f08300;
}



/* events*/
.thumb-info-style-2:hover{
    background-color: #f08300 !important;
}

.pb-xlg02{
    min-height: 120px !important;
}



/*step index*/
.icon-featured{
    position:relative;
    left:0%;
}

a, p, span, button, input, textarea{

}

.thumb-info-wrapper{
    background: #fff4e6;
}

.thumb-info.custom-thumb-info-style-1 .thumb-info-caption .custom-arrow{
    top:20% !important;
}

html .background-color-secondary{
    background-color: #fff4e6 !important;
}

.tp-leftarrow.custom-arrows-style-1:hover, .tp-rightarrow.custom-arrows-style-1:hover{
    background:rgba(23, 52, 84, 0.5);
}

.tp-leftarrow.custom-arrows-style-1, .tp-rightarrow.custom-arrows-style-1{
    background:rgba(23, 52, 84, 0.5);
}

html section.section-secondary{
    background-color: #fff4e6 !important;
    border-color: !important;
}

.thumb-info.custom-thumb-info-style-1:hover .thumb-info-caption{
    background:#f08300 !important;
}

.owl-carousel .owl-nav [class*="owl-"]:active, .owl-carousel .owl-nav [class*="owl-"]:focus, .owl-carousel .owl-nav [class*="owl-"]:active:hover, .owl-carousel .owl-nav [class*="owl-"]:active:focus{
    border-color:#f08300!important;
    background-color:#f08300 !important;
}

.owl-carousel.show-nav-title .owl-nav [class*="owl-"]{
    color: !important;
}

.owl-carousel.custom-both-sides-shadow .owl-stage-outer:before, .owl-carousel.custom-both-sides-shadow .owl-stage-outer:after{
    box-shadow:0px 0px 140px 220px rgba(255, 255, 255, 0);
}

.owl-carousel.custom-dots-style-1 .owl-dot span{
    border:2px solid ;
}

.owl-carousel.custom-dots-style-1 .owl-dot.active span, .owl-carousel.custom-dots-style-1 .owl-dot:hover span{
    border:2px solid #f08300;
}

.owl-prev, .owl-next{
    display:none !important;
}


/*steps service*/
.step-font{
    font-family: "微軟正黑體";
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0.05em;
}

.icon-featured-01{
    position:relative;
    left:0% !important;
}

html .featured-box-primary .box-content{
    border-radius: 4px;
}

.box-content-nad{
    border-top-color:  !important;
}

.icon-featured-nad{
    background:  !important; 
}

/*Sales SEO*/
html .featured-box-secondary .icon-featured{
    color: #000000;
}

html .featured-box-secondary .box-content{
    border-top-color:#7a123e !important;
}

html .heading-secondary, html .lnk-secondary, html .text-color-secondary{
    color:#990000 !important;
}

.icon-featured-seo{
    background:#990000 !important;
}

.box-content-seo{
    border-top-color:#990000 !important;
}

.box-content-app{
    border-top-color:#19692A !important;
}


/*Sales adword*/
html .featured-box-tertiary .icon-featured{
    color: #000000; 
}

html .featured-box-tertiary .box-content{
    border-top-color:#7a123e !important;
}

html .heading-tertiary, html .lnk-tertiary, html .text-color-tertiary{
    color:#2c64a0 !important;
}

.icon-featured-adword{
    background:#2c64a0 !important;
}

.box-content-adword{
    border-top-color:#2c64a0 !important;
}

/*Sales*/
/*svg icon*/
.svg-icon {
  width: 80px;
  height: 80px;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #333;
}

.svg-icon circle {
  stroke: #333;
  stroke-width: 1;
}

.adv-font{
    font-size: 30px!important;
    margin-bottom: 25px !important;
}

.featured-box h4{
    letter-spacing:0.05em;
    font-weight:700;
}

.no-underline:hover, .no-underline a{
    text-decoration-line: none;
}

.icon-featured-red{
    background-color:#d2322d !important;
}

.box-content-red{
    border-top-color:#d2322d !important;
}

/*Sales NAD*/
/*NAD*/
.box-content-nad{
    border-top-color: !important;
}

.hr-nad{
    margin: 50px 0;
}

.nad-p{
    margin:10px 0 !important;
    font-weight: 700;
    font-size: 20px !important;
}

.pricing-table.princig-table-flat .plan h3{
    background:!important;
    color:white !important;
    letter-spacing: 0.05em;
}

.pricing-table.princig-table-flat .plan h4{
    background:#f08300 !important;
    padding-left:0;
    padding-right: 0;
    margin:-20px 0 0;
    padding-top:30px;
    padding-bottom:30px;
    text-shadow:0 1px #555;
    letter-spacing: 0.05em;
    font-size: 28px;
}


/*NAD BOX*/
html .featured-box-quaternary .box-content{
    border-top-color: !important;
}

html .heading-quaternary, html .lnk-quaternary, html .text-color-quaternary{
    color: !important;
}

html .featured-box-quaternary .icon-featured{
    color: #000000;
}



/*our team*/
.thumb-info .thumb-info-title{
    background:;
}

.thumb-info:hover .thumb-info-title{
    background:;
}


.thumb-info .thumb-info-inner{
    letter-spacing: 0.05em;
}

.thumb-info .thumb-info-type{
    letter-spacing: 0.05em;  
}

/*speed test*/
.custom-position-1{
    min-height: 100px;
}

.speed-testbar{
}

.custom-position-1{
    margin-top:-90px;
}


/*section*/
section.section{
	background: transparent;
	/* [disabled]border-top:5px solid transparent; */
	margin: 0px;
}

/*FAQ*/
html .toggle-primary .toggle label{
    border-radius: 4px;
}

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){
    border-radius: 4px;
}

/* title */
.lead{
    line-height:24px !important;
}

@media (min-width: 768px){
.lead{
    font-size:18px !important;    
}   

}

/*footer*/
#footer{
   background:;
   border-top:1px solid ;
   padding:50px 0 0 0 !important;
}

#footer .footer-copyright{
    background:transparent;
    border-top:transparent;
    margin-top:0px;
}

#footer a:hover{
    color:#fff !important;
}

#footer h4{
    letter-spacing: 0.05em;
}

#header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown .dropdown-menu{
    top:65% !important;
    left:15% !important;
    background:#f08300;      
}



@media (min-width: 992px){ 
#header .header-nav-main.header-nav-main-square nav > ul > li:hover > a{
    color:#ffdeb5 !important;
}


#header .header-nav-main.header-nav-main-square nav > ul > li.active > a {
    color:#f08300 !important;
}

#header .header-nav.header-nav-dark-dropdown nav > ul li.active > a, #header .header-nav.header-nav-dark-dropdown nav > ul li:hover > a {
    color: #f08300;
}
    
#header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown .dropdown-menu > li > a:hover, #header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown .dropdown-menu > li > a:focus{
    background:;
    border-radius: 4px;
}  

#header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown .dropdown-menu > li > a{
    color:#fff;
}
    
#header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown li a{
    border-bottom-color:;     
}  
 
#header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown .dropdown-menu{
    top:65% !important;
    left:15% !important;
    background:#f08300;      
}
    
html #header.header-semi-transparent .header-body:before, html #header.header-semi-transparent-light .header-body:before{
    background:;
    /*nav banner color*/
}

#header .header-nav.header-nav-dark-dropdown nav > ul > li.dropdown li a{
    border-bottom-color:transparent;   
} 
    
}

/*google map*/
.google-map{
    margin:0;
}

/* Steps */
.step1{
    top:120px;
    left:-120px;   
}

.step2{
    top:30px;
    left:-120px; 
}

.step3{
    top:60px;
    left:-100px; 
}

.step4{
    top:120px;
    left:-100px;
}

.step5{
    top:80px;
    left:-90px;
}

.step6{
    bottom:450px;
    left:1000px;
}

.tooltip{
    z-index:9999;
}

.tooltip-inner {
    max-width: 350px;
    width: auto;
    font-size:16px;
    padding:10px;
}


@media(max-width: 1250px){
 .step1{
    top:120px;
    left:-80px;   
}

.step2{
    top:30px;
    left:-105px; 
}

.step3{
    top:60px;
    left:-110px; 
}

.step4{
    top:120px;
    left:-115px;
}

.step5{
    top:80px;
    left:-110px;
}

.step6{
    bottom:450px;
    left:950px;
}

}


@media(max-width: 1024px){ 
.step1{
    top:0px;
    left:0px;
}

.step2{
    top:0px;
    left:0px; 
}

.step3{
    top:0px;
    left:0px; 
}

.step4{
    top:0px;
    left:0px; 
}

.step5{
    top:0px;
    left:0px; 
}

.step6{
    bottom:0px;
    left:230px;
}   
}


@media(max-width: 991px){ 
.step1{
    top:0px;
    left:0px;
}

.step2{
    top:0px;
    left:0px; 
}

.step3{
    top:0px;
    left:0px; 
}

.step4{
    top:0px;
    left:0px; 
}

.step5{
    top:0px;
    left:0px; 
}

.step6{
    bottom:0px;
    left:0px;
}   
}


/* checkbox button */
.text {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    height: 70px;
}

.area {
    width: 113%;
    float: left;
    margin-top: 15px;
}






.area .input,
.area .input label {
    width: 100%;
    float: left;
    position: relative;
}

.area .input {
    padding: 0px 10px;
    overflow: hidden;
    border-radius: 4px;
    color: #333;
    background-color: #f4f4f4;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: 300ms;
    -webkit-transition: 300ms;
    -ms-transition: 300ms;
}

.area .input input {
    display: none;
}

.area .input label {   
    font-weight: 400;
    text-align: center;
    text-transform:uppercase;
    cursor: pointer;
    font-size: 14px;
    z-index: 3;
    transition: 300ms;
    -webkit-transition: 300ms;
    -ms-transition: 300ms;
    height: 45px;
    line-height: 45px;
}

.area .input:hover{
    box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}

.area .input label:hover {
    letter-spacing: .8px;   
}

.click-efect {
    position: absolute;
    top: 0;
    left: 0;
    background: #f08300;
    border-radius: 50%;
}

.choose-btn {
    float: left;
    padding: 0 5px;
    margin: 0;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

/*NAV mobile*/
html #header.header-semi-transparent .header-body:before, html #header.header-semi-transparent-light .header-body:before{
    background:#f08523 !important;
}


@media(max-width: 768px){ 
.custom-page-header{
    padding:100px 0 10px 0 !important;
} 
    
.header-body{
    max-height:66px;  
}
    
.rwd-logo{
    margin: 0 auto !important;
    padding-bottom: 20px !important;
}

#header.custom-header-transparent-bottom-border .header-body .header-container > .header-row:after{
    border-bottom:transparent !important;
}

.lead{
    margin-left:20px;
}

.recent-posts{
    padding:0 0 0 35px !important;
}

article.post-large{
   margin-left:0px !important; 
}
    
article.post-large .post-image, article.post-large .post-date{
    margin-left: 0px !important;
}
    
}


@media(max-width: 414px){
.choose-btn {
    margin: 10px 0;
} 
    
#footer .footer-copyright p{
    font-size: 12px;   
}

.recent-posts{
    padding:0 0 0 10px !important;
}
    
article.post-large{
   margin-left:0px !important; 
}
    
article.post-large .post-image, article.post-large .post-date{
    margin-left: 0px !important;
}

.icon-featured-02{
    left:32% !important;
} 

.lead{
    margin-left:0px;
}
    
    
}

@media(max-width: 360px){
.icon-featured-02{
    left:30% !important;
}
    
.recent-posts{
    padding:0 0 0 5px !important;
}
    
}

@media(max-width: 320px){
.icon-featured-02{
    left:28% !important;
}  
}
 
.header_tab{
    text-align: center;
}


/* banner */
.banner-wrapper {
	position: relative;
    max-width: 100%;
}

.banner {
    width: 100%;
    padding-bottom: 35%;
    height: 0;
    position: relative;
    overflow: hidden;
}

.banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.banner-wrapper .content {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.banner-wrapper .content p {
	color: #fff;
	font-size: 20px;
}

	.banner-wrapper .content .button-wrapper {
		text-align: center;
	}

		.banner-wrapper .content .button {
			color: #fff;
			background: url("../images/slides/banner-button.png") center no-repeat;
			background-size: contain;
			padding: 15px 35px 18px;
			font-size: 20px;
            cursor: pointer;
		}

		.page-banner--mobile {
			display: none;
		}

		@media(max-width: 1024px) {
			.banner {
				padding-bottom: 100%;
			}

                .page-banner--pc {
                    display: none;
                }

                .page-banner--mobile {
                    display: block;
                }

                .banner-wrapper .content {
                    width: 80%;
                    text-align: center;
                }
				
		}

        @media(max-width: 576px) {
            .banner {
				padding-bottom: 107%;
			}

                .banner-wrapper .content p {
                    font-size: 16px;
                }

        }