/*---------------------------------------------------------------------------
	[DIV LAYOUT GUIDE]
	#wrapper	>	#container	>	(#regin)	>	#area	>	#section	>	#box	>	#sector
	GNB	(Global Navigation Bar)	:	사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바
	LNB	(Local Navigation Bar)	:	현재 서비스 영역(Local)만 해당되는 네비게이션.서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바
	SNB	(Side Navigation Bar)	:	메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바
	FNB	(Foot Navigation Bar)	:	하단메뉴, 하단로고, 주소, 카피라이팅 영역

	font-family: 'Roboto';				font-weight: 400;		100		300	400	500		700		900
	font-family: 'Raleway';				font-weight: 400;		100	200	300	400	500	600	700	800	900
	font-family: 'Noto Sans KR';		font-weight: 400;		100		300	400	500		700		900

	#####	Shades and Tints of #a7a9ac	:	PLATINUM	:	TEXT
	#030303		#0c0d0d		#161617		#1f2021		#292a2b		#323435		#3c3d3f		#45474a		#4f5154
	#585b5e		#626468		#6b6e72		#75787c		#7f8286		#898b8f		#939599		#9d9fa2		#a7a9ac
	#b1b3b6		#bbbdbf		#c5c7c9		#cfd0d2		#d9dadc		#e4e4e5		#eeeeef		#f8f8f8


	BBDO1	color						: #ef4024;		rgb(239, 64, 36)
	MAIN	color						: #00b6a8;		rgb(0, 182, 168)
	KSA1	color						: #009f94;		rgb(0, 159, 148)
	KSA2	color						: #00978b;		rgb(0, 151, 139)
	KSA3	color						: #009186;		rgb(0, 145, 134)
	KSA4	color						: #00887d;		rgb(0, 136, 125)
	KSA5	color						: #007d74;		rgb(0, 125, 116)
	KSA6	color						: #007168;		rgb(0, 113, 104)
	KDIS1	color						: #03945d;		rgb(3, 148, 93)
	KDIS2	color						: #2c878e;
	KDIS3	color						: #024d31;		rgb(2, 77, 49)
	KDIS5	color						: #00321e;		rgb(0, 50, 30)
	KDIS6	color						: #004b2d;		rgb(0, 75, 45)
	KDIS7	color						: #00643c;		rgb(0, 100, 60)
	KDIS8	color						: #007d4b;		rgb(0, 125, 75)
---------------------------------------------------------------------------*/
@charset "utf-8";
@media (min-width: 861px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/


/*--------------------------------------------------
	The Work
--------------------------------------------------*/
	#thework{
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}
	#thework > .thework_section{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		margin-top: 65px;
	}
	#thework > .thework_section > ul{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#thework > .thework_section > ul > li{
		float: left;
		width: 24.4%;
		padding-right: 0.8%;
		padding-bottom: 0.9%;
	}
	#thework > .thework_section > ul > li:nth-of-type(4n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#thework > .thework_section > ul > li{
		float: left;
		width: 32%;
		padding-right: 2%;
		padding-bottom: 2%;
	}
	#thework > .thework_section > ul > li:nth-of-type(3n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#thework > .thework_section > ul > li{
		float: left;
		width: 49%;
		padding-bottom: 2%;
		padding-right: 2%;
	}
	#thework > .thework_section > ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
	#thework > .thework_section > ul > li > div{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		cursor: pointer;
		z-index: 10;
	}
	#thework > .thework_section > ul > li > div:hover{
		background: url('/images/common/btn_player.png') no-repeat center center;	/*(x, y)*/
	}
	#thework > .thework_section > ul > li > div > img{
		width: 100%;
		z-index: 0;
	}



