@CHARSET "UTF-8";
.layerPopup img {
	margin-bottom: 20px;
}

.layerPopup:before {
	display: block;
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
	z-index: 9000
}

.layerPopup .layerBox {
	z-index: 10000;
	position: fixed;
	left: 85%;
	top: 37%;
	padding: 10px;
	background: #fff;
	border-radius: 6px;
	width: 400px;
	/* height: 400px; */
	border: 1px solid black;
	overflow: hidden;

}
.layerPopup .layerBox.text-popup {
	padding-bottom:60px;
}
.layerPopup .layerBox.text-popup p {
	font-size:15px;
	letter-spacing:-1px;
	line-height:1.5;
}
.layerPopup .layerBox.text-popup p b{
	font-weight:700;
}
.layerPopup .layerBox.text-popup p span{
	background-color:#f0f8ff;
	display:block;
	border-radius:15px;
	padding:16px;
	margin-top:10px;
}
.layerPopup .layerBox.text-popup .wrn{
	font-size:14px;
	color:#e51d1d;
	letter-spacing:-0.8px;
	line-height:1.3;
}
.table_flow table{
	border-top: 1px solid #c9d1d5;
    color: #555;
    border-left: 1px solid #c9d1d5;
    width: 100%;
    margin: 12px 0 15px;
    table-layout: fixed;
}
.table_flow table th{
	font-size: 14px;
    border-bottom: 1px solid #c9d1d5;
    color: #666;
    border-right: 1px solid #c9d1d5;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    word-break: break-all;
    text-indent: 0;
	background-color: #f9f9f9;
	line-height: 1.2;
}
.table_flow table td{
	font-size: 14px;
    border-bottom: 1px solid #c9d1d5;
    color: #666;
    border-right: 1px solid #c9d1d5;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    word-break: break-all;
    text-indent: 0;
	line-height:1.3;
	letter-spacing:-1px;
}
.table_flow table td b{
	font-weight: 700;
}
.layerPopup .confirm-buttons{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
}
.layerPopup .confirm-buttons button{
	width:100%;
	max-width:100px;
}
@media (max-width: 1200px) {
  .layerPopup .layerBox {  	
	position: absolute;
	left: 50%;
	top: 50%;	
	}
}
@media (max-height: 1100px) {
  .layerPopup .layerBox {
  	position: absolute;
  	top: 44%;	
  }
}
@media (max-height: 850px) {
  .layerPopup .layerBox {  	
  	top: 56%;	
  }
}
@media (max-height: 600px) {
  .layerPopup .layerBox {
  	top: 75%;	
  }
}
@media (max-width: 480px) {
  .layerPopup .layerBox.text-popup {
  	min-height:600px;
  }
  .layerPopup .layerBox.text-popup p{
	font-size:14px;
	line-height:1.3;
  }
  .layerPopup .layerBox.text-popup .wrn{
	font-size:13px;
  }
  .table_flow table th{
	font-size:13px;
	word-break:keep-all;
  }
  .table_flow table td{
	font-size:13px;
  }
}
.layerPopup .layerBox::before {
  position: absolute;
  top: -28%;
  right: -10%;
  width: 248px;
  height: 268px;
  background-image: url('/images/ttFriendship/main_t/purple.png');
  background-repeat: no-repeat;
  background-position: 90% top;
  background-size: 100%;
  transform: rotate(90deg);
  opacity: .3;
  content:'';
}
.layerPopup .layerBox::after {
  position: absolute;
  bottom: -35%;
  left: -25%;
  width: 340px;
  height: 292px;
  background-image: url('/images/ttFriendship/main_t/green.png');
  background-repeat: no-repeat;
  background-position: 90% top;
  background-size: 100%;
  transform: rotate(90deg);
  opacity: .5;
  content:'';
}

.layerPopup .layerBox .title {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	font-weight: 600;
	border-bottom: 1px solid #999;
	font-size: 18px;
	line-height: 24px;
}
.layerPopup .layerBox .title .logo {
	position: absolute;
	right: 0;
	width: 140px;
	margin: 0;
}

.layerPopup p {
	font-size: 13px;
	color:#000;
	line-height: 20px;margin-top:0;
}
.layerPopup .layerBox .btnTodayHide {
	font-size: 14px;
	font-weight: 600;
	color: black;
	float: left;
	text-decoration: none;
	width: 150px;
	height: 30px;
	line-height: 30px;
	border: black solid 1px;
	text-align: center;
	text-decoration: none;
}

