@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ****************** 사업소개 ********************** */
.business-con01 {position: relative; text-align: center; padding: 5rem 0 12rem;}
.business-con01:before {position: absolute; content: ''; width: 100%; height: 52%; bottom: 0; left: 0; background-color: #f5f5f5; }
.business-detail-btn {position: absolute; width: 11rem; height: 11rem; border-radius: 50%; background-color: #fff; display: flex; flex-direction:column; align-items: center; justify-content: center; box-shadow: 0 0 3rem rgba(0,0,0,0.1); bottom: 12rem; right: calc((100% - var(--area-box-width))/2); z-index: 1; text-align: center; color: var(--main-color);}
.business-detail-btn i {font-size: 2.8rem; transform:rotate(45deg);}
.business-detail-btn strong {display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.375;}
 
.business-con01 ,inner {position: relative; z-index: 1;}
.business-top-tit {margin-bottom: 7rem;}
.business-top-tit .sub-tit {display: block; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.2; margin-bottom: 2rem;}
.business-top-tit .tit {font-size: 6.5rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.3; margin-bottom: 2rem;} 
.business-top-tit .tit.ver2 {font-size:5rem;}
.business-top-tit .txt {font-size: 2.2rem; font-weight: 500; letter-spacing: -0.025em; color: #555; line-height: 1.77;}
.business-top-img {margin-bottom: 13rem;}
.business-top-img img {max-width: 100%;}
.business-con01-txt .txt01 {font-size: 4rem; font-weight: 600; letter-spacing: -0.025em; color: #000; line-height: 1.5;}
.business-con01-txt .txt02 {font-size: 2.6rem; font-weight: 600; letter-spacing: -0.025em; color: #333; line-height: 1.53; margin-top: 4.5rem;}
.business-con01-txt .txt03 {font-size: 2.2rem; font-weight: 500; letter-spacing: -0.025em; color: #666; line-height: 1.54; margin-top: 2rem;}

.business-con02 {position: relative;padding: 18rem 0 38rem;}
.business-tit-box {text-align: center; margin-bottom: 5rem;}
.business-tit-box .tit {font-size: 4rem; font-weight: 600; letter-spacing: -0.025em; color: #000; line-height: 1.5;}
.business-tit-box .txt {font-size: 2.8rem; font-weight: 600; letter-spacing: -0.025em; color: #666; line-height: 1.6; margin-top: 1.2rem;}
.core-tech-con {max-width: 1260px; margin: 0 auto;}
.core-tech-list {display: flex; flex-wrap: wrap; gap:3rem;}
.core-tech-list li {width: calc(33.333% - 2rem); border-radius: 2rem; border: 1px solid #F5F5F5; background-color: #F5F5F5; box-sizing: border-box; /* padding: 13rem 3.4rem 4rem; */ position: relative; transition:all 0.4s; padding: 3.8rem 3.4rem; display:flex; flex-direction:column; align-items:center; justify-content: center; text-align: center;}
.core-tech-list li .num {position: absolute; top: 5rem; left: 3.4rem; font-size: 5.5rem; font-weight: 800; letter-spacing: -0.025em; color: rgba(21, 36, 132, 0.1);}
.core-tech-list li .txt {/* font-size: 2rem; */ font-size: 2.4rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.5; color: #333; transition:all 0.4s;}
.core-tech-list li .sub-txt {display:inline-block; font-size:2rem; font-weight: 600; line-height:1.8em; letter-spacing:-0.025em; color: #333; margin-top: 1.5rem; transition:all 0.4s;} 
.core-tech-list li.active {border-color: var(--main-color); box-shadow: 4.2rem 3.9rem 7rem rgba(21, 36, 132, 0.12);}
.core-tech-list li.active .txt  {color: var(--main-color);}
.core-tech-list li.active .sub-txt {color: var(--main-color);}
.business-flow-txt { position: absolute; bottom: 0; left: 0; width: 100%;}
.business-flow-txt .inner { position: relative; width: 100%; height: 20rem; overflow: hidden;}
.business-flow-txt .flow-txt {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.business-flow-txt .maskBg {width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden;}
.business-flow-txt .maskBg .marquee {width: 100%; height: 100%;position: relative;}
.business-flow-txt .maskBg .marquee .absol { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.business-flow-txt .maskBg .marquee .absol .mar_ch {height: 100%;}
.business-flow-txt .maskBg .marquee .absol .mar_ch img {max-height: 100%; margin: 0 4rem;}

.business-con03 {padding: 12rem 0 22rem;}
.business-con03-list {display: flex; margin: 0 -0.5rem;}
.business-con03-list li {width: calc(25% - 1rem); margin: 0 0.5rem; background-color: #f5f5f5; border:1px solid #f5f5f5; border-radius: 2rem; padding: 2rem 2rem 4rem; box-sizing: border-box; text-align: center; transition:all 0.4s;}
.business-con03-list li a {display:inline-block; width: 100%; height: 100%;}
.business-con03-list li .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.business-con03-list li .img-box span {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; border-radius: 1.5rem; display: flex; align-items: center; justify-content: center; padding: 2.5rem; box-sizing: border-box; }
.business-con03-list li .img-box span img {max-width: 100%; max-height: 100%;}
.business-con03-list li strong {display: block; margin-top:1.5rem; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.875; color: #333;}
.business-con03-list li:hover {border-color:var(--main-color); box-shadow:4.2rem 3.9rem 7rem rgba(21, 36, 132, 0.12);}

@media all and (max-width:1610px){
	.business-detail-btn {right: var(--area-padding);}
}
@media all and (max-width:1279px){
	.business-detail-btn {width: 9rem; height: 9rem; bottom: 40%;}
	.business-detail-btn i {font-size: 2.4rem;}
	.business-detail-btn strong {font-size: 1.4rem;}
	
}
@media all and (max-width:800px){
	.business-con01 {padding: 0 0 8rem !important;}
	.business-con01:before {height: 58%;}
	.business-top-tit .tit {font-size: 4.2rem;}
	.business-top-tit .tit.ver2 {font-size: 3.8rem;}
	.business-top-tit .txt {font-size: 1.8rem;}
	.business-top-img {margin-bottom: 7rem;}
	.business-con01-txt .txt01 {font-size: 3rem;}
	.business-con01-txt .txt02 {font-size: 2.2rem;}
	.business-con01-txt .txt03 {font-size: 1.8rem;}
	.business-detail-btn {bottom: 45%;}
	.business-con02 {padding: 10rem 0 20rem;}
	.business-tit-box .tit {font-size: 3.2rem;}
	.business-tit-box .txt {font-size: 2.2rem;}
	.core-tech-list {gap:2rem;}
	.core-tech-list li {width: 100%;  padding: 3rem 4rem;/* padding: 10rem 3rem 4rem; */}
	.core-tech-list li .num {font-size: 3.5rem; top: 4rem; left: 3rem;}
	.core-tech-list li .txt {font-size:2rem;}
	
	.business-flow-txt .inner  {height: 10rem;}
	.business-flow-txt .maskBg .marquee .absol .mar_ch img {margin: 0 2rem;}
	
	.business-con03 {padding: 10rem 0 var(--sub-content-padding);}
	.business-con03-list {flex-wrap: wrap; margin: -0.5rem;}
	.business-con03-list lI {width: calc(50% - 1rem); margin: 0.5rem; padding: 1rem 1rem 2rem;}
	.business-con03-list li strong {font-size: 1.8rem;}
}


/* ****************** 사내동호회 ********************** */
.pr-page {padding-bottom: 17rem;}

@media all and (max-width:800px){
	.pr-page {padding-bottom: 10rem;}
}

/* ***********************
	*	커스텀 셀렉트 스타일 추가css 
*********************** */
.gs-custom-selectbox {position: relative; display: inline-block; width: 14.2rem;}
.gs-custom-selectbox select {display: none;}
.gs-custom-selectbox .select-style {position: relative; z-index: 2; padding-left: 2.4rem; width: 100%; text-align: left; vertical-align: middle; border:0; line-height: 4.8rem; font-size:1.6rem; color: #333; background-color: #f5f5f5; display: inline-block; box-sizing: border-box; cursor: pointer; border-radius:2.4rem; transition: all 0.2s ease-in-out;}
.gs-custom-selectbox .select-style span {display: inline-block;}
.gs-custom-selectbox .select-style:after {font-family: 'xeicon'; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); content: "\e942"; font-size: 2rem; color: #333;}
.gs-custom-selectbox .select-options {position: absolute; z-index: 1; top: 2.4rem; left: 0; display: none; width: 100%; margin-top: 0.5rem; padding: 0; list-style: none; background-color: #f5f5f5; border-radius: 0 0 2.4rem 2.4rem; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: 2.5rem 0 1rem; max-height: 23rem; }
.gs-custom-selectbox .select-options li {padding: 1rem 2.4rem; font-size: 1.4rem; color: #333; cursor: pointer;}

/* open */
.gs-custom-selectbox.open .select-style {border-radius: 2.4rem 2.4rem 0 0; border-bottom: 0;}
.gs-custom-selectbox.open .select-style:after{content: "\e945";}
/* 비활성화 */
.gs-custom-selectbox.is-disabled .select-style {background-color: #f5f5f5; cursor: auto; color: rgba(51,51,51,0.4);}
.gs-custom-selectbox.is-disabled .select-style span{text-decoration: line-through;}
.gs-custom-selectbox.is-disabled { pointer-events:none; }
/* 스크롤(사용 안해도됨.) */
html:not(.is-mobile) .gs-custom-selectbox .select-options::-webkit-scrollbar {width: 7px; border-radius: 7rem;}
html:not(.is-mobile) .gs-custom-selectbox .select-options::-webkit-scrollbar-track,
html:not(.is-mobile) .gs-custom-selectbox .select-options::-webkit-scrollbar-thumb{border-radius: 7rem;}

@media all and (max-width:800px){
	.gs-custom-selectbox .select-style	 {line-height: 40px; font-size: 13px;}
}