/* -------------------------------     全部导航栏开始     ------------------------------- */

/* 设置窗口背景色 */
/* body { */
/*   background-color: #eee; */
/* } */


/* ---------    一级导航栏开始  原./assets/customized/nav/menu.css  -------- */
@media (min-width: 992px){
    .navbar-container{
        width: 1024px;
        display: flex;
        margin: auto;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        margin-top: -2px;
    }
}


/* 下拉菜单中删除箭头 */
/* .dropdown-toggle::after {*/
/*     display:none;*/
/* }*/


/* 定制导航栏格式 */
 /*        .navbar*/
 /*       {*/
 /*            background: #01A9DB;*/    /* 改变导航栏背景颜色。已在下面代码设置，在html代码设置但无效*/
 /*         }*/

        nav li a
        {
            color: #fff;            /* 将导航栏链接字体设置为白色。html写了style="color:#F5F5F5;"时此js设置不起作用。 Date:2020-06-11 */
            font-size: 18px;     
        }

        nav li a:hover
        {
            color: red;            /* 将鼠标移动至导航栏链接时字体设置为浅灰色。html写了style="color:#F5F5F5;"时此js设置不起作用。Date:2020-06-11 */
        }

        nav li li a:hover
        {
            font-weight:bold;       /* 鼠标移动至此是粗体 Date:2020-06-11*/
            color: red; 
        }

        .navbar
        {
            background: #046BB0;    /* 改变导航栏背景颜色#046BB0 #046DB2 #045FB4 #084B8A #01A9DB */
            font-size: ;        /* 增加控制导航栏字体大小,默认16px Date:2020-10-21*/
        }


        .navbar a:hover        /* 增加导航栏鼠标悬停背景色 Date:2024-08-23*/
        {
            background: #058be5;    /* 改变悬停背景色 #3570f0 #046BB0 #046DB2 #045FB4 #084B8A #01A9DB */
            color: white; 
            font-size: ;        
        }


        .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover
        {
            background-color: #2b669a;
        }



/* 定制面包屑导航栏格式 */

        .breadcrumb {
        background-color:#046BB0;         /* 面包屑导航栏背景颜色设置为蓝色 */
        }

        .breadcrumb a:hover        /* 增加导航栏鼠标悬停背景色 Date:2024-08-23*/
        {
            background: #058be5;    /* 改变悬停背景色 #3570f0 #046BB0 #046DB2 #045FB4 #084B8A #01A9DB */
            color: white; 
            font-size: ;        
        }

        .breadcrumb-item + .breadcrumb-item::before {
        display: inline-block;
        padding-right: 0.5rem;
        color: #DCDCDC;         /* 分隔符颜色默认为#6c757d ，修改为浅灰色  */
        content: ">";           /* 改"/"为">"分隔符 */
        }

        .breadcrumb-item a{
        color: #fff;         /* 面包屑导航链接字体颜色设置为白色 */
        text-decoration: none;
        }

        .breadcrumb-item a:hover {
        color: #DCDCDC;
        background-color: transparent;
        text-decoration: none;
        }

        .breadcrumb-item active{
        color: #F5F5F5;         /* 面包屑导航链接字体颜色设置为白烟色 */
        }


/* 让导航栏二级下拉菜单显示，并设置背景色 Date:2020-06-12 */
/* makes sub-menu S open on hover */
        nav li li:hover > .dropdown-menu {
        display: block;
        background-color: white;
        }


/* 设置导航栏一级下拉菜单显示的背景色 Date:2020-06-12 */
        nav li:hover > .dropdown-menu {
        display: block;
        background-color: #DCDCDC;
        }



/* 导航栏下拉菜单删除或显示箭头 Date:2020-06-11 */

/* 让导航栏一级下拉菜单隐藏箭头 
nav li .dropdown-toggle::after {
     display:none;
 }
*/

/* 让导航栏二级下拉菜单显示箭头 */
nav li li .dropdown-toggle::after {
     display:inline;
 }


/* 定制面包屑导航栏不同屏幕的字体大小 */

