:root {
    --bd-violet-rgb: 112.520718,44.062154,249.437846;
    --bg-gray-rgb:253,254,254;
    --bs-link-color: #FFFFFF;
    --bs-link-hover-color: #F0F0F0;    
    /*--bg-head-color:26,27,35; */
    --bg-head-color: 	5,	55,	124 ;
    --bs-white-rgb:240,240,240;
    --top-text-rem:16rem;
    --atm-img-height:720px;
    --atm-img-height:880px;
    
    --atm-head-padding:100px;    
    --ml-3rem:2rem;
    --ml-3-8rem:2.5rem;
    --header-height:2rem;
    --img-dontate-width:100vw;
    --body-height:100vh;
    --bs-body-font-size:3.5vh;
    --bs-body-sm-font-size:2.5vh;
    --bs-body-sm-line-height:2.8vh;
    --bs-body-line-height:4vh;
    --bs-btn-font-size: 3vh;
    --top-text-rem:14rem;
      --img-dontate-width:1320px;
      --bs-gutter-x: 0;
      --bs-gutter-y: 0;
     --main-size:100vw;      
  }
  
     .header55vh 
    {       
       width: calc(var(--img-dontate-width)-20px);
      
    }
  .header55vh  > div{
    height: 100%;
  }  
  

  
      @media (orientation: landscape) {
    	    
    	html {
			
			width: min(100vw, 100vh);
			height: min(100vw, 100vh);
    	}
    	.footer{
             font-size : calc(var(--bs-body-sm-font-size)*1.2);
            line-height: calc(var(--bs-body-sm-line-height)*1.1);
        }
 
    }
    
	@media (orientation: portrait) {
	    :root{
                  --bs-body-sm-font-size:2vh;
                  --bs-body-sm-line-height:2.2vh;	    
	    }
		html {
		    rotate: 0turn;
			width: min(100vw, 100vh);
			height: min(100vw, 100vh);
		}                
		.footer{
                  font-size : calc(var(--bs-body-sm-font-size)*1.2);
                  line-height: calc(var(--bs-body-sm-line-height)*1.1);
        }
         .sm{
                  margin-top:10px;
                  margin-bottom:10px;
            }

	}  
  
  
  @media screen and   (min-width: 100px){
     :root {
          --img-dontate-width:100vw;
         
     }
    .header55vh  > img{
      width: calc(var(--img-dontate-width)*0.95);
      padding:2px;
     } 
     .container, .container-fuild {
        width:100vw;   
       
        margin:auto;
    padding-right: 0!important;
        padding-left: 0!important;
     }
 }
 @media screen and   (min-width: 400px){
 :root {
          --img-dontate-width:100vw;
             --bs-body-font-size:3vh;
    --bs-body-line-height:3.5vh;     
    --bs-body-sm-font-size:1.8vh;
    --bs-body-sm-line-height:2.3vh;   
     }
  .header55vh  > img{
    width: calc(var(--img-dontate-width)*0.85);
    padding:10px;
  }  
 }
  @media screen and   (min-width: 450px){
    
    .header55vh  > img{
        width: calc(var(--img-dontate-width)*0.7);
        padding:10px;
    }  
 }
  @media screen and   (min-width: 500px){
       .header55vh  > img{
    width: calc(var(--img-dontate-width)*0.68);
    padding:10px;
  }  
 }
   @media screen and   (min-width: 550px){
       .header55vh  > img{
    width: calc(var(--img-dontate-width)*0.67);
    padding:10px;
  }  
 }
 @media screen and   (min-width: 600px){


  .header55vh  > img{
    width: calc(var(--img-dontate-width)*0.5);
    padding:10px;
  }  
     
 }
 
 
 
 @media screen and   (min-width: 1024px) {
     :root {
    --img-dontate-width:70vw;  
    --bs-body-font-size:4.8vh;
    --bs-body-line-height:5.5vh;
    --bs-body-sm-font-size:2.4vh;
    --bs-body-sm-line-height:3vh;      
     --main-size:1020px;    
     }
  .header55vh  > img{
    width: calc(var(--img-dontate-width)*0.4);
    padding:10px;
  }     
     .container, .container-fuild {
        width:100vw;   
        margin:auto;
                padding-right: 0!important;
        padding-left: 0!important;
     }
 }
 
