﻿@keyframes ho-0 {
    100% {transform:rotate(360deg);}
}
@keyframes ho-1 {
    0% {opacity:0}100% {opacity:1}
}

html{font-family:微軟正黑體;background-color:#fff;height:100%;}
body{height:100%;}
textarea{resize: none;}
body,div,ul,li,input,textarea,p{list-style:none;margin:0 0;padding:0;box-sizing:border-box;}
svg{max-width:50px;}
.hide{display:none;}
.nohide{display:block;}
.usepc {display:none;
}
.overcover:before{position:fixed; top:0; bottom:0; left:0; right:0;content:'';display:block; background:#000; opacity:0.7;z-index:999;}
.tooltip{position:relative;}
.tooltip:after{content:attr(data-tooltip);position:absolute;font-size:14px;
    background-color:#feffca;line-height:22px;min-width:40px;z-index:99;
    color:#333;font-weight:normal;border:1px solid #666;
    text-align:center; white-space: nowrap;padding:0 4px 0 4px;
    transform:scale(0); opacity:0;
}
.tooltip.top:after{top:-50%;
}
.tooltip.right:after{right:0;
}
.tooltip.bottom:after{top:100%;
}
.tooltip.left:after{left:0;
}
.tooltip.center:after{left:50%;
}
.tooltip:before{content:'';display:block; position:absolute;
    transform:scale(0); 
}

.tooltip.top:before{top:-50%;
    border-top:10px solid #feffca;border-bottom:0 solid transparent;
    border-left:10px solid transparent;border-right:10px solid transparent;
}
.tooltip.right:before{left:130%;
}
.tooltip.bottom:before{top:120%;
    border-top:0 solid transparent;border-bottom:10px solid #feffca;
    border-left:10px solid transparent;border-right:10px solid transparent;
}
.tooltip.left:before{left:20%;
}
.tooltip:hover:after{
    transform:scale(1);opacity:1;transition: opacity 0.3s linear;
}
.tooltip.center:hover:after{
    transform:scale(1) translate(-50%);
}
.tran{ transition: all 0.2s linear;}
.fix-img{background-attachment:fixed;background-size:cover;background-position:top center;}

.master-load{position:fixed;top:0;bottom:0;left:0;right:0; z-index:1000;
    transition: opacity .8s linear;background:rgba(0, 0, 0, 0.85);opacity:1; }
.master-load:after{position:fixed;top:45%;left:calc(50% - 25px);width:50px;height:50px; z-index:1001;
    content:"";display:block;margin:0 auto;
    box-sizing: border-box;border:5px solid;
    border-color:#fff #fff #fff transparent;
    border-radius:100%;
    animation: ho-0 1s infinite;
}

.master{position:relative; height:100%;}

.master-cont{position:relative;height: 100%;}

.master-top{position:fixed;bottom:10px;right:10px;z-index:98;height:39px;width:39px;line-height:10px;
    background-color:#fff; border:1px solid #555;overflow:hidden;
    border-radius:1px;text-align:center;cursor:pointer;opacity:.85;    
}
.master-top:before{position:absolute;bottom:7px;right:11px;
    content:'';display:block;
    padding:6px;transform:rotate(-45deg);
    border-top:3px solid #111;border-right:3px solid #111;
    border-bottom:0 solid #fff;border-left:0 solid #fff;
}
.master-top:hover{
    border:1px solid #111;
}

.master-ex:before{position:fixed; top:0 ;left:0; right:0; bottom:0;z-index: 9998; background:#242424;
 content:'';display:block;opacity: 0.9;}
.master-ex.hide{display:none;
}

.master-ex .tool{height:36px;}

.master-ex .doc{line-height:36px; color:#fedbdb; position:absolute; bottom:0; right:5px;
cursor:pointer;
}
.master-ex .close{line-height:28px; color:#fedbdb; position:absolute; top:5px; right:5px;
cursor:pointer; font-size:18px ;width:30px; text-align:center; 
}
.master-ex .max{line-height:28px; color:#fedbdb; position:absolute; top:5px; right:35px;
cursor:pointer; font-size:18px ;width:30px; text-align:center; 
}
.master-ex .revert{line-height:28px; color:#fedbdb; position:absolute; top:5px; right:65px;
cursor:pointer; font-size:18px ;width:30px; text-align:center; 
}
.master-ex .code{position:fixed; top:100px ;left:0; right:0; width:800px;margin: 0 auto;
text-align:left; line-height:30px; height:400px; background-color:#93001c;
font-size:16px; overflow:hidden;z-index:9999;padding: 0 4px 0 4px;
}
.master-ex .code .cont{height:328px; overflow:auto;padding:8px; background-color:#49000e;   
border: 1px solid #d50000;color:#ccc;white-space: pre;
}
.master-ex .code.big{height:100%; width:100%;top:0;
}
.master-ex .code.big .cont{height:calc(100% - 72px);
}

.master-ex .code.prompt{
    background-color:#004ab5;
}

.master-ex .code.prompt .cont{
    background-color:#001636; border: 1px solid #0062f0;
}

.master-ex .code.prompt .doc{
    display:none;
}

.warn,.warn { background-color: #ffb2af;border: 2px solid #ff0000;}

.master-print{height:100%;}

@page {size: auto; margin: 0cm 0cm;}

@media print{
    html{ width: 210mm;height: auto;margin: 0cm 0cm;overflow:auto;}
    a [href]:after { content: none !important;}
    ul,li,div{padding:0;margin:0 0;box-shadow: 0;height:initial; border:0;display:block;page-break-after:avoid;page-break-inside:avoid}
    .manage-head,.manage-user,.manage-left,.master-print{display:none;}
}


@page :footer {
display: none
}

@page :header {
display: none;color: #fff
}

@media screen and (max-width: 600px) {
    .tooltip:after {
        display: none;
    }
    .master-ex .code{top:0 ;left:0; right:0; bottom:0; width:100%;margin: 0 auto;
    text-align:left; line-height:30px; height:100%; background-color:#93001c;
    font-size:16px; overflow:hidden;z-index:9999;padding: 0 4px 0 4px;
    }
    .usepc {display:block;position:fixed;z-index:9;top:51px;bottom:0px;left:0;right:0;
    }
    .usepc:after {position:relative;z-index:10; color:#fff; text-align:center;
        display: block; content:"請用 PC 版瀏覽此網頁"; font-size:24px; line-height:400px;
    }
}