@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

:root {
    /* color */
    --color-primary: #ffda34;
    --color-secondary: #3374ff;

	/* font-style */
	--font-gmarket: 'GmarketSans', sans-serif;
	--font-pretendard: 'Pretendard', sans-serif;

	--font-size-15: 15px;
	--font-size-17: 17px;
	--font-size-18: 18px;
	--font-size-19: 19px;
	--font-size-20: 20px;
	--font-size-21: 21px;
	--font-size-23: 23px;
	--font-size-24: 24px;
	--font-size-25: 25px;
	--font-size-28: 28px;
	--font-size-29: 29px;
	--font-size-30: 30px;
	--font-size-32: 32px;
	--font-size-33: 33px;
	--font-size-35: 35px;
	--font-size-40: 40px;
	--font-size-45: 45px;
	--font-size-60: 60px;
	--font-size-80: 80px;
	--font-size-120: 120px;

	/* padding */
	--main-padding: 150px 0;

	--header-height: 100px;
}

.fz60 {font-size:60px !important;}

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736;}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}

#wrapper {position:relative; padding-top:var(--header-height);}

/* header */
#header {position:fixed; top:0; left:0; width:100%; z-index:100; transition:.3s; background:var(--color-primary);}
#header .contain {max-width:1780px; position:relative; display:flex;align-items:center;justify-content:center; height:var(--header-height); z-index:10;}

.sitelogo {position:absolute;left:30px;}

#gnb>ul {display:flex;} 
#gnb>ul>li {position:relative; padding:0 59px; text-align:center;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; height:var(--header-height); color:#000; font-size:var(--font-size-20); font-weight:700; letter-spacing:-.01em; line-height:1.3em;}

#header .right {display:flex; align-items:center; position:absolute; right:30px;}
#header .call {display:inline-flex; align-items:center;  height:50px; padding:0 20px; background:var(--color-secondary); color:#fff; font-size:var(--font-size-28); font-weight:700; letter-spacing:-.01em; line-height:1.4em;border-radius:25px;}
#header .call:before {margin-right:10px;content:''; width:28px; height:28px; background:url('../images/common/call.png') no-repeat 50% 50% / contain;}

#header.header-fixed {box-shadow:0 3px 3px rgba(0,0,0,0.1)}

