@charset "utf-8";

@font-face {
    font-family: 'KorailRoundGothicBold';   /*  코레일체  */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KorailRoundGothicBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

.cke_sc {display: none;}
.displaynone  {display: none !important; }
.content {padding: 0px; }
.page_width {max-width: 1300px; margin: auto;}
.width_inner {max-width: 1300px; margin: auto; padding: 0 15px;}
.w100p {width: 100% !important; }
.tx_small {font-size: 12px;}
.text-center {text-align: center;}
.p-5 {padding: 3em;}
.pt50 {padding-top: 50px;}
.pb50 {padding-bottom: 50px;}
.boardpadding {padding: 3em;}
html { scroll-behavior: smooth; }
.pc_br{display: block;}
.mo_br{display: none;}
@media (max-width: 768px) { 
    .pc_br{display: none;}
    .mo_br{display: block;}
}

:root {
    --main-color: #400f00;
    --main-color2 : #eb5614;
    --lightorange : #f1a07d;
    --gray1: #707070;
    --gmarket : 'GmarketSans';
    --bg_gray : #f7f7f7;
    --bg_gray2 : #f0f0f0;
    
}  

#container {padding-top: 100px;}
.mt_content {margin-top: 90px;}
.gmarket {font-family: 'GmarketSans';}
.bg_gray {background-color: var(--bg_gray2);}

#header{  padding: 0 10px; display: flex;    justify-content: space-between;    align-items: center; background: #ffffff;
    position: fixed; left: 0; top :0; height:90px;
    border-bottom: 1px solid #dddddd;
	z-index: 100;      width: 100%;    	color: #ffffff; 
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -ms-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    }

#header.fix {  transform: translate(0%, -100%); }
#logo { padding-left: 20px; }
#logo a {display: block; padding-top: 5px;  color: var(--main-color);
    /* font-family: 'pretendard', sans-serif; font-weight: 800; */
    /*font-family: 'KIMM_Bold', sans-serif; font-weight: 700; */
    font-family: 'KorailRoundGothicBold', sans-serif; font-weight: 700; 
    
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -ms-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}
#logo h1 {font-size: 35px; display: inline-block;}
#logo img {max-width: 70px;    margin-right: 10px;}


#fp-nav.right {left:auto; right: 30px;}

#lnb { display: flex;    justify-content: space-between;    align-items: center;  width: 50%;    max-width: 650px;}
#lnb div {position: relative; margin: 0 20px;   display: flex;    align-items: center; }
#lnb div a{font-size: 22px; color: #333333; padding: 20px 0px; display: block; font-weight: 700; }
#lnb div > a::after{content:"";     width: 0%;
    height: 2px;
    position: absolute;
    top: 10px;
	background: var(--main-color2);
    left: 0px;
	transition: all  0.3s ease-in-out 0s;
	z-index: 100;
}
#lnb div a:hover {color: var(--main-color2);}

#lnb  div .submenu {    
    position: absolute;
    width: 200px;
    top: 97%;
    left: 0;
    margin-left: -10px;
    display: block;
    visibility: hidden;
    transform: translate(0px , 20px);
    opacity: 0;
    transition: opacity 0.25s 0s cubic-bezier(0.250, 0.460, 0.450, 0.940), transform 0.25s 0s cubic-bezier(0.250, 0.460, 0.450, 0.940), visibility 0s 0.25s ease;
    z-index: 100;
    background-color: #ffffff;
    padding: 15px 10px 15px 20px; border-radius: 6px;
    box-sizing: border-box;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
#lnb div .submenu.active{
    opacity: 1;
    transform: translate(0px,0px);
    visibility: visible;
    transition-delay: 0s;
}
#lnb div .submenu a {color: #333333; font-size: 18px; padding: 8px 0; 
    font-weight: normal; }
#lnb div .submenu a:hover{color: var(--main-color2);}

.outer_lang {   display: flex;    justify-content: flex-end;}
.lang {width: 140px; height: 100%; border: 1px solid #b8b8b8; border-radius: 50px; margin-right: 10px; text-align: center; position: relative; }
.lang::after{content: ""; width: 2px; height: 20px; background-color: #b8b8b8; 
position:absolute; left: 50%; top: 8px;}
.lang a {font-size: 18px; margin: 4px 10px;  font-weight: 600; display: inline-block; color: #858585; }


#btn_aside  { color: #ffffff;width: 60px; height: 30px; font-size: 20px;cursor: pointer; position: relative; 
    margin-top: 4px; display: inline-block}

#btn_aside span {    position: absolute;    top: -9999px;    left: -9999px;}
#btn_aside  i{ position: absolute; right: 15px; width: 30px; height: 2px; background-color: #222222; display: block; 
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -ms-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}
#btn_aside  i:nth-child(1){ top: 0px;}
#btn_aside  i:nth-child(2){ top: 12px; }
#btn_aside  i:nth-child(3){ top: 24px;}
.scrollon #btn_aside  i {background-color: #222222;}

#header.fix #btn_aside  i {background-color: #222222;}

#header > div:nth-child(1){width: 20%; }
#header > div:nth-child(3){width: 20%; }

#aslide { position: fixed;     top: 0%;    right: -150%;  
    width: 33.7%;
    min-width: 320px;
    height: 100vh;
    background-color: #e7e8ea;
    z-index: 200; 
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; 
    padding: 0 4em;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px,
     rgba(0, 0, 0, 0.14) 0px 24px 38px 3px,
      rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;

       }
