@charset "utf-8";

/* 기본 CSS */

body.user_play{
	overflow-y: auto;
    overflow-x: hidden;
	font-family:'HGGGothicssi 40g',NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',Sans-serif;
	color:#000;
}

body.user_play:lang(zh){	
	font-family:'cwtexhei','HGGGothicssi 40g',NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',Sans-serif;	
}

body.user_play:lang(ja){	
	font-family:'Noto Sans JP',Meiryo,'Noto Sans KR',Arial,sans-serif !important;
}

#wrap{
	width:100%;
	height: 100%;
	position: absolute;
	min-width:auto;
}

.logo{
	/* background: url('/webdata/images/logo_w.png') no-repeat; */
    position: relative;
    transition: all .3s ease;
    display: inline-block;
}

.logo:lang(ja){
	/* background: url('/webdata/images/japan/logo/logo_w.png') no-repeat; */
    position: relative;
    transition: all .3s ease;
    display: inline-block;
}

.logo > img{
	height: 100%;
}

input::-webkit-input-placeholder{
	color:#c9c9c9;
	text-align:center;
}

input::-ms-input-placeholder{
	color:#c9c9c9 !important;
	text-align:center;
}

input:-ms-input-placeholder{
	color:#c9c9c9;
	text-align:center;
}

button:active{
  position:relative;
  top:7px;
}

.container{
	position: relative;
	text-align: center;
}


.pin_submit{
	color: #fff;
    border-radius: 30px;
    border: none;
    background-image: -webkit-linear-gradient(right, rgb(254,146,35) 0%, rgb(255,92,76) 100%);
    background-image: -o-linear-gradient(right, rgb(254,146,35) 0%, rgb(255,92,76) 100%);
    background-image: linear-gradient(to right, rgb(254,146,35) 0%, rgb(255,92,76) 100%);
    border-bottom: rgb(206, 92, 50) 7px solid;
}




