@charset "utf-8";

.blank-header{background-color: #03081B}
.white-header a{color:var(--main);}
.white-header .lang-wrap{color:var(--main);}
.white-header .lang-wrap button{color:var(--main);border:1px solid var(--main);}
.white-header .lang-wrap li a{background-color: var(--main);color:#fff;}
.white-header.bg-ch{background: transparent;}
.white-header .ham-btn>span{background:#000;}

.subpage {overflow:hidden;}

.subpage .visual{position:relative;width:100%;height:100vh;overflow: hidden;}
.subpage .visual .bg img{width:100%;}



/* 关于睿博 contact.html */
#about .visual{background-color: rgb(1, 1, 29);}
#about .visual .con-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    color: #fff;
}
#about .visual .con-tit-l{text-align: center;}
#about .visual .con-tit-l span{font-size: var(--com-txt-bg);}
#about .visual .con-tit-l h1{font-size: var(--com-txt-max2);margin-bottom:40px;margin-top: 40px;}
#about .visual .con-tit-l p{width: 750px;font-size: var(--com-txt-bg);line-height: 2em; word-wrap: break-word;word-break: normal;  }
#about .visual .con-tit-r { width: 400px;text-align: left;}
#about .visual .con-tit-r p{font-size: var(--com-txt);line-height: 2em;}
#about .about-title-txt{
    font-size: var(--con-tit-max1); margin: 50px 0 20px 0;line-height: 1.5em !important;
}
#about .about-title-txt1{
    font-size: 34px; line-height: 1.5em;margin-bottom: 0;text-align: center;font-weight: bold;
}
#about .about-title-txt2{
    font-size: 30px;
    line-height: 1.5em;
    margin-bottom: 1.5em;
    color: #808080;
}

#about .about-title-txt3{
  font-size: 30px; line-height: 1.5em;margin-bottom: 1.5em;color: #808080;
}
#about .clock-box{
    height: 600px;
    display: flex;
    background: url(../img/sub/clock.png) no-repeat 0 center;
    background-size: contain;
    margin-bottom: 100px;
    margin-top: -40px
}
#about .clock-box .left-box{width: 500px;position: relative;}
#about .clock-box .left-box img{opacity: 0;position: absolute;top: 180px;left: 110px;width: 350px;height: 240px;}
#about .clock-box .left-box img.active-img{opacity: 1;}
#about .clock-box .right-box{flex: 1;display: flex;justify-content: center;align-items: center}
#about .clock-box .right-box .list-box{width: 50%}
#about .clock-box .right-box .active-li-box{margin-bottom: 30px;overflow: hidden;height: 104px;position: relative;}
#about .clock-box .right-box .active-li-box .title{position:absolute;top:0;left:0;height: 102px;overflow: hidden}
#about .clock-box .right-box .active-li-box .title p{font-size: 34px;line-height: 1.5em;}
#about .clock-box .right-box  ul{padding-top: 30px;border-top: 1px solid #A6A6A6}
#about .clock-box .right-box  ul li{font-size: 30px;color: #A6A6A6;line-height: 2em;position: relative;padding-left: 30px;cursor: pointer}
#about .clock-box .right-box  ul li:hover{color: #000000;}
#about .clock-box .right-box  ul li::before{content: "•";position: absolute;left: 0;color: #A6A6A6;font-size: 1em;}
#about .clock-box .right-box  ul li:hover::before{color: #000000}
#about .about-three img, #about .about-four img{
  width: 100%;margin-bottom: 3em;
}
#about .run-seconds{ display: flex;margin-bottom: 100px;margin-left: 50px;}
#about .run-seconds .item{margin: 0 50px;}
#about .run-seconds p{ font-size: 24px;margin-top: 1em;}
#about .run-seconds .num{ font-size: 60px;color: #0562AF; font-weight: 900;}


