/*************** 공통 레이아웃 ***************/

.fwrap, .swrap, .fhdwrap, .hd_wrap { margin-left:auto; margin-right:auto; }
.fwrap { width:calc(100% - 120px);  }
.swrap { width:var(--swrap); }
.fhdwrap { width:1920px; max-width:100%; }
.hd_wrap { width:1024px; max-width:100%; }

@media (max-width:1600px) {
	.fwrap, .swrap { width:92%; }
}



/*************** TOP 영역 ***************/

#head, #head #gnb .cate, #head #logo, #head #opt_items { height:var(--top_h); transition: height ease-in-out .4s;}

#head { z-index:1000; position:relative; width:100%; left:0; top:0; text-align:center; }
#head:before { z-index:-1; display:block; content: ''; position:absolute; top:0; width:100%; height:var(--top_h); background-color: #fff; }
#head.fix { position:fixed; }
#head.fix::before { box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15); }

#head #top { display:flex; justify-content:space-between; }
#head #logo, #head #opt_items { display:flex; align-items:center; }
#head #logo img:nth-of-type(2) { display:none; }


#head #gnb { display:flex; justify-content:center; }
#head #gnb > li { position:relative; width:170px; }
#head.cnt7 #gnb > li { width:160px; }

#head #gnb .cate { position:relative; display:block; }
#head #gnb .cate > strong { display:block; position:absolute; top:50%; width:100%; transform:translateY(-50%); color:#222; font-size:18px; font-weight:600; text-align:center; line-height:1.2; transition:color .4s; }


/* #head sub_menu */
#head .sub_menu { background-color:var(--mc); opacity:0; height:0; overflow:hidden; transform:translateY(-30px); border-radius:10px; box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, .1); }
#head #gnb > li.is_sub:hover:before { height:100%; }
#head #gnb > li.is_sub .cate:hover ~ .sub_menu, #head #gnb > li.is_sub .sub_menu:hover { opacity:1; height:auto; overflow:auto; padding:8% 7%; transform:translateY(-10px); transition:height 1s, opacity 1s, transform .5s; }
#head #gnb > li .sub_menu .s_menu { display:block; padding:6px 0; text-align:center; font-size:14.2px; line-height:1.3; color:#fff; opacity:.7; }
#head #gnb > li .sub_menu .s_menu:hover { opacity:1; }



/* 서서브 메뉴 */
#head .sub_menu .ss_wrap { margin-bottom:5%; background-color:rgba(255, 255, 255, .1); padding:4% 0; }
#head .sub_menu .s_menu:last-of-type + .ss_wrap { margin-bottom:0; }
#head #gnb > li .sub_menu .ss_wrap .ss_menu { display:block; font-size:12.5px; color:#fff; line-height:1.2; text-align:center; padding:3% 0; opacity:.7; }
#head #gnb > li .sub_menu .ss_wrap .ss_menu:hover { opacity:1; }


/* Option Items */
#head #opt_items > li:nth-of-type(n+2) { margin-left:30px; }
#head #opt_items #sitemap_btn { display:block; width: 28px; position:relative; cursor:pointer; }
#head #opt_items #sitemap_btn > div { width: 100%; height: 2px; background-color:#333; transform-origin: center; transition: transform 0.4s; }
#head #opt_items #sitemap_btn > div:nth-of-type(n+2) { margin-top:6px; }




/* re_height */
#head.re_height, #head.re_height + #top_h { --top_h : 70px; }
#head.re_height .sub_menu .s_menu { padding:5px 0; }
#head.re_height #logo img { zoom:.8; }




#head.disable { display: none; }
#head.disable.sitemap_on { display:block; }


@media (max-width:1660px){
	:root { --top_h : 70px; }
	#head #gnb > li { width:calc(83px + 5.2vw); }
	#head.cnt7 #gnb > li { width:calc(77px + 5vw); }
	#head #opt_items #sitemap_btn { width: 24px; }
	#head #opt_items #sitemap_btn > div:nth-of-type(n+2) { margin-top:5px; }
	#head.cnt7, #head.cnt7 + #top_h { --top_h : 56px; }
	#head.cnt7 #logo img { zoom:.65; }
	#head.cnt7 #gnb { display:none; }
}

