
<!--  Color / Images SETUP  -->
<!--  Color / Images SETUP  -->

<!----------  CSS : START - Ready for Retina Display (04.01.28) ---------->
.cssTest {
line-height:190%;
}

* {
margin:0;
padding:0;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
vertical-align:baseline
text-rendering: auto;
webkit-text-stroke: 0.6px;
empty-cells:hide;
/*
-webkit-font-smoothing:subpixel-antialiased !important;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 0.1px;
font-smooth:always;
*/
}


html{
  overflow-y:clip;
scrollbar-3dLight-Color:#efefef;
scrollbar-arrow-color:#dfdfdf;
scrollbar-base-color:#efefef;
scrollbar-Face-Color:#dfdfdf;
scrollbar-Track-Color:#efefef;
scrollbar-DarkShadow-Color:#efefef;
scrollbar-Highlight-Color:#efefef;
scrollbar-Shadow-Color:#efefef;
}

::-webkit-scrollbar{
width:8px;
height:8px;
border:3px solid #fff;
}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{
display:block;
height:10px;
}

::-webkit-scrollbar-track{
background:#efefef;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2);
}

::-webkit-scrollbar-thumb{
height:50px;
width:50px;
background:rgba(0,0,0,.2);
-webkit-border-radius:8px;
-moz-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.1);
}

::selection{
background:#ffad01;
color:#111;
}

::-moz-selection{
background:#ffad01;
color:#111;
}

::-webkit-selection{
background:#ffad01;
color:#111;
}

a:hover {
text-decoration:none;
color:#e40403;
outline:none;
}

a:active,a:link,a:visited,a:hover,a:active,* :focus {
text-decoration:none;
outline:none;
}

ul,li {
list-style:none;
margin:0;
padding:0;
}

img {
border:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

html,body {
font-family:'Roboto','Noto Sans Japanese','Noto Sans KR','Nanum Barun Gothic','Apple SD Gothic Neo','メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,verdana,'ＭＳ Ｐゴシック','MS PGothic',Osaka,'ＭＳ Ｐゴシック','Nanum Gothic','맑은 고딕','Malgun Gothic',돋움,Dotum,Helvetica,Apple SD Neo Gothic,Apple Gothic,Arial,Meiryo,MS PGothic,ＭＳ Ｐゴシック,ヒラギノ角ゴ Pro W3,'Lucida Grande','Lucida Sans Unicode',sans-serif !important;;
font-size: 16px;;
background-color: #fff;
word-spacing:0 !important;
letter-spacing:0 !important;
margin:0 !important;
padding:0 !important;
}

body {
  overflow-y:auto;
}

#wraper {
display:none;
z-index:2;
margin:0px;
padding: 0px;
/*background:red; -- IE에서 오류해결 --*/
width: 100%;
/*height: 100%;*/
}

.loading-outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.loading-inside {
display: table-cell;
vertical-align: middle;
}

#loading {
/*
margin: auto;
width:16px;
height:16px;
z-index:-1;
background:url(https://liquidstereo.cdn1.cafe24.com/images/progress.gif) no-repeat;
background-size:16px 16px !important;
overflow:hidden;
*/
}

#loading-bar {
width:80px;
height:20px;
}

#loading-text {
font-size: 11px;
color:#888;
margin-left:5px;
}


h1,h2,h3,h4 {
font-weight:normal;
}

/*
h1 {
display:block;
width:100px;
height:80px;
background-color:red;
font-size:1em;
word-spacing:0;
letter-spacing:0;
color:#231f20;
text-transform:uppercase;
}
*/


#header {
width:100%;
}

#headHeight {
height:190px;
}

/*----------  CSS : HEADER LOGO - START ---------
.headerLogo {
margin-top:30px;margin-left:30px;width:100px;height:80px;border-style:none;background-image:url(svg/header-logo.min.svg);background-image:url(https://liquidstereo.cdn1.cafe24.com/images/header-logo-ie.png)\9;
background-repeat:no-repeat;background-position: center center;background-size:100px 80px;;
}

html>body #wraper.headerLogo {
margin-top:30px;margin-left:30px;width:100px;height:80px;border-style:none;background-image:url(https://liquidstereo.cdn1.cafe24.com/images/header-logo-ie.png);
background-repeat:no-repeat;background-position: center center;background-size:100px 80px;;
}


#header-logo-over{
display:none;width:100px;height:80px;border-style:none;background-image:url(svg/header-logo-hover.min.svg);background-image:url(https://liquidstereo.cdn1.cafe24.com/images/header-logo-hover-ie.png)\9;
background-repeat:no-repeat;background-position: center center;background-size:100px 80px;;
}
----------  CSS : HEADER LOGO - END ---------*/

