@charset "utf-8";

/* 아래 태그들만 골라서 여백을 초기화한다. 사용자가 추가, 삭제하셔도 됨. */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0; /*font: inherit;*/	}

/* HTML5 태그가 적용되지 않는 오래된 브라우저에서 인식할 수 있도록 블럭요소로 설정*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {line-height: 1;} /* 줄간격 100% */
body.no_drag {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
ol, ul, li {list-style: none;} /* 목록앞 기호를 안나오게 한다.*/
blockquote, q {quotes: none;} /* 인용문 기호 안나오게 한다. */

/* 인용문 앞, 뒤쪽에 콘텐츠내용 빈공백 삽입 */
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;} 

/* 테이블 태그 작성시 셀과 셀과 사이 여백을 없앰.*/
table {border-collapse: collapse;	border-spacing: 0;} 

a {text-decoration: none; color: #333;}

html {font-size:16px;}

@media screen and (max-width:580px){
  html {font-size:14px;}
}

@media screen and (max-width:480px){
  html {font-size:14px;}
}

html, body{position: relative; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color: #333; width:100%; height:100%;}

body * {box-sizing:border-box; -webkit-tap-highlight-color:transparent;}


*::-webkit-scrollbar {width:6px; height:6px;}
*::-webkit-scrollbar-thumb {height:30%; background:#999999; border-radius:3px;}
*::-webkit-scrollbar-thumb:hover {background:#7d7d7d;}
*::-webkit-scrollbar-track {background:#dddddd;  /*스크롤바 뒷 배경 색상*/}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="search"],
select {height:40px; line-height:40px; padding:0 10px; border:1px solid #999; vertical-align:middle; border-radius:4px; max-width:800px; min-width:100px; padding:0 5px; border-radius:4px; background:#fff; color:#333; font-size:0.9rem;}

@media screen and (max-width:760px){
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="password"],
  input[type="search"],
  select {height:50px; line-height:48px;}
}

input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
select:disabled {opacity:0.5;}

input[type="search"] {padding:0 5px; border-radius:4px;}

input[type="number"] {width:80px; text-align:right;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}

select::-ms-expand {display: none;}

label {padding-right:0;}

input[type="radio"] {display:none; vertical-align:middle;}
input[type="radio"] + label {cursor:pointer; position:relative; margin-right:30px; vertical-align:middle; display: flex; align-items: center; height: 19px;}
input[type="radio"] + label:before {content:""; display:inline-block; width:17px; height:17px; border:1px solid #999; margin-right: 5px; border-radius:50%; background:#fff;}
input[type="radio"]:checked + label:after {content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:#177bff; background-size:100%; top: 5px; left: 5px;}
input[type="radio"] + label span {vertical-align:middle; margin-left: 5px;}

input[type="checkbox"] {display:none; vertical-align:middle;}
input[type="checkbox"] + label {cursor:pointer; position:relative; margin-right:30px; vertical-align:middle; display: flex; align-items: center; height: 19px;}
input[type="checkbox"] + label:before {content:""; display:inline-block; width:17px; height:17px; border:1px solid #999; margin-right:5px; background:#fff; border-radius: 3px;}
input[type="checkbox"]:checked + label:after {content:""; position:absolute; width:17px; height:17px; top: 0; left: 0; background:url('/img/checked.png') no-repeat 3px 5px; background-size: 13px 9px; z-index:1;}
input[type="checkbox"] + label span {vertical-align:middle; margin-left: 5px;}
input[type="checkbox"]:disabled + label {opacity:0.5}

input[type="number"] + label {margin-left:5px;}


input:disabled {opacity:.3;}
input[type="radio"]:disabled + label {opacity:.3;}

input.readonly + label, input.readonly + label {opacity:.3; cursor:default;}

textarea {border:1px solid #999; border-radius:0; font-size:16px; padding:10px; font-family:'Pretendard'; width:100%; resize:vertical; min-height:100px; max-width:800px; border-radius:4px; color:#333;}


.no_gap {gap:0;}

/* 모바일 레이아웃 관련 */
.layout_m {display:none;}


/* 하단 앱바 */
#app_bar {position:fixed; width:100%; height:50px; bottom:0; left:0; z-index:2; background:rgba(250,250,250,.8); box-shadow:0 -2px 4px rgba(0,0,0,.15);  display:flex; justify-content: center; backdrop-filter: blur(12px); -webkit-backdrop-filter:blur(12px); display:none;}
#app_bar .inner {width:100%; max-width:768px; height:100%; display:flex; justify-content: space-around; align-items: center; padding-top: 3px;}
#app_bar button {font-size:1.6rem; color:#333; padding:0; width:50px; height:100%; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; gap:3px; flex-direction: column;}
#app_bar button P {font-size:0.7rem;}
#app_bar a {font-size:1.6rem; color:#666; width:50px; height:100%; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; gap:3px; flex-direction: column;}
#app_bar a p {font-size:0.7rem;}
#appbar_bg {width:100%; height:50px; display:none;}

@media screen and (max-width:350px){
  #app_bar button P {font-size:0.6rem;}
  #app_bar a p {font-size:0.6rem;}
}


/* 페이징 네비게이션 */
.paging {text-align:center; display:flex; justify-content:center; align-items:center; gap:5px; margin-top: 40px;}
.paging button {background:#fff; border:1px solid #999; border-radius:4px; color:#333; height:30px; min-width:30px;}
.paging button.on {background:#666; color:#fff; font-weight:bold; cursor:default;}


/* 맨 위로 버튼 */
.btn_totop {position:fixed; width:50px; height:50px; background: rgba(250, 250, 250, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); left:50%; bottom:-60px; transform:translateX(-50%); z-index:10; border-radius:50%; border:1px solid rgba(0,0,0,.5); font-size:1.4rem; color:rgba(0,0,0,.5); display:flex; justify-content: center; align-items: center;}



/* 이미지 확대 */
.img_closeup {position:fixed; z-index:9999; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.7);}
.img_closeup img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:calc(100% - 20px); max-height:calc(100% - 20px);}
.img_closeup .btn_download {position:absolute; top:200px; left:50%; transform:translateX(-50%); line-height:40px;}
.img_closeup .btn_download .bi {font-size:20px; vertical-align:middle; margin-right:4px;}
.img_closeup .btn_download span {vertical-align:middle;}


/* 파일 업로드 관련 */
.file_upload_area {font-size:0;}
.file_upload_area .file_name {font-size:14px;}
.file_upload_area label {display:flex; width:100px; height:100px; color:#999; border:1px solid #999; border-radius:4px; font-size:40px; align-items:center; justify-content:center;}
.file_upload_area label:not(.disabled):hover {cursor:pointer;}
.file_upload_area label.disabled {opacity:.5;}
.file_upload_area label i {margin:0;}
.file_upload_area input[type="file"] {position:absolute; width:0; height:0; padding:0; overflow:hidden; border:0;}
.file_upload_area .upload_display {display:inline-block; position:relative; border-radius:4px; background:#eee; padding:10px;}
.file_upload_area .upload_display .upload_thumb {max-height:200px; max-width: 800px;}
.file_upload_area .upload_display .upload_thumb.cutline {border: 1px solid #ff5151;}
.file_upload_area .upload_display .del_file {position:absolute; color:red; cursor:pointer; font-size:20px; font-weight:bold; width:20px; height:20px; border-radius:50%; border:none; background:#fff; padding:0;}
.file_upload_area .upload_display.image .del_file,
.file_upload_area .upload_display.video .del_file {top:0px; right:0px;}
.file_upload_area .upload_display.file .del_file {top:50%; right:0px; transform:translateY(-50%);}
.file_upload_area .upload_display.image .file_name,
.file_upload_area .upload_display.video .file_name {margin-top:5px; font-size:14px;}
.file_upload_area .upload_display.file .file_name {font-size:14px;}

.file_upload_area .preview_cdn {margin-top:10px;}

.member_upload_by_excel {margin-top:20px; display: flex; justify-content: flex-end; gap: 10px;}
.excel_upload_area {font-size:0; font-size: 0; display: flex; align-items: center; color: #333;}
.excel_upload_area .file_name {font-size:14px;}
.excel_upload_area label {display:flex; align-items:center; justify-content:center;}
.excel_upload_area label:hover {cursor:pointer;}
.excel_upload_area input[type="file"] {position:absolute; width:0; height:0; padding:0; overflow:hidden; border:0;}
.excel_upload_area .upload_display {display: flex; position: relative; align-items: center; gap: 5px;}
.excel_upload_area .upload_display .del_file {color:red; cursor:pointer; font-size:20px; font-weight:bold; width:unset; height:unset; border-radius:unset; border:none; background:none; padding:0;}
.excel_upload_area .upload_display.file .file_name {font-size:14px;}

.guide {line-height:1.3;}
.guide.blue {color:blue;}
.guide.red {color:red;}
.guide p:before {content:"※ ";}
.guide .blue {color:blue;}
.guide .red {color:red;}

.write_layout .required p:first-child:after {content:"*"; color:red;}


.no_list {text-align:center; padding:40px 0; font-size:1.2rem; border-bottom:1px solid #999;}
.no_list i {margin-right:10px;}


#game_navi {margin-top:40px; opacity:0; position:relative;}
#game_navi .title_block .title {font-size:1.4rem; font-weight:600;}
#game_navi .title_block .guide {font-size:1rem; color:#999; margin-top:5px;}
#game_navi .navi_inner {position:absolute; width:100%; top:50px; left:0;}
#game_navi .swiper-slide {display:flex; justify-content: center; align-items: center; position:relative; padding-top:20px;}
#game_navi .swiper-slide a {width: 100%; height: 100%; display:flex; justify-content: center; align-items: center;}
#game_navi .swiper-slide .img_area {width:100%; height:100%; display:flex; justify-content: center; align-items: center;}
#game_navi .swiper-slide .img_area img {border-radius:4px;}

/* 게임 상세페이지 내 제품내비 툴팁 */
.game_tooltip {position:absolute; height:30px; padding:0 10px; background:#666; color:#fff; border-radius:4px; box-shadow:1px 1px 3px rgba(0,0,0,.15); z-index:1; width: max-content; font-size:.8rem; transform:translateX(-50%); display:flex; justify-content: center; align-items: center; opacity:0;}
.game_tooltip:after {content:""; position:absolute; width:0; height:0; border-top:10px solid #666; border-left:7px solid transparent; border-right:7px solid transparent; left:50%; transform:translateX(-50%); bottom:-10px;}