/* 手机屏幕的字体大小12px，平板和电脑正常字体 */
@media only screen and (max-width: 768px) {

    .breadcrumb {
        font-size: 12px;
    }
}
/* ---------    一级导航栏结束    -------- */




/* ---------    二级导航栏开始  原./assets/customized/submenu/menu.css  -------- */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
/* ---------    二级导航栏结束    -------- */




/* ---------    make dropdown expand when you hover over it。鼠标移至时打开下拉菜单，移开时隐藏。    -------- */
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}








/* -------------------------------     全部导航栏结束     ------------------------------- */





/* -------------------------------     其它自定义式样开始     ------------------------------- */
.headpic{ 
    height: 350px; 
    width: 100%;
}


.mheadpic{ 
    height: 180px; 
    width: 100%;
}


/* 不会影响btn，只有没有class的链接才会在悬停时加下划线 */
a:not([class]) {
    text-decoration: none;
}

a:not([class]):hover {
    text-decoration: underline;
}


/* 有class的链接在悬停时加下划线 */
.noline {
    text-decoration: none;
}

.text-underline-hover:hover {
    text-decoration: underline;
}


/* 网站题头图片轮播字体大小根据屏幕改变 -- 媒体判断屏幕 */

.fontchg { font-family: Rockwell, 'Times New Roman', serif; color: white; font-size: 1.0rem; }
 
@media (min-width: 576px) {
    .fontchg { font-family: Rockwell, 'Times New Roman', serif; color: white; font-size: 1.25rem; }
}
@media (min-width: 768px) {
    .fontchg { font-family: Rockwell, 'Times New Roman', serif; color: white; font-size: 2.5rem; }
}
@media (min-width: 992px) {
    .fontchg { font-family: Rockwell, 'Times New Roman', serif; color: white; font-size: 3.75rem; }
}
@media (min-width: 1200px) {
    .fontchg { font-family: Rockwell, 'Times New Roman', serif; color: white; font-size: 4rem; }
}


/* 网站题头图片轮播电影效果框高度 */

@media (min-width: 576px) {
    .movieh { height: 180px;  }
}
@media (min-width: 768px) {
    .movieh { height: 350px;  }
}
@media (min-width: 992px) {
    .movieh { height: 350px;  }
}
@media (min-width: 1200px) {
    .movieh { height: 350px;  }
}



/* 电影效果  */
.ethan{
    height: 100%;
    width: 100%;
    position: absolute;
    background: url('../../../../images/logo/h4-commercial-refrigeration-business-sales-growth.avif') no-repeat;   /* 注意相对路径的写法 */
    background-size: cover;
    /* forwards当动画完成后，保持最后一帧的状态 */
    animation: fade-away 3.5s linear forwards;   
}
.p-t{
    position: relative;
    line-height: 55px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    animation: show 1s cubic-bezier(.74,-0.1,.86,.83) forwards;
}
/* 背景图的明暗度动画 */
@keyframes fade-away {    
    30%{
        filter: brightness(0.1);
    }
    100%{
        filter: brightness(1);
    }
}
/* 文字的透明度动画 */
@keyframes show{        
    20%{
        opacity: 0;
    }
    100%{
        opacity: 0.99;
    }
}




/* Product Images 多图   每个图文框的高度根据屏幕改变 -- 媒体判断屏幕 */

.productframe { max-height: 150vw; }   /* 最大高度为屏幕宽度的1.5倍 */
 
@media (min-width: 576px) {
    .productframe { height: 240px; line-height: 240px; }
}
@media (min-width: 768px) {
    .productframe { height: 240px; line-height: 240px; }
}
@media (min-width: 992px) {
    .productframe { height: 240px; line-height: 240px; }
}
@media (min-width: 1200px) {
    .productframe { height: 240px; line-height: 240px; }
}


.prodbottom{ 
    vertical-align: bottom;
}


/* Product Images 多图   每个图文框的高度根据屏幕改变 -- 媒体判断屏幕 */

