.UIF_TopBanner { position:relative; overflow:hidden; text-align:center; background:pink; }
.UIF_TopBanner .bannerLink { display:block; }
.UIF_TopBanner .btnClose { position:absolute; top:5px; left:50%; margin-left:590px; margin-bottom:100px; }
#UIF_HeaderWrap_Root {
position:fixed;
width:100%;
top:0;
z-index:180;
background:rgba(255,255,255,0.95);
}
#UIF_HeaderWrap_A, #UIF_HeaderWrap_B, #UIF_HeaderWrap_C {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
#UIF_HeaderWrap_A { width:100%; border-top:3px solid #909090; border-bottom:1px solid #EAEAEA; background:#F6F6F6 }
#UIF_HeaderWrap_B { width:100%; height:118px; opacity:1; -webkit-transition: height 0.4s opacity 0.4s; -moz-transition: height 0.4s opacity 0.4s; transition: height 0.4s opacity 0.4s; }
#UIF_HeaderWrap_C { width:100%; height:57px; border-top:1px solid #909090; border-bottom:1px solid #909090; }
#UIF_HeaderWrap_A > .HeaderWrap_Inner { position:relative; width:1100px; height:34px; margin:0 auto; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#UIF_HeaderWrap_B > .HeaderWrap_Inner { position:relative; width:1100px; margin:0 auto; }
#UIF_HeaderWrap_C > .HeaderWrap_Inner { position:relative; width:1100px; margin:0 auto; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_B {
height:0;
opacity:0;
overflow:hidden;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_C { box-shadow:0 2px 2px rgba(0,0,0,0.2); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_C .downLogo { opacity:1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#UIF_HeaderWrap_Root.ScrollC_ON #UIF_HeaderWrap_C .MenuAll { left:50px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#UIF_LayoutWrap { margin:0 auto; width:1100px; margin-top:231px;}
#UIF_ContentsWrap { position:relative; }
#UIF_ContentsWrap #UIF_Contents { position:relative; }
#banner { position:absolute; top:0; left:-95px; width:90px; display:none; }
#quick,
#quick_fixed { position:absolute; top:20px; left:25px; width:70px; }
#UIF_CommWrap { background:#f3f3f3; margin-top:50px; }
#UIF_BannerWrap { background:#f3f3f3; }
#UIF_FooterWrap { position:relative; background:#909090; }
.UIF_InnerWrap { position:relative; margin:0 auto; padding:50px 0; width:1100px; text-align:center; }
.UIF_LayoutUpWrap { margin:0 -20px; } /* width 1140으로 확장 */
.overflowhidden { overflow:hidden !important; }
<body id="main" class="UIF_PushMenu-push">
<!-- 본문 바로가기 : 브라우저에서 Tab 키를 눌렀을때 하단 본문으로 바로 갈 수 있는 링크가 활성화 됩니다. -->
<div id="skipNavigation">
<p><a href="#UIF_LayoutWrap">본문 바로가기</a></p>
</div>
<!-- //본문 바로가기 -->
<!-- 상단 배너 -->
<div class="UIF_TopBanner">
<a href="#none" class="bannerLink">
</a>
</div>
<!-- //상단 배너 -->
<!-- 상단 영역 -->
<div id="UIF_HeaderWrap_Root">
<!-- 상단 유틸메뉴 영역 -->
<div id="UIF_HeaderWrap_A">
<div class="HeaderWrap_Inner">
<!-- 유틸리티 메뉴 -->
<nav id="UIF_Utilmenu" class="UIF_Utilmenu">
<div class="Utilmenu_Inner fa-asterisk">
<li><a module="Layout_bookmark" href="/link/bookmark.html" target="_blank" onclick="winPop(this.href); return false;"><span>BOOKMARK</span></a></li>
<li><a module="Layout_shortcut" href="/link/shortcut.html" target="_blank" onclick="winPop(this.href); return false;">QUICK LINK</a></li>
</ul>
</div>
<div module="Layout_multishopList" class="MultiShopLink">
<li><a>MULTI SHOP</a></li>
</ul>
<ul module="Layout_multishopListitem" class="MultiShop">
<li>
<span>{$locale_language}</span>
<span>{$currency_code}</span>
</a>
</li>
<li>
<span>{$locale_language}</span>
<span>{$currency_code}</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- //유틸리티 메뉴 -->
<!-- 로그인 / 회원가입 버튼 -->
<nav id="UIF_Topmenu" class="UIF_Topmenu">
<div module="Layout_statelogoff">
<li><a href="/member/login.html" class="fa-sign-in"><span class="txt">LOGIN</span></a></li>
<li><a href="/member/join.html" class="fa-user-plus"><span class="txt">JOIN</span></a></li>
</ul>
</div>
<div module="Layout_stateLogon">
<li><a href="/member/modify.html"><span class="fa-cog"/><span class="txt">EDIT</span></a></li>
<li><a href="{$action_logout}"><span class="fa-sign-out"/><span class="txt">LOGOUT</span></a></li>
</ul>
</div>
</nav>
<!-- //로그인 / 회원가입 버튼 -->
</div>
</div>
<!-- //상단 유틸메뉴 영역 -->
<!-- 상단 로고 및 이미지 영역 -->
<div id="UIF_HeaderWrap_B">
<div class="HeaderWrap_Inner">
<div module="Layout_LogoTop" class="orgLogo">
</div>
</div>
</div>
<!-- //상단 로고 및 이미지 영역 -->
<!-- 상단 글로벌 메뉴 영역 -->
<div id="UIF_HeaderWrap_C">
<div class="HeaderWrap_Inner">
<!-- 축소형 로고 -->
<div module="Layout_LogoTop" class="downLogo">
</div>
<div id="UIF_MenuWrap" module="Layout_category">
<h2>전체상품카테고리</h2>
<span id="UIF_PushMenu_ShowTop" class="MenuAll fa-navicon" />
<div id="UIF_SearchBar" class="UIF_SearchBar" module="Layout_SearchHeader">
<!--
$product_page=/product/detail.html
$category_page=/product/list.html
-->
<fieldset>
<legend>검색</legend>
{$form.keyword}
<!--<input class="UIF_SearchBar-input" placeholder="찾으시는 키워드를 입력하세요" type="text" value="" name="search" id="search">-->
<input class="UIF_SearchBar-submit" type="submit" onclick="{$action_search_submit}">
<span class="UIF_SearchBar-icon fa-search"></span>
<fieldset>
</div>
<script src="/UI_FANDANGO/js/uif_search.js"></script>
<script>
new UISearch( document.getElementById( 'UIF_SearchBar' ) );
</script>
<ul id="Category_Menu" class="Category_Menu">
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
</ul>
</div>
</div>
</div>
