@charset "utf-8";

/* 중간영역 */
#container{overflow:hidden;position:relative;width:1280px;margin:0 auto;padding:40px 0 160px;}

/* 서브레이아웃공통 */
#sidebar{transition:background 0.2s;}
#sidebar h2{display:none;}

#sidemenu{display:flex;align-items:center;}
#sidemenu .home{margin-right:30px;}
#sidemenu .home a{display:block;width:45px;height:45px;background:url(/nanum/site/builder/skin/main/img/common/home_icon.png) no-repeat 50% 50% #eef1fc;background-size:auto 16px;border-radius:100%;text-indent:-9999px;}
#sidemenu .depth{display:flex;align-items:center;position:relative;min-width:160px;min-height:45px;}
#sidemenu .depth::before{content:'';position:absolute;top:50%;left:0;width:1px;height:18px;background:#c3c7cb;transform:translate(0, -50%);}
#sidemenu .depth .tit{width:100%;}
#sidemenu .depth .tit > a{display:flex;align-items:center;min-width:105px;min-height:45px;padding:0 52px 0 30px;font-weight:600;color:#000;}
#sidemenu .depth .tit > a::after{content:'';position:absolute;top:50%;right:30px;width:12px;height:12px;background:url(/nanum/site/builder/skin/main/img/common/sidemenu_icon.png) no-repeat;background-size:cover;transition:transform 0.3s ease;transform:translate(0, -50%);}
#sidemenu .depth .tit > a.active{color:#001b89;}
#sidemenu .depth .tit > a.active::after{transform:translate(0, -50%) rotate(180deg);}
#sidemenu .depth > ul{overflow:hidden;display:none;position:absolute;top:100%;left:0;width:100%;border:1px solid #e5e5e5;background:#fff;box-shadow:5px 5px 20px rgba(0,0,0,0.2);border-radius:10px;box-sizing:border-box;z-index:5;}
#sidemenu .depth > ul > li > a{display:block;padding:13px 20px;font-weight:500;font-size:1.5rem;color:#888;box-sizing:border-box;}
#sidemenu .depth > ul > li:nth-child(n+2) > a{border-top:1px solid #e5e5e5;}
#sidemenu .depth > ul > li > a[target="_blank"] img{width:10px;height:10px;margin-left:8px;}
#sidemenu .depth > ul > li > a:hover,
#sidemenu .depth > ul > li.on > a{background:#f9f9f9;font-weight:600;color:#000;}
#sidemenu .home + .depth + .depth + .depth,
#sidemenu .home + .depth + .depth + .depth + .depth{display:none;}

#container #location{display:none;}

#container #cont_head{position:relative;display:block;}
#container #cont_head h3{min-height:52px;margin-bottom:70px;font-weight:700;font-size:4rem;line-height:1.3;}

#container .share{display:flex;gap:10px;position:absolute;top:-105px;right:0;}
#container .share > [class^="btn_"]{position:relative;display:block;width:45px;height:45px;border-radius:100%;border:1px solid #e5e5e5;box-sizing:border-box;text-indent:-9999px;cursor:pointer;}
#container .share > [class^="btn_"]::after{content:'';position:absolute;top:50%;left:50%;width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transform:translate(-50%,-50%);}
#container .share > .btn_copy::after{background-image:url(/nanum/site/builder/skin/main/img/common/btn_copy.png);}
#container .share > .btn_print::after{background-image:url(/nanum/site/builder/skin/main/img/common/btn_print.png);}
#container .share > .btn_share::after{background-image:url(/nanum/site/builder/skin/main/img/common/btn_share.png);}

#container .share #share_cont{display:flex;flex-direction:column;align-items:center;position:absolute;top:-1px;right:-1px;padding:45px 0 10px;width:45px;background:#fff;border:1px solid #e5e5e5;border-radius:45px;box-sizing:border-box;text-indent:0;}
#container .share #share_cont a{position:relative;display:block;width:100%;height:40px;text-align:center;text-indent:-9999px;}
#container .share #share_cont a::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;background-repeat:no-repeat;background-size:cover;transform:translate(-50%,-50%);}
#container .share #share_cont a.facebook::after{background-image:url(/nanum/site/builder/skin/main/img/common/share_facebook.png);}
#container .share #share_cont a.twitter_x::after{background-image:url(/nanum/site/builder/skin/main/img/common/share_twitter_x.png);}

#contents{padding-top:60px;}
#cont_wrap{min-height:800px;}

/* 스크롤시상단고정 */
#sidebar.fixed{position:fixed;top:0;left:0;width:100%;padding:15px 0;background:#001b89;z-index:20;}
#sidebar.fixed #sidemenu{width:1280px;margin:0 auto;}
#sidebar.fixed #sidemenu .depth .tit > a{color:#fff;}
#sidebar.fixed #sidemenu .depth .tit > a::after{filter:invert(100%) sepia(0%) saturate(7487%) hue-rotate(349deg) brightness(107%) contrast(101%);}

/********************태블릿********************/
@media all and (max-width:1024px){
	
#container{width:100%;margin:0;padding-top:110px;}

#container .share{display:none;}
#container #cont_head h3{display:none;}

#sidebar{position:fixed;left:0;top:60px;width:100%;height:50px;z-index:10;background:#001b89;}

#sidemenu{width:100%;height:100%;}
#sidemenu .home{display:none;}
#sidemenu .home + .depth > ul{border-left:0;}
#sidemenu .home + .depth::before{display:none;}
#sidemenu .depth{flex:1;height:100%;}
#sidemenu .depth::before{top:0;height:100%;background:rgba(255,255,255,0.5);transform:none;}
#sidemenu .depth .tit{height:100%;}
#sidemenu .depth .tit > a{min-height:100%;padding:0 52px 0 20px;font-size:1.6rem;color:#fff;}
#sidemenu .depth .tit > a::after{right:20px;filter:invert(100%) sepia(0%) saturate(7487%) hue-rotate(349deg) brightness(107%) contrast(101%);}
#sidemenu .depth .tit > a.active{color:#fff;}
#sidemenu .depth > ul{width:calc(100% + 1px);border-radius:0;border-top:0;box-shadow:none;}
#sidemenu .depth:nth-child(5){display:none;}

#contents{padding-top:30px;}
#cont_wrap{min-height:100vh;padding:0 20px;box-sizing:border-box;}

}

/********************모바일********************/
@media all and (max-width:767px){

#sidebar{height:50px;}
#sidebar.fixed{top:50px;}
	
#sidemenu{width:100%;}
#sidemenu .depth{display:flex;min-width:max-content;min-height:50px;}
#sidemenu .depth .tit{display:flex;width:100%;}
#sidemenu .depth .tit > a{display:flex;align-items:center;min-width:100%;height:100%;line-height:normal;box-sizing:border-box;}

}