/*GRID*/

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
.cell {
    height: 100px;
}

/* default - small devices */

[class*="col"] {
    grid-column-end: span 12;
}

/* below 600px typically tablet*/

@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
    .sm6 {
        grid-column-end: span 2;
    }
    .sm12 {
        grid-column-end: span 1;
    }
}

/* above 601px typically tablet*/

@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
    .md6 {
        grid-column-end: span 2;
    }
    .md12 {
        grid-column-end: span 1;
    }
}

/* above 1025px typically desktop*/

@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column-end: span 12;
    }
    .col2 {
        grid-column-start: 1;
        grid-column-end: span 6;
    }
    .col3 {
        grid-column-start: 7;
        grid-column-end: span 5;
    }
    .col4 {
        grid-column-end: span 3;
    }
    .col6 {
        grid-column-end: span 2;
    }
    .col12 {
        grid-column-end: span 1;
    }
}

/*GRID*/

/*Container*/

/*Container*/

/*Nav bar*/

.topnav {
    grid-column: span 12;
    overflow: hidden;
    background-color: #333;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #636e95;
    color: white;
}

/*Nav bar*/

/*Container*/
.imgbox1 {
    grid-column: span 6;

    padding: 5% 5% 5% 5%;

    margin-left: 5%;
}

.imgbox2 {
    grid-column-start: 7;
    grid-column-end: 12;

    padding: 5% 5% 5% 5%;

    margin-left: 10%;
    height: 90%;
}

.imgbox3 {
    grid-column-start: 7;
    grid-column-end: 12;

    padding: 5% 5% 5% 5%;

    margin-left: 10%;
    height: 90%;
}

.imgbox4 {
    grid-column-start: 1;
    grid-column-end: 4;
    padding: 5% 10% 5% 5%;

    align-content: center;
    width: 155%;
    margin-left: 5%;
    margin-top: 12%;
    height: 90%;
}



.imgbox5 {
    grid-column-start: 7;
    grid-column-end: 11;
    padding: 5% 10% 5% 5%;

    align-content: center;
    width: 155%;
    margin-left: 5%;
    height: 90%;
}


.imgbox6 {
    grid-column-start: 1;
    grid-column-end: 3;
    padding: 5% 10% 5% 5%;

    align-content: center;
    width: 155%;
    margin-left: 5%;
    height: 90%;
}

.imgbox7 {
    grid-column-start: 3;
    grid-column-end: 12;
    padding: 5% 10% 5% 5%;

    align-content: center;

    margin-left: 5%;
    height: 90%;
}

.imgbox8 {
    grid-column-start: 1;
    grid-column-end: 8;
    padding: 5% 10% 5% 5%;

    align-content: center;

    margin-left: 5%;
    height: 90%;
}


.imgbox9 {
 grid-column-start: 1;
    grid-column-end: 8;
    padding: 5% 10% 5% 5%;

    align-content: center;
margin-top: 35%;
    margin-left: 5%;
    height: 90%;

}


.imgbox10 {
 grid-column-start: 8;
    grid-column-end: 12;
    padding: 5% 10% 5% 5%;

    align-content: center;
margin-top: 55%;
    margin-left: 5%;
    height: 90%;

}







.breaker {
    margin-top: 20%;
    grid-column: span 12;
    background-color: #000000ff;
    height: 50px;
}

.breaker2 {
    margin-top: 5%;
    grid-column: span 12;
    background-color: #000000ff;
    height: 50px;
}

.textbox1b {
    grid-column-start: 8;
    grid-column-end: 11;
    font-family: SansCN;
    color: #482929ff;
    font-size: 1.7vw;
    line-height: 150%;
    width: 120%;
    align-content: center;
    margin-right: 20%;

    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: right;
}

.textbox1c {
    grid-column-start: 1;
    grid-column-end: 8;
    font-family: SansCN;
    color: #611111ff;
    font-size: 2vw;
    line-height: 120%;
    width: 150%;
    align-content: center;
    margin-left: 4%;

    padding-left: 5%;
    padding-right: 2%;
    padding-top: 5%;
    padding-bottom: 10%;

    text-align: right;
}

.textbox1d {
    grid-column-start: 1;
    grid-column-end: 5;
    font-family: SansCN;
    color: #611111ff;
    font-size: 1.7vw;
    line-height: 200%;
    width: 150%;
    height: 85%;
    align-content: center;
    margin-left: 4%;

    padding-left: 5%;
    padding-right: 2%;
    padding-top: 5%;
    padding-bottom: 15%;

    text-align: left;
}

.textbox1e {
    grid-column-start: 1;
    grid-column-end: 5;
    font-family: Chopsu;
    color: #611111ff;
    font-size: 1.2vw;
    line-height: 200%;
    width: 150%;
    height: 85%;
    align-content: center;
    margin-left: 4%;

    padding-left: 5%;
    padding-right: 2%;
    padding-top: 5%;
    padding-bottom: 12%;

    text-align: left;
}