.layerPopup div {
	position: relative;
	z-index: 1;
	display: inline;
}

.layerPopup form {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	font-size: 11px;
	font-weight: 600;
	height: 50px;
	padding: 10px 20px;
	line-height: 30px;
	background-color: #f6f8fa;
	border-top:1px solid #ddd;
}

.layerPopup #chkbox {
	vertical-align: middle;
}
.layerPopup #close {
	font-size: 13px;
	font-weight: 600;
	height: 30px;
	color: black;
	float: right;
	line-height: 30px;
	text-align: center;
	text-decoration: underline;
}

.layerPopup a {
	text-decoration: none;
	color: black;
	width: 50px;
	height: 40px;
	font-size: 14px;
}
/* KSH 250220 ù��° �˾� �߰� */
.layerPopup .pop_img01{left:100px; width:520px; top:0;background:#c5e5ff;border:8px solid #fff;}
.layerPopup .pop_img01 img{width:100%;}
.layerPopup .btn_more{margin:auto;text-align:center;display:block;width:100%;height:auto;margin-top:-35px;margin-bottom:30px;}
.layerPopup .btn_more img{width:100% !important;}

/* KSH 250220 �ι�° �˾� �߰� */
.layerPopup .pop_img02{width:520px; top:0; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.layerPopup .pop_img02 img{width:460px;}

.layerPopup .pop_img03{
  left: 640px;            /* 100px + 520px + 20px(gap) */
  width: 520px;
  top: 0;

  /* 필요하면 스타일 동일하게 */
  background: #c5e5ff;
  border: 8px solid #fff;
}

.layerPopup .pop_img03 img{
  width: 100%;
}

.layerPopup .pop_img04{
  left: 1180px;         
  width: 520px;
  top: 0;

  background: #c5e5ff;
  border: 8px solid #fff;
}

.layerPopup .pop_img04 img{
  width: 100%;
}

.layerPopup .pop_img05{
  left: 1720px;         
  width: 520px;
  top: 0;
  
  background: #c5e5ff;
  border: 8px solid #fff;
}

.layerPopup .pop_img05 img{
  width: 100%;
}

@media all and (min-width:700px) and (max-width:1100px) {
	.layerPopup .layerBox{top:0 !important;left:0 !important;transform: translate(0, 0);}
	.layerPopup .pop_img01{left:0; width:520px !important; top:10%;}
	.layerPopup .pop_img01 img{width:100% !important;height:auto !important;}

	.layerPopup .pop_img02{left:0; width:520px !important; top:50%;}
	.layerPopup .pop_img02 img{width:100% !important;height:auto !important;}
	
	.layerPopup .pop_img03{left:0; width:520px !important; top:60% !important; height:645px !important;}
  	.layerPopup .pop_img03 img{width:100% !important; height:580px !important;}
	
	.layerPopup .pop_img04{left:0; width:520px !important; top:110% !important; height:645px !important;}
  	.layerPopup .pop_img04 img{width:100% !important; height:580px !important;}
	
	.layerPopup .pop_img05{left:0; width:520px !important; top:160% !important; height:645px !important;}
  	.layerPopup .pop_img05 img{width:100% !important; height:580px !important;}
  	
	.layerPopup .btn_more{width:auto !important;}
	.layerPopup .btn_more img{width:100% !important;}

}

@media all and (max-width:700px) {

	.layerPopup .layerBox{top:0 !important;left:0 !important;transform: translate(0, 0);}
	.layerPopup .pop_img01{left:0; width:100% !important; top:10%;}
	.layerPopup .pop_img01 img{width:100% !important;height:auto !important;}

	.layerPopup .pop_img02{left:0; width:100% !important; top:50%;}
	.layerPopup .pop_img02 img{width:100% !important;height:auto !important;}
	
	.layerPopup .pop_img03{left:0; width:100% !important; top:75% !important; height:645px !important;}
  	.layerPopup .pop_img03 img{width:100% !important; height:580px !important;}
	
	.layerPopup .pop_img04{left:0; width:100% !important; top:140% !important; height:645px !important;}
  	.layerPopup .pop_img04 img{width:100% !important; height:580px !important;}
	
	.layerPopup .pop_img05{left:0; width:100% !important; top:210% !important; height:645px !important;}
  	.layerPopup .pop_img05 img{width:100% !important; height:580px !important;}
  	
	.layerPopup .btn_more{width:auto !important;}
	.layerPopup .btn_more img{width:100% !important;}
}