/* +++++++++++++++++++ common.css +++++++++++++++++++ */



@charset "utf-8";
/* noto-sans-kr-regular - latin_korean */

@font-face {
	font-family: 'NotoSansKR-Light';
	src: url('../font/noto-sans-kr-v13-latin_korean-100.eot'); /* IE9 Compat Modes */
	src: local('Noto Sans KR Light'), local('NotoSansKR-Light'),
		url('../font/noto-sans-kr-v13-latin_korean-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../font/noto-sans-kr-v13-latin_korean-100.woff2') format('woff2'), /* Super Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-100.woff') format('woff'), /* Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-100.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../font/noto-sans-kr-v13-latin_korean-100.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'NotoSansKR-Regular';
	src: url('../font/noto-sans-kr-v13-latin_korean-regular.eot'); /* IE9 Compat Modes */
	src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
		url('../font/noto-sans-kr-v13-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../font/noto-sans-kr-v13-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-regular.woff') format('woff'), /* Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../font/noto-sans-kr-v13-latin_korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}

/* noto-sans-kr-700 - latin_korean */
@font-face {
	font-family: 'NotoSansKR-Bold';
	src: url('../font/noto-sans-kr-v13-latin_korean-700.eot'); /* IE9 Compat Modes */
	src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
		url('../font/noto-sans-kr-v13-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../font/noto-sans-kr-v13-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-700.woff') format('woff'), /* Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../font/noto-sans-kr-v13-latin_korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}

/* noto-sans-kr-900 - latin_korean */
@font-face {
	font-family: 'NotoSansKR-Black';
	src: url('../font/noto-sans-kr-v13-latin_korean-900.eot'); /* IE9 Compat Modes */
	src: local('Noto Sans KR Black'), local('NotoSansKR-Black'),
		url('../font/noto-sans-kr-v13-latin_korean-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../font/noto-sans-kr-v13-latin_korean-900.woff2') format('woff2'), /* Super Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-900.woff') format('woff'), /* Modern Browsers */
		url('../font/noto-sans-kr-v13-latin_korean-900.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../font/noto-sans-kr-v13-latin_korean-900.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}

/* =========== mobile(start) ============ */
@media screen and (max-width: 767px) {


	.mobile_blind { display: none; }

	header { display: block ;}
	nav { margin: 0 auto; display: block; width: 368px; height: 80px; position: relative; padding-top: 20px; }
	nav h1 { position: absolute; font-size: 14px; padding-top: 10px;} 
	nav ul {  position: absolute; right: 100px; padding-top: 10px;} 
	nav ul li { display: inline-block; width: 50px; float: left; margin-left: 20px; font-size: 14px; }

	.Contact-btn { width: 80px; height: 40px; background-color: #5383F6; text-align: center; border-radius: 50px; float: right; color: #fff;}

	.bold { font-family: "NotoSansKR-Bold"; }

	.visualwrap { width: 100%; margin-top: 80px; }
	.visualT { width: 368px; display: block; margin: 0 auto; padding-top: 70px; position:relative; }
	.visualT h2 {font-size: 37px; font-family: "NotoSansKR-Light"; }
	.visualT h2 span.jean { font-size: 14px;}

	.visualT h3 { margin-top: 20px; font-size: 14px; margin-bottom: 20px; font-family: "NotoSansKR-Light";}

	.header_clipwrap { font-size: 14px; width: 158px; height: 30px; border: 1px solid #000; border-radius: 50px; text-align: center; margin-top: 30px; float: left ; padding-top: 1px; margin-right: 10px;} 
	.header_clipwrap p { margin-top: 2px; }

	.clip_right {font-size: 14px; width: 158px; height: 30px; background: #000; color: #fff; border-radius: 50px; text-align: center; margin-top: 30px; float: left; font-family: "NotoSansKR-bold"; padding-top: 1px; padding-left: 5px;}
	.clip_right p { margin-top: 2px; }

	.first-icon {float: left; transform: translate(20px,30px); width: 30px; overflow: hidden; }
	.first-icon img { width: 100%; }

	.first_section { width: 100%; margin-top: 140px; display: block;}
	.profile_wrapper { width: 368px; height: 398px; display: block; margin: 0 auto; position: relative; }

	.Profile_circle { overflow: hidden; position: absolute;  width: 100px; height: 100px; background: #E8E8E8; border-radius: 600px; top: -20px; left: -20px; z-index: 50;}
	.profile_section_wrap { position: absolute; width: 348px; background: #fff; border-radius: 20px; height: 430px; right: 0; padding-top: 100px; padding-left: 25px; padding-right: 20px;}

	.Profile_circle img { width: 100%; }

	.skill_wrapper { width: 100%; display: block;}

	.profile_section_wrap 

	.Tag button { margin-bottom: 5px; }

	.tag_white { height: 30px; border: 1px solid #5383F6; width: auto; border-radius: 30px; text-align: center;padding-left: 10px; padding-right: 10px; color: #5383F6; padding-bottom: 2px;}

	.tag_orange { height: 30px; border: 1px solid #5383F6; width: auto; border-radius: 30px; text-align: center;padding-left: 10px; padding-right: 10px; background: #5383F6; color: #fff;padding-bottom: 2px;}

	div.Name p { float: left; padding-bottom: 10px;}

	.ko_name { font-size: 24px; font-family: "NotoSansKR-Bold"; width: auto; margin-right: 6px;}
	.en_name { font-size: 14px; color: #5383F6; text-align: center; transform: translateY(12px);}

	.intro { margin-bottom: 30px; }

	.skill_wrapper { width: 368px; display: block; margin: 0 auto; padding-top: 90px; }
	.skillset { display: inline-block; width: 49%; height: 52px; position: relative;}

	.skillset img { position: absolute; transform: translateY(-50%); top: 50%; height: 38px;}
	.skillset .bar { width: 100px; background: #A6D4FF; height: 16px; position: absolute; right: 0; transform: translateY(-50%); top: 50%; border-radius: 30px; margin-right: 20px;}

	.chat_section { width: 368px; display: block; margin: 0 auto; padding-top: 90px; height: 330px;}
	.chat_section > div { width: 100%; position: relative; }

	.Career_section { width: 100%; }
	.carrer_wrapper { width: 368px; margin: 0 auto; display: block; background: #fff; border-radius: 10px; margin-top: 90px; padding: 30px 40px;}
	.carrer_wrapper ._R { margin-bottom: 60px; }

	.carrer_wrap { width: 90%; }
	.company_line > div { float: left; margin-bottom: 20px;}

	.company_name { width: 126px; height: 34px; text-align: center; border-radius: 50px; font-size: 14px; padding-top: 6px; margin-right: 14px; font-family: "NotoSansKR-bold";}
	._b { border: 1px solid #000; color: ; }
	._bl { background: #000; color: #fff; }

	.company_date { width: auto; height: 34px; padding-top: 5px;}

	.chat_L { display: block; width: 328px; height: 62px; background: url("../images/message-gray.png") no-repeat left; margin-bottom: 20px; }
	.chat_R { width: 368px; height: 62px; background: url("../images/message-blue.png") no-repeat right; border-radius: 100px 0 0 100px; }

	.chat_L_p { position: absolute; top: 50%; transform: translateY(-50%); left: 50px; font-size: 13px; width: 90%;}
	.chat_R_p {  position: absolute; top: 50%; transform: translateY(-50%); right: 24px; color: #fff; font-size: 13px; width: 90%; }

	.Webdesign_section { width: 100%; }
	.webdesign_wrapper { width: 368px; margin: 0 auto; display: block; }

	footer { width: 100%; height: 100px; text-align: center; padding-top: 34px; border-top: 1px solid #F2F2F2; color: #C9C9C9;}

	.wrap_title { font-size: 26px; text-align: center; margin-bottom: 50px;}

	.Webdesign_section { width: 100%; padding-bottom: 90px;}
	.webdesign_wrapper { width: 368px; margin: 0 auto; display: block; }

	.Works_wrap { width: 100%; transform: translateX(10px); }
	.Works_wrap img { width: 100%; text-align: center; }
	.Works_wrap div div img { transition:
		width 0.1s,
		height 0.1s,
		background-color 0.1s,
		transform 0.1s;	
	}
	.Works_wrap div div:hover img { width: 102%; transform: translateX(-5px); opacity: 1; }
	.Works_wrap div div img { opacity: 0.4; }
	.Works_wrap div div { background: #000; position: relative;}
	.Works_wrap div div p { position: absolute; color: #fff; transform: translate(-50%); left: 50%; width: 170px; text-align: center; top: 45%;}
	.Works_wrap { width: 100%; transform: translateX(-0px); }
	.webdes_four { width: 110px; float: left; }
	.webdes_four div { width: 368px; height: 240px; float: left;  margin-bottom: 20px; border-radius: 5px; overflow: hidden; }
	.webdes_one { display: block; width: 368px; height: 240px; float: left; border-radius: 5px; overflow: hidden; }
	.webdes_two { display: block; width: 368px; float: left; }
	.webdes_two div { display: block; width: 368px; height: 240px; margin-bottom: 20px; border-radius: 5px; float: left; overflow: hidden;}
	.webdes_five { display: block; width: 368px; float: left;}
	.webdes_five div { display: block; width: 368px; height: 240px; margin-bottom: 20px; border-radius: 5px; float: left; overflow: hidden;}
	._up { margin-bottom: 20px;}
	._down { }
	._last_b { margin-right: 0px; margin-top: 20px;}
	.Mobile_L { background: #fff; width: 156px; height: 326px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; transform: translateX(10px); }
	.Mobile_S { background: #fff; width: 156px; height: 290px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; transform: translateX(10px); }

	.Mobile_Wrapper { width: 368px; margin: 0 auto; padding-bottom: 90px; }

	.Mobile_Wrapper li img { width: 100%; }

	.SNS_section { width: 100%; border-top: 1px solid #F2F2F2; padding-top: 90px;}
	.sns_wrapper { width: 368px; margin: 0 auto; transform: translateX(10px); margin-bottom: 90px;}
	.sns_wrapper div { width: 236px; background: #fff; height: 236px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; }

	.Last_section { width: 100%; padding-bottom: 110px;}
	.last_wrapper { width: 368px; margin: 0 auto; }
	.visualimg { width: 200px; overflow: hidden; display: inline; position: absolute; bottom: 120px; right: 20px;}
	.visualimg img { width: 100%; }

	.bar div { transition: all 0.3s; }

	#html div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}
	#Photoshop div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}
	#css div { width: 98%; background: #5383F6; height: 16px; border-radius: 50px;}
	#illustrator div { width: 98%; background: #5383F6; height: 16px; border-radius: 50px;}
	#javascript div { width: 80%; background: #5383F6; height: 16px; border-radius: 50px;}
	#figma div { width: 86%; background: #5383F6; height: 16px; border-radius: 50px;}
	#Jquery div { width: 95%; background: #5383F6; height: 16px; border-radius: 50px;}
	#communication div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}

	.GraphicDesign_section { width: 368px; border-top: 1px solid #F2F2F2; padding-top: 90px; display: block; margin: 0 auto; }
	.Graphic_wrapper { width: 368px; margin: 0 auto; margin-bottom: 90px; display: block; }

	.Graphic_L { background: #fff; width: 368px; height: 240px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; margin-bottom: 20px; }
	.Graphic_L img { width: 100%; object-position: center;} 

	.pf-download-btn { width: 220px; display: block; margin: 0 auto; border: 1px solid #5383F6; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-top: 30px; border-radius: 50px; }

	.pf-download-btn button {color: #5383F6; font-size: 14px; }

	.blind-subnav ul { background: #fff; padding: 10px 20px 10px 20px; border-radius: 100px; border: 1px solid #E8E8E8; transform: translate(80px, 50px); display: none; }

	nav:hover .blind-subnav ul { display: block;}

	.blind-subnav li { transform: translateX(-8px); font-size: 13px; }

	.blind-subnav li:hover { color: #5383F6; }

}
/* =========== mobile(end) ============ */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!PORTFOLIO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* =========== tablet(start) ============ */
@media screen and (min-width: 768px) and (max-width: 1024px) {

	.pf-download-btn { width: 220px; display: block; margin: 0 auto; border: 1px solid #5383F6; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-top: 30px; border-radius: 50px; }
	.pf-download-btn button {color: #5383F6; font-size: 14px; }


	header { display: block ;}
	nav { margin: 0 auto; display: block; width: 768px; height: 80px; position: relative; padding-top: 20px; }
	nav h1 { position: absolute; font-size: 20px; padding-top: 10px;} 
	nav ul {  position: absolute; right: 100px; padding-top: 10px;} 
	nav ul li { display: inline-block; width: 100px; float: left; margin-left: 20px;}

	.Contact-btn { width: 110px; height: 40px; background-color: #5383F6; text-align: center; border-radius: 50px; float: right; color: #fff;}

	.bold { font-family: "NotoSansKR-Bold"; }

	.visualwrap { width: 100%; }
	.visualT { width: 768px; display: block; margin: 0 auto; padding-top: 70px; position:relative; }
	.visualT h2 {font-size: 57px; font-family: "NotoSansKR-Light"; }
	.visualT h2 span.jean { font-size: 24px;}

	.visualT h3 { margin-top: 20px; font-size: 24px; margin-bottom: 20px; font-family: "NotoSansKR-Light";}

	.header_clipwrap { font-size: 16px; width: 158px; height: 30px; border: 1px solid #000; border-radius: 50px; text-align: center; margin-top: 30px; float: left ; padding-top: 1px; margin-right: 10px;} 

	.clip_right {font-size: 16px; width: 158px; height: 30px; background: #000; color: #fff; border-radius: 50px; text-align: center; margin-top: 30px; float: left; font-family: "NotoSansKR-bold"; padding-top: 1px; padding-left: 5px;}

	.first-icon {float: left; transform: translate(16px,20px); width: 10px; overflow: hidden; }
	.first-icon img { width: 100%; }

	.first_section { width: 100%; margin-top: 140px; display: block;}
	.profile_wrapper { width: 768px; height: 258px; display: block; margin: 0 auto; position: relative; }

	.Profile_circle { overflow: hidden; position: absolute;  width: 100px; height: 100px; background: #E8E8E8; border-radius: 600px; left: 0; z-index: 50;}
	.profile_section_wrap { position: absolute; width: 700px; background: #fff; border-radius: 20px; height: 258px; right: 0; padding-top: 50px; padding-left: 45px; }

	.Profile_circle img { width: 100%; }

	.skill_wrapper { width: 100%; display: block;}

	.profile_section_wrap 

	.tag_white { height: 30px; border: 1px solid #5383F6; width: auto; border-radius: 30px; text-align: center;padding-left: 10px; padding-right: 10px; color: #5383F6; padding-bottom: 2px;}

	.tag_orange { height: 30px; border: 1px solid #5383F6; width: auto; border-radius: 30px; text-align: center;padding-left: 10px; padding-right: 10px; background: #5383F6; color: #fff;padding-bottom: 2px;}

	div.Name p { float: left; padding-bottom: 10px;}

	.ko_name { font-size: 24px; font-family: "NotoSansKR-Bold"; width: auto; margin-right: 6px;}
	.en_name { font-size: 14px; color: #5383F6; text-align: center; transform: translateY(12px);}

	.intro { margin-bottom: 30px; }

	.skill_wrapper { width: 768px; display: block; margin: 0 auto; padding-top: 90px; }
	.skillset { display: inline-block; width: 49%; height: 52px; position: relative;}

	.skillset img { position: absolute; transform: translateY(-50%); top: 50%; height: 38px;}
	.skillset .bar { width: 300px; background: #A6D4FF; height: 16px; position: absolute; right: 0; transform: translateY(-50%); top: 50%; border-radius: 30px; margin-right: 20px;}

	.chat_section { width: 768px; display: block; margin: 0 auto; padding-top: 90px; height: 400px;}
	.chat_section > div { width: 100%; position: relative; }

	.Career_section { width: 100%; }
	.carrer_wrapper { width: 768px; margin: 0 auto; display: block; background: #fff; border-radius: 10px; margin-top: 90px; padding: 30px 40px;}

	.carrer_wrap { float: left; width: 50%;}
	.company_line > div { float: left; margin-bottom: 20px;}

	.company_name { width: 126px; height: 34px; text-align: center; border-radius: 50px; font-size: 14px; padding-top: 6px; margin-right: 14px; font-family: "NotoSansKR-bold";}
	._b { border: 1px solid #000; color: ; }
	._bl { background: #000; color: #fff; }

	.company_date { width: auto; height: 34px; padding-top: 5px;}

	.chat_L { display: block; width: 328px; height: 62px; background: url("../images/message-gray.png") no-repeat left; margin-bottom: 20px;}
	.chat_R { width: 700px; height: 62px; background: url("../images/message-blue.png") no-repeat right; }

	.chat_L_p { position: absolute; top: 50%; transform: translateY(-50%); left: 50px;}
	.chat_R_p {  position: absolute; top: 50%; transform: translateY(-50%); right: 24px; color: #fff;}

	.Webdesign_section { width: 100%; }
	.webdesign_wrapper { width: 1024px; margin: 0 auto; display: block; }

	footer { width: 100%; height: 100px; text-align: center; padding-top: 34px; border-top: 1px solid #F2F2F2; color: #C9C9C9;}

	.wrap_title { font-size: 36px; text-align: center; margin-bottom: 50px;}

	.Webdesign_section { width: 100%; padding-bottom: 90px;}
	.webdesign_wrapper { width: 768px; margin: 0 auto; display: block; }

	.Works_wrap { width: 100%; transform: translateX(10px); }
	.Works_wrap img { width: 100%; text-align: center; }
	.Works_wrap div div img { transition:
		width 0.1s,
		height 0.1s,
		background-color 0.1s,
		transform 0.1s;	
	}
	.Works_wrap div div:hover img { width: 102%; transform: translateX(-5px); opacity: 1; }
	.Works_wrap div div img { opacity: 0.1; }
	.Works_wrap div div { background: #000; position: relative;}
	.Works_wrap div div p { position: absolute; color: #fff; transform: translate(-50%); left: 50%; width: 170px; text-align: center; top: 45%;}
	.Works_wrap { width: 100%; transform: translateX(10px); }
	.webdes_four { width: 510px; float: left; }
	.webdes_four div { width: 234px; height: 168px; float: left;  margin-bottom: 20px; margin-right: 20px; border-radius: 5px; overflow: hidden; }
	.webdes_one { display: block; width: 502px; height: 356px; float: left; border-radius: 5px; overflow: hidden; }
	.webdes_two { display: block; width: 234px; float: left; margin-right: 20px;}
	.webdes_two div { display: block; width: 234px; height: 168px; margin-bottom: 20px; border-radius: 5px; float: left; overflow: hidden;}
	.webdes_five { display: block; width: 234px; float: left; margin-left: 20px;}
	.webdes_five div { display: block; width: 234px; height: 168px; margin-bottom: 20px; border-radius: 5px; float: left; overflow: hidden;}
	._up { margin-bottom: 20px;}
	._down { margin-right: 20px; }
	._last_b { margin-right: 0px; }
	.Mobile_L { background: #fff; width: 236px; height: 426px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; transform: translateX(10px); }
	.Mobile_S { background: #fff; width: 236px; height: 460px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; transform: translateX(10px); }

	.Mobile_Wrapper { width: 768px; margin: 0 auto; padding-bottom: 90px;}
	.Mobile_Wrapper li img { object-fit: cover; width: 110%; transform: translateX(-12px);}

	.SNS_section { width: 100%; border-top: 1px solid #F2F2F2; padding-top: 90px;}
	.sns_wrapper { width: 768px; margin: 0 auto; transform: translateX(10px); margin-bottom: 90px;}
	.sns_wrapper div { width: 236px; background: #fff; height: 236px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; }

	.Last_section { width: 100%; padding-bottom: 110px;}
	.last_wrapper { width: 768px; margin: 0 auto; }
	.visualimg { width: 300px; overflow: hidden; display: inline; position: absolute; bottom: -10px; right: 0;}
	.visualimg img { width: 100%; }

	.bar div { transition: all 0.3s; }

	#html div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}
	#Photoshop div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}
	#css div { width: 98%; background: #5383F6; height: 16px; border-radius: 50px;}
	#illustrator div { width: 98%; background: #5383F6; height: 16px; border-radius: 50px;}
	#javascript div { width: 80%; background: #5383F6; height: 16px; border-radius: 50px;}
	#figma div { width: 86%; background: #5383F6; height: 16px; border-radius: 50px;}
	#Jquery div { width: 95%; background: #5383F6; height: 16px; border-radius: 50px;}
	#communication div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}

	.GraphicDesign_section { width: 100%; border-top: 1px solid #F2F2F2; padding-top: 90px;  }
	.Graphic_wrapper { width: 750px; margin: 0 auto; margin-bottom: 90px; display: block; transform: translateX(20px); overflow: hidden;}

	.Graphic_L { background: #fff; width: 340px; height: 240px; float: left; margin-right: 30px; border-radius: 5px; overflow: hidden; margin-bottom: 20px; }
	.Graphic_L img { width: 100%; object-position: center;} 

	.Last_section { width: 100%; padding-top: 90px; border-top: 1px solid #F2F2F2;}
	.last_wrapper { width: 750px; margin: 0 auto;  margin-bottom: 90px; position: relative ;}

	.last_wrapper div { width: 736px; height: 62px; background: url("../images/message-blue-l.png") no-repeat right; background-size: contain; position: absolute; color: #fff; padding-top: 20px; padding-left: 18px; left: 0;}

	.blind-subnav ul { background: #fff; padding: 10px 20px 10px 20px; border-radius: 100px; border: 1px solid #E8E8E8; transform: translate(80px, 50px); display: none; }

	nav:hover .blind-subnav ul { display: block;}

	.blind-subnav li { transform: translateX(-8px); font-size: 13px; }

	.blind-subnav li:hover { color: #5383F6; }

}
/* =========== tablet(end) ============ */

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!PORTFOLIO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* =========== Desktop(start) ============ */
@media screen and (min-width: 1025px) {

	.pf-download-btn { width: 220px; display: block; margin: 0 auto; border: 1px solid #5383F6; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-top: 30px; border-radius: 50px; }
	.pf-download-btn button {color: #5383F6; font-size: 14px; }

	.text_blue { color: #000; }
	.white { color: #fff; }

	.title-hover:hover .desc_title { color: #5383F6; }

	button._L { position: relative; right: 70%; top: -4vh; width: 240px; height: 240px; background: url("../images/arrow_bg_L.png") no-repeat center center; z-index: 100; }
	button._L > img { position: absolute; width: 66px; height: 105px; top: 30%; left: 37%; }

	button._L > img { animation: buttonL 1.2s ease-in-out infinite; }

	@keyframes buttonL {
		0% {transform: translate(0, 0); opacity: 0;}
		40% {opacity: 1;}
		80% {transform: translate(0, 20px); opacity: 0;}
		100% {opacity: 0;}
	}

	.trans_bg { position: relative; width: 116px; height: 120px; top: 30vh; right: 40px; z-index: 100; }
	.trans_bg:hover > div._M { animation: buttonM 5s infinite; }
	@keyframes buttonM {
		0% {transform: rotate(0);}
		100% {transform: rotate(720deg);}
	}
	.trans_bg:hover p.p_contact { color: #ffc000; }
	div._M { width: 100%; height: 100%; background: url("../images/arrow_bg_M.png") no-repeat center center; }
	.trans_bg p.p_contact { position: absolute; width: 66px; height: 105px; font-weight: bold; top: 40%; left: 20%; }

	div._S { width: 100%; height: 100%; background: url("../images/arrow_bg_S.png") no-repeat center center; }
	.trans_bg:hover > div._S { animation: buttonM 5s infinite; }
	.trans_bg > p.p_back { position: absolute; font-size: 0.875em; width: 66px; height: 105px; font-weight: bold; top: 42%; left: 26%; }


	header { display: block ;}
	nav { margin: 0 auto; display: block; width: 1024px; height: 120px; position: relative; padding-top: 20px; }
	nav h1 { position: absolute; font-size: 20px; padding-top: 10px;} 
	nav ul {  position: absolute; right: 100px; padding-top: 10px;} 
	nav ul li { display: inline-block; width: 100px; float: left; margin-left: 20px;}

	.Contact-btn { width: 110px; height: 40px; background-color: #5383F6; text-align: center; border-radius: 50px; float: right; color: #fff;}

	.bold { font-family: "NotoSansKR-Bold"; }

	.visualwrap { width: 100%; overflow: hidden; padding-bottom: 45px;}
	.visualT { width: 1024px; display: block; margin: 0 auto; padding-top: 70px; position: relative;}
	.visualT h2 {font-size: 57px; font-family: "NotoSansKR-Light"; }
	.visualT h2 span.jean { font-size: 24px;}

	.visualT h3 { margin-top: 20px; font-size: 24px; margin-bottom: 20px; font-family: "NotoSansKR-Light";}

	.visualimg { width: 600px; overflow: hidden; display: inline; position: absolute; bottom: -50px; right: -190px;}
	.visualimg img { width: 400px; }

	.header_clipwrap { font-size: 16px; width: 158px; height: 30px; border: 1px solid #000; border-radius: 50px; text-align: center; margin-top: 30px; float: left ; padding-top: 1px; margin-right: 10px;} 

	.clip_right {font-size: 16px; width: 158px; height: 30px; background: #000; color: #fff; border-radius: 50px; text-align: center; margin-top: 30px; float: left; font-family: "NotoSansKR-bold"; padding-top: 1px; padding-left: 5px;}

	.first-icon {float: left; transform: translate(16px,20px); width: 50px;}
	.first-icon img { width: 100%; }

	.first_section { width: 100%; margin-top: 140px; display: block;}
	.profile_wrapper { width: 1024px; height: 258px; display: block; margin: 0 auto; position: relative; }

	.Profile_circle { overflow: hidden; position: absolute;  width:258px; height: 258px; background: #E8E8E8; border-radius: 600px; left: 0; z-index: 50;}
	.profile_section_wrap { position: absolute; width: 830px; background: #fff; border-radius: 20px; height: 258px; right: 0; padding-top: 50px; padding-left: 80px; }

	.Profile_circle img { width: 100%; }

	.skill_wrapper { width: 100%; display: block;}

	.profile_section_wrap 

	.tag_white { height: 30px; border: 1px solid #5383F6; width: auto; border-radius: 30px; text-align: center;padding-left: 10px; padding-right: 10px; color: #5383F6; padding-bottom: 2px;}

	.tag_orange { height: 30px; border: 1px solid #5383F6; width: auto; border-radius: 30px; text-align: center;padding-left: 10px; padding-right: 10px; background: #5383F6; color: #fff;padding-bottom: 2px;}

	div.Name p { float: left; padding-bottom: 10px;}

	.ko_name { font-size: 24px; font-family: "NotoSansKR-Bold"; width: auto; margin-right: 6px;}
	.en_name { font-size: 14px; color: #5383F6; text-align: center; transform: translateY(12px);}

	.intro { margin-bottom: 30px; }

	.skill_wrapper { width: 1024px; display: block; margin: 0 auto; padding-top: 90px; }
	.skillset { display: inline-block; width: 49%; height: 52px; position: relative; }

	.skillset img { position: absolute; transform: translateY(-50%); top: 50%; height: 49px; }
	.skillset .bar { width: 410px; background: #A6D4FF; height: 16px; position: absolute; right: 0; transform: translateY(-50%); top: 50%; border-radius: 30px; margin-right: 20px;}

	.chat_section { width: 1024px; display: block; margin: 0 auto; padding-top: 90px; height: 400px;}
	.chat_section > div { width: 100%; position: relative; }

	.Career_section { width: 100%; }
	.carrer_wrapper { width: 1024px; margin: 0 auto; display: block; background: #fff; border-radius: 10px; margin-top: 90px; padding: 30px 40px; line-height: 1.5;}

	.carrer_wrap { float: left; width: 50%;}
	.company_line > div { float: left; margin-bottom: 20px; line-height: 1.2;}

	.company_name { width: 126px; height: 34px; text-align: center; border-radius: 50px; font-size: 14px; padding-top: 8px; margin-right: 14px; font-family: "NotoSansKR-bold";}
	._b { border: 1px solid #000; color: ; }
	._bl { background: #000; color: #fff; }

	.company_date { width: auto; height: 34px; padding-top: 9px;}

	.chat_L { display: block; width: 328px; height: 62px; background: url("../images/message-gray.png") no-repeat left; margin-bottom: 20px;}
	.chat_R { width: 736px; height: 62px; background: url("../images/message-blue.png") no-repeat right; }

	.chat_L_p { position: absolute; top: 50%; transform: translateY(-50%); left: 50px;}
	.chat_R_p {  position: absolute; top: 50%; transform: translateY(-50%); right: 24px; color: #fff;}

	.Webdesign_section { width: 100%; }
	.webdesign_wrapper { width: 1024px; margin: 0 auto; display: block; }

	footer { width: 100%; height: 100px; text-align: center; padding-top: 34px; border-top: 1px solid #F2F2F2; color: #C9C9C9;}

	.wrap_title { font-size: 36px; text-align: center; margin-bottom: 50px;}

	.Webdesign_section { width: 100%; padding-bottom: 90px;}
	.webdesign_wrapper { width: 1024px; margin: 0 auto; display: block; }
	.Works_wrap img { width: 100%; text-align: center; }
	.Works_wrap div div img { transition:
		width 0.1s,
		height 0.1s,
		background-color 0.1s,
		transform 0.1s;	
	}
	.Works_wrap div div:hover img { width: 102%; transform: translateX(-5px); opacity: 1; }
	.Works_wrap div div img { opacity: 0.1; }
	.Works_wrap div div { background: #000; position: relative;}
	.Works_wrap div div p { position: absolute; color: #fff; transform: translate(-50%); left: 50%; width: 170px; text-align: center; top: 45%;}
	.Works_wrap { width: 100%; transform: translateX(10px); }
	.webdes_four { width: 510px; float: left; }
	.webdes_four div { width: 234px; height: 168px; float: left;  margin-bottom: 20px; margin-right: 20px; border-radius: 5px; overflow: hidden; }
	.webdes_one { display: block; width: 502px; height: 356px; float: left; border-radius: 5px; overflow: hidden; }
	.webdes_two { display: block; width: 234px; float: left; margin-right: 20px;}
	.webdes_two div { display: block; width: 234px; height: 168px; margin-bottom: 20px; border-radius: 5px; float: left; overflow: hidden;}
	.webdes_five { display: block; width: 234px; float: left; margin-right: 20px;}
	.webdes_five div { display: block; width: 234px; height: 168px; margin-bottom: 20px; border-radius: 5px; float: left; overflow: hidden;}
	._up { margin-bottom: 20px;}
	._down { margin-right: 20px; }
	._last_b { margin-right: 0px; }

	.Mobile_L { background: #fff; width: 236px; height: 510px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; }
	.Mobile_L img { width: 100%; }
	.Mobile_S { background: #fff; width: 236px; height: 440px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; }
	.Mobile_S img { width: 100%; }

	.Mobile_Wrapper { width: 1024px; margin: 0 auto; padding-bottom: 90px; }

	.GraphicDesign_section { width: 100%; border-top: 1px solid #F2F2F2; padding-top: 90px;  }
	.Graphic_wrapper { width: 1024px; margin: 0 auto; margin-bottom: 90px; display: block; }

	.Graphic_L { background: #fff; width: 326px; height: 240px; float: left; margin-right: 20px; border-radius: 5px; overflow: hidden; margin-bottom: 20px; }
	.Graphic_L img { width: 100%; object-position: center;} 

	._last_b { margin-right: 0px; }

	.Last_section { width: 100%; padding-top: 90px; border-top: 1px solid #F2F2F2;}
	.last_wrapper { width: 1024px; margin: 0 auto;  margin-bottom: 90px; position: relative ;}

	.last_wrapper div { width: 736px; height: 62px; background: url("../images/message-blue-l.png") no-repeat right; background-size: contain; position: absolute; color: #fff; padding-top: 20px; padding-left: 18px; left: 0;}

	.bar div { transition: all 0.3s; }

	#html div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}
	#Photoshop div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}
	#css div { width: 98%; background: #5383F6; height: 16px; border-radius: 50px;}
	#illustrator div { width: 98%; background: #5383F6; height: 16px; border-radius: 50px;}
	#javascript div { width: 80%; background: #5383F6; height: 16px; border-radius: 50px;}
	#figma div { width: 86%; background: #5383F6; height: 16px; border-radius: 50px;}
	#Jquery div { width: 95%; background: #5383F6; height: 16px; border-radius: 50px;}
	#communication div { width: 100%; background: #5383F6; height: 16px; border-radius: 50px;}

	.blind-subnav ul { background: #fff; padding: 10px 20px 10px 20px; border-radius: 100px; border: 1px solid #E8E8E8; transform: translate(80px, 50px); display: none; }

	nav:hover .blind-subnav ul { display: block;}

	.blind-subnav li { transform: translateX(-8px); font-size: 13px; }

	.blind-subnav li:hover { color: #5383F6; }


}
/* =========== Desktop(end) ============ */

body { font-family: "NotoSansKR-Regular"; background: #f8f8f8; }