@charset "utf-8";

/* ******************  스마트키퍼 프로 ********************** */
/* -------- 스마트키퍼 프로 :: 스마트키퍼 프로와 에센셜의 비교 -------- */
.pro-top-txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; color: var(--font-color); line-height: 1.9em;}

.pro-comparison-wrap {padding: 5.5rem 0 13.8rem 0;}
.pro-comparison-con {position: relative; width: 100%; border: 3px solid rgba(0,0,0,0.1);border-radius: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.pro-comparison-con:before {position: absolute; content: ''; width: 42.5%; height: calc(100% + 6px); border-radius: 3rem; border: 0.6rem solid var(--main-color); background-color: var(--main-color); left: 15%; top: -3px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 0;} 
.pro-comparison-con:after {position: absolute; content: ''; width: calc(15% + 3px);  height: calc(100% + 6px); border-radius: 3rem 0 0 3rem; background: rgba(255,255,255,0.1); top: -3px; left: -3px; z-index: -1;}
.pro-comparison-tbl {position: relative; z-index: 1; width: 100%; text-align: center;}
.pro-comparison-tbl th {/* background: rgba(255,255,255,0.1); */ border-top: 1px solid rgba(0,0,0,0.1); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--font-color); line-height: 1.3em; padding: 2rem 1rem; box-sizing: border-box;}
.pro-comparison-tbl th.white {color: #fff;}
.pro-comparison-tbl td {padding: 3rem 4.5rem 2.5rem;/*  border-left: 1px solid rgba(255,255,255,0.1);  */border-top: 1px solid rgba(0,0,0,0.1); box-sizing: border-box;}
.pro-comparison-tbl .bb-0::before {display: none;}
.pro-comparison-tbl td .brand {font-size: 2.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--font-color); line-height: 1.28em;}
.pro-comparison-tbl td .brand.white {color: var(--font-color2);}
.pro-comparison-tbl td .txt {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: var(--font-color); line-height: 1.55em;}
/* .pro-comparison-tbl td.essential .txt {opacity: 0.6;} */
.pro-comparison-tbl td .key-img {width: 100%; max-width: 48rem; height: 12rem; border-radius: 6rem; margin: 2rem auto 0; overflow: hidden;}
.pro-comparison-tbl td.essential .key-img {margin: 3.7rem auto 0;}
.pro-comparison-tbl td .difference-box {text-align: left; border-radius: 3rem; padding: 3.5rem 4rem 6rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; background: rgba(245, 245, 245, 1); margin: 1rem 0;}
.pro-comparison-tbl td .difference-box .difference-txt01 {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: #000; line-height: 1.85em;}
.pro-comparison-tbl td .difference-box .difference-txt02 {display: flex; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; color: #000; line-height: 1.625em;}
.pro-comparison-tbl td .difference-box .difference-txt02 em {display: inline-block; width: 1.7rem;}
.pro-comparison-tbl td .difference-box .difference-txt02 span {width: calc(100% - 1.7rem);}
.pro-comparison-tbl td .difference-box .difference-img {display: block; margin-top: 4rem; text-align: center;}
.pro-comparison-tbl td .difference-box .difference-img img {max-width: 100%;}
.pro-comparison-tbl tr:first-of-type th,
.pro-comparison-tbl tr:first-of-type td { border-top: 0;}

@media all and (max-width:1280px){
	.pro-comparison-tbl td {padding: 3rem 2.5rem 2.5rem;}
}
@media all and (max-width:800px){
	.pro-comparison-wrap {padding-bottom: 6rem;}
	.pro-comparison-con:before {border:0.3rem solid var(--main-color);}
	.pro-comparison-tbl th {font-size: 1.6rem;}
	.pro-comparison-tbl td {padding: 2rem 1.5rem ;}
	.pro-comparison-tbl tr:first-of-type th, 
	.pro-comparison-tbl tr:first-of-type td {padding-top: 3rem;}
	.pro-comparison-tbl td .key-img {height: 6rem;}
	.pro-comparison-tbl td .difference-box {padding: 2.5rem;}
}

/* -------- 스마트키퍼 프로 :: 제품 선택 가이드 -------- */
.pro-guide-con {margin-top:  8.5rem; padding-bottom: 15.8rem;}
.pro-guide-list {border-top: 3px solid var(--font-color);}
.pro-guide-list li {display: flex; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0 5rem 0 1.5rem; height: 10rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.pro-guide-list li .num {width: 11rem; text-align: center; font-size: 2.4rem; font-weight: 700; color: var(--main-color); line-height: 1.45em;}
.pro-guide-list li .tit {width: calc(100% - 31.3rem);}
.pro-guide-list li .tit strong {display: block; padding-right: 3rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--font-color); line-height: 1.45em;}
.pro-guide-list li .radio-box {display: flex; gap: 0 1.5rem; width: 20.3rem;}
.pro-guide-list li .radio-box .radio-item{display:inline-block; vertical-align:middle;}
.pro-guide-list li .radio-box .radio-item input[type="radio"]{display:none;}
.pro-guide-list li .radio-box .radio-item label{display:flex; align-items: center; justify-content: center; position:relative; width: 9rem; height: 4rem; color:var(--font-color); font-size:1.8rem; letter-spacing:-0.05em; line-height:1.83em; border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 2rem; transition: all 0.4s;}
.pro-guide-list li .radio-box .radio-item input[type="radio"]:checked + label {background-color: var(--main-color); border-color: var(--main-color); color: var(--font-color2);}
/* .pro-guide-list li .radio-box .radio-item label::before{font-family: 'xeicon'; content: "\e9c6"; position:absolute; top:0px; left:0px; font-size:1.8rem; color:#fff;} */
/* .pro-guide-list li .radio-box .radio-item input[type="radio"]:checked + label {color: #d21f15;} */
/* .pro-guide-list li .radio-box .radio-item input[type="radio"]:checked + label::before{content: "\e9c7"; color: #d21f15;} */
.pro-guide-btn {display: block; margin: 8rem auto 0; width: 100%; max-width: 25rem; height: 6rem; line-height: 6rem; text-align: center; background: var(--main-color); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; border-radius: 3rem;}
/* 팝업 */
.guide-pop-modal-content {position:relative; width:96%; max-width:850px; margin:20px auto; }
/* .guide-pop-modal-content .modal-close-btn{position:absolute; top:-5rem; right: 0; color:#fff; }
.guide-pop-modal-content .modal-close-btn i{font-size:3rem;}
.guide-pop-modal-content .modal-close-btn i:hover {color:#fff} */
.guide-pop-inner-box{/* padding:7rem 7rem 6rem;  */padding: 2rem 0 0 0; background-color:#fff; border-radius: 3rem; }
.guide-pop-inner .txt01 {font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.33em;}
.guide-pop-inner .txt01 strong {color: var(--main-color);}
.guide-pop-inner .txt02 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #666666; line-height: 1.5em; padding-top: 1.6rem;}
.guide-inquiry-con {padding: 4rem 0; border-top: 2px solid #000; border-bottom: 1px solid rgba(0,0,0,0.1); margin-top: 3.5rem;}
.guide-inquiry-con dl {display: flex; align-items: center;}
.guide-inquiry-con dl + dl {margin-top: 1rem;}
.guide-inquiry-con dl dt {width: 16.19%; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.6em; color: #000000;}
.guide-inquiry-con dl dd {width: 83.81%; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.6em; color: #666666;}
.guide-inquiry-con dl dd a {display: inline-flex; align-items: center; text-align: center; padding: 0.45rem 3rem; line-height: 1.5em; border: 2px solid #eeeeee; border-radius: 2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}
.guide-pop-btn {display: block; width: 100%; max-width: 23rem; height: 6rem; line-height: 6rem;  text-align: center; background: var(--main-color); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; border-radius: 3rem; margin: 3rem auto 0;}

@media all and (max-width:1280px){
	.pro-guide-list li {padding: 0; padding-right: 3rem;}
/* 	.pro-guide-list li .radio-box .radio-item {margin-right: 4rem;} */
}
@media all and (max-width:800px){
	.pro-guide-con {margin-top:  8.5rem; padding-bottom: 7rem;}
	.pro-guide-btn {margin-top: 4rem;}
	.pro-guide-list li {flex-wrap: wrap; height: auto; padding: 2rem 0;}
	.pro-guide-list li .num {width: 100%; text-align: left;}
	.pro-guide-list li .tit {width: 100%;}
	.pro-guide-list li .tit strong {padding: 1rem 0 1.5rem;}
	.pro-guide-list li .radio-box {width: 100%;}
	.pro-guide-list li .radio-box .radio-item label {width: 7.5rem; height: 3rem; font-size: 1.5rem;}
	/* 팝업 */
	/* .guide-pop-inner-box {    padding: 5rem 4rem 4rem;} */
	.guide-pop-inner .txt01 {font-size: 2.6rem;}
	.guide-inquiry-con {padding: 3rem 0;}
	.guide-inquiry-con dl {flex-wrap: wrap;}
	.guide-inquiry-con dl dt {width: 100%;}
	.guide-inquiry-con dl dd {width: 100%; padding-top: 0.5rem;}
}

/* -------- 스마트키퍼 프로 :: 주요 제품의 적용 사유 -------- */
.pro-application-wrap {padding: 3rem 0 13.5rem;}
.pro-application-con {}
.pro-application-tbl {width: 100%; border-top: 3px solid var(--font-color);}
.pro-application-tbl thead th {padding: 3rem 2rem; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--font-color); line-height: 1.3em; background:#f5f5f5 }
.pro-application-tbl thead th,
.pro-application-tbl tbody td {border-left: 1px solid rgba(0,0,0,0.1);; border-bottom: 1px solid rgba(0,0,0,0.1); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.pro-application-tbl thead th:first-of-type,
.pro-application-tbl tbody td:first-of-type {border-left: 0;}
.pro-application-tbl tbody td {padding: 2.5rem 4.8rem 5rem; min-height: 19rem;}
.pro-application-tbl tbody td.wide {padding: 3rem 4.8rem 7rem;}
.pro-application-tbl tbody td:first-of-type {padding: 3.2rem 4.8rem; text-align: center;}
.pro-application-tbl tbody td .img {display: block;}
.pro-application-tbl tbody td .img img {max-width: 50%;}
.pro-application-tbl tbody td strong {display: block; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--font-color); line-height: 1.59em; margin-top: 1rem;}
.pro-application-tbl tbody td .txt {font-size: 1.6rem; line-height: 1.625em; color: rgba(0,0,0,0.6); font-weight: 400; letter-spacing: -0.05em;}
.pro-application-tbl tbody td .txt.dash {position: relative; padding-left: 0.9rem;}
.pro-application-tbl tbody td .txt.dash:before {position: absolute; content: '-'; left: 0; top: 0;}

@media all and (max-width:800px){
  .pro-application-wrap {padding-bottom: 6rem;}
  .pro-application-tbl {width: 1000px !important;}
  .pro-application-tbl tbody td {padding: 3rem 3rem 4rem; min-height: 0;}
  .pro-application-tbl tbody td.wide {padding: 3rem 3rem 4rem;}
  .pro-application-tbl tbody td:first-of-type {padding: 3.5rem 2.5rem;}
}