/*--------------------------------------------------
	thework_section_sub
--------------------------------------------------*/
	.thework_section_sub{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		margin-top: 2.0rem;
		padding-bottom: 0.0rem;
	}
	.thework_section_sub > ul{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	.thework_section_sub > ul > li{
		float: left;
		width: 24.4%;
		padding-right: 0.8%;
		padding-bottom: 0.9%;
	}
	.thework_section_sub > ul > li:nth-of-type(4n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	.thework_section_sub > ul > li{
		float: left;
		width: 32%;
		padding-right: 2%;
		padding-bottom: 2%;
	}
	.thework_section_sub > ul > li:nth-of-type(3n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	.thework_section_sub > ul > li{
		float: left;
		width: 49%;
		padding-bottom: 2%;
		padding-right: 2%;
	}
	.thework_section_sub > ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
	.thework_section_sub > ul > li > div{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		cursor: pointer;
		z-index: 10;
	}
	.thework_section_sub > ul > li > div:hover{
		background: url('/images/common/btn_player.png') no-repeat center center;	/*(x, y)*/
	}
	.thework_section_sub > ul > li > div > img{
		width: 100%;
		z-index: 0;
	}



/*--------------------------------------------------
	The Work	>	View
--------------------------------------------------*/
	#thework_view{
		clear: both;
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 60px;
	}
	#thework_view > .thework_video{
		display: block;
		position: relative;
		/*
		width: 100%;
		height: 100%;
		*/
	}


	#thework_view > .video_detail{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		padding-top: 4.5rem;
		padding-bottom: 4.1rem;

		font-family: 'Noto Sans KR';
	}
	#thework_view > .video_detail > .video_brandname{
		display: block;
		position: relative;
		text-align: center;
	}
	#thework_view > .video_detail > .video_brandname > span{
		font-size: 1.1rem;
		color: #fff;
		font-weight: 400;
		font-style: italic;
	}
	#thework_view > .video_detail > .video_brandtitle{
		display: block;
		position: relative;
		text-align: center;
		padding-top: 1.5rem;
		padding-left: 1.1rem;
		padding-right: 1.1rem;
		line-height: 1.8rem;
	}
	#thework_view > .video_detail > .video_brandtitle > span{
		font-family: 'Raleway';
		font-size: 2.0rem;
		color: #fff;
		font-weight: 600;
	}
	#thework_view > .video_detail > .video_bbdokorea{
		display: block;
		position: relative;
		padding-top: 1.5rem;
		padding-bottom: 1.1rem;
		text-align: center;
	}
	#thework_view > .video_detail > .video_bbdokorea > span{
		font-size: 0.9rem;
		color: #fff;
		font-weight: 400;
	}
	#thework_view > .video_detail > .brandstory_title{
		display: block;
		position: relative;
		padding-top: 1.5rem;
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}
	#thework_view > .video_detail > .brandstory_title > span{
		font-family: 'Raleway';
		font-size: 1.0rem;
		color: #e3e6e6;
		font-weight: 600;
	}
	#thework_view > .video_detail > .brandstory_desc{
		display: block;
		position: relative;
		padding-top: 0.4rem;
		padding-left: 1.1rem;
		padding-right: 1.1rem;
		line-height: 1.5rem;
	}
	#thework_view > .video_detail > .brandstory_desc > span{
		font-size: 0.8rem;
		color: #e1e2e3;
		font-weight: 400;
	}











/*--------------------------------------------------
	About
--------------------------------------------------*/
	#about{
		display: block;
		height: 100%;
		position: relative;
		padding-top: 0px;
		padding-left: 40px;
		height: 100vh;
		width: calc(100% - 50px);
		width: -moz-calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
	}
	#about > .things_section{
		display: block;
		position: relative;
		height: calc(100vh - 0px);
		height: -moz-calc(100vh - 0px);
	    height: -webkit-calc(100vh - 0px);
		margin-top: 65px;
	}
	#about > .things_section > ul > li:nth-of-type(1) > div{
		width: 70%;
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 0.83rem;
		color: #fff;
		font-weight: lighter;
		letter-spacing: -0.0px;
		line-height: 1.7;
	}
	#about > .things_section > ul > li:nth-of-type(2) > div{
		width: 80%;
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Nanum Barun Gothic';
		font-size: 0.80rem;
		color: #fff;
		font-weight: lighter;
		letter-spacing: -0.0px;
		line-height: 1.7;
	}

