/* 공통 */
body { background-color: #fff; }
.wrap { width: 100%; }
.inner { width: 1100px; margin: auto; position: relative; }
a { display: inline-block; }

.simpleFont { font-family: 'Cafe24Simplehae'; }
.content img { max-width: 100%; height: auto !important; }
.active { text-decoration: underline !important; text-underline-position: under; }
.active.hover { text-decoration: underline !important; text-underline-position: under; }
.hidden { overflow-y: hidden; }

/* header */
.header { margin-top: 35px; padding: 40px 0; }
.header .hd-top { margin-bottom: 85px; text-align: center; }
.header .hd-bot .navi { float: left; margin-top: 12px; }
.header .hd-bot .navi ul { font-size: 0; }
.header .hd-bot .navi ul li { display: inline-block; margin-right: 70px; vertical-align: bottom; font-family: 'Cafe24Simplehae'; font-size: 19px; color: #000; }
.header .hd-bot .sns { float: right; }
.header .hd-bot .sns ul { font-size: 0; }
.header .hd-bot .sns ul > li { display: inline-block; margin-left: 15px; vertical-align: middle; }

/* portfolio */
.portfolio { margin-bottom: 25px;  }
.portfolio ul:after { content: ''; display: block; clear: both; }
.portfolio ul li { float: left; margin-right: 2%; margin-bottom: 2%; width: 32%; height: 32%; position: relative; border: 1px solid #e0e0e0; }
.portfolio ul li:nth-child(3n) { margin-right: 0; }
.portfolio ul li a div.bg { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(35,35,35,0.6); }
.portfolio ul li a div.bg span { width: 100%; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; color: #fff; text-align: center; }
.portfolio ul li a { width: 100%; height: 100%; }
.portfolio ul li a:hover div.bg { display: block; }
.portfolio ul li a img { width: 100%; visibility: hidden; }

/* portfolio-view */
.portfolio-view .inner > h3 { font-size: 20px; color: #010101; margin-bottom: 22px; }
.view-con { margin-bottom: 28px; }
.view-con p { color: #010101; font-size: 14px; line-height: 1.3; }
.view-con pre { white-space:pre-line; font-size: 14px; line-height: 1.3; color: #010101; font-family: 'Nanum Square','나눔스퀘어','NanumSquare', sans-serif; }
.view-con p.simpleFont { font-size: 20px; font-weight: bold; margin-bottom: 5px; }
.portfolio-view .view-con .view-sns { font-size: 0; }
.portfolio-view .view-con .view-sns li { display: inline-block; vertical-align: middle; margin-right: 12px; }
.portfolio-view .video { text-align: center; margin-bottom: 50px; }
.portfolio-view .video iframe { width: 100%; height: 620px; }
.btn_all { margin-top: 20px; border-top: 1px solid #ccc; color: #555; padding: 20px 0; position: relative; }
.btn_all a { font-size: 18px; font-weight: bold; color: #555; }
.btn_all .btn_left { text-align: center; }
.btn_all .btn_left .prev_btn { margin-right: 12px; }
.btn_all .btn_left .net_btn { margin-left: 12px; }
.btn_all .btn_right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.btn_all .btn_right ul { display: inline-block; }
.btn_all .btn_right ul li { width: 14px; height: 1px; background-color: #010101; }
.btn_all .btn_right ul li:nth-child(2) { margin: 4px 0; }

/* 메인 notice */
.noticeBox { padding: 10px 14px; border: 1px solid #e0e0e0; font-size: 0; }
.noticeBox:after { content: ''; display: block; clear: both; }
.noticeBox h3 { width: 6%; float: left; font-size: 14px; color: #0a0a0a; font-weight: bold;  border-right: 2px solid #0a0a0a; margin-right: 2%; }
.noticeBox .slider { width: 92%; height: 14px; overflow: hidden; float: left; }
.noticeBox .slider ul li a { width: 100%; font-size: 13px; color: #0a0a0a; line-height: 14px; }
.noticeBox .slider ul li a p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noticeBox .slider ul li a p span { float: right; }

/* 시설상담문의(따라오는 광고) */
.quick { position: absolute; top: 0; margin-left: 50%; left: 565px; width: 128px; height: 128px; border: 1px solid #bbb; }
.quick div { width: 100%; height: 100%; display: table; }
.quick div p { display: table-cell; vertical-align: middle; line-height: 1.3; font-size: 15px; font-weight: bold; color: #101010; font-family: 'Cafe24Simplehae'; text-align: center; }

/* footer */
.footer { margin: 38px 0 55px; }
.footer .ft_l { float: left; width: 45%; }
.footer .ft_l h1 { display: inline-block; vertical-align: top; margin-right: 1%; }
.footer .ft_l h1 img { height: 42px; }
.footer .ft_l > div { display: inline-block; vertical-align: top; margin-top: 12px; }
.footer .ft_l > div p { font-size: 11px; color: #7d7d7d; }
.footer .ft_l > div p.customer { font-size: 14px; color: #7d7d7d; margin-bottom: 5px; }
.footer .ft_r { float: right; width: 55%; }
.footer .ft_r ul { font-size: 0; text-align: right; }
.footer .ft_r ul li { display: inline-block; vertical-align: middle; margin-right: 3%; width: 14.166%; height: 42px; }
.footer .ft_r ul li:last-child { margin-right: 0; }
.footer .ft_r ul li div { display: table; height: 100%; width: 100%; }
.footer .ft_r ul li div a { display: table-cell; vertical-align: middle; text-align: center; width: 100%; }
.footer .ft_r ul li div a img { width: auto; max-height: 42px; visibility: hidden; }

/**/
.m { display: none !important; }
.allMenu { display: none; }


/* 1100 */
@media screen and (max-width: 1100px) {
.inner { width: 100%; padding: 0 10px; }
.quick { display: none; }
}

/* 1024 */
@media screen and (max-width: 1024px) {
/* portfolio */
.portfolio ul li { width: 49%; }
.portfolio ul li:nth-child(3n) { margin-right: 2%; }
.portfolio ul li:nth-child(2n) { margin-right: 0; }

.portfolio-view .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 35px; }
.portfolio-view .video iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 100%; }
}  

/* 768 */
@media screen and (max-width: 768px) {
/**/
.pc { display: none; }
.m { display: inline-block !important; }

/* header */
.header { position: fixed; top: 0; left: 0; width: 100%; padding: 11px 0; margin-top: 0; margin-bottom: 20px; background: #fff; z-index: 1000; }
.header .inner:after { content: ''; display: block; clear: both; }
.header .hd-top { float: left; margin-bottom: 0; }
.header .hd-top h1 a img { height: 40px; }
.header .hd-bot { float: right; margin-top: 6.5px; }
.header .hd-bot .sns ul > li { margin-left: 9px; }
.header .hd-bot .sns ul > li a img { height: 27px; }

.menuBar a ol li { width: 23px; height: 3px; background-color: #2f2f2f; transition: .4s; }
.menuBar a ol li:nth-child(2) { margin: 6px 0; }
.chang .line1{-webkit-transform: rotate(-45deg) translate(-6px,7px); -moz-transform: rotate(-45deg) translate(-6px, 7px); transform: rotate(-45deg) translate(-6px, 7px);} 
.chang .line2{opacity: 0;}
.chang .line3{-webkit-transform: rotate(45deg) translate(-6px, -7px); -moz-transform: rotate(45deg) translate(-6px, -7px); transform: rotate(45deg) translate(-6px, -7px);} 
.allMenu { display: none; background-color: #fff; position: fixed; top: 62px; width: 100%; height: 100%; z-index: 1000; padding-top: 20px; }
.allMenu ol li a { font-size: 19px; color: #000; font-family: 'Cafe24Simplehae'; margin-bottom: 40px; }

/* container */
.container { margin-top: 82px; }

/* portfolio */
.portfolio { padding: 0 5px; }
.portfolio ul li { width: 100%; }
.portfolio ul li:nth-child(3n) { margin-right: 0; }
.noticeBox h3 { width: 18%; }
.noticeBox .slider { width: 80%; }
.noticeBox .slider ul li a p span { display: none; }

/* .portfolio-view */
.btn_all .btn_left { text-align: left; }
.portfolio-view .inner > h3 { font-size: 18px; }
.portfolio-view .view-con { margin-bottom: 20px; }
.portfolio-view .view-con p.simpleFont { font-size: 16px; margin-bottom: 2px; }
.portfolio-view .view-con pre { font-size: 13px; }
.portfolio-view .view-con p { font-size: 13px; }

/* footer */
.footer { text-align: center; }
.footer .ft_l { float: none; width: 100%; }
.footer .ft_r { float: none; width: 100%; margin-top: 25px; }
.footer .ft_l h1 { display: block; margin-right: 0; margin-bottom: 15px; }
.footer .ft_r ul { text-align: center; }
}  

/* 410 */
@media screen and (max-width: 410px) {
.noticeBox { padding: 10px; }
.noticeBox h3 { width: 18%; }
.noticeBox .slider { width: 80%; }
}