/*접근성*/
#accessibility {position: absolute;top: -1px;left: 0;background-color: #333;z-index: 999999;}
#accessibility li a {position: fixed;display: block;width: 100%;height: 50px;top: -50px;left: 0;line-height: 50px;color: #fff;font-weight: bold;background-color: #223573 ;text-align: center;z-index: 999;}
#accessibility li a:focus {top: 0;}
:focus {outline: 2px solid #000;}
:focus:not(:focus-visible) {outline: 0;}
#ctn01 .visual .swiper-slide a:focus{outline:none;}

.swiper-slide a {
    position: relative; /* 부모 요소를 기준으로 자식 요소를 배치하기 위해 relative 설정 */
    display: block;
}
.swiper-slide a:focus {outline:0;}
.swiper-slide a:focus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid black; /* 검정 테두리 */
    box-sizing: border-box; /* 테두리를 요소 내부에 맞추기 위해 box-sizing 사용 */
    pointer-events: none; /* 포커스 이벤트가 방해되지 않도록 */
}

.toggle-switch:focus-within {
    outline: 2px solid #000;
}



/*공용*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
.hidden {
    position: absolute;
    top: -99999px;
    left: -99999px;
    line-height: 0;
}
#wrap{overflow:hidden;}
.white{display:block;}
.dark{display:none !important;}
img.white{display:inline-block ;}

@media (max-width:1030px) {
    html {
        font-size: 16px;
    }

    body {
        font-size: 1rem
    }

    #wrap {
        font-size: 1rem;
    }

    .tablet {
        display: block;
    }
}
@media (max-width:767px) {
    html, body, #wrap {
        height: auto;
    }

    html {
        font-size: 15px;
    }

    body {
        font-size: 1rem;
        position: relative;
    }

    .web {
        display: none;
    }

    .mob {
        display: block;
    }
}
/*헤더*/
#header{position:relative;z-index:1;}
#header.hover{z-index:999;}
#header .header-top{height:3.75rem;border-bottom:1px solid #ccc;background:#fff;}
#header .header-top .header-inn{width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:100%;position:relative;}
#header .header-top .header-inn h1 img{height:3rem;}
.header-info{display:flex;}
#header .header-top .header-inn .header-info ul.member-list{display:flex;padding-right:4.25rem;}
#header .header-top .header-inn .header-info ul.member-list li a{font-size:0.9rem;font-weight:600;position:relative;padding-left:2.5rem;}
#header .header-top .header-inn .header-info ul.member-list li a:before{content:'';display:block;position:absolute;width:2rem;height:2rem;border-radius:0.5rem;background:#f6f6f6 url(/images/common/default/main/login-icon.svg)no-repeat center center;background-size:1rem;left:0;top:50%;transform:translateY(-50%);}
#header .header-top .header-inn .header-info ul.member-list li:not(:last-child){margin-right:1.5rem;}
#header .header-top .header-inn .header-info ul.member-list li a.signup:before{background:#f6f6f6 url(/images/common/default/main/signup-icon.svg)no-repeat center center;background-size:1rem;}
#header .header-top .header-inn .header-info ul.member-list li a:hover:before{background:#e25b01 url(/images/common/default/main/login-icon-hover.svg)no-repeat center center;background-size:1rem;}
#header .header-top .header-inn .header-info ul.member-list li a:hover em{color:#e25b01;border-bottom:1px solid #e25b01;}
#header .header-top .header-inn .header-info ul.member-list li a.signup:hover:before{background:#e25b01 url(/images/common/default/main/signup-icon-hover.svg)no-repeat center center;background-size:1rem;}
#header .header-nav {position:relative;background:#fff;border-bottom:1px solid #ccc;width:100%;}
#header .main_menu > ul{width:calc(100% - 6.5rem);display:flex;}
#header .main_menu > ul > li {width:calc(100% / 6);position:relative;}
#header .main_menu > ul > li > div{height:4rem;position:relative;}
#header .main_menu > ul > li > div:before{content: '';display: block;position: absolute;left: 0;bottom: 0;  width: 0;height: 3px;background-color: #e25b01;transition: width ease-out .2s;}
#header .main_menu > ul > li > div:hover:before{width:100%;}
#header .main_menu > ul > li > div:hover a{color:#e25b01}
#header .main_menu > ul > li > div.on a{color:#e25b01}
#header .main_menu > ul > li > div.on:before{width:100%;}