#about .about-five{background:var(--bk);color:#fff;}
#about .about-five h1{text-align: center;padding: 100px 0 80px 0;margin: 0;}
#about .about-five p{font-size: 24px;}
#about .about-five .scroll-logo-box{width: 100%; overflow: hidden; position: relative;padding-top: 50px;}
#about .about-five .logo-scroll-wrapper {display: inline-flex; white-space: nowrap;animation: scroll 100s linear infinite;}
#about .about-five .logo-scroll-wrapper img { display: inline-block; width: auto; height: 60px; flex-shrink: 0;}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* 解决方案.html */
.tabbx{display: block;}

.service-com .visual{display: none !important;}
.service-com .visual .con-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: flex;
    justify-content: space-between;
}
#service .visual{background-color: rgb(1, 1, 29)}
.service-com .visual .con-tit-l{width: 470px;text-align: left;}
.service-com .visual .con-tit-l h2{margin-bottom:40px;font-size: var(--com-txt-max2);}
.service-com .visual .con-tit-l p{margin-bottom:20px;font-size: var(--com-txt-bg);}
.service-com .visual .con-tit-l h1{margin-bottom:20px;font-size: var(--com-txt-bg);text-align: left;line-height: 2em;word-break:normal}
.service-com .visual .con-tit-r ul{margin-bottom: 20px;list-style-type: disc;  padding-left: 20px; }
.service-com .visual .con-tit-r ul li{font-size: var(--com-txt-bg);line-height: 2em;}

.service-com .con-tab{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    margin:var(--mg-bg-mid) 0 calc(var(--mg-bg-mid) - 20px)
}
.service-com .con-tab ul{justify-content: center;gap:100px;}
.service-com .con-tab li { position: relative; }
.service-com .con-tab li:hover .dropdown-menu {
    display: block;padding-top: 10px;width: 100%;
}
.service-com .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 100;
}
.service-com .dropdown-menu li { padding: 10px 0; }

