/* main */
#main {
    height: 100vh;
    background: url(../img/about/main.webp) no-repeat bottom center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    width: 100%;
}
#main .alphabet {
    width: 100%;
}
#main .alphabet_wrap {    
    margin-bottom: -14px;
    width: 100%;
    position: relative;
    font-size: 0;
    white-space: nowrap;
}
#main .alphabet_wrap p {
    display: inline-block;
    vertical-align: bottom;
}
#main .alphabet_wrap img {
    width: 100%;
}
#main .alphabet_wrap .char_b {
    width: 13.726%;
}
#main .alphabet_wrap .char_e {
    width: 8.820%;
}
#main .alphabet_wrap .char_t {
    width: 7.150%;
    margin-left: -0.499%;
}
#main .alphabet_wrap .char_t2 {
    width: 7.150%;
    margin-left: -0.99%;
}
#main .alphabet_wrap .char_e2 {
    width: 8.298%;    
    margin-left: -1%;
}
#main .alphabet_wrap .char_r {
    width: 8.141%;
    margin-left: -1.6%;
}
#main .alphabet_wrap .char_f {
    width: 8.768%;
    margin-left: 2.974%;
}
#main .alphabet_wrap .char_o {
    width: 9.551%;
    margin-left: 0.6%;
}
#main .alphabet_wrap .char_d {
    width: 9.655%;
    margin-left: 0.6%;
}
#main .alphabet_wrap .char_s {
    width: 7.776%;
    margin-left: 1%;
}
#main .alphabet_wrap .slog {
    position: absolute;
    font-size: 2.6rem;  
    line-height: 1.31;
    color: #fff;
    left: 64.45%;
    top: -10%;
}

/* sub about */
#about > .pagew {
    padding: 109px 30px 10px;
}
#about .about_inner {
    margin-top: 60px;
    display: flex;
    flex-flow: column-reverse;
}
#about .about_inner .top_img {
    padding-right: 66px;
}
#about .about_inner .top_img img {
    width: 83%;
}
#about .text_cont_wrap {
    padding-left: 106px;
    /* margin-top: -105px; */
    margin-bottom: -414px;
    z-index: 9;
    position: relative;
    text-align: right;
}
#about .text_cont {  
    width: 790px;
    background-color: #ffce21;
    background-image: url(../img/about/noise.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 45px 60px 45px 84px;
    text-align: left;
    display: inline-block;
}

#about .text_cont .btn_download {display:block;width:450px;height:90px;margin-top:30px}
#about .text_cont .btn_download > div {display:flex;align-items:center;height:100%;padding:0 26px;background:#111111;font-size:3.2rem;letter-spacing:1px;color:#ffce21}
#about .text_cont .btn_download span {width:36px;margin-left:auto}

#about .text_cont .sub_tit {    
    text-align: left;
    font-weight: 600;
    font-size: 6.8rem;
    line-height: 1.14;
    margin-bottom: 20px;
}
#about .text_cont .desc {line-height:1.5}
#about > div + div {
    margin-top: 130px;
}
#about .ceo {
    text-align: center;    
    display: flex;
    flex-flow: row-reverse;
    align-items: flex-end;
    margin-bottom: 130px;
}
#about .ceo > div.text_wr {
    width: 49.58%;
    text-align: left;
}
#about .ceo > div.text_wr .sub_tit {
    text-align: left;
    padding: 0 68px;
    margin-bottom: 35px;
}
#about .ceo > div.img_wrap {
    width: 50.42%;
}
#about .ceo img.quote {
    margin-top: 40px;
    margin-bottom: 10px;
}
#about .ceo .text_wr .txt {    
    padding: 0 68px;
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 32px;
}
#about .ceo .txt {
    padding: 0;
}
#about .img_inner {
    position: relative;
    margin-top: 57px;
}
#about .img_inner .tit span {
    display: block;
    padding-left: 47%;
    line-height: 1;
    margin-top: -18px;
}
#about .img_inner::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50.5%;
    height: 84%;
    /* height: 77%; */
    background: #fa1c00;
    content: '';
    z-index: -5;
}
#about .img_inner::before {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50.5%;
    height: 50.3%;
    /* height: 77%; */
    background: #fa1c00;
    content: '';
    z-index: -5;
    background-image: url(../img/about/noise.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#about .img_inner p.tit {
    font-size: 22.4rem;
    font-weight: bold;
    z-index: -5;
}
#about .img_inner p {
    position: absolute;  
    right: -55%;
    top: 15%;
    color: rgba(0, 0, 0, 0.07);
    text-align: left;
    padding: 0;
}
#about .img_inner img {
    /* width: 68.889%;
    margin-left: -13%; */ 
}
#about .img_inner .txt {
    position: absolute;
    left: 35px;
    top: 20%;
    color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
    transform-origin: 0;
}
#about .cont_img {
    margin-top: 60px;
}
#about .history .cont_img {
    width: 48.04%;
}
#about .global .cont_img {
    width: 51.65%;
    margin-top: 0 !important;
} 
#about .global {
    margin-bottom: 150px;
    padding-right: 148px;
    margin-top: 210px;
}
#about .global .txt {
    margin-top: 20px;
}
#about .global::after {
    position: absolute;
    right: 0;
    top: -18%;
    background-color: #0abf82;
    /* width: 47%;
    height: 31.4%; */
    width: 38.5%;
    height: 91%;
    content: '';
    z-index: -5;
    background-image: url(../img/about/noise.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#about .history .history_cont {    
    align-items: flex-start;
}
#about .year_box_i {
    margin-top: 60px;
}



