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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.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:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* 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:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; 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:#fff; 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;}
	.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;}
}

/* ****************** 01.BB Haptic ********************** */
@media all and (max-width: 1580px){
	.intro-sub-con .txt-box { padding-left: 4rem;}
}
@media all and (max-width:800px){	
	.intro-top-con {padding-bottom: 30rem;}
	.intro-top-con .intro-txt-box .main-tit {font-size: 4.6rem; margin-bottom: 6rem;}
	.intro-top-con .intro-txt-box .main-tit span {font-size: 3.4rem; margin-top: 2rem;}
	.intro-top-con .intro-txt-box .sub-txt {flex-direction: column; align-items: flex-start; }
	.intro-top-con .intro-txt-box .sub-txt .txt-kr {font-size: 1.6rem}
	.intro-top-con .intro-txt-box .sub-txt .txt-en {font-size: 2.8rem}
	.intro-top-con .intro-txt-box .sub-txt i {padding: 2rem 0}
	.intro-sub-con .txt-box .num {font-size: 1.8rem; margin-bottom: 1.5rem;}
	.intro-sub-con .txt-box .big-tit {font-size: 4.6rem; margin-bottom: 1.5rem;}
	.intro-sub-con .txt-box .sm-tit {font-size: 2rem; margin-bottom: 1rem;}
	.intro-sub-con .txt-box .txt {font-size: 1.6rem; opacity: 0.8;}
	.intro-sub-con .txt-box {width: 100%; text-align: center; padding-left: 0; padding-top: 5rem;}
	.intro-sub-con.con02 .txt-box {padding-top: 2rem;}
	.intro-sub-con .img-box {width: 100%;}
	.intro-sub-con.con-center {margin-bottom: 6rem;}
	.intro-sub-con.con-center .img-box { margin-top: -70rem;}
	.intro-sub-con.con-reverse .txt-box {left:0;}
	.intro-sub-con.con-last .img-box img {padding-left: 0; max-width: 70%;}
	.intro-center-con-wrapper {padding: 0;}
	.intro-center-con .con-left {width: 100%;}
	.intro-center-con .con-right {width: 100%;}
	.intro-center-con .con-left .con-item:last-of-type {margin-bottom: 2.5rem;}
	.intro-center-con .con-item img {max-width: 7rem;}
	.intro-center-con .con-item .txt01 {font-size: 2rem;}
	.intro-center-con .con-right .con-item .txt02 {font-size: 1.6rem;}
	.intro-certificate {padding: 6rem 0;}
	.intro-certificate .intro-certificate-tit {font-size: 4rem;}
}

