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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1280px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;/* margin-right:calc(-1* var(--area-padding)); */ cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; /* margin-right:var(--area-padding);  */}
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1280px){
	.sub-tab-list-style .area{padding:0}
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:var(--font-color2); }
	.sub-drop-open-btn-style .arrow{color:var(--font-color2); position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:var(--font-color2); border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected{background-color:transparent; border-color: #eee;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* -------- 공통 :: 좌측 탭 + 우측 컨텐츠 레이아웃 -------- */
@media all and (max-width:1280px){
	.sticky-style {top: calc(var(--header-height) + 3rem);}
}

@media all and (max-width:800px){
	.cm-flex-content {display: block;}
	.cm-content-txt-box {width: 100%; padding-right: 0;}
	.cm-right-con-wrap {width: 100%; margin-top: 4rem;}

	.sticky-style {top: var(--header-height);}
	.custom-tab-list-style {width: 100%; padding-right: 0;}
	.custom-tab-list-style .sub-tab-list-style {max-width: none;}
	.custom-tab-list-style .sub-drop-open-btn-style {background-color: var(--main-color);}
	.custom-tab-list-style ul {max-width: none; padding: 0;}
	.custom-tab-list-style ul li {border-top: 1px solid #eee !important; border-radius: 0;}
	.custom-tab-list-style ul li a em {color: #222;}

	.custom-tab-list-style ul li.selected a em {color: var(--main-color);}

	.move-line-wrap {display: none;}
}

/* ******************  스마트키퍼 프로 :: 공통 ********************** */
@media all and (max-width:800px){
	.competitor-list-box {grid-template-columns: repeat(1, 1fr); grid-gap: 3rem 0;}
	.competitor-list-box .competitor-list {padding: 3rem; border-radius: 2rem;}
}

/* ******************  스마트키퍼 프로 :: 스마트키퍼 프로 소개 ********************** */
@media all and (max-width:800px){
	.pro-intro-content {padding-bottom: 7rem;}
	.pro-intro-list-con {margin-top: 4rem;}
	.pro-intro-list-con .pro-intro-list {display: block; padding: 3rem 0;}
	.pro-intro-list-con .pro-intro-list .img-box {width: 100%; max-width: 620px;}
	.pro-intro-list-con .pro-intro-list .txt-box {width: 100%; padding-left: 0; margin-top: 4rem;}
	.pro-intro-list-con .pro-intro-list .txt-box h4 {padding-top: 2rem; font-size: 3rem;}
}

/* ******************  스마트키퍼 프로 :: 도입 시 장점 6가지 ********************** */
/* @media all and (max-width:1650px){
	.commentary-txt-box p {padding: 2rem;}
} */

@media all and (max-width:1280px){
	/***** point 06 *****/
	.merit-safe-list-box01 .merit-safe-list {padding: 2rem 1rem 2rem 1rem;}
	.merit-safe-list-box01 .merit-safe-list p {min-height: 10rem;}
}

@media all and (max-width:800px){
	/***** 공통 *****/
	.cm-flex-content {padding-bottom: 12rem;}
	.merit-tit-box {padding-right: 0; width: 100%;}
	.merit-tit-box p {font-size: 3rem;}

	/***** point 02 *****/
	.merit-exam-list-box .merit-exam-list h5 {height: 6rem;}

	/***** point 03 *****/
	.commentary-txt-box .commentary {left: 0;}
	.commentary-txt-box .commentary::before {left: 10.5rem;}
	.merit-standard-list-box .merit-standard-list {flex-direction: column-reverse; align-items: flex-start;}
	.merit-standard-list-box .merit-standard-list .txt-box {width: 100%;}
	.merit-standard-list-box .merit-standard-list .img-box {display: block; width: 100%; margin-bottom: 3rem;}

	/***** point 04 *****/
	.merit-firm-list-box .merit-firm-list .img-box {margin-top: 3rem;}
	.merit-firm-list-box .merit-cm-txt02 {min-height: auto;}

	/***** point 05 *****/
	.merit-standard-list-box .merit-standard-list {padding: 3rem 0;}

	/***** point 06 *****/
	.merit-safe-container {padding-top: 3rem;}
	.merit-safe-list-box01 {grid-template-columns: repeat(2, 1fr);}
}

@media all and (max-width:640px){
	/***** point 02 *****/
	.merit-exam-list-box {grid-template-columns: repeat(1, 1fr);}

	/***** point 04 *****/
	.merit-firm-list-box {grid-template-columns: repeat(1, 1fr);}
}

@media all and (max-width:480px){
	/***** point 06 *****/
	.merit-safe-container:first-of-type {margin-bottom: 7rem;}
	.merit-safe-list-box01, .merit-safe-list-box02 {grid-template-columns: repeat(1, 1fr);}
	.merit-safe-list-box01 .merit-safe-list p {min-height: auto; padding-top: 2rem;}
}

/* ******************  스마트키퍼 프로 :: 경쟁사 비교 ********************** */
@media all and (max-width:1280px){
	.competitor-wrap.custom-scrollbar-wrapper .cm-scroll-drag-guide {margin-bottom: 5rem;}
	.competitor-wrap.custom-scrollbar-wrapper .scroll-object{max-width: none; width:1720px;}
	.competitor-wrap.custom-scrollbar-wrapper .scroll-object-box {margin-right: var(--area-padding);}
	.competitor-wrap.custom-scrollbar-wrapper .mCSB_scrollTools .mCSB_draggerContainer {top: 7rem;}
}

@media all and (max-width:800px){
	.competitor-wrap {margin-bottom: 11rem;}
	.competitor-list-con .competitor-list-tit {font-size: 3rem;}
	.competitor-list-con > .txt-box {margin-top: 4rem;}
}

/* ******************  스마트키퍼 프로 :: 구매 방법 안내 ********************** */
@media all and (max-width:1280px){
	.store-link-list-box .store-link-list .buy-store-txt {font-size: 2rem;}
	.buy-contact-con {display: block;}
	.buy-contact-con .contact-list-box {margin-top: 2rem; gap: 0; justify-content: space-between;}
}

@media all and (max-width:800px){
	.buy-content {padding: 3rem 0 5rem 0;}
	.buy-official-con {display: block; padding: 3rem 3rem 10rem 3rem;}
	.buy-official-con .official-logo-box {width: 100%; padding-top: 50%;}
	.buy-official-con .official-logo-box02 {right: 6%; bottom: 7%; width: 20%;}
	.buy-official-con .official-txt-box {margin-top: 3rem; padding-left: 0; width: 100%;}

	.store-link-list-box {grid-template-columns: repeat(2, 1fr);}
	.store-link-list-box .store-link-list .buy-store-txt {padding: 2rem 0 1rem 0;}

	.buy-contact-con {margin-top: 4.5rem; padding: 3rem;}
	.buy-content .buy-con-tit {font-size: 2.2rem;}
	.buy-contact-con .contact-list-box li {font-size: 1.8rem;}
	.buy-contact-con .contact-list-box {flex-direction: column; gap: 1rem 0; justify-content: initial;}
}

@media all and (max-width:480px){
	.store-link-list-box {grid-template-columns: repeat(1, 1fr);}
}

/* ******************  스마트키퍼 프로 :: 구매 방법 안내 ********************** */
/* @media all and (max-width:1280px){
	.commentary-box-wrap {grid-template-columns: 1fr; grid-gap: 2rem 0; padding: 3rem 2.5rem; min-height: auto; max-height: none;}
	.buy-content .commentary-txt-box {padding: 0;}
	.buy-order-list-box .buy-order-list h5::before {left: -11.1%;}
	.buy-order-list-box .buy-order-list h5::after {left: -9.5%;}
	.buy-content .commentary-txt-box .commentary.mt-75 {margin-top: 4.8rem;}
	.buy-content .commentary-txt-box .commentary::before {left: 50%;}
	.buy-content .commentary-txt-box.pl-40 {padding-left: 0;}
	.buy-content .commentary-txt-box .order-num .inner {    z-index: 1;
    padding-top: 2.8rem !important;
    position: absolute;
    min-width: 43rem;
    top: 4.5rem;
    left: 50%;
    width: auto;
    left: 50%;
    transform: translateX(-50%); pointer-events: none;}
	.buy-content .commentary-txt-box .order-num .inner.m-top-20 {top: 2rem;}
	.buy-content .commentary-txt-box .commentary {min-width: auto; width: 100%; margin-top: 0; left: 0; transform: translateX(0); position: static;}
}

@media all and (max-width:800px){
	.buy-content {padding-bottom: 16rem;}
	.commentary-box-wrap {padding: 3rem 0;}
	.buy-content .commentary-txt-box .order-num .inner {min-width: 36rem;}
	.buy-content .commentary-txt-box .commentary li span {min-width: 5.5rem; padding-right: 1.5rem;}
	.buy-content .commentary-txt-box .commentary.m-left-173 {left: 173%}
	.buy-content .commentary-txt-box .commentary::before {left: 6.5rem;}
	.buy-ps-txt {width: 100%; padding-right: 0;}
	.buy-order-list-box .buy-order-list {padding-left: 7.8%;}
	.buy-order-list-box::before {left: 2%;}

	.buy-order-list-box .buy-order-list:first-child .commentary-txt-box .order-num .inner {left: 132%; min-width: 35rem;}
	.buy-order-list-box .buy-order-list:nth-child(2) .commentary-txt-box:first-child .order-num .inner {left: 48%; min-width: 17rem;}
	.buy-order-list-box .buy-order-list:nth-child(2) .commentary-txt-box:last-child .order-num .inner {left: 53%;}
	.buy-order-list-box .buy-order-list:nth-child(3) .commentary-txt-box .order-num .inner {left: 50%; min-width: 25rem;}
	.buy-order-list-box .buy-order-list:nth-child(5) .commentary-txt-box .order-num .inner {left: 46%; min-width: 17rem;}

	.buy-order-list-box .buy-order-list h5 {padding: 0 3rem; font-size: 2rem;}
	.buy-order-list-box .buy-order-list h5 span {font-size: 1.6rem;}
	.buy-order-list-box .buy-order-list h5::before {left: -8.6%;}
	.buy-order-list-box .buy-order-list h5::after {left: -6.8%;}
	.buy-content .commentary-txt-box .order-num {font-size: 1.5rem;}
	.buy-content .commentary-txt-box span {padding-left: 0.7rem; font-size: 1.5rem;}
}

@media all and (max-width:640px){
	.buy-order-list-box .buy-order-list h5::before {left: -9%;}
}

@media all and (max-width:480px){
	.buy-order-list-box .buy-order-list h5::before {left: -9.2%; width: 2.5rem; height: 2.5rem;}
	.buy-order-list-box .buy-order-list h5::after {left: -6.8%; width: 0.6rem; height: 0.6rem;}
} */

/* ******************  스마트키퍼 프로 :: 파트너사 현황 (영문) ********************** */
@media all and (max-width:1280px){
	.partners-info-list-box .partners-info-list {display: block;}
	.partners-info-list-box .partners-info-list > h4 {padding-right: 0; width: 100%;}
	.partners-info-list-box .inner-info-list-box {width: 100%; padding-top: 1rem;}
}

@media all and (max-width:800px){
	.partners-info-list-box .partners-info-list > h4 {font-size: 2rem;}
}

/* ******************  회사소개 :: 회사소개 ********************** */
@media all and (max-width:1280px){
	.intro-content .result-list-box {grid-template-columns: repeat(3, 1fr);}
}

@media all and (max-width:800px){
	#introContent .intro-content-scroll {max-height: none !important;}
	.intro-cm-txt-box h4 {font-size: 4rem;}
	#introVisual.visual-effect01 .main-txt-box, #introVisual.visual-effect01 .main-txt-box02, #introVisual.visual-effect02 .intro-video-box {opacity: 1; visibility: visible;}

	.intro-content .intro-section01 {min-height: auto; max-height: none; padding: 8rem 0 10rem 0;}
	.intro-content .intro-section01 .main-txt-box {min-height: auto;}
	.intro-content .intro-section01 .main-txt-box02 {padding: 5rem 0;}
	.intro-content .intro-section01 .intro-main-txt {font-size: 4rem;}
	.intro-content .intro-section01 .intro-main-txt02 {font-size: 2.2rem;}
	.intro-content .intro-section01 .intro-main-txt03 {font-size: 1.7rem; padding-top: 2rem;}
	.intro-content .intro-video-box {padding-top: 3rem;}

	
	.intro-result-con {padding: 5rem 0;}
	.intro-content .result-list-box {grid-template-columns: repeat(2, 1fr); margin-top: 3rem;}
	.intro-content .result-list-box .result-list {padding: 4rem 2rem;}
	.intro-content .result-list-box .result-list figure {height: auto;}
	.intro-content .result-list-box .result-list .txt-box {margin-top: 3rem;}
	.intro-content .result-list-box .result-list .txt-box .num {font-size: 4rem;}
	.intro-content .result-list-box .result-list img {max-width: 60%;}

	.intro-display-con {display:block; padding: 5rem 0 20rem 0;}
	.intro-display-con .intro-cm-txt-box {position: static; width: 100%; padding-right: 0;}
	.intro-content .display-list-wrap {width: 100%; margin-top: 4rem; gap: 0 2.5rem;}
	.intro-content .display-list-wrap .display-list-box {width: 100%; grid-gap: 2.5rem 0; transform: translate3d(0, 0, 0) !important;}
}

@media all and (max-width:480px){
	.intro-content .result-list-box {grid-template-columns: repeat(1, 1fr);}
	.intro-content .display-list-wrap .display-list-box.list02 {transform: translate(0, 0) !important;}

	.intro-display-con {padding: 5rem 0 15rem 0;}
	.intro-content .display-list-wrap {display: block;}
	.intro-content .display-list-wrap .display-list-box:first-child {margin-bottom: 2.5rem;}
}

/* ******************  회사소개 :: 수상 · 인증 ********************** */
@media all and (max-width:1280px){
	.certification-list-box {grid-gap: 4rem;}
}

@media all and (max-width:800px){
	.certification-content {padding-bottom: 6.5rem;}
	.certification-list-box {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; padding-bottom: 0;}
}

@media all and (max-width:480px){
	.certification-list-box {grid-template-columns: repeat(1, 1fr); grid-gap: 4rem 0;}
}

/* ******************  회사소개 :: 연혁 ********************** */
@media all and (max-width:800px){
	.history-content {padding-bottom: 10rem;}
	.history-content .history-tab-con {display: block; padding: 4.5rem 0;}
	.history-content .history-tit-box {width: 100%; padding-bottom: 2.5rem;}
	.history-content .history-list-box {width: 100%;}
}

/* ******************  회사소개 :: 오시는 길 ********************** */
@media all and (max-width:800px){
	.location-content {padding-bottom: 6.5rem;}
	.location-map-con .map-top-box {display: block;}
	.location-map-con .map-top-box .info-box {width: 100%; padding-right: 0;}
	.location-map-con .map-info-tit {font-size: 3rem;}
	.location-map-con .map-info-txt {font-size: 1.8rem;}
	.location-map-con .map-btn-box {width: 100%; justify-content: flex-start; margin-top: 2rem;}
	.location-map-con .map-bt-box iframe {border-radius: 1.5rem;}
}

/* ******************  제품소개 ********************** */
/* @media all and (max-width:1280px){
	.video-cover-box .icon {width: 12rem; height: 12rem; }
	.video-cover-box .icon::before {width: 10rem; height: 10rem;}
} */

@media all and (max-width:800px){
	.product-content {padding-bottom: 10rem;}
	.product-tab-con .product-cm-content {display: block; margin-top: 5rem;}
	.product-tab-con .product-des-tit {font-size: 4rem;}
	.product-tab-con .product-info-wrap {width: 100%; padding-right: 0; margin-bottom: 5rem;}
	.product-tab-con .product-slide-wrap {width: 100%;}

	.product-content #fixedContentM1 {padding-bottom: 7rem;}
	.product-tab-con .product-info-wrap .des-box {padding-bottom: 2rem;}
	.product-tab-con .des-list-box {padding: 2rem 0;}
	.product-tab-con .product-des-btn {margin-top: 2.5rem; height: 5rem;}
	.product-tab-con .des-list-box .des-list strong {padding-right: 1.5rem;}

	.product-tab-con .product-cm-content .product-tit-wrap {width: 100%; padding-right: 0; margin-bottom: 2rem;}
	.product-tab-con .product-cm-content .product-tit-wrap h4 {font-size: 3rem;}
	.product-tab-con .product-cm-content .product-content-wrap {width: 100%;}

	.product-tab-con .features-list-box .features-list {display: block; padding: 3rem 0;}
	.product-tab-con .features-list-box .features-list .txt-box {width: 100%; padding-right: 0; margin-bottom: 2rem;}
	.product-tab-con .features-list-box .features-list .img-box {width: 100%;}

	.product-tab-con .applied-list-box .applied-list h5 {font-size: 2rem;}
	.twentytwenty-handle {width: 7rem !important; height: 3rem !important;}

	.video-cover-box .icon {width: 9rem; height: 9rem;}
	.video-cover-box .icon::before {width: 7rem; height: 7rem;}
	.video-cover-box .icon i {font-size: 3rem;}
	
	/* 260521 유지보수 :: ~를 사용해야 하는 이유 */
	.cm-product-why-use-box{padding: 5rem 0;}
	.cm-product-content-inner-tit{margin-bottom: 2rem;}
	.cm-product-content-inner-tit .tit{font-size: 2.5rem; line-height: 1.4em; padding-bottom: 1rem;}
	.cm-product-content-inner-tit .txt{font-size: 1.8rem; line-height: 1.94em;}
	/* // */
	/* 260521 유지보수 :: 제품 비교 */
	.cm-product-comparison-tbl-box{border-radius: 2rem;}
	.cm-product-comparison-tbl th,
	.cm-product-comparison-tbl td{padding: 3rem 1.5rem; font-size: 1.8rem; line-height: 1.3;}
	.cm-product-comparison-tbl .b-img{width: 12rem; height: 12rem; width: 9.6rem; height: 9.6rem;}
	.cm-product-comparison-tbl .s-img{width: 7.6rem; height: 7.6rem; width: 6rem; height: 6rem;}
	.cm-product-comparison-tbl .b-img + p,
	.cm-product-comparison-tbl .s-img + p{margin-top: 1rem;}
	/* // */
}

@media all and (max-width:800px){
	.product-content .data-list-box .data-list .img-box {min-height: 30rem;}
}

@media all and (max-width:480px){
	.product-content .data-list-box .data-list .img-box {min-height: auto; height: 30rem}
}

/* ******************  고객지원 :: 공지/소개 ********************** */
@media all and (max-width:800px){
	.notice-content {padding-bottom: 10rem;}
	.notice-content .main-news-list {max-width: none;}
	.notice-content .main-news-img {width: 40%;}
	.notice-content .main-news-txt {padding-left: 2rem; width: calc(60% - 2rem);}
}

/* ******************  고객지원 :: 공통 ********************** */
@media all and (max-width:800px){
	.data-list-box {grid-template-columns: repeat(2, 1fr);}
	/* .data-list-box .data-list .top-inner {padding: 3rem;} */
	.data-list-box .data-list .top-inner .txt-box {height: 9.5rem;}
	.data-list-box .data-list .txt-box p {padding-top: 2rem !important;}

	/* 팝업 */
	.manual-pop-inner {height: 25rem;}
}

@media all and (max-width:480px){
	.data-list-box {grid-template-columns: repeat(1, 1fr) !important;}
}

/* ******************  고객지원 :: 제안서 ********************** */
@media all and (max-width:800px){
	.proposal-list-box .proposal-list a {padding: 2rem;}
	.proposal-list-box .proposal-list a .proposal-txt {font-size: 2rem;}
	.proposal-list-box .proposal-list a .proposal-down-txt {width: 11rem; height: 4rem; font-size: 1.4rem;}
	.proposal-list-box .proposal-list a .proposal-down-txt i {font-size: 1.4rem; padding-right: 1rem;}
}

@media all and (max-width:480px){
	.proposal-list-box .proposal-list a {display: block;}
	.proposal-list-box .proposal-list a .proposal-txt {width: 100%; margin-bottom: 2rem;}
}

/* ******************  온라인 문의 ********************** */
@media all and (max-width:1280px){
	.online-content .input-list-box {grid-gap: 1.7rem 3rem;}
	.online-content select {max-width: 9rem; background-position: calc(100% - 10px) 50%;}
}

@media all and (max-width:800px){
	.online-content .radio-box {flex-wrap: wrap;}
	.online-content .input-list-box {grid-template-columns: repeat(1, 1fr);}
	.online-content .online-con-tit {width: 10rem; font-size: 2rem; padding-right: 1.5rem;}
	.online-content .input-list-box .online-input-list .input-box, .online-content .radio-box, .online-content .textarea-box {width: calc(100% - 11.5rem);}

	.online-content .online-btn {width: 20rem; height: 5rem; font-size: 1.8rem;}
	.online-content .online-btn i {font-size: 2rem;}
	.online-content .bbs-inquiry-agree-con .agree-txt, .online-content .bbs-inquiry-agree-con .agree-txt i {font-size: 2rem;}
}

@media all and (max-width:480px){
	.online-content .bbs-inquiry-agree-con {display: block; margin: 2.5rem 0 0 0 !important;}
	.online-content .bbs-inquiry-agree-con .agree-txt {text-align: center;}
	.online-content .online-btn {margin: 2rem auto 0;}
}