/*
http://patorjk.com/software/taag/#p=display&f=Small&t=detail%20page
https://htmlcolorcodes.com/color-names/
https://www.w3schools.com/colors/colors_names.asp

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

*/

:root {
    --bg:#f1f2f5; 
    --bgdark:#373333;
    --lightborder:#ccc; 
    --lightgray:#ccd0da; 
    --lightgray2:#f4f5f8;
    --black:#111;
    --gray:gray;
    --midgray:#888;
    --midgrayhover:#666;
    --red:red;
    --green:#4bad22;
    --gap:#6c7780;

    --menustrong:#155278;

    --border:#c1c2c8;
    --borderlight:#e1e2e8;
    --error1:red;
    --error2:#ffe7e7;

    --b1:#4bad22;
    --b1hover:#51c10c;
    --b2:#a4aeb6;
    --b2hover:#b5bec5;
    --b3:#ce0c0c;
    --b3hover:red;
}
@font-face { font-family:'mono'; font-style:normal; font-weight:bold; src:url('../font/andalemo.ttf') format('truetype'); }

html,body { margin:0; padding:0; width:100%; height:100%; position:relative; }
html,body * { margin:0; padding:0; position:relative; font-family:'華康正黑體',Arial,sans-serif; font-size:1rem; box-sizing:border-box; }
body.dev { color:red; }
body.dev .sidebar { background:red!important; }
body.bigframe { display:block; width:100%; height:100vh; overflow:hidden; background:var(--lightgray); }
a { cursor:pointer; }
textarea { height:20em; }
textarea[rows="2"] { height:5em; }
textarea[rows="3"] { height:6em; }
select,
textarea,
input[type="text"], 
input[type="date"], 
input[type="calender"], 
input[type="number"], 
input[type="password"] { display:block; position:relative; border-radius:.2em; border:1px solid var(--border); box-shadow:inset 0 1px 2px rgba(0,0,0,.1); font-size:1.1em; padding:.5em 1em; width:100%; width:calc(100% - 2em); }
input.dollar { text-align:right; }
input.percentage { text-align:right; width:calc(100% - 2em)!important; display:inline-block; margin-right:.5em; }


div.graybar { display:block; margin:0; border:0; height:2em; width:100%; background:var(--gray); opacity:.2; }



.btn { display:inline-block; font-size:.8rem; color:white; background:var(--midgray); margin:0 .2em; padding:1em 1.8em; line-height:1; cursor:pointer; border-radius:.3em; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.btn:hover { background:var(--midgrayhover); }


.btn-addnew { background:var(--b1); }
.btn-addnew:hover { background:var(--b1hover); }
.btn-delete { background:var(--b3); }
.btn-delete:hover { background:var(--b3hover); }
.btn-cancel { background:var(--b2); }
.btn-cancel:hover { background:var(--b2hover); }
.btn-small { padding:.3em .8em; }

.btn-check { padding:.5em 1.8em; }
.btn-check.selected { background:var(--green); opacity:1; xxxpadding:2.5em; text-align:center; }
.btn-check.selected:before { content:url(../images/icon-checked.svg); display:block; object-fit:contain; height:1.8em; width:1.8em; margin:0 auto; transform:translateY(-.2em); }

.loading { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,.5); z-index:1222; }



/*

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

*/



