@charset "utf-8";
/* CSS Document */

body {}


@keyframes bg {
    from {background:url('../images/m_news.png')center center; -webkit-background-size: cover;
    background-size: cover;}
    33% {background:url('../images/m_news2.png')center center; -webkit-background-size: cover;
    background-size: cover;}
    66% {background:url('../images/m_news3.png')center center; -webkit-background-size: cover;
    background-size: cover;}
    to {background:url('../images/m_news.png')center center; -webkit-background-size: cover;
    background-size: cover;}   
}

@keyframes bg1 {
    from {background:url('../images/m_news1.png')center center; -webkit-background-size: cover;
    background-size: cover;}
    33% {background:url('../images/m_news1_2.png')center center; -webkit-background-size: cover;
    background-size: cover;}
    66% {background:url('../images/m_news1_3.png')center center; -webkit-background-size: cover;
    background-size: cover;}
    to {background:url('../images/m_news1.png')center center; -webkit-background-size: cover;
    background-size: cover;}   
} 


.mobile .v_bg {position: relative; width: 100%; height: 100vh;}
.mobile .v_bg:before, .mobile .v_bg:after{display: block; content:''; position: absolute; width: 96%; border: 7px solid #faf1e4; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
.mobile .v_bg:before {height: 83%; left: 0; top: 0; border-top-width: 0; border-left-width: 0;}
.mobile .v_bg:after {height: 71%; right: 0; bottom: 0; border-bottom-width: 0; border-right-width: 0;}
.mobile header {position: absolute; left: 0; top: 0; width: 100%; z-index: 1;}
h1 {display: table; width: 100%; height: 29vh;}
.mobile h1 div {display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center;}
h1 img {width: 40%;}
#btn_nav_open {display: block; position: absolute; left: 5%; top: 4.5vh; width: 8.5%;}
#btn_nav_open img {width: 100%;}

.mobile nav {position: fixed; left: -55%; top: 0; width: 55%; height: 100vh; background-color:rgba(90,87,87,0.95)}
.mobile #btn_nav_close {position: absolute; left: 10%; top: 5vh; width: 10%;}
.mobile #btn_nav_close img {width: 100%;}
nav div {width: 40%; margin: 5vh auto;}
nav div img {width: 100%;}
.mobile #gnb {float: right; width: 70%;}
.mobile #gnb li { padding-top: 30px; border-bottom: 2px solid #FFF;}
.mobile #gnb li a {display: block; width: 150px; height: 50px; text-indent: -9999em; background-image: url('../images/gnb.png'); -webkit-background-size: 100% 600%;
background-size: 100% 600%;}
.mobile #gnb li:nth-child(1) a {}
.mobile #gnb li:nth-child(2) a {background-position: 0 -50px;}
.mobile #gnb li:nth-child(3) a {background-position: 0 -100px;}
.mobile #gnb li:nth-child(4) a {background-position: 0 -150px;}
.mobile #gnb li:nth-child(5) a {background-position: 0 -200px;}
.mobile #gnb li:nth-child(6) a {background-position: 0 -250px;}

/*비주얼 영역*/
.mobile #visual_section {position: absolute; left: calc(4% + 7px); top: calc(29% + 7px); width: calc(92% - 14px); height: calc(54% - 14px);}
.mobile .visual {position: relative; width: 100%; height: 100%;}
.visual img {width: 100%;}
.visual div {position: absolute; }
.mobile .v_img {left: 12%; top: 57%; margin-top: -30%; width: 20%;}

.mobile .v_txt { bottom: 13%; width: 46%; height: 6%; left: calc(10% + 82px);}
.mobile .v_txt_v {width: 7%; right: 15%; top: 55%; margin-top: -23%;}
.mobile .v_txt_t {
     left: 2vh;
    width: 100%;    
}
.mobile .v_txt_p {
position: absolute; top: 1em; width: 100%;   
}

