@import url('https://fonts.googleapis.com/css2?family= Noto+Sans+TC: 家庭= Noto+Sans+TC:wght@100;300;400;500;700;900 & display=swap');

body {
  font-family: 'Noto Sans TC', sans-serif, 'Arial Narrow', Arial, sans-serif;
  overflow-x: hidden;
}

::selection {
  background: var(--green);
  color: var(--black);
}

::-moz-selection {
  background: var(--green);
  color: var(--black);
}

:root {
  --green: #c0ff45;
  --black: #000000;
  --blue: #4095fa;
  --white: #ffff;
  --gray: #eeeeee;
  --gray-dark: #696c70;
}

h1 {
  font-size: 3rem;
  font-weight: 600;

}


h2 {
  color: var(--black);
  font-size: 2rem;
  font-weight: bolder;

}

h4 {
  font-size: 1.4rem;
  font-weight: 600;

  line-height: 30px;
}

h5 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--blue);
  line-height: 30px;

}

p {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 35px;

}

/*表單+footer顏色--開始*/
.edm_footer_001 .svg {
  fill: var(--white);
}

.fa-info-circle:before {
  color: var(--black);
}

.edm_form .privacy_style a {
  color: var(--black);
}

.edm_form .custom-control-label {

  color: var(--black);
}

.edm_form .submit_btn:hover {
  background-color: var(--blue);
}

.edm_form .submit_btn {
  color: var(--white);
  background-color: var(--black);

}

.edm_footer_001 {
  text-align: center;
  background-color: var(--blue);
}

.edm_footer_001 .icon_list>li>p {
  color: var(--white);

}

.edm_footer_001 .icon_list>li {

  border-bottom: 1px solid var(--white);
}

.edm_header_001 {

  z-index: 999;
}

/*表單+footer顏色--結束*/


.apple_google_icon{
  width: auto;
}


.study-rightblock h1 {
  color: var(--blue);
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 999;
  overflow: hidden;
}

.first {
  background: var(--green);
}


.second {
  background: var(--green);
  left: 33.33%;
}

.third {
  background: var(--green);
  left: 66.66%;
}
.table-bordered td, .table-bordered th {
  border: 1px solid var(--black);
}
.table thead th {
  vertical-align:middle;
  border-bottom: 1px solid var(--black);
 
}


.himain{
  background-color: var(--blue);
  color: var(--white);
  width: 30%;
  font-weight: 500;
  border-left: 2px solid var(--black);
}

.trcolor{
  background-color: #ffff;
}
.thtitle{
  color: var(--black);
  border-right: 1px solid var(--black);
}
table{
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 35px;
 color: var(--gray-dark);
position: relative;
z-index: 1;
}
.table td, .table th {
  padding: 1.25rem;
  vertical-align: middle;
 width: 0%;
}
th{
  width: 18%;
}
video {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 800px;
}
.main-left-tec{
  position: absolute;
  bottom: -5px;
  width: auto;
  z-index: 1;
  width: 50%;
}
.videobg {
  position: absolute;
  bottom: -5px;
  width: auto;
  z-index: 1;
  animation-name: videobg;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: reverse;

}
@keyframes videobg {
  0%   {opacity: 0;}

  100% {opacity: 100;}
}


.videobg-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  z-index: 1;
  animation-name: videobg;
  animation-duration: 4s;
  animation-iteration-count: infinite;
 
}


.nine-2 {
  font-size: 5rem;
}


.phoneimg {
  position: relative;
  z-index: 1;
}

.flexbutton {
  position: fixed;
  top: 50%;
  right: 0;
  background-color: var(--black);
  color: var(--white);
  width: 50px;
  writing-mode: vertical-rl;
  align-items: center;
  z-index: 999;
  padding-top: 20px;
  padding-right: 5px;
  border-radius: 20px 0px 0px 20px;
  height: 200px;
  cursor: pointer;
  display: none;
 
}


