@charset "utf-8";
@import "common.css";

/* layout */
html {min-width:1260px}
body {overflow-x:auto}

.inner {position:relative; margin:0 auto; padding:0 30px; width:1260px}
.inner:after {display:block; clear:both; content:""}

#header {position:relative; height:90px; box-shadow:0 0 8px rgb(0,0,0,0.2); z-index:100}
#header .inner {height:90px}
#header h1 {position:absolute; left:30px; top:30px; z-index:101}
#header h1 a {display:block; width:172px; height:30px; background:url('/images/gasarang/common/logo-h1.png') 0 0 no-repeat; font-size:0; line-height:0}
#header .user {float:right; padding-top:30px; font-size:16px}
#header .user .name {display:inline-block; margin-right:10px; line-height:27px}
#header .user a {display:inline-block; padding:0 13px; line-height:25px; height:27px; border:1px solid #b6b7bd; border-radius:10px; background:#fff; font-size:14px; color:#666}

#container > .inner-wrap {position:relative; margin:0 auto; padding-left:200px; padding-right:30px; width:1260px}
#container > .inner-wrap:after {display:block; clear:both; content:""}
#container > .inner-wrap.no-wrap {padding-left:0; padding-right:0}

#lnb {position:absolute; left:0; top:0; width:200px}
#lnb ul > li {position:relative; height:60px; border-bottom:1px solid #e3e3e3}
#lnb ul > li:after {position:absolute; right:20px; top:50%; display:block; width:10px; height:16px; background:url('/images/gasarang/admin/bg-lnb.png') 0 0 no-repeat; transform:translateY(-50%); content:""}
#lnb ul > li > a {display:block; padding-left:20px; line-height:59px; font-size:20px; font-weight:600}
#lnb ul > li > a:hover, #lnb ul > li > a.on {background:#f2ecff; color:#9744fd}

#contents {padding:40px 30px 100px 30px; border-left:1px solid #e3e3e3}
.inner-wrap.no-wrap #contents {margin:0 auto; padding-left:0; padding-right:0; width:970px; border-left:none}

#footer {width:100%; background:#555; color:#fff}
#footer .link {display:block; padding:14px 0 13px 0; border-bottom:2px solid #676767}
#footer .link a {display:inline-block; color:#ccc; font-size:16px; font-weight:600}
#footer .link a.policy {color:#46e6ff}
#footer .link a + a {margin-left:70px}
#footer .f-btm {display:table; padding:30px 0 45px 0}
#footer .f-btm .logo {display:table-cell; width:120px; vertical-align:top}
#footer .f-btm .copyright {display:table-cell; font-size:14px; color:#ccc; vertical-align:top}
#footer .f-btm .copyright .addr {display:block; margin-bottom:5px}
#footer .f-btm .copyright .addr em {position:relative; display:inline-block; padding-left:30px}
#footer .f-btm .copyright .addr em:before {position:absolute; left:12px; top:4px; display:block; width:2px; height:12px; background:#9c9c9c; content:""}

