body,
* {
	margin: 0;
	padding: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	font-family: "Spartan", "Noto Sans TC", sans-serif;
	font-weight: 100
}

body{
  overflow-x: hidden;
  overflow-y: visible;
  width:100vw;
  font-size: 14px;
  height: 100%;


}

h1{
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -2;
}

h2{
  font-size:20px;
  letter-spacing: 11;
  font-style: italic;
}

h3{
  font-size:16px;
  font-weight: 100;
  text-align: justify;
}

#topbar{
    display: flex;
    background: #337463;
    letter-spacing: 1;
    font-weight: 700;
    width:100vw;
    height: 9vh;
    min-height: 70px;
    min-width: 800px;
}

#topbar .topBarHead{
	display: flex;flex-shrink: 0;align-items: center;justify-content: center;
}

#topbar div {
	/* width: 29%; */
	/*height: 100% */
}

#logo_t{
  background-image: url(https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/logo_pc.png);
  background-position: 50px 15px;
  background-repeat: no-repeat;
  background-size: auto auto px;
  width: 120px;
  height: 87px;
  /* margin-top: -5px */

}

#logo {
	display: flex;
	justify-content: center;
	align-items: center;
	/* width: 100%;
	height: 100%; */
	color: #e3e3e3;
	cursor: pointer;
	/* margin-top: 3px */
}

  #logo p{
    font-size: 1.3em;
    font-weight:300;
  }

#logo p:hover{
  color:#89ffe0;
  transition: 0.5s;
}


#menu{
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  color:#e3e3e3;
  text-transform: uppercase;
  width: 40vw;
  padding-left: 180 vw;
}

#menu li{
    list-style: none;
    display: inline-block;
      font-size: 1.2em;
      float: left;
}

#menu a, a:visited{
  color: #e3e3e3;
  text-decoration: none;
  padding:20px 20px;

}

#menu a:hover {
  cursor: pointer;
  color:#aaaaaa;
  transition: 0.2s;
}

#contact_number_out{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: AUTO;
}
#contact_number{
  height: 20px;
  color: #e3e3e3;
  font-size: 1.2em;
  width: 18vw;
  text-align: right;
  margin-top: 3px;
}




#header_mv video {
  overflow: hidden;

  display: inline-block;
  float: left;
  object-fit: cover;
  width: 100vw;
  height: 85vh;
}

.mv-text{
  overflow: hidden;

    display: block;
    position: relative;
    top: -35vh;
    height: 35vh;
    width: 100vw;

    background-color: rgba(0,0,0,0);

    color: #e3e3e3;
    font-size: 2em;
    opacity: 0.2;
    cursor: pointer;
    margin-bottom: -35vh;
    overflow: hidden;
}
.mv-text p{
  overflow: hidden;


  width: 100%;
  height: 100%;
  text-align: center;


  /* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

.mv-text:hover{
  overflow: hidden;


    background: linear-gradient(0deg, rgba(255,255,255,0 ),rgba(255,255,255,0.2), rgba(255,255,255,0));
    transition: 0.8s;
    opacity: .7;
}

.mv_filter{
  display: flex;
  position: absolute;
  top:10vh;
  height: 85vh;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,1));
  opacity: 0.1;
  width: 100vw;
}
.content_wrap{
  overflow: hidden;

  display: inline-block;

  height: 60vh;
  width: 100vw;

}

.colorset-1 {
	overflow: hidden;
	display: inline-block;
	float: left;
	background: #337463;
	background: radial-gradient(circle, rgba(51, 116, 99, 1) 0, rgba(28, 40, 30, 1) 100%);
	padding-top: 40vh
}

.colorset-1 p{
  overflow: hidden;

  display: inline-flex;
  font-size: 14px;
  color: #e3e3e3;
  text-align: center;
  width: 100vw;
  letter-spacing: 2px;
  font-weight: 700;
  font-size:3em;
  font-weight: 700;
  width: 60vw;
  padding-left: 20vw;
  display: inline-block;
  text-align: center;
  letter-spacing: 3;
}
.colorset-1 span{
  overflow: hidden;

  font-size:.66em;
  letter-spacing: 0;
  padding-top: 20px;
  display: inline-block;

}

#showcase{
  display: inline-block;
  width: 100vw;
  height: 80vh;
  background: black;
  transition: 1s;
  margin: auto;
}

#showcasevideo{
  display: inline-block;
  object-fit: cover;
  width: 100vw;
  height: 80vh;
  filter: opacity(1);

}

#showcasevideo:hover{
  display: inline-block;
  object-fit: cover;
  width: 100vw;
  height: 80vh;
  filter: opacity(1);
  transition: 1s;

}

#caselogo{
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: auto;
  margin-bottom: -100px;
  top:-200px;
  text-align: center;
  font-size: 21px;
}

.showcaselogo{
   display: inline-block;
   width: 150px;
   height:150px;
   line-height: 150px;
   margin: 5px;
   text-align: center;
   vertical-align: middle;
   color: white;
   font-weight: bold;
   position: relative;
}

.showcaselogo:hover{
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
}


.showcasevideohighlight{
  filter: opacity(1);
  transition: 1s;
}

#readmore{
    width: 100vw;
    font-size: 2em;
    padding-top: 5vw;
    padding-bottom: 5vw;
}


.readmore-title{
  width: 100vw;
  height: 10vh;
  color:#6a786a;
  letter-spacing: 1;
  text-align: center;
  
}

.readmore-title p{
  font-weight: bold;
    color:#337463;
}

.readmore-title a{color:#337463;text-decoration:none;font-weight: bold;}

.readmoe-title a:hover{text-decoration:underline;color:#6a786a}




#customerlist{
    width: 100vw;
    font-size: 2em;
    padding-top: 5vw;
    padding-bottom: 5vw;
    
}

.customerlist-title{
  width: 100vw;
  height: 10vh;
  color:#6a786a;
  letter-spacing: 1;
  text-align: center;
  
}

.customerlist-title p{
  font-weight: bold;
    color:#337463;
}


.customerlist-logo{
margin:auto;
width: 94vw;
}



.customerlist-logo img{
  overflow: hidden;
  width: 140px;height:140px;
    object-fit: contain;
  margin: 1vw;
  border:1px solid white;
}

.customerlist-logo img:hover{

  /* filter:  grayscale(1); */
  transition-duration:0.5s;
  border:1px solid gray;

}

