@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; }
body { margin: 0 auto; padding: 0; font-family: 'Nanum Gothic', sans-serif; color:#333; min-width:1130px; }
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:12px; }
#contents::after { content:''; display: block; clear:both; }
#contents { position: relative; }
#content { position: sticky; top:7px; bottom:0; padding:0 0 40px; float:right; width:732px; }
#aside { position: sticky; top:0; bottom:0; float:left; width:336px; }
.banner { margin-bottom:20px; display: flex; align-items: center; justify-content: center; border:0; }

/* HEADER */
#header { }
#header div.header { display: flex; justify-content: space-between; align-items: center; }
#header h3 { font-size:28px; margin:0.75em 0; }
#gnb { display: flex; justify-content: space-between; align-items: stretch; font-size:0.9em; font-family: 'S-CoreDream', sans-serif; font-weight:300; }
#gnb ul.navi { display: flex; width:732px; justify-content: center; background: #1f1800 url('/images/blog/weldwell/bg.navi.png') no-repeat center / cover; color:#FFF; }
#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 #DDD; }
#gnb ul.navi li:last-child::after { display: none; }
#gnb ul.navi li a { display: flex; height:50px; align-items: center; justify-content: center; padding:0 20px; }
#gnb ul.navi li.selected a { font-weight:600; }

#gnb div.blogSearch { background: #1f1800; width:336px; }
#gnb div.blogSearch div.searchForm { height: 100%; }
#gnb div.blogSearch div.searchForm form { display: flex; align-items: center; justify-content: space-between; margin:0 15px; height:100%; }
#gnb div.blogSearch div.searchForm div.searchKeyword { width:calc(100% - 45px); }
#gnb div.blogSearch div.searchForm input { border:0; height:34px; width:100%; color:#FFF; padding:0 10px; font-size:0.9em;  background: none; border:none; border-bottom:1px solid #4c4633; }
#gnb div.blogSearch div.searchForm input::placeholder { color:#CCC; }
#gnb div.blogSearch div.searchForm input:focus { outline:none; }
#gnb div.blogSearch div.searchForm button { border:0; height:34px; width:34px; display: flex; align-items: center; justify-content: center; }
#gnb div.blogSearch div.searchForm button::before { content:''; display: block; width:1.5em; height:1.5em; background: url('/images/blog/common/ico.zoom_FFFFFF.svg') no-repeat center; }
#gnb div.blogSearch div.searchForm button span { display: none; }

/* 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; }
#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; height:30px; font-size:0.8em; }
#tnb div.member div.login { position: relative; }
#tnb div.member div.login div.switch button { background: #7a839c; color:#FFF; border:none; height:30px; padding:0 20px;  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; padding:10px; }
#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:15px 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.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.customer { padding:0; }
#aside div.sector.customer div.call { display: flex; align-items: center; justify-content: center; padding:10px; background: #1f1800; color:#FFF; font-size:2em; font-weight: 600; min-height:56px; }
#aside div.sector.customer div.info { padding:10px; font-size:0.9em; background: #f0f0f0; }
#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 a.cyberExpo { display: flex; width:100%; background: #999; color:#FFF; height:48px; align-items: center; justify-content: center; }

#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:32px; background: #9598a0; 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.shortcut a::after { display: block; content:''; position: absolute; z-index: 1; background: #7a839c; width:200px; height:100px; border-radius: 100px / 50px; top:-50px; left:50%; }

#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 */
#home { display: flex; align-items: flex-start; justify-content: space-between; }
#home div.major { width:732px; }
#home div.minor { width:336px; }
#home div.visual { height:235px; border:1px solid #ECECEC; overflow: hidden;  background: #1f1800 url('/images/blog/weldwell/bg.visual.png') no-repeat center / cover; }
#home div.video iframe { display: block; max-width:100%; height:192px; border:1px solid #ECECEC; }
#home div.video a.subject { font-size:0.9em; line-height:42px; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home div.shortcut { display: flex; align-items: center; justify-content: space-between; }
#home div.shortcut a { display:flex; background:#1f1800; color:#FFF; width:100%; height:38px; font-size:0.9em; align-items: center; justify-content: center; }
#home div.shortcut a.cyberExpo { background:#e83630; }
#home div.shortcut a:not(:first-child) { margin-left:20px; }
#home div.notice { display: flex; align-items: center; justify-content: space-between; position: relative; overflow:hidden; font-size:0.9em;}
#home div.notice div.title { display: flex; align-items: center; width:100px; height:55px; }
#home div.notice div.title::after { content:''; display: block; width:0; height:1em; border-right:1px solid #DDD; }
#home div.notice div.title a { display: flex; padding:0 20px; align-items: center; }
#home div.notice div.list { position: absolute; height:55px; width:calc(100% - 100px - 40px); left:100px; top:0; padding:0 10px; }
#home div.notice div.list ul#noticeList { position:relative; }
#home div.notice div.list li a { display: flex; width:100%; height:55px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#home div.notice div.list li.empty { opacity: 0.5; display: flex; width:100%; height:55px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#home div.notice div.control { display: flex; align-items: center; justify-content: center; width:40px; }
#home div.notice div.control button { background: none; padding:0.25em; opacity: 0.5; transition: 0.3s opacity; border:0;}
#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.75em solid #545864; }
#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.75em solid #545864; }
#home div.notice div.control button span { display: none; }
#home div.notice div.control button:hover { opacity: 1; transition: 0.3s opacity; }




#content.home { border:0; padding-top:0; }

#content.home div.products { margin-bottom:20px; }
#content.home div.products ul { display: flex; flex-wrap: wrap; }
#content.home div.products li:nth-child(3n+2) { margin:0 21px;}
#content.home div.products a { display: block; width:218px; padding:0; margin-bottom:40px; }
#content.home div.products a span.thumb { display: flex; margin-bottom:20px; height:208px; align-items: center; justify-content: center; border:1px solid #ECECEC; }
#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.95em; 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; }