*{
margin: 0;
padding: 0;

}


body,html {
font-family: sans-serif;
background-image: url(../img/background-01.jpg);
background-position: center center;
background-size: cover;
background-repeat:no-repeat ;


}

.talkbox{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;


}

.main {
position: relative;
width: 100vw;
height: 100vh;
border-radius: 0;
overflow: hidden;
-webkit-box-shadow: 0px 20px 40px rgb(0 0 0 / 20%);
/* box-shadow: 0px 20px 40px rgb(0 0 0 / 20%); */
box-shadow: 0px 13px 36px rgb(0 0 0 / 23%);
}



.talkbar{
/* background-color: #00aebb; */
background-color: #48badf;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: 71px;




}


.talkbar p{
padding: 20px;
margin: 0;
font-size: 21px;
color: white;
}

.talkbar span{
padding: 7px 15px;
border: solid 1px white;
border-radius: 4px;
margin: 12px;

}


.talkbar a{
color: white;
}

.talkbar a:hover{
text-decoration: none;
color: white;
}


.more{
width: 30px;
height: 30px;
}

.more img{
width: 100%;
}

.column{
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
}

.alert button:focus{
outline: none;
}

.alert-warning{
background-color:#fefbd6!important ;
margin: 0!important;
border: solid 1px #fefbd6!important;

}

.alert{
border-radius: 0 0 3px 3px !important;

top: 0;
left: 0;
}

.chat {
background-color: #effbff;
/* background: #ebffff; */
/* height: calc(100% - 100px - 56px); */
height: calc(100% - 100px);
width: 100vw;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: scroll;
padding: 4vw;
position: fixed;

-webkit-transition: .3s all ease-out;
-o-transition: .3s all ease-out;
transition: .3s all ease-out;
}


.chat_footer form{
width: 100%;
padding: 12px ;
}

.chat_footer input{
width: 100%;
}


.chat_footer input:focus{
outline: none;
}

.footer_form__inputBar {
position: relative;
left: 0;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
background: none;
border: solid 1px rgb(202, 202, 202);
padding: 10px;
width: 80%;
-webkit-transition: .3s left ease-out;
-o-transition: .3s left ease-out;
transition: .3s left ease-out;
border-radius:30px ;


}

.chat_footer {
border-top: 1px solid rgb(202, 202, 202);
background: white;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 100;
font-size: 14px;
height: 70px;




}

.chat_footer_1{

display: flex;
    align-items: center;
    justify-content: center;

}


.submit_1 img{
width: 100%;
}

.submit_1{
width: 48px;
height: 48px;



}

.submit_1 a{
/* border:solid 1px #00aebb; */
border:solid 1px #35b2da;
background-color: white;
display: block;
width: 48px;
height: 48px;
padding: 10px;
border-radius: 50%;

}

.submit_2 img{
width: 100%;
}

.submit_2{
width: 48px;
height: 48px;

}

.submit_2 a{
border:solid 1px white;
/* background-color: #00aebb; */
background-color: #35b2da;
display: block;
width: 48px;
height: 48px;
padding: 10px;
border-radius: 50%;

}