.productframe1 { max-height: 150vw; }   /* 最大高度为屏幕宽度的1.5倍 */
 
@media (min-width: 576px) {
    .productframe1 { height: 240px; line-height: 240px; }
}
@media (min-width: 768px) {
    .productframe1 { height: 240px; line-height: 240px; }
}
@media (min-width: 992px) {
    .productframe1 { height: 240px; line-height: 240px; }
}
@media (min-width: 1200px) {
    .productframe1 { height: 240px; line-height: 240px; }
}


/* Product Views 多图   每个图文框的高度根据屏幕改变 -- 媒体判断屏幕 */

.prodviewframe1 { max-height: 150vw; }   /* 最大高度为屏幕宽度的1.5倍 */
 
@media (min-width: 576px) {
    .prodviewframe1 { height: 300px; line-height: 300px; }
}
@media (min-width: 768px) {
    .prodviewframe1 { height: 300px; line-height: 300px; }
}
@media (min-width: 992px) {
    .prodviewframe1 { height: 300px; line-height: 300px; }
}
@media (min-width: 1200px) {
    .prodviewframe1 { height: 300px; line-height: 300px; }
}


.prodviewframe2 { max-height: 150vw; }   /* 最大高度为屏幕宽度的1.5倍 */
 
@media (min-width: 576px) {
    .prodviewframe2 { height: 200px; line-height: 200px; }
}
@media (min-width: 768px) {
    .prodviewframe2 { height: 200px; line-height: 200px; }
}
@media (min-width: 992px) {
    .prodviewframe2 { height: 200px; line-height: 200px; }
}
@media (min-width: 1200px) {
    .prodviewframe2 { height: 200px; line-height: 200px; }
}


/*
 * 设置背景图片自适应盒子
 */

.bgimg{
 margin: 0;
 padding: 0;
 /*font-family: sans-serif;*/
 /*background: url(../img/bg.jpg)  no-repeat center 0px;*/
 background: no-repeat center 0px;
 background-size: cover;  /*contain保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 cover保持纵横比缩放图片，使图片的短边能完全显示出来，长边将会发生截取。*/
 
     background-position: center 0; 
     background-repeat: no-repeat;  
     /*background-attachment: fixed;   /*背景相对于屏幕窗口固定，全屏*/ */
      -webkit-background-size: cover;  
      -o-background-size: cover;  
      -moz-background-size: cover;  
      -ms-background-size: cover;
}



/* BS4产品特点features表格 */

#features
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#features td, #features th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#features th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#features tr.alt td 
  {
  color:#000000;
  background-color:#EAF2D3;
  }




/* 新闻列表控制行数，并带省略号 */

.newslist1{ 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.newslist2{ 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.newslist3{ 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}



/* 首页控制链接字体颜色为黑色和链接-不显示下划线 */
.newscolor1{ 
    color:#212529;
    text-decoration:none;
}


/* 正文控制链接字体颜色为黑色和链接-显示下划线 */
.newscolor2{ 
    color:#212529;
    text-decoration:underline;
}


/* 正文控制链接字体颜色为白色和链接-显示下划线 */
.newscolor3{ 
    color:#ffffff;
    text-decoration:underline;
}


.facolor1{ 
    color:#2E9AFE;;
}


/* 颜色渐变 */
.prdhcolor1{ 
    background-image: linear-gradient(to right, rgba(0, 102, 255,0.9), rgba(0, 102, 255,1), rgba(0, 102, 255,0.9));
}


.prdhcolor2{ 
    background-image: linear-gradient(to right, rgba(0, 97, 167,1), rgba(0, 97, 167,0.9));
    height:auto;
    border-radius:15px;
}


#linka a:hover{
    color: #045FB4;            /* 将鼠标移动至链接时字体为：蓝色, 不显示下划线。*/
    text-decoration:none;
}

#linkb a:hover{
    color: #212529;            /* 将鼠标移动至链接时字体为：黑色, 不显示下划线。*/
    text-decoration:none;
}

