@charset "utf-8";
/* ================================================================== */
/* Name	: public.css
/* Script : Public CSS
/* Author : Design Geulggol
/* Date	: 2020-09-22
/* ================================================================== */
/* ----------------------------- */
/* portfolio
/* ----------------------------- */

.portfolio {
	margin: 8% auto 0;
	padding: 0 130px;
	max-width: 1680px;
}
#port04 {
	margin-bottom: 8%;
}

/* pf-txt */
.pf-txt {
	padding: 0 1.2%;
}
.pf-txt h2 {
	position:relative; 
	display: inline-block;
	font-size: 6.8rem;
	font-family: "RobotoBold";
}
.pf-txt .sub-ti {
	margin-top: 15px;
	font-size: 1.6rem;
	color: #c0c0c0;
	font-family: "NotoSansLight";
}
.pf-txt p {
	width: 66%;
	margin: 3% 0 7%;
}
.pf-txt h2:after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 11px;
	background: #ed1941;
	border-radius: 50%;
}

/* list */
.portfolio-wrap {
	position: relative;
}
/* arrow */
.portfolio-wrap .arrow {
	position: absolute;
	top: -159px;
	right: 1.2%;
	color: #a3a3a3;
	font-family: "RobotoLight";
}
.portfolio-wrap .arrow:after {
	content: "";
	display: block;
	width: 1px;
	height: 60px;
	margin: 26px auto 0;
	background: #cccccc;
}
.portfolio-wrap .arrow > strong {
	font-size: 2.4rem;
	color: #ed1941;
	font-family: "RobotoMedium";
}
.portfolio-wrap .arrow span.left {
	padding-right: 54px;
}
.portfolio-wrap .arrow span.right {
	padding-left: 54px;
}
.portfolio-wrap .arrow span img {
	width: 17px;
	height: 33px;
}

/* image */
.pf-list  {
	overflow: hidden;
}
.pf-list .pf-img {
	position: relative;
	float: left;
	width: 30.6%;
 	margin: 0 1.2% 40px; 
	padding-top: 22%; 
}
.pf-list .pf-img figure {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;	
}
.pf-list .pf-img figure .hover {
	opacity: 0;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
	background: rgba(0, 0, 0, 0.8);
	text-align: center;	
	transition: ease 0.3s;
}
.pf-list .pf-img:hover figure .hover {
	opacity: 1;
	transition: ease 0.3s;
}
.pf-list .pf-img figure a .hover {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
}
.pf-list .pf-img figure a .hover h3 {	
	width: 86%;
	margin: 0 auto 16px;
	font-size: 3.0rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	letter-spacing: 0;
}
.pf-list .pf-img figure a .hover h3 span {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 2px solid #fff;
	margin-left: 0;
}
.pf-list .pf-img figure a .hover h3:before {
	content: "";
	display: block;
	opacity: 0.5;
	margin: 60px auto 40px;
	width: 1px;
	height: 82px;
	background: #fff;
}
.pf-list .pf-img figure a .hover > div {
	color: #b0b0b0;
}



/* ----------------------------- */
/* contact_us
/* ----------------------------- */
.contact_us {
	padding: 6% 0 8%;
	background: url("/share/images/contact_bg.jpg") no-repeat top center;
	background-size: cover;
}
.contact_us h2 {
	margin-bottom: 3%;
	font-size: 4.8rem;
	font-family: "NotoSansMedium";
	color: #fff;
	text-align: center;
}

.contact-content .input-content {
	position: relative;
	overflow: hidden;
}
.contact-content select {
	width: 100%;
	margin-bottom: 20px;
	padding: 28px;
	border: 0;
}
.contact-content .input-content input {
	float: left;
	width: 49%;
	margin-right: 2%;
	margin-bottom: 20px;
	padding: 28px;
}
.contact-content .input-content input:nth-child(4n) {
	margin-right: 0;
}
.contact-content label.invisible {
	border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.contact-content textarea {
	width: 100%;
	padding: 28px;
	border: 0;
	font-family: "NotoSansDemiLight";
}
.personal-info {
	padding: 18px 0 4% 0;
	font-size: 1.6rem;
	color: #bbbbbb;
}
.personal-info input {
	width: 22px;
	height: 22px;
	border: 0;
	margin-right: 10px;
	border-radius: 0;
}
.personal-info span {
	border-bottom: 1px solid #bbbbbb;
}
.contact-content .button {
	text-align: center;
}
.contact-content button {
	width: 440px;
	padding: 28px;
	margin: 0 auto;
	background: #ed1941;
	color: #fff;
}


/* ----------------------------- */
/* Responsive
/* -----------------------------
/* Layout Max Size : 1440px
/* Desktop Size	: 1024px < Screen <= 1280px
/* Tablet Size	: 1024px < Screen <= 768px
/* Mobile Size	: 767px < Screen
/* ----------------------------- */

@media screen and (max-width:1680px) {
	/* ----------------------------- */
	/* portfolio
	/* ----------------------------- */
	/* image */
	.pf-list .pf-img figure a .hover h3:before {
		margin: 15% auto 12%;
		height: 32px;
	}
}


@media screen and (max-width:1440px) {
	/* ----------------------------- */
	/* portfolio
	/* ----------------------------- */
	.portfolio {
		max-width: 94%;
		padding: 0 3%;
	}
	/* pf-txt */
	.pf-txt {
		padding: 0;
	}	
	/* image */
	.pf-list .pf-img figure a .hover h3 {	
		width: 86%;
		margin: 0 auto 4px;
		font-size: 2.4rem;
	}
}

@media screen and (max-width:960px) {
	/* ----------------------------- */
	/* portfolio
	/* ----------------------------- */
	/* pf-txt */
	.pf-txt h2 {
		font-size: 5.4rem;
	}
	.pf-txt p {
		width: 100%;
	}

	/* arrow */
	.portfolio-wrap .arrow {
		position: static;
		text-align: center;
		margin-bottom: 20px;
	}
	.portfolio-wrap .arrow:after {
		display: none;
	}
	/* image */
	.pf-list .pf-img figure a .hover h3:before {
		margin: 10% auto 9%;
		height: 32px;
	}

	/* ----------------------------- */
	/* contact_us
	/* ----------------------------- */
	.contact_us h2 {
		font-size: 3.8rem;
	}
	
}

@media screen and (max-width:860px) {
	/* ----------------------------- */
	/* portfolio
	/* ----------------------------- */
	/* image */
	.pf-list .pf-img {
		padding-top: 0; 
		margin: 0 10px;
	}
	.pf-list .pf-img figure {
		position: static;
	}
	.pf-list .pf-img figure .hover {
		opacity: 1;
		height: auto;
		position: static;
		background: #fff;
		background: #fff;
	}
	.pf-list .pf-img figure a .hover {
		color: #000;
	}
	.pf-list .pf-img figure a .hover h3 {	
		width: 100%;
		margin: 18px auto 0;
		font-size: 2.0rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.pf-list .pf-img figure a .hover h3:before {
		display: none;
	}

}


@media screen and (max-width:768px) {
	/* ----------------------------- */
	/* portfolio
	/* ----------------------------- */
	.portfolio {
		margin: 12% auto 0;
	}
	/* pf-txt */
	.pf-txt h2 {
		font-size: 4.0rem;
	}
	
	/* ----------------------------- */
	/* contact_us
	/* ----------------------------- */
	.contact_us {
	padding: 10% 0 14%;
	background: url("/share/images/contact_bg.jpg") no-repeat top center;
	background-size: cover;
}
	.contact-content select {
	padding: 22px;
}
	.contact-content .input-content input {
	float: none;
	width: 100%;
	margin-right: 0%;
	margin-bottom: 20px;
	padding: 22px;
}
}

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

}

@media screen and (max-width:460px) {
	/* ----------------------------- */
	/* contact_us
	/* ----------------------------- */
	.contact-content button {
		display: inline-block;
		width: 70%;
		padding: 16px;
	}
}