*{
  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: scroll;
    width: 100vw;
    font-size: 14px;
    height: 100%;



  }

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

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

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

#topbar {
	background: #337463;
	letter-spacing: 1;
	font-weight: 700;
	font-size: 18px;
	width: 100%;
	height: 65px;
	display: flex
}
#topbar .topBarHead{
	display: flex;flex-shrink: 0;
}


  #logo{
    position: absolute;
    background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/logo_pc.png");
    background-repeat: no-repeat;
    background-size: 45px;
    background-position: 10px 12px;
    width: 85px;
    height:90px;
    color: #e3e3e3;
    cursor: pointer;

    }

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

  #logo p{
    position: absolute;
    font-size: 16px;
    font-weight:700;
    letter-spacing: 3;
    top:27px;
    left:20vw;
    width: 245px;
  }



.topnav a, .topnav a:visited{
  color: white;
  text-decoration: none;
}

  #menu{
    z-index: 10;
  }

    .topnav a:not(:last-child){
      display: none;
    }

    #topbar .icon{
      position: absolute;
      top:18px;
      right:2vw;
      width: 35px;
      height: 35px;
      background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/menu-icon.png");
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
    }


    .topnav.responsive {
      position: absolute;
      color:#e3e3e3;
      padding-top:2vh;
      padding-bottom:2vh;
      text-transform: uppercase;
      background: #1c281e;
      top: 8vh;
      transition: 1s;
      display: block;
      margin-bottom: -10vh;
      height: 15vh;
    }

    #topbar.responsive .icon {
      position: relative;
      top: -17vh;
    }

    .topnav.responsive a {
      width: 100vw;
      text-align: center;
      float: none;
      display: inline-block;
      padding-top: 2vh;
      position: relative;

    }


  #contact_number{
    display: none;
  }


#header_mv{
    height: 75vh;
    overflow: hidden;
}

  #header_mv video {
    overflow: hidden;

    display: inline-block;
    object-fit: cover;
    width: 100vw;
    height: 75vh;
  }

  .mv-text{
    overflow: hidden;

      display: block;
      position: relative;
      top: -25vh;
      height: 25vh;
      width: 100vw;
        background: linear-gradient(0deg, rgba(255,255,255,0 ),rgba(255,255,255,0.2), rgba(255,255,255,0));

      color: #e3e3e3;
      font-size: 14px;
      cursor: pointer;
      margin-bottom: -25vh;
      overflow: hidden;
      opacity: .5;

  }
  .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_filter{
    display: flex;
    position: absolute;
    top:15vh;
    height: 75vh;
    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: 75vh;
    width: 100vw;


  }

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

  .colorset-1 p{
    overflow: hidden;
    display: inline-flex;
    font-size: 20px;
    color: #e3e3e3;
    text-align: center;
    width: 100vw;
    letter-spacing: 2px;
    font-weight: 700;
    width: 60vw;
    padding-left: 20vw;
    display: inline-block;
    text-align: center;
    letter-spacing: -1;
  }
  .colorset-1 span{
    overflow: hidden;
    font-size:12px;
    letter-spacing: 0;
    padding-top: 20px;
    display: inline-block;
    font-style: italic;
    letter-spacing: 10;
  }

  #showcase{

    display: inline-block;
    float: left;
    width: 100vw;
    margin: 0;
    background: black;
    animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;

  }

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

  }

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

  } */

  #caselogo{
    overflow: hidden;
    position: relative;
    display: block;
    width: 100vw;margin: 0;
    background:#337463;
    padding-top:12px;
    padding-bottom:12px;
   }

  .showcaselogo{
    display: block;
    width: 100vw;
     height:5vh;
     line-height: 5vh ;
     text-align: center;
     vertical-align: middle;
     position: relative;
     color: white;
  }
  .showcaselogo span{
    font-weight: 900;
  }

  .showcaselogo:hover{

    opacity: 0.5;
    cursor:pointer;
    transition: .5s;
    background-color: rgba(0, 0, 0, 0.1);
  }

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

  #customerlist{
    display: inline-block;
    float: left;
      min-height: 15vh;
      width: 100vw;
      padding-bottom: 5vh;
  }

  #customerlist .customerlist-title{
    display: inline-block;
    width: 100vw;
    color:#6a786a;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
    font-weight: 300;
  }