@media (max-width:1250px){
	:root { --top_h : 56px; }
	#head #logo img { zoom:.65; }
	#head #gnb { display: none; }
	#head #opt_items #sitemap_btn { width: 21px; }
	#head #opt_items #sitemap_btn > div:nth-of-type(n+2) { margin-top:4px; }
}








/* sitemap */
#head #sitemap { position:fixed; opacity:1; left:100vw; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); transition: background .5s; text-align:left; }
#head.sitemap_on #sitemap { opacity:1; left:0; background-color:rgba(0, 0, 0, 1) }
#head #sitemap .sitemap_wrap { height:100%; width:100%; position:absolute; left:100vw; background-color:#fff; transition:left 1s cubic-bezier(0.1, 1, 0.4, 1); }
#head.sitemap_on #sitemap .sitemap_wrap { left:0; }
#head.sitemap_on #top { position:relative; z-index:1; }
#head.sitemap_on #logo img:first-child { display:none; }
#head.sitemap_on #logo img:last-child { display:inline; }
#head.sitemap_on #gnb { display:none; }

#head #sitemap .fwrap { position:relative; top:10%; height:calc(80% - var(--top_h)); margin-top:var(--top_h); overflow-y:auto; }
#head #sitemap .fwrap .scroll { min-height:100%; display:flex; align-items:center; }
#head #sitemap .con { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }

#head #sitemap .left_con { width:20%; }
#head #sitemap .left_con .tit { color:var(--mc); font-size:64px; font-weight:200; }

#head #sitemap .sitemap_con { display:flex; flex-wrap:wrap; row-gap:60px; }
#head #sitemap .sitemap_con.col3 { width:70%; column-gap:5%; }
#head #sitemap .sitemap_con.col3 > li { width:30%; }
#head #sitemap .sitemap_con.col4 { width:77%; column-gap:4%; }
#head #sitemap .sitemap_con.col4 > li { width:22%; }

#head #sitemap .sitemap_con > li .box .cate_name { display:flex; justify-content:space-between; align-items:center; }
#head #sitemap .sitemap_con > li .box .cate_name p { color:#111; font-size:23px; font-weight:700; line-height:1.3; padding-right:10px; }
#head #sitemap .sitemap_con > li .box .cate_name i { color:#666; font-size:14px; }

#head #sitemap .sitemap_con > li .box .bar { margin:6% 0; width: 100%; height: 2px; background-color: #eee; }
#head #sitemap .sitemap_con > li .box .bar:before { content:''; display:block; width: 0; height: 2px; background-color: var(--mc); transition: all .5s; }
#head #sitemap .sitemap_con > li:hover .box .bar:before { width: 100%; }
#head #sitemap .sitemap_con > li .box .sub li a { display:block; padding:5px 0; opacity:.7; color:#000; font-size:16px; line-height:1.4; }
#head #sitemap .sitemap_con > li .box .sub li a:hover { opacity:1 !important; }
#head #sitemap .sitemap_con > li .box .sub li .ss_wrap { padding-bottom:7px; }
#head #sitemap .sitemap_con > li .box .sub li .ss_wrap a { padding:3px 0 3px 10px; opacity:.5; font-size:15px; }

#head.sitemap_on #opt_items #sitemap_btn { padding:20px 0; }
#head.sitemap_on #opt_items #sitemap_btn > div { position: absolute; background-color: #fff; }
#head.sitemap_on #opt_items #sitemap_btn > div:nth-of-type(n+2) { margin-top:0; }
#head.sitemap_on #opt_items #sitemap_btn > div:nth-child(1) { transform: rotateZ(45deg); background-color:#333; }
#head.sitemap_on #opt_items #sitemap_btn > div:nth-child(2) { transform: translateX(100%); opacity: 0; }
#head.sitemap_on #opt_items #sitemap_btn > div:nth-child(3) { transform: rotateZ(-45deg); background-color:#333; }


@media (max-width: 1660px){
	#head #sitemap .sitemap_con { row-gap:calc(33px + 1.5vw); }
	#head #sitemap .sitemap_con > li .box .sub li a { padding:4px 0; }
	#head #sitemap .sitemap_con > li .box .sub li .ss_wrap a { padding:2px 0 2px 6px; }
}

@media (max-width: 1250px){
	#head #sitemap .left_con { width:100%; }
	#head #sitemap .sitemap_con { width:100% !important; margin-top:calc(20px + 3vw); }
}

