@charset "utf-8";
/*==============================================

	- Description -

	00. common		:	전체 공통사항
	01. layout		:	레이아웃
	02. table		:	테이블 요소
	03. button		:	버튼요소
	04. pop			:	팝업요소
	05. font		:	폰트
	06. icon		:	아이콘

==============================================*/


/* ===========================
	00. common
=========================== */
/* comm */
.invisible-all {position:absolute; left:-5000px; width:0; height:0; font-size:0; line-height:0; visibility:hidden; overflow:hidden; text-indent:-5000px;}
.invisible {display:none !important;}
.visible {display:block !important;}

.mt-15 {margin-top:-15px !important;}
.mt-20 {margin-top:-20px !important;}
.mt-50 {margin-top:-50px !important;}
.mt-70 {margin-top:-70px !important;}
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt55 {margin-top:55px !important;}
.mt60 {margin-top:60px !important;}
.mt70 {margin-top:70px !important;}
.mt80 {margin-top:80px !important;}
.mt90 {margin-top:90px !important;}
.mt100 {margin-top:100px !important;}
.mt110 {margin-top:110px !important;}
.mt130 {margin-top:130px !important;}
.mt140 {margin-top:140px !important;}

.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml30 {margin-left:30px !important;}
.ml40 {margin-left:40px !important;}

.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}

.pt30 {padding-top:30px !important;}

.pl30 {padding-left:30px !important;}
.pr30 {padding-right:30px !important;}

.al-l {text-align:left !important;}
.al-r {text-align:right !important;}
.al-c {text-align:center !important;}

.fl-l {float:left !important;}
.fl-r {float:right !important;}