#header .main_menu > ul > li > div a {font-size:1.2rem;font-weight:700;width:100%;height:100%;display:block;text-align:center;line-height:4rem;}
#header .main_menu > ul > li > ul{display:none;position:absolute;width:100%;}
#header .main_menu > ul > li > ul {padding:1.5rem 0 2.5rem 0;}
#header .main_menu > ul > li > ul li{text-align:center;}
#header .main_menu > ul > li > ul li:not(:last-child){margin-bottom:0.75rem;}
#header .main_menu > ul > li > ul li a{font-size:0.95rem;font-weight:500;position:relative;}
#header .main_menu > ul > li > ul li a:before{content: '';display: block;position: absolute;left: 0;bottom: -5px;  width: 0;height: 1px;background-color: #e25b01;transition: width ease-out .2s;}
#header .main_menu > ul > li > ul li a:hover:before{width:100%;}
#header .main_menu > ul > li > ul li a:hover{color:#e25b01}
#header .main_menu > ul > li > ul li a.on{color:#e25b01}
#header .main_menu > ul > li > ul li a.on:before{width:100%;}
#header .header-nav .header-inn{width:1600px;margin:0 auto;position:relative;}


#header .main_menu > ul > li > ul li:nth-child(8) {display:none;}

@media (max-width:1600px){
    #header .main_menu .header-inn {width:100%;padding:0 1rem;}
    #header .header-top .header-inn{width:100%;padding:0 1rem;}
    #header .header-nav .header-inn{width:100%;padding:0 1rem;}
    #header .main_menu > ul{width:calc(100% - 3rem);}

}
@media (max-width:1250px) {
    #header .main_menu > ul > li > div a {font-size:1.1rem;}
    #header .main_menu > ul > li > ul li a{font-size:0.9rem;}
}
@media (max-width:1030px) {
    #header .header-top{border-bottom:none;}
    #header .main_menu{border-bottom:none;}
    #header .main_menu > ul {display:none;}
    #header .header-nav .header-inn{position:static;}
    #header .header-nav{position:static;}
    #header .main_menu{position:static;}
    #header .header-top .header-inn .header-info{padding-right:3.3rem;display:none;}
    #header .header-top .header-inn .header-info{}

}
@media (max-width:767px) {
    #header .header-top .header-inn h1 img{height:2.5rem;}
}
/*헤더 호버 했을때*/
#header.hover .header-nav {}
#header.hover  .header-nav #nav ul.depth02{}
.gnb_bg{display: none;opacity: 0;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);transition: all 0.3s ease-out;}
.header-bg {display: none;opacity: 0;position: absolute;top: 4rem;left: 0;z-index: -1;width: 100%;height: 19rem;background:#fff;transition: all 0.3s ease-out;}


/*사이트맵 버튼*/

#header .header-nav .header-inn .btn-gnb-menu{position:absolute;width:2.3rem;height:2.2rem;background:url(/images/common/default/main/site-btn.png)no-repeat center center;background-size:cover;right:0;top:1rem;cursor:pointer;z-index:9999;}
#header.open .header-nav .header-inn .btn-gnb-menu{background:url(/images/common/default/main/site-btn-on.png)no-repeat center center;background-size:cover;width:1.8rem;height:1.8rem;}
#header .header-nav .header-inn .btn-gnb-menu .btnAll{display:inline-block;width:100%;height:100%;text-indent: -9999px;}

@media (max-width:1600px){

    #header .header-nav .header-inn .btn-gnb-menu{right:1rem;}
}
@media (max-width:767px) {
    #header .header-nav .header-inn .btn-gnb-menu {width:1.5rem;height:1.45rem;top:1.2rem;}
}

/*사이트맵*/
#menuAll{background:#fff;position:fixed;top:3.75rem;left:100%;width:100%;z-index:20;height:calc(100% - 3.75rem);padding:2.5rem 0;    transition: left 0.5s;overflow-y: scroll;}
#menuAll > ul {width:1600px;margin:0 auto;position:relative;z-index:1;}
#menuAll:after{content:'';display:block;position:absolute;width:13rem;height:13.5rem;background:url(/images/common/default/main/site-bg.png)no-repeat center center;background-size:cover;right:0;bottom:-2.5rem;z-index:-1;}
#header.open #menuAll{left:0;transition: left 0.5s;}

/*사이트맵 1차메뉴*/

#menuAll > ul > li {display:flex;padding:1.5rem 0;}
#menuAll > ul > li:first-child{padding-top:0;}
#menuAll > ul > li:last-child{padding-bottom:0;}
#menuAll > ul > li:not(:last-child){border-bottom:1px solid #cccccc;}
#menuAll > ul > li > div{width:12.5rem;font-size:1.5rem;font-weight:600;}
#menuAll > ul > li > div.on{color:#e25b01}
#menuAll > ul > li > ul{width:calc(100% - 12.5rem);}

#menuAll > ul > li.on > div > a{color:#e25b01}

/*사이트맵 2차메뉴*/
#menuAll > ul > li > ul {display:flex;}
#menuAll > ul > li > ul > li > a{font-size:1rem;font-weight:500;line-height:1.5rem;position:relative;padding-left:0.75rem;}
#menuAll > ul > li > ul > li > a:before{content:'';display:block;position:absolute;width:5px;height:5px;background:#ccc;left:0;top:0.5rem;border-radius:50%;}
#menuAll > ul > li > ul > li:not(:last-child){margin-right:5rem;}
#menuAll > ul > li > ul > li > a:hover{color:#e25b01;font-weight:700;}
#menuAll > ul > li > ul > li > a:hover:before{background:#e25b01}
#menuAll > ul > li > ul > li > a.on{color:#e25b01;font-weight:700;}
#menuAll > ul > li > ul > li > a.on:before{background:#e25b01}
#menuAll > ul > li > ul > li:nth-child(7){margin-right:0 !important;}
#menuAll > ul > li > ul > li:nth-child(8){display:none;}

#menuAll > ul > li > ul > li.on > a{color:#e25b01;font-weight:700;}


/*사이트맵 3차메뉴*/
#menuAll > ul > li > ul > li > ul{margin-top:1rem;}
#menuAll > ul > li > ul > li > ul > li{color:#666;font-size:0.9rem;position:relative;padding-left:1.25rem;}
#menuAll > ul > li > ul > li > ul > li:before{content:'';display:block;position:absolute;width:6px;height:1px;background:#666;left:0.75rem;top:0.5rem;}
#menuAll > ul > li > ul > li > ul > li:before:hover{background:#333;}
#menuAll > ul > li > ul > li > ul > li:not(:last-child){margin-bottom:0.75rem;}
#menuAll > ul > li > ul > li > ul > li a{position:relative;color:#666;}
#menuAll > ul > li > ul > li > ul > li a:hover{color:#333;font-weight:700;}
#menuAll > ul > li > ul > li > ul > li a:before{content:'';display:block;position:absolute;width:0;height:2px;bottom:-5px;background:#797979;transition: width ease-out .2s;}
#menuAll > ul > li > ul > li > ul > li a:hover:before{width:100%;}
#menuAll > ul > li > ul > li > ul > li a.on:hover{color:#333;font-weight:700;}
#menuAll > ul > li > ul > li > ul > li a.on:before{width:100%;}

.mob-header-info{display:none;}
@media (max-width:1600px) {
    #menuAll > ul  {width:100%;padding:0 1rem;}
    #menuAll > ul > li > ul > li:not(:last-child){margin-right:2rem;}
}
@media (max-width:1250px) {
    #menuAll > ul > li > div{font-size:1.3rem;width:9rem;}
    #menuAll > ul > li > ul{width: calc(100% - 9rem);}
    #menuAll > ul > li > div > ul > li > ul{flex-wrap:wrap;margin:-0.5rem;}
    #menuAll > ul > li > div > ul > li > ul > li{width:calc(100% / 3 - 1rem);margin:0.5rem;}
    #menuAll > ul > li > div > ul > li > ul > li:not(:last-child){margin-right:0.5rem;}
    #menuAll > ul > li > div > ul > li > ul > li a{line-height:1.2;}
    #menuAll > ul > li > ul > li:not(:last-child){margin-right:1rem;}

}

@media (max-width:1030px) {
    #menuAll{width:100%;    background: rgba(0, 0, 0, 0.5);padding:0;top:0;height:100%;}
    #menuAll > ul {width: 60%;margin: inherit;position: fixed;overflow-y: scroll;height: 100vh;background:#ea6a1c;}
    #menuAll > ul > li > div > ul{display:block;margin:0;}
    #menuAll > ul > li > ul > li{width:100%;margin:0;border-bottom:1px solid #ddd;}
    #menuAll > ul > li > ul > li:not(:last-child){border-bottom:1px solid #ddd;}
    #menuAll > ul > li > ul > li > a{display:block;width:100%;height:100%;padding:1rem 0;font-size:1.1rem;}
    #menuAll > ul > li > ul > li > a:before{display:none;}
    #menuAll > ul > li{padding:0;}
    #menuAll > ul > li > div{color:#fff;width:10rem;padding:1.5rem 1rem;font-size:1.2rem;}
    #menuAll > ul > li > div a {color:#fff;}
    #menuAll > ul > li.on > div {background:#fff;color:#ea6a1c;}
    #menuAll > ul > li.on > div a {color:#ea6a1c}
    #menuAll > ul > li > ul{background:#fff;position:absolute;right:0;width:calc(100% - 10rem);display:none;}
    #menuAll > ul > li.on > ul {display:block;}
    #menuAll > ul > li.on > ul {display:block;min-height:100%;height:auto;padding:1rem;top:3.75rem;}
    #menuAll > ul > li > ul > li > ul{display:none;background:#F7F7F7;margin-top:0;padding:1rem 0;border-top:1px solid #ddd;}
    #menuAll > ul > li > ul > li.on > ul{display:block;}
    #menuAll > ul > li > ul > li.on:focus > ul {display:block;}
    #menuAll > ul > li > ul > li:not(:last-child){margin-right:0;}
    #menuAll > ul > li:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.2);}


    #header.open #menuAll{right:0;    transition: right 0.5s;left:auto;}
    #header.open #menuAll > ul{right:0;padding:3.75rem 0 2rem 0;height:100vh !important;}
    #header.open #menuAll > ul:before{content:'';display:block;width: calc(60% - 17px);position:fixed;top:0;height:3.75rem;background:#fff;z-index:1;left:40%;}
    #menuAll #all-nav:after{display:none;}

    #header.open .mob-header-info{display:block;width: calc(60% - 17px);position:fixed;top:0;height:3.75rem;background:#fff;left:40%;z-index:10;padding-left:1rem;border-bottom:1px solid #ddd;}
    .mob-header-info ul.member-list{display:flex;padding-right:4.25rem;}
    .mob-header-info ul.member-list li a{font-size:0.9rem;font-weight:600;position:relative;padding-left:2.5rem;        line-height: 3.75rem;}
    .mob-header-info ul.member-list li a:before{content:'';display:block;position:absolute;width:2rem;height:2rem;border-radius:0.5rem;background:#f6f6f6 url(/images/common/default/main/login-icon.svg)no-repeat center center;background-size:1rem;left:0;top:50%;transform:translateY(-50%);}
    .mob-header-info ul.member-list li:not(:last-child){margin-right:1.5rem;}
    .mob-header-info ul.member-list li a.signup:before{background:#f6f6f6 url(/images/common/default/main/signup-icon.svg)no-repeat center center;background-size:1rem;}
    .mob-header-info ul.member-list li a:hover:before{background:#e25b01 url(/images/common/default/main/login-icon-hover.svg)no-repeat center center;background-size:1rem;}
    .mob-header-info ul.member-list li a:hover em{color:#e25b01;border-bottom:1px solid #e25b01;}
    .mob-header-info ul.member-list li a.signup:hover:before{background:#e25b01 url(/images/common/default/main/signup-icon-hover.svg)no-repeat center center;background-size:1rem;}

}
@media (max-width:767px) {
    #header.open .mob-header-info{left:10%;width:90%;}
    #menuAll > ul {width:90%;}
}
@media (max-width:500px) {
    #menuAll > ul > li > div{width:8.25rem;font-size:1.1rem;padding:1.5rem 0.5rem;}
    #menuAll > ul > li > div{width:calc(100% - 8.25rem);}
    #menuAll > ul > li.on > div > ul > li.anv02 > ul{padding-right:0.5rem;}

    #header.open .mob-header-info{width:100%;left:0;}
    #menuAll > ul {width:100%;}

}

/* 다크모드설정 버튼 */
:root {
    --background-color-light: #333333;
    --text-color-light: #000000;
    --toggle-border-light: #333333;
    --toggle-ball-light: #333333;

    --background-color-dark: #333333;
    --text-color-dark: #FFFFFF;
    --toggle-border-dark: #333333;
    --toggle-ball-dark: #333333;

    --font-size-base: 32px; /* 기본 텍스트 크기 */
    --font-size-large: 52px; /* 제목 등 큰 텍스트용 폰트 크기 */
}

.light-mode {--background-color: var(--background-color-dark);--text-color: var(--text-color-dark);}
.toggle-switch {position: absolute;height:1.5rem;display: inline-block;width: 3em;right:0;top: 50%;transform: translateY(-50%);}
.toggle-switch .checkbox {opacity: 0;width: 0;height: 0;}
.toggle-switch .label {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;border:solid 1px var(--toggle-border-light);transition: background-color 0.4s;border-radius: 52px; /* 둥근 모서리 반경 조정 */}
.toggle-switch .label:before {position: absolute;content: "";height: 1.1rem; /* 내부 원 높이 조정 */width: 1.1rem; /* 내부 원 너비 조정 */right: 0.25rem;bottom: 0.15rem;background-color: var(--toggle-ball-light);transition: transform 0.4s;border-radius: 50%;}
.toggle-switch input:checked + .label {border:solid 1px var(--toggle-border-dark);}

.content {text-align: center;transition: color 0.3s;}



/* Optional: Font Awesome Icons */
.btn-sun, .btn-moon {position: absolute;top: 50%;transform: translateY(-50%);transition: color 0.3s, opacity 0.3s;}
/* 아이콘 크기 조정을 위한 클래스 추가 (선택적) */
.btn-sun {right: 0.4rem; /* 위치 조정 */opacity: 0; /* 기본 가시성 */width:0.75rem;}
.btn-moon {left: 0.5rem; /* 위치 조정 */opacity: 0; /* 기본 가시성 */width:0.6rem;}
.toggle-switch input:checked ~ .btn-sun {opacity: 1; /* 다크 모드에서 해 아이콘 숨김 */}
.toggle-switch input:checked ~ .btn-moon {opacity: 0; /* 다크 모드에서 달 아이콘 표시 */}

.btn-sun {opacity:1;}
.btn-moon{opacity:0;}

@media (max-width:1600px){
    .toggle-switch{right:1rem;}

}
@media (max-width:1030px){
    .toggle-switch{right:4.3rem;}

}

/*푸터*/
#footer{background:#272a2e;color:#fff;position:relative;z-index:0;}
#footer .footer-inn {width:1600px;margin:0 auto;}

#footer .footer-inn .footer-info {display:flex;padding:1.5rem 0;font-size:0.8rem;border-bottom:1px solid #ccc;}
#footer .footer-inn .footer-info li {padding:0 1rem;position:relative;}
#footer .footer-inn .footer-info li:not(:last-child):after{content:'';display:block;position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;right:0;top:50%;transform:translate(50%,-50%);}
#footer .footer-inn .footer-info li:first-child{padding-left:0;}
#footer .footer-inn .footer-info li:last-child{padding-right:0;}
#footer a{color:#fff}
#footer a.on{color:#ff7d12;font-weight:700;}
#footer .footer-bottom {padding:1.5rem 0 3rem 0;display:flex;}
#footer .footer-bottom .footer-txt{margin-left:2.25rem;}
#footer .footer-bottom h1 a img{height:2.8rem;}
#footer .footer-bottom h1 a{display:block;}
#footer .footer-bottom .footer-txt ul{    margin-top: 0.75rem;}
#footer .footer-bottom .footer-txt ul li{display:flex;font-size:0.9rem;}
#footer .footer-bottom .footer-txt ul li:not(:last-child){margin-bottom:0.75rem;}
#footer .footer-bottom .footer-txt ul li div{display:flex;}
#footer .footer-bottom .footer-txt ul li div:not(:last-child){margin-right:1.75rem;}
#footer .footer-bottom .footer-txt ul li div span {color:#bebebe;font-weight:700;margin-right:0.5rem;}
#footer .footer-bottom .footer-txt ul li:last-child div p{color:#bebebe;}
#footer .footer-bottom .footer-txt p.copy{color:#999;font-size:0.8rem;margin-top:2.25rem;line-height:1.3;}


@media (max-width:1600px){
    #footer .footer-inn{width:100%;padding:0 1rem;}

}
@media (max-width:1030px){
    #footer .footer-bottom{display:block;}
    #footer .footer-bottom .footer-txt{margin-left:0;margin-top:1.5rem;}

}
@media (max-width:767px) {

    #footer .footer-bottom h1 a img {height:2.5rem;}
}
@media (max-width:500px){
    #footer .footer-bottom .footer-txt ul li div{display:block;}
    #footer .footer-bottom .footer-txt ul li div span{margin-right:0;margin-bottom:0.5rem;display:block;}

}



.btn-btn{position:fixed;right:1rem;bottom:1rem;}
.btn-btn a{width:4rem;height:4rem;background:url(/images/common/default/main/top-btn.png)no-repeat center center;background-size:cover;display:block;}