@charset "utf-8";


.header { position: fixed; left: 0; top: 0; width: 100%; font-size: var(--p3); z-index: 100; padding: 3rem; padding-bottom: 0; height: var(--hdH); transition: 0.3s ease-in-out }
.header .header_in { position: relative; display: flex; align-items: center; gap: 0; width: 100%; max-width: 100%; height: calc(var(--hdH) - 3rem); padding: 0 var(--hdIn); background-color: #fff; border-radius:2rem; align-items: center; z-index: 3;
}

.header .logo {position: relative; display: flex; align-items: center; width: 22.7rem; }
.header .logo img.logo_mono,
.header .logo img.logo_color { display: block; width: auto; height: auto; height: 100%; }
.header .logo img.logo_mono{position: absolute; inset: 0; width: 100%; height: auto; display: none;}

.header .logo svg{ display: block; width: 100%; height: auto; overflow: visible;}
/* .header.header_down {background-color:#fff; color: #1c1c1c; box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);} */

.header.down {transform: translateY(-100%)}
.header.down .nav .list .depth1 .depth2 {opacity: 0 !important; pointer-events: none;}


.header .util_wrap { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; height: 100%; position: relative; height: 100%; }
.header .util_wrap .link_box {}
.header .util_wrap .link_box a {display: flex; align-items: center;justify-content: center; font-size: var(--p3); 
    padding: 0.7em 1.1em; gap: 0.5em; line-height: normal; border-radius: 10em; background-color: #fff; border: 1.5px solid var(--black); font-weight: 700; transition: 0.3s ease;}
.header .util_wrap .link_box a svg{display: block; width: auto; height: 1.1em; transform: rotate(90deg);}
.header .util_wrap .link_box a:hover{background-color: var(--black); color: #fff;}



.header nav {position: absolute; left: 50%; top: 0; height: 100%; transform: translate(-50%,0%); z-index: 1; display: none;}
.header nav .list {display: flex; align-items: center; height: 100%;}
.header nav .depth1 { height: 100%;}
.header nav .list .depth1 { position: relative; height: 100%; display: flex; align-items: center; font-size: var(--p2); transition: color 0.3s ease-in-out;}
.header nav .list .depth1 > a {display: flex; align-items: center; justify-content: center ;position: relative; padding: 0 3em; width: 100%; height: 100%;  font-weight: 500; white-space: nowrap ;transition: padding .3s}
.header nav .list .depth1.active > a {color: var(--point01);}
.header nav .list .depth1 > a:before {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background-color: rgba(255,255,255,0.5); transition: width 0.3s ease-out}
.header nav .list .depth1 > a > span {position: relative;}
.header nav .list .depth1 > a > span::before {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0%; height: 1px; background-color: #000; transition: width 0.3s ease-out}
.header nav .depth1 {text-align: center;}



/* 
.header nav .list .depth1 .depth2 {position: absolute;left: 50%;bottom: -2px;transform: translate(-50%,100%);min-width: 22rem;box-shadow: 0 6px 10px rgba(0, 0, 0, 0.025), 6px 0 10px rgba(0, 0, 0, 0.025), -6px 0 10px rgba(0, 0, 0, 0.025);white-space: nowrap;opacity: 0;pointer-events: none;text-align: center;color: #000;transition: 0.3s ease-in-out;}
.header nav .list .depth1 .depth2 > li + li {margin-top: 1.1em}
.header nav .list .depth1 .depth2 > li > a {
    font-size: var(--p4);
    font-weight: 500;
    padding: 0 1em;
    display: block;
    background-color: #fff;
    height: 3.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: -1px;
    color: #000;
}
.header nav .depth1 .depth2 > li > a span {position: relative}
.header nav .depth1 .depth2 > li > a span:before {content: ""; position: absolute; left: -1.5rem; top: 0.5rem; transform: translate(100%,0%); width:0.4rem; height: 0.4rem; border-radius: 50%; background-color: #fff; opacity: 0; transition: opacity 0.3s ease-out , left 0.3s ease-out}
.header nav .depth1 .depth2 > li.out_link > a span:after {content: ""; position: absolute; right: -10px; top: 50%; transform: translate(100%,-50%) ;display: block; width:0.8em; height: 0.8em; transition: 0.3s ease-in-out ;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23" viewBox="0 0 512 512"><path d="M304 24c0 13.3 10.7 24 24 24l102.1 0L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223L464 184c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24L328 0c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104L0 440c0 39.8 32.2 72 72 72l336 0c39.8 0 72-32.2 72-72l0-128c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 128c0 13.3-10.7 24-24 24L72 464c-13.3 0-24-10.7-24-24l0-336c0-13.3 10.7-24 24-24l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L72 32z"/></svg>') no-repeat center / contain;}


.header nav .depth1 .depth3 {margin-top: 0.25em;}
.header nav .depth1 .depth3 > li {}
.header nav .depth1 .depth3 > li > a {font-size: 0.8em; opacity: 0.7; transition: opacity 0.3s ease-out}
.header nav .depth1 .depth3 > li > a:hover {opacity: 1;}
.header nav .depth1 .depth3 > li.active > a {opacity: 1}
.header nav .depth1 .depth3 > li + li {margin-top: 5px}
.header nav .depth1 .depth2 > li > a:hover span:before { opacity: 1; right: -1rem}
.header nav .depth1 .depth2 > li.active > a > span:before {opacity: 1; right: -1rem}

.header nav .list .depth1.active > a:before {opacity: 1} */



/* 

.header.on {background-color: #fff; color: #000;}
.header.on nav .list .depth1 > a{padding: 0 4em}
.header.on nav .list .depth1 .depth2 {opacity: 1;;pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s}
.header.on nav .depth1 a svg {fill: #fff}
.header.on .logo svg path{fill: #fff !important;}
.header.on .right_wrap .btn svg {fill: #fff !important;}

.header.on nav .list .depth1:hover {color: var(--point01);}
.header.on nav .list .depth1:hover > a:before {width: 100%;}

.header.on nav .list > .depth1.on > a {color: #fff;}
.header.on nav .depth1.on .depth2 > li.out_link > a > span:after {background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 512 512"><path d="M304 24c0 13.3 10.7 24 24 24l102.1 0L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223L464 184c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24L328 0c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104L0 440c0 39.8 32.2 72 72 72l336 0c39.8 0 72-32.2 72-72l0-128c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 128c0 13.3-10.7 24-24 24L72 464c-13.3 0-24-10.7-24-24l0-336c0-13.3 10.7-24 24-24l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L72 32z"/></svg>') no-repeat center / contain;} */


/* ---------- site map ---------- */
.site_map { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #1EAC4B;  z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
.site_map.active { opacity: 1; pointer-events: visible; }

.site_map .top {display: flex; align-items: center; width: max(164rem, 1240px); padding: 0 6rem 5rem; max-width: 100%;}
.site_map .top .logo {width: 40rem; }
.site_map .top .logo a {display: flex; align-items: center;  }
.site_map .top .link_btn {display: flex; align-items: center; gap: 1rem; font-weight: 700; margin-left: auto; font-size: var(--p4); color: #fff; padding: 1em 1.8em; border-radius: 10em; background-color: #000;}
.site_map .top .link_btn svg {width: 1em; height: auto; margin-left: 1em; ;}
.site_map .top .close_btn {width: var(--h5); height: var(--h5); transition: 0.3s ease-in-out; margin-left: 5rem;}
.site_map .top .close_btn svg {width: 100%; height: auto;}

.site_map .list { display: flex; align-items: flex-start; justify-content: space-between; color: #fff; padding: 0 6rem;}
.site_map .cont {border-top: 1px solid rgba(255,255,255,0.4); width: 100%;}
.site_map .cont .list {width: max(164rem, 1240px); margin: 10rem auto 0; max-width: 100%;}
.site_map .cont .list > .depth1 > a { position: relative; margin-bottom: 1.6em; font-size: var(--h5); font-weight: 700; }
.site_map .cont .list > .depth1 > a:before { content: ''; position: absolute; left: 0; top: -0.6em; width: 0.4em; height: 0.4em; border-radius: 100%; background-color: var(--blue3); transform: translateY(-300%); opacity: 0; transition: opacity 0.5s, transform 0.5s; }
.site_map .cont .box.active .depth1:before { transform: translateY(0); opacity: 1; }
.site_map .cont .depth2 { margin-top: 5rem;  }
.site_map .cont .depth2 > li {  transition: color 0.6s; font-size: var(--h8);}
.site_map .cont .depth2 > li + li {margin-top: 0.9em;}
.site_map .cont .depth2 > li > a { position: relative; display: inline-block;}
.site_map .cont .depth2 > li > a::before { content: ""; position: absolute; right: -0.5em; top: 50%; transform: translate(100%, -50%);display: block; width: 0.35em; height: 0.35em; border-radius: 50%; background-color: #fff; opacity: 0;}
.site_map .cont .depth2 > li > a span { position: relative; }
.site_map .cont .depth2 > li > a span:before { content: ''; position: absolute; left: 0; bottom: -0.2em; width: 0; border-bottom: 1px solid #fff; transition: width 0.6s; }
.site_map .cont .list .depth3 {margin-top: 0.5em;}
.site_map .cont .list .depth3 li a {font-size: 0.85em; position: relative;  padding-left: 1em;  opacity: 0.6; transition: 0.3s ease-in-out;}
.site_map .cont .list .depth3 li + li {margin-top: 0.65em;}
.site_map .cont .list .depth3 li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.45em; height: 2px; background-color: #fff; }


 .site_map .cont .depth2 > li.out_link > a span:after {content: ""; position: absolute; right: -10px; top: 50%; transform: translate(100%,-50%) ;display: block; width:0.8em; height: 0.8em; transition: 0.3s ease-in-out ;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 512 512"><path d="M304 24c0 13.3 10.7 24 24 24l102.1 0L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223L464 184c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24L328 0c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104L0 440c0 39.8 32.2 72 72 72l336 0c39.8 0 72-32.2 72-72l0-128c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 128c0 13.3-10.7 24-24 24L72 464c-13.3 0-24-10.7-24-24l0-336c0-13.3 10.7-24 24-24l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L72 32z"/></svg>') no-repeat center / contain;}

.site_map .cont .depth2 li.active { font-weight: 700;}
.site_map .cont .depth2 li.active a:before {opacity: 1;}

.site_map .cont .depth2 > li > a:hover span:before {width: 100%;}
.site_map .cont .depth2 > li .depth3 li a:hover {opacity: 1;}

.site_map .bg_logo {position: absolute; right: 0; bottom: 0; width: 20%;}
.site_map .bg_logo svg {width: 100%; height: auto;}





@media screen and (min-width: 1241px) {
    .header .util_wrap .util_btn:not(.ico_btn):hover{ background-color: var(--black); color: #fff; border-color:var(--black);}
    .header.top .util_wrap .util_btn:not(.ico_btn):hover{ background-color: rgba(255,255,255,0.4); color: #fff; border-color:transparent;}
    .header nav .depth1 .depth2 > li > a:hover{opacity: 1;}
}


@media screen and (max-width: 1640px){
    .header nav .list .depth1 > a {padding: 0 2.5em;}
    .header.on nav .list .depth1 > a{padding: 0 3em}
    .header .util_wrap .link_btn {padding: 0.7em 1.5em; font-size: var(--p4);}
}

@media screen and (max-width: 1440px){
    .header nav {left: 48%;}
    .header nav .list .depth1 > a {padding: 0 2.3em;}
    .header.on nav .list .depth1 > a{padding: 0 2.8em}
    .header nav .depth1 .depth2 > li.out_link > a span:after {right: -5px;}
}


@media screen and (max-width: 1240px) {
    .header nav {display: none;}
    .header .logo {width: 20rem;}
    .header .util_wrap .link_box a {font-size: var(--p4); border-width: 1px;}

}


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

    .header{padding: var(--inPd); padding-bottom: 0;}
    .header .header_in{height: calc(var(--hdH) - var(--inPd));}

    .header .util_wrap .link_box a {font-size: var(--p7); }


}


@media screen and (max-width: 600px) {
    .header .header_in{border-radius: 10px;}

    .header .util_wrap .link_box a{gap: 0.3em;}
}