/*-- navbar --*/


.mobile-nav-button {
  position: fixed;
    margin: 1em 0em 0;
    left: 2%;
    top: 0;
    z-index: 9999;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background: rgba(36, 128, 157, 0.5);
}
.mobile-nav-button .mobile-nav-button__line {
	width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: 1s ease;
    margin: .6em auto;
    line-height: 5px;
}

.mobile-nav-button-default .mobile-nav-button-toggle:hover .mobile-nav-button__line {
	width: 20px;
    height: 2px;
    background:#ddd;
    position: relative;
    margin: .6em auto;
}

.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) { margin: 0.1em auto; }

.mobile-nav-button .mobile-nav-button__line--1 {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	top: 13px;
	position: absolute;
}

.mobile-nav-button .mobile-nav-button__line--2 { 
	display: none;	
}

.mobile-nav-button .mobile-nav-button__line--3 {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	top: 13px;
	position: absolute;
}

.mobile-nav-button .mobile-nav-button__line--1,.mobile-nav-button .mobile-nav-button__line--3 {
	left:10%;
}


.mobile-menu {
	display: block;
     width: 180px;
    right: -20%;
    height: 100%;
    background: rgba(36, 128, 157, 0.9);
    position: fixed;
    z-index: 9998;
    transition: 0.6s ease;
    top: 0px;/*-- 選單背景 --*/
    opacity: 0;
}

#logo img{
	position: relative;
    top: 10%;/*-- 選單上高度距離 --*/
    margin: 60px 0 0 0;
	
}

.mobile-menu ul {
	position: relative;
    top: 1%;/*-- 選單-首頁距離上高度距離 --*/
    padding: 0;
}


.mobile-menu ul li { 
	list-style: none;
    margin-bottom:0.2em;/*-- 選單距離 --*/
	display: block;
}
.mobile-menu ul li a {
	width: 100%;
    margin: 0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    padding: 1em 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.open > ul.dropdown-menu.agile_short_dropdown{
    display: block;
    transform: none !important;
    min-width: 65%;
    border: none;
    box-shadow: none;
    border-radius: 0;
    left: 18%;
}
.open > ul.dropdown-menu.agile_short_dropdown li{
	margin:0 !important;
}
ul.dropdown-menu.agile_short_dropdown > li > a:hover{
    background: none;
}
.mobile-menu ul li a:after {
	content: '';
    background:#5099b1;
	width: 100%;
	height: 70%;
	position: absolute;
	right: -100%;
	top: 8px;
	z-index: -1;
	transition: 0.4s ease;
}

.mobile-menu ul li a:hover,.mobile-menu ul li.active a { 
	color: #fff; 
}

.mobile-menu ul li a:hover:after,.mobile-menu ul li.active a:after { 
	right: 0; 
}
li.dropdown.act a.w3_icons_act {
    background: #0e0e0e;
	color: #fff;
}
.mobile-menu img {
	position: absolute;
	width: 150px;
	display: block;
	left: 50%;
	top: 3rem;
	transform: translatex(-50%);
	-webkit-transform: translatex(-50%);
	-moz-transform: translatex(-50%);
	-o-transform: translatex(-50%);
	-ms-transform: translatex(-50%);
	padding: 0;
	text-align: center;
}


.mobile-menu--open {
	opacity: 1;
	left:0%;
}
.dropdown.active.open a  ul.dropdown-menu.agile_short_dropdown li a.w3_icon_1:after{
	background:none !important;
}

/*-- navbar --*/






/*-- //刊頭  masthead--*/

.masthead{
	min-height:30rem;
	position:relative;
	display:table;
	width:100%;
	height:auto;
	padding-top:8rem;
	padding-bottom:8rem;

	background:
	linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),
	url(../img/bg-masthead.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover}

.masthead h1{font-size:4rem;margin:0;padding:0}@media (min-width:992px){
.masthead{height:100vh}
.masthead h1{font-size:5.5rem}}

/*-- //刊頭  masthead--*/





/*-- //刊頭  masthead--*/
#graphic_design_header{  
	min-height:10rem;
    position: relative;
    display:table;
	width:100%;
	height:100%;
	padding-top:0rem;
	padding-bottom:0rem;


	background:
	linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),
	url(../img/graphic_header.jpg); 	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:

}

/*-- //刊頭  masthead--*/
#website_header{  
	min-height:10rem;
    position: relative;
    display:table;
	width:100%;
	height:100%;
	padding-top:0rem;
	padding-bottom:0rem;


	background:
	linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),
	url(../img/website_header.jpg); 	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:

}


/*-- //刊頭  masthead--*/

