/* ///////////////////////////////////////// 1200px */
  @media (min-width: 1200px) {

	/* *************************** 컨텐츠 1 */

	.cont1 {
	flex-wrap: wrap;
	}

	.con1-box1 {
		position: relative;
		display: flex;
		margin-top: 100px;
		width: 100%;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.con1-box1 > h2 {
		font-size: 30px;
		font-weight: 400;
		
	}
	.con1-box1 > h2:after {
		position: absolute;
		content: '';
		top: 70px;
		left: calc(50% - 40px);
		width: 80px;
		height: 1px;
		background-color: black;
	}
	.con1-box1 > p {
		margin-top: 70px;
		margin-bottom: 70px;
		width: 70%;
		text-align: center;
		font-size: 14px;
		font-weight: 300;
		color: rgb(126, 126, 126);
	}

	.con1-box2 {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.img-box1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 350px;
		cursor: pointer;
		background-image: url("../img/con-1-1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box1 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
	}
	.img-box1:hover h1 {
		top: 100px;
		transition: all 1s ease-in-out;
	}
	.img-box1 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 13px;
		width: 300px;
	}
	.img-box1:hover p {
		top: 110px;
		transition: all 0.7s ease-in-out;
	}
	#con1-bt {
		position: relative;
		top: 380px;
		padding: 5px 35px;
		font-size: 13px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box1:hover #con1-bt {
		top: 150px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box1:before {
		position: absolute;
		top: -350px;
		left: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box1:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}
	

	.img-box2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 350px;
		cursor: pointer;
		background-image: url("../img/con-1-2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box2 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
	}
	.img-box2:hover h1 {
		top: 100px;
		transition: all 1s ease-in-out;
	}
	.img-box2 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 13px;
		width: 300px;
	}
	.img-box2:hover p {
		top: 110px;
		transition: all 0.7s ease-in-out;
	}
	#con2-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 13px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box2:hover #con1-bt {
		top: 150px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box2:before {
		position: absolute;
		top: -350px;
		right: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box2:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}



	/* *************************** 컨텐츠 2 */
	.con2-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 200px;
		margin-top: 70px;
	}

	.con2-box1 > img {
		margin-bottom: 20px;
	}
	.con2-box1 > p {
		margin-top: 0px;
		font-size: 30px;
		color: #2c2c2c;
		font-weight: 400;
		
	}

	.con2-box2 {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.con2-box2 > img {
		width: 50%;
	}
	.con2-box2 > div {
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.con2-box2 > div > h3 {
		font-size: 18px;
		font-weight: 400;
		
		color: rgb(44, 44, 44);
		line-height: 18px;
		margin-top: 90px;
		margin-left: 155px;
	}
	.con2-box2 > div > h3:after {
		position: absolute;
		content: '';
		width: 100px;
		height: 1px;
		top: 140px;
		left: 155px;
		background-color: rgb(126, 126, 126);
	}
	.con2-box2 > div > p {
		margin-top: 45px;
		margin-left: 155px;
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		width: 350px;
		line-height:28px;
	}

	#btn {
		overflow: hidden;
		display: flex;
		padding-left: 20px;
		position: absolute;
		cursor: pointer;
		left: 745px;
		top: 310px;
		width: 168px;
		height: 40px;
		border: 1px solid rgb(161, 161, 161);
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		background-color: #ffffff;
		transition: all 0.7s ease-in;
		line-height:38px;
	}
	#btn:after {
		background-image: url('../img/arrow-r.png');
		width: 34px;
		height: 11px;
		margin-top: 3px;
		margin-left: 20px;
		transform: translateX(130px);
		transition: all 0.7s ease-in;
  }

  #btn:hover {
	  background-color: rgb(85, 85, 85);
	  color: #ffffff;
	  border: 1px solid rgb(85, 85, 85);
	  transition: all 0.7s ease-in;
  }

  #btn:hover::after {
	   display: block;
	   content: '';
	   background-image: url('../img/arrow-r2.png');
	   width: 34px;
	   height: 11px;
	   margin-top: 3px;
	   margin-left: 20px;
	   transform: translateX(80px);
	   transition: all 0.7s ease-in;
  }

 /* *************************** 컨텐츠 3 */

