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

.fwrap { width:calc(100% - 120px); margin-left:60px; margin-right:60px; }
.swrap { width:1360px; margin-left:auto; margin-right:auto; }


/*************** TOP 메뉴영역 ***************/
#head, .category, .items { height: 90px; transition: height ease-in-out .4s; }

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

#head #gnb { position: relative; left: 55%; transform: translateX(-50%); width: 1000px; height: 100%; }
#head #gnb ul { display: flex; justify-content: space-around; width: 100%; }
#head #gnb ul > li { width: 100%; position:relative; }
#head #gnb ul > li:before { display:block; content:''; position:absolute; width:100%; height:0; left:0; top:0; transition:height .4s;}
#head #gnb .category { position: relative; display: block; }
#head #gnb .category > span { 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; }
/* #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: 14px; line-height: 1.3; }


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


/* #items */
#items_tool { z-index: 1100; position: fixed; width: 100%; }
#items_tool .fwrap { position: relative; }
#items_tool .items { position: absolute; }
#items_tool #logo { left:0; }
#items_tool #logo img { position: relative; top: 50%; transform: translateY(-50%); transform-origin: left; }
#items_tool #logo a img:last-child { display:none; }
#items_tool #sub_items { right: 0; top: 0; }
#items_tool #sub_items > li { float: left; height: 100%; }
#items_tool #sub_items > li:nth-child(n+2) { margin-left: 30px; }
#items_tool #sub_items > li a { display: block; position: relative; top: 50%; transform: translateY(-50%); color: #fff; font-size: 14px; font-weight: 600; }
#items_tool #sub_items > li a > * { vertical-align: middle; }

#items_tool #sub_items > li #sitemap_btn { display:block; position: relative; top: 50%; transform: translateY(-50%); width: 28px; cursor: pointer; }
#items_tool #sub_items > li #sitemap_btn > div { margin-bottom: 6px; width: 100%; height: 2px; background-color: #fff; transform-origin: center; transition: transform 0.4s; }

.sitemap_on #items_tool #sub_items > li #sitemap_btn { padding:20px 0; }
.sitemap_on #items_tool #sub_items > li #sitemap_btn > div { position: absolute; background-color: #333; }
.sitemap_on #items_tool #sub_items > li #sitemap_btn > div:nth-child(1) { transform: rotateZ(45deg); }
.sitemap_on #items_tool #sub_items > li #sitemap_btn > div:nth-child(2) { transform: translateX(100%); opacity: 0; }
.sitemap_on #items_tool #sub_items > li #sitemap_btn > div:nth-child(3) { transform: rotateZ(-45deg); }



/* resize or scroll */
.re_width #head #gnb { width:860px; }

.re_height #head, .re_height .category, .re_height .items { height: 70px; }
.re_height #head #gnb .category > span { font-size: 17px; }
.re_height #head #gnb .category:hover ~ .sub_menu, .re_height #head .sub_menu:hover { padding: 15px 0; }
.re_height #head .sub_menu a { font-size: 14px; padding: 5px 10px; }
.re_height #items_tool #logo img { transform: translateY(-50%) scale(.8); }

.re_mo #head, .re_mo .category, .re_mo .items { height: 56px; }
.re_mo #head #gnb { display: none; }
.re_mo #items_tool #logo img { transform: translateY(-50%) scale(.6); }
.re_mo #items_tool #sub_items > li a { font-size: 12.5px; }
#items_tool #sub_items > li.lang img { width:16px; margin-right: 6px; }
.re_mo #items_tool #sub_items > li:nth-child(n+2) { margin-left:calc(10px + 0.7vw); }
.re_mo #items_tool #sub_items > li #sitemap_btn { width: 24px; }
.re_mo #items_tool #sub_items > li #sitemap_btn > div { margin-bottom: 5px; }

.re_color #items_tool #logo a img:first-child { display:none; }
.re_color #items_tool #logo a img:last-child { display:inline; }
.re_color #items_tool #sub_items > li a { color:#444; }
.re_color #items_tool #sub_items > li.lang img:nth-of-type(1) { display:none; }
.re_color #items_tool #sub_items > li.lang img:nth-of-type(2) { display:inline; }
.re_color #items_tool #sub_items > li #sitemap_btn > div { background-color: #333; }
.re_color #head #gnb .category > span { color: #222; }



.fix #head{ position:fixed; top:0; }
.fix #head::after { background-color: #fff; box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15);}



/* disable */
.disable #head, .disable .category, .disable .items { display: none; }
.sitemap_on.disable #sub_items { display: block; }
.sitemap_on #logo { display: none; }
.sitemap_on #items_tool #sub_items > li a { color:#111; }
.sitemap_on #items_tool #sub_items > li.lang img:nth-of-type(2) { display:inline; }
.sitemap_on #items_tool #sub_items > li.lang img:nth-of-type(1) { display:none; }


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

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

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

#sitemap  .address { position: absolute; bottom: 72px; width:20%; }
#sitemap .address li p { color: #111; }
#sitemap  .address li p.tit { font-size: 16px; font-weight: 700; }
#sitemap .address li p.txt { opacity: .8; font-size: 15px; line-height: 1.5; }

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

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

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

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

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

@media (max-width: 1660px){
    #sitemap .address { bottom: calc(30px + 2vw); width: 100%; }
	#sitemap .maps > li .box .sub li a { padding:4px 0; }
}

@media (max-width: 767px){
	.sitemap_on { overflow:hidden; }
	#sitemap .sitemap_wrap { overflow:auto; }
	#sitemap .visual { top:10%; transform:translateY(0); }
	#sitemap .visual p.tit { display: none; }
	#sitemap  .address { display:none; }
	#sitemap .maps { float: none; display: block; width: 100%; margin: 0; }
	#sitemap .maps > li { margin: calc(20px + 1vw) 0; width: 100%; padding: 0; cursor: pointer; }

	#sitemap .maps > li .box > p { padding-bottom:calc(7px + 1vw); }
	#sitemap .maps > li .box .bar { margin:0; }
	#sitemap .maps > li .box .bar:before { display:none; }

	#sitemap .maps > li .box .sub { display:none; padding-top:calc(7px + 1vw); }
	#sitemap .maps > li .box .sub li a:hover { opacity: 1; }
}




#footer * { letter-spacing:0; }
#footer{ padding: 70px 0; background-color: #2b2b2b; }

#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 .f_bottom li{ font-size: 15px; font-weight: 300; display: inline-block; color:rgba(255,255,255, .7); line-height: 170%; margin-right: 30px;}
#footer .f_bottom li span { color: #fff; font-weight: 500; margin-right: 5px; }
#footer .f_bottom li:last-child{ margin-right: 0;}

#footer .copy{ font-size: 12.5px; font-weight: 400; color: #969696; }
#footer .sns img{ opacity: .2; }

#footer #page_top { width:81px; height:81px; bottom:0; position:absolute; right:0; border:1px solid rgba(255,255,255,.5); cursor:pointer; }

#footer .fwrap { position:relative; }
#footer #page_top:before { display:block; content:''; position:absolute; background:url('/images/ptop_arrow.png') center no-repeat; width:100%; height:100%; opacity:.7; }

#footer #page_top:hover { background-color:#fff; border:0; }
#footer #page_top:hover:before { background-image:url('/images/ptop_arrow_b.png'); opacity:1; }