@media (min-width: 768px){
	#head #sitemap .sitemap_con > li .box .sub { display:block !important; }
}
@media (max-width: 767px){
    #head.sitemap_on #top_items { border-bottom:0; }

	#head #sitemap .fwrap { top:5%; height:calc(90% - var(--top_h)); }
	#head #sitemap .fwrap .scroll { display:block; }

	#head #sitemap .left_con .tit { display:none; }

	#head #sitemap .sitemap_con { display: block; width: 100%; margin: 0; }
	#head #sitemap .sitemap_con.col3 > li, #head #sitemap .sitemap_con.col4 > li { width:100%; }
	#head #sitemap .sitemap_con > li { margin:0; padding: 0; cursor: pointer; }

	#head #sitemap .sitemap_con { border-bottom:1px solid var(--mc); }
	#head #sitemap .sitemap_con > li .box .cate_name { padding:calc(15px + 1vw) 0; border-top:1px solid var(--mc); }
	#head #sitemap .sitemap_con > li .box .bar, #head #sitemap .sitemap_con > li .box .sub { display:none; }
	#head #sitemap .sitemap_con > li .box .sub li { background:#f5f5f5; margin-top:2px; }
	#head #sitemap .sitemap_con > li .box .sub li a { opacity:1; padding:calc(10px + 0.3vw) 16px; color:#111; }
	#head #sitemap .sitemap_con > li .box .sub li .ss_wrap a { opacity:1; color:#666; padding:calc(4px + 0.3vw) 20px; }
}










/***** 하단 *****/


#footer { position:relative; padding: 70px 0; }

#footer .f_top { display:flex; flex-wrap:wrap; justify-content:space-between; }
#footer .f_top .f_menu { width:calc(88% - 130px); overflow-x:auto; }
#footer .f_top .f_menu .f_menu_list { position:relative; width:auto; display:flex; top:50%; transform:translateY(-50%); }
#footer .f_top .f_menu .f_menu_list a:nth-child(n+2){ margin-left:35px; }
#footer .f_top .f_menu .f_menu_list a { display:block; padding:10px 0; line-height:1; color:rgba(0,0,0, .65); font-size:16px; cursor:pointer; }
#footer .f_top .f_menu .f_menu_list a:hover { color:#111; }

#footer .f_top .f_family { display:none; width:calc(6% + 130px); position:relative; z-index:10; }
#footer .f_top .f_family .tit_box { padding:8% 0; text-align:center; font-size:13px; cursor:pointer; color:rgba(0, 0, 0, .6); border:1px solid rgba(0, 0, 0, .25); }
#footer .f_top .f_family .tit_box i { margin-left:10px; font-size:12px; }

#footer .f_top .f_family:hover ul { display:block; }
#footer .f_top .f_family ul { display:none; position:absolute; bottom:100%; width:100%; max-height:204px; overflow-y:auto; background-color:#fff; box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, .1); padding:1% 8%; }
#footer .f_top .f_family ul li a { display:block; padding:6% 0; color:#777; line-height:1.4; font-size:14.5px; }
#footer .f_top .f_family ul li a:hover { color:#111; }
#footer .f_top .f_family ul li:nth-of-type(n+2) { border-top:1px solid #e6e6e6; }
#footer .div_line { border-color:rgba(0,0,0, .15); padding:20px 0 60px; }

#footer .f_company { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
#footer .f_company .f_info { width:calc(85% - 160px); }
#footer .f_company .f_info .info_items { display:flex; flex-wrap:wrap; padding:4px 0; }
#footer .f_company .f_info .info_items li { display:flex; align-items:center; margin-right:4%; padding:3px 0; }
#footer .f_company .f_info .info_items li > * { font-size:15.5px; line-height:1.3; }
#footer .f_company .f_info .info_items li h5 { color:rgba(0,0,0, .6); margin-right:10px; font-weight:500; }
#footer .f_company .f_info .info_items li p { color:rgba(0,0,0, .5); }

