@charset "UTF-8";
body { font-family: 'GmarketSans'; word-break: keep-all; }
.sub { padding: 8em 0; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; font-size: 0.875em;font-family: 'Pretendard';}
.inner { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; }

input:not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea, .chk_box label span { border: 1px solid #ddd; background-color: #fff; }
.popup-open { border-color: #000; }
.frm-btn .btn-token { background-color: #006835; color: #fff; font-weight: 400; }
.frm-type01 { border-top: 0.1em solid #000; }
.frm-type01 .frm-box { border-bottom: 1px solid #ddd; }
.frm-type01 .frm-box li { border-top: 1px solid #ddd; }
.frm-type04 { font-size: 1.125em; background-color: #f39800; color: #fff; z-index: 999; box-shadow:  0 -0.5em 0.5em rgba(0,0,0,0.1); }
.frm-type04 .chk_box input:checked + label span { background-color: #000; border-color: #000; }
.frm-type04 .btn-token { background-color: #000; color: #fff; }

.hd { padding: 1em 0; position: absolute; left: 0; top: 0; width: 100%; z-index: 999; text-align: center; }
.hd img { width: 40%; max-width: 450px; }
footer { padding: 3% 0; text-align: center; background-color: #006835; color: #fff; }
footer .logo img { width: 30%; }
footer .info { margin: 1% 0; }


.main { text-align: center; font-size: 1.5em; --shadow : 6px 6px 0 #000,5px 5px 0 #000,4px 4px 0 #000,3px 3px 0 #000,2px 2px 0 #000,1px 1px 0 #000,0 0 0 #000,1px -1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000; overflow: hidden; }
.main section { padding: 10% 0; position: relative; }
.main h1 { font-size: 5em; font-weight: bold; color: #e1e1e1; }
.main h2 { font-size: 3em; line-height: 1.25; }
.main h2 strong { font-size: 1.25em; } 
.main h3 { font-size: 2em; }
.main h4 { font-size: 1.875em; }
.main h5 { font-size: 1.5em; }
.main h6 { font-size: 1.25em; }
.main p { font-size: 1em; }
.main p.psize { font-size: 1.2em; }


.orange { color: #f39800; }
.yellow { color: #fff200; }
.green { color: #006835; }
.mark { position: relative; }
.mark span { position: relative; }
.mark::before { content:""; width: 0; height: 50%; background-color: #fff200; position: absolute; left: 0; bottom: 0;}
.circle span { position: relative; }
.circle span::before { content:"•"; font-size: 0.875em; width: 0.3em; height: 0.3em; display: inline-block; position: absolute; bottom: 130%; left: 0; border-radius: 5em; }

.pos { position: absolute;  width: 25%; }
#sec03 .pos { left: 80%; top: -15%; }
#sec05 .pos { right: 80%; top: -15%; }
#sec06 .pos { left: 80%; top: -5%; }
#sec08 .pos { right: 80%; top: -10%; }
#sec13 .pos { left: 80%; top: -10%; }


#sec01 { background: url(../img/bg_sec01.png) no-repeat center top/100%; }
#sec02 { background-color: #ffd188; }
#sec08 { background-color: #f7f7f7; }
#sec03,#sec09 { background: #f39800 url(../img/bg_img.png) no-repeat center/100%; color: #fff;}
#sec05,#sec12 { background: #006835 url(../img/bg_img.png) no-repeat center/100%; color: #fff;}
#sec06,#sec11 { background-color: #ffef7c; }


#sec01 { text-align: left; color: #fff; }
#sec01 hr { width: 15em; height: 0.2em; margin: 3% 0; background-color: #fff; border: 0; }
#sec01 .box { color: #000; padding: 5%; background-color: #fff; box-shadow: 0.5em 0.5em 1em rgba(0,0,0,0.3); text-align: center; margin-top: 5%; }
#sec01 .txt { margin: 3% 0; }
#sec01 h2 + h5 { margin-bottom: 3%; color: #aaa; font-weight: 300; }
#sec01 .logo { margin: 3% 0 8%; padding: 5% 3%; border: 0.3em solid #000; background: linear-gradient(to bottom, transparent 1.5625em,#ddd 1.5625em, transparent 1.625em,transparent 4.6875em,#ddd 4.6875em,transparent 4.75em),linear-gradient(to right, transparent 2.1875em,#ddd 2.1875em, transparent 2.25em,transparent 5.3125em,#ddd 5.3125em,transparent 5.375em);background-size:100% 100px, 100px 100%; }
#sec01 .list { display: flex; align-items: center; justify-content: center; }
#sec01 .list li { width: 23%; margin: 1%; background-color: #006835; color: #fff; border-radius: 1em; overflow: hidden; }
#sec01 .list li > * { padding: 5% 0; }
#sec01 .list li p { background-color: #f39800; }
#sec01 .list li h3 { font-weight: 700; }  
#sec01 .color { margin-top: 5%; display: flex; align-items: center; justify-content: center; }
#sec01 .color li:nth-child(1) {  --color: #006835; }
#sec01 .color li:nth-child(2) { --color: #f39800; }
#sec01 .color li { width: 50%; display: flex; align-items: flex-end; color: var(--color); }
#sec01 .color li div { width: 8em; height: 8em; margin-right: 3%; background-color: var(--color); }
#sec01 .icon {max-width: 40%; margin: auto; }
#sec01 .icon img { width: 30%; }
#sec02 h2 { margin-bottom: 2%; text-shadow: var(--shadow); color: #fff; }
#sec02 ul { margin-top: 5%; }
#sec02 li { border-radius: 5em; background-color: #fff; box-shadow: var(--shadow); }
#sec02 li h4 { line-height: 2em; font-weight: 700; }
#sec02 li.after { margin: 1% 0; box-shadow: none; background-color: transparent; }
#sec02 li.after h2 { font-weight: 900; width: 1.2em; height: 1.2em;  padding-top: 0.1em;line-height: 1; background-color: #000; color: #fff; border-radius: 5em; margin: auto; }

#sec03 h2 { margin-bottom: 2%; text-shadow: var(--shadow); }
#sec03 .chart-circle { width: 40%; padding-top: 40%; margin: auto; position: relative; background: conic-gradient(rgba(208, 76, 29, 1)0% 60%, rgba(208, 76, 29, 0.4) 60% 100%); border-radius: 50%; margin-bottom: 5%; box-shadow: 0.5em 0.5em 0 rgba(0,0,0,0.2); }
#sec03 .chart-circle h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 65%; height: 65%; background-color: #f39800; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; box-shadow: inset 0.1em 0.1em 0 rgba(0,0,0,0.2);  text-shadow: none;}
#sec03 .list { max-width: 1000px; margin: auto; text-align: left; }
#sec03 .list li { margin-top: 3%; display: flex; align-items: center; }
#sec03 .list li::before { content:""; width: 0.675em; height: 0.675em; display: inline-block; background-color: #fff; border-radius: 1em; vertical-align: middle; margin-right: 2%; }
#sec03 .list .chart-bar1 { --color: 106,206,201; --width: 63%; }
#sec03 .list .chart-bar2 { --color: 40,162,156; --width: 66%; }
#sec03 .list .chart-bar3 { --color: 35,125,130; --width: 62%; }
#sec03 .list .chart-bar { width: 60%; background-color: rgba(var(--color),0.3); margin-left: auto; }
#sec03 .list .chart-bar h6 { width: var(--width); background-color: rgba(var(--color),1); text-align: center; }
#sec03 .txt { margin-top: 3%; font-weight: 300; }
#sec03 .txt small { margin-top: 1%; display: block; color: #fcd594; }

#sec04 h2 { margin: 1% 0 3%; }
#sec04 .list { display: flex; justify-content: center; padding-left: 2px; }
#sec04 .list li { width: 50%; background-color: #fff; border: 1px solid #ddd; margin-left: -2px; }
#sec04 .list h6 { line-height: 2; color: #fff; }
#sec04 .list figure { max-width: 80%; margin: auto;  height: 12em; display: flex; align-items: center; justify-content: center; }
#sec04 .list p { padding-bottom: 3%; }
#sec04 .list p strong { display: block; font-weight: 900; }
#sec04 .list li:nth-child(1) h6 { background-color: #444; }
#sec04 .list li:nth-child(2) h6 { background-color: #9e0b0f; }
#sec04 .list li:nth-child(2) strong { color: rgb(255, 27, 46); }  

#sec05 h6 { margin: 1% 0 3%; }
#sec05 .list li:nth-child(1),
#sec05 .list li:nth-child(2) { --color: #f3be00; }
#sec05 .list li:nth-child(3),
#sec05 .list li:nth-child(4) { --color: #f39800; }
#sec05 .list li:nth-child(5) { --color: #f36500; }
#sec05 .list li { margin-bottom: 1%; display: flex; justify-content: space-between; align-items: center;  }
#sec05 .list .txt { flex-grow: 1; height: 5em; display: flex; align-items: center; background-color: #fff; border-radius: 1em; }
#sec05 .list .icon { width: 30%; text-align: center; }
#sec05 .list .icon img { width: 50%; max-width: 80px; }
#sec05 .list h3 { font-weight: 700; color: #000; }
#sec05 .list h5 { width: 2.5em; line-height: 2.5em; color: #fff; background-color: var(--color); border-radius: 5em; font-weight: 700; margin: 0 1%; }
#sec05 .list li:nth-child(1) .star { filter: invert(64%) sepia(47%) saturate(1175%) hue-rotate(9deg) brightness(105%) contrast(106%); }
#sec05 .list li:nth-child(2) .star { filter: invert(64%) sepia(47%) saturate(1175%) hue-rotate(9deg) brightness(105%) contrast(106%); }
#sec05 .list li:nth-child(3) .star { filter: invert(62%) sepia(79%) saturate(1833%) hue-rotate(1deg) brightness(96%) contrast(101%); }
#sec05 .list li:nth-child(4) .star { filter: invert(62%) sepia(79%) saturate(1833%) hue-rotate(1deg) brightness(96%) contrast(101%); }
#sec05 .list li:nth-child(5) .star { filter: invert(43%) sepia(55%) saturate(2539%) hue-rotate(3deg) brightness(96%) contrast(104%); }

#sec06 h2 img { width: 20%; }
#sec06 h6 { color: #e0c40a; margin-top: 1%; }
#sec06 .list { display: flex; flex-wrap: wrap; justify-content: center; }
#sec06 .list li { width: 31.333%; margin: 1%; margin-top: 8em; background-color: #e9b50c; padding: 1em; padding-bottom: 0.5em; border-radius: 1em; position: relative; }
#sec06 .list .icon { width: 40%; position: absolute; top: 0; left: 50%; transform: translate(-50%,-80%); }
#sec06 .list .txt { height: 8em; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border-radius: 1em; border-bottom: 0; }
#sec06 .list .txt p { color: #666; } 
#sec06 .list h3 { margin-top: 0.3em; color: #fff; font-weight: 700; }

#sec07 .inner > h6 { line-height: 1.4; color: #aaa; }
#sec07 .inner > h6 img { width: 7%; }
#sec07 h2 { margin: 1% 0 3%; }
#sec07 .list { margin-top: 3%; display: flex; }
#sec07 .list li { width: 50%; margin: 1%; }
#sec07 .list li:nth-child(1) { --color1: #8dc63f; --color2: #fff568; }
#sec07 .list li:nth-child(2) { --color1: #00a651; --color2: #ffd300; }
#sec07 .list li:nth-child(3) { --color1: #006835; --color2: #f39800; }
#sec07 .list .box { padding: 5% 0;  }
#sec07 .list .box:nth-child(1) { background-color: #000; color: #fff; }
#sec07 .list .box:nth-child(2) { height: 10em; background-color: var(--color1); color: #fff; font-weight: 800; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#sec07 .list .box:nth-child(2) .logo { width: 80%; }
#sec07 .list .box:nth-child(3) { background-color: var(--color2); }
#sec07 .list .box:nth-child(4) { background: #d52020; color: #fff; }
#sec07 .list strong { font-weight: 800; }
#sec07 .list h5 small { font-weight: 400; font-size: 0.675em; }
#sec07 .img {width: 60%; margin: auto; }

#sec08 h2 { margin: 1% 0; }
#sec08 .list { margin-top: 5%; display: flex; }
#sec08 .list li { width: 31.333%; margin: 1%; }
#sec08 .list .box { background-color: #f38400; color: #fff; padding-top: 5%; }
#sec08 .list .box p { margin-top: 3%; padding: 0 1em; border: 1px solid #fff; display: inline-block; border-radius: 5em; }
#sec08 .list .img { margin-top: 5%; padding: 5%; box-shadow: 0 -1em 1em rgba(0,0,0,0.2);}
#sec08 .list .img img { width: 100%; }
#sec08 .list li > p::before { content:""; display: block; width: 0.2em; height: 3em; background-color: #f39800; margin: 5% auto; }

#sec09 h6,
#sec09 h2 { text-shadow: var(--shadow); }
#sec09 h2 { margin-top: 1%; }
#sec09 .bnr { margin: 3% 0; display: flex; justify-content: center; align-items: center; }
#sec09 .bnr figure { width: 30%; margin-right: 3%; }
#sec09 .bnr h3 { font-style: italic; text-shadow: 4px 4px 0 #000,3px 3px 0 #000,2px 2px 0 #000,1px 1px 0 #000,0 0 0 #000,1px -1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000; }
#sec09 .bnr hr { display: inline-block; width: 3em; height: 0.1em; background-color: #fff; border: 0; box-shadow: 4px 4px 0 #000,3px 3px 0 #000,2px 2px 0 #000,1px 1px 0 #000,0 0 0 #000,1px -1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000;; }
#sec09 .list li { margin-top: 3%; display: flex; }
#sec09 .list .txt { flex-grow: 1; padding: 3% 15% 0; background: url(../img/img_sec09_txt.png) no-repeat right center/100%; color: #000; position: relative; text-align: left; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; margin-left: -10%; }
#sec09 .list h3 { font-weight: 700; }
#sec09 .list .img { width: 27%; position: relative; z-index: 10; box-shadow: var(--shadow); border-radius: 100%;}
#sec09 .list .img>img { border-radius: 100%;}
#sec09 .list li:nth-child(2) {flex-direction: row-reverse; }
#sec09 .list li:nth-child(2) .txt { margin-left: 0; margin-right: -10%; }

#sec10 .youtube h1 { font-weight: 800; color: #f38400;}
#sec10 .youtube .video { width: 100%; padding-top: 56%; position: relative; }
#sec10 .youtube .video iframe { width: 100%; position: absolute; top: 0; height: 100%; left: 0; }

#sec11 h1 { color: #f3d100; }

#sec12 h2 { margin-bottom: 5%; }
#sec12 .category { margin-bottom: 2em; display: flex; flex-wrap: wrap; }
#sec12 .category a { font-size: 1.125em; padding: 0.3em 1em; border: 1px solid #fff; color: #fff; margin-left: -1px; margin-top: -1px; cursor: pointer; display: block; flex-grow: 1; flex-basis: 10%; }
#sec12 .category a:hover,
#sec12 .category a.on { background-color: #f38400; color: #fff; }
#sec12 .tbl-ul { font-size: 1em; }
#sec12 .tbl-ul li { display: flex; align-items: center; border-bottom: 1px solid #000; }
#sec12 .tbl-ul .thead { background-color: #000; color: #fff; }
#sec12 .tbl-ul .td { padding: 0.8em; }
#sec12 .tbl-ul .td:nth-child(1) { width: 15%; }
#sec12 .tbl-ul .td:nth-child(2) { width: 15%; }
#sec12 .tbl-ul .td:nth-child(3) { width: calc(100% - 50% - 8em); }
#sec12 .tbl-ul .td:nth-child(4) { width: 20%; }
#sec12 .tbl-ul .td:nth-child(5) { width: 8em; padding: 0; }
#sec12 .tbl-ul a { display: inline-block; padding: 0.375em 1.5em; background-color: #f38400; color: #fff; border-radius: 0.5em; }
#sec12 .tbl-ul .empty { text-align: center; justify-content: center; padding: 4em 0; color: #fff; }
#sec12 .pg_page,#sec12 .pg_current { color: #fff; }


#sec13 .inner { max-width: 1000px; }
#sec13 h2 { margin-bottom: 5%; }
#sec13 .frm-wrap { font-size: 0.875em; }


/* swiper */
.swiper-button-next, .swiper-button-prev { width: 1em; height: 1em; font-weight: 900; -webkit-border-radius: 5em;-moz-border-radius: 5em;border-radius: 5em; font-size: 3em; background-color: #f39800; color: #fff; }
.swiper-menu { margin-top: 5%; }
.swiper-menu h6 { color: #777; }
.swiper-menu h4 { margin: 1% 0 3%; }
.swiper-menu img { width: 100%; max-width: 800px; }
#sec11 { padding-bottom: 0; }
.swiper-review { margin-top: 5%; overflow: visible; }
.swiper-review li { width: 35%; position: relative; padding-top: 3%; margin: 0 2%; }
.swiper-review li img { width: 90%; }
.swiper-review li::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/phone.png) no-repeat center/100%; }


/* motion */
.main .inner > *:not(ul) { transform: translateY(2rem); opacity: 0; }
.main .inner > *:not(ul).on { animation: effect 0.5s ease-out 0.3s 1 normal forwards; }
.main .inner > ul > li { transform: translateY(2rem); opacity: 0; animation: 0.5s ease-out 0.3s 1 normal forwards;}
.main .inner > ul > li.on { animation-name: effect; }
@keyframes effect {
    100% { transform: translateY(0); opacity: 1; }
}
.mark.on::before { animation: mark 0.6s ease-out 0.3s 1 normal forwards; }
@keyframes mark {
    100% { width: 100%; }
}
#sec03 .pos { animation: pos1 6s linear 0s infinite normal forwards; }
#sec05 .pos { animation: pos2 8s linear 0s infinite normal forwards; }
#sec06 .pos {  }
#sec08 .pos { animation: pos2 8s linear 0s infinite normal forwards; }
#sec13 .pos { animation: pos1 6s linear 0s infinite normal forwards; }
@keyframes pos1 {
    100% { transform: rotate(360deg); }
}
@keyframes pos2 {
    100% { transform: rotate(-360deg); }
}

.frm-type04 .frm-box li { width: 23%; }
/* 반응형 */
@media screen and (max-width: 1480px){
    .inner { width: 94%; }
}
@media screen and (max-width: 1280px){
    .main { font-size: 1.25em; }
}
@media screen and (max-width: 1024px){
    .frm-type04 .frm-tit { display: none; }
}
@media screen and (max-width: 768px){
    .main { font-size: 0.875em; }
    .frm-type04 .frm-chk { display: none; }
    footer {font-size: 0.875em; }
}
@media screen and (max-width: 480px){
    .frm-label { display: none; }
    .frm-type04 .frm-chk { display: block; }
    .frm-btn .btn-token { font-size: 1.125em; }
    .frm-chk .chk_box { margin-bottom: 0.5em; }
    .frm-chk .chk_box:last-child { margin-bottom: 0; }
    .frm-type02 .frm-btn { width: 30%; }
    .frm-type02 .frm-chk { padding-left: 0; }
    .frm-type04 { padding: 0; transform: translateY(100%); margin-bottom: 3.1875em; transition: 0.4s; }
    .frm-type04 .inner { flex-wrap: wrap; width: 100%; }
    .frm-type04 .inner > * { width: 100%; margin-right: 0; padding: 0 0.5em; }
    .frm-type04 .frm-tit { font-size: 1.25em; display: flex; justify-content: center; border-bottom: 1px solid #fff; }
    .frm-type04 .frm-tit * { line-height: 2.5em; padding: 0 0.1em; } 
    .frm-type04 .frm-box { padding-top: 0.25em; flex-wrap: wrap; }
    .frm-type04 .frm-box li { width: 49%; margin-right: 2%; }
    .frm-type04 .frm-box li:nth-child(2n) { margin-right: 0; }
    .frm-type04 .frm-btn { margin: 0.5em 0; }
    .frm-type04 .btn-token { padding: 0; width: 100%; height: 2.5em; }
    .frm-type04.open { transform: translateY(0%); margin-bottom: 0; }

    .frm-type04 .frm-tit h3 { position: relative; }
    .frm-type04 .frm-tit h3::after { content:""; width: 1.5em; height: 90%; display: block; position: absolute; left: 105%; top: 5%; background: url(../img/click_img.png) no-repeat center/auto 100%;}


    .main section { padding: 10% 0; }
    .main h1 { font-size: 3em; }
    .main h2 { font-size: 2em; }
    .main h2 strong { font-size: 1.25em; } 
    .main h3 { font-size: 1.5em; }
    .main h4 { font-size: 1.375em; }
    .main h5 { font-size: 1.25em; }
    .main h6 { font-size: 1.125em; }
    .main p { font-size: 1em; }

    .main br { display: none; }
    .main .list { flex-wrap:wrap; }
    #sec01 .list li { width: 48%; }
    #sec01 .list li p { font-size: 0.6em; }
    #sec01 .color li div { width: 6em; height: 6em;}
    #sec02 li.after { margin: 3% 0; }
    #sec03 .list li { display: block; }
    #sec03 .list .chart-bar { width: 100%; }
    #sec03 .list li { margin-bottom: 3%; }
    #sec03 .list li > h6 {display: inline-block; margin-bottom: 1%; }
    #sec04 .list { padding: 0; }
    #sec04 .list li {width: 100%; margin: 0; }
    #sec05 .list li { flex-wrap: wrap; margin-bottom: 8%; }
    #sec05 .list .txt { width: 100%; height: 4em; margin-bottom: 3%; }
    #sec05 .list .icon { width: 30%; align-items: center; }
    #sec05 .list .txt img { width: 40%; }
    #sec05 .list li .star { width: 50%; }
    #sec05 .list li .star img { width: 18%; }
    #sec06 .list li { width: 98%; }
    #sec06 .list .icon { width: 20%; }
    #sec06 .list li { margin-top: 6em; }
    #sec07 .list li { width: 98%; }
    #sec07 .list .box:nth-child(2) { height: auto; }
    #sec07 .list .box:nth-child(2) .logo { width: 50%; }
    #sec08 .list li { width: 80%; margin: auto; margin-bottom: 5%; }
    #sec09 .list li { display: block; margin-top: -5%; }
    #sec09 .list .img { margin-left: auto; }
    #sec09 .list .txt { margin: 0 !important; padding:12% 5% 7%; margin-top: -3em !important; }
    #sec09 .bnr h3 br { display: block; } 
    #sec06 h2 img { display: block; margin: auto; }

    #sec12 .tbl-ul { border-top: 2px solid #000; }
    #sec12 .tbl-ul li { padding: 1em; flex-wrap: wrap; text-align: left; }
    #sec12 .tbl-ul .thead { display: none; }
    #sec12 .tbl-ul .td { padding: 0; }
    #sec12 .tbl-ul .td:nth-child(1) { width: auto; margin-right: 0.5em; }
    #sec12 .tbl-ul .td:nth-child(2) { width: auto; }
    #sec12 .tbl-ul .td:nth-child(3) { width: 100%; margin-top: 0.5em; }
    #sec12 .tbl-ul .td:nth-child(4) { width: 50%; margin-top: 0.375em; }
    #sec12 .tbl-ul .td:nth-child(5) { width: 50%; text-align: right; margin-top: 0.5em; }
    .,.,
    .swiper-review li { width: 80%; }
    footer { font-size: 0.675em; }
}
@media screen and (max-width: 340px){
    body { zoom: 0.8; }
}
@media screen and (max-width: 300px){
    body { zoom: 0.7; }
}

/* 230527 추가 */
.landing .header { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; text-align: center; background-color: #fff; border-bottom: 1px solid #ddd; -webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s; }
.landing .top-banner { padding: 0.5em 0; font-size: 2em; background-color: #006835; color: #fff; }
.landing .top-banner .yellow { border-bottom: 2px solid #fff200; }
.landing .top-banner .logo { height: 0.95em; }
.landing .gnb { display: flex; align-items: center; justify-content: center; }
.landing .gnb li { font-size: 1.5em; margin: 0 0.2em; padding: 1em; }
.landing .header.hide { top: -7.625em; }
.landing .main { margin-top:8.35em; margin-bottom: 5em; }

#consulting h2 { margin-top: 0.25em;}
#consulting .red { color: #ff1616; }
#consulting .logo { width: 80%; max-width: 935px; margin-top: 3em; }
#consulting .ico { width: 10%; margin-bottom: 1em; }
#consulting .img { margin-top: 3em; }
#consulting .img img { width: 90%; max-width: 100%; }
#consulting ul { margin: 3em 0; }
#consulting li { font-size: 1.25em; margin: 0.5em 0; display: flex; justify-content: center; }
#consulting small { font-size: 0.875em; }
#consulting .chk { height: 1.25em; }
#consulting .txt { font-size: 1.25em; border: 0.1em solid #f39800; padding: 2em 1em;}
#consulting .arrow { margin: 1em 0; }

#edu { background-color: #006835; }
#edu h5 { color: #fff }
#edu .inner > h5 img { width: 7%; }
#edu h2 { margin-top: 0.3em; margin-bottom: 0.3em; color: #fff }
#edu h2 b { background-color: #f36d00; }

#edu ul { display: flex; }
#edu li { width: 23%; margin: 1%; }
#edu li p { margin-top: 0.5em; color: #fff; }
.landing #edu { padding-bottom: 7em; }


#growth .inner > h6 { line-height: 1.4; color: #aaa; }
#growth .inner > h6 img { width: 7%; }
#growth h2 { margin: 1% 0 3%; }
#growth .list { margin-top: 3%; display: flex; }
#growth .list li { width: 50%; margin: 1%; }
#growth .list li:nth-child(1) { --color1: #8dc63f; --color2: #fff568; }
#growth .list li:nth-child(2) { --color1: #00a651; --color2: #ffd300; }
#growth .list li:nth-child(3) { --color1: #006835; --color2: #f39800; }
#growth .list .box { padding: 5% 0;  }
#growth .list .box:nth-child(1) { background-color: #000; color: #fff; }
#growth .list .box:nth-child(2) { height: 10em; background-color: var(--color1); color: #fff; font-weight: 800; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#growth .list .box:nth-child(2) .logo { width: 80%; }
#growth .list .box:nth-child(3) { background-color: var(--color2); }
#growth .list .box:nth-child(4) { background: #d52020; color: #fff; }
#growth .list strong { font-weight: 800; }
#growth .list h5 small { font-weight: 400; font-size: 0.675em; }
#growth .img {width: 60%; margin: auto; }


#merit { background-color: #ffd188; }
#merit .red { color: #ff1616; }
#merit ul { display: flex; }
#merit li { width: 23%; margin: 1%; }
#merit li p { margin-top: 0.5em; }

#merit ul.addList { margin: 2em 0; display: flex; justify-content: center; }
#merit ul.addList > li:nth-child(1) { --color:#006835; --txt: #fff; }
#merit ul.addList > li:nth-child(2) { --color:#B40404; --txt: #fff;;}
#merit ul.addList  li { width: 50%; border: 0.3em solid var(--color); border-top: 0; background-color: #fff; padding-bottom: 1.5em; }
#merit ul.addList  li h6 { color: var(--txt); background-color: var(--color); padding: 0.3em 0; font-weight: 700; }
#merit ul.addList  li .img { max-width: 90%; margin: 1em 0; }
#merit ul.addList li .desc { display: inline-block; text-align: left; }
#merit ul.addList li p i { display: inline-block; vertical-align: top; margin-top: 0.3em; }
#merit ul.addList li p span { display: inline-block; }

#merit .img { margin: 3em 0; }
#merit .img img { width: 80%; max-width: 900px; }
#merit .txt::before { content:"“"; display: block; font-size: 2em; line-height: 0.3; font-weight: 700; }
#merit .chk-list { font-size: 1.125em; margin-top: 2em; }
#merit .chk-list p { margin-bottom: 0.5em; }
#merit .chk-list .chk { height: 0.875em; margin-right: 0.3em; filter: brightness(0); }
.landing #merit { padding-bottom: 7em; }
.landing #merit .banner { padding: 0.5em 0; position: absolute; bottom: 0; left: 0; width: 100%; background-color: #006835; color: #fff; font-size: 2em; font-weight: 500; }

#compare { background: url(../img/landing_bg_compare.png) no-repeat center/cover; }
#compare h2 { margin: 0.2em 0; }
#compare h4 { background-color: #B40404; color: #fff; font-weight: 700; display: inline-block; -webkit-border-radius: 5em;-moz-border-radius: 5em;border-radius: 5em; padding: 0 1em; margin-top: 0.5em; margin-bottom: 1.2em; }
#compare h3 { font-weight: 700; }
#compare ul { margin: 2em 0; display: flex; justify-content: center; }
#compare li:nth-child(1) { --color:#006835; --txt: #fff; }
#compare li:nth-child(2) { --color:#B40404; --txt: #fff;;}
#compare li { width: 50%; border: 0.3em solid var(--color); border-top: 0; background-color: #fff; padding-bottom: 1.5em; }
#compare li h6 { color: var(--txt); background-color: var(--color); padding: 0.3em 0; font-weight: 700; }
#compare li .img { max-width: 90%; margin: 1em 0; }
#compare li .desc { display: inline-block; text-align: left; }
#compare li p i { display: inline-block; vertical-align: top; margin-top: 0.3em; }
#compare li p span { display: inline-block; }
#compare .txt { font-size: 1.125em; margin-bottom: 1.5em; }
#compare .txt .chk { height: 1.25em; }

#menu { background: url(../img/landing_bg_menu.png) no-repeat center/cover; color: #fff; }
#menu h2 { margin-top: 0.3em; }
#menu h2 b { background-color: #f36d00; }
#menu .con { margin-top: 3em; padding: 0 3%;}
#menu .menustep { display: flex; }
#menu .menustep > li { width: 33%; margin: 1%; margin-bottom: 2%;}
#menu .step { max-width: 700px; margin: auto; }
#menu .step li { display: flex; margin-bottom: 0.5em; background-color: #fff; -webkit-border-radius: 3em;-moz-border-radius: 3em;border-radius: 3em; overflow: hidden; align-items: center; line-height: 2.375; }
#menu .step span { width: 7em; text-align: center; font-weight: 700; background-color: #f39800; color: #fff; -webkit-border-radius: 5em;-moz-border-radius: 5em;border-radius: 5em; display: inline-block; vertical-align: top; }
#menu .step p { color: #000; padding: 0 1em; display: inline-block; }

#menu .menu { height: 14em; }
#menu .menu .swiper-wrapper { align-items: center; }
#menu .menu .swiper-slide { width: 20%; height: auto; font-size: 0.875vw; }
#menu .menu .swiper-slide img { width: 15em; }
#menu .menu .swiper-slide-active { font-size: 1vw; }
#menu .menu .swiper-slide-active img { width: 18em; }


#viewslide { background: url(../img/landing_bg_compare.png) no-repeat center/cover; }
#viewslide .trophy { width: 30%; margin-bottom: 1em; }
#viewslide .ranking { display: flex; }
#viewslide .ranking > li { width: 33%; margin: 1%; margin-bottom: 2%;}

#viewslide .starfive { width: 50%; margin-top: 1em; margin-bottom: 1em; }

#viewslide .swiper.reviews { width: 100%; height: 100%; margin-top: 2em; }
#viewslide .swiper-wrapper { list-style-type: none; /* 리스트 스타일 제거 */ padding: 0; margin: 0; }
#viewslide .swiper-slide { height: auto; display: flex; justify-content: center; align-items: center; }
#viewslide .swiper-slide li {  }
#viewslide .swiper-slide img { height: 100%; object-fit: cover; /* 이미지 비율 유지 */ }


.fixed { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #000; color: #fff; padding: 1em 0; cursor: pointer; z-index: 9999; }
.fixed .inner { display: flex; line-height: 1.2; align-items: center; }
.fixed h4 { text-align: center; }
.fixed h4 small { font-size: 1.5em; }
.fixed h4 strong { font-size: 2.25em; }
.fixed hr { width: 0.1em; height: 4em; background-color: #aaa; margin: 0 3em; display: block; border: 0; }
.fixed p small { font-size: 1.875em; }
.fixed p strong { font-size: 2.25em; }
.fixed .img { margin-left: auto; height: 6em; }
.fixed .img img { height: 100%; width: auto; }

.popup-wrap { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.8); z-index: 999; display: none; }
.popup-box { width: 90%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 600px; }
.popup-title { font-weight: 700; background-color: #000; color: #fff; display: flex; align-items: center; justify-content: space-between;  padding: 0.5em 2em; }
.popup-title > * { font-size: 1.875em; }
.popup-close-btn { cursor: pointer; }
.popup-close-btn i { vertical-align: middle; }
.popup-content {  padding: 1em 2em; }
.popup-content .frm-type01 { border-top:0; }
.popup-content .frm-type01 .frm-box { border-bottom: 0; }
.popup-content .frm-type01 .frm-box li { padding: 1em 0; }
.popup-content .frm-type01 .frm-box li:nth-child(1) { border-top: 0; }
.popup-content .frm-btn .btn-token { padding: 0.6em 0; -webkit-border-radius: 5em;-moz-border-radius: 5em;border-radius: 5em; font-weight: 700;  }

@media screen and (max-width: 1280px){
    .landing .header,
    .fixed { font-size: 1.25vw; }
    .landing #merit .banner { font-size: 4vw; }
    .landing .main { margin-top:15vw; margin-bottom: 12vw; }
    #menu .menu { height: 15%; }
    #menu .menu .swiper-slide { width: 33.333%; }
    #menu .menu .swiper-slide img { width: 70%; }
    #menu .menu .swiper-slide-active img { width: 100%; }
}
@media screen and (max-width: 768px){
    .popup-wrap { font-size: 0.875em; }
}
@media screen and (max-width: 480px){

    #edu h5 { font-size: 1em; }
    #edu ul { flex-wrap: wrap; margin-top: 2em; }
    #edu li { width: 48%; margin: 1%; }
    #edu br {display: inline;}

    #merit ul { flex-wrap: wrap; margin-top: 2em; }
    #merit li { width: 48%; margin: 1%; }
    #merit br {display: inline;}

    #merit ul.addList { flex-wrap: wrap; }
    #merit ul.addList li { width: 100%; margin-bottom: 2em; }
    #merit ul.addList li .desc p { white-space: nowrap; }
    #merit ul.addList li .desc br { display: block; }
    #merit ul.addList li .img { max-width: 80%; }

    .landing .header .inner { font-size: 1.875em; }
    .landing .header.hide { margin-top: -11em; }

    .landing .fixed { font-size: 2vw; }
    .landing .main { margin-top:44vw; margin-bottom: 15vw; }
    .fixed p small { display: block; }
    .fixed p small b { display: block; }
    .fixed p br { display: none; }
    .fixed hr { margin: 0 1.5em; }

    #growth .list li { width: 98%; }
    #growth br {display: inline;}

    #compare ul { flex-wrap: wrap; }
    #compare li { width: 100%; margin-bottom: 2em; }

    #compare li .desc p { white-space: nowrap; }
    #compare li .desc br { display: block; }
    #compare li .img { max-width: 80%; }

    #compare .txt { font-size: 1em; }

    #menu h5 { font-size: 1em; }

    #menu .menustep {flex-wrap: wrap; margin-top: 2em; justify-content: center;}
    #menu .menustep > li { width: 50%; margin: 1%; }

    #menu .step li { margin-bottom: 1em; background-color: transparent; display: block; text-align: left; -webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;  }
    #menu .step span { display: block; }
    #menu .step p { background-color: #fff; -webkit-border-radius: 5em;-moz-border-radius: 5em;border-radius: 5em; padding: 0 1em; width: 100%; margin-top: 0.5em; }

    .popup-wrap { font-size: 0.625em; }
}