@import url(../fonts/stylesheet2.css);

* { margin: 0; padding: 0; box-sizing: border-box; outline: none; border: none; text-decoration: none; -webkit-font-smoothing : antialiased; }

html { font-size: 62%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 7rem; letter-spacing: -0.06rem; line-height: 1.7; word-break: keep-all; }
body { overflow: hidden; background-color: var(--c-mono-0); font-family: "NanumSquareNeo", Pretendard, sans-serif; font-kerning: normal; color: var(--c-mono-19); font-weight: 500; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }
li,ol,dl,dt { list-style: none; }
a { text-decoration: none; }
em, address { font-style: normal; display: block; margin-bottom: 1rem; font-weight: 700; }
section { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding: 10% 15%; } 
.container { width: 100%; }
.heading { display: flex; justify-content: space-between; align-items: center; }
.heading h1 { font-size: 6rem; }
.heading p { font-size: 2rem; }
h1 { font-size: 7rem; font-weight: 700; }
h2 { font-size: 6rem; font-weight: 700; }
h3 { font-size: 3.5rem; font-weight: 700; line-height: 1.5; }
h4 { font-size: 3rem; font-weight: 700; }
h5 { font-size: 2.5rem; font-weight: 700; }
p { font-size: 1.8rem; }

::-moz-selection { background: var(--c-main); color: var(--c-mono-0); }
::selection { background: var(--c-main); color: var(--c-mono-0); }




