@charset "utf-8";
/* CSS Document */

/* *******************************************************

	* ProjectName : e-Histology Landing Page
	* FileName : landing_subscription_201125.css
	* Description : About e-Histology Page
	* Date : 2020.11.25
	* Name : 김희선
 
******************************************************** */


/* -------------------------------- 

Subscription Terms Style

-------------------------------- */
.terms_inner {
	width: 100%;
	text-align: center;
	position: relative;
	padding: 195px 0 100px 0;
	background-color: #f5f5f5;
	box-sizing: border-box;
}
.terms_inner .terms_box {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.terms_box > h2 {
	font-size: 40px;
	font-weight: 600;
	line-height: 42px;
	color: #000000;
}
.terms_box > p {
	font-size: 18px;
	font-weight: 300;
	color: #666666;
	line-height: 36px;
	margin-top: 30px;
}
.terms_box > p a {
	font-weight: 500;
	color: #359bdc;
	text-decoration: underline;
  text-underline-position: under;
}

@media only screen and (max-width: 1200px) {
	.terms_inner {
		padding: 155px 0 100px 0;
	}
}
@media only screen and (max-width: 1023px) {
	.terms_inner {
		padding: 130px 5% 75px;
	}
}
@media only screen and (max-width: 840px) {
	.terms_inner {
		padding: 105px 5% 55px;
	}
	.terms_box > h2 {
    font-size: 32px;
    line-height: 34px;
	}
	.terms_box > p {
    font-size: 15px;
    line-height: 26px;
    margin-top: 20px;
	}
}
/* -------------------------------- 

Subscription More Style

-------------------------------- */
.more_inner {
	width: 100%;
	text-align: center;
	position: relative;
	padding: 65px 0;
	background-color: #c3384f;
	box-sizing: border-box;
}
.more_inner .more_box {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.more_box > p {
	font-size: 34px;
	font-weight: 500;
	line-height: 36px;
	color: #ffffff;
}
.more_box > p a {
	display: block;
	width: 350px;
	height: 42px;
	margin: 50px auto 0;
	font-size: 22px;
	color: #ffffff;
	font-weight: 600;
	padding: 10px 0;
	line-height: 42px;
	background-color: transparent;
	text-align: center;
	border: 2px #ffffff solid;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
}
.more_box > p a:hover {
	background-color: #ffffff;
	color: #c3384f
}
@media only screen and (max-width: 1200px) {
	.more_inner {
		padding: 50px 0;
	}
	.more_box > p {
    font-size: 30px;
    line-height: 32px;
	}
	.more_box > p a {
    margin: 35px auto 0;
	}
}
@media only screen and (max-width: 1023px) {
	.more_inner {
		padding: 45px 5%;
	}
	.more_box > p {
    font-size: 26px;
    line-height: 30px;
	}
	.more_box > p a {
    width: 40%;
    height: 30px;
    margin: 30px auto 0;
    font-size: 22px;
    line-height: 30px;
	}
}
@media only screen and (max-width: 840px) {
	.more_inner {
		padding: 35px 5%;
	}
	.more_box > p {
    font-size: 24px;
    line-height: 32px;
	}
	.more_box > p a {
    width: 45%;
    height: 30px;
    margin: 30px auto 0;
    font-size: 20px;
		font-weight: 500;
    line-height: 30px;
	}
}
@media only screen and (max-width: 567px) {
	.more_box > p a {
    width: 70%;
    height: 30px;
    margin: 30px auto 0;
    font-size: 20px;
		font-weight: 500;
    line-height: 30px;
	}
}


/* -------------------------------- 

Subscription Inquiry Style

-------------------------------- */
.inquiry_inner {
	width: 100%;
	text-align: center;
	position: relative;
	padding: 100px 5%;
	background-color: #ffffff;
	box-sizing: border-box;
}
.inquiry_inner .inquiry_box {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.inquiry_box > h2 {
	font-size: 40px;
	font-weight: 600;
	line-height: 42px;
	color: #000000;
}
.inquiry_box > p {
	font-size: 18px;
	font-weight: 300;
	color: #000000;
	line-height: 36px;
	margin-top: 30px;
}
@media only screen and (max-width: 1200px) {
	.inquiry_inner {
		padding: 100px 0;
	}
}
@media only screen and (max-width: 1023px) {
	.inquiry_inner {
		padding: 75px 5%;
	}
}
@media only screen and (max-width: 840px) {
	.inquiry_inner {
		padding: 55px 5%;
	}
	.inquiry_box > h2 {
    font-size: 30px;
    line-height: 34px;
	}
	.inquiry_box > p {
    font-size: 16px;
    line-height: 28px;
    margin-top: 20px;
	}
}
/* Query Style */
.query_area {
	display: block;
	overflow: hidden;
	width: 690px;
	margin: 40px auto 0;
	text-align: left;
}
.query_area > ul > li {
	width:690px;
	display:inline-block;
	overflow:hidden;
	zoom:1;
	*display:inline/*IE7 HACK*/;
	_display:inline;/*IE6 HACK*/ 
	margin-bottom:11px;
}
.query_con > li {
	overflow:hidden;
	display:inline-block;
	zoom:1;
	*display:inline/*IE7 HACK*/;
	_display:inline;/*IE6 HACK*/ 
}
.query_con > li.left {
	float:left;
	width:295px;
	height:35px;
	border:1px #bfbfbf solid;
}
.query_con > li.right {
	float:right;
	width:295px;
	height:35px;
	border:1px #bfbfbf solid;
}
.query_con > li.left2 {width:35px; height:35px; border-left:1px #bfbfbf solid; border-top:1px #bfbfbf solid; border-bottom:1px #bfbfbf solid; float:left;}
.query_con > li.right2 {width:654px; height:255px; float:right;}

.icon_query1 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 0;}
.icon_query2 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -35px;}
.icon_query3 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -70px;}
.icon_query4 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -105px;}
.icon_query5 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -140px;}
.icon_query6 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -175px;}
.icon_query7 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -210px;}
.icon_query8 {float: left; width:35px; height:35px; background:url(../../images/icon/icon_query.png) no-repeat 0 -245px;}

