#section12 {
     padding-top: 2%;
 }

 #section12 .w3-row img {
     width: 50%;
     margin-left: 35%
 }

 @media screen and (min-width:576px) and (max-width:767px) {
     #section12 .w3-row img {
         margin-left: 22%
     }
 }

 @media screen and (min-width:420px) and (max-width:575px) {
     #section12 .w3-row img {
         margin-left: 22%
     }
 }

 @media screen and (min-width:320px) and (max-width:419px) {
     #section12 .w3-row img {
         margin-left: 22%
     }
 }

 #sectiona .w3-row {
     display: flex;
     flex-wrap: wrap
 }

 #sectiona:not(:first-of-type) {
     padding-top: 0%
 }

 #sectiona .w3-row .w3-half {
     position: relative;
     overflow: hidden
 }

 #sectiona .w3-row .w3-half img {
     height: 100%;
     z-index: 1;
     transition: .6s cubic-bezier(0.165, 0.84, 0.44, 1)
 }

 #sectiona .w3-row .w3-half .mask {
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     position: absolute;
     z-index: 1;
     top: 90%;
     left: 0;
     height: 100%;
     width: 100%;
     padding-top: 2%;
     transition: .6s cubic-bezier(0.165, 0.84, 0.44, 1)
 }

 #sectiona .w3-row .w3-half .mask h4 {
     font-size: 1.3rem;
     font-weight: bold
 }

 #sectiona .w3-row .w3-half .imgWrapper {
     width: 60%;
     margin: 0 auto
 }

 #sectiona .w3-row .w3-half .imgWrapper img {
     width: 40%
 }

 #sectiona .w3-row .w3-half ul {
     width: 65%;
     padding: 0;
     margin: 2% auto 0
 }

 #sectiona .w3-row .w3-half li {
     margin: 1% 0;
     font-size: 1.2rem
 }

 #sectiona .w3-row .w3-half:last-of-type {
     background-color: #c3f1f1;
     padding: 5% 2%
 }

 #sectiona .w3-row .w3-half:last-of-type h4 {
     font-size: 2rem
 }

 #sectiona .w3-row .w3-half:last-of-type span {
     color: #ed7ba0
 }

 @media(min-width:1000px) {
     #sectiona .w3-row .w3-half:first-of-type:hover .mask {
         top: 0
     }

     #sectiona .w3-row .w3-half:first-of-type:hover img {
         transform: scale(.9, .9)
     }

     #sectiona .w3-row .w3-half:first-of-type:hover .mask h4 {
         top: 50%;
         position: absolute;
         width: 100%;
         font-size: 1.8rem;
         transform: translate(0, -50%);
         padding: 0 5%
     }
 }

 @media(max-width:1400px) {
     #mainWrite h1 {
         font-size: 2.5rem
     }

     #mainWrite h2 {
         font-size: 2rem
     }

     #sectiona .w3-row .w3-half .mask h4 {
         font-size: 1rem
     }

     #sectiona .w3-row .w3-half ul {
         width: 85%
     }
 }

 @media(max-width:1200px) {
     #mainWrite h1 {
         font-size: 2rem
     }

     #mainWrite h2 {
         font-size: 1.8rem
     }

     #mainWrite p {
         font-size: 1.1rem
     }

     #section2 .group:nth-child(5) {
         right: 18%;
         font-size: 1.1rem
     }

     #sectiona .w3-row .w3-half .mask {
         top: 83%;
         padding-top: 1%
     }

     #sectiona .w3-row .w3-half .mask h4 {
         font-size: 1.2rem
     }

     .thisfooter .w3-container {
         width: 72%
     }

     #sectiona .w3-row .w3-half li,
     #section4 .w3-row .w3-half li,
     #section5 .w3-row .w3-half li {
         font-size: 1rem
     }

     #sectiona .w3-row .w3-half:last-of-type h4 {
         font-size: 1.5rem
     }
 }

 @media(max-width:999px) {
     #mainWrite h1 {
         font-size: 2.5rem
     }

     #mainWrite h2 {
         font-size: 2rem
     }

     #mainWrite p {
         font-size: 1.5rem
     }

     #sectiona .w3-row .w3-half {
         width: 100%
     }

     #sectiona .w3-row .w3-half .mask h4 {
         font-size: 1.3rem
     }

     #sectiona .w3-row .w3-half .mask {
         top: 90%
     }

     #sectiona .w3-row .w3-half:last-of-type h4 {
         font-size: 2rem
     }

     #sectiona .w3-row .w3-half li {
         font-size: 1.5rem
     }

     #sectiona .w3-row .w3-half ul {
         width: 75%
     }
 }

 @media(max-width:750px) {
     #mainWrite p {
         font-size: 1.3rem
     }

     #sectiona .w3-row .w3-half .mask {
         top: 83%
     }

     #sectiona .w3-row .w3-half ul {
         width: 80%
     }

     #sectiona .w3-row .w3-half li {
         font-size: 1.3rem
     }
 }

 @media(max-width:650px) {
     #section1 .group h1 {
         font-size: 2rem
     }

     #mainWrite p {
         font-size: 1.1rem
     }

     #sectiona .w3-row .w3-half .mask {
         top: 83%
     }

     #sectiona .w3-row .w3-half ul {
         width: 90%
     }

     #sectiona .w3-row .w3-half:last-of-type h4 {
         font-size: 1.5rem
     }
 }

 @media(max-width:450px) {
     #section1 .group h1 {
         font-size: 1.5rem
     }

     #sectiona .w3-row .w3-half ul {
         width: 90%
     }

     #sectiona .w3-row .w3-half .mask h4 {
         font-size: 1rem
     }

     #sectiona .w3-row .w3-half li {
         font-size: 1rem
     }
 }

