body, html {
            margin: 0 auto;
            padding: 0;
            background-color: #FDF6EB;
            color: #151211;
            font-family: Arial, Helvetica,"微軟正黑體", sans-serif;
            font-size: 1.1rem;
            line-height: 1.8;
            letter-spacing: 1px;
        }
        
        ::selection {background:#99A685;color:#ffffff;}

        img { width:50%; }
        
        header, footer, .main-nav, .main-visual, .column {
            text-align: center;
        }
        
        .company-name img {
            width:100%;
        }

        .fixed {
          top: 75%;
          left: 50%;
          transform: translate(-50%, 0%);
          position: fixed;
        }
        
        .fixed img{
           width: 25%;
        }
        
        #logo img {
            width: 80%;
            cursor: pointer;
        }
        
        header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-image: linear-gradient(to bottom, #73544F 0%, #B49B85 10%, #BFB59F 30%, #ffffff 50%, #BFB59F 70%, #B49B85 90%, #73544F 100%);
            margin-bottom: 20px;
        }

        .main-visual img {
            width: 80%;
        }

        .main-nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .main-nav ul li {
            margin: 0 15px;
            padding: 5px;
            background-color: #B49B85;
            border: 2px solid #BFB59F;
            border-radius: 10px;
        }

        .main-nav ul li a{
            text-decoration: none;
            color: #FDE1B8;
        }
        
        .a, a:link, a:visited, a:hover, a:active {
            color: #73544F;
        }

        .main-nav ul li a.focus {
            color: #311D1C;
            font-weight: bolder;
            text-shadow: 0px 0px 5px #EFF0CA;
        }
        
        .company-name{
            width:80%;
        }


        #mainshow {
         position: relative;
        }

        #me {
         width: 8%;
         top: 0px;
         left: 0px;
         position: absolute;
        }

        #more {
         width: 10%;
         top: 0%;
         right: 12%;
         position: absolute;
         cursor: pointer;
        }
                
        #video{
          width: 80%;
        }
        
        h1 {
            font-size: 1.4rem;
            color: #EFF0CA;
            background-color: #CAC296;
        }

        h1.bigtitle {
          text-align: center;
          margin:20px auto;
          font-size: 3rem;
          font-weight: bold;
          color: #ffffff;
          background-color: #203258;
        }

        .subtitle {
          width: 80%;
          text-align: center;
          margin:20px auto 0px;
          font-size: 2rem;
          font-weight: bold;
          color: #ffffff;
          background-color: #203258;
        }

        .subtitlebg {
          width: 40%;
          padding-top: 1px;
          margin: 0px auto 10px;
          background-image: url('hbar.png');
          background-position: top;
          background-repeat: no-repeat;
          background-size: contain;
        }

        .subtitlebg div{
          padding: 10px 0px;
          font-weight: bold;
          font-size: 1.2rem;
          width: 80%;
          margin: 60px auto;
          background-color: rgb(255 255 255 / 70%);
          border: 8px double #860101;
	}

        .listitem{
           font-size: 2rem;
           width: 30%;
           margin: 10px auto;
	   padding: 0px;
           color: #ffffff;
           background-image: linear-gradient(to right, #311D1C 0%, #860101 50%, #311D1C 100%);
        }

              
        h2{
            width:80%;
            color: #860101;
            font-size: 1.3rem;
            margin: 60px auto 10px;
            padding-bottom: 20px;
            border-bottom: 2px solid #860101;
        }

        h3{
            color: #C9B1AD;
            font-size: 1.2rem;
            width:80%;
            margin: 10px;
        }

        strong {
            font-weight: bold;
            background-color: #311D1C;
            color: #EFF0CA;
        }

        blockquote{
            background-color: #BFB59F;
            border-left: 5px solid #B3946F;
            color: #ffffff;
            margin: 25px 80px;
            padding-left: 20px;
            border-radius: 2px;
            text-align:left;
        }
        
        .content {
            width: 90%;
            margin: 0 auto;
        }

        .content .title {
            width: 100%;
            background-color: #E1D3BA;
        }

        .content img {
            width:20%;
        }
        
        img.safe {
            width:20%;
        }
        
        img.column {
            cursor: pointer;
            border-radius: 4%;
            width:100%;
        }
                
        .two-column, .three-column {
            margin: 10px;
            display: flex;
            justify-content: space-between;
        }

        .two-column div {
            flex-basis: 45%;
        }
        
        .three-column div {
            flex-basis: 30%;
        }
        
        
        
        .lessonTitle {
            width:100%;
            color: #860101;
            font-size: 1.3rem;
            padding-bottom: 20px;
            border-bottom: 2px solid #860101;
        }
        
        .lessonIntro {
            text-align: left;
            font-size: 1.1rem;
            padding: 10px;
        }
        
        
        footer {
            width: 100%;
            background-color: #311D1C;
            color: #FDE1B8;
            text-align:center;
        }

        .none {
            display: none;
        }
 
        #textBox {
          display: none;
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border: 6px solid #ffffff;
	  outline: 10px solid #955f34;
          background: linear-gradient(to bottom,#fde8c0, #ffffff, #fde8c0);
	  border-radius: 10px;
	  box-shadow: inset -3px -3px 9px #ffffff83, inset 3px 3px 7px rgba(94, 104, 121, 0.688);
          padding: 2%;
          font-size: 1.5rem;
          width: 80%;
          height: 80%;
          overflow-y: auto;
        }

        #textMEMO {
	  text-indent: 2rem;
        }

        #textMEMO:before {
          position: relative;
        }
          
        #textMEMO:before {
          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%; 
          opacity: 0.5;
          background-image: url('logo.png');
          background-position: center;
          background-repeat: no-repeat;
        }

        #aboutus {
          margin: 10px auto;
          background-image: url('aboutus.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }

        #aboutus img{
	  width: 90%;
	}

     
        @media (max-width: 768px) {
            img { width: 100%; }

            .main-visual img {
                width: 100%;
            }

            .content img {
                width:80%;
            }

            img.safe {
                width:50%;
            }
                                
            header img{
                width: 100%;
            }
            
            .two-column, .three-column, header, footer {
                flex-direction: column;
            }
            
            .two-column div, .three-column div, footer div {
                margin-bottom: 20px;
                flex-basis: auto;
            }

            .two-column div img, .three-column div img {
                width:100%;
            }
            
            header, footer {
                flex-direction: column;
            }

            blockquote{
                margin: 10px;
                padding-left: 10px;
            }
            
            .two-column div a {
                width: 30%;
                float: right;
                display: block;
            }
            
            .fixed {
              top: 90%;
            }
            
            .fixed img{
               width: 50%;
            }
            
            #more {
              right: 5%;
            }

            h1.bigtitle {
              font-size: 2rem;
            }


            .subtitle {
              width: 100%;
              font-size: 1.5rem;
            }

            .subtitlebg {
              width: 90%;
            }

            .subtitlebg div{
              width: 90%;
            }

            .subtitlebg div{
              font-size: 1.2rem;
            }

            .listitem{
               font-size: 1.35rem;
               width: 80%;
               margin: 0 auto;
            }
        }