/*button style*/
.btn-custom,
a.btn-custom { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; border: none; border-radius: 6px; box-sizing: border-box; background: #00479c; font-size: 16px; font-weight: 500; color: #fff; text-align: center; transition: .2s all ease-out; }
.btn-custom:disabled,
.btn-custom.disabled { background: #d9d9d9;; }

.btn-custom-v1,
a.btn-custom-v1 { border: 1px solid #00479c; box-sizing: border-box; background: #fff; color: #00479c; }

.btn-group .btn:not(:last-child) { margin-bottom: 16px; }

.btn-upload { display: block; position: relative; width: 120px; height: 40px; border: 1px solid #00479c; border-radius: 6px; box-sizing: border-box; background: #fff; overflow: hidden; }
.btn-upload label { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; width: 100%; height: 100%; font-size: 14px; font-weight: 500; color: #00479c; cursor: pointer; }
.btn-upload input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.btn-upload2 { display: block; position: relative; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; background: url('../img/ico_setting1.svg') center center no-repeat #fff; overflow: hidden; }
.btn-upload2 label { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; }
.btn-upload2 input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.btn-upload3 { display: block; position: relative; width: 24px; height: 24px; background: url('../img/ico_file1.svg') center center no-repeat #fff; overflow: hidden; }
.btn-upload3 label { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; }
.btn-upload3 input[type="file"] { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.btn-floating-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-width: 600px; margin: 0 auto; padding: 15px 24px 22px; box-sizing: border-box; background: #fff; }

.btn-floating-write { position: fixed; right: calc(50% - 280px); bottom: 70px; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25); box-sizing: border-box; background: url('../img/ico_write2.svg') center center no-repeat #00479c; }

.btn-floating-comment { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-width: 600px; margin: 0 auto; padding: 17px 24px; border-top: 1px solid #d9d9d9; box-sizing: border-box; background: #fff; }
.btn-floating-comment .inp-group-comment { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px 0 12px; border: 1px solid #d9d9d9; border-radius: 6px; box-sizing: border-box; }
.btn-floating-comment .inp-group-comment .inp-comment { display: block; width: calc(100% - 24px); height: 48px; min-height: 48px; max-height: 96px; padding: 12px 0; border: none; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #171717; overflow-y: auto; resize: none; }
.btn-floating-comment .inp-group-comment .btn-send { width: 24px; height: 24px; margin-bottom: 12px; border: none; background: url('../img/ico_send1.svg') center center no-repeat; }


/*checkbox & radio button style*/
.ck-custom { display: none; }
.ck-custom + label { display: flex; cursor: pointer; }
.ck-custom + label .custom { display: block; width: 20px; height: 20px; background: url('../img/common/ico_check1_off.svg') center center no-repeat; }
.ck-custom:checked + label .custom { background-image: url('../img/common/ico_check1_on.svg'); }

.ck-custom2 { display: none; }
.ck-custom2 + label { display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; border: 1px solid #00479c; border-radius: 6px; box-sizing: border-box; font-size: 12px; font-weight: 400; color: #00479c; cursor: pointer; }
.ck-custom2:checked + label { background: #00479c; color: #fff; }

.ck-custom3 { display: none; }
.ck-custom3 + label { display: flex; justify-content: center; align-items: center; width: 100%; height: 30px; border: none; border-radius: 5px; box-sizing: border-box; background: #d9d9d9; font-size: 10px; font-weight: 500; color: #fff; cursor: pointer; }
.ck-custom3:checked + label { background: #00479c; }


/*select style*/
.select-custom { display: block; width: 100%; height: 50px; padding: 0 56px 0 16px; border: 1px solid #717171; border-radius: 6px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #171717; }

.select-custom2 { display: block; padding-right: 32px; border: none; box-sizing: border-box; background-position: right center; font-size: 16px; font-weight: 700; color: #000; }


/*toggle button style*/
.switch { display: inline-block; position: relative; width: 48px; height: 24px; vertical-align: middle; }
.switch input { display: none; }

.switch .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #d9d9d9; transition: .4s; cursor: pointer; }
.switch .slider:before { content: ''; position: absolute; left: 4px; bottom: 4px; width: 16px; height: 16px; background: #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1); box-sizing: border-box; transition: .4s; }
.switch input:checked + .slider { background: #00479c; }
.switch input:focus + .slider { box-shadow: 0 0 1px #00479c; box-sizing: border-box; }
.switch input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }

.switch .slider.round { border-radius: 12px; box-sizing: border-box; }
.switch .slider.round:before { border-radius: 50%; box-sizing: border-box; }


/*form style*/
.frm-group:not(:last-child) { margin-bottom: 24px; }
.frm-group-v1:not(:last-child) { margin-bottom: 16px; }

.tit-frm { margin-bottom: 4px; font-size: 14px; font-weight: 400; color: #00479c; }

.inp-frm { display: block; width: 100%; height: 50px; padding: 0 16px; border: 1px solid #717171; border-radius: 6px !important; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #171717; }
.inp-frm.active { border-color: #00479c; color: #00479c; }

.inp-frm-v1 { border-color: #d9d9d9; }

textarea.inp-frm { height: 240px; padding: 16px; resize: none; }

.frm-guide { font-size: 12px; font-weight: 400; color: #717171; }

/*검색 창*/
.inp-group-search { display: flex; justify-content: space-between; align-items: center; height: 50px; border-radius: 6px; box-sizing: border-box; background: #f4f4f4; }
.inp-group-search .inp-search { display: block; width: calc(100% - 56px); height: 100%; padding-left: 16px; border: none; box-sizing: border-box; background: none; font-size: 14px; font-weight: 400; color: #171717; }
.inp-group-search .btn-search { width: 56px; height: 100%; border: none; background: url('../img/ico_search1.svg') center center no-repeat; }

.search-group { padding: 16px 24px; border-bottom: 1px solid #d9d9d9; box-sizing: border-box; }

/*데이트피커 창*/
.inp-date { display: block; width: 100%; height: 30px; padding: 0 10px 0 30px; border: 1px solid #d9d9d9; border-radius: 5px !important; box-sizing: border-box; background: url('../img/common/ico_calendar1.svg') 10px center no-repeat #fff; font-size: 12px; font-weight: 400; color: #171717; }
.datetime-group { display: flex; align-items: center; position: relative; padding: 18px 24px; border-bottom: 1px solid #f4f4f4; box-sizing: border-box; }
.datetime-group .tit { width: 70px; font-size: 14px; font-weight: 500; color: #171717; }
.datetime-group .inp-group-date { display: flex; align-items: center; width: calc(100% - 70px); }
.datetime-group .inp-group-date .inp-date { width: calc(50% - 8px); }
.datetime-group .inp-group-date .unit { display: flex; justify-content: center; align-items: center; width: 16px; font-size: 12px; font-weight: 400; color: #d9d9d9; }


/*thumbnail style*/
.thumb { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }


/*tab menu style*/
.tab-menu { display: flex; align-items: center; width: 100%; }
.tab-menu .tab { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; border-bottom: 2px solid #f4f4f4; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #000; }
.tab-menu .tab.active { border-color: #00479c; color: #00479c; }


/*board style*/
.board-tool { display: flex; justify-content: space-between; align-items: center; min-height: 67px; padding: 18px 24px; border-bottom: 1px solid #d9d9d9; box-sizing: border-box; background: #fff; }
.board-tool.sticky { position: sticky; top: 64px; }
.board-tool .tit { font-size: 16px; font-weight: 700; color: #000; }
.board-tool .btn { display: flex; justify-content: center; align-items: center; height: 30px; padding: 0 12px; border: 1px solid #00479c; border-radius: 5px; box-sizing: border-box; background: none; font-size: 12px; font-weight: 400; color: #00479c; }
.board-tool .btn-group-ico { display: flex; align-items: center; }
.board-tool .btn-group-ico .btn-ico { width: 24px; height: 24px; margin-right: 16px; background: center center no-repeat; }
.board-tool .btn-group-ico .btn-ico:last-child { margin-right: 0; }
.board-tool .btn-group-ico .btn-ico-search { background-image: url('../img/ico_search2.svg'); }
.board-tool .btn-group-ico .btn-ico-friend { background-image: url('../img/ico_friend1.svg'); }
.board-tool .btn-group-ico .btn-ico-message { background-image: url('../img/ico_message1.svg'); }

.board-navigation { display: flex; justify-content: space-between; padding: 8px; box-sizing: border-box; }
.board-navigation dt a { display: flex; align-items: center; font-size: 12px; font-weight: 400; color: #171717; }
.board-navigation dl:last-child dt a { justify-content: flex-end; text-align: right; }


/*paging style*/
.board-tool2 { display: flex; align-items: center; position: relative; margin-bottom: 16px; padding: 16px 24px; box-sizing: border-box; }
.board-tool2 .btn-write { display: flex; justify-content: center; align-items: center; position: absolute; right: 24px; width: 84px; height: 30px; border-radius: 5px; box-sizing: border-box; background: #00479c; font-size: 12px; font-weight: 500; color: #fff; }
.board-tool2 .btn-write:before { content: ''; display: block; width: 14px; height: 14px; margin-right: 7px; background: url('../img/ico_write2.svg') center center no-repeat; background-size: contain; }

.paging { display: flex; justify-content: center; align-items: center; width: 100%; }
.paging a { display: flex; justify-content: center; align-items: center; font-size: 10px; font-weight: 400; color: #171717; transition: .2s all ease-out; }
.paging .btn-paging { width: 16px; height: 16px; background: center center no-repeat #fff; }
.paging .btn-paging-prev { background-image: url('../img/common/ico_arrow_paging1_prev1.svg'); }
.paging .btn-paging-next { background-image: url('../img/common/ico_arrow_paging1_next1.svg'); }
.paging .num { display: flex; justify-content: center; align-items: center; }
.paging .num a { margin: 0 4px; }


/*noti style*/
.game-noti { display: flex; align-items: center; position: sticky; top: 64px; height: 30px; padding: 0 16px; box-sizing: border-box; background: #c0ddff; font-size: 10px; font-weight: 700; color: #00479c; }
.game-noti img { margin-right: 16px; }


@media only screen and (max-width: 600px) {
	/*button style*/
	.btn-floating-write { right: 18px; }
}