#about .year_box_i .txt {
    font-size: 2rem;  
    letter-spacing: normal;  
    font-weight: 300;  
    line-height: 1.44;
    padding-bottom: 14px;
    -webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#about .year_box_i {    
    padding-left: 5.34%;
    width: 51.96%;
}
#about .year_box_i .pd_16 {
    padding-bottom: 30px;
}
#about .year_box_i .text_wrap:first-child .year_cont {
    margin-top: 0;
}
#about .year_box_i .txt {    
    position: relative;
}
#about .year_box_i .year {
    font-size: 3.9rem;
    line-height: 1;
    display: block;  
    color: #222;
    position: absolute;
    left: -19.6%;
    top: 0;
    font-weight: normal !important;
}
#about .year_box_i .text_wrap {
    padding-left: 16.34%;
    position: relative;
}
#about .year_box_i .text_wrap::before {
    position: absolute;
    left: 13.5%;
    top: 15px;
    width: 1px;
    height: 100%;
    content: '';
    background: #000;
}
#about .year_box_i .text_wrap .dot {
    display: block;
    position: absolute;
    left: 13.5%;
    margin-left: -2px;
    top: 11px;
    width: 5px;
    height: 5px;
    content: '';
    z-index: 9;
    background: #fa1c00;
    border-radius: 100%; 
    -webkit-transition: top 0.5s ease-in-out;
	-moz-transition: top 0.5s ease-in-out;
	-o-transition: top 0.5s ease-in-out;
	transition: top 0.5s ease-in-out;
    opacity: 0;
}
#about .year_box_i .text_wrap.on .dot {
    opacity: 1;
    top: calc(100% + 11px);
}
#about .year_box_i .text_wrap .dot.dot1,
#about .year_box_i .text_wrap.on .dot.dot1 {
    opacity: 1;
    top: 11px;
}
#about .year_box_i .text_wrap.bold p:first-child {
    font-weight: 600;
}
#about .global {
}
#about .global .txt {
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1.4;
}
#about .global_wrap {
    flex-flow: row-reverse;
    /* align-items: flex-end; */
    align-items: center;
}
#about .global_wrap > div {
    margin-bottom: 70px;
}

