@charset "utf-8";
/* CSS Document */
body{
  background-color:#eeeeee;  
}

#Nav{
    color: #ffffff;
     height: auto !important;
}
#Nav>.container{
     padding-left: 100px;
 
}
#Nav>.container>b{

     font-size: 20px; 
}
.NavigationBox_0{

    height: 66px;
    top:0;
position:fixed;

box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
 transition-property: height;

             transition-duration: 0.5s;

padding-bottom: 13px;


}
.NavigationBox_0>.container{
  margin-top: 13px;
    margin-bottom: 13px;
    line-height: 40px;  height: 40px;
}
.NavigationBox_1{
z-index:999;
    height:46px !important;
    top:0;
position:fixed;
    background: rgba(63,81,181,0.7);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);

    padding-top: 5px;
    padding-bottom: 5px;
    transition-property: height;

             transition-duration: 0.5s;



}

.NavigationBox_0>div{
    margin-bottom: 0px !important;
}
.NavigationBox_1>div{
    margin-bottom: 0px !important;
}


.NavigationBox_1>.container{
    height: 40px;
    margin-top:0px;
    margin-bottom: 13px;
    line-height: 38px;  
}

.nav-link>span{
    margin-right: 6px;
}


.Banner{
    height: calc(100vh);
    background: url("../Image/BackgroundIndex.jpg") no-repeat center center;
/*    background: url("https://blog.dnomd343.top/img/bg/portrait-003.jpg") no-repeat center center;*/
    background-size: cover;
    z-index: -1; 
    padding-left: 0px;
    padding-right: 0px;
}
.Banner>div{
        height: calc(100vh);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
.Banner>div>div{
    color: #ffffff;
}
.Banner>div>div>div:first-child{
font-size: 36px;
height: 88px;
width: 100%;
line-height: 88px;
text-align: center;
font-weight: bold;
/*position:absolute; */
/*bottom:calc(45vh);
right: 0px;*/
padding-top: calc(45vh);
}
.Banner>div>div>div:last-child>span{
    font-size: 28px;
    color: hsla(0,0%,100%,0.4); 
}





.BannerContent{
    height: calc(70vh);

    padding-left: 0px;
    padding-right: 0px;
    /*background: url("../Image/201910251013370d509bbe90b8cc68b2d57a314eef0a29.jpg") no-repeat center center;*/

    background-size: cover;
    z-index: -1; 


}
.BannerContent>div{
    height: calc(70vh);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    padding-top: calc(28vh);


}
.BannerContent>div>h1{
/*padding-top: 280px;*/

    height: 50px;
    line-height: 50px; 

    color: #FFFFFF;
    font-size: 32px;
    text-align: center;font-weight: normal; 
    margin-bottom: 0px;

   /* padding-top:calc(50% - 120px);*/

}
.BannerContent>div>h1>input{
    width: 300px;
     margin-left: auto;
    margin-right: auto;
    border: 1px solid hsla(0,1%,30%,1.00);
    background-color: hsla(0,0%,0%,0.07);color: hsla(0,0%,100%,1.00); 
}
.BannerContent>div>button{

     margin-left: auto !important;
    margin-right: auto !important;

}
.BannerContent>div>dd{

    height: 25px;
    line-height: 25px; 

    color: #FFFFFF;
font-size: 16px;
    text-align: center; font-weight: normal; 
    margin-bottom: 0px;
    margin-top: 16px;


}
.BannerContent>div>dt{

    height: 25px;
    line-height: 25px; 

    color: #FFFFFF;
    font-size: 16px;
    text-align: center; font-weight: normal; 
    margin-bottom: 0px;
    margin-top: 4px;


}
.BannerContent>div>div{
        height: 50px;
    line-height: 50px; 

    color: #FFFFFF;
    font-size: 32px;
    text-align: center;font-weight: normal; 
    margin-bottom: 0px;
    padding-top: 38px;

}
.BannerContent>div>dd>span{
    padding-right: 10px;
}
.BannerContent>div>dt>span{
    padding-right: 10px;
}
.Logo:link {
    color: #FFFFFF;text-decoration: none;
}
.Logo:visited {
    color: #FFFFFF;text-decoration: none;
}
.Logo:hover {
    color: #FFFFFF;text-decoration: none;
}
.Logo:active {
    color: #FFFFFF;text-decoration: none;
}

.nav{
    float: right;font-weight: bold;
    padding-right: 100px;line-height: 36px !important;  height: 40px;
}
.nav>.nav-item{ height: 40px;line-height: 36px !important;}
.nav>.nav-item>.nav-link{ height: 40px;line-height: 36px !important;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    }
.nav>.nav-item>.nav-link:link{color: #FFFFFF;font-weight: normal; }
.nav>.nav-item>.nav-link:visited{color: #FFFFFF;}
.nav>.nav-item>.nav-link:hover{color:#30A9DE;background-color: hsla(0,0%,0%,0.2); }
.nav>.nav-item>.nav-link:active{color: #FFFFFF;}


.DownAnimation_1{
    display:none;
}
.DownAnimation{

text-align: center;

height: 88px;
width: 100%;

position:absolute; bottom:0;right: 0px;
    animation:myfirst 2s infinite linear;
    -moz-animation:myfirst 2s infinite linear; /* Firefox */
    -webkit-animation:myfirst 2s infinite linear; /* Safari and Chrome */
    -o-animation:myfirst 2s infinite linear; /* Opera */
}


@keyframes myfirst
{
    0%   {height:100px;}
    25%  {height:88px;}
    50%  {height:100px;}
    75%  {height:88px;}
    100% {height:100px;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {height:100px;}
    25%  {height:88px;}
    50%  {height:100px;}
    75%  {height:88px;}
    100% {height:100px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {height:100px;}
    25%  {height:88px;}
    50%  {height:100px;}
    75%  {height:88px;}
    100% {height:100px;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {height:100px;}
    25%  {height:88px;}
    50%  {height:100px;}
    75%  {height:88px;}
    100% {height:100px;}
}



.MainBody_1{
    position:absolute; 
    z-index:888;
    top:calc(90vh); 
    transition-duration: 0.5s;

    left: 0;
    right: 0;
    margin: auto;

}
.MainBody{

    position:absolute; 
    top:calc(100vh); 
    transition-duration: 0.5s;
    left: 0;
    right: 0;
    margin: auto;



}


#MainBody>div>div:nth-child(2)>div:nth-child(1){

/*    width: 88%;
    margin-left: 5.5%;
    margin-right: 5.5%;*/

    background-color: #ffffff;
padding-bottom: 40px;
    -webkit-box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    border-radius: 0.5rem;
    padding-top: 60px;  
    padding-bottom: 100px; 
    width: 88%;
/*    margin-left: 6%;
    margin-right: 6%;*/
    margin-left: auto;
    margin-right: auto;
    max-width: 1110px;
/*        padding-left: 100px;
    padding-right: 100px;*/
 

}



/*#MainBody>.row{
background-color: #ffffff;
padding-bottom: 40px;
    -webkit-box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    border-radius: 0.5rem;
    padding-top: 88px;  
    padding-bottom: 40px; 
}
*/
#MainBody>div>div:nth-child(2)>div{
    width:;
}
#MainBody>div>div:nth-child(2)>div>div{padding-bottom: 40px;}
#MainBody>div>div:nth-child(2)>div>div>a>img{display: block;width: 100%;    height: 10rem;    object-fit: cover;    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);    border-radius: 0.25rem;}
#MainBody>div>div:nth-child(2)>div>div>h1{    margin-top: 0px;    margin-bottom: 0px;    height: 58px;    overflow: hidden;        white-space: nowrap;        text-overflow: ellipsis;}
#MainBody>div>div:nth-child(2)>div>div>div>a{margin-top: 5px;margin-bottom: 5px;height: 56px; line-height: 28px; color: #718096;font-size: 18px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;text-decoration: none;}
#MainBody>div>div:nth-child(2)>div>div>div>a:hover{color:#30a9de;}
#MainBody>div>div:nth-child(2)>div>div>dd{height: 36px;    line-height: 36px;    color: #718096;}
#MainBody>div>div:nth-child(2)>div>div>h1>a:link {    color:#3c4858;    text-decoration: none;font-size: 28px;font-weight: bold; }
#MainBody>div>div:nth-child(2)>div>div>h1>a:visited {    color: #3c4858;text-decoration: none;}
#MainBody>div>div:nth-child(2)>div>div>h1>a:hover {    color: #30a9de;;text-decoration: none;}
#MainBody>div>div:nth-child(2)>div>div>h1>a:active {    color: #3c4858;text-decoration: none;}





.MainBodyContent{

    position:absolute; 
    top:calc(66vh); 
    transition-duration: 1s;
    left: 0;
    right: 0;
    margin: auto;



}
.MainBodyContent_1{

    position:absolute; 
    top:calc(60vh); 
    transition-duration: 1s;
    left: 0;
    right: 0;
    margin: auto;



}

#Bottom{
      

   margin-top: 61px;text-align: center;

}
#Bottom>img
{width: 160px; height: 160px; border-radius: 50%; background: #FFF; box-shadow: rgba(255,255,255,1) 0 0 0 5px, rgba(0,0,0,1) 0 0 5px 4px; transition: transform 600ms;}

#Bottom>img:hover{

            transform: rotate(360deg);
            transition: transform 600ms linear;
        }



#Bottom>p>a:link {
    line-height: 88px;

    font-size: 16px;

    color: #5E5E5E;
    text-decoration: none;
}
#Bottom>p>a:visited {
    color: #5E5E5E;
    text-decoration: none;
}
#Bottom>p>a:hover {
    color: #000000;
    text-decoration: none;
}
#Bottom>p>a:active {
    color: #5E5E5E;
    text-decoration: none;
}

.Upward{
/*    z-index: 888;*/
    height: 46px !important;
    width: 46px !important;
    background-color: #fff;
    position: fixed;
    bottom: -100px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    right:15%;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    transition: background-color 0.2s ease-in-out, bottom 0.3s ease;
    border-radius: 4px;transition-duration: 0.5s;cursor:pointer;text-align: center;line-height: 46px; color: #5E5E5E;

}

.Upward_1{
/*    z-index: 888;*/
    height: 46px !important;
    width: 46px !important;
    background-color: #fff;
    position: fixed;
    bottom: 30px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    right:15%;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    transition: background-color 0.2s ease-in-out, bottom 0.3s ease;
    border-radius: 4px;transition-duration: 0.5s;cursor:pointer;text-align: center;line-height: 46px; color: #5E5E5E;

}


.Directory_h1,.Directory_h2,.Directory_h3,.Directory_h4{
    display: block;
    width: 80%;
    color: #3c4858;
    text-decoration: none;
    height: 21px;
    font-size: 16px;
    margin-bottom: 6px;
    overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}
.Directory_h1{text-indent: 20px; }
.Directory_h2{text-indent: 40px; }
.Directory_h3{text-indent: 60px; }
.Directory_h4{text-indent: 70px; }
#Directory>div{
    font-size: 21px;
    /*padding*/
    margin-bottom: 6px;
}
#Directory>div>span{
    font-size: 21px;
}
#Directory{
right: 0px; 
width: 16%;
top:calc(75vh);
position:fixed;
z-index: 99999;
 