/* sub page */
h2 {margin-bottom:40px; padding-left:40px; line-height:30px; color:#333; font-size:26px; font-weight:600}
h2.ty2 {font-size:30px; text-align:center}
h2.board {background:url('/images/gasarang/admin/ico-h2-board.png') 0 0 no-repeat}
h2.org {background:url('/images/gasarang/admin/ico-h2-org.png') 0 0 no-repeat}
#contents h3 {display:block; margin:40px 0 20px; padding-left:25px; background:url('/images/gasarang/admin/ico-h3.png') 0 4px no-repeat; font-size:20px; font-weight:600; color:#333}
.sub-top {display:table; width:100%; height:200px; background:linear-gradient(to right, #d3f1f6, #ede7ff)}
.sub-top .inner {position:relative; display:table-cell; padding:0; height:100%; text-align:center; vertical-align:middle}
.sub-top .inner:after {display:block; position:absolute; right:0; bottom:0; width:419px; height:200px; background:url('/images/gasarang/admin/bg-sub-top-right.png') 0 0 no-repeat; content:""}
.sub-top .inner:before {display:block; position:absolute; left:0; bottom:0; width:214px; height:135px; background:url('/images/gasarang/admin/bg-sub-top-left.png') 0 0 no-repeat; content:""}
.sub-top .title, .sub-top p {position:relative; z-index:1}
.sub-top .title {display:block; margin-bottom:15px; font-size:32px; font-weight:800}
.sub-top p {font-size:16px; color:#666}
.location {height:41px; line-height:40px; border-bottom:1px solid #e3e3e3; background:#fff}
.location span, .location strong {position:relative; display:inline-block; font-size:14px; color:#999}
.location span + span, .location span + strong {padding-left:20px}
.location span + span:before, .location span + strong:before {position:absolute; left:5px; top:0; display:block; color:#999; content:">"}
.location .home {padding-left:23px; background:url('/images/gasarang/admin/ico-home.png') 0 9px no-repeat}
.location strong {color:#333; font-weight:600}

/* popup */
.dimm {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999}
.popup {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:600px; background:#fff; z-index:1000}
.popup.blank {position:relative; left:0; top:0; transform:translate(0, 0)}
.popup .tit-pop {display:block; height:60px; line-height:60px; padding:0 40px 0 20px; background:#a65dff; color:#fff; font-size:20px; font-weight:600}
.popup .pop-cont {padding:30px 20px; border:1px solid #ccc; border-top:none}
.popup .pop-cont.scroll-y {overflow-y:auto; max-height:90vh}
.popup .pop-cont .txt {line-height:34px; font-size:16px}
.popup .pop-btn-close {position:absolute; right:20px; top:20px; display:block; width:18px; height:18px; line-height:0; background:url('/images/gasarang/admin/btn-wh-close.png') 0 0 no-repeat; font-size:0}
.popup .btn-group {margin-top:30px; text-align:center}

/* datepicker */
.ui-datepicker {z-index:2001 !important;}
.ui-datepicker .ui-datepicker-title select {display:inline-block; width:40%; height:28px; vertical-align: middle; margin:0 4px;}
.ui-datepicker-trigger {width:40px; height:50px; margin:0 0 0 -7px; padding:0; font-size:0; line-height:0; vertical-align:top; border:1px solid #999; border-left:none; border-top-right-radius:5px; border-bottom-right-radius:5px; background:#fff url('/images/gasarang/common/ico/datepicker-cal.png') center center no-repeat;}
.datepicker {display:inline-block; width:120px; height:40px; padding:0 5px; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:'suit', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker[readonly] {background-color:#f5f5f5; border-width:1px; !important;}
.datepicker.v2 {background:#fff; border-right:none}
.datepicker::-ms-clear {display: none;}
.datepicker::-webkit-input-placeholder {color:#cacaca !important;}
.datepicker:-ms-input-placeholder {color:#cacaca !important;}
.datepicker-month::-webkit-input-placeholder {color:#cacaca !important;}
.datepicker-month::-ms-input-placeholder {color:#cacaca !important;}
.datepicker-change {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker-change::-ms-clear {display: none;}
.datepicker-month {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker-month::-ms-clear {display: none;}
.ui-datepicker-current,
.onlyMonth .ui-datepicker-calendar {display:none;}
.onlyMonth .ui-datepicker-buttonpane {margin:0; border:0; overflow:hidden;}
.onlyMonth .ui-datepicker-title select {height:33px;}
.onlyMonth .ui-datepicker-prev, .onlyMonth .ui-datepicker-next {top:7px;}
.datepicker-year {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.datepicker-year::-ms-clear {display: none;}
.datepicker.through,
.datepicker-month.through {text-decoration:line-through;}
.date-picker {display:inline-block; width:90px; height:40px; padding:0 5px; border-radius:0 !important; border:1px solid #ccc; border-width:1px 0 1px 1px; vertical-align: middle; font-family:NanumGothic, '나눔고딕', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.date-picker::-ms-clear {display: none;}

/* button */
a[class|="btn"]:hover, a[class|="btn"]:focus {text-decoration:none !important}
.btn-file-wrp {line-height:initial}
.btn-file-wrp .file-btn {position:relative; display:inline-block; width:100px; height:36px}
.btn-file-wrp .file-btn input[type="file"] {position:absolute; right:0; top:0; width:100px; height:36px; opacity:0; z-index:1; cursor:pointer}
.btn-file-wrp .file-btn input[type="file"]:focus + button {border:1px dotted #666}
.btn-file-wrp .file-btn button {position:absolute; right:0; top:0}
.btn-file-wrp .file-list {display:block; line-height:36px; vertical-align:top}
.btn-file-wrp .file-list p {margin-top:5px; line-height:24px; color:#1558d6; font-size:16px; text-decoration:underline}
.btn-file-wrp .file-list button {display:inline-block; margin-left:5px; width:24px; height:24px; border:1px solid #ccc; border-radius:5px; background:#fff url('/images/gasarang/admin/btn-delete.png') center center no-repeat; box-shadow:1px 1px 1px rgba(0,0,0,0.1); vertical-align:middle}

.btn-group {margin-top:30px; text-align:right}
.btn-group:after {display:block; clear:both; content:""}
.btn-group a, .btn-group button {min-width:100px; border-radius:5px}
.btn-group button + button, .btn-group a + a, .btn-group button + a, .btn-group a + button {margin-left:8px}
.btn-h50 {display:inline-block; padding:0 15px; height:50px; line-height:48px; border:1px solid #ccc; background:#fff; font-size:16px; font-weight:600; color:#333; text-align:center}
.btn-h36 {display:inline-block; padding:0 15px; height:36px; line-height:34px; border:1px solid #999; border-radius:5px; background:#fff; font-size:14px; color:#333; text-align:center}
.btn-h34 {display:inline-block; height:34px; line-height:32px; border:1px solid #ccc; background:#fff; font-size:14px; font-weight:600; color:#333; text-align:center}
.btn-h34.rnd {padding:0 20px; border-radius:17px}
.b-rnd5 {border-radius:5px !important}
.b-rnd0 {border-radius:0 !important}
.b-br-gray {border-color:#666}
.b-purple {border:1px solid #9744fd !important; background:#9744fd !important; color:#fff !important}
.b-line-pur {border:1px solid #9744fd; background:#fff; color:#9744fd !important; }

/* ico */
i.ico-set {display:inline-block; margin-right:10px; background-image:url('/images/gasarang/admin/icoset-admin.png'); background-repeat:no-repeat}
i.notice {width:20px; height:20px; background-position:0 0; vertical-align:-3px}
i.data {width:21px; height:15px; background-position:0 -40px}
i.faq {width:22px; height:19px; background-position:0 -80px; vertical-align:-3px}
i.statistics {width:22px; height:22px; background-position:0 -120px; vertical-align:-5px}
.on i.notice {background:url('/images/gasarang/admin/icoset-admin.png') -20px 0px no-repeat}
.on i.data {background:url('/images/gasarang/admin/icoset-admin.png') -20px -40px}
.on i.faq {background:url('/images/gasarang/admin/icoset-admin.png') -20px -80px}
.on i.statistics {background:url('/images/gasarang/admin/icoset-admin.png') -20px -120px no-repeat}
.pdf-down {padding-left:30px; width:20px; height:20px; background:url('/images/gasarang/admin/ico-download.png') 0 0 no-repeat; text-decoration:underline !important; color:#1558d6 !important}
.ico-chk {display:inline-block; padding-left:20px; background:url('/images/gasarang/admin/ico-chk.png') 0 4px no-repeat; font-size:16px; color:#333}

/* radio, checkbox */
.chk-wrap {overflow:hidden; margin-left:-20px}
.chk-wrap > li {position:relative; float:left; margin-left:20px; height:26px}
.chk-wrap > li input {position:relative; left:0; top:0; opacity:0}
.chk-wrap > li input + label {margin-left:5px; font-size:16px; color:#333}
.chk-wrap > li input[type="radio"] + label:before {display:block; position:absolute; left:-1px; top:4px; width:22px; height:22px; background:url('/images/gasarang/admin/ico-radio.png') 0 0 no-repeat; content:""}
.chk-wrap > li input[type="radio"]:checked + label:before {background:url('/images/gasarang/admin/ico-radio.png') 0 -22px no-repeat}
.chk-wrap > li input[type="checkbox"] + label:before {display:block; position:absolute; left:-1px; top:4px; width:22px; height:22px; background:url('/images/gasarang/admin/ico-checkbox.png') 0 0 no-repeat; content:""}
.chk-wrap > li input[type="checkbox"]:checked + label:before {background:url('/images/gasarang/admin/ico-checkbox.png') 0 -22px no-repeat}
label.input-notxt {position:relative; display:block; width:100%; height:100%}
.input-notxt input {opacity:0}
.input-notxt .circle {position:absolute; left:50%; top:0; display:block; width:22px; height:22px; cursor:pointer; transform:translateX(-50%); content:""}
.input-notxt input[type="radio"] + .circle {background:url('/images/gasarang/admin/ico-radio.png') 0 0 no-repeat}
.input-notxt input[type="radio"]:checked + .circle {background:url('/images/gasarang/admin/ico-radio.png') 0 -22px no-repeat}
.input-notxt input[type="checkbox"] + .circle {background:url('/images/gasarang/admin/ico-checkbox.png') 0 0 no-repeat}
.input-notxt input[type="checkbox"]:checked + .circle {background:url('/images/gasarang/admin/ico-checkbox.png') 0 -22px no-repeat}

/* tab */
.tab {margin-bottom:20px; overflow:hidden}
.tab > li {float:left; height:54px; text-align:center}
.tab > li > a {display:inline-block; padding:0 20px; line-height:52px; height:54px; border:1px solid #999; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#fff; font-size:20px; font-weight:600}
.tab > li > a.on {border-color:#9744fd; background-color:#9744fd; color:#fff}

/* table */
table td a:hover {text-decoration:underline !important}

.board-count {margin:40px 0 15px}
.board-count:after {display:block; clear:both; content:""}
.board-count .count {float:left; margin-top:12px; font-size:16px; color:#666}
.board-count .count span {color:#9745fd; font-weight:600}

.tbl-list {border-top:1px solid #909090}
.tbl-list tr {border-bottom:1px solid #efefef}
.tbl-list tr:hover {background:#f7f3ff}
.tbl-list th, .tbl-list td {padding:17px 0 17px 30px; line-height:26px; color:#333; font-size:16px}
.tbl-list th {background:#fafafa; color:#666; font-size:18px; font-weight:600}
.tbl-list.a-c th, .tbl-list.a-c td {padding: 17px 5px; text-align:center}
.tbl-list td .ico-noti {padding-left:25px; background:url('/images/gasarang/common/ico/ico-notice-pur.png') 0 1px no-repeat}

.tbl-detail {border-top:1px solid #909090}
.tbl-detail th, .tbl-detail td {padding:18px 0 18px 30px; line-height:26px; border-bottom:1px solid #efefef; color:#333; font-size:16px; text-align:left}
.tbl-detail th {background:#fafafa; color:#666; font-weight:600}
.tbl-detail td {padding-right:30px; background:#fff}

.tbl-detail.board thead .title {background:#fff; font-size:18px; color:#333}
.tbl-detail.board tbody tr.board-cont div {min-height:400px}

table + .txt-info {margin-top:7px}
.txt-info {padding-left:25px; background:url('/images/gasarang/admin/ico-info.png') 0 3px no-repeat; font-size:16px; color:#666}
.txt-info.sm {padding-left:22px; line-height:20px; background-size:16px; background-position:0 1px; font-size:14px}
.txt-info.pur {background:url('/images/gasarang/admin/ico-info-pur.png') 0 3px no-repeat}
.txt-noti {padding-left:25px; background:url('/images/gasarang/admin/ico-notice.png') 0 3px no-repeat; font-size:16px; color:#666}

/* box */
.box-gray {padding:10px; border-radius:5px; background:#f5f5f5}
.box-info {margin-bottom:40px; padding:25px 30px; border:1px solid #e1e1e1; border-radius:10px; background:#fafafa}
.box-info .title {display:block; margin-bottom:10px; margin-left:-10px}
.box-info .txt-info {line-height:24px; background-position:0 1px; color:#333; font-size:18px; font-weight:600}
.box-info p.txt, .box-info .txt li {line-height:24px; font-size:16px}
.box-info .txt + .txt {margin-top:10px}

/* list */
.dot-list > li {position:relative; padding-left:10px; line-height:24px; font-size:16px}
.dot-list > li:before {position:absolute; left:0; top:9px; display:block; width:4px; height:4px; background:#666; content:""}
.dot-list.fs-18 > li {line-height:34px; font-size:18px}
.dot-list.fs-18 > li:before {top:14px}

/* prev, next */
.prev-next {border-top:1px solid #efefef}
.prev-next > li {position:relative; padding-left:180px; height:60px; border-bottom:1px solid #efefef}
.prev-next > li .tit {position:absolute; left:0; top:0; display:block; padding-left:30px; width:180px; height:59px; line-height:59px; background:#fafafa; font-size:16px; color:#666}
.prev-next > li .tit span {display:inline-block; padding-right:28px; background-image:url('/images/gasarang/admin/ico-prev-next.png'); background-repeat:no-repeat}
.prev-next > li .tit span.prev {background-position:right 24px}
.prev-next > li .tit span.next {background-position:right -36px}
.prev-next > li .link {display:block; padding:0 30px; line-height:60px; color:#333; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* pagination */
.pagination {margin-top:30px; text-align:center}
.pagination a, .pagination strong {display:inline-block; width:36px; height:36px; line-height:34px; border:1px solid #ccc; border-radius:10px; background:#fff; font-size:16px; font-weight:400; color:#666; text-align:center; vertical-align:top}
.pagination a + a, .pagination strong + a, .pagination a + strong {margin-left:10px}
.pagination a:hover, .pagination a:focus {text-decoration:none !important}
.pagination .control {line-height:0; background:#fff url('/images/gasarang/common/btn/btn-paging.png'); background-repeat:no-repeat; font-size:0}
.pagination .first {background-position:center 0 no-repeat}
.pagination .prev {background-position:center -36px}
.pagination .next {background-position:center -72px}
.pagination .last {background-position:center -108px}
.pagination .active {border-color:#9745fd; background-color:#9745fd; color:#fff}

/* login */
.login-wrp {position:relative; padding-left:265px; margin:0 auto; width:665px; background:url('/images/gasarang/bg-login.png') 0 0 no-repeat}

/* partnership benefit */
.coupon-title {text-align:center}
.coupon-title .logo {width:87px}
.coupon-title .text {margin-top:20px; width:280px}
.coupon-title .name {display:flex; margin-top:24px; height:90px; justify-content:center}
.coupon-title .name .img-area {margin-left:40px; width:90px; align-self:center}
.coupon-title .name .img-area img {max-width:90px; max-height:90px}
.coupon-title .name .img-qr {margin-left:40px; align-self:center}
.coupon-title .name .img-qr img {max-width:90px; max-height:90px}
.coupon-title .name p {max-width:90px; color:#333; font-size:20px; font-weight:800; align-self:center}
.coupon-dtl {margin-top:30px; padding-top:30px; border-top:2px dashed #ccc}
.coupon-dtl > li {display:flex; margin-bottom:10px; line-height:24px; font-size:16px; color:#333; word-break:break-word}
.coupon-dtl > li .tit {display:block; margin-right:20px; width:70px; flex-shrink:0; height:26px; line-height:26px; border-radius:13px; background:#f7f3ff; color:#9744fd; font-weight:600; text-align:center}