/* sub purpose */
#purpose .sub-body {
    padding: 135px 0 140px;
}
#purpose .market .text_bx h3 {
    padding-bottom: 138px;
}
#purpose .market .tit_text .desc {
    position: absolute;
    right: 0;
    bottom: 7rem;
    padding-right: 30px;
}
.sub_img .serial_img li {
    padding: 16.318%;
    position: relative;
}
.sub_img .serial_img li:nth-child(1) {
    background: url(../img/about/market01.webp) no-repeat center;
    background-size: contain;
}
.sub_img .serial_img li:nth-child(2) {
    background: url(../img/about/market02.webp) no-repeat center;
    background-size: contain;
}
.sub_img .serial_img li:nth-child(3) {
    background: url(../img/about/market03.webp) no-repeat center;
    background-size: contain;
}
#purpose .rd {
    margin-top: 135px;   
}
#purpose .rd .img_bx {
    margin: 55px 0;
}
#purpose .rd .img_bx > div {
    width: 50%;
    padding: 49px 52px;
    background-color: #fa1c00;
    text-align: left;
    position: relative;
    background-image: url(../img/about/noise.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#purpose .rd .img_bx > div.right {
    width: 50%;
    background-color: #0abf82;
}
#purpose .rd .img_bx li {
    font-size: 16px;
    font-weight: 300;
    color: #333;
}
#purpose .rd .img_bx li.img_li {
    width: 41.04%;
}
#purpose .rd .img_bx li.txt_li {
    padding-left: 5%;
}
#purpose .rd .img_bx .sub_desc {
    font-size: 3.5rem;  
    color: #222;  
    line-height: 1.2;
    display: block;
    margin-top: 41px;
}
.mo_purpose {
    margin-top: 23px;
}
.img_after.mo_purpose  .img_bx::after {
    left: auto;
    right: 0;
    top: auto;
    bottom: -33px;
    width: 48%;
    height: 83.7%;
    background-color: #fa1c00;
}
.img_after.mo_purpose .img_bx {
    padding-right: 33px;
}

/* sub activities  */
#activities .sub-body {
    padding: 200px 0 150px;
}
#activities .ative li {
    display: flex;
    flex-flow: row-reverse;
}
#activities .ative li + li {
    margin-top: 134px;
}
#activities .ative li:nth-child(2n-1) {    
    flex-flow: row;
}
.img_after .img_bx {
    position: relative;
    z-index: 3;
}
#activities .ative .txt_bx .num{
    font-size: 19.5rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.05);
    line-height: 1;
}
#activities .ative .txt_bx .tit{
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.13;
    color: #222;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}
#activities .ative .txt_bx .desc{

}

#activities .ative li:first-child {
    padding-left: 146px;
}
#activities .ative li:first-child .txt_bx {
    padding-top: 6%;  
}
#activities .ative li:first-child .num {
    margin-left: -17px;
}
#activities .ative li:first-child .txt_wrap {
    padding-left: 84px;
}
.img_after .img_bx::after {
    position: absolute;
    left: -146px;
    top: 19%;  
    width: 38%;
    height: 98%;
    content: '';
    background-color: #78b4d8;
    z-index: -3;
    background-image: url(../img/about/noise.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#activities .ative li:nth-child(2)  {
    padding-right: 107px;
}
#activities .ative li:nth-child(2) .img_bx::after {
    left: auto;
    right: -107px;
    top: -17%;
    background-color: #ffc800;
    width: 67.6%;
    height: 84%;
}
#activities .ative li:nth-child(2) .txt_bx {
    padding-right: 134px;
    padding-top: 5%;
}
#activities .ative li:nth-child(2) .num {
    margin-left: -158px;
}

#activities .ative li:nth-child(3) .img_bx::after {
    left: auto;
    top:auto;
    right: -100px;
    bottom: -95px;
    width: 60%;
    height: 84%;
    background-color: #fa1c00;
}
#activities .ative li:nth-child(3) .txt_bx {
    padding-left: 172px;
    padding-top: 7%;
}
#activities .ative li:nth-child(3) .num {
    margin-left: -114px;
}

#activities .ative li:nth-child(4) {
    margin-top: 224px;
}
#activities .ative li:nth-child(4) .img_bx::after {   
    left: -151px;
    top: 34%;   
    width: 58%;
    height: 78%;
    background-color: #0abf82;
}
#activities .ative li:nth-child(4) .txt_bx {
    padding-right: 263px;
    padding-top: 11%;
}
#activities .ative li:nth-child(4) .num {
    margin-left: -150px;
}

#activities .partner {
    margin-top: 290px;
}
#activities .roll_wrap {
    margin: 0 auto; 
    display: flex; 
    overflow: hidden;
}
#activities .roll_wrap.vis-720 {
    display: none;
}
#activities .roll_wrap:nth-child(2) {
    margin-left: -10%;
}
#activities .roll_wrap:nth-child(3) {
    margin-left: -15%;
}
#activities .partner .list {
    display: flex; 
    align-items: center; 
    flex: 0 0 auto; 
    margin-left: 0;
}
#activities .partner .roll_right {
    justify-content: end;
}
#activities .partner .list  li {
}