@media all and (min-width:279px){

	
	.user_play_bg{
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		display: block;
		background: linear-gradient(to right, #845ec2 , #b44a9a, #d27a5f , #e4b673);
	}
	
	
	.user_play_bgimg{
		display: block;
		width:100%;
		height:100%;
		background: url(/webdata/images/user_play_bg.png) center center no-repeat;
		background-size:cover;
	}
	
	
	.logo {
	    position:absolute;
	    top: 21px;
	    left: 20px;
	}
	
	
	.container.come{
		width: 75%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.container.m_guide{
		top:25%;
	}
	
	
	
	.pin_input{
	    width: 100%;
	    height: 50px;
	    border: 1px solid #dbdbdb;
	    background: #fff;
	    vertical-align: middle;
	    font-size: 18px;
	    border-radius: 5px;
	    color: #000;
	    text-align: center;
	    margin-top: 3%;
	    font-weight:normal;
	}
	
	
	.pin_submit{
	    font-size: 20px;
	    padding:16px 70px;
	    margin-top: -20px;
	
	}
	

	
	.come .come_area{
		display: inline-flex;
        width: auto;
	}

	
	.come_content{
		order: 2;
	}
	
	.title{
		color: #fff21a;
	    font-size: 26px;
	    line-height: 35px;
	    transition: all .3s ease;
	}
	
	.pin_title{
		color:#fff;
		font-size: 26px;
	    line-height: 1.3;
	   	padding-bottom: .2em;
	   	transition: all .3s ease;
	}
	
	.pin_title > br{
		display: block;
	}
	
	
	.come .sub_t{
		color:#fff;
		font-size: 26px;
		text-align: center;
		margin-top:25px;
	}
	
	.come .pin_submit{
	    font-size: 20px;
	    padding:16px 60px;
	    outline:0;
	}
	
	.m_guide{
		color:#fff;
		font-size: 24px;
	    line-height: 1.8;
	    width: 90%;
	    margin: 0 auto;
	}
	
	.m_guide_title{
		transition: all .3s ease;
	}
	
	
	.data{
		font-size:40px; 
		color:#fff21a;
		line-height: 1.2;
		transition: all .3s ease;
	}
	
	.container.m_end_guide{
		top:24%;
		width: 90%;
	    margin: 0 auto;
	}
	
	
	.m_guide_end_title{
		color:#fff21a;
		font-size: 26px;
		line-height:1.3;
		transition: all .3s ease;
	}
	
	.end_data{
		font-size: 36px;
	
	}
	
	.end_s_title{
		font-size: 24px;
	    padding-top: 5%;
	    color: #fff;
	    line-height: 1.3;
	    transition: all .3s ease;
	}
	

}




@media all and (min-width:800px){
	
	
	.user_play_bg {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		display: block;
		background: linear-gradient(to right, #845ec2 , #b44a9a, #d27a5f , #e4b673);
	}
	
	
	.user_play_bgimg{
		display: block;
		width:100%;
		height:100%;
		background: url(/webdata/images/user_play_bg.png) center center no-repeat;
		background-size:cover;
	}
	
	.bottom_sp_bg {
		position:absolute;
		right: 5%;
		bottom:0;
	}
	
	
	.bottom_sp_bg img{
		width: 100%;
	}
	
	.logo{
	    width: 171px;
	    height: 39px;
	    top: 30px;
	    left: 30px;
	    position: absolute;
	}
	
	
	.container.come{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.title{
		color:#fff21a;
		font-size: 45px;
		line-height: 55px;
		width: 100%;
	    height: auto;
	}
	
	.pin_title{
		margin-top:30px;
		color:#fff;
		font-size: 33px;
	    line-height: 1.2;
	}
	
	.pin_title > br{
		display: none;
	}
	
	.pin_input{
	    width: 390px;
	    height: 70px;
	    border: 1px solid #dbdbdb;
	    background: #fff;
	    vertical-align: middle;
	    font-size: 24px;
	    border-radius: 5px;
	    color:#000;
		text-align:center;
		margin-top:30px;
		font-weight:normal;
	}
	
	
	.come .come_area{
		display: inline-flex;
		width: auto;
	}
	
	.come .comeImg{
		background: url(/webdata/images/come_c.png) no-repeat left;
	    margin-left: -180px;
	    width: 10rem;
	    background-size: contain;
	    position: relative;
	    float: left;
	    height: 15rem;
	    left: 175px;
	    top: 120px;
	}
	
	
	.come .sub_t{
		color:#fff;
		font-size: 30px;
		text-align: center;
		margin-top:25px;
	}
	
	.pin_submit{
	    font-size: 20px;
	    padding:16px 60px;
	}
	
	.come_content{
		display: inline-block;
	}
	
	.container.m_guide{
		color:#fff;
		font-size: 40px;
		line-height:55px;
		top:30%;
	}
	
	.data > br{
		display: none;
	}
	
	.data{
		font-size:45px; 
		color:#fff21a;
	}
	
	.container.m_end_guide{
		top:30%;
	}
	
	
	.m_guide_end_title{
		color:#fff21a;
		font-size: 50px;
		line-height:65px;
		letter-spacing: 1.5px;
	}
	
	.end_data{
		font-size: 55px;
	
	}
	
	.end_s_title{
		font-size: 32px;
		padding-top:1%;
		color:#fff;
		padding-bottom: 20px;
	}

}



@media all and (min-width:1400px){
	
	
	.user_play_bg {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		display: block;
		background: linear-gradient(to right, #845ec2 , #b44a9a, #d27a5f , #e4b673);
	}
	
	
	.user_play_bgimg{
		display: block;
		width:100%;
		height:100%;
		background: url(/webdata/images/user_play_bg.png) center center no-repeat;
	}
	
	
	.logo{
	    width: 171px;
	    height: 39px;
	    top: 30px;
	    left: 30px;
	}
	
	
	.container.come{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.title{
		color:#fff21a;
		font-size: 55px;
		line-height: 70px;
		width: 100%;
	    height: auto;
	    transition: all .3s ease;
	}
	
	.pin_title{
		margin-top:30px;
		color:#fff;
		font-size: 42px;
		line-height: 50px;
		transition: all .3s ease;
	}
	
	.pin_title > br{
		display: none;
	}
	
	.pin_input{
	    width: 390px;
	    height: 70px;
	    border: 1px solid #dbdbdb;
	    background: #fff;
	    vertical-align: middle;
	    font-size: 24px;
	    border-radius: 5px;
	    color:#000;
		text-align:center;
		margin-top:30px;
	    font-weight:normal;
	}
	
	
	
	.come .come_area{
		display: inline-flex;
		width: auto;
	}
	
	.come .comeImg{
		background: url(/webdata/images/come_c.png) no-repeat left;
	    margin-left: -180px;
	    width: 12rem;
	    background-size: contain;
	    position: relative;
	    float: left;
	    height: 15rem;
	    left: 220px;
	    top: 120px;
	}
	
	
	
	.come .sub_t{
		color:#fff;
		font-size: 30px;
		text-align: center;
		margin-top:25px;
	}
	
	.pin_submit{
	    font-size: 24px;
	    padding:16px 60px;
	}
	
	.come_content{
		display: inline-block;
	}
	
	
	.container.m_guide{
		color:#fff;
		font-size: 50px;
		line-height:65px;
		top: 30%;
	}
	
	.m_guide_title{
		transition: all .3s ease;
	}
	
	.data > br{
		display: none;
	}
	
	
	.data{
		font-size:55px; 
		color:#fff21a;
		transition: all .3s ease;
	}
	
	.container.m_end_guide{
		top:30%;
	}
	
	
	.m_guide_end_title{
		color:#fff21a;
		font-size: 60px;
		line-height:65px;
		letter-spacing: 1.5px;
		transition: all .3s ease;
	}
	
	.end_data{
		font-size: 70px;
	
	}
	
	.end_s_title{
		font-size: 36px;
		padding-top:1%;
		color:#fff;
		padding-bottom: 20px;
		transition: all .3s ease;
	}


}



/* 권장사양 팝업 */
#specification_wrap .specification_window{
	width: 500px;
    height: 410px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute;
    margin: 0 auto;
    top: 5rem;
    left:50%;
    transform: translate(-50%);
}

.specification_mask {
	width:100%;
	height:100%;
    position:absolute;  
    z-index:9000;  
    background-color:#000;  
    display:none;  
    left:0;
} 

.specification_window{
    display: none;
    position:absolute;  
    background-color:#FFF;
    z-index:10000;   
}

.specification_window .div_pop_close{
	position: absolute;
	right: 0;
	background: url(/webdata/images/close_btn.png) no-repeat center center; 
	margin:10px;
	width: 18px;
	height: 18px;
}

.specification_window .pop_close{
	width: 18px;
	height: 18px;
	position: absolute;
}
/* 권장사양 팝업 */