.main-view-section {
  background-image: url(../images/maib-view.png), linear-gradient(to left, rgb(64 149 250) 29%, rgb(64 149 250) 60%, rgb(64 149 250) 100%);
  /* background-position: 1% top; */
  background-repeat: no-repeat;
  /* background-size: cover; */
  padding-bottom: 20px;
  /* background-attachment: fixed; */
  position: relative;
}

.main-view-section h1 {
  color: var(--white);
  font-size: 3rem;
  font-weight: 400;


}

.speak-font {
  font-size: 3rem;
  color: var(--white);
  font-weight: 300;
  line-height: 3rem;
  display: inline-table;
  margin-top: 47px;
}

.main-write-mode h3 {
  color: var(--white);
  font-weight: 200;
  writing-mode: vertical-lr;
  background-color: #000000;
  padding-top: 30px;
  margin-top: 50px;
  padding-bottom: 30px;
  padding-left: 5px;
  padding-right: 5px;
  letter-spacing: 3px;
  margin-right: 30px;
  width: auto;
  border-style: solid;
  border-width: 5px;
  border-color: var(--white);
  border-left: 0;
  border-right: 0;
}






.main-group {
  display: flex;
  margin-top: 35px;
}

.nine-lan h1 {
  font-size: 13rem;
  font-weight: 800;
  color: var(--green);
  display: flex;
  line-height: 0rem;

  padding-top: 95px;
}

.main-h2-block {
  border-color: var(--white);
  margin-top: 10px;
  margin-bottom: 50px;
  margin-left: 5px;

}

.globle {
  margin-top: 50px;
}

.icon{
 
 display: contents;
  }
  .icon img{
    width: auto;
  }
.iconfont{
padding-left: 1rem;
}
.main-h2-block h2 {
  border: solid;
  color: var(--white);
  border-color: var(--white);
  border-width: 2px;
  display: inline-flex;
  padding: 10px 15px 10px 15px;
  margin-left: -6px;
}


.logo {
  background-color: var(--white);
  text-align: center;
  padding: 15px;
  border-top: 85px var(--blue) solid;
}

.one-group {
  border-style: solid;
  border-width: 1px;
  border-color: var(--gray-dark);
  display: flex;
  margin-bottom: 20px;
  height: 250px;
  background-color: var(--white);
}

.study-section {
  padding-bottom: 5vw;
  padding-top: 50px;

}

.study-bg img{
 
 margin-top: 100px;
  width: 110%;
  height: auto;
  position: absolute;
  left: 0;
}

/*
.study-bg{
  background-image: url(../images/tec-bg.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 120%;
  width: 120%;
  height: 1000px;
  position: absolute;
}
*/


.slideshow-container {
  /* max-width: 1000px; */
  position: relative;
  margin: auto;
}

.all-group {
  background-color: var(--gray);
  display: flex;

  align-content: flex-end;

  margin-bottom: 12px;
}

.text-group {
  margin: 10px;
}

.img-group {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 0px;
}

.one-griup-text {
  margin: 20px;
  text-align: justify;
  display: inline-block;
}




.seeu-section {
  background-image: url(../images/seeubgimg.png), linear-gradient(to right, rgb(64 149 250) 29%, rgb(64 149 250) 60%, rgb(64 149 250) 100%);
  background-repeat: no-repeat;
  background-position: 100%;
}

.tecnology-power-section {
  background-color: var(--gray);
  border-style: solid;
  border-width: 10px;
  /* border-bottom: #000000; */
  border-left: #000000;
  border-right: #000000;

  padding-bottom: 80px;
  padding-top: 50px;
  position: relative;
}

.iframe-section {
  background-color: var(--green);
  text-align: center;
  padding: 30px 0px;
}

.community-section {
  background-color: #3992ff;
  padding-bottom: 80px;
  padding-top: 50px;
  position: relative;
}

