@charset "utf-8";

#container{/*background-color:#f7f9fc;*/}
#container .wsize{display:flex;justify-content:space-between;margin-top:60px;}

/* 스크롤시 상단고정 */
#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);}

/* 서브레이아웃공통 */
#container .share{display:flex;position:absolute;right:0;bottom:25px;}
#container .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 .share > a.btn_print{background-image:url(/nanum/site/builder/skin/cicenter/img/common/btn_print.png);background-size:22px 20px;}
#container .share > a.btn_share{background-image:url(/nanum/site/builder/skin/cicenter/img/common/btn_share.png);background-size:18px 21px;}
#container .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 .share #share_cont ul li{padding:10px 0;text-align:center;}
#container .share #share_cont ul li a{display:block;}
#container .share #share_cont ul li a img{width:auto;height:18px;}

#sidebar{width:230px;}
#sidebar h2{margin-bottom:30px;display:flex;justify-content:center;align-items:center;height:160px;font-weight:700;font-size:2.8rem;color:var(--colors-white);background:linear-gradient(145deg, #02dff3, #001b81);border-radius: 15px;}

#sidemenu > ul > li{margin-top:-1px;border:1px solid var(--colors-gray800);border-left:1px solid var(--colors-white);border-right:1px solid var(--colors-white);}
#sidemenu > ul > li:first-child{border-top:1px solid var(--colors-white)}
#sidemenu > ul > li.on,
#sidemenu > ul > li:hover{position:relative;border:1px solid var(--colors-black);z-index:2;}
#sidemenu > ul > li > a{display:block;padding:18px 45px 18px 25px;font-weight:500;font-size:1.8rem;line-height:1.4;color:var(--colors-gray700);text-align:left;}
#sidemenu > ul > li.on > a,
#sidemenu > ul > li:hover > a{font-weight:700;color:var(--colors-black);}
#sidemenu > ul > li.on > a::after,
#sidemenu > ul > li:hover > a::after{content:'';overflow:hidden;position:absolute;right:25px;top:25px;display:block;width:8px;height:8px;border-top:2px solid #333;border-right:2px solid #333;transform:rotate(45deg);transition:transform .3s;}
#sidemenu > ul > li div{display:none;padding:23px 29px;background:var(--colors-gray300);border-top:1px dashed var(--colors-gray600);}
#sidemenu > ul > li.on div{display:block;}
#sidemenu > ul > li.on div ul li:nth-child(n+2){margin-top:15px;}
#sidemenu > ul > li.on div ul li a{display:block;font-weight:500;color:var(--colors-black);}
#sidemenu > ul > li.on div ul li.on a{font-weight:700;color:var(--colors-black);text-decoration:underline;}

#cont_wrap{margin-top:80px;min-height:800px;}
#contents{width:980px;}
#cont_head{display:flex;justify-content:space-between;position:relative;height:160px;border-bottom:2px dashed var(--colors-gray800);box-sizing:border-box;}
#cont_head h3{padding-top:80px;font-weight:700;font-size:4rem;line-height:1.3}

#location{position:absolute;top:30px;}
#location ul,
#location li{display:flex;justify-content:center;align-items:center;gap:15px;}
#location li::before{content:'';display:flex;width:3px;height:3px;background:var(--colors-gray600)}
#location .home:before{display:none;}
#location .home a{display:block;width:18px;height:18px;background:url(/nanum/site/builder/skin/cicenter/img/common/home_icon.png) no-repeat 50% 50% / 18px;text-indent:-9999px;}

/********************태블릿_가로모드********************/
@media (max-width: 1200px){

#container .wsize{gap:30px;justify-content:flex-start;}
#sidebar{flex-shrink:0;width:210px}
	
}

/********************태블릿********************/
@media all and (max-width:1024px){
	
/* 스크롤시 상단고정 */
#container .wide.fixed{position:fixed;top:50px;width:100%;z-index:3;background: var(--colors-white);}
#container .wsize{display:block;padding:0;margin-top:0;}

#container #location,
#container .share{display:none;}

#sidebar{width:100%;}
#sidebar h2{display:none;}
#sidemenu > ul{display:none;}

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

#cont_wrap{margin-top:0;min-height:auto;}
#cont_head{margin-bottom:40px;height:auto;border-bottom:0;}
#cont_head h3{padding-top:0;}

#contents{padding:0 2vw;margin-top:30px;width:100%;box-sizing:border-box;}

}

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

#sidemenu .wide{width:100%;padding:0 2vw;box-sizing:border-box;}
#sidemenu .wide .home{display:none;}
#sidemenu .wide .depth{min-width:auto;flex:1;}
#sidemenu .wide .home + .depth::before{display:none;}

#container .wide #sidemenu .depth > ul{padding:10px 0;left: 1%;width: 98%;}
#container .wide #sidemenu .depth > ul > li > a{padding:8px 15px;}
#container .wide #sidemenu .depth .tit a{padding-right:40px;}
#container .wide #sidemenu .depth .tit a span{display:block;white-space:nowrap;overflow:hidden;}

#container #cont_head{margin:20px 0 0;}
#container #cont_head h3{display:none;}
#contents{margin-top:0;}
	
}


/********************웹********************/
@media all and (min-width:1025px) {

#sidemenu > ul{display:block;}
#sidemenu .wide{display:none;}

}