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

:root{
	--area-width: 1480px;
	--area-wide-width: 1720px;
	--main-color2: #00438A;
	--tricera-color: #ED6B00;
}
.area-wide{ max-width:var(--area-wide-width); margin:0px auto;}
#topMenu03{overflow: hidden;}

@media all and (max-width:1780px){
	.area-wide{padding:0 var(--area-padding); max-width:none;}
}
@media all and (max-width:1540px){
	.area{padding:0 var(--area-padding); max-width:none;}
}

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.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%}
}


/* ****************** 서브 공통 ********************** */
.cm-page-tit{}
.cm-page-tit.ta-center{text-align: center;}
.cm-sub-cate{display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--main-color);}
.cm-sub-tit{font-size: 5rem; line-height: 1.4; font-weight: 800; letter-spacing: -0.02em; color: #000;}/* 검정 큰 타이틀 */
.cm-sub-tit b{color: var(--main-color); font-weight: inherit;}
.cm-sub-tit02{font-size: 2.4rem; line-height: 1.6; font-weight: 700; letter-spacing: -0.02em;  color: #000;}/* 검정 작은 타이틀 */
.cm-sub-txt{font-size: 1.8rem; line-height: 1.6em; font-weight: 500; letter-spacing: -0.02em;  color: #666;}/* 회색 작은 텍스트 */
.cm-sub-btn{padding: 0.2rem 3rem 0; width: 22rem; height: 6rem; font-size: 1.8rem; line-height: 1.6; font-weight: 600; letter-spacing: -0.02em; color: var(--main-color2); background-color: #fff; border: 2px solid var(--main-color2); border-radius: 6rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; transition:var(--transition-custom); transition-property: background-color, color;}
.cm-sub-btn i{position: relative; top: -0.2rem;}
.cm-sub-btn:hover{background-color: var(--main-color2); color: #fff;}
.cm-page-tit.has-long-btn .cm-sub-btn{width: 30rem;}
.tricera-page .cm-sub-btn{border-color: var(--tricera-color); color: var(--tricera-color);}
.tricera-page .cm-sub-btn:hover{background-color: var(--tricera-color); color: #fff;}

.cm-page-tit * + .cm-sub-tit{margin-top: 2.5rem;}
.cm-page-tit .cm-sub-tit02{margin-top: 3rem;}
.cm-page-tit .cm-sub-txt{margin-top: 2.5rem;}
.cm-page-tit.has-btn{position: relative; padding-right: 24rem;}
.cm-page-tit.has-long-btn{position: relative; padding-right: 32rem;}
.cm-page-tit.has-long-btn .cm-sub-btn,
.cm-page-tit.has-btn .cm-sub-btn{position: absolute; bottom: 0; right: 0;}

@media all and (max-width:800px){
	.cm-sub-cate{font-size: 2rem;}
	.cm-sub-tit{font-size: 3.5rem;}
	.cm-sub-tit02{font-size: 2rem;}
	.cm-sub-txt{font-size: 1.8rem;}
	.cm-sub-btn{padding: 0.2rem 3rem 0; width: 22rem; height: 6rem; font-size: 1.8rem; line-height: 1.6;}
	.cm-sub-btn i{top: -0.1rem;}
	.cm-page-tit.has-long-btn .cm-sub-btn{width: 30rem;}
	
	.cm-page-tit * + .cm-sub-tit{margin-top: 2rem;}
	.cm-page-tit .cm-sub-tit02{margin-top: 2.5rem;}
	.cm-page-tit .cm-sub-txt{margin-top: 2rem;}
	
	.cm-page-tit.has-long-btn,
	.cm-page-tit.has-btn{padding-right: 0;}
	.cm-page-tit.has-long-btn .cm-sub-btn,
	.cm-page-tit.has-btn .cm-sub-btn{margin-top: 3rem; position: static;}
}
@keyframes text-active-animation2 {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(30px); 
		transform: translateY(30px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out2 {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}
@keyframes flowLoop {
	0% {transform:translateX(-100%);}
	100% {transform:translateX(-200%);}
}

/* ****************** 01 회사소개 :: 01 디노텍 ********************** */
.intro-page .cm-page-tit svg{margin-top: 5rem; height: 8rem; display: block;}
.intro-page .cm-page-tit svg path{fill:var(--main-color2)}

.intro-con01{margin-top: 6rem; padding: 10rem 0; background: url("../images/content/intro_con01_bg.jpg") center/cover no-repeat;}
.intro-con01-txt{padding: 5rem; width: 47rem; background-color: rgba(0,67,138,0.6); border-radius: 4rem; box-sizing: border-box;}
.intro-con01-txt li{padding: 3rem 0; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.intro-con01-txt li + li{border-top: 1px solid rgba(255,255,255,0.1);}
.intro-con01-txt li .tit{display: flex; align-items: center;}
.intro-con01-txt li .tit p{position: relative; padding-left: 3.8rem; font-size: 2rem; line-height: 1.2; letter-spacing: -0.025em;	font-weight: 600; color: #fff;}
.intro-con01-txt li .tit p i{position: absolute; top: 0; left: 0; font-size: 2.4rem; font-weight: 400;}
.intro-con01-txt li .tit p span{margin-left: 0.4rem; font-size: 1.6rem; font-weight: 500; opacity: 0.6;}
.intro-con01-txt li .result{position: relative; top: -0.4rem; font-size: 3rem; letter-spacing: -0.02em; font-weight: 700; color: #fff; display: flex; align-items: flex-end;}
.intro-con01-txt li .result b{position: relative; top: 0.4rem; font-size: 4.8rem; font-weight: inherit;}
.intro-con01-txt li a{padding: 0 3rem; width: 100%; height: 6rem; font-size: 1.6rem; font-weight: 700; color: var(--main-color2); display: flex; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 6rem; box-sizing: border-box;}
.intro-con01-txt li a i{font-size: 1.8rem; font-weight: 400;}
.intro-con01-bg-m{display: none;}

.intro-con02{padding: 26rem 0 9rem; background: url("../images/content/intro_con02_bg.png") 50% 0% no-repeat; background-size:auto;}
.intro-con02 .cm-page-tit{text-align: center; position: relative;}
.intro-con02 .cm-page-tit:after{margin: 3rem auto 27rem; width: 0.4rem; height: 6rem; display: block; border-radius: 1rem; content: '';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.intro-con02 .cm-page-tit .cm-sub-txt{color: #000;}

.intro-con02-vision{display: flex; flex-wrap:wrap; justify-content: space-between;}
.intro-con02-vision-txt{padding: 8rem 6rem; width: 31.97%; min-height: 78rem; background-color: #F5F5F5; border-radius: 2rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;}
.intro-con02-vision-txt .cm-sub-cate {font-size: 2rem;}
.intro-con02-vision-txt .bottom-txt{margin-top: 3rem;}
.intro-con02-vision-txt .bottom-txt .cm-sub-tit{font-size: 4rem;}
.intro-con02-vision-txt .bottom-txt .cm-sub-tit02{margin-top: 4rem;}
.intro-con02-vision-txt .bottom-txt .cm-sub-txt{margin-top: 1.5rem;}
.intro-con02-vision-img{width: 66.86%; position: relative; border-radius: 2rem;}
.intro-con02-vision-img img{width: 100%; height: 100%; object-fit: cover;}
.intro-con02-vision-img p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4rem; line-height: 1.5; font-weight: 700; letter-spacing: 0em; filter: blur(2rem); background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; transition: letter-spacing 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.intro-con02-vision-img.animated p{letter-spacing: 0.5em; filter: blur(0); transition-delay:0.3s;}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	.intro-con02{background-image: image-set(url("../images/content/intro_con02_bg.webp") type("image/webp"), url("../images/content/intro_con02_bg.png")  type("image/png")); background-size:auto; background-position: center top; background-repeat: no-repeat;}
}

.intro-con03{padding: 9rem 0 11.3rem;}
.intro-con03 .cm-page-tit{text-align: center;}
.intro-con03-wrapper{margin-top: 8rem;}
.intro-con03-list{margin: 0 -1.7rem; display: flex; flex-wrap:wrap;}
.intro-con03-item{margin: 0 1.7rem; width: calc(33.33% - 3.5rem);}
.intro-con03-inner{padding: 6rem 5rem; min-height: 35.5rem; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; background-color: #f5f5f5; border-radius: 2rem; transition:var(--transition-custom); transition-property:background-color;}
.intro-con03-txt{}
.intro-con03-txt h5{font-size: 3rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.05em; color: #000; transition:var(--transition-custom); transition-property:color;}
.intro-con03-txt p{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.6; font-weight: 500; letter-spacing: -0.02em; color: #666; transition:var(--transition-custom); transition-property:color;}
.intro-con03-icon{display: flex; justify-content: flex-end;}
.intro-con03-icon svg{height: 5rem; display: block;}
.intro-con03-icon svg path{transition:var(--transition-custom); transition-property:fill;}
.intro-con03-item.active .intro-con03-inner{background-color: var(--main-color2);}
.intro-con03-item.active .intro-con03-txt h5{color: #fff;}
.intro-con03-item.active .intro-con03-txt p{color: rgba(255,255,255,0.6);}
.intro-con03-item.active .intro-con03-icon svg path{fill:#fff;}

.intro-con04{padding: 12rem 0; background-color: #F5F5F5;}
.intro-con04 .cm-page-tit{text-align: center;}

.intro-con04-org{max-width: 1290px; margin: 0 auto;}
.intro-con04-org-ceo{margin: 8rem auto 0; position: relative; width: 30rem; height: 30rem; border-radius: 100%; box-shadow: 1rem 1rem 4rem 0 rgba(0,0,0,0.25);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0084e9+0,00438a+100 */
background: linear-gradient(to bottom,  rgba(0,132,233,1) 0%,rgba(0,67,138,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.intro-con04-org-ceo-inner{width: 28rem; height: 28rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #fff; border-radius: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.intro-con04-org-ceo-inner strong{font-size: 5rem; letter-spacing: -0.05em; font-weight: 700; color: #000;}
.intro-con04-org-ceo-inner span{margin-top: 1rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; color: rgba(0,0,0,0.6);}
.intro-con04-org-dep{margin: 14rem -1.5rem 0; display: flex; flex-wrap:wrap; justify-content: space-between; position: relative;}
.intro-con04-org-dep:before{position: absolute; left: 50%; top: -7.35rem; transform: translateX(-50%); width: 75%; height: 0; border-bottom: 1px dotted rgba(0,0,0,0.2); content: '';}
.intro-con04-org-dep:after{position: absolute; left: 50%; top: -13.8rem; transform: translateX(-50%); width: 0; height: 6.35rem; border-left: 1px dotted rgba(0,0,0,0.2); content: '';}
.intro-con04-org-dep-box{margin: 0 1.5rem; width: calc(25% - 3rem); text-align: center; position: relative;}
.intro-con04-org-dep-box:before{position: absolute; top: -7.35rem; left: 50%; width: 0; height: 6.6rem; border-left: 1px dotted rgba(0,0,0,0.2); content: '';}
.intro-con04-org-dep-box:after{position: absolute; top: -0.75rem; left: 50%; margin-left: -0.75rem; width: 1.5rem; height: 1.5rem; border: 0.4rem solid #F6F6F6; background-color: var(--main-color2); border-radius: 100%; box-sizing: border-box; content: '';}
.intro-con04-org-dep-item{min-height: 8rem; padding: 1rem; font-size: 1.8rem; line-height: 1.4; letter-spacing: -0.05em; font-weight: 500; color: #000; border: 1px solid var(--main-color2); border-radius: 1rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.intro-con04-org-dep-item + .intro-con04-org-dep-item{margin-top: 1rem;}
.intro-con04-org-dep-tit{font-size: 2.4rem; letter-spacing: -0.05em; font-weight: 600; color: #fff; background-color: var(--main-color2);}
.intro-con04-org-dep-info{min-height: auto; padding: 0.5rem 1.5rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: #fff; border-radius: 1.6rem; background-color: var(--main-color); border-color: var(--main-color); display: inline-block;}

@media all and (max-width:1350px){
	.intro-con04-org{padding: 0 var(--area-padding); max-width: none;}
}
@media all and (max-width:1280px){
	.intro-con02{padding: 18rem 0 9rem;}
	.intro-con02 .cm-page-tit:after{margin: 3rem auto 17rem;}

	.intro-con02-vision-txt{width: 100%; min-height: auto;}
	.intro-con02-vision-img{margin-top: 2rem; width: 100%;}
}
@media all and (max-width:800px){
	.intro-page .cm-page-tit svg{margin-top: 4rem; height: 5rem;}

	.intro-con01{margin-top: 6rem; padding: 8rem 0; /* padding: 0; background: none; */}
	.intro-con01-txt{padding: 1rem 3rem; width: 100%; /* background-color: var(--main-color2); */ border-radius: 4rem;}
	.intro-con01-txt li{padding: 2.5rem 0;}
	.intro-con01-txt li .tit p{padding-left: 2.8rem; font-size: 1.8rem; line-height: 1.2;}
	.intro-con01-txt li .tit p i{font-size: 2rem;}
	.intro-con01-txt li .tit p span{margin-left: 0.4rem; font-size: 1.6rem; font-weight: 500; opacity: 0.6;}
	.intro-con01-txt li .result{top: -0.4rem; font-size: 2.4rem;}
	.intro-con01-txt li .result b{top: 0.4rem; font-size: 3.8rem;}
	.intro-con01-txt li a{padding: 0 3rem; width: 100%; height: 6rem; font-size: 1.6rem;}
	.intro-con01-txt li a i{font-size: 1.8rem;}
	.intro-con01-bg-m{/* display: block; position: relative; width: 100%; height: 0; padding-top: 44.27%; background: url("../images/content/intro_con01_bg.jpg") center/cover no-repeat; */ display: none;}
	
	.intro-con02{padding: 12rem 0 5rem;}
	.intro-con02 .cm-page-tit{text-align: center; position: relative;}
	.intro-con02 .cm-page-tit:after{margin: 3rem auto 13rem; width: 0.4rem; height: 6rem;}

	.intro-con02-vision{display: flex; flex-wrap:wrap;}
	.intro-con02-vision-txt{padding: 5rem 3rem; border-radius: 2rem;}
	.intro-con02-vision-txt .cm-sub-cate {font-size: 1.8rem;}
	.intro-con02-vision-txt .bottom-txt{margin-top: 5rem;}
	.intro-con02-vision-txt .bottom-txt .cm-sub-tit{font-size: 3.2rem;}
	.intro-con02-vision-txt .bottom-txt .cm-sub-tit02{margin-top: 3rem;}
	.intro-con02-vision-txt .bottom-txt .cm-sub-txt{margin-top: 1.5rem;}
	.intro-con02-vision-img{border-radius: 2rem;}
	.intro-con02-vision-img p{font-size: 1.2rem;}

	.intro-con03{padding: 5rem 0 8rem;}
	.intro-con03-wrapper{margin-top: 5rem;}
	.intro-con03-list{margin: -1rem;}
	.intro-con03-item{margin: 1rem; width: calc(100% - 2rem);}
	.intro-con03-inner{padding: 4rem 3rem; min-height: auto;}
	.intro-con03-txt h5{font-size: 3rem; line-height: 1.3;}
	.intro-con03-txt p{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.6;}
	.intro-con03-icon{margin-top: 3rem;}
	.intro-con03-icon svg{height: 5rem;}

	.intro-con04{padding: 8rem 0;}

	.intro-con04-org-ceo{margin: 5rem auto 0; width: 24rem; height: 24rem; box-shadow: 1rem 1rem 4rem 0 rgba(0,0,0,0.25);}
	.intro-con04-org-ceo-inner{width: 22rem; height: 22rem;}
	.intro-con04-org-ceo-inner strong{font-size: 3.5rem;}
	.intro-con04-org-ceo-inner span{margin-top: 1rem; font-size: 1.6rem; line-height: 1.6;}
	.intro-con04-org-dep{margin: 11rem -0.5rem 0;}
	.intro-con04-org-dep:before{top: -5.35rem; width: 75%;}
	.intro-con04-org-dep:after{top: -10.8rem; height: 5.35rem;}
	.intro-con04-org-dep-box{margin: 0 0.5rem; width: calc(25% - 1rem);}
	.intro-con04-org-dep-box:before{top: -5.35rem; left: 50%; width: 0; height: 4.6rem;}
	.intro-con04-org-dep-box:after{top: -0.75rem; margin-left: -0.75rem; width: 1.5rem; height: 1.5rem; border: 0.4rem solid #F6F6F6;}
	.intro-con04-org-dep-item{min-height: 8rem; padding: 1rem; font-size: 1.6rem; line-height: 1.4;}
	.intro-con04-org-dep-item + .intro-con04-org-dep-item{margin-top: 1rem;}
	.intro-con04-org-dep-tit{font-size: 1.8rem;}
	.intro-con04-org-dep-info{min-height: auto; padding: 0.5rem 1.5rem; font-size: 1.4rem; line-height: 1.3; border-radius: 1.6rem;}
}


/* ****************** 01 회사소개 :: 02 인사말 ********************** */
.greeting-top {padding-bottom: 6rem;}
.greeting-bottom {padding: 7rem 0 0; background-color: #F5F5F5;}
.greeting-bottom-inner {position: relative; display: flex; flex-wrap: wrap; align-items: end;}
.greeting-bottom-inner .txt-box {width: 56.09%; padding-right: 6rem; box-sizing: border-box;}
.greeting-bottom-inner .txt-box .greeting-txt02 {font-size: 1.8rem; letter-spacing: -0.04em; color: rgba(0,0,0,0.6); line-height: 1.6;}
.greeting-bottom-inner .txt-box .greeting-txt02 + .greeting-txt02 {margin-top:3rem;}
.greeting-ceo-txt {padding-top: 8.4rem;}
.greeting-ceo-txt p {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.045em; color: #000; line-height: 1.3; display: flex; align-items: center;}
.greeting-ceo-txt p strong {font-weight: inherit; display: inline-block; margin-left: 2.4rem; font-size: 3rem; letter-spacing: -0.025em;}
.greeting-bottom-inner .img-box {position: relative; width: 43.91%;}
.greeting-bottom-inner .img-box img {position: absolute; bottom: 0; left: 0; width: 100%;}

.greeting-flow-txt {display:flex; justify-content: center; white-space:nowrap; overflow: hidden;}
.greeting-flow-txt p {position: relative; top: 4.6rem; font-size:36.6rem; font-weight: 600; color: #000; text-align: center; opacity: 0.03;/* animation: 20s 0s greetingFlowLoop infinite linear; */}	

@keyframes greetingFlowLoop {
	0%{transform: translateX(-100%);}
	100%{transform: translateX(-200%);}
}

@media all and (max-width:1280px){
	.greeting-flow-txt p {top: 3.8rem; font-size:26rem;}
}
@media all and (max-width:800px){
	.greeting-top {padding-bottom: 6rem;}
	.greeting-bottom-inner {display: block;}
	.greeting-bottom-inner .txt-box {width: 100%; padding-right: 0;}
	.greeting-bottom-inner .txt-box .greeting-txt02 {font-size: 1.8rem; line-height: 1.6;}
	.greeting-bottom-inner .txt-box .greeting-txt02 + .greeting-txt02 {margin-top:3rem;}
	.greeting-ceo-txt {padding-top: 5.5rem;}
	.greeting-ceo-txt p {font-size: 1.8rem; line-height: 1.3;}
	.greeting-ceo-txt p strong {margin-left: 2.4rem; font-size: 3rem;}
	.greeting-bottom-inner .img-box {width: 70%; margin: 8rem auto 0;}
	.greeting-bottom-inner .img-box img {position: relative;}
	
	.greeting-flow-txt p {font-size:14rem; top: 2rem;}
}


/* ****************** 01 회사소개 :: 03 연혁 ********************** */
.history-page{padding-bottom: 20rem;}

.history-banner{position: relative; margin-top:8rem; z-index:1;}
.history-banner img{width:100%;}
.history-banner p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4rem; font-weight: 700; letter-spacing: 0em; filter: blur(2rem); background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; transition: letter-spacing 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.history-banner.animated p{letter-spacing: 1em; filter: blur(0); transition-delay:0.3s;}

/* 컨텐츠 중앙 라인 */
.cm-step-wrapper{position: relative;}
.cm-step-wrapper .step-line{position: absolute; width:2px; height:100%; background: #EFEFEF; top:0; left:50%;}
.cm-step-wrapper .step-line:before{position: absolute; content:''; width:8px; height:8px; background:#000; border-radius:50%; bottom:-8px; left:50%; transform:translateX(-50%);}
.cm-step-wrapper .step-line .line{position: absolute; width:100%; height:0px; background:var(--main-color);}
.cm-step-wrapper .step-line .line:before{position: absolute; content:''; width:8px; height:8px; background:var(--main-color); border-radius:50%; bottom:-8px; left:50%; transform:translateX(-50%);}
.cm-step-wrapper .step-line .line:after{position: absolute; content:''; width:32px; height:32px; background:var(--main-color); opacity: 0.1; border-radius:50%; bottom:-20px; left:50%; transform:translateX(-50%);}

.history-parallax-wrap{position: relative; padding: 12rem 0 0rem;}
.history-img-wrap{position: absolute; left: 0;}
.history-img-wrap .inner{width: 56rem; overflow:hidden;}
.history-img-wrap .txt-list li{display: none;}
.history-img-wrap .txt-list{text-align:center; margin-bottom:5rem;}
.history-img-wrap .txt-list .year-box{margin-bottom:2rem; font-size:2.4rem; color:var(--main-color); font-weight:700;}
.history-img-wrap .txt-list .year-txt{font-size:5rem; color:#000; font-weight:800; }
.history-img-wrap .img-list{position: relative; height:400px; display: flex; perspective: 1000px; width:100%;}
.history-img-wrap .img-list li{position: absolute; width:100%; height:0; padding-top:61.53%; border-radius:2rem; overflow:hidden;}
.history-img-wrap .img-list li span{position: absolute; top:0; right:0; width:0%; height:100%; transition:all 0.2s linear;}

.history-info-wrap{display: flex; margin-left:50%; width:50%; max-width:calc(100% - 65rem);}
.history-info-wrap ul{width: 100%; padding-left: 9rem; box-sizing: border-box;}
.history-column-list{position: relative;}
.history-column-list .history-item{position: relative; margin-bottom:6rem;}
.history-column-list .history-item .year{font-size: 3rem; font-weight: 700; color: #000; margin-bottom:2.5rem;}
.history-column-list .history-item .txt p{position: relative; font-size: 1.6rem; font-weight: 500; color: #666; line-height: 1.6;}
.history-column-list .history-item .txt p.dotted{padding-left: 42px;}
.history-column-list .history-item .txt p + p{margin-top: 1rem;}
.history-column-list .history-item .txt p.dotted .month{position: absolute; top: 0; left: 14px; width: 20px; font-weight: 700; color: #444;}
.history-column-list .history-item .txt p.dotted:before{content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: #aaa;}
.history-column-list:last-child .history-item:last-child{margin-bottom:0;}
.list-top-box-m{display: none;}

/* Scroll start */
.history-img-wrap.fixing{position: fixed; top: 190px; left: 50%; margin-left: -740px;}
.history-img-wrap.fixing.last{position: absolute; top: auto; bottom: 0;/* bottom: 390px; */}
.history-img-wrap li.on{display: block; z-index:1;}

.history-img-wrap .img-list li.on span{width:100%; right:0; left:auto;}
.history-img-wrap .img-list li.back span{width:100%; left:0; right:auto;}
.history-img-wrap .img-list li.prev span{width:40%; left:0; right:auto;}
.history-img-wrap .img-list li.back.next span{width:40%; right:0; left:auto;}

.history-img-wrap .img-list li.on:first-child + li + li{opacity:0;}

@media all and (max-width:1540px){
	/* Scroll start */
	.history-img-wrap.fixing{left: var(--area-padding); margin-left: 0;}
	.history-img-wrap.fixing.last{left: 0;}
}
@media all and (max-width:1024px){
	.history-img-wrap .inner{width:45rem;}
}
@media all and (max-width:800px){
	.history-banner{margin-top:4rem;}
	.history-parallax-wrap{padding-top:6rem;}
	.history-wrapper .cm-step-wrapper .step-line{left:0rem;}
	.history-img-wrap{display: none;}
	.history-info-wrap{margin-left:0; width:100%; max-width:100%;}
	.history-info-wrap ul{padding-left: 24px;}
	.history-column-list{margin-bottom:6rem;}
	.history-column-list .history-item{margin-bottom:2rem;}

	.list-top-box-m{display: block; margin-bottom:4rem;}
	.list-top-box-m .year-txt-box{text-align:left; margin-bottom:3.5rem;}
	.list-top-box-m .year-txt-box .year-box{margin-bottom:2rem; font-size:2rem; color:var(--main-color); font-weight:700;}
	.list-top-box-m .year-txt-box .year-txt{font-size: 3.5rem; color:#000; font-weight:800;}
	
	.list-top-box-m .img-box img{width:100%; max-width:360px;}
	
	.history-column-list .history-item{margin-bottom:4.5rem;}
	.history-column-list .history-item .year{font-size: 2.4rem; margin-bottom:2rem;}
	.history-column-list .history-item .txt p{font-size: 1.6rem; line-height: 1.6;}
	.history-column-list .history-item .txt p.dotted{padding-left: 40px;}
	.history-column-list .history-item .txt p + p{margin-top: 1rem;}
	.history-column-list .history-item .txt p.dotted .month{left: 12px; width: 20px;}
	.history-column-list .history-item .txt p.dotted:before{top: 8px; width: 4px; height: 4px;}
	.history-column-list:last-child .history-item:last-child{margin-bottom:0;}
}


/* ****************** 01 회사소개 :: 04 CI/BI ********************** */
.ci-con01{padding: 9.5rem 0 12rem;}
.ci-con01-box{width: 100%; height: 52rem; border-radius: 4rem; display: flex; align-items: center; justify-content: center; border: 2px solid #ddd;  background: #fff url("../images/content/ci_line_gr.png") 0 0 repeat; position: relative; background-size: cover;}
.ci-con01-box svg{height: 8.6rem;}
.ci-con01-box svg path{fill:var(--main-color2); transition: fill 0.3s;}
/* 모드 변경 버튼 */
.color-mode-box {position: absolute; bottom: 3.7rem; right: 3.7rem; display: flex; width: 11rem; height: 6rem; padding: 0.5rem; background-color: #eee; box-sizing: border-box; border-radius: 6rem; z-index: 999; transition: background-color 0.3s;}
.color-mode-box .box {width: 50%; height: 100%;}
.color-mode-box .box input {display: none;}
.color-mode-box .box label {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; cursor: pointer;}
.color-mode-box .box label i {color: #aaa; font-size: 2rem; transition: color 0.3s;}
.color-mode-box .box #lightMode + label::before {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #fff; box-shadow: 0 0 1rem 0 rgba(0,0,0,0.25); z-index: -1; transition: left 0.3s, background-color 0.3s;}
.color-mode-box .box #darkMode + label i {color: #aaa;}
.color-mode-box .box #lightMode:not(:checked) + label::before {left: 5rem; background-color: #000;}
.color-mode-box .box #lightMode:checked + label i {color: #000;}
/* black-ver */
.ci-con01-box.black-ver{background: #000 url("../images/content/ci_line_wh.png") 0 0 repeat; background-size: cover;}
.ci-con01-box.black-ver svg path{fill: #fff;}
.ci-con01-box.black-ver .color-mode-box{background-color: #444;}
.ci-con01-box.black-ver .color-mode-box .box #darkMode + label i {color: #000;}
.ci-con01-box.black-ver .color-mode-box .box #lightMode + label::before {background-color: #444;}
.ci-con01-box.black-ver .color-mode-box .box #lightMode:not(:checked) + label::before {background-color: #fff;}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	.ci-con01-box{background-image: image-set(url("../images/content/ci_line_gr.webp") type("image/webp"), url("../images/content/ci_line_gr.png")  type("image/png")); background-color:#fff; background-repeat: repeat; background-size: cover;}
	/* black-ver */
	.ci-con01-box.black-ver{background-image: image-set(url("../images/content/ci_line_wh.webp") type("image/webp"), url("../images/content/ci_line_wh.png")  type("image/png")); background-color:#000; background-repeat: repeat; background-size: cover;}
}

.ci-con02{padding: 12rem 0; background-color: #F5F5F5;}
.ci-con02-box{margin-top: 8rem; display: flex; flex-wrap:wrap; justify-content: space-between;}
.ci-con02-item{padding: 6rem 5rem; width: calc(33.33% - 1.2rem); border-radius: 2rem; box-sizing: border-box;}
.ci-con02-item h5{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #fff;}
.ci-con02-item p{margin-top: 9.5rem; font-size: 1.6rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: rgba(255,255,255,0.5);}
.ci-con02-item:nth-child(1){background-color: var(--main-color2);}
.ci-con02-item:nth-child(2){background-color: #fff;}
.ci-con02-item:nth-child(2) h5{color: #000;}
.ci-con02-item:nth-child(2) p{color: rgba(0,0,0,0.5);}
.ci-con02-item:nth-child(3){background-color: #000;}

.ci-con03{padding: 12rem 0;}
.ci-flex-box{display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.ci-flex-txt{width: 65%;}
.ci-flex-txt .cm-sub-tit02{margin-top: 2.5rem;}
.ci-flex-txt .cm-sub-txt{margin-top: 1.2rem;}
.ci-flex-img{width: 32.43%; height: 83.33%; background-color: #F5F5F5; border-radius: 2rem;}
.ci-flex-img img{width: 100%; height: 100%; object-fit: cover;}

.ci-con04{padding: 12rem 0; background-color: #F5F5F5;}
.ci-con04 .ci-flex-img{background-color: #fff;}

@media all and (max-width:800px){
	.ci-con01{padding: 8rem 0;}
	.ci-con01-box{height: 40rem; border-radius: 4rem;}
	.ci-con01-box svg{height: 5.6rem;}
	/* 모드 변경 버튼 */
	.color-mode-box {bottom: 3rem; right: 3rem; width: 10rem; height: 5rem; padding: 0.5rem; border-radius: 5rem;}
	.color-mode-box .box label i {font-size: 2rem;}
	.color-mode-box .box #lightMode:not(:checked) + label::before {left: 4rem;}

	.ci-con02{padding: 8rem 0;}
	.ci-con02-box{margin-top: 5rem;}
	.ci-con02-item{padding: 4rem 3rem; width: 100%; border-radius: 2rem;}
	.ci-con02-item h5{font-size: 3rem; line-height: 1.4;}
	.ci-con02-item p{margin-top: 6rem; font-size: 1.6rem; line-height: 1.6;}

	.ci-con03{padding: 8rem 0;}
	.ci-flex-box{display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
	.ci-flex-txt{width: 100%;}
	.ci-flex-txt .cm-sub-tit02{margin-top: 2.5rem;}
	.ci-flex-txt .cm-sub-txt{margin-top: 1.2rem;}
	.ci-flex-img{margin-top: 5rem; width: 100%; height: 83.33%; border-radius: 2rem;}

	.ci-con04{padding: 8rem 0;}
}


/* ****************** 02 제품 :: 리스트 ********************** */
.product-top-con {display: flex; gap: 0; padding-bottom: 4rem !important; align-items: flex-start;}

/* ── 좌측영역 ── */
.product-top-sidebar {width: 20rem; flex-shrink: 0; /*position: sticky;*/ top: calc(var(--sub-menu-height) + 1rem); margin-right: 4rem;}

.product-top-sidebar .reset-btn {width: 100%; height: 6rem; border-radius: 1rem; border: 1px solid var(--main-color2); background-color: var(--main-color2); padding: 0 2rem; font-size: 1.6rem; letter-spacing: -0.02em; font-weight: 600; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; transition: background .15s, color .15s;}
.product-top-sidebar .reset-btn i {font-size: 1.8rem; font-weight: 400; flex-shrink: 0;}
.product-top-sidebar .reset-btn:hover {}

.product-top-sidebar .filter-section {margin-top: 1rem; padding: 0 2rem; background-color: #F5F5F5; border-radius: 1rem; box-sizing: border-box;}
.product-top-sidebar .filter-title {display: flex; align-items: center; /* padding: 2rem 2.5rem 2rem 0; */ width: 100%; height: 6rem; padding-right: 2.5rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; color: #222; cursor: pointer; user-select: none; list-style: none; position: relative; box-sizing: border-box;     word-break: break-word;}
.product-top-sidebar .filter-title i{position: relative; top: -0.1rem; margin-right: 0.5rem; font-size: 1.8rem; font-weight: 400;}
.product-top-sidebar .filter-title:after{position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-size: 1.8rem; font-weight: 400; opacity: 0.2; content: "\e942"; font-family: xeicon; transition: transform .2s ease;}
.product-top-sidebar .filter-section.open .filter-title:after{transform: translateY(-50%) rotate(180deg);}

.product-top-sidebar .filter-items {width: 100%; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid rgba(0,0,0,0.1); overflow: hidden;}
.product-top-sidebar .filter-items .inner-scroll-JS{width: 100%; height: 28rem; height: 15vw; overflow: hidden;}
.product-top-sidebar .filter-items .inner-scroll-JS .scrollbar-track-y{width: 5px; background: rgba(222, 222, 222, .75);}
.product-top-sidebar .filter-items .inner-scroll-JS .scrollbar-thumb {width: 5px; background: rgba(0, 0, 0, .5);}

.product-top-sidebar .filter-item{width: 100%; display: block;}
.product-top-sidebar .filter-item + .filter-item{margin-top: 1rem;}
.cm-prd-checkbox .checkbox-item input[type="checkbox"]{display:none;}
.cm-prd-checkbox .checkbox-item{width: 100%; position:relative; padding-left:2.4rem; font-size: 1.6rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666; display: block; box-sizing: border-box;}
.cm-prd-checkbox .checkbox-item::before{position:absolute; top: -0.2rem; left:0; font-size: 1.8rem; color: #222; opacity: 0.2; content: "\e92b"; font-family: xeicon;}
.cm-prd-checkbox .checkbox-item:has(input[type="checkbox"]:checked) {color: #222; font-weight: 700;}
.cm-prd-checkbox .checkbox-item:has(input[type="checkbox"]:checked)::before {opacity: 1; font-weight: 400;}
  
 /* ── 우측영역 ── */
.product-top-list-container { flex: 1; min-width: 0; }
.product-list-box{padding: 0 5rem; background: #fff; border: 1px solid #ddd; border-radius: 2rem; box-sizing: border-box;}
.product-list-box + .product-list-box{margin-top: 2rem;}
.product-list-logo {height: 10.7rem; display: flex; align-items: center;}
.product-list-logo img{max-height: 35%;}
.product-list-item {border-top: 1px solid #eee; padding: 6rem 0; display: flex; align-items: flex-start;  justify-content: space-between; gap: 4rem;}
.product-list-item-info{flex: 1; min-width: 0;}
.product-list-item-info .tit{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 900; color: #000;}
.product-list-item-info .txt{margin-top: 2rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #222;}
.product-list-item-info .tags {margin-top: 3.4rem; display: flex; gap: 1rem; flex-wrap: wrap;}
.product-list-item-info .tags .tag {padding: 0 1rem; font-size: 1.4rem; line-height: 2.2rem; letter-spacing: -0.02em; font-weight: 500; color: #444; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 3rem; box-sizing: border-box;}
.product-list-item-btn {width: 22rem; display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0;}
.product-list-item-btn a{display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 3rem; width: 100%; height: 6rem; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 600; color: #000; border: 1px solid #ddd; border-radius: 3rem; cursor: pointer; box-sizing: border-box; transition:var(--transition-custom); transition-property: color, border-color, background-color;}
.product-list-item-btn a i{font-size: 1.8rem; flex-shrink: 0;}
.product-list-item-btn a:hover{color: #fff; border-color: var(--main-color2); background-color: var(--main-color2);}
#productList #noResult{width: 100%; height: 50rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666; text-align: center; background: #F5F5F5; border-radius: 2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}

.product-bottom-con{padding: 10rem 0;}
.product-bottom-bnr{padding: 0 var(--area-padding); width: 100%; height: 50rem; border-radius: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;}
.product-bottom-bnr h5{font-size: 5rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 800; color: #fff;}
.product-bottom-bnr p{margin-top: 1.5rem; font-size: 2.4rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 400; color: #fff;}
.product-bottom-bnr a{margin-top: 4.5rem; width: 20rem; height: 6rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 600; color: #fff; background-color: var(--main-color); border-radius: 6rem; display: flex; align-items: center; justify-content: center; text-align: center;}

@media all and (max-width:800px){
	.product-top-con {display: block; gap: 0; padding-bottom: 4rem !important;}

	/* ── 좌측영역 ── */
	.product-top-sidebar {width: 100%; flex-shrink: 0; position: sticky; top: var(--header-height); margin-right: 0; display: flex; justify-content: space-between; z-index: 1; background-color: #fff;}

	.product-top-sidebar .reset-btn {width: 6rem; height: 6rem; padding: 0 1rem; font-size: 0rem; justify-content: center;}
	.product-top-sidebar .reset-btn i {font-size: 1.8rem;}
	.product-top-sidebar .reset-btn:hover {}

	.product-top-sidebar .filter-section {margin-top: 0; width: calc(50% - 4rem); padding: 0 2rem; position: relative;}
	.product-top-sidebar .filter-title {position: relative; z-index: 11; font-size: 1.6rem; line-height: 1.3; background-color: #F5F5F5;}
	.product-top-sidebar .filter-title i{position: relative; top: -0.1rem; margin-right: 0.5rem; font-size: 1.8rem; font-weight: 400;}
	.product-top-sidebar .filter-title:after{font-size: 1.8rem;}

	.product-top-sidebar .filter-items {position: absolute; top: 0; left: 0; width: 100%; padding: 8rem 2rem 2rem; background-color: #F5F5F5; border-radius: 1rem; border-top: 0; box-sizing: border-box; display: none;}
	.product-top-sidebar .filter-section.open .filter-items:before{position: absolute; top: 6rem; left: 2rem; right: 2rem; content: ''; height: 1px; background-color: rgba(0,0,0,0.1);}
	.product-top-sidebar .filter-items .inner-scroll-JS{height: 28rem;}
	
	.product-top-sidebar .filter-item + .filter-item{margin-top: 1rem;}
	.cm-prd-checkbox .checkbox-item{padding-left:2.4rem; font-size: 1.6rem; line-height: 1.6;}
	.cm-prd-checkbox .checkbox-item::before{top: -0.2rem; left:0; font-size: 1.8rem;}
	  
	 /* ── 우측영역 ── */
	.product-top-list-container {width: 100%; margin-top: 3rem;}
	.product-list-box{padding: 0 3rem;}
	.product-list-box + .product-list-box{margin-top: 2rem;}
	.product-list-logo {height: 8rem; display: flex; align-items: center;}
	.product-list-logo img{max-height: 35%;}
	.product-list-item {padding: 4rem 0; display: block;}
	.product-list-item-info{width: 100%;}
	.product-list-item-info .tit{font-size: 3rem; line-height: 1.4;}
	.product-list-item-info .txt{margin-top: 2rem; font-size: 1.8rem; line-height: 1.6;}
	.product-list-item-info .tags {margin-top: 2.5rem; gap: 1rem;}
	.product-list-item-info .tags .tag {padding: 0 1rem; font-size: 1.4rem; line-height: 2.2rem; border-radius: 3rem;}
	.product-list-item-btn {margin-top: 3rem; width: 100%; display: flex; flex-direction: initial; gap: 1rem; flex-shrink: 0;}
	.product-list-item-btn a{gap: 1rem; padding: 0 3rem; width: 100%; height: 6rem; font-size: 1.8rem; border-radius: 3rem;}
	.product-list-item-btn a i{font-size: 1.8rem;}
	#productList #noResult{height: 40rem; font-size: 1.8rem; line-height: 1.6;}

	.product-bottom-con{padding: 8rem 0;}
	.product-bottom-bnr{padding: 0 var(--area-padding); height: 40rem; border-radius: 2rem;}
	.product-bottom-bnr h5{font-size: 3.8rem; line-height: 1.3;}
	.product-bottom-bnr p{margin-top: 1rem; font-size: 2rem; line-height: 1.6;}
	.product-bottom-bnr a{margin-top: 4rem; width: 18rem; height: 5rem; font-size: 1.7rem; line-height: 1.6;}
}


/* ****************** 03 솔루션 :: TRICERA ********************** */
.tricera-page .cm-page-tit svg{height: 2.5rem; display: block;}
.tricera-page .cm-page-tit svg path{}

.tricera-con01{margin-top: 8rem; width: 100%; position: relative;}
.tricera-con01 img{width: 100%; height: 100%; object-fit: cover;}
.tricera-con01 p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4rem; line-height: 1.5; font-weight: 700; letter-spacing: 0em; filter: blur(2rem); background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; transition: letter-spacing 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.tricera-con01.animated p{letter-spacing: 1em; filter: blur(0); transition-delay:0.3s;}

.tricera-con02{position: relative; padding: 10rem 0 14rem;}
.tricera-con02-iframe-wrapper{position:relative; max-width:900px; margin:0px auto; border-radius: 2rem; overflow:hidden; box-shadow: 2rem 2rem 8rem rgba(0,0,0,0.25);}
.tricera-con02-iframe-box{position:relative; padding-top: 56.25%; height:0; background-color:#000;}
.tricera-con02-iframe-box iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.tricera-con02-iframe-cover{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer;}
.tricera-con02-iframe-cover:after{position:absolute; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:rgba(0,0,0,0.1); content:"";}
.tricera-con02-iframe-cover .thumb{display:block; width:100%; height:100%;transition:all 0.3s}
.tricera-con02-iframe-cover .thumb img{width:100%; height:100%;}
.tricera-con02-iframe-cover:hover .thumb{transform: scale(1.1) rotate(0.002deg);}
.tricera-con02-iframe-cover .icon{position:absolute; top:50%; left:50%; width: 12rem; height: 12rem; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(5rem); border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; z-index:1; transform: translate(-50%, -50%);}
.tricera-con02-iframe-cover .icon img{height: 2rem;}

.tricera-con02-flow-txt {position: absolute; bottom: 3rem; left: 0; width: 100%; display:flex; white-space:nowrap;}
.tricera-con02-flow-txt p {display: inline-block; font-size: 26rem; font-weight: 700; color: rgba(0,0,0,0.03); white-space: nowrap; animation: 70s 0s flowLoop infinite linear; animation-play-state: paused;}
.tricera-con02-flow-txt p:not(.center){opacity: 0; transition:var(--transition-custom2); transition-property: opacity;}
.tricera-con02-flow-txt p.cm-word-split-JS.splitting .word {line-height: 1; display: inline-block; vertical-align: middle;}
.tricera-con02-flow-txt p.cm-word-split-JS.splitting .char{opacity:1;}
.tricera-con02-flow-txt p.cm-word-split-JS.splitting .word{animation: text-fade-out2 1.5s ease-in-out both; animation-delay:calc(var(--word-index) * 0.15s);}
.tricera-con02-flow-txt.animated p.cm-word-split-JS.splitting .word{animation: text-active-animation2 1s ease-in-out both; animation-delay:calc(var(--word-index) * 0.15s);}
.tricera-con02-flow-txt.animated p.cm-word-split-JS{overflow: visible;}
/* marquee :: active */
.tricera-con02-flow-txt.animated p{animation-play-state: running; }
.tricera-con02-flow-txt.animated p:not(.center){opacity: 1; transition-delay:2s;}
.tricera-con02-flow-txt p.cm-word-split-JS.splitting .word{animation: text-fade-out2 1.5s ease-in-out both;  animation-delay:calc(var(--word-index) * 0.15s);}
.tricera-con02-flow-txt.animated p.cm-word-split-JS.splitting .word {animation: text-active-animation2 1s ease-in-out both; animation-delay:calc(var(--word-index) * 0.15s);}

.tricera-con03{padding: 12rem 0;}
.tricera-con03-box{margin-top: 8rem; padding: 4rem; border-radius: 2rem; background-color: #F5F5F5; box-sizing: border-box; display: flex; flex-wrap:wrap; align-items: stretch; justify-content: space-between;}
.tricera-con03-img{width: 47.14%; border-radius: 2rem; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.tricera-con03-img img{width: 77.27%; display: block;}
.tricera-con03-txt{width: 50%;}
.tricera-con03-txt-item{padding: 5rem 0 5rem 9.3rem; position: relative;}
.tricera-con03-txt-item + .tricera-con03-txt-item{border-top: 1px solid rgba(0,0,0,0.1);}
.tricera-con03-txt-item .num{position: absolute; top: 50%; margin-top: -3.5rem; left: 0; width: 7rem; height: 7rem; font-size: 1.6rem; letter-spacing: -.02em; font-weight: 700; color: #fff; text-align: center; background-color: var(--main-color); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.tricera-con03-txt-item:nth-child(2) .num{background-color: var(--main-color2);}
.tricera-con03-txt-item:nth-child(3) .num{background-color: #222;}
.tricera-con03-txt-item .tit{font-size: 2.4rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
.tricera-con03-txt-item .txt{margin-top: 0.5rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}

.tricera-con04{padding: 12rem 0; background-color: #F5F5F5;}
.tricera-con04-step{margin-top: 8rem; padding: 4.5rem; background-color: #fff; border-radius: 2rem; box-sizing: border-box;}
.tricera-con04-step-list{margin: -1rem; display: flex; flex-wrap:wrap; align-items: stretch;}
.tricera-con04-step-item{margin: 1rem; display: flex; flex-direction: column;}
.tricera-con04-step-item01{width: calc(48.5% - 2rem);}
.tricera-con04-step-item02{width: calc(33.28% - 2rem);}
.tricera-con04-step-item03{width: calc(18.22% - 2rem);}
.tricera-con04-step-arrow{width: 100%; height: 6rem; font-size: 1.8rem; letter-spacing: -0.02em; font-weight: 600; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; background-color: var(--main-color); position: relative; box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.1);}
/* 01 */
.tricera-con04-step-item01 .tricera-con04-step-arrow{border-radius: 1rem 0 0 1rem;}
.tricera-con04-step-item01 .tricera-con04-step-arrow:after{position: absolute; top: 0; right: -3.55rem; width: 3.6rem; height: 100%; background-color: var(--main-color); clip-path: polygon(0 0, calc(100% - 3.6rem) 0, 100% 50%, calc(100% - 3.6rem) 100%, 0 100%); content: '';}
/* 02 */
.tricera-con04-step-item02 .tricera-con04-step-arrow{margin-left: 2.8rem; width: calc(100% - 2.8rem); background-color: var(--main-color2);}
.tricera-con04-step-item02 .tricera-con04-step-arrow:before{position: absolute; top: 0; left: -3.55rem; width: 3.6rem; height: 100%; background-color: var(--main-color2); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 3.6rem 50%); content: '';}
.tricera-con04-step-item02 .tricera-con04-step-arrow:after{position: absolute; top: 0; right: -3.55rem; width: 3.6rem; height: 100%; background-color: var(--main-color2); clip-path: polygon(0 0, calc(100% - 3.6rem) 0, 100% 50%, calc(100% - 3.6rem) 100%, 0 100%); content: '';}
/* 03 */
.tricera-con04-step-item03 .tricera-con04-step-arrow{margin-left: 2.8rem; width: calc(100% - 5.6rem); background-color: #000;}
.tricera-con04-step-item03 .tricera-con04-step-arrow:before{position: absolute; top: 0; left: -3.55rem; width: 3.6rem; height: 100%; background-color: #000; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 3.6rem 50%); content: '';}
.tricera-con04-step-item03 .tricera-con04-step-arrow:after{position: absolute; top: 0; right: -3.55rem; width: 3.6rem; height: 100%; background-color: #000; clip-path: polygon(0 0, calc(100% - 3.6rem) 0, 100% 50%, calc(100% - 3.6rem) 100%, 0 100%); content: '';}

.tricera-con04-step-box{margin-top: 2rem; padding: 4rem 2rem 2rem; text-align: center; border: 1px solid var(--main-color); background-color: #fff; border-radius: 1rem; box-sizing: border-box; box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.1); flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.tricera-con04-step-tit{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
.tricera-con04-step-txt{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}
.tricera-con04-step-info{margin-top: 4rem; display: flex; flex-wrap:wrap; justify-content: space-between;}
.tricera-con04-step-info li{padding: 3rem 1rem; width: 100%; background-color: #F5F5F5; border-radius: 1rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;}
.tricera-con04-step-item01 .tricera-con04-step-info li{width: calc(33.33% - 0.66rem);}
.tricera-con04-step-item02 .tricera-con04-step-info li{width: calc(50% - 0.5rem);}
.tricera-con04-step-info li span{font-size: 1.4rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color:  var(--main-color); display: inline-block;}
.tricera-con04-step-info li h5{margin-top: 1rem; font-size: 2rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
.tricera-con04-step-info li p{margin-top: 0.7rem; font-size: 1.4rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}
.tricera-con04-step-info li img{margin-top: auto; padding-top: 2rem; display: inline-block; height: 8rem;}

.tricera-con05{padding: 16rem 0; background: #000 url("../images/content/tricera_con05_bg.png") center/cover no-repeat;}
.tricera-con05 .cm-sub-tit{font-weight: 700; color: #fff;}
.tricera-con05-title{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; color: #fff; font-weight: 700; text-align: center;}
.tricera-con05-title:before{margin: 5rem auto 8rem; display: block; width: 0.8rem; height: 4.4rem; background: url("../images/content/tricera_con05_dot.svg") center/cover no-repeat; content: '';}
.tricera-con05-wrapper{margin-top: 6rem;}
.tricera-con05-list{margin: -1rem; display: flex; flex-wrap:wrap;}
.tricera-con05-item{margin: 1rem; padding: 5rem; width: calc(33.33% - 2rem); background-color: rgba(255,255,255,0.1); backdrop-filter:blur(5rem); border: 1px solid rgba(255,255,255,0.2); border-radius: 2rem; box-sizing: border-box;}
.tricera-con05-tag{padding: 0 1.2rem; font-size: 1.4rem; line-height: 2.6rem; letter-spacing: -0.02em; font-weight: 600; color: #fff; background-color: var(--main-color); border-radius: 2.6rem; display: inline-block;}
.tricera-con05-txt{margin-top: 7.5rem;}
.tricera-con05-txt img{height: 8rem; display: block;}
.tricera-con05-txt h5{margin: 3rem 0 2rem; font-size: 2.4rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #fff;}
.tricera-con05-txt p{position: relative; padding-left: 1rem; font-size: 1.6rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: rgba(255,255,255,0.5);}
.tricera-con05-txt p:before{position: absolute; top: 0; left: 0; content: '•';}

@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
	.tricera-con05{background-image: image-set(url("../images/content/tricera_con05_bg.webp") type("image/webp"), url("../images/content/tricera_con05_bg.png")  type("image/png")); background-color:#000; background-size:cover; background-position: center center; background-repeat: no-repeat;}
}

.tricera-con06{padding: 12rem 0;}
.tricera-con06-title{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000; text-align: center;}
.tricera-con06-title b{font-weight: 700; color: var(--tricera-color);}
.tricera-con06-list{margin-top: 8rem;}
.tricera-con06-item{padding: 4rem; border-radius: 2rem; background-color: #F5F5F5; box-sizing: border-box; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.tricera-con06-item + .tricera-con06-item{margin-top: 2rem;}
.tricera-con06-img{width: 47.14%;}
.tricera-con06-img img{width: 100%;}
.tricera-con06-txt{width: 47.14%;}
.tricera-con06-txt strong{font-size: 1.6rem; letter-spacing: -0.025em; font-weight: 500; color: var(--tricera-color); display: block;}
.tricera-con06-txt h5{margin-top: 2rem; font-size: 3rem; line-height: 1.16; letter-spacing: -0.025em; font-weight: 900; color: #000;}
.tricera-con06-txt p{margin-top: 4rem; padding-top: 4rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.025em; font-weight: 500; color: #666; border-top: 1px solid rgba(0,0,0,0.1);}

.tricera-con07{padding: 12rem 0; background-color: #F5F5F5;}
.faq-list-con2{margin: 6rem auto 0; max-width: 1200px;}
.faq-list-con2 .faq-item{overflow:hidden; margin-bottom:1rem; border:1px solid #fff; border-radius:1rem; background-color:#fff; transition:all 0.3s}
.faq-list-con2 .faq-item dt,
.faq-list-con2 .faq-item dd{padding:2.4rem 7rem;}
.faq-list-con2 .faq-item dt{position:relative; cursor:pointer; }
.faq-list-con2 .faq-item dt .faq-title{display:block; font-size:2rem; font-weight:500; line-height:1.6; letter-spacing: -0.05em; font-weight: 600; color: #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top;}
.faq-list-con2 .faq-item dt .arrow{position:absolute; top:2.8rem; right:3rem; font-size: 2.4rem; color: #000;}
.faq-list-con2 .faq-item dt .arrow:after{content: "\e914"; font-family: xeicon;}
.faq-list-con2 .faq-item dd{display:none; position:relative; background:#fff;}
.faq-list-con2 .faq-item dd .answer-con{font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.05em; font-weight: 500; color: #666;}
.faq-list-con2 .faq-item dt .question-icon,
.faq-list-con2 .faq-item dd .answer-icon{position:absolute; top:2.8rem; left:3rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; color: #000;}
/* Open */
.faq-list-con2 .faq-item.open{border:1px solid var(--tricera-color); box-shadow: 0 0.4rem 2rem 0 rgba(0,0,0,0.1);}
.faq-list-con2 .faq-item.open dt{background-color:var(--tricera-color);}
.faq-list-con2 .faq-item.open dt .faq-title{white-space:normal; text-overflow:unset; color:#fff;}
.faq-list-con2 .faq-item.open dt .faq-category,
.faq-list-con2 .faq-item.open dt .question-icon,
.faq-list-con2 .faq-item.open dt .arrow{color:#fff;}
.faq-list-con2 .faq-item.open dt .arrow:after{content: "\e91b";}

/* 소개서 다운로드 팝업 */
.tricera-modal-content{position:relative; width:96%; max-width:1015px; margin:20px auto; }
.tricera-modal-content .modal-close-btn{position:absolute; top:0; right:0; color:#000; }
.tricera-modal-content .modal-close-btn i{font-size:4rem;}
.tricera-modal-content .modal-close-btn i:hover {color:#000}
.tricera-inner-box{padding:10rem 8rem; background-color:#fff; border-radius: 3rem;}
.tricera-tit-con {position: relative; padding-bottom: 3rem; border-bottom: 1px solid #EEEEEE;}
.tricera-tit-con h3 {font-size: 4rem; font-weight: 800; letter-spacing: -0.02em; color: #222; line-height: 1.4; margin-bottom: 2rem;}
.tricera-tit-con .inquiry-essential-txt {text-align: left; padding-bottom: 0;}
.tricera-inner .online-list {margin: -0.5rem 0;}
.tricera-inner .online-item {width: 100%; margin: 0.5rem 0;}
.tricera-inner .online-item.agree-full {width: 100%;}
.tricera-inner .inquiry-agree-box .agree-txt label i {top: 0.4rem;}
.tricera-inner .inquiry-btn-con {margin-top: 3rem;}
.gs-custom-selectbox {position: relative; display: inline-block; width: 100%;}
.gs-custom-selectbox select {display: none;}
.gs-custom-selectbox .select-style {line-height: var(--form-height);  font-size: var(--form-font-size); font-weight: 500;  letter-spacing: -0.02em; color: #222; background-color: #fff; border-radius: 0;}
.gs-custom-selectbox .select-style span {width: 80%; display:block;     font-weight: 500;word-break: break-all; display: -webkit-box;overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.gs-custom-selectbox .select-style:after {font-family: 'xeicon'; position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); content: "\e942"; font-size: 2rem; color: #000;}
.gs-custom-selectbox .select-options {position: absolute; z-index: 1; top: 100%; left: 0; display: none; width: 100%; margin-top: 0.5rem; padding: 0; list-style: none; background: #fff; border-radius: 1rem; border: 1px solid var(--form-border-color-hv);box-sizing: border-box; overflow-x: hidden; overflow-y: auto; max-height: 23rem;}
.gs-custom-selectbox .select-options li {height: auto; font-size: 1.4rem; line-height: 1.5; color: #666; text-decoration: none; padding: 1rem 2rem; display: block; word-break: break-word;cursor: pointer;}
.gs-custom-selectbox .select-options li.is-selected {color: #222; font-weight: 500;}
.gs-custom-selectbox .select-options li:hover {background: #f2f2f2;}
/* open */
.gs-custom-selectbox.open .select-options {display: block;}
.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: 5px;}
html:not(.is-mobile) .gs-custom-selectbox .select-options::-webkit-scrollbar-track {background-color:#f2f2f2; border-radius:0;}
html:not(.is-mobile) .gs-custom-selectbox .select-options::-webkit-scrollbar-thumb{background-color:#333; border-radius:5px;	transition:all 0.5s;}


@media all and (max-width:800px){
	.tricera-page .cm-page-tit svg{height: 2.5rem;}
	.tricera-con01{margin-top: 8rem; width: 100%; position: relative;}
	.tricera-con01 img{width: 100%; height: 100%; object-fit: cover;}
	.tricera-con01 p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.4rem; line-height: 1.5; font-weight: 700; letter-spacing: 0em; filter: blur(2rem); background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; transition: letter-spacing 0.8s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
	.tricera-con01.animated p{letter-spacing: 1em; filter: blur(0); transition-delay:0.3s;}

	.tricera-con02{padding: 8rem 0 10rem;}
	.tricera-con02-iframe-wrapper{border-radius: 2rem;}
	.tricera-con02-iframe-cover .icon{width: 8rem; height: 8rem;}
	.tricera-con02-iframe-cover .icon img{height: 1.4rem;}

	.tricera-con02-flow-txt {bottom: 3rem;}
	.tricera-con02-flow-txt p {font-size: 26rem;}

	.tricera-con03{padding: 8rem 0;}
	.tricera-con03-box{margin-top: 5rem; padding: 3rem; padding-bottom: 0; border-radius: 2rem;}
	.tricera-con03-img{padding: 3rem 0; width: 100%; border-radius: 2rem;}
	.tricera-con03-img img{width: 77.27%;}
	.tricera-con03-txt{width: 100%;}
	.tricera-con03-txt-item{padding: 4rem 0 4rem 9.3rem;}
	.tricera-con03-txt-item .num{margin-top: -3.5rem; left: 0; width: 7rem; height: 7rem; font-size: 1.6rem;}
	.tricera-con03-txt-item .tit{font-size: 2.4rem; line-height: 1.4;}
	.tricera-con03-txt-item .txt{margin-top: 0.5rem; font-size: 1.8rem; line-height: 1.6;}

	.tricera-con04{padding: 8rem 0;}
	.tricera-con04-step {margin-top: 5rem; padding: 3rem 1.5rem;}
    .tricera-con04-step-list {flex-direction: column;}
    .tricera-con04-step-item01,
    .tricera-con04-step-item02,
    .tricera-con04-step-item03 {width: calc(100% - 2rem); flex-direction: row; flex-wrap: wrap; }

    .tricera-con04-step-arrow {width: 6rem; height: auto; align-self: stretch; font-size: 1.7rem;}
    .tricera-con04-step-item02 .tricera-con04-step-arrow,
    .tricera-con04-step-item03 .tricera-con04-step-arrow {margin-left: 0; width: 6rem; margin-top: 2.8rem;}
	/* item01 */
	.tricera-con04-step-item01 .tricera-con04-step-arrow {border-radius: 1rem 1rem 0 0;}
	.tricera-con04-step-item01 .tricera-con04-step-arrow:after{position: absolute; top: auto; bottom: -3.55rem; right: 0; width: 100%; height: 3.6rem; background-color: var(--main-color); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.6rem), 50% 100%, 0 calc(100% - 3.6rem)); content: '';}
    /* item02 */
    .tricera-con04-step-item02 .tricera-con04-step-arrow {}
	.tricera-con04-step-item02 .tricera-con04-step-arrow:before{position: absolute; top: -3.55rem; left: 0; width: 100%; height: 3.6rem; background-color: var(--main-color2); clip-path: polygon(0 0, 50% 3.6rem, 100% 0, 100% 100%, 0 100%); content: '';}
	.tricera-con04-step-item02 .tricera-con04-step-arrow:after{position: absolute; top: auto; bottom: -3.55rem; right: 0; width: 100%; height: 3.6rem; background-color: var(--main-color2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.6rem), 50% 100%, 0 calc(100% - 3.6rem)); content: '';}
	/* item03 */
    .tricera-con04-step-item03 .tricera-con04-step-arrow {margin-bottom:3.6rem;}
	.tricera-con04-step-item03 .tricera-con04-step-arrow:before{position: absolute; top: -3.55rem; left: 0; width: 100%; height: 3.6rem; background-color: #000; clip-path: polygon(0 0, 50% 3.6rem, 100% 0, 100% 100%, 0 100%); content: '';}
	.tricera-con04-step-item03 .tricera-con04-step-arrow:after{position: absolute; top: auto; bottom: -3.55rem; right: 0; width: 100%; height: 3.6rem; background-color: #000; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.6rem), 50% 100%, 0 calc(100% - 3.6rem)); content: '';}

    .tricera-con04-step-box {margin-top: 0; margin-left: 1.5rem; padding: 4rem 2rem 2rem; width: calc(100% - 6rem - 1.5rem); border-radius: 1rem;}
	.tricera-con04-step-tit{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
	.tricera-con04-step-txt{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.6; letter-spacing: -0.02e,; font-weight: 500; color: #666;}
	.tricera-con04-step-info{margin-top: 3rem;}
    .tricera-con04-step-info li {padding: 3rem 1rem; height: auto !important; }
    .tricera-con04-step-item01 .tricera-con04-step-info li,
    .tricera-con04-step-item02 .tricera-con04-step-info li { width: 100%; }
	.tricera-con04-step-info li + li{margin-top: 0.75rem;}
	.tricera-con04-step-info li span{font-size: 1.4rem; line-height: 1.4;}
	.tricera-con04-step-info li h5{margin-top: 1rem; font-size: 2rem; line-height: 1.4;}
	.tricera-con04-step-info li p{margin-top: 0.7rem; font-size: 1.4rem; line-height: 1.6;}
	.tricera-con04-step-info li img{margin-top: auto; padding-top: 2rem; height: 5rem;}

	.tricera-con05{padding: 10rem 0;}
	.tricera-con05-title{font-size: 2.4rem; line-height: 1.4;}
	.tricera-con05-title:before{margin: 3.5rem auto 5.5rem; width: 0.8rem; height: 4.4rem;}
	.tricera-con05-wrapper{margin-top: 6rem;}
	.tricera-con05-list{margin: -1rem;}
	.tricera-con05-item{margin: 1rem; padding: 4rem 3rem; width: calc(100% - 2rem); border-radius: 2rem;}
	.tricera-con05-tag{padding: 0 1.2rem; font-size: 1.4rem; line-height: 2.6rem;}
	.tricera-con05-txt{margin-top: 5rem;}
	.tricera-con05-txt img{height: 8rem; display: block;}
	.tricera-con05-txt h5{margin: 3rem 0 2rem; font-size: 2.4rem; line-height: 1.4;}
	.tricera-con05-txt p{padding-left: 1rem; font-size: 1.6rem; line-height: 1.6;}

	.tricera-con06{padding: 8rem 0;}
	.tricera-con06-title{font-size: 2.4rem; line-height: 1.4;}
	.tricera-con06-list{margin-top: 8rem;}
	.tricera-con06-item{padding: 3rem; border-radius: 2rem;}
	.tricera-con06-item + .tricera-con06-item{margin-top: 2rem;}
	.tricera-con06-img{width: 100%;}
	.tricera-con06-txt{margin-top: 3rem; width: 100%;}
	.tricera-con06-txt strong{font-size: 1.6rem;}
	.tricera-con06-txt h5{margin-top: 2rem; font-size: 2.4rem; line-height: 1.16;}
	.tricera-con06-txt p{margin-top: 2rem; padding-top: 2rem; font-size: 1.8rem; line-height: 1.6;}

	.tricera-con07{padding: 8rem 0;}
	.faq-list-con2{margin: 5rem auto 0;}
	.faq-list-con2 .faq-item{border-radius:1rem;}
	.faq-list-con2 .faq-item dt,
	.faq-list-con2 .faq-item dd{padding:2.4rem 5rem;}
	.faq-list-con2 .faq-item dt .faq-title{font-size:2rem; line-height:1.6;}
	.faq-list-con2 .faq-item dt .arrow{top:2.8rem; right:1.5rem; font-size: 2.4rem;}
	.faq-list-con2 .faq-item dd .answer-con{font-size: 1.8rem; line-height: 1.6;}
	.faq-list-con2 .faq-item dt .question-icon,
	.faq-list-con2 .faq-item dd .answer-icon{top:2.8rem; left:2rem; font-size: 2rem;}
	
	/* 소개서 다운로드 팝업 */
	.tricera-inner-box {padding: 6rem 3rem;}
	.tricera-tit-con h3 {font-size: 3rem;}
	.tricera-modal-content .modal-close-btn {top: -3rem; right: -2rem; }
	.tricera-modal-content .modal-close-btn i {font-size: 3rem;}
}


/* ****************** 04 서비스 :: 01 기술지원 서비스 ********************** */
.tech-support-con01{margin-top: 8rem; padding: 10rem 0; background-color: #F5F5F5;}
.tech-support-con01-box{position: relative;}
/* 중앙원 */
.tech-support-con01-center{position: absolute; top: 50%; left: 50%; margin-left: -10.9375vw; margin-top: -10.9375vw; width: 21.8750vw; height: 21.8750vw; border-radius: 100%; box-sizing: border-box; box-shadow: 2rem 2rem 5rem 0 rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; z-index: 2;}
.tech-support-con01-center:before{position: absolute; top: 50%; left: 50%; transform: translate(-47%,-50%); width: 62.2rem; height: 45.1rem; background: url("../images/content/tech_support_con01_bg_line.svg") center/cover no-repeat; content: ''; z-index: -1;}
.tech-support-con01-center:after{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: url("../images/content/tech_support_con01_bg_cir.svg") center/cover no-repeat; content: '';}
.tech-support-con01-center-inner{width: 37.6rem; height: 37.6rem; width: 19.5833vw; height: 19.5833vw; background-color: #fff; border-radius: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 1;}
.tech-support-con01-center-inner h5{font-size: 4rem; font-size: 2.0833vw; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; color: #000;}
.tech-support-con01-center-inner h5 b{font-weight: inherit; color: var(--main-color);}
.tech-support-con01-center-inner p{margin-top: 2.7rem; font-size: 1.4rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; color: #000;}
/* 리스트 */
.tech-support-con01-list{position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 31.08%); justify-content: space-between; row-gap: 2rem;}
.tech-support-con01-item{width: 100%; /* width: 46rem; */}
.tech-support-con01-item01,
.tech-support-con01-item02{align-self: end;}
.tech-support-con01-item03,
.tech-support-con01-item04{align-self: start;}
.tech-support-con01-inner{position: relative; padding: 4rem; background-color: #fff; border: 1px solid #ddd; border-radius: 2rem; box-sizing: border-box; transition:var(--transition-custom); transition-property:border-color, box-shadow;}
.tech-support-con01-inner img{height: 6.5rem; display: block;}
.tech-support-con01-inner h5{margin-top: 3.5rem; font-size: 2.4rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
.tech-support-con01-inner p{margin-top: 3rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}
.tech-support-con01-inner:after{position: absolute; width: 3rem; height: 3rem; font-size: 2rem; text-indent: 0.4rem; color: rgba(0,0,0,0.5); background-color: #fff; border: 1px solid #ddd; border-radius: 100%; box-sizing: border-box; content: "\e93f"; font-family: xeicon; display: flex; align-items: center; justify-content: center; transition:var(--transition-custom); transition-property:border-color;}
.tech-support-con01-item01 .tech-support-con01-inner:after{bottom: 13.3rem; right: -1.5rem; content: "\e93c"; text-indent: -0.4rem;}
.tech-support-con01-item02 .tech-support-con01-inner:after{bottom: 13.3rem; left: -1.5rem;}
.tech-support-con01-item03 .tech-support-con01-inner:after{top: 12.8rem; right: -1.5rem; content: "\e93c"; text-indent: -0.4rem;}
.tech-support-con01-item04 .tech-support-con01-inner:after{top: 12.8rem; left: -1.5rem;}
/* active */
.tech-support-con01-item.active .tech-support-con01-inner{border-color: var(--main-color); box-shadow: 1rem 1rem 2rem 0 rgba(0,0,0,0.1);}
.tech-support-con01-item.active .tech-support-con01-inner:after{border-color: var(--main-color);}

@media all and (min-width:1920px){
	/* 중앙원 */
	.tech-support-con01-center{margin-left: -21rem; margin-top: -21rem; width: 42rem; height: 42rem;}
	.tech-support-con01-center-inner{width: 37.6rem; height: 37.6rem;}
	.tech-support-con01-center-inner h5{font-size: 4rem;}
}

.tech-support-con02{position: relative; width: 100%; height: 90rem; overflow: hidden;}
.tech-support-con02 .cm-page-tit{position:absolute; left:0px; top:15rem; width:100%; z-index:1;}
.tech-support-con02 .cm-page-tit .cm-sub-tit{margin-top: 0;}

@media all and (min-width:801px){
	.tech-support-con02 .cm-page-tit .cm-sub-tit,
	.tech-support-con02 .cm-page-tit .cm-sub-txt{color: #fff;}
}

.tech-support-con02-container{width: 100%; height: 100%;}
.tech-support-con02-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.tech-support-con02-bg .bg-item{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.tech-support-con02-bg .bg-item div{width:100%; height:100%; background-size: cover !important;}

.tech-support-con02-list-con{display:table; width:100%; height:100%; table-layout:fixed;}
.tech-support-con02-item{display:table-cell; position:relative; width:25%; height:100%; vertical-align: top; box-sizing: border-box;}
.tech-support-con02-item + .tech-support-con02-item{border-left: 1px solid rgba(255,255,255,0.1);}
.tech-support-con02-item:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: translateY(5rem); opacity: 0; content: ''; transition:var(--transition-custom);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0084e9+0,0084e9+100&0+0,1+100 */
background: linear-gradient(to bottom,  rgba(0,132,233,0) 0%,rgba(0,132,233,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.tech-support-con02-item + .tech-support-con02-item:after{position: absolute; bottom: calc(13.33% + 18rem); left: -2.1rem; width: 4.2rem; height: 4.2rem; font-size: 2rem; color: var(--main-color); background-color: rgba(255,255,255,0.1); backdrop-filter: blur(2rem); border: 1px solid var(--main-color); border-radius: 100%; box-sizing: border-box; content: "\e93f"; font-family: xeicon; display: flex; align-items: center; justify-content: center;}
.tech-support-con02-inner{position: relative; display: block; width: 100%; height:100%; padding-bottom: 13.33%; display:flex; flex-direction: column; align-items:center; justify-content: flex-end; text-align: center; width: 100%; height:100%; box-sizing: border-box;}
.tech-support-con02-inner .step{margin: 0 auto; width: 12rem; height: 4.2rem; font-size: 1.6rem; letter-spacing: -0.02em; font-weight: 600; color: #fff; text-align: center; border-radius: 4.2rem; background-color: var(--main-color); display: flex; align-items: center; justify-content: center;}
.tech-support-con02-inner .tit{margin-top: 7rem; font-size:3rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.02em; color: #fff;}
.tech-support-con02-inner .txt{margin-top: 2rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: rgba(255,255,255,0.5);}
/* Over시 */
.tech-support-con02-item.active:before{transform: translateY(0); opacity: 1;}

.tech-support-con03{padding: 15rem 0;}
.tech-support-con03-list{margin-top: 8rem;}
.tech-support-con03-item{}
.tech-support-con03-item + .tech-support-con03-item{margin-top: 2rem;}
.tech-support-con03-inner{width: 100%; padding: 4rem; display: flex; flex-wrap:wrap; align-items: center; border-radius: 2rem; border: 1px solid #F5F5F5; background-color: #F5F5F5; position: relative; box-sizing: border-box; transition:var(--transition-custom); transition-property:background-color, border-color, box-shadow;}
.tech-support-con03-icon{width: 14rem;}
.tech-support-con03-icon svg{width: 100%;}
.tech-support-con03-icon svg rect{transition:var(--transition-custom); transition-property:fill;}
.tech-support-con03-txt{padding: 0 12rem 0 4rem; width: calc(100% - 14rem); box-sizing: border-box;}
.tech-support-con03-txt h5{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
.tech-support-con03-txt p{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}
.tech-support-con03-num{position: absolute; top: 50%; right: 4rem; font-size: 10rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: rgba(0,0,0,0.05); transform: translateY(-50%);}
/* active */
.tech-support-con03-item.active .tech-support-con03-inner{border-color: var(--main-color2); background-color: #fff; box-shadow: 0rem 0.4rem 2rem 0 rgba(0,0,0,0.15);}
.tech-support-con03-item.active .tech-support-con03-icon svg rect{fill: #F5F5F5;}

.tech-support-con04{padding: 12rem 0; background-color: #F5F5F5;}
.tech-support-con04-wrapper{margin-top: 6rem;}
.tech-support-con04-list{margin: -0.55rem; display: flex; flex-wrap:wrap;}
.tech-support-con04-item{margin: 0.55rem; width: calc(14.28% - 1.1rem);}
.tech-support-con04-item span{position: relative; width: 100%; height: 0; padding-top: 39.6%; background-color: #fff; display: block;}
.tech-support-con04-item span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}


@media all and (max-width:1279px){
	.tech-support-con02-inner .m-br{display: block;}
}
@media all and (max-width:800px){
	.tech-support-con01{margin-top: 5rem; padding: 8rem 0 10rem;}
	.tech-support-con01-box{position: relative;}
	/* 중앙원 */
	.tech-support-con01-center{margin: 0 auto 5rem; position: relative; top: auto; left: auto; margin-top: 0; width: 30rem; height: 30rem;}
	.tech-support-con01-center:before{display: none;}
	.tech-support-con01-center-inner{width: 27rem; height: 27rem;}
	.tech-support-con01-center-inner h5{font-size: 3.2rem; line-height: 1.2;}
	.tech-support-con01-center-inner p{margin-top: 2rem; font-size: 1.4rem; line-height: 1.4;}
	/* 리스트 */
	.tech-support-con01-list{grid-template-columns: repeat(1, 100%); row-gap: 1.5rem;}
	.tech-support-con01-inner{padding: 4rem 3rem; border-radius: 2rem;}
	.tech-support-con01-inner img{height: 6.5rem;}
	.tech-support-con01-inner h5{margin-top: 3.5rem; font-size: 2.4rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
	.tech-support-con01-inner p{margin-top: 3rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}
	.tech-support-con01-inner:after{display: none;}
	
	.tech-support-con02{padding-top: 8rem; position: static; width: 100%; height: auto; overflow: visible;}
	.tech-support-con02-container{margin-top: 5rem; position: relative; width: 100%; height: auto; overflow: hidden;}
	.tech-support-con02 .cm-page-tit{position: static; top:8rem; width:100%;}

	.tech-support-con02-list-con{display:block; width:100%; height:auto;}
	.tech-support-con02-item{display:block; position:relative; width:100%; height:auto;}
	.tech-support-con02-item + .tech-support-con02-item{border-top: 1px solid rgba(255,255,255,0.1); border-left: 0;}
	.tech-support-con02-item + .tech-support-con02-item:after{bottom: auto; top: -2.1rem; left: 50%; margin-left: -2.1rem; width: 4.2rem; height: 4.2rem; font-size: 2rem; transform: rotate(90deg);}
	.tech-support-con02-inner{padding: 5rem var(--area-padding);}
	.tech-support-con02-inner .m-br{display: none;}
	.tech-support-con02-inner .step{width: 12rem; height: 4.2rem; font-size: 1.6rem; border-radius: 4.2rem;}
	.tech-support-con02-inner .tit{margin-top: 3rem; font-size:3rem; line-height: 1.4;}
	.tech-support-con02-inner .txt{margin-top: 2rem; font-size: 1.8rem; line-height: 1.6;}

	.tech-support-con03{padding: 8rem 0 10rem;}
	.tech-support-con03-list{margin-top: 5rem;}
	.tech-support-con03-item + .tech-support-con03-item{margin-top: 2rem;}
	.tech-support-con03-inner{width: 100%; padding: 3rem; border-radius: 2rem;}
	.tech-support-con03-icon{width: 14rem;}
	.tech-support-con03-txt{padding: 3rem 0 0; width: 100%;}
	.tech-support-con03-txt h5{font-size: 3rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000;}
	.tech-support-con03-txt p{margin-top: 1.5rem; font-size: 1.8rem; line-height: 1.6; letter-spacing: -0.02em; font-weight: 500; color: #666;}
	.tech-support-con03-num{top: 3rem; right: 3rem; font-size: 10rem; line-height: 1.4; transform: translateY(0);}

	.tech-support-con04{padding: 8rem 0; background-color: #F5F5F5;}
	.tech-support-con04-wrapper{margin-top: 5rem;}
	.tech-support-con04-list{margin: -0.3rem;}
	.tech-support-con04-item{margin: 0.3rem; width: calc(20% - 0.6rem);}
}


/* ****************** 04 서비스 :: 02 서비스 플랜 ********************** */
.service-plan-page{padding-bottom: 18rem;}
.service-plan-page .m-br{display: none;}
.service-plan-con01{margin-top: 8rem;}
.service-plan-tbl-con{}
.service-plan-tbl-con + .service-plan-tbl-con{margin-top: 5rem;}
.service-plan-tbl-wrapper{border: 1px solid rgba(0,0,0,0.1); border-radius: 2rem; box-sizing: border-box; overflow: hidden;}
.service-plan-tbl{width: 100%; table-layout: fixed;}
.service-plan-tbl th{padding: 2rem 2.5rem; font-size: 2rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #000; text-align: center; background-color: #F5F5F5;}
.service-plan-tbl .small-th{font-size: 2rem; letter-spacing: -0.02em; text-align: center; }
.service-plan-tbl td{padding: 2rem 2rem; font-size: 1.6rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 500; color: #666; text-align: center; background-color: #fff;}
.service-plan-tbl td i{font-weight: 400;}
.service-plan-tbl thead .custom-th{padding-top: 3.5rem; padding-bottom: 3.5rem; color: #fff;}
.service-plan-tbl thead .custom-th span{margin: 0 auto 1rem; width: 5.7rem; line-height: 2.2rem; font-size: 1.4rem; letter-spacing: -0.02em; font-weight: 700; color: #fff; text-align: center; background-color: rgba(255,255,255,0.1); border-radius: 2.2rem; display: block;}
.service-plan-tbl thead .custom-th01{background-color: #94A3B8;}
.service-plan-tbl thead .custom-th02{background-color: var(--main-color2);}
.service-plan-tbl thead .custom-th03{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0f172a+0,1d3255+34,2b4c7e+50,20375c+66,0f172a+100 */
background: linear-gradient(135deg,  rgba(15,23,42,1) 0%,rgba(29,50,85,1) 34%,rgba(43,76,126,1) 50%,rgba(32,55,92,1) 66%,rgba(15,23,42,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.service-plan-tbl thead + tbody tr{border-top: 1px solid rgba(0,0,0,0.1);}
.service-plan-tbl tbody th{text-align: left; border-right: 1px solid rgba(0,0,0,0.1); }
.service-plan-tbl tbody td{border-right: 1px solid rgba(0,0,0,0.1);}
.service-plan-tbl tbody tr th:last-child, .service-plan-tbl tbody tr td:last-child{border-right: 0;}

.service-target-box{width: 100%;}
.service-target-box ul{margin: -0.5rem; display: flex; flex-wrap:wrap;}
.service-target-box ul li{margin: 0.5rem; padding: 2rem; width: calc(25% - 1rem); min-height: 8rem; display: flex; align-items: center; border: 1px solid #EEE; border-radius: 1rem; box-sizing: border-box;}
.service-target-box ul li p{position: relative; padding-left: 3rem; font-size: 1.8rem; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: #222; text-align: left;}
.service-target-box ul li p i{position: absolute; top: 0.4rem; left: 0; font-weight: 400;}

@media all and (max-width:800px){
	.service-plan-page .m-br{display: block;}
	.service-plan-con01{margin-top: 8rem;}
	.service-plan-tbl-con + .service-plan-tbl-con{margin-top: 5rem;}
	.service-plan-tbl-wrapper{border-radius: 2rem;}
	.service-plan-tbl{width: 100%;}
	.service-plan-tbl th{padding: 1rem 1.5rem; font-size: 1.6rem; line-height: 1.4; word-break: keep-all;}
	.service-plan-tbl .small-th{font-size: 1.5rem;}
	.service-plan-tbl td{padding: 1rem 1rem; font-size: 1.5rem; line-height: 1.4; word-break: keep-all;}
	.service-plan-tbl thead .custom-th{padding-top: 3.5rem; padding-bottom: 3.5rem;}
	.service-plan-tbl thead .custom-th span{margin: 0 auto 1rem; width: 5.7rem; line-height: 2.2rem; font-size: 1.4rem; border-radius: 2.2rem;}
	.service-target-box ul{margin: -0.25rem;}
	.service-target-box ul li{margin: 0.25rem; padding: 1.5rem; width: calc(50% - 0.5rem); min-height: 6rem; border-radius: 1rem;}
	.service-target-box ul li p{padding-left: 2.4rem; font-size: 1.6rem; line-height: 1.4; word-break: break-word;}
	.service-target-box ul li p i{top: 0.4rem;}
}


/* ****************** 05 리소스 :: 공통 ********************** */
.resource-page{padding-bottom: 14rem;}
.resource-page .cm-page-tit{margin-bottom: 8rem;}


/* ****************** 06 고객문의 :: 01 온라인문의 ********************** */
.online-page{padding-bottom: 18rem;}
.online-page .cm-page-tit{margin-bottom: 6rem;}
.online-page .cm-page-tit .cm-sub-tit .pc-br{display: block;}
.online-page .cm-page-tit .inquiry-essential-txt{position: relative; margin-top: -2rem; padding-bottom: 0;}
.inquiry-con {display:flex; padding: 6rem 0; border-top: 1px solid #eee; border-bottom:1px solid #eee;}
.inquiry-con + .inquiry-con{border-top: 0;}
.inquiry-con .tit-box {width: 23.5rem; padding-right: 2rem; box-sizing: border-box;}
.inquiry-con .tit-box p {font-size:3rem; line-height: 1.4; letter-spacing:-0.02em; font-weight: 700; color: #222;}
.inquiry-box {width: calc(100% - 23.5rem);}

:root{
	--form-tit-wd: 13.8rem;
	--form-pd: 1rem;
	--form-left-pd: 14.5rem;
	--form-tit-left: 3rem;
	--form-inner-pd: 2rem;
	--form-height: 4.5rem;
	--form-font-size: 1.6rem;
	--form-font-color: #000;
	--form-font-color-hv: rgba(34,34,34,0.5);
	--form-border-color: #DDD;
	--form-border-color-hv: var(--main-color2);
	--form-box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
}
.online-list{margin: -0.5rem; display: flex; flex-wrap:wrap;}
.online-item{margin: 0.5rem; padding: var(--form-pd); padding-left: var(--form-left-pd); width: calc(50% - 1rem); display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box; position: relative; background: #fff; border: 1px solid var(--form-border-color); border-radius: 1rem; transition:var(--transition-custom); transition-property: border-color, box-shadow;}
.online-item.full{width: calc(100% - 1rem);}
.online-item.agree-full{padding: calc(var(--form-pd) + 0.7rem) var(--form-tit-left); width: calc(100% - 1rem);}
.online-item .form-label{position: absolute; top: 2.3rem; left: var(--form-tit-left); font-size: 1.8rem; line-height: 2rem; letter-spacing: -0.05em; color: #000; font-weight:600; pointer-events: none; width: var(--form-tit-wd); box-sizing:border-box;}
.online-item .form-label span{margin-left: 0.5rem; color: var(--main-color);}
.online-item textarea + label {top:50% !important; transform:translateY(-50%);}
/* form */
.online-item input,
.online-item textarea{padding: 0 var(--form-inner-pd); width: 100%; font-size: var(--form-font-size); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; color: #222; border: 0; background-color: #fff; box-sizing: border-box; outline: none;}
.online-item .fakeform-selectbox,
.online-item input, .online-item select {height: var(--form-height);}
.online-item select {width: 100%; border: 0;}
.online-item textarea{padding: var(--form-inner-pd); height: 22.7rem; resize: none;}
.online-item input::placeholder,
.online-item textarea::placeholder{color: rgba(34,34,34,0.5);}
.online-item .fakeform-selectbox{width: 100%;}
.online-item .fakeform-selectbox .select-title {text-indent: var(--form-inner-pd); line-height: var(--form-height); font-size: var(--form-font-size); font-weight: 500; letter-spacing: -0.02em; color: #222; background-color: #fff; border-radius: 0;}
.online-item .fakeform-selectbox .select-title:after {right: 0.6rem; font-size: 2rem; font-weight: 400; color: #000;}
/* 옵션창 */
.inquiry-css.select-option {background: #fff; border-radius: 1rem; border: 1px solid var(--form-border-color-hv);}
.inquiry-css.select-option span, .inquiry-css.select-option strong{font-weight: 500; color: rgba(34,34,34,0.5);}
.inquiry-css.select-option span.selected {color: #222; font-weight: 500;}
/* 라디오버튼 */
.inquiry-radio-box{width: 100%;}
.inquiry-radio-list{margin: -0.5rem; display:flex; flex-wrap:wrap;}
.inquiry-radio-box .radio-item{margin: 0.5rem; width: calc(16.66% - 1rem);}
.inquiry-radio-box .radio-item input[type="radio"]{display:none;}
.inquiry-radio-box .radio-item label{padding: 0 3rem 0 1.5rem; width:100%; height:4.5rem; border-radius: 0.5rem; background-color: #F5F5F5; transition: background-color 0.3s; position: relative; display:flex; align-items: center; box-sizing: border-box;}
.inquiry-radio-box .radio-item label:after{position: absolute; top: 50%; margin-top: -1rem; right: 1.5rem; font-size: 2rem; font-weight: 400; color: #222; opacity: 0.2; content: "\e92c"; font-family: xeicon; transition: color 0.3s, opacity 0.3s}
.inquiry-radio-box .radio-item label em{font-size:1.6rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; color: #000; text-align:left; transition: color 0.3s;}
.inquiry-radio-box .radio-item input[type="radio"]:checked + label{background-color: var(--main-color2);}
.inquiry-radio-box .radio-item input[type="radio"]:checked + label em{color: #fff;}
.inquiry-radio-box .radio-item input[type="radio"]:checked + label:after{color: #fff; opacity: 1; content: "\e92b";}
/* 첨부파일 */
.inquiry-fileUpload-box{position: relative; width:100%; padding-right: 0;}
.inquiry-fileUpload-box input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.inquiry-fileUpload-box label {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width:7.5rem; height:3rem; line-height:3rem; border-radius:3rem; background:#F5F5F5; border:0; box-sizing:border-box; text-align:center; font-size:1.4rem; color:#000; font-weight:500; letter-spacing: -0.045em;}
.inquiry-fileUpload-box .upload-name {padding-left: 9rem; width: 100%; background:transparent;}
/* 보안코드 */
.security-code-box{position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%;}
.security-code-box .security-code {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7.5rem; height:3rem; line-height:3rem; border-radius:3rem; background: rgba(0,67,138,0.1); border:0; box-sizing:border-box; text-align:center; font-size:1.4rem; color:var(--main-color2); font-weight:700; letter-spacing: -0.045em;}
.security-code-box .security-input{padding-left: 9rem; width: 100%; background:transparent;}
/* 동의폼 */
.inquiry-agree-box{width: 100%; display: flex; align-items: center; justify-content: space-between;}
.inquiry-agree-box .agree-txt{font-size:1.8rem; line-height: 1.6; letter-spacing:-0.02em; font-weight: 600; color:#000;}
.inquiry-agree-box .agree-txt input{display:none;}
.inquiry-agree-box .agree-txt label{position:relative; padding-left:3.5rem; display: block; box-sizing: border-box;}
.inquiry-agree-box .agree-txt label i{position:absolute; top: 0.2rem; left:0; font-size:2rem; color:#222; opacity: 0.2;}
.inquiry-agree-box .agree-txt input:checked + label i{opacity: 1;}
.inquiry-agree-box .pop-btn{padding: 0 1.2rem; width: 10.4rem; height: 3rem; font-size: 1.4rem; letter-spacing: -0.045em; font-weight: 500; color: #000; background-color: #F5F5F5; box-sizing: border-box; border-radius: 3rem; display: flex; align-items: center; justify-content: space-between; transition:var(--transition-custom); transition-property: background-color, color;}
.inquiry-agree-box .pop-btn:hover{background-color: #000; color: #fff;}
/* focus */
.online-item.focus{border-color: var(--form-border-color-hv); box-shadow: var(--form-box-shadow);}
/* 제출하기 버튼 */
.inquiry-btn-con{margin-top:6rem; display: flex; justify-content: center;}

@media all and (max-width:1280px){
	.online-item.tbl-w-full{width: calc(100% - 1rem);}
	/* 라디오버튼 */
	.inquiry-radio-box .radio-item{width: calc(33.33% - 1rem);}
}
@media all and (max-width:800px){
	.online-page{padding-bottom: 18rem;}
	.online-page .cm-page-tit{margin-bottom: 0;}
	.online-page .cm-page-tit .cm-sub-tit .pc-br{display: none;}
	.online-page .cm-page-tit .inquiry-essential-txt{margin-top: 4rem; margin-bottom: 2rem;}
	.inquiry-con {flex-wrap:wrap; padding: 4rem 0;}
	.inquiry-con .tit-box {width: 100%; padding-right: 0;}
	.inquiry-con .tit-box p {font-size:3rem; line-height: 1.4;}
	.inquiry-con .tit-box p br{display: none;}
	.inquiry-box {margin-top: 2rem; width: 100%;}

	:root{
		--form-tit-wd: 13.8rem;
		--form-pd: 1rem;
		--form-left-pd: 11rem;
		--form-tit-left: 2rem;
		--form-inner-pd: 1rem;
		--form-height: 4.5rem;
		--form-font-size: 1.6rem;
	}
	.online-list{margin: -0.5rem;}
	.online-item{margin: 0.5rem; padding: var(--form-pd); padding-left: var(--form-left-pd); width: calc(100% - 1rem); border-radius: 1rem;}
	.online-item.full{width: calc(100% - 1rem);}
	.online-item.tbl-w-full{width: calc(100% - 1rem);}
	.online-item.agree-full{padding: calc(var(--form-pd) + 0.7rem) var(--form-tit-left); width: calc(100% - 1rem);}
	.online-item .form-label{top: 2.2rem; left: var(--form-tit-left); font-size: 1.8rem; line-height: 2rem;}
	.online-item .form-label span{margin-left: 0.5rem; color: var(--main-color);}
	/* form */
	.online-item input,
	.online-item textarea{padding: 0 var(--form-inner-pd); width: 100%; font-size: var(--form-font-size); line-height: 1.3;}
	.online-item .fakeform-selectbox,
	.online-item input, .online-item select {height: var(--form-height);}
	.online-item textarea{padding: var(--form-inner-pd); height: 22.7rem;}
	.online-item .fakeform-selectbox .select-title {text-indent: var(--form-inner-pd); line-height: var(--form-height); font-size: var(--form-font-size);}
	.online-item .fakeform-selectbox .select-title:after {right: 0; font-size: 2rem;}
	/* 라디오버튼 */
	.inquiry-radio-list{margin: -0.5rem;}
	.inquiry-radio-box .radio-item{margin: 0.5rem; width: calc(50% - 1rem);}
	.inquiry-radio-box .radio-item label{padding: 0 3rem 0 1.5rem; width:100%; height:4.5rem; border-radius: 0.5rem;}
	.inquiry-radio-box .radio-item label:after{margin-top: -1rem; right: 1.5rem; font-size: 2rem;}
	.inquiry-radio-box .radio-item label em{font-size:1.6rem; line-height: 1.3;}
	/* 첨부파일 */
	.inquiry-fileUpload-box label {width:7.5rem; height:3rem; line-height:3rem; border-radius:3rem; font-size:1.4rem;}
	.inquiry-fileUpload-box .upload-name {padding-left: 9rem;}
	/* 보안코드 */
	.security-code-box .security-code {width: 7.5rem; height:3rem; line-height:3rem; border-radius:3rem; font-size:1.4rem;}
	.security-code-box .security-input{padding-left: 9rem;}
	/* 동의폼 */
	.inquiry-agree-box{width: 100%; flex-wrap:wrap; justify-content: flex-end;}
	.inquiry-agree-box .agree-txt{width: 100%; font-size:1.8rem; line-height: 1.6;}
	.inquiry-agree-box .agree-txt label{padding-left:3rem; width: 100%;}
	.inquiry-agree-box .agree-txt label i{top: 0.2rem; font-size:2rem;}
	.inquiry-agree-box .pop-btn{padding: 0 1.2rem; width: 10.4rem; height: 3rem; font-size: 1.4rem; border-radius: 3rem;}
	/* 제출하기 버튼 */
	.inquiry-btn-con{margin-top: 4rem;}
}


/* ****************** 06 고객문의 :: 02 오시는 길 ********************** */
.location-con01{padding: 8rem 0 14rem; max-width: 1580px; margin: 0 auto;}
.location-content {position: relative;}
.map-script-wrapper{position:relative; overflow:hidden; height:80rem; border:1px solid #ddd; border: 0; border-radius: 6rem;}
.map-script-wrapper .map-script-con{position:absolute; top:50%; left:50%; width:1580px; height:80rem; margin:-40rem 0 0 -790px;}
.map-script-wrapper .map-script-con .root_daum_roughmap,
.map-script-wrapper .map-script-con .wrap_map{height:100% !important;}

.location-info-con {position: absolute; top: 50%; right: 5rem; width: 46rem; height: calc(100% - 10rem); padding:8rem 5rem 5rem 5rem; background: rgba(255, 255, 255, 0.6); box-shadow: 0rem 0.4rem 2rem rgba(0, 0, 0, 0.1); backdrop-filter: blur(5rem); border-radius: 6rem; box-sizing: border-box; transform: translateY(-50%); display: flex; flex-direction:column; justify-content: space-between; z-index: 1;}
.location-info-box .top-tit {padding-bottom: 3rem; position: relative; border-bottom: 1px solid rgba(0,0,0,0.1);}
.location-info-box .top-tit strong {display: block; font-size: 5rem; font-weight: 700; letter-spacing: -0.04em; color: #222; line-height: 1;}
.location-info-box .top-tit p {margin-top: 3rem; font-size: 1.7rem; line-height: 1.76; letter-spacing: -0.025em; font-weight: 500; color: #6B6B6B;}
.location-info-box .info-list {padding-top: 3rem;}
.location-info-box .info-list dl {display: flex; font-size: 1.7rem; letter-spacing: -0.0425em; color: #6B6B6B; line-height: 1.8; font-weight: 500; margin-bottom: 1rem;} 
.location-info-box .info-list dl dt {width: 6.1rem; padding-right: 0.5rem; box-sizing: border-box; letter-spacing: -0.04em; font-weight: 700; color: #000;}
.location-info-box .info-list dl dd {width: calc(100% - 6.1rem); font-weight: 500;}

.location-link-btn {position: relative; width: 100%; height: 6rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--main-color2); color: #fff; padding: 0 3rem;  border-radius: 6rem; box-sizing: border-box; transition: all 0.4s;}
.location-link-btn em {position: relative; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; z-index: 1;}
.location-link-btn i {position: relative; font-size: 1.8rem; z-index: 1;}

@media all and (max-width: 1640px) {
	.location-con01{padding: 8rem var(--area-padding) 14rem; max-width: none;}
}
@media all and (max-width: 1280px) {
	.location-info-con {width: 37rem; padding: 8rem 4rem 5rem;}
	.location-info-box .top-tit strong {font-size: 4.2rem;}
}
@media all and (max-width:800px){
	.map-script-wrapper{height:40rem; border-radius: 3rem;}
	.map-script-wrapper .map-script-con{width:1580px; height:40rem; margin:-20rem 0 0 -790px;}
	
	.location-info-con {position: static; width: 100%; margin: 2rem auto 0; transform: translateY(0); height: auto; padding:6rem 4rem 4rem 4rem; background: rgba(0, 0, 0, 0.05); box-shadow: 0rem 0.4rem 1.2rem rgba(0, 0, 0, 0.02); backdrop-filter: blur(5rem); border-radius: 3rem;}
	.location-info-box .top-tit {padding-bottom: 3rem;}
	.location-info-box .top-tit strong {font-size: 4rem;}
	.location-info-box .top-tit p {margin-top: 3rem; font-size: 1.7rem; line-height: 1.76;}
	.location-info-box .info-list {padding-top: 3rem;}
	.location-info-box .info-list dl {font-size: 1.7rem; line-height: 1.8; margin-bottom: 1rem;} 
	.location-info-box .info-list dl dt {width: 6.1rem; padding-right: 0.5rem;}
	.location-info-box .info-list dl dd {width: calc(100% - 6.1rem);}

	.location-link-btn {margin-top: 3rem; height: 6rem; padding: 0 3rem; border-radius: 6rem;}
	.location-link-btn em {font-size: 1.6rem; line-height: 1.3;}
	.location-link-btn i {font-size: 1.8rem;}
}