/* ==========================================================================
   공통 스타일
   ========================================================================== */
.col {float: left; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; box-sizing: border-box;
-moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important;
background-clip: padding-box !important; }
.col { margin-left: 0; padding: 0 1%; }
.row .col:first-child { margin-left: 0; }
.span_1 { width: 8.33333%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_2, #header-cart {width: 16.66667%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_3, #product-detail .info { width: 25%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_4, #articles-list .articles > li { width: 33.33333%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_5, #header-container nav, #logo, #footer-container blockquote, #footer-container .bottom .copyright, #footer-container .bottom .social { width: 37.66667%; border-left-width: 0; padding: 0 1%; margin-left: 0%;
}
.span_6 { width: 50%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_7 { width: 58.33333%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_8 { width: 66.66667%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_9, #product-detail .images { width: 75%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_10 { width: 83.33333%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_11 { width: 91.66667%; border-left-width: 0; padding: 0 1%; margin-left: 0%; }
.span_12 { margin-left: 0; width: 100%; }

/* ==========================================================================
   리셋 스타일
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; display: inline; zoom: 1; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }
html { font-size: 100%; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%;/* 2 */}
html, button, input, select, textarea { font-family: sans-serif; }
body { margin: 0; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.67em; margin: 2.33em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
p, pre { margin: 1em 0; }
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em;
}
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
menu, ol, ul { padding: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; }
img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic;/* 2 */ }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; } 
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend {border: 0;/* 1 */padding: 0;white-space: normal;/* 2 */ margin-left: -7px;/* 3 */}
button, input, select, textarea {font-size: 100%;/* 1 */margin: 0;/* 2 */vertical-align: baseline;/* 3 */vertical-align: middle;/* 3 */}
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button;/* 2 */cursor: pointer;/* 3 */overflow: visible;/* 4 */}
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box;/* 1 */padding: 0;/* 2 */height: 13px;/* 3 */width: 13px;/* 3 */}
input[type="search"] {-webkit-appearance: textfield;/* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box;/* 2 */box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto;/* 1 */vertical-align: top;/* 2 */ }
table { border-collapse: collapse; border-spacing: 0; }
html, button, input, select, textarea {color: #222; }
body, input, textarea, select, button { font-size: 14px; line-height: 1.4; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   홈피관련 CSS 스타일
   ========================================================================== */

/* 웹폰트 *//* --------------------------------------------------------------------------------------------- */
@font-face {
	font-family: 'signal_no1_dregular';
	src: url("../fonts/signal-no1-d-webfont.eot");
	src: url("../fonts/signal-no1-d-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/signal-no1-d-webfont.woff") format("woff"), url("../fonts/signal-no1-d-webfont.ttf") format("truetype"), url("../fonts/signal-no1-d-webfont.svg#signal_no1_dregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'signal_no4_dregular';
	src: url("../fonts/signal-no4-d-webfont.eot");
	src: url("../fonts/signal-no4-d-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/signal-no4-d-webfont.woff") format("woff"), url("../fonts/signal-no4-d-webfont.ttf") format("truetype"), url("../fonts/signal-no4-d-webfont.svg#signal_no2_dregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'signal_no3_dregular';
	src: url("../fonts/signal-no3-d-webfont.eot");
	src: url("../fonts/signal-no3-d-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/signal-no3-d-webfont.woff") format("woff"), url("../fonts/signal-no3-d-webfont.ttf") format("truetype"), url("../fonts/signal-no3-d-webfont.svg#signal_no2_dregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'signal_no2_dregular';
	src: url("../fonts/signal-no2-d-webfont.eot");
	src: url("../fonts/signal-no2-d-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/signal-no2-d-webfont.woff") format("woff"), url("../fonts/signal-no2-d-webfont.ttf") format("truetype"), url("../fonts/signal-no2-d-webfont.svg#signal_no2_dregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

/* 홈피기본 폰트& 색상 스타일 *//* ------------------------------------------------------------------------- */
body { font-family: "signal_no3_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; font-size: 14px; }
input, textarea { font-family: "signal_no4_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-size: 14px; }
input:focus, textarea:focus { outline: 0; }
.hidden-autofill { display: none !important; } 
h1, h2, h3, h4, h5, label { text-transform: uppercase; font-family: "signal_no1_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; font-weight: normal; text-transform: uppercase; position: relative;
left: -.1em; }
.parsley-error { color: #d44141; }
.parsley-errors-list { display: none; margin: 0; padding: 0; list-style-type: none; }

/* 동영상 버튼 스타일 *//* -------------------------------------------------------------------------------- */
.play-btn { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; margin-top: -64px;margin-left: -64px; background: url('../img/round-btn.png?1398554148'); text-align: center; }
.play-btn span { display: block; margin-top: 2em; color: #231f20; }
.play-btn em { display: block; margin: 1em 2em; height: 1px; background: #231f20; }

/* 페이지 로드 스타일 *//* -------------------------------------------------------------------------------- */
.pageload-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; z-index: 10000; }
.svg .pageload-overlay, .pageload-overlay.loading { visibility: visible; background: url(../img/loader.gif) no-repeat 50% 50% #231f20; /* 로드시 움직이는 이미지 */ }
.pageload-overlay.hidden { visibility: hidden; }
.pageload-overlay.loading { visibility: visible; background: url(../img/loader.gif) no-repeat 50% 50% #231f20 !important; /* 로드시 움직이는 이미지 */ }
.pageload-overlay.loading svg { display: none; }
.pageload-overlay.show { visibility: visible; }
.pageload-overlay svg { position: absolute; top: 0; left: 0; }
.pageload-overlay svg path { fill: #231f20; }

/* 사진&동영상 클릭시 스타일 *//* ------------------------------------------------------------------------- */
.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed;background: #0b0b0b; opacity: 0.8; }
.mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; /* 사진&동영상 클릭후 close시 돋보기 */ }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a { color: #cccccc; }
.mfp-preloader a:hover { color: white; }
.mfp-s-ready .mfp-preloader { display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0;
-webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none;
box-shadow: none; }
button::-moz-focus-inner { padding: 0; border: 0; }
.mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0;text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus { opacity: 1; }
.mfp-close:active { top: 1px; }
.mfp-close-btn-in .mfp-close { color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: white; right: -6px; text-align: right;
padding-right: 6px; width: 100%; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; }

/* 메인 슬라이드 스타일 *//* -------------------------------------------------------------------------- */
#main_spot #featured .slider { position: relative; min-width: 980px; }
#main_spot #featured.slideshow .slider { min-height: 660px; }
#main_spot #featured.slideshow .slider:before { content: " "; display: block; padding-top: 34.375%; }
#main_spot #featured .features { position: relative; margin: 0; padding: 0; }
#main_spot #featured .features li { position: relative; overflow: hidden; margin: 0; padding: 0; list-style-type: none; z-index: 3; }
#main_spot #featured .features li.dummy { display: none; }
#main_spot #featured .features li > a { color: #231f20; text-decoration: none; }
#main_spot #featured.slideshow .features { position: absolute; left: 0; top: 0px; width: 100%; height: 100%; }
#main_spot #featured.slideshow .features li { width: 100%; height: 100%; position: absolute; }
#main_spot #featured figure { width: 400%; margin-left: -150%; }
#main_spot #featured figure img { display: block; margin: 0 auto; width: 25%; min-width: 1920px;
-moz-transition: 0.5s all; -o-transition: 0.5s all; -webkit-transition: 0.5s all; transition: 0.5s all; }
#main_spot #featured .hide { z-index: 2 !important; }
#main_spot #featured .hide figure img {-moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); }
#main_spot #featured nav { float:right; padding-right:50px; }
#main_spot #featured nav a { margin-left: 0.8em; text-decoration: none; font-size: 1em; color: #231f20;
border-bottom: 2px solid transparent; -moz-transition: 1s border-color; -o-transition: 1s border-color;
-webkit-transition: 1s border-color; transition: 1s border-color; }
#main_spot #featured nav a.slide-link { display: inline-block; vertical-align: middle; *vertical-align: auto;
*zoom: 1; *display: inline; white-space: nowrap; }
#main_spot #featured nav a.active { border-bottom-color: #231f20; }
#main_spot #featured nav a.dir { display: inline-block; vertical-align: middle;*vertical-align: auto; *zoom: 1;
*display: inline; text-indent: -9999px; overflow: hidden; width: 0; height: 0; border: 1em solid #231f20;
border-color: transparent #231f20; border-width: .5em 1em; }
#main_spot #featured nav a.dir:hover {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; }
#main_spot #featured nav a.next { border-right: 0; }
#main_spot #featured nav a.prev { border-left: 0; }

/* 전체 영역 *//* ------------------------------------------------------------------------------- */
body { min-width: 980px; }
.wrapper { *zoom: 1; max-width: 980px; margin: 0 auto; }
.wrapper:after { content: ""; display: table; clear: both; }
#wrap { overflow: hidden; }
#wrap, #main-container { position: relative; background:none; }

/* 로고 & 헤더 네비영역 *//* ------------------------------------------------------------------------------- */
#header-container { position: relative; z-index: 5; *zoom: 1; padding: 20px 0; font-family: "signal_no1_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; font-weight: normal; text-transform: uppercase; background: url(../img/header-border.png) repeat-x 50% 100% white;  }
#header-container:after { content: ""; display: table; clear: both; }
#header-container > .wrapper { height: 40px; }
#header-container a { text-decoration: none; color: #231f20; }
#header-container nav { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important;
background-clip: padding-box !important; }
#header-container nav ul { margin: 1.2em 0 0; }
#header-container nav li { float: left; padding: 0 10px 0; width: 33%; font-size: 18px; }
#header-container nav li a {  -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; border-top: 1px solid white; }
#header-container nav li.active a { border-bottom: 2px solid #231f20; }
#header-container nav li a:hover { border-top: 1px solid #231f20;}
#logo { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
-moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; padding: .2em 0 0; font-size: 0.92857em; }
#logo a { float: left; padding-left: 88px; }
#logo img { float: left; margin-top: -.2em; margin-left: -88px; width: 78px; }
#logo img .svg { display: none; }
.svg #logo img.svg { display: block; }
.svg #logo img.png { display: none; }
#logo h1, #logo h2 { margin: 0; line-height: 1em; height: 1em; text-align: justify; text-align-last: justify; }
#logo h1:after, #logo h2:after { content: ""; display: inline-block; width: 100%; }
#logo h1 { font-size: 1.53846em; }
#logo h2 { font-size: 1em; }
#header-cart { float: left; background: url(../img/header-cart-bg.png) no-repeat 83% 0; position: relative; white-space: nowrap; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important;
background-clip: padding-box !important; }
#header-cart .inner { position: relative; float: right; height: 100%; }
#header-cart .inner:before { content: ""; position: absolute; right: 10%; top: 100%; margin-top: 16px; width: 150px; height: 6px; background: url(../img/header-cart-border.png); }
#header-cart .inner:after { content: ""; position: absolute; right: 10%; top: 100%; margin-top: 28px; width: 110px; height: 22px; background: url(../img/header-cart-bg.png) repeat-y 100% 0; }

/* 푸터 영역 *//* ------------------------------------------------------------------------------------------ */
#footer-container { margin: 0 0 -500px; padding: 0 0 500px; }
#footer-container .wrapper { padding: 0 10px; }
#footer-container .bottom { clear: both; font-size: .8em; font-family: "signal_no1_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; font-weight: normal; text-transform: uppercase; }
#footer-container .bottom .copyright { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; }
#footer-container .bottom .social { float: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; -moz-background-clip: padding-box !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; }
#footer-container .bottom ul { margin: 1em 0; }
#footer-container .bottom li { float: left; margin: 0 0 0 2em; list-style-type: none; }
#footer-container .bottom a { text-decoration: none; color: #231f20; }

/* about-me 영역 *//* -------------------------------------------------------------------------------------- */
#about-me { max-width:990px; margin:45px auto 0; }
#about-me #main-container > .wrapper { width: auto;  max-width: none; }
#about-me .content { width: 100%; }
#about-me article { *zoom: 1; position: relative; float: left; z-index: 10; padding-left: 180px; width: 540px;
}
#about-me article:after { content: ""; display: table; clear: both; }
#about-me article p { min-height: 12em; line-height: 2em; }
#about-me article p:before { content: ""; position: absolute; left: 30px; text-indent: -119988px; overflow: hidden; text-align: left; background-image: url(../img/ink-2.png); background-repeat: no-repeat; background-position: 50% 50%; width: 118px; height: 118px; }
#about-me article p strong { padding: .05em 0; margin: -.05em -0; font-weight: normal; font-size: 1em;
-moz-transition: 0.25s all; -o-transition: 0.25s all; -webkit-transition: 0.25s all; transition: 0.25s all; }
#about-me article p .default, #about-me article p strong:hover { font-size: 2em; line-height: .5em; border-bottom: .2em solid; }
#about-me article p:hover .default { font-size: 1em; border-bottom-color: transparent; }
#about-me article dl { margin: 6em 0 3em; padding-left: 320px; float: left; clear: both; background: url(../img/dots.png) 0 5px no-repeat; }
#about-me article dt { margin: 0 0 .5em; font-size: 1.5em; }
#about-me article dd { margin: 0; }
#about-me article dd a { position: relative; display: block; padding-right: 2em; color: #231f20; text-decoration: none; }
/* connect 화살표 부분 */
#about-me article dd a:after { position: absolute; right: 0; top: .25em; content: ""; width: 0; height: 0;
overflow: hidden; border: 1em solid #231f20; border-color: transparent #231f20; border-width: .5em 0 .5em 1em;
-moz-transition: 0.25s all; -o-transition: 0.25s all; -webkit-transition: 0.25s all; transition: 0.25s all; }
#about-me article dd a:hover:after { top: .5em; border-width: .25em 1em .25em 0; }
#about-me header { position: relative; margin-left: -180px; margin-bottom: 2em; }
#about-me h1 { position: relative; margin-left: -140px; margin-top: -190px; z-index: -1; 
text-indent: -119988px; overflow: hidden; text-align: left; /* 타이틀 그림 부분 */
 background: url('../img/title.png?1402959125')  no-repeat 50% 50%; width: 675px; height: 334px; } 

/* 오른쪽 어사이드 부분 */
#about-me aside { float: right; width: 220px; margin: 30px 20px 60px; }
#about-me aside h3 { margin: 1em 0; font-size: 16px; }
#about-me aside p { font-size: 14px; font-family: "signal_no4_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; }
#about-me aside .outro { position: relative; margin: 2em 0; }
#about-me aside .outro:after { content: ""; position: absolute; left: -2em; text-indent: -119988px; overflow: hidden; text-align: left; background: url(../img/ink-3.png) no-repeat  50% 50%; width: 99px; height: 9px; }
#about-me aside h2 { margin: .5em 0; text-transform: none; font-size: 1.5em; font-family: "signal_no4_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; }

/* 포트폴리오 아티클 영역 *//* ----------------------------------------------------------------------------- */
#articles-list { clear: both; *zoom: 1; padding: 60px 0; }
#articles-list:after { content: ""; display: table; clear: both; }
#articles-list .articles { margin: 0 10px; padding: 0; }
#articles-list .articles > li { list-style-type: none; float: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; -moz-background-clip: padding-box !important;
-webkit-background-clip: padding-box !important; background-clip: padding-box !important; margin-bottom: 3em;
}
#articles-list .articles > li.title { width: 300px; height: 330px; margin-bottom: 2em; }
.js #articles-list .articles > li.title.stamp { position: absolute; left: 0; top: 0; }
#articles-list .articles > li.title h1 { margin: 0; }
#articles-list .articles > li > a { text-decoration: none; }
#articles-list .articles > li figure { position: relative; margin: 0 0 1em; *zoom: 1; }
#articles-list .articles > li figure:after { content: ""; display: table; clear: both; }
#articles-list .articles > li figure img { display: block; max-width: 100%; }
#articles-list .articles > li figure i { display: block; outline: 2px solid #231f20; min-height: 1em; }
#articles-list .articles > li .bf-image, #articles-list .articles > li .bf-video { position: relative;
display: block; float: left; /* 사진 보더 그림부분 */ background: url(../img/border-bg.png) 50% 50%; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; max-width: 100%; }
#articles-list .articles > li .bf-image:before, #articles-list .articles > li .bf-video:before { position: absolute; content: ""; background: white; top: 0; left: 0; right: 0; bottom: 0; -moz-transition: all 0.3s;
-o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
#articles-list .articles > li .bf-image img, #articles-list .articles > li .bf-video img { position: relative;
}
#articles-list .articles > li .bf-image:hover, #articles-list .articles > li .bf-video:hover { margin: -10px;
padding: 10px; }
#articles-list .articles > li .bf-image:hover:before, #articles-list .articles > li .bf-video:hover:before { top: 10px; left: 10px; right: 10px; bottom: 10px; }
#articles-list .articles > li h3, #articles-list .articles > li h4 { margin: 0; color: #231f20; }
#articles-list .articles > li .content { font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; }
#articles-list .articles > li h3, #articles-list .articles > li .body { position: relative; display: inline; }
#articles-list .articles > li h3 { position: relative; top: .1em; line-height: 1em; vertical-align: bottom; }
#articles-list .articles > li h3 span { min-width: 2em; }
#articles-list .articles > li h3 span:after { position: relative; }
#articles-list .articles > li .sizable { position: relative; }
#articles-list .articles > li .sizable > a { display: none; position: absolute; right: 100%; padding: 0; width: 14px; text-align: center; text-decoration: none; background: #231f20; color: white; border: 1px solid white; z-index: 100; line-height: 1em; font-size: 14px; font-weight: bold; }
#articles-list .articles > li .sizable > a.more { top: 0; }
#articles-list .articles > li .sizable > a.less { top: 15px; }
#articles-list .articles > li .sizable:hover > a { display: block; }
#articles-list .articles > li .sizable > i { display: none; }
#articles-list .articles > li .body { line-height: 1.5em; font-size: 12px; }
#articles-list .articles > li .body p:first-child { display: inline; margin-top: 0; }
#articles-list #load-articles { font-size: 18px; padding-left: 3em; padding-right: 3em; }
#articles-footer { text-align: center; font-size: 1.2em; }

