@charset "utf-8";
.alertify.alertify-hidden{
  margin-top:-50px;
}
.alertify{
  margin-top:0px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .blocker {
  	position: fixed;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	overflow: auto;
  	z-index: 9999;
  	padding: 36px 20px 60px;
  	box-sizing: border-box;
  	background-image: url(blocker_opa50.png);
  	background-repeat: repeat;
  	background: rgba(20, 23, 26, 0.75);
  	text-align: center;
  }
  .blocker:before {
  	content: "";
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
  	margin-right: -0.05em;
  }
  .blocker.behind {
  	background-color: transparent;
  }
  .modal {
  	display: none;
  	vertical-align: middle;
  	position: relative;
  	z-index: 2;
  	width: auto;
  	min-width: 520px;
  	max-width: 720px;
    max-height: unset;
  	box-sizing: border-box;
  	background: #fff;
  	padding: 0;
  	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.1);
  	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.1);
  	-o-box-shadow: 0 0 20px rgba(0,0,0,0.1);
  	-ms-box-shadow: 0 0 20px rgba(0,0,0,0.1);
  	box-shadow: 0 0 20px rgba(0,0,0,0.1);
  	text-align: left;
  	overflow: visible !important;
    margin:auto;

    bottom: auto!important;
  }
  .modal a.close-modal {
  	width: 36px; height: 36px;
  	background-color: #F1F3F5;
  	border-radius: 8px;
  	text-indent: -9999px;
  	overflow: hidden;
  	position: absolute;
  	top: 26px; right: 26px;
  	-webkit-transition: all 0.3s ease;
  	transition: all 0.3s ease;
  }
  .modal a.close-modal:hover{
  	background-color: #dee2e6;

  }
  .modal a.close-modal:before {
  	content: '';
  	width: 12px; height: 12px;
  	display: inline-block;
  	background-size: contain;
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 12 12'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D.cls-2%7Bclip-path:url(%23clip-path);%7D.cls-3%7Bfill:%23495057;%7D%3C/style%3E%3CclipPath id='clip-path' transform='translate(-322.79 -411.29)'%3E%3Crect class='cls-1' x='310.79' y='399.29' width='36' height='36'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='cls-2'%3E%3Cpath class='cls-3' d='M329.85,417.29l4.72-4.72a.75.75,0,0,0,0-1.06.74.74,0,0,0-1.06,0l-4.72,4.72-4.72-4.72a.75.75,0,1,0-1.06,1.06l4.72,4.72L323,422a.74.74,0,0,0,0,1.06.77.77,0,0,0,.53.22.79.79,0,0,0,.53-.22l4.72-4.72,4.72,4.72a.75.75,0,0,0,.53.22.79.79,0,0,0,.53-.22.75.75,0,0,0,0-1.06Z' transform='translate(-322.79 -411.29)'/%3E%3C/g%3E%3C/svg%3E");
  	position: absolute;
  	top: 50%; left: 50%;
  	-webkit-transform: translateY(-50%) translateX(-50%);
  	transform: translateY(-50%) translateX(-50%);
  }
  .modal-spinner {
  	display: none;
  	position: fixed;
  	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	padding: 12px 16px;
  	border-radius: 5px;
  	background-color: #111;
  	height: 20px;
  }
  .modal-spinner > div {
  	border-radius: 100px;
  	background-color: #fff;
  	height: 20px;
  	width: 2px;
  	margin: 0 1px;
  	display: inline-block;
  	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  	animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  .modal-spinner .rect2 {
  	-webkit-animation-delay: -1.1s;
  	animation-delay: -1.1s;
  }
  .modal-spinner .rect3 {
  	-webkit-animation-delay: -1.0s;
  	animation-delay: -1.0s;
  }
  .modal-spinner .rect4 {
  	-webkit-animation-delay: -0.9s;
  	animation-delay: -0.9s;
  }
  @-webkit-keyframes sk-stretchdelay{
  	0%,
  	100%,
  	40%{-webkit-transform:scaleY(0.5)}
  	20%{-webkit-transform:scaleY(1.0)}
  }
  @keyframes sk-stretchdelay{
  	0%,
  	100%,
  	40%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}
  	20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}
  }
  .modal {
      position: relative;
      background: #fff;
      border-radius: 10px;
  }
  .modal .modal_head {
      padding: 30px 30px 20px 30px;
  }
  .modal .modal_cont {
      padding: 0px 30px 30px;
  }
  .modal .modal_head > h2 {
      font-size: 24px;
      font-weight: 700;
  }
  .modal .modal_foot {
      padding: 0 30px 30px;
      border-radius: 0 0 10px 10px;
  }
  .modal .modal_foot .btn_wrap {
      display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
  }
  .modal .modal_foot .btn_wrap > * {
      margin-left: 12px;
  }
  .modal .modal_foot .btn_wrap .btn_md {
      min-width: 120px;
      padding: 0 30px;
  }

  .modal .modal_bottom{
    border-radius:0 0 10px 10px;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .blocker {
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-pack: justify;
  	-ms-flex-pack: justify;
  	justify-content: space-between;
  	-ms-flex-align: end;
  	-webkit-box-align: end;
  	align-items: flex-end;

  	position: fixed;
  	top: 0; right: 0; bottom: 0; left: 0;
  	overflow: hidden;
  	z-index: 9990;
  	background: rgba(20, 23, 26, 0.55);
  }
  .blocker.behind {
  	background-color: transparent;
  }
  .modal {
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;

  	width: 100%;
  	height:auto;
  	max-height: 90%;
  	margin: 0;
  	position: fixed;
  	bottom: 0;
  	z-index: 9999;
  	background: #fff;
  	border-radius: 16px 16px 0 0;
  	display: none;
  }
  .modal a.close-modal {
  	width: 32px; height: 32px;
  	line-height: 32px;
  	background-color: #F1F3F5;
  	border-radius: 50%;
  	text-align: center;
  	display: inline-block;
  	text-indent: -9999px;
  	overflow: hidden;
  	position: absolute;
  	top: 16px; right: 16px;
  	z-index: 100;
  }
  .modal a.close-modal:before {
  	content: '';
  	width: 10px;
  	height: 10px;
  	display: inline-block;
  	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m6.06 5 3.72-3.72c.29-.29.29-.77 0-1.06s-.77-.29-1.06 0L5 3.94 1.28.22C.99-.07.51-.07.22.22s-.29.77 0 1.06L3.94 5 .22 8.72c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22L5 6.06l3.72 3.72c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06L6.06 5Z' fill='%23343a40'/%3E%3C/svg%3E") no-repeat center center/contain;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform: translateY(-50%) translateX(-50%);
  	transform: translateY(-50%) translateX(-50%);
  }
  .modal-spinner {
  	display: none;
  	position: fixed;
  	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	padding: 12px 16px;
  	border-radius: 5px;
  	background-color: #111;
  	height: 20px;
  }
  .modal-spinner > div {
  	border-radius: 100px;
  	background-color: #fff;
  	height: 20px;
  	width: 2px;
  	margin: 0 1px;
  	display: inline-block;
  	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  	animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  .modal-spinner .rect2 {
  	-webkit-animation-delay: -1.1s;
  	animation-delay: -1.1s;
  }
  .modal-spinner .rect3 {
  	-webkit-animation-delay: -1.0s;
  	animation-delay: -1.0s;
  }
  .modal-spinner .rect4 {
  	-webkit-animation-delay: -0.9s;
  	animation-delay: -0.9s;
  }
  @-webkit-keyframes sk-stretchdelay{
  	0%,
  	100%,
  	40%{-webkit-transform:scaleY(0.5)}
  	20%{-webkit-transform:scaleY(1.0)}
  }
  @keyframes sk-stretchdelay{
  	0%,
  	100%,
  	40%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}
  	20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}
  }

  .modal {
      background: #fff;
      color: #212529;
      border-radius: 16px 16px 0 0;
      width:480px;
      max-width:100%;
  }
  .modal .modal_head {
      width: 100%;
      height: 62px;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      padding: 0 24px;
      background: #fff;
      border-radius: 16px 16px 0 0;
      z-index: 15;
  }
  .modal .modal_head > h2 {
      font-size: 18px;
      letter-spacing: -0.025em;
      font-weight: 700;
      margin-top: 2px;
  }
  .modal .modal_cont {
      -ms-flex-positive: 1;
      -webkit-box-flex: 1;
      flex-grow: 1;
      position: relative;
      padding: 0 24px 40px;
      overflow: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
  }
  .modal .modal_foot {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      position: relative;
      background: #fff;
      padding: 0 24px 10px;

      /* iPhone 하단 영역 대응 */
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
  }
  .modal .modal_foot:before {
      content: '';
      width: 100%; height: 40px;
      background: url(../img/bg_gr_bottom.png) repeat-x 0 0/auto 100% transparent;
      position: absolute;
      top: -40px; left: 0;
      z-index: 10;
  }
  .modal .modal_foot .btn_wrap {
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-align: center;
      -webkit-box-align: center;
      align-items: center;
      padding: 2px 20px 16px;
  }
  .modal .modal_foot .btn_wrap > * {
      width: 100%;
      margin: 0 4px;
  }

  /* ————————————————————————————————————————————————————
   *
   * 공유하기
   *
  /* ———————————————————————————————————————————————————— */
  #lp_share .modal_cont{
      padding-bottom:8px;

      /* iPhone 하단 영역 대응 */
      padding-bottom:calc(8px + constant(safe-area-inset-bottom));
      padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
}

#lp_share .modal_cont{padding:0 30px 30px}
#lp_share .share_btn_wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-top:10px}
#lp_share .share_btn_wrap a,
#lp_share .share_btn_wrap button{width:22%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;-webkit-box-align:center;align-items:center;}
#lp_share .share_btn_wrap a>i,
#lp_share .share_btn_wrap button>i{width:50px;height:50px;background-repeat:no-repeat;background-position:center center;background-size:contain}
#lp_share .share_btn_wrap .btn_share_link>i{background-image:url("../img/share_link.svg")}
#lp_share .share_btn_wrap .btn_share_kakao>i{background-image:url("../img/share_kakao.svg")}
#lp_share .share_btn_wrap .btn_share_facebook>i{background-image:url("../img/share_facebook.svg")}
#lp_share .share_btn_wrap .btn_share_naver>i{background-image:url("../img/share_naver.svg")}
#lp_share .share_btn_wrap a>p,
#lp_share .share_btn_wrap button>p{color:#495057;font-size:13px;margin-top:8px}