@charset "utf-8";

/* header */
#header { border-bottom:1px solid #f7f7f7; }

.headerTop { height:46px; background:#171d33; line-height:46px; }
.headerTop a { display:block; color:#fff; }
.headerTop ul li { float:left; }

.headerTop .siteLink { float:left; }
.headerTop .siteItem.n2 a { height:100%; margin:0 14px; background:#0d998a; padding:0 30px; text-align:center; }

.headerTop .link { float:right; text-align:center; }
.headerTop #favorite,
.headerTop .bar { margin-left:14px; padding-left:19px; }

.headerBody { position:relative; height:90px; }
.headerBody a { display:block; width:100%; height:100%; }
.headerBody .logo { position:absolute; left:0; top:50%; transform:translateY(-50%); width:183px; z-index:20; }
.headerBody .btnBox { position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:20; }
.headerBody .btnBox ul li { display:inline-block; vertical-align:middle; cursor:pointer; }
.headerBody .search { width:56px; height:56px; }
.headerBody .search .searchBtn {width: 100%; height: 100%; border: none; border-radius: 50%; background-color: #fa742b; background-image: url('/template/common/tmpt/ico_search1.png');background-position: center; background-repeat: no-repeat; background-size: 40%; font-size: 0;}
.headerBody .allMenu { position:relative; width:24px; height:23px; margin-left:20px; }
.headerBody .menuBar { position:absolute; left:0; width:100%; height:3px; background:#fa742b; }
.headerBody .barTop { top:0; }
.headerBody .barTop { top:10px; }
.headerBody .barBottom { bottom:0; }

.bar { position:relative; }
.bar:before { display:block; position:absolute; top:50%; left:0; width:1px; height:12px; background:rgba(255,255,255,0.6); transform:rotate(30deg) translateY(-50%); }


/* gnb */
#gnb { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; }
#gnb a { display:block; width:100%; height:100%; }

.depth1List,
.depth1Menu .depth1Item { height:100%; }

.depth1List { float:right; padding-right:12%; }
.depth1Menu .depth1Item { float:left; width:140px; text-align:center; font-size:17px; font-weight:600; }
.depth1Menu .depth1Item a:before { display:inline-block; width:1px; height:100%; vertical-align:middle; }

.depth1Menu .depth1Item:after { display:block; position:relative; width:7px; height:7px; margin:-7px auto 0; border:3px solid #82b0ec; border-radius:50%; background:#0852af; box-shadow:1px 1px 8px rgb(0 72 150 / 35%); z-index:100; opacity:0; }

.depth2Menu { position:absolute; top:100%; left:0; width:100%; background:#fff; text-align:left; z-index:20; }
.depth2Menu:before { display:block; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:100vw; height:1px; background:#eee; }

.depth2Menu .depth2Tit,
.depth2Menu .depth2List,
.depth2Menu .depth2Tit:before,
.depth2Menu .depth2List:before { display:block; border-bottom:1px solid #eee; }

.depth2Menu .depth2Tit,
.depth2Menu .depth2List { position:relative; float:left; min-height:250px; padding-top:30px; padding-bottom:60px; vertical-align:top; }

.depth2Menu .depth2Tit:before,
.depth2Menu .depth2List:before { position:absolute; top:0; width:100vw; height:100%; }

.depth2Menu .depth2Tit,
.depth2Menu .depth2Tit:before { background:#f4f6fa; }

.depth2Menu .depth2Tit { width:250px; }
.depth2Menu .depth2Tit:before { right:100%; }
.depth2Menu .depth2List { width:calc(100% - 250px); padding-left:30px; }
.depth2Menu .depth2List:before { left:100%; background:#fff; }

.depth2Menu .depth2Tit h2 { margin-bottom:20px; font-size:18px; font-weight:500; }
.depth2Menu .depth2Tit p { font-size:14px; font-weight:400; }
.depth2Menu .depth2Tit span { color:#888; }
.depth2Menu .depth2Tit .next { margin-top:5px; }

.depth2Menu .depth2Item { display:inline-block; width:23%; margin-right:2.1%; font-size:15px; }
.depth2Menu .depth2Item a { border:1px solid #ddd; background-image:url('/template/common/tmpt/ico_depth2_menu.png'); background-position:right 15px center; background-repeat:no-repeat; padding:15px; color:#444; font-weight:400; }
.depth2Menu .depth2Item:nth-child(4n) { margin-right:0; }
.depth2Menu .depth2Item:nth-child(n+5):last-child { margin-top:30px; }

.depth1Menu .depth1Item.active > a { color:#0852af; }
.depth1Menu .depth1Item.active:after { opacity:1; }

.depth2Menu .depth2Item a:hover { box-shadow:0px 10px 10px 0px rgb(102 102 102 / 20%); border-color:#0852af; background-color:#0852af; background-image:url('/template/common/tmpt/ico_depth2_menu_on.png'); color:#fff; font-weight:500; }

.depth1Menu .depth1Item a,
.depth1Menu .depth1Item:after,
.depth2Menu,
.depth2Menu:before,
.depth2Menu .depth2Tit,
.depth2Menu .depth2Tit:before,
.depth2Menu .depth2List,
.depth2Menu .depth2List:before,
.depth1Menu .depth1Item.active > a,
.depth2Menu .depth2Item a:hover { transition:all .2s linear; }

/* 모바일 메뉴 - 220905 추가 */
#lnb { display:none; }



/* ---------------------------------------- 반응형 ---------------------------------------- */
/* ---------------------------- 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) {

}

@media all and (max-width: 1200px) {
    /* gnb */
    .depth1Menu .depth1Item { width:auto; padding:0 20px; }
    .depth2Menu .depth2Item { width:30%; margin-right:2.2% !important; }
    .depth2Menu .depth2Item:nth-child(3n) { margin-right:0 !important; }
    .depth2Menu .depth2Item:nth-child(n+4):last-child { margin-top:20px; }
}


/* ---------------------------- 태블릿 ---------------------------- */
@media all and (max-width: 1023px) {
    html { font-size:62.5%; }
    
    /* gnb, lnb */
    #gnb { display:none; }
    
    #lnb { display:block; }
    #lnb:before { position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0, 0.7); visibility:hidden; transition-property:visibility; transition-duration:.3s; z-index:30; }
    #lnb a { display:block; width:100%; height:100%; }
    
    /* 모바일 메뉴 닫기 버튼 */
    #lnb .mCloseBtn { display:none; position:fixed; top:15px; right:20px; width:22px; height:22px; cursor:pointer; visibility:hidden; transition-property:visibility; transition-duration:.3s; z-index:200; }
    #lnb .mCloseBtn span { position:absolute; left:0; width:100%; height:2px; background:#111; cursor:pointer; }
    #lnb .mCloseBtn .top { top:1px; -webkit-transform:translateY(9px) translateX(0) rotate(45deg); transform:translateY(9px) translateX(0) rotate(45deg); }
    #lnb .mCloseBtn .bottom { bottom:0; -webkit-transform:translateY(-10px) translateX(0) rotate(-45deg); transform:translateY(-10px) translateX(0) rotate(-45deg); }
    
    
    #lnb .mobileLink { display:flex; justify-content:space-between; margin-top:3rem; font-size:1.3rem; }
    #lnb .mobileLink .mLinkItem { width:49%; text-align:center; }
    #lnb .mobileLink .mLinkItem a { display:block; width:100%; background:#0852af; padding:12px; color:#fff; }
    
    
    /* 모바일 메뉴 */
    #lnb .depth1ListWrap { position:absolute; top:0; right:-100%; background:#f3f3f3; width:400px; height:100vh; padding:30px; z-index:100; visibility:hidden; transition-property:visibility, right; transition-duration:.3s; }
    
    #lnb .lnbDepth1List { margin-top:1rem; }
    #lnb .lnbDepth1Item { border-bottom:1px solid #ededed; }
    #lnb .lnbDepth1Item > a { position:relative; background:#fff; padding:15px; color:#555; font-size:1.5rem; font-weight:500; }
    #lnb .lnbDepth1Item > a:after { display:block; position:absolute; top:15px; right:15px; width:12px; height:12px; background-image:url('/template/common/tmpt/ico_lnb1.png'); background-repeat:no-repeat; }
    
    #lnb .lnbDepth2Menu { background:#fff; padding-top:10px; padding-bottom:20px; padding-left:15px; }
    #lnb .lnbDepth2List { }
    #lnb .lnbDepth2Item { position:relative; }
    #lnb .lnbDepth2Item:before { display:block; position:absolute; top:50%; left:3px; transform:translateY(-50%); width:3px; height:3px; background:#0852af; }
    #lnb .lnbDepth2Item > a { padding:10px 13px; color:#111; font-size:1.4rem; font-weight:400; }
    
    /* lnb active */
    #lnb.active:before,
    #lnb.active .mCloseBtn { display:block !important; visibility:visible; transition-property:visibility; transition-duration:.3s; }
    #lnb.active .depth1ListWrap { right:0; visibility:visible; transition-property:visibility, right; transition-duration:.3s; }
    
    #lnb .lnbDepth1Item.active > a:after { background-image:url('/template/common/tmpt/ico_lnb1_on.png'); }
    #lnb .lnbDepth1Item.active > a { background:#333; color:#fff; }
}

@media all and (max-width: 820px) {
   /* header */
    .headerBody .logo { width:160px; }
}

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


/* ---------------------------- 모바일 ---------------------------- */
@media all and (max-width: 640px) {
    /* header */
    .headerTop { display:none; }
    .headerBody { height:70px; }
    .headerBody .searchBtn { width:45px; height:45px; }
    .headerBody .searchBtn a { background-size:45%; }
    .headerBody .allMenu { margin-left:12px; }
    
    /* 모바일 메뉴 */
    #lnb .depth1ListWrap { width:80%; padding:5%; }
}

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

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

@media all and (max-width: 385px) {
   /* header */
    .headerBody .logo { width:135px; }
    .headerBody .search { width:35px; height:35px; }
}

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