#aslide .menu{  position: absolute;       width: 100%;       top: 50%;       transform: translateY(-50%);}
#aslide a {font-size: 36px; color: #3b4951;; padding: 25px 0 0; display: block; font-weight: 600; opacity: 0.7; }
#aslide .menu .active > a,
#aslide .menu .active > a:hover {
    color: #3b4951;
    opacity: 1;
}
#aslide .menu ul {display: none; padding-left: 20px;}
#aslide .menu li a {
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    padding: 5px 0;
    color: #8e9090;
    opacity: 1;
    transition: .3s ease;
    width: 100%;
}


#aslide h3{font-size: 30px; font-family: 'Montserrat', sans-serif; margin-bottom: 30px;}
.btn_alideclose{position: absolute; right: 20px; top: 0px; width: 50px; display: none; }
#aslide .btn_alideclose img {width: 100%;}
#aslide .lang2 a {    color: #3b4951;  display: inline-block;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 24px;
    font-weight: 600;
    height: 100px;
    line-height: 100px;
    padding: 0 20px 0 0;
    transition: color .3s ease;}
#aslide .lang2 a:hover {color: var(--main-color2)}



@media (max-width: 1240px) { 

    #lnb div a{font-size: 18px;  }
    #lnb  div { margin: 0 12px;}
    #aslide .btn_alideclose { padding: 0; width: 40px; top: 10px;}
}

@media (max-width: 992px){
    #header > div:nth-child(1) {width: 30%;}
}

@media (max-width: 768px) { 
    #header {height: 60px;}
    .mt_content {margin-top: 60px;}
    #header > div:nth-child(1) {width: 70%;}
    #logo{padding-left: 2px;}
    #logo h1{font-size: 20px;}
    #logo a span{font-size: 14px; display: block; padding-left: 0; margin-top: 5px;}
    #logo img {width: 50px;}
    #lnb {display: none; }
    #btn_aside {display: block;}
    .boardpadding {padding: 2em 1em;}
    #aslide {width: 100%; max-width: 800px; }

}    

/* 대제목 소제목 */
.content h2 {font-size: 35px;  font-weight: 600; margin-bottom: 50px;}
.content h3 {font-size: 40px; font-weight: 500; position: relative; margin:  0;}
.content h4 {font-size: 25px;  font-weight: 600; }
.content h2 p {display: inline-block; padding-left: 50px; font-size: 22px; font-weight: 500;}
.content p  {font-size: 20px;     line-height: 36px; word-break: keep-all;}
.content .subtit {position: relative; padding-left: 20px; margin-top: 0;}
.content .subtit::before {content: ""; position: absolute; left: 0px; width: 6px; height: 6px; background-color: var(--main-color2); top: 12px;}


