@charset "utf-8";

*, *:after, *:before { box-sizing:border-box; }

body { background-color:#f2f2f2; font-weight:400; min-width:320px; }
#wrap { min-width:320px; }
header { height:3.5rem; background-color:#335f9c; position:fixed; width:100%; z-index:870; min-width:320px; }
#wrap.mainSub #container { padding:7.5rem 0.75rem 4.5rem; }
#container { padding:4.25rem 0.75rem 4.5rem; z-index:10; }
footer { z-index:500; position:fixed; right:0.5rem; bottom:5rem; }

button:focus { outline:none; }

/* HEADER */

header h1 { text-align:center; height:3.5rem; font-size:1.5rem; COLOR:#fff; display:block; position: relative; z-index:850; background:#335f9c; background-size:auto 3.5rem; }
header h1 a { display:block; margin:0 auto; height:3.5rem; width:150px; background:url('/~ftp_toolis/images/common/logo01.png') no-repeat center; background-size:contain;  }
header h1 a span { display:none; }
header div.posArea { position: relative; z-index: 999; background-color: #335f9c; }
header div.posArea div.nowPosition { }
header div.posArea div.nowPosition button { height: 3.5rem; padding: 0 1.3rem 0 0.5rem; background: url('/~ftp_toolis/images/common/downBtn.png') no-repeat right 1.6rem; background-color: rgba(0,0,0,0);  }
header div.posArea div.nowPosition button span { color: #fff; font-size: 1rem; font-weight: bold; }
header div.posArea div.posList { display: none; position: absolute; top: 2.5rem; left: 0.5rem; border: 1px solid #e5e5e5; border-radius: 0.3rem; background-color: #fff; padding: 10px; }
header div.posArea div.posList ul li a { display: block; min-width: 170px; padding: 8px 0; border-bottom: 1px solid #e5e5e5; }
header div.posArea div.posList ul li a span { font-weight: bold; font-size: 1.05rem; }
header div.title { display:none; }
header.mainSub div.title { display:block; color:#335f9c; line-height:3.5rem; font-size:1.25rem; background:#FFF; border-bottom:1px solid #DDD; position:center; z-index:850; box-shadow:1px 1px 3px #DDD; box-sizing: border-box; padding:0 0.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
header.mainSub div.title button.back { background:none; width:2rem; }
header.mainSub div.title button.back:before { content:'\f053'; font-family:'Font Awesome 5 Free'; font-weight:600; }
header.mainSub div.title button.back span { display:none; }
header.sub h1 { display:none; }
header.sub div.title { display:block; color:#335f9c; line-height:3.5rem; font-size:1.25rem; background:#FFF; border-bottom:1px solid #DDD; position:center; z-index:850; box-shadow:1px 1px 3px #DDD; box-sizing: border-box; padding:0 0.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
header.sub div.title button.back { background:none; width:2rem; }
header.sub div.title button.back:before { content:'\f053'; font-family:'Font Awesome 5 Free'; font-weight:600; }
header.sub div.title button.back span { display:none; }
header.sub div.posArea { display: none; }
header.sub div.btnArea { display: none; }
header div.btnArea { position: absolute; right: 2.5rem; height: 3.5rem; top: 0; z-index: 999; }
header div.btnArea button { position: relative; width: 2rem; height: 3.5rem; background: none; }
header div.btnArea button:before { content: ''; font-size: 1.5em; color: #fff; font-family: 'FontAwesome'; }
header div.btnArea button.search:before { content: '\f002'; }
header div.btnArea button.category:before { content: '\f0c9'; }
header div.btnArea button span { display: none; }
header div.setting { position:absolute; top:0px; right:0px; z-index:999; }
header.sub div.setting { display:block; }
header div.setting button.switch { top:0px; right:0px; width:2.5rem; height:3.5rem; background:none; display:block; position:absolute; }
header div.setting button.switch:before { content:'\f013'; font-family:'Font Awesome 5 Free'; color:#FFF; font-weight:600; font-size:1.5em; }
header div.setting button.switch span { display:none; }
header div.setting ul.stList { background-color:#FFF; width:10rem; right:0px; top:3.5rem; position:absolute; box-shadow:-1px 1px 3px #DDD; display:none; }
header div.setting ul.stList li { line-height:1.25em; padding:0.5em; border-bottom:1px solid #DDD; font-size:0.95em; }
header div.setting ul.stList .modify { display:block; }
header div.setting ul.stList .logout { display:block; }
header div.setting ul.stList .modify:before { content:'\f4ff'; font-family:'Font Awesome 5 Free'; font-weight:600; vertical-align:middle; display:inline-block; width:1.25em; }
header div.setting ul.stList .logout:before { content:'\f2f5'; font-family:'Font Awesome 5 Free'; font-weight:600; vertical-align:middle; display:inline-block; width:1.25em; }
header div.setting ul.stList .version:before { content:'\f05a'; font-family:'Font Awesome 5 Free'; font-weight:600; vertical-align:middle; display:inline-block; width:1.25em; }

/* HEADER - SEARCH */
header div#search { position:absolute; top:3.5rem; background-color:#FFF; box-shadow:0 0 3px #000; z-index:800; width:100%; padding:0.5rem; background-color:#335f9c; display:none; z-index: 998; }
header div#search input { border:0px; display:block; width:100%; box-sizing: border-box; line-height:2.5rem; border-radius:0.5rem; padding:0 3rem 0 0.5rem; font-size:1rem; }
header div#search button { width:2.6rem; height:2.6rem; position:absolute; right:0.5rem; bottom:0.5rem; background:none; }
header div#search button:before { content:'\f002'; font-family:'Font Awesome 5 Free'; font-weight:600; font-size:1.5rem; color:#335f9c; }
header div#search button span { display:none; }

/* CATEGORY */
div#plateCategory { position:fixed; z-index:880; width:100%; height:100%; overflow-y:scroll; background-color:#FFF; box-sizing:border-box; padding:0.75rem; padding-bottom:5.75rem; background-color:#f2f2f2; font-family:'Nanum Gothic'; top:100%; transition-duration:.25s; }
div#plateCategory div.selected { background-color:#FFF; border:1px solid #DDD; padding:0.75rem; box-shadow:1px 1px 2px #DDD; border-radius: 0.5rem; margin-bottom:0.75rem; }
div#plateCategory div.selected:after { content:''; display:block; clear:both; }
div#plateCategory div.selected span.empty { font-size:0.8rem; color:#999; }
div#plateCategory div.selected span.empty:before { content:'* '; }
div#plateCategory div.selected span.item { font-size:0.9rem; display:block; float:left; border:1px solid #DDD; padding:0.25rem 0.25rem 0.25rem 0.75rem; border-radius:5px; margin:0.25rem;  }
div#plateCategory div.selected span.item button.remove { background:none; width:1.25rem; height:1.25rem; margin-left:0.5rem; }
div#plateCategory div.selected span.item button.remove:before { content:'\f00d'; font-family:'Font Awesome 5 Free'; font-weight:600; }
div#plateCategory div.selected span.item button.remove span { display:none; }
div#plateCategory div.list { background-color:#FFF; border:1px solid #DDD; padding:0.75rem; box-shadow:1px 1px 2px #DDD; border-radius: 0.5rem; position: relative; }
div#plateCategory div.list button { display:block; width:100%; box-sizing: border-box; padding:0.5rem; background:none; }
div#plateCategory div.list div.tab { width:6rem; position:absolute; padding-top:1rem; }
div#plateCategory div.list div.tab li { padding:0.5rem 0; }
div#plateCategory div.list div.tab button { text-align:right; font-size:1.25rem; }
div#plateCategory div.list div.tab button.selected { font-weight:bold; color:#335f9c; }
div#plateCategory div.list div.tab button:focus { outline:none; }
div#plateCategory div.list div.choice { height:100%; border-left:2px solid #335f9c; margin-left:7.5rem; padding:0.75rem; padding-right:0px; }
div#plateCategory div.list div.choice li { padding:0.25rem; }
div#plateCategory div.list div.choice input { display:none; }
div#plateCategory div.list div.choice label { display:block; text-align:left; border:1px solid #DDD; border-radius:5px; padding:1rem 0.75rem; font-size:0.9rem; }
div#plateCategory div.list div.choice label.all { font-weight:bold; }
div#plateCategory div.list div.choice input:checked ~ label { background-color:#335f9c; color:#FFF; }
div#plateCategory div.control { position:fixed; z-index:801; bottom:5.75rem; right:-5rem; transition-duration:.25s; }
div#plateCategory div.control button { width:5rem; height:5rem; border:5px solid #DDD; background-color:#335f9c; border-radius:5rem; line-height:1.25rem; color:#FFF; }
div#plateCategory div.control button:before { content:'\f002'; font-family:'Font Awesome 5 Free'; font-weight:600; font-size:1.5rem; color:#FFF; display:block; text-align:center; line-height:2rem; }
div#plateCategory.open { top:0px; transition-duration:.25s; }
div#plateCategory.open div.control { right:0.75rem; transition-duration:.25s; }

/* NAVIGATION */
nav { position:fixed; width:100%; min-width:320px; bottom:0px; background-color:#FFF; box-shadow:0 -1px 3px #DDD; border-top:1px solid #DDD; z-index:900; }
nav:after { content:''; display:block; clear:both; }
nav a { display:block; width:20%; float:left; text-align:center; font-size:0.90rem; padding:0.3rem; line-height:1.4rem; }
nav a:before { content:''; display:block; height:3em; background-position:center; background-size:2rem; background-repeat:no-repeat; }
nav a.main:before { background-image:url('/~ftp_toolis/images/common/navi.main.png'); }
nav a.cate:before { background-image:url('/~ftp_toolis/images/common/navi.category.png'); }
nav a.search:before { background-image:url('/~ftp_toolis/images/common/navi.search.png'); }
nav a.write:before { background-image:url('/~ftp_toolis/images/common/navi.write.png'); }
nav a.mypage:before { background-image:url('/~ftp_toolis/images/common/navi.mypage.png'); }
nav a.selected { color:#335f9c; }
nav a.selected.main:before { background-image:url('/~ftp_toolis/images/common/navi.main.on.png?ts=1906051055'); }
nav a.selected.cate:before { background-image:url('/~ftp_toolis/images/common/navi.category.on.png?ts=1906051055'); }
nav a.selected.search:before { background-image:url('/~ftp_toolis/images/common/navi.search.on.png?ts=1906051055'); }
nav a.selected.write:before { background-image:url('/~ftp_toolis/images/common/navi.write.on.png?ts=1906051055'); }
nav a.selected.mypage:before { background-image:url('/~ftp_toolis/images/common/navi.mypage.on.png?ts=1906051055'); }

/* FOOTER */
footer button.top { width:3rem; height:3rem; background:#00000055; color:#FFF; font-size:0.8rem; border-radius:3px; }
footer button.top:before { content:'\f0d8'; font-family:'Font Awesome 5 Free'; font-weight:600; display:block; font-size:1.25rem; line-height:1rem; }

/* CONTAINER */

/* PRODUCT LIST */
div.listProd a { display:block; position:relative; margin-bottom:0.75em; background:#FFF; padding:0.75em; border:1px solid #DDD; border-radius:10px; box-shadow:2px 2px 5px #DDD; }
div.listProd a:after { content:''; display:block; clear:both; }
div.listProd a:hover { text-decoration: none; }
div.listProd a span.header { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.5rem; margin-bottom:0.5rem; }
div.listProd a span.header span.divide:after { content:'|'; padding:0 0.2rem 0 0.4rem; font-size:0.8rem; color:#999; font-weight:300; vertical-align:middle; }
div.listProd a span.header span.divide.new { color:''; }
div.listProd a span.header span.divide.new { color:''; }
div.listProd a span.thumb { float:left; width:7rem; height:7rem; margin-right:0.5rem; display:block; border:1px solid #DDD; border-radius:5px; text-indent:-1000em; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; }
div.listProd a span.prod { display:block; position:relative; margin-left: 7rem; height:7rem; }
div.listProd a span.prod span.price { display:block; line-height:2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
div.listProd a span.prod span.price strong { font-size:1.25rem; }
div.listProd a span.prod span.cmt { display:block; font-size:0.8rem; color:#999; }
div.listProd a span.prod span.cmt strong { font-size:1.2rem; color:#333; vertical-align: middle; }
div.listProd a span.prod span.cmt:before { content:'\f4ad'; font-family:'Font Awesome 5 Free'; font-weight:400; vertical-align:middle; font-size:1.2rem; padding-right:0.5rem; }
div.listProd a span.prod span.infor { font-size:0.9em; color:#999; }
div.listProd a span.prod span.infor span.date:before { content:'/ '; padding:0 0.2rem 0 0.4rem; }
div.listProd a span.prod span.icons { position:absolute; bottom:1px; left:0.5rem; }
div.listProd a span.prod span.icons span { display:block; float:left; font-size:0.8rem; padding:0.25rem 0.75rem; background-color:#999; color:#FFF; margin-right:0.25rem; border-radius:5px; }
div.listProd a span.prod span.icons span.type { background-color:#335f9c; }
div.listProd a span.prod span.icons span.type.buy { background-color:#aba1cd; }
div.listProd a span.prod span.icons span.type.status5 { background-color:#666; }
div.listProd a span.comment { display:block; border-top:1px solid #DDD; margin-top:0.5rem; line-height:1.5rem; padding-top:0.5rem; }
div.listProd span.loading { display:block; height:8.5rem; line-height:8.5rem; overflow:hidden; text-indent:-1000em; background:url('/~ftp_toolis/_Master/images/loading.gif') no-repeat center; background-size:4rem;  }
div.listProd span.done { display:block; height:8.5rem; line-height:8.5rem; text-align:center; font-size:0.8rem; color:#999; }
div.listProd span.done:before { content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:600; vertical-align:middle; font-size:2.5rem; padding-right:0.5rem; color:#999; }

/* LOGIN */
div#content.login div.form { padding:1rem 0; text-align:center; }
div#content.login div.form:before { content:''; display:block; width:10rem; height:10rem; background:url('/~ftp_toolis/images/common/loginIcon.png') no-repeat center; background-size:8rem; background-color:#FFF; border-radius:10rem; margin:1rem auto; overflow:hidden; }
div#content.login div.form input { display:block; width:100%; margin:0.5rem 0; font-size:1.25rem; line-height:2rem; padding:0 0.5rem; box-sizing:border-box; border:1px solid #DDD; border-radius:5px; box-shadow:1px 1px 1px #FFF; text-align:center; }
div#content.login div.form ul { margin-bottom:2rem; }
div#content.login div.form button { display:block; width:100%; box-sizing:border-box; height:2.5rem; border-radius:2.5rem; font-size:1.25rem; font-weight:700; font-family: 'Nanum Gothic'; margin-bottom:0.5rem; background-color:#335f9c; color:#FFF; }
div#content.login div.form a.regist { display:block; width:100%; box-sizing:border-box; height:2.5rem; line-height:2.5rem; border-radius:2.5rem; font-size:1.25rem; font-weight:700; font-family: 'Nanum Gothic'; margin-bottom:0.5rem; background-color:#1b3976; color:#FFF; }
div#content.login div.form a.find { display:block; width:100%; height:2.5rem; line-height:2.5rem; font-size:1rem; font-family: 'Nanum Gothic'; }

/* WRITE */
div#content.write div.form { background-color:#FFF; padding:0.75em; border:1px solid #DDD; letter-spacing:0.025em; margin-bottom:1rem; }
div#content.write div.form span.desc { display:block; line-height:1.25rem; color:#999; font-size:0.8rem; }
div#content.write div.form span.desc:before { content:'* '; }
div#content.write div.form div.file { margin-bottom:1.5rem; }
div#content.write div.form div.file div.fileList { border:5px dashed #DDD; min-height:200px; margin-bottom:0.75rem; box-sizing:border-box; }
div#content.write div.form div.file div.fileList { border:5px dashed #DDD; min-height:200px; margin-bottom:0.75rem; box-sizing:border-box; }
div#content.write div.form div.file div.fileList div.control { border:5px dashed #DDD; min-height:200px; }
div#content.write div.form div.control button { display:block; width:100%; box-sizing:border-box; height:2.5rem; border-radius:5px; font-size:1rem; font-weight:700; font-family: 'Nanum Gothic'; margin-bottom:0.5rem; background-color:#335f9c; color:#FFF; }
div#content.write div.form div.inputs li { position:relative; }
div#content.write div.form div.inputs select { display:block; width:100%; box-sizing:border-box; margin-bottom:0.75rem; height:2.5rem; line-height:2.5rem; border:1px solid #DDD; border-radius:5px; padding:0 10px; appearance:none; -webkit-appearance:none; font-size:0.9rem; }
div#content.write div.form div.inputs textarea { display:block; width:100%; box-sizing:border-box; margin-bottom:0.75rem; border:1px solid #DDD; border-radius:5px; padding:10px; height:12rem; line-height:1.5rem; font-size:0.9rem; }
div#content.write div.form div.inputs input { display:block; width:100%; box-sizing:border-box; margin-bottom:0.75rem; height:2.5rem; line-height:2.5rem; border:1px solid #DDD; border-radius:5px; padding:0 10px; font-size:0.9rem; }
div#content.write div.form div.inputs input[name="price"] { padding-right:6rem; margin-bottom: 0rem; }
div#content.write div.form div.inputs input[type="radio"] { display:none; }
div#content.write div.form div.inputs input[type="radio"] + label { display:inline-block; vertical-align: middle; position:relative; margin:0.25rem 1rem 1rem 0; font-size:0.8rem; }
div#content.write div.form div.inputs input[type="radio"] + label:before { content:''; display:inline-block; width:1rem; height:1rem; border:2px solid #AAA; border-radius:1rem; vertical-align: middle; margin-right:0.25rem; }
div#content.write div.form div.inputs input[type="radio"]:checked + label:after { content:''; display:block; width:0.5rem; height:0.5rem; background-color:#333; border-radius:0.5rem; position: absolute; top:0.3rem; left:0.25rem; }
div#content.write div.form div.inputs span.option { }
div#content.write div.form div.inputs input[type="checkbox"] { display:none; }
div#content.write div.form div.inputs input[type="checkbox"] + label { display:inline-block; vertical-align: middle; position:relative; font-size:0.8rem; line-height:2rem; }
div#content.write div.form div.inputs input[type="checkbox"] + label:before { content:''; display:inline-block; width:1rem; height:1rem; border:2px solid #AAA; vertical-align: middle; margin-right:0.25rem; }
div#content.write div.form div.inputs input[type="checkbox"]:checked + label:after { content:''; display:block; width:0.5rem; height:0.5rem; background-color:#333; position: absolute; top:0.8rem; left:0.25rem; }
div#content.write div.form div.inputs li.video { padding-bottom:0.75rem; }
div#content.write div.form div.inputs li.video input { margin-bottom:0; }
div#content.write div.form div.inputs span.desc { font-size:0.75rem; }
div#content.write div.form div.inputs span.desc:before { content:'* '; }
div#content.write div.form div.inputs span.desc strong { color:#F00; }

/* DETAIL */
div#content.article div.tab { margin-bottom:1rem; }
div#content.article div.tab:after { content:''; display:block; clear:both; }
div#content.article div.tab a { display:block; width:33.35%; float:left; text-align:center; border:1px solid #DDD; margin-right:-1px; background:#FFF; line-height:45px; padding:5px 0; font-size:0.9rem; }
div#content.article div.tab a.selected { border-bottom:6px solid #335f9c; padding-bottom:0px; }
div#content.article div.images { background-color:#FFF; box-shadow:1px 1px 3px #DDD; margin-bottom:1rem; border:1px solid #DDD; padding:0.75em; overflow:hidden; position:relative; height:15rem; }
div#content.article div.images li { position:absolute; width:100%; height:13.5rem; }
div#content.article div.images li a { display:block; width:100%; height:100%; background-position:center; background-size:contain; background-repeat:no-repeat; }
div#content.article div.images li a span { display:none; }

div#content.article div.images div.picture ul li {  }
div#content.article div.images div.dotList { position: absolute; width: calc(100% - 24px); bottom: 10%; text-align: center; }
div#content.article div.images div.dotList ul li { position: relative; display: inline-block; width: 15px; height: 15px; margin: 0 2px; border: 1px solid #ddd; background-color: #eee; border-radius: 50%; }
div#content.article div.images div.dotList ul li.active { background-color: #999; }

div#content.article div.images div.control { position:absolute; left:0px; top:0px; width:100%; }
div#content.article div.images div.control button { position:absolute; width:3rem; height:15rem; background:none; }
div#content.article div.images div.control button.next { right:0px; }
div#content.article div.images div.control button:before { content:'\f053'; font-family:'Font Awesome 5 Free'; color:#DDD; font-weight:600; font-size:3rem; text-shadow:1px 1px 3px #000; }
div#content.article div.images div.control button.next:before { content:'\f054'; }
div#content.article div.images div.control button span { display:none; }
div#content.article div.infor { background-color:#FFF; box-shadow:1px 1px 3px #DDD; margin-bottom:1rem; border:1px solid #DDD; padding:0.75em; position:relative; line-height:1.5rem; }
div#content.article div.infor div.title { border:5px solid #DDD; padding:0.5rem; font-weight: 600; }
div#content.article div.infor div.title span.divide { color:#335f9c; }
div#content.article div.infor div.title span.divide.used { color:#755800; }
div#content.article div.infor div.title span.divide.stock { color:#ff7200; }
div#content.article div.infor div.title span.divide:before { content:'['; }
div#content.article div.infor div.title span.divide:after { content:'] '; }
div#content.article div.infor div.title span.title { color:#666; }
div#content.article div.infor div.summary { padding:0.75rem 0; border-bottom:1px solid #DDD; }
div#content.article div.infor div.summary:after { content:''; display:block; clear:both; }
div#content.article div.infor div.summary span.icons { float:left; display:block; }
div#content.article div.infor div.summary span.icons span.area { display:block; float:left; padding:0 0.5rem; font-size:0.8rem; color:#FFF; background-color:#335f9c; margin-right: 0.2rem; border-radius:5px; }
div#content.article div.infor div.summary span.icons span.nego { display:block; float:left; padding:0 0.5rem; font-size:0.8rem; color:#FFF; background-color:#1b3976; margin-right: 0.2rem; border-radius:5px; }
div#content.article div.infor div.summary span.price { float:right; }
div#content.article div.infor div.summary span.price strong { font-size:1.2rem; }
div#content.article div.infor div.details table.details { table-layout:fixed; width:100%; font-size:0.9rem; }
div#content.article div.infor div.details table.details th { border-bottom:1px solid #DDD; padding:0.5rem; text-align:left; }
div#content.article div.infor div.details table.details td { border-bottom:1px solid #DDD; padding:0.5rem; }
div#content.article div.section div.detail { background-color:#FFF; box-shadow:1px 1px 3px #DDD; margin-bottom:1rem; border:1px solid #DDD; padding:0.75em; position:relative; line-height:1.5rem; }
div#content.article div.section div.detail iframe { width:100%; height:10rem; }
@media (min-width: 420px) {
    div#content.article div.section div.detail iframe { height:15rem; }
}
@media (min-width: 640px) {
    div#content.article div.section div.detail iframe { height:20rem; }
}
div#content.article div.shortcut { margin-bottom:1rem; }
div#content.article div.shortcut:after { content:''; display:block; clear:both; }
div#content.article div.shortcut a { display:block; width:48%; text-align:center; background-color:#666; line-height:3rem; border-radius: 5px; color:#FFF; font-size:1.2rem; font-weight:600; }
div#content.article div.shortcut a:nth-child(odd) { float:left; background-color:#335f9c; }
div#content.article div.shortcut a:nth-child(even) { float:right; }

div#content.article div.section.qna { background-color:#FFF; box-shadow:1px 1px 3px #DDD; border:1px solid #DDD; padding:0.75em; position:relative;}
div#content.article div.section.qna div.header { margin-bottom:1rem; }
div#content.article div.section.qna div.header div.count { font-size:1rem; line-height:1.5rem; margin-bottom:0.25rem; font-weight: 600; }
div#content.article div.section.qna div.header div.write div.inputs { margin-right:5rem; }
div#content.article div.section.qna div.header div.write div.control { position:absolute; right:0px; top:0px; }
div#content.article div.section.qna div.header div.write textarea { display:block; border:1px solid #DDD; border-radius: 5px; box-sizing: border-box; width:100%; font-size:0.9rem; padding:0.5rem; height:5rem; }
div#content.article div.section.qna div.header div.write button { display:block; width:4.5rem; height:5rem; background-color:#335f9c; color:#FFF; font-weight:600; border-radius: 5px; }
div#content.article div.section.qna iframe { padding:0px; margin:0px; width:100%; }

div#cmtForm { position:fixed; width:100%; height:100%; top:0px; left:100%; z-index:900; background:#00000000; transition-duration:.2s; transition-property:background; }
div#cmtForm.on { background:#00000099; transition-duration:.2s; left:0; transition-property:background; }
div#cmtForm div.form { padding:0.5rem; background-color:#FFF; margin-top:-8rem; transition-duration:.2s; }
div#cmtForm.on div.form { margin-top:0; transition-duration:.2s; }
div#cmtForm div.form div.header { padding-bottom:0.5rem; line-height:1rem; background-color:#FFF; font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
div#cmtForm div.form div.header span.title { font-weight:600; }
div#cmtForm div.form div.inputs { margin-right:5rem; }
div#cmtForm div.form div.control { position:absolute; right:0.5rem; top:2rem; }
div#cmtForm div.form textarea { display:block; border:1px solid #DDD; border-radius: 5px; box-sizing: border-box; width:100%; font-size:0.9rem; padding:0.5rem; height:6rem; }
div#cmtForm div.form button.submit { display:block; width:4.5rem; height:4rem; background-color:#335f9c; color:#FFF; font-weight:600; border-radius: 5px; }
div#cmtForm div.form button.cancel { display:block; width:4.5rem; height:1.5rem; background-color:#666; color:#FFF; font-weight:600; border-radius: 5px; font-size:0.8rem; margin-top:0.5rem; }


/* MYPAGE */
div#content.mypage div.snb { overflow-x:scroll; }
div#content.mypage div.snb div.tabs { width:32rem; margin:0.25rem auto 0.75rem ; }
div#content.mypage div.snb div.tabs:after { content:''; display:block; clear:both; }
div#content.mypage div.snb button { display:block; float:left; width:6rem; margin-left:0.5rem; height:3.5rem; background-color:#ddeaff; color:#FFF; text-align:center; line-height:1.25rem; border-radius:0.5rem; padding-top:0.5rem; }
div#content.mypage div.snb button:first-child { margin-left:0; }
div#content.mypage div.snb button.selected { background-color:#335f9c; }
div#content.mypage div.snb button span { display:block; text-align:center; font-size:0.8rem; }
div#content.mypage div.snb button span strong { font-size:0.9rem; }

/* MEMBER REGIST */
div#content.regist div.section { background-color:#FFF; border:1px solid #DDD; box-shadow:1px 1px 3px #DDD; padding:0.75rem; }
div#content.regist div.section div.header { border-bottom:1px solid #DDD; padding-bottom:0.75rem; margin-bottom:0.75rem; }
div#content.regist div.section div.header span.title { font-weight:600; color:#335f9c; font-size:1.25rem; line-height:1.25rem; display:block; padding-bottom:0.5rem; }
div#content.regist div.section div.header span.desc { color:#999; font-size:0.9rem; display:block; }
div#content.regist div.section div.header span.desc:before { content:'* '; }
div#content.regist div.section div.header:after { content:''; display:block; clear:both; }
div#content.regist div.section div.contents { margin-top:0.75rem; padding-top:0.75rem; }
div#content.regist div.section div.contents button { padding:3rem 1.5rem; display:block; text-align:left; width:100%; background:#0068b7; color:#FFF; font-family: 'Nanum Gothic'; font-size:1.5rem; font-weight:600; position: relative;; }
div#content.regist div.section div.contents button:after { content:''; display:block; width:2rem; height:2rem; border-right:2px solid #FFF; border-bottom:2px solid #FFF; float:right; transform: rotate(-45deg); }
div#content.regist div.section div.form li { padding-bottom:1.5rem; position:relative; }
div#content.regist div.section div.form li input { border:3px solid #DDD; width:100%; display:block; box-sizing: border-box; height:2.5rem; padding:0.5rem; font-size:1rem; margin:0.25rem 0; }
div#content.regist div.section div.form li input#userId { padding-right:6.5rem; }
div#content.regist div.section div.form li label { display:block; line-height:1.5rem; font-weight:bold; color:#333; }
div#content.regist div.section div.form li span.desc { color:#999; font-size:0.8rem; line-height:1.25rem; }
div#content.regist div.section div.form li span.desc.confirm { color:#0068b7; }
div#content.regist div.section div.form li span.desc.warning { color:#ba281e; }
div#content.regist div.section div.form li span.desc.pwdLev1 { color:#F60; }
div#content.regist div.section div.form li span.desc.pwdLev2 { color:#39C; }
div#content.regist div.section div.form li span.desc.pwdLev3 { color:#390; }
div#content.regist div.section div.form li button.confirmId { position:absolute; right:0px; top:1.75rem; width:6rem; height:2.5rem; background:#335f9c; color:#FFF; font-weight:600; }
div#content.regist div.section div.control { padding-bottom:3rem; }
div#content.regist div.section div.control button { display:block; width:100%; height:3rem; font-weight:600; color:#FFF; background:#335f9c; }
div#content.regist div.section div.done { background-color:#f2f2f2; padding:2rem 1rem; margin-bottom:1rem; }
div#content.regist div.section div.done span.notice { display:block; text-align:center; font-size:1rem; margin-bottom:1rem; }
div#content.regist div.section div.done span.notice strong { font-size:1.25rem; }
div#content.regist div.section div.done span.desc { color:#666; line-height:1.5rem; }
div#content.regist div.section div.control a { display:block; width:48%; text-align:center; background-color:#666; padding:0.75rem; color:#FFf; }
div#content.regist div.section div.control a.login { float:left; background-color:#0068b7; }
div#content.regist div.section div.control a.main { float:right; }

div#content.myInfor div.form a.changePwd { display:block; box-sizing: border-box; line-height:2.5rem; font-size:1rem; margin:0.25rem 0; background-color:#999; color:#FFF; text-align:center; }
div#content.myInfor div.form span.value { border:3px solid #DDD; width:100%; display:block; box-sizing: border-box; height:2.5rem; padding:0 0.5rem; line-height:2rem; font-size:1.25rem; margin:0.25rem 0; font-weight:600; color:#999; }

/* COMMENTS */
div#cmtWrap { background-color:#FFF; }
div#cmtWrap div.list div.empty { text-align:center; font-size:0.8rem; color:#999; padding:3rem 1rem; }
div#cmtWrap div.list div.item { margin-bottom:1rem; border-bottom:1px solid #DDD; }
div#cmtWrap div.list div.item.reply { background-color:#f2f2f2; margin-top:-1rem; padding:0 0.5rem; }
div#cmtWrap div.list div.item:after { content:''; display:block; clear:both; }
div#cmtWrap div.list div.item span.writer { display:block; border-bottom:1px solid #DDD; line-height:1.75rem; font-size:1rem; font-weight:600; }
div#cmtWrap div.list div.item span.writer:before { content:'\f4ad'; font-family:'Font Awesome 5 Free'; color:#335f9c; font-weight:400; vertical-align:middle; font-size:0.8rem; padding-right:0.25rem; }
div#cmtWrap div.list div.item.reply span.writer:before { font-weight:600; }
div#cmtWrap div.list div.item span.contents { display:block; font-size:1rem; padding:0.25rem; padding-bottom:0.5rem; }
div#cmtWrap div.list div.item span.date { display:block; font-size:0.9rem; color:#999; float:left; line-height:1.5rem; padding-right:0.5rem; }
div#cmtWrap div.list div.item span.control button { height:1.5rem; display:block; float:left; padding-right:0.5rem; font-size:0.9rem; line-height:1.5rem; color:#999; background:none; }
div#cmtWrap div.list div.item span.control button:before { content:'|'; padding-right:0.5rem; }
div#cmtWrap div.list div.item span.control button:focus { outline:none; }

/* FILE UPLOAD FORM */
ul.d932File:after { content:''; display:block; clear:both; }
ul.d932File li { float:left; overflow:hidden; position:relative; margin:5px; }
ul.d932File li label { border:1px solid #DDD; display:block; position:relative; cursor:pointer; background-image:url('/~ftp_toolis/images/lib/icoUpload.darkGray.png'); background-position:center; background-size:contain; background-repeat:no-repeat; background-color:#FFF; }
ul.d932File li label:after { filter:alpha(opacity=0); opacity:0; transition-duration:.2s; }
ul.d932File li label span { position: absolute; bottom: 0.5rem; font-size: 0.8em; text-align: center; width: 100%; color: #666; }
ul.d932File li:hover label:after { content:''; display:block; position:absolute; width:100%; height:100%; left:0px; top:0px; background:url('/~ftp_toolis/images/lib/icoUpload.png') no-repeat center; background-size:50%; filter:alpha(opacity=50); opacity:0.5; transition-duration:.2s; }
ul.d932File li:hover label span { color: #999; }
ul.d932File li button { width:100%; height:30px; border-radius:0px; border:0px; box-shadow:none; left:0px; color:#FFF; }
ul.d932File li button span { display:none; }
ul.d932File li button.delFile { background-color:#e14d43; text-shadow:0 -1px 1px #ba281e, 1px 0 1px #ba281e, 0 1px 1px #ba281e, -1px 0 1px #ba281e; margin-bottom:1px; }
ul.d932File li button.rotate90 { width:50%; height:30px; overflow:hidden; display:block; float:left; border-right:1px solid #FFF; background-color:#666; }
ul.d932File li button.rotate270 { width:50%; height:30px; overflow:hidden; display:block; background-color:#666; }
ul.d932File li button.rotate90:before { content:'\f01e'; font-family:'Font Awesome 5 Free'; color:#FFF; font-weight:600; }
ul.d932File li button.rotate270:before { content:'\f0e2'; font-family:'Font Awesome 5 Free'; color:#FFF; font-weight:600; }
ul.d932File li.ghost { width:50px; height:50px; border:5px dashed #DDD; }
ul.d932File li.d932AddFile button { height:100%; border:5px dashed #DDD; background:url('/~ftp_toolis/images/lib/icoAdd.darkGray.png') no-repeat center; background-size:contain; }
form.d932FileForm, div.d932FileForm { display:block; overflow:hidden; width:0px; height:0px; position:absolute; left:0px; bottom:0px; }



/* 팝업 */
div#d932Image { width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:995; }
div#d932Image div.background { width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:996; background-color:#000; filter:alpha(opacity=50); opacity:0.5; }
div#d932Image div.contents { position:absolute; z-index:997; }
div#d932Image div.contents div.control { position:fixed; width:100px; height:100px; z-index:998; top:0px; right:0px; border:0px; }
div#d932Image div.contents div.control button { width:100px; height:100px; background:url('/~ftp_toolis/images/common/btnClose4Layer.png') no-repeat center; border:0px; }
div#d932Image div.contents div.control button span { display:none; }
div#d932Image div.contents div.content { border:10px solid #FFF; background:#fff; position:absolute; z-index:997; font-size:0px; line-height:0px; }
div#d932Image div.contents div.content img { filter:alpha(opacity=10); opacity:0.1; cursor:pointer; }