/* 메인 비주얼 */
#main{
background-image: url(../images/biz-areas-bg.png);
background-position: center center;
background-size: cover;
width: 100vw;
height: 460px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#main h2{
margin-top: 50px;
font-size: var(--font-headline-small);
color: var(--gray-500);
font-weight: 700;
text-align: center;
}
#main p{
margin-top: 30px;
font-size: var(--font-body-medium);
color: var(--gray-500);
line-height: 1.5;
text-align: center;
}

/***************** IT 서비스 페이지 ***************/
#contents{
width: 100vw;
position: relative;
}
.si-container {
margin-top: 7.81vw;
}
.si-container .top-tab {
width: 100%;
padding:0 var(--padding-width-large);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.si-container .top-tab ul{
display: flex;    
margin-bottom: var(--padding-height-large);
}
.si-container .top-tab ul > li{
padding: 15px 30px;   
margin-right: -1px;
border: 1px solid var(--gray-200);
}
.si-container .top-tab ul > li a{
color: var(--gray-300);
font-size: var(--font-body-small);
text-decoration: none;
}
.si-container .top-tab ul > li.active{
z-index: 0;
border: 1px solid var(--navy-500);    
}
.si-container .top-tab ul > li.active a{
color:var(--navy-500);    
}
.si-container .top-tab .sub-text{
width: 100%;
text-align: center;
font-size: var(--font-body-large);   
margin-bottom: var(--padding-height-large);
color: var(--gray-500);
}
.si-container .si-process{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
background-color: var(--gray-100);
}
.si-container .si-process h4, .si-container .core-tech h4, .si-container .biz-conduct h4,
.si-container .ito-purpose h4, .si-container .ito-area h4{
width: 100%;
text-align: center;
margin-bottom: 3.13vw;
font-size: 600;
font-size: var(--font-title-medium);
}
h4.tab-title{
width: 100%;
text-align: center;
margin-bottom: 3.13vw;
font-weight: 600;
font-size: var(--font-title-medium);
}
.si-container .si-process img{
width: 100%;
height: auto;
max-width: 1320px;
}
.si-container .core-tech{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);     
}
.si-container .core-tech ul{
display: flex;
gap: 2.08vw;
flex-wrap: wrap;
}
.si-container .core-tech ul > li {
width: calc(20% -  2.08vw);
border-radius: 15px;
border: 1px solid var(--Gray200, #EBEBEB);
background: #FFF;
padding: 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 0.25);   
}
.si-container .core-tech ul > li img{
width: 100%;
height: auto;
}
.si-container .core-tech ul > li p{
width: 100%;
margin-top: 30px;
text-align: center;
font-size: var(--font-body-medium);
}
.si-container .biz-conduct{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
background-color: var(--gray-100);
}
.si-container .biz-conduct > ul {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.si-container .biz-conduct > ul > li{
width: calc(50% - 2.60vw);
padding: 2.08vw 2.60vw;
background-color: var(--blue-300);
color: var(--default-white);
border-radius: 15px;
text-align: center;
font-size: var(--font-body-medium);
}
.si-container .biz-conduct > ul > li:nth-child(2){
background-color: var(--navy-400);;
}
.si-container .biz-conduct > ul > li:nth-child(3){
background-color: var(--navy-300);;
}
.si-container .biz-conduct > ul > li:nth-child(4){
background-color:#44A5FF;
}

.si-container .ito-purpose{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:0 var(--padding-width-large) var(--padding-height-large) var(--padding-width-large);  
}
.si-container .ito-purpose > ul{
display: flex;
gap: 40px;
flex-wrap: wrap;
}
.si-container .ito-purpose > ul > li{
width: calc(33.33% - 40px);
padding: 40px;
border-radius: 15px;
border: 1px solid var(--gray-200);
background: #FFF;
box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 0.25);
display: flex;
gap: 50px;
align-items: center;
}
.si-container .ito-purpose > ul > li > div{
display: flex;
flex-wrap: wrap;
}
.si-container .ito-purpose > ul > li .content h5{
font-size: 1.04vw;
width: 100%;
}
.si-container .ito-purpose > ul > li .content p{
margin-top: 26px;    
font-size: var(--font-body-xsmall);
color: var(--gray-400);
}
.si-container .ito-area{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
background-color: var(--gray-100);
}
.si-container .ito-area ul{
display: flex;
gap: 2.08vw;
flex-wrap: wrap;
}
.si-container .ito-area ul > li {
width: calc(20% -  2.08vw);
border-radius: 15px;
border: 1px solid var(--Gray200, #EBEBEB);
background: #FFF;
padding: 2.08vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 0.25);   
}
.si-container .ito-area ul > li img{
width: 100%;
height: auto;
}
.si-container .ito-area ul > li p{
width: 100%;
margin-top: 2.60vw;
text-align: center;
font-size: var(--font-body-medium);
}
.si-container .isp{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
background-color: var(--gray-100);
}
.si-container .isp > ul{
display: flex;
gap: 50px;
width: 100%;
}
.si-container .isp > ul > li{
width: 25%;
border-radius: 30px;   
border: 1px solid var(--gray-200);   
}
.si-container .isp > ul > li .title{
border-top-left-radius: 30px;   
border-top-right-radius: 30px;   
background-color: var(--navy-400); 
color: var(--default-white);
padding: 20px 30px;
font-size: var(--font-title-small);
text-align: center;
}
.si-container .isp > ul > li:nth-child(2) .title{
background-color: #0D5BB6;
}
.si-container .isp > ul > li:nth-child(3) .title{
background-color: var(--navy-300);
}
.si-container .isp > ul > li:nth-child(4) .title{
background-color: var(--navy-500);
}
.si-container .isp > ul > li .text{
background-color: var(--default-white);
padding: 30px 2.60vw;
font-size: var(--font-body-small);
text-align: center;
border-bottom-left-radius: 30px;   
border-bottom-right-radius: 30px;   
min-height: 150px;
}
.si-container .ismp{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
}
.si-container .ismp > ul{
display: flex;
gap: 50px;
width: 100%;
}
.si-container .ismp > ul > li{
width: 25%;
border-radius: 30px;   
border: 1px solid var(--gray-200);   
}
.si-container .ismp > ul > li .title{
border-top-left-radius: 30px;   
border-top-right-radius: 30px;   
border:1px solid var(--navy-400); 
color: var(--navy-400);
padding: 20px 30px;
font-size: var(--font-title-small);
text-align: center;
}
.si-container .ismp > ul > li:nth-child(2) .title{
border:1px solid #0D5BB6;; 
color: #0D5BB6;;
}
.si-container .ismp > ul > li:nth-child(3) .title{
border:1px solid var(--navy-300); 
color: var(--navy-300);
}
.si-container .ismp > ul > li:nth-child(4) .title{
border:1px solid var(--navy-500); 
color: var(--navy-500);
}
.si-container .ismp > ul > li .text{
background-color: var(--default-white);
padding: 30px 50px;
font-size: var(--font-body-small);
text-align: center;
border-bottom-left-radius: 30px;   
border-bottom-right-radius: 30px;   
min-height: 150px;
}
.si-container .brp{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
background-color: var(--gray-100);
}
.si-container .brp > ul{
display: flex;
gap: 30px;
width: 100%;
flex-wrap: wrap;
}
.si-container .brp > ul > li{
width: 100%;
border-radius: 15px;    
display: flex; 
background-color: var(--navy-500); 
color: var(--default-white);
align-items: center;
}
.si-container .brp > ul > li > div{
width: 100%;
}
.si-container .brp > ul > li .title{
width: 60px;
padding: 20px 30px;
font-size: var(--font-body-medium);
text-align: center;
}
.si-container .brp > ul > li:nth-child(2) {
background-color: var(--navy-400);
}
.si-container .brp > ul > li:nth-child(3) {
background-color: #44A5FF;
}
.si-container .brp > ul > li:nth-child(4) {
background-color: var(--blue-300);
}
.si-container .brp > ul > li .text{
padding: 30px 50px;
font-size: var(--font-body-small);
text-align: left; 
}
.si-container .pmo{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
}
.si-container .pmo > p{
font-size: var(--font-body-large);
color: var(--gray-400);
text-align: center;
}
.si-container .pmo > ul{
margin-top: 4.17vw;
display: flex;
gap: 50px;
flex-wrap: wrap;
width: 100%;
}
.si-container .pmo > ul > li{
width: 100%;
display: flex;  
gap: 50px;
}
.si-container .pmo > ul > li .title{
font-size: var(--font-body-large);
width: 250px;
}
.si-container .pmo > ul > li .list{
background-color: #F1FCFF;
border-radius: 30px;    
width: calc(50% - 125px);
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.si-container .pmo > ul > li .cotents h6{
font-size: 24px;   
}
.si-container .pmo > ul > li .cotents p{
font-size: var(--font-body-small);
color: var(--gray-400);
margin-top: 30px;
}

@media (max-width:1280px){
#main {
height: 260px;
}
.si-container .core-tech, .si-container .biz-conduct ,.si-container .si-process  {
padding: 30px 20px;
}
.si-container .top-tab ul > li {
padding: 10px 15px;
}
.si-container .top-tab ul > li  span{
display: none;
}
.si-container .core-tech ul {
justify-content: center;
gap: 10px;
}
.si-container .core-tech ul > li {
width: calc(33.33% -  10px);
}
.si-container .biz-conduct > ul > li{
width: 100%;}
.si-container .core-tech ul > li {
padding: 10px 15px;
}
.si-container .ito-purpose > ul > li{
flex-wrap: wrap;
gap: 20px;
padding: 20px;
width: calc(33.33% - 20px);
}
.si-container .ito-purpose > ul > li > div{
width: 100%;
justify-content: center;
}
.si-container .ito-purpose > ul {
gap: 20px;
}
.si-container .ito-purpose > ul > li .content h5{
font-size: 16px;
}
.si-container .ito-purpose > ul > li .content h5, .si-container .ito-purpose > ul > li .content p{
text-align: center;
}
.si-container .ito-purpose > ul > li > div img{
width: 100%;
height: auto;
max-width: 100px;
}
.si-container .ito-purpose {
padding: 0 20px 30px 20px;
}
.si-container .ito-area {
padding: 30px 20px;
}
.si-container .isp, .si-container .ismp, .si-container .brp, .si-container .pmd{
padding: 30px 20px;
}
.si-container .ismp > ul > li .text, .si-container .isp > ul > li .text  {
padding: 15px 20px;
}
.si-container .isp > ul, .si-container .ismp > ul  {
gap: 20px;
flex-wrap: wrap;
}
.si-container .isp > ul > li, .si-container .ismp > ul > li  {
width: calc(50% - 10px);
}
.si-container .isp > ul > li .text, .si-container .ismp > ul > li .text {
min-height: 100px;
}
.si-container .brp > ul {
gap: 15px;
}
.si-container .pmo > ul > li {
flex-wrap: wrap;
}
.si-container .pmo > ul > li .title {
width: 100%;
text-align: center;
}
.si-container .pmo > ul > li, .si-container .pmo > ul  {
gap: 20px;
}
.si-container .pmo > ul > li .list {
width: calc(50% - 20px);
padding: 20px;
}
.si-container .pmo > ul > li .cotents h6 {
font-size: 16px;
}
.si-container .pmo > ul > li .img img{
max-width: 80px;
height: auto;
}
}

