@charset "UTF-8";
/* 믹스인 추가 이종원 */
html { font-size: 62.5%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
/* reset */
html, body, div, span, button, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
  figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}

table caption {
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  width: 0;
  height: 0;
  margin: -1px;
  border: 0;
  padding: 0;
}

table caption th, table caption td {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  padding: 0 !important;
}

button {
  background: transparent;
  cursor: pointer;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

a, em { text-decoration: none; font-style: normal;}


/*PC*/
body { font-size: 1.4rem;}
main { padding: 3rem; display: block;}
header {
  height: 7.3rem;
  display: flex; position: relative;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e1e1e1;
  box-shadow:  0px 2px 4px #f0f0f0; 
}
header h1 { font-size: 2.4rem; font-weight: 400;}

.search-box { border: 1px solid #c2c2c2; background: #f7f7f7; padding: 2.4rem 0;  font-size: 1.4rem;}
.search-box .search-box-wrap { width: calc(100% - 6rem); padding: 0 3rem; display: flex; flex: 1; align-items: center; justify-content: center;}
.search-box label { width: 10rem; text-align: center; }
.search-box .input-search-wrap { width: calc(100% - 10rem);  border: 1px solid #c2c2c2; background: #fff;  display: flex; flex: 1; align-items: center; }
.search-box .input-search-wrap  input { width: calc(100% - 3.4rem); height: 3.6rem; padding: 0 0  0 1.5rem; border: 0;}
.search-box .search-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 3.4rem;
  height: 3.6rem;
}
.search-box .search-icon-circle {
  width: .8rem;
  height: .8rem;
  border: 2px solid #676767;
  border-radius: 50%;
}
.search-box .search-icon-line {
  width: .6rem;
  border: 1px solid #676767;
  border-radius: 1px;
  transform: translate3d(8px, -1px, 0) rotate(41deg);
  background-color: #676767;
}

 .search-icon:hover .search-icon-circle{ border: 2px solid #a9a8a8;}
 .search-icon:hover .search-icon-line { border: 1px solid #a9a8a8; background-color: #a9a8a8;}

.count-resulte { border-bottom: 2px solid #444; padding-bottom: 1.5rem; margin-top: 3rem;}


.resulte-list dl {  border-bottom: 1px solid #cdcdcd; }
.resulte-list dl dd {  padding: 2.2rem 2rem;}
.resulte-list dl dd a { display: flex; justify-content: space-between; align-items: center; }
.resulte-list dl dd a span { width: calc(100% - 2.5rem); color: #111;}
.resulte-list dl dd a i { width: 2rem; height: 2rem; position: relative; display: inline-block; }
.resulte-list dl dd a i::after {
  position: absolute;
  right:  calc(50% - 0.7rem); top: calc(50% - 0.9rem);
  content: '';
  width: 12px; height: 12px;
  border-top: 2px solid #444;
  border-right: 2px solid #444;
  animation: dropUp .5s ease-in-out forwards;
}

@keyframes dropDown{
  0%{transform: rotate(135deg);}
  100%{transform: rotate(316deg);}
}
@keyframes dropUp{
  0%{transform: rotate(316deg);}
  100%{transform: rotate(135deg);}
}
@keyframes dropDownBox {
  0%{padding: 0 2rem;}
  100%{padding: 2.2rem 2rem;}
}
@keyframes dropUpBox {
  0%{padding: 2.2rem 2rem;}
  100%{padding: 0 2rem;}
}

.resulte-list dl dt { overflow: hidden; height: 0; 
  border-top: 0px solid #cdcdcd; animation: dropUpBox .2s ease-in-out forwards; } 
.resulte-list dl.open dd a i::after{
  top: calc(50% - 0.3rem);
  animation: dropDown .3s ease-in-out forwards;
 }

 .resulte-list dl.open dt { 
  border-top: 1px solid #cdcdcd;
  animation: dropDownBox .5s ease-in-out forwards;
   height: auto;
}


.list-more-wrap .btn-list-more {
  width: 100%;
  height: 4rem;
  border-bottom: 1px solid #cbcbcb;
  text-align: center;
}

.list-more-wrap .btn-list-more span {
  color: #1e75d6;
}


.resulte-null { 
  width: 100%; min-height: 400px;
  display: flex; justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 2.8rem;
}
.resulte-null::before {
  content: '';
  width: 6.8rem; height: 6.8rem;
  background: url(../images/icon/icon_01.png) no-repeat 50% 50%;
  background-size: contain;
  display: block;
}
.resulte-null div {
  padding-top: 2rem;
}

/* EMS 연결 페이지 */
.ems-wrap{display: flex;justify-content: center; min-height: 100vh;background:#e0e7ee;text-align: center;}
.ems-wrap > div{position: relative;width: 100%;height: 100%;max-width: 640px;}
.ems-wrap .logo{position: absolute;top: 50px;left: 80px;}
.ems-wrap .cont{width:100%;max-width: 553px;margin-top: 30%;}
/*MOBILE*/
@media screen and (max-width: 640px) {

  main { padding: 0rem;}
  header { 
    box-shadow: 0 0 0; 
    border-bottom: 0; 
   
  }
  header h1 { font-weight: 700;}
  header .close {width:3rem;height: 3rem; position: absolute; right: 1rem; top: 35%;}
  header .close:before,   header .close:after {
    position: absolute;
    margin: -1rem 0 0 0;
    content:' ';
    height: 20px;width: 2px;
    background-color: #000;
  }
  header .close:before {transform: rotate(45deg);}
  header .close:after {transform: rotate(-45deg);}
  .search-box { border: solid #c2c2c2; border-width: 1px 0 1px 0; padding: 1.3rem 0 !important;}
  .search-box-wrap { width: calc(100% - 2.6rem) !important; padding: 0 1.3rem !important;}
  .search-box-wrap  label { display: none; }
  .search-box .input-search-wrap { border-radius: .4rem; background: #fff;}
  .search-box .input-search-wrap input { width: calc(100% - 2.4rem); background: transparent;}
  .search-box .search-icon { width: 4.2rem; border-left: 1px solid #c2c2c2;}


  .count-resulte { margin: 2rem 1.3rem 0; padding-bottom: 1rem;}


  .resulte-list { margin: 0 1.3rem;}
  .resulte-list dl dd { padding:2rem 0; font-weight: 700;}
  .resulte-list dl.open dt { background:#fafafc;}
  .btn-list-more span i {width:1.5rem;height: 1.2rem; position: relative; display: inline-block;}
  .btn-list-more span i:before,   .btn-list-more span i:after {
    position: absolute;
    bottom: 0;
    content:' ';
    height: 1.1rem;width: 0.1rem;
    background-color: #000;
  }
  .btn-list-more span i:before {left: 0.8rem;  transform: rotate(-36deg); }
  .btn-list-more span i:after {right: 0; transform: rotate(36deg);}
  .btn-list-more span { color: #666 !important;}
  
  .resulte-null::before { 
    width: 4rem; height: 4rem;
    background: url(../images/icon/icon_02.png) no-repeat 50% 50%;
    background-size: contain;
  }
  .resulte-null div {
    font-size: 1.4rem;
    padding-top: 1rem;
  }

  /* EMS 연결 페이지 */
  .ems-wrap .logo{width: 7.5rem;top: 2.5rem;left: 1.4rem;}
  .ems-wrap .cont{width: 100%;}
}