@charset "UTF-8";
:root{
    --mc01: #ff8201;
    --mc02: #22a438;
    --fs80: 8.0rem;
    --fs72: 7.2rem;
    --fs65: 6.5rem;
    --fs60: 6.0rem;
    --fs55: 5.5rem;
    --fs53: 5.3rem;
    --fs50: 5.0rem;
    --fs45: 4.5rem;
    --fs42: 4.2rem;
    --fs40: 4.0rem;
    --fs38: 3.8rem;
    --fs36: 3.6rem;
    --fs35: 3.5rem;
    --fs34: 3.4rem;
    --fs33: 3.3rem;
    --fs30: 3.0rem;
    --fs32: 3.2rem;
    --fs28: 2.8rem;
    --fs27: 2.7rem;
    --fs26: 2.6rem;
    --fs25: 2.5rem;
    --fs24: 2.4rem;
    --fs23: 2.3rem;
    --fs22: 2.2rem;
    --fs21: 2.1rem;
    --fs20: 2.0rem;
    --fs19: 1.9rem;
    --fs18: 1.8rem;
    --fs17: 1.7rem;
    --fs16: 1.6rem;
    --fs15: 1.5rem;
    --fs14: 1.4rem;
    --fs12: 1.2rem;
    --fs09: 0.9rem;
    }

