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

.fwrap, .swrap { margin-left:auto; margin-right:auto; }
.fwrap { width:calc(100% - 120px);  }
.swrap { width:1360px; }
@media (max-width:1600px) {
	.fwrap, .swrap { width:92%; }
}





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

#head { --top_h : 90px; }
#head, .cate, #head #top_items { height:var(--top_h); transition: height ease-in-out .4s;}

/* #head */
#head { z-index: 1000; position: fixed; width: 100%; left:0; top:0; }
#head::after { z-index: -1; display: none; content: ''; position: absolute; top: 0; width: 100%; height:var(--top_h); background-color: #fff; }
#head.re_color:after { display: block; }


#head #gnb { padding-left:5%; }
#head #gnb ul { display: flex; width: 900px;  margin:0 auto; position:relative; z-index:1000; }
#head #gnb ul > li { position:relative; width: 100%; height:100%; }
#head #gnb ul > li:before { display:block; content:''; position:absolute; background-color:var(--mc); width:100%; height:0; left:0; top:0; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1); transition:height .4s; }
#head #gnb .cate { position: relative; display: block; }
#head #gnb .cate > strong { display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 18px; font-weight:600; text-align:center; line-height:1.2; white-space:nowrap; }


/* #head sub_menu */
#head .sub_menu { opacity: 0; height:0; overflow:hidden; transform:translateY(-20px); }
#head .sub_menu a { display: block; padding: 6px 10px; text-align: center; color: #222; font-size: 14.5px; line-height: 1.3; }


/* gnb hover */

#head #gnb ul > li.is_sub:hover:before { height:100%; }
#head #gnb ul > li.is_sub .cate:hover ~ .sub_menu, #head #gnb ul > li.is_sub .sub_menu:hover { opacity: 1; height:auto; overflow:auto; transform:translateY(0px); padding: 25px 0; transition: height 1s, opacity 1s, transform .5s; }
#head #gnb ul > li.is_sub:hover .cate > strong, #head #gnb ul > li.is_sub:hover .sub_menu a { color:#fff; }
#head #gnb ul > li.is_sub:hover .cate { border-bottom:1px solid rgba(255,255,255,.25); }
#head .sub_menu a:hover { opacity: .7; }


/* Top Items */

#head #top_items { position: absolute; width: 100%; top:0; left:0; z-index:999; border-bottom:1px solid rgba(255,255,255,.3); }
#head #top_items .fwrap { position: relative; height:100%; display:flex; align-items:center; justify-content:space-between; }

#head #top_items #logo { display:block; }
#head #top_items #logo img:nth-of-type(2) { display:none; }

#head #top_items #sub_items { display:flex; align-items:center; }
#head #top_items #sub_items > li:nth-of-type(n+2) { margin-left: 30px; }

#head #top_items #sub_items > li #sitemap_btn { display:block; width: 28px; position:relative; cursor:pointer; }
#head #top_items #sub_items > li #sitemap_btn > div { width: 100%; height: 2px; background-color: #fff; transform-origin: center; transition: transform 0.4s; }
#head #top_items #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:6px; }



/* re_height */
#head.re_height { --top_h : 70px; }
#head.re_height #gnb .cate:hover ~ .sub_menu, #head.re_height .sub_menu:hover { padding: 15px 0; }
#head.re_height .sub_menu a { padding: 5px 10px; }
#head.re_height #top_items #logo img { zoom:.8; }


/* re color */
#head.re_color #gnb .cate > strong { color: #222; }
#head.re_color #top_items #logo img:first-of-type { display:none; }
#head.re_color #top_items #logo img:nth-of-type(2) { display:inline; }
#head.re_color #top_items #sub_items > li #sitemap_btn > div { background-color: #333; }


/* fix */
/* #head.fix { position:fixed; top:0; } */
#head.fix:after { box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15); }


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



@media (max-width:1660px){
	#head #gnb { padding-left:10%; }
	#head #gnb ul { width:820px; }
	#head #top_items #sub_items > li #sitemap_btn { width: 24px; }
	#head #top_items #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:5px; }
}

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







/* sitemap */
#head #sitemap { z-index: 1050; position: fixed; opacity: 0; left: 100vw; top:0; width: 100%; height:100%; background-color: rgba(0, 0, 0, 0.7); transition: all .5s; }
#head.sitemap_on #sitemap { opacity: 1; left: 0; }


#head #sitemap .sitemap_wrap { height: 100%; width:100%; position:absolute; left:100vw; transition: all .8s; }
#head.sitemap_on #sitemap .sitemap_wrap { left:0; }

#head #sitemap .fwrap { position: relative; height: 100%; }

#head #sitemap .address { position: absolute; bottom:0; width:25%; }
#head #sitemap .address dt { font-size: 16px; font-weight: 700; color: #fff; }
#head #sitemap .address dd { opacity: .8; font-size: 15px; line-height: 1.5; color: #fff; width:80%; }

