/* @import url(../fonts/stylesheet2.css); */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

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

html { font-size: 65%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 7rem; line-height: 1.5; word-break: keep-all; }
body { overflow: hidden; background:#ffffff; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;; font-kerning: normal; color: #000000; font-weight: 400; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }
li,ol,dl,dt { list-style: none; }
a { text-decoration: none; }
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; color: #000000; }
.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; }
h4 { font-size: 3rem; font-weight: 700; }
h5 { font-size: 2.5rem; font-weight: 700; }
p { font-size: 1.8rem; font-weight: 400; }

::-moz-selection { background: #354cda; color: #ffffff; }
::selection { background: #354cda; color: #ffffff; }




/* =================================== article_header */
.article_header { min-height: 50vh; width: 100%; display: table; padding-bottom: 0; padding-top: 7%; background: #ffffff; 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: #999999; }
.article_header .head_inner .inner_nav li.dote { margin-right: .5rem; }
.article_header .head_inner .inner_nav li a { color: #999999; }
.article_header .head_inner .inner_nav li .depth { display: block; width: 4px; height: 4px; background-color: #999999; 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: #354cda; 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 #cccccc; background: #ffffff; 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: #ffffff; }
.article_header .head_inner .inner_nav li.dropDown .submenu li a:hover { color: #000000; transition: 0.3s; }
.article_header .head_inner .inner_nav li.dropDown .submenu li a.active { color: #354cda; }

.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: #354cda; 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: #eeeeee; 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: #ffffff; z-index: 99999; border-bottom: 1px solid #eeeeee; }
.slide-tab-wrap.fixed { background: #222222; }




/* =================================== 컨텐츠 페이드인 & 페이드인다운 */
.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: #000; }
.footer .footer_container { width: 100%; font-size: 1.8rem; }
.footer .footer_container ul li a { display: block; color: #ffffff; }
.footer .footer_container .footer_inner { display: flex; padding-bottom: 5rem; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,0.2); }
.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: #ffffff; 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: #354cda; 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: #979da6; }
.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 #ffffff; font-size: 1.8rem; font-weight: 600; text-align: center; color: #ffffff; cursor: pointer; }
.footer .footer_container .footer_inner .footer_contact .whitepaper:hover { background-color: #ffffff; color: #000000; 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: #979da6; }
.footer .footer_container .footer_index .flex_layout .text_info p { color: #979da6; 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: rgba(0,0,0,0.2); z-index: 99999; }
#tothetop:hover { background: #354cda; transition: 0.3s; }
#tothetop span { display: inline-block; width: 2.5rem; height: 2.5rem; margin-top: 15px; background: url(../images/top_arrow.png) no-repeat center; background-size: contain; }
#tothetop:hover span { border-color: #ffffff; transition: 0.3s; }




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

@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 .text_info .company_info { display: block; }
    .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: 55%; }
}

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