.score-section {
  background-image: url(../images/comm-bg.png);
  background-attachment: fixed;
  padding-bottom: 80px;
  padding-top: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.onlinebg{
  background-color: var(--white);
  padding:5rem 1rem 1rem 1rem; 

}
.online-section {
  background-image: -webkit-linear-gradient(left, transparent 0%, #c0ff45 0%, #c0ff45 10%, transparent 10%), -webkit-repeating-linear-gradient(left, transparent, transparent 190px, rgba(226, 226, 226, 0.4) 190px, rgba(226, 226, 226, 0.4) 191px), -webkit-repeating-linear-gradient(bottom, transparent, transparent 190px, rgba(226, 226, 226, 0.4) 190px, rgba(226, 226, 226, 0.4) 191px);
  background-image: linear-gradient(90deg, transparent 0%, #c0ff45 0%, #c0ff45 7%, transparent 7%), repeating-linear-gradient(90deg, transparent, transparent 190px, rgb(226 226 226) 190px, rgb(226 226 226) 191px), repeating-linear-gradient(0deg, transparent, transparent 190px, rgb(226 226 226) 190px, rgb(226 226 226) 191px);
  padding-bottom: 50px;
  padding-top: 50px;
  background-attachment: fixed;
}

.apple-store {
  display: inline-flex;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--gray-dark);
  padding: 10px;
  border-radius: 15px;
  align-items: center;
  margin: 10px 10px;

}

.apple-store img {
  margin-right: 10px;
}


.community-block {
  background-color: var(--white);
  padding: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--gray-dark);
  border-radius: 15px;
  text-align: left;
  margin-top: 20px;
  display: flex;

 
  align-items: flex-start;
}


.score-section h2 {
  font-size: 1.9rem;
}


.sticky {

  position: sticky;
  top: 150px;
  z-index: 3;
}

.greenline {


  border-bottom: 4px solid var(--green);
  width: 200px;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
}

.study-group h2::before {
  content: '';
  background: url(../images/titleline.png) no-repeat top left /70px 14px;
  position: absolute;
  top: 12px;
  left: -90px;
  z-index: 2;
  width: 81px;
  height: 10px;
}

.study-group h2::after {
  content: '';
  background: url(../images/titleline.png) no-repeat top left /73px 14px;
  position: absolute;
  top: 15px;
  transform: rotate(180deg);
  z-index: 2;
  width: 90px;
  height: 10px;
}

.study-group h2 {
  margin-left: 140px;
  margin-top: 50px;
  position: relative;
  margin-bottom: 20px;

}


.study-rightblock {
  padding-top: 150px;
}

.study-rightblock-p {
  width: 100%;
  color: var(--gray-dark);
}

.paddingtop {
  padding-top: 30px;
}

.study-group {

  margin-left: auto;
  margin-right: auto;

}

/**/
/**/
/**/
/**/


/* Style the tab buttons */
.tablink {
  background-color: rgba(0, 0, 0, 0);
  color: var(--blue);

  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;

  width: 200px;
  border-color: var(--blue);
  border-width: 2px;
  border-style: solid;
  border-radius: 99px;
  margin: 5px;
}


/* Change background color of buttons on hover */
.tablink:hover {
  background-color: var(--green);
  color: var(--blue);
}




.tabcontent {
  display: none;

  padding-top: 100px;

}


/**/
/**/




/**/
/**/



.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 20px;
  width: 20px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: var(--blue);
}



.main-text-2 {
  margin-top: 50px;
}

.fade {
  animation-name: fade;
  animation-duration: 4s;
  /*配合JS秒數*/
}

@keyframes fade {
  from {
    opacity: 0.5
  }

  to {
    opacity: 1
  }
}

/* On smaller screens, decrease text size */




.main-left-media {
  padding-left: 13%;
}

@media screen and (max-width:1900px) {
  .main-left-media {
    padding-left: 10%;
  }
}

@media screen and (max-width:1765px) {
  .main-left-media {
    padding-left: 7%;
  }
}

@media screen and (max-width:1635px) {
  .main-left-media {
    padding-left: 5%;
  }
}