/*내용영역*/
.ehwa_title {background:url('../images/m_box_11_19.png') center center  no-repeat; width: 140px; height:100px; -webkit-background-size: cover;
background-size:  cover;
margin: 0 auto; padding-top: 40px; color: #5a5757;}
.ehwa_title {font-size: 1.1em; letter-spacing:0.1em; line-height: 1.5em; text-align: center;}
.ehwa_title span {letter-spacing: 0;}
.ehwa_title p strong{font-weight: bold;}
.ehwa_title p {padding:3.5px 0;}
.ehwa_news   {width: 100%; margin-top: 5em;}
    
.ehwa_news li:nth-child(1){float: left;  animation: bg 5s infinite;  width: 100vw; height:64.8vw ;}

.ehwa_news li:nth-child(2){float: right; animation: bg1 5s infinite; width: 100vw; height:64.8vw ;margin-top: 3em;}

.ehwa_news li a:nth-of-type(1) {position: relative; display: block; width: 100%; height: 100%; overflow: hidden;}

.ehwa_news li a div {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background-color: #000; color: #FFF; font:bold 1em 'BareunBatang'; text-align: center; padding: 7.5em 0;}
.ehwa_news li a:nth-of-type(1):hover img {transform:scale(1.1);}
.ehwa_news li a:nth-of-type(1):hover img {transition: transform 0.5s ease-in-out;}
.ehwa_news  li a:hover div {opacity: 0.7;}
.ehwa_news1, .ehwa_news2 {}
#ehwa_news_section{}
.ehwa_news p {text-align: center; padding:1em 0;}
.ch{font-family:'Nanum Gothic'; color: #5a5757; font-weight: 400;}
#ehwa_story{padding-top: 6em;position: relative; width:100%; color:#d99466; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 3.4px;
   
}
#ehwa_story_section{padding-top: 7em;}
#ehwa_story div {width: 50%; float: left;}
.ehwa_story_text{ padding-right: 2%; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
.ehwa_story_text p:last-of-type{
     text-align: right; letter-spacing: -0.1em;
    margin-bottom: 1.5em; font-size: 0.8em;
}
.ehwa_story_text p:first-of-type {
text-decoration:underline; font-size: 16px; line-height: 1.6em; text-align: right; margin-bottom: 53%;}
.ehwa_story_text span {color: #d99466;}
.ehwa_story_text  a {
    display: block; 
    position: absolute;
    right: 51%;
    bottom: 0;
    padding: 0.1em 1.5em;
   color: #d99466;
    border: 2px solid #d99466; 
    margin-left:2px; 
    text-align: center; 
    line-height:1.6em;
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-size: 13px;
    
    
}
.ehwa_story_text  a:hover{
    color: #fff;background-color: #d99466; }

.ehwa_story_text strong {font-size: 21px; color: #cc6600;}
.ehwa_story_img2{float: right; width:50%;}
.ehwa_story_img2 img {width: 100%;}
.ehwa_story_img1{display: none;} 
#ehwa_fermentation_section{padding-top: 6em;}
#ehwa_fermentation {width: 100%;height: 408px; color:#d99466; padding-top: 6em;position: relative; width:100%; color:#d99466; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 3.4px;
}

#ehwa_fermentation div {width: 50%; float: left; }

.ch {}
#ehwa_fermentation a {
    display: block; 
    position: absolute;
    left: 51%;
    bottom: 0;
    
    padding: 0.1em 1.5em;
    color: #d99466;
    border: 2px solid #d99466; 
    margin-left:2px; 
    text-align: center; 
    line-height:1.6em;
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-size: 13px;
    
}
#ehwa_fermentation span {color: #d99466;}
#ehwa_fermentation  a:hover{
    color: #fff;background-color: #d99466; }

.ehwa_fe_img1{float: left; width:50%; height: 310px; background:  url('../images/m_fe.jpg') center center no-repeat;
-webkit-background-size: cover;
background-size: cover;}
#ehwa_fermentation div:nth-of-type(1){float: left;}
#ehwa_fermentation div:nth-of-type(2){width: 48%;float: right; text-decoration:underline; font-size: 16px; line-height: 1.6em; text-align: left; margin-bottom: 5%;padding-left:2%;}
#ehwa_fermentation div:nth-of-type(2) strong{font-size: 21px; color: #cc6600;}
#ehwa_fermentation div:nth-of-type(3){width: 48%;float: right;text-align: left; letter-spacing: -0.1em;
    margin-bottom: 3em; margin-top: 5.5em; font-size: 0.8em;padding-left: 2%;}
#ehwa_fermentation div:nth-of-type(4){display: none;}



#creator_section {width: 100vw; height: 60vw; -webkit-background-size: cover;
background-size: cover; background-repeat: no-repeat; background-image: url('../images/shop_img1.png'); -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; background-position: 45% center;
    color: #fff;
    text-align: center;
    padding: 30px 0 0 0;
    margin-top: 6em;
    
}
#creator_section h2 { font-size: 1.5em; font-family:'Malgun Gothic';
    font-weight: bold;
    
    
    
}
.bar {display: inline-block; width:15px ;  border-top: 1px solid #fff;margin: 1.2em 0;}
#creator_section p { padding-bottom: 1.5em;
}
#creator_section .ch {
    color: #fff;
}
#creator_btn {
    display: block; 
    width: 8em;
    padding: 0.1em 1.5em;
    color: #fff;
    border: 1px solid #fff;      
    text-align: center; 
    line-height:1.8em;
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-size: 16px;
    margin-left: 25.5%;
   
    }
