@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=block');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=block');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=block');

/* common */
body { word-break: keep-all;}
body.popup-on { overflow: hidden;}
.in {max-width: var(--maxWidth); padding: 0 var(--inPd); margin: 0 auto;}
.hidden {clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px}
.mo_over { display: block; }
.mo_only { display: none; }
.mo_tiny_only { display: none; }
.mb0 { margin-bottom: 0 !important;}
.mb30 { margin-bottom: 3rem !important;}
.mb80 { margin-bottom: 8rem !important;}
.mb200 { margin-bottom: 20rem !important;}
.mb300 { margin-bottom: var(--pd30) !important;}
.pc_only {display: block ;}
.mo_only {display: none !important;}
.only-tb { display:none !important; }
.only-foldon { display:none; }
.fold { display:none;}
.sr_only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}

html.scroll_none { overflow: hidden; }

svg {overflow: visible;}

html {font-size:10px; /*overflow-x: hidden;*/}
/*
     3200 기준 = 0.03125vw
     1920 기준 = 0.5208vw

*/

/* html { font-size: clamp(10px, calc(0.03125vw), 14px); } */
:root {

    --maxWidth: 180rem;
    --inPd: 5rem;
    --pd30:30rem;
    --green:#8DC43F; 
    --black:#1c1c1c;
    --black1:#111;
    --gray6:#666;
    --gray4:#444;
    --graya:#aaa;
    --en:"Poppins", sans-serif;
    --awesome: 'Font Awesome 6 Pro';
    --ease1:  cubic-bezier(0.68, 0.03, 0.33, 1);
    --ease2:  cubic-bezier(0.25, 1, 0.5, 1);
    --txt80:8rem;
    --h1:5.4rem;
    --h2:3.8rem;
    --h3:3rem;
    --h4:max(2.5rem, 24px);
    --p1:max(2rem, 20px);  
    --p2:max(1.8rem, 18px);
    --p3:max(1.6rem, 16px);

    --headerH:11rem; 
    --mainPd: 35rem;
    --radius2:2rem;
    --radius3:3rem;
    --radius4:4rem;

    --subPd:24rem;

    --ease: cubic-bezier(0.68, 0.03, 0.33, 1);

    --hdH: 90px;

    --alertColor: #485ece;

}



.en { font-family: var(--en); }

