@charset "utf-8";

/* 스킵 내비게이션 */
#skipNavigation {position:absolute; top:0; left:0; z-index:200; width:100%; height:0;}
#skipNavigation a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;}
#skipNavigation a:focus, #skipNavigation a:hover, #skipNavigation a:active { width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:200;}

/* 전체 */
body.loaded:after {opacity: 0;}

body.hovered .aside {width: 340px;width: 17.84777%;}
body.hovered .aside:before {width: 100%;}
body.hovered .aside .gnb ul.menu li.depth a.on:before {width: 100%;}
body.hovered .aside .gnb ul.menu li.depth:nth-child(4) a.btnToggle.on:after {left:calc(100% - 9px);}
body.hovered .main {/* transform: translateX(150px); *//* transform: translateX(7.88%); */transform: translateX(8.13%);}

body:after {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 146px;height: 146px;content: url(/assets/images/common/loading03.gif);margin: auto;transform: scale(0.25);transition: .8s ease;/* transition: .6s ease; */z-index: 10000;opacity: 1;}

.wrap {width: 100%;height: 100%;position: relative;z-index: 1;}
.main {position: relative;display: flex;/* height: 100%; */min-height: 100%;padding: 0 165px 100px;transition: .5s cubic-bezier(.77, 0, .18, 1);transition: .35s cubic-bezier(.77, 0, .18, 1);transform: translateX(0);}