#img-box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 100px;
}
#img-box > .imgbox {
	width: 20%;
	height: 440px;
	background-color: aquamarine;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#img-box > .imgbox:nth-of-type(1) {
	background-image: url('../img/con3-1.jpg');
}
#img-box > .imgbox:nth-of-type(2) {
	background-image: url('../img/con3-2.jpg');
}
#img-box > .imgbox:nth-of-type(3) {
	background-image: url('../img/con3-3.jpg');
}
#img-box > .imgbox:nth-of-type(4) {
	background-image: url('../img/con3-4.jpg');
}
#img-box > .imgbox:nth-of-type(5) {
	background-image: url('../img/con3-5.jpg');
}

}


/* /////////////////////////////////////////// 992px */
  
@media (max-width: 1199.99px) and (min-width: 992px) {

	/* *************************** 컨텐츠 1 */

	.cont1 {
	flex-wrap: wrap;
	}

	.con1-box1 {
		position: relative;
		display: flex;
		margin-top: 100px;
		width: 100%;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.con1-box1 > h2 {
		font-size: 30px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}
	.con1-box1 > h2:after {
		position: absolute;
		content: '';
		top: 70px;
		left: calc(50% - 40px);
		width: 80px;
		height: 1px;
		background-color: black;
	}
	.con1-box1 > p {
		margin-top: 70px;
		margin-bottom: 70px;
		width: 60%;
		text-align: center;
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
	}

	.con1-box2 {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.img-box1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 350px;
		cursor: pointer;
		background-image: url("../img/con-1-1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box1 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
	}
	.img-box1:hover h1 {
		top: 100px;
		transition: all 1s ease-in-out;
	}
	.img-box1 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 13px;
		width: 300px;
	}
	.img-box1:hover p {
		top: 110px;
		transition: all 0.7s ease-in-out;
	}
	#con1-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 13px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box1:hover #con1-bt {
		top: 150px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box1:before {
		position: absolute;
		top: -350px;
		left: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box1:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}
	

	.img-box2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 350px;
		cursor: pointer;
		background-image: url("../img/con-1-2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box2 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
	}
	.img-box2:hover h1 {
		top: 100px;
		transition: all 1s ease-in-out;
	}
	.img-box2 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 13px;
		width: 300px;
	}
	.img-box2:hover p {
		top: 110px;
		transition: all 0.7s ease-in-out;
	}
	#con2-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 13px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box2:hover #con1-bt {
		top: 150px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box2:before {
		position: absolute;
		top: -350px;
		right: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box2:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}



	/* *************************** 컨텐츠 2 */
	.con2-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 200px;
		margin-top: 70px;
	}

	.con2-box1 > img {
		margin-bottom: 20px;
	}
	.con2-box1 > p {
		margin-top: 0px;
		font-size: 30px;
		color: #2c2c2c;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}

	.con2-box2 {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.con2-box2 > img {
		width: 50%;
		height: 350px;
	}
	.con2-box2 > div {
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.con2-box2 > div > h3 {
		font-size: 18px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
		color: rgb(44, 44, 44);
		line-height: 18px;
		margin-top: 70px;
		margin-left: 15%;
	}
	.con2-box2 > div > h3:after {
		position: absolute;
		content: '';
		width: 100px;
		height: 1px;
		top: 115px;
		left: 15%;
		background-color: rgb(126, 126, 126);
	}
	.con2-box2 > div > p {
		margin-top: 55px;
		margin-left: 15%;
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		width: 350px;
	}

	#btn {
		overflow: hidden;
		position: relative;
		display: flex;
		padding-left: 20px;
		position: absolute;
		cursor: pointer;
		left: 58%;
		top: 260px;
		width: 168px;
		height: 40px;
		border: 1px solid rgb(161, 161, 161);
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		background-color: #ffffff;
		transition: all 0.7s ease-in;
	}
	#btn:after {
		display: block;
		content: '';
		background-image: url('../img/arrow-r.png');
		width: 34px;
		height: 11px;
		margin-top: 3px;
		margin-left: 20px;
		transform: translateX(130px);
		transition: all 0.7s ease-in;
  }

  #btn:hover {
	  background-color: rgb(85, 85, 85);
	  color: #ffffff;
	  border: 1px solid rgb(85, 85, 85);
	  transition: all 0.7s ease-in;
  }

  #btn:hover::after {
	   display: block;
	   content: '';
	   background-image: url('../img/arrow-r2.png');
	   width: 34px;
	   height: 11px;
	   margin-top: 3px;
	   margin-left: 20px;
	   transform: translateX(80px);
	   transition: all 0.7s ease-in;
  }

 /* *************************** 컨텐츠 3 */