color: #3c4858;

}

.MainBodyContent>.row>.markdown-body{
   padding-left: 100px;
    padding-right: 100px;
}


.MainBodyContent{

    position:absolute; 
    top:calc(66vh); 
    transition-duration: 0.5s;
    left: 0;
    right: 0;
    margin: auto;



}




#MainBodyContent>.row>div:nth-child(2)>.row{
    background-color: #ffffff;
padding-bottom: 40px;
    -webkit-box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
    border-radius: 0.5rem;
    padding-top: 40px;  
    padding-bottom: 100px; 
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1110px;
/*    padding-left: 100px;
    padding-right: 100px;*/
}


#MainBodyContent>div>h1{
    width:calc(100% - 200px);
    font-weight: bold;font-size: 2em;
    margin-left: 100px;
    margin-right: 100px;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
    margin-bottom: 0.75em;
}

#About>.row>div{
    text-align: center; 
}

#About>.row>div>a{
    font-size: 28px;
    color: #718096;text-decoration: none;
}


#About>.row>div>a:hover{
    color: #0d6efd;
}

#About>.row>div:nth-child(1){
    font-size: 38px;padding-top: 40px;  
}
#About>.row>div:nth-child(2){
    font-size: 16px;padding-top: 20px; padding-bottom: 20px; 
}







#NavMd{
    padding-left: 16px !important;
    padding-right: 16px !important;
}

#NavMd>div{



}
#NavMd>ul{

    padding-right: 0px;

}
#NavMd>ul>li>span{
   font-size: 28px;
   width: 40px;
   height: 40px;

   display: block;
       text-align: center;
    line-height: 40px;
}

.NavMd{
    height: auto !important;
}
#NavMd>ul:nth-child(3){
    height: auto;
    width: 100%
}
#NavMd>ul:nth-child(3)>li{
/*    display: block;*/
    width: 100%;
    float: left;
    text-align: center;


}

.LittleHands{
    cursor:pointer;
}