css

@charset "UTF-8";

/*reset*/
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body { width: 100%; height: 100%; color: #333; background-color: #fff; font-size: 15px; }
ul,ol,li { list-style-type: none; }
a, em { text-decoration: none; color: #333; display: block; }
img { vertical-align: top; }
button { border: 0; cursor: pointer; }

/*공통cls*/
.flx{display: flex;}
.flx_col { flex-direction: column; }
.a_center { align-items: center; }
.a_flx_st { align-items: flex-start; }
.a_flx_end { align-items: flex-end; }
.j_center { justify-content: center; }
.j_flx_st { justify-content: flex-start; }
.j_flx_end { justify-content: flex-end; }
.j_spc_btw { justify-content: space-between; }
.hidden { width: 1px; height: 1px; text-indent: -999999px; position: absolute; z-index: -9999px; font-size: 1px; }


/*main*/
.wrap { width: 100%; height: 100%; position: relative; }
#main { width: 100%; height: calc(100% - 120px); }
#header { width: 200px; height: 100%; border-right: 1px solid #eee; }
#header .logo { margin-top: 20px; }
#header .logo > img { display: block; width: 195px; margin: 0 auto; }
#header .gnb { padding: 0 10px; width: 100%; margin-top: 20px; }
#header .gnb .dep1{ height: 42px; line-height: 42px; padding-left: 20px; font-size: 17px; font-weight: bold; }
#header .gnb .dep1:hover { background-color: #2962B7; color: #fff; }
#header .gnb > ul > li { position: relative; }
#header .gnb .sub_menu { position: absolute; background-color: #2962B7; width: 100%; left: 100%; top: 0; display: none; }
#header .gnb .sub_menu li { height: 42px; line-height: 42px; padding: 0 10px; }
#header .gnb .sub_menu li:hover { background-color: rgba(0, 0, 0, 0.3); }
#header .gnb .sub_menu li > a {  color: #fff;}
.conts { width: 400px; height: 100%; }
.conts .banner { height: 15%; background: url(../images/banner.png) 50% 50%; justify-content: center; }
.conts .banner .banner_tit { color: #fff; background-color: rgba(0, 0, 0, 0.7); font-weight: bold; padding: 6px 20px; }
.conts .banner button { width: 150px; height: 32px; background-color: fff; border: 0; margin-top: 6px; border-radius: 30px; }
.conts .banner button:hover { background-color: #2962B7; color: #fff; font-weight: bold; }
.conts .notice { height: 35%; margin-top: 10px; }
.conts .notice h2,
.conts .gallery h2 { width: 150px; height: 38px; line-height: 38px; font-size: 17px; font-weight: bold; background-color: #eee; text-align: center; }
.conts .notice ul,
.conts .gallery ul { background-color: #eee; padding: 20px 0; }
.conts .notice ul > li { height: 42px; line-height: 42px; }
.conts .notice ul > li > a { padding:  0 10px; }
.conts .notice ul > li:nth-child(2n){ background-color: #fafafa; }

.conts .gallery { height: 35%; }
.conts .link { height: 15%; padding: 0 10px; }
.conts .link span { margin-top: 6px; }
.slide { width: calc(100% - 200px - 400px); height: 100%; overflow: hidden; }
.slide .slide_wrap li { position: relative; width: 100%; height: 100%; }
.slide span { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; font-size: 17px; font-weight: bold; padding: 10px 30px; }

#footer{width: 100%; height: 120px; border-top: 1px solid #eee; padding: 0 20px 0 10px;}
#footer .f_m { width: 50%; height: 100%; }
#footer .f_m .f_menu { height: 50%; padding: 0 30px; }
#footer .f_m .copy { height: 50%; border-top: 1px solid #eee; }
#footer .family_site { width: 150px; height: 42px; padding: 0 10px; }

/*모달창*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; }
.modal_bg .modal { background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px 30px; }
.modal_bg .modal .modal_tit { height: 48px; height: 48px; font-size: 17px; font-weight: 700; }
.modal_bg .modal .modal_txt { height: 32px; line-height: 32px;}
.modal_bg .modal button { display: block; width: 150px; height: 32px; margin: 30px auto 0; background-color: #2962B7; color: #Fff; }