@charset "utf-8";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;1,100;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap");
body { background: #fff; }
.btn_cke_sc { display: none; }
.ladder_line_color { background: #6c757d; }
.ynode_color_0 { background: #17a2b8; }
.ynode_color_1 { background: #28a745; }
.ynode_color_2 { background: #007bff; }
.ynode_color_3 { background: #20c997; }
.ynode_color_4 { background: #dc3545; }
.ynode_color_5 { background: #6f42c1; }
.moved_0 { background: #17a2b8; }
.moved_1 { background: #28a745; }
.moved_2 { background: #007bff; }
.moved_3 { background: #20c997; }
.moved_4 { background: #dc3545; }
.moved_5 { background: #6f42c1; }
.result_0 { background: #17a2b8; }
.result_1 { background: #28a745; }
.result_2 { background: #007bff; }
.result_3 { background: #20c997; }
.result_4 { background: #dc3545; }
.result_5 { background: #6f42c1; }

@media (max-width: 768px) {
.mobile_padding { padding: 0 10px; }
.mobile_none { display: none; }
.mobile_only { display: block; }
}
input[type="text"], input[type="password"], input[type="email"], textarea, select, button { box-shadow: none !important; outline: none !important; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus, button:focus { border: 1px solid #558ab7; box-shadow: none !important; outline: none !important; }
button { width: auto; padding: 0 .75rem; height: calc(1.5em + .75rem + 2px); }
select { display: inline-block; padding: .375rem .75rem; line-height: 1.5; color: #495057; vertical-align: middle; border: 1px solid #ced4da; border-radius: .25rem; padding-right: 2rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUnPjxwYXRoIGZpbGw9JyUyMzM0M2E0MCcgZD0nTTIgMEwwIDJoNHptMCA1TDAgM2g0eicvPjwvc3ZnPg==) no-repeat right .75rem center !important; background-size: 8px 10px !important; }
.input-type-text { width: 100%; height: calc(1.5em + .75rem + 2px); padding: 0 .75rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.input-type-text:focus { outline: none !important; box-shadow: none !important; }

.input-form-group { position: relative; display: flex; }
.input-form-group .input-form-tle { flex: 0 0 auto; height: calc(1.5em + .75rem + 2px); padding: 0 .375rem; display: flex; border: 1px solid #ced4da; background: #eee; border-radius: .25rem 0 0 .25rem; }
.input-form-group .input-form-tle span { width: auto; min-width: 60px; align-self: center; text-align: center; }
.input-form-group .input-form-tle.adm span { min-width: 100px; }
.input-form-group .input-form-field { display: flex; flex-grow: 1; padding: 0 10px; border: 0; }
.input-form-group .input-form-field .input-type-text:focus { border-color: #ced4da !important; }
.input-form-group .input-form-field .input-field-div { padding: 0 5px; margin-bottom: .25rem; }
.input-form-group .input-form-field .input-form-explain { width: 100%; padding: 10px; }
.input-form-group .input-form-field .input-type-select { width: 100%; }

.input-form-group .input-form-file { padding: 0 .375rem; height: auto; }
.input-form-group .input-form-btn { position: absolute; top: 1px; bottom: 1px; right: 2px; }
.input-form-group .input-form-btn i { width: 40px; text-align: center; }
.input-form-group .input-form-btn button:focus { border: 0 !important; }

.input-type-custom { position: relative; height:calc(1.5em + .75rem + 2px); display: flex; }
.input-type-custom .input-type-radio { position: absolute; z-index: -1; opacity: 0; }
.input-type-custom .input-type-radio-label { position: relative; margin-bottom: 0; padding: .25rem .375rem 0 1.25rem; align-self: center; }
.input-type-custom .input-type-radio-label::before { position: absolute; top: .25rem; left: 0; display: block; width: 1rem; height: 1rem; pointer-events: none; content: ""; background-color: #fff; border: #adb5bd solid 1px; border-radius: 50%; }
.input-type-custom .input-type-radio:checked~.input-type-radio-label::before { color: #fff; border-color: #007bff; background-color: #007bff; }
.input-type-custom .input-type-radio-label::after { position: absolute; top: .25rem; left: 0; display: block; width: 1rem; height: 1rem; content: ""; background: no-repeat 50%/50% 50%; }
.input-type-custom .input-type-radio:checked~.input-type-radio-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.input-type-textarea { border: 1px solid #ced4da; border-radius: .25rem; color: #495057; vertical-align: middle; padding: .375rem .75rem; font-size: 1rem; width: 100%; min-height: 100px; background: none !important; resize: none; font-weight: 300; }
.input-type-textarea:focus { outline: none !important; box-shadow: none !important; }
.fa-icon-button { border: 0; background: #fff; padding: .375rem 0; height: auto; }

.flex-row { display: -ms-flexbox; display: flex; }
.flex-row-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-direction-column { flex-direction: column; }
.flex-justify-between { justify-content: space-between; }
.flex-justify-center { justify-content: center; }
.flex-justify-end { justify-content: flex-end!important; }
.flex-items-center { align-items: center; }
.flex-self-center { align-self: center; }
.flex-self-end { align-self: flex-end!important; }
.flex-pull-right { float: right; }
.mobile_only { display: none; }
.flex-col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; max-width: 100%; }
.flex-col-3 { -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.flex-col-6 { -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.flex-col-9 { -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.flex-col-12 { -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
.flex-col-auto { -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; max-width: 100%; }
.flex-col-grow { flex-grow: 1; max-width: 100%; }
.m-left-5 { margin-left: -5px; }
.m-right-5 { margin-right: -5px; }
.m_left_5 { margin-left: 5px; }
.m_right_5 { margin-right: 5px; }
.p_left_5 { padding-left: 5px; }
.p_right_5 { padding-right: 5px; }
.m_top_5 { margin-top: 5px; }
.m_bottom_5 { margin-bottom: 5px; }

@media (max-width: 1200px) {
	.flex-col-xl-3 { -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
	.flex-col-xl-6 { -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
	.flex-col-xl-9 { -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
	.flex-col-xl-12 { -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.flex-col-xl-auto { -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
	.xl-order-first { -ms-flex-order: -1; order: -1}
}

@media (max-width: 992px) {
	.flex-col-xs-3 { -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
	.flex-col-xs-6 { -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
	.flex-col-xs-9 { -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
	.flex-col-xs-12 { -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.flex-col-xs-auto { -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
	.xs-order-first { -ms-flex-order: -1; order: -1}
}

@media (max-width: 768px) {
	.flex-col-md-3 { -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
	.flex-col-md-6 { -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
	.flex-col-md-9 { -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
	.flex-col-md-12 { -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.flex-col-md-auto { -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
	.md-order-first { -ms-flex-order: -1; order: -1}
}

@media (max-width: 576px) {
	.flex-col-sm-3 { -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
	.flex-col-sm-6 { -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
	.flex-col-sm-9 { -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
	.flex-col-sm-12 { -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
	.flex-col-sm-auto { -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
	.sm-order-first { -ms-flex-order: -1; order: -1}
}

/* write */
#board_write { position: relative; margin-top: 20px; }
#board_write .div_write { position: relative; margin-bottom: .5rem; }
#board_write .div_write .owner_use_point { margin-left: 10px; padding: .375rem .75rem; border: 1px solid #ddd; border-radius: .25rem;}
#board_write .div_write .owner_use_point span { display: inline-block; white-space: nowrap; line-height: 1.5; color: #6f42c1; }
#board_write .div_write .write_form { }
#board_write .div_write .pd_left { padding-left: .75rem; }
#board_write .div_write.write_btn { margin: 15px 0; }
#board_write .div_write.write_btn .btn { display: block; width: 100%; font-weight: 300; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-width: 1px; border-style: solid; padding: .375rem .75rem !important; font-size: 1rem; border-radius: .25rem; height: auto !important; line-height: 1.5 !important; letter-spacing: 0; }
#board_write .div_write.write_btn .btn_cancel { border-color: #a0a0a0; background: #a0a0a0; color: #fff; }
#board_write .div_write.write_btn .btn_submit { border-color: #3f4553; background: #3f4553; color: #fff; }
#board_write .wblank { display: block; border: 0 !important; }
#board_write .gift { padding-left: 80px; }
#board_write .alert_info { width: 100%; padding: 10px; color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; border-radius: .25rem; border: 1px solid; }
#board_write .adm_msg { top: 50%; left: calc( 50% - 150px); width: 300px; height: auto; background: rgba(0,0,0,.75); color: #fff; text-align: center; padding: .75rem; border-radius: 15px; z-index: 999;}
#board_write #crt { margin-left: 10px; background-color: #3f51b5; border-color: #223390; border-radius: .25rem; border: 1px solid; white-space: nowrap; color: #fff; }


/* list */
#board_list { position: relative; width: 100%; }
#board_list .board_list_top { width: 100%; max-width: 1228px; margin: 0 auto;margin-top: 15px; margin-bottom: 15px; }
#board_list .board_list_top .board_category { }
#board_list .board_list_top .board_category li { border: 1px solid #ddd; letter-spacing: -1px; margin-left: -1px; }
#board_list .board_list_top .board_category li:first-child { margin-left: 0; }
#board_list .board_list_top .board_category li a { display: block; padding: .75rem; background: #f1f1f1; }
@media (max-width: 420px) {
#board_list .board_list_top .board_category li a { display: block; padding: .5rem; background: #f1f1f1; }
}
#board_list .board_list_top .board_category li a.active { background: #fff; color: #6f42c1; }
#board_list .board_list { position: relative; width: 100%; max-width: 1228px; margin: 0 auto; overflow: hidden; }
#board_list .board_list ul { margin: 0 -14px; }
#board_list .board_list ul li {position: relative; padding: 0 14px; margin-bottom: 1rem;}
#board_list .board_list ul li .wait { background: #6f42c1; }
#board_list .board_list ul li .close { background: #f65656; }
#board_list .board_list ul li .open { background: #00a9e0; }
#board_list .board_list ul li .itembox { position: relative; padding: 15px; border: 1px solid #ddd; }
@media (max-width: 768px) { 
#board_list .board_list ul li .itembox { border-left: 0; border-right: 0; }
}
#board_list .board_list ul li .itembox .ladderbox { position: relative; width: 90px; height: 90px; padding: 15px; }
#board_list .board_list ul li .itembox .ladderbox .yline { width: 3px; height: 60px; background: #ddd; }
#board_list .board_list ul li .itembox .ladderbox .gametype { position: absolute; top: 25px; left: 10px; bottom: 25px; right: 10px; background: #fff; }
#board_list .board_list ul li .itembox .ladderbox .gametype span { display: inline-block; width: 100%; text-align: center; font-size: 1rem; line-height: 40px; }
#board_list .board_list ul li .itembox .ladderinfo { width: 100%; padding: 0 0 0 15px; }
#board_list .board_list ul li .itembox .ladderinfo .subject { font-size: 1rem; color: #444; font-weight: 400; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress { position: relative; width: 100%; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .user { font-size: 0.75rem; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; color: #fff; padding: .375rem .75rem;}
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph { position: relative; flex-grow: 1; background: #dfdfdf; align-self: center; height: 17px; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph .graph_per_txt { position: absolute; left: 5px; color: #fff; display: block; height: 17px; background: transparent; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph .graph_per { position: absolute; display: block; height: 17px; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph .graph_txt { position: absolute; right: 5px; display: block; height: 17px; background: transparent; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph .graph_txt.close { color: #fff; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph .graph_txt.open { color: #00a9e0; }
#board_list .board_list ul li .itembox .ladderinfo .gameprogress .graph .graph_txt.wait { color: #6f42c1; }
#board_list .board_list ul li .itembox .ladderinfo .userinfo { font-size: 14px; }
#board_list .board_list ul li .itembox .ladderinfo .userinfo .gameuser { }
#board_list .board_list ul li .itembox .ladderinfo .userinfo .date { }
#board_list .board_list ul li .item_over { z-index: 10; position: absolute; left: 14px; top: 0; right: 14px; bottom: 0; -webkit-transition: .3s; transition: .3s; background: rgba(0, 0, 0, .5); opacity: 0;}
#board_list .board_list ul li .item_over .item_over_btn { position: absolute; top: calc( 50% - 45px); right: 20px; width: 90px; height: 90px; border-radius: 50%; text-align: center; line-height: 90px; color: #fff; font-size: 14px; letter-spacing: -1px; }
#board_list .board_list ul li:hover .item_over { opacity: 1;}

#board_list .board_list_table { width: 100%;}
#board_list .board_list_table .board_list_head { width: 100%; padding: 12px 0; border-top: 2px solid #404040; border-bottom: 1px solid #ddd; }
#board_list .board_list_table .board_list_body li { border-bottom: 1px solid #ddd; padding: 12px 0; }
#board_list .board_list_table .board_list_body div { font-weight: 400; white-space: nowrap; overflow: hidden; }
#board_list .board_list_table .board_list div { text-align: center; padding: 0 4px; }
#board_list .board_list_table .board_list div.wr_num { flex: 0 0 50px; }
#board_list .board_list_table .board_list div.wr_caname { flex: 0 0 60px; }
#board_list .board_list_table .board_list div.wr_subject { flex: 1 1 100%; }
#board_list .board_list_table .board_list div.wr_date { flex: 0 0 60px; }
#board_list .board_list_table .board_list div.wr_state { flex: 0 0 60px; }
#board_list .board_list_table .board_list_body div.wr_subject { text-align: left; }

/* view */
#board_view { position: relative; width: 100%; }
#board_view h2.board_view_title { margin: 15px 0; padding: 0 15px; font-size: 1.25rem; }
#board_view h2.board_view_title .title { }
#board_view .view_info { position: relative; margin-top: 15px; -ms-display: flexbox; display: flex; -ms-flex-pack: justify!important; justify-content: space-between!important; font-size: 13px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 15px; }
#board_view .view_info span { margin-right: 3px; }
#board_view .view_info:after { display: block; visibility: hidden; clear: both; content: ""; }
#board_view .view_content { padding: 20px; border-bottom: 1px solid #ddd; }
#board_view .view_content .view_content_img img { width: 100%; }
#board_view .view_content .view_content_detail { font-size: 1rem; }

/* view ladder_wrap height는 필수, 사다리 간격은 ladder_wrap height / 12 */
@keyframes grow {
  0% { transform: scale(0); }
  50% { opacity: 1; transform: scale(1.25); }
}
#ladder_wrap { position: relative; width: 100%; height: 400px; display: flex; justify-content: center; border: 0; margin: 80px 0; }
@media (max-width: 576px) {
	#ladder_wrap { height: 300px; }
}
#ladder_wrap:after { display: block; visibility: hidden; clear: both; content: ""; }
#ladder_wrap.ladder_empty { height: 250px !important; }
#ladder_wrap > div.ladder_box { position: relative; display: flex; justify-content: center; }
#ladder_wrap > div.empty_box { width: 100%; max-width: 620px; justify-content: space-between !important; padding: 0 50px; }
#ladder_wrap > div.ladder_box > div.yline { position: relative; display: flex; flex-direction: column; }
#ladder_wrap > div.ladder_box > div.yline:last-child { margin-right: 0 !important; }
#ladder_wrap > div.ladder_box > div.yline > div.xline {position: absolute; }
#ladder_wrap > div.ladder_box > div.moved {position: absolute; z-index: 30; }
#ladder_wrap > div.ladder_box > div.yline .xnodebtn { position: absolute; text-align: center; border-radius: 50%; color: #fff; white-space: nowrap; outline: none !important; box-shadow: none !important; padding: 0 !important; border: 0; }
#ladder_wrap > div.ladder_box > div.yline .btn_start { top: 0; }
#ladder_wrap > div.ladder_box > div.yline .btn_select { background: #d500d5; }
#ladder_wrap > div.ladder_box > div.yline .btn_select:before {content: ''; position: absolute; top: 0; display: block; width: 100%; height: 100%; border-radius: 50%; opacity: 1; -webkit-animation: grow .75s linear infinite; animation: grow .75s linear infinite; background: rgba(82,88,93,.5); pointer-events: none; }
#ladder_wrap > div.ladder_box > div.yline .btn_result { bottom: 0; }
#ladder_wrap > div.ladder_box > div.yline .gameline { z-index: 10; }
#ladder_wrap > div.ladder_box > div.yline > div.goh { position: absolute; z-index: 11; }
#ladder_wrap > div.ladder_box > div.ladder_empty { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 25px; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info { position: relative; width: 100%; height: 100%; background: #1693bc; border: 3px solid #1e70a6; padding: 30px; font-size: 1rem; }
@media (max-width: 576px) {
	#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info { font-size: 12px; }
}
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .user_info { display: flex; justify-content: center; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .user_info span.user { display: inline-block; padding: .375rem; color: #000; background: #fff; border: 1px solid #fff; border-radius: .25rem; margin-right: 5px; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .point_info { display: flex; justify-content: space-between; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > div > span.point { display: inline-block; padding: .375rem;  color: #000; background: #fff; border: 1px solid #fff; border-radius: .25rem; width: 45%; text-align: center; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > div > span.gift { width: auto !important; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .point_info span.ts { font-size: 1rem; color: #fff; align-self: center; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .gift_info { text-align: center; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .pick_form { display: flex; justify-content: center; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .pick_form > .bat { display: inline-block; height: calc(1.5em + .75rem + 2px); padding: 0 .75rem; background: #fff; border: 1px solid #ddd; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; line-height: calc(1.5em + .75rem); border-right: 0; white-space: nowrap; color: #6f42c1; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .pick_form > .userpoint { flex-grow: 1; max-width: 150px; border-radius: 0; }
#ladder_wrap > div.ladder_box > div.ladder_empty > .ladder_info > .pick > .pick_form > .run { height: calc(1.5em + .75rem + 2px); padding: 0 .75rem; background: #fff; border: 1px solid #ddd; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; border-left: 0; white-space: nowrap; }
#msg { position: absolute; display: none; }
#mypoint { }
#horse { position: absolute; opacity: 0; top: 0; left: 0; z-index: 20; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; border-radius: 50%; }

#owner_info { position: relative; width: 100%; border: 0; margin: 40px 0; display: flex; justify-content: center; }
#owner_info > ul { width: auto; padding: 0 28px; }
#owner_info > ul > li.owner_info { display: table; table-layout: fixed; width: 100%; max-width: 620px; padding: .75rem 0; border-bottom: 1px solid #ddd;  border-right: 1px solid #ddd; border-left: 1px solid #ddd; }
#owner_info > ul > li.owner_info.owner_list_head { border-top: 2px solid #404040; }
#owner_info > ul > li.owner_info > span { display: table-cell; text-align: center; align-self: center; padding: 0 .75rem;}
#owner_info > ul > li.owner_info > span.owner_date { width: 25%; white-space: nowrap; overflow: hidden; }
#owner_info > ul > li.owner_info > span.owner_user { width: 15%; }
#owner_info > ul > li.owner_info > span.owner_point { width: 20%;}

#join_info { position: relative; width: 100%; border: 0; margin: 40px 0; display: flex; justify-content: center; }
#join_info > ul { margin: 0 14px; width: 100%; max-width: 720px; }
#join_info > ul > li { position: relative; padding: 0 14px; }
#join_info > ul > li > div { padding: .375rem 0; border-bottom: 1px solid #ddd;  border-right: 1px solid #ddd; border-left: 1px solid #ddd; }
#join_info > ul > li > div.join_list_head { padding: .75rem 0; border-top: 2px solid #404040; }
#join_info > ul > li > div.mypick { background: #f1f1f1; }
#join_info > ul > li > div > span { display: inline-block; text-align: center; align-self: center; }
#join_info > ul > li > div > span.join_id { flex: 0 0 70px; }
#join_info > ul > li > div > span.join_horse { flex: 0 0 60px; }
#join_info > ul > li > div > span.join_point { flex: 0 0 70px; }
#join_info > ul > li > div > span.join_result { flex-grow: 1; }
#join_info > ul > li > div > span > b { display: inline-block; width: 30px; height: 30px; color: #fff; text-align: center; line-height: 30px; border-radius: 50%; white-space: nowrap; overflow: hidden; }

/* view link, file */
#bo_v_link { }
#bo_v_link h2, #bo_v_file h2 { display: none; }
#bo_v_file,
#bo_v_link { color: #999; font: normal normal 12px/16px 'Courier New','Gulimche',monospace; }
#bo_v_file i,
#bo_v_link i { font-size: 16px; color: #000; }
#bo_v_file a,
#bo_v_link a { color: #2d60a9 !important; }
#bo_v_file { padding: 5px 20px; border-bottom: 1px solid #ddd; margin-top: -1px; }
#bo_v_file ul { margin: 0; padding: 0; }
#bo_v_file ul li { margin: 5px 0; padding: 0; list-style: none; }
#bo_v_link { padding: 5px 20px; border-bottom: 1px solid #ddd; margin-top: -1px; }
#bo_v_link ul { margin: 0; padding: 0; }
#bo_v_link ul li { margin: 5px 0; padding: 0; list-style: none; }
/* 추천,비추천 */
#board_view #bo_v_act { width: 100%; margin: 15px 0; padding: 20px; text-align: center; }
#board_view #bo_v_act .bo_v_act_gng { position: relative; display: inline-block; }
#board_view #bo_v_act_good, 
#board_view #bo_v_act_nogood { display: none; position: absolute; bottom: -5px; left: 50%; margin-left: -80px; padding: 0; height: 30px; line-height: 30px; width: 160px; background: rgba(0,0,0,.75); color: #fff; text-align: center; border-radius: 15px; border: 0; font-size: 12px; }
#board_view #bo_v_act .bo_v_good,
#board_view #bo_v_act .bo_v_nogood { display: inline-block; font-size: 1rem; }
#board_view #bo_v_act .bo_v_good { color: #01a0e2; }
#board_view #bo_v_act .bo_v_nogood { color: #e74471; }
#board_view #bo_v_act a.bo_v_good:hover, 
#board_view #bo_v_act a.bo_v_nogood:hover { color: #3f4553; }
#board_view #bo_v_act a.bo_v_good:hover span, 
#board_view #bo_v_act a.bo_v_nogood:hover span { background-color: #3f4553; }
#board_view #bo_v_act .bo_v_good span,
#board_view #bo_v_act .bo_v_nogood span { display: inline-block; padding: 4px; width: 100px; height: auto !important; line-height: auto !important; border: 1px solid #aaa; background: #fff; border-radius: 25px; }
#board_view #bo_v_act .bo_v_good span i,
#board_view #bo_v_act .bo_v_nogood span i { margin-right: 5px; }
#board_view #bo_v_act .bo_v_good span { background: #01a0e2; color: #fff; border: 0; }
#board_view #bo_v_act .bo_v_nogood span { background: #e74471; color: #fff; border: 0; }
#board_view #bo_v_act .bo_v_good strong,
#board_view #bo_v_act .bo_v_nogood strong { display: block; text-align: center; font-size: 1.25rem; font-weight: 400; }


/* board_btn_wrap */
.board_btn_wrap { position: relative; width: 100%; max-width: 1228px; margin: 0 auto; margin-top: 15px; margin-bottom: 15px; }
.board_btn_wrap > .btn_wrap { align-self: center; }
.board_btn_wrap > .btn_wrap > a.btn,
.board_btn_wrap > .btn_wrap > button
{ display: inline-block; width: auto !important; height: auto !important; line-height: 1.5 !important; background: #fff; border: 1px solid #b9bdd3; color: #646982; text-decoration: none; vertical-align: middle; padding: .375rem .75rem; font-size: 1rem; border-radius: .25rem; font-weight: 400; }
.paper_btn_wrap > .btn_wrap > a.btn:hover, .paper_btn_wrap > .btn-wrap > a.btn:focus,
.paper_btn_wrap > .btn_wrap > button:hover, .paper_btn_wrap > .btn-wrap > button:focus { background:#ebedf6; }
.board_btn_wrap > .btn_wrap > a.btn-scrap:hover { border-color: #6f42c1; color: #6f42c1; background: #fff; }
#bo_v_sns { -webkit-flex: 1; -ms-flex: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; }
#bo_v_sns li { margin-right: 5px;}
#bo_v_sns li img { width: 30px; height: 30px; border-radius: 50%; }

/* board_view_nb 다음글/이전글 */
.board_view_nb { margin: 15px 0; padding: 0; list-style: none; position: relative; clear: both; text-align: left; border-top: 1px solid #ddd; font-size: 1rem; font-weight: 300; }
.board_view_nb:after { display: block; visibility: hidden; clear: both; content: ""; }
.board_view_nb li { border-bottom: 1px solid #ddd; border-top: 0; padding: 10px; -webkit-flex: 1; -ms-flex: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; -ms-flex-pack: space-between; }
.board_view_nb li:hover { background: #f6f6f6; }
.board_view_nb li > * { display: block; white-space: nowrap; }
.board_view_nb li .nb_tit { display: inline-block; padding-right: 10px; color: #3f4553; }
.board_view_nb li .nb_tit i { margin-right: 5px; }
.board_view_nb li a { margin-right: 5px; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.board_view_nb li .nb_date { float: right; color: #888; }

/* 게시판 댓글 */
.board_cmt_btn { position: relative; background: none; border: 0; text-align: left; width: 100%; margin: 30px 0 0 0; padding: 10px 0; font-size: 18px; color: #3f4553; border-bottom: 1px solid #3f4553; }
.board_cmt_btn i { font-size: 22px; color: #3f4553; padding-left: 10px; }
.board_cmt_btn:before { position: absolute; bottom: 5px; right: 5px; content: "\f077"; font-family: 'FontAwesome'; display: block; line-height: 1; transition: all 0.3s ease-in-out; }
.board_cmt_btn:after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 4.5em; height: 2px; background: #3f4553; }
.board_cmt_btn:focus { border: 0 !important; border-bottom: 1px solid #3f4553 !important; }
.board_cmt_btn_op {}
.board_cmt_btn_op:before { bottom: 5px; transform: rotate(180deg); }
.board_cmt_btn_op:after {}

#bo_vc { border-bottom: 1px solid #ddd; }
#bo_vc h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_vc h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_vc h3 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_vc article { margin: 0; padding: 10px 10px 10px 15px; position: relative; border-top: 1px solid #ddd; font-size: 14px; min-height: 72px; }
#bo_vc article:not([data-depth="0"]) { padding: 10px 10px 10px 40px; border-color: #eee; background: url('./img/icon_reply.gif') 20px 10px no-repeat; }
/*#bo_vc article:not([data-depth="0"]) .pf_img { display: none; }*/

/*댓글답변*/
#bo_vc { position: relative; width: 100%; }
#bo_vc header .icon_reply { position: absolute; top: 15px; left: -20px; }
#bo_vc header .cmt-name { display: -ms-flexbox!important; display: flex!important; align-items: center; }
#bo_vc header .cmt-name i { margin-right: 3px; }
#bo_vc header .bo_vc_hdinfo { font-size: 12px; color: #777; }
#bo_vc header.comment-header { display: -ms-flexbox!important; display: flex!important; -ms-flex-pack: justify!important; justify-content: space-between!important; align-items: center; }
#bo_vc header.comment-header:after { display: none; clear: both; content: ""; }

#bo_vc .cmt_contents { margin: 5px 0 0 0; font-size: 14px;  }
#bo_vc .cmt_contents p { margin: 0; padding-left: 15px; }
#bo_vc .cmt_contents P .href_name { color: #01a0e2; }
#bo_vc p a { text-decoration: underline; }
#bo_vc p a.s_cmt { text-decoration: underline; color: #ed6479; }
#bo_vc_empty { font-size: 1rem; margin: 0; padding: 30px 0 !important; color: #777; text-align: center; }
#bo_vc #bo_vc_winfo {}
#bo_vc footer { -webkit-flex: 1; -ms-flex: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; -ms-flex-pack: space-between; margin-top: 10px; }
#bo_vc footer .cmt-icon .cmt-vc-icon { position: relative; display: inline-block; font-size: 11px; border: 1px solid; padding: 0.25em 0.5em; line-height: 1; border-radius: 0.25em; cursor: pointer; color: #777; font-family: 'Dotum',sans-serif; letter-spacing: -0.1em; transition: all 0.3s ease-in-out; }
#bo_vc footer .cmt-icon .cmt-vc-icon i { margin-right: 2px; }
#bo_vc footer .cmt-icon .cmt-vc-icon b.cmt-cnt { margin-left: 2px; font-size: 11px; }
#bo_vc footer .cmt-icon .cmt-vc-icon b.cmt-msg { display: none; position: absolute; top: calc( 100% + 3px ); left: -100%; padding: 0 15px; height: 30px; line-height: 30px; width: 240px; background: rgba(0,0,0,.75); color: #fff; text-align: center; border-radius: 15px; border: 0; font-size: 12px; z-index: 1001; }
#bo_vc footer .cmt-icon a.cmt-vc-icon:hover,
#bo_vc footer .cmt-icon a.cmt-vc-icon:focus { background-color: #3f4553 !important; border-color: #3f4553 !important; color: #fff !important; }
#bo_vc footer .cmt-icon .cmt-icon-good { color: #01a0e2; border-color: #01a0e2; }
#bo_vc footer .cmt-icon .cmt-icon-nogood { color: #e74471; border-color: #e74471; }
#bo_vc footer .cmt-icon .cmt-icon-good:hover { color: #01a0e2; border-color: #01a0e2; }
#bo_vc footer .cmt-icon .cmt-icon-nogood:hover { color: #e74471; border-color: #e74471; }

#bo_vc_w { position: relative; margin-bottom: 2rem; }
@media (max-width: 1200px) {
 #bo_vc_w { position: relative; padding: 0 10px; }
}
#bo_vc_w h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_vc_w h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#bo_vc_w h3 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.bo_vc_w { position: relative; margin: 0; display: block; font-size: 14px; }
.bo_vc_w:after { display: block; visibility: hidden; clear: both; content: ""; }
.bo_vc_w #fviewcomment { clear: both; display: block; margin: 10px 0; padding: 0; background: #fff; border-right: 0; border-left: 0; }
.bo_vc_w #char_cnt { display: block; margin: 0 0 5px; }
.bo_vc_w textarea { color: #000; vertical-align: middle; margin: 0; min-height: 100px; background: none !important; font-size: 0.9rem; }
.bo_vc_w textarea:focus { }
.bo_vc_w #wr_secret {}

/* 댓글 쓰기 */
.bo_vc_w_wr { margin: 0; margin-top: 1rem; }
.bo_vc_w_info { margin: 0; padding: 15px 0; line-height: 1; -webkit-flex: 1; -ms-flex: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; -ms-flex-pack: space-between; }
.bo_vc_w_info .bo_vc_w_name {}
.bo_vc_w_info input[type="checkbox"] + label { color: #999; margin-bottom: 0; }
.bo_vc_w_info input[type="checkbox"] + label:hover { color: #999; }
.bo_vc_w_info input[type="checkbox"]:checked + label { color: #3f4553; }
.bo_vc_w_wr { }
.bo_vc_w_wr .btn_submit { display: block; border-radius: 0; padding: .375em 1.25rem; background: #3f4553; letter-spacing: -1px; height: calc(1.5em + .75rem + 2px); }

/*캡챠*/
#captcha { display: block; clear: both; }
#captcha:after { display: block; visibility: hidden; clear: both; content: ""; }
#captcha legend { display: none; }
#captcha #captcha_img,
#captcha #captcha_key,
#captcha #captcha_mp3,
#captcha #captcha_reload { border: 1px solid #ddd; border-radius: 0; background: #fff; color: #3f4553; }
#captcha #captcha_img {}
#captcha #captcha_key { font-size: 1rem; font-weight: 400; }
#captcha #captcha_mp3 { display: none; }
#captcha #captcha_reload { position: relative; display: inline-block; width: 40px; }
#captcha #captcha_mp3:after,
#captcha #captcha_reload:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; font-family: 'FontAwesome'; font-size: 20px; text-indent: 0; -webkit-flex: 1; -ms-flex: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -ms-flex-pack: center; }
#captcha #captcha_mp3:after { content: "\f028"; }
#captcha #captcha_reload:after { content: "\f021"; }
#captcha #captcha_info { display: none; }
#captcha #captcha_audio { display: none; }
#captcha #captcha_reload { display: block; float: left; width: 40px; height: calc(1.5em + .75rem + 2px); }
#captcha #captcha_img { display: block; float: left; width: 100px !important; height: calc(1.5em + .75rem + 2px); }
#captcha #captcha_key { display: block; float: left; width: calc( 100% - 150px ) !important; height: calc(1.5em + .75rem + 2px); margin: 0 5px 0 5px; max-width: 160px; }