@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@import url("/ASP/resources/css/common/common.css");

body{
	line-height: normal !important;
	font-family: 'Noto Sans KR', sans-serif;
}

div,span,p{
	box-sizing: border-box;
}

#popaAgreeLayer div,
#popaAgreeLayer span,
#popaAgreeLayer p{
	box-sizing: content-box;
}

#all{
	width:700px;
	margin:0 auto;
	position:relative;
	border:1px solid #ddd;
	border-radius:10px;
}

.content{
	width:95%;
	margin:50px auto 20px auto;	
}

.minHeightDiv{
	min-height: 600px;
}

.title{
	font-size: 20px;
	color:#000;
	font-weight: bold;
	text-align: center;
	margin-bottom:12px;
}

.title.main{
	margin-bottom:0;
}

.subTitle{
	font-size: 16px;
	color:#000;
	font-weight: bold;
	margin-bottom:10px;
}

.subTitle.long{
	margin-bottom:40px;
}

.subTitle.center{
	text-align: center;
}

.gradationTitle{
	font-weight: 700;
	font-size: 30px;
    background: linear-gradient(to right, #ff0099, #6600cc);
    color: transparent;
    -webkit-background-clip: text;
    text-align: center;
    margin-bottom: 60px;
}

.gradationTitle.sub{
	 margin-bottom: 20px;
}

.gradationTitle.ing{
	 margin-bottom: 150px;
}

.compantListImgArea{
	width:100%;
	border:1px solid #ddd;
	border-radius: 10px;
	margin-bottom: 20px;
	text-align: center;
}

.compantListImgArea p{
	width:24%;
	margin:0 auto 10px auto;
	padding:0;
	display: inline-block;
	text-align: center;
}

.compantListImgArea p:first-child{
	margin:10px auto;
}

.compantListImgArea p img{
	width:70%;
}

.issuedBtnDiv{
	text-align:center;
	margin-bottom: 120px;
}

.popaCouponInfo{
	margin-bottom: 30px;
}

.popaCouponInfo .box{
	display:inline-block;
	width:260px;
	min-height:175px;
	border:1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	vertical-align: top;
}

.popaCouponInfo .box:nth-child(odd){
	margin-right: 10px;
}

.popaCouponInfo .box .stepText{
	width:50px;
	font-size: 14px;
	font-weight:bold;
	color:#fa263e;
	padding-bottom:5px;
	border-bottom: 1px solid #fa263e;
	margin: 0 auto 10px 0;
	text-align: left;
}

.popaCouponInfo .box .img{
	text-align:center;
	margin-bottom: 10px;
}

.popaCouponInfo .box .text{
	text-align:center;
	font-size:15px;
	color:#666;
	font-weight: bold;
}

.infoText{
	font-size: 16px;
	color:#000;
	margin-bottom: 20px;
}

#inquiryok .content{
	width:580px;
}

#inquiryok .content.second{
	margin: 30px auto 20px auto;
}

.contentsNewTable  img{
	width:50%;
}