@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#about > .things_section > ul > li{
		float: left;
		width: 49%;
		padding-bottom: 2%;
		padding-right: 2%;
	}
	#about > .things_section > ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#about > .things_section > ul > li{
		float: left;
		width: 49%;
		padding-bottom: 2%;
		padding-right: 2%;
	}
	#about > .things_section > ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#about > .things_section > ul > li{
		float: left;
		width: 100%;
		padding-bottom: 2%;
	}
	#about > .things_section > ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/



/*--------------------------------------------------
	About	things
--------------------------------------------------*/
	#about > .things_section1{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 0.0rem;
		padding-bottom: 0.0rem;
	}
	#about > .things_section1{
		display: block;
		position: relative;
		height: calc(100vh - 0px);
		height: -moz-calc(100vh - 0px);
	    height: -webkit-calc(100vh - 0px);
	}
	#about > .things_section1 > div{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#about > .things_section1  .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.5rem;
	}
	#about > .things_section1  .section_title div{
		white-Space: pre-wrap;
		text-align: left;
		word-break: keep-all;
		font-family: inherit;
		font-size: 6.20rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .things_section1  .section_subtitle{
		display: block;
		position: relative;
		padding-bottom: 1.5rem;
	}
	#about > .things_section1  .section_subtitle div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 2.30rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .things_section > .detail_box{
		display: block;
		position: relative;
		width: calc(100% - 40px);
		display: flex;
		justify-content: flex-end;
		padding-top: 1.0rem;
	}
	#about > .things_section > .detail_box > .description{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		width: 36%;
		font-family: inherit;
		font-size: 0.83rem;
		color: #fff;
		font-weight: 400;
		letter-spacing: -0.0px;
		line-height: 1.3;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#about > .things_section1  .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.3rem;
	}
	#about > .things_section1  .section_title div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 2.80rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .things_section1  .section_subtitle{
		display: block;
		position: relative;
		padding-bottom: 1.3rem;
	}
	#about > .things_section1  .section_subtitle div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.60rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .things_section > .detail_box{
		display: block;
		position: relative;
		width: calc(100% - 40px);
		display: flex;
		justify-content: flex-end;
		padding-top: 1.0rem;
	}
	#about > .things_section > .detail_box > .description{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		width: 76%;
		font-family: inherit;
		font-size: 0.83rem;
		color: #fff;
		font-weight: 400;
		letter-spacing: -0.0px;
		line-height: 1.3;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#about > .things_section1  .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.1rem;
	}
	#about > .things_section1  .section_title div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.80rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .things_section1  .section_subtitle{
		display: block;
		position: relative;
		padding-bottom: 1.4rem;
	}
	#about > .things_section1  .section_subtitle div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.20rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .things_section > .detail_box{
		display: block;
		position: relative;
		width: calc(100% - 40px);
		width: -moz-calc(100% - 40px);
		width: -webkit-calc(100% - 40px);
		display: flex;
		justify-content: flex-end;
		padding-top: 1.0rem;
	}
	#about > .things_section > .detail_box > .description{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		width: 100%;
		font-family: inherit;
		font-size: 0.83rem;
		color: #fff;
		font-weight: 400;
		letter-spacing: -0.0px;
		line-height: 1.3;
	}
}	/*@media	end	--------------------------*/

@media (min-width: 861px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
}	/*@media	end	--------------------------*/

