@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */
:root{
	--color-light: #fff;
	--color-dark: #000;
	--color-gray-100: #ddd;
	--color-gray-200: #f3f3f3;
	--color-gray-300: #f5f5f5;
	--color-gray-400: #e8ecef;
}

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: var(--color-dark); position: fixed; z-index: 9999999;}

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


/* ****************** 01 Products :: 01 Overview 공통 ********************** */
/* 상단 레이아웃 공통 */
.cm-overview-top{}
.cm-overview-title{}
.cm-overview-title #contentInfoCon{margin-bottom: 5.5rem;}
.cm-overview-bnr {position: relative; overflow: hidden;}
.cm-overview-bnr .bnr-bg{position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.3); transition: transform 7s; z-index: -1;}
.cm-overview-bnr.animated .bnr-bg{transform: scale(1);}
.cm-overview-bnr .area{width: 100%; height: 75rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; will-change: initial !important;}
.cm-overview-bnr .area .inner {padding-top: 5rem;}
.cm-overview-bnr .txt01{font-size: 1.8rem; font-weight: 500; line-height: 1.3; color: #fff;}
.cm-overview-bnr .txt02{margin-top: 2.5rem; font-size: 8rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: #fff; padding-right: 24rem;}
.cm-overview-bnr .txt03{font-size: 8rem; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; color: #fff; padding-left: 17rem;}
.cm-overview-bnr .point{display: inline-block; margin-top: 6rem; padding: 0.8rem 4.2rem; font-size: 1.5rem; line-height: 1.5; letter-spacing: -0.01em; color: #fff; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(1rem); border-radius: 0.5rem;}

/* 하단 레이아웃 공통 */
.cm-overview-bottom{padding-bottom: 8rem;}
.cm-overview-bottom-con + .cm-overview-bottom-con{border-top: 1px solid #dedede;}
.cm-overview-bottom-con .area{padding-top: 10.5rem !important; padding-bottom: 8rem !important; display: flex; flex-wrap:wrap;}
.cm-overview-bottom-con:last-child .area{padding-bottom: 0 !important;}

.cm-overview-bottom-tit{padding-bottom: 4rem; padding-right: 2rem; width: 38rem; box-sizing: border-box;}
.cm-overview-bottom-tit .tit{font-size: 5.2rem; line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; color: var(--color-dark);}
.cm-overview-bottom-tit .tit span{font-size: 3rem; line-height: 1.3; letter-spacing: -0.02em; display: block;}
.cm-overview-bottom-btn-group{margin-top: 2rem; display: flex; align-items: center;}
.cm-overview-bottom-btn-group button{margin-right: 0.5rem; margin-top: 0 !important;}
.cm-overview-bottom-btn-group a{width: 5.2rem; height: 5.2rem; font-size: 1.8rem; color: var(--color-dark); background-color: var(--color-light); border: 2px solid var(--color-dark); border-radius: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, color 0.3s, border-color 0.3s;}
.cm-overview-bottom-btn-group a:hover{background-color: var(--color-dark); color: var(--color-light);}
.cm-overview-bottom-tit button{margin-top: 2rem; padding: 0 2.5rem 0 3rem; width: 21rem; height: 5.2rem; background-color: var(--color-gray-200); border-radius: 5.2rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; /* box-shadow: 0 1.2rem 3.2rem -1.2rem rgba(0,0,0,0.15); */ transition: border-color 0.3s, background-color 0.3s;}
.cm-overview-bottom-tit button span{font-size: 1.5rem; letter-spacing: -0.025em; color: var(--color-dark); transition:color 0.3s;}
.cm-overview-bottom-tit button i{font-size: 1.5rem; color: var(--color-dark); transition:color 0.3s;}
.cm-overview-bottom-tit button:hover{background-color: var(--color-dark);}
.cm-overview-bottom-tit button:hover span,
.cm-overview-bottom-tit button:hover i{color: var(--color-light);}
.cm-overview-bottom-con.open .cm-overview-bottom-tit button{background-color: var(--color-dark);}
.cm-overview-bottom-con.open .cm-overview-bottom-tit button span,
.cm-overview-bottom-con.open .cm-overview-bottom-tit button i{color: var(--color-light);}
.cm-overview-bottom-con.open .cm-overview-bottom-tit button i{transform: rotate(180deg);}

.cm-overview-bottom-txt{padding: 1rem 0 4rem; width: calc(100% - 38rem);}
.cm-overview-bottom-txt .tit{font-size: 2rem; line-height: 1.4; letter-spacing: -0.025em; font-weight: 600; color: var(--color-dark);}
.cm-overview-bottom-txt .tit .point{margin-right: 1rem; padding: 0.5rem 2rem 0.5rem 1.5rem; font-size: 1.8rem; font-weight: 400; color: #fff; background-color: var(--main-color); border-radius: 0.5rem; display: inline-flex; align-items: center;}
.cm-overview-bottom-txt .tit .point i{margin-right: 0.7rem; font-size: 2rem;}
.cm-overview-bottom-txt .txt{margin-top: 1rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.025em; color: rgba(0,0,0,0.6);}

.cm-overview-bottom-hidden{width: 100%;}
.options-chart-box{width: 100%; padding: 3.5rem 4rem; background-color: var(--color-light); border-radius: 1rem; box-shadow: 0 1.4rem 3.2rem 0rem rgba(0,0,0,0.16); box-sizing: border-box; display: none;}
.options-chart-box ul{margin: -1rem -1.3rem; display: flex; flex-wrap:wrap;}
.options-chart-box ul li{margin: 1rem 1.3rem; width: calc(16.66% - 2.6rem);}
.options-chart-box ul li .color{width: 100%; height: 3.8rem; border-radius: 0.5rem; display: block;}
.options-chart-box ul li .tit{margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark);}

.cm-overview-bottom-con.open .cm-overview-bottom-hidden {margin-bottom: 4rem;}

/* 하단 faq 레이아웃 공통 */
.cm-overview-faq{padding: 12rem 0 15rem; background-color: var(--color-gray-200);}
.cm-overview-faq #contentInfoCon{margin-left: 0;}
.cm-overview-faq #contentInfoCon .content-tit span{margin-left: 2rem; font-size: 2.8rem; letter-spacing: -0.015em; font-weight: 600;}
.cm-overview-faq #contentInfoCon .content-tit span em{margin-right: 1.5rem; font-size:inherit; font-weight: inherit;}
.cm-overview-faq .faq-list-con2 .faq-item{border:2px solid var(--color-light); background-color:var(--color-light);}
/* Open */
.cm-overview-faq .faq-list-con2 .faq-item.open{border-color: var(--main-color);}

@media all and ( max-width: 1280px ){
	.cm-overview-bnr .txt02{font-size: 6rem !important;}
	.cm-overview-bnr .txt03{font-size: 6rem !important;}
	.cm-overview-bottom-txt .tit .m-br{display: none;}
}

/* @media all and ( max-width: 800px ){
	상단 레이아웃 공통
	.cm-overview-bnr .txt02{font-size: 6rem; padding-right: 20rem;}
	.cm-overview-bnr .txt03{font-size: 6rem; padding-left: 20rem;}
} */
@media all and ( max-width: 800px ){
	/* 상단 레이아웃 공통 */
	.cm-overview-title #contentInfoCon{margin-bottom: 5.5rem;}
	.cm-overview-bnr .area{/* height: 75rem; */ height: 50rem;}
	.cm-overview-bnr .txt01{font-size: 1.8rem; line-height: 1.3; color: #fff;}
	.cm-overview-bnr .txt02{margin-top: 2.5rem; font-size: 4.2rem !important; line-height: 1.1; padding-right: 0 !important;}
	.cm-overview-bnr .txt03{font-size: 4.2rem !important; line-height: 1.1; padding-left: 0 !important;}
	.cm-overview-bnr .point{margin-top: 6rem; padding: 1rem 3.5rem; font-size: 1.5rem; line-height: 1.5;}

	/* 하단 레이아웃 공통 */
	.cm-overview-bottom{padding-bottom: var(--sub-layout-padding);}
	.cm-overview-bottom-con .area{padding-top: 5rem !important; padding-bottom: 2rem !important;}
	.cm-overview-bottom-con:last-child .area{padding-bottom: 0 !important;}

	.cm-overview-bottom-tit{padding-bottom: 3rem; padding-right: 0; width: 100%;}
	.cm-overview-bottom-tit .tit{font-size: 3.6rem; line-height: 1.08;}
	.cm-overview-bottom-tit .tit br{display: none;}
	.cm-overview-bottom-tit .tit span{font-size: 2.4rem; line-height: 1.3;}
	.cm-overview-bottom-btn-group{margin-top: 2rem;}
	.cm-overview-bottom-btn-group button{margin-right: 0.5rem; margin-top: 0 !important;}
	.cm-overview-bottom-btn-group a{width: 4.5rem; height: 4.5rem; font-size: 1.5rem;}
	.cm-overview-bottom-tit button{margin-top: 2rem; padding: 0 2.5rem 0 3rem; width: 18rem; height: 4.5rem;}
	.cm-overview-bottom-tit button span{font-size: 1.5rem;}
	.cm-overview-bottom-tit button i{font-size: 1.5rem;}

	.cm-overview-bottom-txt{padding: 1rem 0 3rem; width: 100%;}
	.cm-overview-bottom-txt .tit{font-size: 2rem; line-height: 1.4;}
	.cm-overview-bottom-txt .tit .m-br{display: block;}
	.cm-overview-bottom-txt .tit .point{margin-right: 0; margin-bottom: 0.7rem; padding: 0.5rem 2rem 0.5rem 1.5rem; font-size: 1.8rem;}
	.cm-overview-bottom-txt .tit .point i{margin-right: 0.7rem; font-size: 2rem;}
	.cm-overview-bottom-txt .txt{margin-top: 1rem; font-size: 1.6rem; line-height: 1.62;}

	.cm-overview-bottom-hidden{width: 100%;}
	.options-chart-box{width: 100%; padding: 3rem 3rem;}
	.options-chart-box ul{margin: -1rem;}
	.options-chart-box ul li{margin: 1rem; width: calc(50% - 2rem);}
	.options-chart-box ul li .color{width: 100%; height: 3.8rem;}
	.options-chart-box ul li .tit{margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.3;}

	/* 하단 faq 레이아웃 공통 */
	.cm-overview-faq{padding: 8rem 0 var(--sub-layout-padding);}
	.cm-overview-faq #contentInfoCon .content-tit span{display: block; margin-top: 1rem; margin-left: 0; font-size: 2.2rem;}
	.cm-overview-faq #contentInfoCon .content-tit span em{margin-right: 1rem;}
}


/* ****************** 01 Paint Protection Film :: 01 PPF Overview ********************** */
.ppf-overview-page{}

.ppf-overview-con01{padding: 12rem 0 20rem; background-color: var(--color-gray-200);}
.ppf-overview-con01-tit{font-size: 2.8rem; line-height: 1.42; letter-spacing: -0.025em; font-weight: 600; color: var(--color-dark);}
.ppf-overview-con01-tit b{font-weight: 600; color: var(--main-color);}
.ppf-overview-con01-sub-tit{margin-top: 2rem; font-size: 1.6rem; line-height: 1.68; letter-spacing: -0.02em; color: rgba(0,0,0,0.7);}
.ppf-overview-con01-point-tit{margin-top: 5.5rem; width: 100%; height: 11rem; font-size: 2.2rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: var(--main-color); text-align: center; display: flex; align-items: center; justify-content: center; background: linear-gradient(var(--color-light), var(--color-light)) padding-box, linear-gradient(to right, var(--main-color), #62a1e0, #85b2de, #c3d0dc, #c9d3dc, #d1d6db, #c9d3dc, #c3d0dc, #85b2de, #62a1e0, var(--main-color)) border-box; border: 3px solid transparent; border-radius: 5.5rem; box-sizing: border-box;}

.ppf-overview-con01-box{margin-top: 4rem; position: relative; }
.ppf-overview-con01-box-inner{position: relative; width: 100%; height: 68rem; text-align: center; background-color: var(--color-light); border-radius: 2rem; box-sizing: border-box; overflow: hidden;}
.ppf-overview-con01-box .center-img{width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
.ppf-overview-con01-box .dark-ver-img {position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden;}
.ppf-overview-con01-list{}
.ppf-overview-con01-item{position: absolute; width: 25rem; z-index: 1;}
.ppf-overview-con01-item:nth-child(1){top: 7rem; left: 5.68%;}
.ppf-overview-con01-item:nth-child(3){top: 26.3rem; left: 5.68%;}
.ppf-overview-con01-item:nth-child(5){top: 45.6rem; left: 5.68%;}
.ppf-overview-con01-item:nth-child(2){top: 7rem; right: 5.68%;}
.ppf-overview-con01-item:nth-child(4){top: 26.3rem; right: 5.68%;}
.ppf-overview-con01-item:nth-child(6){top: 45.6rem; right: 5.68%;}
.ppf-overview-con01-inner{width: 100%; height: 18rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(1.53rem); box-shadow: 1.5rem 1.5rem 4.6rem -0.75rem rgba(0,0,0,0.1); transition: var(--transition-custom); transition-property: background-color;}
.ppf-overview-con01-icon{width: 7.9rem; height: 7.3rem; margin: 0 auto; display: block; transition: var(--transition-custom); transition-property: background;}
.ppf-overview-con01-icon01{background: url("../images/content/ppf_overview01_icon01.png") center/cover no-repeat;}
.ppf-overview-con01-icon02{background: url("../images/content/ppf_overview01_icon02.png") center/cover no-repeat;}
.ppf-overview-con01-icon03{background: url("../images/content/ppf_overview01_icon03.png") center/cover no-repeat;}
.ppf-overview-con01-icon04{background: url("../images/content/ppf_overview01_icon04.png") center/cover no-repeat;}
.ppf-overview-con01-icon05{background: url("../images/content/ppf_overview01_icon05.png") center/cover no-repeat;}
.ppf-overview-con01-icon06{background: url("../images/content/ppf_overview01_icon06.png") center/cover no-repeat;}
.ppf-overview-con01-txt{margin-top: 1rem; font-size: 1.8rem; line-height: 1.33; letter-spacing: -0.025em; color: var(--color-dark); text-align: center; transition: var(--transition-custom); transition-property: color;}

.ppf-overview-con01-item.active .ppf-overview-con01-inner{background-color: var(--main-color);}
.ppf-overview-con01-item.active .ppf-overview-con01-icon01{background: url("../images/content/ppf_overview01_icon01_on.png") center/cover no-repeat;}
.ppf-overview-con01-item.active .ppf-overview-con01-icon02{background: url("../images/content/ppf_overview01_icon02_on.png") center/cover no-repeat;}
.ppf-overview-con01-item.active .ppf-overview-con01-icon03{background: url("../images/content/ppf_overview01_icon03_on.png") center/cover no-repeat;}
.ppf-overview-con01-item.active .ppf-overview-con01-icon04{background: url("../images/content/ppf_overview01_icon04_on.png") center/cover no-repeat;}
.ppf-overview-con01-item.active .ppf-overview-con01-icon05{background: url("../images/content/ppf_overview01_icon05_on.png") center/cover no-repeat;}
.ppf-overview-con01-item.active .ppf-overview-con01-icon06{background: url("../images/content/ppf_overview01_icon06_on.png") center/cover no-repeat;}
.ppf-overview-con01-item.active .ppf-overview-con01-txt{color: #fff;}

@media all and ( max-width: 800px ){
	.ppf-overview-con01{padding: 8rem 0 10rem;}
	.ppf-overview-con01-tit{font-size: 2.6rem; line-height: 1.42;}
	.ppf-overview-con01-sub-tit{margin-top: 2rem; font-size: 1.6rem; line-height: 1.68;}
	.ppf-overview-con01-point-tit{margin-top: 5.5rem; width: 100%; height: 11rem; font-size: 2rem; line-height: 1.3; padding: 0 2rem; box-sizing: border-box;}

	.ppf-overview-con01-box{margin-top: 4rem; position: relative; }
	.ppf-overview-con01-box-inner{width: 100%; height: auto; border-radius: 2rem;}
	.ppf-overview-con01-box .center-img{width: 100%; height: auto;}
	.ppf-overview-con01-list{margin: 0.5rem -0.5rem 0; display: flex; flex-wrap:wrap;}
	.ppf-overview-con01-item{position: static; margin: 0.5rem; width: calc(50% - 1rem);}
	.ppf-overview-con01-inner{height: 18rem;}
	.ppf-overview-con01-icon{width: 7.9rem; height: 7.3rem;}
	.ppf-overview-con01-txt{margin-top: 1rem; font-size: 1.8rem; line-height: 1.33;}
}

/* ****************** 01 Paint Protection Film :: 02 WPF Products ********************** */
.ppf-prd-page{}



/* ****************** 02 Windshield Protection Film :: 01 WPF Overview ********************** */
.wpf-overview-page{}
.wpf-overview-page .cm-overview-bnr .point{background-color: rgba(255,255,255,0.1);}

.wpf-overview-page .cm-overview-bnr .txt03 {padding-left: 26rem; font-size: 7.8rem;}
.wpf-overview-page .cm-overview-bnr .txt02 {padding-right: 29rem; font-size: 7.8rem;}
.wpf-overview-page .cm-overview-bnr .area .inner {padding-top: 4rem;}

.wpf-overview-con01{padding: 12rem 0 10rem; background-color: var(--color-gray-200);}
.wpf-overview-con01-wrapper{margin-top: 5rem;}
.wpf-overview-con01-list{margin: 0 -0.8rem; display: flex; flex-wrap:wrap;}
.wpf-overview-con01-item{margin: 0 0.8rem; width: calc(16.66% - 1.6rem); height: 25rem; padding: 2rem 1rem 3rem; background-color: var(--color-light); border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; box-sizing: border-box;}
.wpf-overview-con01-icon{position: relative; width: 100%; height: 5.7rem; display: flex; align-items: center; justify-content: center;}
.wpf-overview-con01-icon img{max-height: 100%; transition: all 0.3s;}
.wpf-overview-con01-icon .dark-ver-img {position: absolute; opacity: 0; visibility: hidden;}
.wpf-overview-con01-txt{margin-top: 4rem; font-size: 1.6rem; line-height: 1.43; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark); text-align: center;}

.wpf-overview-con02{background-color: var(--color-gray-200);}
.wpf-overview-con02 .area{padding-top: 7rem !important; padding-bottom: 5rem !important; border-top: 1px solid #dadada;}
.wpf-overview-con02-top{margin-top: 6rem;}
.wpf-overview-con02-list{margin: 0 -1.2rem; display: flex; flex-wrap:wrap;}
.wpf-overview-con02-item{margin: 0 1.2rem; padding: 6rem 4.5rem; width: calc(33.33% - 2.4rem); background-color: var(--color-light); border-radius: 1rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition-custom); transition-property: background-color, box-shadow;}
.wpf-overview-con02-tit{}
.wpf-overview-con02-tit .tit01{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: var(--main-color); transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-tit .tit02{margin-top: 0.5rem; font-size: 3.8rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: var(--color-dark); transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-tit .tit03{margin-top: 1.5rem; position: relative; padding-left: 2rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark); transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-tit .tit03 i{position: absolute; top: 0.1rem; left: 0; font-weight: 400;}
.wpf-overview-con02-info{margin-top: 3rem;}
.wpf-overview-con02-info-list{display: flex; flex-wrap:wrap;}
.wpf-overview-con02-info-item{margin: 0.4rem; padding: 2rem; width: calc(50% - 0.8rem); height: 12rem; background-color: var(--color-gray-300); border-radius: 0.5rem; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; transition: var(--transition-custom); transition-property: background-color;}
.wpf-overview-con02-info-item .tit{font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: rgba(0,0,0,0.4); transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-info-item .result{font-size: 2rem; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark); text-align: right; transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-info-item .result b{margin-right: 0.5rem; font-size: 3.8rem; font-weight: 500; letter-spacing: -0.05em;}
.wpf-overview-con02-item.active{background-color: var(--main-color); box-shadow: 1.9rem 1.9rem 5.7rem -1rem rgba(39,124,209,0.22);}
.wpf-overview-con02-item.active .wpf-overview-con02-tit .tit01,
.wpf-overview-con02-item.active .wpf-overview-con02-tit .tit02,
.wpf-overview-con02-item.active .wpf-overview-con02-tit .tit03{color: #fff;}
.wpf-overview-con02-item.active .wpf-overview-con02-info-item{background-color: #1567b9;}
.wpf-overview-con02-item.active .wpf-overview-con02-info-item .tit{color: #7fb1e4;}
.wpf-overview-con02-item.active .wpf-overview-con02-info-item .result{color: #fff;}

.wpf-overview-con02-bottom{margin-top: 8rem; display: flex; flex-wrap:wrap; align-items: center;}
.wpf-overview-con02-bottom-left{padding-right: 2.5rem; width: 38rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.wpf-overview-con02-bottom-left .img-box {position: relative;}
.wpf-overview-con02-bottom-left img{height: 0.6rem; display: block; transition: all 0.3s;}
.wpf-overview-con02-bottom-left .dark-ver-img {position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden;}
.wpf-overview-con02-bottom-right{width: calc(100% - 38rem);}
.wpf-overview-con02-download{}
.wpf-overview-con02-download{margin: 0 -0.7rem; display: flex; flex-wrap:wrap;}
.wpf-overview-con02-download li{margin: 0 0.7rem; width: calc(50% - 1.4rem);}
.wpf-overview-con02-download li a{padding: 0 3rem 0 3.5rem; width: 100%; height: 6rem; border: 3px solid var(--color-dark); border-radius: 0.5rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; transition: var(--transition-custom); transition-property: border-color;}
.wpf-overview-con02-download li a span{font-size: 1.9rem; letter-spacing: -0.025em; font-weight: 600; color: var(--color-dark); transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-download li a i{font-size: 2.4rem; color: var(--color-dark); transition: var(--transition-custom); transition-property: color;}
.wpf-overview-con02-download li a:hover{border-color: var(--main-color);}
.wpf-overview-con02-download li a:hover span,
.wpf-overview-con02-download li a:hover i{color: var(--main-color);}

.wpf-overview-con03{padding: 5rem 0 19rem; background-color: var(--color-gray-200);}
.wpf-overview-con03-item{padding: 3.5rem 2rem 4.5rem; background-color: var(--color-light); border-radius: 1.5rem;}
.wpf-overview-con03-item + .wpf-overview-con03-item{margin-top: 5rem;}
.wpf-overview-con03-tit{padding-left: 4rem; font-size: 3.2rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 600; color: var(--color-dark); text-align: center; display: flex; align-items: center; justify-content: center;}
.wpf-overview-con03-tit span{margin: 0 2rem; font-size: 2.4rem; letter-spacing: -.025em; font-weight: 500;}
.wpf-overview-con03-tit b{font-weight: 600; color: var(--main-color);}
/* 전후 이미지 */
.product-before-after-box{margin: 3rem auto 0; max-width: 1220px; border-radius: 1rem; overflow: hidden;}

@media all and ( max-width: 1024px ){
	.wpf-overview-con01-list{margin: -0.8rem;}
	.wpf-overview-con01-item{margin: 0.8rem; width: calc(33.33% - 1.6rem);}
}
@media all and ( max-width: 800px ){
	.wpf-overview-con01{padding: 10rem 0 8rem;}
	.wpf-overview-con01-wrapper{margin-top: 5rem;}
	.wpf-overview-con01-list{margin: -0.8rem;}
	.wpf-overview-con01-item{margin: 0.8rem; width: calc(50% - 1.6rem); height: 22rem; padding: 2rem 1rem 3rem;}
	.wpf-overview-con01-icon{height: 5rem;}
	.wpf-overview-con01-txt{margin-top: 3rem; font-size: 1.6rem; line-height: 1.43;}

	.wpf-overview-con02 .area{padding-top: 5rem !important; padding-bottom: 5rem !important;}
	.wpf-overview-con02-top{margin-top: 6rem;}
	.wpf-overview-con02-list{margin: -1.2rem;}
	.wpf-overview-con02-item{margin: 1.2rem; padding: 4rem 2.5rem; width: calc(100% - 2.4rem);}
	.wpf-overview-con02-tit .tit01{font-size: 1.8rem; line-height: 1.3;}
	.wpf-overview-con02-tit .tit02{margin-top: 0.5rem; font-size: 3.8rem; line-height: 1.2;}
	.wpf-overview-con02-tit .tit03{margin-top: 1.5rem; padding-left: 2rem; font-size: 1.4rem; line-height: 1.3;}
	.wpf-overview-con02-tit .tit03 i{top: 0.1rem;}
	.wpf-overview-con02-info{margin-top: 3rem;}
	.wpf-overview-con02-info-item{margin: 0.4rem; padding: 2rem; width: calc(50% - 0.8rem); height: 12rem;}
	.wpf-overview-con02-info-item .tit{font-size: 1.8rem; line-height: 1.3;}
	.wpf-overview-con02-info-item .result{font-size: 2rem;}
	.wpf-overview-con02-info-item .result b{margin-right: 0.5rem; font-size: 3.6rem;}

	.wpf-overview-con02-bottom{margin-top: 8rem;}
	.wpf-overview-con02-bottom-left{padding-right: 0; width: 100%; display: flex; align-items: flex-start; flex-direction: column;}
	.wpf-overview-con02-bottom-left img{margin-top: 1rem; height: 0.6rem;}
	.wpf-overview-con02-bottom-right{margin-top: 2rem; width: 100%;}
	.wpf-overview-con02-download{margin: -0.7rem;}
	.wpf-overview-con02-download li{margin: 0.7rem; width: calc(100% - 1.4rem);}
	.wpf-overview-con02-download li a{padding: 0 2rem; width: 100%; height: 6rem;}
	.wpf-overview-con02-download li a span{font-size: 1.9rem;}
	.wpf-overview-con02-download li a i{font-size: 2.4rem;}

	.wpf-overview-con03{padding: 5rem 0 7rem;}
	.wpf-overview-con03-item{padding: 3.5rem 2rem 4rem;}
	.wpf-overview-con03-item + .wpf-overview-con03-item{margin-top: 3rem;}
	.wpf-overview-con03-tit{padding-left: 0; font-size: 2.6rem; line-height: 1.3;}
	.wpf-overview-con03-tit span{margin: 0 1.5rem; font-size: 2rem;}
	/* 전후 이미지 */
	.product-before-after-box{margin: 3rem auto 0;}
}


/* ****************** 03 Window Film :: 01 WF Overview ********************** */
.wf-overview-page{}
.wf-overview-page .cm-overview-bnr .txt02{padding-right: 10rem; font-weight: 600;}
.wf-overview-page .cm-overview-bnr .txt03{font-weight: 400;}
.wf-overview-page .cm-overview-bnr .txt04{margin-top: 2.5rem; margin-left: 4.5rem; font-size: 3.4rem; font-weight: 400; line-height: 1.3; color: #fff; position: relative;}
.wf-overview-page .cm-overview-bnr .txt04:before{position: absolute; top: 50%; margin-top: -1px; left: -2.6rem; width: 1.2rem; height: 2px; background-color: #fff; content: '';}
.wf-overview-page .cm-overview-bnr .txt03{padding-left: 22rem;}
.wf-overview-page .cm-overview-bnr .point{background-color: rgba(255,255,255,0.2);}

.wf-overview-con01{padding: 12rem 0 8rem; background-color: var(--color-gray-200);}

.wf-overview-con02{background-color: var(--color-gray-200);}
.wf-overview-con02 .area{padding-top: 7rem !important; padding-bottom: 20rem !important; border-top: 1px solid #dadada;}
.wf-overview-con02-tit{margin-bottom: 4.5rem; font-size: 4rem; line-height: 1.35; letter-spacing: -.025em; font-weight: 600; color: var(--color-dark);}
.wf-overview-con02-tit b{font-weight: 600; color: var(--main-color);}
.wf-overview-con02-list{}
.wf-overview-con02-item{padding: 2.5rem; background-color: var(--color-light); border-radius: 0.5rem; display: flex; flex-wrap:wrap; align-items: center;}
.wf-overview-con02-item + .wf-overview-con02-item{margin-top: 1.5rem;}
.wf-overview-con02-icon{width: 16.4rem; height: 16.4rem; background-color: var(--main-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;}
.wf-overview-con02-icon img{height: 5.8rem;}
.wf-overview-con02-txt{padding-left: 4.68%; width: calc(100% - 16.4rem); box-sizing: border-box;}
.wf-overview-con02-txt h5{font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: var(--color-dark);}
.wf-overview-con02-txt p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.025em; color: rgba(0,0,0,0.6);}

@media all and ( max-width: 800px ){
	.wf-overview-page .cm-overview-bnr .txt02{padding-right: 0;}
	.wf-overview-page .cm-overview-bnr .txt04{margin-top: 2rem; margin-left: 2.6rem; font-size: 2.4rem;}
	.wf-overview-page .cm-overview-bnr .txt04:before{margin-top: -1px; left: -2.6rem; width: 1.2rem; height: 2px;}
	.wf-overview-page .cm-overview-bnr .txt03{padding-left: 0;}

	.wf-overview-con01{padding: 10rem 0 5rem;}

	.wf-overview-con02 .area{padding-top: 5rem !important; padding-bottom: 7rem !important;}
	.wf-overview-con02-tit{margin-bottom: 3.5rem; font-size: 3.6rem; line-height: 1.35;}
	.wf-overview-con02-item{padding: 2.5rem;}
	.wf-overview-con02-item + .wf-overview-con02-item{margin-top: 1.5rem;}
	.wf-overview-con02-icon{width: 10.4rem; height: 10.4rem;}
	.wf-overview-con02-icon img{height: 5rem;}
	.wf-overview-con02-txt{padding-left: 2.5rem; width: calc(100% - 10.4rem);}
	.wf-overview-con02-txt h5{font-size: 2.4rem; line-height: 1.3;}
	.wf-overview-con02-txt p{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.62;}
}


/* ****************** 01 Products :: 02 All Products 공통 ********************** */
.cm-prd-con01{/* padding: var(--sub-layout-padding) 0 14rem; */padding: var(--sub-layout-padding) 0 19rem; background-color: var(--color-gray-400);}
.cm-prd-con01 #contentInfoCon{margin-bottom: 0; padding-bottom: 6rem;}

.cm-prd-view-container{}

/* ******* 우측 필터 항목 ******* */
.cm-prd-filter-con{width: 47rem; float: right; position: sticky; top: 20px; z-index: 11;}
.cm-prd-filter-btn{position: absolute; bottom: calc(45px + 1rem + 12px); left: 50%; margin-left: -7.5rem; width: 15rem; height: 40px; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: #fff; text-align: center; background-color: var(--main-color); border-radius: 0 0 1rem 1rem; display: none; align-items: center; justify-content: center; z-index: 11;}
.cm-prd-filter-btn i{margin-left: 1rem; font-size: 1.8rem;}

.cm-prd-filter-list{height: calc(100vh - 40px - 6.4rem); overflow: hidden;}
/* .cm-prd-filter-list{height: calc(92vh - 40px - 6.4rem); overflow: hidden;} */
.cm-prd-filter-list .mCSB_scrollTools {right: -2.6rem !important; opacity: 1;}
.cm-prd-filter-list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: #232323 !important; width: 0.7rem;}
.cm-prd-filter-list .mCSB_scrollTools .mCSB_draggerRail {width: 0.7rem; background-color: #dadada !important;}
.cm-prd-filter-item{box-shadow: 0 1.2rem 3.2rem -1.2rem rgba(0,0,0,0.15);}
.cm-prd-filter-item:not(.cm-prd-filter-item-JS){/* padding: 2.5rem 3.5rem; */ padding: 3.5rem 3.5rem 4rem 3.5rem; border-radius:1.5rem; background-color:var(--color-light); box-sizing: border-box;}
.cm-prd-filter-item + .cm-prd-filter-item{margin-top: 1rem;}
.cm-prd-filter-tit{font-size:2rem; line-height: 1.5; font-weight:700; letter-spacing: -0.025em; color: var(--color-dark);}

/* 토글 css */
.cm-prd-filter-item-JS{padding: 0; border-radius:1.5rem; background-color:var(--color-light); overflow:hidden;}
.cm-prd-filter-item-JS dt{padding:2.5rem 7rem 2.5rem 3.5rem; position:relative; cursor:pointer; box-sizing: border-box; transition:padding-top 0.3s;}
.cm-prd-filter-item-JS dt .cm-prd-filter-tit{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top;}
.cm-prd-filter-item-JS dt .arrow{position:absolute; top:2.8rem; right:4rem; font-size:2.4rem; color: var(--color-dark);}
.cm-prd-filter-item-JS dd{display:none; padding:0.5rem 3.5rem 3.5rem; position:relative; box-sizing: border-box;}
/* Open */
.cm-prd-filter-item-JS.open{}
.cm-prd-filter-item-JS.open dt{padding-top: 4rem; padding-bottom: 1.5rem;}
.cm-prd-filter-item-JS.open dt .cm-prd-filter-tit{white-space:normal; text-overflow:unset;}
.cm-prd-filter-item-JS.open dt .arrow{top: 4.3rem; margin-top:-0.2rem; transform:rotate(-180deg); transition:top 0.3s;}

.prd-filter-vehicle{}
.prd-filter-vehicle-list{margin: 0 -1rem;}
.prd-filter-vehicle-item{margin: 0 1rem; width: calc(33.33% - 2rem); float: left;}
.prd-filter-vehicle-item .cm-img-radiobox{margin-top: 1.5rem;}
.prd-filter-vehicle-list .slick-arrow{position: absolute; top: -3rem; font-size: 1.8rem; line-height: 3rem; color: var(--color-dark); opacity: 1; transition: opacity 0.3s;}
/* .prd-filter-vehicle-list .slick-prev{right: 2.5rem;}
.prd-filter-vehicle-list .slick-next{right: 0;} */
.prd-filter-vehicle-list .slick-prev{right: 4rem;}
.prd-filter-vehicle-list .slick-next{right: 1.5rem;}
.prd-filter-vehicle-list .slick-arrow.slick-disabled{opacity: 0.3; }

.prd-color-ppf{}
.prd-color-ppf-list{margin: -0.5rem; display: flex; flex-wrap:wrap;}
.prd-color-ppf-item{margin: 0.5rem; width: calc(50% - 1rem);}

.cm-prd-filter-control{margin-top: 1rem;}
.cm-prd-filter-control ul{display: flex; align-items: center; justify-content: space-between;}
.cm-prd-filter-control ul li{width: calc(50% - 0.5rem);}
.cm-prd-filter-control ul li a{padding: 0 2.5rem 0 3rem; width: 100%; height: 5.4rem; background-color: var(--color-light); border: 2px solid #4a4a4a; border-radius: 1rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; box-shadow: 0 1.2rem 3.2rem -1.2rem rgba(0,0,0,0.15); transition: border-color 0.3s, background-color 0.3s;}
.cm-prd-filter-control ul li a b{font-size: 1.5rem; letter-spacing: -0.025em; color: var(--color-dark); transition:color 0.3s;}
.cm-prd-filter-control ul li a i{font-size: 2rem; color: var(--color-dark); transition:color 0.3s;}
.cm-prd-filter-control ul li a:hover{border-color: #232323; background-color: #232323;}
.cm-prd-filter-control ul li a:hover b,
.cm-prd-filter-control ul li a:hover i{color: #fff;}

/* 네임, 인풋+버튼 */
.cm-prd-filter-name{position: relative; padding-right: 5rem;}
.cm-prd-filter-name p{font-size: 1.4rem; line-height: 1.5; letter-spacing: -0.015em; font-weight: 500; color: rgba(0,0,0,0.5);}
.cm-prd-filter-name h5{font-size: 3.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: var(--color-dark);}
.cm-prd-filter-name .color{position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 4.4rem; height: 4.4rem; border-radius: 100%; border: 1px solid var(--color-dark); box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.cm-prd-filter-name .color span{width: 3.6rem; height: 3.6rem; border-radius: 100%; display: block; background-color: var(--color-dark);}
.cm-prd-filter-item .input-button-group {margin-top: 2.5rem;}
.cm-prd-filter-item .input-button-group input{padding-left: 2rem; color: var(--color-dark); border: 2px solid #dbdbdb; background-color: #f0f0f0; transition: border-color 0.3s, background-color 0.3s, color 0.3s;}
.cm-prd-filter-item .input-button-group input::placeholder{color: rgba(0,0,0,0.6);}
.cm-prd-filter-item .input-button-group .btn{color: #000;}
.cm-prd-filter-item .input-button-group input:focus{border-color: var(--main-color); background-color: #fff; color: var(--color-dark);}
.cm-prd-filter-item .input-button-group input:focus::placeholder{color: var(--color-dark);}
.cm-prd-filter-item .input-button-group input:focus + .btn{background-color: var(--main-color); color: #fff;}

/* 라디오버튼(이미지) */
.cm-img-radiobox{width: 100%;}
.cm-img-radiobox input[type="radio"]{display:none;}
.cm-img-radiobox label{position:relative; width: 100%; height: 12rem; height: auto; border-radius: 1rem; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; transition: border-color 0.3s;}
.cm-img-radiobox label span{position: relative; width: 100%; height: 0; padding-top: 50.38%; display: block; border-radius: 1rem 1rem 0 0; overflow: hidden;}
.cm-img-radiobox label span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cm-img-radiobox label p{height: 2.6em; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark); text-align: center; display: flex; align-items: center; justify-content: center;}
.cm-img-radiobox input[type="radio"]:checked + label{border-color: var(--color-dark);}

/* 라디오버튼(컬러판) */
.cm-color-radiobox{width: 100%;}
.cm-color-radiobox input[type="radio"]{display:none;}
.cm-color-radiobox label{position:relative; width: 100%; display: block;}
.cm-color-radiobox label .color{width: 100%; height: 4.8rem; display: block; border: 2px solid #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 1rem; transition: border-color 0.3s;}
.cm-color-radiobox label .color span{width: calc(100% - 0.2rem - 4px); height: calc(4rem - 2px); font-size: 1.5rem; letter-spacing: -0.025em; color: rgba(255,255,255,0.35); text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 0.7rem;}
.cm-color-radiobox label .tit{margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark); text-align: left;}
.cm-color-radiobox input[type="radio"]:checked + label .color{border-color: var(--color-dark);}


/* ******* 좌측 뷰화면 ******* */
.cm-prd-view-con{width: calc(100% - 49rem); float: left;}
.cm-prd-view-item{border-radius:1.5rem; background-color:var(--color-light);}
.cm-prd-view-item + .cm-prd-view-item{margin-top: 1rem;}

.cm-prd-view-img-box{}

.cm-prd-view-img-top{border-bottom: 1px solid #e7e7e7;}
.cm-prd-view-img-ori{width: 100%;}
.cm-prd-view-img-ori-item{width: 100%;}
.cm-prd-view-img-ori-item span{position: relative; width: 100%; height: 0; padding-top: 50.38%; border-radius:1.5rem 1.5rem 0 0; overflow: hidden; display: block;}
.cm-prd-view-img-ori-item span img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.cm-prd-view-img-bottom{/* padding: 3.5rem 15rem 2.5rem 1.5rem; */padding: 2rem 15rem 2rem 1.5rem; overflow: hidden;}
.cm-prd-view-img-thum{margin: 0 -0.5rem;}
.cm-prd-view-img-thum .slick-list{overflow: visible;}
.cm-prd-view-img-thum-item{margin: 0 0.5rem; width: calc(20% - 1rem); float: left;}
.cm-prd-view-img-thum-item a{position: relative; width: 100%; height: 0; padding-top: 55.55%; border-radius:1rem; box-sizing: border-box; overflow: hidden; display: block;}
.cm-prd-view-img-thum-item a:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #232323; border-radius:1rem; box-sizing: border-box; display: block; opacity: 0; content: ''; transition: all 0.3s;}
.cm-prd-view-img-thum-item a img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.cm-prd-view-img-thum-item.slick-current a:after{opacity: 1;}

.cm-prd-view-info-box{padding: 6rem 6%/* 5.42% */ 6.5rem; display: flex; flex-wrap:wrap;}
.cm-prd-view-tit{width: 29rem; padding-right: 2rem; font-size: 3.6rem; line-height: 1.27; letter-spacing: -0.025em; font-weight: 700; color: var(--color-dark); box-sizing: border-box;}
.cm-prd-view-info{width: calc(100% - 29rem);}

/* 네임, 인풋+버튼 */
.cm-prd-view-info .cm-prd-filter-name{display: inline-block;}
.cm-prd-view-info .cm-prd-filter-name h5{margin-top: 0.5rem; font-size: 2.8rem;}
.cm-prd-view-info .cm-prd-filter-name .color{top: auto; right: 0; bottom: 0rem; transform: none; width: 3.4rem; height: 3.4rem;}
.cm-prd-view-info .cm-prd-filter-name .color span{width: 2.8rem; height: 2.8rem;}
.prd-description-txt{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: -0.025em; font-weight: 500; color: rgba(0,0,0,0.6);}
.prd-description-line-txt{margin-top: 2.5rem; padding: 1rem 3rem; font-size: 1.4rem; line-height: 1.5; letter-spacing: -0.025em; color: var(--color-dark); border: 1px dashed var(--color-dark); border-radius: 0.5rem; display: inline-flex;}
.prd-description-chart{margin-top: 1.5rem; width: 100%; max-width: 70rem;}
.prd-description-chart dl{display: flex; flex-wrap:wrap; border-radius: 0.5rem; overflow: hidden;}
.prd-description-chart dl + dl{margin-top: 0.5rem;}
.prd-description-chart dt,
.prd-description-chart dd{padding: 1rem; font-size: 1.4rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.025em; box-sizing: border-box; text-align: center; display: flex; align-items: center; justify-content: center;}
.prd-description-chart dt{width: 11.5rem; color: #fff; background-color: #232323;}
.prd-description-chart dd{width: calc(100% - 11.5rem); padding-left: 2rem; padding-right: 2rem; color: var(--color-dark); background-color: var(--color-gray-200); text-align: left; justify-content: flex-start;}

/* 테이블 */
.cm-prd-view-tbl-wrapper{margin-top: 5.5rem; width: 100%;}
.cm-prd-view-tbl {padding: 1.5rem 0; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 0.5rem; /* tr 사이 간격 */}

.cm-prd-view-tbl td, 
.cm-prd-view-tbl th {font-size: 1.5rem; line-height: 1.4; letter-spacing: -0.025em; font-weight: 500; color: var(--color-dark); text-align: center;}

.cm-prd-view-tbl thead th {padding: 2rem; font-size: 1.5rem; line-height: 1.4; letter-spacing: -0.025em; font-weight: 500; color: #fff; text-align: center; background-color: #232323; }
.cm-prd-view-tbl thead th:first-child {border-radius: 1rem 0 0 1rem;}
.cm-prd-view-tbl thead th:last-child {border-radius: 0 1rem 1rem 0;}

.cm-prd-view-tbl tbody::before {content: ''; display: table-row; height: 0.005rem; /* 여기서 간격 조절 */}
.cm-prd-view-tbl tbody tr {border-radius: 1.5rem; background-color: var(--color-gray-200); overflow: hidden;}
.cm-prd-view-tbl tbody td{padding: 1.5rem 0;}
.cm-prd-view-tbl tbody td:first-child {border-radius: 1rem 0 0 1rem;}
.cm-prd-view-tbl tbody td:last-child {border-radius: 0 1rem 1rem 0;}
.cm-prd-view-tbl tbody td > span {position: relative; padding: 0 2rem; min-height: 5rem; font-weight: inherit; color:inherit; display: flex; align-items: center; justify-content: center;}
.cm-prd-view-tbl tbody td:first-child > span{justify-content: flex-start; padding-left: 2rem; text-align: left;}
.cm-prd-view-tbl tbody td > span:before{position: absolute; top: 50%; margin-top: -1.5rem; left: 0; width: 1px; height: 3rem; content:''; background-color: #e3e3e3;}
.cm-prd-view-tbl tbody td:first-child > span:before{display: none;}

/* highlight */
.cm-prd-view-tbl .highlight{position: relative; background-color: var(--main-color); color: #fff;}
.cm-prd-view-tbl .highlight:before{position: absolute; top: -0.5rem; left: 0; width: 100%; height: 0.5rem; content:''; background-color: var(--main-color);}
.cm-prd-view-tbl thead .highlight:before{top: auto; bottom: -0.5rem;}

.cm-prd-view-tbl thead .highlight:after{position: absolute; top: -1.5rem; left: 0; width: 100%; height: 1.5rem; content:''; background-color: var(--main-color); border-radius: 1rem 1rem 0 0;}
.cm-prd-view-tbl tbody tr:last-child .highlight:after{position: absolute; bottom: -1.5rem; left: 0; width: 100%; height: 1.5rem; content:''; background-color: var(--main-color); border-radius: 0 0 1rem 1rem;}

.cm-prd-view-tbl tbody td.highlight > span:before{top: -0.25rem; left: 2rem; width: calc(100% - 4rem); height: 1px; background-color: rgba(255,255,255,0.1);}

.cm-prd-view-tbl thead th.highlight:last-child {border-radius: 0 0 0 0;}
.cm-prd-view-tbl tbody td.highlight:last-child {border-radius: 0 0 0 0;}

/* 스와이퍼 아이콘 */
.swipe-icon {overflow:visible; width:18px; height:24px;}
.swipe-icon .swipe-hand {fill: #333;}
.swipe-icon .swipe-arrow {fill:var(--color-dark); animation: pulse-arrow 2s ease-out infinite;}
.swipe-icon {animation: hand-move 2s ease-out infinite;}
@keyframes pulse-arrow {
  0%   {transform: translateX(0); opacity:1;}
  50%  {transform: translateX(0.25em);opacity:1;}
  75% {transform: translateX(0.25em);opacity:0;}
  100% {transform: translateX(0);opacity:0;}
}
@keyframes hand-move {
  0%   {transform: translateX(0);}
  50%  {transform: translateX(0.5em);}
  100% {transform: translateX(0);}
}

@media all and ( max-width: 1280px ){
	/* ******* 우측 필터 항목 ******* */
	.cm-prd-filter-con{width: 40rem; top: calc(var(--header-height) + 20px);}
	.cm-prd-filter-list{height: calc(100vh - 40px - var(--header-height) - 6.4rem);}

	/* ******* 좌측 뷰화면 ******* */
	.cm-prd-view-con{width: calc(100% - 42rem);}
	.cm-prd-view-img-bottom{padding-right: 10rem;}
}
@media all and ( max-width: 800px ){
	.cm-prd-con01{padding: var(--sub-layout-padding) 0;}
	.cm-prd-con01 #contentInfoCon{margin-bottom: 0; padding-bottom: 2rem;}

	/* ******* 우측 필터 항목 ******* */
	.cm-prd-filter-con{width: 100%; float: none; position: sticky; top: var(--header-height); padding: 10px 0; background-color: var(--color-gray-400); box-shadow: 0 1.2rem 2rem -1.2rem rgba(0, 0, 0, 0.15);}
	.cm-prd-filter-btn{display: flex;}
	.open-option-btn-JS{visibility: visible; opacity: 1;}
	.close-option-btn-JS{visibility: hidden; opacity: 0;}
	.cm-prd-filter-list{margin-bottom: 50px; height: 10rem; overflow: hidden;}

	.cm-prd-filter-con.open .cm-prd-filter-list{height: calc(100vh - 80px - var(--header-height) - 45px - 1rem);}
	.cm-prd-filter-con.open .open-option-btn-JS{visibility: hidden; opacity: 0;}
	.cm-prd-filter-con.open .close-option-btn-JS{visibility: visible; opacity: 1;}

	.cm-prd-filter-list .mCSB_scrollTools {right: -2.2rem !important;}
	.cm-prd-filter-list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 0.7rem;}
	.cm-prd-filter-list .mCSB_scrollTools .mCSB_draggerRail {width: 0.7rem;}
	.cm-prd-filter-item{box-shadow: 0 1.2rem 3.2rem -1.2rem rgba(0,0,0,0.15);}
	.cm-prd-filter-item:not(.cm-prd-filter-item-JS){padding: 2.5rem 2.5rem;}
	.cm-prd-filter-item + .cm-prd-filter-item{margin-top: 1rem;}

	.cm-prd-filter-tit{font-size:2rem; line-height: 1.5;}

	/* 토글 css */
	.cm-prd-filter-item-JS dt{padding:2.5rem 7rem 2.5rem 2.5rem;}
	.cm-prd-filter-item-JS dt .arrow{top:2.8rem; right:4rem; font-size:2.4rem;}
	.cm-prd-filter-item-JS dd{padding:0.5rem 2.5rem 3.5rem;}
	/* Open */
	.cm-prd-filter-item-JS.open dt{padding-top: 4rem; padding-bottom: 1.5rem;}
	.cm-prd-filter-item-JS.open dt .arrow{top: 4.3rem; margin-top:-0.2rem;}

	.prd-filter-vehicle-list{margin: 0 -1rem;}
	.prd-filter-vehicle-item{margin: 0 1rem; width: calc(50% - 2rem);}
	.prd-filter-vehicle-item .cm-img-radiobox{margin-top: 1.5rem;}
	.prd-filter-vehicle-list .slick-arrow{top: -3rem; font-size: 1.8rem; line-height: 3rem;}
	.prd-filter-vehicle-list .slick-prev{right: 2.5rem;}

	.prd-color-ppf-list{margin: -0.5rem;}
	.prd-color-ppf-item{margin: 0.5rem; width: calc(50% - 1rem);}

	.cm-prd-filter-control{margin-top: 1rem;}
	.cm-prd-filter-control ul li{width: calc(50% - 0.5rem);}
	.cm-prd-filter-control ul li a{padding: 0 1.5rem 0 2rem; height: 45px; border-radius: 8px;}
	.cm-prd-filter-control ul li a b{font-size: 1.5rem;}
	.cm-prd-filter-control ul li a i{font-size: 2rem;}

	/* 네임, 인풋+버튼 */
	.cm-prd-filter-name{padding-right: 5rem;}
	.cm-prd-filter-name p{font-size: 1.4rem; line-height: 1.5;}
	.cm-prd-filter-name h5{font-size: 3.4rem; line-height: 1.3;}
	.cm-prd-filter-name .color{width: 4.4rem; height: 4.4rem;}
	.cm-prd-filter-name .color span{width: 3.6rem; height: 3.6rem;}
	.cm-prd-filter-item .input-button-group {margin-top: 2.5rem;}
	.cm-prd-filter-item .input-button-group input{padding-left: 2rem;}

	/* 라디오버튼(이미지) */
	.cm-img-radiobox label p{margin-top: 1rem; font-size: 1.3rem; line-height: 1.3;}

	/* 라디오버튼(컬러판) */
	.cm-color-radiobox label .color{width: 100%; height: 4.8rem;}
	.cm-color-radiobox label .color span{width: calc(100% - 0.2rem - 4px); height: calc(4rem - 2px); font-size: 1.5rem;}
	.cm-color-radiobox label .tit{margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.3;}


	/* ******* 좌측 뷰화면 ******* */
	.cm-prd-view-con{margin-top: 2rem; width: 100%; float: none;}

	.cm-prd-view-item + .cm-prd-view-item{margin-top: 1rem;}

	.cm-prd-view-img-ori{width: 100%;}
	.cm-prd-view-img-ori-item{width: 100%;}

	.cm-prd-view-img-bottom{padding: 1.5rem 8rem 1.5rem 1.5rem;}
	.cm-prd-view-img-thum-item{width: calc(33.33% - 1rem);}

	.cm-prd-view-info-box{padding: 3rem 2.5rem 3.5rem;}
	.cm-prd-view-tit{width: 100%; padding-right: 0; font-size: 3.4rem; line-height: 1.27;}
	/* .cm-prd-view-tit br{display: none;} */
	.cm-prd-view-info{margin-top: 2rem; width: 100%;}
	/* 네임, 인풋+버튼 */
	.cm-prd-view-info .cm-prd-filter-name h5{margin-top: 0.5rem; font-size: 2.8rem;}
	.cm-prd-view-info .cm-prd-filter-name .color{width: 3.4rem; height: 3.4rem;}
	.cm-prd-view-info .cm-prd-filter-name .color span{width: 2.7rem; height: 2.7rem;}
	.prd-description-txt{margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.62;}
	.prd-description-line-txt{margin-top: 2.5rem; padding: 1rem 3rem; font-size: 1.4rem; line-height: 1.5;}
	.prd-description-chart{margin-top: 1.5rem; width: 100%; max-width: none;}
	.prd-description-chart dl + dl{margin-top: 0.5rem;}
	.prd-description-chart dt,
	.prd-description-chart dd{padding: 1rem; font-size: 1.4rem; line-height: 1.5;}
	.prd-description-chart dt{width: 10rem;}
	.prd-description-chart dd{width: calc(100% - 10rem); padding-left: 1.5rem; padding-right: 1.5rem;}
	/* 테이블 */
	.cm-prd-view-tbl-wrapper{margin-top: 3.5rem; }
	.cm-prd-view-tbl {padding-top: 1.5rem;}

	.cm-prd-view-tbl td, 
	.cm-prd-view-tbl th {font-size: 1.5rem; line-height: 1.4;}

	.cm-prd-view-tbl thead th {padding: 2rem; font-size: 1.5rem; line-height: 1.4;}
	.cm-prd-view-tbl thead th:first-child {border-radius: 1rem 0 0 1rem;}
	.cm-prd-view-tbl thead th:last-child {border-radius: 0 1rem 1rem 0;}

	.cm-prd-view-tbl tbody::before {height: 0.005rem;}
	.cm-prd-view-tbl tbody tr {border-radius: 1.5rem;}
	.cm-prd-view-tbl tbody td{padding: 1.5rem 0;}
	.cm-prd-view-tbl tbody td:first-child {border-radius: 1rem 0 0 1rem;}
	.cm-prd-view-tbl tbody td:last-child {border-radius: 0 1rem 1rem 0;}
	.cm-prd-view-tbl tbody td > span {padding: 0 2rem; min-height: 5rem;}
	.cm-prd-view-tbl tbody td:first-child > span{padding-left: 2rem;}
	.cm-prd-view-tbl tbody td > span:before{margin-top: -1.5rem; height: 3rem;}
	/* highlight */
	.cm-prd-view-tbl .highlight:before{top: -0.5rem; height: 0.5rem;}
	.cm-prd-view-tbl thead .highlight:before{top: auto; bottom: -0.5rem;}
	.cm-prd-view-tbl thead .highlight:after{top: -1.5rem; height: 1.5rem; border-radius: 1rem 1rem 0 0;}
	.cm-prd-view-tbl tbody tr:last-child .highlight:after{bottom: -1.5rem; height: 1.5rem; border-radius: 0 0 1rem 1rem;}
	.cm-prd-view-tbl tbody td.highlight > span:before{top: -0.25rem; left: 2rem; width: calc(100% - 4rem);}
}

/* ****************** 02 Windshield Protection Film :: 02 PPF Products ********************** */
.wpf-prd-page{}
.wpf-prd-page .cm-prd-view-tit{width: 100%; padding-right: 0;}
.wpf-prd-page .cm-prd-view-info{width: 100%;}


/* ****************** 03 Window Film :: 02 WF Products ********************** */
.wf-prd-page{}
.wf-prd-page .cm-prd-view-tit{width: 100%; padding-right: 0;}
.wf-prd-page .cm-prd-view-info{width: 100%;}


/* ****************** 05 sample request :: sample request ********************** */
.request-page {padding-bottom: 3rem;}
.request-container {margin-top: 14rem;}
.request-container.mt0,
.request-container:first-of-type {margin-top: 0;}
.inquiry-style10 .inquiry-container { /* padding-bottom: 1.7rem; */ padding-top: 2rem; border-top: 2px solid var(--color-dark); display:flex; padding-bottom:6.4rem; border-bottom:1px solid rgba(0,0,0,0.1);}
.inquiry-style10 .request-container:last-of-type .inquiry-container {padding-bottom:0; border-bottom:0;}
/* 폼 영역 */
.inquiry-style10 .inquiry-form {width: calc((100% - 2rem) / 2);}
.inquiry-style10 .inquiry-form.cm-fl {margin-right: 2rem;}
.inquiry-style10 .inquiry-tit{display: block; font-size:2.4rem; letter-spacing:-0.025em; line-height:1.5em; font-weight:600; color:var(--color-dark); vertical-align: top; padding-top: 3.2rem; margin-bottom: 0.5rem;}
/* input */
.inquiry-style10 .write-input {background-color:var(--color-gray-300); border-radius:1rem !important; width: 100%; height: 6.4rem; text-indent:2.5rem; font-size:1.6rem; letter-spacing:-0.025em; color: var(--color-dark); line-height:1.625; font-weight: 500; transition: all 0.3s; border:2px solid transparent; box-sizing: border-box;}
/* textarea */
.inquiry-style10 textarea {width: 100%; padding: 2.5rem; height: 14rem; font-size:1.6rem; letter-spacing:-0.025em; color: var(--color-dark); line-height:1.625; font-weight: 500; background: var(--color-gray-300); border-radius:1rem; box-sizing: border-box; transition: all 0.3s; border:2px solid transparent;}
.inquiry-style10 .introduction-box .inquiry-tit {padding-top: 4.8rem;}
.inquiry-style10 .introduction-box .inquiry-tit span {font-size: 2rem;}
.inquiry-style10 .introduction-box textarea{height: 20rem;}
/* radiobox */
.inquiry-radio-box{display: flex; flex-wrap: wrap; margin-top: -1rem;}
.inquiry-radio-box .radio-item{margin:1rem 1.2rem 0 0; width: calc((100% - 2.4rem) / 3); display: block;}
.inquiry-radio-box .radio-item:nth-of-type(3n) {margin-right: 0;}
.inquiry-radio-box .radio-item input[type="radio"]{display:none;}
.inquiry-radio-box .radio-item label{position:relative; width: 100%; height: 7rem; padding: 2rem 2.7rem; padding-left:6rem; color:var(--color-dark); font-size:1.8rem; letter-spacing:-0.025em; line-height:3rem; font-weight: 500; border-radius: 10px; border: 2px solid #f1f1f1; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; transition: border-color 0.3s, background-color 0.3s, color 0.3s;}
.inquiry-radio-box .radio-item.other label span{width: 6.5rem;}
.inquiry-radio-box .radio-item.other label .other-input{width: calc(100% - 6.5rem); height: 3rem; text-indent:1rem; font-size:1.6rem; letter-spacing:-0.025em; color: var(--color-dark); line-height:1.625; font-weight: 500; border: 0; border-bottom:1px solid var(--color-dark); outline: none; background-color:transparent; box-sizing: border-box; transition: border-bottom-color 0.3s, color 0.3s;}
.inquiry-radio-box .radio-item label::before{font-family: 'xeicon'; content: "\e92c"; position:absolute; top: 1.8rem; left:2.7rem; font-size:2rem; color:var(--color-dark);}
.inquiry-radio-box .radio-item input[type="radio"]:checked + label{color: #fff; border-color: var(--main-color); background-color: var(--main-color);}
.inquiry-radio-box .radio-item input[type="radio"]:checked + label::before{color:#fff; content: "\e92b";}
.inquiry-radio-box .radio-item.other input[type="radio"]:checked + label .other-input{border-bottom-color: #fff; color: #fff;}
/* ★placeholder, focus★ */
.inquiry-style10 textarea::placeholder {color: rgba(0,0,0,0.42);}
.inquiry-style10 .write-input::placeholder {color: rgba(0,0,0,0.42);}
.inquiry-style10 textarea:focus,
.inquiry-style10 .write-input:focus, .inquiry-style10 .inquiry-txt:focus {border-color: var(--main-color); outline:0; background-color:var(--color-light); box-shadow: 8px 8px 33px 1px rgba(5, 84, 140, 0.14);}
.inquiry-style10 .cm-btn-controls {margin-top: 3.8rem;}
/* 보안코드 */
.security-code-box{position: relative; padding: 0 2.5rem; height: 7rem; background-color: var(--color-gray-300); border: 0; border-radius: 1rem; box-sizing: border-box; display: flex; align-items: center;}
.security-code-box .security-code{width: 10rem; font-size: 1.6rem; letter-spacing: -0.015em; color: var(--color-dark);}
.security-code-box .write-input{width: calc(100% - 10rem); max-width: 40rem; height: 4.5rem !important; background-color: var(--color-light) !important;}

/* 하단 동의박스 */
.agree-box {margin-top: 5rem; text-align: center;}
.agree-check-box #onlineAgree {display:none;}
.agree-check-box input:checked + label > i {color: var(--main-color);}
.agree-check-box input:checked + label > i:before {content:"\e92b";}
.agree-check-box label {cursor:pointer; font-size:1.6rem; color: var(--color-dark); line-height:1.25; letter-spacing:-0.025em;}
.agree-check-box label > i {margin-right:0.6rem; position: relative; top: 3px; font-size:2rem;}
.agree-check-box a {position: relative; font-weight: 600; color: var(--color-dark);}
.agree-check-box a:after {display: block; content:""; position:absolute; bottom:-3px; right: 0; height: 2px; background: var(--color-dark); width: 100%;}

/* 하단 문의하기 버튼 */
.contact-info-box {border:3px solid var(--main-color); border-radius:1rem; text-align: center; padding: 5.5rem 0 5rem; margin-top: 5.8rem;}
.contact-info-box .info-txt {font-size:2.3rem; letter-spacing:-0.025em; color: var(--color-dark); font-weight: 600; line-height:1.565em;}
.mail-info {display:flex; align-items:center; justify-content: center; margin-top: 1.6rem;}
.mail-info span {display:flex; align-items:center; justify-content:center; width: 3.7rem; height: 3.7rem; border-radius:100%; background: var(--main-color); } 
.mail-info span i {color: #fff; font-size:1.7rem; }
.mail-info em {font-size:1.8rem; letter-spacing:-0.025em; color:var(--main-color); font-weight: 500; line-height:1.5em; padding-left: 1.5rem;}

@media all and (max-width:800px){
	.request-container {margin-top: 7rem;}
	.request-container:first-of-type {margin-top: 0;}
	.inquiry-style10 .inquiry-container {display:block; padding-bottom:6.4rem; border-bottom:1px solid rgba(0,0,0,0.1);}
	.inquiry-style10 .request-container:last-of-type .inquiry-container {padding-bottom:0; border-bottom:0;}
	/* 폼 영역 */
	.inquiry-style10 .inquiry-form {width: 100%; float: none;}
	.inquiry-style10 .inquiry-form.cm-fl {margin-right: 0;}
	.inquiry-style10 .inquiry-tit{display: block; font-size:2.4rem; padding-top: 3.2rem; margin-bottom: 1rem;}
	./* input */
	.inquiry-style10 .write-input {width: 100%; height: 6rem; text-indent:2.5rem; font-size:1.6rem;}
	/* .inquiry-style10 .write-select {height: 6.4rem; border:0; text-indent: 3rem; font-size:1.6rem; width: 100%;}
	.inquiry-style10 .email-fieldset {display: flex; align-items: center;}
	.inquiry-style10 .email-fieldset .write-select {margin-left: 1rem;} */
	/* textarea */
	.inquiry-style10 textarea {width: 100%; padding: 2.5rem; height: 14rem; font-size:1.6rem; line-height:1.625;}
	.inquiry-style10 .introduction-box .inquiry-tit {padding-top: 4.8rem;}
	.inquiry-style10 .introduction-box textarea{height: 20rem;}
	/* radiobox */
	.inquiry-radio-box{margin-top: -1rem;}
	.inquiry-radio-box .radio-item:nth-of-type(3n),
	.inquiry-radio-box .radio-item{margin:1rem 1.2rem 0 0; width: calc((100% - 1.2rem) / 2); display: block;}
	.inquiry-radio-box .radio-item:nth-of-type(2n) {margin-right: 0;}
	.inquiry-radio-box .radio-item label{height: 7rem; padding: 1rem 2rem; padding-left:6rem; font-size:1.5rem; line-height:3rem;}
	.inquiry-radio-box .radio-item.other label span{width: 6.5rem;}
	.inquiry-radio-box .radio-item.other label .other-input{width: calc(100% - 6.5rem); height: 1rem; text-indent:1rem; font-size:1.6rem;  line-height:1.625;}
	.inquiry-radio-box .radio-item label::before{top: 1.8rem; left:2.7rem; font-size:2rem;}

	/* 하단 동의박스 */
	.agree-box {margin-top: 6rem;}
	.agree-check-box label {font-size:1.6rem;}
	.agree-check-box label > i {margin-right:0.6rem; top: 3px; font-size:2rem;}
	.agree-check-box a:after {bottom:-3px; right: 0; height: 2px;}

	/* 하단 문의하기 버튼 */
	.contact-info-box {border:3px solid var(--main-color); border-radius:10px; text-align: center; padding: 5.5rem 0 5rem; margin-top: 5.8rem;}
	.contact-info-box .info-txt {font-size:2.3rem; letter-spacing:-0.025em; color: var(--color-dark); font-weight: 600; line-height:1.565em;}
	.mail-info {display:flex; align-items:center; justify-content: center; margin-top: 1.6rem;}
	.mail-info span {display:flex; align-items:center; justify-content:center; width: 3.7rem; height: 3.7rem; border-radius:100%; background: var(--main-color); } 
	.mail-info span i {color: #fff; font-size:1.7rem; }
	.mail-info em {font-size:1.8rem; letter-spacing:-0.025em; color:var(--main-color); font-weight: 500; line-height:1.5em; padding-left: 1.5rem;}
}

@media all and (max-width: 800px) {
	.inquiry-style10 .write-input {width: 100%; height: 5rem; text-indent:2.5rem; font-size:1.6rem;}
	.fakeform-selectbox .select-title {line-height: 5rem !important;}
}

@media all and (max-width:480px){
	/* radiobox */
	.inquiry-radio-box .radio-item:nth-of-type(3n),
	.inquiry-radio-box .radio-item{margin:1rem 1.2rem 0 0; width: calc((100% - 1.2rem) / 1);}
	.inquiry-radio-box .radio-item:nth-of-type(n) {margin-right: 0;}
}

/* ****************** 05 sample request :: contact us ********************** */
.contact-page {padding-bottom: 3rem;}

/* ****************** 04 Help :: 게시판 공통 ********************** */
.help-page {/* padding-top: 1rem; */}

/* ****************** 04 Help :: 03 Product Care ********************** */
.product-care-page {padding-bottom: 20rem;}
.pro-care-intro {position: relative; background: url("/images/content/care_bg.jpg") no-repeat; background-position: center; background-size:cover; margin-top: 4rem; padding-top: 56.6rem;}
.care-intro-tit {display: flex; align-items: center; padding-bottom: 2rem;}
.care-intro-tit em {font-size:3.2rem; letter-spacing:-0.025em; color: #000; font-weight: 600; line-height:1.125em;}
.care-intro-txt {font-size:1.85rem; letter-spacing:-0.025em; color: #000; line-height:1.729em;}
.care-intro-tit img {padding-right: 1rem;}
.pro-care-intro .intro-con {position: absolute; top: -3.5rem; height: 100%; display: flex; flex-direction: column; justify-content: center;}

.pro-care-list .care-list {position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2.1rem; margin-top: -12rem; z-index: 1;}
.pro-care-list .care-list li {display: flex; flex-direction: column; justify-content: space-between; height: 58rem; background-color: #fff; border-radius: 2rem; box-shadow: 0 2.2rem 5.9rem 0 rgba(0, 0, 0, 0.09); padding: 5rem 4.5rem 4.5rem 4.5rem; box-sizing: border-box;}
.pro-care-list .care-list li .top > .icon-box {position: relative; margin-bottom: 3rem;}
.pro-care-list .care-list li .top > .icon-box img {transition: all 0.3s;}
.pro-care-list .care-list li .top > .icon-box .dark-ver-img {position: absolute; left: 0; opacity: 0; visibility: hidden;}
.pro-care-list .care-list .txt-box .tit01 {font-size: 3.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.4; color: var(--color-dark);}
.pro-care-list .care-list .txt-box .tit02 {display: inline-block; margin-bottom: 2rem; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.4; color: var(--color-dark);}
.pro-care-list .care-list .txt-box .txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.025em; line-height: 1.625; color: rgba(0, 0, 0, 0.7);}
.pro-care-list .care-list .bottom {display: flex; flex-direction: column; gap: 0.8rem 0; margin-top: 3rem;}
.pro-care-list .care-list .care-down-btn {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 5.4rem; border: 1px solid var(--color-dark); box-sizing: border-box; border-radius: 0.6rem; padding: 0 2.2rem; transition: all 0.3s;}
.pro-care-list .care-list .care-down-btn p {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.4; color: var(--color-dark); transition: all 0.3s;}
.pro-care-list .care-list .care-down-btn p span {padding-left: 1rem; font-size: 1.2rem; font-weight: 500; color: #ccc; transition: all 0.3s;}
.pro-care-list .care-list .care-down-btn .icon-box {position: relative;}
.pro-care-list .care-list .care-down-btn .icon-box img {max-width: 100%; transition: all 0.3s;}
.pro-care-list .care-list .care-down-btn .icon-box .over-img {position: absolute; top: 0; left: 0; opacity: 0;}
.pro-care-list .care-list .care-down-btn:hover {background-color: #277cd1; border-color: #277cd1;}
.pro-care-list .care-list .care-down-btn:hover p {color: #fff;}
.pro-care-list .care-list .care-down-btn:hover p span {color: rgba(255, 255, 255, 0.4);}
.pro-care-list .care-list .care-down-btn:hover .icon-box .over-img {opacity: 1;}
.pro-care-list .care-list .care-down-btn:hover .icon-box .default-img {opacity: 0;}

@media all and ( max-width:800px ){
	.product-care-page {padding-bottom: var(--sub-layout-padding);}
	.pro-care-intro {margin-top: 4rem; padding-top: 56.6rem;}
	.care-intro-tit {display: flex; align-items: center; padding-bottom: 2rem;}
	.care-intro-tit em {font-size:3.2rem; line-height:1.125em;}
	.care-intro-txt {font-size:1.85rem; line-height:1.729em;}
	.care-intro-tit img {padding-right: 1rem;}
	.pro-care-intro .intro-con {position: absolute; top: -3.5rem; width: calc(100% - var(--area-padding) * 2); height: 100%; display: flex; flex-direction: column; justify-content: center;}

	.pro-care-list .care-list {display: block; margin-top: -12rem;}
	.pro-care-list .care-list li {display: flex; flex-direction: column; justify-content: space-between; height: auto; border-radius: 2rem; padding: 4rem 3rem 3rem 3rem;}
	.pro-care-list .care-list li + li{margin-top: 2rem;}
	.pro-care-list .care-list li .top > .icon-box {margin-bottom: 3rem;}
	.pro-care-list .care-list .txt-box .tit01 {font-size: 3.6rem; line-height: 1.4;}
	.pro-care-list .care-list .txt-box .tit02 {margin-bottom: 2rem; font-size: 2.2rem; line-height: 1.4;}
	.pro-care-list .care-list .txt-box .txt {font-size: 1.6rem; line-height: 1.625;}
	.pro-care-list .care-list .bottom {display: flex; flex-direction: column; gap: 0.8rem 0; margin-top: 3rem;}
	.pro-care-list .care-list .care-down-btn {width: 100%; height: 5.4rem; border-radius: 0.6rem; padding: 0 2.2rem;}
	.pro-care-list .care-list .care-down-btn p {font-size: 1.6rem; line-height: 1.4;}
	.pro-care-list .care-list .care-down-btn p span {padding-left: 1rem; font-size: 1.2rem;}
}


/* ****************** 06 FAQ :: 01 FAQ ********************** */
.faq-page{margin-top: 2.5rem;}

/* 탭 */
.faq-page .bbs-top-list-box {margin-bottom: 3rem;}
.faq-page .sub-tab-wrapper-style{position:relative; margin-bottom:0; height:auto; max-width: 76rem; width: calc(100% - 54rem);}
.faq-page .sub-drop-open-btn-style {display: none;}
.faq-page .sub-tab-list-style ul{display:flex; align-items: center; justify-content: center; width:100%; height:auto; table-layout:initial; text-align: center; background-color:var(--color-gray-300); border-radius: 2.5rem; padding: 0.7rem 1.5rem; box-sizing: border-box;}
.faq-page .sub-tab-list-style ul:after{display:none}
.faq-page .sub-tab-list-style ul li{display:flex; align-items: center; justify-content: center; vertical-align:middle; position:relative; width:auto; height: 100%; background-color:var(--color-gray-300); box-sizing: border-box; /* padding: 0.7rem; */ border: 0;}
/* .faq-page .sub-tab-list-style ul li:first-child{border-radius: 2.5rem 0 0 2.5rem;}
.faq-page .sub-tab-list-style ul li:last-child{border-radius: 0 2.5rem 2.5rem 0;} */
.faq-page .sub-tab-list-style ul li a{display:table; padding: 0 3.5rem; width:100%; height: auto; min-height:3.7rem; border-radius: 1.75rem; box-sizing: border-box;}
.faq-page .sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:var(--color-dark); font-size:1.5rem; line-height: 1.2; font-weight: 500; letter-spacing:-0.025em; text-align:center;}
.faq-page .sub-tab-list-style ul li.selected{z-index:1;}
.faq-page .sub-tab-list-style ul li.selected a{background-color: var(--main-color);}
.faq-page .sub-tab-list-style ul li.selected a em{font-weight: 400; color:#fff;}

/* 리스트 */
.faq-list-con2 .faq-item{overflow:hidden; margin-bottom:1rem; border:2px solid var(--color-gray-300); border-radius:1rem; background-color:var(--color-gray-300); transition:border-color 0.3s; box-sizing: border-box;}
.faq-list-con2 .faq-item dt,
.faq-list-con2 .faq-item dd{padding: 3rem 10.5rem;}
.faq-list-con2 .faq-item dt{position:relative; cursor:pointer; transition:background-color 0.3s;}
.faq-list-con2 .faq-item dt .faq-title{display:block; color:#333; font-size:1.8rem; font-weight:500; letter-spacing: -0.025em; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top;}
.faq-list-con2 .faq-item dt .arrow{position:absolute; top:3rem; right:4.5rem;}
.faq-list-con2 .faq-item dt i{font-size:2.2rem; line-height:1.5; color:var(--color-dark);}
.faq-list-con2 .faq-item dd{display:none; position:relative; background:var(--color-light);}
.faq-list-con2 .faq-item dd .answer-con .editor{font-size:1.6rem; line-height: 1.68; letter-spacing:-0.025em; font-weight: 500; color:var(--color-dark);}
.faq-list-con2 .faq-item dt .question-icon,
.faq-list-con2 .faq-item dd .answer-icon{position:absolute; top:3.8rem; left:4.5rem; font-size:1.6rem; font-weight:500; color:var(--color-dark);}
/* Open */
.faq-list-con2 .faq-item.open{border-color: var(--main-color);}
.faq-list-con2 .faq-item.open dt{background-color: var(--main-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 .question-icon,
.faq-list-con2 .faq-item.open dt i{color:#fff;}
.faq-list-con2 .faq-item.open dt .arrow i{margin-top:-2px; transform:rotate(-180deg);}

/* paging */
.faq-page .paging-wrap {padding-top: 3rem; border-top: none;}

@media all and ( max-width:800px ){
	/* 탭 */
	.faq-page .bbs-top-list-box {margin-bottom: 3rem;}
	.faq-page .sub-tab-wrapper-style{position:relative; margin-bottom:0; height:auto; max-width: none; width: 100%;}
	.faq-page .sub-drop-open-btn-style{display:block; padding:0 var(--area-padding); padding-right: calc(var(--area-padding) + 3rem); height:50px; line-height:50px; font-size:1.6rem; background-color:var(--main-color); box-sizing:border-box; border-radius: 0.8rem;}
	.faq-page .sub-drop-open-btn-style .arrow{position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; margin-top: -10px; font-size: 20px; color: var(--color-light);}
	.faq-page .sub-tab-list-style ul{display:none; align-items: initial; justify-content: initial; width: 100%; text-align: left; background-color:var(--color-light); border-radius: 0.8rem; padding: 0; overflow: hidden; border:1px solid var(--main-color); box-sizing: border-box;}
	.faq-page .sub-tab-list-style ul li{display:block; width:100%; height: auto; background-color:#fff; box-sizing: border-box; border-top:1px solid #eee;}
	.faq-page .sub-tab-list-style ul li:first-child{border-top:0;}
	.faq-page .sub-tab-list-style ul li a{display: flex; align-items: center; padding:0 var(--area-padding); width:100%; height: 40px; min-height:auto; border-radius: 0; box-sizing: border-box;}
	.faq-page .sub-tab-list-style ul li a em{display:inline-block; color:#666; font-size:14px; line-height: 1.5; font-weight: 400; letter-spacing:-0.025em; text-align:left;}
	.faq-page .sub-tab-list-style ul li.selected{z-index:1;}
	.faq-page .sub-tab-list-style ul li.selected a{background-color: #fff;}
	.faq-page .sub-tab-list-style ul li.selected a em{font-weight: 500; color:var(--main-color);}
	
	/* 리스트 */
	.faq-list-con2 .faq-item{margin-bottom:1rem;}
	.faq-list-con2 .faq-item dt,
	.faq-list-con2 .faq-item dd{padding: 2.8rem 6rem;}
	.faq-list-con2 .faq-item dt .faq-title{font-size:1.8rem; line-height:1.5;}
	.faq-list-con2 .faq-item dt .arrow{top:2.8rem; right:2.5rem;}
	.faq-list-con2 .faq-item dt i{font-size:2.2rem; line-height:1.5;}
	.faq-list-con2 .faq-item dd .answer-con .editor{font-size:1.6rem; line-height: 1.68;}
	.faq-list-con2 .faq-item dt .question-icon,
	.faq-list-con2 .faq-item dd .answer-icon{top:3.3rem; left:2.5rem; font-size:1.6rem;}
	/* Open */
	.faq-list-con2 .faq-item.open dt{border-radius:5px 5px 0 0; }
	/* paging */
	.faq-page .paging-wrap {padding-top: 3rem; border-top: none;}
}

:root{
	--office-height: calc(100vh - 40px);
}

/* ****************** 11 Installer Locator :: 01 Installer Locator ********************** */
.locator-page{position: relative; padding: 0 2.86% 9rem;}
.locator-page-cover{position: absolute; top: -9rem; left: 0; width: 100%; height: calc(50vh + 9rem); background: transparent; z-index: 99;}

.office-con {margin-top: 4rem; display: flex; flex-wrap:wrap; justify-content: space-between;}

/* 왼쪽  */
.office-con-left{padding: 4.5rem 3.5rem 0; width: 47rem; height: var(--office-height); background-color: var(--color-gray-200); border-radius: 1.5rem; box-sizing: border-box; overflow: hidden; position: relative;}
.office-search-form {position: relative;}
.office-search-form + .office-search-form{height: 8rem; /* margin-top: 2rem; */}
.office-search-form .tit{font-size: 3.4rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; color: var(--color-dark); margin-bottom: 1rem;}

/* 텍스트+필터버튼 */
.text-filter-group{position: relative; display: flex; /* flex-wrap:wrap; */ align-items: center; justify-content: space-between;}
.text-filter-group .txt{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--color-dark);}
.text-filter-group .txt b{font-weight: 700; color: var(--main-color);}
.text-filter-group .text-filter-open-btn{width: 11.6rem; height: 3.6rem; font-size: 1.5rem; font-weight: 500; color: var(--color-dark); padding: 0 1.5rem 0 2rem; border: 1px solid var(--color-dark); background-color: #fff; border-radius: 3.6rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
.text-filter-group .text-filter-open-btn i{font-size: 1.7rem;}
.text-filter-group .text-filter-open-btn.open{background-color: var(--color-dark); color: #fff;}
.text-filter-group .text-filter-open-btn.open i{transform: rotate(180deg);}
/* 필터영역 */
.text-filter-box{position: absolute; left: -3.5rem; right: -3.5rem; /* top: calc(100% + 0.5rem); */ top: 0; padding: 0 3.5rem 3rem; background-color: transparent; box-sizing: border-box; z-index: 11;}
.text-filter-box.open{background-color: var(--color-gray-200); border-radius: 0 0 1.5rem 1.5rem; box-shadow: 0rem 3rem 2.7rem -1rem rgba(0,0,0,0.15);}
.text-filter-box-list{display: none;}
.text-filter-box-item{margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dadada;}
.text-filter-box-item:last-child{border-top: 0; margin-top: 1.5rem;}
.text-filter-box-tit{margin-bottom: 1rem; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; color: var(--color-dark);}
/* 필터영역 :: 체크박스 */
.text-filter-checkbox{margin: -2px 0; display: flex; flex-wrap:wrap;}
.text-filter-checkbox .checkbox-item{margin: 2px 2rem 2px 0;}
.text-filter-checkbox .checkbox-item{display:inline-block; vertical-align:middle;}
.text-filter-checkbox .checkbox-item input[type="checkbox"]{display:none;}
.text-filter-checkbox .checkbox-item label{display:inline-block; position:relative; padding-left:2.5rem; color:var(--color-dark); font-size:1.4rem; letter-spacing:-0.015em; line-height:20px; font-weight: 500;}
.text-filter-checkbox .checkbox-item label::before{font-family: 'xeicon'; content: "\ea0e"; position:absolute; top:0px; left:0px; font-size:1.8rem; color:#ccc;}
.text-filter-checkbox .checkbox-item input[type="checkbox"]:checked + label::before{color:var(--main-color); content: "\e92d";}

/* 인풋+버튼 */
.input-button-group{width: 100%; height: 5.4rem; position: relative;}
.input-button-group input{padding: 0 6rem 0 3rem; width: 100%; height: 100%; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.025em; color: #fff; appearance: none; box-sizing: border-box; border: 2px solid var(--main-color); outline: none; background-color: var(--main-color); border-radius: 1rem !important; transition: background-color 0.3s, color 0.3s;}
.input-button-group input::placeholder{color: #fff;}
.input-button-group .btn{position: absolute; top: 0.5rem; right: 0.5rem; width: 4.4rem; height: 4.4rem; font-size: 1.6rem; color: var(--main-color); background-color: #fff; border-radius: 0.6rem; transition: background-color 0.3s, color 0.3s;}
.input-button-group .btn i{position: relative; top: 0.2rem;}
.input-button-group input:focus{background-color: #fff; color: var(--color-dark);}
.input-button-group input:focus::placeholder{color: var(--color-dark);}
.input-button-group input:focus + .btn,
.input-button-group input:focus + .autocomplete-list + .btn{background-color: var(--main-color); color: #fff;}
.autocomplete-wrap {position: relative;}
.autocomplete-list {position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: white; border: 2px solid #ccc; max-height: 20rem; overflow-y: auto; padding: 0; margin: 0.5rem 0 0; border-radius: 0.8rem; box-sizing: border-box;}
.autocomplete-list li {padding: 1.2rem 3rem; font-size: 1.6rem; line-height: 1.3; font-weight: 400; letter-spacing: -0.025em; color: var(--color-dark); cursor: pointer; transition: background-color 0.3s;}
.autocomplete-list li:hover,
.autocomplete-list li.active {background-color: #f0f0f0;}

/* 초기화버튼 */
.office-search-reset-btn{position: absolute; bottom: -4.5rem; left: 50%; margin-left: -5rem; width: 10rem; height: 3rem; font-size: 1.4rem; font-weight: 600; color: var(--color-dark); background-color: #fff; border: 1px solid #CFCFCF; border-radius: 1.5rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background-color 0.3s, border-color 0.3s, color 0.3s, visibility 0.3s 0.4s, opacity 0.3s 0.4s;}
.office-search-reset-btn i{margin-right: 0.5rem;}
.office-search-reset-btn:hover{background-color: var(--color-dark); border-color: var(--color-dark); color: #fff;}
.office-search-reset-btn.open{visibility: hidden; opacity: 0; transition: background-color 0.3s, border-color 0.3s, color 0.3s, visibility 0.1s 0s, opacity 0.1s 0s;}

/* 리스트 */
.office-search-result-box{margin-top: 3rem; padding-top: 2.5rem; height: calc(var(--office-height) - 4.5rem - 22.6rem); border-top: 1px solid #d9d9d9; position: relative;}
.office-search-result-box .mCSB_scrollTools {right: -2.6rem !important; opacity: 1;}
.office-search-result-box .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: #232323 !important; width: 0.7rem;}
.office-search-result-box .mCSB_scrollTools .mCSB_draggerRail {width: 0.7rem; background-color: #dadada !important;}
.office-search-result-list {}
.office-search-result-item{position: relative;}
.office-search-result-item + .office-search-result-item{margin-top: 1rem;}
.office-search-result-inner {display: block; width: 100%; background-color: #fff; border-radius: 1.5rem; border: 2px solid transparent; box-shadow: 1.9rem 1.9rem 5.7rem -1rem rgba(0,0,0,0.15); box-sizing: border-box; transition: border-color 0.3s;}
.office-search-result-item.on .office-search-result-inner,
.office-search-result-item:hover .office-search-result-inner {border-color: var(--color-dark);}

.office-search-result-inner-top{padding: 3rem; display: block; box-sizing: border-box;}
.office-search-result-inner-top .img{}
.office-search-result-inner-top .img img{max-height: 2rem;}
.office-search-result-inner-top .tit{margin-top: 1rem; font-size: 2.2rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; color: var(--color-dark);}
.office-search-result-inner-top .type{margin-top: 1rem; font-size: 1.3rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.025em; color: #2fc911;}
.type02 .office-search-result-inner-top .type{color: #bb54d3;}
.type03 .office-search-result-inner-top .type{color: #277cd1;}
.type04 .office-search-result-inner-top .type{color: #e88419;}
.office-search-result-inner-top .address{margin-top: 1rem; font-size: 1.4rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; color: var(--color-dark);}
.office-search-result-inner-top .info-list{margin-top: 2rem; display: flex; justify-content: space-between;}
.office-search-result-inner-top .info-list li{position: relative; width: 49.09%; font-size: 1.2rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; color: rgba(0,0,0,0.6);}
.office-search-result-inner-top .info-list li div{padding: 0.5rem 1rem 0.5rem 1.5rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.015em; color: rgba(0,0,0,0.6); width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; background-color: #f5f5f5; box-sizing: border-box; border-radius: 1.4rem; word-break: break-word; transition: opacity 0.3s;}
.office-search-result-inner-top .info-list li .no-hover{}
.office-search-result-inner-top .info-list li .hover{position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; background-color: var(--color-dark); color: #fff;}
.office-search-result-inner-top .info-list li:hover .no-hover{}
.office-search-result-inner-top .info-list li:hover .hover{opacity: 1; visibility: visible;}
.office-search-result-inner-top .use-list{margin-top: 2rem;}
.office-search-result-inner-top .use-list h5{font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; color: var(--color-dark);}
.office-search-result-inner-top .use-list ul{margin-top: 0.2rem; display: flex; flex-wrap:wrap;}
.office-search-result-inner-top .use-list ul li{margin-right: 1rem; margin-top: 0.5rem; position: relative; padding-left: 1.2rem; font-size: 1.2rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: rgba(0,0,0,0.6); display: inline-block; word-break: break-word;}
.office-search-result-inner-top .use-list ul li:before{position: absolute; top: 0; left: 0; content: '#';}
.office-search-result-inner-top .use-list ul li a i{margin-left: 0.5rem; font-size: 1.3rem; position: relative; top: 0.1rem;}
.office-search-result-inner-top .use-list ul li a:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(0,0,0,0.6); content: '';}

.office-search-result-inner-bottom{display: flex; flex-wrap:wrap; border-top: 1px solid #e5e5e5;}
.office-search-result-inner-bottom  .visit-btn.disabled,
.office-search-result-inner-bottom a{padding: 0 2.5rem 0 3rem; width: calc(50% - 0.5rem); height: 5.8rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; color: var(--color-dark); display: flex; align-items: center; box-sizing: border-box; transition: color 0.3s;}
.office-search-result-inner-bottom  .visit-btn.disabled span,
.office-search-result-inner-bottom a span{margin-left: 0.7rem; font-size: 1.2rem; color: rgba(0,0,0,0.6); transition: color 0.3s;}
.office-search-result-inner-bottom a +  .visit-btn.disabled,
.office-search-result-inner-bottom a + a{width: calc(50% + 0.5rem); padding: 0 1.5rem 0 2rem; border-left: 1px solid #e5e5e5; justify-content: space-between;}
.office-search-result-inner-bottom .visit-btn.disabled i,
.office-search-result-inner-bottom a i{font-size: 1.8rem;}
.office-search-result-inner-bottom a:hover span,
.office-search-result-inner-bottom a:hover{color: var(--main-color);}

.office-search-result-inner-bottom a.sns-btn.none,
.office-search-result-inner-bottom .visit-btn.disabled{color: #bbb; cursor: auto;}

.office-search-result-inner-bottom a.facebook,
.office-search-result-inner-bottom a.instagram,
.office-search-result-inner-bottom a.youtube,
.office-search-result-inner-bottom a.none{padding-right: 4.5rem; position: relative;}
.office-search-result-inner-bottom a.facebook:after,
.office-search-result-inner-bottom a.instagram:after,
.office-search-result-inner-bottom a.youtube:after,
.office-search-result-inner-bottom a.none:after{position: absolute; top: 50%; margin-top: -1rem; right: 2.5rem; font-size: 1.8rem; font-family: xeicon;}
.office-search-result-inner-bottom a.facebook:after{content: "\ebd5";}
.office-search-result-inner-bottom a.instagram:after{content: "\ebe9";}
.office-search-result-inner-bottom a.youtube:after{content: "\ec32";}
.office-search-result-inner-bottom a.none:after{content: "\e980";}

.office-search-result-list .no-result-txt{padding-top: 10rem; font-size: 1.65rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.025em; color: var(--color-dark); text-align: center;}

/* 오른쪽 */
.office-con-right{width: calc(100% - 47rem); padding-left: 2rem; box-sizing: border-box;}

/* ****************
 * 공통
**************** */
#map {width: 100%; height: var(--office-height); border-radius: 1.5rem;}
.pac-container {display: none !important;}
@keyframes bounce-in {
  0% {
    transform: scale(0.5) translateY(50px);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) translateY(-10px);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) translateY(5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.property {
  transform-origin:center; animation: bounce-in 0.6s ease;
}

/* ****************
 * 닫혀있을때 스타일
**************** */
.property {position: relative; width: auto; height: auto;}
.property .icon {width: 6rem; height: 6rem; /* width: 8rem; height: 8rem; background-color: #fff; border: 2px solid #2fc911; border-radius: 100%; */ box-sizing: border-box; position: relative; display: block; transition: box-shadow 0.3s ease-out;}
/* .property .icon.type02{border-color: #bb54d3;}
.property .icon.type03{border-color: #277cd1;}
.property .icon.type04{border-color: #e88419;} */
.property .icon img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: all 0.3s ease-out;}
.property .icon .marker {height: 4.8rem; /* visibility: visible; opacity: 1; */}
/* .property .icon .symbol {height: 4rem; visibility: hidden; opacity: 0;} */
.property .details {visibility: hidden; opacity: 0; transition: all 0.3s ease-out;}

/* ****************
 * 열렸을때 스타일
**************** */
.property.highlight {width: auto; height: auto;}
.property.highlight .details {visibility: visible; opacity: 1;}
/* .property.highlight .icon{box-shadow: 1.3rem 1.3rem 2.9rem -0.65rem rgba(0,0,0,0.25);}
.property.highlight .icon .marker {visibility: hidden; opacity: 0;}
.property.highlight .icon .symbol{visibility: visible; opacity: 1;} */

/* 내부 정보 */
.property .details {position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); /* visibility: hidden; opacity: 0;  */    min-width: 20rem; padding: 1.5rem 2.5rem; display: flex; flex-direction: column; flex: 1; background-color: #fff; border-radius: 0.8rem; transition: all 0.3s ease-out; box-sizing: border-box; text-align: center; border: 2px solid #2fc911;}
.property .name{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 600; color: var(--color-dark); white-space: nowrap; font-family:var(--font-family1);}
.property .type {margin-top: 0.2rem; font-size: 1.1rem;  line-height: 1.3; letter-spacing: -0.025em; font-weight: 500; color: #2fc911; white-space: nowrap; font-family:var(--font-family1);}
.property .type02.details{border-color: #bb54d3;}
.property .type02.details .type{color: #bb54d3;}
.property .type03.details{border-color: #277cd1;}
.property .type03.details .type{color: #277cd1;}
.property .type04.details{border-color: #e88419;}
.property .type04.details .type{color: #e88419;}

@media all and (max-width:1380px){
	.locator-page{padding: 0 var(--area-padding) 9rem;}
}
@media all and (max-width:1280px){
	:root{
		--office-height: calc(100vh - var(--header-height));
	}
	
	.locator-page-cover{display: none;}
	.office-con {margin-top: 2rem;}
	/* 왼쪽  */
	.office-con-left{padding: 4.5rem 3.5rem 0; width: 40rem; /* height: 88rem; */}
	.office-search-form .tit {font-size: 3rem;}
	/* 오른쪽 */
	.office-con-right{width: calc(100% - 40rem); padding-left: 2rem;}
	
	/* ****************
	 * 공통
	**************** */
	#map {width: 100%; /* height: 88rem; */ border-radius: 1.5rem;}
}
@media all and (max-width:800px){
	.locator-page{padding: 0 var(--area-padding) var(--sub-layout-padding);}
	.office-con {margin-top: 2rem;}

	/* 왼쪽  */
	.office-con-left{padding: 3rem 2.5rem 0; border-radius: 1.5rem; width: 100%; height: 60rem; margin-bottom: 1rem;}
	.office-search-form + .office-search-form{height: 8rem; /* margin-top: 2rem; */}
	.office-search-form .tit{font-size: 3.4rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.025em; color: var(--color-dark); margin-bottom: 1rem;}

	/* 텍스트+필터버튼 */
	.text-filter-group{position: relative; display: flex; /* flex-wrap:wrap; */ align-items: center; justify-content: space-between;}
	.text-filter-group .txt{font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--color-dark);}
	.text-filter-group .txt b{font-weight: 700; color: var(--main-color);}
	.text-filter-group .text-filter-open-btn{width: 11.6rem; height: 3.6rem; font-size: 1.5rem; font-weight: 500; color: var(--color-dark); padding: 0 1.5rem 0 2rem; border: 1px solid var(--color-dark); background-color: #fff; border-radius: 3.6rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
	.text-filter-group .text-filter-open-btn i{font-size: 1.7rem;}
	/* 필터영역 */
	.text-filter-box{left: -3.5rem; right: -3.5rem; /* top: calc(100% + 0.5rem); */ top: 0; padding: 0 3.5rem 3rem;}
	.text-filter-box-item{margin-top: 1rem; padding-top: 1rem;}
	.text-filter-box-item:last-child{margin-top: 1rem;}
	.text-filter-box-tit{margin-bottom: 1rem; font-size: 1.6rem; line-height: 1.3;}
	/* 필터영역 :: 체크박스 */
	.text-filter-checkbox{margin: -2px 0;}
	.text-filter-checkbox .checkbox-item{margin: 2px 2rem 2px 0;}
	.text-filter-checkbox .checkbox-item label{padding-left:2.5rem; font-size:1.4rem; line-height:20px;}
	.text-filter-checkbox .checkbox-item label::before{font-size:1.8rem;}

	/* 인풋+버튼 */
	.input-button-group{width: 100%; height: 5.4rem;}
	.input-button-group input{padding: 0 6rem 0 2rem; font-size: 1.6rem; border-radius: 1rem !important;}
	.input-button-group .btn{top: 0.5rem; right: 0.5rem; width: 4.4rem; height: 4.4rem; font-size: 1.6rem; border-radius: 0.6rem;}
	.input-button-group .btn i{top: 0.2rem;}

	/* 초기화버튼 */
	.office-search-reset-btn{bottom: -4.5rem; margin-left: -5rem; width: 10rem; height: 3rem; font-size: 1.4rem;}
	.office-search-reset-btn i{margin-right: 0.5rem;}

	/* 리스트 */
	.office-search-result-box{margin-top: 3rem; padding-top: 3rem; height: calc(60rem - 4rem - 22.1rem);}
	.office-search-result-box .mCSB_scrollTools {right: -2.2rem !important;}
	.office-search-result-box .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 0.7rem;}
	.office-search-result-box .mCSB_scrollTools .mCSB_draggerRail {width: 0.7rem;}
	.office-search-result-item + .office-search-result-item{margin-top: 1rem;}
	.office-search-result-inner {border-radius: 1.5rem;}

	.office-search-result-inner-top{padding: 2.5rem;}
	.office-search-result-inner-top .tit{font-size: 2.2rem; line-height: 1.3;}
	.office-search-result-inner-top .type{margin-top: 1rem; font-size: 1.3rem; line-height: 1.5;}
	.office-search-result-inner-top .address{margin-top: 1rem; font-size: 1.4rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; color: var(--color-dark);}
	.office-search-result-inner-top .info-list{margin-top: 1.5rem;}
	.office-search-result-inner-top .info-list li{width: 49.09%; font-size: 1.2rem; line-height: 1.5;}
	.office-search-result-inner-top .info-list li div{padding: 0.5rem 1rem 0.5rem 1.5rem; font-size: 1.2rem;}
	.office-search-result-inner-top .use-list{margin-top: 1.5rem;}
	.office-search-result-inner-top .use-list h5{font-size: 1.4rem; line-height: 1.3;}
	.office-search-result-inner-top .use-list ul{margin-top: 0.2rem;}
	.office-search-result-inner-top .use-list ul li{margin-right: 1rem; margin-top: 0.5rem; padding-left: 1.2rem; font-size: 1.2rem; line-height: 1.3;}
	.office-search-result-inner-top .use-list ul li a i{margin-left: 0.5rem; font-size: 1.3rem; top: 0.1rem;}

	.office-search-result-inner-bottom  .visit-btn.disabled,
	.office-search-result-inner-bottom a{padding: 0 2.5rem 0 3rem; width: calc(50% - 0.5rem); height: 5.8rem; font-size: 1.5rem;}
	.office-search-result-inner-bottom  .visit-btn.disabled span,
	.office-search-result-inner-bottom a span{position: relative; top: 0.1rem; margin-left: 0.7rem; font-size: 1.2rem;}
	.office-search-result-inner-bottom a +  .visit-btn.disabled,
	.office-search-result-inner-bottom a + a{width: calc(50% + 0.5rem); padding: 0 1.5rem 0 2rem;}
	.office-search-result-inner-bottom .visit-btn.disabled i,
	.office-search-result-inner-bottom a i{font-size: 1.8rem;}

	.office-search-result-inner-bottom a.facebook,
	.office-search-result-inner-bottom a.instagram,
	.office-search-result-inner-bottom a.youtube,
	.office-search-result-inner-bottom a.none{padding-right: 4.5rem;}
	.office-search-result-inner-bottom a.facebook:after,
	.office-search-result-inner-bottom a.instagram:after,
	.office-search-result-inner-bottom a.youtube:after,
	.office-search-result-inner-bottom a.none:after{margin-top: -1rem; right: 2rem; font-size: 1.8rem;}

	.office-search-result-list .no-result-txt{padding-top: 10rem; font-size: 1.65rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.025em; color: var(--color-dark); text-align: center;}

	/* 오른쪽 */
	.office-con-right{width: 100%; padding-left: 0; box-sizing: border-box;}

	/* ****************
	 * 공통
	**************** */
	#map {width: 100%; height: 60rem; border-radius: 1.5rem;}

	/* ****************
	 * 닫혀있을때 스타일
	**************** */
	.property .icon {width: 8rem; height: 8rem;}
	.property .icon .marker {height: 4.8rem;}
	.property .icon .symbol {height: 4rem;}

	/* ****************
	 * 열렸을때 스타일
	**************** */
	/* 내부 정보 */
	.property .details {bottom: calc(100% + 5px); min-width: 20rem; padding: 1.5rem; border-radius: 0.8rem;}
	.property .name{font-size: 1.6rem; line-height: 1.3;}
	.property .type {margin-top: 0.2rem; font-size: 1.2rem;  line-height: 1.3;}
}