@charset "UTF-8";


html{background:#f1f4f4 url(../images/common/bg_header.jpg) 0 0 repeat-y;}
#wrap{width: 100%; min-width: 1780px;}
#header{position: absolute; float: left; width: 300px;padding-top: 46px;}
#header h1{width: 173px; height: 49px; margin: 0 auto;}
#header h1 a{display: block; width: 100%; height: 100%; background: url(../images/common/h1_logo.png) 0 0 no-repeat; background-size: 173px auto;}
#header nav {font-size: 0;}
#header nav li{border-bottom: 1px solid #0bc165; position: relative;}
#header nav li a{display: block; padding-left: 143px; width: 100%; height: 80px; line-height: 80px; color: #acf5c8;
	font-size: 21px;
	text-align: left;
	font-weight: 500; box-sizing: border-box; border-left: 8px solid #02ab56;
	background: url(../images/common/gnb_01.svg) 87px center no-repeat;background-size: 38px auto;
}
#header nav li.active a{border-left: 8px solid #ffffff; color: #ffffff; background-color: #0bc165;}
#header nav li.gnb01 a{background-image: url(../images/common/gnb_01.svg); background-size: 38px auto;}
#header nav li.gnb02 a{background-image: url(../images/common/gnb_02.svg); background-size: 38px auto;}
#header nav li.gnb03 a{background-image: url(../images/common/gnb_03.svg); background-size: 33px auto;}
#header nav li.gnb04 a{background-image: url(../images/common/gnb_04.svg); background-size: 32px auto;}
#header nav li.gnb05 a{background-image: url(../images/common/gnb_05.svg); background-size: 33px auto;}
#header nav li.gnb06 a{background-image: url(../images/common/gnb_06.svg); background-size: 32px auto;}
/*#header nav li.gnb06.active a:before {content: ''; display: block; position: absolute; right: 55px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 8px; background-color: #f0331d;}*/
#header nav li.gnb07 a{background-image: url(../images/common/gnb_07.svg); background-size: 32px auto;}
#header nav li.gnb08 a{background-image: url(../images/common/gnb_08.svg); background-size: 34px auto;}
#header .personal-info {margin: 15px auto;}
#header .personal-info .thumb{width: 120px; height: 120px; border-radius: 60px; margin: 0 auto 15px; overflow: hidden;}
#header .personal-info .thumb img{width: 100%;}
#header .personal{display: block; text-align: center; color: #ffffff; font-size: 22px; font-weight: 500;}

#container{float: none;  padding: 20px 0 60px 0; margin-left: 300px;}
#container #content{width: 1440px; margin-left: 80px;}
#container .content-header{height: 80px; background: #ffffff; border-radius: 5px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.05); padding: 20px; box-sizing: border-box;}
#container .content-header .selectric {min-width: 200px;}
#container .content-header:after{content: ''; display: block; clear: both;}
#container .content-header .selectric-select{float: left}
#container .content-header .utill{float: right}
#container .content-header .utill:after{content: ''; display: block; clear: both;}
#container .content-header .utill a{float: left; position: relative;}
#container .content-header .utill a+a{margin-left: 20px}
#container .content-header .utill .ico{margin-bottom: 3px;}
#container .content-primary{position: relative; margin-top: 20px; }
#container .content-primary .section-wrap {background: #ffffff; border-radius: 5px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.05);padding: 40px;}
#container .content-primary .section-wrap .section-title a.back {margin: 0; margin-right: 5px;}
.main #container .content-primary:after{content: ''; display: block;clear: both}
.main #container .content-primary section{background: #ffffff; border-radius: 5px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.05);}
.main #container .content-primary section .table-wrap .scroll-table1 {overflow-y: auto; height: 302px;}
.main #container .content-primary section .table-wrap .scroll-table2 {overflow-y: auto; height: 254px; padding-right: 45px;}

#footer{margin-left: 300px; padding-bottom: 100px; }
#footer .footer-wrap{position: relative; width: 1440px; margin-left: 80px;border-top: 1px solid #e2e2e2; padding-top: 25px;}
#footer .footer-logo{display: block; position: absolute; left: 0; top: 20px; width: 87px;}
#footer .footer-logo img{width: 100%}
#footer .footer-wrap .info{padding-left: 110px; font-size: 12px; line-height: 21px;}
#footer .footer-wrap .copyright{display: block;}
#footer .footer-wrap .btn-area{position: absolute; right: 0; top: 33px;}
#footer .footer-wrap .btn-area a+a{margin-left: 7px}