/* 공통 적용 */
    .sub_title {padding-top: 110px;}
    .common1 {padding: 110px 0;}
    section:last-child {padding-bottom: 110px;}
    .sub {color: #262626;}
    @media all and (max-width: 1440px){
        .common1 {padding: 60px 0;}
    }
/* 공통 타이틀 */
.sub_T span {font-size: var(--fs20); font-weight: 700; display: inline-block;}
.sub_T h6 {font-size: var(--fs45); }
.sub_T h6 b {color: var(--mc01); }
.sub_T h5 {font-size: var(--fs50); }
.sub_T h4 {font-size: var(--fs55);  }
.sub_T h3 {font-size: var(--fs60); font-weight: 400; }
.sub_T h3 span {font-size: var(--fs60); font-weight: 700; }
.sub_T h2 {font-size: var(--fs38); font-weight: 700; text-align: center;}
.sub_T h2 span {font-size: var(--fs38); font-weight: 700; color: var(--mc01);}
.sub_T p {font-size: var(--fs22); text-align: center; margin-top: 40px; line-height: 1.4;}
.sub_T .stxt {font-size: var(--fs28); font-weight: 700;color: var(--mc01); display: inline-block; margin-bottom: 25px;}
@media all and (max-width: 1440px){
    .sub_T p { margin-top: 20px; }
}
    /* 회사소개 페이지 */


    /* 회사소개 온자박 */
    .bg1-1 { padding-bottom: 130px; margin-bottom: 110px;}
    #company {position: relative;}
    #company .page1 .box_wrap{display: flex; flex-wrap: wrap;  justify-content: space-between; align-items: center;}
    #company .page1 .box_wrap .imgbox {width: 50%;}
    #company .page1 .box_wrap .imgbox img {width: 100%;}

    #company .page1 .box_wrap .txtbox {width: 45%;}
    #company .page1 .box_wrap .txtbox h2 {font-size: var(--fs38); font-weight: 700;}
    #company .page1 .box_wrap .txtbox p {font-size: var(--fs20); font-weight: 500; line-height: 1.6; margin: 60px 0 110px 0 ;}
    #company .page1 .box_wrap .txtbox td {font-size: var(--fs22); padding-bottom: 20px; }
    #company .page1 .box_wrap .txtbox tr:last-child td {padding-bottom: 0px;}
    #company .page1 .box_wrap .txtbox td:first-child { font-weight: 700; width: 35%; }

 .bot {position:absolute; left:0; bottom:-10%; right:0; overflow: hidden; letter-spacing: -1em; }
.bot .inr {width:200vw; height: 238px; overflow:hidden; }
.bot .inr div {width:120vw; float:left; font-size:16em; font-weight:900; color:#fafafa; letter-spacing:-0.005em;animation:pado2 30s linear infinite;  }
.bot .inr div:first-child {width:80vw;}

@keyframes pado2{
	0%{ transform: translateX(0);}
    100% { transform: translateX(-100vw);}
}
@media all and (max-width: 1720px){
    #company .page1 .box_wrap .txtbox h2 {font-size: var(--fs30); }
    #company .page1 .box_wrap .txtbox p {font-size: var(--fs20);}
    .bot .inr div {font-size:13em; }
}
@media all and (max-width: 1440px){
    .bot .inr div {font-size:10em; }
}
@media all and (max-width: 1200px){
    #company .page1 .box_wrap .imgbox {width: 100%;}
    #company .page1 .box_wrap .txtbox {width: 100%; margin-top: 60px;}
    #company .page1 .box_wrap .txtbox p { margin: 30px 0 60px 0 ; }
    .bot .inr div {font-size:8em; }
}
@media all and (max-width: 900px){
    .bot .inr div {font-size:6em; }
    .bg1-1 { margin-bottom: 60px;}
}
@media all and (max-width: 850px){
    .bot .inr div {font-size:5.5em; }
    .bot {bottom: -12%;}
}
@media all and (max-width: 768px){
    .bot .inr div {font-size:5em; }
}
@media all and (max-width: 650px){
    .bot .inr div {font-size:4.5em; }
    .bg1-1 { margin-bottom: 0;}
    #company .page1 .box_wrap .txtbox h2 {font-size: var(--fs28); }
}

@media all and (max-width: 600px){
    .bot .inr div {font-size:4em; }
}
@media all and (max-width: 550px){
    .bot .inr div {font-size:3.5em; }
}
@media all and (max-width: 500px){
    .bot .inr div {font-size:3em; }
}


    /* 온자박 로고 소개 */
    #company .page2 .box_wrap{display: flex; flex-wrap: wrap;  justify-content: space-between; align-items: end;}
    #company .page2 .box_wrap .imgbox {width: 50%;}
    #company .page2 .box_wrap .imgbox img {width: 100%;}

    #company .page2 .box_wrap .txtbox {width: 45%;}
    #company .page2 .box_wrap .txtbox span {font-size: var(--fs20); font-weight: 700;}
    #company .page2 .box_wrap .txtbox h2 {font-size: var(--fs53); font-weight: 800; line-height: 1.3; margin: 35px 0 75px 0; }
    #company .page2 .box_wrap .txtbox h2 b {color: var(--mc01); font-size: var(--fs53); font-weight: 800;}
    #company .page2 .box_wrap .txtbox p {font-size: var(--fs22); font-weight: 500; line-height: 1.6; }
    
    #company .page2-1 .logo_box {margin-top: 100px; display: flex; justify-content: space-between; flex-wrap: wrap;}
    #company .page2-1 .logo_box li {width: 100%; margin-bottom: 3%;}
    #company .page2-1 .logo_box li img {width: 100%;   height: auto;}
    #company .page2-1 .logo_box .logoh {width: 48.5%;}
    #company .page2-1 .logo_box .logoh img {width: 100%;}

    #company .page2-1 .logo_color {display: flex; justify-content: space-between; flex-wrap: wrap;}
    #company .page2-1 .logo_color .box {width: 23%;; border-radius: 27px 27px; overflow: hidden; border: 1px solid #c5c5c5;}
    #company .page2-1 .logo_color .box span {width: 100%; display: block;}
    #company .page2-1 .logo_color .box .c1{background: #222222;}
    #company .page2-1 .logo_color .box .c2{background: #ff8300;}
    #company .page2-1 .logo_color .box .c3{background: #22a438;}
    #company .page2-1 .logo_color .box .c41{background: #19a78d;}
    #company .page2-1 .logo_color .box .txtbox {padding: 35px 0 35px 40px;}
    #company .page2-1 .logo_color .box .txtbox p{font-size: var(--fs18); color: #989898; line-height: 1.4;}
    #company .page2-1 .logo_down {margin-top: 90px; display: flex; justify-content: center; gap: 0 30px ; align-items: center;}
    #company .page2-1 .logo_down .logo_down_wrap {display: flex; justify-content: space-between; width: 230px; padding: 20px 25px; background: #f2f2f2; border-radius: 50px; }
    #company .page2-1 .logo_down .logo_down_wrap a {font-size: var(--fs16); color: #000;}
    #company .page2-1 .logo_down .logo_down_wrap img {width: 16px; height: auto;} 


    @media all and (max-width: 1440px){
    }
    @media all and (max-width: 1200px){
    }
    @media all and (max-width: 1024px){
        #company .page2 .box_wrap .txtbox h2 {margin: 30px 0 60px 0; }
        #company .page2 .box_wrap .imgbox {width: 100%;}
        #company .page2 .box_wrap .txtbox {width: 100%; margin-top: 60px;}
        #company .page2-1 .logo_box {margin-top: 60px;}
        #company .page2-1 .sub_T p br{display: none;}
        #company .page2-1 .logo_color .box {width: 48.5%; margin-bottom: 3%;}
        #company .page2-1 .logo_color .box img {width: 100%; height: 350px;}
    }
    @media all and (max-width: 900px){
    }
    @media all and (max-width: 850px){
    }
    @media all and (max-width: 768px){
    }
    @media all and (max-width: 650px){
        #company .page2-1 .logo_color .box {width: 100%; margin-bottom: 3%;}
        #company .page2-1 .logo_color .box img {width: 100%; height: 200px;}
        #company .page2-1 .logo_color .box .txtbox {padding: 25px 20px }
        #company .page2-1 .logo_box .logoh {width: 100% }
        #company .page2-1 .logo_down .logo_down_wrap a {font-size: var(--fs14); }
        #company .page2-1 .logo_down .logo_down_wrap {padding: 15px 20px}
        #company .page2-1 .logo_down {gap: 0 15px ; }
    }


/*  다운 연혁 */
#company .page3-1  {overflow: hidden;  padding-bottom: 0 ; }
#company .page3-1 .box_wrap{padding: 110px 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
#company .page3-1 .box_wrap .year{width: 40%;}
#company .page3-1 .box_wrap .year h3 {margin-bottom: 352px; font-size: var(--fs80); font-weight: 700; color: var(--mc01); }
#company .page3-1 .box_wrap .history_wrap{width: 60%;}
#company .page3-1 .box_wrap .history_wrap h3{font-size: 8.0rem; font-weight: 700; background: #fff; padding-bottom: 50px;}
#company .page3-1 .box_wrap .history_wrap h3 b{color: #008435;}



#company .history_wrap{position: relative;}
#company .history_wrap .history_line{position: absolute; width: 1px; height: 110%; background: #c1c1c1; left: 7px; top: 17px;}
#company .history_left{ width: 50%; text-align: right; position: relative; padding-right: 50px; margin-bottom: 40px; display: flex; align-items: baseline;}
/* .history_left img{ width: 100%; margin-top: 20px;} */
#company .history_box h2{font-size: 4.0rem; font-weight: 700; color: #666;  margin-right: 20px;}
#company .history_right{width: 50%; margin: 0 0 0 auto; position: relative; padding-left: 50px; margin-bottom: 40px; display: flex; align-items: baseline;}
#company .history_box .text_box{display: flex; gap: 0px 10px;}
#company .history_box p{ font-size: var(--fs21); font-weight: 500; color: #666; margin-bottom: 10px;}
#company .history_box .text_box img {width: 100%; height: auto;}
#company .history_left::after{content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid rgba(255, 130, 1, 0.5); right: -8px; top: 17px;}
#company .history_right::after{content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid rgba(255, 130, 1, 0.5); left: -8px; top: 17px;}
#company .history_left{width: 100%; padding-left: 30px; padding-right: 0px;text-align: left;}
#company .history_right{width: 100%; padding-left: 30px; padding-right: 0px;}
#company .history_left::after{right: initial; left: -8px;}
#company .history_box{padding-bottom: 30px; margin-bottom: 30px;}
#company .history_box:last-child{border-bottom: 0px; padding-bottom: 0px; margin-bottom: 0px;}
#company .history_box::after{left: 0px; }


#company .page3-2 .sub_T h2{font-size: var(--fs38); font-weight: 700;}
#company .page3-2 .sub_T p{font-size: var(--fs20); font-weight: 500;}
#company .page3-2 .imgbox {display: flex; justify-content: center; margin-top: 100px;}
#company .page3-2 .imgbox img {width: 80%; height: auto; } 

#company .page3-2 .imgbox .page3-2mob {display: none;}
@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #company .page3-1 .box_wrap {justify-content: center;}
    #company .page3-1 .box_wrap{padding: 0 0; margin-top: 60px;}
    #company .year{ display: none; }
    #company .history_box {display: flex; flex-direction: column;}
    #company .history_box p {margin-top: 15px; margin-bottom: 25px; }
    #company .history_left{ width: 100%;}
    #company .page3-1 .box_wrap .history_wrap {width: 100%;}
    #company .history_box .text_box {width: 100%;}
    #company .history_box .text_box .text{width: 100%;}
    #company .history_box h2  {font-size: var(--fs38); margin-top: 8px;}
    #company .history_wrap .history_line {top: 25px; height: 100%;}
    #company .page3-1 .sub_T p br {display: none;}
    #company .history_box {margin-bottom: 0;}
    #company .page3-2 .imgbox {margin-top: 60px;}
    #company .page3-2 .sub_T p br {display: none;}
    #company .page3-2 .imgbox img {width: 100%;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
}
@media all and (max-width: 650px){
    #company .history_wrap .history_line {top: 25px; height: 97.5%;}
    #company .page3-2 .imgbox .page3-2pc {display: none;}
#company .page3-2 .imgbox .page3-2mob {display: block;}
}


/* 오시는길 */
#company .page4-1 .root_daum_roughmap_landing  {width: 100% !important;}
#company .page4-1 .m_info_wrap {margin-top: 60px;}
#company .page4-1 .m_info_wrap  h3 {font-size: var(--fs32); font-weight: 700; margin-bottom: 28px; }
#company .page4-1 .m_info_wrap .map_info {border-top: 1px solid #444;}
#company .page4-1 .m_info_wrap .map_info li{display: flex;  align-items: center; flex-wrap: wrap; border-bottom: 1px solid #efefef;}
#company .page4-1 .m_info_wrap .map_info li h5 {line-height: 42px; width: 20%;  font-size: var(--fs18); font-weight: 600; border-right: 1px solid #efefef;}
#company .page4-1 .m_info_wrap .map_info li:first-child h5 {line-height: 62px; }
#company .page4-1 .m_info_wrap .map_info li p {padding:0 20px; font-size: var(--fs18); font-weight: 600; color: #6d6d6d; line-height: 1.4;}
#company .page4-1 .m_info_wrap .map_info li p br {display: none;}
#company .page4-1 .m_info_wrap .map_info li span { font-size: var(--fs18); font-weight: 600; color: #c5c5c5;}
#company .page4-1 .m_info_wrap .map_info li .cacao {margin-right: 15px; color: #000; font-size: var(--fs16); font-weight: 500; padding: 10px 28px; background: #ffe100; border-radius: 20px;}
#company .page4-1 .m_info_wrap .map_info li .naver {color: #fff; font-size: var(--fs16); font-weight: 500; padding: 10px 28px; background: #03c75a; border-radius: 20px;}
.wrap_controllers {display: none;}

@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    #company .page4-1 .m_info_wrap .map_info li {padding: 25px 0;}
    #company .page4-1 .m_info_wrap .map_info li h5 { width: 100%;  border-right: none; line-height: 0px; font-weight: 700;}
    #company .page4-1 .m_info_wrap .map_info li p {padding: 0 0; padding-top: 15px;  width: 100%;}
    #company .page4-1 .m_info_wrap .map_info li a {margin-top: 15px;}
    #company .page4-1 .m_info_wrap .map_info li:first-child h5 {line-height: 0px; }
    #company .page4-1 .map #daumRoughmapContainer1718873367290 {height: 250px !important;}
    #company .page4-1 .m_info_wrap .map_info li p br {display: block;}
}
@media all and (max-width: 650px){
}

