
/*search*/
#top_search{
	position:fixed;
	z-index:90;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.6);
	display:none;
}
#top_search div{
	position:absolute;
	width:90%;
	max-width:600px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%)
}
#top_search div input{
	border:0;
	border-radius:0;
	height:60px;
	font-size:2.2rem;
	padding:0px 2rem;
}
#top_search div button{
	position:absolute;
	right:1rem;
	top:50%;
	transform:translatey(-50%);
	font-size:3rem;
	background:none;
	border:0;
}
#top_search .search_close{
	position:absolute;
	top:35%;
	left:50%;
	transform:translatex(-50%);
	color:#fff;
	font-size:4rem;
}


/* font-weight */
.light{font-weight: 300;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 700;}




*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
button{background: none; border: none; cursor: pointer; outline: none;}
button:focus,
button:active {outline: none;}
body{font-family: 'Pretendard'; font-style: normal; line-height: 1em; font-style: normal; }
body.no_scroll {overflow: hidden; height: 100%;}













#header{position: fixed; left: 0; top: 0; width: 100%; height: 100px; z-index: 9990; padding: 0 80px; box-sizing: border-box; transition-duration: 0.3s;}
#header .h_inner{height: 100%; display: flex; justify-content: space-between; align-items: center;}
#header .h_inner h1>a{display: block; width: 208px; height: 40px; background: url(/html/_img/comm/logo_wh.png) no-repeat center / cover; transition-duration: 0.3s;}
#header .h_inner nav{position: relative; height: 100%;}
#header .h_inner .dep1{display: flex; column-gap: 80px;}
#header .h_inner .dep1>li{position: relative;}
#header .h_inner .dep1>li>a{color: #FFF; font-size: 22px; font-weight: 600; text-align: center; display: block; height: 100%; line-height: 100px;}
#header .h_inner .dep2_wrap{position: absolute; top:90px; left: 0; display: none;}
#header .h_inner .dep1>li:nth-child(1) .dep2_wrap{left: -50px;}
#header .h_inner .dep1>li:nth-child(2) .dep2_wrap{left: -58px;}
#header .h_inner .dep1>li:nth-child(3) .dep2_wrap{left: -54px;}
#header .h_inner .dep1>li:nth-child(4) .dep2_wrap{left: -68px;}
#header .h_inner .dep1>li:nth-child(5) .dep2_wrap{left: -68px;}
#header .h_inner .dep1>li:nth-child(6) .dep2_wrap{left: -58px;}
#header .h_inner .dep2{background: rgba(0, 0, 0, 0.8); border-radius: 10px; box-sizing: border-box; padding: 20px 0; width: 200px;}
#header .h_inner .dep2>li>a{color: #AAA; font-size: 18px; font-weight: 400; transition-duration: 0.3s; padding: 10px 0; display: block; text-align: center;}
#header .h_inner .dep2>li>a:hover,
#header .h_inner .dep2>li>a:active{color: #FFF; font-weight: 600;}
#header .h_inner .open_nav_btn{display: block; position: relative; width: 28px; height: 18px;}
#header .h_inner .open_nav_btn span{position: absolute; height: 2px; background-color: #FFF; display: block; transition-duration: 0.3s;}
#header .h_inner .open_nav_btn span.bar1{top: 0; width: 100%; right: 0;}
#header .h_inner .open_nav_btn span.bar2{top: 50%; transform: translateY(-50%); width: 20px; right: 0;}
#header .h_inner .open_nav_btn span.bar3{bottom: 0; width: 12px; right: 0;}
/* down */
#header.down{background-color: #FFF;}
#header.down .h_inner .dep1>li>a{color: #000;}
#header.down .h_inner h1>a{background: url(/html/_img/comm/logo.png) no-repeat center / cover;}
#header.down .h_inner .open_nav_btn span{background-color: #000;}
/* sub_header */
#header.sub_header{background-color: #FFF; border-bottom: 1px solid #DDD; box-shadow: 0 1px 8px rgba(0,0,0,0.2);}
#header.sub_header .h_inner .dep1>li>a{color: #000;}
#header.sub_header .h_inner h1>a{background: url(/html/_img/comm/logo.png) no-repeat center / cover;}
#header.sub_header .h_inner .open_nav_btn span{background-color: #000;}
/* hover */
#header.mouse-in{background-color: #FFF;}
#header.mouse-in .h_inner h1>a{background: url(/html/_img/comm/logo.png) no-repeat center / cover;}
#header.mouse-in .h_inner .dep1>li>a{color: #000;}
#header.mouse-in .h_inner .open_nav_btn span{background-color: #000;}
/* all_nav_open */
#header.all_nav_open{background: none;}
#header.all_nav_open .h_inner h1>a{background: url(/html/_img/comm/logo_wh.png) no-repeat center / cover;}
#header.all_nav_open .h_inner .open_nav_btn span{background-color: #FFF;}
#header .h_inner .open_nav_btn.active span.bar1{ top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
#header .h_inner .open_nav_btn.active span.bar2{width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);}
#header .h_inner .open_nav_btn.active span.bar3{opacity: 0;}




