/* ----------------------------------------------------------------
   動態效果
-----------------------------------------------------------------*/
.heartbeat {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
          animation: heartbeat 1.5s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-6 11:46:18
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



/* ----------------------------------------------------------------
   共用區
-----------------------------------------------------------------*/
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: baseline;
}
body {
	font-family: "微軟正黑體", Arial, Helvetica, sans-serif ;
}
/* 文字選取變色 IE9+、Safari、Chrome*/
body *::selection {
	background-color: #987851;
	color: #FFF!important;
}
/*文字選取變色 Firefox */
body *::-moz-selection {
 background-color: #987851;
 color:#FFF!important;
}

.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
	display: inline-block !important;
	max-width: 100%;
	height: auto;
}

.position_r{position: relative;}

.float-left {
	float: left;
}
.float-right {
	float: right;
}
.float-center {
	margin: 0 auto!important;
	position: relative;
}

.clear {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	width: 100%;
	overflow: hidden;
}

a {
	font-size: 1em;
	margin: 0;
	text-decoration: none;
	color: #987851;
}
a:hover, a:focus, a:active {
	text-decoration: none;
	
}
a:visited {
	text-decoration: none!important;
}
p {
	font-size: 1em;
	color: #999999;

	text-align: justify;
}
p a {
	color: #987851;
	text-decoration: underline;
}


.bg_gray_dark { background-color: #2e2a26;
 }



.bg_gray_light {}


.bg_gray_lighter {}

.bg_white {
	background-color: #FFF!important;
}

.text_white {
	color: #fff;
}

.text_yellow {
	color: #f6d5a4;
}

.text_gold {
	color: #917758;
}


.text_blue {
	color: #314c6a;
}

.text_blue_2 {
    color: #fff ;
    background-color: #314c6a;
    padding: 0 0.5em 0.1em 0.5em;
}


.text_gray_dark {
	color: #444444;
}

.text_gray_light {
	color: #ededed;
}


.text_gray {
	color: #999999;
}


.border_{ border: 1px solid #; }



.mg_1{
	margin: 1em;
}


.mgr_05 {
	margin-right: 0.5em;
}

.mgr_1 {
	margin-right: 1em;
}

.mgr_2 {
	margin-right: 2em;
}

.mgr_3 {
	margin-right: 3em;
}


.mgr_4 {
	margin-right: 4em;
}

.mgb_0 {
	margin-bottom: 0!important;
}

.mgb_05 {
	margin-bottom: 0.5em;
}


.mgb_1 {
	margin-bottom: 1em;
}
.mgb_2 {
	margin-bottom: 2em;
}

.mgb_3 {
	margin-bottom: 3em;
}

.mgb_4 {
	margin-bottom: 3em;
}

.mgb_6 {
	margin-bottom: 6em;
}

.mgb_8 {
	margin-bottom: 8em;
}


.mgt_1 {
	margin-top: 1em;
}
.mgt_2 {
	margin-top: 2em;
}
.mgt_3 {
	margin-top: 3em;
}

.mgt_4 {
	margin-top: 4em;
}


.mgt_5 {
	margin-top: 5em;
}


.mgt_6 {
	margin-top: 6em;
}


.mgr_0 {
	margin-right: 0;
}

.mgr-1 {
	margin-right: -1em;
}

.mgl_05 {
	margin-left: 0.5em;
}

.mgl_1 {
	margin: 1em;
}

.mg_0 {
	margin: 0em;
}


.pd_0 {
	padding: 0;
}

.pdlr_02 {
	padding:0 0.2em;
}

.pdl_05 {
	padding-left:0.5em;
}

.pdr_05 {
	padding-right:0.5em;
}

.pdb_05 {
	padding-bottom:0.5em;
}


.pd_1 {
	padding: 1em;
}

.pd_3 {
	padding: 3em;
}

.pd_4 {
	padding: 4em;
}


.pd_15 {
	padding: 1.5em;
}
.pd_05 {
	padding: 0.5em;
}

.pdl_0 {
	padding-left: 0;
}

.pdr_0 {
	padding-right: 0;
}


.pdt_0 {
	padding-top: 0;
}

.pdb_0 {
	padding-bottom: 0;
}


.pdr_025 {
	padding-right: 0.25em;
}


.pd_2 {
	padding: 2em;
}
.pd_3 {
	padding: 3em;
}
.pdl_1 {
	padding-left: 1em;
}
.pdl_2 {
	padding-left: 2em;
}
.pdl_075 {
	padding-left: 0.75em;
}
.pdr_075 {
	padding-right: 0.75em;
}
.pdr_1 {
	padding-right: 1em;
}

.pdr_2 {
	padding-right: 2em;
}

.pdlr_1 {
	padding: 0 1em;
}

.pdlr_2{
	padding:0 2em;

}

.pdlr_3{
	padding:0 3em;

}

.pdt_5{
	padding-top:5em;
}

.pdtb_1{
	padding:1em 0;
}

.pdt_3{
	padding-top:3em;
}


.pdt_1{
	padding-top:1em;
}

.pdb_05{
	padding-top:0.5em;
}

.pdtb_05 {
	padding: 0.5em 0;
}

.lh_1 {
	line-height: 1;
}

.lh_12 {
	line-height: 1.2;
}

.lh_16 {
	line-height: 1.6;
}

.lh_18 {
	line-height: 1.8;
}

.lh_2 {
	line-height: 2;
}

.lh_3 {
	line-height: 3;
}

.lh_0 {
	line-height: 0;
}

.ls_0 {
	letter-spacing: 0!important;
}

.ls_1 {
	letter-spacing: 1px;
}
.ls_2 {
	letter-spacing: 2px;
}

.ls_4 {
	letter-spacing: 4px;
}



#top_btn {
    display: none;
    position: fixed;
    bottom: 40px;
    right:  40px;
    z-index: 99;
    font-size: 1.8em;
    cursor: pointer;
    /*padding: 1em 1.25em;*/
    width: 40px;
    height:40px;
    /*background: url(../images/top_btn.svg) no-repeat center top;*/
    border: none;
    opacity: 1;/*不透明度*/

}