#linkc a:hover{
    color: #DCDCDC;            /* 将鼠标移动至链接时字体为：亮灰色, 显示下划线。*/
    text-decoration:underline;
}



/* 反方向写*/
.myml { unicode-bidi: bidi-override; direction: rtl; }


/* 不可见*/
.nosi{ 
    display: none;
}
.noce{ 
    visibility: hidden;
}


/* 空*/
.blk{ ; }


.radius1{ 
    border-radius: 10px 10px 10px 10px;
}


/* index幻灯 */
.carouselimg1{ 
    width:auto;
    height: 300px;
}


/* 产品页幻灯 */
.carouselimg2{ 
    width:auto;
    height: 250px;
}


/* 侧边栏幻灯 */
.carouselimg3{ 
    width:auto;
    height: 260px;
}


/* 单元格倾斜*/
.container1 {
  overflow: hidden;
}

#parallelogram {
  width: 50px;
  height: 50px;
  margin: 0 0 0 0px;
  padding: 0 0 0 0px;
  -ms-transform: skew(0deg);              /* IE 9 */
  -webkit-transform: skew(0deg);         /* Safari 和 Chrome */
  -moz-transform: skew(0deg);            /* Firefox */
  -o-transform: skew(0deg);                /* Opera */
  background: blue;
  overflow: hidden;
  position: relative;
}

#parallelogram0 {
/*   width: 70vw;  */
  height: 50px;
  margin: 0 0 0 -30px;
  padding: 0 0 0 50px;
  -ms-transform: skew(20deg);              /* IE 9 */
  -webkit-transform: skew(20deg);         /* Safari 和 Chrome */
  -moz-transform: skew(20deg);            /* Firefox */
  -o-transform: skew(20deg);                /* Opera */
  background: blue;
  overflow: hidden;
  position: relative;
}

#parallelogram1 {
  width: 70vw;
  height: 50px;
  margin: 0 0 0 -30px;
  padding: 0 0 0 50px;
  -ms-transform: skew(20deg);              /* IE 9 */
  -webkit-transform: skew(20deg);         /* Safari 和 Chrome */
  -moz-transform: skew(20deg);            /* Firefox */
  -o-transform: skew(20deg);                /* Opera */
  background: #046BB0;
  overflow: hidden;
  position: relative;
}

#parallelogram2 {
  width: 20vw;
  height: 50px;
  margin: 0 -30px 0 0;
  padding: 0 0 0 -30px;
  -ms-transform: skew(20deg);              /* IE 9 */
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);   
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

#parallelogram3 {
  width: 50px;
  height: 50px;
  margin: 0 0 0 0px;
  padding: 0 0 0 0px;
  -ms-transform: skew(0deg);              /* IE 9 */
  -webkit-transform: skew(0deg);         /* Safari 和 Chrome */
  -moz-transform: skew(0deg);            /* Firefox */
  -o-transform: skew(0deg);                /* Opera */
  background: red;
  overflow: hidden;
  position: relative;
}

.image1 {
  background: url(../../../../images/beverage-display-refrigerators/Undercounter_Bar_Fridge.jpg);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}


.txt1 {
/*  position: absolute; */
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}

.txt2 {
  position: absolute;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-2deg);
  -o-transform: skew(-20deg);
}



/* 圆圈里面有数字: div:circile_num_1  span:.circile_num_2  红色：#F00  蓝色：#08298A  */

.circle_num_1 {
 width:50px; height:50px; background-color:#08298A; border-radius:25px;
}

.circle_num_2 {
 height:50px; line-height:50px; display:block; color:#FFF; text-align:center;
}



/* 鼠标移动到图片上，图片显示阴影边框  */

#md-large-widget-content hover img {
	box-shadow: 6px 6px 6px #08298A;     /* 水平阴影的位置，表示垂直阴影的位置，模糊距离，阴影的颜色#000 或者rgba(0,0,0,0.3) */
}
.ct-coll-item a.ct-coll-thumb:hover img{
	box-shadow: 6px 6px 6px #08298A;
	opacity: 0.9;
}