.teamstory-block{
  height: 80vh;
  width: 100vw;
  display: inline-block;
}

#header_story{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/header_story_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: fill;
  object-position: bottom;
}

#story-box{
  border-width: 0px;
  border-top: 3px;
  border-bottom: 3px;
  border-color: #e3e3e3;
  border-style: solid;

  margin-left:35vw;
  height: 150px;
  width:250px;
  text-align: center;
  opacity: .6;
  vertical-align: middle;
  margin-top:20vh;

}

#story-box:hover{
  opacity: .9;
  transition: 2s;
}


#story-box span{
  color: #e3e3e3;
  font-size: 3em;
  line-height: 50px;
  padding-top: 25px;
  padding-bottom:25px;
  display: inline-block;
}


#latest_news_cover{
    background: linear-gradient(180deg, rgba(0,0,0),rgba(51,116,99));
    color:#e3e3e3;
    padding-top: 30vh;
    height: 50vh;
}

#story-block-2{
    background: linear-gradient(180deg, rgba(0,0,0),rgba(51,116,99));
    color:#e3e3e3;
    padding-top: 30vh;
    height: 50vh;
}

#story-block-2 .story-block-left{
  text-align: right;
  letter-spacing: 20;
  font-weight: 700;
}

#story-block-2 .story-block-left h1{
  font-size:5em;
  letter-spacing: 8;
  line-height: 2em;
}

#story-block-2-desc{
  width: 35vw;
  display: inline-block;
  float: right;
  padding-right:5vw;
font-weight: 100;
}

#story-block-3{

}

#story-block-3 div{

}
#story-block-3 .img3{
  display: inline-block;
  width: 100%;
  height: 40vw;
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-3-img3.jpg");
  background-repeat: no-repeat;
  background-position: 35% 50%;
  background-size:cover;
  filter: grayscale(50%);
}

#story-block-3{
  margin-bottom: 2vw;
  display: flex;
}

#story-block-3 .desc{
  width: 28vw;
  margin-right: 5vw;
  float: left;

}

#story-block-3 .story-of-year{
  margin-bottom: 4vw;
    display: flex;



}


#story-block-3 .img2{
  float: left;
  width: 18vw;
  height: 18vw;
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-3-img2.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size:cover;
  filter: grayscale(50%);

}

#story-block-3 .img1{
    float: left;
  width: 18vw;
  height: 18vw;
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-3-img1.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size:cover;
  filter: grayscale(50%);
}


.teamstory-block{
  padding-top:5vw;
  padding-left: 5vw;
  padding-right:5vw;
  display: flex;
}

.story-block-left{
  display: inline-block;
  height: 100%;
  margin-right: 5vw;
  float: left;


}

.story-block-right{
    display: inline-block;
    height: 100%;
    float: left;
}

.sixty{
  width:51vw;
}

.forty{
  width:34vw;

}

#story-block-4{
  display: inline-block;
  background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-4-img1.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

#story-block-4  .story-block-left{
  float: left;
}
#story-block-4  h1{
  margin-top:20vh;
}

#story-block-4  .story-block-right{
  float: left;
}