.headerLogo {
width: 190px;
height:calc(1.3125em*2) !important;
display:block !important;
background-color: none;
padding:0;
margin:30px 0 0 30px !important;
width:190px !important;
}

h1.header-title-bold, h1.header-title-thin{
padding:0;
margin:0;
width: 190px;
font-family:'Roboto',sans-serif !important;
display:block;
font-size:21px !important;
text-align: left;
text-transform:uppercase;
font-weight:900;
letter-spacing:5px;
color:#231f20;
line-height:100%;
}

h1.header-title-thin:before {
content:'MONOGRAPHS';
/*transition: all 3s ease;	*/
}

h1.header-title-thin{
font-size:19px !important;
font-weight:300;
letter-spacing:7.6px;
color:#5D5D5D;
}


#widget-text{
width: 190px;
display:block;
}

#container {
/*min-height:100%;*/
margin-left:250px;
margin-top:0px;
margin-bottom:-50px;
color:#231f20;
z-index:2;
position: relative;
}

*+ html #container {
height:100%;
}

#menu {
width:200px;
word-wrap:eak-word;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-shadow: 0 0 1px rgba(0,0,0,0.3) !important;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
-moz-binding:url(xml/ellipsis.xml#ellipsis);
}

.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}

.treeview ul {
margin-top: 4px;
}

.treeview li {
font-size: 11px;
margin: 0;
padding: 3px 0pt 3px 20px;
}