#creator_btn:hover{background-color: #fff; color: #000; border: 1px solid #fff;}

#ft_img {width: 100vw; height:58.33vw; -webkit-background-size: cover;
background-size: cover; background-repeat: no-repeat; background-image: url('../images/footer_img_1.png'); 
    color: #000;
    text-align: center;
    padding: 30px 0 0 0;
    margin-top: 6em;}

.ft_logo img {width: 35%; padding-bottom:20px ;}

#ft_img p { color: #9a9a9a;}
#ft_img dl {padding: 0 2%; margin: 0 auto; line-height: 1.5em;}  
#ft_img dl dt {float: left;}
#ft_img dl dd {float: left;}

/* 1024이상 해상도 PC */
@media all and (min-width:1024px) {
    .v_bg {} 
    .wrap {width: 1140px; margin: 0 auto;}
    main {width: 100%; height: 100%;}
    #sub_img {width: 100%; height: 1639px; margin: 0 auto; background-image: url('../images/sub_index2.jpg'); background-repeat: no-repeat; background-position: center center; text-indent: -9999em;}
    
    #btn_nav_open, #btn_nav_close, nav div {display: none;}
    h1 {display: block; width: 100%; height: 65px; padding-top: 85px; text-align: center;}
    h1 img {width: 165px;}
    #gnb {display: table; width: 80%; margin: 0 auto; margin-top: 50px;}
    #gnb li {display: table-cell; text-align: center;}
    #gnb li a {color: #897b6e;}
    #gnb li a:hover {color: #6a5139 !important;}
    
    #visual_section {position: absolute; top: 321px; left: 50%; margin-left: -546px;  width: 1093px; height: 726px;}
    .visual {width: 100%; height: 100%; position: relative;}
    .visual img {width:100%;}
    .v_img {width: 137px; left: 250px; top:123px;}
    .v_txt {width: 300px; left: 480px; top: 450px;}
    .v_txt_v {width: 45px; right: 250px; top: 149px;}
    .v_txt_t {position: absolute; right:-20px; top:20px}
    .v_txt_p {position: absolute; right:20px; top:57px; margin-right: -25px;}
 
  
.ehwa_news   {position: relative; width: 100%;height: 305px; 
background-size: cover;padding: 85px  0;}
    
.ehwa_news li:nth-child(1){float: left;  animation: bg 5s infinite; width: 556px; height:354px ;margin-top: 1px;}

.ehwa_news li:nth-child(2){float: right; animation: bg1 5s infinite;width: 556px; height:354px ; margin-top:1px}
    .ehwa_news li {display: block; width: 554px; }
    .ehwa_news li:nth-child(1){float:left;}
    .ehwa_news li:nth-child(2){float:right;}
  
    .ehwa_news li a div {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background-color: #000; color: #FFF; font:bold 1em 'BareunBatang'; text-align: center; padding: 11em 0;}
    
.ehwa_story_img1{display:block;float: left;}
    
#ehwa_fermentation{width: 100%;height: 650px;}
#ehwa_fermentation div:nth-of-type(1){float: left;}
#ehwa_fermentation div:nth-of-type(2){float: left;}
#ehwa_fermentation div:nth-of-type(3){float: right;}
#ehwa_fermentation div:nth-of-type(4){display: block;float: right;}
 #ehwa_story{padding-top: 6em;position: relative; width:100%; color:#cc6600; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 3.4px;
}
#ehwa_story div {width: 33%; float: left;}
.ehwa_story_text{ padding-right: 2%; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
.ehwa_story_text p:last-of-type{
     text-align: right; 
     font-size: 19px;
}
.ehwa_story_text p:first-of-type { line-height: 1.4;
text-decoration:underline; font-size: 18px;  text-align: right; margin-bottom: 87%; margin-top: 23px;}
.ehwa_story_text p:hover{ color: #e47608;}
.ehwa_story_text span {color: #cc6600;}
.ehwa_story_text span:hover{color: #e47608;}
.ehwa_story_text  a {
    display: block; 
    position: absolute;
    right: 36%;
    padding: 0.1em 1.5em;
   color: #cc6600;
    border: 2px solid #cc6600; 
    text-align: center; 
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-size: 18px;
    
}
.ehwa_story_text  a:hover{
    color: #fff;background-color: #ce6f11; }

.ehwa_story_text strong {font-size: 29px; color: #cc6600;}
.ehwa_story_text strong:hover{color: #e47608;}
.ehwa_story_img2{float: right; }
.ehwa_story_img2 img {width: 371px;}

.ehwa_story_img1{}
#ehwa_fermentation  a:hover{
    color: #fff;background-color: #ce6f11; }
.ehwa_title{margin-top: 4em;}    
#ehwa_fermentation{position: relative; margin-top: 7em; color: #cc6600;}    
.ehwa_fe_img1{position: absolute;left: 0;bottom: 0;width: 490px !important;height: 390px;}
.ehwa_fe_img2{position: absolute;right: 0;top: 0;width: 490px !important;height: 390px;background-image: url(../images/fe_right_37.png);-webkit-background-size: cover;
background-size: cover;}
#ehwa_fermentation div:nth-of-type(2){font-size: 18px; margin-bottom: 10px;}
#ehwa_fermentation div:nth-of-type(2) strong{font-size: 29px;}
#ehwa_fermentation div:nth-of-type(3){position: absolute;right: 0;bottom: 79px;text-align: right;font-size: 19px;}
#ehwa_fermentation div span { color: #cc6600;}
#ehwa_fermentation div strong:hover {color: #e47608;}
#ehwa_fermentation div span:hover {color: #e47608;}
#ehwa_fermentation div:nth-of-type(2):hover {color: #e47608;}
#ehwa_fermentation div:nth-of-type(3):hover {color: #e47608;}
#ehwa_fermentation_section  a {
    display: block; 
    position: absolute;
    width: 150px;
    left: 86.5%;
    bottom: 0;
    padding:0;
   color: #cc6600;
    border: 2px solid #cc6600; 
    text-align: center; 
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-size: 18px; 
    
}
 #creator_section { padding-right: 10px; 
     
    
}
#creator_section h2 { font-size: 16px;
    padding-top: 52px;
}
#creator_section p { line-height: 1.5em;
}
#creator_section .ch {
}
#creator_btn {
    display: block; 
    width: 160px;
    height: 50px;
    color: #fff;
    border: 1px solid #000; 
    text-align: center; 
    line-height:2.3em;
    font-family: 'Malgun Gothic';
    font-weight: bold;
    font-size: 20px;
    margin-left: 44.1%;
    border: 1px solid #fff;  
    font-family: 'Malgun Gothic';
    font-weight: bold;
       
}
    
 
#creator_section { width: 100%; height: 362px; 
margin: 0 auto;
margin-top: 14em;  
overflow: hidden;}
#creator_section:after{display: block; content: ''; background: url('../images/shop_img1.png') center center no-repeat;
-webkit-background-size: contain;
background-size: contain; }

