@charset "utf-8";
/**
* import
*/
@import url("../../common/css/style.css?after");
@import url("../../common/css/reset.css?after");
@import url("../../common/css/common.css?after");
@import url("../../common/css/ui.css?after");
@import url("../../common/css/font.css");
@import url("../../common/css/font.css?after");
@import url("https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css");





/*layout*/
*{box-sizing: border-box; font-family:"s-core-dream", dotum, Helvetica, sans-serif;letter-spacing: -1px;}
a{display: block;     text-decoration: none!important;}
html {width:100%; font-size:10px;}
body {font-size:1.6rem;}
#wrap {position:relative; z-index:0;  width:100%; overflow: hidden; min-height: 100vh;}
#container {margin-top: 14rem; position:relative; z-index:10; width:100%; box-sizing:border-box;} /* min-width 값은 변경 또는 wrap 등으로 위치이동 */

.inner{width: 1400px; margin: 0 auto;}

.poster-box::-webkit-scrollbar,
.cal-user-box::-webkit-scrollbar{height:10px;}
.poster-box::-webkit-scrollbar-thumb,
.cal-user-box::-webkit-scrollbar-thumb{background-color: #222;}
.poster-box::-webkit-scrollbar-track,
.cal-user-box::-webkit-scrollbar-track{background-color:#ddd;}

::selection{background-color: #b6b2ff; color: #fff; opacity: 1;}

#header{background-color: #fff;position: relative; }
#header > #header-wrap{position:fixed;width: 100%; top:0; left: 0; z-index: 99; background-color: #fff; }
#header > #header-wrap > div.header-top > div.inner{position: relative; justify-content: space-between;   align-items: center;}
#header > #header-wrap > div.header-top > div.inner h1{flex: 0 0 auto;width:21rem; height:8rem; background: url("./img/logo.png") center left no-repeat; text-indent: -9999px; z-index: 999;background-size: contain;}
#header > #header-wrap > div.header-top > div.inner h1 a{display: block; width:100%; height:8rem;}
#header > #header-wrap > div.header-top > div.inner > div.search-box { position: relative; background: #f5f5f5; padding:0.6rem 2rem; border-radius: 100px; width: 50rem;}
#header > #header-wrap > div.header-top > div.inner > div.search-box button{font-size: 2rem; color: #666;height: 100%;position: absolute; top:50%; right:2rem; transform: translateY(-50%);}
#header > #header-wrap > div.header-top > div.inner > div.search-box input.text {border: 0;width: calc(100% - 37px);background: none;}
#header > #header-wrap.on:before,
.gnb_on #header > #header-wrap:before{ transition: ease all 0.3s;width: 100%;height: 36rem;position: absolute;top: 14rem;display: block;border-top: 1px solid #ddd;content: "";background-color: #fff;border-bottom: 1px solid #ddd;}
#header > #header-wrap > div.header-top > div.inner > .sns-box ul li:not(:first-child) a{margin-left: 1rem;}
#header > #header-wrap > div.header-top > div.inner > .sns-box ul li a {padding: 1rem; border-radius: 50%; border: 1px solid #ddd; color: #a3a3a3; font-size: 2rem;transition: ease all 0.3s;}
#header > #header-wrap > div.header-top > div.inner > .sns-box ul li:nth-of-type(1):hover a {background-color: #3b5998; color: #fff; transition: ease all 0.3s; border-color: #3b5998;}
#header > #header-wrap > div.header-top > div.inner > .sns-box ul li:nth-of-type(3):hover a {background-color: #f44336; color: #fff; transition: ease all 0.3s; border-color: #f44336;}
#header > #header-wrap > div.header-top > div.inner > .sns-box ul li:nth-of-type(2):hover a {background-color: #9c18b3; color: #fff; transition: ease all 0.3s; border-color: #9c18b3;}
#header > #header-wrap > div.header-top > div.inner > .sns-box ul li:nth-of-type(4):hover a {background-color: #2fb820; color: #fff; transition: ease all 0.3s; border-color: #2fb820;}



/*gnb*/
#header > #header-wrap > div.nav-box{ transition: ease all 0.3s;border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
#header > #header-wrap > div.nav-box > div.inner{align-items: center;}
#header > #header-wrap > div.nav-box > div.inner > #gnb{width: 100%;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul{position: relative;  display: flex; align-items: center;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li{width: auto;height: 6rem; line-height:6rem;position: relative;}
#header > #header-wrap > div.nav-box > div.inner.nav-box{position: relative; z-index: 99; align-items: center;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a {position: relative; width: 100%; padding: 0 4rem;  height: 100%; font-size: 1.8rem; font-weight: bold;text-align: center;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a > i{display: none;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul{display: none; position: absolute;z-index: 99; width: 100%; top:7rem;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li {line-height: 16px;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li > a {text-align: center;padding: 0.8rem; font-weight: 500; font-size: 1.5rem;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li > a:hover{font-weight: bold;}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a:after{position: absolute;bottom: 8px; left: 50%; display: block; content: ""; width: 0%; height: 4px;  transform: translateX(-50%);background:#e61964;z-index: -1; transition: ease all 0.3s}
#header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li:hover > a:after{width: 80%;}
#header > #header-wrap > div.nav-box > div.inner div.m-login{display: none;}
#header > #header-wrap.on div.nav-box > div.inner > #gnb > ul > li > ul {display: block;}
.gnb_on #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul {display: block;}

/*gnb색상
#header > #header-wrap.gnb-bg0 > div.nav-box,
#header > #header-wrap.gnb-bg0:before{background-color: #e84143; transition: ease all 0.3s}
#header > #header-wrap.gnb-bg1 > div.nav-box,
#header > #header-wrap.gnb-bg1:before{background-color: #ff733c; transition: ease all 0.3s}
#header > #header-wrap.gnb-bg2 > div.nav-box,
#header > #header-wrap.gnb-bg2:before{background-color: #ffd920;  transition: ease all 0.3s}


#header > #header-wrap.gnb-bg3 > div.nav-box,
#header > #header-wrap.gnb-bg3:before{background-color: #73c94a; transition: ease all 0.3s}

#header > #header-wrap.gnb-bg4 > div.nav-box,
#header > #header-wrap.gnb-bg4:before{background-color: #819dff; transition: ease all 0.3s}
#header > #header-wrap.gnb-bg5 > div.nav-box,
#header > #header-wrap.gnb-bg5:before{background-color: #6c7fff; transition: ease all 0.3s}


#header > #header-wrap.gnb-bg6 > div.nav-box,
#header > #header-wrap.gnb-bg6:before{background-color: #c99bf5; transition: ease all 0.3s}

*/
.gnb_on #header > #header-wrap.gnb-bg0 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg0 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg1 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg1 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg2 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg2 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg3 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg3 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg4 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg4 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg5 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg5 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg6 > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap.gnb-bg6 > div.nav-box > div.inner > #gnb > ul > li > ul > li > a,
#header > #header-wrap.gnb-bg0 > div.nav-box > div.inner > div.header-login > p > a,
#header > #header-wrap.gnb-bg1 > div.nav-box > div.inner > div.header-login > p > a,
#header > #header-wrap.gnb-bg2 > div.nav-box > div.inner > div.header-login > p > a,
#header > #header-wrap.gnb-bg3 > div.nav-box > div.inner > div.header-login > p > a,
#header > #header-wrap.gnb-bg4 > div.nav-box > div.inner > div.header-login > p > a,
#header > #header-wrap.gnb-bg5 > div.nav-box > div.inner > div.header-login > p > a,
#header > #header-wrap.gnb-bg6 > div.nav-box > div.inner > div.header-login > p > a{color: #222;}

#header > #header-wrap.on > div.nav-box > div.inner > #gnb > ul > li > a,
#header > #header-wrap.on > div.nav-box > div.inner > #gnb > ul > li > ul > li > a{color:#222;}
#header > #header-wrap.on > div.nav-box > div.inner > #gnb > ul > li.on > a{color:r#222;}
#header > #header-wrap.on > div.nav-box  > div.inner > #gnb > ul >  li.on > ul > li > a {color:#222;}

.gnb_on #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a,
.gnb_on #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li > a {color: #222;}

#qna_field .no_data{padding: 5rem; text-align: center;}

/*pc ver 로그인,회원가입*/
#header > #header-wrap > div.nav-box > div.inner > div.header-login > p > a {display: flex;padding-right:  3rem; color: #666; font-size: 1.6rem;}
#header > #header-wrap > div.nav-box > div.inner > div.header-login > p > a > i {font-size: 2rem; padding-right: 1rem;}
#header > #header-wrap > div.nav-box > div.inner > div.header-login > p > a:hover{color: #222;}
.m-login {display: none;}
/*햄버거메뉴*/
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb {width: 5rem; height: 6rem; position: relative;}
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb > span {transition: ease all 0.3s;position: absolute;top: 2.5rem;left: 50%;transform: translateX(-50%);width: 2rem;height: 2px;background-color: #cbcbcb;}
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb > span:nth-child(2){top:3rem;}
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb > span:nth-child(3){top:3.5rem;}
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb.on > span:nth-child(2){display: none;}
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb.on > span:nth-child(1){transform: rotate(45deg)translate(-0%,-50%);top: 50%; left: 25%;}
#header > #header-wrap > div.nav-box > div.inner > button.btn-gnb.on > span:nth-child(3){transform: rotate(-45deg)translate(-00%,-50%);top: 50%; left: 25%;}

/* sub-visual */
#section-top{position: relative;}
#section-top #sub-visual{background: url('./img/bg-sub-visual00.jpg') 50% 50% no-repeat; background-size:cover; position: relative; width: 100%;height:26rem;text-align: center; }
#section-top #sub-visual:before{position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ""; display: block;}
#section-top #sub-visual.sub-visual1{background: url('./img/bg-sub-visual01.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual.sub-visual2{background: url('./img/bg-sub-visual02.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual.sub-visual3{background: url('./img/bg-sub-visual07.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual.sub-visual4{background: url('./img/bg-sub-visual04.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual.sub-visual5{background: url('./img/bg-sub-visual05.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual.sub-visual6{background: url('./img/bg-sub-visual06.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual.sub-visual7{background: url('./img/bg-sub-visual03.jpg') 50% 50% no-repeat; background-size:cover;}
#section-top #sub-visual > div.inner{position: relative; height: 29rem;color: #fff; display: flex;flex-direction: column;justify-content: center;}
#section-top #sub-visual > div.inner > h3 {font-size: 4rem; font-weight: bold; padding-bottom: 2rem}
#section-top #sub-visual > div.inner > p.sub-title{font-size: 1.8rem;padding-top: 1rem;font-weight: 300;}
#section-top #sub-visual > div.inner > p.sub-title > span{font-weight: 500;}
#section-top #sub-visual > div.inner > div.flex{font-size: 1.4rem; justify-content: center;  align-items: center;}
#section-top #sub-visual > div.inner > div.flex > i {padding: 0 0.3rem;}

/* #section-body */
#section-body{padding-bottom:16rem; display: flex; justify-content: space-between;}

/* aside */
#aside {display: none; width:18%;}
/*#aticle-wrap{width:80%;}*/
#aticle-wrap{padding-top: 3rem; width: 100%;}
#aticle-wrap > h4{display: none; padding: 4rem 0; margin-bottom: 4rem; font-size: 3rem; font-weight: bold; border-bottom: 2px solid #222;}
.cal-user-h4{padding: 4rem 0;margin-bottom: 4rem; font-size: 3rem; font-weight: bold; border-bottom: 2px solid #222;}
/* snb */
#snb {position:relative;}
#snb > #group_title {height:16rem; background:#00b8ab; text-align:center; color:#fff; box-sizing:border-box; }
#snb > #group_title > p{line-height:16rem; font-weight:400;font-size:24px;}
/* #snb > #group_title > span {opacity:0.5;} */
#snb > ul {}
#snb > ul > li {border-bottom:1px solid #ddd;}
#snb > ul > li > a {display:block;padding:18px 15px 18px 15px; font-weight:400; font-size:15px; color:#666;}
#snb > ul > li > a:hover{background:#ebebeb; font-weight:500; color:#333; text-decoration:none;}
#snb > ul > li > a:focus,
#snb > ul > li > a:active,
#snb > ul > li.on > a {padding-left:30px; background:url("./img/bg_arrow.png") 15px 50% no-repeat; font-weight:500; color:#333; text-decoration:none;}

#snb > ul > li > ul {padding:15px 0 15px 15px; border-top:1px solid #ddd;background:#f5f5f5;}
#snb > ul > li > ul > li {padding-left:10px;font-size:13px;background:url("./img/bu_dot3.gif") 0 12px no-repeat;}
#snb > ul > li > ul > li > a {display:block; max-width:157px; color:#333;}
#snb > ul > li > ul > li > a:hover,
#snb > ul > li > ul > li > a:focus,
#snb > ul > li > ul > li > a:active, #snb > ul > li > ul > li.on > a {color:#0062c3;}

#snb > ul > li > ul > li > ul {padding:6px 0 10px 0;}
#snb > ul > li > ul > li > ul > li {padding-left:10px;background:url("./img/bu_dot4.gif") 0 50% no-repeat;}
#snb > ul > li > ul > li > ul > li > a {color:#666;}
#snb > ul > li > ul > li > ul > li > a:hover, #snb > ul > li > ul > li > ul > li > a:focus, #snb > ul > li > ul > li > ul > li > a:active, #snb > ul > li > ul > li > ul > li.on > a {color:#666;}


#lnb{border-bottom: 1px solid #ddd;}
#lnb > #lnb-inner{overflow: hidden; position:relative; display: flex;background-color: #fff;}
#lnb > #lnb-inner > ul {display: flex;justify-content: center;width: 100%;}
#lnb > #lnb-inner > ul > li{}
#lnb > #lnb-inner > ul > li.tab1 {display: none;}
#lnb > #lnb-inner > ul > li.tab2 > a {display: none;}
#lnb > #lnb-inner > ul > li > ul{width: 100%; display: flex;}
#lnb > #lnb-inner > ul > li > ul > li{flex: 0 0 auto; padding: 1rem 0; width: auto;}
#lnb > #lnb-inner > ul > li > ul > li > a:hover{background: #83b8f3; transition: ease all 0.3s;}
#lnb > #lnb-inner > ul > li > ul > li.on > a {background: #2196f3; color: #fff;}
#lnb > #lnb-inner > ul > li > ul > li > a {transition: ease all 0.3s;margin: 0 0.5rem; padding:1.2rem 2rem; border-radius: 100px; font-size: 1.7rem; font-weight: 600; text-align: center;}




div.bg-div-sub{display: none; position: absolute; top: -57px; left: -184px;z-index: -1; width: 80rem;  animation: rotatt00 80s linear 0s forwards infinite; }
div.bg-div-sub02{display: none; position: absolute; top: -362px; right: -184px;z-index: -1; width: 30rem;  animation: rotatt00 80s linear 0s forwards infinite; }
@keyframes rotatt00{0% {transform:rotate(0)} 100% {transform:rotate(360deg)}}


/*footer*/
footer {position:relative;width:100%; background-color: #222; color: #999;}
footer a{color: #999;}
footer .f-top{background-color: #2a2a2a; border-top: 0.1rem solid #ddd; box-sizing: border-box}
footer .f-top a{padding: 2rem 2rem 2rem 0; }
footer .f-top ul{margin-left: auto; position: relative;}
footer .f-top ul > li{position: relative; width: 25rem;}
footer .f-top ul li a{display: flex; justify-content: space-between;padding:1rem 2rem; background-color: rgba(255,255,255,1);}
footer .f-top ul li a#selectLink1{padding: 2rem;}
footer .f-top ul li a#selectLink3{padding: 2rem;}
footer .f-top ul li a:hover{background-color:#fff; color: #e51963; font-weight: 600;}
footer .f-top ul li a > i {padding-left: 2rem;}
footer .f-top ul > li > ul {position: absolute;}
footer .f-info{padding-top: 6rem; padding-bottom: 9rem; font-size: 1.4rem;}
footer .f-info > div.flex > .address{padding-left: 20rem;}
footer .f-info .sns-box{margin-left: auto;}
footer .f-info .sns-box ul li:not(:first-child) a{margin-left: 1rem;}
footer .f-info .sns-box ul li a {padding: 1rem; border-radius: 50%; border: 1px solid #ddd; font-size: 2rem;}
footer div.f-logo{width:121px; height: 50px;  background: url("./img/f-logo.png") center left no-repeat;  background-size: contain;}


/*list-top*/
div.notic-search{margin-bottom: 2rem; align-items: flex-end; display: flex; justify-content: space-between;}
div.notic-search input.searchbox {height: 4rem; border: 1px solid #ddd; padding: 0 1rem; box-sizing: border-box}
div.notic-search button{height: 4rem; width: 4rem; background-color: #222; color: #fff;}

/*list-bottom*/
/*div.btn-area{padding-top:2rem;}*/
/*div.btn-area.flex.flexbs, div.btn-area.flex.bs{justify-content: space-between;}*/
/*div.btn-area.flex.flexfe, div.btn-area.flex.fe{justify-content: flex-end;}*/
/*div.btn-area.flex.center{justify-content: center;}*/
/*div.btn-area button.btn,*/
/*div.btn-area a.btn{min-width:12rem; margin:0 0.6rem;}*/
/*basic list*/
/**
* list
*/

div.img-box.map-img-box{position: relative;}
div.img-box.map-img-box > p.map-round{ cursor: pointer; position: absolute;text-align: center;font-weight: bold;}
div.img-box.map-img-box > p.map-round > span.lo-name{ color: #ffffff; width: fit-content;padding: 0.5rem 1.5rem; border-radius: 100px;}
div.img-box.map-img-box > p.map-round:nth-of-type(1){ top: 195px; left: 235px;}
div.img-box.map-img-box > p.map-round:nth-of-type(1) > span.lo-name{background-color: #ff81ac;}
div.img-box.map-img-box > p.map-round:nth-of-type(2){ top: 186px; left: 402px;}
div.img-box.map-img-box > p.map-round:nth-of-type(2) > span.lo-name{background-color:#819dff; }
div.img-box.map-img-box > p.map-round:nth-of-type(3){top: 250px;left: 432px;}
div.img-box.map-img-box > p.map-round:nth-of-type(3) > span.lo-name{background-color: #5fc92f;}
div.img-box.map-img-box > p.map-round:nth-of-type(4){top: 243px;left:610px;}
div.img-box.map-img-box > p.map-round:nth-of-type(4) > span.lo-name{    background-color: #ffc61d;}
div.img-box.map-img-box > p.map-round:nth-of-type(5){ top:152px;left:566px;}
div.img-box.map-img-box > p.map-round:nth-of-type(5) > span.lo-name{background-color:#7a34bd; }

div.board div.board-head ul.row{ width: 100%; font-weight:500;  font-size:1.6rem;}
div.board div.board-head ul.row li{flex: 0 0 auto; position: relative;padding: 2rem 1rem;vertical-align: middle;text-align: center;border-bottom: 1px solid #999; box-sizing: border-box;}
div.board div.board-head ul.row li.checkbox{width: 4rem;}
div.board div.board-head ul.row li.no{width:7rem;}
div.board div.board-head ul.row li.subject{width:100%; flex: auto;}
div.board div.board-head ul.row li.file{width:7rem;}
div.board div.board-head ul.row li.writer{width:10rem;}
div.board div.board-head ul.row li.date{width:18rem;}
div.board div.board-head ul.row li.date.date02{display: flex; width: 20rem; justify-content: center;}
div.board div.board-head ul.row li.state{width:10rem;}
div.board div.board-head ul.row li.down{wwidth:7rem;}
div.board div.board-head ul.row li.view{width:7rem; display: none}
div.board div.board-head ul.row li.local{width:10rem;}
div.board div.board-head ul.row li.local.local02{width:20rem;}
div.board div.board-head ul.row li.state-li{width:10rem;}
div.board div.board-head ul.row li.division{width:10rem;}
div.board div.board-head ul.row li.left,
div.board div.board-body ul.row li.left{text-align: left}


div.board div.board-body > ul > li > a:hover{background-color: #f5f5f5;}
div.board div.board-body ul.row{ width: 100%; align-items:center; border-bottom: 1px solid #999; box-sizing: border-box;}
div.board div.board-body ul.row li{flex: 0 0 auto; position: relative;padding: 2rem 1rem; text-align: center; vertical-align: middle; line-height: 1.2; font-size:1.6rem; box-sizing: border-box; color:#555;}
div.board div.board-body ul.row li.checkbox{width: 4rem;}
div.board div.board-body ul.row li.no{width:7rem;}
div.board div.board-body ul.row li.subject{width: 10rem; flex: auto;text-align: left;}
div.board div.board-body ul.row li.subject > strong{font-weight: 500;color: #222;}
div.board div.board-body ul.row li.file{width:7rem;}
div.board div.board-body ul.row li.writer{width:10rem;}
div.board div.board-body ul.row li.date{width:18rem;}
div.board div.board-body ul.row li.date.date02{display: flex; width:20rem;}
div.board div.board-body ul.row li.state{width:10rem;}
div.board div.board-body ul.row li.down{wwidth:7rem;}
div.board div.board-body ul.row li.view{width:7rem; display: none}
div.board div.board-body ul.row li.local{width:10rem;}
div.board div.board-body ul.row li.local.local02{width:20rem;}
div.board div.board-body ul.row li.state-li{width:10rem;}
div.board div.board-body ul.row li.division{width:10rem;}
div.board div.board-body ul.row li.state-li > p.state{margin: 0 auto;}

div.board div.board-body li.nodata{width:100%; height:40rem; line-height: 40rem; text-align: center;border-bottom: 1px solid #999;}


/*program list ?*/
div.board-list{border-top:1px solid #222;}
div.board-list > ul > li{padding:2rem 0; border-bottom:1px solid #ccc;}
div.board-list.gallery-type > ul > li.nodata,
div.board-list > ul > li.nodata{width:100%; padding:40rem 0; text-align: center;}

div.board-list a div.img-box{position:relative; padding-top:56.75%; background:url("./img/noimage.png") center center no-repeat; background-size:cover; overflow: hidden;}
div.board-list a div.img-box img{transition:0.5s all; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%;}
div.board-list a div.txt-box{font-size:1.6rem;}
div.board-list a div.txt-box div.tit-box{padding:0.8rem 0;}
div.board-list a div.txt-box div.tit-box p.category{color:#555; display:inline-block; max-width:100%;overflow:hidden; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; word-wrap: break-word;  word-break: break-all; display:-webkit-box; white-space:normal;word-break: normal;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
div.board-list a div.txt-box div.tit-box p.subject{font-size:2rem; font-weight:600; color:#222; display:inline-block; max-width:100%;overflow:hidden; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; word-wrap: break-word;  word-break: break-all;}
div.board-list a div.txt-box div.info-box{padding-top:1rem;}
div.board-list a div.txt-box div.info-box dl dt{font-weight: 600; position:relative; padding-left:1.4rem; box-sizing:border-box;}
div.board-list a div.txt-box div.info-box dl dt:before{content: ""; position: absolute; display: block; top: 8px; left: 0rem; width: 0px; height: 0px; border-top: 6px solid transparent; border-left: 10px solid #1dbdab;  border-bottom: 6px solid transparent;}
div.board-list a div.txt-box div.info-box dl dd{box-sizing:border-box; padding-left:0.6rem;}
div.board-list a div.txt-box div.info-box li:nth-child(3) dl dd{ display:inline-block; display:-webkit-box; height:6rem; max-width:100%;overflow:hidden; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; word-wrap: break-word;  word-break: break-all;  white-space:normal;word-break: normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

div.board-list.list-type{}
div.board-list.list-type > ul > li > a{display:flex; justify-content: space-between;}
div.board-list.list-type a div.img-box{width:18%; height:14rem; padding-top:0;}
div.board-list.list-type a div.txt-box{width:80%; }
div.board-list.list-type a div.txt-box div.info-box{}
div.board-list.list-type a div.txt-box div.info-box ul{flex-wrap: wrap;}
div.board-list.list-type a div.txt-box div.info-box ul li{width:50%;}
div.board-list.list-type a div.txt-box div.info-box ul li:nth-child(3){width:100%;}
div.board-list.list-type a div.txt-box div.info-box ul li dl{display:flex; color:#555;}

div.board-list.gallery-type > ul {display:flex; justify-content: space-between;}
div.board-list.gallery-type > ul > li{width:31%; }
div.board-list.gallery-type a div.txt-box{padding-top:2rem;}
div.board-list.gallery-type a div.txt-box div.tit-box p.subject{}
div.board-list.gallery-type a div.txt-box div.info-box ul{flex-wrap: wrap;}
div.board-list.gallery-type a div.txt-box div.info-box ul li{width:100%;  color:#555;}
div.board-list.gallery-type a div.txt-box div.info-box ul li:not(:last-child) dl{display:flex; }

.board-hidden{display: none;}

/* view */
/*title*/
div.board_view > dl {margin:0;}
div.board_view > dl:after {clear:both; display:block;content:"";}
div.board_view > dl > dt { position:relative; padding: 0px 30px 42px; border-bottom:1px solid #ddd; font-weight:500; font-size:2.4rem; color:#333;}
div.board_view > dl > dt p.category{color:#555; font-size:1.8rem}
div.board_view > dl > dt > strong {color:#0062c3;}
div.board_view > dl > dt > span {display: block; margin-top:10px; margin-right: 10px; font-weight:300;font-size:14px;color:#666;}

div.board_view > dl > dd {position:relative;padding:25px 20px;}
div.board_view > dl > dd.minh{min-height:16rem;}

div.board_view > dl > dd.flex > a{padding:2rem 3rem; width: 50%; font-size: 1.8rem; background-color: #222;color: #fff; align-items: center; justify-content: center;}
div.board_view > dl > dd.flex > div.bg-gray{padding:2rem 3rem; width: 50%;font-size: 1.8rem;}
div.board_view > dl > dd.flex > div.bg-gray > i {width: 5rem; height:5rem; line-height: 5rem; font-size: 2rem; text-align: center; border-radius: 50%; color: #fff; background-color: #8fcbff;}
/* view > paging */
div.board_view div.view_paging {margin:45px 0 20px;border:0;}
div.board_view div.view_paging > dl {overflow:hidden; height:100%; border-bottom:1px solid #ddd;  *zoom:1;}
div.board_view div.view_paging > dl:after {display:block;content:'';clear:both;}
div.board_view div.view_paging > dl.prev{border-top:1px solid #ddd;}
div.board_view div.view_paging > dl.prev a {color:#666; font-size:14px;}
div.board_view div.view_paging > dl.prev > dt {float:left;width:14rem;padding:14px 12px 14px 60px;font-weight:500; font-size:14px; background:url("./img/ico_view_prev.gif") 30px 50% no-repeat;color:#333;}
div.board_view div.view_paging > dl.prev > dd {float:left;padding:14px 0 14px 20px; color:#666; font-size:14px;}
div.board_view div.view_paging > dl.next a {color:#666; font-size:14px;}
div.board_view div.view_paging > dl.next > dt {float:left;width:14rem;padding:14px 12px 14px 60px;font-weight:500; font-size:14px; background:url("./img/ico_view_next.gif") 30px 50% no-repeat;color:#333;}
div.board_view div.view_paging > dl.next > dd {float:left;padding:14px 0 14px 20px; color:#666; font-size:14px;}

div.board_view div.button {}
div.board_view div.button:after { clear:both; display:block; content:""; }
div.board_view div.button > div.left { float:left; }
div.board_view div.button > div.right { float:right; }

/*nu-search*/
.nu-search{margin-bottom: 2rem;}
.nu-search form > div.flex{padding: 2rem; flex-wrap: wrap; justify-content: center;}
.nu-search form > div.flex > dl{align-items: center;}
/*.nu-search form > div.flex > dl:not(:last-child){margin-right: 3rem;}*/
.nu-search form > div.flex > dl > dt{padding-right: 1rem; font-weight: bold;}
.nu-search form > div.flex > dl:last-of-type{margin-top: 1rem;}
.nu-search form > div.flex > dl:last-of-type input.text{width: 84rem;}
.nu-search button,
.nu-search a{margin-left: 0.1rem; padding: 0 2.4rem; background-color: #333; color: #fff; height: 3.95rem; font-size: 1.4rem; line-height: 4rem;}
.nu-search button:hover,
.nu-search a:hover{background-color: #000;}
/*gal-box*/
.gal-box > div.flex{flex-wrap: wrap;}
/*.gal-box > div.flex > div {border: 1px solid #ddd;margin-top:6rem;  margin-left:2%; width: 23.5%;}*/
.gal-box > div.flex > div { position: relative; top:0; transition: ease all 0.3s; margin-top:6rem;  margin-left:2%; width: 23.5%;}
.gal-box > div.flex > div > a {position: relative; transition: ease all 0.3s; border-radius: 10px; overflow: hidden; box-shadow: 6px 5px 18px 8px rgb(0 0 0 / 8%);}
.gal-box > div.flex > div:hover{ top:-10px;transition: ease all 0.3s;}
.gal-box > div.flex > div.no-date{width: 100%; text-align: center;padding: 10rem; background: #f5f5f5;border: 0;}
.gal-box > div.flex > div:nth-child(-n+4){margin-top: 0;}
.gal-box > div.flex > div:nth-child(1){margin-left: 0;}
.gal-box > div.flex > div:nth-child(5){margin-left:0rem;}
.gal-box > div.flex > div > a > div.state{position: absolute; top:0; left: 0; z-index: 10; width: auto; padding: 1rem; box-sizing: border-box}
.gal-box > div.flex > div > a > div.stateR{background: #d11010}
.gal-box > div.flex > div > a > div.stateG{background: #999;}
.gal-box > div.flex > div > a > div.stateB{background: #0069d4;}
.gal-box > div.flex > div > a > div.img-box{position: relative;width: 100%; padding-top: 143%; background-color: #222;}
.gal-box > div.flex > div > a > div.img-box > img{position: absolute; top:0; left: 0; width: 100%; height: 100%; transition: ease all 0.5s;}
.gal-box > div.flex > div > a > div.img-box > i {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 3rem; color: #fff;  transition: ease all 0.5s;}
.gal-box > div.flex > div > a > div.text-box{border-top: 1px solid #ddd; padding:3rem 2rem;  min-height: 22rem;}
.gal-box > div.flex > div > a > div.text-box > p.ell{height:5rem;  margin-bottom:1rem; font-size: 1.8rem; font-weight: bold; line-height: 1.4;}
.gal-box > div.flex > div > a > div.text-box > dl{display: flex; font-size: 1.4rem;}
.gal-box > div.flex > div > a > div.text-box > dl > dt{width: 5rem;font-weight: bold;flex: 0 0 auto;}
.gal-box > div.flex > div > a:hover > div.img-box > img{opacity: 0.3; transition: ease all 0.5s;}

.gal-view .state-box{display: flex; width: 100%; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #ddd;}
.gal-view .state-box > span{width: fit-content; color: #fff; padding: 0.6rem 2rem;font-size: 1.8rem;}
.gal-view .state-box > span:not(:first-of-type){margin-left: 8px;}
.gal-view .state-box > span.pink{background-color:#cc867e;}
.gal-view .state-box > span.blue{background-color:#007181;}
.gal-view .state-box > span.gray{background-color:#ccc;}
.gal-view .state-box > span.green{background-color: #96cc7e;}

.gal-view > div.flex > div.img-box{border: 1px solid #ddd; position: relative; width: 420px; height:600px; flex:0 0 auto;}
.gal-view > div.flex > div.img-box > img{width: 100%; height:100%;}
.gal-view > div.flex > div.txt-box{width: 100%; padding-left: 5rem;}
.gal-view > div.flex > div.txt-box > div.t-box {display: flex;flex-direction: column; height: 50rem;}
.gal-view > div.flex > div.txt-box > div.t-box > p.subject{padding-bottom: 4rem; font-weight: bold; font-size: 2.6rem;}
.gal-view > div.flex > div.txt-box > div.t-box > dl {display: flex; font-size: 1.8rem;}
.gal-view > div.flex > div.txt-box > div.t-box > dl:not(:first-of-type){padding-top: 3rem;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dt{flex: 0 0 auto; font-weight:bold;width:13rem;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd{color: #7f7f7f;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd img{width:100%;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div{width: 5.5rem; height: 5.5rem;font-size: 10px; border-radius: 50%; display: flex;align-items: center; justify-content: center;  }
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div > p {text-align: center; font-size: 1.2rem; line-height: 12px; color:#fff;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div.age-green{background-color: #3ea447;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div.age-blue{background-color: #1ba3dc;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div.age-yellow{background-color: #f0a120;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div.age-red{background-color: #ca1e22;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd.age > div.age-red > p {color: #fff;}
.gal-view > div.flex > div.txt-box > div.t-box > div.btn-box{margin-top: auto!important;;}
.gal-view > div.tab-wrap{padding-top: 8rem;}
.gal-view > div.tab-wrap div.tab-content > div{padding: 2rem;}
.gal-view > div.tab-wrap div.tab-content > div > div.flex > p.bold{width: 20rem; flex: 0 0 auto; font-size: 2rem;}
.gal-view > div.tab-wrap div.tab-content > div > div.flex > div.cont{min-height: 30rem; width: calc(100% - 20rem);}
.gal-view > div.tab-wrap div.tab-content > div > div.flex > div.cont img{max-width: 100%; width: auto;}


.vdo-top div.img-box > a {width: 100%; padding-top: 60%;position: relative;}
.vdo-top div.img-box > a > img{ width: 100%;position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
.vdo-top > div.flex{flex-wrap: wrap;justify-content: space-between;}
.vdo-top > div.flex > div.img-box{padding: 0 1rem;width: 50%;}
.vdo-top > div.flex > div.flex {width: 50%; flex-wrap: wrap;justify-content: space-between;}
.vdo-top > div.flex > div.flex > div{margin:0 1rem; width: 47%;}
.vdo-top > div.flex > div.flex > div:nth-child(-n+2){margin-bottom: 1rem;}

.vdo-box > div.flex{flex-wrap: wrap;}
.vdo-box > div.flex > div {width: 19%; margin-top:6rem;}
.vdo-box > div.flex > div:not(:nth-child(6n)){margin-left: 1%;}
.vdo-box > div.flex > div:first-child{margin-left: 0;}
.vdo-box > div.flex > div:nth-child(-n+5) {margin-top: 0}
.vdo-box > div.flex > div.no_data{margin-top: 0!important; text-align: center; padding: 6rem; background-color: #f5f5f5;width: 100%;}
.vdo-box > div.flex > div > a > div.img-box {width: 100%; padding-top: 60%;position: relative; overflow: hidden;}
.vdo-box > div.flex > div > a > div.img-box > img{ width: 100%;position: absolute;top: 0;left: 0;width: 100%; height: 100%; transition: ease 0.3s;}
.vdo-box > div.flex > div > a:hover > div.img-box > img {transform: scale(1.1); transition: ease 0.3s;}
.vdo-box > div.flex > div > a p.ell.row2{margin-bottom: 1rem; height: auto; max-height: 4.6rem; font-weight: bold;}
.vdo-box > div.flex > div > a p.gray{font-size: 1.4rem;}
.vdo-box > div.flex > div > a > div.txt-box{padding: 1rem; background-color: #f5f5f5;min-height: 15rem;}
.vdo-box > div.flex > div > a > div.txt-box > p:last-of-type{font-size: 1.4rem;}

.vdo-view-box > div.flex{margin-bottom: 3rem; padding: 4rem; border: 1px solid #ddd; justify-content: space-between;}
.vdo-view-box > div.flex > div.img-box{width:660px; height: 370px;}
.vdo-view-box > div.flex > div.img-box > img{width: 100%; height: 100%;}
.vdo-view-box > div.flex > div.txt-box > div.suj-flex{justify-content: space-between; align-items: center;}
.vdo-view-box > div.flex > div.txt-box{width: calc(100% - 55%);}
.vdo-view-box > div.flex > div.txt-box p{font-size: 2.2rem; font-weight: bold; height: 5rem;}
.vdo-view-box > div.flex > div.txt-box div.line{margin-top: 2rem; margin-bottom: 5rem;width: 46px; height: 2px; background-color: #222;}
.vdo-view-box > div.flex > div.txt-box div.cont{height: 10rem;}
.vdo-view-box > div.flex > div.txt-box div.line2{margin-top: 5rem; margin-bottom: 6rem; width: 100%; height: 1px; background-color: #ddd }
.vdo-view-box > div.flex > div.txt-box a { padding: 0.5rem 2rem; width: fit-content; border: 1px solid #222;}
.vdo-view-box > div.flex > div.txt-box a:hover{background-color: #222; color: #fff;}
.vdo-view-box > div.flex > div.txt-box > div.btn-flex {padding-top: 0; justify-content: flex-start;}
.vdo-view-box > div.flex > div.txt-box > div.btn-flex > a:not(:first-of-type){margin-left:0.5rem;}

.vdo-view-wrap > div.vdo-box{width: 100rem;}
.vdo-view-wrap > div.vdo-box > div.frame-box{position: relative; width: 100%;padding-top: 56.25%}
.vdo-view-wrap > div.vdo-box > div.frame-box > iframe{position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.vdo-view-wrap > div.vdo-box > div.frame-box.poster-wrap {padding-top: 60%;    background: #f5f5f5;}
.vdo-view-wrap > div.vdo-box > div.frame-box.poster-wrap > img {position: absolute; top: 0;left: 50%;transform: translateX(-50%); width: 50rem;height: 100%;;padding: 3rem;}
.vdo-view-wrap > div.vdo-box > div.frame-box >img {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.vdo-view-wrap > div.vdo-box > div.tag-box{flex-wrap: wrap;}
.vdo-view-wrap > div.vdo-box > div.tag-box > a{margin: 0.5rem; background: #f5f5f5; font-size: 1.2rem; padding: 0.2rem 1rem; border-radius: 100px;}
.vdo-view-wrap > div.vdo-box > div.tag-box > a:hover{background-color: #ccc;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box {padding: 3rem 0; align-items: center;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a {display: flex; align-items: center;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a.link-box{margin-left: 1rem;height: 3rem;padding: 0 1rem;background: #222; color: #fff; font-size: 1.4rem;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a > div.img-box{overflow: hidden;width: 7rem; height: 7rem; border-radius: 50%; border: 1px solid #ddd;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a > div.img-box > img{width: 100%; height: 100%;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a > p {padding:0 1rem; font-size: 1.8rem; font-weight: bold;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.tab-wrap div.tab-title ul{margin-bottom: 3rem; border-bottom: 1px solid #ddd;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.tab-wrap div.tab-title ul > li {margin-bottom: 0;}
.vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.tab-wrap div.tab-content {min-height: 20rem;}

.vdo-view-wrap > div.vdo-list{width: 35rem;}
.vdo-view-wrap > div.vdo-list > div.banner-box{padding-bottom: 2rem;}
.vdo-view-wrap > div.vdo-list > div.banner-box > a > div.img-box{position: relative; width: 100%;padding-top: 56.25%; padding-bottom: 2rem;}
.vdo-view-wrap > div.vdo-list > div.banner-box > a > div.img-box > img {position: absolute;top: 0;left: 0; width: 100%; height: 100%;}

.vdo-view-wrap > div.vdo-list > ul > li > a{padding:1.5rem 0;}
.vdo-view-wrap > div.vdo-list > ul > li > a > div.img-box{overflow: hidden; margin-right: 2rem; flex: 0 0 auto; width:12.5rem; height: 7.2rem; }
.vdo-view-wrap > div.vdo-list > ul > li > a > div.img-box > img{width: 100%; height: 100%; transition: ease all 0.3s;}
.vdo-view-wrap > div.vdo-list > ul > li > a > dl{font-size: 1.4rem;}
.vdo-view-wrap > div.vdo-list > ul > li > a > dl > dt{-webkit-line-clamp: 2;height: auto; max-height: 3.5rem;margin-bottom: 1rem;font-size: 1.4rem; font-weight: 600; line-height: 1.6rem;}
.vdo-view-wrap > div.vdo-list > ul > li > a > dl > dd{font-weight: 300;line-height: 1.5rem;}
.vdo-view-wrap > div.vdo-list > ul > li > a:hover img{transform: scale(1.1); transition: ease all 0.3s;}

  /*write-box*/
div.app_box{margin-bottom: 3rem; padding: 1rem; background-color: #fff;background-image: linear-gradient(-45deg, transparent 40%, #999 40%, #999 50%, transparent 50%, transparent 90%, #999 90%);background-size: 6px 6px;}
div.app_box > div{padding:1rem 2rem; background-color: #fff;}
div.app_box > div > div.img-box{width: 20%;}
div.app_box > div > div.txt-box{width: 100%;}
div.app_box > div > div.txt-box p {font-weight: 300; color:#222; }
div.app_box > div > div.txt-box p > span {color: #0069d4; font-weight: 600;;font-size: 2.4rem;}

div.app_box.apb{position: relative;}
div.app_box.apb >div{padding: 2rem;}
div.app_box.apb .img-box{position: absolute; top:2.5rem; left:3rem;  width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden;}
div.app_box > div > p {padding-left: 8rem;}

.state{width:6rem; padding: 0.4rem 0rem; color: #fff; text-align: center; border-radius: 6px;}
.state.statB{background-color:#00abeb;}
.state.statGa{background-color:#666;}
.state.stateBorder{border: 1px solid #525252; color:#525252;}
div.app-box > div > div > a {border-top: 1px solid #ddd;padding: 3rem;   position: relative; justify-content: space-between;}
div.app-box > div > div > a > div.img-box{position: relative; width:30rem; flex: 0 0 auto; border: 1px solid #ddd;}
div.app-box > div > div > a > div.img-box > img{position: absolute; height: 100%; top:0; left: 0;}
div.app-box > div > div > a > div.txt-box{width: calc(100% - 35rem);}
div.app-box > div > div > a > div.txt-box > div.p-flex{padding-left: 7.5rem; padding-top:0.3rem;display: flex; align-items: center; position: relative;}
div.app-box > div > div > a > div.txt-box > div.p-flex .state{position: absolute; top:0; left: 0;}
div.app-box > div > div > a > div.txt-box > div.p-flex p.subject{font-size: 2rem; font-weight: bold;}
div.app-box > div > div > a > div.txt-box > div.p-flex p.row3{margin-top:20px; margin-bottom: 3rem; height: 7rem; line-height: 22px; font-weight: 300;}
div.app-box > div > div > a > div.txt-box div.con-box{width: 100%;}
div.app-box > div > div > a > div.txt-box > div.info-box{color: #525252}
div.app-box > div > div > a > div.txt-box > div.etc-box {justify-content: flex-end; font-size: 1.4rem; color: #525252;}
div.app-box > div > div > a > div.txt-box > div.etc-box > p:not(:first-of-type):before {display: inline-block; content: ''; width: 1px; height:11px; background-color: #525252; margin: 0 1rem;}

.map-board-wrap > div.flex{}
.map-board-wrap > div.flex div.map {width: 668px; margin-right: 10rem; margin-top: 15rem; flex: 0 0 auto;}
.map-board-wrap > div.flex div.map-list{width:50%;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div {padding: 2rem; border-top: 1px solid #ddd;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div.no_data{padding: 11rem;border-top: 1px solid #ddd; background-color: #f5f5f5;text-align: center;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.img-box {width: 30%; position: relative;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.img-box > div{overflow: hidden; position: relative; flex: 0 0 auto; width: 100%; padding-top: 75%; box-sizing: border-box; border: 0.1rem solid #ddd;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.img-box > div > img{transition: ease 0.3s; position: absolute; transform: translate(-50%, -50%); top:50%; left: 50%; width: 100%; height: auto;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.txt-box {padding-left: 4%; width: 66%;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.txt-box > p.category{padding: 0 1rem; width: fit-content; background-color: #333; color: #fff;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.txt-box > p.ell{padding: 1rem 0; font-weight: bold; font-size: 1.8rem;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.txt-box > dl{font-size: 1.4rem; font-weight: 400; color: #666;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.txt-box > dl > dt {flex: 0 0 auto; width: 6rem;}
.map-board-wrap > div.flex div.map-list div.map-list-box > div > a:hover > div.img-box > div > img{transform: translate(-50%, -50%) scale(1.1); transition: ease 0.3s; top:50%; left: 50%; }
#calendar_field .cal-top.flex{margin-bottom: 2rem;}
#calendar_field .cal-top.flex button > i {font-size: 2.4rem;}
#calendar_field .cal-top.flex button.btn-tt{font-size: 3rem; font-weight: bold;}
#calendar_field div.state-box{display: flex;}
#calendar_field div.state-box span.cal-state{flex: 0 0 auto; width: 1rem; height: 1rem; border-radius: 50%; margin-right: 1rem}
#calendar_field div.state-box span.cal-state.stateR{background-color: #ee4040;}
#calendar_field div.state-box span.cal-state.stateG{background-color: #90df67;}
#calendar_field div.state-box span.cal-state.stateB{background-color: #699add;}
#calendar_field div.state-box span.cal-state.stateY{background-color: #fec502;}
#calendar_field div.state-box span.cal-state.stateP{background-color: #9938FE;}

#calendar_field div.state-box span.cal-state:not(:first-of-type){margin-left: 0.5rem;}
#calendar_field div.info div.state-box > p {margin-left: 2rem; align-items: center; font-size: 1.4rem;}
#calendar_field div.cal-box{background-color: #ffffff7a;   border-radius: 20px;}
#calendar_field div.cal-box > div{overflow: hidden; box-shadow: 0px 0px 19px 3px rgb(38 48 132 / 12%);border-radius: 20px;}
#calendar_field div.cal-box > div > div.week {width: 100%; }
#calendar_field div.cal-box > div > div.week > div{height: 8.5rem; width: calc(100% / 7); border-bottom: 1px solid #ddd;}
#calendar_field div.cal-box > div > div.week:first-of-type > div {height: 5rem; line-height: 5rem; font-weight: bold;text-align: center;}
#calendar_field div.cal-box > div > div.week:first-of-type > div > p.day{width: 100%; height: 100%; line-height: inherit;}
#calendar_field div.cal-box > div > div.week:not(:first-of-type) > div{display: flex;flex-direction: column;justify-content: space-between; align-items: center;  padding: 0.5rem 0rem 0rem;}
#calendar_field div.cal-box > div > div.week > div:first-of-type{color: #ee4040;}
#calendar_field div.cal-box > div > div.week > div:last-of-type{color: #699add;}
#calendar_field div.cal-box > div > div.week > div.on{background-color:#e6edf8;}
#calendar_field div.cal-box > div > div.week > div > p.day{width: fit-content;border-radius: 100px; font-weight: bold; padding: 0 1rem;height: 25px;line-height: 22px;}
#calendar_field div.cal-box > div > div.week > div > p.day.today{background: #ff9800; color: #fff;}
#calendar_field div.cal-box > div > div.week > div > p.m-day{display: none;}
#calendar_field div.cal-box > div > div.week > div > div.state-box{padding: 1rem;}

/*my-page*/
.my-cal-box > div.flex{flex-wrap: wrap; justify-content: space-between; background-color: #f5f5f5; padding: 3rem;}
.my-page-box{width: 100%;background: #fff; margin-bottom:5rem;padding: 3rem 5rem;}
.my-page-box > div.flex{align-items: center;}
.my-page-box > a.flex-top{padding-bottom: 2.5rem; justify-content: space-between;}
.my-page-box > a.flex-top > p {font-size: 2rem; font-weight: bold;}
.my-page-box > a.flex-top > span{font-size: 1.4rem; border: 1px solid #ddd; border-radius: 100px; padding: 0 1rem;}
.my-page-box > div.flex > a.img-box{margin-right: 2rem;  width: 10rem; height: 10rem; flex: 0 0 auto; border-radius: 50%; overflow: hidden;}
.my-page-box > div.flex > a.img-box > img {width: 100%; height: 100%;}
.my-page-box > div.flex > div.txt-box > dl {display: flex;}
.my-page-box > div.flex > div.txt-box > dl:not(:first-of-type){padding-top:0.2rem;}
.my-page-box > div.flex > div.txt-box > dl > dt {padding-right: 0.5rem; font-weight: bold;}
.my-list-box{justify-content: space-between;}
.my-list-box > div{width: 32%;}
.my-list-box > div > a.flex {padding: 1.5rem; background-color: #f5f5f5; font-weight: bold; justify-content: space-between; align-items: center;}
.my-list-box > div > ul > li > a {border-bottom: 1px solid #ddd; padding: 1rem 1.5rem; display: flex; justify-content: space-between;}
.my-list-box > div > ul > li > a > p.date{font-size: 1.4rem;}
.my-list-box > div > ul > li.no-data > p {padding: 1rem 0; text-align: center; border-bottom: 1px solid #ddd;}
.my-cal-list-box{padding: 3rem; width: calc(100% - 550px);flex: 0 0 auto; background-color: #fff;}
.my-cal-list-box > a.flex{padding-bottom: 3rem; justify-content: space-between;border-bottom: 1px solid #ddd; }
.my-cal-list-box > a.flex > p{font-size: 1.8rem;display:flex; flex-direction: column; font-weight: bold;}
.my-cal-list-box > a.flex > p > span{font-weight: 400; font-size: 1.2rem;}
.my-cal-list-box > ul > li > a {padding: 1.4rem 0px; display: flex; justify-content: space-between; align-items: center;    border-bottom: 1px solid #ddd;}
.my-cal-list-box > ul > li > a > p.ell{font-weight: 500;}
.my-cal-list-box > ul > li > a > p.date{font-size: 1.4rem;}
.my-cal-list-box > ul > li > a > p > span.state{margin-right: 0.5rem; font-weight: 400; padding: 0.2rem 0.5rem; font-size: 1.2rem;}
.my-cal-list-box > ul > li > a > p > span.stateR{background-color:#ee4040 }
.my-cal-list-box > ul > li > a > p > span.stateG { background-color: #90df67;}
.my-cal-list-box > ul > li > a > p > span.state.stateB { background-color: #699add;}
.my-cal-list-box > ul > li > a > p > span.state.stateY { background-color: #fec502; }

/* write */
p.table_title{padding-bottom: 1rem; font-size: 2rem; color: #222; font-weight:600;}
table.write_table {width:100%;margin:0;border-collapse:collapse;table-layout:fixed;border-top:2px solid #333; }
table.write_table tr th, table.write_table tr td {padding:1em 2rem;border-bottom:1px solid #ddd;line-height:1.5em;text-align:left;vertical-align:middle;}
table.write_table tr th{width:18%;}
/*table.write_table tr td input.text{width:40rem;}*/
table.write_table tr td input.text.txt40{width:40rem;}
table.write_table tr td > div.flex{align-items: center;}
table.write_table tr td > div.flex > div:not(:first-of-type){margin-left: 5px;}
table.write_table tr td input.text-min{width: 10rem;}
table.write_table tr td input.text.post_num{width:35%;}
table.write_table tr td input.text.post_addr{width: 80%; margin: 0.3rem 0;}
table.write_table tr td input.text.details_address{width: 80%;}
table.write_table tr td input.text.full_form{width:100%;}
table.write_table tr td input.text.narrow_form{width:35%;}
table.write_table tr td textarea{width:100%; box-sizing: border-box;}
table.write_table.border tr th.application_form {display: block; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width:200px;}
table.write_table tr th {font-weight:500;border-right:1px solid #ddd;background:#fff;color:#333;}
table.write_table tr th strong.essential, table.write_table tr td strong.essential {color:#fe0000;}
table.write_table tr th.required {background:url("/common/img/ico_required.png") 9px 50% no-repeat #fff; }
table.write_table tr td p.write_info{display:inline-block; padding-left:5px; font-size:14px;}
table.write_table textarea.textarea{resize: none; box-sizing: border-box;}

table.write_table tr th label {margin:0;}
table.write_table tr td label {position:relative;top:2px;padding-left:2px;}
table.write_table tr td ul {}
table.write_table tr td ul > li {margin-top:10px;}
table.write_table tr td ul > li:first-child {margin:0;}

.btn-flex {padding-top: 4rem; display: flex; justify-content: center; align-items: center;}
.btn-flex .btn{margin:0 0.5rem;}
.btn-flex .btn {width: fit-content; padding: 0 3rem;}
.btn-flex .f-btn {
    padding: 0 2rem;
    width: fit-content;
    border: 1px solid #2196f3;
    border-radius: 3rem;
    line-height: 4rem;
    box-sizing: border-box;
    color: #2196f3;
    font-weight: 600;
}
.btn-flex .f-btn:hover{
    background-color: #2196f3;
    color: #fff;
}
  /* pagination */
div.pagination {position:relative;overflow:hidden;width:100%;height:100px;margin:0;padding-top:50px;}
div.pagination ul {position:relative;left:-50%;float:right;}
div.pagination ul:after {clear:both;display:block;content:"";}
div.pagination ul li {position:relative;left:50%;float:left;margin-left:10px;}
div.pagination ul li:first-child {margin-left:0;}
div.pagination ul li a {display:block; min-width:4rem; height:4rem; border:1px solid #ddd;line-height:4rem; background:none; color:#888; vertical-align:baseline; text-align:center; border: 1px solid #999;}
div.pagination ul li:first-child a{}
div.pagination ul li.on a { border-color:#222; background:#222; color:#fff;}
/*div.pagination ul li.arrow a { background:url("./img/sp_page.png") 0 0 #f0f0f0 no-repeat; text-indent:-5000px;}*/
div.pagination ul li.arrow a { background:url("./img/sp_page.png") 0 0 #f0f0f0 no-repeat;}
div.pagination ul li.begin a {background-position:0 7px;}
div.pagination ul li.prev a {background-position:0 -43px;}
div.pagination ul li.next a {background-position:1px -93px;}
div.pagination ul li.end a {background-position:1px -143px;}
div.pagination ul li a:focus,
div.pagination ul li a:hover,
div.pagination ul li a:active {border-color:#222; background-color:#f5f5f5; color: #222; text-decoration:none;}
div.pagination ul li.begin a:focus, div.pagination ul li.begin a:hover {background-position:-100px 7px;}
div.pagination ul li.prev a:focus, div.pagination ul li.prev a:hover {background-position:-100px -43px;}
div.pagination ul li.next a:focus, div.pagination ul li.next a:hover {background-position:-99px -93px;}
div.pagination ul li.end a:focus, div.pagination ul li.end a:hover {background-position:-99px -143px;}

/*btn-area*/
div.btn-area{display: flex; align-items: center; justify-content: center;}
div.btn-area a {width: fit-content; padding: 0 2rem;}

/**/
div.user_exhibit span.u-e-cg{position: absolute;top: 1rem;left: 1rem;background: #699add;z-index: 2;padding: 4px 10px;color: #fff;font-size: 12px; display: none;}


/*tab기본*/
div.tab-wrap div.tab-title ul{}
div.tab-wrap div.tab-title ul > li{position: relative; margin-bottom:3rem;padding-bottom: 5px; margin-right:1.5rem; font-weight: 600; width:fit-content; font-size: 2rem; color: #999; text-align: center; cursor: pointer;}
div.tab-wrap div.tab-title ul > li.on{border-bottom: 3px solid #222; color: #222;}
div.tab-wrap div.tab-title ul > li:last-child{margin-right: 0;}
div.tab-wrap div.tab-content > div{display:none;}
div.tab-wrap div.tab-content > div.on{display: block;}

div.tab-wrap.type01 div.tab-title ul > li {background-color: #fff; padding:2rem; border-top: 1px solid #ddd; border-bottom:1px solid #222; width: 100%; margin-right: 0;}
div.tab-wrap.type01 div.tab-title ul > li:not(:first-of-type){border-left: 1px solid #ddd;}
div.tab-wrap.type01 div.tab-title ul > li.on{border-top: 1px solid #222; border-left: 1px solid #222; border-right:1px solid #222; border-bottom: 1px solid #fff;}

div.tab-wrap.type02 div.tab-title ul{margin-bottom: 2rem; flex-wrap: wrap;}
div.tab-wrap.type02 div.tab-title ul > li {margin-right: 0.5rem;margin-bottom: 0.5rem;font-size: 1.4rem; border-radius: 100px;border-bottom: 0; width: fit-content;padding: 0 1rem;background: #ddd; line-height: 2.4rem; height: 2.6rem;}
div.tab-wrap.type02 div.tab-title ul > li.on{background: #222; color: #fff;}
div.tab-wrap.type02 div.tab-content p.loct-title{font-weight: bold;}

/* 레이어팝업 */
.popup_cs {position:absolute; z-index:1000; background:transparent; z-index: 999;}
.popup_cs > img{width:100%; height:100%;}
.popup_cs .popup_bottom {background-color:#333; text-align: right;}
.popup_cs .popup_bottom a {color:#fff; padding:0 5px;}
.popup_cs .popup_bottom span {padding:0 5px;}
#layer_back { display:none; position:fixed; top:0; left:0; z-index:990; width:100%; height:100%; background-color:#000; filter:alpha(opacity=80); -khtml-opacity:0.8; -moz-opacity:0.8; opacity:0.8; }
#layer_back.open { display:block; }
#layer_back.over { z-index:996; }
#layer_popup { display:none; position:fixed; top:50%; left:50%; z-index:995; width:600px; height:600px; background-color:#fff; margin:-300px 0 0 -300px; border:1px solid #000; border-radius: 20px;overflow: hidden;}
#layer_popup.open { display:block; }
#layer_header { position:relative; width:100%; height:55px; background-color:#fff; }
#layer_header > h1 { width:80%; margin:3rem 6rem; color:#222; font-size:20px; font-weight:bold; }
#layer_header > button { position:absolute; top:2px; right:38px; z-index:996; width:24px; height:24px; margin:0; padding:0; border:0; cursor:pointer; background:none; }
#layer_header > button > i { font-size:24px; color:#222; }
#layer_content { height:500px; padding:40px 60px; margin-bottom:0; overflow-y:auto; *zoom:1;  box-sizing: border-box;}
#layer_content h2 { height:20px; line-height:20px; margin-top:30px; color:#3c3c3c; font-weight:bold; }
#layer_content h2:first-child { margin-top:0; }

/* layer loading*/
#layer_loading { display:none; position:fixed; top:50%; left:50%; z-index:999; width:200px; height:200px; margin:-100px 0 0 -100px; }
#layer_loading > p { width:200px; height:140px; padding:30px 0; text-align:center; }
#layer_loading > p > i {font-size:100px; color:#eee; }
#layer_loading > p > strong { display:inline-block; margin:10px 0; font-size:12px; font-weight:bold; color:#fff; }

#layer_loading.open { display:block; }
.vdo-top{padding-bottom: 2rem;}


div.top-btn{position:absolute; top:36rem; right: 10%; width: 6rem;  z-index: 9999;}
div.top-btn a{/*overflow: hidden;*/ position: relative; display: block; margin-bottom: 1rem; width: 100%; height: 6rem;border-radius: 50%; background:#4ecbff; color: #fff; text-align: center; line-height: 6rem; font-size: 1.8rem; transition: ease all 0.5s;}
div.top-btn a i{font-size: 3rem; line-height: 6rem;}
div.top-btn a p {width: 15rem; position: absolute;right: -160px;top: 10px;color: #fff;z-index: 1;padding: 1rem 2rem;  border-radius: 100px;font-size: 1.4rem;height: 4rem;line-height: 2rem;}
div.top-btn a:nth-of-type(1) p{ background-color: #f44336;}
div.top-btn a:nth-of-type(2) p{background-color:#ff9800;}
div.top-btn a:nth-of-type(3) p{background-color:#ffbc00;}
div.top-btn a:nth-of-type(4) p{background-color: #8bc34a;}
div.top-btn a:nth-of-type(5) p{background-color:#2196f3;}
/*div.top-btn a:hover{box-shadow: 5px 5px 10px rgba(0,0,0,0.3);overflow: auto;overflow: visible;transition: ease all 0.5s;}*/

.cal-user-box > div.box:not(:first-child){margin-top: 3rem;}
.cal-user-box > div.box{ border-radius: 30px;}
.cal-user-box > div.box > a {width: 100%; border-radius: 30px; padding: 3rem;box-shadow: 18px 13px 20px 0px rgb(0 0 0 / 10%);transition: ease all 0.3s;}
.cal-user-box > div.box > a:hover{box-shadow: 18px 13px 20px 0px rgb(0 0 0 / 20%); transition: ease all 0.3s;}
.cal-user-box > div.box > a > div{width: 100%;}
.cal-user-box > div.box > a p.ell{margin-bottom: 2rem; font-size: 2.2rem; font-weight: 500;}
.cal-user-box > div.box > a div.date-flex{justify-content: space-between; flex-wrap: wrap;}
.cal-user-box > div.box > a div.date-flex > p {padding-top: 1rem;}

.cal-user-box::-webkit-scrollbar {height:5px;}
.cal-user-box.x-scroll{padding:2rem 0 5rem; width: 60rem;}
.cal-user-box.x-scroll > div.box{width: 30rem;flex: 0 0 auto; margin-top: 0}
.cal-user-box.x-scroll > div.box:not(:first-of-type){; margin-left: 3rem;}
.cal-user-box.x-scroll > div.box > a p.ell {margin-bottom: 1.5rem;font-size: 2rem;}
.cal-user-box.x-scroll > div.box > a div.date-flex > p {font-size: 1.4rem; padding-top: 0rem;}

div.view-ser-btn-box{display: flex; justify-content: center; margin-top: 8rem;}
div.view-ser-btn-box > button { width: fit-content;border-radius: 100px;padding: 1rem 2rem;background: #333; color: #fff;}
div.view-ser-btn-box > button:hover{background: #000;}


div#image_field{}
div#image_field div.img-box{flex: 0 0 auto; margin-right: 1rem; width: 15rem; height: 15rem; position: relative;border: 1px solid #ddd;overflow: hidden; background-color: #f5f5f5;}
div#image_field div.img-box:first-of-type{display: flex;justify-content: center;}
div#image_field div.upload_photo > button{width: 3rem;height: 3rem;border-radius: 100%; background: #222; color: #fff; position: absolute; top:1rem; right: 1rem;}
div#image_field div.upload_photo > img{width: 15rem; height: 15rem;}

.gal-view dl > dd > div.flex-wrap{flex-wrap: wrap;}
.gal-view > div.flex > div.txt-box > div.t-box > dl dd img{margin: 4px; max-width: 100%; width: fit-content;}

@media screen and (max-width:1400px) {

  .inner{width:100%; padding: 0 4%; box-sizing: border-box;}
  #container { min-width:auto; width:100%;} /* min-width 값은 변경 또는 wrap 등으로 위치이동 */


  div#section-top {padding-top: 0rem;}
  div#section-top div#sub-visual div.txt-box p{width:90%;}

  /*div#section-body*/
  #section-body{min-height: 80rem; padding-bottom:10rem; }

  /* snb */
  div.subwrap{display:block;}
  #aside{display: none; width:100%; margin: 0;}
  #snb{display:none;}
  #content{ width:100%; }
  #content > h3{position:static; font-size: 26px;}
  #content div.sub-title h3{padding-bottom:2rem;}
  #content div.sub-title.flex{display:block;}
  #title_path{padding-top:0; }
  #title_path > a{word-break: keep-all;}
  #content > #article{padding:30px 0 50px;}

    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a {font-size: 1.6rem; }

  /*footer*/
  footer{width:100%; box-sizing: border-box;}
  footer div.f_link_box div.related-link{width:100%;}

  /*content*/
  div#article-wrap {padding: 2rem 0 2rem 0;  width: 100%; box-sizing: border-box;}
  div#article-wrap > div.flex:first-child { padding-bottom: 2rem; margin-bottom: 2rem;flex-wrap: wrap;flex-direction: column;}

  /*게시판*/
  div.status-box{padding:1rem;}
  div.status-box div.title-box{width:15%; }
  div.status-box > ul.flex{width:85%;}
  div.status-box > ul.flex > li{width:33.3%; padding:1rem 0; }
  span.status{display:inline-block; width:7.2rem;}

  /*list-top*/
  div.list-top.flex{justify-content: space-between;}
  div.list-top{padding-top:4rem; padding-bottom:2rem; font-size:1.6rem; color:#555;}
  div.list-top div.left p strong{font-weight:600;}
  div.list-top div.right > button{width:4rem; background:#aaa; color:#fff;}
  div.list-top div.right > button.using{background:#333;}

  /*list-bottom*/
  div.btn-area{padding-top:2rem;}
  div.btn-area.flex.flexbs, div.btn-area.flex.bs{justify-content: space-between;}
  div.btn-area.flex.flexfe, div.btn-area.flex.fe{justify-content: flex-end;}
  div.btn-area button.btn,
  div.btn-area a.btn{min-width:12rem; margin:0.6rem;}
  /*basic list*/
  /**
  * list
  */

}
@media screen and (max-width:1360px) {
    #wrap{position: relative;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a {font-size: 1.4rem; }


}

@media screen and (max-width:1200px) {
    .gnb_on #header > #header-wrap > div.nav-box:before {display: block;content: "";width: 100%;height: 100%; background: rgba(0,0,0,0.8); position: absolute; top: 0;left: -100%; z-index: 10;}
    #wrap{position: relative;}
    #header > #header-wrap > div.header-top > div.inner {padding: 1rem 4%;}
    #header > #header-wrap > div.header-top > div.inner h1 {width: 14rem; height: 6rem; }
    #header > #header-wrap > div.header-top > div.inner > div.search-box {margin-right: 3rem;}
    div.header-login.flex{display: none;}
    #header > #header-wrap > div.nav-box > div.inner {padding: 0;align-items: flex-start; overflow: scroll; height: 100%; }
    .gnb_on #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul {display: none; }
    #header > #header-wrap > div.nav-box > div.inner > div.m-login {display: flex;position: absolute;}
    #header > #header-wrap > div.nav-box > div.inner >  div.m-login > p{font-weight: bold; font-size: 1.4rem;}
    #header > #header-wrap > div.nav-box > div.inner > div.m-login > p:not(:first-child){padding-left: 1rem; }
    #header > #header-wrap.on:before, .gnb_on #header > #header-wrap:before{display: none;}
    #header > #header-wrap > div.nav-box{width: 80%;position: fixed;  right: -100%; top: 0; height: 100vh;background: #fff;z-index: 999;}
    #header > #header-wrap > div.nav-box > div.inner > button.btn-gnb {position: fixed;top: 10px;right: 0;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul {padding-right: 0; align-items: flex-start;flex-direction: column;width: 100%;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li {width: 100%;line-height: 6rem; height: 6rem;border-bottom: 1px solid #666;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li:hover:after {display: none;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a {padding: 0 2rem; text-align: left; font-size: 1.4rem;display: flex;align-items: center; justify-content: space-between;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a > i{transition: ease all 0.3s; }
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li.on{height: auto;}
    #header > #header-wrap.on > div.nav-box > div.inner > #gnb > ul > li.on > a {color: #222;}
    #header > #header-wrap.on > div.nav-box > div.inner > #gnb > ul > li.on > ul > li > a {color: #222;font-size: 1.3rem;font-weight: 500;padding: 1.5rem 2.8rem;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li.on  > a  > i{transition: ease all 0.3s; transform: rotate(180deg);}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul {position: static;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li{border-top: 1px solid #ddd;background: rgba(0,0,0,0.2);}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li:first-of-type{border-top: 1px solid #666;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li > a {padding:1rem 4rem; text-align: left;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li:nth-of-type(7) > a:after{display: none;}
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > ul > li { line-height: normal; }
    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li.on > ul{display: block;}

    #header > #header-wrap > div.nav-box > div.inner > #gnb > ul > li > a:after{display: none}

    .gnb_on #header > #header-wrap > div.nav-box{right: 0;}
    .m-login{display: flex; padding: 3rem;}
    .m-login > p > a{font-size: 1.4rem; font-weight: bold;}
    .m-login > p:first-of-type > a:after{display: inline-block; margin: 0 2rem; width: 2px; height: 10px; background-color: #d1d1d1; content: "";}
    .nu-search form > div.flex > dl:last-of-type {margin-top: 0  }
    .nu-search form > div.flex > dl:last-of-type input.text {width: auto; }

}
/*태블릿*/
@media screen and (max-width:1000px) {


  #aside{display: none;}
  #snb {display: none;}
  #aticle-wrap {width: 100%;}
  #aticle-wrap > h4 {padding: 3rem 0; margin-bottom: 3rem;font-size:2.4rem;}
  .poster-box::-webkit-scrollbar {height:5px;}

  #container {margin-top: 6rem;}
    .qick-box{display: none;}

  div.tab-wrap.type02 div.tab-title ul > li {;margin-right: 1rem;}
  div.tab-wrap.type01 div.tab-title ul > li {font-size: 1.6rem; padding: 1rem; max-width:100%; flex: 0 0 auto;width: 25%;  min-width: 15rem;}
  #section-body{min-height: auto; padding-bottom:10rem; }
    #section-top #sub-visual > div.inner > h3 {font-size: 2.6rem;font-weight: bold;padding-bottom: 0rem;}
    #lnb > #lnb-inner > ul > li > ul > li > a { padding: 1rem 1.6rem;font-size: 1.4rem; text-align: center;}
  /*footer*/
    input.text {width: 100%;}
    .nu-search button, .nu-search a {width: 100%; text-align: center;}


  /*게시판*/
  .gal-box > div.flex > div {margin-left:0%; width:100%;margin-top: 3rem; }
  .gal-box > div.flex > div:nth-child(-n+4) { margin-top: 3rem; }
  .gal-box > div.flex > div:nth-child(1) {margin-top: 0; }
  .gal-box > div.flex > div > a > div.text-box {padding: 20px; min-height:auto;}
  .gal-box > div.flex > div > a > div.text-box > p.ell {height: 4rem; margin-bottom: 1rem; font-size: 1.6rem;}
  .gal-box > div.flex > div > a > div.img-box > i {top: auto; left: auto; bottom: 2rem;right: 2rem;transform: translate(0, 0);font-size: 1.8rem;text-align: center; background: #222; width: 4rem; height: 4rem; border-radius: 50%; z-index: 1;line-height: 4rem;}
  .gal-box > div.flex > div > a:hover > div.img-box > img {opacity:1}

  .vdo-box > div.flex > div {width: 49%; margin-left: 0; margin-top: 0; margin-top: 4rem;}
  .vdo-box > div.flex > div:nth-child(-n+5) {margin-top: 4rem;}
  .vdo-box > div.flex > div:nth-child(-n+2){margin-top: 0;}
  .vdo-box > div.flex > div:not(:nth-child(6n)) {margin-left: 0%;}
  .vdo-box > div.flex > div:nth-child(even){margin-left: 1%;}

  div.board_view > dl > dd.flex { flex-wrap: wrap-reverse;}
  div.board_view > dl > dd.flex > div.bg-gray {padding:1rem 3rem; width: 100%; font-size: 1.6rem; }
  div.board_view > dl > dd.flex > div.bg-gray > i {width: 4rem;height: 4rem;line-height: 4rem;}
  div.board_view > dl > dd.flex > a {width: 100%;font-size: 1.6rem;}
  div.board_view > dl > dt {padding: 0px 20px 30px; line-height: 1.4; font-size: 1.4rem; }

  .vdo-view-box > div.flex {padding: 2rem;flex-direction: column;}
  .vdo-view-box > div.flex > div.img-box {width: 100%;}
  .vdo-view-box > div.flex > div.txt-box {padding-top: 2rem;width: 100%; }
  .vdo-view-box > div.flex > div.txt-box p {height: 4rem; line-height: 21px; font-size: 1.6rem;}
  .vdo-view-box > div.flex > div.txt-box div.line {margin-bottom: 2rem;width: 30px;}
  .vdo-view-box > div.flex > div.txt-box div.cont {line-height: 21px;height: 8.5rem; }
  .vdo-view-box > div.flex > div.txt-box div.line2 { margin-top: 2rem;margin-bottom: 2rem;}
  .vdo-view-box > div.flex > div.txt-box a {padding: 1rem 2rem; width: 100%;text-align: center;}
  .vdo-view-box > div.flex > div.txt-box a:hover{background-color: #fff; color: #222;}
  .vdo-view-box > div.flex > div.txt-box > div.suj-flex{align-items: flex-start; flex-direction: column;}



  .state {width: 5rem;font-size: 1.2rem;}
  div.app-box > div > div > a {padding: 2rem 1rem; flex-direction: column;}
  div.app-box > div > div > a > div.img-box {width: 100%; padding-top: 60%; }
  div.app-box > div > div > a > div.txt-box {padding-top:1rem; width: 100%;}
  div.app-box > div > div > a > div.txt-box > div.p-flex p.subject {font-size: 1.6rem;}
  div.app-box > div > div > a > div.txt-box > div.p-flex p.row3 {margin-top: 1rem;margin-bottom: 1rem;height: 5rem;line-height: 17px;}
  div.app-box > div > div > a > div.txt-box > div.p-flex { padding-left: 6rem;}
  div.app-box > div > div > a > div.txt-box > div.etc-box { font-size: 1.2rem;}

  .gal-view > div.flex{flex-direction: column;}
  .gal-view > div.flex > div.img-box { width: 100%;}
  .gal-view > div.flex > div.txt-box {padding-left: 0;}
  .gal-view > div.flex > div.txt-box > div.t-box > p.subject {font-size: 1.6rem; }
    .gal-box > div.flex > div > a > div.text-box > dl {font-size: 1.4rem; }
    .gal-box > div.flex > div > a > div.text-box > dl > dt { width: 4rem;}
    .gal-box > div.flex > div > a > div.text-box > p.ell { font-size: 1.4rem;line-height: 2rem; }

  #calendar_field > div.flex.jtsb {flex-direction: column;}
    #calendar_field div.cal-box { border-radius: 0px;}
  #calendar_field div.cal-box > div{box-shadow: none; border-radius: 0; display: flex; overflow: scroll; overflow-x: auto;  overflow-y: hidden; white-space: nowrap;  webkit-overflow-scrolling: touch;}
  #calendar_field div.cal-box > div > div.week {border: 0;flex: 0 0 auto;width: auto; border-top: 1px solid #222;}
  #calendar_field div.cal-box > div > div.week:first-of-type > div{display: none;}
  #calendar_field div.cal-box > div > div.week > div {flex: 0 0 auto;justify-content: flex-start;padding: 1rem 0rem 0rem;height: 8rem;width: 6rem;border:0;align-items: center;}
  #calendar_field div.cal-box > div > div.week > div.no_day{display: none;}
  #calendar_field div.cal-box > div > div.week > div > p.m-day{display: block;}
  #calendar_field div.cal-box div.state-box {flex-wrap: wrap;}
  #calendar_field div.cal-box div.state-box span.cal-state { width: 0.5rem;height: 0.5rem; }
  #calendar_field div.cal-box div.state-box span.cal-state:not(:first-of-type) {margin-left: 0.1rem;}

  .board-head{display: none;}
  .board-hidden{display: block; font-weight: bold;width: 6rem; padding-right: 1rem; }
  div.board div.board-body ul.row {flex-direction: column; align-items: flex-start; }
  div.board div.board-body ul.row li {font-size: 1.4rem; padding: 0.5rem 0; display: flex; width: 100%!important; text-align: left;}
  div.board div.board-body ul.row li.no {display: none; }
  div.board div.board-body ul.row li.state-li > p.state {margin: 0;}

  footer div.f-info > div.flex{flex-direction: column;}
  footer div.f-info > div.flex > .address {padding-left: 0;}
  footer div.f-info .sns-box {margin-top: 4rem; margin-left: 0;}

  .vdo-view-wrap {flex-direction: column;}
  .vdo-view-wrap > div.vdo-box { width: 100%; margin-right: 0; }
  .vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box {padding: 2rem 0;flex-wrap: wrap; justify-content: space-between;}
  .vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a { width: 100%; }
  .vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a > div.img-box {overflow: hidden; width: 5rem;height: 5rem;}
  .vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a > p {font-size: 1.6rem;}
  .vdo-view-wrap > div.vdo-box > div.vdo-info-box > div.prf-box > a.link-box {width: 100%; margin-left:0; height:4rem; margin-top: 1rem;text-align: center;justify-content: center;}
  .vdo-view-wrap > div.vdo-list { width: 100%; margin-top: 2rem;  padding-top: 2rem;border-top: 1px solid #ddd;}
  .vdo-view-wrap > div.vdo-list > div.banner-box > a > div.img-box{position: relative; width: 100%; padding-top: 56.25%;}
  .vdo-view-wrap > div.vdo-list > div.banner-box > a > div.img-box > img{position: absolute;top: 0;left: 0; width: 100%; height: 100%;  }


  .my-list-box {flex-direction: column; }
  .my-list-box > div { width: 100%; }
  .my-cal-list-box { width: 100%;}
  #calendar_field {width: 100%;}
  table.write_table {display: block;}
  table.write_table tbody,
  table.write_table tr,
  table.write_table tr th,
  table.write_table tr td{display: block; width: 100%;}
  table.write_table tr th{padding-bottom: 0; border: 0;}
  table.write_table tr td input.text {width: 100%;}
  table.write_table tr td > div.flex {align-items: flex-start; flex-direction: column;}
  table.write_table tr td > div.flex > div{width: 100%;}
  table.write_table tr td > div.flex > div:not(:first-of-type) {margin-top: 5px; margin-left: 0px;}
  table.write_table tr td > div.flex > div.selector,
  table.write_table tr td > div.flex > div > div.selector{width: 99%!important; }
  table.write_table tr td > div.flex > div.selector > span,
  table.write_table tr td > div.flex > div > div.selector > span{width: 100%!important; }
  /*table.write_table tr td > div.flex.flex-date{flex-direction: row;}*/
  /*table.write_table tr td > div.flex.flex-date > div{width: auto}*/
  table.write_table tr td input.text.date {width: 85%;}
  table.write_table table td button.btn { width: 100%;  margin-left: 0rem;height: 4.5rem;height: 4.5rem; margin-top: 1rem;}
  body.member table td button.btn { width: 100%;  margin-left: 0rem;height: 4.5rem;height: 4.5rem; margin-top: 1rem; }

    div.notic-search {font-size: 1.2rem;flex-direction: column;align-items: self-start;}

    #footer-wrap{}
    #footer-wrap div.f-top > div.flex{flex-wrap: wrap;}
    #footer-wrap div.f-top > div.flex > div > a {font-size: 1.2rem;}
    footer .f-top ul {width: 100%; }
    footer .f-top ul > li {width: 100%;}
    footer .f-top ul li a {padding: 1rem;}
    footer .f-top ul li a#selectLink1{padding:1rem;}
    footer .f-top ul li a#selectLink3{padding:1rem;}
    .gal-view > div.flex > div.txt-box > div.t-box > p.subject {padding-bottom: 1rem;}
    .gal-view > div.flex > div.txt-box > div.t-box > dl {font-size: 1.6rem;flex-direction: column;}
    .gal-view > div.flex > div.txt-box > div.t-box > dl:not(:first-of-type) {padding-top: 1rem;}
    .gal-view > div.flex > div.txt-box > div.t-box > dl dd {font-size: 1.4rem;}
    .gal-view .state-box {margin-bottom: 1rem; padding-bottom: 1rem;margin-top: 1rem;}
    .gal-view .state-box > span {padding: 0.1rem 2rem;font-size: 1.4rem;}
    .gal-view > div.flex > div.txt-box > div.t-box > div.btn-box { margin-top: 1rem!important; }
    .gal-view > div.tab-wrap { padding-top: 4rem;}
    .gal-view div.tab-content > div > div.flex{flex-direction: column;}
    .gal-view > div.tab-wrap div.tab-content > div {padding-top: 0;}
    .gal-view > div.tab-wrap div.tab-content > div > div.flex > p.bold {width: 100%;font-size: 1.8rem;padding-bottom: 1rem;}

    .nu-search form > div.flex { padding: 2rem;}
    .nu-search form > div.flex > dl:not(:last-child) {margin-bottom: 0.5rem; margin-right: 0;}
    .nu-search form > div.flex > dl{margin-right: 0;font-size: 1.4rem; flex-direction: column; width: 100%;  align-items: flex-start;}
    .nu-search form > div.flex > dl > dd{width: 100%;}
    .nu-search form > div.flex > dl > dd div.selector{width: 100%!important;}
    .nu-search form > div.flex > dl{position: relative;}
    .nu-search form > div.flex > dl .ui-datepicker-trigger{position: absolute; right: 0;}
    .nu-search form > div.flex > dl:last-of-type input.text {margin: 0.5rem 0; width:100%; }
    .popup_cs {position: absolute;z-index: 1000;background: transparent;z-index: 999;width: 90%!important;height: auto!important;left: 50%!important;top: 20px;transform: translateX(-50%)!important;}

    div.tab-wrap div.tab-title ul > li{font-size: 1.6rem; flex: 0 0 auto;}
    div.top-btn {top:36rem; width: 4rem; right: 2%;}
    div.top-btn a {height: 4rem;line-height: 4rem;font-size: 1.4rem;}
    div.top-btn a i {font-size: 2rem;line-height: 4rem;}
    div.top-btn a:hover{overflow: hidden;}
    div.top-btn a p {display: none;}

    footer .f-info {padding-bottom: 4rem; }
    #layer_popup.open {transform: translate(-50%,-50%); margin: 0!important;width: 80%!important;height: 80vh!important;}
    #layer_header > h1 {width: 70%;margin: 3rem 2rem 0;font-size: 16px;}
    #layer_header > button {top:0px;right: 2rem;}
    #layer_content { padding:20px 20px;}
    #layer_header { height: auto;}
}

@media screen and (max-width:740px) {


  #wrap {min-width:26rem}
  #container {width: 100%; min-width:26rem;} /* min-width 값은 변경 또는 wrap 등으로 위치이동 */
   section{min-width: 26rem;}
  #header > #header-wrap > div.inner > div.search-box {display: none;}
  #header > #header-wrap > div.inner > button.btn-gnb {margin-left: auto;}



  #content div.sub-title h3{font-size:2.8rem; padding-bottom:1rem;}
  #title_path{padding-top:0; margin-bottom:2rem;}
  #title_path > a{height:4rem; line-height:4rem;}

  /*sub-visual*/
  div#section-top div#sub-visual {height:20rem;}
  div#section-top div#sub-visual div.txt-box p{font-size:2.0rem;}
  div#section-top div#sub-visual .txt.subtit {font-size: 1.6rem !important;}
  footer div#footer-info {padding: 2rem 4%; color: #999;}

  /* footer */
  div.f-banner-wrap .slick-slide img {width: 100%;}

  /*content*/
  div#article-wrap {padding: 2rem 0 2rem 0;  width: 100%; box-sizing: border-box;}

  /*게시판*/
  div.status-box{display:block;}
  div.status-box >ul.flex,div.status-box > div.title-box{width:100%;}
  div.status-box > ul.flex > li{width:100%; padding:0.2rem 0; }

  .nu-search > div.flex > dl > dd > input.date{}

  .map-board-wrap > div.flex div.map-list div.map-list-box > div > a{flex-direction: column;}
  .map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.img-box {padding-top: 50%; width: 100%;}
  .map-board-wrap > div.flex div.map-list div.map-list-box > div > a > div.txt-box {padding-left: 0;padding-top: 2rem;}

    .vdo-box > div.flex > div {width: 100%;}
    .vdo-box > div.flex > div:nth-child(even) {margin-left:0; }
    .vdo-box > div.flex > div:nth-child(-n+2) {margin-top: 4rem!important; }
    .vdo-box > div.flex > div.no_data{margin-top: 0!important;}
    .gal-view > div.tab-wrap div.tab-content > div > div.flex > div.cont{width: 100%;}

    #header > #header-wrap > div.header-top > div.inner > .sns-box{display: none;}

}

/* 모바일 360px ~ 720px */
@media screen and (max-width:500px) {

}