@media (max-width:640px){
.si-container .ito-purpose > ul > li{
flex-wrap: wrap;
gap: 10px;
padding: 10px;
width: calc(50% - 10px);
}
.si-container .ito-area ul {
gap: 10px;
justify-content: center;
}
.si-container .ito-area ul > li {
width: calc(33.33% - 10px);
}
.si-container .pmo > ul > li .list {
flex-wrap: wrap;
justify-content: center;
flex-direction: column-reverse;
}
.si-container .pmo > ul > li .img img{
max-width: 50px;
}
.si-container .pmo > ul > li .img {
width: 100%;
display: flex;
justify-content: center;
}
.si-container .pmo > ul > li .cotents h6{
margin-top: 10px;
text-align: center;
}
.si-container .pmo > ul > li .cotents p {
margin-top: 10px;
text-align: center;
}
.mobile-none{
display: none;
}
}

/***************** ERP 솔루션 페이지 ***************/
.erp-container {
margin-top: 7.81vw;
}
.erp-container .top-warp {
width: 100%;
padding:0 var(--padding-width-large);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.erp-container .top-warp  ul.top-tab{
display: flex;    
margin-bottom: var(--padding-height-large);
}
.erp-container .top-warp ul.top-tab > li{
padding: 15px 30px;   
margin-right: -1px;
border: 1px solid var(--gray-200);
}
.erp-container .top-warp  ul.top-tab > li a{
color: var(--gray-300);
font-size: var(--font-body-small);
text-decoration: none;
}
.erp-container .top-warp  ul.top-tab > li.active{
z-index: 1;
border: 1px solid var(--navy-500);    
}
.erp-container .top-warp  ul.top-tab > li.active a{
color:var(--navy-500);    
}
.erp-container .top-warp .sub-title-warp{
width: 100%;
display: flex;
justify-content: center;
background-image: url(../images/isp-bg.png);
background-size: cover;
background-repeat: no-repeat;
padding: var(--padding-height-large) 3vw;
margin-bottom: var(--padding-height-large);
flex-wrap: wrap;
}
.erp-container .top-warp .sub-title-warp.brp{
background-image: url(../images/brp-bg.png); 
}
.erp-container .top-warp .sub-title-warp.system{
background-image: url(../images/system-bg.png); 
}
.erp-container .top-warp .sub-title-warp h3{
text-align: center;
color: var(--default-white);
font-size: var(--font-title-medium);
width: 100%;
}
.erp-container .top-warp .sub-title-warp p{
text-align: center;
color: var(--gray-200);
font-size: var(--font-body-small);
width: 100%;
margin-top: 4.17vw;
}
.erp-container .top-warp .isp{
width: 100%;
}
.erp-container .top-warp .isp h4.title{
width: 100%;
text-align: center;
font-weight: 600;
font-size: var(--font-title-medium);
}
.erp-container .top-warp .isp span.sub-text{
font-size: var(--font-body-small);    
text-align: center;
display: block;
width: 100%;
}
.erp-container .top-warp .isp > ul{
width: 100%;
display: flex;
gap: 50px;
margin: 4.17vw 0;
}
.erp-container .top-warp .isp > ul > li{
width: 25%;
border-radius: 15px;
border: 1px solid var(--gray-200);
background: #FFF;
box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 0.25); 
padding: 50px 40px;   
}
.erp-container .top-warp .isp > ul > li > h4{
text-align: center;
font-size: var(--font-body-medium);
position: relative;
display: block;
}
.erp-container .top-warp .isp > ul > li > h4::after{
content: "";
position: absolute;
bottom: -10px;
width: 35px;
height: 2px;
left: 50%;
transform: translate(-50% , 0);
background-color: var(--blue-300);
}
.erp-container .top-warp .isp > ul > li > p{
margin-top: 50px;
text-align: center;
font-size: var(--font-body-xsmall);
color: var(--gray-400);
}
.erp-container .isp-warp{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
background-color: #fafafa;
}
.erp-container .isp-warp > h4{
 width: 100%;
text-align: center;
font-size: var(--font-title-medium);
}
.erp-container .number-list{
width: 100%;
margin-top: 60px;
display: flex;
flex-direction: column;
gap: 30px;
}
.erp-container .number-list > li {
display: flex;
gap: 30px;
width: 100%;
}
.erp-container .number-list > li .number{
display: flex;
align-items: center;
width: 290px;
}
.erp-container .number-list > li .number span.num{
background-color: var(--blue-300);
color: var(--default-white);
padding: 20px 30px;
border: 1px solid var(--blue-300);
height: 100%;
font-size: var(--font-title-medium);
font-weight: 600;
display: flex;
justify-content: center;
width: 80px !important;
}
.erp-container .number-list > li .number span.title{
font-size: 18px;
height: 100%;
width: 100%;
background-color: var(--default-white);
padding: 20px 30px;
display: flex;
align-items: center;
border: 1px solid var(--blue-300);
}
.erp-container .number-list > li .contents{
width: 100%;
font-size: var(--font-body-medium);
color: var(--gray-400);
background-color: var(--gray-100);
border: 1px solid var(--gray-200);
padding: 20px 60px;
display: flex;
align-items: center;
}
.erp-container .isp-effect{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:var(--padding-height-large) var(--padding-width-large);  
}
.erp-container .isp-effect > h4{
width: 100%;
text-align: center;
font-size: var(--font-title-medium);
}
.erp-container .effect-warp{
margin-top: 60px;   
display: flex; 
gap: 40px;
}
.erp-container .effect-warp li{
border-radius: 30px;
display: flex;
flex-wrap: wrap;
border:1px solid var(--gray-200);
}
.erp-container .effect-warp li .img{
width: 100%;
}
.erp-container .effect-warp li .img img{
width: 100%;
height: 200px;
}
.erp-container .effect-warp li .contents{
padding: 30px;
text-align: center;
}
.erp-container .effect-warp li .contents > h5{
font-size: var(--font-body-medium);
margin-bottom: 30px;
}
.erp-container .effect-warp li .contents > p{
color: var(--gray-400);
}
.erp-container .number-list > li .number.brp {
width: 490px;
}
.erp-container .effect-warp.brp {
flex-wrap: wrap;
}
.erp-container .effect-warp.brp li {
border-radius: 0px;
width: 100%;
}
.erp-container .effect-warp.brp li .img, .erp-container .effect-warp.brp li .contents  {
width: 50%;
}
.erp-container .effect-warp.brp li .contents{
align-items: center;
display: flex;
flex-wrap: wrap;
}
.erp-container .effect-warp li .contents > h5 {
width: 100%;
text-align: center;
}
.erp-container .effect-warp.brp li .img img {
height: 100%;
}
.erp-container .isp-warp.system{
background-color: var(--default-white);
}
.erp-container .develop{
width: 100%;
padding: var(--padding-height-large) var(--padding-width-large);
}
.erp-container  .develop h4.title{
width: 100%;
text-align: center;
font-weight: 600;
font-size: var(--font-title-medium);
}
.erp-container  .develop span.sub-text{
font-size: var(--font-body-small);    
text-align: center;
display: block;
width: 100%;
margin-top: 50px;
}
.erp-container .develop > ul{
width: 100%;
display: flex;
gap: 50px;
justify-content: center;
margin: 4.17vw 0;
}
.erp-container .develop > ul > li{
width: 50%;
border-radius: 15px;
border: 1px solid var(--gray-200);
background: #FFF;
box-shadow: 2px 2px 2px 0px rgba(184, 184, 184, 0.25); 
padding: 50px 40px;   
}
.erp-container .develop > ul > li > h4{
text-align: center;
font-size: var(--font-body-medium);
position: relative;
display: block;
}
.erp-container .develop > ul > li > h4::after{
content: "";
position: absolute;
bottom: -10px;
width: 35px;
height: 2px;
left: 50%;
transform: translate(-50% , 0);
background-color: var(--blue-300);
}
.erp-container .develop > ul > li > p{
margin-top: 50px;
text-align: center;
font-size: var(--font-body-xsmall);
color: var(--gray-400);
}
@media (max-width:1280px){
.erp-container .top-warp .isp > ul {
gap: 20px;
}
.erp-container .top-warp .isp > ul > li {
padding: 24px 20px;
}
.erp-container .number-list {
gap: 20px;
margin-top: 20px;
}
.erp-container .number-list > li {
gap: 15px;
}
.erp-container .number-list > li .contents, .erp-container .number-list > li .number span.title  {
padding: 15px 20px;
}
.erp-container .effect-warp li .contents {
padding: 15px;
}
.erp-container .effect-warp li .contents > h5 {
margin-bottom: 15px;
}
.erp-container .effect-warp {
gap: 20px;
margin-top: 20px;
}
.erp-container .develop > ul {
gap: 20px;
flex-wrap: wrap;
}
.erp-container .develop > ul > li{
width: 100%;
padding: 15px 20px;
} 
}

