﻿
/* 메인전체틀 속성 */
.contentsW{ background:url() repeat-x; position:relative; background-color:#fff; padding:0 0 0px 0;z-index: 99; }
.contentsT{width:100%; margin:0 auto;}
#wrapMain {width: 100%;margin: 0 auto;background-color: #fff;}

@media(max-width:480px){
.contentsW{ padding:0 0 0 0; }
#wrapMain {width:100%;}
}
@media (min-width:481px) and (max-width:959px){/*mobile and mini- tablet*/
.contentsW{ padding:0 0 0 0; }
#wrapMain {width:100%;}
.topguide_none {display:none}
}
@media (min-width:960px) and (max-width:100%){/*tablet ~pc*//*768(611)*/
#wrapMain {width:100%;}
}




/*상단 가이드메뉴영역*/
#divMastheadLinks{width:100%;text-align:center;position:absolute;}
.divMastheadLinks {
	font-size: 12px;
	letter-spacing: -0.01em;
	font-family:"NanumGothicBold", "NanumGothic", "돋움", "Tahoma", "Helvetica",  sans-serif;}
.divMastheadLinks a:link {color:#fff; text-decoration:none;}
.divMastheadLinks a:visited {color:#fff;}
.divMastheadLinks a:hover{color:#FFF600;}

#divTop{position:relative;width:100%;padding:10px 0 10px 0;} /*상단 가이드메뉴영역*/
h1{margin:0 0 12px 0;padding:0;font:36px "Century Gothic",Arial,Helvetica,sans-serif;color:#e36666;letter-spacing:-1px}
#div_guideline {background-color: #094A80;}
.topspecia_mobile {display:none}

/*상단 스패셜메뉴영역*/
.topspecialLinks {
	padding:10px 0 15px 0;
	font-size: 14px;
	letter-spacing: -0.01em;
	font-family:"NanumGothicBold", "NanumGothic", "돋움", "Tahoma", "Helvetica",  sans-serif;
	border-top: 1px solid rgba(255,255,255,0.3);}
.topspecialLinks a:link {color:#fff; text-decoration:none;}
.topspecialLinks a:visited {color:#fff;}
.topspecialLinks a:hover{color:#FFF600; }


/******************************상단 드랍다운 메뉴******************************/
/* Content wrapper */
.wrapper {
  width: 98%;
  max-width: 960px;
  margin: 0 auto;
}
#logoline {height: 70px; padding:6px 0 10px 0;}

.spanDivider {
	height:30px;
	padding-right:11px;
	background:url(../images/icon_viewline3.png) 3px 3px no-repeat; 
	letter-spacing: -1px;
	font-size:9pt;}/* 제품상세-기본정보텍스트들... */


/*** 메뉴시작***/
.navlogo {
  /*position: fixed;**********************상단테이블 메뉴 고정 숨김*/ 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999999999;
  background-color: #fff; /*모바일 일때 메뉴전체 배경 설정*/
}

.nav-container {
  position:absolute;
  top: 48px; /* 상단 검색부분 과의 간격 */
  left: 0;
  z-index: 9999999999;
  overflow-y: auto;
  visibility: hidden; /* 2 */
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%); /* 2 */
  background-color: ; /*모바일 일때 토글메뉴 여백 컬러*/
  -webkit-overflow-scrolling: touch; /* 3 */
}
/* 1. Show when `.is-visible` class is added */

.nav-container.is-visible {
  visibility: visible; /* 1 */
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); /* 1 */
}

/* Nav toggle */
.nav-toggle { 
  line-height: 1;
  display: inline-block;
  padding: 1.25rem 1rem;
  border: 0;
  background-color: #e74c3c; /*모바일메뉴버튼컬러*/
}

/* Nav toggle icon */
.nav-toggle .icon-menu {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 20px;
  vertical-align: middle;
  fill: none;
}

/* 모바일 ≡ 메뉴영역 */
.icon-menu .line {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  background-color: #fff;
}


/* 모바일 ≡ 메뉴영역 */
.icon-menu .line-1 { top: 0; }
.is-active .icon-menu .line-1 {
  -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
  -ms-transform: translateY(8px) translateX(0) rotate(45deg);
  transform: translateY(8px) translateX(0) rotate(45deg);
}
/* 토글메뉴 line 2 */
.icon-menu .line-2 {  top: 50%;  margin-top: -2px;}
.is-active .icon-menu .line-2 { opacity: 0; }
/* 토글메뉴 line 3 */
.icon-menu .line-3 { bottom: 0; }
.is-active .icon-menu .line-3 {
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}
/* 모바일 ≡ 메뉴영역 End */


/* Remove default list styles for menus */
.menu {  list-style: none;  margin: 0;  padding: 0;}

 /*카테고리 메뉴 배경 */
.nav-menu {
  background-color: #333; /*카테고리 메뉴 배경 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 모바일 일때 메뉴사이 경계라인 */
.nav-menu .menu-item { border-top: 1px solid #777; }

/* Give last menu item a bottom border */
.nav-menu > .menu-item:last-child { border-bottom: 1px solid #777; }

/*1차메뉴 룰오버 색상*/
.nav-menu > .menu-item:hover,
.nav-menu > .menu-item.is-active { background-color: #000; }

/*1차메뉴 Text 색상*/
.nav-menu .menu-link  {
  display: block; /* 1 */
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.5px;
  font-family:"NanumGothicBold", "NanumGothic", "돋움", "Tahoma", "Helvetica",  sans-serif;
  padding: 10px 10px; /*카테고리 상하 여백*/
}
.nav-menu .menu-link2 {
  display: block; /* 1 */
  text-decoration: none;
  color: #fff;
  padding: 10px 10px; /*카테고리 상하 여백*/
}



/*기획전/이벤트 메뉴 별도 지정*/
.nav-menu .menu-link_event {
  display: block; /* 1 */
  text-decoration: none;
  color: #FFF000;
}
.nav-menu .menu-link_event:hover {
  display: block; /* 1 */
  text-decoration: none;
  color: #D3ED41;
}
.nav-menu .menu-link_event  {
  display: block; /* 1 */
  text-decoration: none;
  font-size: 14px;
  letter-spacing: -0.5px;
  font-family:"NanumGothicBold", "NanumGothic", "돋움", "Tahoma", "Helvetica",  sans-serif;
  padding: 10px 10px; /*카테고리 상하 여백*/
}
/*기획전/이벤트 메뉴 별도 지정 End*/



/*스패셜상품 메뉴 별도 지정*/
.nav-menu .menu-link_special {
  display: block; /* 1 */
  text-decoration: none;
  color: #B9CDF6;
}
.nav-menu .menu-link_special:hover {
  display: block; /* 1 */
  text-decoration: none;
  color: #9ECEFF;
}
.nav-menu .menu-link_special  {
  display: block; /* 1 */
  text-decoration: none;
  font-size: 14px;
  letter-spacing: -0.5px;
  font-family:"NanumGothicBold", "NanumGothic", "돋움", "Tahoma", "Helvetica",  sans-serif;
  padding: 10px 10px; /*카테고리 상하 여백*/
}
/*스패셜상품 메뉴 별도 지정 End*/



/* 1. Menu items with dropdowns appear clickable */
.has-dropdown {
  position: relative;
  cursor: pointer; /* 1 */
}

/* 1. Parent menu links inlined so you can toggle the dropdown */
.has-dropdown > .menu-link { display: inline-block; }
.has-dropdown > .menu-link2 { display: inline-block; }
/* 1. Add an icon to menu items that have sub menus */
.has-dropdown:after {
  font-size: 22px;
  position: absolute;
  top: 5px;
  right: 1rem;
  bottom: 0;
  content: "+"; /* 1 모바일메뉴일때 2차이상 메뉴가 있을때...*/ 
  color: #fff;
}

/* 1. Switch icon to n-dash when toggled */
.has-dropdown.is-active:after { content: "\2013"; /* 1 */ }

/*** Dropdowns 1. Hide dropdowns by default */
.nav-dropdown {
  display: none; /* 1 */
  background-color: #555; /*모바일 2차 메뉴 배경컬러*/ 
}

/* 1. Show dropdown when toggled */
.has-dropdown.is-active > .nav-dropdown { display: block; /* 1 */ }

/* 2nd level dropdown */
.nav-dropdown .nav-dropdown { background-color: #aaa; }
.nav-dropdown .menu-item { border-color: #a0a0a0; }
.nav-dropdown .nav-dropdown .menu-item {
  background-color: #777; /*모바일 3차 메뉴 배경컬러*/ 
  border-color: #a0a0a0; /*모바일 3차 메뉴 경계라인*/ 
}

/*메인 시작*/
.content { margin-top: 60px; }
.content .wrapper { padding: 200px 0; } /*내용 부분 상단 여백*/

 



 @media (min-width: 1110px) {/**********************************************피씨용**************/
/*메인 시작*/
.content .wrapper { padding: 30px 0 0 0; } /*내용 부분 상단 여백*/
.navlogo {  }  /*피씨일때 메뉴전체 배경 영역*/

.navlogo,.nav-container,.nav-container.is-visible {
  position: static;  
  text-align:center;margin: 0 auto; /*피씨용일때 카테고리 센터 정렬*/
  top: auto;
  left: auto;
  z-index: 9;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.nav-container, .nav-container.is-visible {
  visibility: visible;  height: auto;
  min-height: 0;  overflow-y: visible;
}

/*메뉴1.2.3차 Text 색상*/
.nav-menu .menu-link {
  display: block; /* 1 */
  text-decoration: none;
  color: #fff;
}
.nav-menu .menu-link2 {
  display: block; /* 1 */
  text-decoration: none;
  color: #000;
  padding: 10px 10px; /*카테고리 상하 여백*/
}


.nav-toggle { display: none; }

/* 1. Display menu items inline */
.nav-menu > .menu-item, .nav-menu > .menu-item.is-active {
  display: inline-block; /* 1 */
  text-align: left; /*피씨용일때 2.3차 카테고리 정렬*/
  background-color: #333;  /*피씨용일때 1차 카테고리 컬러*/
  border: 0;
}

/* Remove bottom border on last child */
.nav-menu > .menu-item:last-child { border: 0; }
.nav-menu .menu-item {
  -webkit-transition: background-color 0.15s ease-in-out,  color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out,  color 0.15s ease-in-out;
}

/* Remove +/- icons */
.has-dropdown:after { content: "" !important; }


/* 하위메뉴 있을때 생성되는 화살표 아이콘 
.nav-menu > .has-dropdown:after {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0;
  height: 0;
  margin-top: -2px;
  margin-left: -4px;
  content: "";
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;background-color: #;
}*/


.has-dropdown > .menu-link  { padding: 10px 15px 10px 15px; } /*피씨용 하위 메뉴가 있는 메뉴 설정*/

/* Re-style dropdowns for larger screens */
.nav-dropdown {
  display: block;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 145px;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;/*피씨용일때 2차메뉴 배경컬러*/
  box-shadow: 0 0 8px hsla(0, 0%, 0%, 0.15);
  visibility: hidden;
  -webkit-transition: visibility 0s linear 0.25s,  opacity 0.25s linear;
  transition: visibility 0s linear 0.25s,  opacity 0.25s linear;
}

.has-dropdown:hover > .nav-dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  border:1px solid #aaa;  
}

.nav-dropdown .menu-item { border: 0; }
.nav-dropdown .menu-item:hover, .nav-dropdown .nav-dropdown .menu-item:hover 
{ background-color: #E2E2E2;}/*피씨용일때 2.3차메뉴 룰오버배경컬러*/

.nav-dropdown .nav-dropdown, .nav-dropdown .nav-dropdown .menu-item 
{ background-color: #FBFBFB; }/*피씨용일때 3차메뉴 배경컬러*/

.nav-dropdown .nav-dropdown { z-index: 9999999999;  top: 0;  left: 100%;}
.content { margin-top: 0; }
.topspecialLinks {display:none}
}/**********************************************피씨용 END**************/






@media (min-width:100px) and (max-width:1139px){/*mobile and mini- tablet*/
.topguide_none {display:none}
.topspecialLinks {display:none}

/*mobile 하단 따라 다니는 스패셜메뉴*/
.topspecia_mobile {
	display:block; 
	padding: 5px 0 5px 0;
	background:url(../images/bottom_spmenubg.gif); 
	background-color: #E2E2E2;}
.topspecia_line {font-size: 11px;color:#fff; padding:0 10px 0 10px}

}
