@charset "utf-8";

/* reset css include */
@import"global.css";

#wrap {width:100%;}

#header {width:100%; height:20px; padding:5px 0; overflow:hidden; position:relative; border-bottom:1px solid #ccc;}
#header .logo {float:left; padding-left:10px; line-height:20px;}
#header .logo a {}
#header .logo a img {height:20px;}
#header .logo a span {font-weight:normal;}
#header .util {float:right; padding-right:10px;}
#header .util a {display:inline-block; margin-left:10px; font-size:11px;}
#header .util > strong {color:#333;}

#container {width:100%;}

#container {}
#container > tbody > tr > td {padding:15px; vertical-align:top;}
#container > tbody > tr > td#index {text-align:center; padding-top:200px;}

#lnbWrap {width:100%; padding:30px 0;}
#lnbWrap .logo {width:100%; height:60px; margin-bottom:30px;}
#lnbWrap .logo a {display:block; text-align:center; font-size:24px; line-height:60px; color:#111;}
#lnbWrap .logo a img {height:60px;}
#lnbWrap .lnb_tit {padding-left:12px; background-color:#009a44; font-size:20px; line-height:40px; color:#fff;}
#lnbWrap .log_table {margin:3px 0 30px; border:1px solid #ccc;}
#lnbWrap .log_table tr th {height:30px; text-align:left; padding-left:10px;}
#lnbWrap .log_table tr td {height:30px; text-align:left; padding-left:10px;}
#lnbWrap .log_table tr:first-child th {border-bottom:1px solid #eee;}
#lnbWrap .log_table tr:first-child td {border-bottom:1px solid #eee;}
#lnbWrap .lnb {width:100%;}
#lnbWrap .lnb > li {margin-top:3px;}
#lnbWrap .lnb > li > a {display:block; padding-left:20px; font-weight:bold; font-size:14px; line-height:28px; border:1px solid #ccc; background-color:#eee;}
#lnbWrap .lnb > li.on > a {background-color:#666; color:#fff;}
#lnbWrap .lnb > li ul {display:none; padding:12px 0;}
#lnbWrap .lnb > li ul li {}
#lnbWrap .lnb > li ul li a {display:block; padding-left:30px; font-size:12px; line-height:24px;}
#lnbWrap .lnb > li ul li.on a {font-weight:bold; color:#009a44;}
#lnbWrap .lnb > li ul li a:hover {font-weight:bold; color:#009a44;}

#contents {width:100%; padding:30px 0;}
#contents .hgroup {width:100%; height:59px; margin-bottom:30px; position:relative; border-bottom:1px solid #ccc;}
#contents .hgroup h2 {font-size:32px; line-height:48px; color:#222;}
#contents .hgroup .location {position:absolute; right:0; bottom:12px;}
#contents .hgroup .location a {font-weight:bold; line-height:30px;}
#contents .hgroup .location strong {color:#000; line-height:30px;}

#contents_popup {width:100%; }
#contents_popup .hgroup {width:100%; height:59px; margin-bottom:30px; position:relative; border-bottom:1px solid #ccc;}
#contents_popup .hgroup h2 {font-size:32px; line-height:48px; color:#222;}
#contents_popup .hgroup .location {position:absolute; right:0; bottom:12px;}
#contents_popup .hgroup .location a {font-weight:bold; line-height:30px;}
#contents_popup .hgroup .location strong {color:#000; line-height:30px;}