.submit{
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.add{
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.chat_menu {
box-sizing: border-box;
width: 100%;
/* overflow: scroll; */
white-space: nowrap;
background-color: #ffffff;
transition: all .3s;

position: absolute;
bottom: 68px;
left: 0;
z-index: 9;
display: none;


}



.trigger{
cursor: pointer;
}

.menu--open {
display: block;
}



.chat_menu li img {
width: 60px;
height: 60px;
margin: 0px auto;
display: flex;
flex-direction: column;
margin-bottom: 8px;
}

.chat_menu li {
list-style: none;
float: left;
width: 16.66%;
text-align: center;
border-right: 1px solid #eaeaeacf;
padding: 15px 0;
background-color: white;
}

.chat_menu li a {
color: #6e6e6e;
font-size: 17px;
font-weight: 500;
}

.chat_menu li a:hover{
text-decoration: none;
color: #00aebb;
}




.alert{
position: absolute!important;
top: 71px;
left: 0;
width: 100%;
z-index: 9;

}

.alert p{
margin: 0;
}





.liad-card {
height: 42px;
width: 42px;
border-radius: 30px;
background-color: white;
overflow: hidden;

}

.liad-card img{
width: 100%;
}


/* =================== */


.onetitle{
background-color: #001965;
color:white;
text-align: center;
margin: 0;
padding: 10px;
}


.flex{
display: flex; 
}
.nntitle-1 p{ 
margin: 0
}


.nntitle-2 p{ 
margin: 0
}

.center{
text-align: center;
}

.nnimg{
width: 50%; 
margin: 0 auto; 
}

.nnimg img{
width: 100%; 

}

.cardword {
box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
}

.cardimg{
width: 100%;
}

.cardimg img{
width: 100%;
}



.loading{
margin-bottom: 20px;


}


.liad-word{
background-color: white; 

margin-left: 25px;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
position: relative;
max-width: 350px;


}


.liad-word::before{
content: '' ;
background: url('../img/arrow.png') no-repeat top left /30px 30px;/*相容沒測*/
position: absolute;
top: 0px;
left: -23px;
z-index: 2;
width: 30px;
height: 30px;


}

.liad-word p{
margin-bottom: 0!important;


}


.loading-1{
display: flex;


}




.liad-word-1{
background-color: white; 
display: flex;
margin-right: 25px;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
position: relative;
max-width: 350px;

}


.liad-word-1::before{
content: '' ;
background: url('../img/arrow.png') no-repeat top left /30px 30px;/*相容沒測*/
position: absolute;
top: 0px;
right: -23px;
z-index: 2;
width: 30px;
height: 30px;
transform:scaleX(-1);


}

.liad-word-1 p{
margin-bottom: 0!important;


}

.loading-2{
display: flex;
flex-direction: row-reverse;

}


.time{

margin-bottom: 23px;
text-align: right;

}


.time span{
font-size: 14px;
color: #6b6b6bcf;
}


.time-1{
text-align: left;

}


.time-1 span{
font-size: 14px;
color: #6b6b6bcf;
margin-bottom: 23px;
}

/* ---------小卡 */


.smallimg{
max-width: 1200px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;


}



.imgcard{
width: 280px;
margin: 10px;
border-radius: 10px;
padding: 15px;
background-color: white;
box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);

}




.noimgcard{
border-radius: 10px 10px 0 0!important;
}

.wrap{
width: 100%;
}


.cardworda{
display: flex;
margin-top: 15px;

}

.cardworda a{
width: 50%;
text-align: center;
padding: 5px;
font-size: 18px;
color: #011965;
font-weight: bold;
}

.cardworda a:hover{
text-decoration: none;
color: #011965;
}



.card-1{
display: inline-block;

}

.cardword p{
margin: 0;
font-size: 20px;
font-weight: 500;
}






::-webkit-scrollbar {
display: none; /* Chrome Safari */
}

/* -------- */


/* --------timebar */

.timebar{

text-align: center;
margin: 40px 0;
}

.timebar p{
font-size: 18px;
margin: 0;
background-color: rgb(203, 203, 203);
display: inline-block;
border-radius: 30px;
padding: 5px 10px;
color: white;
}


/* ----------小卡 */

.smallimg{
max-width: 1200px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;

display: flex;
}

.imgcard-1{
width: 250px;
margin: 10px 10px 0 10px;
border-radius: 10px;


}


.wrap{
width: 100%;
}


.cardworda{
display: flex;
margin-top: 15px;

}






.cardworda a{
width: 50%;
text-align: center;
padding: 5px;
font-size: 18px;
color: #158ab0;
}

.cardworda a:hover{
text-decoration: none;
color: #017f88c7;

}



.cardworda-1 a{
font-weight: 500;
display: flex;
flex-direction: column;
text-align: center;
border-top: solid 1px #aaaaaa30;
padding: 10px;
background-color: white;
color: #1f98c0;
font-size: 16px;
}

.imgcard-2 {
width: 250px;
border-radius: 10px;
}

.cardworda-1 a:last-child{
border-radius: 0 0 13px 13px;
}

.cardworda-1 a:hover{
color: #1f98c0;
text-decoration: none;
background-color: #fffcdc;
border-radius: 0 0 13px 13px;

}


.card-1{
display: inline-block;
}

.card-2{
display: inline-block;
padding: 10px;
}

.cardword p{
margin: 0;
font-size: 20px;
font-weight: 500;
}

.cardword{
margin: 0 10px 10px 10px;
padding: 15px 10px 10px 10px;
background-color: #fff;
border-radius: 0 0 10px 10px;
}


.cardword-2{

background-color: #fff;

}

.cardword-1{

box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
}


.cardword-2 p{

padding: 10px;
font-size: 20px;
font-weight: 500;
}


.smallimg-1{
max-width: 1200px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
display: flex;


}







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





.nntitle-1 { 

padding: 10px;
}
.nntitle-2 { 

padding: 10px;
}

.nnimg{
width: 100%; 
margin: 0 auto; 
}

.cardword {
border: none
}

.big-img{


border-radius: 10px;
padding: 15px;
background-color: white;
box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
width: 100%;
margin: 15px  auto 0 auto;
}

.big-img img{
width: 100%;
}

.liad-word{
   
    max-width: calc(100vw - 42px - 4vw* 5);
    
    }

    


}


/* ===================== */

@media only screen and (min-width: 767px){

.big-img{
margin: 15px 0 0 0!important ;
border-radius: 10px;
padding: 15px;
background-color: white;
box-shadow: 0px 0px 20px rgb(0 0 0 / 5%);
width: 500px;


}

.big-img img{
width: 100%;
}

}


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

    .chat_menu {
        position: fixed;
       
        bottom: 68px;
        left: 0;
        z-index: 10;
      
      } 
      
      
      body,html{
          overflow: hidden;
      }

      



      
}


@media only screen and (min-width: 540px){




.chat_footer input{
width: 100%;
}
.chat_footer {
/* height: 100%; */
position: relative;
}

.footer_form__inputBar {
padding-left: 14px;
font-size: 1rem;
}
.main {
width: 85vw;
height: 95vh;
max-height: 900px;
max-width: 1280px;
border-radius: 15px;
}


.chat {
height: calc(100% - 140px);
width: 100%;
padding: 25px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 0;
position: relative;
}




}


@media (max-width: 1023px){

.chat_menu li {
width: 33.33%;
height: 50%;
padding: 15px 0;
border-bottom: solid 1px #eaeaeacf;
}
}

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

}

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

}




@media screen and (min-width: 769px)and (max-width: 1023px){

}


@media screen and (min-width: 1024px)and (max-width: 1199px){

}


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

}