/**
* =============================================================================
* @	file     : common-web-index.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2022-01-10
* @ desc     : WEB - index
* 
* =============================================================================
*/

@charset "UTF-8";
	
	/**************************************************************************
	---------------------------------------------------------------------------
	* 01. TOP NAVI MENU
	---------------------------------------------------------------------------	
	* 02. TOP MENU / OVERLAY	
	---------------------------------------------------------------------------
	* 03. MAIN BANNER	
	---------------------------------------------------------------------------
	* 04. TOP FIXED MENU	
	---------------------------------------------------------------------------
	* 05. EVENT BOUNCE
	---------------------------------------------------------------------------
	* 06. BUBBLE STICKY TOOLTIP
	---------------------------------------------------------------------------
	**************************************************************************/
	
	/**
	| -------------------------------------------------------------------------
	| @ 01. TOP NAVI MENU	
	| -------------------------------------------------------------------------
	*/
	/*-----------------------------------------------**/
	/* @ TOP 메뉴 영역		 			     	 		 **/
	/*-----------------------------------------------**/
	/* 탑네비 영역 **/
	.wrapper-topNavi {
		width: 100%;
		min-height: 50px; /*height: 50px;**/
		background-color: #E2E2E2;
	}
	/* 탑네비 - 카테고리 버튼(버거메뉴) **/
	.wrapper-topNavi .category {
		position:relative;
		width:250px; 
		height:50px; 
		line-height:50px;
		font-weight: normal;
		background-color:#000; 
		padding-left:20px; 
		color:#fff;
		cursor: pointer;
	}
	.wrapper-topNavi .category .btn-overlayMenu {
		position: absolute;
		left: 25px;
		top: 16px;
	}

	/*-----------------------------------------------**/
	/* @ TOP 메뉴		 			     	 			 **/
	/*-----------------------------------------------**/
	/* 탑네비 - 메뉴 **/
	.wrapper-topNavi .navimenu {
		position: relative;
		/*padding-left:50px;**/
		line-height:50px;
		margin-right: 0;
		margin-left: auto;
	}
	.wrapper-topNavi .navimenu ul.navimenu-ul {
		list-style: none;
	}
	.wrapper-topNavi .navimenu ul.navimenu-ul li {
		float: left;		
	}
	.wrapper-topNavi .navimenu ul.navimenu-ul li a {
		/*width: 105px;**/
		min-width: 110px; /**** 메뉴 넗이 설정 ****/
		padding-left: 12px;
		padding-right: 12px;
		border: 0px solid #000;
		text-align: center;
		font-size: 14px;
		/*font-weight: bold;**/
	    position: relative;
	    display: table-cell;
	    vertical-align: middle;
	    height: 50px;
	    color: #000;
	}
	.topNavi-vr:after {
		content: "";
	    position: absolute;
	    border-left: 1px solid #BBBBBB; /*#CECECE;**/
	    top: 18.5px; /* vertical line top에서 떨어질 간격 설정 **/
	    left: 0px;
	    height: 14px; /* vertical line 높이 사이즈 설정 **/
    }

	/*-----------------------------------------------**/
	/* @ 탑메뉴 '전동시스템' 이미지 아이콘		 			 **/
	/*-----------------------------------------------**/
	.based-ico-menu-remoteCont {
		position: relative;
	}
	.ico-menu-remoteCont {
		width: 35px;
		position: absolute; 
		top: -17px; 
		right: -10px;
	}

	/*-----------------------------------------------**/
	/* @ 탑메뉴 '갤러리' 카메라 이미지 아이콘		 			 **/
	/*-----------------------------------------------**/
	.based-ico-menu-gallery {
		position: relative;
	}
	.ico-menu-gallery {
		width: 35px;
		position: absolute;
		top: -17px;
		right: -9px;
		transform: rotate(-40deg); /*transform: rotate(35deg);**/
	}

	/*-----------------------------------------------**/
	/* @ 탑메뉴 확장 - 뎁스메뉴		 			 		 **/
	/*-----------------------------------------------**/
	/*
	-------------------------------------
	| cate 1	| cate 2	| cate 3	|
	-------------------------------------
	| 	mdMenu1 | smMenu1	|
	| 	mdMenu2 | smMenu2	|
	| 	        | smMenu3	|
	| 		    | smMenu4	|
	-------------------------------------
	**/	
	.topMenuDepthMenu-virtual{
	    position: absolute;
	    z-index: 101;
	    top: 50px;
	    left: -30px;
	    width: 950px; /* 탑메뉴 확장 배경 활성화 시 **/
	    width: 0px; /* 탑메뉴 확장 배경 비 활성화 시 **/
	    height: 270px;
	}
	.topMenuDepthMenu-wrapper{
	    position: relative;
	    width: 100%;
	    height: 100%;
	    border: 0px solid #E2E2E2;
	    border-top: 0px;	    
	    background-color: rgba(255, 255, 255, 0.6); /* 투명 배경 **/
	    background-color: #FAFAFA; /*#fff;**/ /* 불투명 배경 **/	    
	}
	.topMenuDepthMenu {
	    /*position: absolute;**/
	    width: 380px;
	    height: 100%;
	    /*top: 0px;
	    left: 180px;**/
	    background-color: #F1F1F1; /*#FAFAFA;**/
	    opacity: 1;
	    border: 0px solid gray;
	    padding: 20px 0px 20px 0px;
	    display: flex;
	}
	/*
	.topMenuDepthMenu-1 { margin-left: 180px; }
	.topMenuDepthMenu-2 { margin-left: 290px; }
	.topMenuDepthMenu-3 { margin-left: 400px; }
	.topMenuDepthMenu-4 { margin-left: 510px; }
	.topMenuDepthMenu-5 { margin-left: 620px; }
	.topMenuDepthMenu-6 { margin-left: 670px; }
	**/
	
	.topMenuDepthMenu-md {
		/*position: relative;**/
		display: inline-block;
	    width: 190px;
	    height: 100%;
	    border-right: 1px solid #E2E2E2;
	}
	.topMenuDepthMenu-sm {
		/*position: relative;**/
		display: inline-block;
	    width: 190px;
	    height: 100%;
	    border: 0px solid #E2E2E2;
	}
	
	/* 뎁스메뉴 2단계 ul li  **/
	.topMenuDepthMenu-md ul, .topMenuDepthMenu-sm ul {
		list-style: none;
		margin: 0;
		padding: 0;
		font-family: NotoSansKR-Medium;
		font-family: NanumGothic;
		font-family: GmarketSansMedium;
		font-family: s-core-dream-4;		
		font-size: 13px;
		text-align: left;
	}
	.topMenuDepthMenu-md ul li, .topMenuDepthMenu-sm ul li {
		width: 100%;
		height: 28px;
		line-height: 28px;
	}
	.topMenuDepthMenu-md-a {
		width: 100%;
		display: inline-block;
		padding-left: 30px;
	}
	.topMenuDepthMenu-md-a:hover {
		/*background-color: #000;
		color: #fff;
		transition: none;**/
	}
	.topMenuDepthMenu-sm-a {
		width: 100%;
		display: inline-block;
		padding-left: 25px;
	}
	.topMenuDepthMenu-sm-a:hover {
		color: #000;
		transition: none;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	/*-----------------------------------------------**/
	/* @ 햄버거 아이콘 버튼 / 엑스 아이콘 버튼		 			 **/
	/*-----------------------------------------------**/
	/* 햄버거 아이콘 버튼 **/
	/*.hamburger-button {
		position: relative;
		display: inline-block;
		width: 15px;
		height: 15px;
		background-color: transparent;
		background-image: linear-gradient(to right, currentColor, currentColor);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 2px;
		padding: 0;
		outline: 0;
		border: 0;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: .25s cubic-bezier(.17,.67,.89,1.4);
		transition-property: transform;
		will-change: transform;
	 }
	.hamburger-button::before, .hamburger-button::after {
		content: "";
		position: absolute;
		color: #fff;
		left: 0; 
		right: 0;
		display: block;
		height: 2px;
		background: currentColor;
		transition: .25s;
		transition-property: transform, top;
		will-change: transform, top;
	}
	.hamburger-button::before {
		top: 1px;
	}
	.hamburger-button::after {
		top: calc(100% - 4px);
	}
	
	* 엑스 아이콘 버튼 **
	.x-button {
		position: relative;
		display: inline-block;
		width: 15px;
		height: 15px;
	}
	.x-button .bar-box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
	}
	.x-button .bar-box > span {
		position: absolute;
		top: 50%;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	.x-button .bar-01 { transform: rotate(135deg) translateX(0%); }
	.x-button .bar-02 { transform: rotate(45deg) translateX(0%); }
	**/
	
	/*-----------------------------------------------**/
	/* @ 오버레이 메뉴 [디피나라 카테고리]		 			     **/
	/*-----------------------------------------------**/
	/* 카테고리 버튼 클릭시 전체메뉴 오버 레이어 **/
	.wrapper-category-overlay {
		width: 100%;
		height: 0px;
		margin: 0; 
		padding: 0;
		position: relative;
		z-index: 100;
	}
	.wrapper-category-overlay .category-overlay {
		width: 1249px;
		height: 500px;
		position: absolute;
		top: 0;
		left: 0;
		border: 0px solid #000;
	}
	.wrapper-category-overlay .category-overlay .category-sitemap {
		width: 1200px;
		height: 100%;
		margin: 0; padding: 0;
		background-color: #fff;
		border-bottom: 1px solid #606060;
		border-right: 1px solid #606060;
		z-index: 10; /*3;**/
	}
	.wrapper-category-overlay .category-overlay .category-sitemap table {
		width: 100%; height: 100%;
		border: 0px solid #000;
		margin:0; padding:0;
	}
	.wrapper-category-overlay .category-overlay .category-sitemap table tr td {
		height: 100%;
		border: 0px solid #000;
		margin:0; padding:0;
	}	
	.wrapper-category-overlay .category-overlay .category-sitemap-close {
		width: 45px;
		height: 45px;
		line-height: 45px;
		padding-top: 1px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		cursor: pointer;
		background-color: #606060;
		border-top: 1px solid #606060;
		border-right: 1px solid #606060;
		border-bottom: 1px solid #606060;
		z-index: 3;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 02. TOP MENU / OVERLAY
	| -------------------------------------------------------------------------
	*/	
	/*-----------------------------------------------**/
	/* @ 오버레이 영역 [사이트 맵 ]		 			     	 **/
	/*-----------------------------------------------**/
	.grid-container {
		width: 100%;
		height: 100%;
	}
	.grid-item {
		width: 25%;
		padding: 30px 30px 30px 30px;
		border: 0px solid #E2E2E2;
	}
	.grid-item ul {
		list-style: none;
		margin:0; 
		padding:0;
	}
	.grid-item ul li {
		width: 100%;
		margin:0; 
		height: 30px;
		line-height: 30px;
		text-align: left;
		border: 0px solid #E2E2E2;
	}
	.grid-item ul li a {
		width: 100%; height: 100%;
		padding-left: 10px;
		display: inline-block;
		transition: none;
		color: #000;	
	}
	.grid-item ul li a:hover {
		background-color: #DE0101; /*#E11837;**/
		color: #fff;
		transition: none;
	}
	/*.grid-item ul li:not(.title):hover {
		background-color: #DE0101;
		color: #fff;
	}**/
	.grid-item ul li.title {
		height: 35px;
		line-height: 35px;
		margin-bottom: 20px;
		background-color: #DE0101; /*#E11837;**/
		color: #fff;
		text-align: center;
	}

	/*-----------------------------------------------**/
	/* @ 오버레이 상품 슬라이드 영역	 			     		 **/
	/*-----------------------------------------------**/	
	.cate-item-slider {
	    position: relative;
	    width: 176px;
	    height: 170px;
	    border: 1px solid #E2E2E2;
	    overflow: hidden;
	    margin: 10px auto 0 auto;
	}
	.cate-item-slider ul {
	    position: relative;
	    width: 100%;
	    margin: 0;
	    padding: 0;
	    height: 170px;
	    display: inline-block;
	    list-style: none;
	    background: #fff;
	}
	.cate-item-slider ul li {
	    position: relative;
	    float: left;
	    display: inline-block;
	    margin: 0;
	    padding: 0;
	    width: 176px;
	    height: 170px;
	    background: #fff;
	    color: #333;
	}
	.cate-item-slider ul li:hover {
		text-decoration: underline;
		/*cursor: pointer;**/
	}
	.cate-item-slider .control {
	    position: absolute;
	    top: 39%;
	    z-index: 11;
	    display: block;
	    width: 30px;
	    height: 30px;
	    text-align: center;
	    background: #2a2a2a;
	    color: #fff;
	    opacity: 0.4;
	    cursor: pointer;
	    display: none;
	}
	.cate-item-slider .prev {
	    left: 0px;
	}
	.cate-item-slider .next {
	    right: 0px;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 03. MAIN BANNER
	| -------------------------------------------------------------------------
	*/
	/* 베너 영역 **/
	.wrapper-main-banner-area {
		width: 100%;
		height: 500px;
		border: 0px solid #000;
		background-color: #fff;
		position: relative;
		overflow: hidden; /*배너 영역 벗어나는 내용 보이지 않게 **/
	}
	/* 베너 백그라운드 이미지 [백그라운드 이미지형 배너] **/
	.wrapper-main-banner-area .banner-background {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;		
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 1;
	}
	/* 베너 영역 **/
	.wrapper-main-banner-area .banner-container {
		width: 1200px;
		height: 100%;
		border: 0px solid #000;
		position: absolute;
		/* 1200px 센터에 띄우기 위해 **/
	    top: 50%;
	    left: 50%;
     	margin-top:-250px;
      	margin-left:-600px;
      	/*
		-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android *
    	-ms-transform: translate(-50%, -50%); /* IE 9 *
        transform: translate(-50%, -50%);
        **/
		z-index: 2;
	}
	/* 테이블 **/
	.wrapper-main-banner-area .banner-container table {
		width:100%; height:100%; border:0px solid #000; margin:0px;		
	}
	.wrapper-main-banner-area .banner-container table tr, .wrapper-main-banner-area .banner-container table tr td{
		border:0; margin:0; padding:0;
	}

	/*-----------------------------------------------**/
	/* @ LEFT메뉴 확장 - 뎁스메뉴		 			 		 **/
	/*-----------------------------------------------**/
	/*
	-------------------------------------
	| cate 1	|			|			|
	| cate 2	| subMenu2  | subMenu3	|
	| cate 3	|			|			|
	| cate 4	|			|			|
	| cate 5	|			|			|
	| cate 6	|			|			|
	| cate 7	|			|			|
	-------------------------------------
	**/
	/* 베너 좌측 메뉴 [250][200][200] **/
	.banner-menu {
		/*width: 250px;**/
		height: 100%;
		margin:0; padding:0;
		border: 0px solid #000;
		position: relative;
	}
	.banner-menu .banner-menu-result {
		width: 250px;
		height: 100%;
		margin:0; padding:0;
		border: 0px solid #000;
		position: absolute;
		top:0;
		left:0;
		z-index: 10;
	}
	/* 기본 메뉴 스타일 **/
	.default-banner-menu {
		background-color: #969696;
		/*background-color: rgba( 255, 255, 255, 0.5 );**/
		/*background-color: rgba( 128, 128, 128, 0.5 );**/
		background-color: rgba( 192, 192, 192, 0.5 );
		z-index: 10;
	}
	/* 오버레이시 메뉴 스타일 **/
	.overlay-banner-menu {
		background-color: #606060; /*#8e8e8e;**/
		color: #fff;
	}
	
	.banner-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		font-family: s-core-dream-2;
	}
	.banner-menu ul li a {
		width: 100%;
		height: 45px;
		line-height: 45px;
		display: inline-block;
		padding-left: 20px;
		font-size: 13px;
		font-weight: bold;
		color: #fff;
		transition: none;
	}
	.banner-menu ul li:hover{
		/*border: 1px solid #000;**/
	}
	.banner-menu ul li a:hover{
		/*background-color: #fff;
		color: #000;
		transition: none;
		opacity: 1;**/
	}
		
	/*
	-------------------------------------
	| cate 1	|			|			|
	| cate 2	| subMenu2  | subMenu3	|
	| cate 3	|			|			|
	| cate 4	|			|			|
	| cate 5	|			|			|
	| cate 6	|			|			|
	| cate 7	|			|			|
	-------------------------------------
	**/
	.banner-menu .left-depth-menu-virtual {
		display: none;
	}
	/*-----------------------------------------------**/
	/* @ LEFT 뎁스메뉴 2단계			     	 			 **/
	/*-----------------------------------------------**/	
	
	/* 대분류 타이틀 **/
	.left-depth-menu-2-title {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: left;
		padding-left: 18px;
		border: 0px solid gray;
		/*background-color: #E2E2E2;**/
		font-family: s-core-dream-4;
		font-size: 18px;
		color: #000;
	}
	/* 뎁스메뉴 - 중뷴류 영역 **/
	.banner-menu .left-depth-menu-2 {
		width: 220px;
		height: 100%;
		background-color: rgba( 255, 255, 255, 0.9 ); /* 배경 투명 **/
		background-color: #fff; /* 배경 불투명 **/
		z-index: 9;
		margin: 0; 
		padding: 0;
		border-bottom: 0px solid #E2E2E2;
		position: absolute;
		top:0;
		left:250px;
	}
	.banner-menu .left-depth-menu-2 .left-depth-menu-2-result {
		width: 200px;
		height: 460px;
		margin: 20px 0 20px 20px;
		border-right: 1px solid #C8C8C8; /*투명 Border 컬러**/
		border-right: 1px solid #E2E2E2; /*불투명 Border 컬러**/
	}
	
	/* 뎁스메뉴 2단계 ul li  **/
	.left-depth-menu-2-result ul {
		list-style: none;
		margin-top: 0;
		padding: 0;
		font-family: s-core-dream-2;
	}
	.left-depth-menu-2-result ul li {
		width: 100%;
		margin: 0; 
		text-align: left;
		border: 0px solid #E2E2E2;
	}
	.left-depth-menu-2-result ul li a {
		width: 100%; 
		height: 100%;
		padding-left: 20px;
		display: inline-block;
		transition: none;
		color: #000;
		height: 35px;
		line-height: 35px;
		
	}
	/*.left-depth-menu-2-result ul li a:hover {
		background-color: #000;
		color: #fff;
		transition: none;
	}**/
		
	/*-----------------------------------------------**/
	/* @ LEFT 뎁스메뉴 3단계			     	 			 **/
	/*-----------------------------------------------**/
	/* 뎁스메뉴 - 소뷴류 영역 **/
	.banner-menu .left-depth-menu-3 {
		width: 240px;
		height: 100%;
		background-color: rgba( 255, 255, 255, 0.9 ); /* 배경 투명 **/
		background-color: #fff; /* 배경 불투명 **/
		z-index: 9;
		margin: 0; 
		padding: 0;
		border-bottom: 0px solid #E2E2E2;
		border-right: 1px solid #E2E2E2;
		position: absolute;
		top:0;
		left:470px;
	}
	.banner-menu .left-depth-menu-3 .left-depth-menu-3-result {
		width: 200px;
		height: 460px;
		margin: 20px 0 20px 20px;
		border: 0px solid #E2E2E2;
		padding-top: 50px;
		/*background-color: #ffe421;**/
	}
	
	/* 뎁스메뉴 3단계 ul li  **/
	.left-depth-menu-3-result ul {
		list-style: none;
		margin-top: 0;
		padding: 0;
		font-family: s-core-dream-2;
	}
	.left-depth-menu-3-result ul li {
		width: 100%;
		margin: 0; 
		text-align: left;
		border: 0px solid #E2E2E2;
	}
	.left-depth-menu-3-result ul li a {
		width: 100%; 
		height: 100%;
		padding-left: 20px;
		display: inline-block;
		transition: none;
		color: #000;
		height: 32px;
		line-height: 32px;
		
	}
	.left-depth-menu-3-result ul li a:hover {
		transition: none;
		text-decoration: underline;
		text-underline-offset: 4px;
		/*background-color: transparent; **/
		background-color: #000;
		color: #fff;
	}



	
	/* 배너 영역 [센터 배너] **/
	.wrapper-banner-result {
		margin:0; padding:0;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.wrapper-banner-result .banner-result {
		width: 100%;
		height: 100%;
		border: 0px solid #000;
	}

	/* 배너 네비 버튼 [play / pause] **/
	.wrapper-main-banner-area .banner-container .banner-navi {
		/*border: 1px solid #000; **/
		position: absolute;
		bottom: 0px;
		right: 0px;			
	}
	.btn-navi{
		width: 41px;
		margin-right: 2px;
		/*line-height: 38px;**/		
		padding: 10px 12px 8px 12px;
		text-align: center;
		background-color: #000;
		color: #fff;
		cursor: pointer;
		opacity: 0.3;
	}
	.btn-navi:hover{
		background-color: #000;
		color: #fff;
		font-weight: bold;
		opacity: 1;
	}
	.paging-navi{
		min-width: 80px;
		height: 38px;
		line-height: 38px;
		margin-right: 5px;
		/*padding: 8px 12px 8px 12px;**/
		background-color: #000;
		color: #fff;
		text-align: center;
	}
	.paging-navi #disp-banner-page{
		font-weight: bold;
	}

	/* 배너 프로그래스바 **/
	.wrapper-main-banner-area .banner-container .wrapper-banner-progress {
		position: absolute;
		bottom: 17px; /* 0px; **/
		right: 220px; /*213px;**/
		width: 300px; /*737px;**/
		margin: 0;
		padding: 0;
	}
	.wrapper-main-banner-area .banner-container .wrapper-banner-progress .banner-progress {
		width: 100%;
		height: 3px;
		border: 1px solid #000;
	}
	.wrapper-main-banner-area .banner-container .wrapper-banner-progress .banner-progress .banner-progressbar {
		height: 1px;
		width: 0%;
		background-color: #000;
		animation: startBarKeyFrames 5.8s linear forwards; /* startBarKeyFrames 5s linear forwards; **/ /* 배너 사이클 시간과 동기화 **/
		animation-delay: 0s;
		animation-fill-mode: both;
	}
	@keyframes startBarKeyFrames {
		from { width: 0%; }
		to { width: 100%; }
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 04. TOP FIXED MENU
	| -------------------------------------------------------------------------
	*/
	.wrapper-fixed-top-menu {
		width: 100%;
		height: 80px;
		border: 0px solid red;
		margin: 0;
		padding: 0;
	}
	.wrapper-fixed-top-menu div {
		margin: 0;
		padding: 0;
	}	
	.fixed-top-menu-logo {
		width:250px;
	}
	.fixed-top-menu {
		width:800px;  
		text-align:right;
	}
	.fixed-top-menu div {
		float: right;
		padding-right: 20px;
	}
	.fixed-top-menu ul {
		list-style: none;
	}
	.fixed-top-menu ul li {
		float: left;
		position: relative;
	}
	.fixed-top-menu ul li:hover::after { /* 메뉴 hover시 boottom line **/
		content:'';
		position: absolute;
		background-color: #DA0106;
		width: 80%;
		height: 3px;
		bottom: 0;
		left: 0;
		margin-left: 11px;
		margin-bottom: 0px; /*-8px;**/
	}	
	.fixed-top-menu ul li.fx-home {
		font-size: 15px;
	}	
	.fixed-top-menu ul li:not(.fx-home) {
		font-size: 14px;
	}		
	.fixed-top-menu ul li a {
		/*min-width: 100px;**/ /**** 메뉴 넗이 설정 ****/
		min-width: 100px;
		padding-left: 12px; 
		padding-right: 12px;
		border: 0px solid #000;
		text-align: center;
		/*font-weight: bold;**/
	    position: relative;
	    display: table-cell;
	    vertical-align: middle;
	    height: 50px;
	    text-align: center;
	    color: #000;
	    transition: none;
	}
	.fixed-top-menu ul li a:hover {
		/*color: #DA0106;**/
	}
	.fxMenu-vr:after {
		content: "";
	    position: absolute;
	    border-left: 1px solid #DEDEDE; /*#BBBBBB;**/
	    top: 19px; /* vertical line top에서 떨어질 간격 설정 **/
	    left: 0px;
	    height: 14px; /* vertical line 높이 사이즈 설정 **/
    }		
	.fixed-top-menu-right {
		width: 150px;			 
		line-height: 49px;
		border: 0px solid #000; 
		text-align: right;
	}
	.fxMenu-ico {
		font-size: 26px;
		font-weight: normal;
		color: #949494;
		padding-left: 4px;
		line-height: 49px;
		cursor: pointer;
	}
	.fxMenu-ico:hover {
		color: red;
	}

	/*-----------------------------------------------**/
	/* @ FIXED 탑메뉴 확장 - 뎁스메뉴		 			 	 **/
	/*-----------------------------------------------**/
	/*
	/*					
	-------------------------------------
	| cate 1	| cate 2	| cate 3	|
	-------------------------------------
	| 	mdMenu1 | smMenu1	|
	| 	mdMenu2 | smMenu2	|
	| 	        | smMenu3	|
	| 		    | smMenu4	|
	-------------------------------------
	**/
	.fixed-top-menu-depthMenu-virtual {
	    width: 700px;
	    height: 67px;
	    position: absolute;
	    border: 0px solid red;
	}
	.fixed-top-menu-depthMenu-wrap {
	    width: 100%;
	    height: 100%;
	    position: relative;
	    border: 0px solid red;
	}	
	.topMenuDepthMenu2-virtual{
	    position: absolute;
	    z-index: 101;
	    top: 67px;
	    left: 0px;
	    width: 950px; /* 탑메뉴 확장 배경 활성화 시 **/
	    width: 0px; /* 탑메뉴 확장 배경 비 활성화 시 **/
	    height: 270px;
	}
	.topMenuDepthMenu2-wrapper{
	    position: relative;
	    width: 100%;
	    height: 100%;
	    border: 0px solid red;
	    border-top: 0px;
	    background-color: rgba(255, 255, 255, 0.6); /* 투명 배경 **/
	    background-color: #FAFAFA; /*#fff;**/ /* 불투명 배경 **/	
	    background-color: transparent; /* 완전히 투명하게 **/
	}
	.topMenuDepthMenu2 {
	    position: absolute;
	    width: 380px;
	    height: 100%;
	    /*top: 0px;
	    left: 180px;**/
	    background-color: #F1F1F1; /*#FAFAFA;**/
	    opacity: 1;
	    border: 0px solid red;
	    display: flex;
	}
	/*.topMenuDepthMenu2-1 { margin-left: 180px; }
	.topMenuDepthMenu2-2 { margin-left: 290px; }
	.topMenuDepthMenu2-3 { margin-left: 400px; }
	.topMenuDepthMenu2-4 { margin-left: 510px; }
	.topMenuDepthMenu2-5 { margin-left: 620px; }
	.topMenuDepthMenu2-6 { margin-left: 670px; }**/
	
	.topMenuDepthMenu2-md {
		/*position: relative;**/
		display: inline-block;
	    width: 190px;
	    height: 100%;
	    padding-top: 200px;
	    border-right: 1px solid #E2E2E2;
	}
	.topMenuDepthMenu2-sm {
		/*position: relative;**/
		display: inline-block;
	    width: 190px;
	    height: 100%;
	    padding-top: 200px;
	    border: 0px solid #E2E2E2;
	}
	
	/* 뎁스메뉴 2단계 ul li  **/
	.topMenuDepthMenu2-md ul, .topMenuDepthMenu2-sm ul {
		list-style: none;
		margin: 0;
		padding: 20px 0px 20px 0px;
		font-family: NotoSansKR-Medium;
		font-family: NanumGothic;
		font-family: GmarketSansMedium;
		font-family: s-core-dream-4;		
		font-size: 13px;
		text-align: left;
	}
	.topMenuDepthMenu2-md ul li, .topMenuDepthMenu2-sm ul li {
		width: 100%;
		height: 28px;
		line-height: 28px;
	}
	.topMenuDepthMenu2-md-a {
		width: 100%;
		display: inline-block;
		padding-left: 30px;
		height: 28px;
		line-height: 28px;		
	}
	.topMenuDepthMenu2-md-a:hover {
		/*background-color: #000;
		color: #fff;
		transition: none;**/
	}
	.topMenuDepthMenu2-sm-a {
		width: 100%;
		display: inline-block;
		padding-left: 25px;
	}
	.topMenuDepthMenu2-sm-a:hover {
		color: #000;
		transition: none;
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	
	/**
	| -------------------------------------------------------------------------
	| @ 05. EVENT BOUNCE
	| -------------------------------------------------------------------------
	*/
	/* 메인 이벤트 버블 **/
	#main-circle-event {
		position: absolute;
	}
	#main-circle-event .eventBounce-close { font-size: 20px; color: #797979; }
	#main-circle-event .eventBounce-close .btn-eventBounce-close { cursor: pointer; }
	.eventBounce-circle {
		width: 110px; 
		height: 140px; 
		text-align: center;
		margin-top: -25px;
		/*
		padding-top: 30px; padding-left: 5px; padding-right: 5px;
		color: #0b4a3e;
		background: #d9fff8;
		border-radius: 50%;
		**/
		cursor: pointer;
		/*background-image: url("/_web/assets/img/icon/main/installRequest-circle-banner-1.png"); 설치의뢰 서클 **/
		background-image: url("/_web/assets/img/icon/main/visitRequest-circle-banner.png"); /* 무료 방문견적 서클 **/
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
	}
	#eventBounce-circle-drill {
		margin-top: 110px; /*105px;**/
	}	
	.eventBounce-install-bolt {
		position: absolute;
		top: -13px;
		left: 13px;
	}
	/*.eventBounce-circle .eventBounce-content {
		position: absolute;
		top: 30px;
		left: 9px;
	}**/
	.eventBounce-circle span{
		font-family: 'NotoSansKR-Regular';
	}
	
	/* PLAY **/
	.play-eventBounce {
		top: 35px;
		right: 30px;
		
		animation: play-eventBounce 1.5s; /*1s;**/
		animation-direction: alternate;
		animation-timing-function: cubic-bezier(.5, .5, .5, .5);
		animation-iteration-count: infinite
	}
	@keyframes play-eventBounce {
		from { transform: translate3d(0, 0, 0); }
		to { transform: translate3d(0, -15px, 0); }
	}
	
	/* EXIT **/
	.exit-eventBounce {
		top: 35px;
		right: 30px;
		
		animation: exit-eventBounce 2s;
		animation-direction: alternate;
		animation-fill-mode: forwards;		
	}
	@keyframes exit-eventBounce {
		from { transform: translate3d(0, 0, 0); }
		to { transform: translate3d(0, -120px, 0); }
	}
	
	/* HIDE **/
	.hide-eventBounce {
		top: -85px;
		right: 30px;
	}
	
	/* 스크린 사이즈 1200 이하 부터 비활성 **/
	@media screen and (max-width: 1200px) {
		#main-circle-event { display: none; }
	}

	/**
	| -------------------------------------------------------------------------
	| @ 06. BUBBLE STICKY TOOLTIP
	| -------------------------------------------------------------------------
	*/
	.wrap-bub-tooltip {
		padding:0; margin:0;
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 26px;
		margin-left: -20px;
		width: 100px;
	}
	.bub-tooltip {
		background-color: #FEF9E2; 
		border: #B08606 solid 1px; 
		border-radius: 5px; 
		color: #b06a02; /*#B08606;**/ 
		font-size: 11px; 
		font-weight: 500; 
		height: auto; 
		letter-spacing: -0.25px; 
		margin-top: 6.8px; 
		padding: 3px 8px; 
		position: relative; 
		width: fit-content; 
		z-index: 1; 
	}
	/* bubble bg **/
	.bub-tooltip::after {
		border-color: #FEF9E2 transparent; 
		border-style: solid; 
		border-width: 0 6px 8px 6.5px; 
		content: ''; 
		display: block; 
		left: 25px; 
		position: absolute; 
		top: -7px; 
		width: 0; 
		z-index: 1; 
	}
	/* bubble border **/
	.bub-tooltip::before {
		border-color: #B08606 transparent; 
		border-style: solid; 
		border-width: 0 6px 8px 6.5px; 
		content: ''; 
		display: block; 
		left: 25px; 
		position: absolute; 
		top: -8px; 
		width: 0; 
		z-index: 0;
	}