@charset "utf-8";
/* CSS Document */

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575px) {
	figure.effect-oscar figcaption::before {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    border: 1px solid #fff;
    content: '';
}
 
	.margin-top{padding: 40px 0px!important;}
	.close_position {
    position: absolute;
    z-index: 9;
    top: 17px;
    right: 7px;
}
	
.res-px {
    padding: 25px 0 0 0!important;
}
	
header.masthead {
	height: 100%;
	min-height: 600px;
}
ul.navbar-nav {
	padding: 0!important;
}
.btn_align {
	text-align: center;
}
nav li a {
	font-size: 16px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #fff!important;
}
nav li:hover a {
	font-size: 16px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #00a488!important;
}
.navbar-brand {
	margin-right: 0rem;
}
#mainNav {
	background-color: #000;
}
nav .res {
	display: initial;
	margin: 0 14px;
}
.nav-item {
	background: #000;
	padding: 10px 0;
	border-bottom: 1px solid #333;
}
nav.navbar-shrink .nav-item .fa {
	display: inline;
}
a.navbar-brand {
	width: 45%;
}
.nav-link {
	padding-left: 0!important;
}
nav .langul li a {
	background: none;
	font-size: 12px!important;
	padding: 6px 0px!important;
	display: inline-block;
	border-radius: 50%;
	border: 0;
	width: 33px;
}
.navbig {
	display: none;
}
.navsmall {
	display: auto;/* float: left; */
}
nav.navbar-shrink {
	background: #000!important;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0px 0%;
	width: 100%;
	background:#000;
	text-align: center;
	cursor: pointer;
}
.rwd-work
{
    width: 100%;
    overflow: hidden;
    /* height: 65%; */
    margin: 3% 1%;
}
#services_table td{
	width:100%;
	display:block;
}

.grid figure figcaption {
	padding: 1.2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.8em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
   font-size: 18px!important;
}

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767px) {
		figure.effect-oscar figcaption::before {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    border: 1px solid #fff;
    content: '';
}
	 

	.margin-top{padding: 64px 0;}
	
	.close_position {
    position: absolute;
    z-index: 9;
    top: 18px;
    right: 8px;
}
.res-px {
    padding: 40px 0px 0 0!important;
}	
	
header.masthead {
	height: 100%;
	min-height: 600px;
}
ul.navbar-nav {
	padding: 0!important;
}
.btn_align {
	text-align: center;
}
nav li a {
	font-size: 14px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #fff!important;
}
nav li:hover a {
	font-size: 14px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #00a488!important;
}
#mainNav {
	background-color: #000;
}
nav .res {
	display: initial;
	margin: 0 14px;
}
.nav-item {
	background: #000;
}
nav.navbar-shrink .nav-item .fa {
	display: inline;
}
a.navbar-brand {
	width: 60%;
}
.nav-link {
	padding-left: 0!important;
}
.navbig {
	display: none;
}
.navsmall {
	display: auto;
	width: 115px;
}
nav.navbar-shrink {
	background: #000!important;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0px 0%;
	width: 100%;
	background:#000;
	text-align: center;
	cursor: pointer;
}
.rwd-work
{	 	width: 31.33334%;
    overflow: hidden;
    /* height: 65%; */
    margin: 1% 1%;
}
#services_table td{
	width:100%;
	display:block;
}
.grid figure figcaption {
	padding: 1.2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;



	
}
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
   font-size: 18px!important;
}

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991px) {
	.margin-top{margin-top: 23px;}
	.close_position {
    position: absolute;
    z-index: 9;
    top: 20px;
    right: 22px;
}
	
.btn_align {
	text-align: left;
}
nav li a {
	font-size: 14px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #fff!important;
}
nav li:hover a {
	font-size: 14px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #00a488!important;
}
#mainNav {
	background-color: #000;
}
nav .res {
	display: initial;
	margin: 0 14px;
}
.nav-item {
	background: #000;
	padding: 8px 13px;
}
nav.navbar-shrink .nav-item .fa {
	display: inline;
}
a.navbar-brand {
	width: 55%;
}
.nav-link {
	padding-left: 0!important;
}
nav .lang ul.langul li a {
	border: 1px solid #fff;
	width: 45px;
	float: left;
	margin: 0 7px;
}
.navbig {
	display: none;
}
.navsmall {
	display: auto;
}
nav.navbar-shrink {
	background: #000!important;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0px 0%;
	width: 100%;
	background:#000;
	text-align: center;
	cursor: pointer;
}
.rwd-work
{	 	width: 31.33334%;
    overflow: hidden;
    /* height: 65%; */
    margin: 1% 1%;
}
#services_table td{
	width:100%;
	display:block;
}

.grid figure figcaption {
	padding: 1.2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
    color: rgba(255,255,255,.7);
    font-size: 18px!important;
}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199px) {
	

#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
      font-size: 12px!important;
}
	
		.margin-top{margin-top: 0px;}
	.close_position {
    position: absolute;
    z-index: 9;
    top: 50px;
    right: 31px;
}
.btn_align {
	text-align: left;
}
nav li a {
	font-size: 14px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #fff!important;
}
nav li:hover a {
	font-size: 14px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #00a488!important;
}
nav .lang ul.langul li a {
	border: 1px solid #fff;
	width: 46px;
	float: left;
	margin: 0 5px;
}
.navbig {
	display: auto;
	width: 200px;
}
.navsmall {
	display: none;
}
nav.navbar-shrink {
	background: rgba(0,0,0,0.8)!important;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: -1px 0%;
	width: 100%;
	background:#000;
	text-align: center;
	cursor: pointer;
}
.rwd-work
{	 	width: 31.33334%;
    overflow: hidden;
    /* height: 65%; */
    margin: 1% 1%;
}
#services_table td{
	width:50%;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.8em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
}

a.navbar-brand {
    width: 28%;
}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
		.margin-top{margin-top: 0px;}
	.close_position {
    position: absolute;
    z-index: 9;
    top: 50px;
    right: 31px;
}
.btn_align {
	text-align: left;
}
nav li a {
	font-size: 16px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #fff!important;
}
nav li:hover a {
	font-size: 16px!important;
	font-family: "microsoft jhenghei", "PingFangSC-Regular", sans-serif;
	color: #00a488!important;
}
nav .lang ul.langul li a {
	border: 1px solid #fff;
	width: 53px;
	float: left;
	margin: 0 7px;
	padding: 12px 0!important;
}
.navbig {
	display: auto;
	width: 235px;
}
.navsmall {
	display: none;
}
nav.navbar-shrink {
	background: rgba(0,0,0,0.8)!important;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: -1px 0%;
	width: 100%;
	background:#000;
	text-align: center;
	cursor: pointer;
}

.rwd-work
{
	width: 31.33334%;
    overflow: hidden;
    /* height: 65%; */
    margin: 1% 1%;
}

#services_table td{
	width:50%;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.7em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
}

#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {

    font-size: 14px!important;
}
a.navbar-brand {
    width: 36%;
}
}