@charset "UTF-8";


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

#wrapper {
	width: 100%;
	height: auto;
}

#header {
	width: 100%;
}

#contents {
	width: 100%;
	height: auto;
}

#contents .message {
	width: 100%;
}

#contents .errorMessage {
	width: 100%;
}

#contents .form .btn {
	padding-bottom: 51px;
}

#footer {
	width: 100%;
	height: 50px;
}

/* thanks */
#thanks #contents .message {
	padding: 60px 0;
}
}


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

#wrapper {
	width: 100%;
	height: auto;
	position: static;
}

#header {
	width: 100%;
	height: 80px;
}

#header h1 {
	font-size: 30px !important;
	/* line-height: 80px; */
}

#contents {
	width: 100%;
	height: auto;
}

#contents .message {
	width: auto;
	line-height: normal;
	margin: 0 20px;
	padding-top: 40px;
}

#contents .errorMessage {
	width: auto;
	line-height: normal;
	margin: 0 20px;
	padding-top: 40px;
}

#contents .form {
	margin:0 20px;
	padding-top: 40px;
}

#contents .form p {
	margin-bottom: 10px;
}

#contents .form .btn {
	padding: 40px 0;
}

#footer {
	width: 100%;
	height: 50px;
}

/* change */
#change #contents .message {
	padding-top: 40px;
}

#change #contents .form {
	padding-top: 40px;
}

/* thanks */
#thanks #contents .message {
	padding: 60px 0;
}
}

@media only screen and (max-width: 670px) {
#contents .form #nameBox {
	width:100%;
}

#contents .form #nameTitle {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#contents .form #nameField {
	width: 100%;
	margin: 0 auto 20px;
}
}

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

#header {
	height: 60px;
}

#header h1 {
	font-size: 18px !important;
	/* line-height: 60px; */
}

#contents .message {
	font-size: 16px;
}

#contents .errorMessage {
	font-size: 16px;
}

#contents .form {
	font-size: 14px;
}

#contents .form input {
	width: 256px;
	font-size: 14px;
}

/* unsubscribe */
#unsubscribe #contents .form ul {
	width: 300px;
}

/* thanks */
#thanks #contents .message {
	padding: 60px 0;
}

/* error */
.error #contents .form input {
	background-size: auto 100%;
}
}


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

#contents .message {
	font-size: 14px;
}

#contents .form {
	font-size: 12px;
}

#contents .form p {
	font-size: 12px;
}

#contents .form input {
	width: 234px;
	font-size: 12px;
}

#contents .form .btn img {
	width: 280px;
}

/* unsubscribe */
#unsubscribe #contents .form ul {
	width: 280px;
}

/* error */
.error #contents .form input {
	background: url(../../img/pub_member_form/bg-form.gif) repeat-x top right;
}
}


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

#header h1 {
	font-size: 14px;
}

#contents .message {
	font-size: 12px;
}

#contents .form {
	font-size: 10px;
}

#contents .form p {
	font-size: 10px;
}

#contents .form input {
	width: 164px;
	font-size: 10px;
}

#contents .form .btn img {
	width: 210px;
}

#footer {
	font-size: 10px;
}

/* unsubscribe */
#unsubscribe #contents .form ul {
	width: 100%;
	white-space: nowrap;
}
}