@charset "utf-8";

.no_data:not(.no-data) {display:none !important;}

/**************************************
	Paging
**************************************/

#paging_area,
.pagingWrap,
.bod_page {display:block; position:relative; margin-top:7rem;}
.bod_page > *:not(.paging) {opacity:0;}


.paging {display:flex; align-items:center; flex-wrap:wrap; justify-content:center; margin:-.4rem;}
.paging > * {display:block; position:relative; min-width:calc(4rem + 2px); height:calc(4rem + 2px); padding:0 1rem; margin:.5rem; border:1px solid transparent; border-radius:.4rem; font-family:'Kanit','Pretendard'; font-size:1.7rem; line-height:calc(4rem - 2px); text-align:center;}
.paging span,
.paging strong {background:#17212D; border-color:#17212D; color:#fff;}

.paging .pre_end,
.paging .pre,
.paging .next,
.paging .next_end {overflow:hidden; border-color:#DAE1EC; background:url(../img/common/spr_paging.svg) no-repeat 0 0 / auto 4rem; text-indent:-999px;}

.paging .pre {background-position-x:-4rem;}
.paging .next {background-position-x:-8rem;}
.paging .next_end {background-position-x:-12rem;}


/**************************************
	Page Info
**************************************/

.bod_head {display:flex; flex-wrap:wrap; flex-direction:row-reverse; justify-content:space-between; align-items:center; margin-bottom:3rem;}

.bod_head .page_num {opacity:0;}
.bod_head .pageNumInfo {display:flex; align-items:center; margin:1rem 0 1rem 2rem;}
.bod_head .pageNumInfo .bar {display:block; width:1px; height:1rem; background:#E2E7EF; margin:0 1.2rem;}
.bod_head .pageNumInfo strong {color:#596273; font-weight:400; margin-right:.5em;}
.bod_head .pageNumInfo span {color:#7C89A1;}
.bod_head .pageNumInfo .now span {color:#367FFC; font-weight:700;}

.bod_head .bod_search {display:flex; align-items:center; flex-wrap:wrap; margin:-.5rem;}
.bod_head .bod_search > * {margin:.5rem;}

@media all and (max-width:640px) {
	.bod_head .bod_search {flex-grow:1;}
	.bod_head .bod_search > * {flex-grow:1;}
	.bod_head .bod_search select {flex-grow:0; flex-shrink:0;}	
}
@media all and (max-width:480px) {
	.bod_head .bod_search select {flex-grow:1; flex-shrink:1;}	
}


/**************************************
	Footer
**************************************/

.bod_foot {margin-top:4.5rem;}
.bod_foot .btnboxC {opacity:0;}

.btnboxR {display:flex; flex-wrap:wrap; margin:-.5rem; justify-content:end; align-items:center;}
.btnboxR > * {margin:.5rem;}
.btnboxR .board {display:none;}

.bod_list ~ .btnboxR,
.bod_page ~ .btnboxR {margin-top:5rem;}
 
@media all and (max-width:480px) {
	.btnboxR > * {flex-grow:1; width:100%;}	
}

.bod_wrap ~ .list-gellery-box {margin-top:7rem;}


/**************************************
	Viewer
**************************************/

.bod_view {display:block; border-top:1px solid #17212D;}
.bod_view h4,
.conts .bod_view h4 {padding:2.5rem; margin:0; border-bottom:1px solid #D9DEE5; text-align:center; font-size:3rem; margin:0; color:#111; font-weight:500;}
.bod_view h4:before,
.conts .bod_view h4:before {display:none;}

.bod_view .view_info {display:block; position:relative; padding:1.6667rem; border-bottom:1px solid #D9DEE5; background:#F8F9FC;}
.bod_view .view_info ul {display:flex; align-items:center; justify-content:end; flex-wrap:wrap; margin:-.5rem -1.5rem;}
.bod_view .view_info ul li {display:block; position:relative; margin:.5rem 1.5rem; padding-left:1.7rem; line-height:1.4em;}
.bod_view .view_info ul li:before {content:""; display:block; position:absolute; top:.7em; margin-top:-3px; left:0; width:5px; height:5px; background:#dadada; border-radius:100%;}
.bod_view .view_info ul li strong {font-weight:400;}
.bod_view .view_info ul li strong:after {content:" : ";}

@media all and (max-width:1024px) {
	.bod_view .view_info {padding:2rem;}
	.bod_view .view_info ul {margin:-.5rem -1rem;}
	.bod_view .view_info ul li {margin:.5rem 1rem;}
}
@media all and (max-width:640px) {
	.bod_view .view_info ul {justify-content:start;}
}

.bod_view .view_cont {padding:7rem 3.5rem; border-bottom:1px solid #D9DEE5;}
.bod_view .view_cont * {font-size:1em !important;}
.bod_view .view_cont img {display:block; margin:1rem auto;}
.bod_view .view_cont .mT10 {margin-top:2rem !important;}

@media all and (max-width:640px) {
	.bod_view .view_cont {padding:4rem 2rem;}	
}

.bod_view .view_file {display:flex; padding:2rem 0; border-bottom:1px solid #D9DEE5;}
.bod_view .view_file dt {display:flex; align-items:center; justify-content:center; width:10rem; flex-shrink:0; border:0 solid #E2E7EF; border-right-width:1px; text-align:center; margin-right:2rem; font-weight:700;}
.bod_view .view_file dd {display:block; flex-grow:1;}
.bod_view .view_file li + li {margin-top:1rem;}
.bod_view .view_file li a:not(.btn) {font-size:1.6rem; color:#596273;}
.bod_view .view_file li .btn_fileview:not(.btn) {display:none;}
.bod_view .view_file li .btn {margin-left:1rem;}

@media all and (max-width:380px) {
	.bod_view .view_file {display:block; padding:0;}
	.bod_view .view_file dt {margin:0; border-right-width:0; border-bottom-width:1px; width:100%; padding:1rem;}
	.bod_view .view_file dd {padding:2rem;}
	.bod_view .view_file li + li {margin-top:1.5rem;}
}



/**************************************
	Write
**************************************/

.bod_wrap fieldset > p.taR.pB5 {opacity:0;}

.agree_wrap {margin-bottom:4rem; border:1px solid #ddd; border-radius:3rem; padding:3rem 3rem 1rem;}
.agree_wrap dl {display:flex;}
.agree_wrap dl + dl {margin-top:2rem;}
.agree_wrap dl > dt {flex-shrink:0; width:17rem; font-weight:800;}
.agree_wrap dl > dd {display:block; flex-grow:1; width:calc(100% - 18rem);}
.agree_wrap .exp {display:block; position:relative; border-radius:3rem; background:#F4F6FB; padding:3rem; margin-top:3rem; text-align:center;}
.agree_wrap .minAgree {display:flex; justify-content:space-between; padding:2rem 0;}
.agree_wrap .minAgree + .minAgree {border-top:1px solid rgba(0,0,0,.1);}

@media all and (max-width:640px) {
	.agree_wrap dl {display:block;}
	.agree_wrap dl > dt {width:auto; margin-bottom:.5rem;}
	.agree_wrap dl > dd {width:auto;}
	.agree_wrap .minAgree {flex-direction:column;}
	.agree_wrap .minAgree p { text-align:right;}
}

.write-guide {display:block; margin:4rem 0 2rem; text-align:right; font-size:1.7rem;}
.write-guide .red {color:#FF4A57; font-weight:800; margin-right:1rem;}

.bod_write {display:block; position:relative; margin-top:2rem; border-top:1px solid #17212D;}
.bod_write .bt_white_s {opacity:0;}
.bod_write .btn_address {opacity:0;}
.bod_write dd .orange {display:none;}
.bod_write dt .red {margin-right:.5rem;}
.bod_write dl {display:flex; align-items:start; border-bottom:1px solid #D9DEE5;}
.bod_write dt,
.bod_write dd {display:flex; align-items:center; padding:1rem; min-height:7rem;}
.bod_write dt {width:13rem; flex-shrink:0; font-weight:700;}
.bod_write dd {flex-wrap:wrap; flex-grow:1;}
.bod_write dd > * {margin-right:1rem; max-width:calc(100% - 1rem);}
.bod_write dd p.tip {width:100%;}
.bod_write dd .wp30 {width:30rem !important;}
.bod_write dd .w90 {width:100% !important;}

.bod_write label[for="loginPasswdInputUseYn"] {display:block; border-radius:.5rem; height:5rem; text-align:center; line-height:calc(5rem - 2px); border:1px solid transparent; color:#fff; background:#17212D; font-weight:600; padding:0 3.5rem;}
.bod_write label[for="loginPasswdInputUseYn"]:not(.checked) {background-color:#fff; border-color:#DAE1EC; color:#5B6A7B;}
.bod_write label[for="loginPasswdInputUseYn"] ~ input[type="checkbox"] {position:absolute; top:0; left:0; opacity:0; z-index:-99;}

@media all and (max-width:640px) {
	.bod_write dd > * {flex-grow:1; margin:.5rem; margin-left:0;}
	.bod_write dd > .btn {flex-shrink:0;}
}
@media all and (max-width:460px) {
	.bod_write dl {display:block; padding:2rem 1rem;}
	.bod_write dt,
	.bod_write dd {padding:0 !important; width:auto !important; height:auto !important; min-height:0;}
	.bod_write dt {margin-bottom:1.5rem;}
	.bod_write dd {padding-left:.5rem !important;}
}

.file-upload-area {width:100%;}
.file-upload-area > div + div h3 {display:none;}
.file-upload-area .drag_and_drop {border-radius:3rem; font-size:1.6rem; background:rgba(54, 127, 252, 0.1); border:2px dashed rgba(54, 127, 252, 0.3);}

.file-upload-area [data-file-list-area] .no-data {border-radius:2rem; background:#F4F6FB;}
.file-upload-area [data-file-list-area] li + li {margin-top:1rem;}
.file-upload-area [data-file-list-area] li:not(.no-data) {display:flex; flex-direction:row-reverse; align-items:center; padding:1rem 2rem; flex-wrap:wrap; border:1px solid #E2E7EF; border-radius:2rem;}
.file-upload-area [data-file-list-area] li:not(.no-data) span {display:inline; color:#777;}
.file-upload-area [data-file-list-area] li:not(.no-data) span .orange {display:inline; opacity:.8;}
.file-upload-area [data-file-list-area] li:not(.no-data) .btn.small.cancel {display:inline-block; vertical-align:middle; width:3rem; height:3rem; background:url(../img/common/btn_del.svg) no-repeat 50% 50% / contain; border:none; margin-right:1rem; flex-shrink:0; padding:0 !important; line-height:0; text-align:left; text-indent:-999px; overflow:hidden;}
.file-upload-area [data-file-list-area] li:not(.no-data) > div {display:block; width:100%; position:relative;}
.file-upload-area [data-file-list-area] li:not(.no-data) > div label {position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden; opacity:0; z-index:-999;}
.file-upload-area [data-file-list-area] li:not(.no-data) > div input[type="text"] {display:block; width:100%; position:relative; top:0; left:0; margin-top:.5rem;}



/**************************************
	Basic List
**************************************/

.bod_list {border-top:2px solid #17212D; text-align:center;}
.bod_list tr > * {height:6.6rem; border-bottom:1px solid #E9EDF4; vertical-align:middle; padding:1rem;}
.bod_list thead tr {background:#F8F9FC;}
.bod_list thead th {text-align:center; vertical-align:middle; color:#222; font-weight:600;}
.bod_list tbody td {color:#596273;}

.bod_list .list_num {width:10rem;}
.bod_list .list_file {width:8rem;}
.bod_list .list_write,
.bod_list .list_writer {width:12rem;}
.bod_list .list_answer {width:12rem;}
.bod_list .list_date {width:14rem;}
.bod_list .list_hit {width:12rem;}

.bod_list td.list_tit {text-align:left;}
.bod_list .list_tit a {color:#111; font-weight:700;}
.bod_list .list_tit a:hover,
.bod_list .list_tit a:focus {text-decoration:underline;}
.bod_list .list_answer span {color:#D72E65;}
.bod_list .list_answer .answer_complete {color:#0C64B9;}
.bod_list .list_file img + img + img {display:none !important;}

.no-data.bod {border-bottom:1px solid #E9EDF4;}

@media all and (max-width:1024px) {
	.bod_list .list_num,
	.bod_list .list_file ,
	.bod_list .list_hit {display:none;}
}
@media all and (max-width:640px) {
	.bod_list {display:block;}
	.bod_list thead {display:none;}
	.bod_list tbody {display:block;}
	.bod_list tr {display:flex; flex-wrap:wrap; padding:2.5rem 2rem; align-items:center; border-bottom:1px solid #E9EDF4;}
	.bod_list tr > * {display:flex; align-items:center; width:auto; padding:.5rem 0;; border:none; height:auto;}
	.bod_list tr > *:not(.list_tit) {width:auto !important;}
	.bod_list .list_tit {width:100%; padding:.5rem 0;}
	.bod_list .list_tit a {display:block; font-size:1.9rem; font-weight:800; color:#17212D;}
	.bod_list .list_tit ~ * + *:before {content:""; display:block; width:1px; height:1rem; background:#E2E7EF; margin:0 1.5rem;}
	.bod_list .list_tit + .list_file + *:before {display:none;}
	.bod_list .list_hit:after {content:" hit"}
	.bod_list .list_file {display:none !important;}
}



/**************************************
	Web zine
**************************************/

/* List */

.bod-webzine {display:block; position:relative; border-top:1px solid #17212D;}
.bod-webzine li {border-bottom:1px solid #D9DEE5;}
.bod-webzine a {display:flex; align-items:center; padding:3.2rem 3rem;}
.bod-webzine .thumb {display:block; position:relative; flex-shrink:0; width:28rem; overflow:hidden; margin-right:2.5rem; background:#D9DEE5;}
.bod-webzine .thumb:before {content:""; display:block; padding-top:calc(180 / 280 * 100%);}
.bod-webzine .thumb img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.bod-webzine .desc {display:block; position:relative; width:calc(100% - 30.5rem); flex-grow:1;}
.bod-webzine .desc .subject {display:block; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:2.6rem; color:#17212D; font-weight:700; margin-bottom:1rem;}
.bod-webzine .desc .txt {display:block; display:-webkit-box; overflow:hidden; height:2.8em; line-height:1.4em; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:1rem;}
.bod-webzine .desc .info {display:flex; align-items:center; flex-wrap:wrap; font-size:1.6rem; color:#93A1B9;}
.bod-webzine .desc .info .bar {display:block; width:1px; height:1rem; background:#E2E7EF; margin:0 1rem;}

@media all and (max-width:1024px) {
	.bod-webzine a {padding:3rem 2rem;}
	.bod-webzine .thumb {width:24rem;}
}
@media all and (max-width:640px) {
	.bod-webzine a {padding:3rem 0;}
	.bod-webzine .thumb {width:20rem;}
	.bod-webzine .desc .subject {font-size:2.3rem;}
}
@media all and (max-width:480px) {
	.bod-webzine .thumb {display:none;}
	.bod-webzine .desc .subject {font-size:2rem;}
}



/**************************************
	Gallery
**************************************/

.bod_photo {display:block; position:relative; border-top:2px solid #17212D;}
.bod_photo ul {display:flex; margin:-2rem -1rem; flex-wrap:wrap; padding:5rem 0 0;}
.bod_photo li {display:block; width:calc(100% / 3); padding:2rem 1rem;}
.bod_photo li.no-data {width:100% !important; border-bottom:1px solid #D9DEE5; padding:4.75rem 0;}
.bod_photo li a {display:block; position:relative; border-bottom:1px solid #D9DEE5;}
.bod_photo li a .thumb {display:block; position:relative; background:#D9DEE5; overflow:hidden; border-radius:1rem;}
.bod_photo li a .thumb:before {content:""; display:block; padding-top:calc(280 / 413 * 100%);}
.bod_photo li a .thumb img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.bod_photo li a .date {display:none;}
.bod_photo li a .tit {display:block; position:relative; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2.5rem 0 3rem; font-size:2.2rem; font-weight:700;}

@media all and (max-width:1024px) {
	.bod_photo li a .tit  {font-size:2rem;}
}
@media all and (max-width:640px) {
	.bod_photo li {width:50%;}
}
@media all and (max-width:380px) {
	.bod_photo li {width:100%;}
}



/**************************************
	Movie
**************************************/

.bod_movie {display:block; position:relative; border-top:2px solid #17212D;}
.bod_movie ul {display:flex; margin:-2rem -1rem; flex-wrap:wrap; padding:5rem 0 0;}
.bod_movie ul:after {display:none !important;}
.bod_movie li {display:block; width:calc(100% / 3); padding:2rem 1rem;}
.bod_movie li.no-data {width:100% !important; border-bottom:1px solid #D9DEE5; padding:4.75rem 0;}
.bod_movie li a {display:block; position:relative; border-bottom:1px solid #D9DEE5;}
.bod_movie li a .thumb {display:block; position:relative; background:#D9DEE5; overflow:hidden; border-radius:1rem;}
.bod_movie li a .thumb:before {content:""; display:block; padding-top:calc(280 / 413 * 100%);}
.bod_movie li a .thumb img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.bod_movie li a .date {display:none;}
.bod_movie li a .tit {display:block; position:relative; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2.5rem 0 3rem; font-size:2.2rem; font-weight:700;}

@media all and (max-width:1024px) {
	.bod_movie li a .tit  {font-size:2rem;}
}
@media all and (max-width:640px) {
	.bod_movie li {width:50%;}
}
@media all and (max-width:380px) {
	.bod_movie li {width:100%;}
}