@charset "utf-8";

#container{background-color:#f7f9fc;}

/* 스크롤시 상단고정 */
#sidebar.fixed{position:fixed;top:150px;width:100%;z-index:3;}
#sidebar.fixed::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--colors-gray600);}

/* 서브레이아웃공통 */
#sidebar{height:60px;background:var(--colors-white);}
#sidebar h2{display:none;}

#sidemenu{display:flex;width:1280px;align-items:center;margin:0 auto;text-align:left;}
#sidemenu .home a{display:block;width:16px;height:16px;padding:17px;background:url(/nanum/site/builder/skin/snote/img/common/home_icon.png) no-repeat 50% 50% / 16px;text-indent:-9999px;}
#sidemenu .depth{position:relative;min-width:160px;}
#sidemenu .depth::before{content:'';position:absolute;top:50%;left:0;width:1px;height:18px;background:var(--colors-gray600);transform:translate(0, -50%);}
#sidemenu .depth .tit > a{display:block;min-width:105px;padding:0 60px 0 20px;line-height:60px;font-weight:600;color:var(--colors-black);}
#sidemenu .depth .tit > a::after{content:'';position:absolute;top:50%;right:15px;transform:translate(0, -50%);width:24px;height:24px;background:url(/nanum/site/builder/skin/snote/img/common/left_blk.png) no-repeat center / 24px;}
#sidemenu .depth > ul{display:none;position:absolute;top:80%;left:0;width:100%;padding:20px 0;border:1px solid var(--colors-blue);background:var(--colors-white);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:8px 20px;font-weight:700;font-size:1.6rem;color:var(--colors-gray700);box-sizing:border-box;}
#sidemenu .depth > ul > li > a[target="_blank"] img{width:10px;height:10px;margin-left:8px;}
#sidemenu .depth > ul > li.on{background:#f4f8fd;}
#sidemenu .depth > ul > li.on > a{color:var(--colors-black);}

#container.wide #location{display:none;}

#container.wide #cont_head{position:relative;display:block;margin:55px auto 0;}
#container.wide #cont_head h3{margin-bottom:70px;font-weight:700;font-size:4rem;line-height:1.3;}
#container.wide .share{position:absolute;top:-105px;right:0;display:flex;}
#container.wide .share > a{display:block;margin-left:20px;width:40px;height:40px;background:var(--colors-gray200) no-repeat center;border-radius:50%;box-sizing: border-box;text-indent:-9999px;z-index:6;}
#container.wide .share > a.btn_print{background-image:url(/nanum/site/builder/skin/snote/img/common/btn_print.png);background-size:22px 20px;}
#container.wide .share > a.btn_share{background-image:url(/nanum/site/builder/skin/snote/img/common/btn_share.png);background-size:18px 21px;}
#container.wide .share #share_cont{position:absolute;top:0;right:0;padding:50px 0 10px;width:40px;background:var(--colors-white);border:1px solid var(--colors-gray500);border-radius:40px;box-sizing:border-box;z-index:5;}
#container.wide .share #share_cont ul li{padding:10px 0;text-align:center;}
#container.wide .share #share_cont ul li a{display:block;}
#container.wide .share #share_cont ul li a img{width:auto;height:18px;}

#cont_wrap{min-height:800px;}

/* 다크모드 */
.dark-mode #container{background-color:#111;}
.dark-mode #container.wide #sidemenu .depth > ul > li.on{background:#111;}
.dark-mode #container.wide .share > a.btn_print{background-image:url(/nanum/site/builder/skin/snote/img/common/btn_print_w.png);}
.dark-mode #container.wide .share > a.btn_share{background-image:url(/nanum/site/builder/skin/snote/img/common/btn_share_w.png);}
.dark-mode #container.wide .share #share_cont ul li:nth-child(3) img,
.dark-mode #container.wide #sidemenu .depth > ul > li > a img{filter:invert(100%) sepia(0) saturate(0) hue-rotate(209deg) brightness(117%) contrast(100%);}
.dark-mode #container.wide #sidebar .wsize .home a{background-image:url(/nanum/site/builder/skin/snote/img/common/home_icon_w.png)}

/********************태블릿********************/
@media all and (max-width:1024px){
	
/* 스크롤시 상단고정 */
#sidebar.fixed{top:50px;}

#container.wide{padding-bottom:60px;}

#container.wide .share{display:none;}
#container.wide #cont_head{margin-top:30px;}
#container.wide #cont_head h3{margin-bottom: 40px;}

#sidebar{height:50px;}
#sidemenu .depth .tit > a{line-height:50px;}

}

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

#container.wide #cont_head{margin-top:20px;}
#container.wide #cont_head h3{display:none;}

#sidemenu{width:100%;}
#sidemenu .home{display:none;}
#sidemenu .depth{min-width:auto;flex:1;}
#sidemenu .home + .depth::before{display:none;}
#sidemenu .depth:nth-child(3):before{display:none;}
#sidemenu .depth .tit > a{padding-right:40px;}
#sidemenu .depth > ul{padding:10px 0;left: 1%;width: 98%;}
#sidemenu .depth > ul > li > a{padding:8px 15px;}
	
}