.sec_top {width:100%; margin-bottom:5px; overflow:hidden;}
.sec_top .sec_tit {font-size:16px; line-height:22px; color:#333; float:left;}
.sec_top .page {float:right; padding-top:4px;}
.sec_top .page span {display:inline-block; margin-left:10px; font-weight:bold; color:#ccc;}
.sec_top .page span strong {color:#333;}

.write_table {width:100%; min-width:1024px; border-top:2px solid #009a44;}
.write_table tr th {padding:5px 10px; border-bottom:1px solid #ddd; background-color:#f5f5f5; color:#444; text-align:left; line-height:18px;}
.write_table tr th:first-child {border-left:0;}
.write_table tr td {padding:5px 10px; border-bottom:1px solid #ddd;}
.write_table tr td.content {padding:15px 10px;}
.write_table tr td .img_upload {float:left; margin-left:5px; margin-top:5px;}
.write_table tr td .img_upload:first-child {margin-left:0;}
.write_table tr td .img_upload .btns {width:100%; overflow:hidden; margin-top:5px;}
.write_table tr td .img_upload .btns input {width:68px; float:right;}
.write_table tr td .img_upload .btns input:first-child {float:left;}

.list_table {width:100%; min-width:1024px; border-top:2px solid #009a44;}
.list_table thead tr th {height:32px; color:#444; border-bottom:1px solid #ccc;}
.list_table tbody tr td {height:26px; border-bottom:1px solid #ddd; text-align:center;}

.pagination_wrap {text-align:center; overflow:hidden;}
.pagination_wrap .pagination {display:inline-block; *display:inline; zoom:1;}
.pagination_wrap .pagination > a {display:inline-block; width:22px; height:22px; margin-left:5px; float:left; font-size:12px; line-height:22px; color:#333; border:1px solid #ccc;}
.pagination_wrap .pagination > a:hover {background-color:#009a44; color:#fff;}
.pagination_wrap .pagination a.page_first {margin-left:0px;}
.pagination_wrap .pagination a.page_prev {}
.pagination_wrap .pagination a.page_next {margin-left:0px;}
.pagination_wrap .pagination a.page_last {}
.pagination_wrap .pagination .page {display:inline-block; float:left; padding:0 20px;}
.pagination_wrap .pagination .page a {display:inline-block; float:left; width:22px; height:22px; margin-left:5px; font-size:12px; line-height:22px; color:#333; border:1px solid #ccc;}
.pagination_wrap .pagination .page a.on {background-color:#009a44; color:#fff;}
.pagination_wrap .pagination .page a:first-child {margin-left:0px;}

#footer {width:100%; height:20px; padding:5px 0; position:relative; overflow:hidden; border-top:solid 1px #ccc; line-height:20px; font-size:11px;}
#footer .copyright {float:right; padding-right:10px;}
#footer .byname {float:left; padding-left:10px; color:#ccc;}


/* FileUpload Style ================================================================================================================================================ */
.file_wrap {width: 100%; height: 100px; border: solid 1px #eaeaea; font-size:12px; text-align:center; overflow-y: scroll;overflow-x: hidden;}

/* Essential FileDrop zone element configuration: */
.fd-zone {
  position: relative;
  overflow:hidden;
  height:100px;
  /***
    This way you can create a pretty box that will be both clickable and droppable:
   ***
    width: 15em;
    margin: 0 auto;
    text-align: center;
  */
}

/* Hides <input type="file"> while simulating "Browse" button: */
.fd-file {
  opacity: 0;
  font-size: 100px;
  height:100px;
  witdh:100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
  font-family: sans-serif;
  margin-right:280px;
}

.img_area {width:1020px; margin:0 auto; position:relative; text-align:center;}
.img_area .life_img {width:auto; height:auto; max-width:100%; max-height:930px;}

.img_area .point {position:absolute;}
.img_area .point span {height:37px; display:block;}
.img_area .point .piece1 {width:27px;}
.img_area .point .piece2 {font-family:'lg_b', 'ng_b'; font-size:12px; line-height:37px; color:#000;}
.img_area .point .piece3 {width:15px;}

.img_area .point.r .piece1 {float:left; background:url(/resources/backoffice/images/common/point1_1_off.png) 0 0 no-repeat;}
.img_area .point.r .piece2 {float:left; background:url(/resources/backoffice/images/common/point1_2_off.png) 0 0 repeat-x;}
.img_area .point.r .piece3 {float:left; background:url(/resources/backoffice/images/common/point1_3_off.png) 0 0 no-repeat;}
.img_area .point.r:hover .piece1 {background-image:url(/resources/backoffice/images/common/point1_1_on.png);}
.img_area .point.r:hover .piece2 {background-image:url(/resources/backoffice/images/common/point1_2_on.png); color:#fff;}
.img_area .point.r:hover .piece3 {background-image:url(/resources/backoffice/images/common/point1_3_on.png);}

.img_area .point.l .piece1 {float:right; background:url(/resources/backoffice/images/common/point2_1_off.png) 0 0 no-repeat;}
.img_area .point.l .piece2 {float:right; background:url(/resources/backoffice/images/common/point1_2_off.png) 0 0 repeat-x;}
.img_area .point.l .piece3 {float:right; background:url(/resources/backoffice/images/common/point2_3_off.png) 0 0 no-repeat;}
.img_area .point.l:hover .piece1 {background-image:url(/resources/backoffice/images/common/point2_1_on.png);}
.img_area .point.l:hover .piece2 {background-image:url(/resources/backoffice/images/common/point1_2_on.png); color:#fff;}
.img_area .point.l:hover .piece3 {background-image:url(/resources/backoffice/images/common/point2_3_on.png);}

.img_area .btn_point_view {display:block; width:55px; height:55px; position:absolute; top:14px; right:19px; background:url(/resources/backoffice/images/common/btn_point_view.png) 0 0 no-repeat;}
.img_area .btn_point_view.on {background:url(/resources/backoffice/images/common/btn_point_view_on.png) 0 0 no-repeat;}

.color_chip > li {float:left; width:30px; height:15px;}

.login_wrap {width:540px; height:240px; position:absolute;  top:50%; left:50%; margin:-120px 0 0 -203px;}
.login_wrap .login_top {width:100%; height:100px; text-align:center;}
.login_wrap .login_top .logo {margin:0 auto 20px;}
.login_wrap .login_top .txt {font-weight:bold; font-size:30px; line-height:34px; color:#000;}
.login_wrap .login_box {width:420px; height:90px; margin:0 auto; position:relative; border-top:3px solid #009a44;}
.login_wrap .login_box label {font-weight:bold; line-height:30px; color:#000; position:absolute; left:0;}
.login_wrap .login_box .label_id {top:20px;} 
.login_wrap .login_box .label_pw {top:60px;}
.login_wrap .login_box input[type=text] {width:228px; padding:5px; height:18px; border:1px solid #d6d6d6; position:absolute; top:20px; left:76px;}
.login_wrap .login_box input[type=password] {width:228px; padding:5px; height:18px; border:1px solid #d6d6d6; position:absolute; top:60px; left:76px;}
.login_wrap .login_box input[type=submit] {width:80px; height:70px; border:0; background-color:#009a44; color:#fff; font-size:16px; font-weight:bold; position:absolute; right:0; bottom:0;}


.main_visual_imgaes {width:100%;}
.main_visual_imgaes .main_visual_admin_wrap {width:47%; float:left;}
.main_visual_imgaes .sub_visual_admin_wrap {width:47%; float:left;}
.main_visual_imgaes .main_visual_table_wrap {width:48%; float:right;}

.main_visual_admin_wrap {padding:1%; border:2px solid #ccc;} 
.main_visual_admin_wrap .main_visual_admin {overflow:hidden;}
.main_visual_admin_wrap .main_visual_admin:first-child {margin-bottom:10px;}
.main_visual_admin_wrap .main_visual_admin div {float:left;}
.main_visual_admin_wrap .main_visual_admin div img {width:100%;}
.main_visual_admin_wrap .main_visual_admin .box1 {width:27%; padding-right:3%;}
.main_visual_admin_wrap .main_visual_admin .box2 {width:37%; padding-right:3%;}
.main_visual_admin_wrap .main_visual_admin .box3 {width:30%;}
.main_visual_admin_wrap .main_visual_admin .box3 .box3_1 {margin-bottom:10px;}
.main_visual_admin_wrap .main_visual_admin .box4 {width:27%; padding-right:3%;}
.main_visual_admin_wrap .main_visual_admin .box5 {width:27%; padding-right:3%;}
.main_visual_admin_wrap .main_visual_admin .box5 .box5_1 {margin-bottom:10px;}
.main_visual_admin_wrap .main_visual_admin .box6 {width:40%;}

.sub_visual_admin_wrap {padding:2%; border:2px solid #ccc;}
.sub_visual_admin_wrap .sub_visual_admin {overflow:hidden; margin-top:10px;}
.sub_visual_admin_wrap .sub_visual_admin:first-child {margin-top:0px;}
.sub_visual_admin_wrap .sub_visual_admin div {float:left; overflow:hidden;}
.sub_visual_admin_wrap .sub_visual_admin div img {max-height:100%;}
.sub_visual_admin_wrap .sub_visual_admin .box1 {width:31%; margin-right:2%;}
.sub_visual_admin_wrap .sub_visual_admin .box2 {width:32%; margin-right:2%;}
.sub_visual_admin_wrap .sub_visual_admin .box3 {width:33%;}
.sub_visual_admin_wrap .sub_visual_admin .box4 {width:64%; margin-right:2%;}
.sub_visual_admin_wrap .sub_visual_admin .box5 {width:15%; margin-right:2%;}
.sub_visual_admin_wrap .sub_visual_admin .box6 {width:17%;}
.sub_visual_admin_wrap .sub_visual_admin .box7 {width:38%; margin-right:2%;}
.sub_visual_admin_wrap .sub_visual_admin .box8 {width:28%; margin-right:2%;}
.sub_visual_admin_wrap .sub_visual_admin .box9 {width:30%;}


.main_visual_admin_wrap .woman_wrap {width:47%; float:left;}
.main_visual_admin_wrap .man_wrap {width:47%; float:right;}
.main_visual_admin_wrap .section {width:100%; overflow:hidden;}
.main_visual_admin_wrap .section .box {display:block; width:100%; float:left;}
.main_visual_admin_wrap .section .box.w40per {width:43%;}
.main_visual_admin_wrap .section .box.w60per {width:57%;}
.main_visual_admin_wrap .section .box img {width:100%;}

.setting_table {width:1600px; border-bottom:1px solid #ccc;}
.setting_table thead tr th {height:30px; background-color:#555; color:#fff;}
.setting_table > tbody > tr > td {padding:10px; border-top:1px solid #ccc; border-left:1px solid #ccc; text-align:center;}
.setting_table > tbody > tr:first-child > td {border-top:0;}
.setting_table > tbody > tr > td:first-child {border-left:0;}
.setting_table > tbody > tr > td input {width:60px; text-align:center;}
.setting_table > tbody > tr > td input[type=radio] {width:auto;}
.setting_table > tbody > tr > td textarea {width:98%; height:100px;}
.setting_table tbody tr td > img {max-width:200px; max-height:200px;}
.setting_table tbody tr td .btn {display:inline-block; padding:0 5px; background-color:#555; color:#fff; line-height:20px;}
.setting_table tbody tr.set {display:none;}
.setting_table tbody tr td .setting_wrap {width:100%; overflow:hidden;}
.setting_table tbody tr td .setting_wrap .img_area {float:left;}
.setting_table tbody tr td .setting_wrap .set_box {width:540px; float:right;}
.setting_table tbody tr td .setting_wrap .set_box table {background-color:#fff;}
.setting_table tbody tr td .setting_wrap .set_box table td {text-align:left;}

@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }
@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }
#loading {position:fixed; top:0; left:0; width:100%; height:100%; background:url(../../images/common/black40.png) 0 0 repeat; z-index:1000; text-align:center; z-index:9999;}
#loading .loadingWrap {position:absolute; top:50%; left:50%; margin:-61px 0 0 -56px;}
#loading .loadingWrap .txt {font-weight:700; font-size:30px; line-height:1; color:#fff; margin-bottom:20px;}
#loading .loadingWrap .loadingBox {width:72px; height:72px; position:relative; margin:0 auto;}
#loading .loadingWrap .loadingBox > div {top:28px; left:33px; width:5px; height:17px; background:#fff; border-radius:10px; position:absolute;}
#loading .loadingWrap .loadingBox > div.bar01 {-webkit-transform:rotate(0deg)   translate(0,-24px); transform:rotate(0deg)   translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}
#loading .loadingWrap .loadingBox > div.bar02 {-webkit-transform:rotate(30deg)  translate(0,-24px); transform:rotate(30deg)  translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.4166666666666667s;animation-delay: -0.4166666666666667s;}
#loading .loadingWrap .loadingBox > div.bar03 {-webkit-transform:rotate(60deg)  translate(0,-24px); transform:rotate(60deg)  translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.33333333333333337s;animation-delay: -0.33333333333333337s;}
#loading .loadingWrap .loadingBox > div.bar04 {-webkit-transform:rotate(90deg)  translate(0,-24px); transform:rotate(90deg)  translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.25s;animation-delay: -0.25s;}
#loading .loadingWrap .loadingBox > div.bar05 {-webkit-transform:rotate(120deg) translate(0,-24px); transform:rotate(120deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666669s;animation-delay: -0.16666666666666669s;}
#loading .loadingWrap .loadingBox > div.bar06 {-webkit-transform:rotate(150deg) translate(0,-24px); transform:rotate(150deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.08333333333333331s;animation-delay: -0.08333333333333331s;}
#loading .loadingWrap .loadingBox > div.bar07 {-webkit-transform:rotate(180deg) translate(0,-24px); transform:rotate(180deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0s;animation-delay: 0s;}
#loading .loadingWrap .loadingBox > div.bar08 {-webkit-transform:rotate(210deg) translate(0,-24px); transform:rotate(210deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.08333333333333337s;animation-delay: 0.08333333333333337s;}
#loading .loadingWrap .loadingBox > div.bar09 {-webkit-transform:rotate(240deg) translate(0,-24px); transform:rotate(240deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.16666666666666663s;animation-delay: 0.16666666666666663s;}
#loading .loadingWrap .loadingBox > div.bar10 {-webkit-transform:rotate(270deg) translate(0,-24px); transform:rotate(270deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}
#loading .loadingWrap .loadingBox > div.bar11 {-webkit-transform:rotate(300deg) translate(0,-24px); transform:rotate(300deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.33333333333333337s;animation-delay: 0.33333333333333337s;}
#loading .loadingWrap .loadingBox > div.bar12 {-webkit-transform:rotate(330deg) translate(0,-24px); transform:rotate(330deg) translate(0,-24px); -webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.41666666666666663s;animation-delay: 0.41666666666666663s;}