html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body {    
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif,"Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
    background-color: #FFFFFF;
    color: #151515;
    align-items: center;
    line-height: 1.8;
    align-content: center;  
}
div {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;      
}
.text-12 {
    font-size: 12pt;
}
.text-14 {
    font-size: 14pt;
}
.text-16 {
    font-size: 16pt;
}
.text-20 {
    font-size: 20pt;
}
.text-24 {
    font-size: 24pt;
}
.text-28 {
    font-size: 28pt;
}
.mx-margin-top {
    margin-top: 100px;
}
.mx-page {
    width: 100%;
    display: flex;
    justify-content: center;
}
.mx-content-box {
    width: 80%;
}
.mx-content-head {    
    display: block;
    text-align: center;
}
.mx-content-text {    
    display: block; 
    text-align: justify;
}
.mx-bg-gray {
    background-color: #181717;
    color: #ffffff;
}
.mx-bg-white {
    background-color: #FFFFFF;
    color: #181717;
}
.fixed-top {
    display: flex;
    position: sticky;
    z-index: 9999;
}
.logo {
    width: 240px;
}
.dark-header {
    height: 140px;
    width: 100%;
    background-color: #222222;  
    padding: 2px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    box-sizing: border-box; /* 確保 padding 不會撐大寬度 */
    overflow: hidden;
}
.header-left {
    width: 40%;
    padding: 10px;
    display: flex;
    justify-content: center;
}
.header-right {
    height: 100%;
    width: 60%;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items:flex-end;
}
.main-content {    
    width: 100%;
    padding: 10px;   
    background-color: #0f2238;
    margin-top: 140px;
    display: flex;
    justify-items: center;
}
.yt-section {
    width: 40%;    
    color: #FFFFFF;
    font-size: large;
    display: flex;
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
}
.yt-section div {
    width: 100%;
    height: 200px;
    border: darkorange 1px solid;
    margin-top: 20px;    
}

.dark-footer {
    background-color: #333333;
    width: 100%;
    justify-items: center;
}
.footer-block {
    width: 100%;    
    justify-items: center;
}
.footer-section {
    display: flex;
    flex-direction: row;    
    width: 80%; 
}
.section-box {    
    width: 30%;
    height: 20em;
    float: left;
    padding: 10px;
    color: #FFFFFF;
}
.section-box2 {    
    width: 40%;
    height: 20em;
    float: left;
    padding: 10px;
    color: #FFFFFF;
}
.section-title {
    font-size: 1.5em;
    border-bottom: #FFFFFF 1px solid;
}
.dark-copyrights {
    width: 80%; 
    height: 4em;
    margin-top: 0;
    justify-content: center;
    text-align: center;
    border-top: #FFFFFF 1px solid;
}
.top-block {
  padding: 25px;
}
.w3-bar .w3-button {
  padding: 8px;
}
.left-padding-20 {
  padding-left: 20px;
}
.dark-green {
    background-color: rgb(21, 136, 21);
}
.link-text {
    color: rgb(236, 235, 235);
    padding-left: 10px;
}
.white-text {
    color: white;
}
.menu-text {
    color: #ffffff;
}
.lightgray-text {
    color: rgb(228, 228, 228);
}
.item-center {  
  align-content: center;
}
.main {    
    width: 1200px;
    height: auto;
    min-height: 1080px;
    background-color: #0a371c;    
}
.banner {    
    width: 100%;
    height: 140px;    
    text-align: left;
}
.banner img {
    margin-top: 20px;
    margin-left: 30px;
}