#head #sitemap .con { position: absolute; width: 100%; top:52%; transform:translateY(-50%); }
#head #sitemap .con:after { clear:both; visibility:hidden; display:block; content:''; }
#head #sitemap .con p.tit { float: left; color: #fff; font-size: 64px; font-weight: 800; margin-top: -5px; }

#head #sitemap .maps { float: right; display: flex; flex-wrap: wrap; width: 70%; margin: 0 -3.5vw calc(-30px - 3vw) 0; }
#head #sitemap .maps > li { width: 33.3333%; padding: 0 3.5vw calc(30px + 3vw) 0; }
#head #sitemap .maps > li .box > p { color: #fff; font-size: 28px; font-weight: 700; }

#head #sitemap .maps > li .box .bar { margin: 22px 0; width: 100%; height: 2px; background-color: rgba(255, 255, 255, .4); }
#head #sitemap .maps > li .box .bar:before { content:''; display:block; width: 0; height: 2px; background-color: #fff; transition: all .5s; }
#head #sitemap .maps > li:hover .box .bar:before { width: 100%; }

#head #sitemap .maps > li .box .sub li a { display:block; padding:5px 0; opacity: .7; color: #fff; font-size: 16px; line-height: 1.4; }
#head #sitemap .maps > li .box .sub li a:hover { opacity: 1; }

#head #sitemap .maps.cnt4, #sitemap .maps.cnt8 { width: 77%; margin: 0 -3.2vw calc(-30px - 3vw) 0; }
#head #sitemap .maps.cnt4 > li, #sitemap .maps.cnt8 > li { width: 25%; padding: 0 3.2vw calc(30px + 3vw) 0; }


#head.re_color.sitemap_on #top_items #logo img:first-child { display:inline; }
#head.re_color.sitemap_on #top_items #logo img:last-child { display:none; }


#head.sitemap_on #top_items { z-index:1100; }

#head.sitemap_on #top_items #sub_items > li #sitemap_btn { padding:20px 0; }
#head.sitemap_on #top_items #sub_items > li #sitemap_btn > div { position: absolute; background-color: #fff !important; }
#head.sitemap_on #top_items #sub_items > li #sitemap_btn > div:nth-of-type(n+2) { margin-top:0; }

#head.sitemap_on #top_items #sub_items > li #sitemap_btn > div:nth-child(1) { transform: rotateZ(45deg); }
#head.sitemap_on #top_items #sub_items > li #sitemap_btn > div:nth-child(2) { transform: translateX(100%); opacity: 0; }
#head.sitemap_on #top_items #sub_items > li #sitemap_btn > div:nth-child(3) { transform: rotateZ(-45deg); }





@media (max-width: 1660px){
	#head #sitemap .maps > li .box .sub li a { padding:4px 0; }
	#head #sitemap .address dd { width:100%; }
}

@media (max-width: 1023px){
	#head #sitemap .address { display:none; }
	#head #sitemap .maps { width:100%; margin-top:calc(20px + 3vw); }
}

@media (max-width: 600px){
	#head.sitemap_on { overflow:hidden; }
	#head.sitemap_on #top_items { border-bottom:0; }
	#head #sitemap .sitemap_wrap { overflow:auto; }
	#head #sitemap .con { top:90px; transform:translateY(0); }
	#head #sitemap .con p.tit { display: none; }
	#head #sitemap  .address { display:none; }
	#head #sitemap .maps { float: none; display: block; width: 100%; margin: 0; }
	#head #sitemap .maps > li { margin:0; width: 100%; padding: 0; cursor: pointer; text-align:center; }

	#head #sitemap .maps { border-bottom:1px solid rgba(255,255,255,.6); }
	#head #sitemap .maps > li .box > p { padding:calc(15px + 1vw) 0; border-top:1px solid rgba(255,255,255,.6); }
	#head #sitemap .maps > li .box .bar, #head #sitemap .maps > li .box .sub { display:none; }
	#head #sitemap .maps > li .box .sub li a { opacity: 1; padding:calc(10px + 0.3vw) calc(10px + 0.3vw); background:rgba(0,0,0,.1); margin-top:1px; }
}










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


#footer { position:relative; padding: 70px 0; background-color: #232730; }
#footer * { letter-spacing:0; }
#footer .wrap { position:relative; }
#footer .f_top::after{ clear:both; visibility:hidden; display:block; content:''; }
#footer .f_top li{ float: left; color: #fff; font-size: 16px; font-weight: 400; }
#footer .f_top li:nth-child(n+2){ margin-left: 35px;}

#footer .line { border-top: 1px solid rgba(255,255,255, .2); }

#footer #info { float:left; width:60%; }
#footer #info li{ font-size: 15px; font-weight: 300; display: inline-block; color:rgba(255,255,255, .7); line-height: 200%; margin-right: 30px;}
#footer #info li span { color: #eee; font-weight: 500; margin-right: 5px; }
#footer #info li:last-child{ margin-right: 0;}