.customerlist-title p{
      color:#6a786a;
font-weight: bold;
}

  .customerlist-logo{
    padding-left: 2vw;
    padding-right: 2vw;
    margin: auto;

  }
  .customerlist-logo img{
    overflow: hidden;
    width: 25vw;
    height:10vh;
    object-fit: contain;
    margin:2vw;
    }

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


.readmore-title{
  width: 100vw;
  height: -2vh;
  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}

  .teamstory-block{
    /* height: 85vh; */
    display: inline-block;
  }

  #header_story{
    overflow: hidden;
    background-image: url(https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/header_story_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    object-fit: cover;
    background-color: black;
    height: 50vh;
  }

  #story-box{
    border-width: 0px;
    border-top: 2px;
    border-bottom: 2px;
    border-color: #e3e3e3;
    border-style: solid;
    margin:auto;
    width:25vw;
    text-align: center;
    opacity: .6;
    margin-top:5vh;

  }

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


  #story-box span{
    color: #e3e3e3;
    font-size: 1.4em;
    padding-top: 2vh;
    padding-bottom:2vh;
    display: inline-block;
  }

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

  #story-block-2 .story-block-left{
    letter-spacing: 20;
    font-weight: 700;
    width: 15vw;
    padding-left: 0;
    color: #337463;
    word-wrap:break-word;

  }

  #story-block-2 .story-block-left h1{

    margin-left: -6vw;
    font-size:5em;
    text-align: left;
    color: #337463;
    margin-top:-15vh;
    opacity: .8;


  }

  #story-block-2 .story-block-right{
    width: 50vw;
    padding-left: 15vw;
    display: inline-block;
    float: right;
    font-weight: 100;
    font-size:1em;
  }

  #story-block-right  h1{

  font-size:10;
  }



  #story-block-3 .img3{

    width: 92vw;
    height: 35vh;
    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: 4vw;
    display: inline-block;
    width: 88vw;
    /* height: 75vh; */

  }

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

  }

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

  }


  #story-block-3 .img2{
    float: right;
    width: 35vw;
    height: 35vw;
    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: right;
      width: 35vw;
      height: 35vw;
    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%);
  }

  #story-block-3 .sixty{
    width: 92vw;
    float: left;
    height: auto;
  }
  #story-block-3 .forty{
    width: 92vw!important;
    float: left;
    background: blue;
    height: auto;
  }

  #story-block-3 .story-block-left{
    margin: 0!important;
  }


  #story-block-3 .story-block-right{

  }


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

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


  }

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

  .sixty{
    width:53vw;
  }

  .forty{
    width:35vw;

  }

  #story-block-4{
    display:flex;
    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;
    height: 85vh;
  }

#story-block-4   .teamstory-block{
padding: 0!important;
margin: 0;

}
  #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{
    height: 85vh;
  }

  #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 br{
  line-height: 0.8em;
}
  #story-block-5 .desc{
    display: inline-inline-block;
    width: 100%;
    height: 55vh;

  }
  #story-block-5 .img1{
    display: inline-block;
    width: 53vw;
    height: 30vh;
    position: relative;
    bottom: 0;
    background-image: url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/story-block-5-img1.jpg");
    background-repeat: no-repeat;
    background-position: 55% 50%;
    background-size:cover;
    filter: grayscale(50%);
  }


  #story-block-6 {
    /* height: 85vh; */
  }

  #story-block-6 .desc{
    display: inline-block;
    width: 90vw;
    text-align: center;
    margin-top:5vh;
    margin-bottom: 3vh;
    /* height: 35vh; */

  }

  #story-block-6 .img1{
    display: inline-block;
    width: 90vw;
    height: 45vh;
    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: 4vw;
    height: 85vh; */
  }

  #story-block-7 .desc{
    display: inline-block;
    width: 90vw;
    text-align: center;
    /* height: 40vh; */
    margin-bottom: 3vh;

  }

  #story-block-7 .img1{
    display: inline-block;
    width: 90vw;
    height: 45vh;
    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 {
    margin-bottom: 3vw;
    /* height: 70vh; */
  }

  #story-block-8 .desc{
    width: 90vw;
    /* height: 28vh; */
    text-align: center;
    display: inline-block;
    margin-bottom: 3vh;
    margin-right: 8vw;
  }

  #story-block-8 .img1{
    float:left;
    display: inline-block;
    width: 92vw;
    height: 68vw;

    background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block7-layer-01-bg.jpg");
    background-repeat: no-repeat;

    background-size:cover;


  }


 #story-block-9{
    display:flex;
    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;
    height: 75vh;
  }

