@charset "utf-8";			



/****************************************************************
 * common class
 ****************************************************************/
.left_list{overflow:hidden;float:left;}
.left_list > li{float:left;}
.right_list{overflow:hidden;float:right;}
.right_list > li{float:right;}

.float_left{float:left;}
.float_right{float:right;}

.button_type_a14{height:14px;line-height:12px;padding:0px 8px;border:solid 1px;border-radius:7px;font-size:9px;}
.button_type_a20{height:20px;line-height:18px;padding:0px 16px;border:solid 1px;border-radius:10px;font-size:10px;}
.button_type_a22{height:22px;line-height:20px;padding:0px 24px;border:solid 1px;border-radius:11px;font-size:12px;}
.button_type_a22_f{height:22px;width:80px;line-height:20px;border:solid 1px;border-radius:11px;font-size:12px;text-align:center;}
.button_type_a24{height:24px;line-height:22px;padding:0px 8px;border:solid 1px;border-radius:12px;font-size:12px;text-align:center;}
.button_type_a24_f{height:24px;width:80px;line-height:22px;border:solid 1px;border-radius:12px;font-size:12px;text-align:center;}
.button_type_a30{height:30px;line-height:28px;padding:0px 14px;border:solid 1px;border-radius:15px;font-size:14px;}
.button_type_a30 img{margin-right:6px;vertical-align:middle;}
.button_type_a32{height:32px;line-height:30px;padding:0px 20px;border:solid 1px;border-radius:16px;font-size:13px;}
.button_type_a34{height:34px;line-height:32px;padding:0px 17px;border:solid 1px;border-radius:17px;font-size:14px;}
.button_type_a36{height:36px;line-height:34px;padding:0px 18px;border:solid 1px;border-radius:18px;font-size:13px;}
.button_type_a36_f{height:36px;width:130px;line-height:34px;border:solid 1px;border-radius:18px;font-size:13px;text-align:center;}
.button_type_a40{height:40px;line-height:38px;padding:0px 33px;border:solid 1px;border-radius:20px;font-size:16px;}
.button_type_a40_44{height:40px;line-height:38px;padding:0px 44px;border:solid 1px;border-radius:20px;font-size:16px;}
.button_type_a50_w{height:50px;width:310px;line-height:48px;border:solid 1px;border-radius:25px;font-size:16px;text-align:center;}
.button_type_a60{height:60px;line-height:58px;padding:0px 46px;border:solid 1px;border-radius:30px;font-size:20px;}

.button_type_dot7{height:7px;width:7px;border:solid 1px;border-radius:3.5px;margin:10px;display:inline-block;}

