@charset "utf-8";

/* =============
   Alerts
============= */
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
  .alert .alert-link {
    font-weight: 600; }

.alert-success {
  color: #6fd088;
  background-color: #e2f6e7; }
  .alert-success .alert-link {
    color: #49c368; }
  .alert-success hr {
    border-top-color: #49c368; }

.alert-info {
  color: #0097a7;
  background-color: #c1f9ff; }
  .alert-info .alert-link {
    color: #006974; }
  .alert-info hr {
    border-top-color: #006974; }

.alert-warning {
  color: #ffbb44;
  background-color: #fff6e7; }
  .alert-warning .alert-link {
    color: #ffa811; }
  .alert-warning hr {
    border-top-color: #ffa811; }

.alert-danger {
  color: #f32f53;
  background-color: #fef0f2; }
  .alert-danger .alert-link {
    color: #e20d34; }
  .alert-danger hr {
    border-top-color: #e20d34; }

.text-error{
	color:#ff0000;}
	
.text-white {
  color: #ffffff !important; }

.text-danger {
  color: #f32f53 !important; }

.text-muted {
  color: #707070 !important; }

.text-primary {
  color: #0f9cf3 !important; }

.text-warning {
  color: #ffbb44 !important; }

.text-success {
  color: #6fd088 !important; }

.text-info {
  color: #0097a7 !important; }

.text-dark {
  color: #0a1832 !important; }


/*게시판 새글,비밀글,답글*/
table .new {background:url(../images/asset/new.gif) center no-repeat;display:inline-block;width:20px;/* height:34px; */text-indent:-9999px;margin-left:5px;}
table .reply {background:url(../images/asset/reply.gif) center /* 11px */ no-repeat;display:inline-block;width:20px;/* height:34px; */text-indent:-9999px;margin-left:5px;}
table .lock {background:url(../images/asset/lock.gif) center /* 11px */ no-repeat;display:inline-block;width:20px;/* height:34px; */text-indent:-9999px;margin-left:5px;}


/* mediaelement */
/* mediaelement */
/* mediaelement */
.mejs__overlay-button{
	background:url('/design/common/js/mediaelement/mejs-controls.png') no-repeat;
	background-position: 0px -39px;
}
.mejs__button > button{background: transparent url('/design/common/js/mediaelement/mejs-controls.png');}
.mejs__overlay:hover > .mejs__overlay-button {}
.mejs__play > button{background-position: 0px 120px;}
.mejs__pause > button{background-position: -20px 120px;}
.mejs__mute > button{background-position: -60px 120px;}
.mejs__unmute > button{background-position: -40px 120px;}
.mejs__fullscreen-button > button{background-position: -80px 120px;}
.mejs__unfullscreen > button{background-position: -100px 120px;}

.gap80 {
    margin: 80px;
}

/* ■■■■ 만족도 ■■■■  */
.satisfy_area .top {background:#8691a1; padding:20px; box-sizing:border-box; margin:0px 0 10px;}
.satisfy_area .top:after {clear:both; content:""; display:block;}
.satisfy_area .top > span {display:inline-block; color:#fff; height:30px; line-height:30px;}
.satisfy_area .top > span.t1 {background:url('../images/asset/ico_footer_depart.png') no-repeat left center; padding-left:40px; margin-right:30px;}
.satisfy_area .top > span.t2 {background:url('../images/asset/ico_footer_phone.png') no-repeat left center; padding-left:40px;}
.satisfy_area .top > span.t3 {float:right;}
.satisfy_area .bot {border:1px solid #e0e0e0; padding:10px 20px;}
.satisfy_area .bot .sat {padding-bottom:10px; background:url('../images/asset/ico_footer_sati.png') no-repeat left 8px; padding-left:40px; border-bottom:1px solid #e0e0e0;}
.satisfy_area .bot .sat strong {display:inline-block; margin-right:20px; vertical-align: middle;}
.satisfy_area .bot .sat span {display: inline-block; vertical-align: middle; width:100px; padding-top:5px;}
.satisfy_area .bot .sat span > * {vertical-align:middle;}
.satisfy_area .bot .sat span input[type=radio] {opacity:0; width:1px;}
.satisfy_area .bot .sat span input[type=radio]:checked + label { background-position: 0 -40px; } 
.satisfy_area .bot .sat span label { display: inline-block; height:30px; line-height:30px; vertical-align: top; background: url('../images/asset/ico_footer_sati_check.png') no-repeat; background-position: 0 -30px;} 
.satisfy_area .bot .sat span label:hover { cursor: pointer; } 
.satisfy_area .bot .sat span input[type=radio] + label { padding-left: 38px; } 
.satisfy_area .bot .sat span input[type=radio]:checked + label { background-position: 0 0; }
.satisfy_area .bot .sat span input[type=radio]:focus + label {outline:2px solid #b2d5ff;}

.satisfy_area .bot .opi {padding-top:10px; background:url('../images/asset/ico_footer_opinion.png') no-repeat left 19px; padding-left:40px; }
.satisfy_area .bot .opi:after {content:""; clear:both; display:block;}
.satisfy_area .bot .opi .opi1 {float:left; width:100px; padding-top:10px;}
.satisfy_area .bot .opi .opi2 {float:left; width:calc(100% - 230px); }
.satisfy_area .bot .opi .opi3 {float:right; width:100px;}
.satisfy_area .bot .opi .opi1 strong { }
.satisfy_area .bot .opi .opi2 textarea {display:block; width:100%; border:1px solid #e0e0e0; background:#f8f8f8; padding:10px; border-radius:7px; height:22px;}
.satisfy_area .bot .opi .opi3 .opi_btn {display:inline-block; background:#494949; width:90%; padding:10px; border-radius:7px; height:20px; color:#fff; text-align:center; padding-top:14px;}


/* layer popup */
.layer-popup{padding:10px 10px 15px;background:#fff;border:1px solid #000;box-sizing:border-box;}
.layer-popup .layer-popup-image{display:block;}
.layer-popup .layer-link-wrap{display:inline-block;margin-top:15px;}
.layer-popup .layer-link-wrap .layer-link{display:block;padding:10px 35px;background:#2a4d9e;color:#fff;}
.layer-popup .not-today{float:right;margin-top:24px;}
.layer-popup .layer-close img{width: 20px;}

/*댓글*/
.comment-list-table{margin-top: 60px;border-top: 1px solid #dcdcdc;}
.comment-list-table > li{color: #353535;font-size: 16px;padding: 20px 30px;border-bottom: 1px solid #dcdcdc;}
.comment-list-table > li.bg{background: #f5f5f5;}
.comment-list-table > li > ul.bg-enter{padding-left: 20px;background: url(../images/asset/sub03_bg12.gif) no-repeat left top;}
.comment-list-table > li > ul.bg-enter > li{margin-top: 10px;}
.comment-list-table > li > ul.bg-enter > li:first-child{margin-top: 0;}
.comment-list-table > li > ul.bg-enter > li > .and{color: #e5e5e5;padding: 0 10px;}
.write-review{position: relative;padding: 0 100px 0 80px;}
.write-review > a{position: absolute;bottom: 0;right: 0;}
.write-review > label{position: absolute;left: 0;top: 50%;font-weight: bold;line-height: 20px;margin-top: -10px;}
.write-review > textarea{width: 100%;height: 93px;background: #fff;border: 1px solid #dcdcdc;box-sizing: border-box;}
.color-red{color: #ff0000;}
.orange-tab{overflow: hidden;}
.orange-tab > ul{margin: -10px 0 0 -10px;}
.orange-tab > ul > li{float: left;display: table;color: #666;font-size: 18px;line-height: 18px;width: calc(100% / 7 - 11px);height: 62px;margin: 10px 0 0 10px;border: 2px solid #dcdcdc;box-sizing: border-box;}
.orange-tab > ul > li.on{color: #f0a40e;border: 2px solid #f0a615;}
.orange-tab > ul > li > a{display: table-cell;vertical-align: middle;text-align: center;padding: 5px;}
.btnA{padding: 6px 8px;margin: 4px 7px;border-radius: 3px;display: inline-block;color:#ffffff;background: #dd4f4f;position:relative;}
.btnA:before{content: '';width:15px;height:5px;background:url(../images/asset/btnA_bg03.gif) no-repeat left top ;position:absolute;bottom:-5px;left:0;right:0;margin:0 auto;}
.btnA span.heartWhite{background: url(../images/asset/btnA_bg02.gif) no-repeat left 1px;padding-left: 18px;font-size: 15px;}
.btnA span.heartYellow{background: url(../images/asset/btnA_bg01.gif) no-repeat left 1px;padding-left: 18px;font-size: 15px;}
.btnA.fr{float:right;}

/*blind*/
.blind {
    position: absolute;
    overflow: hidden;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    line-height: 0 !important;
    border: 0;
    clip: rect(0 0 0 0);
    font-size: 0;
}


/* 230227 board, index, join, join-form, main  */

/* board */
.cnt.search-bar{
	display: flex;
	align-items: center;
}
/* board */

/* chart */
.xe-cnt-chart-wrap{
  position: relative;
  width: 100%;
  max-width: 1074px;
  margin: 30px auto;
}
.xe-cnt-chart-bg{
  background-size: cover;
  background-position: center;
  width: 100%;
  max-width: 822px;
  margin: 0 auto;
  aspect-ratio: 1/0.99;
  z-index: 1;
  background-image: url('/snuh/design/theme/demo/pub/images/health-care/graph/chart-bg-line.png')
}
.xe-cnt-chart{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.xe-cnt-chart-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 210px;
  z-index: 2;
}
.xe-cnt-chart-wrap .xe-chart-box{
  padding: 20px 8px;
  width: 100%;
  max-width: 258px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 8px;
}
.xe-cnt-chart-wrap .xe-chart-box.chart-original{
  background: #FFF7F2;
  border: 3px solid rgba(215, 201, 193, 0.1);
}
.xe-cnt-chart-wrap .xe-chart-box.chart-purple{
  background: #F9EBFE ;
  border: 3px solid rgba(192, 169, 200, 0.1) ;
}
.xe-cnt-chart-wrap .xe-chart-box.chart-blue{
  background: #F5FAFF;
  border: 3px solid rgba(160, 173, 187, 0.1);
}
.xe-cnt-chart-wrap .xe-chart-box.chart-green{
  background: #E9F9E2;
  border: 3px solid rgba(203, 213, 199, 0.1);
}
.xe-cnt-chart-wrap .xe-chart-box.chart-orange{
  background: #FFF2D1;
  border: 3px solid #F5E9C9;
}
.xe-cnt-chart-wrap .xe-chart-box-double{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 75px;
}
.xe-cnt-chart-bottom{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 80px;
  z-index: 2;
}
.xe-cnt-chart-wrap .xe-chart-box-wrap{
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50px;
}
.xe-cnt-chart-wrap .xe-chart-box-wrap:last-child{
  padding-top: 70px;
}
.xe-cnt-chart-wrap .xe-chart-box p{
  font-weight: 900;
  font-size: 22px;
  text-align: center;
  color: #1A1A1A;
}

.xe-cnt-chart-wrap .xe-chart-box span{
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  color: #383838;  
}
.xe-cnt-chart-desc{
  width: 100%;
  max-width: 1074px;
  margin: 70px auto;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
  background: #E9F1F8;
  border: 3px solid rgba(130, 147, 164, 0.1);
  border-radius: 5px;
  z-index: 3;
}
.xe-cnt-chart-desc p{
  font-weight: 500;
  font-size: 20px;
  line-height: 29px;
  color: #383838;
}
/* chart */
/* join-form */
.table.join {
  table-layout: fixed;
}

.table.join th,
.table.join td {
  word-wrap: break-word;
}

.table.join input[type=text],
.table.join input[type=password] {
  max-width: 100%;
}
/* join-form */
@media screen and (max-width: 768px) {
  .sm-hidden{
    display: none !important;
  }
  /* board */
	.cnt.search-bar{
		flex-direction: column;
    align-items: flex-start;
	}
	.cnt.search-bar .info{
		width: auto !important;
    column-gap : 12px;
	}
	.cnt.search-bar .info li{
		white-space: nowrap;
	}
  .cnt.search-bar .search-wrap{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
  }
  .search-bar .search-wrap .select{
    border: 1px solid #cdcdcd;
    border-radius: 0.5333333333vw;
    height: 52px  !important;
    width: 100%;
    max-width: 25.3333333333vw;
  }
  .search-bar .search-wrap .select .selected{
    height: 100%;
  }
  .search-bar .search-wrap form{
    width: 100% !important;
      height: 52px  !important;
  }
  .search-bar .search-wrap form input{
      width: 100% !important;
      height: 52px  !important;
      padding-right: 25px;
  }
  .search-bar .search-wrap form button{
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  /* board */

  /* chart */
    .xe-cnt-chart-wrap{
      position: relative;
      width: 100%;
      max-width: 375px;
      margin: 80px auto 20px;
    }
    .xe-cnt-chart-bg{
      background-size: cover;
      background-position: center;
      width: 80%;
      max-width: 238px;
      margin: 0 auto;
      aspect-ratio: 1/1.936;
      z-index: 1;
      background-image: url('/snuh/design/theme/demo/pub/images/health-care/graph/chart-bg-line-m.png')
    }
    .xe-cnt-chart-top{
      height: 120px;
      margin-top: -50px;
    }
    .xe-cnt-chart-wrap .xe-chart-box{
      padding: 10px 4px;
      width: 100%;
      max-width: 106px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      row-gap: 3px;
    }
    .xe-cnt-chart-wrap .xe-chart-box p{
      font-weight: 700;
      font-size: 13px;
      line-height: 19px;
      text-align: center;
      color: #2A2A2A;
    }
    
    .xe-cnt-chart-wrap .xe-chart-box span{
      font-weight: 500;
      font-size: 12px;
      line-height: 17px;
      text-align: center;
      color: #383838;
    }
    .xe-cnt-chart-wrap .xe-chart-box-double{
      row-gap: 30px;
    }
    .xe-cnt-chart-wrap .xe-chart-box-wrap{
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .xe-cnt-chart-wrap .xe-chart-box-wrap:last-child{
      padding-top: 0px;
    }
    .xe-cnt-chart-desc{
      width: 100%;
      max-width: 1074px;
      margin: 60px auto;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      row-gap: 10px;
      background: #E9F1F8;
      border: 3px solid rgba(130, 147, 164, 0.1);
      border-radius: 5px;
      z-index: 3;
    }
    .xe-cnt-chart-desc p{
      font-size: 15px;
      line-height: 22px;
    }
  /* chart */
  /* join-form */
  .join .btn.sm {
    height: 5.6vw;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    min-width: 16.2666666667vw;
  }

  #joinForm .table.join #emailId, #joinForm .table.join #emailDomain, .table.join #domainSelect {
    width: calc(100% / 2 - 5vw);
  }

  .join label {
    display: inline-block;
    word-break: break-all;
  }

  .join label span {
    display: block;
  }

  .join label + label {
    margin-left: 0;
  }

  #joinForm .table.join .sub-text {
    font-size: 3.133333vw;
  }
  /* join-form */
  /* login-form */
  section.login {
    flex-direction: column;
  }

  section.login > ul {
    width: 100%;
  }

  section.login > ul > li input {
    width: 100% !important;
  }

  section.login .btn_login {
    width: 100%;
    height: 11.2vw !important;
    margin-top: 3vw;
    font-size: 3.53333vw;
  }

  /* login-form */

  /* main */
  #wrap main.no-breadcrumb {
    margin-top: 33vw;
  }
  /* main */

  /* join1 */
  .flex-list .border {
      height: auto !important;
      border: 1px solid #cdcdcd !important;
      margin-right: 10px;
          min-height: auto !important;
  }
  .flex-list .border :last-child{
    margin-right: 0px;
  }
  /* join1 */

  /* join2 */
  .terms-wrap .float-btn {
    position: relative !important;
    justify-content: flex-end;
    width: 100% !important;
  }

  .terms-wrap .agree-txt {
    display: block;
    margin-right: 0 !important;
  }

  .terms-wrap .temrs label {
    display: inline-block;
  }
  /* join2 */
}

@media (min-width: 769px) {
  .pc-hidden{
    display: none !important;
  }
}
/* 230227 board, index, join, join-form, main  */