.treeview li .item{
text-transform: capitalize;

background:url(https://liquidstereo.cdn1.cafe24.com/images/bgSlashGray.png) top left repeat\9;
background-image: linear-gradient(-45deg, #777777 25%, transparent 25%, transparent 50%, #777777 50%, #777777 75%, transparent 75%, transparent);
background-size: 4px 4px;
background-color:#555555;
;
color: #fff;
cursor: pointer;
line-height: 150%;
padding: 3px 10px;
margin-left: -20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0s ease-in-out;;
}

.treeview li .item:hover{
background-image: none;
background-color: #008ee1;
color: #fff;
cursor: pointer;
}

.treeview li .item:visited{
background-image: none;
background-color: #BEBCBE;
color: #fff;
cursor: pointer;
}

.treeview li .item-temp{
content: "X";
text-transform: capitalize;
background-color:#efefef;
color: #efefef;
text-shadow: none;
/*text-decoration:line-through;*/
cursor: pointer;
line-height: 150%;
padding: 3px 10px;
margin-left: -20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0s ease-in-out;;
}

.treeview li .item-temp:hover{
background-color: #ffad01;
color: #fff;
cursor: pointer;
text-shadow: 0 0 1px rgba(0,0,0,0.3) !important;
/*
-webkit-transition: background-color linear .01s;
-moz-transition: background-color linear .01s;
-o-transition: background-color linear .01s;
transition: background-color linear .01s;
*/
}

.treeview li .item-temp:active{
background-color: #efefef;
text-decoration: line-through;
}
/*----------  하위 버튼  ----------*/

.treeview a.selected {
background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview #title {
text-transform: capitalize;
background-color: #000;
color: #fff;
cursor: pointer;
line-height: 170%;
padding:4px 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0s ease-in-out;;
}

.treeview #title.hover {
text-transform: capitalize;
background-color: #e40403;
color: #fff;
cursor: pointer;
}

.treeview li {
background: url(https://liquidstereo.cdn1.cafe24.com/images/treeview.default.png) 0 0 no-repeat;
}

.treeview .hitarea {
background: url(https://liquidstereo.cdn1.cafe24.com/images/treeview.default.png) -64px -25px no-repeat;
height: 16px;
width: 16px;
margin-left: -16px;
float: left;
cursor: pointer;
}

* html .hitarea { /* fix for IE6 */
display: inline;
float:none;
}

.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable {
background-image: url(https://liquidstereo.cdn1.cafe24.com/images/treeview.default.png);
}

.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li {
}

/* -------------------- NAV BUTTONS : START ; -------------------- */
.hitarea.closed-hitarea.expandable-hitarea.lastExpandable-hitarea {
background: url(https://liquidstereo.cdn1.cafe24.com/images/collapseButton-min.png) no-repeat;
background-position: 0 -29px;
width: 16px !important;
height: 9px;
margin-top: 4px !important;
}

.hitarea.closed-hitarea.collapsable-hitarea.lastCollapsable-hitarea {
background: url(https://liquidstereo.cdn1.cafe24.com/images/collapseButton-min.png) no-repeat top left;
background-position: 0 0px;
width: 16px !important;
height: 9px;
margin-top: 4px !important;
}


/*
.hitarea.closed-hitarea.expandable-hitarea.lastExpandable-hitarea:before, .hitarea.closed-hitarea.collapsable-hitarea.lastCollapsable-hitarea:before {
content: "\f0fe";
font-family: FontAwesome;
color:#231f20 !important;
vertical-align:0;
font-weight:normal;
font-size:11px !important;
padding: 0.4075em 0;
display:block;
text-shadow:none !important;
font-smooth: never !important;
-webkit-font-smoothing : none !important;
webkit-text-stroke: none !important;
position:relative;
}

.hitarea.closed-hitarea.collapsable-hitarea.lastCollapsable-hitarea:before {
content: "\f147";
font-family: FontAwesome;
}
*/

/* -------------------- NAV BUTTONS : END ; -------------------- */

#footer {
line-height:150%;
color:#5D5D5D;
word-spacing:0;
letter-spacing:0;
text-align:justify;
font-size:11px;
position:absolute;
clear:both;
/*height:50px;*/
width:720px;
padding:0 0 30px;
}

#footer a:hover{
color:#e40403;
}

span.line-break {
width:100%;
display:inline-block;
margin-bottom:6px;
}

.footer-text {
color:#231f20;
line-height:150%;
word-spacing:-1px;
text-align:justify;
}

.footer-text a {
color:#555;
cursor:pointer;
font-weight:700;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0s ease-in-out;;
}

#footerHeight {
clear:both;
width:100%;
}

#dashline {
width:720px;
height:1px;
margin-bottom:10px;
background:url(https://liquidstereo.cdn1.cafe24.com/images/dot.gif) repeat-x left bottom;
}

#footer-area {
width:720px;
margin-bottom:120px;
}

#content {
width:100%;
z-index:1;
line-height:190%;
font-size: 11px;
/*margin-top:20px;*/
overflow:hidden;
}

/*
*+html #content {
height:: 0;
width:720px;
z-index:1;
line-height:190%;
font-size: 11px;
margin:30px 0 5px 7px;
padding:10px;
}

* html #content {
height:1%;
}
*/


#widget-container {
word-spacing:0;
letter-spacing:0;
position:absolute;
float:left;
margin-left:-230px;
margin-top:0px;
color:#fff;
padding:0 0 0 10px;
}

/*
*+html #widget-container {
word-spacing:0;
letter-spacing:0;
position:relative;
float:left;
margin-left:-230px;
margin-top:30px;
color:#fff;
padding:10px;
}
*/

#widget-container H2.widget-title {
word-spacing:0;
letter-spacing:0;
color:#231f20;
text-transform:uppercase;
padding: 0;
margin:0 0 0 0px;
font-weight:900;
font-size: 11px;
}

#widget-container .item-area {
width:190px;
padding:5px 5px 20px;
}

#widget-container .search-area {
width:175px;
padding:5px;
}

#widget-container .section-title a {
text-transform:capitalize;
word-spacing:0;
letter-spacing:0;
line-height:190%;
color:#fff;
font-size: 11px;
background-color:#000;
z-index:9999;
text-decoration:none;
font-weight:400;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px;
padding:2px 7px;
}

#widget-container .section-title a:hover {
color:#222;
background-color:#e40403}

#widget-text {
padding-left:0;
line-height:18px;
outline:none;
color:#222;
z-index:9999;
font-size: 11px;
word-spacing:0;
letter-spacing:0;
}

#search-form input#q {
border:1px solid #231f20;
background:#FFF;
font-size:9px;
text-align:left;
font-style:italic;
background-image:url(https://liquidstereo.cdn1.cafe24.com/images/bg_dot.gif);
margin:0;
padding:2px;
}

#search-form input#searchsubmit {
background:#222;
color:#FFF;
border:0;
background-image:url(https://liquidstereo.cdn1.cafe24.com/images/bg_dot.gif);
margin:4px 0;
padding:4px;
}

