@charset "utf-8";
/* 폰트, reset, header, footer 에 관한 css */

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/********* reset *********/
:root {
   --main-color: #e20413;
   --sub-color: #931215;
}
.inner_wrap{width: 1200px;height: 100%;margin: 0 auto;position: relative;font-size: 16px;line-height: 1.5;}
a{text-decoration:none; color: #333;}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}

/* 버튼 cm_btn */
/* cm_btn_html*/
/*
<button type="button" onclick="menu3();" class="cm_btn btn-style">
   <span>More View</span>
   <i class="fas fa-chevron-right" aria-hidden="true"></i>
</button>
 */
 .cm_btn{position:relative; border: solid 1px var(--main-color);padding: 15px 40px;font-size: 16px; background: transparent; overflow: hidden;}
 .cm_btn>span{position:relative; color:var(--main-color);}
 .cm_btn>i{position: relative;font-size: 13px; padding-left: 16px; color: var(--main-color);;}
 /* btn hover */
 .btn-style::before {
    display: block;
    position: absolute;
    left: -130%;
    bottom: 0;
    content: "";
    width: 120%;
    height: 150%;
    background: var(--main-color);
    transform: skew(-20deg);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s
 }
 
 
 .btn-style:hover::before {
    left: -10%;
    opacity: 1.0;
    filter: Alpha(opacity=100);
    background: var(--main-color);
 }
 /* 자식선택자 전체가 color #fff 로 수정 */
 .cm_btn:hover *{
    color: #fff;
 }
 /* 애니메이션 */
/* .sub_visual_3{animation: bg-active 5s;} */
@keyframes bg-active {
	0% {
		transform: scale(1.09);
		opacity: 0.9;
	}
	100% {
		transform: scale(1);
		opacity: 1; 
	} 
}

 /* wrapper / cantainer_wr */
 .wrapper{
   width: 100%;
   margin-top: 80px;
 }

/********* header *********/
header#header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10000;
   height: 80px;
   box-shadow: 0 1px 8px 0px #c6c6c682;
   overflow: hidden;
   background: linear-gradient(white 80px, rgb(244 244 244) 80px, rgb(244 244 244));
}
#header .logo_txt{
   font-size: 20px;
    padding-right: 8px;
    display: inline-block;
    vertical-align: middle;
}
#header .gnb{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 80px;
  align-items: center;
  font-size: 17px;
}
#header .gnb .logo{
}
#header .gnb .logo a{}

#header .gnb .main_menu{
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
/* li */
#header .gnb .main_menu .gnb-1dep{
   width: 100%;
   height: 100%;
}
/* a */
#header .gnb .main_menu .gnb-1dep>a{display: block;height: 100%;line-height: 80px;
position: relative; transform: perspective(1px) translateZ(0); overflow: hidden;}

#header .gnb .main_menu .gnb-1dep:hover>a::before{left: 0; right: 0;}

#header .gnb .main_menu .gnb-1dep:hover>a {
   color: var(--main-color);
}
#header .gnb .main_menu .gnb-1dep>a::before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 51%;
   right: 51%;
   bottom: 0;
   background: var(--main-color);
   height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}


#header .gnb .main_menu .gnb-1dep .gnb-2dep{
   position: relative;
   z-index: 10;
   
}
#header .gnb .main_menu .gnb-1dep .gnb-2dep li{
    
}
#header .gnb .main_menu .gnb-1dep .gnb-2dep li a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px 0;
}

#header .gnb .hamberger {
   cursor: pointer;
}
/********* footer *********/
footer#footer{
   background: #444;
   color: #f4f4f4;
   font-size: 14px;
}
#footer .footer_priv{padding: 20px;text-align: center;border-bottom: 1px solid #ffffff7a;}
#footer .footer_priv a{
  color: #f4f4f4;}

#footer .footer_info{
   text-align: center;
   padding: 20px 0;
   font-weight: 300;
}
#footer .footer_info .txt_box{
    font-size: 14px;
}
#footer .footer_info .txt_box ul{
   margin: 0 auto;
}
#footer .footer_info .txt_box ul li{
   display: inline;
   padding: 2px 7px;
}
#footer .footer_info .txt_box ul li b{}
#footer .footer_info .txt_box ul li span{
   padding: 0 7px;
}

#footer .footer_info p{
   padding: 20px 0;
   font-size: 14px;
}
#footer .footer_info .footer_top_btn {
   color: #fff;
   background: unset;
   position: absolute;
   right: 0;
   top: 0;
}

#footer .footer_info .footer_top_btn i {
   padding-left: 5px;
   font-size: 15px;
}

/* left - menu */
.left_menu_wrap {width: 1200px;margin: 0 auto;position: relative;bottom: 34px;}

.left_menu_wrap .left_menu_ul {
   display: flex;
   justify-content: flex-start;
   font-size: 20px;
   text-align: center;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
}

.left_menu_wrap .left_menu_ul li {
   width: 100%;width: calc(100% / 6 - 10px);height: 54px;margin: 5px 5px;line-height: 54px;background: #eae9e9;
}
.left_menu_wrap .left_menu_ul li.on{
    background: var(--sub-color);
}
.left_menu_wrap .left_menu_ul li.on a {
   display: inline-block;
   width: 100%;
   height: 100%;
   color: #fff;
}

.left_menu_wrap .left_menu_ul li a {
   display: block;
   width: 100%;
   height: 100%;
}