.off{border-color:#21a8af;background:rgba(0, 0, 0, 0.0);color:#21a8af;}
.off_black{border-color:#696969;background:rgba(0, 0, 0, 0.0);color:#696969;}
.off_white{border-color:#fff;background:rgba(0, 0, 0, 0.0);color:#fff;}
@media only screen and (max-width:599px){ /*320~400 : 모바일*/
	#userWrap #userInfo .off_white{border-color:#21a8af;background:rgba(0, 0, 0, 0.0);color:#21a8af;}
}
.off_disabled{border-color:#b7b7b7;background:rgba(0, 0, 0, 0.0);color:#9b9b9b;}
.off_wrong{border-color:#d0011b;background:rgba(0, 0, 0, 0.0);color:#d0011b;}

.off_disabled_fill{border-color:#c9c9c9;background:#c9c9c9;color:#9b9b9b;}
.on{border-color:#21a8af;background:#21a8af;color:#ffffff;}
.on_white{border-color:#ffffff;background:#ffffff;color:#21a8af;}

.on_alpha{border-color:#21a8af;background:#21a8af;color:#ffffff;opacity:0.5;}
.btn_color_facebook{border-color:#3c5a99;background:#3c5a99;color:#fff;}
.btn_color_google{border-color:#dd4b39;background:#dd4b39;color:#fff;}
.btn_color_steam{border-color:#464442;background:#464442;color:#fff;}


.user_profile{overflow:hidden;border:solid 1px #979797;}

.shadow_01{box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.5);}

a img{user-select:none;user-drag:none;}
.unselectable_image{user-select:none;user-drag:none;}
/****************************************************************
 * common font
 ****************************************************************/
.font_light_50{font-weight:300;letter-spacing:5px;}
.font_light_p04{font-weight:300;letter-spacing:0.4px;}
.font_light_p03{font-weight:300;letter-spacing:0.3px;}
.font_light_03{font-weight:300;letter-spacing:-0.3px;}
.font_light_04{font-weight:300;letter-spacing:-0.4px;}
.font_light_05{font-weight:300;letter-spacing:-0.5px;}
.font_light_06{font-weight:300;letter-spacing:-0.6px;}
.font_light_07{font-weight:300;letter-spacing:-0.7px;}
.font_light_09{font-weight:300;letter-spacing:-0.9px;}
.font_light_10{font-weight:300;letter-spacing:-1.0px;}
.font_light_11{font-weight:300;letter-spacing:-1.1px;}

.font_demilight_02{font-weight:300;letter-spacing:-0.2px;}
.font_demilight_03{font-weight:300;letter-spacing:-0.3px;}
.font_demilight_04{font-weight:300;letter-spacing:-0.4px;}
.font_demilight_05{font-weight:300;letter-spacing:-0.5px;}
.font_demilight_06{font-weight:300;letter-spacing:-0.6px;}
.font_demilight_07{font-weight:300;letter-spacing:-0.7px;}
.font_demilight_10{font-weight:300;letter-spacing:-1.0px;}

.font_regular_02{font-weight:normal;letter-spacing:-0.2px;}
.font_regular_03{font-weight:normal;letter-spacing:-0.3px;}
.font_regular_04{font-weight:normal;letter-spacing:-0.4px;}
.font_regular_05{font-weight:normal;letter-spacing:-0.5px;}
.font_regular_06{font-weight:normal;letter-spacing:-0.6px;}

.font_medium_03{font-weight:700;letter-spacing:-0.3px;}
.font_medium_04{font-weight:700;letter-spacing:-0.4px;}
.font_medium_05{font-weight:700;letter-spacing:-0.5px;}
.font_medium_06{font-weight:700;letter-spacing:-0.6px;}
.font_medium_07{font-weight:700;letter-spacing:-0.7px;}


.color_grey_4a{color:#4a4a4a;}
.color_grey_66{color:#666666;}
.color_grey_69{color:#696969;}
.color_grey_8a{color:#8a8a8a;}
.color_grey_9b{color:#9b9b9b;}
.color_grey_b7{color:#b7b7b7;}
.color_grey_d8{color:#d8d8d8;}
.color_grey_e5{color:#e5e6eb;}
.color_white{color:#fff;}
.color_highlight{color:#21a8af;}
.color_wrong{color:#d0011b;}
.color_facebook{color:#3b5998;}

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ellipsis_multi{overflow:hidden;text-overflow:ellipsis;}
.link_span{max-width:100%;vertical-align:bottom;}


/****************************************************************
 * common image style
 ****************************************************************/
.sized_image{position:absolute;margin:auto;min-height:100%;min-width:100%;left:-1000%;right:-1000%;top:-1000%;bottom:-1000%;}
.sized_image_flex{position:absolute;margin:auto;min-height:100%;min-width:100%;left:-1000%;right:-1000%;top:-1000%;bottom:-1000%;}
.need_resize{position:absolute;margin:auto;min-height:100%;min-width:100%;left:-1000%;right:-1000%;top:-1000%;bottom:-1000%;}
.need_resize_flex{position:absolute;margin:auto;min-height:100%;min-width:100%;left:-1000%;right:-1000%;top:-1000%;bottom:-1000%;}
.resize_image_container{overflow:hidden;position:relative;}



/****************************************************************
 * 업적 알림
 ****************************************************************/
#achievementAlert{position:fixed;right:-450px;bottom:5%;display:none;z-index:5000;}
#achievementAlert .background{width:426px;height:100px;border-radius:14px;box-shadow:-1px 1px 4px 0 rgba(0, 0, 0, 0.5);background:#fff;position:relative;}

#achievementAlert .flip-container{perspective:1000px;}
#achievementAlert .flip-container{position:absolute;top:50%;left:48px;transform:translate(-50%, -50%);}
#achievementAlert .flip-container, #achievementAlert .front, #achievementAlert .back {width:73px;height:80px;}
#achievementAlert .flipper{width:100%;height:100%;}
#achievementAlert .front, #achievementAlert .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;}
#achievementAlert .flipper {transform-style: preserve-3d;position: relative;}
#achievementAlert .front {z-index: 2;transform: rotateY(0deg);}
#achievementAlert .back {transform: rotateY(180deg);}
#achievementAlert img{width:100%;height:100%;}
#achievementAlert .achievement_text{line-height:19px;font-size:16px;font-weight:normal;letter-spacing:2.4px;position:absolute;top:25px;left:100px;}
#achievementAlert .title{line-height:24px;font-size:20px;position:absolute;top:51px;left:100px;}

#achievementAlert.show {
	display:block;
	animation-name: showAchievement;
	animation-duration: 450ms;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

#achievementAlert.hide {
	display:block;
	animation-name: hideAchievement;	
	animation-duration: 300ms;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes showAchievement{
	0%	{right:-450px;}	
	100% {right:-14px;}
}
@keyframes hideAchievement{
	0%	{right:-14px;}	
	100% {right:-450px;}
}

#achievementAlert .flipper.throwup {
	animation-name: throwUp;	
	animation-duration: 500ms;
	animation-timing-function: cubic-bezier(0,0,0,1);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
#achievementAlert .flipper.throwdown {
	animation-name: throwDown;	
	animation-duration: 500ms;
	animation-timing-function: cubic-bezier(1,0,1,1);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes throwUp{	
	0%	{transform:scale(1);}
	100% {transform:scale(1.4);}		
}
@keyframes throwDown{	
	0%	{transform:scale(1.4);}	
	100% {transform:scale(1);}	
}

#achievementAlert .spinfront {
	animation-name: spinFront;	
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes spinFront{	
	0%	{transform: rotateY(0deg);}	
	100% {transform: rotateY(1620deg);}
}
#achievementAlert .spinback {
	animation-name: spinBack;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes spinBack{	
	0%	{transform: rotateY(180deg);}	
	100% {transform: rotateY(1800deg);}
}

@media only screen and (max-width:599px){			
	#achievementAlert{bottom:80px;right:-100%;width:calc(100% - 40px);}
	#achievementAlert .background{width:100%;height:82px;border-radius:8px;}
	
	#achievementAlert .flip-container{left:40px;}
	#achievementAlert .flip-container, #achievementAlert .front, #achievementAlert .back {width:55px;height:60px;}
	#achievementAlert .achievement_text{line-height:15px;font-size:12px;letter-spacing:1.8px;top:20px;left:80px;}
	#achievementAlert .title{line-height:17px;font-size:14px;position:absolute;top:45px;left:80px;}
	
	#achievementAlert.show {
		display:block;
		animation-name: showAchievementMobile;
		animation-duration: 450ms;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	
	#achievementAlert.hide {
		display:block;
		animation-name: hideAchievementMobile;	
		animation-duration: 300ms;
		animation-timing-function: ease;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	
	@keyframes showAchievementMobile{
		0%	{right:-100%;}	
		100% {right:20px;}
	}
	@keyframes hideAchievementMobile{
		0%	{right:20px;}	
		100% {right:-100%;}
	}
}

 
#contents{min-height:calc(100% - 80px);}







#header_alert{width:100%;position:fixed;top:-100%;left:0;z-index:2000;background:rgba(0, 0, 0, 0.50);display:none;}
#alert_message{width:600px;margin:47px auto 49px auto;font-size:40px;line-height:50px;text-align:center;}

@media only screen and (max-width:599px){ /*320~400 : 모바일*/
	#alert_message{width:100%;margin:30px auto 30px auto;font-size:20px;line-height:30px;padding:0 20px;}
}

 

 
 




/****************************************************************
 * popup
 ****************************************************************/
.popup_wrap{width:100%;height:100%;position:fixed;top:0;left:0;z-index:1500;background:rgba(0, 0, 0, 0.7);display:none;overflow-y:auto;overflow-x:hidden;}
.popup{background:#fff;position:absolute;margin:50px 0px;}
body.disable_scroll{position:fixed;width:100%;overflow:hidden;}
.popup_center{left:50%;transform:translate(-50%, 0);}

@media only screen and (max-width:599px){ /*320~400 : 모바일*/
	.popup{width:100%;min-height:100%;margin:0px;}
	.popup_center{left:0px;transform:translate(0, 0);}
	
	.mobile_popup_header{background:#fff;width:100%;height:44px;font-size:17px;line-height:44px;position:fixed;top:0;left:0;z-index:900;text-align:center;border-bottom:solid 1px #ebebeb;box-shadow:0 2px 2px -2px rgba(0,0,0,0.15);}
	.mobile_popup_header .mobile_back_button{padding:0 15px 0 20px;position:absolute;left:0px;top:0px;}
	.mobile_popup_header .mobile_back_button img{width:23px;height:18px;}
}

/****************************************************************
 * mention select box
 ****************************************************************/
#mentionSelectBox{display:none;height:auto;background:#fff;position:absolute;z-index:10;}
#mentionSelectBox .diagonal{position:absolute;top:0px;left:-3px;overflow:hidden;width:20px;height:16px;}
#mentionSelectBox .diagonal .outer{position:absolute;width:0px;height:0px;border-bottom:solid #d8d8d8 16px;border-left:solid transparent 10px;border-right:solid transparent 10px;z-index:2;}
#mentionSelectBox .diagonal .inner{position:absolute;top:1.5px;width:0px;height:0px;border-bottom:solid #fff 16px;border-left:solid transparent 10px;border-right:solid transparent 10px;z-index:3;}
#mentionSelectBox .mention_select{border:solid 0px #9b9b9b;background:#fff;position:absolute;left:-8px;top:16px;}
#mentionSelectBox .mention_select span{display:inline;}
#mentionSelectBox .mention_select li{border-bottom:solid 1px #d8d8d8;padding:0 12px;font-size:13px;line-height:30px;white-space:nowrap;}
#mentionSelectBox .mention_select li:hover{background:#dddddd;}
#mentionSelectBox .mention_select ul :last-child li{border-bottom:0px;}

/****************************************************************
 * tag select box
 ****************************************************************/
#tagSelectBox{display:none;height:auto;background:#fff;position:absolute;z-index:1500;}
#tagSelectBox .diagonal{position:absolute;top:0px;left:-3px;overflow:hidden;width:20px;height:16px;}
#tagSelectBox .diagonal .outer{position:absolute;width:0px;height:0px;border-bottom:solid #d8d8d8 16px;border-left:solid transparent 10px;border-right:solid transparent 10px;z-index:2;}
#tagSelectBox .diagonal .inner{position:absolute;top:1.5px;width:0px;height:0px;border-bottom:solid #fff 16px;border-left:solid transparent 10px;border-right:solid transparent 10px;z-index:3;}
#tagSelectBox .tag_select{border:solid 0px #9b9b9b;background:#fff;position:absolute;left:-8px;top:16px;}
#tagSelectBox .tag_select span{display:inline;}
#tagSelectBox .tag_select li{border-bottom:solid 1px #d8d8d8;padding:0 12px;font-size:13px;line-height:30px;white-space:nowrap;}
#tagSelectBox .tag_select li:hover{background:#dddddd;}
#tagSelectBox .tag_select ul :last-child li{border-bottom:0px;}

/****************************************************************
 * game select box
 ****************************************************************/
#gameSelectBox{display:none;width:335px;background:#fff;position:absolute;z-index:1500;}
#gameSelectBox .game_select{border:solid 0px #9b9b9b;width:335px;max-height:237px;background:#fff;position:absolute;left:0;top:5px;background:#fff;overflow:auto;}
#gameSelectBox .game_select .game_search_item{width:100%;height:41px;font-size:13px;line-height:20px;border-bottom:solid 1px rgba(183,183,183,0.5);position:relative;}
#gameSelectBox .game_select .game_search_item:hover{background:#dddddd;}
#gameSelectBox .game_select .game_search_item_image{width:40px;height:40px;overflow:hidden;position:absolute;top:0px;left:0px;}
#gameSelectBox .game_select .game_search_item_title{max-height:40px;width:calc(100% - 40px);overflow:hidden;padding-left:20px;position:absolute;left:40px;top:50%;transform:translate(0, -50%);}

@media only screen and (max-width:599px){
	#gameSelectBox{width:100%;}
	#gameSelectBox .game_select{width:calc(100% - 40px);top:14px;}	
}



/****************************************************************
 * select box
 ****************************************************************/
#searchInputBox{display:none;height:auto;background:#fff;position:absolute;z-index:1;}
#searchInputBox .search_input_select{border:solid 0px #9b9b9b;background:#fff;position:absolute;left:-8px;top:16px;box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.5);}
#searchInputBox .search_input_select span{display:inline;}
#searchInputBox .search_input_select li{border-bottom:solid 1px #d8d8d8;padding:0 12px;font-size:13px;line-height:30px;white-space:nowrap;}
#searchInputBox .search_input_select li:hover{background:#dddddd;}
#searchInputBox .search_input_select ul :last-child li{border-bottom:0px;}


/****************************************************************
 * loading
 ****************************************************************/
#loadingCover {
	display:none;
	position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.2;z-index:2000;
	text-align:center;   
} 
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#progressBar{
	display:none;
	position:fixed;top:50%;left:50%;width:86%;max-width:760px;min-height:66px;z-index:2001;transform:translate(-50%,-50%);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
	background:#fff;padding:27px 36px 18px 36px;
	border-radius:6px;	
}
#progressBar .background{background:#d8d8d8;width:100%;height:21px;border-radius:3px;}
#progressBar .foreground{background:#21a8af;width:0%;height:21px;display:inline-block;border-radius:3px;}
#progressBar .progress_text{text-align:center;margin-top:18px;font-size:16px;line-height:19px;}
@media only screen and (max-width:599px){
	#progressBar{min-height:45px;padding:17px 16px 14px 16px;}
	#progressBar .background{height:14px;}
	#progressBar .foreground{height:14px;}
	#progressBar .progress_text{margin-top:16px;font-size:12px;line-height:15px;}
}
/****************************************************************
 * follow 버튼 설정
 ****************************************************************/
.not_following:after{content:'팔로우';}
.is_following:after{content:'팔로잉';}


/****************************************************************
 * 반응형
 ****************************************************************/
 .pc{display:block;}
 .pc_inline{display:inline;}
 .pc_inline_block{display:inline-block;}
 .mobile{display:none;}
 .mobile_inline{display:none;}
 .mobile_inline_block{display:none;}
 @media only screen and (max-width:599px){ /*320~400 : 모바일*/
 	.pc{display:none;}
 	.pc_inline{display:none;}
 	.pc_inline_block{display:none;}
 	.mobile{display:block;}
 	.mobile_inline{display:inline;}
 	.mobile_inline_block{display:inline-block;}
 }
 
 #loadingBox{width:100%;height:48px;position:relative;}
.loadingBackground{background:#fff;width:48px;height:48px;position:absolute;border-radius:24px;left:50%;transform:translate(-50%, 0);}
.loadingLogo{z-index:10;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;left:50%;top:4px;transform:translate(-50%, 0);}
.loadingLogo .loading_img{animation:page_loading 1s steps(2) infinite;width:100%;height:100%;background-position:left center;background-repeat:no-repeat;background-size:200% 100%;}
#notiLoading_new{width:100%;height:90px;position:absolute;}
#notiLoading_new .loadingBackground{top:50%;left:50%;transform:translate(-50%, -50%);}
	
@keyframes page_loading{
	100% {background-position: 200%;}
}

.loadingIndicator,
.loadingIndicator_before,
.loadingIndicator_after {
	position:absolute;
  	border-radius: 50%;
  	z-index:5;
}
.loadingIndicator {	
	
	left:50%;top:0px;
	transform:translate(-50%, 0);
	
	width:100%;
	height:100%;
  	color: #21a8af;
  	box-shadow: inset 0 0 0 5px;
}
.loadingIndicator_before,
.loadingIndicator_after {
  position: absolute;
  content: '';
}
.loadingIndicator_before {
  width: calc(50% + 1px);
  height: calc(100% + 2px);
  background: #ffffff;
  border-radius: 50px 0 0 50px;
  top: -1px;
  left: -1px;
  transform-origin: 25px 25px;
  animation: load2 2s infinite ease 1.5s;
}
.loadingIndicator_after {
  width: calc(50% + 1px);
  height: calc(100% + 2px);
  background: #ffffff;
  border-radius: 0 50px 50px 0;
  top: -1px;
  left: calc(50% + 1px);
  transform-origin: 0px 25px;
  animation: load2 2s infinite ease;
}
/*
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
*/
@keyframes load2 {
  0% {
    /*-webkit-transform: rotate(0deg);*/
    transform: rotate(0deg);
  }
  100% {
    /*-webkit-transform: rotate(360deg);*/
    transform: rotate(360deg);
  }
}