/******************************************
상단 타이틀 
********************************************/
.title-box { padding: 70px 0; text-align: center; } 
.title-box h3 { width: 100%; display: block; font-size: 5rem; font-weight: 700; } 
.title-box p { font-size: 1.8rem; padding-bottom: 0; padding-top: 1rem; } 
.title-box .navi { width: 100%; display: block; color: #888888; } 
.arrow-pd { padding: 0 4px; } 


@media screen and (max-width: 1280px){
 .title-box { padding: 80px 0; } 
 }

@media screen and (max-width: 1024px){
 .title-box { padding: 60px 0; } 
 }

@media screen and (max-width: 768px){
 .title-box { padding: 30px 0; } 
 .title-box p { font-size: 12px } 
 }
 
.sub-content { margin-bottom: 10rem; } 


/******************************************
회사소개
********************************************/
/* 인사말 */
.greeting-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8rem; } 
.greeting-left { flex: 1 1 480px; } 
.greeting-left img { width: 100%; border-radius: 0 80px 0 80px; } 
.greeting-right { flex: 1 1 500px; } 
.greeting-right h2 { font-size: 18px; color: #333; margin-bottom: 10px; font-weight: 400; } 
.greeting-right h1 { font-size: 30px; font-weight: 700; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #d6d6d6; } 
.greeting-right p { font-size: 20px; line-height: 1.8; margin-bottom: 15px; letter-spacing: -.7px; font-weight: 500; } 
.greeting-right p strong { color: #295c9b; font-weight: bold; } 
.greeting-sign { margin-top: 40px; } 
.greeting-sign span { display: block; margin-top: 10px; font-weight: bold; } 

/* 회사정보 */
.feature { width: 100%; display: flex; } 
.feature li { color: #333333; width: 33%; padding: 25px 0; border-right: 1px solid rgba(0,0,0,0.2); } 
.feature li:first-child { border-left: 1px solid rgba(0,0,0,0.2); } 
.feature li .icon { text-align: center; padding-bottom: 20px; } 
.feature li .icon i { font-size:4rem; } 
.feature li .txt { text-align: center; } 
.feature li .txt h5 { font-size: 2.2rem; font-weight: 600; color: #000000; padding-bottom: 10px; } 
.feature li .txt p { color: #464646; font-size: 1.8rem; letter-spacing: -.7px; } 

/* 미션과 비전 */
.core{margin: 10rem 0;}
.core .tit{font-size: 2rem; text-align: center; width: 100%; display: block; font-size: 4.5rem; font-weight: 700; color: #204e86; margin-bottom: 3rem;}
.core-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } 
.core-box {width: calc(100% / 3 - 20px); padding: 40px 30px; color: #fff; /* border-radius: 40% / 20%; */ display: flex; flex-direction: column; align-items: center; } 
.core-box img { width: 64px; /* margin-bottom: 20px */; } 
.core-box h3 { font-size: 2.8rem; font-weight: 600; margin: 10px 0 12px;} 
.core-box p {  font-size: 20px; letter-spacing: -.7px; line-height: 1.6; text-align: center;} 
.integrity { background-color: #6798d3; } 
.proactive { background-color: #204e86; } 
.innovation { background-color: #2d2d2d; } 


@media screen and (max-width: 1024px){
 .feature li:first-child { border-left: 0; } 
 .feature li:last-child { border-right: 0; } 
 }

@media screen and (max-width: 980px){
 .greeting-wrap { flex-direction: column; } 

 .core {margin: 5rem 0;}
 .core-wrap{flex-direction: column; gap: 0;  }
 .core-box{width: 100%;}
 
 .feature{flex-wrap: wrap;row-gap: 4rem;}
 .feature li:nth-child(4){border-right: 0; }
 }

@media screen and (max-width: 768px){
 .feature li .img img { width: 40px; } 
 }

@media screen and (max-width: 480px){
    .feature li{width: 100%;}
    .feature li:nth-child(1),
    .feature li:nth-child(2){border-right: 0; }
 }




/******************************************
사업분야
********************************************/
.biz-section { padding: 60px 20px; display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; } 
.biz-left { flex: 1 1 170px; } 
.biz-left h2 { font-size: 32px; font-weight: 800; margin-bottom: 20px; line-height: 1.3; } 
.btn-view { display: inline-block; padding: 12px 50px; border: 1px solid #ccc; font-weight: 500; text-decoration: none; color: #000; font-size: 18px; transition: all 0.3s; } 
.btn-view:hover { background-color: #204e86; color: #fff; } 
.biz-right { flex: 1 1 800px; } 
.biz-right img { width: 100%; height: auto; margin-bottom: 15px; border-radius: 4px; } 
.biz-desc { font-size: 20px; letter-spacing: -.7px; line-height: 1.6; font-weight: 500; color: #000; margin-bottom: 30px; } 
.biz-keywords { background-color: #f7f7f7; padding: 15px 20px; display: flex; justify-content: space-around; flex-wrap: wrap; } 
.biz-keywords span { font-size: 18px; color: #295c9b; font-weight: 700; } 

@media (max-width: 768px){
 .biz-section { flex-direction: column; } 
 .biz-left, .biz-right { flex: 1 1 100%; } 
 .biz-keywords { justify-content: flex-start; gap: 20px; } 
 }


/******************************************
영업품목
********************************************/
/* 탭메뉴 */
.prd_tab { color:#888; position:relative; } 
.prd_tab .tab-menu ul { display: flex; flex-wrap: wrap; justify-content: center; } 
.prd_tab .tab-menu ul li { width: 25%; } 
.prd_tab .tab-menu.Tab3 ul li { float:left; width:33.3%; } 
.prd_tab .tab-menu ul li:last-child { border:0; } 
.prd_tab .tab-menu ul li:first-child a { margin-left:1px; } 
.prd_tab .tab-menu ul li a { display:block; padding:20px 10px; background:#fff; color:#888; text-decoration:none; border:1px solid #ddd; margin-left:-1px; text-align: center; font-size:20px; } 
.prd_tab .tab-menu ul li a.active { background: #104770; color:#fff; border:1px solid #104770; font-weight: bold; } 
.prd_tab .tab-content { display:none; clear:both; } 
.prd_tab.tab_two .tab-menu ul li { float:left; width:50%; } 
.prd_tab.tab_six .tab-menu ul li { float:left; width:16.6%; } 

/* 제품 */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; } 
.product-item { text-align: center; background: #eee; padding: 10px; border-radius: 15px; } 
.product-item img { width: 100%; height: auto; border-radius: 10px; } 
.product-title { font-size: 24px; font-weight: bold; margin-top: 10px; color: #222; } 
.product-subtitle { font-size: 20px; color: #666; margin-top: 5px; } 


@media screen and (max-width:1280px){
 .prd_tab .tab-menu ul li,.petcare .prd_tab .tab-menu ul li { width:50%; margin-bottom:-1px; } 
 }

 @media screen and (max-width:1024px){
 .product-grid { grid-template-columns: repeat(2, 1fr); } 
 }

 @media screen and (max-width:960px){
 .prd_tab.tab_six .tab-menu ul li { float:left; width:33.3%; margin-bottom:-1px; } 
 .prd_tab.tab_six .tab-menu ul li a { margin-left:-1px; } 
 .prd_tab.tab_six .tab-menu ul li:nth-child(3) a { margin-left:-1px; } 
 }

 @media screen and (max-width: 600px){
 .product-grid { grid-template-columns: 1fr; } 
 }

 @media screen and (max-width:640px){
 .prd_tab { padding-top:20px; } 
 .prd_tab .tab-menu ul li a { padding:15px 10px; font-size:16px; } 
 .prd_tab .tab-menu ul li:nth-child(3) a { margin-left:1px; } 
 .prd_tab.tab_six .tab-menu ul li a { font-size:15px; } 
 .prd_tab .tab-menu ul li em { display:none; } 
 }
 @media screen and (max-width:480px){
 .prd_tab .tab-menu ul li a { padding: 15px 4px; font-size: 14px; } 
 }
 @media screen and (max-width:375px){
 .prd_tab .tab-menu ul li a { font-size: 11px; } 
 }

/******************************************
오시는 길
********************************************/
.map .map_img { height: 450px; border: 1px solid #DDDDDD; } 
 ul.address { border-top: 1px solid #DDDDDD; padding-bottom: 0 !important; } 
 .address li { width: 100%; display: table; position: relative; border-bottom: 1px solid #DDDDDD; } 
 .address li .tit { color: #000000; background: #F5F5F5; width: 20%; display: table-cell; vertical-align: middle; padding: 20px 30px; font-size: 1.8rem; font-weight: 600; } 
 .address li .tit i { color: #001f60; font-size: 135%; font-weight: 500; margin-right: 15px; vertical-align: middle; } 
 .address li .txt { width: 80%; display: table-cell; vertical-align: middle; padding: 20px; font-size: 1.8rem; font-weight: 600; } 
 

 @media screen and (max-width: 768px){
 .map .map_img { height: 300px; } 
 .address li .tit { width: 25%; padding: 15px; } 
 .address li .txt { width: 72%; padding: 15px; } 
 }
 
 @media screen and (max-width: 480px){
 .map .map_img { height: 250px; } 
 .address li { padding: 15px; } 
 .address li .tit { width: 100%; display: inline-block; background: #FFFFFF; padding: 0; padding-bottom: 5px; } 
 .address li .tit i { margin-right: 7px; } 
 .address li .txt { width: 100%; display: inline-block; padding: 0; } 
 }