@charset "utf-8";

/*한글 Pretendard*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/* 영문 poppins
@import url('https://webfontworld.github.io/Poppins/Poppins.css'); */

body { word-break: keep-all !important; font-family: "Pretendard Variable", Pretendard, -apple-system,'맑은 고딕';}
body, html { height:100%; padding:0; margin:0;}

a {color:inherit;text-decoration: none;}
a:hover {color:inherit;}

#pcmenu .mstep1 { position:relative;}
#pcmenu .mstep1 div { display:none;}
#pcmenu .mstep1:hover > div {
  display: block;
  position:absolute;
  padding-top:24px;
}
#pcmenu .mstep1:hover > div ul {
  background-color:rgba(248,251,254,0.5); 
  font-size:90%;
}

#topnav:hover { background-color:rgba(0,0,0,0.8) !important;transition: .4s;}
#topnav .worknav .mstep1 > a:hover { border-top:3px solid #ccc;transition: .1s;} 
#topnav .worknav .mstep1 .dropdown-item a:hover {color:#0f6cb2; }
#submenu h5 { font-size:120%; color:midnightblue;}
#submenu .two { border-bottom:1px solid #ccc; padding-bottom:22px; margin-top:12px; }
#submenu .two a { font-size:105%; margin-right:10px;}
#submenu .two a:hover { color:blueviolet; font-weight:bold;transition: .1s;}

.goods img { transition:all 1s ease-in;}
.goods img:hover { transform: scale(1.0); filter:brightness(50%);}

.goods2 img { transition:all 1s ease-in;}
.goods2 img:hover { transform: scale(1.1); filter:brightness(120%) drop-shadow(0 0 4px black);}

.goods2-2 img { transition:all 1s ease-in;}
.goods2-2 img:hover { transform: scale(1.1); filter:contrast(70%);}

.goods3 img { transition:all 1s ease-in;}
.goods3 img:hover { transform: scale(1.0); filter:opacity(0.3) drop-shadow(0 0 0 rgb(104, 101, 255));}

.goods4 img { transition:all 1s ease-in;}
.goods4 img:hover { transform: scale(1.0); filter:grayscale(100%) brightness(110%);}

.goods5 img { transition:all 1s ease-in;}
.goods5 img:hover { transform: scale(1.0); filter:sepia(100%);}

.goods6 img { transition:all 1s ease-in;}
.goods6 img:hover { transform: scale(1.0); filter:hue-rotate(45deg);}

.goods7 { position:relative;} 
.goods7 p {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s ease-in-out;
}
.goods7 img { transition:all 1s ease-in;}
.goods7:hover img { filter: brightness(70%); }
.goods7:hover p { opacity: 1; }

.goods8 .works_main { position: relative; transition: transform 0.8s; transform-style: preserve-3d; }
.goods8 .works_container:hover .works_main { transform: rotateY(180deg);transition:all 1s ease-in;}
.goods8 .works_front { overflow: hidden; }
.goods8 .works_back { position: absolute; backface-visibility: hidden; top:0; left:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; color: #fff; background-color: rgba(0, 0, 0, 0.5); transform: rotateY(180deg); transition:all 1s ease-in; ;}

.goods9 { position:relative;} 
.goods9 div { width:100%; height:100%; overflow: hidden; display: inline-block;}
.goods9 img { transition: transform 1s ease-in-out, filter 1s ease-in-out;}
.goods9 p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.goods9:hover img { transform: scale(1.2); transform-origin: center; filter: brightness(50%); transition: transform 1s ease-in-out, filter 1s ease-in-out; }
.goods9:hover p { opacity: 1; transition: opacity 1s ease-in-out; }

.pagetitle { font-size:400%;}

/* form 그누보드*/
.sct {clear:both;margin:0;padding:0;list-style:none}
.sct:after {display:block;visibility:hidden;clear:both;content:""}
.sct_li {position:relative}
.sct_noitem {padding:100px 0;text-align:center}
.sct img {position:relative} /* 리스트뷰 갤러리뷰 변경 시 ie6,7 에서 이미지 사라지는 문제 해결하기 위해 */
.shop_icon {display:inline-block;color:#fff;line-height:20px;padding:0 5px;font-size:0.92em;margin:1px;border-radius:2px}
.shop_icon_1 {background:#3ec1d3}
.shop_icon_2 {background:#ffb722}
.shop_icon_3 {background:#2dd49f}
.shop_icon_4 {background:#556ee6}
.shop_icon_5 {background:#ff5081}

.shop_icon_soldout {position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background:#000;background:rgba(0,0,0,0.5);text-align:center;line-height:215px;color:#fff;font-size:18px;font-weight:bold;letter-spacing:1px}
.shop_icon_soldout.h160{line-height:160px}

@media (min-width: 1200px) { 
   #submenu { width:30%;}
  .carousel-item > div { width:70%;padding-left:100px !important;}  
  .carousel-item h1 { font-size:350%;}
  .carousel-item p { font-size:125%;}
}
@media (max-width: 1599px) { 
   img {max-width:100%;height:auto;};
}
@media (max-width:450px) {
   #topnav span { font-size:80% !important;}
  .selectmenu { padding-left:5px !important; padding-right:5px !important; font-size:80% !important; width:80%;}
  .selectmenu select { font-size:16px !important;}
  #topnav span { font-size:80% !important;}
  .carousel-item p { font-size:70%;}
  .pagetitle { font-size:200%;}
}        

.carousel-item { /* 화면 전이 효과*/
  transition: transform 1s ease-in; 
}