/* BASIC css start */ #main { position: relative; width:1020px; } #main .visual-banner { zoom: 1; overflow: hidden; height: 444px; } #main .visual-banner .visual { float: left; width: 820px; height:31px; } #main .visual-banner .banner { float: right; width: 194px; height:418px;} #main .visual-banner .banner img { margin-bottom: 8px; } /* best-evt */ #main .best-evt { zoom: 1; margin-top: 20px;width:175px; } /* slideBestEvt */ #main #slideBestEvt { float: right; width: auto; border-left: 0; } /* hashBestEvt */ #main #hashBestEvt { position: relative; float: left; } /* headlineBanner */ #main #headlineBanner { position: relative; margin-top: 20px; } /* mdItem */ #main #mdItem { position: relative; margin-top: 20px; } .item-list .item { float: left; width: 135px; margin-top: 5px; text-align: center; margin-left:10px;} .item-list .item .thumb { margin: 0 auto 20px; width: 137px; height: 137px; border:1px solid #dddddd} #IDPW a:hover {text-decoration:underline;} .wrap {width: 1300px;} #main_contents_wrap {width: 1021px; margin: 0 auto; margin-top: 100px } .main_wrap {width: 1021px; margin-bottom: 13px;} .Text_wrap {width:1021px; height: 30px; margin-bottom: 7px; border-top: 1px solid #ececec} .B1 {width: 163px; height: 30px; float: left;} .S1 {width: 338px; height: 30px; float: left;} #main_1_wrap {height: 418px; /*background-color: #55b3d6;*/ } #main_pic {width: 815px; height: 418px; background-color: #e6e9ea ; float: left;} #login_wrap {width: 176px; height: 418px; float: left; margin-left: 30px;} #login {height: 235px; background-color: #c4c4c4; } #main_2_wrap {height: 328px;} #mini_box {width: 700px; height: 244px; margin-left: 368px; padding-top: 20px;} #box1 {width: 408px; float: left;} #box2 {width: 221px; float: left; margin-left: 12px;} .mini_box1 {width: 124px; height: 244px; background-color: white; float: left; margin-left: 12px;} .mini_box2 {width: 221px; height: 118px; background-color: white; margin-bottom: 12px;} .stext {width: 203px; height: 41px; background-color: #141414; float: left; margin-left: 1px;} #main_3_wrap {height: 507px; } #main_4_wrap {height: 245px; } #S_mini_box {width: 155px; height: 245px; float: left;} .s_mini_boxs {height: 64px; background-color: #54b3d5; } .s_mini_boxs-1 {height: 40px} #s_mini_boxs2 {margin-top: 5px;} #s_mini_boxs3 {margin-top: 5px;} #s_mini_boxs4 {margin-top: 5px;} #M_mini_box1 {width: 444px; height: 245px; background-color: #e6e9ea; margin-left: 5px; float: left; border: 2px solid #dddddd} #M_mini_box2 {width: 411px; height: 245px; background-color: #e6e9ea; float: left; border-top: 2px solid #dddddd; border-right: 2px solid #dddddd; border-bottom: 2px solid #dddddd} .moonjang {width:400px; float:left; margin-top : 6px; border-top:2px solid #dddddd; margin-left:10px;} .moonjang a:hover {text-decoration:underline;} .nalzza {width:89px; float:left; margin-top : 6px; border-top:2px solid #dddddd;} #main_5_wrap {height: 387px; } #main_6_wrap {height: 507px;} #main_7_wrap {height: 100px; } .Box_brend {width: 92px; height: 49px; float: left;} #m1st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left;} #m2st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-92px 0;} #m3st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-186px 0;} #m4st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-278px 0} #m5st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-371px 0} #m6st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-464px 0} #m7st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-556px 0} #m8st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-649px 0} #m9st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-742px 0} #m10st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-835px 0} #m11st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-927px 0} #m12st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:0 -47px} #m13st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-92px -47px} #m14st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-186px -47px} #m15st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-278px -47px} #m16st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-371px -47px} #m17st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-464px -47px} #m18st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-556px -47px} #m19st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-649px -47px} #m20st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-742px -47px} #m21st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-835px -47px} #m22st_box a{width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_02.jpg)no-repeat; float: left; background-position:-928px -47px} #m1st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left;} #m2st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-92px 0;} #m3st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-186px 0;} #m4st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-278px 0} #m5st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-371px 0} #m6st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-464px 0} #m7st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-556px 0} #m8st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-649px 0} #m9st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-742px 0} #m10st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-835px 0} #m11st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-927px 0} #m12st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:0 -47px} #m13st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-92px -47px} #m14st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-186px -47px} #m15st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-278px -47px} #m16st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-371px -47px} #m17st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-464px -47px} #m18st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-556px -47px} #m19st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-649px -47px} #m20st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-742px -47px} #m21st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-835px -47px} #m22st_box a:hover {width:92px; height:49px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/breand/mini_logo_01.jpg)no-repeat; float: left; background-position:-928px -47px} #one_day_text {float: left; width: 510px; margin-top:12px;} #C_line_text {float: left; width: 510px; margin-top:12px;} #main_89_wrap {width:1021px; height: 301px;} #main_8_wrap {width:502px; height: 233px;float: left;} #one_day {width: 502px; height: 233px; background-color: #d5e7ee; } .one_day_b {} #one_day_b1 {width: 251px; height: 233px; float: left;} #one_day_b2 {width: 251px; height: 233px; background-color: #bcdeeb; float: left;} #main_9_wrap {width: 502px; float: left; margin-left: 17px;} #C_line {width: 502px; height: 233px; border: 1px solid #e0e0e0; } .C_line_B {width: 138px; height: 138px; border: 1px solid #363636; float: left; margin-top: 18px; } .C_text_B a:hover {text-decoration:underline;} #C_line_mb1 {margin-left: 16px;} #C_line_mb2 {margin-left: 23px;} #C_line_mb3 {margin-left: 25px;} .blog_wrap01 {width: 250px;height: 366px;float: left; background:#fff;margin-top:25px;} #blog03{margin-left:5px;} #blog05{margin-left:5px;} #blog07{margin-left:5px;} #blog01 a{width:250px; height:360px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/1.jpg)no-repeat; float: left;} #blog03 a{width:250px; height:360px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/2.jpg)no-repeat; float: left;} #blog05 a{width:250px; height:360px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/3.jpg)no-repeat; float: left;} #blog07 a{width:250px; height:360px; background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/4.jpg)no-repeat; float: left;} #blog01 a:hover{background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/11.jpg); opacity:1; transform:scale(1); transition:all 1s; } #blog03 a:hover{background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/22.jpg); opacity:1; transform:scale(1); transition:all 1s; } #blog05 a:hover{background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/33.jpg); opacity:1; transform:scale(1); transition:all 1s; } #blog07 a:hover{background:url(http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/44.jpg); opacity:1; transform:scale(1); transition:all 1s; } /* #blog01 a:hover {background:url(http://www.slrshop.co.kr/design/slrshop/HJ_Mobile/img/blog/SW_B11.jpg); opacity:1; transform:scale(1); transition:all 1s; cursor:pointer;} #blog03 a:hover {background:url(http://www.slrshop.co.kr/design/slrshop/HJ_Mobile/img/blog/SW_B22.jpg)no-repeat; float: left;} #blog05 a:hover {background:url(http://www.slrshop.co.kr/design/slrshop/HJ_Mobile/img/blog/SW_B33.jpg)no-repeat; float: left;} #blog07 a:hover {background:url(http://www.slrshop.co.kr/design/slrshop/HJ_Mobile/img/blog/SW_B44.jpg)no-repeat; float: left;}*/ .C_text_B {width: 136px; float: left; text-align:center;} .C_text_M {color : #F89B22; font-weight:bold;} #C_text_mb1 {margin-left: 16px;} #C_text_mb2 {margin-left: 29px;} #C_text_mb3 {margin-left: 29px;} #youtube_text {width: 1021px; float: left; } #YOUTUBE_look {width: 510px; height: 23px; float: left; } #youtube_look_go {float: right; } #main_10_wrap {height: 310px; margin-top: 62px; } .youtube_link {width: 502px; height: 282px; background-color: #d5e7ee; } #youtube1 {float: left;} #youtube2 { float: left; margin-left: 17px;} #footer {width: 1300px; height: 200px; margin: 0 auto; margin-top: 70px; } #s_benner {width: 1140px; margin: 0 auto; margin-bottom: 20px; } #sub_logo {width: 200px; height: 67px; background-color: block; float: left; border-right: 1px solid #e6e9ea; } #f_text {width: 1050px; height: 67px; float: left; margin-left: 20px; } #f_text p {font-size: 13px; } #copylight {width: 1300px; height: 67px; } #copylight p {font-size: 12px; text-align: center;margin-top: 20px; } /*slide*/ .hotspot_brand {position: relative;} .hotspot_brand_lst {overflow: hidden; position: relative; width: 1021px; height: 364px; } .hotspot_brand_lst li{float:left} .hotspot_brand_lst li.on,.hotspot .hotspot_brand_lst li:hover a{font-weight:bold;text-decoration:none} .hotspot_brand_lst li.on .brand_cont,.hotspot_brand_lst li:hover > .brand_cont{display:block !important;z-index:1 !important} .hotspot_brand_lst li .brand_tab{display:inline-block;width:203px;height:45px;padding-top:11px;border-top:1px solid #e5e5e5;border-right:1px solid #e5e5e5;font-family:'Malgun gothic',맑은고딕,dotum,돋움;font-size:15px;font-weight:bold;color:#333333;text-align:center} .hotspot_brand_lst li:first-child .brand_tab{width:203px;border-left:1px solid #e5e5e5} .hotspot_brand_lst li:hover .brand_tab.type1{background:#d5e7ee} .hotspot_brand_lst li:hover .brand_tab.type2{background:#eeded5} .hotspot_brand_lst li:hover .brand_tab.type3{background:#e1eed5} .hotspot_brand_lst li:hover .brand_tab.type4{background:#eed5df} .hotspot_brand_lst li:hover .brand_tab.type5{background:#e5d5ee} .hotspot_brand_lst li .brand_cont{display:block;position:absolute;top:45px;left:0;z-index:0;width:1021px;height:364px} .hotspot_brand_lst li .brand_cont.bg1{background-image:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/bg_hotspot1.jpg") } .hotspot_brand_lst li .brand_cont.bg2{background-image:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/bg_hotspot2.jpg") } .hotspot_brand_lst li .brand_cont.bg3{background-image:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/bg_hotspot3.jpg") } .hotspot_brand_lst li .brand_cont.bg4{background-image:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/bg_hotspot4.jpg") } .hotspot_brand_lst li .brand_cont.bg5{background-image:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/bg_hotspot5.jpg") } .hotspot_brand_lst li .brand_cont li{position:absolute} .hotspot_brand_lst li .brand_cont li a{background:transparent} .hotspot_brand_lst li .brand_cont li.bnr_big{top:16px;left:12px} .hotspot_brand_lst li .brand_cont li.bnr_s1{top:32px;left:700px} .hotspot_brand_lst li .brand_cont li.bnr_s2{top:32px;left:870px} .hotspot_brand_lst li .brand_cont li.bnr_s3{top:167px;left:700px} .hotspot_brand_lst li .brand_cont li.bnr_s4{top:167px;left:870px} .prev,.hotspot .next {display:none;z-index:10;margin-top:8px} .prev{background-position: -788px -257px;width:34px;height:41px} .prev:hover {background-position: -864px -257px;z-index:1} .next{right:0;background-position:-835px -258px;width:34px;height:41px} .next:hover {background-position:-912px -258px;z-index:1} .mb_cb{height:289px;} .mb_cb #mb_cb .bnr00 a{background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_cb.png") no-repeat 0 0;} .mb_cb #mb_cb .bnr01 a{background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_cb.png") no-repeat 0 -37px;} .mb_cb #mb_cb .bnr02 a{background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_cb.png") no-repeat 0 -74px;} .mb_cb #mb_cb .bnr03 a{background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_cb.png") no-repeat 0 -111px;} .mb_cb #mb_cb .bnr04 a{background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_cb.png") no-repeat 0 -148px;} .mb_cb #mb_cb ul.bjqs{display:none; overflow:hidden; position:relative;} .mb_cb #mb_cb li.bjqs-slide{display:none; position:absolute;} .mb_cb #mb_cb ol.bjqs-markers{position:absolute; bottom:-37px; width:100%; margin:0; padding:0;} .mb_cb #mb_cb ol.bjqs-markers.h-centered{text-align:center;} .mb_cb #mb_cb ol.bjqs-markers li{float:left; height:49px; background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_bg.png") no-repeat 0 -49px;} .mb_cb #mb_cb ol.bjqs-markers li a{display:block; overflow:hidden; width:203px; height:37px; margin-top:12px; border-left:1px solid #474747; text-indent:-9999px;} .mb_cb #mb_cb ol.bjqs-markers li.active-marker{background:url("http://www.slrshop.co.kr/design/slrshop/HJ_HTML/img/btn_mb_bg.png") no-repeat 0 0;} .mb_cb #mb_cb p.bjqs-caption{display:block; position:absolute; bottom:0; width:96%; margin:0; padding:2%;} #gonggong {width:406px; height:40px; } #gongjisahang {width:300px; float:left; } #gongji_more {width:76px;float:left; } #HJ_LOGIN_BOX { width:160px; height: 30px; margin:10px 0 10px 0;} #input_login_HJ { width:156px; height:49px;} #HJ_login {width: 75px; height: 24px; font-size: 10px; top:100px; float:left;} #HJ_gaip {width: 75px; height: 24px; font-size: 10px; float:left; margin-left:10px;} #login_how {height:150px; border:1px solid #bdbfc3; text-align:center;} #login_how li {margin-top : 5px;} #nameG {width:192px; height:30px; margin-top:8px; } #name {width:66px; height:21px; font-size :14px; float:left; margin-left:12px;} #nae {width:40px; height: 21px; float: left; margin-left:5px; text-decoration:underline; } #nae a {color:#888888} #bankG {width:192px; height:30px; margin-bottom:3px;} #bank {float: left; margin-left: 12px;} #money {float:left; font-weight:bold;} #money a {color:#2379b4;} #money a:hover {text-decoration:underline;} #logout {float: left; margin-left: 21px;} .mbox_icon {width:63.3px; height:57px; background-color:#e9ecf0; float:left; border-top:1px solid #bdbfc3; border-bottom:1px solid #bdbfc3;} #BorderN {border-left:1px solid #bdbfc3; border-right:1px solid #bdbfc3;} #BorderN2 {border-left:1px solid #bdbfc3; border-right:1px solid #bdbfc3;} .mboxB {width:63.3px; height:20px; background-color:#e9ecf0; float:left;} .moltalk {margin-top:10px;} #loginlogin_form {margin-left:15px; } /*HJ_main_slide css*/ .jssorb051 .i {position:absolute;cursor:pointer;} .jssorb051 .i .b {fill:#2379b4;fill-opacity:0.5;} .jssorb051 .i:hover .b {fill-opacity:.7;} .jssorb051 .iav .b {fill-opacity: 1;} .jssorb051 .i.idn {opacity:.3;} .Categori03 .p { position: absolute; top: 0; left: 0; width: 204px; height: 40px; } .Categori03 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .Categori03 .w, .Categori03 .pav:hover .w { position: absolute; width: 204px; height: 40px; box-sizing: content-box; } .Categori03 .c { position: absolute; top: 0; left: 0; width: 204px; height: 40px; background-color: #000; filter: alpha(opacity=60); opacity: .60; transition: opacity .6s; -moz-transition: opacity .6s; -webkit-transition: opacity .6s; -o-transition: opacity .6s; } .Categori03 .p:hover .c, .Categori03 .pav .c { filter: alpha(opacity=0); opacity: 0; } .Categori03 .p:hover .c { transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } * .Categori03 .w { width /**/: 204px; height /**/: 40px; } /*원데이 아이템*/ div.a1 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; min-width: 230px; max-width: 503px; max-height: 233px; width: 100%; color: #ffffff; text-align: left; background-color: #07090c; font-size: 12px; } div.a1 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } div.a1 img { max-width: 100%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; backface-visibility: hidden; } div.a1 .a2 { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: scale(0.5) translate(0%, -50%); transform: scale(0.5) translate(0%, -50%); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; z-index: 1; opacity: 0; padding: 0 30px; } div.a1 h3, div.a1 p { color:#fff; line-height: 1.5em; font-size: 1.5em; } div.a1 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } div.a1 p { font-size:1.2em; font-weight: 500; margin: 0 0 15px; } div.a1 .box_text { border: 2px solid #fff; padding: 0.5em 1em; font-size: 2.0em; text-decoration: none; color: #ffffff; display: inline-block; } div.a1 .box_text:hover { background-color: #ffffff; color: #000000; } div.a1:hover img, div.a1.hover img { -webkit-animation: a1 0.45s linear forwards; animation: a1 0.45s linear forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } div.a1:hover .a2, div.a1.hover .a2 { -webkit-transform: scale(1) translate(0, -50%); transform: scale(1) translate(0, -50%); opacity: 1; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } @-webkit-keyframes a1 { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @keyframes a1 { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } /* BASIC css end */