@charset "utf-8";
/*서브 페이지 넓이(기본값으로 시안마다 수정 필요)*/
.container {width: 1280px;}


/* 서브비주얼 */
#subVisual { position:relative; width:100%; height:200px; background-color:#f4f9ff; }
#subVisual:after { display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%; background-image:url('/template/common/tmpt/sub_visual1.png'); background-position:center; background-repeat:no-repeat; }

.subTitle { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; z-index:2; }
.subTitle h2 { color:#222; font-size:45px; font-weight:700; }

.nav { display:inline-block; margin-top:25px; }
.nav .navItem { position:relative; float:left; font-size:16px; }
.nav .navItem a { color:#787878; }
.nav .navItem:not(:first-child) { margin-left:18px; padding-left:21px; }
.nav .navItem:not(:first-child):before { display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:6px; height:11px; background-image:url('/template/common/tmpt/nav_arrow1.png'); background-position:center; background-repeat:no-repeat; }

.nav .home { width:13px; margin-top:-1px; }


/* 사이드 메뉴 */
#subContent { margin-top:50px; }

.sideArea { float:left; width:250px; }
.sideTitle { width:100%; background-image:url('/template/common/tmpt/title_bg1.png'); background-position:left top; background-color:#0853b0; background-repeat:no-repeat; margin-bottom:10px; padding:48px 0; text-align:center; }
.sideTitle span { color:#fff; font-size:26px; font-weight:700; }

.sideMenu a { display:block; width:100%; height:100%; }
.sideMenu .sideMenuItem { margin-top:7px; }
.sideMenu .sideMenuItem > a { border:1px solid #d7d7d7; background-image:url('/template/common/tmpt/menu1.png'); background-position:center right 15px; background-repeat:no-repeat; padding:18px 15px; font-size:16px; }

.sideMenu .sideDepth2List { display:none; border:1px solid #0852af; background:#fff; padding:6px 0; font-size:15px; }
.sideMenu .sideDepth2List a { padding:8px 20px; color:#555; }

.sideMenu .sideDepth2List a span { position:relative; padding-left:10px }
.sideMenu .sideDepth2List a span:before { display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:3px; height:3px; background:#555; }

/* 사이드 메뉴 active */
.sideMenu .sideMenuItem.active { background-color:#0852af; }
.sideMenu .sideMenuItem.active > a { border:0; background-image:url('/template/common/tmpt/menu1_on.png'); color:#fff; }
.sideMenu .sideMenuItem.active .sideDepth2List { display:block; }
.sideMenu .sideDepth2List .active { color:#0852af; font-weight:500; }


/* 컨텐츠 */
#contents { float:right; width:calc(100% - 250px); min-height:520px; margin-top:20px; margin-bottom:100px; padding-left:50px; }



/* ---------------------------------------- 반응형 ---------------------------------------- */
/* ---------------------------- PC ---------------------------- */
@media all and (max-width: 1600px) {

}

@media all and (max-width: 1440px) {

}

@media all and (max-width: 1366px) {

}

@media all and (max-width: 1280px) {
    /*서브 페이지 넓이(기본값으로 시안마다 수정 필요)*/
    .container { width:95%; }

    /* 사이드 메뉴 */
    .sideArea { width:20%; }

    /* 컨텐츠 */
    #contents { width:77%; margin-top:0; padding-left:0; }
}

@media all and (max-width: 1200px) {

}


/* ---------------------------- 태블릿 ---------------------------- */
@media all and (max-width: 1024px) {
    html { font-size:62.5%; }

    /* 서브비주얼 */
    .subTitle h2 { font-size:3.8rem; }
    .nav .navItem { font-size:1.5rem; }

    /* 사이드 메뉴 */
    .sideArea { display:none; width:23%; }
    .sideTitle span { font-size:2.4rem; }

    .sideMenu .sideMenuItem > a,
    .sideMenu .sideDepth2List { font-size:1.5rem; }

    /* 컨텐츠 */
    #contents { width:100%; min-height:auto; }
}

@media all and (max-width: 820px) {
    /* 서브비주얼 */
    #subVisual { height:18rem; }
    .subTitle h2 { font-size:3.5rem; }
    .nav { margin-top:1.5rem; }
}

@media all and (max-width: 750px) {

}


/* ---------------------------- 모바일 ---------------------------- */
@media all and (max-width: 640px) {
    /* 서브비주얼 */
    .subTitle h2 { font-size:3rem; }
    .nav .navItem { font-size:1.4rem; }
    .subTitle { width:100%; }
}

@media all and (max-width: 490px) {
    /* 서브비주얼 */
    #subVisual { height:15rem; }
}

@media all and (max-width: 460px) {
    /* 서브비주얼 */
    .subTitle h2 { font-size:2.4rem; }
}

@media all and (max-width: 385px) {

}

@media all and (max-width: 340px) {

}