/*박스 컨텐츠*/
.w10{width: 10%}
.w15{width: 15%}
.w20{width: 20%}
.w25{width: 25%}
.w30{width: 30%}
.w40{width: 40%}
.w50{width: 50%}
.w60{width: 60%}
.w70{width: 70%}
.w75{width: 75%}
.w80{width: 80%}
.w85{width: 85%}
.w90{width: 90%}

.section-left{float: left; box-sizing: border-box;}
.section-left.w15 {width: 13%; margin-right: 25px;}
.section-left .content-left{float: left; padding-left: 40px; box-sizing: border-box;}

.cont .header{position: relative; border-bottom: 1px solid #e2e2e2; padding-bottom: 20px;}
.cont .header .date-title{font-size: 36px; line-height: 40px; color: #222; font-weight: 300; letter-spacing: -0.05em; width: 375px;}
.cont .header .date-title .day{font-weight: 500}
.cont .header .insert {position: absolute; right: 0; top: 6px;}
.cont .header .insert .label{display: inline-block; font-size: 16px; padding-right: 10px; padding-left: 15px;}
.cont .header .insert .label+.input-text{display: inline-block; width: 70px;}
.cont .header .insert .input-text+.label{display: inline-block;}

.cont .fieldset.medium{}
.cont .fieldset.medium .insert:after {content: ''; display: block; clear: both;}
.cont .cont-wrap {width: 690px;}
.cont .cont-wrap .fieldset.medium {margin: 0;}
.fieldset.medium .insert + .insert{margin-top: 10px;}
.fieldset.medium .insert + .btn-area {margin-top: 10px;}
.fieldset.medium .insert .label{display: inline-block; width: 110px; font-size: 16px;}
.fieldset.medium .insert .label.line {line-height: 18px; vertical-align: top;}
.fieldset.medium .insert.box-line .label {vertical-align: top;}
.fieldset.medium .insert.box-line .num {margin: 10px 110px;}
.fieldset.medium .insert.insert-select .label {vertical-align: middle;}
.fieldset.medium .insert.insert-select .label + .selectric-wrapper .selectric {width: 198px;}
.fieldset.medium .insert.insert-select .selectric-wrapper + .label {vertical-align: middle; padding-left: 10px;}
.fieldset.medium .insert.insert-select .label {vertical-align: middle;}
.fieldset.medium .insert.insert-img {}
.fieldset.medium .insert.insert-img .label {vertical-align: top;}
.fieldset.medium .insert.insert-img .img-area {position: relative; display: inline-block; width: 200px; height: 200px; background: url('../images/common/bg_img.png') 50% 50% no-repeat #ffffff; background-size: 81px 59px; border: 1px solid #cccccc; border-radius: 5px; overflow: hidden; box-sizing: border-box;}
.fieldset.medium .insert.insert-img .img-area img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 110%; height: auto;}
.fieldset.medium .insert.insert-img .img-area + .img-area {margin-left: 10px;}
.fieldset.medium .insert.insert-img .add-img {vertical-align: baseline; margin-left: 5px;}
.fieldset.medium .insert .input-date + .label {margin-left: 10px;}
.fieldset.medium .insert .point {color: #ff2929; font-size: 18px; vertical-align: middle; padding-left: 5px;}
.fieldset.medium .insert .input-text{display: inline-block; width: 200px}
.fieldset.medium .insert .input-text.disable {background-color: #fafafa; color: #222222; font-weight: 300;}
.fieldset.medium .insert .btn.action {margin-top: 5px; margin-left: 7px;}
.fieldset.medium .insert.input-column .input-text {width: 70px; text-align: center;}
.fieldset.medium .insert.input-column .input-text + .input-text {width: 127px;}
.fieldset.medium .insert .num-check {font-size: 16px; color: #222222; font-weight: 300;}
.fieldset.medium .insert .num-check + .text-area{width: 577px; height: 150px; padding: 20px; font-size: 16px; box-sizing: border-box; border-radius: 6px; float: right;}
.fieldset.medium .insert .input-date {padding: 0;}
.fieldset.medium .insert .input-date .input-text {width: 155px;}
.fieldset.medium .insert .input-date + .input-date {margin-left: 10px;}
.fieldset.medium .insert .input-date.btns .input-text {width: 122px;}
.fieldset.medium .insert .input-date.inputs img + .input-text {margin-left: 5px;}
.fieldset.medium .insert .input-date.inputs .input-text.add-input {width: 100px;}
.fieldset.medium .insert .keyword-wrap {display: inline-block; max-width: 575px; border: 1px solid #cccccc; border-radius: 6px; padding: 10px 20px; box-sizing: border-box;}
.fieldset.medium .insert .keyword-wrap .keyword {line-height: normal; margin-right: 20px; padding: 10px 0;}
.fieldset.medium .insert .keyword-wrap .keyword + .keyword {margin-left: 0;}
.fieldset.medium .hr {height: 1px; background-color: #dddddd; margin: 20px 0;}
.fieldset.medium .column .insert .num-check + .text-area{width: 520px;}
.fieldset.medium .column .insert.insert-img .img-area + .img-area {margin-left: 113px; margin-top: 5px;}

/* 공지사항 */
/*.board .content-primary .section-wrap {height: 650px;}*/
.board .board-top {border-bottom: 1px solid #cccccc; height: 40px; margin-bottom: 30px;}
.board .board-top:after {content: ''; display: block; clear: both;}
.board .board-top .cont-tit {float: left; font-size: 18px; color: #222222; font-weight: 500;}
.board .board-top .cont-date {float: right; font-size: 16px; color: #222222; font-weight: 300;}
.board .board-bottom {font-size: 16px; line-height: 24px;}

/* 채팅 */
#container.chat .content-primary .section-wrap {padding: 0; height: 720px; }
.chat-wrap {position: relative; padding-bottom: 120px;  box-sizing: border-box;}
.chat-wrap .chat-area {height: 600px; box-sizing: border-box;overflow-y: scroll;}
.chat-wrap .chat-area:after {content: ''; display: block; clear: both;}
.chat-wrap .chat-area .chat-notice {position: relative; padding-top: 30px; padding-bottom: 50px;}
.chat-wrap .chat-area .chat-notice p {font-size: 16px; color: #222222; text-align: center; font-weight: 400; height: 40px; line-height: 40px; background-color: #fafafa; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}
.chat-wrap .chat-area .chat-msg {position: relative; min-height: 150px; width: 55%; padding: 20px 140px; box-sizing: border-box;}
.chat-wrap .chat-area .chat-msg .thumb {position: absolute; top: 0; width: 70px; height: 70px; border: 1px solid #e2e2e2; border-radius: 70px; overflow: hidden;}
.chat-wrap .chat-area .chat-msg .thumb img {width: 100%;}
.chat-wrap .chat-area .chat-msg .name {font-size: 16px; color: #222222; font-weight: 400;}
.chat-wrap .chat-area .chat-msg .msg-wrap {position: relative;}
.chat-wrap .chat-area .chat-msg .msg-wrap span {display: block;}
.chat-wrap .chat-area .chat-msg .msg-wrap.text {display: inline-block; padding: 15px 20px; margin: 10px 0; background-color: #f6ffee; border: 1px solid #e2e2e2; border-radius: 6px; box-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.chat-wrap .chat-area .chat-msg .msg-wrap.text span {font-size: 16px; color: #222222; font-weight: 300; letter-spacing: -0.05em;}
.chat-wrap .chat-area .chat-msg .msg-wrap.img .photo {display: inline-block; width: 340px; height: 185px; border-radius: 6px; overflow: hidden; margin: 10px 0;}
.chat-wrap .chat-area .chat-msg .msg-wrap.img img {width: 100%;}
.chat-wrap .chat-area .chat-msg .msg-date {font-size: 14px; color: #666666; font-weight: 300;}
.chat-wrap .chat-area .chat-msg.someone {float: left;}
.chat-wrap .chat-area .chat-msg.someone .thumb {left: 50px;}
.chat-wrap .chat-area .chat-msg.someone .download {position: absolute; bottom: 5px; margin-left: 355px;}
.chat-wrap .chat-area .chat-msg.someone .msg-wrap.text:before {content: ''; display: block; position: absolute; width: 18.5px; height: 15.5px; left: -18px; top: 50%; margin-top: -8px; background: url('../images/common/chat_left.png') 0 0 no-repeat; background-size: 18.5px 15.5px;}
.chat-wrap .chat-area .chat-msg.mine {text-align: right; float: right;}
.chat-wrap .chat-area .chat-msg.mine .thumb {right: 50px;}
.chat-wrap .chat-area .chat-msg.mine .download {position: absolute; bottom: 5px; margin-left: -40px;}
.chat-wrap .chat-area .chat-msg.mine .msg-wrap.text:before {content: ''; display: block; position: absolute; width: 20px; height: 16.5px; right: -20px; top: 50%; margin-top: -8px; background: url('../images/common/chat_right.png') 0 0 no-repeat; background-size: 20px 16.5px;}
.chat-wrap .chat-input {position: absolute;bottom: 0; height: 120px; width: 100%; padding: 30px 170px 30px 80px; background-color: #fafafa; box-sizing: border-box; border-top: 1px solid #cccccc; border-radius: 0 0 6px 6px;}
.chat-wrap .chat-input a {}
.chat-wrap .chat-input a.add-img {position: absolute; top: 50%; left: 20px; margin-top: -19px;}
.chat-wrap .chat-input a.enter-key {position: absolute; top: 10px; right: 20px; width: 125px; height: 100px; line-height: 100px;}
.chat-wrap .chat-input .text-area {border: none; font-size: 16px; color: #222222; font-weight: 500; padding: 0 5px; height: 100%; background-color: transparent;}

/* 팁 */
.tip-area {position: relative; margin: 40px 0; padding: 20px 70px; background-color: #f0f0f0; border-radius: 6px;}
.tip-area .tip-tit {position: absolute; left: 30px; font-size: 16px; font-weight: 600; color: #e11e1e;}
.tip-area .tip-tit:before {content: ''; display: block; position: absolute; left: -6px; top: 7px; width: 3px; height: 12px; background: url('../images/common/ico_tip.png') 0 0 no-repeat; background-size: 3px 12px;}
.tip-area .tip-text {font-size: 16px; color: #222222; font-weight: 300; letter-spacing: -0.05em;}
.tip-area .tip-text .bold {font-weight: 500;}
.tip-area .tip-text.tip-toggle {line-height: 40px; height: 40px; margin-top: 20px;}
.tip-area .tip-text.tip-toggle .label {display: inline-block; color: #222222; width: auto; margin-right: 10px; vertical-align: top;}
.tip-area .tip-input {}
.tip-area a.btn {width: 150px; height: 44px; position: absolute; right: 20px; top: 20px;}
.tip-area a.btn.confirm {}
.tip-area a.btn.cancel {background-color: #999999;}

/* setting */
.cont .fieldset.setting {}
.cont .fieldset.setting .cont-wrap {width: 100%;}
.cont .fieldset.setting p.text {margin-left: 85px; margin-top: 5px;}
.cont .fieldset.setting .insert p.text {display: inline-block; margin-left: 15px; margin-top: 0; vertical-align: top; padding-top: 6px;}
.cont .fieldset.setting .label {display: inline-block; font-size: 16px; color: #222222; width: 5%; vertical-align: top; padding-top: 6px;}
.cont .fieldset.setting .label + .input-text {display: inline-block; width: 40%; margin-left: 20px;}
.cont .fieldset.setting .label + .text-area {display: inline-block; width: 40%; height: 140px; margin-left: 20px; border-radius: 6px; padding: 10px; box-sizing: border-box;}
.setting-tit {font-size: 24px; color: #222222; font-weight: 400; padding: 10px 0;}
.section-setting + .section-setting {margin-top: 40px;}
.section-setting .section-header {border: none;}
.section-setting .section-header + .cont {margin: 0; min-height: auto;}
.section-setting .table-wrap.third {height: 350px; float: left;}
.section-setting .table-wrap.third:after {content: ''; display: block; clear: both;}
.section-setting .table-wrap.third .data-table {width: 396px; float: left;}
.section-setting .table-wrap.third .data-table th,
.section-setting .table-wrap.third .data-table td {text-align: left; padding-left: 20px; }
.section-setting .table-wrap.third .data-table + .data-table {margin-left: 40px}
.section-setting .data-table td {padding: 10px 0;}
.section-setting .data-table .btn.small {padding: 0 20px;}
.section-setting .data-table .input-text {width: 80px; height: 38px; line-height: 38px; text-align: center; margin-right: 5px;}
.section-setting .data-table .input-text.small {width: 60px;}
.section-setting .data-table .selectric {min-width: 140px; vertical-align: top;}
.section-setting .data-table .selectric .label {text-align: left;}
.section-setting .item-wrap {padding-left: 20px;}
.section-setting .item-wrap + .item-wrap {margin-top: 10px;}
.section-setting .item {display: inline-block; position: relative;}
.section-setting .item:before {content: '▶︎'; display: block; position: absolute; left: -18px; top: 12px; font-size: 10px; color: #666666;}
.section-setting .item + .item {margin-left: 50px;}
.section-setting .item .label {width: 100px; font-size: 16px; display: inline-block; vertical-align: middle;}
.section-setting .btn-item {position: absolute; right: 40px; top: 50%; margin-top: -20px;}
.section-setting .btn.large {padding: 0 46px;}

/* 사용자 설정 */
.user-wrap {width: 500px; height: 210px; margin: 0 auto;}
.user-wrap:after {content: ''; display: block; clear: both;}
.user-wrap .img-wrap {position: relative; width: 180px; float: left;}
.user-wrap .img-wrap .ceo-img {position: relative; width: 180px; height: 180px; border-radius: 180px; overflow: hidden;}
.user-wrap .img-wrap .ceo-img img {width: 100%;}
.user-wrap .img-wrap .btn-area {position: absolute; top: 160px; margin-left: 45px;}
.user-wrap .img-wrap .btn-area .user-btn {border: 1px solid #ccc; background-color: #fafafa; width: 40px; height: 40px; border-radius: 50px; display: inline-block;}
.user-wrap .img-wrap .btn-area .user-btn span {margin-top: 11px;}
.user-wrap .user-info {width: 250px; float: left; margin-left: 40px; margin-top: 50px;}
.user-wrap .user-info li {border-bottom: 1px solid #dddddd; height: 30px; line-height: 30px;}
.user-wrap .user-info li + li {padding-top: 10px;}
.user-wrap .user-info li span {width: 40%; display: inline-block; font-size: 14px; color: #222222;}
.user-wrap .user-info li span + span {width: 55%; font-size: 16px; color: #222222; font-weight: 500;}





.main .data-table tr:first-child th:first-child {width: 40px;}

/*패스워드*/
html.pw{background: #f4f8f8}
.password .pw-wrap{width: 1200px; margin: 0 auto;}
.password h1{color: #222222; margin-bottom: 10px; text-align: center; font-size: 40px; line-height: 40px; margin-top: 130px}
.password .summary{text-align: center; font-size: 16px; margin-bottom: 35px;}
.password .fieldset{border:1px solid #e2e2e2; background: #fff; padding: 60px 100px;}
.password .field{padding: 40px 220px; margin-bottom: 40px; border-bottom: 1px solid #e2e2e2}
.password .field .insert{margin-bottom: 10px; position: relative; padding-left: 110px;}
.password .field .label{position: absolute; left:0;top: 10px; display: inline-block; width: 110px;}
.password .input-text{width: 300px;}
.password .input-text +.btn{margin-left: 7px;}
.password .radio-box{text-align: center; width: 100%;}
.password .radio-box .label{font-size: 18px; width: auto; color: #222}
.password .radio-box .info-message{margin-top: 15px;}
.password.temp .fieldset{border:0 none; background: transparent;}
.password .field.pw-temp{padding: 40px 0;}
.password .field.pw-temp .insert{padding-left: 0; font-size: 40px;line-height: 40px; text-align: center;color: #222}
.password .field.pw-temp .label{font-size: 40px; width: auto; position: static; color: #222}
.password .field.pw-temp #tempPw{border-bottom: 1px solid #222;display: inline-block;background: transparent;width: 190px;text-align: center; font-size: 34px; color: #222;}
.password .button-area.large{text-align: center; margin-top: 30px;}
.password .button-area.large .btn{width: 150px;}
.password .button-area.large .btn+.btn{margin-left: 10px;}