/* 공통적용 */
html {scroll-behavior:smooth;}
body {overflow-x: hidden;}
body.scroll-lock {overflow-y: hidden;}
img {max-width: 100%;}
.inner {width: 90%; max-width: 1800px; margin: 0 auto; }
.bold {font-weight: 700;}
.colorMain {color: var(--mainColor);}
.icon {aspect-ratio: 1/1; font-size: 0;}
.icon img {width: 100%; height: 100%; object-fit: cover;}
input[type="radio"] {background-color: initial;cursor: default;appearance: auto;box-sizing: border-box;margin: 3px 3px 0px 5px;padding: initial;border: initial;}

/* 비메오, 유튜브 */
.video_container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.video_container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

button{background: inherit; border: none;}

/* padding */
.p_tb {padding: 120px 0;}
.p_t {padding-top: 120px;}
.p_b {padding-bottom: 120px;}
.p-0{padding: 0 !important;}

.pc_only{display: block;}
.mo_only{display: none;}

input, select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}

select:focus{outline: none;}
input:focus{outline: none;}
/* table */
.tb_box table {width: 100%;}
.tb_box th,
.tb_box td {border: 1px solid var(--border); padding: 10px; vertical-align: middle; text-align: center;}
.tb_box th {background: var(--mainColor); color: #fff;}
.tb_box .pbox {text-align: left; display: flex; flex-direction: column; gap: 5px;}
.tb_box .pbox .p {padding-left: 15px; position: relative;}
.tb_box .pbox .p::before {display: block; content: "-"; position: absolute; left: 0; top: 0;}

.select{width: 100%;}
.select select{border: 1px solid #d5d5d5; border-radius: 10px; width: 100%;background: url(/img/ico_select_arr-5619ee297797dfe795a440057bcacc6f.png) no-repeat #fff calc(100% - 10px) 50% / 20px auto;}

select {
    padding: 0 30px 0 10px; height: 40px; line-height: 40px;
    border: 1px solid #ddd;border-radius: 10px;
    background:url('/img/icon_select_arr-9048cf23965dee63cedf5217debea6d1.png') no-repeat #fff calc(100% - 12px) 50%/18px auto;
}

.mo_only{display: none;}

button{font-size: 1em; cursor: pointer;display: block;}
.form_box.essen label span{position: relative;}
.form_box.essen label span::after{content: '*';font-size: 0.75em;position: absolute;right: -9px; bottom: -7px;}

.mt-30{margin-top: 30px;}
.mt-60{margin-top: 60px;}
.mb-0{margin-bottom: 0px !important}
.mb-60{margin-bottom: 60px;}

.pt-0{padding-top: 0 !important;}

/* footer */
#footer {padding: 60px 0; background: #B50062; color: #fff; border-top: 1px solid #ddd;}
#footer .inner{max-width: 1600px;}
#footer img{vertical-align: middle;}
#footer .tbox {display: flex; justify-content: center;align-items: end;text-align: center;}
#footer .tbox .ft_logo{display: inline-block;text-align: center; margin: 0 auto;}
#footer .tbox .ft_logo img{max-width: 280px;}
#footer .menu {display: flex;justify-content: center; gap: 0;}
#footer .menu li{position: relative; font-weight: 400;color: #d8d8d8;margin-right: 10px;padding-right: 10px;}
#footer .menu li::before{content: ''; background: #d8d8d8; width: 2px;height: 70%; position: absolute;top: 50%; transform: translateY(-50%);right: 0;}
#footer .menu li:last-child{margin-right: 0;padding-right: 0;}
#footer .menu li:last-child:before{display: none;}

#footer .sns_menu{margin-bottom: 20px;}
#footer .menu li span{font-weight: 500; color: #fff;}
#footer .copy{padding-top: 20px; color: #fff;}
#footer .copy li{color: #fff;}
#footer li.btn-open-terms{font-weight: 600;}
#footer .nav{display: flex; flex-direction: column; align-items: start; gap: 30px;}
#footer .nav .menu_wrap{display: grid; gap: 5px;}
#footer .right .f_sns{display: flex; gap: 10px; align-items: center; justify-content: right;margin-bottom: 10px;}
#footer .right .f_privacy{display: flex; align-items: center; gap: 20px; }
#footer .right .f_privacy a{font-weight: 400; position: relative;}
#footer .right .f_privacy a::after{content: ''; width: 1px; height: 80%; background: #ddd;position: absolute; top: 50%; transform: translateY(-50%);margin-right: -10px; right: 0;}
#footer .right .f_privacy li:last-child a::after{display: none;}

/* header */
.border{border-bottom: 1px solid #d5d5d5;}
#header {width: 100%; height:auto; display: flex; background: #F9F7FB; align-items: center; position: fixed; z-index: 900;border-bottom: 1px solid #DBD5E1;}
#header .inner {display: flex;gap: 20px;padding: 22px 0; align-items: center; justify-content: space-between; height: 100%; max-width: 1800px; }
#header .logo {font-size: 24px; font-weight: 700;}
#header .logo img {height: 65px; width: 100%; object-fit: contain;}
#header .nav_wrap {width: 100%; display: flex;align-items: center; justify-content: center; gap:80px}
#header .menu {display: flex; gap: 60px; align-items: center; color: #000; height: 100%;}
#header .menu > li {height: 100%; position: relative;}
#header .menu > li > a {height: 100%; display: flex; color: #fff; align-items: center; justify-content: center; font-size: 1.125em; font-weight: 400; position: relative;}
#header .utils{display: flex; margin-left: auto; align-items: center; gap: 24px; display: none;}
#header .utils .has-sub{position: relative;}

#header .logo_b{display: none;}

.utils_item { position: relative;}
.utils_item.flex{display: flex; align-items: center; gap: 15px;}
.utils_btn {background: none;border: none;cursor: pointer;font-size: 1em;}
.conven_btn{display: flex; align-items: center;gap: 5px;min-width: 180px;padding: 6px 15px; border: 1px solid #D5D5D5; border-radius: 10px;position: relative;}
.conven_btn img{max-width: 26px;}
.conven_btn::after{content: ''; background: url(/img/ico_arrow-5619ee297797dfe795a440057bcacc6f.png) no-repeat;width:24px; height: 24px; position: absolute; right: 10px}
.donate_btn {padding: 8px 16px;display: flex;align-items: center; min-height: 40px; background: #000;color: #fff;border-radius: 50px;text-decoration: none;}
.search_btn {font-size: 18px;text-decoration: none;}
.search_btn img{max-width: 24px;vertical-align: middle;}
.profile_btn{padding: 8px 0;}
.profile_btn img{max-width: 24px; vertical-align: middle;}
.dropdown {position: absolute;top: 100%;right: 0;margin-top: 10px;padding: 16px;min-width: 180px;background: #fff;border:1px solid #d5d5d5; border-radius: 10px;box-shadow: 0 10px 20px rgba(0,0,0,0.1);display: none;}
.dropdown a{display: block; padding-bottom: 12px;}
.dropdown a:last-child{padding-bottom: 0;}

.utils_item.open .dropdown { display: block;}
.control_group {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.control_group.line{border-bottom: 1px solid #D5D5D5; padding-bottom: 5px;}
.control_group:last-child{margin-bottom: 0;}
.btns button {width: 28px; height: 28px; padding: 0; cursor: pointer; border: none; background: inherit;}
.btns button img{width: 100%; background-size: cover;}
.reset_btn {width: 100%;margin-top: 10px;padding: 8px;border: none;cursor: pointer;}

.accessibility_exempt .dropdown{font-size: 16px !important;line-height: 1.4 !important;}
.accessibility_exempt .dropdown button,
.accessibility_exempt .dropdown span {font-size: 16px !important;line-height: 1.4 !important;}

#header .submenu {display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.9);padding: 15px; text-align: center; min-width: 120px;}
#header .submenu > div {display: flex; flex-direction: column; gap: 15px}
#header .submenu > div > a {white-space: nowrap; display: block; color: #fff; font-size: 0.875em; line-height: 1;}
#header .submenu > div > a:hover {font-weight: 700;}

#header .hamberg {display: none;}
#header .megamenu{display: block;}
#header .megamenu {width: 24px; height: 24px; font-size: 0; display: flex; align-items: center; cursor: pointer; position: relative; z-index: 2;}
#header .megamenu span {width: 100%; margin-bottom: 1px; height: 2px; background: #fff; display: block; position: relative; transition: all .3s;}
#header .megamenu span::before,
#header .megamenu span::after {display: block; content: ""; width: 100%; height: 2px; background: #fff; position: absolute; transition: all .3s;}
#header .megamenu span::before {top: -8px;}
#header .megamenu span::after {top: 8px;}
#header .megamenu.on span {background: rgba(255,255,255,0);}
#header .megamenu.on span::before {top: 0; transform: rotate(-45deg);}
#header .megamenu.on span::after {top: 0; transform: rotate(45deg);}

.hd_site_map {background: #fff;border-right: 1px solid #d5d5d5;position: fixed;top: 120px;left: -100%;bottom: 0;width: 100%;transition: all .5s;border-top: 1px solid var(--mainColor);}
.hd_site_map.on {left: 0;transition: all .5s;}
.hd_site_map .site_map_box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90%;max-width: 1600px;}
.hd_site_map .site_map_nav{display: flex;flex-direction: column;gap: 30px;}
.hd_site_map .site_map_nav .dept1 {display: flex;justify-content: space-between;}
.hd_site_map .site_map_nav .dept1>li {width: 18%;}
.hd_site_map .site_map_nav .dept1>li>a {display: block;border-bottom: 2px solid var(--mainColor); font-family: 'NanumSquareNeoExtraBold'; font-size: 2em;font-weight: 700;padding-bottom: 20px;}
.hd_site_map .site_map_nav .dept1>li>a:hover {color: var(--mainColor);transition: all .3s}
.hd_site_map .site_map_nav .dept2>li {padding-top: 25px;}
.hd_site_map .site_map_nav .dept2>li>a {font-size: 1.5em;line-height: 1.9em;display: block;}
.hd_site_map .site_map_nav .dept2>li>a:hover {color: var(--mainColor);transition: all .3s}
.hd_site_map .site_map_nav .dept2 span{font-weight: 500;}

.site_map_top {display: none;}

#header.active {background:#F9F7FB;}
#header.active .menu > li > a{color: #000;}
#header.active .logo .logo_w{display: none;}
#header.active .logo .logo_b{display: block;}
#header.active .megamenu span{background: #000;}
#header.active .megamenu span::before,
#header.active .megamenu span::after{background: #000;}

#header.active .megamenu.on span{background: rgba(255,255,255,0);}

#header .megamenu.on span::before,
#header .megamenu.on span::after{background: #000;}

.has-sub:hover .sub_menu {display: block;}

.hamberg_wrap{display: none;}

.sub_menu {margin: 0;padding: 0;list-style: none;}
.menu > li {position: relative;}
.sub_menu {display: none;}
.sub_menu li:hover{background: #fff6fc;}
.sub_menu li a{cursor: pointer;}
/* #header .lang {font-size: 0.875em; position: relative;cursor: pointer;}
#header .lang > a {display: flex; gap: 7px; align-items: center;}
#header .lang > a::after {
	display: block; content: ""; width: 5px; height: 5px; border-top: 1px solid #000; border-right: 1px solid #000;
	transform: rotate(135deg); margin-bottom: 4px;
}
#header .langmenu {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5;
	border-radius: 10px; width: 70px; text-align: center; padding: 8px; background: #222; display: none;
}
#header .side .langmenu{width: auto;top: calc(100% + 11px);padding: 8px 16px;}
#header .side .langmenu a:hover{color: #fff;}
#header .langmenu a {display: block; padding: 2px 0; color: #aaa;}
#header .langmenu a.active {font-weight: 700; color: #fff;} */



/* 팝업 */
.center-popup-backdrop,
.bottom-popup-backdrop {position: fixed;inset: 0;z-index: 999;background: rgba(0,0,0,.64);display: none;}

.center-popup-backdrop.is-open,
.bottom-popup-backdrop.is-open {display: flex;}
.center-popup-backdrop {align-items: center;justify-content: center;}
.center-popup {width: 90%;max-width: 460px;border-radius: 1em;background: #fff;box-shadow: 0 0.4em 1.2em rgba(0,0,0,.18);display: flex;flex-direction: column;overflow: hidden;margin: 0 auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.center-popup_body {padding: 24px 24px 0px}
.center-popup_title {font-size: 16px;font-weight: 600;line-height: 1.5;}
.center-popup_text {font-size: 0.9em;color: rgba(0,0,0,.75);line-height: 1.5;}
.center-popup_footer {display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 0.6em;padding: 16px 24px 24px;}
.one_btn{width: 100%;}
.one_btn .btn{width: inherit; padding: 16px 24px; justify-content: right; height: inherit; background: inherit !important; border: inherit !important; color: #3BBEE8; font-weight: 700;}
.center-popup_footer .btn {height: 2.6em;font-size: 0.9em;}

.btn-open-terms{cursor: pointer;}
.terms-txt{max-height: 400px; overflow: auto; font-size:14px;}
.terms .one_btn .btn{display: inline-block; cursor: pointer; color: var(--mainColor); margin-top: 0;}
.terms .center-popup_body{padding-right: 10px; text-align: left; line-height:1.4;}
.terms .center-popup_title{padding-right: 15px; font-size: 20px; font-weight: 700;margin-bottom: 10px;}

.terms_wrap{display: flex;flex-direction: column;box-shadow: none;padding: 0; border-radius: 0; gap: 20px;line-height: 1.5;}
.sec .tit{font-weight: 700;}
.sec span{font-weight: 700;}
.terms-txt .terms_wrap br{display: none;}
.terms-txt .terms_wrap br.terms_br{display: block;}
.terms .center-popup_body{padding-right: 17px;}

body.is-scroll-locked {overflow: hidden;touch-action: none;}

.sound_btn .play{display: flex; align-items: center;justify-content: center;cursor: pointer; gap: 5px;color: var(--mainColor); background: #fff;font-size: 1em; border: 1px solid var(--mainColor);padding: 5px 10px; border-radius: 10px;}
.sound_btn .play:hover{color: #fff; background: var(--mainColor); }

.link_menu a{pointer-events:inherit !important}

@media screen and (min-width:1401px) {
    .menu {display: flex;gap: 30px;}
    .menu > li > a {display: block;}
    .sub_menu {position: absolute;top: 100%; left: 50%;transform: translateX(-50%);text-align: center; min-width: 140px; border-radius: 10px; padding: 10px 0;background: #fff;box-shadow: 0 10px 20px rgba(0,0,0,0.1); z-index: 10;}
    .sub_menu li a {display: block;padding: 8px 16px;white-space: nowrap;}
}

@media screen and (max-width:1600px) {
    #header .nav_wrap{gap: 10px;}
}

@media screen and (max-width:1400px) {
    #header .inner{justify-content: space-between;}
    #header .hamberg {width: 24px; height: 24px; font-size: 0; display: flex; align-items: center; cursor: pointer; position: relative; z-index: 2;}
    #header .hamberg span {width: 100%; height: 2px; background: #000; display: block; position: relative; transition: all .3s;}
    #header .hamberg span::before,
    #header .hamberg span::after {display: block; content: ""; width: 100%; height: 2px; background: #000; position: absolute; transition: all .3s;}
    #header .hamberg span::before {top: -8px;}
    #header .hamberg span::after {top: 8px;}
    #header .hamberg span.on {background: rgba(255,255,255,0);}
    #header .hamberg span.on::before {top: 0; transform: rotate(-45deg);}
    #header .hamberg span.on::after {top: 0; transform: rotate(45deg);}

    /* #header .nav_wrap {
        position: fixed; top: 0; left: -100%; background: rgba(0,0,0,.95); width: 100%; height: 100vh;
        transition: all .3s; z-index: 1;
    }
    #header .nav_wrap.on {left: 0; flex-direction: column;justify-content: center;} */

    #header .utils{gap: 8px;}
    #header .utils .search_btn{display: none;}
    #header .submenu {position: unset; transform: unset; width: 100%; border: 0; background: #222; padding: 20px;}
    #header .submenu > div {gap: 15px;}
    #header .submenu > div > a {font-size: 0.9125em;}
    .utils_item {display: none;}
    .hamberg_wrap{display: flex; align-items: center; gap: 10px;}
    .utils_item.has_dropdown:has(.conven_btn) {display: block;}
    .conven_btn img{margin-bottom: 1px;}
    .utils_item.open .dropdown{z-index: 999;}
    #header .conven_btn{min-width: inherit;padding: 0;gap: 0; font-size: 0; border: none;}
    #header .conven_btn:focus{outline: none;}
    #header .conven_btn::after{display: none;}
        
    #header .hamberg span.on::before, #header .hamberg span.on::after{ background: #fff;}
    .accessibility_exempt .dropdown{font-size: 13px !important;line-height: 1.3 !important;}
    .accessibility_exempt .dropdown button,
    .accessibility_exempt .dropdown span {font-size: 13px !important;line-height: 1.3 !important;}

    .hd_site_map{border-top: 1px solid #d5d5d5;}
    .hd_site_map .site_map_nav .dept1>li>a{border: 0;}
    .hd_site_map .site_map_nav .dept2>li>a.outLink::after {width: 16px; height: 16px; right: -18px;}
    .hd_site_map {top: 0;right: unset;}
    .hd_site_map .site_map_box {position: unset;transform: unset;width: 100%;}
    .hd_site_map .site_map_nav .dept1 {display: block;padding: 20px 40px;padding-bottom: 0; margin-top: 100px;}
    .hd_site_map .site_map_nav .dept1>li {width: 100%;padding-bottom: 10px;cursor: pointer;}
    .hd_site_map .site_map_nav .dept1>li>a {font-size: 1.5em;padding-bottom: 10px;pointer-events: none;}
    .hd_site_map .site_map_nav .dept2 {padding: 20px 5px;display: none;border-top: 2px solid var(--mainColor);}
    .hd_site_map .site_map_nav .dept2>li {padding: 10px 0;}
    .hd_site_map .site_map_nav .dept2>li>a {font-size: 1em;line-height:1.2em;}
    .site_map_top {margin: 0 40px;padding: 40px 0;border-bottom: 1px solid #ededed;display: block;}
    .site_map_top_btn {font-size: 1rem;}
    .site_map_top_btn a:after {display: inline-block;content: "｜";vertical-align: middle;margin: 0 3px 2px;}
    .site_map_top_btn a:last-child::after {display: none;}

    .hd_site_map .site_map_nav .dept1>li{width: 100% !important;}
    .hd_site_map .site_map_new.dept1{padding-top: 0;}
    .hd_site_map .site_map_nav .link_dept1{display: block;padding: 0 40px 20px 40px;}

    .hd_site_map .site_map_nav .site_map_new li {width: 100% !important; padding-bottom: 10px;}
    .hd_site_map .site_map_nav{gap: 0;}

    .site_map_top_link{display: flex; align-items: center;margin-top: 20px;border-radius: 10px;overflow: hidden;}
    .site_map_top_link a{background: #EEEEEE; padding: 15px 45px; width: 100%;text-align: center;border-right: 1px solid #fff;}
    .site_map_top_link a:last-child{border: none;}

    .donate_btn{background: #fff; color: #000; display: none;}
    .profile_btn img{background: #fff; border-radius: 50px;}
    .has-sub.open .sub_menu{display: block;width: 80%; margin: 0 auto; text-align: center;}

    #footer .tbox .ft_logo img{max-width: 200px;}
    #footer .menu li{font-size: 0.875em;}
}

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

    /* sub */
    #header .menu > li > a{font-size: 1rem;}
    #header .menu > .has-sub > a::after{display: none;}

    #footer .nav{flex-direction: column; justify-content: center;}
    #footer .menu{justify-content: center;}
    #footer .tbox{flex-direction: column;gap:20px; align-items: center;}

    #footer .right .f_sns{justify-content: center;margin-bottom: 10px;}
    
}

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

    /* padding */
    .p_tb {padding: 60px 0;}
    .p_t {padding-top: 60px;}
    .p_b {padding-bottom: 60px;}

    /* table */
    .tb_box {overflow-x: auto;}
    .tb_box table {width: 100%; max-width: max-content;}
    .tb_box th, .tb_box td {font-size: 0.875em; padding: 10px;}



    /* header */
    #header .inner {gap: 20px;flex-direction: row;}
    #header .logo{position: absolute;left: 50%; transform: translateX(-50%);z-index: 999;}
    /* #header .lang {margin-left: auto;} */
    #header .logo img {height: 50px;}
    #header .utils{display: block;}

    #header .logo.logo_b_on .logo_b{display: block;}
    #header .logo.logo_b_on .logo_w{display: none;}

    #header .menu {display: none; gap: 10px; width: 100%; justify-content: center; height: auto; flex-direction: column; color: #fff;}
    #header .menu > li {height: auto; width: 100%;}
    #header .menu > li::after {display: none;}
    #header .menu > li > a {height: auto; height: 50px; color: #fff; font-size: 1.125em; padding: 0 20px;}
    #header .menu > li > a::after {display: none;}
    
    
    /* #header .langmenu{background: #2d2d2d;}
	#header .lang {position: absolute; z-index: 1; left: 20px; display: none; top: 20px;}
	#header .lang > a{color:#fff}
	#header .lang > a::after{border-top: 1px solid #fff;
    border-right: 1px solid #fff;}
	#header .lang.on {display: block;} */

    #footer .menu{flex-direction: column; align-items: center; gap: 5px;}
    #footer .menu li{ font-size: 0.875em; text-align: center; margin-right: 0; padding-right: 0;}
    #footer .menu li::after{display: none;}
    .menu_wrap{display: grid; gap: 5px;}

    .pc_only{display: none;}
    .mo_only{display: block;}
}

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

    .mo_only{display: block;}

    /* footer */
    #footer{padding: 40px 0;}
    #footer .menu {align-items: center; gap: 10px;}
    #footer .menu li{margin-right: 0;padding-right: 0;}
    
    /* hedaer */    
    #header .inner {gap: 10px;}
    #header .nav_wrap {width: 100%;}
    #header .inner .login{margin-left: auto;}

    .site_map_top{margin: 0 20px;padding: 40px 0 20px;}
    .site_map_top_link a{font-size: 0.875em;}
    .hd_site_map .site_map_nav .dept1{padding: 20px;}
    .hd_site_map .site_map_nav .dept1>li>a{font-size: 1.25em;}
    .hd_site_map .site_map_nav .dept2{padding: 10px 5px;}
    .hd_site_map .site_map_nav .dept2>li{padding: 6px 0;}

    .sec_tit .big {font-size: 1.75em;}
    .sec_tit .small {font-size: 1em; margin-top: 10px;}

    .select select{font-size: 0.875em;}
    #footer .right .f_privacy a{font-size: 0.875em;}


}