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

/* ******************  서브공통 ********************** */
.sub-wrap * {letter-spacing: -0.015em;}
.pop-bg {
	overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
}
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* ******************  회사소개 ********************** */
.about-page {padding-top:3.6rem; border-top:1px solid #232323; padding-bottom:13.3rem;}
.about-container {display:flex;}
/* .about-tab-list-style {width: 14.926%; height: 100%; margin-right: 4.478%; margin-bottom: 0; margin-top: 0.8rem;}
.about-tab-list-style .sub-tab-list-style {background: #f3f3f3; border-radius: 3rem; position: static; height: auto;}
.about-tab-list-style .sub-tab-list-style:before {display:none;}
.about-tab-list-style ul {display:flex; flex-direction:column; border-radius: 3rem; border: 2px solid #3a3a3a; padding: 0.6rem 0.7rem; box-sizing: border-box;}
.about-tab-list-style ul li {width: 100%; border-radius: 2.5rem; border:0; background-color: initial; transition: all 0.3s ease;}
.about-tab-list-style ul li a {height: 5rem; padding: 0 2rem; box-sizing: border-box;}
.about-tab-list-style ul li a em {text-align:left; font-size: 1.6rem; font-weight: 500; color: #000;}
.sub-tab-list-style ul li.selected:after {display: block; content: "\e93f"; position: absolute; font-family: 'xeicon'; color: #fff; font-size: 1.8rem; right: 1.5rem; top: 50%; transform: translateY(-50%);} */
.about-con-wrap {/* width: calc(100% - (14.926% + 4.478%)); */ width: calc(100% - (16.5% + 4.478%));}
.about-con {padding:6rem 0 3.2rem; border-bottom:1px solid rgba(35,35,35,0.1);}
.about-con:first-of-type {margin-top: -6rem;}
.about-con-list {display:flex; flex-wrap:wrap; margin: -2rem -1rem 0;}
.about-con-list li {margin:2rem 1rem; width: calc(50% - 2rem);}
.about-tit {display:inline-block; font-size:3.4rem; color: #000; font-weight: 600; line-height:1.1; padding-bottom: 2rem;}
.about-con-list .tit-box {margin-top: 2.2rem;}
.about-con-list .img-box {position: relative; border-radius:10px; overflow:hidden;}
.about-con-list .img-box img {border-radius:10px; max-width:100%; transition: var(--transition-custom);}
.about-con-list .img-box .cover {position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; transition:var(--transition-custom); z-index: 2;}
.about-con-list .img-box:before {
	display: block;
	content: "\e913";
	font-family: 'xeicon';
	font-size: 3.4rem;
	color: #fff;
	/* color: rgba(0,0,0,0.4); */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition:var(--transition-custom);
	z-index: 3;
}
/* .about-con-list .img-box:after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 4px solid #000;
	border-radius: 10px;
	opacity: 0;
	transition:var(--transition-custom);
} */
.about-con-list .name {font-size:2.4rem; color: #000; font-weight: 700; line-height:1.167em;}
.about-con-list .position {display: inline-block; font-size:1.5rem; color: #7d7d7d; font-weight: 500; line-height:1.867em; margin-top: 0.5rem;}
.about-con-list li:hover .img-box:after, .about-con-list li:hover .img-box:before {opacity: 1;}
.about-con-list li:hover .img-box img {transform: scale(1.08);}
.about-con-list li:hover .cover {opacity: 1;}

.sticky-style {
	position: sticky !important;
	top: 4rem;
	z-index: 20;
}

@media all and (max-width:1280px){
	.about-con-wrap {width: calc(100% - (19% + 4.478%));}
}

@media all and (max-width:800px){
	.about-page {padding-bottom:5rem;}
	.sticky-style {position:relative !important; top: 0;}
	.about-container {flex-wrap:wrap;}
	/* .about-tab-list-style {width: 100%; margin-right: 0; margin-bottom: 4rem;}
	.about-tab-list-style .sub-tab-list-style .sub-drop-open-btn-style {height: 5.6rem; line-height: 5.6rem; border-radius: 2.8rem; padding: 0 3rem; font-size:1.6rem;}
	.about-tab-list-style .sub-tab-list-style .sub-drop-open-btn-style .arrow {right: 3rem; font-size: 2.4rem; margin-top: -1rem;}
	.about-tab-list-style ul {display:none;}
	.about-tab-list-style ul li a {padding: 1.5rem 2rem; height: auto;}
	.about-tab-list-style ul li a em {color: rgba(0,0,0,0.5);}
	.about-tab-list-style ul li.selected a em {color: rgba(0,0,0,1);} */
	.about-con-wrap {width: 100%;}
	.about-con-list {flex-wrap:wrap; margin: 0;}
	.about-con-list li {width: 100%; margin: 1rem 0;}
	.about-con-list .img-box img {width: 100%;}
	.about-tit {font-size:3.2rem; line-height: 1.3;}
}