/*--------------------------------------------------
	About	recognitions
--------------------------------------------------*/
	#about > .recognitions_section{
		display: block;
		position: relative;
		width: 100%;
		height: calc(100vh - 0px);
		height: -moz-calc(100vh - 0px);
	    height: -webkit-calc(100vh - 0px);
		padding-top: 0.0rem;
		padding-bottom: 0.0rem;
		margin-top: 65px;
	}
	#about > .recognitions_section > div{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#about > .recognitions_section  .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.4rem;
	}
	#about > .recognitions_section  .section_title div{
		font-family: 'Outfit';
		font-size: 6.20rem;
		color: #ff0000;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .recognitions_section  ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
		padding-top: 0.9rem;
	}
	#about > .recognitions_section  ul > li{
		width: 44%;
		padding-bottom: 1%;
		padding-right: 3%;
	}
	#about > .recognitions_section  ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#about > .recognitions_section  .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.1rem;
	}
	#about > .recognitions_section  .section_title div{
		font-family: 'Outfit';
		font-size: 2.80rem;
		color: #ff0000;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .recognitions_section  ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
		padding-top: 0.50rem;
	}
	#about > .recognitions_section  ul > li{
		width: 98%;
		padding: 2%;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#about > .recognitions_section  .section_title{
		display: block;
		position: relative;
		padding-bottom: 0.8rem;
	}
	#about > .recognitions_section  .section_title div{
		font-family: 'Outfit';
		font-size: 2.10rem;
		color: #ff0000;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#about > .recognitions_section  ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
		padding-top: 0.2rem;
	}
	#about > .recognitions_section  ul > li{
		width: 98%;
		padding: 2%;
	}
}	/*@media	end	--------------------------*/
	#about > .recognitions_section  ul > li > ul{
		display: block;
		width: 100%;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#about > .recognitions_section  ul > li:nth-of-type(1) > ul{
		display: block;
		width: 70%;
	}
	#about > .recognitions_section  ul > li > ul > li{
		display: block;
		width: 100%;
		padding-top: 1.00rem;
		padding-bottom: 1.00rem;
		border-bottom: #fff;
	}
	#about > .recognitions_section  ul > li > ul > li:first-child{
		padding-top: 0;
	}
	#about > .recognitions_section  ul > li > ul > li:nth-of-type(1){
		border-bottom: 0px;
	}
	#about > .recognitions_section  ul > li > ul > li:last-child{
		border-bottom: 0px;
	}
	#about > .recognitions_section  ul > li > ul > li div{
		color: #fff;
		width: 100%;
		line-height: 1.5;
	}
	#about > .recognitions_section  ul > li > ul > li .detail_subject{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 2.20rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
	}
	#about > .recognitions_section  ul > li > ul > li .detail_description{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 0.94rem;
		color: #fff;
		font-weight: lighter;
		letter-spacing: -0.0px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#about > .recognitions_section  ul > li:nth-of-type(1) > ul{
		display: block;
		width: 70%;
	}
	#about > .recognitions_section  ul > li > ul > li{
		display: block;
		width: 100%;
		padding-top: 0.80rem;
		padding-bottom: 0.80rem;
		border-bottom: #fff;
	}
	#about > .recognitions_section  ul > li > ul > li:first-child{
		padding-top: 0;
	}
	#about > .recognitions_section  ul > li > ul > li:nth-of-type(1){
		border-bottom: 0px;
	}
	#about > .recognitions_section  ul > li > ul > li:last-child{
		border-bottom: 0px;
	}
	#about > .recognitions_section  ul > li > ul > li div{
		color: #fff;
		width: 100%;
		line-height: 1.4;
	}
	#about > .recognitions_section  ul > li > ul > li .detail_subject{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 1.80rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
	}
	#about > .recognitions_section  ul > li > ul > li .detail_description{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 0.84rem;
		color: #fff;
		font-weight: lighter;
		letter-spacing: -0.0px;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#about > .recognitions_section  ul > li:nth-of-type(1) > ul{
		display: block;
		width: 70%;
	}
	#about > .recognitions_section  ul > li > ul > li{
		display: block;
		width: 100%;
		padding-top: 0.60rem;
		padding-bottom: 0.60rem;
		border-bottom: #fff;
	}
	#about > .recognitions_section  ul > li > ul > li:first-child{
		padding-top: 0;
	}
	#about > .recognitions_section  ul > li > ul > li:nth-of-type(1){
		border-bottom: 0px;
	}
	#about > .recognitions_section  ul > li > ul > li:last-child{
		border-bottom: 0px;
	}
	#about > .recognitions_section  ul > li > ul > li div{
		color: #fff;
		width: 100%;
		line-height: 1.3;
	}
	#about > .recognitions_section  ul > li > ul > li .detail_subject{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 1.60rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
	}
	#about > .recognitions_section  ul > li > ul > li .detail_description{
		white-Space: pre-wrap;
		word-break: keep-all;
		text-align: left;
		font-family: 'Outfit';
		font-size: 0.84rem;
		color: #fff;
		font-weight: lighter;
		letter-spacing: -0.0px;
	}
}	/*@media	end	--------------------------*/