/*비지니스 */
#business .page1 .bpc{display: block !important;}
#business .page1 .bmob{display: none !important;}
@media all and (max-width: 850px){
    #business .page1.bpc{display: none !important;}
    #business .page1 .bmob{display: block !important;}
}
#business .page1 .sub_T h5 {font-weight: 800;}
#business .page1 .sub_T h6 {font-weight: 800; font-size: var(--fs35);}
#business .page1 .sub_T h6 span{font-weight: 800; color: var(--mc01);font-size: var(--fs35);}
#business .page1 .imgwrap {margin: 40px 0 60px 0; width: 100%; display: flex; justify-content: right;}
#business .page1 .imgwrap img {
    width: 90%; /* Initial width */
    /* transition: width 0.3s ease-in-out;  */
  }
#business .page1 .txt p { font-size: var(--fs24); text-align: right; line-height: 1.4;}
#business .page1 .txt p:first-child {margin-bottom: 23px;}
@media all and (max-width: 1440px){
    #business .page1 .txt p br {display: none;}
    #business .page1 .imgwrap img {width: 100%;}
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page1 .imgwrap {margin: 20px 0 40px 0;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
}
@media all and (max-width: 500px){
}

#business .page1-1 .imgbox {padding: 60px; border-radius: 48px; display:  flex; flex-wrap: wrap; justify-content: space-between;}
#business .page1-1 .imgbox img {width: 45%; height: auto;}

@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page1-1 .txtbox h2 br {display: block;}
    #business .page1-1 .txtbox p br {display: none;}
    #business .page1-1 .txtbox p {margin-top: 30px;}
    #business .page1-1 .txtbox h2 {font-size: var(--fs40);}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
    #business .page1-1 .imgbox {padding: 0; }
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
}
@media all and (max-width: 500px){
    #business .page1-1 .imgbox {justify-content: center; gap: 40px 0; padding: 60px 25px; }
    #business .page1-1 .imgbox img {width: 100%; height: auto;}
    #business .page1-1 .txtbox h2 br {display: none;}
}

