@charset "utf-8";
#wrap {width:100%; display:flex; overflow:hidden; background:url(../assets/images/bg0/bg.jpg) center top repeat-y; background-size:100%;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.contents_left{float:left; width:305px; transition:all 0.5s;}
.contents_right{float:right; width:calc(100% - 305px); transition:all 0.5s;}
/* 좌측구역 */
.left_header_wrap {width:100%; height:100%; overflow-y:scroll; background:url(../assets/images/bg0/bg_left.jpg) center top no-repeat; transition:all 0.5s;}
.left_header_wrap{-ms-overflow-style: none;}
.left_header_wrap::-webkit-scrollbar{display:none;}
.logo{width:100%; height:260px; display:flex; justify-content: center; align-items:center; text-align:center;}
.logo a{display:block;}

.left_game_wrap{float:left; width:100%;}
.left_game_wrap li{margin:10px auto 0; width:250px; text-align:center;}
.left_game_wrap li a{display:block; width:100%; height:100%;}

/* 우측구역 */
.right_header_wrap{float:left; width:100%; height: auto;}
.right_header_box1{float:left; width:100%; height:50px; overflow:hidden; padding:0 40px 0 40px; background:url(../assets/images/bg0/bg_top.jpg) center top repeat-x;}
.right_header_box2{float:left; width:100%; height:60px; overflow:hidden; padding:0 40px 0 40px; background:url(../assets/images/bg0/bg_gnb.jpg) center top no-repeat; background-size:100% 100%;}

