/*
http://patorjk.com/software/taag/#p=display&f=Small&t=width

          _   _   _           
  ___ ___| |_| |_(_)_ _  __ _ 
 (_-</ -_)  _|  _| | ' \/ _` |
 /__/\___|\__|\__|_|_||_\__, |
                        |___/ 

*/




:root {
    --bggray:#fafcfd;
    --darkgray:#313235;
    --darkgray2:#515255;
    --black:#333;
    --lightgray:#f1f2f5;
    --border:#e1e2e5;
    --chatbg1:#ecedee;
    --chatbg2:#4876c1;

    --gradient:linear-gradient(90deg, rgba(189,152,98,1) 18%, rgba(177,70,70,1) 82%, rgba(20,67,114,1) 100%);

    --bezier:cubic-bezier(.14,.1,.26,1);
    --bezier:cubic-bezier(.57,0,.38,1);

    --boxshadow: 0 1px 2px rgba(0,0,0,.2);
    --boxw: 600px;
}









/*

   __                    
  / _|_ _ __ _ _ __  ___ 
 |  _| '_/ _` | '  \/ -_)
 |_| |_| \__,_|_|_|_\___|
                         
*/


html { display:block; margin:0; padding:0; height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-padding-top:92px; }
body { margin:0; padding:0; overflow-x:hidden; overflow-y:visible; position:relative; font-size:.97em; background:#e9ebed; }
a:hover { opacity:1; }
* { box-sizing:border-box; margin:0; padding:0; font-family:'微軟正黑體',Arial,"Hiragino Sans GB","Source Han Sans",'PingFangTC-Regular',sans-serif; font-family:'Roboto',sans-serif; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-align:left; line-height:1em; position:relative; }
small { font-size:.8em; }
button { outline:none; border:none; cursor:pointer; }

.overlayer { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.8); z-index:111; }
.overlayer .btnclose { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.8); z-index:1; border:2px solid red; opacity:0; }
.overlayer .con { display:block; position:absolute; top:50%; left:50%; width:80%; height:calc(100% - 5em); transform:translate(-50%,-50%); overflow-y:scroll; background:white; padding:3em; z-index:13; }

@media -ms-viewport, screen and (max-width:640px) {
   body {}
}






.btn-send { display:block; font-size:1em; text-align:center; padding:.8em 1.5em; background:#779ad2; color:white; border-radius:.2em; text-decoration:none; word-break:keep-all; }
.btn-send:hover { background:#4876c1; }
.btn-send.disabled { background:#aaa; pointer-events:none; opacity:.5; }
input,
textarea { display:block; font-size:1em; border:1px solid var(--border); border-radius:.2em; width:100%; height:100%; padding:.3em .5em; }





.chatbox { display:block; padding:0; }
.chatbox ul { display:flex; flex-direction:column; padding:1em; gap:1em; padding-top:4em; padding-bottom:10em; }
.chatbox ul li { display:block; }
.chatbox ul li p { display:block; padding:0; margin:0; list-style:none; display:inline-block; width:auto; background:var(--chatbg1);background:white; padding:.8em 1.2em; border-radius:.5em; line-height:1.4; position:relative; }
.chatbox ul li p:before { content:''; border-top:1em solid white; border-right:1em solid transparent; position:absolute; top:0em; left:calc(100% - .5em); }
.chatbox ul li.sender { text-align:right; right:0; }
.chatbox ul li.sender p { background:var(--chatbg2); color:white; }
.chatbox ul li.sender p:before { border-top:1em solid var(--chatbg2); }
.chatbox ul li.reply { display:flex; text-align:left; gap:.8em; }
.chatbox ul li.reply p { max-width:calc(100% - 5em); }
.chatbox ul li.reply p:before { left:-.5em; border-right:0; border-left:1em solid transparent; }
.chatbox ul li.reply .thumb { display:block; top:-.8em; border-radius:3em; overflow:hidden; width:2.2em; height:2.2em; display:block; }
.chatbox ul li.reply .thumb img { content:url(../images/hmmlogo.png); width:100%; height:100%; object-fit:cover; display:block; position:absolute; top:0; left:0; }

.chatbox .chat { display:block; left:0; padding-top:.8em; }
.chatbox .chat .bubble { display:inline-block; width:auto; background:var(--chatbg1);background:white; padding:.8em 1.2em; border-radius:.5em; line-height:1.4; position:relative; }
.chatbox .chat .bubble:before { content:''; border-top:1em solid var(--chatbg1); border-right:1em solid transparent; position:absolute; top:0em; left:calc(100% - .5em); }
.chatbox .chat.q { text-align:right; right:0; }
.chatbox .chat.q .bubble { background:var(--chatbg2); color:white; }
.chatbox .chat.q .bubble:before { border-top:1em solid var(--chatbg2); }
.chatbox .chat.a { display:flex; text-align:left; gap:.8em; }
.chatbox .chat.a .bubble { max-width:calc(100% - 5em); }
.chatbox .chat.a .bubble:before { left:-.5em; border-right:0; border-left:1em solid transparent; }
.chatbox .chat.a .thumb { display:block; top:-.8em; border-radius:3em; overflow:hidden; width:3em; height:3em; display:block; }
.chatbox .chat.a .thumb:before { content:url(../images/hmmlogo.png); width:3em; height:3em; object-fit:cover; display:block; position:absolute; top:0; left:0; }



.bottomrow { background:white; border-top:1px solid var(--border); position:fixed; bottom:0; left:0; width:100%; }
.qset { display:flex; width:100%; padding:.8em .8em; gap:.6em; align-items:flex-end; }
.qset .row { display:block; padding:0; }
.qset .row textarea { height:4em; }
.qset .row .btn-send { width:100%; }
.qset .row.extand { width:100%; }

.bannerset { display:block; width:100%; padding:0; text-align:center; }
.bannerset img { display:block; width:100%; margin:0 auto; max-width:400px; height:auto; }