/* sub contact */
#contact .sub-top .desc {
    position: absolute;
    left: 53.1%;
    bottom: 51px;
}
#contact .sub-body {
    padding: 142px 0;
}
#contact .img_after .img_bx {
    width: 47.366%;
}
#contact .img_after .img_bx::after {
    position: absolute;
    left: -52px;
    top: -11.52%;   
    width: 43.2%;
    height: 60%;
    background-color: #fa1c00;
}
#contact .text_bx {
    width: calc(100% - 47.366%);
    padding-left: 10.5rem;
}
#contact .text_bx li {
    text-align: left;
} 
#contact .text_bx li + li {
    margin-top: 7rem;
}
#contact .text_bx .sub_tit {
    border-bottom: 1px solid #222222;
    text-align: left;
    margin-bottom: 20px;
    line-height: 1.3;  
    font-weight: normal;
}
#contact .text_bx li:first-child .desc {
    background: url(../img/icon/gnb_arrow_g.webp) no-repeat top 82% right;
}
#contact .text_bx .desc {
    width: 45.2%;
}
#contact .text_bx .desc strong {
    display: block;
}

/* sub porducts */
.round-loope {
}
#product .sub-body {
    padding: 135px 0 216px;
}
#product .list_bx {
    margin-top: 130px;
}
#product h3 {
    margin-bottom: 15px;
}
#product li {
    padding: 64px 98px 55px;
    margin-bottom: 19px;
    background: #70afd6 url(../img/about/prd_noise.webp) no-repeat right;
    background-size: cover;
    position: relative;
}
#product li::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 47.905%;
    height: 100%;
    background: url(../img/about/prdbg01.webp) no-repeat right bottom;
    background-size: contain;
}
#product li.sausage::before {
    width: 47.905%;
    height: 100%;
    background: url(../img/about/prdbg02.webp) no-repeat right bottom;
    background-size: contain;
}
#product li.meat::before {
    width: 47.905%;
    height: 100%;
    background: url(../img/about/prdbg03.webp) no-repeat right bottom;
    background-size: contain;
}
#product li.Mince::before {
    width: 47.905%;
    height: 100%;
    background: url(../img/about/prdbg04.webp) no-repeat right bottom;
    background-size: contain;
}
#product  li.sausage  {
    background-color: #0abf82;
}
#product  li.meat  {
    background-color: #ffc800;
}
#product  li.Mince  {
    background-color: #f29b3d;
}
#product  li > .img_wrap {
    margin: 4px 0 38px;
    display: inline-block;
    z-index: 5;    
    margin-left: -8px;
}
#product  li > .img_wrap img {
    width: 100%;
}
#product  li > .img_wrap::after {
    position: absolute;
    left: 4%;
    top: 3%;
    width: 93%;
    height: 95%;
    content: '';
    box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: -5;
}
#product li:not(.cold) > .img_wrap::after {
    left: 3%;
    top: 2%;
    width: 91%;
    height: 93%;
}
#product li:not(.cold) > .img_wrap {
    margin-left: -4px;
}
#product  .prd_info {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}
#product  .prd_nm  {
    font-size: 4rem;
    font-weight: 600;
    color: #222;
}
#product .banner {
    margin-top: 270px;
    text-align: center;
}
#product .banner::after,
#product .banner::before {
    content: '';
    position: absolute;
    left: 0;
    top: -80px;
    width: 56%;
    height: 463px;
    background-color: #ef1a00;
    background-image: url(../img/about/noise.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -5;
}
#product .banner::before {
    left: auto;
    right: 0;
    top: auto;
    bottom: -63px;
    width: 39%;
    height: 364px;
    background-color: #0abf82;
}
#product .banner .w_better {
    top: -150px;
    right: 0;
    z-index: -5;
    width: 39%;
}
#product .banner .w_food {
    bottom: -63px;
    left: 0;
    z-index: -5;
    width: 41%;
}
#product .mo_img {
    bottom: 94%;
    right: 0;
    width: 44.75%;
    z-index: 9;
}
#product .sausage .mo_img {
    bottom: 98%;
    right: auto;
    left: 0;
    width: 59.5%;
    z-index: 9;
}
#product .img_bx::after {
    display: none;
}
#product .sausage.img_bx::after {
    left: auto;
    right: 0;
    top: -39px;
    width: 77.99%;
    height: 54.3vw;
    content: '';
    background-color: #0abf82;
}
#product .meat.img_bx::after {
    top: -32px;
    left: 0;
    width: 51.99%;
    height: 50vw;
    content: '';
    background-color: #ffc800;
}
.img_after .cold.img_bx::after {
    left: 0;
    top: 0vw;
    width: 38vw;
    height: 50.7vw;
    background-color: #70afd6;
}