.textbox1f {
    grid-column-start: 6;
    grid-column-end: 11;
    font-family: Chopsu;
    color: #611111ff;
    font-size: 1.2vw;
    line-height: 200%;
    width: 100%;
    height: 85%;
    align-content: center;
    margin-top: 7%;
    margin-left: 5%;

    padding-left: 5%;
    padding-right: 10%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: right;
}

.textbox1g {
    grid-column-start: 2;
    grid-column-end: 11;
    font-family: Chopsu;
    color: #611111ff;
    font-size: 1.7vw;
    line-height: 150%;
    width: 100%;
    height: 85%;
    align-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: center;
}

.textbox1h {
    grid-column-start: 1;
    grid-column-end: 7;
    font-family: YRDZST;
    color: #611111ff;
    font-size: 2.5vw;
    line-height: 175%;
    width: 100%;
    height: 85%;
    align-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: left;
}

.textbox1i {
    grid-column-start: 4;
    grid-column-end: 11;
    font-family: YRDZST;
    color: #611111ff;
    font-size: 2.5vw;
    line-height: 175%;
    width: 100%;
    height: 85%;
    align-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: left;
}

.textbox1j {
    grid-column-start: 4;
    grid-column-end: 12;
    font-family: YRDZST;
    color: #611111ff;
    font-size: 2.5vw;
    line-height: 125%;
    width: 100%;
    height: 85%;
    align-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: left;
}


.textbox1k {
    grid-column-start: 1;
    grid-column-end: 9;
    font-family: Kaiti;
    color: #611111ff;
    font-size: 2.5vw;
    line-height: 150%;
    width: 100%;

    align-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: left;
}


.textbox1l {
    grid-column-start: 6;
    grid-column-end: 12;
    font-family: Kaiti;
    color: #611111ff;
    font-size: 2.5vw;
    line-height: 150%;
    width: 100%;

    align-content: center;

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: right;
}


.textbox1m {
    grid-column-start: 8;
    grid-column-end: 12;
    font-family: Haiyi;
    color: #611111ff;
    font-size: 2vw;
    line-height: 150%;
    width: 100%;

    align-content: center;
margin-top: 80%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: right;
}


.textbox1n {
    grid-column-start: 1;
    grid-column-end:6;
    font-family: Haiyi;
    color: #611111ff;
    font-size: 2vw;
    line-height: 150%;
    width: 100%;

    align-content: center;
margin-top: 80%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;

    text-align: left;
}





/*Container*/

/*BOX*/
.wrapbx {
    grid-column: span 12;
    background-color: rgb(227, 217, 193, 0);
    height: 125%;
    align-content: center;
}

/*BOX*/

/*HEADER*/
.title1 {
    font-family: SansCN;

    color: #ffff;
    font-size: 10vw;
    align-content: center;
    text-align: left;

    background-color: #000000dd;
}

.title2 {
    font-family: Chopsu;

    color: #ffff;
    font-size: 5vw;
    align-content: center;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 1%;
    text-shadow: 3px 2px #767ee3;

    background-color: #1f2434dd;
}

.title3 {
    font-family: SansCN;

    color: #ffff;
    font-size: 10vw;
    align-content: center;
    text-align: right;

    background-color: #000000dd;
}

/*HEADER*/

/*bg*/
bg {
    position: fixed;
    z-index: -1;
}

body {
    background-image: url("BG1.jpg");

    position: absolute;
}

/*bg*/

/*Font*/

@font-face {
    font-family: SansCN;
    src: url("SourceHanSansCNLight.otf");
}

@font-face {
    font-family: Chopsu;
    src: url("ChopsUey.ttf");
}

@font-face {
    font-family: Chogo;
    src: url("ChogokubosoGothicRegular.ttf");
}

@font-face {
    font-family: YRDZST;
    src: url("YRDZSTMedium.ttf");
}

@font-face {
    font-family: Kaiti;
    src: url("AdobeKaitiStdFont.otf");
}


@font-face {
    font-family: Haiyi;
    src: url("HanyiSentyPagoda Regular.ttf");
}

/*Font*/

/*button*/

.homebutton {
    grid-column-start: 7;
}



html {
  scroll-behavior: smooth;
 }
 
 a {
  text-decoration: none;
  color: black;
 } 
 
 #INFLUENCE {
  opacity: 100%;
 } 

 #CONTRIBUTION {
  opacity: 100%;
 } 

 #INSPIRE {
  opacity: 100%;
 } 

 #DESIGN {
  opacity: 100%;
 } 



 #ANALYZE {
  opacity: 100%;
 }