#story-block-9   .teamstory-block{
padding: 0!important;
margin: 0;

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

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

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

  }

  #story-block-10 {
    margin-bottom: 3vw;
    /* height: 70vh; */
  }

  #story-block-10 .desc{
    width: 90vw;
    /* height: 28vh; */
    text-align: center;
    display: inline-block;
    margin-bottom: 3vh;
    margin-right: 8vw;
  }

  #story-block-10 .img1{
    float:left;
    display: inline-block;
    width: 92vw;
    height: 68vw;

    background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block10-layer-01-bg.jpg");
    background-repeat: no-repeat;

    background-size:cover;


  }

  #story-block-11 {
    margin-bottom: 3vw;
    /* height: 70vh; */
  }

  #story-block-11 .desc{
    width: 90vw;
    /* height: 28vh; */
    text-align: center;
    display: inline-block;
    margin-bottom: 1vh;
    margin-right: 8vw;
  }

  #story-block-11 .img1{
    float:left;
    display: inline-block;
    width: 92vw;
    height: 40vw;

    background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block11-layer-01-bg.jpg");
    background-repeat: no-repeat;

    background-size:cover;


  }
  
    #story-block-12 {
    margin-bottom: 3vw;
    /* height: 70vh; */
  }

  #story-block-12 .desc{
    width: 90vw;
    /* height: 28vh; */
    text-align: center;
    display: inline-block;
    margin-bottom: 1vh;
    margin-right: 8vw;
  }

  #story-block-12 .img1{
    float:left;
    display: inline-block;
    width: 92vw;
    height: 45vw;

    background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block12-layer-01-bg.jpg");
    background-repeat: no-repeat;

    background-size:cover;


  }
  
      #story-block-13 {
    margin-bottom: 3vw;
    /* height: 70vh; */
  }

  #story-block-13 .desc{
    width: 90vw;
    /* height: 28vh; */
    text-align: center;
    display: inline-block;
    margin-bottom: 1vh;
    margin-right: 8vw;
  }

  #story-block-13 .img1{
    float:left;
    display: inline-block;
    width: 92vw;
    height: 45vw;

    background-image:url("https://cmpsmacau.oss-cn-hongkong.aliyuncs.com/images/detail-block13-layer-01-bg.jpg");
    background-repeat: no-repeat;

    background-size:cover;


  }
  .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: 20pt;

    font-weight: bold;

  }

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

  }

  .detail-block-common-style .paragraph{
    font-size: 10pt;
    color: white;
    text-align: justify;
  }


  .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: 55vw;
    left: 25vw;
    height: 35vh;
    display:  block;
    position:  relative;
    top:-80vh;
    z-index: 10;
    background-color: none;
    text-align: justify;
  }

  .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");
    background-position: right bottom;
  }

  #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-size: auto 100%;  /* 高度填滿，寬度自動 */
    background-position: 50% 50%; /* 從圖片50%位置開始顯示（即正中間） */
    background-repeat: no-repeat;
    width: 100vw;
  }

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

  }

  #detail-block-02 .layer-03{
    width: 56vw;
    height: 23vh;
    left: 4;
    top: -30vh;
    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: justify;
    left: 60vw;
    width: 32vw;
    top:-120vh;
  }

  #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;
    object-fit:  scale-down;
    width:75vw;
    height: 45vh;
    left:20vw;
    top:-75vh;
    z-index: 5;
  }

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

  #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: center;
    width:100vw;
    height: 100vh;
    left:0vw;
    top:0;
    z-index: 1;
    opacity: 0.5;
  }

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

  #detail-block-05 .layer-03{
    width: 15vw;
    height: 80vh;
    left: 75vw;
    top: 65vh;
     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-position: center;
    object-fit: contain;
    width:100vw;
    height: 60vh;
    top:30vh;
    z-index: 1;
  }

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

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


  }

  #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: 166px;
    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;
    width: 92vw;
    padding-top: 10vh;
    padding-bottom: 10vh;
    display: inline-block;

    padding-left: 4vw;
    padding-right: 4vw;


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

  }
  #footer a{
    text-decoration: none;
    color:#e3e3e3;
    word-wrap: break-word;
  }
  #footer_pc{
    display: none;
  }