@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,'Poppins'; font-size:small !important;}
body, html { height:100%; padding:0; margin:0;}

a {color:inherit;text-decoration: none;}
a:hover {color:inherit;}
#topnav:hover { background-color:rgba(0,0,0,0.3) !important;transition: .4s;}
#topnav .worknav a:hover { border-top:1px solid #ccc;transition: .1s;} 
#submenu h6 { font-size:105%; color:midnightblue;}
#submenu .two {  margin-top:12px; }
#submenu .two a {  display:block;}
#submenu .two a:hover { color:blueviolet; transition: .1s;}

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

.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%;}

@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:400px) {
   #topnav span { font-size:80% !important;}
   .pagetitle { font-size:300%;}
}
@media (max-width:300px) {
  #topnav span { font-size:40% !important;}
  .carousel-item p { font-size:70%;}
  .pagetitle { font-size:200%;}
}        

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