.loginbg { display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; background:green; overflow:hidden; }
.loginbg:after { content:url(/images/bg/bg3.jpg); display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:cover; mix-blend-mode:multiply; overflow:hidden; }
.loginbg.half { width:50vw; }
.loginbg.half:after { content:url(/images/bg/bg4.jpg); width:50vw; }
.loginframe { z-index:12; width:100vw; height:100vh; }
    .loginframe .loginbox { display:block; width:500px; padding:0; z-index:12; background:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .loginframe .loginbox .adminlogo { height:4em; z-index:12; margin:2em 3em; }
    .loginframe .loginbox .flex { display:flex; justify-content:left; background:lightgray; padding:2em 3em; }
    .loginframe .loginbox .flex .row.input { display:block; width:300px; padding:0 .5em; }
    .loginframe .loginbox .flex .row.input label { display:block; font-size:.8em; }
    .loginframe .loginbox .flex .row.input input { display:block; width:100%; font-size:1.2em; margin:.2em 0; padding:.5em .4em; background:white; }
    .loginframe .loginbox .flex .row.input .btn { margin:.5em; }
    .loginframe .loginbox .error { background:red; color:white; padding:.2em .5em; width:auto; }
    
    .etnote { padding:2em 1em; font-size:.6em; opacity:.3; line-height:1.5; }
    .etnote a { font-size:inherit; line-height:inherit; color:inherit; }


.copyrights { font-size:.78em; letter-spacing:.01em; font-weight:bold; position:fixed; bottom:0; left:0; transform-origin:top left; transform:rotate(-90deg); opacity:.2; padding:1.5em .5em; }
.copyrights:before { content:''; display:block; width:4em; height:2px; position:absolute; top:2em; left:0; transform:translateX(-100%); background:black; }









/*

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

*/
.sidebar { display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; left:0; width:100%; height:auto; overflow:hidden; overflow-y:auto; align-items:center; background:var(--lightgray); z-index:22; font-family:'Raleway',sans-serif; padding:1em 1em 2em 1em; }
    .sidebar h2 { display:block; font-weight:bold; margin:0; pointer-events:none; }
    .sidebar .mainlogo { padding:.6em 1em .6em 4em; margin-left:1em; display:block; box-sizing:border-box; font-size:1em; font-weight:bold; }
    .sidebar .mainlogo img { display:block; height:2.5em; margin:0; position:absolute; top:50%; left:0; transform:translateY(-50%); }
    .sidebar .mainlogo span { display:block; font-size:.5rem; }
    .sidebar .mainlogo p { display:block; font-size:.5rem; }
    .sidebar .user { display:flex; align-items:center; justify-content:right; padding:.5em 1em; padding-right:4em; }
    .sidebar .user .img { display:block; margin:0 1em; border-radius:5em; width:2.5em; height:2.5em; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.3); position:absolute; top:50%; right:0; transform:translateY(-50%); }
    .sidebar .user .img img { display:block; width:100%; height:100%; object-fit:cover; }
    .sidebar .user span { display:block; text-align:center; font-size:.7em; font-weight:bold; }
    .sidebar .user .btn-logout { display:inline-block; padding:.2em .5em; opacity:.5; }
    .sidebar .user .btn-logout:hover { opacity:1; }
    .sidebar .menuset { padding:0; z-index:10; position:relative; display:flex; justify-content:center; align-items:center; height:4em; xxxxborder:2px solid red; width:100%; }
    .sidebar .menuset h3 {}
        .sidebar .menuset .group { display:block; padding:0; margin:0 .2em; height:2.5em; border-radius:.3em; background:var(--green); align-items:center; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.1); height:2.5em; padding-left:10vw; }

        .sidebar .menuset .group p { display:flex; align-items:center; font-weight:bold; margin:0; height:auto; padding:.6em 1.5em; color:white; font-size:.7em; opacity:.7; cursor:pointer; justify-content:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); left:0; transform:translateY(-50%); text-align:center; width:10vw; }
        .sidebar .menuset .group .sub { display:flex; justify-content:center; height:100%; padding:0; float:left; align-items:center; padding-right:1.5em; }
        .sidebar .menuset .group .sub a { display:flex; align-items:center; opacity:.2; word-break:keep-all; margin:0; line-height:1; padding:.2em .6em; font-size:.9em; cursor:pointer; color:white; height:2em; }
        .sidebar .menuset .group .sub a:hover {opacity:.4;}
        .sidebar .menuset .group .sub a:first-child { xxxpadding-left:1.5em; }
        .sidebar .menuset .group .sub a:last-child { xxxpadding-right:1.5em; }
        .sidebar .menuset .group .sub a.selected { opacity:1; }
        .sidebar .menuset .group .sub a.selected:afterxxxxx { content:''; display:block; width:1.2em; height:.3em; border-radius:.2em; background:#ce0d0d; position:absolute; bottom:-.3em; left:50%; transform:translate(-50%,50%); }

        .sidebar .menuset .group.open { width:auto; }
        .sidebar .menuset .group.open p { /*position:relative; top:auto; left:auto; transform:none; margin-top:.5em; xxxdisplay:none;*/ }
        .sidebar .menuset .group.open .sub { opacity:1; }
        .sidebar .menuset .group.on { xxxxborder:2px solid rgba(255,255,255,.2); }


        .sidebar .menuset .dot { display:block; width:1.3em; height:.3em; background:blue; transform:translateX(-50%); position:absolute; top:3.1em; left:0; opacity:.8; }
        .sidebar .menuset .line { display:block; width:1.3em; height:.3em; border-radius:1em; background:var(--green); background:rgba(50,133,62,.8); background:#ce0d0d; transform:translateX(-50%); position:absolute; top:3.1em; left:0; animation:_flash 3s infinite; }
            @keyframes _flash { 0%,100%{background:#ce0d0d}50%{background:red} }






/*

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

*/

.container { display:block; width:calc(100% - 4.5em); height:calc(100vh - 6em); border:0; overflow:hidden; border-radius:1em 1em 0 0; position:relative; overflow-y:scroll; padding:0; position:absolute; bottom:0; left:4em; z-index:34; box-shadow:-1px -2px 5px rgba(0,0,0,.1); background:white; }


.page { display:block; padding:2em; height:auto; }
.page>p { display:block; font-size:.9em; xxxpadding:.5em 0; line-height:1.2; }
.overlay { display:block; width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,.7); z-index:123; }
.overlay-error { display:block; width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(86,10,10,.9); z-index:123; }
.overlay-error .con { padding:5em; }
.overlay-error .con h2 { font-size:.9em; color:white; margin:1em 0; }
.overlay-error .con .btn { font-size:.9em; text-transform:uppercase; }
.fixheader { display:flex; align-items:center; padding:.2em; width:100%; position:fixed; top:0; left:0; z-index:50; background:var(--bgdark); }
    .fixheader .floatright { display:block; text-align:right; width:100%; transform:translate(-1.7em,1.5em); }
    .fixheader .floatright select { display:inline-block!important; width:180px; padding:.8em 1.8em!important; font-size:.8rem; }
    .fixheader h2 { display:block; font-size:1em; margin:0; font-size:.9em; color:white; margin-left:1em; word-break:keep-all; white-space:nowrap; }
    .fixheader select { display:block; }
    .fixheader.shorten { background:white; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.row {}
.row.flex { display:flex; }
.row.flex.bottom { align-items:flex-end; }
.row.flex.wrap { flex-wrap:wrap; }
.row.flex .col { display:block; border:1px solid var(--black); margin:0 -1px -1px 0; width:50%; box-sizing:border-box; padding:1em; }
.row.flex .asrow { display:block; width:100%; padding:1em .5em; }


.popcon { display:block; width:1100px; max-width:calc(100% - 2em); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:3em 4em; border:0; z-index:234; box-shadow:-2px 0 6px rgba(0,0,0,.15); background:white; display:none; }
.popcon .listblock { border:1px solid var(--gray); max-height:80vh; overflow-y:scroll; }
.popcon .center { text-align:center; padding-top:.5em; }
    .popcon-news .listblock { background:var(--lightgray); }
    .popcon-news .listblock .item { margin:.5em; background:white; display:block; }
    .popcon-news .listblock .item p { padding:.8em; font-size:.9em; }


.inputrow { padding:.2em 0; }
.inputrow.error { xxbackground:var(--error2); }
.inputrow.error input,
.inputrow.error textarea { background:var(--error2); border:1px solid var(--error1); }
.inputrow .error { display:block; color:var(--error1); padding:.2em; font-size:.8em; border-radius:2px; }el 
.inputrow.checkboxset { display:block!important; }
.inputrow.checkboxset label { display:block; width:100%; margin:0; height:auto; cursor:pointer; transition:all .2s; box-shadow:none; border-radius:0; }
.inputrow.checkboxset label input[type="checkbox"] { margin-right:.5em; }
.inputrow.newsrelateset {}
.inputrow.newsrelateset .item { display:flex; margin:.2em 0; align-items:center; width:100%; justify-content:left; }
.inputrow.newsrelateset .item img { display:block; width:3em; height:2em; border:1px solid gray; object-fit:cover; margin-right:1em; }
.inputrow.newsrelateset .item p { display:block; width:100%; }
.inputrow.newsrelateset .item a {}
.inputrow.newsrelateset .item .info { display:flex; width:100%; }
.inputrow.homeorderset {}
.inputrow.homeorderset .item { display:flex; margin:.2em 0; align-items:center; width:100%; }
.inputrow.homeorderset .item img { display:block; width:3em; height:2em; object-fit:cover; margin-right:1em; }
.inputrow.homeorderset .item p { display:block; width:100%; }

.inputrow.checkboxset .btn,
.inputrow.newsrelateset .btn { margin-left:0; xxxxmargin-top:1em; }

.inputrow.checkboxset label:last-of-type,
.inputrow.checkboxset .item:last-of-type,
.inputrow.newsrelateset .item:last-of-type { margin-bottom:1em; }


/* 特殊編排 */
.inputrow.autoonline { margin-top:1em; display:flex; align-items:center; font-size:1em; flex-wrap:wrap; }
    .inputrow.autoonline span { display:flex; width:90%; align-items:center; font-size:1em; margin:.2em 0; }
    .inputrow.autoonline input { width:70%; margin:0 .5em; }
.inputrow.revenuecell { xxxmargin-top:1em; display:flex; justify-content:center; align-items:center; font-size:1em; flex-wrap:wrap; }
    .inputrow.revenuecell span { display:block; width:30%; font-size:1em; padding-right:1em; margin:.2em 1em 0 0; border-right:1px solid var(--border); }
    .inputrow.revenuecell span:last-child { border-right:0; }
    .inputrow.revenuecell input { width:100%; margin:.5em 0; }




.note { font-size:.9rem; opacity:.7; margin-top:0; }
.note.fileyoutube,
.note.contactsample { margin-top:.4em; }

.inputtable { width:100%; border-collapse:collapse; border-bottom:1px solid var(--border); border-right:1px solid var(--border); margin-top:3em; }
    .inputtable th, 
    .inputtable td { padding:.5em; border-left:1px solid var(--border); border-top:1px solid var(--border); text-align:left; vertical-align:top; width:50%; font-size:.9em; word-break:keep-all; white-space:nowrap; }
    .inputtable th:first-child,
    .inputtable td:first-child { width:100px; }
    .inputtable td .note { color:darkblue; font-weight:bold; font-size:1em; }
    .inputtable .gap { background:var(--gap); }
    .inputtable .blank { border:0; }
    .inputtable .title { background:var(--b2); color:white; }
    .inputtable .inputrow.error { background:var(--error2); color:var(--error1); }
    .inputtable .inputrow.error .error { display:block; color:var(--error1); padding:.4em .2em; }
    .inputtable h1 { display:block; background:red; color:white; font-size:2em; }


.ptb4 { padding:1.2em 0; }


.gaptr { height:3em; background:#798792; }

.listblock { display:flex; flex-wrap:wrap; margin:0 -2em; width:calc(100% + 4em); padding:4em 2em; }
.listblock .item { display:flex; margin:2em; width:calc(20% - 4em); height:auto; cursor:pointer; transition:all .2s; overflow:hidden; border-radius:.3em; box-shadow:0 1px 2px rgba(0,0,0,.2); flex-direction:column; background:var(--lightgray2); }
.listblock .item .num { display:block; position:absolute; top:0; left:0; background:black; color:white; padding:.3em 1em; border-radius:0 0 1em 0; font-weight:bold; z-index:11; transition:all .2s; }
.listblock .item .img { display:block; width:100%; height:6em; transition:all .2s; overflow:hidden; }
.listblock .item .img img { display:block; width:100%; height:100%; transform:scale(1); object-fit:cover; transition:all .2s; }
.listblock .item .info { display:block; font-size:.8em; height:auto; padding:0; z-index:10; color:var(--black); padding:.5em .8em; }
.listblock .item .info p { display:block; width:100%; margin:0 auto; padding:.2em; font-size:1em; font-weight:normal; text-align:left; opacity:.5; }
.listblock .item .info p.fullcolor { opacity:1; }
.listblock .item .info strong { display:block; width:100%; margin:0 auto; padding:.2em; font-size:1em; font-weight:normal; text-align:left; }
.listblock .item .info strong span { font-size:.9em; opacity:.5; }
.listblock .item .order { display:block; margin:0 1em; background:gray; color:white; width:1.2em; height:1.2em; border-radius:2em; text-align:center; font-size:.8em; padding:.1em; opacity:.5; }
.listblock .item.offline { opacity:.2; }
.listblock .item.offline .info strong { color:gray; }
.listblock .item.offline .img img { mix-blend-mode:luminosity; }

.listblock .item:hover { transform:scale(1.1); }
.listblock .item:hover .num { background:var(--b1); }
.listblock .item:hover .img { background:black; }
.listblock .item:hover .img img { transform:scale(1.1); opacity:.8; }

.listblock.brand {}
.listblock.brand .group { display:flex; flex-wrap:wrap; width:100%; border-bottom:1em solid rgba(200,200,200,.1); padding:0 0 4em 0; }
.listblock.brand .group:last-child { border-bottom:0; }
.listblock.brand .group h3 { display:block; width:100%; font-weight:bold; font-size:1.3em; margin:2em 0; letter-spacing:.1em; xxxbackground:var(--b1); border-left:1em solid var(--b1); padding: .4em; padding-left:1em; }
.listblock.brand .item { display:flex; margin:0; width:calc(33.33% - 2px); border-radius:.3em; flex-direction:row; margin-bottom:1px; }
.listblock.brand .item .img { width:7em; border-radius:0; margin-right:1px; }
.listblock.brand .item .info { width:calc(100% - 7em); position:relative; }
.listblock.brand .item .info .session { width:auto; display:inline-block; font-weight:bold; position:absolute; top:50%; right:1em; transform:translateY(-50%); }
.listblock.brand .item:hover { transform:scale(1); }
.listblock.brand .item:hover .num { background:var(--b1); }
.listblock.brand .item:hover .img { background:black; }
.listblock.brand .item:hover .img img { transform:scale(1.1); opacity:.8; }
.listblock.brand .item:hover .info strong { color:var(--b1); }

.listblock.inlist { flex-wrap:none; }
.listblock.inlist .group { display:flex; flex-wrap:wrap; width:100%; border-bottom:1em solid rgba(200,200,200,.1); padding:0 0 4em 0; }
.listblock.inlist .group:last-child { border-bottom:0; }
.listblock.inlist .group h3 { display:block; width:100%; font-weight:bold; font-size:1.3em; margin:2em 0; letter-spacing:.1em; xxxbackground:var(--b1); border-left:1em solid var(--b1); padding: .4em; padding-left:1em; }
.listblock.inlist .item { display:flex; margin:0; width:100%; border-radius:.3em; flex-direction:row; margin-bottom:2px; }
.listblock.inlist .item .info { padding-left:5em; }
.listblock.inlist .item .info strong { font-weight:bold; }
.listblock.inlist .item:hover { transform:scale(1); }
.listblock.inlist .item:hover .num { background:var(--b1); }
.listblock.inlist .item:hover .info strong { color:var(--b1); }

.listblock.member { flex-wrap:none; }
.listblock.member .item { display:flex; margin:0; width:100%; border-radius:.3em; flex-direction:row; margin-bottom:2px; cursor:default; }
.listblock.member .item .info { border-right:1px solid lightgray; width:16%; }
.listblock.member .item .info:nth-child(2) { padding-left:5em; width:24%; }
.listblock.member .item .info:last-child { border:0; }
.listblock.member .item .info strong { font-weight:bold; }
.listblock.member .item .info a:hover { color:var(--b1); opacity:1; }
.listblock.member .item .info .btn-delete { position:absolute; top:50%; right:1em; transform:translateY(-50%); padding:.5em 1em; color:white; background:gray; border-radius:.2em; font-size:.7em; }
.listblock.member .item:hover { transform:scale(1); background:rgba(150,150,150,.2); }
.listblock.member .item:hover .num { background:var(--b1); }
.listblock.member .item:hover .info strong { color:var(--b1); }
.listblock.member .item.header { border-bottom:0; }






.thumb { display:flex; margin:.5em 0; flex-wrap:wrap; width:40vw; justify-content:left; word-break:break-all; white-space:normal; }
.thumb .item { display:block; width:10rem; height:8rem; object-fit:cover; background:var(--black); margin:0 1em 1em 0; position:relative; cursor:move; border-radius:.2em; overflow:hidden; }
.thumb .item img { display:block; width:100%; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.thumb .item.large { width:25em; height:25em; }
.thumb .item.large img { width:100%; height:100%; object-fit:cover; }
.thumb .item .btn-delete { display:block; padding:.2em 1em .4em 1em; position:absolute; bottom:.4em; right:.4em; background:gray; border-radius:.3em; cursor:pointer; transition:all .2s; }
    .thumb .item .btn-delete:before { content:'x'; line-height:1; display:block; color:white; }
    .thumb .item .btn-delete:hover { background:var(--error1); }
    .thumb .item.bgwhite,
    .thumb .item.bgwhite>img { background:white; }
.thumb .link { display:block; margin:.5em 0; position:relative; text-decoration:underline; color:blue; }




label .btn-delete { display:inline-block; padding:.2em .5em; margin-right:.5em; background:gray; border-radius:.15em; cursor:pointer; transition:all .2s; }
    label .btn-delete:before { content:'x'; line-height:1; display:block; color:white; font-size:.7em; }
    label .btn-delete:hover { background:var(--error1); }







.row>h1 { font-size:2em; margin:1em 0; }
.row>h2 { font-size:1em; margin:2em 0; padding:1em; }
.row .sectitle { width:100%; padding:1.5em 0; background:transparent; border-top:10px solid var(--lightgray); }
.row .sectitle span { color:white; background:var(--black); font-size:1.5em; width:auto; padding:.2em 1.6em; display:inline-block; border-radius:4em; }

.row.welcome { padding:4em; padding-left:55vw; }
.row.welcome .adminlogo { width:12em; }
.row.welcome h1 { line-height:1.4; }
.row.welcome p { font-size:.8em; opacity:.8; margin-bottom:1em; }
.row.welcome .row { padding:.8em 0; }