#story-block-4 div{
  color: #e3e3e3;

}

#story-block-5 .img2{
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-5-img2.jpg");
  background-repeat: no-repeat;
  background-position: 35% 50%;
  background-size:cover;
  filter: grayscale(50%);
}


#story-block-5 .desc{
  display: inline-block;
  width: 100%;
  height: 54%;

}
#story-block-5 .img1{
  display: inline-block;
  width: 100%;
  height: 46%;
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-5-img1.jpg");
  background-repeat: no-repeat;
  background-position: 35% 75%;
  background-size:cover;
  filter: grayscale(50%);
}


#story-block-6 {
}

#story-block-6 .desc{
  display: inline-block;
  width: 90vw;
  height: 40%;
  text-align: center;


}

#story-block-6 .img1{
  display: inline-block;
  width: 90vw;
  height: 60%;
  background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-6-img1.jpg");
  background-repeat: no-repeat;
  background-position: 35% 55%;
  background-size:cover;
}


#story-block-7 {
  margin-bottom: 5vw;
}

#story-block-7 .desc{
  display: inline-block;
  width: 90vw;
  height: 40%;
  text-align: center;


}

#story-block-7 .img1{
  display: inline-block;
  width: 90vw;
  height: 60%;
  background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-7-img1.jpg");
  background-repeat: no-repeat;
  background-position: 35% 25%;
  background-size:cover;
}

#story-block-8 {
    height : 70vh;
    padding-top : 0.5vh
}

#story-block-8 .desc{
  width: 45vw;
  margin-right: 5vw;
  float: left;
  text-align: left;
  margin-top:20vh;

}


#story-block-8 .img1{
  display: block;
  width: 45vw;
  height: 61vh;
  margin-left:50vw;
  background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block7-layer-01-bg.jpg");
  background-repeat: no-repeat;
  background-size:contain;
}

#story-block-9{
  display: block;
  background-image: linear-gradient(rgba(0, 0, 0, 0.227),rgba(0, 0, 0, 0.5)), url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block8-layer-01-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

#story-block-9  .story-block-left{
  float: left;
}
#story-block-9  h1{
  margin-top:20vh;
}

#story-block-9  .story-block-right{
  float: left;
}

#story-block-9 div{
  color: #e3e3e3;
  width : 50vh;
  height : 61vh;
  float: right;
  margin-right: 10vh;

}

#story-block-10 {
    height : 65vh;
    padding-top : 2 vh
}

#story-block-10 .desc{
  width: 45vw;
  margin-right: 5vw;
  float: left;
  text-align: left;
  margin-top:15vh;

}


#story-block-10 .img1{
  display: block;
  width: 45vw;
  height: 61vh;
  margin-left:50vw;
  background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block10-layer-01-bg.jpg");
  background-repeat: no-repeat;
  background-size:contain;
}

#story-block-11 {
}

#story-block-11 .desc{
  display: inline-block;
  width: 90vw;
  height: 30%;
  text-align: center;


}

#story-block-11 .img1{
  display: inline-block;
  width: 90vw;
  height: 60%;
  background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block11-layer-01-bg.jpg");
  background-repeat: no-repeat;
  background-position: 35% 55%;
  background-size:cover;
}

#story-block-12 {
    height : 70vh;
    padding-top : 1vh
}

#story-block-12 .desc{
  width: 45vw;
  margin-right: 5vw;
  float: left;
  text-align: left;
  margin-top:20vh;

}


#story-block-12 .img1{
  display: block;
  width: 45vw;
  height: 61vh;
  margin-left:50vw;
  background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block12-layer-01-bg.jpg");
  background-repeat: no-repeat;
  background-size:contain;
}

#story-block-13{
  display: block;
  background-image: linear-gradient(rgba(0, 0, 0, 0.227),rgba(0, 0, 0, 0.5)), url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block13-layer-01-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

#story-block-13  .story-block-left{
  float: left;
}
#story-block-13  h1{
  margin-top:20vh;
}

#story-block-13  .story-block-right{
  float: left;
}

#story-block-13 div{
  color: #e3e3e3;
  width : 50vh;
  height : 61vh;
  float: Left;
  margin-right: 5vh;

}

.story-block-left h1, .story-block-right h1, .story-of-year h1{
  font-weight: 300 !important;
}

#story-block-2 h1{
  font-weight: 700 !important;
}

#story-box span{
  font-weight: 300!important;
}


.detail-block-common-style{
  width: 100vw;
  height: 100vh;
  display: block;
  background: black;
  color: #89ffe0;
  font-family: "Noto Sans TC";
  font-weight: thin;

}

.detail-block-common-style .title{

  font-size: 24pt;
  font-weight: bold;

}