/* 鼠标移动到元素上，显示边框  */
.myborder1:hover{
/* box-shadow: 2px 4px 6px #337ab7; */
border:2px solid #337ab7;
border-radius: 15px 15px 15px 15px;
}


/* 控制标题字体颜色为蓝色色和不显示下划线 */
.headcolor1{ 
    color: #007bff;
    text-decoration:none;
}


/* 分类导航背景图 */
.sidebar {
  /* background: #007bff; */
  font-size: x-large;
  font-family: Ink Free;
  color: white;
}


/* 竖向文字 */
.sidebar2 {
  writing-mode: vertical-rl; 
  text-orientation: mixed;
  background: #007bff;
  font-size: xx-large;
  font-family: Ink Free;
  color: white;
}



/* 鼠标移到图像上面时放大图像 */
.img-enlarge1 {
  transition: all 0.3s;
}
 
.img-enlarge1:hover {
  transform: scale(2.5);
}

.img-enlarge2 {
  transition: all 0.3s;
}
 
.img-enlarge2:hover {
  transform: scale(2);
}

.img-enlarge3 {
  transition: all 0.3s;
}
 
.img-enlarge3:hover {
  transform: scale(1.1);
}


/* 鼠标移到上面时变粗体 */
.zoom {
transition: all .2s ease-in-out;
transform: scale(1.0);
}
.zoom:hover {
transform: scale(1.0);
font-weight: bold;
}


/*
CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失
 */

.posrelative{position: relative;}
.hideImgTitle{
       height:120px;
       overflow: hidden;
}
.hideImgTitle:hover a{
       animation:mymove 1s 1;
       -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
       animation-fill-mode:forwards;
       -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}
@keyframes mymove
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}
 
@-webkit-keyframes mymove /*Safari and Chrome*/
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}
.hideTitle{
       display:block;
       width:120px;
       height: 70px;
       padding: 5px;
       background: #9c40e9;
       color:#fff;
       position: absolute;
       bottom: -70px;
       overflow: hidden;
       transition: all 0.3s;
}
.hideTitle:hover{color:#fff;text-decoration: none}



/*
创建一个弧形背景色
 */
.arc-shape {
  width: 200px;          /* 弧形的宽度 */
  height: 100px;         /* 弧形的高度 */
  background: #89df3c;   /* 背景颜色 */
  border-top-left-radius: 50%;     /* 左上角半径 */
  border-top-right-radius: 50%;    /* 右上角半径 */
  border-bottom-left-radius: 50%;  /* 左下角半径 */
  border-bottom-right-radius: 50%; /* 右下角半径 */
  height: 100px; /* 或任意高度 - 文字垂直居中 */
  line-height: 100px; /* 与容器高度相同 - 文字垂直居中 */
}


.arc-shape1 {
  width: 300px;          /* 弧形的宽度 */
  height: 150px;         /* 弧形的高度 */
  background: #89df3c;   /* 背景颜色 */
  border-top-left-radius: 50%;     /* 左上角半径 */
  border-top-right-radius: 50%;    /* 右上角半径 */
  border-bottom-left-radius: 50%;  /* 左下角半径 */
  border-bottom-right-radius: 50%; /* 右下角半径 */
  height: 150px; /* 或任意高度 - 文字垂直居中 */
  line-height: 30px; /* 与容器高度相同 - 文字垂直居中 */
  padding-top: 45px;
}



/* 打字机效果  */
.typing {
    /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
    width: 35em;
    /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
     注意step和字数保持一致，光标动画也是同理，*/
    animation: typingWords 5s steps(32) infinite, cursor 0.5s steps(1) infinite;
    /* 要设置不允许换行，且溢出隐藏 */
    white-space: nowrap;
    overflow: hidden;
    /* 使用右边框作为打印的指针光标 */
    border-right: 1px solid #000; 
}

@keyframes typingWords {
    0% {
width: 0;
    }
}

@keyframes cursor {
    50% {
border-color: transparent;
    }
}



/*
CSS3实现文字入场动画
 */

        @keyframes prom {

            0% {
                opacity: 0.3;
                transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -180px, 0);
                animation-timing-function: linear;
            }

            50% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, -40px, 0);
                animation-timing-function: linear;
            }

            100% {
                opacity: 1;
                transform: scale3d(1, 1, 1) translate3d(0, -40px, 0);
                animation-timing-function: linear;
            }
        }


        @keyframes prom2 {

            0% {
                opacity: 0.3;
                transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 50px, 0);
                animation-timing-function: linear;
            }

            50% {
                opacity: 0.9;
                transform: scale3d(0.9, 0.9, 0.9) translate3d(0, 40px, 0);
                animation-timing-function: linear;
            }

            100% {
                opacity: 1;
                transform: scale3d(1.3, 1.3, 1.3) translate3d(0, 35px, 0);
                animation-timing-function: linear;
            }
        }

        .promo{
            width: 100%;
            height: 300px;
            border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgb(13,197,193);
        }
        .txt{
            color: white;
            font-weight: bold;
            font-size: 16px;
            animation: 4s linear 0s infinite normal prom;
        }
        .txt2{
            color: white;
            font-weight: bold;
            font-size: 20px;
            animation: 4s ease-out 0s infinite normal forwards prom2;
        }


