@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;600;700&display=swap);

.snip1336 {
  font-family: 'Pretendard','SCDream','Noto Sans KR', 'Roboto', sans-serif;
  position: relative;
  overflow: hidden;
  margin: 0px;
  min-width: 380px;
  max-width: 640px;
  width: 100%;
  color: #2d3341;
  text-align: left;
  line-height: 1.4em;
  background-color: #ffffff;;
  box-shadow: 0px 14px 80px rgba(0, 0, 0, 0.75);
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}
@media screen and (max-width: 640px) {
  .snip1336 {
    margin: 0px;
    max-width: 100%;
    height: 100%;
    box-shadow: 0px 14px 80px rgba(0, 0, 0, 0);
    border-top-left-radius:0px;
    border-top-right-radius:0px;
  }
}
.snip1336 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1336 img {
  max-width: 100%;
  vertical-align: top;
  opacity: 1;
}
.snip1336 figcaption {
  width: 100%;
  background-color: #ffffff; /*#2d3341*/
  padding: 20px 40px;
  position: relative;
}
@media screen and (max-width: 640px) {
  .snip1336 img {
    vertical-align:baseline;
  }
  .snip1336 figcaption {
    padding: 20px 25px;
  }
}

/*
.snip1336 figcaption:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 640px;
  border-color: transparent transparent transparent #ffffff;
}
@media screen and (max-width: 640px) {
  .snip1336 figcaption:before {
    border-width: 40px 0 0 640px;
    border-color: transparent transparent transparent #ffffff;
  }
}
*/
.snip1336 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 30px;
  z-index: 1;
  max-width: 100px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 640px) {
  .snip1336 .profile {
    left: 20px;
    /*bottom: 98%;*/
    max-width: 80px;
  }
}

.snip1336 figcaption a {
  padding: 10px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size:1.0rem;
  margin: 12px 0px 5px;
  display: inline-block;
  opacity: 1;
  width: 100%;
  border-radius:8px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
}
.snip1336 figcaption a:hover {
  opacity: 1;
  border-color: #1e43e3;
  background-color: #1e43e3;
  color: #ffffff;
  font-weight:600;
}

.snip1336 .follow {
  font-weight:600;
  border-color: #2d3341;
  color: #2d3341;
  opacity: 1;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
}

.snip1336 .follow-left {
  width: 47.5%;
  margin-right: 2%;
  font-weight:600;
  border-color: #2d3341;
  color: #2d3341;
  opacity: 1;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
}
.snip1336 .follow-right {
  width: 47.6%;
  margin-left: 2%;
  font-weight:600;
  border-color: #2d3341;
  color: #2d3341;
  opacity: 1;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
}

.snip1336 .follow {
  margin-right: 2%;
  font-weight:600;
  border-color: #25272a;
  background-color:#25272a;
  color: #ffffff;
  opacity: 1;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
}

.snip1336 .info {
  font-weight:500;
  border-color: #093862;
  color: #2d3341;
  opacity: 1;
  padding: 10px 0px;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
}

.snip1336 .full {
  width:100%;
  border-radius:20px;
  font-weight:600;
  font-size:0.95rem;
  border-color: #093862;
  color: #d33414;
  opacity: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.snip1336 h2 {
  margin: 0 0 5px;
  font-weight: 300;
}
.snip1336 h2 span {
  display: block;
  font-size: 0.5em;
  color: #2980b9;
}
.snip1336 p {
  margin: 0 0 10px;
  font-size: 0.8em;
  letter-spacing: 1px;
  opacity: 1;
}


#container{ margin-top:30px; margin-bottom:20px; }

#container .title-wrap{ display:flex; justify-content:space-between; align-items:center; }
#container .title-wrap .title{ color:#2d3341; font-size:1.5rem; font-weight:700; padding-left:20px; position:relative; }
#container .title-wrap .title:before{ content:''; width:5px; height:95%; background:#2d3341; position:absolute; top:7%; left:5px; }

@media screen and (max-width: 640px) {
  #container{ margin-top:10px; margin-bottom:20px; }
  #container .title-wrap{ display:flex; justify-content:space-between; align-items:center; }
  #container .title-wrap .title{ color:#2d3341; font-size:1.3rem; font-weight:700; padding-left:15px; position:relative; }
  #container .title-wrap .title:before{ content:''; width:5px; height:85%; background:#2d3341; position:absolute; top:11%; left:0; }
}

#container .title-wrap .btn-list{ display:flex; height:40px; align-items:center; border-radius:5px; overflow:hidden; }
#container .title-wrap .btn-list a{ font-size:0.9rem;opacity: 1.0;background-color:#2d3341; display:flex; align-items:center; color:#fff; background:url('../img/list_icon1.png') no-repeat center left 10px #2d3341; padding:2px 15px 2px 30px; transition:all .4s cubic-bezier(.47,1.64,.41,.95); }
#container .title-wrap .btn-list:hover a{ background:url('../img/list_icon1.png') no-repeat center left 10px #1833a7; }

#container .tabs-wrap{ display:flex; align-items:flex-end; border-bottom:1px solid #dae0eb; margin:20px 0 0;padding:0px; }
#container .tabs-wrap .tab{ padding:0 25px; max-width:150px; text-align:center; border:1px solid #dae0eb; border-bottom:none; margin-right:5px; }
#container .tabs-wrap .tab a{ 
  display:block; width:100%; padding:9px 0; transition:padding .4s cubic-bezier(.47,1.64,.41,.8); 
  border: 1px solid #ffffff;
  color: #2d3341;  
  font-size:0.9rem;
  margin: 0px;
  opacity: 1;
  border-radius:0px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
}