#art_header{  
	min-height:10rem;
    position: relative;
    display:table;
	width:100%;
	height:100%;
	padding-top:0rem;
	padding-bottom:0rem;


	background:
	linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),
	url(../img/art_header.jpg); 	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:

}


/*-- //刊頭  masthead--*/



.btn_more {margin:0 auto;}


/*-- footer --*/
#information-footer{
    background: #ecebe6;
    padding: 0.9em 0 0 0;
}

.about-grids {
	margin: 0px 0px 50px 0;
}

.agile-grid {
	border:#858686 0px solid; 
	border-color: #858686; 
    margin: 15px 0px 15px 0;
    padding:  0px 30px 0px 30px;

}
.agile-grid h5{
    text-transform: capitalize;
    margin: 0px 0 1.2em 0;
    font-size: 1.2em;
    color:#5a5955;
    font-weight: 600;
    letter-spacing: 1px;
}
.agile-grid p{
	color: #858686;
    font-size: .9em;
    line-height: 1.8em;
    margin: 0;
}

.footer-agileinfo-social {
    margin: 2em 0 0 0;
}
.footer-agileinfo-social ul {
    padding: 0;
    margin: 0;
}
.footer-agileinfo-social ul li {
    display: inline-block;
    margin: 0 .5em 0 0;
}
.footer-agileinfo-social ul li a {
    color: #FFFFFF;
    text-align: center;
}
.footer-agileinfo-social ul li a i.fa {
    height: 30px;
    width: 30px;
    border: solid 2px #212121;
    line-height: 29px;
    background: #212121;
    color: #FFFFFF;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
.footer-agileinfo-social ul li a i.fa.fa-facebook:hover {
	border: solid 2px #3b5998;
	background:#3b5998;
    color: #FFFFFF;
}
.footer-agileinfo-social ul li a i.fa.fa-twitter:hover{
	border: solid 2px #55acee;
	background:#55acee;
	color: #FFFFFF;
}
.footer-agileinfo-social ul li a i.fa.fa-rss:hover{
	border: solid 2px #f26522;
	background:#f26522;
	color: #FFFFFF;
}
.footer-agileinfo-social ul li a i.fa.fa-vk:hover{
	border: solid 2px #45668e;
	background:#45668e;
	color: #FFFFFF;
}
.post-img{
	float:left;
	width:20%;
}
.post-img a img{
	width:100%;
}
.post-info{
	float:right;
	width:75%;
}
.post-info h6{
    margin: 0px 0 5px 0;
	font-size:1.2em;
	color:#20ac8d;
}
.post-info h6 a{
	color:#20ac8d;
	margin:0;
	text-decoration:none;
}
.post-info h6 a:hover{
    color: #FF5722;
}
.post-info h6 a:focus{
	outline:none;
	text-decoration:none;
}
.post-info p{
	color: #858686;
    font-size: 0.9em;
    margin: 0.2em 0 0 0;
    line-height:18px;
}
.post-grid:nth-child(2){
	margin:1em 0 ;
}
.post-grids{
	margin:0em 0 50px 0 ;
}
.address-grid{
	border-bottom:#858686 1px solid;  
    background:;
    padding: 5px;
}

.address-left{
	float:left;
	width:10%;
}
.address-left i.fa.fa-phone,.address-left i.fa.fa-envelope{
    color: #20ac8d;
    font-size: 1.9em;
}

.address-left i.fa.fa-map-marker{
    color: #20ac8d;
    font-size: 2.2em;
}



.address-right{
	float: right;
    width: 87%;
}
.address-right h6{
	color: #858686;
    font-size: 1em;
    margin:0em 0 0 10px;
    font-weight: 400;
}
.address-right h5{
	color: #858686;
    font-size: 1em;
    margin:0.2em 0 0.6em 10px;
    font-weight: 400;
}
.address-right p{
	color:#20ac8d;
	margin:0.2em 0 0 10px;
	font-size:1em;
}
.address-right p a{
	color:#20ac8d;
	text-decoration:none;

}
.address-right p a:hover{
	color:#ff5301;
}
.address-right p span{
	display:block;
	margin:.5em 0;
}
.address-grid:nth-child(2){
	margin:1em 0;
}
#copyright{
	padding:1em 0;
	text-align:center;
	background:#ecebe6;
}
#copyright p{
	color:#858686;
	font-size:.9em;
	text-align:center;
	margin:0;
}
#copyright p a{
    color: #FF5722;
    text-decoration: none;
}
#copyright p a:hover{
	color:#FFFFFF;	
}
/*-- //footer --*/


/*-- //banner_m --*/

#btn_banner{
	margin:0 0 20px 0;

}