/*--------------------------------------------------
	Client
--------------------------------------------------*/
	#client{
		clear: both;
		display: block;
		width: calc(100% - 50px);
		width: -moz-calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
		position: relative;
		padding-top: 1.0rem;
		padding-bottom: 7.9rem
		height: calc(100vh - 0px);
		height: -moz-calc(100vh - 0px);
	    height: -webkit-calc(100vh - 0px);
	}
	#client > .client_section{
		clear: both;
		display: block;
		position: relative;
		width: 100%;
		margin-top: 65px;
		height: 100%;
		padding-left: 40px;
	}
	#client > .client_section > ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#client > .client_section > ul > li{
		width: 22%;
		padding-right: 4%;
		padding-bottom: 1.6rem;
		vertical-align: middle;
		text-align: center;
	}
	#client > .client_section > ul > li:nth-of-type(4n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#client > .client_section > ul > li{
		float: left;
		width: 32%;
		padding-right: 2%;
		padding-bottom: 2.0rem;
		vertical-align: middle;
		text-align: center;
	}
	#client > .client_section > ul > li:nth-of-type(3n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#client > .client_section > ul > li{
		float: left;
		width: 49%;
		padding-right: 2%;
		vertical-align: middle;
		text-align: center;
		padding-bottom: 2.0rem;
	}
	#client > .client_section > ul > li:nth-of-type(2n){
		padding-right: 0px;
	}
}	/*@media	end	--------------------------*/
	#client > .client_section > ul > li > div{
		position: relative;
		text-align: center;
		width: 100%;
		height: 8.0rem;
	}
	#client > .client_section > ul > li > div > img{
		position: absolute;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}



