/*-----------------------------------------------------------------------------------

	Theme Name: BigFormat
	Theme URI: http://themeforest.net/item/bigformat-responsive-fullscreen-wordpress-theme/2632480
	Description: BigFormat is a fullscreen responsive portfolio theme.
	Author: Andre Gagnon
	Version: 1.4 (Customized for Artforum Rhee - Final Master Version)
	
-----------------------------------------------------------------------------------*/

@import url('css/reset.css'); /*import reset stylesheet */

/*-----------------------------------------------------------------------------------*/
/* Preloader Styles - FIXED: Hidden
/*-----------------------------------------------------------------------------------*/

div#preloaded-images, #supersized-loader, .loading, .loader {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/*-----------------------------------------------------------------------------------*/
/* *General Site Styles
/*-----------------------------------------------------------------------------------*/

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; text-align: center; margin: 5px auto 5px auto; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 15px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
em { font-style: italic; }
strong { font-weight: bold; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text, .gallery-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 5px 4px 0; }
blockquote { quotes: "\201c" "\201d" "\2018" "\2019"; padding-left: 20px; border-left: 1px solid #dcdcdc; font-style: italic; margin: 0px 0 20px 10px; line-height: 18px; font-size: 12px; }
.sticky { }
.bypostauthor { border: 3px; }

/*-----------------------------------------------------------------------------------*/
/* General Layout
/*-----------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	color: #555;
    background-color: transparent !important;
}
.mainbody {
	z-index: 1;
	height: 100%;
	position: relative;
	margin-left: 220px;
    background: transparent !important; 
    background-color: transparent !important;
}
.container { position: relative; margin-left: 20px; }
.contentarea { position: absolute; width: 100%; overflow-x: hidden; z-index: 999999; }
.smallpage, .projectcontent { width: 465px; float: left; }
.largepage { width: 685px; }
.sidebar { width: 225px; float: left; margin-left:10px; }
.sidebar, .smallpage, .largepage { margin-bottom: 20px; }

/* #Logo Styles */
.logo h1, .logo h1 a, .mobilenavcontainer h1, .mobilenavcontainer h1 a {
	line-height: 22px; font-size: 22px; margin: 0; padding: 0; color: #333; font-weight: bold; text-align: left;
}
.logo { margin: 20px 0; }

/* #General Theme Styles */
.mobileonly { display:none !important; }
img.scale-with-grid { max-width: 100% !important; height: auto !important; }
.pagebg img { max-width: 100% !important; height: auto !important; }
.ppt[style] { display: none !important; }
.alert { background: #ffffff; text-align: center; padding: 5px 0px; border-top: 2px solid #333; border-bottom: 2px solid #333; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: .9; }
.alert p { font-size: 24px; color: #666; position: absolute; top: 50%; width: 100%; text-align: center; margin-left: -30px; margin-top: -18px; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.nomargin { margin: 0; }

/* #Button Sizes */
.button, a.button, a.more-link, #submit {
	background-color: #37648C; color: #FFF; cursor: pointer; display: inline-block; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 1; padding: 8px 10px 9px; position: relative; text-decoration: none; font-size: 10px; transition: all 0.3s ease 0s; border: none; line-height: normal !important;
}
.button:hover, a.button:hover, a.more-link:hover, #submit:hover { color: #fff; }
.button.custom:hover, a.button.custom:hover { background: #222 !important; }
a.more-link, a.button, .button { margin-top: 10px; }
.button.small { font-size: 10px; }
.button.medium { font-size: 12px; padding: 10px 12px 11px; }
.button.large { font-size: 14px; padding: 12px 14px 13px; }
.button.huge { font-size: 18px; padding: 14px 16px 15px; }

/* #Button Colors */
.button.red { background: #C60108; }
.button.orange { background: #E97F02; }
.button.yellow { background: #ECBA09; }
.button.green { background: #8FBE00; }
.button.blue { background: #00A8C6; }
.button.purple { background: #490A3D; }
.button.purple:hover, .button.blue:hover, .button.green:hover, .button.yellow:hover, .button.orange:hover, .button.red:hover { background: #222; }

/*-----------------------------------------------------------------------------------*/
/* *General Form Elements
/*-----------------------------------------------------------------------------------*/
input#s { padding: 10px; border-style: solid; border-width: 1px; font-size: 10px; width: 90%; max-width: 400px; margin: 0; }
input[type=text], textarea { margin: 0 0 20px 0; border-style: solid; border-width: 1px; font-size: 12px; width: 90%; padding: 10px; }
input[type=submit].button { margin-top:0; }

/* #Divider Styling */
.divider { margin: 10px 0 30px 0; text-align: center; background: #fff url(images/dotted.gif) center repeat-x; height: 12px; }
.divider h5 { padding: 0 20px; color: #999; font-size:10px; }
.divider span { background: #fff; padding: 0 20px; }
.divider.full { width: 505px; margin: 0 10px; background: #fff url(images/dotted.gif) center repeat-x; height: 1px; float: left; position:relative; z-index:999999; }
.divider.full.sidetop { display:none; }
.smallpage .divider.full { width:445px; }
.divider.full h4 { margin-bottom: 0; color: #999; font-weight: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 3px; text-align: center; display: block; margin-top: -8px; }
.divider.full h4 span { display: inline; background: #fff; }
.sidebar .divider.full { width: 205px; }
.sidebar .widget-last .divider.full { display: none; }

/*-----------------------------------------------------------------------------------*/
/* *Dropdown Navigation
/*-----------------------------------------------------------------------------------*/
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; font-size: 12px; z-index: 10; }
.sf-menu { line-height: 1.0; }
.sf-menu ul { position: absolute; top: -999em; width: 14em; }
.sf-menu ul li { width: 100%; }
.sf-menu li:hover { visibility: inherit; }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.0em; z-index: 99; }
.sf-menu li:hover li ul, .sf-menu li.sfHover li ul { top: -999em; }
.sf-menu li li:hover ul, .sf-menu li li.sfHover ul { left: 14em; top: 0; }
.sf-menu li li:hover li ul, .sf-menu li li.sfHover li ul { top: -999em; }
.sf-menu li li li:hover ul, .sf-menu li li li.sfHover ul { left: 10em; top: 0; }
.sub-menu { z-index: 3; }
#footer ul.sub-menu { background: none; }

.sf-menu { float: left; margin-bottom: 30px; }
.sf-menu a { padding: .75em 1em; text-decoration: none; padding-left: 0; }
.sf-menu li li a, .sf-menu li li a:visited { padding-left: 1.25em; }
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline: 0; }
.sf-menu ul li a { padding: 15px 15px; border-bottom-style: dotted; border-bottom-width: 1px; margin: 0; }
.sf-menu ul li:last-child a { border-bottom: none; }

.sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; }
.sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; width: 10px; height: 10px; text-indent: -999em; overflow: hidden; }
li li .sf-sub-indicator { top: 1.35em; }
a > .sf-sub-indicator { background-position: 0 -100px; }
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; }
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; }
.sf-shadow ul.sf-shadow-off { background: transparent; }
.sf-shadow ul { box-shadow: 0 0px 30px rgba(0, 0, 0, .1); }
.sf-vertical, .sf-vertical li { width: 100%; padding-right: 20px; }
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 100%; top: 0; cursor: pointer; border: 1px solid #dcdcdc; }
.sf-vertical .sf-sub-indicator { background-position: -10px 0; }
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; }
.sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul li:last-child li a { border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: gainsboro; }
.sf-menu ul li li:last-child a { border-bottom: none; }


/*-----------------------------------------------------------------------------------*/
/* #Navigation Containers - FIXED
/*-----------------------------------------------------------------------------------*/

.navcontainer {
	background: #052F4A; 
	position: fixed;
	top: 0; width: 180px; left: 0; padding: 20px; padding-top: 0; height: 100%;
	box-shadow: 0 0 3px rgba(0, 0, 0, .25);
	z-index: 999;
}
/* Sidebar Links */
.navcontainer a, .navcontainer ul li a { color: #ffffff !important; }
.navcontainer a:hover { color: #F54927 !important; }
.navcontainer ul li.current-menu-item a { color: #05DF72 !important; font-weight: bold; }

.navcontainer .container { z-index: 10; }
.mobilenavcontainer { width: 100%; position: static; z-index: 999999; }

#mobilenav:target a { transition: height .25s, line-height .25s, background .25s, visibility .25s; }
.mobilenavigation { width: 322px; margin: auto; padding-bottom: 20px; }
ul#mobilenav, #mobilenav li { list-style: none; margin:0; }
#mobilenav:target li li a, #mobilenav:target li li li a{ padding-left:20px; }
ul#mobilenav ul { margin:0; }
ul#mobilenav { margin: 0; position: relative; z-index: 1000; }

/* ==========================================================================
   [수정] 모바일 메뉴 항목 & 흰색 화살표
   ========================================================================== */

#mobilenav a {
    position: relative;
    display: block;
    overflow: visible !important;
    height: 0;
    line-height: 0;
    padding: 5px 5px;
    border-bottom: 1px dotted #10598A;
    text-align: left;
    z-index: 1000;
    border-width: 0;
    font-size: 12px;
    
    color: #dddddd !important;
    background-color: #052F4A !important;
    background-image: none !important;
    filter: none !important;
}

#mobilenav a:hover {
    background-color: #052F4A !important; 
    color: #ffffff !important;
}

#mobilenav:target a {
    border-bottom-width: 1px;
    height: auto !important;
    padding: 15px 5px !important;
    line-height: 1.2 !important;
}

#mobilenav a:after {
    content: "›"; 
    color: #ffffff !important;
    font-size: 24px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: Arial, sans-serif;
    font-weight: normal;
    line-height: 1;
}

/* Mobile Menu Button */
#jump {
    z-index: 1001;
    background-color: #052F4A !important;
    background-image: none !important;
    width: 300px; 
    height: auto; 
    display: block; 
    padding: 15px 10px; 
    margin: auto;
    text-align: left; 
    position: relative; 
    font-size: 12px; 
    color: #ffffff !important;
    border-bottom: 1px solid #10598A;
    filter: none !important;
}

#jump:after {
    content: "﹀"; 
    color: #ffffff !important;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}

#jump a:hover { background-color: #052F4A !important; color: #ffffff !important; }

#mobilenav { z-index: 1000; }
#mobilenav:target { z-index: 1001; }
#mobilenav:target a { position: relative; z-index: 1; }
#back { position:relative; }

#back a {
    background-color: #052F4A !important;
    background-image: none !important;
    border: 0; 
    position: relative; 
    left: 0; 
    right: 0; 
    z-index: 1001; 
    margin-top: 0px; 
    border-width: 0; 
    color: #ffffff !important;
    display: block;
    padding: 15px 10px;
    filter: none !important;
}

#back a:hover { background-color: #052F4A !important; color: #ffffff !important; }

#back a:after {
    content: "︿"; 
    color: #ffffff !important;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}

#mobilenav:target #back a{ border-width:1px; height:auto; padding: 10px; margin-top: -38px; }

#top_panel { background: #052F4A; color: #fff; } 
#top_panel_button { background: #052F4A; }
#toggle_button { background-color: #052F4A !important; }

#toggle_button.uparrow, #toggle_button.downarrow { background-color:#fff !important; }
#toggle_button.uparrow { background: white url(images/downarrow-dark.png) 50% 38px no-repeat; }
#toggle_button.downarrow { background:#fff url(images/uparrow-dark.png) 50% 38px no-repeat; }

.page-template-template-home-php .mobilenavcontainer { position: absolute; top: 0; width: 100%; }
.navhandle {
	width: 35px; height: 35px; display: block; position: fixed; z-index: 999999; bottom: 40px; left: 201px;
	border-radius: 18px; -moz-border-radius: 18px; cursor: pointer;
	background: #fff url(images/leftarrow.png) 18px center no-repeat;
}
.navhandle.rightarrow { background: #fff url(images/rightarrow.png) 18px center no-repeat; }

/*-----------------------------------------------------------------------------------*/
/* *Navigation Skin
/*-----------------------------------------------------------------------------------*/
.sf-menu { float: right; margin-right: -20px; z-index: 9999; }
.sf-menu a { padding: .75em 1em 32px 1em; margin: 0; text-decoration: none; }
.sf-menu.sf-vertical a { padding: .75em 1.5em .75em 0; }
.sf-menu.sf-vertical li li a { padding: 14px 16px; }
.sf-menu ul li { font-weight: normal; }
.sf-menu .sfHover ul li a, .sf-menu .sfHover ul li li a { box-shadow: none; }
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active, .sf-menu ul li li a:focus, .sf-menu ul li li a:hover, .sf-menu ul li li a:active { border-radius: 0px; box-shadow: none; text-shadow: none; }
.sf-menu ul li a, .sf-menu li li a, .sf-menu li li li a { border-color: #dcdcdc; }
.sf-menu a:hover, .filter li a:hover, .filter li.active a, ul.tabs li a:hover { color: #333; }
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active, .sf-menu ul li li a:focus, .sf-menu ul li li a:hover, .sf-menu ul li li a:active { color: #333; background: #f2f2f2; }
.sf-menu ul li a, .sf-menu ul li a, .sf-menu ul li a, .sf-menu ul li li a, .sf-menu ul li li a, .sf-menu ul li li a { background: #fff; }
.sf-menu a, .sf-menu a:visited { color: #555; }
.sf-menu li li a, .sf-menu li li a:visited { color: #555; }
.sf-sub-indicator { background: url(images/navarrows.png) no-repeat -10px -100px; }

/*-----------------------------------------------------------------------------------*/
/* *Mobile Nav Panel & Typography
/*-----------------------------------------------------------------------------------*/
#top_panel { width: 100%; font-size: 10px; display: none; position: relative; }
#top_panel_button { width: 100%; padding-top: 5px; height: 5px; cursor: pointer; }
#toggle_button { z-index: 2; margin: auto; margin-bottom: -30px; width: 45px; height: 45px; border-radius: 20px; position: relative; }
#toggle_button.downarrow, #toggle_button.uparrow { margin-top: -35px; padding-bottom: 10px; }
#top_panel_content { z-index: 99999; }
select.dropdownmenu { display: none; padding: 10px; margin: 20px 0; width: 100%; border-width: 1px; border-style: solid; }

p, ul { font-size: 12px; line-height: 22px; margin-bottom: 10px; }
p a, a { text-decoration: none; transition: opacity 0.3s ease 0s; }
h1 { margin: 0; padding: 0; font-size: 38px; line-height: 40px; margin-bottom: 20px; transition: all 0.3s ease 0s; }
h2 { margin: 0; padding: 0; font-size: 24px; line-height: 26px; margin-bottom: 20px; transition: all 0.3s ease 0s; }
h3 { margin: 0; padding: 0; font-size: 18px; line-height: 22px; margin-bottom: 20px; transition: all 0.3s ease 0s; font-weight: bold; }
h4 { margin: 0; padding: 0; font-size: 14px; font-weight: bold; line-height: 16px; margin-bottom: 20px; transition: all 0.3s ease 0s; }
h5 { margin: 0; padding: 0; font-size: 12px; font-weight: bold; line-height: 14px; margin-bottom: 20px; transition: all 0.3s ease 0s; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; }
em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 80%; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left-size: 1px; border-left-style: solid; }
blockquote cite { display: block; font-size: 12px; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
hr { border-style: solid; border-width: 1px 0 0; clear: both; margin: 0 0 20px 0; padding: 0; height: 1; }
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }

#videocaption .Center { position: absolute; width: 596px; top: 50%; left: 50%; margin-left: -298px; text-align: center; }
#videocaption .Center { z-index: 0; width: 100%; left: 0; margin-left: 0; }
.popupplay { display: block; background: #222 url(images/play-video.png) center no-repeat; opacity: .9; box-shadow: 0 0 10px rgba(0, 0, 0, .9); text-indent: -999999px; width: 80px; height: 60px; margin: auto; }

/*-----------------------------------------------------------------------------------*/
/* *Homepage Caption Styling
/*----------------------------------------------------------------------------------*/
#homevideocaption .Right { position: absolute; width: 596px; top: 50%; right: 120px; text-align: right; }
#homevideocaption .Right.Bottom { position: absolute; width: 596px; bottom: 85px; top: auto; right: 120px; text-align: right; margin-top: 0; z-index:9999; }
#homevideocaption .Light h2 { background: #fff; color: #000; box-shadow: 12px 0 0 #fff, -12px 0 0 #fff; background: rgba(255,255,255,.5); box-shadow: 12px 0 0 rgba(255,255,255,.5), -12px 0 0 rgba(255,255,255,.5); line-height: 140%; display: inline; margin-bottom: 5px; opacity: 1; }
#homevideocaption .Light .subheadline { margin-bottom: 8px; }
#homevideocaption .Right.Light .button { margin-right: -12px; }
#homevideocaption .Light span { line-height: 24px; padding: 5px 0; }
#slidecaption .White h2 { color: #fff; }
#slidecaption .Center { position: absolute; width: 596px; top: 50%; left: 50%; margin-left: -298px; text-align: center; }
#slidecaption .Left { position: absolute; width: 596px; top: 50%; left: 120px; text-align: left; }
#slidecaption .Right { position: absolute; width: 596px; top: 50%; right: 120px; text-align: right; }
#slidecaption .Right.Top { position: absolute; width: 596px; top: 100px; right: 120px; text-align: right; margin-top: 0; }
#slidecaption .Left.Top { position: absolute; width: 596px; top: 100px; left: 120px; text-align: left; margin-top: 0; }
#slidecaption .Right.Bottom { position: absolute; width: 596px; bottom: 85px; top: auto; right: 120px; text-align: right; margin-top: 0; }
#slidecaption .Left.Bottom { position: absolute; width: 596px; bottom: 70px; top: auto; left: 120px; text-align: left; margin-top: 0; }
.captionbutton { line-height:12px; }
#slidecaption h2, #homevideocaption h2 { margin-bottom: 0; }
#slidecaption h2, #slidecaption span, #homevideocaption h2, #homevideocaption span { background: none; }
#slidecaption { font-size: 36px; line-height: 38px; }
#slidecaption .Dark .subheadline, #slidecaption .Light .subheadline { margin-bottom: 8px; }
#slidecaption .Left.Dark .button, #slidecaption .Left.Light .button { margin-left: -12px; }
#slidecaption .Right.Dark .button, #slidecaption .Right.Light .button { margin-right: -12px; }
#slidecaption .Dark h2, #slidecaption .Light h2 { line-height: 140%; }
#slidecaption .Light h2, #slidecaption .Light span, #slidecaption .Dark h2, #slidecaption .Dark span, #slidecaption .Black.Dark h2, #slidecaption .Black.Dark span { display: inline; margin-bottom: 5px; opacity: 1; }
#slidecaption .Light span, #slidecaption .Dark span, #slidecaption .Black.Dark span, #slidecaption .White.Dark span { line-height: 24px; padding: 5px 0; }
#slidecaption .Black, #slidecaption .Black h2, #slidecaption .Black span { color: #000; }
#slidecaption, #slidecaption h2, #slidecaption span { color: #FFF; }
#slidecaption .Dark h2, #slidecaption .Dark span, #slidecaption .Black.Dark h2, #slidecaption .Black.Dark span { background: #000; color: #fff; box-shadow: 12px 0 0 #000, -12px 0 0 #000; background: rgba(0,0,0,.5); box-shadow: 12px 0 0 rgba(0,0,0,.5), -12px 0 0 rgba(0,0,0,.5); }
#slidecaption .Light h2, #slidecaption .Light span, #slidecaption .White.Light h2, #slidecaption .White.Light span { background: #fff; color: #000; box-shadow: 12px 0 0 #fff, -12px 0 0 #fff; background: rgba(255,255,255,.5); box-shadow: 12px 0 0 rgba(255,255,255,.5), -12px 0 0 rgba(255,255,255,.5); }
.bottomfade { background: url(images/topfade.png) top repeat-x; height: 200px; position: absolute; bottom: 0; left: 0; width: 100%; display: none; }

.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 4px 8px; text-align: center; border-radius: 3px; }
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy.tipsy-on { top: 28.5px; left: 99px; display: block; visibility: visible; opacity: 0; padding:0 0 0 5px; }

.widget li.recentcomments { font-size: 12px; width: auto; position: relative; bottom: 100%; margin: 0 0 26px 0; padding: 12px; cursor: default; display: block; visibility: visible; text-align: left; text-decoration: none; text-shadow: none; line-height: 1.5; opacity: 1; z-index: 999; left: auto; transition: all 0.5s linear; }
.widget li.recentcomments:after { content: ""; position: absolute !important; bottom: -14px; z-index: 100; border-bottom: 14px solid transparent; width: 100%; border-left-width: 14px; left: 0; }
.widget li.recentcomments:before { content: ""; position: absolute !important; bottom: -14px; z-index: 100; }

/*-----------------------------------------------------------------------------------*/
/* *All Projects Page Styling
/*-----------------------------------------------------------------------------------*/

/* #Portfolio Filter */
.filterwrap { margin: 0; background: transparent !important; opacity: 1; padding: 10px; padding-bottom: 0; }

/* FILTER: White Background */
.filter li a {
	color: #999;
	text-decoration: none;
	margin-bottom: 1px;
	padding: 3px 6px;
	margin-right: 3px;
    background: #ffffff !important; 
    border: none !important;
}
ul.filter li { list-style: none; float: left; margin-right: 0px; margin-left: 0; }
ul.filter li:first-child { background: none; }
.filter li a:hover, .filter li a.active { text-decoration: none; background: #ffffff !important; color: #052F4A !important; font-weight: bold; } 
.filter { min-height: 12px; margin-bottom: 0; }
.filtersection { float:left; margin-bottom:20px; width:100%; background:#fff; }
.filtercontainer { margin-right: 20px; }

/* #Portfolio Thumbnails - [높이 고정형 수정 완료] */
.portfoliowrap { margin-left: 20px; }
.full .contentwrap { padding: 0; }

.blogpost.portfolio {
    margin-bottom: 0 !important;
    border-bottom: none;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* [핵심 수정 1] 제목(h4) 공간을 강제로 2줄 높이로 확보 */
.blogpost.portfolio h4 {
    line-height: 18px !important;   /* 줄 간격 */
    height: 36px !important;        /* 18px * 2줄 = 36px 높이 고정 */
    overflow: hidden !important;    /* 2줄 넘어가면 자름 */
    margin-bottom: 5px !important;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    padding-bottom: 0 !important;
    
    /* 텍스트가 길 경우 ... 처리 (옵션) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 제목 아래 숨은 p태그 삭제 */
.blogpost.portfolio p, .blogpost.portfolio p a {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.portfolioitem { background: #000 url(./images/expand.png) center no-repeat; }
.portfolioitem img { display: block; }

/* [핵심 수정 2] 박스 전체 높이를 280px로 강제 고정 */
.portfoliothumb {
    width: 222px;
    float: left;
    background: #fff;
    padding: 10px 10px 5px 10px !important;
    margin-bottom: 10px;
    margin-right: 10px;
    
    /* ★ 여기가 핵심입니다! 높이를 280px로 고정 ★ */
    height: 280px !important; 
    min-height: 280px !important;
    overflow: hidden !important; /* 넘치는 내용 숨김 */
}

.portfolioitem { position: relative; }
#portfoliocontainer { min-width: 500px; }

/* 이미지 정사각형 강제 */
.portfolio-item .thumb img, .project-item .thumb img, .post-thumb img, .portfolio-item img, .entry-content img {
    width: 100% !important; height: 300px !important; object-fit: cover !important; aspect-ratio: 1 / 1 !important;
}

/* #Portfolio Animations */
.isotope, .isotope .isotope-item { transition-duration: 0.8s; }
.isotope { transition-property: height, width; }
.isotope .isotope-item { transition-property: transform, opacity; }

/*-----------------------------------------------------------------------------------*/
/* *Portfolio Page Styling
/*-----------------------------------------------------------------------------------*/
a.toggleproject { background: url(images/plus.png) center no-repeat; width: 34px; height: 34px; text-indent: -999999px; display: inline-block; vertical-align: middle; margin-left: 30px; background-color: #000; background-color: rgba(0,0,0,.85); border-radius: 17px; position: relative; margin-top: 25px; }
a.toggleproject.minus { background-image: url(images/minus.png); background-position: center; background-repeat: no-repeat; }
.projectcontent { display: none; margin-left: 10px; z-index: 9999; position: relative; }
.videowrapper { height: 120%; left: 50%; margin-left: -60%; position: fixed; top: -10%; z-index: 0; padding-left: 220px; width: 100%; display: none; }
.lines, .linesmobile { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(images/skins/textures/dotpattern.png) repeat; z-index: 0; }
.page-template-template-home-video-php ul#slide-list { display:none; }
#myytplayer, #vimeoplayer { background: #000; }
.lines.vimeolines { z-index:2; background:none; }
.vimeo { width:100% !important; height:100%; background:#000; }
.videocontainer { width: 115%; height: 115%; margin-left: -5%; min-width: 780px; }
#controls-wrapper { left: 0; height: 110px; width: 160px; bottom: 0px; z-index: 999999; opacity: .85; }

/*-----------------------------------------------------------------------------------*/
/* *Page Styling
/*-----------------------------------------------------------------------------------*/
.namecontainer .pagename { margin-bottom: 20px; margin-top: 20px; margin-left: 15px; }
.namecontainer .pagename h2, .namecontainer .pagename h2 a { color: #fff; max-width: 600px; font-size: 40px; font-weight: bold; border-bottom: 0; line-height: 40px; color: white; margin-bottom:0; }
.namecontainer .pagename h2 span { background: #000; box-shadow: 15px 0 0 #000, -15px 0 0 #000; background: rgba(0,0,0,.5); box-shadow: 15px 0 0 rgba(0,0,0,.5), -15px 0 0 rgba(0,0,0,.5); padding: 8px 0; line-height:68px; }
.contentwrap { padding: 25px 25px 15px 25px; }
.content.pagebg, .pagebg { background: #fff; }
.content.pagebg.full { width: 100%; }

/*-----------------------------------------------------------------------------------*/
/* *Blog Styling & Comments
/*-----------------------------------------------------------------------------------*/
ul.smalldetails { margin-bottom: 10px; }
ul.smalldetails li { list-style: none; margin-bottom: 0; padding: 3px 6px 3px 9px; float: left; margin-right: 0px; margin-left: 0; background: url(./images/slash.png) left center no-repeat; background-position: 0% 50%; }
ul.smalldetails li:first-child { background: none; padding-left: 0; }
h5.tags { margin-bottom: 20px; font-weight: normal; color: #666; margin-top:20px; }
p.tags, p.tags a { font-size: 12px; color: #999; }
p.tags { color:#777; }
.edit-post { float: right; }
.categories { padding-bottom:15px; margin-top: -25px; }
.categories a { background: #ccc; padding: 4px 6px; color: #fff; font-size: 10px; margin-right:2px; }
.blogdate { width: 50px; height: 50px; border-radius: 25px; background: #333; display: inline-block; vertical-align: middle; margin-right: 10px; margin-bottom: 15px; }
.blogdate h3 { margin: 0; text-align: center; padding-top: 9px; line-height: 20px; font-size: 20px; }
.blogdate p { font-size: 10px; text-transform: uppercase; text-align: center; opacity: .5; }
.blogdate h3, .blogdate p, .blogdate h3 a, .blogdate p a { color: #fff; }
.blogpost h3.blogtitle { width: 299px; display: inline-block; vertical-align: middle; margin-bottom: 15px; }
.blogpost h3.blogtitle, .blogpost h3.blogtitle a { text-decoration: none; text-decoration: none; line-height: 30px; font-size: 33px; }
.blogpost .featuredimage { margin: 10px 0; }
p.smalldetails, p.smalldetails a { color: #ccc; text-decoration: none; }
#comments { width: 100%; }
#comments .contentwrap.comments-upper { padding-top: 1px; padding-bottom: 1px; }
.comment { width: auto; }
.singlecomment { padding: 15px 0; border: none; }
.listcomments { margin: 0; list-style: none; width: auto; padding-top: 15px; padding-bottom: 15px; }
.listcomments li { margin-bottom: 0; }
li.even .singlecomment, li.odd .singlecomment { position: relative; width: auto; }
.blockUI img { display:block; margin:auto; }
.commentsform { width: 100%; }
.commentsmetadata { font-size: 10px; color: #777; }
.name { font-size: 18px; margin: 0 0 10px; padding: 0 0 12px 0; border-bottom: 1px dotted #dcdcdc; }
.name a, .name { font-weight: bold; }
.name a:hover { text-decoration: none; }
.name strong { font-weight: normal; }
.listcomments .children .name { font-weight: bold; }
.listcomments .children { margin-left: 30px; margin-bottom: 0; margin-top: 0; }
.listcomments li { list-style-type: none; }
.listcomments .children .comment { margin: 0; padding: 0; background: none; }
#commentsubmit span { color: #c85849; }
#commentsubmit label { display:block; margin: 0 0 6px; font-size: 12px; text-transform: uppercase; }
#commentsubmit label.error{ display: block; margin-top: -15px; margin-bottom:10px; font-size: 10px; color: #c85849; }
#commentsubmit input[type=text].error, #commentsubmit textarea.error { border-color: #aa9794; }
#commentsubmit input[type=text], #commentsubmit textarea { padding: 10px; margin: 0 0 20px 0; border-width: 1px; border-style: solid; font-size: 12px; }
#commentsubmit input[type=text], #commentsubmit input[type=text]#url { width: 95%; }
#commentsubmit input[type=submit] { border: none; }
#commentsubmit textarea { width: 95%; }
.reply a { font-size: 12px; line-height: 11px; margin: 2px 6px 0 0; padding: 0 0 0 15px; float: right; }
#commentsubmit input:focus, #commentsubmit textarea:focus { border-style: solid; border-width: 1px; outline: 0; }
.gallery-title { font-size: 1.08em; text-transform: uppercase; }
a#cancel-comment-reply-link, .navigation-comments p a { padding: 5px 12px; background: #555; color: #fff; }
a#cancel-comment-reply-link { padding: 8px 6px; float: right; font-size: 10px; }

/* Social Icons */
.socialicons { width: 80px; float: right; margin-bottom: 10px; margin-top: 0px; }
.socialicons a { display: block; float: left; margin-left: 5px; text-indent: -999999px; width: 20px; height: 20px; }
.twitterlink { background: url(images/social.png) 0px -20px no-repeat; }
.twitterlink:hover { background: url(images/social.png) 0px 0px no-repeat; }
.fblink { background: url(images/social.png) -26px -20px no-repeat; }
.fblink:hover { background: url(images/social.png) -26px 0px no-repeat; }
.maillink { background: url(images/social.png) -52px -20px no-repeat; }
.maillink:hover { background: url(images/social.png) -52px 0px no-repeat; }

/* Contact Forms */
textarea { overflow: hidden; }
.contactsubmit span { color: #c85849; }
.contactsubmit select { font-family: Arial, Helvetica, sans-serif; }
.contactsubmit .formrow { height: 90px; }
.contactsubmit .messagerow { padding-bottom: 15px; }
.contactsubmit label { margin: 0 0 6px; display: block; font-size: 12px; text-transform: uppercase; }
.contactsubmit input[type=text], .contactsubmit textarea, .contactsubmit select { padding: 10px; margin: 0; border-width: 1px; border-style: solid; font-size: 12px; }
.contactsubmit input[type=text] { width: 90%; }
.contactsubmit select { width: 100%; }
.contactsubmit input[type=submit] { border: none; }
.contactsubmit textarea { width: 95%; }
.contactsubmit #submit { padding: 10px; margin: 0 0 20px 0; border: inherit; width: inherit; font-family: inherit; color: inherit; font-size: inherit; font-style: inherit; }
.contactsubmit input:focus, .contactsubmit textarea:focus { border-width: 1px; border-style: solid; outline: 0; }
.contactsubmit .radiobutton { margin-left: 10px; display: block; margin-right: 0; width: 100px; float: left; line-height: 30px; height: 45px; font-size: 12px; text-transform: none; }
.contactsubmit input[type="radio"] { font-size: 12px; display: inline; float: left; width: 15px; margin: 0; margin-top: 8px; margin-right: 5px; }
.contactsubmit label.error, .contactsubmit p.error { font-size: 12px; color: #c85849; text-transform: none; }
p.loading { display: none; }
.emailsuccess { background: #F3F3F3; margin-bottom: 30px; color: #63AE39; background: #E6F9DC; border: 1px solid #81CE56; padding: 20px; box-shadow: 0 1px 2px #F0F0F0; text-shadow: 0 1px 0 white; }
.emailsuccess h4 { margin-bottom:10px; color: #407c1f; }
.emailsuccess p { margin:0; color: #63AE39; }
.emailfail { margin-bottom: 30px; background: #F9E6DC; border: 1px solid #CE8156; padding: 20px; box-shadow: 0 1px 2px #F0F0F0; text-shadow: 0 1px 0 white; }
.emailfail h4, .emailfail p { color:#7C481F; margin:0; margin-bottom:10px; }
.emailfail p { margin:0; }

/* Pagination */
.pagination_container { padding: 20px; }
.older { float: left; }
.newer { float: right; margin-right: 275px; }
#pagination { height: 30px; position: relative; margin:0 }
#pagination li { border: 0 none; font-size: 11px; list-style: none outside none; margin: 0 2px 0 0; padding: 0; display: inline; }
#pagination a { margin-right: 5px; font-size: 10px; font-weight: bold; }
#pagination .previous-off, #pagination .next-off { display: none; }
#pagination .next a, #pagination .previous a { font-weight: bold; }
#pagination .active { display: block; float: left; font-weight: bold; margin-right: 5px; padding: 6px 10px 7px 10px; }
#pagination a:link, #pagination a:visited { display: block; float: left; padding: 6px 10px 7px 10px; text-decoration: none; }
#pagination a:hover { border: 0 none; display: block; float: left; font-weight: bold; padding: 6px 10px 7px 10px; }
#infscr-loading { display: block; position: fixed; background: white; background: rgba(255, 255, 255, .95); padding: 10px; bottom: 0px; width:168px; left: 50%; text-align:center; border:1px solid #dcdcdc; box-shadow:0 0 10px rgba(0,0,0,.1); }
#nextpost a.button { color:#000; background:#fff; }
#nextpost a.button:hover { color:#fff; }

/* Widgets */
.widgetinner { padding-bottom: 20px; }
.widget a { text-decoration: none; }
.widget h3, .widget h2, .widget h4 { margin: 0; padding: 0; font-size: 10px; font-weight: normal; line-height: 18px; margin-bottom: 16px; transition: all 0.3s ease 0s; letter-spacing: 2px; text-transform: uppercase; text-shadow: none; }
.widget ul.children { margin: 0; margin-left: 20px; }
.ag_twitter_widget .widget-title { margin-bottom: 5px; }
#twitter_div { font-size: 12px; line-height: 24px; }
#twitter_div ul li a { padding: 0; }
#footer #twitter_div ul li a { color: #fff; }
#twitter_div span { display: block; }
#footer #twitter_div span { color: #999; }
ul#twitter_update_list { padding: 0; margin: 0; }
ul#twitter_update_list li { padding: 10px 0 10px 25px; list-style: none; overflow: hidden; margin: 0; }
#footer ul#twitter_update_list li { background: url(images/quote-footer.png) 0 15px no-repeat; }
.newspost.columns { margin-bottom: 20px; }
.widget h4.posttitle, .widget .newspost h4 { font-size: 12px; font-weight: bold; letter-spacing: normal; text-transform: none; line-height: 16px; margin-bottom: 10px; }
h4.widget-title { margin-bottom:10px; }
.news-widget-item { margin-bottom: 40px; }
.news-widget-item h5, .news-widget-item h5 a { font-size: 10px; font-weight: normal; }
.widget_pages ul.children { margin-left: 0; margin-top: 10px; }
.widget_pages ul.children li { padding-bottom: 0; border-bottom: none; }
ul li a.rsswidget { font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; }
a.rsswidget img { vertical-align: middle; margin-right: 10px; }
span.rss-date { display: block; margin-bottom: 10px; font-size: 10px; font-weight: bold; }
.rssSummary { margin-bottom: 10px; }
.widget ul ul { margin: 0; font-size: 100%; }
#wp-calendar caption { width: 100%; text-align: center; padding: 7px 2px; margin-bottom: 7px; font-size: 10px; }
#wp-calendar { border-collapse: collapse; width: 100%; text-align: center; }
#wp-calendar thead th { font-weight: bold; }
#wp-calendar tbody td { padding: 5px 0; }
#wp-calendar #today { color: #000; }
#wp-calendar a { padding: 2px 0; font-weight: bold; }
#wp-calendar tfoot td { padding: 3px 0; }
#wp-calendar #next { text-align: right; padding-right: 10px; }
#calendar_wrap { display: block; width: 100%; padding: 0 1px 1px 0; }
.ag_projects_widget .hover { margin-bottom: 10px; }
.ag_projects_widget h3 a, .ag_projects_widget h3 { font-size: 13px; font-weight: bold; text-transform: none; letter-spacing: normal; margin-bottom: 10px; }
.recent-project { float: left; margin-right: 10px; margin-bottom: 10px; border-style: solid; border-width: 3px; line-height: 0; transition: all 0.3s ease 0s; width:45px; height:45px; }
.ag_recentprojects_widget .contentwrap { padding-right:10px; }
.recent-project a.hover { background: none; display: block; }
.sidebar .widget_nav_menu ul, .widget_rss ul, .widget_recent_entries ul { border-top-width: 1px; border-top-style: solid; list-style-type: none; margin: 20px 0 30px; padding: 0; width: 100%; }
.sidebar .widget_nav_menu ul ul, .widget_rss ul ul, .widget_recent_entries ul ul, .widget_recent_comments ul ul { border-top-width: 1px; border-top-style: solid; list-style-type: none; margin: 10px 0 30px; padding: 0; width: 100%; }
.sidebar .widget_nav_menu ul li, .widget_rss ul li, .widget_recent_entries ul li { border-bottom-width: 1px; border-bottom-style: solid; padding: 10px 0; width: auto; }
.sidebar .widget_nav_menu ul li a, .widget_rss ul li a, .widget_recent_entries ul li a, .widget_recent_comments ul li a { padding: 0; }
.sidebar .widget ul li a { padding: 0; }
.sidebar ul li, .sidebar ul { margin:0; list-style:none; }
#searchbox { margin-bottom: 10px; }

/* Top Scroll */
.top { position: fixed; bottom: 0; right: 20px; display: none; cursor: pointer; z-index: 9999; width: 36px; height: 36px; box-shadow: 0 0 10px rgba(0,0,0,.25); }
.top a { text-decoration: none; float: left; display: block; padding-right: 10px; }
.top .scroll { visibility: hidden; float: left; display: block; opacity: 0; padding-top: 10px; transition: all 0.2s linear; }
.top a:hover .scroll p, .top a:hover .scroll, .top:hover .scroll { display: block; float: left; text-align: center; text-decoration: none; visibility: visible; opacity: .95; transition: all 0.2s linear; }

/* Shortcodes */
.one_half { width: 48%; }
.one_third { width: 30.66%; }
.two_third { width: 65.33%; }
.one_fourth { width: 22%; }
.three_fourth { width: 74%; }
.one_fifth { width: 16.8%; }
.two_fifth { width: 37.6%; }
.three_fifth { width: 58.4%; }
.four_fifth { width: 79.2% }
.one_sixth { width: 13.33%; }
.five_sixth { width: 82.67%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { margin-right: 4%; margin-bottom: 10px; float: left; }
#top_panel .one_half, #top_panel .one_third, #top_panel .two_third, #top_panel .three_fourth, #top_panel .one_fourth, #top_panel .one_fifth, #top_panel .two_fifth, #top_panel .three_fifth, #top_panel .four_fifth, #top_panel .one_sixth, #top_panel .five_sixth { margin-right: 3%; margin-bottom: 0; }
.column-last { margin-right: 0!important; clear: right; }
ul.tabs { display: block; margin: 0 0 20px 0; padding: 0; border-bottom-style: solid; border-bottom-width: 1px; }
ul.tabs li { display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0; margin-left: 0; list-style-type: none; }
ul.tabs li a { display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 20px; line-height: 30px; border-style: solid; border-width: 1px 1px 0 0; margin: 0; font-size: 13px; background:#f8f8f8; }
ul.tabs li a.active { height: 30px; position: relative; top: -4px; padding-top: 4px; border-left-width: 1px; margin: 0 0 0 -1px; border-bottom: none; background:#fff; }
ul.tabs li:first-child a.active { margin-left: 0; }
ul.tabs li:first-child a { border-width: 1px 1px 0 1px; }
ul.tabs-content { margin: 0; display: block; }
ul.tabs-content br { display: none; }
ul.tabs-content li br { display: inline; }
ul.tabs-content > li { display: none; margin-left: 0; list-style-type: none; }
ul.tabs-content > li.active { display: block; }
ul.tabs:before, ul.tabs:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
ul.tabs:after { clear: both; }
ul.tabs { zoom: 1; }
ul li { list-style-type: square; margin-left: 15px; }
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
.aligncenter { text-align: center; }

/* Sliders */
.wmuSlider { display:none; }
.wmuSliderWrapper { overflow: hidden; }
.wmuSlider { width: 100%; height: auto; position: relative; overflow: hidden; }
.wmuSlider img { position: relative; z-index: 1; display: block; }
.wmuSlider span { display: block; overflow: hidden; }
.wmuSliderPrev, .wmuSliderNext { position: absolute; width: 40px; height: 80px; text-indent: -9999px; top: 50%; margin-top: -40px; z-index: 2; cursor: pointer; opacity: .5; }
.wmuSliderPrev { background: url('./images/prev-button-white.png') center no-repeat; left: 8px; }
.wmuSliderNext { right: 8px; background: url('./images/next-button-white.png') center no-repeat; }
.wmuSliderPagination { z-index: 2; position: absolute; right: 10px; top: 10px; }
.wmuSliderPagination li { float: left; margin: 0 5px 0 0; list-style-type: none; }
.wmuSliderPagination a { display: block; text-indent: -9999px; width: 10px; height: 10px; background: url(./images/slider-sprite.png) no-repeat 0 -80px; opacity: 0.7 !important; }
.wmuSliderPagination a.wmuActive { background-position: -10px -80px; }
.wmuSlider .wmuLoading { position: absolute; width: 200px; text-align: center; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -100px; z-index: 0; }
.wmuSlider:hover .wmuSliderNext, .wmuSlider:hover .wmuSliderPrev { opacity: 0.7 !important; }

/* Supersized Background */
ul#supersized li { margin: 0; padding: 0; }
img { border: none; }
#supersized-loader { position: fixed; right: 15px; bottom: 15px; z-index: -2; width: 60px; height: 60px; text-indent: -999em; background: #000 url(./images/loading-dark.gif) no-repeat center center; }
#supersized li { background-image: url(./images/loading-dark.gif) !important; background-position:center !important; background-repeat:no-repeat !important; }
.home #supersized-loader, .single-portfolio #supersized-loader { position:absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; }
#supersized { display: block; position: static; left: 0; top: 0; overflow: visible; z-index: -999; height: 100%; width: 100%; margin:0; }
#supersized img { width: auto; height: auto; position: relative; display: none; outline: none; border: none; transition: top 0s; }
#supersized img.resize { transition: .5s; }
#controls { overflow: hidden; height: 100%; text-align: left; z-index: 9; }
#supersized.speed img { -ms-interpolation-mode: nearest-neighbor; image-rendering: -moz-crisp-edges; }
#supersized.quality img { -ms-interpolation-mode: bicubic; image-rendering: optimizeQuality; }
#supersized li { display: block; list-style: none; z-index: -30; position: absolute; overflow: visible; top: 0; left: 0; width: 100%; height: 100%; }
#supersized li { background: #111; }
#supersized a { width: 100%; height: 100%; display: block; position: fixed; background-color:#111; }
#supersized li.prevslide { z-index: -20; }
#supersized li.activeslide { z-index: -10; }
#supersized li.image-loading { background: #111 url(./images/loading-dark.gif) no-repeat center center; width: 100%; height: 100%; }
#supersized li.image-loading img { visibility: hidden; }
#supersized li.prevslide img, #supersized li.activeslide img { display: inline; }

#controls-wrapper { height: 110px; width: 160px; bottom: 0px; width: 160px; z-index: 999999; opacity: .85; }
#slidecounter { color: #999; font-size: 12px; text-align: center; line-height: 32px; position: absolute; bottom: 58px; left: 55px; }
.playcontrols { width: 92px; height: 40px; margin: 0 auto; }
#navigation { float: right; margin: 0px 20px 0 0; }
#play-button, #play-video { float: left; margin-top: 1px; cursor: pointer; opacity: .5; position: absolute; bottom: 53px; left: 90px; }
#play-video { background: url(./images/pause-button.png) top center no-repeat; display: block; width: 34px; height: 34px; text-indent: -999999px; }
#play-video.play { background: url(./images/play-button.png) top center no-repeat; }
#prevslide, #nextslide { float: left; height: 24px; width: 24px; opacity: .75; margin-top: 6px; }
#prevslide { background: url('./images/prev-button-white.png') center no-repeat; display: block; position: fixed; margin: -40px 0 0 0 !important; left: 245px; top: 50%; width: 65px; height: 80px; }
#prevslide.fullopen { display: none !important; }
#nextslide { background: url('./images/next-button-white.png') center no-repeat; position: fixed; right: 20px; margin: -40px 0 0 0 !important; top: 50%; width: 65px; height: 80px; }
#prevslide:active, #nextslide:active { margin-top: 2px; }
#prevslide:hover, #nextslide:hover { cursor: pointer; }

ul#slide-list { padding: 8px 0; float: left; position: fixed; top: 15px; right: 15px; z-index: 999; }
ul#slide-list li { list-style: none; width: 12px; height: 12px; float: left; margin: 0 5px 0 0; }
ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover { background-position: 0 0px; }
ul#slide-list li a { display: block; width: 12px; height: 12px; background: url('./images/nav-dot.png') no-repeat 0 -24px; transition: none; }
ul#slide-list li a:hover { background-position: 0 -12px; cursor: pointer; }
#tray-button { width: 22px; position: absolute; bottom: 68px; left: 135px; opacity: .5; }
#tray-button:hover { cursor: pointer; }
#thumb-tray { position: fixed; z-index: 3; bottom: 0; background: url(./images/bg-black.png); height: 108px; width: 100%; overflow: hidden; text-align: center; display:none; }
#thumb-back, #thumb-forward { position: absolute; z-index: 5; bottom: 42px; height: 108px; width: 40px; top: 50%; margin-top: -55px; }
#thumb-back { left: 0; background: url('./images/thumb-back.png') no-repeat center center; }
#thumb-forward { right: 0; background: url('./images/thumb-forward.png') no-repeat center center; }
#thumb-back:hover, #thumb-forward:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.1); }
#thumb-back:hover { border-right: 1px solid rgba(255, 255, 255, 0.2); }
#thumb-forward:hover { border-left: 1px solid rgba(255, 255, 255, 0.2); }
ul#thumb-list { display: inline-block; list-style: none; position: relative; left: 0px; padding: 0 0px; }
ul#thumb-list li { background: #111; list-style: none; display: inline; width: 150px; height: 108px; overflow: hidden; float: left; margin: 0; }
ul#thumb-list li img { width: 200px; height: auto; opacity: 0.5; filter: alpha(opacity=60); }
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img { opacity: 1; filter: alpha(opacity=100); }
ul#thumb-list li:hover { cursor: pointer; }

#nextthumb, #prevthumb { z-index: 2; display: none; position: fixed; bottom: 61px; height: 75px; width: 100px; overflow: hidden; background: #ddd; border: 1px solid #fff; -webkit-box-shadow: 0 0 5px #000; }
#nextthumb { right: 12px; }
#prevthumb { left: 12px; }
#nextthumb img, #prevthumb img { width: 150px; height: auto; }
#nextthumb:hover, #prevthumb:hover { cursor: pointer; }
#progress-back { z-index: 5; position: fixed; bottom: 0px; left: 0; height: 3px; width: 100%; background: url('./images/progress-back.png') repeat-x; }
#progress-bar { position: relative; height: 3px; width: 100%; background: url('./images/progress-bar.png') repeat-x; }

.no-boxshadow #slidecaption .Dark h2, .no-boxshadow #slidecaption .Dark span, .no-boxshadow #slidecaption .Black.Dark h2, .no-boxshadow #slidecaption .Black.Dark span, .no-boxshadow .namecontainer .pagename h2 span { background-color:transparent; background:url(images/black-40.png) repeat; }
.no-boxshadow #slidecaption .Light h2, .no-boxshadow #slidecaption .Light span, .no-boxshadow #slidecaption .White.Light h2, .no-boxshadow #slidecaption .White.Light span, .no-boxshadow #homevideocaption .Light h2 { background-color:transparent; background:url(images/white-40.png) repeat; }
.no-boxshadow #slidecaption .Light.Left .bgwrap, .no-boxshadow #slidecaption .Dark.Left .bgwrap, .no-boxshadow #slidecaption .Light.Right .bgwrap, .no-boxshadow #slidecaption .Dark.Right .bgwrap { line-height: 1.0; padding: 4px 0 5px 0; }
.no-boxshadow #slidecaption .Light.Left h1, .no-boxshadow #slidecaption .Dark.Left h1, .no-boxshadow #slidecaption .Light.Right h1, .no-boxshadow #slidecaption .Dark.Right h1 { display: inline; margin: 0; }
.no-boxshadow #slidecaption .Left.Dark .button, .no-boxshadow #slidecaption .Left.Light .button, .no-boxshadow #slidecaption .Right.Dark .button, .no-boxshadow #slidecaption .Right.Light .button, .no-boxshadow #homevideocaption .Right.Light .button { margin:20px 0 0 0; }
.no-boxshadow .namecontainer { margin-left:5px; }

/* Media Queries */
@media only screen and (min-width: 768px) and (max-width: 940px) {
.three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { width: 100%; }
.smallpage, .projectcontent, #comments, .largepage { width: 465px; margin-right: 0; }
.sidebar, .smallpage, .largepage { margin-bottom: 0; }
.divider.full, .smallpage .divider.full, .sidebar .divider.full { width: 445px; }
.divider.full.sidetop { display:block; }
.sidebar { width: 465px; margin-left:0; }
#slidecaption .Right, #slidecaption .Left, #slidecaption .Top.Right, #slidecaption .Top.Left, #slidecaption .Bottom.Right, #slidecaption .Bottom.Left, #slidecaption .Center { width: 400px; }
#homevideocaption .Right.Bottom { width: 400px; }
#slidecaption .Center { margin-left: -200px; }
#slidecaption h2, #homevideocaption h2 { font-size: 44px !important; }
}

@media only screen and (max-width: 767px) {
.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important; }
.pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
a.pp_close { right: 10px!important; top: 10px!important; }
.mobileonly { display:block !important; }
.mobilenavcontainer h1, .mobilenavcontainer h1 a { text-align: center; }
.home #top_panel { position: absolute; }
#top_panel { display: block; }
.logo, .navigation { display: none; }
.logo { margin: auto; }
.navcontainer { position: static !important; padding: 0 !important; }
.navhandle { display: none; }
.namecontainer { width: 280px; margin: 0 auto; background: #222; padding: 20px; }
.namecontainer .pagename, .container { margin: 0 auto; }
.namecontainer .pagename h2, .namecontainer .pagename h2 a { font-size: 24px; line-height: 26px; }
.namecontainer .pagename h2 span { background: none; box-shadow: none; -webkit-box-shadow: none; line-height: 24px; }
.page-template-template-home-video-php .namecontainer .pagename { text-align:center; }
.contentarea { position: static; width: auto; margin: auto; }
.smallpage, .largepage, #nextpost { width: 320px; float: none; margin: auto; }
.playcontrols { width: 320px; }
.sidebar { margin-bottom: 0; float: none; margin: auto; }
.divider.full { width: 300px !important; }
.divider.full.sidetop { display:block; }
.commentsform { width: 97%; }
ul.tabs li a { font-size:10px; }
.projectcontent { width: 100%; margin: 0; display: block !important; }
#infscr-loading { margin-left: -83px; }
.wmuSlider { display: block !important; min-height: 200px; width: 320px; float: none; margin: auto; background: #222; }
.wmuSlider span { width: 320px !important; }
.portfoliowrap { margin: 0; }
.content.pagebg.full, .filtersection { width: 320px; }
.filtersection { float:none; margin:auto; }
.filterwrap { padding-top: 15px; margin-bottom: 10px; padding-bottom: 3px; margin-top: 10px; }
ul.filter li a { color: #333; text-decoration: none; margin-bottom: 1px; background: #f3f3f3; padding: 8px 15px; text-decoration: none; margin-right: 0px; margin-bottom: 3px !important; }
.blogpost h3.blogtitle, .blogpost h3.blogtitle a { width: 205px; line-height: 22px; font-size: 22px; }
.home .linesmobile { display:block; }
.lines, .linesmobile { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(images/skins/textures/dotpattern.png) repeat; z-index: 0; }
.toggleproject, .tipsy, .playcontrols, #progress-back, .lines, #supersized-loader, #play-button, #videocaption, #homevideocaption { display: none !important; }
.page-template-template-home-video-php .mainbody { height:auto; }
body { background-color: #e3e3e3; }
#supersized-loader { top: 50%; left: 50%; margin: -30px 0 0 -30px; }
#controls-wrapper { display: none; }
#supersized, #supersized li { visibility: hidden !important; overflow: hidden; }
#supersized, #supersized li { position: fixed; }
#supersized img { position: relative; }
.page-template-template-home-php ul#slide-list, ul#slide-list { display: none !important; }
.home #supersized, .home #supersized li, .home .playcontrols, .home #progress-back, #supersized-loader { display: block !important; visibility: visible !important; }
.home #play-button { display:block !important; height:100%; width:100%; position: fixed; }
.home #pauseplay { display:none; }
.home .playcontrols { position:fixed; }
body.home { background-color: #000; }
#progress-back, #progress-bar { height: 2px; margin: 0; padding: 0; }
.bottomfade { display: block; }
.home #controls-wrapper { position: absolute; top: 50% !important; margin-top: -40px; z-index: 99; display: block !important; }
.subheadline { margin-bottom: 5px; }
#slidecaption span { font-size: 12px !important; }
#slidecaption .Right, #slidecaption .Top.Right, #slidecaption .Bottom.Right, #slidecaption .Left, #slidecaption .Top.Left, #slidecaption .Bottom.Left, #slidecaption .Center { top: auto !important; bottom: 10px !important; right: auto; width: 400px; left: 50%; margin-left: -200px; text-align: left; line-height: 24px; }
#slidecaption .Dark h2, #slidecaption .Dark span, #slidecaption .Light h2, #slidecaption .Light span, #slidecaption .Black h2, #slidecaption .Black span, #slidecaption .White h2, #slidecaption .White span { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; color: #fff !important; line-height: 100%; }
#slidecaption span { line-height: 100% !important; }
#slidecaption h2 { font-size: 30px !important; }
#slidecaption .Left.Dark .button, #slidecaption .Left.Light .button { margin-left: 0; }
#slidecaption .Light span, #slidecaption .Dark span, #slidecaption .Black.Dark span, #slidecaption .White.Dark span { line-height: 12px; padding: 0; }
#slidecaption .Dark .subheadline, #slidecaption .Light .subheadline, #slidecaption .subheadline { margin-bottom: 5px; line-height: 11px; font-size: 11px; }
.videowrapper { position: relative; width: 480px !important; height: 270px; padding-left: 0 !important; top: auto; z-index: 999; margin: auto; left: auto; top: auto; }
#myytplayer, #iframeplayer, .videoslide span { width: 100% !important; padding-left: 0; margin-left: 0; height: 270px; }
.wmuSlider.videoslide { min-height: 1px; }
.playvideocontrols { display: none; }
.page-template-template-home-video-php a.button { margin-top: 0; padding: 20px; display: block; text-align: center; }
#nextslide { float: right; }
#nextslide, #prevslide { width: 20px; height: 36px; }
#prevslide { width: 75px; left: 10px !important; background: url('./images/prev-button-white.png') left no-repeat; }
#nextslide { width: 75px; right: 10px !important; background: url('./images/next-button-white.png') right no-repeat; }
#yt-container { background: #000; position: static; }
#mutecontrols { top: -42px; left: 50%; width: 34px; height: 34px; position: absolute; }
#yt-container { margin-left: 0; }
.mainbody { margin-left: 0 !important; }
#thumb-tray { display: none !important; }
.namecontainer.singleproject { position: static !important; }
.single-portfolio .navcontainer .logo, .single-portfolio .navcontainer .navigation { display: none; }
#controls-wrapper { position: absolute; display: none !important; }
#slidecounter, ul#slide-list, #tray-button { display: none; }
.contentwrap.full { margin: 0; }
.mobilelogo { display: block; width: 275px; margin: auto; }
.fulllogo { display: none; }
.navcontainer { position: absolute; width: 100%; height: auto; padding: 20px 0; }
.mobilenavcontainer { z-index: 99999; }
#portfoliocontainer { width: 320px; min-width: 320px; margin: auto; }
.portfoliothumb { margin-right: 0; width: 300px; }
.top { display: none !important; }
h2 { font-size: 28px; line-height: 32px; }
.recent-project { width: 41px; height: 41px; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { width: 100%; }
select.dropdownmenu { display: block; width: 280px; margin: auto; position: relative; z-index: 999; margin-bottom: 10px; }
.nav { display: none; }
.mobilenavcontainer h1, .mobilenavcontainer h1 a { padding: 20px 0; }
h1 a.mobilelogo { text-align: center; padding: 0 !important; margin: 10px 0; }
.mobiledetails { display: inline; }
.fulldetails { display: none; }
.blogpost h3.blogtitle, .blogpost h3.blogtitle a { margin-bottom: 10px; }
.wmuSliderPrev, .wmuSliderNext { -moz-opacity: .5; filter: alpha(opacity=50); opacity: .5; }
.widget h4.posttitle, .widget .newspost h4 { font-size: 16px; line-height: 18px; margin-bottom: 10px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.namecontainer { width: 430px; padding: 25px; }
.smallpage, .sidebar, .playcontrols, .largepage, #nextpost { width: 480px; }
.divider.full { width: 460px !important; }
.commentsform { width: 97%; }
.wmuSlider { min-height: 200px; width: 480px; }
.wmuSlider span { width: 480px !important; }
#captioncontainer, #videocaptioncontainer { width: 375px; }
select.dropdownmenu { display: block; width: 460px; }
.mobilenavigation { width: 480px; }
#jump { width:460px; }
.container .item, .container .postphoto { width: 210px; height: 155px; }
.top { display: none; }
.recent-project { width: 54px; height: 54px; }
#portfoliocontainer { width: 500px; min-width: 500px; margin: auto; left: 50%; margin-left: -240px; }
.portfoliothumb { margin-right: 10px; width: 215px; }
.namecontainer.full { width: 400px; }
.content.pagebg.full, .filtersection { width: 480px; }
#projectsback { display: block; z-index: 999; position: absolute; top: 0; left: 50%; margin-left: -210px; }
.blogpost h3.blogtitle, .blogpost h3.blogtitle a { width: 365px; line-height: 25px; font-size: 25px; }
}

@media only screen and (max-width: 479px) {
.namecontainer { width: 270px; padding: 25px; }
.smallpage, .largepage, #nextpost { width: 320px; }
.divider.full { width: 280px; }
.commentsform { width: 97%; }
.wmuSlider { min-height: 200px; width: 320px; }
.wmuSlider span { width: 320px !important; }
#captioncontainer, #videocaptioncontainer { width: 275px; }
.sidebar { width: 320px; }
.mobilenavigation { width: 320px; }
#jump { width:300px; }
#slidecaption .Right, #slidecaption .Top.Right, #slidecaption .Left, #slidecaption .Top.Left, #slidecaption .Bottom.Right, #slidecaption .Bottom.Left, #slidecaption .Center { top: auto; bottom: 20px !important; right: auto; width: 275px; left: 50%; margin-left: -137px; text-align: left; line-height: 24px; }
#myytplayer, .videowrapper, #iframeplayer, .videoslide span { position: relative; width: 320px !important; height: 180px; }
}

/* ==========================================================================
   ARTFORUM RHEE - FINAL MASTER CSS (2025-12-30 INTEGRATED)
   ========================================================================== */

/* [1] PC SIDEBAR MENU */
.navcontainer { background-color: #052F4A !important; }
.navcontainer, .navcontainer a, .navcontainer ul li a { 
    color: #ffffff !important; 
    text-decoration: none; 
    font-size: 15px !important;   /* 글자 크기 (원하는 숫자로 조절) */
    line-height: 2.0 !important;  /* 메뉴 사이 간격 (숫자가 클수록 넓어짐) */
    font-weight: normal !important; /* 굵게 하고 싶으면 bold 로 변경 */
}
.navcontainer a:hover { color: #F54927 !important; }
.navcontainer ul li.current-menu-item a { color: #05DF72 !important; font-weight: bold; }

/* [2] SLIDER CONTROLS (White color forced) */
body #slidecounter, body #controls img, body #prevslide, body #nextslide { 
    color: #ffffff !important; 
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}
body #slide-list li { 
    background-color: rgba(255, 255, 255, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.7) !important; 
    border-radius: 50% !important;
}
body #slide-list li.current-slide { background-color: #ffffff !important; }

/* [3] MOBILE MENU DESIGN */
.mobilenavcontainer, #top_panel { background-color: #052F4A !important; }

/* 'Select a Page' & 'Hide Navigation' */
#jump, #mobilenav #back a {
    display: block; 
    background-color: #052F4A !important;
    color: #ffffff !important;
    padding-top: 15px !important;      
    padding-bottom: 15px !important; 
    line-height: 1.2 !important;        
    font-weight: bold !important;
    border-bottom: 1px solid #10598A;
    text-align: left;
    text-decoration: none !important;
}

/* Menu Items */
#mobilenav li a {
    color: #dddddd !important;
    background-color: #052F4A !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    line-height: 1.2 !important;
    border-bottom: 1px solid #024A70 !important;
    display: block;
    text-decoration: none !important;
}

#mobilenav { display: none; }

/* Arrow Icons (White) */
#jump:after, #mobilenav #back a:after, #mobilenav li a:after {
    color: #ffffff !important;
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    border-right-color: #ffffff !important;
    border-left-color: #ffffff !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* [4] LOGO SETTINGS */
.mobilelogo, .mobilelogo h1 {
    width: 100% !important;
    text-align: center !important;
}
.mobilelogo img {
    width: 300px !important;  
    max-width: 80% !important; 
    height: auto !important;
    margin: 0 auto !important;
    display: inline-block !important;
}
.navcontainer .logo {
    width: 100% !important;
    padding: 20px !important;
}
.navcontainer .logo img {
    width: 480px !important; 
    height: auto !important;
    max-width: 100% !important;
} 

/* [5] CURRENT PAGE HIGHLIGHT (Green) */
#top_panel #mobilenav li.current-menu-item a, 
#top_panel #mobilenav li.current_page_item a {
    color: #05DF72 !important;        
    font-weight: bold !important;      
}
#top_panel #mobilenav li.current-menu-item a:hover,
#top_panel #mobilenav li.current_page_item a:hover {
    color: #05DF72 !important;
}


/* ==========================================================================
   PORTFOLIO FILTER: White Background
   ========================================================================== */

/* 1. Remove Loading Screen */
#preloaded-images, 
#supersized-loader,
.loading, 
.loader {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}
/* Force White Background on Mobile */
@media only screen and (max-width: 767px) {
    body, html, #wrapper, body.home {
        background-color: #ffffff !important;
    }
}

/* [수정 6] 이미지 비율 정사각형(1:1) - 안정형 */
.portfolio-item .thumb img, 
.project-item .thumb img, 
.post-thumb img,
.portfolio-item img,
.entry-content img {
    width: 100% !important;
    height: auto !important;        /* 높이 자동 */
    aspect-ratio: 1 / 1 !important; /* 정사각형 비율 강제 */
    object-fit: cover !important;   /* 찌그러짐 방지 */
}
/* 3. Filter Box Style */
#filters, .filter-wrapper {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
}

/* Filter Buttons (Default White) */
#filters ul li a,
.filter li a,
ul#options li a {
    background-color: #ffffff !important; 
    color: #333333 !important;
    border: none !important;              
    border-radius: 4px !important;
    padding: 8px 15px !important;
    margin: 3px !important;
    font-weight: normal !important;
}

/* Filter Buttons (Active/Hover Navy) */
#filters ul li a.active, 
#filters ul li a:hover,
.filter li a.active,
.filter li a:hover {
    background-color: #052F4A !important; 
    color: #ffffff !important;            
    border-color: #052F4A !important;
    text-decoration: none !important;
}

/* 4. Data Box Background White */
.portfolio-item, .project-item {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}
.project-details, .portfolio-item .meta {
    background-color: #ffffff !important;
}

/* 5. Font Size Increase (Optional) */
body, p, ul, li, .blogpost p {
    font-size: 15px !important;
    line-height: 1.6 !important;
}
/* ==========================================================================
   [2026-01-03 최종 업데이트] 간격 조정 + 필터/사진/모바일 완벽 정리
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. [필터 박스] 디자인 + 아래 간격 띄우기 (PC 수정)
   -------------------------------------------------------------------------- */
.filterwrap {
    background: #ffffff !important;       
    border: 1px solid #555555 !important; /* 진한 회색 테두리 */
    padding: 10px 15px !important;        
    box-shadow: none !important;
    text-align: left !important;
    line-height: 1.2 !important;
    
    /* ★ [추가] 필터 박스와 아래 사진 사이 간격을 40px로 시원하게 벌림 */
    margin-bottom: 40px !important;       
}

/* 내부 박스 테두리 제거 */
.filtersection {
    border: none !important;        
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* 필터 항목 간격 */
ul.filter li, .filter li {
    float: left !important;
    margin: 0 2px 2px 0 !important;       
    padding: 0 !important;
    list-style: none !important;
}

/* 필터 글자 스타일 */
.filter li a {
    color: #333333 !important;
    background: transparent !important;  
    border: none !important;
    font-weight: bold !important;
    padding: 2px 6px !important;         
    font-size: 13px !important;
    letter-spacing: -0.5px !important;
    border-radius: 2px !important;        
    transition: all 0.2s ease !important;
}

/* 마우스 호버/활성 효과 (남색) */
.filter li a:hover, 
.filter li a.active,
.filter li.active a {
    background-color: #052F4A !important; 
    color: #ffffff !important;            
    text-decoration: none !important;
}


/* --------------------------------------------------------------------------
   2. [PC] 사진 박스 & 텍스트 설정 (기존 유지)
   -------------------------------------------------------------------------- */
.portfoliothumb { 
    width: 220px !important;       
    height: auto !important;       /* 텍스트 보이게 높이 자동 */
    min-height: 0 !important;      /* ★ 여기가 범인이었습니다! 0으로 수정완료 ★ */
    float: left !important; 
    margin-right: 15px !important; 
    margin-bottom: 20px !important; 
    
    background: #ffffff !important;       
    border: 1px solid #333333 !important; 
    padding: 10px !important; 
    box-sizing: border-box !important;
    overflow: visible !important;  
}

/* 이미지 틀 */
.portfoliothumb .thumb,
.portfolio-item .thumb {
    width: 100% !important;
    height: 200px !important;      
    display: block !important;
    margin-bottom: 15px !important; 
}

/* 이미지 정사각형 강제 */
.portfolio-item .thumb img, 
.portfoliothumb img {
    width: 100% !important;
    height: 200px !important;      
    min-height: 200px !important;
    object-fit: cover !important;  
    aspect-ratio: 1 / 1 !important;
}


/* --------------------------------------------------------------------------
   3. [PC] 제목 박스 위치 (왼쪽 밀착 / 기존 유지)
   -------------------------------------------------------------------------- */
.namecontainer {
    transform: translateX(-25px) !important;
    width: 110% !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.namecontainer .pagename h2 {
    background: transparent !important; 
    border: none !important; margin: 0 !important; padding: 0 !important;
}
.namecontainer .pagename h2 span {
    background: rgba(5, 47, 74, 0.7) !important; 
    color: #ffffff !important;
    padding: 12px 25px !important;
    display: inline-block !important;
}


/* --------------------------------------------------------------------------
   4. [모바일 전용] 최종 설정 (중앙 정렬 + 간격 / 기존 유지)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    
    /* 필터 박스: 중앙 정렬 + 아래 간격 */
    .filterwrap, .filtersection {
        text-align: center !important;        
        margin: 0 auto 40px auto !important; /* 모바일에서도 40px 간격 유지 */
        float: none !important;              
        width: 96% !important;                
        display: block !important;
    }
    
    ul.filter, .filter {
        text-align: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    
    ul.filter li, .filter li {
        float: none !important;              
        display: inline-block !important;    
        margin: 3px !important;              
    }

    /* 사진 박스: 화면 꽉 차게 */
    .portfoliothumb {
        width: 100% !important;
        height: auto !important;      
        min-height: 0 !important;     
        max-width: none !important;   
        margin: 0 0 30px 0 !important;
        float: none !important;
    }
    
    .portfoliothumb .thumb,
    .portfolio-item .thumb,
    .portfolio-item .thumb img, 
    .portfoliothumb img {
        height: auto !important;      
        min-height: 0 !important;
    }

    /* 제목 박스: 중앙 정렬 */
    .namecontainer {
        transform: none !important;   
        margin: 0 !important;     
        text-align: center !important; 
        padding: 0 !important;
        width: 100% !important;
    }
    .namecontainer .pagename h2 span {
        font-size: 22px !important;        
        padding: 20px 0 !important;        
        width: 90% !important;             
    }
}
/* ==========================================================================
   [최종 해결] 2. 모바일 배경 설정 (대문 보호 + 나머지 투명)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    /* 배경 슬라이드 사진 강제 노출 */
    #supersized, #supersized li { 
        visibility: visible !important; 
        display: block !important; 
        position: fixed !important; 
    }

    /* 일반 페이지: 배경 투명화 -> 사진 보임 */
    body, html, #wrapper, .mainbody { 
        background-color: transparent !important; 
        background: transparent !important; 
    }

    /* [핵심] 홈페이지 대문(.home)은 검은색 배경 유지 */
    body.home { 
        background-color: #000000 !important; 
    }
    
    /* 모바일 레이아웃 보정 */
    .portfoliothumb { width: 100% !important; margin-bottom: 30px !important; }
    .filterwrap { margin-bottom: 40px !important; }
}
/* 아트포럼리 검색 위젯 배경 및 색상 변경 (정밀 타겟팅) */

/* 1. 위젯 전체 배경을 진파란색 투명으로 변경 */
#search-5 .widgetinner.pagebg {
    background-color: rgba(5, 47, 74, 0.85) !important; /* 스크린샷의 사이드바 색상 계열 반영 */
    padding: 25px !important;
    border: none !important;
}

/* 2. '홈페이지 안 검색' (h4 타이틀) 글자색 변경 */
#search-5 .widget-title {
    color: #ffffff !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* 3. 검색 입력창(input) 내부 스타일 수정 */
#search-5 #s {
    background-color: rgba(255, 255, 255, 0.1) !important; /* 입력창은 살짝 투명하게 */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px !important;
    width: 100% !important;
}

/* 4. 입력창 안내 문구 (To search type and hit enter...) 색상 */
#search-5 #s::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}
/* ======================================================
   아트포럼리 검색 위젯 커스텀 (style.css 하단 추가용)
   ====================================================== */

/* 1. 위젯 전체 배경 (진파란색 투명도 및 부드러운 변화) */
#search-5 .widgetinner.pagebg {
    background-color: rgba(5, 47, 74, 0.85) !important;
    padding: 25px !important;
    border: none !important;
    transition: all 0.3s ease; /* 마우스 올릴 때 대비한 부드러운 효과 */
}

/* 2. 위젯 제목 (여백과 가독성 개선) */
#search-5 .widget-title {
    color: #ffffff !important;
    margin-bottom: 22px !important; /* 입력창과의 간격을 조금 더 확보 */
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 3. 검색 입력창 기본 스타일 */
#search-5 #s {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 12px !important;
    width: 100% !important;
    border-radius: 4px;
    transition: all 0.3s ease !important; /* 맥북/아이맥 환경에 어울리는 부드러운 애니메이션 */
}

/* 4. 입력창에 마우스를 올렸을 때 (Hover) */
#search-5 #s:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* 5. 입력창을 클릭해서 글자를 쓸 때 (Focus) */
#search-5 #s:focus {
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important; /* 은은하게 빛나는 효과 */
}

/* 6. 안내 문구 (Placeholder) 색상 */
#search-5 #s::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}