@media screen and (max-width:1565px) {
  .main-left-media {
    padding-left: 3%;
  }
  .main-left-tec{
    position: absolute;
    display: block;
    bottom: -5px;
    width: auto;
    z-index: 1;
    width: 50%;
    right: 0;
    transform:scaleX(-1);
  }
  .main-write-mode h3 {


    color: var(--white);
    font-weight: 200;
    writing-mode: horizontal-tb;
    background-color: #000000;
    padding-top: 5px;
    margin-top: 20px;
    padding-bottom: 5px;
    padding-left: 50px;
    padding-right: 5px;
    letter-spacing: 0px;
    /* margin-right: -23px; */
    width: 450px;
    border-style: solid;
    border-width: 5px;
    border-top: 0px;
    border-bottom: 0px;
    border-color: var(--white);
    /* border-left: 3px; */
    /* border-right: 3px; */
  }

  .main-group {
    display: flex;
    margin-top: 35px;
    flex-direction: column;
  }
}

@media screen and (max-width:1200px) {
  .main-group {
    display: flex;
    margin-top: 35px;
    flex-direction: column;
  }
  .main-left-tec{
    position: absolute;
    display: block;
    bottom: -5px;
    width: auto;
    z-index: 1;
    width: 50%;
    right: 0;
    transform:scaleX(-1);
  }
  .main-text-2 {
    margin-top: 50px;
  }

  .main-h2-block h2 {

    margin-left: -0.5%;
  }


  .main-write-mode h3 {
    color: var(--white);
    font-weight: 200;
    writing-mode: horizontal-tb;
    background-color: #000000;
    padding-top: 5px;
    margin-top: 20px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 5px;
    letter-spacing: 0px;
    /* margin-right: -23px; */
    width: auto;
    border-style: solid;
    border-width: 5px;
    border-top: 0px;
    border-bottom: 0px;
    border-color: var(--white);
    /* border-left: 3px; */
    /* border-right: 3px; */
  }

  .main-view-section {
    background-image: url(../images/maib-view.png), linear-gradient(to left, rgb(64, 128, 222) 29%, rgb(64, 128, 222) 60%, rgb(64, 128, 222) 100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 20px;
  }



  .nine-lan h1 {
    font-size: 10rem;
    font-weight: 800;
    color: var(--green);
    display: flex;
    line-height: 0rem;

    padding-top: 65px;
  }

  .tabcontent {

    left: 16.5%;
  }

  .one-group {
    display: flex;
    height: auto;
    align-items: flex-start;
  }

  .all-group {

    display: flex;

    align-items: center;
    flex-direction: column;
  }

  .img-group {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
  }
  .study-bg img{
 
    margin-top: 200px;
       width: 120%;
       height: auto;
       position: absolute;
       left: 0;
       display: block;
     }
}

@media screen and (max-width:991px) {
  .tabcontent {

    left: 5%;
  }
  
  .apple_google_icon{
    width: 50%;
  }
  
  .main-left-tec{
    position: absolute;
    display: block;
    bottom: -5px;
    width: auto;
    z-index: 1;
    width: 50%;
    right: 0;
    transform:scaleX(-1);
  }
  .main-view-section {
    background-image: url(../images/maib-view-m.png), linear-gradient(to left, rgb(64, 128, 222) 29%, rgb(64, 128, 222) 60%, rgb(64, 128, 222) 100%);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 20px;
  }

  .sticky {

    position: initial;
  }

  .study-group h2 {
    margin-left: 96px;

  }

  .tablink {

    padding: 10px 10px;
    width: 150px;

    margin: 5px;
  }

  .seeu-section {

    background-position: center center;
    background-size: cover;
  }

  

  .study-group h2::before {
    left: 20%;
  }

  .videobg {
    position: absolute;
    bottom: -5px;
    width: 40%;
    z-index: 1;
  }

  .videobg-2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    z-index: 1;
  }
}


