.hintarea {height:300px;margin-top:100px;}
.jbcon { position:fixed; left: 10px; top: 10px; z-index: 999;}
.jbcon img { height: 64px; border-radius: 5px;}
.n_content { width: 1142px; margin: 0 auto;}

/*云应用平台*/

.cloud_tit {margin:0 auto;height:48px;background:#28416A;box-shadow:0 1px 0 0 rgba(0,0,0,0.2);line-height:48px;}
.cloud_tit span {font-size:18px;color:#fff;float:left;font-weight:bold;}
.cloud_tit span a {color: #fff;}
.cloud_tit .fr a {color:#4A4A4A; font-size:18px; margin-left:35px; display:inline;}
.cloud_tit .fr a:hover { color:#0091F9;}
.cloudtext { margin:35px auto; color:#767676;font-size:14px; line-height:30px;}
.cloudlist { margin:0 auto; width:1142px;}
.cloudlist ul { margin:0 -8px}
.cloudlist ul li { float:left; width:33.3%; padding:0 8px; margin-bottom:24px}
.cloudlist ul li .cloudlistcon { height:115px; padding:30px 22px; background-color:#fff; display:block; position:relative; transition: all 1s;}
.cloudlist ul li .cloudlistcon:hover {box-shadow:0px 4px 8px 0px rgba(165,176,208,0.64);}
.cloudlist ul li .cloudlistcon .climg { width:50px; position:absolute; left:22px; top:30px;}
.cloudlist ul li .cloudlistcon .climg .icon {width:50px; height:50px; font-size:48px; color:#0066b2;}
.cloudlist ul li .cloudlistcon .cloudlist_te { margin:0 0px 0 70px;}
.cloudlist ul li .cloudlistcon .cloudlist_te h1 {font-size:18px;font-weight:bold;line-height:30px; height:30px; overflow:hidden; display:block; color:#353F4E;}
.cloudlist ul li .cloudlistcon .cloudlist_te p {font-size:18px;font-weight:bold;line-height:25px; display:block; color:#0091F9;}
.cloudlist ul li .cloudlistcon:hover .icon {transform: rotate(360deg);transition: color 0.5s ease, background-color 0.5s ease, transform 0.5s ease;}
.cloudtect { margin:0 auto; width:1142px; height:348px; background-image:url(/css/images/cloudcenterbg.png); margin-top:35px;}
.cloudtect h1 { display:block;height:90px;font-size:24px;color:#fff;line-height:54px; padding-top:40px; text-align:center;}
.cloudtect p {display:block; text-align:center; line-height:24px;height:62px;font-size:14px; color:#fff; padding:0 92px;padding-top:15px}
.cloudtect ul { width:100%; margin-top:20px;}
.cloudtect ul li { float:left; width:25%; text-align:center;}
.cloudtect ul li .icon { height:65px; display:inline; font-size:55px; color:#fff;}
.cloudtect ul li h2 { display:block;line-height:30px;font-size:20px; margin-top:25px; color:#fff; font-weight:normal;}
.cloudtect ul li:hover img {transform: rotate(360deg);transition: color 0.5s ease, background-color 0.5s ease, transform 0.5s ease;}
.wuqu h1 { display:block;height:90px;font-size:24px;color:#4A4A4A;line-height:54px; padding-top:40px; text-align:center;}
.wuqu p {display:block; text-align:center; line-height:24px;height:62px;font-size:14px;color:#767676; padding:0 62px;padding-top:15px}
.wuqucon { margin-top:40px;}
.wuqucon li {float:left;width:33.3%;height:96px;border:1px solid rgba(216,216,216,1);padding:34px 18px;position:relative}
.wuqucon li .icon { position: absolute; left: 18px; top:34px; font-size:30px; color:#0066b2;} 
.wuqucon li h2 {font-size:20px; margin-left:15px;font-weight:bold; line-height:25px; display: block; margin-left: 45px; overflow: hidden; height: 25px;}
.wuqucon li:nth-child(2) { margin-top:95px;}
.ruhe { border-bottom:1px solid #D8D8D8;}
.ruhe h1 { display:block;height:90px;font-size:24px;color:#4A4A4A;line-height:54px; padding-top:40px; text-align:center;}
.ruhe p {display:block; text-align:center; line-height:24px;height:62px;font-size:14px;color:#767676; padding:0 62px;padding-top:15px}
.ruhecon ul { margin-top:40px;}
.ruhecon ul li { float:left; width:50%;text-align:center;}
.ruhecon li:nth-child(1) { padding-right:4px;}
.ruhecon li:nth-child(2) { padding-left:4px;}
.ruhecon ul li img { display:inline}
.ruhecon li h2 { display:block;font-size:20px; line-height:120px;font-weight:bold;}
.cloud_producyshi ul li .producyshicon {  height: 180px!important;}



.cloud_tit .content { position:relative;}
.smallnav {	float:right; width:100%;}

.padded {float:right;}
.smallnav ul li {float:left;display:inline;margin-right:0;list-style:none}
.smallnav ul li a {display:block;color:#fff;font-size:14px;margin-left:5px;font-weight:normal;text-decoration:none;padding:0 15px;}
.smallnav ul li a:hover {color:#337ab7;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.smallnav ul li.activenav a { color: #337ab7;}
.smallnavfixed { left:0px; top:60px; position:fixed; width:100%; z-index:8888; background-color: #0066B2;} 
.smallnavfixed a {color:#fff}
.smallnavfixed span a{color:#fff}
.smallnavfixed ul li a{display:block;color:#fff}
.smallnavfixed ul li a:hover {color: #fff; background:#141E62;}
.smallnavfixed ul li.activenav a { color: #fff; background:#141E62;} 
.smallnavsmall { display:none;}


.cttll {
    display: block;
    height: 115px;
    font-size:36px;
    color: #4a4a4a;
    line-height: 115px;
    text-align: center;
}
.xinbanner { position: absolute; top: 0; left: 0; right: 0;}
.white_bg { background-color: #fff;}
.main { margin: 0 auto;}
.btnll {    display: none;}

.zxfangan01 {
    float: left;
    width: 165px;
    height: 42px;
    background: #fff;
    border-radius: 0px;
    line-height: 42px;
    text-align: center;
    color: #003283;
    margin-top: 20px;
    font-size: 14px;
    position: relative;
    z-index: 99;
}
.zxfangan02 {
    float: left;
    width: 165px;
    height: 42px;
    border: 1px solid #fff;
    border-radius: 0px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    margin-top: 20px;
    font-size: 14px;
    margin-left: 10px;
    position: relative;
    z-index: 99;
}
.zxfangan01:hover, .zxfangan01:active, .zxfangan01:focus { text-decoration: none;background: #A4BDFC; color: #003283;}
.zxfangan02:hover, .zxfangan02:active, .zxfangan02:focus { background: #fff;text-decoration: none;color: #003283!important;}
.commbanner {
    background-image: url(/images/products/didaima_bg.png);
}
.commverbanner {
    background-image: linear-gradient(90deg, #21324A 0%, rgba(44,80,132,0.65) 100%);
}
.cloudbanner h2 {
    width: 100%;
    display: block;
    font-size: 24px;
    font-weight: normal;
    color: #fff;
    padding-top: 10px;
    line-height: 40px;
    position: relative;
    z-index: 99;
}
.commbanner h1 {
    padding-top: 60px;
}


/*低代码平台*/
.comm_01 { padding-top: 30px; padding-bottom: 50px;}
.ctt_c {    font-size: 14px;    color: #767676;    line-height: 25px;    display: block;    font-weight: normal;    margin-bottom: 15px;}
.comm_01_li { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
.comm_01_li .item {    border: 1px solid rgba(229,233,240,1);    border-radius: 2px;  position: relative; padding: 25px;}
.commimg { width: 115px; text-align: center; position: absolute; left: 0; top: 25px;}
.commimg img { display: inline;}
.comm_01_li .item  h1 {    font-size: 22px;    color: #4A4A4A;    line-height: 27px;    font-weight: 600; margin-left: 115px; display: block;}
.comm_01_li .item  h1 b { color: #00A0E9;}
.comm_01_li .item  h2 {    font-size: 14px;    color: #4A4A4A;    line-height: 25px;    font-weight: 400;margin-left: 115px; display: block; padding-top: 15px;}
.comm_02 {padding-top: 75px; padding-bottom: 50px;}
.comm_02_tit {display:block; position: relative;font-size: 36px;    color: #4A4A4A;    font-weight: 400; padding-bottom: 30px;}
.comm_02_tit::after { content: ''; position: absolute; bottom: 0; left: 0;background: #4A4A4A; width: 60px; height: 4px;} 
.comm_02con {display:flex; padding-top: 40px;}
.comm_02_text {width: 600px;    display: flex;    justify-content: left;    font-size: 16px;    color: #767676;    line-height: 25px;    font-weight: 400;}
.comm_02_img {flex: 1;    display: flex; text-align: right; padding-left: 85px;}
.comm_03 {padding: 30px 0;}
.content_text { display: block;font-size: 16px;    color: #767676;    line-height: 25px;    font-weight: 400;}
.comm_03_li {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; margin-top: 40px;} 
.comm_03_li .item .xuh { width: 42px; height: 42px; margin: 0 auto; background-color: #00A0E9 ; color: #FFF; text-align: center; line-height: 32px; border-radius: 50%;font-size: 16px; }
.comm_03_li .item .itemcon { margin: 0 auto; border: 1px solid #00A0E9;margin-top: -10px;}
.comm_03_li .item .itemcon .item_tit {display: block; line-height: 40px;background-color: #00A0E9 ; color: #FFF; text-align: center; font-size: 16px; }
.comm_03_li .item .itemcon .xno1 { display: block; padding: 10px;}
.comm_03_li .item .itemcon .xno2 { display: block; padding: 10px;}
.comm_03_li .item .itemcon .qiyename {margin: 0 auto;width: 100px;border: 1px solid #00A0E9; color: #00A0E9; text-align: center; line-height: 25px; border-radius: 7px; border-top-right-radius: 0;border-bottom-left-radius: 0; margin-bottom: 10px;}
.comm_03_li .item:nth-child(even) .xuh {background-color: #012296 ;}
.comm_03_li .item:nth-child(even) .itemcon {border: 1px solid #012296;}
.comm_03_li .item:nth-child(even) .itemcon .item_tit {background-color: #012296 ;}
.comm_03_li .item:nth-child(even) .itemcon .qiyename {border: 1px solid #012296;color: #012296;}

.comm_04 { position: relative;}
.comm_04_dy { display: none;}
.comm_04 .tab_menu {
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 50%;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 1142px;
    margin-left: -571px;
    z-index: 99;
}
.comm_04 .tab_menu li {
    margin: 0;
    height: 55px;
    line-height: 30px;
    font-size: 20px;
    color: #fff;
    text-align: center;
}
.comm_04 .tab_menu li.current {
    color: #FF7728;
    border-bottom: 3px solid #FF7728;
}
.comm_04 .tab_box {
    padding: 0px;
    margin-top: 0px;
    height: 564px;
    background-color: transparent;
}
.comm_04 .tab_box .comm_04con {  height: 564px;  background-image: url(/images/products/tab1_bg.png);}
.comm_04_tit {
    display: block;
    position: relative;
    font-size: 32px;
    color: #fff;
    font-weight: 400;
    padding-top: 100px;
    line-height: 40px;
}
.comm_04_tit b {color: #01A0E8; font-weight: normal;}
.comm_04con_c {display: flex;    padding-top: 40px;}
.comm_04_text {
    flex: 1;
    padding-right: 85px;
    justify-content: left;
    font-size: 16px;
    color: #fff;
    line-height: 25px;
    font-weight: 400;
}
.comm_04_text b {color: #01A0E8; font-weight: normal;}
.comm_04_textcon { display: block; padding-top: 20px;}
.comm_04_img {
    display: flex;
    padding-top: 100px;
    width: 525px;
    text-align: right;
    
}
.comm_04_img img { height: auto;}
.comm_05 { padding-top: 70px; padding-bottom: 90px;}
.comm_05con { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding-top: 35px;}
.comm_05con .item { padding: 35px; background: #EEF1F6;}
.comm_05con_img { text-align: center;}
.comm_05con_img  img { display: inline;}
.comm_05con .item h1 {font-size: 20px;    color: #4A4A4A;    line-height: 28px;    font-weight: 600; padding: 30px 0;}
.comm_05con .item p {font-size: 14px;
    color: #4A4A4A;
    line-height: 22px;
    font-weight: 400;
}

.comm_06 {
    margin: 0 auto;
    padding: 60px 0;
    background-image: linear-gradient(90deg, #21324A 0%, rgba(44,80,132,0.85) 100%);
}
.comm_06tit {display: block; margin: 0 auto; color: #fff; padding: 30px 0 50px 0; text-align: center;}
.comm_06 .numCount li .numCX {    color: #12A3FF ;}
.comm_06 .numCount li .indc {       color: #D2DCE1;}
.comm_06 .numCount li .numU .unitC {  font-size: 36px;  color: #12A3FF;}
.comm_06 .numCount li .numU .unitC2 {    color: #12A3FF;}

.comm_07 { padding: 45px 0;}
.comm_07 .n_content { display: grid;  grid-gap: 15px; grid-template-columns:1fr 1fr 1fr 1fr ;}
.comm_07 .n_content .item { border: 1px solid rgba(222,229,235,1); padding-bottom: 10px;}
.comm_07 .n_content .item .comm_07_tit {background: #0E3387; display: block; line-height: 33px;  color: #fff;font-size: 16px; padding: 0 10px; margin: 0 auto; height: 33px;}
.comm_07 .n_content .item h1 { float: left;font-size: 16px;line-height: 33px;  }
.comm_07 .n_content .item b { float: right;line-height: 33px; }
.comm_07 .n_content .item p { padding: 20px;}
.comm_07 .n_content .item_l .comm_07_tit { background: #0099DE;}
.comm_08 { padding: 50px 0;}
.comm_08_dy {display: none;}
.comm_08 .tab_menu {
    overflow: hidden;
    margin: 0 auto;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid rgba(231,232,236,1);
    padding: 0 120px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.comm_08 .tab_menu li {
    margin: 0;
    height: 60px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    color: #4A4A4A;
}
.comm_08 .tab_menu li span { position: relative;}
.comm_08 .tab_menu li.current span::after { content: ""; position: absolute; bottom:-27px; left: 0; right: 0; height: 3px; background-color: #FF7728; }
.comm_08 .tab_menu li.current span {    color: #FF7728;    }
.comm_08con { display: grid; grid-template-columns: 1fr 1fr; padding-top: 100px; grid-gap: 35px;}
.comm_08con .item h1 {display: block;    font-size: 36px;    color: #4A4A4A;     font-weight: 500;}
.comm_08con .item h2 { display: block; font-size: 28px;    color: #767676;    font-weight: 400; padding: 20px 0 25px 0;}
.comm_08con .item p {font-size: 14px; display: block;    color: #4A4A4A;    line-height: 26px;}
.comm_08con .item p b {font-size: 14px;    color: #01A0E8; font-weight: normal;}
.comm_08 .tab_box {    height: auto;}
.comm_08con:nth-child(3) .item {text-align: center; }
.comm_08con:nth-child(3) .item h1, .comm_08con:nth-child(3) .item h2, .comm_08con:nth-child(3) .item p { text-align: left;}
.comm_08con:nth-child(3) .item img { display: inline;}

.comm_09 { height: 419px;background-image: url(/images/products/tab2_bg.png);}
.comm_09  h1 { display: block;font-size: 36px;    color: #FFFFFF;    text-align: center;    font-weight: 500; padding: 110px 0 20px 0;}
.comm_09  h2 {font-size: 18px;    color: #B9B9B9;    text-align: center;    line-height: 25px; padding: 20px 0; display: block;}
.comm_09  p {font-size: 16px;    color: #B9B9B9;    line-height: 26px;display: block;}
.comm_09  p b {    color: #00A0E9; font-weight: normal; line-height: 30px;}

.comm_10 { padding: 85px 0; }
.cttl2 {font-size: 18px; display: block;    color: #00A0E9;    text-align: center;}
.comm_10_list { display: grid; grid-template-columns: auto auto auto;  padding-top: 20px;}
.comm_10_list .comm_10_listcon {display: grid; grid-template-columns: 1fr; grid-gap: 45px; width: 180px;padding-top: 20px; }
.comm_10_ry { display: block; }
.comm_10_list .comm_10_ry  p { display: block;position: relative; padding-left: 30px;background: rgba(255,255,255,0.05);
    border: 1px solid rgba(222,229,235,1); line-height: 40px; margin: 20px 0;}
.comm_10_list .comm_10_ry  p::before { position: absolute; content: ""; width: 10px; height: 10px;  top: 14px; left: 10px;background-image: url(/images/products/hd.png);background-repeat: no-repeat;
    background-position: left center; background-size: 10px 10px;}
.comm_10_list .comm_10_listcon .item { text-align: center;  line-height: 21px;}
.comm_10_list .comm_10_listcon .item p {color: #767676;}
.comm_10_list .comm_10_listcon .item img {display: inline;}
.comm_10_img { padding-top: 50px;}
.comm_10_img img { width: 100%;}

.comm_11 {background-image: url(/images/products/comm_11_bg.png);}
.comm_11 .comm_11con { display: flex; padding-top: 100px;} 
.comm_11 .comm_11con .comm_11conimg { width: 419px; padding-left: 25px; padding-top: 30px;} 
.comm_11con_text { flex: 1; }
.comm_11con_text h1 { display: block;font-size: 36px;    color: #fff;}
.comm_11con_text p { display: block; font-size: 14px;    color: #fff; padding-top: 15px;}
.comm_11con_li { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; padding-top: 30px;}
.comm_11con_li .item { color: #FFFFFF;    border: 1px solid #FFF;    border-radius: 1px; padding: 10px;}
.comm_11con_li .item h2 {font-size: 15px;    color: #fff;    line-height: 24px;    font-weight: 400; display: block;}
.comm_11con_li .item p {font-size: 14px;    color: #fff;    line-height: 24px;    font-weight: 400; display: block; padding-top: 0px;}
.comm_11_baog { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px; padding: 80px 0;}
.comm_11_baog .item { position: relative;}
.comm_11_baog .item h1 { font-size: 22px; display: block;    color: #111318;    line-height: 32px; position: absolute; bottom: 50px; left: 15px;}
.comm_11_baog .item p { display: block; font-size: 14px;    color: #00A0E9;position: absolute; bottom: 25px; left: 15px;}

.comm_12 { padding: 90px 0; padding-bottom: 0;}
.comm_12 ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 100px; }
.comm_12 ul li { padding: 30px 0;}
.comm_12 ul li .c_img {display: block; text-align: center;}.comm_4 ul li .c_img img { display: inline;}
.comm_12 ul li .c_img img {    display: inline;}
.comm_12 ul li h2 { display: block;font-size: 30px;    color: #4A4A4A;    text-align: center;    font-weight: 500; margin-top: 30px;}
.comm_12 ul li .comm_t1 { display: block;font-size: 18px;    color: #4A4A4A;      font-weight: 500;padding-left: 0; padding-top: 25px; line-height: 28px;}
.comm_12 ul li .comm_t2 { display: block;font-size: 18px;    color: #4A4A4A;      font-weight: 500;padding-left: 0; padding-top: 25px;line-height: 28px; text-align: center;}
.nowd {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 100px;   }
.nowd div {
    background: #FFFFFF;
    border: 1px solid rgba(32,141,221,1);
    border-radius: 4px;
    width: 265px;
    height: 42px;
    margin: 0 auto;
    line-height: 42px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 100px;
}
.nowd div a {font-size: 14px;    color: #208DDD; display: block; line-height: 42px;}

.comm_13 { padding-bottom: 90px;}
.comm_13 .n_content { display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px;}
.comm_13 .n_content .item { border: 1px solid rgba(229,233,240,1); padding: 15px 25px;}
.comm_13 .n_content .item .lx_tit { display: block; text-align: center;font-size: 18px;    color: #767676;}
.comm_13 .n_content .item .lx_tit span { font-size: 36px; color: #00A0E9;}
.comm_13 .n_content .item p { padding-top: 10px; display: block;}
.lxcon { text-align: center;}

.pdwbanner { background-image: url(/images/products/pwdbannerbg.png);}
.pdwlist .content ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px 25px;}
.pdwlist .content ul li {border-left:3px solid #208DDD; background-color: #fff; padding: 30px;}
.pdwlist .content ul li h2{font-size: 18px;    color: #4A4A4A; display: block; font-weight: bold;}
.pdwlist .content ul li p {font-size: 14px;    color: #475159; display: block; padding-top: 20px;}
.pdw_jz_list { padding: 20px 0;}
.pdw_jz_list .content ul {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px;}
.pdw_jz_list .content ul li {background: #FFFFFF;    border: 1px solid rgba(216,216,216,1); padding:35px 15px; text-align: center;}
.pdw_jz_list .content ul li div {display: block;}
.pdw_jz_list .content ul li div img {display: inline;}
.pdw_jz_list .content ul li p {font-size: 18px;    color: #4A4A4A; line-height: 27px; display: block;}



.AIbanner {    background-image: none;    height: auto;}
.airic {margin:0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 0px; grid-gap: 25px;}
.airic .item {background: #FFFFFF; border: 1px solid rgba(235,237,242,1); line-height:55px;font-size: 18px;color: #0B1B3B; display: block; padding-bottom: 15px;}
.airic .item p {display:block; padding:0 15px;}

.gongzuoz_li {margin:0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 0px; grid-gap: 25px;}
.gongzuoz_li .item {background: #FFFFFF; font-size: 14px;   color: #767676;     position: relative;    padding-bottom: 25px;}
.gongzuoz_li .item .qidai { display: flex; align-items: center ; justify-content: center;}
.ylipic { position: relative; display: block; z-index: 999;}
.play { position: absolute; right: 15px;  bottom: -60px;background-image: url(/images/products/huifang.png);     z-index: 99;    width: 111px; height:40px;}
.gongzuoz_li .item p {display: block;font-size: 14px;    color: #0B1B3B; line-height: 25px; font-weight: bold; padding: 15px;  padding-right: 135px;}
.yli_time { display: block; padding: 0 25px;
    background-image: url(/images/products/time.png);
    background-repeat: no-repeat;
    background-position: 15px center;
    font-size: 14px;
    color: #757575;
    padding-left: 40px;
    line-height: 27px;
}
.xians { display: block; padding: 0 25px;
    background-image: url(/images/products/xians.png);
    background-repeat: no-repeat;
    background-position: 15px center;
    font-size: 14px;
    color: #757575;
    padding-left: 40px;
    line-height: 27px;
}
.qidai {position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; }
.lhjg_li {margin:0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 0px; grid-gap: 25px; padding-bottom: 40px; background: #FFFFFF; border: 1px solid rgba(235,237,242,1); padding:25px; margin-bottom: 30px;}
.lhjg_li .item {  display: flex;
    align-items: center;
    justify-content: center;}
.popup-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-content button { position: absolute;top: 10px;    right: 010px; width: 30px; height: 30px; background-color: #fff; border-radius: 100%; font-size: 20px; line-height: 30px;}