@charset "utf-8"; /* * layout style * written date : 2012-09-18 */ /* base */ html {margin:0;padding:0;overflow-y:scroll;} body {margin:0;padding:0; font-family: "굴림체,돋움,굴림"; font-size: 12px;color: #3f3f3f;line-height:18px;} img{border:0;} input[type="checkbox"]{vertical-align:middle;} /* layout */ #wrap{width:100%;float:left;clear:both;min-width:980px; background:#FFF url('../_img/top-wood-bg.png') 50% 0 repeat-x;} #wrap2{width:100%;float:left;clear:both;min-width:980px; background:#FFF url('../_img/top-still-bg.png') 50% 0 repeat-x;} #wrap3{width:100%;float:left;clear:both;min-width:980px; background:#FFF url('../_img/top-ratan-bg.png') 50% 0 repeat-x;} #head_wrap{width:100%;height:160px;float:left;clear:both;position:relative;} #header{width:100%;height:160px;float:left;clear:both;position:relative;} /* logo */ #header h1{width:226px;height:47px;margin:0 0 0 -113px;padding:0;position:absolute;top:32px;left:50%;} #header h1 a{width:226px;height:47px;overflow:hidden;text-indent:-999em;background:transparent url('../_img/layout-sprites.png') 0 0 no-repeat;display:block;} #header h2{width:232px;height:47px;margin:0 0 0 -113px;padding:0;position:absolute;top:32px;left:50%;} #header h2 a{width:232px;height:47px;overflow:hidden;text-indent:-999em;background:transparent url('../_img/smith_logo.png') 0 0 no-repeat;display:block;} #header h3{width:232px;height:47px;margin:0 0 0 -113px;padding:0;position:absolute;top:32px;left:50%;} #header h3 a{width:231px;height:58px;overflow:hidden;text-indent:-999em;background:transparent url('../_img/board_logo.png') 0 0 no-repeat;display:block;} #header h4{width:232px;height:47px;margin:0 0 0 -113px;padding:0;position:absolute;top:32px;left:50%;} #header h4 a{width:231px;height:58px;overflow:hidden;text-indent:-999em;background:transparent url('../_img/login_logo.png') 0 0 no-repeat;display:block;} /* navigator */ #header div.navigator-wrap{width:100%;height:49px;border-top:1px solid #E7EAEA;border-bottom:1px solid #E7EAEA;position:absolute;top:101px;} #header div.navigator-wrap ul.navigator{width:400px;height:30px;list-style:none;margin:18px auto 0 auto;} #header div.navigator-wrap ul.navigator li{width:40px;height:30px;float:left;margin-right:60px;} #header div.navigator-wrap ul.navigator li a{width:40px;height:16px;display:block;text-indent:-999em;background:transparent url('../_img/layout-sprites.png') -73px -63px no-repeat;overflow:hidden;} #header div.navigator-wrap ul.navigator li a.gnb-01{background-position:-74px -60px;} #header div.navigator-wrap ul.navigator li a.gnb-02{background-position:-73px -90px;} #header div.navigator-wrap ul.navigator li a.gnb-03{background-position:-73px -120px;} #header div.navigator-wrap ul.navigator li a.gnb-04{background-position:-73px -150px;} #header div.navigator-wrap2{width:100%;height:49px;border-top:1px solid #E7EAEA; position:absolute;top:101px;} /* A.N.T logo */ #header div.ant-logo{width:57px;height:76px;position:absolute;right:30px;top:20px;} #container{width:100%;min-height:500px;float:left;clear:both;} #container div.contents-wrap{width:980px;margin:0 auto;overflow:hidden;} #container div.contents-wrap div.title{width:100%;clear:both;text-align:center;margin:20px 0;} #footer{width:100%;height:170px;float:left;clear:both;border-top:1px solid #E7EAEA;} #footer div.btn-list{width:800px;height:50px;margin:20px auto;overflow:hidden;position:relative;} #footer div.btn-list a.left{position:absolute;left:0;top:0;} #footer div.btn-list a.right{position:absolute;right:0;top:0;} #foot_wrap{position:fixed;width:100%;height:75px;left:0;bottom:0;} #fixed-navigator{position:fixed;width:100%;height:75px; background:url(../_img/foot_bg.png);} #fixed-navigator ul{width:600px;margin:30px auto 0 auto;padding:0;list-sTyle:none;position:relative;} #fixed-navigator ul li{width:54px;display:block;position:absolute;} #fixed-navigator ul li.left{left:0px;top:0;} #fixed-navigator ul li.center{left:50%;top:0;margin-left:-27px;} #fixed-navigator ul li.right{right:0;top:0;} #fixed-navigator ul li a{width:54px;height:13px;display:block;text-indent:-999em;background:transparent url('../_img/layout-sprites.png') 0px -60px no-repeat;overflow:hidden;} #fixed-navigator ul li a.fnb-01{background-position:0px -60px;} #fixed-navigator ul li a.fnb-02{background-position:0px -90px;} #fixed-navigator ul li a.fnb-03{background-position:0px -120px;} #facebook { width:18px; height:18px; z-index:100; position: absolute; top:-3px; right:-150px;} #view_frame{ width:800px; margin:0 auto; padding-top:33px; float: center; } #view_frame2{ width:800px; margin:0 auto; float: center; } #list_number{ width:100%; height:27px; text-align:center; margin:0 auto;} /* custom */ ul.photo-article{ list-style:none; margin:33px 63px; padding:0; width:200px; float:left; } ul.photo-article li{width:200px;float:left; clear:both;} ul.photo-article li.photo-area{ float:left; clear:both; } ul.photo-article li.subject{padding-top:15px;text-align:center;font-family:Dotum,Gulim;font-size:12px;font-weight:bold;color:#6A615D;} /* border-radius effect */ @-moz-document url-prefix() { img.grayscale { filter: url("data:image/svg+xml;utf8, #grayscale"); /* Firefox 10+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } img.grayscale:hover { filter:none; } } img.grayscale { height: 100%; filter: gray; /* IE6-9 */ } img.grayscale:hover { filter: none; /* IE6-9 */ } .box { width: 200px; height: 200px; background-color: #ccc; cursor: pointer; overflow: hidden; display: block; border-radius: 100px; transition: all .15s linear 0s; -webkit-transition: all .15s linear 0s; -moz-transition: all .15s linear 0s; float:left; } .box img { width: 100%; } .box:hover { border-radius: 0px; -webkit-border-radius: 0px; }