#footer .f_company .f_sns { width:calc(9% + 160px); display:none; flex-wrap:wrap; gap:6px 6%; }
#footer .f_company .f_sns a { width:47%; display:flex; align-items:center; }
#footer .f_company .f_sns a .sns_icon { width:28%; aspect-ratio:1/1; background-color:rgba(0,0,0, .35); border-radius:50%; text-align:center; margin-right:8px; }
#footer .f_company .f_sns a .sns_icon img { width:23px; position:relative; top:50%; transform:translateY(-50%); }
#footer .f_company .f_sns a p { width:72%; font-size:14px; line-height:1.3; color:rgba(0,0,0, .5); }
#footer .f_company .f_sns a:hover p { color:rgba(0,0,0, .8); }

#footer .copy.copy { font-size:12.5px; line-height:1.5; color:rgba(0,0,0, .5); }

#footer #page_top { width:80px; aspect-ratio:1/1; position:absolute; top:0; right:60px; cursor:pointer; background:#fff; transform:translateY(-50%); box-shadow:0 0 16px 0px rgba(0, 0, 0, .1); }
#footer #page_top span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:36px; font-weight:200; color:#333; }

#footer #page_top:hover { background-color:var(--mc); border:0; }
#footer #page_top:hover span { color:#fff;  }

#footer.family .f_top .f_family { display:block; }
#footer.sns .f_company .f_sns { display:flex; }

@media (max-width:1660px) {
	#footer .f_top .f_menu .f_menu_list a:nth-child(n+2){ margin-left:calc(18px + 1vw); }
	#footer .f_company .f_sns a .sns_icon img { width:calc(16px + 0.4vw); }
	#footer #page_top { right:4%; width:calc(30px + 3vw); }
}
@media (max-width:1023px) {
	#footer .f_company .f_info { width:100%; }
	#footer .f_company .f_info .info_items { margin-right:-4%; }
	#footer .f_company .f_info .info_items li h5 { margin-right:7px; }
	#footer .f_company .f_sns { width:100%; margin-top:calc(16px + 1.5%); gap:6px 3%; }
	#footer .f_company .f_sns a { width:auto; }
	#footer .f_company .f_sns a .sns_icon { width:calc(24px + 1vw); }
	#footer .f_company .f_sns a p { width:auto; }
}

@media screen and (max-width:767px) {
	#footer .mob_tel { position:absolute; bottom:0; right:4%; display:block; width:calc(40px + 2vw); height:calc(40px + 2vw); background:#fff; border-radius:50%; font-size:25px; text-align:center; }
}
@media screen and (max-width:500px) {
	#footer .f_top .f_menu { width:100%; }
	#footer .f_top .f_menu .f_menu_list { top:0; transform:translateY(0); }
	#footer .f_top .f_family { width:100%; margin-top:10px; }
	#footer .f_top .f_family .tit_box { padding:4% 0; }
	#footer .f_top .f_family ul { padding:0 5%; }
	#footer .f_top .f_family ul li a { padding:3.5% 0; }
	#footer .f_company .f_info .info_items li h5 { margin-right:5px; }
	#footer .f_company .f_sns a { width:46%; }
	#footer .f_company .f_sns a .sns_icon { width:22%; }
	#footer .f_company .f_sns a .sns_icon img { width:19px; }
	#footer .f_company .f_sns a p { width:78%; }
}


/* footer dark_bg */

#footer.b_d_e { background-color:#222; }
#footer.b_d_e .f_top .f_menu .f_menu_list a { color:rgba(255,255,255, .6); }
#footer.b_d_e .f_top .f_menu .f_menu_list a:hover { color:#fff; }
#footer.b_d_e .f_top .f_family .tit_box { color:rgba(255, 255, 255, .8); border-color:rgba(255, 255, 255, .3); }
#footer.b_d_e .div_line { border-color:rgba(255,255,255, .2); }
#footer.b_d_e .f_company .f_info .info_items li h5 { color:rgba(255,255,255, .8); }
#footer.b_d_e .f_company .f_info .info_items li p { color:rgba(255,255,255, .6); }
#footer.b_d_e .f_company .f_sns a .sns_icon { background-color:rgba(255,255,255, .1); }
#footer.b_d_e .f_company .f_sns a .sns_icon img { opacity:.8; }
#footer.b_d_e .f_company .f_sns a p { color:rgba(255,255,255, .5); }
#footer.b_d_e .f_company .f_sns a:hover p { color:#fff; }
#footer.b_d_e .copy {  color:rgba(255,255,255, .6); }