@charset "utf-8";

.mask{visibility:hidden; opacity:0; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.65);}
.mask.on{z-index:95; visibility:visible; opacity:1; transition:opacity 0.25s linear;}
.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%; transform:translateX(-50%); width:500px; box-shadow:0 5px 15px rgba(153,153,153,0.3); background:#fff; 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:25px 0 24px; text-align:center; font-size:22px; color:#fff; background:#393e48 url(../images/common/bg_profile.jpg) no-repeat; font-family:'Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '맑은고딕', 'Dotum', '돋움', 'Montserrat', 'Arial', 'sans-serif' !important;}
.pop_profile .info{box-sizing:border-box; padding:20px;}
.pop_profile .pic_wrap{position:relative; box-sizing:border-box; padding:0 0 0 155px; min-height: 185px;}
.pop_profile .pic_wrap div{position:absolute; top:0; left:0;}
.pop_profile .pic_wrap .pic{position:relative; display:block; width:135px; height:165px; background:#eee;}
.pop_profile .pic_wrap img{position:absolute; top:5px; left:5px; width:calc(100% - 10px); height:calc(100% - 10px);}
.pop_profile .pic_wrap .name{padding:6px 0 0; font-size:18px; font-weight:400; text-align:center;}

.pop_profile .detail li{position:relative; box-sizing:border-box; padding:0 0 10px 110px; border-bottom:1px solid #ddd; margin:0 0 10px;}
.pop_profile .detail li:before,
.pop_profile .career h2:before{content:''; position:absolute; top:8px; left:0; height:4px; width:4px; border-radius:50%; background:#7d7d7d;}
.pop_profile .detail li em{position:absolute; top:0; left:13px; letter-spacing:1px;}
.pop_profile .detail li em.ls2{letter-spacing:31px;}
.pop_profile .detail li em.ls3{letter-spacing:8px;}
.pop_profile .detail li span{display:block; width:100%; font-weight:400; word-break:break-all;}

.pop_profile .career h2{position:relative; padding:0 0 6px 13px; font-weight:200; font-family:'Noto Sans KR','Nanum Gothic', 'Malgun Gothic', '맑은고딕', 'Dotum', '돋움', 'Montserrat', 'Arial', 'sans-serif' !important;}
.pop_profile .career .list{overflow:hidden; height:250px; padding:15px; overflow:auto; background:#f5f5f5;}
.pop_profile .career li{position:relative; padding:0 0 2px 8px;}
.pop_profile .career li:before{background:#222;}

.btn_close{padding:12px 20px 12px 0; text-align:right; background:#edf0f4;} 
.btn_close a{position:relative; display:inline-block; letter-spacing:0; padding:0 0 0 30px; font-size:18px; font-weight:800; color:#333; text-transform:uppercase;}
.btn_close a:before,
.btn_close a span:before,
.btn_close a span:after{content:''; position:absolute; top:7px; left:7px; width:15px; height:2px; transform:rotate(45deg); transform-origin:0 100%; background:#333;}
.btn_close a:before{top:1px; left:0; width:25px; height:25px; border-radius:50%; background:#fff; transform:none; box-shadow:3px 0 5px rgba(153,153,153,0.3);}
.btn_close a span:after{margin:0 0 0 -3px; 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 h1{padding:15px 0; font-size:19px;}
    .pop_profile .pic_wrap{min-height:155px; padding:0 0 0 145px;}
    .pop_profile .pic_wrap .pic{width:115px; height:145px;}
    .pop_profile .pic_wrap .name{font-size:1.067em;}
    .pop_profile .detail li{padding-left:90px;}
    .pop_profile .detail li em.ls2{letter-spacing:30px;}
	.pop_profile .career .list{height:150px;}
    
    .btn_close a{padding:0 0 0 25px; font-size:1em;}
    .btn_close a:before{top:-1px; width:20px; height:20px;}
    .btn_close a span:before, .btn_close a span:after{top:5px; left:6px; width:10px; height:1px;}
    .btn_close a span:after{margin:0 0 0 -2px;}
}

@media all and (max-width:380px) {
	.pop_profile h1{padding:12px 0; font-size:17px;}
    .pop_profile .info{padding:10px;}
    .pop_profile .pic_wrap{min-height:125px; padding:0 0 0 100px;}
    .pop_profile .pic_wrap .pic{width:85px; height:115px;}
    .pop_profile .detail li{padding:0 0 7px 80px; margin:0 0 7px;}
	.pop_profile .detail li:before, .pop_profile .career h2:before{top:5px;}
    .pop_profile .detail li em{left:10px;}
    .pop_profile .detail li em.ls2{letter-spacing:27px;}
    .pop_profile .detail li em.ls3{letter-spacing:7px;}
    .pop_profile .career h2{padding-left:10px;}
    .pop_profile .career .list{height:100px;}
    .pop_profile .career li{padding-bottom:0;}
}