#business .page1-2 .sub_T h3 span {margin-bottom: 0;}
#business .page1-2 .imgwrap{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; margin-top: 150px; }
#business .page1-2 .imgwrap>div {width: 42%;}
#business .page1-2 .imgwrap .imgleft {display: flex; flex-direction: column; gap: 130px 0;}
#business .page1-2 .imgwrap div img{width: 100%;}
#business .page1-2 .imgwrap .box h4 {font-size: var(--fs32); font-weight: 700; margin: 60px  0 30px 0;}
#business .page1-2 .imgwrap .box p {font-size: var(--fs18); line-height: 1.8; width: 90%;}

@media all and (max-width: 1440px){
    #business .page1-2 .imgwrap>div {width: 48%;}
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page1-2 .imgwrap>div {width: 100%;}
    #business .page1-2 .sub_T h3 {font-size: var(--fs40);}
    #business .page1-2 .sub_T h3 span{font-size: var(--fs40);}
    #business .page1-2 .imgwrap {margin-top: 60px;}
    #business .page1-2 .imgwrap .imgleft {gap: 60px 0; margin-bottom: 40px;}
    #business .page1-2 .imgwrap .box h4 {margin: 40px  0 25px 0; font-size: var(--fs38);}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
    #business .page1-2 .imgwrap .box h4 {font-size: var(--fs32);}
    #business .page2-3 .sub_T h4 br {display: none;}
}
@media all and (max-width: 500px){
    #business .page1-2 .sub_T h3 br {display: none;}
    #business .page1-2 .imgwrap .box h4 {font-size: var(--fs28);}
    
}

.bbanner  {background: var(--mc01); padding: 80px 0; position: relative;  padding-bottom: 135px;}
.bbg1-3 {position: absolute; bottom: 0; right: 6%; width: 30%; height: auto;}
#business .page1-3 h2{font-size: var(--fs45); font-weight: 700; color: #fff;}
#business .page1-3 p{font-size: var(--fs24); color: #fff; margin: 35px 0; line-height: 1.6;}



