@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {
    background: rgba(103, 103, 103, .5); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
::-webkit-scrollbar-track {
    background: rgba(220, 20, 60, .1);  /*스크롤바 뒷 배경 색상*/
}

:root {
  --luce-black: #000;
  --luce-pink: #FFE1E9;
  --luce-dark-pink: #FFB7CA;
  --luce-blue: #223055;
  --luce-dark-gray: #899094;
  --luce-gray: #cccccc;
  --luce-light-gray: #f2f2f2;
  --luce-white: #fff;

  --luce-black-line: 1px solid var(--luce-black);
  --luce-black-bold-line: 3px solid var(--luce-black);

  --luce-padding-xl: 60px;
  --luce-padding-l: 40px;
  --luce-padding-m: 30px;
  --luce-padding-s: 24px;

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;   
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Montserrat", "Noto Sans KR", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.428;
  color: var(--luce-black);
  background-color: #fff;
  -webkit-font-luceoothing: antialiased;
  -moz-osx-font-luceoothing: grayscale;

  --wp--preset--color--pale-pink: var(--luce-dark-pink);
  --wp--preset--color--cyan-bluish-gray: var(--luce-dark-gray);

  --luce-header-height: 70px;
  --luce-shrunk-header-height: 100px;
  --luce-container-width: 45%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}
h1 {
  font-size: 80px;
  font-weight: 400;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 14px;
}

@media (max-width: 1200px) {
  :root {
    --luce-padding-xl: 20px;
    --luce-padding-l: 30px;
    --luce-padding-m: 30px;
    --luce-padding-s: 20px;
  }
  body {
    font-size: 13px;
    --luce-header-height: 70px;
    --luce-container-width: 100%;
  }
  h1 {
    font-size: 60px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 18px;
  }
}

@media (max-width: 781px) {
  :root {
    --luce-padding-xl: 20px;
    --luce-padding-l: 24px;
    --luce-padding-m: 20px;
    --luce-padding-s: 12px;
  }
  body {
    --luce-header-height: 70px;
  }
  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 22px;
  }
  h3 {
    font-size: 20px;
  }
  h4 {
    font-size: 16px;
  }
  h5 {
    font-size: 14px;
  }
}

ul, ol, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

iframe {
  border: none;
  width: 100%;
}

/*--- SITE HEADER ---*/

.site-header {
  background-color: rgba(255,255,255,0.3);
  border-bottom: 1px solid transparent;
  overflow: hidden;
  padding: 0 var(--luce-padding-xl);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--luce-header-height);
  z-index: 999;
  transition: height 0.7s var(--ease-out), border-color 0.3s var(--ease-out);
    box-shadow: rgba(0, 0, 0, 0.03) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.site-header:hover {
  background-color: var(--luce-white);
  border-bottom-color: 0;
}
.site-header.is-stuck {
  background-color: #fff;
}
.site-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--luce-header-height);
  transition: height 0.3s var(--ease-out);
}
.site-header .luce-logo {
  width: 155px;
  position: relative;
  z-index: 99999;
}
.site-header .luce-logo a {
  display: block;
  width: 100%;
}

.site-header.is-shrunk {
  background-color: var(--luce-white);
  height: var(--luce-shrunk-header-height);
}
.site-header.is-shrunk .site-header-content {
  height: var(--luce-shrunk-header-height);
}



@media (max-width: 781px) {
  .site-header {
    border-bottom: none;
  }
}
@media (min-width: 1401px) {
  .site-header .site-menu {
    width: 35% !important;
  }
}

