@charset "utf-8";

@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 100;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-Thin.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 200;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-ExtraLight.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-ExtraLight.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-Light.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-Regular.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-Medium.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-SemiBold.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-Bold.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-ExtraBold.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-ExtraBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Apple SD Gothic Neo';
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url('./Fonts/Apple/AppleSDGothicNeo-Black.woff2') format('woff2'),
		 url('./Fonts/Apple/AppleSDGothicNeo-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Paperlogy';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-1Thin.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-1Thin.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-1Thin.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-1Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-2ExtraLight.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-2ExtraLight.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-2ExtraLight.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-2ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-3Light.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-3Light.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-3Light.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-3Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-4Regular.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-4Regular.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-4Regular.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-4Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-5Medium.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-5Medium.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-5Medium.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-5Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-6SemiBold.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-6SemiBold.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-6SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-7Bold.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-7Bold.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-7Bold.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-7Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-8ExtraBold.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-8ExtraBold.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-8ExtraBold.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-8ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Paperlogy';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('./Fonts/Paperlogy/Paperlogy-9Black.woff2') format('woff2'),
		url('./Fonts/Paperlogy/Paperlogy-9Black.woff') format('woff'),
		url('./Fonts/Paperlogy/Paperlogy-9Black.otf') format('opentype'),
		url('./Fonts/Paperlogy/Paperlogy-9Black.ttf') format('truetype');
}

:root{
	--test-color1:#000;
	--test-color2:#fff;
}

html{font-size: 62.5%;} /* 1rem = 10px 설젇 */
*{box-sizing:border-box;font-family:'Apple SD Gothic Neo';}
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit}
img{border:0;vertical-align:middle}
ol,ul{list-style:none}
address,em,i{font-style:normal}
a{color:inherit;text-decoration:none}
iframe{overflow:hidden;margin:0;border:0;padding:0;vertical-align:middle}
button{background-color: transparent;border:none;}
button:focus, input:focus, select:focus, option:focus, textarea:focus, span:focus, div:focus {outline:none}
label{cursor:pointer}
.max-w{max-width:1250px}
.mg-h-auto{margin-left:auto;margin-right:auto}
.mg-v-auto{margin-top:auto;margin-bottom:auto}
.grid{display:grid}
.vm{vertical-align: middle;}
.None{display:none;}
/* 말줄임표 처리  -webkit-line-clamp: 1; 라인 수 설정*/
.ellipsis{overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical;}

.lg-grid7{grid-template-columns:repeat(7, minmax(0, 1fr));}
.lg-grid4{grid-template-columns:repeat(4, minmax(0, 1fr));}
.lg-grid3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.lg-grid2{grid-template-columns:repeat(2, minmax(0, 1fr));}

.gap10{gap:1rem}
.gap20{gap:2rem}
.gap30{gap:3rem}