@media screen and (max-width:768px) {
  .main-h2-block h2 {
    border: solid;

    border-width: 1px;
    display: inline-flex;
    padding: 7px 10px 7px 10px;
    margin-left: -5px;
  }

  .apple_google_icon{
    width: 40%;
  }
  
  
  .study-bg img{
 
    margin-top: 200px;
       width: 110%;
       height: auto;
       position: absolute;
       left: 0;
       display: none;
     }
  video {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 460px;
  }

  .study-section {
    padding-bottom: 5vw;
    padding-top: 50px;

    background-image: url(../images/tec-bg.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: initial;
    /* background-size: 197%; */
  }

  .logo {


    border-top: 70px var(--blue) solid;
  }

  h1 {
    font-size: 1.6rem;
    font-weight: 600;

  }

  .main-view-section {
    background-image: url(../images/maib-view-m.png), linear-gradient(to left, rgb(64 149 250) 29%, rgb(64 149 250) 60%, rgb(64 149 250) 100%);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 20px;
  }



  .nine-lan h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--green);
    display: flex;
    line-height: 0rem;

    padding-top: 65px;
  }

  .nine-2 {
    font-size: 140%;
    font-weight: bold;
    color: var(--green);
  }

  .speak-font {
    font-size: 1.6rem;
    line-height: 30px;
    margin-top: 20px;
  }

  .ninestyle {
    font-size: 6rem;
    font-weight: 900;
    line-height: 2rem;
    color: var(--green);
  }

  .main-view-section h1 {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 400;
  }

  .main-h2-block {

    margin-bottom: 5px;

  }

  .iframe-section {
    background-color: var(--green);
    text-align: center;
    padding: 30px 0px 30px 0px;

  }

  .globle {
    margin-top: 10px;
  }

  .main-text-2 {
    margin-top: 30px;
  }

  .main-group {

    margin-top: 5px;

  }

  .main-h2-block h2 {
    font-size: 1.2rem;
  }

  h2 {
    color: var(--black);
    font-size: 1.5rem;
    font-weight: bolder;
  }

  .score-section h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
    line-height: 10px;
  }

  h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--blue);
    line-height: 24px;

  }

  p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 25px;

  }
  table{
    font-size: 1rem;
    font-weight: 300;
    line-height: 25px;
 
  }
  .table td, .table th {
    padding: .5rem;
    vertical-align: middle;
   width: 0%;
  }
  .flexbutton {
    position: fixed;
    top: 70%;
    right: 0;
    background-color: var(--black);
    color: var(--white);
    width: 40px;
    writing-mode: vertical-rl;
    align-items: center;
    z-index: 2;
    padding-top: 15px;
    padding-right: 5px;
    border-radius: 20px 0px 0px 20px;
    height: 160px;
    cursor: pointer;
    display: none;
  }

  .study-group h2 {
    margin-left: 140px;
    margin-top: 20px;
    position: relative;
    margin-bottom: 10px;
  }

  .first {
    background: var(--green);
  }

  .second {
    background: var(--green);
    left: 50%;
  }

  .third {
    background: var(--green);
    left: 50%;
  }

  .study-group {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .study-group h2 {
    margin-left: 0px;

  }

  .sticky {

    position: initial;


  }

  .study-rightblock {
    padding-top: 0px;
  }

  .tabcontent {
    display: none;

    padding-top: 0px;

  }

  .apple-store {

    padding: 5px;

    margin: 5px 5px;
  }

  .community-block {

    padding: 15px;

    margin-top: 10px;
  }

  .greenline {

    margin: 15px;
    margin-left: auto;
    margin-right: auto;
  }

  .one-group {
    display: flex;
    height: auto;
    align-items: flex-start;
    flex-direction: row;
  }

  .study-group {
    margin-bottom: 20px;
  }

  .study-group h2::before {
    left: 10%;
  }

 
  .one-group img {
    width: 40%;
  }

  .tablink {

    border-width: 1px;

  }

  .score-section {
    background-image: url(../images/comm-bg.png);
    background-attachment: initial;
    padding-bottom: 30px;
    padding-top: 30px;
    background-size: 138%;
    background-repeat: no-repeat;
    background-position: center top;
  }
 
  .onlinebg {
    background-color: var(--white);
    padding: 2rem 1rem 1rem 1rem;
}
.main-left-tec{
  position: absolute;
  display: block;
  bottom: -5px;
  width: auto;
  z-index: 1;
  width: 20%;
  left:  0;
  transform:scaleX(1);
}
.icon img{
  width: 20%;
}
.community-block {
  background-color: var(--gray);
  padding: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--gray-dark);
  border-radius: 15px;
  text-align: left;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
}