@charset "utf-8";

#shGnb{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;height:100px;padding:0 50px;transition:all .2s}
#shGnb.on{border-bottom:1px solid #e1e1e1}
#shGnb.sub{position:absolute}
.sh_lnb_bg{display:none;position:absolute;top:0;left:0;width:100%;height:280px;background-color:#fff}

/* 로고 */
#shGnb .sh_logo img{width:105px}

/* 대분류  */
#shGnb .sh_nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#shGnb .sh_nav > ul > li{float:left;position:relative;line-height:100px;transition:all .4s ease-in-out}
#shGnb .sh_nav > ul > li > a{position:relative;z-index:20;display:block;padding:0 25px;font-size:17px;font-weight:600;color:#fff;transition:all .4s}
#shGnb .sh_nav > ul > li:hover > a{color:var(--primary)!important}
#shGnb .sh_nav > ul > li:hover .sh_lnb_s:before{width:calc(100% + 40px);opacity:1}
#shGnb .sh_nav > ul > li:hover .sh_lnb_s a{color:#777}
#shGnb .sh_nav > ul > li:hover .sh_lnb_s a:hover{color:var(--primary)}
#shGnb.on .sh_nav > ul > li > a{padding:0 50px;color:#222}

/* 소분류 */
#shGnb .sh_lnb_s{display:none;position:absolute;left:50%;transform:translateX(-50%);min-width:100%;width:max-content;padding-top:25px;min-height:145px}
#shGnb .sh_lnb_s:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:-2px;z-index:-1;transform:translateX(-50%);width:0;height:4px;background:var(--primary);transition:all .2s}
#shGnb .sh_lnb_s li a{display:block;font-size:15px;font-weight:500;line-height:2.1;text-align:center;color:#555;transition:all .2s}
#shGnb .sh_lnb_s li a:hover{color:var(--primary)}

/* 바로가기 버튼 */
#shGnb .sh_util{display:flex;gap:7px}
#shGnb .sh_util li{position:relative;display:flex;align-items:center}
#shGnb .sh_util a.link{position:relative;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#111;background-color:#fff;border-radius:5px;padding:11px 25px;transition:background-color 0.3s 0.1s, color 0.2s}
#shGnb .sh_util a.link:hover{background-image:linear-gradient(to right, #1febd1 0%, #1996e6 100%);color:#fff}
#shGnb .sh_util a.link.blue{background-color:var(--primary);color:#fff}
#shGnb .sh_util a.link.blue:hover{background-color:#1091d7;background-image:none}
#shGnb .sh_util a.link > span{position:relative;overflow:hidden}
#shGnb .sh_util a.link .pr{position:relative;display:inline-block;transition:transform 0.3s}
#shGnb .sh_util a.link .pa{position:absolute;top:0;left:0;width:100%;transform:translateY(-100%);transition:transform 0.3s}
#shGnb .sh_util a.link:hover .pr{transform:translateY(100%)}
#shGnb .sh_util a.link:hover .pa{transform:translateY(0)}

/* News tab */
.news-tab{opacity:0;visibility:hidden;transform:translateY(-10px);position:absolute;top:calc(100% + 14px);right:0;z-index:99;max-width:433px;width:100vw;padding:30px 33px 20px 30px;background-color:#fff;border-radius:12px;overflow:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s}
.news-tab.show{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s}

.news-tab .swiper-container{width:100%;height:100%}
.news-tab .swiper-slide a{display:flex;align-items:center;gap:40px}
.news-tab .swiper-slide a .thumb-box{max-width:180px;width:100%;aspect-ratio:180 / 98;border-radius:10px;overflow:hidden}
.news-tab .swiper-slide a .thumb-box img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.news-tab .swiper-slide a:hover .thumb-box img{transform:scale(1.07)}
.news-tab .swiper-slide a .text-box{display:flex;flex-direction:column;gap:12px}
.news-tab .swiper-slide a .text-box .cate{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--primary)}
.news-tab .swiper-slide a .text-box .cate::before{content:'';width:4px;aspect-ratio:1;border-radius:10px;background-color:var(--primary)}
.news-tab .swiper-slide a .text-box .subject{font-size:16px;font-weight:700;color:#111;line-height:1.2}
.news-tab .swiper-slide a .text-box .date{font-size:13px;font-weight:500;color:#aaa}
.news-tab .swiper-controller{display:flex;align-items:center;gap:18px;padding-top:15px}
.news-tab .swiper-controller .swiper-pagination{position:static;width:27px;font-family:var(--k-font);font-size:14px;font-weight:500;letter-spacing:-0.5px;color:#aaa}
.news-tab .swiper-controller .swiper-pagination .swiper-pagination-current{color:#111}

.news-tab .swiper-controller .swiper-active-bar{position:relative;max-width:272px;width:100%;height:1px;background-color:rgba(0,0,0,0.2)}
.news-tab .swiper-controller .swiper-active-bar .bar{overflow:hidden;position:relative;width:100%;height:2px;background-color:#111}
.news-tab .swiper-controller .swiper-active-bar .bar {position:relative;width:100%;height:2px;background:#e0e0e0;overflow:hidden}
.news-tab .swiper-controller .swiper-active-bar .bar::after {content:"";position:absolute;top:0;left:0;height:100%;width:0;background:var(--primary)}
.news-tab .swiper-controller .swiper-active-bar.active.animate .bar::after {width:100%;transition:width 3.2s linear}
.news-tab .swiper-controller .link-board{display:flex;align-items:center;justify-content:center;width:35px;aspect-ratio:1;border-radius:100px;background-color:var(--primary);color:#fff}
.news-tab .swiper-controller .link-board span{font-size:20px;transition:transform 0.2s}
.news-tab .swiper-controller .link-board:hover span{transform:rotate(-45deg)}