/**공통**/
#view{}
#view #img{border:1px solid #ddd; text-align:center; margin:15px 0; height:0; padding-bottom:70%; position:relative; overflow:hidden;}
#view #img img{width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%);}
#view .box{border:1px solid #ddd; padding:15px; margin-bottom:10px; font-size:1.1em;}

#view dl{margin:0; display:flex; flex-wrap:wrap;}
#view dt,
#view dd{vertical-align:middle; padding:3px 0;}
#view dt{width:80px;}
#view dd{width:calc(100% - 80px);}
#view dd .ico{display:inline-block; vertical-align:middle; background:#ddd; border-radius:3px; font-size:1em; padding:1px 7px; margin-right:3px; font-weight:600;}

#view #basic{display:flex; margin-bottom:20px;}
#view .img{width:150px; height:150px; border-radius:15px; overflow:hidden;}
#view .img img{width:100%; min-height:150px;}
#view .text{width:calc(100% - 150px); display:flex; flex-wrap:wrap; padding:0px 15px;}
#view #basic dt{width:50px;}
#view #basic dd{width:calc(100% - 50px);}
#view .skill_info span:nth-child(2){padding: 0 7px;}
#view .skill_info span:nth-child(3){padding-right: 3px;}


#write{font-size:1.1em;}
#write #img{margin:0px auto 20px auto; width:200px; position:relative;}
#write #img .btn{position:absolute; right:0; bottom:0; display:block; background:#333; color:#fff; width:30px; height:30px; line-height:30px; text-align:center; padding:0;}
#write .img{width:200px; height:200px; border-radius:15px; overflow:hidden; border:1px solid #ddd;}
#write .img img{width:100%; min-height:200px;}
#write .box{ margin-bottom:30px;}
#write dl{margin:0; display:flex; flex-wrap:wrap;}
#write dt,
#write dd{vertical-align:middle; padding:3px 0; line-height:30px;}
#write dt{width:80px;}
#write dd{width:calc(100% - 80px);}
#write dd .frm_input{height:30px;}
#write input[type=date], #write input[type=time]{width:calc(50% - 10px); background-color:#f4f4f4!important;border:0; text-align:center;
						margin-bottom:5px;padding:0;border-radius:5px; font-size:11px;} 
#write .skill_warp, #write .certi_warp{display: flex; }
#write .skill_warp{ border:1px dashed #eee; margin-bottom:5px; border-radius:5px; padding:5px; flex-wrap:wrap;}
#write .skill_warp .frm_input { width:30%; margin-right:5px; text-align:right; padding-right:20px;}
#write .skill_warp > input:first-child{width:100%; text-align:left;}
#write .skill_warp span{margin-right:5px;}
#write .fa-plus,
#write .fa-minus{ vertical-align:middle; width:25px; height:25px; line-height:25px; margin:2px 0 2px 5px; border:1px solid #999; border-radius:50%; text-align:center;}

/*출근도장*/
.stamp{ display: flex; justify-content: center; margin: 10px 0; position:relative; background:#E3E3E3; padding:10px 0;}
.stamp p{font-size:1.2em; font-weight:600; line-height:80px; margin-right:10px;}
.stamp a{ position:relative; display:block; width:80px; height:80px; font-size: 1.5rem;  justify-content: center; align-items: center; color:#fff; transform:rotate(-25deg);}
.stamp a:before{ content:""; display:block; width:100%; height:100%; border-radius: 50%; background:#dd5151; position:absolute; left:0; top:0;}
.stamp i{ font-size:3.3em; position:absolute; border:3px solid #fff; width: 70px; height: 70px; line-height:60px; margin:5px; border-radius:50%; text-align:center;}
.stamp #stamp_status{ position:absolute; bottom:5px; left:50%; transform:translateX(-50%); background:#fff; color:#fff; color:#dd5151; line-height:1.2em;
padding:1px 8px 0px; border:3px solid #dd5151; box-sizing:box-border; border-radius:5px;}

/*별점*/
#star{text-align:center; margin:30px auto;}
#star strong{ display:inline-block; margin-bottom:5px;}
#star .frm_input{width:50px; text-align:center; margin:0 3px; line-height:1em; height:30px; vertical-align:middle;}
.starR{ color:#ddd; font-size:20px; display: inline-block; cursor: pointer; }
.starR.on{color:#efd711;}

/*메세지함*/
#message{}
#message .nav-tabs{background:#fff}
#message .nav-tabs>li{font-size:1.1em; width:50%; text-align:center;}
#message .nav-tabs>li>a{opacity:0.7; border-radius:0;}
#message .nav-tabs>li.active>a,
#message .nav-tabs>li.active>a:focus,
#message .nav-tabs>li.active>a:hover{ background:#fff; color:#5169dd; font-weight:600; opacity:1; border:0; border-bottom:2px solid #5169dd;}

#message .tab-content{padding:20px 0;}
#message .tab-content li{/*border:1px solid #ddd;*/background:#f4f4f4; padding:15px 10px; margin-bottom:5px; }
#message .tab-content li .name{font-size:1.1em;}
#message .tab-content li .data{float:right;}
#message .tab-content li .txt{margin-top:5px; opacity:0.8;}
#message .declaration_btn{ cursor: pointer; color: #ff3434;}
#message .block_btn{ cursor: pointer; color: #4343a1;}

/*설정*/
#setting p{text-align:center;}
#setting ul.alert_switch{margin-top:20px;}
#setting ul.alert_switch li {position: relative; padding:15px; border-bottom:1px solid #ddd}
#setting ul.alert_switch li a{display:block; line-height:20px;}
#setting ul.alert_switch li i{float:right; line-height:20px;}
#setting input[type="checkbox"] {width: 65px; height: 30px; display: inline-block; -webkit-appearance: none; margin-right: 3px; background-color: #E3EBF6; border-radius: 50px; position: absolute; right: 10px; top: 50%; margin-top: -15px; transition: all .3s ease; cursor:pointer;}
#setting input[type="checkbox"]:after {content:''; display:inline-block; width:20px; height:20px; background-color:#fff; border-radius: 50px; position: absolute; top: 50%; left: 6px; margin-top: -10px; transition: all .3s ease;}
#setting input[type="checkbox"]:before {content: 'OFF'; position: absolute; right: 8px; top: 50%; margin-top: -7px; opacity: .5;}
#setting input:checked[type="checkbox"] {background-color:#2C7BE5; transition: all .3s ease;}
#setting input:checked[type="checkbox"]:before {content:'ON'; right: auto; left:8px; color:#fff;}
#setting input:checked[type="checkbox"]:after {left: 40px; transition: all .3s ease;}
#setting ul.alert_switch li label {position: absolute; font-size:0; width:1px; height:1px; opacity:0;} /* soundonly */

#footer{ margin-top:30px; padding:15px;}
#footer p{font-size:1.1em; font-weight:600;}
#footer span{display:inline-block; margin-right:5px;}