@media (max-width:970px){
.erp-container .top-warp .isp > ul {
flex-wrap: wrap;
}
.erp-container .top-warp .isp > ul > li {
width: calc(50% - 10px);
}
.erp-container .number-list > li  {
flex-wrap: wrap;
width: 100%;
}
.erp-container .top-warp .isp > ul > li > p {
margin-top: 20px;
}
.erp-container .number-list > li .number span.num {
padding: 15px 15px;
}
.erp-container .number-list > li .number, .erp-container .number-list > li .number span.title  {
width: 100%;
}
.erp-container .effect-warp {
flex-wrap: wrap;
}
.erp-container .effect-warp li {
width: calc(50% - 10px);
border-radius: 15px;
}
.erp-container .effect-warp li .img img {
height: 100px;
}
.erp-container .number-list > li .number.brp {
width: 100%;
}
.erp-container .effect-warp.brp li .img, .erp-container .effect-warp.brp li .contents {
width: 100%;
}
.erp-container .effect-warp.brp li:nth-child(2), .erp-container .effect-warp.brp li:nth-child(4){
flex-direction: column-reverse;
}
.erp-container .develop > ul > li > p, .erp-container .develop span.sub-text  {
margin-top: 20px;
}
}

@media (min-width:1921px){
.si-container {
margin-top: 150px
}
}