@charset "utf-8";
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
*{box-sizing: border-box;padding: 0;margin: 0;font-family:'Pretendard-Regular' !important; word-break: keep-all;}
.fa{font: normal normal normal 14px / 1 FontAwesome !important;}
a{text-decoration: none;}
ul{list-style: none;}
button{background-color: transparent; cursor: pointer;border: none;outline: none;}
img{border:0; display:block;}
h1, h2, h3, h4, h5, h6{padding:0;margin:0}
p{padding:0;margin:0;word-break: keep-all;}
input{border: none;box-shadow: none;}
input:focus{outline: none;}
#theme-controller .fixed-top{z-index: 999999;}
.modal{z-index: 999999;}
.nt-container{max-width: unset !important;width: 100%;}
#nt_sidebar_move{display: none;}
html{position: relative;top:0;left: 0;}
body{position: relative;top:0 !important;left: 0;z-index: 1;}
html::after{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;display: block;background:linear-gradient(to bottom, #0B1F52 ,#275193);content: "";}
:root{
	--main-color:#aaff21;
	--max-width:1600px;
	--font-size40:40px;
	--font-size30:30px;
	--font-size20:20px;
}
/* 언어팩 */
.goog-te-banner-frame{display: none;}
#goog-gt-tt{display:none !important;}
.goog-te-gadget{color: #fff !important;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.goog-logo-link{display: none;}
font{vertical-align:unset !important}
#lang{margin: 50px auto 30px;display: none;}
.skiptranslate{display: none !important;}
.skiptranslate>iframe{display: none !important;}
.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate{display: none !important;}
/* 언어팩 */

/* head시작 */
#nt_header{border-bottom: 1px solid #ffffff1c; position: fixed; top: 0; left: 0; width: 100%;}
#nt_header.fix{background:linear-gradient(to bottom, #0B1F52 ,#0E2559);z-index: 7;}
#nt_header #nt_menu{width: 100%;max-width: var(--max-width);margin: 0 auto;}
#nt_header #nt_menu>div{display: flex;justify-content: space-between;align-items: center;}
#nt_header #nt_menu>div a.head_logo{width: fit-content; display: block; height: 100px; padding: 25px 20px;}
#nt_header #nt_menu>div a.head_logo img{width: auto;height: 100%;display: block;}
#nt_header #nt_menu>div a.head_toggle{display: block;width: 100px;height: 100px; position: relative; top: 0; left: 0;}
#nt_header #nt_menu>div a.head_toggle span{display: block;width: 50%;position: absolute;left: 50%;height: 3px;border-radius: 3px;}
#nt_header #nt_menu>div a.head_toggle span:nth-child(1){top: 35%;transform: translateX(-50%);}
#nt_header #nt_menu>div a.head_toggle span:nth-child(2){top: 50%;transform: translate(-50%,-50%);}
#nt_header #nt_menu>div a.head_toggle span:nth-child(3){top: 62%;transform: translateX(-50%);}
#nt_body{padding-top: 100px;}
/* head끝 */

/* 메인시작 */
#main{}
#main .main_bn{width: 100%; max-width: var(--max-width); margin: 0 auto;}
#main .main_bn .swiper-wrapper{width: 100%; height: 30vw; max-height: 500px;}
#main .main_bn .swiper-wrapper .swiper-slide{width: 100%;height: 100%;}
#main .main_bn .swiper-wrapper .swiper-slide .main_img{width: 100%;height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
#main .main_bn.pc{}
#main .main_bn.mo{display: none;}
#main .flowBox {position: relative; bottom: 0px; left: 0;margin: 20px 0 100px; font-size: var(--font-size40); color: rgb(255 255 255 / 10%); letter-spacing: 9px; font-weight: 500; width: 100%; max-width: 100%; height: auto; padding: var(--font-size30); overflow-x: hidden; overflow-y: hidden;}
#main .flowBox .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 80s linear infinite;bottom: 0px; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
#main .content{width: calc(100% - 40px); max-width: var(--max-width); margin: 0 auto;}
#main .content .con_title{margin: 0 auto 30px; font-size: var(--font-size40); font-weight: 500; color: var(--main-color); width: fit-content;}
#main .content.con1 .wrap{display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap;width: 100%;}
#main .content.con1 .wrap>div{width: calc(50% - 10px);}
#main .content.con1 .wrap .left{height: 300px; background: #ffffff1f; position: relative; top: 0; left: 0;}
#main .content.con1 .wrap .left p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size20); color: #ffffff69; width: calc(100% - 40px); text-align: center;}
#main .content.con1 .wrap .right{display: flex; justify-content: space-between; flex-flow: column; align-items: center; height: 300px;}
#main .content.con1 .wrap .right div{height: calc(150px - 10px);width: 100%;background: #ffffff1f; position: relative; top: 0; left: 0; position: relative; top: 0; left: 0;}
#main .content.con1 .wrap .right div p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size20); color: #ffffff69; width: calc(100% - 40px); text-align: center;}
#main .content.con2{display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap;margin-top: 100px;}
#main .content.con2 .wrap{display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap;width: 100%;}
#main .content.con2 .wrap div{width: calc(50% - 10px);background: #ffffff1f;height: 300px;}
#main .sub_bn{width: 100%; max-width: var(--max-width); margin: 100px auto 0;}
#main .sub_bn .swiper-wrapper{width: 100%; height: 18vw; max-height: 300px;}
#main .sub_bn .swiper-wrapper .swiper-slide{width: 100%;height: 100%;}
#main .sub_bn .swiper-wrapper .swiper-slide .main_img{width: 100%;height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
#main .sub_bn.pc{}
#main .sub_bn.mo{display: none;}
#main .adm_btn{display: block; width: fit-content; margin: 0 auto; background: var(--main-color); color: red; font-weight: 500; font-size: 15px; padding: 10px 20px; border-radius: 10px;}

/* 메인끝 */

/* tail 시작 */
#nt_footer{}
#nt_footer ul{display: flex;justify-content: space-between;align-items: center;width: calc(100% - 40px);max-width: var(--max-width);margin: 100px auto 0;}
#nt_footer ul li{width: calc(25% - 20px);height: 20vw;border-radius: 300px 300px 0 0;background: #ddd;position: relative;top: 0;left: 0;}
#nt_footer ul li div{position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 30%; height: auto; aspect-ratio: auto 1 / 1; text-align: center; z-index: 2; display: flex; justify-content: center; align-items: center; background: #ffffff59; border-radius: 50px; color: #fff; max-width: 100px;}
#nt_footer ul li div img{width: 70%;}
/* tail 끝 */

/* 파래가머 페이지 시작 */
#tmtkwalk{margin-top: 50px;}
#tmtkwalk .sub_title{}
#tmtkwalk .sub_title img{width: 100%; max-width: 200px; margin: 0 auto 50px;}
#tmtkwalk .content{width: calc(100% - 40px);max-width: var(--max-width);margin: 0 auto;}
#tmtkwalk .content.con1{}
#tmtkwalk .content.con1 section{position: relative; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}
#tmtkwalk .content.con1 .circle-chart__circle {position: relative;top: 0;left: 0; animation: circle-chart-fill 2s reverse; /* 1 */  transform: rotate(-90deg); /* 2, 3 */ transform-origin: center; /* 4 */ }
#tmtkwalk .content.con1 .circle-chart__circle--negative { transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */ }
@keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } }
@keyframes circle-chart-appear { to { opacity: 1; transform: translateY(0); } }
#tmtkwalk .content.con1 section .visual{width: 100%; max-width: 190px; margin: 0 auto; aspect-ratio: auto 1 / 1; height: auto; position: relative; top: 0; left: 0; background: #ffffff0f; border-radius: 500px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#tmtkwalk .content.con1 section .visual p{position: absolute; left: 50%; top: 10%; transform: translateX(-50%); color: #fff; font-size: var(--font-size20);}
#tmtkwalk .content.con1 section .visual img{width: 50%; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);}
#tmtkwalk .content.con2{display: flex; justify-content: center; align-items: center; column-gap: 40px; position: relative; top: 0; left: 0; margin: 10px auto 100px;}
#tmtkwalk .content.con2::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #1F7278;width: 1px;height: 50%;}
#tmtkwalk .content.con2 div{display: flex; align-items: center;width: 50%;}
#tmtkwalk .content.con2 div:nth-child(1){justify-content: end;}
#tmtkwalk .content.con2 div img{width: var(--font-size40);}
#tmtkwalk .content.con2 div p{ color: #fff; font-size: var(--font-size20); font-weight: 500; display: flex; align-items: center;}
#tmtkwalk .content.con2 div p b{color: #2BBB66; font-size: calc(var(--font-size40) + 10px); font-weight: 700; padding: 0 10px 0 20px;}
#tmtkwalk .content.con3{display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap; column-gap: 10px; row-gap: 10px;}
#tmtkwalk .content.con3 div{width: calc(50% - 5px);background: #00000038; padding: 20px; border-radius: 10px; display: flex ; justify-content: space-between; align-items: center;cursor: pointer;}
#tmtkwalk .content.con3 div:last-child{width: 100%;}
#tmtkwalk .content.con3 div img{width: calc(var(--font-size40) + 10px);}
#tmtkwalk .content.con3 div p{line-height: var(--font-size40);}
#tmtkwalk .content.con3 div:nth-child(1) p{color: #fff;font-size: var(--font-size20);}
#tmtkwalk .content.con3 div:nth-child(2) p{color: #2BBB66;font-size: var(--font-size40);font-weight: 700;}
#tmtkwalk .content.con3 div:nth-child(3) p{color: #fff; font-size: var(--font-size20); display: flex; justify-content: space-between; align-items: center; width: calc(100% - var(--font-size40) - 20px);}
#tmtkwalk .content.con3 div:nth-child(3) p span{color:#fff;font-size: var(--font-size20);font-weight: 900;}
#tmtkwalk .content.con4{display: flex;justify-content: space-between;align-items: center; margin: 20px auto 150px;}
#tmtkwalk .content.con4 p{font-size: var(--font-size20); font-weight: 600; color: #fff;}
#tmtkwalk .content.con4 img{height: calc(var(--font-size40) + 10px);}
/* 파래가머 페이지 끝 */


/* 인증페이지 시작 */
#certification .img-wrapx {width: 100%;height: auto;overflow: hidden; /* 넘치는 부분 잘라내기 */position: relative;}
#certification .img-wrapx img {width: calc(100% - 40px); max-width: var(--max-width);margin: 0 auto; height: auto;display: block; /* 여백 제거 *//* position: relative; */}
#certification .img-wrapx img.custom-button {cursor: pointer; width: calc(100% - 80px);margin: 50px auto 150px; max-width: 500px;}
#certification .custom-text {position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);color: #221205;font-size: 18px; font-weight: bold;}
#certification .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; /* 기본 숨김 */ align-items: center; justify-content: center; z-index: 9999; }
#certification .custom-modal { width: 95%; max-width: 480px; background: #140A02; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 22px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #ddd; }
#certification .custom-modal p { margin: 12px 0 6px; font-weight: 600; color: white;}
#certification .custom-modal input[type="text"] { width: 100%; padding: 10px 12px; border:none; border-bottom: 1px solid #ddd; color: white; background: unset; }
#certification .btn-row { display: flex; gap: 50px; justify-content: center; margin-top: 18px; }
#certification .btn-row button { width: 30%; }
#certification .btn-row button:nth-child(1){background: #333333;border: none;color: white;}
#certification .btn-row button:nth-child(2){ background: #F9A230; color: #221205; border: none;}
#certification .btn { padding: 10px 14px; border-radius: 8px; cursor: pointer; border: 1px solid #ddd; background: #f6f7f9; }
#certification .btn.primary { background: #0d6efd; color: #fff; border-color: #0d6efd; }
#certification .helper { font-size: 12px; color: #666; margin-top: 6px; }
#certification .file-name { font-size: 13px; color: #333; margin-top: 6px; }
#certification #uploadBtn {background: unset;border: 1px solid white;color: white;}
/* 인증페이지 끝 */

@media all and (max-width:1600px) {
    #nt_header #nt_menu>div a.head_logo{height: 70px; padding: 15px 20px;}
    #nt_header #nt_menu>div a.head_toggle{width: 70px;height: 70px;}
    #nt_body{padding-top: 70px;}
    #nt_footer ul li div{top: -5vw;}
    :root{
        --font-size40:30px;
        --font-size30:20px;
        --font-size20:17px;
    }
}
@media all and (max-width:900px) {
    #nt_header #nt_menu>div a.head_logo{height: 60px; padding: 15px 20px;}
    #nt_header #nt_menu>div a.head_toggle{width: 60px;height: 60px;}
    #nt_header #nt_menu>div a.head_toggle span{height: 2px;width: 40%;}
    #nt_body{padding-top: 60px;padding-bottom: 60px;}
    #main .main_bn .swiper-wrapper{height: 49vw;}
    #main .main_bn.pc{display: none;}
    #main .main_bn.mo{display: block;}
    #main .flowBox{margin: 10px 0 50px;}
    #main .content .con_title{margin: 0 auto 10px;}
    #main .content.con1 .wrap>div{width: 100%;}
    #main .content.con1 .wrap{row-gap: 20px;}
    #main .content.con2{margin-top: 50px;}
    #main .content.con2 .wrap{row-gap: 20px;}
    #main .content.con2 .wrap div{width: 100%;height: 200px;}
    #main .sub_bn .swiper-wrapper{height: 49vw;max-height: unset;}
    #main .sub_bn.pc{display: none;}
    #main .sub_bn.mo{display: block;}
    #nt_footer{position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; border-top: 1px solid #ffffff1c; z-index: 7; background: linear-gradient(to bottom, #244C8C, #275193);}
    #nt_footer ul{display: flex;justify-content: space-between;align-items: center;width:100%;height: 100%; margin: 0;}
    #nt_footer ul li{width: 25%;height: 100%; border-radius: unset; background: unset;position: unset;display: flex;justify-content: center;align-items: center;cursor: pointer;}
    #nt_footer ul li div{position: unset; width: 50px; height: auto;transform: unset; aspect-ratio: auto 1 / 1; text-align: center; z-index: unset; display: flex; justify-content: center; align-items: center; background: unset; border-radius: 50px; color: #fff; max-width: 100px;}
    #tmtkwalk .content.con2{margin: 10px auto 20px;}
    #tmtkwalk .content.con4{margin: 20px auto 50px;}
    :root{
        --font-size40:20px;
        --font-size30:17px;
        --font-size20:13px;
    }
}
@media all and (max-width:350px) {
    #tmtkwalk .content.con2 div{width: 100%;}
    #tmtkwalk .content.con3 div{width: 100%;}
}