.search-form input {
color:#000;
border:1px solid #999;
font-size: 11px;
text-align:left;
font-style:italic;
background-image:url(https://liquidstereo.cdn1.cafe24.com/images/bg_dot.gif);
width:160px;
margin:0;
padding:2px;
}

#speedChecker {
width:200px;
height:20px;
position:relative;
border:0;
top:0;
right:0;
background:none;
font-size:8pt;
font-family:Tahoma;
}

a:link,a:visited {
text-decoration:none;
color:#231f20;
outline:none;
}

#footer a,#content a,#content a:hover,#works-content-area a {
font-weight:700;
}

.footer-text{
height: 120px;
}

.footer-text a:hover{
color:#e40403;
border-bottom:1px dotted #999;
}


div.frontpage{
    background: #fff;
    background-size:720px 405px !important;
    background-size: contain !important;
    -moz-background-size: 720px 405px !important;
    -webkit-background-size: 720px 405px !important;
    border-radius:5px;
}

div.frontpage-video {
    text-align: right !important;
    width: 720px !important;
    height: 404px !important;
    background-color: #fff;
    -moz-background-size: 720px 404px !important;
    -webkit-background-size: 720px 404px !important;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px
}

iframe#frontpage-video-youtube {
    background: #fff;
    -moz-background-size: 720px 405px !important;
    -webkit-background-size: 720px 405px !important;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

#frontpage-title {
    text-align: right;
    color : #fff;
    z-index:10;
    line-height : 100% !important;
    position:relative;
    right:8px;
    bottom:25px;
    display: inline-block;
    background : #000;
    padding: 3px 5px;
    text-transform:uppercase;
    vertical-align:middle;
    font-size: 9px !important;
    filter:alpha(opacity=50);
    opacity:0.5;
    -moz-opacity:0.5;
    text-shadow: 0 0 1px rgba(0,0,0,0.3) !important;
}


#project-details .motion_description{
color:#231f20;
margin-left: 15px;
text-indent: -1em;
}

#project-details .motion_description a{
font-weight: normal;
color:#231f20;
border-bottom:1px dotted #efefef;
}

#project-details .motion_description a:hover{
color:#008ee1;
border-bottom:1px dotted #008ee1;
}

#project-details .motion_description li{
text-indent: -1em;
}

#project-details .motion_description .copyright{
margin-left: 10px;
text-indent: -1em;
}

.download-works{
margin-top: 10px;
margin-left: 43px;
}

#project-details ul li{
list-style-type: disc;
list-style-position: inside;
line-height:180%;
margin-left: 20px;
text-indent: -1em;
}

#project-details ul li.scripts{
list-style-type: disc;
list-style-position: inside;
line-height:180%;
margin-left: 20px;
margin-bottom:1em;
text-indent: -1em;
}

#project-details em{
text-indent: -1em;
}

#printPageSpeed {
font-style: normal;
color:#BEBCBE;
margin:0px;
}

.intro-text {
/*min-height:340px !important;*/
}

.browser-error {
  text-align : center;
  background : red;
  font-size: 16px;;
}


/* 프리로더  */
.loader{
    display: block;
    position: relative;
    height: 404px;
    width: 720px;
    background: #fff;
    overflow: hidden;
  }
.loader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #f5f5f5;
    animation: 8s prog ease-in infinite;
  }
  @keyframes prog {
    to  {   width: 100%;}
  }

.loader-text {
	color:#231f20;
	margin:0 auto;
	position: absolute;
	top: 50%;
	margin-top: -13px; /* height 값의 절반 , 패딩을 줬다면 (height + 패딩) / 2 */
	margin-left: 270px; /*전체크기는 640인데 너비로 100을 줬으므로 여백은 540이 생긴다. 좌우로 동일한 여백을 줘야 하므로 540/2, 즉 20이 된다.*/
	width:100px;
	height: 12px;
	line-height:12px; /* height와 같은 값 */
	padding : 1px;
	text-align:center;
	display:block;
	vertical-align:middle;
	font-size: 9px;
	/*background-color:#fff;*/
	background-color:#fff;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	z-index:1000;
	animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}


#video-background {
  width:720px;
  height:404px;
  background: #fff;
  z-index:999999;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px
}

.video-background {
  background: #fff;
  z-index:1;
}
.video-foreground,.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

video {
  clip-path: inset(1px 1px); /* *** REMOVE VIDEO JS BORDER */
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px
}