/*----------------------------------vi
-------------------------------------*/
.vi-logo {
    width: 75%;
    z-index: 8;
    position: absolute;
    top: -10%;
    left: 0;
}

.vi-1 {
    position: relative;
    z-index: 0;
    width: 30%;
    margin-left: auto;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}

.vi-p1 {
    position: absolute;
    z-index: 1;
    width: 13%;
    right: 30%;
    top: 50%;
}

.vi-p2 {
    position: absolute;
    z-index: 2;
    width: 23%;
    right: 31%;
    top: 62%;
}

.vi-date {
    width: 45%;
    position: absolute;
    z-index: 4;
    left: 5%;
    bottom: 5%;
}

.vi-check {
    width: 25%;
    position: absolute;
    z-index: 3;
    left: 23%;
    bottom: 7%;

}

.vi-pen {
    width: 38%;
    position: absolute;
    z-index: 4;
    left: 10%;
    bottom: 23%;

}

.vi-choes {
    width: 17%;
    position: absolute;
    z-index: 5;
    left: 17%;
    bottom: 31%;
}

/*----------------------------------color
-------------------------------------*/
.red {
    color: var(--sub-color)
}

/*----------------------------------section-way
-------------------------------------*/
.sectionpt{ margin-top: var(--sectionpd);}
.section-way {
    margin-top: var(--sectionpd);
}

.col-way__L {
    flex: 0 0 auto;
    width: 8%;
    background-image: url(../img/way/dec1.svg);
    background-position: right top;
    background-size: auto 90%;
    background-repeat: no-repeat;
    margin-top: -8rem;
}

.col-way__R {
    flex: 0 0 auto;
    width: 6%;
    background-image: url(../img/way/dec2.svg);
    background-position: left top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    margin-top: 4rem;
}

.box-w1 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.box-w1-1 {
    font-size: 1.2rem;
}

.box-w1-1-1 {
    width: 30px;
    height: 30px;
    color: #ffffff;
    background-color: var(--main-color);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}

.box-w2 {
    color: #000;
}

.olnum li {
    margin-bottom: 0.5rem;
}

