@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap');
@font-face {font-family: 'Recipekorea'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Recipekorea.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'KCC-DodamdodamR';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCC-DodamdodamR.woff2') format('woff2');font-weight: normal;font-style: normal;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0px; padding:0px; border:0; outline:0; vertical-align:baseline; background:transparent; }
html, body {position: relative;height: 100%;}
body{line-height:1; font-family: 'Noto Sans KR', sans-serif; color:#000000; font-size:12px; font-weight: 500; font-style: normal;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block; margin:0px; padding:0px;}
strong {font-weight: 700;}
button {border:none; background:none; cursor: pointer;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; color:#000000;}
ul, ol {list-style:none;}
.good_hide {visibility:hidden; overflow: hidden; position: absolute; left:-10000px; height:1px; width:1px; text-indent: -10000px;}

html, body {position: relative;height: 100%;}
body {background:#ffffff; font-size: 4vw; color: #000; margin: 0; padding: 0;}
.swiper {width:100%; height: 100%; z-index: 1; position: absolute; top:0px; left:0%; padding-top: 53px;}
.swiper-slide {text-align: center; display: flex;justify-content: center;align-items: center;}
.swiper-slide img {display: block;width: 100%; object-fit: cover;}
.swiper-pagination {float:right; position: relative !important; width: auto !important;}
.swiper-pagination .swiper-pagination-bullet {width:7px; height: 7px; border-radius: 50%; background-color: #c6cbbb; opacity: 1; margin: 7.5px 3px !important;}
.swiper-pagination .swiper-pagination-bullet-active {background-image: url("../images/Pager_Active.png"); background-color: transparent; background-size: 21px 18px; width:21px; height: 18px; margin: 2px 3px !important;} 
.swiper-pagination span.On {background-color: #1fb738;}

.Kato {width:100%; height: 100%; max-width: 750px; margin: auto;}
.Kato * {box-sizing: border-box;}
.Kato img {width:100%; display: block;}
.Kato .Header {position: fixed; top:0%; left:50%; width:100%; overflow: hidden; max-width: 750px; transform: translate(-50%,0%); z-index: 99; padding: 15px 5%;}
.Kato .Header .GnLogo {float:left; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234.99 43.4'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23685b55; %7D .cls-2 %7B fill: %2389a12f; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='m103.06,26.08v-3.46h-11.74v-3.18h27.66v3.18h-11.71v3.46h-4.21Zm-.1,1.03h4.38v.79c.1,3.97,4.11,6.47,7.8,7.46l-1.44,3.08c-3.56-.65-7.05-3.05-8.56-5.68-1.5,2.64-5,5.03-8.56,5.68l-1.44-3.08c3.7-.99,7.7-3.49,7.81-7.46v-.79Zm7.12-15.23v-.62h-14.04v-3.22h17.91v3.83c-.1,3.32-.72,5.65-1.13,6.13h-3.63c.41-.99.89-4.04.89-6.13Z'/%3E%3Cpath class='cls-1' d='m126.27,23.21h1.78c3.15,0,6.03-.41,7.05-.62v2.43c0,.24,0,.65-.1.82-.31.51-4.24.75-7.12.75h-3.29c-1.34,0-2.19-.86-2.19-2.19v-15.34h3.87v14.14Zm10.96-4.93h-4.86v-3.66h4.86v-6.92h3.7v28.35h-3.7v-17.77Zm5.44,18.8V7.36h3.7v29.71h-3.7Z'/%3E%3Cpath class='cls-1' d='m149.96,17.66c0-4.66,3.77-8.42,8.46-8.42s8.49,3.77,8.49,8.42-3.8,8.42-8.49,8.42-8.46-3.77-8.46-8.42Zm3.77,0c0,2.64,2.09,4.76,4.69,4.76s4.72-2.12,4.72-4.76-2.12-4.76-4.72-4.76-4.69,2.12-4.69,4.76Zm17.02,19.41V7.36h3.87v29.71h-3.87Z'/%3E%3Cpath class='cls-1' d='m193.85,26.6h-12.08c-1.34,0-2.19-.86-2.19-2.19v-15.34h3.87v4.93h7.33v-4.93h3.87v6.92h5.2V7.36h3.87v29.71h-3.87v-17.43h-5.2v6.16c0,.51-.27.79-.79.79Zm-3.08-3.22v-6.16h-7.33v6.16h7.33Z'/%3E%3Crect class='cls-1' x='206.8' y='29.65' width='28.2' height='3.22'/%3E%3Cpath class='cls-1' d='m218.44,8.21h4.31v2.16c0,4.79,4.74,8.7,8.28,10.34l-1.42,3.08c-3.41-1.06-7.68-4.38-9.02-8.05-1.35,3.66-5.62,6.98-9.02,8.05l-1.42-3.08c3.54-1.64,8.28-5.55,8.28-10.34v-2.16Z'/%3E%3C/g%3E%3Cpath class='cls-2' d='m38.83,32.26c-1.46-3.12-.36-6.43,2.16-9.41,1.63,5.39,4.97,9.85,10.08,13.4-5.93,1.41-10.46-.17-12.24-3.98m4.51-17.8c.16-6.67,3.65-10.94,6.55-11.04,2.48-.09,2.72,2.61,1.45,5.86-1.36,3.5-4.44,6.02-7.73,8.69-.22-1.17-.3-2.35-.28-3.51m37.24,5.18c6.56-12.49-3.32-21.02-12.77-19.45-5.83.97-8.31,4.45-9.69,8.98.95-.79,1.79-1.2,3.07-1.63.54-2.93,2.69-5.52,5.79-5.58,5.52-.09,10.79,9.96,1.5,22.07-3.2,4.18-6.97,7.14-10.11,9.01-8.09-3.24-12.63-7.75-14.28-13.15,1.18-.94,2.48-1.82,3.86-2.61,6.77-3.88,8.76-6.46,8.98-10.13.19-3.04-2.43-5.32-5.42-5.32-6.38,0-11.22,6.17-11.43,14.15-.04,1.6.09,3.16.38,4.66-12.13,11.14-7.28,20.45,4.7,20.26,3.14-.05,6.74-.68,10.44-1.96,4.83,2.47,9.51,3.89,15.67,4.47,1.37-3.2,4.49-5.86,6.4-7.42-5.09.08-9.52-.31-13.35-1.07,6.07-3.4,12.99-9.05,16.27-15.28'/%3E%3Crect class='cls-2' y='40.94' width='29.7' height='2.46'/%3E%3C/svg%3E"); font-size: 0px; text-indent: -9999px; width:120px; height: 22px; background-size: 120px 22px; margin: 0px;}
.Kato .Header .GnTel {float: right; display: block; width:130px; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(to right, #abc51a 0%, #06b639 100%); color:#ffffff; border-radius: 20px; font-size: 16px; font-weight: 700;}
.Sessions {width:100%; height: 100%; overflow: hidden;}
.S1 .S1_1 {width:100%;}
.S1 .T1_1 {text-align: center; font-size: 4vw; color:#646464; font-weight: 700; padding: 12% 0 7%;}
.S1 h1 {text-align: center; font-size: 6vw; line-height: 8.5vw; font-family: 'Recipekorea'; font-weight: 700;}
.S1 h1 span {color:#20b738; display: inline-block; opacity: 0; animation: Tops 1s forwards 2s;}
@keyframes Tops {
	0% {transform: translate(0px,20px); opacity: 0;}
	100% {transform: translate(0px,0px); opacity: 1;}
}
@-webkit-keyframes Tops {
	0% {transform: translate(0px,20px); opacity: 0;}
	100% {transform: translate(0px,0px); opacity: 1;}
}
.S1 .S1_2 {position: absolute; bottom: 0%; left:0%; width:100%;}
.S2 h1 {opacity: 0; text-align: center; font-size: 6vw; line-height: 8.5vw; font-family: 'Recipekorea'; font-weight: 700; padding: 8% 0 5%;}
.S2 h1.On {animation: Tops 1s forwards;}
.S2 h1 span {color:#c27154;}
.S2 .T2_1 {opacity: 0; font-size: 4.5vw; line-height: 7vw; color:#393939; font-weight: 500; text-align: left; padding: 0px 8%;} 
.S2 .T2_1.On {animation: Tops 1s forwards 0.5s;}
.S2 .S2_2 {position: absolute; bottom: 0%; left:0%; width:100%;}
.S3 .S3_1 {width:80%; margin: 10% auto;}
.S3 .T3_1 {opacity: 0; font-size: 4.5vw; line-height: 7vw; color:#646464; font-weight: 700;}
.S3 .T3_1.On {animation: Tops 1s forwards;}
.S3 h1 {opacity: 0; font-size: 6vw; text-align: center; font-weight: 700; font-family: 'Recipekorea'; color:#393939; padding: 10% 0;}
.S3 h1.On {animation: Tops 1s forwards 0.5s;}
.S3 h1 span {color:#ea6db5;}
@keyframes Rights {
	0% {transform: translate(20px,0px); opacity: 0;}
	100% {transform: translate(0px,0px); opacity: 1;}
}
@-webkit-keyframes Rights {
	0% {transform: translate(20px,0px); opacity: 0;}
	100% {transform: translate(0px,0px); opacity: 1;}
}
@keyframes Lefts {
	0% {transform: translate(-20px,0px); opacity: 0;}
	100% {transform: translate(0px,0px); opacity: 1;}
}
@-webkit-keyframes Lefts {
	0% {transform: translate(-20px,0px); opacity: 0;}
	100% {transform: translate(0px,0px); opacity: 1;}
}
.S4 .Ri {opacity: 0; margin-left: 5%; width:95%;}
.S4 .Ri.On {animation: Rights 1s forwards;}
.S4 .Ri .T4_1 {font-size: 5vw; line-height: 8vw; text-align: right; font-weight: 700; color:#3c3c3c; padding: 3% 5% 5% 0;}
.S4 .Imgs {width:100%;}
.S4 .Le {opacity: 0; width:95%;}
.S4 .Le.On {animation: Lefts 1s forwards 0.5s;}
.S4 .Le .T4_2 {font-size: 5vw; line-height: 8vw; text-align: left; font-weight: 700; color:#3c3c3c; padding: 3% 0 0% 5%;}
.S4 .Le .T4_2 span {color:#20b738;}
.S5 .Imgs {width:100%;}
.S5 .Ri {opacity: 0; margin-left: 5%; width:95%;}
.S5 .Ri.On {animation: Rights 1s forwards;}
.S5 .Ri .T4_1 {font-size: 5vw; line-height: 8vw; text-align: right; font-weight: 700; color:#3c3c3c; padding: 3% 5% 5% 0;}
.S5 .Imgs {width:100%;}
.S5 .Le {opacity: 0; width:95%;}
.S5 .Le.On {animation: Lefts 1s forwards 0.5s;}
.S5 .Le .T4_2 {font-size: 5vw; line-height: 8vw; text-align: left; font-weight: 700; color:#3c3c3c; padding: 3% 0 0% 5%;}
.S5 .Le .T4_2 span {color:#20b738;}
.S6 .Ri {opacity: 0; width:95%; margin: 0% 0% 2% 5%;}
.S6 .Ri.On {animation: Rights 1s forwards;}
.S6 .Le {opacity: 0; width:95%;}
.S6 .Le.On {animation: Lefts 1s forwards 0.5s;}
.S6 .Imgs {width:100%;}
.S6 .T6_1 {opacity: 0; padding: 5%; font-size: 5vw; line-height: 8vw; text-align: left;}
.S6 .T6_1.On {animation: Lefts 1s forwards 0.5s;}
.S6 .T6_1 span {color:#13b639;}
.S7 .Ri {opacity: 0; width:95%; margin: 0% 0% 2% 5%;}
.S7 .Ri.On {animation: Rights 1s forwards;}
.S7 .Le {opacity: 0; width:95%;}
.S7 .Le.On {animation: Lefts 1s forwards 0.5s;}
.S7 .Imgs {width:100%;}
.S7 .T7_1 {opacity: 0; padding: 5%; font-size: 5vw; line-height: 8vw; text-align: left;}
.S7 .T7_1.On {animation: Lefts 1s forwards 0.5s;}
.S7 .T7_1 span {color:#13b639;}
.S8 .Ri {opacity: 0; width:95%; margin: 0% 0% 2% 5%;}
.S8 .Ri.On {animation: Rights 1s forwards;}
.S8 .Le {opacity: 0; width:100%;}
.S8 .Le.On {animation: Lefts 1s forwards 0.5s;}
.S8 .Imgs {width:100%;}
.S8 .T8_1 {opacity: 0; padding: 5%; font-size: 5vw; line-height: 8vw; text-align: left;}
.S8 .T8_1.On {animation: Lefts 1s forwards 0.5s;}
.S8 .T8_1 span {color:#13b639;}
.S9 h1 {opacity: 0; text-align: center; font-size: 5.5vw; line-height: 8.5vw; font-family: 'Recipekorea'; font-weight: 700; color:#3c3c3c; padding: 10% 0% 7%;}
.S9 h1.On {animation: Tops 1s forwards;}
.S9 h1 span {color:#13b639;}
.S9 .Mov {position: relative; width:100%; padding-bottom: 55%;}
.S9 .Mov iframe {position: absolute; top:0%; left:0%; width:100%; height: 100%;}
.S9 .T9_1 {opacity: 0; font-family: 'KCC-DodamdodamR'; text-align: center; font-size: 5.5vw; line-height: 8vw; font-weight: 500;}
.S9 .T9_1.On {animation: Tops 1s forwards 0.5s;}
.S9 .T9_2 {opacity: 0; font-family: 'Recipekorea'; font-size: 3.5vw; font-weight: 700; color:#aa7469; padding-top: 5%;}
.S9 .T9_2.On {animation: Tops 1s forwards 0.5s;}
.S10 {background-color:#e5e1e0;}
.S10 .Imgs {width:100%; filter: grayscale(100%);transition: 2s all;}
.S10 .Imgs.On {animation: Grays 3s forwards;}
@keyframes Grays {
	0% {filter: grayscale(100%);}
	100% {filter: grayscale(0%);}
}
@-webkit-keyframes Grays {
	0% {filter: grayscale(100%);}
	100% {filter: grayscale(0%);}
}
.S10 .T10_1 {opacity: 0; font-size: 4.5vw; text-align: center; line-height: 7vw; padding: 7% 0;}
.S10 .T10_1.On {animation: Tops 1s forwards;}
.S10 .T10_1 span {color:#a85a5a; font-weight: 700;}
.S10 .Tel_Go {font-size: 4.5vw; color:#544c4a; font-family: 'Recipekorea'; display: block; background-color: #ffffff; width:74%; margin: auto; font-weight: 700; padding: 5% 0 3% 0; border-radius: 15px 0px 15px 0px; border:3px solid #f2f2f2;}
.S10 .Tel_Go span {color:#be7e5d;}
.Quick.On {bottom: 2%;}
.Quick {position: fixed; bottom: -100%; left:0%; width:100%; z-index: 99; transition: 0.3s all; padding: 0% 5%;}
.Quick .Call {display: block; float:left; width:50px; height: 50px; border-radius: 50%; background:#20b738 url("../images/Call.png") center center no-repeat; font-size: 0px; text-indent: -9999px; background-size: 30px 30px;}
.Quick .Support {display: block; float:right; width:82%; background: linear-gradient(to right, #c25ff6 0%, #846add 100%); height: 50px; line-height: 58px; color:#ffffff; font-size: 18px; text-align: center; font-family: 'Recipekorea'; border-radius: 25px;}
.Quick.On10 .Support {background:#bc7751;}
.Kato_Bgs {background-color: rgba(0, 0, 0, 0.9); position: fixed; top:0%; left:0%; width:100%; height: 100%; z-index: 101;}
.Kato_Bgs .Next {position: absolute; top:50%; left:0%; width:100%; transform: translate(0%,-50%);}
.Kato_Bgs p:nth-child(1) {font-size: 9vw; line-height: 12vw; color:#ffffff; text-align: center; width:100%;}
.Kato_Bgs p:nth-child(2) {width:50%; margin: 10% auto; display: block; position: relative;}
.Kato_Bgs p:nth-child(2) span {position: absolute; top: 23%; left: 1%; width: 60%; display: block; animation: ani1 2s infinite;}
@keyframes ani1 {
	0% {transform: translate(0px,0px);}
	100% {transform: translate(100%,0px);}
}
@-webkit-keyframes ani1 {
	0% {transform: translate(0px,0px);}
	100% {transform: translate(100%,0px);}
}
@media screen and (min-width: 750px) {
	.swiper {max-width: 750px; left:50%; transform: translate(-50%,0%);}
	.Kato_Bgs {max-width: 750px; left:50%; transform: translate(-50%,0%);}
	.Kato_Bgs p:nth-child(1) {font-size: 48px; line-height: 72px;}
	.Sessions {width:70%;}
	.S1 .S1_2 {left:50%; width:70%; transform: translate(-50%,0%);}
	.S1 .T1_1 {font-size: 30px; padding: 10% 0 7%;}
	.S1 h1 {font-size: 42px; line-height: 60px;}
	.Kato .Header {padding: 20px 5%;}
	.Kato .Header .GnLogo {width:150px; height: 28px; background-size: 150px 28px;}
	.swiper-pagination {font-size: 0px;}
	.swiper {padding-top: 68px;}
	.S2 h1 {font-size: 42px; line-height: 68px;}
	.S2 .T2_1 {font-size: 28px; line-height: 44px;}
	.S3 .T3_1 {font-size: 24px; line-height: 40px;}
	.S3 h1 {font-size: 42px; line-height: 68px;}
	.S4 .Ri .T4_1 {font-size: 32px; line-height: 44px;}
	.S4 .Le .T4_2 {font-size: 32px; line-height: 44px;}
	.Quick {left:50%; max-width: 750px; transform: translate(-50%,0%);}
	.S5 .Ri .T4_1 {font-size: 32px; line-height: 44px;}
	.S5 .Le .T4_2 {font-size: 32px; line-height: 44px;}
	.S6 .T6_1 {font-size: 32px; line-height: 44px;}
	.S7 .T7_1 {font-size: 30px; line-height: 44px;}
	.S8 .T8_1 {font-size: 32px; line-height: 44px;}
	.S9 h1 {font-size: 42px; line-height: 68px;}
	.S9 .T9_1 {font-size: 28px; line-height: 44px;}
	.S9 .T9_2 {font-size: 24px; line-height: 40px;}
	.S10 .T10_1 {font-size: 24px; line-height: 40px;}
	.S10 .Tel_Go {font-size: 24px; line-height: 40px;}
	.Quick .Support {font-size: 28px; height: 80px; line-height: 90px; border-radius: 40px;}
	.Quick .Call {width:80px; height: 80px; background-size: 48px 48px;}
}