#mainWrite section {
     overflow: hidden;
     position: relative;
     max-width: 1200px;
     margin: 0 auto;
 }

#mainWrite section img,
 .mobileSection img {
     display: block;
     width: 100%;
 }

 section .group,
 .mobileSection .group {
     position: absolute;
     width: 100%;
 }

 /*#mainWrite h1{position: absolute;}*/
 #mainWrite p,
 #mainWrite h1 {
     font-family: PingFang, "Microsoft JhengHei", Arial, sans-serif
 }

 .pchide {
     display: none
 }

 .mhide {
     display: block
 }

 @media(max-width:1000px) {
     .pchide {
         display: block
     }

     .mhide {
         display: none
     }
 }

 #section1 .group:nth-of-type(1) {
     margin-top: 50px
 }

 #section1 .group:nth-of-type(2) {
     width: 40%;
     right: 3%;
     top: 40%;
 }

 #section1 h2,
 #section1 h1 {
     text-align: center;
     font-family: PingFang, "Microsoft JhengHei", Arial, sans-serif;
     margin: 0;
 }

 #section1 h2 {
     color: #797979
 }

 #section1 h1 {
     color: #000;
     font-size: 50px;
 }

 #section1 .button {
     text-align: center;
     margin-top: 10%
 }

 #section1 .w3-btn {
     background-color: #4788a8;
     color: #fff;
     font-size: 25px;
     padding: 5px 30px !important
 }

 #section1 .w3-round-large {
     border-radius: 25px
 }

 #section2 h1 {
     text-align: center;
     color: #fff;
     margin-top: 20%;
     font-size: 40px;
 }

 #section2 p {
     text-align: center;
     color: #fff;
     font-size: 18px;
 }

 #section3 .group {
     width: 45%;
     right: 5%;
     top: 15%;
 }

 #section3 .group .w3-row {
     margin-top: 10%
 }

 #section3 .w3-row .w3-col img {
     width: auto;
     margin: 0 auto
 }

 #section3 .w3-row .w3-col h3 {
     color: #306ea0;
     font-size: 12px;
 }

 #section4>h1 {
     position: absolute;
     top: 3%;
     color: #fff;
     width: 100%;
     text-align: center
 }

 #section4>p {
     position: absolute;
     width: 50%;
     top: 43%;
     right: 4%;
 }

 #section4>.group {
     width: 55%;
     bottom: 16%;
     left: 5%;
 }

 #section5 .group {
     right: 5%;
     top: 10%;
     width: 40%;
 }

 #section6 {
     margin-top: 50px
 }

 #section6 .group:nth-of-type(1) {
     color: #fff;
     width: 60%;
     right: 0;
     top: 5%;
 }

 #section6 .group h1,
 #section6 .group p {
     text-align: center;
     margin: 0;
 }

 #section6 .group:nth-of-type(2) {
     width: 40%;
     top: 25%;
     left: 35%;
 }

 #section6 .group .box {
     padding: 10px;
     border-radius: 20px;
     margin: 10px 0
 }

 #section6 .group .box .pic {
     width: 20%;
     display: inline-block;
     text-align: center
 }

 #section6 .group .box img {
     width: 100%;
     max-width: 60px;
     display: inline;
 }

 #section6 .group .box .dis {
     display: inline-block;
     width: 75%;
     color: #fff
 }

 #section6 .group .box .dis h3 {
     margin: 0;
     font-size: 18px;
 }

 #section6 .group .box .dis p {
     font-size: 13px;
     margin: 0;
     text-align: left
 }

 #section6 .group .box:nth-of-type(1) {
     background-color: rgba(0, 255, 255, 0.3)
 }

 #section6 .group .box:nth-of-type(2) {
     background-color: rgba(255, 225, 46, 0.3)
 }

 #section6 .group .box:nth-of-type(3) {
     background-color: rgba(0, 168, 255, 0.3)
 }

 #section7 h1 {
     position: absolute;
     right: 5%;
     top: 5%;
 }

 #section7 .group {
     width: 29%;
     right: 3%;
     top: 35%;
 }

 #section7 .group h3 {
     color: #4788a8;
     margin: 0;
     font-size: 18px;
 }

 #section7 .group p {
     margin: 0;
 }

 #section8 {
     background-color: #4788a8
 }

 #section8 .group {
     position: static;
     padding: 10px 50px
 }

 #section8 h1,
 #section8 p {
     color: #fff
 }

 #section8 h1 {
     text-align: center
 }

 #section8 .w3-row {
     margin: 20px 0;
     padding: 0 20px
 }

 #section8 .w3-row img {
     width: 100%;
     max-width: 260px;
     margin: 0 auto
 }

 #section8 .w3-row h3 {
     text-align: center;
     color: #0077ad;
     font-size: 12px;
 }

 #section8 .w3-row .w3-quarter {
     background-color: rgba(255, 255, 255, 0.5);
     border-radius: 20px;
     width: 23%;
     margin: 0 1%
 }

 #section9 p {
     position: absolute;
     top: 13%;
     padding: 0 50px
 }

 #section10 .w3-row {
     margin: 30px 0
 }

 #section10 .w3-row .w3-half {
     width: 46%;
     margin: 0 2%
 }

 @media(max-width:1000px) {
     .content .w3-container {
         padding: 0;
     }
 }

 .mobileGroup img {
     max-width: 750px;
     margin: 0 auto
 }

 .pchide .mobileGroup>button {
     background-color: #c7eafa;
     border-bottom: 1px #fff solid;
     color: #2b9dd1;
     font-size: 20px;
     padding: 20px
 }

 .mobileGroup .w3-button:hover {
     background-color: #71badb !important;
     color: #fff !important
 }

 .mobileSection .mobileGroup:nth-of-type(1) .group h1 {
     font-size: 12px;
     text-align: center
 }

 .mobileSection .mobileGroup:nth-of-type(1) .group h2 {
     font-size: 40px;
     text-align: center
 }

 .mobileSection .mobileGroup:nth-of-type(1) p {
     padding: 20px 50px;
     font-size: 18px;
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(1) p {
         padding: 20px;
         font-size: 15px;
     }

     .mobileSection .mobileGroup:nth-of-type(1) .group h2 {
         font-size: 20px;
     }
 }

 .mobileSection .mobileGroup:nth-of-type(2) .w3-row img {
     width: 100%;
     max-width: 133px;
     margin: 0 auto
 }

 .mobileSection .mobileGroup:nth-of-type(2) .w3-row h3 {
     color: #306e9e
 }

 .mobileSection .mobileGroup:nth-of-type(2) p {
     font-size: 20px;
     padding: 20px 60px
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(2) .w3-row h3 {
         font-size: 12px;
     }

     .mobileSection .mobileGroup:nth-of-type(2) .w3-row img {
         width: 80%;
     }

     .mobileSection .mobileGroup:nth-of-type(2) p {
         font-size: 15px;
         padding: 20px
     }
 }

 .mobileSection .mobileGroup:nth-of-type(3) {
     position: relative;
 }

 .mobileSection .mobileGroup:nth-of-type(3) h2 {
     color: #fff;
     position: absolute;
     top: 5%;
     width: 100%;
     text-align: center;
     font-size: 40px;
 }

 .mobileSection .mobileGroup:nth-of-type(3) p {
     padding: 10px 50px
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(3) p {
         padding: 0 20px
     }

     .mobileSection .mobileGroup:nth-of-type(3) h2 {
         top: 0;
         font-size: 25px;
     }
 }

 .mobileSection .mobileGroup:nth-of-type(4) .select h2 {
     text-align: center
 }

 .mobileSection .mobileGroup:nth-of-type(4) .select p {
     padding: 0 50px
 }

 .mobileSection .mobileGroup:nth-of-type(4) .select .box {
     position: relative;
 }

 .mobileSection .mobileGroup:nth-of-type(4) .select .box h2 {
     position: absolute;
     right: 27%;
     top: 12%;
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(4) .select .box h2 {
         right: 12%;
     }

 }

 .mobileSection .mobileGroup:nth-of-type(4) .select .box h3 {
     text-align: center
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(4) .select .box h3 {
         font-size: 15px;
     }

     .mobileSection .mobileGroup:nth-of-type(4) .select h2 {
         font-size: 20px;
     }

     .mobileSection .mobileGroup:nth-of-type(4) .select p {
         padding: 0 20px
     }
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select {
     position: relative;
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select h2 {
     position: absolute;
     width: 100%;
     text-align: center;
     color: #fff
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group {
     position: absolute;
     bottom: 5%;
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box {
     max-width: 700px;
     margin: 30px auto;
     padding: 10px 20px;
     border-radius: 10px
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box:nth-of-type(1) {
     background-color: rgba(0, 255, 255, 0.3)
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box:nth-of-type(2) {
     background-color: rgba(255, 225, 46, 0.3)
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box:nth-of-type(3) {
     background-color: rgba(0, 168, 255, 0.3)
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .pic {
     display: inline-block
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .pic img {
     width: auto
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis {
     width: 80%;
     display: inline-block;
     color: #fff
 }

 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis h3,
 .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis p {
     margin: 0;
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(5) .select .group {
         bottom: 1%;
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box {
         padding: 5px;
         margin: 5px 2px
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis {
         width: 75%;
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .pic {
         width: 15%;
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .pic img {
         width: 100%
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis {
         width: 82%;
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis h3 {
         font-size: 15px;
     }

     .mobileSection .mobileGroup:nth-of-type(5) .select .group .box .dis p {
         font-size: 12px;
     }
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section {
     position: relative;
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(1) h2 {
     position: absolute;
     width: 100%;
     text-align: center
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) {
     background-color: #4786a6;
     color: #fff
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) h2 {
     text-align: center
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) p {
     padding: 0 40px;
     text-align: justify
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) .w3-row .w3-half {
     background-color: rgba(255, 255, 255, 0.5);
     border-radius: 10px
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) .w3-row .w3-half h3 {
     font-size: 13px;
     text-align: center;
     color: #0077ab
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) .w3-half {
     width: 46%;
     margin: 2%
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select .group {
     position: absolute;
     width: 52%;
     bottom: 20%;
     right: 23%;
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select .group h1,
 .mobileSection .mobileGroup:nth-of-type(6) .select .group p {
     margin: 0;
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select .group h1 {
     font-size: 24px;
     color: #4786a6
 }

 .mobileSection .mobileGroup:nth-of-type(6) .select .group p {
     font-size: 17px;
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) h2 {
         font-size: 20px;
     }

     .mobileSection .mobileGroup:nth-of-type(6) .select section:nth-of-type(2) p {
         padding: 0 15px;
         font-size: 12px;
     }

     .mobileSection .mobileGroup:nth-of-type(6) .select .group {
         width: 72%;
         right: 13%;
     }

     .mobileSection .mobileGroup:nth-of-type(6) .select .group h1 {
         font-size: 15px;
     }

     .mobileSection .mobileGroup:nth-of-type(6) .select .group p {
         font-size: 12px;
     }
 }

 .mobileSection .mobileGroup:nth-of-type(7) .select section p {
     width: 90%;
     margin: 0 auto;
     padding: 0;
     top: 18%;
     max-width: 750px
 }

 .mobileSection .mobileGroup:nth-of-type(7) .select .w3-container {
     margin: 50px 0;
     padding: 0 30px
 }

 .mobileSection .mobileGroup:nth-of-type(7) .select .w3-container img {
     max-width: 624px
 }

 .mobileSection .mobileGroup:nth-of-type(7) .select .w3-container p {
     padding: 0 10px
 }

 @media(max-width:1000px) {
     .mobileSection .mobileGroup:nth-of-type(7) .select section p {
         padding: 20px
     }
 }

 @media(max-width:600px) {
     .mobileSection .mobileGroup:nth-of-type(7) .select section p {
         padding: 10px
     }

     .mobileSection .mobileGroup:nth-of-type(7) .select .w3-container p {
         text-align: justify;
         font-size: 13px;
     }

     .mobileSection .mobileGroup:nth-of-type(7) .select .w3-container {
         padding: 0 10px
     }

     .mobileSection .mobileGroup:nth-of-type(7) .select section p {
         font-size: 12px;
     }
 }
 .w3-col.s6, .w3-col.m6, .w3-half {
    width: 49.99999%;
    float: left;
}