.header { position: fixed; left:0; top:0; right:0; z-index:1100;   font-size:var(--txt20); color:#fff; transition: all 0.5s ease; background-color: #fff;;}
.header .inner { padding:0 var(--inPd);height: var(--headerH); max-width: 100%; margin: 0 auto ;display: flex;  justify-content: space-between; align-items: center; position: relative;  }
.header .inner h1 { }
.header .inner h1 a { display: flex; align-items: center;}
.header .inner h1 a img { width:17rem; ; }
.header .inner .nav .mo-head {  display: flex; display: none; justify-content: space-between; align-items: center; height: var(--headerH); padding:0 var(--inPd)}
.header .inner .nav .mo-head .left img { width:19rem; }
.header .inner .nav .mo-head .right { display: flex; align-items: center;}
.header .inner .nav .mo-head .right .btn-login { padding:0.5em 1em; border:1px solid #fff; font-size:12px; border-radius:2em; }
.header .inner .nav .mo-head .right .btn-close { margin-left: 3rem;}
.header .inner .nav .mo-head .right .btn-close svg { width:3em; height: auto; fill:#fff; }
.header .inner .nav > ul { display: flex; color:var(--black);  }
.header .inner .nav > ul .btn-dep1 { display: block; padding:0 6.2rem; font-size:var(--p1); font-weight:600; line-height: var(--headerH); transition: color 0.3s ease, padding 0.5s ease; text-align: center;}
.header .inner .nav > ul > li { position: relative;}

/*.header .inner .nav .dep2 {display: none; display: block; position: absolute;left: 0;left: 50%;transform: translateX(-50%);top: var(--headerH);background-color: #fff;border-radius: 3rem;padding: 4rem;width: fit-content;box-shadow: 0 0px 15px rgba(0,0,0,0.1);}*/
/*.header .inner .nav .dep2 ul { display: grid; grid-template-columns: repeat(3,max-content); gap: 20px 8rem;}*/
.header .inner .nav .dep2{display: none; position: absolute;left: 0;left: 50%;transform: translateX(-50%);top: var(--headerH); z-index: 20;}
.header .inner .nav .dep2 ul li { padding:0 0rem;}
.header .inner .nav .dep2 ul li dt a { display: block; font-size:var(--p2); font-weight:500; margin-bottom: 15px; margin-bottom: 0; white-space: nowrap; transition: all 0.3s var(--ease1);}
.header .inner .nav .dep2 ul li dt a span {position: relative}
.header .inner .nav .dep2 ul li dt a span:before {content: ""; width: 0%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: -2px; }
.header .inner .nav .dep2 ul li dt a.active span:before {width: 100%;}
.header .inner .nav .dep2 ul li dd + dd {margin-top: 0.3em}
.header .inner .nav .dep2 ul li dd + dd:last-child{margin-bottom:0.5em;}
.header .inner .nav .dep2 ul li dd a { display: block; font-size:var(--p3); font-weight:400; line-height: 3.5rem; color:#797878;  white-space: nowrap; transition: all 0.3s var(--ease1); }

.header .inner .nav .dep2 ul li dd:first-of-type { margin-top:5px;}
.header .inner .nav .gnb_bg{position: absolute; top:var(--headerH); width:100%; height: 0; overflow:hidden; left: 50%; transform: translate(-50%, 0); background-color: #fff; z-index: 10; transition: height 0.3s ease;}

.header .right-wrap { display: flex; align-items: center;}
.header .right-wrap .links { display: flex; }
.header .right-wrap .links .btn { padding:0em 1.2em; line-height: 2.7em; border-radius:5em; font-size:var(--p2); font-weight:600; transition: background-color 0.3s ease-in-out , color 0.3s ease-in-out;}
.header .right-wrap .links .btn +.btn {margin-left: 2rem}

.header .right-wrap .links .btn-receipt {background-color:#F6F6F6 ; color: #000; display: flex; align-items: center}
.header .right-wrap .links .btn-receipt svg {fill: #000; width: 1.7rem; height: auto; margin-right: 1rem; transform: translateY(-0.2rem); transition:  0.3s ease-in-out}
.header .right-wrap .links .btn-login {display: flex; align-items: center; position: relative; margin-right: 3rem; padding: 0; cursor: pointer}
.header .right-wrap .links .btn-login svg {width: 1.5em; height: auto;}
.header .right-wrap .links .btn-login .login_nav {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,100%); white-space: nowrap;background-color: #fff;box-shadow: 0 0 5px rgba(92, 103, 129, 0.3); color: #000; padding: 1.5rem 2rem; border-radius: 1.5rem; opacity: 0; transition: opacity 0.3s ease-in-out}
.header .right-wrap .links .btn-login .login_nav.active {opacity: 1}
.header .right-wrap .links .btn-login .login_nav li + li {margin-top: 10px}
.header .right-wrap .links .btn-login .login_nav a {display: flex; align-items: center; font-size: var(--p3); font-weight: 500; margin-right: 0}
.header .right-wrap .links .btn-login .login_nav a .ico {width: 1em; height: 1em; margin-right: 1em; transform: translateY(-1px)}
.header .right-wrap .links .btn-login .login_nav a .ico svg {width: 100%}
.header .right-wrap .links .btn-donate { background-color: var(--green); color:#fff; display: flex; align-items: center; } /*margin-left: 1.5rem;*/
.header .right-wrap .links .btn-donate svg { width:1.8rem; margin-right:1rem; }
.header .right-wrap .btn-m { display: none;}
.header.down { transform: translateY(calc(-1 * var(--headerH)));}
.header.fixed .right-wrap .lang-box { stroke: #1c1c1c;}




/* new header */
.header .inner .nav > ul .btn-dep1{position: relative; z-index: 30;}

.header .inner .nav > ul > li:before{content: "";position: absolute;left: 50%;top: 0px;transform: translate(-50%, 0);width: 100%; height: 0px;opacity: 0;background-color: var(--green); z-index: 20; transition: height ease-in-out .3s, opacity ease-in-out .5s;}
.header .inner .nav > ul > li.on:before{opacity: 1; height: calc( var(--headerH) + 55rem); transition: height 0.4s ease-in-out;} /* gnb_bg height */

.header .inner .nav > ul > li > a:before {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background-color: rgba(255,255,255,0.15); transition: width 0.3s ease-out}
.header .inner .nav > ul > li:hover > a:before{width: 100%;}
.header .inner .nav > ul > li.on {color:#fff;}

.header .inner .nav.on > ul .btn-dep1{padding: 0 12rem;}

.header .inner .nav .dep2{ height:55rem;}
.header .inner .nav .dep2 > ul{margin-top: 2em;}
.header .inner .nav .dep2 ul li{text-align: center;}
.header .inner .nav .dep2 ul li + li{margin-top: 2em;}

.header .inner .nav > ul > li.on .dep2 > ul > li dt{ position: relative; color:rgba(255,255,255,1)}
.header .inner .nav > ul > li.on .dep2 > ul > li:hover{color:rgba(255,255,255,.8)}

.header .inner .nav > ul > li.on .dep2 ul li dd a{color:rgba(255,255,255,.6);}
.header .inner .nav > ul > li.on .dep2 ul li dd a.active {color:rgba(255,255,255,1);}
.header .inner .nav > ul > li.on .dep2 ul li dd a:hover{color:rgba(255,255,255,1);}

.header .inner .nav .gnb_bg{ position: absolute; top:var(--headerH); width:100%; height: 0; overflow:hidden; left: 50%; transform: translate(-50%, 0); background-color: #fff; z-index: 10; transition: height 0.4s ease-in-out, border-bottom 0.3s ease-in-out 0.4s;}
.header .inner .nav.on .gnb_bg{height: 55rem; border-bottom:1px solid #F6F6F6; transition: height 0.4s ease-in-out;}




.btn-main-more { display: inline-flex; align-items: center; line-height: 6rem; height: 6rem; height: 2.9em; line-height: 2.9em; padding:0 1.2em; border-radius:6rem; border:1px solid var(--black); font-size:var(--p2); font-weight:600; transition: all 0.3s var(--ease1); }
.btn-main-more i  { width:1.25em; transform: scale(0.2); margin-right:0.5rem;transition: all 0.3s var(--ease1); color:var(--gray6); }
.btn-main-more i svg { width:100%; height: auto; vertical-align: middle; margin-top:-4px}

#modalOverView {display: none; position: fixed; z-index: 2100;} /* 1500 */
#modalView {display: none; position: fixed; z-index: 2300;} /* 1400 */


.footer .cs-box ul { display: flex;}
.footer .cs-box ul li { flex:1; height: 27rem; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.footer .cs-box ul li:nth-child(1) { background-color: #8AB92A;}
.footer .cs-box ul li:nth-child(2) { background-color: #FBAA19;}
.footer .cs-box ul li:nth-child(3) { background-color: #55BED8;}
.footer .cs-box ul li:nth-child(1) .img  { opacity:0.15;}
.footer .cs-box ul li:nth-child(2) .img  { opacity:0.16;}
.footer .cs-box ul li:nth-child(3) .img  { opacity:0.2;}

.footer .cs-box ul li .img { position: absolute; left: 0; top:0; width:100%; height: 100%; ;}
.footer .cs-box ul li .img img { width:100%; height: 100%; object-fit: cover; }
.footer .cs-box ul li dl { text-align: center; position: relative; color:#fff; z-index:10; }
.footer .cs-box ul li dl dt { font-weight:500; font-size:var(--p1); margin-bottom: 2rem;}
.footer .cs-box ul li dl dd { font-size:var(--h2); font-weight:600; }
.footer .cs-box ul li dl dd svg {width: 1em;height: auto;margin-left: 1rem;font-size: var(--p2);}
.footer .cs-box ul li dl dd.info_txt{font-size: var(--p3);}


.footer {  }
.footer .in { display: flex; justify-content: space-between; align-items: flex-end; padding-top:8rem; padding-bottom: 8rem;}
.footer  .logo { margin-bottom: 4rem;}
.footer  .logo img { width:25rem;}
.footer  .etc ul { display: flex; }
.footer  .etc a { margin-right:4rem; font-size:var(--p1); font-weight:500; color:#000; }
.footer  .etc ul li:first-child  a{ font-weight:700; }
.footer  .info { margin:3rem 0;}
.footer  .info div { display: flex; flex-wrap: wrap; }
.footer  .info div + div{  margin-top:8px; }
.footer  .info div p { font-size:var(--p2); color:rgba(28,28,28,0.8);  }
.footer  .info div p + p:before {content: ''; display: inline-block; vertical-align: middle; width:1px; height: 1.5rem; background-color: #aaa; margin:0 1.5rem;}
.footer  .copy { font-size:var(--p3); color:rgba(28,28,28,0.8); }
.footer .right .sns { display: flex; font-size: var(--p2)}
.footer .right .sns a { width:3.5em; height: 3.5em; border-radius:100%; background-color: #F6F6F6; display: flex; justify-content: center; align-items: center; margin-right:1rem; transition: all 0.3s ease; position: relative;}
.footer .right .sns a svg,
.footer .right .sns a img { position: relative; z-index: 10;}
.footer .right .sns a:before { content: ''; position: absolute; left: 0; top:0; width:100%; height:100%; border-radius:100%; background-color: #F6F6F6; transition: all 0.3s ease; opacity:0;}
.footer .right .sns a:nth-child(1) svg { width:1.3em; height:auto;  }
.footer .right .sns a:nth-child(2) svg { width:0.75em; height:auto;  }
.footer .right .sns a:nth-child(3) svg { width:1.4em; height:auto;  }
.footer .right .sns a:nth-child(4) svg { width:1.3em; height:auto;  }
.footer .right .sns a:nth-child(5) img { width:1.4em; height:auto;  }
.footer .right .sns a:nth-child(6) img { width:1.8em; height:auto;  }

.footer .right .sns a:nth-child(1):before {  background: linear-gradient(43deg, #FF9604 17.76%, #FA0270 53.63%, #DD02B5 71.57%, #9723DC 89.51%);    }
.footer .right .sns a:nth-child(2):before {  background-color: #2A74D5; }
.footer .right .sns a:nth-child(3):before {  background-color: #2EB400; }
.footer .right .sns a:nth-child(4):before {  background-color: #000; }
.footer .right .sns a:nth-child(5):before {  background-color: #FF4050; }
.footer .right .sns a:nth-child(6):before {  background-color: #2EB400; }


.quick-menu { position: fixed; right:3rem; bottom:5rem; z-index: 2300; }
.quick-menu .btns ul li { position: relative;}
.quick-menu .btns ul li a { width:10rem; aspect-ratio: 1/1; margin-top:1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--black); border-radius:2rem; text-align: center; font-size:var(--p2); color:#fff; font-weight:600; transition: background-color 0.3s ease-in-out , border-color 0.3s ease-in-out;}
.quick-menu .btns ul li:nth-child(1) i svg { width:2rem; height: auto; } 
.quick-menu .btns ul li:nth-child(2) i svg { width:2rem; height: auto; }
.quick-menu .btns ul li.top_btn svg { width:2rem; height: auto; }
.quick-menu .btns ul li.top_btn a { background-color: #fff; border:1px solid #ddd}

.quick-menu .btns .gene-box { position: absolute; right:0; bottom:0; width:55rem; display: flex; align-items: flex-start; z-index:10; clip-path:inset(calc(100% - 86px) 0% 0% calc(100% - 259px) round 50px); opacity:0; visibility: hidden; transition: all 0.5s ease;}
.quick-menu .btns .gene-box .box { position: relative; z-index:2; flex:1; padding:5rem 4rem; border-radius:0 2rem 2rem 2rem; background-color: #fff;  border:1px solid #ddd;}
.quick-menu .btns .gene-box .btn-close { transform: translateX(100%);  width:7rem; height: 7rem; border-radius:10px 0 0 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg,rgba(178, 208, 53, 1) 0%, rgba(102, 161, 18, 1) 100%);;}
.quick-menu .btns .gene-box .btn-close svg { width:2rem; height: auto; transition: all 0.5s ease;}

.quick-menu .btns .gene-box .box .tit { font-size:var(--h3); font-weight:700; line-height: 1.5; margin-bottom: 4rem;}
.quick-menu .btns .gene-box .box .gene-tab { display: flex; border-radius:1rem 1rem 0 0; overflow: hidden; position: relative; }
.quick-menu .btns .gene-box .box .gene-tab:before { content: ''; position: absolute; left: 0; right:0; bottom:0; height: 1px; background-color: #ddd;}
.quick-menu .btns .gene-box .box .gene-tab button { flex:1; line-height: 6rem; text-align: center; font-size:var(--p2); font-weight:600; color:var(--graya);}
.quick-menu .btns .gene-box .box .gene-tab button.active { background-color: var(--green); color:#fff; }
.quick-menu .btns .gene-box .box .gene-area {}
.quick-menu .btns .gene-box .box .gene-area .area {  }
.quick-menu .btns .gene-box .box .gene-area .area ul { padding:3rem 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.quick-menu .btns .gene-box .box .gene-area .area .gene-radio { display: none;}
.quick-menu .btns .gene-box .box .gene-area .area .gene-radio + span { display: block; line-height: 5rem; text-align: center; font-size:var(--p3); font-weight:500;  border-radius:5px; background-color: #F3F9EB; border:1px solid #F3F9EB; transition: all 0.5s ease;  cursor: pointer;}
.quick-menu .btns .gene-box .box .gene-area .area .gene-radio:checked + span { border-color: var(--green);  }
.quick-menu .btns .gene-box .box .gene-area .area .total { border-top:1px dashed #ddd; display: flex; justify-content: space-between; align-items: center; padding:2rem; }
.quick-menu .btns .gene-box .box .gene-area .area .total p { font-size:var(--p2); font-weight:700; }
.quick-menu .btns .gene-box .box .btn-submit { width:100%; line-height: 6rem; line-height: 2.9em; text-align: center; font-size:var(--p2); font-weight:600; color:#fff; background-color: #713B00; border-radius:1rem; }
.quick-menu .btns .gene-box.active { clip-path: inset(0% 0% 0% 0% round 0);  opacity:1; visibility: visible;}
.quick-menu .btns .gene-box.active .btn-close { transition: all 0.5s ease; transition-delay: 0.5s; transform: unset; }


.quick-menu .btns .qna-box { position: absolute; right:0; bottom:0; width:55rem; display: flex; align-items: flex-start; z-index:1110; clip-path:inset(calc(100% - 86px) 0% 0% calc(100% - 259px) round 50px); opacity:0; visibility: hidden; transition: all 0.5s ease;}
.quick-menu .btns .qna-box .box { position: relative; z-index:2; flex:1; padding:5rem 4rem; border-radius:0 2rem 2rem 2rem; background-color: #fff;  border:1px solid #ddd; min-width: 0}
.quick-menu .btns .qna-box .btn-close { transform: translateX(100%);  width:7rem; height: 7rem; border-radius:10px 0 0 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg,rgba(178, 208, 53, 1) 0%, rgba(102, 161, 18, 1) 100%);;}
.quick-menu .btns .qna-box .btn-close svg { width:2rem; height: auto; transition: all 0.5s ease;}

.quick-menu .btns .qna-box .box .tit { font-size:var(--h3); font-weight:700; line-height: 1.5; margin-bottom: 1.5rem;}
.quick-menu .btns .qna-box .box .desc { font-size:var(--p3); font-weight:500; margin-bottom: 4rem;}
.quick-menu .btns .qna-box .box .forms .inp-box { margin-bottom: 10px;}
.quick-menu .btns .qna-box .box .forms .inp-box .nice-select { height: 3.5em; line-height: 3.5em; font-size:var(--p3); }
.quick-menu .btns .qna-box .box .forms .inp { height: 3.5em; font-size:var(--p3); ;}
.quick-menu .btns .qna-box .box .forms .textarea { font-size:var(--p3); ;}
.quick-menu .btns .qna-box .box .forms .agree-box { display: flex; align-items: center; margin-bottom: 30px; }
.quick-menu .btns .qna-box .box .forms .agree-box .btn-detail { margin-left: 1em; font-size:var(--p3); color:var(--gray6); text-decoration: underline; }
.quick-menu .btns .qna-box .box .btn-submit { width:100%; line-height: 6rem; line-height: 2.9em; text-align: center; font-size:var(--p2); font-weight:600; color:#fff; background-color: #713B00; border-radius:1rem; }
.quick-menu .btns .qna-box.active { clip-path: inset(0% 0% 0% 0% round 0);  opacity:1; visibility: visible;}
.quick-menu .btns .qna-box.active .btn-close { transition: all 0.5s ease; transition-delay: 0.5s; transform: unset; }

.quick_bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%;background: rgba(0, 0, 0, 0.7);opacity: 0; z-index: 2299; pointer-events: none; transition:  0.3s ease-in-out}
.quick_bg.active {opacity: 1; pointer-events: visible}



/* slide control */
.control_wrap{display: flex; align-items: center; margin-top: 6rem;}
.control_wrap .swiper-pagination{position: relative; height: 2px; background-color: #ddd; flex: 1; margin-top: 0 !important;}
.control_wrap .swiper-pagination .swiper-pagination-progressbar-fill { background-color: var(--green); height: 2px; bottom:0; top:unset;}

.control_wrap .swiper_btn_wrap{display: flex; align-items: center; margin-left: 4rem;}
.control_wrap .swiper-button-prev,
.control_wrap .swiper-button-next { width:40px; height:30px; display: flex; align-items: center; justify-content: center;position: static; margin:0;  }
.control_wrap .swiper-button-prev:before,
.control_wrap .swiper-button-next:before { content: ''; display: block; width: 18px; height: 18px; transition: 0.3s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.831' height='14.831' viewBox='0 0 8.831 14.831'%3E%3Cpath id='패스_13816' data-name='패스 13816' d='M4.916-6l-.706.706-6,6-.709.709L-3.916,0l.706-.706L2.084-6l-5.291-5.294L-3.916-12-2.5-13.416l.706.706,6,6Z' transform='translate(4.916 1.416) rotate(180)' fill='%231c1c1c'/%3E%3C/svg%3E") no-repeat center center / 50%;}
.control_wrap .swiper-button-next:before { transform: scaleX(-1);}
.control_wrap .swiper_btn_wrap > .swiper_btn{width: 6rem; height: 6rem; border:1px solid #1C1C1C; border-radius: 50%; transition: 0.3s ease-in-out;}
.control_wrap .swiper_btn_wrap > .swiper_btn:hover{background:#000;}
.control_wrap .swiper_btn_wrap > .swiper_btn + .swiper_btn{margin-left: 1.5rem;}
.control_wrap .swiper_btn_wrap > .swiper_btn:hover:before {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.831' height='14.831' viewBox='0 0 8.831 14.831'%3E%3Cpath id='패스_13816' data-name='패스 13816' d='M4.916-6l-.706.706-6,6-.709.709L-3.916,0l.706-.706L2.084-6l-5.291-5.294L-3.916-12-2.5-13.416l.706.706,6,6Z' transform='translate(4.916 1.416) rotate(180)' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center center / 50%;}

.control_wrap .swiper-pagination.swiper-pagination-lock +  .swiper_btn_wrap{display: none;}




/************************************************************************************************************************ 
	MODAL 
************************************************************************************************************************/
.popup-wrap { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index:1200; background: rgba(0,0,0,0.7); overflow: auto;    touch-action: auto;overscroll-behavior: contain;}
.popup-box { display: table; width: 100%; height: 100%; } 
.popup-cont { display: table-cell; vertical-align: middle; padding: var(--inPd); } 
.popup-head .btn-close { position: absolute; right:0; top:-10px; width:40px; height: 40px; background: url(../img/common/ico_close_modal.png) no-repeat 50% 50%;}
.popup { border-radius: var(--radius4); background: #fff; padding:8rem;  margin: 0 auto; position: relative; }
.partner-type .popup { max-width:100rem; padding-right: 4rem;}
.popup .btn-close { position: absolute; right:0; top:0; width:9rem;  height: 9rem;   background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6L6 23.5M6 6L23.5 23.5' stroke='%23666666' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50%; background-size: 3rem auto;    color:rgba(0,0,0,0);}

.calendar-type .popup { max-width:140rem; }
.pw-type .popup { max-width:70rem; }
.terms-type .popup { max-width:100rem; }
.terms-type .popup { }
.pop-tit{ padding: 3rem; background-color:var(--green); font-size:var(--h3); color:#fff; margin:-8rem -8rem 5rem;border-radius:var(--radius4) var(--radius4) 0 0; position: relative;}
.popup .pop-tit .btn-close {height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6L6 23.5M6 6L23.5 23.5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }





.only-pc { display: block;}
.only-m { display: none;}

/* 알랏레이어 */
.msg_layer{display: block; justify-content: center; align-items: center; overflow: auto; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 9999; opacity: 0; width:100%; height: 100%; padding: 50px 20px 80px; background: rgba(0, 0, 0, 0.5); pointer-events: none; transition: 0.2s ease-in-out}
.msg_layer.open{opacity: 1; pointer-events: inherit}
.msg_layer .modal_wrap{display: table; position: relative; width: 100%; height: 100%; padding: 0 var(--resp_wrap_pd); margin: 0 auto; table-layout: fixed; vertical-align: middle}
.msg_layer .modal_wrap .scroll_box{display: table-cell; vertical-align: middle}
.msg_layer .modal_wrap .modal_cont {position: relative; width:55rem; max-width: 100%; padding: 40px var(--modal_row_pd) 40px; margin: 0 auto; background-color: #fff; border-radius: 12px;}
.msg_layer .modal_wrap .modal_cont .cont {padding: 4rem 3rem}
.msg_layer .modal_wrap .modal_cont .cont p {font-size: var(--p3); text-align: center}
.msg_layer .modal_bot_box {display: flex; justify-content: center}
.msg_layer .modal_bot_box .btn {display: inline-block; width: 12rem; height: 4rem; line-height: 3.9rem; background-color: #000; color: #fff}
.msg_layer .modal_bot_box .btn:first-child:nth-last-child(2),
.msg_layer .modal_bot_box .btn:first-child:nth-last-child(2) ~ .btn {width: 12rem;}
.msg_layer .modal_top { display: flex; align-items: center; justify-content: space-between; padding: 4rem 4rem 2rem; display: none}
.msg_layer .modal_top.step { align-items: flex-start; }
.msg_layer .modal_top .tit_wrap {  }
.msg_layer .modal_top .step { font-size: 16px; font-weight: 600; }
.msg_layer .modal_top .step + .tit { margin-top: 10px; }
.msg_layer .modal_top .tit { font-size: 24px; font-weight: 700; }
.msg_layer .btn_wrap { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 3rem; }
.msg_layer .btn_wrap .btm_btn { cursor:pointer;display: flex; align-items: center; justify-content: center; flex: 1; max-width: 50%; height: 3em; padding: 0 1.5em; line-height: 3.1rem; font-size: var(--p3); font-weight: 600; border-radius: 2em; background-color: #8DC43F; border: 1px solid #8DC43F; color: #fff; box-shadow: 0 0 0 transparent; transition: box-shadow 0.3s, background-color 0.3s, color 0.3s; white-space: nowrap; }
.msg_layer .btn_wrap .btm_btn.wh{background-color: #fff; color: #8DC43F;}
.msg_layer .btn_wrap .btm_btn .txt { font-weight: 600; }
.msg_layer .btn_wrap > * + * { margin-left: 1rem; }

/* 로그인 모달 */


.join-type .popup,
.login-type .popup {padding: 8rem 6rem; background: #fff; border-radius: 2.4rem; width: 65rem; padding: 8rem;}
.login-type .popup .login-area .logo {width: 23rem; margin: 0 auto;}
.login-type .popup .login-area .logo img {width: 100%;}
.login-type .popup .login-area .input_wrap{margin-top: 5.6rem;}
.login-type .popup .login-area .input_wrap .inp {position: relative; padding: 0; overflow: hidden;}
.login-type .popup .login-area .input_wrap .inp + .inp {margin-top: 15px;}
.login-type .popup .login-area .input_wrap .inp .ico{position: absolute; top: calc(50%); left: 1.25em; transform: translateY(-50%) ;height: 1em; font-size: var(--p2);}
.login-type .popup .login-area .input_wrap .inp .ico svg{fill: #9A9EA7; transition: fill 0.25s;}
.login-type .popup .login-area .input_wrap .inp input[type="text"]:focus + .ico svg{fill: #232323;}
.login-type .popup .login-area .input_wrap .inp input[type="password"]:focus + .ico svg{fill: #232323;}
.login-type .popup .login-area .input_wrap input{width: 100%; height: 100% ;padding-left: 3em; font-size: var(--p2); transition: background 0.25s, border 0.25s;}
.login-type .popup .login-area .input_wrap input::placeholder{color: #9A9EA7;}
.login-type .popup .login-area .input_wrap button{width: 100%; padding: 1.15em 0; margin-top: 1.5em; background: #232323; color: #fff; font-size: var(--p2); font-weight: 700; text-align: center; border-radius: 0.8rem; line-height: 1em; transition: background 0.25s;}

.login-type .popup .util_wrap{display: flex; justify-content: center; margin-top: 2.4rem;}
.login-type .popup .util_wrap a{position: relative; color: #9A9EA7; font-size: var(--p3); font-weight: 500; line-height: 1em; transition: color 0.25s;}
.login-type .popup .util_wrap a + a{padding-left: 1.2em; margin-left: 1.2em; border-left: 1px solid rgba(188, 191, 199, 0.5);}
.login-type .popup .util_wrap a:hover {color: #000;}
.login-type .popup .sns_login{display: flex; margin-top: 8rem;}
.login-type .popup .sns_login a{flex: 1; display: flex; align-items: center; justify-content: center; padding: 1em 0.9em; border: 1px solid #ddd; font-size: var(--p2); border-radius: 2em; line-height: 1em; transition: border-color 0.25s;}
.login-type .popup .sns_login a + a{margin-left: 1.6rem;}
.login-type .popup .sns_login a svg{margin-right: 1em;}
.login-type .popup .sns_login a.naver svg{fill: #16B95E;}
.login-type .popup .sns_login a.kakao svg{fill: #381E1F;}
.login-type .popup .sns_login a:hover {border-color: #000;}


.join-type .popup .join_wrap .txt_box{margin-bottom: 5.6rem;}
.join-type .popup .join_wrap .txt_box .step{margin-bottom: 1em; color: var(--green); font-size: var(--p3); font-weight: 700; line-height: 1em;}
.join-type .popup .join_wrap .txt_box .tit{font-size: var(--p1); font-size: var(--h3); font-weight: 700;}
.join-type .popup .join_wrap .inp_wrap {font-size: var(--p2);}
.join-type .popup .join_wrap .inp_wrap + .inp_wrap{margin-top: 30px;}
.join-type .popup .join_wrap .inp_wrap .inp_tit{display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;}
.join-type .popup .join_wrap .inp_wrap .inp_tit p{font-size: var(--p3);}
.join-type .popup .join_wrap .inp_wrap .inp_tit a{display: flex; align-items: center; color: #9A9EA7; font-size: var(--p3); transition: color 0.25s;}
.join-type .popup .join_wrap .inp_wrap .inp_tit a svg{margin-left: 0.5em; fill: #9A9EA7; transition: fill 0.25s;}
.join-type .popup .join_wrap .inp_wrap .birthday_box {display: flex;}
.join-type .popup .join_wrap .inp_wrap .birthday_box .select {flex: 1;}
.join-type .popup .join_wrap .inp_wrap .birthday_box .select + .select {margin-left: 10px;}

.join-type .popup .join_wrap .inp_wrap .nice-select {height: 3em; border-color: #ddd; border-radius: 0.8rem; font-size: var(--p2); line-height: 3em;}
.join-type .popup .join_wrap .inp_wrap .nice-select .list {width: 100%; max-height: 200px; overflow-y: auto;} 
.join-type .popup .join_wrap .inp_wrap .refer{display: block; position: relative; padding-left: 1em; margin-top: 1em; color: #9A9EA7; font-size: var(--p3); font-weight: 500;}
.join-type .popup .join_wrap .inp_wrap .refer::before{content: '※'; position: absolute; top: 0; left: 0;}
.join-type .popup .join_wrap .inp_wrap input{width: 100%; height: 3em;; padding: 0 1.2em; border: 1px solid #ddd;  border-radius: 0.8rem; line-height: 3em;; transition: background 0.25s, border 0.25s;}

.join-type .popup .join_wrap .inp_wrap .inp_pw{position:relative;}
.join-type .popup .join_wrap .inp_wrap input + .ico {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: var(--p2); height: var(--p2) ;display: none}
.join-type .popup .join_wrap .inp_wrap input + .ico.checked {display: block}
.join-type .popup .join_wrap .inp_wrap input + .ico.checked.enable {display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%238DC43F"><path d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"/></svg>') no-repeat center / contain}
.join-type .popup .join_wrap .inp_wrap input + .ico.checked.unable {display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="%23ec2f2f"><path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/></svg>') no-repeat center / contain}


.join-type .popup .join_wrap .inp_wrap input.with_btn{border-radius: 0.8rem 0 0 0.8rem;}
.join-type .popup .join_wrap .inp_wrap input:focus{border-color: #232323;}
.join-type .popup .join_wrap .inp_wrap input::placeholder{color: #ddd;}
.join-type .popup .join_wrap .inp_wrap .flex_wrap{display: flex;}
.join-type .popup .join_wrap .inp_wrap .flex_wrap button{flex-shrink: 0; height: 3em;; padding: 0 1.5em; border: 1px solid #ddd; border-left: none; font-size: var(--p2); border-radius: 0 0.8rem 0.8rem 0; color: #232323; transition: background 0.25s, color 0.25s;}
.join-type .popup .join_wrap .chk_wrap{}
.join-type .popup .join_wrap .chk_wrap input{}
.join-type .popup .join_wrap .chk_wrap input + label{display: flex; align-items: center; justify-content: center; width: 100%; height: 3em;; border: 1px solid #ddd; color: #9A9EA7; font-size: var(--p2); font-weight: 600; border-radius: 0.8rem; line-height: 3em;; cursor: pointer; transition: border 0.25s, color 0.25s;}
.join-type .popup .join_wrap .chk_wrap input + label svg{margin-right: 0.5em; fill: #9A9EA7; transition: fill 0.25s;}
.join-type .popup .join_wrap .chk_wrap input:checked + label{border-color: #232323; color: #232323;}
.join-type .popup .join_wrap .chk_wrap input:checked + label svg{fill: #232323;}
.join-type .popup .join_wrap .chk_all_wrap{display: flex; margin-top: 1.6rem;}    

.join-type .popup .join_wrap .chk_all_wrap input{}
.join-type .popup .join_wrap .chk_all_wrap input + label{display: flex; padding: 0.75em 1em; margin-left: auto; border: 1px solid #9A9EA7; color: #9A9EA7; font-size: var(--p3); border-radius: 2em; line-height: 1em; cursor: pointer; transition: background 0.25s, border 0.25s, color 0.25s;}
.join-type .popup .join_wrap .chk_all_wrap input + label svg{margin-right: 0.5em; fill: #9A9EA7; transition: fill 0.25s;}
.join-type .popup .join_wrap .chk_all_wrap input:checked + label{background: #232323; border-color: #232323; color: #fff;}
.join-type .popup .join_wrap .chk_all_wrap input:checked + label svg{fill: #fff;}
.join-type .popup .join_wrap .join_complete{display: flex; flex-direction: column; align-items: center;}
.join-type .popup .join_wrap .join_complete .ico{display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; background: #EAF5F3; font-size: var(--h2); border-radius: 50%;}
.join-type .popup .join_wrap .join_complete .ico svg{fill: var(--green);}
.join-type .popup .join_wrap .join_complete p{margin-top: 1em; font-size: var(--h3); font-weight: 700;}

.join-type .popup .join_wrap.find_id .tit { margin-bottom: 40px; font-weight: 600; font-size: var(--h3);text-align: center;}
.join-type .popup .join_wrap.find_id .chk_id { padding: 1em; border-radius: 2rem; background-color: #f6f7f9; font-size: var(--p2)}

.join-type .btn_wrap {margin-top: 40px; display: flex; justify-content: center;}
.join-type .btn_wrap a {font-size: var(--p2); padding: 1em 3em; line-height: 1em; background-color: var(--green); color: #fff; border-radius: 5em; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.join-type .btn_wrap a.line {border: 1px solid #000; background-color: transparent; color: #000;}
.join-type .btn_wrap a:hover {background-color: #000; color: #fff;}
.join-type .btn_wrap.full a {flex: 1; text-align: center;padding: 1em 0;}
.join-type .btn_wrap.full a + a {margin-left: 15px;}


.find-type .popup{padding:15rem 8rem;}




/* 패스워드 */
/* .popup .pw-type .btn_wrap {display: flex;margin-top: 40px}
.popup .pw-type .btn_wrap > * {flex: 1;padding: 1em 0;border: 1px solid #000;font-size: var(--subTxt);text-align: center;border-radius: 2em;line-height: 1em;transition: background-color 0.25s, fill 0.25s, color 0.25s;}
.popup .pw-type .btn_wrap > *.v2 {background: #8DC43F;border-color: var(--blue);color: #fff;font-weight: 700;}
.popup .pw-type .btn_wrap > *.v2:hover {background-color: #3c3c3c;}
.popup .pw-type .btn_wrap > * + * {margin-left: 0.8rem;}
.popup .pw-type .inp input {width: 100%;height: var(--inpH2);margin-bottom: 2rem;border: 1px solid var(--borderColor1);font-size: var(--subTxt);font-weight: 700;text-align: center;border-radius: 0.8rem;}
.popup .pw-type .password_box .tit {display: block;margin: 1.5em 0;font-size: var(--bigTxt);font-weight: 700;text-align: center;line-height: 1em;}
.popup .pw-type .tip {font-size: var(--smTxt);color: var(--txtGray3);} */


.popup-wrap.pw-type .btn_wrap{display: flex; margin-top: 6.4rem;}
.popup-wrap.pw-type .btn_wrap > *{flex: 1; padding: 1em 0; border: 1px solid #000; font-size: var(--p2); text-align: center; border-radius: 2em; line-height: 1em; transition: background-color 0.25s, fill 0.25s, color 0.25s;}
.popup-wrap.pw-type .btn_wrap > *.v2{background: var(--green); border-color: var(--green); color: #fff; font-weight: 700;}
.popup-wrap.pw-type .btn_wrap > * + *{margin-left: 15px;}
.popup-wrap.pw-type .inp input {width: 100%;height: 100%;}
.popup-wrap.pw-type .password_box .tit {display: block;margin: 1em 0 1.5em;font-size: var(--h4);font-weight: 700;text-align: center;line-height: 1em;}
.popup-wrap.pw-type .tip {margin-top: 20px; font-size: var(--p2);}


.popup-wrap.pw-type .partner-view {padding-right: 0;}


.join_wrap .btn_wrap * + * {margin-left: 15px}

/*
https://chatgpt.com/share/682d1697-a6b4-8007-8014-73511b15081a
3200px	0.3125vw × 3200px = 10px	10px
1920px	0.3125vw × 1920px = 6px	6px
2560px	0.3125vw × 2560px = ✅ 8px	✅ 8px
3840px	0.3125vw × 3840px = 12px	12px
*/

@media screen and (min-width: 3000px) {
    /* 3200부터는 비율대로 자연스럽게 늘어남 */
    html { font-size: 0.3125vw; }
    /* html { font-size: 0.35vw; } */
}

@media screen and (max-width: 2560px) {
    html { font-size:9px; }
    :root{
        --mainPd:30rem;
    }
}

@media screen and (max-width: 2000px) {

    html { font-size:8px; }
    :root {


        --txt80: 6rem;

        --h1: 5.4rem;
        --h2: 3.4rem;
        --h3:23px; 
        --h4:21px; 
        --p1:19px;
        --p2:17px;
        --p3:15px;
        --mainInWid:100%;
        --inPd: 5rem;
        --pd30:20rem;
        --mainPd:25rem;




    }

    .quick-menu .btns ul li a { font-size:1.9rem;}


}

@media screen and (max-width: 1640px) {
    html { font-size:6px;}
    :root {

        

        --inPd: 20px;
        --mainPd:20rem;
        --pd30:15rem;

        --h3:21px;
        --h4:20px;
        --p1:17px;
        --p2:16px;
        --p3:14px;
        /* 
        --headerH:10rem; 
        --mainPd: 35rem;
        --radius2:2rem;
        --radius3:3rem;
        --radius4:4rem; */


    }
    .in { max-width: clamp(1240px, 70vw, 180rem);}

    .join-type .popup, .login-type .popup {width: 75rem}

    .control_wrap .swiper_btn_wrap > .swiper_btn{width: 7rem; height: 7rem;}

    /* new header */
    .header .inner .nav.on > ul .btn-dep1{padding: 0 14rem;}
    .header .inner .nav > ul > li:nth-child(4) .dep2 ul li dt a { white-space: unset;}

    .header .inner .nav .dep2 ul li dd a{line-height: 25px;}

    .header .inner .nav > ul > li.on:before{height: calc( var(--headerH) + 64rem);}
    .header .inner .nav .dep2{ height:64rem;}
    .header .inner .nav.on .gnb_bg{height: 64rem;}

    .header .right-wrap .links .btn-login svg {width: 1.2em;}



}



@media screen and (max-width: 1240px){
    html { font-size:5px; }
    :root{
        --h2:4.2rem; 
        --h3:3.5rem; 
        --h4:3.3rem;
        --p1:3.1rem;
        --p2:2.9rem;
        --p3:2.5rem;
        --headerH:60px;
        --mainPd:140px;
        
    }
    


    .header .inner { height: var(--headerH);}
    .header .inner h1 a img { width:19rem; }
    .header .right-wrap .links .btn-login { display: none;}
    .header .inner .nav .mo-head { display: flex; background-color: #f6f6f6;}
    .header .inner .nav .mo-head .right .btn-login {border-color: #000;color: #000;font-size: 2.5rem;padding: 0 3rem;line-height: 5.1rem; font-weight: 600;}
    .header .inner .nav .mo-head .right .btn-close svg {fill: #000; width: 20px;}
    .header .inner .nav .mo-head .right a + a{margin-left: 1rem;}
    

    .header .inner .nav {   position: fixed;left: 0;top:0; width:100%; bottom:0; background-color: var(--green); z-index:9999; opacity: 0; visibility: hidden; transition: all 0.5s var(--ease2); overflow: auto;}
    .header .inner .nav > ul { display: block; color:#fff; margin-top: 20px;}
    .header .inner .nav > ul > li {}
    .header .inner .nav > ul .btn-dep1 { font-size:3.7rem; line-height:14rem; position: relative; border-bottom: 1px solid rgba(255,255,255,0.2); padding:0; margin: 0 var(--inPd); transition: border-color 0.3s ease-in-out; text-align: left;}
    .header .inner .nav > ul .btn-dep1:after { content: ''; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 1em; height: 1em; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23fff" height="1em"><path d="M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z"/></svg>')center/cover no-repeat; transition: all 0.5s var(--ease2);}
    
    .header .inner .nav > ul > li.active .btn-dep1 { color:#fff; }
    .header .inner .nav > ul > li.open .btn-dep1:after { transform: translateY(-50%) rotate(180deg);}

    .header .inner .nav > ul > li.open .btn-dep1 {border-color: transparent;}
    /* .header .inner .nav > ul > li.active .dep2 {display: block;} */
    

    .header .inner .nav .dep2 {position: static; transform: unset; top:auto; left:auto; width:auto; border-radius:15px; padding:15px 25px; box-shadow: none; border:none; background: none; margin: 0 var(--inPd); background-color: #fff; color: #000;}
    .header .inner .nav .dep2 ul { display: block; }
    .header .inner .nav .dep2 ul li { padding:0; }
    .header .inner .nav .dep2 ul li + li { margin-top:15px;}
    .header .inner .nav .dep2 ul li a { display: block;}
    .header .inner .nav .dep2 ul li dt a { font-size:16px; line-height: 2; }

    .header .inner .nav .dep2 ul li dd + dd {margin-top: 1.25em; }
    .header .inner .nav .dep2 ul li dd {padding-left: 20px; position: relative; display: block;}
    .header .inner .nav .dep2 ul li dd::before {content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #000;}
    .header .inner .nav .dep2 ul li dd a { position: relative; font-size:14px; color:rgba(0,0,0,0.6); line-height: 2; }
    
    

    .header .inner .nav .dep2 ul li dd:first-of-type { margin-top:1.2em;}

    /* new header */
    .header .inner .nav .dep2 > ul{margin-top: 0;}
    .header .inner .nav .dep2 ul li{text-align: left;}
    .header .inner .nav > ul > li.on:before{height: calc( var(--headerH) + 64rem);}
    .header .inner .nav .dep2{ height:auto;}
    .header .inner .nav.on .gnb_bg{display:none;}



    body.mobile-menu { overflow: hidden;}
    body.mobile-menu .header .inner .nav {  opacity: 1; visibility: visible; }


    .quick-menu .btns .qna-box {width: 66rem;}
    .quick-menu .btns ul li a {font-size: 11.5px;}
    .quick-menu .btns ul li:nth-child(2) i svg {width: 2.5rem;}


    .footer .in { display: block; padding-bottom: 14rem; padding-top: 40px;}
    .footer .right .sns {margin-top: 30px}
    .footer .etc ul { flex-wrap: wrap;;}
    .quick-menu { bottom:20rem; }
    .header .right-wrap .btn-m { display: block;}
    .header .right-wrap .btn-m svg { width:20px; height: auto; margin-left: 15px;}

    .only-pc { display: none !important;}
    .only-m { display: block !important;}
    

}


@media screen and (max-width: 768px){
    :root {
        --h1:22px;
        --h2:20px;
        --h3:18px;
        --h4:16px;
        --p1:14px; 
        --p2:14px; 
        --p3:12px; 
        --inPd:15px;
        --mainPd:120px;

        --listTxtMt:20px;

        --contMt: 35px;
        --subContMt:25px;
        --subPd:120px;

        --radius4: 15px;
    }


    .pc_only {display: none !important ;}
    .mo_only {display: block !important;}
    .mo_only.flex {display: flex !important;}

    .phone_over {display: none !important;}
    .popup { padding:var(--inPd); padding-top: calc(var(--inPd) + 4rem); }
    .quick-menu { bottom:0px; right: 0; width: 100%; background-color: var(--black)}
    .quick-menu .btns {display: flex; padding: 0 10px}
    .quick-menu .btns > ul +  ul {margin-left: 10px}
    .quick-menu .btns > ul {display: flex; align-items: center; justify-content: space-around ;position: relative;}
    .quick-menu .btns > ul.type1 {flex: 1; min-width: 0}

    .quick-menu .btns > ul li {}
    .quick-menu .btns > ul li a {margin-top: 0; width: 100%; aspect-ratio:inherit; padding: 15px 0; display: flex; align-items: center; justify-content: flex-start; flex-direction: row; background-color: transparent}
    .quick-menu .btns > ul li i {margin-right: 10px; display: flex; align-items: center}
    .quick-menu .btns > ul li:nth-child(1) i svg {width: 16px}
    .quick-menu .btns > ul li:nth-child(2) i svg {width: 15px}
    .quick-menu .btns > ul li:nth-child(3) i svg {width: 12px; fill: #fff}
    .quick-menu .btns > ul li.top_btn { width: 36px; margin-left: auto; flex: none; }
    .quick-menu .btns > ul li .btn-top { width:36px; height: 36px; border: none}
    .quick-menu .btns ul li.top_btn a {border: none; justify-content: center}

    .quick-menu .btns .btn1 + .qna-box {transform: translate(56%,-60px);}
    .quick-menu .btns .btn2 + .qna-box {transform: translate(-45%,-60px); left: 0}

    .quick-menu .btns .qna-box .btn-close {flex-shrink: 0}



    .control_wrap .swiper-button-prev:before,
    .control_wrap .swiper-button-next:before { content: ''; display: block; width: 18px; height: 18px; transition: 0.3s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.831' height='14.831' viewBox='0 0 8.831 14.831'%3E%3Cpath id='패스_13816' data-name='패스 13816' d='M4.916-6l-.706.706-6,6-.709.709L-3.916,0l.706-.706L2.084-6l-5.291-5.294L-3.916-12-2.5-13.416l.706.706,6,6Z' transform='translate(4.916 1.416) rotate(180)' fill='%231c1c1c'/%3E%3C/svg%3E") no-repeat center center / 40%;}
    .control_wrap .swiper_btn_wrap > .swiper_btn:hover:before {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.831' height='14.831' viewBox='0 0 8.831 14.831'%3E%3Cpath id='패스_13816' data-name='패스 13816' d='M4.916-6l-.706.706-6,6-.709.709L-3.916,0l.706-.706L2.084-6l-5.291-5.294L-3.916-12-2.5-13.416l.706.706,6,6Z' transform='translate(4.916 1.416) rotate(180)' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center center / 40%;}

    .control_wrap .swiper_btn_wrap{margin-left: 15px;}
    .control_wrap .swiper_btn_wrap > .swiper_btn{width: 7rem; height: 7rem;}
    .control_wrap .swiper_btn_wrap > .swiper_btn + .swiper_btn{margin-left: 6px;}


    .pop-tit {margin: -7rem -3rem 5rem;}
    .popup .btn-close  {width: 25px; height: 25px;  background-size: 25px auto; right: 15px; top: 15px;}
    .popup .pop-tit .btn-close {top: 0px;} 
    .join-type .popup, .login-type .popup {padding: 40px 20px;}


    .quick-menu .btns ul li a {font-size: var(--p3)}

    .partner-type .btn-close { width: 25px; height: 25px; background-size: 25px auto; right: 10px; top: 15px; } 
    .partner-type .popup { padding: 60px 20px 20px 20px; }
    .partner-view .info .pop-slider {  }

    
    .footer .info div p { font-size:12px; }
    .footer .etc a { font-size:13px; margin-bottom: 5px; display: inline-block;}
    .footer .cs-box ul { display: block;}
    .footer .cs-box ul li { height: 90px; ;}
    .footer .right { margin-top:20px; }
    .footer .right .sns a { width:3em; height: 3em; ;}
    .footer .right .sns a:nth-child(1) svg { width:1.3em; height:auto;  }
    .footer .right .sns a:nth-child(2) svg { width:0.75em; height:auto;  }
    .footer .right .sns a:nth-child(3) svg { width:1.4em; height:auto;  }
    .footer .right .sns a:nth-child(4) svg { width:1.3em; height:auto;  }
    .footer .right .sns a:nth-child(5) img { width:1.4em; height:auto;  }
    .footer .right .sns a:nth-child(6) img { width:1.8em; height:auto;  }

    .footer .info div p:last-child::before {content: none;}

    .footer .cs-box ul li dl dd svg {width: 3.2rem;}
 

}


@media screen and (min-width: 1240px) {




    .header .right-wrap .links .btn:hover {background-color: #000; color: #fff}
    .header .right-wrap .links .btn:hover svg {fill: #fff}
    .btn-main-more:hover i  { transform: scale(1); margin-right:1.5rem }

    .footer .right .sns a:hover { background-color: #2974D5; }
    .footer .right .sns a:hover svg path { fill: #fff; }
    .footer .right .sns a:hover:before { opacity:1;}

    .footer .right .sns a:nth-child(5):hover img { content: url('../img/common/foot_love_on.png');}
    .footer .right .sns a:nth-child(6):hover img { content: url('../img/common/foot_happy_on.png');}

    .quick-menu .btns ul li:not(:last-child) a:hover {background-color:  var(--green); border-color :var(--green);}
    .quick-menu .btns ul li:nth-child(4) svg{transition: transform 0.3s ease-in-out;}
    .quick-menu .btns ul li:nth-child(4) a:hover svg{transform: translateY(-5px);}

    .quick-menu .btns .gene-box .btn-close:hover svg { transform: rotate(180deg); }
    .quick-menu .btns .qna-box .btn-close:hover svg { transform: rotate(180deg); }

}


@media screen and (max-width: 600px){
    :root{

        --mainPd: 80px;
        --subPd: 80px;
    }

    .join-type .popup, .login-type .popup {width: 100%}
    .mo_tiny_only{display: block !important;}
    .mo_tiny_over{display: none !important;}

    .header .right-wrap .links .btn {font-size: var(--p3); padding: 0 0.8em}
    .header .right-wrap .links .btn-receipt svg {transform: unset}


}