/* open_nav */
.open_nav{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); z-index: 9989;}
.open_nav .nav_wrap{position: absolute; bottom: 0; width: 100%; height: calc(100% - 100px); left: 0; z-index: 5; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding-bottom: 100px;}
.open_nav .nav_wrap nav{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.open_nav .nav_wrap .dep1{display: flex; column-gap: 140px; }
.open_nav .nav_wrap .dep1>li>a{position: relative; font-size: 36px; font-weight: 600; color: #FFF; display: block; transition-duration: 0.3s; margin-bottom: 60px; line-height: 1em;}
.open_nav .nav_wrap .dep1>li>a::before{content:''; display: block; position: absolute; left: 0; opacity: 0; top: -20px; width: 12px; height: 12px; border-radius: 12px; background-color: #2089EF; transition-duration: 0.3s;}
.open_nav .nav_wrap .dep2>li{transition-duration: 0.3s; opacity: 1; margin-bottom: 30px;}
.open_nav .nav_wrap .dep2>li:last-child{margin-bottom: 0;}
.open_nav .nav_wrap .dep2>li>a{font-size: 24px; font-weight: 600; color: #FFF; transition-duration: 0.3s; line-height: 1em;}
.open_nav .nav_wrap .dep3{display: flex; column-gap: 25px; margin-top: 25px;}
.open_nav .nav_wrap .dep3>li{transition-duration: 0.3s; opacity: 1;}
.open_nav .nav_wrap .dep3>li>a{font-size: 20px; font-weight: 400; color: #FFF; transition-duration: 0.3s; line-height: 1em;}

.open_nav .nav_wrap .dep1>li:hover>a::before,
.open_nav .nav_wrap .dep1>li.mouse-in>a::before{opacity: 1; top: -30px;}
.open_nav .nav_wrap .dep2>li.mouse-in{opacity: 1;}
.open_nav .nav_wrap .dep2>li.mouse-out{opacity: 0.5;}
.open_nav .nav_wrap .dep3>li.mouse-in{opacity: 1;}
.open_nav .nav_wrap .dep3>li.mouse-out{opacity: 0.5;}






/* footer */
#footer{position: relative; background-color: #000; color: #FFF; padding: 80px 0;}
#footer .footer_inner{position: relative; width: calc(100% - 160px); margin: 0 auto; display: flex; justify-content: space-between; font-style: normal;}
#footer .footer_inner .left_wrap p.f_txt{font-size: 20px; font-weight: 700; color: #FFF; line-height: 1.2em;}
#footer .footer_inner .left_wrap h1>a{display: block; width: 160px;}
#footer .footer_inner .left_wrap h1>a>img{width: 100%;}
#footer .footer_inner .left_wrap .con_wrap{display: flex;  column-gap: 80px;}
#footer .footer_inner .left_wrap .con_wrap .policy_list{display: flex; column-gap: 30px; padding-top: 9px;}
#footer .footer_inner .left_wrap .con_wrap .policy_list>li>a{font-size: 16px; font-weight: 600; color: #FFF; line-height: 1em;}
#footer .footer_inner .left_wrap .con_wrap .policy_list>li:nth-child(2)>a{color: #aaa;}
#footer .footer_inner .left_wrap .con_wrap address{display: flex; flex-wrap: wrap; column-gap: 16px; line-height: 1.8em; font-style: normal; width: 850px;}
#footer .footer_inner .left_wrap .con_wrap address dl{display: flex; column-gap: 4px; font-size: 16px; font-weight: 500; color: #FFF;}
#footer .footer_inner .left_wrap .con_wrap address dl dd{color: #aaa;}
#footer .footer_inner .left_wrap .con_wrap p.copy{color: #aaa; font-weight: 400; font-size: 16px; line-height: 1.2em;}
#footer .footer_inner .scroll_top_btn{width: 65px; height: 68px; border: 1px solid #FFF; display: flex; justify-content: center; align-items: center;}
#footer .footer_inner .scroll_top_btn>i{color: #FFF; font-size: 18px;}








@media screen and (max-width: 1920px){
  #header .h_inner .dep1>li>a{font-size: 18px;}
  #header .h_inner .dep2>li>a{font-size: 16px;}

  #header .h_inner .dep1>li:nth-child(1) .dep2_wrap{left: -59px;}
  #header .h_inner .dep1>li:nth-child(2) .dep2_wrap{left: -66px;}
  #header .h_inner .dep1>li:nth-child(3) .dep2_wrap{left: -62px;}
  #header .h_inner .dep1>li:nth-child(4) .dep2_wrap{left: -76px;}
  #header .h_inner .dep1>li:nth-child(5) .dep2_wrap{left: -76px;}
  #header .h_inner .dep1>li:nth-child(6) .dep2_wrap{left: -66px;}
}








@media screen and (max-width: 1440px){
  .open_nav .nav_wrap .dep1{column-gap: 100px;}

}







@media screen and (max-width: 1280px){
  #header{padding: 0 20px;}
  #header .h_inner .dep1{column-gap: 60px;}

  .open_nav .nav_wrap .dep1{column-gap: 40px;}

  #footer .footer_inner .left_wrap{width: calc(100% - 65px);}
  #footer .footer_inner .left_wrap .con_wrap{flex-wrap: wrap;row-gap: 50px;}
  #footer .footer_inner .left_wrap .con_wrap .policy_list{padding: 0;}
  #footer .footer_inner .left_wrap .con_wrap .address_wrap{width: 100%;}
  #footer .footer_inner .left_wrap .con_wrap address{flex-direction: column;width: 100%;}

}









@media screen and (max-width: 1024px){
  #header .h_inner nav{display: none !important;}
  
  .open_nav .nav_wrap nav{width: 96%; height: 100%;}
  .open_nav .nav_wrap{overflow-y: auto; width: 100%;}
  .open_nav .nav_wrap .dep1{flex-direction: column; row-gap: 50px;}
  .open_nav .nav_wrap .dep1>li{display: flex; align-items: center;}
  .open_nav .nav_wrap .dep1>li>a{display: block; margin-bottom: 0; width: 240px;}
  .open_nav .nav_wrap .dep1>li>a::before{opacity: 1; }
  .open_nav .nav_wrap .dep2_wrap{width: calc(100% - 240px);}
  .open_nav .nav_wrap .dep2{display: flex; column-gap: 30px;}
  .open_nav .nav_wrap .dep2>li{margin: 0; display: flex; align-items: flex-end; column-gap: 10px;}
  .open_nav .nav_wrap .dep3{margin: 0}


}











@media screen and (max-width: 768px){
  .open_nav{background-color: #000;}
  .open_nav .nav_wrap{padding-bottom: 0;}
  .open_nav .nav_wrap .dep1{row-gap: 0px; border-top: 1px solid #FFF; box-sizing: border-box;  width: 100%; padding-top: 240px;}
  .open_nav.sub_open_nav .nav_wrap .dep1{border-top: 0;}
  .open_nav .nav_wrap .dep1>li{flex-direction: column; align-items: flex-start; row-gap: 30px; border-bottom: 1px solid #FFF; padding: 0 20px; padding-bottom: 30px; margin-bottom: 30px;}
  .open_nav .nav_wrap .dep1>li:first-child{padding-top: 30px;}
  .open_nav .nav_wrap .dep1>li:last-child{margin-bottom: 0;}
  .open_nav .nav_wrap .dep1>li>a{font-size: 30px; line-height: 1em; width: 100%;}
  .open_nav .nav_wrap .dep1>li>a::before{width: 8px; height: 8px; left: 0; top: -10px;}
  .open_nav .nav_wrap .dep1>li:hover>a::before,
  .open_nav .nav_wrap .dep1>li.mouse-in>a::before{top: -10px;}

  .open_nav .nav_wrap .dep2_wrap{width: 100%;}
  .open_nav .nav_wrap .dep2>li{display: block;}
  .open_nav .nav_wrap .dep2>li>a{font-size: 20px; line-height: 1em;}
  .open_nav .nav_wrap .dep3_wrap{margin-top: 10px;}
  .open_nav .nav_wrap .dep3>li>a{font-size: 16px; line-height: 1em;}

  #footer .footer_inner{width: 90%;}
  #footer .footer_inner .left_wrap{width: 100%;}
  #footer .footer_inner .left_wrap p.f_txt{font-size: 18px; text-align: center;}
  #footer .footer_inner .left_wrap .con_wrap{row-gap: 20px; justify-content: center;}
  #footer .footer_inner .left_wrap .con_wrap .policy_list{justify-content: center;}
  #footer .footer_inner .left_wrap .con_wrap address{row-gap: 20px; margin-top: 50px;}
  #footer .footer_inner .left_wrap .con_wrap address dl{justify-content: center; align-items: center; flex-direction: column; row-gap: 5px;}
  #footer .footer_inner .scroll_top_btn{position: absolute; top: -60px; right: 0; width: 40px; height: 40px;}
  #footer .footer_inner .left_wrap .con_wrap address dl dd{text-align: center;}

  #footer .footer_inner .left_wrap .con_wrap p.copy{text-align: center; margin-top: 50px;}

}






@media screen and (max-width: 500px){
  #header{height: 60px;}
  #header .h_inner h1>a{width: 160px; height: 31px;}

  .open_nav .nav_wrap{height: calc(100% - 60px); align-items: flex-start;}
  .open_nav .nav_wrap .dep1{padding-top: 0; flex-wrap: wrap;}
  .open_nav .nav_wrap .dep1>li{row-gap: 20px; position: relative;}
  .open_nav .nav_wrap .dep1>li>a{font-size: 20px;}
  .open_nav .nav_wrap .dep1>li>a::before{width: 6px; height: 6px; }
  .open_nav .nav_wrap .dep2>li{position: relative;}
  .open_nav .nav_wrap .dep2>li>a{font-size: 16px;}
 
  .open_nav .nav_wrap .dep3>li>a{font-size: 14px;}
  

  #footer{padding-bottom: 30px;}
  #footer .footer_inner .left_wrap p.f_txt{font-size: 16px; line-height: 1.6em; margin-bottom: 20px;}
  #footer .footer_inner .left_wrap .con_wrap{row-gap: 20px;}
  #footer .footer_inner .left_wrap .con_wrap .policy_list{justify-content: center; column-gap: 15px;}
  #footer .footer_inner .left_wrap .con_wrap .policy_list>li>a{font-size: 14px;}
  #footer .footer_inner .left_wrap .con_wrap address{row-gap: 10px; margin-top: 30px;}
  #footer .footer_inner .left_wrap .con_wrap address dl{font-size: 14px; row-gap: 2px;}
  #footer .footer_inner .left_wrap .con_wrap p.copy{font-size: 14px; line-height: 1.6em; margin-top: 30px;}
}