/* figcaption文字颜色和背景 */
.fgc{ 
    background-color: #0d6efd; 
    color: white; 
    font-weight: normal; 
    padding-left: 6px;
}




/* 文字仅在背景色上显示为边框 */

.outline-text {
  /* 定义文字的基本样式 */
  color: white;
  font-size: 48px;
  font-weight: bold;
 
  /* 使用text-stroke为文字添加边框效果 */
  -webkit-text-stroke: 1px black; /* Safari */
  text-stroke: 1px black; /* 标准语法（可能不被所有浏览器支持） */
}




/* 创建一条高度为5px、颜色为深灰色的分隔线，并在上下各有10px的外边距。 */
  hr {
    border: none;          /* 移除默认边框 */
    height: 5px;           /* 设置线的高度 */
    background-color: #333;/* 设置线的颜色 */
    margin: 10px 0;        /* 设置上下外边距 */
  }




<!-- 设置Pop-Up格式 - 桌面端 -->

* {box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: green;
  color: white;
  padding: 38px 48px;   /*16px 20px;*/
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;   /* 23px 50px */
  right: 28px;
  width: 280px;
  border-radius: 5px 5px 5px 5px;   /* 圆角 */
}

/* In-Button used to open the contact form - fixed at the bottom of the page */
.open-In-button {
  background-color: red;
  color: white;
  padding: 12px 18px;;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 32px;   /* 30px 57px */
  right: 38px;
  width: 250px;
  border-radius: 5px 5px 5px 5px;   /* 圆角 */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px;
  box-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.3)   /* 阴影的偏移量（水平偏移和垂直偏移），15px是模糊半径，0是扩张半径（可以设置为负值以收缩阴影）。阴影的颜色和透明度。*/
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container textarea[type=text] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
/* .form-container input[type=text]:focus, .form-container textarea[type=text]:focus { */
.form-container input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}
.form-container textarea[type=text]:focus {
  background-color: white;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-in-button:hover {
  opacity: 1;
}




<!-- 设置Pop-Up格式 - 手机端 -->

* {box-sizing: border-box;}

/* In-Button used to open the contact form - fixed at the bottom of the page */
.open-button-mob {
  background-color: green;
  color: white;
  padding: 5px 8px;;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 10px;   /* 30px 57px */
  /* left: 8px; */
  right: 8px;
  top: 89%;
  width: 110px;
  height: 30px;
  border-radius: 5px 5px 5px 5px;   /* 圆角 */
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 12px;
  box-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.3)   /* 阴影的偏移量（水平偏移和垂直偏移），15px是模糊半径，0是扩张半径（可以设置为负值以收缩阴影）。阴影的颜色和透明度。*/
}