#img-box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 100px;
}
#img-box > .imgbox {
	width: 20%;
	height: 300px;
	background-color: aquamarine;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#img-box > .imgbox:nth-of-type(1) {
	background-image: url('../img/con3-1.jpg');
}
#img-box > .imgbox:nth-of-type(2) {
	background-image: url('../img/con3-2.jpg');
}
#img-box > .imgbox:nth-of-type(3) {
	background-image: url('../img/con3-3.jpg');
}
#img-box > .imgbox:nth-of-type(4) {
	background-image: url('../img/con3-4.jpg');
}
#img-box > .imgbox:nth-of-type(5) {
	background-image: url('../img/con3-5.jpg');
}

}


/* /////////////////////////////////////////// 768px */


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

	/* *************************** 컨텐츠 1 */

	.cont1 {
	flex-wrap: wrap;
	}

	.con1-box1 {
		position: relative;
		display: flex;
		margin-top: 80px;
		width: 100%;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.con1-box1 > h2 {
		font-size: 24px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}
	.con1-box1 > h2:after {
		position: absolute;
		content: '';
		top: 70px;
		left: calc(50% - 40px);
		width: 80px;
		height: 1px;
		background-color: black;
	}
	.con1-box1 > p {
		margin-top: 70px;
		margin-bottom: 70px;
		width: 60%;
		text-align: center;
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
	}

	.con1-box2 {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.img-box1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 300px;
		cursor: pointer;
		background-image: url("../img/con-1-1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box1 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
	}
	.img-box1:hover h1 {
		top: 80px;
		transition: all 1s ease-in-out;
	}
	.img-box1 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 13px;
		width: 300px;
	}
	.img-box1:hover p {
		top: 90px;
		transition: all 0.7s ease-in-out;
	}
	#con1-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 13px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box1:hover #con1-bt {
		top: 130px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box1:before {
		position: absolute;
		top: -350px;
		left: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box1:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}
	

	.img-box2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 300px;
		cursor: pointer;
		background-image: url("../img/con-1-2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box2 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
	}
	.img-box2:hover h1 {
		top: 80px;
		transition: all 1s ease-in-out;
	}
	.img-box2 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 13px;
		width: 300px;
	}
	.img-box2:hover p {
		top: 90px;
		transition: all 0.7s ease-in-out;
	}
	#con2-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 13px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box2:hover #con1-bt {
		top: 130px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box2:before {
		position: absolute;
		top: -350px;
		right: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box2:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}



	/* *************************** 컨텐츠 2 */
	.con2-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 200px;
		margin-top: 70px;
	}

	.con2-box1 > img {
		margin-bottom: 20px;
	}
	.con2-box1 > p {
		margin-top: 0px;
		font-size: 24px;
		color: #2c2c2c;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}

	.con2-box2 {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.con2-box2 > img {
		width: 45%;
		height: 300px;
	}
	.con2-box2 > div {
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.con2-box2 > div > h3 {
		font-size: 16px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
		color: rgb(44, 44, 44);
		line-height: 18px;
		margin-top: 50px;
		margin-left: 15%;
	}
	.con2-box2 > div > h3:after {
		position: absolute;
		content: '';
		width: 100px;
		height: 1px;
		top: 90px;
		left: 15%;
		background-color: rgb(126, 126, 126);
	}
	.con2-box2 > div > p {
		margin-top: 45px;
		margin-left: 15%;
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		width: 90%;
	}

	#btn {
		overflow: hidden;
		position: relative;
		display: flex;
		padding-left: 20px;
		position: absolute;
		cursor: pointer;
		left: 53%;
		top: 220px;
		width: 168px;
		height: 40px;
		border: 1px solid rgb(161, 161, 161);
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		background-color: #ffffff;
		transition: all 0.7s ease-in;
	}
	#btn:after {
		display: block;
		content: '';
		background-image: url('../img/arrow-r.png');
		width: 34px;
		height: 11px;
		margin-top: 3px;
		margin-left: 20px;
		transform: translateX(130px);
		transition: all 0.7s ease-in;
  }

  #btn:hover {
	  background-color: rgb(85, 85, 85);
	  color: #ffffff;
	  border: 1px solid rgb(85, 85, 85);
	  transition: all 0.7s ease-in;
  }

  #btn:hover::after {
	   display: block;
	   content: '';
	   background-image: url('../img/arrow-r2.png');
	   width: 34px;
	   height: 11px;
	   margin-top: 3px;
	   margin-left: 20px;
	   transform: translateX(80px);
	   transition: all 0.7s ease-in;
  }

 /* *************************** 컨텐츠 3 */