.blex-image {
    position: relative;    
    text-align: left;
}
.blex-image img {
    margin-top: 10px;
    margin-left: 30px;
}
.tank-image {
    position: absolute;
    z-index: 500;
    left: 700px;
    top:500px;
}
.main-desc {
    width: 100%;
    height: auto;
    min-height: 300px;
    text-align: center;
    font-size: 1.2em;
}
.main-desc img {
    width: 1024px;
    margin-top: 10px;
}
.bottom {
    margin-top: 20px;
    display: inline-block;
    width: 100%;
    height: 60px; 
    max-width: 1200px;    
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
    padding: 5px 5px 10px 40px;
}
.sp10 {
    padding-left: 10px;
}
.sp20 {
    padding-left: 20px;
}
/*** slider ***/
.slider {
    width: 60%;    
    margin-top: 50px;
    margin-left: 40px;
    display: flex;
    justify-content: left;    
}  
.taglink {
    width: 100%;
    border: 3px solid #3d3d3d;
    color: #3d3d3d;
    border-radius: 20px;
    background-color: #151515;    
    text-align: center;
    margin: 20px 7px 20px 7px;    
    display: inline-block;    
}
.tag-display {
    padding: 12px 16px 6px 16px;
}
.slider-navbar {
    display: flex;
    padding: 0 20px 0 20px;
    justify-content: space-between;
    height: 60px;
    vertical-align: middle;
}
.slider-navbar img {
    cursor: pointer;
}
/*** section ***/
.mx-section {    
    background-color: #0F381D;  
    width: 100%;
    padding: 10px 0px 10px 0px;
    justify-content: center;
}
.mx-section-head {
    margin-top: 80px;
    color: #ffffff;
    font-size: large;
    width: 100%;
    padding: 0px 40px 0px 40px;
}
.mx-section-head-line {
    padding: 2px;
    padding-left: 40px;
    border-bottom: #ff9800 2px solid;
}
.mx-section-content {
    background-color: #0F381D;
    width: 100%;
    padding: 20px 60px 60px 60px;    
    display: block;
    overflow: auto;    
    color: #ffffff;
    text-align: justify;
}
.mx-section-content img {
    float: left;   
}
.mx-section-flex {
    background-color: #0F381D;
    width: 100%;    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;    
}
/*** skill ***/
.mx-examples {
    background-color: #0F381D;    
    width: 100%;
    padding: 10px 20px 10px 20px;
    justify-content: center;
}
.mx-examples-head {
    color: #ffffff;
    font-size: large;
    width: 100%;
}
.mx-examples-wrap {
    width: 100%;    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;    
}
.mx-example-box {
    width: 230px;
    height: 230px;
    background-color: #FFFFFF;
    border: #333333 2px solid;
    border-radius: 6px;
    margin: 10px;
    text-align: center;
    color: #202020;
}
/*** story ***/
.mx-story {    
    background-color: #0F381D;  
    width: 100%;
    padding: 10px 0px 10px 0px;
    justify-content: center;
}
.mx-story-head {
    margin-top: 80px;
    color: #ffffff;
    font-size: large;
    width: 100%;
    padding: 0px 40px 0px 40px;
}
.mx-story-head div {
    padding: 2px;
    padding-left: 40px;
    border-bottom: #ff9800 2px solid;
}
.mx-story-wrap {
    background-color: #0F381D;
    width: 100%;
    padding: 20px 60px 60px 60px;    
    display: block;
    overflow: auto;    
    color: #ffffff;
    text-align: justify;
}
.mx-story-wrap img {
    float: left;   
}
/*** about ***/
.mx-about {
    background-color: #0F381D;    
    width: 100%;
    padding: 20px 20px 40px 20px;
    justify-content: center;
}
.mx-about-head {
    padding-top: 60px;
}
.mx-about-head div {
    padding: 2px;
    padding-left: 40px;
    border-bottom: #ff9800 2px solid;
    color: #ffffff;
}
.mx-about-wrap {
    width: 100%;
    justify-content: center;    
    padding: 40px;   
}
.mx-about-box {    
    width: 800px;    
    margin: 10px 10px 40px 10px;
    text-align: justify;
    color: #ffffff;
}
.mx-about-box img {
    width: 160px;
    background-color: #FFFFFF;
    border: #333333 2px solid;
    border-radius: 6px;
    margin: 10px;
    text-align: center;
    color: #202020;
    float: left;
}

/*** social ***/
.logo-button-list {
    display: flex;
}
.mx-logo-box {
    display: block;
    background-color: #FFFFFF;
    border: #3d3d3d;
    border-radius: 6px;
    width: 80px;
    height: 80px;    
    padding: 5px;
    text-align: center;
    color: #ffffff;
}
.mx-contact-box {
    padding: 20px 40px 40px 40px;
    display: flex;
    flex-direction: row;
}
.mx-contact-info {
    display: block;    
    min-width: 50%;
    width: 50%;
}
.mx-contact-map {
    display: block;    
    flex: 1;
    margin-left: 40px;
}

.mx-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
.mx-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.mx-button:disabled{cursor:not-allowed;opacity:0.3}
.mx-button{width:100%;text-align:left;padding:2px}
.mx-button:hover{color:#90fb9a!important;border-bottom: #ff9800 2px solid;}