#wrap { z-index: 5; }
#wrap .oneebox { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; position: relative; padding-bottom: 5vw; }
#wrap .oneebox:after { content: url(/images/44/sflower-1-1.png); position: absolute; animation: a03 3s linear infinite; right: -2%; bottom: 10px; zoom: 56%; z-index: 10; }
/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
section .title_box { margin-bottom: 40px }
section .title_box font { font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--primary); text-transform: uppercase; }
section .title_box font:before { content: ''; display: block; width: 13px; border: 1px solid var(--primary); aspect-ratio: 1/1; border-radius: 50px; margin-left: -20px; animation: floatDot 2s ease-in-out infinite; }
section .title_box h2 { font-weight: 600; letter-spacing: 3px; font-size: 38px; color: #7c7576; line-height: 1.4; }
@keyframes floatDot {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}
/* product_area */
#product_area .title_box p { margin-bottom: 10px; }
#product_area .title_box h2 { word-spacing: 100vw; }
#product_area .title_box article { margin-top: 50px; font-size: 16px; line-height: 1.8; word-break: keep-all; letter-spacing: 2.5px; position: relative; color: #818181; }
#product_area .workframe:after { content: url(/images/44/sflower-1.png); position: absolute; animation: a03 2s linear infinite; left: 30%; bottom: 17%; zoom: 41%; z-index: -1; }
#product_area { position: relative; }
section#product_area .title_box { margin-top: 20px; }
#product_area:before { content: ''; position: absolute; width: 100%; height: 50px; background: #E7DCD4; top: 0; }
#product_area .workframe { position: relative; width: min(90%,1500px); display: grid; grid-template-columns: 30% 63%; justify-content: space-between; margin-top: 100px; align-items: start; }
#product_area .applicationList { display: grid; width: 100%; grid-template-columns: repeat(2,1fr); gap: 35px; margin-bottom: 30px; }
#product_area .applicationList >li:first-child { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
#product_area .applicationList >li:first-child .classLink { grid-template-columns: repeat(5,1fr); }
#product_area .applicationMList { border: 1px solid rgba(220,220,220,0.25) }
#product_area .applicationItem { padding: 40px; margin: 0; display: block; box-shadow: 0 0 30px rgb(47 89 114/10%); border-radius: 40px; border: 2px solid #e7dcd4; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; background-image: url(/images/44/gray-wall.jpg); }
#product_area .applicationItem:hover { border-color: #c1b8b1; transform: translateY(-8px); box-shadow: 0 20px 30px rgb(47 89 114/10%); }
#product_area .applicationItem:nth-child(3) { order: 2 }
#product_area .applicationItem.title .item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; padding: 50px 25px 54px 25px }
#product_area .applicationItem.title .item .more_btn { position: relative; margin: 5px }
#product_area .more_btn.white a::after {   }
#product_area .more_btn.white a:hover font { color: #ffffff }
#product_area .more_btn.white font {   }
#product_area .applicationItem .item:hover .Img { -webkit-filter: initial; filter: initial; -webkit-filter: contrast(0) brightness(150%); filter: contrast(0) brightness(200%) }
#product_area .list_box .item { position: relative; }
#product_area .item .atag_item { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#product_area .Img { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; right: 0; }
#product_area .Img::after { background: rgb(198 208 227/60%); content: ""; display: block; width: 60px; aspect-ratio: 1/1; position: absolute; border-radius: 50%; z-index: -1 }
#product_area .applicationItem:not(.title) .item:hover .Img::before { -webkit-animation: masterBtnHover 2s linear infinite; animation: masterBtnHover 2s linear infinite }
@-webkit-keyframes masterBtnHover {
  0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1) }
  20% { opacity: 0.5; -webkit-transform: scale(1.4); transform: scale(1.4) }
  40% { opacity: 0.25; -webkit-transform: scale(1.8); transform: scale(1.8) }
  60% { opacity: 0; -webkit-transform: scale(2.2); transform: scale(2.2) }
  100% { opacity: 0; -webkit-transform: scale(2.2); transform: scale(2.2) }
}
@keyframes masterBtnHover {
  0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1) }
  20% { opacity: 0.5; -webkit-transform: scale(1.4); transform: scale(1.4) }
  40% { opacity: 0.25; -webkit-transform: scale(1.8); transform: scale(1.8) }
  60% { opacity: 0; -webkit-transform: scale(2.2); transform: scale(2.2) }
  100% { opacity: 0; -webkit-transform: scale(2.2); transform: scale(2.2) }
}
@keyframes a03 {
  0%,100% { transform: translateY(0px) }
  50% { transform: translateY(-25px) }
}
#product_area .Txt { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: 15px; border-bottom: 1px solid #ddd; padding-bottom: 15px; }
#product_area .Txt .num { font-size: 15px; line-height: 140%; font-weight: 600; display: inline-flex; aspect-ratio: 1/1; align-items: center; justify-content: center; border-radius: 50px; }
#product_area .Txt .num img { width: 70px; aspect-ratio: 1/1; }
#product_area .Txt .title { display: inline-block; color: var(--black); font-size: 20px; font-weight: 500; letter-spacing: 1px; }
#product_area .subtitle { color: #fff; font-size: 15px; font-weight: 400; letter-spacing: 1px; padding-top: 20px; padding-right: 0px; position: relative; z-index: 5; padding-left: 40px; }
#product_area .Txt .text { height: 85.5px; color: #e9eef5; font-size: 15px; line-height: 1.9; letter-spacing: 0.7px; margin-top: 17px }
#product_area .classLink { display: grid; grid-template-columns: 1fr; gap: 5px; }
#product_area .classLink li { line-height: 120% }
#product_area .classLink li a { font-size: 15px; display: flex; align-items: center; position: relative; }
#product_area .classLink li:hover a { color: var(--primary) }
#product_area .classLink li a:before { content: ""; position: absolute; background-image: url(/images/44/icon-links.png); background-size: contain; width: 10px; height: 10px; left: -20px; }
#product_area .text { font-size: 14px }
#product_area .moreBtn { padding-top: 23px }
#product_area .moreBtn a { position: relative; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; width: 98px; color: #fff; font-weight: 700; letter-spacing: 0.01em; z-index: 1 }
#product_area .moreBtn a::after { content: ""; position: absolute; top: calc(50% - 7.5px); right: -10px; width: 20px; height: 17px; background: url("/images/39/arrow_right_white.png") no-repeat center/cover; z-index: 1; -webkit-filter: contrast(0) brightness(150%); filter: contrast(0) brightness(200%) }
/*serviceJbox*/
.serviceJbox ul { display: flex; justify-content: space-between; margin-top: -60px; }
.serviceJbox li { position: relative; transition: transform 0.3s ease; margin: 125px 10px 0; opacity: 0 }
.serviceJbox li.slick-center:before { content: ""; position: absolute; background: url(/images/37/showermJimg.png); width: 170px; aspect-ratio: 137/232; background-repeat: no-repeat; z-index: -1; top: -67px; left: -96px; background-size: contain; background-position: 50% }
.serviceJbox li .img img { border-radius: 20px; aspect-ratio: 1/1; object-fit: cover; border: #aaa0a1 4px solid; }
.serviceJbox .siveinfo { display: flex; flex-direction: column; align-items: center; padding: 20px 0 }
.serviceJbox li.slick-active { opacity: 1 }
.serviceJbox li a { position: absolute; width: 100%; height: 100%; z-index: 5 }
.serviceJbox li:hover .img { /* overflow: hidden; */ }
.serviceJbox li:hover .img img { -moz-transform: scale(0.97); -webkit-transform: scale(0.97); -o-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97) }
.serviceJbox li.swam01,.serviceJbox li.swam03,.serviceJbox li.swam05 { transform: translateY(-80px); padding-top: 80px }
.serviceJbox li.swam02,.serviceJbox li.swam04,.serviceJbox li.swam06 { transform: translateY(80px); padding-bottom: 80px }
.serviceJbox .btnBox { display: flex; flex-direction: column; align-items: center; margin: 80px 0 15px }
.serviceJbox .arrow_btns_box { display: flex; justify-content: center; margin-top: -60px; position: relative }
.serviceJbox .arrow_btns_box svg { background: #E7DCD4; fill: #908788; margin: 10px; padding: 20px; border-radius: 555px; cursor: pointer }
.serviceJbox .arrow_btns_box .prev svg { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1) }
/* about_area */
#about_area { z-index: 3; background: #fbfbfb; margin-top: 0vw; padding-top: 7vw; overflow: hidden; padding-bottom: 0; background-image: url(/images/44/abg.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; border-top: #E7DCD4 30px solid; }
#about_area:before { content: ''; position: absolute; bottom: -1px; width: 100%; height: 200px; background-image: url(/images/44/about_areabg.png); background-size: cover; background-repeat: no-repeat; background-position: top; z-index: 2; filter: drop-shadow(30px 14px 16px #AAA0A1); }
#about_area:after { content: ''; width: 47.5vw; height: 95%; position: absolute; left: 0; bottom: 0; background: linear-gradient(150deg,rgb(231 220 212/54%),var(--white)); z-index: -1; border-radius: 0 520px 0 0; }
#about_area .paroller { position: absolute; left: 11vw; top: -10vw; z-index: 2; }
#about_area .allwrap { position: absolute; left: -20vw; bottom: 20vh; width: 100%; transform: rotate(90deg); z-index: 0; }
#about_area .allwrap #canvas-container { position: absolute; bottom: 30px; }
#about_area .workframe { display: grid; grid-template-columns: 50% 48%; width: min(85%,1420px); margin-right: 10vw; justify-content: space-between; align-items: end; z-index: 5; position: relative; padding-bottom: 9vw; }
#about_info { margin-bottom: 100px; }
#about_area .title_box { margin-bottom: 30px; }
#about_area .title_box h2 { word-spacing: 100vw; margin-top: 20px; }
#about_area article { margin-bottom: 55px; line-height: 210%; letter-spacing: 1px; font-weight: 400; }
#about_area article * { margin: 0; padding: 0; }
#about_area article p {   }
#about_area article h4 { color: var(--primary); font-size: 18px; font-weight: 500; }
#about_area #fakeNumber { position: relative; z-index: 6; margin-bottom: 40px; }
#about_area #fakeNumber ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
#about_area #fakeNumber li { width: 160px; padding: 10px 25px 10px 0; aspect-ratio: 1/1; display: flex; align-items: center; aspect-ratio: 7/4; border-right: rgb(134 126 127/33%) 1px solid; }
#about_area #fakeNumber li * { color: var(--primary) }
#about_area #fakeNumber h2 { display: flex; align-items: end; justify-content: flex-start; gap: 5px; }
#about_area #fakeNumber h2 b { color: var(--primary); font-size: 46px; font-weight: 600; line-height: 1; font-family: "Arimo",sans-serif; }
#about_area #fakeNumber h2 span { font-size: 18px; font-weight: 400; line-height: 1.5; }
#about_area #fakeNumber p { font-size: 17px; margin-top: 10px; letter-spacing: 3px; }
#about_area #fakeNumber li:first-child { border-radius: 20px 0 0 20px; }
#about_area #fakeNumber li:last-child { border-right: none; }
/* custom_area */
#custom_area { position: relative; padding: 3vw 0; background-image: url(/images/44/gray-wall.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }
#custom_area:after {
  content:url(/images/44/sflower-3.png);position:absolute;/* animation:a03 4s linear infinite;*/
  left:3%;top:-29%;zoom:59%;z-index:10;display:none;
}
#custom_area .workframe { width: min(85%,1600px); display: grid; grid-template-columns: 23% 75%; justify-content: space-between; align-items: center; }
#custom_area .paroller { position: absolute; right: -10%; top: -105%; }
#custom_area .title_box { margin: 0 }
#custom_area .title_box .btn { padding: 0; display: flex; align-items: center; gap: 10px; margin-top: 35px; }
#custom_area .title_box .btn a { width: 60px; aspect-ratio: 1/1; background: #E7DCD4; display: flex !important; align-items: center; justify-content: center; border-radius: 50px; }
#custom_area .title_box .btn svg { width: 15px; height: 15px; fill: #908788; }
#custom_area .title_box .btn a#custom_prev svg { transform: scaleX(-1); }
#custom_area ul li { box-shadow: 0 0 22px rgb(47 95 114/10%); margin: 30px 20px; border-radius: 40px; }
#custom_area ul li >div { padding: 40px 35px; background: white; }
#custom_area ul li .top { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
#custom_area ul li .top p { font-family: "Arimo",sans-serif; color: #303231; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
#custom_area ul li .top p b { color: #E7DCD4; }
#custom_area ul li .top h3 { color: #747a77; font-size: 14px; font-weight: 400; border: 1px solid #c6c6c6; padding: 3px 10px; }
#custom_area ul li span { display: none; width: 20px; height: 4px; }
#custom_area ul li article { font-weight: 300; font-size: 15px; overflow: hidden; margin: 20px 0 0; height: 120px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: justify; line-height: 2; }
/* news_area */
#news_area li .img_box,#book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 { margin-top: 10px; height: 60px; line-height: 150%; font-size: 20px; -webkit-line-clamp: 2; }
/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }
/* photo_area */
#photo_area { padding: 0; z-index: 6; position: relative; }
#photo_area .item { width: 470px; }
#photo_area .item img { aspect-ratio: 4.6/3.2; object-fit: cover; }
@media screen and (max-width:1680px) {
  #custom_area:after { top: -37%; left: 0%; }
}
@media screen and (max-width:1460px) {
  #product_area .title_box article:after { left: unset; right: 20%; bottom: 0; top: -50vw; }
  #custom_area .paroller { right: -18%; width: 400px; }
  #about_area .workframe { margin-right: 5vw; }
  #product_area .workframe { grid-template-columns: 1fr; width: 80%; gap: 30px; }
  #about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3 { width: 20vw; }
  #product_list { width: 500px; margin-left: 30px; }
  #product_list li .clip { height: 590px; }
  #about_area .about_sub_2 { top: -20vw; right: 6vw; }
  #product_area .workframe:after { bottom: auto; top: 18%; left: auto; right: 7%; z-index: -1; zoom: 56%; animation: unset; transform: rotate(61deg); }
}
@media screen and (max-width:1470px) {
  section .title_box h2 { font-size: 33px; }
  #about_area #fakeNumber { left: 0; margin-bottom: 80px; }
  #about_area .workframe { width: min(85%,1210px); grid-template-columns: 51% 45%; margin-right: 10vw; }
}
@media screen and (max-width:1280px) {
  #custom_area .paroller { width: 110px; }
  #photo_area .item { width: 370px; }
  #about_area .workframe { margin: 0 auto; }
  #about_area #fakeNumber { left: -25px; }
}
@media screen and (max-width:1024px) {
  #about_area #fakeNumber li { width: 140px; padding: 25px 25px; }
  #about_area #fakeNumber li:nth-child(2) { border-radius: 0 }
  #about_area #fakeNumber { position: relative; left: -80px; }
  #about_area #fakeNumber ul { grid-template-columns: repeat(3,1fr); }
  #product_area .workframe { width: 85%; gap: 30px; margin-top: 50px; }
}
@media screen and (max-width:980px) {
  #custom_area:after { top: 0; left: unset; right: 20%; }
  .serviceJbox .btnBox { margin-bottom: 0; padding-bottom: 100px; }
  .serviceJbox .arrow_btns_box { margin: 0 }
  .serviceJbox li.swam01,.serviceJbox li.swam03,.serviceJbox li.swam05 { padding-top: 0; transform: translateY(0px); }
  .serviceJbox li { margin: 0 }
  #about_area #fakeNumber { left: 0; }
  #product_area .applicationList >li:first-child .classLink,#product_area .applicationList >li .classLink { grid-template-columns: repeat(3,1fr); }
  #product_area .applicationList >li:first-child { grid-column-end: 2; grid-row-end: 2; }
  #custom_area .title_box { margin-bottom: 30px; padding: 0 5%; }
  #custom_area .title_box .btn { display: none; }
  #custom_area .paroller { top: -30%; }
  #custom_area .workframe { display: block; }
  #about_area:after { width: 100%; height: 78vh; }
  section .clip img { height: auto; }
  #about_area .clip { text-align: end; }
  #about_area .workframe { grid-template-columns: 1fr; gap: 70px; }
  #product_area .applicationList { grid-template-columns: 1fr; gap: 20px; }
  section,#custom_area { padding: 10vw 0; }
}
@media screen and (max-width:760px) {
  #custom_area:after { top: -110px; left: unset; right: 10%; }
  #wrap .oneebox:after { right: unset; left: 4%; bottom: -80px; zoom: 25%; display: none; }
  .serviceJbox .btnBox { margin-top: 15px; }
  #poservice { margin-top: 50px; }
  #about_area .workframe { display: block; width: 100%; }
  #about_info { width: 89%; margin: 0 auto; }
  #about_area #fakeNumber { left: 0; width: 100%; bottom: 35px; }
  #about_area #fakeNumber ul { display: flex; justify-content: space-between; gap: 10px; }
  #product_area .applicationList >li:first-child .classLink,#product_area .applicationList >li .classLink { grid-template-columns: 1fr; }
  #about_area #fakeNumber li:first-child,#about_area #fakeNumber li:last-child { border-radius: 0; }
  section .title_box font { font-size: 22px; }
  section .title_box h2 { font-size: 26px; }
  #product_area .title_box article { word-break: break-all; text-align: justify; letter-spacing: 0; margin-bottom: 60px; margin-top: 20px; }
  #product_area .workframe { display: block; padding: 0; width: 75%; }
  #about_area #fakeNumber p { font-size: 14px; letter-spacing: 0; }
  #about_area #fakeNumber li { width: calc(100%/3); padding: 16px 11px; }
  #about_area:after { height: 48vh; }
  section { padding: 8vw 0 2vw; }
  #product_sub_list>div { margin: 10px auto 50px; }
  #product_sub_list li { width: 150px; }
  #product_sub_list li .clip { height: 150px; }
  #product_list { width: 70vw; }
  #product_list li .clip { height: 80vw; }
  #product_list li .info_box { width: 45vw; height: 30vw; }
  #custom_area .paroller { width: 60px; }
  #about_area #fakeNumber h2 b { font-size: 27px; }
  #about_area #fakeNumber h2 span { font-size: 16px; }
}
@media screen and (max-width:550px) {
  #product_area .title_box article:after { right: -6%; top: -500px; zoom: 15%; }
  #product_sub_list li { margin: 10px; width: 35vw; }
  #product_sub_list li .clip { height: 35vw; }
  #product_list { width: 90vw; }
  #product_list li .clip { height: 100vw; }
  #product_list li .info_box { width: 55vw; height: 40vw; }
  #about_area .about_sub_2 { bottom: 60vw; }
  #news_area li .row { margin: auto; width: 280px; }
  #product_area .workframe:after { top: 16%; zoom: 30%; }
}
@media screen and (max-width:480px) {
  #book_area li.row { margin: auto; width: 250px; }
  #about_area #fakeNumber ul { display: grid; grid-template-columns: repeat(2,1fr); }
  #about_area #fakeNumber li { width: 100%; padding: 0; border-right: none; }
  #about_area #fakeNumber h2 b { font-size: 36px; }
  #about_area .paroller { left: auto; right: 5vw; }
}