#img-box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 80px;
}
#img-box > .imgbox {
	width: 20%;
	height: 250px;
	background-color: aquamarine;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#img-box > .imgbox:nth-of-type(1) {
	background-image: url('../img/con3-1.jpg');
}
#img-box > .imgbox:nth-of-type(2) {
	background-image: url('../img/con3-2.jpg');
}
#img-box > .imgbox:nth-of-type(3) {
	background-image: url('../img/con3-3.jpg');
}
#img-box > .imgbox:nth-of-type(4) {
	background-image: url('../img/con3-4.jpg');
}
#img-box > .imgbox:nth-of-type(5) {
	background-image: url('../img/con3-5.jpg');
}

}


/* /////////////////////////////////////////// 576px */


@media (max-width: 767.99px) and (min-width: 576px) {

	/* *************************** 컨텐츠 1 */

	.cont1 {
	flex-wrap: wrap;
	}

	.con1-box1 {
		position: relative;
		display: flex;
		margin-top: 50px;
		width: 100%;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.con1-box1 > h2 {
		font-size: 18px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}
	.con1-box1 > h2:after {
		position: absolute;
		content: '';
		top: 50px;
		left: calc(50% - 40px);
		width: 80px;
		height: 1px;
		background-color: black;
	}
	.con1-box1 > p {
		margin-top: 60px;
		margin-bottom: 70px;
		width: 80%;
		text-align: center;
		font-size: 12px;
		font-weight: 300;
		color: rgb(126, 126, 126);
	}

	.con1-box2 {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.img-box1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 300px;
		cursor: pointer;
		background-image: url("../img/con-1-1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box1 > h1 {
		position: relative;
		top: -70px;
		color: #2c2c2c;
		font-size: 18px;
	}
	.img-box1:hover h1 {
		top: 80px;
		transition: all 1s ease-in-out;
	}
	.img-box1 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 12px;
		width: 90%;
	}
	.img-box1:hover p {
		top: 90px;
		transition: all 0.7s ease-in-out;
	}
	#con1-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 12px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box1:hover #con1-bt {
		top: 130px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box1:before {
		position: absolute;
		top: -350px;
		left: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box1:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}
	

	.img-box2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		height: 300px;
		cursor: pointer;
		background-image: url("../img/con-1-2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box2 > h1 {
		position: relative;
		top: -70px;
		font-size: 18px;
		color: #2c2c2c;
	}
	.img-box2:hover h1 {
		top: 80px;
		transition: all 1s ease-in-out;
	}
	.img-box2 > p {
		position: relative;
		text-align: center;
		top: -90px;
		color: #2c2c2c;
		font-size: 12px;
		width: 90%;
	}
	.img-box2:hover p {
		top: 90px;
		transition: all 0.7s ease-in-out;
	}
	#con2-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 12px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box2:hover #con1-bt {
		top: 130px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box2:before {
		position: absolute;
		top: -350px;
		right: 0;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box2:hover::before {
		top: 0px;
		transition: all 0.7s ease-in-out;
	}



	/* *************************** 컨텐츠 2 */
	.con2-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 150px;
		margin-top: 50px;
	}

	.con2-box1 > img {
		margin-bottom: 20px;
		width: 40px;
	}
	.con2-box1 > p {
		margin-top: 0px;
		font-size: 21px;
		color: #2c2c2c;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}

	.con2-box2 {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.con2-box2 > img {
		width: 45%;
		height: 260px;
	}
	.con2-box2 > div {
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.con2-box2 > div > h3 {
		font-size: 16px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
		color: rgb(44, 44, 44);
		line-height: 18px;
		margin-top: 20px;
		margin-left: 15%;
	}
	.con2-box2 > div > h3:after {
		position: absolute;
		content: '';
		width: 100px;
		height: 1px;
		top: 70px;
		left: 15%;
		background-color: rgb(126, 126, 126);
	}
	.con2-box2 > div > p {
		margin-top: 35px;
		margin-left: 15%;
		font-size: 12px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		width: 90%;
	}

	#btn {
		overflow: hidden;
		position: relative;
		display: flex;
		padding-left: 20px;
		position: absolute;
		cursor: pointer;
		left: 53%;
		top: 210px;
		width: 168px;
		height: 40px;
		border: 1px solid rgb(161, 161, 161);
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		background-color: #ffffff;
		transition: all 0.7s ease-in;
	}
	#btn:after {
		display: block;
		content: '';
		background-image: url('../img/arrow-r.png');
		width: 34px;
		height: 11px;
		margin-top: 3px;
		margin-left: 20px;
		transform: translateX(130px);
		transition: all 0.7s ease-in;
  }

  #btn:hover {
	  background-color: rgb(85, 85, 85);
	  color: #ffffff;
	  border: 1px solid rgb(85, 85, 85);
	  transition: all 0.7s ease-in;
  }

  #btn:hover::after {
	   display: block;
	   content: '';
	   background-image: url('../img/arrow-r2.png');
	   width: 34px;
	   height: 11px;
	   margin-top: 3px;
	   margin-left: 20px;
	   transform: translateX(80px);
	   transition: all 0.7s ease-in;
  }

 /* *************************** 컨텐츠 3 */

#img-box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 70px;
}
#img-box > .imgbox {
	width: 25%;
	height: 200px;
	background-color: aquamarine;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#img-box > .imgbox:nth-of-type(1) {
	background-image: url('../img/con3-1.jpg');
}
#img-box > .imgbox:nth-of-type(2) {
	background-image: url('../img/con3-2.jpg');
}
#img-box > .imgbox:nth-of-type(3) {
	background-image: url('../img/con3-3.jpg');
}
#img-box > .imgbox:nth-of-type(4) {
	background-image: url('../img/con3-4.jpg');
}
#img-box > .imgbox:nth-of-type(5) {
	display: none;
	background-image: url('../img/con3-5.jpg');
}

}