/*--------------------------------------------------
	Contact	> Contact
--------------------------------------------------*/
	#contact{
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		padding-bottom: 4.0rem;
		padding-left: 40px;
	}
	#contact > .contack_section{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 2.0rem;
		padding-bottom: 0.0rem;
		margin-top: 60px;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#contact > .contack_section > .section_title{
		display: block;
		position: relative;
		padding-bottom: 0.0rem;
	}
	#contact > .contack_section > .section_title div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: 'Outfit', 'Nanum Barun Gothic';
		font-size: 6.20rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#contact > .contack_section > .section_subtitle{
		display: block;
		position: relative;
		padding-bottom: 1.5rem;
	}
	#contact > .contack_section > .section_subtitle div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.30rem;
		color: #fff;
		font-weight: 500;
		letter-spacing: -0.0px;
		line-height: 1.5;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#contact > .contack_section > .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.4rem;
	}
	#contact > .contack_section > .section_title div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 2.80rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#contact > .contack_section > .section_subtitle{
		display: block;
		position: relative;
		padding-bottom: 1.4rem;
	}
	#contact > .contack_section > .section_subtitle div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.20rem;
		color: #fff;
		font-weight: 500;
		letter-spacing: -0.0px;
		line-height: 1.4;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#contact > .contack_section > .section_title{
		display: block;
		position: relative;
		padding-bottom: 1.3rem;
	}
	#contact > .contack_section > .section_title div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.80rem;
		color: #fff;
		font-weight: 600;
		letter-spacing: -0.0px;
		line-height: 1.1;
	}
	#contact > .contack_section > .section_subtitle{
		display: block;
		position: relative;
		padding-bottom: 1.3rem;
	}
	#contact > .contack_section > .section_subtitle div{
		white-Space: pre-wrap;
		word-break: keep-all;
		font-family: inherit;
		font-size: 1.10rem;
		color: #fff;
		font-weight: 500;
		letter-spacing: -0.0px;
		line-height: 1.3;
	}
}	/*@media	end	--------------------------*/



	#contact > .contact_box{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 2.0rem;
		padding-bottom: 3.5rem;
	}
	#contact > .contact_box > .title_number{
		display: inline-block;
		position: relative;
		/*
		padding-top: 3.0rem;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #000;
		*/
	}
	#contact > .contact_box > .title_number > span.txt{
		font-family: 'Noto Sans KR';
		font-weight: 500;
		font-size: 1.5rem;
		color: #000;
		letter-spacing: -0.5px;
	}
	#contact > .contact_box > .title_number > span.num{
		font-family: 'Noto Sans KR';
		font-weight: 500;
		font-size: 1.5rem;
		color: #000;
		font-style: italic;
	}
	#contact > .contact_box > .sub_title{
		display: block;
		position: relative;
	}
	#contact > .contact_box > .sub_title > span{
		font-family: 'Noto Sans KR';
		font-weight: 500;
		font-size: 1.2rem;
		color: #333;
		letter-spacing: -0.5px;
	}




	#contact > .contact_section{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 2.0rem;
		padding-bottom: 3.5rem;
	}
	#contact > .contact_section > .section_title{
		display: block;
		position: relative;
	}
	#contact > .contact_section > .section_title > span{
		font-size: 2.0rem;
		color: #000;
		font-weight: bold;
	}
	#contact > .contact_section > .title_number{
		display: inline-block;
		position: relative;
		padding-top: 3.0rem;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #000;
	}
	#contact > .contact_section > .title_number > span.txt{
		font-size: 1.0rem;
		color: #000;
	}
	#contact > .contact_section > .title_number > span.num{
		font-size: 1.5rem;
		color: #000;
		font-style: italic;
	}
	#contact > .contact_section > .sub_title{
		display: block;
		position: relative;
		padding-top: 3.1rem;
	}
	#contact > .contact_section > .sub_title > span{
		font-size: 1.2rem;
		color: #333;
	}

	#contact > .contact_section > .sub_cont{
		display: block;
		position: relative;
		padding-top: 0.5rem;
	}
	#contact > .contact_section > .sub_cont > span{
		font-size: 0.9rem;
		color: #777;
	}
	#contact > .contact_section > .sub_cont > span.cont_name{
		font-size: 1.0rem;
		color: #333;
		font-family: 'Nanum Gothic';
	}
	#contact > .contact_section > .sub_cont > span.cont_email{
		font-size: 0.9rem;
		color: #6f6f6f;
	}
	#contact > .contact_section > .sub_cont > span.cont_number{
		font-size: 0.9rem;
		color: #6f6f6f;
	}