#footer .info_wrap strong { display:block; font-family:var(--roboto); font-size:15px; color:#ccc; font-weight:500; }

#footer #cs_center p { font-family:var(--roboto); font-size:32px; color:#fff; font-weight:700; }
#footer #cs_center p.sub_tel { font-size:16px; font-weight:500; opacity:.8; margin-top:10px; }
#footer .copy { font-size: 12.5px; font-weight: 400; color: #969696; margin-top:15px; }
#footer .sns { opacity:.5; }

#footer #page_top { width:80px; height:80px; position:absolute; bottom:0; right:60px; cursor:pointer; background:#232730; border: 1px solid #565656; /*box-shadow:0 0 16px 0px rgba(0, 0, 0, .1);*/  }
#footer #page_top:before { display:block; content:''; position:absolute; background:url('/theme/basic/renew/img/ptop_arrow.png') center no-repeat; width:100%; height:100%; opacity:.8; }
#footer #page_top:hover { background-color:#fff; border:0; border: 1px solid #fff; }
#footer #page_top:hover:before { background-image:url('/theme/basic/renew/img/ptop_arrow_b.png'); opacity:1; }



@media (max-width:1600px) {
	#footer #page_top { right:4%; width:calc(30px + 3vw); height:calc(30px + 3vw); }
	#footer #page_top:before { background-size:calc(7px + 0.5vw); }
	#footer #wishweb_logo { right:4%; }
	#footer #wishweb_logo img { width:calc(70px + 4vw); }
}
@media screen and (max-width:1000px) {
	#footer #info { width:calc(100% - 80px); }
	#footer #info:after { display:block; content:''; margin-bottom:calc(14px + 2vw); }
	#footer #cs_center { width:70%; }
}
@media screen and (max-width:768px) {
	#footer #info { width:calc(100% - 60px); }
	#footer .f_bottom li{ margin-right: 20px;}
	#footer .f_top {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 16px;
		padding-right: 56px;
	}
	#footer .f_top::after { display: none; }
	#footer .f_top li {
		float: none;
		margin-left: 0 !important;
		font-size: 13px;
		line-height: 1.4;
	}
	#footer .f_top li.f_inq { display: none; }
	#footer .info_wrap { padding-right: 56px; }
	#footer .sns img{ width: 160px;}
}




/***** SNS 링크 *****/

#sns_btns { position:fixed; right:20px; bottom:50px; z-index:500; text-align:right; }

#sns_btns > * { position:relative; display:block; margin-left:auto; width:78px; height:78px; border-radius:50%; background-repeat:no-repeat; background-position:center; box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, .12); overflow:hidden; }
#sns_btns > *:nth-child(n+2) { margin-top:10px; }

#sns_btns > *:before { content:''; display:block; position:absolute; width:100%; height:100%; left:0; top:0; background-position:center; background-repeat:no-repeat; transition:opacity .4s; }

#sns_btns .kakao:before { background-color:#f8e049; background-image:url('/theme/basic/renew/img/icon_kakao.png'); }
#sns_btns .blog:before { background-color:#009345; background-image:url('/theme/basic/renew/img/icon_blog.png'); }
#sns_btns .ytb:before { background-color:#d91226; background-image:url('/theme/basic/renew/img/icon_ytb.png'); }
#sns_btns .tel:before { background-color:var(--mc); background-image:url('/theme/basic/renew/img/icon_tel.png'); }
#sns_btns .inq:before { background-color:#222; background-image:url('/theme/basic/renew/img/icon_inq.png'); }

#sns_btns .tel.pc { text-align:center; transition:all .3s; cursor:pointer; }
#sns_btns .tel.pc span { display:inline-block; font-size:0; font-weight:600; position:relative; top:50%; transform:translateY(-50%); white-space:nowrap; }

#sns_btns .tel.pc:hover { width:auto; border-radius:100px; padding:0 30px; }
#sns_btns .tel.pc:hover:before { background-image:none; }
#sns_btns .tel.pc:hover span { font-size:16px; color:#fff; }
#sns_btns .tel.mo { display:none; }

@media (max-width:1660px) {
	#sns_btns { right:10px; bottom:calc(15px + 1.8vw); }
	#sns_btns > * { width:calc(48px + 1.8vw); height:calc(48px + 1.8vw); }
	#sns_btns > *:before { background-size:calc(22px + 0.8vw); }
	#sns_btns > *:nth-child(n+2) { margin-top:8px; }
	#sns_btns .tel.pc:hover { padding:0 calc(17px + 0.7vw); }
	#sns_btns .tel.pc:hover span { font-size:calc(12px + 0.3vw); }
}

@media (max-width:767px) {
	#sns_btns > *:nth-child(n+2) { margin-top:6px; }
	#sns_btns .tel.pc { display:none; }
	#sns_btns .tel.mo { display:block; }
}