/* /////////////////////////////////////////// 420px */


@media (max-width: 575.99px) and (min-width: 420px) {

	/* *************************** 컨텐츠 1 */

	.cont1 {
	flex-wrap: wrap;
	}

	.con1-box1 {
		position: relative;
		display: flex;
		margin-top: 50px;
		width: 100%;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.con1-box1 > h2 {
		font-size: 18px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}
	.con1-box1 > h2:after {
		position: absolute;
		content: '';
		top: 50px;
		left: calc(50% - 40px);
		width: 80px;
		height: 1px;
		background-color: black;
	}
	.con1-box1 > p {
		margin-top: 60px;
		margin-bottom: 70px;
		width: 80%;
		text-align: center;
		font-size: 12px;
		font-weight: 300;
		color: rgb(126, 126, 126);
	}

	.con1-box2 {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
	}
	.img-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 250px;
		overflow: hidden;
		cursor: pointer;
		background-image: url("../img/con-1-1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box1 > h1 {
		position: relative;
		top: -30px;
		color: #2c2c2c;
		font-size: 18px;
	}
	.img-box1:hover h1 {
		top: 60px;
		transition: all 1s ease-in-out;
	}
	.img-box1 > p {
		position: relative;
		text-align: center;
		top: -70px;
		color: #2c2c2c;
		font-size: 12px;
		width: 90%;
	}
	.img-box1:hover p {
		top: 80px;
		transition: all 0.7s ease-in-out;
	}
	#con1-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 12px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box1:hover #con1-bt {
		top: 110px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box1:before {
		position: absolute;
		top: -100%;
		left: 0;
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box1:hover::before {
		top: 0%;
		transition: all 0.7s ease-in-out;
	}
	

	.img-box2 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 250px;
		margin-top: 20px;
		overflow: hidden;
		cursor: pointer;
		background-image: url("../img/con-1-2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box2 > h1 {
		position: relative;
		top: -30px;
		font-size: 18px;
		color: #2c2c2c;
	}
	.img-box2:hover h1 {
		top: 60px;
		transition: all 1s ease-in-out;
	}
	.img-box2 > p {
		position: relative;
		text-align: center;
		top: -70px;
		color: #2c2c2c;
		font-size: 12px;
		width: 90%;
	}
	.img-box2:hover p {
		top: 80px;
		transition: all 0.7s ease-in-out;
	}
	#con2-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 12px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box2:hover #con1-bt {
		top: 110px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box2:before {
		position: absolute;
		top: -100%;
		right: 0;
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box2:hover::before {
		top: 0%;
		transition: all 0.7s ease-in-out;
	}



	/* *************************** 컨텐츠 2 */
	.con2-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 130px;
		margin-top: 50px;
	}

	.con2-box1 > img {
		margin-bottom: 20px;
		width: 30px;
	}
	.con2-box1 > p {
		margin-top: 0px;
		font-size: 18px;
		color: #2c2c2c;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}

	.con2-box2 {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.con2-box2 > img {
		width: 100%;
		height: 250px;
	}
	.con2-box2 > div {
		position: relative;
		width: 100%;
		height: 180px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.con2-box2 > div > h3 {
		font-size: 16px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
		color: rgb(44, 44, 44);
		line-height: 18px;
		margin-top: 40px;
	}
	.con2-box2 > div > h3:after {
		position: absolute;
		content: '';
		width: 100px;
		height: 1px;
		top: 75px;
		left: calc(50% - 50px);
		background-color: rgb(126, 126, 126);
	}
	.con2-box2 > div > p {
		margin-top: 35px;
		text-align: center;
		font-size: 12px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		width: 90%;
	}

	#btn {
		overflow: hidden;
		z-index: 100;
		position: relative;
		display: flex;
		padding-left: 20px;
		position: absolute;
		cursor: pointer;
		left: calc(50% - 84px);
		top: 440px;
		width: 168px;
		height: 40px;
		border: 1px solid rgb(161, 161, 161);
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		background-color: #ffffff;
		transition: all 0.7s ease-in;
	}
	#btn:after {
		display: block;
		content: '';
		background-image: url('../img/arrow-r.png');
		width: 34px;
		height: 11px;
		margin-top: 3px;
		margin-left: 20px;
		transform: translateX(130px);
		transition: all 0.7s ease-in;
  }

  #btn:hover {
	  background-color: rgb(85, 85, 85);
	  color: #ffffff;
	  border: 1px solid rgb(85, 85, 85);
	  transition: all 0.7s ease-in;
  }

  #btn:hover::after {
	   display: block;
	   content: '';
	   background-image: url('../img/arrow-r2.png');
	   width: 34px;
	   height: 11px;
	   margin-top: 3px;
	   margin-left: 20px;
	   transform: translateX(80px);
	   transition: all 0.7s ease-in;
  }

 /* *************************** 컨텐츠 3 */

#img-box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 70px;
}
#img-box > .imgbox {
	width: 33.3333%;
	height: 200px;
	background-color: aquamarine;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#img-box > .imgbox:nth-of-type(1) {
	background-image: url('../img/con3-1.jpg');
}
#img-box > .imgbox:nth-of-type(2) {
	background-image: url('../img/con3-2.jpg');
}
#img-box > .imgbox:nth-of-type(3) {
	background-image: url('../img/con3-3.jpg');
}
#img-box > .imgbox:nth-of-type(4) {
	display: none;
	background-image: url('../img/con3-4.jpg');
}
#img-box > .imgbox:nth-of-type(5) {
	display: none;
	background-image: url('../img/con3-5.jpg');
}

}


