@charset "utf-8";

/* 마우스커서 */
#topGnbWrap{position:fixed;top:0;min-width:1200px;width:100%;height:95px;padding:0 90px;border-bottom:1px solid rgba(255,255,255,0);transition:all .3s}

/* 스크롤 */
#topGnbWrap.fixed{border-bottom:1px solid #e1e1e1;background-color:#fff}
#topGnbWrap.fixed #topGnb > li > a{color:#111}

#topGnbWrap.on{border-bottom:1px solid #e1e1e1;background-color:#fff}
#topGnbWrap.on #menuLine{background-color:#f1b22c}
#topGnbWrap.on #topGnb > li > a{color:#222}

/* 로고 */
#top_logo{float:left;position:relative;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)}

/* 대분류  */
#topGnb{position:absolute;top:0;right:65px;z-index:1}
#topGnb:after{display:block;content:"";visibility:hidden;clear:both}
#topGnb > li{float:left;position:relative;padding:0 45px}
#topGnb > li > a{display:block;height:96px;padding-top:40px;font-size:15px;font-weight:600;color:#fff;transition:all .2s;font-family:"poppins", 'notokr-medium'}
#menuLine{position:absolute;bottom:-1px;left:50%;width:0;height:1px;background-color:transparent;transition:all 0.5s ease-in-out}

/* 소분류 */
.top_lnb{display:none;position:absolute;width:100%;min-height:140px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding-top:15px}
.top_lnb li a{display:block;margin:0px;font-size:13.5px;line-height:26px;text-align:center;color:#222;transition:color .2s;font-family:'notokr-regular'}
.top_lnb li a:hover{color:#999}

/* 전체메뉴배경 */
.top_nav_bg{position:fixed;width:100%;display:none;top:95px;height:190px;background:#fff;-webkit-box-shadow:0px 12px 45px -17px rgba(0,0,0,0.12);box-shadow:0px 12px 45px -17px rgba(0,0,0,0.2)}


/* 메뉴 전체보기 버튼 ----------------------------------------- */
#allmn_btn_wrap{position:fixed;top:28px;right:33px;z-index:1002}
#allmn_btn_wrap, #allmn_btn_wrap *{box-sizing:border-box}
#allmn_btn{display:block;position:relative;width:39px;height:40px;cursor:pointer;transition:all .2s}
#allmn_btn span, #allmn_btn span:before, #allmn_btn span:after{position:absolute;z-index:20;width:20px;height:2px;background-color:#fff}
#allmn_btn span{position:absolute;top:50%;left:18px;margin-top:-1px;-webkit-transition:all ease .2s;transition:all ease .2s;background-color:transparent}
#allmn_btn span:before, #allmn_btn span:after{content:'';right:0;z-index:-1;-webkit-transition:all ease .2s;transition:all ease .2s}
#allmn_btn span:before{top:-5px}
#allmn_btn span:after{width:13px;top:5px}
#allmn_btn.active{z-index:200}
#allmn_btn.active span:before{-webkit-transform:translateY(5px) translateX(0) rotate(45deg);-ms-transform:translateY(5px) translateX(0) rotate(45deg);transform:translateY(5px) translateX(0) rotate(45deg);background:#333}
#allmn_btn.active span:after{width:20px;-webkit-transform:translateY(-5px) translateX(0) rotate(-45deg);-ms-transform:translateY(-5px) translateX(0) rotate(-45deg);transform:translateY(-5px) translateX(0) rotate(-45deg);background:#333}



#allmn_btn_wrap, #allmn_btn_wrap * {box-sizing: border-box}

#allmn_btn_wrap {position: fixed;top: 34px;right: 60px;z-index: 1002}
#allmn_view_wrap.active {z-index: 1000;opacity: 1}

#allmn_view_wrap {position: fixed;z-index: -11;top: 0px;right: 0px;width: calc(100% - 100px);height: 100vh;max-height: 960px;opacity: 0;transition: all 1s ease 0s;background: rgb(255, 255, 255)}

#allmn_view_wrap.active .all_nav {left: 0px;opacity: 1;z-index: 100}
#allmn_view_wrap .all_nav {position: absolute;left: -50%;top: 0px;width: 70%;height: 100%;opacity: 0;transition: all 1s ease 0s}

#allmn_view_wrap .all_nav_list {position: absolute;left: 200px;top: 30%;width: 500px}
#allmn_view_wrap .all_nav .nav_tit {margin-bottom: 20px;font-weight: 700;font-size: 26px;color: rgb(51, 51, 51);font-family: Poppins, sans-serif}

#allmn_view_wrap .all_nav .all_list li {font-size: 16px;letter-spacing: -1px;font-family: notokr-medium}
#allmn_view_wrap .all_nav .all_list a {position: relative;display: block;color: rgb(102, 102, 102);padding: 10px 0px 10px 15px;transition: all 0.3s ease 0s}
#allmn_view_wrap .all_nav .all_list a:before{position:absolute;left:0;top:21px;content:'';width:3px;height:3px;background:rgba(0,0,0,.2)}
#allmn_view_wrap .all_nav .all_list a:hover{color:#333}

#allmn_view_wrap .cs_txt {margin-top: 50px;font-size: 14px;line-height: 30px;color: rgb(102, 102, 102);font-family: notokr-regular}
#allmn_view_wrap .cs_txt i {display: inline-block;margin-right: 10px;color: rgb(51, 51, 51)}
#allmn_view_wrap .cs_txt li:nth-child(3) i, #allmn_view_wrap .cs_txt li:nth-child(4) i{opacity:0}
#allmn_view_wrap .cs_txt li{font-size:14px;line-height:1.6;color:#777;font-family:'notokr-regular'}
#allmn_view_wrap .cs_txt li:nth-child(2){padding-top:10px}
#allmn_view_wrap .all_nav_img {position: absolute;right: 0px;width: 30%;height: 100%;overflow: hidden;background: rgb(238, 226, 181)}
#allmn_view_wrap .all_nav_img .nav_img {position: absolute;width: 100%;height: 100%;background-size: cover;opacity: 0}

#allmn_view_wrap .all_nav_img .img01 {z-index:3;background: url(/sh_img/hd/top_menu/img/nav_img01.jpg) no-repeat}
#allmn_view_wrap .all_nav_img .img02 {z-index:2;background: url(/sh_img/hd/top_menu/img/nav_img02.jpg) no-repeat}
#allmn_view_wrap .all_nav_img .img03 {z-index:1;background: url(/sh_img/hd/top_menu/img/nav_img03.jpg) no-repeat}

#allmn_view_wrap .all_nav_img .on {z-index: 10;animation-name: navimg;animation-duration: 1s;animation-fill-mode: forwards}
#allmn_view_wrap .all_nav_img .zidx {z-index: 9;opacity: 1}

@keyframes navimg {
	0% {left:-100%;opacity:1}
	100% {left:0;opacity:1}
}