/* 버튼 */
.bbanner .btn_link { height: 60px; position: relative; float: left; }
.bbanner .activ_button {display: inline-block; z-index: 99; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-decoration: none; cursor: pointer; border: 1px solid #fff; border-radius: 8px; height: 2.5em; width: 7em; padding: 0; outline: none; overflow: hidden; color: #fff; transition: color 0.3s 0.1s ease-out; text-align: center; line-height: 230%; font-size: var(--fs18); font-weight: 300;  }
.bbanner .activ_button::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; content: ''; border-radius: 50%; display: block; width: calc(7em * 2); height: calc(7em * 2); line-height: calc(7em * 2); left: calc(-7em / 2); text-align: center; transition: box-shadow 0.5s ease-out; z-index: -1; }
.bbanner .activ_button:hover { color: var(--mc01); font-weight: 600; }
.bbanner .activ_button:hover::before { box-shadow: inset 0 0 0 7em rgba(255   , 255, 255, 1); }

@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page1-3 p{margin: 25px 0; }
    .bbanner .activ_button {font-size: var(--fs22);}
    .bbanner {margin-bottom: 0; padding: 60px 0; padding-bottom: 110px;}
    #business .page1-3 h2{font-size: var(--fs38);}
    
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    .bbg1-3 { width: 40%; right: 3%;}
    
}
@media all and (max-width: 650px){
    .bbg1-3 { width: 50%;}
}
@media all and (max-width: 500px){
}



#business .page1-4 .sub_T h4 {font-weight: 800;}
#business .page1-4 .sub_T p{text-align: left; line-height: 1.4;}
#business .page1-4 .boxwrap {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 90px;}
#business .page1-4 .boxwrap .box {width: 32%; height: 315px;  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 21px;}
#business .page1-4 .boxwrap .box:nth-child(1) {background: url('../img/bpage1-4img1.png')no-repeat; background-position: center; background-size: cover;}
#business .page1-4 .boxwrap .box:nth-child(2) {background: url('../img/bpage1-4img2.png')no-repeat; background-position: center; background-size: cover;}
#business .page1-4 .boxwrap .box:nth-child(3) {background: url('../img/bpage1-4img3.png')no-repeat; background-position: center; background-size: cover;}
#business .page1-4 .boxwrap .box p { text-align: center; font-size: var(--fs24); font-weight: 400; color: #fff; line-height: 1.4;}
@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page1-4 .sub_T h4 {font-size: var(--fs40);}
    #business .page1-4 .boxwrap {margin-top: 40px;}
}
@media all and (max-width: 900px){
    #business .page1-4 .boxwrap {gap: 23px 0;}
    #business .page1-4 .boxwrap .box {width: 100%;}
    #business .page1-4 .boxwrap .box p {font-size: var(--fs28); }
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
}
@media all and (max-width: 500px){
}

/* 비지니스 위탁급식 */
#business .page2 .spc{display: block !important;}
#business .page2 .smob{display: none !important;}
@media all and (max-width: 650px){
    #business .page2 .spc{display: none !important;}
#business .page2 .smob{display: block !important;}
}
#business .page2 h3{ font-size: var(--fs40); font-weight: 700; text-align: right; margin: 65px 0 40px 0; color: #666;}
#business .page2 p{ font-size: var(--fs24);  text-align: right; line-height: 1.4; color: #666;}
#business .page2 .imgbox {width: 100%;}
#business .page2 .imgbox img {width: 100%; height: auto;}
@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page2 h3 {margin: 40px 0 25px 0; font-size: var(--fs34)}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
    #business .page2 p br {display: none;}
}
@media all and (max-width: 500px){
}

#business .page2-1 .sub_T h4{ font-weight: 700;}
#business .page2-1 .sub_T p{ font-size: var(--fs24);   line-height: 1.4; text-align: left;}
#business .page2-1 .imgwrap{margin-top: 70px; display: flex; justify-content: space-between; flex-wrap: wrap; }
#business .page2-1 .imgwrap img{width: 47.5%;}

@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page2-1 .sub_T h4 {font-size: var(--fs40);}
    #business .page2-1 .imgwrap {margin-top: 40px;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
    #business .page2-1 .imgwrap {gap: 23px 0;}
    #business .page2-1 .imgwrap img{width: 100%;}
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
}
@media all and (max-width: 500px){
}

.bbg2-2 {background: #f7f6f1;}
#business .page2-2 .sub_T  h4 {font-weight: 800;}
#business .page2-2 .sub_T span {color: var(--mc01); }
#business .page2-2 .iconbox {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 70px;}
#business .page2-2 .iconbox li {width: 32%; padding: 80px 0; display: flex; justify-content: center;  flex-wrap: wrap; background: var(--mc01); border-radius: 14px;}
#business .page2-2 .iconbox li .imgwrap {width: 100%; display: flex; justify-content: center;}
#business .page2-2 .iconbox li img {height: 105px; width: auto; margin: 0 auto;}
#business .page2-2 .iconbox li h3 {margin: 45px 0 25px 0; font-size: var(--fs50); font-weight: 700;  text-align: center; color: #fff; width: 100%; text-align: center;}
#business .page2-2 .iconbox li p {font-size: var(--fs18); font-weight: 400;  text-align: center; color: #fff; line-height: 1.4;}

@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page2-2 .sub_T h4 {font-size: var(--fs40);}
    #business .page2-2 .iconbox {margin-top: 40px;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
    #business .page2-2 .iconbox {gap: 23px 0;}
    #business .page2-2 .iconbox li {width: 100%; padding: 40px 0; }
    #business .page2-2 .iconbox li h3 {margin: 25px 0 15px 0;}
    #business .page2-2 .iconbox li p {font-size: var(--fs24); }
    #business .page2-2 .iconbox li img {height: 80px;}
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
}
@media all and (max-width: 500px){
}

