html{font-size: 16px;line-height: 1.5em;}
body,.ai-canvas :where(div,ul,ol,li,input,textarea,dl,dt,dd,h3,h4,dl,dd,dt,p){margin:0;padding:0;list-style:none;font-family: Arial, Helvetica, sans-serif,"Microsoft JhengHei";}
/* Remove the link outline */
:focus {-moz-outline-style: none;} /* For Firefox 及 Netscape 專用*/ 
*:focus { outline: none; }
/*不繼承內外具*/
div,header,input,textarea,ul,li,span{-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
:is(.answer .textbox ul,.answer .textbox li){margin:unset;padding:unset;list-style:unset;}
a{cursor: pointer;text-decoration: none;font-family: "Microsoft JhengHei"!important;}
/*定義了滾動條滑塊的樣式*/
::-webkit-scrollbar{
height: 5px !important;
width: 5px !important;
-webkit-overflow-scrolling: touch;
}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb:hover {border-radius: 10px;}
::-webkit-scrollbar-thumb {
border-radius: 0;
border-style: dashed;
background-color: rgba(12, 80, 235, 0.4);
border-color: #e2242400;
border-width: 1.5px;
background-clip: padding-box;
}
/*定義了軌道的樣式*/ 
::-webkit-scrollbar-track {/*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #EDEDED;
}	
::-webkit-scrollbar-thumb:hover {
background: rgba(157, 165, 183, 0.7)
}
 /*將IOS按鈕歸零*/
input, button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.ai-canvas,.aichatbox,.aichatbox header,.aichatbox.start header,.aichatbox.startbnt header,
.aichatbox.startbnt .Chat_startbnt,.aichatbox.startbnt .Chat_startbnt ul,.aichatbox.startbnt .Chat_startbnt li,
.Chat_string > li,.Chat_string .imagesbox,.Chat_string .imagesbox .fa,#gotop a,.nav_input.addtips .tips,.Chat_string > li .textbox,
.aichat-String,.aichat-String header,.aichat-String .stringbox,.aichat-String .stringbox .stringlist,.aichat-String .stringbox .stringlist dl,.aichat-String #CollapseMenu .bnt span,
.aichat-String .stringbox .stringlist dl dd,.aichat-String #CollapseMenu,
:is(.nav_guild) :is(.bntbox,.nav_input .textarea,.bntbox li a,.tips,.selectbox ul,.selectbox ul li,.selectbox i){display: flex;flex-wrap: wrap;}
.aichatbox textarea{background-color: transparent;}
.aichatbox textarea:focus {box-shadow: none;}

.fa:after ,.fa:before,.Chat_startbnt .icon:before,.Chat_startbnt .icon:after,.sub_menu .icon:before{display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.aichatbox{padding: 30px 10px;flex-direction:column;justify-content: space-between;flex-wrap: nowrap;height: 100vh;position: relative;flex: 1;}
/*.aichatbox:after{position: absolute;width: 100%;height: 100px;background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);content: "";bottom: 84px;left: 0;z-index: 5;}*/
.aichat-String #CollapseMenu .bnt:before,.aichat-String header .bnt:after,
.aichat-String .stringbox .stringlist dl,.aichat-String .stringbox .stringlist dl dd .more_ab,.aichat-String .stringbox,.aichat-String-scroll,
.aichat-String .stringbox .stringlist dl dd .more_ab:before,.aichat-String .stringbox .stringlist dl dd .more_ab:after,
.aichatbox:after{transition:all 0.5s ease-out;}
.ai-canvas{justify-content:space-between;align-items: stretch;gap: 50px;}
.aichatbox.start{justify-content:center;}
.aichatbox.start :is(.Chat_string,.Chat_startbnt),.Chat_startbnt,.nav_input .tips{display: none;}
/*.aichatbox.startbnt{margin-bottom: 150px;}*/
.aichatbox.startbnt .Chat_string{display: none;}
.aichatbox.startbnt header{padding: 20px 0 20px 0;}
.aichatbox.startbnt .Chat_startbnt{justify-content: center;align-items: center;}
.aichatbox.startbnt .Chat_startbnt ul{justify-content: flex-start;align-items: stretch;max-width: 890px;margin: 0 auto;gap: 20px;}
.aichatbox.startbnt .Chat_startbnt li{justify-content: space-between;align-items: flex-start;background-color: #EEEEEE;padding: 20px;border-radius: 10px;flex: 1 0 48%;position: relative;}
.aichatbox.startbnt .Chat_startbnt li:hover{background-color: #FFF;}
.aichatbox.startbnt .Chat_startbnt li a{position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 99;}
.aichatbox.startbnt .Chat_startbnt li a:hover + .icon.img02:after,
.aichatbox.startbnt .Chat_startbnt li a:hover + .icon.img04:after{animation: baloon_1 3s infinite;color: #333;}
.aichatbox.startbnt .Chat_startbnt li a:hover + .icon.img01:after{animation: baloon_2 3s infinite;color: #333;}
.aichatbox.startbnt .Chat_startbnt li a:hover + .icon.img05:after{color: #333;transition:all 0.8s ease-in-out;}
.aichatbox.startbnt .Chat_startbnt li a:hover + .icon.img05:before{opacity: 1;transition:all 0.8s ease-in-out;}
.aichatbox.startbnt .Chat_startbnt .icon{width: 75px;height: 75px;margin:15px 20px 15px 0;background-image: url(/images/aichatgpt.png);position: relative;}
.aichatbox.startbnt .Chat_startbnt .icon.img01:after,
.aichatbox.startbnt .Chat_startbnt .icon.img02:after,
.aichatbox.startbnt .Chat_startbnt .icon.img04:after{content: "\f002";font-size: 3rem;position: absolute;top:10px;right: 10px;color: #666666;}
.aichatbox.startbnt .Chat_startbnt .icon.img01:after{transform:scaleX(-1);left: 10px;right: auto;}
.aichatbox.startbnt .Chat_startbnt .icon.img03:after{content: "";position: absolute;top:0px;right: 0px;background-image: url(/images//aichatgpt.png);width: 100%;height: 100%;background-position: center -300px;opacity: 0;transition:all 0.8s ease-in-out;}
.aichatbox.startbnt .Chat_startbnt .icon.img05:after{content: "\f015";font-size: 2rem;position: absolute;top:15px;left: 10px;color: #666666;}
.aichatbox.startbnt .Chat_startbnt .icon.img05:before{content: "\f27a";font-size: 1.5rem;position: absolute;top: -6px;left: 36px;;color:#177296;opacity: 0;}
.aichatbox.startbnt .Chat_startbnt li a:hover + .icon.img03:after{opacity: 1;}
.aichatbox.startbnt .Chat_startbnt .icon.img01{background-position: center top;}
.aichatbox.startbnt .Chat_startbnt .icon.img02{background-position: center -75px;}
.aichatbox.startbnt .Chat_startbnt .icon.img03{background-position: center -150px;}
.aichatbox.startbnt .Chat_startbnt .icon.img04{background-position: center -225px;}
.aichatbox.startbnt .Chat_startbnt .icon.img05{background-position: center -375px;}
.aichatbox.startbnt .Chat_startbnt .c_text{flex: 1;}
.aichatbox.startbnt .Chat_startbnt .c_text h3{font-size: clamp(1.5rem , 3vw,1.6rem);line-height: 1.5em;margin-bottom: 5px;font-weight: bold;}
.aichatbox.startbnt .Chat_startbnt .c_text h4{font-size: clamp(1rem , 2vw,1rem);line-height: 1.5em;color: #666666;font-weight: bold;}
.aichatbox header{justify-content: center;align-items: center;font-size: clamp(1.5rem ,1.8vw ,3rem);font-weight: bold;padding: 20px 0 80px 0;display: none;line-height: 1em;}
.aichatbox.nav_guild_up{justify-content: flex-start;}
:is(.aichatbox.nav_guild_up) :is(.Chat_string,.Chat_startbnt){display: none;}
.aichatbox.nav_guild_up .nav_input{margin-top:20px}
.aichatbox.nav_guild_up.start header{padding: 20px 0 0 0;}

.Chat_string,.Chat_startbnt{width: 100%;flex:1; overflow: auto; overflow-X: hidden;z-index: 2;position: relative;padding: 10px 10px 70px 10px;}
.Chat_string{font-size: clamp(1.15rem ,2vw,1.15rem);line-height: 1.8em;}
.Chat_string > li.tips{position: absolute;bottom: 10px;left: calc((100% - 144px)/2);}
.Chat_string > li.tips a{color: orange;}
.Chat_string > li{justify-content:flex-start;flex-direction:row-reverse;margin-bottom: 45px;}
.Chat_string > li .imagesbox{width: 45px;height: 45px;border-radius: 50%;background-color:#f3f3f3;color: #FFF;justify-content: center;align-items: center;font-size: 1.8rem;overflow: hidden;}
.Chat_string > li .imagesbox .fa{position: relative;background-color: #006699;width: 45px;height: 45px;border-radius: 50%;justify-content: center;align-items: center;}
.Chat_string > li .imagesbox .fa:before{content: "\f007";}
.Chat_string > li .imagesbox img + .fa {display: none;}
.Chat_string > li .imagesbox img{max-width: 80%;max-height: 80%;}
.Chat_string > li .textbox{border-radius: 10px;padding:10px 20px;background-color: #f3f3f3;flex: 1;margin: 0 20px 0 5px;position: relative;z-index: 1;justify-content: flex-end; word-break: break-all;}
.Chat_string > li .textbox:after{position: absolute;content: "";border-style: solid;border-width: 8px 0 8px 8px ;border-color: transparent transparent transparent #f3f3f3;top:16px;right:-8px;}
.Chat_string > li .textbox:hover .tt_nav{display: block;}
.Chat_string > li .tt_nav{display: none;position: absolute;bottom: -45px;right: 0;z-index: 5;}
.Chat_string > li .tt_nav ul {display: flex;padding: 15px 20px;justify-content: flex-end;flex-direction: row-reverse;gap: 5px;}
.Chat_string > li .tt_nav ul li{margin: 0;}
.Chat_string > li .tt_nav a{width: 25px;height: 25px;border-radius: 5px;display: flex;justify-content: center;align-items: center;position: relative;color: #999;}
.Chat_string > li .tt_nav a:hover{background-color: #EEE;}
.Chat_string > li .tt_nav a.copy:before{content: "\f0c5";}
.Chat_string > li .tt_nav a.good:before{content: "\f087";}
.Chat_string > li .tt_nav .tips{display: none;position:absolute;bottom: 35px;background-color: #000000CC;color: #FFF;font-size: 1rem;border-radius: 10px;white-space:nowrap;padding: 5px 10px;justify-content: center;align-items: center;height: 30px;}
.Chat_string > li .tt_nav .tips:before{content: "";position:absolute;bottom: -5px;left:calc((100% - 10px) / 2);border-style: solid;border-width: 5px 5px 0 5px;border-color: #000000CC transparent transparent transparent;}
.Chat_string > li.answer .tt_nav {right: auto;left: 0;}
.Chat_string > li.answer .tt_nav ul{flex-direction: row}
.Chat_string > li.answer .imagesbox .fa{background-color: #666;}
.Chat_string > li.answer .imagesbox .fa:before{content: "\f2c0";font-size: 1.4rem;margin-top: 7px;}
.Chat_string > li.answer .imagesbox .fa:after{content: "\f27a";position:absolute;font-size: 1rem;top: 4px;right: 7px;}
.Chat_string > li.answer{flex-direction:row;}
.Chat_string > li.answer > .textbox{margin: 0 5px 0 20px;justify-content: flex-start;flex-direction: column;}
.Chat_string > li.answer .textbox:after{border-width: 8px 8px 8px 0;border-color: transparent #f3f3f3 transparent transparent ;left: -8px;right: auto;}
.nav_input{margin: 0 auto;width: calc(100% - 160px);border: 1px solid #F5F5F5;border-radius: 20px;box-shadow: 2px 7px 10px 0px rgba(0, 0, 0, 0.2);padding: 10px;min-height: 100px;margin-top: -50px;z-index: 99;position: relative;background-color: #FFF;}
.nav_input .inputbox textarea {width: 100%;height: 40px;max-height: 150px;padding: 5px;resize:none;border: none;font-size: 1.15rem;overflow: auto;overflow-X: hidden;word-break: break-all;word-wrap: break-word;white-space: pre-wrap;}
.nav_input.addtips{margin-bottom:25px;}
.nav_input.addtips .tips{position: absolute;bottom: -32px;left: 0;width: 100%;justify-content: center;font-size: clamp(0.85rem ,1vw,1rem);}
:is(.aichatbox.start,.aichatbox.startbnt) .nav_input{margin-bottom: 0px;}

.nav_guild .bntbox{gap: 10px;justify-content: flex-end;align-items: flex-start;position: relative;}

:is(.nav_guild .bntbox li) :not(.searchweb){position: relative;}
/*.nav_guild .bntbox li{position: relative;}*/
.nav_guild .bntbox > li > a{border: 1px solid #DDD;border-radius: 20px;height: 40px;justify-content: center;align-items: center;padding: 0 14px;gap: 5px;position: relative;}
.nav_guild .bntbox > li .tips{display: none;position:absolute;bottom: 50px;background-color: #000000CC;color: #FFF;font-size: 1rem;border-radius: 10px;white-space:nowrap;padding: 5px 0px;justify-content: center;align-items: center;line-height: 20px;}
.nav_guild .bntbox > li .tips:before{content: "";position:absolute;bottom: -5px;left:calc((100% - 10px) / 2);border-style: solid;border-width: 5px 5px 0 5px;border-color: #000000CC transparent transparent transparent;}
.nav_guild .bntbox > li > a:hover .tips{display: flex;}
.nav_guild .bntbox > li > a:hover{background-color: #f3f3f3;}
.nav_guild .bntbox > li > a,.nav_guild .bntbox  li > .fa:before{color: #999;font-weight: bold;}
.aichatbox.start .nav_guild .bntbox > li > .tips{bottom: -40px;}
.aichatbox.start .nav_guild .bntbox > li > .tips:before{bottom: 30px;border-width:0  5px 5px 5px;border-color: transparent transparent #000000CC transparent;}

/*輸入選單*/
.nav_guild .bntbox li .selectbox{display: none;position:absolute;padding: 10px;}
.nav_guild .bntbox li .selectbox ul li{justify-content: flex-start;align-items: center;padding: 10px 5px;}
.nav_guild .bntbox li .selectbox ul li a{color: #666;}
.nav_guild .bntbox li .selectbox ul li a:hover{color: #333;}
.nav_guild .bntbox li .selectbox .fa{justify-content: center;align-items: center;}
.nav_guild .bntbox li .selectbox .fa:before{margin-right: 5px;}
.nav_guild .bntbox li .selectbox .upload .fa:before{content: "\f0ee";}
.nav_guild .bntbox li.add{order: 1;}
.nav_guild .bntbox li.add > a.close_bnt{background-color: #DDD;border: 1px solid #CCC}
.nav_guild .bntbox li.add > a.close_bnt.fa:before{color: #333;}
.nav_guild .bntbox li.add > .fa:before{content: "\f067";color: #999;}
.nav_guild .bntbox li.add .tips{width: 80px;left: calc((100% - 80px) / 2);}
.nav_guild .bntbox li.add .selectbox{box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);min-width:150px;bottom: 50px;left: 0;border-radius: 10px;background-color: #FFF;}
.nav_guild .bntbox li.add .selectbox ul{flex-direction:column-reverse;}
.nav_guild .bntbox li.add .selectbox ul li{border-top:1px solid #DDD;}
.nav_guild .bntbox li.add .selectbox ul li:first-child{padding-bottom: 0;}
.nav_guild .bntbox li.add .selectbox ul li:last-child{border-top:none;padding-top: 0;}
.nav_guild .bntbox li.searchweb{order: 2;}
.nav_guild .bntbox li.searchweb > a.close_bnt{background-color:#DAEEFF;color: #379FFF;border: 1px solid #379FFF}
.nav_guild .bntbox li.searchweb > a.close_bnt.fa:before{color: #379FFF;}
.nav_guild .bntbox li.searchweb > .fa:before{content: "\f002";}
.nav_guild .bntbox li.searchweb .tips{width: 80px;left: calc((100% - 80px) / 2);}
.nav_guild .bntbox li.searchweb .close_bnt + .tips{display: none;}
.nav_guild .bntbox li.searchweb .selectbox{width: calc(100vw - 200px);top:60px;left: 0px;max-width: 100%;}
.nav_guild .bntbox li.searchweb .selectbox ul{flex-direction:column;}
.nav_guild .bntbox li.searchweb .selectbox ul li{border-bottom:1px solid #DDD;}
.nav_guild .bntbox li.searchweb .selectbox ul li:hover{background-color: #CCCCCC33;}
.nav_guild .bntbox li.searchweb .selectbox ul li:last-child{border-bottom:none;}
.nav_guild .bntbox li.reasoning{order: 3;}
.nav_guild .bntbox li.reasoning > a.close_bnt{background-color:#DAEEFF;color: #379FFF;border: 1px solid #379FFF}
.nav_guild .bntbox li.reasoning > a.close_bnt.fa:before{color: #379FFF;}
.nav_guild .bntbox li.reasoning > .fa:before{content: "\f0eb";}
.nav_guild .bntbox li.reasoning .tips{width: 120px;left: calc((100% - 120px) / 2);}
.nav_guild .bntbox li.dictation{margin-left: auto;order: 4;}
.nav_guild .bntbox li.dictation > .fa:before{content: "\f130";}
.nav_guild .bntbox li.dictation .tips{width:60px;left: calc((100% - 60px) / 2);}
.nav_guild .bntbox li.voice,.nav_guild .bntbox li.sendout{order: 5;}
.nav_guild .bntbox li.voice a,.nav_guild .bntbox li.sendout a{padding:0 5px;background-color: #000;color: #FFF;border: 1px solid #666;display:inline-flex; width:42px; vertical-align: middle;}
.nav_guild .bntbox li.voice a:hover,.nav_guild .bntbox li.sendout a:hover, .nav_guild .bntbox li.voice a.on{background-color: #666;}
/*.nav_guild .bntbox li.voice > .fa:before{content: "\f037";transform:rotate(90deg);}*/
.nav_guild .bntbox li.voice .tips{width: 120px;left: calc((100% - 120px) / 2);}
.nav_guild .bntbox li.voice a:nth-child(n+2){display:none; margin-left:3px;}
.nav_guild .bntbox li.voice a.play:before{content: "\f04b";}
.nav_guild .bntbox li.voice a.pause:before{content: "\f04c";}
.nav_guild .bntbox li.voice a.stop:before{content: "\f04d";}
.nav_guild .bntbox li.voice a.reload:before{content: "\f2f9";}
.nav_guild .bntbox li.voice a.test:before{content: "\f27a";}
.nav_guild .bntbox li.sendout{width: 42px;}
.nav_guild .bntbox li.sendout > .fa:before{content: "\f176";color: #FFF;}
.nav_guild .bntbox li.sendout .tips{width:60px;left: calc((100% - 60px) / 2);}
.nav_guild .bntbox :is(.add,.dictation,.searchweb){display: none;}
#gotop {position:absolute;z-index:150;right:calc((100% - 40px) / 2);bottom:150px;width:40px;height:40px;background:#FFFFFF;border: 1px solid #CCC;line-height:40px;border-radius:50%;transition:all 0.5s;/*box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);*/}
#gotop a{width:40px;height:40px;justify-content: center;align-items: center;}
#gotop a:before{content: "\f063";color:#666;}
#gotop:hover{background:#666666;}
#gotop:hover a:before{color: #FFF;}


.ai-canvas ::-webkit-scrollbar-button {border-radius: 10px;}
.ai-canvas ::-webkit-scrollbar-track {margin: 80px;}
.aiicon svg{fill:#FC0;}
.aiicon svg path:first-child{fill:rgb(255, 153, 0);}
.aichat-String-scroll{overflow:scroll; overflow-X: hidden;height: 100vh;width: 100%;;flex-direction: column;align-items: stretch;justify-content: flex-start;display: flex;}
.aichat-String{flex-direction: column;align-items: center;justify-content: flex-start;background-color: #f8f8f8;border-right: 1px solid #EEE;flex-wrap: nowrap;height: 100vh;position: relative;}
.aichat-String header{font-size: clamp(1.5rem ,2vw ,2rem);line-height: 1.2em;font-weight: bold;gap: 10px;z-index: 5;align-items: center;justify-content:center;padding: 0 50px 0 10px;top: 0px;right: 0px;position: absolute;background-color: #f8f8f8;}
.aichat-String header span.aiicon svg{width:clamp(30px, 4vw, 38px);height: 50px;}
.aichat-String #CollapseMenu{align-items: center;justify-content:flex-end;height: 50px;z-index: 6;width: 44px;}
:where(.aichat-String) :is(.stringbox,header){width:clamp(240px, 18vw, 320px);}
.aichat-String .stringbox{flex: 1;align-items: stretch;justify-content: flex-start;flex-direction: column;}
:where(.aichat-String .stringbox) :is(.stringlist,.stringmsg){padding: 10px;}

.aichat-String .stringbox .stringlist{flex-direction: column;justify-content:flex-start;align-items: stretch;width: 100%;flex: 1;flex-wrap: nowrap;}
.aichat-String .stringbox .stringlist:before{content: "聊天";color: #999;font-size:1.2rem;padding:0 10px;margin-bottom: 10px;}
.aichat-String .stringbox .stringlist .sortlist li{padding: 5px 10px;}
.aichat-String .stringbox .stringlist .sortlist li .sort-title{padding: 5px 10px;background-color: #CCCCCC33;border-radius: 5px;margin: 5px 0;}
.aichat-String .stringbox .stringlist .sortlist li dl{padding-left: 20px;}
.aichat-String .stringbox .stringlist dl:hover{background-color: #CCCCCCCC;}
.aichat-content .aichat-String.hide_string{background-color: transparent;border: none;}
.aichat-content .aichat-String.hide_string :is(.stringlist, #CollapseMenu){display: none;}
.aichat-content .aichat-String.hide_string .stringbox{box-shadow:none}
.aichat-content .aichat-String.hide_string header{font-size: clamp(2rem, 2.8vw, 3rem);padding: 0;}

@scope (.aichat-String ){
@scope (#CollapseMenu .bnt){
a{padding: 10px;display: inline-block;}
span{border: 1px solid #999;width: 30px;height: 30px;border-radius: 5px;padding:3px;gap: 3px;justify-content: space-between;align-items: stretch;background-color: #FFF;}
span:before,span:after{border-radius: 2px;content: "";}
span:before{width: 2px;background-color: #999;}
span:after{flex: 1;border: 1px solid #CCC;background-color: #EEE;}
:scope:hover span:before{width: 6px;}
:scope.open{display: none;}
:scope.close span:before{width: 6px;}
:scope.close span:hover:before{width: 2px;}
}
@scope (.stringlist){
:scope dl{justify-content: space-between;align-items: stretch;padding: 5px 10px;}
dl:hover{background-color: #CCCCCC66;border-radius: 5px;}
dl:hover dd{display: flex;}
dl a{color: #000;}
dl dt{flex: 1;}
dl dd{width: 30px;justify-content: center;align-items: center;position: relative;}
dl dd .more_ab{position: relative;}
dd .more_ab,dl dd .more_ab:before,dl dd .more_ab:after{content: "";width: 0px;height: 0px;border-radius: 5px;background-color: #999;display: block;transform-origin: center;}
dl:hover dd .more_ab,dl:hover dd .more_ab:before,dl:hover dd .more_ab:after{width: 5px;height: 5px;}
dl dd a.more:hover + span,dl dd a.more:hover + span:before,dl dd a.more:hover + span:after{box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);}
dl dd .more_ab:before,dl dd .more_ab:after{position: absolute;}
dl dd .more_ab:before{left: 0px;}
dl dd .more_ab:after{right: 0px;}
dl:hover dd .more_ab:before{left: -8px;}
dl:hover dd .more_ab:after{right: -8px;}
dl dd a.more {width: 100%;height: 100%;position: absolute;z-index: 2;}
dl dd .sub_menu{display: none;position: absolute;right: -15px;top:20px;background-color: #FFF;border-radius: 10px;padding: 10px;width: 126px;box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);z-index:4;}
dl dd .sub_menu li{border-bottom:1px solid #CCCCCC40;padding: 5px;}
dl dd .sub_menu li:last-child{border-bottom:none;}
dl dd .sub_menu li a{color: #333;display: block;}
dl dd .sub_menu li a:hover{color: #666;}
dl dd .sub_menu li .icon{margin-right: 5px ;font-size: 0.85rem;}
dl dd .sub_menu li .share:before{content: "\f064";}
dl dd .sub_menu li .edit:before{content: "\f040";}
dl dd .sub_menu li .save:before{content: "\f019";}
dl dd .sub_menu li .del:before{content: "\f014";}
dl dd:hover .sub_menu{display: block;}
}
.stringmsg {background-color: #FFF;color: #999;font-size: 0.95rem;color: #444;}
.stringmsg p{font-weight: bold;color: #FF6600;font-size: 1.15rem;}
}

@keyframes baloon_1{
 0% { transform:translateY(0px);}
 50% {transform:translateY(20px);}
 100% {transform:translateY(0px);}
}
@keyframes baloon_2{
 0% { transform:translateY(0px) scaleX(-1);}
 50% {transform:translateY(20px) scaleX(-1);}
 100% {transform:translateY(0px) scaleX(-1);}
}
@media screen and (min-width: 1600px) {
.Chat_string > li{margin-left: 80px;margin-right: 80px;}
}
@media screen and (min-width: 769px) {
.aichat-String #CollapseMenu .bnt {top: 0;right:0px;position: absolute;}
}
@media screen and (max-width: 768px) {
.page-container-aichat > header{display: none;}
/*.page-container-aichat .aichat-content .aichatbox{height: 480px;}*/
.nav_input{width: calc(100% - 10px);}
.nav_guild .bntbox li a font{display: none;}
.nav_guild .bntbox li.searchweb .selectbox{width: calc(100vw - 60px);}
.nav_guild .bntbox li.add .tips{left:0;}
.nav_guild .bntbox li.add .tips:before {left: calc((100% - 47px) / 2);}
.nav_guild .bntbox li.voice .tips{right:0;left: auto;}
.nav_guild .bntbox li.voice .tips:before {left: calc((100% + 70px) / 2);}
.aichatbox{padding: 60px 10px 10px 10px;}
.aichatbox:after{content: "";width: 100%;height: 100%;background-color: #00000000;position: absolute;top: 0;left: 0;z-index: 99;pointer-events: none;}
.aichatbox.maskbg::after{background-color: #00000080;}
.aichat-String{position: fixed;z-index: 999;}
/*.aichat-String-scroll.sidenav{width: 0;}*/
/*:where(.aichat-String-scroll.sidenav) :is(.stringlist,.stringmsg){display: none;} */
:where(.aichat-String) :is(.stringbox,header) {width: 100vw;}

.aichat-String .stringbox{margin-top: 60px;}
.aichat-String .stringbox.widthstyle{width: 100vw;}

.aichat-String #CollapseMenu{position: fixed;top: 0;left: 0;width: 100vw;z-index: 6;}
.aichat-String #CollapseMenu .bnt {top: 0;left:10px;z-index: 99;position: absolute;}
.aichat-String header{width: 100vw;pointer-events: none;position: absolute;top: 0;left: 0;height: 50px;box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;}
/*#String_menu{display:none;}*/
}