@charset "utf-8";

body{overflow-y:auto; background:#fff; zoom:1; font-size:12px; color:#222}

/* 메인페이지(main) */
body#main div.bg{position:fixed; top:0; right:0; bottom:0; left:0}
#mainCanvas{position:relative; width:100%; height:100%}

body#main{font-family:'Noto Sans KR'; word-break:keep-all}
body#main div.mainCtn{position:relative; overflow:hidden}
body#main h2.mainTitle{position:relative; z-index:2; color:#222; text-align: center;}
body#main h2.mainTitle span{display:block}
body#main h2.mainTitle strong{font-weight:500}
body#main a.more{position:relative; display:inline-block; color:var(--color-secondary); width: 100%; text-align:center;}
body#main a.more:hover{-webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-name:bounce; animation-name:bounce}

body#main div.mainCtn img.circle{position:absolute}
body#main div.mainCtn h2.mainTitle strong{color: var(--color-primary); border-bottom: 2px solid}
body#main div.illust{position:absolute}
body#main div.mainProject{display:block; background-color:#fff}


@media screen and (max-width:1280px){
	body#main div.mainCtn{padding:3em 0}
	body#main h2.mainTitle{padding:0 0 0 0.6em; margin:0 0 1em 0; font-weight: 500;}
	body#main a.more{padding:0 0 0 0.8em; margin:0 0 1.8em 0; font-size:1.1em}
	body#main a.more > span{margin:0 1em 0 0}
	body#main div.mainCtn img.circle{bottom:2.4em; right:-10em; width:34em}
	body#main div.illust{top:7em; right:1em; width:8em; height:8em}
}
@media screen and (min-width:1281px){
	body#main div.mainCtn{padding:10em 5em;}
	body#main h2.mainTitle{margin:0 0 0.9em 0; font-size:3em; font-weight:400; line-height: 137%; font-weight: 500;}
	body#main a.more{margin:0 0 2.5em 0; font-size:1.3em}
	body#main a.more > span{margin:0 1em 0 0}
	body#main div.mainCtn img.circle{bottom:2.5em; right:-10em; width:51.5em}
	body#main div.illust{top:5em; right:2.5em; width:25em; height:25em}
}

body#main div.makeHP{background-color:#fff}

body#main div.make h2.mainTitle strong{color:var(--color-primary); border-bottom: 2px solid}
body#main div.make ul.make > li.make h3{color:#9faccb}
body#main div.make ul.make > li.make div.price{color:var(--color-primary)}
body#main div.makeHP ul.make > li.make a.link{}
body#main div.makeHP ul.make > li.make a.link:hover{}

body#main div.makeSM.make.mainCtn {background: #f5f5f5}
body#main div.makeSM h2.mainTitle strong{}
body#main div.makeSM ul.make > li.make a.link{}
body#main div.makeSM ul.make > li.make a.link:hover{background: #163a8f;}

body#main ul.make{position:relative; display:flex; flex-direction:row; justify-content:flex-start; justify-content: center;}
body#main ul.make > li.make{box-sizing:border-box}
body#main ul.make > li.make div.box{background-color:rgba(255,255,255,.94); transition:all .25s ease-in-out;}
body#main ul.make > li.make div.box:hover{transform:translateY(-20px)}
body#main ul.make > li.make h3{text-align:center; font-weight:700}
body#main ul.make > li.make p.titleKo{font-weight:500; text-align:center; color:#5a6068}

body#main ul.make > li.make div.price{font-weight:900; text-align:center}

body#main ul.make > li.make div.desc {color: #73767a; font-weight: 500; text-align: center; background: #f5f5f5; padding: 10px; border-radius: 500px;}
body#main ul.make > li.make ul.char div.lbl{position:relative; display:inline-block; box-sizing:border-box; color:#999}
body#main ul.make > li.make ul.char div.lbl div.ico{position:absolute; top:0; left:0; box-sizing:border-box}
body#main ul.make > li.make ul.char div.lbl div.ico svg{display:block; width:100%; height:100%}
body#main ul.make.makeHP > li.make ul.char div.lbl div.ico svg{fill:var(--color-primary)}
body#main ul.make.makeSM > li.make ul.char div.lbl div.ico svg{fill:#5ba1ff}
body#main ul.make > li.make ul.char strong{display:inline-block; width:50%; color:#333; font-weight:400}
body#main ul.make > li.make a.link{display:block; border-width: 1px; border-style: solid; margin: auto; text-align: center; color: #fff; font-weight: 500; transition: all .25s ease-in-out; border: none; background: var(--color-primary)}
@media screen and (max-width:1280px){
	body#main ul.make{flex-wrap:wrap}
	body#main ul.make{padding:0 0.4em}
	body#main ul.make > li.make{width:50%; padding:0.4em}
	body#main ul.make > li.make div.box{padding:1em; border: 1px solid #e3e3e3}
	body#main ul.make > li.make h3{font-size:1.8em}
	body#main ul.make > li.make p.titleKo{margin:0 0 0.9em 0; font-size:1.2em}
	body#main ul.make > li.make div.price{font-size:2em}
	body#main ul.make > li.make div.desc { margin-top: 1.88em; font-size: 0.9em; height: 2.8em; line-height: 1.4em; display: flex; justify-content: center; align-items: center; }
	body#main ul.make > li.make ul.char{margin:1em 0 0 0; font-size:0.8em}
	body#main ul.make > li.make ul.char div.lbl{width:46%}
	body#main ul.make > li.make ul.char div.lbl span.lbl{}
	body#main ul.make > li.make ul.char div.lbl div.ico{display:none}
	body#main ul.make > li.make ul.char strong{width:54%}
	body#main ul.make > li.make a.link{padding:0.4em 0.75em; margin-top:1.2em; font-size:1em}
}
@media screen and (max-width:320px){
	body#main{font-size:11px}
	#contents{font-size:11px}
	body#main ul.make > li.make {width: 100%}
	body#main ul.make > li.make div.desc {height: auto}
	
	
}
@media screen and (min-width:321px) and (max-width:360px){
	body#main{font-size:12px}
	#contents{font-size:12px}
	body#main ul.make > li.make {width: 100%}
	body#main ul.make > li.make div.desc {height: auto}
}
@media screen and (min-width:361px) and (max-width:428px){
	body#main{font-size:13px}
	#contents{font-size:13px}
}
@media screen and (min-width:429px) and (max-width:1024px){
	body#main{font-size:14px}
	#contents{font-size:14px}
	@media (min-aspect-ratio: 1/1) {
		/* 가로모드 */
		body#main ul.make > li.make{width:25% !important}
	}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	body#main{font-size:15px}
	#contents{font-size:15px}
	@media (min-aspect-ratio: 1/1) {
		/* 가로모드 */
		body#main ul.make > li.make{width:25% !important}
	}
}
@media screen and (min-width:1281px){
	body#main ul.makeHP{left:-1.25em; width:calc(100% + 2.5em)}
	body#main ul.makeHP > li.make{width:calc(100% / 4); padding:0 1.25em}

	body#main ul.makeSM{left:-1.25em; width:calc(100% + 2.5em)}
	body#main ul.makeSM > li.make{width:calc(100% / 4); padding:0 1.25em}

	body#main ul.make > li.make div.box {padding: 3.25em 1.625em; border: 1px solid #e3e3e3}
	body#main ul.make > li.make h3{font-size:2.6em}
	body#main ul.make > li.make p.titleKo{margin:0.31em 0 1em 0; font-size:1.25em}
	body#main ul.make > li.make div.price{font-size:2.625em}
	body#main ul.make > li.make div.desc{margin-top:2.375em; font-size:1em}
	body#main ul.make > li.make ul.char{padding:0 1.875em; margin:1.875em 0 0 0; font-size:1em}
	body#main ul.make > li.make ul.char li {padding-bottom: 8px;}
	body#main ul.make > li.make ul.char div.lbl{width:50%; height:1.5em; padding:0 0 0 1.82em}
	body#main ul.make > li.make ul.char div.lbl span.lbl{line-height:1.5em}
	body#main ul.make > li.make ul.char div.lbl div.ico{width:16px; height:16px; margin-top:6px}
	body#main ul.make > li.make ul.char strong{width:50%}
	body#main ul.make > li.make a.link{margin-top: 2.375em; font-size: 1em; padding: 1em 1.875em; }
}
@media screen and (min-width:1281px) and (max-width:1399px){
	body#main{font-size:12px}
	#contents{font-size:12px}
}
@media screen and (min-width:1400px) and (max-width:1599px){
	body#main{font-size:13px}
	#contents{font-size:13px}
}
@media screen and (min-width:1600px) and (max-width:1679px){
	body#main{font-size:14px}
	#contents{font-size:14px}
}
@media screen and (min-width:1680px) and (max-width:1919px){
	body#main{font-size:15px}
	#contents{font-size:15px}
}
@media screen and (min-width:1920px){
	body#main{font-size:16px}
	#contents{font-size:16px}
}
/* 메인페이지(main) */

/* mainNew */
div#contents{}
@media screen and (max-width:1280px){
	section.sect{padding: 9.33em 0}
	section.sect .inner{padding:0 1.33em}
}

@media screen and (min-width:1281px){
	section.sect{padding: 10em 0}
	section.sect .inner{width: 1640px; max-width: 100%; padding:0 1.25em}
}

section.sect .Title span.cate{display: block; font-weight: 700; color: #C3C1D8}
section.sect .Title h2{white-space: pre-line; word-break:keep-all; line-height: 130%}
html.zh section.sect .Title h2{word-break:break-all}
html.ja section.sect .Title h2{word-break:break-all}
section.sect .Title h2 span.active{color: var(--color-primary);}
section.sect .Title p {white-space: pre-line; word-break:keep-all; line-height: 184%}
html.zh section.sect .Title p {word-break:break-all}
html.ja section.sect .Title p {word-break:break-all}
section.sect .Title p span{position: relative; display: block; font-weight: 700}
section.sect .Title p span:before{content: ''; display: block; position: absolute; top: 50%; left:0; transform: translate(0, -50%); background: #222}
section.sect .btn{display: block; text-align: center; background: var(--color-primary); border-radius: 500px; color: #fff; font-weight: 600; transition: background-color 0.3s ease;}
section.sect .btn:hover {background: var(--color-button-background-hover);}
section.sect .btn a {color: #fff;}

section.sect .Title a.btn{display:flex; width:fit-content; align-items: center; font-weight:500; color:#222}
section.sect .Title a.btn:hover i{background-color: #3422FA}
section.sect .Title a.btn i{display: block; background-color: #393847; border-radius: 50%; display: flex; justify-content: center}
section.sect .Title a.btn i svg{width: 12px; fill: #fff}

section.sect .Title span.cate{font-size: 1.25em; margin-bottom: 1.25em}
section.sect .Title h2{font-size: 3em; margin-bottom: 30px}
section.sect .Title p { margin-top: 20px}
section.sect .Title p span{font-size: 1.44em; margin-bottom: 0.77em; padding-left: 1.15em}
section.sect .Title p span:before{width: 15px; height: 2px}
section.sect .btn{font-size: 1.13em; padding: 1.33em 0; width: 13.33em; margin: 0 auto;}

section.sect .Title a.btn i{width: 2.5em; height: 2.5em; margin-left:1.56em}


@media screen and (max-width:1280px){
	section.sect .Title span.cate{font-size: 1.2em; margin-bottom: 1.11em}
	section.sect .Title h2{font-size: 2em; margin-bottom: 2rem; }
	section.sect .Title p span{font-size: 1.2em; margin-bottom: 0.56em}
	section.sect .btn{font-size: 1.07em; padding: 1.25em 0; width: 195px; margin-top: 2.5em; margin-left: auto; margin-right: auto}
    html.ja section.sect .btn{padding: 1.25em}

}

@media screen and (max-width: 767px){
	section.sect .Title p {white-space: normal;}
}

section.sect.homepage .Title{text-align: center}
section.sect.homepage button.btn{margin:50px auto 0}

@media screen and (max-width:1280px){
	section.sect.homepage .Title{text-align:center}
	section.sect.homepage button.btn{margin:2.5em auto 0}
}
@media screen and (min-width:1281px){
	section.sect.homepage button.btn{margin:2.78em auto 0}
}

/* mainNew */

/* about(인사말) */

section.sect.about .Title{text-align: center}
.about-text {margin: 3rem 0;}
.about-text p:first-child {font-weight: 700;}

.about-img-box { position: relative; overflow: hidden; margin-top: 2rem; width: 100%; display: flex; justify-content: center; }
.about-img-box img { width: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease;}
.about-img-box::before, .about-img-box::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: #fff; z-index: 2; transition: width 1s cubic-bezier(0.65, 0, 0.35, 1); }
.about-img-box::before { left: 0; border-right: 1px solid #f0f0f0; }
.about-img-box::after { right: 0; border-left: 1px solid #f0f0f0; } 
.about-img-box.show img { opacity: 1; }
.about-img-box.show::before, .about-img-box.show::after { width: 0; }

@media screen and (max-width:767px){
	.about-img-box { height: 13rem; } 
	.about-img-box img { height: 100%; } 
}

/* about(인사말) */

/* service(서비스) */
section.sect.service {text-align: center; background-color: var(--color-background-secondary);}
.service-list { display: flex; justify-content: space-between; gap: 30px; margin-top: 4rem;}
.service-item { box-sizing: border-box; flex: 1; background: #fff; border-radius: 20px; padding: 80px 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.8s ease, transform 0.8s ease; opacity: 0; transform: translateY(50px); }
.service-item .img-box { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.service-item .img-box img { max-width: 100%; height: auto; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(0); }
.service-item:hover .img-box img { transform: translateY(-15px); }
.service-item .num { display: block; color: var(--color-primary); font-weight: 700; font-size: 14px; margin-bottom: 10px; letter-spacing: 1px; }
.service-item h3 { font-size: 1.5rem; font-weight: 800; color: #333; margin-bottom: 15px; }
.service-item .desc {line-height: 1.6; font-size: 1rem; word-break: keep-all; }


.service-item.show { opacity: 1; transform: translateY(0); }
.service-item.show:nth-child(2) { transition-delay: 0.2s; }
.service-item.show:nth-child(3) { transition-delay: 0.4s; }

@media (max-width: 1280px) {
	.service-item .img-box img { max-width: 80%;}
	.service-item { padding: 3rem; }
}

@media (max-width: 1024px) { 
    .service-list { gap: 20px; } 
    .service-item { padding: 40px 20px; } 
}
@media (max-width: 768px) {
    .service-list { flex-direction: column; align-items: center; } 
    .service-item { width: 100%; max-width: 400px; } 
	.service-item .img-box img {max-width: 60%;}
	.service-item .desc {font-size: 1.2rem;}
}

/* delivery(자동 배송비) */

.delivery-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-top: 7rem; }
.info-side { flex: 1; opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; }
.card-side { flex: 1.2; position: relative; opacity: 0; transform: translateX(50px); transition: all 0.8s ease; }

.info-side h3 { font-size: 24px; font-weight: 700; margin-bottom: 30px; }
.guide-list { margin-bottom: 40px; }
.guide-list li { position: relative; padding-left: 15px; margin-bottom: 12px; color: #444; font-size: 1.1rem; }
.guide-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background: #ddd; border-radius: 50%; }
.guide-list li strong { color: #333; font-weight: 700; }

section.sect button.btn-left  {margin: 0;}

.calc-img { position: absolute; top: -255px; right: 0; width: 300px; z-index: 1; }
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; position: relative; z-index: 2; }
.price-card { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgb(0 0 0 / 4%); transition: 0.3s; }
.card-top { background: #F1F4FB; padding: 15px; text-align: center; font-size: 1rem; font-weight: 600; color: #444; }
.card-bottom { padding: 25px 15px; text-align: center; font-size: 22px; }
.card-bottom strong { font-size: 28px; font-weight: 800; }
.card-side .notice { margin-top: 20px; text-align: right; font-size: 13px; color: var(--color-text-light); }

.delivery-content.show .info-side, .delivery-content.show .card-side { opacity: 1; transform: translateX(0); }

@media (max-width: 1280px) {
	.calc-img {top: -210px; width: 250px;}
}

@media (max-width: 1024px) { 
	.delivery-content { gap: 40px; } 
	.calc-img { display: none; } 
}

@media (max-width: 767px) { 
	.card-side .notice  {text-align: left; margin-bottom: 1rem;}
    .delivery-content { flex-direction: column-reverse; margin-top: 4rem; gap: 40px; } 
    .info-side, .card-side { width: 100%; transform: translateY(30px); } 
    .price-grid { gap: 15px; }
    .card-bottom { font-size: 18px; } .card-bottom strong { font-size: 22px; }
}

/* notice(공지사항) */

section.sect.notice {background: linear-gradient(0deg, #F1F1F5, transparent); padding-top: 3rem;}
section.sect.notice .Title h2 {text-align: center;}
section.sect.notice .Title span.cate {text-align: center;}
.notice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin: 4rem 0; }
.notice-item { display: flex; flex-direction: column; text-decoration: none; background: #fff; padding: 60px 45px; border: 1px solid transparent; transition: 0.4s; position: relative; border-radius: 20px; height: 100%; box-sizing: border-box;  border: 1px solid var(--color-background-secondary);}
.notice-item:hover { transform: translateY(-5px); }
.notice-item-tag { color: var(--color-primary); font-size: 0.9rem; font-weight: 700; margin-bottom: 20px;}
.notice-item-preview { margin-top: 1rem; font-size: 1rem; line-height: 1.6; margin-bottom: 40px; height: 3.2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notice-item-footer { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; }
.notice-date { font-size: 0.9rem; }
.notice-read-more { display: flex; align-items: center; color: var(--color-primary); font-weight: 500; font-size: 0.95rem; margin-top: 25px; transition: 0.3s; }
.notice-arrow-svg { width: 22px; margin-left: 10px; transition: transform 0.3s ease; }
.notice-item:hover .notice-arrow-svg { transform: translateX(8px); }
.notice-item-empty { grid-column: 1/-1; text-align: center; padding: 100px 0; background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}

@media (max-width: 1024px) { 
    #notice-notice { padding: 80px 0; }
    .notice-grid { grid-template-columns: 1fr; }
    .notice-item { padding: 40px 30px; }
    .notice-main-title { font-size: 2rem; }
}



/* banner(문의하기 배너) */

.request-banner {background: url('/image/main/main_banner.jpg'); background-repeat: no-repeat; background-size: cover; padding: 7em 0 !important; background-position: 20%; }
.request-banner h2{font-size: 3em; color: #fff; white-space: pre-line; font-weight: 600; line-height: 132%; text-align: center; }
section.sect .banner-btn{background-color: #ffffff00; border: 1px solid #fff; margin-top: 2rem; }
section.sect .banner-btn:hover {background-color: #ffffff52; }

@media screen and (max-width: 1280px){
	.request-banner {padding: 4em 0;}
	.request-banner h2{font-size: 2em;}
}