.totalPointDiv{
	width:100%;
	background: linear-gradient(to right, #fc079a, #6a07cb);
	padding:20px 0;
}

.totalPointDivTb{
	display: table;
	width:580px;
	margin:0 auto;
}

.totalPointDivTr{
	display: table-row;
}

.totalPointDivTd{
	display: table-cell;
	width:31%;
	text-align: center;
}

.totalPointDivTd.icon{
	width:7%;
	color:#fff;
	font-size: 18px;
    font-weight: bold;
}

.totalPointDivTd.icon span{
	display: inline-block;
	width:10px;
	height:10px;
	border:2px solid #fff;
	border-left:none;
	border-bottom:none;
	transform:rotate(45deg);	
}

.totalPointDivTd.btn{
	text-align: right;
}

.m_issudBtnDiv{
	display:none;	
}

.totalPointText{
	color:#fff;
	font-size: 14px;
	font-weight:bold;
	width:580px;
	margin:0 auto 20px auto;
	padding-left: 10px;
}

.graySpan{
	display:inline-block;
	width:170px;
	height:40px;
	background: #fff;
	font-size: 16px;
	color:#333;
	text-align: center;
	padding-top: 9px;
	font-weight: bold;
	border:none;
	border-radius:5px;
}

.graySpan span{
	font-size: 16px;
	color:#333;
	text-align: center;
	background: transparent;
	font-weight: bold;
}

.couponTitle{
	font-size: 16px;
	color:#000;
	font-weight: bold;
	background: #f4f4f4;
	height:50px !important;
}

.couponNumber{
	font-size: 20px;
	color:#9933cc;
	font-weight: bold;
	margin: 30px 0 20px 0;
	text-align: center;
}

.couponTotalPointDiv,
.couponTotalPointDiv span{
	font-size: 16px;
	color:#999;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

.resultTable{
	width:60%;
	margin:20px auto;
	border:none !important;
}

.resultTable td,
.resultTable td span{
	font-size: 16px;
	color:#666;
	border:none !important;
}

/* button */
.redBtn{
	width:180px;
	background: #fb364e;
	color:#fff;
	font-weight: bold;
	
	font-size: 16px;
	padding:15px 0;
	text-align: center;
	border:none;
	border-radius: 25px;
}

.grayBtn{
	width:180px;
	background: #ededed;
	color:#666;
	font-weight: bold;
	font-size: 16px;
	padding:15px 0;
	text-align: center;
	border:none;
	border-radius: 25px;
}

.smallGrayBtn{
	min-width:100px;
	background: #fff;
	color:#333;
	font-weight: bold;
	font-size: 14px;
	padding:5.5px 10px;
	text-align: center;
	border:1px solid #333;
	border-radius: 5px;
}

.couponCancelBtn{
	min-width: 80px;
    font-size: 13px;
    padding: 3px 10px;
    font-weight: normal;
    background: #333;
    color:#fff;
    text-align: center;
	border:none;
	border-radius: 15px;
}

.issueBtn{
	width:150px;
	background: #000;
	color:#fff;
	font-weight: bold;
	font-size: 15px;
	padding:8px 0;
	text-align: center;
	border:none;
	border-radius: 25px;
}

.layer{
	width:640px; /* 700 - 60 */ 
/* 	min-height:540px; */
	padding:30px;
	background:#fff;
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	display:none;
}

.layerTitle{
	font-size:21px;
	color:#444267;
	font-weight:bold;
}

.layerGrayBox{
	border-top:1px solid #999999;
	background:#f8f8f8;
	padding:20px;
}

.layerGrayBox .hyphenAreaTr{
	height:30px;
}

.pointTradeTitle{
	padding:10px 0;
	text-align: center;
	font-size: 20px;
	background:#0066cb;
	color:#fff;
	font-weight: bold;
	margin-bottom: 10px;
}

.pointTradeLayerCon{
	height:500px;
	overflow-y:auto;	
	margin-bottom: 20px;
}

.contentsTableDiv{
	display:table;
	width:100%;
	border-top:1px solid #ccc;
}

.contentsTableTr{
	display:table-row;
}

.contentsTableTh{
	display:table-cell;
	width:25%;
	color:#666;
	text-align:center;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:6.5px 0;
	vertical-align: middle;
	background:#f5f5f5;	
}

.contentsTableTh.blueTh{
	background:#d9e5ff;
}

.contentsTableTd{
	display:table-cell;
	width:25%;
	color:#666;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:6.5px 0;
	vertical-align: middle;
	text-align:center;
}

.contentsTableTh:last-child,.contentsTableTd:last-child{
	border-right:none;
}

.contentsTableTd.borderRightNone,.contentsTableTd.borderRightNone{
	border-right:none;
}

.contentsTableTd.borderBottomNone,.contentsTableTd.borderBottomNone{
	border-bottom:none;
}

#layerUnclear{
	clear:both;
	display:none;
	width:100%;
	height:200px;
	background: #000;
	opacity:0.7;
	position: absolute;
    top: 0;
    left:0;
    z-index: 2;
}

.footer{
	font-family: 'Noto Sans KR', sans-serif;
	background: #f5f5f5;
	min-height:100px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
.footer .footerWebText{
	width:auto;
	padding:15px;	
	color:#666;
	font-size: 15px;
}

.footer .footerLinkText{
	color:#666 !important;
}

.footer .yellowFont{
	margin-top:10px;
	display:inline-block;
	color:#000;
	font-weight: bold;
}

.fixedDiv{
	width:700px;
}

/* mobile 공통 */
@media (max-width: 711px){
	#all{
		width:100%;
	}

	.popaCouponInfo .box{
		width:47%;
		height:175px;
	}
	
	#inquiryok .content{
		width:95%;
	}
	
	.totalPointDivTb{
		width:95%;
	}
	
	.totalPointText{
		width:95%;
	}

	.totalPointDivTb{
		margin:0 auto 20px auto;
	}

	.totalPointDivTd{
		width:45%;
	}
	
	.totalPointDivTd.icon{
		width:10%;
	}

	.totalPointDivTd.btn{
		display:none;
	}
	
	.m_issudBtnDiv{
		display:block;	
	}
	
	.graySpan{
		width:90%;
	}
}
/* mobile 세로 */
@media (max-width: 711px) and (orientation: portrait) {
	.compantListImgArea p img{
		width:85%;
	}
	
	.gradationTitle{
		font-size: 24px;
	}
	
	.minHeightDiv{
		min-height: 500px;
	}
	
	.title{
		font-size: 14px;
	}

	.popaCouponInfo .box .text{
		font-size: 13px;
	}
	
	.redBtn{
		width:45%;
	}
	
	.grayBtn{
		width:45%;
	}

	.layer{
	    width: 95%;
	    padding: 15px;
	}
	
	.layerTitle{
		font-size:16px;
	}
	
	#popaAgreeLayer{
		width:90vw;
		height:90wh;
		top:8%;
	}
	
	#popaAgreeConLayer{
		width:90vw;
		height:90wh;
		top:8%;
	}
	
	
	.contentsTableDiv,.contentsTableTr{
		display:block;
		border-right:none;
		width:100% !important;
	}
	
	.contentsTableTh,.contentsTableTd{
		display:inline-block;
		width:100%;
		border-right:none;
	}
	
	.contentsTableTh,.contentsTableTd{
		display:block;
		width:100%;
		border-right:none;
	}
	
	#companyListDiv .contentsTableTh,
	#companyListDiv .contentsTableTd{
		display:inline-block;
		width:50%;
		margin-right: -4px;
	}
	
	#companyListDiv .contentsTableTh:first-child{
		border-right:1px solid #ccc;
	}
	
	#companyListDiv .contentsTableTd:nth-child(odd){
		border-right:1px solid #ccc;
	}
	
	#companyListDiv .contentsTableTh.mobileNone{
		display: none;	
	}
	
	.resultTable{
		width:90%;
	}
	
	.subTitle.card{
		letter-spacing: -1px;
	}
	
	.fixedDiv{
		width:100%;
	}
	
	.redBtn, .grayBtn {
	    padding: 10px 0;
	}
	
}

/* mobile 가로 */
@media (max-width: 711px) and (orientation: landscape) {
}

/* mobile, tablet 공통 */
@media (max-width:1180px){
	
}

/* tablet 공통 */
@media all and (min-width:712px) and (max-width:1180px){
}

/* tablet 세로 */
@media all and (min-width:712px) and (max-width:1180px) and (orientation: portrait) {
	
}

/* tablet 가로 */
@media all and (min-width:712px) and (max-width:1180px) and (orientation: landscape) {
}