@charset "UTF-8";
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'KoPubDotum';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/KoPubDotumMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* { word-break: keep-all; }

.sub { width: 100%; max-width: 1200px; min-height: 100vh; margin: auto; font-size: 0.75em; padding: 120px 0; font-family:'Malgun Gothic', dotum, sans-serif; }

.inner { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.gmarket { font-family: 'GmarketSans', sans-serif; font-weight: 700; }
.yellow { color: #fffcd2; }
.mint { color: #ccfff7; }
.sky { color: #00aeef; }
.pink { color: #f06eaa; }
.orange { color: #f18f0f; }
.purple { color: #94a5ff; }
.blue { color: #0072bc; }

body { font-family: 'NanumSquare', sans-serif; }
img { max-width: 100%; vertical-align: top; }

header { font-size: 1rem; position: fixed; right: 2%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; z-index: 999; }
header > a { width: 8em; margin-top: 1em; }
header ul { margin-top: 2em; }
header ul li { margin-top: 1em; }
header ul a { display: inline-block; width: 1.25em; height: 1.25em; background-color: #00ccd8; border-radius: 100px; box-shadow: 2px 2px 2px rgba(0,0,0,0.3); transition: 0.3s; }
header ul a:hover,
header ul a.on { box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3) ; }

footer { font-size: 1rem; text-align: center; padding: 4em 0; color: #555; }
footer .logo { margin-bottom: 2em; }
footer .logo img { width: 15em; }
footer .info { line-height: 1.6; font-size: 1.125em; }

.main { font-size: 1.25rem; color: #444; text-align: center; line-height: 1.3; }
.main section { min-height: 100vh; padding: 5em 0; overflow: hidden; }
.main h1 { font-size: 5.4em; }
.main h2 { font-size: 4em; }
.main h3 { font-size: 3em; }
.main h4 { font-size: 2.1em; }
.main h5 { font-size: 1.6em; }
.main h6 { font-size: 1.4em; }
.main p { font-size: 1.2em; line-height: 1.5; }

.tit { margin-bottom: 2em; }
.tit p { color: #666; margin-top: 1em; font-weight: 500; }



#sec01 { background: url(../img/bg_sec01.png) no-repeat center/cover; }
#sec02 { background: url(../img/bg_sec02.png) no-repeat center/cover; }
#sec03 { background: #f9f9e3; }
#sec04 { background: url(../img/bg_sec04.png) no-repeat center/cover; }
#sec05 { background: url(../img/bg_sec05.png) no-repeat center bottom/100%; }
#sec06 { background: url(../img/bg_sec06.png) no-repeat center top 15em/cover; }
#sec07 { background: url(../img/bg_sec07.png) no-repeat center top/cover; }
#sec08 { background: #b9b6e3; }


#sec01 { padding: 0; display: flex; align-items: flex-end; text-align: center; color: #fff; }
#sec01 .logo img { width: 22%; }
#sec01 .tit { margin: 3em 0; line-height: 1.2; }
#sec01 .tit h3, #sec01 .tit h1 { position: relative; }
#sec01 .tit div:nth-child(2) { width: 100%; position: absolute; top: 0; left: 0; }
#sec01 .tit .shadow { text-shadow: 3px -3px 0px #98534F, -3px -3px 0px #98534F, -3px 3px 0px #98534F, 3px 3px 0px #98534F,0px -3px 0px #98534F, 0px -3px 0px #98534F, 0px 3px 0px #98534F, 0px 3px 0px #98534F,3px 0px 0px #98534F, -3px 0px 0px #98534F, -3px 0px 0px #98534F, 3px 0px 0px #98534F,10px 10px 10px rgba(0,0,0,0.2); }
#sec01 .tit .yellow { background: linear-gradient(360deg, #FFFCD2 5.88%, #FFFCD2 46.32%, #eee9a0 48.95%, #FFFCD2 79.13%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#sec01 .tit .mint { background: linear-gradient(360deg, #ccfff7 5.88%, #ccfff7 46.32%, #91ebe6 48.95%, #ccfff7 79.13%);-webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#sec01 .img img { max-width: 660px; width: 100%; margin-bottom: -2em; }

#sec01 .img img {
    animation-name: sec01_move;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
@keyframes sec01_move {
    0%   { transform: rotate(0deg); }
    30%   { transform: rotate(5deg); }
    60%   { transform: rotate(0deg); }
    60%   { transform: rotate(-5deg); }
    100%   { transform: rotate(0deg); }
}





#sec02 .inner { position: relative; }
#sec02 .img { position: absolute; top: -5em; left: 0; }
#sec02 .img img { width: 14%; }
#sec02 .txt { margin-top: 2em; background: url(../img/txt_sec02.png) no-repeat center/auto 100%; }
#sec02 .txt h4 { padding: 1.5em 0; display: inline-block; }
#sec02 .txt strong { background:linear-gradient(to bottom, transparent 60%, #fff799 60%); }


#sec03 li { margin-bottom: 3em; }
#sec03 li > div { box-shadow: 10px 10px 15px rgba(0,0,0,0.2); border-radius: 1rem; overflow: hidden; }
#sec03 .txt { padding: 1em 1.5em; background-color: #cb9fdb; color: #fff; position: relative; }
#sec03 .txt div { flex-grow: 1; }
#sec03 .txt h2 { color: #cb9fdb; font-weight: 700; width: 1.5em; height: 1.5em; line-height: 1.5; background-color: #fff; text-align: center; border-radius: 100%; position: absolute; top: 50%; left: 0.5em; transform: translateY(-50%); }
#sec03 .txt h4 { font-weight: 800; line-height: 1.2; }
#sec03 .txt p { font-size: 1em; margin-top: 0.5em; }
#sec03 li:nth-child(even) .txt { background-color: #f384b7; }
#sec03 li:nth-child(even) .txt h2 { color: #f384b7; }


#sec04 .img-wrap { position: relative; }
#sec04 .img-wrap .pos { position: absolute; right: 0; top: 0; width: 40%;}
#sec04 .img-wrap .img { position: relative; z-index: 10; }
#sec04 .img-wrap .img-1 { width: 45% }
#sec04 .img-wrap .img-2 { width: 47%; margin-top: 10em; }

#sec04 .img-wrap .img {
    animation-name: sec04_move;
    animation-duration: 1.7s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
#sec04 .img-wrap .img-2 { animation-delay: 0.4s }
@keyframes sec04_move {
    0%   { transform: translateY(0); opacity: 1; }
    50%   { transform: translateY(-20px); opacity: 1; }
    100%   { transform: translateY(0); opacity: 1; }
}





#sec05 h5 { line-height: 1.2; font-weight: 700; background-color: #fff; border: 1px solid #ddd; padding: 0.5em; display: inline-block; border-radius: 0.5em; box-shadow: 15px 15px 15px rgba(0,0,0,0.2); width: 80%; }
#sec05 .list { margin-top: 4em; display: flex; flex-wrap: wrap; }
#sec05 .list li { width: 23%; margin: 1%; -webkit-border-radius: 1em;-moz-border-radius: 1em;border-radius: 1em; overflow: hidden; background-color: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,0.1);}
#sec05 .list li p { padding: 0.5em; font-size: 1.25rem; }

#sec06 .inner { margin-top: -15em; position: relative; z-index: 10;}
#sec06 dl { background-color: #fff; margin-top: 6em; display: flex; flex-wrap: wrap; box-shadow: 15px 15px 15px rgba(0,0,0,0.1); border-radius: 1em;  }
#sec06 dt { width: 100%; height: 3.5em; background-color: #292489; position: relative; border-radius: 1em 1em 0 0; }
#sec06 dt img { width: 58%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#sec06 dd { width: 50%; padding: 3em; text-align: left; margin-top: 1em; line-height: 1.7; }


#sec07 .logo-wrap { display: flex; flex-wrap: wrap; background-color: #fff; justify-content: center;  padding: 2em; border-radius: 1em; align-items: center; box-shadow: 15px 15px 15px rgba(0,0,0,0.1); }
#sec07 .logo-wrap div { width: 25%; padding: 1em; }
#sec07 .icon { height: 9em; background: url(../img/icon_sec07_bg.png) no-repeat center/auto 100%; display: flex; align-items: flex-end; justify-content: center; }
#sec07 .icon img { width: 7em; }
#sec07 dl { margin-top: 3em; }
#sec07 dt h5 { line-height: 2; background-color: #16387c; color: #fff; border-radius: 0.5em; }
#sec07 dd { display: flex; justify-content: space-between; }
#sec07 dd .img { width: 48%; padding: 1em; margin: 2em 0; border-radius: 0.5em; background-color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 15px 15px 15px rgba(0,0,0,0.1); }


#sec08 { color: #fff; }
#sec08 .tit .icon img { width: 8em; }
#sec08 .tit h2 { margin-top: 0.5em; }
#sec08 .tit p { color: inherit; margin-top: 0.5em;}
#sec08 .inquiry-wrap { display: flex; flex-wrap: wrap; }
#sec08 .inquiry-box { display: flex; width: 50%; padding: 10px 0; flex-grow: 1; }
#sec08 .inquiry-box h5 { font-size: 1.2em; width: 9em; line-height: 2.25; padding-right: 1.5em; text-align: right; font-weight: 700; }
#sec08 .inquiry-frm { flex-grow: 1; font-size: 0.875em; }
#sec08 .inquiry-txt { width: 100%; padding: 0 0.8em; height: 3.2em; border-radius: 0.5em;  background-color: #fff; border: 0; }
#sec08  textarea.inquiry-txt { padding: 0.8em; min-height: 15em }

#sec08 .inquiry-chk-wrap { display: flex; justify-content: flex-start }
#sec08 .inquiry-chk { flex-grow: 1; margin-right: 0.5em; }
#sec08 .inquiry-chk:last-child { margin-right: 0; }
#sec08 .inquiry-chk input { display: none; }
#sec08 .inquiry-chk input + label { display: block; color: #222; line-height: 3.2em; }
#sec08 .inquiry-chk input:checked + label { background-color: #222;color: #fff;  }

#sec08 .inquiry-agree { font-size: 0.875em; margin-top: 0.5em; text-align: right; }

#sec08 .inquiry-btn { font-size: 1.25em; width: 12em; height: 3em; margin: 1.5em auto 0; background-color: #222; border: 1px solid #222; color: #fff; display: block; font-weight: 500; }




















.time1 {  animation-delay: 0.2s; }
.time2 {  animation-delay: 0.4s; }
.time3 {  animation-delay: 0.6s; }
.time4 {  animation-delay: 0.8s; }
.time5 {  animation-delay: 1.0s; }
.time6 {  animation-delay: 1.2s; }

.moveT { transform: translateY(80px); opacity: 0;
    animation-duration: 0.8s; 
    animation-timing-function: ease-out; 
    animation-iteration-count: 1; 
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.moveT.active { animation-name: moveT; }
@keyframes moveT {
    to   { transform: translateY(0); opacity: 1; }
}

.moveB { transform: translateY(-80px); opacity: 0;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.moveB.active { animation-name: moveB; }
@keyframes moveB {
    to   { transform: translateY(0); opacity: 1; }
}

.moveL { transform: translateX(80px); opacity: 0;
    animation-duration: 0.8s; 
    animation-timing-function: ease-out; 
    animation-iteration-count: 1; 
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.moveL.active { animation-name: moveL; }
@keyframes moveL {
    to   { transform: translateX(0); opacity: 1; }
}

.moveR { transform: translateX(-80px); opacity: 0;
    animation-duration: 0.8s; 
    animation-timing-function: ease-out; 
    animation-iteration-count: 1; 
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.moveR.active { animation-name: moveR; }
@keyframes moveR {
    to   { transform: translateX(0); opacity: 1; }
}

.scale { transform: scale(0); opacity: 0;
    animation-duration: 0.8s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.scale.active { animation-name: scale; }
@keyframes scale {
    to   { transform: scale(1); opacity: 1; }
}



@media screen and (max-width: 1280px){
    html { font-size: 14px; }
    .inner { max-width: 94%; }
}
@media screen and (max-width: 1024px){
    .main section { min-height: 0; padding: 10em 0; }
    .main h2 { font-size: 3.6em; }
    #sec01 { padding-top: 10em; }
    #sec02 .img { top: -10em; }
}
@media screen and (max-width: 768px){
    html { font-size: 12px; }
    header { top: auto; bottom: 5%; transform: translateY(0); }
    header ul { display: none; }

    .main section { min-height: 0; padding: 8em 0; }
    .main h1 { font-size: 5em; }
    .main h2 { font-size: 3.5em; }
    .main h3 { font-size: 3em; }
    .main h4 { font-size: 1.8em; }
    .main h5 { font-size: 1.6em; }
    .main h6 { font-size: 1.4em; }
    .main p { font-size: 1.2em; }
    .tit p { font-size: 1.25em; }

    #sec01 { padding-top: 8em; }
    #sec02 .img { top: -8em; }
    #sec03 .txt h2 { font-size: 2.5em; top: 35%; }
    #sec03 .txt p { font-size: 1.125em; }

    #sec05 .list li { width: 48%; }
    #sec05 .list li img { width: 100%; }

    #sec08 .inquiry-box { width: 100%; }
    #sec08 .inquiry-chk-wrap { padding-right: 30%; }
}
@media screen and (max-width: 450px){
    html { font-size: 10px; }
    .main h1 { font-size: 4em; }
    .main h2 { font-size: 3em; }
    .main h3 { font-size: 2.5em; }
    .main h4 { font-size: 1.875em; }
    .main h5 { font-size: 1.8em; }
    .main h6 { font-size: 1.6em; }
    .main p { font-size: 1.4em; }
    .tit p { font-size: 1.2em; }
    .scale { padding: 0 0.3em; }
    #sec03 .txt p { font-size: 1.2em; }

    #sec01 .logo img { width: 35%; }
    #sec02 .txt { background: rgba(255,255,255,0.8); box-shadow: 5px 5px 10px rgba(0,0,0,0.1); }
    #sec03 .txt h2 { display: none; }
    #sec03 .txt h4 br { display: none; }
    #sec03 .txt { padding: 1em; }

    #sec06 dd { width: 100%; padding: 0 1em; margin-top: 0; }
    #sec06 dd:nth-child(2) { padding-top: 1em; }
    #sec06 dd:last-child { padding-bottom: 1em; }
    #sec06 dd p { font-size: 1.2em; }

    #sec07 .logo-wrap div { width: 50%; padding: 1em; }
    #sec08 .inquiry-box { flex-direction: column; padding: 0; padding-bottom: 10px; }
    #sec08 .inquiry-box h5 { width: 100%; padding-right: 0; text-align: left; }
}