/* BASIC css start */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* 검색영역 */
.searchArea{
    height: 30px;  
    margin: 20px 20px 30px 20px; 
    border-radius: 30px;
background-color: transparent; }
.searchArea form {
    height:100%; 
    background-color: #FFF; 
    border: 0.3em solid #EB7530; 
    border-radius: 30px; }
.searchArea .searchWrap { 
    position:relative;
    display:block;
    height:100%;
    box-sizing:border-box;
}
.searchArea input {
    border:0; height:100%; padding: 0 30px 0 20px;
    width:96%;
    line-height: 28px;
    box-sizing:border-box;
    font-size:12px; color:#777; }
.searchArea .searhBtn{position:absolute;top:0;right:10px;bottom:0;display:block;width:30px;text-align:center;color:#111;font-size:18px;padding-top:2px;}

/* 롤링배너 */
#mainVisual { visibility: hidden; position:relative; overflow:hidden;  }
#mainVisual img {width:100%;}
#mainVisual .bx-pager{position:absolute;bottom:10px;left:0;right:0;z-index:60;text-align:center;}
#mainVisual .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;}
#mainVisual .bx-pager-link{display:inline-block;width:18px;height:3px;font-size:0;margin:2px;background-color: rgba(0,0,0,0.4)}
#mainVisual .bx-pager-link.active{width: 30px; background-color: rgba(0,0,0,0.8);}

/* 카테고리 */
.cate {
display: inline-block;
margin: 0px 0 0 0;
padding: 0;
  width: 100%;
 justify-content: center;
text-align: center;
 background-color: #FFF;
}
.cate .list_category li, .list_category2 li {
  list-style: :none;
  display: inline-block;
}
.cate .list_category li a,.list_category2 li a {
  display:block;
line-height: 34px;
  color:#3a3a3a;
  text-align:center;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
  font-size: 12px;}

.list_category {
 margin: 0; padding: 0;
    display: inline-block; 
    border-top: 2px solid #ddd;
  width: 100%; height: 45px;
}

.list_category2 {
  border-top: 1px dashed #a7a7a7; 
  display: inline-block;
top: 45px; 
float: left;
  left: 9px;
//position: absolute;
border-bottom:1px dashed lightgreen; 
margin: 0;
padding: 0;
width: 100%;
    height: 40px;
}
.cate, .list_category, .list_category2 {
  font-weight: 700;
}

.cate .list_category li a::before,.list_category2 li a::before {
  content: " | ";
    color: lawngreen;
}

.cate .list_category li a::after,.list_category2 li a::after {
  content: "___";
    color: transparent;
}



/* 메인 서브 배너 */
.main .subbnArea {margin: 10px 0 0;}
.main .subbnArea a { display: block;}
.main .subbnArea .topBannerLeft {float:left;width:50%;box-sizing:border-box; padding:6px 3px 0 0 }
.main .subbnArea .topBannerRight {float:right;width:50%;box-sizing:border-box; padding:6px 0 0 3px }
.main .subbnArea img {width:100%; vertical-align:top;}

/* tabProduct */
#tabProduct {visibility:hidden;position:relative;margin-top: 30px;}
#tabProduct .newCate_prod { position:relative }
#tabProduct .newCate_prod .newCateTab {zoom: 1;overflow: hidden;}
#tabProduct .newCate_prod .newCateTab li{ float:left; width:20%; }
#tabProduct .newCate_prod .newCateTab li a {display:block;height: 37px;font-size: 11px;color:#999;text-align:center;line-height: 37px;border-top: 1px solid #ddd;border-bottom:1px solid #a7a7a7;background:#f8f8f8;text-overflow: clip;white-space: nowrap;overflow: hidden;}
#tabProduct .newCate_prod .newCateTab li a.active { color:#111; background-color:#fff; border: 1px solid #a7a7a7; border-bottom: 1px solid #fff; }
#tabProduct .newCate_prod .newCateList {position:relative;padding: 15px 0 0;}
#tabProduct .newCate_prod .newCateList a {display:block;}
#tabProduct .newCate_prod .slideList .item-cont { padding: 0 2px; }
#tabProduct .newCate_prod .slideList ul { zoom:1; overflow:hidden;}
#tabProduct .newCate_prod .slideList li {float: left;position:relative;width: 33.3%;padding: 0 2px 4px;box-sizing:border-box; }
#tabProduct .newCate_prod .slideList li.item1 {width: 66.6%;}
#tabProduct .newCate_prod .slideList li .thumb img {width:100%;}
#tabProduct .newCate_prod .slideList li .thumb:hover img {opacity:0.7; filter:alpha(opacity=70);}
#tabProduct .newCate_prod .slideList .ncsNum {display: block;position: absolute;top: 0;left: 2px;width: 48px;height: 18px;line-height: 18px;text-align: center;background: #000;opacity:0.6;filter:alpha(opacity=60);color:#fff;z-index: 9;font-size: 11px;}
#tabProduct .newCate_prod .prd-info-bx {position:absolute;bottom:10px;left:0;right:0;text-align:center; }
#tabProduct .newCate_prod .prd-info-bx .prd-info {background:#fff;opacity:0.8;filter:alpha(opacity=80);padding: 2px 0;}
#tabProduct .newCate_prod .prd-info-bx .prd-price del {color:#999;font-weight: normal;font-size: 12px;margin-right: 2px;}
#tabProduct .newCate_prod .prd-info-bx .prd-price {font-weight: bold;color: #292929;}

/* 메인 중간 배너 */
.mdlArea01 { margin-top: 40px; }
.mdlArea02 {margin-top: 40px;}
.mdlArea01 img , .mdlArea02  img {width:100%; max-width:100%; height:auto;}

/* weeky Best */
#contents .weeklyBestWrap {position: relative;overflow: hidden;}
#contents .weeklyBestWrap > a {font-size: 11px;position: absolute;top: 0px;right: 5px;display: block;height: 20px;padding-top: 14px;}
#contents .weeklyBestWrap > a i { }
#contents .weeklyBestWrap .weekly-container {padding: 0 10px;}
#contents .weeklyBestWrap .swiper-wrapper {}
#contents .weeklyBestWrap .swiper-slide {width: 120px;margin-right: 10px;}
#contents .weeklyBestWrap .swiper-slide a { }
#contents .weeklyBestWrap .swiper-slide dl dt.thumb img { width: 100% }
#contents .weeklyBestWrap .swiper-slide dl { text-align: center }
#contents .weeklyBestWrap .swiper-slide dl dd { padding: 10px 0 0 }
#contents .weeklyBestWrap .weekly-pagination {position: absolute;top: 43px;left: 10px;}

/* 메인 타이틀 */
.main h3 {font-size: 20px;display: inline-block;margin: 80px auto 15px;font-weight: bold;width: 100%;text-align: center;}

.instaImg {width:100%;}
.instaImg img {width:100%; height:auto;}

/* youtube */

/*
.youtb {
     //width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
margin-top: 20px;
 position: relative; padding-bottom: 56.25%; height: 0;
}

.embed-container { 
position: relative;
overflow: hidden; 
width: 640px; height: 360px;
}

*/

.video-container { position: relative; padding-bottom:56.25%; margin-top: 30px; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
.entry-content img, .entry-content iframe, .entry-content object, .entry-content embed { max-width: 100%;}

/* 리뷰 외*/


/* grid layout */
ol, ol::before, ol::after, 
ol *, ol *::before, ol *::after { margin: 0; padding: 0; box-sizing: border-box }

ol { 
  display: flex;
  gap: 1rem;
  
  margin-inline: auto;
  padding-block: 0.2rem;
  
  list-style: none;
  counter-reset: count;

}

/* card layout/styling */
ol > li {
  --card-background-color: #f3f2f1;
  --card-border-radius: 0.5rem;
  --card-padding-block: 1.5rem;
  --card-padding-inline: 1rem;
  
  --outset-size: 0.75rem;
  --outset-background-color: #c3c2c1;
  
  --number-font-size: 3rem;
  --number-overlap: 0.5rem;
  --number-font-weight: 500;
  
  margin: 0.2em;
  margin-top: calc(var(--number-font-size) - var(--number-overlap));
  border-radius: var(--card-border-radius);
  padding-block: var(--card-padding-block);
  padding-inline: var(--card-padding-inline);
  
  background-color: var(--card-background-color);
  box-shadow: 
    inset 1px 1px 0px rgb(255 255 255 / .5),
    inset -1px -1px 0px rgb(0 0 0 / .25),
    calc(var(--outset-size) * .25) calc(var(--outset-size) * .25) calc(var(--outset-size) * .5) rgb(0 0 0 / .25);
  position: relative;
  counter-increment: count;
    text-align: justify;
    float:left;
    display: inline-block;
}


ol > li > p {
   text-align: justify;      
}

.w60{width: 260px;}
.w40{width: 220px;  
    margin-right:50px;}

/* card content */
h1 {
  font-size: 2.5rem;
  font-family: 'Oswald', sans-serif;
  font-weight: normal
}
.icon{
  font-size: 2rem;
  text-align: center;
  margin-bottom: calc(var(--card-padding-block) * .5);
}
.title {
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  color: var(--accent-color)
}
.descr {
  color: var(--text-color);
  font-size: 0.75rem;

}


.notice_m01 { 
   display: flex;
    border: 1px solid red;
background-image: url(http://joo2234.img13.kr/2022/layout/main_bt_bg_notice.jpg);
background-size: 231px;
background-repeat: no-repeat;
 }



.notice_m01_sub1 {
   display:inline-block !important;
width: 40% !important;
 }

.notice_m01_sub2 {
   display:inline-block !important;
width: 60% !important;;
 }


.review_3 {
     width: 96%;
     display: flex;
     justify-content: center;
     align-items: center;
left: 130px;
padding : 0 0 0 50px;
margin: padding : 0 0 0 50px;
border: 1px solid red;
}

.table_review {
margin: padding : 0 0 0 150px;
width: 94%;

}

.h3_main2 {
font-weight: bold;
font-family: 'Noto Sans KR', sans-serif; font-size: 40px; 
}

/* button */

.button001 {
  background-color: #eb752e; /* Green */
  border: none;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
font-weight: 400;
  margin: 4px 2px;
  cursor: pointer;
width: 120px;
}
.button001 a {  color: white; !important;}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50px;}



/* 키워드 및 메인 상단 */

.w3-button {width:auto; margin-bottom: 8px; border-radius: 50px;}
    

.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}

.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}

.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
    
.w3-button:hover{color:#3a3a3a !important;border: 0px solid #ddd !important; font-weight: bold;}
    
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}


.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container {padding:0.01em 16px}


    

/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}

    

/* main_promotion_test  */

* {box-sizing: border-box;}

.mySlides {display: none;}

/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text_prm {
  color:#3a3a3a;
  font-size: 15px;
  padding: 8px 20px;
  position: absolute;
  width: 90%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 40px;
  width: 580px;
  margin: 20px 0;
  background-color: #FFF;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
background-color: #FFF;
border-bottom: 2px solid #EB7530;
font-weight: 700;
font-family: 'Noto Sans KR', sans-serif; font-size: 20px;
    color: #EB7530;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-durat: 1.5s;
}

@keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}



/* Create two equal columns that floats next to each other */
.column01 {
  float: left;
  width: 100%;
  height: 450px; /* Should be removed. Only for demonstration */
}

.column02 {
  float: left;
  width: 400px;
  padding: 10px;
}
.main_promotion {
font-weight: 200;
font-family: 'Noto Sans KR', sans-serif; font-size: 16px;
    color:#ddd;
}
/* Clear floats after the columns */
.main_promotion:after {
  content: "";
  display: table;
  clear: both;
margin-bottom: 100px;
}



//main_promotion_test  
    
/* BASIC css end */