@charset "utf-8";
/*공통*/
:root {
    --sprite_template : url('./sprite.png') no-repeat;
}
.noScroll {overflow: hidden !important;}
.pc_nav a[target="_blank"] span,
.m_nav a[target="_blank"] span,
.sub_nav a[target="_blank"] span { display:flex; }
.pc_nav a[target="_blank"] span::after,
.m_nav a[target="_blank"] span::after,
.sub_nav a[target="_blank"] span::after { content:''; width:13px; height:13px; background:var(--sprite_template) 0 0; margin:2rem 0 0 5rem; }
.pc_nav .depth1 { display:flex; }
.pc_nav .depth1 > li > a { display:block; }
.pc_nav a[target="_blank"] span.blank,
.m_nav a[target="_blank"] span.blank,
.sub_nav a[target="_blank"] span.blank {text-indent:-9999rem;}

/*pc ver1*/
.pc_nav.ver1 .depth2 > li > a:hover[target="_blank"] span::after { background-position:-13px 0;}
.pc_nav.ver1 .depth2_wrap { visibility:hidden; position:absolute; left:0; width:100%; border-top:1px solid #eee; box-shadow:0 10rem 10rem rgba(0,0,0,0.1); z-index:20; }
.pc_nav.ver1 .depth2_wrap::before {content:''; position:absolute; left:0; width:100%; height:100%; background:#fff; }
/* .pc_nav.ver1 a.on+.depth2_wrap { visibility:visible; } */
.pc_nav.ver1 .depth2_wrap .wrap { display:flex; position:relative; background:#fff; margin:0 auto; width:96%; }
.pc_nav.ver1 dl { width:300rem; padding-right:30rem; }
.pc_nav.ver1 dl dt { font-size:40rem; font-weight:bold; margin:30rem 0 20rem; line-height:1.4; }
.pc_nav.ver1 dl dd { color:#555; margin-bottom:30rem; }
.pc_nav.ver1 .depth2 { position:relative; width:calc(100% - 300rem); }
.pc_nav.ver1 .depth2 > li { display:flex; border-bottom:1px solid rgba(0,0,0,0.1); }
.pc_nav.ver1 .depth2 > li:last-of-type {border-bottom:0;}
.pc_nav.ver1 .depth2 > li > a { width:200rem; padding:10rem 15rem; }
.pc_nav.ver1 .depth2 > li > a.on,
.pc_nav.ver1 .depth2 > li > a:hover { color:#fff; background:var(--p_color); }
.pc_nav.ver1 .depth3 { width:calc(100% - 200rem); display:flex; flex-wrap:wrap; padding:10rem 5rem; }
.pc_nav.ver1 .depth3 li {margin:2rem 10rem; }
.pc_nav.ver1 .depth3 a { position:relative; display:flex; font-size:0.95em; }
.pc_nav.ver1 .depth3 a::before { content:''; display:block; flex-shrink:0; width:4rem; height:4rem; background:#777; border-radius:50%; margin:10rem 7rem 0 0; }
.pc_nav.ver1 .depth3 a:hover,
.pc_nav.ver1 .depth3 a.on { font-weight:bold; text-decoration:underline; }
.pc_nav.ver1+.nav_bg { display:none; position:fixed; left:0; width:100%; height:100%; background:#000; opacity:0.7; z-index:10; }
/*pc ver1 option*/
.pc_nav.ver1.del_title dl {display:none;}

/*pc ver2*/
.pc_nav.ver2 .depth2_wrap { visibility:hidden; position:absolute; left:0; width:100%; border-top:1px solid #eee; box-shadow:0 10rem 10rem rgba(0,0,0,0.1); z-index:20; }
.pc_nav.ver2 .depth2_wrap::before {content:''; position:absolute; left:0; width:100%; height:100%; background:#fff; }
/* .pc_nav.ver2 a.on+.depth2_wrap { visibility:visible; } */
.pc_nav.ver2 .depth2_wrap .wrap { display:flex; position:relative; background:#fff; margin:0 auto; width:96%; }
.pc_nav.ver2 dl { flex:0 0 300rem; padding:40rem 0; }
.pc_nav.ver2 dl::before {content:''; display:block; width:110px; height:98px; background:var(--sprite_template) 0 -27px; }
.pc_nav.ver2 dl dt { font-size:40rem; font-weight:bold; margin:30rem 0 10rem;  }
.pc_nav.ver2 dl dd { color:#555; }
.pc_nav.ver2 .depth2 { display:flex; flex-wrap:wrap; flex-grow:1; align-content:flex-start; padding:10rem 0 30rem; }
.pc_nav.ver2 .depth2 > li {width:calc((100% - 60rem)/4); margin:20rem 0 0 20rem; min-height:320rem; overflow:hidden;}
.pc_nav.ver2 .depth2 > li:nth-of-type(4n+1) {margin-left:0; }
.pc_nav.ver2 .depth2 > li > a { display:flex; justify-content:space-between; padding:8rem 15rem; border-bottom:2px solid #000;}
.pc_nav.ver2 .depth2 > li > a::after {content:''; display:block; flex-shrink:0; width:7rem; height:7rem; border-bottom:2rem solid #ccc; border-right:2rem solid #ccc; transform:rotate(45deg); margin-top:4rem;}
.pc_nav.ver2 .depth2 > li > a.on,
.pc_nav.ver2 .depth2 > li > a:hover { font-weight:bold; color:var(--p_color); border-color:var(--p_color); }
.pc_nav.ver2  .depth2 > li > a.on::after,
.pc_nav.ver2  .depth2 > li > a:hover::after { border-color:var(--p_color);}
.pc_nav.ver2 .depth3 {padding:8rem 15rem 0;}
.pc_nav.ver2 .depth3 a { display:flex; margin:4rem 0; color:#333; font-size:0.95em; }
.pc_nav.ver2 .depth3 a::before {content:''; display:block; width:4rem; height:4rem; border-radius:50%; background:#d0d0d0; margin:10rem 8rem 0 0; }
.pc_nav.ver2 .depth3 a:hover { color:#333; text-decoration:underline; }
.pc_nav.ver2 .depth3 a:hover::before {background:#333; }
.pc_nav.ver2+.nav_bg { display:none; position:fixed; left:0; width:100%; height:100%; background:#000; opacity:0.7; z-index:10; }
/*pc ver2 option*/
.pc_nav.ver2.del_title dl {display:none;}
.pc_nav.ver2.del_title .depth2 > li {flex:0 0 calc((100% - 80rem)/5);}
.pc_nav.ver2.del_depth3 .depth3 {display:none;}
.pc_nav.ver2.del_depth3 .depth2 > li > a::after {transform:rotate(-45deg); margin-top:6rem;}
.pc_nav.ver2.del_icon dl::before { display:none; }
.pc_nav.ver2.del_icon dl dt { margin-top:0;}

.pc_nav.ver2 .depth2 > li.li_over {width:calc(((100% - 60rem) / 4) * 2 + 20rem);}
.pc_nav.ver2 .depth2 > li.li_over .depth3 {display:flex; flex-wrap:wrap; margin:0 -7.5rem;}
.pc_nav.ver2 .depth2 > li.li_over .depth3 > li {width:50%;}

/*pc ver3*/
.pc_nav.ver3 a.on+.depth2_wrap,
.pc_nav.ver3 a.on+.depth3 {visibility:visible;}
.pc_nav.ver3 .depth1 li {position:relative; }
.pc_nav.ver3 .depth2_wrap { visibility:hidden; position:absolute; left:0; }
.pc_nav.ver3 dl { display:none; }
.pc_nav.ver3 .depth2 { border-radius:10rem; box-shadow:1rem 1rem 3rem rgba(0,0,0,0.1); border:1px solid #ddd; }
.pc_nav.ver3 .depth2 > li > a { display:flex; align-items:center; justify-content:space-between; padding:10rem 20rem; }
.pc_nav.ver3 .depth2 > li:last-of-type > a {border-bottom:0;}
.pc_nav.ver3 .depth2 > li > a.on { color:var(--p_color); font-weight:bold; }
.pc_nav.ver3 .depth2 > li > a.more::after { content:''; display:block; width:7rem; height:7rem; background:linear-gradient(45deg, transparent 50%, #ccc 50%); transform:rotate(45deg);  }
.pc_nav.ver3 .depth2 > li > a.on.more::after { background:linear-gradient(45deg, transparent 50%, var(--p_color) 50%); }
.pc_nav.ver3 .depth3 { visibility:hidden; position:absolute; padding:15rem; margin-top:-40rem; border-radius:10rem; box-shadow:1rem 1rem 3rem rgba(0,0,0,0.1); }
.pc_nav.ver3 .depth3 a { display:flex; padding:5rem; font-size:0.95em; }
.pc_nav.ver3 .depth3 a::before {content:''; display:block; flex-shrink:0; width:4rem; height:4rem; background:#999; border-radius:50%; margin:10rem 7rem 0 0; opacity:0.5; }
.pc_nav.ver3 .depth3 a:hover { text-decoration:underline; }
.pc_nav.ver3 .depth3 a:hover::before { opacity:1; }
/*pc ver2 option*/
.pc_nav.ver3.del_depth3 .depth2 {overflow:hidden;}
.pc_nav.ver3.del_depth3 .depth3,
.pc_nav.ver3.del_depth3 .depth2 > li > a.more::after {display:none;}

/*pc ver4*/
.pc_nav.ver4 dl,
.pc_nav.ver4 .depth3 {display:none;}
.pc_nav.ver4+.nav_bg { position:absolute; left:0; top:0; width:100%; height:0; background:#fff; overflow:hidden; box-shadow:0 10rem 10rem rgba(0,0,0,0.1); z-index:-1; transition:0.3s; }
.pc_nav.ver4+.nav_bg::before {content:''; position:absolute; left:0; width:100%; height:1px; border-top:1px solid var(--b_color); }
.pc_nav.ver4 { position:relative; width:96%; margin:0 auto; }
.pc_nav.ver4 .depth2_wrap { position:absolute; height:0; border-right:1px solid var(--b_color); overflow:hidden; transition:0.3s; }
.pc_nav.ver4 li:first-of-type .depth2_wrap {border-left:1px solid var(--b_color); }
.pc_nav.ver4 .depth2 {padding:20rem;}
.pc_nav.ver4 .depth2 a {display:flex; padding:5rem 0;}
.pc_nav.ver4 .depth2 a::before {content:''; display:block; width:5rem; height:5rem; border-radius:50%; background:#999; flex-shrink:0; margin:10rem 7rem 0 0; }
.pc_nav.ver4 .depth2 a:hover { font-weight:bold; text-decoration:underline; }

/*m_nav 공통*/
.m_nav dl {display:none;}
.m_nav { display:none; position:fixed; right:0; top:0; width:100%; height:100%; z-index:20; }
.m_nav > div { position:absolute; right:-100%; top:0; width:100%; max-width:500rem; height:100%; overflow-y:auto; background:#fff; transition:all 0.85s 0.3s; }
.m_nav > div > * { margin:3%; }
.m_nav > div > *:first-of-type { margin-top:4%; }
.m_nav .site_name strong { display:block; font-size:27rem; padding-right:50rem; }
.m_nav .link_list { display:flex; flex-wrap:wrap; background:#f6f6f6; border-radius:10rem; }
.m_nav .link_list li { position:relative; flex:1 0 33.33%; text-align:center; }
.m_nav .link_list li::before {content:''; position:absolute; left:0; top:50%; width:1px; height:15rem; background:#ccc; transform:translateY(-50%);  }
.m_nav .link_list li:nth-of-type(3n+1)::before { display:none;}
.m_nav .link_list li > a { display:flex; justify-content:center; align-items:center; padding:10rem; font-size:0.95em; }
.m_nav .slide_type li { flex:1 0 50%; }
.m_nav .slide_type li > a { justify-content:space-between; padding:10rem 20rem; }
.m_nav .slide_type li > a::after {content:''; display:block; flex-shrink:0; width:5rem; height:5rem; border-bottom:2px solid #999; border-right:2px solid #999; transform:rotate(45deg); }
.m_nav .slide_type div { position:absolute; left:0; top:70rem; width:100%; background:#fff; border:1px solid #ccc; border-radius:10rem; padding:10rem 15rem; opacity:0; z-index:-1; transition:0.3s;}
.m_nav .slide_type a.on+div {top:45rem; opacity:1; z-index:10;}
.m_nav .slide_type div a { display:flex; padding:3rem 0; font-size:0.95em; }
.m_nav .slide_type div a::before {content:''; display:block; flex-shrink:0; width:4rem; height:4rem; background:#bbb; border-radius:50%; margin:8rem 7rem 0 0; }
.m_nav .depth3 {display:none; padding:10rem 20rem; }
.m_nav .depth3 li a {display:flex; font-size:0.95em; padding:5rem 0; }
.m_nav .depth3 li a::before { content:''; display:block; width:3rem; height:3rem; flex-shrink:0; background:#aaa; margin:12rem 8rem 0 0; }
#m_nav_close { position:absolute; right:3%; top:3%; width:50rem; height:50rem; display:flex; align-items:center; justify-content:center; margin:0; }
#m_nav_close span { position:absolute; left:-99999rem; top:-999999rem; }
#m_nav_close::before {content:''; display:block; width:20px; height:20px; background:var(--sprite_template) -50px 0; }
.m_nav+.nav_bg { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7);z-index:10; }
/*menu_on*/
.m_nav .depth3 li a.on { text-decoration:underline; font-weight:bold; }

/*m ver1*/
.m_nav.ver1 .depth1 { position:relative; margin:20rem 0 0; }
.m_nav.ver1 .depth1::before,
.m_nav.ver1 .depth2_wrap::before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; min-height:calc(100vh - 100rem); background:var(--p_color); z-index:0; border-radius:0 40rem 0 0; transition:0.3s; z-index:1; }
.m_nav.ver1 .depth1 > li > a { position:relative; display:flex; width:100%; border-bottom:1px solid rgba(255,255,255,0.3); color:#fff; padding:15rem 20rem; z-index:1; }
.m_nav.ver1 .depth1 > li > a.on {color:#fff200; font-weight:bold;}
.m_nav.ver1 .depth1 > li > a.on::after {content:''; display:block; flex-shrink:0; width:5rem; height:5rem; background:#fff200; border-radius:50%; margin:3rem 0 0 10rem;  }
.m_nav.ver1 .depth1 > li > a[target="_blank"] span::after { background-position:-13px 0;}
.m_nav.ver1 .depth2_wrap { display:none; position:absolute; left:170rem; top:0; width:calc(100% - 170rem); padding:0 3%; z-index:0; }
.m_nav.ver1 .depth2_wrap::before {left:-150rem;}
.m_nav.ver1 .depth2 > li > a { position:relative; display:flex; align-items:center; justify-content:space-between; padding:15rem 20rem; border-bottom:1px solid #eee; }
.m_nav.ver1 .depth2 > li > a span {flex-grow:1;}
.m_nav.ver1 .depth2 > li > a.more::after {content:''; display:block; flex-shrink:0; width:5rem; height:5rem; border-bottom:2px solid #999; border-right:2px solid #999; transform:rotate(45deg); }
/*menu_on*/
.m_nav.ver1 .depth1.on > li > a,
.m_nav.ver1 .depth1.on::before,
.m_nav.ver1 .depth1.on .depth2_wrap::before { width:170rem; }
.m_nav.ver1 .depth2 > li > a.on {color:var(--p_color); font-weight:bold; }
.m_nav.ver1 .depth2 > li > a.on span {padding-right:15rem;}
.m_nav.ver1 .depth2 > li > a.more.on::after { border-color:#fff; }
.m_nav.ver1 .depth2 > li > a.more.on::before { content:''; position:absolute; right:10rem; top:50%; width:28rem; height:28rem; background:var(--p_color); border-radius:50%; transform:translateY(-50%); }

/*m ver2*/
.m_nav.ver2 > div { background:linear-gradient(180deg, var(--p_color2) 250rem, #fff 250rem); }
.m_nav.ver2 .site_name {margin:0; color:#fff; padding:5% 3% calc(5% + 25rem); }
.m_nav.ver2 #m_nav_close::before { background-position:-81px 0; }
.m_nav.ver2 .link_list { border:1px solid #ddd; background:#fff; }
.m_nav.ver2 .link_list:first-of-type { margin-top:-25rem; }
.m_nav.ver2 .depth1 { position:relative; margin:20rem 0 0; padding:20rem 3%; background:#fff; }
.m_nav.ver2 .depth1 > li > a { position:relative; display:flex; width:170rem; padding:15rem; border-radius:5rem 20rem 20rem 5rem; z-index:1; }
.m_nav.ver2 .depth2_wrap { display:none; position:absolute; left:170rem; top:0; width:calc(100% - 170rem); padding:20rem 3% 20rem 6%; z-index:0; }
.m_nav.ver2 .depth2_wrap::before {content:''; position:absolute; left:-170rem; top:0; width:calc(100% + 170rem); height:100%; min-height:calc(100vh - 100rem); background:linear-gradient(90deg, #f5f5f5 170rem, #fff 170rem); z-index:-1; }
.m_nav.ver2 .depth2 > li > a { position:relative; display:flex; align-items:center; justify-content:space-between; padding:15rem 10rem; }
.m_nav.ver2 .depth2 > li > a span {flex-grow:1;}
.m_nav.ver2 .depth2 > li > a.more::after { content:''; display:block; flex-shrink:0; width:10px; height:2px; background:#999; }
.m_nav.ver2 .depth2 > li > a.more::before { content:''; position:absolute; top:50%; right:calc(10rem + 4px); width:2px; height:10px; background:#999; transform:translateY(-50%);}
.m_nav.ver2 .depth3 { background:#f7f7f7; border-radius:10rem; }
/*menu_on*/
.m_nav.ver2 .depth1 > li > a.on { background:var(--p_color); color:#fff; }
.m_nav.ver2 .depth2 > li > a.on { color:var(--p_color); font-weight:bold;}
.m_nav.ver2 .depth2 > li > a.on.more::before {display:none;}
.m_nav.ver2 .depth2 > li > a.on.more::after { background:var(--p_color); }
/*m ver2 option*/
.m_nav.ver2.del_link_list > div { background:#fff; }
.m_nav.ver2.del_link_list .site_name { padding:5% 3%; background:var(--p_color2); }
.m_nav.ver2.del_link_list .depth1 { margin:0; }

/*m ver3*/
.m_nav.ver3 .link_list { gap:10rem; background:#444; margin:0; padding:3% 60rem 3% 3%; border-radius:0;  }
.m_nav.ver3 .link_list li {flex:0 0 calc((100% - 20rem)/3); }
.m_nav.ver3 .slide_type li { flex:0 0 calc((100% - 10rem)/2); }
.m_nav.ver3 .link_list li::before {display:none;}
.m_nav.ver3 .link_list li > a { border:1px solid rgba(255,255,255,0.3); color:#fff; border-radius:20rem; }
.m_nav.ver3 .link_list+.link_list {padding-top:0;}
.m_nav.ver3 .depth1 > li > a { display:flex; align-items:center; justify-content:space-between; padding:15rem 20rem; border-top:1px solid #ddd;  }
.m_nav.ver3 .depth1 > li:first-of-type > a {border-top:0;}
.m_nav.ver3 .depth1 > li > a.more::after {content:''; display:block; flex-shrink:0; width:5rem; height:5rem; border-bottom:2px solid #999; border-right:2px solid #999; transform:rotate(45deg); }
.m_nav.ver3 .depth2_wrap { display:none; padding:20rem;}
.m_nav.ver3 a.on+.depth2_wrap {border-bottom:2px solid var(--p_color);}
.m_nav.ver3 .depth2 > li > a { position:relative; display:flex; align-items:center; justify-content:space-between; padding:12rem 10rem; border-bottom:1px dashed #ddd; }
.m_nav.ver3 .depth2 > li:last-of-type > a { border-bottom:0; }
.m_nav.ver3 .depth2 > li > a span {flex-grow:1;}
.m_nav.ver3 .depth2 > li > a.more::after { content:''; display:block; flex-shrink:0; width:10px; height:2px; background:#999; }
.m_nav.ver3 .depth2 > li > a.more::before { content:''; position:absolute; top:50%; right:calc(10rem + 4px); width:2px; height:10px; background:#999; transform:translateY(-50%);}
.m_nav.ver3 .depth3 { background:#f7f7f7; border-radius:10rem; }
/*menu_on*/
.m_nav.ver3 .depth1 > li > a.on {background:var(--p_color); color:#fff; border-top:0; }
.m_nav.ver3 .depth1 > li > a.on.more::after { border-color:#fff; }
.m_nav.ver3 .depth2 > li > a.on {border-bottom:0; color:var(--p_color); font-weight:bold; }
.m_nav.ver3 .depth2 > li > a.on.more::before {display:none;}
.m_nav.ver3 .depth2 > li > a.on.more::after { background:var(--p_color); }
.m_nav.ver3 #m_nav_close { top:2%; right:2%; }
.m_nav.ver3 #m_nav_close::before { background-position:-81px 0;}
/*m ver2 option*/
.m_nav.ver3.del_link_list #m_nav_close { top:0; right:0; background:#333; border-radius:0 0 0 15rem;}
.m_nav.ver3.del_link_list > div > *:first-of-type {margin-top:60rem;}

/*search area*/
#search_area { display:none; align-items:center; position:fixed; left:0; top:0; width:100%; height:100%; background:#eee; z-index:30; }
#search_area .search_area_wrap { max-width:800rem; width:94%; margin:0 auto; }
#search_area form { display:flex; align-items:center; border:2px solid var(--p_color); background:#fff; height:70rem; border-radius:35rem; padding:0 40rem; }
#search_area form legend {font-weight:bold; color:var(--p_color); font-size:20rem; }
#search_area form label { position:absolute; left:-999999px; top:-999999px; }
#search_area form input { flex-grow:1; width:100%; height:100%; border:0; font-size:20rem; background:none; margin:0 30rem; }
#search_area form a,
#search_area form button { position:relative; display:block; width:70rem; height:100%; text-indent:-999999px; border:0; background:none; }
#search_area form a::before,
#search_area form a::after,
#search_area form button::before,
#search_area form button::after {content:''; position:absolute; left:50%; top:50%; }
#search_area form a::before,
#search_area form button::before { width:15rem; height:15rem; border:3px solid var(--p_color); border-radius:50%; transform:translate(-10rem, -10rem); }
#search_area form a::after,
#search_area form button::after { width:3px; height:10rem; background:var(--p_color); transform:rotate(-45deg) translate(3rem, 10rem); }
#search_area .search_keyword { display:flex; flex-wrap:wrap; margin-top:30rem; }
#search_area .search_keyword a { display:flex; align-items:center; background:#fff; border:1px solid #ddd; height:40rem; padding:0 20rem; border-radius:20rem; margin:5rem; }
#search_area .search_keyword a::before {content:'#'; color:#777; }
#search_area .search_keyword a:hover { border:1px solid var(--p_color); color:var(--p_color); }
#search_area .search_keyword a:hover::before { color:var(--p_color); }
#search_close {  position:relative; display:block; width:60rem; height:60rem; margin:50rem auto 0; border:1px solid #ddd; border-radius:50%; background:#fff; text-indent:-999999px; }
#search_close::before,
#search_close::after { content:''; position:absolute; left:50%; top:calc(50% - 10rem); width:1px; height:20rem; background:#333; transform:rotate(45deg); }
#search_close::after { transform:rotate(-45deg); }

/*go top*/
.go_top { display:flex; align-items:center; justify-content:center; position:fixed; right:20rem; bottom:20rem; width:40rem; height:40rem; border:1px solid #ddd; border-radius:50%; box-shadow:0 5rem 5rem rgba(0,0,0,0.1); background:#fff; opacity:0; transition:0.3s; z-index:8; }
.go_top::before { content:''; display:block; width:16px; height:19px; background:var(--sprite_template) 0 -333px; }
.go_top span {position:absolute; left:-99999rem; top:-99999rem;}
/* @media all and (max-width:1023px){
	.go_top {display:none;}
} */