.service-com .con-tab li a{
    display:flex;padding:0 60px;height:55px;border-radius: 999px;align-items: center;justify-content:center;font-size: var(--page-tab);font-weight: 700;background:var(--bg1);
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}
.service-com .con-tab li a:hover{background:var(--main);color:#fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.service-com .con-tab li.tab-on a{background:var(--main);color:#fff;}
.service-com .con-tab li.tab-on .dropdown-menu a{background:var(--bg1);color:#000;}
.service-com .con-tab li.tab-on .dropdown-menu a:hover{background:var(--main);color:#fff;}

.service-com .tabbx-wrap{
     position: relative;
 }

.service-com .one-page{height: 100vh;}

.service-com .service-top{display: flex;justify-content: space-between;align-items: center;padding: 100px 0 100px 0;gap: 15px;}
.service-com .service-top.first{padding: 130px 0 100px 0;}
.service-com .service-top h1{font-size: var(--com-txt-max2);}
.service-com .service-top h2{font-size: 30px;margin-top: 2em;}
.service-com .service-top p{font-size: var(--com-txt);line-height:1.6;margin-top: 2em;word-break: break-word;}
.service-com .service-img img{width: 750px}

.service-com .service-detail h1{font-size: 50px;text-align: center;padding: 50px 0 30px 0;margin: 0;}
.service-com .service-detail .plan-wrap{padding:30px 0 100px 0;  display: flex;gap: 30px;justify-content: space-between;}
.service-com .service-detail .plan-item{width: 30%; border-radius: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.2);overflow: hidden;}
.service-com .service-detail .plan-item .icon-box{display: flex;align-items: center;justify-content: center;margin: 40px 0;height: 80px;}
.service-com .service-detail .plan-item .icon-box img{width: 80px;}
.service-com .service-detail .plan-item h3{font-size: 30px; text-align: center;margin: 20px 0;}
.service-com .service-detail .plan-item h4{font-size: 24px; text-align: center;margin: 30px 0;font-weight: normal;}
.service-com .service-detail .plan-item ul{display: flex;flex-direction: column;align-items: center;gap: 20px;margin: 20px 0 40px 0;}
.service-com .service-detail .plan-item .plan-bottom{background-color: #4874CB;}
.service-com .service-detail .plan-item .plan-bottom .b-tit{font-size: 34px;color: #fff;text-align: center;padding: 20px 0;font-weight: 700}
.service-com .service-detail .plan-item .plan-bottom .b-txt{font-size: 20px;color: #fff;text-align: center;margin: 0;padding-bottom: 30px;}
.service-com .overseasWarehousing .service-job { padding: 100px 0; background: url('../img/sub/service-2.png') no-repeat center center;}
.service-com .collectingGoods .service-job { padding: 100px 0; background: url('../img/sub/service-4.png') no-repeat center center;}
.service-com .purchasingAndShipping .service-job { padding: 100px 0; background: url('../img/sub/service-6.png') no-repeat center center;}

.service-com .webReporting .service-top-parent{}
.service-com .bigDataAnalysis .service-top-parent{}
.service-com .dataIntegratedGovernance .service-top-parent{}
.service-com .applicationBuilding .service-top-parent{}

.service-com .sellingSoftware .service-job { padding: 100px 0; background: url('../img/sub/service-7.png') no-repeat center center;}
.service-com .service-job h1{font-size: 50px; padding: 30px 0 50px 0}
.service-com .service-job .item{display: flex;margin: 40px 20px}
.service-com .service-job .item .icon-box{width:80px;height: 80px; margin-right: 20px;display: flex;align-items: center;justify-content: center;background-color: #7F7F7F;border-radius: 100%;padding: 10px}
.service-com .service-job .item .icon-box img{width: 50px;}
.service-com .service-job .item h2{font-size: 30px}
.service-com .service-job .item p{line-height: 2em;font-size: 24px;color: #808093}


.service-com .service-adv h1{font-size: 50px; padding: 40px 0 30px 0;text-align: center;margin: 0 0 var(--mg-bg-mid) 0;}
.service-com .service-adv .card-box{margin-bottom: var(--mg-bg-mid); display: flex;justify-content: center;align-items: center;flex-wrap: wrap; gap: 5%;}
.service-com .service-adv .card-box .card{height: 340px; padding:30px;margin-bottom: 30px; width: 30%;display: flex;flex-direction: column;justify-content: center;border-radius: 30px;align-items: center;box-shadow: 0 4px 20px rgba(0,0,0,0.2);}
.service-com .service-adv .card-box .card img{width: 85px;height: 85px;}
.service-com .service-adv .card-box .card h3{font-size: 24px;margin: 20px}
.service-com .service-adv .card-box .card .hline{width: 100px;border-top: 3px solid #007aff}
.service-com .service-adv .card-box .card p{font-size: 20px;text-align: center;margin: 20px 0;line-height: 1.5em;word-break: break-word; }

.service-com .service-scene h1{font-size: 50px; padding: 40px 0 30px 0;text-align: center;margin: 0 0 var(--mg-bg-mid) 0;}
.service-com .service-scene .round-box{display: flex; justify-content: center;align-items: center;margin-bottom: 100px;}
.service-com .service-scene .round-box .round-item{width: 30%;padding: 30px;cursor: pointer;position: relative; transition: all 0.3s ease;  z-index: 1;}
.service-com .service-scene .round-box .round-item .r-i-wapper{background-color: #F3F5F9;padding: 50px 0;border-radius: 30px}
.service-com .service-scene .round-box .round-item h3{font-size: 24px;text-align: center;}
.service-com .service-scene .round-box .round-item ul{margin-left: 25%;margin-top: 40px;}
.service-com .service-scene .round-box .round-item ul li{ font-size: 20px;margin: 14px 0;list-style-type: disc;list-style-position: inside;}
.service-com .service-scene .round-box .round-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-size: cover;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.5s ease;
    z-index: -1;
}
.service-com .service-scene .round-box .item1::after{background: url('../img/sub/service-18.png') no-repeat center center; /* 替换为你的背景图路径 */}
.service-com .service-scene .round-box .item2::after{background: url('../img/sub/service-19.png') no-repeat center center; /* 替换为你的背景图路径 */}
.service-com .service-scene .round-box .item3::after{background: url('../img/sub/service-20.png') no-repeat center center; /* 替换为你的背景图路径 */}
.service-com .service-scene .round-box .round-item:hover::after {
    width: 400px;
    height: 400px;
    opacity: 1;
}
.service-com .service-scene .round-box .round-item:hover {
    transform: scale(1.05); /* 轻微放大 */
    color: #ffffff;
}
.service-com .service-scene .round-box .round-item:hover .r-i-wapper{
    background-color: transparent;
}






/* 联系我们.html */
#contact h1{
    margin-top: 180px;
    font-size: var(--con-tit-max1);
    color: #182B62;
}
#contact h2{
    color: #182B62;
    font-size: var(--con-tit-max1);
    font-weight: normal;
    margin-top: 40px;
    border-bottom: 1px solid #D1D5E0;
    padding-bottom: 100px;
}
#contact .info-wrap{display: flex;justify-content: space-between;align-items: center;}
#contact .info-wrap .left-box h3{font-size: 30px; font-weight: normal;color: #182B62;margin-top:30px; margin-bottom: 30px;}
#contact .info-wrap .left-box p{font-size: var(--con-tit-max1);color: #7D98C6;font-weight: 700;line-height: 1.2em; }

#contact .info-wrap .right-box{margin-top: 50px}
#contact .info-wrap .right-box li{display: flex;justify-content: flex-start;align-items: center;margin: 40px 0;font-size: 24px;color: #182B62;}
#contact .info-wrap .right-box li img{width: 30px;margin-right: 10px;}
#contact .info-wrap .right-box .map-btn{
    border-radius: 40px;
    border: 1px solid #182B62;
    cursor: pointer;
    width: 200px;
    font-size: 24px;
    color: #182B62;
}
#contact .info-wrap .right-box .map-btn a{display: flex; justify-content: center; align-items: center;padding: 20px;}
#contact .info-wrap .right-box .map-btn:hover{background-color: #182B62;color: #ffffff;}
#contact .info-wrap .right-box .map-btn:hover .white-img{display: inline}
#contact .info-wrap .right-box .map-btn img{width: 30px;display: none;}
#contact .info-wrap .right-box .map-btn:hover .white-img{display: inline;}
#contact .info-wrap .right-box .map-btn .blank-img{display: inline}
#contact .info-wrap .right-box .map-btn:hover .blank-img{display: none;}
#contact .info-wrap .right-box .map-btn span{margin-left: 10px}
#contact .info-wrap .right-box{
    background-image: url('../img/sub/connet-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding-bottom: 80px;
}



/* 预约演示.html */
#application {padding-bottom:100px; background: linear-gradient(to bottom, #C5DCF7, #F6F8FC);}
#application .con-box{margin-top:100px; display: flex;justify-content: space-between;align-items: center;}
#application .con-box h1{font-size: var(--con-tit-max1);color: #000000;text-align: center;margin: 40px 0;}
#application .con-box h2{font-size: 34px;color: #182B62;font-weight: normal;margin: 20px 0;text-align: center;}
#application .con-box .left-box .img-box{width: 700px;margin-top: 60px}
#application .con-box .left-box .img-box img{width: 100%}

#application .form-box{padding: 30px; background-color: #fff;border-radius: 20px;box-shadow: 0 4px 14px 4px rgba(0,0,0,0.1);font-size: 20px;}
#application .form-box  h3{font-size: 40px;font-weight: normal;text-align: center;padding: 20px 0;}
#application .form-box .form-item{display: flex;gap: 10px;margin: 20px 0}
#application .form-box input{flex: 1; border: 1px solid #eee;border-radius: 2px; padding: 30px 20px;height: 40px;font-size: 20px;}
#application .form-box input[name=userName]{width: 200px}
#application .form-box select{display:block;border: 1px solid #eee;border-radius: 2px; padding: 0px 20px;height: 62px;font-size: 20px;color: #000;background-color: #ffffff;}

#application .form-box .label{margin: 20px 0; }
#application .form-box .sys-box{display: flex;flex-wrap: wrap;gap: 20px; width: 500px;}
#application .form-box .sys-item{
    width:240px; height: 60px; border: 1px solid #D9D9D9;border-radius: 2px;cursor: pointer;
    display: flex;justify-content: center;align-items: center;
    position: relative;
}
#application .form-box .sys-item.kuajing-item{width: 100%;}
#application .form-box .sys-item img{width: 25px;position: absolute;bottom: -2px;right: -3px;display: none;}
#application .form-box .sys-item.active{
    border: 1px solid #2269F0;
}
#application .form-box .sys-item.active img{display: block}
#application .form-box .label{font-size: 20px}
#application .form-box button{margin-top: 20px; background-color: #2269F0;color: #ffffff;width: 100%;padding: 20px;font-size: 20px;border: none;cursor: pointer}
#application .form-box button{border: none !important; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

.toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border-radius: 4px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 80%;
    text-align: center;
    visibility: hidden;
}
.toast.success {
    background-color: rgba(40, 167, 69, 0.9); /* 绿色背景表示成功 */
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}
.toast.show {
    visibility: visible;
    opacity: 1;
}
.successToast{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: #000000;
    padding: 20px;
    visibility: hidden;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}
.successToast img{width: 50px}
.successToast p{margin-top:20px;line-height: 1.5em}

/*媒体查询*/
@media screen and (max-width:1200px){
  .service-com .feature-bx:has(ul){display:block;}
  .service-com .feature-bx ul{width:100%;margin-top:15px;padding-left:0;}
  .service-com .feature-bx:has(ul) h5 br{display:none;}
}

@media screen and (max-width:1024px){
  .service-com .feature-wrap{gap:20px;}
  .service-com .feature-bx{display:block;width:calc(50% - 10px);flex-wrap: wrap;padding:30px;}
  .service-com .feature-bx h5,
  .service-com .feature-bx p,
  .service-com .feature-bx ul{width:100%;padding:0;}
  .service-com .feature-bx h5 br{display:none;}
  .service-com .history-wrap{flex-wrap: wrap;}

  .subpage .visual h2{font-size:60px;}
  .service-com .feature-bx ul{gap:10px;margin-top:20px;}
  .subpage .visual .line{height:80px;}
  #intro .intro-sec01 .conbx h4{font-size: 25px;}
  #intro .intro-sec01 .con-wrap{gap:20px;}
  #intro .intro-sec01 .conbx{width:100%;}
}

@media screen and (max-width:768px){

    .subpage .visual .line{height:60px;}
    .subpage .visual h2{font-size:45px;}

    /*预约演示*/
    #application .con-box{margin-top: 100px;}
    #application .con-box .left-box{display: none;}
    #application .form-box{ width: calc(100vw - 40px);padding: 10px}
    #application .form-box h3{font-size: 30px;}
    #application .form-box input{font-size: 14px; padding: 10px 10px;display: block;width: 100%}
    #application .form-box input[name=companyName] {width: 100px;}
    #application .form-box input[name=userName] {width: 50px;}
    #application .form-box .sys-box{width: 100%}
    #application .form-box .sys-item{width: 40%;margin: 0 10px 10px 10px;}
    #application .form-box .sys-item span{font-size: 14px;}
    #application .form-box select{height: 40px;font-size: 14px}
    #application .form-box .label{font-size: 14px;}
    #application .form-box button{padding: 10px; font-size: 14px;}


    /*解决方案*/
    .service-com .visual .con-txt{display: block;}

  .service-com .visual .con-tit-l{width: 100%}
  .service-com .visual .con-tit-l h2 { font-size: 30px; }
  .service-com .visual .con-tit-l h1{font-size: 16px;word-break: break-all;width: 100%;}
  .service-com .visual .con-tit-r ul li{text-align: left;font-size: 16px;}


    .service-com .con-tab{margin: 0;top: 60px;}
    .service-com .con-tab .con-flex>li{margin: 0 5px; }
    .service-com .con-tab ul{justify-content: flex-start;gap:0px;}
    .service-com .con-tab li a{width:100px;height:40px;}
    .service-com .con-tab .dropdown-menu li{height: 50px}

    .service-com .service-top{display: block;padding-top: 100px;}
    .service-com .service-top h1{font-size: 30px;margin-top: 0}
    .service-com .service-top h2{font-size: 24px;}
    .service-com .service-top p{width: 100%;word-break: break-word;}
    .service-com .service-img{margin-top: 20px}
    .service-com .service-img img{width: 100%;}
    .service-com .service-detail h1{font-size: 30px;margin:50px 0 20px 0;padding:0;}
    .service-com .service-detail .plan-wrap{display: block;}
    .service-com .height100{height: 100%;}
    .service-com .service-detail .plan-item{width: 100%;margin-bottom: 30px;}
    .service-com .service-job{padding: 30px 0 !important;}
    .service-com .service-job h1{font-size: 30px; padding: 30px 0 30px 0}
    .service-com .service-job .item .icon-box{width: 40px;height: 40px;}
    .service-com .service-job .item .icon-box img{width: 25px;}
    .service-com .service-job .item h2{font-size: 18px}
    .service-com .service-job .item p{font-size: 16px;color: #000}
    .service-com .service-adv h1{ font-size: 30px;margin: 0 }
    .service-com .service-adv .card-box{display: block;}
    .service-com .service-adv .card-box .card{width: 100%}
    .service-com .service-scene h1{font-size: 30px;margin: 0}
    .service-com .service-scene .round-box{display: block;}
    .service-com .service-scene .round-box .round-item{width: 100%}
    .service-com .service-adv .card-box .card p{width: 80%;word-break: break-word;}


  /* 关于睿博 */
    #about .visual .con-tit-l h1{margin-bottom:20px;font-size: 38px;}
    #about .visual .con-txt{display: block;width: 100%;}
    #about .visual .con-tit-l{width: 100%}
    #about .visual .con-tit-r{width: 100%}
    #about .visual .con-tit-r p{ word-break: break-word;opacity: 0.8;}
    #about .visual .con-tit-l h2{font-size: 34px}
    #about .about-title-txt{font-size: 34px;}
    #about .about-title-txt2{font-size: 20px;word-break: break-word;}
    #about .about-five h1{font-size: 30px}
    #about .run-seconds{ margin-bottom: 20px; margin-left: 0px;}
    #about .run-seconds .item{margin: 0 10px}
    #about .run-seconds p{font-size: 18px}
    #about .run-seconds .num{font-size: 34px}
    #about .about-five .scroll-logo-box { display: inline-block; width: 100%; }
    #about .about-five .logo-scroll-wrapper {display: block; width: 4000px; white-space: nowrap;animation: scroll 60s linear infinite;}
    #about .visual .con-tit-l p{width: 100%;font-size: 16px}

    #about .clock-box{flex-direction: column;background: none;}
    #about .clock-box .left-box{height: 200px;width: 100%}
    #about .clock-box .left-box img{top:0; left: 50%; transform: translateX(-50%);height: 100%; }
    #about .clock-box .right-box{display: block}
    #about .clock-box .right-box .list-box{width: 100%}
    #about .clock-box .right-box .active-li-box{margin-bottom: 20px;margin-top: 20px;}
    #about .clock-box .right-box ul li{font-size: 24px;}

  /* 联系我们 */
    #contact h1{margin-top: 140px}
    #contact h2{font-size: 24px}
    #contact .info-wrap{display: block}
    #contact .info-wrap .left-box p{font-size: 24px}
    #contact .info-wrap .right-box li{margin: 10px 0}
    #contact .info-wrap .right-box li span{font-size: 18px}
    #contact .info-wrap .right-box .map-btn{margin-top: 20px}

    .subpage .visual{padding: 160px 20px 100px;}
}

@media screen and (max-width:500px){

}