/* ****************** 02.Product :: All Category ********************** */
@media all and (max-width: 1580px){
	.product-category-list li a .img {width: 48rem; height: 48rem;  top: 48%;}
}
@media all and (max-width: 800px){
	.product-category-list li {width: 100%; max-width: 57rem; margin:0 auto;}
	.product-category-list li:first-child {margin-bottom: 12rem;}
	.product-category-list.list01 li:first-child {margin-top: 0;}
	.product-category-list.list02 li:last-child {margin-top: 0;}
	.product-category-list li a .list-item-inner {min-height: 50rem;}
	.product-category-list li a .list-item-inner .product-category-tit { font-size: 5rem; -webkit-text-stroke-width: 1px;}
	.product-category-list li a .list-item-inner .product-category-tit span {padding-left: 0;}
	.product-category-list.list02 li:first-child a .list-item-inner .product-category-tit span {padding-left: 0;}
	.product-category-list.list02 li:last-child a .list-item-inner .product-category-tit span {padding-left: 0;}
	.product-category-list li a .img { width: 45rem; height: 45rem;  top: 40%;}
}
@media all and (max-width: 480px){
	.product-category-list li a .list-item-inner {min-height: 40rem;}
	.product-category-list li a .img { width: 38rem; height: 38rem;}
}
/* ****************** 02.Product :: 공통 ********************** */
@media all and (min-width:801px){	
	.product-model-list .list-item a:hover .list-inner {background: #1e5f93; transition: all 0.4s ease-in-out;}
	.product-model-list .list-item a:hover .list-inner .txt-con .txt02 {color:#99b5cc; transition: all 0.4s ease-in-out;}
}
@media all and (max-width: 800px){
	.product-page {padding: 5rem 0 15rem 0;}
	.product-page .intro-sub-con .txt-box .num {font-size: 2rem;}
	.product-page .intro-sub-con .site-box-tit {font-size: 3.6rem;}
	.product-model-tit { font-size: 3.8rem;}
	.product-model-list .list-item {width: calc(50% - 3rem) !important; margin-right: 3rem;}
	.product-model-list .list-item a .list-inner {padding: 4rem 1rem 3rem 1rem;}
	.product-model-list .list-item a .list-inner .txt-con {padding-top: 2rem;}
	.product-model-list .list-item a .list-inner .txt-con .txt01 {font-size: 2.4rem;}
	.product-model-list .list-item a .list-inner .txt-con .txt02 {font-size: 1.6rem; color:#ccc;}
}
@media all and (max-width: 480px){
	.product-model-list .list-item {width: calc(90% - 3rem) !important;}
	.product-model-list .list-item a .list-inner {padding: 4rem 1rem 3rem 1rem;}
	.product-model-list .list-item a .list-inner .txt-con {padding-top: 2rem;}
	.product-model-list .list-item a .list-inner .txt-con .txt01 {font-size: 2.4rem;}
	.product-model-list .list-item a .list-inner .txt-con .txt02 {font-size: 1.6rem;}
}
/* ****************** 02.Product :: Haptic Mouse ********************** */
@media all and (max-width: 1580px){
	.product-hm-page .intro-sub-con .txt-box { padding-left: 8rem;}
}
@media all and (max-width: 800px){
	.product-hm-page .product-info-con {padding-top: 30rem;}
	.product-hm-page .intro-sub-con .img-box { width: 100%;}
	.product-hm-page .intro-sub-con .txt-box {width: 100%; padding-left: 0;}
	.product-hm-page .intro-sub-con.con-reverse .txt-box { left:0;}
	.product-hm-page .intro-sub-con.con-center .img-box {padding-left: 0;}
	.product-hm-page .intro-sub-con.con01 {margin-bottom: 10rem;}
	.product-hm-page .intro-sub-con.con03 {margin-bottom: 18rem;}
	.product-hm-page .intro-sub-con.con04 .img-box { margin-top: -30rem; }
	.product-hm-page .intro-sub-con.con05 {margin-bottom: 16rem;}
	.product-hm-page .intro-sub-con.con05 .img-box img {width: 60%;}
}
@media all and (max-width: 480px){
	.product-hm-page .intro-sub-con.con04 .txt-box .sm-tit br {display: none;}
	.product-hm-page .product-info-con {padding-top: 10rem;}
}
/* ****************** 02.Product :: Haptic Console ********************** */
@media all and (max-width: 1580px){
	.product-hc-page .intro-sub-con.con-reverse .txt-box {left: 10%;}
	.product-hc-page .intro-sub-con.con02 .img-box img { padding-left: 7rem; }
	.product-hc-page .intro-sub-con.con02 .txt-box {padding-left: 8.5rem;}
}
@media all and (max-width: 800px){
	.product-video-con01 {margin-bottom: 12.5rem;}
	.product-video-con01 .tit-box {margin-bottom: 6rem; }
	.product-video-con01 .tit-box .tit01 {font-size: 4.6rem; margin-bottom: 3rem;}
	.product-video-con01 .tit-box .txt01 {font-size: 2.4rem;}
	.product-video-con01 .tit-box .txt01 span {display: block;}
	.product-video-con01 .tit-box .tit02 {font-size: 4.8rem; margin-bottom: 2.5rem;}
	.product-video-con01 .tit-box .txt02 {font-size: 1.8rem; color: #ccc; }
	.product-video-con01 .tit-box .txt03 {font-size: 1.8rem;}
	.product-video-con02 {margin-bottom: 18rem;}
	.product-video-con02 .tit-box {margin-bottom: 3.5rem;}
	.product-video-con02 .tit-box .txt01 {font-size:2rem; margin-bottom: 2rem;}
	.product-video-con02 .tit-box .tit {font-size:3.4rem; margin-bottom: 2rem;}
	.product-video-con02 .tit-box .txt02 {font-size:1.8rem; color: #ccc;}
	.product-hc-page .intro-sub-con {margin-bottom: 18rem;}
	.product-hc-page .intro-sub-con.con-reverse .txt-box {width: 100%; left: 0;}
	.product-hc-page .intro-sub-con.con-reverse .img-box {width: 100%;}
	.product-hc-page .intro-sub-con.con02 {margin-bottom: 18rem;}
	.product-hc-page .intro-sub-con.con02 .txt-box {padding-left: 0rem;}
	.product-hc-page .intro-sub-con.con02 .img-box img {width: 80%; padding-left: 0rem;}
	.product-hc-page .intro-sub-con.con03 {margin-bottom: 28rem;}
	.product-hc-page .intro-sub-con.con03 .img-box img {width: 80%; }
	.product-hc-page .intro-sub-con.con-center .img-box {margin-top: -65rem; margin-left: 0;}
	.product-hc-page .intro-sub-con.con05 .txt-box{width: 100%; padding-top: 0;}
	.product-hc-page .intro-sub-con.con05 .img-box{width: 100%;}
	.product-hc-page .intro-sub-con.con05 {margin-bottom: 16rem;}
}
/* ****************** 02.Product :: Haptic Plus ********************** */
@media all and (max-width: 800px){
	.product-hp-page .intro-bg {background-size: contain; bottom: -20rem;}
	.product-hp-page .intro-box { padding: 0 0 30rem 0;}
	.product-hp-page .intro-box .img-box {margin-bottom: 5rem;}
	.product-hp-page .intro-box .txt-box .txt01 {font-size: 2.4rem;}
	.product-hp-page .intro-box .txt-box .txt02 {font-size: 4.8rem;}
	.product-hp-page .intro-sub-con {margin-bottom: 10rem;}
	.product-hp-page .intro-sub-con .txt-box {padding-top: 2rem;}
	.product-hp-page .intro-sub-con.con01 .txt-box{width: 100%; padding-left: 0; margin-top: 0;}
	.product-hp-page .intro-sub-con.con01 .img-box{width: 100%;}
	.product-hp-page .intro-sub-con.con01 .txt-box {padding-top: 0;}
	.product-hp-page .intro-sub-con.con-reverse .txt-box {width: 100%; left:0%;}
	.product-hp-page .intro-sub-con.con-reverse .img-box {width: 100%;}
}
/* ****************** 02.Product :: Haptic Wearable ********************** */
@media all and (max-width: 1580px){
	.product-hw-page .intro-sub-con.con03 .txt-box, .product-hw-page .intro-sub-con.con08 .txt-box {left: 9%;}
}
@media all and (max-width: 800px){
	.product-hw-page .intro-box.con01 {padding-bottom: 15rem;}
	.product-hw-page .intro-box .intro-tit {font-size: 4.6rem;}
	.product-hw-page .intro-box .img-box {padding: 3.5rem; }
	.product-hw-page .intro-info-list li {width: 100%; padding: 4rem;     margin-bottom: 2rem}
	.product-hw-page .intro-info-list li:before {display: none;}
	.product-hw-page .intro-info-list li .no {font-size: 2rem;}
	.product-hw-page .intro-info-list li .icon {margin-bottom: 2rem; }
	.product-hw-page .intro-info-list li .txt01 {font-size: 1.8rem;}
	.product-hw-page .intro-info-list li .txt02 {font-size: 1.5rem; color: #ccc;}
	.product-hw-page .intro-box.con02 {padding-bottom: 18rem;}
	.product-hw-page .intro-box .intro-txt {font-size: 2.4rem;}
	.product-hw-page .product-info-con {padding-top: 10rem;}
	.product-hw-page .intro-sub-con.con02 .txt-box {padding-top: 5rem;}
	.product-hw-page .intro-sub-con.con03 {margin-bottom: 18rem;}
	.product-hw-page .intro-sub-con.con03 .txt-box, .product-hw-page .intro-sub-con.con08 .txt-box {width: 100%; }
	.product-hw-page .intro-sub-con.con03 .img-box, .product-hw-page .intro-sub-con.con08 .img-box {width: 100%;}
	.product-hw-page .intro-sub-con.con03 .txt-box, .product-hw-page .intro-sub-con.con08 .txt-box {left:0%;}
	.product-hw-page .intro-sub-con.con04 {flex-wrap: wrap-reverse;}
	.product-hw-page .intro-sub-con.con04 .img-box {margin-top: -5rem;}
	.product-hw-page .intro-sub-con.con04 {margin-bottom: 18rem;}
	.product-hw-page .intro-sub-con.con05 {margin-bottom: 18rem;}
	.product-hw-page .intro-sub-con.con05 .txt-box {padding-left: 0;}
	.product-hw-page .intro-sub-con.con07 {margin-bottom: 18rem;}
	.product-hw-page .intro-sub-con.con07 .img-box img {width: 100%;}
	.product-hw-page .intro-sub-con.con08 .btn {width: 20rem; height: 5rem; margin:3rem auto;}
	.product-hw-page .intro-sub-con.con08 .txt-box {padding-top: 2rem}
	.product-hw-page .intro-sub-con .btn a {line-height: 5rem; font-size: 1.6rem;}
}
@media all and (max-width: 480px){
	.product-hw-page .intro-box .intro-txt br {display: none;}
}

/* ****************** 02.Product :: 제품 팝업 ********************** */
@media all and (max-width: 1280px){
	.product-info-wrapper {padding: 8rem; max-width: 100rem;}
}
@media all and (max-width: 800px){
	.product-info-wrapper {padding: 5rem 3rem; max-width: 86rem; box-sizing: border-box;}
	.product-info-wrapper .modal-close-btn {top:5rem; right:5rem;}
	.product-view-con {padding-bottom: 6rem;}
	.product-view-con .type {font-size: 1.6rem; margin-bottom: 1rem;}
	.product-view-con .name {font-size: 4.8rem;}
	.product-view-con .txt {font-size: 1.6rem; margin-bottom: 3rem; opacity: 0.8;}
	.product-view-con .product-view-thum {max-width: 45rem;}

	.product-view-con .product-view-thum-list .slick-dots {bottom: -2rem;}
	.product-view-arrow button i {font-size:4rem;}
	.product-view-con .main-inquiry-summit-btn {margin: 2rem auto 0; display: block;width: 18rem; height: 5rem; font-size: 1.6rem; line-height: 5rem;}
	.product-view-con .main-inquiry-summit-btn span {top: 0.3rem;}
	.product-view-con .main-inquiry-summit-btn span i {font-size: 2rem; padding-left: 2rem;}
	.product-spec-con {padding: 6rem 0;}
	.product-spec-con .tit, .product-review-con .tit {font-size: 2.6rem; margin-bottom: 3rem;}
	.product-spec-con .product-spec-box {padding-bottom: 5rem;}
	.product-spec-con .product-spec-tbl th {font-size: 1.4rem; padding: 1.5rem 0; color: rgba(255,255,255,0.8);}
	.product-spec-con .product-spec-tbl td {font-size: 1.4rem; padding: 1.5rem 0; color: rgba(255,255,255,0.8);}
}
@media all and (max-width: 480px){
	.product-info-wrapper .modal-close-btn {top:3rem; right:3rem;}
	.product-view-arrow button i {font-size:3rem;}
}


/* ******************  회사소개 ********************** */
@media all and (max-width:1220px){
	
}