@charset "euc-kr";

/*ȸÀÇ·Ï ³» ÇÁ·ÎÇÊ ½ºÅ¸ÀÏ*/
.pop_profile p{margin:0;}
#top .pop_profile{top:100px;}
#top .pop_profile.on{top:110px;}

body{min-width:320px;}

.pop_profile{z-index:101; opacity:0; visibility:hidden; position:fixed; top:2%; left:50%; width:500px; transform:translateX(-50%); background:#fff; box-shadow:0 5px 10px rgba(0,0,0,0.25); transition:0.4s ease-in-out; font-family:'Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '¸¼Àº°íµñ', 'Dotum', 'µ¸¿ò', 'Montserrat', 'Arial', 'sans-serif' !important;}
.pop_profile.on{opacity:1; visibility:visible; top:10%;}
.pop_profile h1{padding:15px 0 14px; text-align:center; font-size:20px; color:#fff; box-shadow:0 5px 5px rgba(0,0,0,0.2); background:#274480; font-family:'Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '¸¼Àº°íµñ', 'Dotum', 'µ¸¿ò', 'Montserrat', 'Arial', 'sans-serif' !important;}
.pop_profile .info{overflow:hidden; width:100%; padding:22px 15px 15px 15px; box-sizing:border-box;}
.pop_profile .pic_wrap{position:relative; width:100%; min-height:175px; padding:0 0 10px 113px; box-sizing:border-box;}
.pop_profile .pic{position:absolute; top:0; left:0; max-width:102px; margin:0 0 10px 0;}
.pop_profile .pic img{max-width:100%; border:4px solid #eee; box-sizing:border-box;}
.pop_profile .pic .name{width:100%; padding:8px 0 0 0; font-size:106%; font-weight:800; text-align:center;}
.pop_profile .detail{width:100%; margin:0 0 0.5em 0; line-height:1.5em;}
.pop_profile .detail li{position:relative; padding:0 0 4px 73px; margin:0 0 7px 0; border-bottom:1px solid #ddd; box-sizing:border-box;}
.pop_profile .detail li:before,
.pop_profile .career h2:before{content:''; display:block; position:absolute; top:7px; left:0; height:3px; width:3px; background:#756ab9; border-radius:50%;}
.pop_profile .detail li *{display:inline-block; vertical-align:top;}
.pop_profile .detail li em{position:absolute; top:0; left:8px; width:70px; white-space:pre; font-weight:400;}
.pop_profile .detail li span{width:100%; word-break:break-all;}
.pop_profile .career{position:relative; clear:both; width:100%;}
.pop_profile .career h2{position:relative; padding:0px 0 6px 10px; font-size:105%; font-weight:normal; font-family:'Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '¸¼Àº°íµñ', 'Dotum', 'µ¸¿ò', 'Montserrat', 'Arial', 'sans-serif' !important;}
.pop_profile .career .list{height:160px; padding:10px; overflow:auto; border:1px solid #ddd; line-height:1.5em; background:#f9f9f9;}
.pop_profile .career:before{content:''; display:block; position:absolute; bottom:0; right:0; width:150px; height:120px; opacity:0.5; background:url(/images/common/logo_l.png) no-repeat; background-size:200px;}
.pop_profile .career li{position:relative; padding:0 0 0 10px;}
.pop_profile .career li:before{content:''; display:block; position:absolute; top:7px; left:0; height:1px; width:5px; background:#777;}

.btn_p_close{width:100%; padding:8px 0 17px 0; text-align:right; background:#555;} 
.btn_p_close a{display:inline-block; padding:0 20px 0 0; color:#fff; font-size:13px; letter-spacing:0; text-transform:uppercase;}
.tit .btn_p_close{position:absolute; top:14px; right:10px; width:auto; padding:0; background:none;}
.tit .btn_p_close a{position:relative; width:27px; height:27px; padding:0; font-size:0; line-height:0; text-indent:-999px; vertical-align:top;}
.tit .btn_p_close a:before,
.tit .btn_p_close a:after{content:''; display:block; width:30px; height:2px; transform:rotate(45deg); transform-origin:0 100%; background:#fff;}
.tit .btn_p_close a:after{margin:-2px 0 0 -7px; transform:rotate(-45deg); transform-origin:100% 100%;}
@media all and (max-width:568px){
	.pop_profile{width:94%; min-width:300px;}
	.pop_profile.on{top:4%;}
	.pop_profile .career .list{height:150px;}
}
@media all and (max-width:380px) {
	.pop_profile{position:absolute;}
	.pop_profile h1{padding:12px 0; font-size:18px;}
	.pop_profile .pic_wrap{padding-left:31%;}
	.pop_profile .pic{max-width:28%}
	.pop_profile .detail li{padding:0 0 4px 64px;}
	.pop_profile .career .list{height:140px;}
	.tit .btn_p_close{right:7px;}
	.tit .btn_p_close a:before, .tit .btn_p_close a:after{width:25px;}
	.tit .btn_p_close a:after{margin:-2px 0 0 -6px;}
}

/*¿µ»óȸÀǷϺä¾î ÇÁ·ÎÇÊ ½ºÅ¸ÀÏ*/
#profile {font-weight:400;}
#profile h1{padding:13px 0; text-align:center; font-size:20px; color:#fff; box-shadow:0 5px 5px #ccc; background:#1f3c5b;}
#profile .profile_info{overflow:hidden; width:100%; padding:27px 3% 10px 3%; box-sizing:border-box;}
#profile .pic{float:left; width:31%; max-width:145px; margin:0 0 10px 0; text-align:center;}
#profile .pic img{max-width:98%; border:5px solid #d7d7d7; box-sizing:border-box;}
#profile .pic .name{width:100%; padding:8px 0 0 0; font-size:110%; font-weight:800; color:#1f3c5b;}
#profile .detail{float:right; width:67%; margin:0 0 0.5em 0; line-height:1.5em;}
#profile .detail li{position:relative; padding:5px 0 5px 8px; border-bottom:1px solid #cfcfcf;}
#profile .detail li:before,
#profile .career h2:before{content:''; display:block; position:absolute; top:13px; left:0; height:3px; width:3px; background:#474747; border-radius:50%;}
#profile .detail li *{display:inline-block; vertical-align:top;}
#profile .detail li em{width:65px; white-space:pre;}
#profile .detail li span{width:66%;}
#profile .career{clear:both; margin:0px 0 10px 0;}
#profile .career h2{position:relative; padding:0px 0 6px 10px; font-size:110%; font-weight:400;}
#profile .career .list{height:160px; padding:10px; overflow:auto; border:1px solid #cfcfcf; line-height:1.5em; background:#f4f4f4;}
#profile .career .list li{position:relative; padding:0 0 0 10px;}
#profile .career .list li:before{content:''; display:block; position:absolute; top:12px; left:0; height:1px; width:5px; background:#474747;}
#profile .career .list li.gubun,
#profile .career .list li.none{padding:0;}
.btn_close{position:fixed; bottom:0; left:0; width:100%; padding:8px 0 40px 0; text-align:right; background:#ddd;} 
.btn_close a{display:inline-block; padding:0 25px 0 0; color:#1f3c5b; font-weight:800; font-size:13px; letter-spacing:0; text-transform:uppercase;}

@media all and (max-width:430px) {
	body{font-size:15px;}
	#profile .pic_wrap .name{font-size:105%;}
}