

/* PC */
@media screen and (min-width: 1201px) {

/* mgnb */
.mgnb{display: none;}
.mgnb{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 999; border-top: 40px solid #06793e;}
.mgnb .mgnb_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 90vh; width: 1000px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
.mgnb .mgnb_wrap>ul{position: relative;  height: 250px; width: 1000px; display: flex; justify-content: space-between;}
.mgnb .mgnb_wrap>ul>li{width: 150px; opacity: 0; position: relative; top: -50px;}
.mgnb .mgnb_wrap>ul>li>a{position: relative; display: block; text-align: center; line-height: 50px; font-size: 24px; color: #313131; font-weight: bold; transition-duration: 0.5s; overflow: hidden;}
.mgnb .mgnb_wrap>ul>li>a::before{content: ""; display: block; position: absolute; width: 100%; height: 4px; background-color: #ccc; left: 0; bottom: 2px; transition-duration: 0.5s;}
.mgnb .mgnb_wrap>ul>li>a::after{content: ""; display: block; position: absolute; width: 0%; height: 4px; background-color: #06793e; left: 0; bottom: 2px; transition-duration: 0.5s;}
.mgnb .mgnb_wrap>ul>li>.sub_menu{display: none;}
.mgnb .mgnb_wrap>ul>li>.sub_menu a{display: block; text-align: center; color: #313131; line-height: 40px; font-size: 16px; position: relative;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok{color: #06793e; font-weight: bold;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok::after{content: ""; display: block; position: absolute; width: 0px; height: 0px; border-radius: 100%; left: 0; background-color: #06793e; top: 50%; transform: translateY(-50%); transition-duration: 0.2s;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li:hover a.link_ok::after{width: 10px; height: 10px;}
  /* hover */
.mgnb .mgnb_wrap>ul>li:hover>a{color: #06793e; font-size: 26px;}
.mgnb .mgnb_wrap>ul>li:hover>a::after{width: 100%;}

.gnb_close{position: relative;  width: 60px; height: 60px; background: none; border: none; margin-bottom: 100px;}
.gnb_close span{position: absolute; width: 50px; height: 4px; display: block; background-color: #06793e; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); transition-duration: 0.5s;}
.gnb_close span:last-child{transform: translate(-50%, -50%) rotate(0);}

/* 헤더 스크롤 발생 */
  #header.change{background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
  #header.change h1 img{content: url(../img/logo_color.png);}
  #header.change .menu_btn span{background-color: #313131;}
  #header.change nav>ul li a{color: #313131;}
  #header.change .util ul li:first-child img{content: url(../img/icon_my_color.png);}
  #header.change .util ul li:last-child img{content: url(../img/icon_search_color.png);}

  /* 헤더 영역에 마우스 들어옴 */
  #header.enter{ background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
  #header.enter h1 img{content: url(../img/logo_color.png);}
  #header.enter .menu_btn span{background-color: #313131;}
  #header.enter nav>ul li a{color: #313131;}
  #header.enter .util ul li:first-child img{content: url(../img/icon_my_color.png);}
  #header.enter .util ul li:last-child img{content: url(../img/icon_search_color.png);}

/* 헤더 */
  #header{position: fixed; width: 100%; height: 100px; left: 0; top: 0; z-index: 999; transition-duration: 0.5s;}
  
  /*헤더 메뉴버튼*/
  #header .menu_btn{position: absolute; width: 30px; height: 24px; top: 38px; left: 60px; background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition-duration: 0.5s;}
  #header .menu_btn span{position: relative; width: 100%; height: 2px; background-color: #fff; display: block;}
  /* 헤더 로고+gnb 위치 */
  #header .header_wrap{position: relative; margin: 0 auto; height: 100px; max-width: 1200px;  width: 70%;}
  /* 헤더 로고 */
  #header h1{position: absolute;left: 50%; transform: translateX(-50%); height: 60px; top: 20px; transition-duration: 0.5s;}
  #header h1 img{height: 60px;}
  /* 헤더 gnb */
  #header nav{position: absolute;}
  #header nav>ul{display: flex;}
  
  #header nav>ul li a{width: 120px; text-align: center; line-height: 100px; height: 100px; font-weight: bold; color: #fff;}

  #header .gnb_left{left: 0;}
  #header .gnb_right{right: 0;}
  /* 헤더 util */
  #header .util{position: absolute; top: 35px; right: 60px; transition-duration: 0.5s;}
  #header .util ul{display: flex;}
  #header .util ul li{width: 30px; margin-right: 20px;}
  #header .util ul li:last-child{margin-right: 0;}
  #header .util ul li img{width: 100%;}
  
/* 서브메뉴 */
  .sub_menu_wrap{position: fixed; width: 100%; height: 180px; background-color: #fff; top: 100px; z-index: 998; display: flex; flex-direction: column;align-items: center; justify-content: center; border-bottom: 1px solid #eee; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); display: none;}
  .sub_menu_wrap .sub_menu_inner{position: relative; max-width: 1200px; width: 70%; margin: auto; display: flex; justify-content: space-between;}
  .sub_menu_wrap .sub_menu_inner>div{position: relative; display: flex;}

  .sub_menu_wrap .sub_menu_inner .sub_menu li{position: relative; width: 120px;}
  .sub_menu_wrap .sub_menu_inner .sub_menu li a::after{content: ""; display: block; position: absolute; bottom: 2px; left: 50%; transform:translateX(-50%); width: 0; height: 2px; background-color: #06793e; transition-duration: 0.5s; border-radius: 2px;}
  .sub_menu_wrap .sub_menu_inner .sub_menu li a.link_ok:hover::after{width: 80%;}
  .sub_menu_wrap .sub_menu_inner .sub_menu li a{line-height: 30px; text-align: center; font-size: 0.9em;}
  .sub_menu_wrap .sub_menu_inner .sub_menu li a.link_ok{color: #06793e; font-weight: bold;}

/*  */
/* footer */
/*  */
#footer{position: relative; background-color: #313131;}
#footer p{color: #ccc; font-size: 0.9em; line-height: 1.6em;}

/* line1 */
#footer .fnb{position: relative; width: 100%; padding: 20px 0; background-color: #06793e;}
#footer .fnb ul{display: flex; justify-content: center;}
#footer .fnb ul li{margin-right: 30px;}
#footer .fnb ul li:last-child{margin-right: 0;}
#footer .fnb ul li a{position: relative; color: #ccc; text-align: center; font-size: 0.9em;}
#footer .fnb ul li a::after{content: ""; display: block; position: absolute; width: 2px; height: 80%; right: -17px; background-color: #aaa; top: 50%; transform: translateY(-50%);}
#footer .fnb ul li:last-child a::after{display: none;}

/* line2 */
#footer .footer_mid{position: relative; width: 92%; max-width: 1600px; display: flex; margin: 40px auto; justify-content: space-between;}
#footer .footer_mid h1{width: 100px; margin-right: 40px;}
#footer .footer_mid h1 img{width: 100%;}
#footer .footer_mid>div{display: flex; width: 49%; align-items: center;}
#footer .footer_mid>div address{color: #ccc; font-style: normal; font-size: 0.9em; line-height: 1.6em;}
#footer .footer_mid>div:last-child>div>p:first-child{ padding: 8 10px; border: 1px solid #06793e; text-align: center; border-radius: 17px;}
#footer .footer_mid>div:last-child>div{margin-right: 40px;}

#footer>p:last-child{text-align: center; padding: 20px 0;}
}











/* Tablet 가로 */
@media screen and (min-width: 801px) and (max-width: 1200px){
/* mgnb */
.mgnb{display: none;}
.mgnb{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 999; border-top: 40px solid #06793e;}
.mgnb .mgnb_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 90vh; width: 700px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
.mgnb .mgnb_wrap>ul{position: relative; width: 700px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.mgnb .mgnb_wrap>ul>li{width: 33.333%; opacity: 0; position: relative; top: -50px; padding: 0 4%; box-sizing: border-box; margin-bottom: 20px;}
.mgnb .mgnb_wrap>ul>li>a{position: relative; display: block; text-align: center; line-height: 50px; font-size: 20px; color: #313131; font-weight: bold; transition-duration: 0.5s; overflow: hidden;}
.mgnb .mgnb_wrap>ul>li>a::before{content: ""; display: block; position: absolute; width: 100%; height: 4px; background-color: #ccc; left: 0; bottom: 2px; transition-duration: 0.5s;}
.mgnb .mgnb_wrap>ul>li>a::after{content: ""; display: block; position: absolute; width: 0%; height: 4px; background-color: #06793e; left: 0; bottom: 2px; transition-duration: 0.5s;}

.mgnb .mgnb_wrap>ul>li>.sub_menu a{display: block; text-align: center; color: #313131; line-height: 40px; font-size: 15px; position: relative;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok{color: #06793e; font-weight: bold;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok::after{content: ""; display: block; position: absolute; width: 0px; height: 0px; border-radius: 100%; left: 0; background-color: #06793e; top: 50%; transform: translateY(-50%); transition-duration: 0.2s;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li:hover a.link_ok::after{width: 10px; height: 10px;}
  /* hover */
.mgnb .mgnb_wrap>ul>li:hover>a{color: #06793e; font-size: 22px;}
.mgnb .mgnb_wrap>ul>li:hover>a::after{width: 100%;}

.gnb_close{position: relative;  width: 60px; height: 60px; background: none; border: none; margin-bottom: 80px;}
.gnb_close span{position: absolute; width: 50px; height: 4px; display: block; background-color: #06793e; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); transition-duration: 0.5s;}
.gnb_close span:last-child{transform: translate(-50%, -50%) rotate(0);}

/* 헤더 스크롤 발생 */
#header.change{background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#header.change h1 img{content: url(../img/logo_color.png);}
#header.change .menu_btn span{background-color: #313131;}
#header.change .util ul li:first-child img{content: url(../img/icon_my_color.png);}
#header.change .util ul li:last-child img{content: url(../img/icon_search_color.png);}

/* 헤더 영역에 마우스 들어옴 */
#header.enter{ background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#header.enter h1 img{content: url(../img/logo_color.png);}
#header.enter .menu_btn span{background-color: #313131;}
#header.enter .util ul li:first-child img{content: url(../img/icon_my_color.png);}
#header.enter .util ul li:last-child img{content: url(../img/icon_search_color.png);}

/* 헤더 */
#header{position: fixed; width: 100%; height: 80px; left: 0; top: 0; z-index: 999; transition-duration: 0.5s;}
  
/*헤더 메뉴버튼*/
#header .menu_btn{position: absolute; width: 30px; height: 24px; top: 28px; left: 60px; background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition-duration: 0.5s;}
#header .menu_btn span{position: relative; width: 100%; height: 2px; background-color: #fff; display: block;}
/* 헤더 로고+gnb 위치 */
#header .header_wrap{position: relative; margin: 0 auto; height: 80px; width: 50%;}
/* 헤더 로고 */
#header h1{position: absolute; left: 50%; transform: translateX(-50%); height: 60px; top: 10px; transition-duration: 0.5s;}
#header h1 img{height: 60px; transition-duration: 0.5s;}
/* 헤더 gnb */
#header nav{position: absolute;}
#header nav>ul{display: flex;}

#header nav>ul li a{width: 120px; text-align: center; line-height: 20px; height: 20px; font-weight: bold; color: #fff;}

#header .gnb_left{display: none;}
#header .gnb_right{display: none;}
/* 헤더 util */
#header .util{position: absolute; top: 25px; right: 60px; transition-duration: 0.5s;}
#header .util ul{display: flex;}
#header .util ul li{width: 30px; margin-right: 20px;}
#header .util ul li:last-child{margin-right: 0;}
#header .util ul li img{width: 100%;}

/* 서브메뉴 */
.sub_menu_wrap{display: none;}


/*  */
/* footer */
/*  */
#footer{position: relative; background-color: #313131;}
#footer p{color: #ccc; font-size: 0.9em; line-height: 1.6em;}

/* line1 */
#footer .fnb{position: relative; width: 100%; padding: 20px 0; background-color: #06793e;}
#footer .fnb ul{display: flex; justify-content: center;}
#footer .fnb ul li{margin-right: 30px;}
#footer .fnb ul li:last-child{margin-right: 0;}
#footer .fnb ul li a{position: relative; color: #ccc; text-align: center; font-size: 0.9em;}
#footer .fnb ul li a::after{content: ""; display: block; position: absolute; width: 2px; height: 80%; right: -17px; background-color: #aaa; top: 50%; transform: translateY(-50%);}
#footer .fnb ul li:last-child a::after{display: none;}

/* line2 */
#footer .footer_mid{position: relative; width: 92%; max-width: 1600px; display: flex; margin: 40px auto; justify-content: space-between; align-items: center;}
#footer .footer_mid h1{width: 100px; margin-bottom: 20px;}
#footer .footer_mid h1 img{width: 100%;}
#footer .footer_mid>div:first-child{width: 59%;}
#footer .footer_mid>div:last-child{width: 39%;}
#footer .footer_mid>div address{color: #ccc; font-style: normal; font-size: 0.9em; line-height: 1.6em;}

/* 고객센터 */
#footer .footer_mid>div:last-child>div{text-align: center; margin-bottom: 20px;}
#footer .footer_mid>div:last-child>div>p:first-child{ padding: 8 0px; margin: 0 40px; border: 1px solid #06793e; text-align: center; border-radius: 17px; margin-bottom: 10px; box-sizing: border-box;}
#footer .footer_mid>div:last-child>div>p:last-child{font-size: 1.1em;}


#footer>p:last-child{text-align: center; padding: 20px 0;}
}





/* Tablet 세로 */
@media screen and (min-width: 601px) and (max-width: 800px){
  .mgnb{display: none;}
  .mgnb{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 999; border-top: 40px solid #06793e;}
  .mgnb .mgnb_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 90vh; width: 540px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
  .mgnb .mgnb_wrap>ul{position: relative; width: 540px; display: flex; justify-content: space-between; flex-wrap: wrap;}
  .mgnb .mgnb_wrap>ul>li{width: 33.333%; opacity: 0; position: relative; top: -50px; padding: 0 4%; box-sizing: border-box; margin-bottom: 20px;}
  .mgnb .mgnb_wrap>ul>li>a{position: relative; display: block; text-align: center; line-height: 50px; font-size: 20px; color: #313131; font-weight: bold; transition-duration: 0.5s; overflow: hidden;}
  .mgnb .mgnb_wrap>ul>li>a::before{content: ""; display: block; position: absolute; width: 100%; height: 4px; background-color: #ccc; left: 0; bottom: 2px; transition-duration: 0.5s;}
  .mgnb .mgnb_wrap>ul>li>a::after{content: ""; display: block; position: absolute; width: 0%; height: 4px; background-color: #06793e; left: 0; bottom: 2px; transition-duration: 0.5s;}
  
  .mgnb .mgnb_wrap>ul>li>.sub_menu a{display: block; text-align: center; color: #313131; line-height: 36px; font-size: 15px; position: relative;}
  .mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok{color: #06793e; font-weight: bold;}
  .mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok::after{content: ""; display: block; position: absolute; width: 0px; height: 0px; border-radius: 100%; left: 0; background-color: #06793e; top: 50%; transform: translateY(-50%); transition-duration: 0.2s;}
  .mgnb .mgnb_wrap>ul>li>.sub_menu li:hover a.link_ok::after{width: 10px; height: 10px;}
    /* hover */
  .mgnb .mgnb_wrap>ul>li:hover>a{color: #06793e; font-size: 22px;}
  .mgnb .mgnb_wrap>ul>li:hover>a::after{width: 100%;}
  
  .gnb_close{position: relative;  width: 40px; height: 40px; background: none; border: none; margin-bottom: 60px;}
  .gnb_close span{position: absolute; width: 40px; height: 4px; display: block; background-color: #06793e; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); transition-duration: 0.5s;}
  .gnb_close span:last-child{transform: translate(-50%, -50%) rotate(0);}

/* 헤더 스크롤 발생 */
#header.change{background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#header.change h1 img{content: url(../img/logo_color.png);}
#header.change .menu_btn span{background-color: #313131;}
#header.change .util ul li:first-child img{content: url(../img/icon_my_color.png);}
#header.change .util ul li:last-child img{content: url(../img/icon_search_color.png);}

/* 헤더 영역에 마우스 들어옴 */
#header.enter{ background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#header.enter h1 img{content: url(../img/logo_color.png);}
#header.enter .menu_btn span{background-color: #313131;}
#header.enter .util ul li:first-child img{content: url(../img/icon_my_color.png);}
#header.enter .util ul li:last-child img{content: url(../img/icon_search_color.png);}
/* 헤더 */
#header{position: fixed; width: 100%; height: 60px; left: 0; top: 0; z-index: 999; transition-duration: 0.5s;}
  
/*헤더 메뉴버튼*/
#header .menu_btn{position: absolute; width: 28px; height: 20px; top: 20px; left: 30px; background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition-duration: 0.5s;}
#header .menu_btn span{position: relative; width: 100%; height: 2px; background-color: #fff; display: block;}
/* 헤더 로고+gnb 위치 */
#header .header_wrap{position: relative; margin: 0 auto; height: 60px;   width: 50%;}
/* 헤더 로고 */
#header h1{position: relative; margin: 0 auto; width: 85px; height: 40px; padding-top: 10px; transition-duration: 0.5s;}
#header h1 img{height: 40px; transition-duration: 0.5s;}
/* 헤더 gnb */
#header nav{position: absolute;}
#header nav>ul{display: flex;}

#header nav>ul li a{width: 120px; text-align: center; line-height: 20px; height: 20px; font-weight: bold; color: #fff;}

#header .gnb_left{display: none;}
#header .gnb_right{display: none;}
/* 헤더 util */
#header .util{position: absolute; top: 15px; right: 30px; transition-duration: 0.5s;}
#header .util ul{display: flex;}
#header .util ul li{width: 30px; margin-right: 20px;}
#header .util ul li:last-child{margin-right: 0;}
#header .util ul li img{width: 100%;}

/* 서브메뉴 */
.sub_menu_wrap{display: none;}


/*  */
/* footer */
/*  */
#footer{position: relative; background-color: #313131;}
#footer p{color: #ccc; font-size: 0.8em; line-height: 1.6em;}

/* line1 */
#footer .fnb{position: relative; width: 100%; padding: 15px 0; background-color: #06793e;}
#footer .fnb ul{display: flex; justify-content: center;}
#footer .fnb ul li{margin-right: 30px;}
#footer .fnb ul li:last-child{margin-right: 0;}
#footer .fnb ul li a{position: relative; color: #ccc; text-align: center; font-size: 0.9em;}
#footer .fnb ul li a::after{content: ""; display: block; position: absolute; width: 2px; height: 80%; right: -17px; background-color: #aaa; top: 50%; transform: translateY(-50%);}
#footer .fnb ul li:last-child a::after{display: none;}

/* line2 */
#footer .footer_mid{position: relative; width: 92%; display: flex; flex-direction: column; margin: 20px auto; justify-content: center; align-items: center; text-align: center;}
#footer .footer_mid h1{width: 100px; margin: 20px auto;}
#footer .footer_mid h1 img{width: 100%;}
#footer .footer_mid>div{width: 100%;}
#footer .footer_mid>div:first-child{margin-bottom: 30px;}
#footer .footer_mid>div address{color: #ccc; font-style: normal; font-size: 0.8em; line-height: 1.6em;}

/* 고객센터 */
#footer .footer_mid>div:last-child>div{text-align: center; margin-bottom: 20px;}
#footer .footer_mid>div:last-child>div>p:first-child{font-size: 1em; padding: 8 0px; margin: 0 100px; border: 1px solid #06793e; text-align: center; border-radius: 17px; margin-bottom: 10px; box-sizing: border-box;}
#footer .footer_mid>div:last-child>div>p:last-child{font-size: 1.1em;}


#footer>p:last-child{text-align: center; padding: 20px 0;}
}





/* Mobile */
@media screen and (max-width: 600px) {
/* .mgnb{display: none;} */
.mgnb{display: none;}
.mgnb{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 999; border-top: 20px solid #06793e;}
.mgnb .mgnb_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 90vh; width: 320px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
.mgnb .mgnb_wrap>ul{position: relative; width: 320px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.mgnb .mgnb_wrap>ul>li{width: 50%; opacity: 0; position: relative; top: -50px; padding: 0 4%; box-sizing: border-box; margin-bottom: 10px;}
.mgnb .mgnb_wrap>ul>li>a{position: relative; display: block; text-align: center; line-height: 40px; font-size: 18px; color: #313131; font-weight: bold; transition-duration: 0.5s; overflow: hidden;}
.mgnb .mgnb_wrap>ul>li>a::before{content: ""; display: block; position: absolute; width: 100%; height: 4px; background-color: #ccc; left: 0; bottom: 2px; transition-duration: 0.5s;}
.mgnb .mgnb_wrap>ul>li>a::after{content: ""; display: block; position: absolute; width: 0%; height: 4px; background-color: #06793e; left: 0; bottom: 2px; transition-duration: 0.5s;}

.mgnb .mgnb_wrap>ul>li>.sub_menu a{display: block; text-align: center; color: #313131; line-height: 30px; font-size: 13px; position: relative;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok{color: #06793e; font-weight: bold;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li a.link_ok::after{content: ""; display: block; position: absolute; width: 0px; height: 0px; border-radius: 100%; left: 0; background-color: #06793e; top: 50%; transform: translateY(-50%); transition-duration: 0.2s;}
.mgnb .mgnb_wrap>ul>li>.sub_menu li:hover a.link_ok::after{width: 10px; height: 10px;}
  /* hover */
.mgnb .mgnb_wrap>ul>li:hover>a{color: #06793e;}
.mgnb .mgnb_wrap>ul>li:hover>a::after{width: 100%;}

.gnb_close{position: relative;  width: 30px; height: 30px; background: none; border: none; margin-bottom: 40px;}
.gnb_close span{position: absolute; width: 30px; height: 4px; display: block; background-color: #06793e; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); transition-duration: 0.5s;}
.gnb_close span:last-child{transform: translate(-50%, -50%) rotate(0);}

/* 헤더 스크롤 발생 */
#header.change{background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#header.change h1 img{content: url(../img/logo_color.png);}
#header.change .menu_btn span{background-color: #313131;}
#header.change .util ul li:first-child img{content: url(../img/icon_my_color.png);}
#header.change .util ul li:last-child img{content: url(../img/icon_search_color.png);}

/* 헤더 영역에 마우스 들어옴 */
#header.enter{ background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#header.enter h1 img{content: url(../img/logo_color.png);}
#header.enter .menu_btn span{background-color: #313131;}
#header.enter .util ul li:first-child img{content: url(../img/icon_my_color.png);}
#header.enter .util ul li:last-child img{content: url(../img/icon_search_color.png);}
/* 헤더 */
#header{position: fixed; width: 100%; height: 50px; left: 0; top: 0; z-index: 999; transition-duration: 0.5s;}
  
/*헤더 메뉴버튼*/
#header .menu_btn{position: absolute; width: 25px; height: 20px; top: 15px; left: 24px; background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition-duration: 0.5s;}
#header .menu_btn span{position: relative; width: 100%; height: 2px; background-color: #fff; display: block;}
/* 헤더 로고+gnb 위치 */
#header .header_wrap{position: relative; margin: 0 auto; height: 50px; width: 30%;}
/* 헤더 로고 */
#header h1{position: relative; margin: 0 auto; width: 64px; height: 30px; padding-top: 10px; transition-duration: 0.5s;}
#header h1 img{height: 30px; transition-duration: 0.5s;}
/* 헤더 gnb */
#header nav{position: absolute;}
#header nav>ul{display: flex;}

#header nav>ul li a{width: 120px; text-align: center; line-height: 20px; height: 20px; font-weight: bold; color: #fff;}

#header .gnb_left{display: none;}
#header .gnb_right{display: none;}
/* 헤더 util */
#header .util{position: absolute; top: 13px; right: 24px; transition-duration: 0.5s;}
#header .util ul{display: flex;}
#header .util ul li{width: 24px; margin-right: 10px;}
#header .util ul li:last-child{margin-right: 0;}
#header .util ul li img{width: 100%;}

/* 서브메뉴 */
.sub_menu_wrap{display: none;}


/*  */
/* footer */
/*  */
#footer{position: relative; background-color: #313131;}
#footer p{color: #ccc; font-size: 0.76em; line-height: 1.6em;}

/* line1 */
#footer .fnb{position: relative; width: 100%; padding: 10px 0; background-color: #06793e;}
#footer .fnb ul{display: flex; justify-content: center;}
#footer .fnb ul li{margin-right: 20px;}
#footer .fnb ul li:last-child{margin-right: 0;}
#footer .fnb ul li a{position: relative; color: #ccc; text-align: center; font-size: 0.8em;}
#footer .fnb ul li a::after{content: ""; display: block; position: absolute; width: 2px; height: 80%; right: -12px; background-color: #aaa; top: 50%; transform: translateY(-50%);}
#footer .fnb ul li:last-child a::after{display: none;}

/* line2 */
#footer .footer_mid{position: relative; width: 92%; display: flex; flex-direction: column; margin: 20px auto; justify-content: center; align-items: center; text-align: center;}
#footer .footer_mid h1{width: 60px; margin: 10px auto;}
#footer .footer_mid h1 img{width: 100%;}
#footer .footer_mid>div{width: 100%;}
#footer .footer_mid>div:first-child{margin-bottom: 20px;}
#footer .footer_mid>div address{color: #ccc; font-style: normal; font-size: 0.76em; line-height: 1.6em; }

/* 고객센터 */
#footer .footer_mid>div:last-child>div{text-align: center; margin-bottom: 10px;}
#footer .footer_mid>div:last-child>div>p:first-child{font-size: 0.8em; padding: 8 0px; margin: 0 100px; border: 1px solid #06793e; text-align: center; border-radius: 17px; margin-bottom: 10px; box-sizing: border-box;}
#footer .footer_mid>div:last-child>div>p:last-child{font-size: 0.9em;}


#footer>p:last-child{text-align: center; padding-bottom: 20px;}
}