@charset "UTF-8";
@import "//fonts.googleapis.com/css?family=Nanum+Gothic:400,700&subset=korean";
@import "//yeogie.com/style/font.scoredream.css";

/* COMMON */
* { box-sizing: border-box; color: inherit; font-size:inherit; margin:0; padding:0;  }
body { margin: 0; padding: 0; font-family: 'Nanum Gothic', sans-serif; color:#333; }
a { color: inherit; text-decoration: none; }
a:hover span.subject, a:hover span.title { text-decoration: underline; }
ul { margin: 0; padding: 0;  }
li { list-style: none; }
button { cursor: pointer; }
button:focus { outline: none; }
img { max-width:100%; }

/* LAYOUT */
#wrap { }
div.innerWrap { max-width:1100px; margin:0 auto; }
#container { position: relative; padding-top:20px; }
#container::after { content:''; display: block; clear:both; }
#contents { position: sticky; top:7px; bottom:0; float:left; width:733px; }
#content { padding:0 0 40px; }
#aside { position: sticky; top:7px; bottom:0; float:right; width:348px; padding-bottom:20px; }
.banner { margin-bottom:20px; display: flex; align-items: center; justify-content: center; border:0; }

/* HEADER */
#header { }
#header div.header { display: flex; align-items: center; justify-content: space-between; }
#header h3 { font-size:28px; margin:0.5em 0; }

#header div.navi { padding:2px 0; border-top:1px solid #ececec; border-bottom:1px solid #ececec; position: relative; }
#gnb { background: url('/images/blog/common/bg.comb_e2e2e2.png'); display: flex; align-items: center; justify-content: center; }
#gnb ul.navi { display: flex; font-family: 'S-CoreDream', sans-serif; }
#gnb ul.navi li { display: flex; align-items: center; }
#gnb ul.navi li::after { content:''; display: block; width:0; height:0.8em; border-right:1px solid #999}
#gnb ul.navi li:last-child::after { display: none; }
#gnb ul.navi li a { display: flex; height:46px; align-items: center; justify-content: center; padding:0 20px; letter-spacing: -0.05em; font-weight:400; }
#gnb ul.navi li a:hover { color:#7a839c; }
#gnb ul.navi li.selected a { color: #7a839c; }
#header div.navi div.shortcut { position: absolute; top:0; right:0; height:100%; display: flex; align-items: center; padding:0 20px; }
#header div.navi div.shortcut a { display: flex; padding:0 20px; height:30px; align-items: center; background: #888; color:#FFF; border-radius: 30px; font-size:0.9em;  }

/* TNB */
@keyframes openPanel { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }

#tnb { height:37px; display: flex; align-items: center; justify-content: center; z-index:99; font-size:0.9em; }
#tnb div.shortcut { display: flex; height:30px; align-items: center; }
#tnb div.shortcut a { display: flex; align-items: center; justify-content: center; font-size:0.8em; letter-spacing: -0.05em; padding:0 5px; }
#tnb div.shortcut a::after { content:''; display: block; width:10px; height:1em; border-right:1px solid #999; }
#tnb div.shortcut a.blogExpo { background: #001c43; color:#FFF; border:0; }
#tnb div.shortcut a span.url { display: none; }
#tnb div.member { margin-left:10px; }
#tnb div.member div.user { display: flex; align-items: center; height:30px; }
#tnb div.member div.user span.name { font-size:0.9em; font-weight:600; }
#tnb div.member div.user button { border:1px solid #DDD; margin-left:5px; font-size:0.8em; padding:5px 15px; }
#tnb div.member div.login { position: relative; }
#tnb div.member div.login div.switch button { background: #7a839c; color:#FFF; border:none; padding:5px 15px;  font-size:0.8em; }
#tnb div.member div.login div.panel { position:absolute; display: none; right:5px; top:calc(100% + 10px); background: url('/images/blog/common/bg.border.png'); padding:15px; box-shadow:1px 1px 3px #999; }
#tnb div.member div.login div.form { background: #FFF; padding:10px; border-radius: 10px; }
#tnb div.member div.login div.form ul.input li { display: flex; align-items: center; justify-content: center; padding-bottom:5px; }
#tnb div.member div.login div.form ul.input li label { white-space: nowrap; font-size:0.9em; display: block; width:60px; }
#tnb div.member div.login div.form ul.input li input { border:1px solid #DDD; font-size:0.9em; height:40px; padding:0 10px; }
#tnb div.member div.login div.form div.control { padding-left:60px; }
#tnb div.member div.login div.form div.control button { background: #7a839c; color:#FFF; border:1px solid #DDD; height:35px; padding:0 20px;  font-size:0.9em; }
#tnb div.member div.login.active div.panel { display: block; animation: openPanel 0.3s; }

/* ASIDE */
#aside div.sector { margin-bottom:20px; }
#aside div.sector div.title { height:37px; display: flex; align-items: center; justify-content: space-between; }
#aside div.sector div.title span.title { font-size:0.9em; font-weight:600; }
#aside div.sector div.title a.more { display: block; width:1em; height:1em; position: relative; }
#aside div.sector div.title a.more::before { content:''; display: block; position:absolute; top:50%; margin-top:-1px; width:100%; height:0; border-top:2px solid #999; }
#aside div.sector div.title a.more::after { content:''; display: block; position:absolute; left:50%; margin-left:-1px; height:100%; width:0; border-left:2px solid #999; }
#aside div.sector div.title a.more span { display: none; }

#aside div.sector div.visit ul { border-top:1px solid #DDD; }
#aside div.sector div.visit ul li { padding:5px 0; }
#aside div.sector div.visit ul li a { display: flex; font-size:0.9em; align-items: center; line-height:1.25em; }
#aside div.sector div.visit ul li span.date { display: none; }
#aside div.sector div.visit ul li span.thumb { display: block; width:135px; height:105px; background:no-repeat center / cover; border:1px solid #DDD; min-width:135px; margin-right:10px;  }
#aside div.sector div.visit ul li span.thumb span { display: none; }
#aside div.sector div.visit ul li:first-child a { width:100%; height:220px; display: block; position: relative; }
#aside div.sector div.visit ul li:first-child a span.thumb { width:100%; height:100%; min-width:auto; margin:0; background-position: center 40%; }
#aside div.sector div.visit ul li:first-child a span.subject { display: block; position: absolute; width:100%; bottom:0; left:0; background: rgba(0, 0, 0, 0.5); color:#FFF; padding:10px 5px; font-size:0.9em; }

#aside div.sector div.news { border-top:1px solid #DDD; }
#aside div.sector div.news ul { padding:5px 0; }
#aside div.sector div.news ul li { padding:5px 0; }
#aside div.sector div.news ul li a { display: flex; font-size:0.9em; align-items: center; line-height:1.25em; }
#aside div.sector div.news ul li span.thumb { display: none; }
#aside div.sector div.news ul li span.date { display: none; }
#aside div.sector div.news ul li:first-child span.thumb { display: block; width:135px; height:105px; background:no-repeat center / cover; border:1px solid #DDD; min-width:135px; margin-right:10px;  }
#aside div.sector div.news ul li:first-child span.thumb span { display: none; }
#aside div.sector div.news ul li:not(:first-child) a::before { content:''; width:0; height:0; border:2px solid #666; margin-right:5px; }
#aside div.sector div.news ul li:not(:first-child) span.subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#aside div.sector div.video { padding:10px 0; }
#aside div.sector div.video iframe { display: block; max-width:100%; height:195px; }
#aside div.sector div.video a { font-size:0.9em; line-height:1.25em; }
#aside div.sector div.video a span.thumb { display: block; height:195px; border:1px solid #DDD; }
#aside div.sector div.video a span.subject { display: block; text-align: center; padding:5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#aside div.sector.customer { background: #f4f4f4; }
#aside div.sector.customer div.call { display: flex; align-items: center; justify-content: center; padding:10px; background: #7a839c; color:#FFF; font-size:2em; font-weight: 600; min-height:56px; }
#aside div.sector.customer div.info { padding:10px; font-size:0.9em; }
#aside div.sector.customer div.info li { padding:5px 0; display: flex; }
#aside div.sector.customer div.info span.label { white-space: nowrap; margin-right:3px; }
#aside div.sector.customer div.blogSearch { padding:10px; background: #dedfe2; }
#aside div.sector.customer div.blogSearch div.searchForm { background: #FFF; border:1px solid #DDD; border-radius: 45px; overflow: hidden; }
#aside div.sector.customer div.blogSearch div.searchForm form { display: flex; align-items: center; justify-content: space-between; }
#aside div.sector.customer div.blogSearch div.searchForm div.searchKeyword { width:calc(100% - 45px); }
#aside div.sector.customer div.blogSearch div.searchForm input { border:0; height:45px; width:100%; padding:0 10px; font-size:0.9em;  }
#aside div.sector.customer div.blogSearch div.searchForm input:focus { outline:none; }
#aside div.sector.customer div.blogSearch div.searchForm button { border:0; height:45px; width:45px; display: flex; align-items: center; justify-content: center; }
#aside div.sector.customer div.blogSearch div.searchForm button::before { content:''; display: block; width:1.5em; height:1.5em; background: url('/images/blog/common/ico.zoom_3A488D.svg') no-repeat center; }
#aside div.sector.customer div.blogSearch div.searchForm button span { display: none; }

#aside div.sector.shortcut { display: flex; align-items: center; justify-content: center; }
#aside div.sector.shortcut a { display: flex; justify-content: center; align-items: center; width:256px; height:40px; background: #014677; color:#FFF; border-radius: 5px; position:relative; overflow: hidden; }
#aside div.sector.shortcut a span { display: block; position: relative; z-index: 2; }

#aside div.sector.snb { border-bottom:0; }
#aside div.sector.snb li a:hover span:not(.count) { text-decoration: underline; }
#aside div.sector.snb li.depth1 { margin-bottom:10px; position:relative; }
#aside div.sector.snb li.depth1 > a { display: flex; border:1px solid #DDD; height:50px; align-items: center; padding:0 20px; }
#aside div.sector.snb li.depth1 > a::before { content:''; display: block; position:absolute; right:1.05rem; top:0.75rem; width:1rem; height:1rem; border-right:1px solid #999; border-bottom:1px solid #999; transform: rotate(45deg); }
#aside div.sector.snb li.depth1.notice > a::before,
#aside div.sector.snb li.depth1.customer > a::before { right:1.25rem; top:1rem; transform: rotate(-45deg); }
#aside div.sector.snb li.depth1.selected > a::before { border-color:#FFF; }
#aside div.sector.snb li.depth1 > a::after { content:''; display: block; width:50px; height:50px; border-left:1px solid #DDD; position: absolute; right:0; top:0; }
#aside div.sector.snb li.depth1.selected > a { background: #7a839c; color:#FFF;  }
#aside div.sector.snb li.depth1 > div.child { border:1px solid #DDD; margin-top:-1px; padding:10px; font-size:0.9em; }
#aside div.sector.snb li.depth1 span.count { font-size:0.8em; display: block; margin-left:5px; }
#aside div.sector.snb li.depth1 div.child a { display: flex; padding:5px 20px; }
#aside div.sector.snb li.depth1 div.child a span.count::before { content:'['; }
#aside div.sector.snb li.depth1 div.child a span.count::after { content:']'; }
#aside div.sector.snb li.depth1 div.child a.cateAll { height: 50px; border-bottom:1px solid #DDD; margin:-10px -10px 10px; align-items: center; padding:0 30px; }
#aside div.sector.snb li.depth1 div.child a.cateAll span.count { padding:5px 10px; background: #666; color:#FFF; }
#aside div.sector.snb li.depth1 div.child a.cateAll span.count::before { content:'등록제품 : 총 '; }
#aside div.sector.snb li.depth1 div.child li.selected > a { font-weight:600; color:#7a839c; }
#aside div.sector.snb li.depth1.post div.child a.cateAll span.count::before { content:'등록포스팅 : 총 '; }
#aside div.sector.snb li.depth1 div.child a.cateAll span.count::after { content:'개'; }
#aside div.sector.snb li.depth2 > div.child,
#aside div.sector.snb li.depth2 > div.cateChild { padding:10px; background: #f6f7fb; font-size:0.9em; margin:0 10px 10px; }
#aside div.sector.snb li.depth2 div.tree a::before { content:''; display: block; width:0.5em; height:0.5em; border-left:1px solid #999; border-bottom:1px solid #999; margin-right:0.5em; }

/* FOOTER */
#footer { padding-bottom:30px; }
#footer div#blogCurrent { background:#7a839c; color:#FFF; display: flex; align-items: center; justify-content: center; font-size:14px; height:52px; font-weight:600; }
#footer div#blogCurrent div.title { color:#fff701; }
#footer div#blogCurrent div.title::after { content:':'; margin:0 3px; }
#footer div#blogCurrent ul { display: flex; align-items: center; justify-content: center; }
#footer div#blogCurrent ul li { display: flex; align-items: center; }
#footer div#blogCurrent ul li::after { content:''; display: block; width:0; height:12px; border-right:1px solid #FFF; margin:0 20px; }
#footer div#blogCurrent ul li.product::after { display: none; }
#footer div#blogCurrent ul li.bTotal::after { display: none; }
#footer div#blogCurrent ul li span.value { margin-left:15px; color:#fff701; }
#footer div#blogCurrent ul li.bTotal { height:30px; margin-left:30px; display: flex; align-items: center; justify-content: center; border:1px solid #DDD; border-radius:20px; padding-right:10px; background:rgba(255, 255, 255, 0.3); }
#footer div#blogCurrent ul li.bTotal:before { content:''; display: block; background: #7a839c url('/images/blog/common/ico.emblem.svg') no-repeat center / 50%; width:26px; height:26px; border-radius: 26px; margin:0 5px 0 2px; }
#footer div.gnb ul.navi { display: flex; align-items: center; justify-content: center; height:52px; border-bottom:1px solid #DDD; }
#footer div.gnb ul.navi li { display: flex; font-size:14px; align-items: center; justify-content: center; }
#footer div.gnb ul.navi li::after { content:''; display: block; width:0; height:12px; border-right:1px solid #DDD; margin:0 20px; }
#footer div.gnb ul.navi li:last-child::after { display:none; }
#footer div.content ul { display: flex; flex-wrap: wrap; align-items:center; justify-content: center; padding:20px; font-size:12px; width:1100px; }
#footer div.content ul li { display: flex; align-items: center; justify-content: center; margin:5px 10px; }
#footer div.content ul li span { font-weight:600; margin-right:3px; }
#footer div.content div.copyright span.copyright { display: flex; align-items: center; justify-content: center; font-size:12px; }
#footer div.content div.copyright a.yeogie::before { content:''; display: block; width:40px; height:13px; margin-left:5px; background: url('/images/blog/oldskin01/footerLogo.png') no-repeat center / contain; }
#footer div.content div.copyright a.yeogie span { display: none; }

/* HOME */
#content.home { border:0; padding-top:0; }
#content.home div.visual { margin-bottom:20px; }

#content.home div.notice { display: flex; align-items: center; justify-content: space-between; margin-bottom:20px; border-top:1px solid #DDD; border-bottom:1px solid #DDD; position: relative; overflow:hidden; font-size:0.9em; background: url('/images/blog/common/bg.comb_e2e2e2.png');}
#content.home div.notice div.title { display: flex; align-items: center; width:100px; height:42px; }
#content.home div.notice div.title::after { content:''; display: block; width:0; height:1em; border-right:1px solid #DDD; }
#content.home div.notice div.title a { display: flex; padding:0 20px; align-items: center; }
#content.home div.notice div.list { position: absolute; height:42px; width:calc(100% - 100px - 40px); left:100px; top:0; padding:0 10px; }
#content.home div.notice div.list ul#noticeList { position:relative; }
#content.home div.notice div.list li a { display: flex; width:100%; height:42px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#content.home div.notice div.list li.empty { opacity: 0.5; display: flex; width:100%; height:42px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#content.home div.notice div.control { display: flex; align-items: center; justify-content: center; width:40px; }
#content.home div.notice div.control button { background: none; padding:0.25em; opacity: 0.5; transition: 0.3s opacity; }
#content.home div.notice div.control button.prev::before { content:''; display: block; width:0; height:0; border-top:0.5em solid transparent; border-bottom:0.5em solid transparent; border-right:0.5em solid #7a839c; }
#content.home div.notice div.control button.next::before { content:''; display: block; width:0; height:0; border-top:0.5em solid transparent; border-bottom:0.5em solid transparent; border-left:0.5em solid #7a839c; }
#content.home div.notice div.control button span { display: none; }
#content.home div.notice div.control button:hover { opacity: 1; transition: 0.3s opacity; }

#content.home div.products { margin-bottom:20px; }
#content.home div.products ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
#content.home div.products a { display: block; width:172px; padding:10px 5px; margin-bottom:30px; }
#content.home div.products a span.thumb { display: flex; margin-bottom:10px; height:188px; align-items: center; justify-content: center; border:1px solid #DDD; }
#content.home div.products a span.thumb img { max-width:100%; max-height: 100%; }
#content.home div.products a span.title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:0.9em; text-align: center; padding:0 10px;  }


/* SUB - COMMON */
#content .mTitle { background: #7a839c; }
#content .intro .logoArea { display: none; }
#content .intro .compArea { float:none; width:auto; margin:0; }
#content .intro .compArea ul li { padding:10px 0; }

#content .prodList ul li { padding:10px 0; }
#content .prodList ul li a { display: flex; align-items: center;  }
#content .prodList ul li a::after { display: none; }
#content .prodList ul li .thumb { width:150px; height:120px; float:none; display: flex; align-items: center; justify-content: center; }
#content .prodList ul li .thumb img { max-width:100%; max-height:100%; width:auto; height:auto; }
#content .prodList ul li .prodName { width:340px; float:none; margin:0; display: flex; flex-direction: column; }
#content .prodList ul li .prodName .name { font-size:1.2em;}
#content .prodList ul li .prodName .model { margin-top:5px; color:#999; }
#content .prodList ul li .divideBox { float:none; margin:0 15px; display: flex; align-items: center; justify-content: center;  }
#content .prodList ul li .divideBox span { width:100%; }
#content .prodList ul li .price { float:none; margin:0; }