img { max-width:100%;  }

#hd {  } 
.hd_login a { color:#777;  } 
.hd_login li:first { border-left:0;  } 

#hd_define li.active a { color:#4158d1; }

/***** 구글 웹폰트 
font-family: 'Akaya Kanadaka', cursive; 
font-family: 'Arima Madurai', cursive; @100;200;300;400;500;700;800;900

font-family: 'Comfortaa', cursive; @300;400;500;600;700
font-family: 'Fredericka the Great', cursive;
font-family: 'Gothic A1', sans-serif; @100;200;300;400;500;700;800;900
font-family: 'Lobster', cursive;

font-family: 'Nova Flat', cursive;
font-family: 'Righteous', cursive;
*****/ 

/* *** */
.h0 { width: 100%; height: 0px; clear:both;  }
.h10 { width: 100%; height: 10px; clear:both;  }
.h20 { width: 100%; height: 20px; clear:both;  }
.h30 { width: 100%; height: 30px; clear:both;  }
.h40 { width: 100%; height: 40px; clear:both;  }
.h50 { width: 100%; height: 50px; clear:both;  }
.h60 { width: 100%; height: 60px; clear:both;  }
.h70 { width: 100%; height: 70px; clear:both;  }
.h80 { width: 100%; height: 80px; clear:both;  }
.h90 { width: 100%; height: 90px; clear:both;  }
.h100 { width: 100%; height: 100px; clear:both;  }
.h200 { width: 100%; height: 200px; clear:both;  }
.h300 { width: 100%; height: 300px; clear:both;  }

.rh1 { width: 100%; height: 1rem; clear:both;  }
.rh2 { width: 100%; height: 2rem; clear:both;  }
.rh3 { width: 100%; height: 3rem; clear:both;  }
.rh4 { width: 100%; height: 4rem; clear:both;  }
.rh5 { width: 100%; height: 5rem; clear:both;  }
.rh6 { width: 100%; height: 6rem; clear:both;  }
.rh7 { width: 100%; height: 7rem; clear:both;  }
.rh8 { width: 100%; height: 8rem; clear:both;  }
.rh9 { width: 100%; height: 9rem; clear:both;  }
.rh10 { width: 100%; height: 10rem; clear:both;  }



/******* shop ********/

#hd_menu  { background:#56483d } 
#hd_sch #sch_str { background:#bf1d1d } 
#hd_sch #sch_str::placeholder { color:#fafafa;  }

.sct_img img:hover  { transform:scale(1.01); opacity:0.95}


/* 메인메뉴 : shop.topmenu.php */
#gnb {position:relative;background:#1e1311; padding:0 195px;  }
#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap {width:1000px; margin:0 auto;position:relative}
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3}
#gnb #gnb_1dul {font-size:0.825em;padding:0;zoom:1}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli {float:left;width:200px; line-height:55px;padding:0px;position:relative; text-align:center; }
#gnb .gnb_1dli:hover > a {color:#48392e;
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

#gnb .top_ex_menu,  #gnb .top_ex_menu .gnb_2dul  { width:180px; } 
#gnb .top_ex_menu .gnb_2dli  { width:178px; }

#gnb_1dul > li:nth-child(5) { margin-left:30px; background:#405075  !important; }

.gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:10px;height:10px;overflow:hidden;}
.gnb_1da {display:block;padding:0 15px;color:#fafafa;text-decoration:none; font-size:1.5em; }
.gnb_1dli.gnb_al_li_plus .gnb_1da{padding-right:25px}
.gnb_2dli:first-child {border:0}
.gnb_2dul {display:none; width:200px; min-width:120px;padding-top:2px; padding:2px 0px 0px 0px;}
.gnb_2dul .gnb_2dul_box {border:1px solid #e0e2e5;border-top:0;padding:0;
-webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
-moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)}
.gnb_2dli { width:200px }
.gnb_2da {display:block;padding:0 10px;line-height:40px;background:#fff;color:#080808;text-align:left;text-decoration:none;  }
a.gnb_2da:hover {color:#3a8afd;background:#f7f7f8;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out}

.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {}
.gnb_2da:focus, .gnb_2da:hover {color:#3a8afd}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0}
.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808}
.gnb_wrap .gnb_empty a {color:#3a8afd;text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555}

#gnb .gnb_menu_btn {background:none;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px}
#gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
#gnb .gnb_mnal {float:right;padding:0}

#gnb_all {display:none;position:absolute;border:1px solid #c5d6da; width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2)}
#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}



#knb { width: 1200px; margin:0 auto; height:300px; background:#1e1311; display:absolute; top:0; left:0; z-index:99999}
#knb .knb_1dli {float:left;width:200px; line-height:48px;padding:0px;position:relative; text-align:center; font-size:15px; display:inline-block; }
#knb .knb_2dli {float:left;width:200px; height:36px; padding:3px;  line-height:30px;padding:0px;position:relative; text-align:center; font-size:14px;  } 

#knb .knb_1da {display:block;padding:0 15px;color:#fafafa;text-decoration:none; font-size:1.12em;}
#knb .knb_2da {display:block;padding:0 20px;line-height:40px;background:;color:#fafafa;text-decoration:none}

#knb .knb_2da:hover, #knb .knb_1da:hover  { opacity:0.7;  }

#knb .top_ex_menu,  #knb .top_ex_menu .gnb_2dul  { width:180px; } 
#knb .top_ex_menu .gnb_2dli  { width:178px; }

#knb_1dul > li:nth-child(5) { margin-left:30px; }


@media (max-width: 1150px) {
	#gnb { zoom:0.85; }
	#knb { zoom:0.9; margin-left:-5%;  }
	#side_menu { top:180px; } 
}

/****** font family : 글씨체 ***********/ 
.gnb_1da, .knb_1da {font-family: 'Arima Madurai', cursive; font-weight:300;}
.gnb_2da, .knb_2da { font-family: 'sunflower', sans-serif; font-weight:300; }

/*******  사이드 애니메이션 *******/
.fa-spin {
  -webkit-animation: fa-spin 1s 4 linear;
  animation: fa-spin 1s 4 linear;
  color:#ab553c !important; 
}

#quickEnd { height:0px; background-color:none; opacity:0; }

#quickEnd {
    animation: kwyQuick 6s;
}
@keyframes kwyQuick {
    from {
        height:50px; opacity:1; 
    }
    to {
        height:0px; opacity:0; 
    }
}#quickEnd { height:0px; background-color:none; opacity:0; }

#quickEnd {
    animation: kwyQuick 6s;
}
@keyframes kwyQuick {
    from {
        height:50px; opacity:1; 
    }
    to {
        height:0px; opacity:0; 
    }
}


.it_etc_expl, .it_package_color { padding:10px 0 0; padding:2px; line-height:2em; }
.it_package_color { height:70px;  }
.it_package_color > img { width: 10%; float:left; } 
.it_package_color img:nth-child(1n) { }

.it_foil_color { height:130px; }
.it_foil_color > img { width: 10%; float:left; } 
.it_foil_color img:nth-child(10n+1) {  }
.it_foil_color input { padding:5px 0; }

.it_package_preview, .it_foil_preview {display:none; width:99.5%; height:198px; overflow:hidden; padding:0 2px;}

#btnFileUp {}
.btn-file-up { padding:5px 10px; border-radius:4px; border:1px solid #ccc; cursor:pointer; font-size:0.875em; background-color:#fff;  } 
.btn-file-up:hover { background-color:#3a8afd; color:#fff; border-color:#28528e }

.bs-unit { height:200px; border:1px solid #cdcdcd; border-radius:2px;   }


.basic-prd-cost { padding:10px 0  }


/***** item.php 제품 사진 하단   *****/ 
.gallery_kwy { width:300px; margin:auto;   }
.gallery_kwy .owl-carousel .owl-item img {  }
.gallery_kwy .owl-prev span, .gallery_kwy  .owl-next span { font-size:3em !important; }
.gallery_kwy .owl-prev { margin-left:0px; } 
.gallery_kwy .owl-next { margin-left:260px; }

.category_top_pk { font-size:1.1em; padding:5px 10px; line-height:2em;  } 
.cut-line-file a { font-family:'Malgun Gothic', dotum, sans-serif;  }

.category_head_top { width:1200px; height:200px;  text-align:center; line-height:2em; font-size:1.2em; background:none;  } 
.category_head_top div:nth-child(1) { 
	font-size:2em; line-height:2.2em; color:#48392e; font-family:'Arima Madurai', cursive; font-weight:700;  
}

.gallery_head_top { width:1200px; height:200px;  text-align:center; line-height:2em; font-size:1.2em; background:none;  } 
.gallery_head_top div:nth-child(1) { 
	font-size:2em; line-height:2.2em; color:#48392e; font-family:'Arima Madurai', cursive; font-weight:700;  
}

/************ 패럴랙스 **************/

.parallax {
  /* The image used */
  background-image: ;

  /* Full height */
  height: 300px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: ;

  /* Full height */
  height: 300px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

.parallax-cat-title {
	display:inline-block; position:relative; bottom: -230px; width:100%; height:40px; margin-top:10px; background-color:#ffffff7a; line-height:40px; font-size:1.2em; padding-left:20px; font-family: 'Arima Madurai', cursive; font-weight:500;
}


/* video trailer / youtube vimeo */
.video_trailer  {   
	position:relative; 
	padding-bottom: 56.25%; /* 16/9 ratio */
    height:auto;
    overflow: hidden;
    margin: 0;
	background:#e6e2e2; 
}
.video_trailer iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

#sct_hhtml {   }
.cate_video { height:300px !important; overflow:hidden;  }

.cate_video_trailer  {   
	position:relative; 
	padding-bottom: 56.25%; /* 16/9 ratio */
    overflow: hidden;
    margin: 0;
	background:#e6e2e2; 
}

.cate_video_trailer iframe {
	position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
} 

.cate_video_trailer.customdesign iframe {
	top:-200px; 
} 

.cate_video_trailer.designercollection iframe {
	top:-300px; 
} 

.cate_video_trailer .trailer-title { position:relative; z-index:9999; width:100%; height: 40px; background:#ffffff50; top:240px; line-height: 40px; font-size:1.4em; padding-left:20px; padding-top:2px; font-family:'Arima Madurai', cursive; font-weight:500;   }  

.cate_video_trailer .trailer-bg { background-image:url(http://115.68.229.211/pk_yc/data_kwy/index-banner/design-video-bg-2.jpg); position:relative; z-index:99; width:100%; height:300px; top:-40px; left:0;  opacity:0;  animation: fadeout 5s;   -moz-animation: fadeout 5s; /* Firefox */   -webkit-animation: fadeout 5s; /* Safari and Chrome */   -o-animation: fadeout 5s; /* Opera */ } 

.cate_video_trailer.customdesign .trailer-bg { background-image:url(http://115.68.229.211/pk_yc/data_kwy/index-banner/chocolate-video-bg-1.jpg);  
} 

.cate_video_trailer.photonclipart .trailer-bg { background-image:url(http://115.68.229.211/pk_yc/data_kwy/index-banner/chocolate-video-bg-2.jpg);  
} 

.cate_video_trailer.designercollection .trailer-bg { background-image:url(http://115.68.229.211/pk_yc/data_kwy/index-banner/chocolate-video-bg-3.jpg);  
} 

.cate_video_trailer.customgallery .trailer-bg { background-image:url(http://115.68.229.211/pk_yc/data_kwy/index-banner/chocolate-video-bg-5.jpg);  
} 

.main_video { height:300px !important; overflow:hidden;  }

.main_video_trailer  {   
	position:relative; 
	padding-bottom: 56.25%; /* 16/9 ratio */
    overflow: hidden;
    margin: 0;
	background:#e6e2e2; 
}

.main_video_trailer iframe {
	position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
} 

.main_video_trailer .trailer-title { position:relative; z-index:9999; width:100%; height: 40px; background:#ffffff50; top:240px; line-height: 40px; font-size:1.4em; padding-left:20px; padding-top:2px; font-family: 'Arima Madurai', cursive; font-weight:500;   }  

.main_video_trailer .trailer-bg { background-image:url(http://115.68.229.211/pk_yc/data_kwy/index-banner/chocolate-video-bg-0.jpg); position:relative; z-index:999999; width:100%; height:300px; top:-40px; left:0;  opacity:0;  animation: fadeout 7s;   -moz-animation: fadeout 7s; /* Firefox */   -webkit-animation: fadeout 7s; /* Safari and Chrome */   -o-animation: fadeout 7s; /* Opera */ } 

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.custom_gallery_head { height:300px; overflow:hidden;  }

#sit { font-family:'malgun gothic','dotum' }

.sit_ov_tbl td { padding:5px 0;  } 
.sit_ov_tbl td strong { line-height:14px; }

/** add_column 추가한 컬럼 **/
.add_column { background:#111 !important; color:#fff !important; padding:0 10px !important; }

/* 폰트 클래스 */
.main-list-title {font-family: 'Arima Madurai', cursive;  font-weight: 400; font-size:1.2em;   } 

.main-list-header h2 { width:100%; text-align:center !important; } 

.main_owl_pager {display:none;} 

.gallery-view-top { width:100%; margin:20px 0 70px; text-align:center; }
.gallery-view-top img {   }


/*** 위로가기 버튼 ***/
#return-to-top { 
	display:none; 
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(125, 75, 63, 0.7);
    border: 1px solid #fafafa;
	border-radius:5px; 
    width: 55px;
    height: 55px; 
	padding-top:6px; 
	z-index:9999; 
	text-align:center;
	color:#fff; 
	cursor:pointer; 
}
#return-to-top:hover {
    background: rgba(125, 75, 63, 1); 
		padding-top:5px; 
}