@media (max-width: 414px) {
#top_btn {
font-size: 1em;
width: 26px;
height: 26px;
}	
}


@media (max-width: 320px) {


}
}

header{position: fixed; top:0; left: 0; z-index: 10000; width: 100%;}

/* ----------------------------------------------------------------
   首頁---TOP
-----------------------------------------------------------------*/

.logo{ 	
    margin: 0 0 0 -1.5em;
    padding: 5em 2em;
    z-index: 999;
    width: 13%;
    height: auto;
    background:#2d3742 url(../images/logo.jpg) center center;

}




@media (max-width: 1200px) {}



 /* ----------------------------------------------------------------
   首頁---主選單 navbar
-----------------------------------------------------------------*/

.navbar {	
	transition: .5s;
	top: 0px;
	z-index: 1000;

	

}
.navbar-adv {
	margin-bottom: 0;
	border-radius: 0;
	z-index: 100;
	height: 130px;
	background:#314c6a;
}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 0px;
}

.navbar-adv ul {
margin:0 0 0 5%;	
}



.navbar-adv li {
}
.navbar-adv li a {
	display: block;
	color: #f6d5a4;
	font-size: 1.12em;
	margin:0 0.65em;
	letter-spacing: 1px;
	line-height:99px;
	transition: all 0.2s linear;
	background:none; 
}

.navbar-adv li a.btn_contact{ width: 230px; height: 68px;  background:url(../images/btn_contact.png) no-repeat; 
text-indent: -9999px; display: block; float:right; }