.form01 {
	width: 239px;
	height: 35px;
	border-left: 1px #bfbfbf solid;
	font-size: 13px;
	padding: 0 0 0 20px;
	border-right: none;
	border-top: none;
	border-bottom: none;
}
.textarea01 {
	width: 612px;
	height: 210px;
	border: 1px #bfbfbf solid;
	padding: 20px;
	font-size: 13px;
	line-height: 22px;
}
.btn_query {
	display: block;
	width: 250px;
	height: 45px;
	background: #c3384f;
	color: #ffffff;
	font-size: 97.5%;
line-height: 45px;
	margin: 0 auto;
}
div.select_box {
	position: relative;
	width: 259px;
	height: 35px;
	background: url(../../images/icon/icon_arrow1.png) 225px center no-repeat; /* 화살표 이미지 */
	border-left:1px #bfbfbf solid;
	border-right:none; 
	border-top:none; 
	border-bottom:none;
	margin-left:35px;
}
div.select_box label {
	position: absolute;
	font-size: 13px;
	top: 12px;
	left: 20px;
	letter-spacing: 1px;
	box-sizing: border-box;
}
div.select_box select.sArea, div.select_box select.sType {
	width: 100%;
	height: 35px;
	min-height: 35px;
	line-height: 35px;
	padding: 0 10px;
	opacity: 0;
	filter: alpha(opacity=0); /* IE 8 */
	box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
	.query_area {
		width: 100%;
		margin: 30px auto 0;
	}
	.query_area > ul > li {
		width:100%;
		display:block;
	}
	.query_con > li {
		display:block;
	}
	.query_con > li.left {
		float:none;
		width: auto;
		margin-bottom: 11px;
	}
	.query_con > li.right {
		float:none;
		width: auto;
	}
	div.select_box {
		width: auto;
		height: 35px;
		background: url(../../images/icon/icon_arrow1.png) 99% center no-repeat; /* 화살표 이미지 */
		border-left:1px #bfbfbf solid;
		border-right:none; 
		border-top:none; 
		border-bottom:none;
		margin-left:35px;
	}
	.form01 {
		width: auto;
		height: 35px;
		border-left: 1px #bfbfbf solid;
		font-size: 13px;
		padding: 0 0 0 20px;
		border-right: none;
		border-top: none;
		border-bottom: none;
	}
	.textarea01 {
		width: 100%;
		height: 210px;
		border: 1px #bfbfbf solid;
		padding: 20px;
		font-size: 13px;
		line-height: 22px;
		box-sizing: border-box;
	}
}
@media only screen and (max-width: 320px) {
	.query_con > li.right2 {
		float: left;
		width: 87.5%;
		height: auto;
	}	
}
@media only screen and (max-width: 410px) and (min-width: 321px) {
	.query_con > li.right2 {
		float: left;
		width: 88.5%;
		height: auto;
	}	
}
@media only screen and (max-width: 560px) and (min-width: 411px) {
	.query_con > li.right2 {
		float: left;
		width: 90%;
		height: auto;
	}	
}
@media only screen and (max-width: 639px) and (min-width: 561px) {
	.query_con > li.right2 {
		float: left;
		width: 92.9%;
		height: auto;
	}	
}
@media only screen and (max-width: 767px) and (min-width: 640px) {
	.query_con > li.right2 {
		float: left;
		width: 93.7%;
		height: auto;
	}	
}
.security_area {
	float: left;
	overflow: hidden;
}
.security_char {
	float: left;
	width: 340px;
	height: 78px;
}
.security_char .char_img {
	float: left;
	width: 230px;
}
.security_char .char_img > img {
	width: 230px;
	height: 78px;
}
.security_char > ul {
	float: left;
	width: 110px;
}
.security_char > ul li.return {
	display: block;
	border: 1px solid #e0e0e0;
	padding: 10px 7px 10px 7px;
	box-sizing: border-box;
	background-color: #ffffff;
}
.security_char > ul li.sound {
	display: block;
	border: 1px solid #e0e0e0;
	padding: 9px 7px 10px 7px;
	box-sizing: border-box;
	margin-top: -1px;
	background-color: #ffffff;
}
.security_input {
	float: right;
}
.security_input > input {
	width: 340px;
	height: 78px;
	box-sizing: border-box;
	border: 1px #e0e0e0 solid;
	padding: 0 20px;
	text-align: center;
}
@media only screen and (max-width: 480px) {
	.security_area {
		float: none;
		overflow: hidden;
		margin-left: 0;
	}
	.security_char {
		float: none;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.security_char .char_img, .security_char > ul {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	.security_char .char_img > img {
		width: 100%;
		height: auto;
	}
	.security_char > ul li.return, .security_char > ul li.sound {
		text-align: center;
		padding: 13px 7px;
	}
	.security_input {
		float: none;
		display: block;
		width: 100%;
		margin: 10px auto 0;
	}
	.security_input > input {
		width: 100%;
		height: 78px;
	}
}
@media only screen and (max-width: 700px) and (min-width: 481px) {
	.security_area {
		float: none;
		overflow: hidden;
		margin-left: 0;
	}
	.security_char {
		float: none;
		width: 60%;
		height: auto;
		margin: 0 auto;
	}
	.security_char .char_img {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	.security_char > ul {
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	.security_char .char_img > img {
		width: 100%;
		height: auto;
	}
	.security_char > ul li.return, .security_char > ul li.sound {
		text-align: center;
		padding: 13px 7px;
	}
	.security_input {
		float: none;
		display: block;
		width: 60%;
		margin: 10px auto 0;
	}
	.security_input > input {
		width: 100%;
		height: 78px;
	}
}
@media only screen and (max-width: 767px) and (min-width: 701px) {
	.security_area {
		float: left;
		overflow: hidden;
		margin-left: 0;
	}
	.security_char {
		float: none;
		width: 340px;
		height: 78px;
		margin: 0 auto;
	}
	.security_input {
		float: right;
		width: 300px;
		margin: 0 auto;
	}
	.security_input > input {
		width: 100%;
		height: 78px;
	}
}
.p_around_pc {
	display: block;
}
.p_around_m {
	display: none;
}
@media only screen and (max-width: 560px) {
	.p_around_pc {
		display: none;
	}
	.p_around_m {
		display: block;
	}
}