@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?after");
@import url("https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css");


/*layout*/
*{box-sizing: border-box; font-family: 'Pretendard', dotum, Helvetica, sans-serif;}
html {width:100%; font-size:10px;}
body {font-size:1.8rem;}
#wrap {overflow: hidden;position: relative;z-index: 10;width: 100%;}
#container {margin-top:0px;}
.inner{max-width:100% ; width: 1480px; margin: 0 auto;}
.main .inner{width: 100%; padding:0 6%;}
.main .quick-box .inner {width: 1680px; padding: 0;}

/*header*/
/*header{position: fixed; z-index: 99; width: 100%; background-color: linear-gradient(180deg, black, transparent); border-bottom: 1px solid #ffffff40;}*/
/*header .header-top{display: none;}*/
/*header h1{position: relative; width: 321px; height: 98px; background-image: url("./img/logo-white.png"); background-position: 50% 50%; background-repeat: no-repeat;background-size: contain; text-indent: -9999px;z-index: 999;}*/
/*header h1 a {display: block;width: 100%;height: 100%;}*/
/*header #header-wrap{position: relative; align-items: flex-start;}*/
/*header #header-wrap h1{transition: ease all 0.3s; display: block; width: 230px;height: 98px; }*/
/*header #header-wrap div.call-box{position: relative;top: 12px;display: flex; justify-content: center;width: fit-content;flex: 0 0 auto;text-align: center;overflow: hidden; border-radius: 100px;}*/
/*header #header-wrap div.call-box a {padding:8px 24px; position: relative; color: #fff; width: 100%;background-color: #00aaff; overflow: hidden; border-radius: 100px;}*/
/*header #header-wrap div.call-box a:after{display: block; content: ""; position: absolute; transform: translateY(-50%); top:50%; left: -100%;  border-radius: 100%; transition: ease all 2s;}*/
/*header #header-wrap div.call-box a > div.flex{}*/
/*header #header-wrap div.call-box a > img {width: 46px; height: 46px; margin-right: 12px;flex: 0 0 auto;}*/
/*header #header-wrap div.call-box a > div.txt-box{text-align: left;}*/
/*header #header-wrap div.call-box a > div.e-box{display: none;}*/
/*header.open {border-bottom: 0;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);background: rgba(255,255,255,0.3);}*/
/*header .btn-gnb{display: none; position: absolute;top: 0px;width: 60px; height: 100%;z-index: 999; }*/
/*header .btn-gnb:after{display: block;position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); content:"\e91c"; font-family: "xeicon"; font-size: 30px;}*/
/*header .menu-btn{display: none;}*/

