@charset "utf-8";

/****************************************************************************************************************************************
게시판 스타일 시작
*****************************************************************************************************************************************/
.bo-wrap {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center;}
.bo-left {position: relative; margin:0 auto; padding:0; width: 25%;}
.bo-right {position: relative; margin:0 auto; padding:0 0 80px 50px; width:75%;}

/* left-menu */
ul.left-menu {position: relative; margin:0 auto; padding:0; width: 100%;}
ul.left-menu > li {position: relative; margin:0 0 5px 0; padding:15px 25px; width: 100%; text-align: left; font-size:15px; font-weight: 600; color:#9e6bbc; background: rgba(0,0,0,0.6); transition: all 0.3s; cursor: pointer;}
ul.left-menu > li::before {content: '\ea6e'; font-family: 'remixicon'; position: absolute; top:18px; right:25px; color:#9e6bbc;}

ul.left-menu > li.active {color:#fff; background: #8601f6;}
ul.left-menu > li.active::before {color:#fff;}


@media (hover: hover) and (pointer: fine) {
    ul.left-menu > li:hover {background:rgba(128,130,145,0.45);}
    ul.left-menu > li.active:hover {color:#fff; background: #8601f6;}
    ul.left-menu > li.active::before:hover {color:#fff;}
}

/* boTop-menu */
ul.boTop-menu {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center;}
ul.boTop-menu > li {position: relative; margin:0; padding:20px 30px; font-size: 16px; font-weight: 600; color:#697788; border-bottom:2px transparent solid; cursor: pointer;}
ul.boTop-menu > li.active {margin-bottom:-2px; color:#fff; border-bottom:2px #7a25ff solid;}

/* 게시판타이틀 */
.bo-tit {margin:0 0 30px auto; padding:0; width: 100%; text-align: left; font-size:24px; font-weight: 500; color:#868686;}

/* 테이블스타일 */
.list-table {position: relative; width: 100%;}
.list-table tr:nth-child(odd) th,
.list-table tr:nth-child(odd) td {background: #0d121b;}
.list-table tr:nth-child(even) th ,
.list-table tr:nth-child(even) td {background: #161d26;}

.list-table th,
.list-table td {padding:15px 10px; text-align: left; font-size:16px; color: #becde3; border: 1px solid #000;}
.list-table th {width:25%; font-size: 14px; font-weight: 500; color: #fff;}

.list-table td > p {font-size: 12px;}
.list-table td > input {margin:10px auto; padding:0 5px; width:200px; line-height:32px; text-align: left; font-size: 15px; font-weight: 500; color: #0a0b0d; background: #fff; border: 2px solid #ededed; border-top:2px #999 solid; border-left:2px #999 solid; border-radius:5px;}
.list-table td > input.link-input { width:250px;}

/* money-btns */
ul.money-btns {position: relative; margin:5px auto 0 auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start;}
ul.money-btns > li {position: relative;}
ul.money-btns > li > a {display: block; margin:4px 2px; padding:5px 10px; text-align: center; font-weight: 900; color: #5b7bfb; background:#fff; border:3px #5b7bfb solid; border-radius: 25px;}
ul.money-btns > li > a.btn-reset {color: #a2b2c9; border:#a2b2c9 solid; }

.bo-btn {position: relative; margin:20px auto; padding:0; width: 100%; text-align: right;}
.bo-btn > .btn-indent {margin:0 auto; padding: 12px 20px; font-size: 13px; font-weight: 600; color: #184341; background: #e6ecef; border-radius: 25px;} 
.bo-btn > .btn-purple {margin:15px auto; padding:20px 40px; font-size:15px; font-weight:500; color:#fff; background: #7a25ff; border-radius: 3px;}

.btn-inquire {margin:0 2px; padding: 12px 20px; font-size: 12px; font-weight: 600; color: #184341; background: #e6ecef; border-radius: 25px;}
.btn-linkopen {margin:10px auto; padding:0 15px; line-height:32px; font-weight: 600; color:#fff; background: #22c083; border-radius: 3px;}


@media (hover: hover) and (pointer: fine) {
    ul.money-btns > li > a:hover {color:#fff; background: #5b7bfb;}
    ul.money-btns > li > a.btn-reset:hover {color: #fff; background:#2c3c48; border:3px #2c3c48 solid;}
    .bo-btn > .btn-indent:hover {color: #eff3f5; background: #184341; border-radius: 25px;} 
    .bo-btn > .btn-purple:hover { background: #5700e0;}
    .btn-inquire:hover {color: #fff; background: #184341;}
    .btn-linkopen:hover {background: #1a8b5f;}
}

/* 테이블스타일 */
.list-table-2 {position: relative; margin-bottom:40px; width: 100%;}
.list-table-2 tbody tr:nth-child(odd) td {background: #161d26;}
.list-table-2 tbody tr:nth-child(even) td {background: #0d121b;}

.list-table-2 th,
.list-table-2 td {padding:15px 10px; text-align: center; font-size:16px; color: #becde3; border: 1px solid #000;}
.list-table-2 th {font-size: 14px; font-weight: 500; color:#fff; background: #0d121b; border: 1px solid #000;}


/****************************************************************************************************************************************
글쓰기 시작
*****************************************************************************************************************************************/
.bo-write {position: relative; margin:0 auto; padding:60px 60px; width: 100%; background: rgba(0,0,0,0.6); border-top:10px #8d65e9 solid; border-radius: 10px; box-shadow: 0 14px 55px 0 rgba(208, 202, 239, .3); overflow: hidden;}
.write-tit {margin:0 auto 10px auto; padding:0; width: 100%; text-align: left; font-size:28px; font-weight: 700; color:#45485f;}

.write-table {position: relative; width: 100%;}
.write-table td {padding:10px 10px; width: 50%;}

.write-table td > input,
.write-table td  > select,
.write-table td > textarea {resize: none; padding: 15px 10px; width: 100%; font-size: 16px; color: #ababab; background:#171d26; border:none;}
.write-table td > textarea {height: 200px;}
.write-table td > textarea:focus {outline: none;}

.write-table td  > select {appearance:none;
    background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #DDD, #DDD);
    background-position: calc(100% - 25px) calc(1.15em + 9px), calc(100% - 20px) calc(1.15em + 9px), calc(100% - 3em) 0.75em;
    background-size: 6px 6px, 6px 6px, 1px 2.25em;
    background-repeat: no-repeat;
}

.btn-full {margin:10px 10px; padding:18px 0; width: calc(100% - 20px); text-align: center; font-size: 15px; font-weight: 500; color:#fff; background: #7a25ff; border-radius: 4px;}

@media (hover: hover) and (pointer: fine) {
    .btn-full:hover {background: #5700e0;}
}


/****************************************************************************************************************************************
faq 시작
*****************************************************************************************************************************************/
.faq {position: relative; margin:60px auto 0 auto; padding:0; width: 100%;}
ul.faq-list {position: relative; margin:0 auto; padding:0; width: 100%;}
ul.faq-list li {position:relative; display: block; margin:15px auto; transition: transform 0.5s ease;}

.question {position: relative; padding:20px 20px; text-align: left; font-size: 17px; font-weight: 700; background: rgba(0,0,0,0.6); border-radius: 5px; cursor: pointer;}
.question::after {content: '\ea4e'; font-family: "remixicon"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; transition: 0.2s ease;}
.faq-date {position: absolute; right:60px;}
.notice-qu {background: rgba(0,0,0,0.6);}

.answer {position: relative; display: none; background: #22272f;}
.answer > p {position: relative; margin:0 auto; padding:25px 25px; text-align: left; font-size: 15px; font-weight:500; color:#adadad; background: #22272f;}
.answer > pre {position: relative; margin:0 auto; padding:25px 25px; text-align: left; white-space: pre-wrap; font-size: 15px; font-weight:500; color:#adadad; background:#22272f;}
.answer > pre::before {content: ''; display: block; position: absolute; top: -10px; width: 20px; height: 20px; background: #22272f; transform: skew(45deg, 135deg);}
.notice-an > pre::before {display: none;}
.open .question {color: #fff;}
.open .question::after {transform: rotate(180deg); top:31%;}


/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1195px) {
    .bo-wrap {flex-wrap: wrap;}
    .bo-left,
    .bo-right {padding:0; width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) {
    
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    .bo-left {margin-bottom:20px;}

    ul.boTop-menu {margin:0 auto 20px auto; flex-wrap: wrap;}
    ul.boTop-menu > li {margin:0 auto; padding:10px 0; width: calc(100% / 2); text-align: center; color:#697788; background: #000; border: 1px #eee solid;}
    ul.boTop-menu > li.active {color:#fff; background: #7a25ff; border-bottom: 1px #eee solid;}

    .bo-tit {margin:0 0 15px 0; font-size: 20px;}
    .list-table tr {position: relative; display: flex; flex-direction: column; align-items: stretch;}
    .list-table th,
    .list-table td {width: 100%;}
   
    .list-table td > input, 
    .list-table td > input.link-input {width: 100%;}
    .btn-linkopen {margin:0; width: 100%;}

    .bo-btn > .btn-purple {margin:0 auto 5px auto; padding:15px 0; width: 100%; text-align: center;}

    /* 글쓰기 게시판 */
    .bo-write {padding:40px 40px;}
    .write-tit {font-size: 20px;}
    .write-table tr {position: relative; display: flex; flex-direction: column; align-items: stretch;}
    .write-table td {padding:10px 0; width: 100%;}

    .btn-full {margin:10px 0; width: 100%;}

    /* faq */
    ul.faq-list {margin:0 0 40px 0;}
    .question {padding: 40px 15px 15px 15px;}
    .faq-date {right: unset; display:block; margin-top: -48px; text-align: left; font-size: 13px;}
}/* 미디어쿼리문 끝 */

@media (max-width:599px) {
    /* 글쓰기 게시판 */
    .bo-write {padding:40px 20px;}    
}/* 미디어쿼리문 끝 */