#product li.Mince > .img_wrap::after,
#product .add_prd li > .img_wrap::after {
    display: none;
}
#product .add_prd li {
    width: 32.634%;
    background-color: #ececec;
    padding: 88px 0 45px;
} 
#product .add_prd li::before {
    display: none !important;
}
#product .add_prd .txtbx {
    padding: 0 44px;
    margin-top: 88px;
}
#product .add_prd .imgbx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    min-height: 420px;
    padding: 0 15px;
}
#product .add_prd .plant .prd_info {
    margin-left: -29%;
}
#product .add_prd .plant .imgbx::after {
    position: absolute;
    right: 15.5%;
    bottom: 0;
    content: 'Keep in a cool place/ Shelf life 24 months';
    font-size: 14px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.3);
}


#product .add_prd li.flank .img_wrap .m_image {
    margin-left: 1.2vw;
}

#product .btn_download {display:block;position:relative;width:686px;height:140px;margin:80px 0 0 0;z-index:1}
#product .btn_download > div {display:flex;align-items:center;height:100%;justify-content:center;background:#000;color:#fff;font-size:4rem;padding:0 53px 0 81px}
#product .btn_download span {margin-left:auto}
#product .btn_download {}
#product .btn_download::after {content:'';width:651px;height:93px;background:#ffc805;z-index:-1;position:absolute;right:-23px;bottom:-28px}

/* our brand 추가 */
#brand .sub-body {padding:135px 0 140px}
#brand .ourBrand_cont {padding-bottom:180px}
#brand .ourBrand_cont .ourBrand_txtBox {margin:98px 0 0}
#brand .ourBrand_cont .ourBrand_txtBox .yellowTxt {width:860px;font-size:3.7rem;background:#f7f2e0;color:#fc4c02;padding:90px 72px;font-weight:500;line-height:1.3}
#brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont {display:flex;margin:2% 0 144px;align-items: center;}
#brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont .txt {width:690px;padding-right:40px;font-size: 2.2rem;}
#brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont .img_bx {margin-top:-10%}

@media screen and (max-width:1440px) {
    #about .text_cont_wrap {margin-bottom:-300px}
    #about .text_cont .sub_tit {font-size:4rem}
    #about .text_cont .btn_download {width:100%;height:70px}
    #about .text_cont .btn_download > div {font-size:2.6rem}
}
@media screen and (max-width:989px) {
    #brand .ourBrand_cont {margin-top:40px}
    #brand .ourBrand_cont .ourBrand_txtBox {margin-top:40px}
    #brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont {flex-direction:column;margin:6rem 0 70px}
    #brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont .img_bx {margin-top:40px}
    #brand .ourBrand_cont .ourBrand_txtBox .yellowTxt {width:auto;padding:40px 36px;font-size:3rem}
    #brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont .txt {width:100%}
    #product .btn_download {width:100%;height:70px;margin:50px 0 20px 0}
    #product .btn_download > div {font-size:2.4rem;padding:0 50px}
    #product .btn_download span {width:28px;margin-left:10px}
    #product .btn_download::after {display:none;/* width:100%;height:100%;bottom:-20px */}

}

@media screen and (max-width: 720px) {
    #about .text_cont .sub_tit {font-weight:700;font-size:3.13rem}
    #about .text_cont .btn_download {height:60px}
    #about .text_cont .btn_download > div {padding:0 20px;font-size:2rem;line-height:1.3}
    #about .text_cont .btn_download span {width:24px}
    #brand .ourBrand_cont {padding:0}
    #brand .sub-body {padding:0 0 40px}
    #brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont {margin:4rem 0 20px}
    #brand .ourBrand_cont .ourBrand_txtBox .ywe_inCont .txt {padding:0 15px 0 30px}
    #brand .ourBrand_cont .ourBrand_txtBox .yellowTxt {font-size:2rem;padding:20px 18px}
    #product .pack.vis-720 {width:80%;margin:0 auto}
}