@charset "utf-8";
 .banner{
     margin-top: -10em;
}
/*************about*******************/
 .about_box {
     padding-top: 1em;
     padding-bottom: 1em;
     padding: 0;
     text-align: left;
     color: #333333;
	 line-height: 33px;
}
 .about_box b {
	 font-weight: bold;
	 font-size: 1.5em;
	 color: #555555;
     
}
/*************service*******************/
 .service_box {
     padding-top: 1em;
     padding-bottom: 1em;
     text-align: left;
}
.service_box .service01 {
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 3em;
}
.service_box .service01 img {
	width: 100%;
	padding-bottom: 1em;
}
.service_box .service01 h2 {
	font-weight: bold;
	font-size: 1.5em; 
}
.service_box ul li {
	list-style: square;
	color: #333333;
	
}
/*************目錄*******************/
 .works0_box{
     margin-top: -10em;
     margin-bottom: -10em;
     background: #000000;
}
 .works0 {
     color:#000;
     height: 110vh;
     overflow: hidden;
     padding: 0px;
     position: relative;
}
 .works0 h1 {
     color:#FFF;
     font-weight: bold;
     display: block;
     width: 100%;
     position: absolute;
     top: 50%;
     text-align: center;
}
 .works0 h1 span {
     color: #ffffff;
     text-shadow: 0px 0px 10px #000000;
}
 .works0 a:hover h1 span {
     color: #ffffff;
     text-shadow: 0px 0px 10px #000000;
}
 .works0 img {
     display: block;
     object-fit: cover;
     height: 110vh;
     margin: 0;
     padding: 0px;
}
 .works0 a:hover img {
     opacity: 0.35;
}
/*************works*****************/
 .works_box {
     padding-top: 3em;
     padding-bottom: 3em;
     margin: 0;
     padding: 0;
}
 .works_title h1 {
     color: #333333;
     font-size:1.5em;
     font-weight: bold;
     text-align: center;
     background-image: url("../img/line.png");
     background-position: center center;
     background-repeat: repeat-x;
}
 .works_title h1 span {
     background: #ffffff;
     padding: 0 1em 0 1em;
}
 .works_title h2 {
     color: #333333;
     font-size:1.5em;
     font-family: Arial;
     text-align: center;
     margin-bottom: 1.5em;
}
 .works img {
     width: 100% ;
}
 .works a img {
     filter: grayscale(100%);
}
 .works a:hover img {
     -webkit-filter: none;
}
 .works {
     color:#000;
     width: 100%;
     margin: auto;
     position: relative;
     margin-bottom: 1em;
}
 .works:hover .hover{
     display:block;
     position:absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
}
 .hover {
     display:none;
     color: #ffffff;
}
 .hover h1{
     font-size: 1.5em;
     font-weight: bold;
     color: #ffffff;
}
 .hover h2{
     font-size: 1.2em;
     color: #ffffff;
     font-family: Arial;
}
 .works2 {
     padding-top: 3em;
     padding-bottom: 6em;
     text-align: center;
}
 .works2 button {
     padding-top: 1em;
     padding-bottom: 1em;
     padding-left: 3em;
     padding-right: 3em;
}
/***********************detail**************************/
 .style_r{
     background: #ebe7e1;
     text-align: right;
     color: #666666;
}

 .style_r h1{
     margin-top: 35%;
     margin-right: 1em;
     font-size: 1.3em;
     font-weight: bold;
	 letter-spacing: 0.1em;
     font-family: Verdana;
}
.style_r h1 li{
     list-style-image: url("../img/logo2.png")
}

 .style_c{
     background: #675f5d;
     text-align: right;
     color: #ffffff;
}
 .style_c h1{
     margin-top: 35%;
     margin-right: 1em;
     font-size: 1.3em;
     font-weight: bold;
	 letter-spacing: 0.1em;
     font-family: Verdana;
}
.style_c h1 li{
     list-style-image: url("../img/logo2.png")
}

 .style_o{
     background: #d0cbca;
     text-align: right;
     color: #666666;
}
 .style_o h1{
     margin-top: 35%;
     margin-right: 1em;
     font-size: 1.3em;
     font-weight: bold;
	 letter-spacing: 0.1em;
     font-family: Verdana;
}
.style_o h1 li{
     list-style-image: url("../img/logo2.png")
}
 .works_detial {
     width: 90%;
}
 .works_detial a {
     text-align: center;
     text-decoration: none;
     color: #444444;
}
 .works_title2 {
     padding-bottom: 2em;
     padding-top: 2em;
}
 .works_title2 h1 {
     font-size: 1.8em;
     font-weight: bold;
     text-align: left;
     margin-top: 1em;
}
 .works_title2 h2 {
     font-size: 1.3em;
     text-align: left;
     font-family: "Arial";
     padding-bottom: 1em;
     margin-bottom: 1em;
     border-bottom: #E3DFDF 1px solid;
}
 .works_title2 p {
     font-size: 1em;
     color: #9C9B9B;
}
 .works_box2 {
     padding-bottom: 1em;
}
 .works_box2 img {
     width: 100%;
     padding-bottom: 1em;
}
 .works_box3 {
     width: 20%;
     float: right;
}
 .works_box3 ul li img {
     width: 130px;
}
 .content{
     overflow: auto;
     position: relative;
     padding: 10px;
     background-color: #333;
     margin: 20px;
     width: 50%;
     height: auto;
     float: left;
}
 .content li{
     margin: 4px;
     overflow: hidden;
}
 .content li a{
     display: inline-block;
     border: 7px solid rgba(255,255,255,.1);
}
 .content.light, .content.light .mTSButton{
     background-color: #c2beb2;
}
 .content.light li a{
     border: 7px solid rgba(255,255,255,.4);
}
 #content-1, #content-2{
     width: auto;
     height: 600px;
}
 #content-1 ul li:first-child{
     margin-top: 20px;
}
 #content-1 ul li:last-child{
     margin-bottom: 20px;
}
 #content-2{
     padding: 55px 10px;
}
 #content-3 .mTSButton{
     background-color: #333;
}
 #content-5{
     background-color: #444;
}
 #content-6{
     background-color: transparent;
}
 #content-6 .mTSButton{
     background-color: rgba(0,0,0,.7);
     -moz-border-radius: 48px;
     -webkit-border-radius: 48px;
     border-radius: 48px;
}
 #content-6 .mTSButtonLeft{
     left: 5px;
}
 #content-6 .mTSButtonRight{
     right: 5px;
}
 .pager {
     text-align: center;
     font-size: 1.2em;
     padding-top: 3em;
     padding-bottom: 3em;
}
 .pager a {
     color: #555555;
     text-decoration: none;
     padding-left: 0.5em;
     padding-right: 0.5em;
}
 .pager a:link {
     color: #555555;
}
 .pager a:visited {
     color: #555555;
}
 .pager a:hover {
     color: #333333;
}
 .pager a:active {
     color: #555555;
}
/**************實景展示******************/
 .media01_box {
     padding-top: 1.5em;
     width: 90%;
}
 .media01 {
     display: block;
     float: left;
     width: 40%;
     margin-bottom: 1em;
}
 .media01 iframe {
     width: 100%;
     height: 260px;
     border-radius: 15px;
     border-top-right-radius: 15px;
     border-bottom-left-radius: 15px;
}
 .media02 {
     display: block;
     float: right;
     width: 57%;
     overflow: hidden;
     margin-bottom: 1em;
}
 .media02 h1{
     font-size: 1.3em;
     font-weight: bold;
     color: #333333;
}
 .media02 h1 span{
     font-weight:lighter;
     color: #777777;
}
 .media02 p {
     margin-top: 1.5em;
     color: #666666;
     line-height: 28px;
     letter-spacing: 0.1em;
}
/***********************下方影片**************************/
 .media_box {
     margin-top: 0em;
     margin-bottom: 0em;
     background: #000000;
     border-bottom: 0.5em solid #000000;
     border-top: 0.5em solid #000000;
}
 .media_title {
     padding-bottom: 2em;
}
 .media_title h1 {
     color: #333333;
     font-size:1.5em;
     font-weight: bold;
     text-align: center;
}
 .media_title h2 {
     color: #333333;
     font-size:1.5em;
     font-family: Arial;
     text-align: center;
}
 .media_box video {
     width: 100% ;
}
 .media {
     color:#000;
     width: 100%;
     margin: auto;
     position: relative;
}
 .media .hover{
     display:block;
     position:absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
}
 .media button {
     padding-top: 1em;
     padding-bottom: 1em;
     padding-left: 3em;
     padding-right: 3em;
     font-weight: bold;
}
/*************Contact*********************/
 .contact_box {
     padding-top: 1.5em;
     width: 90%;
}
 .contact {
     padding-left: 0.8em;
     padding-bottom: 0.8em;
     color: #DB060A;
}
 .contact01 {
     padding: 0.8em;
}
 .contact01 .form-check-input{
     width: 5em;
     height: 1.2em;
     margin-right: 0.3em;
}
 .contact01 .d-grid{
     margin-top: 0.5em;
}
 .contact01 .d-grid button{
     font-weight: bold;
     letter-spacing: 0.1em;
     font-size: 1.2em;
}
 .map {
     padding-top: 3em;
}
 @media(max-width:1440px){
}
 @media(max-width:1366px){
}
 @media(max-width:1280px){
}
 @media(max-width:1024px){

     .media01_box {
         width: 100%;
    }
}
 @media(max-width: 991px){
 .style_r h1{
         margin-top: 35%;
    }
	 .style_c h1{
         margin-top: 35%;
    }
     .style_o h1{
         margin-top: 35%;
    }
     .works_detial {
         width: 100%;
    }
     .contact_box {
         width: 100%;
    }
     .contact {
         padding: 0.2em;
    }
     .contact01 {
         padding: 0.2em;
    }
}
 @media(max-width:768px){
  
     .style_r h1{
         margin-top: 35%;
    }
	 .style_c h1{
         margin-top: 35%;
    }
     .style_o h1{
         margin-top: 35%;
    }
     .banner img{
         width: 100%;
    }
     .works {
         position: relative;
         width: 100%;
    }
     .hover {
         display:block;
         color: #ffffff;
    }
     .hover2 {
         position:absolute;
         top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
         color: #ffffff;
    }
}
 @media(max-width:640px){
	
     .media01_box {
         padding-top: 1em;
         width: 100%;
    }
     .media01 {
         display: block;
         float: none;
         width: 100%;
         margin-bottom: 1em;
    }
     .media01 iframe {
         width: 100%;
         height: 260px;
         border-radius: 15px;
         border-top-right-radius: 15px;
         border-bottom-left-radius: 15px;
    }
     .media02 {
         display: block;
         float: none;
         width: 95%;
         margin-left: auto;
         margin-right: auto;
         overflow: hidden;
         margin-bottom: 1em;
    }
     .media02 h1{
         font-size: 1.3em;
         font-weight: bold;
         color: #333333;
    }
     .media02 h1 span{
         font-weight:lighter;
         color: #777777;
    }
     .media02 p {
         margin-top: 1.5em;
         color: #666666;
         line-height: 28px;
         letter-spacing: 0.1em;
    }
}
 @media(max-width:480px){
     .style_r h1{
         margin-top: 45%;
	 }
     .style_c h1{
         margin-top: 45%;
    }
     .style_o h1{
         margin-top: 45%;
    }
}
 @media(max-width:320px){
}