/*-------------------------------------wrapper-gifts
-------------------------------------------------*/
.wrapper-gifts {
    margin-top: var(--titlepd);
    margin-bottom: var(--sectionpd);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.wrapper-gifts li {
    text-align: center;
    margin-bottom: 1rem;
}

.box-gift__title {
    color: var(--main-color);
    margin-top: 0.5rem;
    line-height: normal;
}

.box-gift__pic {
    position: relative;
    /*      width: 100%;
    height: 100%; */
}

.box-gift__picbg {
    z-index: 0;
    left: 0;
    top: 0;
    background-color: #BCD1CE;
}

.box-gift-pic__t {
    position: absolute;
    z-index: 1;
    color: #ffffff;
    text-align: center;
    margin-top: 10%;
    font-size: 0.9rem;
}

.box-gift-pic__t img {
    width: 60%;

}

@media screen and (min-width:1200px) {
    .wrapper-gifts {
        max-width: 1400px;
    }
}

/*-----------------------------section-mission
--------------------------------------------*/
.section-mission {}

.box-mission__decline {
    position: absolute;
    z-index: 0;
    background-image: url(../img/all/dec-blueline.svg);
    background-repeat: repeat-x;
    width: 60%;
    height: 180px;
    display: block;
    bottom: 3%;
}

.box-mission-decbook {
    position: absolute;
    z-index: 1;
    display: block;
    width: 80%;
    bottom: 0;
    right: 0;
}

.box-mission-decblackline {
    width: 50%;
}

.box-mission__titile {
    border: solid 2px #000000;
    background-color: #ffffff;
    color: #000;
    padding: 0.5rem 1.5rem;
}

.col-mission__dividedbar {
    flex: 0 0 auto;
    width: 15px;
    border: solid 2px #000000;
    border-bottom: none;
    background-color: #ffffff;
}
.col-mission__dividedbar.bm { border-bottom:solid 2px #000000;}
.col-mission__dividedbar.ml {
    margin-left: -2px;
}
.col-mission__dividedbar.mr {
    margin-right: -2px;
    margin-left:月人月人;
}
.missionlist {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: var(--rowpd);
    padding-bottom: var(--rowpd);
    --missioncolor: #000000;
}

.missionlist.w {
    --missioncolor: #ffffff;
}

.missionli__title {
    font-size: 1.2rem;
    width: 100%;
    color: var(--missioncolor);
    padding-bottom: 1rem;
    border-bottom: solid 1px var(--missioncolor);
}

.misdsionli__des {
    color: var(--missioncolor);
    margin-top: 1rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.mission-mark {
    background-image: url(../img/all/bg-mark.svg);
    background-size: contain;
    color: #ffffff;
    text-align: center;
    font-weight: normal;
    font-size: 0.8rem;
    background-color: transparent;
    background-repeat: no-repeat;
    font-family: 'NotoSansTC', serif;
    padding: 1rem;
    display: inline-block;
    float: right;
    margin-top: -1rem;
}

/*------------------------------section-mission1
-----------------------------------------------*/
.col-mission1__main{
background-color: var(--main-color);}
.section-mission1 {background-color: var(--main-color);}
.missionlist__01 li {
    padding-left: 0rem;
    padding-right: 0rem;
    margin-bottom: 2.5rem;
}

.box-mission1__main--in {
    width: 100%;
    margin-left: 0%;
}
.col-mission1_dec{
    background-color: transparent;
}

.ani-1-msak {
    width: 100%;
    position: relative;
    z-index: 3;
    top: auto;
    bottom: 0;
    /* height: 150px; */
    overflow: hidden;
   
}
.ani-1-ball1 {
    position: absolute;
    z-index: 2;
    width: 50%;
    left: 50%;
    bottom: 18%;
}

.ani-1-ball2 {
    width: 50%;
    left: 0%;
    bottom: 15%;
    position: absolute;
    z-index: 1;
}
.missionlist__01 li {
    padding-left: 1rem;
    padding-right: 1rem;
}

.missionlist__03 li {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
    .section-mission1 {background-color:transparent;}
    .col-mission1_dec{
        background-color: #e7f0eb;
    }
    
}
@media screen and (min-width: 1024px) {
  
    
}
@media screen and (min-width: 1280px) {
    .ani-1-msak {
        position: absolute;
        bottom: 0;
        top: auto;
    }

    
    .box-mission1__main--in {
        width: 90%;
        margin-left: 10%;
    }
    .missionlist__01 li {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .missionlist__03 li {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
}
/*section-mission2------------------------
------------------------------------------*/
.col-ani--2L{
    background-color: var(--main-color);
}
.box-ani-2L-circle{
    position: absolute;
    z-index: 1;
    top:2rem;
    left: -5rem;

}
.box-ani-2R-circle-1{
    width: 40%;
    position: absolute;
    z-index: 3;
    top:10%;
    right: 3.5%}
.box-ani-2R-bg{ 
    position: absolute;
    z-index: 2;
width: 100%;}
.box-ani-2R-circle-2{
    width: 53%;
    position: absolute;
    z-index: 1;
    top:30%;
    left: 0%
}
.col-ani--2L{order:2}
.col-ani--2R{order:1}
.col-mission2_dec{
    background-color: var(--main-color);
}
@media screen and (min-width: 1440px) {
    .col-ani--2L{order:1}
    .col-ani--2R{order:2}
    .col-mission2_dec{
        background-color: transparent;
    }
    
}
/*------------------------------section-mission3
-----------------------------------------------*/
 .section-mission3{
    background-color: var(--main-color);
 }
 .ani3-msak{
    position: relative;
    z-index: 2;
}
.ani3-ball1{  position: absolute;
    width: 49%;
    top:40%;
    z-index: 1;   
}
.ball31{
    background-color: var(--main-color);  
    border-radius: 50%;   
}
@media screen and (min-width: 1280px) {
    .section-mission3{
        background-color: transparent;
     }
    
}
/*------------------------------section-mission4
-----------------------------------------------*/
.col-mission4_dec{  background-color: #b5c4e2;}
.col-ani--4L{
    background-color: #b5c4e2;
}
.box-ani-4L-bg{
    position: relative;
    z-index: 2;
}
.box-ani-4L-circle{
    width: 50%;
    position:absolute;
    z-index: 1;
left: 30%;
top:-3%
}
.box-ani-4L-circle-in{
    background-color: var(--main-color);
    border-radius: 50%;
}
.box-ani-4R-bg{position: relative;
    z-index: 2;}
.box-ani-4R-circle{
    width: 47%;
    position:absolute;
    z-index: 1;
right: 19%;
top:0%
}
.box-ani-4R-circle-in{  background-color: #F2A8C8;
    border-radius: 50%;}

    @media screen and (min-width: 1280px) {
    .col-mission4_dec{  background-color:transparent;}
    }
/*------------------------------section-mission5
-----------------------------------------------*/
.ani5-msak,.ani5-msak2{
    position: relative;
    z-index: 2;
}
.ani5-ball1{
    position: absolute;
    z-index: 1;
    width: 50%;
    top:5%;
    left: 0;
}
.ball51{
    background-color: #F2A8C8;
    border-radius: 50%;
}
.ani5-ball2{
    position: absolute;
    z-index:1;
    width: 49%;
    top:17%;
    right: -1%;
}
.ball52{
    background-color: var(--main-color);
    border-radius: 50%;
}
@media screen and (min-width: 1024px) {
.col-ani5--R,.col-ani3--R,.col-ani1--R{
    height: 110px;
    overflow: hidden;
    
}
}
@media screen and (min-width: 1400px) {
    .col-ani5--R,.col-ani3--R,.col-ani1--R{
        height:auto;
        
    }
    }
/*-------------------------------------section-mainact
----------------------------------------------------*/
.col-maindec__L--in ,.col-maindec__R--in {
    height: 100vh;
}
#main{
    position: relative;
    z-index: 10;
}
.section-main{
    margin-top: var(--sectionpd);
    overflow: hidden;
}
.col-maindec__R{
    height: 80px;
}
.box-main-dec__stone{
   
    position: relative;
    top:0;
    left:auto;
    right: -3%;
    z-index: 3; 
    width: 100px; 
      
}
.box-main-dec__book{
    position: absolute;
    top:-20%;
    left:0%;
    z-index: 2; 
    width: 100px;
}
.box-main-dec__triangle{
    position: absolute;
    z-index: 1;
    right: -1%;
    top: 0;
    width: 100%;
    height: 90vh;
    background-image: url(../img/main/dec-triangle.svg);
    background-repeat:repeat-y ;
    display: none;  
    background-position: right top; 
    background-size:40px auto ;
   }
   .box-main-dec__book2{
    position: absolute;
    top:5.5%;
    right:-20%;
    z-index: 2; 
    width: 150px;  
}
.infonote br{
    display: none;
}
.section-main{
    padding-left: 1rem;
    padding-right: 1rem;
}

@media screen and (min-width: 768px) {
    .col-maindec__R{
        height: auto;
    }
    
    .box-main-dec__triangle{display: block;}
.box-main-dec__book2{
    width: 300px;  
    top:auto;
    right: -5%;
    bottom: 0px;
}
.box-main-dec__book{
    position: absolute;
    top:auto;
    bottom: -100px;
    left:-10%;
    right: auto;
    width: 80%;
   }
.section-main{
    padding-left: 0rem;
    padding-right: 0rem;
}
.box-main-dec__stone{
    position: absolute;
    top:0;
    left:-3%;
    right: auto;
    z-index: 1;  
    width: 50%;
      
}
/* .box-main-dec__book{
    position: absolute;
    top:-20%;
    left:-50%;
    z-index: 2; 
    width: 100%;
    float: right;  
}
 */
}
@media screen and (min-width:1024px) {

}
@media screen and (min-width:1200px) {
    .box-main-dec__triangle{
        background-size:80px auto ;
      }
      .infonote br{
        display: block;
    }
    
}
/*------------------------mainactlist
------------------------------------*/
.mainactlist li{
    background-color: rgba(255,255,255,0.5);
    border-radius:10px;
    padding: 0.5rem;
}
.rowlisttb > *{
    padding:1rem 0.5rem;
} 
.rowlisttb.btm{
    border-bottom: 1px #000000 solid;
 
}
.col-rowlist__titile{
    font-weight: bold;
    flex:0 0 auto;
    width: 50px;
    border-right: 1px #000000 solid;
    line-height: 1.1rem;
}
.fnicon{
    padding-left: 20px;
    position: relative;
}
.fnicon:before{
    font-family: 'Font Awesome 6 Free';
    left: 0px;
    top:2px;
    position:absolute;
    font-weight: 900;
}
.box-info__time:before{
    content: '\f017';   
}
.box-info__place:before{
    content: '\f124';  
}
.item-spec br{
    display: block;
}

@media screen and (min-width:768px) {
    .mainactlist li{
        background-color:transparent;
     
    }
    .item-spec br{
        display: none;
    }   

}

/*-------------------------------*/
.lecturelist{}
.lecturelist li{
    border: #000 1px solid;
    border-radius: 5px;
 }
 .wrapper-lecture{
    padding: 1rem;
 }
 .box-lecture__title{
    font-size: 0.9rem;
    color: #ffffff;
    background-color: #000000;
    padding: 1rem;
 }
 .box-lecture__item{
    font-size: 1.2rem;
 }
 .act-item{
    font-size: 1.2rem;
    color: var(--main-color);
 }