.grid_box{border:1px solid #e6e6e6;border-radius:0.8rem;}

/* 아이콘 */
.IcoSp{display:inline-block;background:url('../Img/IconSprite.png') no-repeat;background-size: 87.5rem 24rem;}
.IcoSp.PagingPrevIcon{width:3.8rem;height:3.8rem;background-position:-21.3rem -2.8rem;}
.IcoSp.PagingNextIcon{width:3.8rem;height:3.8rem;background-position:-26.5rem -2.8rem;}
.IcoSp.Star5{width:7rem;height:1.3rem;background-position:-69.6rem -5.6rem;}
.IcoSp.SearchIcon{width:2rem;height:2rem;background-position:-31.5rem -4.4rem;}
.IcoSp.BigSearchIcon{width:3.7rem;height:3.7rem;background-position:-34.4rem -3.1rem;}
.IcoSp.BigStar{width:4.6rem;height:4.6rem;background-position:-63.8rem -2.4rem;}
.IcoSp.SellerInfoIcon{width:2.2rem;height:2.2rem;background-position:-83.1rem -4.8rem;}
.IcoSp.CalendarIcon{width:2.1rem;height:2.1rem;background-position:-80rem -4.9rem;}
.IcoSp.LeftIcon{width:4rem;height:4rem;background-position:-45.2rem -10.2rem;}
.IcoSp.RightIcon{width:4rem;height:4rem;background-position:-49.6rem -10.2rem;}
.IcoSp.DocumentIcon{width:1.3rem;height:1.6rem;background-position:-41.4rem -12.4rem;}
.IcoSp.RockIcon{width:1.5rem;height:1.5rem;background-position:-65.4rem -12.5rem;}
.IcoSp.NewIcon{width:1rem;height:1rem;background-position:-43.2rem -12.7rem;}
.IcoSp.NextIcon{width:2.5rem;height:2.5rem;background-position:-10.2rem -16.7rem;}
.IcoSp.PrevIcon{width:2.5rem;height:2.5rem;background-position:-7.1rem -16.7rem;}
.IcoSp.SearchIcon{width:1.8rem;height:1.9rem;background-position:-61rem -12.1rem;}
.IcoSp.LinkIcon{width:1.2rem;height:1.2rem;background-position:-63.7rem -12.9rem;}
.IcoSp.EstIcon{width:2.1rem;height:2.2rem;background-position:-38.8rem -11.9rem;}
.IcoSp.ColorLinkIcon{width:1.4rem;height:1.4rem;background-position:-63.7rem -11rem;}
.IcoSp.ColorArrowIcon{width:0.9rem;height:0.5rem;background-position:-15.7rem -16.7rem;}
.IcoSp.NewTab{width: 1.6rem;height: 1.4rem;background-position: -70.8rem -12.7rem;}
.IcoSp.MiniStar{width: 1.7rem;height: 1.7rem;background-position: -67.3rem -12.4rem;}
.IcoSp.BlueStar{width: 1.8rem;height: 2rem;background-position: -13.2rem -16.7rem;}
.IcoSp.BigBlueStar{width: 5.4rem;height: 5.8rem;background-position: -16.8rem -16.7rem;}
.IcoSp.Check{width: 1.2rem;height: 1rem;background-position: -69.3rem -13.1rem;}
.IcoSp.SellerTopCard1{width: 4.4rem;height: 4.4rem;background-position: -72.7rem -9.7rem;}
.IcoSp.SellerTopCard2{width: 4.6rem;height: 4.4rem;background-position: -77.9rem -9.7rem;}
.IcoSp.SellerTopCard3{width: 6.2rem;height: 6.2rem;background-position: -0.4rem -15.8rem;}

/* 페이징 */
.PagingWrap{display:table;padding:20px 0;margin:0 auto}
.PagingWrap > li{width:2.8rem;height: 2.8rem;line-height: 3rem;text-align:center;float:left;margin:0 0.5rem;cursor:pointer;font-size:1.5rem;font-weight:400;color:#131313;padding:0;}
.PagingWrap > .PgBtnNow{background-color: #f6f6f6;}
.PagingWrap > .PgBtnPrev{padding:0;margin-right:3rem}
.PagingWrap > .PgBtnNext{padding:0;margin-left:3rem}
.PgBtnPrev > .PagingPrevIcon, .PgBtnNext > .PagingNextIcon{display:inline-block;width:7px;height:11px;background:url('../Img/PagingArrow.png')}
.PgBtnNext > .PagingNextIcon{transform: rotate(180deg);}

.ArrowIcon{position:relative;display: inline-block;width:1rem;height:1rem;margin-left:0.3rem;}
.ArrowIcon::before{content: ''; display: inline-block; position: absolute; top:50%;left:40%;transform: translate(-50%,-50%); width:8px;height:1px; background-color: #525252;}
.ArrowIcon::after{content: ''; display: inline-block; position: absolute; top:50%;left:50%;transform: translate(-50%,-50%) rotate(45deg); width:6px;height:6px;border-top:1px solid #525252;border-right:1px solid #525252;}

/* Head */
header{height:9.5rem;line-height:9.5rem;position:sticky;z-index:10;top:0;background-color:color-mix(in oklab, #fff 80%, transparent);backdrop-filter:blur(8px);box-shadow:0 0 20px -10px #ccc;}

/* Tail */
#TailWrap{background-color:#171818;color:#d5d5d5;}
.TailInner {display: flex;padding: 5rem 0;flex-direction: column;align-items: center;gap:2.5rem}
.TailInfoBox{font-size: 1.6rem;font-weight: 300;}
.TailInfoBox.Flex{display:flex; align-items:center; gap:2rem;font-weight: 300;}
#TailWrap .CompanyInfoBtn{width:18.5rem;border:1px solid #3d3d3d;color: #d5d5d5;padding:0.5rem 1.5rem;border-radius: 0;cursor:pointer;transition: all 0.3s ease;position: relative;}
#TailWrap .CompanyInfoBtn.Act {border: 1px solid #007bff;color: #007bff;}
#TailWrap .CompanyInfoBtn .TailInfoArrow{display:inline-block; width:1.7rem;height: 1.7rem;position: absolute;right: 7%;}
#TailWrap .CompanyInfoBtn .TailInfoArrow::after{content: ''; display:block;width:0.8rem;height:0.8rem;position:absolute;right:0;top:20%;transform: rotate(135deg);border-top:1px solid #7d7d7d;border-right:1px solid #7d7d7d;}
#TailWrap .CompanyInfoBtn.Act .TailInfoArrow::after{top:50%; transform: rotate(-45deg);border-top:1px solid #007bff;border-right:1px solid #007bff;}
#CompanyInfoContent{border-top: 1px solid #171717;padding:1.5rem;}
#CompanyInfo, #CompanyPolicy{font-size: 1.6rem;}
.CompanyPolicyTtitle{font-weight:500;margin-bottom:1rem;font-size: 1.9rem}
#CompanyPolicy > p{margin-bottom:0.7rem}
.Reserved{text-align:center}

.DeWrap * {transition: all 0.3s ease;}
.box_title{font-size:2.6rem;font-weight:500;color:#1b1b1b;display:inline-block;}
.title_wrap{display:flex;align-items: center;justify-content: space-between;flex-wrap:wrap;margin-bottom:1.5rem;}
.title_wrap > div{font-size:2rem;color:#1f1f1f;cursor:pointer;display: flex;align-items: center;gap: 6px;}
.title_wrap > div > img{width: 1rem;height: 1.7rem;}

@media(width <= 1250px){
	html { font-size: 58%; }
	header, #MainWrap > section, footer{padding-left:2rem;padding-right:2rem;}
}
@media(width <= 1024px){
	html { font-size: 56.25%; }
	header{height:8.5rem;line-height:8.5rem;}
	.HeadWrap .HeadNavi{gap:4.5rem;}
	.title_wrap{margin: 0 1rem 1rem 1rem;}

	.md-grid4{grid-template-columns:repeat(4, 1fr)}
	.md-grid3{grid-template-columns:repeat(3, 1fr)}
	.md-grid2{grid-template-columns:repeat(2, 1fr)}
	.md-grid1{grid-template-columns:repeat(1, 1fr)}
}
@media(width <= 768px){
	header{height:7rem;line-height:7rem;text-align: center;}
	.HeadWrap .HeadNavi{gap:3.5rem;}
	#TailWrap .TailInner{flex-direction: column;gap:2rem;}
	#TailWrap #CompanyInfo{margin-bottom:1.5rem;}
	#TailWrap #CompanyInfo .bar{display:none;}
	#TailWrap #CompanyInfo .wrap{display:block;}
	#TailWrap .CompanyInfoBtn{text-align:center}
	#TailWrap .TailInfoBox {margin-top:1.5rem;float:left;}
	.TailInfoWrap{text-align: center;}
	#TailWrap .TailInfoBox.Flex{width: 100%;justify-content: center;gap: 1rem;}
	.PagingWrap > .PgBtnPrev{margin-right:0}
	.PagingWrap > .PgBtnNext{margin-left:0}
	.PagingWrap > li {padding:0 1rem;}

	.sm-grid4{grid-template-columns:repeat(4, 1fr)}
	.sm-grid3{grid-template-columns:repeat(3, 1fr)}
	.sm-grid2{grid-template-columns:repeat(2, 1fr)}
	.sm-grid1{grid-template-columns:repeat(1, 1fr)}
}

@media(width <= 480px){
	#MainWrap > section{padding-left:1rem;padding-right:1rem;}
	header{height:6rem;line-height:6rem;text-align: center;}
	#TailWrap .TailInner{padding: 3rem 0; gap:0;}
	#TailWrap .TailInfoBox > span, #TailWrap .CompanyInfoBtn {font-size:1.5rem;}
	#TailWrap .TailInfoBox.Flex{flex-wrap: wrap;}
	
	.PagingWrap{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 2rem 4.5rem;margin: 0 auto;position: relative;}
	.PagingWrap > li {padding:0 0.8rem;}
	.PagingWrap > .PgBtnPrev{height:3.5rem;margin-right:0;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
	.PagingWrap > .PgBtnNext{height:3.5rem;margin-left:0;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
}

/* head.php */
.HeadWrap{display:flex;justify-content: space-between;align-items: center;}
.HeadLogoBox{display:flex;align-items: center;gap:1rem}
.HeadLogoTitle{font-family: 'Paperlogy';font-size:1.5rem;color:#515151;font-weight:bold}
.HeadNavi {display: flex;gap: 4rem;color: #131313;font-size: 1.9rem;font-weight: bold;}
.HeadEstMenuBox{display:flex;align-items: baseline;gap: 0.2rem;}
#HeadMediaMenu{display:none;}
.HeadNavi > ul > li > a{cursor: pointer;}
.HeadMediaNaviMenu {width: 25px;height: 18px;display: flex;flex-direction: column;justify-content: space-between;cursor: pointer;z-index: 1000;}
.HeadMediaNaviMenu span {display: block;height: 2px;background-color: #333;transition: transform 0.4s ease, opacity 0.4s ease;transform-origin: center;}
.HeadMediaNaviMenu.Active span:nth-child(1) {transform: translateY(0px) rotate(360deg);opacity: 0;}
.HeadMediaNaviMenu.Active span:nth-child(2) {transform: translateY(0px) rotate(135deg);}
.HeadMediaNaviMenu.Active span:nth-child(3) {transform: translateY(-8px) rotate(225deg);}

@media(width <=  980px){
	#HeadMediaMenu{display:block;}
	.HeadNavi{position: fixed;top: 8.5rem;right: 0;width: 100%;height: calc(100dvh - 7rem);flex-direction: column;background-color: white;border-top: 1px solid #ccc;padding: 10px 20px;align-items: flex-start;justify-content: normal;overflow-y: auto;box-sizing: border-box;z-index: 999;}
	#HeadNaviBox{display:none;position:fixed;right:0}
	#HeadNaviBox.Show{display:flex}
	#HeadNaviBox.Show .HeadNavi{display:flex;gap:10px;align-items: center}
	.HeadLogoTitle{font-size:1.2rem;margin-top: 0.5rem;}
}

@media(width <= 768px){
	.HeadNavi{top: 7rem;}
}
@media(width <=  480px){
	.HeadNavi{top: 6rem;height: calc(100dvh - 6rem);}
}