@charset "utf-8";
#wrap {float:left; width:100%; overflow:hidden; background:url(../images/bg.jpg) center top no-repeat fixed; background-size:cover;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.header_wrap{float:left; width:100%; display:flex; align-items:center; justify-content:center;}
.header_box{float:left; width:100%; padding:70px 0 60px; max-width:1460px; position:relative; display:flex; align-items:center; justify-content:space-between;}
.gnb{float:left;}
.gnb li{float:left; margin:0 10px 0 0; transition:all 0.5s;}
.gnb li:last-child{margin:0 0px 0 0;}
.gnb li:hover{filter:brightness(120%);}
.gnb li a{display:inline-block;}

.logo{float:left; position:absolute; left:50%; transform:translate(-50%);}
.logo a{display:block;}
.top_login{float:left;}
.top_login ul{display:flex; align-items:center; margin:5px 0 0 0;}
.top_login ul:first-child{margin:0;}
.top_login ul li{float:left; margin: 0 0 0 5px;}
.top_my{float:left;}
.top_my ul{display:flex; align-items:center; justify-content: flex-end; margin:5px 0 0 0; }
.top_my ul:first-child{margin:0;}
.top_my ul li{float:left; margin: 0 0 0 5px; font-weight:700; font-size:16px; color:#ffffff; text-shadow:2px 2px 4px rgba(0,0,0,0.3);}

.top_login_input{background-color:#424242; border:1px solid #5d5d5d; padding:4px 0 4px 15px; color:#ffffff; font-size:14px; border-radius:5px; width:160px; height:42px; transition:all 0.5s;}
.top_login_input::placeholder    {color:#686868;}
.top_login_btn1{display:inline-block; min-width:160px; text-align:center; padding:0 10px; height:42px; line-height:42px; border-radius:5px; font-weight:700; font-size:14px; color:#000000;}
.top_login_btn1{background:linear-gradient(#fff600 0%, #ffb400 100%); box-shadow:2px 2px 4px rgba(0,0,0,0.7);}
.top_login_btn2{display:inline-block; min-width:160px; text-align:center; padding:0 10px; height:42px; line-height:42px; border-radius:5px; font-weight:700; font-size:14px; color:#000000;}
.top_login_btn2{background:linear-gradient(#e8e8e8 0%, #8b8b8b 100%); box-shadow:2px 2px 4px rgba(0,0,0,0.7);}

.top_login_btn1:hover{background:linear-gradient(-45deg, #fff600 0%, #ffb400 100%);}
.top_login_btn2:hover{background:linear-gradient(-45deg, #e8e8e8 0%, #8b8b8b 100%);}

.mobile_menu{display:none;}
.m_top_my{display:none; padding:0 10px; height:40px; line-height:40px; float:left; width:100%; background:#222222;}
.m_top_my ul{display:flex; align-items:center; justify-content:space-between;}
.m_top_my ul li{font-weight:700; font-size:14px; color:#ffffff;}
.my_font01{color:#fff600;}
.m_top_login{display:none; padding:5px; float:left; width:100%; background:#222222;}
.m_top_login ul{display:flex; align-items:center; justify-content:space-between;}
.m_top_login ul li{padding:0 2px; width:25%;}

.m_top_my ul li a{display:inline-block; padding:0 2px;}

.m_top_btn1{display:inline-block; min-width:60px; text-align:center; padding:0 10px; height:32px; line-height:32px; border-radius:5px; font-weight:500; font-size:12px; color:#000000;}
.m_top_btn1{background:linear-gradient(#fff600 0%, #ffb400 100%); box-shadow:2px 2px 4px rgba(0,0,0,0.7);}
.m_top_btn2{display:inline-block; min-width:60px; text-align:center; padding:0 10px; height:32px; line-height:32px; border-radius:5px; font-weight:500; font-size:12px; color:#000000;}
.m_top_btn2{background:linear-gradient(#e8e8e8 0%, #8b8b8b 100%); box-shadow:2px 2px 4px rgba(0,0,0,0.7);}

@media screen and (max-width:1280px) {
    .mobile_menu{display:block; position:absolute; right:15px;}
    .m_top_login{display:block;}
    .m_top_my{display:block;}
    .header_box{padding:10px 10px;}
    .logo{position:static; width:100%; text-align:center; transform:translate(0);}
    .logo img{display:inline-block; width:100%; max-width:200px;}
    .gnb{display:none;}
    .top_login{display:none;}
    .top_my{display:none;}
	.top_login_input{width:100%;}
	.top_login_btn1{width:100%; min-width:0;}
	.top_login_btn2{width:100%; min-width:0;}
}
@media screen and (max-width:768px) {
    .m_top_login ul{flex-wrap:wrap;}
    .m_top_login ul li{width:50%; padding:2px;}
}
/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_wrap {float:left; width:100%; overflow:hidden;}
.title {width:100%; text-align:center; font-weight:700;  color:#ffffff; font-size:40px; line-height:48px; transition:all 0.5s;}

.s_title1 {width:100%; font-family:'EsaManru'; font-weight:300;  color:#545454; font-size:20px; line-height:60px; transition:all 0.5s;}

.contents_wrap{float:left; width:100%; margin:50px 0 0 0; display:flex; padding:; transition:all 0.5s;}
.contents_box {width:1460px; margin:0 auto;}

.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;}


@media screen and (max-width:1792px) {
}

@media screen and (max-width:1460px) {
	.contents_wrap{padding:0 10px; margin:20px 0 0 0;}
	.contents_box{width:100%;}
}

@media screen and (max-width:1024px) {
	.title{font-size:24px;}
}

@media screen and (max-width:768px) {

}

/*-------------------------------------------------------------------------------------*
 *  Footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap{float:left; width:100%; text-align:center; padding:80px 10px; font-size:14px; color:#a3864b; transition:ease 0.5s;}

@media screen and (max-width:1024px) {
 .footer_wrap{font-size:10px; padding:50px 10px;}   
}


/*-------------------------------------------------------------------------------------*
 *  Main                                                                               *
 *-------------------------------------------------------------------------------------*/
.main_slideshow_pc{width:100%;margin:0 auto; overflow:hidden; position:relative;}
.main_slideshow_pc .swiper-slide img{width:100%;}
.main_slideshow_m{width:100%; margin:0 auto; overflow:hidden; position:relative; display:none;}
.main_slideshow_m .swiper-slide img{width:100%;}
.main_slideshow_pc .swiper-button-next{right:30px;}
.main_slideshow_pc .swiper-button-prev{left:30px;}
.main_slideshow_pc .swiper-pagination-bullet{background:#ffffff; opacity:0.5;}
.main_slideshow_pc .swiper-pagination-bullet-active{background:#fff000; opacity:1;}
.main_slideshow_m .swiper-pagination-bullet{background:#ffffff; opacity:0.5;}
.main_slideshow_m .swiper-pagination-bullet-active{background:#fff000; opacity:1;}
@media screen and (max-width:1240px) {
	.main_slideshow_pc{display:none;}
	.main_slideshow_m{display:block;}
}

.main_game_list{float:left; width:100%;}
.main_game_list li{float:left; margin:0 40px 40px 0; position:relative;}
.main_game_list li:nth-child(3n){margin:0 0 40px 0;}
.main_game_list li a{display:block;}
.main_game_list li a img{display:inline-block; width:100%; transition:all 0.5s;}
.game_tip{position:absolute; right:30px; top:20px; transition:all 0.5s;}

@media screen and (max-width:1465px) {
    .main_game_list li{width:32%; margin:0 2% 2% 0;}
    .main_game_list li:nth-child(3n){margin:0 0 2% 0;}
    .game_tip{top:1.43vw; right:2.14vw;}
    .game_tip img{display:inline-block; max-width:6.29vw; min-width:45px;}
}
@media screen and (max-width:1024px) {
    .main_game_list li{width:49.5%; margin:0 1% 1% 0;}
    .main_game_list li:nth-child(3n){margin:0 1% 1% 0;}    
    .main_game_list li:nth-child(2n){margin:0 0 1% 0;} 
	
}
@media screen and (max-width:768px) {
    .game_tip{top:10px; right:20px; text-align:center;}
    .game_tip img{min-width:35px;}
}
/* 특별한 */
.main_game_list ul li{position:relative; z-index:1;}
.main_game_list ul li:hover:before {animation: sparkle 2s infinite linear; background:linear-gradient(90deg, #ffb400 0%, #fff600 10%, #ffb400 20%, #fff600 30%, #000000 40%, #fff600 50%, #ffb400 60%, #fff600 70%, #ffb400 80%, #fff600 90%, #ffb400 100%); background-size: 200% 200%;content: ""; position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 0px;filter: blur(4px); z-index: -1; transform: scale(1.05) translateY(0px);}


@keyframes sparkle {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 200% 200%;
  }
}
/*-------------------------------------------------------------------------------------*
 *  login                                                                          *
 *-------------------------------------------------------------------------------------*/
.login_background{backdrop-filter: blur(10px);}
.pop_login_wrap{float:left; width:100%; height:100vh; display:flex; align-items:center; justify-content:center;}
.login_box{width:470px; margin:0 auto; padding:60px 30px 50px 30px; background:#222222; border:2px solid #444444; border-radius:10px; position:relative; transition:all 0.5s; max-height:85svh; overflow:hidden; overflow-y:auto;}
.join_box{width:700px; margin:0 auto; padding:60px 30px 50px 30px; background:#222222; border:2px solid #444444; border-radius:10px; position:relative; transition:all 0.5s; max-height:85svh; overflow:hidden; overflow-y:auto;}
.login_logo{width:100%; text-align:center; margin:0 0 20px 0;}
.login_logo img{display:inline-block; width:100%; max-width:300px;}
.login_title{width:100%; text-align:center; font-family:'EsaManru'; font-weight:300; font-size:18px; line-height:2; line-height:20px; color:#ffffff;}

.login_write_box{width:100%; margin:20px 0 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; transition:all 0.5s;}
.login_write_tr{width:100%; display:flex; flex-direction: column; margin:0 0 30px;}
.login_write_tr.small{width:48%;}
.login_write_title{color:#ffffff; width:100%; font-size:18px; display:flex; align-items: center; justify-content: flex-start; font-family:'EsaManru'; font-weight:300; padding:0 0 10px;}
.login_write_basic{color:#ffffff; width:100%;  position:relative;}
.login_join_btn{position:absolute; right:0; top:0;}

.pop_shorts_close{position:absolute; right:20px; top:20px;}
.login_box::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.login_box::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.login_box::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}
.join_box::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.join_box::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.join_box::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}
@media screen and (max-width:1440px) {
	.join_box{}
}

@media screen and (max-width:1024px) {
	.pop_login_wrap{padding:20px 0 0 0;}
	.login_box{width:90%; padding:30px 30px 40px 30px;}
	.join_box{width:90%; padding:30px 30px 40px 30px;}
	.login_write_box{margin:30px 0 0 0;}
	.login_title{font-size:16px; letter-spacing:-1pt;}
	.login_write_title{font-size:14px;}
}

@media screen and (max-width:768px) {
	.pop_login_wrap{}

	.login_write_tr{margin:0 0 10px;}
	.login_write_tr.small{width:100%;}
}

@media screen and (max-width:480px) {
	.login_logo img{width:80%;}	
	.pop_login_wrap{}
}


/*-------------------------------------------------------------------------------------*
 *  레이어팝업                                                                         *
 *-------------------------------------------------------------------------------------*/

 
/*-------------------------------------------------------------------------------------*
 *  특별한                                                                             *
 *-------------------------------------------------------------------------------------*/