div{
    box-sizing: border-box;
}
body{
    font-family: "Noto Sans JP";
    background: #F0F8FF;
    height: 100%;
}


:root {
    --bg-color: #1e1e2f;
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --text-color: #f1f2f6;
    --card-bg: #2f2f3f;
}


    
@media screen and (min-width: 750px) {
  html {
    font-size: 56px !important; 
  }
}

    
.page-box {
     display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 100vh;

      .img-box{
        font-size:0px;
        width: 100%;
        max-width: 750px;
        margin:0 auto;
        height:4rem;

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
      }

    
    .page-container{
        max-width: 750px;
        margin:0 auto;
        padding:0px 0.533333rem;
        margin-bottom:0.533333rem;
        display:flex;
        width:100%;
        flex-direction: column;
        // justify-content:center;
        flex:1;
        
        header {
          display: flex;
         
          flex-direction: column;
          align-items:center;
          // margin-top: 0.266667rem;
         

   
          .logo{
            width: 2.72rem;
            height: 3.173333rem;
            
            font-size:0px;
            
            
            
            img{
                width: 100%;
                height: 100%;
            }
          }
          .title{
        
            color: #282828;
            text-align: center;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            font-family: "Noto Sans JP";
            font-size: 0.64rem;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            margin-top:-0.533333rem;

            span{
                color: #1A6BFF;
                font-size: 0.64rem;
                
            }
          }
        }
        .page-content{
            margin:0px 0.533333rem;
            flex-shrink: 0;
            margin-top: 0.4rem;
            border-radius: 10px;
            border: 1px solid #000;
            border-radius: 10px;
            border: 1px solid #1A6BFF;
            background: #FFF;
            padding:0.266667rem;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            .title{
                color: #1A6BFF;
                text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                font-family: "Noto Sans JP";
                font-size: 0.426667rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-align: center;


            }
            ul{

                li{
                    color: #000;
                    font-family: "Noto Sans JP";
                    font-size: 0.346667rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin-bottom: 0px;
                    padding-left: 0.48rem;
                    position: relative;
                    margin-top:0.266667rem;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                    span{
                        color: #F42727;
                    }

                    &:before{
                        content: '★';
                        position: absolute;
                        left: 0;
                        color: var(--primary-color);
                    }
                }
            }
        }
        .box-1-box{
            max-width: 750px;
            display:block;
            position:relative;
            margin:0 auto;
            img{
                width: 100%;
            }
        }
        .box-1{
            max-width: 750px;
            padding:0px 0.533333rem;
            margin:0px 0.533333rem;
            .input-box{
        
            margin:0 auto;
            input{
                    font-size:0.32rem;
                    
                  width: 100%;
                  height: 0.933333rem;
                  text-align: center;
                  margin-top: 1rem;
                  
                  border-radius: 0.133333rem;
                  background: #ffffff;
                  border: 1px solid #1A6BFF;
                  color: #000;

                   
                }
                
            }
            .search-box{
                text-align:center;
                margin-top:0.426667rem;

                .btn{
                   
                    padding:9px 0px;
                    color: #FFFAFA;
                    font-family: "Noto Sans JP";
                    font-size: 0.426667rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                    width: 100%;
                    display: inline-block;

                    border-radius: 50px;
                    background: #1E64DE;
                    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                    
                }

            }
            .des-tips{
                text-align: center;
                
                color: #171717;
                font-family: "Noto Sans JP";
                font-size: 0.32rem;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-top:10px;
            }

        }
        .exem{
            background:#ffffff;
            
            text-align:center;
            .title{
                color: #FF0606;
                font-family: "Noto Sans JP";
                font-size: 0.373333rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                margin-top:0.373333rem;
            }
            margin-top:0.533333rem;
            border-radius: 0.4rem;
            overflow: hidden;
        }


        
        
    }

    .box-2-box{

            max-width: 750px;
            margin:0.4rem auto 0.8rem auto;
            display:none;
            // position:fixed;
            // top:50%;
            // width: 100%;
            // left: 50%;
            // transform:translate(-50%,-50%);
            
    
            .res-content{
                
                margin:0px 0.533333rem;
                flex-shrink: 0;
                position: relative;
                border-radius: 10px;
                border: 1px solid #1A6BFF;
                background: #FFF;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                max-width:750px;
                
                .tt-box{
                    display:flex;
                    
                    

                    .logo{
                        width: 2.4rem;
                        height: 2.4rem;
                        font-size:0px;
                        margin-left:-0.266667rem;
                        
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .title{
                        margin-top: 0.266667rem;
                        color: #1A6BFF;
                        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                        font-family: "Noto Sans JP";
                        font-size: 0.426667rem;
                        font-style: normal;
                        font-weight: 700;
                        line-height: normal;
                        text-align: center;
                        width: 100%;
                    }
                }
                
                .res-con{
                    padding:0px 0.453333rem 0.433333rem 0.453333rem;
                    ul{

                        border-left:1px solid #979797;
                        li{
                            color: #000;
                            font-family: "Noto Sans JP";
                            font-size: 0.346667rem;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            margin-bottom: 0px;
                            padding-left: 0.373333rem;
                            position: relative;
                            margin-top:0.266667rem;
                            span{
                                color:#FF0606;
                            }

                            
                        }
                    }

                    

                }
                
                
            }
            .btn-box{

                margin:0.586667rem 0.586667rem 0px 0.586667rem;
                border-radius: 50px;
                background: #1E64DE;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                color: #FFF;
                font-family: "Noto Sans JP";
                font-size: 0.32rem;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-align: center;
                padding:0.24rem 0.373333rem;
                -webkit-animation: button 1.5s cubic-bezier(.61, .2, .63, 1.36) infinite;
                        animation: button 1.5s cubic-bezier(.61, .2, .63, 1.36) infinite;


            }
            
        }

    footer {
        text-align: center;
        padding: 20px;
        background: #111;
        color: #666;
        font-size: 0.32rem;
        margin-top: auto;
        width: 100%;
        box-sizing: border-box;
        
      }
      footer a { margin: 0 8px; color: #444; }
      @keyframes button {
            0% {
                -webkit-transform: scale(1, 1);
                transform: scale(1, 1)
            }

            50% {
                -webkit-transform: scale(.96, .94);
                transform: scale(.96, .94)
            }
        }
   

    


}

.progress-container {
    display: none;
  width: 100%;
  height: 0.96rem;
  background-color: #F3F5F5;
  border-radius: 50px;
  overflow: hidden;
  position: relative;
 
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.progress-bar {
  height: 100%;
  width: 0%;
  transition: width 0.2s;
  background: linear-gradient(90deg, #7AA9FF 0%, #1A6BFF 100%);
}

.progress-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 0.96rem;
  text-align: center;
  font-weight: bold;
  color: #000;
  pointer-events: none;
}

@keyframes button {
    0% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    50% {
        -webkit-transform: scale(.96, .94);
        transform: scale(.96, .94)
    }
}

.layui-progress-bar{
   

    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 107, 107, 1) 100%), rgba(255, 255, 255, 1);
}
.layui-progress-big, .layui-progress-big .layui-progress-bar {
    height: 13px !important;
    line-height: 13px !important;
}
::-webkit-input-placeholder {
  color: #000;
  opacity: 1 !important;
}
::-moz-placeholder {
  color: #000;
  opacity: 1 !important;
}
:-ms-input-placeholder {
  color: #000 !important;
  opacity: 1 !important;
}
:-moz-placeholder {
  color: #000;
  opacity: 1 !important;
}
.placeholder {
  color: #000 !important;
  opacity: 1 !important;
}
#background-video {
  width: 100%;
  margin-top:0.453333rem;
}