section{width: 100%;color:#333;line-height:2em;font-weight:600;margin-bottom: 50px;overflow: hidden;position: relative;}

/*背景圈圈*/
.circle {  width:100%;  position:absolute;  display:flex;  justify-content: center;  align-items: center;  margin: 0 auto;  top:-8%;  left: 50%;  margin-left:-50%;  }
.circle:before {  border-radius: 50%;  width: 100%;  padding-bottom: 100%;  background: -webkit-linear-gradient(top, #1dbac0 50%,#55b6a8 100%);  background: linear-gradient(top, #1dbac0 50%,#55b6a8 100%);  background: -o-linear-gradient(top, #1dbac0 50%,#55b6a8 100%);  background: -mos-linear-gradient(top, #1dbac0 50%,#55b6a8 100%);    content: "";  position: absolute;  z-index: -1;}
.circle span{  width: 85%;  position:absolute;  display:flex;  justify-content: center;  align-items: center;  margin: 0 auto;  top: -50%;  left: 50%;  margin-left:-42.5%;  }
.circle span:before {  border-radius: 50%;  width: 100%;  padding-bottom: 100%;  background-color: #fff;  content: "";  position: absolute;
    z-index: -1;}
.half_circle{width: 400px;  height:400px;  border: 70px solid black;  border-radius:50%;   border-bottom-color: transparent;
  border-right-color: transparent;   transform: rotate(-45deg);border-top-color:#55b6a8;border-left-color:#55b6a8;}
.mask{display: inline-block; width: 250px; height: 700px; overflow: hidden;position:absolute;right:0%;top:170%;}
.mask01{left: 0;top: 270%; transform: rotate(-180deg);}
.mask02{left:0 ;top: 520%; transform: rotate(180deg);z-index: 1;}

/*樣式*/
.box_green{color: #009688;}
.box{display: flex; max-width:1000px; margin: 0 auto;margin-top: 20px;flex-direction:row;justify-content: space-around;padding: 20px;box-sizing: border-box;}
.box_width{max-width:1500px;display:flex; margin: 0 auto;margin-top: 20px;flex-direction:row;justify-content: space-around;padding: 20px;box-sizing: border-box;}
.box strong{display: inline-block; font-size: 2em; font-weight: 600;color:#009688;}
section h2{ font-size: 3.75em;line-height:1.2em;font-weight: bolder;}
section h3{display: block;  font-size:2.5em;width: 100%; line-height:1.2em;margin-bottom:20px;font-weight: bolder;}
section h4{display: block;  font-size:1.8em;width: 100%; line-height:1.2em;margin-top:20px;color: #009688;margin-bottom: 20px;}
section p{font-size: 1.4em;margin-top: 10px;line-height: 1.6em;}

/*CODE*/
.scan{display: block; width: 200px; height: 250px;margin: 0 auto;text-align: center;margin-top:20px;}
.scan p{margin-top: 0;}
.scan img{width:100%;box-shadow: 0px 0px 10px rgba(0,0,0,.2);}

.descrip{margin-top:100px;box-sizing: border-box;width:50%;z-index: 5;}
.descrip a{display:inline-block;margin:15px 10px 0 0;}
.fabric { display:inline-block;position: relative;}
.fabric span{border-radius: 50%;  width:130%;padding-bottom:130%; background: -webkit-linear-gradient(top, #1dbac0 30%,#55b6a8 100%);  background: linear-gradient(top, #1dbac0 30%,#55b6a8 100%);  background: -o-linear-gradient(top, #1dbac0 30%,#55b6a8 100%);  background: -mos-linear-gradient(top, #1dbac0 30%,#55b6a8 100%); position: absolute;z-index: 1; top:13%;left:-10%;z-index: 1;}
.fabric img{width:100%;z-index: 3;position: relative;}
.section02{ flex-wrap: wrap;text-align: center;}
.section02 div{width: 30%;height:auto; margin:20px 15px;border-radius: 30px;box-shadow: 0px 0px 10px rgba(0,0,0,.2);padding: 15px; box-sizing: border-box;text-align: center;background-color: #fff;}
.section02 div img{width: 100%;}
.section02 div p{margin-top: 0;}
.section03 .descrip{ margin-top: 200px;padding:20px; box-sizing: border-box;}
.section04 .fabric{width:100%;}
.section04{margin-left:25%}
.box_width .fabric{ width:100%;}
.box_width .descrip{width:45%;margin-top: 200px;}
.section05{ background-color:#f0f0f0; display:flex;height: 0; padding-bottom:40%;overflow: hidden;position:relative;}
.section05 .fabric{display: inline-block; position:absolute; top: -40%;left:-18%;z-index: 1;}
.section05 .descrip{width: auto;position:absolute; left: 55%;top:20%;z-index: 2;}
footer{z-index: 5;position: relative;}

@media screen and (max-width:1680px) and (min-width:1367px) {
    .fabric span{ width:110%;padding-bottom:110%;  top:10%;left:-5%;}
    .section05 .fabric{left:-30%;}
   
}  
@media screen and (max-width:1366px)  and (min-width:1281px) {
    .fabric span{ width:100%;padding-bottom:100%;top:3%;left:-0%;}
    .section04{margin-left:5%}
    .section04 .descrip{width:55%;}
    .section05 .fabric{left:-50%;}
    .section05 .descrip{top:12%;}
} 

@media screen and (max-width:1280px) and (min-width:320px){    
    .circle {top:5%;}
    .fabric span{display: none;}
    .section04{margin-left:0%}
    .section04 .descrip{width:55%;}
    .section05 .fabric{left:-50%;}
    .section05 .descrip{top:10%;}
}

@media screen and (max-width:1024px)  and (min-width:900px){
    .mask02{display: none;}
    .section04{margin-left:5%}
    .section04 .descrip{margin-top:10%;width:80%;}
    .section05 .fabric{left:-75%;}
    .section05 .descrip{top:0%;}
}

@media screen and (max-width:899px)  and (min-width:641px){
    .box , .box_width{flex-flow: column;}
    .mask02{display: none;}
    .descrip{width:80%;text-align: center; margin: 0 auto;}
    .section02{flex-direction:row;flex-wrap: wrap;}
    .section02 div{width:40%;}
    .section03 .descrip{ margin-top: 20px;}
    .section04 .descrip{margin-top: 0;width:80%;}  
    .section05{padding-bottom:50%;}
    .section05 .fabric{left:-35%;top:-20%; }
    .section05 .fabric img{width:60%; }
    .section05 .descrip{top:20%;left:42%;}
}

@media screen and (max-width:640px)  and (min-width:375px){
    .box , .box_width{flex-flow: column;}
    .mask02{display: none;}
    section h2{ font-size:2em;}
    section h3{ font-size:1.7em;}
    section h4{font-size:1.2em;}
    section p{font-size: 1.2em;}
    .descrip{width:100%;text-align: center; margin: 0 auto;}
    .section02{flex-direction:row;flex-wrap: wrap;}
    .section02 div{width:70%;}
    .section03 .descrip{ margin-top: 20px;}
    .section04 .descrip{margin-top: 0;width:100%;}  
    .section05{padding-bottom:80%;}
    .section05 .fabric{left:-80%;top:-10%; }
    .section05 .fabric img{width:70%; }
    .section05 .descrip{width: 60%; top:15%;left:36%;}
    
}

@media screen and (max-width:370px)  and (min-width:320px){
    .box , .box_width{flex-flow: column;}
    .mask02{display: none;}
    section h2{ font-size:2em;}
    section h3{ font-size:1.7em;}
    section h4{font-size:1em;}
    section p{font-size: 1em;}
    .descrip{width:100%;text-align: center; margin: 0 auto;}
    .section02{flex-direction:row;flex-wrap: wrap;}
    .section02 div{width:70%;}
    .section03 .descrip{ margin-top: 20px;}
    .section04 .descrip{margin-top: 0;width:100%;}  
    .section05{padding-bottom:80%;}
    .section05 .fabric{left:-80%;top:-10%; }
    .section05 .fabric img{width:70%; }
    .section05 .descrip{width: 60%; top:15%;left:36%;}
    
}
/* 分享元件 begin */
.fb_share { position:absolute; right: calc(50% - 650px); top: 1.2em; z-index:6; }
.fb_base { float: left; display: inline-block; }
.line_base { float: left; display: inline-block; }
@media screen and (max-width:660px) {
    .fb_share { display:none; }
}
/* 分享元件 end */