#business .page2-3  { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; }
#business .page2-3 .sub_T {width: 50%; }
#business .page2-3 .sub_T span {color: var(--mc01);}
#business .page2-3 .sub_T h4 { font-weight: 700;}
#business .page2-3 .boxwrap {width: 50%;}
#business .page2-3 .boxwrap .box {position: relative; padding-top: 65px; padding-bottom: 90px;}
#business .page2-3 .boxwrap div:last-child {padding-bottom: 0;}
#business .page2-3 .boxwrap h4 { font-size: var(--fs50); font-weight: 700;color: #d1d1d1; margin-bottom: 35px;}
#business .page2-3 .boxwrap p {font-size: var(--fs24); color: #d1d1d1;}
#business .page2-3 .boxwrap span {position: absolute; left: 0; top: -12%; font-size: 150px; font-weight: 700; color:#f9f9f9;}

  /* highlight 클래스 스타일 추가 */
  #business .page2-3 .boxwrap .box.highlight h4 {
    color: #333333;
}

#business .page2-3 .boxwrap .box.highlight p {
    color: #818181;
}

#business .page2-3 .boxwrap .box.highlight span {
    color: #f7f7f7;
}
@media all and (max-width: 1570px){
    #business .page2-3 .sub_T {width: 100%; }
    #business .page2-3 .boxwrap {width: 100%; margin-top: 40px;}
}
@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page2-3 .sub_T h4 {font-size: var(--fs40); margin-bottom: 0px;}
    #business .page2-3 .boxwrap span {top: -16%; }
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
}
@media all and (max-width: 500px){
}

#business .page2-4 .sub_T span {color: var(--mc01);}
#business .page2-4 .sub_T p {text-align: left;}
#business .page2-4 .sub_T b {font-size: var(--fs55); font-weight: 700;}
#business .page2-4 .boxwrap {display: flex; flex-wrap: wrap;  justify-content: space-between; margin-top: 120px;}
#business .page2-4 .boxwrap li {width: 32%;  box-shadow: 0 0 15px 3px  rgba(27  , 26    ,25, 0.08); padding: 45px 0; border-radius: 30px;}
#business .page2-4 .boxwrap li .imgwrap {display: flex; justify-content: center; margin: 50px 0;}
#business .page2-4 .boxwrap li .imgwrap img{ width: auto; height: 200px;}
#business .page2-4 .boxwrap li h3 {font-size: var(--fs32); font-weight: 700; color: var(--mc01); text-align: center;}
#business .page2-4 .boxwrap li p {font-size: var(--fs20); font-weight: 500; text-align: center; line-height: 1.4; color: #666;}

@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    #business .page2-4 .boxwrap {margin-top: 40px;}
    #business .page2-4 .boxwrap li .imgwrap {margin: 25px 0;}
    #business .page2-4 .boxwrap li h3 {font-size: var(--fs38);}
    #business .page2-4 .boxwrap li p {font-size: var(--fs24);}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
    #business .page2-4 .boxwrap {gap: 23px 0;}
    #business .page2-4 .boxwrap li {width: 100%;}
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
    #business .page2-4 .sub_T p br {display: none;}
}
@media all and (max-width: 500px){
}


/* 비지니스 유통 */
#business .page3 .sub_T h6  {font-weight: 800; text-align: center;}
#business .page3 .img_box {text-align: center; margin-top: 60px;}
#business .page3 .img_box img {max-width: 691px; width: 90%; height: auto; }

