@charset "utf-8";

#top_bnr.pc{position:fixed;left:0;top:0;right:0;z-index:5}
#top_bnr.pc .right{width:100%;cursor:pointer}
#top_bnr.pc .left{position:absolute;left:0;height:100%}

#top_bnr.mo{display:none;position:fixed;left:0;top:0;right:0;z-index:5}
#top_bnr.mo > a{flex-shrink:0;justify-content:center;align-items:center;width:50%;height:80px;font-size:14px;color:#fff;font-family:'NEXEN_TIRE_Regular' }
#top_bnr.mo .tel{display:flex;padding-left:12%;background:url(/sh_img/hd/top_menu/mo_tel_bg.png) left top no-repeat var(--primary);background-size:auto 100%}
#top_bnr.mo .tel img{width:45px;margin-right:10px}
#top_bnr.mo .tel p{padding-top:5px}
#top_bnr.mo .tel p span{display:block;font-size:20px;line-height:1.4;font-family:'NEXEN_TIRE_Bold' }
#top_bnr.mo .blog{display:flex;flex-direction:column;align-items:flex-start;padding-left:10px;background:url(/sh_img/hd/top_menu/mo_right_bg.png) right top no-repeat #ff819f;background-size:auto 100%}
#top_bnr.mo .blog img{width:45px;margin-left:10px}
#top_bnr.mo .blog p{padding-top:5px}
#top_bnr.mo .blog p span{display:block;font-size:20px;line-height:1.4;font-family:'NEXEN_TIRE_Bold' }
#top_bnr.mo .inq{display:flex;flex-direction:column;padding-right:20%;background:url(/sh_img/hd/top_menu/mo_inq_bg.png) 98% bottom no-repeat #ff819f;background-size:auto 100%}
#top_bnr.mo .inq .stxt span{color:#fff889}
#top_bnr.mo .inq .btxt{display:flex;align-items:center;margin-top:4px;border-radius:30px;padding:5px 10px;color:#222;background:#fff}
#top_bnr.mo .inq .btxt span{padding-top:2px}
#top_bnr.mo .inq .btxt i{width:23px;height:23px;margin-left:8px;border-radius:50%;text-align:center;line-height:23px;background:#faeb06}

#topNav{position:fixed;right:-340px;top:0;bottom:0;z-index:10;width:340px;background-color:#162f47;transition:all .3s}
#topNav.on{right:0;box-shadow:-6px 0 10px rgba(0,0,0,.1)}
#topNav .ci_area{display:flex;justify-content:center;align-items:center;height:140px;background-color:#102335}
#navBtn{display:flex;justify-content:center;align-items:center;position:absolute;left:-46px;top:50%;transform:translateY(-50%);width:46px;height:98px;border:none;border-radius:10px 0 0 10px;
animation:flash linear 2s infinite;background-color:var(--primary);box-shadow:5px 5px 16px rgba(17,120,247,.4);transition:all .3s}
#navBtn:before{content:"\f104";font-size:26px;color:#fff;font-family:'fontawesome'}
#navBtn.on{left:-38px;width:38px;background-color:var(--primary);box-shadow:none}
#navBtn.on:before{content:"\f105"}
@keyframes flash{0%{background-color:var(--primary)}50%{background-color:#34c2e4}100%{background-color:var(--primary)}}

/* 로고 */
.logo_box{padding:30px 0}
/* 메뉴 */
#topNav .nav_lnb{overflow:hidden}
#topNav .nav_lnb li{position:relative;border-bottom:1px solid rgba(255,255,255,.15)}
#topNav .nav_lnb li a{cursor:pointer;display:block;padding-left:30px;font-size:18px;color:#fff;line-height:58px}
#topNav .nav_lnb li.on a{color:#3aa0ff}
#topNav .scr_area{overflow-y:scroll;height:calc(100% - 140px) }
#topNav .scr_area::-webkit-scrollbar{width:5px}
#topNav .scr_area::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(255,255,255,.4)}

#topNav dl{display:flex;flex-direction:column;align-items:center;padding:50px 0;font-size:15px;color:#fff;font-family:'NEXEN_TIRE_Regular'}
#topNav dl dt{padding:12px 20px 10px;margin-bottom:22px;border-radius:30px;background-color:#158bf8}
#topNav dl dd{font-size:26px;font-family:'NEXEN_TIRE_Bold'}
#topNav dl dd a{color:#fff}

@media(max-width:1024px){
#top_bnr.pc{display:none}
#top_bnr.mo{display:flex;}	
#topNav{right:-270px;width:270px}
#topNav .ci_area{height:80px}
#topNav .nav_lnb li a{padding-left:25px;font-size:16px;line-height:45px}
#topNav dl dd{font-size:22px}
}
@media(max-width:768px){
#top_bnr.mo > a{height:65px;font-size:12px}	
#top_bnr.mo .tel{padding-left:50px;background-position:-10px center}
#top_bnr.mo .tel img{width:35px}
#top_bnr.mo .tel p span{font-size:17px}
#top_bnr.mo .blog{background-position:right center}
#top_bnr.mo .blog img{width:35px}
#top_bnr.mo .blog p span{font-size:17px}
#navBtn{left:-40px;width:40px;height:65px}
.top_nav_bg{display:none;position:fixed;left:0;top:0;z-index:6;width:100vh;height:100vh;background:rgba(0,0,0,.7)}
}
@media(max-width:480px){
#top_bnr.mo .tel{position:relative;padding:0;background-image:none}	
#top_bnr.mo .tel img{width:30px}
#top_bnr.mo .tel:after{content:"전화하기";position:absolute;left:0;top:0;padding:4px 6px 3px;font-size:10px;background:rgba(0,0,0,.3);font-family:'notokr-medium'}
#top_bnr.mo .blog{position:relative;padding-left:20px;background-image:none}	
#top_bnr.mo .blog img{width:30px}
#top_bnr.mo .blog:after{content:"블로그 바로가기";position:absolute;right:0;top:0;padding:4px 6px 3px;font-size:10px;background:rgba(0,0,0,.3);font-family:'notokr-medium'}
#top_bnr.mo .inq{padding:0;background-image:none}
#top_bnr.mo .inq .btxt span{padding-top:0}
#top_bnr.mo .inq .btxt i{width:18px;height:18px;line-height:18px}
}
@media(max-width:380px){
#top_bnr.mo .tel img{width:30px;margin-right:5px}
#top_bnr.mo .tel p{font-size:11px}
#top_bnr.mo .tel p span{font-size:15px}
#top_bnr.mo .blog img{width:30px;margin-left:5px}
#top_bnr.mo .blog p{font-size:11px}
#top_bnr.mo .blog p span{font-size:15px}
}