@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');


/* 레이아웃 */
body { font-family: "Noto Sans KR", "맑은 고딕", sans-serif; width: 100%;  min-width: 320px;  }
.body_scroll { overflow: hidden; }

#wrap { position: relative; left:0; width: 100%; height: 100%; transition: 0.5s ease-out; }
header { height: 45px; background-color: #33353F; }

#con_wrap.main { 
  height: calc(100vh - 170px); min-height: 570px;
  display: flex; flex-direction: column; gap: 6px; padding: 6px; 
  }

  #con_up { flex:2; display: flex; gap: 6px; }
    .s1-1 { flex:1; }
    .con_up_right { flex:1; display: flex; flex-direction: column; gap: 6px; }
      .s1-2 { flex:1; }
      .s1-3 { flex:1;}
  #con_down { flex:1; display: flex; gap: 6px; }
    .s2-1 { flex:1; }
    .s2-2 { flex:1; }


footer { height: 125px; background-color: #222; }


/* header */
header { 
  /* padding: 0 45px; width: 100%;  */
  display: flex; justify-content: space-between;
}
header img { height: 45px; }

/* .lnb_btn { float: left; position: relative; left:-45px; }
.logo { float: left; width: 100%; text-align: center; margin: 0 -45px; }
.search_btn { float:right; position: relative; left:45px; } */

.lnb_btn { position: relative; z-index: 60; }
.logo {}
.search_btn { position: relative; z-index: 60; } 


/* content */
.s1-1 { background: #4AB8BC; }
.s1-1 img { width:120px;}
.s1-2 { background: #589DD2; }
.s1-2 img { width:110px; }
.s1-3 { background: #FF912F; }
.s1-3 img { width:121px; }

.s2-1 { background: #589DD2; }
.s2-1 img { width:124px; }
.s2-2 { background: #8DCA35; }
.s2-2 img { width:131px; }

.main section { display:table; } 
.main section > a { display: table-cell; text-align: center; vertical-align: middle; } 
.main section img {  }

/*  footer */
footer { position: relative; color: white; padding: 15px 6px; }

.quickMenu {background: #535357; display: table; width: 100%; border-radius:3px; }
.quickMenu li { 
  display: table-cell; width:33.33%;
  
  border-right:1px solid #222;
  border-left:1px solid #999999;
}
.quickMenu li:first-child { border-left:0 }
.quickMenu li:last-child { border-right:0 }

.quickMenu a { display: block; line-height: 33px; text-align: center; font-size: 12px;}

.telSns { margin-top: 18px;}
.telSns a { font-size: 22px; font-weight:500; margin-right:10px; }
.telSns img { width: 24px; vertical-align: top; }

.pc { position: absolute; right:6px; bottom:15px;     text-align: right  }
.pc a { display: inline-block; background: #535357; padding:3px 6px; font-size: 12px; margin-top: 8px;  }

address { font-size: 10px; margin-top: 10px;}


/* 좌측 슬라이드 메뉴 lnb  */
#lnb { position: absolute; top:0; width: 274px; left:-274px; height: 100%;  background:#F1F1F1; transition:0.5s ease-out; z-index: 100; }

.lnb_login { background:#111; padding: 35px 20px;}
.lnb_login p { color:white; margin-bottom: 20px; font-size: 14px; line-height: 1.5;}
.lnb_login img { width: 232px; }

.lnb_list { border-bottom: 1px solid #ddd;}
.lnb_list li {}
.lnb_list img { width: 274px;}

.lnb_res { padding: 36px 0 0 16px;}
.lnb_res img { width: 235px;}

.cover { 
  opacity: 0; visibility:hidden;
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.7);
  z-index: 50; transition: 0.5s ease-out;
}

.search { display: none;
  position: absolute; z-index: 80; top:170px;left:0; width:100%; padding:0 5%; }
.search_wrap { position: relative; border-bottom:3px solid white; padding: 5px 0; }
.search input { width: calc(100% - 100px); font-size: 20px; background: none; border: none; outline: none; color:white}
.search input::placeholder { font-size: 14px; color:#a5a5a5 }
.search a { position: absolute; right:5px; bottom: 7px;}
.search a img { width: 30px; }


/* 슬라이더 메뉴가 튀어나온 상태 */
#wrap.on { left:274px; }
#wrap.on + #lnb { left:0; }
#wrap.on .cover { opacity: 1; visibility: visible; }

/* search버튼을 클릭했을때 */
#wrap.searchActive .cover { opacity: 1; visibility: visible; z-index:70 }
#wrap.searchActive .search { display: block;  }
#wrap.searchActive .search_btn { z-index: 80;}