@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb);

* {margin:0; padding:0;  font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum; }
img {border:0;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}

::-ms-clear { display: none; }


#wrap {width:100%; height:1000px; background-image: url("../images/bg.jpg"); background-position:center; text-align:center; margin:0 auto;}

#wrap .main_title {padding:70px 0 0 0;}
#wrap .contents_01 {margin:70px 0 0 0;}
#wrap .sub_title {margin:70px 0 0 0;}

#wrap .box {width:620px; height:490px; margin:100px auto 0 auto;}
#wrap .box .line_1 {float:left; width:100%; height:76px; padding: 150px 0 0 28px; margin:0 0 20px 0;}
#wrap .box .line_1 .txt {float:left; margin:0 20px 0 0; padding:25px 0 0 0;}
#wrap .box .line_1 .in_db {float:left;}
#wrap .box .line_1 .in_db input {width:495px; height:74px; font-size:30px; float:left; padding:0 0 0 20px;}
#wrap .box .line_1 .in_db input::placeholder {color:#bfbab1; letter-spacing: -2px;}

#wrap .box .line_2 {float:left; width:100%; height:76px; margin:0 0 20px 0;}
#wrap .box .line_2 .txt {float:left; margin:0 20px 0 0; padding:25px 0 0 0;}
#wrap .box .line_2 .in_db {float:left;}
#wrap .box .line_2 .in_db input {width:495px; height:74px; font-size:30px; float:left; padding:0 0 0 20px;}
#wrap .box .line_2 .in_db input::placeholder {color:#bfbab1; letter-spacing: -2px;}

#wrap .box .line_3 {float:left; width:100%; height:76px; margin:0 0 20px 0;}
#wrap .box .line_3 .txt {float:left; margin:0 23px 0 0; padding:25px 0 0 0;}
#wrap .box .line_3 .in_db {float:left;}
#wrap .box .line_3 .in_db input {width:495px; height:74px; font-size:30px; float:left; padding:0 0 0 20px;}
#wrap .box .line_3 .in_db input::placeholder {color:#bfbab1; letter-spacing: -2px;}

#wrap .box .line_4 {float:left; width:100%; height:76px; margin:5px 0 20px 0; padding:0 0 0 100px;}
#wrap .box .line_4 .txt {float:left; margin:0 10px 0 0; padding:15px 0 0 30px;}
#wrap .box .line_4 .look_btn {float:left; margin:0 23px 0 0; padding:15px 0 0 0;}
#wrap .box .line_4 .in_db {float:left;}

#wrap .check_btn {margin:150px 0 0 0;}
#wrap .footer {margin:230px 0 0 0;}




/*체크박스*/
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float:left;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  background-color: #fff;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 15px;
  top: 2px;
  width: 12px;
  height: 30px;
  border: solid  #9c704b;
  border-width: 0 8px 8px 0;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}





/*레어이팝업*/
.white_content {
    width:100%;
    margin:0 auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.white_content:target {
    opacity:1;
    pointer-events: auto;
}
.white_content > div {
	position: absolute;
  margin:-337px 0 0 -258px;
	top: 40%;
	left:50%;
	width:482px;
	height: 900px;
	background-image: url("../images/event_pop.png");
	overflow: auto;
}

.white_content > div .close_btn {
  margin:840px 0 0 0;
  margin-left: 170px
}


@media only screen and (max-width:999px) and (min-width:280px){
  .white_content {
	width: 100%; height: 100vh; z-index: 9999;
  }
  .white_content > div {
    position: absolute; top: 50%; left: 50%; z-index: 9999;
    margin: 0px 0 0 0;
	transform: translate(-50%, -50%);
    width: 80%; height: 80%;
	background-size: cover;
  }
  .white_content > div .close_btn {
    margin: 0;
    position: absolute; bottom: 10px; left: 50%;
	transform: translateX(-50%);
	height: 25px; width: auto;
  }
}