@media screen {
    :root {
        --bs-gutter-x: 0;
    }
    .container,  .container-fluid{
        padding-right: 0!important;
        padding-left: 0!important;

       
    }
    
}


 
			/*
@media screen and   (min-width: 1200px) and (orientation: portrait) {
    
}
 @media screen and   (min-width: 2000px)  and (orientation: landscape)  {
     
 }*/

 

  html{
    font-size:   var(--bs-body-font-size);  
  }
  body{
      font-size:  var(--bs-body-font-size);  
      line-height: var(--bs-body-line-height);  
      width:100vw;
      overflow-x: hidden;
  } 
  .main{
      width: var(--main-size);
      display:flex;
       flex-direction:column ;
        justify-content: center;
         align-items: center;
  }
   
  input:invalid,select:invalid,textarea:invalid {
    box-shadow: 0 0 5px 1px red;
    /*background-color: #ffdddd;*/
 }

  a{
    text-decoration: none;
  }
  .bg-purple{
          background-color :#9B59B6 ;
  }
  .bg-green{
      background-color :#10be27;
  }
    .bg-blue{
      background-color:#2d61cc ;
  }
  .bg-darkorchid{
      background-color :#9932CC ;
  }
  .bg-deepskyblue{
      background-color :#00BFFF ;
  }
  .bg-limegreen{
      background-color :#32CD32;
  }
  .bg-purple{
      background-color :#9B59B6 ;
  }
  .bg-green{
      background-color :#10be27;
  }
    .bg-blue{
      background-color:#2d61cc ;
  }
  .bg-orange{
    background-color: #f39c12  ;
  }
  .bg-red{
    background-color: #CC00CC ;
  }
  .bg-Triadic{
    background-color:   #1ecbe1;
  }
 .sm{
     
      font-size:calc(var(--bs-body-sm-font-size));
      line-height:calc(var(--bs-body-sm-line-height));
 }

.f-ml{
     width:100%;
      font-size:calc(var(--bs-body-font-size)*0.6);
      line-height:calc(var(--bs-body-line-height)*0.6);
      text-align:left;
      margin-bottom:0.25rem;
 }


  .bg-wol{    
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 0.95));
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
  }
  .shodow{
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
  }
.wol-container{
    
     display: flex;
  /* 水平置中 */
  justify-content: center;    
  /* 垂直置中 */
    flex-wrap: wrap;
}


.footer{
      /*background-image: linear-gradient(135deg,rgba(38,101,173,0.79) 70%,rgba(255,255,255,0.44) 60%);
      background-color: rgba(255,255,255,0);*/
color:white;
      padding:1rem;
     clip-path: ellipse(80% 100% at top);
    /* background-image: radial-gradient( closest-side  at 1% 1%,  red 15%, green 2%, blue 30%);*/
    /* background-image: linear-gradient(135deg,rgba(38,101,173,0.79) 55%, rgba(111,133,221,0.44) 30%);*/
    background-image: linear-gradient( 120deg,   rgba(var(--bg-head-color), 0.8) 65%, rgba(111,133,221,0.44) 30%);
  
    clip-path: ellipse(50% 92% at top);
}
 .footer > div{
     margin:0 rem 1rem 0rem 0rem;
     display:grid;
      justify-content: center;    
 }

.page1{
    padding:0.618rem;
    
}


.bg-drak-serial{
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(var(--bg-head-color), 0.9), rgba(var(--bg-head-color), 0.73));
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(0,0,0,0.15);
    z-index: 9999;
    width:100vw;
}  
  

.wol-d-title {
    
    vertical-align: bottom;
     line-height:1.2rem;
     margin-bottom:0.2rem;
}
.wol-d-activity-icon{
    height:1rem;
    display:inline-block;
}
.wol-d-activity{
    margin-top:0.125rem;
    font-size:0.92rem;
    display:inline-block;
    border-bottom:2px solid black;
    
}

.wol-d-explian{
    font-size:0.8rem;
    margin-left:0rem;
    margin-bottom:0.2rem;
}
 .wol-d-select {
     justify-content: center;
 }
 
.wol-row1{
     flex-direction:row ;
 }
  .wol-col1{
     flex-direction:column;
 }
 .wol-text-box{
    font-size:0.7rem!important; 
    line-height:1rem!important;
    margin-top:0.25rem;
 }
 .wol-d-select > label{
       font-size:0.7rem!important; 
      line-height:0.8rem!important; 
     
 }
  
 .wol-d-caption{
    font-size:0.7rem!important; 
    line-height:0.8rem!important;
    margin-top:0.125rem;
 }
.btn-outline-primary {
     --bs-btn-hover-bg:transparent; /* #fd9c0d;*/
     --bs-btn-hover-color:#0d6efd;
      --bs-btn-focus-shadow:transparent;
      --bs-btn-active-shadow: none;
      --bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow), 0);
}
.btn-outline-info {
     --bs-btn-hover-bg:transparent; /* #fd9c0d;*/
     --bs-btn-hover-color:#0dcaf0;
      --bs-btn-focus-shadow:transparent;
      --bs-btn-active-shadow: none;
      --bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow), 0);
}
.btn-primary{
      --bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow), 0);
}


.form-check-input:focus {

  box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow), 0);
}
.input-group-text{
    font-size:0.7rem!important; 
    line-height:0.8rem!important;
}
input[type=text].wol-input  {
    font-size:0.7rem!important; 
    line-height:0.8rem!important;
}
input[type=text].wol-input:focus   {
  box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow), 0);
}
.wol-r{
    color:red;
}
.wol-tc{
  text-align: center;
}
.mm{
  width:var(--main-size);
}  

.invalid-feedback{
    font-size:0.6rem!important; 
}

.wol-b{
    color: rgba(var(--bg-head-color), 1.0);
}
.wol-gray-bg{
    
 background-image: linear-gradient(to bottom, rgba(var(--bg-gray-rgb), 1), rgba(var(--bg-gray-rgb), 0.95));
}