#creator_section:hover {}
#creator_section:hover {opacity: 0.9;}
#creator_section  {transition: transform 0.5s ease-in-out;}
#creator_section  {transition: opacity 0.5s ease-in-out;}

    
    
#creator_section h2 { font-size: 1.9em; font-family:'Malgun Gothic';
      
       
}
.bar {display: inline-block; width:30px ;  border-top: 1px solid #fff;margin: 30px 0;}
#creator_section p { padding-bottom: 1.5em;
}
#creator_section .ch {
    color: #fff;
}

#creator_btn:hover {background-color: #fff; color: #000; border: 1px solid #fff;}    

    
#ft_img {width: 100%; height: 218px;   background-repeat: no-repeat; background-image: url('../images/footer_img_1.png'); 
    color: #000;
    text-align: center;
    padding: 15px 0 0 0;
    margin-top: 6em;}

.ft_logo img {width: 130px; padding-top:20px;}

#ft_img p { color: #9a9a9a; padding-top: 1em;} 
#ft_img dl {text-align: center;width: 590px; line-height: 1.5em;}    
#ft_img dl dt {float: left;}
#ft_img dl dd {float: left;}
#ft_img dt:nth-of-type(3) {padding-left: 4em}
#ft_img dt:nth-of-type(2) {padding-left: 0.5em}
#ft_img dt:nth-of-type(4) {padding-left: 0.5em}