.navbar-adv li:hover a{
	line-height:130px;
	color: #314c6a;
	background: linear-gradient(90deg, #F6D5A4 0%, #D69D5C 100%); 
background: -moz-linear-gradient(90deg, #F6D5A4 0%, #D69D5C 100%); 
background: -webkit-linear-gradient(90deg, #F6D5A4 0%, #D69D5C 100%); 
background: -o-linear-gradient(90deg, #F6D5A4 0%, #D69D5C 100%); 
}

.navbar-adv li:visited a {
    color:  #f6d5a4;
    
}





.navbar-toggle {
    position: relative;
    float: right;
    padding: 2em;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    border:none;
}


.navbar-toggle .icon-bar {
    background-color: #eeddc6;
    display: block;
    width: 32px;
    height: 3px;
    border-radius: 1px;
    margin-bottom: 0.4em;
}

@media (max-width: 1280px) {
.navbar-adv ul {
margin:0 0 0 1%;	
}	
}

@media (max-width: 1024px) {

.navbar-adv ul {
    margin: -10px 0 0 0;
    width: 100%;
    background-color: #314c6a;	
}	


    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }

	.navbar-adv {
	height: 70px;
	width: 100%;

	}

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav>li {
        float: none;
    }

    .navbar-collapse.collapse.in { 
        display: block!important;

    }
    .collapsing {
        overflow: hidden!important;
    }


	.logo_mobile{     
		height: 4em;
    margin: 1.5em 1em }

	.navbar-header { 
    background-color: #314c6a;
	width: 100%;


} 

 

.navbar-adv li a {
    font-size: 1.1em;
    margin: 0 0 1px 0;
    line-height: 3;
    text-align: center;
    display: block;
    border-bottom: 1px solid #f6d5a4;


}

.navbar-adv li a:hover, .navbar-adv li a:visited {
	line-height:3;
	color: #314c6a;
	background: #f6d5a4; 

}
.navbar-adv {
    background: #314c6a;
}

}


@media (max-width: 414px) {


nav{ background-color: #314c6a;}

.navbar-adv ul {
    margin: 0px 0 0 -15px;
    width: 111%;
    background-color: #314c6a;
}


.navbar-adv li a, .navbar-adv li a:hover, .navbar-adv li a:visited {
    font-size: 1.1em;
    margin: 0 0 1px 0;
    line-height: 3;
    text-align: center;
    display: block;
    color: #f6d5a4;
    border-bottom: 1px solid #f6d5a4;

}

.navbar-adv li a.socialmedia {
    font-size: 1.1em;
    margin: 0 0 1px 0;
    line-height: 3;
    text-align: center;
    display: block;
    border-bottom: 1px solid #f6d5a4;
    background:none ;

}


.navbar-adv li a.socialmedia:hover, .navbar-adv li a.socialmedia:visited {
    line-height:3;
    color: #f6d5a4;
    background:none ; 

}


.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 600px;
}

}

/* ----------------------------------------------------------------
   首頁---主選單 輪播BANNER
-----------------------------------------------------------------*/

header{  background:url(../images/bg_header.png); height: auto; overflow: hidden;
    padding-bottom: 6em;
 }

header ul{ margin:20em 0 0 30%; list-style: none;}

header li a{ width: 100%; margin: 0 0 4em 0; display: block; }

#carousel-id{margin-top:130px;box-shadow:4px 4px 70px rgba(0,0,0,0.8);  }

.item {
	height: 75vh;
} /*改幻燈片高度*/

.bg_item{
background-position: center bottom!important;
background-repeat:no-repeat!important;
height: 720px;

}

.slider_1{ background-image:url(../images/slider/slider_1.jpg); position: relative;}
.slider_2{ background-image:url(../images/slider/slider_2.jpg);position: relative;}
.slider_3{ background-image:url(../images/slider/slider_3.jpg);position: relative; background-position: left top!important;}
.slider_4{ background-image:url(../images/slider/slider_4.jpg);position: relative;}
.slider_5{ background-image:url(../images/slider/slider_5.jpg);position: relative;}





@media (max-width: 1024px) {

header{  
padding-bottom:3em; }

.item {
	height: 40vh;
} /*改幻燈片高度*/

.bg_item{

}

#carousel-id{margin-top:98px;box-shadow:4px 4px 70px rgba(0,0,0,0.8);  }




}

@media (max-width: 991px) {

.item {
	height: auto;
} /*改幻燈片高度*/

.slider_1{ background-image:url(../images/slider/slider_1_mobile.jpg); position: relative;}
.slider_2{ background-image:url(../images/slider/slider_2_mobile.jpg);position: relative;}
.slider_3{ background-image:url(../images/slider/slider_3_mobile.jpg);position: relative; }
.slider_4{ background-image:url(../images/slider/slider_4_mobile.jpg);position: relative;}
.slider_5{ background-image:url(../images/slider/slider_5_mobile.jpg);position: relative;}

.bg_item{

}

}


@media (max-width: 414px) {

.glyphicon {
    position: relative;
    top: 50%;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bg_item{

}

header{  background:url(../images/bg_header_mobile.png)  center top;padding-bottom:0em; }



}

@media (max-width: 375px) {

.bg_item{

}


}

@media (max-width: 320px) {
.bg_item{

}
}


.carousel .left, .carousel .right {
	background-image: none;
}/* 滑鼠移到幻燈片<>的漸層消失*/


.carousel-inner{ background-color: #f8f8f8;}

.carousel-indicators li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #0009;
    background-color: rgba(0,0,0,0);
    border: 1px solid #314c6a;
    border-radius: 10px;
}

.carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #314c6a;
}








/* ----------------------------------------------------------------
   首頁---麵包屑+社群分享
-----------------------------------------------------------------*/


#bar{ width:100%; height:auto; padding:2em 2em 0 2em;
}


.bar_color_1{background:#fff;}

.bar_color_2{background:#fff;}

.breadcrumb {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    background-color: #fff;
    font-size: 1.125em;
}

.breadcrumb li { color: #010101; }

.breadcrumb li a{text-decoration:none; }

@media (max-width: 414px) {
#bar{ width:100%; height:auto;  padding:2em 2em 0 2em;
}
.bar_color_2{background:#ededed;}

}

    

/* ----------------------------------------------------------------
   首頁---服務項目
-----------------------------------------------------------------*/


#services{ width:100%; height:auto; background:url(../images/bg_sevrvice.png) no-repeat center top;padding: 5em 4em;}


@media (max-width: 1366px) {

}


.services_box{
height:550px; 
border: 5px solid #987851;
padding: 6em 2em;
background: #ffeee3;
cursor:pointer;
transition: all 0.2s linear; /*動態秒數*/
margin:1em 0.75em;
transform:scale(1);
}



.services_box:hover{
border: none;
background: linear-gradient(270deg, #c59355 0%, #d59d5c 100%);
    background: -moz-linear-gradient(270deg, #c59355 0%, #d59d5c 100%);
    background: -webkit-linear-gradient(270deg, #c59355 0%, #d59d5c 100%);
    background: -o-linear-gradient(270deg, #c59355 0%, #d59d5c 100%);
    transform:scale(1.05);
}


.services_box a{    
display:block;
padding: 1em 0;
color: #ffeee3;
background-color: #987851;
text-align: center;
margin: 0 auto;
width: 50%;
letter-spacing: 2px;

}


.services_box:hover a{
color:#987851 ;
background-color: #ffeee3;}

.services_box h1, .services_box h2{
text-align: center;
font-size:2.625em;
color:#917758;
letter-spacing: 2px;
font-weight: 400;

}

.services_box:hover h1, .services_box:hover h2{
color:#ffeee3;
}

.services_box h5{
font-size: 0.75em;
color:#917758;
text-align: center;

font-weight: 600;
}

.services_box:hover h5{
color:#ffeee3;
}


.services_box p{ font-size: 1.1em; text-align: justify;color:#666666; font-weight: 600; margin-bottom:2em;}

.services_box:hover p{color:#ffeee3;font-weight: 600;}


.services_box .img_service_line{
 background: url(../images/img_service_line.png) no-repeat center center; width: 100%; height: 10px;margin-bottom: 3em;}


.services_box:hover .img_service_line{
 background: url(../images/img_service_line_over.png) no-repeat center center;}

.services_box .icon_webdesign{width: 100%; height: 110px;  background: url(../images/img_service_webdesign.png) no-repeat center center;
transition: all 0.2s linear; }

.services_box:hover .icon_webdesign{width: 100%; height: 110px;  background: url(../images/img_service_webdesign_over.png)no-repeat center center;}

.services_box .icon_campaign{width: 100%; height: 110px;  background: url(../images/img_service_campaign.png)no-repeat center center;
transition: all 0.2s linear;}

.services_box:hover .icon_campaign{width: 100%; height: 110px;  background: url(../images/img_service_campaign_over.png)no-repeat center center;}

.services_box .icon_marketing{width: 100%; height: 110px;  background: url(../images/img_service_marketing.png)no-repeat center center;
transition: all 0.2s linear;}

.services_box:hover .icon_marketing{width: 100%; height: 110px;  background: url(../images/img_service_marketing_over.png)no-repeat center center;}



.section_title {

    color: #987851;
    font-size: 4.5em;
    /*margin: 1em 0 1em 0;*/
    line-height: 1;
    text-align: right;
    font-weight: 600;
    letter-spacing:4px;
    margin: 0 20px 0 0;
}

.services_en {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 1px;
    color: #314c6a;
    text-align: right;
    margin: 0 30px 1.5em 0;

}

@media (max-width: 1024px) {
#services {
    padding: 5em 1em;
    background: url(../images/bg_sevrvice.png) repeat right top;
}

.services_box {
    height: auto;
    padding: 6em 1em;
}

}

@media (max-width: 414px) {

#services {padding: 3em 2em; background: url(../images/bg_sevrvice.png) repeat right top;}

.services_box {
    height: auto;
    padding: 2.5em 2em;
    margin: 1em 0em;
}
 
.services_box h5 {
    font-size: 0.75em;
} 

.services_box .img_service_line {
    margin-bottom: 1.5em;
}

.section_title {
    font-weight: 400;
    font-size: 3.5em;

}

.services_en {
	font-size: 1.25em;
    margin: 0 30px 0em 0;
}

.services_box .icon_webdesign, .services_box .icon_campaign, .services_box .icon_marketing {
    height: 90px;
    background-size: 34% 90%;
}

.services_box p{ margin-bottom:1em;}

.services_box p{ font-weight: 400; }


.services_box h1, .services_box h2{

font-weight: 300;

}

}



/* ----------------------------------------------------------------
   首頁---contact
-----------------------------------------------------------------*/


#contact{ width:100%; height:auto; padding:5em 2em 4em 2em; background-color: #313235;}


#contact a{color: #fff; text-decoration: none;} 

#contact input{
    width: 100%;
    height: 2em;
    border: 1px solid #7360f1;
    background-color:#313235;
    color: #fff;	
}
#contact textarea{ 
    width: 100%;
    height: 8em;
    border: 1px solid #7360f1;
    background-color:#313235;
    color: #fff;	
 }
#contact h4{ display:block;}
#contact h5{ font-size:1.125em!important;}

#contact p{font-size:1.1em; color:#fff;}


#contact .btn{
display: block;
    width:100%;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing:2px;
    text-align: center;
    background-image: none;
    border-radius: 0px;
    background-color:#7863fe;
    color:#fff;

}

@media (max-width: 414px) {

#contact{ padding:5em 1em 4em 1em; }

#contact h5{ font-size:1.1em!important;}

#contact p{font-size:1em;}	
}



/* ----------------------------------------------------------------
   首頁---footer
-----------------------------------------------------------------*/


footer{width:100%; padding:2em 0 ; background-color: #2d3742; }

h4{ font-size: 1.375em; color: #fff; font-weight: 300;  letter-spacing: 2px;}


footer p{ line-height: 2.2; color:#eeddc6;  letter-spacing: 1px; font-size:1.1em;}

footer p a { line-height: 2; text-decoration:none;color:#eeddc6; }

footer p a:hover { line-height: 2;text-decoration:underline;color:#eeddc6; }

footer ul{ width:100%; }

footer li{ float:left; list-style:none;}

footer li a{ 
	display:block;
	color:#eeddc6;  text-decoration:none; margin:0 0.25em; font-size:1.1em; font-weight: 400; line-height: 2;}

footer li a:hover{  text-decoration:underline;color:#eeddc6; }


@media (max-width: 414px) {
footer p{ text-align: left; font-size: 1em;}
}




/* ----------------------------------------------------------------
   內頁---HEADER
-----------------------------------------------------------------*/

.content_page{height: 650px; position: relative; background-repeat: no-repeat;
background:url(../images/bg_content_page.jpg) no-repeat center center ;

}


.content_page h1{text-align: center; padding-top: 15%;}

.content_page a{ display: block; text-align: center; }

/*.web-design{background:url(../images/header_web-design.jpg) ; }
.internet-marketing{background:url(../images/header_internet-marketing.jpg) ; }
.social-media-marketing{background:url(../images/header_social-media-marketing.jpg) ; }
.campaign{background:url(../images/header_campaign.jpg) ; }
.process{background:url(../images/header_process.jpg) ; }*/



.content_page .text{
    position: absolute;
    right: 0px;
    bottom: 120px;
    padding: 2em 4em;
    background: linear-gradient(270deg, #F6D5A4 0%, #D69D5C 100%);
    background: -moz-linear-gradient(270deg, #F6D5A4 0%, #D69D5C 100%);
    background: -webkit-linear-gradient(270deg, #F6D5A4 0%, #D69D5C 100%);
    background: -o-linear-gradient(270deg, #F6D5A4 0%, #D69D5C 100%);
}

.content_page .text h6{ font-size: 1.125em;font-weight: 600; }  

.content_page .text h1{ font-size: 3em;font-weight: 200; }  


@media (max-width: 1500px) {

.content_page h1{ padding-top:22%;}

}

@media (max-width: 768px) {

.content_page{height: auto; position: relative; 
background:url(../images/bg_content_page_mobile.jpg) no-repeat center center ;}

.content_page h1{ padding-top:32%;}
}

@media (max-width: 414px) {
.content_page {
    height: 0;
    padding-bottom: 97.4%;
    background-size:cover!important; 
   margin-top: 98px;
}

.content_page .text {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 1em 1em 0.5em 1em;
}

.content_page .text h1 {
    font-size: 2em;
    font-weight: 400;
    margin: 0;
}

.content_page .text h6 {
    font-size: 1em!important;
    font-weight: 600;
    line-height: 1.6;
}
/*.web-design{background:url(../images/header_web-design_mobile.jpg) ; }
.internet-marketing{background:url(../images/header_internet-marketing_mobile.jpg) ; }
.social-media-marketing{background:url(../images/header_social-media-marketing_mobile.jpg) ; }
.campaign{background:url(../images/header_campaign_mobile.jpg) ; }
.process{background:url(../images/header_process_mobile.jpg) ; }*/

}
/* ----------------------------------------------------------------
   內頁---內容
-----------------------------------------------------------------*/


#product{
    width: 100%;
    height: auto;
    background: url(../images/bg_sevrvice.png) no-repeat center top;
    padding: 10em 4em 2em 4em;
    overflow: hidden;

}

.product_box{ position: relative; margin-bottom: 2em; min-height: 2em; overflow: hidden; }


.step{ position: absolute;  left:40px; top:-40px; z-index: 9;}

.product_box .box_shdow{box-shadow:15px 15px rgba(198,147,86,1); }


/*.product_box h2{color: #987851; font-size:4.75em; line-height: 1.2;  letter-spacing: 1px; font-weight: 600; margin-top: 0;}*/

.product_box h2{background-color:#2e2a26; color: #ffeee3; padding:0.5em 0.5em 0 0.5em; 
    font-size:3em; line-height: 1.4;  letter-spacing: 1px; font-weight: 200; margin-top: 0;}

.product_box h3, .product_box p{ color: #333333; font-size: 1.125em; line-height: 1.8;  letter-spacing: 2px; font-weight: 400;}


.product_box .space{margin-top: -500px;}


.product_box h4{background-color:#2e2a26; color: #ffeee3; font-size: 1.25em; display: block; line-height: 2.6;
letter-spacing: 1px;}

.product_box h4 .number{background-color:#917758; color: #fff; font-size: 1.1em;font-family: Arial, Helvetica, sans-serif ; 
font-weight: 600; padding: 0.2em 0.5em; margin:0 0.5em;
}

.product_box h6{ background-color: #917758;font-size: 1em; color: #fff;
    font-family: Arial, Helvetica, sans-serif; padding: 0.2em 1em; width: 70%; letter-spacing: 1px; text-align: right;
    margin-bottom: 1em; 
     
}

.product_box .border{ border:1px solid #917758; }


@media (max-width: 1024px) {
#product {
    padding: 5em 1em;
    background: url(../images/bg_sevrvice.png) repeat right top;
}


}

@media (max-width: 414px) {

#product {padding: 3em 1em 0em 1em; background: url(../images/bg_sevrvice.png) repeat right top;}

.product_box h4{ letter-spacing: 1px; font-size: 1.12em;}

.step {
    position: absolute;
    left: 7px;
    top: -23px;
    z-index: 9;
    width: 25%;
}

.product_box h2{ 
    padding: 0.25em;
    line-height: 1.2;
    letter-spacing: 0px;
    font-size: 2em;
}

.product_box h6 {
    font-size: 0.5em;
    width: 90%;
}

}

@media (max-width: 360px) {

.product_box h4{ letter-spacing: 0px; font-size: 1em;}

}

/* ----------------------------------------------------------------
   內頁--網站價格
-----------------------------------------------------------------*/

#price{
    width: 100%;
    height: auto;
    background: url(../images/bg_sevrvice.png) repeat-y center bottom;
    padding: 0em 4em 4em 4em;
    overflow: hidden;    
}

#price a, #product a{
    display:inline;
    padding: 1em 2em;
    color: #2e2a26;
    font-weight: 400;
    font-size: 1.1em;
    background-color: #d59d5c;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 1px;
    transition: all 0.2s linear;
    transform: scale(1);
    border:1px solid #d59d5c;
}

#price a:hover, #product a:hover {
color:#987851 ;
background-color: #ffeee3;
font-size: 1.125em;
}

#price .table{ margin-bottom: 2em;}

.table thead > tr{background-color: #2e2a26; color: #ffeee3; padding: 1em; font-size: 1.75em;text-align:center;}

.table thead > tr > td{border: 1px solid #d59d5c; }

.table tbody > tr > td{ padding: 1em; font-size: 1.1em; border: 1px solid #d59d5c; background-color: #fcf2ec; color: #2e2a26;}


.bg_gold{background-color: #917758!important; font-size: 0.75em; letter-spacing: 4px;}

.bg_cafe{background-color: #e7d3c1!important;}

 
.money{ font-size: 3em;  font-weight: 600; color: #917758; font-family: Arial, Helvetica, sans-serif ; letter-spacing: -2px;}


@media (max-width: 414px) {

#price{
    padding: 2em 0em;
   
}

}

/* ----------------------------------------------------------------
   內頁---網路專案服務流程
-----------------------------------------------------------------*/


#process{
    width: 100%;
    height: auto;
    background: url(../images/bg_sevrvice.png) repeat-y center top;
    padding: 10em 4em 4em 4em;
    overflow: hidden;

}

#process h3{}

#process ul{background-color: #fff;  width: 100%;     padding: 1em 1.5em; }

#process li{ list-style: none; 
    color: #333333;
    font-size: 1.1em;
    line-height: 1.8;
    letter-spacing: 1px;
    font-weight: 400;

}

@media (max-width: 414px) {
#process{
padding: 3em 1em 0em 1em;}
}

/* ----------------------------------------------------------------
   內頁--聯絡我們
-----------------------------------------------------------------*/

#qa{ width:100%; height: 380px; background-repeat: no-repeat; background-position: center top; }

.bg_qa_web-design{background: url(../images/bg_qa_web-design.jpg);}


#qa h4{ color: #f9d8ae;font-size: 2.625em; letter-spacing: 3px; text-align: center; margin-top: 3em; line-height:2;}

#qa p{ color:#c69356;text-align: center; letter-spacing: 2px;  font-size: 1.125em; margin-bottom: 2em;}

#qa a {
    display:block;
    padding: 1em 2em;
    color: #222;
    font-weight: 400;
    font-size: 1.1em;
    background-color: #d59d5c;
    text-align: center;
    margin: 0 auto;
    width: 20%;
    letter-spacing: 1px;
    transition: all 0.2s linear;
    transform: scale(1);
}

#qa a:hover {
color:#987851 ;
background-color: #ffeee3;
font-size: 1.125em;
/*width: 21%;*/
}


#qa button {
    display:block;
    padding: 0.75em 2em;
    color: #2e2a26;
    font-weight: 400;
    font-size: 1.1em;
    background-color: #d59d5c;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 1px;
    transition: all 0.2s linear;
    border:none;
    transform: scale(1);
}

#qa button:hover {
color:#987851 ;
background-color: #ffeee3;
font-size: 1.125em;
/*width: 21%;*/
}

#qa .modal-content {
    position: relative;
    background-color: #eeddc6;
    color: #314c6a;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none;
    border-radius: 0px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

#qa .modal-content p{
    text-align: left;
 font-size:1.1em;
 background-color: #eeddc6;
color: #314c6a; 
margin-bottom: 0;
margin:1em 0 0 0;
    padding: 0;

}

#qa .modal-header  p{
    color: #eeddc6;
    text-align: justify;
    font-size: 1.125em;
    background-color: #314c6a;
    margin-top: 0;
    padding: 0;

    
}

#qa .modal-header {
    padding: 2em;
    border: none;
    background-color: #314c6a;
}


#qa .modal-header  button{
    color: #eeddc6;
    display: inline;
    padding: 0.3em 1.25em 0.5em 0.75em;
    color: #314c6a;
    font-weight: 400;
    font-size: 1.1em;
    background-color: #eeddc6;
    text-align: right;
    margin: 0 auto;
    border-radius: 0;
    width: 0%;
    letter-spacing: 1px;
  
}


#qa .modal-header  h2{
 color: #eeddc6;
 font-size: 1.25em;
 font-weight: 400;
 letter-spacing: 2px;
 text-align: center;
 margin-bottom: 0;
}

#qa input[placeholder] {
        color: #314c6a;
        font-size:1.1em;

}


#qa li{ 
    list-style: none;  line-height:3;
     border-bottom: 1px solid  #314c6a!important;}

#qa input{ 

 font-size:1.1em;
 background-color: #eeddc6;
color: #314c6a; 

    border: 0;
    margin: 0.5em 0.5em 0.5em 0.5em!important;
    padding: 0;
    color: inherit;
    border-radius: 0;
    margin-top: 2px;
}

#qa input[type="checkbox"] {
    margin: 1em 2em ;
    line-height: normal;

}


#qa textarea {width: 100%;}

#qa .btngo
{
    display: block;
    padding: 1em 2em;
    color: #fff
 font-weight: 400;
    font-size: 1.1em;
    background-color: #d59d5c;
    text-align: center;
    margin: 0 auto;
    width: 96%;
    letter-spacing: 1px;
    border: none;

}

#qa  .btnline{
    display:inline;
    padding: 0.5em 1em;
    color: #222;
    font-weight: 400;
    font-size: 0.75em;
    background-color: #d59d5c;
    text-align: center;
    margin: 0 auto;
    width: 20%;
    border-radius: 1.5em;
    letter-spacing: 0px;
    text-decoration: none;
    margin:0 0.25em;

}


#qa .btnline:hover{

    color: #d59d5c;
    font-size: 0.75em;
    background-color: #eeddc6;
    transition:none;
    transform: scale(0); 



}


@media (max-width: 414px) {

#qa{ width:100%; height: 0; padding-bottom: 70%; background-size:cover; }


#qa h4 {
    color: #f9d8ae;
    font-size: 2em;
    letter-spacing: 0px;
    text-align: center;
    margin-top: 1.5em;
    line-height: 1.4;
    padding:0 2em;
}

#qa p {
    letter-spacing: 1px;
    font-size: 1.1em;
    padding: 0 3em;
}

#qa a {

    width: 45%;

}

#qa .modal-header {
    padding: 1em 1em 2em 1em;
    border: none;
    background-color: #314c6a;
}

#qa button {

    /*width: 60%;*/

}

}

@media (max-width: 360px) {

#qa h4 {
    font-size: 1.75em;
    margin-top: 1em;
    padding:0 1.5em;
}

#qa p {
    letter-spacing: 1px;
    font-size: 1em;
    padding: 0 1.5em;
}

}