/* for mobile */
.btn-m-menu {margin-left:30px;display:none; position:relative; width:26px; height:26px;}
.btn-m-menu span {position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#000;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:0; right:0; height:2px; background:#000;}
.btn-m-menu span:before {top:-9px;}
.btn-m-menu span:after {bottom:-9px;}

.mobile-navigation {display:none; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {background:var(--color-secondary);display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .home img {height:52px;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .close {position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#fff; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
.main-visual {position:relative; overflow:hidden; color:#fff;}
.main-visual .item {height:calc(100vh - var(--header-height) - 118px);}
.main-visual .img {transition:5s; position:absolute; top:0; right:0; width:100%; height:100%;}
.main-visual .img img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-visual .caption {text-align:right; padding:0 80px; position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%; z-index:2;}
.main-visual .caption h1 {display:inline-block;position:relative;font-size:var(--font-size-80); font-weight:800; letter-spacing:-.03em; line-height:1.33em; color:#000;}
.main-visual .caption h1:before {content:''; position:absolute; left:-5px; right:-5px; bottom:17px; height:20px; background:#ffe837; z-index:-1;}
.main-visual .caption p {font-size:var(--font-size-21); font-weight:300; letter-spacing:-.015em; line-height:1.4em; color:#333;}
.main-visual .caption-2 {padding: 0 80px; text-align:center; position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%; z-index:2;}
.main-visual .caption-2 .txt-2 {margin:90px 0 70px;}
.main-visual .caption-2 .logo img {margin: 0 auto;}
.main-visual .slick-arrow {position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-right:1px solid #fff; border-bottom:1px solid #fff; border-left:0; border-top:0; background-color:transparent; z-index:50; overflow:hidden; font-size:0; line-height:0; text-indent:-99999em;}
.main-visual .slick-prev {left:35px; transform:rotate(135deg);}
.main-visual .slick-next {right:35px; transform:rotate(-45deg);}
.main-visual .slick-dots {text-align:center; position:absolute; bottom:50px; left:0; width:100%;}
.main-visual .slick-dots li {display:inline-block; margin:0 5px;}
.main-visual .slick-dots li button {border:0; background-color:rgba(255,255,255,0.3); line-height:0; font-size:0; width:60px; height:4px;}
.main-visual .slick-dots li.slick-active button {background:#fff;}

.main-visual .active .caption-2 .txt-1 {animation: rubber 1.6s ease-out;}
.main-visual .active .caption-2 .txt-2 {animation: rubber 1.6s ease-out 1s;}

@keyframes rubber{
0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}}

.m-head {text-align:center;}

.m-tit {font-size:var(--font-size-80); line-height:1.3em; font-weight:700; letter-spacing:-.05em; color:#242424;text-align:center;}

.m-txt {font-size:var(--font-size-23); line-height:1.65em; font-weight:400; letter-spacing:-.05em; color:#454545;text-align:center;}
.m-txt strong {color:#242424;}
.m-txt.ty2 {display:inline-block;border-top:1px solid rgba(0,0,0,0.5);border-bottom:1px solid rgba(0,0,0,0.5);}

.line {position:relative;}
.line:before {content:''; position:absolute; left:-2px; bottom:6px; right:-2px; height:11px; background:#ffe837; z-index:-1;}

.main-3way {position:relative;padding:var(--main-padding);padding-bottom:290px; margin-bottom:-90px;background:#fffcf0;}
.main-3way:before, 
.main-3way:after {content:''; position:absolute; background-repeat:no-repeat; background-size:contain; background-position:50% 50%;}
.main-3way:before {left:0; bottom:98px; width:337px; height:574px; background-image:url('../images/main/3way-bg1.png');}
.main-3way:after {right:0; top:0;width:319px; height:556px; background-image:url('../images/main/3way-bg2.png');}
.main-3way .inner {position: relative; z-index:1;}
.main-3way .m-tit {display:flex; align-items:center; justify-content:center; margin-bottom:23px;}
.main-3way .m-txt {margin-bottom:70px;}
.main-3way .m-txt .line:before {bottom:0}
.main-3way .imgs {display:flex; justify-content:space-between;}
.main-3way .imgs .box {position:relative;width:32.35%;}
.main-3way .caption {border-radius:53px 0 0 53px;position:absolute; right:0; top:58px;padding:18px 28px 18px 50px;min-width:165px;display:inline-flex;background:#ffe837;}
.main-3way .caption .txt {font-size:var(--font-size-24); letter-spacing:-.05em; color:#242424; line-height:1.58em; font-weight:700;}
.main-3way .caption .txt strong {font-weight:800; font-size:var(--font-size-32);}

.main-review {text-align:center;position:relative; z-index:2; padding:var(--main-padding); padding-top:190px;background:#69bcbf; color:#fff;}
.main-review:before {z-index:-1;content:''; position:absolute;left:0; top:-84px; width:100%; height:84px;background:url('../images/main/wave2.png') no-repeat 50% 0 / 100% 100%;}
.main-review .m-head {margin-bottom:70px;}
.main-review .star {font-size:var(--font-size-32);color:var(--color-primary); font-family:var(--font-gmarket); font-weight:700; letter-spacing:.3em; line-height:1.4em;}
.main-review .t1 {margin:5px 0 22px; font-size:var(--font-size-45); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.main-review .t1 strong {font-weight:800;}
.main-review .t2 {padding:0 12px;font-size:var(--font-size-45); font-weight:700; letter-spacing:-.03em; line-height:1.4em; display:inline-block; background:var(--color-primary); color:#000;}
.main-review .t3 {margin-bottom:28px;display:flex; align-items:flex-end; justify-content:center; font-size:var(--font-size-80); font-weight:700; letter-spacing:-.05em; line-height:1.3em; color:#fff;}
.main-review .t3 .line:before {background:#009aa0; height:26px; bottom:13px;}
.main-review .t3 img {margin-left:40px;}
.main-review .t4 {font-size:var(--font-size-40); font-weight:700; letter-spacing:-.05em; line-height:1.33em; color:#fff;}
.main-review .t4 em {font-weight:800;}

.main-review .wrap {max-width:1400px; margin:0 auto;position:relative;}
.main-review .slider1 {border-radius:40px; overflow:hidden; max-width:362px; width:100%;position: absolute; z-index:10;left:50%; top:50%; transform:translate(-50%, -50%);}
.main-review .slider1 .img img {width:100%;}
.main-review .slider1 .swiper-slide {position:relative;}
.main-review .slider1 .swiper-slide:after {content:''; position: absolute; left:-17px; top:0; right:-13px; bottom:-5px; background:url('../images/main/phone.png') no-repeat 50% 50% /100% 100%; z-index:10;}
.main-review .slider2 .swiper-slide {max-width:362px; position:relative;}
.main-review .slider2 .swiper-slide-active {opacity:0;}
.main-review .slider2 .img {width:100%;}
.main-review .slider2 .img img {width:100%; border-radius:25px;}
.main-review .slide-btn {position: absolute; top:50%; transform:translateY(-50%); display:block; font-size:0;line-height:0; width:70px;height:70px; background-size:contain; background-repeat:no-repeat; background-position:50% 50%;}
.main-review .slide-btn.prev {left:-160px;background-image:url('../images/main/slide-prev.png');}
.main-review .slide-btn.prev:hover {background-image:url('../images/main/slide-prev-on.png');}
.main-review .slide-btn.next {right:-160px;background-image:url('../images/main/slide-next.png');}
.main-review .slide-btn.next:hover {background-image:url('../images/main/slide-next-on.png');}

.main-menu {padding:var(--main-padding);  padding-bottom:220px;background-image:url('../images/main/grid.jpg'); background-repeat:repeat;}
.main-menu .badge {margin-bottom:25px;border-radius:29px; padding:3px 48px;display:inline-block; text-align:center; color:var(--color-secondary); font-size:var(--font-size-32); font-weight:700; letter-spacing:0.03em; line-height:1.3em; border:3px solid var(--color-secondary);}
.main-menu .wrap {display:flex; align-items:center;}
.main-menu .slider {margin-right:86px;position:relative;border-radius:80px; width:700px; background:#fff; padding:40px 50px;}
.main-menu .slider .img {margin-bottom:65px;}
.main-menu .slider .img img {margin:0 auto;}
.main-menu .slider .cnt {border-radius:60px; padding:18px; justify-content:center; text-align:center; background:var(--color-secondary); color:#fff;}
.main-menu .slider .tit {font-size:var(--font-size-33); font-weight:800; letter-spacing:-.06em; line-height:1.4em;}
.main-menu .slider .price {font-size:var(--font-size-29); font-weight:700; letter-spacing:-.06em; line-height:1.4em;}
.main-menu .slider .slick-arrow {width:21px; height:37px; background-size:contain; background-repeat:no-repeat; background-position:50% 50%; position:absolute; top:50%; transform:translateY(-50%); font-size:0; line-height:0; border:0; background-color:transparent; z-index:10;}
.main-menu .slider .slick-prev {left:-20px;background-image:url('../images/main/menu-prev.png');}
.main-menu .slider .slick-next {right:-20px;background-image:url('../images/main/menu-next.png');}
.main-menu .list ul li {margin-bottom:60px;display:flex; align-items:center;}
.main-menu .list ul li:last-child {margin-bottom:0;}
.main-menu .list .num {margin-right:25px;border-radius:20px; display:flex; align-items:center; justify-content:center; width:80px;height:80px;font-family:var(--font-gmarket); font-size:var(--font-size-35); font-weight:700; letter-spacing:-.03em; line-height:1.33em;color:#fff;background:var(--color-secondary);}
.main-menu .list dl {flex:1 1 auto; min-width:0; width:1%;}
.main-menu .list dl dt {margin-bottom:3px;font-size:var(--font-size-30); font-weight:800; letter-spacing:-.03em; line-height:1.4em; color:#242424;} 
.main-menu .list dl dd {font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#454545;} 

.dot-title {color:var(--color-secondary); font-weight:800;}
.dot-title span {display:inline-block;position:relative;}
.dot-title span:before {position:absolute; left:75%; transform:translateX(-50%); top:-23px; content:''; width:14px; height:14px; border-radius:100%; margin:0 auto; background:var(--color-secondary);}

.italic {font-style:italic;}

.main-sales {position:relative;background:#ffe15d; padding:var(--main-padding);}
.main-sales:before {content:''; position:absolute;left:0; top:-114px; width:100%; height:114px;background:url('../images/main/sales-wave.png') no-repeat 50% 0 / 100% 100%;}
.main-sales .m-tit {font-weight:800; margin-bottom:80px;}
.main-sales .dot-title span {z-index:3;}
.main-sales .dot-title span:before {left:52%;}
.main-sales .dot-title.line:before {background:#fff9df; z-index:2; height:20px; left:-7px; right:-7px; bottom:-1px;}
.main-sales .graph {margin-bottom:150px;display:flex; justify-content:space-between;}
.main-sales .graph .col {width:30%;}
.main-sales .graph .img {text-align:center;}
.main-sales .graph .tit {margin-bottom:35px;text-align:center;}
.main-sales .graph .cnt {margin-top:60px;padding:20px 33px;background:#fff; border-radius:20px;}
.main-sales .graph dl {margin-bottom:5px;display:flex; align-items:center;}
.main-sales .graph dl dt {font-size:var(--font-size-25); font-weight:800; letter-spacing:-.03em; line-height:1.4em; color:#242424;width:134px;}
.main-sales .graph dl dd {font-size:var(--font-size-30); font-weight:800; letter-spacing:-.03em; line-height:1.4em; color:#242424;flex:1 1 auto; min-width:0; width:1%;}
.main-sales .graph dl dd.tt {font-size:var(--font-size-40); color:var(--color-secondary);}
.bill {position:relative; width:100%;height:314px;}
.bill .wrap {position:relative;}
.bill .wrap .rolling {position:relative; overflow:hidden;}
.bill .wrap .rolling ul {width:9999px;}
.bill .wrap .rolling ul li {float:left; line-height:0; padding:0 20px;}

.main-process {padding:var(--main-padding);position:relative;background:#feee97; overflow:hidden;}
.main-process:before {position:absolute; left:0; bottom:-15px; content:''; width:749px; height:457px; background:url('../images/main/process-l.jpg') no-repeat 50% 50% / contain;}
.main-process:after {position:absolute; right:0; top:0; content:''; width:585px; height:574px; background:url('../images/main/process-r.png') no-repeat 50% 50% / contain;}
.main-process .m-head {margin-bottom:80px;}
.main-process .m-tit {margin-bottom:12px;font-weight:800;color:#000;}
.main-process .list {position: relative; z-index:1;margin-left:42.14%;}
.main-process .list ol {display:flex; flex-wrap:wrap; margin:-22px -15px;}
.main-process .list ol li {width:25%; padding:22px 15px; text-align:center;}
.main-process .list .box {padding:37px 10px 20px;position:relative;border-radius:25px; background:#ffe15b;}
.main-process .list .box .num {box-shadow:3px 3px 7px rgba(0,0,0,0.1); position:absolute;right:-14px; top:-14px;width:45px; height:45px; border-radius:100%; background:#fff; text-align:center; font-weight:800;color:var(--color-secondary); font-size:var(--font-size-19); font-family:var(--font-gmarket); letter-spacing:-.01em; line-height:49px;}
.main-process .list .box .ico {margin-bottom:14px;}
.main-process .list .box .tit {font-size:var(--font-size-24); font-weight:800; line-height:-.03em; line-height:1.4em; color:#333;}

.main-system {padding:var(--main-padding); background:url('../images/main/system-bg.jpg') no-repeat 50% 50% / cover;}
.main-system h2 {margin-bottom:110px;text-align:center;}
.main-system .wrap {display:flex; align-items:center;}
.main-system .box {border-radius:30px; box-shadow:3px 3px 7px rgba(0,0,0,0.15); display:flex; align-items:center; min-height:297px; padding:20px 45px;width:41%; background:var(--color-secondary);}
.main-system .box:first-child {text-align:right;}
.main-system .box dl dt {margin-bottom:5px;font-size:var(--font-size-35); font-weight:800; color:var(--color-primary); letter-spacing:-.01em; line-height:1.4em;}
.main-system .box dl dd {font-size:var(--font-size-23); font-weight:400; letter-spacing:-.04em; line-height:1.96em; color:#fff;}
.main-system .box dl dd .deco {text-decoration:underline;}
.main-system .logo {margin:0 44px; width:12.57%;}

.main-price {padding:var(--main-padding); background:#fffcef;}
.main-price .m-head {margin-bottom:75px;}
.main-price .m-tit {margin-bottom:25px;  line-height:1.1em;}
.main-price .m-tit strong {font-weight:800; line-height:1em;}

.table-tt {margin-bottom:10px;font-size:var(--font-size-17); font-weight:400; letter-spacing:-.03em; line-height:1.4em; color:#505050;}
.table01 table {text-align:center; width:100%; border-collapse:collapse; border-spacing:0;}
.table01 table thead th {padding:16px 15px;font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:1.4em;background:var(--color-primary); color:#000;}
.table01 table thead th:first-child {border-radius:10px 0 0 10px;}
.table01 table thead th:last-child {border-radius:0 10px 10px 0;}
.table01 table tbody td {padding:16px 15px;border-right:1px solid #e8e7e3;border-bottom:1px solid #e8e7e3; font-size:var(--font-size-18); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#454545;}
.table01 table tbody td:last-child {border-right:0;}
.table01 table tfoot td {padding:16px 15px;background:var(--color-secondary); color:#fff; border-radius:10px;font-size:var(--font-size-20); font-weight:700; letter-spacing:-.03em; line-height:1.4em;}
.table01 table tfoot td strong {font-weight:800; font-size:var(--font-size-29);}
.table01 .pos {position:relative;}
.table01 .pos:after {content:''; position: absolute; left:0; top:0; width:100%; height:201%; background:url('../images/main/table-tt.png') no-repeat 50% 50% / 100% 100%;}
.table01 .through {text-decoration: line-through; color:#a7a7a7;}

.main-inquiry {position:sticky; bottom:0; left:0; width:100%; z-index:50;}
.main-inquiry .inner {padding:18px 0; background:var(--color-primary);}
.main-inquiry .contain {position:relative; display:flex; align-items:center;}
.main-inquiry .text {display:flex; align-items:center; margin-right:80px; font-size:var(--font-size-23); font-weight:700; letter-spacing:-.03em;color:#121212;line-height:1.3em;}
.main-inquiry .text .logo {margin-right:28px;}
.main-inquiry .text .t1 {margin-bottom:5px;}
.main-inquiry .form {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center;}
.main-inquiry .form .input-wrap {display:flex; flex:1 1 auto; min-width:0; width:1%; gap:0 10px;}
.main-inquiry .form .input {padding:6px 20px;display:block; width:33.333%; border:0; border-radius:10px; height:55px; letter-spacing:0;}
.main-inquiry .form .input::placeholder {color:#808080;}
.main-inquiry .form .right {margin-left:10px;display:flex; align-items:center;}
.main-inquiry .form .submit {min-width:200px; padding:0 10px;font-size:var(--font-size-19); font-weight:700;letter-spacing:0; background:var(--color-secondary); color:#fff; border:0; border-radius:10px; height:55px;}
.main-inquiry .check {display:flex; align-items:center; margin-left:20px; width:208px;font-size:var(--font-size-15);}
.main-inquiry .check a {margin:-.2em 0 0 5px;}
.scroll-top {position: absolute; right:-160px; top:50%; margin-top:-35px;display:flex; flex-direction:column; justify-content:center; width:70px; height:70px; text-align:center; color:#fff; font-size:12px; font-weight:700; line-height:1.3em; letter-spacing:0; background:var(--color-secondary); border-radius:100%;}
.scroll-top:before {content:""; display:block; margin:0 auto 8px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid #fff;}
.main-inquiry .toggle {display:none;}

/* footer */
#footer {font-family:var(--font-pretendard);padding:40px 0; color:#333; font-size:15px; line-height:1.5em; letter-spacing:0; font-weight:500;background:#f5c800; text-align:center;}
#footer address {font-style:normal; margin-bottom:10px;}
#footer address span {margin-bottom:4px;}
#footer span {display:inline-block;}
#footer a:hover {text-decoration:underline;}
#footer .bar {height:10px; width:1px; background:#333; margin:0 8px;}
.foot-logo {margin-bottom:23px;}
.copyright {margin-bottom:9px;font-size:13px; font-weight:500;}
.foot-links {font-size:14px;}