/* =================================== article_header */
.article_header { min-height: 50vh; width: 100%; display: table; padding-bottom: 0; padding-top: 7%; background-color: var(--c-mono-0); overflow: visible; }
.article_header .head_inner { position: relative; display: block; margin-top: 5rem; }
.article_header .head_inner .inner_nav { display: flex; width: 100%; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.article_header .head_inner .inner_nav li { margin-right: 1rem; font-size: 1.8rem; font-weight: 700; color: var(--c-mono-8); }
.article_header .head_inner .inner_nav li.dote { margin-right: .5rem; }
.article_header .head_inner .inner_nav li a { color: var(--c-mono-8); }
.article_header .head_inner .inner_nav li .depth { display: block; width: 4px; height: 4px; background-color: var(--c-mono-8); border-radius: 100%; }
.article_header .head_inner .inner_nav li.dropDown { position: relative; margin-right: 0; font-weight: 700; }
.article_header .head_inner .inner_nav li.dropDown:hover { color: var(--c-main); cursor: pointer; }
.article_header .head_inner .inner_nav li.dropDown .submenu { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: max-content; padding: 0 2rem; opacity: 0; visibility: hidden; transition: all 0.15s ease-in; border: 1px solid var(--c-mono-4); background: var(--c-mono-0); text-align: center; z-index: 2; }
.article_header .head_inner .inner_nav li.dropDown:hover .submenu { opacity: 1; visibility: visible; }
.article_header .head_inner .inner_nav li.dropDown .submenu li { margin-right: 0; }
.article_header .head_inner .inner_nav li.dropDown .submenu li a { display: inline-block; padding: 1rem 0; background: var(--c-mono-0); }
.article_header .head_inner .inner_nav li.dropDown .submenu li a:hover { color: var(--c-mono-18); transition: 0.3s; }
.article_header .head_inner .inner_nav li.dropDown .submenu li a.active { color: var(--c-main); }

.article_header .head_inner .inner_tit { display: block; width: 100%; margin-top: 4rem; }
.article_header .head_inner .inner_tit h1::after { position: relative; display: inline-block; content: ''; bottom: -4px; right: 5px; width: 1rem; height: 1rem; margin-left: 1rem; background: var(--c-main); border-radius: 100%; }

.animation { position: absolute; top: 0; right: 15%; }
.animation.mainani { right: 0; }
.animation .wrapper { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.animation .wrapper div { position: absolute; border-radius: 50%; width: 7rem; height: 7rem; top: 0; left: 0; }
.animation .wrapper .ball1 { background-color: var(--c-mono-3); animation-name: circle; animation-duration: 3s; animation-timing-function: ease; animation-iteration-count: infinite; animation-delay: 0s; }
.animation .wrapper .ball2 { background-color: rgba(53,76,218,0.6); animation-name: circle; animation-duration: 3s; animation-timing-function: ease; animation-iteration-count: infinite; animation-delay: 0.75s; }
.animation .wrapper .ball3 { background-color: rgba(53,76,218,1); animation-name: circle; animation-duration: 3s; animation-timing-function: ease; animation-iteration-count: infinite; animation-delay: 1.5s; }
@keyframes circle {
    0% { left: 0px; top: 0px; }
    25% { transform: translate(150%, 0%); }
    50% { transform: translate(150%, 150%); }
    75% { transform: translate(0%, 150%); }
    100% { transform: translate(0%, 0%); }
}




/* =================================== 탭 고정 */
.fixed { position: fixed; position: -webkit-fixed; top: 0; left: 0; width: 100%; padding: 1.5% 15%; background: var(--c-mono-0); z-index: 99999; border-bottom: 1px solid var(--c-mono-3); }
.slide-tab-wrap.fixed { background: var(--c-mono-18); }




/* =================================== 컨텐츠 페이드인 & 페이드인다운 */
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
  
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
@-webkit-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




/* =================================== footer */
.footer { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--c-mono-19); }
.footer .footer_container { width: 100%; font-size: 1.8rem; }
.footer .footer_container ul li a { display: block; color: var(--c-mono-0); }
.footer .footer_container .footer_inner { display: flex; padding-bottom: 5rem; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; color: var(--c-mono-0); border-bottom: 1px solid var(--c-mono-13); }
.footer .footer_container .footer_inner div { flex: 0 0 50%; }

.footer .footer_container .footer_inner .footer_mn ul li { position: relative; margin-bottom: 1rem; }
.footer .footer_container .footer_inner .footer_mn .inner_pointer .mn_inner { display: none; position: absolute; top: 11%; left: 40%; height: 100%; z-index: 1; }
.footer .footer_container .footer_inner .footer_mn .inner_pointer:hover .mn_inner { display: block; }
.footer .footer_container .footer_inner .footer_mn .inner_pointer .inner_tit { position: relative; color: var(--c-mono-0); font-size: 3rem; font-weight: 700; cursor: pointer; }
.footer .footer_container .footer_inner .footer_mn .inner_pointer:hover .inner_tit::before { position: absolute; content: ''; top: 40%; left: -5%; width: 1rem; height: 1rem; background: var(--c-main); border-radius: 100%; }
.footer .footer_container .footer_inner .footer_mn .mn_inner li { display: block; font-size: 2rem; }

.footer .footer_container .footer_inner .footer_contact { font-size: 1.8rem; }
.footer .footer_container .footer_inner .footer_contact li { margin-bottom: 4rem; line-height: 2; }
.footer .footer_container .footer_inner .footer_contact li p,
.footer .footer_container .footer_inner .footer_contact li a { color: var(--c-mono-8); }
.footer .footer_container .footer_inner .footer_contact .whitepaper { display: inline-block; width: auto; height: 60px; line-height: 60px; padding: 0 3rem; border-radius: 1rem; border: 1px solid var(--c-mono-0); font-size: 1.7rem; font-weight: 600; text-align: center; color: var(--c-mono-0); cursor: pointer; }
.footer .footer_container .footer_inner .footer_contact .whitepaper:hover { background-color: var(--c-mono-0); color: var(--c-mono-19); transition: 0.3s; }
.footer .footer_container .footer_inner .footer_contact .whitepaper i { margin-left: 1rem; }

.footer .footer_container .footer_index { margin-top: 5rem; font-size: 1.6rem; line-height: 2.1; }
.footer .footer_container .footer_index .flex_layout { display: flex; justify-content: space-between; align-items: flex-start; }
.footer .footer_container .footer_index .flex_layout .text_info { }
.footer .footer_container .footer_index .flex_layout .text_info .index_list { display: flex; margin-bottom: 2rem; }
.footer .footer_container .footer_index .flex_layout .text_info .index_list li a { margin-right: 4rem; }
.footer .footer_container .footer_index .flex_layout .text_info .index_list li a.privacy { font-weight: 700; }
.footer .footer_container .footer_index .flex_layout .text_info .company_info { display: flex; }
.footer .footer_container .footer_index .flex_layout .text_info .company_info li { margin-right: 2rem; color: var(--c-mono-8); }
.footer .footer_container .footer_index .flex_layout .text_info p { color: var(--c-mono-8); font-size: 1.6rem; }
.footer .footer_container .footer_index .flex_layout .certification_info {  }
.footer .footer_container .footer_index .flex_layout .certification_info .mark_wrap {  }
.footer .footer_container .footer_index .flex_layout .certification_info .mark_wrap span { display: inline-block; width: 100px; height: 50px; }
.footer .footer_container .footer_index .flex_layout .certification_info .mark_wrap span.kangso { background: url(../images/img_kangso_mark.png) no-repeat center; background-size: contain; }
.footer .footer_container .footer_index .flex_layout .certification_info .mark_wrap span.moel { background: url(../images/img_moel_logo.png) no-repeat center; background-size: contain; }
.footer .footer_container .footer_index .flex_layout .certification_info .mark_wrap span.kcup { background: url(../images/img_kcup_mark.png) no-repeat center; background-size: contain; width: 50px;}




/* =================================== tothetop */
#tothetop { display: none; position: fixed; bottom: 5%; right: 5%; width: 6rem; height: 6rem; line-height: 6rem; text-align: center; border-radius: 50rem; background: var(--c-mono-18-RGBA); z-index: 99999; }
#tothetop:hover { background: var(--c-main); transition: 0.3s; }
#tothetop span { display: inline-block; width: 2.5rem; height: 2.5rem; margin-top: 1.7rem; background: url(../images/top_arrow.png) no-repeat center; background-size: contain; }
#tothetop:hover span { border-color: var(--c-mono-0); transition: 0.3s; }




/* =============== media queries =============== */
@media (max-width: 1920px){
    html { font-size: 58%; }
}

@media (max-width: 1700px){
    section { padding: 10% 14%; }
    .fixed { padding: 1.5% 14%; }
    .footer { min-height: 50vh; }
}

@media (max-width: 1400px){
    html { font-size: 55%; }
    section { padding: 10%; }
    .fixed { padding: 1.5% 10%; }
    .article_header .head_inner { margin-top: 9rem; }
    .animation { right: 18%; }
    .animation .wrapper div { width: 6rem; height: 6rem; }
}

@media (max-width: 991px){
    .fixed { height: 80px; padding: 0 10%; }
    .article_header { min-height: 45vh; }
    .article_header .head_inner .inner_tit h1 { font-size: 6rem; }
    .animation .wrapper div { width: 5rem; height: 5rem; }
    .slide-tab-wrap.fixed { position: unset; }
}

@media (max-width: 768px){
    .animation { top: unset; right: 20%; bottom: 50%; }
    .animation .wrapper div { width: 5rem; height: 5rem; }

    .footer .footer_container .footer_inner { display: block; padding-bottom: 0; }
    .footer .footer_container .footer_inner .footer_mn { padding-bottom: 4rem; }
    .footer .footer_container .footer_inner .footer_mn ul li { font-size: 2.5rem; }
    .footer .footer_container .footer_inner .footer_contact { margin: 4rem 0; }
    .footer .footer_container .footer_inner .footer_contact li h4 { font-size: 2rem; }
    .footer .footer_container .footer_inner .footer_contact li p,
    .footer .footer_container .footer_inner .footer_contact li a { font-size: 1.6rem; }

    .footer .footer_container .footer_index { position: unset; margin-top: 4rem; }
    .footer .footer_container .footer_index .flex_layout { display: block; }
    .footer .footer_container .footer_index .flex_layout .text_info p { font-size: 1.6rem; }
    .footer .footer_container .footer_index .flex_layout .text_info .index_list { display: block; margin-bottom: 4rem; }
    .footer .footer_container .footer_index .flex_layout .certification_info { margin-top: 4rem; }
    .footer .footer_container .footer_index .flex_layout .certification_info .mark_wrap span.kangso { width: 50px; margin-right: 2rem; }
}

@media (max-width: 683px){
    section { padding: 10% 7%; }
    .fixed { height: 80px; padding: 0 7%; }
    .article_header { min-height: 40vh; }
    .article_header .head_inner .inner_nav li { font-size: 1.6rem; }
    .article_header .head_inner .inner_tit h1 { font-size: 5rem; line-height: 1.4; }
    .animation { display: none; }
}

@media (max-width: 450px){
    .article_header .head_inner { margin-top: 10rem; }
    .article_header .head_inner .inner_tit h1::after { display: none; }
    .footer .footer_container .footer_inner .footer_mn .inner_pointer .mn_inner { left: 45%; }
}

@media (max-width: 360px){
    html { font-size: 52%; }
}

@media (max-width: 290px){
    .article_header { min-height: 35vh; }
    .article_header .head_inner .inner_nav { flex-wrap: wrap; }
}