* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Inclusive Sans', sans-serif;
     font-family: 'Kanit', sans-serif;
     font-family: 'Oswald', sans-serif;
     font-family: 'Poppins', sans-serif;
     font-family: 'Roboto', sans-serif;
 }

 body {
     overflow-x: hidden;
 }

/* 容器样式设置 - 全屏居中布局 */
 .container1 {
    width: 100%;           /* 宽度设置为父容器的100% */
    height: 100vh;         /* 高度设置为视窗高度的100% */
    display: flex;         /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center;    /* 垂直居中对齐 */
    background-image: url('/images/bck01.png'); /* 设置背景图片路径 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-color: rgba(255, 0, 0, 0.5); /* 设置半透明红色背景色 */
}

 nav {
     background-color: rgb(255, 255, 255);
     outline: 1px solid black;
 }

 nav .collapse ul {
     position: relative;
     left: 300px;
     width: 600px;
 }

 nav .collapse ul li {
     padding: 10px;
     margin-left: 10px;
 }

 nav .collapse ul li a {
     font-size: 19px;
     padding-left: 15px;
     padding-right: 10px;
     font-weight: bold;
 }

 nav .collapse ul li a::after {
     content: '';
     width: 0%;
     height: 3px;
     background: rgb(236, 81, 9);
     display: block;
     margin: auto;
     transition: 0.4s;
 }

 nav .collapse ul li a:hover::after {
     width: 100%;
 }

 #carouselExampleCaptions {
     margin-top: 84px;
 }


 /* cards */
 .heading {
     font-size: 35px;
     text-align: center;
     margin-top: 20px;
     font-weight: bold;
     margin-bottom: 0px;
 }

 #carouselExample .carousel-inner {
     background-color: rgb(95, 113, 113);
 }

 #carouselExample .carousel-inner .carousel-item .container .card {
     border: none;
 }

 #carouselExample .carousel-inner .carousel-item .container .card img {
     width: 100%;
     height: 230px;
 }

 #carouselExample .carousel-inner .carousel-item .container .card p {

     text-align: justify;
     padding: 0 3px;

 }

 #carousel .carousel-inner .carousel-item .box {

     border: 1px solid red;
 }

 .container0 .row {
     margin: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .container0 .row {
     width: 1000px;
     margin: 20px auto;
 }

 .container0 .row .col img {
     width: 100%;
     height: 200px;
     border-radius: 10px;
     transition: 1s all;
 }

 .container0 .row .col img:hover {

     box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.589);

 }


 .gallery {

     width: 80%;
     height: 100vh;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: repeat(12, 1fr);
     grid-gap: 20px;
     margin: 10px auto;

 }

 .gallery .common {
     border-radius: 10px;
     transition: 0.4s all;
 }

 .gallery .common:hover{
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.59);
    
 }

 #one {

     background-image: url('/images/z4.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 1;
     grid-column-end: 2;
     grid-row-start: 1;
     grid-row-end: 7;

 }

 #two {

     background-image: url('/images/z1.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 2;
     grid-column-end: 4;
     grid-row-start: 1;
     grid-row-end: 5;

 }

 #three {
     background-image: url('/images/z2.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 4;
     grid-column-end: 6;
     grid-row-start: 1;
     grid-row-end: 5;

 }

 #four {
     background-image: url('/images/z3.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 2;
     grid-column-end: 4;
     grid-row-start: 5;
     grid-row-end: 8;

 }

 #five {
     background-image: url('/images/z5.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 4;
     grid-column-end: 6;
     grid-row-start: 5;
     grid-row-end: 9;

 }

 #six {
     background-image: url('/images/z7.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 2;
     grid-column-end: 4;
     grid-row-start: 8;
     grid-row-end: 14;

 }

 #seven {
     background-image: url('/images/z8.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 4;
     grid-column-end: 6;
     grid-row-start: 9;
     grid-row-end: 14;


 }

 #eight {
     background-image: url('/images/z6.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 1;
     grid-column-end: 2;
     grid-row-start: 7;
     grid-row-end: 14;


 }

 #nine {
     background-image: url('/images/z9.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 6;
     grid-column-end: 9;
     grid-row-start: 1;
     grid-row-end: 8;


 }

 #ten {
     background-image: url('/images/z10.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     grid-column-start: 6;
     grid-column-end: 9;
     grid-row-start: 8;
     grid-row-end: 14;


 }


 .container3 {
     margin-top: 10px;
     width: 100%;
     background-image: url('/images/b.jpg');
     backdrop-filter: brightness(80%);
     background-repeat: no-repeat;
     background-size: cover;
     z-index: -1;
 }

/* 容器样式类，用于设置全屏高度并添加背景亮度效果 */
 .containermy {
    /* 设置容器高度为视口的100%，使其占据整个屏幕高度 */
     height: 100%;
    /* 使用backdrop-filter属性为容器背景添加亮度滤镜效果 */
    /* brightness(50%)将背景亮度降低到原来的50%，使整体变暗 */
     backdrop-filter: brightness(50%);
 }


 .container3 .row .col {
     margin-left: 100px;
     margin-bottom: 100px;

 }

 .container3 .row .r-col {
     margin-right: 100px;
     
 }

 .container3 .row .col .content {
     border: 1px solid #1f1b1b;
     padding: 0 15px;
     color: white;
     background: #1f1b1b;
     border-radius: 10px;
     
 }

 .container3 .row .col .content h3 {

     font-size: 30px;
     font-weight: bold;
     margin-bottom: 10px;
     margin-top: 80px;
 }

 .container3 .row .col .content .p1 {

     font-size: 18px;
     
 }

 .container3 .row .col .content .p2 {

     font-size: 15px;
     margin-bottom: 30px;

 }

 .container3 .row .col .content .p1 span {

     color: red
         
 }

 .container3 .row .col .img-class img {

     width: 100px;
     height: 100px;
     border-radius: 50%;
     position: relative;
     left: 200px;
     top: 60px;
     border: 2px solid white;
     outline: 2px solid black;


 }

 .container3 .row .col p {

     text-align: justify;

 }

 .container3 .row .left-col {
     margin-right: 100px;

 }