#container .tabs-wrap .tab:hover a{ 
  font-weight:700; padding:12px 0; 
  background-color: #ffffff;
  color: #2d3341;
  font-weight:700;
}

#container .tabs-wrap .tab.active{ position:relative; }
#container .tabs-wrap .tab.active:before{ content:''; width:100%; height:1px; background:#fff; position:absolute; bottom:-1px; left:0; }
#container .tabs-wrap .tab.active:after{ content:''; width:calc(100% + 2px); height:3px; background:#25272a; position:absolute; top:0; left:-1px; }
#container .tabs-wrap .tab.active a{ font-weight:700; padding:12px 0; }



#timeline{
  width: 100%;
  position: relative;
  list-style: none;
  padding: 0;
}
#timeline a {
  text-decoration: none;
}
#timeline:after {
    content: "";
    width: 1px;
    background: 1px #e6e7e9;
    height: 75%;
    position: absolute;
    top: 3em;
    left: 3em;
    z-index: 0; 
}
#timeline .listing{
    background-color: white;
    border: 1px solid #e6e7e9;
    border-radius: 0.3em;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
    display: table;
    width: 100%;
    transition: all .3s ease-in-out;
}
.listing:hover{
    cursor: pointer;
    box-shadow: 0px 2px 40px 0 rgba(0,0,0,0.1);
}
#timeline .listing img,.job_type{
    display: table-cell;
    vertical-align: middle;
    font-size: 0.9em;
    color: #74718f;
}
#timeline .image_wrapper{
    width: 100px;
}
#timeline .image_wrapper img{
    width: 100px;
    height: 100px;
    display : block;
    border-radius: 50%;
    border-color: #BDBDBD;
    object-fit: cover;
    object-position: center right;
}
.job_title{
  font-weight: 600;
  font-size: 1.0em;
  color: #34324b;
}
.job_info{
  color:#74718f;
  display: block;
  padding:5px 0px;

}
.job_info span{
  margin: 0 .75em;
}
.job_type{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75em;
  position: relative;
  white-space: nowrap;
  padding-top: .6em;
  width: 100px;
}
.date{
  display: inline-block; 
  padding: 1em 0;
  width: 100px;
  background-color: white;
  border: 1px solid #e6e7e9;
  border-radius: 3em;
  font-weight: 700;
  font-size: .75em;
  text-align: center;
  z-index: 2;
  position: relative;
  margin : 1em 0 2em 0;
  color: #34324b;
}

  #timeline .listing{
    display:block;
  }
  #timeline .image_wrapper{
    width: 100%;
    justify-content:space-evenly; align-items:center;text-align:center;
  }
  #timeline .image_wrapper img{
    width: 120px;
    height: 120px;
    display : block;
    margin : 0 auto;
    border-radius: 50%;
  }
  .job_type{
    display: block;
    width: 100%;
    padding: 5px 10px ;
  }
  .job_info span{
    margin: 5px 0px 0px;
    display: block;
    width: 100%;
  }


  /*--- popup ---*/
.layer-popup.fancybox-content{ cursor:auto; }
/*.layer-popup#modal-invi-kakao{ width:100%; max-width:420px; background:#f4f5f8; }*/
.layer-popup h2{ color:#2d3341; font-size:20px; font-weight:600; padding-left:15px; position:relative; }
.layer-popup h2:before{ content:''; width:5px; height:70%; background:#2d3341; position:absolute; top:20%; left:0; }
.layer-popup h4{ margin:20px 0 25px; }
.layer-popup .inputBox .required{ color:#25272a; font-weight:700; }
.layer-popup .inputBox input, textarea{ width:100%; font-size:16px; font-weight:500; border:1px solid #dae0eb; border-radius:3px; padding:10px 15px; margin-top:5px; }
.layer-popup .inputBox input::placeholder{ font-size:14px; }
.layer-popup .btn-wrap{ margin-top:20px; }
.layer-popup .btn-wrap .btn{ display:flex; align-items:center; height:40px; }
.layer-popup .btn-wrap .btn a{ font-weight:600; text-decoration:none; display:flex; justify-content:center; align-items:center; width:100%; height:100%; color:#fff; background:#25272a; border-radius:5px; padding:7px 12px; transition:all .4s cubic-bezier(.47,1.64,.41,.8); }
.layer-popup .btn-wrap .btn a:hover{ background:#1e43e3; }

.layer-popup .select-wrap .nice-select{ border-radius:3px; }
.layer-popup .select-wrap .nice-select{ width:100%; min-width:580px; height:32px; text-align:left; }
.layer-popup .select-wrap .nice-select .list{ border:1px solid #dae0eb; box-shadow:0 0 10px rgba(0,0,0,.1); }
.layer-popup .select-wrap .nice-select .option{ min-height:32px; line-height:32px; }