.is-over-txt {display:inline-block; max-width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.comm-no-result {padding:100px 0; font-size:16px; text-align:center;}

.letter {letter-spacing:normal !important;}																				/* 자간 0 */
.under {text-decoration: underline !important;}																			/* 밑줄 */
html.fix {overflow-y:hidden;}																							/* 브라우저 스크롤 픽스 */
.d_t {display:table; width:100%; height:100%;}																			/* 테이블 컨텐츠 */
.d_t .d_c {display:table-cell; width:100%; vertical-align:middle;}														/* 테이블 셀 컨텐츠*/


/* ===========================
	01. layout
=========================== */


/* top-gnb-wrap */
#top-gnb-wrap {width:100%; height:46px; background-color: #fff;border-bottom:4px solid #ea6200;}
#joy-gnb {position:relative; width:1100px; margin:0 auto; }
#joy-gnb .logo-joycity {position:absolute; top:12px; left:0; }
#joy-gnb ul {position:absolute; top:6px; right:0;}
#joy-gnb ul li {float:left; display:inline-block; }
#joy-gnb ul li a {display:inline-block; padding:0 16px; height:40px; line-height:40px; }
#joy-gnb ul li.btn-join {background:url("../../images/common/line_top_gnb.png") right no-repeat;}
#joy-gnb ul li.btn-join a {color:#282828;}
#joy-gnb ul li.btn-login a {color:#ea6200; font-weight:bold;}
#joy-gnb ul li.btn-all a {width:92px; margin-left:6px; padding:0; font-size:11px; color:#303030; text-indent:11px; background: url("../../images/common/bg_joycity_game.png") right no-repeat;}

.joycity-games	.btn-allOver a{position:absolute;	top:-50px; left: -92px;	width:60px; padding:0; font-size:11px;	background:url("../../images/icon/close_white.png") 68px 13px no-repeat #f3640d; color:#fff; }
#joy-gnb .joycity-games {position:absolute; top:50px; left: 0; z-index:6000; width:1100px; height:111px; background-color:#f3640d; padding-top:9px;display: none;}
#joy-gnb .joycity-games dl {margin-left:21px; }
#joy-gnb .joycity-games dl:after {clear:both; content: ""; display:block; }
#joy-gnb .joycity-games dl dt {float:left; display:inline-block; width:83px; padding:10px 0; }
#joy-gnb .joycity-games dl dd {float:left; display:inline;}
#joy-gnb .joycity-games dl dd a {padding:0 10px; color:#fff; line-height:34px;}
#joy-gnb .joycity-games dl dd a:hover{color:#fef378; text-decoration:underline;}
/* wrap */
#wrap {position:relative; min-width:1100px; background:url('../../images/common/bg00.jpg') no-repeat center top; background-attachment:scroll; overflow:hidden; background-color:#252627;}
#wrap.bg01 {background-image:url('../../images/common/bg01.jpg');}
#wrap.bg02 {background-image:url('../../images/common/bg02.jpg');}
#wrap.bg03 {background-image:url('../../images/common/bg03.jpg');}
#wrap.bg04 {background-image:url('../../images/common/bg04.jpg');}

.header-wrap, .footer-wrap {position:relative; width:1100px; margin:0 auto; box-sizing:border-box;}

header {position:absolute; top:0; left:0; right:0; min-width:1100px; height:59px; z-index:5000; overflow:hidden; transition:all 0.3s ease;}
header:before {content:''; display:block; height:59px; background:#212122;}

.header-wrap {position:static; margin-top:-59px;}
.header-wrap h1 {position:absolute; top:9px; left:50%; margin-left:-550px;}

#gnb {margin-left:140px; overflow:hidden;}
#gnb > .inner {position:relative;}
#gnb:before {content:''; position:absolute; top:59px; left:0; right:0; display:block; height:200px; background:#222223; opacity:0.95; transition:all 0.3s ease;}
#gnb .dep1:after {content:''; display:block; clear:both;}
#gnb .dep1 > li {position:relative; float:left;}
#gnb .dep1 > li h2 a {display:block; width:157px; height:59px; line-height:59px; padding-right:20px; color:#fff; font-family:'Malgun Gothic'; font-size:18px; font-weight:bold; text-align:center; overflow:hidden; box-sizing:border-box;}
#gnb .dep2 {position:relative; top:0; left:0; padding:25px 0 25px 30px;}
#gnb .dep2 li {margin-top:20px;}
#gnb .dep2 li:first-child {margin-top:0;}
#gnb .dep2 li a {color:#fff; font-size:13px; font-family:'Malgun Gothic';}
#gnb .dep2 li a:hover {text-decoration:underline;}

#dBody {padding-top:59px;}
#contents {position:relative; width:1100px; min-height:700px; margin:40px auto 0; padding:20px 20px 80px; background:#fff; border-bottom:9px solid #ea6200; box-sizing:border-box;}
.main #contents {min-height:0; padding:0; overflow:hidden;}
.main #contents > .left-area {float:left; width:350px;}
.main #contents > .right-area {float:right; width:750px; padding:15px; box-sizing:border-box;}

.top-info-box + #contents {margin-top:30px;}

footer {margin-top:60px; background:#252627;}
footer.fix {position:fixed; bottom:0; left:0; right:0;}
.footer-wrap {padding:20px 15px; box-sizing:border-box;}
.footer-wrap .ally {padding-left:15px;}
.footer-wrap .ally span {display:inline-block; margin-right:35px; text-align:center; vertical-align:middle;}
.footer-wrap .user {position:absolute; top:10px; right:5px;}
.footer-wrap .utils {margin-top:30px;}
.footer-wrap .utils {overflow:hidden;}
.footer-wrap .utils li {float:left; color:#b4b4b4; font-weight:bold;}
.footer-wrap .utils li + li:before {content:"|"; display:inline-block; margin:0 10px 0; vertical-align:middle;}
.footer-wrap .utils li a {color:inherit; font-weight:inherit;}
.footer-wrap .utils li a:hover {text-decoration:underline;}
.footer-wrap .info {margin-top:20px;}
.footer-wrap .info span {color:#9da2a8;}
.footer-wrap .info span + span:before {content:"|"; display:inline-block; margin:0 5px; vertical-align:middle;}

@media screen and (min-width:2560px){
	#wrap {background-size:cover;}
}

/* ===========================
	02. table
=========================== */

.tb-type01 {}
.tb-type01 * {vertical-align:middle;}
.tb-type01 th, .tb-type01 td {padding:15px 10px 14px; text-align:center; vertical-align:middle;}
.tb-type01 thead th {padding-top:5px; padding-bottom:8px; color:#616161; font-weight:bold; border-bottom:3px solid #383838;}
.tb-type01 td {color:#383838; border-bottom:1px solid #e9e9e9;}
.tb-type01 a:hover {text-decoration:underline;}

.tb-type02 {}
.tb-type02 th, .tb-type02 td {color:#616161; text-align:center; vertical-align:middle;}
.tb-type02 th {padding:10px 0; border-bottom:3px solid #383838; font-weight:bold;}
.tb-type02 td {padding:16px 0; border-bottom:1px solid #e9e9e9;}
.tb-type02 .bg01 {background-color:#f5f7f6;}

.no-result {padding:90px 0 !important; color:#383838; font-weight:bold; text-align:center !important; line-height:1.4; border-bottom:0 none !important;}
.no-result a:hover {text-decoration:underline;}

/* ===========================
	03. button
=========================== */

.btn-type01 {display:inline-block; width:61px; height:30px; line-height:30px; color:#fff; font-weight:bold; text-align:center; background:#616161;}
.btn-type02 {display:inline-block; width:132px; height:53px; line-height:53px; color:#383838; font-size:15px; font-family:'Noto Sans'; text-align:center; background:#e5e5e5;}
.btn-type03 {display:inline-block; width:132px; height:53px; line-height:53px; color:#fff; font-size:15px; font-family:'Noto Sans'; text-align:center; background:#ea6200;}
.btn-type04 {display:inline-block; min-width:50px; height:29px; line-height:28px; padding:0 14px 0 28px; color:#666; font-size:12px; background:#fff; background:url('../../images/icon/ico_plus.png') no-repeat 10px center; border:1px solid #b4b4b4; border-radius:5px; box-sizing:border-box; vertical-align:middle;}

.btn-box {text-align:center;}
.btn-box a + a {margin-left:10px;}
 
/* paging */
.paging {position:relative; height:30px; margin-top:30px; font-size:0; text-align:center; vertical-align:top;}
.paging > a {display:inline-block; width:28px; height:28px; margin:0 0 0 -1px; font-size:0; border:1px solid #e9e9e9; background-position:center center; background-repeat:no-repeat; overflow:hidden; text-indent:-9999px; vertical-align:top; overflow:hidden;}
.paging > a:hover {background-color:#616161;}
.paging > a.btn-prev {background-image:url('../../images/icon/ico_paging_prev.png');}
.paging > a.btn-next {background-image:url('../../images/icon/ico_paging_next.png');}
.paging > a:hover.btn-prev {background-image:url('../../images/icon/ico_paging_prev_over.png');}
.paging > a:hover.btn-next {background-image:url('../../images/icon/ico_paging_next_over.png');}
.paging > p {display:inline-block; overflow:hidden; vertical-align:top;}
.paging > p a,
.paging > p strong {float:left;display:block; width:28px; height:28px; margin-left:-1px; color:#616161; font-size:12px; line-height:28px; border:1px solid #e9e9e9; text-align:center; vertical-align:top;}
.paging > p strong,
.paging > p a:hover {color:#fff; background:#616161;}

.search-box {margin-top:20px; text-align:center;}
.search-box .sel-box {display:inline-block;}
.search-box .word {position:relative; display:inline-block; width:203px; margin-left:10px; overflow:hidden;}
.search-box .word input {float:left; width:100%; padding-right:70px; border:1px solid #e9e9e9;}
.search-box .word a {position:absolute; top:0; right:0; color:#fff; background:#616161;}

 
/* tab */
.tab-type01 {overflow:hidden;}
.tab-type01 li {float:left;}
.tab-type01 li a {position:relative; display:block; min-width:95px; height:40px; line-height:40px; color:#8e8e8e; font-size:15px; font-family:'Malgun Gothic'; font-weight:bold; text-align:center; border-bottom:6px solid #e4e4e4; transition:all 0.3s ease;}
.tab-type01 li a:after {content:''; display:block; position:absolute; bottom:-6px; left:0; width:0; height:6px; background:#ea6200; transition:all 0.3s ease;}
.tab-type01 li a:hover,
.tab-type01 li.active a {color:#383838;}
.tab-type01 li a:hover:after,
.tab-type01 li.active a:after {width:100%;}
.tab-type01.full-size {display:table; width:100%; table-layout:fixed; padding-left:1px; box-sizing:border-box;}
.tab-type01.full-size li {display:table-cell; vertical-align:top; float:none;}
.tab-type01.full-size li a {font-size:13px;}
.tab-type01.w02 li a {width:110px;}

.tab-type02 {display:table; width:100%; table-layout:fixed; padding-left:1px; box-sizing:border-box;}
.tab-type02 li {display:table-cell; vertical-align:top;}
.tab-type02 li a {position:relative; display:block; height:50px; line-height:50px; color:#616161; font-family:'Nanum Barun Gothic'; font-size:18px; font-weight:bold; letter-spacing:-0.5px; text-align:center; background:#ececec;}
.tab-type02 li.active a {color:#242424; background:#fff; z-index:1;}

.page-tab {position:relative; display:table; width:100%; padding-left:1px; margin-bottom:40px; table-layout:fixed; z-index:1; box-sizing:border-box;}
.page-tab > li {display:table-cell; vertical-align:top;}
.page-tab > li > a {position:relative; display:block; height:62px;  margin:0 0 0 -1px; color:#222; font-size:18px; font-weight:400; line-height:62px; letter-spacing:-0.9px; border:1px solid #dedede; background:#fff; text-align:center; box-sizing:border-box;}
.page-tab > li.active a {color:#fff; border-color:#cc0001; background-color:#cc0001; z-index:1}


/* ===========================
	04. pop
=========================== */
.layer-pop-wrap {position:fixed; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:100000; overflow-y:auto;}
.layer-pop-parent {display:table; width:100%; height:100%; table-layout:fixed;}
.layer-pop-children {display:table-cell; width:100%; height:100%; padding:30px 10px; text-align:center; vertical-align:middle;}

.pop-data {position:relative; width:380px; margin:0 auto; border:1px solid #333; background:#fff; text-align:left; box-sizing:border-box; -webkit-box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.25);}
.pop-data > h2 {padding:0 59px 0 20px;color:#fff; font-size:18px; line-height:50px; background-color:#464646;}
.pop-data .pop-con {position:relative; padding:30px 20px; border-top:1px solid #333; overflow-y:auto;}
.pop-data .btn-page-wrap {padding-top:20px; margin:30px 0 0 0; border-top:1px solid #dcdcdc;}
.pop-data .btn-pop-close {position:absolute; top:10px; right:10px; display:block; width:27px; height:27px; border:1px solid #909090; background:url('../../images/util/btn-pop-close.png') left top no-repeat;}
.pop-data .line-default-txt {line-height:28px;}

.today-close {position:relative; width:100%; height:46px; padding:12px 20px; background:#222; box-sizing:border-box;}
.today-close .chk-type01 input[type=checkbox] + label {color:#fff;}

.common-pop {position:absolute; top:0; left:0; width:400px; height:400px; border:1px solid #333; background:#fff; z-index:999;}
.common-pop .pop-con {position:relative; width:100%; height:100%; overflow:hidden;}
.common-pop .today-close {position:absolute; top:100%; left:-1px; width:100%; height:22px; padding:12px 0; border:1px solid #222; box-sizing:content-box;}
.common-pop .today-close > p {display:block; padding:0 20px;}
.common-pop .btn-close {position:absolute; top:50%; right:0; display:block; width:66px; height:26px; margin-top:-13px; color:#fff; font-size:14px; line-height:26px; background-color:#444; text-align:center;}


/* ===========================
	05. font 
=========================== */
.fc01 {color:#616161 !important;}
.fc02 {color:#383838 !important;}
.fc03 {color:#8e8e8e !important;}
.fc04 {color:#e52e3e !important;}
.fc05 {color:#ea6200 !important;}

.f-100 {font-weight:100}/* Thin */
.f-300 {font-weight:300}/* light */
.f-400 {font-weight:400}/* Reguler */
.f-500 {font-weight:500}/* Medium */
.f-700 {font-weight:700}/* Bold */

.fw-b {font-weight:bold;}



/* ===========================
	06. icon
=========================== */

.icon-new {display:inline-block; width:45px; height:47px; background-color:#54aa20; text-align:center; overflow:hidden;}
.icon-photo {display:inline-block; margin-left:10px; vertical-align:middle;}
.icon-photo img {vertical-align:middle;}

.icon-dday {position:relative; display:inline-block; width:45px; height:45px; background-color:#b72532; border-bottom:2px solid #b72532;}
.icon-dday:after {content:'Day'; position:absolute; top:22px; left:0; right:0; color:#fff; font-family:'Noto Sans'; font-size:12px; font-weight:500; text-align:center; z-index:1;}
.icon-dday span {position:relative; display:block; height:45px; line-height:28px; color:#fff; font-family:'Noto Sans'; font-size:18px; font-weight:500; text-align:center; background-color:#e52e3e;}
.icon-dday span:before {content:''; position:absolute; bottom:0; right:0; border-bottom:10px solid #b72532; border-left:10px solid transparent; border-top:10px solid transparent;}
.icon-dday span:after {content:''; position:absolute; bottom:-10px; right:0; border-top:10px solid #ea5865; border-right:10px solid transparent; border-bottom:10px solid transparent;}

.icon-end {display:inline-block; width:45px; height:45px; background-color:#6e6e6e; border-bottom:2px solid #6e6e6e;}
.icon-end span {position:relative; display:block; height:45px; line-height:45px; color:#fff; font-family:'Noto Sans'; font-weight:500; text-align:center; background-color:#898989;}
.icon-end span:before {content:''; position:absolute; bottom:0; right:0; border-bottom:10px solid #6e6e6e; border-left:10px solid transparent; border-top:10px solid transparent;}
.icon-end span:after {content:''; position:absolute; bottom:-10px; right:0; border-top:10px solid #a1a1a1; border-right:10px solid transparent; border-bottom:10px solid transparent;}

.icon-blet {display:inline-block; margin-top:-2px; margin-right:10px; line-height:normal; vertical-align:middle;}
.icon-wrap {display:inline-block; vertical-align:middle;}

.reply-cnt { margin-left:5px; color:#e52e3e; font-weight:bold;}

.division-line01 {border-top:3px solid #383838;}


.container{
	text-align: center; padding-top: 120px;
}
.divBtn{
	padding-top: 30px;
}
.prevPageBtn{
	display:inline-block; width:132px; height:53px; line-height:53px; color:#fff; font-size:15px; font-family:'Noto Sans'; text-align:center; background:#ea6200; font-weight: bold;
	text-decoration:none !important;
}