@media (min-width: 1201px) {
  .site-header .site-menu {
    width: var(--luce-container-width);
  }
  .site-header .site-menu > .menu {
    display: flex;
    justify-content: space-between;
  }
  .site-header .site-menu > .menu > .menu-item {
    position: relative;
  }
  .site-header .site-menu > .menu > .menu-item > a {
    border: 1.5px solid transparent;
    border-radius: 20px;
      font-size: 1.3rem;
    font-weight: 500;
    padding: 6px 12px;
    position: relative;
    transition: background-color 0.3s var(--ease-out), border-color 0.2s var(--ease-out);
  }
    /*
  .site-header .site-menu:hover > .menu > .menu-item:hover > a {
    background-color: rgba(255,225,233,0.7);
  }
    */
  .site-header .site-menu > .menu > .menu-item > .sub-menu {
    opacity: 0;
    padding: 30px 8px;
    position: absolute;
    top: 40px;
    left: -5px;
    min-width: 360px;
  }
  .site-header .site-menu > .menu > .menu-item:hover > .sub-menu {
    opacity: 1;
    top: 20px;
    transition: opacity 0.3s var(--ease-out), top 0.6s var(--ease-out);
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item {
    transition: transform 0.3s var(--ease-out);
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item:hover {
    transform: translate3d(4px,0,0);
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a {
    display: inline-block;
    font-size: 1em;
    font-weight: 500;
    padding: 6px 8px;
    position: relative;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a[target="_blank"] {
    padding-right: 22px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a[target="_blank"]::after {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 16px;
    height: 16px;
    transform: translate3d(0,-50%,0);
  }
}

@media (max-width: 1200px) {
  .site-header .site-menu {
    background-color: var(--luce-white);
    display: none;
    overflow: auto;
    padding: calc(var(--luce-header-height) + var(--luce-padding-xl)) var(--luce-padding-xl) var(--luce-padding-xl);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  .site-menu--opened .site-header .site-menu {
    display: flex;
  }
  .site-header .site-menu > .menu {
    display: flex;
    flex-wrap: wrap;
  }
  .site-header .site-menu > .menu > .menu-item {
    position: relative;
    margin-bottom: 24px;
    width: 100%;
  }
  .site-header .site-menu > .menu > .menu-item > a {
    font-size: 30px;
    font-weight: 500;
    position: relative;
  }
  .site-header .site-menu > .menu > .menu-item > a[target="_blank"] {
    padding-right: 18px;
  }
  .site-header .site-menu > .menu > .menu-item > a[target="_blank"]::after {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 20px;
    transform: translate3d(0,-50%,0);
    margin-top: 1px;
  }
  .site-header .site-menu > .menu > .menu-item[class*="current-menu"]::before {
    border: 1.5px solid var(--luce-dark-pink);
    border-radius: 30px;
    content: '';
    position: absolute;
    top: -8px;
    left: -12px;
    width: 60px;
    height: 60px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu {
    margin-top: 8px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a {
    display: inline-block;
    font-size: 16px;
    opacity: 0.6;
    position: relative;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item + .menu-item {
    margin-top: 4px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a[target="_blank"] {
    padding-right: 14px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a[target="_blank"]::after {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    transform: translate3d(0,-50%,0);
    margin-top: 1px;
  }
}

@media (max-width: 781px) {
  .site-header .site-menu > .menu > .menu-item > a {
    font-size: 20px;
  }
  .site-header .site-menu > .menu > .menu-item[class*="current-menu"]::before {
    border-radius: 20px;
    top: -6px;
    width: 40px;
    height: 40px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu {
    gap: 4px 16px;
    margin-top: 8px;
  }
  .site-header .site-menu > .menu > .menu-item > .sub-menu > .menu-item > a {
    font-size: 1.5rem;
  }
}

.site-header .hamburger {
  display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	overflow: visible; 
	text-transform: none;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	width: 50px;
	height: 40px;
	padding: 5px;
	z-index: 9999;
}
.site-header .hamburger .bun {
	width: 100%;
	height: 100%;
	display: inline-block;
	position: relative;
}

.site-header .hamburger .patty {
	background-color: transparent;
	display: block;
	top: 50%;
}
.site-header .hamburger .patty, 
.site-header .hamburger .patty::before, 
.site-header .hamburger .patty::after {
	width: 100%;
	height: 1.5px;
	position: absolute;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.site-header .hamburger .patty::before, 
.site-header .hamburger .patty::after {
  background-color: var(--luce-black);
	content: "";
	display: block; 
}
.site-header .hamburger .patty::before {
	top: -6px;
	transition: top 0.075s 0.12s ease, opacity 0.075s ease; 
}
.site-header .hamburger .patty::after {
	bottom: -6px;
	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}

body[class*="--opened"] .site-header .hamburger .patty {
	background-color: var(--luce-black);
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
body[class*="--opened"] .site-header .hamburger .patty::before {
	top: 0;
	opacity: 0;
	transition: top 0.075s ease, opacity 0.075s 0.12s ease; 
}
body[class*="--opened"] .site-header .hamburger .patty::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

@media (max-width: 1200px) {
  .site-header .hamburger {
    display: block;
  }
}

@media (max-width: 781px) {
  .site-header .hamburger {
    top: 15px;
    right: 15px;
  }
  .site-header .hamburger .patty, 
  .site-header .hamburger .patty::before, 
  .site-header .hamburger .patty::after { 
    height: 1px;
  }
}

.content_inner {position:relative; max-width:1790px; width: 100%; margin: 0 auto;}
.content_inner2 {position:relative; max-width:1220px; width: 100%; margin: 0 auto;}
.line {height: 1px; width: 94%; background: #000; margin: 0 auto 10rem;}

.luce_visu {background: url("../../images/sub_visu01.jpg") center no-repeat; height: 100vh;}
.luce_visu .content_inner {display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.luce_visu .content_inner2 {display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.luce_visu .luce_logo {flex-shrink: 0; flex-basis: 643px; position: relative;}
.luce_visu .luce_logo:after {content: ''; position: absolute; width: 370px; height: 1px; background: #fff; right: 0; top: 45px;}
.luce_visu .luce_text {font-size: 1.3rem; color: #fff; line-height: 1.8; justify-content: flex-end; padding-left: 30px; padding-top: 35px;}

h2.luce_title {text-align: center; font-weight: normal; font-size: 4rem; padding: 20rem 0 17rem;}
.luce_img {padding-bottom: 8rem}
.luce_con_txt, .luce_txt_right {font-size: 1.5rem; line-height: 1.8}
.luce_con_txt {padding-bottom: 8rem}
.luce_img_txt {display: flex; margin-bottom: 10rem}
.luce_img_left {flex-shrink: 0; margin-right: 30px;}
.luce_txt_right {justify-content: flex-end;}
.luce_cont2 {display: flex; margin-bottom: 4.6rem}
.luce_cont2_left {justify-content: flex-start;}
.luce_cont2_right {justify-content: flex-end; margin-left: auto;}
.luce_sub_title {font-weight: normal; font-size: 3rem; padding-bottom: 2rem; color: #111;}

.luce_showroom {display: flex; flex-wrap: wrap; font-size: 0; margin-bottom: 20rem}
.showroom_list {display: flex; flex-wrap: wrap; font-size: 0; flex-basis: 100%}
.showroom_list>li {display: inline-block; width: 100%;}
.showroom_list>li:first-child .showroom__wrap {border-top: 1px solid #000000}
.showroom__wrap {display: flex; align-items: flex-start; height: 100%; padding-bottom: 30px; border-bottom: 1px solid #000000}
.showroom_tit {display: inline-block; width: 140px; padding-right: 50px; font-size: 18px; font-weight: 500; line-height: 1; color: #111; vertical-align: middle}
.showroom_txt {font-size: 1.5rem; line-height: 22px;  width: calc(100% - 140px); padding-right: 20px; display: inline-block;}
.luce_showroom>li {width: 100%; margin-top: 0;}
.luce_showroom>li:first-child .number__wrap {padding-top: 0}
.showroom__wrap {align-items: flex-start; padding: 30px 0}
.showroom_tit {font-size: 1.5rem; font-weight: 500; line-height: 28px}
.showroom__wrap {align-items: flex-start}
.luce_showroom>li .showroom__wrap {padding-bottom: 30px}

@media (max-width: 1790px) {
    .content_inner {padding: 0 1.875rem}
    .content_inner2 {padding: 0 1.875rem}
}

@media (max-width: 1360px) {
    .line {width: 100%;}
}

@media (max-width: 1024px) {
    .luce_visu .luce_logo {flex-shrink: 0; flex-basis: 443px; position: relative;}
    .luce_visu .luce_logo:after {width: 190px;}
    
    h2.luce_title {font-size: 3rem; padding: 15rem 0 12rem;}
}

@media (max-width: 900px) {
    .luce_visu .content_inner {display: block;}
    .luce_visu .content_inner2 {display: block;}
    .luce_visu .luce_logo {flex-shrink: none; flex-basis: 643px; position: relative;}
    .luce_visu .luce_logo img {width: 200px;}
    .luce_visu .luce_logo:after {display: none;}
    .luce_visu .luce_text {justify-content: flex-start; padding-left: 0px; padding-top: 30px;}
    .luce_txt_right {justify-content: flex-start; padding-left: 0px; padding-top: 30px;}
}

@media (max-width: 740px) {
    .luce_img_txt {display: block;}
    .luce_img_left {margin-right: 0px;}
    .luce_img_left img {width: 100%;}
    .luce_cont2_right {justify-content: flex-start; margin-left: auto; padding-top: 20px;}
    
    h2.luce_title {font-size: 3rem; padding: 13rem 0 10rem;}
    
    .luce_cont2 {display: block; margin-bottom: 4.6rem}
    .luce_cont2_left img {width: 100%}
    .luce_cont2_right img {width: 100%}
}

@media (max-width: 680px) {
    .line {margin: 0 auto 8rem;}
    
    .luce_visu .luce_logo img {width: 160px;}
    
    h2.luce_title {font-size: 2.5rem; padding: 10rem 0 7rem;}
    .luce_img {padding-bottom: 4rem}
    .luce_con_txt {padding-bottom: 4rem}
    .luce_img_txt {margin-bottom: 8rem}
    
    .luce_showroom {margin-bottom: 10rem}
    .showroom_tit {width: 110px; padding-right: 30px;}
    .showroom_txt {width: calc(100% - 110px);}
    
    .luce_sub_title {font-size: 2.5rem;}
}

@media (max-width: 480px) {
    h2.luce_title {font-size: 2rem; padding: 8rem 0 5rem;}
    
    .showroom_tit {width: 100px; padding-right: 20px;}
    .showroom_txt {width: calc(100% - 100px);}
}



.history {margin: 20rem 0 15rem; display: flex; align-items: flex-start; justify-content: space-between; padding-left: 10px}
.history .left {position: sticky; top:11.1em; width: 40em; display: none}
.history .left p { font-size: 6.5em; font-weight: 700; line-height: 1.2}
.history .info {position: relative; width: 100%; font-size: 1.5rem}
.history .info .his_line {position: absolute; left: 0; top: 50%; transform: translateY(-50%) ;width: 1px; height: 99% !important; background-color: #000000}
.history .info .his_line .bg {position: absolute; left: 50%; top: 0; width: 2px ;height: 0%; transform: translateX(-50%) ;background-color: #000; max-height: 100%;}
.history .info li {position: relative; display: flex; align-items: flex-start ;line-height: 1.5em}
.history .info li:last-child:before {content: ""; position: absolute; width: 12px; height: 100%; left: 0%; top: 10px; transform: translateX(-50%) ;background-color: #fff; }
.history .info li + li {margin-top: 8rem}
.history .info li .num {font-size: 3rem; font-weight: 600; position: relative;  padding-left: 6rem; z-index: 3; flex-basis: 150px}
.history .info li .num:before {content: ""; position: absolute; left: 0.5px; top: 50%; transform: translate(-50%,-50%) ;width: 18px; height: 18px; border:4px solid #000; background: #fff; }
.history .info li .txt {margin-left: 25px; width: calc(100% - 150px);}
.history .info li .txt p { font-weight: normal; word-break: keep-all; font-size: 1.5rem}
.history .info li .txt p + p {margin-top: 0.3rem}
.history .info li:nth-child(1) .num:before,
.history .info li.active .num:before {background-color: #000;}

@media (max-width: 768px) {
    .history {display: block; margin: 15rem 0 10rem; }
    .history .info {width: 100%; padding-left: 1px;}
    .history .info .line {left: 5px}
    .history .info li + li {margin-top: 2em}
    .history .info li .num {font-size: 2rem; font-weight: 600; position: relative;  padding-left: 3rem; z-index: 3; flex-basis: 100px}
    .history .info li .num:before {width: 16px; height: 16px;}
    .history .left p br {display:none}
    .history .info li .txt p + p {margin-top: 1.2rem}
    .history .info li .txt {margin-left: 0px; width: calc(100% - 100px);}
    .history .info li:last-child:before {top: 8px}
}

@media (max-width: 480px) {
    .history .info li .txt p {font-size: 1.3rem}
}


.portfolio {margin: 15rem 0 10rem; /*display:flex;justify-content:space-between;align-items:flex-start;*/}
.portfolio .left {position:relative;width:48%; border-right: 1px solid #000; padding-right: 50px; height: 60vh}
.portfolio .left .left_txt {font-size: 1.6rem; line-height: 1.8; color: #111; padding-bottom: 50px}
.portfolio .left .pot_img {padding: 20px 0 20px;}
.portfolio .left > a {width: 200px; height: 60px; line-height: 60px; font-size: 1.6rem; color: #111; text-align: center; border: 1px solid #000; position: relative; display: inline-block; box-sizing: border-box;}
.portfolio .left > a:hover {background-color: #000; color: #fff;}
.portfolio .right {width:52%; padding: 30px 0 30px 0; height: 60vh; overflow-y: auto; overflow-x: clip; -ms-overflow-style:none;}
.portfolio .right::-webkit-scrollbar {display: none;}

@media (max-width: 800px) {
    .portfolio {flex-direction:column; margin: 13rem 0 5rem; }
    .portfolio .left {width:100%; margin-bottom:30px; padding-right: 0px; border-right: none; border-bottom: 1px solid #000;height: auto;}
    .portfolio .left .pot_img {padding: 30px 0 20px;}
    .portfolio .left > a {width: 100%; height: 50px; line-height: 50px; margin-bottom: 30px}
    .portfolio .right {width:100%; padding: 30px 0 30px 0px;}
}


.location {margin: 20rem 0 8rem; display:flex;justify-content:space-between;align-items:flex-start;}
.location .location_img {width:50%; }
.location .location_img img {width: 100%;}
.location .location_info {width:50%; padding-left: 85px; margin: auto 0 0 auto}
.location .location_info .loca_tit {font-size: 3rem; color: #111; padding-bottom: 60px;}
.location .location_info .loca_txt {font-size: 1.8rem; color: #111; padding-bottom: 30px;}
.location .info-box {}
.location .info-box li:not(:last-child) { margin-bottom:20px; }
.location .info-box li { font-size:1.6rem; font-weight:400; color:#333; line-height:1.4; letter-spacing:-0.02em; }
.location .info-box li i { color:#9e9e9e; font-size:1.8rem; vertical-align:middle; display:inline-block; margin-right:10px; }
.loca_map {width: 100%; display: block; margin-bottom: 10rem}
.loca_map iframe {width: 100%;}
.location2 {margin: 10rem 0 8rem; display:flex;justify-content:space-between;align-items:flex-start;}
.location2 .location_img {width:50%; }
.location2 .location_img img {width: 100%;}
.location2 .location_info {width:50%; padding-left: 85px; margin: auto 0 0 auto}
.location2 .location_info .loca_tit {font-size: 3rem; color: #111; padding-bottom: 60px;}
.location2 .location_info .loca_txt {font-size: 1.8rem; color: #111; padding-bottom: 30px;}
.location2 .info-box {}
.location2 .info-box li:not(:last-child) { margin-bottom:20px; }
.location2 .info-box li { font-size:1.6rem; font-weight:400; color:#333; line-height:1.4; letter-spacing:-0.02em; }
.location2 .info-box li i { color:#9e9e9e; font-size:1.8rem; vertical-align:middle; display:inline-block; margin-right:10px; }

@media (max-width: 1049px) {
    .location {display:block; margin: 20rem 0 5rem;}
    .location .location_img {width:100%; }
    .location .location_info {width:100%; padding-left: 0px; margin: auto 0 0 auto}
    .location .location_info .loca_tit {padding: 30px 30px 30px 0;}
    .loca_map {margin-bottom: 10rem}
    .location2 {display:block; margin: 10rem 0 5rem;}
    .location2 .location_img {width:100%; }
    .location2 .location_info {width:100%; padding-left: 0px; margin: auto 0 0 auto}
    .location2 .location_info .loca_tit {padding: 30px 30px 30px 0;}
}

@media (max-width: 680px) {
    .location {margin: 15rem 0 8rem; }
    .location .location_info .loca_tit {font-size: 2.5rem; padding-bottom: 30px;}
    .location2 .location_info .loca_tit {font-size: 2.5rem; padding-bottom: 30px;}
}


.product {margin: 20rem 0 10rem;}
.product .pro_detail {display:flex;justify-content:space-between;align-items:flex-start; padding-bottom: 150px;}
.product .pro_detail .pro_detail_left {width: 60%;}
.product .pro_detail .pro_tit {font-size: 4rem; padding-bottom: 20px;}
.product .pro_detail .pro_tit2 {font-size: 3rem; padding-bottom: 40px;}
.product .pro_detail .pro_tit2 span {font-size: 2rem; display: block;}
.product .pro_detail .pro_txt {font-size: 1.5rem; line-height: 1.8}
.product .pro_detail .pro_detail_right {padding-top: 15px;}
.product .pro_detail .pro_detail_right img {width: 220px;}
.product .pro_img {padding-bottom: 30px;}
.comm {width: 100%; background: #f4f4f4; padding: 130px 0;}
.comm .comm_tit {font-size: 3.6rem; padding-bottom: 90px;}
.comm .comm_cont ul {display:flex;justify-content:space-between;flex-wrap:wrap;}
.comm .comm_cont li {width: 30%;}
.comm .comm_cont li .comm_text {padding-top: 60px;}
.comm .comm_cont li .comm_text .comm_txt1 {font-size: 1.8rem; padding-bottom: 30px;}
.comm .comm_cont li .comm_text .comm_txt2 {font-size: 1.5rem; line-height: 1.8}
.product2 {margin: 10rem 0 10rem;}
.pro_draw img {border: 1px solid #000; width: 100%;}

@media (max-width: 1024px) {
    .comm .comm_cont li {width: 32%;}
    .comm .comm_cont li .comm_text {padding-top: 40px;}
}

@media (max-width: 680px) {
    .product {margin: 15rem 0 10rem;}
    .product .pro_detail .pro_tit {font-size: 3.5rem; padding-bottom: 20px;}
    .product .pro_detail .pro_tit2 {font-size: 2.5rem; padding-bottom: 30px;}
    .product .pro_detail .pro_tit2 span {font-size: 1.8rem;}
    .product .pro_detail {display:block; padding-bottom: 100px;}
    .product .pro_detail .pro_detail_left {width: 100%;}
    .product .pro_detail .pro_tit2 span {display: block}
    .product .pro_detail .pro_detail_right {padding-top: 30px;}
    .product .pro_detail .pro_detail_right img {width: 100%;}
    .comm {padding: 100px 0;}
    .comm .comm_tit {font-size: 2.3rem; padding-bottom: 40px;}
    .comm .comm_cont ul {display:block;}
    .comm .comm_cont li {width: 100%; margin-bottom: 40px}
    .comm .comm_cont li:last-child {margin-bottom: 0;}
    .comm .comm_cont li img {width: 100%;}
    .comm .comm_cont li .comm_text {padding-top: 20px;}
    .comm .comm_cont li .comm_text .comm_txt1 {padding-bottom: 10px;}
}

@media (max-width: 480px) {
    .product .pro_detail .pro_tit {font-size: 3rem; padding-bottom: 20px;}
    .product .pro_detail .pro_tit2 {font-size: 2rem; padding-bottom: 20px;}
    .product .pro_detail .pro_tit2 span {font-size: 1.6rem;}
    .product .pro_detail {display:block; padding-bottom: 80px;}
    .product .pro_detail .pro_detail_left {width: 100%;}
    .product .pro_detail .pro_tit2 span {display: block}
    .product .pro_detail .pro_detail_right {padding-top: 30px;}
    .product .pro_detail .pro_detail_right img {width: 100%;}
    .comm {padding: 80px 0;}
    .comm .comm_tit {font-size: 2rem; padding-bottom: 30px;}
    .comm .comm_cont ul {display:block;}
    .comm .comm_cont li {width: 100%; margin-bottom: 40px}
    .comm .comm_cont li:last-child {margin-bottom: 0;}
    .comm .comm_cont li .comm_text {padding-top: 20px;}
    .comm .comm_cont li .comm_text .comm_txt1 {padding-bottom: 10px;}
}


.finishing {margin: 20rem 0 10rem;}
.finish_detail {display:flex;justify-content:space-between;align-items:flex-start; padding-bottom: 110px;}
.finish_detail .finish_tit {width: 25%; font-size: 2rem; font-weight: 500;}
.finish_detail .finish_txt {font-size: 1.5rem; line-height: 1.8; width: 75%;}
.finish_img {max-width: 122rem; width: auto; display: flex; flex-wrap: wrap; gap: 4rem 4rem; margin: 0 auto; padding-bottom: 120px;}
.finish_img li {width: calc((100% - 12rem) / 4); position: relative;}
.finish_img li img {width: 100%;}
.finish_img li p {position: absolute; bottom: 10px; left: 20px; font-size: 1.5rem; font-weight: 600;}
.finish_tit2 {font-size: 2rem; font-weight: 500; padding-bottom: 5px;}
.pattern_detail {display:flex;justify-content:space-between;align-items:flex-start;}
.pattern_img ul {max-width: 59rem; width: auto; display: flex; flex-wrap: wrap; gap: 1rem 1rem; margin: 0 auto;}
.pattern_img li {width: calc((100% - 2rem) / 3); position: relative;}
.pattern_img li img {width: 100%;}
.pattern_img li p {position: absolute; bottom: 10px; left: 20px; font-size: 1.5rem; font-weight: 600;}
.pattern_txt {width: 48%;}
.pattern_txt ul {width: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 auto;}
.pattern_txt li {width: calc((100% - 4rem) / 2); position: relative; font-size: 1.5rem}
.pattern_txt li span {font-weight: 600; width: 30px; display: inline-block;}

.frame_color {margin: 0rem 0 10rem;}
.frame_detail {display:flex;justify-content:space-between;align-items:flex-start; padding-bottom: 110px;flex-wrap: nowrap;}
.frame_detail .frame_tit {font-size: 2rem; font-weight: 500;flex-grow: 1; width: 25%}
.frame_detail .frame_txt {font-size: 1.5rem; line-height: 1.8; width: 75%}
.frame_img {max-width: 80rem; width: auto; display: flex; flex-wrap: wrap; gap: 3rem 3rem; padding-bottom: 120px;}
.frame_img li {width: calc((100% - 15rem) / 6); position: relative;}
.frame_img li img {width: 100%;}
.frame_img li p {position: absolute; bottom: 10px; left: 20px; font-size: 1.5rem; font-weight: 600;}
.pattern_txt2 {width: 30%;}
.pattern_txt2 ul {width: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 auto;}
.pattern_txt2 li {width: 100%; position: relative; font-size: 1.5rem}
.pattern_txt2 li span {font-weight: 600; width: 30px; display: inline-block;}

@media (max-width: 680px) {
    .finishing {margin: 15rem 0 10rem;}
    .finish_detail {padding-bottom: 80px;}
    .finish_img {gap: 1rem 1rem; padding-bottom: 100px;}
    .finish_img li {width: calc((100% - 2rem) / 3);}
    .pattern_detail {display:block; padding-bottom: 0px;}
    .pattern_img {margin-bottom: 30px;}
    .pattern_img ul {max-width: 100%; width: auto; display: flex; flex-wrap: wrap; gap: 1rem 1rem; margin: 0 auto;}
    .pattern_txt {width: 100%;}
    .pattern_txt li {width: calc((100% - 2rem) / 2);}
    
    .frame_color {margin: 10rem 0 10rem;}
    
    .frame_img {max-width: 80rem; width: auto; display: flex; flex-wrap: wrap; gap: 3rem 3rem; padding-bottom: 80px;}
    .frame_img li {width: calc((100% - 12rem) / 5); position: relative;}
    .pattern_txt2 {width: 100%;}
}

@media (max-width: 480px) {
    .finish_detail {display:block; padding-bottom: 60px;}
    .finish_detail .finish_tit {width: 100%; padding-bottom: 10px}
    .finish_detail .finish_txt {width: 100%;}
    .finish_img {gap: 2rem 2rem; padding-bottom: 80px;}
    .finish_img li {width: calc((100% - 2rem) / 2);}
    .pattern_img ul {gap: 2rem 2rem;}
    .pattern_img li {width: calc((100% - 2rem) / 2); position: relative;}
    
    .frame_detail {display:block;}
    .frame_detail .frame_tit {font-size: 2rem; font-weight: 500;flex-grow: 1; width: 100%; padding-bottom: 10px}
    .frame_detail .frame_txt {font-size: 1.5rem; line-height: 1.8; width: 100%}
    
    .frame_img {max-width: 80rem; width: auto; display: flex; flex-wrap: wrap; gap: 3rem 3rem; padding-bottom: 60px;}
    .frame_img li {width: calc((100% - 9rem) / 4); position: relative;}
}

@media (max-width: 475px) {
    .pattern_txt {width: 100%;}
    .pattern_txt ul {width: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 auto;}
    .pattern_txt li {width: 100%; position: relative; font-size: 1.5rem}
}

@media (max-width: 360px) {
    .frame_img li {width: calc((100% - 6rem) / 3); position: relative;}
}


.space {margin: 15rem 0 8rem;}
.space_txt {padding-bottom: 3rem;}
.space_list { max-width: 122rem; width: auto; display: flex; flex-wrap: wrap; gap: 4rem 4rem;}
.space_list a {width: calc((100% - 12rem) / 4); position: relative;}
.space_list figure.effect-apollo {background: #000; overflow: hidden;}
.space_list figure.effect-apollo img {
    opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
.space_list figure.effect-apollo p {
	position: absolute;
	left: 50%;
	top: 50%;
    transform: translate(-50%, -50%);
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
    color: #fff;
    font-size: 1.8rem;
}

.space_list figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

.space_list figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

.space_list figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}


.space1_img {max-width: 122rem; width: auto; display: flex; flex-wrap: wrap; gap: 3rem 3rem; margin: 0 auto; padding-bottom: 20px;}
.space1_img li {width: calc((100% - 9rem) / 4); position: relative;}
.space1_img li.width {width: calc((100% - 3rem) / 2);}
.space1_img li img {width: 100%;}

.space_top {max-width:925px; width: 100%; margin:0 auto 150px; }
.space_img {display: flex; flex-wrap: wrap; gap: 4rem 4rem; padding-bottom: 30px}
.space_img li {width: calc((100% - 4rem) / 2);}
.space_img_2 {display: block;}
.space_img_2 li {width: 100%; padding-bottom: 30px;}
.space_img_caption {font-size: 1.5rem; color: #999999; word-break: keep-all;}
.space_detail {padding-bottom: 150px;}
.space_title {font-size: 4rem; font-weight: 400; padding-bottom: 90px;}
.space_txt {font-size: 1.5rem; line-height: 1.8; color: #111; word-break: keep-all;}
.gallery_title {font-size: 3rem; line-height: 1.8; width: 100%; font-weight: 400; border-bottom: 1px solid #000; margin-bottom: 70px;}
.guest_btn {display: flex; flex-wrap: wrap;justify-content: flex-start;}
.guest_list {margin-right: auto;}
.guest_list a {font-size: 1.5rem; color: #999999; font-weight: 500; cursor: pointer;}
.guest_list a:hover {color: #111}
.guest_next a {font-size: 1.5rem; color: #999999; font-weight: 500; cursor: pointer;}
.guest_next a:hover {color: #111}
.guest_next span {text-align: center; width: 30px; color: #111; display: inline-block;}

@media (max-width: 900px) {
    .space {margin: 12rem 0 8rem;}
    .space_title {font-size: 3rem;}
    .space_list {gap: 3rem 3rem;}
    .space_list a {width: calc((100% - 6rem) / 3); position: relative;}
    .gallery_title {font-size: 2.5rem;}
    
    .space_top {margin:0 auto 130px; }
    .space_img {gap: 2rem 2rem;}
    .space_img li {width: calc((100% - 2rem) / 2);}
    .space_title {padding-bottom: 70px;}
    
    .space1_img {gap: 2rem 2rem;}
    .space1_img li {width: calc((100% - 6rem) / 4); position: relative;}
    .space1_img li.width {width: calc((100% - 2rem) / 2);}
    .space1_img li img {width: 100%;}
}

@media (max-width: 680px) {    
    .space_title {font-size: 2.7rem;}
    .space1_img {gap: 2rem 2rem;}
    .space1_img li {width: calc((100% - 2rem) / 2); position: relative;}
    .space1_img li.width {width: 100%;}
    .space1_img li img {width: 100%;}
    .gallery_title {font-size: 2.3rem;}
}

@media (max-width: 480px) {
    .space_list {gap: 2rem 2rem;}
    .space_list a {width: calc((100% - 2rem) / 2); position: relative;}
    
    .space_top {margin:0 auto 100px; }
    .space_detail {padding-bottom: 100px;}
    .space_title {padding-bottom: 50px;}
}

@media (max-width: 360px) {
    .space_list {gap: 2rem 2rem;}
    .space_list a {width: 100%; position: relative;}
}

.privacy_area {margin: 20rem 0 10rem;}
.privacy_tit {width:100%; border:1px solid #dadada; font-size:1.5rem; line-height:1.6; padding:40px 50px; word-break: keep-all;}
.privacy_tit1 {font-size:2.3rem; color:#525252; line-height:1.6; padding:70px 0 10px; font-weight:500;}
.privacy_txt {font-size:1.5rem; line-height:1.6; color: #898989; word-break: keep-all;}

@media (max-width: 900px) {
    .privacy_area {margin: 15rem 0 10rem;}
}
@media (max-width: 640px) {
    .privacy_tit {padding:30px 30px;}
    .privacy_tit1 {font-size:2rem; color:#525252; line-height:1.6; padding:50px 0 10px; font-weight:500;}
    .privacy_txt {font-size:1.3rem;}
}


#cases {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1.3vw;
    grid-row-gap:  1.3vw;
    font-size: 0;
}

#philosophy, #cases-two, #cases-six, #cases-three, #cases-four {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 1.3vw;
	grid-row-gap:  1.3vw;
}
#cases-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
#cases-six {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#cases-three {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
#cases-four {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.cases-item {
	margin-bottom: 50px !important;
}
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 4; }
.div3 { grid-area: 1 / 4 / 2 / 5; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 5; }

#cases h2.title, #philosophy h2.title, #cases-two h2.title, #cases-six h2.title, #cases-three h2.title, #cases-four h2.title  {
	padding-top: 30px;
	letter-spacing: 5px !important;
}
.tags {
	margin-top: 20px;
}
#highlight .tags {
	margin-top: 0;
}
.et_pb_slide_content, #highlight .highlight-content {
	max-width: 750px;
	margin: auto auto 0 !important;
	font-size: 11px !important;
}
.highlight-content {
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
}
#highlight .et_pb_column, #highlight .et_pb_row {
	position: static;
}
.tags, .tags *, .et_main_title .et_project_categories * {
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #666;
}
.tags p {
	display: inline-block;
}
.tags span {
	margin: 0 10px;
}
#highlight {
	height: calc(100vh - 70px) !important;
	display: grid;
	align-content: center;
	background-size: cover !important;
}
#main-content .project-title h2, .et_pb_title_container h1, .single-project .et_main_title h1 {
	font-size: 30px !important;
	letter-spacing: 15px !important;
	margin-bottom: 10px !important;
}


@media only screen and (max-width: 1000px) {
	#cases {
		display: block !important;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}
	.div1, .div2, .div3, .div4, .div5, .div6 {
		grid-area: auto !important;
	}
	#cases .cases-item {
		width: 48% !important;
		display: inline-block;
		vertical-align: top;
		margin-right: 4% !important;
	}
	#cases .cases-item:nth-child(1) {
		width: 100% !important;
	}
	#cases .cases-item:nth-child(2n+6), #cases .cases-item:nth-child(5), #cases .cases-item.div3 {
		margin-right: 0 !important;
	}
	#cases h2.title, #philosophy h2.title, #cases-two h2.title, #cases-six h2.title, #cases-three h2.title, #cases-four h2.title, #main-content h2 {
		letter-spacing: 3px !important;
		line-height: 18px;
	}
	#main-content #highlight h2 {
		line-height: 38px;
	}
	.tags {
		margin-top: 20px;
		line-height: 7px;
		font-size: 9px !important;
	}
	.tags p a:first-child, .tags p span {
		display: none !important;
	}
#cases .cases-item.div6 {
        display: block!important;
        width: 100%!important
    }
	#highlight, .single-project #highlight {
		height: 70vh !important;
	}
	#highlight .highlight-content {
		padding: 0 5%;
	}
	#philosophy, #cases-two, #cases-six, #cases-three, #cases-four {
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 4%;
		grid-row-gap: 4%;
	}
	#cases-two {
		grid-template-columns: 1fr;
	}
	.cases-item {
		margin-bottom: 0;
	}
	#cases .cases-item {
		margin-bottom: 50px;
	}
	#cases-six .cases-item:last-child, #cases-three .cases-item:last-child {
		display: none !important;
	}
	.cases-excerpt p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
	}

	/* Page */
	#contact-row .et_pb_column_empty {
		min-height: 50vh !important;
		display: block !important;
		margin-top: 65px !important;
    margin-bottom: 65px !important;
	}
	.contact-bottom-text {
		position: relative;
		bottom: inherit;
		margin-top: 100px;
		max-width: 90%;
	}    
}


.comp-brand-list{width: 100%;display: flex;flex-wrap: wrap;}
.comp-brand-list li{height: 80%;width: 50%;}
.comp-brand-list li .img-box{height: 100%;width: 100%;}
.comp-brand-list li .img-box img{width: 100%;height: auto;}