/*-----------------------------------------------------------------------
1 리스트
------------------------------------------------------------------------*/

.recbook-wrap{padding:var(--gap-140) 0; position:relative; overflow: hidden;}
.recbook-wrap > .width-wrap{position:relative; z-index: 1;}
.search-tlt{text-align: center; color:#000; font-weight: 600; font-size:var(--font-size-xxxxlarge); margin-bottom:15px;}
.recbook-wrap.list-wrap .search-wrap{width:100%; max-width:500px; border-radius: 35px; height: 70px; background-color:#F1F1F1; display:flex; align-items: center; margin:0 auto;}
.recbook-wrap.list-wrap .search-wrap > input{width:calc(100% - 30px); height: 70px; margin-right:10px; background-color:transparent;}


.recbook-wrap.list-wrap .sort-wrap{margin-top:var(--gap-140); display:flex; flex-wrap:wrap; justify-content: space-between; width:512px;}
.recSort{width:144px; height: 45px; background-color:#fff; border:1px solid var(--color-border); color:var(--color-font); font-size:var(--font-size-normal);}


.recbook-wrap.list-wrap .container-wrap{position:relative; display: grid; grid-template-columns: repeat(4, calc(25% - 22px)); grid-gap: 30px; margin-top:var(--gap-140); z-index: 1;}
.recbook-wrap.list-wrap .container-wrap .box-wrap{background-color:var(--color-secondary); padding:var(--gap-30); box-sizing: border-box;}
.recbook-wrap.list-wrap .mark-up{display:flex; flex-wrap:wrap; width:100%; align-items: center;}
.recbook-wrap.list-wrap .mark-up > div{font-size:var(--font-size-small); color:#fff; text-align: center; display:flex; padding:10px 13px; margin-right:10px; border-radius: 25px; line-height: 100%; margin-bottom:var(--gap-20);}
.recbook-wrap.list-wrap .mark-up > div:last-child{margin-right:0;}
.recbook-wrap.list-wrap .mark-up > .task-wrap{background-color:#A0BFB5;}
.recbook-wrap.list-wrap .mark-up > .tendency-wrap{background-color:#A7B0C5;}
.recbook-wrap.list-wrap .image-wrap{width:100%; height: 333px; border:1px solid var(--color-border); overflow: hidden; position:relative;}
.recbook-wrap.list-wrap .image-wrap:after{content:""; display:block; clear:both; padding-top:132%;}
.recbook-wrap.list-wrap .image-wrap > img{object-fit: cover; object-position:center; width:100%; height:100%; transition:all .3s; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.recbook-wrap.list-wrap .image-wrap:hover > img{width:105%; height: 105%;}
.recbook-wrap.list-wrap .age{font-size:var(--font-size-small); color:var(--color-font); margin-top:var(--gap-20);}
.recbook-wrap.list-wrap .tlt{margin-top:10px; color:#000; font-size:var(--font-size-xlarge); font-weight: 500;}
.recbook-wrap.list-wrap .hr{width:100%; height: 1px; background-color:var(--color-border); margin:var(--gap-20) 0;}
.recbook-wrap.list-wrap .cont{color:var(--color-font); font-size:var(--font-size-normal); line-height: 120%;}

.recbook-wrap.list-wrap > .pattern01{position:absolute; top:383px; right:152px; z-index: 0}
.recbook-wrap.list-wrap > .pattern02{position:absolute; top:186px; right:383px; z-index: 0}
.recbook-wrap.list-wrap > .pattern03{position:absolute; top:176px; left:80px; z-index: 0}
.recbook-wrap.list-wrap > .pattern04{position:absolute; top:1063px; left:0px; z-index: 0}
.recbook-wrap.list-wrap > .pattern05{position:absolute; top:1782px; left:34px; z-index: 0}
.recbook-wrap.list-wrap > .pattern06{position:absolute; top:2186px; right:0px; z-index: 0}


/*-----------------------------------------------------------------------
2 읽기
------------------------------------------------------------------------*/

.recbook-wrap.read-wrap > .width-wrap > .tlt {font-size:var(--font-size-xxxxlarge); text-align: center; margin-bottom:var(--gap-10); font-weight: 500;}
.recbook-wrap.read-wrap > .width-wrap > .stlt {font-size:var(--font-size-normal); text-align: center; color:var(--color-font); margin-bottom:var(--gap-80); }
.recbook-wrap.read-wrap .image-wrap{max-width:360px; width:100%; margin:0 auto; position:relative; overflow: hidden; border:1px solid var(--color-border);}
.recbook-wrap.read-wrap .image-wrap:after{content:""; display:block; clear:both; padding-top:128%;}
.recbook-wrap.read-wrap .image-wrap > img{object-fit: cover; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width:100%; height: 100%;}
.recbook-wrap.read-wrap .info-wrap{width:100%; max-width:676px; margin:var(--gap-80) auto var(--gap-140) auto;}
.recbook-wrap.read-wrap .info-wrap > ul{margin-bottom:var(--gap-20); display:flex;}
.recbook-wrap.read-wrap .info-wrap > ul > li.tlt{font-size:var(--font-size-noraml); width:100px;}
.recbook-wrap.read-wrap .info-wrap > ul > li.cont{font-size:var(--font-size-normal); color:var(--color-font);}
.recbook-wrap.read-wrap .info-wrap > ul > li > .task-wrap{background-color:#A0BFB5; font-size:var(--font-size-small); color:#fff; text-align: center; display:flex; padding:10px 13px; margin-right:10px; border-radius: 25px; line-height: 100%;}
.recbook-wrap.read-wrap .info-wrap > ul > li > .tendency-wrap{background-color:#A7B0C5; font-size:var(--font-size-small); color:#fff; text-align: center; display:flex; padding:10px 13px; margin-right:10px; border-radius: 25px; line-height: 100%;}
.recbook-wrap.read-wrap .info-wrap > .intro-wrap{margin-top:var(--gap-40);}
.recbook-wrap.read-wrap .info-wrap > .intro-wrap > .tlt{font-size:var(--font-size-noraml); margin-bottom:var(--gap-20);}
.recbook-wrap.read-wrap .info-wrap > .intro-wrap > .cont{font-size:var(--font-size-noraml); color:var(--color-font);}
.btn-wrap{display:flex; justify-content: center;}


@media only screen and (max-width:1200px){
	.recbook-wrap.list-wrap .container-wrap{grid-template-columns: repeat(4, calc(25% - 15px)); grid-gap: 20px;}
	.recbook-wrap.list-wrap .mark-up > div{margin-bottom:10px;}
	.recbook-wrap.list-wrap .parallax-item{display:none;}
}

@media only screen and (max-width:960px){
	.recbook-wrap.list-wrap .container-wrap{grid-template-columns: repeat(3, calc(33% - 13px)); grid-gap: 20px;}
}

@media only screen and (max-width:640px){
	.recbook-wrap.list-wrap .container-wrap{grid-template-columns: repeat(2, calc(50% - 10px)); grid-gap: 20px;}
}

@media only screen and (max-width:427px){
	.recbook-wrap.list-wrap .image-wrap{height:175px;}
}

@media only screen and (max-width:375px){
	.recbook-wrap.list-wrap .container-wrap{grid-template-columns: repeat(1, 1fr); grid-gap: 20px;}
	.recbook-wrap.list-wrap .image-wrap{height:333px;}
}