@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url("https://unpkg.com/pretendard@1.3.9/dist/web/static/pretendard.css");
/* font-family: 'NanumSquare'; */
@font-face { 
    font-family: 'vitroCore';
    font-weight: 400;
    src: url(../font/vitroCore.woff2) format('woff');
}
*{
    margin: 0; padding: 0; box-sizing: border-box; color: inherit;
}
a{text-decoration: none; }
ul,ol{list-style: none;}
html{font-size: 10px;}
body{font-size: 2rem; color: #000; font-family: "Pretendard Variable"; font-weight: 400; 
    word-break: keep-all; 
    /* overflow-x: hidden; */
}
body.scrollfix{overflow: hidden;}
table{border-collapse: collapse;}
section{position: relative;}
button{border: none; background:none; cursor: pointer;}
iframe{border: none;}
select:focus{outline: none;}
input:focus,
textarea:focus{outline: none;}
textarea{resize: none;}
input::-webkit-inner-spin-button {-webkit-appearance: none;}
.pc{display: block;}
.mobile{display: none;}
.inner{
    margin: 0 auto; padding: 0 20px; width: 100%; position: relative; max-width: 1320px;
}
.round-btn{display: inline-flex; border: 1px solid #00CB68; color: #00CB68; align-items: center; border-radius: 100px; justify-content: space-between; font-weight: 700;transition:all .2s}
.round-btn:hover {background:#00CB68;color:#ffffff}
/*  */
@media screen and (max-width: 1200px){
    html{font-size: 9px;}
}
@media screen and (max-width: 1024px){
    html{font-size: 8px;}
}
@media screen and (max-width: 768px){
    .pc{display: none;}
    .mobile{display: block;}
}

/* header */
.header{position: absolute; top: 0; left: 0; width: 100%; color: #fff; padding: 20px 0; border-bottom: 1px solid #2A2A2A; z-index: 11; transition: 0.5s;}
.header::after{content: ""; width: 100%; height: 0; position: absolute; top: calc(100% + 1px); background-color: #fff; z-index: -1; transition-delay: 0.5s;transition: 0.5s;}
.header .inner{max-width: 1550px;}
.header-member{padding-right: 6rem; margin-bottom: 10px;}
.header-member ul{display: flex; justify-content: flex-end; font-size: 14px; align-items: center;}
.header-member ul li{padding: 0 12px; border-right: 1px solid #fff;}
.header-member ul li:last-child{border: none;}
.header-member ul li a{display: block;}
.header-member ul li a img:nth-child(1){display: block;}
.header-member ul li a img:nth-child(2){display: none;}
.header-btm{display: flex; justify-content: space-between; align-items: center; position: relative;}
.header .logo{height: 3.7rem;}
.header .logo img{height: 100%;}
.header .logo img:nth-child(1){display: block;}
.header .logo img:nth-child(2){display: none;}

.header .nav{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; justify-content: space-between; width: 50%; height: 100%; align-items: center;}
.header .nav > li{position: relative; height: 100%; display: flex; align-items: center;}
.header .nav > li.active::after{content: ""; width: 100%; height: 3px; position: absolute; bottom: -21px; background-color: #00CB68; left: 0;}
.header .nav > li:nth-child(4){color: #00CB68;}
.header .nav > li > a{}
.header .nav > li .subnav{position: absolute; top: 150%; text-align: center; left: 50%; transform: translateX(-50%); font-size: 16px; color: #333333; display: none;}
.header.active .nav > li .subnav{display: block;}
.header .nav > li .subnav li{width: 100%; min-width: 150px; margin-top: 20px;}
.header .nav > li .subnav li a{}
.header-right{display: flex; align-items: center; gap: 5px;}
.header-right .round-btn{height: 4.4rem; padding: 0 3rem; border: 1.5px solid #00CB68; border-radius: 50px;}
.header .header-right .menu-open-btn{cursor: pointer; }
.header .header-right .menu-open-btn img{width: 100%; display: block;}
.header .header-right .menu-open-btn img:nth-child(2){display: none;}

/* header active */
.header.active{background-color: #fff; color: #000;}
.header.header-white{color: #000;}
.header.active::after{height: 220px;}
.header.active .header-member ul li,
.header.header-white .header-member ul li{border-color: #000;}
.header.active .header-right .menu-open-btn img:nth-child(1),
.header.header-white .header-right .menu-open-btn img:nth-child(1){display: none;}
.header.active .header-right .menu-open-btn img:nth-child(2),
.header.header-white .header-right .menu-open-btn img:nth-child(2){display: block;}

.header.active .header-member ul li a img:nth-child(1),
.header.header-white .header-member ul li a img:nth-child(1){display: none;}
.header.active .header-member ul li a img:nth-child(2),
.header.header-white .header-member ul li a img:nth-child(2){display: block;}
/* side-menu */
.side-menu{padding: 7rem; position: fixed; width: 100%; max-width: 470px; background-color: #00CB68; color: #fff; right: 0; top: 0; height: 100%; right: -100%; transition: 0.5s;}
.side-menu.active{right: 0;}
.side-menu .menu-close-btn{position: absolute; right: 5rem; cursor: pointer; top: 5rem;}
.side-menu .top{display: flex; gap: 2.3rem; font-size: 16px; align-items: center; font-weight: 500;}
/*.side-menu .top a:first-child{display: none;}*/

.side-menu ul{display: flex; flex-direction: column; height: 100%; justify-content: center; font-size: 2.8rem; font-weight: 700; gap: 3rem  ;}
.side-menu ul li{color: #76DBAA; transition: 0.1s;}
.side-menu ul li:nth-child(4){color: #77FF00;}
.side-menu ul li a{padding-right: 3rem; position: relative;}
.side-menu ul li a::after{content: ""; width: 2.4rem; height: 2.4rem; position: absolute; right: 0; background: url(../img/sidemenu-arrow.svg) no-repeat center / cover; top: 50%; transform: translateY(-50%); display: none;}
.side-menu ul li:hover{color: #fff;}
.side-menu ul li:hover a::after{display: block;}
@media screen and (max-width: 1024px){
    .header .inner{padding-right: 10px;}
    .header-member, .header .nav{display: none;}
    
}
@media screen and (max-width: 768px){
    .header{padding: 0; border-color: #b4b4b4;}
    .header .logo{height: 17px; z-index: 1;}
    .header-right .round-btn{height: 17px; font-size: 9px; padding: 0 12px;}
    .header.side-active .logo img:nth-child(1){display: none;}
    .header.side-active .logo img:nth-child(2){display: block;}
    .header.side-active .header-right .round-btn{color: #fff; border-color: #fff; z-index: 11;}
    .side-menu{padding: 20px; max-width: none;}
    .side-menu .menu-close-btn{top: 0; right: 0;}
    .side-menu .top{position: absolute; bottom: 60px;}
    .side-menu ul{font-size: 24px;}
    .side-menu .top a:first-child{display: block;}
}


/* footer */
.footer{font-size: 14px; border-top: 1px solid #D9D9D9;}
.footer .go-top{position: absolute; right: 0; top: -3.4rem; width: 6.8rem; height: 6.8rem; cursor: pointer; background: url(../img/go-top.svg) no-repeat center / cover;}
.footer .go-top img{width: 100%;}
.footer .inner{padding: 10rem 20px; display: flex; justify-content: space-between; gap: 40px;}
.footer .logo{width: 25%; min-width: 320px;}
.footer .logo img{width: 100%; max-width: 270px;}
.footer .cont{display: flex; flex-wrap: wrap; line-height: 1.8; flex: 1; gap: 3rem 0; justify-content: space-between;}
.footer .cont .privacy{width: 100%; font-weight: 700; color: #787878;}
.footer .cont .info{width: 70%;}
.footer .cont .cs{width: 30%;}
.footer .cont h1{font-weight: 600;}
.footer .cont span{margin-right: 2rem;}
.footer .copy{position: absolute; left: 20px; bottom: 10rem; font-size: 12px; color: #787878;}
@media screen and (max-width: 1024px){
    .footer .go-top{right: 20px;}
    .footer .inner{display: block;}
    .footer .cont .privacy{margin: 37px 0 0;}
    .footer .copy{position: relative; left: auto; bottom: auto;}
}
@media screen and (max-width: 768px){
    .footer{font-size: 12px;}
    .footer .inner{padding: 50px 20px;}
    .footer .go-top{width: 53px; height: 53px; top: -26px;}
    .footer .logo{min-width: 190px}
    .footer .logo img{max-width: 190px;}
    .footer .cont{gap: 20px;}
    .footer .cont .info,
    .footer .cont .cs{width: 100%;}
    .footer .copy{margin-top: 37px;}
}
/* sub 공통 */
.sub-visual{padding: 26rem 0 15rem; background-color: #1C2722; color: #fff; text-align: center; border-radius: 0 0 6rem 6rem; position: relative;}
.sub-visual .sub-nav{display: flex; gap: 2rem; align-items: center; margin-bottom: 2rem; font-weight: 500;}
.sub-visual .inner > p{font-size: 2.4rem; font-weight: 500; margin-bottom: 2.5rem; color: #77FF00;}
/*.sub-visual p.round{border-radius: 30px; border: 2px solid #77FF00; display: inline-block; padding: 5px 4.5rem;}*/
.sub-visual h1{font-size: 6rem; font-weight: 700;}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 768px){
    .sub-visual{padding: 120px 0 60px; border-radius: 0 0 20px 20px;}
    .sub-visual .inner > p{font-size: 14px; margin-bottom: 15px;}
    .sub-visual h1{font-size: 26px;}
    .sub-visual .sub-nav{font-size: 12px; gap: 10px; margin-bottom: 43px;}
    .sub-visual .sub-nav img{height: 10px;}
}

/* modal */

.popup-mask{z-index: 111; position: fixed; padding: 0 40px; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.07);}
.popup-wrap{background-color: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161); width: 100%; max-width: 600px;}
.popup-title{display: flex;justify-content: space-between; height: 7.5rem; align-items: center; padding: 0 3rem; font-size: 2.4rem; font-weight: 700; border-bottom: 1px solid #E8E8E8;}
.popup-close{cursor: pointer; width: 17px;}
.popup-close img{width: 100%;}
.popup-content{padding: 6rem 5rem; text-align: center; line-height: 1.6;}
.popup-content h2{font-weight: 700; font-size: 3rem;}
.popup-content p{font-size: 14px; margin: 2.5rem 0 5rem;}
.popup-content button{width: 100%; height: 6.7rem; font-weight: 600; border: 1px solid #CBCBCB; border-radius: 50px; font-size: 1.8rem;}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 768px){
    .popup-title{font-size: 14px; height: 64px;}
    .popup-close{width: 14px;}
    .popup-content{padding: 55px 30px;}
    .popup-content h2{font-size: 20px;}
    .popup-content p{font-size: 12px;}
    .popup-content button{font-size: 16px; height: 40px;}
}

.term_wrap {padding:32rem 0 14rem}
@media screen and (max-width: 768px) {
    .term_wrap {padding:160px 0 74px;font-size:14px}
}