.flip-wrap{position: relative; top:12px; margin:0 24px;margin-left: auto;}
.flip-wrap .flip-box:not(:first-of-type){margin-left: 12px;}
.flip-wrap .flip-box {background: #00a9fd;width:65px;height:65px; border-radius: 100%; overflow: hidden;}
.flip-wrap .flip-box .flip {display: block; width: 100%;height: 100%;position: relative;color: white;text-align: center;transform-style: preserve-3d;transform: rotateX(0deg);transition: ease all 0.3s;}
.flip-wrap .flip-box .flip > div {width: 100%;height: 100%;position: absolute;backface-visibility: hidden; text-align: center; overflow: hidden; border-radius: 100%; }
.flip-wrap .flip-box .front {background: #00a9fd; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 700; overflow: hidden; border-radius: 100%;}
.flip-wrap .flip-box .back {background: #006eb2;transform: rotateX(180deg);font-size: 33px; line-height: 65px;overflow: hidden; border-radius: 100%;}

.scroll-box{height: 500px;overflow-y: auto;}

/*header*/
header{position: fixed; z-index: 99; width: 100%; background-color: linear-gradient(180deg, black, transparent); border-bottom: 1px solid #ffffff40;}
header .inner { width: 100%; padding: 0 6%;}
header #header-wrap{position:relative;}
header h1{position: relative; width: 321px; height: 90px; background-image: url("./img/logo-white.png"); background-position: center center; background-repeat: no-repeat;background-size: 85%; text-indent: -9999px;z-index: 999;}
header h1 a {display: block;width: 100%;height: 100%;}
header .btn-gnb{position:absolute; right:6%; top:50%; transform:translateY(-50%);width:60px; background-color: #fff; height: 60px; display: flex;flex-direction: column;justify-content: space-evenly; z-index:999;cursor: pointer; border-radius:25px}
header .btn-gnb > span{transition:ease all 0.3s; display:block; width:46px; height:3px; border-radius:100px; background-color:#fff;}
header .btn-gnb > p {text-align: center; font-weight: bold;font-size: 16px;}
header .btn-gnb > i{display: none;}

header div.header-hi-box{}
header div.header-hi-box { position: absolute;top: 50%;transform: translateY(-50%);right: 10%;z-index: 990;background: #090838;border-radius: 100px;padding: 8px 22px; }
header div.header-hi-box a{align-items: center; font-size: 20px; font-weight: bold; color: #56b3e5;}
header div.header-hi-box a i {padding-right:10px; }

header.headerno{ backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);background: rgba(255,255,255,0.7); box-shadow: 0 0 20px rgba(0,0,0,0.1);}
header.headerno h1{background-image: url("./img/logo.png");}
header.headerno .btn-gnb > span {background-color:#222;}
header .btn-call{position:absolute; right:10%; top:50%; transform:translateY(-50%);width:120px; background-color: #fff; height: 60px; display: flex;flex-direction: column;justify-content: space-evenly; z-index:999;cursor: pointer;}

/*gnb*/
#gnb{padding:100px 0; display:none; position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#fff;z-index:99;}
#gnb > div.flex {max-width:1400px; width:100%; margin:0 auto;}
#gnb > div.flex > div.gnb-wrap{padding:120px 80px 20px; width:50%;display: flex;  flex-direction: column; justify-content: space-between;}
#gnb > div.flex > div.gnb-wrap > ul{flex-direction: column;}
#gnb > div.flex > div.gnb-wrap > ul > li{position:relative; width:fit-content;}
#gnb > div.flex > div.gnb-wrap > ul > li:nth-child(4) > ul{display: none!important;}
/*#gnb > div.flex > div.gnb-wrap > ul > li:last-child{display:none;}*/
#gnb > div.flex > div.gnb-wrap > ul > li > a {display:block; padding:12px 42px 12px 0; font-size:46px; font-weight:800;}
#gnb > div.flex > div.gnb-wrap > ul > li > ul{ width:120%; position:absolute; top:20px; left:100%; text-align:left; background-color:rgba(0,0,0,0.7);  transition:ease all 0.3s; display:none; z-index:99;box-shadow: 0 0 10px #0000004f; border-radius: 10px; overflow:hidden;}
#gnb > div.flex > div.gnb-wrap > ul > li > ul > li > a {display:block; color:#fff; font-size:30px; font-weight:600; padding:16px 26px;}
#gnb > div.flex > div.gnb-wrap > ul > li > ul > li:not(:last-child) > a{border-bottom:1px solid rgba(255,255,255,0.4)}

#gnb > div.flex > div.gnb-wrap >div.ico-list > ul > li > a{ font-size:46px; font-weight:800;}
#gnb > div.flex > div.gnb-wrap >div.ico-list > ul.flex > li > a{font-size:24px; width: 80px; height: 80px; display: block; border-radius: 50%; text-align: center;line-height: 80px;}

#gnb > div.flex > div.img-box{position:relative; width:calc(100% - 50%); height:100%;}
#gnb > div.flex > div.img-box > div {width:100%; height:100%; overflow:hidden;border-bottom-right-radius: 180px; border-top-left-radius: 180px;}
#gnb > div.flex > div.img-box > div > img{width:100%;}
/*#gnb > div.flex > div.img-box:before{position:absolute; bottom:100px; left:-100px; border-radius:50%; background-color:#00aaff; display:block; width:60px; height:60px; content:"";animation: img-round-bef 3s cubic-bezier(0, 0, 0, 0); animation-iteration-count: infinite; animation-direction: alternate;}*/
/*@keyframes img-round-bef{ 0%{bottom:140px;} 100%{bottom:40px;} }*/
/*#gnb > div.flex > div.img-box:after{position:absolute; bottom:260px; left:100px; border-radius:50%;     background-color: #213990; display:block; width:100px; height:100px; content:"";animation: img-round-af 2s cubic-bezier(0, 0, 0, 0); animation-iteration-count: infinite; animation-direction: alternate;}*/
/*@keyframes img-round-af{ 0%{bottom:260px;} 100%{bottom:300px;} }*/

/*header.blackbg*/
header.blackbg h1{background-image: url("./img/logo.png");}
header.blackbg #gnb{display:flex; color:#222;}
header.blackbg .btn-gnb > span {background-color:#222;}
header.blackbg .btn-gnb > span:nth-child(1){display:none;}
header.blackbg .btn-gnb > span:nth-child(2){transform: rotate(45deg);}
header.blackbg .btn-gnb > span:nth-child(3){transform: rotate(-45deg);margin-top: -30px;}
header.blackbg  div.header-hi-box{display: block;}
header.blackbg .btn-gnb > p {display: none;text-align: center; font-weight: bold;font-size: 16px;}
header.blackbg .btn-gnb > i {display: block; font-size: 36px; text-align: center;}

/*headerno*/
header.headerno {border-bottom: 0; backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);background: rgba(255,255,255,0.7); box-shadow: 0 0 20px rgba(0,0,0,0.1)}
header.headerno  h1{background-image: url("./img/logo.png");}
header.headerno #gnb > ul > li > a {color: #222;}
header.headerno #gnb > ul > li > ul > li > a{color: #222;}
/*marin header*/
/*.main header{background-color: #fff;}
.main header h1{background-image: url("./img/logo.png");}*/
.main header .header-top{display: flex;}
.main header #gnb > ul > li > a {color: #222;}
.main header #gnb > ul > li > ul > li > a{color: #222;}

/*sub-visual*/
div#section-top{position: relative;}
div#section-top div#sub-visual {position: relative; width: 100%; height:9rem; text-align: center; /*background-image: url("./img/bg-sub-01.jpg");*/ background-color: #fff; background-position: center center; }
div#section-top div#sub-visual:after{display: block; content: ""; width: 100%; height: 100%; position: absolute; top:0; left: 0;  background: rgba(0,0,0,0.5);}
div#section-top div#sub-visual.bg1 {background-image: url("./img/bg-sub-01.jpg")}
div#section-top div#sub-visual.bg2 {background-image: url("./img/bg-sub-02.jpg")}
div#section-top div#sub-visual.bg3 {background-image: url("./img/bg-sub-04.jpg")}
div#section-top div#sub-visual.bg4 {background-image: url("./img/bg-sub-03.jpg")}
div#section-top div#sub-visual.bg5 {background-image: url("./img/bg-sub-05.jpg")}
div#section-top div#sub-visual div.txt-box{ position: absolute; top:57%; left:50%; transform:translate(-50%,-50%); z-index: 1;}
div#section-top div#sub-visual div.txt-box p{font-size:2.6rem; font-weight: 300;color: #fff; font-weight: 400; line-height: 130%;}

div#section-top div#title_path{display: none; position: absolute;bottom: -32px; left:50%; width: 100%;background: #263890; z-index: 2;}
div#section-top div#title_path span{display: none;}
div#section-top div#title_path div:nth-child(1) > a {position: relative; display: block; width: 7rem; height: 7rem; line-height: 7rem; color: #fff; background: #00aaff;; }
div#section-top div#title_path div a:before{display: inline-block; line-height: 7rem;padding: 0 5px;content: "\e940";color: #eee; font-family: "xeicon" !important;}
div#section-top div#title_path div:nth-child(1) a:before{display: none;}
div#section-top div#title_path div:nth-child(1) > a i{position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 3rem;}
div#section-top div#title_path div:nth-child(2) {display: flex; padding-left: 3rem; color: #fff;}
div#section-top div#title_path div:nth-child(2) a{display: block; color: #fff;height: 7rem; line-height: 7rem; font-size: 1.4rem; font-weight: 200;}
div#section-top div#title_path div:nth-child(2) a:nth-child(1):before{display: none;}

/* #section-body */
#section-body{padding-top:10rem; padding-bottom:16rem;}

/* aside */
#aside {}
#aticle-wrap{}

div#lnb-wrap{position: relative; border-bottom: 1px solid #ddd;}
/*div#lnb-wrap:after{display: block; content: ""; position: absolute; top:0; left:0%; width:100%; height:100%;box-shadow:-15px 20px 26px rgba(0,0,0,0.1); z-index: -1;}*/
div#lnb-wrap #lnb{}
div#lnb-wrap #lnb #lnb-title{display: none;}
div#lnb-wrap #lnb #lnb-title > p{position: relative; padding-left: 78px; padding-bottom: 32px;}
div#lnb-wrap #lnb #lnb-title > p:before{display: block; content: ""; position: absolute;left: 0;  top:32px; width: 5rem; height: 0.4rem; background: #222;}
div#lnb-wrap #lnb > ul{flex-wrap: wrap; justify-content: center;}
div#lnb-wrap #lnb > ul > li {display: flex;}
div#lnb-wrap #lnb > ul > li > a {}
div#lnb-wrap #lnb > ul > li > ul{display: flex;}
div#lnb-wrap #lnb ul li a{display: block; padding: 24px 5rem; font-weight: 500; color: #666; font-size:2.2rem;}
div#lnb-wrap #lnb ul li a:hover{color: #222;}
div#lnb-wrap #lnb ul li.on a{font-weight: 800; color:#00aaff;}

#footer{padding-bottom: 42px;}
#footer div.footer-wrap{padding-top: 116px;    padding-bottom: 116px;border-top:1px solid #ddd;}
#footer div.footer-wrap div.ft-flex > div.ft-left{}
#footer div.footer-wrap div.ft-flex > div.ft-left > div > a{border-radius: 10px; padding: 32px 42px; display: block; background-color: #fae100;}
#footer div.footer-wrap div.ft-flex > div.ft-left > div > a > dl > dt{padding-bottom: 12px;}
#footer div.footer-wrap div.ft-flex > div.ft-left > div:last-child{margin-left: 16px;}
#footer div.footer-wrap div.ft-flex > div.ft-left > div:last-child > a {background-color: #e0eff6;}
#footer div.footer-wrap div.ft-flex > div.ft-right{}
#footer div.footer-wrap div.ft-flex > div.ft-right > a{display: block;}
#footer div.footer-wrap div.ft-flex > div.ft-right > .txt600 {padding-top: 24px; padding-bottom: 16px;}
#footer div.footer-wrap div.footer-bottom{padding-top: 62px; margin-top: 62px; border-top:1px solid #ddd;}
#footer div.footer-wrap div.footer-bottom > p {padding-bottom: 32px;}
#footer div.footer-wrap div.footer-bottom > div.flex{align-items: baseline;}
#footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box{flex-wrap: wrap;width: 700px;}
#footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box > dl{display: flex;}
#footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box > dl:not(:last-child){margin-right:22px;}
#footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box > dl > dt {position: relative;}
#footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box > dl > dt:after{display: inline-block; padding: 0 4px; content: ":";}
#footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box{flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;}
#footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box > p.copy{padding: 26px 0;}
#footer div.footer-wrap ul.flex > li:not(:first-child){margin-left:8px; }
#footer div.footer-wrap ul.flex > li > a {padding:12px 18px; border: 1px solid #ddd; border-radius: 4px; }
#footer div.footer-wrap ul.flex > li:nth-child(2) > a{color:#00aaff; border-color: #00aaff;}
#footer div.footer-wrap ul.sns-flex {display: flex;width: 100%; padding-top: 24px;}
#footer div.footer-wrap ul.sns-flex > li:not(:first-of-type){padding-left: 16px;}
#footer div.footer-wrap ul.sns-flex > li > a {color: #999; font-size: 46px;}
#footer div.footer-wrap ul.sns-flex > li:nth-child(1) > a{color: #1B74E4;}
#footer div.footer-wrap ul.sns-flex > li:nth-child(2) > a{color: #222;}
#footer div.footer-wrap ul.sns-flex > li:nth-child(3) > a{color: #00bf31;}

@keyframes mainon { from {bottom:0 } to {bottom: -97px;} }

/*퀵*/
div.quick-box{padding:22px 0; width: 100%;left: 50%; transform: translateX(-50%);  position: fixed;bottom: 0; z-index:88;transition: ease all 0.3s;}
div.quick-box div.q-title button{display:none;}
div.quick-box div.dl-box{width:100%;padding:0 48px;}
div.quick-box div.dl-box > dl {width:33%;}
div.quick-box div.dl-box > dl:not(:last-child){margin-right:22px;}
div.quick-box div.dl-box > dl:last-child{width:100%;}
div.quick-box div.dl-box > dl > dt{display:none;}
div.quick-box div.dl-box > dl > dd{width:100%;}
div.quick-box div.dl-box > dl > dd > input.text{border-radius:0;background-color:transparent; border:1px solid #fff; color:#fff;}
div.quick-box div.btn-box{width: fit-content;  flex: 0 0 auto;}
div.quick-box div.btn-box a{display:block;text-align: right;}
div.quick-box div.btn-box button{ margin-left:22px;padding:12px 36px; background-color:#fff;}
input[type="checkbox"] { position: absolute; width: 1px;height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer;}
input[type="checkbox"] + label:before {font-size:22px; top:0; left:-26px; position: absolute; display:block; content:"\e92c"; font-family: "xeicon"!important;}
input[type="checkbox"]:checked + label:before {content:"\e92b"}
div.quick-box input::placeholder {color: #fff;}

div.quick02{position: fixed; bottom: 16%; right:2%; z-index: 999;}
div.quick02 ul > li:not(:last-child){margin-bottom:10px; }
div.quick02 ul > li > a{width: 86px;height: 86px; display: flex; align-items: center; justify-content: center; background-color: #fae100; color: #fff; border-radius: 50%; flex-direction: column; font-size: 14px; font-weight: bold;}
div.quick02 ul > li > a > i {padding-bottom: 4px; font-size: 32px;}
div.quick02 ul > li:nth-child(1) > a{background-color: #41d51f; }
div.quick02 ul > li:nth-child(2) > a{color:#333}
div.quick02 ul > li:nth-child(3) > a{background: #26388d;}
div.quick02 ul > li:nth-child(4) > a{background-color: #f68d27;}
div.quick-box {bottom: 0; z-index:999}


/*hover*/
@media (hover: hover) {
  div.call-box > a:hover {}
  #gnb > div.flex > div.gnb-wrap > ul > li:hover > ul{opacity:1; display:block;}
  #gnb > div.flex > div.gnb-wrap > ul > li:hover > ul > li:hover > a {background-color:rgba(0,0,0,0.5);}
  /*header #gnb > ul > li:hover{}*/
  /*header #gnb > ul > li:hover > a:after {width: 70%;transition: ease all 0.3s;opacity: 100%;}*/
  /*header #gnb > ul > li:hover > a{color:#00aaff; font-weight: 600}*/
  /*header #header-wrap div.call-box a:hover:after{ animation: circle-btn 3s alternate infinite;   background-color: #00aaff; mix-blend-mode:exclusion; }*/
  @keyframes circle-btn { from {width: 70px; height: 70px;left: 100%;} to {width: 240px; height: 240px;} }
  /*.board.gallery div.list-body div.flex > div > a:hover > div.img-box > div.circle {position: absolute;top: 50%;left: 50%;transform: translate(-148%,-266%);width: 150px;height: 150px;border-radius: 50%;background-color: #00aaff;text-align: center;line-height: 150px;font-weight: bold;font-size: 40px;color: #000;mix-blend-mode: difference;}*/
  .board.gallery div.list-body div.flex > div > a > div.img-box:hover > div.circle {position: absolute;width: 150px;height: 150px;border-radius: 50%;background-color: #00aaff;text-align: center;line-height: 150px;font-weight: bold;font-size: 40px;color: #000;mix-blend-mode: difference; cursor:none;}
  .flip-wrap .flip-box:hover  .flip {transform: rotateX(-180deg);}
  #gnb > ul > li > ul > li > a:hover{font-weight: 600;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box > ul.flex > li > a:hover{background-color: #f5f5f5;}

}


/*게시판*/
/*게시판 리스트*/
.board div.board-top{padding-bottom: 3rem;}
.board div.board-top > div.flex{justify-content: space-between;}
.board div.board-top div.flex div{position: relative;}
.board.list div.search-box {width: 253px; border-radius: 0;justify-content: space-between;}
.board.list div.search-box input.text{border-radius: 0; width: 100%;height: 40px;line-height: 40px;border: 0;padding: 0; border: 1px solid #ddd; background-color: transparent;font-size: 14px;box-sizing: border-box;}
.board.list div.search-box button {width: 40px;height: 40px; border: 0;font-size: 20px;text-align: center; color: #fff;}

/*게시판*/
article.board span.notice {display: inline-block;padding: 0 10px; height: 35px;line-height: 35px;background-color: #0069d4;color: #fff;}
/*게시판 리스트*/
.board.list div.board-top{padding-bottom: 3rem;}
.board.list div.board-top > div.flex{justify-content: space-between;}
.board.list div.board-top div.flex div{position: relative;}
.board.list div.board-body div.board-list ul.row{display:flex; width: 100%;}
.board.list div.board-body div.board-list ul.row li{position: relative;padding: 2.5rem 1rem;vertical-align: middle;text-align: center;border-bottom: 1px solid #999;}
.board.list div.board-body div.board-list ul.row li.no{width:7%;}
.board.list div.board-body div.board-list ul.row li.subject{width:56%;}
.board.list div.board-body div.board-list ul.row li.file{width:10%;}
.board.list div.board-body div.board-list ul.row li.writer{width:10%;}
.board.list div.board-body div.board-list ul.row li.date{width:10%;}
.board.list div.board-body div.board-list ul.row li.view{width:7%;}
.board.list div.board-body div.board-list ul.row li.hire-date{width: 30%;}
.board.list div.board-body div.board-list ul.row li.state-top{width: 10%;}
.board.list div.board-body div.board-list ul.row li.category{width:10%}
.board.list div.board-body div.board-list.list-top ul.row li {border-top: 1px solid #00aaff; font-weight: 500;}
.board.list div.board-body div.board-list.list-body ul > li > a{display: block; transition: ease all 0.5s;}
.board.list div.board-body div.board-list.list-body ul > li > a:hover{background: #f5f5f5; transition: ease all 0.5s;}
.board.list div.board-body div.board-list.list-body ul > li > a > ul.row li{}
.board.list div.board-body div.board-list.list-body ul > li > a > ul.row li.subject{text-align: left;}
.board.list div.board-body div.board-list.list-body ul > li > a > ul.row li.subject > strong {display: inline-block; max-width: 90%;font-weight: 500;color: #222; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: middle;}
.board.list div.board-body div.board-list.list-body ul > li > a > ul.row li span.new{display: inline-block; padding:0 0.5rem; background: red; color:#fff; font-size: 1.2rem; border-radius: 3px;}
.board.list div.board-body div.board-list.list-body ul > li > a > ul.row li.file > i {font-size: 2rem; color: #666;}
.board.list div.board-body div.board-list.list-body ul > li.no-data{text-align: center;  padding: 82px 0;  border-bottom: 1px solid #ddd;  }
/*게시판 뷰*/
.board.view div.view-head{padding: 3rem;border-top: 1px solid #222;border-bottom: 1px solid #222;}
.board.view div.view-head div.view_title {padding-bottom: 1rem;}
.board.view div.view-head div.view_title span.title_txt{ font-size: 2rem; color: #222;}
.board.view div.view-head div.view_title span.notice {display: inline-block;margin-right: 1rem; padding: 0 10px; height: 32px;line-height: 32px; }
.board.view div.view-head div.flex{color: #666; font-weight: 300;}
.board.view div.view-head div.flex span:not(:first-child) {position: relative; padding-left:2rem;}
.board.view div.view-head div.flex span:not(:first-child):after{position: absolute;top: 7px;left: 8px;width: 1px;height: 11px; display: block; content: ""; background-color: #999;}
.board.view div.view-body{ min-height:50rem; border-bottom: 1px solid #999;;}
.board.view div.view-body div.file {padding:2rem 3rem;box-sizing: border-box;border-bottom:1px solid #222;}
.board.view div.view-body div.file span{display: block;}
.board.view div.view-body div.file i {padding-left: 1rem; padding-right: 0.5rem;}
.board.view div.view-body div.text-box {padding: 3rem;}
.board.view div.view-body img{max-width: 100%; width: auto;}
.board.view div.view-footer{padding-top: 3rem;}
.board.view div.view-footer > div.flex-pagination {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; justify-content: space-between;}
.board.view div.view-footer > div.flex-pagination > div{width: 50%;}
.board.view div.view-footer > div.flex-pagination > div:last-of-type{border-left: 1px solid #ddd; text-align: right;}
.board.view div.view-footer > div.flex-pagination > div:last-of-type div.flex{flex-direction: row-reverse;}
.board.view div.view-footer > div.flex-pagination > div > a{display: block;}
.board.view div.view-footer > div.flex-pagination > div > a:hover div.flex > div:first-of-type{background: #a9c9e0; transition: ease all 0.5s;}
.board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:first-of-type{position: relative; width: 20%;padding: 3rem 0; background: #f5f5f5; border-right: 1px solid #ddd;transition: ease all 0.5s;}
.board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:first-of-type i {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 2rem;}
.board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:last-of-type{padding: 3rem; width: 80%;}
.board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:last-of-type p:first-of-type{font-weight: 600; }
.board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:last-of-type p:last-of-type{}
.board.view div.view-footer > div.flex-pagination > div:last-of-type a > div.flex > div:first-of-type {border-right: 0; border-left: 1px solid #ddd;}

.board.write div.write-body{border-top:2px solid #222; width: 60%; margin: 0 auto;}
.board.write div.write-body > dl{display: flex; border-bottom: 1px solid #ddd;}
.board.write div.write-body > dl > dt{padding:32px 22px; width:200px;flex: 0 0 auto; font-size: 18px; background-color:#f5f5f5; font-weight: bold;}
.board.write div.write-body > dl > dd{width: 100%; padding:32px 22px}
.board.write div.write-body > dl > dd > div.flex > div{width: 100%;}
.board.write div.write-body > dl > dd > div.flex > div:not(:last-child){margin-right: 12px;}

div.flex-btn {padding-top: 3rem;}
div.flex-btn > .btn-sq:not(:first-child){margin-left: 12px;}

/*갤러리*/
.board.gallery div.list-body div.flex{flex-wrap: wrap;}
.board.gallery div.list-body div.flex > div {width: 24.2%;margin-bottom: 82px;}
.board.gallery div.list-body div.flex > div:not(:nth-child(4n)){margin-right: 1%;}
.board.gallery div.list-body div.flex > div > a {position: relative; display: block;}
.board.gallery div.list-body div.flex > div > a > div.img-box {border-radius: 20px; overflow:hidden;transition: ease all 0.3s; position: relative; width: 100%; height: 0; padding-top:130%; }
.board.gallery div.list-body div.flex > div > a > div.img-box > img{position: absolute; top:0; left: 0; width: 100%; height: 100%;transition:ease all 0.3s; }
.board.gallery div.list-body div.flex > div > a > div.txt-box {padding: 33px 24px; }
.board.gallery div.list-body div.flex > div > a > div.txt-box > p.ell{margin-bottom: 22px;}
/* 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; font-size:18px; 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:#00aaff; background:#00aaff; 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.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:1px solid #00aaff; color:#00aaff; background-color:#fff; 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;}


/* 레이어팝업 */
.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=40); -khtml-opacity:0.4; -moz-opacity:0.4; opacity:0.4; }
#layer_back.open { display:block; }
#layer_back.over { z-index:996; }
#layer_popup { display:none; position:fixed; margin: 0!important;overflow: hidden; top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 20px; z-index:995; width:600px; height:600px; background-color:#fff; }
#layer_popup.open { display:block; }
#layer_header {padding:42px 20px;  display: flex; justify-content: space-between; align-items: center; position:relative; width:100%; height:55px; background-color:#fff; }
#layer_header > h1 {color:#222; font-size:20px; font-weight:bold; }

#layer_header > button {font-size: 26px;}
#layer_content { height: auto!important; padding:0 20px 42px ; 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; }


@media screen and (max-width:1400px) {
  div.quick-box button.txt26 {padding: 10px 0px;font-size: 20px;}
}

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

}
@media screen and (max-width:1200px) {
  .inner{width:100%; padding: 0 4%; box-sizing: border-box;}
  #container { min-width:auto; width:100%;}

  header #header-wrap { padding: 0 2%;}
  header #header-wrap h1 {}


  .board.write div.write-body {width: 100%;padding: 0%;}
  div.q-flex{flex-direction: column;}

  div.quick-box.on {bottom:0%;}
  div.quick-box div.q-title{padding-bottom:12px; width: 100%; justify-content:space-between;}
  div.quick-box div.q-title button{display:block; color:#fff;}
  div.quick-box div.dl-box {padding:0;flex-direction: column;}
  div.quick-box div.dl-box > dl {width:100%;padding: 2px 0;}
  div.quick-box div.dl-box > dl:not(:last-child) {margin-right: 0;}
  div.quick-box div.btn-box { width: 100%;flex-direction: column;}
  div.quick-box div.btn-box div.check-flex{ display: flex; justify-content: space-between;width: 100%;padding: 12px 0 12px 22px;}
  div.quick-box div.btn-box button { margin-left: 0; width: 100%;}

  div.quick-box {display: none;}
  div.quick02 {width: 100%; position: fixed;bottom: 0;right: 0;}
  div.quick02 > ul {display: flex;}
  div.quick02 > ul > li{width:25%; margin-bottom: 0;}
  div.quick02 ul > li:not(:last-child){margin-bottom: 0;}
  div.quick02 > ul > li > a {font-size: 12px; width: 100%; height:auto; padding: 16px 0; border-radius: 0;}
  div.quick02 ul > li > a > i {   padding-bottom: 8px; font-size: 24px;}
}

@media screen and (max-width:1000px) {
  .board.view div.view-body {min-height: 28rem;}
  .board.view div.view-head div.flex span.view{display: none;}
  .btn-sq { padding: 10px 24px;}
  header h1 {width:160px; height:60px;}
  header .btn-gnb{right:6px; width: 50px; height: 50px; padding: 14px 0;}
  header .btn-gnb > span {width:32px; height:2px;}
  header.blackbg .btn-gnb > span:nth-child(3) {margin-top: -17px;}
  header .btn-gnb > p {font-size: 14px;}

  header div.header-hi-box{display: block; right:68px; padding: 0; width: 50px; height: 50px;}
  header div.header-hi-box a{text-align: center; line-height: 40px;}
  header div.header-hi-box a i { padding-left: 5px;text-align: center; line-height: 50px;}
  header div.header-hi-box a > p{display: none;}
  div#section-top div#sub-visual {height:6rem;}
  #section-body {padding-bottom: 6rem;}
  #gnb { padding: 76px 0;}
  #gnb > div.flex > div.gnb-wrap {width:100%;  padding: 0 8%;}
  #gnb > div.flex > div.gnb-wrap > ul > li {width: 100%;}
  #gnb > div.flex > div.gnb-wrap > ul > li.on > ul{display:block; position:static; width: 100%;}
  #gnb > div.flex > div.gnb-wrap > ul > li > ul > li > a { font-size: 16px; font-weight: 600; padding: 14px 18px;}
  #gnb > div.flex > div.gnb-wrap > ul > li > a {padding: 12px;font-size: 28px;}
  #gnb > div.flex > div.gnb-wrap >div.ico-list > ul > li > a {font-size: 28px;}
  #gnb > div.flex > div.img-box { height: auto; position: absolute;  bottom: 14%; right: 10%;z-index: -1;}

  #footer div.footer-wrap {padding-top: 42px;}
  #footer div.footer-wrap div.footer-bottom {padding-top: 22px;margin-top: 22px;}
  #footer div.footer-wrap > div.inner > div.flex{flex-direction: column;}
  #footer div.footer-wrap div.ft-flex > div.ft-left{flex-direction: column;}
  #footer div.footer-wrap div.ft-flex > div.ft-left > div:last-child {margin-top: 16px; margin-left: 0;}
  #footer div.footer-wrap div.ft-flex > div.ft-left > div > a {padding: 16px 16px;}
  #footer div.footer-wrap div.ft-flex > div.ft-left > div > a > dl > dt {padding-bottom: 6px;font-size: 16px;}
  #footer div.footer-wrap div.ft-flex > div.ft-left > div{width: 100%;}
  #footer div.footer-wrap div.ft-flex > div.ft-right { padding-top: 22px;}
  #footer div.footer-wrap div.ft-flex > div.ft-right > .txt600 {padding-top: 16px;padding-bottom: 16px;}
  #footer div.footer-wrap div.footer-bottom > div.flex {align-items: baseline;flex-direction: column;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box {width: 100%; padding-top: 22px;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box > ul.flex {width: 100%; flex-direction: column;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box > ul.flex > li:not(:first-child) {margin-left:0px; margin-top: 4px;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box { width: 100%;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.dl-box > dl {flex-wrap: wrap;font-size: 14px; display: flex;width: 100%;}
  #footer div.footer-wrap ul.flex > li > a {padding: 10px 18px;font-size: 12px;}
  #footer div.footer-wrap div.footer-bottom > div.flex > div.ftb-box > p.copy {padding: 4px 0;font-size: 12px;}

  .board.list div.board-top > div.flex {flex-direction: column-reverse;}
  .board.list div.board-top {padding-bottom: 3rem;border-bottom: 1px solid #00aaff;}
.se-component-content{padding: 0!important;;}

  .board.list div.board-body div.list-top {display: none;}
  .board.list div.board-top div.flex div { font-size: 14px;}
  .board.list div.search-box {width: 100%;background: #f5f5f5;padding: 22px; margin-bottom: 22px;}
  .board.list div.search-box input.text{background-color: #fff;}
  .board.list div.board-body div.board-list ul.row { flex-direction: column;}
  .board.list div.board-body div.board-list > ul > li {border-bottom: 1px solid #ddd;}
  .board.list div.board-body div.board-list ul.row li { padding: 4px;}
  .board.list div.board-body div.board-list.list-body ul > li > a {padding: 2rem 1rem;text-align: left;color: #999;font-size: 1.4rem;}
  .board.list div.board-body div.board-list.list-body ul > li > a > ul.row li.subject { display: block; width: 100%;font-size: 16px;color: #222;font-weight: 600;}
  .board.list div.board-body div.board-list.list-body ul > li > a > ul.row li { display: none; border-bottom: 0; width: 100%!important;text-align: left;}
  .board.list div.board-body div.board-list.list-body ul > li > a > ul.row li .pc-hidden {    padding-right: 7px;display: block !important}
  .board.list div.board-body div.board-list ul.row li.no {  display: none!important;}

  .board.view div.view-head {padding: 2rem;}
  .board.view div.view-head div.view_title span.title_txt {font-size: 16px}
  .board.view div.view-head div.flex { font-size: 14px;}
  .board.view div.view-body div.text-box {padding: 2rem;font-size: 16px;}
  .board.view div.view-body div.file {padding: 2rem 2rem;}
  .board.view div.view-body div.file span { font-size: 14px;}
  .board.view div.view-head div.flex span:not(:first-child):after {top: 3px;}

  .board.view div.view-footer > div.flex-pagination { flex-direction: column;}
  .board.view div.view-footer > div.flex-pagination > div {border-top: 1px solid #ddd; width: 100%; border-left: 0!important;}
  .board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:first-of-type{display: none;}
  .board.view div.view-footer > div.flex-pagination > div:last-of-type div.flex {    text-align: left;}
  .board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:last-of-type { padding: 2rem;width: 100%;}
  .board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:last-of-type {font-size: 16px;}
  .board.view div.view-footer > div.flex-pagination > div > a > div.flex > div:last-of-type p:first-of-type {padding-bottom: 6px;}

  .board.list.gallery div.board-top  {border-bottom: 0; }
  .board.gallery div.list-body div.flex > div { margin-bottom: 32px; width: 48%;}
  .board.gallery div.list-body div.flex > div:not(:nth-child(4n)) { margin-right:0%;}
  .board.gallery div.list-body div.flex > div:not(:nth-child(2n)) {margin-right: 2%}
  .board.gallery div.list-body div.flex > div > a > div.txt-box {padding: 16px 18px;}
  .board.gallery div.list-body div.flex > div > a > div.txt-box > p.ell {margin-bottom: 8px;font-size: 18px;}
  .board.gallery div.list-body div.flex > div > a > div.txt-box > p.flex{flex-direction:column;}
  .board.gallery div.list-body div.flex > div > a > div.txt-box > p.flex > span.txt16{font-size: 14px;}

  .board.write div.write-body > dl {flex-direction: column;border-bottom: 1px solid #ddd;}
  .board.write div.write-body > dl > dt {padding:10px 10px;width: 100%;flex: 0 0 auto;font-size: 16px;}
  .board.write div.write-body > dl > dd { padding: 20px;}

  .popup_cs {left: 50%!important; top:50%!important; transform: translate(-50%,-50%); height:auto!important; width: 80%!important;}
  .popup_cs > img{ height:auto;}

}

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

  div#lnb-wrap #lnb.inner{padding: 0;}
  div#lnb-wrap #lnb > ul > li > ul {padding: 0 6%; width: 100%; position:relative; overflow:scroll; overflow-x:auto; overflow-y:hidden; white-space: nowrap; webkit-overflow-scrolling:touch;}
  div#lnb-wrap #lnb > ul li a {padding: 20px 18px; font-size: 1.4rem;}
  #gnb > ul > li > ul > li > a{color: #666;}
  div.flip-wrap > div:not(:last-child){display: none;}
  .flip-wrap { margin-right: 6px;}
  .flip-wrap .flip-box {width:40px;height:40px;}
  .flip-wrap .flip-box .flip > div.front{display: none;}
  .flip-wrap .flip-box .flip > div.back {line-height:46px; position: static;backface-visibility: visible;transform: rotate(0);background: #fae100!important;}


  #layer_popup.open {width: 90%!important;height: 90vh!important;}
  .scroll-box {max-height: 400px; height:100%; width: 100%;overflow-x: hidden;}

}

.bg-green{ background-color:#39bd1b; z-index:1000}
.btn-box-foot{ margin-left:22px;padding:12px 36px; background-color:#fff; display:inline-block; z-index:1000}