/* /////////////////////////////////////////// max- 419.99px */


@media (max-width:419.99px) {

	/* *************************** 컨텐츠 1 */

	.cont1 {
	flex-wrap: wrap;
	}

	.con1-box1 {
		position: relative;
		display: flex;
		margin-top: 50px;
		width: 100%;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.con1-box1 > h2 {
		font-size: 18px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}
	.con1-box1 > h2:after {
		position: absolute;
		content: '';
		top: 50px;
		left: calc(50% - 40px);
		width: 80px;
		height: 1px;
		background-color: black;
	}
	.con1-box1 > p {
		margin-top: 60px;
		margin-bottom: 70px;
		width: 80%;
		text-align: center;
		font-size: 12px;
		font-weight: 300;
		color: rgb(126, 126, 126);
	}

	.con1-box2 {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
	}
	.img-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 250px;
		overflow: hidden;
		cursor: pointer;
		background-image: url("../img/con-1-1.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box1 > h1 {
		position: relative;
		top: -30px;
		color: #2c2c2c;
		font-size: 18px;
	}
	.img-box1:hover h1 {
		top: 60px;
		transition: all 1s ease-in-out;
	}
	.img-box1 > p {
		position: relative;
		text-align: center;
		top: -70px;
		color: #2c2c2c;
		font-size: 12px;
		width: 90%;
	}
	.img-box1:hover p {
		top: 80px;
		transition: all 0.7s ease-in-out;
	}
	#con1-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 12px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box1:hover #con1-bt {
		top: 110px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box1:before {
		position: absolute;
		top: -100%;
		left: 0;
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box1:hover::before {
		top: 0%;
		transition: all 0.7s ease-in-out;
	}
	

	.img-box2 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 250px;
		margin-top: 20px;
		overflow: hidden;
		cursor: pointer;
		background-image: url("../img/con-1-2.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #cccccc;
	}
	.img-box2 > h1 {
		position: relative;
		top: -30px;
		font-size: 18px;
		color: #2c2c2c;
	}
	.img-box2:hover h1 {
		top: 60px;
		transition: all 1s ease-in-out;
	}
	.img-box2 > p {
		position: relative;
		text-align: center;
		top: -70px;
		color: #2c2c2c;
		font-size: 12px;
		width: 90%;
	}
	.img-box2:hover p {
		top: 80px;
		transition: all 0.7s ease-in-out;
	}
	#con2-bt {
		position: relative;
		top: 280px;
		padding: 5px 35px;
		font-size: 12px;
		color: #ffffff;
		background-color: #2c2c2c;
	}
	.img-box2:hover #con1-bt {
		top: 110px;
		transition: all 0.7s ease-in-out 0.3s;
	}
	.img-box2:before {
		position: absolute;
		top: -100%;
		right: 0;
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.85);
		transition: all 0.7s ease-in-out;
	}

	.img-box2:hover::before {
		top: 0%;
		transition: all 0.7s ease-in-out;
	}



	/* *************************** 컨텐츠 2 */
	.con2-box1 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 130px;
		margin-top: 50px;
	}

	.con2-box1 > img {
		margin-bottom: 20px;
		width: 30px;
	}
	.con2-box1 > p {
		margin-top: 0px;
		font-size: 18px;
		color: #2c2c2c;
		font-weight: 400;
		font-family: 'Noto Sans SC';
	}

	.con2-box2 {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.con2-box2 > img {
		width: 100%;
		height: 250px;
	}
	.con2-box2 > div {
		position: relative;
		width: 100%;
		height: 180px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.con2-box2 > div > h3 {
		font-size: 16px;
		font-weight: 400;
		font-family: 'Noto Sans SC';
		color: rgb(44, 44, 44);
		line-height: 18px;
		margin-top: 40px;
	}
	.con2-box2 > div > h3:after {
		position: absolute;
		content: '';
		width: 100px;
		height: 1px;
		top: 75px;
		left: calc(50% - 50px);
		background-color: rgb(126, 126, 126);
	}
	.con2-box2 > div > p {
		margin-top: 35px;
		text-align: center;
		font-size: 12px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		width: 90%;
	}

	#btn {
		overflow: hidden;
		z-index: 100;
		display: flex;
		padding-left: 20px;
		position: absolute;
		cursor: pointer;
		left: calc(50% - 84px);
		top: 460px;
		width: 168px;
		height: 40px;
		border: 1px solid rgb(161, 161, 161);
		font-size: 13px;
		font-weight: 300;
		color: rgb(126, 126, 126);
		background-color: #ffffff;
		transition: all 0.7s ease-in;
	}
	#btn:after {
		display: block;
		content: '';
		background-image: url('../img/arrow-r.png');
		width: 34px;
		height: 11px;
		margin-top: 3px;
		margin-left: 20px;
		transform: translateX(130px);
		transition: all 0.7s ease-in;
  }

  #btn:hover {
	  background-color: rgb(85, 85, 85);
	  color: #ffffff;
	  border: 1px solid rgb(85, 85, 85);
	  transition: all 0.7s ease-in;
  }

  #btn:hover::after {
	   display: block;
	   content: '';
	   background-image: url('../img/arrow-r2.png');
	   width: 34px;
	   height: 11px;
	   margin-top: 3px;
	   margin-left: 20px;
	   transform: translateX(80px);
	   transition: all 0.7s ease-in;
  }

 /* *************************** 컨텐츠 3 */

#img-box {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 70px;
}
#img-box > .imgbox {
	width: 33.3333%;
	height: 200px;
	background-color: aquamarine;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#img-box > .imgbox:nth-of-type(1) {
	background-image: url('../img/con3-1.jpg');
}
#img-box > .imgbox:nth-of-type(2) {
	background-image: url('../img/con3-2.jpg');
}
#img-box > .imgbox:nth-of-type(3) {
	background-image: url('../img/con3-3.jpg');
}
#img-box > .imgbox:nth-of-type(4) {
	display: none;
	background-image: url('../img/con3-4.jpg');
}
#img-box > .imgbox:nth-of-type(5) {
	display: none;
	background-image: url('../img/con3-5.jpg');
}

}