@charset "utf-8"; .clear:after{display:block;visibility:hidden;height:0;content:'';clear:both;} .innerWrap { margin:0 auto; width:990px; } .blind { display:none; } .hidden { visibility:hidden; } /* 레이아웃 */ #wrap{position:relative; height:100%; } #header{z-index:20;position:relative;width:100%;height:100px;} #header h1{float:left;margin:50px 138px 0 0;} #container{position:relative;width:100%; height:923px; overflow:hidden; } #container .contentsContainer { position:relative;width:990px;height:923px;margin:0 auto; } /* GNB */ #header { height:100px; z-index:210; } #header .outerWrap { position:absolute; padding-bottom:8px; width:100%; height:100px; background:url("../images/common/gnb_shadow.png") repeat-x 0 100%; } #header .innerWrap { position:relative; height:100%; overflow:hidden; z-index:2; } #header .gnb li { position:relative; float:left; width:150px; height:276px; border-left:1px solid #ffffff; } #header .gnb li a { display:block; padding-left:32px; height:100%; } #header .gnb li h2 { position:relative; display:block; margin-top:53px; height:16px; overflow:hidden; z-index:3; } #header .gnb li h2 a { text-indent:-9999px; background:url("../images/common/gnb_depth1_menus.png") no-repeat; } #header .gnb li.depth1 { background:url("../images/common/gnb_diagonal_bg.png") no-repeat; } #header .gnb li.intro { background-position:0px -100px; } #header .gnb li.ceratech { background-position:-151px -100px; } #header .gnb li.network { background-position:-302px -100px; } #header .gnb li.service { background-position:-453px -100px; border-right:1px solid #ffffff; } #header .gnb li.intro h2 a { background-position:32px -17px; } #header .gnb li.ceratech h2 a { background-position:-119px -17px; } #header .gnb li.network h2 a { background-position:-270px -17px; } #header .gnb li.service h2 a { background-position:-421px -17px; } #header .gnb .depth2 { display:block; margin-top:45px; overflow:hidden; } #header .gnb .depth2 li { padding:0; border:none; height:26px; } #header .gnb .depth2 li a { padding:7px 0 7px 32px; text-indent:-9999px; height:12px; line-height:12px; background:url("../images/common/gnb_depth2_menus.gif") no-repeat; } #header .gnb .intro .depth2 .m1 a { background-position:32px 7px; } /* #header .gnb .intro .depth2 .m2 a { background-position:32px -19px; } #header .gnb .intro .depth2 .m3 a { background-position:32px -45px; } #header .gnb .intro .depth2 .m4 a { background-position:32px -71px; } #header .gnb .intro .depth2 .m5 a { background-position:32px -97px; } 메뉴 추가 2014.03.03 */ #header .gnb .intro .depth2 .m1 a { background-position:32px 7px; } #header .gnb .intro .depth2 .m2 a { background-position:32px -19px; } #header .gnb .intro .depth2 .m3 a { background-position:32px -45px; } #header .gnb .intro .depth2 .m4 a {background:url("../images/common/gnb_safety.png") no-repeat;} /* 메뉴 추가 2023.01.06 */ #header .gnb .intro .depth2 .m5 a {background:url("../images/common/gnb_ethical.gif") no-repeat;} /* '윤리경영' 메뉴 추가 230922 */ #header .gnb .intro .depth2 .m6 a { background-position:32px -71px; } #header .gnb .intro .depth2 .m7 a { background-position:32px -97px; } /* 메뉴 추가 2014.03.03 */ #header .gnb .ceratech .depth2 .m1 a { background-position:-119px 7px; } #header .gnb .ceratech .depth2 .m2 a { background-position:-119px -19px; } #header .gnb .ceratech .depth2 .m3 a { background-position:-119px -45px; } #header .gnb .ceratech .depth2 .m4 a { background-position:-119px -71px; } /* 메뉴 추가 2013.07.01 */ #header .gnb .network .depth2 .m1 a { background-position:-270px 7px; } #header .gnb .network .depth2 .m2 a { background-position:-270px -19px; } #header .gnb .network .depth2 .m3 a { background-position:-270px -45px; } /* 메뉴 추가 2013.07.01 */ #header .gnb .service .depth2 .m1 a { background-position:-421px 7px; } #header .gnb .service .depth2 .m2 a { background-position:-421px -19px; } #header .gnb .service .depth2 .m3 a { background-position:-421px -45px; } #header .gnb .service .depth2 .m4 a { background-position:-421px -71px; } /* 메뉴 추가 2019.10.31 */ /* #header .gnb .intro .depth2 .m1 a:hover { background-position:32px -193px; } #header .gnb .intro .depth2 .m2 a:hover { background-position:32px -219px; } #header .gnb .intro .depth2 .m3 a:hover { background-position:32px -245px; } #header .gnb .intro .depth2 .m4 a:hover { background-position:32px -271px; } #header .gnb .intro .depth2 .m5 a:hover { background-position:32px -297px; } 메뉴 추가 2014.03.03 */ #header .gnb .intro .depth2 .m1 a:hover { background-position:32px -193px; } #header .gnb .intro .depth2 .m2 a:hover { background-position:32px -219px; } #header .gnb .intro .depth2 .m3 a:hover { background-position:32px -245px; } #header .gnb .intro .depth2 .m4 a:hover { background-position:0 -200px; } #header .gnb .intro .depth2 .m5 a:hover { background-position:0 -201px; } /* 윤리경영 메뉴 추가 230922 */ #header .gnb .intro .depth2 .m6 a:hover { background-position:32px -271px; } #header .gnb .intro .depth2 .m7 a:hover { background-position:32px -297px; } /* 메뉴 추가 2014.03.03 */ #header .gnb .ceratech .depth2 .m1 a:hover { background-position:-119px -193px; } #header .gnb .ceratech .depth2 .m2 a:hover { background-position:-119px -219px; } #header .gnb .ceratech .depth2 .m3 a:hover { background-position:-119px -245px; } /* 메뉴 추가 2013.07.01 */ #header .gnb .ceratech .depth2 .m4 a:hover { background-position:-119px -271px; } #header .gnb .network .depth2 .m1 a:hover { background-position:-270px -193px; } #header .gnb .network .depth2 .m2 a:hover { background-position:-270px -219px; } #header .gnb .network .depth2 .m3 a:hover { background-position:-270px -245px; } /* 메뉴 추가 2013.07.01 */ #header .gnb .service .depth2 .m1 a:hover { background-position:-421px -193px; } #header .gnb .service .depth2 .m2 a:hover { background-position:-421px -219px; } #header .gnb .service .depth2 .m3 a:hover { background-position:-421px -245px; } #header .gnb .service .depth2 .m4 a:hover { background-position:-421px -271px; } /* 메뉴 추가 2019.10.31 */ #header .util { float:none; display:block; position:absolute; top:56px; right:0; } #header .util li { float:left; margin-left:17px; } #header.open { } #header.open .outerWrap {} #header.open .gnb li { border-color:#e6e6e6; } #header .utilMenu { position:absolute; top:56px; left:50%; margin-left:345px; /*width:150px;*/ width:225px; z-index:3; } #header .utilMenu li { position:relative; float:left; height:/*8px*/ 11px; } #header .utilMenu li .openMenu { display:none; position:absolute; top:0px; left:-9px; padding-top:17px; width:66px; background:url("/images/common/utilMenu_arrow.gif") no-repeat 40px 16px; } #header .utilMenu li .openMenu .shadowBox { margin-top:3px; margin-left:14px; width:66px; height:51px; overflow:hidden; background:url("/images/common/utilMenu_shadow.png") no-repeat -1px -5px; } #header .utilMenu li .openMenu ul { padding:5px 0 7px 0; width:59px; overflow:hidden; background-color:#736d67; } #header .utilMenu li .openMenu ul li { width:59px; height:17px; line-height:17px; font-size:0; text-indent:-9999px; } #header .utilMenu li .openMenu ul li a { display:block; width:100%; height:100%; overflow:hidden; background:url("/images/common/utilMenu_contury.gif") no-repeat; } #header .utilMenu li .openMenu ul li.engCer a { background-position:0px -4px; } #header .utilMenu li .openMenu ul li.engNet a { background-position:0px -21px; } #header .utilMenu li .openMenu ul li.engCer a:hover { background-position:-100px -4px; } #header .utilMenu li .openMenu ul li.engNet a:hover { background-position:-100px -21px; } #header .utilMenu li span { display:block; width:100%; } #header .utilMenu li span a { display:block; width:100%; height:/*8px*/11px; overflow:hidden; text-indent:-999px; font-size:0; background:url("/images/common/utilMenu_menus.gif") no-repeat; } #header .utilMenu .partner { width:59px; margin-right:16px; } /* 메뉴 추가 2014.03.03 */ #header .utilMenu .partner span a:hover { background-position:0px -20px; } /* 메뉴 추가 2014.03.03 */ #header .utilMenu .contact { width:71px; margin-right:16px; } #header .utilMenu .contact span a:hover { background-position:/*0px -20px*/ -75px -20px; } #header .utilMenu .contact span a {background-position:-75px 0px;} #header .utilMenu .language span a:hover { background-position:/*0px -20px*/ -162px -20px; } #header .utilMenu .language { width:63px; } #header .utilMenu .language span a { background-position:/*-87px 0*/ -162px 0; } #header .utilMenu .language span a:hover { background-position:/*-87px -20px*/ -162px -20px; } #header .utilMenu .language:hover {} #header .utilMenu .language:hover a { background-position:/*-87px -20px*/ -162px -20px; } #header .utilMenu .language:hover .openMenu { display:block; } /* 왼쪽탭 */ div#container.index > ul.asideTab{position:absolute;left:0;top:104px;z-index:200; } div#container.index > ul.asideTab > li.first{width:132px;height:66px;margin-bottom:1px;background-color:#50b5c7;} div#container.index > ul.asideTab > li.last{width:132px;height:66px;background-color:#f2e138;} div#container.index > ul.asideTab > li.first > a{display:block;width:132px;height:66px;background:url("../images/index/aside_cera_bg.png") no-repeat 17px 19px scroll;} div#container.index > ul.asideTab > li > a > img{padding:20px 0 0 83px;} div#container.index > ul.asideTab > li.last > a{display:block;width:132px;height:66px;background:url("../images/index/aside_net_bg.png") no-repeat 17px 14px scroll;} div#container.index > div.innerWrap{line-height:1;} div#container.index > ul.asideTab.initMotion { left:-132px; } /* 중간 4개 컨텐츠 레이아웃 */ div#container.index div.description{display:none;} .innerWrap > .title{z-index:100;position:absolute;top:0;width:660px;height:332px;} /* background-color:#FFF; */ .contentsContainer .innerWrap{position:relative;width:990px;height:923px;margin:0 auto; } .innerWrap.ceratech .left { position:relative; width:330px; height:923px; } .innerWrap.ceratech .center { position:absolute; left:330px; top:0px; width:330px; height:923px; overflow:hidden; } .innerWrap.ceratech .right{ position:absolute; left:660px; top:0px; width:330px; height:923px; } .innerWrap.network { display:block; position:absolute; top:0; left:0; } .innerWrap.network .left { position:relative; width:330px; height:923px; } .innerWrap.network .center { position:absolute; left:330px; top:0px; width:330px; height:923px; overflow:hidden; } .innerWrap.network .right{ position:absolute; left:660px; top:0px; width:330px; height:923px; } .innerWrap.ceratech.initMotion .right{ top:138px; left:330px; } /* div#container.index div.description{display:none;} div#container.index > div.innerWrap div.title{z-index:100;position:absolute;left:0;top:0;width:660px;height:332px;background-color:#FFF;} div#container.index > div.innerWrap div.left, div#container.index > div.innerWrap div.center, div#container.index > div.innerWrap div.right{z-index:50;float:left;position:relative;width:330px;height:923px;} div#container.index.ceratech > div.innerWrap div.center{background-color:#50b5c7;} div#container.index.network > div.innerWrap div.center{background-color:#f2e138;} */ /* 세라텍 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* title */ .innerWrap.ceratech .title > div.titleColor{ width:330px; height:47px; margin-bottom:57px; background-color:#eee; } .innerWrap.ceratech .title > h3.mainTitle { display:block; position:relative; width:496px; height:87px; margin-left:30px; margin-bottom:29px; overflow:hidden; } .innerWrap.ceratech .title > h4.subTitle { display:block; position:relative; width:301px; height:17px; margin-left:30px; margin-bottom:12px; overflow:hidden; } .innerWrap.ceratech .title > strong.desc { display:block; position:relative; width:380px; height:30px; margin-left:30px; overflow:hidden; } /* title initMotion */ .innerWrap.ceratech.initMotion .title > div.titleColor{width:0;} .innerWrap.ceratech.initMotion .title > h4.subTitle { width:0px; } .innerWrap.ceratech.initMotion div.title > strong.desc { filter: alpha(opacity=0); opacity: 0.0; } /* left */ .innerWrap.ceratech div.left { width:330px; background:url("../images/index/index_leftImg_cera.jpg") no-repeat left bottom scroll; overflow:hidden; } .innerWrap.ceratech div.left > div.inner { position:absolute; left:0; bottom:21px; width:330px; height:208px; background:url("../images/index/index_left_bg.png") no-repeat 0 0 transparent;} .innerWrap.ceratech div.left > div.inner > h5.title { position:relative; top:75px; left:30px; width:255px; height:86px; overflow:hidden; } /*.innerWrap.ceratech div.left > div.inner > h5.title > a { position:relative; display:block; width:255px; height:86px; background:url("../images/index/cera_index_left_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech div.left > div.inner > h5.title > a:hover, .innerWrap.ceratech div.left > div.inner > h5.title > a:focus { background:url("../images/index/cera_index_left_btn.png") no-repeat 0 -87px }*/ .innerWrap.ceratech div.left > div.inner > h5 div { position:relative; display:block; width:255px; height:86px; background:url("../images/index/cera_index_left_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech.initMotion div.left { width:0px; } /* center */ .innerWrap.ceratech .center .contents { position:relative; top:383px; height:540px; background-color:#50b5c7; } .innerWrap.ceratech .center ul { margin:45px 0 0 30px; } .innerWrap.ceratech .center ul li { margin-bottom:39px; } .innerWrap.ceratech .center ul li.last {margin-bottom:0; } .innerWrap.ceratech .center ul li.perliteAcademy a { position:relative; display:block; width:255px; height:53px; background:url("../images/index/cera_index_center_list1.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech .center ul li.downloadCenter a { position:relative; display:block; width:255px; height:53px; background:url("../images/index/cera_index_center_list2.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech .center ul li.contactUs a { position:relative; display:block; width:255px; height:53px; background:url("../images/index/cera_index_center_list3.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech .center ul li.perliteAcademy a:hover, .innerWrap.ceratech .center ul li.perliteAcademy a:focus { background:url("../images/index/cera_index_center_list1.png") no-repeat 0 -54px } .innerWrap.ceratech .center ul li.downloadCenter a:hover, .innerWrap.ceratech .center ul li.downloadCenter a:focus { background:url("../images/index/cera_index_center_list2.png") no-repeat 0 -54px } .innerWrap.ceratech .center ul li.contactUs a:hover, .innerWrap.ceratech .center ul li.contactUs a:focus { background:url("../images/index/cera_index_center_list3.png") no-repeat 0 -54px } /* center initMotion */ .innerWrap.ceratech.initMotion div.center { width:0px; } .innerWrap.ceratech.initMotion div.center .contents { top:733px; } /* right 상단 */ .innerWrap.ceratech div.right div.rightTop { position:relative; top:0; left:0; width:330px;height:559px;background:url("../images/index/cera_index_rightTop_bg.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech div.right > div.rightTop > h5 {padding:46px 0 0 47px;} /*.innerWrap.ceratech div.right > div.rightTop > h5 a { position:relative; display:block; width:255px; height:86px; background:url("../images/index/cera_index_rightTop_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech div.right > div.rightTop > h5 a:hover, .innerWrap.ceratech div.right > div.rightTop > h5 a:focus { background:url("../images/index/cera_index_rightTop_btn.png") no-repeat 0 -87px }*/ .innerWrap.ceratech div.right > div.rightTop > h5 div { position:relative; display:block; width:255px; height:86px; background:url("../images/index/cera_index_rightTop_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech.initMotion div.right div.rightTop { top:194px; width:0px; } /* 중앙컨텐츠 - right 하단 */ .innerWrap.ceratech div.right div.rightBottom { position:absolute; left:0; bottom:0; width:330px; height:410px; background:url("../images/index/cera_index_rightBottom_bg.png") no-repeat left top scroll; overflow:hidden; } .innerWrap.ceratech div.right div.rightBottom > h5 { position:relative; top:69px; left:47px; } /*padding:69px 0 0 47px; */ /*.innerWrap.ceratech div.right > div.rightBottom > h5 a { position:relative; display:block; width:255px; height:86px; background:url("../images/index/cera_index_rightBottom_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech div.right > div.rightBottom > h5 a:hover, .innerWrap.ceratech div.right > div.rightBottom > h5 a:focus { background:url("../images/index/cera_index_rightBottom_btn.png") no-repeat 0 -87px }*/ .innerWrap.ceratech div.right > div.rightBottom > h5 div { position:relative; display:block; width:255px; height:86px; background:url("../images/index/cera_index_rightBottom_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.ceratech.initMotion div.right div.rightBottom { width:0; } /* 네트워크 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* title */ .innerWrap.network div.title > div.titleColor{ width:330px;height:47px;margin-bottom:57px;background-color:#eee; } .innerWrap.network .title > h3.mainTitle { display:block; position:relative; width:516px; height:86px; margin-left:30px; margin-bottom:28px; overflow:hidden; } .innerWrap.network .title > h4.subTitle { display:block; position:relative; width:269px; height:17px; margin-left:30px; margin-bottom:12px; overflow:hidden; } .innerWrap.network .title > strong.desc { display:block; position:relative; width:380px; height:30px; margin-left:30px; overflow:hidden; } /* title initMotion */ /*.innerWrap.network.initMotion .title > div.titleColor{width:0;}*/ .innerWrap.network.initMotion .title > h3.mainTitle { filter: alpha(opacity=0); opacity: 0.0; } .innerWrap.network.initMotion .title > h4.subTitle { width:0px; } .innerWrap.network.initMotion .title > strong.desc { filter: alpha(opacity=0); opacity: 0.0; } /* left */ .innerWrap.network div.left { width:330px;background:url("../images/index/index_leftImg_net.jpg") no-repeat left bottom scroll; overflow:hidden; } .innerWrap.network div.left > div.inner{ position:absolute; left:0; bottom:21px; width:330px; height:208px; background:url("../images/index/index_left_bg.png") no-repeat 0 0 transparent;} .innerWrap.network div.left > div.inner > h5 { position:relative; top:75px; left:30px; width:255px; height:86px; overflow:hidden; } .innerWrap.network div.left > div.inner > h5.title > a { position:relative; display:block; width:255px; height:86px; background:url("../images/index/net_index_left_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network div.left > div.inner > h5.title > a:hover, .innerWrap.network div.left > div.inner > h5.title > a:focus { background:url("../images/index/net_index_left_btn.png") no-repeat 0 -87px } .innerWrap.network.initMotion div.left { top:597px; } /* center */ .innerWrap.network div.center .contents { position:relative; top:383px; height:540px; background-color:#f2e138; } .innerWrap.network div.center ul{margin:45px 0 0 30px;} .innerWrap.network div.center ul li{margin-bottom:39px;} .innerWrap.network div.center ul li.last{margin-bottom:0;} .innerWrap.network .center ul li.ubiHome a { position:relative; display:block; width:255px; height:53px; background:url("../images/index/net_index_center_list1.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network .center ul li.searchService a { position:relative; display:block; width:255px; height:55px; background:url("../images/index/net_index_center_list2.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network .center ul li.as a { position:relative; display:block; width:255px; height:54px; background:url("../images/index/net_index_center_list3.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network .center ul li.downloadCenter a { position:relative; display:block; width:255px; height:53px; background:url("../images/index/net_index_center_list4.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network .center ul li.ubiHome a:hover, .innerWrap.network .center ul li.ubiHome a:focus { background:url("../images/index/net_index_center_list1.png") no-repeat 0 -54px } .innerWrap.network .center ul li.searchService a:hover, .innerWrap.network .center ul li.searchService a:focus { background:url("../images/index/net_index_center_list2.png") no-repeat 0 -56px } .innerWrap.network .center ul li.as a:hover, .innerWrap.network .center ul li.as a:focus { background:url("../images/index/net_index_center_list3.png") no-repeat 0 -55px } .innerWrap.network .center ul li.downloadCenter a:hover, .innerWrap.network .center ul li.downloadCenter a:focus { background:url("../images/index/net_index_center_list4.png") no-repeat 0 -54px } .innerWrap.network.initMotion div.center { width:0px; } /* right 상단 */ .innerWrap.network div.right div.rightTop { position:relative; top:0; left:0; width:330px;height:559px;background:url("../images/index/net_index_rightTop_bg.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network div.right div.rightTop h5 { padding:47px 0 0 44px; } .innerWrap.network div.right > div.rightTop > h5 a { position:relative; display:block; width:255px; height:86px; background:url("../images/index/net_index_rightTop_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network div.right > div.rightTop > h5 a:hover, .innerWrap.network div.right > div.rightTop > h5 a:focus { background:url("../images/index/net_index_rightTop_btn.png") no-repeat 0 -87px } .innerWrap.network.initMotion div.right { top:927px; } /* right 하단 */ .innerWrap.network div.right div.rightBottom { position:absolute; left:0; bottom:0; width:330px; height:410px;background:url("../images/index/net_index_rightBottom_bg.png") no-repeat left top scroll;} .innerWrap.network div.right div.rightBottom > h5 { position:relative; top:69px; left:44px; } /*padding:69px 0 0 47px;*/ .innerWrap.network div.right > div.rightBottom > h5 a { position:relative; display:block; width:255px; height:86px; background:url("../images/index/net_index_rightBottom_btn.png") no-repeat 0 0 transparent; overflow:hidden; } .innerWrap.network div.right > div.rightBottom > h5 a:hover, .innerWrap.network div.right > div.rightBottom > h5 a:focus { background:url("../images/index/net_index_rightBottom_btn.png") no-repeat 0 -87px } /* 푸터 */ div#footer{ z-index:900;position:relative;width:100%;height:100px;border-top:1px solid #e3e3e3;background-color:#FFF;} div#footer img{vertical-align:top;} div#footer p.copyright{float:left;margin-top:18px;} div#footer div.footer_right{float:right;/*width:500px;*/width:990px;margin-top:17px;} div#footer div.footer_right ul{float:left;/*width:355px;*/width:520px;} div#footer div.footer_right ul li{float:left;padding-top:6px;margin-right:7px;} div#footer div.footer_right ul li.paddingtop{float:left;padding-top:18px;margin-right:7px;} div#footer div.footer_right ul li.sns{float:left;} div#footer div.footer_right ul li.last{margin-right:0;} div#footer div.footer_right fieldset select{float:right;width:132px;border:1px solid #d3d3d3;} #footer {} #footer .familySite { float:right; position:relative; width:134px; height:23px; font-size:11px;margin-top:7px;} #footer .familySite .btn { overflow:hidden; height:23px; text-indent:-9999px; background:url("../images/common/btn_family_site.gif") no-repeat; cursor:pointer; } #footer .familySite .family { display:none; position:absolute; top:-190px; width:132px; text-indent:11px; border:1px solid #dadada; background-color:#ffffff; } #footer .familySite .family li { float:none; padding:0; margin:0; } #footer .familySite .family li a { display:block; width:100%; height:27px; line-height:27px; color:#9a9a9a; text-decoration:none; } #footer .familySite .family li a:hover { color:#f97b0b; background-color:#f5f5f5; } #footer .familySite.open .btn { background-position:0 -23px; } #footer .familySite.open .family { display:block; }