.detail-block-common-style  .sub-title{
  font-size: 18pt;

}

.detail-block-common-style .paragraph{
  font-size: 12pt;
  color: white;

}


.detail-block-common-style  .layer-01{
  width:100vw;
  height:100vh;
  display: block;
  position: relative;
  z-index: 1;
  background-color: black;

  background-size:  cover;
  background-repeat: no-repeat;
}

.detail-block-common-style   .layer-02{
  width: 50vw;
  left: 25vw;
  height: 35vh;
  display:  block;
  position:  relative;
  top:-80vh;
  z-index: 10;
  background-color: none;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

.detail-block-common-style   .layer-03{
  width: 50vw;
  left: 10vw;
  height: 35vh;
  display:  block;
  position:  relative;
  top:-90vh;
  z-index: 5;
  background-color: #337463;
  text-align: center;
}


#detail-block-01 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block1-layer-01-bg.jpg");
}

#detail-block-01 .layer-02{

}

#detail-block-02 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block2-layer-01-bg.jpg");
  background-position: 50% 45%;
}

#detail-block-02 .layer-02{
  text-align: left;
  left: 10vw;
  top:-60vh;

}

#detail-block-02 .layer-03{
  width: 45vw;
  height: 35vh;
  left:9vw;
  top: -40vh;
  opacity: 0.8;



}

#detail-block-03 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block3-layer-01-bg.jpg");
  background-size: 55vw auto;
  background-size: cover;
  width:55vw;
  height: 70vh;
  left:10vw;
  top:-65vh;
  z-index: 5;
}

#detail-block-03 .layer-02{
  text-align: left;
  left: 65vw;
  width: 25vw;
  top:-120vh;
  text-align: right;
}

#detail-block-03 .layer-03{
  width: 15vw;
  height: 80vh;
  left: 5vw;
  top: 10vh;
   position:  relative;
  z-index: 2;



}

#detail-block-04 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block4-layer-01-bg.jpg");
  background-position: right bottom;
  background-size: cover;
  width:45vw;
  height: 60vh;
  left:40vw;
  top:-55vh;
  z-index: 5;
}

#detail-block-04 .layer-02{
  text-align: left;
  left: 10vw;
  width: 25vw;
  top:-90vh;
  text-align: left;
}

#detail-block-04 .layer-03{
  width: 15vw;
  height: 80vh;
  left: 75vw;
  top: 10vh;
   position:  relative;
  z-index: 2;


}


#detail-block-05 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block5-layer-01-bg.jpg");
  background-position: 50% 50%;
  width:45vw;
  height: 100vh;
  left:0vw;
  top:0;
  opacity: 0.5;
  z-index: 1;
}

#detail-block-05 .layer-02{
  text-align: left;
  left: 65vw;
  width: 25vw;
  top:-50vh;
  text-align: left;
}

#detail-block-05 .layer-03{
  width: 15vw;
  height: 100vh;
  left: 75vw;
  top: 10vh;
   position:  relative;
  z-index: 2;


}

#detail-block-06 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block6-layer-01-bg.jpg");
  background-size: 70% auto;
  background-position: right;
  width:65vw;
  height: 100vh;
  left:35vw;
  top:0;
  z-index: 1;
}

#detail-block-06 .layer-02{
  text-align: left;
  left: 15vw;
  width: 25vw;
  top:-135vh;
  text-align: left;
}

#detail-block-06 .layer-03{
  width: 15vw;
  height: 80vh;
  left: 10vw;
  top: -100vh;
   position:  relative;
  z-index: 2;


}

#detail-block-07 .layer-01{
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block7-layer-01-bg.jpg");
  background-size: contain;
  background-position: right;
  width:65vw;
  height: 80vh;
  left:25vw;
  top:10vh;
  z-index: 1;
}

#detail-block-07 .layer-02{
  text-align: left;
  left: 15vw;
  width: 25vw;
  top:-150vh;
  text-align: left;
}

#detail-block-07 .layer-03{
  width: 90vw;
  height: 90vh;
  left: 5vw;
  top: -75vh;
   position:  relative;
  z-index: 0;


}
#detail-block-logo{
  height: 152px;
  display: block;
  /* background: black; */
}
#detail-block-logo div{
  height: 100%;
  background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/中國建築LOGO-ai.png");
  background-size: contain;
}

#footer{
  overflow: hidden;
  background-color: #337463;
  height: 22vh;
  width: 100vw;
  padding-top: 10vh;
  padding-bottom: 12vh;

}
#footer p{
  text-align: center;
  letter-spacing: 1;
  color: #e3e3e3;
  vertical-align: middle;
}

#footer a,  #topbar a{
  text-decoration: none;
  color: #e3e3e3;
  margin-top: 3px;
}
#footer_mb{
  display: none;
}