/* 서브 카테고리 */
.sub_category { margin:0 auto 20px; overflow:hidden; }
.sub_category ul { display:flex; justify-content:center; height:100%; }
.sub_category ul li { display:flex; justify-content:center; width:16%; margin:0.33%;}
.sub_category ul li a { display:flex; justify-content:center; flex-direction:column; align-items:center; border:1px solid #e0e0e0; border-radius:8px; padding:10px 1%; width:98%; font-size:0.95rem; color:#333; text-align:center; transition:0.3s; }
.sub_category ul li a:hover { border:1px solid #008068; background:#fff; color:#008068; transition:0.3s; }
.sub_category ul li.on a { border:1px solid #008068; background:#008068; font-weight:500; color:#fff;}


/* 리스트 */
.productListMain { display:flex; justify-content:; flex-wrap:wrap; }
.productListMain li { position:relative; width:22.7%; border-radius:20px; border:1px solid #dedede; height:100%; margin:1%; overflow:hidden; }
.productListMain li .img { display: block; }
.productListMain li .img img { width:100%; height:100%; }
.productListMain li .caption { padding:20px 0; width:100%; font-size:1.0em; line-height:1.4em; text-align:center;}


/* 뷰 */
.Viewtitle { display:none;}
.shopView {position:relative; overflow:hidden; width:100%; margin:10px auto 0;}
.shopView > .top {display:flex; justify-content:space-between;}
.shopView > .top > .imgs { display:flex; align-items:; width:60%; }
.shopView > .top > .imgs > .bigImg { width:100%; border-radius:30px; border:1px #e0e0e0 solid; overflow:hidden;}
.shopView > .top > .imgs > .bigImg > img { width:100%; height:100%; border-bottom:0px#e0e0e0 solid;}
.shopView > .top > .imgs > .thumImg { display:none; width:100%; overflow:hidden; }
.shopView > .top > .imgs > .thumImg img { width:20%; float:left; }

.shopView > .top > .contents { display:flex; flex-direction:column; background:#f9f9f9; border:1px #e0e0e0 solid; border-radius:25px; width:33%; padding:2% 1%; overflow:hidden; padding-bottom: ; }
.shopView > .top > .contents > .cate { background:#1dac4a; border-radius:5px; margin-bottom:15px; padding:10px 5px; width:20%; font-size:0.9em; color:#fff; font-weight:400; line-height:1.2em; text-align:center; }
.shopView > .top > .contents > .title { margin:0 0 30px; font-size:2.0em; color:#222; font-weight:600; line-height:1.3em; text-align:left; }
.shopView > .top > .contents > .model { margin:5px 0; font-size:1.5em; color:#008068; font-weight:500; line-height:1.2em; text-align:left; }
.shopView > .top > .contents > .text { border-top:1px solid#333; margin-top:25px; padding-top:25px; }
.shopView > .top > .contents > .text ul li { list-style-type:disc; list-style-position:outside; margin-left:30px; padding-left:0; font-size:1.0em; font-weight:400; line-height:2.0em; }
.shopView > .top > .contents > .file { margin-top:25px; margin-left:50px; }
.shopView > .top > .contents > .file a { color:#000000; font-size: 12px;   }
.shopView > .top > .contents > .btn { display:flex; margin-top:auto; margin-left:auto; }
.shopView > .top > .contents > .btn > div { margin: 20px 0 0 0; }
.shopView > .top > .contents > .btn > .type1 > a{ font-weight:500; color:#fff; background:#fe434c; width:130px; line-height:38px; border:1px#fe434c solid; text-align: center; display:block;}
.shopView > .top > .contents > .btn > .type2 > a{font-weight:500; margin-left:5px; color:#353535; background: linear-gradient(to bottom, #efefef 100%, #fff 100%); width:130px; line-height:40px; border:1px#cdcdcd solid; text-align: center; display:block;}
.shopView > .top > .contents > .btn > .type2 > a:hover{color:#fff; background:#666; border:1px#666 solid; }

.shopView > .event_banner {margin:60px 0;}
.shopView > .event_banner img { width:100%; max-width:1600px; }

.shopView > .detailView { clear:both; border-bottom:1px solid #dde2e5; }
.shopView > .detailView > .title { background:#929faf; padding:15px; font-size:1.7em; font-weight:500; color:#fff; letter-spacing:0; text-align:center; }
.shopView > .detailView > .contents { margin:30px; text-align:center; overflow:hidden; }
.shopView > .afterNote {display:block;}


/* 탭메뉴 */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2) { display:none }
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2) {display:block}

 /* 라벨 기본 스타일 지정 */
#css_tabs > label {
   display:inline-block;
   font-variant:small-caps;
   font-size:1.0em;
   padding:10px 0; margin-right:-4px;
   text-align:center;
   width:50%;
   line-height:1.8em;
   font-weight:;
   border-radius:0;
   background:#f5f5f5;
   color:#;
   border-top:1px solid#d8d8d8;
  /* border-width:1px 1px 0; */
	 z-index:9999;
 }
#css_tabs > label:hover {
   cursor:pointer
 }
#css_tabs label[for=tab1] {
   margin-left:0
 }

 /* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), /*#css_tabs > label[for=tab1]:hover, */
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2) {
   background:#008068; border:0px solid#008068;
   color:#fff; font-weight:500; font-size:1.05em;
 }

 /* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content { padding-top:40px; margin-top:; border-top:1px solid#008068; height:100%; font-size:1.0em; z-index:9; } 
#css_tabs .tab2_content { padding-top:40px; margin-top:; border-top:1px solid#008068; height:100%; font-size:1.0em; z-index:9; } 
#css_tabs .tab1_content .contents, #css_tabs .tab2_content .contents { width:90%; margin:0 auto; }
#css_tabs .tab1_content .contents img, #css_tabs .tab2_content .contents img { width:100%;}
#css_tabs .tab2_content .file_wrap {border-top:1px solid#e0e0e0; margin-top:30px; padding-top:30px;}
#css_tabs .tab2_content .file_name { margin-bottom:20px; text-align:center;}
#css_tabs .tab2_content .file_btn a { display:block; background:#4d4d4d; border-radius:30px; border:1px solid#4d4d4d; width:180px; margin:0 auto; padding:15px 0; font-size:1.1em; color:#fff; left:2.5em; text-align:center; letter-spacing:1.0px; transition:all 0.5s}
#css_tabs .tab2_content .file_btn a:hover { background:#F00; border:1px solid#F00; transition:all 0.5s }
#css_tabs .tab1_content img, #css_tabs .tab2_content img { width:80%; margin:0 auto;}



@media (max-width:767px){
.sub_category { margin:0 auto 20px; overflow:hidden; }
.sub_category ul { display:flex; justify-content:space-between; flex-wrap:wrap; height:100%; }
.sub_category ul li { display:flex; justify-content:center; width:49%; margin:1% 0;}
.sub_category ul li a { display:flex; justify-content:center; flex-direction:column; align-items:center; border:1px solid #e0e0e0; border-radius:8px; padding:10px 1%; width:98%; font-size:0.95rem; color:#333; text-align:center; transition:0.3s; }
.sub_category ul li a:hover { border:1px solid #008068; background:#fff; color:#008068; transition:0.3s; }
.sub_category ul li.on a { border:1px solid #008068; background:#008068; font-weight:500; color:#fff;}	

/* 리스트 */
.productListMain { display:flex; justify-content:; flex-wrap:wrap; }
.productListMain li { position:relative; width:45%; border-radius:10px; border:1px solid #dedede; height:100%; margin:2%; overflow:hidden; }
.productListMain li .img { display: block; }
.productListMain li .img img { width:100%; height:100%; }
.productListMain li .caption { padding:12px 0; width:100%; font-size:1.0em; line-height:1.4em; text-align:center;}

	 
/* 뷰 */
.shopView {position:relative; overflow:hidden; width:100%; }
.shopView > .top {display:flex; justify-content:space-between; flex-wrap:wrap; }
.shopView > .top > .imgs { display:flex; align-items:center; width:100%; }
.shopView > .top > .imgs > .bigImg { width:100%; overflow:hidden;}
.shopView > .top > .imgs > .bigImg > img { border:1px #e0e0e0 solid; border-radius:30px; width:100%; height:100%; border-bottom:0px#e0e0e0 solid;}
.shopView > .top > .imgs > .thumImg { display:none; width:100%; overflow:hidden; }
.shopView > .top > .imgs > .thumImg img { width:20%; float:left; }

.shopView > .top > .contents { display:flex; flex-direction:column; background:#f9f9f9; border:1px #e0e0e0 solid; border-radius:20px; padding:2% 4%; width:92%; margin-top:20px;overflow:hidden; }
.shopView > .top > .contents > .cate { background:#1dac4a; border-radius:5px; margin-bottom:10px; padding:5px; width:40%; font-size:0.9em; color:#fff; font-weight:400; line-height:1.2em; text-align:center; }
.shopView > .top > .contents > .title { margin:10px 0 5px; font-size:1.3em; color:#222; font-weight:600; line-height:1.4em; text-align:left; }
.shopView > .top > .contents > .model { margin:5px 0; font-size:1.2em; color:#a10c0c; font-weight:500; line-height:1.2em; text-align:left; }
.shopView > .top > .contents > .text { border-top:1px solid#333; margin-top:12px; padding-top:15px; }
.shopView > .top > .contents > .text ul li { list-style-type:disc; list-style-position:outside; margin-left:20px; padding-left:0; font-size:1.0em; font-weight:400; line-height:1.6em; }

.shopView > .top > .contents > .btn { position:relative; float:right; margin:20px 0 0; padding:0; }
.shopView > .top > .contents > .btn > div { float:left; margin:10px 0 0 2px;}
.shopView > .top > .contents > .btn > .type1 > a{ color:#fff;font-size: 0.9rem; background:#fe434c; width:80px; line-height:30px; border:1px#fe434c solid; text-align: center; display:block;}
.shopView > .top > .contents > .btn > .type2 > a{ color:#353535;font-size:0.9rem; background: linear-gradient(to bottom, #efefef 100%, #fff 100%);width:80px; line-height:30px; border:1px#cdcdcd solid; text-align: center; display:block;}

.shopView > .event_banner {margin:30px 0;}
.shopView > .event_banner img { width:100%; }

.shopView > .detailView {clear:both; margin-top:40px; width:100%; border-bottom:1px solid #dde2e5; }
.shopView > .detailView > .title { background:#929faf; padding:10px; font-size:1.1em; font-weight:500; color:#fff; letter-spacing:0; text-align:center; }
.shopView > .detailView > .contents { margin:20px 0; text-align:center; }
.shopView > .detailView > .contents img { width:100%; }
.shopView > .afterNote {display:none;} 

/* 탭메뉴 */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2) { display:none }
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2) {display:block}

 /* 라벨 기본 스타일 지정 */
#css_tabs > label {
   display:inline-block;
   font-variant:small-caps;
   font-size:0.9em;
   padding:10px 0; margin-right:-4px;
   text-align:center;
   width:50%;
   line-height:1.4em;
   font-weight:;
   border-radius:0;
   background:#f5f5f5;
   color:#;
   border-top:1px solid#d8d8d8;
  /* border-width:1px 1px 0; */
	 z-index:9999;
 }
#css_tabs > label:hover {
   cursor:pointer
 }
#css_tabs label[for=tab1] {
   margin-left:0
 }

 /* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), /*#css_tabs > label[for=tab1]:hover, */
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2) {
   background:#22966f; border:1px solid#a10c0c;
   color:#fff; font-weight:500; font-size:0.9em;
 }

 /* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content { padding-top:20px; margin-top:; border-top:1px solid#22966f; height:100%; font-size:1.0em; z-index:9; } 
#css_tabs .tab2_content { padding-top:20px; margin-top:; border-top:1px solid#22966f; height:100%; font-size:1.0em; z-index:9; } 
#css_tabs .tab1_content .contents, #css_tabs .tab2_content .contents { width:100%; }
#css_tabs .tab1_content .contents img, #css_tabs .tab2_content .contents img { width:100%; }
#css_tabs .tab2_content .file_wrap {border-top:1px solid#e0e0e0; margin-top:20px; padding-top:20px;}
#css_tabs .tab2_content .file_name { margin-bottom:10px; text-align:center;}
#css_tabs .tab2_content .file_btn a { display:block; background:#4d4d4d; border-radius:30px; border:1px solid#4d4d4d; width:140px; margin:0 auto; padding:10px 0; font-size:0.9em; font-weight:500; color:#fff; left:2.0em; text-align:center; letter-spacing:0.5px; transition:all 0.5s}
#css_tabs .tab2_content .file_btn a:hover { background:#F00; border:1px solid#F00; transition:all 0.5s }
#css_tabs .tab1_content img, #css_tabs .tab2_content img { width:100%; margin:0 auto;}

}