body{padding-top:80px}
@media (max-width:900px){
body{padding-top:40px}   
}

.s_bn { background-color:#f0efed !important;width:100%; height:38vh;   display:inline-block;  display:flex;  align-items:center; justify-content:center; overflow:hidden; position:relative}
.s_bn  img.img {position:absolute; left:0; top:0;  height:100%}
section.s_bn div  {width:74.75%; text-align:center; margin:0 auto;  font-size:2.25rem; font-weight:500; z-index:999} 
section.s_bn div a img {width:50%; max-width:300px; margin-top:20px}

.s_bn {position:relative; background: url('/common/img/story_bn.jpg') no-repeat center; background-size:cover;}
.s_bn2 {position:relative; background: url('/common/img/product_bn.jpg') no-repeat center; background-size:cover;}
.s_bn3 {position:relative; background: url('/common/img/community_bn.jpg') no-repeat center; background-size:cover;}
.s_bn4 {position:relative; background: url('/common/img/class_bn.jpg') no-repeat center; background-size:cover;}
section.s_bn div  {width:74.75%;text-align:center; margin:0 auto;  font-size:3.25rem; font-weight:700;position:absolute ;left:13%; top:40%} 
@media (max-width:900px){
.s_bn {height:200px;}
section.s_bn div{ font-size:6vw;}
}
@media (max-width:500px){
.s_bn{height:170px;background-position: -220px 0}
section.s_bn div{ font-size:7vw;left:13%; top:45%}
}


#story .con1{width:100%;overflow:hidden}
#story .con1 .inner{padding:10.42% 0;  display: flex; justify-content: center;align-items: center;}
#story .con1 .left{width:55%;}
#story .con1 .right{width:43%;padding-left:2%}
#story .con1 .right h2{font-size:3.13vw; font-weight:400;color:#000;text-align:left;}
#story .con1 .right .small{font-size:1.15vw; font-weight:normal;color:#000;text-align:left;line-height:1.72;padding:18% 0 8% 0}
#story .con1 .right .last{font-size:1.77vw; font-weight:600;color:#000;text-align:left;}
.pc_text{display:block}
.m_text{display:none}
@media (max-width:900px){
#story .con1 .inner{display:block}
#story .con1 .left{width:100%}
#story .con1 .right{width:100%;padding:16% 0 0 0; overflow:hidden}
#story .con1 .right h2{font-size:3rem; }
#story .con1 .right .small{font-size:1rem; padding:10% 0 5% 0;line-height:1.5;}
#story .con1 .right .last{font-size:1.7rem; }
}
@media (max-width:500px){
#story .con1 .right h2{font-size:2rem; }
#story .con1 .right .last{font-size:1.5rem; }
#story br{display:none}
}

#story .con2 {background:#f7f9fb;text-align:center;padding:7.81% 0 10.42% 0;}
#story .con2 h2{font-weight:300;font-size:3rem;padding: 0 0 4.17% 0;}
#story .con2 .inner{overflow:hidden;width:70%}
#story .con2 .left1{float:left;width:50%;border-right:2px solid #e8e8e8;}
#story .con2 .right1{float:left;width:50%;}
#story .con2 h3{font-weight:700;font-size:2.08vw;color:#181919;padding:0 0 3.13% 0}
#story .con2 p{font-weight:500;font-size:1.15vw;color:#181919;line-height:1.4}
@media (max-width:900px){
#story .con2 {padding:18% 0}
#story .con2 h2{font-size:3rem;}
#story .con2 .inner{width:94%} 
#story .con2 h3{font-size:2rem}
#story .con2 p{font-size:1rem}
#story .con2 .left1{float:none;width:100%;border:0}
#story .con2 .right1{float:none;width:100%;margin-top:50px}
}
@media (max-width:500px){
#story .con2 h2{font-size:2rem; }
#story .con1 .right .last{font-size:1.5rem; }
}



/*products*/
/* .tab1 {width:100%;display:flex; justify-content :center;border-bottom:1px solid #c0c0c0;padding:8px 0 ;height:55px }
.tab1 li {font-size:18px; font-weight:600;text-align:center;margin-right:67px;}
.tab1 li:last-child {margin-right:0px;}
.tab1 li a{color:#000;display:inline-block;width:88px;height:40px;line-height:35px;}
.tab1 li.ov {background:#ededed; border:1px solid #ededed; border-radius:25px;width:100px}
.tab1 li.ov a {} */

.tab1 {width:100%;display:flex; justify-content :center;border-bottom:1px solid #c0c0c0;padding:8px 0px ;height:55px ;}
.tab1 li {font-size:18px; font-weight:600;text-align:center;margin-right:60px;}
.tab1 li:last-child {margin-right:0px;}
.tab1 li a{color:#000;display:inline-block;width:100%;padding:8px 20px;line-height:22px}
.tab1 li.ov {background:#ededed;  border-radius:25px;} 

.tab2 {width:100%;display:flex; justify-content :center;   padding:22px 0; padding-left:20px; padding-right:0; box-sizing:border-box; }
.tab2 li {font-size:16px; font-weight:400; padding-right:50px; display:inline-block; color:#555; }
.tab2 li:last-child {margin-right:0px;padding-right:20px}
.tab2 li a {display:inline-block;width:100%; padding:0 0 7px 0}
.tab2 li.ov {}
.tab2 li.ov a {color:#000; font-weight:500; border-bottom:1px solid #000;  }
@media (max-width:500px){
.tab2{overflow-x:auto !important; justify-content:flex-start;  white-space: nowrap; }
}


.content02{overflow:hidden}
.content02 .product{width:100%;padding:6.25% 0 0 0;}
.content02 .subject{text-align:center; font-size: 2.6vw; font-weight: 700;} 
.content02 .product ul li {margin-bottom:4.17%;}
.content02 .product ul:last-child li{margin-bottom:0;}
.content02 .food {}
.content02 .food h5{font-size:1.275rem; 
word-wrap: break-word;      /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap;      /* current browsers */;
}




.past{    width: 100%;
overflow: hidden;
background-color: #fff;
box-sizing: border-box;
position: Relative;
padding-bottom:100%;
}
.past img{    position: absolute;
width:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 	min-height: 100%;
min-width: 100%;
max-width: 150%; */
}
.past_r{    width: 20%;
overflow: hidden;
background-color: #fff;
box-sizing: border-box;
position: Relative;
padding-bottom:20%;
margin-right:3%
}
.past_r img{    position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
/* 	min-height: 100%;
min-width: 100%;
max-width: 150% */
}
@media (max-width:900px){
.content02 .subject{font-size:1.875rem}
.content02 .food h5{font-size:1.125rem}
.content02 .food p{font-size:1rem}
.content02 .food:last-child li:nth-child(1) {margin-bottom: 4.17% ; }
.content02 .food:last-child li:nth-child(2) {margin-bottom: 4.17%;}
}



/* 반려동물영양, class */

 .content03_1 .class{width:100%;padding:10.42% 0 0 0;}

 .class ul{width:100%;overflow:hidden;}
 .class ul li{width:32%; float:left;margin-right:2%;padding-bottom:3.7%;}
 .class ul li:nth-child(3n){margin-right:0;}
 .class ul li:nth-child(4n){margin-right:2%;}
 .class ul li:nth-child(7){padding-bottom:0;}
 .class ul li:nth-child(8){padding-bottom:0;}
 .class ul li:nth-child(9){padding-bottom:0;}
 .class  ul li img{width:100%;}

 .class ul li h5{border-bottom:none; padding:5% 0 0 0;font-size:1.275rem;font-weight:700}



@media (min-width:1100px){
.class ul li h5{height:65px}
.class ul li h5{height:65px}
}
@media (min-width:1500px){
.class ul li h5{height:69px}
}


@media (max-width:900px){
 .content03_1 .class{padding:18% 0 0 0}

 .class ul li{width:48%;margin-right:4%;margin-bottom:3.7%}
 .class ul li:nth-child(3n){margin-right:0;}
 .class ul li:nth-child(3){margin-right:4%; }
 .class ul li:nth-child(4){margin-right:0; }
 .class ul li:nth-child(8){margin-right:0;padding-bottom:3.7%;}
 .class ul li:nth-child(7){padding-bottom:3.7%;}

 .class ul:last-child li{margin-bottom:4%}
 .class ul:last-child li:nth-child(3){margin-bottom:0}
 .class ul:last-child li:nth-child(4){margin-bottom:0;}

/* .content03_1 li a{padding-left:0 !important} */
 .class ul li h5{font-size:1.125rem;}
}





/* 뷰페이지 */
.view{overflow:hidden;width:100%;padding:30px 2%}
a.list_btn  {display:inline-block;line-height:40px; font-weight:400;   font-size:15px; float:right;background-color:#000; border-radius:30px; box-shadow:1px 1px 3px #ddd; color:#fff !important;  border:1px solid #555;width:100px;height:40px}
.btn1{overflow:hidden;margin-bottom:20px}
.btn1 a{padding:0 15px;width:auto}
.btn2{overflow:hidden;text-align:center;padding:100px 0 40px 0;}
.btn2 a{float:none}
.right{text-align:right}
.c{text-align:center}
.l{text-align:left;font-size:20px;line-height:20px;padding-left:5%;color:#181919;font-weight:600;}




/* 표 */
.content03 { padding:10.42% 0;}

.col-2 {width:48%; float:left; vertical-align:middle}
.col-2:last-child {float:right}

.table { width: 100%; display: table;margin-top:10px;border-top:1px solid #181919;}

.row {display: table-row;background: #fff; }

.cell { padding: 20px 0; display: table-cell; vertical-align:middle;  text-align:Center;  border-bottom:1px solid #181919; color:#7d7d7d;font-size:16px}
.cell a {color:#000 !important;}


.tit  {width:60%; text-align:left; font-weight:600; line-height:1.3em}


.table1{border-top:2px solid #181919;}
.table1 .cell{border-bottom:2px solid #181919;}
.table1 .cell a{font-weight:700; font-size:20px}
.table1 .no{;width:5%}
.table1 .tit{width:70%;padding-left:2%}
.table1 .name{width:10%;text-align:right;}
.table1 .date1{width:15%;padding-right:2%;text-align:right}

.table2{}
.table2 .no1{;width:8%;padding-left:1%;text-align:left}
.table2 .no{;width:5%;text-align:left}
.table2 .tit{width:64%;padding-left:3%}
.table2 .name{width:8%;text-align:right;}
.table2 .date1{width:15%;text-align:right;padding-right:2%}

.table3 .cell{font-size:14px;font-weight:normal}
.table3 .no{;width:7%}
.table3 .tit{width:68%;}
.table3 .name{width:5%;text-align:center;}
.table3 .date1{width:15%}

.table3 h3{padding-bottom:1.04%}
.m_re{display:none}
@media screen and (max-width:900px) {
.m_re{display:block}
.table3 .name{display:none}
.table3 .date1{display:none}
}


@media screen and (min-width:901px) {
.pc_br {display:block}
}

@media screen and (max-width:1100px) {
.tit  {width:50%; }
}


@media screen and (max-width:900px) {

.content03{padding:18% 0 20% 0}

.table { display: block; }

.row {padding:13px 2%; display: block;  border-bottom:1px solid #ddd}
.row.header {padding: 0; height: 2px; }
.row.header .cell { display: none; }

.cell { padding:0; padding-right:5px; display: block; border-bottom:none;  }
.cell a {width:100%;  display:inline-block}
.cell_col {display:inline-block; width:auto; font-size:.9rem}

.tit  {width:100%; font-size:1.05rem; }
.row .tit:before { display:none }

.no {display:none}

.col-2 {width:100%;  }

.table1 .cell{border-bottom:none}
.table1 .tit{width:100%;padding-left:0}
.table1 .name{text-align:left;width:auto}
.table1 .date1{text-align:left;width:auto}


}


.list_next{display:none}

@media screen and (max-width:900px) {
.table2{display:none}
.list_next  {width:100%;display:inline-block; box-sizing:border-box; border-bottom:1px solid #181919; } 
.list_next p {width:100%; display:inline-block; font-size:1rem; line-height:1.3em; color:#999;overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; border-top:1px solid #181919 ;padding:20px 0}
.list_next p:last-child {text-align:left; }
.list_next b {font-weight:600; color:#333; width:80px; display:inline-block}
}


/* review */
.content04{overflow:hidden;}
.content04 .subject{padding:10.42% 0 4.17% 0;font-size:3.125rem;font-weight:700}
.content04 .products{  display: flex;align-items: center;width:100%;padding-right: 5%;}
.content04  img{margin-right:3%;}
.content04  .text{width:87%;}

@media screen and (max-width:900px) {
.content04  img{margin-right:5%;}
.content04  .text{width:75%;}
.content04 .subject{font-size:1.875rem}
}





.page     {text-align:center;   width:100%; padding:5.21% 0 10.42% 0; float:left; }
.page   ul { width:100%; text-align:center; }
.page   li { display:inline-block; font-size:14px; font-weight:500;}
.page   li:first-child {margin-right:-5px}
.page   li:last-child {;margin-left:-5px}
.page a {
display:inline-block;
text-decoration:none; vertical-align:middle;
box-sizing:border-box;  width:33px; line-height:33px; height:33px;  color:#999; text-align:Center;
}
.page   img {width:5px;vertical-align:middle;margin-top:-3px;}
.page   img.arrow1 {width:9px;vertical-align:middle; }
.page a.ov  {color:#000 !important;}

.modal-open{cursor:pointer;color:#181919}
@media (max-width:900px) {
.page     {width:100%; padding:5.21% 0 20% 0;}
}

.modal-open{    display: -webkit-box;
-webkit-line-clamp:2; /* 라인수 */
-webkit-box-orient: vertical;
overflow:hidden;
word-break:break-all
}




/*review_data  */
.container{
width:100%;
}


.popup-wrap{
z-index:9999999;
  background-color:rgba(0,0,0,.3);
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
  padding:7% 0 0 0
}
.popup{
  width:100%;
  max-width:984px;
  background-color:#ffffff;
  overflow:hidden;
  background-color:#264db5;
/*   box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); */

}
.popup-head{
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.head-title {
    font-size: 38px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -3px;
    text-align: center;
}
.popup-body{
  width:100%;
  background-color:#fff;
}
.body-content{
  padding:30px;
  overflow: hidden;
width:100%;
height:585px;
}

.body-titlebox{
  text-align:center;
  width:100%;
  height:40px;
  margin-bottom:10px;
}
.body-contentbox{
  word-break:break-word;
  overflow-y:auto;
  min-height:100px;
  max-height:200px;
}

.review_head{position:relative;}
.review_head .xbtn{width:auto;cursor:pointer;position:absolute;top:2%;right:2%}
.m_xbtn{display:none}

.box{width:42%;float:left;height:100%;background:#f7f9fb;padding:2%}
.review_head1{overflow:hidden;}
  .past_r1{    width: 20%;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;
    position: Relative;
	padding-bottom:20%;
	float:left
	}
.past_r1 img{    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
width:100%;
/* 	min-height: 100%;
    min-width: 100%;
    max-width: 150%; */
	}
/* .review_head1 img{float:left;width:30%}*/

.review_head1 .review_text{float:left;width:60%;padding-left:20px;}
.review_head1 .review_text h3{font-size:18px;font-weight:700;padding-bottom:10px;display:inline-block}
.review_head1 .review_text p{font-size:14px;color:#7d7d7d}


.review_head2{padding:15px 0;border-bottom:1px solid #c0c0c0;overflow:hidden }
.review_head2 p{float:left;width:50%;font-size:14px;color:#7d7d7d}
.review_head2 p:last-child{text-align:right}

.score{padding:15px 0 28px 0 ;letter-spacing:3px ;color:#ea3f24;}
.review_text2{  width:100%;height: 60%;  overflow-y: auto; color:#7d7d7d;}


.m_re{float:left;width:50%;font-size:14px;color:#7d7d7d;padding-top:15px}
.m_re:last-child{text-align:right;padding-top:15px}


.content04 .page li:last-child {margin-left:0}



@media screen and (max-width:983px) {
.body-content{overflow-y:auto;height:400px;position:relative;}
.m_xbtn{position:absolute;right:2%;top:2%;cursor:pointer;display:block}
.xbtn{display:none}
.box{float:none;width:100%;height:auto}
.review_text2{height:40%}
}