/* 사이드 바 */
.aside {position: fixed;left: 0;top: 0;width: 165px;width: calc(340px / 1905);width: 17.84777%;min-width: 165px;height: 100%;z-index: 300;padding: 142px 0;transition: .5s cubic-bezier(.77, 0, .18, 1);transition: .35s cubic-bezier(.77, 0, .18, 1);/* background: #ccc; */}
.aside:before {position:absolute;top: 0px;left: 0;display:block;content:"";width: 165px;height: 100%;background: #202020;transition: .35s cubic-bezier(.77, 0, .18, 1);}
.aside:after {display: block; width: 0; height: 0; content: ""; clear: both;}

.aside h1 {position: relative;position: absolute;top: 0;width: 100%;font-size: 0;padding: 47px 30px 0;transition: all 0.1s;z-index: 1000;}
.aside h1:before {position:absolute;top: 20px;left: 30px;display:block;content:"";width: 105px;height: 2px;background: #292929;}
.aside h1 a {position: relative;display: block;width: 105px;height: 75px;background: url(/assets/images/common/logo.svg) no-repeat 0 0;background-size: contain;/* transition: all 0.1s; */}

/* 모바일 내비게이션 */
.menuButton {/* display: none; */}

/* 메인 내비게이션 */
.menuPanel {padding: 0;height: 100%;overflow-y: auto;display: flex;align-items: center;}
.menuPanel::-webkit-scrollbar {width: 5px}
.menuPanel::-webkit-scrollbar-thumb {background-color: #424242;border-radius: 99px}
.menuPanel::-webkit-scrollbar-track {background-color: #5f5f5f;border-radius: 99px}

.gnb {width: 100%;}
.gnb:after {display: block; width: 0; height: 0; content: ""; clear: both;}

.gnb ul.menu {position: relative;z-index: 1;}
.gnb ul.menu li.depth {transition: all 0.1s;padding: 0 30px;}

.gnb ul.menu li.depth > a {position: relative;display: block;font-family: 'Calibri-Bold';font-size: 20px;color: #424242;padding: 5px 0px;text-decoration: none;transition: .3s ease;transition: .25s ease;}
.gnb ul.menu li.depth > a:before {position: absolute;left: 0;bottom: 3px;background-color: #5f5f5f;content:"";width: 0px;height: 1px;transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);transition: 0.35s cubic-bezier(0.77, 0, 0.18, 1);}
.gnb ul.menu li.depth > a:hover {color: #5f5f5f; transition-delay: 0s; margin-left: 4px;}
.gnb ul.menu li.depth > a.on {color: #5f5f5f;}
.gnb ul.menu li.depth > a.on:before {width: 10px;}
.gnb ul.menu li.depth:nth-child(4) {margin-bottom: 27px;}

.gnb ul.menu li.depth > a span {display: block;vertical-align: middle;}

/* 메인 내비게이션 - 토글 */
.gnb ul.menu li.depth a.btnToggle {padding-bottom: 12px;}
.gnb ul.menu li.depth a.btnToggle:after {display: block;position: absolute;top: 17px;left: 81px;width: 8.5px;height: 5.45px;width: 9px;height: 6px;margin-top: -1px;content: "";background: url(/assets/images/common/icon_gnb_arrow.svg) no-repeat 0 0;transition: .3s ease;transition: .25s ease;transition: .35s ease;opacity: 0.54;}
.gnb ul.menu li.depth a.btnToggle:hover:after {opacity: 1;}
.gnb ul.menu li.depth a.btnToggle.active:after {transform:rotate(180deg);}

.gnb ul.menu li.depth ul.toggle {/* margin-bottom: -3px; */}
.gnb ul.menu li.depth ul.toggle > li {transition: all 0.1s;padding: 0;}
.gnb ul.menu li.depth ul.toggle > li > a {position: relative;display: block;font-family: 'Calibri-Bold';font-size: 15px;color: #424242;padding: 4px 0px 3px;text-decoration: none;transition: .3s ease;}
.gnb ul.menu li.depth ul.toggle > li > a:hover {color: #5f5f5f;}
.gnb ul.menu li.depth ul.toggle > li:last-child > a {/* padding-bottom: 0; */}
.gnb ul.menu li.depth ul.toggle > li > a.on {color: #5f5f5f;}

/* 메인 내비게이션 - 하단 */
.menuBottom {position: absolute;bottom: 0;width: 100%;padding: 0px 30px 60px;z-index: 998;transition: all 0.2s ease-in-out;}
.menuBottom a.pdf {display: block;width: 36px;height: 44px;background: url(/assets/images/common/btn_icon_pdf_on.svg) no-repeat 0 0;transition: all 0.1s; opacity: 0.54;}
.menuBottom a.pdf:hover {opacity: 1;}

/* 콘텐츠 */
.contents {position: relative;display: flex;flex: 1;/* height: 100%; *//* min-height: 100%; */transition: all 0.2s;/* background: #e7e7e7; */}
.contents:after {display: block; width: 0; height: 0; content: ""; clear: both;}

.contents .section {position: relative;/* height: 100%; *//* min-height: 100%; */flex: 1;}
.contents .section:after {display: block; width: 0; height: 0; content: ""; clear: both;}

.contents .article {position: relative;display: flex;/* width: 100%; */height: 100%;}
.contents .article .section {position: relative;max-width: 1160px;margin: 0 auto;padding: 47px 0px 25px;}
.contents .article .section:before {position:absolute;top: 20px;left: 0;display:block;content:"";max-width: 1160px;width: 100%;height: 2px;background: #292929;}

/* 헤딩 */
.heading {position: relative;padding: 13px 0 14px;background: #ccc;}
.heading h1 {font-size: 28px;font-weight: 700;color: #fff;text-align: center;}

/* 페이징 */
.paginate {margin-top: 3px;margin-bottom: -1px;}
.paginate:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.paginate span.count {display: inline-block;font-size: 15px;margin-right: 2px;vertical-align: middle;}
.paginate > a {display:inline-block;vertical-align:middle;overflow:hidden;width: 40px;height: 40px;font-size:0;text-indent:-120%;color:transparent;background: url("/assets/images/common/common_sfix_icon.png") no-repeat;border: 2px solid #172121;border-radius: 99px;-webkit-transition: all 0.1s;transition: all 0.1s;}
.paginate > a.first {background-position: 11px -38px;}
.paginate > a.prev {background-position: -85px -38px;}
.paginate > a.next {background-position: -186px -38px;}
.paginate > a.last {background-position: -289px -38px;}
.paginate > a:hover {/* border-color: #FE3E2F; */background-color: #EEEFF0;}
.paginate > a.first:hover,
.paginate > a.prev:hover,
.paginate > a.next:hover,
.paginate > a.last:hover {background-color: #EEEFF0;}
.paginate > a + a {margin-left: 1px;}
.paginate ol {display:inline-block;vertical-align:middle;/* margin: 0 6px; */}
.paginate ol:after {display:block;content:"";clear:both;}
.paginate li {float:left;}
.paginate li:first-child {margin-left:0;}
.paginate li a {display:block;width: 15px;height: 20px;font-size: 15px;color: #424242;text-align: center;text-decoration: none;transition: all 0.1s;padding-top: 1px;}
.paginate li:hover a {text-decoration: none;color: #1A7EA6;text-decoration: line-through;}
.paginate li a.on {color: #1A7EA6;}

/* 푸터 */
.footer {position: relative;position: absolute;bottom: 0;width: calc(100% - 330px);/* padding-left: 250px; */transition: all 0.2s;z-index: 1;}
.footer .ftWrap {position: relative;padding: 20px 0 60px;max-width: 1160px;margin: 0 auto;border-top: 2px solid #292929;}
.footer .ftWrap:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.footer .ftWrap p.copyright {font-size: 15px;letter-spacing: 0.1px;}
.footer .ftWrap p.copyright span {display: inline-block;color: #808080;margin-right: 5px;}

/* 탑 버튼 */
.gTopNavi {display: none;right: 20px;bottom: -60px;opacity: 0;z-index: 999;-webkit-transition: all .3s;transition: all .3s;position: fixed;position: -webkit-sticky;position: sticky;}
.gTopNavi.fixed {bottom: 15px;opacity: 1;}
.gTopNavi .btnIcon.top {position: absolute;top: -55px;right: 20px;width: 50px;height: 50px;background: url(/assets/images/common/img_arrow_top.png) no-repeat 0 0;}

/* 모달 팝업 */
body.modalOpen {overflow: hidden;}
body.modalOpenScr .modalWrap:before {right: 15px;width: 0;}
body.modalOpenScr .modalWrap:after {opacity: 0;}

.modalWrap {position:fixed;top: 0;right: 0;bottom: 0;left: 0;overflow-y: auto;z-index: 1060;background: rgba(0,0,0,0.8);}
.modalWrap:before {position: fixed;top: 0;/* right: 0; */width: 100%;height: 100%;background: #000;content: "";z-index: 9999;transition: 1s ease;/* transition: .8s ease; *//* transition: 1s cubic-bezier(.67, .01, .08, .99); */opacity: 1;}
.modalWrap:after {position: fixed;bottom: 0;top: 0;left: 0;right: 0;width: 146px;height: 146px;content: url(/assets/images/common/loading03.gif);margin: auto;transform: scale(0.25);transition: .8s ease;/* transition: .6s ease; */z-index: 10000;opacity: 1;}

.modal {position: absolute;width: 100%;top: 0 !important;right: 0;left: 0 !important;margin: 0 auto;display: none;}

.modal .modalContent {position: relative;padding: 0;margin: 50px auto;}
.modal .modalContent .modalHeader {position:relative;padding: 0 20px;margin-bottom: 20px;}
.modal .modalContent .modalHeader .tit {font-family: 'Calibri-Bold';font-size: 28px;padding-right: 35px;overflow: hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;word-break: break-all;position: relative;}
.modal .modalContent .modalHeader button {position:absolute;top: -1px;right: 9px;display: block;width: 40px;height: 40px;background: url("/assets/images/common/btn_icon_close.svg") no-repeat center;transition: 0.25s ease;}
.modal .modalContent .modalHeader button:hover {transform: rotate(90deg);}
.modal .modalContent .modalBody {position:relative;padding: 0px 20px;}
.modal .modalContent .modalFooter {position: relative;text-align: right;padding: 20px;}

/* 모달 팝업 - 상세 */
.modal .detailArea {position: relative;margin: 0;clear: both;}
.modal .detailArea img {margin-bottom: 35px;image-rendering: -webkit-optimize-contrast;}

.modal .detailArea {opacity: 0;transform: translateY(20px);transition: all 0.8s;transition: 1.0s cubic-bezier(.67, .01, .08, .99);transition: .8s cubic-bezier(.67, .01, .08, .99);}
.modal .detailArea.ani {opacity: 1;transform: translateY(0px);}

/* positionP - 전체 */
body.positionP.hovered .aside {width: 340px;width: 17.70834%;}
body.positionP.hovered .videoBG video {transform: translate(-50%, -50%);}
body.positionP.hovered .videoBG video {transform: translate(-46%, -50%);}

body.positionP {overflow-y: auto;}
body.positionP .aside {width: 340px;width: calc(340px / 1920);width: 17.70834%;}
body.positionP .contents .article .section:before {background: rgba(255, 255, 255, 0.4);}
body.positionP .footer .ftWrap {border-top: 2px solid rgba(255, 255, 255, 0.15);/* border-top: 2px solid rgba(255, 255, 255, 0.2); */}
body.positionP .footer .ftWrap p.copyright {color: #808080;}

/* positionP - loaded */
body.positionP.loaded:before {width: 0;}
body.positionP.loaded:after {opacity: 0;}

body.positionP:before {position: fixed;top: 0;right: 0;width: 100%;height: 100%;content: "";background-color: #000;z-index: 9999;transition: 1.0s ease;transition: .8s ease;opacity: 1;}
body.positionP:after {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 146px;height: 146px;content: url(/assets/images/common/loading03.gif);margin: auto;transform: scale(0.25);transition: .8s ease;/* transition: .6s ease; */z-index: 10000;opacity: 1;}

/* contactP - 전체 */
body.contactP.hovered .aside {width: 340px;width: calc(340px / 1920);width: 17.70834%;}

body.contactP {overflow-y: auto;}
body.contactP .aside {width: 165px;}
body.contactP .main {padding: 0 120px 100px 165px;}
body.contactP .contents .article .section.left {position: absolute;left: 0;top: 0;width: 438px;height: calc(100% + 100px);padding: 0;}
body.contactP .contents .article .section.left:before {display: none;}
body.contactP .contents .article .section.left + .section {margin-left: 558px;}
body.contactP .footer {position: absolute;left: 723px;width: calc(100% - 843px);}
body.contactP .footer .ftWrap {padding: 20px 0 60px;max-width: 100%;margin: 0;}

/* positionP - loaded */
body.contactP.loaded:before {width: 0;}
body.contactP.loaded:after {opacity: 0;}

body.contactP:before {position: fixed;top: 0;right: 0;width: 100%;height: 100%;content: "";background-color: #000;z-index: 9999;transition: 1.0s ease;transition: .8s ease;opacity: 1;}
body.contactP:after {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 146px;height: 146px;content: url(/assets/images/common/loading03.gif);margin: auto;transform: scale(0.25);transition: .8s ease;/* transition: .6s ease; */z-index: 10000;opacity: 1;}













@media (max-width:1600px) {/* 최대 1600px */

/* 전체 */
.main {padding: 0 60px 100px 225px;}









}










@media (max-width:1366px) {/* 최대 1366 */
/* 전체 */
.aside {width: 225px;width: calc(225px / 1351);width: 16.65434%;}

/* positionP - 전체 */
body.positionP .aside {width: 225px;width: calc(225px / 1366);width: 16.47145%;}












}









@media (max-width:1250px) {/* 최대 1250 */
/* contactP - 전체 */
body.contactP .main {padding: 0 90px 100px 165px;}
body.contactP .contents .article .section.left {width: 45.38860%;width: 300px;}
body.contactP .contents .article .section.left + .section {margin-left: 390px;}
body.contactP .footer {left: auto;right: 90px;width: calc(100% - 645px);}
body.contactP .footer .ftWrap {/* padding: 20px 0; *//* margin: 0 20px; */}












}







@media (max-width:959px) {/* 최대 959 */
/* 전체 */
.main {display: block;padding: 0;}

/* 사이드 바 */
.aside {width: 100% !important;height: auto;padding: 0;background: #202020;}
.aside:before {display: none;}

.aside h1 {position: relative;height: 58px;padding: 9px 16px;}
.aside h1:before {top: auto;bottom: 0px;left: 16px;display:block;width: calc(100% - 32px);}
.aside h1 a {width: 149px;height: 38px;background: url(/assets/images/common/logo_mobile.svg) no-repeat 0 0;}

/* 모바일 내비게이션 */
.menuButton {position: fixed;top: 0;right: 0;/* display: block; */padding: 27px 22px;cursor: pointer;transition: all 0.2s ease-in-out;z-index: 1001;}
.menuButton span,
.menuButton span:before,
.menuButton span:after {transition: all 0.3s ease-in-out;width: 24px;height: 2px;background-color: #5F5F5F;border-radius: 99px;}
.menuButton span {position: relative;display: block;}
.menuButton span:before,
.menuButton span:after {content: "";position: absolute;left: 0;}
.menuButton span:before {top: -9px;}
.menuButton span:after {top: 9px;}

.menuButton.active {position: fixed;top: 0px;right: 0px;}
.menuButton.active span {background: transparent;}
.menuButton.active span:before,
.menuButton.active span:after {top: 0;/* width: 19px; *//* height: 1px; */}
.menuButton.active span:before {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);-ms-transform: rotate(-135deg);}
.menuButton.active span:after {-webkit-transition-delay: 0.09s;-moz-transition-delay: 0.09s;-o-transition-delay: 0.09s;-ms-transition-delay: 0.09s;transition-delay: 0.09s;transform: rotate(135deg);-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);-ms-transform: rotate(135deg);}

/* 메인 내비게이션 */
.menuPanel {left: -100%;}
.menuPanel {position: fixed;top: 0;width: 100%;width: 86.13333%;height: calc(100% - 58px);margin-top: 58px;padding-bottom: 84px;background-color: #202020;z-index: 998;transition: all 0.2s ease-in-out;}
.menuPanel.active {left: 0;overflow-y: auto;}

.gnb ul.menu li.depth > a.on:before {width: 100%;}

.menuPanelOverlay {position: fixed;top: 0;width: 100%;height: calc(100% - 58px);margin-top: 58px;background-color: rgba(0, 0, 0, 0.5);cursor: pointer;z-index: 997;display: none;}

/* 메인 내비게이션 - 하단 */
.menuBottom {position: fixed;left: -100%;width: 86.13333%;padding: 0px 30px 40px;}
.menuBottom.active {left: 0;}

/* 콘텐츠 */
.contents {display: block;padding: 58px 0px 0px;}

.contents .article {position: relative;display: block;height: auto;}
.contents .article .section {position: relative;width: auto;padding: 0px 20px 20px;}
.contents .article .section:before {display: none;}

/* 페이징 */
.paginate {margin-top: -2px;}

/* 푸터 */
.footer {position: relative;width: 100%;}
.footer .ftWrap {padding: 20px 0;margin: 0 20px;}
.footer .ftWrap p.copyright {text-align: center;}

/* 모달 팝업 */
.modal .modalContent {margin: 50px 0 30px;}
.modal .modalContent .modalHeader button {top: -4px;}

/* 모달 팝업 - 상세 */
.modal .detailArea img {margin-bottom: 20px;}

/* contactP - 전체 */
body.contactP .main {padding: 0;}
body.contactP .contents .article .section.left {position: static;width: 100%;height: 250px;overflow: hidden;}
body.contactP .contents .article .section.left + .section {margin-left: 0px;}
body.contactP .footer {position: relative;left: auto;right: auto;width: 100%;}
body.contactP .footer .ftWrap {padding: 20px 0;margin: 0 20px;}












}









@media (max-width:480px) {/* 최대 480 */








}










/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */