@charset "utf-8";

@media screen and (max-width:1280px){
}
@media screen and (min-width:1281px){
	#header{position:fixed !important; background-color:transparent !important}
	#header.scrolled{background-color:#fff !important}
}

@media screen and (min-width:1281px){
	div#contents{margin-top: 0}
}
@media screen and (min-width:1281px) and (max-width:1919px){
}

div.side-fix{position: fixed; z-index: 1}
li.side-fix-ul-li button{display: flex; justify-content: center; align-items: center; border-radius: 500px; color: #fff}
li.side-fix-ul-li button.company{background-color: var(--color-primary); transition:.3s}
li.side-fix-ul-li button.company:hover{background-color: #4600d6}
li.side-fix-ul-li button.company i.icon{display: flex}
li.side-fix-ul-li button.company i.icon svg{fill:#fff}
@media screen and (max-width:1919px){
	div.side-fix{bottom: 30px; right: 0; left: 0; padding: 0 3vw}
	ul.side-fix-ul{display:flex; background-color: #fff; box-shadow: 0 0 6px rgb(36 24 64 / 30%); border-radius: 500px; padding: 5px; margin: 0 -2.5px}
	li.side-fix-ul-li{width: calc(100% / 2); padding: 0 2.5px}
	li.side-fix-ul-li button{width: 100%; padding: 15px 10px; font-size: 15px}
	li.side-fix-ul-li button.company i.icon{width: 8px; height: 8px; margin-left:10px}
	li.side-fix-ul-li button.registration{color: var(--color-secondary); transition:.3s}
	li.side-fix-ul-li button.registration:hover{background-color: #12003a}
}
@media screen and (min-width:1920px){
	div.side-fix{right: calc(100% - 1700px); transform: translate(50%, 0); bottom: 5.62rem}
	ul.side-fix-ul{width:100%; display: flex; flex-direction: column; align-items: flex-end}
	li.side-fix-ul-li button{font-size: 1.13rem; width: 13.75rem; height: 4.375rem}
	li.side-fix-ul-li button.company i.icon{width: 0.75rem; height: 0.75rem; margin-left:0.62rem}
	li.side-fix-ul-li button.registration{margin-top: 0.94rem; background-color: var(--color-secondary); transition:.3s}
	li.side-fix-ul-li button.registration:hover{background-color: #12003a}
}

li.main-banner{display: flex; align-items: center; background: url(../image/main/mainSlide01.jpg) no-repeat 50% 0; background-size: cover; height: 885px}
div.main-banner-text{font-family: 'GmarketSans'}
span.main-banner-text-pre{display: block; font-weight: 700}
h2.main-banner-title{word-break:keep-all; line-height: 125%}
span.main-banner-title-color{display: inline-block; color: var(--color-primary); position: relative}
span.main-banner-title-color:before{content: ''; position: absolute; background-color: rgb(84 0 255 / 15%); width: 100%}
span.main-banner-count-pre{display: block; font-weight: 700; color: #5E5A64}
div.main-banner-count-num{font-weight: 500; font-family: 'GmarketSans'; line-height: 110%; color:#00C4BD}
@media screen and (max-width:499px){
	li.main-banner{height: 310px}
	span.main-banner-text-pre{font-size: 14px; margin-bottom: 13px}
	h2.main-banner-title{font-size: 28px}
	span.main-banner-title-color:before{height: 9px; bottom: 6px}
	span.main-banner-count-pre{font-size: 12px; margin-bottom: 10px}
	div.main-banner-count-num{font-size: 38px}
}
@media screen and (min-width:429px) and (max-width:899px){
	li.main-banner{height: 400px}
	span.main-banner-text-pre{font-size: 1.73rem; margin-bottom: 0.66rem}
	h2.main-banner-title{font-size: 2.4286rem}
	span.main-banner-title-color:before{height: 9px; bottom: 8px}
	span.main-banner-count-pre{font-size: 1.2rem; margin-bottom: 0.66rem}
	div.main-banner-count-num{font-size: 3.6rem}
}
@media screen and (min-width:500px) and (max-width:1280px){
	li.main-banner{height: 400px}
	span.main-banner-text-pre{font-size: 1.73rem; margin-bottom: 0.66rem}
	h2.main-banner-title{font-size: 2.4rem; white-space: pre-line}
	span.main-banner-title-color:before{height: 11px; bottom: 7px}
	span.main-banner-count-pre{font-size: 1.2rem; margin-bottom: 0.66rem}
	div.main-banner-count-num{font-size: 3.6rem}
}
@media screen and (max-width:1280px){
	div.main-banner-text{margin-bottom: 1.33rem}
}
@media screen and (min-width:1281px){
	li.main-banner{height: 55.31rem}
	div.main-banner-box{margin-top: 6.25rem}
	div.main-banner-text{margin-bottom: 2.81rem}
	span.main-banner-text-pre{font-size: 1.87rem; margin-bottom: 0.94rem}
	h2.main-banner-title{white-space: pre-line; font-size: 4rem}
	span.main-banner-title-color:before{height: 1.56rem; bottom: 0.62rem}
	span.main-banner-count-pre{font-size: 1.62rem; margin-bottom: 0.94rem}
	div.main-banner-count-num{font-size: 5.625rem}
}


h2.main-title{position: relative}
h2.main-title:before{content: ''; display: inline-block; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); border-radius: 50%; background-color: var(--color-primary)}
@media screen and (max-width:899px){
	section.sect{margin: 3.33rem 0}
	h2.main-title{font-size: 22px}
}
@media screen and (min-width:900px) and (max-width:1280px){
	section.sect{margin: 6.67rem 0}
	h2.main-title{font-size: 1.73rem}
}
@media screen and (max-width:1280px){
	h2.main-title{padding-left: 16px; margin-bottom: 1.33rem}
	h2.main-title:before{width: 6px; height: 6px}
}
@media screen and (min-width:1281px){
	section.sect{margin: 7.5rem 0}
	h2.main-title{font-size: 30px; padding-left: 23px; margin-bottom: 50px}
	h2.main-title:before{width: 8px; height: 8px}
}

/* 메인카테고리 (main-cate) */
ul.main-cate{display: flex; flex-wrap: wrap}
a.main-cate-link{display:flex; flex-direction:column; align-items:center}
div.main-cate-icon{display: flex; justify-content: center; align-items: center; border-radius: 1.25rem}
i.main-cate-icon{display: flex; justify-content: center}
p.main-cate-title{text-align: center; word-break:keep-all; font-weight: 700}
@media screen and (max-width:428px){
	ul.main-cate{margin: -15px}
	li.main-cate{padding: 15px; width: calc(100% / 4 - 30px)}
	p.main-cate-title{font-size: 14px}
}
@media screen and (min-width:429px) and (max-width:899px){
	ul.main-cate{margin: -1.67rem}
	li.main-cate{padding: 1.67rem; width: calc(100% / 4 - 3.34rem)}
	p.main-cate-title{font-size: 1.07rem}
}
@media screen and (max-width:899px){
	section.main-cate div.main-title{display: none}
}
@media screen and (min-width:900px) and (max-width:1280px){
	ul.main-cate{margin: -0.67rem}
	li.main-cate{padding: 0.67rem; width: calc(100% / 9 - 1.34rem)}
	div.main-cate-icon{aspect-ratio: 1 / 1; width: 60px; background: var(--color-background-primary)}
	p.main-cate-title{font-size: 1.07rem}
}
@media screen and (max-width:1280px){
	div.main-cate-icon{margin: 0 auto}
	i.main-cate-icon{width: 2rem; height: 1.73rem}
	p.main-cate-title{margin-top: 0.67rem}
}
@media screen and (min-width:1281px){
	ul.main-cate{margin: 0 -1.87rem}
	li.main-cate{padding: 0 1.87rem; width: calc(100% / 9 - 3.75rem)}
	div.main-cate-icon{aspect-ratio: 1 / 1; background: var(--color-background-primary); width: 5rem}
	i.main-cate-icon{width: 2.06rem; height: 1.81rem}
	p.main-cate-title{font-size: 1.13rem; margin-top: 0.62rem}
}
/* 메인카테고리 (main-cate) */

/* cont2 */
ul.main-review{display: flex; flex-wrap: wrap}
div.main-review-box{display: block; border: 1px solid var(--color-border); border-radius: 1.87rem; overflow: hidden}
div.main-review-img{position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center}
div.main-review-img > img{display: block; width: 100%}
div.main-review-img-top{position: absolute; display: flex; justify-content: flex-start; align-items: center}
div.main-review-profile{border:2px solid #fff; background-color: var(--color-background-primary); border-radius: 50%; overflow:hidden; display: flex; justify-content: center; align-items: flex-end}
div.main-review-profile svg{fill: #B3AEBC}
div.main-review-profile img{display: block; width: 100%; height: 100%; object-fit:cover}

div.main-review-user{display:flex; flex-direction:column; color:#fff}

div.main-review-img-bottom{position: absolute; display: flex; align-items: center; color: #fff}
div.main-review-img-bottom i.icon svg{fill: #fff}
div.main-review-box div.text{display: block}
div.main-review-box div.text div.star-wrap{display: flex; align-items: center}
div.main-review-box div.text div.star-wrap div.star svg{fill: var(--color-icon-fill-star)}
div.main-review-box div.text p.text{line-height: 150%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all}
div.main-review-box div.text div.mark-wrap{display: flex}
div.main-review-box div.text div.mark-wrap button svg{fill: #D7D6DB; transition:.3s}
div.main-review-box div.text div.mark-wrap button:hover svg{fill: var(--color-primary)}
div.main-review-box div.text div.mark-wrap button:focus svg{fill: var(--color-primary)}
div.main-review-box div.text div.mark-wrap button.heart{display: flex}
div.main-review-box div.text div.mark-wrap button.bookmark{display: flex}

@media screen and (max-width:428px){
	li.main-review{width: calc(100% - 1.34rem)}
}
@media screen and (min-width:429px) and (max-width:1280px){
	li.main-review{width: calc(100% / 2 - 1.34rem)}
}
@media screen and (max-width:1280px){
	ul.main-review{margin: -0.67rem}
	li.main-review{padding: 0.67rem}
	div.main-review-img{height: 12rem}
	div.main-review-img-top{top: 1.33rem; left: 1.33rem; right: 1.33rem}
	div.main-review-profile{width: 2rem; height: 2rem}
	div.main-review-profile svg{width: 1.53rem}
	div.main-review-img-top div.count{padding: 0.33rem 1rem}
	div.main-review-img-bottom{font-size: 15px; bottom: 1rem; left: 1.33rem; right: 1.33rem}
	div.main-review-img-bottom i.icon{width: 0.67rem; margin-right: 8px}
	div.main-review-box div.text{padding: 1.67rem 1.33rem}
	div.main-review-box div.text div.star-wrap{margin: 0 -1px 0.67rem}
	div.main-review-box div.text div.star-wrap div.star{width: 0.8rem; padding: 0 1px}
	div.main-review-box div.text p.text{font-size:15px}
	div.main-review-box div.text div.mark-wrap{margin:1rem 0 0}
	div.main-review-box div.text div.mark-wrap button.heart{margin-right:1rem}
	div.main-review-box div.text div.mark-wrap button.heart svg{width: 1.3333rem}
	div.main-review-box div.text div.mark-wrap button.bookmark svg{width: 1.07rem}

}
@media screen and (min-width:1281px){
	ul.main-review{margin: -0.94rem}
	li.main-review{width: calc(100% / 3 - 1.88rem); padding: 0.94rem}
	div.main-review-img{height: 13.125rem}
	div.main-review-img-top{top: 1.25rem; left: 1.25rem; right: 1.25rem}
	div.main-review-profile{width: 2.5rem; height: 2.5rem}
	div.main-review-profile svg{width: 1.87rem}
	div.main-review-user{padding:0 0 0 1rem}
	div.main-review-img-bottom{bottom: 1.25rem; left: 1.25rem; right: 1.25rem}
	div.main-review-img-bottom i.icon{width: 0.75rem; margin-right: 0.62rem}
	div.main-review-box div.text{padding: 1.25rem 1.87rem 1.87rem}
	div.main-review-box div.text div.star-wrap{margin: 0 -1px 0.62rem}
	div.main-review-box div.text div.star-wrap div.star{width: 0.75rem; padding: 0 1px}
	div.main-review-box div.text div.mark-wrap{margin:1.25rem 0 0}
	div.main-review-box div.text div.mark-wrap button.heart{margin-right:1.25rem}
	div.main-review-box div.text div.mark-wrap button.heart svg{width: 1.5rem}
	div.main-review-box div.text div.mark-wrap button.bookmark svg{width: 1.25rem}

}