.boldFont {font-weight:bold;}
.tomatoFont {color:tomato;}
.highlighter {background-image:linear-gradient(to top, #ABF200 50%, transparent 50%);}
.dark .highlighter {background-image:linear-gradient(to top, rgba(171,242,0,0.4) 50%, transparent 50%);}
.inListTxt {display:inline-block; width:calc(100% - 30px); vertical-align:text-top;}


#jpngifImgLoading {display:none; position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; font-size:14px; color:#fff; background-color:rgba(0,0,0,0.8); z-index:1;}
#jpngifImgLoading .wrap {display:table-cell; width:100%; height:100%; vertical-align:middle;}

#allBody .wrapBox {box-sizing:border-box; margin:0 auto; padding:0 10px; width:100%; max-width:1200px;}

@media screen and (max-width:1000px) {
#allBody .guideBox {box-sizing:border-box; padding:100px 4px; width:100%;}
}
@media screen and (min-width:1001px) {
#allBody .guideBox {box-sizing:border-box; padding:100px 0; width:100%;}
}
#allBody .guideBox p {margin:0 0 6px; padding:0; width:100%;}
#allBody .guideBox p.tit {margin-bottom:20px; font-weight:bold;}
#allBody .guideBox .btn {display:inline-block; padding:4px 8px; font-size:12px; color:#fff; background-color:var(--themeColor); border-radius:4px;}
#allBody .guideBox .btn:hover {background-color:var(--themeHoverColor);}
.dark #allBody .guideBox .btn {color:#ccc; background-color:rgba(0,0,0,0.2);}
.dark #allBody .guideBox .btn:hover {background-color:rgba(0,0,0,0.4);}
.redDashedLine {display:inline-block; padding:4px 8px; font-size:12px; color:red; border:2px dashed red;}


#allBody .valuesBox {display:table; padding:100px 0 50px; width:100%; text-align:center; background-color:#fff;}
.dark #allBody .valuesBox {display:table; padding:100px 0; width:100%; text-align:center; background-color:rgba(255,255,255,0.1);}
#allBody .valuesBox .wrapBox {display:table-cell; width:100%; height:100%; vertical-align:middle;}
#allBody .valuesBox .inpBox {box-sizing:border-box; display:inline-block; margin-bottom:10px; padding:4px 10px; font-size:14px; border:1px solid #ccc; border-radius:4px; vertical-align:middle;}
#allBody .valuesBox .inp {box-sizing:border-box; padding:4px; height:40px; border:none; background-color:transparent; vertical-align:middle;}
@media screen and (max-width:908px) {
#allBody .valuesBox .imgsUpBtn {box-sizing:border-box; display:inline-block; margin:0 auto 10px; padding:13px 20px; width:100%; max-width:306px; height:50px; font-size:14px; color:#fff; background-color:var(--themeColor); border-radius:4px; vertical-align:middle; cursor:pointer; transition:all 0.2s;}
}
@media screen and (min-width:909px) {
#allBody .valuesBox .imgsUpBtn {box-sizing:border-box; display:inline-block; margin:0 auto 10px; padding:13px 20px; width:100%; max-width:600px; height:50px; font-size:14px; color:#fff; background-color:var(--themeColor); border-radius:4px; vertical-align:middle; cursor:pointer; transition:all 0.2s;}
}
#allBody .valuesBox .imgsUpBtn:hover {background-color:var(--themeHoverColor);}
.dark #allBody .valuesBox .inpBox {border:1px solid rgba(0,0,0,0.2);}
.dark #allBody .valuesBox .inpBox, 
.dark #allBody .valuesBox .inpBox .inp {color:#ccc;}
.dark #allBody .valuesBox .imgsUpBtn {color:#ccc; background-color:rgba(0,0,0,0.2);}
.dark #allBody .valuesBox .imgsUpBtn:hover {background-color:rgba(0,0,0,0.4);}
#allBody .valuesBox .inpBox:hover {border:1px solid rgba(0,0,0,0.4);}
#allBody .valuesBox .imgsUpBtn i {margin-right:10px; font-size:16px;}
#allBody .valuesBox p {display:inline-block; margin:0; padding:0; width:100%; max-width:900px; text-align:left; font-size:14px;}


#allBody .sampledImgsBox {margin:40px auto; padding:40px 0; width:100%;}
#allBody .sampledImgsBox .dashboard {font-weight:bold; color:var(--themeColor);}
.dark #allBody .sampledImgsBox .dashboard {color:var(--themeColorDk);}
#allBody .sampledImgsBox ul {margin:0 auto; width:100%; background-color:rgba(255,255,255,1);}
.dark #allBody .sampledImgsBox ul {background-color:rgba(255,255,255,0.1);}
#allBody .sampledImgsBox ul:after {display:block; clear:both; content:"";}
#allBody .sampledImgsBox ul li {box-sizing:border-box; float:left; padding:10px; width:100%; max-width:200px; text-align:center; transition:all 0.2s;}
.dark #allBody .sampledImgsBox ul li:hover {background-color:rgba(0,0,0,0.4);}
#allBody .sampledImgsBox ul li img {display:block; width:100%; border-radius:8px;}
#allBody .sampledImgsBox ul li .btnBox {display:block; padding:10px; font-size:14px;}
#allBody .sampledImgsBox ul li .btnBox .downloadBtn {display:inline-block; padding:6px 14px; color:#213d52; background-color:#b0e943; border-radius:18px;}
#allBody .sampledImgsBox ul li .btnBox .downloadBtn:hover {box-shadow:2px 2px 12px 0 rgba(0,0,0,0.4);}


#allBody .timeLineImgsBox {margin:40px auto; padding:40px 0; width:100%;}
#allBody .timeLineImgsBox .dashboard {font-weight:bold; color:var(--themeColorDk);}
#allBody .timeLineImgsBox .GifImgBox {box-sizing:border-box; display:none; margin:40px auto 0; padding:40px; width:100%; max-width:1200px; background-color:rgba(255,255,255,1);}
.dark #allBody .timeLineImgsBox .GifImgBox {background-color:rgba(255,255,255,0.1);}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox {box-sizing:border-box; display:table; margin:0 auto; width:300px; height:200px; text-align:center; border:2px dashed red; border-radius:8px; transition:all 0.2s;}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox:hover {color:rgba(255,0,0,1); background-color:rgba(255,0,0,0.1);}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox span {display:table-cell; vertical-align:middle; cursor:pointer;}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox:has(#downloadGifBtn.active) {color:inherit; background-color:transparent;}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox #downloadGifBtn {display:none;}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox #downloadGifBtn.active {display:table-cell; vertical-align:middle;}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox #downloadGifBtn.active .downloadBtn {display:inline-block; padding:6px 14px; color:#213d52; background-color:#b0e943; border-radius:18px;}
#allBody .timeLineImgsBox .GifImgBox #finalGifBox #downloadGifBtn.active .downloadBtn:hover {box-shadow:2px 2px 12px 0 rgba(0,0,0,0.4);}
#allBody .timeLineImgsBox ul {margin:0 auto; width:100%; max-width:1200px; background-color:rgba(255,255,255,1);}
.dark #allBody .timeLineImgsBox ul {margin:0 auto; width:100%; max-width:1200px; background-color:rgba(255,255,255,0.1);}
#allBody .timeLineImgsBox ul:after {display:block; clear:both; content:"";}
#allBody .timeLineImgsBox ul li {box-sizing:border-box; float:left; display:table; position:relative; margin-bottom:60px; padding:10px; width:100%; max-width:200px; text-align:center; transition:all 0.2s;}
#allBody .timeLineImgsBox ul li:hover {background-color:rgba(0,0,0,0.2);}
.dark #allBody .timeLineImgsBox ul li:hover {background-color:rgba(0,0,0,0.4);}
#allBody .timeLineImgsBox ul li .wrapImgBox {display:table-cell; width:100%; height:100%; vertical-align:middle;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox {box-sizing:border-box; position:relative; margin-bottom:8px; width:100%; height:25px;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox:after {display:block; clear:both; content:"";}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox .listNum {float:left; padding:4px 8px; font-size:12px; color:#000; background-color:rgba(255,255,255,0.8); border-radius:4px;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox .allowBox {float:right; font-size:12px; color:#000; border-radius:4px; overflow:hidden;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox .allowBox .before {display:inline-block; padding:4px 10px; background-color:#b0e943; cursor:pointer;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox .allowBox .after {display:inline-block; padding:4px 10px; background-color:#b0e943; cursor:pointer;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox .allowBox .before:hover {background-color:#84e117;}
#allBody .timeLineImgsBox ul li .wrapImgBox .controlBox .allowBox .after:hover {background-color:#84e117;}
#allBody .timeLineImgsBox ul li .wrapImgBox img {border-radius:8px;}
#allBody .timeLineImgsBox ul li .btnBox {box-sizing:border-box; position:absolute; display:block; padding:10px; left:0; bottom:-40px; width:100%; font-size:14px;}
#allBody .timeLineImgsBox ul li .btnBox .timeBox {box-sizing:border-box; display:inline-block; padding:6px; background-color:rgba(0,0,0,0.1); border-radius:18px;}
#allBody .timeLineImgsBox ul li .btnBox .timeBox:hover {box-shadow:2px 2px 12px 0 rgba(0,0,0,0.4);}
.dark #allBody .timeLineImgsBox ul li .btnBox .timeBox {background-color:rgba(255,255,255,0.2);}
#allBody .timeLineImgsBox ul li .btnBox .timeBox .millisecond {padding:4px 8px; width:44px; color:#000; background-color:rgba(255,255,255,0.2); border:none; border-radius:18px;}

#allBody .timeLineImgsBox ul li .btnBox .timeBox:hover .millisecond {background-color:#fff; border:1px solid #000;}

.dark #allBody .boardBox {color:inherit;}