/* 화면 & 모달 나타는 시간 및 형태 *//* ------------------------------------------------------------------- */
#wrap { -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; }
#wrap.bf-modal-open { -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); margin: 0 -5%; }

/* 모달 영역 *//* ------------------------------------------------------------------------------------------ */
.bf-modal #basic-modal { position: relative; margin: 0 auto; width: 965px; padding: 15px; 
/* 모달 보더 그림 부분 */background: url(../img/border-bg.png); }
.bf-modal #basic-modal .inner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px; background: white; color: #231f20; }
.bf-modal #basic-modal .mfp-close { right: 35px; top: 35px; color: #231f20; }
.bf-modal .mfp-container, .bf-modal.mfp-bg { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */
-moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
.bf-modal.mfp-ready .mfp-container { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}
.bf-modal.mfp-ready.mfp-bg.bf-image-modal, .bf-modal.mfp-ready.mfp-bg.bf-video-modal {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
.bf-modal.mfp-removing .mfp-container, .bf-modal.mfp-removing.mfp-bg { opacity: 0; }
.bf-modal .mfp-close { width: auto; font-family: "signal_no1_dregular", Impact, Arial, Helvetica, "Nimbus Sans L", sans-serif; font-weight: normal; text-transform: uppercase; font-size: .8em; text-transform: uppercase;
color: white; }
/* 모달 그림 비디오 영역 */
.bf-image-modal figure { padding: 15px; margin: 40px auto;
background: url('../img/border-bg.png?1389310854'); /* 모달 사진 그림부분 */}
.bf-image-modal img { padding: 0; }
.bf-image-modal .mfp-close { right: 15px; top: 0; }
.video-modal {position: relative; width: 960px; height: 540px; padding: 15px; margin: 0 auto;
background: url('../img/modal-bg.png?1389310854'); /* 모달 비디오 배경그림부분 */ }
.video-modal iframe { width: 100%; height: 100%; }
.video-modal .mfp-close { right: 15px; top: -40px; }
.message-modal { position: relative; width: 320px; height: auto; padding: 15px; margin: 0 auto; background: url(../img/border-bg.png); /* 모달 글 보더 그림부분 */ }
.message-modal .inner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
padding: 40px; width: 320px; background: #231f20; color: white; }
.message-modal .mfp-close { right: 15px; top: -40px; }
.message-modal .product-add_cart h1 { margin: 0; font-size: 1.2em; }
.message-modal .product-add_cart p { margin: 0; }

/* ==========================================================================
   클리어 & 비주얼 & 글 없애는 영역
   ========================================================================== */
.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 150%; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }