@charset 'utf-8';

/* Project */

.project01 { width: 100%; }
.project02 { width: 100%; padding: 0 0 80px; box-sizing: border-box; }
.project03 { width: 100%; position: relative; padding-bottom: 250px; }
.project04 { width: 100%; position: relative; padding: 14vh 0 15vh;}
.project05 { width: 100%; position: relative; min-height: 780px; }
.project06 { width: 100%; padding: 0 0 80px; box-sizing: border-box; }

/* 뻐꾸기 배경색 */
.bgc_fdb513 { background: #fdb513; } 
.bgc_f5f5f5 { background: #f5f5f5; }
.bgc_ffffff { background: #fff; }
.bgc_f0f0f0 { background: #f0f0f0; }

/* 한우 배경색 */
.bgc_fc9e17 { background: #fc9e17; }
.bgc_878787 { background: #878787; }
.bgc_ffc045 { background: #ffc045; }
.bgc_f7f7ff { background: #f7f7ff; }
.bgc_ff4945 { background: #ff4945; }

.fc_white { color: #fff; }

.title03 {
	font-size: 6vh;
	font-weight: 700;
	margin: 14vh 0 3vh;
}

.title03_1 {
	font-size: 6vh;
	font-weight: 700;
	margin: 14vh 0 3vh;
}

.title04 {
	font-size: 6vh;
	font-weight: 700;
	margin: 14vh 0 3vh;
	display: inline-block;
	float: left;
}

.title05 {
	font-size: 6vh;
	font-weight: 700;
	display: inline-block;
	float: left;
}

.stitle {
	font-size: 2vh;
	font-weight: 700;
	display: inline-block;
}

.project01 ul li {
	float: left;
	margin-right: 40px;
	font-size: 24px;
	font-weight: 300;
	line-height: 50px;
}

.project01 ul li:hover {
	font-weight: 700;
}

.project02 .project02_left {
	width: 47%;
	float: left;
	display: inline-block;
	position: relative;
}

.project02 .project02_right {
	width: 47%;
	display: inline-block;
	margin-left: 5%;
	position: relative;
	top: -185px;
	float: left;
}

.project02 ul li {
	width: 100%;
	margin-bottom: 7.5vh;
}

.project02 ul li img {
	width: 100%;
}

.project02 ul li .project02_img {
	width: 100%;
	height: 30vw;
	background-size: 100%;
	background-position: center;
	transition: 0.3s;
	position: relative;
}

.project02 ul li:hover .project02_img {
	background-size: 105%;
}

.project02 ul li .project02_img .project02_imgbg {
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	transition: 0.2s;
}

.project02 ul li .project02_img .project02_imgbg h1 {
	color: #fff;
	font-size: 3vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.project02 ul li:hover .project02_img .project02_imgbg {
	opacity: 1;
}

.project02 ul li .project02_title {
	width: 100%;
}

.project02 ul li .project02_title p {
	font-size: 2.4vh;
	font-weight: 300;
	line-height: 0;
	margin: 3vh 0 2vh;
}

.project02 ul li .project02_title h1 {
	font-size: 3vh;
	font-weight: 700;
}

.project03 ul li {
	font-size: 2.4vh;
	font-weight: 300;
	line-height: 6vh;
}

.project03 ul.bold li {
	font-weight: 500;
}

p.go_site {
	font-size: 24px;
	font-weight: 300;
	margin-top: 100px;
	line-height: 40px;
	border-bottom: 1px solid #000;
	display: inline-block;
}

p.go_site2 {
	font-size: 24px;
	font-weight: 300;
	margin-top: 100px;
	line-height: 40px;
	border-bottom: 1px solid #fff;
	display: inline-block;
}

p.go_site:hover {
	font-weight: 700;
}

p.sub_txt {
	float: right;
	width: 60%;
	font-size: 2.4vh;
	line-height: 4vh;
    margin: 15vh 0 3vh;
    display: inline-block;
	font-weight: 300;
	letter-spacing: -1px;
	text-align: justify;
}

p.sub_txt02 {
	float: right;
	width: 60%;
	font-size: 2.4vh;
	line-height: 4vh;
    margin-bottom: 3vh;
    display: inline-block;
	font-weight: 300;
	letter-spacing: -1px;
	text-align: justify;
}

p.sub_txt2 {
	float: right;
	width: 60%;
	font-size: 2.4vh;
	line-height: 4vh;
    margin: 1vh 0 3vh;
    display: inline-block;
	font-weight: 300;
	text-align: justify;
}

p.sub_txt3 {
	font-size: 2.4vh;
	line-height: 4vh;
	font-weight: 300;
	width: 60%;
	text-align: justify;
}

.txt_box {
	min-height: 45vh;
}

.app_imgbx01 {
	width: 69vh;
	margin: 0 auto 20vh;
	position: relative;
}

.app_imgbx01 img.app_leftimg {
	width: 33vh;
}
.app_imgbx01 img.app_rightimg {
	width: 33vh;
	position: relative;
	top: 13vh;
	margin-left: 2vh;
}

.app_imgbx02 {
	width: 100%;
	margin: 0 auto 20vh;
	position: relative;
}

.app_imgbx02 img.app_centerimg {
	width: 100%;
}

.project04_box {
	width: 100%;
	min-height: 200px;
	position: relative;
}

.project04_box img {
	width: 66.3vh;
}

ul.color_palette {
	position: absolute;
	right: 10vh;
	top: 0;
}

ul.color_palette li {
	float: left;
	width: 21.4vh;
	margin-right: 1vh;
}

ul.color_palette li:last-child{
	margin-right: 0;
}

ul.color_palette li p {
	font-size: 2vh;
	margin: 0 0 10px;
	font-weight: 300;
}

ul.color_palette li div {
	width: 100%;
	height: 120px;
	text-align: right;
	padding: 98px 10px 0 0;
	box-sizing: border-box;
}

ul.color_palette li div.h50per {
	width: 100%;
	height: 60px;
	text-align: right;
	padding: 38px 10px 0 0;
	box-sizing: border-box;
}



ul.app_images {
	float: right;
	width: 33.3%;
	position: relative;
	text-align: right;
}

ul.app_images li img {
	width: 31vh;
	margin-top: 2vh;
	border-radius: 6vh;
	box-shadow: 0.5vh 0.5vh 1.7vh 0.5vh #d5d5d5;
}

ul.app_images.app_images_01 {
	top: -13vh;
}

ul.app_images.app_images_02 {
	top: 15vh;
	margin-bottom: 20vh;
}

ul.app_images.app_images_03 {
	top: 59vh;
}

.rotate180 {
	transform: rotate(180deg);
}

img.flycuckoo01.right_img {
	position: absolute;
	right: 0;
	top: 5%;
	width: 52vh;
	padding-right: 60px;
}

img.flycuckoo02.right_img {
	width: 400px;
	position: absolute;
	right: 0;
	top: 252px;
	z-index: 400;
}

img.hanwoo01.right_img {
	position: absolute;
	right: 0;
	top: -30%;
	width: 45vh;
	padding-right: 60px;
}

img.hanwoo02.right_img {
	width: 43vh;
	position: absolute;
	right: 0;
	top: 250px;
	z-index: 400;
}

img.IBD02.right_img {
	width: 43vh;
	position: absolute;
	right: 0;
	top: 400px;
	z-index: 400;
}
/* //Project */


/* 모바일 */

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

	.project03 { padding-bottom: 0; }
	.project05 { min-height: 100vw; }

	/* Project */

	.title03 {
		font-size: 8vw;
		line-height: 12vw;
		margin: 0 0 4vw;
	}

	.title03_1 {
		font-size: 8vw;
		line-height: 12vw;
		margin: 18.6vw 0 4vw;
		font-weight: 700;
	}

	 .title04, .title05 {
	 	width: 100%;
	 	font-size: 8vw;
		line-height: 12vw;
		margin: 18.6vw 0 4vw;
	}

	.title05 {
		width: 100%;
	 	font-size: 8vw;
		line-height: 12vw;
		margin: 0 0 4vw;
	}

	.stitle {
		font-size: 2.6vw;
		display: block;
		width: 100%;
	}

	.project01 ul li {
		margin-right: 5vw;
		font-size: 2vh;
		font-weight: 300;
		line-height: 50px;
	}

	.project01 ul li:hover {
		font-weight: 700;
	}

	.project02 .project02_left {
		width: 100%;
	}

	.project02 .project02_right {
		width: 100%;
		margin-left: 0;
		top: 0;
	}

	.project02 ul li .project02_img {
		height: 85vw;
	}

	.project02 ul li .project02_title p {
		font-size: 2vh;
		margin: 3vh 0 2vh;
	}

	.project02 ul li .project02_title h1 {
		font-size: 4vw;
	}

	.project03 ul li {
		font-size: 2.4vh;
		line-height: 6vh;
	}

	p.go_site {
		font-size: 2vh;
	}

	p.go_site2 {
		font-size: 2vh;
	}

	p.sub_txt, p.sub_txt2, p.sub_txt3 {
		width: 100%;
		font-size: 2vh;
		line-height: 5.3vw;
		margin: 0 0 4vw;
	}

	.app_imgbx01 {
		width: 100%;
		margin: 0 auto 15vw;
	}

	.app_imgbx01 img {
		width: 40.5vw;
	}

	.app_imgbx01 img.app_rightimg {
		position: relative;
		top: 17vw;
		margin-left: 0;
	}

	.project04_box {
		width: 100%;
		padding-bottom: 30vw;
		position: relative;
	}

	.project04_box img {
		width: 100%;
		margin-top: 8.6vw;
	}

	ul.color_palette {
		position: relative;
		left: 0;
	}

	ul.color_palette li {
		width: 28.5vw;
		margin: 8.6vw 1.6vw 0 0;
	}

	ul.color_palette li:first-child {
		float: none;
	}

	ul.color_palette li p {
		float: left;
	}

	ul.color_palette li:last-child{
		margin-right: 0;
	}

	ul.color_palette li p {
		font-size: 2.6vw;
		margin: 0 0 1.3vw;
		font-weight: 300;
	}

	ul.color_palette li div {
		position: relative;
		left: 19vw;
		height: 16.5vw;
		text-align: right;
		padding: 13vw 1.3vw 0 0;
		box-sizing: border-box;
	}

	ul.color_palette li div.h50per {
		width: 100%;
		height: 8.25vw;
		text-align: right;
		padding: 4.5vw 1.3vw 0 0;
		box-sizing: border-box;
	}



	ul.app_images {
		float: right;
		width: 50%;
		left: -5%;
	}

	ul.app_images li img {
		width: 34vw;
		margin-top: 0;
		border-radius: 8vw;
		box-shadow: 0.6vw 0.6vw 2.2vw 0.6vw #d5d5d5;
	}

	ul.app_images.app_images_01 {
		top: 0;
	}

	ul.app_images.app_images_02 {
		top: 20vw;
		margin-bottom: 0;
	}

	ul.app_images.app_images_03 {
		top: 0;
	}

	img.flycuckoo01.right_img {
		position: relative;
		top: 10vw;
		left: 7%;
		width: 69vw;
		padding-right: 0;
	}

	img.flycuckoo02.right_img {
		width: 53vw;
		position: relative;
		left: 40%;
		top: 5vw;
		z-index: 400;
	}

	img.hanwoo01.right_img {
		position: relative;
		left: 25%;
		width: 50vw;
		margin-top: 15vw;
	}

	img.hanwoo02.right_img {
		width: 40vw;
		position: relative;
		left: 55%;
		top: 0;
		z-index: 400;
	}

	img.IBD02.right_img {
		width: 40vw;
		position: relative;
		left: 55%;
		top: 0;
		z-index: 400;
	}
	/* //Project */
}



/* 달자 css (따로 작성함) */
.d_container {
	max-width: 1200px;
    padding: 0 60px;
    margin: 0 auto;
    position: relative;
}

.dalza01 {
	width: 100%;
    position: relative;
    padding: 140px 0 250px;
}

.dalza01 h1 {
	font-size: 6vh;
    font-weight: 700;
    padding: 14vh 0 3vh;
}

.dalza01 ul li {
	font-size: 2.4vh;
    font-weight: 300;
    line-height: 5vh;
}

.dalza01 p {
	font-size: 24px;
    font-weight: 300;
    margin-top: 100px;
    line-height: 40px;
    border-bottom: 1px solid #000;
	display: inline-block;
	margin-right: 30px;
}

.dalza02 {
	width: 100%;
    padding: 0 0 80px;
	overflow: hidden;
    box-sizing: border-box;
}

.dalza02 h1 {
	font-size: 6vh;
    font-weight: 700;
    margin: 14vh 0 3vh;
}

.dalza02 p {
    font-size: 2.4vh;
    line-height: 4vh;
    margin: 1vh 0 7vh;
    font-weight: 300;
	letter-spacing: -1px;
}

.dalza02 img {
    width: 100%;
}

.dalza03 {
	padding: 140px 0 80px;
    box-sizing: border-box;
}

.dalza03 h1 {
	font-size: 6vh;
    font-weight: 700;
    display: inline-block;
    float: left;
	color: #fff;
}

.dalza03 .d_content01 {
	float: left;
	width: 100%;
}

.dalza03 .d_content01 ul {
	float: left;
    margin: 1vh 0 3vh;
	margin-left: 100px;
}

.dalza03 .d_content01 ul li {
	font-size: 2.4vh;
    line-height: 4vh;
	font-weight: 300;
	color: #fff;
}

.dalza03 .d_content02 {
	width: 100%;
	text-align: right;
}

.dalza04, .dalza05 {
	width: 100%;
    float: left;
	padding-bottom: 250px;
}

.dalza04 h1, .dalza05 h1 {
	font-size: 6vh;
    font-weight: 700;
    margin: 14vh 0 5vh;
}

.dalza04 p, .dalza05 p {
	font-size: 2.4vh;
    line-height: 4vh;
    font-weight: 300;
	width: 60%;
    text-align: justify;
	letter-spacing: -1px;
}

.dalza04 ul {
	width: 100%;
	position: relative;
	top: -260px;
	padding-bottom: 50px;
}

.dalza05 ul {
	width: 100%;
	position: relative;
	top: -300px;
	padding-bottom: 50px;
}

.dalza04 ul li, .dalza05 ul li {
	width: 30%;
	float: right;
	margin-right: 3.3%;
	position: relative;
}

.dalza04 ul li:nth-child(2), .dalza05 ul li:nth-child(2) {
	top: 250px;
}

.dalza04 ul li:last-child, .dalza05 ul li:last-child {
	top: 550px;
}

.dalza04 ul li img, .dalza05 ul li img {
	margin-top: 80px;
	border-radius: 4vh;
	box-shadow: 0.5vh 0.5vh 1.7vh 0.5vh #d5d5d5;
}

/* 달자 모바일 */
@media screen and (max-width: 750px){

	.d_container {
		max-width: 90%;
		padding: 0 5%;
		overflow: hidden;
	}

	.dalza01 {
		padding-bottom: 350px;
	}

	.dalza01 h1 {
		font-size: 8vw;
		line-height: 12vw;
		padding: 0 0 6vw;
	}

	.dalza01 ul li {
		line-height: 4.5vh;
	}

	.dalza01 p {
		font-size: 2.4vh;
		margin-top: 30px;
	}

	.dalza02 h1 {
		font-size: 8vw;
	}

	.dalza03 {
		padding: 80px 0 0;
	}

	.dalza03 h1 {
		font-size: 8vw;
	}

	.dalza03 .d_content01 ul {
		margin-top: 5vh;
		margin-left: 0;
	}

	.dalza03 .d_content02 img {
		max-width: 80%;
	}

	.dalza04, .dalza05 {
		padding-bottom: 100px;
	}

	.dalza04 h1, .dalza05 h1 {
		font-size: 8vw;
		margin: 10vh 0 5vh;
	}

	.dalza04 p, .dalza05 p {
		width: 100%;
	}

	.dalza04 ul, .dalza05 ul {
		width: 100%;
		position: relative;
		top: 0;
	}

	.dalza04 ul li, .dalza05 ul li {
		width: 47%;
		float: left;
		margin-right: 6%;
	}

	.dalza04 ul li:last-child, .dalza05 ul li:last-child {
		top: 150px;
		margin-right: 0;
	}

	.dalza04 ul li img, .dalza05 ul li img {
		max-width: 100%;
		margin-top: 50px;
	}

}