.bbg3-2 {background: #f7f6f1;}
#business .page3-2 .sub_T .stxt {text-align: center; display: block;}
#business .page3-2 .sub_T h4 {font-weight: 800; text-align: center; margin-top: 25px;}
#business .page3-2 .sub_T h4 br {display: none;}

#business .page3-2 .box_wrap{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px 0; margin-top: 70px;}
#business .page3-2 .box_wrap .box {width: 49%; background: #fff; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; max-height: 190px; height: auto; padding: 30px 30px 30px 0; box-sizing: border-box;}
#business .page3-2 .box_wrap .box .img_box{width: 22%; text-align: center;}
#business .page3-2 .box_wrap .box .img_box img {height: auto; width: 70px;}
#business .page3-2 .box_wrap .box .txt_box{width: 78%; }
#business .page3-2 .box_wrap .box .txt_box h6  {font-size: var(--fs28); font-weight: 700;}
#business .page3-2 .box_wrap .box .txt_box h6  br {display: none;}
#business .page3-2 .box_wrap .box .txt_box p  {font-size: var(--fs18); color: #818181; line-height: 1.6; margin-top: 5px;}

#business .page3-3 .sub_T .stxt {text-align: center; display: block;}
#business .page3-3 .sub_T h4 {font-weight: 400; text-align: center; margin-top: 25px;}
#business .page3-3 .sub_T h4 b {font-weight: 800;}

#business .page3-3 .box_wrap {margin-top: 120px;}
#business .page3-3 .box_wrap .box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 100px;}
#business .page3-3 .box_wrap .box:last-child {margin-bottom: 0;}
#business .page3-3 .box_wrap .img_box {width: 50%; }
#business .page3-3 .box_wrap .img_box img {max-width: 576px; width: 100%;}
#business .page3-3 .box_wrap .right .img_box {text-align: right;}
#business .page3-3 .box_wrap .txt_box {width: 50%;}
#business .page3-3 .box_wrap .right .txt_box {text-align: right;} 

#business .page3-3 .box_wrap .txt_box h6 {font-size: var(--fs38); font-weight: 700;}
#business .page3-3 .box_wrap .txt_box p  {font-size: var(--fs21); line-height: 1.8; margin-top: 30px;}
#business .page3-3 .box_wrap .txt_box p b {font-weight: 600;}


@media all and (max-width: 1500px){

    #business .page3-2 .box_wrap .box {width: 100%;}

    #business .page3-3 .box_wrap .img_box {width: 45%; }
#business .page3-3 .box_wrap .txt_box {width: 50%;}
#business .page3-3 .box_wrap .txt_box h6 br {display: none;}
#business .page3-3 .box_wrap .txt_box p br {display: none;}

}


@media all and (max-width: 1024px){
    
    #business .page3-3 .box_wrap .img_box {width: 100%; order: 1;}
    #business .page3-3 .box_wrap .img_box img {max-width: 1024px;}
    #business .page3-3 .box_wrap .txt_box {width: 100%;order: 2; margin-top: 40px;}
#business .page3-3 .box_wrap .right .img_box {text-align: left;}
#business .page3-3 .box_wrap .right .txt_box {text-align: left;} 
#business .page3-3 .box_wrap .txt_box h6 br {display: block;}
#business .page3-3 .box_wrap .txt_box p br {display: block;}

}

@media all and (max-width: 768px){
    #business .page3 .sub_T h6 {font-size: var(--fs38);}
    #business .page3 .sub_T h6 span {display: block;}
    #business .page3 .sub_T p br  {display: none;}
    #business .page3-2 .sub_T h4 {font-size: var(--fs40);}
    #business .page3-2 .sub_T h4 br {display: block;}
    #business .page3-2 .box_wrap .box {padding: 25px 15px 25px 0; }
    #business .page3-2 .box_wrap .box .img_box{width: 35%; }
    #business .page3-2 .box_wrap .box .img_box img {height: auto; width: 55px; }
#business .page3-2 .box_wrap .box .txt_box{width: 65%; }
#business .page3-2 .box_wrap .box .txt_box h6  br {display: block;}
#business .page3-2 .box_wrap .box .txt_box p br{display: none;}

#business .page3-3 .box_wrap {margin-top: 60px;}
#business .page3-3 .box_wrap .box {margin-bottom: 60px;}
#business .page3-3 .sub_T h4 {font-size: var(--fs40);}
#business .page3-3 .box_wrap .txt_box h6 br {display: none;}
#business .page3-3 .box_wrap .txt_box p br {display: none;}
}



/* 고객센터 */
.contact_wrap {margin-top: 120px;}
.contact_wrap .con_title {display: flex; flex-wrap: wrap;  align-items: center; padding-bottom: 25px; border-bottom: 4px solid #666;}
.contact_wrap .con_title h2 {font-size: var(--fs42); font-weight: 700; }
.contact_wrap .con_title span {font-size: var(--fs22); font-weight: 600; color: var(--mc01); margin-left: 25px;}

.contact_wrap .first {margin-top: 42px;}
.contact_wrap .in_box_wrap { padding: 11px 0; display: flex; align-items: center; flex-wrap: wrap;}
.contact_wrap .in_box_wrap2 {align-items: flex-start;}
.contact_wrap .in_box_wrap2 h2 {margin-top: 14px;}
.contact_wrap .in_box_wrap h2 {width: 20%; font-size: var(--fs22); font-weight: 600;}
.contact_wrap .in_box_wrap .star {margin-left: 5px; font-size: var(--fs28); font-weight: 600; color: var(--mc01);}
.contact_wrap .in_box_wrap .box {width: 80%;}

.contact_wrap .in_box_wrap .ra_box label{margin-left: 10px;display: inline-block;  font-size: var(--fs20); font-weight: 500; margin-right: 150px;}
.contact_wrap .in_box_wrap .ra_box label:last-child {margin-right: 0;}
.contact_wrap .in_box_wrap .in_box input {height: 64px; width: 100%; border: 1px solid #b4b4b4;  border-radius: 5px ; }
.contact_wrap .in_box_wrap .in_box input::placeholder {font-size: var(--fs20); font-weight: 500; color: #b4b4b4; line-height: 64px; padding: 18px 0 18px 18px;}
.contact_wrap .in_box_wrap .in_box textarea { width: 100%; border: 1px solid #b4b4b4;  border-radius: 5px ;  height: 270px;}
.contact_wrap .in_box_wrap .in_box textarea::placeholder { font-size: var(--fs20); font-weight: 500; color: #b4b4b4; line-height: 1.4; padding: 18px 18px 18px 18px;}


.contact_wrap .in_box_wrap .p_in_box { display: flex; flex-wrap: wrap; justify-content: space-between;}
.contact_wrap .in_box_wrap .p_in_box input{width: 68%;}
.contact_wrap .in_box_wrap .p_in_box button{width: 30%; border: none; transition: all 0.2s; background: #333; color: #fff;font-size: var(--fs22); font-weight: 600; border-radius: 5px; } 
.contact_wrap .in_box_wrap .p_in_box .full {width: 100%; margin-top: 2%;}
.contact_wrap .in_box_wrap .p_in_box button:hover {background: var(--mc01);}

.contact_wrap .contact_agree {margin-top: 120px;  }
.contact_wrap .contact_agree .check {padding: 18px 0;}
.contact_wrap .checkbox_wrap label {margin-left: 10px; font-size: var(--fs22); font-weight: 500;}
.contact_wrap .checkbox_wrap label span{cursor: pointer; border-bottom: 1px solid var(--mc01);font-size: var(--fs22); font-weight: 500; color: var(--mc01);}

.contact_wrap .con_btn {width: 100%; display: flex; transform: all 0.2s; justify-content: center; background: #fff; margin: 120px 0;}
.contact_wrap .con_btn p {width: 300px; border: none; background: #333; transition: all 0.2s; color: #fff;font-size: var(--fs24); font-weight: 600; border-radius: 5px; line-height: 64px;}
.contact_wrap .con_btn p:hover {background: var(--mc01);}
@media all and (max-width: 1440px){
}
@media all and (max-width: 1200px){
}
@media all and (max-width: 1024px){
    .contact_wrap .first {margin-top: 30px;}
    .contact_wrap .contact_agree {margin-top: 60px;  }
    .contact_wrap .in_box_wrap {padding: 10px 0;}
    .contact_wrap .contact_agree .check{padding: 15px 0;}
    .contact_wrap .con_btn { margin: 60px 0;}
    .contact_wrap .con_title span {margin-left: 15px;}
    .contact_wrap .con_title h2  {font-size: var(--fs36); padding: 5px 0;}
}
@media all and (max-width: 900px){
}
@media all and (max-width: 850px){
}
@media all and (max-width: 768px){
    
}
@media all and (max-width: 650px){
    .contact_wrap .in_box_wrap h2 {width: 100%; margin-bottom: 15px;}
    .contact_wrap .in_box_wrap .box {width: 100%;}
    .contact_wrap .in_box_wrap .ra_box label{ margin-right: 120px;}
    .contact_wrap .in_box_wrap .p_in_box input{width: 65%;}
.contact_wrap .in_box_wrap .p_in_box button{width: 33%; }
.contact_wrap .in_box_wrap .in_box textarea {height: 200px;}
}
@media all and (max-width: 500px){
}



input[type="radio"] {
    -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거 */
    -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거 */
    appearance: none; /* 기본 스타일 제거 */
    width: 20px; /* 크기 지정 */
    height: 20px; /* 크기 지정 */
    border-radius: 5px;
    border: 2px solid #c6c4c1; /* 테두리 스타일과 색상 지정 */
    cursor: pointer;
}
input[type="radio"]:checked {
    background-color: var(--mc01);
    border: 2px solid var(--mc01); /* 선택된 경우 배경색 변경 */
}

input[type="checkbox"] {
    -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거 */
    -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거 */
    appearance: none; /* 기본 스타일 제거 */
    width: 20px; /* 크기 지정 */
    height: 20px; /* 크기 지정 */
    border-radius: 5px;
    border: 2px solid #c6c4c1; /* 테두리 스타일과 색상 지정 */
    cursor: pointer;
    outline: none; /* 포커스 시 테두리 제거 */
}

/* 체크된 상태의 스타일 */
input[type="checkbox"]:checked {
    background-color: var(--mc01); /* 체크된 상태의 배경색 */
    border-color: var(--mc01); /* 체크된 상태의 테두리 색상 */
}

/* 체크 마크 모양 */
input[type="checkbox"]::before {
    content: '\2713'; /* 체크 마크 유니코드 */
    display: inline-block;
    font-size: 18px; /* 체크 마크 크기 */
    line-height: 20px; /* 체크 마크 세로 정렬을 위한 높이 */
    text-align: center; /* 가운데 정렬 */
    color: #fff; /* 체크 마크 색상 */
    visibility: hidden; /* 초기에는 보이지 않도록 */
}

/* 체크된 상태에서 체크 마크 보이기 */
input[type="checkbox"]:checked::before {
    visibility: visible;
}

/* 채널톡 */
.dRSlBL {max-width: 360px; width: 100%; right: 0; bottom: 0;}

/* 게시판 */
#bo_list_total {font-size: var(--fs16); color: #666; font-weight: 500; width: 90px;}
#bo_list_total span {font-size: var(--fs16);color: #666; font-weight: 500;}
.view_btn {font-size: var(--fs16);}
/* 폰트 사이즈 변경 */
@media all and (max-width: 1400px) {
    html{font-size: 55% !important;}
}
/* 갤러리 */
@media all and (max-width: 1024px) {
}

@media all and (max-width: 850px) {
    html{font-size: 45% !important;}
}