@charset "utf-8";
/*-------------------------------------------------------------------------------------------------------------
	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, font/color, align, etc
-------------------------------------------------------------------------------------------------------------*/

html, body {width:100%; height:100%;}
.canvasWrap {display:block; position:relative; width:100%; height:100%; margin:0; padding:0 0 0 220px; transition:all 0.3s}
.canvasWrap h1 {display:inline-block; position:absolute; width:0; height:0; font-size:1px; text-indent:-9999px; overflow:hidden;}
.canvasWrap .asideMenu {display:block; position:fixed; width:220px; left:0; top:0; height:100%; margin:0; padding:0 0 110px 0; background-color:#272e38; color:#969696; z-index:1; transition:all 0.3s;}
.canvasWrap.asideClosed {padding-left:10px; transition:all 0.3s}
.canvasWrap.asideClosed .asideMenu {left:-210px; transition:all 0.3s;}

.asideMenu .logo {display:block; position:relative; width:100%; height:56px; margin:40px 0 0 0; padding:12px 0 0 0; font-size:24px; font-weight:700; color:#fafafa; text-align:center; background-color:#323942;}
.asideMenu .gnb {display:block; position:relative; margin:0; padding:30px 0 20px 0;}
.asideMenu .gnb > li {position:relative; margin:0; padding:0; border-bottom:solid #3b414a 1px;}
.asideMenu .gnb > li > a {display:block; position:relative; margin:0; padding:20px 10px 20px 30px; color:#969696; font-size:16px; font-weight:600;}
.asideMenu .gnb > li > a::before {content:''; display:block;; position:absolute; left:13px; top:27px; width:6px; height:6px; border-bottom:solid #969696 1px; border-right:solid #969696 1px; transform:rotate(45deg);}
.asideMenu .gnb > li.single > a::before {display:none;}
.asideMenu .gnb .subDepth {display:none; position:relative; width:100%; margin:0; padding:0; background-color:#212730; border-top:solid #3b414a 1px;}
.asideMenu .gnb li.current .subDepth {display:none;}

.gnb .subDepth li {display:block; position:relative; margin:0; padding:10px 0;}
.gnb .subDepth a {display:block; position:relative; margin:0; padding:0px 10px 0px 36px; color:#969696; font-size:13px; font-weight:400;}
.gnb .subDepth a::before {content:''; display:block;; position:absolute; left:23px; top:10px; width:3px; height:3px; border-radius:2px; background-color:#969696;}

.gnb .subDepth ul {display:none; position:relative; position:relative; margin:0; padding:8px 0 0 0;}
.gnb .subDepth li li {display:block; position:relative; margin:0; padding:0;}
.gnb .subDepth li li + li {margin-top:5px;}
.gnb .subDepth li li a {display:block; position:relative; margin:0; padding:0 10px 0 40px;}
.gnb .subDepth li li a::before {content:''; display:block;; position:absolute; left:30px; top:10px; width:3px; height:1px; border-radius:2px; background-color:#969696;}
.gnb .subDepth li.current ul {display:block;}

.gnb a:hover {color:#fafafa;}
.asideMenu .gnb > li > a:hover, .asideMenu .gnb > li.current > a, .asideMenu .subDepth > li.current > a {color:#fafafa;}
.asideMenu .subDepth ul li.current > a {color:#fafafa; font-weight:400;}

.asideMenu .logInfo {display:block; position:absolute; left:15px; bottom:15px; width:calc(100% - 30px); margin:0; padding:0; background-color:#7d9ddd; border-radius:8px;}

.asideMenu .logInfo .isLogin {display:flex; position:relative; margin:0; padding:10px; flex-direction:row; flex-wrap:no-wrap;}
.asideMenu .logInfo .user {display:inline-block; position:relative; width:200px; margin:0; padding:0 0 0 22px; color:#fff; font-size:12px; line-height:20px;}
.asideMenu .logInfo .user .fa-user-circle {position:absolute; font-size:18px; top:2px; left:0;}
.asideMenu .logInfo .log {display:inline-block; position:relative; margin:0; padding:0 8px; background-color:#FFF; border-radius:5px; line-height:20px;}
.asideMenu .logInfo .log span {display:block; position:relative; margin:0; padding:0; font-size:12px; color:#3b414a; font-weight:600;}
.asideMenu .adminLogin {display:flex; position:relative; margin:0; padding:10px; flex-direction:row; flex-wrap:nowrap;}
.asideMenu .adminLogin .setting {display:block; position:relative; margin:0; padding:0 8px;}
.asideMenu .adminLogin .setting span {display:block; position:absolute; margin:0; padding:0 8px; font-size:1px; color:#FFF; text-indent:-9999px;}
.asideMenu .adminLogin .setting .fa-cog {font-size:20px;color:#FFF;}
.asideMenu .notLogin {display:block; position:relative; width:100%; margin:0; padding:10px; box-sizing:border-box;}
.asideMenu .notLogin .log {display:block; position:relative; width:100%; margin:0; padding:0; text-align:center; color:#3b414a; font-weight:600;}

.asideMenu .menuControl {display:block; position:absolute; right:-20px; top:96px; z-index:2;}
.menuControl .menuCT {display:block; position:relative; width:46px; height:46px; margin:0; padding:0; background-color:#272e38; border-radius:0 6px 6px 0;}
.menuControl .menuCT span {position:absolute; width:0; height:0; font-size:1; text-indent:-9999px; overflow:hidden;}
.menuControl .menuCT .fa-sign-in-alt {color:#969696; font-size:20px; transform:rotate(180deg);}
.canvasWrap.asideClosed .menuControl {right:-40px;}
.canvasWrap.asideClosed .menuControl .menuCT .fa-sign-in-alt {transform:rotate(0deg);}

.gateWrap {display:flex; position:absolute; bottom:70px; left:0; width:100%;margin:0; padding:0; justify-content:space-between; background-color:#323942;}
.gateWrap a {display:block; position:relative; width:50%; margin:0; padding:0; color:#6c7588; font-size:12px; border-top:solid #323942 2px;}
.gateWrap a + a::before {content:''; display:block; position:absolute; left:-1px; top:8px; width:1px; height:16px; background-color:#fafafa; opacity:0.4;}
.gateWrap a + a::after {content:''; display:block; position:absolute; left:1px; top:8px; width:1px; height:16px; background-color:#fafafa; opacity:0.4;}
.gateWrap a:hover {color:#fafafa}
.gateWrap a.current {color:#969696; border-top:solid #7d9ddd 2px;}
.gateWrap a span {display:block; position:relative; line-height:30px; text-align:center;}

.canvasWrap .contentsWrap {display:block; position:relative; width:100%; height:100%; margin:0; padding:0; box-sizing:border-box; z-index:0; background-color:transparent;}
.canvasWrap::before {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100px; background-color:#272e38; color:#fafafa;}
.contentsWrap .contentsBody {display:block; position:relative; min-height:120px; width:100%; min-width:1300px; margin:0; padding:0; top:14px; background-color:#fff; border-radius:14px 0 0 0;}

.contentsBody .pageHeader {display:block; position:relative; width:100%; margin:0; padding:40px 40px 30px 80px; background-color:#edf0f2;	border-radius:14px 0 0 0;}
.pageHeader .pageNavi {display:block; position:relative; margin:0; padding:0; text-align:right;}
.pageNavi .home {display:inline-block; position:relative; margin:0; padding:0 14px 0 0; font-size:12px; color:#6c7588;}
.pageNavi .home::after {content:''; display:block; position:absolute; right:4px; top:5px; width:7px; height:7px; border-bottom:solid #6c7588 1px; border-right:solid #6c7588 1px; transform:rotate(-45deg)}
.pageNavi span {display:inline-block; position:relative; margin:0; padding:0; font-size:12px; color:#6c7588;}
.pageNavi span + span {padding-left:14px;}
.pageNavi span + span::before {content:''; display:block; position:absolute; left:1px; top:5px; width:7px; height:7px; border-bottom:solid #6c7588 1px; border-right:solid #6c7588 1px; transform:rotate(-45deg)}
.pageNavi .current {color:#517cd2; font-weight:700;}
.pageHeader .h2Title {display:flex; position:relative; margin:10px 0 0 0; padding:0; font-size:28px; color:#333; font-weight:700;}
.contentsWrap.fixed .contentsBody {padding-top:120px; top:0;}
.contentsWrap.fixed .pageHeader {position:fixed; padding-top:15px; padding-bottom:15px; top:0; z-index:100; border-bottom:solid #ccc 1px;}
.contentsWrap.fixed .pageHeader .pageNavi {display:none;}

.contentsBody .contents {display:block; position:relative; margin:0; padding:0 0 40px 0;}
.contentsBody .contents .innerWrap {display:block; position:relative; margin:0; padding:40px 40px 0 80px;}


/* Popup */
.pop-modal {display:none; position:fixed; top:0px; left:0px; z-index:500; width:100%; height:100%; background-color:rgba(0,0,0,0.6);}
.pop-wrapper {display:block; position:relative; top:50%; left:0px; z-index:10; width:100%; margin:0 auto; padding-top:50px; transform:scale(1) translateY(-50%); border-radius:6px; background-color:#fff; transition:all ease 0.2s;}
.pop-wrapper.zoomOut {top:50%; transform:scale(0.5) translateY(-50%);}
.pop-wrapper:focus{outline:0;}
.pop-header {position:absolute; top:0px; left:0px; width:100%; height:50px; padding-left:30px; background-color:#ddd; border-radius:6px 6px 0 0;}
.pop-header h2 {font-size:28px; line-height:50px; color:#000;}
.pop-container {position:relative; padding:30px; max-height:700px; overflow:auto;}
.pop-content {position:relative;}
.pop-content .wrap_sub {position:relative; padding:20px 25px 15px 25px;}
.pop-content .wrap_sub .popup-form    {position:relative;}
.pop-content .wrap_sub .popup-form h2 {position:relative; font-size:1rem; font-weight:800; line-height:18px; padding:5px 0; height:28px; border-bottom:solid 1px #e5e5e5; margin-bottom:15px;}
.pop-content .wrap_sub .popup-form h3 {position:relative; font-size:0.98rem; font-weight:500; line-height:20px; padding:5px 0; height:30px;}

.pop-content .wrap_sub .popup-form .popup-sub {position:relative;}
.pop-content .wrap_sub .popup-form .popup-sub li {position:relative; margin-bottom:15px;}
.pop-content .wrap_sub .popup-form .popup-sub .input_1 {position:relative; display:block; width:100%; background:#fff; border:solid 1px #efefef; color:#686663; padding:16px 10px 16px 10px; border-radius:0px; font-size:0.98rem; vertical-align:top; box-sizing:border-box; -webkit-appearance: none;}

.pop-footer {position:relative; height:50px; padding:0 20px; line-height:50px; color:#fff; background-color:#000;}
.pop-wrapper .pop-btn-close {display:inline-block; position:absolute; top:10px; right:30px; z-index:10; width:30px; height:30px; background:transparent;}
.pop-wrapper .pop-btn-close span {display:inline-block; overflow:hidden; width:0px; height:0px; font-size:0px;}
.pop-wrapper .pop-btn-close:before,
.pop-wrapper .pop-btn-close:after {content:""; display:inline-block; position:absolute; top:0px; left:15px; width:2px; height:30px; background-color:#000;}
.pop-wrapper .pop-btn-close:before {transform:skewx(45deg);}
.pop-wrapper .pop-btn-close:after {transform:skewx(-45deg); }

.pop-modal .pop-trap {position:relative; overflow:hidden; width:0px; height:0px;}