/*--------------------------------------------------
	Contact	> Location
--------------------------------------------------*/
	#contact > .location_section{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 0.50rem;
		padding-bottom: 3.5rem;
	}
	#contact > .location_section > ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
		padding-top: 0.0rem;
		min-height: 20rem;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#contact > .location_section > ul > li:nth-of-type(1){
		width: calc(100% - 640px);;
	}
	#contact > .location_section > ul > li:nth-of-type(2){
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		max-width: 600px;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#contact > .location_section > ul > li{
		width: 98%;
		padding: 2%;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#contact > .location_section > ul > li{
		width: 98%;
		padding: 2%;
	}
}	/*@media	end	--------------------------*/
	#contact > .location_section > ul > li > ul{
		display: block;
		position: relative;
		height: 100%;
	}
	#contact > .location_section > ul > li > ul > li:nth-of-type(1){
		display: flex;
		align-items: flex-start;
		height: 50%;
	}
	#contact > .location_section > ul > li > ul > li:nth-of-type(2){
		display: flex;
		align-items: flex-end;
		height: 50%;
	}
	#contact > .location_section > ul > li .section_contact{
		clear: both;
		display: block;
		position: relative;
	}
	#contact > .location_section > ul > li .section_contact div{
		font-family: 'Outfit', 'Nanum Barun Gothic';
		white-Space: pre-wrap;
		word-break: keep-all;
		font-size: 1.0rem;
		color: #fff;
		font-weight: 400;
		letter-spacing: -0.0px;
		line-height: 1.5;
	}
	#contact > .location_section > ul > li .section_subtitle{
		clear: both;
		display: block;
		position: relative;
	}
	#contact > .location_section > ul > li .section_subtitle div{
		font-family: 'Outfit', 'Nanum Barun Gothic';
		white-Space: pre-wrap;
		word-break: keep-all;
		font-size: 1.00rem;
		color: #fff;
		font-weight: 400;
		letter-spacing: -0.0px;
		line-height: 1.5;
	}
	#contact > .location_section > ul > li .map_menu{
		clear: both;
		display: block;
		position: relative;
		padding-top: 0rem;
		padding-bottom: 0rem;
	}
	#contact > .location_section > ul > li .map_menu > ul{
	}
	#contact > .location_section > ul > li .map_menu > ul > li{
		display: inline-block;
	}
	#contact > .location_section > ul > li .map_menu > ul > li > div{
		font-family: 'Outfit', 'Nanum Barun Gothic';
		white-Space: pre-wrap;
		word-break: keep-all;
		display: block;
		position: relative;
		font-size: 0.9rem;
		color: #505050;
		font-weight: normal;
		padding-right: 1.0rem;
		cursor: pointer;
	}



	#contact > .location_section > ul > li > .bbdo_map{
		display: block;
		position: relative;
		padding-top: 0.0rem;
		padding-bottom: 0.0rem;
	}
@media (min-width: 861px){	/*@media	begin	--------------------------*/
	#contact > .location_section > ul > li > .bbdo_map > .map_view{
		float: right;
	}
	#contact > .location_section > ul > li > .bbdo_map > .map_view > div > img{
		width: 100%;
		border-radius: 5px;
	}
	#contact > .location_section > ul > li > .bbdo_map > .map_view > #map_naver{
		width: 100%;
		min-width: 640px;
		height: 360px;
		border-radius: 5px;
		border: 0px solid #000;
	}
}	/*@media	end	--------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	begin	--------------------------*/
	#contact > .location_section > ul > li > .bbdo_map > .map_view{
		float: right;
		width: 100%;
	}
	#contact > .location_section > ul > li > .bbdo_map > .map_view > div > img{
		width: 480px;
		border-radius: 5px;
	}
	#contact > .location_section > ul > li > .bbdo_map > .map_view > #map_naver{
		width: 480px;
		height: 280px;
		border-radius: 5px;
		border: 0px solid #000;
	}
}	/*@media	end	--------------------------*/
@media (max-width: 480px){	/*@media	begin	--------------------------*/
	#contact > .location_section > ul > li > .bbdo_map > .map_view{
		float: right;
		width: 100%;
	}
	#contact > .location_section > ul > li > .bbdo_map > .map_view > div > img{
		width: 320px;
		border-radius: 5px;
	}
	#contact > .location_section > ul > li > .bbdo_map > .map_view > #map_naver{
		width: 320px;
		height: 180px;
		border-radius: 5px;
		border: 0px solid #000;
	}
}	/*@media	end	--------------------------*/