/* container */
body {position:relative; min-height:100vh; background:#010103; position:relative;}
body:before {position:absolute; left:0; top:0; width:100%; height:385px; content:""; background:url('../images/bg_top.png') no-repeat top center / cover; z-index:2;}
body.sub:before {background-image:url('../images/bg_circle.png'); height:570px; background-position:center;}
body.sub:after {z-index:2; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; height:100%; max-width:1582px; background:url('../images/bg_ball4.png') no-repeat center 50px / contain; content:"";}
body.sub.bg-1:after {background-image:url('../images/bg_ball4.png');}
body.sub.bg-2:after {background-image:url('../images/bg_ball4_2.png');}
body.sub.bg-3:after {background-image:url('../images/bg_ball4_3.png');}
body.sub.bg-4:after {background-image:url('../images/bg_ball4_4.png');}
body.sub.bg-5:after {background-image:url('../images/bg_ball4_5.png');}
body.sub.bg-6:after {background-image:url('../images/bg_ball4_6.png');}
body.sub.bg-7:after {background-image:url('../images/bg_ball4_7.png');}
body.sub.bg-8:after {background-image:url('../images/bg_ball4_8.png');}
body.sub.bg-9:after {background-image:url('../images/bg_ball4_9.png');}
body.sub.bg-10:after {background-image:url('../images/bg_ball4_10.png');}
.container {width:100%; max-width:1180px; padding:0 15px; margin:0 auto;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
/*
body {background:#010103 url('../images/bg_m.png') no-repeat left top / cover;}
*/
body:before {height:150px; background-position:left center;}
body.sub:before {height:150px; background-image:url('../images/bg_top.png'); background-position:left center;}
body.sub:after {background-image:url('../images/bg_ball4_m.png') !important; background-position:top center; background-size:80% auto;}
.is-pc {display:none;}
.is-m {display:block;}
}

/* header */
header {position:relative; z-index:1000; padding:10px 0;}
header .container {max-width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:0 27px;}
header .header-logo h1 a img {width:100px;}
header .header-menu {flex:1; min-width:0;}
header .header-menu .menu-head {display:none;}		  
header .header-menu .menu-body {display:flex; flex-wrap:wrap; align-items:center; margin-left:100px;}
header .header-menu .menu-body .menu-body-member {order:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
header .header-menu .menu-body .menu-body-member ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-right:30px;}
header .header-menu .menu-body .menu-body-member ul:first-of-type {background:rgba(255,255,255,0.3); border-radius:50px; padding:5px 24px;}
header .header-menu .menu-body .menu-body-member ul:last-of-type {margin:0;}
header .header-menu .menu-body .menu-body-member ul li {display:flex; flex-wrap:wrap; align-items:center;}
header .header-menu .menu-body .menu-body-member ul li:after {display:inline-block; content:""; width:1px; height:10px; background:#878E98; margin:0 12px;}
header .header-menu .menu-body .menu-body-member ul li:last-of-type:after {display:none;}
header .header-menu .menu-body .menu-body-member ul li a {color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-menu .menu-body .menu-body-member ul li a em {height:25px; padding:0 12px; border-radius:2px; background:linear-gradient(#3177FB,#FF30FE); font-size:14px; color:#fff; margin-right:8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; display:none;}
header .header-menu .menu-body .menu-body-member ul li.point a:before {display:inline-block; content:""; width:24px; height:24px; margin-right:4px; background:url('../images/icon_point.png') no-repeat center / cover;}
header .header-menu .menu-body .menu-body-member ul li.message a:before {display:inline-block; content:""; width:24px; height:24px; margin-right:4px; background:url('../images/icon_message.png') no-repeat center / cover;}
header .header-menu .menu-body .menu-body-member ul li.login {margin-right:15px;}
header .header-menu .menu-body .menu-body-member ul li.login:after {display:none;}
header .header-menu .menu-body .menu-body-member ul li.register a {justify-content:center; height:27px; border-radius:50px; background:#404040; border:1px solid #595959; padding:0 12px;}
header .header-menu .menu-body .menu-body-category {order:1; flex:1; min-width:0;}
header .header-menu .menu-body .menu-body-category ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-right:60px;}
header .header-menu .menu-body .menu-body-category ul li {position:relative; z-index:100;}
header .header-menu .menu-body .menu-body-category ul li button.link {display:none;}
header .header-menu .menu-body .menu-body-category ul li a.link {padding:0 60px; height:60px; line-height:60px; font-size:18px; font-weight:500; color:#fff;}
header .header-menu .menu-body .menu-body-category ul li a.link:hover {color:#AADA49;}
header .header-menu .menu-body .menu-body-category ul li.active a {color:#AADA49;}
header .header-menu .menu-body .menu-body-category ul li dl {display:none; position:absolute; background:#131314; width:200px; left:50%; transform:translateX(-50%); padding:20px 0;}
header .header-menu .menu-body .menu-body-category ul li dl dd {margin:0 0 10px;}
header .header-menu .menu-body .menu-body-category ul li dl dd:last-of-type {margin:0;}
header .header-menu .menu-body .menu-body-category ul li dl dd a {display:block; text-align:center; font-size:14px; color:#fff;}
header .header-menu .menu-body .menu-body-category ul li dl dd a:hover {font-weight:500; color:#fff;}
header .header-menu .menu-body .menu-body-category ul li:hover a.link {font-weight:bold;}
header .header-menu .menu-body .menu-body-category ul li:hover dl {display:block;}
header .header-bar {display:none;}
@media (max-width:1600px){
header .header-menu .menu-body .menu-body-category ul {margin-right:30px;}
header .header-menu .menu-body .menu-body-category ul li a.link {padding:20px 30px;}
}
@media (max-width:1300px){
header .header-menu .menu-body {margin-left:40px;}
header .header-menu .menu-body .menu-body-category ul {margin-right:40px;}
header .header-menu .menu-body .menu-body-category ul li a.link {padding:20px 10px;}
}   
@media (max-width:991px){
header {padding:20px 0;}
header .container {padding:0 15px;}
header .header-logo h1 a img {margin:0; width:60px;}
header .header-menu {flex:none; pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; transition:all ease 0.5s;}
header .header-menu .inner {pointer-events:none; opacity:0; position:absolute; right:-50px; top:0; width:250px; height:100%; background:#000; overflow-y:auto; transition:all ease 0.5s; padding:15px;}
header .header-menu .menu-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:0 0 15px; margin:0 0 15px; border-bottom:1px solid #131314;}
header .header-menu .menu-head img {width:60px;}
header .header-menu .menu-head a {display:block; font-size:0; width:22px; height:22px; position:relative;}
header .header-menu .menu-head a:after {position:absolute; left:0; top:10px; width:100%; height:2px; background:#fff; content:""; transform:rotate(45deg);}
header .header-menu .menu-head a:before {position:absolute; left:0; top:10px; width:100%; height:2px; background:#fff; content:""; transform:rotate(-45deg);}
header .header-menu .menu-body {margin-left:0; display:block;}
header .header-menu .menu-body .menu-body-member {order:1; width:100%;}
header .header-menu .menu-body .menu-body-member ul {width:100%; margin:0; order:2; justify-content:center;}
header .header-menu .menu-body .menu-body-member ul:last-of-type {margin:0 0 10px; order:1;}
header .header-menu .menu-body .menu-body-member ul li a em {font-size:10px; height:20px; padding:0 8px;}
header .header-menu .menu-body .menu-body-member ul li.message a:before {width:14px; height:10px;} 
header .header-menu .menu-body .menu-body-category {margin-right:0; order:2; width:100%;}
header .header-menu .menu-body .menu-body-category ul {display:block; margin-right:0;}
header .header-menu .menu-body .menu-body-category ul li {border-bottom:1px solid #2b2b2b;}
header .header-menu .menu-body .menu-body-category ul li a.link {display:none;}
header .header-menu .menu-body .menu-body-category ul li a.link.more {padding:0; display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:500; color:#8A8A8A; height:50px; width:100%;}
header .header-menu .menu-body .menu-body-category ul li a.link.more:before {display:inline-block; content:""; width:28px; height:28px; margin:0; margin-right:10px; background-size:cover; background-position:center;}
header .header-menu .menu-body .menu-body-category ul li button.link {position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; font-size:16px; font-weight:500; color:#8A8A8A; height:50px; width:100%;}
header .header-menu .menu-body .menu-body-category ul li button.link:after {position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-block; content:""; width:20px; height:20px; background:url('../images/icon_select_off.png') no-repeat center / cover;}  
header .header-menu .menu-body .menu-body-category ul li button.link:before {display:inline-block; content:""; width:28px; height:28px; margin-right:10px; background-size:cover; background-position:center;}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(1) button.link:before {background-image:url('../images/icon_header_cate_01.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(2) button.link:before {background-image:url('../images/icon_header_cate_02.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(3) button.link:before {background-image:url('../images/icon_header_cate_01.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(4) button.link:before {background-image:url('../images/icon_header_cate_04.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(5) button.link:before {background-image:url('../images/icon_header_cate_05.png');}
header .header-menu .menu-body .menu-body-category ul li:hover dl {display:none;}	
header .header-menu .menu-body .menu-body-category ul li.active button.link {color:#fff;}
header .header-menu .menu-body .menu-body-category ul li.active button.link:after {transform:rotate(180deg) translateY(40%); background-image:url('../images/icon_select.png');}
header .header-menu .menu-body .menu-body-category ul li.active dl {width:100%; transform:none; display:block; position:static; background:#131314;}
header .header-menu .menu-body .menu-body-category ul li.active dl dd a {text-align:left; display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#fff;}
header .header-menu .menu-body .menu-body-category ul li.active dl dd a:before {display:inline-block; content:""; width:3px; height:3px; border-radius:50%; background:#fff; margin:0 5px;}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(1).active button.link:before {background-image:url('../images/icon_header_cate_on_01.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(2).active button.link:before {background-image:url('../images/icon_header_cate_on_02.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(3).active button.link:before {background-image:url('../images/icon_header_cate_on_03.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(4).active button.link:before {background-image:url('../images/icon_header_cate_on_04.png');}
header .header-menu .menu-body .menu-body-category ul li:nth-of-type(5).active button.link:before {background-image:url('../images/icon_header_cate_on_05.png');} 
header .header-bar {display:block;}
header .header-bar a {display:block; width:25px; height:20px; border:2px solid #fff; border-width:2px 0; position:relative; font-size:0;}
header .header-bar a:after {position:absolute; left:0; top:50%; transform:translateY(-50%); content:""; width:100%; height:2px; background:#fff;}
header.fixed .header-menu {pointer-events:inherit; opacity:1;}
header.fixed .header-menu .inner {pointer-events:inherit; opacity:1; right:0;}
}      

/* section */
section {position:relative; z-index:10; padding:50px 0;}
section > .container {position:relative; z-index:100;}
@media (max-width:991px){
section {padding:20px 0 35%;}
}

/* footer */
footer {padding:15px 0 50px; margin:0 auto; max-width:510px;}
footer a {height:50px; font-size:18px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; background:linear-gradient(to right,#3177FB,#FF30FE); color:#fff !important;}

/* inner-box */
.inner-box {max-width:400px; margin:0 auto;}

/* write-box */
.write-box > ul > li {margin:0 0 24px;}
.write-box > ul > li:last-of-type {margin:0;}
.write-box > ul > li > strong {display:block; margin:0 0 12px; font-size:18px; font-weight:500; color:#fff;}
.write-box > ul > li > p {display:flex; flex-wrap:wrap; align-items:center; height:40px; font-size:16px; padding:0 10px; color:#fff; font-weight:500; border-left:2px solid #fff;}
@media (max-width:991px){
.write-box > ul > li > strong {margin:0 0 10px; font-size:15px;}
}

/* title-box */
.title-box img {display:block; margin:0 auto 20px; width:100px;}
.title-box h2 {text-align:center; font-size:28px; font-weight:bold; color:#fff; margin:0 0 10px;}
.title-box p {text-align:center; font-size:18px; line-height:1.3; color:#fff;}
@media (max-width:991px){
.title-box img {width:70px; margin:0 auto 15px;}
.title-box h2 {font-size:22px;}
.title-box p {font-size:15px;}
}

/* input-box */
.input-box {display:flex; flex-wrap:wrap; align-items:center; border-radius:4px; border:1px solid #dedede; background:rgba(255,255,255,0.2);}
.input-box input {flex:1; min-width:0; background:none; height:50px; padding:0 14px; font-size:16px; color:#21252a;}
.input-box input::placeholder {color:#fff;}
.input-box a {height:40px; border-radius:4px; border:1px solid #dedede; background:#fff; font-size:16px; font-weight:700; padding:0 14px; color:#666; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-right:6px;}
.input-box.focus {border-color:#fff;}
.input-box.active {border-color:#fff;}
.input-box.focus input {color:#fff;}
.input-box.focus input::placeholder {color:#fff;}
.input-box.active input {color:#fff;}
.input-box.active input::placeholder {color:#fff;}
.input-box input[type=date] {color:#fff;}
.input-box input[type=date]::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.input-box.date {position:relative;}
.input-box.date:after {display:inline-block; content:""; width:24px; height:24px; background:url('../images/icon_date.png') no-repeat center / cover; margin:0 5px 0 10px;}
@media (max-width:991px){
.input-box input {height:45px; padding:0 10px; font-size:14px;}
.input-box a {padding:0 10px; font-size:13px; height:35px;}
.input-box input[type=date]:before {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; padding:0 14px; content:attr(data-placeholder); width:100%;}	
.input-box.focus input[type=date]:before {display:none;}
.input-box.active input[type=date]:before {display:none;}
}         

/* file-box */
.file-box {display:flex; flex-wrap:wrap; align-items:center; border-radius:4px; border:1px solid #dedede; background:rgba(255,255,255,0.2);}
.file-box p {flex:1; min-width:0; background:none; height:50px; line-height:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 14px; font-size:16px; color:#fff;}
.file-box label {cursor:pointer; color:#fff; font-size:15px; position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 15px;}
.file-box label input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
@media (max-width:991px){
.file-box p {height:45px; padding:0 10px; font-size:14px;}
.file-box label {font-size:14px; margin:0 10px;}
}

/* select-box */
.select-box {display:flex; flex-wrap:wrap; align-items:center; border-radius:4px; border:1px solid #dedede; background:rgba(255,255,255,0.2);}
.select-box select {flex:1; min-width:0; background:url('../images/icon_select.png') no-repeat calc(100% - 15px) center / 20px; height:50px; padding:0 40px 0 14px; font-size:16px; color:#fff;}
.select-box select option {background:#0E0E0E; color:#fff;}
.select-box.active {border-color:#fff;}
.select-box.active select {color:#fff;}
@media (max-width:991px){
.select-box select {height:45px; padding:0 30px 0 10px; font-size:14px; background-size:15px;}
}

/* check-box */
.check-box {position:relative; overflow:hidden;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap;}
.check-box label:before {display:inline-block; content:""; width:20px; height:20px; margin-right:10px; background:url('../images/icon_check.png') no-repeat center / cover;}
.check-box label p {flex:1; min-width:0; text-align:left; font-size:16px; line-height:1.3; color:#5e5e5e; word-break:keep-all; padding:7px 0 0;}
.check-box input:checked ~ label:before {background-image:url('../images/icon_check_on.png');}
.check-box.f0 label {font-size:0;}
.check-box.f0 label:before {margin:0 auto;}
@media (max-width:991px){
.check-box label:before {width:16px; height:16px; margin-right:5px;}
.check-box label p {font-size:14px; padding:2px 0 0;}
}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {border-radius:4px; height:50px; font-size:16px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0;}
.button-box .btn.radius {border-radius:50px;}
.button-box .btn.sm {height:40px; font-size:14px;}
.button-box .btn.delete:before {display:inline-block; content:""; width:20px; height:20px; margin-right:4px; background:url('../images/icon_delete.png') no-repeat center / cover;}
.button-box .btn.qna:before {display:inline-block; content:""; width:20px; height:20px; margin-right:4px; background:url('../images/icon_qna.png') no-repeat center / cover;}
.button-box .btn-gray {color:#fff; border:1px solid #fff; border:1px solid #fff;}
.button-box .btn-dark {background:#3b3d38; color:#fff; border:1px solid #3b3d38;}
.button-box .btn-blue {background:#70B32E; color:#fff; border:1px solid #70B32E;}
.button-box .btn-yellow {background:#d4d23b; color:#fff; border:1px solid #d4d23b;}
.button-box .btn-red {background:#e41f1f; color:#fff; border:1px solid #e41f1f;}
.button-box .btn-active {background:linear-gradient(to right,#A100FE,#E14ECA); color:#fff;}
.button-box .btn img {width:20px; height:20px; margin:0 5px 0 0;}
@media (max-width:991px){
.button-box .btn {height:45px; font-size:14px;}
.button-box .btn.sm {font-size:12px;}
.button-box .btn img {width:16px; height:16px; margin:0 3px 0 0;}
}

/* message-box */
.message-box p {font-size:14px; line-height:1.3; color:#FF0000; margin:4px 0 0;}
@media (max-width:991px){
.message-box p {font-size:12px;}
}

/* popup-box */
.popup-box {pointer-events:none; position:fixed; opacity:0; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999; transition:all ease 0.5s;}
.popup-box .box {pointer-events:none; opacity:0; transition:all ease 0.5s; padding:40px; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:calc(100% - 30px); max-width:560px; max-height:90%; overflow-y:auto; border-radius:12px; border:1px solid rgba(255,255,255,0.4); background:#0e0e0e;}
.popup-box .box.bottom {border:1px solid #858585; border-radius:15px 15px 0 0; top:auto; bottom:-20px; transform:translateX(-50%); width:100%; max-width:480px;}
.popup-box .popup-head {display:flex; flex-wrap:wrap; margin:0 0 40px;}
.popup-box .popup-head h2 {flex:1; min-width:0; padding-right:20px; font-size:28px; font-weight:bold; color:#fff;}
.popup-box .popup-head p {margin:8px 0 0; font-size:16px; font-weight:500; color:rgba(255,255,255,0.6);}
.popup-box .popup-head a {display:block; font-size:0; width:24px; height:24px; background:url('../images/icon_close.png') no-repeat center / 16px;}
.popup-box.fixed {pointer-events:inherit; opacity:1;}
.popup-box.fixed .box.active {pointer-events:inherit; opacity:1; top:50%;}
.popup-box.fixed .box.bottom.active {top:auto; bottom:0;}
@media (max-width:991px){
.popup-box .box {padding:20px;}
.popup-box .popup-head {margin:0 0 30px;}
.popup-box .popup-head h2 {font-size:20px;}
.popup-box .popup-head p {font-size:14px;}
}

/* table-box */
.table-box {overflow-x:auto; white-space:nowrap;}
.table-box table {table-layout:auto;}
.table-box table thead tr th {background:rgba(255,255,255,0.2); height:53px; font-size:18px; font-weight:500; color:#fff; padding:0 10px; border:1px solid rgba(255,255,255,0.4); border-width:1px 0;}
.table-box table thead tr th:first-of-type {border-left:1px solid rgba(255,255,255,0.4); border-radius:10px 0 0 10px;}
.table-box table thead tr th:last-of-type {border-right:1px solid rgba(255,255,255,0.4); border-radius:0 10px 10px 0;}
.table-box table tbody tr td {border-bottom:1px solid rgba(255,255,255,0.4); font-size:15px; color:#fff; padding:15px 10px;}
.table-box table tbody tr td.subject {width:400px;}
.table-box table tbody tr td a.subject {width:400px; display:block; text-align:left; font-size:15px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.table-box table tbody tr td input {appearance:auto; cursor:pointer; width:18px; height:18px;}
@media (max-width:991px){
.table-box {margin:0 -15px;}
.table-box table {margin-left:15px; padding-right:15px;}
.table-box table thead tr th {height:45px; font-size:14px;}
.table-box table tbody tr td {font-size:13px;}
.table-box table tbody tr td.subject {width:200px;}
.table-box table tbody tr td a.subject {width:200px; font-size:13px;}
}

/* paging-box */
.paging-box {margin:40px 0 0;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul li {margin:0 2px;}
.paging-box ul li a {border:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:27px; height:27px; font-size:14px; color:#fff;}
.paging-box ul li.active a {background:#AADA49; border-radius:50%; font-weight:bold;}
.paging-box ul li.pg a {font-size:0;}
.paging-box ul li.pg.first a {background:url('../images/icon_paging_first.png') no-repeat center / 7px auto;}
.paging-box ul li.pg.prev a {background:url('../images/icon_paging_prev.png') no-repeat center / 4px auto;}
.paging-box ul li.pg.next a {background:url('../images/icon_paging_next.png') no-repeat center / 4px auto;}
.paging-box ul li.pg.last a {background:url('../images/icon_paging_last.png') no-repeat center / 7px auto;}
@media (max-width:991px){
.paging-box ul li a {width:23px; height:23px; font-size:13px;}
.paging-box ul li.mo {display:none;}
}

/* textarea-box */
.textarea-box textarea {display:block; width:100%; height:230px; background:rgba(255,255,255,0.2); border:1px solid #dedede; border-radius:4px; padding:20px; font-size:16px; line-height:1.3; color:#fff;}
.textarea-box textarea::placeholder {color:#fff;}
@media (max-width:991px){
.textarea-box textarea {height:150px; padding:10px; font-size:14px;}
}

/* board-view-box */
.board-view-box .view-head {border:1px solid rgba(255,255,255,0.4); padding:15px 30px; border-width:1px 0;}
.board-view-box .view-head em {display:inline-block; padding:6px 20px; border-radius:50px; border:1px solid rgba(255,255,255,0.4); color:#fff; font-size:16px;}
.board-view-box .view-head h3 {font-size:18px; font-weight:500; line-height:1.3; word-break:keep-all; color:#fff; margin:12px 0 0;}
.board-view-box .view-head dl {margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.board-view-box .view-head dl dd {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; color:rgba(255,255,255,0.7);}
.board-view-box .view-head dl dd:after {display:inline-block; content:""; width:1px; height:12px; margin:0 12px; background:#D9D9D9;}
.board-view-box .view-head dl dd:last-of-type:after {display:none;}
.board-view-box .view-head dl dd b {font-size:16px; color:#d9d9d9; margin:0 10px 0 0;}
.board-view-box .view-head dl dd p {font-size:16px; color:#fff;}
.board-view-box .view-body {padding:40px 30px;}
.board-view-box .view-body p {font-size:16px; line-height:1.4; color:#fff;}
.board-view-box .view-body img {display:block; margin:0 auto; max-width:100%;}
.board-view-box .view-file {border:1px solid rgba(255,255,255,0.4); border-width:1px 0; display:flex; flex-wrap:wrap; align-items:center; padding:16px 30px;}
.board-view-box .view-file b {font-size:16px; color:#fff; margin-right:16px;}
.board-view-box .view-file a {flex:1; min-width:0; font-size:16px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-decoration:underline;}
@media (max-width:991px){
.board-view-box .view-head {padding:15px;}
.board-view-box .view-head em {padding:4px 15px; font-size:13px;}
.board-view-box .view-head h3 {font-size:16px;}
.board-view-box .view-head dl {margin:10px 0 0;}
.board-view-box .view-head dl dd {font-size:13px;}
.board-view-box .view-head dl dd b {font-size:13px;}
.board-view-box .view-head dl dd p {font-size:13px;}
.board-view-box .view-body {padding:20px 0;}
.board-view-box .view-body p {font-size:14px;}
.board-view-box .view-file {padding:15px;}
.board-view-box .view-file b {font-size:14px;}
.board-view-box .view-file a {font-size:14px;}
}   

/* board-write-box */
.board-write-box {border-top:1px solid rgba(255,255,255,0.4);}
.board-write-box > ul > li {border-bottom:1px solid rgba(255,255,255,0.4); padding:24px 16px;}
@media (max-width:991px){
.board-write-box > ul > li {padding:15px 0;}
}

/* order-box */
.order-box ul {background:rgba(255,255,255,0.3); border-radius:50px; padding:15px 40px 20px; display:flex; flex-wrap:wrap; justify-content:center; max-width:900px; margin:0 auto;}
.order-box ul li {position:relative; display:flex; flex-wrap:wrap; align-items:center;}
.order-box ul li:after {display:inline-block; content:""; width:24px; height:15px; margin:0 60px; position:relative; background:url('../images/icon_order.png') no-repeat center / cover;}
.order-box ul li:last-of-type:after {display:none;}
.order-box ul li img {display:block; margin:0 auto; width:42px;}
.order-box ul li p {margin:4px 0 0; font-size:16px; font-weight:500; text-align:center; color:#fff;}
.order-box ul li p br {display:none;}
@media (max-width:991px){
.order-box ul {margin:0 0 20px; padding:15px 0; border-radius:4px;}
.order-box ul li {flex:1; min-width:0; justify-content:center;}
.order-box ul li:after {width:16px; height:10px; position:absolute; right:-8px; top:50%; margin:0; transform:translateY(-50%);}
.order-box ul li img {width:32px;}
.order-box ul li p {margin:4px 0 0; font-size:13px; line-height:1.2;}
.order-box ul li p br {display:block;}
}                

/* charge-write-box */
.charge-write-box {padding:0 0 24px; margin:0 auto 24px; max-width:900px;}
.charge-write-box > ul > li {margin:0 0 25px; display:flex; flex-wrap:wrap;}
.charge-write-box > ul > li:last-of-type {margin:0;}
.charge-write-box > ul > li > b {font-size:18px; font-weight:500; color:#fff; width:110px; width:100%; margin:0 0 15px;} 
.charge-write-box > ul > li > div {width:100%;}
.charge-write-box > ul > li > div p {font-size:16px; font-weight:500;}
.charge-write-box > ul > li > div small {display:block; margin:5px 0 0; font-size:14px; line-height:1.3; color:#ff0000; word-break:keep-all;}
@media (max-width:991px){
.charge-write-box {padding:0;}
.charge-write-box > ul > li > b {width:100%; top:0; font-size:14px; margin:0;}
.charge-write-box > ul > li > div {width:100%; flex:none; margin:10px 0 0;}
.charge-write-box > ul > li > div small {font-size:12px;}
}

/* charge-input-box */
.charge-input-box {display:flex; flex-wrap:wrap; align-items:center;}
.charge-input-box > div input {color:#fff; width:375px; padding:0 14px; text-align:right; font-size:14px; height:41px; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); border-radius:4px;}
.charge-input-box > div em {margin:0 17px 0 12px; font-size:18px; font-weight:500; color:#fff;}
.charge-input-box > div {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center;}
.charge-input-box > div a {flex:1; min-width:0; height:41px; border-radius:4px; border:1px solid #7C7C7C; color:#B9B9B9; padding:0 15px; font-size:12px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-right:8px;}
.charge-input-box > div a:last-of-type {margin:0;}
.charge-input-box > div a:last-of-type:before {display:inline-block; content:""; width:14px; height:14px; margin:0 5px 0 0; background:url('../images/icon_refresh.png') no-repeat center / cover;}
.charge-input-box > div a.active {background:rgba(255,255,255,0.2); border-color:#DEDEDE; color:#fff;}
@media (max-width:991px){
.charge-input-box > div input {flex:1; min-width:0;}
.charge-input-box > div em {font-size:14px;}
.charge-input-box > div {width:100%; margin:10px 0 0; flex:none;}
}

/* notice-box */
.notice-box {border-top:1px solid #686868; padding:20px;}
.notice-box dl dt {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:600; margin:0 0 10px; color:#fff;}
.notice-box dl dt:before {display:inline-block; content:""; width:20px; height:20px; margin-right:10px; background:url('../images/icon_notice.png') no-repeat center / cover;}
.notice-box dl dd {margin:0 0 5px; position:relative; font-size:14px; line-height:1.3; padding-left:20px; color:#fff;}
.notice-box dl dd:before {position:absolute; left:5px; top:7px; width:3px; height:3px; background:#fff; border-radius:50%; content:"";}
@media (max-width:991px){
.notice-box {padding:20px 15px;}
}

/* notice-swiper-box */
.notice-swiper-box {margin:0 -15px;}
.notice-swiper-box a {display:block; font-size:20px; font-weight:500; padding:0 15px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
@media (max-width:991px){
.notice-swiper-box {margin:0;}
.notice-swiper-box a {font-size:16px; padding:0;}
}

/* graph-box */
.graph-box {border:1px solid #ff0000; background:rgba(255,0,0,0.2); padding:30px; border-radius:12px;}
.graph-box .graph-text {text-align:center; padding:100px 0; font-size:20px; font-weight:600; color:#fff;}
.graph-box.white {border:1px solid #fff; background:none;}

/* event-button-box */
.event-button-box a {height:44px; font-size:15px; padding:0 10px; font-weight:500; color:#fff; background:#0E0E0E; border-radius:4px; border:1px solid rgba(255,255,255,0.4); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.event-button-box a small {font-size:11px; color:#fff;}
.event-button-box a.sm {height:35px;}
.event-button-box a.lg {height:44px;}
.event-button-box a.lg small {font-size:12px;}
.event-button-box a.full {justify-content:center; align-content:center;}
.event-button-box a.full small {width:100%; text-align:center; margin:5px 0 0;}
.event-button-box dl {display:flex; flex-wrap:wrap;}
.event-button-box dl dd {display:flex; flex-wrap:wrap; align-items:center; flex:1; min-width:0; margin-right:34px;}
.event-button-box dl dd:last-of-type {margin:0;}
.event-button-box dl dd b {font-size:18px; font-weight:600; color:#fff; margin-right:34px;}
.event-button-box dl dd input {flex:1; min-width:0; padding:0 10px; font-size:16px; color:#fff; height:50px; border-radius:4px; border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.2);}
.event-button-box dl dd input::placeholder {color:rgba(255,255,255,0.6);}
.event-button-box dl.full dd {flex:none; width:100%; margin-right:0; margin-bottom:10px;}
.event-button-box dl.full dd:last-of-type {margin-bottom:0;}
.event-button-box .button-type-01 ul {display:flex; flex-wrap:wrap; align-items:flex-start;}
.event-button-box .button-type-01 ul li {width:292px; display:flex; flex-wrap:wrap; margin:0 -6px -12px;}
.event-button-box .button-type-01 ul li a {width:calc(50% - 12px); margin:0 6px 12px;}			 
.event-button-box .button-type-01 ul li:nth-of-type(2) {width:444px; margin:0 auto;} 
.event-button-box .button-type-01 ul li:nth-of-type(2) a {width:calc(33.33% - 12px);}
.event-button-box .button-type-02 {max-width:915px; margin:0 auto;}
.event-button-box .button-type-02 ul {display:flex; flex-wrap:wrap; align-items:center; margin:0 -6px -12px;}
.event-button-box .button-type-02 ul li {width:calc(25% - 12px); margin:0 6px 12px;}
.event-button-box .button-type-02.grid-3 ul li {width:calc(33.33% - 12px);}
.event-button-box .button-type-03 {display:flex; flex-wrap:wrap;}
.event-button-box .button-type-03 .button-left {flex:1; min-width:0;}
.event-button-box .button-type-03 .button-left ul {display:flex; flex-wrap:wrap;}
.event-button-box .button-type-03 .button-left ul li {flex:1; min-width:0; margin-right:28px;}
.event-button-box .button-type-03 .button-left ul li:last-of-type {margin:0;}
.event-button-box .button-type-03 .button-right {width:140px; margin-left:30px;}
.event-button-box .button-type-03 .button-right a {height:100%;}
.event-button-box .button-type-04 ul {display:flex; flex-wrap:wrap; align-items:center; margin:0 -6px -12px; padding:0;}
.event-button-box .button-type-04 ul li {width:calc(50% - 12px); margin:0 6px 12px;}
.event-button-box .button-type-04 ul li.full {width:calc(100% - 12px);}
.event-button-box .button-type-05 {border-top:1px solid rgba(255,255,255,0.4);}
.event-button-box .button-type-05 .group {border-bottom:1px solid rgba(255,255,255,0.4); padding:24px 0; display:flex; flex-wrap:wrap; align-items:center;}
.event-button-box .button-type-05 .group > b {padding:0 40px; font-size:18px; font-weight:600; color:#fff;}
.event-button-box .button-type-05 .group > div {flex:1; min-width:0;}
.event-button-box .button-type-05 .group > div ul {display:flex; flex-wrap:wrap; margin:0 -6px -12px;}
.event-button-box .button-type-05 .group > div ul li {width:calc(25% - 12px); margin:0 6px 12px;}
.event-button-box .button-type-05 .group > div ul.half li {width:calc(50% - 12px);}
.event-button-box.sm {max-width:480px; margin:0 auto;}
@media (max-width:1050px){
.event-button-box .button-type-01 ul li:nth-of-type(2) {flex:1; min-width:0;}
}
@media (max-width:991px){
.event-button-box a {height:35px; font-size:13px; border-radius:50px; align-content:center;}
.event-button-box a.lg {height:55px;}
.event-button-box dl dd {flex:none; width:100%; margin-right:0; margin-bottom:5px;}
.event-button-box dl dd:last-of-type {margin-bottom:0;}
.event-button-box dl dd b {font-size:15px; margin-right:15px;}
.event-button-box dl dd input {height:45px; font-size:14px;}
.event-button-box .button-type-01 ul {margin:0 0 -10px;}
.event-button-box .button-type-01 ul li {width:calc(100% + 10px) !important; flex:none !important; margin:0 -5px 0 !important;}
.event-button-box .button-type-01 ul li a {width:calc(50% - 10px); margin:0 5px 10px;}
.event-button-box .button-type-01 ul li:nth-of-type(2) a {width:calc(33.33% - 10px); margin:0 5px 10px;}
.event-button-box .button-type-02 ul {margin:0 -5px -10px;}
.event-button-box .button-type-02 ul li {width:calc(50% - 10px); margin:0 5px 10px;}
.event-button-box .button-type-02.grid-3 ul li {width:calc(33.33% - 10px);}
.event-button-box .button-type-03 .button-left {flex:none; width:100%;}
.event-button-box .button-type-03 .button-left ul {margin:0 -5px -10px;}
.event-button-box .button-type-03 .button-left ul li {flex:none; width:calc(50% - 10px); margin:0 5px 10px;}
.event-button-box .button-type-03 .button-right {width:100%; margin-left:0; margin-top:12px;}
.event-button-box .button-type-03 .button-right a {height:55px;}
.event-button-box .button-type-04 ul {margin:0 -5px -10px; padding:0;}
.event-button-box .button-type-04 ul li {width:calc(50% - 10px); margin:0 5px 10px;}
.event-button-box .button-type-04 ul li.full {width:calc(100% - 10px);}
.event-button-box .button-type-05 {margin:24px 0 0;}
.event-button-box .button-type-05 .group > b {padding:0 20px; font-size:15px;}
.event-button-box .button-type-05 .group > div ul {margin:0 -5px -10px;}
.event-button-box .button-type-05 .group > div ul li {width:calc(50% - 10px); margin:0 5px 10px;}
}

/* ball-box */
.ball-box {width:100%; margin:-28% 0 0;}
.ball-box img {width:100%;}
.ball-box.sub {margin:-10% 0 0;}
@media (max-width:991px){
.ball-box {margin:5% auto 0; position:absolute; left:0; bottom:0;}
.ball-box.sub {margin:5% auto 0;}
}

/* list-box */
.list-box {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.list-box .list-dot {position:absolute; background-size:cover; background-position:center; transition:all ease 0.5s; border-radius:50%; width:350px; height:350px;}
.list-box .list-dot.red {background-image:url('../images/img_dot_red.png');}
.list-box .list-dot.blue {background-image:url('../images/img_dot_blue.png');}
.list-box .list-dot.yellow {background-image:url('../images/img_dot_yellow.png');}
.list-box .list-dot.orange {background-image:url('../images/img_dot_orange.png');}
/*
body.sub .list-box {display:none;}
*/

/* cart-box */
.cart-box {border-radius:10px; background:rgba(255,255,255,0.9); border:1px solid #fff;}
.cart-box .cart-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:24px;}
.cart-box .cart-head h2 {display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:600; color:#A100FE;}
.cart-box .cart-head h2:before {display:block; font-size:0; width:20px; height:20px; margin:0 5px 0 0; background:url('../images/icon_cart.png') no-repeat center / cover; content:"";}
.cart-box .cart-head a {display:block; font-size:0; background:none; border:0; height:auto;}
.cart-box .cart-head a:after {display:block; content:""; width:24px; height:24px; background:url('../images/icon_cart_toggle.png') no-repeat center / cover;}
.cart-box .cart-body {padding:0 24px 24px;}
.cart-box .cart-body .body-write ul li {margin:0 0 8px; display:flex; flex-wrap:wrap; align-items:center;}
.cart-box .cart-body .body-write ul li:last-of-type {margin:0;}
.cart-box .cart-body .body-write ul li b {width:65px; font-size:14px; font-weight:600; color:#A100FE;}
.cart-box .cart-body .body-write ul li input {flex:1; min-width:0; height:38px; padding:0 10px; background:#fff; border:1px solid #dedede; border-radius:4px; font-size:14px; color:#000;}
.cart-box .cart-body .body-button {margin:24px 0 0;}
.cart-box .cart-body .body-button ul li {margin:0 0 10px; display:flex; flex-wrap:wrap;}
.cart-box .cart-body .body-button ul li:last-of-type {margin:0;}
.cart-box .cart-body .body-button ul li a {background:#A1A1A1; border:0; border-radius:4px; height:40px; font-size:14px; font-weight:600; color:#fff; flex:1; min-width:0; margin:0 10px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.cart-box .cart-body .body-button ul li a:last-of-type {margin:0;}
.cart-box .cart-body .body-button ul li a.active {background:linear-gradient(to right, rgb(161, 0, 254), rgb(225, 78, 202));}
.cart-box.active .cart-head a:after {transform:rotate(180deg);}
.cart-box.active .cart-body {display:none;}
.cart-box.fixed {position:absolute; right:-225px;; top:0; transition:all ease 0.3s; width:225px;}
.cart-box.fixed .cart-head {display:none;}
.cart-box.fixed .cart-body {padding:24px;}
.cart-box.bottom {position:fixed !important; left:50%; bottom:0; top:auto !important; width:100%; max-width:500px; transform:translateX(-50%); z-index:1000; border-radius:10px 10px 0 0;}
.cart-box.bottom .cart-head a:after {transform:rotate(180deg);}
.cart-box.bottom .cart-body {display:none;}
.cart-box.bottom.active .cart-head a:after {transform:none;}
.cart-box.bottom.active .cart-body {display:block;}
@media (max-width:1660px){
.cart-box.fixed {position:static; width:100%; margin:24px 0 0;}
.cart-box.fixed .cart-head {display:flex;}
}
@media (max-width:991px){
.cart-box {position:fixed !important; left:0; bottom:0; top:auto !important; width:100%; z-index:1000; border-radius:10px 10px 0 0;}
.cart-box .cart-head {padding:12px;}
.cart-box .cart-head h2 {font-size:18px;}
.cart-box .cart-head a:after {transform:rotate(180deg);}
.cart-box .cart-body {padding:0 12px 12px; display:none;}
.cart-box .cart-body .body-button {margin:12px 0 0;}
.cart-box.active .cart-head a:after {transform:none;}
.cart-box.active .cart-body {display:block;}
.cart-box.fixed .cart-body {padding:0 12px 12px;}
}

/* time-box */
.time-box {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 0 10px; position:relative; top:2px;}
.time-box:before {display:block; content:""; width:24px; height:24px; margin:0 5px 0 0; background:url('../images/icon_timer.png') no-repeat center / cover; position:relative; top:-2px;}
.time-box time {font-size:20px; color:#00E5FF; font-family:'Consolas', 'Courier New', monospace; font-weight:600;}