/* BASIC css start */ #pagescroll{bottom:20px;position:fixed;right:60px;z-index:9999;} #header { position:relative; margin:0 auto; border-bottom:1px solid #F6F6F6; } #header .hd_logo { text-align:center; border:0px solid #FF9696; padding:40px 0 40px; width:1300px; margin:0 auto; position:relative; } #header .hd_logo a {font-size: 30px; font-family: 'Poppins', 'Lato', 'Nanum Gothic', Arial; font-weight:700;color:#000;text-align: center; } /* ===== 오른쪽아이콘메뉴 ===== */ #header .hd_logo .hd_right { position:absolute; top:0px;right:0; z-index:99; } #header .hd_logo .hd_right li.rota { position:relative; float:left; height:33px;padding:7px 5px 0; border:0px solid #000; cursor:pointer;} #header .hd_logo .hd_right li.rota a { display:block; width:25px;height:25px; line-height:40px; background:#fff; border-radius: 5px 5px 5px 5px; font-size:18px; -webkit-border-radius: 5px 5px 5px 5px; color:#000;text-align:center;transition:all .8s ease;-webkit-transition:all .8s ease;} #header .hd_logo .hd_right li.rota:hover > a{ display:block; transition:all .3s ease;-webkit-transition:all .3s ease; /* transform:rotate(30deg);-webkit-transform:rotate(30deg);*/ } #header .hd_logo .hd_right li.rota a i{display:block; line-height:25px;filter:alpha(opacity=100);opacity:1;-webkit-opacity:1;} #header .hd_logo .hd_right li:hover .ticon01 a {display:block;width:25px;height:25px; background:#000;border-radius:100%; transition:all .3s ease;-webkit-transition:all .3s ease; color:#fff; } #header .hd_logo .hd_right .iy { position:relative; } #header .hd_logo .hd_right .qu { position:absolute; left:20px ; top:0 ; width:15px;height:15px; line-height:15px; border-radius:100%; background:#fff;font-size:10px; color:#000;text-align:center; border:0px solid #000;} /* ===== 오른쪽로그인서브메뉴 ===== */ #header .hd_logo .hd_right .btn_login .login_box { display:none; position:absolute; width:277px; height:280px; border:1px solid #EFEFEF;padding:10px; background-color:rgba(0,0,0,0.8); right:-105px; top:40px; } #header .hd_logo .hd_right .btn_login .login_box .btn_btn01 a {display:block; width:277px; height:35px; line-height:35px; color:#F6F6F6; background-color:transparent; border:1px solid #7a7a7a; background-color:rgba(0,0,0,1); font-family: 'Lato', 'Nanum Gothic', sans-serif !important; font-weight:500; font-size:12px; text-align:center; margin:8px 0px; } #header .hd_logo .hd_right .btn_login .login_box .btn_btn01 a:hover { border:1px solid #fff; color:#fff;} #header .hd_logo .hd_right .btn_login .login_box .btn_btn02 a i{ display:inline-block; *display:inline; background-color:transparent; margin-right:10px; } #header .hd_logo .hd_right .btn_login .login_box .btn_btn02 a { width:277px; height:35px; line-height:35px; color:#C5C5C5; background-color:transparent; border:1px solid #7a7a7a; font-family: 'Lato', 'Nanum Gothic', sans-serif !important; font-weight:500; font-size:12px; text-align:center; margin:8px 0px; } #header .hd_logo .hd_right .btn_login .login_box .btn_btn02 a:hover { border:1px solid #fff; color:#fff;} #header .hd_logo .hd_right .btn_login .login_box .login_bb {width:277px; margin:20px auto 0px;} #header .hd_logo .hd_right .btn_login .login_box .login_bb ul li a { display:block ; background-color:transparent; height:30px; font-size:12px; width:135px; line-height:30px; color:#C5C5C5; border:1px solid #7a7a7a; margin-bottom:4px; font-family: 'Lato', 'Nanum Gothic', sans-serif; font-weight:500; } #header .hd_logo .hd_right .btn_login .login_box .login_bb ul li a:hover {color:#000; border:1px solid #fff; background-color:rgba(255,255,255,1); } #header .hd_logo .hd_right .btn_login .login_box .login_bb .bleft {float:left !important; width:135px; } #header .hd_logo .hd_right .btn_login .login_box .login_bb .bright {float:right !important; width:135px;} /* ===== 오른쪽마이페이지서브메뉴 ===== */ #header .hd_logo .hd_right .btn_my .my_box { display:none; position:absolute; width:277px; height:auto; border:1px solid #EFEFEF;padding:10px; background-color:rgba(0,0,0,0.8); right:-35px; top:40px; } #header .hd_logo .hd_right .btn_my .my_box .my_bb {width:277px; margin:10px auto 0px;} #header .hd_logo .hd_right .btn_my .my_box .my_bb ul li a { display:block ; background-color:transparent; height:30px; font-size:12px; width:135px; line-height:30px; color:#C5C5C5; border:1px solid #7a7a7a; margin-bottom:4px; font-family: 'Lato', 'Nanum Gothic', sans-serif; font-weight:500; } #header .hd_logo .hd_right .btn_my .my_box .my_bb ul li a:hover {color:#000; border:1px solid #fff; background-color:rgba(255,255,255,1); } #header .hd_logo .hd_right .btn_my .my_box .my_bb .bleft {float:left !important; width:135px; } #header .hd_logo .hd_right .btn_my .my_box .my_bb .bright {float:right !important; width:135px;} /* ===== 오른쪽검색서브메뉴 ===== */ #header .hd_logo .hd_right .btn_sch .sch_box { display:none; position:absolute; width:277px; height:30px; border:1px solid #EFEFEF;padding:10px; background-color:rgba(0,0,0,0.8); right:0px; top:40px; } #header .hd_logo .hd_right .btn_sch .sch_box .sch_bb {width:277px; margin:0px auto 0px; } #header .hd_logo .hd_right .btn_sch .sch_box .sch_bb .sch { width:277px; height:30px; border:0px solid #000; background-color:rgba(255,255,255,1); font-size: 0; line-height: 0; text-align:left; position:relative; } #header .hd_logo .hd_right .btn_sch .sch_box .sch_bb .sch .keyword { width: 240px; height: 30px; padding: 0px; border: 0; padding-left:5px; font-size:14px;} #header .hd_logo .hd_right .btn_sch .sch_box .sch_bb .sch a { position:absolute; top:0;right:3px ; } #header .hd_logo .hd_right .btn_sch .sch_box .sch_bb .sch a i{ display:block; font-size:25px;} #header-inner.fixed {width:100%; position:fixed; margin:0 auto; background:rgba(255,255,255,.97);box-shadow:0 3px 4px rgba(0,0,0,0.15); border-top:0px solid #eee; border-bottom:1px solid #eee; top:0px; z-index:5;} #header-inner { width:100%; margin:0 auto; /* background:rgba(255,255,255,.97); */ box-shadow:none; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08);transition:box-shadow 1s ease;-webkit-transition:box-shadow 1s ease; } #header-inner .mmenu { margin:0 auto; width: 1300px; text-align:center; } /* 카테고리 */ .category { position:relative; box-sizing:border-box; font-size:0; line-height:0; } .category li { position:relative; display:inline-block; vertical-align:middle; margin:0 15px; } .category li > a { display:block; color:#000; letter-spacing:0.03em; line-height:50px; font-size:11px; position: relative;} .category li:nth-child(1) > a { color:#FF9696; } .category li:hover > a {color:#999; /* text-decoration: underline; */ } .category li:last-child > a { margin-right:0;} /* 중분류카테고리 */ .category .sub-category { position:absolute; z-index:9;left:50%; transform:translateX(-50%); top:45px;height:0; visibility:hidden; opacity:0; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .category > li:hover .sub-category { top:49px;opacity:1; visibility:visible; } .category .sub-category > ul { border: 1px solid #e8e8e8; padding: 15px 0; min-width: 120px; background: #fff;} .category .sub-category > ul > li { display:block; margin: 0px; } .category .sub-category > ul > li > a { display: block;width:100%;color: #000;line-height: 24px;font-size: 11px; text-align: center; } .category .sub-category > ul > li:hover > a { color:#999; } .-mov { -ms-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /* ============= 주메뉴영역 =============== */ #hd_Allbox { width:100%; margin:0 auto; height:40px; border:0px solid #FF9696;position:relative; filter:alpha(opacity=100); opacity:1; } #hd_menu { width:1300px; margin:0 auto; height:40px; } #hd_menu .hd_left { float:left; } #hd_menu .hd_left .menu { display:inline-block; *display:inline; padding-right:20px; border:0px solid #000 ; } /* 메뉴간격 */ #hd_menu .hd_left .menu a { display:block; line-height:40px; font-size:13px; color:#000; text-align: center; font-weight:400;} #hd_menu .hd_left .menu a:hover { color:#999; } #hd_menu .hd_left .ssub-list .subAll { width:100%; clear:both; display:none; position:absolute; top: 40px; left: 0px; overflow: hidden; background:#FCFCFC; margin: 0 auto; border-top:1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; padding: 20px 0;} #hd_menu .hd_left .ssub-list .subbox { width:1300px; margin: 0 auto; text-transform: uppercase; } #hd_menu .hd_left .ssub-list .subbox .subcate { float: left; width: 300px; } #hd_menu .hd_left .ssub-list .subbox .subcate li { text-align: left; margin-bottom:5px; } #hd_menu .hd_left .ssub-list .subbox .subcate li a { height:20px !important; line-height:20px !important; width:45%; text-align:left; display:inline-block; font-size:12px !important; color:#666; font-family: 'Lato', 'Roboto','Nanum Square', "Nanum Gothic" , sans-serif; padding-left:10px !important; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } #hd_menu .hd_left .ssub-list .subbox .subcate li a:hover {padding-left:15px !important; color:#000; font-weight:700; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } #hd_menu .hd_left .ssub-list .subbox .subimg {float: right; } #hd_menu .hd_left .ssub-list .subbox h2 { display: block; font-size: 14px;text-align: center; color: #333;letter-spacing: 1px;border-bottom: 1px solid #ccc; margin-bottom: 15px; padding-bottom: 5px; font-family: 'Lato','Roboto', 'Nanum Square', 'Nanum Gothic', Arial; } /*-----------------*/ /***** Apollo *****/ /*-----------------*/ figure.effect-apollo {background: #000;} figure.effect-apollo img {opacity: 0.95;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale3d(1.05,1.05,1);transform: scale3d(1.05,1.05,1);} figure.effect-apollo figcaption::before {position: absolute;top: 0;left: 0;width: 100%; height: 100%;background: rgba(255,255,255,0.5); content: '';-webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s;-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);} figure.effect-apollo p {position: absolute;right: 5px ;bottom: 0;margin: 3em;padding: 0 1em;max-width: 180px;border-right: 4px solid #fff;text-align: right;opacity: 0;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;} figure.effect-apollo h2 {text-align: left;} figure.effect-apollo:hover img {opacity: 0.6;-webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1);} figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);} figure.effect-apollo:hover p { opacity: 1;-webkit-transition-delay: 0.1s;transition-delay: 0.1s;} /* ------ 서브이미지롤어버기능끝 ------ */ /* BASIC css end */