/* 메인 */
.mainslider  {height: 700px; position: relative;   }
.mainslider .swiper-slide{display: flex; align-items: center; justify-items: center;}
.mainslider .swiper-slide > div{width: 90%; max-width: 1300px; margin: auto; }
.mainslide1 {background: url('img/main01.jpg') center center  no-repeat; background-size:cover;  }
.mainslide2 {background: url('img/main02.jpg')  center center no-repeat; background-size:cover; }
.mainslide3 {background: url('img/main03.jpg')  center center no-repeat; background-size:cover; }
.mainslider h3 {color: #ffffff; font-size: 50px; padding-bottom: 20px; margin-top: 100px; font-weight: 700;   letter-spacing: 2px;}
.mainslider  p {color: #ffffff; font-size: 20px;}

.swiper-slide-active .animated-area { animation: fadeInUpShort   2s; }/* 메인 글씨 움직임 */
.mainslider  .swiper-pagination {width: 90%; max-width: 1300px; color: #ffffff; font-size: 14px; font-weight: 600; 
    padding-left: 43px; 
    bottom: 14.5%; left: 50%; transform: translateX(-50%); text-align: left;letter-spacing : 5px;
   font-family: 'Montserrat', sans-serif;
}
.swiperArrow {    position: absolute;      left: 50%; transform: translateX(-50%);      
    width: 90%; max-width: 1300px; 
    bottom: 18%;    z-index: 150;    }

@media (max-width: 1240px) {
    .mainslider  {height: 500px;}
    .main_section2  .swiper-wrapper,
    .main_section3  .swiper-wrapper{height: auto !important;}
 }
 @media (max-width: 992px) { 
 .lang {display: none;}
 .mainslider h3 {font-size: 40px;}
 }
@media (max-width: 768px) { 
    .mainslider  {height: 400px;}
    .mainslider  .swiper-pagination {bottom: 20px; padding-left: 40px;}
    .mainslider h3 {font-size: 24px;text-align: center; word-break: keep-all; margin-top: 10px;}
    .mainslider p {font-size: 16px;text-align: center; word-break: keep-all;}
    .swiperArrow {bottom: 45px;}

    .content h2 {font-size: 26px; }
    .content h3 {font-size: 22px; }
    .content h4 {font-size: 20px;}
    .content h2 p {font-size: 16px; }
    .content p  {font-size: 16px; line-height: 28px;}
    

}

/* 메인 - 공지사항, 채용공고 */
.main_section1 {max-width:1300px;  color: #222222; margin: 100px auto;    }
.main_section1 h3 {font-size: 46px; font-weight: 700; }
.main_section1 p.h5{font-size: 16px; color: #666666; font-weight: 300;}
.main_section1 .news {}
.main_section1 .inner {margin-top: 10px; border-top: 1px solid #222222; min-height: 220px;border-bottom: 1px solid #222222;}
.main_section1 .gonggo {background: url('./img/ban_recruit.jpg') center center no-repeat; background-size:cover;min-height: 220px;
    display: flex;
    align-content: flex-end;
    flex-wrap: wrap; 
    letter-spacing: 1px;;
}
.main_section1 .gonggo a {display: block; color: #ffffff;}
.main_section1 .gonggo h4 { font-size: 40px;width: 100%; }
.main_section1 .gonggo p { width: 100%; opacity: 0.5; font-weight: 300; }

/* 메인 - 사업소개  */
.main_section2 {position: relative; max-width: 1300px; 
    width: 100%; height: 500px;
    margin: 150px auto 100px;}
.slide_section2 {position: absolute;
    left: 30%; top: -30px;
    margin-left: auto;
    padding: 20px;  /* 쉐도우 때문에 있어야함 */
    overflow: hidden; 
    width: 100% ;
}    
.main_section2 .tit_section2 h3{font-size: 46px;    font-weight: 700;}
.main_section2 .tit_section2 p.h5{font-size: 16px; color: #666666; font-weight: 300; line-height: 24px;}
.slide_section2 .swiper-slide div {overflow: hidden;}
.slide_section2 .swiper-slide img {width: 100%;    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; } 
.slide_section2 .swiper-slide img:hover { transform: scale(1.1);}

.slide_section2 .swiper-slide a {border-radius: 30px; overflow: hidden;display: block;
    transition: all 0.2s ease-in-out 0s;   }
.slide_section2 .swiper-slide.swiper-slide-active a{box-shadow: 0 6px 20px 2px rgba(0, 0, 0, 0.2); position: relative;}    
.slide_section2 .swiper-slide a:hover {box-shadow: 0 6px 20px 2px rgba(0, 0, 0, 0.2);}  

.slide_section2  .swiper-slide{position: relative; padding: 20px; }
.slide_section2  .swiper-slide .con {
    position:relative; width: 100%; bottom: -150px; height: 0px; background-color: #ffffff; 
    padding: 20px; border-bottom-right-radius: 28px;    border-bottom-left-radius: 28px;
    transition: all 0.5s ease-in-out 0s; margin-top: -50px; z-index: -1; }
.slide_section2  .swiper-slide .con::after{content: ""; position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px; background: url('/img/arrow-up-right.svg') center center no-repeat; background-size: 40px;}
.slide_section2  .swiper-slide .con p.h4 {font-size: 24px; font-weight: 700;  transition: all 0.2s ease-in-out;  }
.slide_section2 .swiper-slide.swiper-slide-active .con {height: 120px; bottom: 0px; margin-top: 0}
.slide_section2 .swiper-slide a:hover .con p.h4 {color: var(--main-color2)}


/* 메인 - 사업영역 페이지네이션 */
.tit_section2 .section2-pagination {margin-top: 50px; overflow: hidden;}
.tit_section2 .swiper-pagination-bullet {display: block; padding: 20px 0; border: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
    color: #959595;     font-weight: 600;}
.tit_section2 .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 13px; left: -115px; width: 0px; 
    height: 2px; background-color: #222222;     
    transition: all .4s;
}

.tit_section2 .swiper-pagination-bullet::after {
    position: absolute;
    display: block;
    border-radius: 0;
    font-size: 20px;
    transition: all .4s;
    top: 0;
    left: 0;
    width: 200px;
}
.tit_section2 .swiper-pagination-bullet:nth-child(1)::after{content: '사업개요'; }
.tit_section2 .swiper-pagination-bullet:nth-child(2)::after{content: '생산시스템'; }
.tit_section2 .swiper-pagination-bullet:nth-child(3)::after{content: '한우사업'; }
.tit_section2 .swiper-pagination-bullet:nth-child(4)::after{content: '낙농사업'; }
.tit_section2 .swiper-pagination-bullet:nth-child(5)::after{content: '식품사업'; }
.tit_section2 .swiper-pagination-bullet-active {background: none; margin-left: 100px; color: #222222; font-weight: 700;  }
.tit_section2 .swiper-pagination-bullet.swiper-pagination-bullet-active::before { width: 100px;}

.todayslide_prev img,
.todayslide_next img{width: 20px; cursor: pointer; opacity: 0.8; margin-right: 20px;}



/* 메인 - 사업소안내 지도 */
.main_section3 { margin: 150px auto ; background: url('/img/bg_section3.png') top right no-repeat; }
.main_section3 .map_inner{max-width: 900px; margin: 20px auto;;}
.main_section3 .swiper-wrapper{height: auto !important;} 
.main_section3 h3{font-size: 46px;    font-weight: 700;}
.main_section3 p.h5{font-size: 16px; color: #666666; font-weight: 300; line-height: 24px;}
.main_section3 .append-buttons {display: grid;
    gap: 10px ;    grid-template-columns: 150px 1fr ;   
    padding: 20px 0;border-bottom: 1px solid #000; opacity: 0.6;}
.main_section3 .append-buttons.on {opacity: 1;}    
.main_section3 .append-buttons p {  font-size: 25px; color: #333333; font-weight: 700; background: url('/img/arrow-up-right.svg') 70% 6px no-repeat; background-size: 20px;; }
.main_section3 .append-buttons   a{padding: 5px 30px 5px 0;  font-size: 20px; color: #666666; font-weight: 600; }
.main_section3 a.active {font-weight: 900; color:var(--main-color2)}
.main_section3 .append-buttons .grid { display: flex; 
    justify-content: space-between;     align-items: center;     }


/* 메인 - 회사소개  */
.main_section4  { margin: 10px auto 100px; }
.main_section4 .inner {
    background: url('/img/bg_maincompany.jpg') center center no-repeat;
    padding: 50px 0; min-height: 400px; background-attachment: fixed;text-align: center;
}
.main_section4 img {width: 150px; }
.main_section4 p.h4{font-size: 24px; color: #ffffff; font-weight: 200; line-height: 40px; }
.main_section4 a{border: 2px solid #ffffff; border-radius: 50px; padding: 8px 35px; color: #ffffff;
font-size: 24px; font-weight: 700;   transition: all 0.5s ease-in-out; }
.main_section4 a:hover {background-color: #ffffff; color: #222222; }


/* 메인 - 특허인증 */
.main_section5 { margin: 100px auto;
    display: grid;    gap: 10px 7%;    grid-template-columns: 1.3fr 1fr 1fr  1fr 1fr ; text-align: center;}
.main_section5 img {width: 100%; border: 1px solid #dddddd;box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.1);}
.main_section5 h3{font-size: 46px;    font-weight: 700;}
.main_section5 p {color: var(--gray1); font-size: 15px; }

.slide_section3 .swiper-slide {background-color: #ffffff;;}
.slide_section3 .swiper-slide img {width: 100%;}

@media (max-width: 1240px) { 
    .section2-pagination  {display: none;}
    .slide_section2 {position: relative; left:inherit; top: 0; padding: 0; }
    .main_section2 {max-width: 960px;margin: auto; height: auto; }
    .main_section3 {max-width: 960px;margin: 50px auto; height: auto; }
    .todayslide_prev, .todayslide_next {display: none;}
    .slide_section2  .swiper-slide .con {position: relative; bottom: auto; height: 80px;     margin-top: 0px;}
    .slide_section2 .swiper-slide.swiper-slide-active .con {height: 80px; bottom: auto;}
    .slide_section2 .swiper-slide a{box-shadow: 0 3px 8px 2px rgba(0, 0, 0, 0.2);}    
    .slide_section2 .swiper-slide.swiper-slide-active a{box-shadow: 0 3px 8px 2px rgba(0, 0, 0, 0.2);} 
    .main_section5 {  gap: 10px 20px; max-width: 960px; }
}

@media (max-width: 992px){
    .main_section1 h3,
    .main_section2 .tit_section2 h3,
    .main_section3 h3, .main_section5 h3 {font-size: 30px;}
    .main_section2, .main_section3, 
    .main_section5 {max-width: 720px;}
    .slide_section2  .swiper-slide .con::after{ bottom: 10px; right: 10px; width: 20px; height: 20px; background: url('/img/arrow-up-right.svg') center center no-repeat; background-size: 20px;}
    .slide_section2  .swiper-slide .con p.h4 {font-size: 16px; }
    .main_section3 {background-size: 50%;}
    .main_section3 .append-buttons .grid {    display: grid;    grid-template-columns: 1fr 1fr 1fr;}

}

@media (max-width: 768px) { 
    .main_section1 {margin: 50px auto;}
    .main_section1 h3,
    .main_section2 .tit_section2 h3 ,
    .main_section3 h3,
    .main_section5 h3    {font-size: 22px; }
    .main_section1 p.h5{font-size: 14px;}
    .main_section1 .recruit {margin-top: 30px;}
    .main_section1 .inner,
    .main_section1 .gonggo {min-height: 100px;} 
    .main_section1 .gonggo h4 {font-size: 20px;}
    .main_section2 {height: auto; padding: 0 15px; max-width: 540px;}
    .main_section3 { max-width: 540px;}
    
    .main_section2 .tit_section2 p.h5{font-size: 14px;}
    .slide_section2 {padding: 0; width: 120%;}
    .slide_section2 .swiper-slide a {border-radius: 10px;}
    .slide_section2 .swiper-slide {padding: 10px 10px 20px 10px;}
    .slide_section2 .swiper-slide .con {padding: 10px;}
    .main_section3 {margin: 50px auto; padding: 0 15px;}
    .main_section3 p.h5{font-size: 14px;}
    .main_section3 .append-buttons {display: block;}
    .main_section3 .append-buttons p{font-size: 18px;}
    .main_section3 .append-buttons a {font-size: 14px; padding: 3px;}
    .main_section4  { margin: 50px auto; min-height: 300px; }
    .main_section4 p.h4{font-size: 16px; line-height: 30px;}
    .main_section4 a {font-size: 16px;}

    .main_section5 { margin: 50px 15px;  grid-template-columns: 1fr 1fr ; gap : 30px;}
    
    .main_section5 div:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .main_section5 p {font-size: 13px;}
    #aslide a {font-size: 24px;}
    #aslide .lang2 a {height: 50px; line-height: 50px; font-size: 20px;}
    #header > div:nth-child(3) {width: 18%;}
    .outer_lang {display: block;}
    
}    

@media (max-width: 576px) {
    .main_section2 {   max-width: 540px; margin: auto;}
}
/* 서브 */

.tit_aboutus {}
.tit_aboutus h1 { font-size: 60px; font-weight: 600; text-align:center; color: #ffffff; padding-bottom: 10px;}
.tit_aboutus h2 {font-size: 34px; font-weight: 600; text-align:center; color: #ffffff;  position: relative; padding: 10px 0; margin: 0;}
.tit_aboutus h2::after{content: ""; position: absolute; display: block; width: 220px; height: 1px; background: #ffffff; top: -2px; left: 50%; transform: translateX(-50%); }
.tit_aboutus h3 { font-size: 40px; font-weight: 300; text-align: center;  color: #ffffff; line-height: 65px;}
.head_subtit {position: relative; overflow: hidden;}
.head_subtit img {width: 100%; animation: mymove 3s; min-height: 100px;}
.head_subtit  .head_title {    font-size: 50px; top: 60%;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 2px;      text-align: center;  }
.head_subtit  .head_title span {    display: block;    font-family: 'Montserrat', sans-serif;
    border: 0;
    font-size: 22px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #ffffff96;
    padding-bottom: 10px;}
.layer_middle {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 10;
}    

/* nav */
.contents_nav {width: 100%; height: 50px; background: #ffffff; border-bottom: 1px solid #E6E6E6;}
.contents_nav .nav_warp {display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 0 auto;}
.contents_nav .nav_warp > ul {display: table;}
.contents_nav .nav_warp > ul > li {position: relative; display: inline-block; vertical-align: top; width: 200px;height: 50px; text-align: center; box-sizing: border-box; border-right: 1px solid #E6E6E6; z-index: 55;}
.contents_nav .nav_warp > ul > li:first-child {width: 3.5rem; padding-left: 0;}
.contents_nav .nav_warp > ul > li > a {display: inline-block; width: 100%; height: 100%; padding: 0 2rem 0 1.5rem; box-sizing: border-box;  background: url('/img/arrow_down.png') no-repeat 90% center / 11px; font-size: 17px; line-height: 50px; font-weight: 600; text-align: left; letter-spacing: -0.5px;}
.contents_nav .nav_warp > ul > li:first-child > a {width: 36%; padding: 0; background: none;}
.contents_nav .nav_warp > ul > li > a > img {display: inline-block; width: 23px}

.contents_nav .nav_warp > ul > li .dropdown_list {display: none; width: 201px; border: 1px solid #E6E6E6; border-top: 0; margin:0px 0 0 -1px; background: #ffffff; padding: 10px 0;}
.contents_nav .nav_warp > ul > li .dropdown_list li {width: 100%;  text-align: left;}
.contents_nav .nav_warp > ul > li .dropdown_list li a {display: inline-block; width: 100%; padding: 10px 10px 10px 1.5em; box-sizing: border-box; font-size: 16px; font-weight: 500;}
.contents_nav .nav_warp > ul > li .dropdown_list li a:hover {color: #12226E; font-weight:700;}
.contents_nav .nav_warp > ul > li.active .dropdown_list {display: block;}
.contents_nav .nav_warp > ul > li.down .dropdown_list {display: block;  transition: .3s; margin-left: -1px;}
.tree {font-size: 14px; color: #989898; display: flex;
    align-items: center;
    justify-content: center;}
.tree li {display: flex;    align-items: center;    justify-content: center;}
.tree li::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 4px;
    background-image: url('/img/ico_arrow.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    transform: rotate(-90deg);
    filter: invert(47%) sepia(0%) saturate(0%) hue-rotate(86deg) brightness(93%) contrast(98%);
}
.tree li:last-child::after {display: none}

@media (max-width: 768px) { 
    .contents_nav { height: 40px;}
    .contents_nav .nav_warp {display: block;}
    .contents_nav .nav_warp > ul {width: 100%;}

    .contents_nav .nav_warp > ul > li:first-child {   display: none;}
    .contents_nav .tree{   display: none;}
    .contents_nav .nav_warp > ul > li {height: 40px; width: 50%;}
    .contents_nav .nav_warp > ul > li > a  {font-size: 14px; padding: 0 30px 0 10px; line-height: 40px;}
    .contents_nav .nav_warp > ul > li .dropdown_list {width: calc(100% + 2px);}
    .contents_nav .nav_warp > ul > li .dropdown_list li a {font-size: 14px; padding: 5px 0px 5px 10px;}

   
}





/* 하단 */
#tail {background: #f2f2f2; padding: 100px 15px; }
#tail .inner {max-width: 1300px; padding-bottom: 10px;  margin: 0px auto 20px;}
#tail .footerlogo {color: var(--main-color); font-size: 24px;  margin-right: 20px;     display: inline-block;    font-weight: 700; letter-spacing: 2px;}
#tail .tail_menu a{ position: relative; display: inline-block; font-size: 18px; font-weight: 600; 
    padding: 0px 30px; margin-top: 30px; color: #333333; }
#tail .tail_menu a::after {position: absolute; content: ""; height: 20px; width: 1px; 
    border-left: 1px solid #777777; left: -3px; top: 4px;}
#tail .tail_menu a:first-child {padding-left: 0;}
#tail .tail_menu a:first-child::after{display: none;}


#tail .addr { color: #777777; font-size: 14px; max-width: 1300px; line-height: 150%; margin: auto;}
#tail .addr p {display: inline-block;  vertical-align: top; font-weight: 600; }
#tail .addr span {padding: 0 10px; }


@media (max-width: 768px) { 
    #tail {padding: 50px 15px;}
    #tail .footerlogo {margin-bottom: 10px; display: block; }
    #tail .inner {display: block; height: auto; }
    #tail .addr {display: block; font-size: 14px; padding-bottom: 20px;}
    #tail .addr div {display: block; padding: 10px 0;}
    #tail .addr p,
    #tail .addr span {display: none; }
    #tail .addr div+div a {display: block; padding-bottom: 10px;}
    #tail .tail_menu {    display: grid;   gap: 10px 20px;    grid-template-columns: 1fr 1fr 1fr 1fr;}
    #tail .tail_menu a { padding: 0; margin: 0; font-size: 15px; }
    #tail .tail_menu a::after {display: none;}
}    
.scroll-to-top {position: fixed; cursor:pointer;  display: none;  bottom: 50px; right: 30px;  width: 50px; height: 50px; 
    background: #999999 url(./img/icon_top.png) center center no-repeat; background-size: 50px;  }
.scroll-to-top:hover {background-color: var(--lightorange) ;}

@media (max-width: 576px) { 
    .content  p {font-size: 13px; line-height: 18px; word-break: keep-all;}
    #tail .tail_menu {    gap: 10px 10px;    grid-template-columns: 1fr 1fr ;}
}



/* 게시판 */
.board_width {max-width: 1300px; margin: auto; min-height: 500px; padding: 0 10px; }

.tit_board {font-size: 24px;padding: 80px 0 20px;color: #444444; text-align: center; }
.tit_board span {font-size: 20px; font-weight: 100;}

#bo_v {margin-top: 0px; padding: 0}
#bo_v_con {font-size: 16px;}


#aboutus  {margin: 120px auto; padding: 0 10px; color: #444444;    }
#aboutus h2, #history h2,
#performance h2 {font-size: 35px;  font-weight: 600; margin-bottom: 50px;}

#aboutus h3, #history h3{font-family: var(--gmarket); font-size: 50px; font-weight: 500; position: relative; margin: 50px 0 70px;}
#aboutus h3::before{position: absolute; content: ""; background: url(/img/bg_comma_l.png) no-repeat; background-size: 40px; left: 3px; top: -45px; width: 40px; height: 35px;   }
#aboutus h3::after{position: absolute; content: ""; background: url(/img/bg_comma_r.png) no-repeat; background-size: 40px; left: 3px; bottom: -40px; width: 40px; height: 35px;  }

#aboutus p{font-size: 22px;  line-height: 40px;  word-break: keep-all;}
#aboutus img, #business img {width: 100%; }

#history  {padding: 50px 10px 0; color: #444444; background-color: var(--bg_gray);   }

#history p {font-size: 22px;  line-height: 40px;  word-break: keep-all;}

.history .timeLine{background: url(/img/bg_cow.png) left bottom no-repeat; background-size: 40%; position: relative; }
.history .timeLine:after {
    content: '';
    position: absolute;
    left: calc(50% - 0.5px);
    top: 12px;
    width: 1px;
    height: 90%;
    background: #fe8012;
    z-index: -1;
    opacity: 0.5;
}
.history .timeLine > li {display: flex;    padding: 0 0 50px; font-size: 20px;}
.history .timeLine > li .leftArea {text-align: right; width: calc(50% - 50px); }
.history .timeLine > li .rightArea { width: calc(50% - 50px); }

.history .timeLine > li .leftArea h4 {font-size: 50px; font-weight: 600; color: var(--main-color2)}
.history .timeLine > li > div.iconArea {    display: flex;    justify-content: center;    align-items: flex-start;    width: 100px;}
.history .timeLine > li > div.iconArea i {
    width: 26px;
    height: 26px;
    background: radial-gradient(var(--main-color2) 30%, #fff 30%);
    border: 1px solid var(--main-color2);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-top: 12px;
}
.history .timeLine > li .rightArea p {display: inline-block; font-size: 24px; font-weight: 600; 
    font-family: var(--gmarket); text-align: center; width: 60px; margin-right: 20px;}
.history .timeLine > li .rightArea {padding-top: 10px;}
.history .timeLine > li .rightArea li {display: flex; justify-items: left; align-items: flex-start;     margin-bottom: 10px;}
.history .timeLine > li .rightArea li span {font-size: 18px; }
.history .timeLine > li .rightArea li > div {padding-top: 3px;}

#performance {margin: 0px auto 100px; }
#performance .bg {background: url(/img/bg_aboutus2.jpg) center center no-repeat ; background-size: cover; height: 450px; margin-bottom: 100px; }
#performance .inner { display: grid;    gap: 30px;    grid-template-columns: 1fr 1fr 1fr;}
    
#performance div.con {background: #f1a07d url(/img/bg_cow.png) left bottom no-repeat ; background-size: 30%; border-radius: 20px;
    padding: 30px 0; text-align: center; font-size: 28px; color: #ffffff; font-family: var(--gmarket); }

@media screen and (max-width: 1200px) { 
    #aboutus h2, #history h2, #performance h2 {font-size: 25px;     margin-bottom: 20px;}
    #aboutus h3, #history h3 {font-size: 30px;}
    
    #aboutus h3::before {background-size: 20px;     top: -24px;        width: 20px;        height: 30px;}
    #aboutus h3::after {background-size: 20px;     bottom: -30px;        width: 20px;        height: 30px;}
    #aboutus p {font-size: 14px;}
    .history .timeLine > li .leftArea h4 {font-size: 20px;}
    .history {margin-top: 100px;}
    .history .timeLine > li .leftArea { width: calc(30% - 50px); }
    .history .timeLine > li .rightArea { width: calc(70% - 50px); }
    .history .timeLine:after { left: 30%;}
   
}    


#business{width: calc(98% - 20px);  max-width: 1300px; margin: 200px auto;  padding: 0 10px; color: #444444;
    display: grid;     grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 50px;   justify-content: space-between; 
    align-items:flex-start;}

#business h3 {font-size: 26px;   font-family: 'Montserrat', sans-serif; font-weight: 600; padding: 20px 0;}
#business p {font-size: 18px;   font-weight: 400;  line-height: 30px; word-break: keep-all; }


@media screen and (max-width: 768px) { 
    #aboutus, #business {margin: 50px auto; display: block; }
    #aboutus h4, #history h4, #business h3 {font-size: 24px; margin-top: 30px;}
    #aboutus p, #history p,  #business p {font-size: 16px; line-height: 26px;}
    .tit_aboutus{height: auto; }
    .tit_aboutus h1{font-size: 20px; padding-bottom: 10px;}
    .tit_aboutus h3{font-size: 18px; line-height: 25px;}

    #history  {padding: 30px 25px;}
    .history .timeLine {background-size: 80%;;}
    .history .timeLine > li {padding-bottom: 20px;}
    .history .timeLine > li > div.iconArea {display: none; }
    .history .timeLine > li {display: block; font-size: 16px;}
    .history .timeLine > li .leftArea  {width: 100%; text-align: left; }
    .history .timeLine > li .rightArea {width: 100%; }
    .history .timeLine > li .rightArea li span {font-size: 14px;}
    .history .timeLine > li .rightArea p {text-align: left; font-size: 18px; width: 40px; margin-right: 0; }
    
    
    .history .timeLine:after {display: none;}
    #performance .bg  {height: 150px; margin-bottom: 50px;}
    #performance .page_width {padding: 0 15px;}
    #performance .inner { grid-template-columns: 1fr ; gap: 10px;}
    #performance div.con {font-size: 18px; padding: 20px; border-radius: 10px; }
}


/* 사업소 안내 */

#localplace  {margin: 120px auto; padding: 0 10px; color: #444444;    }
#localplace p{font-size: 20px;  line-height: 40px;  word-break: keep-all;}

.companypic {width: 100%;  }
.companypic .inner {max-width: 1300px; margin: 100px auto; }
.companypic img {   border-top-left-radius: 30px;     border-bottom-left-radius: 30px}

.localplace_map {padding: 130px 10px 50px; background-color: var(--bg_gray);}
.localplace_map dt {font-size: 20px; font-weight: 700; margin-top: 30px; position: relative; margin-left: 30px;  
    color: var(--main-color);}
.localplace_map dt::before{content: ""; width: 5px; height: 5px; position: absolute; top: 12px; left: -15px; 
    border-radius: 3px;;
     background-color:  var(--main-color);}
.localplace_map dd {font-size: 20px; font-weight: 400; color: var(--gray1); margin-left: 30px;}

.signature  {margin: 120px auto; padding: 0 10px; line-height: 35px; }
.signature h4{color: var(--main-color2);  font-weight: 700; }
.signature p {word-break: keep-all;}

@media screen and (max-width: 768px) { 
    .companypic img {width: 100%; border-radius: 0;}
    .companypic .inner {margin: 50px auto;}
    #localplace {margin: 50px auto;  }
    #localplace p {font-size: 16px; line-height: 26px;}
    .content  h2{font-size: 25px;     }
    .content h2 p {display: block; padding: 10px 0;}
    .content  h4 {font-size: 20px; margin-top: 30px;}
    .content  p {font-size: 16px; line-height: 26px;}

    .localplace_map dt {font-size: 16px; margin-top: 15px;     margin-left: 15px;}
    .localplace_map dd {font-size: 15px;     margin-left: 15px;}
    
    .signature {margin: 50px auto;}
}


#introduceofficial  {margin: 120px auto; padding: 0 10px; color: #444444;    }
#introduceofficial p{font-size: 20px;   word-break: keep-all;}


/* 조직도 */
#organization  {margin: 120px auto; padding: 0 10px; color: #444444;    }
#organization p{font-size: 20px;   word-break: keep-all;}

#organization .org-chart {    display: flex;    flex-direction: column;    align-items: center;}
#organization .ceo {
    position: relative;
    width: 200px; height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 30px; 
    font-weight: 600;
    background: var(--main-color) url(/img/organ_ceo.png) center center no-repeat;
    background-size: cover;
    color: white;
    border-radius: 100px;
    margin-bottom: 80px;
}
#organization .ceo::after{
    position: absolute;
    bottom: -40px;
    left: 50%;
    width: 1px;
    height: 40px;
    background: var(--main-color);
    display: block;
    content: '';
}


#organization .department-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 30px;
    width: 100%;
}
#organization .department-row::before {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--main-color);
    display: block;
    content: '';
    height: 1px; 
    width: calc((500% / 6) + 23px);
}
#organization .department { position: relative;}
#organization .department::before{
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--main-color);
    display: block;
    content: '';
    height: 40px; 
    width: 1px;
}
#organization .department p {background-color: var(--main-color); color: #ffffff; text-align: center;  padding: 10px ;
    font-size: 20px;     font-weight: 600; 
    border-top-right-radius: 20px; border-bottom-left-radius: 20px; }
#organization .team {
    padding: 10px 0;
    margin: 10px 0;
    text-align: center; 
    border: 1px solid var(--main-color);
    font-size: 20px;     font-weight: 500; 
    border-top-right-radius: 20px; border-bottom-left-radius: 20px;}


@media screen and (max-width: 768px) { 
    #organization {margin: 50px auto;  }
    #organization p {font-size: 16px; line-height: 26px;}
    #organization .ceo {
        width: 200px; height: 50px;
        line-height: 50px;
        font-size: 20px; 
        font-weight: 600;
        border-radius: 50px;
        margin-bottom: 40px;
    }
    
    #organization .ceo::after,
    #organization .department::before,
    #organization .department-row::before    { display: none;}
    #organization .department-row {    grid-template-columns: 1fr 1fr 1fr; gap: 10px;}
    #organization .department {margin-bottom: 30px;}
    #organization .department p,
    #organization .team {font-size: 14px; font-weight: 500;}
    
}

/* 사업소개 */
#business_overview  {margin: 120px auto; padding: 0 10px; color: #444444;    }
#business_overview p{font-size: 20px;   word-break: keep-all;}


#production_system {margin: 120px auto; padding: 0 10px; color: #444444;    }
#production_system p{font-size: 20px;   word-break: keep-all;}
#production_system .box { background: var(--bg_gray) url(/img/bg_section3.png) top right no-repeat;  }
#production_system .process1 {display: grid;    gap: 30px 50px;    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;      align-items: center;   }
#production_system .process1 li > img {width: 100%; border-radius: 0px; margin-bottom: 10px;    
      border-top-left-radius: 0.25rem ; border-top-right-radius: 0.25rem }
#production_system .process1 li {position: relative; text-align: center;}
#production_system .process1 li span {font-weight: 600;}

#production_system .process1 li::after{content: ""; width: 30px; height: 24px; background: url(/img/chevron-right.svg) center no-repeat; background-size: 100%; 
    position: absolute;    top: calc(50% - 20px);    right: -34px; }
#production_system .process1  li:last-child::after{display: none;}

#production_system .process2 {display: grid;    gap: 30px 50px;    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;      align-items: center;  position: relative; }
#production_system .process2::after {content: ""; width: 80%; height: 4px; background-color: var(--main-color); 
    position: absolute;    top: calc(50% - 15px);  left: 50%; transform: translate(-50%, -50%);  z-index: 1; }
#production_system .process2 li > img {width: 100%; margin-bottom: 10px;   }
#production_system .process2 li {position: relative; text-align: center;     z-index: 2;}
#production_system .process2 li span {font-weight: 600;}

#experimental_ranch {margin: 120px auto; padding: 0 10px; color: #444444;    }
#experimental_ranch p{font-size: 20px;   word-break: keep-all;}
#experimental_ranch .box { background: var(--bg_gray) url(/img/bg_section3.png) top right no-repeat;  }
#experimental_ranch .append-buttons {grid-template-columns: 170px 1fr; gap: 40px;}
#experimental_ranch .append-buttons p {font-size: 40px; background: url(/img/arrow-up-right.svg) right -3px no-repeat;}
#experimental_ranch .main_section3 {margin: 10px auto;}

#cooperative_ranch {margin: 120px auto; padding: 0 10px; color: #444444;    }
#cooperative_ranch p{font-size: 20px;   word-break: keep-all;}
#cooperative_ranch .box { background: var(--bg_gray) url(/img/bg_section3.png) top right no-repeat;  }
#cooperative_ranch .append-buttons {grid-template-columns: 170px 1fr; gap: 40px;}
#cooperative_ranch .append-buttons p {font-size: 40px; background: url(/img/arrow-up-right.svg) right -3px no-repeat;}
#cooperative_ranch .main_section3 {margin: 10px auto;}



@media screen and (max-width: 768px) { 
    #business_overview {margin: 50px auto;  }
    #business_overview p {font-size: 16px; line-height: 26px;}
    #production_system {margin: 50px auto;  }
    #production_system p {font-size: 16px; line-height: 26px;}
    #production_system .process1 { grid-template-columns: 1fr 1fr ; gap: 30px 30px; align-items: start;  }
    #production_system .process1 li span {font-size: 14px; font-weight: 400;}
    #production_system .process1 li::after {right: -25px;}

    #production_system .process2 { grid-template-columns: 1fr 1fr ; gap: 30px 30px; align-items: start;  }
    #production_system .process2 li span {font-size: 14px; font-weight: 400;}
    
    #experimental_ranch {margin: 50px auto;  }
    #experimental_ranch p {font-size: 16px; line-height: 26px;}
    #experimental_ranch .append-buttons p {font-size: 26px; padding-bottom: 10px;}

    #cooperative_ranch {margin: 50px auto;  }
    #cooperative_ranch p {font-size: 16px; line-height: 26px;}
    #cooperative_ranch .append-buttons p {font-size: 26px; padding-bottom: 10px;}

}