.notice{float:left; width:50%; margin:15px 0 0 0; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#efe3b9; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:all 0.5s;}

.my{float:right; margin:10px 0 0 0; transition:all 0.5s;}
.my li{float:left; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#efe3b9; margin: 0 0 0 5px; line-height:34px; transition:all 0.5s;}
.my li a{color:#efe3b9;}
.my_font01{font-weight:700; color:#ffffff;}
.my_font02{font-weight:700; color:#ffd200;}

.my_btn1{background:linear-gradient(#daac61 0%,#644329 100%); display:inline-block; min-width:90px; height:30px; line-height:30px; padding:0 10px 0 10px; text-align:center; font-weight:700; font-size:14px; color:#ffffff; border-radius:5px; transition:all 0.5s;}
.my_btn1:hover{background:linear-gradient(-45deg, 0% #daac61, 100% #644329);}

.gnb{float:left; width:100%; padding:0 0 0 0; text-align:center;}
.gnb ul{display:inline-block;}
.gnb li{float:left; margin:0 40px 0 40px;}
.gnb li a{display:block; font-family:'Esamanru'; font-weight:300; font-size:18px; color:#000000; line-height:60px;transition:all 0.5s;}
.gnb li a:hover{color:#920000;}

/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_wrap {float:left; width:100%; height:100px; background:#2b2b2b; padding:0 50px;}
.title{font-family:'Esamanru'; font-weight:700; font-size:32px; color:#ffb476; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.75); line-height:100px;}

.s_title1 {font-family:'Esamanru'; font-weight:700; font-size:18px; color:#ffffff; line-height:44px; background:#2b2b2b; padding:0 0 0 10px;}

.contents_wrap {float:left; width:100%; padding:0 10px 0 10px;}
.contents_box {float:left; width:100%; min-height:510px; margin:30px 0 0 0; padding:0 50px 0 50px;}

.contents_box_center{float:left; width:100%; transition:all 0.5s;}

.contents_box_left{float:left; width:calc(80% - 5px); transition:all 0.5s;}
.contents_box_right{float:right; width:calc(15% - 5px); transition:all 0.5s;}

.con_box00 {float:left; width:100%; margin:0 0 0 0;}
.con_box05 {float:left; width:100%; margin:5px 0 0 0;}
.con_box10 {float:left; width:100%; margin:10px 0 0 0;}
.con_box20 {float:left; width:100%; margin:20px 0 0 0;}
.con_box30 {float:left; width:100%; margin:30px 0 0 0;}
.con_box40 {float:left; width:100%; margin:40px 0 0 0;}
.con_box50 {float:left; width:100%; margin:50px 0 0 0;}
.con_box60 {float:left; width:100%; margin:60px 0 0 0;}


/*-------------------------------------------------------------------------------------*
 *  Footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap {float:left; position: fixed; bottom:0px; width:100%; margin:50px 0 0 0; padding:40px 0 40px 0; background:#252525; overflow:hidden;}

.footer_box1{float:left; width:100%; padding:0 0 20px 0; text-align:center;}
.footer_box2{float:left; width:100%; font-family:'Esamanru'; font-weight:300; font-size:18px; color:#737373; text-align:center;}

/*-------------------------------------------------------------------------------------*
 *  Main                                                                               *
 *-------------------------------------------------------------------------------------*/
.main_game{float:left; width:100%; margin:50px 0 0 0;}
.main_game ul{width:100%; margin:0 auto; max-width:1515px;}
.main_game li{float:left; margin:0 45px 0 0;}
.main_game li:last-child{margin:0;}
.main_game li a{display:block;}

.main_board{float:left; width:100%; margin:50px 0 0 0;}
.main_board ul{width:100%; margin:0 auto; max-width:1515px;}
.main_board li{float:left; width:475px; margin: 0 45px 0 0; overflow:hidden;}
.main_board li:last-child{margin:0;}

.board{float:left; margin:10px 0 0 0; height:250px; background:rgba(50,50,50,0.5); overflow:hidden; padding:30px 20px; border-radius:5px;}
.board_title{float:left; width:100%;}
.board table{table-layout:fixed;}
.board td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Esamanru'; font-weight:300; font-size:16px; color:#ffffff; line-height:40px;}
.board_font01{color:#ffb400; font-weight:700;}
.board_font02{color:#c1926d;}

/*-------------------------------------------------------------------------------------*
 *  out_login                                                                          *
 *-------------------------------------------------------------------------------------*/
 
/* 로그인 */
.out_login_wrap_wrap {float:left; width:100%; height:100vh; background:url("../assets/images/bg_login.jpg") center top repeat-y; background-size:100%;}
.out_login_wrap_box  {margin:0px auto; width:700px; transition:all 0.5s;}

.out_login_logo {float:left; width:100%; text-align:center; margin:120px 0 50px 0; transition:all 0.5s;}

.out_login_box_wrap {float:left; width:100%; background:url("../assets/images/bg_login_login.png") center top no-repeat; background-size:cover; box-shadow:0px 0px 40px 0px rgba(255, 189, 111, 0.75); border-radius:10px; padding:7%;}
.out_login {float:left; width:100%;}
.out_login li {float:left; width:50%; padding:1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */

.out_login_text{float:left; width:100%; text-align:center; padding:0 0 20px 0; font-weight:400; font-size:16px; color:#ffffff;}

.out_login_input  {background-color:#ffffff; border:1px solid #1d1d1d; color:#000000; width:100%; height:56px; font-size:16px; font-weight:500; border-radius:5px; padding:0 0 0 10px; font-family:'Noto Sans KR';}
.out_login_input::placeholder {color:#999999; font-size:14px; letter-spacing:0pt;}
.out_login_input:focus{border:1px solid #f9ca7a; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}

.out_login_btn1        {background:linear-gradient(#daac61 0%, #644329 100%); width:100%; height:56px; line-height:60px; text-align:center; display:inline-block; color:#ffffff; font-size:18px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'Esamanru';}
.out_login_btn1:hover  {background:linear-gradient(to right, #daac61 0%, #644329 100%);}

.out_login_btn2        {background:linear-gradient(#606060 0%, #282828 100%); width:100%; height:56px; line-height:60px; text-align:center; display:inline-block; color:#ffffff; font-size:18px; font-weight:500; border-radius:5px; letter-spacing:-1pt; font-family:'Esamanru';}
.out_login_btn2:hover  {background:linear-gradient(to right, #606060 0%, #282828 100%);}

/* 추천인 */
.out_close {float:left; width:100%; text-align:center; padding:0 0 20px 0;}

.out_code_wrap {float:left; width:100%; height:100vh; display:flex; align-items:center;}
.out_code_box {margin:0px auto; width:700px; transition:all 0.5s;}

.out_code_box_wrap {float:left; width:100%; background:#2b2b2b; border-radius:10px; padding:7%;}
.out_code {float:left; width:100%;}
.out_code li {float:left; width:100%; padding:1%;} /* ysk 가로 100%로 변경시 세로형 */

.out_code_text {float:left; width:100%; text-align:center; padding:0 0 20px 0; font-weight:400; font-size:16px; color:#ffffff;}

/* 회원가입 */
.out_join_wrap {float:left; width:100%; margin:30px 0 0 0;}
.out_join_box {margin:0px auto; width:1300px; transition:all 0.5s;}

.out_join_logo {float:left; width:100%; margin:10px 0 10px 0;}
.out_join_logo img {width:300px;}

.out_join_box_wrap {float:left; width:100%; background:#2b2b2b; border-radius:10px; padding:3%;}
.out_join {float:left; width:100%; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); padding:10px 0 10px 0;}
.out_join ul {float:left; width:50%;} /* ysk 가로 100%로 변경시 세로형 */
.out_join ul li {float:left; width:100%; padding:2%; line-height:30px;} 
.phone {display:flex; align-items:center;}

.out_join_text {float:left; width:100%; padding:0 0 10px 10px; font-weight:400; font-size:16px; color:#ffffff;}

.out_join_btn {margin:0px auto; width:500px;}
.out_join_btn li {float:left; width:48%; margin:2% 1% 0 1%;}

.out_join_input1  {background-color:#ffffff; border:1px solid #1d1d1d; color:#000000; width:100%; height:50px; font-size:16px; font-weight:500; border-radius:0px; padding:0 0 0 10px; font-family:'Noto Sans KR';}
.out_join_input1::placeholder {color:#999999; font-size:14px; letter-spacing:0pt;}
.out_join_input1:focus{border:1px solid #f9ca7a; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}



@media screen and (max-width:1300px) {
	.out_join_box {width:90%;}
	.out_join_box_wrap {padding:6%;}	
	.out_join ul {width:100%;}	
	.out_join_btn {width:320px;}
}

@media screen and (max-width:768px) {
	.out_login_wrap_box  {width:80%;}
	.out_login_logo {margin:50px 0 30px 0;}
	.out_login_logo img {width:80%;}	
	.out_login li {width:100%;}
	
	.out_code_box {width:80%;}
}




/*-------------------------------------------------------------------------------------*
 *  out_login animations                                                               *
 *-------------------------------------------------------------------------------------*/
.out_motion111{
	animation:out_motion111 2.5s;
}

@keyframes out_motion111 {
	0% {
		transform: scale(1.5);
		opacity: 0.1;		
	}
	
	100% {
		transform: scale(1);
		opacity: 1;	
	}			
}




/*-------------------------------------------------------------------------------------*
 *  out_login animations popup                                                         *
 *-------------------------------------------------------------------------------------*/
/* 한개의 스타일 */
.out_popup111	{animation-name: out_popup111; animation-duration: 0.5s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_popup111 {
					0%   {transform: translateY(-300%);}			
					100% {transform: translateY(0%);}		
				}

/* 한개의 스타일 */
.out_popup222	{animation-name: out_popup222; animation-duration: 0.5s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_popup222 {
					0%   {transform: translateY(-300%) scaleX(4.0);}			
					100% {transform: translateY(0%) scaleX(1);}		
				}

/* 한개의 스타일 */
.out_popup333	{animation-name: out_popup333; animation-duration: 1.1s; animation-timing-function: ease; visibility: visible !important;}

				@keyframes out_poout_popup333pup03 {
					0%   {transform: translateY(-300%) scaleX(4.0);}	
					50%  {transform: translateY(2%) scaleX(1.3);}				
					100% {transform: translateY(0%) scaleX(1);}		
				}


/*-------------------------------------------------------------------------------------*
 *  슬라이드                                                                             *
 *-------------------------------------------------------------------------------------*/
.jssorl-004-double-tail-spin img {
	animation-name: jssorl-004-double-tail-spin;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes jssorl-004-double-tail-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


.jssorb051 .i {position:absolute;cursor:pointer;}
.jssorb051 .i .b {fill:#ff7e00;fill-opacity:0.5;stroke:#000;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
.jssorb051 .i:hover .b {fill-opacity:.7;}
.jssorb051 .iav .b {fill-opacity: 1;}
.jssorb051 .i.idn {opacity:.3;}

.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fec176;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}


/*-------------------------------------------------------------------------------------*
 *  특별한                                                                             *
 *-------------------------------------------------------------------------------------*/
/* 파워볼 버튼 */
.mini_title_wrap{float:left; width:100%; height:50px; background:#2b2b2b; text-align:center;}
.mini_title{font-family:'Esamanru'; font-weight:700; font-size:22px; color:#ffffff; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.75); line-height:50px;}
.title_mini{color:#ffb476;}
.mini_media {float:left; width:100%; min-height:500px; background:rgba(0,0,0,0.3); text-align:center; padding:10px 0 10px 0;}

.mini_power_big_wrap {float:left; width:100%; margin:5px 0 0 0; padding:5px;}
.mini_power_big_wrap table{}

.mini_power_title {line-height:30px; font-weight:500; color:#ffffff;}
.mini_power_title_s { font-weight:700; color:#8e8e8e; font-size:11px;}

.mini_power_btn1 {float:left; background-color:#2b2b2b; border:1px solid #4e433a; width:100%; min-height:50px; line-height:16px; text-align:center; color:#ffffff; font-size:12px; font-weight:700; padding:7px 0 0 0; border-radius:5px; text-shadow:1px 2px 2px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.6) 2px 2px 4px -1px;}
.mini_power_btn1:hover {border:1px solid #00a8ff;}
.mini_power_btn1.select{background-color:#00a8ff; border:1px solid #00a8ff;}

.mini_power_btn2 {float:left; background-color:#2b2b2b; border:1px solid #4e433a; width:100%; min-height:50px; line-height:16px; text-align:center; color:#ffffff; font-size:12px; font-weight:700; padding:7px 0 0 0; border-radius:5px; text-shadow:1px 2px 2px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.6) 2px 2px 4px -1px;}
.mini_power_btn2:hover {border:1px solid #ff2a00;}
.mini_power_btn2.select{background-color:#ff2a00; border:1px solid #ff2a00;}

.mini_power_font1 {font-family: 'Esamanru'; font-size:20px; line-height:30px; color:#00a8ff;}
.mini_power_font2 {font-family: 'Esamanru'; font-size:20px; line-height:30px; color:#ff2a00;}
.select .mini_power_font1 {color:#ffffff;}
.select .mini_power_font2 {color:#ffffff;}

/* 미니게임 카트 */
.mini_input       {background-color:#2b2b2b; border:1px solid #000000; width:100%; height:26px; color:#ffffff; padding:0 10px 0 10px; border-radius:3px; text-align:right;}
.cart_title {float:left; width:100%; text-align:center; font-family:'Esamanru'; font-weight:500; font-size:22px; color:#ffffff;}

.cart_style1 {line-height:25px; padding:5px 5px 5px 5px; border-bottom:1px solid rgba(255,255,255,0.1); font-family:'Esamanru'; font-weight:300; font-size:14px; color:#ffead8;} /* 카트리스트 */
.cart_style2 {float:right; color:#ffff00;}

.cart_btn1          {background:linear-gradient(#606060 0%, #282828 100%); width:100%; height:40px; line-height:40px; display:inline-block; text-align:center; border-radius:5px; color:#ffd6b8; font-size:13px; letter-spacing:0pt; font-weight:500; transition:all 0.5s;}
.cart_btn1:hover    {background:linear-gradient(-45deg, #606060 0%, #282828 100%);}

.cart_btn2          {background:linear-gradient(#daac61 0%, #644329 100%); width:100%; height:54px; line-height:54px; display:inline-block; text-align:center; border-radius:5px; letter-spacing:0pt; transition:all 0.5s; font-family:'Esamanru'; font-weight:500; font-size:20px; color:#ffffff; text-shadow:2px 0 3px rgba(0,0,0,0.4);}
.cart_btn2:hover    {background:linear-gradient(-45deg, #daac61 0%, #644329 100%);}

.cart_btn3          {background:linear-gradient(#960000 0%, #690000 100%); width:100%; height:40px; line-height:40px; display:inline-block; text-align:center; border-radius:5px; color:#ffffff; font-size:13px; letter-spacing:0pt; font-weight:500; transition:all 0.5s;}
.cart_btn3:hover    {background:linear-gradient(-45deg, #960000 0%, #690000 100%);}


/* 댓글 */
.comment_box{float:left; width:100%; background:rgba(0,0,0,0.7); padding:20px 10px 20px 10px; transition:all 0.5s;}

.comment_enter{display: flex; justify-content: space-between; align-items: center;}
.comment_input{width:calc(100% - 145px); padding:5px 5px 5px 10px; font-size:14px; background:#1d1d1d; height:80px; border:1px solid #4e433a; transition:all 0.5s; border-radius:5px;}
.comment_btn{display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:500; font-size:16px; color:#ffffff; background:linear-gradient(#daac61 0%, #644329 100%); min-width:140px; height:80px; line-height:84px; transition:all 0.5s;}

.comment_view{float:left; width:100%; margin:10px 0 0 0;}
.comment_view_list{float:left; width:100%; margin:10px 0 0 0; background:#1d1d1d; padding:10px 10px 20px 10px; border-radius:5px;}

.comment_po{background:rgba(0,0,0,0.5); color:#dddddd; padding:0 15px 0 15px; line-height:30px; text-align:center; display:inline-block; font-size:14px; margin:0 5px 0 0; font-weight:300; border-radius:5px; transition:all 0.5s;}
.comment_view_text{float:left; width:100%; font-size:15px; color:#ffffff; padding:10px 8px 8px 8px; line-height:22px; transition:all 0.5s;}

/* 게임리스트 리스트 */
.game_list{float:left; width:100%;}
.game_list li{float:left; width:23.5%; margin:0 2% 2% 0; transition:all 0.5s;}
.game_list li:nth-child(4n){margin:0 0 2% 0;}
.game_list li a{display:block;}
/* .game_list li a img{width:100%; transition:all 0.5s;} */

@media screen and (max-width:1920px) {
.game_list li{width:32%; margin:0 2% 2% 0;}
.game_list li:nth-child(4n){margin:0 2% 2% 0;}   
.game_list li:nth-child(3n){margin:0 0 2% 0;}   
}

/* 슬롯리스트 */
.slot_list{float:left; width:100%; padding:10px; border:1px solid rgba(255,255,255,0.1);}
.slot_list li{float:left; width:calc(100% / 10); padding:10px;}
.slot_list li a{display:block;}
.slot_list li a img{width:100%}


/* 23/4/3 슬롯팝업 추가 */
.slot_box_wrap {float:left; width:100%;}
.slot_box {margin:0px auto; width:1400px; transition:all 0.5s;}
.slot_start {float:left; width:100%; padding:35px 50px 50px 50px; background:#1d1d1d; border:1px solid #4e433a; border-radius:5px;}
.slot_start .input1 {width:100%;}
.slot_title {float:left; width:100%; font-family:'Esamanru'; font-weight:500; font-size:26px; color:#ffffff; line-height:50px;}
.slot_close_box {float:left; width:100%; text-align:center; padding:120px 10px 10px; position:relative; z-index:1;}

.slot_list_wrap{float:left; width:100%; color:#ffffff; background:rgba(255,255,255,0.1); min-height:150px;}
.slot_list2{float:left; width:100%; padding:10px;}
.slot_list2 ul{float:left; width:100%; display:flex; flex-wrap:wrap;}
.slot_list2 li{float:left; text-align:center; width:calc(100% / 7); padding:0 5px 10px 5px; display:flex; align-items: center; flex-direction: column;}
.slot_list2 li a{display:block; width:100%; font-family:'Esamanru'; font-weight:500; color:#ffffff; font-size:12px; font-weight:400; white-space:nowrap; overflow:hidden;}
.slot_list2 li a img{width:100%;}


/* 머니전환  */
.money_wrap1 {float:left; width:475px;}
.money_wrap2 {float:left; width:100%; margin:10px 0 0 0; background:rgba(0,0,0,0.7); padding:37px 20px 37px 20px;}
.money_wrap3 {float:left; width:calc((100% - 495px)/2);background:rgba(255,255,255,.1); padding:20px;}
.money_wrap3_title {float:left; width:100%; height:60px; line-height:60px; text-align:center; display:inline-block; font-family:'Esamanru'; font-weight:500; color:#ffffff; font-size:22px; padding:0 10px 0 10px;}

.margin_10{margin:0 10px;}


.slotlist {
display: flex;
flex-wrap: wrap;
text-align: center;
}

.slotlist li {
width: 50%;
padding: 5px;
}

.slotimg {
width: 100%;
}



/* 메인팝업추가 4/28 */
.main_pop_wrap{float:left; width:100%; height:100%; background:rgba(0,0,0,0.6); position:fixed; z-index:9999; display:flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.main_pop_box{float:left; width:500px; margin:5px;}
.main_pop_con{float:left; width:100%; min-height:500px; padding:30px 20px; background:#000000 url("../images/bg.png") center top; border:3px solid;}
.main_pop_con img{width:100%;}

.main_pop_con_title{float:left; width:100%; padding:10px; text-align:center; font-family:'EsaManru'; font-weight:500; font-size:24px; color:#ffffff; line-height:50px; border-bottom:1px solid rgba(255,255,255,0.1);}
.main_pop_con_text1{float:left; width:100%; margin:10px 0 0 0; padding:10px; text-align:center; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#d4d4d4; line-height:1.5;}
.main_pop_con_text2{float:left; width:100%; background:rgba(0,0,0,0.5); margin:10px 0 0 0; padding:20px 0; text-align:center; font-family:'EsaManru'; font-weight:500; font-size:18px; color:#f9f9f9; font-style:italic; line-height:1.5;}
.main_pop_con_text3{float:left; width:100%; margin:10px 0 0 0; padding:10px; text-align:center; font-family:'EsaManru'; font-weight:300; font-size:16px; color:#f9f9f9; line-height:1.5;}

.main_popup_close {float:left; width:100%; text-align:center; padding:0 3px 0 0;}
.main_popup_close ul{float:right;}
.main_popup_close ul li{float:left;}
.main_popup_close ul li a{display:block; height:34px; line-height:34px; min-width:80px; padding:0 15px; background:#2e2a26; font-family:'EsaManru'; font-weight:500; color:#ffffff; font-size:14px;}
.main_popup_close ul li a:hover{background:#27211c;}
.main_popup_close ul li:last-child a{border-left:1px solid #000000;}
.main_popup_close ul li a input{display:inline-block; margin:0 10px 0 0; accent-color: #000000;}



/* 페이지네이션 */
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #000000;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px
}

.pagination>li:first-child>a,.pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px
}

.pagination>li:last-child>a,.pagination>li:last-child>span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px
}

.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
    color: #dff0ff;
    background-color: #eee;
    border-color: #ddd
}

.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
    z-index: 2;
    background-color: #dff0ff;
    border-color: #dff0ff;
    cursor: default
}

.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
    color: #777;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed
}

.pagination-lg>li>a,.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px
}

.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px
}

.pagination-sm>li>a,.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px
}

.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    list-style: none;
    text-align: center
}

.pager li {
    display: inline
}

.pager li>a,.pager li>span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #282828;
    border: 1px solid #ddd;
    border-radius: 15px
}

.pager li>a:focus,.pager li>a:hover {
    text-decoration: none;
    background-color: #eee
}

.pager .next>a,.pager .next>span {
    float: right
}

.pager .previous>a,.pager .previous>span {
    float: left
}

.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span {
    color: #777;
    background-color: rgb(0, 0, 0);
    cursor: not-allowed
}